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

D834554b75b41740cc7397806a3eae2f?s=47 Y_Onishi
November 02, 2019

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

flutterは怖くないですよ!

D834554b75b41740cc7397806a3eae2f?s=128

Y_Onishi

November 02, 2019
Tweet

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 人 以

    上 の プ レ イ ヤ ー で 遊 ぶ ゲ ー ム で す 。 1 つ の タ ー ン に お い て 、 「 濁 点 の 多 い メ ニ ュ ー は ︖ 」 な ど の お 題 が 与 え ら れ ま す の で 、 飲 食 店 な ど の メ ニ ュ ー を 使 用 し 、 そ の 中 か ら 回 答 を 探 し だ し ま す 。 ま ず 、 そ れ ぞ れ の プ レ イ ヤ ー へ 順 番 に 制 限 時 間 が 与 え ら れ ま す 。 こ の 与 え ら れ た 制 限 時 間 内 に 、 メ ニ ュ ー か ら お 題 に あ っ た 回 答 を 探 し ま す 。 全 員 回 答 が 終 了 し ま し た ら 、 次 は 発 表 で す 。 画 面 に 回 答 さ れ た 内 容 が 表 示 さ れ ま す の で 、 最 も ア ナ ウ ン ス が 得 意 と さ れ る 人 が 、 プ レ イ ヤ ー の 回 答 を 発 表 し ま す 。 発 表 が 終 わ り ま し た ら 、 最 後 に 投 票 を 行 い ま す 。 画 面 に 全 プ レ イ ヤ ー の 名 前 が 表 示 さ れ ま す の で 、 お 題 に そ っ て 、 全 員 で 話 し 合 い を し て 投 票 先 を 決 定 し て く だ さ い 。 こ の 一 連 の 流 れ を 繰 り 返 し 、 最 も 投 票 さ れ た プ レ イ ヤ ー が 勝 者 と な り ま す 。 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で綺麗に組むための1つの解決策 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. 是非、皆さんもFLUTTERの世界に来てください

  48. ありがとうございました