トップ » 技術記事 » JavaScript使いのためのAIR入門（4） - オフラインで動かすオンラインアプリ

JavaScript使いのためのAIR入門（4） - オフラインで動かすオンラインアプリ はてなブックマーク数 このエントリーをブックマークに追加


JavaScript使いのためのAIR入門

クジラ飛行机です。JavaScriptでデスクトップアプリケーションを作ることができるAIRを紹介しています。4回目の今回は「オンラインアプリ」を「オフライン」で使うという部分にフォーカスして見ていきましょう。

前回までのおさらい

1回目では、AIRのインストールと簡単なテストの方法を紹介しました。2回目では、作ったアプリケーションに署名して、AIRの配布パッケージを作成する方法を紹介しました。

そして、前回の3回目では、これぞAIRという機能～ローカルファイルを操作する方法～を紹介しました。AIR APIとして提供されている機能を利用することで、WebブラウザのJavaScriptでは実現できないこともいろいろできそうです。

また、AIR API を利用するには、AIR SDK の framework ディレクトリにある AIRAliases.js を作成するアプリケーションのディレクトリにコピーして使うと便利だということも紹介しました。

オフラインとオンラインを判別する

ノートパソコンを持ち運んで使う場合、常にオンラインで作業できるとは限りません。オフラインでもオンラインと同じように JavaScript で作ったアプリケーションを作ることができるのが AIRの魅力です。ただし、オンラインでもオフラインでも同じように使うためには、それなりのプログラムを書く必要があるでしょう。

ここでは、コンピューターがオンラインかどうかを調べるプログラムを作ってみたいと思います。コンピューターの状態を調べるには、AIR SDK の framework ディレクトリにある、servicemonitor.swf と AIRAliases.js の2つのファイルが必要です。そして、以下のようなプログラムを書きます。

<html>
<head>
<script type="text/javascript" src="AIRAliases.js"></script>

<script src="servicemonitor.swf" type="application/x-shockwave-flash" />
<script type="text/javascript">
var monitor = null;
function checkStatus()
{
    var request = new air.URLRequest('http://www.adobe.com');
    monitor = new air.URLMonitor(request);
    monitor.addEventListener(air.StatusEvent.STATUS, setStatus);
    monitor.start();
}
function setStatus(e) {
    $("status_div").innerHTML = "status:" + monitor.available;
}
function doLoad() {
    checkStatus();
}
function $(e) {
    return window.document.getElementById(e);
}

</script>
</head>
<body onload="doLoad()">
<div id="status_div"></div>
</body>
</html>

ネットワークの状態を確認します

URLMonitorオブジェクトを使うと、ネットワークの状態を確認することができます。そして、ネットワークの状態が検出されるとイベントとして登録した関数を呼び出します。ポイントとなる部分を抜き出して確認してみましょう。

以下の2行はネットワークの状態を確認するために必要なファイルを取り込んでいる部分です。1行目は AIR API を使う上で便利なエイリアスを定義したファイルで、2行目は ネットワークモニターの機能を取り込んでいます。

{<script type="text/javascript" src="AIRAliases.js"></script><script src="servicemonitor.swf" type="application/x-shockwave-flash" />}

そして、checkStatus() 関数の中で、判定のために URLMonitor オブジェクトを作成しています。以下が checkStatus() 関数のないようですが、1行目ではどのサイトを利用してネットワーク接続のテストを行うかを指定します。そして2行目ではURLMonitorオブジェクトを作成して、3行目ではイベントを設定し、4行目で判定を開始します。そして確認が終わると、setStatus() 関数が呼ばれるように設定しています。

    var request = new air.URLRequest('http://www.adobe.com');
    monitor = new air.URLMonitor(request);
    monitor.addEventListener(air.StatusEvent.STATUS, setStatus);
    monitor.start();

オフライン状態でも使える掲示板

ネットワークの状態を監視する方法が分かったところで、オフラインでも書き込みができる掲示板をAIRで作ってみたいと思います。通常、Webの掲示板はネットワークにつながった状態でないと書き込みはできませんが、AIR を利用することによって、オフラインでも利用できる掲示板を作ってみたいと思います。

※この掲示板アプリケーションは、http://kujirahand.com/cgi/linebbs/bbs.php にある一行掲示板をオフラインでも利用できるようにしたものです。

【オンラインのとき】

  • 1.ユーザーが書き込みを行う
  • 2.掲示板にデータを投稿する

【オフラインのとき】

  • 1.ユーザーが書き込みを行う
  • 2.ローカル保存領域へ書き込みを保存
  • 3.オンラインになったとき、書き込みを掲示板に投稿する

この動作は、メールソフトを考えてみると分かりやすいと思います。メールソフトは、オフライン状態でも起動できます。そして、その状態でメールの返信を書いて草稿箱に保存しておくことができます。その後、オンラインになったときに、メールを送信することができます。

プログラムが若干長くなってしまったので、プログラムの全文は、以下の URL よりダウンロードしてください。掲示板本体(PHPファイル)とAIRのプログラムを収録しています。

※AIR のベータ3 では日本語が入力できませんので、現時点では実用的なアプリケーションではありませんが、将来のバージョンに期待したいと思います。

プログラムの製作

プログラムを実行したところ

プログラムを実行すると、書き込みフォームとその下に掲示板のログが表示されます。以下のプログラムは、書き込みフォームの[write]ボタンを押した時に実行されるプログラムです。テキストフィールドの値を取得して、ローカルデータの変数 logs に追加しています。


function doWrite() {
    // フォームから値を取得する
    var body = $("body_txt").value;
    $("body_txt").value = "";
    // ログに追加
    logs = getLocalData();
    logs.push(body);
    setLocalData(logs);
    // ..

その後、オンラインかどうかを調べてオンラインならば、掲示板にデータを投稿します。オフラインならば、オンラインになるまでタイマーで監視を継続します。

    var online = monitor.available;
    $("status_div").innerHTML = "status:" + online;
    if (online) {
        sendLog();
    } else {
        showLocalLog();
        setTimeout(function(){ checkOnline(); }, 3 * 1000);
    }

ここでは、書き込みを、一度、ローカル保存領域に保存しておき、オンラインになったときに、ローカル保存領域の内容を掲示板へ投稿するようにしました。ローカル保存領域を使うと、面倒なファイル入出力などを気にすることなく、任意のデータを保存することができます。

function getLocalData() {
    var so = air.SharedObject.getLocal("logs");
    if (so.data.logs == undefined) {
        so.data.logs = new Array();
    }
    return so.data.logs;
}
まとめ

今回は、AIR でオンラインかどうかを確認する方法を中心に紹介しました。そして、サンプルプログラムとして、オフラインでも書き込みができる掲示板を作ってみました。AIRには、オンライン判定や、ローカルへのデータ保存機能など、オフラインでの利用を考慮した仕組みがいろいろと用意されていることが分かったと思います。オフラインでも使える Web アプリケーション作成の参考にしてみてください。

Series Navigation«AIR APIでファイルの書き込みAIRとjQueryで作る簡単プレゼンツール»

Posted by クジラ飛行机 | 2008年01月08日 09:37 | permalink

このサイトについて

八角研究所
株式会社八角研究所のWEBサイトですよー。 いろんなものを創り出すことのできる環境をコツコツ構築中。 いったい、いつになったらできるのか。 この技術情報サイトもそのための活動の一環のつもり。

執筆者紹介

クジラ飛行机

クジラ飛行机

くじらはんど(http://kujirahand/)にて、日本語プログラミング言語「なでしこ」(IPA未踏ユース採択)、テキスト音楽「サクラ」(OSPオンラインソフト大賞入賞)など多くのオンラインソフトを開発。著書に「Flexプロフェッショナルガイド」「なでしこ公式バイブル」、「一週間でマスターするActionScript3.0」など。

TrackBack URL :