Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Y_Onishi
November 02, 2019

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

flutterは怖くないですよ!

Y_Onishi

November 02, 2019
Tweet

More Decks by Y_Onishi

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. 今日話す内容
    3

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. FLUTTERとは?
    8

    View full-size slide

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

    View full-size slide

  10. FLUTTER FOR WEBとは︖
    10

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. FIREBASEによる保存処理
    16

    View full-size slide

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

    View full-size slide

  18. 配置図(親子関係)
    19

    View full-size slide

  19. 配置図(画面例)
    20

    View full-size slide

  20. FLOATING
    ACITON BUTTON
    22

    View full-size slide

  21. ANIMATION処理
    28

    View full-size slide

  22. 利用パッケージ
    29

    View full-size slide

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

    View full-size slide

  24. 31
    フェードイン

    View full-size slide

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

    View full-size slide

  26. サンプルアプリ
    34

    View full-size slide

  27. FLUTTERの弱点
    35

    View full-size slide

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

    View full-size slide

  29. 超絶不快ネスト
    37

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. ①flutter channel master
    ②flutter upgrade
    43

    View full-size slide

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

    View full-size slide

  37. ④flutter build web
    45

    View full-size slide

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

    View full-size slide

  39. 是非、皆さんもFLUTTERの世界に来てください

    View full-size slide

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

    View full-size slide