投稿者「docadmin」のアーカイブ

予約終了画面の表示カスタマイズ

ここでは予約終了時の表示について、リプレースメント変数を利用した表示出力のカスタマイズ方法について説明します。

デフォルト表示は、以下のような簡単な表示です。

が、予約も含めて予約後のいろいろな情報を予約直後に知らせたい場合、予約終了時に表示するコンテンツをカスタマイズして用意し、予約終了時に画面に表示することができます。

仕組みと用意するデータ

終了時に表示するコンテンツは、「booking-thanks」と名付けた固定ページを用意し、出力したい内容を登録しておくと、終了時に内容を読み出し、リプレースメント変数が置き換えられ、表示されます。

また乗車券の詳細を表示するテンプレートは、「booking-thanks」固定ページに「ticket_replacement」をキーとしたカスタムフィールドの値として、乗車券のリプレースメント変数を利用したテキストを登録しておきます。

レプレースメント変数を予約データに置き換えられたテキストは、固定ページのコンテンツに「%TICKET%」と記載したところへ挿入されます。

サンプル

予約時に表示する画面と、その設定は以下の通りです。

次の設定は、上図の表示に帯する固定ページ「booking-thanks」のコンテンツ設定内容です。

予約のお申込みを承りました。予約は以下の通りです。

【予約ID】
%BOOKING_ID%

【予約乗車券】
%TICKET%

【連絡先】
お名前：%SEI% %MEI% 様
電　話：%TEL%
メール：%EMAIL%

【受付日時】
%CREATED%

ご予約ありがとうございました。

予約センター
03-0123-0123

カスタムフィールドの設定

カスタムフィールドは、WordPressの主データとなる固定ページや投稿に、それに関連するデータを追加することができる標準機能です。

別の呼び名で「メタデータ」とも言い、「名前」と「値」を登録することになりますが、ここでは「名前」を「キーコード」、「値」はカスタムフィールドに登録するデータ、と表現します。

カスタムフィールドを追加するには、WordPressの固定ページ編集画面で右図のように、右側に表示される「オプション」からプルダウンメニューを引き出し、「設定」を選択します。

設定画面が表れたら、左側の「パネル」を選択肢、画面の下側にある「カスタムフィールド」の機能を有効にします。

カスタムフィールドが有効になるとページの編集画面下部に、下図のようなカスタムフィールドの追加機能が表示されるようになります。

乗車券データのリプレースメント変数追加

テンプレート本文に追加する「%TICKET%」には、カスタムフィールドのキーコード「ticket_replacement」に設定された、乗車券表示テンプレートで置き換えられた乗車券のテキスト情報が挿入されます。

カスタムフィールドを登録するとき、「ticket_replacement」は上図赤丸の「新規追加」をクリックして入力、データとして次のデータを設定しました。

%BOARDING_TIME% %TRANSIT_NAME% %LINER_NAME% %GETON_STATION% %GETOFF_STATION% 座席：%SEAT_NO%<br>

実際の入力で上記のデータは、改行は入れていません。また、複数の乗車券を表示できるよう、行末に改行を表すタグ「<br>」を付加しています。

カスタムフィールドの追加は入力後、「カスタムフィールドを追加」するボタンを押して登録します。

リプレースメント変数について

予約メールやキャンセルメールに予約情報を挿入したいとき、文章をより柔軟に設定できるように「リプレースメント変数」と呼ぶ記述子が用意されています。

記述子の形式は「%項目名%」のように、項目名(キーワード)を%文字で囲った半角文字列です。以下に利用できる変数を掲載します。なお入力データがない場合は、空白として扱われます。

予約データ

  • %APPLICANT_ID%
    データベースに登録された予約データのユニーク番号です
  • %BOOKING_ID%
    申込者に知らせる予約IDです、形式は「Ayyyymmdd00000」
  • %CREATED%
    予約日時です、形式はtranslationの$dateForm[‘DATE_TIME’]
  • %TICKET%
    予約した乗車券です、後述します

申込者データ

予約フォームで入力設定した項目以外は利用できません。変数として指定した場合は空白か、予期しない文字が出力される場合があります。

  • %COMPANY%
    会社・団体名
  • %SEI%
    姓
  • %MEI%
    名
  • %SEI_KANA%
    セイ
  • %MEI_KANA%
    メイ
  • %EMAIL%
    E Mailアドレス
  • %POSTCODE%
    郵便番号
  • %ADDRESS1%
    住所1
  • %ADDRESS2%
    住所2
  • %COUNTRY%
    居住国
  • %TEL%
    電話番号
  • %MOBILE%
    携帯電話番号
  • %GENDER%
    性別
  • %AGE%
    年齢
  • %USER_ID%
    ユーザーID
  • %NUMBER%
    社員番号
  • %OFFICE%
    事業所名
  • %DIVISION%
    部署1
  • %SECTION%
    部署2
  • %POSITION%
    役職
  • %EXTENSION%
    内線番号

乗車券データ

乗車券(チケット)の予約は複数できます。そのためメールのサンプルでは、１行に１件を出力する以下のような設定になっています。

%BOARDING_TIME% %TRANSIT_NAME% %LINER_NAME% %GETON_STATION% %GETOFF_STATION% 座席：%SEAT_NO%

行末は見えませんが改行が設定されています。

  • %BOARDING_TIME%
    乗車日
  • %TRANSIT_NAME%
    路線名称
  • %BOUND_FOR%
    方面(終着駅名)
  • %LINER_NAME%
    運行便名
  • %START_STATION%
    始発駅名
  • %START_TIME%、形式はtranslationファイルの$btForm[‘ticket_time_form’]です
    始発時刻
  • %GETON_STATION%
    乗車駅名
  • %DEPARTURE_TIME%
    乗車駅発車予定時刻
  • %GETOFF_STATION%
    下車駅名
  • %ARRIVAL_TIME%
    下車駅到着予定時刻
  • %SEAT_NO%
    座席番号

%BOARDING_TIME%の表示は、translationファイルの$btForm[‘ticket_date_form’]形式を利用しています。

また%START_TIME%、%DEPARTURE_TIME%、%ARRIVAL_TIME%の表示は、translationファイルの$btForm[‘ticket_time_form’]を利用しています。

ショートコード 運行便表示

運行便の運行スケジュール、ターミナル駅、発着時刻、運行車両など登録した運行データの情報を一覧表示するショートコードです。

[transit_note tid="xx"]

運行便表示は次のように表示されます。

利用に際して

  • 運行便表示のの装飾はCSSを編集してください
    表示はHTMLのテーブルタグを利用してプログラムプログラムにより出力しています。この構造を変更することはできませんが、表示、装飾に柔軟に対応できるように、特定のclass属性を持つdivやspanを多く挿入しています。それらはブラウザーの機能を利用して確認できますので、CSSの編集に活用してください。

cssファイルは「src/MTSTicketBooking/css/transit-note.css」です。

  • タイトルの変更は多言語対応ファイルを編集してください
    表上部ヘッダの項目タイトルは、多言語対応ファイル「Translation.php」ファイルを利用して、「$transitNote」変数に設定しています。

多言語対応ファイルは「src/MTSTicketBooking/lang/Translation.php」ファイルです。

表示項目と並びについて

表示可能な項目は次の通りで、表示する項目を取捨選択してショートコードのパラメータに設定することができます。また表示も指定した項目キー名の順番に配置されます。

項目キー名と表示内容

  • liner_name
    運行便名
  • start_station
    始発駅名
  • start_time
    出発時刻
  • end_station
    終着駅名
  • end_time
    到着時刻
  • distance
    運行距離
  • elapsed
    運行時間
  • vehicle_name
    運行車両名
  • capacity
    定員＝全座席数
  • free
    自由座席数
  • reserved
    指定座席数

デフォルトの指定は次の通りです。

item="liner_name,start_station,start_time,end_station,end_time,distance,elapsed,vehicle_name,capacity"

各種パラメータ

キーワード機能参考
tid
省略不可		公開登録されている運行データのIDを指定します。
bound_down
省略値 1		運行データの下り便情報を表示します。「0」は非表示。例：
“0”
bound_up
省略値 1		運行データの上り便情報を表示します。「0」は非表示。例：
“0”
elapsed_unit
省略値 60		乗車時間表示を分単位で表示。
date_format
省略値 G:i		時間表示フォーマット。例：
“H:i”
div_id
省略値 空白		運行便表を包含するdivタグのid属性指定。
div_class
運行便表を包含するdivタグのclass属性指定。省略値は「mtstk-transit-note」。この値を変更するとデフォルトCSS指定が無効になります。
table_id
省略値 空白		運行便表示tableタグのid属性指定。
table_class運行便表示tableタグのclass属性指定。
item運行便表示項目の指定。項目をカンマ区切りでパラメータに設定します。

ショートコード 予約カレンダー月表示

運行便の予約状況を月カレンダーで、固定ページや投稿に挿入するためのショートコードです。

[transit_month tid="xx"]

カレンダー表示は次のようになります。

デフォルトの表示

カレンダーの各日付へ表示させる情報には、以下の３種類があります。

  • 予約数 / 総数 (右図参照)
    デフォルトの表示です。予約数、総数は共に自由席と指定席の合計が表示されます。
  • 残席数 (上図参照)
    予約可能な空席数の表示です。空席数は自由席と指定席の合計が表示されます。
  • 記号表示 (下図参照)
    残席数の状況を記号で表示します。

各表示は、ショートコードにパラメータ「liner_sign」を設定することで切り替えることができます。

利用に際して

利用に際し、最初に次の点に留意してください。

  • ショートコードは固定ページか投稿のコンテンツで設定してください
    前月や翌月リンクなどカレンダーは、同じページへのリダイレクト処理で書き換えます。ウィジェットなどに設定するとリダイレクトページが定まらず、書き換えできない場合があります。
  • カレンダー表示の装飾はCSSを編集してください
    カレンダーはHTMLのテーブルタグを利用してプログラムにより出力しています。この構造を変更する事はできませんが、表示、装飾に柔軟に対応できるよう、特定のclass属性を持つdivやspanを多く挿入しています。それらはブラウザーの機能を利用して確認できますので、CSSの編集に活用してください。

cssファイルは「src/MTSTicketBooking/css/transit-month.css」です。

各種パラメータ

キーワード機能参考
tid
省略不可		公開登録されている運行データのIDを指定します。
user_only
省略値 1		カレンダーの表示がログインユーザーに限定されます。「0」を設定すると限定され図表示されます。例：
“0”
year_month
省略値 空白		最初に表示するカレンダーの対象年月を設定します。パラメータは「yyyy-mm」の形式で設定しください。例：
“2022-04”
bound_down
省略値 1		運行計画の下り便を表示します。「0」は非表示。例：
“0”
bound_up
省略値 1		運行計画の上り便を表示します。「0」は非表示。
liner_check
省略値 1		予約チェックボックスを表示します。「0」は非表示。例：
“0”
liner_name
省略値 1		便名を表示します。「0」は非表示。例：
“0”
liner_sign
省略値 0		予約数の表示指定です。「0」は「予約数/総数」、「1」は空席数、
「2」は記号表示です。		例：
count_form
省略値		予約状況を空席数で表示するsprintfのフォーマット指定。空白の場合liner_signが「0」なら「(%d/%d)」、「1」なら「(%d)」です。例：
“%02d”
div_id
省略値 空白		カレンダーを包含するdivタグのid属性指定。指定すると月切替の表示でanchor指定します。
div_class
省略値		カレンダーを方がううするdivタグのclass属性指定。省略値は「mtstk-transit-month」。この値を変更すると多くのCSS指定が無効になります。
table_id
省略値 空白		カレンダー表示tableタグのid属性指定。
table_class
省略値 空白		カレンダー表示tableタグのclass属性指定。
title_use
省略値 1		カレンダータイトル表示有無。「0」は非表示。例：
“0”
calendar_title
省略値 空白		省略は「yyyy-mm」表示。指定した文字列を表示。
month_link
省略値 1		カレンダー表示切替の前月翌月リンク表示。「0」は非表示。例：
“0”
month_format
省略値 Y-n		タイトル、リンクで表示する年月表示フォーマット。例：
“Y年n月”
prev_title
省略値 空白		前月リンク表示文字列。空白はmonth_formatによる年月表示。例：
“前月”
next_title
省略値 空白		翌月リンク表示文字列。空白はmonth_formatによる年月表示。例：
“次月”
prev_mark
省略値 空白		前月リンクの前に表示するマーク文字指定(タグも可)。例：
“<<“
next_mark
省略値 空白		翌月リンクの後に表示するマーク文字指定(タグも可)。例：
“>>”
anchor
省略値 空白		div_idで指定した以外のid属性値を指定したい場合に指定。
caption_side
省略値 top		前月翌月リンクを表示するcaptionの位置。例：
“bottom”
button
省略値 SEND		送信ボタンのボタントップ文字。langファイル検索キー。

上記パラメータは、ショートコード内に設定するパラメータです。

予約状況を記号で表示する

「liner_sign=”1″」を指定することで、カレンダー内の表示を記号表示に切り替えることができます。

表示する記号の設定は、各種設定のカレンダー表示タブページの月カレンダー設定で詳細な設定ができます。

表示内容は、設定された文字列をそのまま出力します。ですのでHTMLタグを含めた文字列を設定することで、アイコンなどの挿入ができます。

予約状況で、「空席余裕」から「空席少」へ切り替えるタイミングは、空席数が「切替空席数」以下になると「空席少」を出力するようになります。

ショートコード

システムが提供するショートコードの使い方を解説します。ショートコードは、目的に合わせて固定ページや投稿のコンテンツに、カギ括弧とキーワードを含めて設定します。

提供されるショートコード機能は次の通りです。

  • 予約月カレンダー
    カレンダーに予約可能な空席数を表示し、カレンダーから予約便を選択、予約フォームへ移動するカレンダー表示機能を組み込みます。
  • 運行便表
    運行便の運行スケジュール、始発終着駅、出発・到着時刻など運行データの情報を一覧表示する機能を組み込みます。

初めての操作

アプリケーションシステムの機能を覚え、利用する、あるいは応用するには、実際に動作する予約サイトを試験的に立ち上げることが近道となります。一通りの設定作業を進める中で、システムの使い方が把握できるようになります。

本節では、サンプルデータを使ってデータの設定から予約まで、順番に操作を試していきます。

以降の説明は、インターネットのWebサイト制作に経験があり、WordPressやプラグインの操作に知識のある読者を対象とします。不明な用語があれば、Web検索など利用して調べてください。

準備

最初に本プラグインが動作する環境を用意してください。環境を用意する簡単な方法は、レンタルサーバーを借り、サブディレクトリにWordPressと本プラグインをインストールすることです。

サーバーに関して技術力のある方は、ローカルで動作する環境を用意してください。レンタルサーバー上で試験することは、同じサーバーを利用する他者に迷惑を掛ける可能性や、大事なデータを漏洩させてしまう危険があるからです。

セキュリティ上の注意点として、WordPressのセットアップの際「検索エンジンによる検索の対象外」となるよう、指定してください。また試験サイトと言えどもパスワード文字列に注意を払い、クラッキングを容易に許す設定は避けてください。そしてトレーニング終了後は、早めにサイトを閉鎖しましょう。

WordPressが動作するようになったら、最初に「設定」の「ディスカッション」ページにおいて、「デフォルトの投稿設定」はすべて無効にしてください。サイト攻撃の踏み台として利用されないようにするためです。

最後にインストール後の動作においてアプリケーションが「動作しない」、あるいは「表示がおかしい」場合、利用するサーバーでWAF機能が有効になっていないか確認してください。WAF機能によりWebアプリケーションが正しく動作しないことがあります。その場合はWAF機能を無効にしてください。

次のお勧め記事

乗車券予約システムのプラグインを有効化し、メニュー項目の操作内容を把握し、これから設定するデータを確認します。

▶ ステップ1. 機能の概要と準備

閑話

この節は余談ですのでスキップしてください。

レンタルサーバーで試験する最大の注意点は、操作している内容、情報がすべてインターネットで公開されている、ということです。

インターネットに接続している場合、サイトを放置した結果、簡単なパスワードを利用してクラックされたり、あるいは大事なデータを漏洩させてしまったりと、セキュリティに対して利用者の意識の低さが原因となるトラブルが多いです。

サイトがクラックされる事による恐怖ですが、実はあなたが知らないうちに犯罪者の片棒を担がされることにあります。

インターネットではありませんが、麻薬運びに利用され、他国で拘束、裁判で死刑判決が出されることもあります。「知りませんでした。」では許されない状況が発生しうるのです。

サイトがクラックされたとき想定されるクラッキングは、データが目的で無ければ、サイトを踏み台にすることです。迷惑メールの発信やフィッシングなど、簡単に利用されてしまいます。

インターネットは十分注意して活用をいたしましょう。

ステップ１. メニュー機能概要とデータの準備

このトレーニングで使うWordPressのテーマは、公式で配布されているTwenty Twenty Twoを利用します。システムで設定するCSSは、当該テーマで動作確認可能なレベルのものとなります。本番環境では各サイトに合わせて(変更して)利用してください。

どのテーマを利用するかは、同じテーマを利用することで、説明と異なる場合の混乱を避けることができます。

プラグインの有効化

プラグインを有効化すると、予約システムで利用するデータベースのテーブル、および設定データをデータベースに新しく登録します。これらのデータは、プラグインを削除してもデータベースから削除されないようにしています。

削除が必要な場合は、サーバーから提供されるデータベース管理システムを利用して、データを削除してください。

操作メニューの機能概要

プラグインをインストールすると、このシステムで利用するメニューが追加されます。以下簡単に説明します。

  • 運行カレンダー
    日々の運用において、カレンダー上に運行の予約情報を表示します。
  • 予約リスト
    予約が実行されると、予約リストにその予約が掲載されます。予約データを指定して編集、キャンセル、削除ができます。
  • 運行計画
    運行スケジュールと予約条件を設定します。
  • メール送信
    予約リストから予約データを選択すると、予約者宛へ、メール文の編集、送信を実行できます。
  • 営業カレンダー
    カレンダーに表示する祝祭日名称、休業日を設定します。ただし運行の有無は「運行計画」で設定します。
  • 各種設定
    カレンダー表示、予約・キャンセル、申込者入力項目、ユーザー項目の設定をします。
  • 運行マスタ管理
    予約システムのメインデータの管理処理です。
  • 車両マスタ管理
    車両データの管理処理です。
  • メール文管理
    メールのテンプレート文編集処理です。

体験用のデータについて

準備するデータは、運行データ、時刻表、車両データです。それぞれサンプルとして次のデータを用意しました。以降の設定で利用します。

運行(路線)データ

停車駅 距離(Km) 乗車時間(分)
東京 10.3 14
新宿 21.1 21
国分寺 16.0 17
八王子    

距離、乗車時間は次の駅までの値(サンプルデータ)です。

時刻表下り

便番号 ／ 停車駅 東京 新宿 国分寺 八王子
1便 到着   7:14 7:36 7:54
出発 7:00 7:15 7:37  
3便 到着   7:44 8:06 8:24
出発 7:30 7:45 8:07  

時刻表上り

便番号 ／ 停車駅 八王子 国分寺 新宿 東京
2便 到着   17:17 17:39 17:54
出発 17:00 17:18 17:40  
4便 到着   17:47 18:09 18:24
出発 17:30 17:48 18:10  

車両データ

車両はバスを想定します。座席は次の図のように真ん中を通路として両側に２席、１１列のデータとします。

次のお勧め記事

次はサンプルデータを使って、予約システムの主要なデータの設定操作をします。本番環境で用意するデータは何が必要か、どのように設定するか試してください。

▶ ステップ２. 主データの登録

ステップ２. 運行データと車両データの登録

運行データは、予約システムの中心となるデータです。このデータには、予約する停車駅(または停留所など)の路線データを設定します。

そして車両データでは、予約管理する座席数や座席指定するための位置や座席番号のデータを設定します。

このあと時刻表と運行スケジュールを設定することで、管理画面において予約を実行することができるようになります。

運行データの登録

サンプルデータを使って、運行データを新規追加します。保存は右側の「下書き保存」か「公開」ボタンが押されるまで実行されません。また「下書き保存」されている場合は、予約処理の対象となりません。

上図は路線データを登録しているところです。停留所名とローマ字を入力して「追加する」ボタンを押すと、下のリストに追加されます。「クリア」ボタンは、上の入力項目をクリアします。

路線データのリストは、編集、削除の他、「⬆」ボタンを押して移動することができます。

サンプルの路線データをすべて追加、「公開」登録してください。

車両データの登録

車両データの登録画面では、HTMLのテーブルタグを利用して座席配置を簡易的に図示することができます。それでは実際に新規登録画面で動作を見てみましょう。

座席指定の設定方法は、縦横の席数を指定し、「再描画」ボタンを押して指定席の位置を決めます。

初期データは、左側１列１席、右側１列２席、前から３列までの席が表示されています。席番号は前から「１，２，…」の連番、横へ「Ａ，Ｂ，…」とアルファベットが振られます。

サンプルデータは左側１列２席、右側１列２席ですので、「縦列数：2」でそのままです。変更する場合は「変更する」ボタンを押します。

続けて横席数は「第１列：2」、「第２列：2」、「縦席数：11」を入力し「再描画」ボタンを押してください。図示の内容が書き換えられます。

描画はマトリクスしか表示されませんので、例えば１席のスペースが縦２席に渡る場合、その２席の一方を「使用不可」状態にして対応するようにします。

同様に、右図のように先頭の席が１つしかない場合も、席を「使用不可」状態にします。使用不可状態は、席番号にマウスカーソルを置いてクリックすればグレー表示され、使用不可になります。

なお図を利用した座席の設定は、指定席として選択する座席番号のためにあります。すべて自由席の場合、図を利用した座席番号の設定は必要ありません。が、自由席として利用する席を「使用不可」に設定して利用するのも良いでしょう。

最後に予約可能な席数について、自由席数、指定席数をセットしてください。「席数セット」ボタンは、使用不可の席を除く席数を、基本設定の「指定席数」にコピーします。今回は全席自由席扱いとしますので、「自由席数：43」、「指定席数：0」に設定し、「公開」ボタンを押して保存します。

時刻表の設定

時刻表はタイムスケジュールに合わせて、始発駅から出発時刻、各停車駅の到着時刻、ならびに次の駅へ出発する発車時刻を設定して作成、順次運行便を追加していきます。

本システムは方向に関して、路線データで設定した先頭駅から最後の駅の方向を「下り」、そして反対に最後の駅を始発とし、先頭駅を終着とする方向を「上り」と表現しています。

それでは「運行マスタ管理」メニューにある「時刻表管理」サブメニューを選択、一覧の名称にある「下り」メニューをマウスで選択し、時刻表データを設定しましょう。

便名を入力、運行する車両を選択、そして下段出発時刻、上段到着時刻を半角と「:(コロン)」を使ってそれぞれ時刻を入力し、「追加する」ボタンを押します。下部に入力した時刻表が表示されます。保存は「保存する」ボタンを押してください。「保存する」ボタンを押すまでデータは書き換えられません。

「上り」も同様「運行マスタ管理」メニューにある「時刻表管理」サブメニューを選択、一覧の名称にある「下り」メニューをマウスで選択し時刻表を入力、保存してください。

時刻表管理ボタンを押したときの運行データリスト表示は次のようになります。

閑話

「運行ID」は、運行データを新規追加した際データベースに記録されるシリアル番号です。データベース登録時に自動登録されますので、自由に変更することはできません。

フロントエンドで予約カレンダーを表示するとき指定したり、あるいは予約に関して重要な働きをする番号です。

次のお勧め記事

主データが設定できたので、次は予約を受け付けるためのデータ設定です。運行計画(スケジュール)と予約条件(予約受付)を設定して、予約データの登録を試します。

▶ ステップ３. スケジュールと予約

ステップ３. 運行計画の設定とチケット予約

運行に必要な主データの登録が終われば、残りは運行計画(スケジュール)を立てることです。運行計画は月カレンダー上で、運行便をチェックすればその運行便の予約を受け付けるようになります。

それでは運行計画の設定を見ていきましょう。

運行計画の設定操作

運行計画の設定は、「運行予定」と「予約受付」の２種類ありますが、「予約受付」の設定は後ほど説明します。

それでは「運行予定」の設定を見てみましょう。

新しいカレンダー月は、運行のチェックが全クリアの状態です。これは不要な予約を受け付けないようにするためで、予約を受け付ける運行便のみチェックするようにしてください。

設定操作は、下図赤丸の「下り・上り」チェックボックスの状態と「変更する」ボタンで、カレンダー内の運行便のチェックボックス状態が切り替わります。このとき操作はチェックされている曜日が切替の対象日となります。変更しない曜日はチェックを外してください。

ここでは、対象月は現在の操作年月、全日程対象(曜日全チェック)で、下図赤丸状態で「変更する」ボタンを押してください。

全便の運行がチェックされました。

土・日の運行を取りやめたい場合、操作対象とする土・日曜日のみチェック、他曜日はチェックを外し、さらに下り・上りのチェックを外して「変更する」ボタンを押します。

カレンダー内１日について、操作を見てみましょう。

背景がクリーム色の日は、操作している当日です。また昨日以前の過去日はグレー表示で操作不能となり、設定はできません。

下り(または上り)の黒丸は下り(または上り)の全便チェック、白丸は全便クリアします。指定便のみ運行を変更する場合は、チェックボックスを直接操作してください。

ここでは土日を除くすべての便を運行するように設定します。運行計画の登録は、画面下部の「保存する」ボタンが押されるまで実行されません。

保存後、月を翌月に切り替え、土日を除く全便チェックして同様に保存、２ヶ月間のスケジュールを用意しておきます。

管理画面でチケット(乗車券)の予約を実行する

ここまでの設定で、予約を登録できるようになりました。まだフロントエンドから予約することはできませんが、管理画面で予約を登録することができるようになりましたので早速見てみましょう。

管理画面では「チケット予約編集」から予約を登録することができます。なお管理画面での予約登録は受付期限をチェックしないなど、確認が緩くなっています。そのため運用中は、ダブルブッキングしないなど、注意してください。

それでは「チケット予約」を実行してみましょう。

管理画面の「チケット予約編集」を選択、「チケット予約 登録・編集」画面が表示されたところで左側の利用日を選択(クリック)すると、カレンダーがポップアップ表示されます。

背景色がクリーム色の日付けは、操作している日です。

カレンダーから運行しない土・日を除く日付けをクリック、路線、方面はそのまま「選択する」ボタンを押します。

次に表示される「利用便」、「乗車駅」、「下車駅」はセレクトボックスの中身を確認、選択はそのままにして「利用する」ボタンを押します。

最後に座席指定ですが、自由席しか用意してませんのでそのまま「決定する」ボタンを押します。

上図「追加チケット」欄は、予約する運行便で、まだ予約登録されていません。その下の「予約済チケット」欄は、予約登録されているもので、予約登録後の編集で表示されるようになります。

管理画面では必須入力項目を空白のまま登録できますが、ここでは姓に「山田」、名に「太郎」、Eメールに受信可能なメールアドレスを入力してください。そして「新規登録」ボタンを押してください。

予約リストを確認する

管理画面メニュー「予約リスト」を選択して予約リストを表示、確認します。

次のお勧め記事

管理画面からの予約が登録できるようになりました。次はフロントエンドのWebサイトで予約を実行するための設定、操作を見ていきます。

▶ カレンダーと予約受付

閑話

チケット？ 乗車券？ 言葉が統一できない事情。

この予約システムの開発に当たって、システムの利用対象をバスや船、あるいは鉄道(索道)など想定しました。では切符の呼び名はどうするか、乗車券、乗船券、搭乗券など乗り物の対象によりさまざまです。さらには座席指定券、一等席、一等室などもあります。

呼び名をどうするか悩んだ末、管理画面では「チケット」という単語を使うことにしました。

一方、製品名を「チケット予約システム」とすると、映画やコンサートなども含まれ、誤解を生じることになるのは火を見るより明らかです。「乗車券予約システム」としたのは、バスや鉄道以外の乗り物でも利用できる事を知らせたい、という気持ちがありました。

言葉についておかしな箇所はお許くだされば幸いです。

ステップ４. カレンダー表示と予約受付の設定

本システムにおいてフロントエンドから予約を受け付ける方法の１つとして、月表示の予約カレンダーを用意しています。このカレンダーは固定ページか、投稿のコンテンツに、ショートコードを設定することで簡単に表示できます。

では試してみましょう。

ショートコード month_calendar

最初にカレンダーを表示するための固定ページで、「予約カレンダー」を新規登録します。そしてコンテンツにキーワードと運行データのIDを指定します。運行データのIDは、「運行計画」の表示リストの先頭カラムに表示される数字です。例えば「ID=5」であれば、次のようにショートコードとIDを指定します。

[month_calendar tid="5"]

公開登録して、当該ページを表示してください。期待通り、のカレンダー表示にはならなかったと思います。これは、予約を受け付けるための準備ができていないためです。次節で予約を受け付けるよう設定を進めます。

予約フォーム

予約フォーム表示のための固定ページで、スラッグ名を「booking-ticket」と名付けたページを新規に公開登録してください。スラッグ名の設定は、ページ登録後の固定ページ一覧表示から「クィック編集」を利用して設定します。

このページは予約処理を進める予約フォーム、および予約の実行に利用します。

予約受付の設定

予約受付は、運行データごと受付期間が設定できるようなっています。設定画面は、「運行計画」のリストから所定の運行データを選択、「予約受付」から進みます。

設定は、「受付中」をチェックし、「受付開始」を「30」日前から「受付終了」を利用当日の「1」日前までとして設定します。

予約メールを設定すると予約受付時にメールを自動送信するようになります。が、まだメールテンプレートを設定していませんので、ここではそのまま「保存する」ボタンを押して登録してください。

予約カレンダー

フロントエンドのホーム画面から、ショートコードを設定した固定ページを再度表示してください。

カレンダーの表示は、登録した運行データと運行計画に合わせた予約情報が、予約申込のチェックボックスとともに表示されます。

運行便の予約情報は図のように、下り便と上り便が上下に分割されて表示されます。便名の後ろの括弧内の数字は、空席数を表します。

前節で予約処理を進めるため、予約フォーム処理のための固定ページを準備しました。このままフロントエンドの予約カレンダーを利用し、予約操作を続けてみましょう。なお予約実行時の予約メールについて、まだ何も設定していませんので送信はされません。

予約操作と予約フォームの表示

予約操作は次の手順で進めます。

  1. 利用日の運行便のチェックボックスをチェックします
  2. 選択された運行便の乗下車駅、座席を選択します
  3. 申込者の連絡先を入力します
  4. 予約データを確認し予約を実行します

それではカレンダーの下り、上り各１便をチェックし、「送信する」ボタンを押してください。

予約処理に入ると、選択した運行便がリスト表示されます。乗下車駅、座席を指定して「送信する」ボタンを押し、進みます。

申込者の連絡先入力フォームになります。ログインユーザーが予約フォームを表示すると、ユーザー登録項目が入力項目にコピーされて表示されます。

入力項目は各種設定において選択できます。選択項目は複数用意しておりますが、スマートフォンの利用を考えた場合、入力項目が多いと入力操作が煩雑になり、予約を中断する事が多くなるようですのでよく検討してください。

「(*)」は必須入力を表します。入力したところで「確認する」ボタンを押します。

プライバシーポリシー、利用規約は別途ページを用意し、設定画面でリンク先を設定すると、同意チェックの下にリンク先が表示されるようになります。

プライバシーポリシー、利用規約の同意して「予約する」ボタンを押すと予約が実行されます。

予約ID

本システムが割り当てる予約IDですが、次のような構造で自動的に割り振ります。

prefix + yymmdd + id + suffix

prefixとsuffixは予め用意された文字列で、prefixは「A」、suffix「空」文字です。yymmddは予約を実行した日付、idはデータベースに登録した予約データのユニークidです。

図示の「予約情報」ですが、ログインユーザーに限り管理画面上でこれまでの全予約を、リスト表示することができます。

次のお勧め記事

Webサイトで、フロントエンドでの予約操作の進め方、予約フォームについて見てきました。

実際の運用では、予約を受け付けたことを知らせるための予約メールの送信が必要になります。そのための「メールテンプレート」の設定、登録について見ることにします。

また登録ユーザーであれば予約履歴から「キャンセル」が実行できます。キャンセル機能を次章で解説します。

▶ メールとキャンセル