あぼぼノート

頭の中空っぽ

Flutter Meetup Tokyo #2に参加しました

Flutter Meetup Tokyo #2にブログ枠として参加しましたので、参加レポを書きます。

はじめに断っておくと各発表の詳細は公開されているスライドを読んだほうが誤解なく伝わるので書きません。

f:id:aboy_perry:20180603210628j:plain

flutter-jp.connpass.com

当日はこちら↓のAndroidもくもく会と同じ会場で、仲良く始まりました。

mercari-android-mokumoku.connpass.com

また、Meetup中はhttps://www.sli.do/によるほぼリアルタイム質疑応答も行われていました。

それでは、各LTについて雑感を書いていきます。

Flutter Overview++ (Google I/O 2018)

speakerdeck.com

Google I/O 2018 のセッションのなかでFlutter関連のものの概要をかいつまんで紹介。

Flutter(Beta 3)はフルでMaterial Designをサポートしていて、その理由がMaterial DesignのメンバーがFlutterのチームに入って一緒に開発しているからだそうで、なるほどな〜という感じです。

それから「状態管理」について、私は setState() しか知らなかったので、setState()以外の選択肢が知れたことはめちゃめちゃ有意義でした。

Google I/OにはFlutterアプリのショーケースがあって、FLutterで作られたアプリが実機で触れたらしい。また、アリババがすでに2000万MAU規模のアプリ(間違ってたらごめんなさい)をFlutterで作っているとのこと。

まだまだプロダクションでの採用数は多いとは言えないものの、今後活用事例が増えていくのは時間の問題でしょう。

ちなみに今回の発表の内容よりも少し詳しく書いた記事がqiitaに公開されてるとのことです。

Build reactive mobile apps with Flutter (Google I/O '18) メモ

Flutter List View

speakerdeck.com

勉強会が2日前だと勘違いしていたそう

たいていのアプリで使うことになるListView。私も使っていますが、Sliver(ずっとSilverだと思っていた)を使ってごにょごにょできることははじめて知りました。

とくにスクロールと連動してAppBar(iOSでいうところのNavigationBar)が出たり引っ込んだりするようなUIを、SliverAppBarを使えばそこそこ簡単に実装できるのは良いなーと思いました。なかなか大変なんですよねあれ...。

とはいえどちらかというとSliverのような低レイヤの機能は初心者向けではないと思ってるので、最初はSliverを考えずに高レイヤのWidgetを使うだけでじゅうぶんですね。

またこの辺の質疑応答であったのですが、メルカリでは一部プロジェクトでFlutterを使おうという流れになっているとのことです...!!!

Flutterのリアクティブ戦略 setState ~ Reduxまで

docs.google.com

1つめのLTでも状態管理の話は出ましたが、このLTはそれをもう少し詳しく説明した感じでした。

setState()がいくつかのデメリットを持ち合わせているとしても、Flutterにおける状態管理は、widgetの中にビジネスロジックを持つのがまず基本のキであることには変わりないでしょう。

あとはこれらも読んでねと言っていた気がします。

lacolaco.hatenablog.com

https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf

"Hello Flutter" の次におさえたいFlutterのポイント その4

www.slideshare.net

開発中の翻訳アプリを使った、国際化対応の話。3ステップにわけてあったのでめちゃわかりやすい。

実際国際化対応ってどうやってるんでしょう。多分会社でやるとしたら翻訳チームみたいなところに「このファイルのこの部分の単語を全て英語にしてこっちのファイルのここに書いてください」みたいなことになるんだと思うんですけど。それか自分たちで全部やるか。

このLTで紹介されていた方法だと、言語ごとにできた.arbファイルを翻訳チームに渡せば普通にできそうですね。たしかにコマンドを叩かないといけなかったりして少しだけ面倒そうだなと思いつつ、これはこれでじゅうぶんなのではと思いました。

Flutter テストことはじめ

speakerdeck.com

登壇者「Flutterのテスト書いたことある人手を上げて〜」

聴講者「は〜い(1人)」

から始まったテストのお話(多分1人じゃないはず...はず)

ちなみに私は書いたことないです..

Flutterギャラリーというサンプルアプリのテストをのぞいてみると良いそう。

業務で取り入れようとするのであればやっぱり最低限ユニットテストは書けるようになっておかないとダメかなーと思いますのでこのへんは頑張ろうと思いました。

BLoC

speakerdeck.com

BLoCとはビジネスロジックをUI/プラットフォームから分離する設計パターン。

viewの表示のtrue/elseもBLoCのoutputを使うべしとのことです。MVVMでいうとViewModelからisLabelHiddenのようなパラメータをViewに渡してViewは該当のLabelにバインドしておく、みたいな感じでしょうか...?

BuildContextについて調べてみた

speakerdeck.com

SnackBarを触りながら調べてみたとのこと。

正直普段触ってて全然気にしてなかったところなので、まずこれを調べてみたというのがすごい。

debugのときあのView(Widget)のヒエラルキー見えるやつってみなさん使ってるんですかね。この方はそれを使って、「動かないときはScaffoldがない」というのを確認したそう。

Flutter * 2dimensions

speakerdeck.com

今回はアニメーションツール NIMA の話。

ファイル名やアニメーション名はのちのちコードで使うので、NIMA上でちゃんと命名しといたほうがいいとのこと。

ちゃっかりFlutterにPRを出してマージされたとのことで、コントリビューターです。

www.reddit.com

FlutterでQRコードリーダーを雑に作ってみた

speakerdeck.com

世にあるQRコードアプリは広告だらけなので自分で作ってみた。とりあえず勢いがあったLT。

普段はゲームをやっているのでゲーム好きとしてはピクッとしました。

ちなみにこういう発表で「開発時間4時間」とか「だいたい2週間で作成」とか言ってる方がたまにいて、なんなんでしょうかみんな天才なんでしょうか。私にはムリです。才能わけて。

ちなみにFlutterに関してはこのyoutubeチャンネルがおすすめとのこと。

www.youtube.com

Flutterアニメーションはじめの一歩

speakerdeck.com

メイド喫茶駆動開発」の9文字が一番インパクトありました。

AnimationControllerとTweenを組み合わせて簡単なアニメーションは可能だということ。

インフラジスティックスとFlutter

slides.com

Doughnutとう英単語アプリをFlutterのアルファ版を使って作った。開発期間は2週間とのこと。

Text to speech pluginというFlutterプラグインがあって、意外と良かったそう。

また、最後に紹介されていたIndigo Design to Code (D2C) Studioというのが本当にすごくてやばかったです。sketchからFlutterアプリをジェネレートするらしい。ワクワクしますねー。

jp.infragistics.com

おわりに

Flutter Meetup Tokyo初参加でしたが、みんなのFlutterに対する注目度が高いなーと思いました。

また私自身は普段業務でRxSwiftを用いたiOS開発をしているので、Dart/FlutterでもRxを使った開発をGoogleがやっていることが知れて良かったです。setState()での開発に慣れたらstreamingを使った開発にもチャレンジしたいなーと思わせる会でした。

それからめちゃくちゃオシャレで美味しいケータリングが用意されていたのですが、それがこちらのお店だということが質疑応答で判明しました。

出張料理 素粒子 / catering services SORYUSHI

まとめると全体的に最高でした!運営/発表者のみなさんありがとうございました!

f:id:aboy_perry:20180603210645j:plain