質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.02%

  • PHP

    17758questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    13820questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    7532questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • WordPress

    5986questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • HTML5

    3385questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

地域を選択したらその地域にあるお店の情報をカード状に並べて表示したい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 205

mokkun0102

score 2

前提・実現したいこと

Webサイトの地域検索機能についての質問です。

日本全国にある、あるジャンルのお店の情報を、選択した地域のものだけ表示させるようにしたいと考えています。
そこで、HTMLには以下のようなプルダウンを設置しました。

プルダウンのソースコード

<FORM name="form">
<SELECT NAME="select">
<option SELECTED> ▼ 地域を選択 </option>
<option value="hokkaido">北海道</option>
<option value="aomori">青森県</option>
<option value="iwate">岩手県</option>
・
・
・
</SELECT>
<INPUT type="button" onclick="if(document.form.select.value){location.href=document.form.select.value;}" value="検索">
</FORM>

途中省略しましたが、47都道府県分です。

始め47つの固定ページを作り、そのリンクをvalueに設定することで実現しようと思っていましたが、あまり内容のないコンテンツをたくさん作りたくないので、他の方法を考えています。
※地域分のタグを作り、そのタグページを表示するというものも、同じ理由でNGとします。

そこで次に考えたのが、店舗ごとの情報をカード状にまとめ、id属性をつけて、そのidとプルダウンのvalueがイコールの時だけカードを並べて表示するような処理ができないかと考えました。
カードの例は下のような感じです。

プルダウンのソースコード

<div class="area-card" id="hokkaido">
<img href="#" />
〇〇 北海道店
住所:△△
電話:000-000-0000
</div>

表示する場所については、同一ページ内のプルダウンの下がベストですが、難しければ他の専用ページへの表示でも構いません。

プログラミング初心者なのでできるかどうか、またできるとしたらどのような記述が必要なのかがわからず困っています。
PHPでできるのか、javascriptを使わなければできないのかも分かりません。

どなたか分かりやすく教えていただけると幸いです。

補足情報(言語/FW/ツール等のバージョンなど)

WordPress:バージョン4.9
サーバー:Xserver

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+4

抽出条件が地域だけなら、各都道府県ごとにファイルをつくって
jsonデータをいれておき、ajaxで受け取るのがシンプルです
さまざなな検索条件が必要ならやはりRDBの導入を検討下さい

 sample

  • main.htm
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('#search').on('click',function(){
    var num=$(this).siblings('[name=pref]').val();
    $('#view').text('');
    if(num!==""){
      $.ajax({
      url:'pref'+num+'.txt',
      dataType:'json',
      }).done(function(data){
        data.map(function(x){
          $('#view').append($('<div><img src="'+x.img+'"><div>'+x.name+'</div><div>'+x.address+'</div><div>'+x.tel+'</div></div>'));
        });
      }).fail(function(xhr,err){
        if(xhr.status==404){
          $('#view').text('ファイルが見つかりません');
        }
        console.log(err);
      });
    }
  });
});
</script>

<form>
<select name="pref">
<option value=""> ▼ 地域を選択 </option>
<option value="01">北海道</option>
<option value="02">青森県</option>
<option value="03">岩手県</option>
</select>
<input type="button" value="検索" id="search">
</form>
<div id="view"></div>
  • pref01.txt
    main.htmと同じディレクトリに置く
[
{"img":"hokkaido_hoge.htm","name":"〇〇 北海道hoge店","address":"△△","tel":"000-000-0000"},
{"img":"hokkaido_fuga.htm","name":"〇〇 北海道fuga店","address":"△△","tel":"000-000-0000"}
]

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/17 15:43

    回答ありがとうございます!

    すみません、無知なものでjsonもajaxもRDBも聞いたことがありません>_<

    プルダウンの選択肢は都道府県のみですが、都道府県ごとのjsonファイル?を作るということでしょうか?

    何もわからなくてすみません...。

    キャンセル

  • 2017/11/17 16:17

    簡単なサンプル付けときました、できる範囲で試してみて下さい

    キャンセル

  • 2017/11/17 18:42

    すみません、お手数おかけしました!
    本当にありがとうございます!

    あまりに知識がなさすぎてサンプルいただいても苦戦しています...。

    キャンセル

  • 2017/11/17 21:28

    所定の名称でファイルを2つ作ってWEB上の適当のなディレクトリに置くだけですが
    うまくうごきませんか?

    キャンセル

  • 2017/11/17 22:35

    WordPressでのmain.htmの場所が分かりませんでした^ ^;

    せっかくサンプルまで作ってくださったのに、自分が無知すぎて上手く動作させられず申し訳ありません...。

    他の方の回答でなんとか動きそうなので、今回はそっちの方法で試してみようと思います。

    ありがとうございました!!

    キャンセル

  • 2017/11/17 22:38

    他の方の回答で解決したようならよかったです
    ちなみにmain.htmは自分で書く前提だったのですが
    既存のhtmlがあるならそれに追記するだけで動いたはずなんですけどね・・・

    キャンセル

  • 2017/11/17 22:43

    なるほどです!
    ただ聞いた話なので詳細はわかりませんが、WordPressはページのリクエストを受けた時に、データベースに格納されたデータをPHPにて組み立てることで、ページを表示しているそうです。
    なので、htmlファイル自体が存在しないとかなんとか...。
    間違っていたらすみません^ ^;

    htmlファイルがあれば上の内容で動くんですね!
    勉強になります>_<

    キャンセル

checkベストアンサー

+3

県ごとのページを作りたくないということですと、wordpressの枠内でやるなら一つのページに書くしかないですよね。
全部のカードをHTMLにベタ書きし、javascriptで制御する、というのはいかがですか。
 
サンプル

document.getElementById('search').addEventListener('click',function(e){
  const pref = document.getElementById('pref').value;
  document.querySelectorAll( `.area-card.show` ).forEach( e => e.classList.remove('show') );
  document.querySelectorAll( `.${pref}` ).forEach( e => e.classList.add('show') );
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/17 22:32

    回答ありがとうございます!
    Lhankor_Mhyさんのやり方を試してみたところ、上手く動作しました!

    とりあえずこれでやっていってまた壁にぶつかったら質問させてください!!
    助かりました^ ^

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 91.02%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    17758questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    13820questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    7532questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • WordPress

    5986questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • HTML5

    3385questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。