Home » goodies » AirUpdaterUI.mxml
AirUpdaterUI.mxml


AirUpdaterUI.mxml

AIRアプリケーションのオートアップデートライブラリ(AirUpdater.as)に Ajaxローディングアイコンを表示するUI(AirUpdaterUI.mxml)を組み込んだパッケージで 以下の機能と利便性があります。

  1. AIRアプリケーションからそのアプリケーションの最新バージョンの有無をチェック
  2. 最新バージョンがあるようならその場でファイルをダウンロード、アップデートを行う(アプリケーションの上書き)。
  3. アップデート情報確認中、および実際のアップデート中にAjaxローディングアイコン(計8種類、選択可能)の表示
  4. アップデート情報のキャッシュを有効にすることでサーバーに負担をかけない設定が可能。
  5. 設定ActionScriptコマンドはわずか2行。
  6. 実装時わずか32kbと軽量 (Adobe AIR Update Frameworkは350kb)。

ライブラリのダウンロード

AirUpdaterUI.zip

ライブラリ以外に必要なもの

ライブラリ以外に以下のものが用意されている必要があります。説明には同一アプリケーションのバージョン違いが登場して紛らわしいので 便宜的に最新バージョン(アップデートで上書きする側)を「NEW」、現行バージョン(アップデートで上書きされる側)を「OLD」で識別することにします。

  1. このライブラリをインポートするOLDアプリケーション
  2. NEWアプリケーション
  3. 「NEWアプリケーションのバージョン情報」と「NEWアプリケーションの保管場所URL」を記述したXMLファイル

使い方

ライブラリを使用する前の下準備(1, 2)をしてからライブラリの設定(3以降)に入ります。図も参考ください。

Flowchart

図1 オートアップデートのフローチャート。

    下準備

  1. NEWアプリケーション(例としてlatest_app.air, バージョン2.0)を以下URLに保管したとします(図1 右上)。 
    http://example.com/latest_app.air
  2. NEWアプリケーションのバージョンとそのファイル保管場所情報を記述したXMLファイル(例としてupdate.xml) 
    <?xml version="1.0" encoding="UTF-8"?>
<!--update.xml-->
<application>
    <version>2.0</version>
    <download_url>http://example.com/latest_app.air</download_url>
</application>
    を以下URLに保管したとします(図1 左上)。後ほど詳しく説明しますが、XMLファイル中のノード名は任意のものでかまいません。 
    http://example.com/update.xml

    3. ライブラリの設定

  3. ライブラリ内AirUpdaterUI.mxmlをOLDアプリケーション(例としてバージョン1.0)内に設置します。 ここではコンポーネントのidをupdaterUIとしています。 このコンポーネント設置場所にAjaxローディングアイコンが表示されるようになります (通信待ち時間にのみ表示。後ほど説明するようにチェック用に常時表示させることも可能)。 
    <!--OLD AIR application ver. 1.0-->
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:updater="com.borealkiss.air.display.*">

    <updater:AirUpdaterUI id="updaterUI"/>

</mx:WindowedApplication>

  4. アップデートチェックを行いたいタイミング(例えばUpdateボタンを用意してクリックされた時など)に以下のActionScriptを記述します。

    <mx:Script>
    <![CDATA[
        updaterUI.setParam("1.0","http://example.com/update.xml","version","download_url");
        updaterUI.update();
    ]]>
</mx:Script>

    updateUIは先ほど設定したAirUpdaterUIコンポーネントのidです。 setParam()に渡す引数は全てStringで前から順番に

    1. OLDアプリケーションのバージョン
    2. バージョンチェック用XMLファイルの保管先URL
    3. XMLファイル中のNEWアプリケーションのバージョンを記述しているノード名
    4. XMLファイル中のNEWアプリケーションの保管先URLを記述しているノード名

    となっています。XMLファイル(update.xml)の設定箇所で説明したように、XMLファイル内のノード名は好き勝手つけれますが、 必ずsetParam()の引数名と一致させる必要があります(上記例では<version>と<download_url>)。

  5. updateUI.update()でバージョンチェックを開始します(図1 矢印a)。 update.xmlにアクセスし中身を解析してから、OLDアプリケーションのバージョンと XMLファイルに記述されたNEWアプリケーションのバージョンの数値の大小を比較して

    1. NEWバージョンが存在する (図2)
    2. NEWバージョンが存在しない (図3)
    3. 通信エラー (図4)

    の3通りの場合に対してAlertウィンドウを表示します。 最新バージョンが存在して"Update"を選ぶと引き続き NEWアプリケーションをデスクトップにダウンロードし(図1 矢印c)、 現在立ち上げているOLDアプリケーションをNEWアプリケーションに書き換えるまでの作業を自動で行います(図1 矢印d)。

    6. Flowchart

    図2 NEWバージョンが存在する場合

    Flowchart

    図3 NEWバージョンが存在しない場合

    Flowchart

    図4 通信エラー(アクセス先URLにXMLファイルがない等)

以上で必要最低限の設定は完了です。

その他 - ローディングアイコンの変更方法

以下のようにAirUpdaterUI.iconModeプロパティを設定する必要があります。 未設定の場合はデフォルト値com.borealkiss.air.display.AirUpdaterUI.INDICATOR_AJAX_BLACKになります。

<updater:AirUpdaterUI 
    id="updaterUI" 
    iconMode="{com.borealkiss.air.display.AirUpdaterUI.INDICATOR_AJAX_BLACK}"/>

iconModeの設定値と表示されるアイコンの関係は以下のようになります。

ローディングアイコンは実際はローディング中しか表示されませんが、 以下のようにAirUpdaterUI.debugModeプロパティをtrue(デフォルトはfalse)にすることで アプリケーションスタート時にも強制的に表示することが可能です。

<updater:AirUpdaterUI id="updaterUI" debugMode="true"/>

その他 - ローディングアイコンのフレームレートの変更方法

AIRアプリケーションのフレームレートと同期します。そのためアニメーションが早すぎる場合は 以下のようにアプリケーションのフレームレートを変更してみてください。 

<mx:WindowedApplication 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    frameRate="12">

</mx:WindowedApplication>

その他 - Alertウィンドウのデザイン変更

未設定の場合はFlexのデフォルトスキンでAlertウィンドウが表示されます。 デザインを変更したい場合はメインアプリケーション内にCSSファイルをインクルードしてください。 以下の例では本パッケージ内assets/stylesheets/AlertDesignExample.cssを読み込ませています (この場合、図2-4のような黒ベースのAlertデザインで表示される)。 

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Style source="assets/stylesheets/AlertDesignExample.css"/>

</mx:WindowedApplication>

その他 - 更新情報のキャッシュの有効化

最新アプリケーションの存在の有無はサーバー上に設置された"update.xml"の内容を解析することで 知ることができますが、逐一ファイルにアクセスするのはサーバーへの負担になります。 updaterUI.update()の引数にキャッシュの有効期限(hour)を設定することで、 実際のファイルアクセスの頻度を制限してやることが可能です。 例えば以下では、最終チェック時より24時間以上経過している場合にはupdate.xmlへ実際にアクセスする、 そうでない場合にはローカルに保存されたキャッシュを利用して更新情報を通達します。

updaterUI.update(24);
updaterUI.update()の引数が未設定の場合、デフォルト値ゼロが代入されます。 その場合updaterUI.update()が呼ばれるごとにupdate.xmlにアクセスし、アップデート情報をチェックすることになります。

その他 - 注意点

その他 - ライセンス

MITライセンスです。 Flashオープンソースプロジェクトとライセンス - blog Boreal Kiss を参考ください。

Contact

info [AT] boreal-kiss [DOT] com

Powered by blog Boreal Kiss 2008.