（この頁はdocs.flutter.dev(https://docs.flutter.dev/platform-integration/web/initialization)のリファレンスブログです。）
１．概要
（１）Flutter をWebアプリに追加する方法
Flutter は、Webコンテンツ（通常のHTMLやCSS、JavaScriptによるウェブページ）とFlutterビューを組み合わせて、様々な形でWebアプリケーションを構築できます。以下の２つの方法があり、用途に応じて選択できます。
（２）Full page モード（FlutterビューがWebページ全体を制御する）
（概要）
- Flutterビューがウェブページ全体を占有するモード。
- ページ全体をFlutterで描画・制御し、通常のHTMLやJavaScriptとの統合は行わない。
（用途）
完全にFlutterで構築されたウェブアプリを作成したい場合。
（例）
- シングルページアプリケーション（SPA）。
- ウェブとモバイルアプリで同じFlutterコードベースを利用する場合。
（メリット）
- フルコントロール：ページ全体をFlutterで管理できるため、他のウェブ技術との干渉が少ない。
- 一貫性のあるUI：Flutterで描画するため、ウェブとモバイルで同じデザインを実現可能。
（デメリット）
- 通常のHTMLやウェブの仕組み（SEO、静的ページレンダリングなど）が使えない。
- 他のJavaScriptライブラリやフレームワークとの統合が難しい。
（３）Embedded モード（既存WebアプリにFlutterビューを追加する）
（概要）
- 既存のウェブアプリケーションの一部としてFlutterビューを埋め込むモード。
- Flutterビューはウェブページの特定の領域を制御し、他の部分は通常のHTMLやJavaScriptで管理。
（用途）
既存のウェブアプリケーションに特定の機能だけをFlutterで実装したい場合。
（例）
- フォーム、ダッシュボード、インタラクティブなウィジェット。
- モバイルアプリで使用しているFlutterコードを部分的にウェブに移植したい場合。
（メリット）
- 部分的な導入：既存のウェブアプリを全面的に作り直す必要がない。
- 柔軟性：Flutterビューと従来のウェブ技術（HTML、CSS、JavaScript）が共存可能。
- SEOやサーバーサイドレンダリングを利用可能。
（デメリット）
- 設定の複雑さ：Flutterビューと既存のウェブアプリの連携を管理する必要がある。
- Flutterビューのロードや初期化に時間がかかる可能性がある。
２．Full page モード
Full Page Mode（全画面モード）とは、Flutter Webアプリケーションがブラウザウィンドウ全体を占有し、表示領域（viewport）全体を使用してレンダリングを行うモードです。
（特徴）
- Flutterビューがページ全体を制御
- HTMLやCSS、JavaScriptで作成された他の要素と連携せず、ブラウザウィンドウ全体をFlutterアプリが占有します。
- HTMLやCSS、JavaScriptで作成された他の要素と連携せず、ブラウザウィンドウ全体をFlutterアプリが占有します。
- デフォルトモード
- 新しいFlutter Webプロジェクトを作成した場合、特に設定を変更しなければ、このモードが自動的に適用されます。
（Full Page Mode の HTML構成）
//HTML5形式で書かれたページであることを宣言。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
//Flutterアプリを初期化するスクリプトファイル（flutter_bootstrap.js）
//を読み込み。
//( defer 属性により、HTMLのパースが完了した後にスクリプトを実行。)
<script src="flutter_bootstrap.js" defer></script>
</body>
</html>（Full Page Mode の動作条件）
Full Page Mode は以下の条件を満たす場合に自動的に動作します：
- multiViewEnabled が未設定
- 複数ビューを使用しない場合、Flutterはページ全体を占有するモードで動作します。
- 複数ビューを使用しない場合、Flutterはページ全体を占有するモードで動作します。
- hostElement が未設定
- hostElement（Flutterビューを埋め込むHTML要素）が指定されていない場合、Flutterビューは全体を使用します。
（Full Page Mode のメリット）
- 簡単な初期設定
- デフォルトの設定で動作するため、追加の構成が不要。
- 新しいFlutter Webプロジェクトを作成するだけで利用可能。
- Flutterコードに集中
- 他のウェブ技術との統合を考える必要がなく、Flutterのウィジェットやエンジンに集中してアプリを構築できる。
- 他のウェブ技術との統合を考える必要がなく、Flutterのウィジェットやエンジンに集中してアプリを構築できる。
- 一貫性のあるデザイン
- モバイルアプリと同じUI/UXをそのままウェブ上に再現可能。
（Full Page Mode の制約）
- 他のHTML要素やフレームワークとの統合が難しい
- ページ全体をFlutterビューが占有するため、HTMLやCSSで作成された他の要素との統合ができない。
- 既存のウェブアプリに追加するには向かない。
- SEOや静的サイト生成の対応が難しい
- Flutterはクライアントサイドで動作するため、検索エンジンによるインデックスが難しく、SEOの最適化が困難。
- Flutterはクライアントサイドで動作するため、検索エンジンによるインデックスが難しく、SEOの最適化が困難。
- ロード時間
- Flutterエンジンの初期化やアセットの読み込みに時間がかかる場合がある。
（具体的な用途）
- シングルページアプリケーション（SPA）
- ユーザーインタラクションが多く、アプリのような操作感を求められるウェブアプリ。
（例: チャットアプリ、カレンダーアプリ、タスクリストなど。）
- ユーザーインタラクションが多く、アプリのような操作感を求められるウェブアプリ。
- モバイルとウェブで共通のコードを使用
- モバイルアプリをFlutterで構築し、そのままWeb対応したい場合。
（iframe埋め込みとは？）
iframe（インラインフレーム） を使用すると、別のHTMLページを現在のページ内に埋め込むことができます。
Flutter Webアプリも、この方法で簡単に既存のウェブページに埋め込むことが可能です。
（この方法の推奨シナリオ）
- Full Page Mode を使用しているFlutter Webアプリをiframeに埋め込む場合に推奨されます。
- iframe内のFlutterアプリは、埋め込まれた範囲を完全に占有し、指定されたサイズと位置に合わせて描画されます。
//src には、Flutterアプリのビルド後のエントリポイントである index.html を指定します。
<iframe src="https://url-to-your-flutter/index.html"></iframe>（ iframe を使うべきケース）
- 外部アプリの統合
- 既存のウェブサイトにFlutter Webアプリを簡単に追加したい場合。
（例: ポータルサイトにFlutterで作られたダッシュボードを埋め込む。）
- 既存のウェブサイトにFlutter Webアプリを簡単に追加したい場合。
- Flutterアプリと親ページを分離したい場合
- スタイルやスクリプトの競合を避けたいときに有効です。
- スタイルやスクリプトの競合を避けたいときに有効です。
- フルコントロールが必要ない場合
- 親ページの一部として機能するFlutterアプリを簡単に埋め込む場合。
３．Embedded モード
Embedded Mode（埋め込みモード） は、Flutter Webアプリケーションを、別のWebアプリケーションの任意のHTML要素（通常は <div>）内に描画するモードです。このモードでは、Flutterビューをページ内で複数作成したり削除したりすることができます。
（主な特徴）
- 複数の埋め込みビューが可能
- Flutterアプリが1つであっても、複数のHTML要素に対して個別の「ビュー」を追加できます。
- この動作は “multi-view”（マルチビュー） と呼ばれることもあります。
- 遅延レンダリング
- Flutterアプリは起動されますが、明示的に addView メソッドを呼び出してビューを追加するまでは描画されません。
- Flutterアプリは起動されますが、明示的に addView メソッドを呼び出してビューを追加するまでは描画されません。
- ホストアプリケーションとの連携
- ホストアプリケーションは、Flutterアプリにビューを追加したり削除したりできます。
- Flutterアプリは、ビューの追加・削除を通知され、その変更に応じてウィジェットの構成を調整します。