Flutter Meetup Tokyo #5に登壇しました。 - Continuity is The Father of Success

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を呼び出していることがわかる
- 正確にはAndroid側のプラグインを確認
- (iOSは後ほどiOSエンジニアの方の協力を得て確認)
Flutterの開発環境を改めて整え、社内で「作ってみます〜」と連絡（10月10日）
Flutterで開発、Andorid/iOSでビルドを確認（10月13日）
- 当時のツイート

Android	iOS
4時間の成果です。 pic.twitter.com/lut8UGeqWF — だぐりば(Koji Wakamiya) (@D_R_1009) 2018年10月13日	iOSでも動いたー！ pic.twitter.com/EtkkKfbJeB — だぐりば(Koji Wakamiya) (@D_R_1009) 2018年10月13日

BitriseとDeployGateの設定（10月14日）
Flutter Meetup TokyoにLT登壇申し込み（10月15日）
LT登壇（10月17日）

技術的な話

WebViewの話

pub.dartlang.org

プラグインの実装を読んだところ、非常に薄くJavaとObj-Cで各ネイティブのWebViewコンポーネントを呼び出してます。
- Android
  - https://github.com/fluttercommunity/flutter_webview_plugin/blob/master/android/src/main/java/com/flutter_webview_plugin/ObservableWebView.java
  - import android.webkit.WebView;
- iOS
  - https://github.com/fluttercommunity/flutter_webview_plugin/blob/master/ios/Classes/FlutterWebviewPlugin.h
  - #import <WebKit/WebKit.h>
ネイティブでの動作を確認したいため、薄い実装がありがたい
Flutterからの呼び出しでは、呼び出し時に必要なオプションを指定してあげるだけ

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、Flutterのビルドスクリプト用意済み
  - Flutterはまだver0.0.6
今回組んだフロー

Android	iOS

- Android
  - Flutter は `build apk --release' でビルド実行
  - 成果物を `build/app/outputs/apk/release/app-release.apk` で指定して署名
- iOS
  - Flutterは `build ios --release` でビルド実行
  - 成果物をappからipaに変換