Flutter生活2日目~Flutter Meetup Tokyo編~

2日目

昨日はサンプルプロジェクトの確認まで完了しました。

今日は「よっしゃ！何か作るぞ！」と思ったのですが、ちょうど良いことにFlutter Meetup Tokyo #13が開催されるようです！

Flutter Meetup Tokyoは東京で開催するFlutter勉強会です。
内容はFlutterにまつわることであればなんでもOKです。
初心者の方もガチ勢の方も大歓迎です！ぜひぜひ奮ってご参加ください！

これは行くしかない！先輩方にいっぱいお話をお聞きするぞ！ということで、早速ブログ枠を頂戴して行くことにしました！

LT

Supernova StudioでFlutter爆速開発の夢を見れるか？ (@motoy3d)

• Supernova Studioとは？
  • 「Design to code. Meet SuperNova.」
  • https://supernova.io/
  • SketchやAdobe XDのデザインファイルをインポートすると、プラットフォームごとにコードを生成してくれる。
    • Flutterをサポートしてくれて、最近のアップデートが熱い！
    • macにSketchやXDがインストールされていなくてもOKc
• デモ
  • 起動も変換もかなり速い。
  • リアルタイムプレビューが便利そう。
  • 画面遷移の設定もいける。
    • 画像をボタンに変換する。
    • 数回の操作で画面遷移のイベントが設定できる。
    • 画面のリストを見ると、矢印が付いていて画面遷移図っぽくなる。(StoryBoardをいじっているイメージ)
  • エクスポートはちょっと遅め。
• エクスポートしたものをFlutterで読み込むと大概エラーが起きる。
  • 公式サンプルでもエラーがでる。
  • Flutterのエンジニア募集中だから近々解消するかも？
• 問題点
  • 古いXDやSketchは未対応
    • 最新版にすればOK
  • 読み込まれない画像ある。
    • 何回か読み込み直すといける。
  • レイアウトよく崩れる
    • 頑張って直す。
  • FlutterエクスポートするとTextクラスでエラー
    • 置換すればOK
• 結論
  • 爆速開発の夢は12/10現在ではまだ難しい。
  • 開発が活発なので、近い将来期待ができそう。(今夜かもしれない！)
• スライドのURL
  • https://speakerdeck.com/motoy3d/supernova-studio-and-flutter-ultra-speed-development

---

Flutterプラグインでdart:ffiを使ってみる (@espresso3389)

• dart:ffiって何？
  • Wikipedia(https://ja.wikipedia.org/wiki/Foreign_function_interface)
  • ざっくり言うとC言語を呼び出す機能
    • ポインタから直接読み書きできる。(逆に言うとDartで作ったListとかを直接渡せない)
• 使ってみる。
  • テンプレ作成
    • flutter create -t plugin hello_ffi
  • コードいじる
    • ios_Classes/hello.cpp(追加)
      • iOSにあるけど、Androidも同じファイル使う。
    • lib/hello.ffi.dart
      • hello.cppの関数実装をDartに引き込む
  • Androidのgradleなど修正
    • android/CMakeLists.txtを修正
    • android/build.gradleを修正
  • 上記までやれば使う側はDartの関数みたいに使用できる。
• なぜAndroidがiOS側のファイルを読み込むようにしているのか？
  • XCodeは配下のファイルしか読み込めない。
  • CMakeは柔軟に対応できるのでAndroid側で九州
• 良さげなところ
  • C/C++のシングルソースで開発できる！
• サンプル
  • dart-lang/samples/ffiで学べる。
    • https://github.com/dart-lang/sdk/tree/master/samples/ffi
• ffi パッケージ
  • dart:ffiで不足している機能を提供
• 具体的な書き方はスライドでチェック！！(速すぎて追いつきませんでした。)
• まとめ
  • ポイントで基本何でもできる。
  • 構造体きつい。
  • メモリの確保/文字列変換系はffi使う。
• スライドのURL
  • 公開され次第反映します！！

---

Flutter desktop embedding for Linux (@kurun_pan)

• Flutter desktop embedding概要
  • Flutterのデスクトップアプリが作れる。(Windows/Linux/Mac)
• 現状の共有
  • https://github.com/google/flutter-desktop-embedding
  • 不安定でまだプロダクトに使えないと書いてある。
  • Mac以外はデバッグモードでしか動かない。
  • プラグインを使うにはLinux/Macでは修正するものあり
    • Makefile
• 動かしてみた
  • macでもlinuxでも割と普通に動いている。(ダークモードも)
• FlutterアプリがLinuxで動く仕組み
  • 詳しくはスライドを参照！
  • プラグインはGTKを呼び出しているラッパーに過ぎない。
• まとめ
  • 割と普通に動く
  • まだ製品として使うのはちょっと...
    • プラグイン少なすぎ
  • Linuxネイティブの仕組みはシンプルなので今後に期待
    • コントリビュートするチャンスもありそう。
• スライドのURL
  • 公開され次第反映します！！

---

Desktop向け業務アプリでFlutterを採用しようとした話 (@mirock)

• 「このWebアプリをオンプレかつ通信なしでDeskTopアプリにしてくれない？」
  • C/C++の呼び出しはない
  • クロスプラットフォーム
    • ElectronとFlutterくらいしかなさそう。
      • Electron
        • Webリソースなのでこちらが採用された。
      • Flutter
        • 現状使えなさそうなので採用はできなかった。
• Flutterの魅力
  • 美しいマテリアルなUI
  • ホットリロード
• プラグイン
  • 対応しているプラグインが少ない...。(拡張は可能)
• DeskTopに必要そうな機能(Macのみ検証した)
  • キーボード入力
    • テキストボックスも対応できる。
  • メニューバー
    • Windowsは対応できない。
  • データ永続化
    • MacOSのみ
  • ネットワーク接続
    • Macだとセキュリティの設定が必要(パーミッション？)
  • ファイル選択
    • WindowsとMacのみ
    • Macだとセキュリティの設定が必要(パーミッション？)
• まとめ
  • MacのAPIはかなり安定している(全然クラッシュしなかった)
  • WindowsとLinuxはちょっと厳しい
    • 今後対応されるAPIが差し変わる可能性あり(Win32→UWP)
• スライドのURL
  • 公開され次第反映します！！

---

アプリ名を変更するプラグインを作った話 (@moyashidaisuke )

• アプリの名前のプラグインを作ってみた！
  • チュートリアルやったぞ！
  • 何か作るぞ！
  • アプリ名とかアイコン
    • AndroidManifest/Plistの直接書き換えしかなかった！不便！
  • ブログもある。
    • https://www.moyashidaisuke.com/entry/create-flutter-launcher-name
• プラグインの作り方
  • アプリとアイコンについては公式通りにやればOK
  • コードの書き方は似ているプラグインを参考にした。
  • 一度公開すると削除できないので慎重に！
  • 英語は頑張る！
• 公開した後の感想
  • どのくらい使っているのかわからない。
  • 宣伝しないと誰も使わない。(そもそも気づかない。)
  • 継続的に変更するところでもないから、直接書き換える勢が多いのかも。
  • みなさんぜひ使ってください！
• まとめ
  • 簡単なものでも意外と本体にない
    • コントリビュートのチャンス！
  • PRやいいねお願いします！
• スライドのURL
  • https://www.slideshare.net/moyashidaisuke/20191210-flutter-meetup-203989753

---

Atomic DesignをFlutterでやってみた (つっちー )

• Atomic Design
  • Widgetの切り分けの1つで、Widgetを再利用しやすく作れる。
  • アトミックデザイン

• BLOCの設計

• まとめ
  • FlutterのいいところはUIが簡単に素早く作れる
  • 高度に抽象化されたものより単純で冗長な方が良い
  • Organismsレベルでは再利用できた方が良いかも。
• まとめ
  • Atomic DesignでWidgetは再利用できるように作れる。
  • 再利用性を高すぎるとFlutterの良さがへる。
• スライドのURL
  • 公開され次第反映します！！

---

そのアプリ…文字サイズをデカくしてもUI崩れないですか？ (Masaokb)

• Flutterで文字調整をめちゃくちゃ楽に対応できる。(10分くらい)
• なぜ文字調整が必要か？
  • 高齢化社会日本
    • 2020年には女性の過半数が50歳以上
  • 日本でサービス開発する以上、対応する方が良い！
  • 幅広い文字サイズで表示可能でなおかつ崩れないUIが必要！
• OSの文字サイズ
  • そもそもiOS/Androidにも調整ができる機能ある。
  • twitterでは対応されている。
• 考えるべき問題
  • 改行するべきところ
  • アイコンのサイズなど
• やってみた
  • https://github.com/Tenxia-inc/font_size_changeable
• 仕組み
  • TextScaleFactorがある。
    • 全てのTextWidgetに作用する乗数
    • MaterialAppのbuilderでうまいことできる。
  • 作用させたくない要素には、明示的に1を設定すればサイズは変わらない。
  • Text以外のWidgetにも適用させるとGood！！
• スライドのURL
  • https://docs.google.com/presentation/d/1hvSX3ZzXPZZr3HeoBNhJiqSff-bPPa-UhhszgmClN2Q/edit#slide=id.g56f2e3b4b9_0_20

感想

• DeskTopアプリを作るのは無理ゲーっぽい。
• まだ発展途上なので、コントリビュートしやすい/今後に期待できる。
• 文字サイズの話など、意外とFlutterだからできることも多い？
• Flutter頑張るぞー！