PWAからApp Storeへ：builder77でFlutterアプリを公開する

アプリを誰かのスマホに届けるには、以前ならプラットフォームを選び、その開発ツールを覚え、審査の順番を待ってからでないと誰にも試してもらえませんでした。builder77はこの道のりを2段階に分けます。まずPWAを今日公開して実際の人に使ってもらい、App StoreとGoogle Playに出す準備ができたら、ネイティブのFlutterに移ります。

ステップ1: すぐにインストールしてもらえるPWA

builder77でスマホアプリを作ると、最初からスマホアプリとして設計されます。画面の高さいっぱいのレイアウト、下部のタブで切り替えるナビゲーション、押しやすい大きなボタン、ノッチのある画面に合わせたセーフエリアの余白です。公開するとWebアプリマニフェストとサービスワーカーが付き、インストールできるようになります。

• 公開を押して、スマホでQRコードを読み取ります。
• iPhoneでは、共有 → ホーム画面に追加をタップします。Androidでは、インストールの案内かブラウザのメニューを使います。
• アプリは専用のアイコンを持ち、ネイティブアプリと同じように全画面で開きます。

これが感想をもらういちばん早い方法です。今日の午後にでも10人のテスターにリンクを送り、使い方を見ながら、ビルダーで改善を続けられます。公開するたびにアプリは全員分がすぐに更新され、ストアの審査もありません。

ステップ2: Flutterに変換する

アプリの形が整ったら、Flutterタブを開いて変換します。メッセージクレジットを30使います。builder77は、Webアプリと同じ画面、機能、デザインを持つFlutterプロジェクト（pubspec.yaml と lib/main.dart）をMaterial 3で生成します。

大事なのは、Flutterアプリがbuilder77のREST APIを通じて同じクラウドデータベースにつながり、コレクション名やフィールド名も同じものを使うことです。PWAで作ったデータはネイティブアプリにも表示され、その逆も同じです。アプリのユーザーは、どちらからでもログインできます。

// Generated at the top of lib/main.dart
const String kApiBase = 'https://builder77.com';
const String kProjectId = 'your-project-id';

// Example call made by the generated M77Client
// GET $kApiBase/api/runtime/$kProjectId/db/habits?sort=-createdAt

ダウンロードする前に試す

Flutter版は、何もインストールせずにFlutterタブの中で試せます。

• DartPad: 生成されたコードをDartPadで開いて、さっと確認できます。
• コード：生成されたDartのコードをビルダーの中で読んだり編集したりして、変更を保存できます。

気になるところがあれば、チャットで修正を頼んでからもう一度変換します。基準になるのはWebアプリなので、まずWeb版をしっかり仕上げてから、Flutterプロジェクトを生成し直すのがたいていはいちばんです。

プロジェクトをダウンロードして開く

Starter以上のプランでは、Flutterプロジェクトをダウンロードできます。そこから先は、Flutterの通常の手順です。

flutter create .          # adds the ios/ and android/ platform folders
flutter pub get
flutter run               # on a simulator or a connected device

ストアに公開する

いちばん簡単なのは、スマホアプリの公開ウィンドウかFlutterタブでApp StoreとGoogle Playで公開を押す方法です。月額$99で、私たちのチームがアプリをビルドして両方のストアにアップロードし、その後のアップデートもすべてアップロードします。自分で申請したい場合は、ご自身の開発者アカウントでAppleとGoogleのツールを使って行います。おおまかなチェックリストは次のとおりです。

• 他と重複しないバンドルID（アプリケーションID）とアプリ名を設定する。
• 両方のプラットフォーム用にアプリアイコンと起動画面を追加する。
• 署名を設定する。iOSでは配布用証明書とプロビジョニングプロファイル、Androidではアップロード用のキーストア。
• flutter build ipa と flutter build appbundle でリリース用のバイナリをビルドする。
• ストアの掲載情報を用意する。スクリーンショット、説明文、プライバシーに関する情報、サポートURL。
• App Store ConnectとGoogle Play Consoleで審査に申請する。

ストアの審査では、プライバシーがよく確認されます。ログイン機能があり個人データを保存するアプリには、プライバシーポリシーのURLが必要です。builder77に頼めば、Webアプリにプライバシーポリシーのページを追加してリンクしてくれます。

PWAも残しておく

ネイティブアプリを出しても、Web版をやめる必要はありません。PWAは同じデータで動き続けるので、ブラウザやパソコンから、あるいはストアからインストールする前でも、アプリを使ってもらえます。入口は2つ、バックエンドは1つ。あくまでひとつのプロダクトです。

私たちのおすすめは、PWAで手応えを確かめ、ユーザーから要望が出たら変換し、ストア版は、すでに使われているアプリの完成度を高めた版として考えることです。