chapter1-1

wonderflではじめよう

1. ブラウザのみでFlash を作成

通常、Flash コンテンツを作成するためには、Flash IDE やFlash Builder といったツールが必要です。記述したActionScript のコードをFlash Player が実行可能な形に変換(コンパイル)する必要があるからです。

開発環境価格URL
Adobe Flash CS4 Professional有償http://www.adobe.com/jp/products/flash/
Adobe Flex Builder 3有償http://www.adobe.com/jp/products/flex/
Adobe Flash Builder 4無償(ベータ版)http://labs.adobe.com/technologies/flashbuilder4/
FlashDevelop無償 ※1http://www.flashdevelop.org/

※1:2009 年11 月現在

wonderfl では、ブラウザのみでFlash コンテンツが作成可能です。wonderfl.net を開き、ユーザー登録・ログイン(後述)を済ませると、すぐにFlash コンテンツの開発を始めることができます。

ページの左側がActionScript 3.0 のコードを書くための「コードエリア」、ページの下には、書いたコードがコンパイルされている状況を表すメッセージを表示する「メッセージエリア」、ページの右側は、書いたコードによって完成したFlash コンテンツを表示する「コンテンツエリア」です(図1 参照)。

コードエリアにコードを書くとwonderfl のサーバでコンパイルが行われ、もし、コンパイルエラーや警告があればメッセージエリアに表示されます。無事エラーなくコンパイルが成功すると、「compile complete」というメッセージが表示され、コンテンツエリアに、作成されたFlash コンテンツが自動的に表示されます。

自分で書いたコードが意図どおり動いているか、随時コンパイル結果のコンテンツを確認しながら、コードを書いていくことができます。

2. ActionScript 3.0 のみでFlash を作成

Flash コンテンツは、インタラクティブ&アニメーションに強いといった側面から、デザインと密接に関連しています。

ウェブサイトに使われるFlash コンテンツを作る場合には、UI 部品をデザイナーがデザインしてFlash IDE に取り込む、またはFlash IDE のドローイングツールを使用してFlash 開発者が自分でUI 部品をデザインし、そのUI に対してActionScript でインタラクションを定義していくといった作業を行います。UI 部品も含めた状態でFLA ファイルが作成され、SWF ファイルにコンパイルして完成です。

wonderfl での開発ではActionScript に特化し、UI 部品のデザインもインタラクションもすべてActionScript で行います(もちろんFlash IDE を使った場合でも、すべてをActionScript で書くこともできます)。UI 部品は、Flash のLoader クラスを利用してインターネット上から取得して表示することもできますので、作成できるFlash コンテンツの自由度は同じです。

3. wonderfl 上で作成したコードはオープンになるということ

wonderfl上でwonderflユーザーが作成したコードは公開され、誰でもコードを読むことができます。そして、そのコードを元に編集を加え、新しいコードを作ることができます。

コードに付された「FORK」ボタンを押すと、そのコードのコピーに対して、新たにコードの編集を行うことができます。

理解できないコードをwonderfl で発見したら、まずFORK してみましょう。コードのある箇所を変更しコンパイルが完了すると、コンテンツエリアで再生されるFlash コンテンツの動きが変わります。また、ある箇所を削除すれば、Flash コンテンツのある機能が失われるはずです。その違いを見ながら、コードの理解を深めていきましょう。

FORK はwonderfl ユーザーどうしのコラボレーションにも使われています。他のユーザーが作成したおもしろいコードをwonderfl 内で見かけたら、FORK して新しい機能を追加してみましょう。

人の創造力では生まれない作品が生まれていくのを見るのは本当に楽しいです。ぜひ、wonderfl 内でコラボレーション作品を作ってみてください。

wonderflを使ってみよう

最もプログラミング言語を習得するスピードが速いのは、動く状態のサンプルコードが大量にあり、すぐに自分でコードをさわりながら動作を確認できる状態だ、と考えています。そして、そのしくみがwonderfl にはあります。

この本は、本文での解説とwonderfl 上にあるサンプルコードを通して、ActionScript を学んでいくための本です。すべてのサンプルコードはwonderfl 上にあり、それらは動作する状態にあります。解説の中で、それぞれ該当するwonderfl のコード番号(例010000)を記載しています。ブラウザを立ち上げ、そのページを開き、FORK ボタンをクリックしましょう。解説を読み進めながら、サンプルコードを自分なりにFORK して、動作を確認してみてください。

本書をひととおりこなした後には、wonderfl の全コードが待っています。wonderfl のユーザーが作成したコードは、Flash に可能なことの全範囲に及びます。

また、wonderflでActionScriptに入門し、本格的にFlashを使用したWebサイトを作りたいという方は、Flash IDE を購入するとよいでしょう。

なお、本書の説明でわからないキーワードがあったら、Adobe のリファレンス(http://livedocs.adobe.com/flex/3/langref/)で調べるとよいでしょう。

さらに実際の動くサンプルの中でどう使われているかは、wonderfl の検索機能(http://wonderfl.net/search)を利用してください。

wonderfl にログイン

では、wonderfl にログインしましょう。

wonderfl では、OpenID ※1 というしくみを用いて認証を行います。通常、あるユーザーを認証するためには、ユーザー登録時にユニークなユーザーID とパスワードを発行し、その組み合わせで、ユーザー登録したユーザーであるとみなすことで行います。OpenID を使用すれば、Yahoo! Japan やmixi、Google といった有名なサービスに、安全にユーザー認証を代行してもらうことができます。

普段よくお使いのサービスのバナーを選択し、そのサービスにログイン後、wonderfl に対して認証情報を提供することに同意してください。wonderfl に戻ってきたら、ユーザープロフィール変更画面になりますので、ユーザー名を任意の名前に設定して保存してください。これで準備完了です!

※1:OpenID について、詳しくはhttp://ja.wikipedia.org/wiki/OpenID を参照してください。

Flash Player 10

wonderfl で作成できるFlash コンテンツは、最新のFlash Player 10 向けです。最新のFlash技術をお試しください。Flash Player 10 がインストールされていない場合でも、インストール方法を案内していますので、お気軽にどうぞ。

なお、2010 年前半に正式リリースされるFlash Player 10.1 からは、Android 携帯など幅広いスマートフォンでも、PC と同じSWF ファイルを表示できるようです。

もっともっと!wonderfl

wonderfl 誕生の一番最初のきっかけは、2008 年夏にカヤック社内で開催した「ぜんいん社長合宿」です。ぜんいん社長合宿、これはカヤックでは年に2 回行われるイベントで、日頃はなかなか会社の経営理念(「つくる人をふやす。」)を考えながら仕事をすることが難しいということから、このような機会を作っています。

毎回、合宿のテーマは変わるのですが、wonderflが生まれたときの合宿のテーマは「サービスの販促」でした。作る人を増やすための販促方法として、弊社のFlash Developer が運営するブログ「_level0.KAYAC(http://level0.kayac.com/)」 を支援しようと思いついたのが、wonderfl が誕生するきっかけです。

_level0.KAYAC は社内外のFlash Developer が集まるメディアなのですが、もし、ウェブブラウザ上でコンパイルできるFlash があれば盛り上がるのではないか? もっとFlash Developer を支援できるのではないか?もっとFlash に興味を持ってもらえるのではないか?と思い、wonderfl のコンセプトが生まれました。さらに、コードを公開するだけでなくFORK できるようにすることによって、コードでコミュニケーションできるという要素を合わせました。はじまってみると、1 つのコードを元にみんながFORK して発展させていくFORK 祭りのような現象もおき、コードを書くことで楽しめるコンテンツとなっています。

ここでは、さらにwonderfl の楽しみ方を紹介します。

CHECKMATE(http://checkmate.wonderfl.net/)

2009 年7 月より12 月にかけて、毎月、著名なクリエイターや企業にお題を出してもらい、wonderfl ユーザーがFORK をして発展させるというコンテストを展開しています。この本が出る頃には終了してしまっていますが、それでも過去の結果がご覧になれますので、ぜひアクセスしてみてください。1 つのソースからそれぞれがFORK していくことによって、さまざまな表現に行き着いています。

wonderfl Flash-Games(http://flash-games.wonderfl.net/)

2009 年10 月に、wonderfl 上のFlash ゲームをゲームコンテンツとしてまとめました。コンテンツの1 つはこれまでのゲームをまとめたインデックス、もう1 つはwonderfl 上でキャラクターを作成し、みんなのキャラクター同士が対戦することができる対戦ゲームです。

現在、戦車ゲームが公開されていますが、wonderfl のFORK という特性を生かし戦車のパーツ(AI・グラフィック・弾の描画)などをパーツごとに引き継いで作成することができます。ですので、AI のみを極めていく方、きれいな弾の弾道を極めていく方、またはActionScript を書かずにユーザーとしてゲームを極めていく方など、いろいろな人に向けたサービスになっています。今後もさまざまなコンテンツをオープンしていきますので、ぜひご期待ください!

書籍のご購入をご検討中の方へ

wonderflbool onlineでは書籍の一部を公開しております。またサンプルコードはすべてwonderfl上で公開されています。

本サイトでは、書籍をお持ちでない方にもある程度お楽しみいただけるよう心がけておりますが、書籍にありますより詳しい解説をあわせてお読みいただく方が効果的に学習できると考えております。

本サイトをお読みになって書籍の内容に興味がわきました方は本書の方もぜひご購入くださいませ。

▲Page top

wonderfl