【ひらブラ vol.4】gumi田村さんに訊く「ズバリ!Cocos2d-xのココが魅力」

2014-02-07 12:00 投稿

前々回のエントリで、映画「ゼロ・グラビティ」に関連し映画における無重力表現のヒミツについて触れました。「観るというよりも体験型の映画だ」と書きましたが、実はボク、映画館で3回も「体験」しました。

1回は普通の映画館で、もう1回はIMAX-3Dで、そして3回目は「4DX」というシステムを導入している映画館で観ました。IMAXは、首都圏をはじめ全国展開しているのでご存知の方も多いと思いますが、4DXは聞いたことが無い方も多いと思います。…実は私もそうでした。

▲4DX日本初上陸の地、中川コロナワールドにて

4DXは、CJ4Dplex社の映画館システムで、映画のシーンとシンクロして、さまざまな体感型の演出が作動する仕組みです。その演出がとても凝っていて、単に座席が動くだけでなく、「風」「水」「香り」「煙」「泡」「光」といった、まさに人間の五感を刺激する演出が盛りだくさんなんです。さらに、耳元に強力なエア・コンプレッサーが設置してあったり、観客の背中をボコボコっと突くような装置もあって、観客をハッとさせたり驚かせたりする仕掛けが映画のシーンに連動しているので、本当にテーマパークのアトラクションさながらの体験ができます。

既存の映画を独自拡張する「4DX」

「4DX」が特徴的なのは、4DX向けの専用作品があるわけではなく、普通のロードショウ映画を独自に4DXフォーマットに対応させている点です。「ゼロ・グラビティ」では、宇宙飛行士の動きに合わせて座席が傾いたり動いたりするので、まさに「G」を体感することができます。「47RONIN」では、切腹のシーンでその瞬間に観客の背中を「ドンッ!」と叩くという演出があり、思わずビックリして悲鳴を上げてしまいました。

もちろん「4DX」に向いている作品とそうでないものはあるので、ロードショウ作品のなかから選別しているものと思われます。なかでも「パシフィック・リム」は相当話題になったようで、年末に4DXでアンコール上映があったほど。確かに、4DXに適したコンテンツに違いありません。

1895年にフランスのリュミエール兄弟が世界初の商業映画を上映してから、約120年。「スクリーンと観客席」という伝統的なフォーマットで続いてきた映画。それが、扇風機やミスト発生器、香りのアトマイザーやスモーク装置といったH/W技術と、それを映画作品とシンクロさせるシステム、さらに、どのタイミングでどの演出を行うか?というデザインをするためのオーサリングS/W技術の出会いによって、新たなベクトルに「楽しさ」が独自拡張されたわけです。まさに「4DX」ですね。

ちなみに、4DXを日本で展開しているパートナーは、愛知県にある株式会社コロナという会社で、2014年1月現在では、名古屋市と北九州市にある複合型娯楽施設「コロナワールド」の2ヶ所でしか体験することができません。近くに住んでいらっしゃる方はラッキーかもしれませんよ(笑)。ちなみにボクは、どうしても4DXで「ゼロ・グラビティ」が観たくて、東京から名古屋まで行きました。

レンチキュラーでもパララックスでもない裸眼立体視

上記には書きませんでしたが、4DXは立体視に対応しています。入口で3Dメガネを受け取って鑑賞します。

立体視は、メガネを必要とするものとメガネが不要なものとに大きく別れます。大型施設向けの裸眼立体視スクリーンも開発されてはいますが、まだまだ映画館は前者のメガネを必要とする方式が主流です。後者の代表的なものは、みなさんもご存知の「ニンテンドー3DS」。こちらはメガネが不要なことから、裸眼立体視と呼ばれています。

この裸眼立体視は、右目と左目に別の映像を届けるために、ディスプレイに特殊なレンズやバリアと呼ばれる遮蔽物を取り付けるのが一般的です。専門的な用語になりますが、レンチキュラー方式やパララックスバリア方式と呼ばれる技術によって立体視を作り出します。ボクは立体視関連の仕事もしているので少しばかり詳しいのですが、映像(ディスプレイ)と両目の位置の関係がとても重要になります。

以前、iPadで『ライフ・オブ・パイ』という映画作品を観たときに、不思議な感覚に襲われました。twitterfacebookでもかなり興奮気味につぶやいたので(笑)ボクのお友達は覚えているかもしれません。iPadですから、当然、立体視の機能はありません。メガネもありません。普通にiTunesで映画をレンタルして視聴しているだけなのに、なぜか立体映像にみえる瞬間があるのです。

その原因を探ろうと、立体映像にみえたシーンをコマ送りにして検証してみたところ、スゴイことが分かりました。

▲上部のマスク部分に注目(イメージ)

映画を観る際、スクリーンやディスプレイのサイズと映像コンテンツのサイズとの相性(アスペクト比と言ったりします)の関係で、映像の上下に「黒い帯(マスク)」が入ることがあります。地上波の場合、左右の映像をカットするトリミング方式が採られる場合が多いので「マスク」が表示されることは稀ですが、DVDやBlu-ray、VOD系の動画ストリーミングサービスで映画をレンタルや購入して視聴する場合「マスク」が表示されることがあります。

『ライフ・オブ・パイ』のハイライトのひとつに、船上の主人公と虎に向かって、大量の”トビウオ”の群れが飛んでくるシーンがあります。このシーンで、なんと、本来は映像があってはいけないはずの「マスク」部分、つまり黒い帯の部分にトビウオが飛び出しているのです。

ほんの一瞬なので、意識していないと気付けません。でも、無意識にそれを「立体視」とボクは錯覚したわけです。いやぁ、アイディアの勝利ですね!ボクはこの作品しか知らないのですが、他にも同様の手法を使っている作品があったら、ぜひ教えて欲しいです。

もちろんこの手法が映画業界で一般的なものになるとは思いませんが、4DXと同様、人間の感性に訴えかけるテクニックはまだまだ奥が深いなぁと痛感しました。

技術だけではダメだし、思いつきだけでもダメ。技術とアイディアが出会ってこそ、新しい付加価値が生まれます。その出会いがステキな出会いになるような、そんなことにも挑戦していきたいですね。

さて、今回のコラムはここまで。ここからはいよいよ、過去2週にわたってお送りしてきたゲームエンジン「Cocos2d-x」の話題の完結編をお届けします。過去2回分を未読の方はぜひこちらから(ひらブラvol.2ひらブラvol.3)どうぞ!

gumi田村さんに訊く「ズバリ!Cocos2d-xのココが魅力」

前回、前々回と、Cocos2d-xとは何なのか、また、CRIWAREと一緒に使うことで、どんなことができるようになるのかをご紹介してきました。完結編の今回は、Cocos2d-xを積極的に自社のプロジェクトでも導入し、その知見をひろく同業間でも共有するために勉強会などを独自に開催されている、株式会社gumiの執行役員CTO、田村祐樹さんに登場して頂きます。

:田村さん、こんにちは!宜しくお願いします。

田村氏:こちらこそ、宜しくお願いします。

:まず、簡単に自己紹介をお願いできますでしょうか?

田村氏:はい!みなさん、はじめまして。gumiの田村です。経歴としてはスーパーファミコンの時代からゲームが好きで、それが高じて(拗れて?)ゲーム業界に入りました。前職では、先だって解散して少し話題になった会社なのですが、ネバーランドカンパニーという会社で長くゲームを作っていました。gumiに入り数年経ち、ハードもスマホに移行しましたが、やっていることは今も変わらずゲーム開発です(笑)。

:ありがとうございます。CS(コンシューマーゲーム=家庭用ゲーム機)系のご出身ということで…、CRIWAREもCS系からスマホの領域に展開しているので、親近感を抱いています。

田村氏:ははは、確かにそうかもしれませんね。ブログタイトルが「ブラックボックス」ということですが、10年近くコンシューマーゲームの開発をしてきた身として、実は、「ブラックボックス」というのは胸をくすぐられるものがあります。

:といいますと?

田村氏:私がゲームを作り始めたとき、ゲーム機とはまさに「謎」そのものでした。画面を表示させるだけでも一苦労でしたから(汗)。

:なるほど。スマホは基本的に開発環境などオープンなものですが、CS系の場合は違いますからね。…では、さっそくですが、Cocos2d-xのお話に移りたいと思います。

田村氏:最初に断っておきたいのは、「ゲームをつくるためのたった1つの理想的な選択肢」というのは存在しないということです。

:ふむふむ…

田村氏:例えば、あなたがWindowsで動作するRPGを作りたいなら「RPGツクール」という選択肢があります。「ノベルゲーム」や「アドベンチャーゲーム」を作りたいなら、「吉里吉里」という選択肢もあります。

:確かに。「ゲームを作る」という行為そのものは、昔にくらべてずいぶん身近なものになりましたよね。

田村氏:でも、まるで見たこともないゲームを作りたい、そう思ったならどうしたらいいでしょう?そのときは、手段の選択肢の1つとして「Cocos2d-x」を考えて見ても良いかもしれません。もちろん、すでに見たことのあるようなゲームも作れますし(笑)。

:なぜ「Cocos2d-x」がオススメなんでしょう?

田村氏:私がCocos2d-xに初めて触れたとき「CSゲームを開発しているときに、Cocos2d-xがあったら良かったのに!」と強く思いました。それほどCocos2d-xは便利なもので、ゲームをつくりたい皆さんの役に立つものだと確信したわけです。

:それはすごい…

田村氏:腕に覚えのあるプログラマなら、もしかしたら、こんなの自分で書いた方がはやいよ!と思うかもしれません。ときには思ったように動いてくれなくて苛立ちを覚えたりもするかもしれません。それでもなお、自分でプログラムを書くよりも「Cocos2d-x」を選択すべき理由があります。

:その理由が気になります。

田村氏:理由のひとつとして、良くも悪くも、ゲームが「高度化」したということがあげられます。数十年前に発売されたゲームのコードはそのハードウェアの上だけで動けば良かったですし、とてもとても小さなものでした。色数も16色しか使えない、256色しか使えない、なんてことも普通でした。

:でも、今は・・・

田村氏:はい、状況はすっかり変わりました。フルカラーのゲーム、物理演算を使ったゲーム、フルアニメーション、フルボイスのゲーム、そんなゲームが世の中には満ちあふれており、ゲームを遊ぶ人たちは、iPhoneやAndroidの上で動く事を望んでいます。

:そうなると、どうしても1つのゲームを作るのにプログラムをゼロから毎回構築していくのは効率的ではないですね。

田村氏:まさにそのとおりなんです。iPhoneやAndroid毎にソースコードを書き分けることも効率的とはいえません。グラフィクスやオーディオ、入出力などといった共通のロジックと、ゲームのロジックを表現する構造の分離が進んでいます。

:ボクらのミドルウェアの存在価値も、まったく一緒です。共有知としての技術と、ゲームの面白さやアイディアの部分とを切り分ける前提で、CRIWAREもいろいろなゲームのお手伝いが出来ています。

田村氏:はい。要するに「Cocos2d-x」がやってくれることは、「あなたはゲームをつくることに集中してください。私がハードウェアの面倒は見ますし、よく使う機能は用意しますから!」ということなのです。

:とっても分かりやすい説明ですね。

田村氏:実際、「Cocos2d-x」レベルのシステムを、個人のプログラマが作ることは容易ではありません。何人もの非常に優れたプログラマがさまざまな試行錯誤をし、時には地雷を踏み、頭を悩ませ、構築してきたものですから。

:大勢のプログラマの汗と涙の結晶としてのゲームエンジン。その上で安心してゲームをつくることができる、それが「Cocos2d-x」の良さというわけですね。

田村氏:まさしく。Cocos2d-xさえあれば、アーティストやデザイナーとチームを組めば、今すぐにでもキャラクタを表示させ、歩き出させることだって出来ます。iPhoneやAndroidでキャラクタを表示させる手段について、本を開く必要もなければ、Googleで調べる必要もないのです。OpenGLという描画の仕組みを使い、効率的かつ扱いやすいようにキャラクタを表示してくれるからです。

:ブラックボックスっぽくなってきましたね!

田村氏:例えば、キャラクタは「スプライト」という単位で表示をしてくれます。ここで「Cocos2d-x」が提供してくれる機能(コンポーネント)について簡単に説明したいと思います。Cocos2d-xの良さは調べればいくらでも出てくるでしょうから、これが何かの役に立てば幸いです。

:おっ、楽しみです。なるべく分かりやすく説明をお願いします。

田村氏:了解しました(笑)。まず、「Cocos2d-x」はScene(シーン)という仕組みを提供します。このシーンという機能、例えばドラクエタイプRPGで言えば、タイトル画面が1つのシーンです。

:シーン!分かりやすい仕組みの名前ですね。

田村氏:戦闘も1つのシーン、フィールドを歩き回るのも1つのシーンです。このシーンという仕組みは、こうした1つの画面を構成し、その行き来できる仕組みだと考えて下さい。ここに色んなゲームオブジェクトがぶら下がります。ドラクエなら、街のマップがぶら下がり、そこには主人公や街の人、王様がぶら下がるのです。

:分かりやすい構成ですね。

田村氏:これに加えて、Director(ディレクター)という仕組みを提供します。これはゲームのシーンなどを管理する仕組みで、シーンの切替などを行ってくれる仕組みです。さらに、Layer(レイヤー)という仕組みを提供します。レイヤーは、Photoshopのようなお絵かきツールを触ったことがある人にはなじみ深い仕組みです。

:確かに、レイヤーという概念は理解しやすいですね。

田村氏:ですよね。もし触ったことがない人は、「幾つもの透明な板を幾重にも重ねることができ、その板に絵をぶら下げられるもの」だと捉えて下さい。アドベンチャーゲームなら、背景が1つのレイヤー、その手前にいるキャラクターが立っているところ1つのレイヤー、会話ウィンドウも1つのレイヤーです。

:ゲームはいろいろなレイヤーが折り重なって構成されているわけですね。

田村氏:このレイヤーにぶら下がる絵こそが、先ほど話に出てきたSprite(スプライト)という仕組みで、これが動き回ることでゲームを成り立たせます。アドベンチャーやRPGでいうと、キャラクター1人1人がスプライトですね。スプライトは重ねることもぶら下げることもできるので、顔や、腕、足などが別のスプライトになっていることもあります。このスプライトのぶら下げ、すなわち、親子機能を提供してくれるのもCocos2d-xの良いところです。

:”親”が動けば”子供”はついてきてくれるし、”親”が回転すれば”子供”も回転してくれる、というわけですね。

田村氏:その通りです。さて、これらを配置したらゲーム作りは終わりでしょうか。いえ、そうではありません。これらを動かすには定期的に「何か」をする必要があります。その仕組みをScheduler(スケジューラー)と言います。

:スケジューラー!これまた分かりやすいネーミング(笑)

田村氏:スケジューラーは決まったタイミングでしてほしいことを実行してくれます。たとえば、時間がきたらキャラクター動かしたり、表示したり、消したり、そういったことをするためのものです。RPGなどで街の人が勝手に動くのはスケジューラーがそれを動かしてくれているからなのです。

:とても分かりやすい説明で、イメージしやすいですね。

田村氏:ここまでの機能や仕組みだけでもゲームは作れますが、たくさんのキャラクターがでてきたりしたら、それを動かすのは容易ではありません。そこで、Cocos2d-xでは、Action(アクション)という仕組みが用意されています。

:アクション?前回のブログでボクが紹介した機能(リンク先の【demo2】を参照)がいよいよ登場ですね!?

田村氏:はい、そのアクション機能です。これは、絵の場所を動かしたり、拡大縮小したり、回転したり、表示、非表示を切り替えたり、透明度や色を変えたり、そんな事をしてくれる仕組みです。

:なるほど!

田村氏:「そういうことじゃない、自分は、勇者に剣を振らせたいんだ!」と思うかもしれません。この仕組みももちろん用意されています。昔ながらの方法でいえば、パラパラアニメという連続した絵を表示することでアニメーションが行えます。昔のアニメーションがセル画を連続させて動きをつけていたのと同じです。

:他にも方法があるのですか?

田村氏:はい。新しい方法だと、スケルトンアニメーションという仕組みがあります。これは、スケルトン=骨が入ったアニメーションで、キャラクターの腕、足、身体、頭というパーツを骨で繋ぐことでリアルなアニメーションをする仕組みです。

:かなり表現手法が深まってきましたね!

田村氏:他にもまだまだあります。たとえば、Transitions(トランジション)という仕組み。これは、シーンとシーンの繋ぎ目を綺麗に繋いでくれる仕組みです。RPGで戦闘に入るときに画面が歪んだり爆発したりするゲームがありますが、あんなことができます。

:きっと・・・もっとありますよね?

田村氏:もちろん(笑)!特殊効果系ですと、Effects(エフェクト)という仕組みがあります。これを使うと、キャラクタを歪ませたり、バラバラにしたり、波打つように見せたり、色んなことが出来ます。これはキャラクターにさまざまな効果をつけて見た目を楽しませるものです。敵が出現したり、消滅したりするときに、格好良く演出をつけることができるでしょう。

:RPGでボスを倒したときに爆発したり、四散したりする演出にも使えますね!

田村氏:そうなんです、どんどんイメージは広がっていくと思います。さらに、これに加えて、Particle(パーティクル)という仕組みもあります。

:映画のCGでも流行した仕組みですね!

田村氏:はい。ご存知ない方のために少し説明すると、パーティクルとは、小さな「粒」のことです。この小さな粒をたくさん発生させることで、火や煙、雲や霧、1枚の絵では表現が難しいものを作り出します。

:ある程度、Cocos2d-xについては知っていたつもりでしたが、本当にいろいろな仕組みが用意されていると知って、正直、ビックリしました。

田村氏:これらはCocos2d-xの機能のほんの一部です。でも、これだけで、すでに見下ろし型のRPGが作れますね。例えば、王様に命じられてドラゴンを倒しにいくゲームとか。シューティングゲームや、パズルゲームだってつくれます。

:ゲームクリエイターではないボクですが、なんだかウズウズしてきました(笑)

田村氏:(笑)

:Cocos2d-xが、プロクリエイターから大手企業だけでなく、個人開発者の方々やインディーズまで、幅広く支持されている理由がわかってきました。

田村氏:他にもCocos2d-xはいろいろな機能を持っています。オーディオ、メモリ管理、ユーザー入力、ファイル入出力、メニュー機能、ネットワーク、スレッディング、デバッギング、物理演算・・・と、自分でつくるとしたら簡単にはいかないものばかりです。

:まさに、餅は、、、モチ屋!

田村氏:キーワードが登場したところで(笑)、では、CRIWAREに触れたいと思います。読者の方へ向けてのご紹介として。

:ありがとうございます。

田村氏:すでにご存じかもしれませんが、幅さんたちが作っている「CRIWARE」も、Cocos2d-xと同じように非常に強力な”縁の下の力持ち”です。その力は「ムービー」や「サウンド」などでいかんなく発揮されます。

:はい、縁の下に潜り続けて、はや20年以上になります(笑)

田村氏:ホラーゲームをプレイしていると、遠くから忍び寄る足音、反響する物音、そんな演出を見たことはないでしょうか。こういった音響効果を長年頑張って作っていたのはサウンドプログラマと呼ばれる人たちです。木に近づけば小鳥のさえずりが、河に近づけばさざ波の音が……。これらの演出をするためには「高機能なサウンド機能」が欠かせません。

:(過去にサポートしたいろいろなタイトルを思い出し中・・・)

田村氏:「Cocos2d-x」が提供するのは「鳴らすためのオーディオ」です。でも「CRIWARE」が提供するのは「魅せるためのオーディオ」なのです。「ムービー」も同様で、先ほどの「パラパラアニメ」をCocos2d-x上で滑らかにするには限度があります。それだけのコマ数の絵を用意しなければならず、あくまでもパラパラのアニメです。それをより滑らかに表現するのが「CRIWARE」のムービーなのです。

:実際、数年前までは、スクラッチ開発(=ゲームエンジンを使わずにゼロからプログラミングして開発すること)のゲーム開発プロジェクトからのお問い合わせが多かったのですが、最近では、Cocos2d-xをはじめとしたゲームエンジンの利用が「前提」のプロジェクトからのお問い合わせが圧倒的に増えました。これも「鳴らす」や「パラパラ」から「魅せる」にニーズがシフトしてきた証しのひとつだと感じています。

 

田村氏:長々と話してきましたが、まとめますと、「ゲームエンジン」「フレームワーク」「ミドルウェア」といったものは「開発を楽にしてくれる仕組み」だと言えます。読んでくださった方はこれらの機能を使いたいと思われたかもしれません。もしそうであれば、これらの仕組みを使う時1つだけ憶えておいていただきたいことがあります。

:それは何ですか?

田村氏:ひとことで言うと「適材適所を忘れないこと」です。紹介してきた機能や仕組みは、その仕組みを作ったときに想定されているワークフローやデータフローが前提になっているものなので、その想定に従っていないやり方では開発効率は改善しないという点です。

:なるほど・・・

田村氏:たとえば、どんな車好きの人でも、F1のマシンで街道を走り買い物にいったりはしないですよね?それと同じように、仕組みを使うときは、それが現在のやり方に当てはまるのかどうかをぜひ考えてみてください。それでは、みなさん、どうか楽しいゲーム開発を!

:田村さん、ありがとうございました!

 

次回は、当ブログの「命名秘話」と、スマホゲームの”プロデューサー”向けのコンテンツをお届けする予定です。ミドルウェア技術はおもにプログラマの方々に使っていただくものなので、どうしてもテクノロジーの説明が専門的になりがちですが「難しいことはともかく、どんなメリットがあるのか、3行でヨロシク!」という方に向けたメッセージをお届けしたいと思います。どうぞ、お楽しみに。

【いいね!✕ 300、突破しました!:ひらブラ公式facebookページ】

最新記事の更新情報や、記事には書けなかったウラ話、はみだしコラムなど、『ひらブラ』に関する情報を随時更新中。ページに「いいね!」をして頂ければつねに最新の情報をアナタのfacebookのタイムラインにお届けします!

http://crimw.me/fb-hirabla

 

【バックナンバー】
※vol.0:創刊準備号ということでジコショーカイ【CRI幅朝徳のひらけ!ブラックボックス】
※vol.1-1:福袋も飛行機もゲームも?ゲーム開発を支える”黒い箱”とは【ひらけ!ブラックボックス】
※vol.1-2:福袋も飛行機もゲームも?ゲーム開発を支える”黒い箱”とは【ひらけ!ブラックボックス】
※vol.1-3:福袋も飛行機もゲームも?ゲーム開発を支える”黒い箱”とは【ひらけ!ブラックボックス】
※vol.1-4:福袋も飛行機もゲームも?ゲーム開発を支える”黒い箱”とは【ひらけ!ブラックボックス】
※【ひらブラ vol.2】 LEDで無重力をつくる話
※【ひらブラ vol.3】ドラクエの起動画面のひみつ(続・Cocos2d-xとCRIWAREの話)
読者の方からのご意見ご感想やご質問なども大歓迎です。以下のコンタクトフォームからどうぞ。なるべく多くの方のご意見に誠意をもってお返事したいと思っております。

連絡先メールアドレスを入力してください(任意)
ご意見ご感想やご質問などを入力してください。

 

【「送信!」を押す前に必ずお読みください】

送信いただいた場合、弊社が定めるプライバシーポリシーに同意したものとみなさせていただきます。

 

幅朝徳(はば とものり) 株式会社CRI・ミドルウェア 商品戦略室 室長、CRIWAREエヴァンジェリスト。学習院大学卒業後、CRIの前身である株式会社CSK総合研究所に入社。ゲームプランニングやマーケティング業務を経て、現CRIのミドルウェア事業立ち上げに創業期から参画。セガサターンやドリームキャストをきっかけに産声を上げたミドルウェア技術を、任天堂・ソニー・マイクロソフトが展開するすべての家庭用ゲーム機に展開。その後、モバイル事業の責任者として初代iPhone発売当時からミドルウェアのスマートフォン対応を積極推進。GREE社やnhn社といった企業とのコラボでミドルウェアの特性を活かしたアプリのプロデュースも行う。近年は、ゲームで培った技術やノウハウの異業種展開として、メガファーマと呼ばれる大手製薬会社のMR(医療情報担当者)向けのiPadを使ったSFAシステムを開発、製薬業界シェアNo.1を獲得しゲーミフィケーションやゲームニクスの事業化を手掛ける。現在、さらなる新規の事業開拓や未来のサービス開発を担当する傍ら、ますます本格化するスマホゲームのリッチ化を支援するためにモバイルゲーム開発者におけるミドルウェア技術の認知向上のためエヴァンジェリストとしての活動に注力中。

 

趣味は、映画鑑賞とドライブ、クロースアップマジック、デジスコによる野鳥撮影、コンパニオンバードの飼育、そしてもちろん、ゲーム。

CRI・ミドルウェア ウェブサイト
http://www.cri-mw.co.jp/

Amazon人気商品ランキング 一覧を見る

最新記事

この記事と同じカテゴリの最新記事一覧