Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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 今 日 は ゼ ル ダ の 伝 説 発 売 日 ( 帰 り た い ) 長 谷 川 巧

Slide 3

Slide 3 text

本日のテーマ

Slide 4

Slide 4 text

楽する = 効率化 楽しむ = 作り込み・質の向上

Slide 5

Slide 5 text

Index 貝印 やさしい切りかた辞典 - 一覧のレイアウトの作り込み 「楽しむ」ポイント - テキストデータ生成の効率化 - WebGL用データ作成ツール制作 「楽する」ポイント 事例1 ドルチェ&ガッバーナ × 呪術廻戦 - WebGL演出の作り込み・最適化 「楽しむ」ポイント - 段階リリースの効率化 「楽する」ポイント 事例2

Slide 6

Slide 6 text

事例1: 貝印 やさしい切りかた辞典 https://www.kai-group.com/products/special/hocho/yasashii/ Next.js + three.js + CSS in JS (Linaria)

Slide 7

Slide 7 text

事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント テキストデータ生成の効率化

Slide 8

Slide 8 text

事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - テキストデータ生成の効率化 JSON Google Spreadsheet JSON file Google App Script サンプルデータ https://docs.google.com/spreadsheets/d/1UoVT1wJLTMRI_75wf8-Xzar3TMnYnPSItE6Zy5C3xAI/edit?pli=1#gid=0

Slide 9

Slide 9 text

事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - テキストデータ生成の効率化 スクリプトはそんなに難しくないが、 面倒くさいのでこの人に頼む。

Slide 10

Slide 10 text

事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - テキストデータ生成の効率化 Google Spreadsheetで、以下の条件でJSONを出力するGoogle App Scriptを作ってください。

 * シート名は「シート1」とする。
 * 1行目をヘッダ行とする。
 * 2行以降の各行をヘッダのラベルをキーとしたオブジェクトとし、データのある全行を配列とした JSONデータにする。
 * オブジェクトのキーはキャメルケースとする。頭文字は小文字。
 * ファイルはGoogle Driveに保存するのではなく、モーダルダイアログが出現し、リンクをクリッ クするとダウンロードできるようにする。 プロンプトの一例

Slide 11

Slide 11 text

事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - テキストデータ生成の効率化 ちょっとした変更でも、大掛かりな変更でも、 特に変更箇所を気にせずに データを生成できる。

Slide 12

Slide 12 text

事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント WebGL用データ作成ツール制作

Slide 13

Slide 13 text

事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - WebGL用データ作成ツール制作 WebGLで各三角形のタイルを個別で動かすために ←のような画像データから、 ピンク色の矩形内のグリッドに並ぶ三角形の 座標・向き・色のデータを作成する必要がある。 z グリッドは 12 × 1 z 1マスに三角形が最大2つ入r z 三角形の向きが左右反転しているグリッドもあr z 公開時の食材は15種類 (増減あるかも)

Slide 14

Slide 14 text

事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - WebGL用データ作成ツール制作 これは手作業だと手間だしミスも多そう。 データを簡単に編集できるツールを作ろう。 ツールを作ったら他のプロジェクトメンバーにも手伝ってもらえそう。

Slide 15

Slide 15 text

事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - WebGL用データ作成ツール制作 できたものがこれ。

Slide 16

Slide 16 text

事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - WebGL用データ作成ツール制作 出来上がりを確認できるのでかなりやりやすいが それでも1つの食材のデータを作るのにかなり時間がかかる。 画像を解析してデータの生成を自動化しよう。

Slide 17

Slide 17 text

事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - WebGL用データ作成ツール制作 画像をドラッグ&ドロップして 自動的にツール上に反映される機能を追加。 12×12のグリッドの画像 色がついているところ以外は透過 画像をツール上にドラッグ&ドロップ 解析完了後、反映

Slide 18

Slide 18 text

事例1: 貝印 やさしい切りかた辞典 「楽する」ポイント - WebGL用データ作成ツール制作 ツールの開発工数を差し引いても 時間のかかるWebGL用のデータ作成時間を 大幅に削減。 (…削減できたと信じたい) (少なくとも心理的にはかなり楽になった)

Slide 19

Slide 19 text

事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント 一覧のレイアウトの作り込み

Slide 20

Slide 20 text

事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み 一覧の仕様 (概要) v 食材の数は15 (増減あるかもd v ランダムに並べv v カードは上下左右に無限にドラッグできv v ドラッグすると、三角形のタイル状のオブジェクト が反b v ドラッグすると、マウスからの距離に応じてカード が時間差で動く

Slide 21

Slide 21 text

事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み 一覧の仕様 (詳細) ¤ 食材の数は15 (増減あるかもe ¤ 隣り合うカードは同じ食材にならないように
 画面内にできるだけ多くの種類をランダムにならべ} ¤ 1食材ごとに1カードでは画面を埋め尽くせない場合
 複数同じ食材を使用す} ¤ カードは上下左右に無限にドラッグでき} ¤ ドラッグすると、三角形のタイル状のオブジェクトが反応
 (WebGLのジオメトリインスタンシングで描画e ¤ パフォーマンス重視のため、カードの枚数は必要最低限にしたƒ ¤ ドラッグすると、マウスからの距離に応じてカードが時間差で動く

Slide 22

Slide 22 text

事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み 並べ方1. 
 ウィンドウサイズに応じてカードの数 を決める ※実際はこのレイアウトだとドラッグに   対応できないが、説明のため簡略化 window

Slide 23

Slide 23 text

事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み 並べ方2. 
 全種類をランダムで並び替えた待ち行列 をつくる ※説明のため6種類とする 5 1 4 6 2 3

Slide 24

Slide 24 text

事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み 並べ方3. 
 待ち行列の先頭から順にカードを並べる 5 1 4 6 2 3

Slide 25

Slide 25 text

事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み 並べ方4. 
 待ち行列がなくなったら再度つくる 5 1 4 6 2 3 5 1 4 6 2 3

Slide 26

Slide 26 text

事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み 並べ方5. 
 前後の列と隣り合わないようにする 隣り合ってしまう場合は 待ち行列の最後尾に入れる 5 1 4 6 2 3 5 1 4 6 はNG はNG 前の列と隣り合うので 6 2 3 5 1 4 6 2 3

Slide 27

Slide 27 text

事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み 並べ方6. 
 上下と隣り合わないようにする また、上端と下端はループした際に隣り合うの でそこも考慮する はNG 5 1 4 6 2 3 1 はNG 下端に入れると上端と隣り合うので 3 3 5 4 2 5 4 6 6 2 3

Slide 28

Slide 28 text

事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み 完成 ウィンドウリサイズにより並べるカードの枚数 が変わる際は、再度並べ直す 5 1 4 6 2 3 1 1 5 4 6 2 3

Slide 29

Slide 29 text

事例1: 貝印 やさしい切りかた辞典 「楽しむ」ポイント - 一覧のレイアウトの作り込み カードを必要最低限な数だけ 適度にばらけさせ 一画面になるべく多くの種類を配置し かつ上下左右隣り合わないようなレイアウトを実現

Slide 30

Slide 30 text

公開終了 事例2: ドルチェ&ガッバーナ × 呪術廻戦 Vite + React + three.js + CSS in JS (Emotion)

Slide 31

Slide 31 text

事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽する」ポイント 段階リリースの効率化

Slide 32

Slide 32 text

事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽する」ポイント - 段階リリースの効率化 ˜ ティーザーサイト含めて数バージョンのリリースがあS ˜ 各バージョンで基本的なサイトの構造は変わらなg ˜ リリースのバージョンが進むことにによって、解禁される情報があS ˜ 解禁される情報の中には画像データも含まれS ˜ 各バージョンのリリースの間隔が短g ˜ 確認作業も同時並行となることもある 段階リリースの概要

Slide 33

Slide 33 text

事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽する」ポイント - 段階リリースの効率化 ブランチをバージョンごとに切ると管理が手間なので、 全バージョンのデータを一つの開発環境に入れて開発したい。 解禁されていない情報をソースコードに含めるのは当然NG。 しかし、簡単にバージョンを切り替えられるようにしたい。 ※ソースコードはGitで管理している前提です。 じゃあどうしよう??

Slide 34

Slide 34 text

事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽する」ポイント - 段階リリースの効率化 主なディレクトリ構造と役割 project root public ・・・  静的ファイル。ビルド時にdistディレクトリへそのままコピーされる。 images ・・・  画像ファイル。ここから各バージョンに必要な画像がpublicディレクトリにコピーされる。 src ・・・  主に.ts, .tsxファイル。ビルドを通してjsファイルなどにコンパイルされ、distディレクトリに展開される。 index.html ・・・  ページのHTML。ビルド時に一部書き換えがされ、distディレクトリに展開される。 dist ・・・  出力先ディレクトリ。 buildTools ・・・  ビルド関連の処理を行うnode.jsスクリプトを格納したディレクトリ。

Slide 35

Slide 35 text

事例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

Slide 36

Slide 36 text

事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽する」ポイント - 段階リリースの効率化 Viteの設定ファイルの特徴

Slide 37

Slide 37 text

事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽する」ポイント - 段階リリースの効率化 defineオプションによる定数の置換とTree-Shaking たとえば、BUILD_INDEX = 0の場合は商品情報のコンポーネントはソースに含めない、といったことができる。

Slide 38

Slide 38 text

事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽する」ポイント - 段階リリースの効率化 ビルド前後の処理 (画像コピー/削除、テキストデータ整形) + Tree-Shakingによる不要コード削除 によって、ブランチを切り替えることなく 各バージョンの切り替えを実現。

Slide 39

Slide 39 text

事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽しむ」ポイント WebGL演出の作り込み・最適化

Slide 40

Slide 40 text

事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽しむ」ポイント - WebGL演出の作り込み・最適化 背景のエフェクト キャラクター全身 タイトル、背景のキャラクター画像の空間 その1. 各WebGL描画エリアの 解像度を最適化

Slide 41

Slide 41 text

事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽しむ」ポイント - WebGL演出の作り込み・最適化 WebGL描画エリアの基本的な方針 zs 高解像度ディスプレイに対応 
 (window.devicePixelRatioの値を利用するn gs ピクセル数がしきい値を超えると描画の解像度を
 window.devicePixelRatioの1/2にする

Slide 42

Slide 42 text

事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽しむ」ポイント - WebGL演出の作り込み・最適化 各エリアに対する追加ルール ‡ 背景のエフェクト 
 → そもそも激重なので、window.devicePixelRatio * 0.6
   の値を使用すƒ ‡ タイトル、背景のキャラクター画像の空間
 → 基本方針に沿p ‡ キャラクター全身
 → 常にはっきりくっきりさせたいので、基本方針2は適用しない

Slide 43

Slide 43 text

事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽しむ」ポイント - WebGL演出の作り込み・最適化 ボケずに見せたい箇所と、
 ある程度ボケても問題ない箇所を分けることで パフォーマンスとクオリティを両立。

Slide 44

Slide 44 text

事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽しむ」ポイント - WebGL演出の作り込み・最適化 その2. キャラクター出現アニメーション

Slide 45

Slide 45 text

事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽しむ」ポイント - WebGL演出の作り込み・最適化 ノイズのリアルタイム計算は重いので、 左のようなノイズ画像を使用する。

Slide 46

Slide 46 text

事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽しむ」ポイント - WebGL演出の作り込み・最適化 アニメーションが一律にならないように アニメーションごとに 使用位置をオフセットする

Slide 47

Slide 47 text

事例2: ドルチェ&ガッバーナ × 呪術廻戦 「楽しむ」ポイント - WebGL演出の作り込み・最適化 パフォーマンス低下につながる ノイズのリアルタイム計算を画像で回避しつつ 使用する位置のオフセットを設定することで アニメーションが単調になってしまうのも同時に回避。

Slide 48

Slide 48 text

まとめ 自動化や効率化で手間のかかる作業の時間を短縮して こだわるポイントに思い切り時間をかける!