【Vivaldi】4.3で追加されたPWAの使い方・設定方法

2021年10月9日Vivaldi

Vivaldiのアイコン

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

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

Vivaldi4.3で実装されたPWA Twitter

2021年10月7日にVivaldiは、バージョン4.3になりました。

主に追加された機能は、以下の5点です。

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

今回のアップデートは、「新機能の追加!」というよりは、色々な部分の改善って印象です

僕的には、Idle APIのデフォルト無効化とPWAが印象深いです。

ということで本題のPWAに入る前に、ちょっとIdle APIについて書きます。

本題のPWAについて知りたい場合は、こちらへ飛んでください。

Idle APIなんて、僕みたいな初心者さんは、そもそも聞いたことがない単語だと思います。「知ったところで何?」って話ですが、知識として知っておくといいかなぁと思います。

Idle APIについて

chrome://settings/content/idleDetection デバイスのアクティブ状態

Idle APIとは?

Idle APIとは、デバイスの使用者のアイドル状態(アクティブ状態)を識別し、それに応じたサービスを提供する機能です。

アイドル状態は、以下のような項目で判断しています。

  • キーボードが入力されているかどうか
  • マウスが動いているかどうか
  • スクリーンセーバーが起動しているかどうか

2021年9月後半にアップデートしたGoogle Chrome バージョン94から実装されました。

簡単に言うと、「使用者が、今パソコンを触っているのかどうかをGoogleが収集して、それに合ったサービスを提供するよ!」ってことです。

サービスってのは、例えば、パソコンを操作している時だけメール通知が来るようにして、席を立っている時は通知をオフにする…といった感じです。

一見便利に見えるサービスですが、懸念点もあるようです。

それは、ユーザーの使用パターンの情報を収集するということなので、流出した際に悪用される可能性があるという点です。

使用者がブラウザを操作した時に、「何時何分に操作した」というデータが記録されるので、悪用される恐れがあります。

そんなIdle APIは、Chromeではデフォルトでオンになっています。

悪用されるかどうかは別として、「自分がパソコン触ってる・触ってないの個人情報が、デフォルトで送信されるようになっているのどうなの?」って部分が、物議を醸しているようです。

僕も実際に確認してみましたが、確かにオンになっていました。

具体的にどういうことができるのか、メリットは何なのかのアナウンスが、少しくらいあってもいいんじゃないかなぁというのが初心者の感想です。

それに対して、Vivaldi4.3では標準でIdle APIがオフ(ブロック)になっています。オンにすることも可能です。

プライバシー Idle 検出

以下、Idle APIについて調べるにあたって、参考になったリンクを貼らせていただきます。

参考1:New Chrome feature can tell sites and webapps when you’re idle TechRepublic
参考2:Vivaldi 最新版 4.3では、Google Idle APIのデフォルト無効、PWA 対応、キャプチャー機能、ダウンロードパネル、同期を改善、翻訳機能新たに 68の言語を追加しました | Vivaldi Browser
参考3:Chrome 94で有効化されたデバイスのアイドル状態を取得する Idle Detection API

Chromeでオフにする方法

Chromeを利用していて、不安な方はオフにしてみましょう。

アドレスバーに以下のURLを入力して、Enterを押します。

chrome://settings/content/idleDetection

デバイスのアクティブ状態の設定項目を、「サイトによるデバイスのアクティブ状態の検出を許可しない」にします。

サイトによるデバイスのアクティブ状態の検出を許可しない

これでオフになりました。

PWAとは?

ウェブサイトを独立させて、アプリケーションのように利用できる機能です。

よく見るサイトや、TwitterなどのSNSをブラウザから独立して、1つのアプリ(ソフト)として利用できるようになります。

タスクバーにピン留めしたり、デスクトップにショートカットアイコンを作成して、簡単にアクセスできるようになります。

「ブックマークから、Twitterを探してクリックする~」の手間が省けます。

一番のメリットは、単体のアプリ(ウィンドウ)として機能する点です。ウィンドウの移動、閉じるなどの動作を、他ソフトと同じ要領でできるのが便利です。

全くアクセスしないサイトをPWAにしても意味がないので、頻繁にアクセスするサイトをPWAにしてみましょう。

僕はやってないので分からないんですが、ブラウザゲームと相性いいんじゃないかなと思います。

ただし、PWAは、Vivaldiで設定したキーボードショートカットキー、マウスジェスチャーなどが利用できないので注意です。

拡張機能は動作します。

「ブラウザとは異なるアプリ」ってくらいの認識がいいかなと思います。

イメージは、Microsoftストアからアプリをダウンロードするみたいな感覚です。

PWAのインストール方法

Vivaldiをアップデートしたら、自動的に機能が有効になります。

タブの右クリックメニューに、PWAのインストールボタンが追加されているはずです。

PWAは、ウェブサイト側が対応していることが前提ですが、Vivaldiでは非対応サイトでもPWA風(ショートカット)にできます。

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

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

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

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

タブ [すべてのプログレッシブウェブアプリ]

PWA 対応サイト

PWAにしたいサイトのタブを右クリックします。

プログレッシブウェブアプリ→「Twitter(サービス名)をインストール…」をクリックします。

プログレッシブウェブアプリ→「Twitter」をインストール
ポイント

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

タブの右クリックメニュー 「Twitter」をインストール

右クリックメニューのカスタマイズで、「サブフォルダーとして表示」にしているかどうかで異なってきます。

外観 メニューのカスタマイズ サブフォルダーとして表示

頻繁にサイトをPWAにする方は、「サブフォルダーとして表示」のチェックを外しておくといいかなと思います。

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

アプリをインストールしますか?

Twitter がアプリ化されます。

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

Twitter(PWA)のスクリーンショット

独立したアプリと同じ扱いなので、WindowsのAltTabを押した時に、ブラウザと別で認識してくれます。

PWAの利点 WindowsのAlt+Tabを押した時にブラウザとは別アプリとして認識してくれる

ブラウザを開いて、その後PWAのTwitterをアクティブにする…といったように、使い分けることができます。

PWA 非対応サイト

非対応サイトの場合は、ショートカットを作成できます。パッと見は、どちらも一緒です。

タブの右クリック→プログレッシブウェブアプリをクリックします。

PWA 非対応なので「〇〇をインストール…」という文言はでません。

代わりに、「ショートカットを作成…」という文言が表示されるので、クリックします。

プログレッシブウェブアプリ ショートカットを作成

「ウィンドウとして開く」にチェックを入れて、作成をクリックします。

ショートカットを作成しますか?

「ウィンドウとして開く」にしないと、ただのショートカットアイコンになるので注意です。

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

ナポリタン寿司のPC日記のPWA

便利情報

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

Chrome拡張機能の利用

アプリ化してもChrome拡張機能は利用できます。

アプリを起動して、右上のパズルアイコン→利用したいChrome拡張機能をクリックします。

PWAにしていてもChrome拡張機能は利用できる

いつも通りの拡張機能画面が表示されます。

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

ただし、ブラウザのようにChrome拡張機能ボタンを表示・隠すことはできませんでした。

アプリ内をクリックすると、自動でChrome拡張機能のボタンが隠れて、パズルアイコンになります。

タスクバーにピン留めがおすすめ

タスクバーにピン留めしておくと便利です。

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

PWAアプリをタスクバーにピン留めする

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

タスクバーにピン留めすることで、Windows数字のショートカットキーが使えます。

左から1番となっていて、クリックしなくてもアプリが起動できます。

例えば、タスクバーの左から6番目にTwitter PWAがある場合は、Windows6になります。

参考:【Windows】ショートカットキーの使い方。覚えると作業効率UP | ナポリタン寿司のPC日記

vivaldi://appsで一覧表示

以下のアドレスから、インストールしたアプリを一覧表示できます。

vivaldi://apps

クリックで起動します。

vivaldi://appsでインストールしているアプリを確認できる

右クリックで削除、ウィンドウとして開く、ログイン時に自動起動などの設定ができます。

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

沢山のアプリを切り替えるという人は、ブックマークに登録して、ニックネーム決めておくと良さそうです。

ブックマークしました ニックネームを付けておくと便利

アドレスバーに指定したニックネームを入力するだけで呼び出せます。

アドレスバーから任意のニックネームでアクセスできるようになる

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

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

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

PWAのケバブメニュー 「Twitter」をアンインストール

感想

以上、Vivaldi4.3のアップデート内容、Idle APIのデフォルト無効化、PWA(プログレッシブウェブアプリ)についてでした。

TwitterとツイートデックのPWAが便利です。

Posted by ナポリタン寿司