いやぁ、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 を使うのとワードプレスで公開するという点にフォーカスしています。
Contents
IFTTT でエコーでアレクサが再生した曲を Google SpreadSheet に保存する
Amazon Echoのアレクサで再生した曲名をGoogleスプレッドシートに自動的に記録する方法
Google スプレッドシートのデータを JSON で取得できるようにする
ここみてください。
Google SpreadSheet のデータを JSON 形式で取得する Web API をサクッと作る
Tabulator.js でプレイリストを作成する
DOM エレメントを定義
これだけで OK ですｗ
<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>お、シンプルですが、いいんじゃないでしょうか。
アレクサで再生した曲をリストアップして 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 からインクルードする箇所は
