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
84
WebXR で Web をもっと楽しもう
qst_exe
0
130
今年のメタバースについての取り組みとこれから
qst_exe
0
130
今年のメタバースについての取り組みとこれから
qst_exe
0
43
visionOSアプリ開発について
qst_exe
0
79
visionOSアプリ開発のすゝめ
qst_exe
0
78
EDDのすゝめ 〜LT大会に参加しませんか?〜
qst_exe
0
28
オンラインイベントの失敗談と対応 〜「コロナ禍の鹿児島」のそれから〜
qst_exe
0
81
メタバースコミュニティ「BridgeSpace」の紹介
qst_exe
0
180
Other Decks in Programming
See All in Programming
VS Code をプロダクトにどう取り込むか
onomax
1
770
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
440
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
530
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
990
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
920
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
560
Try creating your own orderedmap
kazamori
1
250
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
190
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
1.1k
Fast JSX: Don't clone props object #28768
yossydev
1
200
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Building Your Own Lightsaber
phodgson
100
5.7k
Faster Mobile Websites
deanohume
300
30k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
What's in a price? How to price your products and services
michaelherold
238
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
How to Ace a Technical Interview
jacobian
273
22k
Rails Girls Zürich Keynote
gr2m
91
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Making Projects Easy
brettharned
109
5.5k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
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