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
410
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
argo-rolloutsにコミットした話
takayukiatkwsk
0
35
EnvoyのWasm filterを体験する
takayukiatkwsk
0
44
自分用趣味アプリを作っている話
takayukiatkwsk
0
99
zoxideのご紹介
takayukiatkwsk
0
93
Kanazawa.rbに参加してからのふりかえり
takayukiatkwsk
0
47
git-secretsとgitフックをざっと理解する
takayukiatkwsk
0
330
計測プラットフォームSREチームとシステム障害対応 / measurement platform SRE team's incident response
takayukiatkwsk
0
1.1k
リモートワークを振り返る / Look back on remote-working
takayukiatkwsk
0
130
ブログでのアウトプットが減っている件 / What long intervals my blog posts have!
takayukiatkwsk
0
110
Other Decks in Programming
See All in Programming
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
240
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
21
9.8k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
770
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
490
新世界の理解
koriym
0
110
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
330
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
890
Flutterと Vibe Coding で個人開発!
hyshu
1
180
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
690
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
4.9k
Go製CLIツールをnpmで配布するには
syumai
2
1k
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Visualization
eitanlees
146
16k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
How GitHub (no longer) Works
holman
314
140k
Become a Pro
speakerdeck
PRO
29
5.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Adopting Sorbet at Scale
ufuk
77
9.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Testing 201, or: Great Expectations
jmmastey
44
7.6k
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キャッシュ、時間範囲指定、グラフをリッチに