[baserCMS]スケジュールプラグインとメールプラグインを連携する

メールプラグインの初期値入力

メールプラグインというのは、お問合わせフォームなどのメールフォーム機能を提供してくれる大変便利なプラグインで、入力項目を自由に設定できたり、フォームを好きなだけ作成できたりと非常に高機能なことで有名です。

そんなメールプラグインですが、スケジュールプラグインと連携させるのにとても便利な機能があります。それが「初期値入力」機能です。

例えば幾つかのイベントの中から、自分の参加したいイベントに申し込む場面を考えてみましょう。通常のメールフォームの使い方だと、ユーザーが参加したい日付やイベント名を、自分で記入もしくは選択する必要があります。

こんな時、メールプラグインの初期値入力の機能を使えば、メールフォームのページを開いた時点で任意の値を入力済みにできます。つまり、あるユーザーが「イベントA」に参加申込する場合、ユーザーが申込みフォームを開くと、そこには既に「イベントA」の名前や日時が入力済みになっているという状況を実現できるワケです。

そんな初期値入力機能を利用して、今回は『スケジュールプラグインで登録したイベントページ内に「申し込む」リンクを作成し、クリックするとイベントの名前や日時が入力済みになったフォームが表示される』ということをしてみたいと思います。

もちろん、入力フォームに初期値入力をしたとしても、ユーザー側が入力値を自由に書き換えてしまっては問題ですので、今回は「編集不可」のフォームを生成する方法も一緒にご紹介します。

イベントを作成する

まずはスケジュールプラグイン側で、通常通りスケジュール（今回はイベント）を作成します。今回は以下の様な内容でテストデータを作成しました。

• タイトル：OSC2015 広島
• 日時：2015年9月19日 09:00 〜 17:00

その他の内容は適当に記載（今回は作っていません）することとして、重要なのはタイトルと日時です。後ほど、これら２つの情報をメールフォームに渡すことになります。

イベント申込みフォームを作成する

メールプラグインでイベント申込みフォームを新規作成します。今回は下図の通り「event_form」という名称で作成しました。

このイベント申込みフォームでは、スケジュールプラグイン側から「タイトル」と「日時」を受け取る予定です。そこで、受け取った情報を初期値として入力する入力欄（フィールド）を設定します。

• event_title：イベント名
• event_day：イベント日時

今回は上の２つのフィールドをテキスト入力欄（text）として作りました。

スケジュールのテンプレートを調整する

続いてスケジュールプラグインのコンテンツテンプレートを調整します。

スケジュールプラグインでは、テンプレートを調整することで見た目のデザインを自由に変更することが出来ます。スケジュールプラグインのコンテンツテンプレートは、４つのファイルから成り立ちます（４ファイルは１つのフォルダに入っており、コンテンツテンプレートはフォルダ単位になります）。

すなわち、index.php（一覧表示）、day.php（特定の日の一覧表示）、view.php（特定のスケジュールの詳細画面）ｍlists.php（固定ページの一覧表示の呼び出し）がそうです。今回はスケジュールの詳細画面に「申し込む」リンクを作成しますので、view.phpを編集します。

編集を行う前に、コンテンツテンプレートの場所について確認しておきます。 スケジュールプラグインのコンテンツテンプレートは、テーマ内に設置することが出来ます。 まずはデフォルトのコンテンツテンプレートを、今お使いのテーマの中にコピーしてください。baserCMSでは、テーマ内のテンプレートが優先されますので、以後はそちらを編集します。

コピー元

以下のフォルダを見つけてください。見つけたら「Schedules」というフォルダごとコピーします。

  /app/Plugin/Schedule/View/Schedules/

コピー先

先ほどのフォルダをテーマ内にコピーして、以下のようにします。

  /app/webroot/theme/（お使いのテーマ）/Schedules/

コピーが完了したら、view.phpを編集していきます。結果的に以下のview.phpを編集することになります。

  /app/webroot/theme/（お使いのテーマ）/Schedules/default/view.php

申し込むリンクをつける

それでは「申し込む」リンクの設置を行っていきます。

メールフォームへ渡す必要がある情報は、スケジュールの「タイトル」と「日付」になります。情報の受け渡しにはメールフォームの初期値入力の機能を使います。初期値入力の機能では、GET方式を使って情報を渡しますが、その際base64UrlsafeEncode()を使って、情報をエンコードする必要があります。

参考サイト：遷移元のページからメールフォームに値を渡して自動補完する方法

また、 リンクはbaserCMSのヘルパー（表示用の関数）を使って出力する のが一般的ですので、以下の例ではそのようにしています。この例ではただ単に「申し込む」というリンク文字を出力していますが、本番ではボタン風にしたり画像にしたりすると良さそうです。

  <?php
    //イベント名を取得
    $eventTitle = base64UrlsafeEncode($this->Schedule->getTitle($schedule));
    //イベント日時を取得
    $eventDay = base64UrlsafeEncode($this->Schedule->getBeginDate($schedule) .'〜'.$this->Schedule->getEndDate($schedule));
    //リンクを出力
    $this->BcBaser->link(
      '申し込む',
      '/event_form/index/event_title:'.$eventTitle.'/event_day:'.$eventDay
    );
    ?>

上のコードをview.phpの中に記述します。すると「申し込む」というリンクが出力されたうえ、それをクリックすると申込みフォームへ移動するはずです（下図）。

なお、ご覧の通り、上図のサンプルではイベント名と日時しか入っていませんので、本番では「お名前」「フリガナ」「メールアドレス」「住所」などの情報を入力してもらってください。

初期値を入れた入力欄を編集不可にする

ここまでの所で初期値の受け渡しまでは終わりました。峠を越えた感じですが、一つ問題が残っています。現状では初期値を入れた入力欄が、通常のテキスト型の入力フォームの為、ユーザーが自由に変更できてしまうのです。

そこで今回は、この入力欄を編集不可（readonly）にすることで回避したいと思います。 ただし実際の入力欄はメールプラグインによって自動的に出力されてしまいますので、その段階で「readonly="readonly"」を付与するのは難しく現実的ではありません。 そこで一度出力させた後、jQueryを使って後天的に編集不可の属性を与えることとします。

入力欄にクラスを与える

jQueryを利用する以上、編集不可にしたい入力欄（フィールド）を特定する必要があります。幸いメールプラグインのフィールド編集で、クラス名を指定することができますので、クラスを与えて特定することとします（クラスの設定欄はオプション欄を開いた所にあります）。

今回はこのクラス名を「noEdit」としたいと思います。イベント申込みフォームで作成した２つのフィールド「event_title」と「event_day」の編集画面を開いて、クラス「noEdit」を与えてください（下図）。

次にjQueryを使ってreadonly属性を与えます。例えば今回は次のような記述を行います。記述する場所はレイアウトテンプレート内が一般的でしょう。

  <script type="text/javascript">
$(function(){
$('.noEdit').attr('readonly',true);
});
</script>
  

上の記述は、クラス「noEdit」を持つ要素に対して、readonly属性（編集不可）を付け加える、という意味です。

メールフォームのテンプレート

メールプラグインではフォーム毎に利用したいレイアウトテンプレートを変更できます。そのため、ここからの記述は皆さまの環境によって、読み替えを行って頂く必要があります。

利用したいメールフォームで、どのレイアウトが使われているかは、「メールプラグイン管理」＞「（使いたいメールフォーム）設定」で開いた画面（フォームの名前などを設定する画面）の下の方にある、「オプション」欄を開いたところで分かります（下図）。特に設定をしていなければ「default」が使われます。

レイアウトテンプレートはお使いのテーマ内に含まれていますので、例えば「default」をご利用であれば、以下の場所に以下の名前で存在します。

  /app/webroot/theme/（お使いのテーマ）/Layouts/default.php

レイアウトテンプレートの場所が特定できたら、前述のjQueryの記述を適当な所（headタグ内が一般的だと思います）に入れてください。

確認する

以上でスケジュールプラグインとメールプラグインとの連携は終わりです。最後のjQueryの記述が終わったら、意図した通り動くかどうかをお確かめください。

おわりに

いかがでしたでしょうか？ baserCMSに入っているメールプラグインはとても便利です。今回はスケジュールプラグインとの連携でしたが、同じ方法で他のプラグインや機能とも連携が可能なはずです。興味のある方は、色々とお試しいただくと良いかも知れません。

それでは今後とも株式会社ヒニアラタを何卒宜しくお願い致します。