Edited at

Flutter Meetup Tokyo #12 参加報告 #flutter_meetup_tokyo

Flutter Meetup Tokyo #12 ブログ枠に参加させていただいたため、

簡単に概要だけまとめました!

LT15分枠のもののみ一旦感想を入れています。

詳しい内容は資料のリンクをはっているので、そちらをご参照ください!


Flutter Meetup Tokyo #12

https://flutter-jp.connpass.com/event/147892/


開催概要

・共催: Flutter Japan User Group, 株式会社ガイアックス

・日時: 2019年11月7日(木)

・会場: 株式会社ガイアックス 6F Attic


togetterまとめ

https://togetter.com/li/1427577


発表内容


①Add Flutter to existing apps


・ 発表者: 

 @neonankiti


・ 資料:

 https://scrapbox.io/neonankiti-portfolio/Add_Flutter_to_existing_apps


・ 概要: 

 タイトル通りですが、既存のネイティブで開発したアプリケーションに対して、

 Flutterで作成したViewを活用法についてです。

 

 GitHubにWikiがあるようなので、それも載せておきます。

 https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps


・ 感想:

 既にネイティブで開発し、それなりのコードベースの場合は、

 このアプローチ法が多くなるのかなと思いました。

 実際に上記の手法で運用中とのことですが、

 ・良かった点としては

 - 開発速度が早いので、リソースの削減が可能

 - モックの作成や検証用として活用

 ・課題の点としては

 - Flutterを利用するとiOS1人, Android1人の工数がFlutter1人になるわけではない

 - プラッフォーム固有の実装が多い場合、プラグインの開発でIOS、Androidで実装が必要

 - プラグイン開発を行わない場合でも、iOS/Android固有の知識は一定必要

 やはりプラットフォーム固有のUIを実装したい場合には、Flutterだけだと

 厳しいとゆう現実があると思いました。

 既存アプリに対するアプローチがもっと増えることに期待です。


②Flutterリプレイスして良かったことと困ったこと


・ 発表者: 

 @ryo_ryoo_ryooo


・ 資料:

 https://www.slideshare.net/RyoMiyake2/flutter-190978137


・ 概要: 

 ・良かったこと

   - Navigatorが最高(処理を細かく書かなくてもいい感じにやってくれる)

   - IOS、Androidで二回作らなくて良い(モチベーション下がらない)

   - UI作るのが楽(角丸とかグラデーションとか用意されてる)

   - その他もろもろ

 ・困ったこと

   - WebViewがやばい(Android10でキーボードが切り替えられないなど・・)

   - TextViewがやばい(チャットみたいなリンクタップや文字選択両方できるものがない)

   - enumが弱い(メソッド定義できないので、Helperメソッドを作る必要がある)

   - その他もろもろ

   

 ・結論

   - 開発速度が早い(リプレイスを2ヶ月でできた。ネイティブなら3ヶ月はかかる)

   - リプレイス後の開発速度は3倍になった。

   - Android単体のアプリでもFlutterの方が簡単に作れた。


・ 感想:

 開発速度早い!と率直に思いました。

 リプレイス後の開発はFlutterで完結できて、開発速度もあがるのを考えると、

 プラットフォーム固有のUI等が少ないアプリの場合は、

 リプレイスするのも手だな思いました。

 上記の困ったことについても、プラグインを追加し、Dart 2.6で

 解決できるとのことだったので、なおいいと思いました!

 要件によりけりですが、積極的にFlutter使っていきたいですね、、

 


③Bloc PatternにおけるBloc分割の方針と実践例


・ 発表者: 

 @yamarkz


・ 資料:

 https://speakerdeck.com/yamarkz/division-plan-and-practical-example-in-bloc-pattern


・ 概要:

以下のブロックパターンに棲み分けを行なった。

 ①アプリケーション全体に関わる処理を一つにまとめる(Global Bloc)

 ②スクリーンだけで利用する処理を一つにまとめる(Local Bloc)

 ③コンポーネントで利用する処理を一つにまとめる(Component Bloc)

 ④共通で利用する処理を一つにまとめる(Template Bloc)

 

なぜブロックパターンを適用しようと思ったのか

 ①ブロックごとに処理がまとまるため、構造が単純かつコード数が短くなる。

  (しかしファイル数は多くなる。)

 ②スコープの範囲が明確のブロックに切り分けるため、ブロック自体が疎結合になる。

  保守性・可読性があがる。

まとめ

 ・作られたブロックの数は26個(多い?少ない?開発者としてはこんなもんかなという感じ)

 ・各々のブロックの使い方を見極めて、スコープを明確化、構造化できれば

  保守性が大きく向上する。


・ 感想:

 とても参考になりました!

 自分がFlutterのコードを書く時はどうしても長く読みづらいコードになっていました。

 共通処理をファイル分けしていこうとは思っていたのですが、

 どの程度、どの範囲で分けていくのかが明確ではなかったので今回のパターンを参考に

 ブロックパターンを組んで行ければ良いと思いました。


④Flutterで個人的につまったところとその解決策


・ 発表者: 

 @maru0401


・ 資料:

 https://speakerdeck.com/maru01/fluttermeetup


・ 概要:

困った内容

 ①画面の入れ替え

 ②GridViewにアイテム画像(サーバー上)が含まれている場合、画像が縮小されてしまう

 ③ある画面の上に、半透明の画面を表示したい

解決方法

Navigator.of(context).popUntilメソッドで初期画面に戻して解決

②あらかじめサイズを指定することで解決

③表示Widgetの背景色を変更することで解決


⑤FlutterのWebView プラグインどれ使えば?


・ 発表者: 

 @espresso3389


・ 資料:

 https://speakerdeck.com/espresso3389/flutterfalsewebview-hurakuintoreshi-eha


・ 概要:

現在主流のWebViewのプラグイン

 ①webview_flutter

  →Flutter.dev 純正

  →PlatformViewで実装

 

 ②flutter_webview_plugin

  →ネイティブのWebviewにオーバレイ

 ③flutter_inappbrowser

  →PlatformViewで実装

  →Chrome Custom Tabs(Android)

  →SFSfariViewController(IOS)

オススメのプラグイン

③のflutter_inappbrowser

 機能が豊富なのでいろんな実装が可能とのこと。


⑥Static Extension Methods 使う前に知っておきたい注意書き


・ 発表者: 

 @makicamel


・ 資料:

 https://speakerdeck.com/makicamel/carefully-use-and-enjoy-static-extension-methods


・ 概要:

注意点

 ①インスタンス変数は追加できない

 

 ②NNBD(Non-Null by Default; null安全)でない変数のnullは拡張できない

 ③メソッド名の衝突に注意

結論

 ・クラスの挙動の変更は危険なので注意が必要

 ・簡単に始められて、標準クラスにメソッド追加できるので、

  可読性の高いものにできるのオススメ

  →Dartの可読性がよくない時がある。


⑦Flutter こんな案件で活躍しました!


・ 発表者: 

 @chooyan_i18n


・ 資料:

 https://docs.google.com/presentation/d/1KXlFVGwIQy812Nplh6sPs4x86-t2raXZ93f97cHqXEw


・ 概要:

どんな案件にはまったのか

 ①ひとりでIOS、Androidの対応をしなければならない

  →Flutterがマルチプラットフォーム

 ②デザインはこだわらない。プラットフォーム固有のUIいらない。

  →マテリアルWidgetそのまま使えば満足

 ③非機能要件もそんなに気にしない。

  →プラグインのバージョンが0.x.xでも使える!


⑧Gitpodでブラウザから
Flutterで開発する


・ 発表者: 

 @sakebook


・ 資料:

 https://www.slideshare.net/sakebook/gitpodflutter


・ 概要:

Gitpodとは

 ・Eclipse Theiaベースのオンライン開発環境

 ・Publicリポジトリなら無料(月100時間まで)

 ・GitHubとの連携が強い(PR作成やレビューコメントなどもできる)

触ってみた感想

 ・Extension入れられるので補完周りは良い

 ・環境を整えられるのは良い

 ・もっとショートカットほしい

 ・webしか開発できない

 ・メインで使うかは怪しいが、普段の開発環境がない場合とかは十分代替になる


参加してみて

 意外とFlutter経験が3ヶ月〜半年という人が多かったにも関わらず、 

 アプリ等リリースしたり、リプレイスしたりと様々なことができていて

 やっぱりFlutter使いこなしたら便利だなと思いました。

 何より個人的には、HotReloadの機能が最高なので、

 なるべくFlutterを使い、開発速度・保守性を上げていきたいともいます。

 みんなでFlutterをどんどん盛り上げていきましょう!!

 運営のみなさま、

 会場や飲食物をご提供くださったFlutter Japan User Group, 株式会社ガイアックス様、

 登壇されたみなさま、

 今回は有意義な時間を誠にありがとうございました。