Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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のドキュメントはこちらです。

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 からデータを取得するため、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だと思います。ぜひ一度お試しください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした