PWANight Vol.31 Flutterで簡単PWA
•
0 j'aime•443 vues
PWAを誰でも、 確実に簡単に作る方法を 知りたくないですか？ こんなことありますよね？？ PWA を作りたいが、どうやって作ったらよいかわからない 設定や環境構築がわかりにくい、複雑で挫折した。 近年 Google 社リリースした Flutter に注目されています。 今回は Flutter とは？そしてその特徴とは？基本的なことを抑えて、ここでしか聞けない Flutter の将来性や PWA の作り方を解説いたします。
Recommandé
Contenu connexe
Similaire à PWANight Vol.31 Flutterで簡単PWA
Similaire à PWANight Vol.31 Flutterで簡単PWA (20)
PWANight Vol.31 Flutterで簡単PWA
- 2. バルテス・モバイルテクノロジーの紹介 2 バルテス・モバイルテクノロジー株式会社（略称：ＶＭＴ） VALTES MOBILE TECHNOLOGY CO.,LTD. 設立 2012年10月17日 代表取締役 西村 祐一 株主 バルテス株式会社（100％） 資本金 5,000万円 拠点 大阪本社、東京本社 業務内容 ソフトウェア開発、セキュリティ診断 コンセプト 高品質でセキュアなアプリケーションの開発・提供 テスト専門会社である親会社と連携し、開発へテスト力を付加し、 「高品質」で「セキュア」をキーワードに、サービス提供を行う。
- 3. アジェンダ ◼ 自己紹介 ◼ はじめに ◼ Flutterの特徴 ◼ FlutterでPWAをやってみよう ◼ まとめ
- 4. 自己紹介 4 名前 山下大輔（やました だいすけ） 所属 開発部 マネージャー 出身 横浜市青葉区（たまプラーザ） 住まい 宝塚市（兵庫県） 趣味 競馬、陸上 得意分野 ３D全般（３D/VR/AR、Unity、Unreal Engine） SNS Facebook：@longjumper.daisuke Instagram：@deepimpact_daisuke Twitter：@jumper_daisuke 資格 Monacaソムリエ、コーヒーインストラクター2級
- 6. はじめに ◼ こんなことありますよね？？ ◼ PWAを作りたいが、どうやって作ったらよいかわからない ◼ 設定や環境構築がわかりにくい、複雑で挫折した。 ◼ 近年Google社リリースしたFlutterに注目されています。 ◼ 今回はFlutterとは？そしてその特徴とは？基本的なことを抑え て、ここでしか聞けないFlutterの将来性やPWAの作り方を解 説いたします。
- 8. Flutterの特徴 ◼Flutterとは？ ◼ 2018年にGoogleがリリースしたモバイルフレームワーク ◼ 現在GooglePlayストアに登録される15万超えるアプリが Flutterで開発されている ◼ 開発言語はDart言語
- 9. Flutterの特徴 ◼Dartとは？ ◼ 2011年Googleからリリースされた言語 ◼ JavaScriptの代替として作られた ◼ TypeScriptに似ている ◼ 学習コストが低い ◼ JavaScriptの欠点を補う目的で作られている ◼ JavaScriptと文法構造がほぼ同じな為、比較的簡単に習得可能
- 10. Flutterの特徴 ◼Flutterの特徴 ◼ クロスプラットフォーム対応 ◼ 1ソースで開発できる ◼ Web、iOS、Androidアプリ開発が可能 ◼ Windows、MacOS、Linuxアプリも開発可能 ◼ ホットリロードが高速 ◼ プログラム変更時に瞬時にUIに反映 ◼ 更新速度はほかのフレームワークより高速 ◼ 表現豊かなUIに対応 ◼ Googleのマテリアルデザイン ◼ Appleのクパチーノ ◼ Widgetという独自UIで階層構造で管理
- 11. Flutterの特徴 ◼Dartとは最も学ぶべきでない言語？ ◼ 2019年時点で最も学ぶべきでない言語ランキング１位 ◼ コミュニティ・エンゲージメント１位 ◼ ジョブ・マーケティング１位 ◼ 総合ランキング１位
- 13. Flutterの特徴 ◼なぜ、注目度が上がったのか？ ◼ 大手企業が次世代開発にFlutterを採用 ◼ Canonical（カノニカル） ◼ Linux向けのデスクトップアプリ開発に取り組んでいる ◼ Snap Storeにて、デスクトップアプリを公開 ◼ Microsoft ◼ Surface Duo（折り畳み式Android端末）で利用 ◼ デュアルスクリーン向けのAPIをFlutterで開発 ◼ TOYOTA ◼ 次世代の車載器やシステムに関わるUXの設計・開発の 一部にFlutterを採用
- 15. ◼まずは開発環境 ◼ OS：Windows、MacOS、Linux、ChromeOS ◼ Visual Studio Code（以下VSCode）をインストール ◼ Flutter SDKをダウンロード ◼ VSCodeで拡張機能をインストール ◼ Dart ◼ Flutter ◼ Node.js Modules Intellisense ◼ Node.jsをインストール ◼ Firebaseのアカウント作成（Googleアカウント） FlutterでPWAをやってみよう
- 16. ◼プロジェクト作成 ◼ F1キーを押してFlutter:New Application Projectと入力 ◼ プロジェクトフォルダ選択 ◼ プロジェクト名を入力 FlutterでPWAをやってみよう
- 17. ◼Firebaseの設定 ◼ Firebaseのサイトにログイン ◼ プロジェクト作成 ◼ プロジェクトIDをメモっておく FlutterでPWAをやってみよう これがプロジェクトID
- 18. ◼VSCodeの設定 ◼ VSCodeにFirebase CLIをインストール ◼ npm install -g firebase-tools ◼ Firebaseにログイン：firebase login ◼ Firebaseの初期化して、先ほど作ったプロジェクト紐づけ ◼ firebase init ◼ Are you ready to proceed?(Y/n) Y ◼ Hosting Configure files…を選択 ◼ Please select an option: (Use arrow keys) ◼ Use an existing project ◼ Select a default Firebase project for this directory:プロジェクトID ◼ What do you want to use as your public directory? (public) build/web ◼ Configure as a single-page app (rewrite all urls to /index.html)? (y/N)N ◼ Set up automatic builds and deploys with GitHub? (y/N)N ◼ ビルド：flutter build web ◼ Firebaseデプロイ：firebase deploy FlutterでPWAをやってみよう
- 19. ◼VSCodeの設定 ◼ firebase.jsonを開いて下記を追加 { "hosting": { “site”:“FirebaseのプロジェクトID”, ← この一行を追加 "public": "build/web", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ] } } ◼ ビルド：flutter build web ◼ Firebaseデプロイ：firebase deploy FlutterでPWAをやってみよう
- 21. Flutterの特徴 ◼Flutterを使うメリット ◼ Adobe XDがFlutterをサポート ◼ デザインしたUIをプラグインでFlutterコードに変換 ◼ デザイナーとの親和性がアップ Adobe XD
- 23. Flutterの特徴 ◼Flutterで開発する上での注意点 ◼ Flutterのバージョンに注意 ◼ バージョンが異なると、ビルドが通らない ◼ 非推奨のメソッドが発生する ◼ 安易にバージョンアップせず、固定して開発する ◼ ネイティブ連携について ◼ 結果的にネイティブコードにはXcode、AndroidStudio での実装が必要 ◼ Android、iOSアプリを開発する時はMac環境で開発す る方が効率的に開発できる
- 24. まとめ ◼ Flutter（Dart）はJavaScriptと同じような物なので、学習コス トは低い。 ◼ 環境構築もすべて無料で出来る為、初期コストも不要 ◼ FlutterのプロジェクトはデフォルトでPWAになるので面倒な 設定は一切不要 ◼ Firebaseと相性が良い ◼ ビルド、デプロイも手間がかからない ◼ 大手企業も参入しているので、将来性はある。