HTMLコーダーとして普段はHTMLサイトを構築しているみなさん、こんにちは。

ボクも普段はHTML/CSS/JavaScriptを使ってサイトを構築しています。
でもFlashもやりたい！なんて人は多いのではないでしょうか。実際にボクがそうです。

簡単にいってしまえば「やりたいならやればいいじゃない」ということですが以下のような壁があるかと思われます。

Flashを始めるにあたっての壁

  1. HTMLとFlashの概念の違い。
  2. Flashもってない、高い。
  3. ソースが見れない。
  4. 仲間がいない。教えてくれる人がいない。

まあ確かにこの気持ちは分かります。

1は、全く新しいスキルにチャレンジするとなるとちょっと勇気がいりますよね。
特に2と3に関して言えば、HTMLサイトとは大きく異なりますよね。 HTMLなんてとにかくエディタさえあれば始められるし。AdobeサイトにてFlex SDKが無料で配布されていますが、設置とかなんとかで敷居が高い。しかもコマンドライン上でコンパイルするとかなんとかで結構めんどくさいんですよね。
4は人によってはいるかもしれませんが、なかなか孤独な戦いというのはつらい・・・

そこで今回紹介するのは面白法人KAYACによるサイト上でFlashをつくることのできるサービス「 wonderfl」です。

「サイト上でFlashをつくることのできるサービス」とありますが、これがホントにすごい。
先にいうと、上の４つの懸念は全て吹き飛びます。

wonderflが凄いところ

  1. MXMLに対応している
  2. 無料
  3. ソースがみえる
  4. Fork, Favoriteなどでつながるコミュニケーション

実はこの4つが上に書いた壁を全てとっぱらってくれます。
では、一つ一つ説明。

1. MXMLに対応している

実は最近のFlashは単にFlashといっても、従来のFlashとは別にFlexというものも存在します。
Flexというのはソフトウェアの名前なので的確ではありませんが、実際にはmxmlという規格が作られました。

MXMLというのはxmlベースのマークアップ言語でFlash版HTMLだとイメージしてください。
要素をMXMLで記述して、ActionScriptで制御する。これって実はXHTML+JavaScriptと関係似てませんか？

そう、今までやっていたXHTML+JavaScriptが単にMXML+ActionScriptに置き換わったと考えればいいのです。

MXMLもXHTMLも元をたどればXML。JavaScriptもActionScriptも元をたどればECMAScriptとなっていて似ているどころか兄弟！と言った感じでしょうか。
実際にソースを見てもらえると分かりやすいかと思います。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
        private function helloWorld():void
        {
            myMsg.text = "Hello World!";
        }
    ]]>
    </mx:Script>
    <mx:TextArea id="myMsg" />
    <mx:Button id="myButton" label="Click!" click="helloWorld()" />
</mx:Application>

これで結果は

Flexでhello world (ボタンイベント) – wonderfl build flash online

となります。(Wonderflのブログパーツです)

もはやHTML過ぎてFlashやってる感じがしませんね。
そう、いままでの経験や知識がそのまま引き継がれる！これはかなり敷居が下がったのではないでしょうか。

嬉しい事にWonderflは最近mxmlをコンパイルしてくれるようになりました。

無料

このサービスは無料です。しかもアカウントがOpenIDでつくれるのでとっても簡単。
さまざまなOpenIDに対応しています。とても親切。すぐに始められます！！

ソースがみれる

ボクのページで申し訳ないのですがこのようにソースをみることができます。

これからActionScriptを勉強しようとしている人にとってこのソースがどれだけ手助けしてくれることか！

トップページからは人気のコードや、人気のユーザーが表示されているのでとりあえずソースを見る事から始めることもできます。

さらに検索機能がうれしくて、例えば本を読みながらこの関数を使った例なんかをみてみたいなーなんてときにもサンプルコードがいっぱい出てきます。

colorMatrixFilterを使った例

4. Fork, Favoriteなどでつながるコミュニケーション

WorderflにはForkというものがあります。これはTumblrのReblogと似ていますね。
ソースを継承して改変する事ができます。

ニコニコテレビちゃんを描いてみた
http://wonderfl.kayac.com/code/e0729bcbc67c0d6e4624124d8e8a84d85e282d68

ニコニコテレビちゃんを動かしてみた forked from ニコニコテレビちゃんを描いてみた
http://wonderfl.kayac.com/code/480459c0d307fceff61b3cfc66ddf90d2e8e9dd7

やこのような例も。

とにかく作ったものをUPするとそれがコミュニケーションとして動き出す！
誰かが作ったものをForkしてもいいし、Forkを募集しても面白いかもしれません。

また、自分のお気に入りのFlasherやコードを見つけたらFavoriteするのもいいでしょう。
自分のwonderflのFeedにFavoriteした人やコードの最新情報が更新されるので便利です。
自分のコードをForkされたりFavoriteされてる場合もFeedに情報が出てきますので、誰かが自分のコードを気に入ってくれたりするのも楽しみですね。あとはTwitterなどを公開している場合はfollowしてみるのも良いのではないでしょうか。

まとめ

HTML+JavaScriptがMXML+ActionScriptと似ているということ。
Wonderflを使えばすぐに始められる事、そしてコミュニケーションも生まれるということを紹介させてもらいました。

実際ボクがこれから始めようかと思っているところなんで、今から一緒にやろうよ！と思ってくれる仲間募集です！w
@HOKYPOKYやwonderflのボクのページなど超WELCOME！！