サイトのURLの文字列を判断してコンテンツの一部を変えたい

今、一つのphpファイルが、

http://●●●/data.php?key=文字列

と、ブラウザに打ち込むと表示されるとします。
そしてこのファイルのソースコードが、仮にエリア1~5に分かれているとします。

この状態におきまして。
URLの“文字列”の中身によって、エリア3のみ表示内容を変えたいのです。
ただ、この“文字列”の種類は豊富で、100、200…と、たくさんあったとします。
1つのphpファイルに全て条件を書き込むと、ファイルが重くなってしまう?表示が遅くなる?
かもしれませんので。

別の何らかのファイルを読み込んだり、"文字列"を含むデータベースや
サーバーに置いたExcelのファイル等を調べて、一致した情報をエリア3に出すみたいな。
方法がありましたら、お教えいただけないでしょうか。

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

回答の条件
  • 1人20回まで
  • 登録:2018/09/15 16:11:09
  • 終了:2018/09/17 23:47:27

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4752ベストアンサー獲得回数20392018/09/16 13:19:16

ポイント3500pt

1つのphpファイルに全て条件を書き込むと、ファイルが重くなってしまう?表示が遅くなる?
かもしれませんので。

前の質問のコメントでも書きましたが、数百程度であれば遅くなるかどうかは、あまり気にする必要がありません。
どちらかというと、その数百のデータをどうやって管理する(最初の入力、追加、変更など)か、を気にした方が良いです。
データベースを使うのは大げさな気もするので、タブ区切りでデータを持つ形をふたつほど。

前回の質問でやり取りした感じだと、表示の対象となるエリアには切り替えたいメッセージ以外に画像やらリンクやらがありそうなので、以下のような前提をしています。

  • 対象のエリアには id 属性で目印をつける(id="area-3")
  • 対象エリア内のメッセージを表示する領域には class 属性で目印をつける (class="message")



まず、ひとつめは、ページ内の別のタグにデータだけを持っておく形式。
id="message-data" のタグの中に、key と文字列をタブ区切りで書いておきます。

<!-- key と文字列の対応 -->
<script type="application/data" id="message-data">
大阪    大阪でっせ
広島    広島じゃけえ
札幌    道産子だべ
</script>

<!-- 表示する処理 -->
<script>
(function() {
    var m = /\bkey=(.*?)(&|$)/.exec(location.search);
    if (m) {
        window.addEventListener("load", function(ev) {
            var e = document.getElementById("message-data");
            var tmp = e.innerHTML.split("\n");
            var msg = "";
            var key = decodeURIComponent(m[1]);
            for (var i = 0 ; i < tmp.length ; ++i) {
                var tmp2 = tmp[i].split(/\t/);
                if (tmp2.length > 1) {
                    var re = new RegExp(tmp2[0]);
                    if (re.test(key)) {
                        console.log(tmp2[0]);
                        msg = tmp2[1];
                        break;
                    }
                }
            }
            if (msg != "") {
                var e = document.getElementById("area-3");
                var em = e.querySelector(".message");
                em.innerHTML = msg;
                e.style.display = "";
            }
        });
    }
})();
</script>

<!-- 表示するエリア -->
<div id="area-3" style="display: none;">
    <img src="message-logo.png">
    <span class="message"></span>
</div>


もうひとつは、別のファイルにデータを持つ形式。
ページと同じところにある message.txt というファイルに以下のように key と文字列をタブ区切りでデータを持っています。

大阪    大阪でっせ
広島    広島じゃけえ
札幌    道産子だべ

こちらがページ内のスクリプトなど。

<!-- 表示する処理 -->
<script>
(function() {
    var m = /\bkey=(.*?)(&|$)/.exec(location.search);
    if (m) {
        window.addEventListener("load", function(ev) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "message.txt");     // ★message.txt からデータを取得する
            xhr.onload = function(ev) {
                var tmp = ev.target.responseText.split("\n");
                var msg = "";
                var key = decodeURIComponent(m[1]);
                for (var i = 0 ; i < tmp.length ; ++i) {
                    var tmp2 = tmp[i].split(/\t/);
                    if (tmp2.length > 1) {
                        var re = new RegExp(tmp2[0]);
                        if (re.test(key)) {
                            console.log(tmp2[0]);
                            msg = tmp2[1];
                            break;
                        }
                    }
                }
                if (msg != "") {
                    var e = document.getElementById("area-3");
                    var em = e.querySelector(".message");
                    em.innerHTML = msg;
                    e.style.display = "";
                }
            };
            xhr.send();
        });
    }
})();
</script>

<!-- 表示するエリア -->
<div id="area-3" style="display: none;">
    <img src="message-logo.png">
    <span class="message"></span>
</div>

後者は、ページとは別にデータをあらためて読みに行くので通信が一回増えます。
その代わり、ページ内のスクリプトは小さいので、key がパラメータとして指定されないケースがそれなりにあるのなら、平均して軽くなるかも、という期待はあります。

前者は、ページの中にデータを抱えてしまっているので、key がパラメータとして指定されない場合には使いもしないデータを毎回読んでいる、という言い方はできます。
その代わり、key は必ず指定される、という想定であれば、通信を一回にまとめられているので、軽いという言い方はできます。

とは言っても、この程度の量であれば今どきの環境であれば、誤差程度の違いしかありません。



追記です。
コメントを受けて、回答のコードをほんの少しだけ変更しています。


追記です。
部分一致にしたいというコメントを受けて、回答のコードをちょっとだけ変更しました。

他8件のコメントを見る
id:a-kuma3

回答のコードを少しだけ変更しました。
確認してみてください。

2018/09/17 23:28:02
id:moon-fondu

a-kuma3さんありがとうございます!うまくいきました!!
助かりました~(^^;
はてなポイントでしかお礼できず恐縮です。。。ありがとうございました<m(__)m>

2018/09/17 23:47:03

その他の回答(1件)

id:a-kuma3 No.1

a-kuma3回答回数4752ベストアンサー獲得回数20392018/09/16 13:19:16ここでベストアンサー

ポイント3500pt

1つのphpファイルに全て条件を書き込むと、ファイルが重くなってしまう?表示が遅くなる?
かもしれませんので。

前の質問のコメントでも書きましたが、数百程度であれば遅くなるかどうかは、あまり気にする必要がありません。
どちらかというと、その数百のデータをどうやって管理する(最初の入力、追加、変更など)か、を気にした方が良いです。
データベースを使うのは大げさな気もするので、タブ区切りでデータを持つ形をふたつほど。

前回の質問でやり取りした感じだと、表示の対象となるエリアには切り替えたいメッセージ以外に画像やらリンクやらがありそうなので、以下のような前提をしています。

  • 対象のエリアには id 属性で目印をつける(id="area-3")
  • 対象エリア内のメッセージを表示する領域には class 属性で目印をつける (class="message")



まず、ひとつめは、ページ内の別のタグにデータだけを持っておく形式。
id="message-data" のタグの中に、key と文字列をタブ区切りで書いておきます。

<!-- key と文字列の対応 -->
<script type="application/data" id="message-data">
大阪    大阪でっせ
広島    広島じゃけえ
札幌    道産子だべ
</script>

<!-- 表示する処理 -->
<script>
(function() {
    var m = /\bkey=(.*?)(&|$)/.exec(location.search);
    if (m) {
        window.addEventListener("load", function(ev) {
            var e = document.getElementById("message-data");
            var tmp = e.innerHTML.split("\n");
            var msg = "";
            var key = decodeURIComponent(m[1]);
            for (var i = 0 ; i < tmp.length ; ++i) {
                var tmp2 = tmp[i].split(/\t/);
                if (tmp2.length > 1) {
                    var re = new RegExp(tmp2[0]);
                    if (re.test(key)) {
                        console.log(tmp2[0]);
                        msg = tmp2[1];
                        break;
                    }
                }
            }
            if (msg != "") {
                var e = document.getElementById("area-3");
                var em = e.querySelector(".message");
                em.innerHTML = msg;
                e.style.display = "";
            }
        });
    }
})();
</script>

<!-- 表示するエリア -->
<div id="area-3" style="display: none;">
    <img src="message-logo.png">
    <span class="message"></span>
</div>


もうひとつは、別のファイルにデータを持つ形式。
ページと同じところにある message.txt というファイルに以下のように key と文字列をタブ区切りでデータを持っています。

大阪    大阪でっせ
広島    広島じゃけえ
札幌    道産子だべ

こちらがページ内のスクリプトなど。

<!-- 表示する処理 -->
<script>
(function() {
    var m = /\bkey=(.*?)(&|$)/.exec(location.search);
    if (m) {
        window.addEventListener("load", function(ev) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "message.txt");     // ★message.txt からデータを取得する
            xhr.onload = function(ev) {
                var tmp = ev.target.responseText.split("\n");
                var msg = "";
                var key = decodeURIComponent(m[1]);
                for (var i = 0 ; i < tmp.length ; ++i) {
                    var tmp2 = tmp[i].split(/\t/);
                    if (tmp2.length > 1) {
                        var re = new RegExp(tmp2[0]);
                        if (re.test(key)) {
                            console.log(tmp2[0]);
                            msg = tmp2[1];
                            break;
                        }
                    }
                }
                if (msg != "") {
                    var e = document.getElementById("area-3");
                    var em = e.querySelector(".message");
                    em.innerHTML = msg;
                    e.style.display = "";
                }
            };
            xhr.send();
        });
    }
})();
</script>

<!-- 表示するエリア -->
<div id="area-3" style="display: none;">
    <img src="message-logo.png">
    <span class="message"></span>
</div>

後者は、ページとは別にデータをあらためて読みに行くので通信が一回増えます。
その代わり、ページ内のスクリプトは小さいので、key がパラメータとして指定されないケースがそれなりにあるのなら、平均して軽くなるかも、という期待はあります。

前者は、ページの中にデータを抱えてしまっているので、key がパラメータとして指定されない場合には使いもしないデータを毎回読んでいる、という言い方はできます。
その代わり、key は必ず指定される、という想定であれば、通信を一回にまとめられているので、軽いという言い方はできます。

とは言っても、この程度の量であれば今どきの環境であれば、誤差程度の違いしかありません。



追記です。
コメントを受けて、回答のコードをほんの少しだけ変更しています。


追記です。
部分一致にしたいというコメントを受けて、回答のコードをちょっとだけ変更しました。

他8件のコメントを見る
id:a-kuma3

回答のコードを少しだけ変更しました。
確認してみてください。

2018/09/17 23:28:02
id:moon-fondu

a-kuma3さんありがとうございます!うまくいきました!!
助かりました~(^^;
はてなポイントでしかお礼できず恐縮です。。。ありがとうございました<m(__)m>

2018/09/17 23:47:03
id:pyopyopyo No.2

pyopyopyo回答回数363ベストアンサー獲得回数922018/09/16 18:15:49

ポイント50pt

PHPのみで実装するなら次のように実装するのが簡単で
サーバへの負担も少ないとおもいます

STEP-1) 別ファイルの準備
keyで指定する"文字列"を
そのままファイル名にして個別のコンテンツを用意します

以下の例ではセキュリティ面やサーバへの負担を考慮して

  • 文字列の部分は数字のみ.例えば1とか300とか.
  • 拡張子は".inc"

で統一するものとします

このルールで,たとえば以下のようなファイルを用意します

  • 1.inc
  • 2.inc
  • 300.inc

STEP-2) `PHPのスクリプトの例

以下のコードで,
keyで指定されたファイルがあればそのファイルの中身を表示
ファイルが無ければ「エリアの情報はありません」と表示するようになります

<html>
共通のコンテンツ

<?php
$filename = sprintf("%d.inc", $_GET['key']);
if (file_exists($filename)) {
        echo "エリアの情報はこちら!";
        include $filename;
        echo "エリアの情報は以上です!";
} else {
        echo "エリアの情報はありません";
}
?>
</html>

要は include という命令で,外部ファイルを読み込むだけです.余計な処理がありませんので,サーバーにはほとんど負荷は掛かりません

id:moon-fondu

ありがとうございます。

------------------------
<?php
$filename = sprintf("%d.inc", $_GET['key']);
if (file_exists($filename)) {
echo "エリアの情報はこちら!";
include $filename;
echo "エリアの情報は以上です!";
} else {
echo "エリアの情報はありません";
}
?>
------------------------

は、質問でいうところのエリア3に書き込んで、アップしたんですが。
「エリアの情報はありません」しか出てこない状態です。

文字列の部分を数字のみとしますと。

「大阪」「広島」「札幌」等の、表示内容を変更するための条件と。
「大阪でっせ」「広島じゃけえ」「道産子だべ」等の、条件に合致して出力する結果内容については。
どちらに記載しておけばよろしいでしょうか?

お手隙の再度ご回答いただけますと幸いです、よろしくお願い致します<m(__)m>

2018/09/16 23:48:44
id:moon-fondu

"key="で指定する文字列が、数字であることはほとんどないので。
「大阪.inc」というファイルを作り、ファイル内に表示させたい内容を書いてアップしたのですが。
"大阪"が文字化けしてしまったり。
「osaka.inc」にして、ファイル内に内容を記載、アップして試してみたのですが。
やはり「エリアの情報はありません」と出てきてしまいます。

2018/09/16 23:51:26

コメントはまだありません

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

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

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

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