今日はいくつか仕事をやりましたが、てこずったのはラケットプラザYahoo!店の作業でした。

大手ショッピングモールは色々と制限がありまして、Yahoo!ストアではストアマネージャにログインして、ページを管理できます。ページを構成する要素(ソース)を入力する欄がいくつかあります。レイアウトを選んでしかるべき欄にソースを入力するとページが出来上がります。しかしその欄には文字数制限があって、10000バイトしか入らないのです。

10000バイトという事は、半角文字だと10000文字、全角文字(日本語とかの2バイト文字)なら半分の5000文字です。普通に考えれば問題なさそうなのですが、大きな落とし穴があります。

外部スタイルシート(CSS)ファイルはおろか、HTMLソースとしてのCSS定義も出来ません・・インライン要素として、style定義するしかないのであります。これが結構きつい・・・っていうか普通はインラインで書かないからマジに悩んだ。効率悪いし・・

今日作ったのはサイドナビゲーションで商品カテゴリーのところです。普通に考えて、ul->liでリスト表示させて、頭にアクセントとなる画像を表示させるべくCSSを定義するでしょう。恐らく背景には画像を配置するなりしてナビゲーションであることを目立たせます。ごくシンプルに作っていたはずなのですが・・・
list-style-image:url(http://lib.shopping.srv.yimg.jp/lib/hoge/mark.gif)
これをliに一行ずつ書くとPATHが深いので文字数どんどん食いつぶして最悪なことになります。divで囲ってみたところ何が悪かったのか、隙間が出来てしまいこれじゃあダメだと思い込んでしまい、どうしたら10000文字以内に収まるのか・・苦戦しまくりました。

結果的にはブラウザの挙動のせいだったみたいで遠回りしちゃいましたが、div->ul->liのネストで、divに「list-style-image」を指定しておけば、liに一行ずつ指定しなくても済み文字数を節約できました。普段こんな書き方しないから分からないよって言いたくなる。だけど制限の中で工夫するってのはある意味重要というか、理解を更に深める要素になるんだなと実感した次第です。

中途半端にスクラッチから書けると無駄の多い書き方しちゃってるって事あるんだなと再認識した次第です。

余裕が出来た文字数でfont-sizeやら、paddingやらの微調整が出来て期待通りに作ることが出来ました。ちょっとしたことだけど10000文字の制限をクリアできたって事でなんとなくコーディングの自信がついたかな。こういうことの積み重ねがプロとして大切なんだろうなって思います。私はWEB制作の仕事に携わって半年位なもんだし、実際のコーディングはデザイナーさんにほぼ任せているので、時々はこういうのを手がけるのも大切だなと思いました。

PHPやらPythonの学習も重要だけど、身近なXHTMLもボチボチ理解度深めて行くぞっと(超基本的なことは学習したけど応用となるとね・・)。