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 でサーバを立てます。
これで、リンクをクリックするとサーバーに定義しておいたコマンドが走り出し、終了するとブラウザに標準出力が表示されます。
今回制作したスクリプトのソースはこちらにあります。
クリエイティビティのジャイアニズム／CGMの受け手にあると良さげな「ツボのダイバーシティ」
ここにボーカロイドの樹というものがあると仮定します。クリエイターがこの樹にできる動作は「（樹高を）伸ばす」か「（新しい枝を）生やす」かのどちらかであるとすると、ryoさんのメルトやkzさんのpackagedは新しい枝を「生やした」、というか年輪の一番ど真ん中を形作りました。毎年wowakaさんやハチさんやDECOさんがその樹を「伸ばし」て、オワタPさんやアゴアニキPさん、ほぼ日Pさんたちは「枝を生やした」。そして2017年にこの樹を俯瞰すると、中心にズシンと芯の通った「ボカロ的」という概念と、そこから枝を分けるたくさんの「準ボカロ的」コンテキストがこんにちも豊かに実を作り続けているということだと思います。
もちろんナユタン星人さんはすごいし、ナブナさんもOrangestarさんもすごい、1年で何人か出て来る「20XX年のボカロP三銃士」みたいなのは、このボカロの樹の「年輪」となっていく人たちだと思っています。そしてここが僕のあまり好きじゃないところなのだけれど、ボカロ界隈は年輪「だけ」を心待ちにしているような節を感じます。錆び剥げていく僕達のコモンセンスをきちんと繋ぎとめてくれたのは「アンドロメダアンドロメダ」だったし「夜明けと蛍」のようなクリエイティビティだったのだけれど、ここではこのトップ曲群をある種のボカロ音楽のジャイアニズム的思想の結露と位置づけたいと思います。
ちなみに音楽的ジャイアニズムの権化は音ゲー界にあると思います。端的にいうと、速くすればいい、エモくすればいい。とにかくどれだけ肉汁のジュワっと出てコシの良いハンバーグを作れるかの競争がそこでは行われています。
僕もその実中高生ぐらいの頃は無心のなかで「ボカロの樹の年輪」になりたいと思って活動をしてきました。
でも、今は ジャイアニズム的な背比べから少し外れた場所にいたいんですよね。
リアル世界のアーティストでいうと、奥華子的であったり、くるり的であったり、やくしまるえつこ（相対性理論）的であったり。
コンテキストが複雑になりすぎて、僕達にはもうナユタン星人さんとナブナさんとOrangestarさんぐらいしか共通のコンテキストがなくなっていく。そういったジャイアニズム的年輪の追加ではなく、何か「新たな枝」を生やすというか、横へのうまい具合のピボットができないかというところを模索しています。だから今はポストアゴアニキPであったりポストほぼ日Pみたいな人をガンガンプッシュしていって、横の広がりが見えないと、ボカロもどんどん一番美味しいハンバーグを作った人が勝ちの世界になってしまうという気がしています。勿論それはスポ根的で賑やかなコミュニティで良いのだけれど、受け手としても、ツボというか、ストライクゾーンのダイバーシティを拡張していくと良いのではないかな？という気がしています。あれだけゼロ年代にたくさんの表現が生まれたボカロ界隈ですから、一〇年代はそれがますます広がっていくということです。そういった時代に、一つの表現や尺度に執着することなく、日々多様な表現を受け入れるマインドがあると良さげな気がしています。
自分が昼の世界で佇んでいるソフトウェアエンジニアリングの世界でも、アプリケーション、インフラ、ネイティブ（アプリのこと）とかいろいろコンテキストがあって、それぞれに豊かなアプリケーションやら設計思想やらコミュニティやらが実っているわけで、ボカロ界隈の飽和しきった（UTAUもCeVIOもあるぞ）コンテキストをひっくるめて今年の再生数上位3人、みたいな情報量の低いまとめ方は面白みはなくなっていくかと思います。今日のところは以上です。
ひさびさの新曲「birthday」でセルフ一問一答ライナーノーツ
いやー作ったねえ。
作るときは毎回一瞬なんだよね。
＃ 曲名の由来は？
11月3日の誕生日にループと歌詞だけできたまま放置してた
＃ これはどんな曲？
鎖国して自分のカルチャーに引きこもりますハイみなさんさようならって曲。
ほら江戸幕府も400年ぐらい鎖国してたんだから僕だって20代のチョットぐらい何も取り入れなくたっていいでしょ
＃ Bメロのラララーのやつなんなの
Bメロには歌詞があるやろという縛りから自由になりたいと思った結果非言語になった。
＃ ギターの音良くなったね
そうなんだよRealLPCをポチってしまったよ～～～～～
あとSquierのストラトキャスター買ったんで練習してます。3年後くらいには僕の曲は全部生ギターになっている。
＃ 音の抜け良くなったね
そうなんだよFOSTEXのPM0.3b買ったんだよ～～～～～
スピーカーがあると「クソな音像が作れなくなる」ね。今までiPhoneのイヤホンだけで全部完パケしてたけどやっぱ限界があったということですね。
ってことでオーディオインタフェースとか音ネタなんかよりまっ先にスピーカー買っときゃ良かったって今めっちゃ反省中。
あと独居始まって勝手に音出せる環境になったから音を確かめられる時間が増えたってのもある。
＃ 曲微妙じゃない？
今年の目標：クソ悩んで100点を1曲作るより能天気に50点を100曲作る
＃ 去年何してたの
社畜してました。
＃ 今年何するの
なんとしても去年の怠惰を返上するためにアルバム2枚出します
MonstercatのネットDJイベントがおもろい話（今更）
DTM Advent Calendar 2016の22日目の記事です
最近見つけたおもろいネットイベントにMonsterCharityがある、三行でいうと
・カナダのバンクーバーを拠点とするネットレーベルMonsterCatが
・Child's Playという慈善団体とのコラボで
・MineCraft上でDJイベントをやってた
ってやつなんですけど、これが音楽を通した社会貢献っていう枠と、MineCraftでのネットイベントっていう面白さがクロスしてすげー良さげだなあ。っていうのを思いました。とりあえずこれを見てくれ。
もしサバプロで学生がrails generate scaffoldを打ったら
この記事はCPS Lab Advent Calendar 2016の20日目の記事です。
（前注）サバプロ→「サーバプログラミング演習」。弊学科3年次に、5人組になってJava+Tomcat+Apache+PostgreSQLを利用して要件定義、クラス設計からMVCフレームワークまでを一気にさらう鬼科目の事。
私たち情報メディア学科ーー他学部でも本研究室に入ることはできますがーーの学生の最終的なスキルセットは、Java、C、Processing、HTML、CSS、JavaScriptというのがふつうです。オブジェクト指向も「Java」、データベースも「「Java」」、サ ー バ 構 築 演 習 も 「 J a v a 」 で 行 っ て い ま す 。（←ゆっくりのスローボイスっぽく）
その一方で、スーパーファミコン（慶応義塾大学湘南藤沢キャンパス）の学生は1年生でJavaScriptを、Javaでオブジェクト指向を、そしてRuby on Railsをたたく科目が存在するようです。明治大学総合数理学部ネットワークデザイン学科はカリキュラムの中でPerlやPython、Raspberry Piをたたく科目が存在しています。（流石にiOSやAndroidプログラミングはチラッと見たけどゼミレベルの科目にしかありませんでした。）僕がウチの学科の後輩に「Web系に行きたいならさっさとインターンをしろ」と言っているのはこのためです。弊学科からWeb系に就職するには、課外時間でかなりの知見を積むことが要求されます。Rubyすら「ゼロ」です。モダンJavaScriptのモの字にも触れていません。この先、SNSや、ソーシャルゲームが流行っていくなかで、SI屋さんよりもWeb系を志す学生は本学でも増えていくのではないでしょうか？
そこで僕がオススメしたいのが、「サバプロ事前アンケート」です。それも、集める項目は「将来どっちかというとSI屋さんになりたいか、それともWeb屋さんになりたいか」この一つだけです。この結果によって、学生を「Ruby on Rails + Unicorn + nginx + git組」と「Java + Apache + Tomcat + タイムスタンプのzipでバージョン管理組」に二分し、授業を開始します。これにより得られる効果は次のとおりです：
・将来Web系に進みたい人がほぼ絶対にやることのないTomcat開発を強いられることを避けることができ、就活のためのRuby on Rails開発の弾を得ることができる。
・お互いの発表を見ながら「こういう開発フレームワークがあるのか」「こういう言語があるのか」という勉強になり発想が広がる。
・MVCや要件定義というクラス設計やプロジェクトマネジメントのコンテキストにおいて齟齬が発生しにくい（と思う）。
現況としては、学習意欲の高い学生のいるチームが、自主的にC#やPHPなどの言語を用いたりして半ば「勝手に」授業をハックしているという状態ですが、教室側からのハックが伴えば、サバプロは今以上に「Webプログラミングの文化祭」のようになり、履修してよかったと思う学生も増えるのではないでしょうか。サーバサイドはAPIだけを吐き、iOSまたはAndroidでネイティブアプリを開発、（できたらフロントエンドでSingle Page Applicationもつくる）のような猛者が現れたら楽しいですね。
以上、授業を通して、プログラミングに対するスキルセットやマインドセットが豊かになるようなハックの必要性を見直す良いきっかけが、サバプロには隠れていると思ってやまない今日この頃でした。
＃ サバプロはどうしたらさっさと学生にrails scaffold generateを打たせられるか
副手のみんな〜〜
家系ラーメン、ラーメン二郎という「メタラーメン」と「物語消費」
CPS Lab Advent Calendar 2016の17日目の記事どす
大塚英志さんは「定本 物語消費論」の中で、「商品そのものが消費されるのではない。それを通じて背後にある大きな物語（設定や世界観）が消費される」「しかし実際には大きな物語は売ることができないので、その断片である小さな物語を見せかけに消費させる」とし、その例として子供たちがビックリマンチョコレートのシールあつめに（チョコレートという使用価値ではなく）記号的な価値を見出したというふうに示しています。
僕たちは「初めての二郎が神保町二郎だった」というと「大変だったね」とかいうし、「二郎の大を食べたことがある」というと「ワーオ」となります。それはラーメンを何百グラム食べたということよりもただ「二郎」というインタフェースを通したことにその説得力が結実しています。家系ラーメンやラーメン二郎は、ラーメンではなく物語なのです。そして、僕たちはラーメンを消費しているのとともに、「○○店の二郎のニンニクアブラヤサイマシマシを食べた」「武蔵家でゴハンを○回おかわりした」というふうにその背後にある家系や二郎というメタ的な物語消費を行っているのです。似たような飲食店に大盛りナポリタンのパンチョや、ゴーゴーカレー、伝説のすた丼などがありますが、これらも家系や二郎と同じく僕たちは暗黙的に何か商品価値以外の物語的なものを求めているのではないでしょうか。そして従来物語というものは頭にあざやかに残り、なかなか抜け出せないものです。ゆえに大学時代の僕は夢中で東京のラーメン店を駆けずり回って遊んだ、というわけです。
＃ 物語から非物語へ
非物語的な食事として、外食しかできない状態の学生におすすめしたいのがお弁当と学食ですが、最も奨励するのは大学の至近に家を借りてメシのたびに自炊することです。最近、スーパーで売っている普通のつけ麺を食べるようになってから三田製麺所に行かなくなりました。キャベツと卵を加えても価格はお店で食べる１／３ぐらいにおさえられてスマートです。意図しない外食が増えて野菜が余った時は、思い切って全部ゆでて、ヤサイマシマシとか言いながらラーメンの具にしたりして、ラーメン二郎を思い出しながら食べたりしています。毎食外食するのであれば部屋を借りて自炊生活をするのとあまり月の消費額も変わらないのではないでしょうか？
以上、家系ラーメン、ラーメン二郎というインタフェースは、その食品的、商品的な価値以上に、「完食」の物語を共有するコミュニケーションの場として一〇年代のフードジャンキーたちに受け入れられているのではないか、という仮説をお送りいたしました。
P.S.大学にキッチンを作ってくれ
