中津川篤司TwitterFacebookはてブPocketLINEMonacaはHTML5/CSS/JavaScriptを使ってスマートフォンアプリを開発します。ネイティブのプラグインも使えますが、基本的にはWeb標準の技術を用います。そのため、アプリのコードをWebサイトでも使いたいという声をよく聞きます。PWAは特定の技術ワードという訳ではなく、Webアプリケーションをよりスマートフォンアプリに近づけるためのベストプラクティス集といった位置づけになります。先日、MonacaがPWA開発に対応しました。今回はその基本的な使い方と、一歩発展させたTipsを紹介します。MonacaのPWA機能についてMonacaではPWA向けに以下の機能が提供されます。マニフェストファイルの編集機能PWAは一般的にmanifest.jsonというファイルで提供されます。MonacaではこのマニフェストファイルをGUI上で編集したり、アイコンの一括適用をしたりすることができます。HostingへのデプロイPWAはWebサイトの一種なので、アプリではなくWebサーバ上にデプロイする必要があります。IDEから直接デプロイすることもできます。MonacaでPWAプロジェクトを作成ではPWA開発の最初の一歩です。最小限のPWAテンプレート)を用いた方法です。以下のPWA向け設定が組み込まれた状態のプロジェクトになります。今回はこのテンプレートファイルを用います。Firebaseの管理コンソールを表示して、プロジェクトを作成します。このとき、プロジェクトIDが生成されます(矢印部)。このIDはMonacaとの連携設定をする際に必要になるので覚えておきます。CLIをインストールします。フリープランの場合はターミナル機能が使えませんので、ローカルで実行します(Node.jsが必要です)。-SそしてAPIキーを取得します。--no-localhostコマンドを入力するとURLが表示されますので、そのURLを開きます。するとGoogleのログイン画面が表示されます。ログインを実行するとAPIキーが表示されます。これを忘れないようにメモしておきます。IDEの「設定」>「デプロイサービス」を選択し、デプロイ先としてFirebaseを選択します。先ほどメモしたAPIキーとプロジェクトIDを入力します。エイリアス名は分かりやすい任意の名称を設定します。Hostingにデプロイするではデプロイを試してみましょう。IDEで「ビルド」>「PWAアプリのビルド」を選択します。完了するとZipファイルがダウンロードできる他、Firebaseへのデプロイボタンも表示されます。Hosting上に反映されます。Pagesへのデプロイ方法も紹介します。IDEのターミナルでプロジェクトをGitHubリポジトリにプッシュしておきます。Monaca搭載のGitHub連携機能では、以下に紹介するデプロイ機能は使えないので注意してください。Pagesへコードをプッシュしてくれるライブラリをインストールします。Pagesにデプロイするデプロイの実行は簡単で、以下のコマンドをターミナルで叩くだけです。deployこのコマンドはwww以下をGitHubのgh-pagesブランチにプッシュします。Pages上にPWAアプリがデプロイされます。Workerを使ったキャッシュによる表示高速化であったり、オフライン対応、Webプッシュ通知など魅力的な機能がたくさんあります。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。今日の晩ご飯はどうする?Monaca×楽天レシピAPI...2018年3月9日ジオフェンシングにも最適。