Secura Vita

Category: Blog , アプリ・サービス
Blog

よく使うWebサイトをアプリ化!ChromeとEdgeでPWAとしてPCにインストールする方法

よく使うWebサイトをアプリ化!ChromeとEdgeでPWAとしてPCにインストールする方法

よく使うあのウェブサイト、ブラウザのタブじゃなくてアプリみたいにサクッと開けたらいいのに…って思ったことないですか?

私はあります!

YouTubeやSpotifyなどはPWA(Progressive Web App)に公式で対応しているのですが、そうじゃないサイトも多くて諦めていたんです。

ところが、公式対応していないサイトもアプリ化できる方法があることを知り、さっそく試してみたところめちゃくちゃ便利になりました!

PWAとは

PWAとはProgressive Web Appの略で、ウェブサイトをアプリのように使えるようにする技術のことです。

ウェブサイトなのに、PCのデスクトップやスタートメニューにアイコンができて、クリック一つで開けるようになるので超便利です!

公式で対応しているサイトの場合

アプリ化に対応しているサイトは、アドレスバーの右端にアイコンが表示されるので、それをクリックすれば簡単にインストールできます。

Chrome

PAW Chrome

Edge

PAW Edge

インストールが終わると、こんな風にちゃんとアプリとして登録されます。

PAW

公式非対応サイトでもアプリとしてインストールする裏技

私が諦めていた、公式ではPWAに対応していないサイトのアプリ化です。いよいよ本番です。

Chromeで行う場合

まず、アプリ化したいサイトを開いてから、メニューボタン「」をクリックします。

メニューの中から「キャスト、保存、共有」にマウスを合わせ、「ページをアプリとしてインストール」をクリックしてください。

PAW

アプリ名を確認して「インストール」をクリックします。

名称を変更したい場合は、この画面で行うことができます。

PAW
アプリのアンインストール

アンインストールする場合は、まずアプリを立ち上げます。

メニューボタン「」をクリックすると、メニュー内に「○○○をアンインストール」という項目が出てくるので、それをクリックします。

PAW

確認画面が表示されるので「アンインストール」をクリックすることでアンインストールできます。

Chromeからこのアプリのデータを削除する」にチェックを入れると、ログイン情報などが削除されてしまうので注意してください。

PAW
アプリの設定変更

アプリの設定を変更するには、メニューボタン「」をクリックして、メニュー内の「アプリ情報」→「設定」と進むと、Chromeで設定変更ページが開きます。

PAW
PAW

あまり細かいことはできませんが、通知の許可や権限などを編集できます。

Edgeで行う場合

まずアプリ化したいサイトを開いたうえでメニューボタン「」をクリックします。

メニューの中から「その他ツール」→「アプリ」→「このサイトをアプリとしてインストール」をクリックします。

PAW

アプリ名を確認して「インストール」をクリックします。

名称を変更したい場合はここで行います。

Chromeではできなかったアイコンの変更も可能です。これは嬉しいポイントですね。

PAW
アプリのアンインストール

アンインストールする場合は、まずアプリを立ち上げます。

メニューボタン「」をクリックすると、メニュー内に「アプリ設定」という項目が出てくるので、それをクリックします。

PAW

するとアプリの設定ページがEdgeで開きます。

PAW

この中に「アンインストール」があるので、それをクリックすればアンインストールできます。

PAW

Chromeと同様に確認画面が表示されるのでアンインストールしてください。

アプリデータ削除もChromeと同様にできます。

アプリの設定変更

設定の変更は、上の手順で設定ページを開けば、権限設定を含めていろんな設定変更ができます。

Chromeと違うのは、アプリのショートカットをどこに置くか(タスクバーなど)もここで変更できることですね。

  • タスクバーにピン留め
  • スタートメニューにピン留め
  • デスクトップにショートカットを作成

ちなみに、タスクバーやスタートメニューへのピン留めは、わざわざ設定画面までいかなくてもアプリのメニュー内にあるので、これがかなり便利です。

サイト内ディレクトリもそのままアプリ化できる

これの便利なところは、サイト内の特定のページ(ディレクトリ)をアプリ化できるところです。

例えば、私がやってるのは「Amazon Primeビデオをアプリ化する」っていう使い方です!

PrimeビデオのURLは「https://www.amazon.co.jp/gp/video/storefront/」みたいに、あくまでAmazonのトップページ(`https://www.amazon.co.jp/`)の中にあるページなのです。

Prime Video:映画、TV番組、スポーツ番組、ライブTVを視聴できます

だけど、これを直接「Primeビデオアプリ」として登録できるということです!

これは超便利!

Primeビデオのページを開いたうえで、上記の方法を行えば簡単にPrimeビデオアプリの出来上がりです。

しかもEdgeの場合はアイコンも変更できるので、本当にネイティブアプリのように使えます。

PAW

この画像にあるPrime VideoはPWAです。ネイティブアプリっぽいでしょ?

こうやって見ると、やっぱりEdgeでアプリ化する方が使いやすいと思います。

アプリとして使うので、Chrome,Edgeと分けて使ってる感覚もあまりありません。

このディレクトリをアプリ化しても、そこから普通に上の階層(アカウントページとかショッピングページ)にも行けます。

そこからPrimeビデオのホームに戻りたい場合は、上部に表示されてる「☓(閉じる)」ボタンやPrimeビデオのロゴをクリックすることで戻ってこれます。

PAW

PrimeビデオにはWindows用のアプリもあるのですが、私はブラウザ版を使ったほうが何かと都合が良かったんです。

だからこれまではFireFoxをPrimeビデオ専用ブラウザとして使っていたのですが、ページをPWA化できることを知り、今はEdgeのPrimeビデオページをPWA化して使っています。

画面全体を拡大縮小できたり、拡張機能(アドオン)をそのまま使えたりで、これが本当に便利なのです!

Edgeだとアイコンまで変更できるから、見た目もバッチリでめちゃくちゃ満足しています。

気になる方はぜひお試しを!超簡単なのでサクッとできます。

※PrimeビデオはPCだと4K/HDRの動画を再生できないので、PCモニターにFire TV Stickを接続して見るのもおすすめです。


おもしろかった・役に立った
▼ブログランキング参加中!クリック!▼
  • ブログランキング・にほんブログ村へ
  • FC2ブロクランキング

Leave a comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ソースコードを記入する場合は [code]~[/code] でくくってください。
[code]
echo "Hello World";
[/code]

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください