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だと思います。ぜひ一度お試しください。