地域情報ページ作成方法の解説

地域情報ページ作成方法

地域情報ページの作成方法に関して、解説したいと思います。
このページは、以下の二つのファイルで構成されています。

  1. index.html: HTMLファイル。

  2. Gotochi.js: JavaScriptファイル(JSプログラムを書きます)。

  3. BootStrapのサンプルをダウンロード

作成方法に関しては以下の通りです。

  1. HTMLファイルは、BootStrap exampleからダウンロードしてきたファイルを修正する形で作成しました。

  2. JSファイルは一からすべて作成しました。

HTMLファイルに関しては、BootStrapを使用するため次の設定をしています。

  • ダウンロードしたBootStrapサンプルの読み込みの設定(linkタグ)。
  • 外部のJS(Masonry)の読み込みの削除(linkタグ)。
  • ツイッターカードの設定。

BootStrap以外の設定を変更しました。以下の手順を見ていけばご理解いただけると思います。

作成手順

  1. BootStrap exampleからサンプルをダウンロードしてきます。

  2. 解凍して「masonry」フォルダのindex.htmlファイルをコピーして
    適当な場所に配置します。※マイドキュメントフォルダなど。

  3. mansonryの読み込み部分を削除する。

  4. 中身のコンテンツboddyタグ内部を修正し、自分の意図する形に修正。
    ※この部分に関しては、BootStrapとHTMLの学習が必要になります。

  5. JSを起動するためのファンクションをbodyタグのonload属性に設定する。
    ※Gotochi.jsファイルを読み込むためのlinkタグを追加する

  6. JSプログラムからアクセスしたいタグにIDを付ける。

  7. 選択したときに取得したい情報(hokkaido)などをdata属性に設定する。

  8. 「5」で設定したファンクションの実装を行う。

  9. JSプログラムで読み込むデータ配列の作成。※後ほど説明します。

  10. 適当な都道府県を表示してみる。

  11. 複数の都道府県表示を行うため、データの追加作成を行う。

JSの実装に関して。

JSプログラム、JavaScriptプログラムに関して解説します。
JavaScript、略してJSは主にウェブブラウザでHTMLタグを取得し操作する事
を行います。しかし、これ以外にもNode.js, Vue.jsなどいろいろな
ライブラリがあり、それぞれに使い方があるのでそれを調べて学習する必要
がありますが、それは必要になったときに学習するということでよいと
思います。

どういうことか?といいますと、Node.jsにしろVue.jsにしろJavaScriptで
あることには変わりないので、JavaScriptがわかれば学習にかかる時間は
少なくて済むということです。

余談。

筆者は、それなりに年を取っているので、JavaScriptの基本がわかるレベル
にあります。なので、Node.jsなどもある程度、作成するものによりますが
よほどでない限り、ドキュメントを見ながらプログラムを作成することが
できます。ある程度熟達したプログラマーはほとんどこの領域にあるので
気軽に質問してよいと思います。

むしろ積極的に質問してほしいです。なぜなら「知っていることをしゃべる
のは楽しいから」です。

JSプログラムの内容に関して

今回作成したプログラムに関して解説いたします。プログラムの仕様として
以下のものがあります。※自分で決めた仕様になります。

  1. 都道府県を選択したときに、それに紐づく市町村を表示する。
  2. 市町村が選択されたときに、次の項目を表示する。
    ・各市町村に関するYoutube動画の表示。
    ・対象の市町村がどの地域・地方に存在するか表示。
    ・各市町村のホームページ。
    ・各市町村の情報があるツイッター。
    ・楽天APIを使用し「XX市町村のふるさと納税」で取得できる商品一覧。

仕様の実現方法。

「1.都道府県を選択したときに、それに紐づく市町村を表示する」に関して。

各都道府県を選択するためのセレクトボックスを作成し、47都道府県を
OPTIONタグでセットする。具体的にはOPTIONタグの表示部分に都道府県名、
data属性に各都道府県のキー(hokkaidoなど)をセットして各項目を選択し
たときに、キーをJSプログラムで取得できるようにする。
そして、キーは、データ配列の大文字(UpperCase)で以下のように定義する。
「大文字の各都道府県キー = [市町村名, 市町村のホームページURL
, ユーチューブ埋め込みURL, Twitter埋め込みHTMLコード, facebookURL
, 地域のイメージファイルURL, 対象になる地域名(よみ)];」

プログラムの内容に関して。

・HTMLファイルに読み込むファンクションを設定。
bodyタグのonload属性で「selectLv1()」というファンクションを起動する
ように設定する。
これにより、HTMLファイルが表示されたときに「selectLv1()」が起動する。

・JSプログラム。
都道府県セレクトボックスと市町村セレクトボックスにイベントリスナー(
ファンクション)を登録する、これによりセレクトボックスの値を選択した
ときに起動する処理を定義することができる。

具体的なコード

画面表示時にonloadで実行するファンクション「selectLv1()」で処理を行っています。
行っていることは、都道府県、市町村のセレクトボックスの変更時に起動するファンクションを登録しているだけです。
まずは、コード全体をみてから、細かい部分を解説します。

コード全体

function selectLv1() {
    // 市町村のイベントリスナー登録
    let citySelectBox = document.getElementById('shityoson');
    citySelectBox.addEventListener('change', (event) => {
      // データ取得
      let cityObj = event.srcElement[event.srcElement.selectedIndex];
      let cityUrl = cityObj.value;
      let cityName = cityObj.text;
      // 表示する市町村の値セット
      document.getElementById('targetCity').innerHTML = cityName; // 表示する市町村
      let cityPage = document.getElementById('targetCityHomePage');
      cityPage.src = '';
      cityPage.innerHTML = cityName + ' <a href="' + cityUrl + '"  target="_blank">ホームページを開く</a> :  <span> ';// ホームページリンク
      // まちのよみがな
      document.getElementById('yomi').innerText = cityObj.dataset.yomi;
      // 地方のイメージ
      document.getElementById('tiho').src = cityObj.dataset.tiho;
      // 地方の読み仮名
      document.getElementById('tihoYomi').innerHTML = '<a href="' + cityObj.dataset.tiho + '"><b>' + cityObj.dataset.tihoYomi + ' ちほう</b></a>※リンク先に大きい地図';

      // FaceBookのリンク
      cityPage.innerHTML += cityObj.dataset.facebook == '' ? "<font size='3'>FaceBookリンク</font>" : "<a href='" + cityObj.dataset.facebook + "'><font size=\'3'>FaceBookへのリンク</font></a></span>";
      // ふるさと納税対象市町村
      document.getElementById('hurusatoNozei').innerText = cityName + "のふるさと納税";
      let hurusato = document.getElementById('hurusatoNozeiPage');
      hurusato.src = '';
      hurusato.src =  "https://zenryokuservice.com/project/rakuten/php/rakutenCatalog.php?category=" + cityName + "ふるさと納税";
      // 画面のリロード処理が走ってくれるようだ。。。
      hurusato.onload = function() {
//        let hurusatoDoc = this.contentWindow;
//        hurusatoDoc.getElementById('category').value = cityName + "ふるさと納税"
//        hurusatoDoc.getElementById('reloadButton').onClick();
      };

      // Youtubeの表示
      document.querySelector('#targetUrl').childNodes[0].src = cityUrl;// iframeで表示するURL
      document.getElementById('videoComment').innerText = cityObj.dataset.you == '' ? "動画の選別中です" : cityName + "の動画です";
      document.getElementById('youtubeVideo').src = cityObj.dataset.you == '' ? "https://www.youtube.com/embed/dZMAphYDiYo" : cityObj.dataset.you;

      // Tweetの埋め込み
      let tweetTitle = document.getElementById('tweetTitle').innerHTML = cityObj.dataset.tweet == '' ? "Twitter表示の工事中です" : cityObj.dataset.tweet;
      let tweetUrl = document.createElement('script');
      tweetUrl.src = 'https://platform.twitter.com/widgets.js';
      tweetUrl.onload = function(e) { e.target.src };
      let tweetEle = document.getElementById('tweetEmbbed');
      tweetEle.appendChild(tweetUrl);
    });

    // 都道府県のSELECTボックスの取得
    let selectbox = document.getElementById("todohukenList");

    // 初回はイベントリスナーを起動するのでイベント生成
    const eve = new Event('change');

    // 都道府県のイベントリスナーの登録
    selectbox.addEventListener('change', (event) => {
      // 選択した都道府県をタイトルにセット
      let todohuObj = event.srcElement[event.srcElement.selectedIndex];
      let todohuIdx = todohuObj.dataset.todohu;
      let totohuTItle = document.getElementById("targetTodohu");
      // シンボルイメージセット
      let img = document.getElementById('todohuFlag');
      img.src = KENKI[todohuIdx];
      // 都道府県名のセット
      totohuTItle.innerHTML = todohuObj.text;

      // セレクトボックスを初期化する
      let shityoson = document.getElementById("shityoson");
      if (shityoson.hasChildNodes()) {
        while(shityoson.childNodes.length > 0) {
            shityoson.removeChild(shityoson.firstChild);
        }
      }
      // 指定都道府県の市町村をセットする(YoutubeUrlも取得)
      let targetSityosons = TODOHU[todohuIdx];
      for (let i = 0; i < targetSityosons.length; i++) {
        let option = document.createElement("option");
        option.text = targetSityosons[i][0];
        option.value = targetSityosons[i][1];
        // YoutubeUrlを格納
        option.dataset.you = targetSityosons[i][2] == '' ? '' : targetSityosons[i][2];
        // ツイッター埋め込み
        option.dataset.tweet = targetSityosons[i][3] == '' ? "ツイートの検索中" : targetSityosons[i][3];
        // FacebookURLの埋め込み
        option.dataset.facebook = targetSityosons[i][4] == '' ? '' : targetSityosons[i][4];
        // まちのよみがな
        option.dataset.yomi= targetSityosons[i][5] == '' ? '' : targetSityosons[i][5];
        // 地方の画像
        option.dataset.tiho = targetSityosons[i][6] == '' ? '' : targetSityosons[i][6];
        // 地方の読み
        option.dataset.tihoYomi = targetSityosons[i][7] == '' ? '' : targetSityosons[i][7];

        // セレクトボックスに追加
        shityoson.appendChild(option);
      }
      // 市町村の初回イベント処理
      const even = new Event('change');
      citySelectBox.dispatchEvent(even);
    });

    // 初回のイベント処理実行
    selectbox.dispatchEvent(eve);
}

市町村のイベント処理ファンクション

  1. 市町村のセレクトボックスを取得する

    let citySelectBox = document.getElementById('shityoson');
  2. 市町村セレクトボックスにイベント処理を登録する、変更時のイベント「change」を指定して登録する

    citySelectBox.addEventListener('change', (event) => {
    });
  3. 市町村の変更時の処理
    セレクトボックスの選択した項目、OPTIONタグを取得する

      // データ取得
      let cityObj = event.srcElement[event.srcElement.selectedIndex];

    OPTIONタグから設定している値を取得する(URL, data属性の値)

      let cityUrl = cityObj.value;
      let cityName = cityObj.text;

    HTMLでID「targetCity」としているタグに市町村名をセット

      // 表示する市町村の値セット
      document.getElementById('targetCity').innerHTML = cityName; // 表示する市町村

    「targetCityHomePage」としているタグを取得する

      let cityPage = document.getElementById('targetCityHomePage');

    このタグにリンクを設定、同様に読み仮名などを設定する、ふるさと納税に関しては依然作成したPHPファイルにパラメータを渡して起動する

      cityPage.src = '';
      cityPage.innerHTML = cityName + ' <a href="' + cityUrl + '"  target="_blank">ホームページを開く</a> :  <span> ';// ホームページリンク
      // まちのよみがな
      document.getElementById('yomi').innerText = cityObj.dataset.yomi;
      // 地方のイメージ
      document.getElementById('tiho').src = cityObj.dataset.tiho;
      // 地方の読み仮名
      document.getElementById('tihoYomi').innerHTML = '<a href="' + cityObj.dataset.tiho + '"><b>' + cityObj.dataset.tihoYomi + ' ちほう</b></a>※リンク先に大きい地図';
      // FaceBookのリンク
      cityPage.innerHTML += cityObj.dataset.facebook == '' ? "<font size='3'>FaceBookリンク</font>" : "<a href='" + cityObj.dataset.facebook + "'><font size=\'3'>FaceBookへのリンク</font></a></span>";
      // ふるさと納税対象市町村
      document.getElementById('hurusatoNozei').innerText = cityName + "のふるさと納税";
      let hurusato = document.getElementById('hurusatoNozeiPage');
      hurusato.src = '';
      hurusato.src =  "https://zenryokuservice.com/project/rakuten/php/rakutenCatalog.php?category=" + cityName + "ふるさと納税";
      // 画面のリロード処理が走ってくれるようだ。。。
      hurusato.onload = function() {
    //        let hurusatoDoc = this.contentWindow;
    //        hurusatoDoc.getElementById('category').value = cityName + "ふるさと納税"
    //        hurusatoDoc.getElementById('reloadButton').onClick();
      };
    
      // Youtubeの表示
      document.querySelector('#targetUrl').childNodes[0].src = cityUrl;// iframeで表示するURL
      document.getElementById('videoComment').innerText = cityObj.dataset.you == '' ? "動画の選別中です" : cityName + "の動画です";
      document.getElementById('youtubeVideo').src = cityObj.dataset.you == '' ? "https://www.youtube.com/embed/dZMAphYDiYo" : cityObj.dataset.you;
    
      // Tweetの埋め込み
      let tweetTitle = document.getElementById('tweetTitle').innerHTML = cityObj.dataset.tweet == '' ? "Twitter表示の工事中です" : cityObj.dataset.tweet;
      let tweetUrl = document.createElement('script');
      tweetUrl.src = 'https://platform.twitter.com/widgets.js';
      tweetUrl.onload = function(e) { e.target.src };
      let tweetEle = document.getElementById('tweetEmbbed');
      tweetEle.appendChild(tweetUrl);

    都道府県のイベント処理ファンクション

    市町村のイベントとほぼ変わらないが、都道府県が選択された後に、市町村のセレクトボックスの値をセットするようにしている。

    // 都道府県のイベントリスナーの登録
    selectbox.addEventListener('change', (event) => {
      // 選択した都道府県をタイトルにセット
      let todohuObj = event.srcElement[event.srcElement.selectedIndex];
      let todohuIdx = todohuObj.dataset.todohu;
      let totohuTItle = document.getElementById("targetTodohu");
      // シンボルイメージセット
      let img = document.getElementById('todohuFlag');
      img.src = KENKI[todohuIdx];
      // 都道府県名のセット
      totohuTItle.innerHTML = todohuObj.text;
    
      // セレクトボックスを初期化する
      let shityoson = document.getElementById("shityoson");
      if (shityoson.hasChildNodes()) {
        while(shityoson.childNodes.length > 0) {
            shityoson.removeChild(shityoson.firstChild);
        }
      }
      // 指定都道府県の市町村をセットする(YoutubeUrlも取得)
      let targetSityosons = TODOHU[todohuIdx];
      for (let i = 0; i < targetSityosons.length; i++) {
        let option = document.createElement("option");
        option.text = targetSityosons[i][0];
        option.value = targetSityosons[i][1];
        // YoutubeUrlを格納
        option.dataset.you = targetSityosons[i][2] == '' ? '' : targetSityosons[i][2];
        // ツイッター埋め込み
        option.dataset.tweet = targetSityosons[i][3] == '' ? "ツイートの検索中" : targetSityosons[i][3];
        // FacebookURLの埋め込み
        option.dataset.facebook = targetSityosons[i][4] == '' ? '' : targetSityosons[i][4];
        // まちのよみがな
        option.dataset.yomi= targetSityosons[i][5] == '' ? '' : targetSityosons[i][5];
        // 地方の画像
        option.dataset.tiho = targetSityosons[i][6] == '' ? '' : targetSityosons[i][6];
        // 地方の読み
        option.dataset.tihoYomi = targetSityosons[i][7] == '' ? '' : targetSityosons[i][7];
    
        // セレクトボックスに追加
        shityoson.appendChild(option);
      }
      // 市町村の初回イベント処理
      const even = new Event('change');
      citySelectBox.dispatchEvent(even);
    });

Javaでも学習したが、3項演算子が使っていますので、補足です。
<書式>

論理式 ? TRUEの場合 : FALSEの場合;

サンプル

let ans = 1 < 10 ? "aaa" : "bbb";

上記の変数「ans」には"aaa"が入る。

投稿者:

takunoji

音響、イベント会場設営業界からIT業界へ転身。現在はJava屋としてサラリーマンをやっている。自称ガテン系プログラマー(笑) Javaプログラミングを布教したい、ラスパイとJavaの相性が良いことに気が付く。 Spring framework, Struts, Seaser, Hibernate, Playframework, JavaEE6, JavaEE7などの現場経験あり。 SQL, VBA, PL/SQL, コマンドプロント, Shellなどもやります。

コメントを残す