検索
連載

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

日々生み出されるネットサービスやテクノロジーに詳しい著者による、こんなふうにサービスに取り込んだら面白いのではないか、という提案。技術的な応用面にフォーカスしていく（編集部）

Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

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のリストをチェックすれば、どのサイトを見たのか、どれくらいの時間を使ったのかをログとしてチェックできます。書類をため込んだフォルダーをモニターして、どのファイルが更新されたか記録すれば、作業履歴を自動で作成できます。メッセンジャーのチャット履歴も面白いかもしれません。

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

著者紹介

立薗理彦(たちぞの まさひこ)

1972年東京生まれ。1996年、慶應大学 環境情報学部卒。シャープで組み込み系のソフトウェアエンジニアとして働いた後、携帯電話メーカーのノキアで日本向け端末のリリースに携わる。

この頃、週末プロジェクトとしてiTunesでの再生履歴をネットで公開するサービス「音ログ」を開発。これをきっかけに、ウェブ業界への転身を決意してフリーに。

その後、音楽ニュースサイト「ナタリー」の立ち上げに関わり、2007年10月から技術担当取締役としてナターシャに参加。現在に至る。

最近の興味は、iPhoneでのアプリケーション開発。

趣味は、TVドラマ「Lost」を繰り返し見ること。全シーズンをすでに3回以上見ていて、ハワイでのロケ地ツアーにも2回参加。

著者つぶやき
http://mshk.tumblr.com/
http://twitter.com/mshk
http://friendfeed.com/rooms/sweet-tweet


「次回」へ


「これ、俺ならこう使う」バックナンバー

Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る