2008年より未来検索ブラジルに勤務
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
"最高傑作へのショートカット"
コミュニティから生まれた情報ツール、ザ・ストリッパーズの遠崎さんに聞く、「別冊 島耕作」の開発秘話
最近、豊富な量のページ内コンテンツをセクション毎にまとめてタブで切り替えて表示させることや、階層型メニュー、アコーディオン表示、また、Googleが提供しているGoogle Mapsやその他ガジェットなどを用いて、サイトを効果的にみせるといったことが一般化してきました。」からアクセスできます。フリーウェアだけでなく、シェアウェアとして登録されているものもあります。また、使用にあたりライセンス形態も確認することができます。今回は、オープンソースのWidgetをここから絞り込んで探してみます。詳細ページには、どのフレームワークを使用しているのかだけでなく、そのWidgetのライセンス形態や費用、Widgetを利用できるOSが記載されています。」をクリックします。ツリービューやツールチップを表示させるといった様々なWidgetを見ることができます。Widgetの名称をクリックすると、より詳しい内容を見ることができます。
アドビのWebサイトにログインしていない場合は、ログイン画面が表示されるので、ログインが完了すると、このような画面に変わりWidgetのダウンロードが始まります。mxpという名前のファイルです。ここで、「承諾する」を選ぶとインストールが始まります。「承諾しない」を選ぶとインストールされない仕組みになっています。Dreamweaverが起動している状態で拡張機能をインストールした場合は、拡張機能のインストールが完了する際、図のようなダイアログが表示されるので、OKをクリックし、Dreamweaver CS4を終了して、再度起動します。ダウンロードしたWidgetをダブルクリックすると、インストールされたWidgetやその他拡張機能はここにリストされます。削除する際には、図の「削除」をクリックします。
Dreamweaver CS4を起動したら、新規ドキュメントを作成し、任意の名前で保存しておきます(既存のドキュメントでも良いですが、ここでは新規ドキュメントで行います)
まず、挿入メニューからの挿入方法を紹介します。挿入メニューをクリックすると、メニューの最下部にYUIというメニュー項目があります。次に、挿入パネルからの挿入方法です。挿入パネルのメニュー項目を選択すると、「お気に入り」の下にYUIという項目があるので選択し、YUI Calendarをクリックします。どちらかの方法でYUI Calendarを選択またはクリックすると、ドキュメントウィンドウにカレンダーオブジェクトが挿入されます。ひとまず、このドキュメントを保存しておきます。Ctrl+Sで保存すると、図のようなダイアログボックスが表示されます。これは、YUI Calendarを利用する際に必要なコンポーネントを保存する旨のもので、OKをクリックします。
保存が完了したら、「ライブビュー」をクリックしてみましょう
カレンダーが表示されました。
新規のドキュメントを作成
既存のページに挿入する際には、ページを開きます。インストールされたWidgetは、挿入メニューの一番下にメニューとして追加されます。挿入パネルの「お気に入り」の下にも追加されます。メニューを選択すると、「挿入」ボタンが追加されています。このボタンをクリックしてWidgetを挿入します。水色のタブ付きの枠で囲まれたところが、挿入したWidgetオブジェクトです。
初めて使用するWidgetの場合、ファイルを保存すると
オブジェクトに関連するファイルをサイトルートに保存する必要があります。サイトルートにYUIというフォルダがコピーされています。ライブビューに切り替わり、動作を確認することができます。有名なライトボックスを実現するWidgetです。Spryを利用したレーティングです。Diggのオブジェクトを追加します。リッチUIなスライドショーを公開できます。オブジェクトにマウスをのせた際にツールチップを表示させます。ページ内でタブによる表示切り替えが可能になります。ページ内にスライドバーを導入します。メニューボタンを追加します。ソート可能なデータテーブルを追加します。ブログなどでもお馴染みのカレンダー機能を追加します。リッチUIなボタンを追加します。ページ内でタブによる表示切り替えが可能になります。ページ内にスライドバーを導入します。オリジナルのダイアログボックスを追加します。ブログなどでもお馴染みのカレンダー機能を追加します。アコーディオンUIを追加します。リッチUIなスライドショーを公開できます。ソート可能なデータテーブルを追加します。リッチなスライドショーを公開できます。スライドバーを追加します。角丸のボックスを実現させるためのWidgetです。画像などのフォーマットポップアップさせることができるようになります。イメージを利用したメニューを追加します。
いかがでしたか
これまでこうしたリッチなUIを持つオブジェクトを利用するには、ソースコードを貼り付けて、関連するファイルをディレクトリにコピーして、関連するファイルへのリンクを貼って
大学卒業後、商社営業マンを経て1996年に印刷会社へ転職
DTP業務およびWebサイト制作業務に携わる。
2000年よりグローバルデザインで情報設計及び制作技術を学び、2004年アンカーテクノロジーへ入社
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
"最高傑作へのショートカット"
コミュニティから生まれた情報ツール、ザ・ストリッパーズの遠崎さんに聞く、「別冊 島耕作」の開発秘話
に関わる開発者のための RIA 情報集約型の
アドビ AIRアプリケーションです。以下のサイトよりダウンロードしてご利用下さい。開発の経緯からアプリケーションの特徴まで紹介していきます。
これに伴い開発者人口も増加している訳ですが、そんな Adobe Flash Platform 上で活躍する開発者のみなさんは、どのようにして技術情報を収集しているのでしょうか
アドビ提供の技術ドキュメント群、技術記事や最新情報に敏感な開発者たちのブログなど、自分の情報ソースを持っていることと思います。
そして、必要な時にそれらの情報を活用して問題を解決していくのが一般的でしょう
しかし、ここでひとつの問題が出てきます。情報ソースが増えれば増えるほど、どの情報がどの情報ソースに存在していたか分からなくなってくるのです。などの検索エンジンで一から検索するようになってしまいます。
折角の情報ソースがちょっと勿体ないですね
プリセットされた Adobe RIA に関する情報ソースに加えて、自分のオリジナル情報ソースを登録することで、その情報ソース群の中から横断的に情報検索ができるようになっています。
プリセットされた情報ソース
アドビおすすめ情報
左側のペインにカテゴリ分けされた技術情報、右側のペインに各記事のサムネイルがリスト表示される。ページタイトルをクリックすると、ブラウザでそのコンテンツが開きます。RSS フィードされた記事の未読/既読管理や検索を行うことができます。また、プリセットされた RSS 以外にも自分で RSS 登録ができるようになっています。その場合は、カテゴリを作成して自由に登録することができます。登録されている全ての RSS から横断検索が可能になっています。
左下にあるフォルダマークのボタンをクリックし、カテゴリを追加
「追加」ボタンをクリック
追加した RSS フィードに対する検索も可能
アドビが提供する技術ドキュメント PDF のコンテンツが収録されています。検索語に該当する PDF がリスト表示される。将来的にはプリセットされた PDF だけでなく、自分で登録した PDF もインデックス化させ、検索対象に含める予定です。
ソースコードの公開
0 をリリース予定です。正式版のリリース後にソースコードも公開予定ですので、是非とも AIR アプリケーション開発の際には参考にしてみてください。
イベントレポート「まいど
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
ザ・ストリッパーズの遠崎さんに聞く、「別冊 島耕作」の開発秘話
今月号の記事
"最高傑作へのショートカット"
コミュニティから生まれた情報ツール、ザ・ストリッパーズの遠崎さんに聞く、「別冊 島耕作」の開発秘話
ビジネスパーソンなら誰もが知っているであろう人気漫画キャラクター「島耕作」を起用し、雑誌スタイルという枠組みでコンテンツが展開される異色のキャンペーンです。その裏側について、開発を手掛けたザ・ストリッパーズ株式会社の遠崎寿義さんに伺いました。
ユーザは、島耕作が代表取締役社長を務める「HGホールディングス」の社員となり、Acrobat の機能やノウハウを学びながら、仕事(ゲーム)をこなし、出世していく。Edge:キャンペーンのメッセージを伝える手段として、雑誌スタイルを採用されています。
ツールの機能を紹介する手法として、映像などを使いビジュアル的に伝えるアプローチも考えられると思うのですが、テキストを中心とした読ませるコンテンツにしたのはなぜでしょうか
遠崎:今回のサイトの目的は、「ビジネスのリーダー層に“Acrobat を使った新しい仕事のやり方”を知ってもらい、実践してもらう」ことです。そのためにまず伝えるべきことは、「Acrobat がどういうビジネスシーンに効くのか」ということで、その先に機能の説明があります。
Acrobat が効果的なビジネスシーンを説明するにあたり、もし島耕作を起用していなければ、何らかのシチュエーション映像を作るという手法も考えられるでしょう
しかし、今回は島耕作の資産を最大限生かすことが成功につながると思っていました。ビジネスシーンを描くとしても、島耕作の世界観を最大限生かしたい。そこで、Acrobat が効果的なビジネスシーンを説明するコンテンツ「4つの新常識」では、漫画に登場するキャラクターへのインタビュー記事という体裁をとっています。
その内容を漫画で構成することもできたと思いますが、それはベストな手法ではなかったでしょう
記事体裁であれば、テキストで説明されるのは「当たり前」として受け入れられるものですが、同じ内容を漫画というフォーマットにして説明テキストの部分が多くなると、急に説明臭く、面白くなくなるものです。また、今回のメインターゲットはビジネスユーザです。
30~40 代のユーザは、漫画で情報を吸収するリテラシーは比較的高い世代だとは思いますが、会社で漫画のサイトをじっくり読んでいたら怒られてしまいますよね
「別冊 島耕作」内のインタビュー記事
ただ、昇進時や各種イベントなどでは、漫画を使っています。島耕作を起用する以上、「漫画」というフォーマットが一番ユーザにとってもわかりやすく、感情移入しやすい。このサイトでは、ユーザが仮想の「社員」となって出世していきますが、ユーザとのコミュニケーションの距離を近づけたい部分では、テンポよく表現力の高い漫画フォーマットを使っています。
昇進時や各種イベントなどときには漫画フォーマットで
こういった「テキスト」と「漫画」の部分を違和感なく組み合わせるためには、「雑誌」という形が最適と判断しました。
Edge:制作・運用にあたり、特に注力したところはどこでしょうか
遠崎:インタビュー記事内容や漫画部分の原稿作成、デザイン、Flash、どれも大変なところですが、振り返るに、サイト全体を通して「ユーザとのコミュニケーションをデザインする」という部分が肝だった気がします。たとえば、ユーザは、漫画の中では HG ホールディングスの社員として扱われます。その一方で、インタビュー記事など「別冊 島耕作」を普通に雑誌として読んでいる読者としての立場もあるわけです。そういった部分でユーザが混乱しないかといったところは大きな懸念点でした。これまでは「絵コンテ」でフローを描いていたのですが、今回は「字コンテ」を作って、何度も精査していきました。ユーザとのコミュニケーションをデザインする上で、字コンテの方がかなり効果的だというのは新しい発見です。
たとえば、絵コンテをざっと描いてフローを作るときに、画面上の文言を「○○○」といったダミーテキストで進めているという人も多いでしょう
しかし、「こういう画面遷移で進んだときに、ユーザがついてこれるか、参加しようと思うか
」といったことをシミュレーションするのに、その「○○○」の文言が重要だったりします。字コンテだと、そうした点をケアしながら、スピーディーに修正や試行錯誤ができます。
今回作成した字コンテ
今回のサイトの場合、閲覧していると「経験値」が増えていき、「異動」のイベントが起こるようになっています。「経験値」という言葉はもはや市民権を得ている言葉だと思いますが、サイト上ではあえて使っていません。経験値は異動するためのもの、なぜ異動させるかというと、サイトを隅々まで見て楽しんでいただくためです。「あとちょっと見たら、異動できそうだ、だったらもう1ページ読んでみよう」という動機につなげるためのものなので、左下に設けた経験値を示すカウンターは「あとちょっと」を強調するために、「あと XX ポイント」と数が減っていく形をとっています。
「次の異動できる経験値は2500で、今あなたは1800です」と言われるよりも、この方がシンプルで、「もう少し」という心理になりやすいですよね
このポイントを「経験値」とラベル付けするとどうなるか
経験値と聞けば、多くの人は増えていくものという印象を持っているでしょう
サイトでの目的としては、「減らして」いきたい。減らしていく場合、経験値という言い方には違和感があります。こういった違和感や、細かい仕様を決めていく作業を「字コンテ」を作りながら進めました。また、ポイントカウンターはサイト滞在中、常に減り続けますが、その表示が記事などを読むときの邪魔にならないようにしなければなりません。大きな動きには目線が行きやすく邪魔になるので、アナログのトリップメーターのように小さな動きでカウンター部分を表現するといったことも、字コンテの作成時に検討したことです。
経験値を示すポイントカウンター
Edge:この記事の読者層は主にクリエイターなのですが、技術的な見所を教えて下さい。3D エンジンを使用していると言っても、いわゆる 3D 空間的な演出を施すためではなく、だいぶアングルを絞り込み、机上の見た目や雑誌のページをめくる操作がより自然な感じとなるように使用しています。フリップブック的な演出やライブラリは昔からよくありますが、そうした技術を使って実現できるものでは、必ず真上から見ている状態になると思います。机上や雑誌などの身近に触れるアイテムに対して、真上から見た平行移動的な演出を行うと、見せられているという感が強く、すごく不自然に感じます。もっと、ユーザ自身が見ている、操作しているという感じを強調したかったのです。そして、3D エンジンを使うにしても、ユーザ環境を配慮しています。おそらくクリエイターの皆さんのマシン環境だとそれほど問題ないと思いますが、ビジネスパーソンが対象となると、パフォーマンスの要求はシビアです。Papervision3D などの既存の 3D ライブラリでは、パフォーマンスやページをめくる動きなどに満足がいかなかったので、今回は 3D エンジンを一から開発してもらっています。このサイトでは、ユーザにニックネームを入力してもらい、それを漫画のセリフ中に違和感ないように当てはめています。通常、漫画の文字組では、かな部分は明朝体を、漢字部分はゴシック体を使います。そのようにするには、Flash にフォントを埋め込む必要があります。しかし、2つも日本語フォントを埋め込むと、それだけで 3MB ほどになり、現実的ではありません。ただし、フォント埋め込みは埋め込む文字を指定でき、ニックネームの長さぐらいであれば、数 KB ですみます。そこで、ニックネームが確定したら、サーバ側でニックネームに必要な文字を埋め込んだだけの SWF を生成し、それをメインの Flash にロードするようにしています。
漫画のセリフ中にはめ込まれたニックネーム
Edge:このキャンペーンでは、出世ゲームの要素を取り入れていますが、今後、どのような展開が待っているのでしょうか
遠崎:まぁ、先のお楽しみ
ですが、肩書きのステップは20近く用意しています。
おそらくこのメールが配信されるときには、部長クラスまで昇進できるようになっているでしょう
部長になるには、すべてのコンテンツを閲覧し、2つのゲームをクリアしないといけません。
さらにその上には役員クラスもありますが、そのための条件は
まだ秘密です。
コンテンツを閲覧していると、次々とイベントが発生し、仕事(Acrobat を使ったノウハウを実践するゲーム)をこなしながら出世していく。今回はアドビさんがクライアントなので、PDF にコメントがついて戻ってきたりして便利でした。
あと、社員の自己評価シートの入力と集計にフォーム機能を使っていますね
文章の校正などは PDF で行うと確実なので、皆さんに使っていただけるとありがたいですね
制作会社はお客さんの環境に合わせてという側面があるので、皆さんがもっと使ってくれればいいのにと思っています。
慶應義塾大学卒業後、株式会社イメージソースの取締役を経て、2005年5月ザ・ストリッパーズ株式会社を設立
著書に、『Webデザインの「プロだから考えること」』(インプレス)、『デジタルの仕事がしたい』(岩波ジュニア新書)などがある。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
大重美幸の「これ見落としてませんか
小野田智の「世界の制作会社からコンニチハ
「世界の制作会社からコンニチハ
」を連載している小野田です。
本来ならば、今月号でご紹介したドバイから次の目的地であるカイロに直行するはずだったのですが、ラウンジでのんびりしていたらフランクフルトでの接続便を乗り逃がしてしまいまして、代替便まで10日間ほど待つハメに
「これはFITCに突撃して来いという神のお告げなのだ」と勝手に解釈し、急きょアムステルダム行きを決めました。
スピーカーや関係者各位を除けば、日本人の一般参加者は僕一人
今回は一人の参加者目線から2日間にわたったFITC Amsterdamの感動をレポートさせていただきます。
まずはFITCについて簡単にご紹介しましょう
FITCはカナダのトロントをベースとする団体で、過去8年間にわたり世界各地でトップクラスのクリエイターを集めて大きなセミナーを運営しています。昨年末には東京でも「FITC Tokyo 2009」が開催されましたので、読者の皆さんの中には参加された方も多いのではないかと思います。
アムステルダムでの開催は3年連続3回目
ヨーロッパの主要都市からのアクセスも良く、またデザイン文化が強く根付いた街として当地での開催が定着しているようです。個人的に参加者に話しただけでも、ドイツ、スウェーデン、フランスなどヨーロッパ各所からデザイナーや学生達がこのイベントのために集まってきていました。こういった場所を歩くと「ヨーロッパに来てしまったなぁ」とあらためて実感します。
会場は市内中心部から徒歩20分弱の古風な建物
現地の人にしてみればごくありふれた建物なのでしょうが、これぞヨーロッパ
というデザインがごく自然に施された会場は日本人の視点からするといちいちカッコよすぎです。
別館と合わせて4つの部屋で並行して行われたセッション数は2日間で50以上
今回は個人的に参加したセッションのいくつかをダイジェストでご紹介したいと思います。
螺旋階段に沿って大部屋が配置されていた会場
あしらいのセンスがカッコいいです。0で完全に整備されていたり、端末のGPUを活用してパフォーマンスを上げるコマンドが用意されていたりと、iPhoneをはじめとするスマートフォン分野に対するAdobeの本気度が伝わってきました。夏までには正式に発表されるであろうCS4 次期バージョン、一人のユーザーとして待ち遠しいです。
コーヒーなどが常備されていたラウンジ
一休みしながら企業ブースを見て回れます。
コンピューターの世界がまだ16色で表現され、モデムの転送速度は1Kbpsも出ない時代、GUIなどというものも存在せず、画面に表示されるのは文字列の羅列だけ
当時のオタクたちはその限られた環境でもPCのディスプレイに絵を表現する手法を編み出しました。そう、アスキーアートです。スピーカーのPeterは、そのアスキーアートを敢えてFlashで再現してしまおうと、C/C++コードをFlash PlayerのAVM2仮想マシンにコンパイルする「Alchemy」という仕組みを使い、インベーダーゲームなどパソコン通信時代にお馴染みだった画面をアスキーアートで再現してしまったのです。実際にキーボードでプレイできます。そして、話はこの古き良き時代の再現だけでは終わりません。Flash独自の機能を活かし、入力された動画をリアルタイムでアスキーアートに変換する仕組みを作り出してしまったのです。PVもアニメもすべての動画がアスキーアートに変換されてしまいます。また、このサイトには搭載されていませんが、エンジンレベルではWebカメラからの入力にも対応し、リアルタイムでアスキーアートに変換するデモも行われました。Peter自身は「全く無駄なものを作ってしまった」と自嘲気味に語っていましたが、VJ用途など活用の道は色々とありそうな気がします。
前回のトロントでの開催でも大盛況だった日本のFlashシーンを紹介するセッション
今回は、BOWの吉川佳一さんとカヤックの大塚雅和さんのお二人が参戦です。
今回のFITCは全体を通して、Flashのプロフェッショナルによる制作についてのプレゼンテーションが多くを占めましたが、このお二人の話はむしろ日本におけるFlashの普及についてがテーマかと
現地の参加者たちも日本に根付いたFlash文化に驚きを覚えていたようです。
セッションの感想
wonderflに上がっている作品の紹介を絡めながら、機能やおすすめの使い方について話しました。
netを知っている人
」と聞いたときに、半分近い人たちが手を挙げてくれたことに驚き、うれしかったです。
紹介させていただいた作品の作者さんにも感謝
トップクリエイターのトークは、繰り返し聞いても刺激がたくさん
個人的には、もっと実験しなければ
という焦りがでてきました。wonderflを知っている割合に対して、使っている割合が少ないように感じたので、ヨーロッパでも日常的に使われるサービスになるようどんどん開発を進めます。
そして、FITCでスピーカーがFlashについて話すように、開発者でない人がwonderflについて話したりイベントで使ったり、してほしいですねー
セッションの感想
拙いプレゼン力ながらも、同行のお二人に助けられ、なんとか形にできました。一番見せたかった共同編集がうまく動かなかったのは残念でしたが、好きなことを楽しんでできたので良かったです。世の中には桁違いの変態がいることがわかり、勇気が出ました。特に一つのことを突き詰めて異次元に達する力は自分も見習いたいです。今年もBOWで変わったものを色々作っていく予定ですが、その過程でできたものをなるべく多く共有できるようにしたいです。それと、英語をもっと話せるようになりたい。FlashとActionScriptを活用しながら抽象的なアートワークを制作する彼のスタイルをご存知の方も多いかもしれません。
プレゼンテーションの内容は、彼のアートワークにおける根幹の一つ「リボン描画エンジン」についての解説や、自分のタッチを活かしながら写真を抽象画風に加工する方法など
リボン描画エンジンの基本ソースは、Erikのサイトからダウンロードできるので興味のある人は覗いてみるといいでしょう
ただ、このプレゼンテーションの目玉はテクニカルな事例紹介ではありません。彼のアートワークとその制作過程の映像を大画面スクリーンで堪能できることが大事なのです。
もともとビルボード向けなど巨大なアートワークを制作しているErik
テクニカルな内容を解説しているのにも関わらず、事例の一つ一つが美しく会場はため息と歓声に包まれていました。
ちなみに最近ご結婚されて出費が色々とかさんだらしく、「よかったらアートワークのプリントアウトを買ってね」との宣伝も
参加者全員に配られたグッズ
自転車の街アムステルダムにちなんでバッグにも自転車のプリントがされていました。
そんな僻地ともいえる場所でも数多くの優良クライアントを抱える彼らの制作スタイルは、徹底的なクオリティ主義
クオリティの高いものを作ればクライアントが気に入ってくれ、金銭的にも制作スタイル的にも自由を得ることができ、それによりまたクオリティが追求できるという好循環を実践しているようです。当初はTeam Geistのキャラクターの動きはもっと作りこまれていたものだったらしいのですが、これだと逆にユーザーはコンソールゲームと比較しがちになってしまうので、敢えて動き方をシンプルにしたらしいです。それでも、綿密に作りこまれたストーリーと美しいアートワークはただのWebサイトを遥かに超えるユーザーエクスペリエンスを作りだしています。FITCは、充実したセミナー群だけでなく、その後の二次会的なパーティーでも有名です。今回は、近くのクラブを貸し切って、深夜まで飲み放題のダンスパーティーが行われました。さすが外国人、お酒とダンスが大好きです。遠く離れた異国の地でしたが、Flashという共通の話題があるので誰とでもすぐに仲良くなれました。
東京での開催時もそうでしたが、こういった横の繋がりを作る機会というのは非常に大切ですよね
超豪華スピーカー陣も参加のアフターパーティー
目を凝らすと、この写真の中にもFlash界の有名人を見つけられるかもしれません。
海外のこうしたイベントに参加するのは実は初めての経験だったのですが、2日間にわたって行われた濃密なセミナーのせいで知恵熱のようなものが
多くの興奮とインスピレーションに自分の脳がオーバーヒート気味になってしまったようです。自分も彼らのように何か人を感動させるものを作りたい。そんな思いが心に強く刻まれました。来月25日からは、FITCの本拠地トロントでも3日間にわたるイベントが開催されます。
日本からの専用ツアーの申し込みは既に締め切られているようですが、個人手配でも行く価値は十分にあると思いますよ
また、大好評につき今年も年末に東京で開催予定とのこと
詳細は未定ですが、毎回超豪華メンバーが集結するFITC、今から年末が楽しみですね
(おのださとし)
オーストラリアへの語学留学などを挟みながら東京でWebデザイナー/Flashクリエイターとして働くこと数年
2009年末より、長年温めていた世界一周旅行計画をついに実行に移し、現在も旅行中
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
大重美幸の「これ見落としてませんか
小野田智の「世界の制作会社からコンニチハ
関連業界で活躍される審査員の方々の詳細かつ厳選なる審査の後、2010年3月9日、東京ビッグサイトのICカードワールド2010にて、本コンテストの発表会が行われましたので、受賞作品をご紹介し、受賞者からのコメントをお伝えいたします。初のコンテスト、かつFeliCaとAIR/Flashの両方の技術を使うという高いハードルにも関わらず、数多くのすばらしいアプリケーションのご応募をいただきました。応募者の皆さま、本当にありがとうございました。
発表会場の様子
審査員の方々のプロファイル
受賞作品のご紹介
【アプリの概要】
もともとFeliCaは1人で使うものですが、それを数人でシェアすると何かできないかな
という発想から、書き込み時に使用したFeliCaがないと、読んだり返信したりできないという交換日記アプリの構想に至りました。まずAIRアプリを起動すると、交換日記のブック表紙が表示されます。FeliCa(種類は問いません)を端末に載せると、日記帳がパラパラと開き、最新の書き込みページが表示されます。右側のページに日記を書き込んだ後、FeliCaを端末からはずすと、自動的に記入した内容がサーバーに保存されます。
後は、このFeliCaを交換相手に渡すだけで、誰にも知られない交換日記のできあがり
例えばシール型のFeliCaを実際の手帳に貼り付けたりして、秘密のメッセージを相手に伝えることも可能です。目に見えるFeliCaというデバイスを交換することで成り立つところに、技術やネットだけでない、人同士のコミュニケーションがあることが本当にすばらしいコンセプトだと思いました。このたびは最優秀賞という、非常にすばらしい賞を頂きましてとても光栄です。FeliCaをコミュニケーションで使うところから、本作品「交換日記AIR」の制作が始まりました。Flash/AIRのネットワーク機能を利用し、サーバーサイド技術と組み合わせた本作品は、ビジネス・シーンにも十分に応用が利くものです。今回の受賞をきっかけに、FeliCaとWebサイトを組み合わせたソリューション展開を、会社として進めていきたいと思っています。今回はどうもありがとうございました。
【応募アプリケーションの実行環境】
【アプリの概要】
その情報に従ってフレーズを構築し、音を鳴らす感じです。あと、idmによって音が変わるようにしました。発音時に左側が光るようになってますが、たまに光らないです。帯もたまに出ない感じです。指標にもならないので、「光ってるなー」くらいに見てください。新機能として、キーボードパッドを付けてみました。左の波形スイッチで波形を切り替えて、右のパッドをグリグリやると音が鳴ります。赤色がキーの主音、緑色が全体の音と合わせても絶対に外れない音です。これらのマークのところを目標にしてグリグリすれば、必ず音が外れない仕組みになってます。
とかのポスターとかに、みんながタッチして音楽を奏でたら素敵ですよね
FlashDevelopで開発してたんですが、デバッグ用プロジェクターがめちゃくちゃ重くてげんなりです。読み込めなくなったら、おそらくFeliCaリーダーが占有されている状態なので、しばらく待った後に再読み込みしてください。レコードを入れ替え差し替えリミックスしていくDJのごとく、身の回りや友達同士で手元に集まったFeliCaをどんどんかざしてリミックスしていくような、テクノ&レイヴな未来を感じました。優秀賞という名誉を頂き、本当にありがとうございます。
「参加することに意義がある」という思いで応募し、「あわよくば受賞したいなー」と思ってたら、本当に受賞するとは
世の中わからないものです。アイデアも技術力も未熟な中、他の方々のコードを見て勉強しながらやっとできたので、この賞は本当に先人の知恵、皆さまのおかげだと思っております。まだまだ、学ぶことばかりの毎日ですが、この賞を励みにして、今後も自分なりに頑張っていきたいと思います。あと、FeliCaが音楽業界に乗り込む日を楽しみにしております。
【応募アプリケーションの実行環境】
【アプリの概要】
FeliCaと変身ベルトさえあれば、君も今日からヒーローだ。
ヒーローに変身して、君だけのドラマの主人公になろう
ベルトを装着します。お手持ちのFeliCaカードをベルトに挿入し、変身します。
かっこよく変身できたら記念撮影
詳しくは、公開中のサンプル動画を見てください。
FeliCaを使って変身するという発想が予想外
さらにARの技術との組み合わせでまさに今までのFeliCaにはありえなかった体験を実現しているところに、高い技能性を感じました。技能賞ありがとうございます。業務の合間を縫ってみんなの力を少しずつ出し合って作ったアプリが形になり、賞までいただけてうれしいです。SDK for FeliCaを使えば、カードをかざすという簡単な動作から思いがけない素敵な体験を引き出すことができます。
これからもFeliCaを使った新しい体験が広まり、世界が平和になることを祈ります(仮面リーダー RIAxDNPより)
【応募アプリケーションの実行環境】
「ぐにゃぐにゃ時間地図」
【アプリの概要】
時間地図は、従来、経年的な道路交通網の発達の様子を視覚化するために用いられてきました。空間的な距離ではなく、移動するごとに変化する各駅までの移動時間をもとに、地図をアニメーションさせることで、日常とは違う感覚で、東京を認識することができます。使い方は、FeliCa端末をかざすと、地図上に反映された駅が履歴中に存在する場合は、その経路を時間地図上で電車が動きます。履歴中に駅が存在しない場合は、任意の2駅をクリックするとアニメーションがはじまります。FeliCaに記録された交通機関の履歴情報を、不思議な感覚にさせる独自の時間地図と結び付けて、自分だけの東京鉄道地図を作り出す独創的なアイデアが気に入りました。ぐにゃぐにゃと地図自体が動くという体験は初めてで新鮮でした。
駅と駅の路線の繋ぎ目とアニメーションをもう少しスムーズにして、コンテンツ全体の見せ方や演出をブラッシュアップしていけば、話題のコンテンツになるのではないでしょうか
色々な駅で途中下車して履歴が溜まるのが楽しくなりそうです。このような賞を頂き大変光栄です。実際に制作をしてみて、FeliCaは、ユーザーと作品を繋げるインタラクションを考える上で、今までできなかった新しいことができる魅力的な素材だと思いました。このようなFeliCaや賞品として頂いたAdobe製品が、私にひらめきを与えてくれる場合もあり、そのときの妄想・「うふふ」に実直に、もっと面白いモノが制作できるよう、これからも励んでいきたいと思います。
【応募アプリケーションの実行環境】
【制作者】 もじゃもじゃ氏、ろっきー氏
【アプリの概要】
2台のおサイフケータイのFeliCa IDmの組み合わせより、持ち主2人の相性を占うゲーム感覚のアプリケーションです。また、携帯サイトにコメントを残すことができます。
ケータイを効果的に利用している点
相性診断はよくあるコンテンツですが、結果をWebtoで送信し、ケータイサイトにコメントするところに新規性が見られました。「モバイル部門賞」ありがとうございます。今回は、締め切り間近の開発ということもあり、FeliCaを操作する部分は基本的なことに留め、携帯サイトへの誘導におサイフケータイを有効利用するというコンセプトで進めました。実際の開発ではSDK for FeliCaに関するリファレンスやサンプルが充実していたため、FeliCaを操作する部分は順調に開発が進みましたが、それ以外で苦労しました。
【応募アプリケーションの実行環境】
「ドットフ絵リカ(ドットフェリカと読む)」
【アプリの概要】
たくさんのキャラクターを作成しておいて、wonderfl de プニョ×2画面でカードを交換したりすると楽しいです。ゲームで使うキャラをあらかじめ作成してFeliCaに記録しておき、ゲームで読み込んで使う、というアイデアがすばらしいです。
Flashはゲームでよく使われますし、ゲームではキャラが必須なのでいいですね♪
前から、FeliCa Liteの薄さに読み込みと書き込み機能があることにすごく可能性を感じていました。このような形で発表できたのは、色々な方のご協力があって実現できたためと思っております。
【応募アプリケーションの実行環境】
【アプリの概要】
org/)サービスを使って、イベントをすることがよくあります。イベント参加者の出席確認をするのに、FeliCaを使ってみました。後はカードをかざすだけです。
初めての方はリストからチェック
二度目以降は何もしなくても確認OK
イベントの出席確認を、誰でも持っているFeliCaを使って行うという発想がすばらしいです。一度認証を行えばATNDのIDとFeliCaのIDが紐付き、認証が引き継がれるというユーザビリティが優れています。「いるなう」は、既に勉強会でも利用されているとのことですが、勉強会以外にも、結婚式の2次会や再入場があるイベント等で利用できるという点にアプリケーションの発展の可能性があります。今後、さらに使いやすいアプリケーションに進化して行くことを期待しています。
【応募アプリケーションの実行環境】
【アプリの概要】
「西瓜の花」は、特定の駅に置かれることを想定して作られたインタラクティブアートです。駅に到着した人にSuica/PASMOをかざしてもらうことによって、出発した駅から到着駅(中心)に向かって1枚の花びらが描かれます。様々な駅からやってきた人々にSuica/PASMOをかざしてもらうことによって、到着駅を中心にいろいろな方向の花びらが描かれていき、やがて大きな一輪の花となります。
【応募アプリケーションの実行環境】
今後もコンテストや勉強会など、我々の取り組みを多くの皆さまに知っていただくための機会をご提供していきたいと考えておりますので、引き続きFeliCaとAIR/Flashのコラボレーションにご注目のほどよろしくお願いいたします。最後になりますが、不慣れな事務局を支えていただいたご協賛、ご協力各社の皆さまに、この場をお借りして深く御礼申し上げます。(アドビ システムズ社)の米国ならびにその他の国における商標または登録商標です。※ FeliCaは、ソニー株式会社が開発した非接触ICカードの技術方式です。※ Edyは、ビットワレット株式会社が管理するプリペイド型電子マネーサービスのブランドです。※ おサイフケータイはNTTドコモの登録商標です。※ その他本文中の会社名や商品名は、該当する各社の商標または登録商標です。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
大重美幸の「これ見落としてませんか
今月号の記事
大重美幸の「これ見落としてませんか
小野田智の「世界の制作会社からコンニチハ
テキストを自由にアニメーションさせたい、もっと美しい文字でテキストを表示したいと思ったとき、テキストフィールドでは難しい場合があります。その悩みを解決するのがFlash CS4から搭載された新テキストエンジンです。今回は新テキストエンジンを使うためのTextBlockクラスにチャレンジです。新テキストエンジンを使う。5)で新機能として搭載された新テキストエンジンを利用するためのクラスです。
いずれにせよTLFについてはCS4次期バージョンを待つことにして、TextBlockクラスの使い方と新テキストエンジンの利点を確認してみましょう
次のサンプルがテキストをステージに表示するだけの簡単な例です。簡単な例と言ってもTextFieldクラスを使った場合とはずいぶん違います。TextFieldクラスの場合は、TextFieldクラスで作ったテキストフィールドにストリングデータを入れるという2つのステップでテキスト表示を行いますが、TextBlockクラスの手順は3ステップあります。ここまではテキストフィールドの場合と同じですが、ここからが違います。テキストフィールドは表示オブジェクトなのでそのままステージに配置すれば終わりです。しかし、TextBlockクラスで作ったテキストブロックは表示オブジェクトではありません。テキストブロックに入れておいたテキストエレメントをステージに表示するには、テキストブロックから1行分のデータを取り出してテキストラインを作り、それを1行ずつ並べて表示するという手順を繰り返します。
まずバケツに水を溜め、その水をひしゃくですくって庭にまくというたとえでわかりますか
禁則処理、均等配置などが適用されています。次のスクリプトでは、まず最初にテキストエレメントtextElementを作成しています。テキストエレメントにはストリングデータとElementFormatクラスで作った表示書式を指定します。//テキストエレメントを作る。//テキストブロックを作る。//テキストブロックのコンテンツにテキストエレメントを設定する。テキストラインは表示オブジェクトなので、座標を指定して表示リストにaddChild()すればステージに表示できます。問題は2行目以降のテキストラインの作り方です。すると1行目の残りから次の指定の幅の分のテキストラインが作られます。これを同じ長さのテープを並べて貼っていくように位置合わせしてステージに貼ります。この操作をwhileステートメントを使って、テキストラインがnullになるまで繰り返せば、テキストブロックのすべてのエレメントを取り出してステージに並べたことになります。なお、テキストラインの間隔はascentプロパティとdescentプロパティの値に適当な値、ここでは5ピクセルを行間として足しています。ascentプロパティとdescentプロパティの値は、次の図で示すように行のベースラインまでの距離です。str += "その中にテキストやグラフィックスといったコンテンツを入れておきます。str+="そのテキストラインの座標、傾きなどを設定して表示します。//テキストエレメントを作る。//テキストブロックを作る。//テキストブロックのコンテンツにテキストエレメントを設定する。
//表示位置の行送り
縦書きで表示する。次の図のように、縦書きでは単純に文字が縦に並ぶだけでなく、句読点や促音などの表示位置が正しく右寄せになり、音引きも縦棒に変わります。半角の英数字は横に回転した向きになります。その他の基本的な考え方は先の横書きの場合と同じです。
違う点と言えば、縦書きの場合は行が右から左へと並ぶので、テキストラインのx座標の値を指定して行送りする点でしょう
str += "その中にテキストやグラフィックスといったコンテンツを入れておきます。str+="そのテキストラインの座標、傾きなどを設定して表示します。//テキストエレメントを作る。//テキストブロックを作る。//テキストブロックのコンテンツにテキストエレメントを設定する。
//表示位置の行送り(縦書きなので右から左へ進む)
複数の領域に横書きのテキストを流し込む。次のサンプルは2つの領域にテキストを流し込んでいる例です。スクリプトは少し複雑になりますが、基本的な考え方はこれまでと少しも変わりません。fillTextLineRect関数を定義してテキストラインの表示を行っていますが、ここでのポイントは、指定の領域に何行のテキストラインが入るかを先に計算して繰り返し回数を決めているところです。そして、1番目の領域が終わったならば、その時点でのテキストラインを2番目の引数として渡して続きのテキストラインを抜き出しています。1番目と2番目の領域は縦横サイズが違うので引数ではその情報も必要です。//四角形の領域に横書きでテキストラインを書き出す。//残りのテキストを2個目の四角形領域に書き出す。注意点としてはテキストブロックからテキストエレメントを抜き出したときに、それがいつnullになるかはわからないという点です。テキストエレメントを作っても、それがnullになった時点で処理を抜けるようにします。なお、このサンプルではfillTextLineRect()の第1引数で指定するスプライトで領域を示すと同時に、それぞれをテキストラインを追加するコンテナとしても利用しています。したがって、コンテナであるスプライトの座標や変形によってテキストの表示も変化します。その場合、領域の計算が狂ってしまうので、スプライトの変形はテキストラインを追加した後から行わなければなりません。アニメーションについては最後の例で示します。fig4 2つのスプライトの領域にテキストを流し込むように表示します。2つの領域にテキストを流し込んで表示します。str += "その中にテキストやグラフィックスといったコンテンツを入れておきます。str+="そのテキストラインの座標、傾きなどを設定して表示します。//テキストラインを表示したい四角形の領域を示すスプライトを作る。
//2個目の四角形領域
//テキストエレメントを作る。//テキストブロックを作る。//テキストブロックのコンテンツにテキストエレメントを入れる。//四角形の領域に横書きでテキストラインを書き出す。//残りのテキストを2個目の四角形領域に書き出す。
//四角形の領域
//テキストブロックの最初の行のとき
//残りのテキストラインを指定領域に入るだけ表示する。//次のテキストラインを作る。//取り出せるデータが終わったので処理を終了する。
円形領域への縦書きとアニメーション
最後の例は複数の円形の領域に縦書きのテキストを流し込んでいます。円形の領域にテキストを流し込むように表示するというのもTextBlockクラスらしい使い方ですが、ここでもう1つ注目して欲しいのは、テキストラインを追加しているスプライトを回転、拡大縮小、アルファの変化とアニメーションさせているところです。何ということのないアニメーションに見えますが、このような変形を行ってもテキストを表示できるという点がTextBlockクラスを利用する大きなメリットの1つです。なお、座標計算の問題から、このスクリプトではテキストラインのコンテナとして使うスプライトの変形を、テキストラインを追加したあとから行う必要があります。縦書き、複数領域へのテキストの流し込みについては先のサンプルとほとんど変わりません。このサンプルが難しく見える部分は円形領域にテキストを合わせるところですが、それも実際には中学レベルの算数です。円形領域に何行のテキストラインが並ぶかを計算して行間のx座標を調べ、そのx座標に対応する円周上のy座標を計算して行の長さを求めています。さて、今回はここまでです。
次回はさらにTextBlockクラスの機能について掘り下げてみましょう
テキストを円形領域に流し込み、回転、拡大縮小、アルファ変化のアニメーションを行います。テキストを円形領域に流し込み、アニメーションを行います。str += "その中にテキストやグラフィックスといったコンテンツを入れておきます。str+="そのテキストラインの座標、傾きなどを設定して表示します。//テキストラインを表示したい円形の領域を示すスプライトを作る。
//2個目の円形領域
//テキストエレメントを作る。//テキストブロックを作る。//テキストブロックのコンテンツにテキストエレメントを入れる。//円形領域に縦書きでテキストラインを書き出す。//残りのテキストを2個目の円形領域に書き出す。//円を拡大しながら回転させる。
//テキストブロックの最初の行のとき
//残りのテキストラインを指定領域に入るだけ表示する。//次のテキストラインを作る。//取り出せるデータが終わったので処理を終了する。
エッジニュースレター連載記事 : 大重美幸の「これ見落としてませんか
第2回 外部 swf ファイルのシンボルを利用する。第3回 配列の値の並べ替えをマスターする。第4回 FLV をウィンドウ/画面全体に表示する。
第5回 スクリプトでフィルタを適用する方法
第6回 柔軟・多彩・高速な画像処理を実現するシェーダーフィルタ
(おおしげよしゆき)
日立情報システムズ、コミュニケーションシステム研究所を経て独立
執筆、講師、ソフトウェア開発を行う。
趣味はサーフィンとジョギング
著著は約50冊
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
大重美幸の「これ見落としてませんか
小野田智の「世界の制作会社からコンニチハ
本記事では、Open Screen Projectの現状と今後の展望、そしてクリエイターへの影響について、アドビ システムズ のテクニカルエバンジェリスト・太田 禎一が解説します。今回のWMC2010で特徴的だったのは、スマートフォン分野の話題が注目を独占していたことです。
OSPのパートナー企業数が70社近くに
WMC2010では実際に動くFlash対応モバイル機器がAdobeブースだけではなく、OSPパートナー各社のブースにおいても数えきれないほど出展されていたようです。展示フロアの雰囲気を含め、こちらのビデオでご覧ください。」というお題でフロアを走り回っています。現在もまだチューニング作業は続いていますが、その途中の成果は、こちらのページに掲載されている実働デモビデオでご覧いただけます。
このようにハードウェアベンダーとして、あるいはプラットフォームやサービスとしてある意味互いに競合ともなり得る、70社近くもの企業がOSPに参加し、この時点で既に数多くの実機やプロトタイプ上でFlash Player 10
0が動き始めている。
これは何を意味するのでしょうか
そこには2つの側面があります。業界全体、あるいは少なくともOSP参加企業の共通認識として、一般のコンシューマーにいまのPCで得られるWebブラウジング体験を損なわずに「最高のWeb体験」をスマートフォンで提供することが求められており、そのためにはFlashが欠かせないということです。例えば市場規模が年間1,000億円ともいわれるソーシャルゲーム(FarmVille、サンシャイン牧場など)のほとんどはFlashで開発されており(the Edge newsletter 2009年11月号記事 参照)、それらをスマートフォンの世界にスムーズに招き入れることができるかどうかはプラットフォームにとって大きなビジネスインパクトをもたらします。もうひとつは「アプリ」です。Flashによってアプリ開発のハードルが下がることに対しての期待が非常に大きい、ということです。これはそもそも、とある日本の携帯キャリアさんが、それまでJavaでしかアプリケーションを開発できず、なかなかコンテンツが集まらなかった状態を、Flash Liteを搭載することで大幅にコンテンツを増やすことができた、という過去の事例にならっているとも言えます。ユーザーが自由にアプリケーションをインストールできるスマートフォンの世界では、どれだけ数多くの有力なコンテンツプロバイダーや開発者に自分のプラットフォーム上でアプリケーションをリリースしてもらえるのかが成功のカギとなります。OSPが参加企業の協力を得て順調に進行することで、Flash Platformは最終的に最も多くのスクリーンをカバーする、統一された開発・実行プラットフォームとなります。その予兆は既に現れています。このリストの中には、電子ブックリーダー、テレビ、セットトップボックス、タブレット、ネットブック等だけでなく、Touch Revolution社のNIMbleモジュール のような、自由に家電に組み込めるキットも含まれます。こちらのビデオをご覧ください。「Web」についてはApple社による、Safariブラウザーをプラグイン対応しないという事業判断がある現在、いかんともしがたいところです。
Webサイト運営者としては、当面はiPhone/iPadユーザー向けにはFlashを含まない代替画面(JPEG等)を別途用意してフォールバックする、という戦略をとるしか方法がありません(実際にAdobeのトップページはそうなっています)
そもそもPC向けのWebページを制作する際であっても、 Flash Playerをインストールしていないユーザーのために代替画像を用意し、切り替え表示をするのが普通ですので、それほど難しい対応ではないと思います。
では、単なる静止画像で置き換えるのが難しいタイプのインタラクティブなFlashコンテンツの場合はどうでしょうか
音声やビデオを含まない単純なロールオーバー効果やページナビゲーションなどのインタラクションであれば、Ajaxで似たようなものを別途用意することで充分に代替が可能ですし、IEを考えなければcanvasタグを使う事もできるでしょう
」ですか、ふむふむ
いま現在快適にFlashを見ることができるPCユーザーと、これから同じFlashコンテンツをモバイルで利用できるようになる、iPhone/iPad以外の膨大な数のスマートフォンユーザーすべてにペナルティを与えても、全体の幸福度が上がるのであれば
そこはご判断にお任せします(笑)
クリエイターはどうすれば
ひとことでいうと、活躍の場が大きく広がる。つまり、いま使い慣れた制作・開発環境やワークフローはそのままで、いままでは不可能だったスマートフォン向けのアプリケーションや、テレビ画面で実行できるウィジェットなどを作ることができるわけです。従来、スマートフォン用のアプリケーションを開発するには、Objective-C、C++、Java等のプログラミング言語と機器固有のローレベルAPIの理解、そしてそれぞれ存在したとしても環境ごとに大きく異なるメディアフレームワークの理解が必須だったのでした。それらが不要になります。また、いままでFlashなんか作ったことない、というグラフィックデザイナー、DTPデザイナー、あるいはビデオクリエイターにもチャンスです。なぜならば、Creative Suite製品の連携によって、カンタンに自分のクリエイティブをFlashに落とし込み、スマートフォンに持っていくことができるようになるからです。OSP参加企業は、いままでになく新鮮な企画やクリエイティブが彼らのプラットフォームに載ることを望んでいるはずです。とはいえ、よいことばかりではありません。マルチスクリーン時代の到来とともに、クリエイターには新たなチャレンジが提示されるようになります。例えば、スマートフォン、タブレット、PCと異なったスクリーンサイズのデバイスそれぞれに適応し、レイアウトや文字サイズを変更して表示するようなコンテンツやアプリケーションのニーズがこれから高まってきます。また、いくらFlash Playerが最適化されたとしても、CPU能力が劣る多くの携帯デバイスや家電機器では、コンテンツやアプリケーション自身が「軽く」動作するよう、パフォーマンスの最適化に最大の注意を払う必要があります。
最適化について興味深いことがひとつ
モバゲータウンやモバイル版GREEなどFlash Liteを使った携帯向けコンテンツが充実し、キャリア課金とあいまって巨大な経済圏をかたちづくっているのは、実は世界中で日本だけと言っても過言ではありません。デスクトップ用のFlash PlayerのサブセットであるFlash Liteの制限の中で、過去5年にわたってFlashコンテンツの最適化ノウハウをいちばん蓄積しているのは、実は日本のクリエイターなのかもしれません。スマートフォン向けのコンテンツ・アプリケーション開発においては、上述の最新ハードウェアアクセラレーション技術に加え、そうした企画・制作・開発ノウハウが必ず役に立つと思っています。Flash Platformをかたちづくるランタイムやフレームワークの進化に加え、これらの新たなチャレンジをより楽に、楽しんで解決できるよう、Adobeは次期Creative Suite製品を皮切りに、今後数年にわたってツール側の対応を強化し、クリエイターをアシストしていきます。具体的な機能や新しい提案は、今後続々と発表される次期CSの情報を楽しみにしていただければと思います。1は、特定の性能要件を満たした端末でないと快適に動作しません。具体的にはNexus Oneなどのスマートフォン以上の性能がターゲットとなります。ですので、現在携帯電話マーケットの大部分を占めるボリュームゾーンの携帯電話には引き続きFlash Liteあるいはその後継ランタイムが搭載され、現在のFlash Liteコンテンツ経済圏はそのまま維持される見込みです。これについては、近いうちになんらかの発表をさせていただけると思っています。イベント告知の即日に申し込みが終了となってしまい、多くのお客様から『なんとかイベントを見る事は出来ないか』とのお問い合わせを数多く頂戴いたしました。苦肉の策として、急遽イベントのUstream中継のボランティアを募り、ライブ中継を実施いたしましたが、ご満足頂けなかった方も多かったのではないかと思います。ありがとうございました。
期間限定*でのご提供となりますので、アクセスはお早めに
容量が上限に達し次第終了となります。
上条さんのブログ(日本語)
旧マクロメディア社でDirector、Flashなどインタラクティブなクリエイティブ ツールおよびWebデザイン・開発ツールのプロダクトマネジメント・マーケティングを担当
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
注目の新機能ベスト10
今月号の記事
“つくる・あそぶ・つながる”スペシャルサイト
この幅広いユーザ層を網羅する数々の改良点の中から、注目の新機能ベスト10をお伝えしましょう
注目の新機能ベスト10
Spry ウィジェットによるインタフェイス設計
Spry エフェクトによる視覚的な画面遷移
高度なブラウザ互換性チェック
すぐにCSS による制作が始められる既製のCSS レイアウト
今、より多くのユーザから「Ajax に挑戦してみたい」 という意見が寄せられています。しかし、Ajax 開発をマスターするには数多くのハードルがあるのも現実です。Ajax フレームワークに関しては、これまでブラウザの互換性に関する問題が数多く解消されてきた一方で、Ajax の容易な習得を妨げる難点が新たに登場しています。
この点は、特に技術的な専門知識の少ないユーザにとって顕著だといえるでしょう
我々が求める簡潔で使いやすいフレームワークが見あたらなかったため、アドビは自らAjax 用のSpry フレームワークを開発し、これを Adobe Labs より無償で提供してきました。Spry フレームワークは、Web デザイナーと Web デベロッパーの両方を念頭に開発されており、Web デザイナーは HTML や CSS のパ ターン的な作業を踏襲することで、慣れ親しんだ方法で作業を進めることができます。一方の Web デベロッパーに対しては、高度な動的インタラクティビティを実現するためのパワーが提供されます。Dreamweave CS3 のビジュアルツールを利用すれば、わずか数クリックのマウス操作で次のような Ajax 機能の組み込み作業を簡単に進められます。Spry データを使うことで、ドラッグ&ドロップ操作で Web ページに対して簡単に XML データを統合できます。XML は現在、RSS フィードやデータベースからアウトプットなど、 多岐にわたる分野で活用されています。こうしたデータを Web ページ内で表示するばかりでなく、ソートしたり、特定の情報だけを抽出するといった処理も容易に行えます。
Spry ウィジェットによるインタフェイス設計
ウィジェットには、リスト・テーブル・タブ・フォーム検証・リピート可能領域といったインタフェイス要素があらかじめ用意されており、手軽に Web ページへと追加できます。
Spry エフェクトによる視覚的な画面遷移
Web ページにリッチな視覚的な画面遷移を組み込める Spry エフェクト
その種類も発光・縮小・フェード・ハイライトなど多岐に渡ります。Spry ウィジェットと組み合わせることで、Web ページ上で動的なデータ表示が可能になります。なお、コーディング派のユーザは、Dreamweaver に装備されている Spry 対応のリッチコードヒント機能やハイライト機能を駆使して効率良く作業を進められます。
アドビとマクロメディアが合併したことによるユーザにとってのメリット
しかし、これまでの作業では単にコピー &ペーストすれば終わりというわけにはいかず、必要なパーツを選択してからコピー、ドキュメントを新規作成してからペースト、ドキュメントを保存してから圧縮設定を調整、そ して場所を選択というように複数の手順が必要とされていました。今回我々は、この重要なワークフローの作業効率アップにも注目しています。圧縮設定とファイル名を選択しておけば、ドキュメントの挿入ポイントに、ペーストされた画像が表示されます。この際、Dreamweaver はどれが画像の元ファイルであるかを管理しているので、オリジナルファイ ルをすばやく開いて編集可能になります。なお、これらのワークフローは Adobe Fireworks CS3 との間でも同様に利用できるので、Dreamweaver は2つのプロフェッショナルデジタル画像編集アプリケーションのどちらに対しても、包括的なソリューションを提供することができます。
高度なブラウザ互換性チェック
ブラウザ間の CSS 表示を統一する。ブラウザの互換性に関しては、数多くの Web デザイナーや Web デベロッ パーから、ブラウザ毎の問題点を見つけ出し、その原因を特定して問題箇所を修正する、という決してクリエイティブとは言えない作業に対して、多くの時間を割いているという声が寄せられています。
これは非常に無駄な時間といえるでしょう
Dreamweaver CS3 は、主要ブラウザで表示バグを起こすコードを自動的に検出することができ、その問題の名称をユーザに表示するとともに、問題となるコード箇所を特定・表示します。これによって Dreamweaver CS3 は、実情に則した CSS 問題を自動検出できる初めてのツールとなり、今後クロスブラウザ開発のあり方に変革をもたらすことが予見されます。従来のコード検証ツールは、通常、XHTML や CSS 規格との互換性を検証しているに過ぎません。しかしこれではブラウザが標準規格に適合していない部分や、規格自体が不明瞭なところには対応しきれず、問題の半分しか解決されていないのと同じことになります。そこでアドビでは、ブラウザの互換性に関する問題解決策を掲載した、ユーザ参加型コミュニティである CSS Advisor サイトへのアクセスを Dreamweaver CS3 に組み込むことで、常に最新のブラウザ互換性情報を無償提供します。
図3 ブラウザの互換性をチェック
ユーザの方々からは、従来のテーブルを使ったレイアウトから CSS レイアウトへの移行に手間取っているという声も寄せられていました。CSS を使ったレイアウトのメリットはすでに広く浸透している中、今必要とされているのは、皆が CSS を使ったレイアウトに身近に取り組めるようになることだという結論に至りました。Web に公開されているページを見渡すと、ページのレイアウトとしては、1列、2列、3列、固定幅、リキッド幅、伸縮自在幅といったいくつかの基本的なパターンに分類することができます。もちろん、サイトにはそれぞれのオリジナリティがあるとはいうものの、大半のサイトはこれらの列構成がベースになっています。つまり、レイアウトをその都度、ゼロ から作らなければならない理由は存在しないのです。これらのレイアウトは、すべての主要ブラウザで正しく表示されるよう、ひとつずつ動作が確認されています。これからは既製のレイアウトを使用して作業を開始し、独自の仕様に作り込んでいくことが可能です。また、各レイアウトには、 カスタマイズの仕方を容易に習得できるよう、詳細な解説が含まれています。場面によっては、CSS を使ったレイアウトが複雑になることもありますが、各ファイルに含まれた詳細な コメントを参照することで、ちょっとした編集(列幅の調整など)が簡単にこなせるようになるとともに、CSS レイアウトをマスターするための基礎を築くことも可能です。より多くのユーザが CSS レイアウトに移行するにつれ、より多くの CSS ルールが作成され、 より多くの時間がこの作業に費やされています。つまり、従来にも増して、CSS を効率良く管理するためのツールが求められているのです。Dreamweaver CS3 では、ルールをドラッグ&ドロップ操作で移動できるので、CSS ドキュメント内での移動はもちろん、他の CSS ドキュメントへの移動や、HTML ページの最初のスタイルタグから別の場所への移動も、すべて手軽に処理できます。また、インラインで記述されているスタイルを、わずか2ステップで CSS ルールに変換することも可能です。なお、これらと同じ機能には、コードビューのコンテキストメニューやコーディングツールバーからでもアクセスできます。今日の Web サイト制作では、ブラウザによる閲覧に加えて携帯電話からのアクセスへの十分な対応が必要になってきています。これによって、携帯電話をはじめとするモバイル機器向けコンテンツのデザイン、各キャリア、各端末で異なる表示能力や回線速度に応じたプレビュー、動作確認といった一連の作業 を、驚くほど効率良く進めていくことが出来ます。また、日々増加し続ける端末のプロファイルは、オンライン上を通して簡単にアップデートすることが可能です。
皆さんにもお分かりいただけたでしょうか
今回我々は、かなりの成果をあげられたのではないかと自負しています。さらに詳しい情報については、Dreamweaver の製品紹介ページや機能ツアーを参照してください。
筆者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
注目の新機能ベスト10
今月号の記事
“つくる・あそぶ・つながる”スペシャルサイト
さらに充実したデザイン・アニメーションツールを利用することで柔軟なクリエイティビティが発揮でき、新しくなったActionScriptのプログラミング機能を利用することで、生産性の高い開発環境が実現します。さらに、他のアドビデザイン・開発ソフトウェアとの連携性が大幅に強化されているので、今までと比べ物にならないくらい高い生産性で作業が進められるようになります。
注目の新機能ベスト10
スキンの入れ替えもできるユーザインタフェイスコンポーネント
充実したビデオエンコーディング機能
時間節約に貢献する数々のプログラミングツール
デザイナーやデベロッパーは今後、使い慣れたこれらのアプリケーションでの作業内容を無駄にすることなく、Flash のパワフルなデザイン・開発環境も活用できるのです。ステージ要素の動作を ActionScript でプログラムとして定義すれば、ファイルサイズが抑えられるだけでなく、より柔軟かつ細かく要素を制御できます。たとえば、ActionScript でアニメーション動作が定義されている場合、エンドユーザの操作に合わせて、その動作内容を変化させるといったことさえ可能です。これまでもデザイナーやデベロッパーの多くがこの機能を認識していたものの、コードの複雑さや記述手間が敬遠される理由となっていました。0 コードへと瞬時に変換できます。つまり、通常のタイムライン操作でアニメーションを作成するだけで、この動作を再利用・再編集可能なプログラムコードに変換することができるのです。
また、タイムラインからコピーしたモーションがコードとしてペーストできるので、初心者でも手軽に ActionScript を習得できるようになります(図2)
新しいインタフェイスは見映えが良いだけでなく、限られた画面の中で作業スペースを拡充する点で注目に値します。皆さんもご存知のとおり、作業スペースはいくらあっても足りません。ノートPC を使用している場合、この問題はさらに深刻です。Flash CS3 Professional には、ドッキングとグループ化の可能なパネルが採用されているので、パレットやウィンドウの重複を避け、作業スペースを最適化することが可能です。0 による新次元の開発効率を提供します。0 は初心者に優しいだけでなく、プロフェッショナルに対して強力なプログラミング環境を提供する適用範囲の広い開発言語です。0 によるコンテンツ作成・動作確認は、今までになく簡単です。新しくなった ActionScript デバッガでは、実行時のさまざまなプロパティが確認でき、従来より多くのフィードバックとさらなる柔軟性が得られます。また新しいデバッガは、デバッグモードのワークスペースに表示される複数のパネルから構成されるので、従来のように1つのパネルに縛られることなく、異なるデバッグタスク間をスムーズに行き来することができます。デバッグモードに入ると、Flash がデバッグモードのワークスペースを呼び出し、スタンドアローン Player に SWF ファイルを読み込みます。Device Central CS3 には、携帯電話をはじめとするモバイル機器のスキンとデバイスプロファイル(四半期毎に更新)が組み込まれており、モバイルコンテンツの制作を強力に支援します。
これからはインタラクティブな Flash アプリケーションやリッチユーザインタフェイスをはじめとする、魅力的なモバイルコンテンツも簡単にデザイン、プレビュー、動作確認できます(図3)
プロのデザイナーは過去何年もの間、Adobe Illustrator に装備されたベクトルドローイングツールを愛用し続けてきました。またベジェ曲線のコントロールポイントを操作する際には、Illustrator で使い慣れたキーボードショートカットとオプションがそのまま使用できます。
スキンの入れ替えもできるユーザインタフェイスコンポーネント
Flash CS3 Professional には、スキンを手軽に入れ替えられる軽量かつ最新のコンポーネントが用意されており、これを利用してインタラクティブコンテンツを制作・デザインできます。0 で記述されており、ユーザインタフェイス用のコンポーネントとしては、ボタン、プログレスバー、チェックボックスなどが用意されています。また、ビデオ用のコンポーネントも充実しています。
これらのコンポーネントはとても簡単にカスタマイズできるので、これからはインタフェイス要素の見映えを変更するためだけにコードを記述する必要はなく、単に変更したいコンポーネントの状態をダブルクリックして、インタフェイスコンポーネントのデザインを編集するだけで済みます(図4)
図4 UI コンポーネントのスキンの入れ替え
つまり、たとえシンボルが複雑な入れ子状になっていたり、ActionScript が記述されていたとしても、Flash Player での再生と同じ体験が得られるよう、すべての要素を書き出すことができます。
充実したビデオエンコーディング機能
Web で表現できるコンテンツは種類・内容ともに進化を遂げ、しかもブロードバンドの普及が進む今、さらに多くのデザイナーやデベロッパーが、ビデオを Flash コンテンツに組み込むことを実践しています。Flash ビデオは、Web でのビデオ配信のあり方に大きなインパクトを与えてきた成果が認められ、先頃エミー賞を受賞するに至ったほどです。これには 2つの方法があり、1つ目は動画コンテンツをプロジェクトに読み込むと同時にエンコーディングする方法です。これはプロジェクトに 1つ 2つのビデオを読み込むような場合に最適です。
時間節約に貢献する数々のプログラミングツール
アクションパネルとスクリプトウィンドウに、一部のコードの表示・非表示を切り替えるための折りたたみツールを実装
スクリプトウィンドウに、選択したコード部分全体にコメントを適用するためのツールを追加
0 に、新しい概念である「ドキュメントクラス」を追加
ドキュメントクラスは、メインのタイムラインに関連付けられるクラス定義です。メインのタイムラインが初期化されるとともに、このクラスが生成されます。
ライブラリのシンボルにクラス名を割り当て
これにより、シンボルを動的に初期化してそのインスタンスを作成できるので、リンケージ識別子を設定する必要がなくなります。
コンパイラエラーパネルに表示されたエラー項目の該当コードにジャンプ
エラー項目をダブルクリックすることで、アクションパネルまたはスクリプトウィンドウの該当エラー箇所にジャンプできるようになりました。今回の最新リリースがいかにエキサイティングであるか、皆さんにもお分かりいただけると確信しています。ここで紹介した内容はあくまで概要にすぎません。さらに詳しい情報については、Flash の 製品紹介ページや機能ツアー を参照してください。
筆者について
1980年代後半に Web と出会って以来 Web への熱情が冷めることなく、これまでの大半の時間を Web 上で顧客が想像力と創造力を発揮することを支援するために過ごす。
またこれまでに、世界中の無数のユーザ、デベロッパー、デザイナーに対してプレゼンテーションを行い、Flash が何を可能にするのかを紹介するとともに、Flash コミュニティの成長やサポートを側面から支援
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
注目の新機能ベスト10
今月号の記事
“つくる・あそぶ・つながる”スペシャルサイト
そしてさらにベータテスターの皆さんが示した情熱は、特筆に値するでしょう
ここで取り上げる機能の数々を見れば、今回のリリースがFireworks史上最も重要であることがお分かりいただけると思います。
複数ページのサポート
注目の新機能ベスト10
複数ページのサポート
9スライスの拡大・縮小機能
階層化されたレイヤー管理
共有ライブラリによるアセット管理
従来は、Web サイトのレイアウトやモックアップ、バリエーションを保存するためにフレームを使用するのが一般的でしたが、新バージョンでは 1 つのドキュメント内で複数のページを追加できるため、フレームを時間軸に沿ったアニメーションや JavaScript のロールオーバといった、本来フレームが得意とする用途に専念させることができるようになります。Fireworks CS3 がページ機能をもったことで、各ページに独自のスライス、ロールオーバ、画像解像度、キャンバスサイズを設定した Web サイトデザイン、および Web アプリケー ションの配置が可能になります。また、これらのページ間には簡単にリンクの設定ができるので、Web サイトやリッチインターネットアプリケーション(RIA)のレイアウト上で、ナビゲーションがどのように展開されるのかも表現できます。
さらにページ間でレイヤーを共有したり、キーボードショートカットやキャンバスウィンドウのクイックジャンプメニューを利用して、ページ間をすばやく移動することも可能です(図1)
9スライスの拡大・縮小機能
この機能によって、これまでベクトルオブジェクトやビットマップオブジェクトを拡大・縮小する際に発生していた問題が解決されるのです。
これまではこれらのオブジェクトを拡大・縮小するとオブジェクトのプロポーションが崩れていましたが、この「賢い」拡大・縮小機能を利用すれば、オブジェクトのどの部分の大きさを変化させ、どの部分を一定に保つかが指定できます(図2)
たとえデザインの初期段階では想定しなかった量のコンテンツが発生しても、これからは 1 つのビットマップを 3 つ、あるいは 9 つのパーツに分割してサイズを調整できるので、コンテンツをレイアウトに収めるという単調な作業が不要になります。
図2 サイズの拡大例(上)と、9 スライスの拡大・縮小機能のガイド(下)
階層化されたレイヤー管理
新バージョンではレイヤーパネルが大幅に改良されています。
これからはレイヤー内に複数のサブレイヤーを作ることも可能です(図3)
これにより、非常に複雑な構成のモックアップを扱う場合でも、サブレイヤーを使用して手軽に各パーツに名前を付けたり、整理することができます。また、Photoshop や Illustrator のファイルを読み込む際には、レイヤー階層情報が維持されるので、その都度レイヤーを整理することなくスムーズに編集作業に取りかかれます。
図3 階層化されたレイヤー
アセットを Flex Builder に読み込む際には、コンポーネントに設定されたスタイルやレイアウトの情報がそのまま維持されます。
ファイルやフォルダを参照・操作するための新しい体験
画像に対する各種コマンドの実行や バッチ処理も Bridge を使えば簡単です。
これによって PSD ファイルの読み込み・書き出しの際に、これらのブレンドモードはもちろん Photoshop のレイヤー効果もそのまま維持されます(図7)
また新しくなった読み込み機能は、Illustrator のパターン、レイヤー構成、透過処理はもちろん、リンクされた画像もサポートしています(図8)
Fireworks CS3 ではボタン、グラフィック、アニメーションシンボルなどのリッチシンボルをすべて 1箇所に集約して保管・アクセスできます。メニューコマンドの「共有ライブラリに保存」で、プロジェクト間で共有するアセットを共有ライブラリに保存しておけば、さらに簡単にデザインの一貫性が保てるようになります。また、この機能は開発チームが利用する共有ライブラリを標準化するためにも有効なので、共同作業時にシンボルの保管場所が統一できなかったという従来の問題も解決できます。
Web サイトや Flash モックアップ、Flex アプリケーションなどを作成する際には、ユーザインタフェイス要素の状態が制御できる既製のリッチシンボルを利用することで、高い作業生産性を発揮できます(図10)
リッチシンボルのプロパティは、新しいシンボルプロパティパネルの中で手軽に変更できるので、どのレイヤーの表示・非表示を切り替えなければならないかを把握したり、オブジェクトのグループ化を解除したりといった必要がありません。リッチシンボルとは、つまるところ JavaScript ファイルによってそのプロパティをカスタマイズできるグラフィックシンボルです。スクリプティングに自信のないユーザのためには、基本的な JavaScript を生成するためのコマンドも用意されています。これらは Fireworks コミュニティからの貢献によって実現したものばかりです。新しいパネルとしては、ベクトルオブジェクトの編集機能が充実した「パスパネル」と、配色スキームの計画・作成およびオリジナルカラーパレットが作成できる「カラーパレットパネル」(図13)が含まれています。また Spry、HTML、Flash を使ったスライドショーが生成できる「スライドショーを作成」パネルと、リッチシンボルの作成・カスタマイズ時に JavaScript を自動生成する「シンボルスクリプトを作成」パネルも装備されています。
図13 新しいパスパネル(左)とカラーパレットパネル(右)
ここで紹介した Fireworks CS3 の新機能について、皆さんにもその良さを理解していただけたでしょうか
なお、この記事で紹介したのは最新バージョンのごく一部の機能にすぎません。さらに詳しい情報については製品紹介ページと機能ツアーを参照してください。
筆者について
レイクタホでスノーボードを楽しむ時間以外は、カリフォルニア中をハイキングしたり、サンフランシスコを探索して時間を過ごす。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
注目の新機能ガイド
最新のOS/ハードウェア環境をサポートし、インタフェイスが大幅に改良された新しいDirectorは、今日的なオーサリング環境として飛躍的にスケールアップしています。Flashコンテンツを取り入れたネットおよびCD / DVD向けオーサリング、まったく新しい物理演算エンジンによるリアルな3Dネットゲーム、Unicodeサポートによる多国語対応のeラーニング教材を開発など、応用と表現の幅が格段に広がった最新のDirectorをぜひチェックしてください。
使いやすさと最新技術が融合した最新ベータバージョン(英語版)を最速プレビュー
Web / RIAデザイン開発の必須機能を備えた最新ベータバージョン(英語版)を紹介
その“歩き方”をお教えします。
多数の応募作が集まる中、AIR担当者に聞くコンテストに関する一問一答インタビュー
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。4(Tiger)が登場し、また Mac のハードウェアはインテルプロセッサに移行するなど、OS・ハードウェア環境が大幅に進歩しました。性能が格段に進歩した OS とマシンで効率よく開発が行えるだけでなく、そうしたモダンな PC プラットフォームを持つユーザに対してもコンテンツを提供できるようになり、より広範囲なマーケティングが可能となります。
アドビらしいユーザインタフェイスに変身
Director 11 では、他のアドビ製品と同様のユーザインタフェイスを採用し、直感的でわかりやすい操作性、高い生産性を実現しています。たとえば、ウィンドウのドッキング機能やタブビューをサポートしているほか、ムービーアセット管理機能も改善されています。また、スクリプトブラウザも強化され効率よくプログラミング作業が行えるようになっています。たとえば、ダブルクリックで Lingo の関数やイベントなどを挿入できるようになったほか、コードスニペット機能が追加され、使用頻度の高いコードを簡単に管理・流用することが可能です。
マウンテンバイクのレースゲーム
ボックスやタイヤなどの障害物に衝突した際の表現に AGEIA PhysX が使われています。DirectX はゲームやマルチメディア用のコンポーネントで、バージョン9では 3D 関連が強化されており、処理速度や描画速度が向上しています。コンテンツ配信にインターネットを利用するのが当たり前となった現在、マルチメディアコンテンツのマーケットは国内だけでなく世界中を視野に入れることが可能となりました。その際に乗り越えなければならないハードルの1つが、他国語へのローカライズです。これにより、Director 11 で作成したゲームやアプリケーション、eラーニング教材などを簡単にさまざまな言語へとローカライズすることが可能です。また、テキスト描画に関しては、テキストレンダリングエンジンが強化されており、コンテンツ内の文字がくっきりと見やすく表示されるようになっています。
0 はサポートしていません)
ビットマップフィルタやブレンドモードを使ったグラフィック表現、そしてインタラクティブなビデオなど、Flash CS3 ならではのコンテンツを取り入れることで、Director での表現の幅が広がります。Directorを使って高度なオーサリング/コンテンツ開発に携われているクリエイターから、Directorに対する思いと、その未来についてコメントをいただきました。
その後、ソニー株式会社勤務などを経て、英国ロンドンに本拠を置くクリエイティブ集団 TOMATO に所属
インターネット広告やコーポレートアイデンティティなどの分野でインタラクティブな作品を発表
その他、アーティストとしての作品制作や文筆活動も行う。十数年使っていますが、主にキオスクや CD-ROM などの非オンラインメディアでインタラクティブな作品を制作する時に使っています。他にも、アイデアのスケッチにも使っています。
最新バージョンがリリースされましたが、今まで通りで、完成度が上がっていればうれしいです」
千房けん輔(エキソニモ)
ウェブやインスタレーションなど多方面で活動を展開しているアートユニット「エキソニモ」メンバー
思い切って他の技術を取り込んでスクリプトから連携とかエディットできる部分に力を注ぎ込んだ統合センターみたいなソフトに向かってほしいですね
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
をお持ちの方は、ダウンロードの際にパブリックベータ版のシリアルを入手することで、正式版が登場するまで試用できます(シリアルNo
がない場合は2日間のみ試用可能)
チームワークで、個人作業で、飛躍的生産性向上が可能に
多くの Web デザイン会社では、ひとつのプロジェクトに複数のマークアップ・エンジニアの方々がチームを形成し、プロジェクトを遂行しています。
時には、複数のプロジェクトが同時進行することも多々あるのではないでしょうか
そうした中、チーム内の誰かが作りかけのサイトを引き継いで完成させなければならないこともあるでしょう
または、昔作ったクライアントの Web サイトをメンテナンス/アップデートする仕事もあるかもしれません。デザイン・ビューで調べたい部分にマウスを乗せて、コンテキスト・メニューから「Code Navigator」を選びます。すると、そこで使われている CSS がすべて別のポップアップ・ウインドウに表示され、そのウインドウ内の CSS のエレメントをクリックすると、直接その CSS ファイルが表示・編集が可能になります。
今までは、コードに変更を加えるたびに一旦保存して、ブラウザでプレビュー確認し、コードの修正しては保存、またブラウザでプレビュー
という繰り返し作業だったのが、「Live View」ボタンを押すだけで、コードを保存しなくてもデザイン・ビューで確認できるようになりました。このWebKitは、W3C標準に非常に近いレンダリングをするエンジンです。
今後新しいバージョンのブラウザーが出てきても、目指すところはW3C標準だと思われますので、今からW3C標準に沿ってサイトを構築すれば、後々のメンテナンス作業の負担も軽減できるでしょう
こうすることで、生産性がより向上するわけです。
初心者にも分かり易く
そんなに構えないで、肩の力を抜いて、Dreamweaver でページデザインを始めてみましょう
高い山を登るにも、まずは最初の一歩を踏み出さないと先には進めません。習字でも陶器でもそうですが、まず初心者の方は、プロの作品の模倣から始めるのが近道です。デザインの感性の部分は、ここでは割愛させていただきますが、コードは模倣が可能です。
デザイン事務所の先輩やプロの方が、どのような構成をしているのか見習って、少しずつ数値を変更していきながら、自分のサイトをまずひとつ完成させてみませんか
XML を作らなくても、HTML のテーブルなどをデータとして扱い、ダイナミックなサイトを作ることができます。
もうテキストエディタに戻れない、その理由
これにより、デバッグ作業の時間も短縮できます。ですので、ひとつのビューでコードの上の部分を見ながら、もうひとつのビューで他の部分を編集することもできますし、2つのビューに別々のファイルのコードを表示・編集できます。しかも最近の流行りの横長のワイドディスプレイにも対応しており、上下分割だけでなく、左右にも分割してコーディング作業が可能になりました。今まで、ソースコードのバージョン管理で悩んでいた皆様の問題を解決する機能です。なお、現在はベータ版ですので、機能の中には正確に作動しない個所もあります。また、最終的な製品版では機能の仕様変更などがあるかも知れませんので、ご了承ください。常に「お客様第一」を唱えつつ、品質改善、パフォーマンス向上、使い易さを最重視した製品作りを心がけている。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
x をターゲットとしたAdobe AIRアプリケーション、コンテンツを募集します。1ベースのアプリケーションも応募対象に含めます。※ただし、優秀作品の応募多数の場合は、急遽賞を設ける可能性もあります。多数の応募が集まる中、いよいよ6月6日(金)をもって応募締切となります。
「はじめてのAIRアプリ開発「知っ得
おかげ様で、すでに多くの方々に Adobe AIR の開発にチャレンジしていただき、ご自身で、またクライアントへの提案で Adobe AIR を活用いただいているケースも多く耳にします。ここからは、アドビで Adobe AIR を担当している轟 啓介に、締切間近の当コンテストの魅力、現在までのステータスをインタビューしましたので、お伝えします。Adobe AIR の登場によって、Web デベロッパーは自分の活躍の場を Web からデスクトップへ簡単に広げることができるようになりました。Web ブラウザの制約に縛られることなく、もっと自由なアプリケーション開発の場が与えられたわけです。ここまで聞くと「お〜、何か面白いものがいろいろと作れそうだ。
」と希望に胸を膨らんできますが、それと同時に「でも、何を作ろう
」と思ったりもします。つまり、自由度が上がった分、何を作るかというアイデアがとても大事なファクターになるわけです。せっかく Adobe AIR という新しい環境を手に入れたのだから「オリジナリティ溢れるアプリケーションを作りたい」「世の中をアッと言わせるようなアプリケーションを作りたい」と頭を捻ることになると思います。
さらに、そうやって生み出された苦心の作、会心の作を出来るだけ多くの人に見てもらいたいと思うのが、Web という開かれた世界をデベロップメントしてきた方の人情というものではないでしょうか
それがエンタテイメント系のアプリケーションなら当然ですし、業務アプリケーションにおいてもデザイナーや開発者の見てもらいたい「こだわりポイント」というものがきっとあるはずです。AIR コンテストは、日本中からさまざまなバックグラウンドを持つ、多くの挑戦者が集い、Adobe AIR というキーワードの下にお互いのアイデア・技術力を競い合う祭典なのです。AIR アプリケーション企画者・開発者という新しいジャンルの登竜門として、ぜひご参加ください。
コンテスト応募者に期待することは
それに加えて、Adobe AIR アプリケーション上でさまざまな Web 上のサービスをマッシュアップしたり、AIR 内蔵のローカルDB(SQLite)を使ったり、ローカルのファイルシステムにアクセスしたりと、アイデアを実現するための選択肢はいろいろとあります。しかし、これらすべてを使う必要は決してありませんし、極端に高度なテクニックを使う必要もありません。大事なのは、確固たるコンセプトや独創的なアイデア、それを実現するためのしっかりとした技術力です。そして、美しく分かりやすいユーザインタフェイスにも期待したいところです。毎日起動したくなるようなAIRアプリケーションをぜひ目指してください。
現在までにどのような問い合わせがありますか
AIR コンテスト事務局を通じて、また私に直接連絡があったもの質問を、ここでいくつか紹介しましょう
Q:どのような審査基準か
審査員には各種大手メディア、ユーザーコミュニティリーダー、制作プロダクションの方など、Adobe AIR を取り巻くバラエティ豊かなメンバーがそろっております。その中でも Flex User Group の横田審査員の言葉を借りれば「今までブログで取り上げられたことが無いような新しいアプリケーション、発想を期待する」とのことです。アイディア勝負、見た目インパクトあり、明日から業務で即利用したい。さまざまなシーンで利用できる Adobe AIR ならではのユニーク、オリジナリティ溢れたアプリケーション、サービス、ガジェットを期待します。
Q: 申し込みの際に、クライアント名、開発者名、どちらで応募すればよいか
A: クライアント様の了承が得られれば、開発者様のお名前も前に出る形で応募ください。「われこそが次世代の AIR 開発プロダクション」と名乗っていただく良い機会です。
1 で応募しても大丈夫か
1 パブリックベータもリリースされていますし、応募対象にも含まれております。0だと日本語入力できないということで躊躇されていた方々にも応募いただけるよう間口を広げました。厳選な審査を通過した栄えある優秀作品の表彰式と、受賞者である Adobe AIR クリエイター/デベロッパーの開発環境、開発 Tips をご紹介いたします。また、第一線で活躍する審査員の方々によるパネルディスカッションを予定しています。ぜひ奮って参加ください。
1999年、早稲田大学理工学部を卒業後、大手印刷会社に勤務
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
選ぶ条件として「無料」「オープンソース」「Web ベースのユーザインタフェイス」といった項目はかならず挙げられるでしょう
そのうえ従業員から「独自仕様のアプリケーションは使いたくない」という要望があるかもしれません。それでもこうした条件を満たす CMS は数多くあり、1つを選ぶことはなかなか難しいものです。あなたが構築しようとしているのが次世代のソーシャルネットワーキングサイトであろうと、あるいは個人のブログであろうと、そのためには CMS が必要となります。CMS を選ぶ際のコツは、単に高機能な CMS を探すのではなく、自分のプロジェクトに何が必要なのかを考え、それに適した CMS を見つけることです。個人的な利用体験を元に、これらの共通点やそれぞれの特徴について説明していきますので、みなさんがオープンソース CMS を選ぶ際の手助けになれば幸いです。そして、OS に依存することなく使用することができます。オンラインコミュニティがあり、フォーラムを使った無料サポートを提供している。デベロッパーは、新機能を追加するためのモジュール開発に参加できる。生成する URL の文字列は、人間が読むことができ、しかも検索エンジンフレンドリーである。テーマやテンプレートを用いてページデザインを更新できる。翻訳や多言語コンテンツが統合されている。
これらの CMS は、たとえば以下の用途に使用できます:
以上のように5つの CMS には多くの共通点がありますが、各 CMS には固有の特徴と制限事項もあります。
それでは、各 CMS の特徴を解説しながら比較してみましょう
Drupal は、より多様な機能を持っています(それらの機能が必要かどうかは、あなた次第ですが)
サイトナビゲーションは簡単に作成できますし、シンプルなサイトであればすぐにでも公開できます。テーマテンプレートを使って簡単にサイトのレイアウトを更新でき、モジュールを使って機能を追加することができます。
システムワイドなコンテンツのバージョニング
(アクティベーションキーを使った)メールの検証
他言語の人には少々つらいかもしれませんが、ドイツ語セクションでは活発なコミュニケーションが行われているのです。Drupal には詳細なオンラインドキュメントが用意されており、フォーラムでは活発なコミュニケーションが行われています。Drupal を試した感想としては、「フレキシブルでアクセシブルでありながら、パワフルなソリューションとして非常に広範囲のプロジェクトに手軽に導入できる」ということです。豊富な機能セットが用意されています。ただ、シンプルなブログを構築したいという目的に対しては、高機能過ぎるかもしれません。他の CMS とは違い、Drupal はスケーラビリティの向上のために、いくつかのデータベースレプリケーションを実装しています。Drupal は PHPテンプレート・テーマエンジンを実装しており、オリジナルのテーマを作ることができます。PHP コードスニペットを使ってサイトの見た目を定義し、そのコードはプレゼンテーション層に保持されるようになっているので、デザイナーは機能実装用のコードを触ることなくページレイアウトをデザインすることが可能です。モジュールのインストール後に行う、権限付与や設定作業は少し余分な感じがします。また、これらモジュールで追加したタスクを、管理メニュー内のどのエリアで実行するかを決める作業は分かりづらく、慣れるまでに時間がかかるかもしれません。細かいレベルでの分類やパーミッション設定を行いたい人にとっては、Drupal は最適のツールです。グループレベルではなく、個人レベルでアクセス権限の設定が行えます。カテゴリーの階層レベル数も無限で、いくらでも設けることが可能です。Drupal のデベロッパーコミュニティは世界中にあり、みなさん非常に熱心に参加しています。また、驚くべきペースで機能追加用の新しいモジュールが公開されています。の管理パネルは再設計されています。
の方がオープンソース開発の理念に傾倒しているユーザが多く、大きなオンラインコミュニティを形成しているということでしょう
のフォーラムでは、熱狂的といえるほど活発なコミュニケーションが行われています。
デベロッパーは、自由に拡張機能を作成して機能を追加することができ、そうして作成された拡張機能は Joomla
でも動作するという点です。将来的なバージョンアップでは動作しなくなるかもしれませんが、今のところは大丈夫です。ではサードパーティ製品を使えば、ショッピングカートや在庫管理、支払処理といったeコマース機能を実装することができます。
改善の余地があるとしたら「分類」の機能でしょう
わずかな階層レベルでしか分類を行うことができません。
この制約が影響するかどうかは、あなたのサイトでどのくらいの数のカテゴリ階層を必要としているかによるでしょう
まだ自分では体験していませんが、ある記事によれば、トラフィックが多い Joomla
サイトはロード時間が遅くなるようです。の WYSIWYG エディタは直感的に操作しづらいところです。人気も高く、長年愛されてきたこともあり、今回比較した他のどの CMS よりもテーマが充実しています。
com によれば、インターネット上のサイトの0
このままの成長率でいくと、数年後、その占有率は2~2
5%に達すると予測されています。また、オンラインリソースも充実しており、とてもわかりやすいオンラインドキュメント、WordPress ポッドキャスト、機能を追加できるプラグインなどがあります。いくつかのトラフィックが多いサイトでは、パフォーマンスが低下したという報告があります。php ファイルをいじることで、キャッシュ機能を使ってロード時間を短縮することができます。もしこの問題に直面した時は、多くのチュートリアルがオンライン上にあるので参考にしてください。XOOPS は非常にカスタマイズしやすく、コンテンツブロックのレイアウトを自由にコントロールできます。他の CMS ほどに膨大な数があるわけではありませんが、 XOOPS にもモジュールが用意されており、簡単にインストールすることができます。0 的な機能を実装すると発表しているので、楽しみです。XOOPS の公式ページは最近リニューアルしました。そのおかげで、コーディングをプレゼンテーション層と機能層に分けることができ、ページデザインを用意にカスタマイズすることが可能となっています。XOOPS は世界中で人気があり、ソフトウェア自身やそのドキュメントがさまざまな言語で翻訳されています。それは素敵なことなのですが、英語のオンラインサポートが充実していないことは残念です。
さあ、これから何を始めますか
サードパーティ製の支払処理メカニズムのサポート(たとえば、PayPal)
送料や売上げ税を計算するためのモジュール
単にシンプルなブログサイトを作りたいというのではれば、WordPress をおすすめします。使い方は簡単で、たくさんのテーマが用意されています。では、トータルで見て私が一番おすすめする CMS は何かというと、Packt 出版のアワードと同じです。かなり高いレベルでカスタマイズが可能なうえ、フレキシビリティやスケーラビリティもあります。また、分類機能、SSL のサポート、eコマース機能と充実しています。そして何よりも、非常に熱心なユーザコミュニティがあり、モジュールやテクニカル情報を共有でき、サポートしてくれるのです。私のレビューはこれで以上です。この記事がみなさんの CMS 選びのお役に立てれば幸いです。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
Flashの正しいスキル修得に最適
林拓也のFlash基本からプログラミング入門への3ステップ
6月は連続日程開催
表現力の増したコンテンツ制作を目指し
0入門者に最適
大重美幸の目指せ
0プログラマーへの2ステップ
植木真のWeb標準、SEOにも通じるアクセシビリティ講座
林 拓也の Flash 基礎からプログラミング入門への3ステップ
※お好きな1講座からお申し込み頂けます。Flash 初心者の方を対象に、ソフトウェアの基本的な操作と、Flash のコンテンツ構造などの概念を中心に学習します。
詳細は こちら
0 の基本概念を理解し、スクリプトによって Flash をコントロールする感覚を学習します。
詳細は こちら
林拓也の Flash ではじめる本格的プログラミング入門
0 を使って「オブジェクト」に関する理解を深め、モジュール化を考慮したプログラミング方法を学習します。
詳細は こちら
「ほんきでクスール」第8期
Flash コンテンツ制作には技術を習得することと同時に、どんなものを作るかのアイデアを考えることが重要です。「ほんきでクスール」では受講者みずから企画を考えてもらい、それをもとに作品を作っていきます。(見学も随時可能です。
詳細は こちら
3日間のコースで Flash の基礎となる制作方法、環境設定、アニーション、ユーザーインターフェース、画像の挿入、テキスト、ナビゲーション、サウンド、ビデオをふくむ扱い方を習得できます。このコースでは、操作方法の習得だけでなく、Flash 制作における概念知識もしっかりと習得することができ、実務の活用にも結びつけることができます。
詳細は こちら
1 コンテンツの基本的な制作工程を学習します。
詳細は こちら
ロクナナワークショップの毎月のおすすめ3講座をお得なセットにいたしました。セットの3講座すべてにお申し込み頂くと、もれなく受講料より10,000円OFFとなります。
キャンペーン詳細は こちら
6月のお得セット
0 への移行を考慮に入れたカリキュラム内容です。
詳細は こちら
7月のお得セット
詳細は こちら
大阪での10回目の開催
3日間のコースカリキュラムで、Dreamweaver の基本的な Web サイト構築における手順、サイトのナビゲート、CSS(カスケーディングスタイルシート)を使った Web ページのレイアウトのデザイン、大規模なサイトの構築や維持管理の手法を習得することができます。
詳細は こちら
6月は連続日程開催
Flex による RIA 開発を行なわれる開発者の方や技術評価をされる方が最初に受講される、定番のトレーニングコースです。5日間で、Flex の基本からサーバとのデータ通信までの内容を、ハンズオン(実機演習)を通して習得できます。なお、6月は5日間の日程が連続開催となるため、遠方のお客様もより受講しやすい設定となっております。5 でもそのままお役立ていただけます。
詳細は こちら
表現力の増したコンテンツ制作を目指し
0 で、テキストファイルや XML ファイルの読み込み、CGI との連携など外部とのデータ連携について学習します。
詳細は こちら
0 入門者に最適
大重美幸の目指せ
0 プログラマーへの2ステップ
※お好きな1講座からお申し込み頂けます。
大重美幸の目指せ
0 の基礎からカスタムクラス定義までを学習します。
詳細は こちら
0 の基礎知識がある方を対象に、アニメーション制御、外部イメージの読み込み処理や XML ファイルの扱い方などを学習します。
詳細は こちら
Flash で制作された Web コンテンツのスクリーンリーダーへの対応など、アクセシビリティに配慮した設計にする方法を学習します。
詳細は こちら
Web アクセシビリティの考え方を正しく理解するとともに、Web 標準や SEO との共通点をふまえたコンテンツ制作上のポイントを学習します。
詳細は こちら
寺子屋クスールとは神谷町にあるお寺「光明寺」で行うセミナーです。毎回 Flash とその他の技術を組み合わせたデモを紹介し、実際に参加者にも触ってもらいます。第5回目の今回は「体を動かす元気な技術」をテーマに楽器、ゲーム、子供の玩具の新しい可能性をデモを使って実演してもらいます。
ウェブの技術を離れたところで、ものづくりの発想のヒントを得てみませんか
お坊さんの手作りお菓子つきです。
詳細は こちら
10番目の地方版として、福島・郡山にて開催決定
西村真里子、益子貴寛ほか
ビッグパレットふくしま コンベンションホール
詳細は こちら
昨年に引き続き、今年も沖縄で開催
西村真里子、森田雄ほか
詳細は こちら
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。他にも、刺激的なセッションがたくさんあったようです。その模様を、スピーカーのみなさんや日本から参加した方々に伺いました。
三角形分割によるテクスチャマッピング
RIA の検索エンジン最適化テクニック
「アヒルちゃんを東京湾に浮かべる方法」★高額落札間違いなし
「オークションでワンランク上に見せる方法」など掲載中
ブログに書かれたサイト、月間ベスト3を発表
タイトル横の「more」をクリックすると紹介ブロガーもチェックできる。
米国で広がるCMSテンプレートビジネス「スキニング」
最近、米国のフリーランスデザイナーの間では、新たなビジネスとして、オープンソースCMSのテンプレートをデザインする「スキニング」が注目されています。
優れたバナーを作って副収入を手に入れよう
みなさんは、好きなバナー案件を選んで、好きな場所で制作し、投稿するだけ
優れた作品にはポイントが付与され、そのポイントを現金やAmazonギフト券などに交換できます。C-teamの特徴と仕組みについて解説します。カラーコードをWebカメラにかざすと、かわいいキャラクターが映像上に登場して呟いきます。その仕組みについて、BOWさんに解説していただきました。
デビルオブツ×文原聡:「仕事どう
これから会社どうするの
お客様よりお寄せいただくご質問や弊社で確認している製品の不具合情報を掲載
0講座などをご紹介
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
米国で広がるCMSテンプレートビジネス「スキニング」
優れたバナーを作って副収入を手に入れよう
「遊んでもらえる名刺」
これから会社どうするの
FITC は、2002年にカナダで始まり、今や世界最大級の Flash イベントへと発展し、これまでに北米・ヨーロッパを中心に8国30都市で開催されています。Flash、Flex、AIR、デザイン、インスピレーションといったテーマを扱い、著名クリエイターがスピーカーとして参加し、最先端の Flash 技術や知識を共有できる場として世界中から参加者が集まるイベントです。他にも、刺激的なセッションがたくさんあったようです。その模様を、スピーカーのみなさんや日本から参加した方々に伺いました。
エンジニア/新規Webサービスの開発
Edge:みなさんの講演内容を教えて下さい。」デモを行い、 wonderfl に投稿していただいたユーザさんのコードを見ていただきました。
【大塚さんのプレゼン資料】
【阿部さんのプレゼン資料】
深津: まず自分がどんな事例を手掛けたのかを簡単に紹介し、データビジュアライズとかをやりたい人向けに、「じゃあ実際、大量のデータを動かしたり、描画したりするのって、どっから始めればいいのさ
」的なことを紹介しました。
【深津さんのプレゼン資料】
クマ & タキシードで
AR(拡張現実)ってものがどんなものなのかを分かりやすくするために、プレゼンのスライドそのものを FLARToolKit で作りました。
【さくーしゃさんのプレゼン資料 ソースコード付】
【新藤さんのプレゼン資料】
Edge:来場者の反応はいかがでしたか
大塚: 最高でした。Side A/B ともに、プレゼンしている間に拍手が何度も起こり、ニッコリ笑って拍手に応えることが何度もありました。
他のセッションを見ていたら、つまらないプレゼンだと開始直後でも会場を出て、違うセッションに移動する人も多くてビックリしていたのですが、我々の会場はどんどん人が増えて、立ち見の人もいたのがすごくうれしかったですね
それと、プレゼン後に話しかけてくれた人たちとのコミュニケーションから、wonderfl の新しい機能のインスピレーションをたくさんいただいたので、それをどんどん反映しているところです。
たとえば、投稿されたコードのキャプチャを取る機能とか
後ろには立ち見の人も
阿部: Progression はロジック中心のフレームワークのため、他国語で本当に伝わるのか不安でしたが、そんな不安を吹き飛ばすほど暖かく迎えていただき、好意的な反応をいただきました。ご期待に添えるよう、今後は積極的に世界に対してアピールしていきたいと思っています。新藤: 予想以上に良いリアクションをもらえました。特に、デモの度に大きな拍手をいただけたのは印象的で、「やってよかったな」と思えました。
」と反応してくれて
」といった技術的なメリットに対しても、拍手が起こっていました。
プレゼンしていた身としてはあまり記憶が定かではないのですが、さくーしゃさんによれば、BetweenAS3 のパフォーマンス比較が一番盛り上がっていたとか
」などの言葉をいただきました。
さくーしゃ: クマはねぇ、すごい人気だったね
外に出かける時やパーティの時は被るようにしてたんだけど、街中でもめっちゃ声かけられたり、一緒に写真撮ってと言われたり
どっちかっていうと、FLARToolKit よりもクマの方が反応デカかったんじゃねーかと思うぐらい
深津: クマの被り物に勝てませんでした。何人かは発表の後に質問をしにきてくれたり、メールをくれたりもしました。久しぶりの英語のプレゼンだったのですが、なんとか通じてよかったです。Edge:さまざまなセッションがありましたが、「これはすごい。
」と感じたものはありましたか
ゲーム以外でも、インスタレーション系で使ってみても面白そう
AS3 対応が待ち遠しいなあ
阿部: 直接セッションを見ることはできませんでしたが、やはり Scaleform GFx の情報は非常に興味が湧きました。それ以外にも、全体的に体を使ってプレゼンテーションする方が多く、日本とは違うスタイルに刺激を受けました。一番印象的だったのは、音を使ったビジュアライゼーションをテーマとしたセッションで、ドラム缶使った空気砲のパフォーマンスです。それ以外にも、日本人からしたらオーバーアクションなボディランゲージ(手を振る、など)が多かったように感じます。深津: Quasimondo さんのセッションは、オーソドックスなアルゴリズムで絵を描く話だったのですが、内容が魅力的でした。それを見た後は、平面分割の話に惹かれて、2~3個セッションサボってずっといろいろ作ってました。
深津さんの作品
図形の分割の仕方、線の引き方、色の採り方などの小さなテクニックやアイデアと、それに対するバリエーションの組み合わせを試しながら作品を作り上げていく様子を説明していて、自分でもいろいろと試してみたくなりました。映画「007 / 慰めの報酬」のオープニング映像や SF映像 の制作話だったのですが、制作者のゴールとして「ハリウッド映画を手掛ける」という方向もあるのかぁ、と新鮮に感じました。ある電話番号に携帯から電話して数字キーを押すと、会場のスクリーンに映し出されているクイズとかゲームに参加できるというマルチユーザ携帯ゲームでした。彼自身で、マルチユーザ用の Flash 側、サーバ側のフレームワークを作っているそうです。
Edge:セッション以外で、驚いたもの、興味を惹かれたものはありますか
新藤: スピーカーも参加者もとにかく気さくでフレンドリー
そして毎晩のパーティ
あと、さくーしゃさんのベアーハットの人気っぷり
深津: 「宴会しすぎ
」と思いました。あと、スピーカーに用意されていたサバイバルキットにコンドームが入ってたのには笑いました。あの辺りのセンスはかなり謎です。
スピーカーに手渡された「スピーカーサバイバルキット」
リハーサル中にトコトコ入ってきて、「会いたかった」とかって言ってるの
いやー、これにはびっくりした。大塚: スピーカー同士のコネクションを作ることができたのはよかったと思います。Flash 界のトップレベルの人たちがスピーカーとして集まっていて、キーマンと繋がることができ、今後の幅が広がったと思う。また、先端の人たちが作ろうとしている未来を垣間見ることができたのはよかった。でも、日本の言語の壁がどれほど大きいのか痛感し、英語でのアピールを増やそうと決めました。
さくーしゃ: そうだねぇ、英語だねー
みんな英語しゃべってるんだもの
できないとマジお話にならない。
まあその辺はクマでカバー()したわけですが、僕の場合
新藤: かなり刺激的でした。そしてまた次回も、また別の海外のイベントにも参加してみたくなりました。日本に居る間にも、自分や Spark project がもっとグローバルに展開していけたらいいなと思わせてくれるイベントでした。阿部: みなさんと同じように、とにかく英語の壁を痛感しました。また、イベント後は毎日パーティで飲みまくるので、酒に強い必要もありそうです。その2つさえあれば、もっと FITC を楽しめるようになるので、次の機会までにできるだけ強化していきたいと思いました。
深津: 僕の場合、英語はそんな問題なかったのですが、体力的な問題が
夜は力尽きてほとんど途中で寝ちゃいました。時差とか準備とか含め、次回(があるならば)もうちょっと計画的にしようと思いました。
Edge:今回の経験が、みなさんの今後の活動に影響しそうでしょうか
深津: 「やっぱり海外出ないとなぁ」と再実感しました。
日本にいるかぎり言語的な壁があるし、海外展開しようにも国内用と海外用で二重に活動コストがかかるんです よね
そういう部分のリスクをみんなでヘッジできないかと思って、JActionScripters というグループを作ってみました。さくーしゃ: 影響は、めっちゃあると思う。
FLARToolKit が主に海外でヒットしてたこともあって、FITC 以前からも海外向けに発信していかないとっていう気持ちはあったんだけど、それがもっと強くなったというか
新藤: 先ほども言いましたが、グローバルな展開という面で、すでに影響が出始めていると思います。個人的にも、英語での情報発信や、海外の人との交流を積極的に行うようになりましたし、先日開始された JActionScripters にも参加しています。Spark project も、日本だけに留まらないオープンソースコミュニティとなるよう、活動を開始しています。阿部: どんなにネットで繋がっていても、実際に顔を見て話す機会が与えてくれる体験は非常に大きいので、「いつかやりたい」と思っていた世界展開の構想を、より身近なアクションで実現できるようなものに変えることのできる貴重な経験でした。ただ、海外発のフレームワークが多い中、きちんと日本語がサポートされている国産フレームワークの存在は、日本のユーザに対してのメリットが大きいと思いますので、今後とも英語と日本語のバランスを取りながら、言語を問わず必要としていただける方に情報を届けることができればと思います。Edge:みなさんのグローバルな活躍に期待しています。私の参加目的は、「世界最大の Flash カンファレンスを体験すること」でした。想像していた通り、最先端を行くクリエイターたちの発表は刺激になりましたが、同時に技術的には日本人も負けていないなとも思いました。今回最大の収穫は、世界の様々なクリエイターたちと交流を持てたことです。com を盛り上げたいという気持ちに繋がっています。日本だと凄い人しか表舞台に出てこないという雰囲気がありますが、海外には逆にまず交流ありきという部分があります。
もし FITC のような海外イベントに興味があれば、気軽に飛び込んでみるといいんじゃないでしょうか
ゲームや CM、映画など、普段は見ることのできない異業種の制作風景を見ることができたのが大きな収穫でした。今後の Web 制作において、いい栄養になったと思います。デザインにしても、他のユーザへのアクセス方法にしても、普通であれば躊躇するような内容ですが、かなりやり切った感があって気持ちよかった。うらやましい。
でも、一番うらやましく思ったのは、「地元の人は毎年3日間、朝から深夜まで Flash の話ができる」ということ
自分は直前の体調不良が響いて深夜のパーティには参加できず、それが心残りです。今後参加される方は、万全の体調で挑むことをおすすめします。FITCでの3日間は、映像やデザインなどのセッションを中心に参加しました。15秒の映像という短いCMで、いかに的確にどうメッセージを伝えるか、キャッチフレーズの効果法を考えるセッションや、デザイナーが普段どのような生活を送りながら面白いアイデアを探し出しているか、プライベート写真をたくさん紹介したセッションなど私自身、絵を描いているのですごく興味深いものでした。そしてなにより観客の反応が印象的です。「観客はスピーカーが発表している間は静かに聴いて、最後に質問する」のが当たり前だと思い込んでいたのですが、FITCではスピーカーが発表している間でも、観客が何かを発言し、スピーカーがそれにジョークを返し、会場がドッと笑うという場面にたくさん出会いました。こんな海外との文化の違いがちょこちょこ垣間見れてすごく新鮮でした。セッションとセッションの間にクッキーが出されたり、コーヒーなども自由に飲めるようになっていて、そういう気遣いにこちらもリラックスして過ごすことができ、なんだかあっという間に過ぎてしまった感じです。そして最後に日本勢の皆さんのセッションは本当輝かしかったです。私も頑張ろうって思いました。ありがとうございました。
朝から夕方までセッションを聴講して、夜はパーティという流れが続きますが、その間中「スピーカー含めた参加者全員とコミュニケーションできる雰囲気が用意されていること」
これが、参加して一番強く感じたことです。
「日本から来た」というだけで、いろいろな方と楽しくお話ができましたし、英語が苦手な僕にも Web デザイナー(女性
)の友達ができました。デジタルサイネージをリアルタイムにアップデートしていく Windows の「I'm A PC」のキャンペーン事例や、液晶ディスプレイを横に長くつなげたインタラクティブアドを紹介していました。あまり詳しい内容は聞き取れませんでしたが、クライアントワークとしてとても巧みに実現できていること、また成功させている点でいい刺激になりました。セッションは、「クリエイティブ」と「テクニカル」のタイプが約半分ずつほどあります。僕はテクニカルな部分に深く踏み込めないのですが、生粋の Flasher ではないただ単にアートや Web テクノロジーに興味がある方にとっても、充分楽しめる内容でした。会場にいる方は興味関心が共通している方ばかりなので、何より参加者同士のコミュニケーションが楽しいはずです。英語の壁は大きいですが、その壁を取り払いたいと思っている方にとっても絶好の機会になることは間違いありません。3日間、朝から(連夜のパーティを入れれば)深夜まで、盛りだくさんな内容を楽しみました。セッ ションの話題は、技術やクリエイティブだけでなく、心理学や発想法、自己プロモーションのノウハウ、クリエイターとしての「生き方」に関するものもありました。私は、もちろん先端の技術や作品にも興味を持っていましたが、開発チームやプロセス、仕事に対する考え方、デザイン教育などについて、実践例やトレ ンドが知りたかったので、関係しそうなセッションに参加しました。ちょっとニッチなテーマもありましたが、各セッションともそれなりに聴衆が集まり盛り上がっていて、Flash コミュニティの成熟度、知識や興味の多様さに感心しました。参加者も様々で、Flash テクノロジーがそれぞれの人の腑に落ちている、というか、「一部の人だけではなく、もっと幅広く社会に関係する技術であることが理解されている」と強く感じました。
みんなデモを食い入るように見ていて、時折「おぉー
」と歓声があがったりして、日本の Flash クリエイターに対する関心と評価の高さを実感しました。みなさんの技術や表現力が世界レベルであることが実証された、そういう瞬間に居合わせただけでも嬉しく感じるとともに、改めて日本のみなさんによる仕事のクオリティの高さを再認識しました。日本では、世界の最先端の動きに注目するだけでなく、自分たちの身近に、あるいは自分たちの中にすでにある可能性や価値にもっと気づくことが必要なのかもしれません。FITC は大好きなイベントなので、これまで4回ほど参加しています。)、それから意外な大御所(Golan Levinとか)のセッションをミックスして一度に見られるので非常にお得です。そんなすごい人たちがそこら辺を普通に歩いていたりして、すぐに友達になれる、そんなイベント全体の雰囲気がまた心地よいのです。
刺激を受けたセッションは、何よりも日本からきたサムライたち
それと、FITC の通しチケットは 6~7万円 とかなり高額なのですが、学生割引もあるし、さらに学生ボランティアに参加すると自分の仕事時間以外なら、無料でどんなセッションでも見られるんです。そういう、学生に対して敷居を下げる仕組みを日本でも取り入れられると良いなーと思ってます。
あと、カンファレンス会場とパーティ会場との間を黄色いスクールバスで移動するところも
ジャパニーズサムライのパワー(高いアイデア力、技術力)を存分に海外のトップクリエイターおよびFITC来場者に紹介できたよいチャンスだったと考えております。」とコメントしておりましたし、連日連夜のパーティ(笑)の際にも、日本のセッションについてよく質問されました。海外の方々は日本に興味を持っている方が多いです。これからも堂々と海外のセッションおよびUSのサイトなどで活発に日本人が活躍していく機会をアドビとしても創出していく機会を作りたく考えております。
個人的感想としては、初海外カンファレンス参加
その時に日本人 Flash クリエイターの作品やサイト、人となりに触れることができ、あまりの技術の高さと豊かな才能に驚きました。
Edge:実際、彼らのセッションを見てどうでしたか
実は、言葉や通訳の関係で会場がついて来られないかもと内心ヒヤヒヤしていたのですが、そんな心配はまったく必要なかったですね
来場者は、彼らのプレゼンに完全に惹き込まれていました。
会場は満員御礼
みんな興味を持っていたし、大満足していたようです。
今回このようなセッションが FITC で提供できたのは、本当に最高でしたね
Shawn:FITC では、これまでも世界中から優れたクリエイターをスピーカーとして招待してきました。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
米国で広がるCMSテンプレートビジネス「スキニング」
今月号の記事
米国で広がるCMSテンプレートビジネス「スキニング」
優れたバナーを作って副収入を手に入れよう
「遊んでもらえる名刺」
これから会社どうするの
みなさんも、クライアントワークに オープンソースCMS を使用していることでしょう
米国では、オープンソースCMS のテンプレートをデザインすることを「スキニング(Skinning)」と言い、このような仕事を主に行っているデザイナーを「スキナー(Skinner)」と呼んだりもしています。最近、米国のフリーランスデザイナーの間では、新たなビジネスとしてこのスキニングを始める例が増えています。
テンプレートビジネスを始めたきっかけは何ですか
私は昔、大企業で自社サイトを制作していました。色々な部署があり、その部署にあうCMSのテンプレートを作るのですが、「3ヵ月ごとに新しいテンプレートを作って、以前に作ったテンプレートは破棄する」という作業の繰り返しでした。
効率が悪いですね
そうなんですよ
仕事とはいえ、せっかく一生懸命作ったものを3ヵ月ごとに捨ててしまうのはもったいない、再利用できないかなぁ~と思って、会社を立ち上げました。
昔からスキニングをしていたのですね
最初は1人でやっていたのですが、ユーザのニーズが多く、会社の急成長に伴い、1人雇い、2人雇い、と今の会社のサイズになりました。やはりオンライン のサービスビジネスをする上で、24時間のテクニカルサポートは非常に重要だと思います。世界中にチームメンバーがいることにより、フォーラムで24時間のテクニカルサポートに対応できるようになりました。
海外に優秀な人材を見つけるのは大変だったのではないですか
もちろん大変でしたが、 Joomlaのコミュニティーで、我々のテンプレートの大ファンの方で一緒にやっていこうという素晴らしい人々に出会えたのが幸いでした。我々のサービスは、テンプレートを一つ一つバラ売りするのではなく、会費制でユーザが公開されている全てのテンプレートを使えるところが大きな特徴です。
過去の資産を再利用する素晴らしいシステムですね
ユーザの皆様に色々と使っていただき喜んでもらえるのが最大の喜びです。テンプレートを使用する上で、やはりユーザが一番大変なのは、テンプレートをどうカスタマイズ、管理するかです。そこで我々は、チュートリアルとオンラインでのサポートフォーラムに力を入れております。
チュートリアル・ムービーや、スクリーンショットが豊富なステップバイステップで、非常にわかりやすいですね
ご覧になるとわかると思いますが、画像の編集のチュートリアルは、Fireworksを使う方法で説明しております。ありがとうございます。
0から使っていて馴染んでいるし、ディベロッパーにも簡単に扱え、ファイルサイズが小さくて重宝するからですね
ネイティブファイルがPNGなので、ファイルの管理が楽なのもあります。それでは、サービスの利用条件、価格体系などを教えてください。RocketThemeに入会すると、現在公開されている全てのテンプレートがダウンロード可能になります。もちろん、新規に制作されたテンプレートも随時自由にダウンロードして使えます。ダウンロード可能期間や使用できるサイト数は、会員の種類によって異なります。会員の種類は次の通りです。
会員の種類(ダウンロード可能期間)
使用可能なサイト数
2つのサイトまで
3つのサイトまで
1年間の更新
現在のサイト数に2追加
プロフェッショナル向け1年間
プロフェッショナル向け1年間の更新
今後、日本でも同じ展開を期待したいですね
本日はお忙しいところ、ありがとうございました。インタビューの後、自分で日本語のJoomlaのサイトを立ち上げ、RocketThemeからお借りしたテンプレート を使ってみたのですが、何の問題もなくすんなり動いてしまったので驚いています。comは、JoomlaとPhpBBのテンプレートで確立した会社でしたが、欧米ではフリーランスで活躍している デザイナーの多くの方が、小規模のクライアント向けに、オープンソースの色々なCMSを使用しスキニングのデザインをすることにより、新たなビジネスの幅を広げているようです。
もちろん、クライアントのサイトの規模、サポート体制、拡張性を考慮し、静的サイトが良いか、ダイナミックな動的サイトが良いかも考えた 上で、Fireworksを使って是非、RocketThemeのスキニングに日本からも一度チャレンジしてみてはいかがでしょうか
この経験が Andy の Web デザインへのパッション、世界中の人々が良いデザインの Web を構築することへと結びついております。常に「お客様第一」を唱えつつ、品質改善、パフォーマンス向上、使い易さを最重視した製品作りを心がけている。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
優れたバナーを作って副収入を手に入れよう
今月号の記事
米国で広がるCMSテンプレートビジネス「スキニング」
優れたバナーを作って副収入を手に入れよう
「遊んでもらえる名刺」
これから会社どうするの
株式会社リクルートが運営する「C-team」は、「クラウドソーシング(群集にアウトソースする)」という手法を使った、Web上のクリエイティブエージェンシーです。
制作スタッフは、「みなさん」
仕事内容は、大手企業のバナー制作
みなさんは、好きな案件を選んで、好きな場所で制作し、投稿するだけ
優れた作品にはポイントが付与され、そのポイントを現金やAmazonギフト券などに交換できます。2008年8月から開始し、すでに8700人以上のクリエイターが登録しています。この記事では、C-teamの特徴と仕組みについて解説します。ぜひ、時代を先取る新ワークスタイルに参加して下さい。C-teamとは、ものすごく簡単に言うと、「効果を上げるために、バナーをたくさんのクリエイターに作ってもらうサイト」です。サービスの流れは、以下のようになっています。
バナー広告を出したいクライアントが発注
C-teamサイト上で案件を告知し、クリエイターがバナーを制作
C-team運営スタッフが投稿作品から150~200ほどのバナーを選び、大手サイトでバナーを表示
独自の最適化システムにより、効果の高いバナーを判別
効果の高いバナーを作ったクリエイターにポイントを還元
利用するには会員登録が必要です。
それでは、各項目について、順番に説明していきましょう
バナー広告を出したいクライアントが発注
企業が「バナー広告を出そう」と考えた場合、一般的には以下のような手法をとっていると思います。
制作会社に発注
制作会社が用意した数パターンの中から、企業の担当者(あるいは代理店)がバナーを選ぶ。
選ばれた1~3パターンのバナーを出稿
つまり、1~2人の制作会社のクリエイターによる、1~3種類のバナーを出稿していたのです。しかし、制作・選別した時点で、そのバナーの効果が高いかどうかは分かりません。実際にサイトで表示してみて、初めて分かるものです。また、どのバナーが良いか、というのは企業の担当者や代理店の方などのセンスや経験によって判断されてしまいます。一方、C-teamに発注すれば、全く違った形でバナーの制作・出稿が可能となります。数百人規模でクリエイターがアイデアを出し、そこから選別した150~200ほどのバナーを出稿して、さらに最適化を行います。そのため、一般的な手法よりも、より効果の高いバナー広告が期待できるわけです。C-teamを2008年8月に開始して以来、さまざまな企業に利用していただき、トータルの発注数は22000件を超えています。リクナビなどリクルート関連の案件はもちろんのこと、全日本空輸 、ソニー生命、Aflacなど、みなさんお馴染みの企業からも発注を受けています。「大手企業のバナー広告を作れる。
C-teamサイト上で案件を告知し、クリエイターがバナーを制作
C-teamでは、「クラウドソーシング」という形態でバナーを作ります。クラウドソーシングとは、「群衆にアウトソースする」という意味です。実際にクライアントと会って打ち合わせをしたりすることなく、仕事を受けることができます。C-teamに発注された案件は「募集案件一覧」に表示されます。企業から発注された仕事は、案件という形で一覧表示されます。案件を見て、参加したいと思えば、あとはバナーを自作し、投稿するだけです。C-teamが行ったアンケートによれば、だいたい20分~30分で1つのバナーを制作している人が多く、バイト感覚で仕事をしている人もいるようです。また、コンペや、担当者の要望などを聞くことなく自由に作ることができるため、楽しんでいるクリエイターも多いようです。なお、投稿できるのは静的なバナー作品のみです。FlashやGifアニメを使ったバナーは、今後対応する可能性はありますが、現在のところ予定はありません。
C-team運営スタッフが投稿作品から150~200ほどのバナーを選び、大手サイトでバナーを表示
審査基準としては、「ロゴの扱い」「可読性」「著作権違反」などがあります。詳しくは「バナーが不採用になってしまう事例」を見て下さい。このような大手メディアに掲載するバナーを制作する機会は、なかなかありません。「こんな大きなサイトに自分の作った作品が掲載されるなんて」と感動する人もいます。
独自の最適化システムにより、効果の高いバナーを判別
C-teamでは、「広告を出稿したらそれで終わり」ではありません。最適化システムにより効果の高いバナーを判別し、広告効果を高めるようにしています。最初は150~200のバナーを平等に表示し、一定数たまった時点で最適化のロジックがスタートして、効果のあるバナーがより高い頻度で表示されるようになります。
では、その効果の高さはどうやって測定するのでしょうか
簡単に言うと、インプレッション数(表示数)とクリック数の割合を見ることで測定しています。クリック率がよいものを選んでいき、効果が高いバナーが自動的に出るようなシステムになっています。独自の最適化システムにより、効果の高いバナーを判別して優先表示します。つまり、バナーのデザインやクリエイティブの高さで決めるのではなく、「本当にユーザの心に刺さってクリックという行為まで誘導したか」というところで決めているのです。
効果の高いバナーを作ったクリエイターにポイントを還元
いよいよ、クリエイターへの報酬の説明です。まず、出稿用のバナーとして採用されると、500円相当のポイントがもらえます。そして、バナー掲載期間が終了した後、クリック率が高いバナーを作ったクリエイターに対しては、以下のようにポイントが付与されます。詳しくは「ポイントを交換する」を見て下さい。
実際にどういうバナーがクリックされるのか
では、実際にどういうバナーがクリックされるのか、過去の案件を元にクイズを出したいと思います。
これらの中で、どのバナーのクリック率が高いと思いますか
選びましたか
クリック率は上から
となっています。ほぼ同じテイストでも、クリック率はこれほどの差が出るのです。広告制作会社などの方に、どれが一番クリックされるのかというクイズを出しても、当てる人はほとんどいません。いわゆる「広告制作での効果の高いセオリー」というものが、そのまま効果に繋がるとは限らないのです。
クリエイターにとってのメリット
あらためて、クリエイターにとってC-teamを利用するメリットをまとめておきます。今まで、大手企業のバナー広告を作る時は、大きな制作会社に所属しているか、コネがない限り、仕事を受けることすらできませんでした。C-teamではどんなクリエイターでも参加することができます。しかもクリック率という平等な基準のみで判断されるため、たとえデザイナー初心者でも上位に入る可能性はおおいにあります。また、空いた時間や在宅で仕事ができるのも魅力の一つです。実際に、会社での昼休み時間や土日のプライベートな時間にバナーを作っている人もたくさんいます。何にも縛られることなく、自分のペースでクリエイティブな仕事ができるのです。もちろん、優れた作品を作れば、相応の報酬が得られるということも大きなメリットです。ちなみに、月に何十万も稼ぐ人もいます。頑張れば、本業の収入を超えることも夢ではありません。初心者でもアイデア次第で参加できる。凝ったデザインのバナーがクリックされるというわけではありません。むしろシンプルなバナーの方が効果が高いというケースがよくあります。どんなにベテランでも全く効果が上がらないバナーを作ることもありますし、Photoshopを触って間もない人でも、効果の高いバナーを作ることもありえます。また同一人物がほぼ同じ素材を使ってバナーを複数作ったとしても、効果が高いものと、効果が全くないものもあります。デザインの仕事をしたことがない人でも、デザイナーとして食べていける一歩目を踏み出すことができるのがC-teamです。
とにかく、C-teamに一度訪れて、バナーを投稿してみてはいかがでしょうか
あなたの作ったバナーが、驚くほど効果を出す可能性もあります。ぜひ、この機会にご参加下さい。
バナー広告の出稿を検討されている方へ
1~2つのバナーを試すよりも、数百のバナーを試す方が遙かに高い効果が出ます。実際、ほぼ全てのケースで、一般的な手法によるバナー広告よりも、C-teamを利用したバナー広告の方がクリック率が高いという結果が出ています。
一般的な発注スタイルよりも初期コストはかかりますが、たとえば1
5倍の効果が出ると、コストは大幅に下がることになります。結果としては、同じ金額で、同等かそれ以上の効果を上げることができます。
株式会社リクルートが提供する、クラウドソーシング(群衆へアウトソーシング)を使った広告最適化サービス
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
米国で広がるCMSテンプレートビジネス「スキニング」
優れたバナーを作って副収入を手に入れよう
「遊んでもらえる名刺」
これから会社どうするの
制作会社「BOW」さんの名刺の裏には、ちょっと大きめのカラーコードが印刷されています。そのカラーコードを Webカメラ にかざすと、なんと、かわいいキャラクターが映像上に登場して呟いています。
その仕組みについて、BOWさん に解説していただきましょう
このコンテンツの制作に取り掛かったのは2008年の11月、我々 BOW が活動を始めて少し経ってからでした。「渡した相手に遊んでもらえる名刺」を目指して、当時流行のきざしを見せていた FLARToolKit を使うことにしました。名刺なら自然な形で相手にマーカーを渡せるため、FLARToolKit との相性が良いと考えたからです。テストは順調に終わり、メンバー3人のマーカーパターンに個別の3Dモデルが出せたところで、「名刺交換した人の名刺も作ることができる」というアイデアが追加されました。マーカーパターンが増えても対応できるようにする。このアイデアの実現には二つの壁があります。このため、マーカーパターンを動的に追加することが難しく、またそれが可能になったとしても、登録されたマーカーパターンの種類が膨大になった際にパフォーマンスが低下することが明白でした。そこで、登録したパターンから探す代わりに、パターンに共通の法則を持たせることで認識を行い、その後パターンを読み取ることで名刺を識別するという方法を採ることにしました。
カラーコードの設計
パターンを読み取ることでデータが取り出せるということは、つまりバーコードや二次元コードのようなものです。当初は QRコード が使えないか考えてみましたが、低解像度の Webカメラ で認識するには細かすぎるため、カメラを自由に動かしたい AR には不向きと判断し、独自設計することにしました。独自設計に当たって、以下のようなことを考慮しました。
色(白黒にするか、カラーにするか
カラーなら何色使うか)
誤り検出・誤り訂正
グリッドの分割数
まず色ですが、白黒だと認識の精度を保ちやすく、カラーだとセルごとのデータ量を多くできます。今回4色のカラーコードにしたのは、QRコード を使わなかった理由に同じく「できるだけグリッドの分割数を減らして単純な模様にしたい」という判断ですが、名刺に刷った場合の見栄えも考慮に入れてあります。使用する色は、家庭用プリンタでもきれいなコントラストが出せるように 100% の CMYK を選びました。次に方向識別です。カメラにマーカーが写った際、90度単位で倒立した状態を見分ける必要があります。マーカーの天地が分からないとコードを読み取れないし、3Dモデル を表示する際もどちらに向けるか決定できないからです。
今回はルールを単純にするため、「4隅のセルのうち、左上は常にシアン
残りは黒かイエロー」と決めました。誤り検出・誤り訂正ですが、これは予め余分なデータを持たせておくことで、一部が正しく伝わらなかった際に、そのことを知る(検出)または元に戻す(訂正)という仕組みです。この段階で試作したマーカーを認識してみたところ、時折1セル程度の色判定を失敗することがあり、誤り訂正が有効と判断しました。誤り訂正にもいろいろな方式がありますが、実装の容易さと動作の軽さから、ハミング符号を使用しています。最後に、ここまでの決定事項と目標とするデータ容量からグリッドの分割数を決定します。名刺の ID を表現するのには十分なサイズです。こうして、カラーコードの仕様が決まりました。折角なので、メンバー3人のカラーコードは意味のある見た目にしようと思いつき、5*5 のセルに収まるドット絵を数点描きました。しかし適当に描いた絵ですので、適切な ID をエンコードしたものと違い、データ上の誤りを含みます。そこで絵を描くとデコード・再エンコードしたカラーコードを隣に表示するツールを作り、左右の絵が同じになるまで色を変更して調整しました。その結果、吉川と高橋の名刺は笑顔のマーク、石崎の名刺は漢字の「石」になっています。アバター同士がつぶやき、挨拶する。名刺は「挨拶」するためのツールですので、その上に表示されるアバター同士にも、勝手に挨拶をさせようというアイデアが出ました。名刺の上に出るアバターは普段ぼーっと立っているだけですが、その前に別のアバターがいる場合はそちらに駆け寄り、お互い相手の前に立つと挨拶を始める、というルールです。「自分の前に別のアバターがいる」という条件判断は、FLARToolKit がマーカーから計算した姿勢行列を使うのが順当かと思いましたが、この方法はうまく動きませんでした。
現実の空間で2枚の名刺を向き合わせた場合でも、微妙な誤認識から、まったくかみ合わない2つの姿勢行列が返る場合があるからです(カメラからの距離が大きくずれ、スケールも異なるため、投影すると自然に見えます)
そのため 3D での判定はあきらめ、マーカーの4隅のスクリーン座標から計算した 2D 上の「視野ボックス」に相手のマーカーの中心が入っているかを計算するようにして解決しました。さらに、名刺の持ち主の Twitter での発言を表示することで、アバターにしゃべらせるようにしてみました。目の前に別のアバターがいる場合、その持ち主への発言が表示されます。
ユーザが自由にアバターをデザインできるように
サイトに来てくれた人でも自由に自分のアバターが作れるような仕組みを作ることにしました。動作の軽さと、後々面白いことができるのではという読みがあったためですが、これらの 描画API には制限も多いため、それに合わせた作り方を選ぶ必要がありました。具体的には、描画に使う Graphics#drawTriangles メソッドの呼び出しが複数回にわたっていると、パフォーマンス上のメリットが得られにくくなり、またZソートが複雑になるため、アバター1体を1回の呼び出しで描画しています。胴体や足や耳など、全てのパーツバリエーションをひとつの頂点 Vector として保持し、レンダリング時には必要なパーツの頂点インデックスだけをマージして、Zソート して drawTriangles に渡しています。
ユーザがアバターに直接お絵かきできるように
ユーザが作ったアバターがサイトに増えてきて、パーツの組み合わせだけでは個性が出せないので、お絵かき機能を作ることにしました。テクスチャそのものを展開図として表示し、そこに描き込んでもらう方法を良く見かけますが、今回はそれをせず、3D 表示されているアバターに直接描き込めるようにしています。処理の手順ですが、まず描き込む際にマウスのスクリーン座標を取得します。次に各ポリゴンをカメラに近い方から走査していきます。もしそのポリゴンの3頂点のスクリーン座標が、マウスの座標を内包していた場合、3頂点の UV値 から現在の UV値 を一時補完してテクスチャ座標を得ます。ここで、これらの処理がレンダリング直後に行われる場合を考えます。レンダリング直後では Zソート が済んでいるため、各ポリゴンがカメラに近い順に並んでいます。また、ポリゴンの3頂点のスクリーン座標も計算が終わっているため、これらの走査が非常に低コストで行えます。こうして直接描き込める仕組みができました。投影変換の逆変換を考慮していないので若干思い通りに描けない部分もあるのですが、それでも直接描き込めるのは楽しいです。などなど、「自分たちの名刺を作りたい」というところから始まって、気がつけば色々な機能を追加していました。Flickr と連動した記念撮影機能や、プリンタが無くてもその場でマーカーが出せる iPhone サイトなど、ここで紹介しきれなかった機能もあるので、ぜひ自分のアバターを作って遊んでみてください。Web 制作の他、イベントを主催して自ら参加するなど活動を広げている。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
これから会社どうするの
今月号の記事
米国で広がるCMSテンプレートビジネス「スキニング」
優れたバナーを作って副収入を手に入れよう
「遊んでもらえる名刺」
これから会社どうするの
さてさて、デビルロボッツのババ(ジョーカー)=デビルオブツ(ときどき切り札)です。
連載1回目を無事クリアし、真価が問われる2回目
巷をトリコにするクリエイティブのA(エース)に、斜め目線のジョーカーどもが果たしてどんな角度で切り込むのか
意外とまっとうなトークに収まりました。
クリエイティブで食っていくための、なるほどな視点がここに
(今回、激しい下痢によりヨシムラヨシゾーは欠席
いきなりベタな質問やけど、文原くんはアドビのソフトは使ってる。
ほぼアドビかな
ソフトのこと聞いておきながら(笑)、今回の対談では、実はソフトをうまく使うことよりも、大もとのモノづくりに対しての姿勢とかバックグラウンドを話していただきたいなと
クリエイティブで食うためのノウハウとか
今GOLDEN EGGSはメディアに露出してて勢いすごいけど、例えば10年後に向けて今のままでやっていくんじゃなく、もっと幅を広げたり表現の方法や露出の仕方を変えたりしていかなアカンなーとか、そういう葛藤ってある。
あるけど、それは葛藤っていうほどじゃないねー
仕事の選び方は直感的に
自分にしかできないか、他の人でもできるか
無理してはやらない。
無理してできなかったら、逆に迷惑をかけてしまうので
今CMをメインにやってるけど、今後やってみたいことはある。
やっぱり基本はオリジナルアニメだね
DVDを作って、そこに付いてくるCMやデザインをやったりとか
文原くんの肩書きはイラストレーター
いや、イラストもデザインもディレクションも、全部
全部自分でやらんと、あのテイストは出せへんもんなー
あの独特の声優さんは、自分で選んでるの
いや、あの声優は友だちだから(笑)
あ、そうなんやー
(笑) 映像に付ける音楽は
別の人が作ってる。
音楽は自分のイメージに合ったありモノを最初に付けておいて、こういうイメージでお願いします、って感じで
似たアレンジのものを作ってもらったり
今は営業しなくても、代理店とかから仕事が入ってくる感じ
いろんな人が声かけてくれるよ
やった仕事を見た人がまた声かけてくれたり
キャパシティの限界もあるしなー
組織じゃないから、数はこなせない。
だから断ることも多いかな
他の人がどれくらい断ってるのかわからないけど
アニメはめっちゃ制作時間かかりますしね
企画から考えてるし
1枚や2枚じゃないからね
3Dのソフトを使うっていうことは、コマで描いていく感じじゃないよね
モデリングしてそれに動き付けて
もともとそっち方面だったし
CGの、技術屋というか
ソフトは何を使ってるの
実写を撮りたいと思わないんですか
ライバルが多いところに行きたくないんですよ(笑)
実写はライバル多いでしょ(笑)
なんでオレがこういう考え方になったかって考えたことがあって、オレらの世代って第二次ベビーブームの人口がけっこうヤマのときで、受験戦争とか激しかったんですよ
オレは受験戦争負けた派だから、そうなるともう劣等感というか、競争に勝てない。
みたいな精神が備わっちゃって
で、みんなががーっと行くところの端のほう端のほうを通ってきたから、今に至るみたいな(笑)
こっちが空いてるやん
アニメで誰もアドリブやってないじゃん、じゃオレやっちゃおう
オレは四番手ぐらいを行くクセが付いてしもたわー(笑)
逆に四番手ぐらいが全体が見やすくていいかもね
トップは周りが見えなくて迷いやすいかも
トップの人間は「あ、そういうとこあったんだ。
」って見抜けなかったり
トップはトップしか見いひんからなー
文原くんは、みんなが何を残していきよるかなーって見てる感じなんや(笑)
こぼれたモノをね(笑)
もうエコですよ
拾って集めるみたいな(笑)
メンバー同士で会話ってしてるの
最近はGW前にしゃべった(笑)
仲が悪いとかは全然なくて、互いに距離をとりあう、みたいな(注:デビルロボッツは5人組)
それはおもしろい関係だねー
オレは会社としてこうなっていくことは、すごい自然なことやと思うんよ
周りで仲いい友だちが、一緒に仕事やろう、お店出そう、ってやると、だいたい喧嘩別れしてるから
オレも今友だちと会社をシェアしてるけど、仕事もお金もセパレートしてる。だからけっこううまくできてる。
デビルは収入も全部同じで、よく仲良くやっていけてるよねーーー(笑)
キャラを作るキタイさんが看板としていて、でもキャラだけじゃなく、企画書作ってディレクションもして、Webや映像も作る。
トータルでやってるという意識をみんなが持ってることは大きいと思いますよ
文原くんはもっと会社を組織化するつもりはないの
それはやらない。
アシスタントを1人2人入れるぐらいは考えてるけど
組織にしたら給料払ったり保険入ったりと、そういうことに追われるから
ホンマ仕事以外にやらなアカンことが恐ろしいほどあるよ
人が増えたらしんどいことがいっぱいある。オレは外に出てなんぼみたいなことも多くなった。
もう自分で作るのイヤやもん
2年ぐらい前からディレクションに徹しよう思って移行してきた。少ない予算のときは自分で作ることもあるけど、しっかりした予算があるときは、自分では作らない。
さすがに40歳前でガリガリ作るのはなー
文原くんみたいな職業はいくつになってもその肩書きで机に向かってできる仕事やから、スゴイ羨ましいと思う。
爺さんになってもやりたいし
キタイくんも仕事が人生の一部になってるしなー
オレらのスタイルもかぶるクリエーターがあんまりおらへんけど、文原くんも今周りを見て「オレとかぶってるなー」って思うクリエーターいる。
うーん、いないかもね
これからマネする人がいっぱい出てくるんじゃないですか
でもそれはね、マネして欲しいと思ってる。
マネされるってことは認められたってことだし
オレらも海外行って初めてパチもん(ニセもの)見たとき、すっっっごい嬉しかったもん(笑)
パチもん作られたからいうてなんの変化もないんやけどね(笑)
この10年間、売り上げほとんど伸びてないし(笑)
いやー、でもオレはその方がいいと思うなー
右肩上がりっていうのはあんまり好きじゃなくて
右肩上がりになっちゃうと、同じ仕事しててもちょっと下がっただけで、オレ頑張ってないんじゃないか、って焦りが出てくるし
横ばいがいいねー
問題はどのラインで横ばいか、いうことやねん
昔に比べて経費は上がってきてるから、経営的には全然ラクじゃない。
Webの仕事もけっこう厳しいし
Webは二極化がほぼ終わった感じかな
同じところが同じようなサイトを作ってて
そこからこぼれてくる仕事をどうやって取っていこうかなーと
自分らがどうするのか、会社としてどうするのかとか、毎日考えてるよ
メインで使用しているソフトは弥生会計
いえ、違います。副業として、Web関連や色々なメディア制作のディレクションなどをしています。特技は予算交渉とリスケです。
仕事に年の功を発揮できていないことが日々の悩み
プランニング、コピーライティング、音楽制作が意外とできます。
今は営業力向上のためにスマイル修行中
アニメーションからデザインまで幅広くこなすが、イラストが全く描けない。トーフ親子を描いてくださいと言われるたび「描けないんです。
」と謝り、相手に残念な顔をされる機会多数
キャラクター業界とは全く違う道に侵入中
れっきとしたデザイン会社として登記
グラフィック、キャラ、ロゴ、広告、カタログ、パッケージ、Webサイト、ムービー、プロダクト、音楽の企画・制作を手掛ける。
クライアントはトイメーカーからレコード会社、菓子店、教育、アイドル、社団法人、友達まで
でのオンエア以来、様々な反響を巻き起こしているアニメ
米国の田舎町を思わせる伝説の街「ターキーズヒル」を舞台に、そこに暮らす「金の卵」描いた作品
毎回、個性豊かな人間(や七面鳥)のぶっ飛んだ日常が描かれる。
60人を超える登場キャラの声を担当している声優さんはなんと二人だけ
キャラのセリフでは、ついつい使いたくなっちゃうおもしろフレーズ連発
CMではディレクターもつとめます。
はGOLDEN EGGSの製作者である文原さんを中心として2008年に設立したアニメーションスタジオ
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
米国で広がるCMSテンプレートビジネス「スキニング」
優れたバナーを作って副収入を手に入れよう
「遊んでもらえる名刺」
これから会社どうするの
「沖縄で、クリエイティブカンファレンス
「ほんきでクスール」第13期
0を一から学べる講座
Flex 3によるリッチクライアントアプリの開発
大重美幸のAIRアプリケーション制作入門
Webサイトを構築する必須知識をCS4でマスター
Flashコンテンツをゲームプラットフォームへ展開する技術、ビジネス
0をハンズオンで学ぼう
「沖縄で、クリエイティブカンファレンス
Web クリエイティブのためのデザインとアイデアに満ちたカンファレンス「dotFes」
2008年10月に東京・新宿の廃校で開催されたイベントが、今年はなんと、初夏の沖縄に帰ってきます。「ものづくり」の考え方・楽しさを実感できるわくわく感に満ちたプレゼンテーション、Web を超えた最先端のメディアシーンを交えたセッション、そして東京で活躍するクリエイターと地元沖縄で活躍するクリエイターが参加する噂のクリエイティブ大喜利など、多彩なカリキュラムでお届けします。
詳細は こちら
0 入門講座です。講師は、ロクナナ Flash デベロッパーであり、ロクナナワークショップ講師 加茂雄亮です。
無料 ※事前申し込み不要
詳細は こちら
「ほんきでクスール」第13期
Flash コンテンツ制作には技術を習得することと同時に、「どんなものを作るか」というアイデアを考えることが重要です。「ほんきでクスール」では受講者みずから企画を考えてもらい、それをもとに作品を作っていきます。見学も随時可能ですので、ご興味のある方は是非ご連絡ください。
詳細は こちら
これから Flash を学習しようという方を対象に、アプリケーションの基本操作から新機能はもちろん、その活用方法までしっかり学習していきます。わかりやすいサンプルを使って一緒に実習を行うため、Flash コンテンツの基本概念や実践的な制作方法も身につきます。また、Flash CS3 までとの操作方法や基本概念の違いに戸惑いを感じている方にもお勧めの講座です。
詳細は こちら
0 を一から学べる講座
0 はちょっととっつきにくい・・」という方のためのコースです。0 の違いや、クラスについての説明など、オブジェクト指向プログラミングの初歩から学ぶことができます。
0 では外部のライブラリを使うことが多くなりますので、ライブラリの使い方を紹介しながら、自分の企画した作品を制作していくことで、ActionScript3
0 を学んでいく講座内容です。見学も随時可能ですので、ご興味のある方は是非ご連絡ください。
詳細は こちら
Flex 3 によるリッチクライアントアプリケーションの開発
Adobe Flex 3 によるリッチインターネットアプリケーション開発にあたり、知っておくべき基礎事項が凝縮されている重要なカリキュラムです。そのため、Adobe Flex 3 のトレーニングコースフローにおいて、一番最初に受講することが推奨されています。
詳細は こちら
ActionScript でアニメーションを扱ううえで重要な、座標空間に関わる数学の基本を学習します。0プロフェッショナルガイド 』をテキストとしてプレゼントいたします。
詳細は こちら
0 の基礎知識がある方を対象に、AIR アプリケーションの制作方法を学習する入門講座です。AIR 専用に追加されたクラスを、実際にサンプルを1つずつ制作しながら習得していきます。
詳細は こちら
月刊インタラ塾、第11回はゲストに「カンヌ国際広告祭」「D&AD Awards」「文化庁メディア芸術祭」などの国内外のアワードで多数受賞している 勅使河原一雅氏(qubibi)をお招きし、「勅使河原一雅のクビエイティビティ」というお題のもとトークセッション形式で語っていただきます。ふるってご参加ください。
詳細は こちら
ビギナー向けの「ベーシックトレーニング」では実際に Web ページを作成しながら、実務で Web サイトを構築することを視野に入れたサイト定義、CSS、画像の挿入などの基本操作とサイト作成の基本的流れを学習していきます。「アドバンストレーニング」では、より実践的な作例をもとに、テンプレートの活用、ロールオーバーなどのデザインテクニック、ウィンドウの設定、効率的なサイト管理法などを学びます。
詳細は こちら
0 でプログラミングの基本を学習する入門講座です。0 の基本を適切に理解する事を目的に、独学ではなかなか理解しにくい概念的な部分を分かりやすく解説します。※お好きな1講座からお申し込み頂けます。
詳細は こちら
・画面構成の解説
・Web サイトを作成するためのワークフロー
・Web サイト構築の必須知
・サイトのナビゲーション
・Web サイトのアップロード
詳細は こちら
本トレーニングは Adobe Flex 3 による AIR デスクトップアプリケーション開発の基礎知識を、ハンズオン(実習)を通して2日間で習得するアドビ認定トレーニングです。また、トレーニングを修了すると、Adobe AIR 開発の基礎知識を習得し、さらにウィンドウ制御、ファイルシステムの取り扱いやローカルアプリケーション間の通信、ローカルデータベースへのアクセスなどの各種APIを利用したAIRアプリケーションを構築できるようになります。
詳細は こちら
ボタンを使ったスライドショー等、Flash でのインターフェイス作成を題材に、基本的なスクリプトを理解するビギナー向けの講座です。
英語を初めて習うとき、まず英会話からスタートするでしょう
あいさつに始まって、自己紹介や買い物といったさまざまな場面における会話のパターンを覚えることにより、日常会話の進め方を知り、英語に親しむことができます。細かな文法には深入りせず、スクリプトというものはどう記述し、それがどのように動作するのかということを理解していただきます。
詳細は こちら
Flashコンテンツをゲームプラットフォームへ展開する技術、ビジネス
Flashインタラクティブコンテンツ、ゲームに携わっているFlash開発者より、パッケージゲームの開発に携わりたい、もしくは大手ゲームプラットフォームに向けてのコンテンツを開発したいというお声を頂戴します。その要求に対応できるのがScaleformのテクノロジーです。最新のゲームプラットフォーム向けコンテンツ開発が可能です。当セミナーでは、Scaleformの日本担当よりScaleform GFxの紹介をいただくと共に、日本での実事例であるホームメディア(リトルスタジオインク)の制作者から、具体的な制作実例とゲームプラットフォームのビジネスについてお話をいただきます。
詳細は こちら
サーバとデータ通信に関する必須知識を習得
詳細は こちら
0 をハンズオンで学ぼう
0 を一人につきPC一台の実習環境で学ぶハンズオントレーニングです。0 プロフェッショナルガイド」(マイコミ)をテキストとして、著者である野中文雄氏が直接指導にあたります。
0 の基本と処理の組み立て方・考え方を解説
0 の基礎を終えた方を対象に、MovieClip インスタンスをインタラクティブにアニメーションさせるムービーを作成しながら、座標と座標空間の扱い、条件判定、配列や Object の操作などについて学びます。そして2日間講習の「ステップ3」では、3D風に回転するアニメーションのスクリプトを出発点に、クラスの定義やイベントの配信までデザイン(設計・構成)を展開していきます。三角関数や数学的 な考え方、クラスの応用についても触れます。
詳細は こちら
0初級講座」を前半と後半の2講座に分けて開講いたします。0 の基本的な考え方、シンタックスの基礎、カスタムクラス定義の方法、スクリプトでのアニメーションなど、プログラム言語としての基礎を学習します。0 の基礎知識を習得した方を対象(本講座前半を受講相当)に、Flash ならではのアニメーション表現、外部イメージの読み込み処理や XML の読み込みといった、実際のコンテンツ制作場面で必要とされるテクニックを学習します。0 でのコンテンツ制作において重要なカスタムイベントの基礎も本講座(後半)で学習します。※お好きな1講座からお申し込み頂けます。
詳細は こちら
出演は、こもりまさあき、片野 鉄也(アイエイトワン)
詳細は こちら
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
大重美幸の「これ見落としてませんか
今月号の記事
小野田智の「世界の制作会社からコンニチハ
大重美幸の「これ見落としてませんか
しかし、どちらにせよ3Dは難しいと途中で投げ出してしまった人も少なからずいることでしょう
ちょっとでもいいから3Dを使いたいなあと思っているなら、まずは簡単なことから始めてみましょう
Y軸を回転させる。
CS4に3D機能が搭載されたとき、まず最初に試したのは軸の回転でしょう
と聞いてピンと来なくてもサンプルを見れば一目瞭然
Y軸回転なら、竹とんぼを両手に挟んで回す回転と同じです。例えば、次のようにムービークリップインスタンスedge_mcのrotationYに連続的に数値を加算するだけでイメージがY軸で回転します。回転するイメージは3Dらしく投影法で変形し、裏返しになるとイメージが反転します。rotationXでの回転は鉄棒につかまって前回りをする回転、Z軸での回転は当たりを書いたダーツの的を手で回す回転です。ムービークリップインスタンスをY軸で3D回転させます。fig1 ムービークリップインスタンスがY軸で3D回転します。Y軸の周りを飛ぶように回る移動とは違います。z座標で奥行きを利用する。3D座標を扱うということは、当然ながらxy座標に加えてz座標があります。z座標はステージに矢を突き刺したように手前から奥へと進む座標です。Flashのステージに置いてあるインスタンスはz座標の値が0の状態で、値を大きくするとインスタンスはステージよりも奥へと遠ざかってどんどん小さくなります。逆に値をマイナスにするとステージよりも手前にある位置になりサイズが大きくなります。次の例はedge_mcがz座標3000の遠い位置から手前へ飛んでくるアニメーションです。z座標の値が-500より小さな値になり、画面をふさぐほど近づいて大きくなったならば、zの値を3000に戻して再び遠くから出てくるようにします。また、遠くの位置では霞むようにz値に合わせてアルファ値も計算しています。遠くから前転しながら近づいてくる。//遠くから回転しながら手前へ飛んでくる。//遠くへ戻す。//手前に飛んでくる。//前回りする。fig2 ムービークリップインスタンスが遠くから回転しながら飛んできます。
3D空間でのインスタンスの重なり
今のサンプルを発展させて、流星群のようにたくさんのedgeの文字が飛んでくるサンプルを作ってみましょう
次のSpaceEdgeクラスは、edgeと書いてあるオブジェクトが遠くから手前へ飛んでくるインスタンスを1個だけ作るクラスです。インスタンスが手前へ飛んでくる部分は先のスクリプトと基本的に同じです。zの値を徐々に小さくすれば手前へ近づき、rotationXの値を加算すれば手前に回転します。SpaceEdgeクラスのインスタンスをたくさん作れば、edgeの文字が流星群のように飛んでくるムービーになります。fig3 ムービークリップインスタンスが流星群のようにたくさん飛んできます。
遠くから手前へ飛んでくるインスタンスを作るSpaceEdgeクラス
//ステージに追加されたら実行する。//毎フレーム実行する。//遠くへ送る。//最背面に移動する。//手前に近づいてくる。
//前回りの回転
SpaceEdgeクラスから複数のインスタンスを作ってステージに配置するスクリプトはフレームアクションに書いています。必要な個数だけインスタンスを作ってステージに追加するだけなので簡単に思えますが、ここで大事なポイントがあります。それはインスタンスの重なりの問題です。z座標が大きいからと言って、表示オブジェクトが下の重なりになるということはないのです。インスタンスの位置が3D空間でばらつくようにxyzの座標の値をランダムに決めた場合、近くの物が遠くの物よりも手前の重なりになるようにするには、z座標を比較してインスタンスの重なりを決める必要があります。これを解決する方法はいくつかありますが、ここでは最も簡単な方法をとります。インスタンスの個数分のランダムなz座標の値を作って配列に入れ、それをソートして大きな順に並べ替えておきます。インスタンスを作成する際に配列から値を順に取り出してz座標に指定すれば、遠くにある物から順に作ることになるので、そのままステージに追加すればよいことになります。//値を大きな順に並べ替える。あと1つ忘れてはならないのは、インスタンスが手前まで飛んできて再び遠くの位置に戻す場合です。このときにも重なりが変わるので、重なりも一番下に再設定します。//遠くへ送る。//最背面に移動する。さて、今回はここまでです。
次回は写真をクリックで裏返す、「ちょっとした裏ワザ
」を紹介します。
エッジニュースレター連載記事 : 大重美幸の「これ見落としてませんか
第2回 外部 swf ファイルのシンボルを利用する。第3回 配列の値の並べ替えをマスターする。第4回 FLV をウィンドウ/画面全体に表示する。
第5回 スクリプトでフィルタを適用する方法
第6回 柔軟・多彩・高速な画像処理を実現するシェーダーフィルタ
(おおしげよしゆき)
日立情報システムズ、コミュニケーションシステム研究所を経て独立
執筆、講師、ソフトウェア開発を行う。
趣味はサーフィンとジョギング
著著は約55冊
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
小野田智の「世界の制作会社からコンニチハ
大重美幸の「これ見落としてませんか
2010年4月12日に発表になったCS5、パワーユーザー様の新機能プレビュー記事を中心に紹介した4月号だったのですが、アクセス数は上記の通りとなりました。5月28日に製品リリースとなるので、その後より多くの皆様にご利用いただきより多くのtips記事を紹介していきたいと考えております。
0 書き方教室
将来を見据えた、新たなHTML内SWF埋め込み用コードの考察
0書き方教室の需要も、これからも増え続けていくことでしょう
そしてFlex 4マスターシリーズも堂々のランクイン
(今月よりポータル系を削除し、個々の記事のみのアクセス数でトップ5を出してまいります)
サイトを効率よく制作したい、管理したいという方にオススメなのが、Dreamweaverのテンプレート機能です。テンプレート機能を使えば、サイトの共通する部分を1つのファイルで管理でき、数十~数百ページ規模のサイトでも、1つのファイルを編集するだけで全てのページに対して修正や追加を行うことができます。テンプレート機能を知りたい・使いこなしたいという方は、ぜひ、株式会社ピクセルグリッドの小山田晃浩さんの連載「テンプレート機能を使ってみよう」をお読み下さい。パート1では、テンプレートの基本的な機能や使い方を解説しています。
パート1:「編集可能領域」と「オプション領域」の使い方
テンプレート機能は知っているから、もっとディープな使い方を知りたいという方には、パート2はいかがでしょう
パート2:コピペで利用できる、複雑なテンプレート式のサンプル
「テンプレートタグ」や「テンプレート式」を使い方を、以下の利用シーンを想定したサンプルをもとに解説しています。サ ンプル3 : 条件式でサイドバーの出し分けを行う。サ ンプル4 : 入力した内容に応じてナビゲーションの出し分けをする。
サ ンプル5 : 2倍数のブロックにだけ特別なclass属性を指定し、ストライプ表現を管理
テンプレート機能を使って、仕事を効率化しましょう
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。50にも及ぶセッショ ン、ハンズオン、そしてキーノートを通じて、アドビの技術が Web というプラットフォームを進化させ、さらには Web を超えたプラットフォームに変化させようとしている様子をダイジェストで紹介します。
テクノロジー、アイデア、人との繋がりで生まれる新しいコンテンツ
最先端のアドビテクノロジー、新たな発見、広がるクリエイティブの源泉
インスピレーションがクリエイティブに直結するセッションの数々
2007年の締めくくりに習得しておきたい各種セミナー情報を一挙公開
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
繋がり、発見、刺激に満ちた2日間
2007年11月1日~2日で行われた50にも及ぶセッショ ン、ハンズオン、そしてキーノートを通じて、アドビの技術が Web というプラットフォームを進化させ、さらには Web を超えたプラットフォームに変化させようとしている様子が、詳細に披露されました。現在の Web 開発は、言うまでもなく、デザイン面とエンジニア面の両方がそれぞれの方向で研ぎすまされていっています。そして Web デザインと Web 開発の統合スイートをもつ唯一の立場ともいえるアドビは、デザイナーとエンジニアの間に架け橋を作ることで、優れた機能、デザイン、ユーザインタフェイスが一丸となったコンテンツが生まれ、それが結果、優れたユーザ体験に繋がることを目標としています。初日に開催されたキーノートの主題は、まさにそれでした。
Flash がビデオを扱えるようになったことで、この数年で劇的に変革した Web と映像の融合
アドビシステムズ代表取締役社長のギャレット・イグルは、キーノートの壇上でこう語りました。0 という3つの事象が同時に起こっている現在、コミュニケーションのスタイルは変化していく。
アドビはツールとアプリケーション、アイデアでもって、人々のコミュニケーション方法を変えていく」
そして、特に日本において重要となる携帯電話へのアプローチでは、NTT ドコモの執行役員マルチメディアサービス部長である夏野剛氏が壇上において、携帯電話が FlashLite と Acrobat をサポートしたことで、優れたデザインやファッション性、直感的に扱えるユーザインタフェイスを獲得しつつあることを明確に示しました。さらに2日目のキーノートは、初日に語られた「優れたユーザ体験」が国内のサービスベンダーにおいてどのように実践されているか、その具体例が示される場となりました。
何万人ものユーザが毎日のように利用することになる RIA から、フィジカルコンピューティングのような個人の知的好奇心の探求に至るまで「ActionScript 3
0 あるところに Flex あり」という状況が加速しています。
最後に、今回参加できなかった方もぜひ次回の Adobe MAX はお見逃しないよう
Adobe MAX は、カンファレンスである一方、ユーザ同士の出会いの場、再会の場でもあります。さらに、アドビが現在ラボの中で開発を進めている技術を一足も二足も先に見られる「Technology Sneak Peek」が好奇心をくすぐり、日が落ちると会場内のホワイエには食事や飲み物が並べられ、ジャズシンガーの歌声が響きます。久々に出会うかつての仲間と驚きの再会を果たしたり、今まで直接会うことのなかった仕事相手とゆっくり話せたりと、普段の仕事の枠を超えた、仲間同士が繋がりあえる場所でもあったわけです。
クリエイティブの原石は、こういう場にこそ転がっているのでしょう
Connect ─ テクノロジー、アイデア、人との繋がりで生まれる新しいコンテンツ
Discover ─ 最先端のアドビテクノロジー、新たな発見、広がるクリエイティブの源泉
Inspire ─ インスピレーションがクリエイティブに直結するセッションの数々
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
繋がりで生まれる、新しいコンテンツ
今月号の記事
Adobe MAX Japan 2007は、アドビが開発者やクリエイターに情報や知識をシェアし、それが作品やコンテンツに活かされ、そのコンテンツが多くのユーザに利用されることでさらなる発展に繋がるというマッシュアップの土台となる場です。基調講演で披露された技術がユーザの手でコネクトされ化学反応を起こすことで、コンテンツは爆発的な力を持ちます。そして、見逃してはいけないのが人と人との繋がりです。
Adobe MAX Japanではいたるところで、出会いという繋がりや再会という繋がりが生まれ、これもまた、次のコンテンツの起爆剤となるでしょう
あらゆるユーザのアイデアや情報との関わり方に変革をもたらすアドビ プラットフォーム テクノロジーの現在
「アドビはモバイルを含め今後展開されるクロスプラットフォームの流れの中で、開発者やクリエイターと情報や知識を共有し、RIAやユーザ体験についての課題を一緒に乗り越えていきたいと考えている」としたうえで「新しいコミュニケーションの変革を日本で起こしていきたい」と高らかに宣言しました。
続いて、米国アドビシステムズ社のプラットフォーム事業部担当シニア バイスプレジデント兼チーフ ソフトウェア アーキテクトであるケビン リンチが登壇し、「素晴らしいユーザ体験を提供するためには、まずコンテンツこそが王であり、コンテンツの魅了にフォーカスすることが重要
ユーザが期待する情報へのアクセスをいかに簡素化できるようにするのか、さらにGUIに意味のある動きを持たせることが重要になってきます」と、新しい次元のユーザ体験を提供する方法論について説きました。264へ対応することで、PCのフルスクリーンにも耐えうる720pレベルの高画質動画の配信が可能になります。そして新しいメディア再生アプリケーションである「Adobe Media Player」で、RSSでフィードされる情報を元に動画再生を行ったり、オフラインでも使用できるなど、動画コンテンツにおけるユーザ体験を大きく広げるメディアプレーヤーであることをアピールしました。
■AIRによるリッチインターネットアプリケーションの新次元
ブラウザ上では行えなかったドラッグ&ドロップによるPCへのデータ保存や、ローカルにあるWord書類を一括でアップロードするといった連携がAIR版では可能となっています。comが開発したJavaScript&HTMLベース営業支援ツールでは、ネットに繋がっていない状態でローカルマシンにあるvCard形式の名刺データをドラッグして読み込み、その後ネットに繋がるとサーバ上の顧客情報が自動的に書き換えられるデモも披露されました。すでにあったWeb用のコードをAIR化するのに要したのは、開発者1人で2〜3日だけだったと、AIRアプリケーション作成の容易さを強調しました。0はほぼ完成状態にあり、正式リリースももう間もなくで、完成を前により多くのユーザからのフィードバックを求めていると結びました。
「優れたデザインやファッション性、直感的に扱えるユーザインタフェイスを可能にするFlashは、携帯コンテンツに変革をもたらしており、コンテンツ分野におけるドコモの収益性に高く貢献しています」
次にFlexについてテッド パトリックが登壇し、現在オープンソースとして開発中のFlex 3についての新機能が紹介されました。リファクタリングへの対応、メモリとパフォーマンスをプロファイリングすることによる内部動作の視認性向上、変数、メソッド、プロパティを複数のクラスをまたいで検索することができるようになるなど、より生産性の強化が図られています。「Thermo」はデザイナーが一切の開発コードを記述することなく、PSDファイルなどの素材を元にリストやメニューといったUIデザインやアニメーション効果の作成を行えば、それがMXML形式で保存され、Flex開発者に渡すことでデザイナーとエンジニアの間でスムーズな協業作業が行えるという「RIAデザイン用ツール」です。
■AIRによるリッチインターネットアプリケーションの新次元
アドビからのプレゼンテーションが一通り終わったところで、株式会社NTTドコモ執行役員 マルチメディアサービス部長夏野剛氏が壇上に招かれ、Flash LiteならびにPDF機能を搭載した携帯端末の展開と、コンテンツ分野における堅調さをアピールしました。
より詳細なレポートはこちら
アドビ システムズが考える未来に向けた。
テクノロジーの可能性と日本市場に対しての展望
■RIAのバックエンドに革命を起こすアドビ
ケビン リンチの紹介で登壇した米アドビ システムズのテッド パトリックは、バックエンドを担う製品である「LiveCycle ES」を紹介しました。ケビン リンチが再び登壇し、Flexを用いコラボレーションアプリを製作する「CoCoMo」、音声データをRIAに統合する「Pacifica」、ドキュメント共有のためのフリーストレージサービスである「SHARE」、そしてイメージデータを管理し目的に合わせたフォーマットと解像度での提供を簡単に行えるScene 7 Imagengといった、開発中のプログラムを紹介しました。続いて、サイバーエージェント、ヤフー、楽天という日本を代表するインターネット企業である3社が登壇し、自社のRIAへの取り組みについて話しました。
■サイバーエージェントの事例
最初に登壇したのは、株式会社サイバーエージェント 新規開発局局長の長瀬慶重氏と、同社新規開発局 RIAテクニカルディレクターの矢内幸広氏です。
サイバーエージェントが取り組んだ事例を、矢内氏のデモを交えつつ紹介
さらに矢内氏は、机の上で写真を広げるように、楽しく写真の整理を行うためのAIRアプリケーションを披露
「サービスとサービスをつなぐブリッヂ的なところを目指している」と話し、Adobe AIRの方向性のひとつを示しました。
■ヤフーの事例
ヤフー株式会社の大蘿敦司氏からは、Yahoo
メールについて大蘿氏は「もともとは米国で進めているAjaxベースのシステムのローカライズを進めていましたが、レスポンスの問題を抱えていました。そこで試しにFlashで作ってみたところ、レスポンスが高くて使いやすい。いつローンチできるかはわからないが、順次テストを行っていきたい」と話しました。また、その開発面では「Flex 2が開発スピードの向上に役立つ」と話しました。
■楽天の事例
楽天株式会社からは取締役常務執行役員・安武弘晃氏が登壇
安武氏は、同社のショッピングモール「楽天市場」で爆発的な売り上げを誇るショップのサイトを見せながら「売れている商品は必ずしもクールなものではない」と紹介し会場の笑いを誘いつつ、「商売の情熱×適切な情報×リッチなインタフェイスの可能性」というテーマについて話しました。例えば、ユーザが楽天市場の商品を検索して(楽天市場内での)「お気に入り」に入れるという作業を行う際に、HTMLベースのコンテンツでは作業性に限界があることを示し、それらの操作を直感的に、ドラッグ&ドロップを用いてスムーズに行うことができるAIRアプリケーションのサンプルをデモしました。
より詳細なレポートはこちら
ここで紹介したようにAdobe MAXでは、プラットフォーム間のコネクト、コンテンツ同士のコネクトという技術的な課題とソリューションが数多く提示されました。そしてその一方で、Adobe MAXはユーザ同士の出会いの場、再会の場でもあります。
これから紹介する「スゴロクCS3 キューブアワード」は、延べ200名以上の応募作が集まったこのアワード
イラストレーターの白根ゆたんぽ氏、そして映像作家/漫画家のタナカカツキ氏、株式会社バスキュールの田中謙一郎 氏、株式会社ピクルスのタナカミノル氏という“スリータナカ”の4名を審査委員として迎え、全10部門16作品の表彰が行われました。クリエイター同士がAdobe MAXという場で和気あいあいとコネクトしていく場となりました。
では、応募された方々の受賞の言葉、さらに審査員からのコメントを交えて、受賞された作品を紹介していきましょう
受賞の言葉●「アイデアの元は自分の彼女なんです。
さっきまで普通だったのに突然怒りだすのを様子を見て、面白いなって思い、このキューブを作ってみました」
審査員から一言●「ストーリーも面白いし、キューブの中に映っている時計の針がきちんと動いているなど、細かいアニメーション作りが良いですね」
横尾直耶「ブタミンチくん」
受賞の言葉●「お肉屋さんの店先にある可愛い豚の置物
でも店の奥ではこのキューブのようなことが行われているのかな、とイメージしました。
PTAとかに怒られるかもしれませんね」
審査員から一言●「これはもう、インパクトの勝利です」
受賞の言葉●「今日、実は僕の誕生日なんです」(受賞の言葉、終了)
審査員から一言●「なんか
良いんですよね
なんとなく“良いのでは
”で残っていった作品でした」
受賞の言葉●「たぶん皆さん、いろいろと作り込んでくると思ったので、むしろシンプルな作品を心がけました。
丸が美川憲一ばりにお色直しするというコンセプトです」
審査員から一言●「面白い作品だというところで、これも最後まで残っていきました」
オカバタ「永遠のウサ」
受賞の言葉●「自分の中でずっと持っていたキャラクタを、ずっと動かしてみたいと思っていました。
それを実現したのがこの作品です」
審査員から一言●「これはグランプリをあげたいくらいでした。
見ていて全然飽きないんです」
※作者都合のため表彰式には出席されませんでした。ご受賞おめでとうございます。
受賞の言葉●「キューブで何か面白いことは
って考えたら出てきたものです。
犬の写真を撮って参考にしたんですが、犬が写真嫌いなので、大変でした」
審査員から一言●「普通は犬を題材にすると可愛いものになるはずなのに、これは凄いインパクトでした」
0でバっと作ったものです。
Flashの懐の深さをあらためて感じました」
審査員から一言●「クオリティがとても高い。
キューブの中でBRAVIAの海外CMのような世界観が垣間みれました」
受賞の言葉●「まさか自分が受賞するとは思っていませんでした。
いいんですか
(着ているTシャツを見せて)あと、このTシャツは自分で作って学園祭で売ってたものです」
受賞の言葉●「ずっとガジュマルの絵本を作っていたんですが、あまり受け入れられなかったんです。
でも今回こんな賞をいただけて、すごくうれしいです」
審査員から一言●「スゴロクに乗せて音楽を流すとパワーを感じました」
受賞の言葉●「キューブだと普通はマウスを使って何かすると思うんですが、そこであえて携帯電話を使ってみたかったんです」
審査員から一言●「キューブにQRコードを乗せていろんなメッセージを見せるという、キューブという発想を見事に壊してくれました」
受賞の言葉●「スゴロクCS3の画面を見たらコレクションのマスが15個あったので、ここを全部自分の作品で独り占めしたいと思い、15パターン応募しました」
審査員から一言●「スゴロクの中で自分の世界観を再構築するパワー、15個も応募した心意気に惹かれました」
◎白根ゆたんぽ賞
西澤 拓「すずちゃん」
受賞の言葉●「審査員がいい加減、審査に疲れたころにツボったんじゃないかと思っています」
審査員から一言●「ちょっと気持ち悪いけど面白いです。
すずちゃんを見たいと思わせる魅力があります」
千金楽はるな「踊る魚河岸ガール」
受賞の言葉●「ドラムロールやスポットライトを浴びるなんて初めて
築地に住んでいるので、本物の魚河岸ガールを毎日見ていて、憧れているんです」
審査員から一言●「これは満場一致で決まりました。細かい描写、可愛らしさ、時間によって様子が変わるというアイデアも面白い。
そして何よりキャラクタが魅力的でした」
受賞の言葉●「大阪から来たのに受賞せずにこのまま帰るのか
とドキドキしてしまいました。絵が描けない自分の作品が評価してもらえてびっくりしています。
いや、狙い通りだったかも」