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

ベストアンサー

• a-kuma32018/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 は必ず指定される、という想定であれば、通信を一回にまとめられているので、軽いという言い方はできます。
  
  とは言っても、この程度の量であれば今どきの環境であれば、誤差程度の違いしかありません。
  
  
  

  ---

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

  ---

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

  スター

  • 

    10件のコメントを見る

  • a-kuma3 2018/09/16 13:19:47

    あと、IE で動かなければいけなさそうなので、書き方がちょっと古めです。

    スター

  • a-kuma3 2018/09/16 17:44:02

    ブログの記事にも、この回答のやつ（ひとつめの方）を仕込んでみました。
    http://a-kuma3.hatenablog.com/entry/answer_of_1536391733?key=%E6%9C%AD%E5%B9%8C#second

    スター

  • moon-fondu 2018/09/16 23:46:55

    ありがとうございます、文字は条件によって表示されます(^^;
    ただ、長いコードみたいなのが混じると、途端に表示がされなくなりまして。
    例えば、
    
    -------------------
    大阪 大阪でっせ<br><a href="●●●" target="_blank" rel="nofollow">こんにちは</a>
    広島 広島じゃけえ
    札幌 道産子だべ
    -------------------
    
    とすると、"大阪でっせ"の後ろの
    以降は無視され、表示されなくなったり。
    
    -------------------
    大阪 大阪でっせ→<img src="●●●" width="300" height="250" style="border:none;" alt="ビリケンさん" />
    -------------------
    
    とすると、"大阪でっせ→"までは表示されるのですが、後ろの画像の表示はされないです。
    もし、リンクや画像なども表示できると幸いなのですが。
    お手数ですが再度、お教えいただけますと助かります<m(__)m>
    
    また、別のファイルにデータを持つ形式は、どうもうまくいきませんでして。
    message.txtをサーバーにアップし、
    
    -------------
    
    (function() {～})();</script>
    -------------
    
    を、</head>タグの手前に入れまして。
    質問でいうところのエリア3に、
    
    -------------
    <div id="area-3" style="display: none;">
    <img src="message-logo.png">
    <span class="message"></span>
    </div>
    -------------
    
    を入れてみたのですが。
    message.txtを読み込んでいないのか、大阪、広島、札幌、どれを入れても表示されませんでした。
    message.txtのパーミッションかな？と思ったのですが、755とかにしても関係なかったみたいです。

    スター

  • a-kuma3 2018/09/16 23:56:36

    ただ、長いコードみたいなのが混じると、途端に表示がされなくなりまして。

    回答をちょっとだけ書き換えました。
    /\s+/ の部分を、"\t" に変更しています。
    こちらなら、提示の内容は表示できると思います。
    

    また、別のファイルにデータを持つ形式は、どうもうまくいきませんでして。

    実物を見ないと何とも、という感じなのですが、もしかすると、文字コードの問題かも。
    message.txt は UTF-8 で保存しないとうまく動かないと思います。

    スター

  • moon-fondu 2018/09/17 17:28:21

    a-kuma3さんありがとうございます、うまくいきました！
    たった2文字で長いコードの表示有無が決まるなんて、プログラムは繊細ですね…(^^;)
    message.txt も、SJISでした。
    UTF-8ですと、うまくいきました！
    
    あとすみません、最後に1つだけ、質問なのですが。
    「部分一致で表示させる」ことはできないでしょうか？
    例えば、
    
    大阪 大阪でっせ
    通天閣 大阪 大阪でっせ
    大阪 あべのハルカス 大阪でっせ
    
    と、条件が多く書き連ねるのが煩雑になる場合に。
    
    *大阪* 大阪でっせ
    
    みたいな、「指定の用語を含んでいたらOK」みたいな感じです。
    ワイルドカードを入れても全く無反応みたいで。
    ネットでも「javascript switch case ワイルドカード」等で調べても、どうもピンとくる記事が見つからず…度々お手数お掛け致しますが、もし可能でしたら、よろしくお願い致します<m(__)m>

    スター

  • a-kuma3 2018/09/17 18:10:08

    「部分一致で表示させる」ことはできないでしょうか？

    ふたつ挙げた例では、どちらも以下のコードがあります。

                    var re = new RegExp("^" + decodeURIComponent(m[1]) + "\t");
    

    そこを、以下のように変えてください。

                    var re = new RegExp("^\S*" + decodeURIComponent(m[1]) + "\S*\t");
    

    key とメッセージのデータは、元のままにしておいてください。

    スター

  • a-kuma3 2018/09/17 18:13:11

    あ、いや、元のデータは key の方はタブではなく、空白で区切っておいてください。

    通天閣(空白)大阪(タブ)大阪でっせ
    

    スター

  • moon-fondu 2018/09/17 20:35:21

    ありがとうございます、既出の文字列の場合問題なく表示されております。
    すみません、私の質問の仕方が悪かったかもしれません。
    message.txtの方に記載の、
    
    ---------
    大阪 大阪でっせ
    広島 広島じゃけえ
    札幌 道産子だべ
    ---------
    
    はそのままとしまして。
    「・・・key=文字列」の、"文字列"のところに例えば。
    
    ～～～～～～
    通天閣 大阪
    大阪 あべのハルカス
    ～～～～～～
    
    の文字列が入ったとしても。
    
    「大阪」を部分一致で含むので、エリア3には（「大阪」のみが入った場合と同じく）message.txtで指定した「大阪でっせ」が表示されるようにしたいのですが。
    度々お手数お掛け致します、よろしくお願いします<m(__)m>

    スター

  • a-kuma3 2018/09/17 23:28:02

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

    スター

  • moon-fondu 2018/09/17 23:47:03

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

    スター

その他の回答

• pyopyopyo2018/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 という命令で，外部ファイルを読み込むだけです．余計な処理がありませんので，サーバーにはほとんど負荷は掛かりません

  スター

  • 

    2件のコメントを見る

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

    ありがとうございます。
    
    ------------------------
    <?php
    $filename = sprintf("%d.inc", $_GET['key']);
    if (file_exists($filename)) {
    echo "エリアの情報はこちら！";
    include $filename;
    echo "エリアの情報は以上です！";
    } else {
    echo "エリアの情報はありません";
    }
    ?>
    ------------------------
    
    は、質問でいうところのエリア3に書き込んで、アップしたんですが。
    「エリアの情報はありません」しか出てこない状態です。
    
    文字列の部分を数字のみとしますと。
    
    「大阪」「広島」「札幌」等の、表示内容を変更するための条件と。
    「大阪でっせ」「広島じゃけえ」「道産子だべ」等の、条件に合致して出力する結果内容については。
    どちらに記載しておけばよろしいでしょうか？
    
    お手隙の再度ご回答いただけますと幸いです、よろしくお願い致します<m(__)m>

    スター

  • moon-fondu 2018/09/16 23:51:26

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

    スター

この質問へのコメント

質問の情報

登録日時

2018-09-15 16:11:09

終了日時

2018-09-17 23:47:27

回答条件

1人20回まで

この質問のカテゴリ

• コンピュータ
• 学習・教育

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

人気の質問

• 戦前、バスの通る道で「赤い旗を持って」とは？　林芙美子の童話「蛙」(*)の最後近くで、次のようになって…sibazyun121日前
• 一日だけこっそり過ごせるなら？jqpk0izg117時間前
• ログインしなくて良い質問サイト教えて下さい山田生活112日前
• 下記の動画シリーズに使われているBGMは何の曲でしょうか？ 茜お姉ちゃんがバイトする話　１日目 - ニコニ…匿名質問者13時間前
• 数年前（十年以上前かもしれません）に見たサイトを探しています。 日本の、地域のキリスト教の教会につい…匿名質問者110時間前

メニュー

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

PC版

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