シェアオフィス6F
貸会議室6F

こんにちは。スタッフのゆーすけです。

今日は7Fサイトに独自のイベントカレンダーを実装したお話しをしようと思います。

従前、7Fでは予約やイベントなどの情報をGoogleカレンダーで公開していました。
しかしイベント開催やスペース予約が増えていくにつれ、公開される内容や予約の管理方法など我々のニーズを満たさなくなってしまい、Googleカレンダーに代わるツールを探すことになりました。
ただ、色々と探してみたものの我々のケースに合致するツールは見つからず、そこで検索コストをかけるよりも自分で作った方が早くない?と思い、独自のイベントカレンダーを実装することとなりました。

現在の7Fサイトのカレンダーはこちら

ということで、独自カレンダーでやりたかったことをポイントに、実装した内容を説明していきます。

1. 情報の公開・非公開を制御したい

予約情報にはお客様の個人情報や、スタッフ間で共有したい事柄など、非公開としたい内容が含まれています。
しかし、Googleカレンダーでは非公開にしたい情報を取り扱えないので、その部分は別ツールを使う必要がありました。
これが、情報の多重管理になって負担になっていたのと、ダブルブッキングなどが発生したりと、問題になっていました。

そこで、7FサイトがWordPressで構築されていることもあり、予約1件1件を記事として扱うことにしました。
そうすることで、情報を一元管理することができ、予約の登録・変更・確認をスムーズに行えるようになりました。

具体的に実装に使った機能などは以下の4つです。
・カスタム投稿タイプ
 → 通常の投稿と予約情報を混在させてしまうと管理が煩雑になるため、予約用の記事を独立して管理しています。

・カスタムタクソノミー
 → 7Fには会議室やミーティングスペースなどといった、予約できるスペースが複数あるので、それらをタクソノミーとして登録しカレンダーに表示させることで、どのスペースが予約されているかが一目で分かるようにしています。

・カスタムフィールド
 → 予約日や時間などを1項目として独立させることで、記事の抽出やソートの条件として利用しています。
  また、細かく項目分けすることで、どの情報を公開にするか非公開にするか管理できます。
  他にも、人によって入力内容がぶれてしまう問題も、項目立てしておくことで回避できます。

・「get_calendar()」関数
 → WordPressの記事をカレンダー上に表示させるための関数です。
  そのままでは取得する記事や出力する内容を制御できないので、コアファイルからPHPソースコードをコピペしてカスタマイズしています。
  取得する記事の条件としてカスタム投稿タイプと予約日を指定するようにしました。
  また、出力内容を記事タイトルから、カスタムタクソノミー + 記事タイトル + カスタムフィールド に変更しました。

2. カレンダー上からのリンクを制御したい

イベントによっては、個別にイベントページを持っていることもありますよね。Facebookページや個人ブログなどなど。
Googleカレンダーでは「説明」にそのリンクを記載していたのですが、これがリンク表示されないんです。
だから、コピペして別タブで開くなんて手間がかかるし、そもそもマウスオーバーしないと表示されない情報なので気付く人が少ないという現実があります。

そこで、カレンダー上でリンク表示にし1クリックで開くようにしました!
リンク先URLはカスタムフィールドで実装しています。

今回、予約情報がWordPressの投稿記事になったことで1つ弊害が発生しました。
我々スタッフが予約情報を変更・確認する際に該当予約を探すときの手間が増えたのです。
Googleカレンダーであれば、カレンダー上で簡単に探せるので問題なかったのですが…

そこで、今回のカレンダーにも同機能を実装することにしました!
ログインした状態でカレンダーを表示すると、予約のリンク先がWordPressの記事編集画面になるようにしました。

おまけ. カレンダーのレイアウトを自由に設定したい

Googleカレンダーだとレイアウトの自由がきかないですよね。
タイトルが長いと全て表示されないですし。予約件数が多いと全件表示されないですし。

けど、「get_calendar()」関数のカスタマイズなら自由にクラス名もつけられるので、
具体的には先に述べた、「get_calendar()」関数のカスタマイズで、HTMLタグにクラス名をつけてスタイルを適用しています。

このネタをWordCampTokyo2014で話しました。
その時に使ったスライドを公開します。

WordPressに初めて触れてからもうすぐ2年。
WordPress、PHP、Javascriptなどなど、開発してきた内容の記憶も少しずつ薄れてきてます…
そんなわけで、今後は備忘録的に小ネタ・Tipsを公開していきます!

スポンサーリンク

スポンサーリンク

この記事を書いた人

7Fを運営している株式会社コミュニティコムでプログラマーをしています。担当はWeb制作ですが、受付にもフワッと座ってます。呼称は「ゆーすけ」なので気軽に呼んでください。7F受付にあるチェックインシステムを作った人だったりします。好きなものはお酒です。でも痛風なのでビールは与えないでください!だんだん年齢に抗えなくなってきたので、イイ感じにできる運動があれば紹介してください。



メールマガジン登録

週1回程度でメールマガジンにて、コワーキングスペース7Fのイベントや勉強会情報や近況、Web関係や地域情報などを配信しています。
もし良ければ以下のフォームにメールアドレスを入力して登録してくださいね!

7F情報をぜひフォローください!


スポンサーリンク

月額会員募集中の申し込みフォーム
イベント情報
会議室ご予約
オープンスペースご予約
無料見学ご予約
お問い合わせ
メールマガジン登録フォーム
フロアマップ
よくある質問
Amazonコワーキングスペース7Fのほしい物リスト
一時託児施設利用
7F大学
リブライズ
Eightどこでもスキャン計画
7Fスタッフ募集のお知らせ
シェアオフィス6F
貸会議室6F

混雑状況やイベント情報

サイト内検索