【楽天アプリ】検索窓での検索結果について

Question

お世話になっております。

弊社の楽天ショップサイトは楽天GOLDで作りこみをしております。
ショップ内に検索窓を設けているのですが
（スマホ画面下固定グローバルメニューの中の「SEARCH」です）
スマホでトップページの検索窓から検索した際に不具合が起こっている状態です。
ブラウザは問題ないのですが、楽天アプリの方で検索窓から商品を検索すると
なぜか検索結果が商品ページに飛んでしまいます。

例えば、商品のキーワードを検索窓に打ち込み、
そのあとで虫眼鏡のマークを押すと
問題なく検索結果が出てくるのですが
キーワードを打ち込み、そのままスマホのキーボードの「開く」を押して
検索をかけると、弊社の商品ページに飛んでしまうという現象です。
その上、飛んだ先の商品ページはランダムで表示されており、
決まった1つの商品だけに飛ぶわけでもありません。

ブラウザでは問題なく、どんな手順で検索してもちゃんと検索結果に飛ぶのですが、
楽天アプリでのみこのような現象が起こります。
なにが原因になっているのか分からず、質問させていただきました。

弊社サイトのURLを「投稿内容について報告する」リンクより
お送りさせていただきます。
お手数をおかけしますが、ブラウザとアプリの違いを検証していただけますと
大変助かります。
よろしくお願い致します。

Answer

ECマスターズの田中です。

アプリ内のブラウザでは開発者ツールによる分析ができず、
原因の特定が非常に困難となっております。

原因を調べるために、１つずつ動作を確認させていただく必要がございますので、
まずは一度、検索窓を囲むタグから
target="_top"
を削除した上で、動作をご確認いただきますようお願いします。

Answer

ECマスターズ
田中様

ご返答ありがとうございます。

やはりアプリ内分析は難しいですよね。
ブラウザならなんとか解決できるかなと思ってはいましたが
アプリ内だけでの問題でしたので、
こればかりは自身の力だけでは不可能だと思い、質問させていただきました。

先ほど、検索窓を囲むタグから
target="_top"を削除し、再度アプリの方で動作確認しましたが
以前と変わらない結果となっております。
ブラウザでは問題がないのに、
アプリになると上手く動作しないのはやはりHTMLに問題があるのでしょうか？
それとも読み込んでいるcssやjavaが原因なのでしょうか。

Answer

ECマスターズの田中です。

> ブラウザでは問題がないのに、
> アプリになると上手く動作しないのはやはりHTMLに問題があるのでしょうか？
> それとも読み込んでいるcssやjavaが原因なのでしょうか。

HTML上の構造に、特に問題があるようには見えないことと、
検索フォームを送信して特定の商品ページに移動するという
因果関係がわからないため、
原因がどこにあるのかを特定することが非常に難しく、
原因となりそうな要因を変更しながら確認していく必要がございます。

スマイルさんのトップページは、
PC・SPいずれも、GOLDの「index.html」となっており、
SPの場合は、本来のトップページからタグを利用してリダイレクトされているようですが、
こちらを、公式のトップページ切替設定で実現していただくといかがでしょうか。

具体的な方法ですが、
GOLDの「index.html」をコピーして
「index_sp.html」という名前でアップロードしていただき、
https://navi-manual.faq.rakuten.net/design/000009546
上記トップページ切替設定にて、
スマートフォン用トップページ切替 を
楽天GOLDで作成したトップページを表示する に
ご変更いただく、という形になります。

解決しない場合はもとに戻していただいて結構ですが、
戻す前に一度、私にて動作を確認させていただきたく思います。

Answer

ご返信ありがとうございます。

早速、トップページ切替設定にて
スマートフォン用トップページ切替を
ご指導いただいた通りに行いました。
ですが、やはり解決されません。
反映に時間がかかっている可能性はありますか？
先程変更したばかりなので、明日またこちらで確認させていただきますが
反映が問題になっている可能性が低いとしたら
前の状態と変わっていない状態です。

お手間をおかけ致しますが
動作確認をしていただいてもよろしいでしょうか。
よろしくお願い致します。

Answer

ECマスターズの田中です。

動作確認を行いましたが、
やはり解決していないようです。

また、
https://24.rakuten.co.jp/
上記楽天24の検索フォームと比較して
異なる点がいくつか見つかりましたので、
トップページ設定をもとに戻していただいた上で、
以下の変更をお試しいただけますでしょうか。

最初に、検索フォームを囲むタグの
method属性をpostに変更の上、
accept-charset="euc-jp"
上記属性を新たに追加していただきますようお願いします。

以上２点を変更すると、下記のような形式になります。


次に、タグの中に、

タグを加えていただきますようお願いします。
このタグのまま加えていただいても結構です。

見た目の調整が難しい場合、
CSSの「display:hidden;」で隠すと、ボタンの動作が無効になる可能性がございますので、
「width:1px;height:1px;」などで、なるべく見た目への影響を抑えていただきますようお願いします。

以上計３点、ご変更の上、
改めて動作をご確認いただきますようお願いします。

Answer

ご返信ありがとうございます。

確認していただきましてありがとうございました。
こちらも確認しましたが、やはり解決しておりませんでした。

1時間程前から、田中様にご指導いただきました計3点を加え、
試している段階です。
ですが、PCのブラウザの方で反映しているかを
開発ツールでスマホ表示にして確認しているのですが
一番最初は反映しているにもかかわらず、
そのページからリロードすると反映前の状態に戻ってしまいます。
状態としては、
新規ウィンドウで確認したら反映している→リロード→反映前に戻る→新規ウィンドウで～（以下繰り返し）
となっており、実際に本当にちゃんと反映しているのか不安です。
ですので、再度動作確認していただいてもよろしいでしょうか。

また、検索窓から特定の商品ページに飛んでしまうという件について
先ほど判明したのですが、
どうやら、スマホ表示で閲覧した時の
バナーの下に設置しております
横スライドの中に設定してある計4商品が
ランダムで表示されているようなのです。
（添付した画像の赤枠で囲っている部分です）
この部分が関係しているのでしょうか？

引き続きよろしくお願い致します。###HR######IMG05d44ad2f65b7787d16c70b427f9781f3.pngIMG0######BR###

Answer

ECマスターズの田中です。

私にて動作を確認させていただいたところ、
確かに「index.html」にて修正されていることを確認したのですが、
アプリ内で反映後の内容を確認できない状況となっておりました。

スマイルさんにて、「index.html」を修正していただいた後、
トップページ切替設定の スマートフォン用トップページ切替 を
GOLDのままにされており、
結果として、アプリ含め、スマートフォンで閲覧すると、
修正されていない「index_sp.html」を読み込むようになっておりました。

スマートフォン用トップページ切替 を 
「通常のトップページを表示する」に戻していただくか、
改めて「index.html」をコピーして「index_sp.html」を上書きしていただき、
アプリ内のブラウザで、修正後の内容を確認できる状態にしていただきますようお願いします。

> この部分が関係しているのでしょうか？

はい、タグの中にタグが含まれていないことにより、
おっしゃる部分の領域がタップされた扱いになっている可能性がございます。
（以外の２つの変更点が影響している可能性もございます）

Answer

ご返信ありがとうございます。

確認していただきありがとうございました。

こちらで「index.html」を修正する前に
スマートフォン用トップページの切替を
「通常のトップページを表示する」に戻しておりましたが
戻ったことになってなかったということでしょうか。
先ほど、「通常のトップページを表示する」に確実に戻した後に
念のため「index.html」をコピーして「index_sp.html」を上書き致しましたところ
ブラウザ、アプリでも反映後の内容を確認できるようになりました。
動作を確認していただけますと幸いです。
遅くなり申し訳ございません。

> タグの中にタグが含まれていないことにより、
> おっしゃる部分の領域がタップされた扱いになっている可能性がございます。
> （以外の２つの変更点が影響している可能性もございます）

やはりその可能性があるんですね。
こちらで一度、スクロールの領域内で検索フォームを出して
検索しているのが原因なのでは、と思い
スクロール領域外のところで検索をしてみましたが
結果は同じでした。

Answer

ECマスターズの田中です。

ご対応ありがとうございました。
私にて、反映後の内容を確認させていただいたのですが、
やはり解決しておりませんでした。

遅い時間にお知らせすることになり
大変申し訳ありませんが、
を削除して、
表示の乱れをなくしていただきますようお願いします。

反映後の内容をLINEのアプリ内ブラウザなどで
確認したのですが、
問題なく検索できましたので、
楽天アプリの仕組みとの相性ではないかと考えております。

さらに原因を追求される場合は、
トップページから、お客さんにアクセスされることない
隠しリンクより、トップページのコピーへのリンクを張っていただき、
リンク先のページで、たとえば横スライドを削除していただくなど、
変化を加えながら、検索をお試しいただきますようお願いします。

Answer

ご返信ありがとうございます。

LINEのアプリ内ブラウザでの確認はしておりませんでしたので
そちらでの結果のご報告誠にありがとうございます。
ここまでくると、やはり楽天アプリとの相性と考えた方が
一番しっくりくるのかもしれません。

では、は削除し、
表示の乱れの改善をしておきます。
今後のアドバイスもありがとうございます。

これまで分析していただきありがとうございました。
大変お世話になりました。
今後ともよろしくお願い致します。