初めてのProgressionするために、色々調べてみたまとめ

ActionScript初心者が調べた、最近のActionScript・Flex関連のリンク - kanonjiの日記 からかなり日があいたけど、ProgressionでひとつFlashサイトを作ってみたくなったので、まずは色々と調べてみました。
Progression未経験が調べたまとめなので、勘違いが多分に含まれるかもしれません。

Progressionとは

Progressionとは、主にFlashサイト*1を作るためのフレームワークです。


ただ、これだけだといまいちよく分かりません。
公式サイトを見ても、なんだかすごいやってくれそう感はあるけど、どうも抽象的な説明が多いです。

作りたいものは、楽しいところだけ作る。
あなた流はそのままに。
もうスクリプトは、いりません。
いつもの機能は、いつも通り使えます。
http://progression.jp/ja/overview/

そこで、まずはProgressionが何なのかを説明した一言を集めてみました。
Flashサイトや、最近ではAIRなどwebサイトではないFlashコンテンツも、大抵の場合は画面遷移があるはず。
Progressionは機能も豊富なので、この画面遷移に特化したとか書くと語弊がありそうですが、なんとなく画面遷移を中心として、その時にあると便利な機能や、画面を作る機能が補完しているイメージを持ちました。
というか、フレームワークってのが、そういうものかも知れません。

Progression Framework は、Flash を使用した Web サイト開発に適したシーン切替機能とブラウザ連動機能を統合した ActionScript 3.0 用のフレームワークです。
フレームワークを使用して開発することで、シンプルなコンテンツであれば ActionScript を一切使用せずに、複雑なコンテンツの場合も必要最小限のコーディングで、HTML ベースの Web サイトと同等のユーザビリティを持つコンテンツを実装することができます。(公式ページより引用

http://www.trick7.com/blog/2008/02/21-204134.php

Progressionを一言で表現するならば,「Flashコンテンツを制作するためのフレームワーク」です(※1)。Progressionで提供されている様々な機能を使用することで,場面の切り替えや,ムービークリップの出現・削除,外部ファイルのロードといった機能がかんたんに実装できるようになります。

また,シーン毎のアドレス発行や,マウスのスクロールボタンでの動作といった,Javascriptと連携が必要な機能も提供されるため,制作者はデザインや表現の作りこみに注力することが可能となります。

第1回 Progression3に触れてみよう:Flashのフレームワーク「Progression3」を始めてみよう!|gihyo.jp … 技術評論社

Flash CS3(AS3)用の、状態遷移をメインとしたフレームワーク

Progressionとは - はてなキーワード

具体的な機能を眺めてみる

http://progression.jp/ja/doc/

3つのスタイル

Progressionには3つの制作スタイルがあります。

コンポーネントスタイル
ActionScriptが書けない人向けの、コンポーネントをドラッグ&ドロップして作っていくタイプ。
タイムラインスタイル
昔からのタイムラインを中心に、Progressionを使っていくスタイル。どうもこれは、昔からの方法を変えたくない人向けの、代用スタイル的な感じがします。
クラススタイル
ActionScriptをゴリゴリと書いていくスタイル。「Progression のパワーを最大限発揮するオブジェクト指向に即した形式」とあり、ドキュメントも一番ボリュームがあります。

しかし、Progressionを使うともう少し進んだことが出来ます。
各メニューの上で右クリックをしてみて下さい。
普通のhtmlベースのページと同じようなコンテキストメニューが出るのです!

これ以外にも、各ボタンにツールチップ(「○○へ移動します。」の文言を表示している部分)など、Flashコンテンツに不足しがちなユーザビリティの確保が出来ます。

そして、何よりすごいのが、今回のテストサイトを作成するのにあたって、
ActionScriptを一行も書いていない
ということです。


Flashで画面遷移を作成した方なら、分かると思いますが、ちょっとした動きをつくるために、ムービークリップをいくつも入れ子にしたり、ActionScriptを難行も書き連ねなければなりません。
そうした手間がかからず制作が出来て、さらに、自動的にユーザビリティに優れた機能を持たせてくれるというのが、Progressionの魅力の一つです。

http://mysketch.jp/blog/2008/08/progression.php

この様に、コンポーネントスタイルはコーディング量がかなり少なくなりそうで、とても魅力的な感じがするけど、Flex SDK+エディタで開発するつもりなので、ここはクラススタイル一択。


ところで、Flash自体にもコンポーネントというのがあるけど、Progressionコンポーネントはそれとは別の仕組みなんだろうか?
ドラッグ&ドロップなしで、ActionScriptからコンポーネントを使えたら、コーディング量が減って良さそうですが、この辺はよく分かりません。

PRML

PRML形式のXMLデータからシーンを生成する

さて,informationシーンで一つのクラスファイルでシーンを複数生成してみましたが,写真ギャラリーページ等,増減するコンテンツの場合,いちいちシーン内のクラスファイルを作成しなければならないのが面倒です。

しかし,Progressionには決められた書式のXMLファイルからシーンを作成するという素晴らしい機能が備わっています。

第5回 Progression3でWebサイトを作る(後編):Flashのフレームワーク「Progression3」を始めてみよう!|gihyo.jp … 技術評論社

rhaco2にもこういう仕組みがありました。
ロジックが入らないシーンの追加が簡単になるので、プログラマーが不在でもこのXMLの書式さえ分かれば、単純なシーンなら追加が出来るというメリットがあります。
ところで、phpを書くならrhaco2はお勧めですよ。

拡張機能

この拡張機能というのは、主にFlash CS4などのIDEに、Progression用のツールを組み込むものです。
Flex SDK+エディタの場合は、まったく恩恵にあずかれませんが、基本的に補助ツールなので、無くても自分でActionScriptを書けば事足ります。

コンポーネント

コンポーネントスタイルで使うコンポーネントですが、前述の通りFlash CS4などが無い事もあってよく分かりません。
ただ、API リファレンスにコンポーネントクラスが載ってるので、もしかするとActionScriptからも便利に使えるかも。
この辺は後で試してみたいです。

http://progression.jp/ja/doc/ref/component/#item-ProgressionButtons
http://asdoc.progression.jp/jp/progression/casts/buttons/package-detail.html

FlashDevelopでProgressionを使う

FlashDevelop 用のテンプレート配布については、現在公式には行っておりません。
これは FlashDevelop ユーザーの規模が把握できないこともあり、また作業負荷的な面もあるので、Flash ユーザーに対しての作業の優先順位を高く設定しているためです。

別スレッドですが、Flex 3 SDK への対応についても話し合っているところです。
FlashDevelop の場合にも、コンパイラSDK を使用すると思うので、よろしければそちらにご参加ください。
http://forum.progression.jp/index.php?topic=41.msg124#msg124

http://forum.progression.jp/index.php?topic=51.0

これは、2009年1月23日の書き込みですが、基本的にはFlash CS4などとセットで使うことを想定しているようです。

便利なFlashDevelopテンプレートファイル

FlashDevelopではクラスファイルのテンプレートを登録することができます。この機能を使用して,Progressionで利用する主なクラスファイルのテンプレートを登録しておくと,非常に効率的です。

詳細は,minomix.netのminoruさんがテンプレートと,その利用方法を公開していますので,参照してください。私も非常にお世話になっています。
Flashを使用せずに,FlashDevelopで開発する

FlashDevelopはプロジェクト自体のテンプレートを登録することも可能です。この機能を利用することで,Flashを使用せずに,初期ファイルの配置を自動的に行うことができるようになります(※5)。
※5
全くFlashを使用しないで作成を行うのであれば,この他に">Flex SDKの導入・設定が必要となりますが,説明は割愛させていただきます

第1回 Progression3に触れてみよう:Flashのフレームワーク「Progression3」を始めてみよう!|gihyo.jp … 技術評論社

しかし、まったく考えられていないわけではなく、ちょっと工夫をすれば可能なようです。

テンプレート

この辺は、ほんとは手を動かしてやってみたほうがいいんですが、また情報収集の段階なので曖昧です。
プロジェクトテンプレート/FlashDevelopテンプレートなどと呼ばれる物があれば、FlashDevelopでの開発が可能になるらしいです。
これを提供してくれている有志の方がいます。
Progressionのバージョンによって異なり、また同じバージョン用でも提供している人が複数いたりします。

  1. 独学ActionScript
  2. flabaka - Progression4用FlashDevelopテンプレート
  3. http://minomix.net/blog/2009/01/16/116/
  4. http://blog.seyself.com/2008/09/post_2008090511.html
文字化け

ここで注意しなければならないのが,デフォルトで作成されたasファイルの文字コードがUTF-8Nとなっている点です。FlashDevelopはUTF-8Nをサポートしていないため,そのままFlashDevelopで開くと文字化けしてしまいます。そこで,一度文字コードテキストエディタ等でUTF-8へ保存しなおしてください。

第1回 Progression3に触れてみよう:Flashのフレームワーク「Progression3」を始めてみよう!|gihyo.jp … 技術評論社

wonderflでProgression4

wonderfl build flash online | 面白法人カヤック でもProgression4が、外部ライブラリとして登録されています。*2
なので、FlashDevelopやFlex SDKで環境を構築しなくても、ちょっとした練習や学習であれば、wonderflで出来ちゃいます。
うれしい事にwonderfl build flash online | 面白法人カヤックがあって、取っ掛かりとしては良さそうです。
他にもprogressionタグのついたのがいくつかあります。


そんなわけで、情報収集もほどほどにして、次はwonderflで試してみようかな。

*1:サイトに限定はされませんが

*2:実はProgression4はまだベータなので、Progression公式サイトではProgression3と書いてあって若干混乱しました。