Flash×Movable Typeで広がるサイトの可能性
Content
作成日
11 September 2008
ページ ツール |
必要条件
ユーザーレベル
初級
必要な製品
- Flash Professional CS3 (Download trial)
はじめに
Movable Type（以下、MT）はシックスアパート株式会社が提供するブログ構築ソフトウェアで、多くのWeb制作者が利用しています。MTはバージョン4.0以降、大きな進化を遂げ、ブログツールとしてだけではなく、コンテンツマネジメントシステム（以下、CMS）としての機能も強化されました。通常、CMS構築はプログラマーの領域とされていますが、MTの構築環境はデザイナーにとっても分かりやすく、HTMLをコーディングする感覚でCMSを構築することができます。デザイナーだけで大規模なサイトを構築できるというのが、MTの魅力の一つです。
さらに、MTで作成したサイトとFlashを連携させることで、サイトに様々な機能を追加することができます。一方でFlashサイトは、制作ファイルと実行ファイルが分かれていることから「更新管理に不向き」といわれていましたが、MTと連携させることでFlashサイトの更新管理も簡単に行えるようになります。このようにMTとFlashの組み合わせることで、お互いが持つメリットを活かしたコンテンツを開発することができます。
本記事では、MTとFlashの連携方法、そしてメリットや可能性についてまとめてみました。
MTとFlashの連携方法
MTの記事データをFlashで読み込む
Flash（SWF）で読み込むことができるテキストファイル形式としては、JSON／XML／CSVがあります。一方、MTで作成したエントリーの内容は、いったんデータベースに格納され、テンプレートを使ってJSON／XML／CSV形式で書き出すことができます。テンプレートさえ用意しておけば、再構築の際、サーバ内にこれらのファイルが自動で生成・更新されます。Flash側では、MTが書き出した読み込み用ファイルをloadするスクリプトを記述すれば、あとはMTが更新されるたびにFlashサイトの内容が更新されるようになります（図1）。
MEMO：MTのバージョン4.1からはカスタムフィールド機能が標準搭載されており、自在に入力フィールドを増やすことができます。テキストフィールド以外にも、「チェックボックス」「ラジオボタン」「画像のアップロードボタン」などを作成することができ、各カスタムフィールドにはデータ出力のための独自MTタグが割り当てます。それらを利用すれば、エントリーのデータを細かく分類してFlashに読み込むことができるので、より高度な表現が可能となります。
以下は、MT内のデータをJSON、XMLとして書き出すテンプレート例です。インデックステンプレートを新規に作成します。
MTテンプレートコードJSON出力例（ID、URL、タイトルを出力）
<mt:SetVarBlock name="entcnt"><$mt:BlogEntryCount$></mt:SetVarBlock>
mtdata=[
<mt:Entries glue="," lastn="$entcnt">
{
"id" : <$mt:EntryID$>,
"title" : "<$mt:EntryTitle encode_js="1"$>",
"url" : "<$mt:EntryPermalink encode_js="1"$>"
}</mt:Entries>
]
出力されるJSON
mtdata=[
{
"id": エントリーのID,
"title": "エントリーのタイトル",
"url": "エントリーのURL"
},
…エントリー数分ループする
{
"id": エントリーのID,
"title": "エントリーのタイトル",
"url": "エントリーのURL"
}
]
MTテンプレートコードXML出力例（ID、URL、タイトルを出力）
<?xml version="1.0" encoding="utf-8"?>
<mt:SetVarBlock name="entcnt"><$mt:BlogEntryCount$></mt:SetVarBlock>
<data>
<mt:Entries lastn="$entcnt">
<entry id="<$mt:EntryID$>">
<title><$mt:EntryTitle encode_xml="1"$></title>
<url><$mt:EntryPermalink encode_xml="1"$></url>
</entry></mt:Entries>
</data>
出力されるXML
<?xml version="1.0" encoding="utf-8"?>
<data>
<entry id="エントリーのID">
<title>エントリーのタイトル</title>
<url>エントリーのURL</url>
</entry>
<entry id="エントリーのID">
<title>エントリーのタイトル</title>
<url>エントリーのURL</url>
</entry>
…エントリー数分ループする
</data>
これらのデータファイルは、MT内の記事が更新されるたびに自動で出力され、スタティックなファイルとしてサーバ内に保存されます。Flashを配置したHTMLが表示された時、自動的にこのデータファイルが読み込まれるようにFlashを設計します。なお、Flash内でJSONやXMLデータを読み込んで処理する方法はここでは触れませんが、多くのサイトで解説されているため、そちらを参考にしてください。
このようにJSON／XML／CVSファイルを介したFlashとMovable Typeとの連携方法は、Flash（ActionScript）とサーバーサイドスクリプトを連携させてデータベースを呼び出しJSONやXMLを受け取る方法と比べて、開発は簡易ですし、サーバのレスポンスを気にすることなく、Flash内で処理が行えるというメリットがあります。
MTテンプレートからFlashに引数を渡す
同じテンプレートから各記事に合わせて内容を組み立てて再構築できるのが、CMSの大筋の仕組みです。HTMLからFlash（SWF）に引数を渡す仕組みを作り、MTでHTMLページ（記事）ごとに異なる引数を生成するようにすれば、ページごとにFlashの挙動を変えることができます。
たとえば、全ての記事ページにFlashで作ったマップを設置するとしましょう。引数でHTMLとFlash間で情報をやり取りをするようにしておけば、記事ページによってマップの中心点が変わるコンテンツを作ることができます。この場合、「…Map.swf?id=12…」というようにエントリーIDをFlashに渡します。以下は、そのためのMTテンプレートとその出力結果です。あとは、Flash側で、引数の値によって動きが変化するものを作ります（後で紹介する「ブログの記事内容とマップを連動させる」で、実例を紹介しています）。
・MTテンプレートコード（MTx、MTy 2つのカスタムフィールドを作ります） ※ブログ記事アーカイブテンプレートを使用します。
< object〜〜〜〜〜〜
<param name="movie" value="xxxx.swf?id=<$MTEntryID$>&x=<$MTx$>&y=<$MTy$>" />
・HTML出力結果
< object〜〜〜〜〜〜
<param name="movie" value="xxxx.swf?id=エントリーID&x=X座標の値&y= Y座標の値" />
Flash側では、受け取った引数をもとにセンター位置を変更し、ズームするスクリプトを記述します。
Flash×MovableTypeでできること
次に実例をまじえながら、Flash×MTでどのようなことができるかを紹介しましょう。
MTサイトに検索機能を追加する
MTサイト内にFlashを使った検索機能を追加することができます。Flashの得意とする、インタラクティブ性を活かした検索機能をデザインしてオーサリングすれば、様々な場面に対応できる組み合せと言えるでしょう。たとえば、TKG東京個別指導学院様の講師募集サイトでは、MTをCMSとして使用しています。FlashとMTを連携させることでサイト内に高度な検索機能を追加しています。サイト訪問者（応募者）が自分の住むエリアから通勤可能な教室があるかどうか検索することができ、検索方法は関東圏のJRや地下鉄などの沿線や、最寄り駅などの絞り込み、エリア（区や市）からの絞り込みなどができようになっています。
ＭＴ側は、入力された教室の個別データを元にテンプレートからデータファイルを出力してFlashでに渡します。Flashで側は受け取ったデータファイルを解析し、絞り込み検索用のチェックボックスを生成したり、教室個別データの属性（エリア、沿線、最寄り駅情報）を判断し検索処理を行っています。また、検索結果はActionScriptから外部JavaScriptを呼び出して、Flashでエリア外にHTML書き出すようにしているため、ページ遷移せずとも検索結果を高速に表示することができます。
MEMO：ActionscriptからJavaScriptを呼び出す方法は、「Adobe® Flex™ 2 リファレンスガイド」で詳しく解説されています。
通常、サイトに検索機能を追加する場合、PHPなどのサーバーサイドスクリプトを設置し、データベースから検索する場合がほとんどですが、上記の例だと、サーバーサイドスクリプトはまったくが必要ありません。すべてFlashで内のActionScript（クライアントサイド）で処理が行われます。また、データはFlashでファイルがロードされたときに読み込まれるので、処理を行うたびにデータベースにクエリを送る必要がなく、サーバのレスポンスによるタイムラグも発生しないため、非常に高速な検索結果表示が可能となります。
バックグラウンドでは、サイト管理者がＭＴ管理画面で教室個別データの更新作業を行います。Flashでで絞り込むチェックボックスの項目（エリア、沿線、最寄り駅など）もMTと同期しています。更新があった場合、ただちに検索画面に反映されますので、サイト全体の管理をＭＴのみで行うことができます（図3）。
ブログの記事内容とマップを連動させる
食べ歩きブロなどで、トップページにマップを表示して、食べ歩いたポイントにピンを立てるというコンテンツをよく見かけます。こうした仕組みは、Google Maps APIなどでも実現可能ですが、Flashを利用することでオリジナリティのあるマップを作成したり、様々な機能を追加することも可能です。
MT側は、カスタムフィールドを使ってX座標とY座標を入力するようにし、その他のデータと一緒にFlash（SWF）にデータファイルを渡すだけです。
SWF側の処理や表示は、アイデア次第でいくらでも広がります。少々強引ですが、MTが携帯から写真とGPS座標付きのメールを受け取って、エントリーを書き出す更新環境を構築し、SWF側ではメール本文からGPS座標を解析して、抽出し、オリジナルマップやGoogle Maps API for Flash、Yahoo Maps API上にピンを立てることもできます。
図4は3年ほど前にMT 3で制作したサイトです。事例としては古いですが、FlashとMTのやりとりを行ってマップにプロットしている例です。MT 4の登場とFlashのバージョンアップで、より高度なことを簡単に実現できるようになりましたが、基本的な考え方は同じです。
全体マップでは、MTからポイント（エントリー）の一覧データ（タイトル、座標、詳細ページURLなど）を受け取り、マップ上にプロットします。ポイントをクリックして詳細ページにジャンプするとポイントの座標がセンターにズームされたマップが表示されます。この例ではオリジナルマップを使用していますが、Google Maps API for Flashを利用してもよいでしょう。
FlashサイトのCMSにMTを使用する
フルFlashの写真集サイトなどを構築する場合、たいてい、写真データやキャプションのテキストなどは外部ファイルとして読み込むようにしていると思います。このような場合にも、FlashのバックグラウンドのCMSとしてMTを利用することがでいます。MTを使用すれば、初心者でも画像ファイルをアップロードしたり、記事を入力することができるので、サイト内に掲載する記事の写真データや、テキストデータなどはMTで入力やアップロードを行います。また、MTのカテゴリ管理機能を使用して、記事をカテゴリ分類すればさらに便利でしょう。
あとは、前述の方法でFlashにMTのデータを読み込むようにするだけで、更新管理が簡単なFlashサイトができあがります。
この場合、図5のように、MTはデータベースへの入力インターフェースとして、またデータベースの内容をテンプレートからスタティックなデータファイルとして書き出すエンジンとして活躍します（データファイル以外のHTML出力テンプレートはすべてOFFにします）。その他にもファイルのアップロード機能や記事のカテゴリ管理機能、ログインユーザーの管理機能も充実していますので、低いコストとわずかな開発期間でFlashサイト用CMSを構築することが可能となります。
以上のように、FlashとMovableTypeを連携することでさまざまな可能性が広がります。まさにアイデア次第です。みなさんもいろいろとチャレンジしてみてください。
