こんにちは、AKデザインの円盤です。
2020年になっちゃいました。あけましておめでとうございます。今年も備忘録していくのでよろしくおねがいします。
さて本日は楽天のページ構築のお話の中で裏技的な、来年には使えなくなってるかもしれないお話です。
楽天のスマホは、いまだに<font>と<br>と<table>の世界
ええ？CSSは使えないの？って思うじゃないですか。
ええ、僕も最初はそう思ったんですよ。
楽天GOLDはjsでもCSSでもやりたい放題なんですけれど、それはパソコン用ページの話なんですよね。
楽天RMSの中のPC用販売説明文などにはiframeがいけるので、GOLDのHTML表示させたら、そりゃ色々できるわけですよ。
しかし…
そう、楽天のスマホページのお話です。
楽天のスマホ用ページではjsもCSSも禁止タグ言われて赤い文字が出るんですよ。
divはもちろん使えません。
GOLDのページ呼び出すiframeも普通は使えません。
世の中の楽天を見に来る人は8割はスマホユーザーです。
って楽天が公式にデータ発表しているにも関わらず、楽天のスマホページで使えるタグは極めて原始的だったりしますｗ
そしてスマホページには文字数制限まであって、tableタグでレイアウト凝ったり、お客さんに商品内容わかるように説明文いっぱい入れたら、文字数オーバーですってエラーが出ます。
楽天は商品が売れるほどに手数料で儲かるはずなのに、仕様的に制限かけて売る気がないという話。
表向きな理由は通信環境が弱いとか、パソコンとスマホのスペックの差がある、とかなんとかECコンサルに聞いたんだけど。
もう最近のスマホはオンラインゲームできるくらいハイスペックなんですぜ！
普通に10万円くらいするのでって、それパソコンより高いやん！って時もありますぜ！
うーん、なんとも矛盾した話だ！
誰が見つけた？「=""」とスペース入れるの
というわけで、普通にやったらiframeもjsもCSSも読み込めないんですけれど、下記のコードにしたら、なんでかわからないけど読み込めてしまいます！
<iframe =””
src=”https://www.rakuten.ne.jp/gold/ストアアカウント/任意のフォルダ名/hogehoge.html” width=”300″ height=”150″ frameborder=”0″ scrolling=”no”>
</iframe >
そんな馬鹿な！と思いましたよ。
そんなん出来たら何でもできちゃうじゃない！
って僕も最初は思いましたよ。
まずは下記の文字。
=""
これを開始タグの方に入れると良い。
場所はどこでもいいみたいだけど。
前後に半角スペース入れるのお忘れなく。
2つ入れたり、CSSのlink relのときは=""ではなくスペースだったり使い分けが必要です。
次にスペース。
</iframe >
閉じタグは通常は「</iframe>」って書くのが正解。
だけどこれを「 </iframe > 」ってすると楽天の禁止タグを判別するシステムをすり抜けるんだろうね！
これ最初に発見した人は偶然で見つけたんだろうか？
それとも開発者のリーク情報だったりしたのかな？
どちらにしろこれでレイアウトの自由度は3倍くらいアップする＝お客さんの周回もしやすくなってコンバージョンアップ！やったね！
2020年1月ではまだ使えてます。
まだ動いています。
有名店舗さんもソースみたら使ってます。
そして楽天自身が設定を変えて、この裏技を禁止したら、楽天自体の売上下がるの間違いないです。
（実際、iframeの高さ設定を知り合いがミスっていて、別の商品を紹介するiframeのページが見えてなくて、年末年始の注文が見るからに減った！とぼやいていましたｗ）
なので変更してくるとしたら予告があって、代替の機能を紹介してくると思いますがどうなんでしょうか！
ああ、最後に重要なことを言いますが
裏技なので自己責任で使ってください。
これを多用してたら、急にこの裏技使えなくなって、店舗のレイアウトぐちゃぐちゃになって阿鼻叫喚！ってパターンが簡単に想像できますよ！
CSSでposition:fixed使ってスマホメニュー固定とか見かけるけど、そういうの全部ダメになっちゃうからね；
社内にこの裏技を理解していて、修正対応もできる人がいたらいいけど。
お客さんに納品する場合でも、普通なレイアウトに戻ってこれるようにお店のレイアウト作らないとですよー。
（楽天がずっとこのままにしていたら問題ないんだけど、js使える＝悪さが出来る＝楽天が把握しきれない、で実害出たら本格的に対策してきそうだー！）
