ロゴアニメーションを生成するアプリを作った話

こんにちは、ハニカムラボの新入社員です。
新入りなので頑張るぞ。
ということでアプリケーションを作りました。
（正しくはパッケージ化できてないので未完）

何を作ったか

• Honeycomb Lab. prototypesの動画投稿用にアウトロのロゴアニメーションを作った
• せっかく手書き文字生成スクリプトがあるので、毎回アウトロのアニメーションが変わったら良いなと思ったのでアプリを作った
  • 実際に生成してる動画

Honeycomb Lab. prototypesってなに？

• お客様の「アイデア」や「夢」を技術で叶える弊社が社員の「アイデア」をプロトタイプしてみる社内企画。
  • 第一弾

どうやって作ったか

使用技術・ライブラリ

• ネイティブアプリ化
  • Electron.js
    • 後述のパッケージ時にPythonで躓いたのでeelにすればよかったかも
• バックエンド（メインプロセス）
  • Node.js
  • Python
  • PythonShell
    • node.jsからPythonのスクリプトをキックする人
    • 別にchild_process でも良かったけど、楽できそうだから採用
• フロントエンド（レンダリングプロセス）
  • TypeScript,HTML,Stylus
  • Parcel.js
    • 環境構築で楽したかったので使用（生JSで書くなら不要かも）
  • PIXI.js
    • 2D描画ライブラリ
    • 手癖で書けるくらいには慣れてる
    • ポジションの指定とかで楽したかったので採用
  • gsap
    • アニメーションライブラリ
    • timelineで楽したかったので採用
• 手書き文字生成
  • handwriting-synthesis
    • Handwriting Synthesis with RNNs
    • 神

処理の流れ

2ページで構成されています。

1. 生成ページ
   1. indexページ。生成された画像の一覧と画像再生成ボタンがある
   2. 画像再生成ボタン押下でメインプロセスへイベント発火、メインのnode.jsから手書き文字生成スクリプト(Python製)をキック
   3. 出力されたSVGファイルをフロントエンドディレクトリに出力
   4. フロントエンドで出力されたSVGを一覧、SVG部分押下で編集ページへ遷移
2. 編集ページ
   1. 配置やモーションなどの編集ページ。動画のダウンロードもできる
   2. SVGのpathコマンドをパースしてPIXI.jsのgraphicsで描画
   3. 2をアニメーションさせる
   4. MediaRecorderでcanvasの出力をキャプチャ
   5. webm形式にして保存用リンクを作成

工夫（苦労）ポイント

1. Pythonのバージョン

• 手書き文字生成スクリプトで利用されているTensorFlowの要求するPythonのバージョンが割とシビアなので、Pythonのバージョン指定のために仮想環境作りたかった
• distディレクトリにvenvディレクトリ作っちゃえば良いじゃない
• Pythonのパスをdist/.venv/bin/python指定することでなんか色々上手くいった
  • と思ったらelectronのパッケージ化段階で躓いているので普遍性なさそう

2. Parcel.jsさん不便で便利

• 無思考でTypeScript書きたかったからParcel採用したけど、これくらいの書き捨てコードなら生JavaScriptでも良かったかも知れない
• 普通のWebサイトなら良いけど、Electronしたりするとassetsのパス解決とかが面倒くさかった
• デファクトな構成を模索したい

3. Electron.jsさん不便で便利

• 普通にanchorでページ遷移できると思ってたらそうでもなくてちょっと面倒だった
• SPAなフレームワーク採用したら楽できたかもだけど今回の用途ではオーバースペックと思って不採用
• Pythonスクリプトをキックするならeelで良くねえ？

4. ペンでの手書きっぽさ追求

• 出力されたSVGはただの一筆書きでしかなく、あまり手書きっぽい表情が出ない
• 各moveTo/lineToのポジションから加速度を求めてstrokeWidthに掛け合わせると液溜まり感が出てペン字らしさが出た

5. 各種パラメータ調整GUI

• やるよねー
• 地味にグリッド表示は便利

6. 動画書き出し

• webmでの書き出しはフロントだけでできたがwebmの取り回しがすごく面倒くさい
  • Premiere Proとかに適当に突っ込めない
  • FFMPEGで変換しなきゃいけない

感想

• フロントエンドからバックエンドの行き来、バックエンドでもnodeとpython行き来したりしてとても脳みそが疲れました
• 表現を色々追求できたのは良かった
• イージングとかdelayはクオリティにつながるからもう少し精度あげていきたい
• いっぱいプロトタイプするぞ

Honeycomb Lab.をよろしく。