作って学ぶAIRウィジェットの基礎→応用
連載一覧へ
 作って学ぶAIRウィジェットの基礎→応用（4）

SQLiteのDB操作を追加してAIRウィジェットを完成


クラスメソッド株式会社
福田 寅成
2008/4/21
編集部注：この連載をより深く理解するためには、連載「Apolloプログラミング入門」＆「Apollo改めAIRプログラミング入門」も併せてご覧ください。

AIRウィジェットを作ってコンテストに応募してみよう

- PR -

　皆さんAdobe AIR（以下、AIR）／Flexしてますか？ 学生さんは無料でFlex Builder 3を入手できますし、有料のFlex BuilderもStandard版なら結構手が出せる値段になったので（昔に比べて）、皆さんもFlex Builder 3を入手して自宅でどんどんウィジェットを作っていきましょう。

　また、アドビシステムズが「ADOBE AIRコンテスト」を開催して2008年の4月8日から応募受け付けを開始しました。6月6日まで応募できるようなので、面白いアイデアがありましたら、この連載や連載「Apolloプログラミング入門」＆「Apollo改めAIRプログラミング入門」を参考にAIRウィジェットを作成して応募してみてはいかがでしょうか。

編集部注：Flex Builderは、2010年3月の新版から「Flash Builder 4」に名称変更しています。期間限定の無料版を ダウンロード して使えます

　ということで、これまで3回の連載を通じてAIRウィジェット版RSSReaderを作成してきました。今回は画面とロジックの分離をもう少し進めつつ、AIR内蔵のデータベースの利用方法を学び、RSSReaderを仕上げていくことにします。

今回はSQLiteでRSS情報の更新／削除機能を追加


■ RSSリーダーAIRウィジェット開発の技術要素（復習）

　前回の記事「Flex Builder 3でサクっとActionScriptコーディング！」で示した、RSSリーダーのAIRウィジェット開発で必要な技術要素を再度列挙してみます。

  • 【済】画面のレイアウト
  • 【済】スタイルシートによるレイアウトとデザインの分離
  • 【済】画面とロジックの分離
  • 【済】RSS取得処理
  • 【済】RSS（XML）の解析処理
  • 【済】RSSデータの画面への表示処理
  • 購読するRSSの追加、削除処理
  • さらに追加機能……

　前回まででほとんどの要素をお伝えしてきました。今回は、RSSの追加／削除機能の実装に移る前に実践で役立つ「画面とロジックの分離」を行ってコードを整理してから、RSSの追加／削除機能の話に移っていくことにします。

■ 作業前の準備

　今回の開発は前回の最終結果をスタート地点として実装していきます。今回の記事からコーディングをしていく方はこちらからダウンロードしてください。プロジェクトのインポートの方法は前回の記事を参考にしてください。

　インポートしたプロジェクトの状態（連載第3回の状態）を保存しておきたい場合は、下記のように新しい「RSSReader04」という名前のプロジェクトを作成しましょう。

  1. 「RSSReader04」という名前のプロジェクトを新規作成
  2. 「RSSReader」という名前のMXMLアプリケーションを追加
  3. 「RSSReader04.mxml」と「RSSReader04-app.xml」は削除する（bin-debugの中のモノも削除する）
  4. 「RSSReader03」プロジェクトの「src」「libs」フォルダの中身をコピーしてくる
  5. プロジェクトの［プロパティ］→［Flex アプリケーション］で「RSSReader.mxml」をデフォルトにする

画面（.mxml）とロジック（.as）をファイルで分離

　前回まではコードをMXML内に記述してきました。<Script>タグに記述してきたとはいえ、MXML内に画面の要素とロジックの要素が混在していました。今回で、MXMLは純粋な画面要素だけにし（.mxmlファイル）、ロジックを別途ActionScriptの「クラス」の.asファイルに分けることにします。

編集部注：ActionScriptの基礎について詳しく知りたい読者は、連載「Flashの基礎を無料で習得！ ActionScript入門」を、その中でも「クラス」について詳しく知りたい読者は、連載第4回の「ActionScriptで学ぶクラスやオブジェクト指向の基礎」を、それぞれご覧ください。
図1　画面とロジックの分離
図1　画面とロジックの分離

　図1のように、ある画面（○○.mxmlファイル）に対して同じ名前でファイル名に「Logic」をくっつけたActionScriptクラスを用意します。図1の○○の部分は両者で合わせるようにしましょう。1画面に1ロジッククラスです。図1のようにすると、画面からロジッククラスのメソッド、ロジッククラスから画面の状態などをそれぞれ相互に参照できます。

　今回紹介する分離の仕方は非常に簡単な仕組みを使っていますが、本格的なウィジェット作成や業務アプリケーション作成でも応用できる仕組みですので、ぜひ覚えておいてください（AIR／Flexでは、画面とロジックを分離する仕組みがほかにもいろいろと存在します。それらを調べて、それぞれの良さを比べてみるのもいいでしょう）。
　
　 普通はウィジェットを作る前に分けてから始めるのですが、今回はできたものを分ける作業をしてみます。以下、.asファイル側でのimport文の追加はエラーの起こっているクラス名末尾で［Ctrl］＋［Space］キーを押してサクッと行ってください。

■ 【1】「logic」パッケージの作成とLogic.asのコピー

　［Flexナビゲーター］で「src」フォルダ以下に「logic」パッケージを新規作成します。また、こちらからLogic.asをダウンロードし、「logic」パッケージに張り付けておきます。この「Logic」クラスは各ロジッククラスの親となるクラスです。特に本連載に依存した機能はありません。

■ 【2】RSSReaderLogic.asの作成

　［Flexナビゲーター］の「logic」パッケージを右クリックし、新規ActionScriptクラスをクリックします。

図2　新規ActionScriptクラスの作成
図2　新規ActionScriptクラスの作成

　名前にRSSReaderLogic、スーパークラスに「logic.Logic（パッケージ名付き）」を指定します。［参照］ボタンを押して、クラス名の先頭数文字を入力して選択する方が楽にLogicクラスを選択できます。［終了］ボタンでロジッククラスを作成したら、下記のような初期フォーマットにしておきましょう。

package logic
{
public class RSSReaderLogic extends Logic {
    //--------------------------------------
    // Variables
    //--------------------------------------

    //--------------------------------------
    // Constructor
    //--------------------------------------

    //--------------------------------------
    // Initialization
    //--------------------------------------

    //--------------------------------------
    // UI Event Handler
    //--------------------------------------

    //--------------------------------------
    // Sub Window Event Handler
    //--------------------------------------

    //--------------------------------------
    // DB Event Handler
    //--------------------------------------

    //--------------------------------------
    // Method
    //--------------------------------------

    //--------------------------------------
    // View-Logic Binding
    //--------------------------------------
}
}

　それぞれの区画に、以下のように役割別のコードを記述していきます。

表1　ロジッククラス内の役割分担
区画名 記述するコードの種類
Variables 変数を記述。定数がある場合はConstants区画を作るとよい（位置は変数区画の前）
Constructor コンストラクタを記述。初期化処理
Initialization 画面が生成された後の初期化処理を記述。MXMLのcreationCompleteイベントのイベントハンドラを記述
UI Event Handler 画面のコンポーネントで発生したイベントのイベントハンドラは関連するものをまとめつつここに記述
Sub Window Event Handler 今回作成する子画面のイベントハンドラはここに記述
DB Event Handler 今回作成するSQLite（後述）関連のイベントハンドラはここに記述
Method そのほかのメソッドはここに集めておく
View-Logic Binding おまじないをここに書く

■ 【3】「View-Logic Binding」におまじないを書く

　下記のおまじないを「View-Logic Binding」の区画に記述します。

/** 画面 */
public var _view:RSSReader;

/**
* 画面を取得します
*/
public function get view():RSSReader {
    if (_view == null) {
        _view = super.document as RSSReader;
    }
    return _view;
}
/**
* 画面をセットします
*
* @param view セットする画面
*/
public function set view(view:RSSReader):void {
    _view = view;
}

　ポイントは「画面」の部分のクラスの型をMXMLに合わせるだけです。ここを変えることにより、ほかのMXMLに対応したロジッククラスを作成可能です。

　引き続き次ページでは、画面とロジックをファイルで分離するやり方を解説します。

  1-2-3-4

　INDEX
作って学ぶAIRウィジェットの基礎→応用（4）
SQLiteのDB操作を追加してAIRウィジェットを完成
Page1
AIRウィジェットを作ってコンテストに応募してみよう
今回はSQLiteでRSS情報の更新／削除機能を追加
画面（.mxml）とロジック（.as）をファイルで分離
  Page2
SQLiteデータベースを使ったデータ操作
  Page3
DB（ファイル）の新規作成と接続の確立
テーブルの新規作成
データの検索／参照
  Page4
データの新規作成
データの削除
次世代サービスを構築するのは読者の皆さんかも

作って学ぶAIRウィジェットの基礎→応用 バックナンバー



リッチクライアント＆帳票 全記事一覧へ

TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事
  • 家電のUIになるブラウザ （2012/2/3）
    未来の家電はインターネットに接続でき、ブラウザが内蔵されてくる。家電にブラウザが載ったらどうなるか？ 未来のホームネットワークを想像しよう
  • 「汎用のUI技術」として広がるHTML5 （2012/2/2）
    すさまじい勢いで成長しているHTML5を中心としたオープンなWebプラットフォーム。HTML5やAPI、Webブラウザのアップデート情報をお伝えする
  • ビヨンド・クールジャパン!? （2012/1/27）
    コンテンツという文化力と、ものづくりという技術力を掛け合わせる。両方を国内に持ち合わせている国は多くない。チャンスなのだ
  • Qt5で10億人ユーザーへ、OSSコミュニティ化で健在に （2012/1/20）
    ノキアから売却されてQtはどうなったのか？ 弱体化してしまうのではとの心配をよそにダウンロード数は飛躍的に伸びている

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH