Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutterに入門して体重グラフアプリを作る / Get started Flutter...
Search
TAKAyukiatkwsk
August 21, 2021
Programming
0
330
Flutterに入門して体重グラフアプリを作る / Get started Flutter and build a weight graph app
Kanazawa.rb meetup #108 9周年LT大会で発表した資料です。
TAKAyukiatkwsk
August 21, 2021
Tweet
Share
More Decks by TAKAyukiatkwsk
See All by TAKAyukiatkwsk
zoxideのご紹介
takayukiatkwsk
0
44
Kanazawa.rbに参加してからのふりかえり
takayukiatkwsk
0
17
git-secretsとgitフックをざっと理解する
takayukiatkwsk
0
210
計測プラットフォームSREチームとシステム障害対応 / measurement platform SRE team's incident response
takayukiatkwsk
0
940
リモートワークを振り返る / Look back on remote-working
takayukiatkwsk
0
74
ブログでのアウトプットが減っている件 / What long intervals my blog posts have!
takayukiatkwsk
0
64
謎のDOMアクセス / Mysterious DOM access
takayukiatkwsk
0
91
私が知っておきたかった統計手法 / Statistical methods I wanted to know
takayukiatkwsk
0
200
AWS認定を取得したよ #kzrb
takayukiatkwsk
0
1.4k
Other Decks in Programming
See All in Programming
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
140
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
240
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
3
460
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
410
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
630
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
760
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
160
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
970
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
730
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
350
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.5k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.8k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Automating Front-end Workflow
addyosmani
1365
200k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
A Tale of Four Properties
chriscoyier
155
22k
Testing 201, or: Great Expectations
jmmastey
36
7k
Done Done
chrislema
180
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
Transcript
Flutterに入門して 体重グラフアプリを作る Kanazawa.rb meetup #108 Takayuki Takagi
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
今日の話 • Flutter触ってみた • 感触を掴むために体重の推移をグラフ化するアプリを 作りました ◦ ひとまずAndroidで動かす前提 • ネイティブアプリ開発ほぼ未経験勢の感想
◦ XCodeのStoryboardを軽く触ったことがある程度 ◦ Android開発は経験無し
アプリの様子
どのようなアプリなのか? • Google Fitに登録済みの体重をグラフで表示する ◦ 当該アプリで書き込みはしていない • 主な処理 ◦ Googleサインイン
◦ Fitness APIのリクエスト ◦ 上記リクエストで得られた体重データを集計 ◦ 時系列グラフとして表示 ◦ タブの切り替えで表示期間を変更 ◦ メニューを表示するドロワー
モチベーション • どうやらFlutterがアツいらしいと小耳に挟む ◦ 単一のコードベースでモバイル/Web/Desktopそれぞれに対応したアプ リが作れる、すごない? ◦ プロトタイプとかこういうのでシュッと作れると良さげ • どうせなら動くものを作ってみたい
◦ チュートリアルより少し先の世界として ◦ 体重の推移をいい感じに見たい需要 ▪ 年齢を重ねると健康の話になりがち ▪ Google Fitアプリでは任意の表示期間で見れない
道のり • Get started ◦ https://flutter.dev/docs/get-started/install/macos • チュートリアルやCodelab ◦ https://flutter.dev/docs/reference/tutorials
◦ https://flutter.dev/docs/codelabs • アプリで必要な機能を洗い出して試しながら実装へ • flutter.devをリファレンスにして進める
感想 • デフォルトでUI要素が揃っている ◦ 自前で素材を用意しなくてもそれっぽいものは作れる😄 ◦ 特にMaterial design ◦ とはいえ自分で素材を用意する時はいずれ来ると思う
感想 • 宣言的に記述できる ◦ あるべき姿を書いておけば、あとはいいがに😄 ◦ すべてがWidget(UI構成要素を組み合わせて一つのアプリにする) ◦ 状態が変わるときにどうやって構成を変えるかは気にしなくて良い ◦
Reactの思想と似ている(かじった程度の知識)
感想 • Dartパッケージにサンプルコードが割と含まれている ◦ 公開する側は手間だけど、使う側からするととても助かる😄 ◦ exampleディレクトリに配置すればpub.devで表示されるらしい ▪ https://dart.dev/tools/pub/package-layout#examples ◦
pub.dev見ておけばオッケーというのも良い ◦ 全部ではないと思うが、今回利用したものには含まれていた
None
感想 • Google API使うのにちょっと手間が掛かる😓 ◦ Googleサインインが必要だったのでまずはFirebaseでアプリ登録 ◦ 呼び出すAPIのスコープを設定したり ◦ アプリのフィンガープリントを登録したり
◦ サポートメールアドレスを登録しておかないとサインインに失敗する ◦ という感じではまりがち ◦ プラットフォームによって準備手順が異なる
まとめ • 動くものができて良かった(エミュレーターだけど) ◦ やってみたものの尻すぼみになること数多 ◦ シンプルなアプリならさくさく作れて良い体験だった ◦ 導入でおぉすげえってなったのも好奇心が継続するきっかけになった のかもしれない
◦ 今回はAndroidに絞ったからというのはあると思う • もう少し作り込みたい ◦ 自分の端末にインストールして動かす ◦ APIキャッシュ、時間範囲指定、グラフをリッチに