Adobe® Flash®を使用して、日々、人々の目を惹く革新的なユーザーインターフェイスやWebサイトが生み出されています。ただ、WebサイトをすべてFlashで構築するとなると、ある共通の問題点にぶつかります。それは、Flashコンテンツは、「1ページ1URL」というWebの慣習から外れているということです。ページごとに異なるURLがある、それがWebの特性の1つですが、Flashコンテンツではそうもいきません。

たとえば、誰かに自分のWebサイトにある問い合せページを教えたいとしましょう。通常なら、問い合せページのURLを教えれば、相手はWebブラウザのアドレスバーにそのURLを入力して直接そのページにアクセスすることができます。しかし、そのページのURLがなければ、「mysite.comという私のWebサイトにアクセスしたら、メニューから“会社案内”をクリックして、さらにその中にある“問い合せ”をクリックしてください」という風に伝えることになるでしょう。あきらかに、URLを教えるだけの方が簡単で分かりやすいです。

Webサイト全体を1つのFLAファイルで構築し、パブリッシュしたSWFファイルをWebページに配置した場合、そこにあるのは1つのページだけです。つまり、そのWebサイトにアクセスする手段は、1つのURLだけしかないのです。その他に直接Webサイトにアクセスする手段はありません。

あるいは、Webサイト全体ではなく、ヘッダやナビゲーションバー部分にSWFファイルを使いたい場合もあるでしょう。すべてのHTMLページ（またはPHPページ）にそのSWFを埋め込んで、表示されるページの内容に合わせてヘッダの画像を変えたり、ナビゲーションメニューでの現在位置を示したりしたいものです。

この記事では、上記のようなFlashが抱える問題を解決する方法を紹介します。Flashサイト、あるいはFlashヘッダやナビゲーションの特定のパートに、個別のURLでアクセスできるようにします。

記事を読み進める前に、用語の補足説明をしておきます。この記事のタイトルにもある「ディープリンク」とは、ダイレクトリンク、つまりWebサイトの中に埋もれているコンテンツに直接リンクするという意味です。もう1つ「REST(REpresentational State Transfer)」という言葉を使っています。これは、Webアプリケーションの特定のコンテンツや状態に直接リンクするURLを持つという意味です。

必要ソフトウェア

この記事では、以下のソフトウェアを使用しています。

Flash CS3 Professional

• 体験版
• 購入

事前に必要な知識

この記事は、ActionScriptに不慣れなデザイナーやデベロッパーを対象とした内容です。

ノート: Adobe Flex®を使用している、あるいはActionScriptを使ったよりフレキシブルで強力な方法を学びたいという人は、この記事の最後に紹介している「さらに学習したい方へ」を参考にしてください。

謝辞

この記事は、2006年12月に私のWebサイトに掲載した記事 Deep linking to different frames/states in a Flash application*をもとに、読者からのフィードバックを参考に再構成したものです。記事へフィードバックをくださったみなさん、感謝しています。

対象となるFlashサイトの構成

おそらく、Flashベースのサイトを作る上で一番簡単な構成は、メインタイムラインに異なるキーフレームを挿入して、各キーフレームにWebサイトの「状態」（ページや画面のこと）を割り振る方法でしょう（図1）。

図1： Webサイトのページごとにキーフレームを設定する

この記事は、上記のような構成をしたFlashサイトやコンテンツを対象としています。記事タイトルが示すように、URLを使って特定のフレームに直接リンクできるテクニックを紹介します。

フレームアンカーを使用する

ActionScriptや他のスクリプトをまったく使用せずに、どのようにフレームにリンクを貼るのかというと、Flashの「フレームアンカー」を利用するのです。

HTMLに馴染みのある人であればお分かりの通り、アンカーとはWebページ内のリンク先のようなものです。たとえば、HTMLページのある場所から同じページ内の特定の場所へリンクしたい場合にアンカーを使います（実際、HTMLのハイパーリンクを指定するために使用するa要素のaは「anchor（アンカー）」を意味しており、a要素はハイパーリンクだけでなく、アンカーリンクにも使われています）。

HTMLでのアンカーリンクのシンタックスは、以下のように「#（ポンド記号）」に続けてアンカー名を記述します。

• #section1: 現在表示中のHTML内にあるアンカー名「section1」へのリンク
• some_html_page.html#appendix: some_html_page.htmlファイル内にあるアンカー名「appendix」へのリンクURL

フレームアンカーの概念は、このHTMLのアンカーと同じです。ただ、アンカーリンクの先が、HTMLの特定の場所ではなく、メインタイムラインの特定のフレームとなります。Webブラウザ上でアンカーリンクが指定されると、SWFファイル内の再生ヘッドが該当するフレームへとジャンプするのです。

ディープリンクを実現するには、FLAファイルで以下の2つの作業を行います。

• 行き先となるフレームにフレームアンカーを追加
• 適切なHTMLを出力できるようにパブリッシュ設定を変更

フレームアンカーを追加しますが、Flashでフレームラベルを使用したことがある人であれば、簡単に行えます。フレームラベルを追加する方法と同じ手順で、フレームアンカーを追加することができます。

1. アンカー先としてフラグを立てたいキーフレームを選択します（図2）。

   

   図2： アンカー先となるキーフレームを選択します

2. プロパティインスペクタのフレームラベル入力欄にアンカー名を入力します (このアンカー名がアンカーリンクのURLに使用されます)。 (図3).

   

   図3： アンカー名を入力します

3. 「ラベルの種類」メニューから、「アンカー」を選択します（図4）。

   

   図4： 「ラベルの種類」メニューから、「アンカー」を選択します

   以上の作業でフレームアンカーができました。メインタイムラインを見ると、キーフレームの部分にアンカー名と錨のアイコンが追加されています（図5）。

   

   図5： キーフレームの部分にアンカー名と錨のアイコンが追加される

ステップ2で入力したアンカー名は、ユーザーがアクセス時に利用するURLで使用します。たとえば、my_home_page.html#about_usという風になります。このようなURLでページにアクセスすると、SWFファイルはその再生ヘッドを該当するフレームに移動させます。my_home_page.html#about_usの場合、「about_us」とアンカー名が付けられたキーフレームに再生ヘッドが移動して表示されるのです。

ディープリンクを実現するには、もう1つ重要な作業があります。パブリッシュ設定で、適切なテンプレートでSWFファイルが出力されるようにします。

1. メニューから「ファイル／パブリッシュ設定」を選び、HTMLタブをクリックします。

2. テンプレートメニューから「名前付きアンカーを含むFlash」を選びます（図6）。

   

   図6： パブリッシュ設定で、名前付きアンカーを含むFlash」を選びます

   この設定でパブリッシュを行うと、SWFファイルとHTMLファイルを出力します。そのHTMLファイルには、URLからアンカー名を抽出して、SWFの再生ヘッドを該当するアンカーフレームへ移動させるためのHTMLソースとJavaScriptコードが記述されています。

最後にこのテクニックを使う上でのアドバイスを紹介します。

• フレームアンカー専用のレイヤーを用意して、そのレイヤーのキーフレームだけにアンカー名を設定します。
• アンカー名とフレームラベルは違います。 たとえば、アンカー名「home」を付けて、 gotoAndStop("home") というコードを記述しても機能しません。「gotoAndStop("home") 」で再生ヘッドを移動させるには、移動先にフーレムラベルで「home」と付けなければなりません。なお、1つのキーフレームにアンカー名とフレームラベルを同時に付けることはできません。そのため、別々のレイヤーを用意してそれぞれにキーフレームを挿入し、1つをアンカー名に使い、もう1つをフレームラベルに使用します。

使用する上での注意点

この記事ではあえてActionScriptをまったく使わない方法を紹介しましたが、簡単に利用できる反面、制約もあります。特に、この方法では、タイムラインとフレームでFlashサイトのページを構成する必要があります。そうなると、タイムラインの1つのフレーム内に複数のムービークリップを入れ子にしてページレイアウトを構成しているようなWebアプリケーションには使えません。

他にも、URLがユーザーには見つかりにくいという欠点があります。アンカーリンクURL以外の手段でキーフレームに移動した場合、たとえばアニメーションやユーザーのクリックによるgotoAndStop()で移動した場合、Webブラウザのアドレスバーに表示されるURLにはアンカー名が付いていません。そのため、ページや画面ごとに異なるURLが割り振られていることが気づかれにくいでしょう。

さらに学習したい方へ

以下のリストは、上記の問題点を改善するための様々なテクニックです。私自身試したわけではないので保証することはできませんが、いろいろな人々がおすすめとしているテクニックですので、参考にしてみてください。

• Flex 3（現在はβ版）でディープリンクをサポートするための記事「new Deep Linking feature*」。ActionScriptを使って、Flexアプリケーションの内部からWebブラウザのアドレスバーに表示するテキストを制御する方法。
• Asual Interactive Solutionsによる「SWFAddress*」。バックボタンとURLに関する考察。
• Joe Berkovitzによる「UrlKit*」。 ディープリンクを使用したURL制御のためのオープンソースFlexライブラリ。
• unFocusによる「History Keeper*」。FlashアプリケーションでバックボタンやディープリンクをサポートするためのJavaScriptライブラリ。
• アドビ システムズ社のチーフソフトウェアアーキテクトKevin Lynchによる「Making rich Internet apps web-friendly*」。RESTなFlashアプリケーションを実現するためのテクニック。

個人的には、ActionScriptを使うことになりますが、FlashVarsとサーバサイドコードでフレームをダイナミックに移動させる方法が一番シンプルでいいと思います。特に、URLが異なる複数のページで共通して利用するバナーやナビゲーションを作成して、ページごとに変化をつけたい場合は有効です。この記事の元記事では、FlashVarsを使った方法 「FlashVars approach*」も解説しています。FlashVarsに関しては、別な記事「Flash and database communication Part 1*」も書いています。

著者について