全社のトーナメント結果がテーブル形式で表現してあって、どうにも見栄えがよろしくないとずっと思っていた。あと、JFLなどチーム数が多いリーグでは勝敗表を別テーブルで展開するようになってて、これもカッコ悪いし、機能的にもどうにもよろしくない、と。そんなことを考えている時に......降って沸いたというか正確には『思い出した』(苦笑)のが、レンタルサーバ契約をしているinfoseek/iswebベーシックのサービス終了。2012年5月21日までに他のレンタルサーバと契約して、引越しをしないといけない。逆に言えば、これは鋳造総研・リニューアルの大きなチャンスではないか。トーナメント表の作成おそらくHTMLにCSSをキチンと導入すれば解決しそうだけど、CSSって一部で使ってはいるけどなんかイマイチよくわからん......と思いつつ、県図書館に行って『WebDesigning』なる月刊誌を何冊か借りてきた。2010年12月号には「CSSでトーナメント表を表現する」なんて特集記事がある、とネット検索でわかってたので。借りてきてページを開いてみると、float?HTML5?jQuery?ほえぇーっ、ほえぇーっ、ほえぇぇぇぇぇーっ......とシッポ巻いて逃げ出して。それでも、なんとしても全社トーナメント表は普通のトーナメント表のように線で表現したい!それもPDF化や固定画像ではなく、HTMLの技術でなんとか表現したい!という欲望がグツグツと音を立てて。これはもう“意地”と言っていい(笑)。昨今、岐阜隊のスポンサーであるセイカ様がぶっちぎり最下位のシーズンに激しくお怒りでそれが出玉に厳しく反映されてた(苦笑)ということもあって、予定のない休みを集中的に使って作業に勤しむことに。技術的には、TDタグのborder色や太さを徹底的にclass設定したCSSをいくつも作成して、そいつの組み合わせでトーナメントを表現することにした。印刷させてみたい......SSIとの出逢い基本的なページデザインを継承させた上で完成させようとしたトーナメント表。ところが、今度はこれを印刷しようとして厄介なことが起きた。画面表示は黒背景という前提だから、勝ち上がり線は白が基本。印刷すると背景は白になるので勝ち上がり線が消えてしまう。印刷用ページを別途設計するのが簡単な解決法。トーナメント表の罫線の色はCSSで設定してあるから、白背景が前提の色指定をしたCSSを読み込ませればいい。ページ閲覧用と印刷用でそれぞれトーナメントのデータを持つのは非効率だし修正が発生した時に厄介。「HTMLから別のHTMLを読み込む」ということが簡単に出来ないものか......。SSI====ThisIsTheErrorMessege====で。いうか、浅学につきSSIという技術は全然知りませんでした。黒背景の画面表示用と白背景の印刷用のHTMLを用意する。冒頭で設定するCSSを変えてやればいい。トーナメント部分はSSIでデータ部分を独立させたHTMLを読み込ませる。レンタルサーバーの転居先として第一優先だった『さくらインターネット』はSSIが使えるので、そこに移転先を決めてページ設計を進めることにした。言うものの、あとでわかったのだけど、実はSSI自体はこれまでのレンタルサーバ『infoseek/ISWEB』でも使えたのですね〜、単に自分が不勉強だっただけでした。あははははははははははははは。恐るべし、恐るべし“jQuery”少しずつでもHTMLとかCSSとかがわかってくるといろいろ面白くなってくる。2月中旬にじゃからんとモレラ岐阜に買い物に行った際に本屋があったんで「CSSを勉強できるテキストがあったらいいなあ......」とインターネット関連書籍のトコに行ったら、序盤でシッポ巻いて逃げ出した“jQuery”関連のテキスト本があって。わからないのだし......と思いながらも手に取ってみると、なんか使うだけならそんなにむずかしくなさげ。高かったけど、後学のためにちょっと手を出してみるか......と購入してみた。これまでの『総研』ページデザインにおいて「エレガントでないなあ......」と悩んでいた部分の大多数がjQueryでだいたい解決してしまいそうではないか!ブラウザフリー====ThisIsTheErrorMessege====もある程度は満たせてしまうではないか!「おおおおっ、世の中はここまで進んでいたのか!」とマンションの屋上で素っ裸になって叫びだしたい気分になってしまった。シンプルなインターフェースだった『総研』でゴテゴテにエフェクトでカタめてしまうのは、これまたエレガントではない。====ThisIsTheErrorMessege====この判断がむずかしいところなんだけど、今回はせっかくなんでいろいろ試したい機能を使ってみた。プルダウンメニューとか、ページスクロールをうにょ〜っと動くようにしてみたり。ホームページの壁紙変更も、似たようなことは二輪の部屋でjavascriptゴリ書きで組んで使ってたけど、書き直してみたり。この部分をjQueryでどこまで簡潔に作れるかをテーマに調べてみて、“Ajax”====ThisIsTheErrorMessege====にたどり着いた。これを使いこなせれば、管理しなきゃならないHTMLファイル数をもっと減らせることが出来るみたい。一時期は、一気にAjaxまで踏み込んでしまうか!と本気で思った。Ajaxのむずかしさ、残存タスクのあまりの多さ、そして一番の理由は「手段が目的になっていないか?」という点。「アヤックスには早過ぎるね」。====ThisIsTheErrorMessege====この『手段の目的化』というのは結構陥りやすい罠だ。暫定開業に向けて1(雑文に手をつける)とにかく、『infoseek/ISWEB』からの撤退移転の前にすべてのページに手を加えるのは不可能だ。頻繁に更新するコンテンツを優先に規格を新しくしようと考え、雑文とか観戦記録とかピッチ印象録とかを第一優先で着手することに。雑文は2003年から書いているんで437個もある。初期に書かれたものはHTMLのキチンとした知識もなくいい加減に作っていたものばかり。モノは試しと当時のものをそのままでHTMLチェッカー====ThisIsTheErrorMessege====にかけたところ、100点満点でマイナス360点っ!====ThisIsTheErrorMessege====これって、「よくいままでキチンと表示されてたよなあ」と感心するレベルの数値だ。divタグを使った写真の入れ方、文字飾りの切り方、テーブルの構成などなど、ようやく技術を固めてHTMLの見直しに着手。2月の下旬から作業に着手して、なんとか『infoseek/ISWEB』からの移転前に書き換えが終われば......と思いつつ、休みの日はもちろんのこと、夜寝る前にも朝の出勤前にもとにかくひたすらリニューアル。時間の使い方としてはかなり充実していましたね。毎年この時期にやっている天皇杯県予選での新規ピッチ開拓も極力減らした結果、雑文についてはリニューアルに成功。ページデザインは現在のをほぼ継承するとして、問題は検索方法。これまでは自分の手製地図からのリンクとグーグルマップからのリンクの2本立てだったので維持に負担がかかってた。グーグル側のを優先したいけど、あれって1画面あたりのマーカーが200を超える表示されなくなっちゃうんだよね。地域ごとに分けてたんで。今回の移転にあわせてGoogleMapsAPIをちょっと勉強しようと調べたら、なんですってええええええバージョンがいつの間にか(笑)『3』に変わってて『2』はもうサポートしないのだとか。『2』も使えるのだそうだけど、せっかく移転するのなら『3』で対応したい。これまた格闘することに。ある日、出勤途中で電車に乗ってて、ハタと思い当たったのです。「もしかして『3』だと、例の「マーカーの上限200」も解決してるんじゃ......?」帰宅して調べると、果たして『3』だと多数のマーカーがあってもサクサク表示されるらしい。「700くらいまではへっちゃら」だそうで、現在の鋳造の観戦ピッチは560弱だから無問題。いうことで、全マーカーをいっぺんに表示できる仕組みをつくっちゃいました。日本列島はマーカーだらけに(笑)。ついでにマーカーのデザインや考え方も変えてみました。維持が一気にラクになった。ような気がする(笑)。暫定開業、そして今後に向けてこれまで、余暇エネルギーの多くを移転P/Jに割いていたので、まだ女川旅行記も書けていない。そちらもなんとかしないとだけど、暫定で移転させたけど手落ちにしてある部分の修正やらなんやら、とにかくまだまだタスクいっぱい夢いっぱい。「移転を果たした」ってんで緩むとそのままにしちゃうんで、少しずつコツコツと手を加えていきます。うまく動いていないコンテンツもあるでしょうけど、気長にお待ちくださいませ。実はシーズン開幕前から動かし出した別P/Jもあって、これは秋までに完成とかぼんやり思ってたけど、とてもとても無理っぽい。こっちは来シーズンまでかかるかな〜。出来上がったら結構面白いものになりそうなんで、乞うご期待。別に秋には大きな(当社比)イベントも企んでる(笑)し、もうしばらくは充実した時間が過ごせそうです。あとは岐阜隊が充実してくれれば(大苦笑)。▲topServerSideIncludesの略だそう。同一サーバ内の別ファイルの内容を組み込むことができる。異なるブラウザで視ても同じ動きをするような仕組み。IE絡み(特に6)がヘンテコになることが多い。当総研はリニューアルにあわせIE6対応を放棄しました。新しいブラウザを入れてください。パワポでプレゼン資料作ったひとが。エフェクトが面白くてテンコ盛りにしちゃって何が言いたいんだか全然わからないっての、ときどき見かけません?ホントは「エージャックス」らしいが、サッカー系の人間なら「アヤックス」って読んじゃうよね(笑)。AsynchronousJAvaScript+Xmlの略だそうで、「画面を変えずにページの内容を変える技術」とでも言うのかな。出典は『ギムレットには早過ぎる』。警官にさよならを言う方法を誰か早く見つけてください(笑)。Clickすると別windowsが開きます。100点からエラーの重要度にあわせて1項目ずつ減点していくので、重大なエラーが多いと「原点割れ」を起こす(苦笑)。