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
id:moon-fondu

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

(1)URLが http://●●●/data.php?key=大阪

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

(2)URLが http://●●●/data.php?key=広島

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

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

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

といったサイトを作りたいです。
よろしくお願い致します。

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4728ベストアンサー獲得回数20252018/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件のコメントを見る
id:a-kuma3

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

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

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

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

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

2018/09/15 15:10:34
id:moon-fondu

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

2018/09/15 16:12:01

その他の回答(1件)

id:a-kuma3 No.1

a-kuma3回答回数4728ベストアンサー獲得回数20252018/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件のコメントを見る
id:a-kuma3

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

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

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

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

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

2018/09/15 15:10:34
id:moon-fondu

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

2018/09/15 16:12:01
id:kaoato No.2

kaoato回答回数144ベストアンサー獲得回数612018/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件のコメントを見る
id:kaoato


>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
id:moon-fondu

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

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

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません