楽曲制作のモチベーションを上げるために4thアルバム「ミライトアルマチ詩恩」のティザーサイトを作った話
keisei feat. 初音ミク 4thアルバム 「ミライトアルマチ詩恩」 Special Site
宣言するだとかモチベーションアップにだとか退路を断つだとかそんな中途半端な動機でガッッと新譜のサイトを作ってみました。
基本的な機能としては
- CDのタイトルとアーティスト名がわかって
- トラックリストが見れて
- 試聴ができて
- シェアできて
- いつどこで頒布されるかがわかって
- 最近考えてることを載せる場所があって
- 初音ミクがかわいい（←機能要件）
というものです。
価格とか、頒布部数とか昔はちゃんと書いてたけど今回はいいかな。普通にツイッターで告知するし。
てことで少しずつ作っていて気をつけたこととか詰まったこととかをざっくり振り返ってみたいと思います。
デザイン
深刻な素材不足（MMDの初音ミク1枚しかない）なので、文字が左で初音ミクを右にばんっと添える感じでいきました。とはいえ初音ミクのアイコン性に縋ってたらもし初音ミクもなしで完全オリジナルで何か作ろうとしたら僕は「素材なし」という状態に陥るんだな・・・
シェア動線とか他の動線は下に散りばめる感じで。
デザインカンプ
macOSのSketchを使いました。
全ての画面を洗い出してアートボードに書いていきました。モバイル表示は未実装ですが一応。
ちなみに本番だと初音ミクの色味が若干青がかっていますが、これは後に Camera+ というiPhoneアプリで初音ミクの画像をレタッチした際にいいカラーだなーと思って採用したという経緯があります。
ポーズとか表情についてはここらへん↓
みくみくだんすなう 笑顔もたんに笑顔じゃなくてバックのコンテキストが伝わってくるようなのが好きなので画像検索で漁った結果こういう感じのになった。「笑顔」ってなんなんだろう。 pic.twitter.com/34Nlzw3xg6
— keisei M3-2017春O-20b (@keisei_1092) 2017年2月1日
やりたいことが固まってきて 「そろそろコード書けそうだな」という雰囲気になってきたら、いよいよコーディングに移っていきます。
サーバー
Heroku を使いました。
node.jsのexpressが立っています。
できればWordPressで動いている miraitoarumachi.com の中に独立したページとして立てたかったのですがよさげなソリューションが見つからず、まあいいやという感じになりました。
コーディング
主に jQuery を使っています。
データの保持
次のような感じでバーチャルDOM（でいいのかな）の配列を宣言しておき、スクロールイベントが発生するタイミングで取り替えるというふうにしました。
スクロールを禁止する
スクロールを禁止する、というと若干の誤謬がありますが、
- 下にスクロールしたらあるdiv要素をその連続した次の要素にすげ替えたい
- 上にスクロールしたらあるdiv要素をその連続した前の要素にすげ替えたい
ということを実装するにあたり、「MacのTrackPadによる慣性スクロール」と「スマートフォンのスワイプ」という問題にぶち当たりました。
MacのTrackPadによる慣性スクロール
最近はMacだけの問題ではありませんが、トラックパッドを搭載しているデバイスではそのスクロールの後に慣性を再現しているため、jQueryのスクロールイベントがものっそい発火します。
これに対して、 Promo/wheel-indicator が役に立ちました。
MacBook ProやThinkPad X220で試しましたが、良い感じにトラックパッドの問題を吸収してくれました。是非使ってみてください。
スマートフォンのスワイプ
スクロールイベントを受け付けない設定にしたら、スマフォでの操作が一切できなくなりました。（笑）
多くの場所で話題にされているように、モバイルアクセス率は年々増え、このページの趣旨としても特に若者がスマートフォンで閲覧しに来るというケースが多くを占めると思っていますので、なんとかしなければいけません。この問題には、次の qiita:Wataru さんの記事が役立ちました。
記事では横スワイプのハンドリングとしていますが、これをXからYに変えるだけで縦スワイプに対応することができました。
ほかにもいろいろやったことはありますが、とりあえずこんな感じで
OGP
OGPとは Open Graph Protocol の略で、シェアされた時の文言やプライマリーとしてSNS側に差し出す画像を設定することができます。これはHTMLファイルのmetaタグで行います。細かい内容は割愛します。
設定が終了したら、ためしにFacebookの OGP Debugger にかけてみます。
正しい内容が表示されました！
これから
今回はjQueryを主に使ってティザーサイトを制作しました。
jQueryは長く使われ続けている、いうところの「枯れた技術」です。
JavaScriptのライブラリで、最近名を広めているものに React があります。Reactを使うと、ユーザインタフェースをコンポーネントベースで管理でき、情報がリアルタイムで伝播していくという強みがあります。とはいえ、この規模のコードベースにReactを使う必要性はあまり高くはないということを友人のごちうさ勢から聞き、またReact + ReactDOM自体の容量がjQueryに対して肥大であるという点も導入の障壁であるということでした。
これに対して、クラスベースで管理していくことは一つのベストプラクティスであるという話も友人のNEW GAME!勢から聞きました。ノンフレームワークで作っていったので責務があやふやだったり「あれどこに書いたんだっけ」ということが頻発しました。クラスベースで設計することでこれが少しは楽になるのではという展望があります。
これからも、自分自身で自分のプロダクトのWebサイトやマーケティングの舵を切りながら、幅広い知識を身につけていきたいと思っています。
