kazumich.log

a-blog cms で ATNDモジュールを作ってみる その1

この記事は公開日より年以上経過しています

情報が古くなっている可能性がありますのでご注意ください。

ココのサイドに参加状況をお知らせできるように ATNDの出欠確認APIを利用して a-blog cms 用のオリジナルモジュールの作り方を書いてみようと思います。以下のようなリクエストで今回の表示に必要なXML情報を取得する事が可能です。

http://api.atnd.org/events/users/?event_id=17440

詳しくはAPI側の説明をご覧下さい。

モジュール(テンプレート)の記述

テンプレートファイルには、API から取得可能な情報を変数として設定し、目的の表示ができるように記述します。

<!-- BEGIN_MODULE Api_Atnd_EventsUsers -->
<div>
<h3><a href="{event_url}">{title}</a></h3>
<p>参加者:{accepted}人 / 定員:{limit}人</p>
<p><!-- BEGIN user:loop -->
<a href="{twitter_id}" target="_blank"><img src="{twitter_img}" width="30" height="30" alt="{nickname}" /></a> 
<!-- END user:loop --></p>
<p><a href="{event_url}/entry/new">このイベントに参加登録する</a></p>
</div>
<!-- END_MODULE Api_Atnd_EventsUsers -->

/php/ACMS/GET/Api/Atnd/EventsUsers.php

<?php

require_once ACMS_LIB_DIR.'GET.php';

class ACMS_GET_Api_Atnd_EventsUsers extends ACMS_GET
{
	function get()
	{
	
		$id = config('atnd_event_id');
		$url =sprintf('http://api.atnd.org/events/users/?event_id=%d',$id);
		$xml = simplexml_load_file($url);
		
		$Tpl = new Template($this->tpl, new ACMS_Corrector());

		foreach ($xml->xpath('//user') as $user) {
			
			$row = array( 
					'user_id' => $user->user_id,
					'nickname' => $user->nickname,
					'twitter_id' => $user->twitter_id,
					'twitter_img' => $user->twitter_img
				);

			if ($row['twitter_id']!='') $Tpl->add('user:loop', $row);
		}

		foreach ($xml->xpath('//event') as $event) {
		
			$row = array( 
					'event_id' => $event->event_id,
					'title' => $event->title,
					'event_url' => $event->event_url,
					'limit' => $event->limit,
					'accepted' => $event->accepted,
					'waiting' => $event->waiting,
					'updated_at'  => $event->updated_at
				);
			
			$Tpl->add(null, $row);
		
		}
		
		return $Tpl->get();
	}
}
?>

今回はコンフィグの活用方法を中心に書いていきますので、テンプレート部分については説明しません。テンプレート関係については以下をご覧下さい。

コンフィグの利用

10行目にある config('atnd_event_id') という記述で、コンフィグの情報が利用できるようになります。コンフィグの初期値は /private/config.system.yaml にyaml形式で記述します。

atnd_event_id : 17440

と書いておく事で、プログラム内ではない部分で値を管理する事が可能になります。今回のモジュールがサイト上で1つのIDのみ利用可能にするという事であれば、これで完成という事になります。

また、今回のモジュールでは、以下の2点についてが気になります。

  • アクセスされる度にATNDのサーバにアクセスが発生する(キャッシュが有効であれば問題になりません)
  • a-blog cms のキャッシュ機能により最新情報でないままの表示になる事がある

まずは a-blog cms キャッシュの設定を短めに設定しておく事にします。 カスタマイズ管理 > コンフィグ > 機能設定 > 基本 > キャッシュ有効時間 を 600秒(10分)に設定しておく事で、同じページを表示する際には 10分間は ATND のサーバにはアクセスしない事になります。あくまでも同じページという事ですが...

この後は、以下のようなコンテンツを準備したいと思います。

更新

Recommendation

a-blog cms で ATNDもジュールを作ってみる その4(モジュールID化の方法)

モジュールの管理ページが用意できたら、それをモジュールIDが利用できるようにしてみる事にします。「モジュールID化の方法」というと難しく感じるかもしれませんが、これも a-blog cms ならでは簡単に対応する事が可能です。 その1で用意したモジュールの修正は必要なく、その3で用意した管理ページのテンプレートも修正する必要はありません。1つモジュールIDを設定する管理ページのモジュールを選択するプルダウンの中に記述を追加するという事になります。 この部分については、テンプレートから切り離されています。以下のファイルにモジュールの名前等を追記します。 /themes/system/admin/module/select.html ATND EventsUsers ( Api_Atnd_EventsUsers ) これをするだけでモジュールIDとして利用が可能になります。 後は、その1で作ったモジュールのHTMLのモジュール名の後に id="**モジュールID名**" を追記する事で、1つのシステム内で複数のイベントで利用できるようになります。 {title} 参加者:{accepted}人 / 定員:{limit}人 このイベントに参加登録する これで「a-blog cms で ATNDもジュールを作ってみる」については終了となります。一連のエントリーを参考にオリジナルのモジュールを作ってみてはどうでしょうか。 関連エントリー a-blog cms で ATNDもジュールを作ってみる その1 a-blog cms で ATNDもジュールを作ってみる その2(post_includeの活用) a-blog cms で ATNDもジュールを作ってみる その3(管理ページでのID設定) a-blog cms で ATNDもジュールを作ってみる その4(モジュールID化の方法)

a-blog cms で ATNDもジュールを作ってみる その3(管理ページでのID設定)

その1 で a-blog cms のモジュールは用意できてしまっていますが、そのモジュールの設定をブラウザ上からできるようにするというのが今回の目標となります。a-blog cms のカスタムフィールドが分かる人であれば、簡単に管理ページを新規に作成する事が可能となります。 モジュールの名前から管理ページのアドレスやファイル名は自動的に決められてくる事になります。今回のモジュール名は Api_Atnd_EventsUsers という名前になっていますので、似たモジュールでどういう感じなのかを調べてみる事にします。 Yahooウェブ検索 ( Api_Yahoo_WebSearch ) を例に見てみましょう サイト内検索をシステム標準のモノを使うのではなく、YahooのApiを利用して検索した結果をモジュールで表示できるようにしたものです。 モジュール名:Api_Yahoo_WebSearch 管理ページのURL:http://設置先/bid/1/admin/config_api_yahoo_web-search/ テンプレート:/themes/system/admin/config/api/yahoo/web-search.html モジュール名のアンダバーについては、そのモジュールをグループ分けして管理ができるようになっており、そのグループはディレクトリとして扱う事になります。もう1つの WebSearch のようなキャメルケースについては a-blog cms のシステム上では web-search として扱います。 今回の Api_Atnd_EventUsers では モジュール名:Api_Atnd_EventsUsers 管理ページのURL:http://設置先/bid/1/admin/config_api_atnd_events-users/ テンプレート:/themes/system/admin/config/api/atnd/events-users.html のようになります。そして、管理ページのテンプレートとしては、以下のように記述します。他の管理ページと同様になるように、他のテンプレートを複製して作成する事をお勧めします。 events-users.html ルール : {name} の モジュールID : {label} ( {identifier} ) のコンフィグ管理 ATND EventUsers ( Api_Atnd_EventUsers ) ショートカットに追加 ATND イベントID 数字を入力して下さい。 上記の管理ページのテンプレートを用意する事で、特に管理ページを更新するためのプログラムを書く必要はありません。カスタムフィールドを作った時と同様に管理ページを用意する事が可能です。1点違う部分がカスタムフィールドでは name="field[]" と書く部分が name="config[]" と書くという事になります。 上記のようにトピックパスに今回のモジュールの名前「ATND EventsUsers」が出ていません。今回のモジュールのテンプレートを見ると <!--#include file="/admin/topicpath.html"--> と書かれていますので、このファイルも修正する必要があります。 ATND EventsUsers 関連エントリー a-blog cms で ATNDもジュールを作ってみる その1 a-blog cms で ATNDもジュールを作ってみる その2(post_includeの活用) a-blog cms で ATNDもジュールを作ってみる その3(管理ページでのID設定) a-blog cms で ATNDもジュールを作ってみる その4(モジュールID化の方法) 次回はモジュールID化する方法をご紹介します。

a-blog cms で ATNDモジュールを作ってみる その2(post_includeの活用)

a-blog cms には、Ajax を利用してページを表示後に、別のコンテンツを読み込む事ができる post include という機能が標準で実装されています。これを利用すると、その1 で問題になっていたキャッシュ部分が少し改善させる事が可能になります。 では、なぜ post include 機能を利用するとキャッシュの問題を少し改善する事ができるのでしょう? サーバ上に作成される各ページのキャッシュにはATNDモジュールは無い状態でキャッシュされる事になります。 ATNDモジュール部分の小さなパーツは、単体でキャッシュされる事になります。 これであれば5000ページあったとしても、ATND API へのアクセスはキャッシュの有効期間に1回しかない事になります。あとはキャッシュの時間を5分にするのか、60分にするのかという運用をどうするのかを考える事になります。通常は長い時間キャッシュを有効にしておき、ルール等を利用して post include するテンプレートのキャッシュ時間を短めにする事も、どうにかする事ができるかもしれません。 以下に公式の post include のドキュメントをリンクしておきます。 a-blog cms のマニュアルに掲載されている post include 関連のエントリー post includeの基本設定 ページを移動せずにフォームの検索結果を表示する(post include) 送信ボタンを押さずに検索結果を表示する(post include) 検索エンジンからのキーワードでサイト内検索結果を表示する(post include) post includeの結果をキャッシュさせない方法(post include) /include/atnd.html その1のモジュール部分を別ファイルにします。 {title} 参加者:{accepted}人 / 定員:{limit}人 このイベントに参加登録する 上記を呼び出す側のテンプレートに記述する post include の設定 post include は form 部分を Ajax で結果と置き換える機能になりますので、呼び出す側は form タグになります。 また、post include には、submit を押した後に動作させる class="js-post_include" とページの表示が終わってから自動的に動作する class="js-post_include-ready" というのがあります。 今回は自動的に実行なので、以下のようになります。 また、ログインしている時には毎回APIにアクセスしてしまいますので、無事動作するようになった時点でタッチモジュールを利用して、ログイン時は上記のHTMLを表示しないようにした方がいいかと思います。 post include のデモ 試しにクリックしてみましょう! 関連エントリー a-blog cms で ATNDもジュールを作ってみる その1 a-blog cms で ATNDもジュールを作ってみる その2(post_includeの活用) a-blog cms で ATNDもジュールを作ってみる その3(管理ページでのID設定) a-blog cms で ATNDもジュールを作ってみる その4(モジュールID化の方法) 次回は管理ページでIDを設定できるようにする方法をご紹介します。

Contact

お問い合わせはこちら