早送り機能

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

早送り機能を使って、シリーズの中の 1 つのドキュメントから次の関連ドキュメントに移動できます。例としては、本や検索結果のページ、フォーラム、ギャラリーの画像などで次のページに移動することなどが考えられます。

早送りはドキュメントの下で Space キーを押すか(デフォルトで有効)、早送りボタンやクイックコマンドを使用してアクティブにできます。

Vivaldi は、以下のような異なる方法でシリーズの次のドキュメントを検出します:

  1. (ウェブ標準が望ましい) ドキュメントで rel="next" プロパティを使用する最初の <link> 要素
  2. ドキュメントで rel="next" プロパティを使用する最初の <a> 要素
  3. ドキュメントで「次」や「次のページ」の文字列を含む <a> 要素。aria-labeltitle プロパティも対象としてみなされます。最後の 1000 <a> 要素のみが対象となります。

早送りの検出は、ドキュメントを最初に読み込んだ時のみに行われます。その後に動的に挿入が行われても Vivaldi では検出されません。早送りは、要素の href プロパティがアップデートされる時に動的にアップデートされます。

誤って発生した早送りナビゲーション

早送りは、互換性のあるドキュメント、特に Space キーボードイベントを使ってやり取りを行うウェブアプリやゲームなどで誤ってトリガーされる可能性があります。

ドキュメントがキーボードイベントを処理する時に誤ってナビゲーションがトリガーされ、それに対してアクションした後のイベントの実行に失敗する場合があります。イベントハンドラーで必ず 、preventDefault() を呼び出して、キーボードイベントに対してアクションし、イベントが実行されたブラウザに合図するようにしてください。これは、<input><textarea> のようなデフォルトのフォームコントロールを使用している場合、自動的に起こります。

テストを行って、早送りや単一キーのショートカット、その他のキーボードアクセシビリティー機能との互換性を確認することが重要です。

あらゆるデバイスでの Vivaldi 同期

Vivaldi の同期機能を使えば、デスクトップ、Android、iPhone、iPad、自動車など、どのデバイスでブラウジングしても、常にブックマークやパスワード、入力履歴、開いているタブ、リーディングリスト、メモを同期できます。

ブックマークのメタデータ

製品: デスクトップ版 Vivaldi

Vivaldi はブックマークのメタデータを HTML 標準のメタデータ要素と Open Graph Protocol のメタデータから取得しています。ユーザーが新しいブックマークを作成すると、これらのメタデータが事前に値を満たすために使用されます。

ブックマークのタイトルは以下をソースとしています:

  1. <title> 要素のドキュメントタイトル
  2. Open Graph Protocol のタイトル (og:title)

ブックマークのディスクリプションは以下をソースとしています:

  1. Open Graph Protocol のディスクリプション (og:description)
  2. <meta name="description"> 要素のドキュメントのディスクリプション

Open Graph Protocol のディスクリプションの方が HTML 標準のディスクリプションと比べてページの概要のクオリティが高いため、好ましいと言えます。後者は非常に長かったり、記述された概要やディスクリプションの代わりとなるページのキーワードのリストが誤用されていたりします。

Android 版 と iOS 版 Vivaldi では HTML 標準の要素のみが使用されます。

ウェブパネル

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

ウェブパネル は Vivaldi のサイドパネルに追加して常に手元においておける特別なタブのようなものです。

ウェブパネルでは、ユーザーが設定した URL がサイドパネルの狭い列に読み込まれます。幅が狭いモバイルのようなビューポートにマッチするよう、モバイルのユーザーエージェントで読み込まれます。モバイルデバイスに最適化されたドキュメントやウェブアプリは、ウェブパネルで問題なく実行されるでしょう。

ウェブパネルは、タブの通知を通して数値に関するステータス情報を、また、タブのアイコン(ファビコン)を動的にアップデートすることで、その他のステータス情報のやり取りを行えます。

問題が生じる可能性がある alert()prompt() のようなダイアログ API は利用できません。

ウェブパネルは通常のタブと共有するコンテキストで実行します。ウェブパネルはユーザーに新たな許可を促すことはできませんが、通常のタブに与えられた許可を共有することができます。

拡張機能で利用できる chrome.sidePanel API を使って、さらにパワフルで一体化されたパネル体験を実現することができます。

タブ通知

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

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

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

Vivaldi はドキュメントタイトルの先頭にある数値カウンターが「かっこ」で囲まれていて (U+0029 RIGHT PARENTHESU+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 で何らかの問題に遭遇し、自分で修正できるのか、バグを報告する必要があるのかを見極めたい場合、以下のステップに従ってください。 多くの場合、ウェブページを再度読み込むか、再起動してアプリをアップデートし、追加された変更を適用することで解決できることがあります。

アプリの再起動

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

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

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


アプリのアップデート

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


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

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

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


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

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

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

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

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

flags のリセット

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

flags をリセットするには:

  1. vivaldi://flags に移動する
  2. 右上の「Reset 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 のランドスケープモード