縦のメニューバー作成方法で困っています。Part2

Question

今、縦のメニューを作成しています。
横長のボタンが８項目ありマウスがrolloverするとある座標まで移動するというようなものです。
作り方から言えば、まず座標の元となる物体をフィールド外で2つ作成し、実際にボタンにマウスがrolloverするとそのフィールド外の物体の座標まで移動し、マウスがrolloutすると横長ボタンがもう一つの物体の座標までもどる。といった風につくっています。
ここで質問なんですが、実は幕以外に８項目のボタンの下にボタンが選ばれるごとにコメントが表示するようにしたいのですが、自分でやってみたのですがいいように出来ません。
僕が、やってみた方法は、ボタンに_root.gotoandPlay(2)というscriptを書いて横から幕を登場させているので、そのまま２フレーム目にムービークリップ（アルファ０から表れる幕）を作成し幕があらわれるまでは出来たのですが、そこからアルファ0％になるように消したいのですがここの消し方がわかりません。
ちなみに、横長ボタンをシーン１でムービークリップで作成し、その中でボタンにしています。その為、ボタンのオーバー、ダウンを使っても一緒に横にスライドしてメッセージが見えなくなります。
説明が長ったらしくわかりにくいとおもいますが宜しくお願いします。

DPE · Accepted Answer

ご提示のサイトのサンプル、拝見させていただきました。
”幕”とおっしゃるのは、メニューボタンの上で出たり引っ込んだりしている、白い四角形のマーカーのことでしょうか？
これでしたら、メニューボタンをムービークリップとして作り、このタイムラインにマーカーのアニメをまとめて作って、rollOver と rollOut イベントでフレームを切り替えると簡単です。

マーカーが単純な四角形なら、移動させるよりも、原寸をボタンと同じ大きさに作り、左端を基準にして幅を伸縮させる方が簡単だと思います。
移動させると、何かのはずみでステージ外のオブジェクトが表示された時に見えてしまいますし、これを防止するためにマスクが必要になるなど、手間が増えます。


シンボルが増えれば容量はそれだけかさみますし、スクリプトが分散して保守も大変です。
共通する動作もたくさんあるのですから、ボタンに表示する名前やコメント・リンク先など、ボタンごとに違う部分だけを変更できる、柔軟なシンボルを設計してはいかがでしょう。

サンプルは配布する素材ということで、ボタンに表示する名前やコメント・表示するページの URL などを外部テキストファイルから読み込み、使う人の事情に合わせて変更できるようになっているようです。
今回は紙面の都合上、外部から読み込むことを考えた作り方までは無理ですが、Flash MX から登場した”コンポーネント”というタイプのシンボルを利用して、スクリプトをあちこちいじらずにこれらを変更できるボタンの作り方をご紹介します。


コンポーネントというと、Flash に最初から付いているコンボボックスやリストボックスなどの UI コンポーネントが有名です。
これらのコンポーネントには専用の制御クラス（ Flash MX ではオブジェクト）が関連付けされていて、何やら難しく専門的な知識や技術がないと作れないイメージがありますが、実は、ちょっとしたコンポーネントなら簡単に作れます。

コンポーネントとは、編集可能なパラメータを持っている”ムービークリップ”です。ですから、ムービークリップとして作ったシンボルにコンポーネントパラメータを定義するだけで、コンポーネントシンボルになります。
パラメータがあること以外はムービークリップと同じで、シンボルのインスタンスをステージに配置して使います。
スクリプトでも、ムービークリップと同様の制御が可能です。

今回のメニューボタンは、マウスカーソルが重なった時・外れた時の視覚的な演出とクリックした時に指定の HTML ページを開くといった動作は、８つのボタン全てに共通する動作です。
ただ、ボタンに表示する名前とコメント・開く HTML の URL だけが違います。
共通する動作はシンボルとして作り、ボタンごとに違う要素はコンポーネントのパラメータにして変更できるようにします。
コンポーネントが持っているパラメータは、ムービーの編集画面で簡単に編集できます。

-------------------------------------------------------

まずは、視覚的な部分から。
「挿入」→「新規シンボル」で、新しいムービークリップを作ります。
レイヤーは次のように考えます。

　アクション：スクリプトを書きます。
　マーカー　：マーカーを配置します。
　ボタン名　：ボタンの名前を表示するための、ダイナミックテキストフィールドを配置します。
　ボタン背景：ボタンの背景です。

マーカーはモーショントゥイーンで動かします。別途ムービークリップシンボルを作り、そのインスタンスを配置してください。
ボタン名はダイナミックテキストで表示します。テキストフィールドを作り、「ダイナミックテキスト」「単一行」「選択不可」（”Ab”のスイッチを OFF ）に設定してください。


マーカーの伸縮アニメを、仮にそれぞれ５フレームのアニメとしますと、タイムラインは次のような構成になります。

　フレーム　１　：各種初期設定
　フレーム２～６：ロールオーバー時の伸長アニメ
　フレーム７～11：ロールアウト時の縮小・フェードアウトアニメ

マーカーはボタンの背景に重ね、左端を固定して右端だけを伸縮させるようにモーショントゥイーンを作ると、サンプルと同じ動きになります。
モーショントゥイーンの作り方は、ここでは割愛させていただきます。
入門者向けの解説書や解説サイトでは必ずといっていいほど触れられていますので、そちらをご参考になさってください。

ボタン名と背景は、フレーム１～ 11 まで表示します。
ボタン自体もロールオーバー/アウトで移動させる場合は、ボタンの背景と名前用のテキストフィールドを合わせて１つのムービークリップにし、マーカーと一緒にトゥイーンで動かすことになるかと思います。
とりあえず、ここではサンプルと同じく、ボタン自体は動かずマーカーだけが動くものとします。

マーカーのアニメが終わるフレーム６と 11 に、それぞれ stop(); アクションを書きます。
あとは、ロールオーバー時にフレーム２に、ロールアウト時にフレーム７に移動するようにスクリプトを設定して、ビジュアル面での動作は完成です。


このシンボルから作られたインスタンスが全て同じ動作をするように、制御用のスクリプトはシンボルのタイムラインに書きます。
スクリプトを書く前に、コンポーネントのパラメータを定義しておきます。
「ライブラリ」パネルでこのシンボルを選んだ状態で、右クリック（ Mac では control ＋クリック）で出すメニューから「コンポーネント定義...」を選択してください。「コンポーネント定義」パネルが開きます。
主な項目の概要は次の通りです。


　・ ＋　－ ボタン
　　パラメータを追加/削除します。＋で追加、－で削除です。
　　全てのパラメータを削除すると、コンポーネントは普通のムービークリップに戻ります。

　・パラメータ：名前
　　「パラメータ」タブに表示される名前です。
　　日本語も使えます。後から見て分かりやすい名前を定義するといいでしょう。

　・パラメータ：変数
　　コンポーネントパラメータの本体となる、変数の名前です。
　　ActionScript では普通の変数と同様に、インスタンス名.変数名 で参照します。

　・パラメータ：値
　　パラメータのデフォルトの値を設定できます。
　　不要なら空白にしても構いません。

　・パラメータ：タイプ
　　パラメータのデータの型です。
　　よく使われるのは、String（文字列）・Number（数値）・Boolean（ true / false ）・Array（配列変数）など。


今回は、ボタン名・コメント・表示する HTML の URL をコンポーネントパラメータとして定義します。
＋ボタンを３回クリックして、パラメータを３つ追加してください。
名前や変数は何でもいいのですが、仮に、変数を次のように定義したものとします。

　item_name　　 ‥　ボタン名
　message_text　‥　コメント
　page_url　　　‥　クリックした時に開く HTML ページの URL

タイプは３つとも String（文字列）にします。
これで、ムービークリップがコンポーネントシンボルになります。


再び、コンポーネントシンボルの編集に戻ります。
コンポーネントパラメータを定義したムービークリップは、ステージ上のインスタンスをダブルクリックしてもシンボルの編集画面にはなりません。
「ライブラリ」で出す右クリックメニュー→「編集」をご利用ください。

ところで、ボタン名を表示するダイナミックテキストには名前を付けておいてください。
ここでは仮に、” item_title ”と付けたとします。
それから、コメントを表示するためのテキストフィールドも必要です。
これはボタンの数だけ用意する必要はありません。テキストフィールドは１つにして、ロールオーバーの時に表示する内容を書き換えればいいのです。
コメント用のテキストフィールドは、とりあえず、コンポーネントから見て親（１つ上の階層）のタイムラインにあるとして考えます。例えば、メニューボタンをステージに配置する場合は、コメント用のテキストフィールドもステージに用意します。
コメント用のテキストフィールドには、” explain ”というインスタンス名を付けたとします。


コンポーネントシンボルのフレーム１に、ボタンとしての動作などを指示するスクリプトを書きます。
大体、次のようになります。

（↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください。このまま使うとシンタックスエラーになります）


　/*初期設定*/

　/*コンポーネントパラメータは以下の通り*/
　//item_name：ボタンに表示する名前
　//message_text：メニューにカーソルを合わせた時に表示する説明文
　//page_url：クリックした時に表示するHTMLページのＵＲＬ


　//ボタン名を設定
　item_title.text = item_name;


　/*カーソルを合わせた時の処理を定義*/
　this.onRollOver = function()
　{
　　//画面エフェクト：マーカーの伸長アニメを実行
　　this.gotoAndPlay( 2 );

　　//コメントを設定
　　//コメントを表示するテキストフィールドは親のタイムラインにある
　　_parent.explain.text = message_text;
　};


　/*カーソルが外れた時の処理を定義*/
　this.onRollOut = function()
　{
　　//画面エフェクト：フェードアウトしながらマーカーが縮小
　　this.gotoAndPlay( 7 );

　　//コメントをクリア
　　_parent.explain.text = "";
　};


　/*クリックした時の処理を定義*/
　this.onRelease = function()
　{
　　//指定のHTMLページを開く
　　getURL( page_url , "_blank" );
　};


　//タイムラインはここで止めておく
　stop();


this.on*** = function ・・・は、ボタンやムービークリップのインスタンスに書く on アクションの別の書き方です。書き方は違いますが、スクリプトの意味は同じです。
onRollOver でマウスカーソルが重なった時、onRollOut でカーソルが外れた時、onRelease でクリックされた時の動作を定義しています。

ロールオーバー時にやることは、

　・マーカーの伸長アニメを再生（つまり、フレーム２に移動）
　・コメントを、親のタイムラインにあるテキストフィールド” explain ”に表示

ロールアウト時は、

　・マーカーの縮小アニメを再生（つまり、フレーム７に移動）
　・コメントをクリア

そして、クリックされた時の仕事はページを表示するだけですね。
これをそのままスクリプトにしたものです。
コメントや表示する URL などは、コンポーネントのパラメータを利用しています。


ダイナミックテキストに何かを表示するには、「変数：」の項目に変数名を指定して変数の内容を表示できるようにする方法と、テキストフィールドが内部に持っている text というプロパティを書き換える方法があります。
上記のスクリプトでは、ボタン名もコメントも、text プロパティを書き換える方法で表示を更新しています。
ボタン名を表示するテキストフィールドには item_title というインスタンス名が付いており、表示する名前はコンポーネントパラメータ item_name に入っていますから、

　item_title.text = item_name;

で、ボタン名を表示できます。
コメントを表示する場合も考え方は同じです。
ただし、テキストフィールド” explain ”は親の階層にあるものとしていますので、親の階層を表す _parent というターゲットパスが必要です。


以上でコンポーネントシンボルは完成です。
ムービークリップと同様に、ステージに必要な数だけインスタンスを配置し、インスタンスを選択した状態で「プロパティ」パネルを見てください。
右上の方に「プロパティ」と「パラメータ」というタブが表示されているかと思います。
「パラメータ」のタブをクリックすると、コンポーネントの持つパラメータを編集できます。
ボタンに表示する名前やコメント・ HTML の URL を入力し、「ムービープレビュー」で正常に動くかどうか確認してみてください。
なお、ステージにダイナミックテキストのテキストフィールドを作り、インスタンス名に” explain ”と付けることをお忘れなく。このテキストフィールドがないと、コメントが表示されません。

コンポーネントパラメータとは、早い話が変数のことです。
このシンボルから作られたインスタンスならどれでも、同じ名前の変数を持ちます。
ただ、普通の変数はスクリプトを書き換えないと編集できないのですが、コンポーネントパラメータは、スクリプトを変更することなくムービーの編集画面で値を編集できる点が異なります。
本質はただの変数ですから、外部から読み込んだ変数をコンポーネントパラメータに設定したり、スクリプトで随時書き換えたりすることも可能です。
機会がありましたら、外部から読み込んだ内容をコンポーネントに渡せるように改良してみてください。


長くなってすみませんでした。
不明な点がありましたら、補足してください。

DPE · Answer

＃３、４です。


＃３の例では、フレーム１の this.onRollOver = ・・・と this.onRollOut = ・・・という箇所で、ボタンにマウスカーソルが重なった時にフレーム２に、マウスカーソルが離れた時にフレーム７に移動するように指示しています。
まとめますと、”スクリプト”レイヤーの内容は次のようになります。

・フレーム１
ボタンとしての動作（マーカーのアニメの実行と、コメント・ページの表示）を指示をまとめて書きます。
＃３の中ほどでご紹介しております、一連のスクリプトを書いてください。
なお、ロールオーバー/アウト時にはマーカーのアニメを動かす以外にも、コメントを表示・クリアするといった仕事もありますので、これらも同時にさばけるようにしています。

・フレーム６、11
stop(); アクションを書きます。
ロールオーバー後、カーソルが重なっている間はマーカーが重なった状態、ロールアウトしてその後カーソルが外れたままの間はボタンだけが見えている状態を維持するためです。


ところで、”マーカー”レイヤーのフレーム１もキーフレーム（●）になっているようですが。
マーカーがフレーム１で存在していると、「メニューボタン」がステージに登場した時点でマーカーが見えてしまいます。
＃４で書きましたように、マーカーはフレーム２から登場すればいいので、フレーム１では不要です。
”マーカー”レイヤーのフレーム１にマーカーのインスタンスが配置されているかと思いますが、これを削除して空白のキーフレームにしてみてください。

DPE · Answer

＃３です。


メニューボタンのムービークリップ・・・まあ、パラメータを定義してコンポーネントシンボルになりますが、仮にこれを「メニューボタン」という名前のシンボルだとします。
サンプルではボタンの上でマーカーが動いているのですから、ボタンとマーカーを独立したシンボルとして作って別々に動かすのではなくて、マーカーをアニメーション付きで「メニューボタン」シンボル内に入れ、これ１つで完結したシンボルにしてしまおうというのが＃３のコンセプトです。

ただ、マーカーの動きはモーショントゥイーンで付けるのですが、モーショントゥイーンはシンボルに変換しないと利用できません。
ですから、結果的にはマーカーもシンボルとして作ることになります。
マーカーは、要は四角形を描いてシンボルに変換し、これのインスタンスを「メニューボタン」シンボル内に配置すればいいだけです。
マーカーのシンボルはどのように作っても構いません。
「挿入」→「新規シンボル」で予めマーカーのシンボルを作っておいて、そのインスタンスを「メニューボタン」シンボルのタイムラインに配置してもいいですし、「メニューボタン」シンボルの”マーカー”レイヤーに描画した四角形を「シンボルに変換」でシンボルにする方法でも同じことです。


ボタンがステージに登場した直後は rollOver イベントが発生しておらず、「メニューボタン」のインスタンスは、最初はフレーム１が表示されたままタイムラインが止まっています。
この時点では、マーカーはまだ必要ありません。マーカーはフレーム２から登場させます。
「メニューボタン」シンボル内でマーカーのシンボルを作るのでしたら、”マーカー”レイヤーのフレーム２で四角形を描画し、これをシンボルに変換してみてください。


マーカーの動きは＃３でも書きました通り、左端を固定して右側を伸び縮みさせるモーショントゥイーンにすると簡単です。
ロールアウトで縮む（＃３の例ではフレーム７～ 11 に作るトゥイーン）時は、大きさの変化とともにアルファの変化を加えると、フェードアウトしながら縮んでいくアニメになります。

左端を基準にした伸縮アニメは、シンボルの中心点を左端に決めると作りやすいです。
描画した四角形をシンボルに変換する時、ダイアログに表示されている「基準点：」の９つの四角形のうち、左端に並んだ３つの四角形のどれか１つ（どれでも構いません）をクリックしてください。マーカーのシンボルの中心点が左端に設定され、このシンボルから作られたインスタンスも全て左端が中心点になります。
ちなみに、シンボルの編集画面を開いて、＋マークが左端に来るように絵を移動しても、中心点を左端にすることができます。

「自由変形」等で変形する時、対象に○マーク（最初は中央に表示されています）が表示されるかと思います。
このマークの位置が、変形ツールで変形する時の中心（変形点）になります。
インスタンスを変形する時は、○マークをダブルクリックするとマークがインスタンスの中心点に移動します。
つまり、マーカーのシンボルの中心点を左端にしておくとマーカーのインスタンスの中心点も左端になり、変形点（○マーク）をダブルクリックすれば簡単に左端に移動できるので、左端を基点にした変形もしやくなるというわけです。

なお、「プロパティ」や「情報」「変形」パネルで数値を直接入力して変形する場合は、インスタンスの中心点を基準にして変形されます。

sassakun · Answer

う～ん，＃１です。
昨日からずっと考えてました。
参考サイトのサンプルを見るとますますわからなくなった気が…
サンプルの幕は動きませんし，テキストは変数を読み込んでいますし…

基本的に rollOut でアルファ0に近づけることはわかったのですが，
例えば， ボタン１ がら ボタン２ にすぐ移ったとき，
幕はどうなる？　元の位置に帰る？
テキストはダイナミックテキスト？
　…　…　…

きりがなく疑問が生まれて，質問のしようもないので，勝手に作りました。
なんとかアレンジしてください。
幕はやはり８つ用意してください。
そしてそれぞれをムービークリップにして，インタンス名を付けてください。

例　インスタンス名：maku1～maku8

ムービークリップですが，別に中で何も動かさなくて良いです。
単に幕を描いて，その幕の上に各説明文の文字を書いてください。

┌幕1───-┐　インスタンス名：maku1
│ボタン１説明│
│つらつら…　 │
│つらつら…　 │
└─────┘

それで，おそらく，ボタンの動きはスクリプトでされていると思うので，
幕もスクリプトで動かしましょうよ。１フレームしかないFlashです。
フレームを使ったら，面倒でややこしくなりますし，説明が困難になりました。

初期状態，下のようにそれぞれを配置してください。
ボタンを 物体B に近づけたように，幕も物体に近づければ良いのではないでしょうか？


　物体C　　　物体D
　　　　　　　　物体A 物体B
　　　　　　┌──────ステージ──
　　　　　　│ボタン１
　　　　　　│ボタン２
　　　　　　│ボタン３
　　　　　　│ … …
　　　　　　│
┌──┐│
│幕幕││
│幕幕││
└──┘│


そして，
物体C のインスタンス名を　buttaiC ，
物体D のインスタンス名を　buttaiD　とし，

幕１～８ は編集の都合上，別レイヤーに分けて，
座標は同じ位置に置いてください。

_root のタイムラインの フレーム1 のスクリプトに，次のように値を設定しておきます。

---コピペ可------------------
spd_x = 0.4;  //幕の動くスピード
spd_alp1 = 10;  //アルファの増率
spd_alp2 = -20;  //アルファの減率
---------------------------

そして，
例えば ボタン１ には下のようにスクリプトを書いてください。

---コピペ可------------------------------------
on (rollOver) {

//幕1のｘ座標を物体Cのｘ座標にセット
_root.maku1._x = _root.buttaiC._x;

//幕1のアルファを 0 にセット
_root.maku1._alpha = 0;

//以下を１フレーム進む時間毎に1回計算
this.onEnterFrame = function() {

//これはボタンを動かすスクリプト例 (関係なし)
//this._x += (_root.buttaiB._x-this._x)*0.4;

//幕１のｘ座標を物体Dの方へ移動
_root.maku1._x += (_root.buttaiD._x-_root.maku1._x)*_root.spd_x;

//もし幕1のアルファが100より小さければ
if (_root.maku1._alpha<100) {

//幕1のアルファを徐々に増やす
_root.maku1._alpha += _root.spd_alp1;

//アルファが100以上になれば
} else {
//幕1のアルファを 100 で固定
_root.maku1._alpha = 100;
}
};
}

on (rollOut, dragOut) {

//以下を１フレーム進む時間毎に1回計算
this.onEnterFrame = function() {

//これはボタンを動かすスクリプト例 (関係なし)
//this._x += (_root.buttaiA._x-this._x)*0.4;

//幕１のｘ座標を物体Cの方へ移動
_root.maku1._alpha += _root.spd_alp2;
};
}
---------------------------------------------

これで，
ボタン１に rollOver すると，幕１ (maku1) が左の見えないところからスライドしてきて，
rollOut すると，幕１ (maku1) がだんだん消えます。

ボタン２～８も同様のスクリプトを書いてください。
それぞれのスクリプトは，「maku1」の部分を「maku○」に置換するだけでOKです。

出方や消え方のスピードは，フレーム1の変数の値を変更してください。
なぜフレーム1に持ってきているかと言えば，ボタン２，ボタン３，…，ボタン８ まで作ったときフレームで定義しておくと全てが一斉に変わるからです。単にそれだけの理由です。
出る場所や止まる場所は，物体C，Dを移動させて調節してください。

sassakun · Answer

たいへん苦労されて，テキストで表現しようとされているのはよくわかるのですが，何度読んでもよくわかりません。でも，前回(Part1)よりは少しわかったような気がします。　　物体A 物体B ┌──────ステージ── │ボタン１ │ボタン２ │ボタン３ │ … … │ と，ボタン８まであって，例えばボタン２に rollover するとボタン２は物体Bのｘ座標に近づくように移動して，同時に幕が左から登場するわけですね。　　物体A 物体B ┌──────ステージ── │ボタン１ │　ボタン２→　rollover │ボタン３ │… … ├──┐ │幕幕│→ │幕幕│→ ├──┘ │ ↑こんな感じに。 >> そこからアルファ0％になるように消したいのですが >> ここの消し方がわかりません。この部分が最もわかりません。 "いつ" アルファ0％にしたいのですか？「そのまま」ですか？　そのままだと，～タイムライン～～～～～～～～～幕レイヤー　筆・・|●|●------->●------->|●| 　　　　アルファ→ 　　100　　　　　100　　　　　　0 　　　　動作　→　　　　　　移動　　　　消える～～～～～～～～～～～～～～とすれば良いだけですよね。移動し終わったフレームに，おそらく書いているだろうと思われる stop(); を取って，それ以降にさらにフレームを追加して，最後のフレームをキーフレームにして，そのキーフレームの幕のプロパティをアルファ0％にして，モーショントゥイーンをかければ良いわけです。もし "いつ" というのがボタン２のある（あった）エリアから rollOut したときであれば，上のようなしくみはそのままで，移動しきったフレーム(フレーム数 ?? )に， stop(); と書いておいて，ボタン２のある(あった)エリアに， on (rollOut) { _root.gotoAndPlay(??); } と書けばいいことになり，先日ご質問のPart1で，回答者さんが答えているのと同じ回答になってしまいます。上のようにすると，rollover からすぐ rollOut したとき動きがガクッとなりますけどね。それはそれとして，一応はアルファ0％になるアニメーションにはなります。当然，カクッとならない方法もありますよ。とにかく，「"いつ"アルファ0％にしたいのか」というのが大変重要です。 >> その為、ボタンのオーバー、ダウンを使っても >> 一緒に横にスライドしてメッセージが見えなくなります。これは，ボタンとメッセージとを同じオブジェクトにしているからです。ついでに， _root.gotoandPlay(2); としているのは，あまりよろしくないと思います。メッセージはボタンと同じオブジェクトに入れるのではなく，幕と同じムービークリップに入れて，幕とメッセージを引っ付けて出す方が良いと思います。だから，_root.gotoandPlay(2);　ではなくて， _root.<幕１>.gotoandPlay(2);　などとした方が良いです。こういった場合， _root を直接動かすと，他の物が動かしにくくなります。 <幕１>はインスタンス名のつもりですが，日本語ですからそのまま使えませんよ。 <幕１>～<幕８>のムービークリップを作って，各そのムービークリップの中に幕とメッセージが左から出てくるアニメーションを作成し，そのムービークリップを gotoandPlay(2); させる方が良いですと言う意味です。何にしても，「"いつ"アルファ0％にしたいのか」がわからないので，正確には答えられません。

縦のメニューバー作成方法で困っています。Part2

ご提示のサイトのサンプル、拝見させていただきました。

この回答への補足

＃３、４です。

＃３です。

この回答への補足

う～ん，＃１です。

たいへん苦労されて，

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング