ホーム>ブラウザ>Vivaldi広告を利用しています当サイトは広告を掲載しています。VivaldiTwitterPocketCopyこの記事では、2021年10月7日にアップデートした「Vivaldi4.3」で追加された「PWA(プログレッシブウェブアプリ)」の使い方について書きます。ウェブサイトを独立したアプリケーションとして利用する機能です。2021年10月7日に「Vivaldi」は、バージョン4.3になりました。追加された機能は、以下の5点です。今回のアップデートは、「新機能の追加!」というよりは、色々な部分の改善って印象です。Apps)」とは何かについてと、設定方法について書きます。初心者でもサクっとPWA化できます。感想Vivaldi4.3から追加されたPWAとは?ウェブサイトを独立させて、アプリケーションのように利用できる機能です。見るサイトや「X(旧Twitter)」などのSNSを、ブラウザから独立して、1つのアプリ(ソフト)として利用できます。Apps」と呼ばれていて、日本語では「プログレッシブウェブアプリ」と呼びます。略して「PWA」です。タスクバーにピン留めしたり、デスクトップにショートカットアイコンを作成して、簡単にアクセスできるようになります。「ブックマークから、Twitterを探してクリックする~」の手間が省けます。PWAのメリットメリットは、以下のとおりです。ツールバー(タブバー、アドレスバー、ブックマークバー)が非表示になって、大きい画面でサイトを閲覧できるCtrl+Tabを押した時に、独立したアプリになっているので選択しやすい(アクティブにしやすい)タスクバーやスタートメニューにピン留めできるWindows起動時に自動起動するスタートアップに登録できるメインモニターに「Vivaldi」ブラウザ、サブモニターに「Twitter(PWA)」といった感じで分けられるベースはウェブサイトなので、拡張機能を利用できる(広告ブロッカー、CSS)外観はアプリなので、ウィンドウサイズを自由に変えられる「CLaunch」などのアプリランチャーに登録できる全くアクセスしないサイトを、PWAにしても恩恵が少ないです。頻繁にアクセスするサイトで利用するのがいいと思います。PWAのデメリットメリットばかりではなく、デメリットがあります。「Vivaldi」のキーボードショートカットキーが使えない「Vivaldi」のマウスジェスチャーが利用できないサイドバーなどツールバー関連が使えない拡張機能は動作します。「Vivaldi」内蔵の機能の一部が利用できません。「ブラウザとは異なるアプリ」ってくらいの認識がいいかなと思います。「Vivaldi4.3」(2021年10月7日公開)以降で利用できます。アップデートしていない方は、アップデートすることで利用できます。アップデートすると、タブバーのタブの右クリックメニューに、「PWA」インストールボタンが追加されます。「PWA」は、ウェブサイト側が対応していることが前提ですが、Vivaldiでは、非対応サイトでもPWA風(ショートカット)にできます。本記事では、PWA対応サイトと非対応サイトでの2パターンを紹介します。基本的には一緒の方法です。「PWA」にしたいサイトを開きます。試しに、2022年10月にイーロン・マスク氏に買収されたSNS「Twitter」で試してみます。開けたら、タブバーにある「X(旧Twitter)」タブを右クリックします。「プログレッシブウェブアプリ」→「Twitter(サービス名)をインストール...」をクリックします。「〇〇をインストール」という項目がある場合、そのサイトは対応しているということです。「X(旧Twitter)」は対応しています。僕の場合、コンテキストメニューをカスタマイズしていたため、非表示になっていました。設定→外観→「メニューのカスタマイズ」を「タブ」にします。右のメニューから、「[すべてのプログレッシブウェブアプリ]」を探して(検索したら早いです)、左側へドラッグ&ドロップすることで追加できます。【ポイント】カスタマイズによっては階層が異なる人によっては、「プログレッシブウェブアプリ」という表記ではなく、直接「〇〇をインストール」という表示になっている場合があります。右クリックメニューのカスタマイズで、「サブフォルダーとして表示」にしているかどうかで異なってきます。頻繁にサイトをPWAにする方は、チェックを外しておくといいかなと思います。「アプリをインストールしますか?」というダイアログが表示されるので、「インストール」をクリックします。「X(旧Twitter)」がアプリ化されます。使い方は、ブラウザで開いた時と一緒です。デスクトップにアイコンが作成されるので、クリックで起動します。タスクバーのピン留めウェブサイトをPWAにした時、「〇〇をタスクバーにピン留めしますか?」という通知が届く時があります。したくない場合は、「いいえ、結構です」や右上の「×」を押します。「はい」を押すと、自動的にPWAにしたサイトをピン留めしてくれます。アドレスバー、タブバー、ブックマークバーなどのツールバーは表示されません。サイドバー(パネル)もです。ウェブサイトのみのシンプルなウィンドウです。余計な要素がないので、大きく画面を有効活用できます。ウィンドウサイズは自由に変更可能です。ブラウザのタブだと、他のサイトも一括でウィンドウサイズが変わりますよね。PWAにすることで、そのサイトだけのウィンドウサイズを変更できます。ブラウザ本体には影響しません。Windowsのウィンドウスイッチャー(Alt+Tab)では、ブラウザ本体と別々に表示されます。PWAにしていない場合は、ブラウザを選択→開いているタブの中から、目的のサイトを選択する...の流れですが。PWAにすることで、Alt+Tabで、直接アクティブにできます。見つけやすくなります。非対応サイトの場合は、ショートカットを作成することで、パッと見をPWAにできます。PWAにしたいサイトを開きます。「X(旧Twitter)」の公式アプリ「TweetDeck」で試してみます。「TweetDeck」は、PWA非対応です。(2022年11月時点)タブの右クリック→「プログレッシブウェブアプリ」→「ショートカットを作成」をクリックします。非対応なので「〇〇をインストール...」という文言はありません。デフォルトでタブ名が入力されています。変更したい場合は、好きな名前を入力します。その下にある「ウィンドウとして開く」にチェックを入れて、「作成」をクリックします。「ウィンドウとして開く」にチェックしなかった場合、通常のショートカットリンクになってしまいます。タブバーやサイドバーなどが普通に表示されます。チェックを入れることで、独立したウィンドウにしてくれます。チェックを入れ忘れて作成した場合でも大丈夫です。後からいつでも変更できます。PWAと同じように、単体のアプリとして利用できます。「これ知ってたら便利かも?」という豆知識について書きます。Chrome拡張機能の利用PWA(アプリ化)にしていても、Chrome拡張機能を利用できます。Origin」などの広告ブロッカーや、CSSを適用できる「Stylebot」などです。」アイコン→利用したいChrome拡張機能をクリックすることで利用できます。拡張機能のポップアップが表示されます。ブラウザのようにChrome拡張機能ボタンを表示・隠すことはできません。」アイコンになります。ポップアップ等がない拡張機能も機能します。Customizer」を入れた状態で、PWAの「X(旧Twitter)」を開いても動作しています。...https://www.naporitansushi.com/twitter-ui-customizer/タスクバー・スタートメニューへのピン留めタスクバーやスタートメニューにピン留めできます。ブラウザの場合、「Vivaldi」本体はピン留め可能ですが、特定のサイトのピン留めはできません。アプリを起動して、タスクバーのアイコンを右クリック→「タスクバーにピン留めする」をクリックします。ドラッグ&ドロップで、好きな場所に配置できます。タスクバーにピン留めすることで、Windows+数字のショートカットキーを利用できます。左から1番となっていて、キーだけでアプリ起動できます。PWA」を配置した場合は、Windows+6で起動できます。「vivaldi://apps」で一覧表示Vivaldiを起動して、以下のURLをアドレスバーに貼り付けます。vivaldi://appsPWA化しているアプリや一部拡張機能がアイコン表示されます。クリックで起動できます。右クリックを押すと、メニューが表示されます。削除、ウィンドウとして開く、ログイン時に自動起動などの設定ができます。PWA作成時の「ウィンドウとして開く」にチェックしていなかった場合でも、ここで再設定できます。【ポイント】Vivaldiの内部URL「vivaldi://apps」以外の専用URLを知りたい場合は、以下の記事を参考にしてみてください。Vivaldiで用意されている特殊な内部URLの一覧【全部紹介】この記事では、Vivaldi専用のURL「vivaldi://〇〇」を表形式で全て紹介します。...https://www.naporitansushi.com/vivaldi-url-list/沢山のアプリを切り替えるという人は、「vivaldi://apps」をブックマークに登録するのもアリだと思います。参考:【Vivaldi】ブックマークにニックネームと説明を付ける方法。2つのポイントを意識してみようアンインストール(削除)PWAを削除する時は、アプリを起動→右上のケバブメニュー(...)→「〇〇〇」をアンインストールをクリックします。スタートアップに登録して自動起動Windows起動時に、一緒に自動起動させることができます。「ブラウザは、手動で起動するけど、Twitterサイトは毎日見るから、起動時に立ち上げてほしい!」という場合に便利です。登録したいPWAのショートカットを用意します。デフォルトでは、PWA作成時にデスクトップにリンクが作成されます。削除してしまった場合は、「vivaldi://apps」をブラウザで開いて、アプリアイコンを右クリック→「ショートカットを作成」を押します。準備できたら、エクスプローラーを開きます。アドレスバーに以下のパスを貼り付けて、Enterを押します。shell:startupスタートアップフォルダーが開くので、ここにPWAのショートカットを配置します。これで、Windows起動時に自動起動してくれます。以下の記事から確認できます。「Vivaldi」と若干方法が異なります。以上、「Vivaldi4.3」で実装された「PWA(プログレッシブウェブアプリ)」の解説・インストール方法についてでした。個人的には、以下のサイトがPWAに便利だと思います。ナポリタン寿司TwitterFacebookLinkedInB!HatenaPocketCopy【Vivaldi】カスタム検索サイトの一覧。...【Vivaldi】iOS版を開発中とのことらしい。