はじめに

スタッフとして関わっていたDroidKaigi 2018が無事に終了いたしました。 久しくお会いできていなかった方からお声がけいただいたり、前職で一瞬だけコードレビューをした方からお声がけ頂けたりと、 単に大きなイベントを成し遂げた以上に得られるものがあり、感無量でした。

ところで、初日の朝、ウェルカムトークが始まるまでの間に、このようなものを流させて頂きました。

DroidKaigiの歴代参加者にはわりとお馴染みになっているかも知れません（そうなっていたら嬉しいな）。 毎年僕（もしくは誰か）が少しずつ改善を加えているものの、あまり語ってこなかったので、今回特別にお話ししようと思います。

1. 誕生

遡ることDroidKaigi 2015(最初のDroidKaigi)。 想定来場者数400名の大規模イベントを開催するに当たって、全員からよくある質問を問い合わせされるとつらいことを経験で知っていた僕は、 Wi-Fi情報やトイレ場所などのありがちな内容はループスライドにして表示させておきたいな、と考えました。 一方で当時のDroidKaigiは海外カンファレンスのような方向を目指していた為、それっぽい音楽を流して盛り上げようという話もありました。

この頃、WebAudio APIがちょっと話題になっていたので、せっかくなら無操作でもそれなりに楽しんで頂けるものを作ろうかな、 と思い至り、Web技術を活用したループスライドを作成しました(ChromeさえあればWindowsでもmacOSでも動くのがデカい)。

（ちなみにWebAudio APIの経験は、DroidKaigi開催の1年前にnumaさん主催のlibcoding.soで試していたので、実現の確信はありました）

△ DroidKaigi 2015のときのvisualizer。このときのコードベースで4年間使い続けるとは当時思いもしなかった。

このときに使った技術は、WebAudio API(webkit- prefixつき)、jQueryとD3.jsでした。 AngularJSやReactを使うほどでもないだろう（そして短納期だった）という判断から、HTMLにベタ書きに近い実装にすることを選びました。 まさかここまで長寿になるとは。。。

ところで、少なくとも僕は、これを”visualizer”と呼んでいます。 「ループスライドさせること」が本旨なので不適切な名前ですが、音の可視化のほうが技術的に魅力的な挑戦をしているので、僕は今後もそう呼び続けると思います。

2. 継続

以降、開場からDroidKaigiのウェルカムトークまでの場つなぎに、visualizerが活用され続けてきました。

△ DroidKaigi 2016 Photo by: http://nothing.sh/blog/archives/542

DroidKaigi 2016では東工大の講堂を使って、もの凄い大きなスクリーンにドドンと投影させて頂きました。 リハーサルで映し出したその瞬間、めちゃくちゃ感動したのを覚えています。

△ DroidKaigi 2017。写真をいくら探しても、よいところで止まっているものがなかった

DroidKaigi 2017は、初の民間施設開催で、ホールを使わない運用でした。 正直なところ、受付が大変なことになったので、Visualizerどころではなかったというのがホンネです。 しかもこの回だけは僕が一切visualizerの開発に関わっておらず、 tnjさんに2017対応をやっていただきました。 （おかげで4:3比率の対応を入れて頂きました）

3. 刷新

△ DroidKaigi 2018。上下でクルクル回るイラストの素材をあつめるところが頑張りポイント。

例年、DroidKaigiはAndroidのメジャーアップデートとともに企画並行し、開催されています。 なにも狙ってそうなっているわけじゃなくて、GoogleがI/Oで新情報を公開して、リリースがその年の年末になる傾向がある一方で、DroidKaigiもだいたい似たようなスケジュールで推移するためなのですが。

DroidKaigi 2018もまた、Developer Previewと共に仕込みが進み、最終的にはAndroid 8がリリースされた後に開催となりました。 DroidKaigi 2018のWebサイトはDeveloper Previewに模した黄色とオレンジの配色で構成されています（結局実現しなかったのですが、タイムテーブル確定後にココアビスケットカラー（あえてOreoと言わないｗ）のサイトデザインにスイッチする案もあった）。 そして、DroidKaigiのリリース日である1日目、その最初に見られるコンテンツとなるであろうvisualizerには、正式版リリースを意味してココアビスケットの配色をあしらってみました。ただし開発者カンファレンスなので、Developer Previewの配色も残してあります（背景とか）。

実は、今回のDroidKaigiで使用したvisualizerは、過去3回のコードベースから引き継いだところもあるにはあるのですが、根本的にすべて書き直されています。 具体的には、jQueryを排除してReactを全面的に使うようにし、webpackを使って単一JSファイル(+CSSファイル)を生成するようにしたことで、開発スタイルのモダン化を図りました。

ところでコードはここに置いてあります。(まだやるかどうか分かりませんが)次のDroidKaigiの直前にネタバレ防止のために非公開にすると思います。

3.1. モダン化

これまでのコードベースは、DroidKaigiのWebサイトと比較して、極めて原始的な作業環境でした。 CSSべた書きで、JavaScriptも別ファイルに分かれているわけでもなく、babelなにそれおいしいの？という状態でした。昔はそれで良かった。

しかしデザインを調整するにあたって、流石にSCSSで書かせて欲しいし、スライドのページもDOMべた書きするより何らかのオブジェクトとして管理させたい。 そして何より、モダン化をしないと新しいことに挑戦できなくなるので、それは個人的に許しがたいことでした。 （そしてDroidKaigiのWebサイトはmstsskさんとwm3さんが経験豊富なので、モダンな環境を整備してくださるので、そこと比べるとギャップが凄まじかったです）

そんなわけで、一念発起してモダン化を敢行し、なんとか良い感じの環境になりました。満足。 （むかしちょっとやりかけていた趣味のプロジェクトが活かされたので、素振り大事やねって感想）

3.2. デザイン

visualizerは開催末期に急に降ってくるタスクであることが多いので、一切デザイナーさんが関与しないプロジェクトだったりします。

△ 開催2週間前に突如としてヒザに矢が刺さるの図

しかしながらデザイナーさんに新規でリソースを書いていただくと言うことは原則しないようにしています。 なぜなら、これまでの段階で多くの素材をデザイナーさんが残してくれているので、それをうまく転用すればvisualizerくらいならうまくいくためです。

デザイナーさんが残す素材は、png形式だったりAdobe Illustrator形式だったりしますが、それらを開くだけできればいいので、 僕はAdobe製品を契約せずに、Pixelmator(￥3600)とAffinity Designer(￥6000)で作業をしています。

素材は、そのまま使えるもの（DroidKaigiのロゴとか）から、そのままだと使えないもの（パンフレットの入稿前データ）があります。

  • そのまま使えるもの：ラッキー！
  • そのままだと使えないもの：あるだけラッキー！

というわけで、ザクザクと開いてほしいものだけ取り出して、適宜アルファ値とかを直して欲しいデータにしていきます。

「デザイン」というと、リソースファイルだけなくて、配色やコンポーネントの置き場所も大事ですが、そこは心の目で決めています。。。

えっと。配色はMaterial Designの配色を参考にしています。これは万能で、適当に色をピックしても良い感じに落ち着く印象があります。 コンポーネントの置き場所については、残念ながら何度も試行錯誤して自分の気持ちがグッとくるものを選んでいます。理屈のあるデザインが好きなので、これはあまりにお気持ちに寄りすぎていて気に入らないのですが、まぁ仕方ない。

3.3. CI

結局DroidKaigiには間に合わなかったんですが、CIで自動デプロイする環境を整えました。 僕は静的ファイルのデリバリーにGitHubを使うのは大賛成なのですが、ビルドして生成するリソースをリポジトリに絶対に入れたくないので、 GitHub Pagesの /docs フォルダを使うやり方とか、masterブランチがそのまま公開されるとかは好きじゃないです。 （しかし過去3回はmasterブランチ手法(厳密にはgh-pagesブランチをmasterと見なして作業するような)をとっていました。書いたコード＝デプロイする素材でしたから。。。） （とはいえ、GitHub Pagesの提供する仕組みにおいてJekyllをつかう方法以外では、公開するファイルを何らかの形でリポジトリにあげないといけなくなるので、どれが一番マシか、という選択をせざるを得ない）

今回、webpackを使ってJSをビルドするようにしたのですが、ビルドしたJSはGit管理しても意味がないので、 少なくとも自分がコードを管理するブランチには入れておきたくない気持ちが強かったです。 なので、スクリプトを実行すると特定フォルダ(.gitignoreされている)の中身を gh-pages ブランチにコミットするようにしました。

これも下地として、wm3さんが組んでくれたDroidKaigi 2018のWebサイトの仕組みを流用しました。めっちゃ勉強になりました。 興味ある方はリポジトリを見て下さい。

最後に

僕はライブとかに行くと、本編も大好きなのですが、始まる前のCMとかOPの入り方が大好きです。 DroidKaigiが、他の月一定期開催の勉強会と異なるところは、年に1度しかないということです。つまり特別感がある。 当初のvisualizerはただの情報表示のために生み出されましたが、今ではそれだけじゃなくて、 特別感をいかにして来場者に感じて貰えるか、というところにも注力しています。 入場後の待ち時間で特別感を感じていただき、OP動画でその気持ちが最高潮に達するような盛り上げ方に貢献できているなら、 2度の徹夜を乗り越えて開発した甲斐があるのかな、と思います。

引き続きDroidKaigiを宜しくお願いします！

余談

結果的に、visualizerとOP動画とひだかさんのWelcomeTalkスライドが、 それぞれ同じネタから違うインスピレーションを発揮されているのが非常に興味深いです。