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
Webアプリエンジニアにこそ知ってほしい Flutterでのモバイルアプリ開発について
Search
qst_exe
December 08, 2022
Programming
0
25
Webアプリエンジニアにこそ知ってほしい Flutterでのモバイルアプリ開発について
「メタバース焚火会 #2 メタバースLT大会【VR機器不要】」で登壇したときのスライドです
https://metaverse-bonfire.connpass.com/event/267300/
qst_exe
December 08, 2022
Tweet
Share
More Decks by qst_exe
See All by qst_exe
Babylon.js で始めるヘッドレス CMS/A headless CMS on Babylon.js
qst_exe
0
86
WebXR で Web をもっと楽しもう
qst_exe
0
130
今年のメタバースについての取り組みとこれから
qst_exe
0
130
今年のメタバースについての取り組みとこれから
qst_exe
0
43
visionOSアプリ開発について
qst_exe
0
80
visionOSアプリ開発のすゝめ
qst_exe
0
79
EDDのすゝめ 〜LT大会に参加しませんか?〜
qst_exe
0
28
オンラインイベントの失敗談と対応 〜「コロナ禍の鹿児島」のそれから〜
qst_exe
0
82
メタバースコミュニティ「BridgeSpace」の紹介
qst_exe
0
180
Other Decks in Programming
See All in Programming
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
540
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
新宿ダンジョンを可視化してみた
satoshi7190
3
420
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
920
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
140
The Cutting Edge Of Versioning (LambdaConf 2024)
chriskrycho
0
210
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
130
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
1k
Next.js App Router
quramy
12
2k
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
470
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
125
8.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Being A Developer After 40
akosma
67
580k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Designing for humans not robots
tammielis
247
25k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Designing Experiences People Love
moore
136
23k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Transcript
Webアプリエンジニアにこそ知ってほしい Flutterでのモバイルアプリ開発について メタバース焚火会 2022-12-08
❖ くすたん ❖ ヘッジホッグ.exe LLC / unimal Co.,Ltd. (モバイルアプリ, Webアプリ開発)
❖ Flutter, Firebase, Vue, Laravel ❖ 鹿児島.mk, メタバース焚火会 自己紹介
• モバイルアプリ開発においてざっくりした知見を得て、 モバイルアプリエンジニアと話がしやすくなる • Flutterが好きになる • Flutterを触ってみたくなる 目的
• モバイルアプリ開発の概要 • Flutterの概要 • Flutterのメリットとデメリット • Flutterを始めたい人へ お品書き
モバイルアプリ開発の概要
• Webアプリと異なりURLが存在しないため、直アクセスができない • 配信にはApple・Googleの審査が必要なので、AppleやGoogleが許し てくれるアプリを作る必要がある • ブラウザ上で動くわけではないため、実機(or シミュレータ)で都度ビルドし ての動作確認が必須 •
各OS(iOS・Android)用のアプリを開発するには、それぞれ別の言語での 開発が必要 • PUSH通知やカメラ、XR(AR/VR)等の端末の機能をフル活用できる モバイルアプリ開発について
Flutterの概要
• Google が提供しているクロスプラットフォームフレームワーク • Widgetと呼ばれるアプリケーション構築専用のHTMLタグのようなものを ツリー構造に組み合わせることで、UIを構築できる • 言語はDartでTypeScriptに近い書き味 • Hot
Reloadが搭載されているので、毎度ビルドし直さなくてよい • UIはGoogle推奨のマテリアルデザインになる • これ1つでiOS・Android、Windows、MacOSのアプリが開発できる Flutterの概要
メリット・デメリット
• 1つの言語で各OSのUIが組めるので、開発効率が上がる(OS毎の実装漏 れが減る) • (個人的に)宣言的UIだからかUIを組んでいて気持ちいい • Webのフロントエンドができる人なら、Flutterでのコーディングに関して は比較的容易に習得できる(アプリをリリースできるかは別) メリット
• XRやOS依存の特別な機能を利用するには、ネイティブ(Swift, Kotlin)の コードを書かないといけない • 各OSでデザインを変えたい場合(iOSはフラットデザイン, Androidはマテ リアルデザイン)は、開発効率が落ちる • できたばかりのフレームワークなので破壊的変更が多々ある
デメリット そうは言っても運用でカバーはできる
Flutterを始めたい人へ
• 状態管理のことは気にせずに、StatefulWidgetを使って何かアプリを 作ってみるのがオススメ • 公式もサンプル集を公開しているので、気になったものを少し改造してみ るとか • https://flutter.github.io/samples/# 細かいことは気にせずに作ってみる
12/17 にFlutterハンズオンもやります!
おまけ
None
Flutter WebでSEOスコア100を 獲得した方法
12月11日のアドベントカレンダーで 報告予定!!
EOF