LGTM画像を驚くほど簡単に作れるWebサービスをFlutter・Firebaseで作る

はじめに

最近はFlutter・Firebaseを使ったアプリケーション開発を行っていて、
インプットしつつアウトプットも積極的に行っていきたいと思っています。

そこで、今回は LGTM画像を驚くほど簡単に作れるWebサービスをScalaで作る - Qiita と
同じようなことをFlutter・Firebaseで実現してみた話です。

LGTM画像を驚くほど簡単に作れるWebサービス

LGTM画像を驚くほど簡単に作れるWebサービスをScalaで作る - Qiita と同じく
LGTM画像を作成・共有できるWebサービスをFlutter・Firebaseを使って作ってみました💪

LGTM Hub

https://lgtm.flutter-study.dev/

主な機能

• ✅　LGTM画像を作成できる
  • Google画像検索 or 画像アップロード から "LGTM" の文字列を含んだ "LGTM画像" を作成
  • GIFにも対応
• ✅　LGTM画像を共有・閲覧できる
  • "LGTM画像" を作成すると自動的に共有される
  • 共有された "LGTM画像" を誰でも閲覧できる

という感じで、基本的な機能に関しては元ネタを踏襲したような感じです🙇‍♂️

技術的な話

では、具体的にどの様にしてFlutter・Firebaseを使って
このWebサービスを実現したのかに関して紹介していきたいと思います。

使用技術

あまり知られていないかもしれないですが、
FlutterではAndroid/iOSアプリだけでなくWebアプリも開発することが出来るのです👀

また、今回使用した技術は全て無料で利用できるものですよ🤩

• Flutter
  • Flutter on the Web
• Firebase
  • Cloud Firestore
  • Cloud Storage
  • Cloud Functions
  • Hosting
• Netlify
  • Netlify Functions

システム全体像

極力Flutter側で処理を行うようにしつつ、
Flutter側で実現が難しい部分のみCloud Functionsで処理するような構成にしてみました。

画像検索
Google Custom Search API を利用し画像検索の機能を実現しています。
API用のトークンを見えないようにするためCloud Functions経由でAPIを利用しています。
（まぁ、利用制限をしてあるので見えてもクリティカルな問題ではないですが一応）

また、画像検索結果から元画像を取得する際にCORSの制約を回避するため、
Netlify Functions経由で画像を取得しています。
本来であればCloud Functionsで行えばよいのですが、
無料プランではCloud Functionsからインターネットに接続できないという制約があるため仕方なく利用しています😅

LGTM画像作成
Cloud Functionsで画像変換処理を行い、Cloud Storage・Cloud Firestoreへの登録処理はFlutter側で行っています。
異なる設計としては、Cloud Storageに元画像を登録しトリガーに応じてCloud Functionsで処理するような構成もあるかなと思いますが、
今回は余計なデータが作成されない方法で作ってみました。

LGTM画像共有
LGTM画像自体はCloud Storageに置きつつ、
投稿されたLGTM画像のURLなどはCloud Firestoreに保存し一覧で取得できるようにしています💪

全体イメージ

LGTM画像作成の詳細

LGTM画像を作成しCloud Firestoreに登録するまでの流れを
詳しく見ていきたいと思います👀

まず、画像アップロードなどから取得した画像データをCloud Functionsに送り
LGTM画像へと変換を行います。
Cloud FunctionsにはデフォルトでImageMagickが入っているため、
簡単に画像変換処理を行うことが出来きるのです🤩
作成したLGTM画像をFlutter側で受け取り、Cloud Storageに保存します。

そして、Cloud Storageに保存したLGTM画像のURLはCloud Firestoreの方に保存します。
共有されたLGTM画像を表示するときはFirestoreからLGTM画像URLの一覧情報を受け取り、
LGTM画像自体はCloud Storageから取得することができます👍

処理フロー

Cloud Firestore 保存データ

{
    "imageURL": "https://firebasestorage.googleapis.com/v0/b/xxx.appspot.com/o/images%2Fxxx.jpeg?alt=media&token=xxx",
    "createdAt": "2020年1月1日 12:00:00 UTC+9",
}

さいごに

今回はFlutterとFirebaseを使って
LGTM画像を作成・共有できるWebサービスを作ってみた話でした。

LGTM Hub
https://lgtm.flutter-study.dev/

Flutter・Firebaseを使ったアプリケーション開発自体は決して難しいものではないと思いますが、
従来のバックエンドAPIやRDBなどを使ったシステムに比べ
まだまだシステム構成やシステム設計に関して情報が少ないなと感じています。

なので、この記事をきっかけにFlutter・Firebaseを使ったアプリケーション開発入門者の
手助けになれば良いなと思います🙇‍♂️

Flutterで始めるアプリ開発

また、Flutter・Firebaseを使ったアプリケーション開発入門用のWebサイトや
MENTAにて入門者の学習サポートも行っているので、良かったらご利用下さい。

Flutterで始めるアプリ開発
https://www.flutter-study.dev/

【初心者大歓迎】Flutterで始めるアプリ開発
https://menta.work/plan/1947