あけましておめでとうございます🌅
『猫神社』 というおみくじサイトを作りました。
せっかく苦労して作ったので備忘録的にいろいろ書いておこうと思います。
何人で作ってるの？
2人です。
デザイン面はチボリお姉さん (@tonosamano) が担当してます。
私は主にエンジニアとして以下のような作業を担当しました。
- タップした時の画面制御等のプログラミング全般
- HTML + CSS + JS のコーディング
- ドメインやサーバ等のインフラ環境の調達
どうやって作ってるの？
おみくじが出るまでのアニメーション部分は Adobe Animate で作っています。
昔なつかし Flash の後継ソフトで、ほぼ Flash と同じ仕様でアニメーションを作ることが出来るんですが、このソフト、今や全然誰も使ってません。
なのでちょっとやりたいことがあってもそれを実現するための情報を調べるのに結構苦労した…
いろいろと選択肢はあったんですが、今回は以下のような要件があったので Adobe Animate を使用しました。
- スマホのブラウザでかんたんに動作する
- スクリプトの知識が無いデザイナーでもアニメーションを作れる
- タップ等の操作によってインタラクティブな動作が可能である
最初は Unity で作ろうとしていたんですが、スマホだと WebGL の許可をするための怪しいダイアログが出たり、そもそもあまりスマホのブラウザで動かすことを想定されてなさそうな気配を感じたため断念しました。
また他のソフトだと、タップ操作等の制御ができなかったり、スクリプトをゴリゴリと書いてアニメーションを制御しないといけなかったり。
結局上記の要件を満たすものは Adobe Animate しか見つからなかったので、消去法的にそうなりました。
なお、おみくじの結果画面は HTML + CSS だけです。
画像素材とメモ帳さえあれば誰でも作れるね！やったね！
Adobe Animate で作った部分はどんな感じ？
アニメーション的な部分についてはチボリお姉さんの担当なので、別途記事にしてくれるんじゃないかなと思います。
スクリプトによる制御的な部分は JavaScript で書けるので、あまり苦労することはありませんでしたが、そもそも 「要素の不透明度を変える」といったことをするために何のパラメータをいじればいいか、みたいな情報が全然無かったので、主にググるのが大変でした。
それ以外だと、最も知恵を絞ったのは レスポンシブ対応 です。
レスポンシブ対応
今回のゲーム部分は、できれば全画面で表示したかったんですが、スマホの画面の縦横比って一定じゃないんですよね。
でも Adobe Animate で出力すると縦横比は必ず一定になる。そこで苦肉の策として、少し上下に余裕をもたせて要素をレイアウトしておき、必ず横幅は100%で表示するようにして、縦幅が足りない場合は上下を切って表示する ことにしました。
HTML & CSS 的な話をすると、描画する要素は width: 100vw; height: auto にしておいて、その親要素は width: 100vw; height: 100dvh にしておきます（アドレスバーは除きたかったので vh じゃなくて dvh です）
そして親要素に display: flex; align-items: center; overflow: hidden を付けておけば、前述のような挙動になります。
普通に配置するだけだと下が切れるだけなので display: flex を上手く使いました。
（公開3日前くらいに思いっきり下が切れることが発覚して焦って知恵を巡らせました）
また、PC の場合は縦横比固定の縦100%で中央揃え、スマホの場合は横100%で中央揃え、という感じでレスポンシブ対応してます。
Flash 全盛期は PC とスマホを同じファイルで動的に表示するなんて発想は無かった（要出典）ので、レスポンシブな Flash というのはなかなか珍しい存在なんじゃないでしょうか。
↑PCの場合
↑スマホの場合（上下が少し切れている）
おみくじの結果部分はどんな感じ？
おみくじが開くところの CSS アニメーション にとても苦労しました。
おみくじを折り畳んだ状態から開くのってどうするの…？？となりました。こんなことやってるの見たことないし。
分かる人にだけ分かる雑な解説
これは別途記事にしようかなと思ってるんですが、一応分かる人向けに書いておきます。
前述の通り、このページは HTML + CSS で作られているので、ここも CSS です。
おみくじ自体は元々1枚の画像で、この画像を背景に指定した div を複数個作り並べています。
そして background-position をズラすことで繋がってるように見せています。
例えば、1つの div が高さ 100px だとしたら、最初は background-position: 0、次は background-position: 100px、その次は background-position: 200px …として行けば、1枚の画像を複数の div に分割することができます。
そして、1つ1つの要素を回転しています。
回転は rotate3d(1, 0, 0, 180deg) と rotate3d(1, 0, 0, -180deg) を交互につけて、それぞれ逆向きに折っており、それを CSS にアニメーションで rotate3d(1, 0, 0, 0) に戻しています。
また、親要素に perspective: 800px と書くことによってパースを付けた回転を実現しています。
しかし、これを普通に各要素でやると、各パーツがその場でバラバラに回転してしまいます。
そこで、おみくじのようにすべての要素が繋がってるように見せるために、折れるための <div> とおみくじ画像の <div> を入れ子構造にしています。
………？？？
何を言ってるかさっぱり分からないと思います。
コードにすると以下のような感じです。
<div class="180deg折り曲げるCSS">
<div class="おみくじ画像1"></div>
<div class="-180deg折り曲げるCSS">
<div class="おみくじ画像2"></div>
<div class="180deg折り曲げるCSS">
<div class="おみくじ画像3"></div>
<div class="-180deg折り曲げるCSS">
...
</div>
</div>
</div>
</div>
コード見てもよく分からないかもしれませんが、原理的にはこんな感じで表示部分と折り畳み部分を分けて考えています。
あとは手元で試してみてもらって細部を調整すれば、奇麗に折り畳まれた状態から伸びていくと思います。
いずれ図解付きの解説記事を書くので許してください。
該当部分のHTML
該当部分のCSS
（クラス名の命名が汚い…）
インフラ部分は何で動いてるの？
Firebase で動いています。
Firebase は静的ファイルを公開するにはもってこいのサービスです。
無料だし、デプロイはコマンド一発で簡単だし、自動でSSL証明書貼り付けてHTTPSにしてくれるし。
Google Analytics との連携とかも楽ちんだし、とても優秀なサービスだと思います。
今回は大した通信量も発生していないので無料枠の範囲内です。0円ヤッター！
BGMや効果音は何を使ってるの？
Audiostock で購入した音楽素材です。
私は Audiostock の社員なので、社員割が効いて格安で…とかは全くなく、普通に一般ユーザとして購入しています。
Audiostock は検索が簡単だし、安心して使える素材が手に入るのでとても良いですね（宣伝）
ちなみにこれが今回唯一の出費で、6,000円くらいかかってます。
その他なにか書きたいことある？
Twitter の OGP 更新
Twitter で URL をシェアした時に、サイト側で設定していれば画像を表示することが可能なんですが、この画像がなかなか更新されないので困りました。
以前は Twitter Card Validator というもので明示的な更新が可能なんですが、現在はその機能が使えなくなっており、最長で1週間もキャッシュされる仕様になっているそうです。
公開3日前くらいにひとまずお試しで設定した画像が、正しい画像に差し替えても全然切り替わってくれなくて、だいぶ焦りました。
公開直前に本番用の URL で OGP 画像の設定を試すのは危ないのでやめた方がいいですね。
favicon 等の画像
サイトを公開するにあたって、favicon だけでなく、例えば iOS の Safari でサイトをホーム画面に追加した時に必要になる apple-touch-icon.png とか、いろいろ細かい画像が必要になってきます。
でも全然規格が統一されてなくて、みんな好き勝手にあれが必要これが必要って仕様が乱立してるのでちゃんと設定するのがかなり難しいんですよね…
今回はそんなにしっかりしなくてもいいだろう（要出典）ということで、以下の記事を参考にして最小限にとどめました。
https://techracho.bpsinc.jp/hachi8833/2021_06_24/108697
SVGのアイコンも用意してないので、実質4種類だけです。もうこれでいいや。
Google Analytics
アクセス解析に便利な Google Analytics ですが、今回うっかりしてて、トップページにしか Google Analytics のコードを仕込んでません。
そのため解析してもどれだけおみくじを引かれたかはあんまりハッキリ分からない状況です。しくった。
ちなみに解析した結果、実に80%の人がスマホからアクセスしてて、時代が変わったなぁ…としみじみしました。
告知ツイートの問題
この告知ツイートですが、反省点がいくつかあります。
URL が分かりづらい
URL とハッシュタグが同じ行になってますね。
Twitter でシェアするための設定を普通に書いたらこうなるんですが、ここは意地でも改行を挟むべきでした。
OGP ではなく画像をツイートしている
告知用の画像があった方が分かりやすいでしょ！と思ってこうしたんですが、上記の問題で URL がわかりづらくなってるので、ちょっと不親切だなと思いました。
画像より動画の方が良い
せっかくなら動画にした方が目を引くし、中身が分かった方が引いてみようと思えるんじゃないかなと思うので、動画を貼った方が良かったかな〜と思ってます。
ツイート時間
年が変わった瞬間なら人も多いし見てもらえるだろ〜〜と思ってたんですが、年越しのTLの流速舐めてました。
でもそんな中でも見つけてくれる人は結構いて、ありがたやありがたや…
来年同じようなことするならタイミングはもうちょっと考慮しようと思います。
まとめ
「おみくじを引いてシェアする」という、ユーザにとっては30秒くらいしか触れないサービスでも、様々な苦労と気付きがありました。
でも逆にそのお手軽さがあるからこそたくさんのユーザに触れて貰えたと思います。
もし余裕があれば来年もおみくじサイトを作ってみたいなと思いました（味をしめてる）