フロントエンドコーディングのみで簡単にセキュアなお問い合わせフォームが作れるようになりました

Posted: 2016-02-12 / Modified: 2016-02-18 / Tags: Plugin

平間清彦

「Webサイト制作でもっとも厄介なものは？」と言われれば、多くの人がフォームと答えるのではないかと思います。

Webサイトの見た目・インタラクションはフロントエンドコーディング（HTML、CSS、JavaScript）で済むのに、フォームを扱うためだけにバックエンドが必要になる、というケースはかなり多いです。

フォームは実装的には厄介であるものの、Webサイトの中で一番重要な「コンバージョン」の役割を担っています。なので、フォームの見た目やインタラクション（特にバリデーションまわり）には特に気を配るべきで、「面倒くさいからGoogleフォームで」と外部サービスにも頼りづらい状況です。

簡易的なデータベースという意味では、GoogleスプレッドシートをWeb API化するSheetsuのようなサービスもありますが、所詮Web APIなのでURLがわかれば誰でもデータの取得が出来てしまいます。

この問題を解決するために、Milkcocoaの機能としてセキュア（データの取得が管理者にしかできない）な問い合わせフォームを設置できる機能を追加しました。今回は、その機能を使った具体的な設置方法を説明します。

※保存データ数100,000データまでであれば、無料で利用できます。

以下がデモです。動作確認目的で利用下さい。こちらで質問をしても基本的に返信致しません

セキュアな問い合わせフォームのデモ

Milkcocoaのセットアップ

Milkcocoaを利用されてない方でも、簡単に利用できます。

Milkcocoaに登録する（無料）

MilkcocoaのWebサイトの無料登録ボタンから利用登録をします。メールアドレスとパスワードを送信したあと、送られてくるメールで認証をしたら登録完了です。

Milkcocoaの管理画面にログインする

登録後、MilkcocoaのWebサイトのログインボタンからログインをします。

Milkcocoaアプリを作成する

ログインをしたら以下のようなアプリリスト画面が出るので、新しいアプリを作る（アプリ名は16文字まで）を押してアプリ名を入力後、アプリを作成します。

Milkcocoa Contact Form Admin 画面を開く

アプリを作成したら、作成したアプリをクリックして「アプリの管理画面」へ移動します。

「Webサイト用プラグイン」タブをクリックすると、以下のような画面が出てくるので「セキュアなお問い合わせフォーム」の管理画面を開くをクリックします。

以下がMilkcocoa Contact Form Admin画面（Milkcocoa Contact Formの管理画面）です（画像にはデータが既に入っていますが最初はデータはありません）。「次の理由で管理者としての認証に失敗しましたorigin denied」というアラートが表示されるかと思いますが、無視して大丈夫です。

ここから先は、Milkcocoa Contact Form Admin画面にある「導入方法」（画像の右上にも見える）の通りに進めれば導入できますが、一応こちらでも説明します。

Milkcocoa Contact Formの導入

※こちらは、上記のMilkcocoa Contact Form Admin画面の「導入方法」にも同じ内容が書いてあります。

許可オリジンの設定

Milkcocoa Contact Form Admin画面を利用可能にするために、「アプリの管理画面 > 設定 > 許可Origin」にmlkcca.comを追加して下さい。

設定していない状態では「次の理由で管理者としての認証に失敗しましたorigin denied」というアラートが表示されます。

セキュリティルールの設定

「アプリの管理画面 > セキュリティルール」に以下のセキュリティルールを貼付けて保存して下さい。こちらのセキュリティルールを記述しないとだれでもデータにアクセスできてしまいますので必ず設定して下さい。なお、Milkcocoa Contact Form Admin画面内ではセキュリティルールは無視されすべてのAPIが使用可能になっています。

mcp-contactform {
  permit : push;
  rule : true;
}

なお、貼り付けの際、デフォルトで記載してある以下の設定は必ず削除して下さい。

* {
  permit : all;
  rule : true;
}
↑必ず削除する

Webページへのコード貼り付け

※追記(2016-02-18)：CDNから読み込むJavaScriptのコードを修正しました（ファイル名も変えています、contactform.min.js→milkform.min.js）。具体的にはsubmit()関数を使って送信するタイミングを自分で決められるようにしました。

milkcocoa.jsとmilkform.jsをCDNから読み込んで、formタグにmilkform属性を含ませ、JavaScript内でvar milkform = new MilkForm('あなたのapp_id');と書けば利用開始できます。milkform.submit()でデータの送信が出来て、ロード時、送信成功時、失敗時のコールバックも設定できます。

<form milkform>
  <input type="text" name="e-mail">
  <input type="number" data-type="number" name="age"> <!-- 保存時の値をNumber型にしたい場合はdata-typeにnumberを指定して下さい -->
  <textarea name="message"></textarea>
  <input id="submitBtn" type="submit" value="Send">
</form>
<div milkform-fallback style="display: none;">Milkcocoaが対応していないブラウザでは、フォームが表示されません。その代わりにmilkform-fallbackという属性を含む要素があれば、そちらが表示されます。具体的には、ユーザーエージェントがAndroidの4系未満、IE9以下の場合フォールバックが表示されます。フォールバックには、メールアドレスを記載して問い合わせを促すようにすると良いかと思います。</div>
...
<script src="https://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script>
<script src="https://cdn.mlkcca.com/milkform.min.js"></script>

<!-- JavaScriptの場合 -->
<script>
window.addEventListener('load', function () {
  var $submitBtn = document.getElementById('submitBtn');
  var milkform = new MilkForm('あなたのapp_id', function(isSupported){
    // ロード完了時処理を書きたい場合はここ
    // isSupportedにはMilkcocoaにブラウザが対応しているかが帰ってくるので
    // milkform-fallbackを使わずに、サポートの有無に応じてこちらに自由に処理を書くことも出来ます
  });
  milkform.onSuccess(function(datum){
    //送信成功時処理を書きたい場合はここ
  });
  milkform.onFailure(function(error){
    //送信失敗時処理を書きたい場合はここ
  });

  $submitBtn.addEventListener('click', function () {
    // ここにバリデーションとか
    milkform.submit();
  });
});
</script>

<!-- jQueryの場合 -->
<script>
$(function () {
  var $submitBtn = $('#submitBtn');
  var milkform = new MilkForm('あなたのapp_id', function(isSupported){
    // ロード完了時処理を書きたい場合はここ
    // isSupportedにはMilkcocoaにブラウザが対応しているかが帰ってくるので
    // milkform-fallbackを使わずに、サポートの有無に応じてこちらに自由に処理を書くことも出来ます
  });
  milkform.onSuccess(function(datum){
    //送信成功時処理を書きたい場合はここ
  });
  milkform.onFailure(function(error){
    //送信失敗時処理を書きたい場合はここ
  });

  $submitBtn.click(function () {
    // ここにバリデーションとか
    milkform.submit();
  });
});
</script>

上記のHTMLの場合、以下のようなデータが保存されます。

{
  "id" : "自動で振られる文字列"
  "timestamp" : 123...
  "value" : {
    "e-mail"  : "e-mailのフィールドの内容",
    "age"     : "ageのフィールドの内容",
    "message" : "messageのフィールドの内容"
  }
}

コード内にも書いていますが、Milkcocoaが対応していないAndroidの3系以下・IE9以下の場合はフォームが表示されず、milkform-fallbackという属性を含む要素があればそちらが表示されます（なくても大丈夫です）。milkform-fallbackを含む要素には、style="display: none;"をあらかじめ指定しておいて下さい。

Milkcocoa Contact Form Admin画面の操作

表示するkeyの追加・削除

「Add Key...」でform内で指定したname属性を追加することで、表に値が表示されるようになります。

表示する項目の指定なので、formのすべてのname属性を追加する（対応させる）必要はありません（表にkeyを追加していなかったからその項目が保存されない、ということももちろんありません）。

一般的なフォームテーブルと違い「表示したい項目だけを表示する」といったことも出来ます。

データを取得する日付の指定

右上の日付が書いてある部分をクリックすると、データの取得範囲を指定できます。

検索

検索窓では、フィルターをかけることができます。

利点

自由なフォームが作れる

冒頭でも言った通り、フロントエンドコーディングだけでセキュア（データの取得が管理者にしかできない）に使うことができます。

formにmilkform属性を追加するだけなので、formの形式は自由です。スタイルやインタラクションを自由に書くことが出来ます。

保存データ数100,000データまでは無料で使える

Milkcocoaの無料プランは以下のようになっています。

保存可能データ数：100,000データ
同時接続数：20

今回のフォームでは、フォームが送信されてはじめてMilkcocoaに接続して、データを保存したら接続を切るようにしているため、最大同時接続数は毎日ほぼ1に留まります。

プランに関わるパラメータが「保存可能データ数」のみになるため、100,000データまでは使い放題というわけです。

まとめ

Milkcocoaを使って、フロントエンドコーディングのみで実装するセキュアなお問い合わせフォームの設置方法を説明しました。

筆者の私自身がフロントエンドエンジニアなので、「Webサイトのフォーム問題」はとにかく解決したくて、半分自分のために作ったといっても過言ではないです（笑）

私も積極的に使っていこうと思っているので、皆さんも是非使ってみて下さい。