（著者：シックス・アパート株式会社 長内 毅志）
こんにちは、シックス・アパートの長内と申します。
この稿では、Movable Type でアンケートフォームを生成して、kintoneと連携する方法を解説します。
Movable Type とは
Movable Type とは、ウェブサイトの管理に利用するCMS (コンテンツ管理システム) ソフトです。
ウェブサイトの運用を支援し、htmlの作成や更新、デザインの変更などを、すみやかに行うことができるようになります。
Movable Type は日本国内の企業に幅広くご利用いただいております。2016年6月時点で、導入企業は5万社超。日経平均225社の半分以上に、Movable Type をご利用いただいております。
連携のシナリオ
連携のシナリオは以下のとおりです。
- Movable Type で運用しているウェブサイト上に、アンケートフォームを生成
- アンケートフォームから、kintone登録用プログラムに、入力値を受け渡す
- kintone登録用プログラムから、API経由でkintoneへデータ送信
- 登録されたデータはkintone上で管理
Movable Type とkintoneを連携するメリット
Movable Type とkintoneを連携するメリットは以下があります。
入力データを公開サーバーと分離して保存・管理
ウェブサイトから収集した情報を、ウェブサイトと同じサーバー上に保存するのは、情報保護の観点からお勧めできません。
入力されたデータをウェブサーバー上に残さず、kintoneに保存することで、情報漏えいのリスクが低下します。
kintoneの機能を利用してデータ集計
kintoneには、データの絞込や検索などの、データベース的な機能があらかじめ実装されています。kintoneのデータベース機能を利用することで、データ集計がスムーズになります。
フォームページのデザイン管理
Movable Typeから入力フォームを作成することで、ウェブサイトと一体化したデザインのフォームが作成でき、デザイン変更もスムーズに行うことができます。
動作環境
今回のシステムは、以下を利用します。
- kintone
- Movable Type
フォームの実装
アンケートフォームは、Movable Type のテンプレート機能を利用して、phpを使ったフォームを生成します。このphpを利用して、入力データをkintoneに受け渡します。
kintone アプリの設定
まず最初に、kintoneのアプリを設定します。今回のアンケートフォームでは、以下の4項目について集計するものとします。
- お名前
- アンケート入力者の名前
- メールアドレス
- アンケート入力者のメールアドレス
- 評価
- Good,Soso,Badの3つから選択
- メッセージ
- 感想やご意見などを自由に入力できるコメント欄
この4項目を、kintoneアプリで以下の様に設定します。
|
フィールド名 |
フィールドタイプ |
フィールドコード |
|
お名前 |
文字列(1行) |
name |
|
メールアドレス |
文字列(1行) |
|
|
評価 |
ラジオボタン |
radio |
|
メッセージ |
文字列(複数行) |
message |
設定を行ったら、アプリのIDを確認します。確認の仕方はいくつかありますが、例を挙げます。
- アプリの操作画面から確認する
アプリを選択して、ブラウザのURL欄を確認します。
https://○○.cybouzu.com/k/35/
などのように、ドメイン名の後に数字が表示されます。この数字がアプリIDになります。今回例示したURLで言うと、「35」がアプリIDになります。
- アプリの一覧画面から確認する。
[kintoneの操作と設定]=>[アプリ管理]から、[ID]の数字を確認します。この数字がアプリIDとなります。
アプリIDを確認したら、番号を記録しておきます。フォーム設定時に、このアプリIDが必要となります。
APIトークンの設定
次に、APIトークンの設定を行います。
作成したアプリの[設定画面]から、[詳細設定]を選択し、[APIトークン]をクリックします。
APIトークンの作成画面に移動しますので、[生成する]ボタンを押します。
すると、トークンが生成されますので、[レコード追加]にチェックを入れ、[保存]ボタンを押します。
最後に、アプリの設定画面から[設定完了]ボタンを忘れずに押すようにします。[設定完了]を行わないと、APIトークンが有効にならないため、ご注意ください。
ここで設定したAPIトークンを利用して、kintoneへのデータ投稿を行います。
APIトークンを利用すると、kintoneのユーザーアカウントやパスワードを利用せずに、データ投稿を行うことができます。必要に応じてトークンの権限を削除したり、権限を変更することで、ユーザーアカウントを利用するよりもセキュアな運用が可能となります。
Movable Type のテンプレート設定
続いて、Movable Type のテンプレートを設定します。
今回のシナリオでは、フォームから入力したデータ登録用プログラムへ引き渡し、データ登録用プログラムからkintoneへデータを登録することになっていました。
Movable Type では、
- アンケートフォーム(html)
- データ登録用プログラム(php)
の2つのテンプレートを作成します。
フォームページの作成
はじめに、アンケートフォームを作成します。
Movable Type の管理画面にサインインを行い、アンケートフォームを設定したいウェブサイトもしくはブログを選択します。左の操作メニューから[デザイン]=>[テンプレート]を選び、テンプレート設定の画面へ移動します。
ここで、テンプレートの新規作成を行います。名前は[アンケートフォーム]とします。
ここに、デザインテンプレートを元にフォーム用のhtmlを記述します。
以下は、フォーム部分のサンプルhtmlです。
kintoneで設定したアプリの情報を元に、1対1対応を行う形で入力フォームを定義します。このフォームでは、わかりやすいようにidをkintoneのフィールドコートと同じ文字列に設定しています。
データ登録用プログラム[post.php]へ、入力されたデータを引き渡すように定義します。
実際に出力したフォームは以下の様な画面になります。
続いて、データ登録用プログラムのテンプレート作成します。Movable Type のテンプレート内に、phpの記述を行います。以下は、アンケートフォーム用のhtmlから引きとったデータを登録するサンプルコードとなります。
まず、kintoneへデータを登録するための初期設定を行います。今回設定したアプリのサブドメイン、アプリのID、先ほど設定したトークンを利用します。
続いて、通信を行うためのHTTPヘッダーを定義します。
アンケートフォーム用htmlから渡された入力値を、htmlspecialchars関数でエスケープ処理を行い、変数に格納します。
各変数を、kitnoneのREST APIで処理できるように、json形式にエンコードします。
作成したjsonデータをkintoneへpostします。ここではfile_get_contetns関数を利用して登録を行っています。データ登録を行った後に、kintoneが返したレスポンスを、$resposeという変数に格納しています。
$response内のステータスコードを確認します。コードが200番以外、つまりなんらかの原因でデータ登録が正常にできなかった場合、エラーが発生したことを通知します。コードが200番だった場合、データ登録が正常に行われたことになりますので、データ登録が終了したメッセージを通知しています。
上記のようなコードを記述して、post.phpとして出力を行います。
以上で、Movable Type 側の設定は終了です。
アンケートフォーム、データ登録用プログラムのコードを出力したら、動作チェックを行ってみましょう。kintoneのアプリに、入力したデータが登録されていればOkです。
これで実装は終了です。実際の構築にあたっては、ワンタイムトークンを利用した不正投稿の防止や、入力データのバリデーション、入力データの確認画面を挟むなど、カスタマイズを行うと良いでしょう。
kintoneのREST APIを利用したデータ登録の注意点
kintoneを利用したアンケートフォームを運用する上で、気をつけたほうが良い点を記述します。
アプリ作成ユーザーとデータ登録ユーザーは分ける
不必要な権限は付与しない
Movable Type 開発者ライセンスの利用方法
Movbale Type には開発者向けのライセンスを用意しており、登録を行うことでソフトの評価を行うことができます。この文章をご覧になって「Movable Type を利用したサイト構築、システム構築を検討したい」と思われた方は、ぜひ開発者ライセンスにお申し込みください。
実装にあたってのリファレンス
今回の実装にあたっては、以下のドキュメントを参考にしています。みなさんも、ぜひAPIを利用して、kintoneを活用してみてください。
お問い合わせ先
Movable Typeに関するお問い合わせはこちらよりお願いします。
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。