アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » WEB+DESIGN STAGE » 連載 » NORIのFlashユーザのためのMovable Type講座 gihyo.jp版 » 第8回 Flashコンテンツを公開する

NORIのFlashユーザのためのMovable Type講座 gihyo.jp版

第8回 Flashコンテンツを公開する

Flashコンテンツを公開するために今回は,MTでhtmlを出力します。

通常であれば,Flashが出力するhtmlでも十分かもしれません。しかし,今回はコンテンツ(写真画像やタイトル)をMTで管理しているので, 検索エンジン対策も兼ねてダイナミックに変化するhtmlを提供したいと思います。

これを実現するには,SWFObjectを使用して,Flashに置き換わる<div>要素の部分にも,情報を出力します。

また,今回のコンテンツは,フォトアルバムということで,個々の写真のURLを指定できるようにSWFAddressを利用します。

まず「SWFAddressの導入によるFlashの修正」をし,次は「MTによるSWFObjectを利用したhtmlの作成」について紹介します。

SWFAddressの利用

SWFAdressは,Flashとブラウザ間で,URLやタイトルの情報をやりとりする仕組みを提供します。

これを利用すると,Flashで次のことが可能になります。

  • アドレスバーの文字列を取得する(URLが変更されるとFlash内にイベントが流れます)。
  • ブラウザのアドレスバーやタイトルを変更する。

今回のフォトアルバムでいえば,画像ごとにURLとタイトルを変更できます。 つまり個別の画像に対して,固有のタイトルでのブックマークが可能になります。

 個別のURLとタイトル

図 個別のURLとタイトル

SWFAdressは,以下で配布されていますので,ダウンロードしておきます。

 SWFAdressサイト

図 SWFAdressサイト

SWFAdressに対応したFlashを作成する際に,必要な機能は次の通りです。

  • アドレスバーが変更されたら、アドレスバーの文字列にしたがって画像を読み込む
  • アドレスバー,タイトルバー,ステータスバーをスクリプトで変更する。

大きな修正として,従来はXMLを読み込んでからFlash内部で関数を呼んで画像を表示していましたが,SWFAddressではアドレスバーの変更がすべてのきっかけになるため,アドレスバーの変更→XMLのチェック→画像の表示となります。

このとき重要なのは,XMLがまだ読み込み終わっていない場合を想定してロジックを組み立てないといけないことです。

また,クリックして次の画像を表示するフローが,クリックしたらアドレスバーを変更するフローに変わります。アドレスバーの変更はFlash内のイベントを呼び起こし,次の画像を読み込むというフローに繋がります。

アドレスバーの変更イベントは,一番最初にFlashを表示した時も発生します。

SWFAddressの準備

SWFAddressでは,2つのasファイルが提供されています。

今回作成しているFlashは,AS3なので,ダウンロードし解凍したフォルダのsrc/as/3にある2つのasファイルが必要です。

  • SWFAddress.as
  • SWFAddressEvent.as

とりあえず,Flaファイルと同じフォルダにコピーしておきましょう。

 2つのASは,同じフォルダに置く

図 2つのASは,同じフォルダに置く

では,URLを読み取る部分から作成しましょう。

URLの読み取り

SWFAddressでは,URLのアドレスが~.html#/○○となる場合の,○○をFlash側で知ることができます。

そこで,今回のフォトアルバムでは,次のような仕様にしています。

「URLを~.html#/<entryID>とし,ユーザが~.html/#1とアクセスすると,entryID=1の画像を表示する」

SWFAddrressでは,アドレスバーが変更されると SWFAddressEvent.CHANGE というイベントが発生します。

そこで,次のようにすることで関数onChangeSWFAddress()がその都度,実行されます。

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, onChangeSWFAddress);

関数の引数であるSWFAddressEventの value には,#以降の文字列が入ってきます。

ここからentryIDだけを取り出して,前回まで使っていたshowPicture()という関数に渡すのですが,実は,showPicture()は順番を元に表示する画像を特定しているため,そのまま数値を渡してもエラーになってしまいます。

そこで,一度,showPicture()を実行する前にentryIDから順番を求めるshowPictureByID()関数を作成しました。

それを利用して,表示すべき画像を特定しています。

showPictureByID()という関数では,渡されたentryIDから,配列image_arrayの中にあるオブジェクト1つ1つと照らし合わせて順番を割り出すgetNumFromID()関数を実行しています。

そうすることで,アドレスバーのURLの#/以降にentryIDを指定すると,正しくentryIDの画像が表示されるようになります。

//SWFAddress で得られたID  (ex. "/8")
var givenID:String

// SWFAddressに変化があると呼ばれる関数
function onChangeSWFAddress(e:SWFAddressEvent) {
    givenID=e.value;
    //実際のURLを仮定してテスト
    //givenID="/8";
    //まだXMLが読み込み完了してなければ・・・常に最初は「そう」
    if (image_array.toString()=="") {
        //XML読み込み実行
        myLoader.load(myURLRequest);
    } else {
        //XMLの読み込みが完了していれば、画像をIDで指定する
        showPictureByID(givenID);
    }
}

//イベント設定
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, onChangeSWFAddress);

//id番号で指定すると、showPicture用のナンバーに置き換えて実行する
function showPictureByID(e:String):void {
    trace("showPictureByID",e);
    var num:uint;
    if (e!="/") {
        var t_array=e.split("/");
        num=getNumFromID(t_array[1]);
    } else {
        num=0;
    }
    try {
        showPicture(num);
    } catch (e:Error) {
        //showPictureの引数が不正な時用
        trace("e:",e.message);
    }
}
//IDから、num番号を探し出す
function getNumFromID(id:String):int {
    var len:uint=image_array.length
    for (var num:uint = 0; num<len; num++) {
        var targetObj=image_array[num];
        if (String(targetObj.id)==id) {
        //idと一致したら、numを使用するので、ループ処理から抜ける
            break;
        }
    }
    return num;
}

著者プロフィール

NORI(伊藤のりゆき)

有限会社トゴル・カンパニー代表。ロクナナワークショップ講師。Flashアクセシビリティを得意とし,ライターとしてFlash関連書籍や雑誌記事の執筆を行う。共著の「ActionScript3.0辞典」が発売中。また,先頃,写真家として初の写真集「「Snap or Nothing写真集」(iTunes AppStoreにて)が発売された。

だれもが使えるウェブコンクールではシンポジウムに登壇し「Flashアクセシビリティのノウハウ」を紹介する予定。内容のリクエストはTwitter(nori_togoru)まで。

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

キーパーソンが見るWeb業界

本連載はWeb Site Expert/gihyo.jpとの連動企画です。阿部淳也, 長谷川敦士, 森田雄のお三方による,Web業界をテーマにした座談会です。

きたみりゅうじの聞かせて珍プレー

ソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお待ちしてます!

ActionScript 3.0で始めるオブジェクト指向スクリプティング

野中文雄氏が,簡単なスクリプトは書いたことがあるという初級者を対象に,ActionScript 3.0の基本からクラス定義までを解説します。

まだ間に合う「ITパスポート」受験対策 原山先生の短期合格塾

この連載では,4月18日のITパスポート試験の受験に向けて,短い期間で効率良く受験対策を行う方法や,確実に得点するための裏ワザなどを伝授していきます。

Ubuntu Weekly Recipe

Ubuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。

C/C++プログラマのためのDTrace入門

よくカーネルのチューニングや解析で活用されるDTraceですが,実はユーザプログラムの開発においても非常に有用です。連載ではC/C++プログラマやテストに関わる方向けにDTraceの使い方を解説します。

Blogopolisから学ぶ計算幾何

計算幾何学は,図形に関するアルゴリズムを研究するコンピュータサイエンスの一分野です。本連載では,ビジュアルブログ検索エンジン「Blogopolis」で採用されている計算幾何のアプローチを例に取り上げながら,計算幾何の初歩を実践的に学習します。

検索エンジンはいかにして動くのか?

本連載では, 今や誰もが利用している検索エンジンの中身を,全体の仕組みやデータ構造,アルゴリズムから分散インデックスまで,最近の研究事例も交えて紹介します。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス