CASE STUDY #3

2023.05.12に行われたイベント「CASE STUDY #3」の発表資料です。

Transcript

2. u n s h i f t I n c . C r e a t i v e D e v e l o p e r i 1 9 8 5 . 0 1 . 2 5 生 ま れ ( 3 8 歳 † i 主 な 仕 事 は W e b の フ ロ ン ト エ ン ド 実 P i 主 な S N S は T w i t t e r ( @ _ u n s h i f t † i ク リ エ イ ティ ブ コ ー ディ ン グ 好 7 i バ ス ケ ッ ト ボ ー ル が 好 7 i 1 y 3 m の 娘 の 父 ( 帰 り た い † i 今 日 は ゼ ル ダ の 伝 説 発 売 日 ( 帰 り た い ) 長 谷 川 巧
3. 本日のテーマ
4. 楽する = 効率化 楽しむ = 作り込み・質の向上
5. Index 貝印 やさしい切りかた辞典 - 一覧のレイアウトの作り込み 「楽しむ」ポイント - テキストデータ生成の効率化 - WebGL用データ作成ツール制作 「楽する」ポイント 事例1 ドルチェ&ガッバーナ × 呪術廻戦 - WebGL演出の作り込み・最適化 「楽しむ」ポイント - 段階リリースの効率化 「楽する」ポイント 事例2
6. 事例1: 貝印 やさしい切りかた辞典 https://www.kai-group.com/products/special/hocho/yasashii/ Next.js + three.js + CSS in JS (Linaria)
7. 事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント テキストデータ生成の効率化
8. 事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - テキストデータ生成の効率化 JSON Google Spreadsheet JSON file Google App Script サンプルデータ https://docs.google.com/spreadsheets/d/1UoVT1wJLTMRI_75wf8-Xzar3TMnYnPSItE6Zy5C3xAI/edit?pli=1#gid=0
9. 事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - テキストデータ生成の効率化 スクリプトはそんなに難しくないが、 面倒くさいのでこの人に頼む。
10. 事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - テキストデータ生成の効率化 Google Spreadsheetで、以下の条件でJSONを出力するGoogle App Scriptを作ってください。

 * シート名は「シート1」とする。
 * 1行目をヘッダ行とする。
 * 2行以降の各行をヘッダのラベルをキーとしたオブジェクトとし、データのある全行を配列とした JSONデータにする。
 * オブジェクトのキーはキャメルケースとする。頭文字は小文字。
 * ファイルはGoogle Driveに保存するのではなく、モーダルダイアログが出現し、リンクをクリッ クするとダウンロードできるようにする。 プロンプトの一例
11. 事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - テキストデータ生成の効率化 ちょっとした変更でも、大掛かりな変更でも、 特に変更箇所を気にせずに データを生成できる。
12. 事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント WebGL用データ作成ツール制作
13. 事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - WebGL用データ作成ツール制作 WebGLで各三角形のタイルを個別で動かすために ←のような画像データから、 ピンク色の矩形内のグリッドに並ぶ三角形の 座標・向き・色のデータを作成する必要がある。 z グリッドは 12 × 1 z 1マスに三角形が最大2つ入r z 三角形の向きが左右反転しているグリッドもあr z 公開時の食材は15種類 (増減あるかも)
14. 事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - WebGL用データ作成ツール制作 これは手作業だと手間だしミスも多そう。 データを簡単に編集できるツールを作ろう。 ツールを作ったら他のプロジェクトメンバーにも手伝ってもらえそう。
15. 事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - WebGL用データ作成ツール制作 できたものがこれ。
16. 事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - WebGL用データ作成ツール制作 出来上がりを確認できるのでかなりやりやすいが それでも1つの食材のデータを作るのにかなり時間がかかる。 画像を解析してデータの生成を自動化しよう。
17. 事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - WebGL用データ作成ツール制作 画像をドラッグ&ドロップして 自動的にツール上に反映される機能を追加。 12×12のグリッドの画像 色がついているところ以外は透過 画像をツール上にドラッグ＆ドロップ 解析完了後、反映
18. 事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - WebGL用データ作成ツール制作 ツールの開発工数を差し引いても 時間のかかるWebGL用のデータ作成時間を 大幅に削減。 (…削減できたと信じたい) (少なくとも心理的にはかなり楽になった)
19. 事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント 一覧のレイアウトの作り込み
20. 事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み 一覧の仕様 (概要) v 食材の数は15 (増減あるかもd v ランダムに並べv v カードは上下左右に無限にドラッグできv v ドラッグすると、三角形のタイル状のオブジェクト が反b v ドラッグすると、マウスからの距離に応じてカード が時間差で動く
21. 事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み 一覧の仕様 (詳細) ¤ 食材の数は15 (増減あるかもe ¤ 隣り合うカードは同じ食材にならないように
 画面内にできるだけ多くの種類をランダムにならべ} ¤ 1食材ごとに1カードでは画面を埋め尽くせない場合
 複数同じ食材を使用す} ¤ カードは上下左右に無限にドラッグでき} ¤ ドラッグすると、三角形のタイル状のオブジェクトが反応
 (WebGLのジオメトリインスタンシングで描画e ¤ パフォーマンス重視のため、カードの枚数は必要最低限にしたƒ ¤ ドラッグすると、マウスからの距離に応じてカードが時間差で動く
22. 事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み 並べ方1. 
 ウィンドウサイズに応じてカードの数 を決める ※実際はこのレイアウトだとドラッグに 　 対応できないが、説明のため簡略化 window
23. 事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み 並べ方2. 
 全種類をランダムで並び替えた待ち行列 をつくる ※説明のため6種類とする 5 1 4 6 2 3
24. 事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み 並べ方3. 
 待ち行列の先頭から順にカードを並べる 5 1 4 6 2 3
25. 事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み 並べ方4. 
 待ち行列がなくなったら再度つくる 5 1 4 6 2 3 5 1 4 6 2 3
26. 事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み 並べ方5. 
 前後の列と隣り合わないようにする 隣り合ってしまう場合は 待ち行列の最後尾に入れる 5 1 4 6 2 3 5 1 4 6 はNG はNG 前の列と隣り合うので 6 2 3 5 1 4 6 2 3
27. 事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み 並べ方6. 
 上下と隣り合わないようにする また、上端と下端はループした際に隣り合うの でそこも考慮する はNG 5 1 4 6 2 3 1 はNG 下端に入れると上端と隣り合うので 3 3 5 4 2 5 4 6 6 2 3
28. 事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み 完成 ウィンドウリサイズにより並べるカードの枚数 が変わる際は、再度並べ直す 5 1 4 6 2 3 1 1 5 4 6 2 3
29. 事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み カードを必要最低限な数だけ 適度にばらけさせ 一画面になるべく多くの種類を配置し かつ上下左右隣り合わないようなレイアウトを実現
30. 公開終了 事例2: ドルチェ&ガッバーナ × 呪術廻戦 Vite + React + three.js + CSS in JS (Emotion)
31. 事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽する」ポイント 段階リリースの効率化
32. 事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽する」ポイント - 段階リリースの効率化 ˜ ティーザーサイト含めて数バージョンのリリースがあS ˜ 各バージョンで基本的なサイトの構造は変わらなg ˜ リリースのバージョンが進むことにによって、解禁される情報があS ˜ 解禁される情報の中には画像データも含まれS ˜ 各バージョンのリリースの間隔が短g ˜ 確認作業も同時並行となることもある 段階リリースの概要
33. 事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽する」ポイント - 段階リリースの効率化 ブランチをバージョンごとに切ると管理が手間なので、 全バージョンのデータを一つの開発環境に入れて開発したい。 解禁されていない情報をソースコードに含めるのは当然NG。 しかし、簡単にバージョンを切り替えられるようにしたい。 ※ソースコードはGitで管理している前提です。 じゃあどうしよう？？
34. 事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽する」ポイント - 段階リリースの効率化 主なディレクトリ構造と役割 project root public ・・・　 静的ファイル。ビルド時にdistディレクトリへそのままコピーされる。 images ・・・　 画像ファイル。ここから各バージョンに必要な画像がpublicディレクトリにコピーされる。 src ・・・　 主に.ts, .tsxファイル。ビルドを通してjsファイルなどにコンパイルされ、distディレクトリに展開される。 index.html ・・・　 ページのHTML。ビルド時に一部書き換えがされ、distディレクトリに展開される。 dist ・・・　 出力先ディレクトリ。 buildTools ・・・　 ビルド関連の処理を行うnode.jsスクリプトを格納したディレクトリ。
35. 事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽する」ポイント - 段階リリースの効率化 ビルドの大まかな流れ 指定されたバージョンに不要な画像を削除する 本番環境のディレクトリ構成に合わせてパスを置換する ビルド後処理 ビルド処理 (distへ展開) 必要な画像をimagesディレクトリからpublicディレクトリへコピー 必要なテキストデータを整形してViteのdefineオプションに渡す ビルド前処理 Viteの処理: ビルドするバージョン (DG_BUILD_INDEX) を指定して処理を行う DG_BUILD_INDEX=0 vite build && DG_BUILD_INDEX=0 node buildTools/postBuild/index.js
36. 事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽する」ポイント - 段階リリースの効率化 Viteの設定ファイルの特徴
37. 事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽する」ポイント - 段階リリースの効率化 defineオプションによる定数の置換とTree-Shaking たとえば、BUILD_INDEX = 0の場合は商品情報のコンポーネントはソースに含めない、といったことができる。
38. 事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽する」ポイント - 段階リリースの効率化 ビルド前後の処理 (画像コピー/削除、テキストデータ整形) ＋ Tree-Shakingによる不要コード削除 によって、ブランチを切り替えることなく 各バージョンの切り替えを実現。
39. 事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽しむ」ポイント WebGL演出の作り込み・最適化
40. 事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽しむ」ポイント - WebGL演出の作り込み・最適化 背景のエフェクト キャラクター全身 タイトル、背景のキャラクター画像の空間 その1. 各WebGL描画エリアの 解像度を最適化
41. 事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽しむ」ポイント - WebGL演出の作り込み・最適化 WebGL描画エリアの基本的な方針 zs 高解像度ディスプレイに対応 
 (window.devicePixelRatioの値を利用するn gs ピクセル数がしきい値を超えると描画の解像度を
 window.devicePixelRatioの1/2にする
42. 事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽しむ」ポイント - WebGL演出の作り込み・最適化 各エリアに対する追加ルール ‡ 背景のエフェクト 
 → そもそも激重なので、window.devicePixelRatio * 0.6
 　 の値を使用すƒ ‡ タイトル、背景のキャラクター画像の空間
 → 基本方針に沿p ‡ キャラクター全身
 → 常にはっきりくっきりさせたいので、基本方針2は適用しない
43. 事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽しむ」ポイント - WebGL演出の作り込み・最適化 ボケずに見せたい箇所と、
 ある程度ボケても問題ない箇所を分けることで パフォーマンスとクオリティを両立。
44. 事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽しむ」ポイント - WebGL演出の作り込み・最適化 その2. キャラクター出現アニメーション
45. 事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽しむ」ポイント - WebGL演出の作り込み・最適化 ノイズのリアルタイム計算は重いので、 左のようなノイズ画像を使用する。
46. 事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽しむ」ポイント - WebGL演出の作り込み・最適化 アニメーションが一律にならないように アニメーションごとに 使用位置をオフセットする
47. 事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽しむ」ポイント - WebGL演出の作り込み・最適化 パフォーマンス低下につながる ノイズのリアルタイム計算を画像で回避しつつ 使用する位置のオフセットを設定することで アニメーションが単調になってしまうのも同時に回避。
48. まとめ 自動化や効率化で手間のかかる作業の時間を短縮して こだわるポイントに思い切り時間をかける！