（この頁はdocs.flutter.dev(https://docs.flutter.dev/platform-integration/web/initialization)のリファレンスブログです。）

目次 index【閲覧時間3分】　click !!>>

１．Bootstrapping

　ここでは、Flutter Webアプリの初期化プロセスと、必要に応じてそのプロセスをカスタマイズする方法について触れています。

　Flutter Webアプリでは、アプリの初期化ロジックが非常に重要です。

デフォルトのロジックで十分な場合は、flutter_bootstrap.js をそのまま使用。
特定の要件がある場合は、flutter_bootstrap.js をカスタマイズしてプロセスを柔軟に制御します。

　これにより、開発者はFlutter Webアプリを自分の環境や要件に合わせて最適化できます。

（１）初期化プロセスの概要

（Bootstrapping（ブートストラップ）とは？）

Flutter Webアプリを動作させるために必要な初期化処理を指します。
flutter build web コマンドを実行すると、以下のような成果物が build/web/ ディレクトリに生成されます。
- flutter_bootstrap.js
  - Flutter Webアプリを初期化して起動するためのJavaScriptコードを含むスクリプトファイル。
- index.html
  - WebアプリのルートHTMLファイル。

　このブートストラップ処理は、flutter_bootstrap.js を利用して行われます。

（２）初期化スクリプトの利用方法

　flutter_bootstrap.js を使ってFlutter Webアプリを初期化する方法には、以下の２つがあります。

（ⅰ）スクリプトとして参照

　index.html 内に <script> タグを使用して、flutter_bootstrap.js を参照します。
（このスクリプトは非同期で読み込まれます。）

（index.html）<script> タグを使用して、flutter_bootstrap.js を非同期に参照（例）：

<html>
  <body>
    <script src="flutter_bootstrap.js" async></script>
  </body>
</html>

（ポイント）

async 属性を追加することで、スクリプトの読み込みが非同期で行われ、ページの他の要素がブロックされません。
ビルド後に生成されるflutter_bootstrap.jsをそのまま利用します。

（ⅱ）スクリプトのインライン化

　flutter_bootstrap.js の内容を直接 index.html に埋め込む方法もあります。
この場合、{{flutter_bootstrap_js}} テンプレートトークンを使用します。

（index.html）{{flutter_bootstrap_js}} テンプレートトークンを使用して、flutter_bootstrap.js の内容を直接 index.html に埋め込む（例）：

<html>
  <body>
    <script>
      {{flutter_bootstrap_js}}
    </script>
  </body>
</html>

（ポイント）

flutter_bootstrap.js の内容がビルド時にテンプレートトークン {{flutter_bootstrap_js}} の位置に置き換えられます。
スクリプトを１つのHTMLファイルにまとめたい場合に便利です（CDNや外部スクリプトを使用しない場合など）。

（補足）

なぜ1つのHTMLにまとまるのか？

ビルド時のテンプレートトークンの置き換え
開発中（web/ ディレクトリにコードを配置している状態）では、web/flutter_bootstrap.js ファイルが存在している必要があります。
ビルド後（flutter build web を実行後）、{{flutter_bootstrap_js}} トークンが置き換えられ、index.html に flutter_bootstrap.js の内容が直接埋め込まれます。
ビルド後の成果物には flutter_bootstrap.js は含まれない
flutter_bootstrap.js の内容が完全に index.html に組み込まれるため、build/web/ ディレクトリには flutter_bootstrap.js ファイル自体は含まれません。
最終的には index.html だけで初期化が可能になります。

（３）カスタマイズの可能性

（ⅰ）デフォルトスクリプトを利用

　デフォルトでは、flutter build web コマンドにより生成された flutter_bootstrap.js がそのまま利用されます。

（ⅱ）カスタムスクリプトの利用

　必要に応じ、自分でカスタマイズした flutter_bootstrap.js を作成し、プロジェクトの web/ ディレクトリに配置します。。

（効果）

デフォルトの初期化処理を上書きする形で、カスタムロジックを実行可能。
例: サービスワーカーの設定変更、アセットロードのベースURLの変更など。

（４）カスタマイズのユースケース

（ユースケース１）サービスワーカーのカスタマイズ

Flutter Webはデフォルトでサービスワーカーを使用しますが、特定の動作をカスタマイズしたい場合に、flutter_bootstrap.js を編集します。

（ユースケース２）アプリの進捗表示

初期化処理の進捗状況をユーザーに知らせたい場合に、flutter_bootstrap.js をカスタマイズしてプログレスインジケーターを表示できます。

（５）トークン{{flutter_bootstrap_js}}の動作

このトークンはテンプレートとして使用され、Flutterのビルドプロセス中に flutter_bootstrap.js の内容に置き換えられます。
結果として、build/web/index.html にスクリプト内容が反映されます。

３．初期化のカスタマイズ（flutter_bootstrap.js）

（１）初期化のカスタマイズ（Customize initialization）とは

　通常、flutter build web を実行すると、Flutter Webアプリの初期化を行う flutter_bootstrap.js というスクリプトが生成されます。
このスクリプトはシンプルな初期化処理を行いますが、以下のようなケースでは、カスタマイズが必要になる場合があります。

アプリ固有のFlutter設定を追加したい場合
- 例: アセットのロードパスを変更する、CanvasKitの設定を切り替えるなど。
Flutterのサービスワーカー（Service Worker）の設定を変更したい場合
- 例: サービスワーカーのキャッシュバージョンを指定する。
初期化プロセスの異なる段階でカスタムJavaScriptコードを実行したい場合
- 例: 初期化中に進捗を表示したり、デバッグ情報をログに出力する。

（２）カスタムロジックを追加する方法

手順
- プロジェクトの web/ ディレクトリに flutter_bootstrap.js ファイルを作成します。
- デフォルトのスクリプトの代わりに、このカスタム flutter_bootstrap.js が使用されます。
ビルド時の処理
- カスタム flutter_bootstrap.js ファイルはテンプレートとして扱われます。
- ビルド時に特定のトークンが置き換えられ、カスタムスクリプトが build/web ディレクトリにコピーされます。

（３）使用可能なテンプレートトークン

（ⅰ）{{flutter_js}}

　・Flutterのローダーオブジェクト（_flutter.loader）を利用可能にするJavaScriptコード。
　・詳細は後述の_flutter.loader.load() APIを参照。

（ⅱ）{{flutter_build_config}}

　・ビルドプロセスで生成されたメタデータを含むJavaScriptコード。
　・このメタデータにより、FlutterLoaderがアプリの初期化に必要な情報を取得。

（ⅲ）{{flutter_service_worker_version}}

　・サービスワーカーのバージョン番号（ユニークなビルド番号）。
　・サービスワーカー設定で使用可能。

（ⅳ）{{flutter_bootstrap_js}}

　・flutter_bootstrap.js の内容を直接 index.html にインライン化。
　・このトークンは index.html のみで使用可能。

（４）カスタマイズ例

（ⅰ）トークンを使ったカスタム（flutter_bootstrap.js）

（flutter_bootstarap.js）カスタム例：

{{flutter_js}} // Flutterローダーを利用可能にする

{{flutter_build_config}} // Flutterアプリのメタデータを設定

// 初期化ロジック
_flutter.loader.load({
  config: {
    // カスタム設定を追加（例: アセットのロードパスを変更）
    assetBase: "/custom_assets/",
    renderer: "canvaskit", // レンダラーをCanvasKitに設定
  },
});

（ⅱ）トークンを使ったカスタム（index.html）

カスタム初期化スクリプトを index.html に直接埋め込む場合：

<html>
  <body>
    <script>
      // flutter_bootstrap.js の内容がここにインライン化される
      {{flutter_bootstrap_js}} 
    </script>
  </body>
</html>

　この方法では、flutter_bootstrap.js の内容が完全に index.html に埋め込まれるため、別ファイルを必要としません。

（５）主なカスタマイズのユースケース

５．１　Flutter設定とサービスワーカー設定と初期化プロセス設定の違い

（ａ）Flutter設定

　Flutter設定は、Flutter Webアプリの動作やランタイム環境に影響を与える設定です。
　これらはアプリがどのように描画を行い、アセットをロードするかなど、Flutter自体の挙動に関係しています。

renderer
- 描画方法（canvaskit（高品質）、skwasm（軽量）、auto（最適なレンダラー））
assetBase
- アセット（画像やフォントなど）のロード元
canvasKitForceCpuOnly
- GPUではなくCanvasKitでCPU専用レンダリングを強制
canvasKitVariant
- CanvasKitのバリアント（種類）
  - full（全機能をサポートするバリアント）
  - chromium（Chromiumベースの軽量バリアント））

（ｂ）サービスワーカー設定

　サービスワーカー設定は、Webブラウザがアプリケーションをどの様にｍキャッシュし、オフラインで利用できるかを制御します。
　これらは、Flutterアプリ自体の挙動ではなく、アプリケーションをホストするブラウザ環境に関連しています。

serviceWorkerVersion:
- サービスワーカーのキャッシュバージョンを指定します。
  新しいバージョンを指定することで、キャッシュの更新を強制できます。
キャッシュ管理:
- ブラウザがどのリソースをキャッシュし、どのタイミングで更新するかを制御。
  例: flutter_service_worker.js を使用して、アプリケーションの静的リソース（main.dart.js やアセット）をキャッシュ。
オフライン対応:
- ユーザーがインターネット接続なしでアプリを利用できるようにする。
  サービスワーカーは、キャッシュされたリソースを利用してアプリをオフラインでも動作させます。

（ｃ）初期化プロセス設定

初期化段階で特定のアクション
- ログの出力
- 外部APIとの通信
- 設定の適用など
具体的には、Flutterエンジンが初期化されるタイミングや、アプリが実行される直前にカスタムロジックを挿入することができます。

５．２　カスタマイズのユースケース

（ａ）Flutter設定の変更

例: CanvasKitのレンダラーを使用し、アセットのベースURLを指定する

_flutter.loader.load({
  config: {
    renderer: "canvaskit",
    assetBase: "/cdn/flutter_assets/",
  },
});

（ｂ）サービスワーカー設定

サービスワーカーのキャッシュバージョンを指定する

_flutter.loader.load({
  config: {
    serviceWorkerVersion: "{{flutter_service_worker_version}}",
  },
});

（ｃ）初期化プロセス設定

各初期化段階でログを出力

_flutter.loader.load({
  onEntrypointLoaded: async (engineInitializer) => {
    console.log("エンジンがロードされました");
    const appRunner = await engineInitializer.initializeEngine();
    console.log("アプリが起動しました");
    await appRunner.runApp();
  },
});

（６）注意点

トークンの正しい使用
- {{flutter_bootstrap_js}} は index.html のみで使用可能。
- 他のトークン（例: {{flutter_js}}）は flutter_bootstrap.js でも利用可能。
開発中とビルド後の違い
- カスタムスクリプトを編集する際は、web/ ディレクトリ内で作業します。
- ビルド後は、テンプレートトークンが置き換えられた最終成果物が build/web/ に生成されます。

（７）まとめ

Flutter Webアプリの初期化プロセスは、flutter_bootstrap.js をカスタマイズすることで柔軟に変更可能。
使用可能なトークン（例: {{flutter_js}} や {{flutter_bootstrap_js}}）を活用し、特定の初期化設定やロジックを簡単に適用する。
ユースケースに応じて、アプリ設定、サービスワーカー設定、カスタムJavaScriptコードを追加可能。

　この方法を使えば、Flutter Webアプリの初期化をアプリの要件に合わせて最適化できます

４．flutter_bootstrap.js を書く

　カスタムflutter_bootstrap.jsスクリプトの作成について触れています。

（１）カスタム flutter_bootstrap.js スクリプトとは？

　Flutter Webアプリを起動する際、デフォルトでは flutter build web によって生成される flutter_bootstrap.js スクリプトが使われます。しかし、初期化プロセスをカスタマイズする必要がある場合、自分専用のカスタム flutter_bootstrap.js スクリプトを作成できます。

　カスタムスクリプトでは、Flutterアプリを正しく起動するために、最低限以下の3つの要素を含む必要があります。

（２）必須の3つのコンポーネント

（ⅰ）{{flutter_js}} トークン

Flutterのローダー（_flutter.loader）を利用可能にするJavaScriptコードを挿入します。
このトークンがあることで、Flutterアプリの初期化に必要なローダー機能が提供されます。

（ⅱ）{{flutter_build_config}} トークン

ビルドプロセスで生成されたアプリの設定情報（ビルドメタデータ）を含むJavaScriptコードを挿入します。
Flutterローダー（FlutterLoader）がアプリを正しく起動するための情報を提供します。

（ⅲ）_flutter.loader.load() の呼び出し

Flutterアプリを実際に起動する関数です。
これを呼び出すことで、エンジンの初期化やアセットのロードが開始されます。

（３）カスタムスクリプトを作成する流れ

flutter_bootstrap.js ファイルを作成
- プロジェクトの web/ ディレクトリにファイルを作成します。
  例: web/flutter_bootstrap.js
必要なコードを記述
- 上記の基本スクリプトをベースに、自分のアプリの要件に応じてカスタマイズします。
ビルドと反映
- flutter build web を実行すると、flutter_bootstrap.js の内容が build/web/ ディレクトリにコピーされ、初期化スクリプトとして使用されます。

（４）応用: カスタム設定を追加する例

（ⅰ）例: レンダラーとアセットパスをカスタマイズ

　_flutter.loader.load() に設定を渡して、CanvasKitレンダラーを有効化し、アセットのロードパスを変更する例です。

{{flutter_js}}
{{flutter_build_config}}

_flutter.loader.load({
  config: {
    renderer: "canvaskit", // CanvasKitを使用
    assetBase: "/cdn/flutter_assets/", // アセットをCDNからロード
  },
});

（ⅱ）初期化中にログを出力

　初期化の進捗状況をログに出力するカスタムコードの例

{{flutter_js}}
{{flutter_build_config}}

_flutter.loader.load({
  onEntrypointLoaded: async function(engineInitializer) {
    console.log("エントリポイントがロードされました");
    const appRunner = await engineInitializer.initializeEngine();
    console.log("エンジンが初期化されました");
    await appRunner.runApp();
    console.log("アプリが実行されました");
  },
});

（５）注意点

flutter_bootstrap.js を配置する場所
- 必ず web/ ディレクトリ に配置します。
- この場所にファイルがあることで、ビルドプロセスが自動的に検出して反映します。
トークンの使用
- {{flutter_js}} や {{flutter_build_config}} は必須です。
- これらを含めないと、Flutterアプリの初期化に必要なコードが不足し、アプリが正常に動作しません。
ビルド後の確認
- ビルド後の build/web/ ディレクトリにコピーされた flutter_bootstrap.js の内容が正しいか確認して下さい。

（７）まとめ

　カスタム flutter_bootstrap.js を作成するには、以下の３つの要素を含む必要があります。

{{flutter_js}}: Flutterローダーを利用可能にするコード。
{{flutter_build_config}}: ビルド設定情報を提供するコード。
_flutter.loader.load(): Flutterアプリを実行する関数。

　必要に応じて設定を追加し、アプリの初期化プロセスを柔軟にカスタマイズできます。
　これにより、Flutter Webアプリの初期化を自由に制御し、特定の要件に対応した動作を実現できます！

５．Flutter Loader のカスタマイズ

　_flutter.loader.load() API を使用して Flutter Web アプリの初期化をカスタマイズする方法について触れています。

（１）_flutter.loader.load() API とは？

　_flutter.loader.load() は、Flutter Web アプリの初期化を実行する関数で、以下の２つの引数を受け取ることができます。

config（オプション）
- Flutter アプリの設定を定義するオブジェクト。
- 主にアセットのロードやレンダリング方法など、アプリの動作を制御します。
onEntrypointLoaded（オプション）
- エンジンの初期化が準備完了になった際に呼び出されるコールバック関数。
- コールバックは１つの引数（engineInitializer オブジェクト）を受け取り、このオブジェクトを通じてエンジンを初期化します。

（２）config オプションの詳細

assetBase <String>
- アプリのアセットディレクトリのベース URL。
- Flutter Web が別ドメインやサブディレクトリからアセットをロードする場合に設定。
canvasKitBaseUrl <String>
- canvaskit.wasm ファイルをダウンロードするベース URL。
canvasKitVariant <String>
- ダウンロードする CanvasKit のバリアントを指定。
canvasKitForceCpuOnly <bool>
- true に設定すると、CanvasKit の CPU 専用レンダリング（WebGL は使用しない）を強制。
canvasKitMaximumSurfaces <double>
- CanvasKit レンダラーが使用するオーバーレイサーフェイスの最大数を指定。
debugShowSemanticNodes <bool>
- セマンティックツリー（アクセシビリティ用）を画面上にデバッグ表示するかどうか。
entryPointBaseUrl <String>
- Flutter アプリのエントリポイントのベース URL。
- デフォルトは”/”。
hostElement <HtmlElement>
- Flutter が描画を行う HTML 要素。
- 未設定の場合、Flutter Web がページ全体を使用する。
renderer <String>
- 使用する Web レンダラーを指定。
- “canvaskit” または “skwasm” を選択可能。

（４）onEntrypointLoaded の詳細

　Flutter エンジンの初期化が完了したタイミングで呼び出されるコールバックです。
エンジン初期化用のオブジェクト（engineInitializer）を引数として受け取る。

_flutter.loader.load({
  onEntrypointLoaded: async function(engineInitializer) {
    console.log("エンジン初期化中...");
    const appRunner = await engineInitializer.initializeEngine();
    console.log("エンジン初期化完了。アプリを実行します。");
    await appRunner.runApp();
  },
});

（５）まとめ

_flutter.loader.load() は Flutter Web アプリの初期化を柔軟にカスタマイズ可能。
config オブジェクトでアプリの設定を調整し、onEntrypointLoaded で初期化のタイミングを制御できます。
主な設定内容
- assetBase: アセットのロード元を指定。
- canvasKitVariant: CanvasKit のバリアントを選択。
- hostElement: 描画対象の HTML 要素を指定。
- renderer: 使用するレンダラーを選択。

　これらを適切に組み合わせることで、アプリの初期化プロセスを最適化できます。

６．例：URL クエリパラメータに基づいた Flutter構成のカスタマイズ

　ここでは、URLクエリパラメータを使用してFlutter Webアプリの設定をカスタマイズする方法について触れています。

（１）この例の目的

　この例では、URLのクエリパラメータを使って、Flutter Webアプリの設定を動的に変更する方法を説明しています。
例えば、以下のようなURLにクエリパラメータを指定することで、Flutter Webアプリのレンダラーを選択できます。

//renderer=skwasm:
//( 使用するレンダラーを skwasm（軽量なWebAssemblyベースのレンダラー）に指定。
//  アプリはクエリパラメータを読み取り、それに応じて設定を変更します。)

https://example.com?renderer=skwasm

（２）コードの全体

//{{flutter_js}}:
//( Flutterローダー（_flutter.loader）を利用可能にします。)
{{flutter_js}}

//{{flutter_build_config}}:
//( ビルド時に生成された設定情報を提供します。)
{{flutter_build_config}}


//window.location.search:
//( URLのクエリパラメータを解析するためのオブジェクトを作成します。
//  現在のページのクエリパラメータ部分（例: ?renderer=skwasm）を取得。)
const searchParams = new URLSearchParams(window.location.search);

//renderer という名前のクエリパラメータを取得します。
//( 例:
//URL: https://example.com?renderer=canvaskit → renderer = "canvaskit")
const renderer = searchParams.get('renderer');

//renderer が指定されている場合、その値を設定します。
//( 例:
//    ・クエリパラメータがある場合 → {renderer: "canvaskit"}
//    ・クエリパラメータがない場合 → {}（デフォルト設定）)
const userConfig = renderer ? {'renderer': renderer} : {};

//取得した設定を使ってFlutterアプリを初期化します。
//( userConfig:
//    ユーザーがクエリパラメータで指定した設定。)
_flutter.loader.load({
  config: userConfig,
});

（３）このスクリプトが実現すること

URLからレンダラーを選択
- ?renderer=canvaskit や ?renderer=skwasm をURLに付加するだけで、アプリのレンダラーを動的に切替えられます。
- 開発やデバッグ時に便利です。
サービスワーカーの設定を保持
- この例では明示的に記載されていませんが、flutter_bootstrap.js はサービスワーカー設定（例: キャッシュバージョン）も保持します。

（４）実際の使用例

URLに指定されたレンダラーを選択
- URL: https://example.com?renderer=canvaskit
  （アプリは canvaskit を使用して描画を行う。）
- URL: https://example.com?renderer=skwasm
  （アプリは skwasm を使用して軽量な描画を行う。）
デフォルト設定を使用
- URL: https://example.com
  （クエリパラメータが指定されていない場合、デフォルトの設定で初期化。）

（５）応用: 他のクエリパラメータを使用したカスタマイズ

　この仕組みを拡張して、他の設定も動的に変更できます。

例: アセットロード元を動的に変更：

const searchParams = new URLSearchParams(window.location.search);
const assetBase = searchParams.get('assetBase');
const renderer = searchParams.get('renderer');

const userConfig = {
  ...(assetBase ? { assetBase } : {}),
  ...(renderer ? { renderer } : {}),
};

_flutter.loader.load({
  config: userConfig,
});

（使用例）

URL: https://example.com?assetBase=/cdn/assets&renderer=canvaskit
設定
- アセットロード元: /cdn/assets
- レンダラー: canvaskit

（６）メリットと用途

メリット
- 動的設定
  - URLクエリパラメータを使って簡単に設定を変更可能。
  - 開発中のテストやデバッグに便利。
- 柔軟性
  - アプリを再ビルドすることなく、レンダラーやその他の設定を調整可能。
主な用途
- デバッグ
  - 開発中にレンダラーや設定を切り替えて動作確認。
- テスト
  - 特定の環境（例: 別ドメインからアセットをロード）での動作を確認。

（７）注意点

クエリパラメータがない場合の動作
- クエリパラメータが指定されていない場合、デフォルト設定が使用されるようにする必要があります。
- この例では、userConfig が空オブジェクト（{}）になるため、問題ありません。
パラメータの検証
- クエリパラメータに不正な値が渡された場合に備えて、検証を行うのが望ましいです。
- 例: renderer に想定外の値（invalid_renderer など）が渡された場合の対応。

（８）まとめ

　このスクリプトでは、URLのクエリパラメータを使用してFlutterアプリの設定（例: レンダラー）を動的に変更できます。

主な流れ
- URLクエリパラメータを解析。
- 必要な設定（例: renderer）を抽出。
- 抽出した設定を使ってFlutterアプリを初期化。
メリット
- 開発やデバッグ時に設定を簡単に変更可能。
- アプリの柔軟性とカスタマイズ性を向上。

　この方法を活用すれば、Flutter Webアプリの設定を簡単に動的変更できます

７．onEntrypointLoaded コールバック

（１）onEntrypointLoaded コールバックとは？

_flutter.loader.load() API に渡すことができるオプションのコールバック関数です。
アプリの初期化プロセス中に特定のタイミングでカスタムロジックを実行するために使用します。

（２）初期化プロセスの各ステージ

（ⅰ）エントリポイントスクリプトの読み込み

プロセス
- サービスワーカーが初期化される。
- main.dart.js がブラウザによってダウンロードされ、実行される。
コールバックの呼び出し
- この段階で onEntrypointLoaded コールバックが呼び出されます。
- 開発中: ホットリスタート（hot restart）が発生するたびに呼び出されます。

（ⅱ）Flutterエンジンの初期化

プロセス
- onEntrypointLoaded コールバックは、１つの引数として engineInitializer オブジェクトを受け取ります。
- このオブジェクトの initializeEngine() 関数を呼び出すことで、エンジンを初期化します。
- 必要に応じて、ランタイム構成（例: multiViewEnabled: true）を設定できます。

（ⅲ）アプリの実行

プロセス
- initializeEngine() は Promise を返します。
  この Promise が解決されると、アプリランナーオブジェクト（appRunner）が得られます。
- アプリランナーオブジェクト
  - runApp() メソッドを持ち、これを呼び出すと Flutter アプリが実行されます。

（ⅳ）アプリへのビューの追加/削除（マルチビューモードの場合）

プロセス
- runApp() は、Flutter アプリオブジェクトを返します。
- マルチビューモードが有効な場合、このアプリオブジェクトの addView() および removeView() メソッドを使用して、ホストアプリからビューを管理できます。
- 詳細は Embedded モード（埋め込みモード）に関するドキュメントを参照。

（３）コード例: 初期化プロセスのカスタマイズ

　以下は、onEntrypointLoaded コールバックを使用した初期化プロセスのカスタマイズ例です。

_flutter.loader.load({
  onEntrypointLoaded: async function(engineInitializer) {
  
    //エントリポイントの読み込み:
    //( この時点で、main.dart.js がダウンロードされ、
    //  サービスワーカーが初期化されています。)
    console.log("エントリポイントがロードされました");

    //Flutterエンジンを初期化:
    //( initializeEngine:
    //  ( エンジンを初期化します。
    //    ・引数に、ランタイム設定（例: multiViewEnabled: true）を渡せます。
    //    multiViewEnabled:
    //    ・マルチビュー（複数のFlutterビュー）のサポートを有効化します。))
    const appRunner = await engineInitializer.initializeEngine({
      multiViewEnabled: true, //ランタイム構成を設定
    });

    console.log("エンジンが初期化されました");

    //Flutterアプリを実行:
    await appRunner.runApp();

    console.log("アプリが実行されました");
  }
});

（５）注意点

ホットリスタート中の挙動
- 開発時には、ホットリスタートが発生するたびに onEntrypointLoaded が呼び出されます。
マルチビュー構成
- multiViewEnabled を有効化する場合、エンジンが複数のビューを管理できるようになります。
- この機能は埋め込みモード（Embedded Mode）での使用が一般的です。

（６）まとめ

onEntrypointLoaded コールバックを使用すると、Flutter Webアプリの初期化プロセスを細かくカスタマイズできます。
初期化プロセスのステージ
- エントリポイントスクリプトの読み込み（サービスワーカーと main.dart.js の実行）。
- Flutterエンジンの初期化（必要なランタイム構成を設定）。
- アプリの実行（アプリランナーを使って実行）。
- ビューの追加/削除（マルチビューモードが有効な場合）

８．例：進行状況インジケータの表示

　この例では、Flutter Webアプリの初期化プロセス中に進捗状況をユーザーに通知するためのプログレスインジケーターを表示する方法を示しています。

（シナリオ）

アプリが起動するまでに、エントリーポイントの読み込み、Flutterエンジンの初期化、アプリの実行という複数のステージが発生します。
各ステージの進行状況を視覚的にユーザーに伝えることで、アプリの起動に時間がかかる場合でも良好なユーザー体験を提供できます。

{{flutter_js}}
{{flutter_build_config}}

//
//(1) プログレスインジケーターの作成
//

//プログレスインジケーター用の <div> を作成
const loading = document.createElement('div');

//<body> に追加
document.body.appendChild(loading);

//最初のステータス表示
loading.textContent = "Loading Entrypoint...";

_flutter.loader.load({
  onEntrypointLoaded: async function(engineInitializer) {
  
    //エンジン初期化中
    loading.textContent = "Initializing engine...";
    const appRunner = await engineInitializer.initializeEngine();

    //アプリ実行中
    loading.textContent = "Running app...";
    await appRunner.runApp();
  }
});

１．Bootstrapping

（１）初期化プロセスの概要

（Bootstrapping（ブートストラップ）とは？）

（２）初期化スクリプトの利用方法

（ⅰ）スクリプトとして参照

（ⅱ）スクリプトのインライン化

（３）カスタマイズの可能性

（ⅰ）デフォルトスクリプトを利用

（ⅱ）カスタムスクリプトの利用

（４）カスタマイズのユースケース

（ユースケース１）サービスワーカーのカスタマイズ

（ユースケース２）アプリの進捗表示

（５）トークン{{flutter_bootstrap_js}}の動作

３．初期化のカスタマイズ（flutter_bootstrap.js）

（１）初期化のカスタマイズ（Customize initialization）とは

（２）カスタムロジックを追加する方法

（３）使用可能なテンプレートトークン

（ⅰ）{{flutter_js}}

（ⅱ）{{flutter_build_config}}

（ⅲ）{{flutter_service_worker_version}}

（ⅳ）{{flutter_bootstrap_js}}

（４）カスタマイズ例

（ⅰ）トークンを使ったカスタム（flutter_bootstrap.js）

（ⅱ）トークンを使ったカスタム（index.html）

（５）主なカスタマイズのユースケース

５．１ Flutter設定とサービスワーカー設定と初期化プロセス設定の違い

（ａ）Flutter設定

（ｂ）サービスワーカー設定

（ｃ）初期化プロセス設定

５．２ カスタマイズのユースケース

（ａ）Flutter設定の変更

（ｂ）サービスワーカー設定

（ｃ）初期化プロセス設定

（６）注意点

（７）まとめ

４．flutter_bootstrap.js を書く

（１）カスタム flutter_bootstrap.js スクリプトとは？

（２）必須の3つのコンポーネント

（ⅰ）{{flutter_js}} トークン

（ⅱ）{{flutter_build_config}} トークン

（ⅲ）_flutter.loader.load() の呼び出し

（３）カスタムスクリプトを作成する流れ

（４）応用: カスタム設定を追加する例

（ⅰ）例: レンダラーとアセットパスをカスタマイズ

（ⅱ）初期化中にログを出力

（５）注意点

（７）まとめ

５．Flutter Loader のカスタマイズ

（１）_flutter.loader.load() API とは？

（２）config オプションの詳細

（４）onEntrypointLoaded の詳細

（５）まとめ

６．例：URL クエリパラメータに基づいた Flutter構成のカスタマイズ

（１）この例の目的

（２）コードの全体

（３）このスクリプトが実現すること

（４）実際の使用例

（５）応用: 他のクエリパラメータを使用したカスタマイズ

（６）メリットと用途

（７）注意点

（８）まとめ

７．onEntrypointLoaded コールバック

（１）onEntrypointLoaded コールバックとは？

（２）初期化プロセスの各ステージ

（ⅰ）エントリポイントスクリプトの読み込み

（ⅱ）Flutterエンジンの初期化

（ⅲ）アプリの実行

（ⅳ）アプリへのビューの追加/削除（マルチビュー モードの場合）

（３）コード例: 初期化プロセスのカスタマイズ

（５）注意点

（６）まとめ

８．例：進行状況インジケータの表示

おすすめ

[コラム]ＤＢ操作処理の命名規則について

[基礎知識]プロジェクト毎にFlutterをバージョン管理したい方へ：Flutter Version Manager (FVM)

[読書会]Riverpod.dev/docs 翻訳及び補足(Migration guides ^0.14.0 から ^1.0.0 へ)

コメントを残す コメントをキャンセル

５．１　Flutter設定とサービスワーカー設定と初期化プロセス設定の違い

５．２　カスタマイズのユースケース

（ⅳ）アプリへのビューの追加/削除（マルチビューモードの場合）

コメントを残すコメントをキャンセル