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

フォローする

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

こんにちは、シックス・アパートの長内と申します。
この稿では、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行)

mail

評価

ラジオボタン

radio

メッセージ

文字列(複数行)

message

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

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

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

 

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

    [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を利用したアンケートフォームを運用する上で、気をつけたほうが良い点を記述します。

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

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

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

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

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

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

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

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

お問い合わせ先

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

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk