Google Books API + Movable Type で書籍管理システムを作るを元に、Movable Type のData API について簡単に解説していきます。今回はその2、Data API のエンドポイントと、JavaScript SDKの使い方について触れます。
Data APIとは
Data API = Movable Type のREST API
Data API は、Movable Type に標準で実装されているREST APIです。バージョン6から実装されました。他のREST APIと同様に、URIを指定して、Movable Type のデータを取得したり、データの追加や更新することができます。
Data APIのドキュメントはこちらです。
エンドポイントの一覧はこちらにまとまっています。
JavaScript SDKとは
JavaScriptからData APIを操作するために、JavaScript SDKというツールが存在します。これは、Data APIを操作するための、JavaScript の関数集です。JavaScript SDKは、Movable Type のパッケージ内に用意してあるため、Movable Type がインストールされている環境なら、すぐに使えます。
使い方は、htmlのヘッダーに、JavaScript SDKへのリンクを貼るだけです。2017年1月時点の最新バージョンである、Ver 3 のSDKを使う場合、以下のように記述します。
<head>
(中略)
<script src="http://MTがインストールされているディレクトリ/mt-static/data-api/v3/js/mt-data-api.js"></script>
(後略)
</head>
JavaScript SDKの使い方は、以下にまとまっています。
JavaScript SDKの実例
例として、JavaScript SDK を使って、Movable Typeで公開されている記事のタイトルを取得してみます。下記のコードをインデックステンプレートで再構築し、出力したhtmlを見ると、記事のタイトルが一覧で表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>JavaScript SDK サンプルコード</title>
<meta charset="utf-8">
<script src="<$MTStaticWebPath$>data-api/v3/js/mt-data-api.js"></script>
<script>
// Movable Type Data API のインスタンス生成
const api = new MT.DataAPI({
baseUrl: "<$MTCGIPath$><$MTDataAPIScript$>",
clientId: "sample"
});
// MTのブログIDを変数 siteId に格納
// メッセージ表示のために使う変数 [html] を定義
const siteId = <$MTBlogID$> ;
let html = '';
// JavaScript SDK のメソッドを使って、記事データを取得
// 表示用のhtmlコードを生成する
api.listEntries(siteId, function(response) {
for (let i = 0; i < response.items.length; i++) {
let entry = response.items[i];
html += "<p>" + entry.title + "</p>";
}
// タイトルを含むhtmlコードを格納した変数 html を、<div id="title-list"> に出力
document.getElementById("title-list").innerHTML = html;
});
</script>
</head>
<body>
<div id="title-list"></div>
</body>
</html>
上記ではData API のエンドポイントの1つ、entries からデータを取得するため、JavaSript SDK の関数 listEntries を使い、データを取得しています。
JavaScript SDK を使わず、一般的なJavaScriptのフレームワークで書くことも、もちろん可能です。例として、上記のコードをjQueryを利用して書き換えた場合、このようなコードになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>jQuery サンプルコード</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="<$MTStaticWebPath$>data-api/v3/js/mt-data-api.js"></script>
<script>
$(function() {
// メッセージ表示のために使う変数 [html] を定義
let html = '';
// Data API のエンドポイント[entries]を、jQueryで叩く
// 取得した記事一覧のJSONデータを、変数 listに格納
// https://www.movabletype.jp/developers/data-api/v3-reference.html#entries-entries
const list = "<$MTCGIPath$><$MTDataAPISCript$>sites/<$MTBlogID$>/entries";
// jQueryの関数、getJSON を使って、記事データを取得
// 表示用のhtmlコードを生成する
$.getJSON(list, function(data) {
for (let i = 0; i < data.items.length; i++) {
let entry = data.items[i];
html += "<p>" + entry.title + "</p>";
}
// タイトルを含むhtmlコードを格納した変数 html を、<div id="title-list"> に出力
$("#title-list").html(html);
});
});
</script>
</head>
<body>
<div id="title-list"></div>
</body>
</html>
jQueryのコードの実行結果は、JavaScript SDKを使った場合と同じです。
単純にMovable Type のデータを取得・表示する場合は、各種フレームワークを使ってもスムーズに開発できることでしょう。一方、データの追加・削除・更新など、認証を絡めてデータを操作する場合、JavaScript SDKを使ったほうが、開発効率が良いことが多いでしょう。
JavaScript SDK はJavaScript がわかる方でしたら、理解しやすいSDKだと思います。ぜひ一度お試しください。