Safari Extensions + Sinatraを使ってYouTubeの画面上にワンクリックでmp3でダウンロードするボタンを生やす
Safari Extensions を使ってYouTubeにワンクリックでmp3でDLするボタンを生やすことに挑戦してみました。
YouTubeのページ内に出現する動画へのリンクやプレイヤーの近くにmp3でダウンロードする動線を追加してみます。
リンクをクリックするとローカルに立てたサーバーがyoutube-dlコマンドをたたき、デスクトップにmp3ファイルを保存します。
スクリーンショット
トップページ
検索結果
プレイヤー
実装
まず、youtube-dl をインストールします。
gist969d51740bf7d7d7fb633874971482c9
YouTube-dlの基本的な使い方は以下です。
gist5aac96730ecc9e487bc0bcf6a379da08
Safari Extension
まず、Safari Extensionを使って、ページ内の各動画のプレイヤーやリンクの近くにmp3ダウンロード用の動線を生やします。
リンク先は後述するサーバーで、パラメータとして動画IDを渡していきます。
- デベロッパーツールの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 でサーバを立てます。
これで、リンクをクリックするとサーバーに定義しておいたコマンドが走り出し、終了するとブラウザに標準出力が表示されます。
今回制作したスクリプトのソースはこちらにあります。
