Google Calendar List View

イベントカレンダー等公開された Googleカレンダーを WordPress 上で新着情報と同じように一覧表示したいことを実現するプラグインです。ショートコードとして利用できます。さらに多言語の場合、カレンダーも複数あるかもしれないなと思って、複数指定できるようにしてます。

Google Calendar List View

変更履歴

  • 2017.09.17: 4.0公開 at WordCamp Tokyo 2017
  • 2017.08.31: 3.1公開
  • 2017.08.25: 3.0公開
  • 2017.08.24: 2.2公開
  • 2017.07.21: 2.1公開
  • 2017.06.26: 2.0公開
  • 2017.06.25: 1.5, 1.51公開
  • 2017.04.18: 1.3, 1.4, 1.41, 1.42公開
  • 2017.04.11: 1.2公開
  • 2017.04.10: 1.1公開
  • 2017.04.09: 1.0公開

ショートコード

  • <ul>[gc_list_view]</ul>

Googleカレンダーをサイトに1つしか活用しないなら、Google Calendar API KeyとGoogle Calendar ID の2つの設定をするだけで、上記ショートコードは動作します。後から複数指定したい場合には、ショートコードの引数として別途指定できます。また 4.0 より複数カレンダーに対応しました。 g_id_*** (は任意)を設定すると、そのカレンダー情報もマージされるようになります。また各カレンダー用の APIは個別設定も可能です。 g_api_key_ (*** は g_id_***と対)で指定できます。基本的に指定したほうが良いです。APIは無料で一日100万クエリという制限があるためです。

デフォルトで利用する場合には、「テキスト」モードで設定してください。理由は、汎用性を保つために、<ul></ul>タグを別途つける必要があるためです。それが面倒な場合には

  • [gc_list_view html_tag=”p”]

を使えば、<p>タグで出力されますので、ビジュアルモードで問題ありません。
あるいは後述するフックを使えば、出力データを自分のテーマに合わせたカスタマイズが簡単にできます!

ショートコードオプション(Version 4.0)

Googleカレンダーから、「現在日付」を起点として未来のカレンダーを10件取得して表示します。日付フォーマットは、YYYY.MM.DD(2017.04.10)です。表示順番は、「起点」をベースとした日付の昇順です。

  • [gc_list_view start_date=”YYYY-MM-DD/ALL” end_date=”YYYY-MM-DD” date_format=”Y.m.d” orderbysort=”ascending/descending” g_id=”Google Calendar ID” g_api_key=”Google Calendar API Key” max_view=10 html_tag=”li/p/dd/lip” html_tag_class=”” id=”” hook_secret_key=”” lang=”” enable_view_category=”” g_id_***=”Additional Google Calendar ID” g_api_key_***=”Additional Google Calendar API Key with g_id_***”]

だけのオプションを用意しました。オプション設定は他の設定よりも優先されます。

  • start_date = データ取得の「起点」を設定します。ALLだと一番古いカレンダーデータを起点とします。strtotime のフォーマットでの記述できます。
  • end_date = データ取得の「終点」を設定します。デフォルトは制限なしで、設定するとそこまでのデータを取得します。strtotime のフォーマットでの記述できます。
  • date_format = データ表示時の日付フォーマットを変更できます。dateフォーマットを記述できます。デフォルトは Y.m.d = YYYY.MM.DD です。Y-m-d = YYYY-MM-DDなどのように変更できます。
  • orderbysort = 「起点」をベースにした表示時の日付ソートです。デフォルトは昇順です。descending を設定することで降順にできます。Google Calendar API v3では、この降順設定が削除された(Google Calendar API v2では ordersortがあった)ため、一旦データを取得した後にプラグイン側でソートしなおしています。ascending、descending以外の設定をした場合には、ascendingがセットされます。
  • g_id = Google Calendar IDを個別に変更したいときに設定できます。複数のカレンダーを使いたい場合に指定します。
  • g_api_key = Google Calendar API Keyを個別に変更したいときに設定できます。
  • max_view = 最大表示件数であり、この件数分を Googleカレンダーから取得します。
  • html_tag = 出力データの先頭、末尾に設定するタグを指定します。li, p,  dd, lipの4つを指定できて、それ以外の値がセットされた場合には<li>がセットされます。 class=”list-view-google-calendar”>がセットされます。
  • html_tag_class = html_tag に対する classのセットです。デフォルトは、list-view-google-calendar です(<html_tag class=”list-view-google-calendar “>***</html_tag>)
  • id = もしフック利用時に、各ショートコードにおいてカスタマイズを変更したければ、この id を活用してみてください。
  • hook_secret_key = フックを安全に利用するためのキーです。フックを利用する場合には指定した上で、フック側でも値を返してください。詳しくは、末尾のフック項目参照。
  • lang = Googleカレンダーの説明文に #lang [値] が存在し、値が一致したものだけ表示。もし一つのGoogle カレンダー から 英語のイベントのみを出力したい場合、英語のイベントの説明文に #lang en を含めておき、ショートコードオプションとして lang=”en” 追加してください。
  • enable_view_category = 空以外の値を設定すると、カレンダーの説明文内に #type, #organizer のハッシュタグが設定されていれば、カテゴリー表示する(例
    2017-10-22 カテゴリー名 主催情報 タイトル)
  • g_id_*** = *** はユニークであれば自由に設定してください。2つ以上のカレンダーをマージして一覧表示するときに追加の Google カレンダー ID を指定して下さい。
  • g_api_key_*** = *** は、g_id_*** の *** と連動する形で設定してください。。2つ以上のカレンダーをマージして一覧表示するときに追加の Google カレンダー ID 用に個別に API を設定するときに指定して下さい。

Google Calendar API Keyの生成方法

英語ですが、画像を加えてとても分かりやすく説明されています。これをみれば生成できると思います。なお APIは一日100万クエリまでの制限があります。それ以上使いたい場合には、Google Calendar API Usage Limits ページを参考にしてください。

Google Calendar ID の確認方法

英語ですが、画像を加えてとても分かりやすく説明されています。これをみればきっと探せるはず!

具体例を出してみます!

下記の例では、 「Public Calendar 1」「Public Calendar 2」という2つの公開カレンダーを用意してます。

「Public Calendar 1」

  • 2017.04.07 TEST Event 3 on Public Calendar 1
  • 2017.04.04 TEST Event 2 on Public Calendar 1
  • 2017.04.02 TEST Event 1 on Public Calendar 1

「Public Calendar 2」

  • 2017.04.14 TEST Event 3 on Public Calendar 2
  • 2017.04.11 TEST Event 2 on Public Calendar 2
  • 2017.04.10-12 TEST Event 1 on Public Calendar 2

とデータを入れています。上記日付は「起点日」をいれてますが、実際には終日、日時、複数日にまたがるケースを入れ込んでいます。

 

これに対して、下記のショートコードを固定ページの「テキストモード」で入れてみます。※Google Calendar IDは伏せ字にしてます。

「Public Calendar 1」
<ul>
[gc_list_view g_id=”◯◯@group.calendar.google.com” start_date=”ALL” orderbysort=”descending”]
</ul>
「Public Calendar 2」
<dl>
<dt>List View of Google Calendar Events</dt>
[gc_list_view g_id=”◯◯@group.calendar.google.com” orderbysort=”descending” html_tag=”dd”]
</dl>

で実際の表示は下記の通りです。

スタイルシートがデフォルトなので <dd>が一行あいてますけれど、「Public Calendar 1」が<li>、「Public Calendar 2」が<dd>タグになっています。

もちろん、リンクをクリックしたら公開カレンダーの詳細表示画面が新規ウィンドウで開きます。

またPublic Calendar 1のほうは過去記事なので(実験時点で 2017.04.09)、start_date=”ALL” あるいは、 start_date=”2017-04-01″ など起点日をイベント日時より前にしておかないと過去イベントは表示されません。まぁ過去イベントを表示したくないなら不要ですけどね。

どんな設定があるの

WordPressの管理ダッシュボードの「設定」内に「Google Calendar List View Settings」があります。ここで基本的な設定ができます。

Google カレンダー API設定

出力時の設定

「起点日」を基軸とした日付のソート(昇順、降順)
HTMLタグの出力設定になります。いずれもショートコードのオプションでも指定できます。

フック& その他のお知らせ

フックの使い方

以下、サポートしているフックを テーマのための関数「functions.php」 内でどのように記述するかの例をあげておきます。 各フックを利用すると出力データを変更できるため、ショートコードに「hook_secret_key」オプションを設定し、このhook_secret_key と、フック内から返す hook_secret_key が同一である場合のみ有効になります。

フックで活用できる配列

$out_atts として受け渡されます。
extract($out_atts);
を使えば、下記の変数として利用できます。

  • $start_date_num = 各イベントの開始日(Ymd)
  • $start_date_value = 各イベントの開始日(date_formatで指定したフォーマット)
  • $end_date_num = 各イベントの終了日(Ymd)
  • $today_date_num = 本日(Ymd)
  • $holding_flag = 各イベントが開催日なら true, そうでないなら false
  • $gc_link = 各イベントのGoogleカレンダーへのリンク
  • $gc_title = 各イベントのタイトル
  • $plugin_name = プラグイン名
  • $html_tag_class = ベース用クラス名
  • $html_tag_class_c = 開催日用クラス名(開催日 = ${html_tag_class}_holding, 開催日以外 = $html_tag_class)
  • $id = ショートコードオプション(id)
  • $lang = ショートコードオプション(lang)
  • $hash_tags = 各イベントの説明内のハッシュタグ(array( “hash_tag”=>array(“value”=>””, “title”=>””), …..); )
  • $hash_tags_type_title = 各イベントの説明内のハッシュタグ のうち、 #type hash_tag_category hash_tag_title の hash_tag_titleの値 (= $hash_tags[‘type’][‘title’])
  • $hash_tags_type_organizer = 各イベントの説明内のハッシュタグ のうち、 #organizer value の value の値(= $hash_tags[‘organizer’][‘value’])
  • $output_category_temp = ショートコードオプション enable_view_category が設定されていれば、#type, #category の出力タグが入る(デフォルトは空)

lvgc_each_output_data

各イベントを出力する際のコードを変更できます。

デフォルトは、次の通り

  • <lt> class=”list-view-google-calendar_item”><li class=”list-view-google-calendar”><span class=”list-view-google-calendar_date”>日付</span> <※1 ハッシュタグ #type, #organizer が存在する場合><a class=”list-view-google-calendar_link”>href=”Google カレンダーリンク” target=”_blank”>タイトル</a></li>
    <※1 ハッシュタグ #type, #organizer が存在する場合> = <span class=”list-view-google-calendar_category”>#type の第2引数の値</span><span class=”list-view-google-calendar_organizer”>#organizer の第1引数の値</span>

を出力するコードになっています。
これをそのままフックで書いてみると次のようになります。

まずショートコードとして

  • [gc_list_view *******  hook_secret_key=”hogehoge”]

を設定しておきます。重要なのは、hook_secrey_key を設定することです。

以下、テーマの functions.php に記載します。

が最も単純な構成例かなと思います。

またショートコードごとに変更したければ、

[gc_list_view g_id=”hogehoge” id=”99″ hook_secret_key=”hogehoge”]

[gc_list_view g_id=”hoge” id=”hoge” hook_secret_key=”hogehoge”]

などのように ユニークな番号かキーワードである idをいれた上で、下記のようにすれば、 各ID だけに適用できるフックを作成できますよ!
(下記は、 idが 99のときだけ

  • タグを、id が hogehogeのときは
    タグで出力する例

    カスタマイズ

    よりカスタマイズしたい場合には、上記フックで利用できる変数を活用してください。
    テンプレートタグ「lip」の場合、次のコードになっています。ハッシュタグ #type の第2引数と #organizer の第1引数の値を、カテゴリーとして表示する例です。

    *表示したい HTML

    *フックのコード(functions.php)

    タイムゾーン処理に気をつけること

    date や i18_date では WordPress におけるタイムゾーン処理ではうまくいかないか、面倒が発生します。のでタイムゾーン処理なんて考えたくないぜ〜って人には、次のWordPress専用関数を利用すると幸せになれます。

    現在日時取得&日時フォーマット変換:current_time

    • $current_time = currentitme(“Y-m-d”); (2017-04-03 など年月日で取得する場合)

    日時フォーマット変換:get_date_from_gmt

    • $start_date = get_date_from_gmt($item[‘start’][‘dateTime’], “Y-m-d”);

    Googleカレンダーイベントの開始日時をタイムゾーンに配慮して、年-月-日で $start_date に入れる

    まぁとこんな感じで、テンプレートであろうが、固定ページ、投稿ページ(カスタム投稿含む)のどこでも、「公開」されているGoogleカレンダーについては、一覧表示できるぜ〜ってことですね。

    2017年8月25日 ドキュメント変更(3.0対応)
    2017年8月24日 ドキュメント変更(2.2対応)
    2017年7月21日 ドキュメント変更(2.1対応)
    2017年6月26日 ドキュメント変更(2.0対応)
    2017年6月25日 ドキュメント文章の変更
    2017年4月20日 冒頭の文言を追加
    2017年4月18日 フックに関する説明を追記
    2017年4月17日 フックに関する説明を追記
    2017年4月10日 バージョン1.2 の加筆
    2017年4月10日 バージョン1.1 の加筆
    2017年4月9日 @kimipooh

  • Pagetop