Did Adobe finally kill Macromedia Flash? | junglecode.net

かつて共に働いたメンバーに対する仕打ちを憂いた側面もあることから、タイトルもセンセーショナルで内容も些か感傷的・感情的な印象もあります。ただ、SWFにJPEGと同じようなユビキティを望んでいたことや、SWFのオープンソース化への希望など、個人的に共感できる部分も多くありました。自身の理解を深めることに加え、同じように感じるかたもいらっしゃるかなと思ったので、全文翻訳してみました。

AdobeはついにMacromedia Flashを殺してしまったのか？

Adobeがモバイル端末向けFlashPlayerの開発終了を発表した。知っているかもしれないが、僕は2010年6月にモバイル端末向けのFlashPlayer10.1が出た時のエンジニアリングチームに所属していた。今回の発表は色々な意味で残念ではあったが、モバイル向けWEB開発の現実を考えれば決して驚くべきことではなかった。

僕がAdobeにいた頃、僕らはAndroid OSを搭載したHTC Nexus Oneで十分速く動作するFlashPlayerの開発に膨大な時間とエネルギーを費やしていた。同じ頃Appleは、僕らがまずAndroidでの動作を第一に考える限り、モバイル版のSafariへのFlashの搭載はありえないだろうということを明言していた。僕らが製品を世に出す前からそのことが出回ってしまったことで、僕らが何をしようが、どれだけ優れたことをしようが、僕らの開発したユビキタスなプラットフォームがモバイルの世界で展開することはなくなってしまった。

もちろん、これが話の全てというわけじゃない。僕が本当に失望したのは、AdobeがFlashプラットフォームのビジネスを終わらせようとしてるということだ。彼らは昨日、750人の従業員のリストラを行った。その中には、現役のFlashオーサリングツールの開発チームも含まれている。これはつまり、ツールの販売で得た収益によって無料のFlashPlayerランタイムを提供するというビジネスに、もはやAdobeは関心を持ってないということだ。僕は常々、SWFというデータ形式がJPEGと同じようなユビキティを確保されるようにと思って取り組んでいた。1998年に制作したSWFは、2028年においても一般的に入手可能なランタイムで再生されるものと信頼できる。そのようなことの実現には、永続的に技術の発展を導きまたそれに奉仕するような組織が必要だ。

残念なことに、Adobeはその組織ではなかった。

いやまだわからない。僕が望んでいるのは、Adobeがランタイムコードをパブリックドメインとして公開し、第三者がそれを拡張し維持していけるようになることだ。コードの中にサードパーティーのライセンスが含まれていることはよく承知してるが、その点は簡単に改訂できるはずだ。Flashに生き残りの道が残されているとしたら、それはオープンソースとなって、来る時代にユビキタスなリッチメディアのデータタイプとしての展望を切り開いていくより他にはない。Adobeは認めなければならない。社会はSWFの存続を求めていて、プラットフォームを開放することがその帰結のための唯一の道だということを。

なお、補足ですが、この記事が論議を醸したため、Jethro氏は後日の記事「Flash: I’m not dead yet!（Flash『僕はまだ死んでないよ！』）」の中で、上記の記事を投稿した経緯について、

AdobeがFlash Proという製品を店頭から回収しようとしている（＝ラインナップから無くそうとしている）などとほのめかしたつもりはなかった

と前置きした上で、

かつてDirectorの開発を海外にシフトし、チームメンバーがFlashの開発に移った時のように：

• 開発の舞台をインドや中国などの低コストな地域に移すことで携帯端末向けFlashPlayerの発展や維持は継続する
• コストのかかる本国（US）の技術者達については、高成長な他のプロジェクトに配置換えする

というパターンを選択せず、携帯端末向けFlashPlayerの開発を即座に終了して関係している技術者達をリストラしてしまったことが動機になった

・・・ということを述べています。

briccolog » F-site | モバイル版Flash Player、Flash Platform、そしてこれからのFlashについてはっきり言っておこうか。

Flash to Focus on PC Browsing and Mobile Apps; Adobe to More Aggressively Contribute to HTML5 (Adobe Featured Blogs)

本文内容はほぼ昨日の記事通りで、和文でもっと上手に要約・解説する記事なども出てきたので、内容について翻訳するのはやめます。その代わり、この発表を読んだ所感を書いてみようと思ったら、長文になってしまいました・・・（汗）。

追記
一部構成変更や修正をしました（2011.11.11）

Flashで培ったノウハウをHTML5へ

今回の記事で、個人的にすごく興味深かったのは"We are already working on Flash Player 12…"から始まるこの段落でした（太字は訳者）：

我々は既にFlashPlayerr12の開発と、高品質なエンタテイメント体験の提供を再び可能とするような、新しくてエキサイティングな機能について取り組んでいます。我々は今後もFlashに関しての投機を進め、ちょうど先日発表したCSS Shadersのように、同様の能力（訳注：Flashと？）をできるだけ早くHTML5で実現するための活動を、W3CやWebKitと共に続けていきます。そして、標準化（訳注：HTML5やCSS3の？）の進行に併せ、我々はHTML5へスムースに移行する新機能をFlashに搭載する予定です。これにより、開発者は自分たちのスキルに対して引き続き投機されることになるので、自信を持って力を注ぐことが（訳注：Flashの開発に？）できます。

CSS Shadersというのは初耳だったのでリンク先の記事をざっと読んでみたところ、AdobeがW3C FXタスクフォースに提案している、HTML5での動的な表現効果を実現させるための技術仕様か何かのようです。

つまり、Adobeとしては、今後このようにしてFlashで培ったリッチな動的表現のノウハウをHTML5に活かす方向で開発を進めていく、ということと理解しました。

モバイル開発に於けるFlashはネイティブアプリの開発プラットフォームへ

今回の発表によって、主にスマホ向けのコンテンツ開発という点に於いて、今後はFlashというツールが、HTML5ベースの開発ツールであるTitaniumなどと同様、完全に「ネイティブアプリ開発のためのプラットフォーム」という位置付けになることが確定したと言えるでしょう。同時に、スマホのWEBブラウザで閲覧するサイト上の動的表現実現の手段としてはHTML5（+ CSS3 + JavaScript）で一本化されたことになります。

もっとも、現実的に言えばこれまでもそうだったわけで、何が変わったかといえば、「そのうちきっとAppleが折れて、iOSにFlashPlayerが載るようになる。そうすれば、スマホ向けのサイトでもFlashコンテンツを使えるようになるはず（なったらいいな・・・）！」という、Flash開発者の抱いていた淡い希望が崩れたというだけです(´；ω；｀)。

PCサイトでのFlash利用の今後

じゃあ、PC向けWEBサイトでのFlashコンテンツは今後どうなるのか？別に、これで完全にPCのFlashも終わったというようなことでは無いと思ってます。ただ、今回の発表に伴ってHTML5へのシフトが進んでしまい、3D表現などをガッツリ使った本格的なゲームコンテンツやエンタメ系コンテンツなどへの特化が進んで、これまでのような小・中規模のインターフェースなどでのFlash利用がさらに減っていくことにはなるかと思ってます。適材適所、FlashはFlashの得意なこと、Flashにしかできないことに使われるようになるってことですね。

思えばFlash5やFlash MXの頃からでしょうか、表現力の豊かさや開発の容易さ、プラグインの高い普及率などの要因から、Flashコンテンツは広くWEB上のインターフェースなどに採用されてきました。
しかし、HTML5の登場やブラウザの進化などにより、それまでFlashが使われてきたようなWEB上の動的表現は、徐々にJavaScriptやCSS3などに置き換えられるようになりました。
実際、HTML5ベースで実装しておけば、そのままでもPCだけでなくスマホで閲覧することはできるわけです。PC版とは別にスマホ版のサイトを用意するような場合でも、コードの流用などができますから、開発コストも抑えられますし。

僕はこれまで基本的にPC向けのWEBサイトの開発を中心に行なってきたので、例えば「FlashというアプリケーションとActionScript3を使って動的なコンテンツを開発して、それがHTML5ベースのコードとして書き出せる」ようになったりすれば便利だなと思ったりします。ただ、仮にそれが実現したとしても、最終的に吐き出すコードがActionScriptではなくHTML5（やJavaScriptなど）であることを考えると、早めにHTML5とCSS3、JavaScriptをマスターした方が得策なんでしょうね・・・。

まあ、ある意味どこかで予期してもいたしわかってもいたことばかりなんですが、こうして現実的な形で突きつけられると、それはそれで衝撃的だったりもするなあ、と思ったりしました。

Exclusive: Adobe ceases development on mobile browser Flash, refocuses efforts on HTML5 | ZDNet

以下、記事内容を訳してみました。関係者情報ということで、まだアドビ社の正式なアナウンスメントというわけではないですが、明確に「終了する」と言われてしまってます・・・。

アドビ、携帯端末向けFlashの開発を終了、HTML5への注力に焦点

アドビ社に近い筋がZDNetに対して、近日案内される予定の発表内容について明らかにした。

携帯端末に関するFlashについて、我々は今後はFlash開発者に対して、大手のapp store向けにAdobe AIRを使ったネイティブアプリの開発を可能とすることに注力します。我々はもう、今後新たに登場する携帯端末ブラウザやOS、携帯端末の設定に対応するためのFlashPlayerの改修作業を行うことはありません。今後も、Flashのソースコードのライセンス許諾を持つ団体などが独自に開発や実装を行う可能性はあります。AndroidやPlayBookの設定に関しての致命的なバグフィックスやセキュリティアップデートについては、今後もサポートする予定です。

また、アドビのパートナーに送付されたe-mailでは、以下のように要約されていた。

• アドビは携帯端末のブラウザ向けのFlashPlayerの開発を終了する。

アドビが現在注力しているのは下記の項目だという：

• 携帯端末向けアプリケーション
• デスクトップ端末での豊かな表現のコンテンツ（ブラウザ内およびブラウザ外での展開）
• HTML５全般に対する投資の増加

発表内容の全貌については、明日アドビ社のウェブサイトに掲載される予定である。

briccolog » FlashPlayerがIE6をサポートしなくなりました

briccolog » Brightcoveの動画再生ができるけどUIが効かない？

briccolog » Brightcoveの動画をFlashコンテンツに読み込む

briccolog » FlashPlayerのバージョンについて

まだ制作用のPCにFlash CS5が入っていない（というか、CS4も入っていない。使ってるのはCS3です）ので、このままだとTLFが使えない。CS5はそのうち導入する予定だけど、取り急ぎFlashDevelop + Flex4SDKの組み合わせでなんとかならんか試してみます。

サンプルの入手

SourceForgeにAdobeがTLFのページを作っているので、そこからサンプルファイルをゲット。

Text Layout Framework / Dashboard

上記のページの上の方にある「Download examples.」というリンクをクリックして、サンプルファイル一式の詰まったzipファイルをダウンロード。解凍して出てくるのは「actionscript」「flex」という2つのフォルダ。「flex」の方はmxmlでの開発用なので、今回使うのは「actionscript」フォルダの方かな。

FlashDevelopで開く

FlashDevelopを立ち上げ、上部メニューから「プロジェクト＞プロジェクトをインポート」を選択。ダウンロードした「actionscript」フォルダの中にある「TextLayout¥.actionScriptProperties」を選択。

すると無事にプロジェクトが開いた！やった～。

早速Ctrl+Enterでプロジェクトをテスト。あれ？エラーが出る？？

C:¥Program Files¥FlashDevelop¥Tools¥flexsdk¥frameworks¥flex-config.xml(53): Error: unable to open ‘libs/player/9.0/playerglobal.swc’

む。FlashPlayerの書き出しバージョンの問題か？というわけで、FlashDevelopのプロジェクト設定の「書き出し」タブでプレーヤーのバージョンをFlashPlayer10に変更。

改めてプロジェクトをテスト。すると・・・おお、ビルド成功！！

swcの読み込み

さてさていろいろいじってみるか。・・・と思ったものの、あれ？TLF関係のクラスのコード補完が出ない？調べてみると、どうやらTLF関連のswcファイルを設定しないとコード補完などが使えない様子。というわけで、swcファイルを読み込みます。

FlashDevelopのインストール時にFlexSDKも一緒にインストールした場合、TLF関連のswcであるtextLayout.swcは、以下の場所にあります。

C:¥Program Files¥FlashDevelop¥Tools¥flexsdk¥frameworks¥libs¥textLayout.swc

というわけで、プロジェクト設定の「コンパイラー設定」タブを開きます。

で、「Advanced | 高度な設定」の中にあるSWC Librariesの行をクリックし、右端に表示されるボタンをクリックして出てくる「文字列コレクション　エディタ」のウィンドウに上記のパスをペースト。

すると、TLF関係のクラスに色がついて、コード補完も使えるようになりました！

ちなみにこのswcファイル、先程のSourceForgeのサイトからも落とせる模様。

File Manager – SourceForge Downloads

上記のDownload textLayout_build.zipと書いてある箇所をクリックすると、swcやらasやらドキュメントやらまとめて入ってるzipファイルがゲットできます。Looking for the latest version?と書いてあるから、ひょっとするとSDK付属のものとバージョンが違うのかな？

縦書きの表示

次に縦書き表示に挑戦。参考にしたのは下記のページ

feb19.jp blog – Flash CS5 を予習　～Text Layout Framework (TLF) 編～

先程のAdobeのサンプルに、feb19さんのコードを参考にしてコードを追加してみました。とりあえず縦書き表示させるために、TextFlow.directionプロパティとTextFlow.blockProgressionプロパティを設定。

////////////////////////////////////////////////////////////////////////////////<br />
//<br />
//  ADOBE SYSTEMS INCORPORATED<br />
//  Copyright 2008-2009 Adobe Systems Incorporated<br />
//  All Rights Reserved.<br />
//<br />
//  NOTICE: Adobe permits you to use, modify, and distribute this file<br />
//  in accordance with the terms of the license agreement accompanying it.<br />
//<br />
//////////////////////////////////////////////////////////////////////////////////</p>
<p>package {<br />
	import flash.display.Sprite;<br />
	import flash.text.engine.TextBaseline;<br />
	import flashx.textLayout.formats.BlockProgression;</p>
<p>	import flashx.textLayout.compose.StandardFlowComposer;<br />
	import flashx.textLayout.container.ContainerController;<br />
	import flashx.textLayout.elements.ParagraphElement;<br />
	import flashx.textLayout.elements.SpanElement;<br />
	import flashx.textLayout.elements.TextFlow;<br />
	import flashx.textLayout.formats.Direction;</p>
<p>	/** Simplest possible &quot;Hello, World&quot; text example */<br />
	public class HelloWorld extends Sprite<br />
	{<br />
		public function HelloWorld()<br />
		{<br />
			var textFlow:TextFlow = new TextFlow();<br />
			textFlow.locale = &quot;ja&quot;;<br />
			textFlow.direction = Direction.LTR;<br />
			textFlow.blockProgression  = BlockProgression.RL;</p>
<p>			var p:ParagraphElement = new ParagraphElement();<br />
			textFlow.addChild(p);</p>
<p>			var span:SpanElement = new SpanElement();<br />
			span.text = &quot;当帝の外戚の大臣一派が極端な圧迫をして源氏に不愉快な目を見せることが多くなって行く。つとめて冷静にはしていても、このままで置けば今以上な禍いが起こって来るかもしれぬと源氏は思うようになった。&quot;;<br />
			span.fontSize = 24;<br />
			p.addChild(span);</p>
<p>			textFlow.flowComposer.addController(new ContainerController(this, this.stage.stageWidth, this.stage.stageHeight));<br />
			textFlow.flowComposer.updateAllControllers();<br />
		}<br />
	}<br />
}

feb19さんのコードと比べると、一部のクラス名が変わっている模様（DisplayObjectContainerController → ContainerControllerとか）
んでテストしてみたのがこちら。

おお～。縦書きになってる！・・・けど、文末の句読点の位置おかしくね？ということで、その後feb19さんのページを参考にさらにコードをいくつか追加みたんですが、まだ解決せず。今後の課題ですな。とりあえず、縦書きが表示できたので今日のところは良しとします。
追記：解決しました。textFlow.directionの値がDirection.RTLだったのをDirection.LTRにしたら直りました。

ちょっと戸惑ったのはTextFlowインスタンス。これ、DisplayObjectじゃないんですね。じゃあどうやってステージ（など）に表示させてるんだろう？と思ったら、feb19さんの記事に書いてありました。

テキストを入れていったら、TextFlow.flowComposer.addController() で DisplayObejctContainer のツリーに参加させて、TextFlow.flowComposer.updateAllContainers() で内容を更新します。

なるほどー。TextFieldとは全く扱い方が違うんですね。これは早く慣れねば。

swfを埋め込んだhtmlページについて、サーバにアップしてIEでアクセスする分には問題ないが、ローカル環境でIEで開くとオブジェクトの位置が大幅にずれる。

・・・というご指摘。調べてみると確かにそうなっていることを確認。さらに調べてみると、サーバにアップしたものについても

1. IEでswfの埋めこんであるhtmlページ（A）を表示。
2. そのまま別のURLに遷移。
3. ブラウザの「戻る」ボタンで（A）に戻る。
4. するとswf内のオブジェクトの位置が大幅にずれる。

・・・という現象を発見（汗）。「ななな、なんじゃこりゃあああああ！」と思ってさらにさらに調べてみると、下記の記事を発見。

• stageWidth is zero in IE | Blog | Jodie O’Rourke
• IEでstage.stageWidthとstageHeightの値が０になる – フリーで活動するWeb屋のメモ帳
• SWFObjectのDynamic Publishingを使うとIEとかでStage.stageWidthとheightが一瞬ゼロになるという都市伝説は実在した！ | Katapad Design
• IEでstage.stageWidth及びstage.stageHeightが取得できない？

・・・みなさん、苦労されてきたんですね。とりあえず、上記のみなさんの記事と今回の実際のファイルから、自分なりに発生条件や不具合の内容から解決方法までまとめてみました。

発生条件

• SWFObjectを使っていること（「フリーで活躍するWeb屋のメモ帳」さんの記事では、SWFObjectを使っていなくても同じ現象に遭遇してるようなので、SWFObject非使用でも発生するのかもしれません）。
• 動的パブリッシュ（Dynamic Publishing）を使っている。
• IEで表示（Katapad Designさんの記事では、Mac版のFirefoxでも発生するという記述があります）。
• 同一swfファイルの2回目以降の読み込み時に不具合が発生（私がローカル環境で検証した際には、初回の読み込み時から発生していました）。

発生する不具合

コンテンツの開始時にstage.stageWidthとstage.stageHeightの値がゼロになる。

この不具合が発生する原因そのものについてはよくわかりません。IEそのものかIE版FlashPlayerなどの潜在的なバグではないかと思いますが、それはMicrosoftなりAdobeなりが対応してくれるのを待つしか無い。

ポイントとしては、ドキュメントクラスのEvent.ADDED_TO_STAGEイベントが発生したタイミングでも、stageWidthとstageHeightの値がゼロだということ。さらに、Event.RESIZEで監視しても、初回のイベント発生時にはやはりstageWidthとstageHeightの値がゼロになりました。

対処法

「HAYASAKA修行ブログ」さんで述べられているように、解決策はいろいろあります。自分としては、「Event.ADDED_TO_STAGEの発生時にstageWidthとstageHeightの値がゼロだった場合、Event.ENTER_FRAMEでstageWidthとstageHeightの値を監視し、両方の値がゼロではなくなったら処理を継続する」という方法を採用し、汎用のユーティリティクラスメソッド（Utils.stageSizeWaiter）としてまとめてみました。

Utils.as

package {
	import flash.display.Stage;
	import flash.events.Event;

	public class Utils {
		private static var _nextFunction:Function;	//ステージサイズ取得後に実行する継続処理
		private static var _targetStage:Stage;	//ステージへの参照
		public static function stageSizeWaiter(targetStage:Stage, nextFunction:Function):void {
			if ((targetStage.stageWidth * targetStage.stageHeight) == 0) {
				//stageWidthとstageHeightの値がゼロの場合はENTER_FRAMEで監視
				_nextFunction = nextFunction;
				_targetStage = targetStage;
				targetStage.addEventListener(Event.RESIZE, stageSizeListener, false, 0, true);
			}else {
				//stageWidthとstageHeightの値が取得済みの場合はそのまま継続処理を続行
				nextFunction();
			}
		}
		private static function stageSizeListener(e:Event = null):void {
			if ((_targetStage.stageWidth * _targetStage.stageHeight) != 0) {
				_nextFunction();	//継続処理を実行
				_targetStage.removeEventListener(Event.RESIZE, stageSizeListener);	//不要になったイベントリスナを削除
				_nextFunction = null;	//不要な参照を破棄
				_targetStage = null;	//不要な参照を破棄
			}
		}
	}
}

実際に利用する場合には、ドキュメントクラスで以下のように使います。

Main.as

package  {
	import flash.events.Event;
	import Utils;

	public final class Main extends Sprite{
		public function Main() {
			this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage, false, 0, true);
		}
		private function onAddedToStage(e:Event):void {
			this.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			/*
			* ADDED_TO_STAGEイベントが発生したら、ステージへの参照と
			* ステージサイズ確定後に実行するファンクションを引数に
			* して、Utils.stageSizeWaiterを実行。
			*/
			Utils.stageSizeWaiter(this.stage, onStageSizeObtained);
		}
		private function onStageSizeObtained():void {
			/*
			* このファンクションの実行時には確実にstageWidthと
			* stageHeightの値が確定している。
			*/
			sw = this.stage.stageWidth;
			sh = this.stage.stageHeight;
		}
	}
}

Katapad DesignさんのようにEventDispatcherにしたほうがスマートかなと思ったりもしてますが、こういう方法もあるってことで・・・。

ああ、疲れました（汗）。