moon-fondu回答ポイント 2100ptウォッチ 1

URLによってWebページ内のコンテンツを変えたい

タイトルの通りで、やり方をいろいろ調べておりました。
php、javascript、jQueryなど、いろんな方法が出てくるんですが。
その中で一番参考になったのは、

JavaScriptでURLのパラメータやアンカーを判断して処理を変更する方法 ｜ Tips Note by TAM
https://www.tam-tam.co.jp/tipsnote/javascript/post9911.html

です。この方法でうまくいくと思ったんですが…できなかったんです。
開発コードとかもみて、

ReferenceError: "x" is not defined - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Not_defined

が出てきて、そのエラーも消えるようにファイルを編集してみたんですけど。
無理でした、phpファイルだったからでしょうか。
上のサイトで紹介されてるのはhtmlの時でしたし。自分のサイトのURLに"?"が含まれてたんで、いけると思ったんですが。

• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• a-kuma32018/09/09 10:07:53

  満足2000pt

  「どんな方法でもいいので」ということなので、元のコードを修正するのではなく、動くコードを提示します。
  javascript です。
  表示したいところに、以下を埋め込んでください。

  <script>
  (function() {
      var m = /\bkey=(.*?)(&|$)/.exec(location.search);
      if (m) {
          var msg = "";
          switch (decodeURIComponent(m[1])) {
          case "大阪":
              msg = "大阪でっせ";
              break;
          case "広島":
              msg = "広島じゃけえ";
              break;
          }
          if (msg != "") {
              document.write('<p class="message-by-key">' + msg + "</p>");
          }
      }
  })();
  </script>
  

  PHP であれば、HTML を書く場所（<?php ～ ?> の外側）です。
  
  はてなブログに埋め込んだ記事を書いてみました。
  以下、パラメータをつけたページへのリンク。

  • http://a-kuma3.hatenablog.com/entry/answer_of_1536391733?key=大阪
  • http://a-kuma3.hatenablog.com/entry/answer_of_1536391733?key=広島
  • http://a-kuma3.hatenablog.com/entry/answer_of_1536391733?key=東京タワー

  スター

  • 

    7件のコメントを見る

  • a-kuma3 2018/09/09 10:10:02

    ちょっと気になるのは前回の質問で。
    もし、仕事の一環であれば、動くコードを手に入れて理解することも重要ですが、思い通りに動かない目の前のコードの

    • 思い通りに動かない理由
    • それを解決する方法

    を分かることも大事かな、という気がします。
    ＃ 元のコードを見ないと、エスパーにしか回答できません　:-)

    スター

  • a-kuma3 2018/09/09 10:44:42

    後、html とか javascript の話は、対象になる環境とかも結構 重要。
    「自分のブログで使いたいので」であれば、最近のブラウザだけ意識しておけば良いかな、とか、「社内のシステムで使いたいので」であれば、IE だろうからバージョンを聞いておかなきゃ、とか。
    
    回答に書いたコードは、微妙に古いです。

    スター

  • moon-fondu 2018/09/15 10:33:44

    遅くなりましてすみません。
    ありがとうございます、うまくいきました！
    
    前回の質問のアドバイスもありがとうございます。
    コードの中身をしっかり理解しないといけませんよね、
    コピペするだけでなく、a-kuma3さんが書いてくださった
    コードを一字一句理解できるようになりたいと思います(^^;
    
    今の職場の環境も、ITの部署なのになぜかブラウザがIEなんですよ…
    chromeやfirefox入れる際は申請しないといけず。
    セキュリティが強すぎで、外部へのメール送信も許可がないとNG、
    gmailにもアクセス不可でトホホです(;´д｀)
    
    あとすみません、もう1点、可能であればお答えいただきたいのですが。
    msgの代わりに、文字のリンクや画像を貼ることはできますでしょうか？
    HTMLコードみたいなのを入れると、なぜか表示されなくなってしまいまして…
    度々お手数お掛け致しますが、よろしくお願いします<m(__)m>

    スター

  • a-kuma3 2018/09/15 11:58:04

    今の職場の環境も、ITの部署なのになぜかブラウザがIEなんですよ…

    やっぱり。ちょっと古い書き方にしておいて正解　:-)
    
    

    あとすみません、もう1点、可能であればお答えいただきたいのですが。
    msgの代わりに、文字のリンクや画像を貼ることはできますでしょうか？
    HTMLコードみたいなのを入れると、なぜか表示されなくなってしまいまして

    できますよ。
    回答のコードにも、P タグを入れてます。
    多分、表示されないのは、ダブルクォートじゃないかな、と想像します。
    リンクや画像だと URL を属性に書きますけど、ダブルクォートで括ってますよね、きっと。
    document.write のパラメータも文字列である必要があるので、やっぱり括ることになるのですけれど、ダブルクォートで括った文字列の中にダブルクォートが出てくると、そこで文字列が切れちゃうんで、エラーになってるんじゃないかな、と。
    ↓のような感じだと、赤くしたダブルクォートで文字列が切れちゃうんです。
    document.write("<img src="a-kuma3.png">" + msg);
    
    ダブルクォートを文字列として出力するには、\でエスケープするか、外側をシングルクォートで括ります。
    document.write("<img src=\"a-kuma3.png\">" + msg);
    document.write('<img src="a-kuma3.png">' + msg);

    スター

  • moon-fondu 2018/09/15 13:43:31

    うまくいきました！ありがとうございます(^^♪
    
    もし気が向いたらお答えいただきたいのですが…今回はcaseが"大阪"と"広島"だけだったかと思いますが。
    仮にこのcaseが100、200と増えた場合、サイトの表示は重くなると思いますか？

    スター

  • a-kuma3 2018/09/15 15:10:34

    仮にこのcaseが100、200と増えた場合、サイトの表示は重くなると思いますか？

    その程度であれば、「重くなる」という意味では、人間には分からない程度でしかないと思います。
    
    ただ、回答に書いたコードだと選択肢を増やしていくのがものすごく面倒です。
    
    ブログの方に書いた「今どきの...」のやつみたいに、変わるところだけを別にくくり出したりするとか、あの形式でもやっぱり入力は面倒なので、タブ区切りでデータを埋め込んでおいて(*)、そこからキーとメッセージを読み取るようにするとか。
    (*) Excel に元になるデータを持っておいて、そこからコピペするイメージ
    
    後は、php なので、キーとメッセージを持っておく DB のテーブルを作っておいて、そこから読みだすとか。

    スター

  • moon-fondu 2018/09/15 16:12:01

    a-kuma3さんありがとうございました。
    もし可能でしたら、条件が多い場合の処理につきまして、
    再度お力をお貸し頂けないでしょうか。
    http://q.hatena.ne.jp/1536995470
    よろしくお願い致します。

    スター

その他の回答

• moon-fondu

  2018/09/08 16:29:39

  どんな方法でもいいので、

  （1）URLが http://●●●/data.php?key=大阪

  の時、Webページの真ん中あたりに「大阪でっせ」と出す。

  （2）URLが http://●●●/data.php?key=広島

  の時、Webページの真ん中あたりに「広島じゃけえ」と出す。

  （3）URLが http://●●●/data.php?key=東京タワー

  の時（（1）（2）以外の時）、Webページの真ん中あたりには何も出さない。

  といったサイトを作りたいです。

  よろしくお願い致します。

• kaoato2018/09/12 01:35:01

  満足100pt

  ■

  JavaScriptでURLのパラメータやアンカーを判断して処理を変更する方法 ｜ Tips Note by TAM https://www.tam-tam.co.jp/tipsnote/javascript/post9911.html です。この方法でうまくいくと思ったんですが…できなかったんです

  
  

  大丈夫だと思うのですが、上記のサンプルは一部「jQuery」を使ってるので、jQuery組み込まないと上記の部分は動作しないですが、大丈夫ですか？
  
  ■
  ＞どんな方法でもいいので、
  
  PHPでよいのなら、こんな感じ。
  

  <?php
  
  $output_str="";
  
  if(strcmp($_GET["key"],"大阪") == 0){
      $output_str="大阪でっせ";
  }
  if(strcmp($_GET["key"],"広島") == 0){
      $output_str="広島じゃけえ";
  }
  
  //出力する
  echo $output_str;
  

  スター

  • 

    3件のコメントを見る

  • moon-fondu 2018/09/15 10:35:14

    ありがとうございます。
    jqueryを使うには何か実装しないといけないんですか？
    知らなかったです…。
    
    すみせん、お教えくださったコードを、<body>タグ以下に入れたのですが。
    条件関係なく、そのまま表示されてしまいまして…(;'∀')

    スター

  • kaoato 2018/09/15 13:29:34

    ■
    ＞jqueryを使うには何か実装しないといけないんですか？
    

    
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    

    
    
    jquery本体を事前に読み込んでおくことは必要ですという意味で書きました。
    
    jquery本体が読み込まれてないと、jquery関係のものが未定義でエラーになって動作しないとかになったはずです。
    
    
    ■
    ＞すみせん、お教えくださったコードを、<body>タグ以下に入れたのですが。
    ＞条件関係なく、そのまま表示されてしまいまして…(;'∀')
    
    サンプルだけをdata.phpと保存して実行してみてください。
    動作すると思います。
    
    ほかところに挿入するときは、phpコードを挿入する要領でないと、ソースがそのまま表示されます。
    
    たとえば、拡張子が。.htmlとか.htmとかのものにPHPコードを挿入すると、通常は動作しないので、ソースそのまま表示されます。

    スター

  • moon-fondu 2018/09/15 13:41:32

    ありがとうございます、勉強になります！

    スター

この質問へのコメント

• ぽけっとしすてむ2018/09/08 16:56:02
  MDNのドキュメントにあるように「何がうまくいかなかったのか？」をまずは読みなおす事をお勧めしますが、問題が発生しているページを回答者に向けて開示しておくと解決しやすくなります。
  
  ※ReferenceError: ’x’ is not defined　の「x」には、定義(JavaScriptから見て準備されて)いない関数などが表示されます。
  開示できない場合は、ソースコードを問題の補足等に含めると回答が得られやすくなります。

質問の情報

登録日時

2018-09-08 16:28:53

終了日時

2018-09-15 13:43:48

回答条件

1人20回まで

この質問のカテゴリ

• ウェブ制作
• 学習・教育

この質問に含まれるキーワード

人気の質問

• この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…匿名質問者312日前
• 不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者112日前
• 日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者1日前
• 共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者211日前
• 内定してほしいポケモンはいますか？匿名質問者1日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ