MonacaでPWAを作ってデプロイしよう！~MonacaでPWAをとりあえず公開したい！！~
•
2 likes•2,041 views
MonacaでPWAを作ってデプロイしよう！~MonacaでPWAをとりあえず公開したい！！~
Recommended
More Related Content
What's hot
What's hot (20)
Similar to MonacaでPWAを作ってデプロイしよう！~MonacaでPWAをとりあえず公開したい！！~
Similar to MonacaでPWAを作ってデプロイしよう！~MonacaでPWAをとりあえず公開したい！！~ (20)
MonacaでPWAを作ってデプロイしよう！~MonacaでPWAをとりあえず公開したい！！~
- 2. バルテス・モバイルテクノロジーの紹介 2 バルテス・モバイルテクノロジー株式会社（略称：ＶＭＴ） VALTES MOBILE TECHNOLOGY CO.,LTD. 設立 2012年10月17日 代表取締役 田中 真史 株主 バルテス株式会社（100％） 資本金 5,000万円 拠点 大阪本社、東京本社 業務内容 ソフトウェア開発、セキュリティ診断 コンセプト 高品質でセキュアなアプリケーションの開発・提供 テスト専門会社である親会社と連携し、開発へテスト力を付加し、 「高品質」で「セキュア」をキーワードに、サービス提供を行う。
- 3. 自己紹介 3 名前 山下大輔（やました だいすけ） 所属 開発部 マネージャー 出身 横浜市青葉区（たまプラーザ） 住まい 宝塚市（兵庫県） 趣味 競馬、陸上 得意分野 ３D全般（OpenGL、DirectX、Unity） 得意だった言語 C++/C# ※プログラミングはみりゃわかる。 資格 Android技術者Basic、JSTQB FL Monacaソムリエ
- 4. 4 自己紹介
- 6. 6 • 今日のテーマ • 今日のゴール • Monacaについて • MonacaでPWAをFirebaseにデプロイする • MonacaでPWAをAzureにデプロイする • 最後に アジェンダ
- 11. 【Monacaの特徴】 ■Monacaとは？ – 日本で最も普及しているハイブリッドアプリ開発環境の一つです。 – Cordovaベースなので、多種多様のCordovaプラグインを利用できます。 – １ソースでiOS/Androidが同時に開発出来ます。 – Web技術（HTML5＋CSS＋JavaScript）で開発出来ます。 – PWAも開発出来ます。 11 Monacaについて
- 14. 14 MonacaでPWAをFirebaseにデプロイする 【デプロイを始める前に。。。】 ■事前準備 - Monacaのアカウントを作成 - フリーで作れます。（フリーだと、Cordovaプラグイン使えないけど） - Firebaseのアカウントを作成 - Sparkプランで無料で使えます。 - PWA等の簡単なWebアプリを試すのにうってつけ環境です。 安心してください、無料で出来ます。
- 22. 22 MonacaでPWAをFirebaseにデプロイする Firebase：API トークンの取得の為、 Firebase CLI ガイド に沿ってFirebase CLI をインストールします。
- 23. 23 MonacaでPWAをFirebaseにデプロイする Firebase CLIをインストールした後、次のコマンドにてトークンを取得する。 firebase login:ci --no-localhost 下記画面が表示されるので、アカウント選択し、『許可』を押下するし、表示されたコードをコピーします。
- 29. 29 MonacaでPWAをFirebaseにデプロイする MonacaクラウドIDEのメニューから、 ビルド → PWA アプリのビルド を選択する
- 31. 31 MonacaでPWAをFirebaseにデプロイする ビルドが終わったら、先ほど設定したデプロイサービスを選択し、 「デプロイボタン」を押下する。 完了したら、右下の絵のようになります。
- 35. 35 MonacaでPWAをAzureにデプロイする 【デプロイを始める前に。。。】 ■事前準備 - GitHubのアカウントを作成 - フリーで作れます。） - Azureのアカウントを作成 - FREEプランで無料で使えます。 - アプリ数１０で、ディスク領域１GBですが、試すには充分 安心してください、無料で出来ます。
- 38. 38 MonacaでPWAをAzureにデプロイする 『GitHubアカウント連携する』のメニューを選択し 「GitHubと連携する」押下する 右の画面で「Authorize monaca」を押下する
- 63. 63 MonacaでPWAをAzureにデプロイする 【Azureでデプロイする上での注意事項】 - PWAに必須のManifestファイル（JSONファイル）は、Azure Web Appsの仕様で、web.configというXMLを作成して設定し ないとJSONが配信できず403 Forbiddenとなる。 - アプリケーションのルートディレクトリに Web.config という整形済 みのXMLファイルである必要があります。 - Web.config ファイルには、最低でも <configuration> 要素と <system.web> 要素を含める必要があります。これらの要素には、 個別の構成要素が含まれます。
- 64. 64 MonacaでPWAをAzureにデプロイする 【Azureでデプロイする上での注意事項】 - web.config <?xml version="1.0" encoding="UTF-8" ?> <configuration> <system.webServer> <staticContent> <remove fileExtension=".json" /> <mimeMap fileExtension=".json" mimeType="application/json" /> </staticContent> </system.webServer> </configuration>
- 65. 65 最後に 【最後に】 - Monacaを使ってPWAをFirebase、Azureに無料でデプロイ出 来る！ - Azureにデプロイするには別途GitHubとの連携とルートディレクトリ に Web.config（*.xml）を作成する必要あり！ - MonacaでPWAを作るのはちょっとめんどくさい - Azureにデプロイするのはもっとめんどくさい - MonacaでPWAをFirebaseにデプロイするのはちょっと便利 - MonacaじゃなくてもPWAは作れる。だからMonacaがもっと便利 なればいいのに。