Adobe AIRでiTunes×Twitterクライアントを作ってみた：これ、俺ならこう使う（2）（2/2 ページ）

» 2008年08月11日 00時00分公開

HTMLとJavaScriptでUIを構成する

　HTMLベースのアプリでは、いわゆる普通のHTMLとJavaScriptを組み合わせてUIを構築します。CSSを使ってスタイルを指定することで、外観をカスタマイズすることもできます。

ウィンドウを開く

　ウィンドウを作成する方法はいくつかありますが、ここでは単純にJavaScriptのwindow.openを使用します。

// 新規ウィンドウを開く
function openSettingsWindow(){
    newWindow = window.open("SettingsWindow.html","設定",
        "height=350, width=400, top=10, left=10");
}

　例えば、この関数をアンカータグ（<a>タグ）のonClick属性にセットすることで「リンクをクリックすると設定ウィンドウを開く」という動作を行わせることができます。

設定値を暗号化して保存

　Adobe AIRは、AIRアプリケーションとユーザーの組み合わせごとに固有の暗号化されたローカルストアを提供します。この機能を使うことで、アカウント情報などのセキュリティ保護が必要なデータを安全に保存できます。

// ローカルストアにデータを保存する
var itunesXmlPath = document.getElementById("itunes-xml-path").value;
var bytes = new air.ByteArray();
bytes.writeUTFBytes(itunesXmlPath);
air.EncryptedLocalStore.setItem("iTunesXmlPath", bytes, true);
// テキストフィールドにユーザー設定値をセット 
var storedValue = air.EncryptedLocalStore.getItem("iTunesXmlPath");
if (storedValue != "") {
    var itunesXmlPath = storedValue.readUTFBytes(storedValue.length);
    document.getElementById("itunes-xml-path").value = itunesXmlPath;
}

暗号化されたデータの格納（Adobe AIRデベロッパーセンター）

ファイル選択ダイアログの表示

　ファイル選択ダイアログは、汎用のものを使用できます。フィルタで対象となる拡張子を指定してダイアログを開きます。ファイル選択イベントのハンドラーとしてファイル読み込みなどの処理を行う関数を指定します。

// ファイル選択ダイアログの表示
var fileToOpen = air.File.documentsDirectory;
var txtFilter = new air.FileFilter("Text", "*.xml");
fileToOpen.browseForOpen("Open", 
    new window.runtime.Array(txtFilter));
fileToOpen.addEventListener(air.Event.SELECT, fileSelected);

ファイルの読み込み

　上記のファイル選択ダイアログでファイルが選択された際に呼び出されるハンドラを定義します。fileToOpenからファイルへのパスを取得し、変数iTunesXmlに一気に読み込んでいます。

// ファイル選択時のハンドラ
function fileSelected(event) {
    var file = new air.File(fileToOpen.nativePath);
    var fileStream = new air.FileStream();
    fileStream.open(file, air.FileMode.READ);
    var iTunesXml = fileStream.readUTFBytes(
        fileStream.bytesAvailable);
    fileStream.close();
}

ログイン時に起動

　今回のクライアントのように、バックグラウンドで動作してPCをモニターするアプリケーションは、ユーザーにいちいち起動してもらうようでは面倒で使用されなくなってしまいます。

　Adobe AIRアプリケーションは、startAtLoginプロパティをセットすることによって、以降ユーザーがログインするたびに自動で起動するようになります。

// ログイン時の起動を設定する
NativeApplication.nativeApplication.startAtLogin=true

アプリケーションの起動および終了オプション（Adobe AIRデベロッパーセンター）

URLLoaderを使ってTwitter APIにデータをポストする

　Twitterのステータス更新には、URLRequestとURLLoaderを使用します。

function updateTwitterStatus(user, password, status) {
    air.trace("updateTwitterStatus: " + user + " - " + 
        password + " - " + status);
    air.URLRequestDefaults.setLoginCredentialsForHost
        ("twitter.com", user, password);
    
    var request = new air.URLRequest
        ("http://twitter.com/statuses/update.xml");
    request.method = air.URLRequestMethod.POST;
    
    var variables = new air.URLVariables("status=" + status); 
    request.data = variables;
    
    var loader = new air.URLLoader(); 
    loader.addEventListener(air.HTTPStatusEvent.HTTP_RESPONSE_STATUS,
        function(event) {
            air.trace("status handler(" + event.status+ ")"); 
        });
    loader.addEventListener(air.Event.COMPLETE,
        function(event) {
            air.trace("dummy login done: " + event.target.data);
        });    
    
    try {
        air.trace("trying to load URL"); 
        loader.load(request); 
    } catch (error) { 
        air.trace("Unable to load URL"); 
    } 
}

外部データの操作（Adobe AIRデベロッパーセンター）

AIRアプリケーションの配布

　Adobe AIRは、専用のSWFファイルをWebページに埋め込むことで、WebブラウザからAIRアプリケーションをインストールする仕組みを提供しています。この際、AIRランタイムがインストールされていない場合は「シームレスインストール」によってランタイムそのものがインストールされます。

Webページからの AIR アプリケーションのインストールと実行（Adobe AIRデベロッパーセンター）

　音ログを運営していた際によく聞いた声が「アプリのインストールが面倒」というものでした。実際のところはインストーラをダウンロードして実行するだけなのですが、いわゆるPCに詳しいユーザーでない人にとっては「インストール」の壁は相当高く、それだけでサービスの利用をあきらめるほどの障害になっているようです。

　Adobe AIRは、アプリを配布するためにはまずランタイムをインストールしてもらわなければならないという点で、インストールの壁を２重に抱えているといえます。しかし、Webブラウザでクリックするという誰でも実行できる動作で、ランタイムからアプリまで一続きにインストールを可能にすることで、影響を最低限にしています。

これ、どう使う？

　駆け足でAdobe AIRの提供する機能を紹介してきましたが、HTMLでUIを構築してJavaScriptで処理を記述し、さらにスクリプト中からファイルの読み書きやネットワーキングのようなOSの機能を呼び出せる、という様子が伝わったでしょうか？

　Adobe AIRでのクライアント開発をしてみて面白いと思ったのは、作りはWebアプリなのにそれがデスクトップに「常駐」しているという点です。Webブラウザの中で動くWebアプリケーションは、ユーザーがWebブラウザを終了したり、何げなくウィンドウを閉じるだけでも終了してしまいますが、AIRアプリとなるとうっかり終了することはありません。

　音ログのように、常にPCの中で動作しながらユーザーの操作をモニターするサービスにはもってこいです。

　今回は、iTunesのファイルをモニターすることで再生履歴を記録しましたが、例えばWebブラウザで閲覧したURLのリストをチェックすれば、どのサイトを見たのか、どれくらいの時間を使ったのかをログとしてチェックできます。書類をため込んだフォルダーをモニターして、どのファイルが更新されたか記録すれば、作業履歴を自動で作成できます。メッセンジャーのチャット履歴も面白いかもしれません。

　デスクトップとの連携というと、ファイルをアップロードするなどデータそのものに目が行きがちですが、変化に注目することでユーザーの行動にスポットを当ててみるのも面白いのではないでしょうか。