居酒屋で使えそうなゲームを FLUTTER FOR WEBで作った話

自己紹介 Name : 大西優司 (Yuji Onishi) 株式会社Eduphile IT事業部長 執行役員（関西でflutterを広げたい人） Birthday : 1991/8/6 Mail : [email protected] 趣味︓作曲・楽器演奏・カメラ撮影・読書・電子ゲーム・アナログゲーム 略歴︓ 新卒で就職した教育系の会社で、個別指導塾の教室長として生徒数100名弱の 地域基幹教室で勤務し、30名の講師のマネジメントを行う。教室勤務の他に企画 業務と講師採用業務を経験した後にプログラマーに転職し、医療用パッケージアプリ 開発を行う。 2018年4月に小中高向け個別指導塾を運営する会社を設立し、部下育成・組 織開発を行う。担当業務は教務・教室管理・上級プログラミング教育カリキュラム策 定・内製アプリケーション開発マネジメント。 現在は執行役員として勤務する傍ら、フ リーランスとして講師業やエンジニアなど活動を広げている。 2

今日話す内容 3

・自己紹介 ・今回組んだサンプルアプリの紹介 ・FLUTTERとは ・FLUTTER FOR WEBとは ・FLUTTERをどう組むのか ・ANIMATIONの処理 ・FLUTTERの弱点 ・FLUTTERを美しいコードにするためのある解決策 ・FLUTTER FOR WEBのFIREBASEデプロイ 4

サンプルアプリ機能説明 5

こ の ゲ ー ム は 、 2 人 以 上 の プ レ イ ヤ ー で 遊 ぶ ゲ ー ム で す 。 １ つ の タ ー ン に お い て 、 「 濁 点 の 多 い メ ニ ュ ー は ︖ 」 な ど の お 題 が 与 え ら れ ま す の で 、 飲 食 店 な ど の メ ニ ュ ー を 使 用 し 、 そ の 中 か ら 回 答 を 探 し だ し ま す 。 ま ず 、 そ れ ぞ れ の プ レ イ ヤ ー へ 順 番 に 制 限 時 間 が 与 え ら れ ま す 。 こ の 与 え ら れ た 制 限 時 間 内 に 、 メ ニ ュ ー か ら お 題 に あ っ た 回 答 を 探 し ま す 。 全 員 回 答 が 終 了 し ま し た ら 、 次 は 発 表 で す 。 画 面 に 回 答 さ れ た 内 容 が 表 示 さ れ ま す の で 、 最 も ア ナ ウ ン ス が 得 意 と さ れ る 人 が 、 プ レ イ ヤ ー の 回 答 を 発 表 し ま す 。 発 表 が 終 わ り ま し た ら 、 最 後 に 投 票 を 行 い ま す 。 画 面 に 全 プ レ イ ヤ ー の 名 前 が 表 示 さ れ ま す の で 、 お 題 に そ っ て 、 全 員 で 話 し 合 い を し て 投 票 先 を 決 定 し て く だ さ い 。 こ の 一 連 の 流 れ を 繰 り 返 し 、 最 も 投 票 さ れ た プ レ イ ヤ ー が 勝 者 と な り ま す 。 6

7 居酒屋のメニューを利用したゲーム

FLUTTERとは？ 8

Flutter (フラッター) は Googleによって開発された フリーかつオープンソースの モバイルアプリケーションフレームワークである。 AndroidやiOS向けのアプリケーションの開発に利用されている。 Wikipediaより 9

FLUTTER FOR WEBとは︖ 10

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

Flutterを利用したウェブサポート！ 12

FLUTTERの基本的な組み方 13

UI設計 14 FLUTTERのUI設計は 様々なウィジェットによって構成されている。 FLUTTERのウィジェットはUIの不変な部分を表し テキスト・図形・アニメーションなどを含む全てのグラフィック はウィジェットを使用して描画を行う。 多くの単純なウィジェットを組み合わせることで、複雑なウィ ジェットを作成することができる。 WIKIPEDIAより

Widgetの組み合わせによってviewを構築する︕ 15

FIREBASEによる保存処理 16

パディング付きのテキストフィールド 17

配置図 18

配置図（親子関係） 19

配置図(画面例) 20

SCAFFOLD 21

FLOATING ACITON BUTTON 22

TEXT 23

CENTER 24

COLUMN 25

ROW 26

GRIDVIEW 27

ANIMATION処理 28

利用パッケージ 29

30 水玉が流れるサンプル

31 フェードイン

examplesそのままの設定でかなりリッチな動作をしてくれる︕ 32 今回は汎用化して外部から使いやすいWidgetとして実装しました

EXAMPLES 33

サンプルアプリ 34

FLUTTERの弱点 35

コードが汚くなる︕ （言語特性上ネストが深くなる） 36

超絶不快ネスト 37

FLUTTERで綺麗に組むための１つの解決策 38

粒度を意識したコードの切り分け 39

不快なネストを解決 40

FLUTTER FOR WEBのFIREBASEデプロイ 41

前提①：flutterを利用できる環境にある(エミュレータはなくてもいい) 42 前提②：firebase CLIが入っている

①flutter channel master ②flutter upgrade 43

③ルートフォルダwebフォルダを作成しmain.dart.jsを指定したスクリプトタグをボディに入れたindex.htmlを作成 44

④flutter build web 45

⑤適宜ファイルを移動しfirebase deploy 46

是非、皆さんもFLUTTEＲの世界に来てください

ありがとうございました