エブリサイトで趣味を仕事にする方法

公開日:

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

冒頭からいきなり個人的な話なのですが、2年ほど前に始めた登山にめちゃくちゃハマってます。どれぐらいハマっているかというと、週末の時間を本業のアイドルオタクに費やすか登山に費やすか悩むぐらいにハマってます。

ただ、困ったことにアルプスなどの高山に登れるのは7月〜9月のたった3ヶ月だけなんですよね。短すぎます。
「あの山も行きたい、この山も行きたい」って気持ちは山ほどあるのに、気づけばシーズン終了…。登れる山の数がどうしても限られてしまいます。

さらに登山準備の中で地味に面倒なのが山小屋の予約。
オンラインで予約ができるところもあるんですが、まだまだ「電話予約オンリー」な小屋も多いんですよ。で、電話がつながらない、やっとつながったと思ったら「満室です」の一言。これが本当に大変です。

そこでふと思いました。
「エブリサイトで予約システム作ればよくない?」

予約システムを作って実際に山小屋に「こんなのどうですか?」って提案しに行けば良いのでは?エブリサイトで山小屋の予約システムができれば、当然予約の手間は格段に減るし、なにより “仕事として山に登れる” という最高の口実が完成します。

これが実現すれば、土日だけじゃなく平日も堂々と登山に行ける。つまり、シーズン中に登れる山の数が一気に増えるわけです。
…いや、これ最強じゃないですか?

山小屋予約サイトに必要な要素

、、、というわけで、来年の夏に仕事で登山するために山小屋の予約サイトを作っていきます。
早速、山小屋の予約サイトに必要なものを考えてみましょう。

ざっと想像できる範囲でいうと、

  1. 予約可能日の一覧
  2. 予約の空き状況
  3. 予約フォーム
  4. 予約状況が見られるためのマイページ

こんなところでしょうか。

登山をしない方でもだいたい想像していただけるかと思いますが、その日の空き状況が表示されていて、その日付を選択すると予約ページに遷移する感じです。そして、だいたい登山は数ヶ月~数週間前に計画を立てるので、その月だけではなく前月・次月などの予約もできる必要があります。

では、これをエブリサイトで実現すると、、、

「シンプルテーブル」のウィジェットを使ってこんな感じで要件を満たすことはできます。

ただこれ、ホントはカレンダーで表示したいんですよね。理想形をPower Point で雑にお絵かきしてみるとこんなイメージです。

山荘・サイトによって多少の違いはありますが、Web での予約システムを採用している山小屋のサイトはだいたいこのようなカレンダー形式になっています。

冒頭お伝えしたように、「予約システムを作ること」が目的ではなく、「仕事として山に登ること」が目的です。仕事として山に登るからには、1回の登頂でクロージングまでする必要があります。そのため、他のソリューションで解決できることはしっかり解決できる提案を持っていきたいと思います。

無いなら作ればいいじゃないか

エブリサイトの良さの1つとして「自由度の高さ」があると思います。タイルを自由に配置して思い通りのレイアウトを作ることができます。で、あれば「カレンダーもできるんじゃね?」ということで試行錯誤してみました。


まず、使うウィジェットは「シンプル縦フォーム」を使います。「シンプルパネル」でもいいかな、って思ったのですがあかねプロが言うには「シンプル縦フォーム」にしておく方がレイアウトの調整がしやすいらしいです(なぜだかわからないので、そのうちあかねプロに解説するブログを書いてもらいます)。そして、アイテムとして「リッチテキスト」を配置しておきます。

あとは、「ページ内処理」でページを開いたとき「表示アイテムの内容をリッチテキストでセットする」を使用して、 kintone に登録されているカレンダー情報を取得してきて、このリッチテキスト内に日付や予約状況を表示したら良さそうです。kintone にはこのようにデータを登録しておきます(予約状況は当然 Web から変更からできるようにして空き状況も自動計算させますが、まずは手動で値を入れてあります)。

kintone のデータを連携する前に、とりあえずはカレンダーがどんな感じに表示されるかテストしてみます。リッチテキストの設定はこんな感じ。

この状態でテストページを生成してみます。

カレンダー感があって、なんだかいい感じですね!では、このリッチテキスト内に kintone 内のデータを表示するための設定をしてきます。接続設定などの細かい部分は割愛して、以下のようにページ内処理でレコードの取得とリッチテキストへのセットを行います。

「ページ内処理」の設定例はこんな感じです。

では、これでページを生成してみます。

どうですか?カレンダーっぽくなりましたよね。
そして、各日付の下に予約状況も表示されるようになりました。あとはここに予約ページに飛ぶためのリンクをつけたらそれっぽくなりそうです。

実はまだちゃんとしたカレンダーではない

さて、一見カレンダーっぽいものができたのですがまだまだ足りないことがあります。

まず、今の設定のままだと毎月1日が自動的に日曜日になってしまいます。1番のアクションで毎月1日以降の日付を取得するのですが、これをそのまま 2 番のアクションでセットしているためです。これには工夫が必要です。

また、「次の月」や「前の月」のカレンダーを表示するための工夫もする必要があります。

これらを解決する必要がありますが、とても長くなってしまうので今回はここまでとさせていただきます。

次回、上記で挙げた課題を解決してきます。

投稿者プロフィール

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