読者です 読者をやめる 読者になる 読者になる

Safari Extensions + Sinatraを使ってYouTubeの画面上にワンクリックでmp3でダウンロードするボタンを生やす

Safari Extensions を使ってYouTubeにワンクリックでmp3でDLするボタンを生やすことに挑戦してみました。

 

YouTubeのページ内に出現する動画へのリンクやプレイヤーの近くにmp3でダウンロードする動線を追加してみます。

リンクをクリックするとローカルに立てたサーバーがyoutube-dlコマンドをたたき、デスクトップにmp3ファイルを保存します。

スクリーンショット

トップページ

f:id:keisei_1092:20170122135537p:plain

 

検索結果

 

f:id:keisei_1092:20170122135541p:plain

 

プレイヤー

 

f:id:keisei_1092:20170122135544p:plain

 

実装

まず、youtube-dl をインストールします。

 

gist969d51740bf7d7d7fb633874971482c9

 

YouTube-dlの基本的な使い方は以下です。

 

gist5aac96730ecc9e487bc0bcf6a379da08

 

Safari Extension 

まず、Safari Extensionを使って、ページ内の各動画のプレイヤーやリンクの近くにmp3ダウンロード用の動線を生やします。

リンク先は後述するサーバーで、パラメータとして動画IDを渡していきます。

f:id:keisei_1092:20170122163257p:plain

f:id:keisei_1092:20170122163309p:plain

  • デベロッパーツールのExtension Builderを開く
  • 左下のNew Extensionを押して適当な場所にExtensionを初期化
  • 対象URLを追加して www.youtube.comにする
  • Secure URLでも実行にチェックを入れる
  • jQueryを落としてくるか、Extensionのディレクトリでyarn init→yarn add jqueryする
  • ページを開く前に実行するJavaScriptのところにjquery.min.jsいれる
  • ページを開いた後に実行するJavaScriptのところにindex.jsいれる

 

コードはこんな感じ

  

gist49f15f60edbdc76b1d7b246068a54cd1

 

証明書らへんはちょっとよくわからなかったのでうまく動かない方は他を参照してみてください。

 

サーバ側 

youtube-dlコマンドをたたくためだけのサーバを立ててそこにvideo IDを伝えるようにします。

 

今回はSinatraを使います。

常に立てておくと他のアプリ開発のときにポートが被って邪魔なので、適当に4568とかに変えておきます。

サーバにアクセスしたくなったたびにターミナルを立てるコマンドを打つのは面倒なので、リクエストが飛んできたら勝手に立つようにしたいです。

おそらくPowなどを使って実現できると思っています。

 

コード例

 

gistc043caef6f6de2082a9d22d8dfbb61d8

 

ruby server.rb でサーバを立てます。

 

これで、リンクをクリックするとサーバーに定義しておいたコマンドが走り出し、終了するとブラウザに標準出力が表示されます。

 

今回制作したスクリプトのソースはこちらにあります。

 

github.com