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

flutterは怖くないですよ！

Transcript

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

   View Slide

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

   View Slide

3. 今日話す内容
   3
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. FLUTTERとは？
   8
   

   View Slide

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

   View Slide

10. FLUTTER FOR WEBとは︖
    10
    

    View Slide

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
    

    View Slide

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

    View Slide

13. FLUTTERの基本的な組み方
    13
    

    View Slide

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

    View Slide

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

    View Slide

16. FIREBASEによる保存処理
    16
    

    View Slide

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

    View Slide

18. 配置図
    18
    

    View Slide

19. 配置図（親子関係）
    19
    

    View Slide

20. 配置図(画面例)
    20
    

    View Slide

21. SCAFFOLD
    21
    

    View Slide

22. FLOATING
    ACITON BUTTON
    22
    

    View Slide

23. TEXT
    23
    

    View Slide

24. CENTER
    24
    

    View Slide

25. COLUMN
    25
    

    View Slide

26. ROW
    26
    

    View Slide

27. GRIDVIEW
    27
    

    View Slide

28. ANIMATION処理
    28
    

    View Slide

29. 利用パッケージ
    29
    

    View Slide

30. 30
    水玉が流れるサンプル
    

    View Slide

31. 31
    フェードイン
    

    View Slide

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

    View Slide

33. EXAMPLES
    33
    

    View Slide

34. サンプルアプリ
    34
    

    View Slide

35. FLUTTERの弱点
    35
    

    View Slide

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

    View Slide

37. 超絶不快ネスト
    37
    

    View Slide

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

    View Slide

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

    View Slide

40. 不快なネストを解決
    40
    

    View Slide

41. FLUTTER FOR WEBのFIREBASEデプロイ
    41
    

    View Slide

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

    View Slide

43. ①flutter channel master
    ②flutter upgrade
    43
    

    View Slide

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

    View Slide

45. ④flutter build web
    45
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide