エブリサイトで趣味を仕事にする方法　2座目 - アールスリーインスティテュート

公開日：2025-12-01

皆さんこんにちは、築山です。

前回の担当記事で最近登山にハマっていると、まるで健康に生きているかと誤認させるようなことを書いてしまったのですが、、、本日健康診断に行ってきたところ、昨年対肥 109% の成長をしていることが観測されました。

これはいち早く山小屋の予約システムを完成させて、ドンドン山登りをする必要があると再確認しました。ということで、前回の続きを作っていきたいと思います。

前回振り返り

エブリサイトで山小屋の予約システムを作り始めたのですが、残念ながら「カレンダー」を表示するためのウィジェットがありません。そこで、リッチテキストを駆使して頑張ってカレンダーを表示してみました。

ただ、前回の設定では以下の問題が残っていました。

毎月1日が自動的に日曜日になってしまう
「次の月」や「前の月」のカレンダーを表示されず、その月のカレンダーしか見えない

そのため、今回はこれらの問題を解決するとともに、予約フォームと連携するところまで気合を入れて一気に作っていこうと思います。

できました！！！

突然ですが、だいたい完成しました。

説明を読んでいただく前に、今時点でできたものを見ていただこうと思います。

見ていただいてお分かりの通り前回の課題は解決して、

毎月の開始日を適切に設定
「前の月」「次の月」をクリックすると翌月のカレンダーを表示
kintone 側にカレンダーが用意されていなかったらエラー表示
カレンダー内をクリックすると、予約ページに遷移（めんどくさいので、まだ第１月曜日しか遷移する設定はしていません）
予約ページでは「日付」が自動的に入力される

をまとめて実装しました。

では、猛烈に悩んだ設定を以下にご紹介します。

毎月の開始日を正しく表示

まずは毎月の開始日を適切に表示するための設定です。改めて前回の設定を見直してみるとこのような設定でした。

1番のアクションで毎月1日以降の日付を取得して、それを2番のアクションでリッチテキストに日曜日から順にセットしていました。このやり方だとどうしても毎月1日が日曜日になってしまいます。

そこで、知恵を絞って見直した結果が以下のものです。

これは何をやっているかというと、3番のアクションで「日付 <= THIS_MONTH(1) and 曜日 = “日” order by 日付 desc」というクエリでレコードを取得しています。これを日本語でざっくり表現すると「当月1日以前で一番近い日曜日」を指定しています。これによって、当月の1日が日曜日の場合には「当月1日」が取得され、もし当月1日が日曜日ではない場合には一番近い日曜日が結果として取得されます。

具体例で言いますと、2025年6月であれば、1日が日曜日なので3番のアクションの結果には「2025-06-01」が入ります。

また、2025年10月であれば 1日が日曜日ではないので、3番のアクションには直近の日曜日である「2025-09-28」が入ります。

3番のアクションで「その月のカレンダーの最初の日曜日」が取得できましたので、あとは4番のアクションで「日付 >= “${$3[0].日付}” order by 日付 asc」というクエリでレコードを取得することにより「その月のカレンダーで最初の日曜日から42日分のカレンダーを取得する」という動作となります。

あとは、5番のアクションでリッチテキストに「kintone から取得した日付」「kintone から取得した日付の予約可否」をセットしています。これで、最初に表示される当月のカレンダーはできました。

前後の月のカレンダー表示

続いて「前の月」「次の月」ボタンが押されたときの挙動を設定していきます。一見すると「当月のカレンダーを表示」することと同じ処理をすれば良いように思えるのですが、「前の月とはいつのことか？」を判断する仕組みが必要となります。そこで、「ハッシュ」を使用します。

「ハッシュ」とは URL の末尾につく文字列のことで、「https://ww.r3it.com#hogehoge」であれば、最後についている「#hogehoge」が「ハッシュ」になります。一般的には同じページ内で指定した位置にスクロールする目的などで使われるものですが、エブリサイトではこの「ハッシュ」を使うことによって、「前のページの結果を次のページに渡す」などが可能となります。

今回は、「前の月」や「次の月」がクリックされたときに「現在表示されている1ヶ月前（後）の1日」をハッシュとして渡すことにします。具体的には、以下のように設定を行います。

まず、「前の月」をクリックした際に遷移するリンクには以下のように設定を行います。

現在表示しているページの URL が「https://tsukiyamine.everysite.net/calendar.html」だとします。このとき、「前の月」というリンクをクリックすると「https://tsukiyamine.everysite.net/calendar.html#2025-10-01」というように末尾に前の月の日付を付与した URL を開くような設定です。最後に付与されている「2025-10-01」は1番のアクション「日時を計算する」の結果によって取得されたものです。

続いて、ページ内処理で以下のような設定を行います。

6番の「URL からハッシュを取得する」というやることにより「https://tsukiyamine.everysite.net/calendar.html#2025-10-01」のページが開かれた時（「前の月」がクリックされた時）に、6番のアクション結果には「2025-10-01」が入ります。これで「前の月の１日」が取得できましたので、あとは概ね当月のカレンダー表示と同じようにレコード取得、リッチテキストへのセットを行います。

ここまでの設定によって、「当月のカレンダー表示」「前（次）の月のカレンダー表示」が実現できました。

もうひと頑張り

さて、だいぶカレンダーっぽくなってきたのをお分かりいただけたのではないでしょうか。本来であれば「予約ページへの遷移」などまで解説したかったのですが、あまりに文章量が多くなってしまったので、今回はここまでとしたいと思います。

では、また次回お会いしましょう！

投稿者プロフィール

築山　春木: gusuku シリーズのエンドユーザー様への提案・パートナー様への支援をメインに活動しています