普通のWeb制作でもできると思うのですが、私はいつもの「360度バーチャルツアー制作ツール」を使って、ちょっとしたゲームを作ってみるのが好きです😊
Web制作とこのツールの一番の違いは…「ある程度、画面サイズは無視できる」という部分かもしれません。 360度バーチャルツアーの売りの一つに「拡大ができる！」というのがありますよね。
私が利用しているツールも例にもれず、基本的に拡大縮小は自由自在です。
パソコンなら大きくズーム、スマホの小さな画面なら小さくズームアウト。
ややこしいレスポンシブ対応などを考えなくても、ある程度の範囲はツール側の基本機能（パノラマ表示の機能）に任せてしまえるんです！
今回のゲーム制作のワークフローが個人的にとても面白かったので、皆さまのお役にも立つかも！？と思い、シェアも兼ねてブログにまとめることにしました。
以前の反省：画像切り出しの「鬼作業」
先日、「31音で描く、あなたの滋賀。『令和版近江百人一首』が完成しました！！」というネットニュースが流れてきました。
当社は少し前から「滋賀コレかるた」様とジョイントさせていただいており、子供が楽しめるように簡単な「ゲーム」を組み込んだ360度バーチャルツアーを制作しています。
▼ リーフワークス様の例
実は、ほかにも時間があるときにVRゴーグル用の「かるたゲーム」の試作を作っていたんですよね。
上下左右360度の空間に、かるたの札が浮かんで表示されるというものです。
その際、フリー素材のサイトからかるたの画像をダウンロードしたのですが…
スクショで1枚1枚切り取って保存し、リサイズするという、
実に46回もの同じ作業を繰り返す鬼の手作業を行ってしまいました😇
「もっと効率よくできるはずだよねぇ…？」 という強烈な反省があったため、今回の「令和版近江百人一首」は、効率化の良い勉強の題材になる！と思ったのです。
データーの取得：PythonでPDFから一発切り出し！
「そういえば、昔プログラミングで画像を切り刻んだことがあったな…」と思い出し、Geminiさんに相談。
どうやら「Python」を使えばPDFからサクッと切り出せることが判明しました！
PDFから直接いけるのか？ 罫線を基準に切れるのか？ など、AIに聞きながら試行錯誤した結果…
見事に形にすることができました✨
百人一首の札を1枚1枚スクショして…
なんていう手間暇は一切かけていません。
プログラムを実行して、一気に札を切り出すだけ！ 保存時のファイル名も yomi-001.jpg tori-001.jpg のように自動で指定できるので、あっという間に準備完了です。
これを知っていれば、前のかるたゲームの試作もあんなに苦労しなかったのに…。
（無駄な努力でしたねー😭）
ゲームの構想：百人一首ってどうやって遊ぶの？
さて、ここからは私のお楽しみタイムです。
皆さんは「かるた」の遊び方はご存知だと思いますが、「百人一首」の実際の遊び方ってご存知ですか？
グッと数が減るのではないでしょうか。私も何となくしか分からず……💦
まずはネットで遊び方を調べ、アイデアを拾い出します。
「要は、取り札をバラバラに並べて、読み札もバラバラに表示させればOKでしょ？」と、軽く考えていました。
思ってたのと違う…💧 UIの試行錯誤
何となく作り始めてみて気づきました。
「かるたと違って、取り札の数が多い！！」
流石に100枚の札を一度に並べたら、50インチの8Kモニターが必要になってしまいます（笑）。
たかが試作のゲームでこれはボツですよね❌。
ここがいつも「面白いなー」と感じるところです。
アバウトに仮組みをすると、思ってもみなかったカタチになり、自分の想像力の無さに茫然とするわけです。
いろいろ見てみることに…
「百人一首って知名度が高い遊びなんだから、スマホの無料ゲームアプリが必ずあるはず！」と気付きました。
さっそくスマホで「百人一首」と検索し、いい感じのデザインを探して、今回のツールに落とし込めそうか考えてみました。
そこで改めて勉強になったのが、「上の句」と「下の句」があり、取り札には「下の句」だけが書かれているということ。
「えっ、じゃあどうやって読み札と連動させるの…？」と、一人で勝手にハマってしまったのは秘密です😊
（気づいてしまえば簡単なことなんですけどね）
「令和版近江百人一首」デジタル（試作）版、完成しました！
滋賀県 文化スポーツ部 文化芸術振興課のご担当者様、この度はデータの使用をご快諾いただき誠にありがとうございます。
聞いたこともない草津市の会社から突然意味不明な連絡が入り、さぞ「！？」と思われたことでしょう🙇♂️
★「令和版近江百人一首のデータ使用承認について（通知）」を頂いた上での公開です
【遊び方】
- 立ち上げ後、クレジット表示が出ますので閉じてください。
- 閉じた直後から百人一首が開始されます。
- 下の句の行のカバーが2秒ごとに外れますので、少しでも速く札を獲ってください！（マウスクリックやタップ）
- 100枚の札をすべて獲れたら終了です。
【今後、考えていること】
「100枚のカウントダウン」「タイム計測」「お手付きのペナルティ」などなど。
どれも今のプログラムに追加していくだけの割と簡単な作業だと思いますので、時間があるときにボチボチと実装していく予定です。
「こういう機能があればいいな！」とお気づきの点があれば、お気軽にコメント等で投げてください。
（必ずすぐに対応できる！というお約束はできませんが…！）
【少し真面目な話】
PDFをダウンロードして厚紙に印刷して遊ぶ…という流れは、今の時代少しハードルが高いかもしれません。
だからこそ、このようにWebのチカラを使って、日本全国、そして世界の大人や子供たちに「滋賀ってこんな魅力があるんだ！」と少しでも知っていただけたら嬉しいです。
（滋賀は観光人気、伸びしろだらけですからねぇ…笑）
今後はCloudflare等も活用して、海外からのアクセスでもサクサク動くようにしていきたいです。
小さな地域の会社ですが、WebやVRの試作や技術検証を行う中で、地域のお役に立てれば、それはそれで、本望だと考えています。
いろいろできるツールなのです
このように、当社の360度バーチャルツアー制作ツールは、工夫次第で意外な使い方もできてしまいます。
Web制作ならJavaScript（JS）でできるのでしょうが、私はJSを読むことすら苦手です。
（意味が分からないと思います！笑）
最近は、鍛え中の「ツヨツヨAIさん」に依頼を投げると、6〜7割ほどはパパッと仕上げてくれることが増えました。
（AIさんには過去につまずいた経験を投げ込んで学習させています）
360度バーチャルツアーはもちろん、今回の百人一首を見ていただいて、「あ、コレ、うちのアレに使えそうだ！」と思っていただけましたら、ぜひお気軽にお問い合わせください！
今日もブログにお越しいただきありがとうございます🙇♂️
コメント