http://officel.biz Webに何をお求めですか？ Sun, 11 May 2008 05:43:23 +0000 http://backend.userland.com/rss092 en 世界のナベアツ（リンク先は 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 ... http://officel.biz/php/world-of-nabeazz-php-xhtml-css.htm 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 がうまくいかない、という場合に試してみてください。 http://officel.biz/wordpress/wordpress-core-hacks-vol02.htm WordPress Theme Hack と WordPress Core Hack のエントリーのタイトルを、後で見やすいようにつけかえました。旧来温めてきたネタなので、すでにいくつか採番されていたのをそのまま適用していましたが、ふとこれが並ぶとどれがどれだかわかりにくいな、ということで。 追記：同時にカテゴリ名も、s をつけて複数系にしようと思います。。。 http://officel.biz/infomation/change-title.htm 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', ... http://officel.biz/wordpress/wordpress-core-hacks-vol01.htm 日本国内の携帯電話３キャリア(ただし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 ... http://officel.biz/wordpress/wordpress-theme-hack-on-headerphp-vol02.htm 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 ... http://officel.biz/wordpress/wordpress-theme-hack-on-headerphp-vol01.htm 先日購入した、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 ... http://officel.biz/recommend/welcome-the-visibone-php-skinny-sheet.htm しゃれでスポンサー枠にＱＲを貼って、細々と毎日難読漢字を出題している、漢字読めるかな？ですが、モバイル コンテンツ向け　AdSenseがイメージ広告に対応しましたということなので、早速対応してみました。 漢字読めるかな？は、管理人がMTからWPに乗り換えた際の実験用として、また、プラグイン導入やテーマの記述テストなどのために作ったしゃれコンテンツなのですが、一応WPの未来日投稿（将来時刻で公開する）で、毎朝６時に難読漢字を紹介し続けています。なんら問い合わせを受け付けないスタンスなので、表示だけ、という条件で携帯CSS対応も全て統一したテンプレートでまかなうという暴挙もやっていますｗ というわけで、ヘルプによると、最大４８時間以内にイメージ広告の配信が始まるようなので、土曜の朝までにはイメージ広告が出稿される、はず？なので、ぜひ注目して見ててください！（なんで？ｗ あ、一応補足しておくと、サイドバーのところにあるＱＲコードがソレで、一応パソコンからでも各携帯からでも見れるようになってます。今回の対応は、モバイルコンテンツ向けアドセンスなので、ＱＲから辿って携帯で見てくださいね。そしてついでにしゃれでブックマークに。。。ｗ http://officel.biz/test/google-adsense-mobile.htm 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 ... http://officel.biz/wordpress/wp-contact-form-7-add-const.htm 懐かしいサイトから久しぶりのアナウンスがありました。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 のブックや他のマウスパッドなども。 http://officel.biz/recommend/the-visibone-php-skinny-sheet.htm