IT関係」カテゴリーアーカイブ

Flutter SDK v1.17でPWAを作る

先日、Flutterの最新のWebサポートの紹介において、PWA(Progressive Web Apps)サポートが紹介されていました。
https://medium.com/flutter/flutter-web-support-updates-8b14bfe6a908

PWAサポートはまだ開発中の段階のため、今後も改善や修正が入っていくことと思いますが、現在でも既存のFlutter Webアプリに少し手を入れるだけでPWAサポートを追加することが出来ました。

というわけで、試してみた結果を残しておきます。

manifest.jsonの追加とindex.html の編集

この記事を書いている時点の最新版SDK v1.17でWebサポートを有効にした状態の flutter create コマンドを実行すると、web/ディレクトリにmanifest.jsonファイルが生成されるようになっています。
{
    "name": "pwa_web_app",
    "short_name": "pwa_web_app",
    "start_url": ".",
    "display": "minimal-ui",
    "background_color": "#0175C2",
    "theme_color": "#0175C2",
    "description": "A new Flutter project.",
    "orientation": "portrait-primary",
    "prefer_related_applications": false,
    "icons": [
        {
            "src": "icons/Icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "icons/Icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}
また、index.htmlファイルの内容も次のように変化しています。
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="pwa_web_app">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="shortcut icon" type="image/png" href="favicon.png"/>

  <title>pwa_web_app</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
この状態で flutter build webを使ってビルドを行えば、PWAの基本的なサポートが入った状態のoutputが得られます。
詳細な情報については、 https://web.dev/progressive-web-apps/#installable から確認が可能です。

既存のアプリに適用する

既存のアプリに適用するには、上記のmanifest.json, index.htmlの2ファイルをweb/フォルダに配置します。
また、最新版のSDKでビルドができるよう、flutter pub upgrade を使った依存packageの更新も必要になるかもしれません。

もしもindex.htmlを編集している場合は、manifest参照用のmetaタグと、ServiceWorker用のscriptダグを追記しましょう。

また各種サイズのアプリアイコンも新たに用意する必要があるかもしれません。
PWAとしては、最低限192×192、512×512サイズのアイコンを用意する必要があります。

以上の対応を行うことで単純なアプリであればPWA対応のbuildファイルが書き出されているはずです。

まとめ

  • flutter createで作成されるwebのtemplateがPWAをサポートした
  • 既存のFlutter webアプリでもtemplateから必要なファイルを適用することでPWA化し始めることができる
対応したアプリケーションはこちらです。
(本記事とは逸れますが、CanvasKitを利用する設定でビルドしています。)

https://ymegane.github.io/TapTapTap2/#/

今さらでもないのでFlutter for Webを始めよう

この記事は、Goodpatch Advent Calendar 2019 6日目の記事です。

はじめに

今年はFlutterに注目して、個人的に情報を追っていた1年でした。
もう個人開発のモバイルアプリはFlutterでいいじゃんと思っている私です。 そんなFlutterですが、Google I/O 2019では昨年末からアナウンスされていたWebサポートが正式発表されました。 発表当初はTechnical Previewであったこともあり、本家Flutterとはパッケージが別れていたり、開発環境の構築も若干難があったりしましたね。
それから半年ほどが経ち、Flutter for Webにも様々な改善が行われています。 今回は、発表当時試してみたけどしばらく追っていなかった方や、これから触ってみたい方に向けて、環境構築からリリースなど一通りの手順を解説してみたいと思います。

Flutter for Webとは

2019年現在のFlutterは、iOS/Androidアプリを主なターゲットとしたクロスプラットフォームで開発可能なアプリケーションのフレームワークです。複数のプラットフォーム用アプリを単一のコードベースで開発することが出来ます。
モダンなUIフレームワークや充実した開発ツールが提供されていて、Firebaseを始めとしたプラグインも充実しているため、比較的容易に開発を始めることが可能です。 Flutter for Webは、そんなFlutterをWebブラウザで実行可能にしたものです。
現在もTechnical Previewの段階にあり、製品向けへの利用は推奨されていません。
本記事の公開直後、Betaへの移行がアナウンスされました。
https://medium.com/flutter/web-support-for-flutter-goes-beta-35b64a1217c0
Webサポートに関する詳細な説明は本記事では割愛しますが、仕組みを知る上では次の公式ドキュメントが助けになるかと思います。
Web support for Flutter – Flutter

環境構築

さっそく公式ガイドを見ながら環境構築を始めます。
Building a web application with Flutter – Flutter

Flutter SDKのダウンロード

現在のところ、Webサポートの入ったSDKを利用するには、masterかdevチャンネルを利用する必要があります。
Betaへ移行されたため、現在ではbetaチャンネルで利用するよう案内されています。
もしも既にflutter SDKを利用していれば、次のコマンドでSDKのチャンネルを切り替えます。
$ flutter channel beta
$ flutter upgrade  
まだSDKをインストールしていない場合は、Install – Flutter を参照して、各実行環境のSDKをインストールしましょう。
インストール直後は、stableチャンネルに設定されています。Webサポートを利用するため、先に紹介したコマンドでチャンネルを切り替えます。 余談ですが、Flutterではこの他にもいくつかのリリースチャンネルが運用されています。私は普段の開発ではbeta環境を使用しています。ある程度の新しい機能と安定性のバランスが取れていることが多いと感じているためです。

Webサポートを有効にする

Webサポートを有効にするには、次のコマンドを利用します。
$ flutter config —-enable-web
このコマンドは一度しか実行する必要はありません。
コマンドを実行すると、~/.flutter_settingsが生成されます。
{
    “enable-web”: true
}
Webサポートが有効になっていれば、flutter devicesを実行することで接続済みデバイスとして次のような結果が出力されます。
$ flutter devices
2 connected devices:

Chrome     • chrome     • web-javascript • Google Chrome 78.0.3904.108
Web Server • web-server • web-javascript • Flutter Tools
また、flutter doctorを利用することでもWebサポートが有効になっていることが確認できます。
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel dev, v1.12.15, on Mac OS X 10.15.1 19B88, locale ja-JP)
…
[✓] Chrome - develop for the web
…
[✓] Connected device (2 available)

! Doctor found issues in 2 categories.
IDE上のDeviceリストにもChromeが追加されましたね。(画像はVSCodeのもの)
device list

既存プロジェクトへのWebサポートの追加

既存のプロジェクトにWebサポートを追加するには、プロジェクトのトップディレクトリで次のコマンドを実行するだけです。
$ flutter create .
Createコマンドは既存のプロジェクトファイルを置き換えることはせず、不足しているファイル群だけを生成します。
実際に既存のプロジェクトで実行すると、web/index.htmlが新たに生成されました。
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>taptaptap2</title>
</head>
<body>
  <script src=“main.dart.js” type=“application/javascript”></script>
</body>
</html>
なお、初期生成状態から削除したり、名前を変えてしまったファイルが存在する場合、不要なファイルが生成されることもあるため、gitなどのコード管理ツールとの併用をおすすめします。

Webサポートを含めた新規プロジェクトを作成する

新規プロジェクトを作成する方法は、Webサポートが追加される前と変わりません。次のコマンドを実行することでiOS/Android/Webに対応したFlutterプロジェクトが生成されます。
$ flutter create myapp

Webアプリを実行する

Webアプリを実行するには、次のコマンドを実行します。
$ flutter run -d chrome
ホットリスタートするには、rを入力します。
合わせてブラウザのリロードを行う場合は、Rを入力します。 先程確認したように、IDE上からの実行にも対応しています。
例えばVSCodeであれば、モバイルアプリを実行するときと同様に、deviceリストからChromeを選択した上で、F5キーを選択することでデバッグモードでの実行が可能になります。
VSCode
無事に実行することができれば、次のようにサンプルアプリがChromeで表示されます。
Chromeで実行

リリースビルドの生成

リリースビルドを生成するには、次のコマンドを実行します。
$ flutter build web
リリースビルドには、dart2js | Dartが利用されます。dart2jsを利用したビルドを行うには、上記のbuildコマンドのほかに、flutter run --release -d chromeでも可能です。 アウトプットファイルは、 build/webに生成されます。
このディレクトリをサーバーに配置することで、Webアプリの公開が可能です。
Github PagesやFirebase Hostingなどの各種ホスティングサービスも利用することができます。

サンプル

私が以前作成したアプリもWebサポートしたものをGitHub Pagesに置いてみました。
iframeで埋め込んでも問題なく動いていますね。
https://ymegane.github.io/TapTapTap2/ また、こちらで実際にFlutter for webを利用したサンプルを見ることができます。

サンプルのその後

Flutterで開発する準備が一通り揃ったあとは、是非豊富に用意されたFlutterのWidgetとUIフレームワークを試してみましょう。
Flutterは、公式のドキュメントやCodelabsが充実しているため、こちらに沿って一通り試してみるだけでも、基本的な開発手法について学んでいくことが可能です。 また、日本語の記事としては、@monoさんが執筆されている記事が大変充実しています。
私も一年を通して大変お世話になりました。

おまけ : Pluginなど

本家Flutterと統合されたことで、プラットフォームに依存しないDartパッケージであれば、基本的には利用可能です。
また、既存のモバイル向けPluginに対しても、Webサポートが追加される動きも出てきました。
ブラウザでも代替可能な機能については、今後Webサポートも増えていくかもしれませんね。 このあたりは追いきれていない部分もあるので、引き続き眺めていきたいところです。
Flutterで利用できるPluginは、Flutter packagesとしてリストされていてWebからも検索することができます。

おわりに

繰り返すようですが、現在のところFlutterのWebサポートはTechnical Previewであることは変わりません。
しかし、現在の状態でもFlutterの開発体験やドキュメントの充実度をそのままWebアプリケーション開発にも持ち込めるのは非常に魅力的に映ります。

2020年もさらに広がっていきそうなFlutterの世界が楽しみです。