Flutter for Webで構築したアプリをCodemagic+Github Pagesで配信する

Transcript

1. Flutter for Webで構築したアプリを Codemagic + Github Pagesで配信する ウルシステムズ株式会社
 河野　大紀

2. 自己紹介
 河野　大紀（こうの　たいき）
 所属：ウルシステムズ株式会社
 GitHub：taikichi225　Twitter：@taikichi225
 普段はAWSやGCP等のクラウド環境や機械学習周りのエンジニ アをしています。Flutterは、ここ1年趣味で触り続けています。ちな みに、本日5/22は私の誕生日です。

3. Flutter for Webの発表
 1. 先日のGoogle I/O 2019でFlutter for Webのテクニカルプレビュー版 が発表されました。Flutterは、Android/iOSだけでなく、Webアプリと してブラウザで動かせるようになります。
 2. Flutter for Webがどのようなものか早速触ってみました。
 

4. 以下の構成で試してみた
 Flutter for Web 
 + Codemagic 
 + GitHub Pages

5. 概要
 名前
 概要
 Flutter for Web
 FlutterをWebアプリとして生成する機能です。Dartのコードを JavaScriptにコンパイルします。
 Codemagic
 Flutterに特化した無料CI/CDツールです。
 リポジトリからソースコード取得・テスト実行・ビルド・GitHub Pages へのデプロイを担当します。
 GitHub Pages
 GitHubの提供する静的コンテンツのホスティングサービスです。 GitHubのアカウントがあれば、無料で静的サイトが公開できます。
 Flutter for Webで構築したアプリを配信します。

6. サービス構成
 ローカルPC
 GitHub
 GitHub Pages
 Codemagic
 ①ソースコードプッ シュ
 ②トリガー
 ④デプロイ
 ③ビルド
 ⑤配信

7. 構築手順
 1. Flutter for Webの導入
 2. Github Pagesの準備
 3. Codemagicの設定

8. 構築手順
 1. Flutter for Webの導入
 2. Github Pagesの準備
 3. Codemagicの設定

9. 構築
 1.Flutter for Webの導入（1/3）
 
 1. Flutter for Webのソースコードのダウンロード 
 
 2. ビルドツールのインストール
 
 3. サンプルによる動作確認

10. 構築
 1.Flutter for Webの導入（2/3）
 
 4. 既存プロジェクトのマイグレーション 
 a. Flutterのゴールは、単一コードベースでモバイルとWebに対応したアプリケーションの構築 です。しかし、今回発表されたテクニカルプレビュー版は、Flutter for Webに対応するため に既存のFlutterコードを修正する必要があります。 
 b. コード修正
 i. pubspec.yaml
 ii. lib/のimport文
 iii. web/にindex.htmlとmain.dartの追加 
 
 【参考】https://github.com/flutter/flutter_web/blob/master/docs/migration_guide.md
11. 構築
 1.Flutter for Webの導入（3/3）
 
 5. GitHubにソースコード管理用リポジトリの作成 
 a. 「flutter_web_demo」と名付けました。 
 b. この後作成するGitHub Pages用リポジトリとは別のものです。 
 6. ソースコードのプッシュ

12. 構築手順
 1. Flutter for Webの導入
 2. Github Pagesの準備
 3. Codemagicの設定

13. 構築
 2. Github Pagesの準備（1/3）
 1. アプリ公開用リポジトリの作成
 a. リポジトリ名に「ユーザ名.github.io」、リポジトリの種類に「Public」設定し、リポジトリを作成 します。
 b. 私の場合は、「taikichi225.github.io」というリポジトリ名です。 
 

14. 構築
 2. Github Pagesの準備（2/3）
 
 2. GitHub Pages用リポジトリのクローン 
 
 3. 動作検証
 

15. 構築
 2. Github Pagesの準備（3/3）
 

16. 構築手順
 1. Flutter for Webの導入
 2. Github Pagesの準備
 3. Codemagicの設定

17. 構築
 3. Codemagicの設定（1/6）
 1. Codemagicのサインアップ

18. 構築
 3. Codemagicの設定（2/6）
 2. GitHubアカウントでログイン

19. 構築
 3. Codemagicの設定（3/6）
 3. ソースコード管理用リポジトリの確認 
 a. 先ほどプッシュしたアプリのプロジェクトが確認できます。 

20. 構築
 3. Codemagicの設定（4/6）
 4. ワークフローの設定
 名前
 概要
 今回の設定箇所
 Build triggers
 ビルド対象のブランチとビルドのトリガーを設定します。
 〇
 Environment variables
 ワークフローにおける環境変数を設定します。
 〇
 Dependency caching
 キャッシュしたいファイル・ライブラリを設定します。
 ×
 Test
 テストを実行します。失敗時の挙動を設定します。
 ×
 Build
 ビルド方法やプラットフォームを設定します。
 〇
 Publish
 ビルド結果の通知とアプリの配信を設定します。
 ×

21. 構築
 3. Codemagicの設定（5/6）
 5. Buildの設定
 ビルドコマンドの指定（デフォルト） flutter packages pub global run webdev build
22. 構築
 3. Codemagicの設定（6/6）
 6. Post-build scriptに以下のスクリプト追加 
 a. GitHub PagesへのデプロイはCodemagicが対応しておらず、スクリプトを書きました。 

23. 動作確認
 https://taikichi225.github.io/flutter_web_demo/index.html

24. 所感
 Flutter for Web
 1. テクニカルプレビュー版でも未来を感じる。誰もが夢見たクロスプラットフォーム。 
 a. テクニカルプレビュー版ゆえ、コードを多少修正したが、モバイル用に書いてきたコードが そのままWebで動いた。ウィジェットの組み立て自体に新しく覚えたことはない。 
 b. 思っていた以上にさくさく描画してくれる。 
 2. デザイナーとの協業はどうするか？ 
 a. Flutter for Webに限った話ではないが、デザイナーはDartでコーディングするの？それと も画面モックだけ作成で実際の構築はエンジニア？ 
 

25. 所感
 Codemagic
 1. GUIで簡単にフローを設定できる。 
 a. FlutterアプリをGoogle PlayやApp Storeにデプロイするには便利そう。 
 b. ビルド結果をSlackやメールへの通知を簡単に設定できる。 
 c. 一方で、プラグインが用意されていないため、通常とは異なる処理を含めたい場合、スク リプトをごりごり書くことになる。
 2. 想定以上にビルドに時間がかかる。 
 
 GitHub Pages
 1. Gitの操作だけでコンテンツをホスティングできる。 
 a. 新しく覚えることが少なく、技術的にも気持ち的にもだいぶ楽。 
 2. 今回設定していないが、独自ドメイン・HTTPS対応している。 

26. ありがとうございました
 今回のデモアプリ
 https://taikichi225.github.io/flutter_web_demo/index.html
 ホスティング用リポジトリ 
 https://github.com/taikichi225/taikichi225.github.io.git
 
 アプリのリポジトリ
 https://github.com/taikichi225/flutter_web_demo.git