高見知英のかいはつにっし(β)

高見知英のアプリケーション開発日誌 のほか、地域活動などの活動報告ブログ。

おんぷ村スタートページにイベント一覧を表示しました

おんぷ村のスタートページに、イベント一覧と、イベント開催日までのカウントダウンが表示されるようにしました。ちょっととってつけたような感じもありますが。

MODxというのは割とこの辺の機能が付け足しやすくなっているので助かります。Dittoというスニペット(PHPコード)を貼り付ければこのようなリストの表示も楽(本当はDocListerというスニペットのほうがよいようですが)。

中身の解説

MODx使うとだけ言っておいて情報を外出ししていないので、その辺も。

スニペット呼び出し

今回の枠も、このようにdittoの呼び出しだけすれば何とかなる。

<section id="eventlist">
  <h2>イベント情報</h2>
  <ul>
[[Ditto?tpl=`イベント情報` &id=`events` &parents=`115` &showInMenuOnly=`1` &display=`5` filter=`カテゴリ,event,1|日付,@EVAL return time();,3`]]
  </ul>
</section>

Ditto?...というところがDittoスニペット呼び出し(?以降は引数)
Dittoスニペットによって、おんぷ村ニュースの一覧を5件だけ表示させています。
さらにフィルタとして、カテゴリがイベントのもの、開催日が今日以降のもののみを表示しています。これだけでひとまず「今日以降のイベント一覧」が表示できる。

チャンク呼び出し

また、上でDittoの呼び出しのあとに「Qtpl=`イベント情報`」とあります。ここは記事の表示に用いるチャンク(HTMLの塊)の名前を指定しています。
その中身はこんな感じ

<li>
  [+phx:if=`[+url+]`:is=`http://`:then=``:else=`<a href="[+url+]"[+link_attributes+]>`+]
  [+pagetitle+]
  [+phx:if=`[+url+]`:is=`http://`:then=``:else=`</a>`+]
  [!CountDown+? &end_date=`[+日付+]` &msg=`まであと<mark>%d</mark>日` &event=`0 => "<mark>本日開催</mark>です"` &outmsg=`終了しました`!]
</li>

イベントの名前と、そのイベント開催日までのカウントダウンを表示させています。カウントダウンにはLioLionさんという方の公開されているCountDownスニペットを利用(ここでは日付の数値を直接読み込んで使えるよう、少し手を加えている)。
また、if文を使って記事にURLがあるときだけリンクを表示させています。


あとはCSSで、PC UIでは画面右上に、スマートフォンUIではサイトロゴの直下に表示されるように調整しただけ。まあ、スマートフォンUIの表示方法はあとでちょっと調整してみたくはある。


今後もちょこちょことおんぷ村のほうは更新していく予定。もうちょっと自分の活動のハブになるようにしたい。