Office L

世界のナベアツ（リンク先は wikipedia）がじわじわ熱いですね。去年の暮れくらいから言及されているようなので、流行としては乗り遅れた感がいっぱいですが、ネタということでひとつｗ

実は現在のプロジェクトのメンバーに楽しんで勉強してもらうにはどうしたらいいか、ということを考えていたところ、mixi の某コミュニティにおいて MT のテンプレートで世界のナベアツをやる、というのがあって、WP でもやってみようと1人で考えていたところ、WP って php なんだから何でもできちゃうし、それってタダのプログラムじゃん、とゆうところに落ち着き、これをやらせてみたら面白いんじゃないか、と思って、プロジェクトメンバーへの宿題にしてみたのです。

「3の倍数と3の付く数字だけアホになり、5の倍数だけ犬っぽくなります」っていう、条件だけを出して、後はどうつくるか、どう見せるか、も含めて、全て自由、という感じで出題しました。要はそのアウトプットでもって、そのメンバーの技術レベル、取り組み姿勢、ものの考え方などなどを計って、今後の学習プランを作ろうかなってことです。それに対してこちらから何も出さないのもアレなんで、作ってみたって感じです。

とりあえず、どんなもんか見てやるぜ、という方はどうぞ。世界のナベアツ php で作る html & CSS 的回答

向こうに書ききれなかった注意点とかもろもろは以下。

• うちの若いプロジェクトメンバー向けの宿題（に対する回答例）です。あんまり細かいつっこみは勘弁してくださいｗ
• CSSは手抜きしてます。8h 以上時間割きたくなかったので、Mac での検証サボりましたｗ なんか問題あったら教えてください。
• でも NabeAzz を名乗るネタは CSS にあります。以下ネタばれ
  • アホっぽくなる CSS は、class に aho （アホ）を指定し、color:#af0af0;（アフォアフォ） にしています。ちなみに、color:#af0; だと読みにくいんですｗ
  • 犬っぽくなる CSS は、class に bow （犬の鳴き声）を指定し、font-size:11pt;（わんわん）にしています。ちなみに、見た目の差をつけるのが難しかったので、下線も引きました
  • ダンディになる CSS は、class に dad （父：ささやかに自尊心を満足させた！）を指定し、font-style:italic;（イタリック：いや、イタリアとは関係ない：タダのオヤジギャグｗ）にしています。
• html は xhtml 1.0 Transitional にしてみました。本当は strict にしようと思ったんだけど、どうせなら宿題の再提出用にしたほうが、みんな（主に俺かｗ）ハッピーかな、とか。
• table のアクセシビリティについて再考するきっかけになりました。caption の UA 毎の挙動も久しぶりに思い出したり、結局自分もいい勉強したな、とか。
• html も CSS も、W3C のバリデータでチェックして、問題ないことを確認してます。html-lint はあまりこだわりたくないけど、とりあえずエラー０にしてみた。自分たちが同じようなものを作るときに、どうしてそうしなければいけないか、どうすれば同じように（１から）作れるか、を考えるきっかけになるといいと思う。

思いつきで、勉強用に使えるポインタとか以下。

• W3C Markup Validation Service　正しい html を書くときは必須でチェックすること。
• W3C CSS Validation Service 正しい CSS を書くときは必須でチェックすること。
• Another HTML-lint どうしたら正しい html が書けるようになるかはこのツールのお世話になるといい。
• CSS Zen Garden CSS の可能性にインスピレーションを受けたくなったら見るといい。
• CSS Table Gallery CSS でデータテーブルのインスピレーションが欲しいとき。
• 47+ Excellent Ajax CSS Forms　Form のビジュアルを考えるときのインスピレーションもらったり。
• Web Content Accessibility Guidelines 出現順序の賛否両論はあるかもしれないけど、余力が出来たらアクセシビリティに関しては必ず勉強しておくといい。
• Dive Into Accessibility（の日本語訳） かなり古いネタになるけど、これはとても重要なこと。例えば明日、自分が光を失ったらどうなるかを考えたら、制作者として決してアクセシビリティは他人事じゃなくなる。

WordPress の投稿画面は、TinyMCE などによりとても高度なエディタになっています。ただ、タグ入力を手打ちで出来る場合には、若干というか、かなりいただけない仕様があります。それが wpautop フィルターです。

wpautop フィルターは、投稿内容などを整形し、p 要素でマークアップしたり、改行を br 要素に置換するなど、ただのテキストを入力している分には（たぶん）便利なものですが、不用意に改行すると悲しいことになったり、ともかく、投稿内容をそのまま出してよ！という要求をあっさり無視してくれます。

そこで、このフィルターを処理しないようにするために、remove_filter ('the_content', 'wpautop');などを function.php に記述しておくことで対処可能、のはずだったのですが、なぜかWP2.5 日本語版でうまくいきません。未検証なのですが、どこかで何かが悪さをしていて、removeできないようです。このままでは valid かつクリーンなコードが書けない！

というわけで、根本的に処理を止めてしまえ、というわけで、wp-dir/wp-includes/default-filters.php をいじります。

// 110行目付近
add_filter('the_content', 'wpautop');

add_filter('the_excerpt', 'wpautop');

// 上記２つをコメントアウト
// add_filter('the_content', 'wpautop');

// add_filter('the_excerpt', 'wpautop');

これで投稿内容に wpautop フィルターがかからなくなり、投稿（と抜粋）に入力したテキストが、そのまま使われるようになります。当サイトのように、pre 要素などでコードを多く書くとか、タグは手打ち、と考えている人で、同じように remove filter がうまくいかない、という場合に試してみてください。

WordPress Theme Hack と WordPress Core Hack のエントリーのタイトルを、後で見やすいようにつけかえました。旧来温めてきたネタなので、すでにいくつか採番されていたのをそのまま適用していましたが、ふとこれが並ぶとどれがどれだかわかりにくいな、ということで。

追記：同時にカテゴリ名も、s をつけて複数系にしようと思います。。。

WordPress は様々な動作を、テーマやウィジェットなどに記述することで拡張することができます。ただ、ほんのちょっとのことだったり、こうだと便利なのに！と思う部分を、全部テーマやウィジェットで書き直すのはまず面倒ですし、最終的に全体のパフォーマンスに影響を与えます。

というわけで、新しいウィジェットを書いたり、テーマファイルに特別な記述をしたりするよりも、ほんのちょっとだけコアのプログラムに手を入れて、ほんのちょっとだけ楽したり、自己満足したりするカテゴリーを立ててみました。

第一弾として、多くの人がブログとして使う際に利用しているであろう、タグクラウドの並び順を変更してみます。
ファイルは、wp-dir/wp-includes/widgets.php です。

// 1340行目付近

function wp_widget_tag_cloud($args) {
	extract($args);
	$options = get_option('widget_tag_cloud');
	$title = empty($options['title']) ? __('Tags') : $options['title'];

	echo $before_widget;
	echo $before_title . $title . $after_title;
// wp_tag_cloud 並び順変更（デフォルトは名前の昇順。カウントの降順にする）
//	wp_tag_cloud(); // この行をコメントし、下のようにする
	wp_tag_cloud(array('orderby' => 'count', 'order' => 'DESC'));
	echo $after_widget;
}

上記のように、wp_tag_cloud();を、wp_tag_cloud(array('orderby' => 'count', 'order' => 'DESC'));にすることで、使用頻度(count)の高い順(DESC)に出力させることができます。

function wp_tag_cloud()は、wp-dir/wp-includes/category-template.phpにあって、以下のように書かれています。

// category-template.php function wp_tag_cloud() 内

	$defaults = array(
		'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
		'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC',
		'exclude' => '', 'include' => ''
	);

というわけなので、これは次のように設定できることがわかります。

// 先の wp_tag_cloud()の呼び出し箇所

	wp_tag_cloud(array(
		'smallest' => 8,	// styleで定義されるフォントサイズ（小さい）
		'largest' => 22,	// 同上（最も大きい）
		'unit' => 'pt',		// フォントサイズのユニット（ex:pt,em,px）
		'number' => 45,		// リミッター（SQL の LIMIT 句に使われるので、多くのタグを使う場合増やすこと。）
		'format' => 'flat',	// 出力形式。list（デフォルト） と flat(内部的なデフォルト)が使える。array は未調査。
		'orderby' => 'name',	// ソートキー。name と count(内部的なデフォルト) が使える
		'order' => 'ASC',	// ソート順。DESC（降順） と RAND（ランダム） が使える。ASC（昇順）はデフォルト。
		'exclude' => '',	// 含まないタグＩＤ（未検証）
		'include' => ''		// 含みたいタグＩＤ（未検証）
	);

や、ぶっちゃけ、FC2ブログが同じようにできるらしくて、WPでもできない？って聞かれただけなんですけどね。

注：この情報は、WordPress 2.5 をベースに書かれています。また、WP自体をバージョンアップする場合に、ヘタに上書きしたり、逆に反映し忘れたりしないように、サブバージョン等でのファイル管理をお勧めします。

日本国内の携帯電話３キャリア(ただし3Gのみ)に対応した WordPress Theme 記述の手抜き版。既存の携帯プラグインは多機能なため、自分でテーマを管理できる場合や、要求精度が低い場合には冗長すぎるので、プラグインなしでPC用と同一テンプレートで処理するには？ということで書いてみた。

アウトプットはPC版の文字コードに依存する。ME では検証していない（たぶん問題なく動く）。UTF-8 以外の文字コードで動作確認をしていないが、変更する場合は記述も変えないといけないことに注意。動作確認は、テストサイト漢字読めるかな？（QRから携帯で確認可能）にて行っている。各々の環境で確認してみて、不具合などあれば教えていただけると非常にありがたい。

<?php
	$agent = $_SERVER['HTTP_USER_AGENT'];
	$isPC  = 1;
	if(ereg("^DoCoMo", $agent)){
		header("Content-Type:application/xhtml+xml");
		$isPC  = 0;
		$xml=<<<EOF
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml_4ja_10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
EOF;
	}else if(ereg("^J-PHONE|^Vodafone|^SoftBank", $agent)){
		$isPC  = 0;
		$xml=<<<EOF
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
EOF;
	}else if(ereg("^UP.Browser|^KDDI", $agent)){
		$isPC  = 0;
		$xml=<<<EOF
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
EOF;
	}else{
		$xml=<<<EOF
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
EOF;
	}
	echo $xml;
?>
<head>

中略

<?php if ( $isPC != 1 ){ ?>
<style type=text/css">
<!--
// 携帯用にCSSを記述。利用可能範囲に注意。
//-->
</style>
<?php } ?>

漢字読めるかな？の環境まわりは次のとおり。

• WordPress 日本語版 2.5
• DB は MySQL 5
• 文字コードはUTF-8
• docomo は 705,905 など多数の機種で確認（自前ではないので正確な表示確認はしていない）
• au は W43SA INFOBAR2 などの機種で確認
• SoftBank は、911SH 920T などの機種で確認

WordPress の Theme ファイルのうち、header.php でよく使う書き方を備忘的にメモ。まだ検証途中であり、後々まとめを作成する予定。将来的に汎用的に使いまわせるようにできるといいと思う。

title

<title><?php
    wp_title(' | ',true,'right');
    bloginfo(’name’);
    if(is_home()){
        echo ' | ';
        bloginfo('description');
    }
?></title>

description

<?php if ( $description = get_bloginfo('description') ) { ?><meta name="description" content="<?php bloginfo('description'); ?>" /><?php } ?>

CSS

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/print.css" type="text/css" media="print" />

link (ナビゲーション) home へのリンク用

<?php if (!is_home()) { ?><link rel="start" href="<?php bloginfo('home'); ?>" title="<?php bloginfo('name'); ?> Home" /><?php } ?>

link (ナビゲーション) アーカイブへのリンク用

<?php wp_get_archives('type=monthly&format=link'); ?>

先日購入した、VisiBone の PHP Skinny Sheet が、昨日届きました！

サイトでは ship　って書いてあったので、船で来るんだと思ってたのですが、パッケージには AIRMAIL と書いてある。。。？
ともあれ、ルンルン気分で（表現方法は検討の余地があるな。。。）パッケージを開けてみると出てきたプロダクト。Ａ４サイズのシート上にところ狭しと並べられた関数や言語仕様の説明が、如何に自分が勉強不足かを思い知らされます。全部英語なので（当たり前）解読に時間がかかるかもしれないけど、勉強しなおすいいきっかけになりそうです。

写真右のブックは Browser Book で、２８ページにも及ぶ資料です。

Color Card

最近めっきり聞かなくなりましたが、Web Safe Color のカラーチャートです。大きなポスターやマウスパッドも持ってます。

Fonts

PC,Mac,Linux でサポートされているフォントの見本と、そのサポートの割合（？）なんかを表現しています。残念ながらこれは2004エディションのため、メイリオが乗ってないです。あと Osaka も欲しいところｗ

Characters

記号や特別な文字の実体参照を表すコード表。Netscape で使えないとか、バージョン４未満のUAで使えないなどといった情報と共に簡潔にまとめられています。

Tags

xhtml1.1、html4.01をベースに、タグのアトリビュートをまとめた見開き２ページ。

Styles

CSS2のプロパティ見開き２ページ。個人的にはどのチートシートよりきれいにまとまってると思う。

JavaScript

JScript,ECMAScript,ECMA-262 のチートシート、見開き２ページ×２（４ページ）。

DOM

LeveL 1,2 – JavaScript Document Object Model for web browsers 見開き２ページの DOM チートシート。最近のDOM流行りに乗りたいならこういう基礎のところちゃんとやっとかないとダメだと思うんだよね。

Regular Expressions

JavaScript 用の正規表現チートシート。見開き２ページ。正規表現の細かい差、みたいなのは複数言語を扱う人間からすると、めんどくささの象徴だと思うんだけれども、このシートがあればもう JavaScript では迷わないと思うｗ

Legend

要は凡例ページ。これだけたくさんの情報が紙面いっぱいにあるのに、混乱しないで済むのはこのページのおかげ。

MySQL CARD 1

裏表２ページの MySQL Statements カード。MySQL で利用できるSQL文の構文集。オラクルのマニュアルを見たことがある人にはかなりわかりやすいシート。

MySQL CARD 2

裏表２ページの MySQL Functions カード。MySQL で利用できる Function の紹介。正直使ったことのない Function がたくさん載ってます。（もちろん中規模以上のシステム開発ではよほどの事情がないかぎり専用関数の利用は極力避けるべきだと思うけど。）ちなみに、どちらもアルファベット順に並んでいて、結構見やすい。

PHP Big Book

今回の目玉ｗ PHP 4,5 の言語仕様、関数、構文等々をまとめた８ページ。まだ全然読みきれてないけど、わかってるところとそうじゃないところを切り分けるのにもってこいだと思う。よく整理されてるし。

さーて、このＧＷはこの２つにかかりっきりになりそうです。

しゃれでスポンサー枠にＱＲを貼って、細々と毎日難読漢字を出題している、漢字読めるかな？ですが、モバイル コンテンツ向け　AdSenseがイメージ広告に対応しましたということなので、早速対応してみました。

漢字読めるかな？は、管理人がMTからWPに乗り換えた際の実験用として、また、プラグイン導入やテーマの記述テストなどのために作ったしゃれコンテンツなのですが、一応WPの未来日投稿（将来時刻で公開する）で、毎朝６時に難読漢字を紹介し続けています。なんら問い合わせを受け付けないスタンスなので、表示だけ、という条件で携帯CSS対応も全て統一したテンプレートでまかなうという暴挙もやっていますｗ

というわけで、ヘルプによると、最大４８時間以内にイメージ広告の配信が始まるようなので、土曜の朝までにはイメージ広告が出稿される、はず？なので、ぜひ注目して見ててください！（なんで？ｗ

あ、一応補足しておくと、サイドバーのところにあるＱＲコードがソレで、一応パソコンからでも各携帯からでも見れるようになってます。今回の対応は、モバイルコンテンツ向けアドセンスなので、ＱＲから辿って携帯で見てくださいね。そしてついでにしゃれでブックマークに。。。ｗ

WordPress 2.5 でも使えるコンタクトフォームプラグインは数多くありますが、当サイトでは、Contact Form 7 Plugin を使わせていただくことにしました。

比較的わかりやすい設定ですし、デフォルトでもそこそこ使えるので重宝しているわけですが、どうしてもメール本文中に、送信日時や、送信者のUA情報などを含めたいと考えました。しかし、上記ページ中のコメント欄にあるとおり、デフォルトの機能の中にはそういった機能はついていません。

というわけで、ちょっとだけいじってみたところ、とりあえずうまくいったので公開してみます。あくまでこのプラグインを使いつつ、どうしても利用者情報が欲しいという場合の応急処置であること、利用に関しては自己責任、ということでお願いします。また、この情報は2008年4月20日現在の最新版である、7.1.7.7 を対象にしています。

    function mail_callback($matches) {
        if (isset($_POST[$matches[1]])) {
            $submitted = $_POST[$matches[1]];
            if (is_array($submitted))
                $submitted = join(', ', $submitted);
            return stripslashes($submitted);
        } else {
            return $matches[0];
        }
    }

wp-contact-form-7.php の160行目付近の上記 function を、下記のように修正します。

    function mail_callback($matches) {
        if (isset($_POST[$matches[1]])) {
            $submitted = $_POST[$matches[1]];
            if (is_array($submitted))
                $submitted = join(', ', $submitted);
            return stripslashes($submitted);
        } else {
// メール送信時に定数（っぽいもの）を追加
            if ( $matches[1] === 'WPCF7_SEND_DATE'){return date("Y/m/d G:i:s T");}
            if ( $matches[1] === 'WPCF7_SEND_UA')  {return $_SERVER['HTTP_USER_AGENT'];}
            if ( $matches[1] === 'WPCF7_SEND_HOST'){return $_SERVER["REMOTE_HOST"] ? $_SERVER["REMOTE_HOST"] : $_SERVER["REMOTE_ADDR"];}
            return $matches[0];
        }
    }

これにより、管理画面でメールのメッセージ本文のテキストエリアに、[WPCF7_SEND_DATE]、[WPCF7_SEND_UA]、[WPCF7_SEND_HOST]を加えることで、メールの本文中にそれぞれ、送信日時、ユーザーエージェント（ブラウザ）、送信元ホスト情報（サーバ名かIPアドレス）を出力することが可能になります。実際にはUSER_AGENTの出力には少し気を使ったほうがいいはずですが、お問い合わせという性質上、とりあえずこれで問題ないと思います（基本的に受け取るのは自分だけでしょ？）。もしセキュリティ的にこうしたほうが安全だ、というのがあれば教えていただけたら幸いです。

作者の方には特にコンタクトしないままいじってしまったのですが、とりあえず勝手処理、ということで。くれぐれもこの修正で生じた問題などで作者の方にご迷惑をおかけしないようにお願いします。

注意（よく読んでください）

• 本当に、作者の方に迷惑かけるのだけは止めてください。
• 自分の作業メモなので、これについてのサポートは勘弁してください。
• メッセージ本文でしかテストしていませんｗ　タイトル欄やメールアドレスのところにこれらを設定することはないと思いますが、もし設定して何かよくないことが発生しても自己責任でお願いします（たぶんメールが送れないとかそういう目にあいます）。
• 定数名の WPCF7 部分を、適宜書き換えて使ってください。単にメール送信直前の処理で、値を置き換えているに過ぎません。もしハッキング目的でコレを悪用しようと思えば、例えば POST データに対して、この定数名でデータを送り込まれた場合、そのデータが優先されてしまいます（一応処理速度と自己設定優先で後ろに置いているので）。この意味がわからない場合は、この修正を行わないほうが無難です。

ついでだから利用者情報を取得したい主な理由とか書いておこうかな（コメント6093へのレスじゃないけどｗ）

• 入力されたメッセージ以外にも、情報を整形してコピーを送信者に返す場合に、送信日時は必要
• 受信したメールを元にやり取りを始める場合、受け取るメーラの種類によっては返信時に元の投稿日時を引き継がないものがある（なので日時が入ってると便利）
• UA情報を追加することで、単なる閲覧利用者ではなく、問い合わせをしてくれる利用者のUAの傾向を把握しやすくなる。それによりサイトのデザインやそのチェックの方向性を定めやすくなる
• 送信元ホスト情報は（たとえ気休めでも）セキュリティ向上に一役買う。また、いざという時に、IP-BANしやすくなる。
• まぁ、ぶっちゃけ友人に問い合わせのメールにそういうデータ入れたいんだけど、って言われちゃっただけなんだけどねｗ

懐かしいサイトから久しぶりのアナウンスがありました。The VisiBone PHP Skinny Sheet の発売のお知らせです。

Visibone はもう何年も前から素敵なプロダクトを提供していて、うちにもいくつかのプロダクトがあります（写真参照）。今回は、php のシートのお知らせだったわけですが、現在のメインの作業がphpなこと、このサイトもWordPress(つまり php & MySQL )で動いていることなどから、躊躇なくお買い上げしてしまいましたｗ　だって、A4サイズの両面印刷、ラミネート加工の上に、php4 と php5 の違いを色つきで表示、様々なトピックまでついて $10 とは！もう買うしかないじゃないか。ジャマイカ。

さらに、メインの作業でも MySQL を使っているので、今回は奮発して、Skinny Sheet の他に、同ページの下のほうにある、Browser Book, PHP Big Book, MySQL のフルセット、ラミネート加工版（$90）もあわせてお買い上げｗ　都合 $100 我ながら苦笑が止まりません。大丈夫か、俺。。。

それはさておき、デザインも素敵で実用的なこのプロダクト。Office L では自信を持って技術者の皆さんにお勧めします！

以下余談。。。
以前（もう６年くらい前と１０年くらい前？）、写真のプロダクトを買った時に、管理人さん(Mr.Bob Stein)とひーひー言いながら翻訳ソフトを駆使してメールのやり取りをした時、Perl のSheet を作ってくれって話をしていて、がんばって作るよ！ってなことを言ってたんだけど、まだ出てこない。。。もう Perl 6 がいつでるかいつでるかって感じなのになぁ。

我が家にあるプロダクトの一部。この他にも HTML のブックや他のマウスパッドなども。