HTML5 BuilderとGoogle Maps JavaScript APIを使って郵便番号から住所を取得する

HTML5 BuilderとGoogle Maps JavaScript APIを使って郵便番号から住所を取得するプログラムを作ってみました。

HTML5 Builderを起動して、郵便番号を入力するEditコンポーネント、住所を表示するLabelコンポーネント、表示ボタンのButtonコンポーネント、地図を表示するGoogleMapコンポーネントを配置します。

01

文字化けを回避するため、PageコンポーネントのEncodingプロパティを「Unicode(UTF-8)」に設定します。

03

ボタンを押したときSubmitされないようにするため、ButtonコンポーネントのButtonTypeプロパティを「btNormal」に設定します。

04

ボタンのJavaScriptのOnClickにコードを記述します。

05

function Button1JSClick($sender, $params)
{
   ?>
     //begin js
   var postcode = $('#Edit1').val(); //郵便番号
   jQuery.getJSON(
     'http://maps.googleapis.com/maps/api/geocode/json?sensor=false&language=ja&address=' + postcode,
       function(data) {
         //緯度と経度を取得する
         var latlng = new google.maps.LatLng(
             data.results[0].geometry.location.lat,
             data.results[0].geometry.location.lng);
         //地図を表示する
         var map = new google.maps.Map(
             document.getElementById("GoogleMap1"),{
                 zoom : 13,
                 center : latlng,
                 mapTypeId : google.maps.MapTypeId.ROADMAP
             });
         //マーカーを表示する
         var marker = new google.maps.Marker({
             position: latlng,
             map: map,
             title: postcode
         });
         //住所を表示する
         var address = '';
         var addresses = data.results[ 0 ].address_components;
         for (i = addresses.length - 1; i > 0; --i) {
             address += addresses[ i ].long_name;
         }
         $('#Label2').text(address);
       });
     //end
   <?php
}

郵便番号を入力して表示ボタンを押すと、住所と地図が表示されます。

02

参考

HTML5 Builderでコンポーネントを国際化対応する

HTML5 Builderでコンポーネントを国際化対応する方法を調べました。

Pageをデフォルトの言語で作成します。

PageのLanguageプロパティから対応する言語を選択します。
ここでは「Japanese」を選択します。

コンポーネントのプロパティを日本語用に修正します。

ファイルを見ると、デフォルトの言語の設定が保存されている「unit1.xml.php」と、日本語の設定が保存されている「unit1.Japanese.xml.php」が作られています。

実行時にLanguageプロパティを変更すると、指定した言語に表示が変更されます。

function Button1Click($sender, $params)
{
   if($this->Language == "(default)")
      $this->Language = "Japanese";
   else
      $this->Language = "(default)";
}

アプリケーションを実行します。

「Change」ボタンを押すと、表示言語が変更されます。

ブラウザの言語情報をもとに表示言語を設定する場合は、Applicationオブジェクトを使用します。

function Page1Create($sender, $params)
{
   global $application;
   $application->autoDetectLanguage();
   $this->Language = $application->Language;
}

HTML5 BuilderのDataListで入力候補を表示する

DataListコンポーネントを使ってみました。

EditコンポーネントとDataListコンポーネントを配置します。

DataList1のItemsプロパティを編集します。

値リストエディタが表示されます。

キーには、入力欄に設定される文字列
値には、入力候補に表示される文字列
を入力します。

Edit1のDataListプロパティにDataList1を設定します。

「F9」キーを押して実行します。

HTML5 BuilderのAnimationコンポーネントを使ってみる

Animationコンポーネントを使うと、アニメーション効果を簡単に実現できます。
ブラウザによって、対応しているアニメーション効果に違いがあるようです。

AnimationコンポーネントとButtonコンポーネントを配置します。

Animation1のItemsプロパティを編集します。

CSS3 Animation画面が表示されます。
この画面で、使用するアニメーションを一元管理できます。

「項目の新規作成」ボタンを押して、項目を作成します。

プロパティを編集して、アニメーションを設定します。

「OK」ボタンを押して、設定を登録します。

Button1のAnimationsプロパティを編集します。

アニメーションエディタ画面が表示されます。
この画面でアニメーションを実行するイベントや対象のコンポーネントを設定します。

「新規ルールセットの追加」ボタンを押します。

JavaScriptイベントが追加されました。

プルダウンメニューからイベントを選択します。

「新規ソースの追加」ボタンを押します。

アクションが追加されました。

最初のプルダウンメニューでは、アニメーションを追加するか削除するかを選択します。
2番目のプルダウンメニューでは、アニメーションするコンポーネントを選択します。
3番目のプルダウンメニューでは、Animationコンポーネントを選択します。
アニメーション欄から、適用するアニメーションをチェックします。

「OK」ボタンを押して、設定を登録します。

「F9」キーを押して、アプリケーションを実行します。

動的にアニメーションを実行する場合は、対象のコンポーネントにクラスを追加します。
クラス名はAnimationコンポーネントのNameプロパティとアニメーション項目のCaptionプロパティをアンダーバー(_)でつなぎます。

function Button1JSClick($sender, $params)
{
    ?>
    //begin js
    $('#Button1_outer').addClass('Animation1_Animation1');
    //end
    <?php
}

アニメーション項目のプロパティを見てみます。

  • Animation Duration

    アニメーションの間隔

  • StartColor

    最初の色

  • EndColor

    最後の色

次の例では、ボタンの色が徐々に赤くなります。

  • Animation Timing

    アニメーションの速度

    • ease 最初と最後はゆっくり
    • linear 一定の速度
    • ease-in 最初はゆっくり
    • ease-out 最後はゆっくり
    • ease-in-out 最初と最後はゆっくり
  • Interation Count

    アニメーションの繰り返し回数
    infiniteのときは無制限に繰り返す

  • Start Rotate

    最初の角度

  • End Rotate

    最後の角度

次の例では、ボタンが回転します。

  • Start Scale

    最初の大きさ

  • End Scale

    最後の大きさ

次の例では、ボタンが大きくなります。

  • Start Translate

    最初の位置

  • End Translate

    最後の位置

次の例では、ボタンが移動します。