Under Construction, Baby http://www.rcdtokyo.com/ucb/ ja Copyright 2011 Fri, 02 Oct 2009 17:05:16 +0900 http://www.sixapart.com/movabletype/ http://blogs.law.harvard.edu/tech/rss OpenSocialの入門記事を『システム開発ジャーナル』vol. 11に執筆しました 毎日コミュニケーションズ発行のシステム開発ジャーナル vol. 11の特集記事『OpenSocial Web & モバイル開発入門』を執筆しました。全7章、56ページに及ぶ特集で、mixiアプリを中心にOpenSocialアプリを精力的に開発されている空飛ぶの赤星琢哉さんと、mixiに先駆けて日本で初めてモバイル版のOpenSocialプラットフォームをスタートさせたgumiの酒徳千尋さんとの共同執筆です。これからOpenSocial/mixiアプリの開発を始めてみようかというかたにお読みいただければ幸いです。

システム開発ジャーナル Vol.11
システム開発ジャーナル Vol.11
posted with amazlet at 09.10.02
システム開発ジャーナル編集部
毎日コミュニケーションズ
売り上げランキング: 52343
Amazon.co.jp で詳細を見る
]]> http://www.rcdtokyo.com/ucb/contents/i000866.php http://www.rcdtokyo.com/ucb/contents/i000866.php ウェブ制作 Fri, 02 Oct 2009 17:05:16 +0900 iPhoneとViewPortとXHTML Mobile DOCTYPEと.mobiドメイン <meta name="viewport" content="width=device-width"/> このcontent属性の値を「width=240」にすれば240ピクセル幅で描画され、カンマ区切りで「user-scalable=no」を追加すれば、ピンチイン/アウトなどのユーザ操作による表示の拡大縮小もできなくなる。 さてそれで、ここからが本題。 開発中のとあるサイトにiPhoneでアクセスさせてもらったところ、すべてのページがもれなく320ピクセル幅で描画されていた。このサイトのターゲットは携帯電話だけというわけではないそうなのだけど、今のところは携帯電話での利用が主なので、デザインもケータイサイト風だ。それでも320ピクセル幅で描画されるということは、iPhoneでのアクセスも想定してViewPort指定を書いてるのだろうと思ったら、開発者に聞いてみたところ、そんなものは書いてないと言う。確かにHTMLソースを眺めてみても、そんなものは書かれていない。それなのに320ピクセル幅で表示される。 これは不思議だなと思ってたのだけど、たまたま別件でググってたら回答を見つけた。 以下は、Apple Developer Connection - Web Apps Dev Center - Designing Contentの、“Web標準および実証済みのデザインプラクティスを使用する”より。

注：iPhone版Safariでは、プロキシにおいても、クライアント上でも、コードの変換は一切行いません。ページは設計されたとおりにレンダリングされます。また、WML（ワイヤレスマークアップ言語）もレンダリングされません。XHTML mobileプロファイルの文書タイプおよび.mobiドメインのサイトはサポートされています。

重要なのは最後の一文。これだけではなんのことなのか、なにが「サポートされて」いるのかよくわからないのだけど、これを目にして、例のサイトが.mobiドメインでホストされていることを思い出した。 また、jQueryの開発者として知られるJohn Resigさんの、iPhone Tech Talkと題された2007年のブログ記事には、Boston iPhone Tech Talkで聞いた話として、以下が記されている。こっちはもうちょっとわかりやすい。

Pages that are marked up with XHTML Mobile or are on a .mobi domain are handled specially (they're shown unmodified - assuming that the developer has already optimized the page for a mobile device appropriately).

あいにく.mobiドメインは持ち合わせてないので、「XHTML mobileプロファイルの文書タイプ」のほうを試してみることにした。XHTML Mobile ProfileのDOCTYPE宣言を記述したHTMLにiPhoneでアクセスしてみる。結果は案の定320ピクセル幅で描画され、一方それ以外のDOCTYPEのものは980ピクセル幅で描画された。 おそらく.mobiドメインのページも、これと同様の扱いを受けるのだろう。例のサイトのDOCTYPEはXHTML Transitionalだったので、このサイトの描画が、DOCTYPEではなくドメインによって決定されているのは間違いない。また、どうやらDOCTYPEよりもドメインのほうが優先されるらしい。 上のものとは別のアップルのページ、Safari Web Content Guide: Creating Compatible Web Contentには、上と同じ記述に続けて、XHTML Mobile ProfileのDOCTYPE宣言として以下が掲載されている。 
<!DOCTYPE html PUBLIC
  "-//WAPFORUM//DTD XHTML Mobile 1.1//EN"
  "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
XHTML Mobile ProfileのDOCTYPE宣言は何度か変更になっているのだけど、上の通りでなければいけないかというと、少なくともDTDのURIは、この動作には無関係のようで、これの有無で表示が変わることはなかった。 GoogleモバイルにはViewPortが書かれているものと書かれていないものがあり、それでもMobile Safariで一律320ピクセル幅で描画されるのは、すべてのページでDOCTYPE宣言がXHTML Mobile Profileで統一されているからなのだということにも合点がいったのだけど、そのGoogleモバイルのDOCTYPE宣言では、DTDのURIはwapforum.orgドメインのものになっている。もちろんこれでも、Mobile Safariの動作には影響はない。 ちなみにドコモのi-XHTMLのDOCTYPE宣言はダメだった（笑） そもそも諸外国では、モバイルサイトのDOCTYPE宣言は（WMLでなければ）XHTML Mobile Profileが当たり前に選択される。一方この国では、XHTML Mobile ProfileのDOCTYPEを提示しているのはauだけで、ドコモもソフトバンクも独自のDOCTYPEを推奨している。しかもいずれも、実際はDOCTYPEなど関知していないので、どのようなDOCTYPEを出力しても、表示にはまったく影響がない。それでも日本のケータイサイトの多くは、クライアントに応じてDOCTYPEの出力を切り分けていて、iPhoneからのアクセスは、スタンダードのウェブブラウザと同等に扱われ、HTML/XHTMLのDOCTYPEが出力されている。 ということで、もしあなたがケータイサイトのオペレーションに関わっていて、そのサイトがiPhoneでアクセスされても問題ないものなら、以下のいずれかを採用することで、iPhoneでも本来のように（980ピクセル幅で描画されないように）表示させることができます。
  • ViewPortを記述する
  • DOCTYPE宣言にXHTML Mobile Profileのものを採用する
  • .mobiドメインでホストする
逆に.mobiドメインのサイトで、iPhoneで320ピクセル幅以外で描画させたい場合はViewPortを記述する必要があります。例えばiPhoneやPCのウェブブラウザに対して、「ケータイでアクセスしてね」的なページを表示させる場合に、ViewPortがないと、.mobiドメインのサイトのページは、iPhoneでは320ピクセル幅で表示されてしまうので、それに収まるデザインならばいいけど、そうでなければこれは必須ですね。]]> http://www.rcdtokyo.com/ucb/contents/i000865.php http://www.rcdtokyo.com/ucb/contents/i000865.php ウェブ制作 Wed, 24 Jun 2009 00:42:27 +0900 iモードブラウザ2.0でAcid2テスト 以下は、iモードブラウザ2.0対応の、iモードHTMLシミュレータIIバージョン 8.2が公開されたので、Acid2テストを表示してみた図。

acid2

CSSソースがダラダラ表示され、肝心のスマイリーはまったく描画されなかった従来よりは、一歩前進ではないかと、無理やり前向きに評価してる。

Acid3はさすがに略。

参考までに、以下はiPhone実機のMobile Safariで、同じAcid2テストを表示してみた図。

acid2-iphone
]]> http://www.rcdtokyo.com/ucb/contents/i000863.php http://www.rcdtokyo.com/ucb/contents/i000863.php ウェブ制作 Wed, 20 May 2009 00:00:00 +0900 駒沢公園 横河武蔵野FC vs. 佐川印刷

自分にとって駒沢公園といえば春で、なぜかというと単純に、ここを訪れる機会の多くが春だからで、なぜかというとこの季節には横川武蔵野FCがここで試合を開催することが多いから。

というわけで横川武蔵野の今期の開幕戦も駒沢でした。また蹴球の季節が始まったわけです。さて、今年はどんな年になりますやら。

写真は今年のものではなく、お蔵入りになってた2年前のもので、陸上競技場の正面広場で開催されていたイベント会場の風景。

]]> http://www.rcdtokyo.com/ucb/contents/i000862.php http://www.rcdtokyo.com/ucb/contents/i000862.php いろんな風景 Mon, 16 Mar 2009 23:20:17 +0900 AtomでのMobile Link Discovery ふとシックスアパートのMobile Link Discoveryを眺めていて、そういえばAtomのところにある、x:media の名前空間については現在 Atom Working Group への提出を検討していますという話はどうなったんだろうと思った。

HTMLのものは新たな属性を提案しているわけではないので問題ない。しかしatom:linkにはmedia属性なんてないわけで、何らか新たな定義がない限り使えない。

で、ググってみると確かにドラフト仕様はあった。

Atom Syndication Format Link Extensions

4.1. The 'media' Attribute

The 'media' attribute MAY be used to identify the types of devices for which a resource referenced by an atom:link or atom:content (using the src attribute) has been targeted.

でも2006年1月のものが最後の版で、それも2006年7月に有効期限切れになってる。

案の定おんなじように思ってるひともいた。

Atom Linking Extensions

結局この話はなかったということでFAなのかなー？

  • シックスアパートのページに書かれてるまんま「x:media="handheld"」と書いちゃってるフィードも見受けられるけど、それはないわ。
  • シックスアパートのページでは、RSS 2.0の例ではXHTMLを組み込んで済ませてる。これはもちろん仕様的にはOKなんだけど、キモい。RSS 2.0はそもそもの仕様がアレなのでしょうがないかもしれないけど、Atomでこれはやりたくないなー。
]]> http://www.rcdtokyo.com/ucb/contents/i000861.php http://www.rcdtokyo.com/ucb/contents/i000861.php ウェブ制作 Thu, 05 Mar 2009 22:25:36 +0900 Gears余談 ラボブログ書いた。 なんで唐突にGearsなのかというと、ラボブではdelってるけどマジでコードレビューのときに、他になんにもネタがなかったから。 そういえば最初はActiveRecord.jsネタにしようかと思ったんだだけど、そうなるとGearsだけじゃなく、AirもHTML5も相手にしなきゃいけなくて、めんどくせーのでGearsにしたんだったけか。 寝惚けながら書いてたのでドキュメントちゃんと読んでなかったんだけど、WorkerPoolのやり取りは文字列オンリーじゃなくなってたのね。リリースした後でドキュメント読み返したらdeprecatedって書いてあって、慌てて直したさ。 しかしそうするとworkerPool.onmessegeの最初の2ヶのパラメータは無意味なわけで（なので、ドキュメントに掲載されてるサンプルも「function(a, b, message)」と、最初の2ヶはどうでもいい名前が振られてる、というかこのコード見てなんだこりゃ？と思って気付いたのでした）。もともとのパラメータいきなりobsoletedにするわけにいかないからしょうがないとは思うんだけど、おかげでここかなりキモいっす。 あとSQLiteは「id integer PRIMARY KEY」と書けばいわゆるauto incrementなカラムが出来るわけですが、「integer」じゃなくて「int」って書くと駄目なのねん。はい書きましたよ、ハマりましたよ。database.lastInsertRowIdはちゃんとID返すのに、なんでプライマリーのカラムがNULLやねん！？と（笑）]]> http://www.rcdtokyo.com/ucb/contents/i000859.php http://www.rcdtokyo.com/ucb/contents/i000859.php ウェブ制作 Fri, 27 Feb 2009 20:57:28 +0900 Atom 1.0 リファレンス RFC4287の原文と日本語翻訳＋構造図で、インタラクティブに参照するAtom（Syndication Format）の仕様。

» Atom 1.0 リファレンス

Atom 1.0 リファレンス
  • デフォでは図のように、左側に構造図を、右側にRFC仕様を表示します。左上の「仕様の全文を表示」リンクをクリックすると、仕様の全文をダラダラと表示します。
  • 構造図モードでは、クリックした箇所に応じた仕様のセクションを右側に表示します。右上の「戻る」と「進む」はブラウザのボタンと同じイメージ。
  • 構造図中で名前の後ろに「?」と「*」がある要素や属性はオプションです（記号がないものは必須）。「?」はその場所に1個だけ、「*」は複数登場できます。ただしこれは原則で、オプションであっても条件次第で必須となるとか、あれこれ例外があるので要注意。例えばatom:authorはオプションですが、ドキュメントのどこかに少なくとも1個はないとダメです。あるいは例えば、atom:contentのないatom:entryには<link rel="alternate" href="～">が必須です。詳細は仕様を熟読してください（主なルールは仕様のセクション4.1.1と4.1.2にまとめられています）。
  • 構造図中で「atomCommonAttributes」となっているブロックは、その中の属性がAtomの共通属性（仕様のセクション2）であることを表しています。決して<atomCommonAttributes xml:lang="ja"/>とか書けという意味ではありません（笑）。同様に「atomなんとかConstruct」となっているブロックは、共通の構造体（仕様のセクション3）です。
  • RFC仕様の記述に合わせて、Atomの要素はすべて「atom」という接頭辞を付けて表記してますが、通常Atomの要素はデフォルトの名前空間に属することになる筈で、その場合接頭辞はもちろん不要です。

以下は余談。

最初はRSS 0.9x/2.0とRSS 1.0とAtomとの簡単な比較表を作ろうと思ってたのでした（そして、RSS 1.0やAtomの仕様は、杜撰な鷹揚なRSS 0.9x/2.0のそれと比べて厳格なので、各フォーマットを共通のデータソースから生成しようとする場合には、データソースの準備は厳格な側に合わせてやらないとワヤになりまっせ、という講釈を垂れようとしていた）。

で、しかしRFC4287を眺めてたら、Relax NG（のコンパクト構文）スキーマによるストラクチャー表現を、ブロック図に置き換えて操作できるようにしたら面白いかもと思い立ち（この時点で比較表を作ろうという当初の目的は潰える）。しかし要素を並べただけではアレなので説明を加えるにしても、RFC原文のコピペだけでは不親切かなということで、ついでに日本語訳も用意してみた次第。

既存のRFC4287の日本語翻訳

]]> http://www.rcdtokyo.com/ucb/contents/i000857.php http://www.rcdtokyo.com/ucb/contents/i000857.php ウェブ制作 Thu, 03 Apr 2008 00:49:38 +0900 iMenuのGoogle検索がいきなりおかしなことになってる件 Googleモバイルで「プロフィール」や「プロフ」を検索すれば、1位は前略プロフだろうと思うのは素人。

http://www.google.co.jp/imode/search?ie=Shift_JIS&mrestrict=chtml&site=mobile&q=%83v%83%8D%83t%83B%81%5B%83%8B

確かに、PCで普通に検索してみれば、少なくとも本日ただ今現在の1位は前略プロフで、そのPCで、Googleモバイルで「プロフィール」を検索する上のアドレスを開けば、本日ただ今現在の結果は以下のような感じで、やはり前略プロフが1位。

  1. 前略ﾌﾟﾛﾌｨｰﾙ
    『前略ﾌﾟﾛﾌｨｰﾙ』は､誰でも手軽に携帯電話･ﾊﾟｿｺﾝの両方に対応した､自己 ...
    pr.cgiboy.com/
  2. FC2ﾌﾟﾛﾌ - あなた専用のﾌﾟﾛﾌｨｰﾙを作ってみよう!!
    あなた専用のﾌﾟﾛﾌｨｰﾙが簡単に作れちゃう!!ﾌﾟﾛﾌｨｰﾙを作ってみよう!!
    pr.fc2.com/
  3. Amazon.co.jp: ﾌﾟﾛﾌｨｰﾙ: ﾃﾞｭｰｸ･ﾋﾟｱｿﾝ,ｼﾞｰﾝ･ﾃｲﾗｰ ...
    Amazon.co.jp: ﾌﾟﾛﾌｨｰﾙ: ﾃﾞｭｰｸ･ﾋﾟｱｿﾝ,ｼﾞｰﾝ･ﾃｲﾗｰ, ...
    www.amazon.co.jp/ﾌﾟﾛﾌｨｰﾙ-ﾃﾞｭｰｸ･ﾋﾟｱｿﾝ/d...
  4. 佐野夏芽ﾌﾟﾛﾌｨｰﾙ
    ﾀﾚﾝﾄﾌﾟﾛﾌｨｰﾙ ・ ﾌｫﾄﾀﾞｲｱﾘｰ ・ ﾀﾚﾝﾄ募集 ・ ﾒｰﾙﾏｶﾞｼﾞﾝ登録 ...
    www.metalbox.co.jp/work/sano/pcolum...
  5. みんなのﾌﾟﾛﾌｨｰﾙ
    みんなのﾌﾟﾛﾌｨｰﾙ 名前をｸﾘｯｸするとﾌﾟﾛﾌｨｰﾙを閲覧できます｡ ...
    www.yukinosake.com/cgi-bin/profile/...

しかし、少なくとも本日ただ今現在、「PREF」という名称のcookieを削除してから上記のモバイル版のアドレスを開いてみると、以下のようにまったく違う結果が表示される。1位は関西のデリヘル。ちなみにこのcookieがない状態で100位（10ページ）まで検索しても、前略プロフは出てこない（以下にもあるような、前略を騙るサイトは出てくる）。

  1. 大阪･兵庫･京都･奈良･和歌山巨乳ﾛﾘ･ｷﾞｬﾙ系専門ﾃﾞﾘﾊﾞﾘｰﾍﾙｽ ...
    ﾌﾟﾛﾌｨｰﾙ南大阪 ・ ﾌﾟﾛﾌｨｰﾙ京都 ・ ﾌﾟﾛﾌｨｰﾙ兵庫 ・ ﾌﾟﾛﾌｨｰﾙ奈良 ・ ﾌﾟﾛﾌｨｰﾙ和歌山 ...
    www.pro-file.jp/m/
  2. 携帯(ｹｰﾀｲ)無料ﾌﾟﾛﾌ作成ﾌﾘｰｻｲﾄ｢My･ぷろふぃｰる｣
    完全無料でﾏｲﾌﾟﾛﾌｨｰﾙ交換画面を作成できる携帯電話専用ﾌﾟﾛﾌ提供ﾌﾘｰ ...
    vl-o-l.jp/
  3. ﾌﾟﾛﾌｨｰﾙ
    ﾌﾟﾛﾌｨｰﾙ. 名前:すぬｰぴｰ. 種別:ﾋﾞｰｸﾞﾙ犬の. ぬいぐるみ. 年齢:不明 ...
    penguinmaru.fc2web.com/i/profile.html
  4. 前略ﾌﾟﾛﾌｨｰﾙ by aimew
    ﾌﾟﾛﾌｶﾞｲﾄﾞは数あるﾌﾟﾛﾌｨｰﾙｻｲﾄを厳選してご紹介!もちろんﾌﾟﾛﾌを通じて新しい ...
    aimew.jp/zennryaku/
  5. 前略ﾌﾟﾛﾌｨｰﾙ by aimew
    JC､JKに人気のあるﾌﾟﾛﾌｨｰﾙｻｲﾄ♪. 前略出会い系 ...
    aimew.jp/zennryakud/
  6. 携帯無料ﾌﾟﾛﾌ作成 ﾁｪｷ!ﾌﾟﾛﾌｨｰﾙ
    ﾁｪｷ!ﾌﾟﾛﾌｨｰﾙでは簡単☆無料でﾌﾟﾛﾌｨｰﾙｻｲﾄを作成できます!
    chpr.jp/
  7. ﾌﾟｯﾁｷﾞｬﾙ
    女の子ｺﾒﾝﾄ:いちゃx2楽しい時間を過ごしましょうねぇ(*^^)v ...
    www.kobe-pucchigal.com/m/gal/k-view...
  8. 京都ﾃﾞﾘﾍﾙ/ﾌﾟｯﾁｷﾞｬﾙ
    ｷｬｯﾁｺﾋﾟｰ:☆京都に渋谷系GAL誕生☆ﾄﾞｴﾛEｶｯﾌﾟに大興奮! ...
    www.kyoto-pucchigal.com/m/gal/k-vie...

さて、cookieの有無で検索結果が変わるということは、cookieを喰わないドコモの端末ではどうなるかというと、もちろん上と同じ、1位がデリヘルという結果になる。

で、ドコモは4月1日からiMenuのトップ画面にGoogleと連携した検索機能を追加し、Googleの検索エンジンにより、携帯電話向け一般サイト、PCサイトの検索結果も表示されるようになったのだけど、そのiMenuの検索フォームから「プロフィール」を検索してみた結果が以下。

  1. 携帯(ｹｰﾀｲ)無料ﾌﾟﾛﾌ作成ﾌﾘｰｻｲﾄ｢My･ぷろふぃｰる｣
    完全無料でﾏｲﾌﾟﾛﾌｨｰﾙ交換画面を作成できる携帯電話専用ﾌﾟﾛﾌ提供ﾌﾘｰ ...
    vl-o-l.jp/
  2. ﾌﾟﾛﾌｨｰﾙ
    ﾌﾟﾛﾌｨｰﾙ. 名前:すぬｰぴｰ. 種別:ﾋﾞｰｸﾞﾙ犬の. ぬいぐるみ. 年齢:不明 ...
    penguinmaru.fc2web.com/i/profile.html
  3. 前略ﾌﾟﾛﾌｨｰﾙ by aimew
    JC､JKに人気のあるﾌﾟﾛﾌｨｰﾙｻｲﾄ♪. 前略出会い系 ...
    aimew.jp/zennryakud/
  4. 京都ﾃﾞﾘﾍﾙ/ﾌﾟｯﾁｷﾞｬﾙ
    ｷｬｯﾁｺﾋﾟｰ:☆京都に渋谷系GAL誕生☆ﾄﾞｴﾛEｶｯﾌﾟに大興奮! ...
    www.kyoto-pucchigal.com/m/gal/k-vie...

一瞥して明らかなように、これは上の、通常のGoogleモバイルでの結果のサブセット。1位のデリヘルが消えているのは、おそらくドコモなりのフィルターで、「有害」と判定されているサイトが除去されてるためではないかと思われ。

しかし京都のデリヘルは見事このフィルターをくぐり抜け4位に躍進！（4位だとiMenu検索の1ページ目に表示されるので、それ以下とは雲泥の差）なんという脅威のSEO！（違）

………とまあ、そんなこんなで。これはたまたま出くわした極端な例ですが、別にこの例に限らず、ドコモ端末でGoogleモバイルを利用すると、検索結果がなんだかおかしなことになってる模様です、というお話ですた。

]]> http://www.rcdtokyo.com/ucb/contents/i000856.php http://www.rcdtokyo.com/ucb/contents/i000856.php ウェブ制作 Wed, 02 Apr 2008 23:41:23 +0900 opm.blitzed.org is pointing at a blackholed nameserver MovableTypeの管理画面にあるSixApartからの告知に、【重要】コメント投稿に時間がかかる現象についてと出ていて、なにかと思ったら、opm.blitzed.orgが停止したので、バンドルされているSpamLookupプラグインの、DNSBLサーバの設定がデフォルトのままだとヤバイですよ、というハナシで。

いや、ちょっと待てと。OPMが停止したのは一年も前なわけで。それを今頃になって告知かと。OPM statusによると、今年の5月にopm.blitzed.org is pointing at a blackholed nameserverということになったそうで、そのため告知にあるような事態が生じるようになって問題が顕在化したらしい。

で、なんでブラックホールリストのサーバがブラックホール行きになったかというと、in order to reduce query load on our serversだそうで。なんで未だにそんな状態かというと、多くのMTユーザが（もちろんMTだけじゃないだろうけど）OPMの停止を知らずに、デフォルトで設定されているサーバをそのまま使い続けていたであろうからで。なんでそんなことになってるかというと、誰かに言われない限り、普通はDNSBLサーバが停まってるなんてことには気付かないよな、と（ましてデフォルトで設定されてるものだし）。

多くのDNSBLサービスはボランティアな運営なわけで、いつなくなっても不思議ではなく。そもそもDNSBLは、ボットネットの拡大によって以前ほど効果的ではなくなっており、ORDB.orgのようにこれを理由に閉鎖してしまった例もあり。あるいはzen.spamhaus.orgのように、新たなサーバが用意され以前のもののリプレイスが推奨される場合もあり。斯様な状況でDNSBLを利用する場合は、利用するサーバの状況を定期的に確認して設定を見直す必要があるわけですが、それをすべてのユーザにやれというのも無茶なハナシで。しかしMTには折角管理画面に告知コーナーがあるのだから、早期に告知がされていればユーザもSixApartも、そしてBlitzed.orgも無用のトラブルを抱えずに済んだのになあ、と。

………と、OPMの死亡告知を死亡から半年後に出したヤツが、自分のことは棚にあげて自戒の念を込めて申し上げてみるテストでございました。合掌。

以下はMTのハナシではないけれど、DNSBLネタが少々。

]]> http://www.rcdtokyo.com/ucb/contents/i000853.php http://www.rcdtokyo.com/ucb/contents/i000853.php ウェブ制作 Fri, 01 Jun 2007 23:59:04 +0900 Firefox 2/IE7用、OpenSearch検索プラグイン（検索プロバイダ）作成ツール 検索バー

Firefox 2やInternet Explorer 7などの検索バーに検索サイトを追加するOpenSearch形式のプラグインを、極力簡単に作れるようにしてみました、というものです。要Cookie＋JavaScript。実は随分前に作って、しかし腑に落ちないまま放置していたものを引っ張り出してきて、全面改装。

» OpenSearch検索プラグイン（検索プロバイダ）作成ツール

ものは試し。上のリンク先で、ページの右側の「ブックマークレット」欄にある、「検索プラグインの作成」というリンクを、マウスの右クリックとかでブックマーク（お気に入り）やツールバーに登録してみてくださいな。

で、例えばGoogleとかで、「TEST」を検索した結果のページでそのブックマークレットを選択してみてください。下図のような表示が出てきたら正解。以上の操作がメンドクセーひとはここをクリック（笑）。

OpenSearch検索プラグイン（検索プロバイダ）作成ツール

「検索プラグインを追加」ボタンをクリックすると、確認ダイアログが表示され、プラグインを追加できるわけですが、お気に召さない項目があれば適宜編集していただければと存じます。各項目の説明は、その入力欄をクリックすると説明が出てくる筈。編集後には「確認・更新」ボタンをクリックしてください。

「名前」は、ウェブブラウザはこれでプラグインを管理してるので、既に登録済みのプラグインと同じ名前は付けられません。

「アイコン」は、Firefox 2の検索バーに表示されるものです（IE7では利用されません）。アイコンはウェブサイトのFaviconを自動検出しますが、Faviconがないサイトや、自分好みのアイコンを使いたい場合は、画像をアップロードすることもできます。画像がJPEGやGIF、PNGなら、自動的に画像の中央部を切り出してアイコンサイズに縮小するので、あらかじめアイコンサイズの画像を用意しておく必要もありません。

なお、ここで検索プラグインを作成できるのは、GETメソッドの検索フォームのみです。つまり、検索結果のページのアドレスに、（検索キーワードである）「TEST」という文字が含まれないものは作成できません（POSTメソッドによる検索プラグインは、OpenSearchの拡張仕様のひとつとして用意されているParameter要素を使って作成できますが、IE7はこれに対応していないためPOSTメソッドのプラグインは利用できません）。

いまでは多くのウェブサイトがオフィシャルな検索プラグインを提供していますが、提供されてない（提供しそうにもない）サイトや、ありそうでなさそうなサイトや、あるいは提供されてるけど名前やアイコンが気に入らない類は、自分で（勝手に）作っちゃえばいんじゃないかと。以下は、現時点でオフィシャルが存在しないものをテキトーに見繕ってみた例。

]]> http://www.rcdtokyo.com/ucb/contents/i000852.php http://www.rcdtokyo.com/ucb/contents/i000852.php ウェブ制作 Fri, 01 Jun 2007 19:22:20 +0900 HTMLをXML化してDOMやXPathで操作するWebスクレイピング用PHPクラス SimpleXML＋HTMLParser or Tidy＋HTTP_Request＋Cache_Liteの組み合わせで、リモートサイトから取得したHTMLソースを整形して、SimpleXMLオブジェクトに変換するライブラリでございます。サーバサイドはもとよりクライアントサイドのAjaxでも、DOMやXPathなどを用いたオブジェクト操作によるScrapingが可能になります。要SimpleXMLなのでPHP5専用（もっとも、SimpleXMLをDOM XMLに置き換えればPHP4でも同じようなことはできますが）。

ええっと手っ取り早く、以下にアクセスしてフォームに適当なURLを入力してみてください。

下図のようにURLがダラダラとリストされれば正解。

test_ajax.htmlの実行例

ここでリストされるURLは、ご覧いただければおわかりの通り、入力したURLのウェブページ内にあるA要素のHREF属性値なわけですが、ポイントはこれを、responseXMLからDOMで取得していること。つまりXMLHttpRequestのリクエスト先は、well-formedなXMLを返してるということでございます。あと、HREF属性値はすべてフルパスに変換されてたりもします。

そのXMLHttpRequestのリクエスト先であるPHPアプリのソースは以下の通り。

<?php

if (!isset($_GET['url']) or empty($_GET['url'])) {
    header("$_SERVER[SERVER_PROTOCOL] 400 Bad Request");
    header('Content-Type: text/plain;charset=UTF-8');
    exit('The URL is not specified.');
} else {
    require_once 'HTMLScraping.class.php';
    $s = new HTMLScraping;
    try {
        $xml = $s->getXmlObject($_GET['url']);
    } catch (Exception $e) {
        header("$_SERVER[SERVER_PROTOCOL] 400 Bad Request");
        header('Content-Type: text/plain;charset=UTF-8');
        exit($e->getMessage());
    }
    $s->convertPath($xml, array('a' => 'href'));
    header('Content-Type: application/xml;charset=UTF-8');
    exit($xml->asXML());
}

?>

HTMLScraping->getXmlObject()は、第1パラメータのURLで取得したHTMLソースから生成したSimpleXMLオブジェクトを返します（エラーの際には例外を投げますんで、上の例のようにtry～catchしてやってください）。

ちなみに、キャッシュ処理を行う場合、まずは以下のように、コンストラクタの第1パラメータにキャッシュファイルを保存するディレクトリを指定しておきます（このディレクトリはもちろん、PHPアプリに対するread/writeパーミッションが必要です）。

$s = new HTMLScraping('/tmp/');

で、getXmlObject()の第2パラメータに秒数を指定すると、URLのレスポンスが指定した秒数キャッシュされます。

$xml = $s->getXmlObject($_GET['url'], 3600);

その他のオプションパラメータやその他のメソッドの説明、及び配布アーカイブのダウンロードなどは、説明ページへどーぞ。

応用例：HTMLをScrapingしてRSSフィードを生成する

さてこれだけでは面白くないので、これの応用例としてHTMLからRSSフィードを生成するということをやってみました。と言ってもHTMLの内容は多様で一律に処理できるわけはないので、共通処理をまとめたabstractなクラスを用意し、この継承クラスでオーバーライドするメソッド内で、HTMLScraping->getXmlObject()で取得したSimpleXMLオブジェクトから必要なデータを抽出していただこうという寸法でございます。

注意：これはあくまで応用例として用意したもので、実用に供されることを意図したものではありません。

配布アーカイブ中のexamplesディレクトリにあるtest_feed.phpはこのサンプルアプリケーションで、同ディレクトリ内にあるtest_feed.htmlからリストアイテム要素を取り出し、フィードを構築して出力します（このアプリケーションはキャッシュ機能を使用しますので、実際に自分の環境で実行する場合は、コンストラクタのパラメータで指定しているキャッシュファイルの保存先ディレクトリ名を、実際に利用可能なものに変更してください）。

HTMLToFeed.class.phpは、test_feed.php内で継承しているabstractクラスHTMLToFeedを定義しています。HTMLToFeed->getFeed()は、DOMで構築したフィードを出力しますが、キャッシュ処理が有効な場合は、フィードの出力をキャッシュし、出力にLast-Modified/Etagヘッダを含めて、If-Modified-Since/If-None-Matchによる条件付きリクエストに応答します。

test_feed.phpでは、アクセス先のURLが単一（しかもコンテンツが変更されない）であるため、出力のみをキャッシュしていますが、複数のURLにアクセスしてその内容をマージするような場合、URLごとに、その更新頻度に応じてキャッシュの有効期間を設定し、それに加えて出力もキャッシュすることで、アプリケーションのパフォーマンスを向上させることができるかもしれません。

DisclaimrBETA

まあこれは、こんな感じでこんなことができますよというサンプルであって、これを広く使ってもらおうなんていう気は毛頭なく。仕様も自分の好みでやらかしてるので、あんまし汎用的ではないかもしれず。そもそもライブラリの組み合わせからして、別段この組み合わせに限ったわけでも、もちろんありません。

特に、Tidyが利用できればこんなことはもっとお手軽に（リソースの消費も少なく高速に）できちゃうわけで。しかし、HTMLParserの趣旨にも書いたように、現在の一般的なレンタルサーバのPHP環境ではこれは殆ど利用できない筈なので、そういう場合には利用価値があるやもしれませんが（このライブラリでは、Tidyが利用可能ならそちらを、そうでなければ（自動的に）その代替にHTMLParserを利用するようになってたりはします）、そんな感じのツクリなので、気に入らないところがあれば、しょせん既存のライブラリの組み合わせなので、わざわざオーバーライドするよりは自分好みの仕様で作り直しちゃうことをお勧め申し上げる次第でございます。

]]> http://www.rcdtokyo.com/ucb/contents/i000851.php http://www.rcdtokyo.com/ucb/contents/i000851.php ウェブ制作 Sat, 26 May 2007 00:25:23 +0900 水戸ホーリーホック in 国立競技場 水戸ホーリーホック in 国立競技場

水戸ホーリーホックのクラブ史上2度目のコクリツでの試合。伝説の国立前田祭り再びである。

水戸ホーリーホック in 国立競技場 水戸ホーリーホック in 国立競技場 水戸ホーリーホック in 国立競技場 水戸ホーリーホック in 国立競技場

水戸は、第1クールの最終節であるこの試合まで未勝利、しかもここまでわずか3得点しか挙げていないというのがウソのように、攻守にわたって対戦相手を圧倒。「90分間走りきれ」と言う前田監督の指示を選手たちがきっちりと実行した結果、5-1という大差での勝利となった。

水戸ホーリーホック in 国立競技場 水戸ホーリーホック in 国立競技場

この日は国立前田祭りということで、大勢の他サポが水戸の応援に駆けつけていた。水戸側のゴール裏に集まった連中は、めいめいのクラブのシャツをキックオフの直前には水戸のチームカラーのものに着替え、水戸サポの後方に位置して熱心な声援を送っていた。水戸が大勝したこともあり、試合終了後は和気藹々とした雰囲気で、エールの交換や記念撮影が行われていた。

国立前田祭り 他サポ 多数 水戸ホーリーホック in 国立競技場
]]> http://www.rcdtokyo.com/ucb/contents/i000849.php http://www.rcdtokyo.com/ucb/contents/i000849.php その他の蹴球 国立競技場 Sun, 06 May 2007 01:34:58 +0900 湘南ベルマーレ vs. モンテディオ山形 Shonan Bellmare vs. Montedio Yamagata Shonan Bellmare vs. Montedio Yamagata

J2第12節。3位の福岡と勝ち点は同じで、わずかに得失点差で4位と5位につける好調な2チームの対戦は、しかしスコアだけ見れば山形の圧勝という結果に終わる。選手を何人か欠いているのは双方とも同じであったのだけど、それをまったく感じさせなかった山形に対し、湘南は、残念ながら守備面で不安定であったように思う。

Shonan Bellmare vs. Montedio Yamagata Shonan Bellmare vs. Montedio Yamagata Shonan Bellmare vs. Montedio Yamagata Shonan Bellmare vs. Montedio Yamagata

平塚競技場のベストのひとつはメインスタンドからの富士山の眺めだと思うの（ワーストはバックスタンドのツクリとDJな）。

Mt. Fuji from Hiratsuka stadium
]]> http://www.rcdtokyo.com/ucb/contents/i000848.php http://www.rcdtokyo.com/ucb/contents/i000848.php その他のスタジアム その他の蹴球 Wed, 02 May 2007 03:33:53 +0900 花と音楽 小金井公園の桜

元吉祥寺南町の住人、井の頭公園駅が最寄駅だった俺から言わせてもらえば、うちの近所で花見と言えば、やっぱり小金井公園、これだね。井の頭公園ってえのは駅から至近で、それがしかも中央線沿線最大の繁華街。そこに桜なんて咲いちゃった日にゃあ、あっという間に酔っ払いが異常繁殖、ゴミが大量発生。いつバラバラ殺人が起きてもおかしくない、そんな殺伐とした雰囲気が最悪じゃあねえか。夢見るカップルには決してお薦め出来ない。

てなことで、日立台のチケットを死闘の末に確保した熱心なガスサポの皆さんが、ゾンビと化してレイソルロードを行進していた先週末、東京では桜が満開なのでありました。

小金井公園の桜 小金井公園の花 小金井公園の花 小金井公園の花
小金井公園の桜 小金井公園の桜 小金井公園の桜 小金井公園の花 小金井公園の花

祭りにお囃子はつきもんじゃんという需要と、人が大勢集まるじゃん（しかも酔っ払ってて上機嫌じゃん）という供給のニーズがピッタリマッチの花見会場は、ストリートライブの格好の会場であったりする模様で。あちらこちらに、様々な種類の音楽が溢れているのでありました。

以下は、歌を軸にした王道ポップロックバンドでありながら、4人で13のパートを操り、様々な編成で演奏する新しいスタイルのバンド（と、ウェブサイトに書いてある）、Everlyというグループの、クラシックカルテットの編成による演奏風景。

Everly Everly

以下は、沖縄のエイサーをベースに、空手の型を取り入れた独自の振り付けとダイナミックなバチさばきで、 今や沖縄を代表し、若者に圧倒的な人気を誇る（と、ウェブサイトに書いてある）、琉球國祭り太鼓東京支部の皆さん。景気のいい音楽に酔っ払いの皆さん、そりゃもう大喜びなわけで。最後は見物客も一緒に舞い踊り、えらい大騒ぎになっとりました。

琉球國祭り太鼓 琉球國祭り太鼓 琉球國祭り太鼓
琉球國祭り太鼓 琉球國祭り太鼓 琉球國祭り太鼓 琉球國祭り太鼓 琉球國祭り太鼓

ところで、江戸東京たてもの園の東ゾーンに出店している屋台のうち、もっとも南側（公園側）のお店の料理は、どれもこれも絶品でした。ただし試作品を除く。まあ、オヤジの口車に乗せられてどれもこれも、試作品までも食っちまったわけだが（笑）。

]]> http://www.rcdtokyo.com/ucb/contents/i000847.php http://www.rcdtokyo.com/ucb/contents/i000847.php いろんな風景 Fri, 06 Apr 2007 21:14:16 +0900 Father and Daughter Arakawa River, Kofu

I've heard there was a secret chord that David played to please the Lord
But you don't really care for music, do you?
It goes like this - the fourth, the fifth, the minor fall, the major lift...
The baffled king composed Hallelujah

Hallelujah, Hallelujah...

Now maybe there's a God above
But all I ever learned from love was how to shoot at someone who outdrew you
And it's no complaint you hear tonight
It's not some pilgrim who's seen the light
It's a cold and broken Hallelujah

Hallelujah, Hallelujah...

from “Hallelujah” - Leonard Cohen (1984)

To my wife's father, who died March 24, 2007

]]> http://www.rcdtokyo.com/ucb/contents/i000846.php http://www.rcdtokyo.com/ucb/contents/i000846.php いろんな風景 Thu, 29 Mar 2007 19:42:46 +0900