デジタルチャイルド日記

コンピュータ関連のいろいろメモを残していく子供部屋です。

JQueryで都道府県選択用ドロップダウン

システム開発 JQuery

JQueryMobileを使って、地域選択＆都道府県選択を実験をしてみたので、その覚書です。

 

基本的にJQueryであろうとJQueryMobileであろうとやることは変わりません。つまり、

 

「地方の選択をするイベント処理内で、都道府県のリストを再構築する。」

 

です。<span>などでWrapする方法もあるようですが、JQueryMobileでうまく動かなかったので、今回は再構築する方法にしました。

 

■HTML 

<div class="ui-corner-all custom-corners">
  <div class="ui-bar ui-bar-a">
    <h3>検索条件</h3>
  </div>
  <div class="ui-body ui-body-a">
    <select name="areaselector">
      <option value="00">全国</option>
      <option value="01">北海道・東北地区</option>
      <option value="02">関東地区</option>
      <option value="03">中部・北陸地区</option>
      <option value="04">関西地区</option>
      <option value="05">中国地区</option>
      <option value="06">四国地区</option>
      <option value="07">九州・沖縄地区</option>
    </select>
    <select name="preselector">
    </select>
  </div>
</div>

■JavaScript 

// 地域と都道府県の一覧
var areaPreList = {
  "00":{
    "01":"北海道",
    "02":"青森県",
    "03":"岩手県",
    "04":"宮城県",
    "05":"秋田県",
    "06":"山形県",
    "07":"福島県",
    "08":"茨木県",
    "09":"栃木県",
    "10":"群馬県",
    "11":"埼玉県",
    "12":"千葉県",
    "13":"東京都",
    "14":"神奈川県",
    "15":"新潟県",
    "16":"富山県",
    "17":"石川県",
    "18":"福井県",
    "19":"山梨県",
    "20":"長野県",
    "21":"岐阜県",
    "22":"静岡県",
    "23":"愛知県",
    "24":"三重県",
    "25":"滋賀県",
    "26":"京都府",
    "27":"大阪府",
    "28":"兵庫県",
    "29":"奈良県",
    "30":"和歌山県",
    "31":"鳥取県",
    "32":"島根県",
    "33":"岡山県",
    "34":"広島県",
    "35":"山口県",
    "36":"徳島県",
    "37":"香川県",
    "38":"愛媛県",
    "39":"高知県",
    "40":"福岡県",
    "41":"佐賀県",
    "42":"長崎県",
    "43":"熊本県",
    "44":"大分県",
    "45":"宮崎県",
    "46":"鹿児島県",
    "47":"沖縄県"},
  "01":{
    "01":"北海道",
    "02":"青森県",
    "03":"岩手県",
    "04":"宮城県",
    "05":"秋田県",
    "06":"山形県",
    "07":"福島県"},
  "02":{
    "08":"茨木県",
    "09":"栃木県",
    "10":"群馬県",
    "11":"埼玉県",
    "12":"千葉県",
    "13":"東京都",
    "14":"神奈川県"},
  "03":{
    "15":"新潟県",
    "16":"富山県",
    "17":"石川県",
    "18":"福井県",
    "19":"山梨県",
    "20":"長野県",
    "21":"岐阜県",
    "22":"静岡県",
    "23":"愛知県",
    "24":"三重県"},
  "04":{
    "25":"滋賀県",
    "26":"京都府",
    "27":"大阪府",
    "28":"兵庫県",
    "29":"奈良県",
    "30":"和歌山県"},
  "05":{
    "31":"鳥取県",
    "32":"島根県",
    "33":"岡山県",
    "34":"広島県",
    "35":"山口県"},
  "06":{
    "36":"徳島県",
    "37":"香川県",
    "38":"愛媛県",
    "39":"高知県"},
  "07":{
    "40":"福岡県",
    "41":"佐賀県",
    "42":"長崎県",
    "43":"熊本県",
    "44":"大分県",
    "45":"宮崎県",
    "46":"鹿児島県",
    "47":"沖縄県"},
  };
  
  /**
   * 初期処理
   */
  $(document).ready(function(){
     
     // 都道府県プルダウン生成
     createPreDownLlst("00");
     // プルダウンの初期選択
     $("select[name='areaselector']").val("00");
     $("select[name='areaselector']").selectmenu('refresh',true);
     $("select[name='preselector']").val("00");
     $("select[name='preselector']").selectmenu('refresh',true);
   });

  /**
   * 都道府県のセレクターの制御
   */
  $("select[name='areaselector']").on('change',function(event){
    var areano = $(this).val();
    // ドロップダウンリストを作成
    createPreDownLlst(areano);
    // 生成したリストの選択とリフレッシュ（JQueryMobile)
    $("select[name='preselector']").val("00");
    $("select[name='preselector']").selectmenu('refresh',true);
  });

  /**
   * 都道府県のリストを作成して、リストに追加する。
   */
  function createPreDownLlst(areano) {
    var preList = areaPreList[areano];
    var optItem = "<option value='00'>選択してください</option>";
    // 表示順制御のため、ソート
    var keylist=new Array;
    for(key in preList) keylist.push(key);
    keylist.sort();
    // リスト作成
    for(key in keylist){
      optItem += "<option value='"+ keylist[key] + "'>"+ preList[keylist[key]] + "</option>"
    }
    $("select[name='preselector'] option").remove();
    $("select[name='preselector']").append(optItem);
  }

 

よくよく見ると簡単ですね。今回はJQueryMobileを使っているので、selectmenuメソッドをつかって、プルダウンをリフレッシュしています。

通常のJQuryなら、必要ないと思われます。

 

実用ベースだと、都道府県リストはJavaScript側の共通場所においておくか、あるいはサーバ側（例えば、phpなど）から取得してくるほうが安全でしょうね。

 

前に、システムのコードとフロントの値が異なっていてひどい目にあったことがあります。（コード一覧は提出してたんですが、デザイン屋が全くみてなくて、適用に並べたらしいですが、すでに検収済みということで、うちのシステムのデバッグ中に問題になりうちが修正することに）

 

ひどいものでしたので、気を付けましょう＞＜；

 

GoogleMapアプリの起動

システム開発

WebサイトからGoogleMapアプリを起動する場合、どのような方法があるのか調べたのでメモっておきます。

 

ディープリンク

Webサイトからアプリを起動する場合、特定のURLをサイトに埋め込み、そのURLをアプリでクリック（あるいは表示）することで、アプリを起動させます。

このURLをディープリンクといいます。

Webサイトのトップ以外のURLもディープリンクというので、少々混乱しました。

 

ディープリンクにはfacebookとかLINEとかも独自に実装しているようですが、このページでは説明しません。あくまでGoogleMap起動ということで。

 

Android

Androidの場合、ディープリンクの実装としては以下の方法が考えられます。

  • Intent方式
    intent://で始まるURLを埋め込む方法。起動アプリが画面下部に表示されるので、どのアプリを起動するかを選択可能。直接指定も可能。
    例）intent://0,0?q=東京スカイツリー#Intent;scheme=geo;package=com.google.android.apps.maps;end

  • http形式
    httpのURLを使う方法。Intent方式と同様に画面下部に起動する対象のアプリが表示され、起動アプリを選択することが可能。Intent方式との違いは、Webサイト側から見ればそんなにありません。
    ※サーバ側やアプリ公開側から見れば、違うらしいですが、今回はGoogleMapなので特になにも行いません。
    例）http://maps.google.com/maps?q=東京スカイツリー

iOS

iOSの場合、結構違うみたいです。

  • Custom Url Scheme方式（iOS6以降？）
    URLスキーム(XXXX://のXXXX部分）を独自のものに変更してアクセスする方法。
    GoogleMapの場合、comgooglemaps://かcomgooglemaps-x-callback://を使います。両者の違いについては、以下のサイト参照
    ちなみに、この方式はアプリがインストールされていない場合、エラーとなる為、Storeに遷移させる場合はJSなどで細工が必要です。

    Google マップ URL スキーム  |  Google Maps SDK for iOS  |  Google Developers
    例）comgooglemaps://?q=東京スカイツリー2&zoom=15

  • Universal Links方式（iOS9以降）
    http、httpsから始まるURLを埋め込む方法。スキームではなく、URLそのものからどのアプリを起動するかを判別するやり方。
    　GoogleMapの場合：http://maps.google.com/maps
    　iOS標準地図の場合：http://maps.apple.com/maps

    なお、アプリがインストールされていない場合、Storeには遷移せずに、そのままWebで表示が行われるようです。
    iOS8以前では、どうなるかというとURLリンクとしてサイトに遷移するようです。※アプリは起動しない
    例）http://maps.google.com/maps?q=東京タワー

 

実は今回の目的は、GoogleMapを開きたい。かつ入っていなければStoreに遷移させたいということだったので、Androiは問題ないのですが、iOSは困りものです。

CustomeUrlScheme方式を採用して、JSでコントロールするという方法があるので、それを採用するのがいいのかな。

悩みどころ・・・

GoogleMapsAPI

システム開発 GoogleAPI

GoogleMapsEmbedAPIを扱う機会があったので、そのメモです。

 

GoogleMapをサイトに埋め込む方法はいろいろありますが、無料で無制限の方法としては、GoogleMapsEmbedAPIがあります。(コンソールをみると実際には制限があるようです。)

詳しくは以下

developers.google.com

実際にGoogleMapsEmbedAPIを使うための手順は以下です。

Googleアカウントの作成

Googleアカウントを作成する為には、電話番号かスマホ用のメールアドレスが必要になる場合があります。

以下のページで作成しましょう。

 

Google アカウントの作成

 

GoogleDeveloperConsoleへのログイン

アカウントの作成が終わったら、次はGoogleのサービスを受けるために、GoogleDeveloperConsoleへログインします。

 

https://console.developers.google.com

 

こちらでID、パスワードを入力すると、管理画面にログインできます。

 

初回だと、プロジェクト名を記入する画面がでてくるかも・・・

※前のことなので忘れました。

 

f:id:digitalchild:20180304042630p:plain

 プロジェクト名を入力すると、管理コンソールが表示されます。

 

GoogleMapsEmbedAPIサービスをプロジェクトに追加

ダッシュボードが表示されたら、左メニューからライブラリを選択して、ライブラリ一覧画面を表示します。

Mapの一覧が表示されると思いますので、その中からGoogleMapsEmbedAPIを選択します。表示されていなければ、右のほうの「すべて表示」を押下すると、Mapのライブラリがすべて表示されますので、その中から探してみてください。

f:id:digitalchild:20180304044706p:plain

遷移先の画面で、「有効にする」をクリックします。

※遷移先の画面の内容はよく確認しておいてください。

 

追加が完了すると、GoogleMapsEmbedAPIが、ダッシュボードの下部の一覧に追加されます。 

f:id:digitalchild:20180304042949p:plain

 

認証情報の作成

次に認証情報を作成します。この中でAPIKEYを作成することになります。

 

左メニューから、認証情報を選択すると、画面が切り替わり以下が表示されます。

f:id:digitalchild:20180304035823p:plain

認証情報を作成を押下して、APIキーを選択します。

 

しばらくすると、APIが作成されます。

GoogleMapsEmbedAPIのURLパラメータにのせるAPIキーがこれで完成です。

 

そのままでは、だれでも使えるAPIキーになってしまうので、アクセス制限をかけます。キーが表示されている画面で、「キーを制限」をクリックします。

 

APIキー画面に遷移しますので、キーを制限項目に制限する内容を記入します。

f:id:digitalchild:20180304041909p:plain

 以上で、APIキーの設定は完了です。

 

発行したキーを使って、地図を表示するためには、以下のようなiframeをHTML内に記述します。

 <iframe style="border: 0;" src="https://www.google.com/maps/embed/v1/place?q=東京スカイツリー&amp;zoom=15&amp;key=[取得したAPIKEY]" width="600" height="450" frameborder="0" allowfullscreen=""></iframe>

 

東京スカイツリーを表示すると以下のようになります。