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

    最後の位置

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

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

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

Itemsプロパティ

Itemsプロパティは項目を示す配列です。

function Button1Click($sender, $params)
{
   $this->CheckListBox1->Items = array('Delphi XE3', 'C++Builder XE3', 'HTML5 Builder', 'Prism XE3');
}

Columnsプロパティ

Columnsプロパティは列数を示します。

function Button2Click($sender, $params)
{
   $this->CheckListBox1->Columns = 2;
}

Checkedプロパティ

Checkedプロパティはチェックされた項目を示す配列です。
チェックされた項目は、値に1を設定します。

function Button1Click($sender, $params)
{
   //2番目と3番目の項目をチェックする
   $this->CheckListBox1->Checked = array(0, 1, 1);
}

function Button1Click($sender, $params)
{
   //チェックされている項目の項目名をLabel1に表示する
   $checked = $this->CheckListBox1->Checked;
   reset($checked);
   $items = array();
   while(list($key, $val) = each($checked))
   {
      if($val == 1)
      {
         $items[] = $this->CheckListBox1->Items[$key];
      }
      $this->Label1->Caption = implode(',', $items);
   }

Headerプロパティ

Headerプロパティには、キーにヘッダーとなる項目のインデックス、値に1を登録します。
値に0を入力するとヘッダーになりません。

ヘッダーの背景色はHeaderBackgroundColorプロパティ、ヘッダーの文字色はHeaderColorプロパティで設定します。

実行画面

AddItem()メソッド

AddItem()メソッドは項目を追加します。

$this->CheckListBox1->AddItem('InterBase');

Clear()メソッド

Clear()メソッドはすべての項目を削除します。

$this->CheckListBox1->Clear();

SelectAll()メソッド

SelectAll()メソッドはすべての項目をチェックします。

function Button1Click($sender, $params)
{
    $this->CheckListBox1->SelectAll();
}

ItemAtPos()メソッド

ItemAtPos()メソッドは引数のインデックスの項目名を返します。

function Button1Click($sender, $params)
{
   //3番目の項目の項目名をLabel1に表示する
   $this->Label1->Caption = $this->CheckListBox1->ItemAtPos(2);
}

HTML5BuilderのButtonコンポーネントを使ってみる

Captionプロパティ

Captionプロパティはボタンのテキスト文字を示します。

function Button1Click($sender, $params)
{
   $this->Button1->Caption = "Hello, World!";
}

Colorプロパティ

Colorプロパティはボタンの色を示します。

function Button2Click($sender, $params)
{
   $r = dechex(rand(0, 255));
   $g = dechex(rand(0, 255));
   $b = dechex(rand(0, 255));
   $this->Button2->Color = "#$r$g$b";
}

Enableプロパティ

Enableプロパティをfalseにするとボタンを無効になります。

Fontプロパティ

Fontプロパティはボタンのフォントを示します。

$this->Button7->Font->Family = "Verdana";
$this->Button7->Font->Align = taCenter;
$this->Button7->Font->Size = "16px";
$this->Button7->Font->Weight = "bold";
$r = dechex(rand(0, 255));
$g = dechex(rand(0, 255));
$b = dechex(rand(0, 255));
$this->Button7->Font->Color = "#$r$g$b";

Hintプロパティ

Hintプロパティはボタンのヒントを示します。

ImageSourceプロパティ

ImageSourceプロパティはボタンの画像を示します。

ButtonTypeプロパティ

ButtonTypeプロパティはボタンのタイプ(inputタグのtype属性)を示します。

  • btSubmit

    ボタンをクリックすると、sumitします。

  • btReset

    ボタンをクリックすると、input欄をリセットします。

  • btNormal

    普通のボタンです。クリックしてもsubmitしません。

クリックイベントの$sender引数

クリックイベントの$sender引数には、押されたボタンが入ります。

function Button9Click($sender, $params)
{
   $this->Label2->Caption = "Clicked button: " . $sender->Name;
}

HTML5 BuilderのBasicAuthenticationコンポーネントで認証を行う

ツールパレットのSystemカテゴリーにあるBasicAuthenticationコンポーネントを配置します。

StandardカテゴリーにあるLabelコンポーネントを配置します。

BasicAuthentication1のOnAuthenticateイベントに認証のコードを追加します。

入力されたユーザー名とパスワードは、$params[‘username’]と$params[‘password’]で取得できます。
認証に成功したときはtrue、失敗したときはfalseを返します。

function BasicAuthentication1Authenticate($sender, $params)
{
  if(($params['username'] == 'sysdba') && ($params['password'] == 'masterkey'))
    return true;
  else
    return false;
}

Page1のBedoreShowイベントに認証処理を実行するコードを追加します。

function Page1BeforeShow($sender, $params)
{
    $this->BasicAuthentication1->Execute(); 
}

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

HTML5 BuilderでSQLiteを使用する

HTML5 BuilderでSQLiteを使用して、簡単なWebアプリケーションを作成してみました。

初期設定

HTML5 Builderの初期設定では、SQLiteが使用できません。

設定ファイルを編集して、SQLiteを使用できるようにします。
(参考:SQLite 3 – HTML5 Builder)

C:\Program Files (x86)\Embarcadero\HTML5 Builder\5.0\php\php.ini.templateをエディタで開きます。

次の2行を修正します。

変更前

;extension=php_pdo_sqlite.dll

変更後

extension=php_pdo_sqlite.dll

変更前

;extension=php_sqlite3.dll

変更後

extension=php_sqlite3.dll

以上で、準備完了です。

サンプルデータの作成

HTML5 Builderでアプリケーションを作成する前に、サンプルのデータベースを作成します。

今回はPythonで作成しました。

#!python2.7
# -*- coding: utf-8 -*-
import sqlite3

con = sqlite3.connect(u"test.db", isolation_level=None)
con.execute(u"create table example (id integer, name varchar(20))")
con.executemany(u"insert into example values (?, ?)",
        [(1, u"Delphi XE3"), (2, u"C++Builder XE3"), (3,u"HTML5 Builder"),
         (4, u"デルファイ"), (5, u"シープラスプラス")])

c = con.cursor()
c.execute(u"select* from example")
for row in c:
    print row[0], row[1]
con.close()

作成したデータベースファイルは、HTML5 Builderのプロジェクトと同じフォルダーに配置します。

Webアプリケーションの作成

HTML5 Builderを起動して、サーバーWebアプリケーションを作成します。

Page1コンポーネントのプロパティを設定します。

  • Encoding プロパティ => Unicode(UTF-8)

ここで一度プロジェクトを保存しておきます。

先ほど作成したサンプルのデータベースファイル(test.db)を、プロジェクトを保存したフォルダーにコピーします。

ツールパレットからDataAccessカテゴリーにあるDatabaseコンポーネント、Datasourceコンポーネント、Tableコンポーネントを配置します。

各コンポーネントのプロパティを設定します。

Database1コンポーネント

  • DatabaseName プロパティ => test.db(データベースファイルのファイル名)
  • DriverName プロパティ => sqlite

Datasource1コンポーネント

  • DataSet プロパティ => Table1

Table1コンポーネント

  • Active プロパティ => true
  • Database プロパティ => Database1
  • MasterSource プロパティ => Datasource1
  • TableName プロパティ => example(テーブル名)

データを取得する寿便ができました。

取得したデータを表示します。

ツールパレットにあるData ControlsカテゴリーのDBRepeaterコンポーネントを配置します。

ツールパレットにあるStandardカテゴリーのLabelコンポーネントを2つDBRepeater1の上に配置します。

各コンポーネントのプロパティを設定します。

DBRepeater1

  • DataSource プロパティ => Datasource1

Label1

  • DataField プロパティ => id(表示する列の列名)

Label2

  • DataField プロパティ => name(表示する列の列名)

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

テーブルのデータが表示されました。

HTML5 BuilderのCSS3 Property Editorでボタンのデザインを編集してみる

HTML5 BuilderのCSS3 Property Editorでボタンのデザインを編集してみました。

ボタンを配置します。

オブジェクトインスペクタで、「BorderRadius」プロパティの「…」ボタンを押します。

「CSS3 Property Editor」が表示されます。

スタイルのブルダウンメニューから枠線のスタイルを選択します。

幅のスライドバーを移動して、枠線の幅を設定します。

画面右側のプレビューはすぐに更新されます。

半径を変更すると、角の丸いボタンを作ることができます。

色の「…」ボタンを押すと「Color Selector」が表示されます。

枠線の色を選択すると、枠線の色が更新されます。

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

デザインモードでもちゃんと設定が反映されています。

ブラウザで表示したところ。

他にもTextShadowプロパティで文字に影をつけたり、Transformプロパティで回転させたり、など簡単にできます。

CSSについての詳しい知識がなくても、簡単に編集することができました。

HTML5Builderでajaxを使用する

■HTML5Builderでajaxを使用する方法

HTML5Builderでajaxを使用する方法を紹介します。

ajaxを使用するポイントは次の2点です。

  1. PageのUseAjaxプロパティをtrueにします。
    trueにすることでajaxの機能を使用できるようになります。

  2. JavaScriptから実行するPHPの関数をajaxCallメソッドで指定します。
    PHPの関数をajaxで実行する時は、ajaxCallを使用します。

    function Button1JSClick($sender, $params) {
        //PHPのShowTime関数をajaxで実行する
        echo $this->Button1->ajaxCall('ShowTime');
    }
    

次のサンプルプログラムでは、現在の日時を表示します。

「新規作成」から「HTML5Builderプロジェクト」の「サーバーWebアプリケーション」を選択します。

LabelコンポーネントとButtonコンポーネントをPage1に配置します。


Page1のUseAjaxプロパティの値を「true」にします。

Button1のButtonTypeプロパティを「btNormal」に変更します。
初期値の「btSubmit」だとボタンを押すとSubmitしてしまいます。

コードを表示し、関数を追加します。

Label1に現在の日時を表示します。

function ShowTime() {
    $this->Label1->Caption = date('y/m/d(D) H:i:s');
}

Button1のJavascriptのOnClickイベントを追加します。
ajaxでShowTime関数を実行します。

function Button1JSClick($sender, $params) {
    echo $this->Button1->ajaxCall('ShowTime');
}

実行画面

■ajaxCallメソッドの引数

ajaxCallメソッドは引数を3つとります。

第1引数は実行するPHPの関数名です。

第2引数は…使われていないようです。不具合でしょうか?

第3引数は変更対象のコンポーネントの名前です。未指定の場合はすべてのコンポーネントが対象になります。

//Label1のみ変更する
echo $this->Button1->ajaxCall('ShowTime', array(), array('Label1'));

■ajaxCallでPHPの関数に引数を渡すには

ajaxで実行する関数に引数を渡すには、Javascriptで変数paramsに値を代入します。

次のサンプルプログラムは、引数の合計値を表示します。

//ajaxで実行するPHPの関数
//引数$paramsの合計値をLabel1に表示する
function sum($sender, $params) {
    $this->Label1->Caption = array_sum($params);
}

function Button1JSClick($sender, $params) {
    ?>
    //begin js
    params = [1,5,7]; //PHPのsum関数に渡す引数
    //end
    <?php
    echo $this->Button1->ajaxCall('sum');
}

なお、sum関数の第1引数($sender)はajaxCallを実行したコンポーネント(ここではButton1)になります。

ボタンを押すと…

[1,5,7]の合計値を表示します。

■追記

コメント欄で、RPCLにajaxの不具合があることを教えていただきました。

最新版のRPCLを導入する方法が以下のページで説明されています。