Designer meets Designers 02 レポート
リッチコンテンツ実践テクニック
Flash・Silverlight・Ajax
「Designer meets Designers（D2）」2回目の開催となる今回は、「リッチコンテンツ」がテーマ。Flash・Silverlight・Ajaxのプロフェッショナルが集結し、基礎的な知識から最前線のテクニックまでがていねいに解説された。5時間以上にわたって展開された充実の講演、その内容をレポートする。
※本コンテンツ中の社名表記や肩書きなどは、イベント開催当時のまま表記されています。あらかじめご了承ください。
リッチコンテンツ制作のテクニックを
細部にわたるまで一挙大公開!
「Designer meets Designers（D2）」第2回目が、11月29日（木）、六本木アカデミーヒルズにて開催された。
今回のテーマは「リッチコンテンツ実践テクニック」。Flashをはじめ、最近注目を集めているSilverlightやAjaxについてのテクニックが網羅的に語られるとあって、クリエイターの関心も高い様子。凍りつくような寒さの中、なんと400人近くもの人が来場し、会場は開演前から、なんともいえない熱気に包まれた。
やがてイベントが始まり、まずは弊誌編集長・佐藤弘基が登壇。参加者たちの熱い視線の中、開会のあいさつを述べると、続いていよいよ待ちに待ったSESSION1がスタートした。
ActionScriptのコツは
「日本語で考える」こと
ゲストスピーカーは、実践的かつユニークなWebスクールを運営することで知られるクスールの松村慎氏。
現役のWebクリエイターとして活躍しながら多くのセミナーなどで教鞭をとっており、手慣れた様子で「これからFlashをつくりたい!」という人のためのActionScriptについて解説していった。
「ActionScriptと聞くとそれだけで『難しそうだなぁ』と思ってしまう人もいるんじゃないかと思いますが、コツさえつかめば実は意外と簡単なんです。特にJavaScriptができる人は、割とすんなりActionScriptが書けてしまうんですよ」 こう口火を切ると、軽快なテンポでActionScriptの習得手順を解説。
いきなりActionScript3.0を始めるのではなくまず1.0から始めて、ある程度使えるようになってから3.0へと移行したほうがやりやすいことなどを説明していった。
続いてこのSESSIONのキモ、「ActionScriptの簡単な書き方」を披露。Scriptを書く前に一度日本語で考えると理解しやすいことを、実例を交えつつレクチャーしていった。 「たとえば、丸の位置を動かしたい場合。まずは『丸のX位置を100にする』と日本語で考えて、それからその文章を『maru.x=100』とプログラム言語に置き換えればいいんです。このようにActionScriptには、難しい計算は必要ありません。数学的な知識より、むしろ英語など語学の考え方が必要。情報を整理し文章を組み立てて、それをプログラム言語に変換すればいいんですよね」 他にもさまざまな例を紹介し、ActionScriptの初歩的な書き方を徹底的に解説。会場の参加者たちも納得した様子で、熱心に耳を傾けていた。
Silverlightの
基礎知識を学ぶ
続くSESSION2では、フリーランスのテクニカルディレクターとして活躍する岡崎大典氏が登壇。Flashのライバル技術として注目されているSilverlightについて、その概要やメリットを解説した。
「Silverlightをひと言で説明すると、『マイクロソフト社が提供しているWebブラウザのプラグイン』ということになるかと思います。IEをはじめ、Firefox、Safariなどをサポートしており、クロスブラウザ、クロスプラットフォームに対応しているところがポイント。.NETをベースとした技術ですね」 このように概要について切り出すと、細かな動作環境やSilverlightのバージョンについて、次々と説明。Silverlightについて今まであまりよく知らなかったというクリエイターも、その全体像をしっかりと把握したようだった。
またSESSION2の後半では、「Silverlight〜どうつくるか〜」と題したデモンストレーションを実施。岡崎氏自らが簡単なSilverlightコンテンツを、その場で制作していった。
ものの1分程度でひとつの作品ができあがり、会場のクリエイターたちも驚いた様子。その他、さまざまなコントロール、テクニックが紹介され、これを参考にすれば今すぐにでもSilverlightを扱うことができそうな充実した内容でSESSIONは進行していった。
またSESSION2の後半では、「Silverlight〜どうつくるか〜」と題したデモンストレーションを実施。岡崎氏自らが簡単なSilverlightコンテンツを、その場で制作していった。ものの1分程度でひとつの作品ができあがり、会場のクリエイターたちも驚いた様子。その他、さまざまなコントロール、テクニックが紹介され、これを参考にすれば今すぐにでもSilverlightを扱うことができそうな充実した内容でSESSIONは進行していった。
「SilverlightはHTMLやJavaScriptと親和性が高いので、いろいろな連携の仕方ができるんですよね。また、フルスクリーンにしても画像がきれいに見え、高度なアニメーションや動画が簡単につくれるところも大きなメリットだと思います」
コントロールを紹介しながら、その魅力を説明する岡崎氏。
最後は「いろいろと紹介しましたが、まだ成長中という印象が強いのも事実です。ただ、XAMLやビデオ機能に代表されるようなテクノロジーは確実に業界全体へと影響を与え始めていますし、動画や他のデバイスとの連携を考えると利用価値も高い。幅広い可能性を秘めた技術だと思います」と締めくくった。
ActionScriptの
実用テクニックとは?
約15分の休憩を挟んで行われたSESSION3に登壇したのは、弊誌連載「Flash Creative Technique」でもおなじみのハヤシカオル氏。
「現場で使えるActionScript実用テクニック」というテーマで、Flashの現状や便利なテクニック、そして今後の可能性などを、あますところなく披露していった。
まずは、自身が制作した回転ドア式のフォトギャラリー「The revolving photo gallery」を紹介。
「動きはすべてActionScriptで制御している」、「『仮想的な三次元座標』のプロパティを持ったオブジェクトを『透視変換』してステージに表示している」、「外部画像ファイルおよびテキストはXMLで管理している」などの特徴について説明すると、続いてそこで使用している実用的なテクニックについて細かく解説を加えていった。
三次元の回転運動や透視変換などについて詳細な説明がなされ、会場の参加者たちも引き付けられた様子。あちこちでメモを取る姿が見受けられた。「たくさんのテクニックを紹介しましたが、まずは自分で、実際にスクリプトを書いてみてくださいね。他人が書いたスクリプトは、正直、僕もよくわかりません。どういう意図で制作しているのかは、つくった本人に聞くしかない。でも、自分でつくったものなら、自分がいちばんよくわかるはずですから。自分の力でスクリプトを書き、自分の力で理解する。そうやってトライ&エラーを繰り返すことが、上達への近道なんです」
紹介したテクニックのまとめとしてこう説明すると、最後は「これからのFlash」について、ハヤシ氏自身の観測を展開。
デザイナーとプログラマーの分業化がより進むかもしれないことなどを説明した。
「ActionScript3.0はかなり難しく、高度な内容になっています。ですから今後、ActionScriptの専門職のような仕事が出てくるかもしれませんね。ただし注意したいのは、専門だけを究めればいいのではないということ。Webサイトを制作するうえで、感性はやはり重要だと思います。ActionScriptを使いこなし、なおかつセンスやしっかりとしたロジックを持っているオールマイティなクリエイター。こうした人たちが活躍する場というのも、広がると思いますよ。それから、ActionScript3.0には、RIAアプリで書き出しができるというとても大きなメリットがあります。つまり、Webの技術でデスクトップアプリがつくれてしまうということ。ここにもぜひ、注目していただきたいですね」 実用的なテクニックだけでなく、第一線で活躍するWebクリエイターだからこそ実感できる「ActionScriptの可能性」についても示唆。充実した内容のSESSIONとなった。
使えるライブラリ満載!
Ajaxの簡単制作術
15:00にスタートしたD2もいよいよ終盤戦へと突入。18:00から行われたSESSION4では、（株）エイチツーオー・スペースのたにぐちまこと氏による「デザイナーのためのAjax動的Web制作術」が披露された。
まずはAjaxを使用したWebサイトの理想形として、「クチコミ満載! 先輩の大学合格体験記byベネッセコーポレーション 進研ゼミ高校講座(www.zemi.ne.jp/gokaku/)」を紹介。
具体的にどのようにしてAjaxが利用されているかを説明した。
続いてライブラリについて解説。「ライブラリとはクロスブラウザで、決まった処理を簡単に実現させるためのもの」であること、平たく言えば「自分のつくったプログラムとWebブラウザとの仲介役であること」などを解説し、その概要をテンポよく確認していく。 そしていよいよ、このSESSIONの核というべきテーマ「使えるライブラリの紹介」へとシフト。SmoothScrollやrollover.js、LightBoxなどが紹介され、実際にこれらのライブラリを用いてサイトを制作するデモンストレーションが行われた。また、特に使えるライブラリとしてアドビの「Spry」を紹介。
「DreamWeaverCS3との親和性が高いので、使っているツールがCS3なら何も考えずに使うことができる」と、その魅力について説明した。途中、デモンストレーションで制作したプログラムがうまく機能しなくなってしまうというトラブルもあったが、やさしい語り口のわかりやすい解説でスムーズに進行。参加者たちもひとつひとつの説明にうなずきながら、たにぐち氏の話に聞き入っていた。
その後約1時間、ライブラリや制作手順を説明したあとは、まとめとしてAjaxを使う際の注意点を指摘。「Ajaxを使うと新鮮だとか目新しいというような観点ではなく、ユーザーにやさしいという観点で使っていただければと思います。技術は技術のためにあるのではなく、お客様のためにあるもの。それを忘れず、Ajaxでユーザーフレンドリーなサイトをつくっていきましょう」と締めくくった。
RIA開発現場の
心構えとワークフロー
ここまで、約4時間にわたって行われたD2もいよいよ大詰め。ラストとなるSESSION5では「RIAの開発現場」についての生の声が、現場の第一線で活躍するトップクリエイターの口から語られた。登壇したゲストスピーカーは、（株）コスモ･インタラクティブのクリエイティブディレクター阿部淳也氏。まず「RIAとは何か」という基本的な知識の確認からスタートし、RIA開発の際に参考になる本やサイトなどが、次々と紹介されていった。 続いて、RIA開発の心構えやワークフローを徹底的にレクチャー。同社の組織やチーム構成などを例に挙げながら、「機能するプロジェクトチームのつくり方」について説明していく。 「仕事を進めるうえでもっとも大切なのがコミュニケーションです。弊社では、職種や経験に関係なく、できるだけ多くのスタッフが企画から参加し、要件定義のメンバーとしてプロジェクトにかかわるようにしています」 こう語ると、同社の組織図を明示。職種ごとに完全に役割を分ける方式ではなく、自分の職種をベースとしながら他の職種もフォローするフレキシブルな体制を取っていることを説明した。 その他、クライアントとのコミュニケーションの取り方、同社が手がけたWebサイト「スゴイ地図（sugoi.doko.jp/）」制作時のワークフロー解説、スケジュールの切り方や手描きラフの公開など、盛りだくさんの内容。通常では絶対に知ることのできない貴重な情報の数々に触れ、会場のクリエイターたちも大いに刺激を受けたようだった。SESSIONの終盤には同社エンジニアの岩崎亮氏が登壇し、技術的なノウハウまでしっかりフォロー。クオリティの高いWebサイトを生み出し続けるための秘訣に、たっぷりと触れられる1時間となった。 こうして、5時間以上に渡って行われたD2が無事終了。今回も前回と同様に、ほとんどのクリエイターがすべてのSESSIONに参加するという盛況ぶりで、大好評の中、幕を閉じることとなった。 2007年8月に第1回が開催され、大好評のうちに幕を閉じた。
■ゲストプロフィール
 |
松村 慎氏（クスール） |
 |
岡崎大典氏 |
 |
ハヤシカオル氏 |
 |
たにぐちまこと氏（エイチツーオー・スペース）
|
 |
阿部淳也氏（コスモ・インタラクティブ）
|
文＝川上純子（（株）Playce）
撮影＝飯田昌之
