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