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
420
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
Claude Codeと共に構成図を作る
takayukiatkwsk
0
31
argo-rolloutsにコミットした話
takayukiatkwsk
0
43
EnvoyのWasm filterを体験する
takayukiatkwsk
0
48
自分用趣味アプリを作っている話
takayukiatkwsk
0
110
zoxideのご紹介
takayukiatkwsk
0
98
Kanazawa.rbに参加してからのふりかえり
takayukiatkwsk
0
50
git-secretsとgitフックをざっと理解する
takayukiatkwsk
0
340
計測プラットフォームSREチームとシステム障害対応 / measurement platform SRE team's incident response
takayukiatkwsk
0
1.1k
リモートワークを振り返る / Look back on remote-working
takayukiatkwsk
0
130
Other Decks in Programming
See All in Programming
testingを眺める
matumoto
1
140
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
360
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.7k
1から理解するWeb Push
dora1998
7
1.9k
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
130
Rancher と Terraform
fufuhu
2
400
個人軟體時代
ethanhuang13
0
320
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
290
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
270
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
430
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
For a Future-Friendly Web
brad_frost
180
9.9k
Fireside Chat
paigeccino
39
3.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Agile that works and the tools we love
rasmusluckow
330
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Being A Developer After 40
akosma
90
590k
Music & Morning Musume
bryan
46
6.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
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キャッシュ、時間範囲指定、グラフをリッチに