居酒屋で使えそうなアプリをflutter for webで作ってみた備忘録

flutterは怖くないですよ！

Transcript

1. 居酒屋で使えそうなゲームを FLUTTER FOR WEBで作った話
2. 自己紹介 Name : 大西優司 (Yuji Onishi) 株式会社Eduphile IT事業部長 執行役員（関西でflutterを広げたい人） Birthday : 1991/8/6 Mail : freelancer@y-onishi.net 趣味︓作曲・楽器演奏・カメラ撮影・読書・電子ゲーム・アナログゲーム 略歴︓ 新卒で就職した教育系の会社で、個別指導塾の教室長として生徒数100名弱の 地域基幹教室で勤務し、30名の講師のマネジメントを行う。教室勤務の他に企画 業務と講師採用業務を経験した後にプログラマーに転職し、医療用パッケージアプリ 開発を行う。 2018年4月に小中高向け個別指導塾を運営する会社を設立し、部下育成・組 織開発を行う。担当業務は教務・教室管理・上級プログラミング教育カリキュラム策 定・内製アプリケーション開発マネジメント。 現在は執行役員として勤務する傍ら、フ リーランスとして講師業やエンジニアなど活動を広げている。 2
3. 今日話す内容 3
4. ・自己紹介 ・今回組んだサンプルアプリの紹介 ・FLUTTERとは ・FLUTTER FOR WEBとは ・FLUTTERをどう組むのか ・ANIMATIONの処理 ・FLUTTERの弱点 ・FLUTTERを美しいコードにするためのある解決策 ・FLUTTER FOR WEBのFIREBASEデプロイ 4
5. サンプルアプリ機能説明 5
6. こ の ゲ ー ム は 、 2 人 以 上 の プ レ イ ヤ ー で 遊 ぶ ゲ ー ム で す 。 １ つ の タ ー ン に お い て 、 「 濁 点 の 多 い メ ニ ュ ー は ︖ 」 な ど の お 題 が 与 え ら れ ま す の で 、 飲 食 店 な ど の メ ニ ュ ー を 使 用 し 、 そ の 中 か ら 回 答 を 探 し だ し ま す 。 ま ず 、 そ れ ぞ れ の プ レ イ ヤ ー へ 順 番 に 制 限 時 間 が 与 え ら れ ま す 。 こ の 与 え ら れ た 制 限 時 間 内 に 、 メ ニ ュ ー か ら お 題 に あ っ た 回 答 を 探 し ま す 。 全 員 回 答 が 終 了 し ま し た ら 、 次 は 発 表 で す 。 画 面 に 回 答 さ れ た 内 容 が 表 示 さ れ ま す の で 、 最 も ア ナ ウ ン ス が 得 意 と さ れ る 人 が 、 プ レ イ ヤ ー の 回 答 を 発 表 し ま す 。 発 表 が 終 わ り ま し た ら 、 最 後 に 投 票 を 行 い ま す 。 画 面 に 全 プ レ イ ヤ ー の 名 前 が 表 示 さ れ ま す の で 、 お 題 に そ っ て 、 全 員 で 話 し 合 い を し て 投 票 先 を 決 定 し て く だ さ い 。 こ の 一 連 の 流 れ を 繰 り 返 し 、 最 も 投 票 さ れ た プ レ イ ヤ ー が 勝 者 と な り ま す 。 6
7. 7 居酒屋のメニューを利用したゲーム
8. FLUTTERとは？ 8
9. Flutter (フラッター) は Googleによって開発された フリーかつオープンソースの モバイルアプリケーションフレームワークである。 AndroidやiOS向けのアプリケーションの開発に利用されている。 Wikipediaより 9
10. FLUTTER FOR WEBとは︖ 10
11. Web support is a code-compatible implementation of Flutter that is rendered using standards-based web technologies : HTML, CSS and JavaScript. With web support, you can compile existing Flutter code written in Dart into a client experience that can be embedded in the browser and deployed to any web server. You can use all the features of Flutter, and you don’t need a browser plug-in. 11
12. Flutterを利用したウェブサポート！ 12
13. FLUTTERの基本的な組み方 13
14. UI設計 14 FLUTTERのUI設計は 様々なウィジェットによって構成されている。 FLUTTERのウィジェットはUIの不変な部分を表し テキスト・図形・アニメーションなどを含む全てのグラフィック はウィジェットを使用して描画を行う。 多くの単純なウィジェットを組み合わせることで、複雑なウィ ジェットを作成することができる。 WIKIPEDIAより
15. Widgetの組み合わせによってviewを構築する︕ 15
16. FIREBASEによる保存処理 16
17. パディング付きのテキストフィールド 17
18. 配置図 18
19. 配置図（親子関係） 19
20. 配置図(画面例) 20
21. SCAFFOLD 21
22. FLOATING ACITON BUTTON 22
23. TEXT 23
24. CENTER 24
25. COLUMN 25
26. ROW 26
27. GRIDVIEW 27
28. ANIMATION処理 28
29. 利用パッケージ 29
30. 30 水玉が流れるサンプル
31. 31 フェードイン
32. examplesそのままの設定でかなりリッチな動作をしてくれる︕ 32 今回は汎用化して外部から使いやすいWidgetとして実装しました
33. EXAMPLES 33
34. サンプルアプリ 34
35. FLUTTERの弱点 35
36. コードが汚くなる︕ （言語特性上ネストが深くなる） 36
37. 超絶不快ネスト 37
38. FLUTTERで綺麗に組むための１つの解決策 38
39. 粒度を意識したコードの切り分け 39
40. 不快なネストを解決 40
41. FLUTTER FOR WEBのFIREBASEデプロイ 41
42. 前提①：flutterを利用できる環境にある(エミュレータはなくてもいい) 42 前提②：firebase CLIが入っている
43. ①flutter channel master ②flutter upgrade 43
44. ③ルートフォルダwebフォルダを作成しmain.dart.jsを指定したスクリプトタグをボディに入れたindex.htmlを作成 44
45. ④flutter build web 45
46. ⑤適宜ファイルを移動しfirebase deploy 46
47. 是非、皆さんもFLUTTEＲの世界に来てください
48. ありがとうございました