noah.plus

Flutter Meetup Tokyo ♯3に参加してきた

2018-07-20

Flutter Meetup Tokyo #3が7月19日に開催された。

もともと補欠だったが、当日の昼過ぎに繰り上がりで参加できることになったので行ってきた。

会場は渋谷ヒカリエにあるDeNAのオフィス。窓からの眺めがとてもよかった。

今回のMeetupはYouTubeでのライブ配信もされていて、現在もそのアーカイブが視聴可能。

togetterでまとめも作成されている。

全部で10のトークがあり、バラエティ豊かでボリュームもたっぷりだった。トークも懇親会もどちらも満喫でき、総じておもしろかった。

たのしかったなーっていう余韻が残っているうちに内容をざっくりとまとめる。

Flutter開発に役立つPlugin Package10選

まず、PluginとPackageの違いから。

  • Plugin

    • Dartで実装され、プラットフォームに依存しない

  • Package

    • Android / iOSなど、プラットフォーム固有の実装あり

紹介されていたものの中で、個人的にはflutter_villainsというパッケージが気になった。やっぱりshared element transitionが簡単に実装できるのは良い。

また、PluginやPackageを探す場所として下記のサイトが紹介されていた。

FlutterアプリをBLoCパターンでリファクタリングし、BLoCをDIしてみた

BLoCパターンという存在をここで初めて知ったので調べた。

BLoCパターンとは

  • Business Logic Componentパターン

  • BLoCとは、ロジック部分をコンポーネント化してインターフェースに制限を設けたもの

    • 入力はすべてSink
    • 出力はすべてStream
    • BLoCは環境に依存しない
  • コードのモジュール化がはかどりマルチプラットフォーム開発がやりやすくなる

スライドに加え、以下の記事を読んだらBLoCパターンについて理解が深まった。

Flutter vs ReactNative

React Nativeとの対比のおかげで、Flutterの特徴が掴みやすかった。状況に応じて一番いいものを選ぶのが大事。フレームワーク戦争はよくない。

まとめると、

  • Webのスキルを流用

    • ReactNative

  • それ以外の高速開発

    • Flutter

  • じっくり大規模開発

    • ネイティブアプリ

Nativeライブラリの利用について

native-library

黒背景に白文字のスライドは見やすくて良いなって思った。スクリーンに映したときでも、まわりの光で文字が滲むということがないのでスライドがくっきりしていた。

発表は、いかにしてFlutterでC++のコードを動かすかということについて。

以下の流れでHello Worldをするまでを紹介。

  1. C++
  2. Java（Java Native Interface経由でC++を呼ぶ）
  3. Flutter（Channel経由でJavaを呼ぶ）

パフォーマンスに影響あるのか気になるが、かなり夢が広がる内容だった。

Flutterでネイティブコードを呼ぶ

note.muやqiitaなどでも記事を公開されている方の発表。

Flutterではチャンネル経由でネイティブのコードを呼び出せ、さらにパラメータも渡すことができる。ただし渡せる型は決まっているのでドキュメントを要チェック。

発表では、画像を直接渡すのではなく、かわりに画像のパス(String)を渡すというワークアラウンドが紹介された。

休憩（懇親会）

途中休憩。寿司🍣とカツサンドとドリンクが登場した。参加者同士の交流がはかどるよう、机のレイアウト変更が行われ、一気にわいわいムードに。この休憩以降、聞き手も基本スタンディングで、カジュアルな雰囲気のもと進行していった。

たまたま近くにいたFlutter Tシャツを着ていた方に話しかけたところ、その方が「Firebase x Flutter」で登壇予定の@niko_yuwonoさんだった。そこでFlutterに限らずいろいろな話ができてとても楽しかった。

“Hello Flutter”の次におさえたいFlutterのポイントその5

翻訳アプリのリリース前に行った仕上げについて。

  • UI / UXの改善
  • Android / iOSアイコンの準備
  • 共有メニューの追加

FlutterはPluginやPackageが充実しているのでコードを書く前に探してみるのが大事。

Flutter ちょっとわからず 大慌て 理由が分かると あっけないのよ

akkenainoyo

もうタイトルの時点でおもしろい。

初めてFlutterに触ったときにハマりやすそうなポイントが紹介されている。

iOSでフォントサイズが大きくなりすぎる問題は初心者にとって罠だが、理由がわかるとあっけなかった。（textScaleFactorを設定すべき）

問題定義から問題解決、そして最後のまとめまでの流れが一貫していてわかりやすく、プレゼンのやり方という点でもとても勉強になった。

Flutter x Firebase

flutter-firebase

FlutterとFirebase Remote Configについて。

FlutterアプリにFirebase Remote Configを組み合わせることで、アプリを更新することなくアプリ内の変数を変更できる。デモでは、コンソールの値をいじるだけでアプリの背景色をファイアベースオレンジからフラッターブルーに切り替え。簡単だし、変更の反映も早い。

あらためてFirebaseの凄まじさを実感したセッションだった。

プロトタイプ開発とFlutter

対話型インターフェースでオススメの着こなしを検索するアプリのプロトタイプをFlutterで作成したという発表。

発表の途中で行われたデモでは、「白のブラウスにあう服を教えて」という問いに対して「定番スタイル」や「トレンドスタイル」など複数のポイントからのアドバイスにくわえ、参考になるコーディネートの写真まで見せてくれる、至れり尽くせりのアシスタントだった。普通に欲しい。

1人でマルチプラットフォーム対応しつつ高速開発できるのはやっぱりFlutterの強みだなって思った。

明日から使えるFlutter for Android

イベントの最中にとったメモを見返してみると、「蒙古タンメン」と一言だけ書いてあった。

このプレゼンでは蒙古タンメン中本御徒町店の非公式アプリを例に、アプリを作る上で必須の機能がAndroid開発の視点から紹介されている。

  • タブ
  • リスト
  • APIリクエスト
  • 地図
  • 画面遷移

中本は先週行ったばかりだが、早くもまた食べに行きたくなった。

おわりに

勉強会に参加するのは2回目だったが、今回もとても楽しめた。

全てのセッションが終わった後の懇親会では、運営をされていた方々ともお話しする機会があり、またやりたいことが増えた。ブログを書くというのもやりたいことの１つだが、やっぱり文字にするのは難しい。ブログを書くことを考えると、勉強会は家に帰ってからが本番と言えるかもしれない。

次回はshibuya.apk #27に参加する予定。

今までやってきたフロントエンドも引き続き勉強しつつ、ネイティブアプリの方にもアンテナを伸ばしていきたい。

noah.plus