たまたま三鷹プログラマーズカフェに参加したときにこのイベントを知り、家に帰ってAPIを眺めていたところ沢山のAPIの中に妻がよく見ている東京アートビートの名前を見つけ、そこから制作企画が始まりました。

妻いわく「アートビートはイベント情報がちょっと見づらい」との事で、具体的には「今、どこで、何をやっているかがすぐにわからない」という点に不便を感じていました。
ギャラリーや美術館の常設展などは無料で入れるところが多く気軽に立ち寄りたいのですが、「今日これから上野に行く用事ができたので、ついでに寄れそうな場所を探したい」という場合にサイトが使いづらかったようです。

アートビートのサイトにはイベントカテゴリの中に「エリアで探す」という項目が既にあったので、今回はここを強化する目的で作ることにしました。
余計なものは付けない方向で考えていたため、トップページはエリア名だけを並べ、クリックしたらその地域のイベントが地図と一緒に出るだけにしました。ただそれだけなんですが、導線が整理されてだいぶ使いやすくなったようです。地図で位置関係が見えるようになったのもよかったかなと思います。
また、公式サイトのレスポンスが遅いため、取得したRSSをキャッシュしてスムーズに閲覧できるようにしてあります（キャッシュは3時間おきに更新しています）。

（余談ですが、東京アートビートとニューヨークアートビート、どちらも同じサーバで動いているのにレスポンスがぜんぜん違います。東京のほう、もうちょっと軽くなるとうれしいです。）

開発言語はPHP+SmartyとJavascriptです。PHPはWordpressを触っていた際に少し覚えた程度でしたが、普段やらないことに挑戦したことでいろいろ知ることができました。これを機にもっと幅を広げられたらなと思っています。制作期間は1週間でした。

今後は、これも妻の要望ですが携帯対応を予定しています。まだ動作で少し怪しいところがあるので、一緒にその辺りもつぶせたらと思っています。美術館めぐりが好きな方、是非とも使ってみてくださいね。

• 人見知り用ATND

コンセプトは、『ATND にいろいろ付加情報をつけ、初対面でも話題に困らないようネタを仕込むことができる、人見知りによる人見知りのためのサービス』です。

使い方

ページ上部の入力フォームに、ATNDのイベントIDを入力します。
（例）http://atnd.org/events/1889 の最後の数字の部分

ATNDに登録済みの方はユーザーネームも入力すると、過去に同じイベントに同席した人をチェックできます。

機能紹介

イベント情報関連

ATNDと同じような情報を表示します。住所がキチンと入力されている場合は、右側に開催地を中心としたGoogleMAPを表示します。
同時に食べログでお店をチェックし、近隣にあるようなら目印を追加します。

2次会の場所を提案できたり、「近所のうなぎ屋がおいしいらしいよ！」とアピールして存在感を出すことができるようになる…かもしれません。

現地周辺の飲食店情報

食べログの情報をそのまま出しています。一人で行くようなバーとかどうなんだろう･･･？と思いましたが、用途は人それぞれなのでフィルタリングせず全部出してます。

このイベントに関連する情報

イベント情報のタイトル、キャッチフレーズ、住所、概要を全部Yahoo!のキーフレーズ抽出APIに投げ、返ってきた物を適当にチェックして今度はSimpleAPIシリーズの Wikipedia APIに投げ、キーワードに完全にマッチするものだけを表示します。

「東京都の鳥はユリカモメらしいんですよ。だから東京臨海新交通臨海線の愛称もゆりかもめなんですかね？」と、相手が困る質問をぶつけて存在感をだせる･･･かもしれません。
地名以外はわけのわからない結果になってしまいますが、ご愛嬌ということで。

参加者情報

ここはGoogle Chart以外にAPIを使ってないのでアレですが、個人的に知りたい情報だったので作りました。

イベント参加者の名前は他のウェブサービスでも同じことが多いので、名前一覧を取得したらTwitterアカウントの有無をチェックします。もしあればアイコン、自己紹介文、最新のつぶやきを表示します。見つからない場合はGoogleで検索し、近い名前のTwitterアカウントかiddyアカウントを探してきます。今まで手動でやっていたことを、自動でやらせてます。

Twitterのアカウント名が違ったりアカウントを持っていない場合でも、ATNDと同じ名前のユーザーがTwitter上にいれば拾ってきてしまいます（外人のアカウントを拾うことが多いです）。内容で判断しつつ、あくまで目安として使用してください。

Twitterと同様に、アカウント名と同じはてブとはてダがある場合はアイコンを追加します。

Twitterアイコンの左に出ている数字は、ATNDを通じて参加したイベントの数を表示しています。オフ会の猛者が初めてATNDを使って「１」と表示されることもあると思いますが、あくまで目安として。上限は100です。

ページ上部でユーザー名を入力した場合は、過去2回以上同席した人をチェックして、その人の背景色を赤く表示します。これは となりのATNDさん を参考にしました。

その他

パーマリンクに対応しているので、自分の参加予定のイベントをブックマークできます。ほとんどAjaxなのでページ遷移はありませんが、便利そうかなと思ってつけました。
また、イベント開催場所の住所が入力されていて、かつ一週間以内であれば、天気予報を表示します。

使用API

• ATND
• 食べログ
• Googlemap
• SimpleAPI Wikipedia
• Yahoo!天気情報のRSS
• Google Chart API

f-dexのサイトは以前からあったが、ニュースやイベント情報（f-dexのではなく、記事を寄稿してもらったりしてお世話になっている方々のイベント情報）をちょこっと載せているだけだった。バックナンバーをWeb上で見せるという話も出たことがあったが、忙しかったりタイミングが合わなかったりして、なかなか実行に移せないでいた。

ちょうど個人的にWordpressを触っていたこともあり、ブログ以外のものを作りたいなーと思っていたので、承諾を得て仕事の合間にサイトを作ってみることにした。（ちなみに、Wordpressを使った他の事例は嫁さんのサイト（デザインはやってもらった）。案件では今の所機会に恵まれていないので、使ったことがありません。随時大募集中です）

サイトの全体像

まず、サイトの全体像から。主なコンテンツとして「ニュース、配布場所、バックナンバーの閲覧、バックナンバーの請求、特集（プレゼントとか）、イベント紹介」があり、補助的な内容として「f-dexについて、メールフォーム」がある。

この中で、頻繁に更新しブログ的な機能と相性が良いのは「ニュース、特集、イベント情報」の3つ。これとは反対に、一度作ってしまえば後はあまり触らなくていいモノ、WordpressのPAGE機能と相性が良いのは「配布場所」と補助内容の3つ。
残った「バックナンバーの閲覧」と「バックナンバーの請求」のうち、請求の方は別で作ったフォームがあるので、今回はWordpressで管理しない。「バックナンバーの閲覧」はややこしい事をしてしまったので、分けて書きます。

ブログと相性のいいページ/ PAGEと相性のいいページ

ブログと相性のいいページは、特に何も考えず普通のブログっぽく作成。一覧ページのページ遷移用にWP-PAGENAVIプラグインを使用したくらいで、特筆する箇所はなし。

PAGEと相性のいいページも特に変わった事はしていないので、あまり書くことはない･･･かも。メールフォームの所にContact Form][というプラグインを使ったことくらい。

基本的に変なカスタマイズはせず、Wordpressの基本機能だけで作成。ここまでは本に載ってるサンプルで出来ました。

バックナンバーの閲覧

ここがサイトの一番重要なところなので、見せ方を工夫した。
f-dexの内容はインタビューに始まり、写真、イラスト、各種連載…というような順番になっている。インタビューもさることながら、連載記事も有名なイラストレーターさんだったり、クリエーターさんだったり、噺家さんだったりと多岐にわたっていて面白いので、Vol.001、Vol.002などの号数に関係なく読めるようにした。

1. バックナンバー閲覧画面の、最初の画面

グローバルナビゲーションのArchiveを押したら、バックナンバーの最初のページが出るようになっている。ここでは「本や連載記事がこれだけあるよ！」というのを見せたかったので、本のサムネールや連載のバナーを並べてにぎやかなデザインにした。
楽をしたかったので、このページは内容が追加されたら自動で表示されるようになっている。

まず表紙の方の説明。
一冊の本の中身について、それぞれこんな風にカテゴリをつけている。

「表紙」というカテゴリはf-dexの表紙になる部分にしかつけていないので、query_postsで表紙カテゴリのエントリだけを取得。各記事のタイムスタンプを発行日にしているので、日付の古いものから順に並べればVol.001、Vol.002…と綺麗に並んでくれる。

query_posts('showposts=-1&category_name=cover&order=asc');

取得した表紙エントリのかたまりをループで回す際、get_the_category()を使うと各エントリにつけてあるカテゴリのリストが得られる（戻り値はカテゴリID）ので、ここからVol名を取得。

// vol名取得
foreach((get_the_category()) as $cat){
	if(strstr($cat->slug, "vol")){
		$newestVol = $cat->slug;
	}
}

表紙の画像はvol001_thumb_l.jpgというような名前で統一してあらかじめアップロードしてあるので、取得したvol名をファイル名に指定すれば、その号の表紙が表示される。

// 表紙ファイル名
$cover = get_bloginfo('template_url') . "/images/cover/" . $newestVol . "_thumb_l.jpg";

表紙サムネールの下に出す特集の内容をどうするか悩んだ末、カスタムフィールドに入れることにした。featureというキーで登録しておいたので、その値を表示するようにして完成。（困ったときのカスタムフィールドだなぁ…、と実感しました）

特集：< ?php echo post_custom("feature"); ?>

連載のバナーの表示部分も同じような感じで表示。
※サイトのトップページも同じ要領でやっているので、自動で表示されます。

2. 左メニューに、Vol名、連載記事、著者別のリストを表示

これはVol名、連載記事、著者を格納するための親カテゴリを作り、具体的な内容のカテゴリをその中に登録し、mnk_list_cats('child_of=xx');を使って表示。

Wordpressはver2.3.2日本語版からタグが標準装備されたので使いたかったけど、これをやりたかったので断念。

3. 各号のトップページで表紙を出す

左メニューのVol.001というリンクや表紙のサムネールをクリックしたら、各号の表紙が出るようにした。archive/vol001/index.html を用意するようなイメージ。

Vol.001などのVol名はカテゴリなので、通常は管理画面で設定した件数だけ、このカテゴリに属したエントリが表示される。一般的にこういったカテゴリートップでは、記事へのリンクが付いた見出しと概要を表示することが多い。例：http://wiredvision.jp/news/culture/

f-dexは各号ごとに紙や印刷加工が違ったりするので、表紙の画像以外に説明文を入れたかった。各号のカテゴリートップでそれをやりたかったので、ちょっと変な事をした。

1. で書いたように、各エントリの日付は発行日にしてある。さらに、エントリの内容が本の順番どおりに並ぶよう時間をずらして登録してある。表紙は23時、特集は22時、その次の記事は21時･･･といった感じ。Wordpressのループはデフォルトで新しいものから順に取り出すので、カウント用の変数を用意して先頭のエントリだけは本文を表示、それ以外はリスト表示にして目次として使った。

if(have_posts()) : while(have_posts()) : the_post();
$entryCount++;

if($entryCount == 1){
	// 先頭のエントリだけ本文表示
	the_content();
}else{
	// それ以外は目次としてタイトルだけ表示
	the_title();
}
endwhile; endif;

表紙の画像はカスタムフィールドに入れても良かったけど、ここも楽したかったのでカテゴリにつけたVol名から自動で表示するようにした。なので、ここで入力しているのは表紙の説明文のみ。
テンプレートを使っても良かったかな･･･と思ったけど、新刊ごとにテンプレートを作るのもどうかなと思ったのでこうしました。

4. 記事ページ間の遷移

f-dexは本なので、Vol.001ならVol.001内だけで「＜前のページへ / 次のページへ＞」とリンクをつけて、現物と同じように読めるようにした。
Wordpressのテンプレートタグにnext_post_link()、previous_post_link()というものがあり、引数に” in_same_cat=true”を与えると同じカテゴリの前後エントリだけにリンクを張ってくれる。エントリにつけるカテゴリが1つだけなら、このタグが使えたので簡単だった。

今回はカテゴリを複数つけているので、このタグがうまく機能しなかった。各エントリのカテゴリがget_the_category()で出力した時の最後に来るカテゴリとして認識されてしまうようで、「Vol.001カテゴリ」を見ていたと思ったらいつの間にか「筆っこカテゴリ」を見ていた…というような事が起こってしまった。
2番にあるように今回はタグ機能が使えないので、next_post_link()、previous_post_link()を改造することにした。

Wordpressのインストールフォルダ内で「next_post_link」を含むファイルを検索すると、link-template.phpに入っていることがわかる。Ver2.3.2では450行目にnext_post_linkの定義があるので見てみると…

function next_post_link($format='%link »', $link='%title', $in_same_cat = false, $excluded_categories = '') {
	$post = get_next_post($in_same_cat, $excluded_categories);

	if ( !$post )
		return;

	$title = $post->post_title;

	if ( empty($post->post_title) )
		$title = __('Next Post');

	$title = apply_filters('the_title', $title, $post);
	$string = '<a href="'.get_permalink($post->ID).'">';
	$link = str_replace('%title', $title, $link);
	$link = $string . $link . '</a>';
	$format = str_replace('%link', $link, $format);

	echo $format;
}

この関数はリンクの見栄えを担当しているだけで、エントリが同じカテゴリかどうかの判別はget_next_postという関数でやっていることが分かった。get_next_postの定義は少し上の391行目にあるので見てみる。

function get_next_post($in_same_cat = false, $excluded_categories = '') {
	global $post, $wpdb;

	if( empty($post) || !is_single() || is_attachment() )
		return null;

	$current_post_date = $post->post_date;

	$join = '';
	if ( $in_same_cat ) {
		$join = " INNER JOIN $wpdb->term_relationships AS tr ON p.ID = tr.object_id ";
		$cat_array = mnk_get_object_terms($post->ID, 'category', 'fields=tt_ids');
		$join .= ' AND (tr.term_taxonomy_id = ' . intval($cat_array[0]);
		for ( $i = 1; $i < (count($cat_array)); $i++ ) {
			$join .= ‘ OR tr.term_taxonomy_id = ‘ . intval($cat_array[$i]);
		}
		$join .= ‘)’;
	}

	$sql_exclude_cats = ”;
	if ( !empty($excluded_categories) ) {
		$blah = explode(‘ and ‘, $excluded_categories);
		$posts_in_ex_cats = get_objects_in_term($blah, ‘category’);
		$posts_in_ex_cats_sql = ‘AND p.ID NOT IN (‘ . implode($posts_in_ex_cats, ‘,’) . ‘)’;
	}

	$join  = apply_filters( ‘get_next_post_join’, $join, $in_same_cat, $excluded_categories );
	$where = apply_filters( ‘get_next_post_where’, "WHERE p.post_date > ‘$current_post_date’ AND p.post_type = ‘post’ AND p.post_status = ‘publish’ $posts_in_ex_cats_sql AND p.ID != $post->ID", $in_same_cat, $excluded_categories );
	$sort  = apply_filters( ‘get_next_post_sort’, ‘ORDER BY p.post_date ASC LIMIT 1′ );

	return @$wpdb->get_row("SELECT p.ID, p.post_title FROM $wpdb->posts AS p $join $where $sort");
}

if ( $in_same_cat ) { … }の中がカテゴリの判別をしているところなので、そこを中心に見る。

if文の2行下の$cat_arrayに、エントリが属しているカテゴリの番号が入る。例としてVol.001の特集ページだと、

Array
(
    [0] => 8
    [1] => 11
)

のようになっている。変数名が$cat_arrayなので、これがカテゴリIDかな･･･と思っていたら違っていた。DBのmnk_term_taxonomyテーブルを見てみると、カテゴリIDであるterm_idをterm_taxonomy_idという値とマッピングしている。そして$cat_arrayの値はterm_taxonomy_idの数字が出ていた。

まずはterm_idが欲しいので、term_taxonomy_idをterm_idに変換する関数をfunction.phpに作る。

function conv_taxonomyID2termID($id){
	global $wpdb;
	return $wpdb->get_results("SELECT term_id FROM $wpdb->term_taxonomy WHERE term_taxonomy_id=$id");
}

ついでにカテゴリIDからスラッグ名に変換する関数も作った。これはcategory.phpにget_cat_IDという似たような関数があったので、返す値をIDからスラッグ名に変えただけ。

function get_cat_slug($cat_id) {
	$cat_id = (int) $cat_id;
	$category = &get_category($cat_id);
	return $category->slug;
}

これらを使って、カテゴリIDからスラッグ名を取得し、volで始まるカテゴリだけを入れるようにした。そうすると、各エントリは同じVol名のエントリにしかリンクを張らなくなるので、晴れて目的達成。ただ、コアファイルに書き足してしまうとWordpressの再インストール時に上書きしてしまいそうなので、これもfunction.phpにget_next_post_volという名前で保存しておいた。また、next_post_linkもnext_post_link_volという名前に変えて、こちらで追記した関数を読むように変更した。

今回使用したプラグイン

Akismet

標準で入っているコメントスパム対策プラグイン。

Contact Form][

コンタクトフォーム設置用。手軽で便利。

Search Everything

サイト内検索の範囲を広げる。（デフォルトが記事本文のみなので。狭いよね…。）

Top Level Categories

Wordpressのパーマリンク設定で%category%を使った際、デフォルトだとhttp://hoge.com/category/news/とかhttp://hoge.com/category/event/ のように、「category」が入ってしまう。ここのcategoryの部分を消してくれるプラグイン。カテゴリーベースの所に/.と入れても消せるけど、どこかで不具合があったのでこっちを使うことにした。（WP: 設置ディレクトリと異なるページをホームにするをやったときだったかも）
via.WordPress › WordPress Ideas — Remove 'Category Base' From Permalinks

Upload Unzipper

画像をzipに圧縮して、まとめてアップロードできる。ちゃんと画像をエントリに関連付けてくれる。一つのエントリに画像をたくさん使う際に便利。

WP-AddQuicktag

エントリ投稿画面にクイックタグボタンを増やせる。エントリ内でいろいろタグを使う際に便利。（なぜか新規投稿時だけ機能していない）

WP-PageNavi

ページナビゲーションを「Page 1 2 »」という形で出してくれる。

FeedBurner FeedSmith

RSSはfeedburnerを通して公開しているので、転送するために。

Google XML Sitemaps

アーカイブ内のページ数が結構あるので使ってみました。

小ネタ

画像アップロードの初期設定を変える方法(ver.2.3.3以前)

エントリに画像を入れる際、デフォルトだと表示：サムネイル、リンク先：ファイルが選択されており、「エディタに送る」ボタンを押すとサムネールのタグが書き出されてしまう。個人的に表示：フルサイズ、リンク先：なしが好みなので、最初からこうなるようコアファイルを以下のように変更した。

ver2.3.2の場合、wp-admin/js/upload.js の中の

1. 124行目 checked = 'display-thumb'; をコメントアウト
2. 138行目 value='file'となっているinput要素から、checked='checked'を切り取る
3. 140行目 value='none'となっているinput要素に貼り付け

隠れてしまっているアップロードボタンを直す(ver.2.3.3以前)

wp-admin/wp-admin.css の適当な場所に、以下のコードを記述する。

form#upload-file th label {
	white-space: nowrap;
}

WordPress Japan :: トピックを表示 - 画像アップロード画面でアップロードボタンが隠れる
これと同じ話題。

カスタムフィールドの使い方

名前が悪いのでいまいち何に使うのかわからないカスタムフィールド。これはエントリにメタ情報を自由に追加できる機能で、記事に変数が使えるようなもの。（DBもmnk_postmetaというテーブルに入っていて、meta_key、meta_valueというフィールド名で保存されている）

普通のブログをやっている時は出番があまりないが、何かしら定型の値をエントリに持たせたいときに威力を発揮する。Wordpressサイト構築スタイルブックでは航空券の値段や訪問都市、航空会社などの情報を入れていたし、f-dexのサイトでは特集の内容を入れて使った。バイクのツーリングだったら、行き先、気温、所要時間、走行距離なんかを入れてもいい。
値は普通にDBに保存されるので、「走行距離が200km以上」とか「気温10度以下」といった条件でエントリの抽出ができたりする…かも（試してません）。

値を取り出すときはpost_custom('キーの値’)とするだけでOK。アンダースコアで始まるキーはシステムが使用するので、重複させないように注意。カスタムフィールドを使ったプラグインもいくつかあるようなので、使いようによっては面白いことが出来そうです。

参考にしたサイト

power source* » WordPress
逆引きリストが便利。設置ディレクトリと…の記事も解説が詳しくてわかりやすかったです。

TRANS [hatena]
WordPressテーマ（テンプレート）カスタマイズのまとめ（日本語訳）他、Wordpress関連のエントリは色々と参考になりました。Yahoo! UI LibraryのCSSを使っている...とのエントリもあったので、まねして使ってみたりしました。

Main Page « WordPress Codex
日本のフォーラムはまだまだ情報量が少ないので、他の方もやってるように本家の中を検索して回りました。英語は辛い…。

参考にした書籍

Wordpressのフォーラムなどでよく見かける、マクラケン直子さんの著書。解説が丁寧なので、まったくの初心者だった自分は助かりました。基本から学べるので初めての人におすすめ。
3月末にWordPressビジネスブログ標準ガイドブックが出たようなので、こちらも要チェック。

上記のTRANSに紹介されていた本。こちらは基礎から応用まで、ブログからサイトの作り方までを解説している。カテゴリースラッグを使って画像を自動で表示する方法なんかは、ブログの作り方しか知らなかった自分には目からうろこでした。タグリファレンスもわかりやすくて◎。エントリの日付をいじって好きな順に並べるアイデアも、この本から得ました。

最後に

なかば勢いと思いつきで作ってしまったので、もっと便利な方法があるよ！とか、このページがわかりにくいよ！といった意見に飢えています。なにかありましたら、こちらのコメント欄やf-dexのほうのコメントフォームからご連絡ください。

13 名前：ねこま ：03/03/02 22:59
>ループカウンタの変数名をどうしたらいいですか?
>i,j,k,n,mは使いました、このつぎのネストしてるループはどのもじですか?
ネストしてるカウンタ用には
n1, n2, n3…
とか統一した方がわかりやすいです．

    for (n1=0; n1<100; ++n1) {    　for (n2=0; n2<200; ++n2) {    　　for (n3=0; n3<300; ++n3) {    　　　if (n1 == 50) {　　　　// ←どのカウンタかわかりやすい    　　　　...    　　　}    　　}    　}    }

（追記）
Net::POP3での受信をロリポップで試すと、メールは0件と言われてしまう。Biglobeでやるとちゃんと帰ってくるので謎。ちょっと困り中。

（追記2）
Net::POP3は諦めてGmailを使うことにした。
PCのメールをGmailに転送→Gmailでフィルタかけて携帯に転送 という流れ。ずいぶん前にこれやってる人が近所にいた気がする…。とりあえず無事に出来てよかった。安心してパソコン切っとける。

参考にしたページたち

Flashで外部ファイルにUnicode使うときもBOM付けたら駄目だっけか。もう忘れまくり。
とりあえず付けないように気をつける(｀・ω・´)