プログラミング 2020年9月14日 Dr. Martin

WordPress予約システムのプラグインAmeliaのカスタマイズ

当院でのネット予約の現状
WordPressの予約システムプラグイン ― Amelia
Amelia予約システムの見栄えをいじる
Amelia予約システムの動作をいじる

当院でのネット予約の現状

当院では、通常の診療に対する時間予約というのはやってません（つまり随時受付けです）。理由は色々ありますが、30年以上の歴史があるクリニックの受付け形態を急に変えるというのは、長らく通院されている患者さんを思えば、なるべく避けたいものです。また、「行けばいつでも受け付けてくれる」というのは、私自身も気に入ってる部分ですね。

一方で、新しく始めた新型コロナに対するPCR検査や抗原検査に関しては、当院にかかりつけでない患者さんも多く来院されますし、年齢も1桁代から80歳代まで実に幅広い年齢層です。

スマホ世代の方々は、近くの病院やクリニックを探すのもスマホが主でしょうし、また、ネットでの予約システムがあれば、それもスマホから済ませてしまうでしょう。そういう方々には、ネットでの予約システムを提供するのが良いと思います。

また、クリニック側からすると、ネット予約時の入力を利用して、患者さんの住所や氏名、連絡先に加え、保険証の情報もあらかじめ分かっていれば、受付けがスムーズですし、当院での滞在時間の短縮になり、これは患者さんにとっても良いことだと思います。

こういう背景があり、当院では、平日のお昼休みの時間帯や週末にネット予約システムを取り入れてまして、新型コロナに対するPCR検査や抗原検査の予約に活用しています。また、それらの検査は、通常の診療時間内でも随時受け付けており、いわばハイブリッドな感じになっています。

上記のようなことは、発熱外来として受付け窓口を別に設けるなど、動線を分けているから出来ることで、たまたまですが、当院の構造上（屋根付き駐車場が隣接している）、そういう「ゾーニング」がやりやすかったというのは大きなポイントですね。

WordPressの予約システムプラグイン ― Amelia

ネットを検索すると、実に様々なネット予約のための機能提供サービスがあります。無料版から有料版まであり、無料のものはいくつか試させていただきましたが、細かいカスタマイズが出来なかったり、有料版は、そもそも金額が…となりますし、また、有料版だからといって、こちらの要望通りのインターフェイスを提供してくれるとは限りません。

そんな訳で、いろいろ検討した結果、当院での予約システムには、AmeliaというWordPressのプラグインを採用しました（YouTubeにある紹介動画はこちら）。採用にあたりこのサイトの記事が大変役に立ちました。また、Ameliaのカスタマイズに関する記事も豊富にあり、上記サイトがなければ採用は見送っていたかもしれません。

このAmeliaというプラグイン、日本語に対応していますし、無料版でもそれなりに高機能なのですが、私は、予約時に電子カルテへの登録に必要な情報もあらかじめ得たいと思っており、その辺りのカスタマイズが可能な有料版を購入しました。まずは、使いこなせるかどうかというのもあり、年間59ドル（日本円で6,300円程度）のを購入しました。上述した、種々あるネット予約のための機能提供サービスでは、有料版だと月額が5,000円程度のものもありますし、結果的には、かなりコスパは良いのではと思っています。そのうち、189ドルで購入できる永年版にするかもしれません。

Amelia予約システムの見栄えをいじる

さて、このAmeliaですが、デフォルトのカレンダー画面など結構文字のサイズ（多くは数字ですが）が小さいんですよね。英語圏でのフォントだと気にならないのかもしれませんが、兎に角、デザイン優先のせいか文字が小さい（英語のレビューでも文字が小さいという書き込みを見た気がします）。

でもCSS（スタイルシート）にある程度精通していると、気になる箇所はほぼすべて自分好みに変えることが出来ます。WordPressの機能である「追加CSS」に記載する方法もありますが、私は、直接Ameliaの見栄えを制御しているCSSをいじっています。そのCSSがどこにあるかですが、どうやら以下の場所にあるようです（WordPressは先月から使い始めたばかりなので、正確な情報かどうかは分かりませんが）。

/wp-content/uploads/amelia/css/amelia-booking.(ランダムな英数字).css

上記のCSSファイルを、FFFTPなどのFTPソフトでダウンロードして、テキストエディタ（私はサクラエディタを愛用しています）で編集して、再度アップロードという感じです。当該CSSの最後の方に、例えば以下のように追記しています。

.am-confirmation-booking-details div:first-child {
  display: none !important; /* 当院では、従業員や担当者は明示する必要はないので非表示に */
}
span.el-radio-button__inner { /* 日付をクリックすると表示される時間帯を見やすく */
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 0 !important;
}
#am-continue-button span { /* 「続行」ボタンの文字を大きく */
  font-size: 1.4rem;
}
.am-success-payment h4 { /* 予約完了時の「おめでとうございます」は不要 */
  display: none !important;
}
#am-add-to-calendar .am-svg-wrapper svg {
	display: none !important; /* 画像もあえてなくてよいですね */
}

該当するHTML要素のクラス名をどうやって取得するか？については、私はもっぱらGoogleのChromeブラウザを使用していますが、それに付属する「ディベロッパーツール」を活用しています（Ctrl+Shift+Iでも起動します）。このツールを使って、知りたい要素のHTMLタグがどうなっているのかや適用されたCSS、はたまたその要素に紐づいたJavaScriptイベントを確認したりしてます。

Amelia予約システムの動作をいじる

さて、Amelia無料版は、予約時の入力フォームでは、名前、Email、及び電話番号の3種類しか使えませんが、Amelia有料版では、種々のカスタムフィールドを追加することが可能です（紹介させていただいたこちらのサイトの記事も参考に）。

例えば、電子カルテへの入力に必須なものとして、患者さんの住所がありますが、これも予約時に入力していただくようにしています（正直、予約時には入力が面倒かもしれませんが、当院での滞在時間短縮と思ってご理解いただきたく…）。

で、少しでも入力の手間を省けるように、「郵便番号を入力したら、住所まで自動で入力される」というのを実装しました。よく見かけるインターフェイスかと思います。プログラム的には、Ajaxを使ってごにょごにょすれば良いわけですが、このコンテクストでは、車輪の再発明は不要でしょうから、ここの記事を参考に配布スクリプトを拝借して実装してみました。素晴らしいスクリプトを配布していただき、作者の方には感謝します。

実際にどんな感じかは、PCR検査や抗原検査の予約ページで試していただければ分かりますが（お試しなら、アクティブな日付をクリックして、適当な時間帯をクリック、下の「続行」ボタンを押すと、詳細な入力画面が出てきます。そこで郵便番号のところだけ入れてみると良いです）、そのスクリプト記述は、以下の感じです。

<div>
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<script>
jQuery(function($){
 $(window).keyup(function(e){ /* 別にこのonkeyupイベントである必要はないでしょうが */
  if($('.am-custom-fields .el-input__inner').length){
   const added = $('.am-custom-fields .el-input__inner');
   if(typeof added.eq(0).attr('id') == 'undefined'){
    added.eq(0).attr('id', 'postcode');
    added.eq(1).attr('name', 'addr11');
    added.eq(0).attr('maxlength', 8);
    added.eq(4).attr('maxlength', 8);
   }
  }
  $('#postcode').keyup(function(e){
   AjaxZip3.zip2addr(this,'','addr11','addr11');
  });
 });
});
</script>
</div>

正直、jQueryは使いこなしていないので、もっとシンプルに記載できるのかもしれませんが、とりあえず動作はするようですので良しとしましょう。WordPressの固定ページで、jQueryを作動させるやり方は、このサイトの記事を参考にしました（多謝）。

と、このような感じでいじりがいのあるWordPressのプラグインAmeliaの紹介？でした（有料版）。「オンライン診療」の予約もこれで出来そうな感じですね。

■了