[旧] WEB向上中 -2ページ目

[旧] WEB向上中

webデザイナーとして日々奮闘する中、色々と忘れず頑張っていければと、web周りの技術や情報をメモっています。

楽天では、ヘッダーやサイドメニューなどを、楽天Goldにおいているhtmlをiframeで読み込ます手法が良く使われていますが、その時に注意することです。

iframeで読み込まれているhtml内のリンクが、IE6だと効かなくなります。
(注)IE Testerでのチェックなので、実際のIE6では問題無いのかもしれません。

これが昔からなのかどうかは不明ですが、結構ほとんどの出展店が対応していないので、最近になって楽天の用意するJSが何かしているのでしょうか…。なぞです。
とりあえず念のためにという事で、対応方法です。

まずはiframeとして読み込まれるhtmlで、jsを読み込みます。
<script type="text/javascript" src="http://image.rakuten.co.jp/com/js/d/common/jquery-1.4.2.min.js" language="JavaScript"></script>
<script type="text/javascript" src="http://www.rakuten.ne.jp/gold/(店舗名)/original.js" language="JavaScript"></script>
最初のjsは楽天内で使われているjQueryを拝借します。(jQueryを別途gold内に置いて、そちらを読み込ませても問題ありませ。
2行目は、こちらが楽天good内に用意するjsで、ここに対応するソースを書き込みます。 実際のjsの内容です。
$(function() {
if (navigator.userAgent.toLowerCase().indexOf("msie") != -1 ) {
var elements_list_a = $('a');
for (var i=0,list_max=elements_list_a.length; list_max>i; i++) {
elements_list_a.eq(i).click( function() {
var tmp_link = $(this).attr('href'); //【1】
parent.location.href = tmp_link; //【2】
});
}
}
});
現象として確認しているのは、マウスポインタまでは変更するがクリックしても飛ばないという現象です。
ですので、ユーザーがクリックした要素の飛び先を取得し【1】、その飛び先にJavaScriptで誘導しています。【2】 こんな事の為に(しかもIE6の為に)わざわざJavaScriptを実行するのもどうかと思いますが、一応対処方法です。

一番良いのはiframeを使わずに、RMSのテンプレートでヘッダー、フッターを管理するのが一番なのでしょうが、使いずらいですからね~。

楽天市場ではこれは楽天の仕様なんだと思っていても、他の出展者さんのサイトを見ていると、あれこれ消えてるけどどうやったの?みたいな事が多々あります。(勉強になります)

その1つに商品ページで、登録された商品画像の下に「拡大して見る」というテキストリンクがありますが、それを消せる方法があるようです。
消し方は以下の通りです。

【1】RMS管理画面より「お店を作る」の「デザイン設定」をクリックします。
  WEB向上中!-RMS1


【2】ページ下の方にある「各種編集・設定」より「固定文言・フォントカスタマイズ」をクリックします。
  WEB向上中!-RMS2


【3】ページ中ごろよりちょっと下あたりにある「問い合わせ、ユーザー機能に関する項目」より「商品画像拡大リンク」に入っている「+拡大して見る」の文章を削除し、空にします。
  WEB向上中!-RMS3


これで、画像下のテキストリンクは消えます。
あっても無くても良いのかもしれませんが、見た目が不細工なので私はあまり好きではありません。
まだまだ他にもたくさんあるんだろうなと思っています。
またその時は情報をお伝えしたいと思います。
楽天で無事開店が終わり、ちょっと一息ついた時に色々と気になる部分が出てきます。
そんな中でこれってどうやって直すんだ!みたいな箇所があるので、その部分の修正をご紹介です。

楽天が自動で生成してくれる会社概要ページやメルマガ登録ページのグローバルメニューを触る方法です。

【1】RMS管理画面より、お店を作るの中の「旧R-Storefront」の「go!」ボタンをクリックします。
  $WEB向上中!-旧RMS1

【2】「新規登録」の「分類ページ」をクリック。
  $WEB向上中!-旧RMS2

【3】分類ページ名にグローバルナビゲーションといった適当な名前を入れ、親ページで表示する分類ページ名に半角スペースを入れて「登録」ボタンを押します。
  $WEB向上中!-旧RMS3

【4】上部ナビより「ページ一覧」をクリックし、「グローバルナビゲーション」をクリックします。
  WEB向上中!-旧RMS4
                 ▼
  WEB向上中!-旧RMS5

【5】この画面の、「デザイン」の項目の「ナビボタン」より行いたい作業を選択し、「GO」ボタンを押してそれぞれの作業を行います。
  $WEB向上中!-旧RMS6

旧R-Storefront画面に入った時にもナビボタンの編集は行えるのですが、それは自動で吐き出されるトップページのみで中ページには何の影響も与えません。ですので、別途中用にいじる必要があります。

会社概要ページなどをいじる為に別途ページをこしらえる必要があるという、何ともわかりにく設定です。こんな感じで複雑に絡み合っている部分が、色々なところにあるので本当に困ります。
もうちょっと使いやすく設計して欲しいものです。
FFXIII-2のプロモーションサイトがHTML5実装だそうで、4gamerさんのサイトで、製作経緯のインタビューが掲載されています。4Gmaerでは珍しく、今回サイトを制作したクレアテックの方々がインタビューを受けていて、サイト制作者にフューチャーした内容となっています。
スクウェア・エニックスとマイクロソフトがHTML5+Azureを使って展開するプロモーションサイトの最新技術を見る | 4Gmaer.net

スクウェア・エニックスとしても、Flashのようなリッチコンテンツを作りたいが、もっと軽くしたいという思いから今回の考えにいたったようです。マイクロソフトが協力していて、IE9のプロモキャンペーンも兼ねているようで、HTML5未対応ブラウザでアクセスするとIE9にしましょうと言われます。

FF13-2
FFXIII-2プロモーションサイト



IE6を自動でアップデートするとアナウンスしてたので、かなり本気で旧ブラウザの排除と、シェア回復の為にがんばろうとしているのかもしれません。HTML5の普及にIEがまた足を引っ張らないといいのですが。

ちなみにマイクロソフトの方のIE9に対するHTML5の実装の考え方はこちら。
IE 9がHTML5の機能の一部を実装しない理由
楽天市場は契約したら、簡単にお店が構えられると思ったら大きな間違いで思いもよらない事がいっぱい起きます。(笑)
そこで、契約後開店までに注意(私もつまずきました…)したいことをまとめました。

■とにもかくにもクレジット審査
もしも決算方法にクレジット決算を利用される予定なら、すぐに設定が必要です。クレジット決算は審査があるのですが、これが結構時間が掛かります。だいたい2週間ちょっと。楽天は開店準備中でも利用料は取られるので、1日でも早くオープンしたい所ですので、すぐにクレジット審査を行いましょう。


■開店中は開店中にあらず
基本情報設定の店舗ステータス変更で、開店中か改装中かを選択できますが、規約後直後は開店中にしていても、楽天市場のどこのカテゴリーにも表示されないので、開店中にしていて問題ないです。
本当の意味で開店するには、準備完了後、楽天のチェックが入ります。ここでここはこうして下さいとか色々指摘を受けるのでそれをクリアして初めて正式な開店となります。本当の開店は楽天が行うので
審査完了後→開店は、何もすることはありません。


■検索結果が出ない!…のです。
楽天RMSで組み込める店舗内検索は、楽天の審査が完了するまでは正常に動きません。店舗内検索は、楽天市場に正式に商品が関連付けられて初めて動作する機能なので、審査前に動かなくても故障では無いので安心してください。(楽天の作業具合によっては、オープンから1日程掛かるかもしれません)


■画像が更新されない!
楽天で登録した画像を、別の画像に変更した場合に、画像が反映されない時があります。これは楽天の困った仕様なので、焦らず待ちましょう。どれくらい待つかというと、場合によっては1日です。(公式でも最大24時間掛かるとアナウンスされています。ちなみに楽天glodは最大1時間だそうです)
ですので、すぐに画像を入れ替えたいときは、新規に画像を登録し、そちらのパスに変更すると良いと思います。

私が特にええっ!と思った事は以上の4つですが、きっと細々した事も含めると色々出てきます。ですので、楽天市場の開店は余裕を持って行う事をオススメします。(クライアントにも、ぜひそのように説明してあげましょう)