Progression はスキルに応じて選択できる3つの開発スタイルがあります。その中で、スクリプトを使わずとも柔軟な設計ができ、素早い実装が可能なコンポーネントスタイルについて本講座で解説します。カリキュラムでは、Progression 4 の導入方法・基本的な概念・使用方法から、後半ではコンポーネントスタイルを利用した実践的なテクニックをケーススタディを通して学習します。

11月の回もまだ残席がありますので、よければ受講を検討くださいませ。日程やお申し込みなどの詳細は下記講座ページでご確認できます。

• 池田泰延のProgression入門講座 | ロクナナワークショップ

お問い合わせ

• ロクナナワークショップ

今日はFlashの界隈では大きなニュースが立て続けにリリースされました。Internet Explore 9 betaとFlash Player 64bit版「Square」はぜひチェックしておきたいところですが、さらに嬉しいニュースがありました。それはCLOQUE.から発表された FlashをHTML5に変換するサービス「FL2HTML5(仮)」です。

公式の発表

• [開発] Flash to HTML5 変換サービスを開発成功 | blog.progression.jp

ニュース記事

• FlashサイトをHTML5形式に変換する「FL2HTML5(仮)」 – GIGAZINE
• ニュースリリース：CLOQUE.，| gihyo.jp … 技術評論社

Twitterやはてブでもバズっているのですが勘違いする人もでてくるかと思いますので、技術的な視点から雑感をまとめてみました。

Progressionとは

このブログの読者であれば説明する必要もないと思いますが、改めて紹介。Progressionは国産のFlashフレームワークであり、国内の広告向けFlashサイトではデファクトスタンダードとして2000件を超える多くのサイトで採用されています（採用数はgihyo.jpより引用：カウントされているものだけなので本当はもっと多いはず）。

FL2HTML5(仮)とは

Progressionで開発したFlashコンテンツから、シーンやボタン、テキストといった要素をHTMLに変換するサービスです。プレリリースの動画で紹介されていますが、iPadなどFlashが再生できないデバイスでも見れるようになります。本技術を使用した変換サービスなどは，10月中を目標としてリリース予定とのことです。

SEO効果について

HTMLに変換されるということは、Flash内のテキストもHTMLのタグに変換されるということを示しています。つまりFlashではインデックスされない（されにくい）テキストの情報をHTMLタグとして用意することができるので、Googleなどで検索できるようになりSEOの効果として期待できます。

このサービスの利用用途としては、Flashサイト代替コンテンツの作成が主になるかと思います。FlashサイトのHTML代替コンテンツを提供することは昔から行われていましたが、それは手動で作るものでした。FL2HTML5を使うことで、その作業がまるまる自動化されるものと考えられます。

ディープリンク

変換されたHTML5はインタラクティブコンテンツになりますが、ページ内URL（通称：ディープリンク）も生成されます。Progressionで作成したFlashコンテンツもディープリンクを持ちますが、ディープリンクは Flash 版と HTML5 版で互換性があるということです。

同期が取れることにより、ツイッターで興味深い発言があったので紹介します。

• ɐpnʞo ɐʎıʞnʎ: あとは、SEO的なメリット。これは…
• ɐpnʞo ɐʎıʞnʎ: エフェクトがどうとかより、たぶん一番のメリットは …

演出やエフェクト

今のところの情報ではハッキリしませんが、Flashの演出がそのままHTML5+JavaScriptに変換されるというものではなさそうです。

つまりGigaGineの記事の末尾で紹介されている「ありとあらゆるFlashサイトを変換できるというわけではないようですが、将来的にはなんとかして欲しいところ」というのは対応されないはずです。Flashは自由度が高いので開発者によって作り方も様々ですし、全てを同じように変換できるというのはローレベルから対応しない限り極めて困難です。ですが、ProgressionでFlashサイトを開発すると「シーン」がルールに従って情報として構築されます。これがHTMLと親和性が高いために可能となった技術と私は見ています。

ただProgressionにはコンポーネントなどでトランジションエフェクトが用意されているので、それで演出を作っている場合にはjQueryなどでHTML+JavaScriptの演出に変換できるかもしれません（公式で対応されるかは不明ですが、技術的には可能かと）。それ以外の自前で作った演出を、Flashと同じレベルで再現したい場合は、変換後にJavaScriptなどで自分で作る必要があると思います。

プレリリースを見る限り、サイトの「情報」をFlashからHTMLへ変換するサービスとして割り切っているので、その点で採用しやすいと思いました。

※グラフィックに関してはFlash→Canvasへの変換はAdobeが開発しているはずで、FL2HTML5は情報と見栄えの変換にウェイトをおいている気がします。

まとめ

• Flash代替コンテンツの制作がすぐに出来るようになる
• SEO効果も期待できる
• iPad/iPhoneなどFlash未対応のデバイスでも「情報」を提供できる

今のうちからProgressionを使っておくと、将来幸せになれるかもですね！

追記

wonderfl,jsdo.it Meetup の場に開発者のniumさんが飛び入りでやってきたので、このサービスで変換されたHTML5のサイトを実際に見ることができました。精度は非常に高く、Flashサイトのデザインが忠実に変換されていました。これは間違いなく期待できます。

ロクナナワークショップで Flash のフレームワーク Progression の入門講座を講師として担当することになりましたのでお知らせします。「Progressionを学習したい」「制作業務に役立つテクニックを習得したい」といった方々に、ハンズオンセミナーとして集中的に学ぶことができる講座です。

Progression はスキルに応じて選択できる3つの開発スタイルがあります。その中で、スクリプトを使わずとも柔軟な設計ができ、素早い実装が可能なコンポーネントスタイルについて本講座で解説します。

カリキュラムの前半では、Progression 4 の導入方法・基本的な概念・使用方法を、後半ではコンポーネントスタイルを利用した実践的なテクニックをケーススタディを通して学習します。

日程やお申し込みなどの詳細は下記講座ページでご確認くださいませ。

• 池田泰延のProgression入門講座 | ロクナナワークショップ

お問い合わせ

• ロクナナワークショップ

先日紹介した「Progressionの解説本」ですが、Amazonで予約可能になりましたのでお知らせします。

• ProgressionによるFlashコンテンツ開発ガイドブック

ということで、改めて本書の特徴をいくつか紹介します。

内容

本書はProgressionの３つの開発スタイルについて、それぞれ入門から詳しく解説しています。開発者自身も執筆に加わっていることから、Progressionの考え方の解説に力が入っていることも特徴の一つです。

コンポーネントスタイルであればスクリプトの苦手な方も学習しやすいですし、既にProgression 4を試している方には4の新機能を発見する内容になっています。その点は楢山さんや松竹さんと私の３人で分担して、Chapter 4で網羅すべく解説しています。

※ベータ版が登場してから半年ほどたちますが、ネット上のブログでまだ発見されていないような便利機能なども紹介しています。

紙面

先日見本が届きましたので、チラ見せとして載せてみました。全体的にカラーで（一部2色ですが）、読みやすい感じになっています。

操作のステップごとにキャプチャが用意されているので、安心して学習できます。

Progressionの習得に必須なシーン遷移の考え方の解説。

コンポーネントだけでフレキシブルレイアウトも。実用テクニックもあわせて紹介。

Progressionの事例紹介としてユーザーの声も掲載。

発売は今月末から

それでは、今月末発売で書店に並びだすと思いますが、もしお早い目に確実に予約したい方はAmazonでどうぞご予約くださいませ。

関連記事

• セミナーイベント「Progression 4の取扱説明書（トリセツ）」をやります
• Progression本に執筆参加しました

まとめ

このシリーズのエントリーは「Progression チュートリアル」のまとめにまとめています。

昨日に引き続き、Flashのフレームワーク「Progression」のお知らせ。Progression書籍の発売を記念して、セミナーイベント「Progression 4の取扱説明書」を5/15(土)に開催することになりました。

Progression開発者の阿部さんと私が出演して、Progression 4 の基本的な使い方から、新機能の紹介、Twitter で募集した質問などをまじえたディスカッションなど、盛りだくさんの内容となっています。

社内での共同開発が格段に便利になったProgression 4で変わる制作体制など、現場の制作効率向上的な話なども織り交ぜ、Progression 4をわかりやすくご紹介します。これからProgressionを始めたいと思っている方も、すでに Progression 4 を使っている方も、ぜひぜひご参加ください。

申し込み方法などの詳細は次のページからご確認いただけます。

• Progression 4の取扱説明書 | ロクナナワークショップ イベント企画

イベント概要

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Flashの学校 ロクナナワークショップ
Progression 4の取扱説明書　変わる！Flashコンテンツ開発体制
5月15日（土）開催決定！
────────────────────────────────────

●詳細はこちら
http://event.67.org/progression/

●概要
日時：5月15日（土）14:30 – 19:40（開場14:00）
定員：100名（会場の都合により増減あり）
料金：3,200円（書籍なし・税込み）
5,800円（書籍付きチケット・税込み）
会場：東京・新宿「 関東ITソフトウェア健保会館」
〒169-0073 東京都新宿区百人町 2-27-6

●主催・お問い合わせ
株式会社ロクナナ・ロクナナワークショップ
〒150-0001東京都渋谷区神宮前1-1-12 #203
イベント運営事務局　担当：佐々木・上田
E-mail：workshop@67.org
Phone：03-3408-4605

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

ブログの関連記事

• xingxx – 67WSの4,5月はFlashセミナー目白押し！
• [イベント] Progression 4 の取扱説明書 | blog.progression.jp
• Progression本に執筆参加しました
• 4月のFlash系勉強会・セミナーイベント

まとめ

このシリーズのエントリーは「Progression チュートリアル」のまとめにまとめています。

この本の内容は、前半は初めての方でも安心して導入できるように図入りで詳しく説明されており、後半は中・上級者向けにProgression4の機能を網羅すべく実践的な機能紹介でまとめられています。

もちろん、すべてのサンプルも用意されていますので、一つ一つサンプルを通して学習できるようになっています。

• タイトル：ProgressionによるFlashコンテンツ開発ガイドブック
• 著者：阿部貴弘（nium）, 池田泰延（clockmaker）, 楢山哲弘（northprint）, 松竹 誠（Mk-10:cellfusion）, 山上健一（kappalab）
• 税抜価格：2,800円
• ISBN：978-4-8399-3179-7
• 総頁数：312ページ
• 出版社：毎日コミュニケーションズ

Amazonでの発売については、次の記事をご覧ください。

他のブログでの関連記事

• [お知らせ] Progression 本が出ます。(Progression 公式ブログ)

まとめ

このシリーズのエントリーは「Progression チュートリアル」のまとめにまとめています。

ざっくばらんにAS3のライブラリを紹介するシリーズ２本目。昨年から注目が集まっているFlashのフレームワークProgression 3について改めて開発効率が向上する便利なポイントをチュートリアルビデオもまじえて紹介します。以前、当ブログでおこなった記事のリクエストに次のような要望がありました。

実は私の周りにも同じ事を考えている人もいて、そう思っている方はまだまだ多いのではないかと思います。

一般的にはProgressionはシーン構造と画面遷移の作り方を再定義し、ページ内リンクなどユーザビリティーをあげることがメリットとして紹介されています。知っている人は知っていますが、シーンやキャストといった機能を使わないでも、既存のAS3サイトやMXMLにも組み込めるような大変便利な機能があります。それはコマンドという機能です。

addEventListenerにさようなら。

コマンド機能はProgressionのシーン機能とキャスト機能に並ぶ３大要素の一つ。

どういった機能かというと、外部ファイルの読み込みやトゥイーンといった「いつ終わるか分からない」非同期処理を、イベントリスナーを使わずにスマートに記述することができます。

例えばXMLの読み込みだと

例えば外部XMLを読み込む処理では通常では次のように記述する必要がありました。

var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, loadHandler);
loader.load(new URLRequest("hoge.xml"));

function loadHandler(e:Event):void {
  e.target.removeEventListener(
               Event.COMPLETE, loadHandler);
  var xml:XML = loader.data;
}

Progressionのコマンド機能を使うと、次のような少ないコード量で同じ挙動を書くことができます。

new SerialList(null,
    new LoadURL("hoge.xml"),
    function():void {
        var xml:XML = this.latestData;
    }
).execute();

addEventListenerが消えただけでもシンプルになります。

例えば複数のトゥイーン後に処理したいとき

またFlashでよくあるケースとしてトゥイーンさせた後に処理を書きたいとき。Tweenerライブラリを使って2個のトゥイーンを入れ子して書くと次のように煩雑な記述となります。

Tweener.addTween(my_mc, {
  x : 100, y: 100, time: 1,
  onComplete : function():void{
    Tweener.addTween(my_mc,
      scaleX : 2, scaleY : 2, time:2,
      onComplete : function():void {
         trace("モーション完了");
      }
  );
});

上はごちゃごちゃとしていて気味の悪いコードですが、これをProgressionで書くと下のようにすっきりと書くことができます。

new SerialList(null,
  new DoTweener(mc,{x:100,y:100,time:1}),
  new DoTweener(mc,{scaleX:2,scaleY:2,time:2}),
  new Trace("モーション完了")
).execute();

これだけでも60%ぐらいのコード量になっています。

コマンド機能を使うと他の人が見てもわかりやすい

上記の例のように、コードを簡略化して記述することができます。jQueryみたいにシンプルに記述でき、非同期処理をあたかも同期処理のように書くことができます。コマンド機能だけを自分のAS3サイトに組み込むことができるので、外部読み込みやトゥイーンの制御などでコードが煩雑になっている方には役に立つかと。例えば、次のwonderfl作例などが参考になるかと思います。

• code on 2008-12-17
• [PV3D]外部画像をProgression4で読み込むデモ

※なお、ここでは詳しく説明しませんが、次期バージョンのProgression 4では外部読み込みではさらに便利な機能が搭載されてます。今からコマンドを勉強してProgression 4が正式リリースされたときにスムーズに移行できればいいのではないかと思います。

コマンドを解説したチュートリアルビデオ

もっと深くコマンドを知りたい方のために、簡単なサンプルを通して解説したチュートリアルビデオを用意しました。今回はナレーション付きで細かく解説しています。(眠たい中録音したので眠たそうな声ですが…)

[Progression 3] コマンドの説明 from clockmaker on Vimeo.

※Vimeoのほうで見ると画面を大きくしてみることができます。

ソースファイルはこちら。

ビデオは30分で、以下のポイントについて説明しています。

• Progression3でプロジェクトファイルの準備
• シーン・キャストの準備
• オープニングムービーの準備
• フレームアクションでコマンド機能
• コマンド機能にアニメーションや外部読み込みを設定
• プリローダーの準備

それでは楽しい Progression Life を。

まとめ

このシリーズのエントリーは「Progression チュートリアル」のまとめにまとめています。

先日、公開したProgression拡張機能「CaptureSheetMaker」ですが、私はさっそく実案件に投入しています。

さて、実案件で役立つ機能強化として「ZIP保存」を実装しました。制作現場ではOffice系ソフト(例えばエクセルとパワポ)のユーザーが多いと思いますが、この新機能はドキュメント作成に役立つような画像ファイル保存機能となります。まずはZIP保存がどういうものか、次のサンプルでご確認ください。

• サンプル (URL先で、右クリックからZIP保存を選択ください)

※ちなみにMacだとZIP解凍がうまくいかないので、Windowsでお試しください。

保存されたZIPの中身

右クリックの[キャプチャしてZIPに保存する]を選択すると、自動巡回キャプチャが開始されます。終了時に任意の場所にファイルを保存することで、全画面キャプチャ画像入りのZIPファイルを作ることができます。

非圧縮のPNG24形式で等倍保存なので、まったく画質は劣化していないため、いろんなケースに利用しやすいと思います。

今回のバージョンアップは他にもたくさん

その他、不具合や画質向上など結構ボリュームの大きいアップデートをしましたので、以前のバージョンをお使いの方はぜひ新バージョンをご利用ください。

• FlashサイトをキャプチャしてPDFに変換する Progression 拡張機能「CaptureSheetMaker」

マイナーアップデートなので特に実装方法・使い方に変更はありません。実装方法はAdobe Developer Centerで詳しく紹介していますので、ぜひこちらもご参考ください。

• Progressionオススメ拡張機能：Flashサイトの全ページを自動的にPDF化する「CaptureSheetMaker」 | デベロッパーセンター

お待たせしました！extends Progression 拡張機能で グランプリを受賞した作品「CaptureSheetMaker」ですが公開しましたのでお知らせします。これは、Flashサイトの各シーンを自動的にキャプチャして、PDFに保存するProgression用の拡張機能です。

• FlashサイトをキャプチャしてPDFに変換する Progression 拡張機能「CaptureSheetMaker」

またAdobe デベロッパー・センターにも掲載頂きましたので、あわせてお知らせします。

• Progressionオススメ拡張機能：Flashサイトの全ページを自動的にPDF化する「CaptureSheetMaker」 | デベロッパーセンター

※余談までに、写真はApple Store, Ginzaで昔、発表したときのもの。

ライセンス・利用について

公開のライセンスについては、Progressionユーザーが増えることを期待してMITライセンス(条件に従う限り、商用を問わず無料利用可)で公開します。

ぜひご利用ください！

関連記事

• Progression拡張機能「AutoSitemap」をリリース
  
• 「extends Progression 拡張機能コンテスト」でダブル受賞しました!
  

まとめ

このシリーズのエントリーは「Progression チュートリアル」のまとめにまとめています。

extends Progression 拡張機能で Web Designing賞を受賞した作品「AutoSitemap」ですが公開しましたのでお知らせします。

これは、Progressionで作られたウェブサイトに対して、開発者の負担なくサイトマップを実装する拡張機能です。サイトマップ設置によるユーザビリティー向上と、開発時の効率化が目的の拡張機能となります。

サンプル

• サンプルサイトを見る
• サンプルサイトのソースファイル(Flash CS4プロジェクト)

ライブラリ

• ソースファイル
  (MITライセンス・動作仕様はProgression4/Flash CS3以上)

※追記2010年7月12日：Progression4に対応させました。Progression3で利用する場合は、開発用SVNから1.x系のバージョンをダウンロードください。

概要はこんな感じ

ライブラリの主な用途や、使い方は次のAcrobat.comのスライド(1枚)を御覧ください。

補足

案件によってはデザインのカスタマイズしたいという要望もあると思いますので、ライセンスに従う限りソースコードを自由に改変して利用くださって大丈夫です。

まとめ

このシリーズのエントリーは「Progression チュートリアル」のまとめにまとめています。