Flutterに入門して体重グラフアプリを作る / Get started Flutter and build a weight graph app

Transcript

1. Flutterに入門して 体重グラフアプリを作る Kanazawa.rb meetup #108 Takayuki Takagi

2. Who am I? • Takayuki Takagi (髙木貴之 / ニボシーニョ) •

   @TAKAyuki_atkwsk / takayukiatkwsk • Programmer (employee) • Working from home • Scala, Ruby, Python, AWS, Docker, etc. • Like beer and gyoza🍻🍻🍻 • Fit Boxing 2

3. 今日の話 • Flutter触ってみた • 感触を掴むために体重の推移をグラフ化するアプリを 作りました ◦ ひとまずAndroidで動かす前提 • ネイティブアプリ開発ほぼ未経験勢の感想

   ◦ XCodeのStoryboardを軽く触ったことがある程度 ◦ Android開発は経験無し

4. アプリの様子

5. どのようなアプリなのか？ • Google Fitに登録済みの体重をグラフで表示する ◦ 当該アプリで書き込みはしていない • 主な処理 ◦ Googleサインイン

   ◦ Fitness APIのリクエスト ◦ 上記リクエストで得られた体重データを集計 ◦ 時系列グラフとして表示 ◦ タブの切り替えで表示期間を変更 ◦ メニューを表示するドロワー

6. モチベーション • どうやらFlutterがアツいらしいと小耳に挟む ◦ 単一のコードベースでモバイル/Web/Desktopそれぞれに対応したアプ リが作れる、すごない？ ◦ プロトタイプとかこういうのでシュッと作れると良さげ • どうせなら動くものを作ってみたい

   ◦ チュートリアルより少し先の世界として ◦ 体重の推移をいい感じに見たい需要 ▪ 年齢を重ねると健康の話になりがち ▪ Google Fitアプリでは任意の表示期間で見れない

7. 道のり • Get started ◦ https://flutter.dev/docs/get-started/install/macos • チュートリアルやCodelab ◦ https://flutter.dev/docs/reference/tutorials

   ◦ https://flutter.dev/docs/codelabs • アプリで必要な機能を洗い出して試しながら実装へ • flutter.devをリファレンスにして進める

8. 感想 • デフォルトでUI要素が揃っている ◦ 自前で素材を用意しなくてもそれっぽいものは作れる😄 ◦ 特にMaterial design ◦ とはいえ自分で素材を用意する時はいずれ来ると思う

9. 感想 • 宣言的に記述できる ◦ あるべき姿を書いておけば、あとはいいがに😄 ◦ すべてがWidget（UI構成要素を組み合わせて一つのアプリにする） ◦ 状態が変わるときにどうやって構成を変えるかは気にしなくて良い ◦

   Reactの思想と似ている（かじった程度の知識）

10. 感想 • Dartパッケージにサンプルコードが割と含まれている ◦ 公開する側は手間だけど、使う側からするととても助かる😄 ◦ exampleディレクトリに配置すればpub.devで表示されるらしい ▪ https://dart.dev/tools/pub/package-layout#examples ◦

    pub.dev見ておけばオッケーというのも良い ◦ 全部ではないと思うが、今回利用したものには含まれていた
11. None

12. 感想 • Google API使うのにちょっと手間が掛かる😓 ◦ Googleサインインが必要だったのでまずはFirebaseでアプリ登録 ◦ 呼び出すAPIのスコープを設定したり ◦ アプリのフィンガープリントを登録したり

    ◦ サポートメールアドレスを登録しておかないとサインインに失敗する ◦ という感じではまりがち ◦ プラットフォームによって準備手順が異なる

13. まとめ • 動くものができて良かった（エミュレーターだけど） ◦ やってみたものの尻すぼみになること数多 ◦ シンプルなアプリならさくさく作れて良い体験だった ◦ 導入でおぉすげえってなったのも好奇心が継続するきっかけになった のかもしれない

    ◦ 今回はAndroidに絞ったからというのはあると思う • もう少し作り込みたい ◦ 自分の端末にインストールして動かす ◦ APIキャッシュ、時間範囲指定、グラフをリッチに