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

Question

moon-fondu

236

235もっと見る

2100pt

ウェブ制作学習・教育

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に"?"が含まれてたんで、いけると思ったんですが。

回答の条件

1人20回まで

登録：2018/09/08 16:28:53
終了：2018/09/15 13:43:48

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

質問者から

moon-fondu2018/09/08 18:40:07

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

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

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

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

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

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

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

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

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

規約違反として通知

No.2

kaoato236862018/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;

他1件のコメントを見る

■
＞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コードを挿入すると、通常は動作しないので、ソースそのまま表示されます。

2018/09/15 13:29:34

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

2018/09/15 13:41:32

ぽけっとしすてむ 2018/09/08 16:56:02

MDNのドキュメントにあるように「何がうまくいかなかったのか？」をまずは読みなおす事をお勧めしますが、問題が発生しているページを回答者に向けて開示しておくと解決しやすくなります。

※ReferenceError: ’x’ is not defined　の「x」には、定義(JavaScriptから見て準備されて)いない関数などが表示されます。
開示できない場合は、ソースコードを問題の補足等に含めると回答が得られやすくなります。

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

a-kuma3 · Accepted Answer · 2018-09-09T10:07:53+09:00

No.1

a-kuma3497321542018/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 ～ ?> の外側）です。

はてなブログに埋め込んだ記事を書いてみました。
以下、パラメータをつけたページへのリンク。

他5件のコメントを見る

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

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

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

2018/09/09 10:10:02

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

回答に書いたコードは、微妙に古いです。

2018/09/09 10:44:42

遅くなりましてすみません。
ありがとうございます、うまくいきました！

前回の質問のアドバイスもありがとうございます。
コードの中身をしっかり理解しないといけませんよね、
コピペするだけでなく、a-kuma3さんが書いてくださった
コードを一字一句理解できるようになりたいと思います(^^;

今の職場の環境も、ITの部署なのになぜかブラウザがIEなんですよ…
chromeやfirefox入れる際は申請しないといけず。
セキュリティが強すぎで、外部へのメール送信も許可がないとNG、
gmailにもアクセス不可でトホホです(;´д｀)

あとすみません、もう1点、可能であればお答えいただきたいのですが。
msgの代わりに、文字のリンクや画像を貼ることはできますでしょうか？
HTMLコードみたいなのを入れると、なぜか表示されなくなってしまいまして…
度々お手数お掛け致しますが、よろしくお願いします<m(__)m>

2018/09/15 10:33:44

今の職場の環境も、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);

2018/09/15 11:58:04

うまくいきました！ありがとうございます(^^♪

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

2018/09/15 13:43:31

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

その程度であれば、「重くなる」という意味では、人間には分からない程度でしかないと思います。

ただ、回答に書いたコードだと選択肢を増やしていくのがものすごく面倒です。

ブログの方に書いた「今どきの...」のやつみたいに、変わるところだけを別にくくり出したりするとか、あの形式でもやっぱり入力は面倒なので、タブ区切りでデータを埋め込んでおいて(*)、そこからキーとメッセージを読み取るようにするとか。
(*) Excel に元になるデータを持っておいて、そこからコピペするイメージ

後は、php なので、キーとメッセージを持っておく DB のテーブルを作っておいて、そこから読みだすとか。

2018/09/15 15:10:34

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

2018/09/15 16:12:01

a-kuma3 · Accepted Answer · 2018-09-09T10:07:53+09:00

No.1

a-kuma3497321542018/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 ～ ?> の外側）です。

はてなブログに埋め込んだ記事を書いてみました。
以下、パラメータをつけたページへのリンク。

他5件のコメントを見る

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

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

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

2018/09/09 10:10:02

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

回答に書いたコードは、微妙に古いです。

2018/09/09 10:44:42

遅くなりましてすみません。
ありがとうございます、うまくいきました！

前回の質問のアドバイスもありがとうございます。
コードの中身をしっかり理解しないといけませんよね、
コピペするだけでなく、a-kuma3さんが書いてくださった
コードを一字一句理解できるようになりたいと思います(^^;

今の職場の環境も、ITの部署なのになぜかブラウザがIEなんですよ…
chromeやfirefox入れる際は申請しないといけず。
セキュリティが強すぎで、外部へのメール送信も許可がないとNG、
gmailにもアクセス不可でトホホです(;´д｀)

あとすみません、もう1点、可能であればお答えいただきたいのですが。
msgの代わりに、文字のリンクや画像を貼ることはできますでしょうか？
HTMLコードみたいなのを入れると、なぜか表示されなくなってしまいまして…
度々お手数お掛け致しますが、よろしくお願いします<m(__)m>

2018/09/15 10:33:44

今の職場の環境も、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);

2018/09/15 11:58:04

うまくいきました！ありがとうございます(^^♪

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

2018/09/15 13:43:31

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

その程度であれば、「重くなる」という意味では、人間には分からない程度でしかないと思います。

ただ、回答に書いたコードだと選択肢を増やしていくのがものすごく面倒です。

ブログの方に書いた「今どきの...」のやつみたいに、変わるところだけを別にくくり出したりするとか、あの形式でもやっぱり入力は面倒なので、タブ区切りでデータを埋め込んでおいて(*)、そこからキーとメッセージを読み取るようにするとか。
(*) Excel に元になるデータを持っておいて、そこからコピペするイメージ

後は、php なので、キーとメッセージを持っておく DB のテーブルを作っておいて、そこから読みだすとか。

2018/09/15 15:10:34

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

2018/09/15 16:12:01

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

質問者から

ベストアンサー

a-kuma3497321542018/09/09 10:07:53

その他の回答（1件）

a-kuma3497321542018/09/09 10:07:53ここでベストアンサー

kaoato236862018/09/12 01:35:01

コメント（1件)

この質問への反応（ブックマークコメント）