ブラウザのアドレスバーにコマンドを入力するだけでは味気ないので、第二回目では多少アプリっぽいものを作成してみたいと思います。とりあえずHTTPリクエスト送付～XMLのパース～画面構成といった一連の流れを紹介するため、ＨＴＭＬ感覚で記述できるＨＴＡ（ＨＴＭＬ Application）を使います。ＨＴＡの説明については省きますが、Internet Explorer 5.0以降がインストールされているWindowsパソコンであればOKです。
完成形のイメージとソースは以下となります。ソースをテキストエディタにコピペし、適当なフォルダにdemo.htaという名称で保存します。同じフォルダに旅行先での写真なり子供の写真なり、好きなを画像をimage.jpgとして保存して下さい（サイズは適宜縮小）。
あとは「demo.htaをダブルクリックすればOKです！」といいたいところなのですが、実際には当社D-HEMSをお使いの方でないとエラーとなります（「いいえ」でスクリプトの実行を中止すると画像だけは表示できます）。現在エミュレーションソフトも検討していますが、とりあえず流れだけでも理解して頂ければ・・・。
■完成イメージ
■ソース
<html>
<!-ヘッダーの記述 -- >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>HousingAPI Demo</title>
</head>
<!-- (1)背景画像、文字色などの設定 -- >
<BODY BACKGROUND="image.jpg">
<font size=5 color="black">
<!-- ここからJavaスクリプトによる記述 -- >
<script language="JavaScript">
// (2)画像サイズの設定
resizeTo(430,250)
// (3)DOMを使って、住宅APIでリクエストで返ってきたXMLを変数xmlに格納する
var xmlurl = "http: //（ホームサーバーのIPアドレス）/smart/rest/value?deviceid=echonet.EnergySensor_1_M&key=smallsensor";
var xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.load(xmlurl);
// (4)取得したxmlデータから消費電力の値を抽出しobjNodに格納する
var objRoot=xml.documentElement;
var clnCld=objRoot.childNodes;
var objNod=clnCld.item(1);
// (5)結果を画面に表示する
document.write("消費電力は ： ")
document.write(objNod.xml)
document.write(" Wだよ！")
</script>
</html>
■使用画像
一連の流れは注釈を読んでもらえればわかると思いますが、簡単に解説しておきます。最初のhtml部分で文字サイズや色、画像データの指定をしてますが、メインはJavaスクリプトで記載している部分からとなります。
まず、表示するウィンドウサイズの設定、これは使用する画像のサイズに合わせて適宜決めて下さい。
次にDOM（Document Object Model）を使って、住宅APIのリクエストを送付し、返ってきたxmlを変数に格納します。DOMとはXML文書のタグで囲まれた要素を取り出す為のツールのようなもので、読み込むXMLデータの場所は、ローカルのXMLデータ（**.xml）でも、ネット上のURLでもOKです。ですから正しく言うと、住宅APIのリクエストを送付するというよりもXMLデータを読み込む先の場所として住宅APIのURLを指定したということになります。
そこが(3)で記述している部分ですが、まずxmlurlという変数に、住宅APIのURLを格納します。次にnew ActiveXObject(“”)で変数xmlをオブジェクト化し、xml.load命令にて取得したXMLデータ（住宅APIのリクエスト結果）を格納します。
なお、上記ソースでは住宅APIのコマンドはECHONET対応の電力計測装置（当社D-HEMS）向けとなっています。 ECHONETLiteの場合（当社D-HEMSⅡ）、以下のようになります。
http://（ホームサーバーのIPアドレス）/smart/rest/request?deviceid=lite.boardMeter_1_1&type=get&key=instantPower
返ってくるxmlは以下のような形になります。取り出したい消費電力データは、<data type="value"> </data>のタグの間にはさまれた数字となりますので、そのデータを取り出します。そこが④の部分ですが、XMLの先頭部分を指定（xml.documentElement）し、その子供のノード（objRoot.childNodes ）の２番目のアイテム（clnCld.item(1)）を変数objNodに格納しています。試しに“.item(1)”を“.item(0)”に変更して実行してみれば、何をしてるのかは見当つくかと思います。
<resultset type="map"> ・・・・・・ XMLの先頭部分
<result type="value">true</result> ・・・・・ その下に格納されたデータその１
<data type="value">356.9</data> ・・・・・・その２
</resultset>
最後に、document.writeにて、表示したい文字列を記載します。取得した消費電力以外の日本語は適当に変更して下さい。
プログラミングの詳細についてはXMLを理解する必要がありますが、変更が必要な部分以外は呪文だと思って流してもらえればホームページを作成する感覚でアプリが開発できます。
ということで今回はアプリ開発の基本的な流れを紹介しましたので、次回はもう少し高度な開発方法について紹介したいと思います。
by 管理者 H.Y
