【スマホアプリ開発】Flutterをサイトに組み込む方法

2021年5月17日

スマホアプリ開発で人気が高いFlutterと呼ばれる技術があります。今回、Flutterのソースコードを自分のサイトに組み込んで実行する方法を説明します。あまり多用されない方法なので、いざやろうと思った時になかなか情報が出てこなくて苦労します。今回はその方法を伝えるとともに、この記事の中にも組み込んでいますので、Flutterの凄さが少しでも伝わればと思います。

そもそもFlutterとは何か

Googleが開発したオープンソースの開発ツールで、iOS、Android、Webといった複数の環境で動作するアプリをワンソースで開発できます。先日「【スマホアプリ開発】クロスプラットフォームを分かりやすく説明してみた」で説明したクロスプラットフォームの1つとなります。Googleが開発したオープンソースということもあり、採用する際に安心感があります。
Flutterの採用事例ページに企業名が掲載されていますが、BMW、Google、PHILIPSなど有名どころが採用し始めています。2017年にリリースされた比較的新しいツールということもあるのか、残念ながら国内ではそれほど事例は多く無いようです。しかし、注目の技術であることは間違い無いので、これから事例が増えてくることでしょう。

サイトへの組み込み方

いきなり結論ですが、下記のコードをサイトに埋め込むだけです。"id"のところはGitHubのGistのIDを指定します。これにはDartPadと呼ばれるものが使われており、Gistのコードをリアルタイムに編集、実行できる機能が提供されています。よって、コードはGistで公開しておく必要があるので注意してください。

<iframe src="https://dartpad.dev/embed-flutter.html?id=e1fb2cf1b300ccab75fe9546a5037668"></iframe>

埋め込むと下記のようになります。"Run"ボタンで実行すると、アプリケーションがブラウザ上で動作していることが分かります。一度ボタンを押して動かして見てください。
このアプリケーションはiPhoneでもAndroidでも動くアプリケーションとなります。（厳密にはビルドと呼ばれるプロセスを経てスマホアプリが生成されます）

Gistではなく、コードを直接HTMLに埋め込みたい場合

DartPadの新しい機能としてHTMLにコードを埋め込む方法も提供されています。ソースコードが社内にしかなく、外に公開できないようなシチュエーションでは有用ですね。
大まかに下記の2ステップとなります。順番に説明します。

scriptタグにdefer属性を付けて記載する
HTMLに<pre>と<code>タグを使ってソースコードを記載する

1. scriptタグにdefer属性を付けて記載する

下記の通り、scriptタグにdeferをつけたものをHTMLに埋め込みます。defer属性をつけることでHTMLのロード完了後にスクリプトが実行されるようになります。これはHTML中に現れるソースコードが確実に読み込まれてからスクリプトが実行されることを狙ってのことだと思います。

<script type="text/javascript" src="https://dartpad.dev/inject_embed.dart.js" defer></script>

2. HTMLに<pre>と<code>タグを使ってソースコードを記載する

続いて下記のようにタグを埋め込みます。コードはHTMLエスケープしておく必要があるので注意してください。

<pre>
    <code class="language-run-dartpad:theme-light:mode-flutter:ga_id-example1">
        void main() =&gt; print(&quot;Hello, World!&quot;);
    </code>
</pre>

これを埋め込むと下記のようになります。手元のブラウザだと幅も高さも小さくなりすぎて使い物になりませんが、この幅・高さを調整する方法は調査中です。（環境によっては適切に表示されている方もいるかもしれません。その場合、環境をコメントに残してくれるとありがたいです。）


        void main() => print("Hello, World!");

最後に

Gistに公開したコードから実行する方法、HTMLに埋め込んだソースコードから実行する方法の2パターンを紹介しました。ブラウザで動かしたものがスマホアプリとしても動かせるようになる技術はすごいですね。さらに、今回紹介したブラウザで実行する方法は、社内のWikiなど他の人に説明する手段の一つとして使えるように思います。いちいち環境を用意して実行するのは手間なのですが、ブラウザだけで済ませることができるのは効率面でも良いです。
新しい技術って楽しいですね。それでは、また。