Under Construction, Baby 2006年02月の記事一覧

« 2006年01月 | トップページ | 2006年03月 »

2006年02月27日

FC東京 vs. ヴァンフォーレ甲府

Hello, stranger --- You came just in time.
I look for your face in a crowd, or in line.
Hello, stranger --- Not a moment too soon.
See, that old picture's fading in the drawer of my room.

Now toys have gone lost, baby teeth have come loose.
There were accidents involving stitches, spilt juice.
Report cards were shown, and one time I got sick.
But it's nothing I couldn't catch you up on real quick.

Hello, stranger --- I saved you a place.
And it hardly seems strange.
Now that I've seen your face.

多くのひとにとって、そのシーズンで初めての「週末のフットボール」になるであろうプレシーズンマッチは、いつもストレンジな（見知らぬ）ものに満ちている。

各クラブとも、選手やスタッフの交代によって、これまでと比べて見慣れない点が多かれ少なかれあるわけだけど、特に僕らのクラブは、監督が替わったことにより布陣も戦術も一新され、顔ぶればかりか、戦い方もこれまでとは違ったものを目指しているようだ（と言っても、まだ模索中のようだけど）。今回の対戦相手にしても、今季はこれまでと異なるステージで戦うことになるわけで、なにかにつけ新鮮であるに違いない。

見慣れないのはクラブばかりじゃない。久しぶりに訪れた僕らのスタジアムには、新しい飲食店のテナントが加わり（確か去年はテナントの契約更改の年だったっけ）、駅前に続く通りには新しい店ができ、通り沿いに飾られていた、昨シーズン限りで僕らのクラブを去った選手の巨大な横断幕は、新しいものに挿げ替えられている。
見慣れた景色の微妙な変化を目の当たりにして、僕らは季節が確実に移り変わったのだということを実感する。

こうしてまた新たなフットボールの季節が始まる。
きっと僕らは、新しい風景にもすぐに慣れてしまい、これまでと変わらない週末の日々を、また重ねていくのだろう。

ハロー、ストレンジャー

やっと会えるね
場所はとってあるよ
別におかしいことじゃない
こうして来てくれたんだから

好天に恵まれた去年のPSMとは打って変わって大雨だったので、クルマででかけて、いつものように調布あたりに停めて電車で赴こうと思っていたのだけど、リーグ戦などの主要なイベント開催日には30分1千円だかがデフォの味スタの駐車場が、この日は1回1千円という設定になっていた。そういえば、確かこれまでのPSMは平常料金のままで停めれた気もしないでもないのだけど、だとするとさすがに、いい加減それでは不味かろうわけで、なんにせよ、おいらの知る限り東京の味スタ開催試合としては初めての試みだった筈で、そういう意味ではこれもストレンジのひとつであったことよ。

引用について

ここでの引用は、ニコロデオンで放送されている「ジンジャーの青春日記 As Told By Ginger」の第7話「Hello Stranger」で、主人公のジンジャー・ファウトリー Ginger Foutley が、久しぶりで会えることになった（と思い込んでいたのだけど結局会えなかった）、離婚した父親に宛てた自作の詩として朗読するものです。なんの関係もない話題に無理矢理引用しててごめんよ。なお、この詩の実際の作者は、原作者でありこのエピソードの脚本を担当したEmily Kapnekだと思われ、また、その日本語訳は、このエピソードの日本語吹き替えのものです（「Hello stranger」という翻訳し辛い一文を、本来の趣旨に沿った適切なフレーズに置き換えている点、見事な翻訳だと思います）。なお、このエピソードは2001年度エミー賞の「Outstanding Animated Program (Less Than One Hour)」にノミネートされました。

Category: FC東京, ヴァンフォーレ甲府
Posted 2006年02月27日 22:52

2006年02月24日

青赤バリデータ

「バリデータ」とカタカナで書くとなんかヤな感じ。

w3cのCSSアイコンをパクってAoaka Styleアイコンを作り、調子こいて、今度はValid HTML系アイコンをパクってValid Aoakaアイコンを作り、そうなると、なにがValidであるかを検証するために、Markup Validatorのパクリも必要だろうということで作ってみますた。そりゃもう、ヒマなオフシーズンのなせる業さ。

» Aoaka Validator

ウェブページのテキストを解析し、その内容が青赤的に適切なものであるかどうかを判定させてみようというネタでございます。一応、その手のページを読ませると、それっぽいスコアが出てくる筈。インチキなんだけど。なお、w3cのパクリであることが身上なので、表記は当然すべて横文字です。デタラメなんだけど。

青赤なドキュメントとは、FC東京についてなんらかの言及があるものを言うわけですが、そこにはもちろん、かくあるべしという基準なんてありゃしません。w3cのValidatorなどのHTML解析器は、基準が明確なので減点方式の採点ですが、ここでは同様の手法を採ることができないため満点というものはなく、プラスのポイントとマイナスのポイントを別々に与えていて、それぞれのポイントは幾らでも膨らんでいきます。
で、プラスポイントは、FC東京について言及していると思われるフレーズに対して発生し、マイナスポイントはFC東京のファンとしては不適切と思われるフレーズに対して発生するのですが、後者のルールはひとつだけで、かつ厳格です。一方前者は、「FC東京についてなんらかの言及をしているフレーズ」なんて無限に想定されるわけで、そんなの網羅できるわきゃないので、チョーいい加減なルールになってます。そんなわけで、プラスポイントのほうは単なるお遊びだと思ってくれろ。
いかんせんルールがいい加減なので、プラスポイントを発生させているフレーズが、FC東京にはまったく関係のないものだったり、ネガティブな言及であったりすることは多々あるわけですが、アンチなページがハイスコアを叩き出したりするのもまた一興。

ちなみに、これはもちろんHTML解析器じゃないので、HTMLがw3c標準に準拠してようがしてまいが一切関知しませんが、いわゆる「構造的なHTML」であるほうがハイスコアにはなりやすいかも。

なお、チェックの際の選択肢にある「Transitional」と「Strict」とは、マイナスポイントが発生していても、総ポイントがプラスなら「Valid」なのがTransitionalで、マイナスポイントがあれば、いくら総ポイントが高くても「not Valid」なのがStrictです。まあ、w3cのパクリっぽくなるように無理矢理用意してみただけなんだけど。

ところで、このサイトのトップページとか、やたらとスコアが低いよね、というのは、オフシーズンでネタがないんだからしょーがないんだよ、多分。

Category: FC東京, ウェブ制作
Posted 2006年02月24日 20:54

2006年02月17日

続・ジオシティーズ広告スクリプトの不具合

Mozilla/Firefoxをご利用の皆さまにおかれましては、geocities.jpのページを表示したとき、縦長の広告バナーの表示される位置が、画面の右端だったり左端だったりする現象をご覧になったことがあるかもしれません。これは、この現象が、またしてもジオシティーズ謹製のJavaScriptの不具合によるものでしたよ、というハナシ。

事の発端は、およそ1年半ぶりに行った、geocities.jpに置いてあるラ・コルーニャへの道の手直し。と言っても新しい内容を加えたわけではなく、目的のひとつは古くなっていたリンクなどの修正で、特にCRTVGのウェブサイトのリニューアルに伴い、動作しなくなっていた「ガリシアヲチ」ツールバーの修正とか。まあ、このあたりは本題とは関係なく。

で、もうひとつがHTML（の構造）とスタイルシートの書き直し。
これはなにかと言うと、これを作った当時、ジオシティーズの広告スクリプトはドキュメントの先頭（つまりDOCTYPE宣言より先）にインクルードされる場合があり、このためHTML/CSSの記述は、Quirksモードで描画されることを前提にしなければならなかったわけです（この当時のハナシはこちらにありますが、この記事は、ジオシティーズの広告スクリプトの変更に伴い無意味なものになっているため、このサイトには移してません。なお、「DOCTYPE宣言とかQuirksモードってナニ？」というかたは、例えばこちらとかをどーぞ）。
で、しかし確か昨年の夏頃に、ジオシティーズの広告スクリプトが全面的に変更され、少なくとも自分の知る限り、ドキュメントの先頭にインクルードされるということはなくなっていたので、ならばHTML/CSSをStandards Compliantモード向けに作り直そうか、と。

てなことで、手直しを施したファイルをアップロードしてFirefoxで表示してみると、広告バナーが左端に表示される。IE6では右端に表示される。これは、「Firefoxは左」という仕様なのか？と思ったのですが、確かFirefoxでも右端に表示されるページを見た覚えがあるので調べてみたらば、またしてもジオシティーズのJavaScriptの不具合が原因だということが判明したという次第。

さて、今回問題を起こしているのは、インクルードされるSCRIPT要素で読み込まれるJSファイルのうち、div.jsの、以下の部分。

function auPos(divId) {
  posL = findX() -177;
  if (ns4) {
    posL='1';
    document.layers[divId].visibility = "show";
    document.layers[divId].left = posL;
  } else if (ie5 || ns6) {
    document.getElementById(divId).style.visibility = "visible";
    document.getElementById(divId).style.left = posL;
  } else if (ie4) {
    document.all[divId].style.visibility = "visible";
    document.all[divId].style.left = posL;
  }
}

このファンクションauPos()は、広告バナー部分の各DIV要素について、ウィンドウの左端からの位置を設定するもので、各DIVのstyle.leftを、（変数posLに格納された）ファンクションfindX()が返すウィンドウの内側の幅から、177（広告バナー部分の横幅）を引いた数値に設定しようとします。
で、問題は、style.leftに設定されるのが数値であるために起こります。スキモノの皆さまはお気付きかと存じますが、本来CSSでは、この手の類には単位指定が必須なわけで。しかし、ここでは単位が省略されてしまっているため、Standardsモードで動作しているGeckoエンジンでは、この設定は不正だとして無視され、結果、広告バナー部分の左端の位置は設定されずじまいとなります。
一方、ウンコな仕様でお馴染みのInternet Explorerは、描画モードに関わらず、単位が省略されていると、単位はピクセルだと勝手に解釈しやがるので、このスクリプトは、その作者の本来の意図通りに動作し、またGeckoエンジンも、Quirksモードでは同様の動作となるため、Mozilla/Firefoxでは、Quirksモードで描画されるHTMLに限っては、やはり作者の本来の意図通りに動作してしまうのでした。

ちなみに、この広告バナー用のスタイルシートであるdiv.cssを見ると、ご丁寧なことに、数値がゼロの場合のみ単位が指定されていて、それ以外は省略されてたりします。逆だっつうの。

さて、しからばもう一度Quirksモード向けにHTML/CSSを作り直すかというと、それはメンドくさい、というかいい加減にしてくれ。
てなことで、またぞろ修正用のスクリプトを用意してみたあるよ。各HTMLファイルに以下のスクリプトを書いたJSファイルを読み込むscriptタグを追加し、そのbodyタグに「onload="fixGeocitiesBug()"」を追加。

function fixedAuPos(arg) {
  document.getElementById(arg).style.left = document.body.offsetWidth?
    (document.body.offsetWidth -177) + 'px': (findX() -177) + 'px';
}
function fixedRlPg() {
  fixedAuPos('y_gc_div_adcntr');
  fixedAuPos('y_gc_div_au1');
  fixedAuPos('y_gc_div_mast');
}
function fixGeocitiesBug() {
  if (document.getElementById
    && document.getElementById('y_gc_div_adcntr')
    && !document.getElementById('y_gc_div_adcntr').style.left) {
    fixedRlPg();
    onresize = fixedRlPg;
  }
}

onloadでの処理なので、ドキュメントの読み込みが完了するまで、広告バナーはウィンドウの左端に居座ってしまいますが、それはしょうがない（なにかいい対策をご存知のかたは教えてくださいな）。

なお、ファンクションfindX()を使用した元々のスクリプトが返す左端の位置をそのまま適用すると、Mozilla/Firefoxでは広告バナーの右端がウィンドウの右端から若干はみ出る（横スクロールバーが表示される）ため、ここではdocument.body.offsetWidthを使用しています。これはもちろん、ウィンドウの幅ではなくBODY要素の幅なわけで、（広告バナー部分の横幅である177を差し引いている）上のスクリプトでは、BODYのmargin値がゼロの場合に、ウィンドウの丁度右端に広告バナーは位置することになるわけですが、このように、BODYのmargin値に応じて、差し引く値を調整する必要があるです。

Category: ウェブ制作
Posted 2006年02月17日 23:30

2006年02月15日

Jリーグ/JFL観戦日程シミュレータ

2006年度シーズン前半のデータしか登録してませんよ。
つまり現在は、以下にあるものにはなんの価値もありません。

シーズンオフにつき、大半のドメサカオタの皆さまにおかれましては、ブログの更新を停止してみたり、別の話題にカミングアウトしてみたりしながら、来るシーズンの妄想に励んでおられるかと存じます。
この時期の主な妄想のひとつに観戦スケジュールの立案があり、平均的なドメサカオタはリーグの日程表を眺めながら、愛するチームのホームゲームは当然全て観戦するとして、アウェイはどうしようか、遠方アウェイなら近場の他クラブのゲームをひやかそうか、などと思案されておられるかと存じますが、お気楽に妄想を拡げられるように、お好みの試合の日程一覧をサクっと表示するスクリプトを作ってみますた。

» Jリーグ/JFL観戦日程シミュレータ

使い方

まずはホームゲームを観戦するチームを選びます。
マイチームは当然として、近場なのでホームなら見に行ってもいいかなと思うチームも、とりあえずチェックしておきます。
同様にアウェイゲームを選びます。アウェイは、チームとスタジアムが一致したもののみ表示されます。マイチームのアウェイゲームはすべて観戦したいところですが、さすがにここは行けないや、というスタジアムはチェックしないでおきます。
表示された日程表から、観戦予定ではないゲームのチェックを外します。
日程表の下に表示される「CSV形式で表示」をクリックすると、チェックの付いているゲームのリストを、Excelなどで利用可能な、カンマ区切りのテキストで表示します。

現在2006年シーズンの、7月までの以下の日程が登録されています。
- J1/J2/サテライト
- ナビスコカップ一次リーグ
- ACL一次リーグ（国内開催分のみ）
- JFL
お約束。ここで表示される内容が正しいものである保証は一切ありません。

更新履歴

2006/3/2
- あったほうが便利じゃまいかということで、日付範囲指定の機能を追加。なお、カレンダー表示には、川崎有亮さんが公開しておられるJKL.Calender - ポップアップするカレンダー表示クラスを利用させていただいております。^※
- その他あれこれ細かい機能の追加と修正。
2006/2/24
- JFLの日程を登録。
- 中止が決まったACL一次リーグの日程を削除。てゆうかなんだよそれ。
- 明日に迫り、もはや需要のある筈もないゼロックス杯の日程を削除。
2006/2/20
- JサテライトとJFL前期1&2節の日程を登録。

Technical Stuff

JavaScriptのみで作られており、FirefoxとIE6で動作を確認しています。旧型のInternet Explorerでも動作するように作ってる気がしますが、動作確認はしていません。
JavaScriptのみで、ファイル構成も単純なので、お気軽にかっぱらっていただけます。ここでは登録されていないスケジュールを追加したり、ローカルでオフラインで実行してみたりできるかもね。

JKL.Calenderについて

日付範囲指定の入力フォームでポップアップ表示するカレンダーは、川崎有亮さんのJKL.Calender - ポップアップするカレンダー表示クラスによるものです。自分で作るのは面倒だったので拝借。クラス化されているので、ここでの利用例のように、複数の入力フォームについて、それぞれのインスタンスでもって利用できるところがステキ。
なお、オリジナルの以下の部分の「ymd」は、日付をYYYY/MM/DD形式で表した文字列で、「splt[1]」はそのMMの部分なのですが、これは（Dateオブジェクトではなく）文字列なので、有効範囲は0～11ではなく1～12が正解の筈。てなことで、失礼ながらここだけ勝手に書き換えちゃってます。

// オブジェクトに日付を記憶する（YYYY/MM/DD形式で指定する）
JKL.Calender.prototype.setDateYMD = function (ymd) {
  var splt = ymd.split( "/" );
  if ( splt[0] > 0 && 
    splt[1] >= 0 && splt[1] <= 11 && 
    splt[2] >= 1 && splt[2] <= 31 ) {

Category: その他の蹴球, ウェブ制作
Posted 2006年02月15日 21:36