Web制作・Webサービス2014.12.11こんにちは。スタッフのゆーすけです。今日は7Fサイトに独自のイベントカレンダーを実装したお話しをしようと思います。従前、7Fでは予約やイベントなどの情報をGoogleカレンダーで公開していました。イベント開催やスペース予約が増えていくにつれ、公開される内容や予約の管理方法など我々のニーズを満たさなくなってしまい、Googleカレンダーに代わるツールを探すことになりました。探してみたものの我々のケースに合致するツールは見つからず、そこで検索コストをかけるよりも自分で作った方が早くない?と思い、独自のイベントカレンダーを実装することとなりました。現在の7Fサイトのカレンダーはこちらということで、独自カレンダーでやりたかったことをポイントに、実装した内容を説明していきます。情報の公開・非公開を制御したい予約情報にはお客様の個人情報や、スタッフ間で共有したい事柄など、非公開としたい内容が含まれています。Googleカレンダーでは非公開にしたい情報を取り扱えないので、その部分は別ツールを使う必要がありました。これが、情報の多重管理になって負担になっていたのと、ダブルブッキングなどが発生したりと、問題になっていました。そこで、7FサイトがWordPressで構築されていることもあり、予約1件1件を記事として扱うことにしました。することで、情報を一元管理することができ、予約の登録・変更・確認をスムーズに行えるようになりました。具体的に実装に使った機能などは以下の4つです。通常の投稿と予約情報を混在させてしまうと管理が煩雑になるため、予約用の記事を独立して管理しています。7Fには会議室やミーティングスペースなどといった、予約できるスペースが複数あるので、それらをタクソノミーとして登録しカレンダーに表示させることで、どのスペースが予約されているかが一目で分かるようにしています。予約日や時間などを1項目として独立させることで、記事の抽出やソートの条件として利用しています。細かく項目分けすることで、どの情報を公開にするか非公開にするか管理できます。他にも、人によって入力内容がぶれてしまう問題も、項目立てしておくことで回避できます。WordPressの記事をカレンダー上に表示させるための関数です。そのままでは取得する記事や出力する内容を制御できないので、コアファイルからPHPソースコードをコピペしてカスタマイズしています。取得する記事の条件としてカスタム投稿タイプと予約日を指定するようにしました。カレンダー上からのリンクを制御したいイベントによっては、個別にイベントページを持っていることもありますよね。Facebookページや個人ブログなどなど。Googleカレンダーでは「説明」にそのリンクを記載していたのですが、これがリンク表示されないんです。コピペして別タブで開くなんて手間がかかるし、そもそもマウスオーバーしないと表示されない情報なので気付く人が少ないという現実があります。そこで、カレンダー上でリンク表示にし1クリックで開くようにしました!リンク先URLはカスタムフィールドで実装しています。今回、予約情報がWordPressの投稿記事になったことで1つ弊害が発生しました。我々スタッフが予約情報を変更・確認する際に該当予約を探すときの手間が増えたのです。Googleカレンダーであれば、カレンダー上で簡単に探せるので問題なかったのですが...そこで、今回のカレンダーにも同機能を実装することにしました!ログインした状態でカレンダーを表示すると、予約のリンク先がWordPressの記事編集画面になるようにしました。カレンダーのレイアウトを自由に設定したいGoogleカレンダーだとレイアウトの自由がきかないですよね。タイトルが長いと全て表示されないですし。予約件数が多いと全件表示されないですし。具体的には先に述べた、「get_calendar()」関数のカスタマイズで、HTMLタグにクラス名をつけてスタイルを適用しています。このネタをWordCampTokyo2014で話しました。その時に使ったスライドを公開します。WordPressに初めて触れてからもうすぐ2年。大宮アルディージャの川田修平選手(GK)が来訪されました。(年中無休)アクセスメールマガジン週1回程度でメールマガジンにて、イベントや勉強会の情報、コワーキングスペース7Fの近況を報告しています。メールマガジンの購読は、以下よりお申し込みください。株式会社コミュニティコム。