2003年12月11日号
━━━━━━━━━━━━━━━━━━━━━ 2003.12.11 Vol.896 ━━━━━ ■□■□■ ■□■□■ 日刊「WEBのツボ！」 □■□■□ http://www.soho-union.com/ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 配信部数 xxxx部 「システムはオブジェクト指向 Ruby & Flash」(#010) 福井修@Fsys 【○】本日のお題【 応用編 】Ruby&Flash&PostgreSQL での 応用例 ━━━━━ 今年も押し迫って来ました。本シリーズも１０回目最終回です。 前回注1)【 応用編 】「Ruby&Flash&PostgreSQL での 郵便番号検索 」というテ ーマで解説しました。ソースのダウンロードがうまくいかないというメールを頂 きまして12月1日に、改善しましたので、もしうまくダウンロードできなかった 方は、再度トライしてみて下さい。m(_ _)m RubyとFlashのエレガントなオブジェクト指向スクリプトデュエットで、幸せに なれる人が増えることを楽しみにしています。 さて本日のRuby&Flash&PostgreSQL 応用編 ２回目は、Flashのコンポーネント でXMLオブジェクトを活用し、サーバサイドＤＢと連携したTree表示画面を紹介 します。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ■ Treeコンポーネントの応用 ──────────────────────────────────── ブラウザで、Tree表示（Windowsのエクスプローラの左側の表示など）したいと いう場面がありました。マイクロソフト社のサイトなどでは、よく使われている のでどう実装しているのか見てみると、結構複雑なしかけのようです。 JavaScriptでの例 注2)などでも項目固定で決めうちならまだ良いのですが、サ ーバサイドから動的にＤＢの情報を持ってきてそれを Tree表示するというのは、 まあそれなりの挑戦しがいのあるテーマとなります。 なんとかサーバサイド連携での Tree表示を簡単にできないものかと、いろいろ 検討してみましたが、macromedia社ご提供の英語版 Flash UI Components Set2 にTreeコンポーネントが、存在しています。（Flash2004では、標準になった様 です注3)のでより身近になりますが、まだ私は手元ではまだ確認していません） これが使えないか、探ってみました。 順番に、ステップを踏んでみましょう。私のクライアント環境は、WindowsXPと Flash XM です。 ステップ１．Flashコンポーネント入門 そもそもFlashコンポーネントの取扱に慣れるには、公式サイトにある解説 が参考になります。注4) ステップ２．Flash UI Components Set2ダウンロード Tree表示の含まれる UI Componentsは Set 2 でオプション的な扱いなので、 別途 macromedia UI Componets Set 2 をダウンロードします。注5) もしダウンロードできなくてもステップ２．と４．はパスしてもかまいませ ん。Componentsを組み込んで作成するのでなければ。 ステップ３. Flash Player/プラグイン更新 Flash Player/プラグインが古いとTreeがうまく表示されませんので、更新 します。 開発者用 Macromedia Flash Player 6 アップデータ 6.0r79 をダウンロー ドして実行します。注6) この更新で、ブラウザのプラグインも更新されました。 ステップ４．公式 Treeコンポーネントのサンプルを動作確認 ステップ２でダウンロードしたexplorer_expander を解凍して、 explorer_expander.swfを単体で Flash Player で動かしてみます。 これを拡張すれば、いろいろできそうなことを確認できます。 ステップ５．reflectXML 確認 実際に、FTreeコンポーネントを活用したコンポーネントも提供されていま す。FTree を用いて、XMLオブジェクトをそのままツリー表示するためのメ ソッド を reflectXML として Katoさんが提供されているのです。 すばらしい。 これをダウンロードして、動作確認します。注7) ステップ６．ツリー表示で日本語を使う さらに icutommyさんが KatoさんのreflectXMLを使用して 日本語XMLデータ に対応されました。すばらしい。 これもダウンロードして動作確認します。注8) icutommyさんは、この日本語化の解説を含めUI Components Set2非公式日本 語マニュアルをWiki にて提供されています。注9) すばらしい。 駆け足で Flash Treeコンポーネントを紹介してきましたが、上記の動作確認で 概略は、つかめると思います。しかし実際に、使いこなすには、まだ大物の準備 が必要です。 そう遂に XMLオブジェクト の出番です。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ■ XMLオブジェクト ──────────────────────────────────── XMLという言葉は、もう知らない人はいないぐらい耳なれてきていますね。 マイクロソフトも、相当力を入れていて、新しい Office 2003 でも XMLはポイ ントです。注10) XMLについては、もう概念や、仕様について語るフェーズから実装について語る フェーズになっている訳で、実装ベースでの話しを進めましょう。注11) Flash ActionScriptでは、XML文書をXMLオブジェクトとして扱えるように、XML をサポートしています。 ここらあたりも踏み絵的です。オブジェクト指向の世界で、○○オブジェクトと いう話しが始まっても、ごく自然なのですが、あまりオブジェクト指向に、なじ みが無いと、壁を感じてしまうようです。 まあ何でも慣れですから、慣れるだけ。慣れるだけ^^。 XML文書は、要するにタグをつかった文字列です。マシンも人間も読めるところ の。いろいろ約束事が、あって細かく言い出すとどんどん深みにはまって行きま す。 XML用のスキーマ言語は、DTD、XMLSchema、RELAX-NGが三つどもえの競争をして いる(現実には、まだDTDの時代)のですが、RELAX-NGが最近 ISOに正式採択され たようなので、やっと混乱が収束してゆく流れができるかも知れません。注12) とにかく XMLオブジェクトの基本から始めましょう。 ActionScriptで XMLオブジェクトを扱うには、はじめにXMLオブジェクトを生成 します。 objXML = new XML() XMLは、あらかじめ定義されていますから（MXではまだ classと陽には、言わ ないが、実際は class）インスタンス（＝オブジェクト）を newで生成します。 これは、メモリ上に実態を確保し、ラベルを付けることになります。 XMLオブジェクトには、メソッドが準備されています。 load() XMLをダウンロードして読み込みます。 onLoad() ダウンロードが終了したときにコールバックを定義するイベント ハンドラ parseXML() 文字列をXMLとして読み込む ： プロパティも準備されています。 parentNode 親ノードを参照する firstChild 最初の子ノードを参照する ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ■ Treeコンポーネント応用例 稼働サイト ──────────────────────────────────── では 実際に Flash Treeコンポーネントを操作して頂けるように http://fsys.net/tree/ に環境を作成しておきます。 また XMLを生成するサーバサイドのプログラムや DB については、次の連載で 解説する予定です。 どうぞ おたのしみに。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ※ 注釈、資料、参考情報 ──────────────────────────────────── 注1)連載 ９【 応用編 】Ruby&Flash&PostgreSQL での 郵便番号検索 http://www.melma.com/mag/02/m00020302/a00000671.html 注2)JavaScriptでツリーメニューを表示するには 杜甫々さんのサイト http://tohoho.wakusei.ne.jp/how2/tec2.htm 注3) macromedia ActionScript2コンポーネント解説 http://www.macromedia.com/devnet/mx/flash/components/presentation/ 注4) Flashコンポーネント入門公式サイトの解説 http://www.macromedia.com/jp/support/flash/applications/creating_forms/creating_forms02.html 注5) Flash UI Components Set2ダウンロード http://www.macromedia.com/cfusion/exchange/index.cfm?view=sn111&extID=365880 注6) 開発者用 Macromedia Flash Player 6 アップデータ 6.0r79 http://www.macromedia.com/jp/support/flash/downloads.html 注7) reflectXML Katoさんが提供されています。 http://tatsuokato.com/sample/FTree_reflectXML.zip 注8) reflectXML tommyさんが日本語XMLデータ対応化。 http://homepage2.nifty.com/icutommy/wiki/UI2/FTree_reflectXML_NoEmbed.zip 注9) UI Components Set2非公式日本語マニュアル http://hpcgi2.nifty.com/icutommy/fwiki_ja/wiki.cgi?FlashUIComponentsSet2Manual 解説：FTree コンポーネント を デバイスフォントで表示する http://hpcgi2.nifty.com/icutommy/fwiki_ja/wiki.cgi?FTreeNoEmbed 注10) Office 2003のXMLスキーマ・サポートがもたらすインパクト http://www.atmarkit.co.jp/fwin2k/techreview/off2003xml/off2003xml01.html Office 2003--企業はアップグレードに... http://japan.cnet.com/news/ent/story/0,2000047623,20061509,00.htm Office 2003、XMLフルサポートは一部版のみ http://www.zdnet.co.jp/news/0304/12/nebt_16.html Microsoftとオープンソース推進派の両者がXMLで勝利宣言 http://www.zdnet.co.jp/enterprise/0311/27/epic01.html 注11) とはいうものの ちょっとだけ昔集めた解説へのポインタを XMLの基礎を理解する10のポイント http://www.atmarkit.co.jp/fxml/tanpatsu/07xmlbegin/xmlbegin01.html XMLの基礎理解〜これだけ知っていれば大丈夫〜 http://www.atmarkit.co.jp/fxml/tanpatsu/17freshman/xml_basic.html 技術者のためのXML再入門 第1回 XMLの注目される特徴とは何か？ http://www.atmarkit.co.jp/fxml/rensai/rexml01/rexml01.html 第1回 スキーマ戦争最前線 2001/5/29 http://www.atmarkit.co.jp/fxml/rensai/frontier/frontier01.html 注12) RELAX-NG が正式にISOの規格に (ISO/IEC 19757-2:2003)2003-11-28 http://www.iso.org/iso/en/CatalogueDetailPage.CatalogueDetail?CSNUMBER=37605&ICS1=35&ICS2=240&ICS3=30 【プロフィール】 福井 修 ( FUKUI Osamu )o-fukui@po.iijnet.or.jp 福井システムリサーチ http://fsys.net/ 主幹。システム構築歴２７年。 システム構築エキスパート 日本リヌクス協会、神戸商工会議所、情報処理学会 会員 関西ソーホ・デジタルコンテンツ事業協同組合員 デジタルハリウッド神戸校 Java講師
