Flutter Meetup Tokyo #5に登壇しました。

Flutter Meetup Tokyo #5に5分LT枠で参加してきました。

flutter-jp.connpass.com

発表資料はこちら。

speakerdeck.com

なお、作成したコードはこちらです。

GitHub - koji-1009/webview_checker: Android and iOS webview component testing application by flutter.

発表当日までの経緯

結論:Flutterはいいぞ。スピード感がでるぞ。

  • 10月上旬に社内のサーバーサイドの方がAndroid/iOSのWebViewを利用して開発する話が出てくる(10月5日頃)
  • Flutterのプラグインを調べたところネイティブのWebViewを呼び出していることがわかる
  • Flutterの開発環境を改めて整え、社内で「作ってみます〜」と連絡(10月10日)
  • Flutterで開発、Andorid/iOSでビルドを確認(10月13日)
    • 当時のツイート
Android iOS
  • BitriseとDeployGateの設定(10月14日)
  • Flutter Meetup TokyoにLT登壇申し込み(10月15日)
  • LT登壇(10月17日)

技術的な話

  • WebViewの話

pub.dartlang.org

webview_checker/webview.dart at master · koji-1009/webview_checker · GitHub

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class WebView extends StatelessWidget {
  final _url;
  final _withJavascript;
  final _scrollBar;

  WebView(this._url, this._withJavascript, this._scrollBar);

  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      url: _url,
      withJavascript: _withJavascript,
      scrollBar: _scrollBar,
      appBar: AppBar(
        title: Text(_url),
      ),
    );
  }
}
  • Bitrise

www.bitrise.io

  • 概要
    • モバイル向けのCI環境(もちろんモバイル以外も)
    • iOSのビルドができるのがうれしい
    • 無料枠だと1ビルド10分以内、月200ビルド以内
      • FlutterだとAndroid/iOSの両方のビルドがしたくなるので、お試しで使うのにも十分
    • workflowはGUIでも、bitrise.ymlの記述でも可能
  • 今回組んだフロー
Android iOS
f:id:D_R_1009:20181020233145p:plain f:id:D_R_1009:20181020233159p:plain
- Android
  - Flutter は `build apk --release' でビルド実行
  - 成果物を `build/app/outputs/apk/release/app-release.apk` で指定して署名
- iOS
  - Flutterは `build ios --release` でビルド実行
  - 成果物をappからipaに変換
  • DeployGate
    • 出来上がったものをDeployGateの配布画面を用意して、下記手順に従って設定

medium.deploygate.com

発表の感想

上記のようなことを話そうかなと思ったんですが、ちょっと長すぎるなと思ったので「やったらできましたー! BitriseとDeployGateはいいぞー!」という感じに。
発表を聞いて「BitriseでCI試してみようかな」と思ってくれる人がいれば、嬉しいです。

またどっかで発表するぞー!