HTAでTimelog アプリケーションを作ろう！


Timelog で提供されているAPIを使った、HTAのサンプルプログラムと簡単な解説です。

・HTAとは？
HTMLやJavaScript、CSSなど、「webの技術を使ってデスクトップアプリケーションが作れたら簡単で便利じゃね？」
という流れが昨今ありまして、ガジェットだとかウィジェットだとか、Adobe社のApolloだとかが注目されているわけなんですが、
実はマイクロソフトも結構早い段階から気づいていたらしく、windows にHTA(はいぱ〜てきすとあぷりけ〜しょん)という仕組みを実装していました。
(全然話題にならなかったけど)


HTA DEMO
みにたいむ ver 1.03
HTAでつくったデモアプリケーション
メモを読みこんで表示するのと書き込みができるだけの、ものすご〜く基本的なTimelogクライアント。
バグとか、動かなかったりしたら教えてください（＾＾；）
対象：windows 2000 、windows XP、　IE ver.5以上
※アンチウイルスソフトの中にはHTAからの通信をブロックするものがあるかもしれません。
過去ver
みにたいむ ver 1.02
みにたいむ ver 1.00

用意するもの

メモ帳。これだけです。
サンプルプログラムのソースをメモ帳にコピー／ペーストし、以下の内容で保存してください。
ファイル名　　　＝　拡張子をhtaにして保存してください
ファイルの種類　＝　「すべてのファイル」を選択
文字コード　　　＝　「UTF-8」を選択

Hello Worldを作る

まぁ、お約束なんで。
「Hello World」という文字列を表示するHTAを作ってみます。
以下のコードをコピペしtest.htaという名前で保存し実行してみてください。
<html>
<head>
<title>サンプル Hello World</title>
</head>
<body>
Hello World!
</body>
</html>
まんま、HTMLです。
ようするにHTMLファイルの拡張子をhtaに変えればデスクトップアプリケーションとして機能するわけです。

Timelog APIサンプルプログラム

Timelog のAPIを使うHTAサンプルです。
例のごとくエラー処理とか全然してません。
各リンクの上で右クリック「対象をファイルに保存」を選択し、ローカルに保存して実行してください。
※サーバー上では正常に動作しません

パブリックの発言を取得する

自分とメモフレンドの発言を取得する

自分宛のダイレクトメッセージを取得する

自分の詳細な情報を取得

Todoメモを取得

自分のメモフレンドを取得

新しいメモの投稿


サンプルプログラムpublic_msg.htaの解説

APIからデータを取得し、表示している部分についてざっと説明してみます。


【public_msg.htaの解説】APIからデータを取得する
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.Open("POST", "http://api.timelog.jp/public_msg.asp?fmt=json&cnt=50", false);
xmlhttp.Send();
var data = eval("("+xmlhttp.responseText+")");
上記４行のコードが、TimelogAPIを使ってデータを取得している部分です。
重要なのは２行目。APIのURLが記述されているのがわかるでしょうか？
ここでは、public_msg.aspを指定しています。
注意する点としては、APIのURLにはかならず「fmt=json」オプションを付けてください。

もし、IDとパスワード(認証：BASIC)が必要なAPIの場合は、２行目を以下のように記述することでデータを取得できます。
xmlhttp.Open("POST", "http://api.timelog.jp/direct_msg.asp?fmt=json", false, "IDを記述", "パスワードを記述");

取得したデータは、変数「data」の中に収められます。


取得したデータについて
まず、public_msg.aspのURLにブラウザでアクセスし右クリック「ソースの表示」で、APIが返してくるデータを直接見てみてください。
※ブラウザによってはファイルのダウンロードになるかもしれません。その場合はダウンロードし、メモ帳などで開いて見てください
こちら→http://api.timelog.jp/public_msg.asp?fmt=json&cnt=50



APIが返してくるデータについて簡単に説明します。(データの形式)
{親要素:[
{子要素:値,
},
{子要素:値,
}
]}
public_msg.aspの場合、親要素が「timelog」、子要素が「name、msg、toid、url、tag、data」となります。
便宜上、ひとつひとつの{子要素:値,}を「ブロック」と呼びます。


取得したデータを収めた変数「data」から値を取り出す方法は以下となります。

　　data.親要素名[ブロックナンバー],子要素名

例）一番最初のブロックのnameの値を取り出します
　　data.timelog[0].name

以下にサンプルプログラムを用意いたしました。
alert(data.timelog[0].name)の部分の、ブロックナンバーや子要素名を色々変えてみて、なにが取り出せるか試してみてください。

サンプルプログラム
リンク先が表示されてしまう場合は、リンクの上で右クリック「対象をファイルに保存」を選択し、ローカルに保存して実行してください。
test.hta

【public_msg.htaの解説】取り出したデータをhtmlに変換
var html ="";
for(var i=0; i<data.timelog.length; i++)
{
	html += 'id:' + data.timelog[i].id +'<br>'; 
	html += 'name:' + data.timelog[i].name + '<br>'; 
	html += 'toid:' + data.timelog[i].toid + '<br>'; 
	html += 'toname' + data.timelog[i].toname + '<br>'; 
	html += 'msg:' + data.timelog[i].msg + '<br>';
	html += 'tags:' + data.timelog[i].tags + '<br>';
	html += 'msgid:' + data.timelog[i].msgid + '<br>';
	html += 'replyid:' + data.timelog[i].replyid + '<br>'; 
	html += 'url:' + '<a href="'+data.timelog[i].url+'">' + data.timelog[i].url + '</a><br>'; 
	html += 'imagen:' + '<img src="'+data.timelog[i].imagen+'">'; 
	html += 'imagem:' + '<img src="'+data.timelog[i].imagem+'">'; 
	html += 'images:' + '<img src="'+data.timelog[i].images+'">'; 
	html += '<hr>'; 
}
上記のコードは、変数「data」から全てのデータを取り出しhtmlとして、 変数「html」の中に収めています。
「data.timelog.length」は、ブロックの数を返します。


【public_msg.htaの解説】データの表示 
document.getElementById("list").innerHTML = html;
上記のコードで、変数「html」の内容と、「<div id="list">ここに表示されます</div>」の部分と入れ替えています。



サンプルプログラムの説明は以上です。 実際に、サンプルプログラムを色々弄りながら試すのが一番わかり易いと思います。

ウインドウスタイルの設定

HTAでは、「head」タグの間に「HTA:APPLICATION」タグを記述することで
実行時のウインドウスタイル(ウインドみためや、スクロールバーの有る無し、など)を設定できます。
<html><head>
<title>サンプル・プログラム</title>
<HTA:APPLICATION 
    APPLICATIONNAME="appname"
    VERSION="1.0"
    SINGLEINSTANCE="yes"
    SHOWINTASKBAR="no"
    NAVIGABLE="no"
    WINDOWSTATE="normal"
    BORDER="dialog"
    INNERBORDER="yes"
    BORDERSTYLE="raised"
    CONTEXTMENU="no"
    SELECTION="yes"
    SCROLL="yes"
    SCROLLFLAT="yes"
    CAPTION="yes"
    ICON="test.exe"
    SYSMENU="yes"
    MAXIMIZEBUTTON="no"
    MINIMIZEBUTTON="yes"
/>
</head>
<body>
Hello World!
</body>
</html>


一見メンドクサイですが、HTA:APPLICATIONタグを自動作成してくれるサイトがあります。
HTAリファレンス

HTAをexeファイルに変換

以下のフリーソフトを利用することによって、HTAファイルをexeファイルに変換することができます。

HTABOX

ファイルのアイコンを変更

以下のフリーソフトを利用することによって、作成したファイルのアイコン画像を変更することができます。

@icon変換

参考サイトリンク集

HTAを作成するのに参考になるサイトを集めてみました。

HTAでコマンドライン・プログラムをビジュアルにする
「HTAに触れるの始めて」って方はまずこちらを。

とほほのwww入門
HTML、JavaScript、スタイルシートの詳細なリファレンスがあります。

一撃必殺JavaScript日本語リファレンス
JavaScriptについて詳しくまなぶならここ。

JavaScriptでDOMを使う――オブジェクト指向入門の入門
UIに凝るならDOMをマスターしよう。

Windows Scripting Host
WSHの知識は、HTAでもそのまま活かせます。

XMLHttpRequest入門
APIを使ってデータを取得する要、XMLHttpRequestについて。

入門 JSON
JSON形式のデータの扱い方がいまいち解らないってかたはこちら。


他

Timelog JSONP DEMO
JSONP形式でデータを取得するDEMO

最後に

APIと聴いて「な〜にそれ？　難しそう」と思っている人も多いかと思います。
しかし、HTAを使うことで、ホームページを作るように、デスクトップアプリケーションを作ることが出来ます。
しかも、必要なのはメモ帳だけ。
HTAで学んだ知識は、ガジェットやウィジェットなどを作成する際にも役立ちます。

「プログラミングなんて絶対無理！」と敬遠していた人の参考になれば、嬉しい限りです。






inserted by FC2 system