Looker 
 ハッカソン
 Hack@Homeで
 世界2位でした
 2021/12/09
 モンスト事業本部 北島 祥伍 
 


製作物 https://youtu.be/8wbtMO8aV80

内容 1. 自己紹介 2. LookerハッカソンHack@HomeとCustomVisualizationの紹介 3. ハッカソンを時系列で振り返る

自己紹介 - 北島 祥伍 - 株式会社ミクシィ 2019年新卒入社 - データエンジニアとデータアナリストの中間くらいの業務 - SQLが好き - JavaScriptも好き - 業務ではPython/Ruby

私とLooker - Lookerは2020年2月から。もうすぐ2年 - Looker力はチーム内では並程度 - CustomVizはハッカソンで初めて触った

Hack@Home 2021 とは Lookerの年次イベント、 JOIN@Home内で 11月に開かれたハッカソン - Extension Framework - CustomViz - Looker API などを活用する チーム参加可能だがソロ参加 https://community.looker.com/groups/hackathome-2021-1026

ハッカソンのスケジュール 10日13時 開会（アジア太平洋） 18時 開会（欧州・中東） 11日 03時 開会（アメリカ大陸） 12時 夜懇親会 13時 ラウンドテーブル（アジア太平洋） 18時 ラウンドテーブル（欧州・中東） 12日 03時 ラウンドテーブル（アメリカ大陸） 06時 提出締め切り 08時半 優秀賞発表・デモ 09時半 懇親会 これらの合間に、 １時間半程のサポート時間が約２時間間隔

オンラインでのハッカソンの運用 - メインイベントはJOIN@Home上の配信ページ - 基本英語 - 質問チャットなどは Slack - 日本時間07:30～20:00は日本語も可 - 懇親会はGoogle Meet - ある程度は通訳をしていただいた - Google Meetは字幕機能がある

Custom Visualization とは ここを好きにできる！ データを受け取って好きに描 画して表示できる。 ( https://looker.com/ )

CustomVizの作り方 1. data（クエリ実行結果）を受け取ってelement（DIVタグ）に書き込む関数を作る 2. LookerディレクトリにこのJSファイルを入れて、manifest.lkmlに設定を書き込む 出典: https://github.com/looker-open-source/custom_visualizations_v2/blob/master/docs/api_reference.md

ハッカソンを時系列で振り返る

bar chart raceを実装した動機 - bar chart raceを気に入っていた - Bilibili動画で2019年1月に見つけた - 18年7月頃から投稿されている ( Bilibili動画、数据可视化タグページ: https://www.bilibili.com/v/channel/605361?tab=featured ) - モンストのデータで試作していた - Looker導入時から実装したかった

１日目 ほぼ環境構築。終わってみると簡単でも、なぜか環境構築は時間がかかる。 環境構築完了後はあっさりライブラリを導入できた。 ※時間グラフの大きさはアバウト 13:00~ 13:30 開会 13:30~ 21:00 ハッカソン開始 環境構築 21:00~ 23:00 anichart.js 導入 23:00~ 24:00 調整

１日目(13:30~21:00) 環境構築 終わってみると簡単だったのに、時間がかかった サポートチャットがなかったら間に合わなかったかもしれない おそらく原因は、 - 焦っていた - 古くて難しい情報が混じっている - サンプルを見ても皆、TypeScriptやReactなど自由に作っている 環境構築くらいは事前に予習してもよかったかもしれないが、 CustomVizをこの機会に初めてやってみるぞとも思っていたので難しい。

１日目(21:00~21:30)anichart.jsについて調査 - Bilibiliに投稿されている多くの動画で使われているライブラリの後継 - github.com/Jannchie/anichart.js (MIT License) - Easily create data visualization animated video. - 動く棒グラフ・円グラフ・折れ線グラフが作れるTypeScriptライブラリ - Canvasで描画、FFmpeg出力にも対応

１日目(21:30~24:00)、２日目(10:00~12:00) anichart.js導入 データが更新された時に呼ばれるupdate関数を編集 - Lookerから渡されたデータをanichart用に整形 - anichartが必要な各種パラメータの設定 - anichart.jsは開発途上でドキュメントが未整備のため、 ソースコードを読んで雰囲気でAPIを叩く → 運良く２時間くらいで動作、２日目の午前中には調整が終わった

２日目 午前中でだいたいできたので、午後からは＋α機能作りと提出資料作り ※時間グラフの大きさはアバウト 10:00~ 12:00 調整 12:00~ 13:00 懇親会 13:00~ 15:30 アイコン・ 大規模データ対応 15:30~ 16:30 速度調整 機能 16:30~ 19:00 提出資料 作り

２日目(12:00~13:00) 夜懇親会 - GoogleMeet - 参加者はなぜか私だけ - 懇親会直前に質問をしていたため、スタッフに囲まれてサポートされる - 複雑な質問をしたせいで国語力・英語力・コミュ力、全て不足で大変 - Google Meetの字幕機能に気づいたのは残り15分ごろ - 聞き取りの強い味方

２日目(13:00~15:30) アイコン対応 業務活用を見越したとき、ゲーム内のキャラクターのアイコンを表示したい → ライブラリには機能があるが、Lookerでの画像の受け渡しが問題 これ サンプルでは州旗

２日目(13:00~15:30) 大規模データ対応 日付とラベルでグラフを描画するとき、ラベルでピボットするのが自然 →しかし、いくつか問題がある - Lookerのカラム数上限は200 - モンストのキャラクター数は数千 - カラム数を増やしても、 表示されるのは上位20個程 - 大量データのやり取りは重い

２日目(13:00~15:30) アイコン・大規模データ対応 専用のテーブルを作り、順位でピボットして、値、ラベル、アイコンを measureとする→列数上限を解決し、表示に必要な情報も詰め込める 実装を簡単にするため、「値、ラベル、アイコン」の順番である必要 SELECT date, -- dimension ROW_NUMBER() OVER(PARTITION BY date ORDER BY value DESC) AS rn, -- pivoted dimension label, -- measure value, -- measure icon -- measure

２日目(13:00~15:30) アイコン・大規模データ対応 最終的に両方のデータ形式を使えるように シンプルな使い方と、しっかりした使い方

２日目(15:30~16:30) 速度調整機能 - グラフのアニメーションの速度を変更できるように - 設定をもう少し掘り下げたかったが体力切れ

２日目(16:30~19:00) 提出資料作り ハッカソンの成果物として - ソースコードや実際に動作するものなどのリンク - どのようなものかをまとめたもの - デモ動画 などを英語で作成し提出する。 英語に自信がなかったため、サポートの方に事前チェックをしていただいた🙏

３日目 提出締め切り前に目が覚めたので、画像を追加するなど微調整 05:30~ 06:00 資料 微調整 09:30~ 10:30 懇親会 06:00~ 08:30 審査中 布団に戻る 08:30~ 09:30 結果 発表

Nearly Best Hack Winner Best Hack Winner の次の賞、全体2位。動くグラフの情報量の多さが評価点

マーケットプレイスへの道は遠い - あくまでプロトタイプとして突貫で作っている - マーケットプレイスで提供するには、機能要件を満たす必要がある - anichart.jsに手を入れるか、自分で実装しないと無理そう - 野良Visualizationとしてならば、オープンソースなので誰でも使える

まとめ - Custom Visualizationは初心者でも面白いものが作れる - ハッカソンは楽しかった - 採用募集中です！