Kiiteで単曲ループ再生 【ブックマークレット】

# はじめに
こんにちは！

Qiita記事投稿をさぼってた人です（）

今回は、最近はまっているKiiteで実装されていない、単曲ループ再生の方法を紹介します！

# 結論

```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; } }());
```

これをコピー、ブックマークに追加するだけです！

## 詳細説明

まず、ブックマークマネージャーを開きます。
（`ctrl + shift + O` で開けることが多い）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/90d05a9f-a503-7a2d-19fd-b102ca0a33cd.png)
右上の点三つを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/3524df94-a833-1b84-899c-ff79f528f46f.png)
でてきたポップアップの`[新しいブックマークを追加]`をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/ef862eee-3ed7-4812-a852-8336de2ee201.png)
**「名前」** にわかりやすい名前('KiiteLoop'とか)を入力し、
下の **「URL」** に、上の「`javascript:`」から始まるコードを貼り付けます。

# 技術的な話
Qiitaなので、少し技術的な話を...

これは、ブックマークレットと呼ばれる技術です。

> ブックマークレット とは、ユーザーがウェブブラウザのブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。 [ウィキペディア](https://ja.wikipedia.org/wiki/ブックマークレット)

ブックマークに追加した
```js
javascript:
```
から始まるコードを実行してくれる技術
という認識でも問題はないと思います。

では、少し実験してみましょう。

## ブックマークレットでalert
まずは、alertしてみましょう。

```js
javascript:alert("Hello from Bookmarklet")
```
上で紹介した登録方法に沿って行うと、このような表示が出てくると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/54d4c723-94b3-05ef-e49b-41da70245702.png)

このように。ブックマークレットを使うことで、超簡単にjsを実行できるようになります！

# コードの解説

では、紹介したコードの解説をしていきましょう。
```js:before
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; } }());
```

わかりにくいので、きれいにしましょう。

```js:after
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;
  }
}());
```

これで、見やすくなりましたね。
順を追って説明していきます。

## 即時関数
ブックマークレットで複数行のコードを使いたかったので、即時関数と呼ばれるものを使いました。
構文は、
```js:即時関数
(function() {
  // 実行したいコード
}());
```
です。

これにより、関数に名前を付けない状態ですぐに実行されます。
後ろについてる `()` は引数を入れる場所です。
つまり、
```js:引数付き 即時関数
(function(x, y) {
  // 実行したいコード
}(1, 2));
```
こういうことができます。

## musicPlayer
Kiiteには、musicPlayerというものがあります。
これにアクセスすることで、再生中の曲などのKiiteの情報を取得できます。

### .loop
そのなかに、 `.loop` というものが用意されています。
これは、何も仕事をしていません。
これのt/fをいじっても何も反応しません。
なので、musicPlayerの条件分岐に有効活用させてもらいました。

ループをするコードを実行したら、この変数を `true` にし、
解除したら `false` にしています。

### .next
ここには、次再生する曲を決める、このようなコードが記述されていました。

これは、簡単に言うと、次の曲のプレイリスト番号用意し、再生するものです。
```js
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)
};
```
ここに、現在再生している曲の番号を与えるようにすると、同じ曲が再生されるようになります。
```js
musicPlayer.next = function() {
  musicPlayer.play(musicPlayer.current)
};
```

### .currentMedia
これは、再生中の楽曲の情報が格納されています。
ここでは、この中の **`title`** を取得しました。
これで、ループする楽曲をポップアップでお知らせできるようになりました。

# 最後に

今年もアドベントカレンダーのくそアプリ選手権に出場します！！！
最近手に入れた機械学習を活用して面白いものを用意しています！

どうぞ、よろしくお願いします！！！！！！！！

では ﾉｼ