連載一覧へ

作って学ぶAIRウィジェットの基礎→応用（3）

Flex Builder 3でサクっとActionScriptコーディング！

クラスメソッド株式会社
福田寅成
2008/3/24

Flex Builder 3でデバッグをしてみよう

■ ブレークポイントを付けてデバッグ開始！

　まず、loadRssFeedCompleteHandlerメソッドの中の「try」文の中の最初の処理の左側をクリックしてブレークポイントを付けて、ウィジェットをデバッグ実行（［F11］キー）してみましょう。

図10　ブレークポイントの付け方

　ウィジェットをデバッグ実行し、RSSを何か選択すると、Flex Builder 3の［デバッグ］パースペクティブが開きます。以下、＠ITのRSSが選択されたとします。

図11　ブレークポイントでの処理停止

- PR -

　ブレークポイントを付けた場所で処理が止まっているので、止まっているうちに、RSSデータが取得できているかを確認します。

■ ［変数］ビューでRSSのデータを覗く

　画面右上の［変数］ビューで、まずは「event.target.data」の値を見てみます。これが取得したRSSのデータです。しかし、図12のようにデータはちゃんと取得されていると思います。

図12　［変数］ビュー

　上位のオブジェクトからドットをたどっていくと、中身が見えます。最後のdataの部分でXMLが表示されていて、実際にXMLが取得できているのが分かります。

■ Flex Builder 3のデバッグ用ボタン群の使い方

　では、処理を1行進めてライブラリによるデータ変換が失敗していないかを確認しましょう。

図13　Flex Builder 3のデバッグ用ボタン群

　画面中央上部にデバッグの進行に関するボタンが表示されています。簡単に解説します。

緑矢印ボタン：再生ボタン。ブレークポイントで止まっている処理を再生
赤四角ボタン：停止ボタン。処理を停止
黄色矢印（一番左）：ステップインボタン。メソッドを呼んでいる場合、その内部に進む
黄色矢印（中央）：ステップオーバーボタン。次の処理に1処理だけ進む
黄色矢印（一番右）：ステップリターンボタン。ステップインで中に入る処理の逆で、処理を最後まで進めて、1階層上の処理に戻る

　ここでは、黄色矢印（中央）のボタンを1回クリックします。すると、「feedItemList = rss.items;」の行に進むので、rssの値を見てみます。［変数］ビューでthis（＝MXML全体）を開いて、rssを探します。

図14　ライブラリによって変換されたRSSデータ

　直前の状態から変化のある部分は黄色で表示されているので分かりやすいです。ここでも、rssには値が入っていることが確認できるので、イベントハンドラのコードには問題がないことが分かります。ここで、停止ボタンで処理を停止しておきます。

■ 問題の原因を発見！

　また、パースペクティブを［Flex開発］に戻します（画面右上のタブ利用）。実は、問題はデータグリッドのDataGridColumnにあります。MXMLを確認し、データグリッドの列表示に関する設定を下記に変更します。

    <mx:columns>

            <mx:DataGridColumn headerText="日付" dataField="date" 

              width="135" />

            <mx:DataGridColumn headerText="タイトル" dataField="title" />

          </mx:columns>

　dataField属性を追加しました。これは「DataGridのdataProviderの1行を表すオブジェクト中のどのプロパティをこの列に表示するか」を指定する属性です。ライブラリによって解析された記事1個1個のオブジェクトRSS20Item、RSS10Item、Atom10Itemはどの場合でもdateプロパティとtitleプロパティを持っていますので、それを上記のように指定します。

　ウィジェットを再度実行してみると、RSSの記事一覧がデータグリッドに表示されます（ブレークポイントで処理が止まる場合、まずブレークポイントをダブルクリックして解除し、再生ボタンをクリックしましょう）。これで、RSSReaderの中心となる処理の実装が終わりました（本質的にはコード2行だったんですけどね）。

RSSフィードの表示やエラー処理などをして仕上げる

　次に、「記事概要」表示処理を実装していきましょう。showFeedメソッドの中身を実装します。

Feed本文の表示

    private function showFeed(event:Event):void {

              trace("showFeed");

        

                 // 選択された記事

              var myItem:Object = feedList.selectedItem;

              // 記事の概要

              var excerptValue:String = "";

      

              // 取得したRSSの型を判定し、概要を取得

              if(myItem is RSS20Item) {

                  trace("RSS20Item");

                  excerptValue = Excerpt(RSS20Item(feedList.selectedItem)

                      .excerpt).value;

              } else if(myItem is RSS10Item) {

                  trace("RSS10Item");

                  excerptValue = Excerpt(RSS10Item(feedList.selectedItem)

                      .excerpt).value;

              } else if(myItem is Atom10Item) {

                  trace("Atom10Item");

                  excerptValue = Excerpt(Atom10Item(feedList.selectedItem)

                      .excerpt).value;

              }

              // 概要を画面に表示

              myFeed.htmlText = crlf2empty(excerptValue);

          }

　ここでは、記事の型をis演算子で判定しています。各記事取得処理では、リストの選択行のアイテムを取得し、それぞれのRSSアイテムの型にキャストし、excerpt（概要）プロパティを取り出し、Excerptクラスでキャストして、その値を取得しています。

■ CRLF（改行コード）削除メソッド

　このまま画面に表示してもいいのですが、空白行のすごく多い記事は、筆者も個人的に読みにくい気がしますので、ウィジェット側で、その点のみ「編集」して概要を表示することにします。下記crlf2emptyメソッドを<Srcript>タグの最下部近辺に実装します。

    /**

           * CRLFを削除（※大量に改行が表示されるのを抑制する）

            * @param str 文字列

                * @return 整形した文字列

                  */

                    private function crlf2empty(str:String):String {

              return str.replace(/\r\n/g, "");

          }

　ウィジェットを実行し動作を確認します。RSSを選択し、記事一覧が表示されたら、記事の1つを選びます。これで、RSSリーダーのメインとなる機能の実装は終わりました。

■ 例外イベントが発生した場合の処理

　さらに、ioErrorHandlerメソッドの中身を実装していきましょう。

RSS読み込み失敗処理

    private function ioErrorHandler(event:ErrorEvent):void {

              trace("ioErrorHandler");

      

              trace(event);

              Alert.show("ネットワークエラー。"

                  + "RSSのURLを確認したりしてください。");

              // 全画面を利用できるようにする

              this.enabled = true;

          }

　I/Oエラーが発生した場合、エラーの内容をデバッグコンソールに表示し、Alertボックスを画面に表示し、エラーの内容をユーザーに通知。その後、画面をクリックできるように画面の状態を元に戻しています。テストを行うには、rssInfoListのRSSのURLを存在しないURLに修正するのが一番早いでしょう。

■ 記事のブラウザでの表示

　showInBrowserメソッドの中身を実装していきましょう。

Feedのブラウザでの表示

    private function showInBrowser(event:Event):void {

              trace("showInBrowser");

        

              // 選択されたRSSアイテム

              var myItem:Object = feedList.selectedItem;

              // RSSアイテムのlink先

              var link:String = "";

      

              // 取得したRSSの型を判定し、概要を取得

              if(myItem is RSS20Item) {

                  trace("RSS20Item");

                  link = RSS20Item(feedList.selectedItem).link;

              } else if(myItem is RSS10Item) {

                  trace("RSS10Item");

                  link = RSS10Item(feedList.selectedItem).link;

              } else if(myItem is Atom10Item) {

                  trace("Atom10Item");

                  link = Atom10Item(feedList.selectedItem).link;

              }

              // URLRequestオブジェクトの作成

              var urlRequest:URLRequest = new URLRequest(link);

              // 標準ブラウザに対して指定したURLを開くよう指示

              navigateToURL(urlRequest, "_blank");

          }

　記事の概要表示処理とほぼ同じ処理の流れになっています。最後で、navigateToURLを用いて標準ブラウザにURLを渡しています。

　実装できたら、ウィジェットを起動し記事一覧の記事をダブルクリックして記事がブラウザで表示されるかを確認します。

■ 表示データの整形（フォーマッタの利用）

　記事一覧の記事が書かれた日付が独特のフォーマットのため見づらいです。フォーマッタを利用して、なじみのある形式の日付に変換しましょう。まず、MXMLでheaderTextが日付のDataGridColumnにlabelFunctionを追加します。

<mx:DataGridColumn headerText="日付" dataField="date" width="135" 

        labelFunction="dateLabelFunction"/>

　これにより、その列の各セルを表示する際に、関数を呼び出してセルの値に対して処理できます。次に、dateLabelFunctionを実装します。

    /**

          * 日付表示セルのフォーマット処理

            * @param data DataGridの選択されたデータ項目

                * @param column DataGridの列オブジェクト

                  * @return フォーマット済みのデータ項目

                    */

                      private function dateLabelFunction(data:Object, 

                 column:DataGridColumn):String {

              var returnString:String;

              var date:Date;

      

              try {

                  // []でオブジェクトの指定したフィールドを取得する

                    // ここではcolumn.dataField＝dateなので、

                    // data.getDate()を呼んでいる

                  date = data[column.dataField] as Date;

                  returnString = dateFormatter.format(date);

      

              } catch(e:Error) {

                  // getDate()メソッドが例外を出した場合

                    // 何とかエラーオブジェクトから日付を取り出してみる

                  date = salvageDateFromError(e);

                  returnString = dateFormatter.format(date);

              }

              return returnString;

          }

　このままだとエラーがあって動かないので、dateFormatterオブジェクトをまず作ります。<Script>タグが閉じた後のところに、下記タグを追加します。

</mx:Script>

                

                <!-- 日付フォーマットオブジェクト -->

      <mx:DateFormatter id="dateFormatter" 

         formatString="YYYY/MM/DD JJ:NN:SS"
        />

        

        <mx:HDividedBox width="100%" height="100%"

　これのオブジェクトのformatメソッドを利用して、日付のフォーマットを行っています。

■ エラーオブジェクトから日付を力業で取り出すメソッド

　また、最初の日付取得処理でエラーが発生する場合がまれにあります（自社の新着情報を独自アプリなどでRSS配信していたりする場合）。その場合を考慮し、（RSS読み込みライブラリが出す）エラーメッセージ中から日付を無理に取り出すsalvageDateFromErrorを用意しておきます。

    /**

           * エラーオブジェクトから日付を力業で取り出す

            * @param e Error

                * @return 日付文字列

                  */

                     private function salvageDateFromError(e:Error):Date {

              // ［2008-11-11］形式の日付をエラーメッセージから抜き出す

                // W3CDTF形式の日付の扱いもダメなもよう（corelib）

              var message:String = e.message;

              var index:uint = message.indexOf("[") + 1;

              var tempString:String = message.substr(index, 10);

      

              return new Date(

                  Number(tempString.substr(0, 4)),

                  Number(tempString.substr(5, 2)) - 1, 

                  Number(tempString.substr(8, 2))

              );

          }

できたAIRウィジェットをインストールして動かそう！

　今回のすべての実装が終わったので、ウィジェットを起動して動作を確認したり、AIRパッケージを書き出してPCにインストールしたりしてみましょう。今回のプロジェクト全体（rssreader03.lzh）はここからダウンロードできます。

　次回はRSSReaderの仕上げに入ります。従来のWebアプリケーションでは難しかった「ローカルへのデータの保存」を実装したりする予定です。お楽しみに。

■＠IT関連記事

Flex2でWebアプリ開発
これまで3週間かかっていたWebアプリのモック開発工程を、3日に短縮できたというFlex2の体験版をダウンロードして簡単アプリを作ってみよう

現場で使えるFlex実践テクニック
本連載では、Flex開発で基本となる特徴的な機能から一歩進んで、実開発の現場でよく使われるテクニックについて、より実践的に解説します

さらに関連記事へ

プロフィール：福田　寅成（ふくだ　ともなり）
クラスメソッド株式会社　エンタープライズサービス部門システムエンジニア
大手SIerでの長いJava開発経験を経てクラスメソッドに。 Java、JavaScript/Ajax、Flex、AIR、C#など、さまざまな分野に関する技術調査研究、および業務アプリケーション開発に携わる。 FlexやAIRの開発依頼はコチラ

1-2-3-4

INDEX
作って学ぶAIRウィジェットの基礎→応用（3） Flex Builder 3でサクっとActionScriptコーディング！
	Page1 AIRウィジェットの処理やロジックをActionScriptで記述 ActionScriptコーディングを行う前の準備注意！「今回利用したライブラリの問題点」コラム　「プログラム用語の方言」
	Page2 Flex Builder 3を使ってサクッと変数を定義コラム　「Flex Builder 3の『import追加』機能」コンポーネントへのイベント指定とメソッドのひな型作成
	Page3 RSSのリクエストの作成注意！「メモリリークの原因」 RSSのレスポンスの取得
	Page4 Flex Builder 3でデバッグをしてみよう RSSフィードの表示やエラー処理などをして仕上げるできたAIRウィジェットをインストールして動かそう！

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

第1回いまさら聞けないAdobe AIR「超」入門
第2回 Flex／AIRウィジェットのデザインをCSSでカッコよく
第3回 Flex Builder 3でサクっとActionScriptコーディング！
最終回 SQLiteのDB操作を追加してAIRウィジェットを完成

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

TechTargetジャパン

リッチクライアント & 帳票フォーラム新着記事

次のモバイルアプリはどのフレームワークで作る？ （2012/5/24）
スマホアプリの開発を容易にするJavaScriptのフレームワークが続々と増えている。それぞれの良さや仕組み、何がどこまでできるのかを徹底解剖する
「LESS＆専用エディター」でCSSをシンプルに書こう （2012/5/23）
「LESS」はCSS初心者に向けた、シンプルなライブラリだ。「LESS」で、変数などのプログラミングの基礎的な考え方もCSSで学ぼう
学校が世界一のデジタル環境になったら （2012/5/18）
授業はアーカイブに蓄積され、家からも見られる。家族が授業テーマのアイデアを出す。そんな姿が実現されるかもしれない
1000万ドル調達も夢じゃないクラウドファウンディング （2012/5/15）
クラウドファンディングは、寄付型でも投資型でもない「購入型」が主流。商品を“開発する前に販売”して開発費用を集める逆転のシステムだ

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

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial

＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

ニュース一覧へ

お勧め求人情報

転職／派遣情報を探す

エンジニアの求人情報、ただいま増加中
【転職サーチ】SIer／Web企業／新規事業
スマホ開発で、あなたのキャリアを生かす

派遣エンジニアにお役立ちの仕事情報
「派遣・フリーで働くメリット」とは？
活躍する派遣エンジニアの本音

エンジニアのキャリア実現を応援します

ITトレメ「ビジネス基礎」シリーズ開始
「マナー＆コミュニケーション編」「法律・知財・債権管理編」

＊先週の人気講座ランキング＊
～ Android編～

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