MD-Blog_Web System

使ってみよう！ MT6 DataAPIの基礎講座

2013.12.13 Fri.

Posted by MONSTER DIVE

先日、Movable Type 6が正式にリリースされました。今回は、MT6の新しい機能のひとつであるData APIについて、簡単なサンプルを用いて紹介したいと思います。こちらの記事でも、Data APIについて紹介しているのでこちらも見ていただくと、より理解が深まるかもしれません。

Data APIとは

APIとは

そもそもAPIは何かというと、あるプラットフォームを開発する際に使える命令や関数の集合体を表します。予めライブラリ（SDK）が用意されているため、1〜10までプログラムをする必要がありません。代表的なAPIとして、Facebook APIやTwitter API等があります。

Data APIでどんなことができるのか？

MTに保存されている記事の編集、削除
記事を新しく投稿する
スマートフォンからも投稿が可能
独自の管理画面を作ることができる
記事をAPI経由で動的に読み込むことができる

Data APIを利用することによって、MTの管理画面（mt.cgi）を経由せずにMTのDBに読み書きすることができます。つまり、データの取得や書き込みをするために管理画面を使う必要がありません。Data APIのドキュメントはこちらをご覧ください。

Data APIは何で使えるのか？

用意されているSDKはJavaScriptだけ（2013.12.9現在）ですが、JSONが扱えるプログラミング言語であればAPIは使用することができます。SDKの使い方はこちらをご覧いただきつつ、そのほかnode.jsやPHPを用いたData APIの使い方については下記のブログが参考になると思います。

Node.js

Data APIを使ってみる（その2）
http://www.h-fj.com/blog/archives/2013/07/16-101341.php

PHP、Perl

Movable Type 6 の新機能Data APIから記事一覧を取得
http://tejunsho.com/perl/20130711000181.html

Data APIのメソッド

主に利用されるメソッドについては下記の通りです。

getEntry            (エントリーの情報を取得)
listEntries         (エントリ一覧を取得)
createEntry         (エントリー作成)
updateEntry         (エントリー更新)
deleteEntry         (エントリー削除)
uploadAsset         (アセットのアップロード)
listCategories      (カテゴリの一覧)
publishEntries      (再構築)

Data APIの注意点

便利になった分、注意をしなくてはいけないこともあります。

他のドメインに置かれたファイルからは読み込めない
ID / PASSWORDの扱いは特に注意が必要。例えば当然ながらJavaScriptのファイル中にID / PASSWORDの記載しないようにする。
初期状態では全てのブログのデータを読み書き可能なので、新しい環境変数DisableResourceFieldで扱えるブログを制限しておく。

Data APIを使うための初期設定

mt-data-api.js

Data APIを使用するためには、mt-data-api.jsを読み込む必要があります。

<script src="http://UserDomain/mt6test/mt-static/data-api/v1/js/mt-data-api.js"></script>

コンストラクタ

Data APIのコンストラクタは、MT.DataAPIを利用します。

var api = new MT.DataAPI({
    baseUrl:  'http://UserDomain/cgi-bin/mt6test/mt-data-api.cgi',
    clientId: 'test'
});

baseUrl

mt-data-api.cgiがあるURLを記述します。

clientID

MTログインユーザ名でなく、任意の文字列。このIDは認証やcookieを利用する場合に利用されます。

listEntriesをメソッドを使ってMTからデータを取得する

listEntriesは、ブログ記事の一覧を取得するためのメソッドです。

listEntriesに設定する引数

サイトID:ブログID
パラメータ:APIを実行する時のオプションになります
コールバック:レスポンスの値を取得時に行うコールバック関数

api.listEntries(_siteId, params, function(response) {
    // レスポンスを取得時に実行される処理
});

パラメータについては、小粋空間さんの記事に詳しく書いてありますので、こちらが参考になると思います。今回はパラメータを設定せずに、記事一覧を取得したいと思います。実際に使っているサンプルソースは、read.jsを見てください。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Data API 読み込みテスト</title>

<!-- JSライブラリを読み込む。mt-staticにもともと入ってる。 -->
<script src="http://UserDomain/mt-static/data-api/v1/js/mt-data-api.js"></script>
</head>
<body>
<h1>読み込みサンプル</h1>
<div id="read">結果を表示</div>
</body>
<script src="read.js"></script>
</html>

read.js

'use strict';

var
    _siteId = 1,
    api = new MT.DataAPI({
        // mt-data-api.cgiがあるURLを記述
        baseUrl:  'http://UserDomain/cgi-bin/mt/mt-data-api.cgi',
        // clientIDはMTログインユーザ名でなく、任意の文字列。このIDは認証やcookieを利用する場合に利用される
        clientId: 'test'
    });

// エントリの一覧を取得
api.listEntries(_siteId, function(response) {
    var
        _doc = document,
        _response = response;

    // 認証がエラーの場合の処理
    if(_response.error) {   
        alert(_response.error.code + ':' + _response.error.message);
        return false;
    }

    var
        _read = _doc.getElementById('read'),
        _i = -1,
        _responeItemsLength = _response.items.length;

    // 記事を取得してHTMLに表示
    for(_i, _responeItemsLength; ++_i < _responeItemsLength;) {
        _read.appendChild(_doc.createTextNode('entryTitle: '));
        _read.appendChild(_doc.createTextNode(_response.items[_i].title));
        _read.appendChild(_doc.createElement('br'));
    }
});

createEntryを使ってMTに投稿する

createEntryメソッドは、MTに記事を投稿するメソッドです。記事を投稿するためには、まずauthenticate使用して認証する必要があります。

authenticateを使った認証

api.authenticate({
    username: MTのユーザー名,
    password: パスワード,
    remember: クッキーの有無
}, function(response) {
    // コールバック処理
    // 認証されると投稿が可能になります
});

createEntryに設定する引数

サイトID:ブログID
エントリーデータ:作成するブログ記事のデータ
コールバック:レスポンスの値を取得時に行うコールバック関数

var entryData = {
    'title':ブログ記事のタイトル,
    'body':ブログ記事の内容,
    'status':ブログ記事の状態
};
api.createEntry(_siteId, entryData, function(response) {
    // レスポンスを取得時に実行される処理
});

実際に使っているサンプルソースは下記write.jsを見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>書き込みサンプル</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://UserDomain/mt-static/data-api/v1/js/mt-data-api.js"></script>
</head>
<body>
<h1>書き込みサンプル</h1>
<input type="text" id="user" placeholder="ID">
<input type="password" id="pass" placeholder="PW">
<input type="button" id="loginBtn" value="LOGIN">
<hr>
<div id="result">結果を表示</div>
<hr>
<div id="entryForm">
  <input type="text" id="entryTitle" placeholder="タイトルはこちらに">
  <br>
  <textarea id="entryBody" placeholder="本文をこちらに"></textarea>
  <br>
  <input type="button" id="submitBtn" value="SUBMIT">
</div>
<script src="write.js"></script>
</body>
</html>

write.js

'use strict';

var
    api = new MT.DataAPI({
        // mt-data-api.cgiがあるURLを記述
        baseUrl:  'http://UserDomain/cgi-bin/mt/mt-data-api.cgi',
        // clientIDはMTログインユーザ名でなく、任意の文字列。このIDは認証やcookieを利用する場合に利用される
        clientId: 'test'
    });

// エントリの一覧を取得
jQuery(document).ready(function() {
    var
        _checkLogin,
        _setEntry,
        _submitEntry,
        $entryForm = jQuery('#entryForm'),
        $loginBtn = jQuery('#loginBtn'),
        $sumibtBtn = jQuery('#submitBtn'),
        $result = jQuery('#result'),
        $user = jQuery('#user'),
        $pass = jQuery('#pass'),
        $entryTitle = jQuery('#entryTitle'),
        $entryBody = jQuery('#entryBody');


    // ログインをチェックする
    _checkLogin = function() {
        api.authenticate({
            username: $user.val(),
            password: $pass.val(),
            remember: true
        }, function(response) {
            if(response.error) {
                $result.html('エラーです');
            } else {
                _setEntry();
            }
        });
    };

    // データを投稿するための処理
    _submitEntry = function() {
        var
            _siteId = 1,
            _entryData = {
                'title' : $entryTitle.val(),
                'body' : $entryBody.val(),
                'status' : 'Publish'
            };

        api.createEntry(_siteId, _entryData, function(response) {
            if (response.error) {
                $result.html('エラーです');
            } else {
                $result.html('ポストしました');
            }
        });
    };

    // 投稿画面を表示
    _setEntry = function() {
        $result.html('ログインしました');
        api.getToken(function(response) {
            if(response.erro) {
                $result.html('トークンエラー');
            } else {
                $entryForm.show();
                $sumibtBtn.on('click', _submitEntry);
            }
        });
    };

    $entryForm.hide();
    $loginBtn.on('click', _checkLogin);
});

まとめ

Data APIによってMT本体を介さずとも、データの取得やデータの投稿が可能なりました。特定の目的に限定した独自に管理画面を作ったり、FacebookやTwitterのAPIと連動して同時に記事を投稿したりする仕組みをJSベースで開発することも可能かと思います。

Data APIによって、MTとは違ったスタイルでCMSの構築・運用が可能になります。Web制作側としては、サイト制作のためのツールとしてMTを構築するだけではなく、Data APIを用いてスマートフォン用のアプリを開発したり、ブログではない用途のコンテンツ管理システムを企画・提案できれば、導入先企業の満足にも繋がると思います。

Recent Entries

MD EVENT REPORT

What's Hot?

株式会社MONSTER DIVE

タグリスト

カテゴリアーカイブ