【Vivaldi】サイトをアプリ化できるPWAの使い方・設定方法

2021年10月9日Vivaldi

Vivaldiのアイコン

この記事では、2021年10月7日にアップデートした「Vivaldi4.3」で追加されたPWA(プログレッシブウェブアプリ)の使い方について書きます。

PWAとは、ウェブサイトを独立したアプリケーションとして利用する機能です。

Vivaldi4.3(2021年10月7日)で実装されたPWA(Twitter)のスクリーンショット

2021年10月7日に「Vivaldi」は、バージョン4.3になりました。主に追加された機能は、以下の5点です。今回のアップデートは、「新機能の追加!」というよりは、色々な部分の改善って印象です参考リンク

  • 新しいキャプチャUI
  • 同期UIの改善
  • ダウンロードパネルの改善
  • 「Idle API」のデフォルト無効化
  • 「PWA(プログレッシブウェブアプリ)」に対応

本記事では、「PWA(Progressive Web Apps)」とは何かについてと、設定方法について書きます。初心者でもサクっとPWA化できます。

Vivaldi4.3から追加されたPWAとは?

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

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

タスクバーにピン留めしたり、デスクトップにショートカットアイコンを作成して、簡単にアクセスできるようになります。「ブックマークから、Twitterを探してクリックする~」の手間が省けます。

メリットは、以下のとおりです。

  • ツールバー(タブバー、アドレスバー、ブックマークバー)が非表示になって、大きい画面でサイトを閲覧できる
  • Ctrl+Tabを押した時に、独立したアプリになっているので選択しやすい(アクティブにしやすい)
  • タスクバーやスタートメニューにピン留めできる
  • Windows起動時に自動起動するスタートアップに登録できる
  • メインモニターにVivaldiブラウザ、サブモニターにTwitter(PWA)と分けられる
  • ベースはウェブサイトなので、拡張機能を利用できる(広告ブロッカー、CSS)
  • 外観はアプリなので、ウィンドウサイズを自由に変えられる
  • CLaunch」などのアプリランチャーに登録できる

全くアクセスしないサイトをPWAにしても恩恵が少ないです。頻繁にアクセスするサイトで利用するのがいいと思います。

ただし、PWAにもデメリットがあります。以下のとおりです。

  • Vivaldiのキーボードショートカットキーが使えない
  • Vivaldiのマウスジェスチャーが利用できない
  • サイドバーなどツールバー関連が使えない

拡張機能は動作します。Vivaldi内蔵の機能の一部が利用できません。「ブラウザとは異なるアプリ」ってくらいの認識がいいかなと思います。

PWAのインストール方法

Vivaldi4.3」(2021年10月7日公開)以降で利用できます。アップデートしていない方は、アップデートすることで利用できます。

アップデートすると、タブバーのタブの右クリックメニューに、「PWA」インストールボタンが追加されます。「PWA」は、ウェブサイト側が対応していることが前提ですが、Vivaldiでは、非対応サイトでもPWA風(ショートカット)にできます。

本記事では、PWA対応サイトと非対応サイトでの2パターンを紹介します。基本的には一緒の方法です。

対応サイトでPWA化する方法

「PWA」にしたいサイトを開きます。試しに、2022年10月にイーロン・マスク氏に買収されたSNS「Twitter」で試してみます。

開けたら、タブバーにあるTwitterタブを右クリックします。「プログレッシブウェブアプリ」→「Twitter(サービス名)をインストール…」をクリックします。

TwitterサイトをPWA(プログレッシブウェブアプリ)にする手順画像1

「〇〇をインストール」という項目がある場合、そのサイトは対応しているということです。Twitterは対応しています。

僕の場合、コンテキストメニューをカスタマイズしていたため、非表示になっていました。

設定→外観→「メニューのカスタマイズ」を「タブ」にします。

右のメニューから、「[すべてのプログレッシブウェブアプリ]」を探して(検索したら早いです)、左側へドラッグ&ドロップすることで追加できます。

Vivaldi設定:外観:メニューのカスタマイズ
【ポイント】カスタマイズによっては階層が異なる

人によっては、「プログレッシブウェブアプリ」という表記ではなく、直接「〇〇をインストール」という表示になっている場合があります。

プログレッシブウェブアプリメニューが親階層にある画像

右クリックメニューのカスタマイズで、「サブフォルダーとして表示」にしているかどうかで異なってきます。頻繁にサイトをPWAにする方は、チェックを外しておくといいかなと思います。

「サブフォルダーとして表示」画像

「アプリをインストールしますか?」というダイアログが表示されるので、「インストール」をクリックします。

TwitterサイトをPWA(プログレッシブウェブアプリ)にする手順画像2

「Twitter」がアプリ化されます。使い方は、ブラウザで開いた時と一緒です。デスクトップにアイコンが作成されるので、クリックで起動します。

TwitterサイトをPWA(プログレッシブウェブアプリ)にした画像

アドレスバー、タブバー、ブックマークバーなどのツールバーは表示されません。サイドバー(パネル)もです。ウェブサイトのみのシンプルなウィンドウです。余計な要素がないので、大きく画面を有効活用できます。

ウィンドウサイズは自由に変更可能です。ブラウザのタブだと、他のサイトも一括でウィンドウサイズが変わりますよね。PWAにすることで、そのサイトだけのウィンドウサイズを変更できます。ブラウザ本体には影響しません。

PWAにしたTwitterのウィンドウサイズを変更しているGIF画像

Windowsのウィンドウスイッチャー(Alt+Tab)で、ブラウザ本体と別で表示されます。

Windows11のウィンドウスイッチャー(Ctrl+Tab)画像

PWAにしていない場合は、ブラウザを選択→開いているタブの中から、目的のサイトを選択する…の流れですが。PWAにすることで、Alt+Tabで、直接アクティブにできます。見つけやすくなります。

非対応サイトでPWA化する方法

非対応サイトの場合は、ショートカットを作成することで、パッと見をPWAにできます。

PWAにしたいサイトを開きます。例えば、Twitterの公式アプリ「TweetDeck」で試してみます。「TweetDeck」は、PWA非対応です。(2022年11月時点)

タブの右クリック→「プログレッシブウェブアプリ」→「ショートカットを作成」をクリックします。非対応なので「〇〇をインストール…」という文言はありません。

TweetDeckをPWAにする手順画像1

デフォルトでタブ名が入力されています。変更したい場合は、好きな名前を入力します。その下にある「ウィンドウとして開く」にチェックを入れて、「作成」をクリックします。

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

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

「ウィンドウとして開く」にチェックしなかった場合のTweetDeck画像

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

PWAと同じように、単体のアプリとして利用できます。

TweetDeckをPWAにしたスクリーンショット

PWAの便利情報

「これ知ってたら便利かも?」という豆知識について書きます。

Chrome拡張機能の利用

PWA(アプリ化)していても、Chrome拡張機能は利用できます。「uBlock Origin」などの広告ブロッカーや、CSSを適用できる「Stylebot」などを利用できます。

ポップアップ上で動作する拡張機能は、PWAアプリを起動→右上のパズルアイコン→利用したいChrome拡張機能をクリックすることで利用できます。

PWAのヘッダーにある拡張機能メニュー画像

拡張機能のポップアップが表示されます。

Google翻訳拡張機能のポップアップのスクリーンショット
PWAでも問題なく、Google翻訳(Chrome拡張機能)を利用できる

ただし、ブラウザのようにChrome拡張機能ボタンを表示・隠すことはできません。アプリ内をクリックすると、自動でChrome拡張機能のボタンが隠れて、パズルアイコンになります。

タスクバー・スタートメニューへのピン留め

タスクバーやスタートメニューにピン留めできます。ブラウザの場合、Vivaldi本体はピン留め可能ですが、特定のサイトのピン留めはできません。PWAだと可能です。

アプリを起動して、タスクバーのアイコンを右クリック→「タスクバーにピン留めする」をクリックします。

タスクバーにあるPWAアプリ(Twitter)の右クリックメニュー

ドラッグ&ドロップで、好きな場所に配置できます。

タスクバーのアプリをドラッグ&ドロップで移動しているGIF画像

タスクバーにピン留めすることで、Windows+数字のショートカットキーを利用できます。左から1番となっていて、キーだけでアプリ起動できます。例えば、タスクバーの左から6番目に「Twitter PWA」を配置した場合は、Windows+6で起動できます。

参考:【Windows】ショートカットキーの使い方。覚えると作業効率UP

「vivaldi://apps」で一覧表示

Vivaldiを起動して、以下のURLをアドレスバーに貼り付けます。

vivaldi://apps

PWA化しているアプリや一部拡張機能がアイコン表示されます。クリックで起動できます。

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

右クリックを押すと、メニューが表示されます。削除、ウィンドウとして開く、ログイン時に自動起動などの設定ができます。PWA作成時の「ウィンドウとして開く」にチェックしていなかった場合でも、ここで再設定できます。

インストールしたPWAアプリの右クリックメニュー

沢山のアプリを切り替えるという人は、「vivaldi://apps」をブックマークに登録するのもアリです。

参考:【Vivaldi】ブックマークにニックネームと説明を付ける方法。2つのポイントを意識してみよう

アンインストール(削除)

PWAを削除する時は、アプリを起動→右上のケバブメニュー(︙)→「〇〇〇」をアンインストールをクリックします。

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

スタートアップに登録して自動起動

Windows起動時に、一緒に自動起動させることができます。「ブラウザは、手動で起動するけど、Twitterサイトは毎日見るから、起動時に立ち上げてほしい!」という場合に便利です。

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

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

shell:startup

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

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

感想

以上、Vivaldi4.3で実装された「PWA(プログレッシブウェブアプリ)」の解説・インストール方法についてでした。

個人的には、以下のサイトがPWAに便利だと思います。

  • Twitter
  • TweetDeck
  • DeepL翻訳
  • Twitch

Posted by ナポリタン寿司