matsui

【Movable Type】MT6の新機能、Data APIを試してみる

Movable Type 6.0から、新しくData APIの機能が追加されました。
今回は、Data APIの概要を簡単に紹介するのと、
まださわってみたことのないこれを、ちょっとだけ試してみようと思います。


■Data APIとは? 簡単に言うと、MTに蓄積されたブログや記事のデータを Web APIの形式で利用することができる仕組みです。 JavaScript、PHP、Perl、Javaなどの言語を使ってMTにアクセスし データを取得・利用したり、データ自体を作成・更新したりすることができます。
■具体的にどんなことができる? できるらしいことをざっと集めてみました。
  • MTの管理画面に入らずに、記事の投稿、編集、画像のアップロードなどができる →オリジナルの管理画面が作れる??
  • スマホからも記事投稿、編集が可能??(プラグインを使わずに??)
  • スマホアプリ内からもData APIの利用が可能??
  • ブログ内で、インクリメンタル検索が出来る??
  • ページ分割を動的に処理できる→ページングのアクションを自由に作れる??
  • 記事データ利用のために、もうXMLを出力しなくてもよい?データベースにもアクセスしなくてよい??
ほかにも、工夫次第でたくさんの機能を生み出せるようです。
■ちょっと書いてみました まずは初歩の初歩(?)、 「MTタグを使わずに、ページに記事情報を表示」させてみました。 Data APIは、「REST」という仕組みでMTにアクセスします。 アクセスして取得した結果は、JSONで返されます。 データ利用の際のプログラム言語は、「RESTでのアクセスが可能でさらにJSONを扱えるもの」であれば、 どれでも記述可能です。 JavaScript、PHPあたりなら、ギリ書けそうですね。 今回はJavaScriptでやってみました。
◇情報を表示したいページのソースに、以下を記述
<!-- ↓↓ MTに同梱されているライブラリを呼び出します -->
<script src="<MTのスタティックディレクトリのパス>/data-api/v1/js/mt-data-api.js"></script>

<!-- ↓↓ 取得した情報はココに出力します -->
<div id="hoge"></div>

<!-- ↓↓ Data APIにアクセスします -->
<script>
    var api = new MT.DataAPI({
    baseUrl:  "<MTディレクトリのパス>/mt-data-api.cgi",
    clientId: "hogehoge"
    });
    var siteId = <ブログのID>;
    api.listEntries(siteId, function(response) {
      if (response.error) {
          //エラーの処理を書きます
          return;
      }

      var d = document.getElementById("hoge");
      for (var i = 0; i < response.items.length; i++ ) {
         d.appendChild(document.createTextNode(response.items[i].title));//記事タイトル
         d.appendChild(document.createTextNode(response.items[i].date));//投稿日時
         d.appendChild(document.createTextNode(response.items[i].permalink));//記事URL
         d.appendChild(document.createTextNode(response.items[i].categories));//記事カテゴリ
         d.appendChild(document.createTextNode(response.items[i].body));//本文
      }
    });
</script>
※成型用のhtmlタグは省略しています。
◇ブラウザで確認すると、以下のように表示されました。うまくいったようです。
記事テスト5 2014-01-15T23:34:19+09:00 <ブログURL>/2014/01/5.html カテゴリ2 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 記事テスト4 2014-01-15T23:34:17+09:00 <ブログURL>/2014/01/4.html カテゴリ1 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 記事テスト3 2014-01-15T23:34:15+09:00 <ブログURL>/2014/01/3.html カテゴリ3 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 記事テスト2 2014-01-15T23:34:13+09:00 <ブログURL>/2014/01/2.html カテゴリ2 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 記事テスト1 2013-08-27T00:07:01+09:00 <ブログURL>/2013/08/post.html カテゴリ1 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
今回は本当にさわりの部分を試しただけで、まだまだData APIを使いこなすまでには至っていませんが 少しずつ理解、応用して、これからのMT構築に取り入れて行きたいと思います。
(参考、引用させていただいたサイト、ページ) http://www.movabletype.jp/blog/Introducing_data_api.html http://blog.sixapart.jp/
新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら