日本最大級のネットショッピングモール「楽天市場」。
当記事をご覧の方で、楽天市場にて出店している店舗様も多いと思います。
さて、楽天市場に商品を登録していくうえで、「PC版の商品ページに比べ、スマホ版の商品ページは制約が多い」
というところでわずらわしさを感じると思います。
PC版商品販売説明文では問題なく使えるspanタグやclass指定が、SP版商品販売説明文では何故か使えません。
当記事は、「SP版販売説明文でも制約無しでタグを使えるようにしようぜ」というハック的な記事です。
※元記事はこちらになります。楽天スマホをオリジナルにカスタマイズする裏技
※裏技的な方法で対応していますので、本来ならいじれない部分などで表示崩れが発生する可能性があります。自己責任でお願いします。
使えないタグを使えるようにする魔法の合言葉「=””」
=""
これ、見たことありますよね。
本来なら「class=”bosukete”」みたいに、要素とクラス名を指定する際などに使います。
しかし、以下のように使うことでハックできます。
＜iframe src="xxx.html" alt="商品画像" =""＞＜/iframe =""＞
※紹介しているタグの「＜＞」は、全て全角で書いています。コピペされる際は、半角に書き換えてからご使用ください。
開始タグ、閉じタグの両方に「=””」が入ってますね。
挿入する場所はどこでも構いません。
こうすることで、本来ならスマホ版では使用不可能なiframeタグも使用できるようになります。
何故使用できるのかは分かりませんが、少なくともバグを利用しているということは分かります。
本来のHTMLの記述ならエラーを吐き出す構文です。
しかし、実際にかなり多くのショップが、この方法で乗り越えています。
応用してみよう
画像使用制限を増やす
スマホ版では、imgタグは最大で20枚までしか使えません。
そのため、画像30枚くらいを使ってPC版デザインを作成した場合、
SP版はスライスしなおさなきゃいけません。
（デザインがPCとSPで共通のケースのみ。そもそもそれぞれ違うデザインならどの道作り直す必要がある）
しかし、この裏技を使えば、imgタグ最大20個という制限を外すことができます。
簡単に言ってしまえば、PC版のソースをそのまま持ってきて、
エラーを吐き出すタグ全てに「=””」を自動置換などで入れてあげれば、
SP版でも使えるようになるのです。
iframeを使える
解説の段階でiframeタグを使いましたが、魔法の合言葉を使えば、
SP版でも無事iframeタグを使用できるようになります。
ifameタグは閉じタグ含めてセットですので、閉じタグにも合言葉を挿入する必要があります。
※普通にiframeタグを使う場合高さを可変できません。PC版なら幅や高さが可変することはほぼありませんが、SP版は端末によって横幅は大きく変わるので対策が必要です。対策しないと、端末によっては縦が見切れたり、大幅な余白ができたりします。
class指定
スマホでもpタグは使えますが、class付与はできません。
でも以下のようにすれば可能です。
＜p class="hogehoge" =""＞＜/p =""＞
ポイントはiframeタグと一緒で、閉じタグにも挿入することです。
もし閉じタグに入れ忘れた状態で更新しようとしたら、
「開始タグの無いタグがあります」
みたいな感じで怒られます。
つまり、「=””」を挿入されたタグは、システム上はタグとして認識されないということのようですね。
しかし、ブラウザではタグとして認識されるから正しく表示されるという・・・。
linkタグでcss挿入
上記の方法でclassを付与できたとしても、
スタイルシートを読み込まないと意味がありません。
私が試した限りでは、スタイルシートも問題なく読み込めました。
＜link href="http～/style.css" rel="stylesheet" =""＞
読み込めて、ちゃんとclassも効いてくれました。
まとめ
これでスマホ版のデザインの幅が広がると思います。
ハックして表示されたスマホ版商品ページは、楽天市場アプリでも正しく表示されています。
そのため、今のところは問題は無いようです。
また、「全角スペースを１１個以上入れる」という方法でも同じようにハックできるようです。
しかし、タグの中に大量のスペースがあるのはコーダーから見ると非常に気持ち悪く感じます･･･。
そのため、基本的には「=””」を使って、この合言葉が使えない場合に全角スペースで対応すれば大丈夫でしょう。
※もしかしたら、将来的にこのハックが対策される可能性が無いとは言い切れません。
楽天側も黙認している状態ではあるので、もしこれを廃止したらどれだけパニックが起こるかは楽天もさすがに理解しているとは思いますが・・・。
ちなみに、楽天市場のエキスポに参加した際、「売上のほとんどがスマホからなので、みなさんスマホに注力しましょう。」という話を真っ先にされていました。
あの時の話し方はうまかったですね。
壇上に立つや否や、
「ではみなさん、まず目を閉じて、各々の担当ショップのトップページを頭に思い描いてください。できましたか？ではお聞きします。そのトップページは、スマートフォン版でしょうか？恐らく大多数の方がパソコン版をイメージされたかと思います。しかし、実際にはユーザーのほとんどがスマホでサービスを利用しています。」
と、参加者の心をグッと掴んできたのです。
「スマホの方が多い」と分かっていながら、ショップ側はついパソコン本位で考えてしまうようですね。
・・・にも関わらず、システム関係はまだ「スマホはついで」という感覚です。
恐らく、システム周りがまだ対応しきれていないのでしょう。