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
360
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
EnvoyのWasm filterを体験する
takayukiatkwsk
0
26
自分用趣味アプリを作っている話
takayukiatkwsk
0
50
zoxideのご紹介
takayukiatkwsk
0
69
Kanazawa.rbに参加してからのふりかえり
takayukiatkwsk
0
33
git-secretsとgitフックをざっと理解する
takayukiatkwsk
0
280
計測プラットフォームSREチームとシステム障害対応 / measurement platform SRE team's incident response
takayukiatkwsk
0
1k
リモートワークを振り返る / Look back on remote-working
takayukiatkwsk
0
95
ブログでのアウトプットが減っている件 / What long intervals my blog posts have!
takayukiatkwsk
0
82
謎のDOMアクセス / Mysterious DOM access
takayukiatkwsk
0
110
Other Decks in Programming
See All in Programming
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
時計仕掛けのCompose
mkeeda
1
280
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
Spring gRPC について / About Spring gRPC
mackey0225
0
220
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
WebDriver BiDiとは何なのか
yotahada3
1
140
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Bash Introduction
62gerente
610
210k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
We Have a Design System, Now What?
morganepeng
51
7.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Embracing the Ebb and Flow
colly
84
4.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
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キャッシュ、時間範囲指定、グラフをリッチに