Data APIを使ってみる（その1）

昨日の記事で述べたように、Movable Type 6のキーとなる機能は、Data APIだと思います。
そこで、Data APIの使い方を紹介していきます。

1.Data APIの概要

これまでのMovable Typeでは、記事等のデータは、管理画面で操作したり、テンプレートタグでHTMLに出力したりして、基本的にはMovable Typeのシステムの中だけで使うものでした。
Movable Type以外のシステムからデータを利用するには、データベースを直接アクセスしたり、データをJSON等で出力するテンプレートを書いたり、あるいはデータアクセス用のプラグインを作るといった作業が必要でした。

しかし、スマートフォンアプリを作ったり、サイトをWebサービス化したいときなど、Movable Typeの外からデータにアクセスしたい場面が増えています。
このために作られたのが、Data APIです。

Data APIでは、RESTでMovable Typeに問合せをし、結果をJSONで得ることができます。
ログインせずにパブリックなデータだけを得ることや、ログインしてプライベートなデータにアクセスすることができます。
また、プライベートなアクセスでは、データの追加／編集／削除も可能です。

各種のプログラム言語から、RESTでMovable Typeのデータにアクセスすることができます。
特に、JavaScript SDKを利用すれば、JavaScriptaでより分かりやすくプログラムを作ることもできます。

2.JavaScript SDKを使った例

JavaScript SDKを使った簡単な例として、IDが1番のブログから最新記事を取得して、タイトルと概要を表示する例を紹介します。
テンプレートエンジンのHogan.jsと組み合わせてみました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>test</title>
  </head>
  <body>
    <div id="tmpl" style="display: none">
      <ul id="entries">
      {{#entries}}
        <li>
          <a href="{{permalink}}">{{title}}</a><br />
          {{excerpt}}
        </li>
      {{/entries}}
      </ul>
    </div>
    <div id="result"></div>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="/mt6b/mt-static/data-api/v1/js/mt-data-api.js"></script>
    <script src="http://twitter.github.com/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script>
    <script type="text/javascript">
      var tmpl = Hogan.compile(jQuery('#tmpl').html());
      var api = new MT.DataAPI({
        baseUrl:  "http://yourdomain.com/path_to_mt/mt-data-api.cgi",
        clientId: 'example'
      });
      jQuery('#result').html('Please wait...');
      api.listEntries(1, function(response){
        jQuery('#result').html('').append(
          tmpl.render({ entries: response.items })
        );
      });
    </script>
  </body>
</html>

24～27行目は、DataAPIのオブジェクトを生成する処理です。
25行目の「yourdomain.com/path_to_mt」の部分は、Movable Type 6のインストール先に応じて変えます。
また、26行目の「example」は特に何でも良いようです。

29行目の「api.listEntries(1, function(response) {・・・」が、IDが1番のブログから記事を読み込む処理です。
記事が読み込まれると、2つ目のパラメータで指定した関数が実行され、そのパラメータのresponseに、読み込まれた記事が渡されます。

後は、responseを元にして、必要な処理を行います。
この例では、Hogan.jsのテンプレートにresponseのデータを渡し、レンダリングして、結果をdiv#resultに出力しています（30～32行目）。

この例では、Movable Typeのテンプレートは全く使っていません。
また、SQLでデータベースに直接アクセスするようなこともしていません。
にもかかわらず、HTMLとJavaScriptだけで、Movable Typeのデータにアクセスすることができています。
この例はごくシンプルなものですが、この例のような考え方を延長して、JavaScriptとMovable Typeを連携した各種のアプリケーションを作ることができます。

お知らせ

Data APIを使ってみる（その1）

1.Data APIの概要

2.JavaScript SDKを使った例

おすすめ