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 and build a weight graph app
Search
TAKAyukiatkwsk
August 21, 2021
Programming
0
320
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
37
Kanazawa.rbに参加してからのふりかえり
takayukiatkwsk
0
16
git-secretsとgitフックをざっと理解する
takayukiatkwsk
0
170
計測プラットフォームSREチームとシステム障害対応 / measurement platform SRE team's incident response
takayukiatkwsk
0
900
リモートワークを振り返る / Look back on remote-working
takayukiatkwsk
0
73
ブログでのアウトプットが減っている件 / What long intervals my blog posts have!
takayukiatkwsk
0
63
謎のDOMアクセス / Mysterious DOM access
takayukiatkwsk
0
86
私が知っておきたかった統計手法 / Statistical methods I wanted to know
takayukiatkwsk
0
190
AWS認定を取得したよ #kzrb
takayukiatkwsk
0
1.4k
Other Decks in Programming
See All in Programming
유연한 Composable 설계
l2hyunwoo
0
380
CSC307 Lecture 08
javiergs
PRO
0
330
How NOT to make your DSL terrible
okuramasafumi
0
110
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
Temporalを取り巻く仕様を整理する
sajikix
0
120
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
270
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
800
Featured
See All Featured
Scaling GitHub
holman
458
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Gamification - CAS2011
davidbonilla
78
4.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
What's new in Ruby 2.0
geeforr
338
31k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Building Your Own Lightsaber
phodgson
101
5.9k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Practical Orchestrator
shlominoach
185
10k
Code Review Best Practice
trishagee
58
16k
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キャッシュ、時間範囲指定、グラフをリッチに