ウェブ開発者向け – タブ通知

製品： デスクトップ版 Vivaldi のみ

タブの通知でウェブページが数値に関するステータスの概要をユーザーに示すことができます。例としては、新規の未読メッセージ、メールの数、ニュースの数、処理していないタスクや支払などの他、ショッピングカートに追加したアイテムの数などがあります。

タブの通知はタブバーやウェブパネルで、ドキュメントのファビコンの上に数字のバッジとして表示されます。

Vivaldi はドキュメントタイトルの先頭にある数値カウンターが「かっこ」で囲まれていて (U+0029 RIGHT PARENTHES and U+0028 LEFT PARENTHESIS)、また、スペースでタイトルの残りと区切られている (U+0020 SPACE) 場合を検知します。以下はその例です：

<title>(7) Webmail</title>

タブの通知はデフォルトで有効になっていますが、無効にすることができます。

ドキュメントのタイトルが変更されると、バッジは動的にアップデートされます。パフォーマンスが最適となるよう、document.title プロパティか、<title> 要素の innerText プロパティをアップデートしてください。<title> 要素を置き換えると、バッジの更新が遅れる可能性があります。

2 桁、あるいは、それ以上の数の場合、スペースの制約のため、数字のバッジの代わりに「＋」サインのバッジとして表示される可能性があります。

数値カウンターはバッジが表示されるユーザーインターフェイスのドキュメントタイトルから削除されます。文字のシーケンス “(0) ” がタイトルから削除されますが、バッジは生成されません。

タブの通知はドキュメントタイトルのトップフレームのみで検知されます。

タブの通知の無効化

タイトルの前にゼロ幅スペース U+200B ZERO WIDTH SPACE 文字を付けて、ドキュメントでタブの通知を無効にすることができます。以下はその例です：

<title>&#x200b;​(1195) Step Counter</title>

ウェブ開発者向け – リンクのドラッグと選択の動作

製品：デスクトップ版 Vivaldi のみ

Vivaldi ではリンク内のテキストを選択したり、リンクをドラッグすることができます。Vivaldi での動作は、他の Blink (Chromium) ブラウザのデフォルトの動作と異なります。

ユーザーはリンク上でクリックして左右にドラッグすることでテキストを選択できます。上下にドラッグすることでリンク要素がドラッグ可能になります。

リンクをどの方向にも常にドラッグできるようにするには、draggable 属性を true に設定してください。以下はその例です：

<a href="https://example.com/" draggable="true">
  Draggable and Not Selectable Link Text
</a>

リンクのテキストをどの方向にも選択可能にするには、draggable 属性を false に設定してください。以下はその例です：

<a href="https://example.com/" draggable="false">
  Selectable and Not Draggable Link Text
</a>

リンクが明示的にドラッグ可能でない場合 (デフォルト)、CSS の user-select プロパティは無視され、その cursor プロパティも無視される可能性があります。

ウェブ開発者向け – アダプティブテーマカラー

製品： デスクトップ版、Android 版、iOS 版 Vivaldi

アダプティブテーマカラーを使用して、タイトルバー、タブバー、アドレスバー、ステータスバーなどを含む Chrome ブラウザでウェブページにアクセントカラーを設定することができます。例えば、Chrome ブラウザにライトな抹茶グリーンカラーを適用する場合は以下のようになります：

<meta name="theme-color" content="#8ba888">

Vivaldi はドキュメントで一番最初に <meta> と名付けられている要素を使用します。

アダプティブテーマカラーはデフォルトで有効になっています。機能はカスタムのテーマを使用することで無効にできます。

デスクトップ版や Android 版 Vivaldi では、適切なメディアクエリを使用してライトテーマとダークテーマそれぞれに異なる色を設定できます。例えば、ライトモードにはライトな抹茶グリーンカラー、ダークモードにはダークな抹茶グリーンカラーを適用する場合は以下のようになります：

<meta name="theme-color" content="#8ba888" media="(prefers-color-scheme:light)">>
<meta name="theme-color" content="#44624a" media="(prefers-color-scheme:dark)">

Android 版と iOS 版 Vivaldi では、content プロパティに対する動的なアップデートは無視されます。これらのプラットフォームのテーマカラーは、ドキュメントの初期化時にのみ設定されます。

デスクトップ版 Vivaldi では、テーマカラーに対する急激な変更は遅れて反映される可能性があります。ドキュメントでテーマカラーが何度も変更されないようにしてください。

一部のテーマカラーのぼかしや彩度は、ツールバーのテキストやアイコンと十分なコントラストを保つため、多少調整される可能性があります。

Vivaldi Social での投稿の翻訳

Vivaldi Social には、色々な言語を話す人々が集まっています。世界のさまざまな場所で人々が何をしているのかを知ることができるのはとても魅力的ですが、その言語を理解できなければ、それもかないません。

そんな言語の壁を越えるため、Vivaldi Social では、Vivaldi ブラウザでもお馴染みの Lingvanex が提供する翻訳サービスを使用しています。

投稿の翻訳

Vivaldi Social での投稿は、ユーザーインターフェイスの言語として選択された言語に翻訳されます。ユーザーインターフェイスの言語は、ユーザー設定 > 外観 > 言語 で変更できます。

投稿を翻訳するには：

  1. Vivaldi Social で翻訳したい投稿を確認する
  2. 投稿の下にある「翻訳」ボタンをクリックする
  3. 元の言語に戻すには、「原文を表示」をクリックする

投稿が別の言語にもかかわらず、翻訳のオプションが表示されない場合は、投稿者が投稿に正しい言語を設定していないことが考えられます。そんな時には、Vivaldi ブラウザに内蔵された翻訳機能を使って投稿を翻訳してください。

投稿を翻訳可能にするには

自分の投稿を翻訳可能にするには、投稿に使用する言語と一致する言語を選択して設定するようにしてください。

デフォルトの投稿の言語を設定するには：

  1. ユーザー設定 > その他 > デフォルトの投稿設定 > 投稿する言語 に移動する
  2. 投稿に最も使用する言語を選択する

デフォルトとは異なる言語で投稿する場合には、投稿エディターで以下のように言語設定を変更してください：

  1. テキスト欄の下で現在の言語コード（ など）をクリックする
  2. ドロップダウンメニューから投稿に使用する言語を選択する

トラブルシューティング

何らかの問題に遭遇し、自分で修正できるのか、バグを報告する必要があるのかを見極めたい場合、以下のステップに従ってください。多くの場合、ウェブページを再度読み込むか、再起動してアプリをアップデートし、追加された変更を適用することで解決できることがあります。

アプリの再起動

場合によっては、非常に簡単なことで解決できることがあります。ブラウザを終了して再起動すると、問題が解消される場合があります。

iOS 版 Vivaldi を終了するには、デバイスのアプリスイッチャーを開いて、Vivaldi を上にスワイプしてください。

モバイルデバイスを長い時間使用していた場合、デバイスを再起動することで解決できる場合があります。

アプリのアップデート

アプリの自動更新をオフにしている場合は、App ストア、あるいは Vivaldi をインストールしたアプリストアで、アップデートがないかを手動で確認してください。

トラッカー・広告ブロッカーの無効化

トラッカー・広告ブロッカーにより何らかの要素がブロックされたことで、ウェブサイトが正しく表示されない場合があります。アドレスバー右側の コンテンツブロッカーをクリックしてブロッカーを無効にし、ウェブサイトが正しく表示されるかを確認してみてください。

ブロック設定を全体的に変更するには、Vivaldi メニュー > 設定 > トラッカー・広告ブロッカー > デフォルトのブロックレベルに移動する

ブラウジングデータの削除

ウェブサイトは常にアップデートされていますが、サイトの旧いバージョンの情報はキャッシュファイルや Cookie に保存されています。この場合、表示されたウェブサイトに不整合が生じたり、時には機能が壊れることもあります。

加えて、ブラウジングデータを長い期間保存するとデバイスのメモリーを浪費してしまうため、時々削除することでブラウザの速度を向上することができます。

iOS 版 Vivaldi でブラウジングデータを削除するには：

  1. Vivaldi メニュー > 設定 > プライバシーとセキュリティ > ブラウジングデータの削除に移動する
    あるいは、パネル > 履歴パネルに移動して、画面右下の「閲覧履歴データの削除」をタップする
  2. 削除したいデータと期間を選択する
  3. 「データを削除」をタップする

flags のリセット

Experiments（実験機能） は、開発中の新機能をテストできる素晴らしい方法です。しかし、バグが存在するため、flags を通してのみ利用できるようになっています。flags を通して新機能を試した後に Vivaldi が正しく機能しなくなったり、クラッシュしたりした場合には、デフォルトの設定に戻してください。

flags をリセットするには：

  1. vivaldi://flags に移動する
  2. 右上の「Rest all」をタップする
  3. ウィンドウ下の「Relaunch」をタップしてブラウザを再起動する

まれにブラウザを 2 度再起動しないと、experiments が完全にリセットされない場合があります。

iOS 設定の確認

iOS のオペレーティングシステムの設定が Vivaldi の機能に影響する可能性があります。Vivaldi に影響しそうな設定をチェックして変更し、再度テストして問題が解決されたかを確認してください。

その他のアプリの無効化

Vivaldi に影響を与える可能性があるアプリ（VPN など）を使用している場合、該当のアプリを無効にした後、同じ問題が生じるかどうかを確認してください。

Vivaldi のスナップショット版のテスト

遭遇したバグが修正され、スナップショット版のブラウザでテストされている場合があります。その場合、修正は次の安定版に取り込まれるため、安定版がリリースされるまでお待ちください。

iOS では、TestFlight アプリからスナップショット版をインストールできます。

バグを見つけたら？

上記のステップに従っても問題が解決されない場合には、フォーラムに投稿してみてください。フォーラムではコミュニティメンバーが自分のデバイスでテストして、バグを確認したり、解決方法を提案してくれたりします。場合によっては、開発者が既に該当のバグを認識しているか、バグ報告が必要かどうかなどのアドバイスをくれることもあります。

バグを報告するには、まず、iOS 版 Vivaldi でのバグ（不具合）の報告を確認した上で、vivaldi.com/bugreport に移動してレポートを提出してください。

ブラウザインターフェイス

デスクトップ版ブラウザと同様、iOS 版 Vivaldi もユニークなユーザーインターフェイスを備えています。

タブバー

デスクトップ版と同様、開いているすべてのタブをタブバーで把握できます。多数のタブを開いている場合、タブバーで左右にスワイプして、他のタブを確認できます。

タブバーを有効・無効にするには：

  1. Vivaldi メニューボタン Vivaldi メニュー > 設定 > タブに移動する
  2. 「タブバーを表示」で有効・無効を切り替える

アドレスバーと共にタブバーを画面下に移動させるには：

  1. Vivaldi メニューボタン Vivaldi メニュー > 設定 > タブ に移動する
  2. アドレスバーの位置で「下部」を選択する

アドレスバー

  • コンテンツブロッカー – ウェブサイトに対するトラッカーと広告ブロックのレベルを変更する
  • アドレスと検索欄 – アクセスしたいサイトの URL か、調べたい検索語句を入力する
  • Vivaldi メニュー – Vivaldi ロゴをタップして、 ブックマーク、設定などのオプションにアクセスする

アドレスバーを画面下部に移動させるには：

  1. Vivaldi メニューボタン Vivaldi メニュー > 設定 > タブに移動する
  2. アドレスバーの位置で「下部」を選択する

アドレスバーを画面下部に移動させる場合、検索候補の表示順序を反対にして、最も関連性の高い候補がアドレスバー近くに表示されるようにすることをお勧めします。

検索候補の表示順序を反対にするには：

  1. Vivaldi メニュー > 設定 > タブに移動する
  2. アドレスバーの位置に「下部」を選択する
  3. 検索候補で、「検索候補の順序を逆にする」を有効にする

ツールバー

  • パネル – ブックマーク、 履歴、 メモ、 ダウンロードにアクセスできます
  • 履歴を戻る – アクセスしたページの履歴で前のページに移動できます
  • アドレス欄にフォーカスして検索、あるいはウェブサイトのアドレスを入力できます。タブスイッチャーでは、 「新しいタブ」ボタンが表示されます。
  • 履歴を進む – アクセスしたページの履歴で次のページに移動できます
  • タブスイッチャー – 開いているすべてのタブ、プライベートタブ、同期済みタブ、最近閉じたタブを表示できます

アドレスバーを下部に表示すると、画面下には 2 つのツールバーが表示されます。タブバーを有効にしている場合、画面下部ではツールバーの場所にタブバーが表示されます。

ランドスケープモードや iPad のような大きな画面のデバイスでは、画面下のツールバーのアイコンはすべてアドレスバーに表示されます。

iPad で表示された iOS 版 Vivaldi のランドスケープモード

テーマ

デスクトップ版 Vivaldi は多数のカスタマイズオプションを提供していることで知られていますが、その多くを iOS 版 Vivaldi でも利用できるようにしました。

iOS 版 Vivaldi でブラウザのテーマを変更するには：

  1. Vivaldi メニューボタン Vivaldi メニュー > 設定 > 外観 > テーマに移動する
  2. 以下のオプションから選択する：
    • システム設定に従う
    • ライトモード
    • ダークモード

ライトモードを選択した場合、ブラウザのツールバーのアクセントカラーに基づいてウェブサイトのカラーが変わります。

3 つの異なるアクセントカラーで表示される 3 つの異なるウェブサイト

カスタムのスタートページの壁紙

デスクトップ版と同様、組み込まれている壁紙から選択してスタートページに適用するか、独自の画像を使用することができます。

壁紙をアップデートするには：

  1. Vivaldi メニュー > 設定 > 外観 > 壁紙 に移動する
  2. 好きな壁紙をタップするか、+ ボタンをタップして「写真」から画像を選択する

セッションパネル

セッションは、開いているタブを後で簡単にアクセスできるように保存する方法です。使用していないタブ、あるいは、すべてのタブを閉じて、パソコンでメモリとリソースを解放できます。セッションには単一のウィンドウや、すべてのウィンドウ、また、オプションとしてワークスペースのタブを含めることができます。ここでは、セッションパネスを使用してセッションを管理する方法を説明します。

セッションパネルへのアクセス

セッションパネルを開くには：

Vivaldi ブラウザでセッションパネルを開いてハイライト

新規に保存したセッションの追加

セッションパネルを使用してタブをセッションとして保存するには：

  1. セッションパネルを開く
  2. パネル右上の「タブをセッションとして保存」をクリックする
  3. セッションに名前をつける
  4. セッションにすべてのワークスペースのタブを含めるか、現在のウィンドウのタブのみを保存するかを選択する
  5. 「保存」をクリックする

セッションの表示と編集

保存したセッションのコンテンツを表示・編集するには：

  1. セッションパネルを開く
  2. セッションを選択する
  3. パネル右上の 「セッションを編集」をクリックする

ウィンドウパネルでアクティブなセッションのタブの並べ替え、名前の変更、タブの削除などを行えます。

セッションの自動保存

開いているすべてのタブを 1 時間ごとに自動的にバックアップするには：

  1. パネルの下にある「セッションの自動バックアップ」をクリックする
  2. バックアップを保持したい日数を選択する：
    • 過去 1 日
    • 3 日間
    • 5 日間
    • 30 日間

保存したセッションの削除

セッションを削除するには：

  1. セッションパネルを開く
  2. 削除したいセッションを選択する
  3. パネル右上の「セッションを削除」をクリックする

その他に、セッション上で右クリックし、コンテキストメニュー内で「削除」をクリックすることでもセッションの削除が可能です。

パネル

パネルを使用して、ブックマークや履歴、メモ、ダウンロードなどの便利なツールに素早くアクセスできます。

パネルへのアクセス

パネルを開くには、画面下部のツールバー左側にあるパネル ボタンをタップしてください。

iOS 版 Vivaldi には、以下の 4 つのパネルがあります。

パネルを切り替えるには、パネルビュー上部にある各アイコンをタップしてください。

検索 欄をタップして、アクティブなパネル内のコンテンツを検索できます。

パネル関連の操作は、画面下から行えます。

パネルを閉じるには、右上の「完了」をタップしてください。

タブレットでのパネル

iPad では、スマートフォンと比較して画面上のスペースに余裕があるため、デスクトップ版 Vivaldi と同じデザインを採用しています。

タブレットでパネルを開くには：

  1. アドレスバー左側の パネルボタンをタップすると、パネルが開いて最後に表示したパネルが表示されます。
  2. パネルを切り替えるには、画面左側に縦にリスト表示されたパネルアイコンをタップしてください。

パネルを閉じるには：

  • パネルの右上の「完了」をタップする
  • パネルの外側をタップする

ダイレクトマッチとは？

ダイレクトマッチは、アドレス欄や検索欄、スピードダイヤルの検索から特定のウェブサイトに素早くアクセスできる機能です。一致するものがあった場合、検索エンジンを通して何度もクリックして意図したサイトにアクセスする必要がないので便利です。

アドレス欄のドロップダウンメニューで、ブックマークや検索候補、ダイレクトマッチ、履歴などのアイテムを表示する順番をカスタマイズできます。

ダイレクトマッチの仕組み

アドレス欄、また、アドレスバーやスピードダイヤルの検索欄に検索語句を入力すると、Vivaldi はローカルに保存されたファイルに入力した語句と一致するものがないかを検索します。一致したものが見つかると、Vivaldi は「ダイレクトマッチ」とラベル付けし、一致したアイテムをドロップダウンメニューに表示します。

ダイレクトマッチの候補をクリックするとページが表示され、Vivaldi にいくらかの収益がもたらされます。

現在、この機能はアメリカ合衆国でのみ提供されています。従って、Vivaldi の言語を英語 (US) に設定している場合のみデフォルトで有効となります。順調にいけば、今後は日本も含む他の地域にも拡大する予定です。

プライバシーに関する側面

Vivaldi のどの機能においても同じですが、ダイレクトマッチでユーザーを追跡するようなことはありません。ユーザーが入力した内容のトラッキングを行ったり、行動の分析や Vivaldi のポリシーに反するような目的のために使用するようなことはありません。入力された内容のみに対応し、その結果を私物化するようなこともありません（ブラウザ言語を除く）。

Vivaldi に送信されるのは最小限のデータのみで、個人を特定できるような情報が他者に見られるようなことはありません。データ送信は候補がクリックされた時のみに発生し、それ以外にデータがやり取りされることはありません。

この機能を実現するにあたって、Vivaldi でローカルにマッチングを行えるようにするために必要なあらゆるデータを提供しています。現在、このデータはパッケージの一部として提供されていますが、将来的には、新しいバージョンのデータを自動的に取得してローカルに保存するように変更される可能性があります。こうすると、ユーザー自身がデータを調べることができるので、仕組みに対する理解が深まるようになるでしょう。

アドレス欄、あるいは、アドレスバーやスピードダイヤルの検索欄に入力が行われると、ローカルファイルの参照と、対応する click_url あるいは target_url の検索のみが行われます。候補に対するファビコンもローカルに保存された画像から取得されるため、入力された内容を暗示するようなリクエストが送信されることもありません。スポンサーリンクがクリックされなければ、実際には何も起こりません。

ダイレクトマッチの候補がクリックされた場合、target_url（候補が示す URL）にダイレクトされます。同時に、バックグラウンドで click_url に対するリクエストが発生し、候補がクリックされたことがパートナー企業に報告されます。ただし、これらのクリックリクエストはすべてプロキシを介するため、パートナー企業がクリックしたユーザーを特定することはありません。この点は、すべての click_url エントリーが vivaldi.com を指し示していることを確認して検証することができます。

Vivaldi では、誰が何をクリックしたのかという記録を恒久的に保存しないようにする予防策も講じています（特に IP アドレスが保存されることはありません）。関連する詳細はプライバシーポリシーで確認できます。

候補をクリックする理由

ダイレクトマッチを使うと、開きたいページに素早くアクセスできます。同時に、ユーザーはこれらの候補を使用することで Vivaldi の収益に貢献することができ、そのサポートにより、Vivaldi は今後も優れたブラウジング体験をユーザーに提供し続けることができるというわけです。

ダイレクトマッチの無効化

ダイレクトマッチを無効にするには：

  1. 設定 > 検索 > 「検索候補を有効にする」に移動する
  2. 「ダイレクトマッチを有効にする」のチェックを外す