【Vivaldi】ダッシュボードに天気予報を表示する方法
ざっくり以下の手順になります。
- ダッシュボードに表示させたい地域の天気をGoogle検索などで調べる
- 表示させたい天気予報サイトのURLをコピーする
- ダッシュボードを開いて下部にある「ダッシュボードの追加」をクリック
- ウィジェットの種類は「ウェブページ」
- コピーしたURLを貼り付けて「完了」をクリック
記事執筆時点で、天気予報の専用ウィジェットが実装されていません。よって少々ブサイクかもしれませんが既にある天気予報サイトをウェブページのウィジェットとして登録する形になります。
専用の天気ウィジェットはありませんが、任意のサイトを表示できるウェブページというウィジェットはあります。よって天気予報だけでなく、サイトなら何でも登録できます。
まだまだダッシュボードが実装された日が浅いため、今後のアップデート次第では専用の天気ウィジェットが実装されるかもしれません。X（旧Twitter）でも公式がどんなのが欲しい？と意見を求めていました。
「Vivaldi」ブラウザについては、下記記事を参考にしてみてください。
https://www.naporitansushi.com/vivaldi/ダッシュボードに天気予報を登録する手順
まず表示させたい天気予報のサイトを開きます。Google検索などで「地域名 天気」とかで検索します。試しに広島県にある廿日市市の天気「廿日市市 天気」で調べてみます。
Googleの埋め込みの天気が表示され、その下に各天気予報サイトの検索結果が表示されます。自分が見やすいと思うサイトを開きます。
開いたらアドレスバーのURLをコピーします。試しに「廿日市市の3時間天気 – 日本気象協会 tenki.jp」のサイトをコピーしてみます。
スタートページのダッシュボードページを開きます。
既存であるウィジェットとは別で登録したいため、下部にある「ウィジェットを追加」ボタンをクリックします。ウィジェットの数によってはページを下にスクロールしないとボタンが表示されない可能性があります。
「ウェブページ」をクリックします。
URLのテキストボックスに先ほどコピーした天気予報のURLを貼り付けます。右クリック→貼り付けやCtrl+Vを活用しましょう。「完了」をクリックします。
これで指定したサイトの指定した地域の天気予報がダッシュボードに表示されます。ウェブサイトの読み込みが入るので表示されるまでに一瞬ラグがあります。インターネット環境がないと表示されません。
「tenki.jp」の場合上部にロゴなどが表示されるせいで、ウィジェットのファーストビューに表示されず、下にスクロールする必要があります。ウィジェット内にマウスカーソルを合わせてホイール回転でスクロールできます。
天気と言えば固定のサイトではなく、Google埋め込みの天気でもいけました。普段見るサイトというより、ウィジェットという画面が小さい場所で見やすいサイトを選ぶといいかなぁと思います。
色々登録してみました。ぶっちゃけ、どのサイトも当然上部にロゴなどがあるため、一目で見やすいかと言われたらどこも微妙でした。そこで次に紹介する小技です。
【コツ】スクロールせず1ページ目に表示させたい場合
大体どこの天気予報サイトも上部にロゴや余計なテキストがあり、実際の天気予報を見るにはウィジェット内でスクロールする必要がある状況でした。
どうにかできないかなーと考えたところ、Chromeなどどのブラウザにも実装されている「選択箇所へのリンクをコピー」機能を使うことで解決できました。
表示させたい天気予報サイトを開きます。表示させたら天気が表示されている付近にある固定のテキストを探します。「tenki.jp」だと天気の表内にある気温、降水量、温度などです。
固定のテキストってのは明日や明後日になっても表記がぶれない部分のことです。例えば降水量の「0mm」という数字を選んでしまうと明日降水量が10mmとかになった時、機能しなくなります。「tenki.jp」だと表の項目名は明日になっても明後日になっても変わりません。
天気付近にある固定のテキストを見つけたら、文字の範囲選択→右クリック→「選択箇所へのリンクをコピー」をクリックします。
場所によってはグレーアウトしてコピーできない場合があります。その場合「選択箇所へのリンクをコピー」が機能するテキスト上で実行します。
コピーしたテキストをアドレスバーに貼り付けます。ながったらしいURLですが規則性があります。最初のほうが通常のURLで途中「~:text=」という部分があり、それ以降が範囲選択した文字を表しています。
「~:text=」以降を一旦削除します。
本当に指定したい場所のテキストを通常のコピー（Ctrl+C）で「~:text=」以降に貼り付けます。その状態でURLをコピーしてウィジェットとして登録します。
この方法でもできないサイトがあります。その場合ドンマイです。
コピーしたURLをウェブページウィジェットとして登録します。既に登録したウェブページウィジェットを上書きで更新したい場合、ウィジェット右上の三点ボタン→「ウェブページURLを変更」をクリックします。
URLを貼り付けます。「選択箇所へのリンクをコピー」にした場合、URLの途中に必ず「~:text=」表記があります。
ダッシュボードを開いた時、範囲選択で指定したテキスト付近まで自動的にスクロールされた状態で表示されます。うまい具合に天気付近にできたらいちいちスクロールする手間が省けます。
コツとしては思ったより下のほうを「選択箇所へのリンクをコピー」する点です。上のほうだとスクロールされない場合があります。
またサイトによっては、タブとして開いた時は表示されていたけどウィジェットサイズ（モバイル用のレイアウト）になった時、表示されなくなる場合があります。一旦通常のURLをダッシュボードに登録して、モバイル用レイアウトでも存在しているかどうか確認するといいかなと思います。
例えば、Google検索した時に埋め込みで表示される天気は右下に「フィードバック」という文字がありますが、ウィジェットに登録した際は消えています。PC用とスマホ用でレイアウトが変わるんだと思います。
この場合、「フィードバック」のテキスト部分を「選択箇所へのリンクをコピー」してもウィジェット上では機能しないので、その横の「ウェザーニュース」を指定するといいかなと思います。
ただしその場合、ウェザーニュース以外から取得してきた場合ここの表記が変わると思うのでそれだと機能しなくなるんですよね。難しいとこです。
【上級編】CSSを適用する拡張機能でゴリゴリカスタマイズ
CSSがある程度分かる方でなおかつCSSを適用できる拡張機能「Stylus」などをインストールしている場合、より自由にカスタマイズできます。
Vivaldiは一時期サイドバーのウェブパネル上で拡張機能が使えないようになっていました。現在では動作（一部例外あるかも）するようになっており、もしや…？と思い試してみるとダッシュボード内に登録したウェブページでも動作しました。
以下のように拡張機能（例：Stylus）のスタイルシート上で「@media screen」の指定幅以下で動作するCSSを書き込みます。下記は記事執筆時点での「tenki.jp」上部にある各種ロゴなどです。「display: none」で消すようにしています。
これでダッシュボードを開くと、最初から不要な部分が非表示になった状態で表示されます。ちゃんとダッシュボード内でもCSSがきいている証拠です。
CSSを知っている前提、通常タブで開いた時には動作しないようウィンドウが指定した横幅以下の時だけ発動させる「@media screen」の活用…など少々初心者にはハードルが高いと思います。
感想
以上、「Vivaldi」ブラウザでスタートページのダッシュボードに天気予報のウェブページウィジェットを登録する方法でした。
僕の環境だとウェブページウィジェットを4個くらい登録すると微妙にスタートページの表示スピード？反応？が遅くなったので、なるべく標準で専用ウィジェットを実装してほしいなと思いました。
標準だと余計な要素が表示されないでしょうし、アイコンなどもVivaldiにあったものになるでしょうし。ただそこまでやるとなると結構手間だし大変そうだな…という思いもあります。現状ウェブページでいちお対応はできるのでこのままかもですね。