Flutter for WebでFirebaseを使ってみる

11826 ワード
Firebase FirebaseAuth Firestore Flutter Firebase テキストリンク

はじめに

FlutterでのiOS/Androidアプリ開発を半年ほどやってきて、だいぶFlutterに慣れてきた。
逆にFlutterばかりやっていて、HTMLやCSSを書くのが苦になってきたため、FLutter for Webを使ってウェブアプリを作ってみることにした。

Flutter for Webは現在(2020年10月時点)ベータ版としての提供のため不安があったが、簡単なアプリであれば特に問題なく作ることができた。

ただ、Firebaseの各種サービスとの連携に関して、ネイティブアプリと比べると情報が少なかったため、ここに書き留めておく。

結論

最初に結論を書いておくと、for Webだろうと、Firebase関連は難しくない。
「ネイティブアプリと違って、パッケージが対応していない」
最初はこれに戦慄を覚えたが(おおげさ)、これは古い情報である。

現在はほぼ対応しており、ネイティブアプリと同じように使用できる。
つまり、Flutterの経験はあるけど、webは初めてという方であれば、特に問題はないだろう。

初期設定が若干違うため、本記事ではその手順を紹介していく。

ウェブアプリの追加

Firebaseのプロジェクト作成は完了している前提で進めていく。

Firebaseのコンソール画面の左メニューから、設定画面を開き、ウェブアプリを追加する。

アプリ名を入力し、登録ボタンをクリック。
後ほどFirebase Hostingを使ってデプロイ予定なので、「このアプリの Firebase Hosting も設定します。」にチェックを入れているが、ここは任意でOK。

②以降の手順はスキップし、「次へ」をクリックして登録を完了させる。

Firebaseをアプリのコードに追加

前述のウェブアプリの追加が完了後、再度設定画面を開く。
以下のように、先ほど追加したアプリの情報が表示されている。

ここで、Firebase SDK snippetの「CDN」を選択し、表示されたコードをコピーする。

アプリのweb/index.htmlを開き、以下の場所に貼り付ける。

web/index.html
<script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('flutter-first-frame', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
 </script>

<!-- ここにコピーする -->

 <script src="main.dart.js" type="application/javascript"></script>

続いて、<script src="https://www.gstatic.com/firebasejs/{バージョン}/firebase-app.js"></script>の下に以下を追記し、authとfirestoreを使えるようにする。
バージョン部分は、Firebaseの設定画面からコピーした数値。


<script src="https://www.gstatic.com/firebasejs/{バージョン}/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/{バージョン}/firebase-firestore.js"></script>

最終的なweb/index.htmlは以下の通り。

web/index.html
<!DOCTYPE html>
<html>
<head>

  <base href="/">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="honmemo_web">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>honmemo_web</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('flutter-first-frame', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>

  <!-- 7.24.0の部分は、異なる場合があるため、Firebaseの設定画面からコピーした値に合わせる -->
  <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-analytics.js"></script>

  <script>
    var firebaseConfig = {
      apiKey: "コピーした値",
      authDomain: "コピーした値",
      databaseURL: "コピーした値",
      projectId: "コピーした値",
      storageBucket: "コピーした値",
      messagingSenderId: "コピーした値",
      appId: "コピーした値",
      measurementId: "コピーした値"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  </script>
  <script src="main.dart.js" type="application/javascript"></script>

</body>
</html>

これで、Firebaseを使う準備が完了=終了。

おわりに

firestore等の使い方は割愛する。
冒頭でも述べたが、ネイティブアプリ開発と同じように、パッケージを使えばOK

firebase_auth：https://pub.dev/packages/firebase_auth
cloud_firestore：https://pub.dev/packages/cloud_firestore

参考記事

Cloud Firestore: https://i-doctor.sakura.ne.jp/font/?p=42522