kintoneからMovable Typeに記事を投稿する方法

※2014/6/8時点の情報を元に記載しています。kintoneのバージョンアップにより内容が変わる場合があります。

kintoneは、Webデータベースシステムとして非常に高いポテンシャルを持ったクラウドサービスですが、その性質上、基本的にはログインアカウントを持つユーザーが、クローズドな環境でデータの登録や閲覧・集計を手軽に行えるというサービスになっています。

しかし、kintoneに登録されたデータを一般公開されているWebサイトに掲載したいというニーズは少なからずあるのではないでしょうか。

今回はCMSシステムとして確固たる地位を築いているMovable Type 6がData APIを備えているということで、kintoneに登録したブログ記事を、Movable Type 6（以下、MT6）のData API経由で投稿するというプログラムにチャレンジしてみました。

尚、kintoneにもREST APIというものがあり、外部システムからkintoneに対してデータの検索・登録・更新・削除等が行えますが、MT6のData APIも外部システムからMT6内にあるブログ記事の検索や新規投稿が行えるAPIとなっており、お互いに外部システムからのアクセスを待ち受けているようなAPIとなっています。なのでそのままではお互いに通信できません。（それぞれのAPIにアクセスするクライアントとなるアプリが必要）

しかし、kintoneには更にJavaScript APIというものが備わっており、kintone自体の画面カスタマイズが行えたり、自身のデータを呼び出したり、外部システムのAPIを呼び出したりということができるようになっています。

そこで、kintoneのJavaScript APIをkintoneとMT6を媒介するクライアントアプリと見立てて、プログラムを作成してみました。

以下、作成手順となります。
※予めDataAPIが動作可能なMT6環境が用意されているものとします。

１．kintoneで簡単なブログ投稿アプリを作成

２．作成したアプリにMT投稿用JavaScriptを設置

※アカウント名、パスワード、URL、ブログIDはご自分の環境に合わせて設定してください。

/*
kintoneからMovable Typeに投稿
*/

(function () {
 
	"use strict";

	var username = '（投稿用のMTアカウント名）';
	var password = '（投稿用のMTアカウントのパスワード）';
	var base_url = 'http://（MT設置URL）/mt-data-api.cgi';
	var auth_url = base_url + '/v1/authentication';
	var entries_url = base_url + '/v1/sites/（投稿先のブログID）/entries';

	//////////// レコード詳細画面表示時イベント ////////////
	var eventDetailShow = ['app.record.detail.show'];
	kintone.events.on(eventDetailShow, function (event) {

		//// Publishボタン表示
		var btnEl = kintone.app.record.getHeaderMenuSpaceElement();
		var btn = document.createElement('input');
		btn.type = "button";
		btn.value = "Publish!";
		btn.onclick = publishContent;
		if (btnEl.childNodes.length == 0) {
			btnEl.appendChild(btn);
		}

	});

	function publishContent() {

		//// レコード情報の取得
		var obj = kintone.app.record.get();

		//// 認証
		var header = {'Content-Type': 'application/x-www-form-urlencoded'}
		var auth_param = 'username=' + username + '&password=' + password + '&remember=true&clientId=test';
		kintone.proxy(auth_url, 'POST', header, auth_param, function(body, status, headers) {

			if (status != 200) {
				console.log(status, body);
				alert('認証エラー');
			} else {
				var json_body = JSON.parse(body);
				var token = json_body.accessToken;
				var header2 = {
					'X-MT-Authorization': 'MTAuth accessToken=' + token,
					'Content-Type': 'application/x-www-form-urlencoded'
					}

				// 投稿
				var entryData = {
					'title' : obj['record']['title']['value'],
					'body' : obj['record']['body']['value'],
					'status' : 'Publish'
				}
				var str_entryData = 'entry='+JSON.stringify(entryData);
				console.log(str_entryData);
				kintone.proxy(entries_url, 'POST', header2, str_entryData, function(body, status, headers) {
					if (status != 200) {
						console.log(status, body);
						alert('投稿失敗');
					} else {
						alert('記事を公開しました');
					}
				});
			}
		});

	}

})();

9～13行目　：各種定数値です。ご自身の環境に合わせて修正してください。
16～29行目：レコード詳細画面の上部に「Publish!」ボタンを表示しています。
31行目～　：投稿処理のメイン処理です。
34行目　　：現在表示しているkintoneのレコード詳細データを取得しています。
36～50行目：MT6に対して認証処理を行い、アクセストークンを取得し、投稿処理用のヘッダにセットしています。
53～66行目：kintoneのレコードデータから投稿データを作成し、Data APIに対して投稿処理を行っています。

Data APIには認証処理と投稿処理の2回アクセスしていますが、いずれもkintoneのJavaScript APIにあるkintone.proxy()を使用しています。kintone.proxy()は、kintoneから外部システム（＝ドメインが異なるシステム）のAPIを呼び出すために使用されるものです。

３．kintoneでブログ記事を作成

※今回のサンプルプログラムでは、本文の改行は適切に動作しますが、その他の装飾（太字、文字色、リンクなど）には未対応です。

４．ブログ記事を保存し「Publish!」ボタンをクリック

５．うまく投稿できました！

６．ワークフロー（申請・承認）との組み合わせも！

kintoneには、上長への申請・承認といったワークフローを簡単に設定する機能も備わっています。今回の記事投稿についても、上長が承認した記事のみを投稿するといったような機能を盛り込むことが容易に行えることでしょう。

いかがでしょうか？kintoneのJavaScript APIを活用することで、APIが備わっている他のシステムとやり取りすることができるので様々な可能性が広がりますね。先に書きましたようにkintone側にもREST APIというものがあるので、Webサイトで投稿されたフォームの内容やECサイトの注文情報をkintoneに格納する等、他にも様々な応用が考えられるかと思います。

以上、kintoneと外部システムの連携に関心のある方のご参考になれば幸いです。

また、ライトニングトークで発表した際のスライドを以下に掲載しましたので、ご覧いただければなによりです。