Yoshihiro 今回は２つ目の案件を「お蕎麦屋さんテンプレート」通じて学んだことを投稿します。
４ページ構成のWordPressサイトですがコーディングを２ページを担当しましたが、その中で２つの機能をご紹介します。
カレンダー機能の実装
定休日をお客さんで入力したいとの要望に対して、わたしが提案したのはGoogleカレンダーです。
プラグインの導入も検討しましたが、管理画面を開いてイベントを入力してという手間が面倒であると考えて、スマフォでスケジュール入力できるGoogleカレンダーを提案し採用されました。
ただしGoogleカレンダーそのままを利用するとデザインに近づけられないのでFullCalendarを採用しました。
FullCalendarのカスタマイズ
実装したいことのまとめ
- Googleカレンダーの予定に何か入力されていたら定休日とみなして、フロント側の背景色を変えたい
- カレンダーの表示期間を設定（先月と当月と次月のみを表示させたい）
- デザインをオリジナルデザインに極力近づけたい
こちらの記事を参考にさせてもらい何とか実装できました。
フロントの表示はこんな感じです
Googleカレンダーにスケジュールを入力するとフロント側にも反映されます。
右上の三角矢印で表示月を切り替えますが、表示期間を制限しているので下の例だと２月には切り替えられないようにしています。
カレンダーの表示期間を設定
現在の日付から先月と翌月を取得し、その後にFullCalendarの仕様に合わせて文字変換し、start:startDateとend:endDateをセットします。
/* カレンダーの表示範囲を設定 */
// today.getFullYear() 地方時に基づき、指定された日時の「年」 (4桁の年であれば4桁) を返します
// today.getMonth() + 2 地方時に基づき、指定された日付の「月」を表す 0 を基点とした値 (すなわち 0 が年の最初の月を示す) を返します
// todayが2021.01.31なら戻り値は Sun Feb 28 2021 00:00:00 GMT+0900 (日本標準時)
const prevMonth_lastDate = new Date(today.getFullYear(), (today.getMonth()), 0);
const nextMonth_lastDate = new Date(today.getFullYear(), (today.getMonth() + 2), 0);
/* lenに0で連結して列の最後の-lenまでを取り出す */
// 例えば １２月なら12→012→12 1月なら1→01→01
function zeroPadding(num, len) {
return (Array(len).join('0') + num).slice(-len);
}
/* 連結`year(4桁)-month-01` */
startDate =
`${prevMonth_lastDate.getFullYear()}-${zeroPadding(prevMonth_lastDate.getMonth() + 1 , 2)}-01`;
endDate =
`${nextMonth_lastDate.getFullYear()}-${zeroPadding(nextMonth_lastDate.getMonth() + 2, 2)}-01`;
var calendar = new FullCalendar.Calendar(calendarEl, {
/* カレンダーの表示範囲を当月の前後だけに制限する */
validRange: function () {
return {
start: startDate,
end: endDate
};
},あとは、タイトルやボタンを設定すれば実装完了です。
お品書き用カスタムフィールドの実装
お蕎麦屋なのでお品書きが必要ですが、お客さんが編集できるようにすることが必須なので、WordPress化を考慮したコーディングにする必要があります。
WordPress化は以下の方法を想定してコーディングをしました。
- ４項目（メニュー、価格、写真、説明）と決まっていたので、カスタムフィールドで入力項目を準備。
- メニュー毎に投稿して、先ほど準備したカスタムフィールドを入力。
こんな感じですね↓
- フロント側でには、投稿一覧の順番にループを回す。
フロント側の表示順番をIDで管理しようとも思いましたが、お客さんにそれをやってもらうのは難しいと考えて、今回はプラグインを使用しました。
ドラック＆ドロップでメニューの順番を変えられるプラグイン Intuitive Custom Post Order です。
プラグインのおかげて、お客さんの負担を軽減することができたかとは思います。
以上の想定を元にコーディングをして、WordPress化担当に引き継げたので、まあまあスムースに進められたかなーとは思いました。
まとめ
今回はコーディング担当でしたが、後工程のWordPress化を考慮したコーディングができたかと思います。
全部の工程を知ることがベストですが、少なくとも前後工程を知ることにより、品質の良いものができることは、エンジニアリングで体験済みでした。
今後も後工程はもちろん考慮しますが、全体として最適化された仕事をしたいですね！！