Shifter Webhookを利用してWebサイト構築を効率化した話
はじめに
弊社ライフイズテックでは、春、夏、冬休みに主に大学のキャンパスを利用して中学生・高校生向けのIT・プログラミングキャンプを実施しています。キャンプの申し込みを開始する際、お客様に参加を検討していただくため、日程や会場、コースなどを掲載したWebページを公開しています。
今回はそのWebページを開発する中で、どのような課題があり、どうやって解決してきたかをご紹介します。
課題と解決策
頻繁な情報更新
キャンプの申し込みは、直前まで日程、会場、価格など必要な情報が決まらなかったり、複数の会場を数回に時期を分けてオープンしたりするため、頻繁にWebページの情報更新が必要になります。HTMLファイルのタグをそのたびに編集して確認すると時間がかかってしまいます。
そこで、WordPressのSaaSとして提供されているShifterを利用することにしました。 作成するWebページに合わせてWordPressのテーマを開発することで、HTMLに詳しくない人でも、管理画面のフォームに必要な情報を追加、編集するだけで反映できるようになります。WordPressはよくソフトウェアやプラグインの更新が求められますが、ShifterはSaaSなのでそのような運用も必要ありません。
申し込みデータとの連携
もう1つの要望として、お客様の実際の申し込み数のデータと連携して、それぞれのキャンプの日程で定員に近づいていることや、満員になって申し込みが終了したことを自動的に表示したいという要望もありました。申し込み数が定員に近づいた、あるいは、満員になったときにタイムリーにHTMLファイルのタグを編集してバッジを表示したり、申し込みボタンを押せないようにするのは手動だと難しいところがあります。
申込終了バッジの表示
そのため、申し込みデータが入っている基幹システムのAPIから情報を取得するプログラムをWebページに追加することで、定員に対してどれくらい申し込みが入っているかに応じて自動的に、バッジを出す・出さない、ボタンが押せる・押せないといった表示を切り替えられるようにしました。
構成
WordPressはPHPで動いていますが、ShifterにはWordPressで作ったWebページを静的ファイル（HTML、CSS、JavaScript）に出力する機能があります。上記の課題を解決するには、「Shifterで出力した静的ファイル」と「基幹システムのAPIから情報を取得するプログラム」を組み合わせてまとめてサーバーに配置する必要があります。そこで、ShifterとGitHubをつなぐ「連携プログラム」を開発し、以下のようなリリースの仕組みを作りました。
リリースフロー
- 「基幹システムのAPIから情報を取得するプログラム」をGitHubリポジトリにpushしておく。
- ShifterでWordPressのWebページを静的ファイルに出力する。
- Shifterから「連携プログラム」にWebhookが送られる。
- 「連携プログラム」でWebhookを受け取ると、GitHubリポジトリで新しいブランチを作ってから静的ファイルを更新し、「基幹システムのAPIから情報を取得するプログラム」と組み合わせる
- GitHubのリポジトリでブランチがマージされると、まとめて自動的にサーバーにリリースされる
まとめ
キャンプのWebページは、申し込みを始める前に頻繁に更新する必要があるため、WordPressのSaaSであるShifterを採用しました。また、ShifterのWebhookを受け取る連携プログラムを開発し、Shifterで主力された静的ファイルと、基幹システムのAPIから情報を取得するプログラムをGitHubのリポジトリでマージしています。これにより情報更新をスピーディーに行い、かつ、基幹システムの申し込み情報と自動連携するWebサイトを実現できました。
ちょうど昨日、クリスマスキャンプの申し込みがオープンしました！今年のクリスマスキャンプは一つの会場に300人が集まって開発をしたり出し物をしたりで盛り上がること間違いなしです。ご興味があればぜひご覧ください。
Discussion