Flex Builder 3でサクっとActionScriptコーディング！：作って学ぶAIRウィジェットの基礎→応用（3）（4/4 ページ）

» 2008年03月24日 00時00分公開

[福田寅成，クラスメソッド株式会社]

前のページへ 1|2|3|4 　　　　　　

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

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

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

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

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

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

　ブレークポイントを付けた場所で処理が止まっているので、止まっているうちに、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))

              );

          }