TOPページ > 月別表示
本文開始▼
やわらか戦車でおなじみのラレコ氏が作成するFlashアニメーション「くわがたツマミ」の公式サイトが見れなくなって早数週間。。。サーバーメンテナンスのためとか書いてあった気がするけど長すぎ。。。
そんなこんなでラレコ氏のポートフォリオサイトから、くわがたツマミのサイトに移動してみたら普通に表示できた。どうやら知らぬ間に「www」を省略出来なくなっていたみたい。メンテナンス期間中だけかも知れないけど。それはそうと、久々の新キャラ「ツネリ」ちゃんが登場ですね～。
--追記--
この日記を書いた翌日からwww省略しても以前と同じように表示されるようになったみたいです。自分が書いた日記が密かに影響！？（んなわけない。
Flash作品ページにお気に入りFlashサイトへのリンクを追加しました。
web業界紙「Web Designing
その名も全国web制作会社リスト オンラインデータベース。全国各地のweb制作会社が検索できます。また、データ件数もかなりのもので2007年1月現在では約1700件ものweb制作会社が登録されています。
現役webデザイナーには目の肥やしになるかと思いますし、地方でwebデザインをやりたいという人には就職活動の手助けになるでしょう。
RSSがだいぶ浸透したわけで、RSSを利用し何かできないかなと思いサイトを巡っていたら、gooのRSS一覧ページを発見。
http://www.goo.ne.jp/rss/
これを利用してなんか面白そうなことできそうな予感。
ついにSOULHEADのベストアルバムBEST OF SOULHEAD
ボーカルと楽曲の良さは日本トップレベルだと思います。倖田來未とコラボしたり映画「dear friends」の主題歌
SOULHEADオススメ楽曲リスト
[ 試聴 ] 
[ 試聴 ] 
[ 試聴 ] 
[ 試聴 ] 
[ 試聴 ] 昔からjavascriptは存在していましたが、htmlに直接記述してソースが煩雑になったり、activeXのセキュリティ上の問題などが原因で使用を控えていた時期がありますが、web標準が注目されはじめ、同時にjavascriptも再び注目を集め始めてきました。ajaxを利用したアプリケーションも公開されてきました。googleマップが良い例ですね。
というわけで、web標準に適したjavascriptの書き方を説明しているサイトを紹介。
一撃必殺JavaScript日本語リファレンス
ここまで充実かつWEB標準に準拠した日本語javascriptリファレンスサイトは類を見ないくらいなのでオススメです。DOMやAjaxライブラリのリファレンスなども充実しています。
DOMが実装されている言語にはいくつか種類があるが、actionscript 2.0、javascript、php4、php5のattributesプロパティの違いを説明。
まず、php4（php4のDOMは中途半端な仕様の為、基本的に全てが標準から外れているがそのへんは今回はノータッチ）。
php4のattributesプロパティは他の言語とは異なり、単純配列を返す。つまり以下のような記述が必要となる。
$attr = $root->attributes(); /* php4ではプロパティも「（）」を付ける */
$out = $attr[0]->value; /* 0番目に対応する属性値をoutへ代入 */
echo $out;
続いて、javascriptとphp5。
javascriptとphp5のattributesプロパティの仕様は基本的に同じはず。getNamedItemメソッドを使用する。
$attr = $root->attributes(); /* 構文は各言語に合わせて */
$out = $attr->getNamedItem("class")->value; /* class属性の値をoutへ代入 */
echo $out;
Flash actionscriptのattributesプロパティは構造体を返す。
var attr = root.attributes();
var out = attr.class.value; /* class属性の値をoutへ代入 */
trace(out);
テストしてないので記述ミスとかあるかもしれませんが、だいたいこんな感じ。初心者にはFlash actionscriptのDOMがオススメですかね。機能もシンプルだし、Flash自体もライトユーザーが多いわけだし。
javascriptを使いリンク先のサムネイルを表示させる方法と、IE6以下でも透過PNGを使用する方法を見つけたので紹介。
まずはサムネイルの表示方法から。以下の文章はPHPSPOT開発日誌様の文章を引用しています。
- previewbubble.zip をダウンロード
- previewbubble.js の var bubbleImagePath = '/images/bg.png'; の画像パスをあわせる
- <script type="text/javascript" src="previewbubble.js"></script> でJS読み込み
- class に previewlink を付与 <a class="previewlink" href="http://www.cnn.com">CNN</a>
これだけで、サムネイルの表示が可能（このアプリケーションがサムネイルを保持している必要がありますが）です。ソースもほとんど手を加えなくて済むのでラクチンです。
続いて透過PNG。以下の文章はデザインウォーカー様から引用しています。
- iepngfix.jsっちゅうスクリプトをダウンロードしてサーバにアップロード（右クリックで対象を保存で。）
- 透過PNG画像を表示したいhtmlの<head>から</head>の間に
<script language="JavaScript" type="text/javascript" src="iepngfix.js"></script>
って書いてiepngfix.jsを読み込みます。- CSS（スタイルシート）でPNGファイルをバックグラウンド指定してるクラスやIDに以下の一行を追加。
* html .iepngfix { behavior: expression(IEPNGFIX.fix(this)); }
（.iepngfixの部分はPNG画像を指定したクラス名、もしくはID名を指定）
* はIE6、5用のCSSハックですね。これでIE6、5でposition:fixedが使えれば最強なんだけどなぁ。ちなみにこれらのスクリプトはIE6、5にのみ適用すればいいので、条件分岐コメントを使用しても良いかと思います。
ちなみに、サムネイル表示はリンクページで実践済みなので是非ご覧下さい。
--追記--
これらのテクニックはIE5.01では使用できないみたいです。IE6とIE5.5のみ適用されます。透過PNGのほうも試してみたので紹介。
まず黒地の背景に透過PNGを普通に置いた場合。
FireFox、opera、IE7で見ると画像が透けて黒地の背景が見えますが、IE6、IE5.5では背景部分がグレーになっているかと思います。
次に上記ライブラリを使用した場合。
IE6、IE5でも画像が透けて見えるようになったかと思います。
最後に上記ライブラリを使用し、背景を白地にした場合。
画像は同じものを使用しているのにもかかわらず、見た目が異なることがわかります。
これでデザインのバリエーションが増えること間違い無しですね。
※このライブラリはposition:absoluteそれに加えてbackgroundと組み合わせると色々と問題が発生するので注意！
↑単純にIEがpositionとbackgroundの組み合わせに不具合があるだけなのかも知れないので一旦保留。検証する時間が無いので申し訳ないです。
今売れに売れている任天堂Wii
http://gigazine.net/index.php?/news/comments/20070117_wii_sports_diet/
数々のダイエット用品がありますが、これほど楽しくて苦にならないダイエット方法は無いかと思います。遊ぶだけですもんねｗあ～俺もwii欲しいなぁ。。。
据え置き型ゲーム機である任天堂Wii
いよいよやわらか戦車9話が公開されましたｗ今回は歌モノであり、ご飯モノでもありますｗ
http://anime.livedoor.com/theater/2.html
何度見てもラレコ氏のFlashは良く出来てるなと感心。アニメーションとしてクオリティ、洗練されたテイスト、絶妙にマッチした音声、そしてキャラクターの可愛らしさどれをとっても最高です。
それにしても、やわらか戦車グッズたくさんでてるなぁ。。。ちょっとほしいかもｗ
やわらか戦車 The Legend of the Yawaraka Tank
RUNA やわらか戦車 クリアカバー for 2nd iPod nano 4000028901
やわらか戦車（book）
やわらか戦車の退却アクセ ver.1.5 10個BOX （食玩）
やわらか戦車 ソーラーライト キーチェーン 子育てキャノン
やわらか戦車 ソーラーライト ストラップ 練り物キャノン
ポケットモンスターが登場してからかれこれ10年経つというわけなのでポケットモンスター ダイヤモンド・パール公式サイトを紹介。さすがにポケモンで遊ぶ歳でもないので肝心のゲームにはあまり興味がないのだけど、このサイト自体はよくできていると思った。（これだけシリーズ化されているってことは出来の良いゲームなんだろうけど。）
まず、最初に目を引いたのがwebサイトのテイスト。ゲームと同じくドット絵でデザインされているので、ゲームユーザーにはとても親しみ易く、また、ゲームをしないユーザーにも斬新なコンテンツとして魅力を感じられる作りとなっている。サイト初回訪問時にキャラクターを作成し、そのキャラクターを操作しコンテンツ内を見て回るのだが、これがまたゲームに忠実な挙動になっていて他のサイトにないワクワク感がある。サウンドもゲームに使われていた物を使っている（多分初期ポケモン）ので昔からのファンには嬉しい要素だろう。
操作しているだけでも楽しいのだが、このサイトには大きな特徴が2つある。１つはデータベースとしての価値があるということ。もう１つは多人数参加型サイトであるということだ。
このサイトの情報量は相当なものだ。過去のシリーズのオープニング映像やテレビCM、ポケモンの辞典、ゲームサウンドなど様々な情報を扱っている。全てを見て回るには数時間は要する。
個人的に興味を引いたのが、オンラインゲームのように複数のユーザーと画面を共有できる仕組み。基本的には、クライアント単体で処理しているのだが、一部コンテンツでは複数のユーザーが画面を共有する。しかし、この仕組みには参加人数が多くなるとサーバー側の処理が追いつかなくなる（画面を共有するので常にサーバーにアクセスする必要がある為）という欠点がある。このサイトではその欠点を逆に利用し予約システムを採用している。ユーザーは任意にコンテンツを予約し、時間が来たらそのコンテンツに参加できるのである。そうすることでアクセスが分散されサーバーの負担が減るというわけだ。ちなみに予約の待ち時間というのがリアルで、込み具合によっては数時間待つことになる。待っている間に他のコンテンツを見たりして時間をつぶすのも楽しい。また、予約はサイトを閉じても有効なので、別のサイトに行くことも可能だ。
このサイト、ミニゲームもいくつか入っているんだけど、これを発展させてサイト上で動作するポケモンとか作ったら面白いかも。サイト上で対戦とかできたら手軽だしいいと思う。
横一列に並ぶリスト（インライン要素）にCSSを使い背景画像を指定したいケースがあると思うけど、ブラウザの実装上（特にIE）避けている人が多いかと思います。背景画像を指定する際、画像分の高さ（height）を指定したいところだけどインライン要素にはheightは指定できない（W3Cの仕様です）。なので、paddingを使用し高さを確保します。
ここで問題となるのがIEのバグ。win IE6（標準・互換両モード）はインライン要素にpadding-bottomを指定しても上手く反映されない（top,left,rightは反映される）。つまり、テキスト部分より下側にpadding領域が生成されないため、テキストより大きめの画像を縦中央揃えにすると画像の下側がカットされてしまう。このバグを回避するには2つ方法（他にもあるかもしれないです。）があるので紹介します。
と、その前にサンプルソースをご覧下さい。
/* htmlソース */
<div id="links">
<span><a href="#">あいうえお</a></span>
<span><a href="#">かきくけこ</a></span>
<span><a href="#">さしすせそ</a></span>
</div>
/* CSSソース */ /* icon.gifは29×29pxです。 */
* { margin:0; padding:0; }
#links { margin:50px; padding-bottom:7px; }
#links span { padding:8px 0 7px 35px; background:url(icon.gif) no-repeat 0 0; }
#links span a { font-size:14px; }
上記サンプルがその方法の一つです。HTML自体はいたって単純な物（本来ulを使うべきところですがサンプルということで…）。padding:8px 0 7px 35px;とfont-size:14px;で画像分（上下padding + 文字サイズ = 画像サイズ）のスペースを確保しているわけですが、win IEではこの方法だと下パディングが確保されません。このバグを回避するのがpadding-bottom:7px;の部分。インライン要素を囲う親に下パディングを指定してやります（インライン要素に指定した下パディングと同量もしくはそれ以上）。そうすることでIEでも反映されます。
もう一つは、スペーサー（透明画像）をいれる方法。HTMLサンプルの<div id="links">直下かリストの末尾に入れます。スペーサーには背景画像と同等の高さを指定します（幅は1pxでOK。）。これだけでOK。親要素（#links）には特別指定はいらないです。気をつけるべきところあえて挙げるのであれば、画像とテキストの縦位置でしょうか。vertical-align:top;に指定しておけば問題はず。
ちなみに、win IE5.01にはインライン要素（画像は可）にpadding（上下左右）を適用することができないため、事実上、背景画像は指定できないと思う。
webページを作成する際、W3Cの規格に沿った標準モードか、過去のブラウザと互換性を持った互換モードを選ぶことになるわけだが、そこでwin IEでちょっとした問題があるわけです。
XHTMLを作成する際、utf-8以外の文字コードを使用する場合は、必ずxml宣言をしなければならない。通常xml宣言を書いた場合（それプラスDTDをフル記述）は標準モードになるわけなのだが、win IE6はバグで互換モードになってしまう。つまり、win IE5と同等の動作をし、バグも持ち越される。
しかし、この互換モードになってしまうというバグは考えようによっては大きなメリットにもなる。ターゲットブラウザをwin IE6以上やfirefox、opera等に絞るのであれば単なるデメリットでしかないが、win IE5.xも視野に入れるとなるとかえって好都合なのだ。基本的にwin IE6互換モードとwin IE5.xは挙動が同じため、win IE6互換モードに対応させれば、特に意識することなくwin IE5.xにも対応させることが可能なため。CSSハックも同じ物を指定してやるだけでよい（CSSハックを使う際はIE7でのチェックを忘れずに）。
逆にxml宣言を取り除くと標準モードになるわけだが、このモードを使用してwin IE5.xに対応させようとすると苦労するかと思う。win IE6標準モードとwin IE5.xでは挙動が異なる為CSSハックが使えない。基本的にwin IE向けCSSハックはIE6、IE5両方に適用されてしまうため、両者のバグが一致する時のみにしかCSSハックが使用できない。IE5.xだけに個別のCSSを適用させたい場合は、条件分岐コメントを利用するという手もあるがそんなことをするくらいなら、xml宣言をしたほうが良いと思う。
というわけで今後仕事でそういう案件にかかわりそうな気がしたので書いてみたわけです（・ω・）
CSSのセレクタの一つに属性セレクタという物がある。
/* case 1 */
#container[class]{
margin:10px;
}
/* case 2 */
#container[class="subPage"]{
margin:50px;
/* case 3 */
#container{ //IE用
margin:30px;
}
#container[id]{ //firefox,opera,safari用
margin:50px;
}
case 1ではid属性「container」が指定された要素に何かしらのclass属性が指定されている要素のみ対してプロパティを指定している。case 2ではcase 1の条件に加えてclass属性に「subpage」が指定されている要素のみに対してプロパティを指定している。
属性セレクタはIE6やIE5には対応していないので、当サイトではそれを利用してIE6とIE5には異なる属性を指定（CSSハック）している。手順は先にIE向けにスタイルを定義して、その後属性セレクタを使用してスタイルを上書きし、IE以外のブラウザにスタイルを適用させる。（case 3）
しかしこのCSSハックは文法的には正しいのに世間一般では使われていない。何故かと思い調べてみたら、どうやらmacIEも属性セレクタには対応してないのが原因っぽい。どういうことかと言うと、macIEが属性セレクタに対応していないということは、winIE用のCSSハックがmacIEに適用されてしまうということ。macIEとwinIEが同じバグを抱えている保証は無いため支障が出てしまう。
というわけで、当サイトはmacIEでの表示は保証できません。あしからず。ちなみに、winIE用のCSSハックはIE7の表示に多大な影響を与える可能性があるので（自分の旧サイトがそうでした）、今後は控える、もしくはIE７で表示確認したほうが良いかと思います。
--追記--
CSSハック対象をwinIE5,6のみにしたい場合は子セレクタハックや隣接セレクタハックが有効な模様（これらはmacIEには対応している為）。
/* case 4 子セレクタ */
#container > ul{
margin:10px;
}
/* case 5 隣接セレクタ */
h2 + p{
margin:5px;
}
case 4はID属性「container」の子であるul要素のみに適用されるスタイルです。あくまでも子だけに有効で子孫には適用されません。case 5 はh2要素と隣合うp要素のみに適用されます。
当サイトではCSS講座も行っていますので是非ご覧下さい。
※この記事はxhtmlカテゴリに属してますが、直接xhtmlとは関係ないです。ご了承くださいませ。
今年に入って新しい会社に勤め始めたのですが、最初に制作に関わった案件が某企業サイトの特集記事ページ。結構前から続いてる特集ページなので、そのなごりかテーブルレイアウトで作成されているのですが、自分がwebを勉強し始めたのがテーブルレイアウトからCSSレイアウトに移行し始めた時期からだったので、テーブルレイアウトの知識がほとんどなく苦労した。そんなわけでテーブルレイアウトの勉強を始めることに。
画像をふんだんに使ったテーブルレイアウトはパズルのピースをはめ込むような作業の為、画像のスライスやセルの幅の指定がCSSレイアウトよりも厳密である必要性を感じた。また、CSSレイアウトに比べ、スライスする画像の数が多くなるため、CSSレイアウトよりも作業量が多く感じた。
あとテーブルレイアウトに関して発見したことといえば、table要素の height属性。もちろんweb標準に準拠するサイトであれば使ってはいけない属性なのだが、何かと便利そうなので調べてみると…なんとHTML4.01やXHTML1.0では非推奨属性ではなく、仕様内にすら定義されてないみたい。でも、ほとんどのブラウザでは使用できるみたい。（height属性はtd、th要素であれば、非推奨ながら正式に使用可能。）
ふと思ったのだが、テーブルレイアウト（ある程度適切にマークアップされている場合は除いて）を採用していて更新の必要性のないページ場合は、テキストも画像として書き出してaltを指定してやったほうが全然効率的だと思う。ブラウザの機能で文字サイズを変更されても影響無いわけだし。
花より男子2の主題歌である「Flavor Of Life
というわけでさっそく本題へ。
2年半くらい前に加藤ミリヤがデビューしたわけですが、当時から声質が宇多田ヒカルと似てるなぁと思ってた（曲やフレーズにもよるけど）。若干、加藤ミリヤのほうが低音が効いてる感じかなと。
で今回の「Flavor Of Life
--追記--
花より男子って韓国バージョン（流星花園）
流星花園 ~花より男子~ DVD-BOX 1
流星花園 ~花より男子~ DVD-BOX 2
流星花園 ~花より男子~ スペシャルBOX
all aboutの記事でwindow.onloadを待たずにDOM処理を開始するというものがあったのですが、なるほどなと。
まず、DOMとはなんぞや？
DOMとは、Document Object Modelの省略表記で、プログラムやスクリプトが文書の内容や構造、見栄えに対してアクセスできるようにするためのインターフェースのことです。
つまり、javascriptやPHPなどのプログラムを使い、XHTML(XML)の各要素にアクセスし、テキストの内容を変更したり、属性値を変更したりなど何かと便利な仕組みのことです。
通常、javascriptでDOMを操作するにはページが全て読み込まれてからでないと無理（DOMはノード（各要素やテキスト）を扱うので、それが無ければ当然操作ができない。）なのですが、上記サイトの例ではbody要素をjavascriptで無理やり書き出してノードを追加して色々やってるみたいです。色々と副作用もありそうな感じですが、覚えておいて損はない感じ。（特に、アフィリエイトとかやっている人は読み込み待ちが長いと思うので実用的かも。）
javascriptとDOMを使いたいならこの本がオススメ！DOMの一覧や各種オブジェクトが綺麗に整理されて書かれているので大変読みやすいです。javascriptのリファレンスの中では一番の出来かと。
JavaScriptビジュアル・リファレンス
また同シリーズでactionscriptリファレンスも出ています。こちらも、かなり実用的。一通りイベントハンドラメソッドやリスナー、各クラス（MX2004以下）などが網羅されているので持っておくと便利。冒頭にオブジェクト指向プログラミングの基礎知識的なもの載っているので、そこまで詳しくない人でも入りやすいかも。
ActionScriptビジュアル・リファレンス
ユーザービリティやアクセシビリティを意識して、フォントサイズ切り替え機能を実装するサイトが増えてきましたが、どうやって作るのか分からない人も多いかと思いますので制作方法を紹介。
当サイトではjavascript + cssでフォントサイズ切り替え機能を実現していますので、ある程度javascriptとcssの知識があることを前提として説明していきます。
フォントサイズ切り替え機能の概要を説明しますと…
といった感じです。では実際のソースを見てみましょう。まずXHTML(HTML)から。ちなみに、このサンプルは実際サイトで使っているものと違うものなので、コピペしても動作の保証はしません。あくまで大まかな流れとしてとらえてください。
■XHTML
//ヘッダー内に以下の一行を追加（この部分がフォント用CSSに置き換わる）
//このファイル内にクッキーの有無の判定やクッキーの書き込み処理を定義
//（複数スタイルシートを読み込む際はこのファイルを優先させる必要があるので最後に書く）
<script src="http://sample.com/common/js/fontsize.js" type="text/javascript"></script>
//body内のフォント切り替えボタンにしたい部分にonClickイベントハンドラを追加
//fontsize.js内のfontChange関数を実行
<p>文字の大きさ</p>
<ul>
<li onClick="fontChange('big')">大</li>
<li onClick="fontChange('medium')">中</li>
<li onClick="fontChange('small')">小</li>
</ul>
■javascript( fontsize.js内に記述 )
//イベントハンドラから受け取った値を元にクッキーに値を書き込む関数
function fontChange(str){
var targetFile;
switch(str){
case "small":
targetFile="http://sample.com/common/css/font_small.css";
break;
case "medium":
targetFile="http://sample.com/common/css/font_medium.css";
break;
case "big":
targetFile="http://sample.com/common/css/font_big.css";
break;
default:
alert("error");
break;
}
//フォント用CSSのファイル名をクッキーの値として保存
//フォント切り替え機能をサイト全体適用するためpathに/（ルート）を指定
document.cookie="fontstyle="+targetFile+";path=/;";
window.location.reload(); //ページをリロードして設定を反映。
}
//以下はページが読み込まれる際必ず実行される処理
var name="fontstyle";
var cookie=document.cookie; //クッキーを取得
if(-1==cookie.indexOf(name)){ //クッキーがなければsmallを指定（デフォルト）
var file='http://sample.com/common/css/font_small.css';
}else{
var pos_s=cookie.indexOf(name)+name.length+1; //クッキーの値の開始位置
var pos_e=cookie.indexOf(";",pos_s); //クッキーの値の終了位置
if(-1==pos_e){ //末尾にセミコロンがあるか？
var file=cookie.slice(pos_s); //無い
}else{
var file=cookie.slice(pos_s,pos_e); //有る
}
}
//クッキーの値に対応するCSSを読み込む。
document.write('<link rel="stylesheet" href="'+file+'" type="text/css" />');
■CSS
//font_small.css内
#content p{ font-size : 10px ; }
#content h2{ font-size : 12px ; }
//font_big.css内
#content p{ font-size : 14px ; }
#content h2{ font-size : 16px ; }
//font_large.css内
#content p{ font-size : 12px ; }
#content h2{ font-size : 14px ; }
と、だいたいこんな感じになります。
このケースではcontent部分のpとh2のフォントサイズを切り替えてますが、臨機応変に指定してください。
今回はフォントサイズ切り替え機能として取り上げましたが、CSSで指定するプロパティを変更すれば、背景色や文字色、レイアウトなども変更が可能です。
blogをflash化するということは、必然的にmovabletypeが吐き出すxhtmlファイルをflashに読み込んで処理することになると思うが、問題点が浮上。。。
FlashのDOM（XMLを操作するための仕様）がlevel1までしか対応してないことがあげられる。しかも、level1で最も使えるメソッドであるdocument.getElementsByTagNameが使えない。つまりFlashでノードを操作する際は、childNodesで辿っていく必要がある。
しかし、XHTMLの性質上のちのちソースに手が加わり、構造が大きく変わる可能性があるので、childNodesでノードを辿る方法は汎用性が無いので実用的ではない。
というわけで、自作でgetElementById、getElementsByTagName作ってみようかなと。完成したら配布する予定ですのでよろしくです。
--追記--
Flashとmtを始めから連携させることが前提であれば、エントリーの出力ファイル形式をxmlにすれば結構楽に実現できそうかも。
以前作成した、商品レビューページなんだけど動作重いなぁ。。。
MYSQL使ってデータをクエリしてるんだけど、長い時だと10秒くらい時間かかる。早ければ1秒程度なんだけど。アクセス数増えてきたら絶対無理くさいな。
やっぱXMLでデータ管理して上手い具合にやったほうが安定するのかなぁ。
CSSでレイアウトする時問題になるのが、ブラウザ間のCSSの実装の差異（バグなど）だが、つまずきやすいポイントを簡単にまとめてみた。また、CSSレイアウトの基本的なテクニックも紹介。
#container #nav #flash{display:block}#flash{display:block}text-indent:-9999px;text-indent:-9999px;をa要素に指定した場合、これをアクティブな状態にすると不要な枠が表れる。
本文終了▲
