「Movable Type」 と kintone を連携してフォームデータを DB 化しよう

著者名: シックス・アパート株式会社 (External link)  長内 毅志

目次

はじめに

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

Movable Type とは

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

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

連携のシナリオ

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

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

Movable Type と kintone を連携するメリット

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

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

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

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

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

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

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

動作確認

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

  • kintone
  • Movable Type

フォームの実装

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

kintone アプリの設定

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

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

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

フィールド名 フィールドタイプ フィールドコード
お名前 文字列(1行) name
メールアドレス 文字列(1行) mail
評価 ラジオボタン radio
メッセージ 文字列(複数行) message

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

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

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

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

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

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

API トークンの設定

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

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

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

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

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

Movable Type のテンプレート設定

続いて、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 の REST API を利用したデータ登録の注意点

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

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

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

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

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

Movable Type 開発者ライセンスの利用方法

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

実装にあたってのリファレンス

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

お問い合わせ先

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