質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    20426questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    5129questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2627questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScriptで作成した検索機能がスマートフォン環境下で表示されません

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 362

qemte

score 2

HTML5でレスポンシブ対応のwebサイトを作成しているのですが、javascriptを用いて作成した検索ボックスが、スマートフォン環境下で確認した時だけ表示されません。
PCではIE、chrome、safariなど主要ブラウザ全てで表示され、検索ボックスとして意図した通りの動作をするのですが、スマートフォン環境で見た際にはiOS、Androidのどのブラウザでも下記のソース部分が表示されず、解決方法が分からない状態です。

<div class="searchInput">
                    <script type="text/javascript"><!--
                        if (navigator.platform.indexOf("Win") != -1) {
                        document.write('<div>キーワード検索&nbsp;<input name="keyword" id="keyword" type="text" size="13" onKeyDown="Ser_Ent(document.getElementById(\'keyword\').value,event,\'\')"><a href="javascript:SearchText(document.getElementById(\'keyword\').value,\'\');" onClick="javascript:SearchText(document.getElementById(\'keyword\').value,\'\');">&nbsp;<img src="'+forDirectoryPath()+'common\/images\/int_search_grn.png" width="20" height="20" alt="キーワード検索" class="iconP"><\/a><\/div>');
                        }else {
                        i=0;
                        if (navigator.plugins[i].filename.indexOf(".") >= 0) {
                        document.write('<div>キーワード検索&nbsp;<input name="keyword" id="keyword" type="text" size="13" onKeyDown="Ser_Ent(document.getElementById(\'keyword\').value,event,\'\')"><a href="javascript:SearchText(document.getElementById(\'keyword\').value,\'\');" onClick="javascript:SearchText(document.getElementById(\'keyword\').value,\'\');">&nbsp;<img src="'+forDirectoryPath()+'common\/images\/int_search_grn.png" width="20" height="20" alt="キーワード検索" class="iconP"><\/a><\/div>');
                        }else {
                        document.write('<div id="searchInput" style="display:none"><\/div>');
                        }
                    }
                    --></script>

他の箇所で使っているJavaScriptはスマートフォン環境下でもきちんと動作をしているため、JavaScript自体が全く使えない状況ではないようです。
また、この表記はXHTML1.0で書かれたソースを流用しているため、その辺りが原因かとも思いましたが、PC環境下できちんと動作している分、どこに原因があるのか、どこから何を試してみるべきかわからない状態です。

webページ制作についてはほとんど初心者なため、是非皆様のお力をお借りしたいです。
何か思い当たる事柄について、些細なことでもいいのでコメントをいただけると助かります。
どうぞよろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+2

document.writeの行が長いので何をやっているのかがわかりづらいですが、動きをわかりやすくするためにコードを簡略化してみますと、

if (navigator.platform.indexOf("Win") != -1) { // 条件1
  document.write(/* HTML(1) */);
}
else {
  i = 0;
  if (navigator.plugins[i].filename.indexOf(".") >= 0) { // 条件2
  document.write(/* HTML(2) */);
}
else {
  document.write('<div id="searchInput" style="display:none"><\/div>');
}

といった感じになります。つまり、

  • 条件1に合致すればHTML(1)を追加し、
  • 条件1に合致せず条件2に合致すればHTML(2)を追加し、
  • 条件1,2どちらにも合致しない場合は<div></div>を追加するが何も表示しない

ということになります。

条件1は、navigator.platformに文字列Winが含まれていればtrue、というものですので、一般的には、「Windowsであれば」という扱いになります。よって、iOS, Android, Linux, Macはいずれも当てはまりません。

条件2は、i = 0ですので、navigator.plugins[0]で示されるプラグインのファイル名に.(ピリオド)が含まれていればtrue、となります。(なぜi = 0しかチェックしないのか、等、意図が今ひとつ不明ですが、可能な限り推測すると、)恐らく、「プラグインがインストールされていれば」ということになるのではと推察されます。よって、通常はプラグインをインストールすることのないiOSやAndroidでは当てはまりません。

よって、少なくともiOSやAndroidでは条件1,2いずれにも当てはまらないため、最後のelse、つまり非表示の<div>タグが追加されて終わることとなります。(なお、プラグインをインストールしていないMac, Linux等でも同じ結果になります。)

もし、プラットフォーム(Windows, Mac, Linux, iOS, Android, 等)やプラグインの有無等を問わず検索ボックスを追加したいということで、条件判断が不要となるようであれば、

<div class="searchInput">
    <div>キーワード検索&nbsp;<input name="keyword" id="keyword" type="text" size="13" onKeyDown="Ser_Ent(document.getElementById(\'keyword\').value,event,\'\')"><a href="javascript:SearchText(document.getElementById(\'keyword\').value,\'\');" onClick="javascript:SearchText(document.getElementById(\'keyword\').value,\'\');">&nbsp;<img src="'+forDirectoryPath()+'common\/images\/int_search_grn.png" width="20" height="20" alt="キーワード検索" class="iconP"><\/a><\/div>
</div>

で済むようにも思えます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/24 21:58

    非常に丁寧に説明いただき、大変勉強になる回答でした。
    まだまだ勉強中の身ではありますが、少しずつ自分の中で使える技術にしていけるよう頑張ります。
    この度は、本当にありがとうございました。

    キャンセル

+2

原因はほかの方が書いてくださっていますので別のことを。

XHTML1.0ということで、"application/xhtml+xml"で出力されていると思いますが、これではdocument.write()が動きません。
ほかの方法をお勧めします。

HTML5においても非推奨です。
https://www.w3.org/TR/html/webappapis.html#documentwrite

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/24 21:59

    回答ありがとうございました。原因が分かり、やっと対策法が見えてきました。
    他の方の回答も参考に、自身でもいろいろ試してみたいと思います。
    この度は、本当にありがとうございました。

    キャンセル

+1

標準ではない実装かつスマートフォン用ブラウザにはそもそも必要のない機能なので、そういう挙動になるのでは。

【window.navigator.plugins - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/NavigatorPlugins/plugins

非標準
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.


コードについては document.write を使うころの実装なので、何を除外したかったのかがわかりませんが、下記コードで十分ではないでしょうか。

<script type="text/javascript">
document.write('<div>キーワード検索&nbsp;<input name="keyword" id="keyword" type="text" size="13" onKeyDown="Ser_Ent(document.getElementById(\'keyword\').value,event,\'\')"><a href="javascript:SearchText(document.getElementById(\'keyword\').value,\'\');" onClick="javascript:SearchText(document.getElementById(\'keyword\').value,\'\');">&nbsp;<img src="'+forDirectoryPath()+'common\/images\/int_search_grn.png" width="20" height="20" alt="キーワード検索" class="iconP"><\/a><\/div>');
</script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/24 22:03

    回答ありがとうございました。昔のコードをそのまま引っ張ってきていましたが、皆様の回答で解決方法が見つかりました。この度は、本当にありがとうございました。

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20426questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    5129questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2627questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。