新機能の開発プロジェクトについて伺う

――今日は、色々お話を聞けるということで楽しみにしていました。まずは自己紹介をお願いします。

杉本：株式会社リチカでフロントエンドエンジニアをやっている杉本と申します。

株式会社リチカ エンジニア 杉本圭氏

朝賀：朝賀と申します。3月に入社し、バックエンドやセキュリティなどを主に担当しています。

株式会社リチカ エンジニア 朝賀勇希氏

――現在、どんなプロダクト開発に従事していらっしゃいますか？

杉本：誰でもかんたんにマーケティング動画や静止画を作れるWebサービス『リチカ クラウドスタジオ』を開発しています。

『リチカ クラウドスタジオ』は、業種別や配信媒体別の数多くのフォーマット（型）をベースに、クオリティの高い動画を誰でもかんたんに作成できるのが特徴です。当社は元々制作会社だったため、社内にプロのクリエイターが多数在籍しているので、彼らによって制作されるフォーマットが大きな強みのひとつです。

朝賀：昨年後半からは、『リチカ クラウドスタジオ』の新機能の開発プロジェクトが進行していて、現在は主にそちらの開発に従事しています。

――どのような新機能か、伺ってもよろしいですか？

はい、大きく分けて2つありまして、静止画のリアルタイム編集機能と、比率違いの静止画を一括制作できる機能です。

これにより、ブラウザ上で作成したイメージを、他の比率にも最適化された形で一括反映できるようになります。すでに一部のお客様には機能を提供し始めています。

「Reactのカスタムフックは非常に重宝しています」

――その新プロジェクトでお二人が開発をされている、と。

杉本：はい、私は主にフロントエンド側で、静止画をリアルタイム編集する機能を作っています。

作成中の静止画は、APIを経由してサーバーに送信され、自動保存されます。静止画そのものを送るわけじゃなくて、静止画の構造をJSON形式に変換して、それをサーバーに送信する形を取っています。

――高度なフロントエンド処理が求められそうですね。どのようなライブラリやアーキテクチャで開発していますか？

杉本：主にReactを使用しています。特に、カスタムフックは非常に重宝していますね。

途中から一部の機能をカスタムフックを用いた実装に切り替えたのですが、コードの見通しが非常に良くなり、生産性も向上しました。

――非常に興味深いです。詳しく教えてください。

杉本：はい、カスタムフックについてはご存じの方も多いと思うのですが、カスタムフックを使うと、コンポーネント内のロジックをフックに抽出して共通化することができます。

以前の実装では、例えばエラーハンドリングに問題を抱えていました。

以前はAPIリクエストを行う処理をコンポーネントの処理内に記述していたんですが、APIでエラーが発生した場合、それを適切に処理してユーザーにエラーメッセージを表示する…といったことがうまくできなかったんです。

そうした処理をカスタムフックにまとめることで、コードの再利用性が高まり、アプリケーションの堅牢さも向上しました。

――他にも、カスタムフックの恩恵を受けて実装が楽になった処理などはありますか？

杉本: そうですね、UndoやRedoなど、操作履歴を管理する機能も、カスタムフックのおかげでスマートな実装が実現できたかと思います。

Undoなどの処理を実現するには、ユーザーが行った操作と逆の操作を行っていくやり方と、各操作を行う時点のスナップショットに戻れるようにするというやり方がありますが、私たちの実装ではスナップショット方式を使っています。

ステート管理とカスタムフックを組み合わせることで、アプリケーションの状態のスナップショットをスムーズに行き来できるようになっています。

――ちなみに、ステート管理にはどのようなライブラリを使用しているのですか？

杉本: JotaiやRecoilなど色々試した結果、現在はJotaiをメインで使用しています。Jotaiは軽量なのがすごく良いですね。

――静止画のリアルタイム編集処理を作るには、数学の知識なども必要とされそうですが、そういった点で苦労はありましたか？

杉本：実は、数学の知識がほとんどない状態から開発を始めたんです。だから最初は苦労の連続でした。

――そうなんですね！じゃ、開発だけじゃなくて数学の勉強も大変だったのではないですか？

はい、そのとおりです。例えば、図形のサイズを変更するってだけなら大したことはないんですが、図形を傾けてから変更する…となると、図形を傾ける軸の座標と図形を配置してある座標が違うので途端に難しい。

そうした処理を実装するのに、結局ベクトルや行列の勉強をしなくてはなりませんでした。

――ほかには例えば、図形同士が重なっていたりしても大変そうです。

そうですね、図形の重なり順を変更するなどの機能も、なかなか実装が大変でしたね。「最前面に送る」とか「最背面に送る」とかならまだ楽なんですが、「前面へ」とか「背面へ」とか、順番を一つずつ入れ替える処理などは苦労しました。

――そうした数学の学習はどのように行ったんでしょうか？「数学が不得意」というフロントエンドエンジニアの方の参考になるかと思うのでお聞かせください。

まずは、数学について解説してくれているサイトを見ながら、一つずつ学んでいきました。あと、Victor.jsなどのライブラリを使いながら、実際に動かしながら学習しましたね。

やはり、「仕事として作らねばならない」という目標があるのが良かったです。必要な知識を最短で吸収することができました。

ヘッドレスChromeで静止画出力！webフォントに落とし穴

――静止画エディタを開発していらっしゃる方からお話を伺うのは初めてで、大変新鮮です。他に開発に苦労した機能などはありますか？

杉本: そうですね、やはり、静止画を出力する機能はなかなか実装に苦労しました。

朝賀: マーケティング用の静止画って、YouTubeだとかInstagramだとか、出力先に応じて最適なサイズや縦横比が異なるんです。ブラウザ上で編集した静止画を、そうした要件に合わせた様々なサイズで出力するのが実はかなり大変なんです。

――確かに、ブラウザ上で作成したイメージを静止画に出力するのって、どうすれば実現できるのか想像がつかないです。どのように実現したのでしょうか？

朝賀: サーバーサイドでChromeを立ち上げてイメージを描画させて、スクリーンショットを撮るようなやり方で、静止画を作っています。

――おお、なるほど！そのようにすれば確かに静止画化できますね。しかも、ブラウザ上で描画できるどんなものでも静止画にできちゃいますね。

朝賀: そうなんです。もう少し具体的に言うと、AWSのコンテナ上でヘッドレスChrome（UIを伴わずに起動できるChrome）を立ち上げて実装しています。

まだ開発途上の段階なので、リクエストを受けてからChromeが立ち上がるような実装になっていますが、それでも2-30秒程度で処理が完了するので、今後最適化すれば、実用上全く問題ないレベルになると考えています。

――大変興味深いお話です。実現までには色々ご苦労があったかと思いますが…

朝賀: 一番苦労したのは実はwebフォントですね。

――webフォントですか？

朝賀: はい、クリエイティブ用のツールなので、様々なwebフォントも利用可能にしなくてはならないのですが、webフォントの多くは、ドメイン単位での利用が前提となっています。

でも、サーバーサイドでヘッドレスChromeをただ立ち上げるだけだと、アクセスURLが「localhost」とか、サーバーのIPアドレスとかになってしまうので、webフォントが使えなかったんですよ。

なので、サーバーサイドの（ヘッドレス）Chrome上でもwebフォントを利用できるよう、専用のホスティングサーバーを立ち上げてそこにアクセスする…などの工夫が必要でした。ローカルドメイン設定するとか他に良い方法はあったと思いますが、今はホスティングする形になっています。

――まさかwebフォントが苦労するポイントになるとは…。技術的にチャレンジしてらっしゃるからこそ出会うハードル、という感じですね。

リチカはエンジニア募集中！

――そろそろお時間になってしまいました。まだまだお話を聞いていたいところですが、ここでまとめの一言をお願いします。

杉本: そうですね、ブラウザ上で静止画の作成を実現するために難しい開発を求められるので、フロントエンド開発のやりがいがありますね。技術的にはもちろん、どんな要件を実現するかという点でも、いろんなチャレンジをさせてもらっているなと思います。

朝賀: やりがいっていう点だと、リチカ クラウドスタジオは社内の人も使っているので、サービスを改善すると同僚が喜んでくれるんです（笑）
社内からのフィードバックがすぐ得られて、同僚を喜ばせることができるっていうのは、個人的にはかなりやりがいになっていますね。

杉本: 弊社は現在フロントエンドエンジニアやフルスタックエンジニアの方を大募集中ですので、技術的なチャレンジや、クリエイティブ領域のプロダクトづくりに少しでも興味のある方はぜひご応募いただければ幸いです。

――本日は、ReactからヘッドレスChromeまで、興味深いお話を沢山お聞かせいただきありがとうございました！