はじめに
こんにちは！
Qiita記事投稿をさぼってた人です（）
今回は、最近はまっているKiiteで実装されていない、単曲ループ再生の方法を紹介します！
結論
javascript:(function() { if (musicPlayer.loop) { musicPlayer.next = function () { var a = this.current + 1 < this.playlist.length ? this.current + 1 : 0; this.loop ? 0 === a && this.shuffled && this.options.playlistOptions.shuffleOnLoop && this.playlist.length > 1 ? this.shuffle(!0, !0) : this.play(a) : a > 0 && this.play(a) }; alert('ループを解除しました。'); musicPlayer.loop = false; } else { musicPlayer.next = function() { musicPlayer.play(musicPlayer.current) }; alert(`${musicPlayer.currentMedia.title}をループします。`); musicPlayer.loop = true; } }());
これをコピー、ブックマークに追加するだけです！
詳細説明
まず、ブックマークマネージャーを開きます。
（ctrl + shift + O で開けることが多い）
右上の点三つを押します。
でてきたポップアップの[新しいブックマークを追加]をクリック
「名前」 にわかりやすい名前('KiiteLoop'とか)を入力し、
下の 「URL」 に、上の「javascript:」から始まるコードを貼り付けます。
技術的な話
Qiitaなので、少し技術的な話を...
これは、ブックマークレットと呼ばれる技術です。
ブックマークレット とは、ユーザーがウェブブラウザのブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。 ウィキペディア
ブックマークに追加した
javascript:
から始まるコードを実行してくれる技術
という認識でも問題はないと思います。
では、少し実験してみましょう。
ブックマークレットでalert
まずは、alertしてみましょう。
javascript:alert("Hello from Bookmarklet")
上で紹介した登録方法に沿って行うと、このような表示が出てくると思います。
このように。ブックマークレットを使うことで、超簡単にjsを実行できるようになります！
コードの解説
では、紹介したコードの解説をしていきましょう。
javascript:(function() { if (musicPlayer.loop) { musicPlayer.next = function () { var a = this.current + 1 < this.playlist.length ? this.current + 1 : 0; this.loop ? 0 === a && this.shuffled && this.options.playlistOptions.shuffleOnLoop && this.playlist.length > 1 ? this.shuffle(!0, !0) : this.play(a) : a > 0 && this.play(a) }; alert('ループを解除しました。'); musicPlayer.loop = false; } else { musicPlayer.next = function() { musicPlayer.play(musicPlayer.current) }; alert(`${musicPlayer.currentMedia.title}をループします。`); musicPlayer.loop = true; } }());
わかりにくいので、きれいにしましょう。
javascript:
(function() {
if (musicPlayer.loop) {
musicPlayer.next = function () {
var a = this.current + 1 < this.playlist.length ? this.current + 1 : 0;
this.loop ? 0 === a && this.shuffled && this.options.playlistOptions.shuffleOnLoop && this.playlist.length > 1 ? this.shuffle(!0, !0) : this.play(a) : a > 0 && this.play(a)
};
alert('ループを解除しました。');
musicPlayer.loop = false;
} else {
musicPlayer.next = function() {
musicPlayer.play(musicPlayer.current)
};
alert(`${musicPlayer.currentMedia.title}をループします。`);
musicPlayer.loop = true;
}
}());
これで、見やすくなりましたね。
順を追って説明していきます。
即時関数
ブックマークレットで複数行のコードを使いたかったので、即時関数と呼ばれるものを使いました。
構文は、
(function() {
// 実行したいコード
}());
です。
これにより、関数に名前を付けない状態ですぐに実行されます。
後ろについてる () は引数を入れる場所です。
つまり、
(function(x, y) {
// 実行したいコード
}(1, 2));
こういうことができます。
musicPlayer
Kiiteには、musicPlayerというものがあります。
これにアクセスすることで、再生中の曲などのKiiteの情報を取得できます。
.loop
そのなかに、 .loop というものが用意されています。
これは、何も仕事をしていません。
これのt/fをいじっても何も反応しません。
なので、musicPlayerの条件分岐に有効活用させてもらいました。
ループをするコードを実行したら、この変数を true にし、
解除したら false にしています。
.next
ここには、次再生する曲を決める、このようなコードが記述されていました。
これは、簡単に言うと、次の曲のプレイリスト番号用意し、再生するものです。
musicPlayer.next = function () {
var a = this.current + 1 < this.playlist.length ? this.current + 1 : 0;
this.loop ? 0 === a && this.shuffled && this.options.playlistOptions.shuffleOnLoop && this.playlist.length > 1 ? this.shuffle(!0, !0) : this.play(a) : a > 0 && this.play(a)
};
ここに、現在再生している曲の番号を与えるようにすると、同じ曲が再生されるようになります。
musicPlayer.next = function() {
musicPlayer.play(musicPlayer.current)
};
.currentMedia
これは、再生中の楽曲の情報が格納されています。
ここでは、この中の title を取得しました。
これで、ループする楽曲をポップアップでお知らせできるようになりました。
最後に
今年もアドベントカレンダーのくそアプリ選手権に出場します！！！
最近手に入れた機械学習を活用して面白いものを用意しています！
どうぞ、よろしくお願いします！！！！！！！！
では ﾉｼ