こんにちは、シックス・アパートの長内と申します。
この記事では、Movable Typeでアンケートフォームを生成して、kintoneと連携する方法を解説します。

Movable Type とは、Webサイトの管理に利用するCMS（コンテンツ管理システム）ソフトです。
Webサイトの運用を支援し、htmlの作成や更新、デザインの変更などを、すみやかに行うことができます。

Movable Typeは日本国内の企業に幅広くご利用いただいています。2016年6月時点で、導入企業は5万社超。日経平均225社の半分以上に、Movable Typeをご利用いただいています。

連携のシナリオは以下のとおりです。

• Movable Typeで運用しているWebサイト上に、アンケートフォームを生成
• アンケートフォームから、kintone登録用プログラムに、入力値を受け渡す。
• kintone登録用プログラムから、API経由でkintoneへデータ送信
• 登録されたデータはkintone上で管理

Movable Typeとkintoneを連携するメリットは以下があります。

• 入力データを公開サーバーと分離して保存・管理

  Webサイトから収集した情報を、Webサイトと同じサーバー上に保存するのは、情報保護の観点からおすすめできません。
  入力されたデータをWebサーバー上に残さず、kintoneで保存することで、情報漏えいのリスクが低下します。

• kintoneの機能を利用してデータ集計

  kintoneには、データの絞込や検索などの、データベース的な機能があらかじめ実装されています。kintoneのデータベース機能を利用することで、データ集計がスムーズになります。

• フォームページのデザイン管理

  Movable Typeから入力フォームを作成することで、Webサイトと一体化したデザインのフォームが作成でき、デザイン変更もスムーズに行うことができます。

今回のシステムは、以下を利用します。

• kintone
• Movable Type

アンケートフォームは、Movable Typeのテンプレート機能を利用して、phpを使ったフォームを生成します。このphpを利用して、入力データをkintoneに受け渡します。

まず最初に、kintoneのアプリを設定します。今回のアンケートフォームでは、以下の4項目について集計するものとします。

• お名前
  • アンケート入力者の名前
• メールアドレス
  • アンケート入力者のメールアドレス
• 評価
  • Good,Soso,Badの3つから選択
• メッセージ
  • 感想やご意見などを自由に入力できるコメント欄

この4項目を、kintoneアプリで以下のように設定します。

設定を行ったら、アプリのIDを確認します。確認の方法はいくつかありますが、例を挙げます。

1. アプリの操作画面から確認する。

   アプリを選択して、ブラウザーのURL欄を確認します。
   https://sample.cybozu.com/k/35/のように、ドメイン名の後に数字が表示されます。この数字がアプリIDになります。
   今回例示したURLでいうと、「35」がアプリIDになります。

2. アプリの一覧画面から確認する。

   [kintoneの操作と設定]>[アプリ管理]から、[ID]の数字を確認します。この数字がアプリIDとなります。

   

   アプリIDを確認したら、番号を記録しておきます。フォーム設定時に、このアプリIDが必要となります。

次に、APIトークンの設定をします。
作成したアプリの[設定画面]から、[詳細設定]を選択し、[APIトークン]をクリックします。

APIトークンの作成画面に移動しますので、[生成する]ボタンを押します。
すると、トークンが生成されますので、[レコード追加]にチェックを入れ、[保存]ボタンを押します。

最後に、アプリの設定画面から[設定完了]ボタンを忘れずに押します。
[設定完了]を行わないと、APIトークンが有効にならないため、ご注意ください。

ここで設定したAPIトークンを利用して、kintoneへデータの投稿をします。

APIトークンを利用すると、kintoneのユーザーアカウントやパスワードを利用せずに、データを投稿できます。
必要に応じてトークンの権限を削除したり、権限を変更することで、ユーザーアカウントを利用するよりもセキュアな運用が可能となります。

続いて、Movable Typeのテンプレートを設定します。
今回のシナリオでは、フォームから入力した値をデータ登録用プログラムへ引き渡し、データ登録用プログラムからkintoneへデータを登録することになっていました。

Movable Typeでは、次の2つのテンプレートを作成します。

• アンケートフォーム（html）
• データ登録用プログラム（php）

はじめに、アンケートフォームを作成します。
Movable Typeの管理画面にサインインを行い、アンケートフォームを設定したいWebサイトもしくはブログを選択します。左の操作メニューから[デザイン]>[テンプレート]を選び、テンプレート設定の画面へ移動します。

ここで、テンプレートの新規作成をします。名前は[アンケートフォーム]とします。

ここに、デザインテンプレートを元にフォーム用のhtmlを記述します。

以下は、フォーム部分のサンプルhtmlです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<form name="enquete" id="enquete" method="post" action="post.php">
 <p><input type="text" name="name" id="name" placeholder="お名前" style="width:80%"></p>
 <p><input type="text" name="mail" id="mail" placeholder="メールアドレス" s></p>
 <p>評価<br>
  <input type="radio" name="radio" id="radio" value="Good">Good
  <input type="radio" name="radio" id="radio" value="Soso">Soso
  <input type="radio" name="radio" id="radio" value="Bad">Bad
 </p>
 <p><textarea name="message" id="message" placeholder="メッセージ" rows="8" ></textarea></p>
 <p><input type="submit" value="送信する"></p>
</form>

kintoneで設定したアプリの情報を元に、1対1で入力フォームを定義します。
このフォームでは、わかりやすいようにidをkintoneのフィールドコードと同じ文字列に設定しています。

データ登録用プログラム[post.php]へ、入力されたデータを引き渡すように定義します。
実際に出力したフォームは以下のような画面になります。

続いて、データ登録用プログラムのテンプレート作成します。Movable Typeのテンプレート内に、phpの記述をします。以下は、アンケートフォーム用のhtmlから引きとったデータを登録するサンプルコードとなります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

<?php
/*
 * Movable Type x kintone
 * Copyright (c) 2016 Cybozu
 * 
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

// kintoneのアプリ情報を設定
$subdomain = 'subdomain';
$appid = '00';
$token = 'トークン文字列を記述';

$header = array(
 'Host: ' . $subdomain . '.cybozu.com:443',
 'Content-Type: application/json',
 'X-Cybozu-API-Token: ' . $token,
);

// フォームの値を取得
$name = htmlspecialchars($_POST["name"]);
$mail = htmlspecialchars($_POST["mail"]);
$radio = htmlspecialchars($_POST["radio"]);
$message = htmlspecialchars($_POST["message"]);

// フォームから投稿用のjsonを作成
$array[] = array(
 "name" => array(
  "value" => $name
 ),
 "mail" => array(
  "value" => $mail
 ),
 "radio" => array(
  "value" => $radio
 ),
 "message" => array(
  "value" => $message 
 ),
 );
$json = array(
 "app" => $appid, 
 "records" => $array,
 );
$json = json_encode($json);

// kintone へ post
$post_context = array(
 "http" => array(
 "method" => "POST",
 "header" => implode("\r\n", $header),
 "content" => $json,
 "ignore_errors" => "true",
 )
 );
 
 $response = file_get_contents(
 'https://' . $subdomain. '.cybozu.com/k/v1/records.json', 
 false, 
 stream_context_create($post_context)
 );
$pos = strpos($http_response_header[0], '200');
 if ($pos === false) {
  echo "データの登録ができませんでした。お手数ですが再度登録下さい。";
 } else {
  echo "データの登録が完了しました。";
}
?>

まず、kintoneへデータを登録するための初期設定をします。今回設定したアプリのサブドメイン、アプリのID、先ほど設定したトークンを利用します。

11
12
13

$subdomain = 'subdomain';
$appid = '00';
$token = 'トークン文字列を記述';

続いて、通信をするためのHTTPヘッダーを定義します。

15
16
17
18
19

$header = array(
 'Host: ' . $subdomain . '.cybozu.com:443',
 'Content-Type: application/json',
 'X-Cybozu-API-Token: ' . $token,
 );

アンケートフォーム用htmlから渡された入力値を、htmlspecialchars関数でエスケープ処理を行い、変数に格納します。

22
23
24
25

$name = htmlspecialchars($_POST["name"]);
$mail = htmlspecialchars($_POST["mail"]);
$radio = htmlspecialchars($_POST["radio"]);
$message = htmlspecialchars($_POST["message"]);

各変数を、kitnoneのREST APIで処理できるように、json形式にエンコードします。

27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

// フォームから投稿用のjsonを作成
$array[] = array(
 "name" => array(
   "value" => $name 
 ),
 "mail" => array(
   "value" => $mail
 ),
 "radio" => array(
   "value" => $radio
 ),
 "message" => array(
   "value" => $message 
 ),
 );
$json = array(
   "app" => $appid, 
   "records" => $array,
 );
$json = json_encode($json);

作成したjsonデータをkintoneへpostします。ここではfile_get_contetns関数を利用して登録しています。データ登録後に、kintoneが返したレスポンスを、$resposeという変数に格納しています。

48
49
50
51
52
53
54
55
56
57
58
59
60
61

// kintone へ post
$post_context = array(
 "http" => array(
 "method" => "POST",
 "header" => implode("\r\n", $header),
 "content" => $json,
 "ignore_errors" => "true",
 )
 ) 
 $response = file_get_contents(
 'https://' . $subdomain. '.cybozu.com/k/v1/records.json', 
 false, 
 stream_context_create($post_context)
 );

$response内のステータスコードを確認します。コードが200番以外、つまり何らかの原因でデータ登録が正常にできなかった場合、エラーが発生したことを通知します。
コードが200番だった場合、正常終了したことになりますので、データ登録が終了したメッセージを通知しています。

63
64
65
66
67
68

$pos = strpos($http_response_header[0], '200');
 if ($pos === false) {
  echo "データの登録ができませんでした。お手数ですが再度登録下さい。";
 } else {
  echo "データの登録が完了しました。";
 }

上記のようなコードを記述して、post.phpとして出力をします。
以上で、Movable Type側の設定は終了です。

アンケートフォーム、データ登録用プログラムのコードを出力したら、動作チェックを行ってみましょう。kintoneのアプリに、入力したデータが登録されていれば問題ありません。

これで実装は終了です。実際の構築にあたっては、ワンタイムトークンを利用した不正投稿の防止や、入力データのバリデーション、入力データの確認画面を挟むなど、カスタマイズを行うとよいでしょう。

kintoneを利用したアンケートフォームを運用する上で、気を付けたほうがよい点を記述します。

• アプリ作成ユーザーとデータ登録ユーザーは分ける。

  データの登録にあたっては、ユーザーアカウントを利用できます。
  この場合、登録用のデータを新たに作成して、権限を制限したうえで設定をするとよいでしょう。すべての権限をもつ管理者権限のアカウント情報を使うのは、セキュリティの観点上おすすめしません。

• 不必要な権限は付与しない。

  APIトークンやデータ登録用のユーザーアカウントには、登録のみを許可し、不必要な権限を付与しないほうがよいでしょう。権限の制限をすることは、安全な運用をする上で大事なことです。

Movbale Typeでは開発者向けのライセンスがあり、登録するとソフトを評価できます。
この文章をご覧になって「Movable Typeを利用したサイト構築、システム構築を検討したい」と思われた方は、ぜひ開発者ライセンスにお申し込みください。

• ライセンスのご案内
• Movable Type 開発者登録

今回の実装にあたっては、以下のドキュメントを参考にしています。みなさんも、ぜひAPIを利用して、kintoneを活用してみてください。

• kintone API ドキュメント
• 複数のレコードを登録する

Movable Typeに関するお問い合わせは こちら よりお願いします。