推しのチャンネル登録者100万人突破を祝うサイトを作った
↑ このサイトの制作に参加しました！
大変ありがたいことにMoguLiveさんに取り上げていただけました。（ホロライブVTuber紫咲シオンの非公式ファンサイトに注目 世界中のファンを地球儀で可視化）
背景
3周年記念サイトと同様に、なるべく長く残せる形でお祝いをしようということで制作しました。
制作チーム
企画、エンジニア2名、モデラー、BGM、イラストレーターで制作しました。
基本的には3周年記念モザイクアートのときと同じメンバーでした。
製作期間
実質的な製作期間は3, 4ヶ月程度ですが、半年前くらいからは3Dを使おうという話は出ていて、Three.jsに触れたりしていたので半年くらい掛けた気分です。
構成
フロントでは、前回OGPで苦労したことからOGPを各投稿で制作するためにNext.jsを利用しました。
バックエンドにはFirebaseを使ったのですが、Next.jsのホスティングに不安定な部分が多く、ホスティングだけVercelを利用しました。
制作の流れ
デザイナーがいないため、プロトタイピングと実現可能性検証と勉強を兼ねて「地球にピンが降りてきて、回転させたりズームさせる」だけのページを制作しました。
その後、必要な素材を洗い出したり、機能を固めたりしながら開発を進め、投稿フォームができた段階で一旦公開し、投稿の募集を開始しました。この時点でトップページは完成していないため、WIPと表示し背景で地球が周るだけの画面を映しています。
以降はチャンネル登録者数の増加にワクワクしたり怯えつつ完成させました。
大変だったところ
無限にありますが、結局使わなかったものが多いのでピックアップしていくつか
OP演出
トップページでは「音声コンテンツを再生するかの質問」→ 「カウントアップ動画」 → 「線」 → 「ピン降下」 → 「閲覧モード」 とフェイズが切り替わります。3周年モザイクアートでも似たフェイズの切り替わりがあったのですが、その時は各切り替わりの度にパーツの表示を切り替えたり、関数を呼んだりしていました。しかし構造が複雑になるに連れ、遷移時にどこがどう変わるのかを追いきれなくなり大変でした。その反省を活かして各コンポーネントで各フェイズごとの振る舞いを記述し、フェイズを切り替えることでフェイズの切り替えを実現しました。
「今がどのフェイズか」をpropsリレーをするのはコンポーネントが膨大で面倒だし、ContextAPIやrecoilはreact-three-fiberと相性が悪く使えなかったのでzustandという状態管理ライブラリを利用しました。グローバル変数のような感覚で使えて楽でした。
このようなライブラリを乱用するとメンテナンス性を下げるらしいというあやふやな知識があるのですが、一度作れば終わりというイベントページの性質と、ライブラリを使わないことで下がる品質を考えると、これまで過剰に恐れていたのかなと思いました。
ロケット付きの線
せっかくの3Dなので3D版の線を制作しました。Blenderでアニメーションを付けたオブジェクトを制作し、GLTFでexportして埋め込んでいます。
前へ、次への移動
1次元上では「前」と「次」が明らかですが、平面上ではそうもいきません。そのような遷移を行うためには平面上の点を1次元に並べる必要があります。
理想は北海道を探索し終えたら次は青森といったように住所に基づいた順序で並べたい。リバースジオコーディングというものがあり、頑張ればできそうな気もしたのですが政治的にセンシティブな部分にふれることになるかもしれないという不安があり別の手段を取ることにしました。
平面上で近いものは一次元上でも近く、遠いものは遠くなって欲しい。最短経路で一筆書きしてあげればそれに近いものが得られるのかなと思いました。多数の点をつなぐ最短経路は巡回セールスマン問題そのもので大変時間がかかるため近似解を求めました。
平面ではなく球面上であるため、2点間のユークリッド距離ではなく大圏距離を使っています。
貪欲→2-opt 大円距離 version
— ひがら🌙 (@higara222) January 29, 2022
これを無駄にかっこよさそうにいうと非ユークリッド空間におけるTSP問題の近似解 pic.twitter.com/SOIbqnURWT
ロゴ
初めてロゴを制作しました。イラストレーターをちゃんと使うのが初めてだったので難しかったです。
感想
今まででの開発で一番頑張った気がします。無事完成して良かった。
本人の反応も貰えたし、みんなで作った達成感もあったし、MoguLiveさんにも取り上げていただけて満足すぎる結果でした。