Movale Type Data API のエンドポイントとJavaScript SDK の使い方

[Google Books API + Movable Type で書籍管理システムを作る](http://qiita.com/TakeshiNickOsanai/items/a11b2d6c9cdc4a6c9079)を元に、Movable Type のData API について簡単に解説していきます。今回はその2、Data API のエンドポイントと、JavaScript SDKの使い方について触れます。

## Data APIとは

### Data API = Movable Type のREST API

[Data API](https://www.movabletype.jp/developers/data-api/) は、[Movable Type](https://www.sixapart.jp/movabletype/) に標準で実装されているREST APIです。バージョン6から実装されました。他のREST APIと同様に、URIを指定して、Movable Type のデータを取得したり、データの追加や更新することができます。

Data APIのドキュメントはこちらです。

https://www.movabletype.jp/developers/data-api/

エンドポイントの一覧はこちらにまとまっています。

https://www.movabletype.jp/developers/data-api/v3-reference.html


## 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の使い方は、以下にまとまっています。

https://github.com/movabletype/mt-data-api-sdk-js/wiki/DataAPI-SDK-japanese-MT.DataAPI


## 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](https://www.movabletype.jp/developers/data-api/v3-reference.html#entries-entries) からデータを取得するため、JavaSript SDK の関数 [listEntries](https://github.com/movabletype/mt-data-api-sdk-js/wiki/DataAPI-SDK-japanese-MT.DataAPI-Endpoint-method-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だと思います。ぜひ一度お試しください。