アレクサが再生した曲を Tabulator.js でリストアップしてワードプレスで公開する方法

いやぁ、Kindle Unlimited やら Amazon Music Unlimited‎ やら Alexa やら使ってます?ただの Bluetooth スピーカーじゃないですね。遅ればせながらアマゾンエコーを購入し、すっかり月額課金生活に突入していますが Kindle Unlimited は 980 円で 100 万冊読めるし Amazon Music Unlimited も echo なら月額 380 円とはベゾス最高です。
エコーに向かって「アレクサ、音楽かけて」と言えば適当に曲を流してくれますし、気になる曲が流れた際に「アレクサ、この曲誰?」と聞くと教えてくれます。デフォルトのスキルでもまぁ使えるのですが、これで何かコンテンツ作れそうだなと思い立ちました。

やってみたら結構簡単にできるのでこれはアイディアを具現化するのに使えそうなので紹介したいと思います。JSON を返す Web API を作るのが結構面倒かなぁと思ったら最近は IFTTT や Google SpleadSheet のマクロ(正式には、Container Bound Script という)ですぐに実装できてしまうのですね。というわけで、その辺は、既出のまとめサイトを参考に事前準備をしておきます。
この記事では、Tabulator.js を使うのとワードプレスで公開するという点にフォーカスしています。

IFTTT でエコーでアレクサが再生した曲を Google SpreadSheet に保存する

Amazon Echoのアレクサで再生した曲名をGoogleスプレッドシートに自動的に記録する方法

Google スプレッドシートのデータを JSON で取得できるようにする

ここみてください。
Google SpreadSheet のデータを JSON 形式で取得する Web API をサクッと作る

Tabulator.js でプレイリストを作成する

DOM エレメントを定義

これだけで OK ですw

<div id="songs-played"></div>

Tabulator コンストラクタオブジェクトを jQuery ウィジェットに渡す

title と field パラメータは必須です。

$("#songs-played").tabulator({
    height:205, // テーブルの高さ
    layout:"fitColumns", // テーブルの幅をフィットさせる
    columns:[ // テーブル定義
        {title:"PlayDateTime", field:"PlayDateTime", sorter:"date"},
        {title:"ArtistName", field:"ArtistName"},
        {title:"SongName", field:"SongName"},
        {title:"AlbumName", field:"AlbumName"},
    ],
    rowClick:function(e, row){ // 行をクリックしたときのメッセージ
        alert("Row " + row.getData().id + "ク、クリックしましたね!?");
    },
});

setDataメソッドを実行する

これが Tabulator.js を使いたいと思った理由です。静的な HTML テーブルが動的に更新できる点なども利用価値が高いと思います。ビジュアル的にも Bootstrap4 などが利用できるためシンプルで見やすいリストが作成できます。

$("#songs-played").tabulator("setData", "https://script.google.com/macros/s/AKfycbxYQeXoSKJNJ1VthTvOvr9wQEis5ZdeSErzXDbx9iewoapDoxw/exec");

HTMLで動作確認

ひとまず動作確認のためペラの HTML を作って動作確認をしてみます。

<html>
	<head>
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.5.3/css/tabulator.min.css" rel="stylesheet">
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.5.3/js/tabulator.min.js"></script>
	</head>
	<body>
		<div id="songs-played"></div>
		<script>
		$("#songs-played").tabulator({
		    height:800, // テーブルの高さ
		    layout:"fitColumns", // テーブルの幅をフィットさせる
		    columns:[ // テーブル定義
		        {title:"再生時間", field:"PlayDateTime", sorter:"date"},
		        {title:"アーティスト名", field:"ArtistName"},
		        {title:"曲名", field:"SongName"},
		        {title:"アルバム名", field:"AlbumName"},
		    ],
		    rowClick:function(e, row){ // 行をクリックしたときのアクション
		        alert("ク、クリックしましたね!?");
		    },
		});
		$("#songs-played").tabulator("setData", "https://script.google.com/macros/s/AKfycbxYQeXoSKJNJ1VthTvOvr9wQEis5ZdeSErzXDbx9iewoapDoxw/exec");
		</script>
	</body>
</html>

お、シンプルですが、いいんじゃないでしょうか。

songs-played-sample

アレクサで再生した曲をリストアップして Tabulator で表示してみる

ワードプレスで公開する

ワードプレスでは、jquery.js はデフォルトで利用されていますが、バージョンが古いため Tabulator.js を利用するために必要となる jquery-ui.min.js と tabulator.min.js と tabulator.min.css は新しいバージョンのものを読み込むようにしておきます。

固定ページの作成

[固定ページ]-[新規追加]から固定ページを適当に作成し、本文には DOM エレメントだけを書いておけば OK です。

<div id="songs-played"></div>

カスタムフィールドに JavaScript を貼り付ける

ワードプレスではスクリプトタグが使えないのですが、カスタムフィールドは別です。カスタムフィールド footer_custom に JavaScript 部分をコピペします。CDN からインクルードする箇所はタグ内に入れてしまっても良いかと思います。当サイトでも利用させていただいている、Simplicity2 テーマなら header-insert.php に追加しておくとよいでしょう。Simplicity2 作者のわいひらさんも推奨されています。

header-insert.php 必要な JS, CSS を追加

この順番が重要だったりします。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.5.3/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.5.3/js/tabulator.min.js"></script>

footer_custom の内容

うまく動作しないときは、上記した HTML を保存して単体で動作確認してから貼り付けることをおすすめします。

<script>
$("#songs-played").tabulator({
    height:800, // テーブルの高さ
    layout:"fitColumns", // テーブルの幅をフィットさせる
    columns:[ // テーブル定義
        {title:"再生時間", field:"PlayDateTime", sorter:"date"},
        {title:"アーティスト名", field:"ArtistName"},
        {title:"曲名", field:"SongName"},
        {title:"アルバム名", field:"AlbumName"},
    ],
    rowClick:function(e, row){ // 行をクリックしたときのアクション
        alert("ク、クリックしましたね!?");
    },
});
$("#songs-played").tabulator("setData", "https://script.google.com/macros/s/AKfycbxYQeXoSKJNJ1VthTvOvr9wQEis5ZdeSErzXDbx9iewoapDoxw/exec");
</script>

結果

こんな感じでプレイリストを公開することができました。ここからいろいろカスタムしていこうと思います。

トラブルシューティング

ワードプレスでロードされている jquery.js が v1.12.4 だとうまく表示されなかった。現時点で最新の v3.5.3 を利用すると問題なく表示された。
なお、公式サイトの説明によると Tabulator v4.0 では依存関係なく利用できるようにするという見解がでています。

Note: In the long term Tabulator is going to become dependencey free, by version 4.0 there will be no dependencies on either jQuery or jQuery UI.

tabulator is not a function で動作しない

シンタックスエラー(文法ミス)は除外すると、jquery, jquery-ui, tabulator の順序で呼んでいない。具体的には tabulator.js が先にロードされているとスクリプトが正しく書かれていてもこのエラーで動作しないので注意が必要です。

Loading で止まる

これも呼び出し順序に起因していると思われます。Chrome の DevTools を起動してエラーをチェックするようにしましょう。DevTools は Ctrl + Shift + c で起動できます。

参考

Tabulator – Quick Start Guide

スポンサーリンク