ID:9046さん

LINE向けの公式エクステンションアプリを作成しました。このアプリはLIFFというチャット内でのみ使えるWebアプリケーションのようなもので、LINEから提供されるLIFF APIやMessaging APIを活用して作ります。 私が作ったアプリは短尺動画をLINEのトーク内で送信しあえるアプリケーションです。先述の「短編動画アプリの開発」で作ったアプリケーションの資産を活用しています。 世界数十カ国のLINE端末に組み込まれておりすでに数億近いユーザーが利用できる状態になっています。 技術としてはフロントエンドをVue.js + VanillaJS、バックエンドはRails5のAPIを利用するシンプルな形となります。 一部ではAWS Lambda + API Gateway + AWS Lambda LayerをServerless Framework + TypeScriptで構築したAPIを利用しています。というのも少々画像処理が必要な部分があり、通常のwebサーバーだとリクエストが詰まってしまうので、サーバーレス構成である程度拡張性を持たせるようにする必要があったためです。CaaS構成を自前で組むという選択肢もなくはないですが、リリース日がタイトだったこととすでに本番運用経験があったことなどからその時最適な手段として上記のサーバーレス構成を選びました。 また、多言語対応が必須の要件だったのでこれを企画運用側のチームだけで柔軟に入れ替え可能にするための管理画面の企画や一部実装なども行いました。これはRails5+Vue.jsのみで構築されています。 RailsアプリはCodeBuildでGitHubへのPushをフックにして自動でテストが走るようになっています。これはすでに社内にあった仕組みをそのまま利用しています。 またGIFアニメーションに文字を合成する機能を開発しました。要件としてユーザーへ3秒以内にレスポンスする・全世界の言語+絵文字の全ての文字をごちゃまぜで合成可能にするというものがあり、これらはどれも少々苦労しました。 ユーザーへのレスポンス問題に関しては、GIFアニメーションのフレーム数を徹底的に絞り合成処理の絶対数を減らすよう専用のフレーム減縮版画像の事前生成を仕組みを作ることで解決しました。 入力文字問題に関しては当初ImageMagickを用いてバックエンドのみで処理する予定でしたが、それでは文字生成時に絵文字や多言語のチャンポンに対応できませんでした。かといってフロントエンドのみでGIFへの合成を行うには処理が遅く、また端末への負荷も大きかったので採用しづらかったです。最終的にはHTML5Canvasで文字情報のみフロントエンドで生成しそれをバックエンドへ送信、そしてGIFの各フレームへの合成はバックエンドのImageMagickで行うように処理を分割することで解決しました。 フロントエンドの苦労話としてはGIFアニメがそもそも重いという問題がありました。どれだけフレームを減らし色数を落としリサイズしても容量には限度があります。これはAndroidでしか対応していませんが、ServiceWorkerをふんだんに使うことでこの問題に対処しています。このアプリは幸い更新頻度が頻繁というわけもないのでサムネイル画像や静的ファイルはすべてServiceWorkerでキャッシュできます。これでAndroidユーザーは一度使った画像は次回アクセス時より通信が不要になりました。

Flutter製のGIFビューアーアプリを開発しました。 元々はFlutterを利用してみたいという気持ちから自分で開発をはじめたものです。 バックエンドのAPIはRails製のごくごく普通のRESTful APIを利用して、FlutterからはそのAPIを呼び出し、結果をいい感じに表示させています。いいね機能はFirestoreに結果を保存するようにしています。 アーキテクチャはBLoCパターンを利用しました。採用理由は問題意識からというよりはGoogle I/OでBLoCがオススメされていたからでした。 社内向けのアプリなので厳しい要件もなく、使いたい技術を試験的に利用し、知見を貯めていくことができたアプリ開発でした。