Movable Type の Data API を使ってみよう
Movable Type の Data APIは、Movable Type 6 から搭載されている Web API です。さまざまなプログラム言語から REST/JSON方式で Movable Type にアクセスし、データの取得や更新ができます。
Movable Type をはじめとする多くのCMSは、あらかじめ設定したテンプレートに従ってhtmlなどのコンテンツの生成を行い、データの入力や更新は管理画面にログインして操作するのが一般的でした。
Data API を使えば、CMSで管理しているデータを直接呼びだし、任意のフォーマットで出力することができます。また、Movable Type の管理画面を使わずに「データの入力や更新をしたり、他のプラットフォームとの連携などを容易に行うことができます。
Data APIを使うと、例えばこんなことができます。
- 独自のアプリケーションから、Movable Type の記事投稿を行う
- レシピ集などの、複雑な条件検索が可能なデータベースサイトの構築
- Google Analytics と連携を行い、アクセスログのデータをウェブサイト上に表示する
その他、工夫次第でいろいろな使い方ができます。
Data APIの用途は、ウェブサイトに限りません。スマートフォンアプリなどにも利用できます。さまざまな可能性を秘めた機能なのです。
Data APIで取得できるデータの実際
Data APIの使い方は、[Movable Type Data API ドキュメント] に詳しく書かれています。
ドキュメントには、APIを利用するためのエンドポイントや、リファレンス情報がまとまっています。例として、Movable Type の記事10件分のデータを、Data API で呼び出してみましょう。記事の一覧取得には [listEntries] というエンドポイントを使います。
listEntriesを使って、最新の記事10件を取得するためのリクエストは以下のようになります。
http://example.com/mt/mt-data-api.cgi/v2/sites/siteID/entries?limit=10
このURLは、皆さんがお使いのMovable Type に照らし合わせ、それぞれ以下のように読み替えてください。
http://example.com/mt/mt-data-api.cgi
皆さんが利用しているMovable Type のmt-data-api.cgiを示すURL
v2/
利用する Data API のバージョンを指定。Movable Type 6.1以降では、v2 （バージョン2）、それ以前のバージョンでは v1（バージョン1）
siteID/
データを取得したいウェブサイト・ブログのIDを記入
例示したURLにアクセスすると、以下の様なデータを取得することができます。
記事のタイトルや本文、公開日時や記事の投稿者など、さまざまなデータがJSON形式で表示されています。
Data APIのJavaScript SDKの使い方
Movable Type Data APIを利用しやすくするために、JavaScript SDKを用意しています。これは、フロントエンドエンジニアの皆さんがなじみ深い言語であるJavaScriptを利用して、Data APIからデータの入出力(および書き込み、呼び出し)を行うことができるようにしたものです。
JavaScript SDKの使い方は簡単です。使いたいhtmlのヘッダー内に、JavaScript SDKのスクリプトへのリンクを貼るだけです。JavaScript SDKのスクリプトは、利用する Movable Type のmt-staicディレクトリ内に入っているため、例えばこのような記述で利用可能となります。
<script type="text/javascript" src="<mt:StaticWebPath>data-api/v2/js/mt-data-api.min.js">
head内に記述することで、JavaScript SDKを呼び出したhtmlページ上でData APIが利用可能となります。
JavaScript SDKの使い方は、以下にまとまっています。
実際にJavaScript SDKを使ってみる
それでは、実際にJavaScript SDK を使って、簡単なサンプルコードを書いてみましょう。今回は、以下の仕様でコードを作成します。
- Data API のJavaScript SDKを利用して、Movale Type 内に保存されている記事10件のタイトルをリスト表示する
- 記事のタイトルリストは<ul>、<li>タグで表示を行う
JavaScript SDKの利用については、以下のドキュメント類を参考にします。
https://github.com/movabletype/mt-data-api-sdk-js/wiki/DataAPI-SDK-japanese-MT.DataAPI-Basic-usage
Data APIの基本的な使い方を例示しています。
Data APIのエンドポイント [listEntries] についての解説です。
https://github.com/movabletype/Documentation/wiki/data-api-entries-list
［listEntries］のより詳細な解説です。
実際に、記事10件のタイトルを取得して表示するコードを作成してみました。
var api = new MT.DataAPI({
baseUrl: "<MTCGIPath>mt-data-api.cgi",
clientId: "api10entries"
});
var html = '';
var siteId = <$MTBlogID$>;
api.listEntries(siteId, function(response) {
if (response.error) {
html += "<p>データ取得エラーです。</p>";
return;
}
html += "<ul>";
for (var i = 0; i < 10; i++) {
var entry = response.items[i];
html += "<li>" + entry.title + "</li>";
}
html += "</ul>";
var entries = document.getElementById("entries");
entries.innerHTML = html;
});
<div id="entries"></div>
最初に、Data APIを利用してオブジェクトを生成します。Data APIを利用するためのCGIスクリプトのURLと、clientIdを指定します。clientIdは任意の文字列をつけるとよいでしょう。ここでは、「API経由で記事10件のタイトルを取得する」という仕様に引っ掛けて、［api10entries］としてみました。
var api = new MT.DataAPI({
baseUrl: "<MTCGIPath>mt-data-api.cgi",
clientId: "api10entries"
});
次に、Data API で取得したデータを収めるための変数 html を定義します。
var html = '';
Data API で取得するブログIDを変数 siteIdに格納します。今回は、MTタグを利用して、BlogIDを取得しました。
var siteId = <$MTBlogID$>;
エンドポイント [listEntries] を利用して、データを取得します。
データが取得できなかった場合は、エラーメッセージを表示して処理を終了させます。
データ取得できた場合は、ループ処理を行って10件分の記事タイトルを取得して、htmlタグとともに変数に収めます。
api.listEntries(siteId, function(response) {
if (response.error) {
html += "<p>データ取得エラーです。</p>";
return;
}
html += "<ul>";
for (var i = 0; i < 10; i++) {
var entry = response.items[i];
html += "<li>" + entry.title + "</li>";
}
html += "</ul>";
最後に、変数html内の内容を、getElementByIdを使って、<div id=”entries”></div>内に表示処理します。
var entries = document.getElementById("entries");
entries.innerHTML = html;
});
<div id="entries"></div>
上記のコードを実行すると、以下のように、記事タイトルがリスト形式で表示されました。
いかがでしょうか？JavaScriptを普段お使いの方でしたら、それほど難しく感じなかったのではないかと思います。
みなさんも、ぜひData APIに触ってみてください。