[Flutter] Webアプリを WordPressに埋め込む方法

FlutterではAndroidやiOS用にアプリを作成できますが、同時にWebアプリも作れます
これをWordPressを使ってネットで表示するには、
FlutterのWebビルドを生成して、それをWordPressに埋め込むだけです

Webアプリ

例えばサンプルアプリとしてよく出てくる、フローティングボタンをクリックすると
数値がインクリメントするものです

<br>

以下このアプリを例として、WordPressに埋め込む方法を解説します

Web用にアプリをビルドする必要があり
以下のコマンドを使います

flutter build web

1	flutter build web

　
例として、flutter_application_1 のプロジェクトを作成してコマンドを打って見ると
build 以下に web が作成されます

このweb以下に index.html があり、その中の
<base href=”/”>のhrefを以下のように変更します

<!DOCTYPE html>
<html>
<head>
  ...
  <base href="/wp-content/themes/flutter/testapp1/">
  ...
</body>
</html>

<!DOCTYPE html>

<html>

<head>

...

...

</body>

</html>

この /wp-content/themes/flutter/testapp1/
は、WordPressのサーバーのアップロード先のPathを指しています

あるいは、以下のようにコマンドを打っても同じです

flutter build web "--base-href" "/wp-content/themes/flutter/testapp1/"

1	flutter build web "--base-href" "/wp-content/themes/flutter/testapp1/"

アクセスできる場所であればどこでもいいのですが、Backup をとったりする上で
分かりやすいところがいいので wp-content/themes は既にあり管理しやすいのでここを使います

flutterディレクトリーを作成しておきます

FTPを使ってこの web フォルダの名前を変更し
フォルダ毎WordPressのサーバーにアップロードします

今回の例では、testapp1 に変更してアップします

ビルドしたFlutterアプリのHTMLファイルを表示するためには、
WordPressページや投稿の中にiframeを使って埋め込みます

<iframe width="300" height="400" class="aligncenter" 
src="https://your-site.com/wp-content/themes/flutter/testapp1/index.html" alt="">
</iframe>

src="https://your-site.com/wp-content/themes/flutter/testapp1/index.html" alt="">

</iframe>

このコードを投稿や固定ページの「テキスト」モードで挿入すると、Flutterアプリがページ内に表示されます。

WordPressに「Code Snippet」などのショートコードプラグインをインストールして、プラグインを使用して、FlutterアプリのHTMLコードをショートコードとしWordPressの投稿やページの中に挿入することで、Flutterアプリを表示することも可能です
Flutter Webアプリのサイズによっては、ページの読み込み速度に影響が出ることがあります。可能であれば、キャッシュプラグインやCDNを使用して最適化しましょう。
モバイルでの表示にも注意し、レスポンシブ対応ができているかを確認してください。