オンガクスリを作業用BGMとしてフル活用するためのブックマークレットをつくりました

qiita.com

この記事は作業用BGM(個人or社内) Advent Calendar 2015 の18日目の記事です。
今回は作業用BGMから人生の悩みを解決するような音楽まで見つかるかもしれない、オンガクスリというウェブサービスについて紹介したいと思います。

オンガクスリとは

オンガクスリは、あなたにとっていま一番必要な音楽と出会えるサービスです。
Twitter か Facebook のアカウントがあれば、誰でも手軽に楽しむことができます。

http://ongakusuri.com/ongakusuri.com

オンガクスリの構成要素

「悩み」「音楽」「キクね！」の3つの要素から成り立っています。

ざっくり言うと、

「悩み」に対して、「音楽」を投稿し、「キクね！」で評価するというサービスですね。
なので「悩み」に対して1つのプレイリストがつくられるわけです。

サイト内から引用すると、

50文字以内で悩みを打ち明けると、世界のどこかにいるやさしい誰かが、あなたの悩みに効きそうな音楽を教えてくれます。
みんなの悩みを見て、Youtubeからその悩みに効きそうな音楽を教えてあげましょう。
誰かが教えてくれた音楽を聴いて、もし気に入ったら、「キクね！」ボタンで感謝の気持ちを伝えましょう。

という感じです。

処方例

文章ではうまく伝わらない部分もあると思いますので、具体的にどのような悩みにどのような音楽が処方されているのかを見てみましょう。

お昼ごはんが食べたい。

http://ongakusuri.com/topic/3315ongakusuri.com

例えば「お昼ごはんが食べたい。」という悩みに対しては、こんなの曲々が処方されます。

いっぱい食べる君が好き川本真琴

ORANGE RANGE - SUSHI食べたい feat. ソイソース

Sharan Q - Ramen Daisuki Koike-san no Uta (ORIGINAL PV) [1991]

川本真琴やきそばパン

なかなか良い選曲ですね。個人的にはやきそばパンは名曲だと思います。

さてさて、オンガクスリの紹介はこれぐらいにしておいて、本題に入りましょう。
オンガクスリをつかっていると気づくんですが、結構な頻度で自分の投稿した曲を作業用BGMのプレイリストとしてつかいたくなります。
そんな時のために、かつてブックマークレットをつくったのですが、いつのまにか動かなくなっていました。
そこで今回はこちらのブックマークレットを修理してみようと思います。

kimizuka.hatenablog.com

以前つくったブックマークレットのソースを確認

こちらのブックマークレット、minifyされてしまっているので読みにくいですが、ソースはこんな感じです。

var queue = [];
$.each($('.musicData > .thumbnail'), function(i) {
  queue.push((this.src).replace(/http:\/\/i\.ytimg\.com\/vi\//, '').replace(/\/.+$/, ''))
});
$('.head').after('<div id=\'player\'>');
var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '195',
    width: '320',
    events: {
      'onReady': function() {
        player.loadPlaylist(queue);
        player.playVideo()
      }
    }
  })
}
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

なにをやっているかを簡単に解説すると、

YouTubeのサムネイルからvideoIDを取得
取得したvideoIDを配列にする
配列をプレイリストにしたプレイヤーを生成

という感じです。

なぜ動かなくなったのか

どうやら、

YouTubeのサムネイルからvideoIDを取得

の部分が失敗しているようです。
よくよく見てみると、サムネイルのURLが http から https に変更になっています。
そういうことであれば正規表現をちょっと変えるだけで動きそうですね。

改修

var queue = [];
$.each($('.musicData > .thumbnail'), function(i) {
  queue.push((this.src).replace(/http(s?):\/\/i\.ytimg\.com\/vi\//, '').replace(/\/.+$/, ''))
});
$('.head').after('<div id=\'player\'>');
var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '195',
    width: '320',
    events: {
      'onReady': function() {
        player.loadPlaylist(queue);
        player.playVideo()
      }
    }
  })
}
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

以前は、

  queue.push((this.src).replace(/http:\/\/i\.ytimg\.com\/vi\//, '').replace(/\/.+$/, ''))

だったところを、

  queue.push((this.src).replace(/http(s?):\/\/i\.ytimg\.com\/vi\//, '').replace(/\/.+$/, ''))

としただけです。
一応またhttpに戻っても動くように?をつけておきました。

ついでにセミコロンをつけたりvar宣言をまとめたりしておきましょう。

var queue = [],
    tag = document.createElement('script'),
    firstScriptTag = document.getElementsByTagName('script')[0],
    player, firstScriptTag;

$.each($('.musicData > .thumbnail'), function(i) {
  queue.push((this.src).replace(/http(s?):\/\/i\.ytimg\.com\/vi\//, '').replace(/\/.+$/, ''));
});
$('.head').after('<div id=\'player\'>');

tag.src = 'https://www.youtube.com/iframe_api';
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '195',
    width: '320',
    events: {
      'onReady': function() {
        player.loadPlaylist(queue);
        player.playVideo();
      }
    }
  });
}

完璧ですね。

公開する

前回はJSをワンライナーにしてURLに埋め込んでいましたが、それだと保守しにくいので、今回は外部JSを読み込む方式に変更しておきます。

kimizuka.hatenablog.com

完成したものがこちらです。

つかいかた

アイコンをブックマークバーにドラックして登録
オンガクスリ（ http://ongakusuri.com ）にアクセス
マイページへ移動
投稿した音楽ページに移動
投稿した音楽の読み込みが終わったら 1でつくったブックマークをクリック

※ Chromeでしか動作確認してません

これで自分の投稿した曲を作業用BGMのプレイリストとして活用できますね。
明日はiguchi1124さんがアニソンを紹介してくれるようです。

みかづきブログその3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。