メインコンテンツへスキップ
見出し画像
Photo byillust_sion

Youtube動画をBraveブラウザのPlaylistにローカル保存する操作を効率化してみた【iPhoneショートカット】【ブックマークレット】

    以前、iPhoneブラウザ王決定戦という記事を書いたのですが。
    この記事読み返したら、ブラウザ王決定してないやん!ということに気づきました。現在のメインブラウザはSafariです(笑)

    この記事で現在僕の動画コンテンツ消費専用として活躍しているBraveというブラウザを紹介しました。

    何故かYouTubeさんの厳しい検閲に引っかからず広告ブロックで
    動画見放題、しかもローカル保存も可能な謎ブラウザBraveさん。

    都心でのスマホ回線の繋がりが悪い僕は毎朝通勤用に見る動画をiPhoneのBraveさんに保存するのが日課となっていました。

    ただ、ひとつ不満が・・・
    ローカル保存する手順が動画をひとつひとつ開いて、ボタン押すという手段しかないのですよ。一括で登録することが一切できず(泣)
    これが地味にめんどくさい。
    なんとかならないものか......

    というわけで効率化の仕組みをiPhoneショートカットで作ってみました。今回はブックマークレットと組み合わせております。

    BraveさんのUIが独自路線なこともあり、抜本的な効率化とは行きませんが、地味な手作業をストレスなくこなせるようにはなったと思います。

    今回のレシピ本体
    (レシピとは別に、Safariへのブックマークレット登録が必要となります。後述します)




    1.こだわりポイント

    結局は動画開いてボタンタップするだけの操作なのですが、無駄に複雑なフローとなっておりまして。

    画面切り替え時の導線がスムーズになるよう工夫したつもりです。

    何故かBraveの動画保存なのにSafariを経由する謎仕様なのも執念じみたこだわりの結果でして。

    実は今回の確定版の前にも僕のnoteではお馴染みのscriptableで作ったバージョンがあり、そのあとでSafariの共有ボタンからショートカット実行するバージョンになって、最終的にブックマークレット使う方式に落ち着きました。


    2.仕組み

    ①iPhoneショートカットを起動するとYoutubeの再生リストがsafariで開きます。
    (僕は「後で見る」リストにしていますが、他の再生リストや登録チャンネルのタイムラインでも対応可能のはずです)

    ②ショートカットの「表示を開く」アクションでブックマークの画面が自動で開くので登録していたブックマークレットを実行。

    ③再生リスト内の動画のタイトル、URLの情報を取得。クリップボード経由でショートカットに戻す。
    (ちなみにこの場面ではクリップボードにJSON形式のyoutubeデータが格納されるまで待機する仕組みになっています。意地でもボタン押す回数を減らしたい病)

    ④ショートカットでリストに成形。リスト選択画面が表示されるのでBraveのPlaylistに登録する動画を選択。

    ⑤選択した動画がBraveのタブで一気に開くので一つ一つPlaylistに登録していく。終わったらアラートのOKを押す。

    上記の太字部分が手動操作となります。


    3.設定方法

    【ブックマークレットの登録】
    登録方法は以下のサイトなどをご参照ください。

    ①Safariにダミーとなるブックマークを登録する(なんでもOK)

    ブックマーク管理画面の編集からURL部分に以下のブックマークレットをコピペして保存してください。
    登録名はご自分でわかりやすものに変更してください。

    javascript:(async()=%3E%7Blet%20videos=%5B%5D;document.querySelectorAll(%22a%5Bhref*='watch?v='%5D%22).forEach((a,i)=%3E%7Blet%20href=a.getAttribute(%22href%22);let%20title=a.getAttribute(%22title%22)%7C%7Ca.innerText%7C%7C%22%22;if(href&&href.includes(%22watch?v=%22)&&title.trim().length%3E0&&!title.includes(%22再生%22)&&!title.includes(%22シャッフル%22)&&!title.includes(%22後で見る%22))%7Blet%20id=href.split(%22v=%22)%5B1%5D.split(%22&%22)%5B0%5D;videos.push(%7Bindex:i,title:title.trim(),url:%22https://www.youtube.com/watch?v=%22+id%7D);%7D%7D);let%20text=JSON.stringify(videos);try%7Bawait%20navigator.clipboard.writeText(text);%7Dcatch(e)%7Bprompt(%22コピーできません%E3%80%82手動コピーしてください%22,text);%7D%7D)();

    これでブックマークレットの登録は完了です。

    実行しやすようにブックマークの一覧の上の方に配置しておくと便利かと思います。


    4.動作イメージ

    初期設定:
    初期段階ではyoutubeの後で見るリストになっています。
    必要でしたら任意の再生リストのURLに変更してください。

    画像
    youtubeのURLをSafariに渡すと
    youtube公式アプリで開く挙動になるので回避のため
    同じURLを2回開くことで無理やりSafariで開いています。

    ①ダウンロードしたショートカットレシピを実行します。

    画像
    右は没となったscriptable版です

    ②youtubeのページが開き、続いてブックマークの画面が開きます。

    画像
    本数多いと選ぶ時大変かもしれませんね
    画像
    ブックマークレット使ったのすごい久々・・・

    ✅こだわりポイント
      共有から同機能のショートカット実行のバージョンの時は、共有→ショートカット実行の2アクションだったが、ブックマークレットにしたことによりショートカットの機能でブックマーク画面を自動で開くので1アクションで済む(コンマ数秒の短縮(笑))

    ③youtubeの指定した再生リストに登録してある動画をリスト選択する画面が立ち上がります。複数選択可能です。

    画像
    適当に伏字にしてますが、僕のリアルな再生リストです。
    2番目はあのちゃんねるだと思う・・・

    ④選択した動画がBraveで一気に開きます。
    下部の音符のボタンを押すとPlaylistに登録され、事前に設定しておけば同時にローカル保存もされます。
    すべての動画を保存し、不要なタブを閉じ終わったらOKを押します。

    画像
    下の音符ボタンを押せば登録されます。

    ⑤Safariに戻って一番最初に開いたyoutubeの再生リストのタブを閉じます(自動)

    【問題点】
    ⑤の動作が不安定で、手動で閉じた方が速い気もしますね・・・

    【各バージョンの一長一短】
    ✅scriptable版
    →ショートカット実行で再生リストの一覧取得までやってくれるので実は一番操作手順は少ない。
    ただ、異常終了後の立ち上がりが不安定だったり、使用するためにはyoutubeのAPIキーが必要という初期設定のハードルの高さがあったのに、使える再生リストは公開設定のもののみだったので不採用になりました。

    ✅Safari共有からショートカット実行版
    →実はブックマークレット版との違いは再生リスト一覧取得の際のボタン押す回数が1回か2回の差ぐらい。安定性は一番良かったかも。


    5.まとめ

    毎度おなじみですが、割と時間もかけてこだわって作っているのに短縮できている時間は良くて数分レベルです。

    20本くらい一気に登録する人なら結構時短になるかもしれませんが、僕はせいぜい1日5本くらいしか保存しないですしね。

    Braveさんは超おすすめなブラウザです!


    iPhoneショートカットアプリ関連




    この記事が参加している募集

     
     
    本当のお仕事は底辺の非正規労働者。東京都在住。現実逃避のためchatGPTと一緒に無駄に真面目な開発ごっこをしています。効率化とタスク管理を好む一方で非効率でも自動で動くカッコよさげな仕組みも好き。実はITスキル低め。趣味はAbemaの報道リアリティショー『アベマプライム』視聴。

    あなたへのおすすめ