More than 5 years have passed since last update.

FirebaseとFlutterで誰でも機械学習プログラミング

Last updated at 2018-12-14Posted at 2018-12-14

この記事はドワンゴ Advent Calendar 2018 15日目の記事です。

昨日は @ru_shalm さんの【縦書きCSSの夢：電子書籍みたいにページ単位でページ送りをする話】でした。
初めてカクヨムの縦書きモードを使った時は本当に感動しました。小説が縦書きになるだけでこんなに読みやすくなるとは思っていませんでした。ただ、スクロールスタイルだと電子書籍よりも読みにくいと感じてしまうのが正直なところなので、Webの小説もこの記事のように、電子書籍アプリで読んでいるような読み心地になるととても良いと思います。
また、僕は仕事でN予備校のiOSアプリを開発しています。N予備校にも現代文や古典のコースがあり、そこでは縦書きで教材を提供しています。縦書き関係のCSSはOSバージョンでの動作の違いもあるなど、なかなか開発が難しい部分でした。

今回の記事では僕のアドベントカレンダー史上初めて、仕事でやっているiOSアプリ開発について書こうと思います。また、Flutterについて記述しますが現在は仕事でFlutterを使っているわけではないのでご了承ください。

Flutterとは？

アプリの開発ではSwiftやKotlinを使ったプラットフォームごとに用意されたフレームワークを使って別々に開発していく方法や、React NativeやCordovaのようなフレームワークを使い、クロスプラットフォームアプリとして開発していく方法があります。¹
Flutterは後者に近いフレームワークです。1ソースでiOS、Androidの各アプリを開発できます。Googleが主導して開発を行っていて、言語はDartで開発します。

Googleが開発していることもあり、Googleが提唱しているMaterial Designに従ったアプリをとても簡単に作ることができます。²
ここでFlutterについて詳しくは記述しませんが、Flutterは勉強もしやすく、チュートリアルも充実しています。僕のおすすめは、まずGet Startedを一通りやった後、Codelabsの順でやることです。
CodelabsのWrite Your First Flutter App, part 1と、Write Your First Flutter App, part 2をやるだけでいろいろなアプリを作ることができるようになると思います。³

Firebaseとは？

Firebaseは言わずとしれたmBaaSで、モバイルバックエンドとしてとても優秀なサービスです。Firestoreなどのデータベースが有名ですが、それ以外にも認証を受け持ってくれたり、アクセス解析もしてくれたり、機械学習を用いたユーザー行動の予想なんてこともできます。
Firebaseはアプリを開発してグロースさせていくためには必須で入れる必要があると言っても良いものであると感じています。

Firebaseには様々なプロダクトがあり、すべてのプロダクトはこちらから見ることができます。
今回の記事ではこの中から、ML Kitについて記述します。

ML Kit

機械学習は最近のトレンドの一つです。ガートナーもAIは現実の問題を解決していく時期に入っていると説明していたり、最近ではNTTデータがAI技術者に最大で3000万の給与を支給するなど、バズワードで片付けられる時期は終わり、実際にAIを活用し問題を解決していくフェーズに入っています。AI技術者は給与が高いことも多いらしく、アプリ開発者の僕としてはAIを勉強しておけば良かったと後悔しているかもしれません。⁴
ML Kitはそんな機械学習の難しい部分をすべてGoogleがやってくれて、機械学習のすごい部分だけを簡単に扱うことができるフレームワークです。似たようなものにAppleのCore MLがあります。⁵

FlutterとFirebaseでアプリを作ろう！

FlutterとFirebaseは組み合わせてアプリを開発することができます！

まずはGet Startedを参考にFlutterをインストールしましょう。

インストールが終わった後はFirebaseをFlutterで使えるようにします。
FirebaseとFlutterを接続する方法として、こちらのFirebaseのドキュメントが参考になります。

今回はML Kitを使用するため、pubspec.yaml を以下のように記述しましょう。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  firebase_ml_vision: ^0.2.0
  image_picker: ^0.4.5

今回作るサンプルプログラムでは画像の解析を行ってみたいと思います。ML Kitのライブラリであるfirebase_ml_visionと、解析するための画像を取得するためにimage_pickerをインストールしましょう。
pubspec.yamlはPodfileのようなもので、いろいろな情報が記述されています。依存しているライブラリを記述すれば、Flutterがpackageをインストールしてくれます。依存関係以外にも様々なことを記述するので、どちらかというとpackage.jsonに近いものだと思います。

さて、次は実際にこれらのライブラリを使って機械学習をするアプリを作ってみましょう。
今回はML Kitのラベル推定を行います。ML Kitに画像を与えると、その画像を説明するテキストが返ってきます。Googleのサーバーを使って推定する有料のクラウド版と端末内で推定する現時点では無料のものがあります。クラウド版の方が優れた結果が出るのですが、今回は端末内での機械学習でラベル付けを行っていきます。

コードを書いてみる

Flutterで新規プロジェクトを作ったときに作成される _MyHomePageState クラスにML Kit用のコードを追加していきましょう。

まずは、画像と機械学習後のラベルを格納する変数を作成します。

main.dart

class _MyHomePageState extends State<MyHomePage> {
  File _imageFile;
  List<Label>  _scanResults;
  // ...
}

次に、image_pickerで端末内の画像を読み込む関数を作成しましょう

main.dart

class _MyHomePageState extends State<MyHomePage> {
  // ...
  Future<void> _loadImage() async {
    setState(() {
      _imageFile = null;
    });

    final File imageFile =
        await ImagePicker.pickImage(source: ImageSource.gallery);

    if (imageFile != null) {
      _scanImage(imageFile);
    }

    setState(() {
      _imageFile = imageFile;
    });
  }
  // ...
}

_loadImage関数でも使ってい、画像を推定する、ML Kitを呼び出している_scanImage関数はこのように実装します。

main.dart

class _MyHomePageState extends State<MyHomePage> {
  // ...
  Future<void> _scanImage(File imageFile) async {
    setState(() {
      _scanResults = null;
    });

    final FirebaseVisionImage visionImage =
        FirebaseVisionImage.fromFile(imageFile);

    FirebaseVisionDetector detector = FirebaseVision.instance.labelDetector();

    final List<Label> results =
        await detector.detectInImage(visionImage);

    setState(() {
      _scanResults = results;
    });
  }
  // ...
}

ここまでのコードでは何も難しいことはしていなく、

image_pickerのライブラリを使用して画像を取得する(_loadImage)
取得した画像をML Kitに渡す。detectorにはlabelDetectorを使用する(_scanImage)

と、これだけのコードです。
後はこれらの関数をUIに組み込めば完成です。
FlutterのUIはbuild関数で組み立てます。

main.dart

class _MyHomePageState extends State<MyHomePage> {
  // ...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: buildImage(context),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _loadImage,
        tooltip: 'Load Image',
        child: Icon(Icons.add),
      ),
    );
  }
  // ...
}

BodyとFloating Action Buttonを定義し、Bodyには画像データを、Floating Action Buttonが押された時は先程作成した_loadImage関数を呼ぶように指定します。
最後にbuildImage関数の実装を見てみましょう。

main.dart

class _MyHomePageState extends State<MyHomePage> {
  // ...
  List<Widget> buildImage(BuildContext context) {
    if (_imageFile == null) {
      return <Widget>[
        Text(
          'Select your photo from Floating Action Button.',
        ),
      ];
    } else {
      String labelString = "";
      if (_scanResults != null) {
        for (Label label in _scanResults) {
          labelString += 'Label: ${label.label}, '
              'Confidence: ${label.confidence.toStringAsFixed(2)}\n';
        }
      }
      return <Widget>[
        new Image.file(_imageFile),
        new Text(labelString),
      ];
    }
  }
  // ...
}

画像が無い時は説明の文字列を、画像がある時はその画像と画像から推定したラベルの一覧をテキストとして表示しています。
画像やラベルが変わった時に再描画などをするコードは記述していませんが、FlutterではStatefulWidgetの内容に変更があると自動で再描画を行います。今回のケースだと、画像が追加された時、推定が終わってラベルが生成された時に自動的に再描画され、画面が更新されます。

たったこれだけの実装で、機械学習を画像に適用して、画像にどんなものが写っているのか表示するプログラムができてしまいます！とても簡単ですね！

作成したアプリのプロジェクト全体はこちらです: https://github.com/kouki-dan/flutter-firebase-ml

実際にどんな結果が出るのか見てみましょう。
作成したアプリに僕の銀座ランチコレクションを与えていきたいと思います。⁶

東銀座ランチコレクション

しゃぶしゃぶ銀座しゃぶ通好の笹

Labelの値が推定された文字列、Confidenceは確からしさ（どれくらいの自信があるか、範囲は0~1)です。
Food, Cuisineあたりが0.9を超えていますね。見事に食べ物だということを当てています。

オムライスア・ヴォートル・サンテ・エンドー

こちらも見事に食べ物だということを当てています。

寿司かつら

こちらも見事にFoodだと言うことを当てていることに加え、Sushiとも推定されています。完璧ですね。

ラーメン船見坂

もちろんラーメンも完璧に認識しています。さすがに味噌バターコーンラーメンだということは認識されてはいませんが。

牡蠣かなわ

少し難しいかと思いましたが、カキフライも完全に食べ物だと理解されています。

ピザ Vomero

最後はピザです。こちらは Food より Pizza の方が高いですね。Firebaseはアメリカ育ちなのできっとPizzaをよく食べていたのでしょう。

まとめ

ここまで見てきたように、FlutterとFirebaseを使うことで簡単に機械学習を使ったアプリを作ることができます。ML Kitはラベル付け以外にもテキスト認識や、クラウドを利用したより高度なラベル付け、顔検出やバーコードスキャンもできます。まだベータ版ですが、機械学習の知識が全く無くてもこのような機械学習を利用したアプリを作成することができます。

本来ならここでFirebaseのML Kitを使ってこのようなアプリを作成しました！と宣伝する予定でした。しかし、急遽スマブラが発売されたからなのかはわかりませんが、作成したアプリのリンクが見つかりません。
Firebaseを使ったアプリをいろいろと製作中なので、興味があれば僕のTwitterをフォローして早くアプリのリリースしろよ！！と急かしていただければと思います。

今回はML Kitを使用しましたが、Firebaseはアプリ開発に必須だったり便利だったりするものがたくさん含まれています。ぜひドキュメントを参照し、これからのアプリ開発に役立てていただければと思います。

また、ドワンゴではエンジニアの採用も積極的に行っています！ N予備校のiOSアプリエンジニアのポジションも募集中で、こちらは今の所Flutterは使っておらず、SwiftとRxSwiftを用いたネイティブアプリですが、興味を持たれた方はぜひご応募お待ちしております！

ドワンゴに入社して銀座の美味しいランチを食べつくしましょう！

もちろんこれらを組み合わせる方法もあります。 ↩
というより、僕はMaterial Design以外でアプリを作るのはとても難しいと感じています。Flutterをもし仕事で使うことになった場合は、まずMaterial Designでいいかどうかの合意を取るところから始めると思います。 ↩
CodelabsのことはFlutterを勉強している時に知ったのですが、Flutter以外にもいろいろなサンプルコード、ドキュメント、チュートリアルが充実していてとても良さそうでした。僕はFlutter関係のCodelabをメインに見ていますが、余裕ができれば他のものも見てみようと思っています。 ↩
https://twitter.com/dangiruba/status/1069893610315821056 ↩
Googleが用意している難しい部分は汎用的に作られているため、個別の問題を解決するために、Googleが用意したモデル以外にも、自分たちで作成したドメインに特化させたモデルも扱うことができます。このモデルを作る人が給与をたくさんもらっているのでしょうね。目指していきたいものです。 ↩
ドワンゴは銀座にあり、銀座はランチが美味しいお店が多いことに加え、築地も近いため多種多様でとても美味なランチを堪能することができます。 ↩

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

FirebaseとFlutterで誰でも機械学習プログラミング

Flutterとは？

Firebaseとは？

ML Kit

FlutterとFirebaseでアプリを作ろう！

コードを書いてみる

東銀座ランチコレクション

しゃぶしゃぶ 銀座しゃぶ通 好の笹

オムライス ア・ヴォートル・サンテ・エンドー

寿司 かつら

ラーメン 船見坂

牡蠣 かなわ

ピザ Vomero

まとめ

しゃぶしゃぶ銀座しゃぶ通好の笹

オムライスア・ヴォートル・サンテ・エンドー

寿司かつら

ラーメン船見坂

牡蠣かなわ