SWFAddressとは

SWFAddressはFlashやAjaxを使ったダイナミックなサイトにディープリンク機能を提供するライブラリです。Flex３ならHistoryManager/BrowserManagerクラスを使えば機能を実現することができますが、SWFAddressはディープリンクの機能に加えてトラッカーファンクションを指定できるなど、ちょっと便利な機能があります。

使ってみよう

  1. 対応ブラウザSWFAddressは以下のブラウザに対応しています。
    • Iinternet Explorer6+
    • Firefox 1+
    • Safari 1.3+
    • Opera 9.02+
    • Camino 1+
    • Mozilla 1.8+
    • Netscape 8+
  2. ライブラリの読み込みとオプション

    SWFAddressはjavascriptのライブラリの読み込み時にオプションをsrc属性のurl中にクエリーとして渡します。オプションとして使用できる値は以下の４つがあります。

    • history (bool値) デフォルトはtrue
    • html (bool値) デフォルトはfalse
    • strict (bool値) デフォルトはtrue
    • tracker (文字列) デフォルトは_trackDefault
    1. <script href="swfaddress.js?history=1&html=1&strict=0&tracker=customTracker" type="text/javascript"></script>
    2.  

    history ： ブラウザに履歴を残すかどうか

    html ： IEでのみ効果がある。フラグメントの値を保存する方法が異なる。falseだとiframe内にjavascriptを書き出して値を保持するが、trueの場合は、iframe要素のsrc属性値として値を保持する。この違いがどういう意味があるのか不明。わかる方教えて～

    strict ： ＵＲＬにスラッシュを入れるかどうか。 フラグメントの#の後にスラッシュが入ります。

    tracker ： トラッカーファンクションを指定する。URLが更新されるたびに呼ばれる。
    デフォルトのトラッカーファンクションはurchinTrackerとpageTracker._trackPageviewを呼び出すようになっているので、Google Analyticsを利用している人は、何もしなくてもその恩恵が受けられます。

    SWFAddressは、SWFObject、FlashObject、UFO、AC_FL_RunContentなどと組み合わせて使う場合に、それらのメソッドの一部を書き換えるので、SWFAddressよりも先に、それらのライブラリを読み込ませておいた方がよいでしょう。

  3. サンプル

    サンプル

    ヘッダー部分 ライブラリの読み込みと、タグの書き出し

    <script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/swfaddress.js?strict=0" type="text/javascript"></script>
<script type="text/javascript">
     var flashvars = {};
     var params = {
          menu: "true",
          scale: "noScale",
          allowScriptAccess: "sameDomain"
      };
      var attr = {
           id: "altContent",
           name:"altContent"
      }
      swfobject.embedSWF("SWFAddress.swf", "altContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attr);
</script>

    このサンプルでは、swfobjectと組み合わせてswfaddressを使用しています。

    ここで大事なのは、SWFAddressよりもSWFObjectのライブラリを先に読み込んでやることと、embedSWF()メソッドに渡す8番目の引数attrにSWFを表示するhtml要素のタグのidを指定してやることです。

    body部分

     
<ul>
<li><a href="" onclick="SWFAddress.setValue('ClickA'); this.blur(); return false;" rel="ClickA">ClcikA</a> </li>
<li><a href="" onclick="SWFAddress.setValue('ClickB'); this.blur(); return false;" rel="ClickB">ClcikB</a></li>
</ul>
<div id="altContent">
<h1>SWFAddress</h1>
 
Alternative content
 
<a href="http://www.adobe.com/go/getflashplayer"><img
      src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>
</div>
 

    SWFAddress.setValue()メソッドを呼ぶことでURLを更新してやります。URLが更新されると、自動的にSWF側にもSWFAddressEvent.CHANGEのイベントが発行されます。

    as側の記述もjavascript側とほとんど同じように記述できる。

    <?xml version="1.0"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init(event)">
      <mx:Script>
      <![CDATA[
      import mx.events.FlexEvent;
      import com.asual.swfaddress.SWFAddress;
      import com.asual.swfaddress.SWFAddressEvent;
      import mx.controls.Alert;
      import mx.events.ItemClickEvent;
 
      public function init(event:FlexEvent):void{     SWFAddress.addEventListener(SWFAddressEvent.CHANGE, swfAddressChangeEvent);
      }
 
      public function swfAddressChangeEvent(event:SWFAddressEvent):void {
         var path:String = event.path;
         Alert.show(path, "path");
      }
 
      public function itemClickHandler(event:ItemClickEvent):void {
          var index:String = String(event.item);
          SWFAddress.setValue(index);
      }
      ]]>
      </mx:Script>
      <mx:ButtonBar itemClick="itemClickHandler(event);">
     <mx:dataProvider>
        <mx:String>Menu_1</mx:String>
        <mx:String>Menu_2</mx:String>
        <mx:String>Menu_3</mx:String>
     </mx:dataProvider>
      </mx:ButtonBar>
   </mx:Application>