【Chrome】ウェブサイトをPWA化(アプリ化)する方法

Chrome

Chromeのアイコン

この記事では、Chromeブラウザで開いたウェブサイトを、独立したウィンドウアプリとして利用できる「PWA(プログレッシブウェブアプリ)」にする方法について書きます。

【Chrome】ウェブサイトをPWA化(アプリ化)する方法

PWA対応サイトの場合は、アドレスバー横のダウンロードをクリックすることで、インストールできます。

非対応サイトの場合は、ブラウザ右上のケバブメニュー(︙)→その他のツール→「ショートカットを作成」を押します。「ウィンドウとして開く」にチェックを入れることで、PWA化できます。

PWAにすることで、ウェブサイトを独立させて、アプリケーションのように利用できます。よく見るサイトや「Twitter」などのSNSを、ブラウザから独立して、1つのアプリ(ソフト)として利用できます。

タスクバーにピン留めしたり、デスクトップにショートカットアイコンを作成して、簡単にアクセスできるようになります。タブバー、ブックマークバー、アドレスバーなどのブラウザの要素が表示されなくなるので、大画面でサイトを閲覧できます。

「Progressive Web Apps」と呼ばれていて、日本語では「プログレッシブウェブアプリ」と呼びます。略して「PWA」です。

【Chrome】ウェブサイトをPWA化(アプリ化)する方法

アドレスバーの横にアイコンがある場合

PWAをインストールするには、サイトが対応している必要があります。対応しているサイトの場合、サイトにアクセスすると、アドレスバーの右端に「ダウンロード」ボタンが表示されます。

試しに「Twitter」をPWA化してみます。サイトにアクセスしてボタンをクリックします。

TwitterをPWAにする手順画像1

「インストール」をクリックします。

TwitterをPWAにする手順画像2

「Twitter」がPWAになります。独立したウィンドウになり、余計な要素が全部消えます。画面を最大限活用して、Twitterライフを過ごせます。

TwitterをPWAにした画像

デスクトップにショートカットが作成されます。今後は、そのアイコンをダブルクリックすることで起動できます。

タスクバーにあるアイコンを右クリックで、ピン留めできます。

PWAにしたTwitterアイコンの右クリックメニュー

アドレスバーの横にアイコンがない場合

非対応サイトの場合は、アクセスしてもアドレスバーの右端にアイコンが表示されません。

PWA非対応サイトのアドレスバー画像

その場合は、ブラウザ右上のケバブメニュー(︙)→その他のツール→「ショートカットを作成」を押します。

TweetDeckをPWAにする手順画像1

好きな名前を設定します。デフォルトでサイト名が入力されているので、そのままでもOKです。「ウィンドウとして開く」にチェックを入れて、「作成」をクリックします。

TweetDeckをPWAにする手順画像2
【ポイント】「ウィンドウとして開く」にチェックしなかった場合

「ウィンドウとして開く」にチェックしなかった場合、通常のショートカットリンクになってしまいます。タブバーやサイドバーなどが普通に表示されます。

TweetDeckのスクリーンショット

チェックを入れることで、独立したウィンドウにしてくれます。もし、チェックを入れ忘れて作成した場合でも大丈夫です。後からいつでも変更できます。こちらで解説します。

これで対応サイトと同じように、非対応サイトをPWAにできます。

TweetDeckをPWAにした画像

PWAをアンインストールする方法

右上のケバブメニュー(︙)→「〇〇」をアンインストールをクリックします。

Twitter(PWA)をアンインストールする手順画像

「chrome://apps/」でアプリ一覧を表示

今までインストールしたPWAアプリを一覧表示したい場合、Chromeを起動して、アドレスバーに以下のURLを入力します。

chrome://apps/

現在PCにインストールしているPWAアプリが一覧表示されます。PWA以外にも、いくつかのブラウザ内蔵アプリが表示されます。

「chrome://apps/」のスクリーンショット

右クリックでメニューを表示します。この中の「ウィンドウとして開く」で、PWAにするか、ただのショートカットリンクにするか設定できます。チェックし忘れた方でもここで再チェックできます。

「chrome://apps/」にあるアプリの右クリックメニュー

スタートアップに登録して自動起動する方法

Windows起動時に、一緒に自動起動することも可能です。

登録したいPWAのショートカットを用意します。デフォルトでは、PWA作成時にデスクトップにリンクが作成されます。もし削除してしまった場合は、「chrome://apps/」をブラウザで開いて、アプリアイコンを右クリック→「ショートカットを作成」を押します。

準備できたら、エクスプローラーを開きます。アドレスバーに以下のパスを貼り付けて、Enterを押します。

shell:startup

スタートアップフォルダーが開くので、ここにPWAのショートカットを配置します。これで、Windows起動時に自動起動してくれます。

エクスプローラーでスタートアップフォルダー(shell:startup)を開いた画像

感想

以上、ChromeブラウザでPWA(プログレッシブウェブアプリ)を作成する方法でした。

TwitterやTweetDeckあたりが便利です。情報収集が捗ります。

Posted by ナポリタン寿司