とあるweb屋の仕事術

とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

楽天市場のネットショップのHTMLがtableタグ、tableレイアウトの理由

楽天市場のネットショップのHTMLがtableタグ、tableレイアウトの理由

楽天市場のネットショップは、

数々の企業が出店しています。

出店申し込みからなんやかんやして

RMSという店舗運営システムを利用して

ネットショップを構築していきます。

www.rakuten.co.jp

通常の楽天RMSでは

レイアウトなどにいろいろと

制限があり、あまりデザインの

カスタマイズができないのですが、

楽天GOLDという形態にすれば、

自由にカスタマイズが可能になります。

 

www.sumahoya.net

受託で楽天GOLDページの

カスタマイズ案件をやったり、

楽天RMSから出力した商品CSVを

自社のネットショップと連携したり

したこともあるのですが、

そんな中ふと、楽天ネットショップの

HTMLソースが気になりました。

 

tableタグなんですよね。

 

一部分だけtableタグとかではなく、

ネットショップ全体のデザイン、レイアウトが

tableタグで組まれていて、いわゆる

tableレイアウト、という手法になります。

CSSレイアウトが台頭する前の

いにしえの手法です。

 

まぁ古くからあるシステムですし、

そうそう新しいHTML5への移行などは

相当なコストがかかるでしょうし、

運営サイトにも影響が大きいので、

単に古いソースなのだな、と思ったのですが、

古いだけではありませんでした。

ちゃんと理由がある。

 

楽天RMSから出力した商品CSVを自社の

ネットショップに取り込んで表示させたとき、

事件は起きました。

 

自社のネットショップのデザイン、レイアウトが

カラム落ちしたりして崩れまくっていました。

 

原因を調べたところ、楽天商品ページ内で、

クライアントがでたらめに書いたHTMLタグが

原因でHTMLタグのネスト構造がおかしくなって

いたようでした。

 

で、そのとき疑問に思いました。

「楽天サイト側はなぜ崩れていないんだ?」

 

CSV出力したので同じHTMLを表示しています。

それにもかかわらず楽天サイト側ではレイアウト

崩れがおきていません。

はて...

 

HTMLソースを見て、気づきました。

「tableタグは偉大である」

 

tableレイアウトはHTMLタグのネストが

おかしくなってもカラムの構造は維持する

ようです。

 

楽天市場のネットショップのHTMLが

tableタグでtableレイアウトの理由は

古いだけじゃなかった、というお話。

 

ちなみに、自社ネットショップ側も

HTML5/CSSで組んでいましたが、

レイアウトをtableレイアウトに

することで、崩れを回避できました。

 

そもそも、商品CSV側の

HTMLの構造をなおせと思いますが、

何千点とある商品すべてを修正するのは

影響範囲が大きいため現実的ではなかったので、

tableレイアウトにする、

という解決方法をとりました。

 

「tableレイアウトは偉大である」

 

クライアントがHTMLをさわる運用をするような

Web案件は、tableレイアウト採用すると

万が一デタラメなHTMLを組まれても、

崩れることなく、幸せになるかもしれません。