【超有能ブラウザ】まだキミは地道に検索してるのかい！？【Vivaldi解説 #012】

1. はじめに

この記事は動画の宣伝用になります。
動画内で解説したコマンドチェインの画像や
説明を省いたコードの解説も載せてあります。

詳細な情報や最新情報は Discord で一足早く入手できます。
興味があれば、お気軽にどうぞ

Discordサーバー「けまる@アプリ・ガジェット解説ch」に参加しよう！

---

2. 本動画での解説内容

ウェブパネルの実用的な運用方法

• 簡単に商品を複数ECサイトで比較

• 翻訳作業用の構成を表示

• Google 翻訳でページ翻訳

• Youtube を色んな条件で検索

• Youtube 動画をリスト付きで開く

• 動画を PIP モードで自動再生

---

3. コマンドチェインの解説

3-1. 簡単に商品を複数ECサイトで比較

手順１：検索エンジンの登録

　① 目的の EC サイトの検索欄を右クリック
　② 表示される「検索エンジンとして追加」を選択する

　③ 名前とニックネームを入力する
　　ニックネームは単語 1 字、2字が良い
　　例：Youtube で異なる検索条件を登録する場合
　　　　Youtube（今日）　　： yt　（youtube today）
　　　　Youtube（視聴回数）： yv　（youtube view）

ニックネームは自分が覚えやすいものにした方が良い

最初の登録で間違えたり、設定が微妙でもいつでも直せる

手順２：コマンドチェインの登録

3-2. 翻訳作業用の構成を表示

手順：コマンドチェインの登録
　新しいタブでリンクを開くは単純に開きたいサイトを指定すればよい。

3-3. Google 翻訳でページ翻訳

①コマンドチェインの登録

②ブックマークレット

コピペ用

javascript:(function(){window.open("https://translate.google.co.jp/translate?sl=en&tl=ja&js=y&prev=_t&hl=ja&ie=UTF-8&u="+encodeURIComponent(location.href))})();

コード詳細

javascript:(function()
{
 // 新しいウィンドウやタブを開くための関数
 window.open(XXX)
　
 XXX の部分
 // Google 翻訳にページ翻訳で言語指定などのパラメータを送る処理
 "https://translate.google.co.jp/translate?sl=en&tl=ja&js=y&prev=_t&hl=ja&ie=UTF-8&u="
 // 現在開いているページの読み取り部分
 + encodeURIComponent(location.href)
})();

3-4. Youtube を色んな条件で検索

手順１：検索エンジンの登録

① Youtube で適当な単語で動画を検索する。
② 検索条件をいじる。
③ 好みの検索条件が出来たら、URL をコピーする。

④ URL の一部文字列を修正する（検索した単語の部分を %s に置き換え）。

%s に置き換えるだけ

// 元々のソースコード
https://www.youtube.com/results?search_query=麻雀解説&sp=CAISBggCEAEYAw%253D%253D

// 変更後
https://www.youtube.com/results?search_query=%s&sp=CAISBggCEAEYAw%253D%253D

// URL の解説
固定部分　　　　：　https://www.youtube.com/results?search_query=
検索文字列　　　：　%s
動画の検索条件　：　&sp=CAISBggCEAEYAw%253D%253D 

登録できれば OK、アドレスバーに「ニックネーム 単語」の順に入力して動作確認

手順２：コマンドチェインの登録

3-5. Youtube 動画をリスト付きで開く

①コマンドチェインの登録

// パラメータの解説
{リンク_URL}           ：　リンクのプレースホルダー
&list=UL01234567890   ：　Youtube で古い順にリスト再生するパラメータ

3-6. 動画を PIP モードで自動再生

①コマンドチェインの登録

②ブックマークレット

コピペ用

javascript:if("pictureInPictureEnabled"in document&&"querySelectorAll"in document){(async function(){const a=document.querySelectorAll("video");if(0===a.length)window.alert("Sorry, no videos on the page.");else if(0<a.length){const b=a[0];try{b===document.pictureInPictureElement?await document.exitPictureInPicture():await b.requestPictureInPicture()}catch(a){console.error(a)}}})()}else"pictureInPictureEnabled"in document?document.pictureInPictureEnabled||window.alert("Picture-in-Picture not available."):window.alert("Picture-in-Picture is disabled.");

コード詳細

// ページ内の動画を PIP モードで再生できるかチェック
javascript:if ("pictureInPictureEnabled" in document && "querySelectorAll" in document) {
  // 非同期処理
　(async function () {
    //  <video> タグの取得
    const videos = document.querySelectorAll("video");

　　// videos 変数に格納された要素が 0 の場合に警告
    if (videos.length === 0) {
      window.alert("Sorry, no videos on the page.");
    } 
    // videos 変数が格納されている
    else if (videos.length > 0) {
      const video = videos[0];
      try {
　　　　// PIP モードかどうか
        if (video === document.pictureInPictureElement) {
          // 通常モードのリクエスト
          await document.exitPictureInPicture();
        } else {
          // PIP モードのリクエスト
          await video.requestPictureInPicture();
        }
      }
      // エラーケース
      catch (error) {
        console.error(error);   
      }
    }
  })();
}

// PIP が利用できない場合のエラーケース
else if ("pictureInPictureEnabled" in document) {
  if (!document.pictureInPictureEnabled) {
    window.alert("Picture-in-Picture not available.");
  }
}
// 
else {
  window.alert("Picture-in-Picture is disabled.");
}

---

#ライフスタイル
#アプリ
#おすすめアプリ
#便利
#youtube動画
#Youtubeチャンネル
#YMM4
#ブラウザ
#Vivaldi
#Vivaldiブラウザ
#ずんだもん解説