これらは、「様々なデバイスで一貫したランタイム環境を実現する」ことを目指したOpen Screen Projectにおける最初の取り組みであり、PC以外のデバイスでもPCと同じようなリッチなユーザー体験を提供することを可能にしてくれます。本記事では、デモ映像を交えながら、実際にどのようなユーザー体験が提供可能となるのかを紹介します。開発者の皆さんのコメントと共に紹介します。
1のベータ版は2010年上半期に公開予定
アドビ システムズが推進役を務めるOpen Screen Projectでは、様々な業界の大手企業約70社と協力しながら、PC/ネットブック/携帯電話/スマートフォン/タブレットといった消費者向けエレクトロニクスデバイスにおいて一貫したランタイム環境を実現できるように取り組んでいます。1にはモバイル環境をサポートするための機能が満載です。例えば、以下のような機能があります(詳細は、本誌2009年10月号「モバイル対応だけじゃない。
1の特長を徹底紹介」をご覧ください)
モバイル環境に合わせたCPU&メモリマネージメント
モバイル向けに最適化されたSWF管理
マルチタッチとジェスチャー操作を検出
加速度センサーのサポート
デバイス方向に合わせた画面方向切り替え(画面位置調整)
モバイル環境上でFlashコンテンツが快適に動作するように、そしてモバイル特有の機能や操作性を活かせるように設計されており、PCとモバイル機器を分け隔てることなくリッチなユーザー体験を提供することができ、かつモバイルならではのユーザー体験を提供することも可能となっています。1へ対応するモバイル機器が既に登場してきています。1に対応する予定です。1ベータ版は一般公開されています。1ベータ版は、2010年上半期に一般公開予定です。つまり、モバイル向けAdobe AIRを通じて、単体のアプリケーションをモバイルデバイスに提供できるようになります。1のモバイル機能が活かされており、モバイル環境における動作の最適化、そしてマルチタッチ/ジェスチャー操作/加速度センサー/画面位置調整といったモバイル特有の機能や操作性をサポートしています。
1とモバイル向けAdobe AIRによって、どのようなモバイルユーザー体験を提供することが可能となるのか
1やモバイル向けAdobe AIRのベータ版を実装したモバイルデバイスでのデモ映像をご覧ください。tv」を利用しています。その他のモバイルデバイスを使ったデモ映像は、下記サイトからご覧いただけます。
そして、なんと既に
ぜひ、ダウンロードして、触ってみてください。iPhoneアプリの制作を1年半ほどやってきましたが、簡単なアプリならば、Flashで気軽に作成できるのはかなり便利です。高度なアプリの場合でも、Flashでコンセプトの実証実験を行い、最終版はObjective-Cで実装するというプロトタイピング的な使い方もできるため、実制作で重宝しそうです。左右の回転ボタンとジェット噴射ボタンで宇宙船を操作し、着陸ポイントに静かに着陸させるミニゲームです。「デベロッパー登録~アプリリリースまでのフローを確認する」と「Windows環境ですべて完結させる」ことを主な目標としていましたが、これらは一応達成できました。今回のアプリには操作的にも機能的にも「iPhoneらしい」ものはないのですが、それでもFlashで普通に作ったコンテンツが実機上で動くのは新鮮でした。0)が使えればiPhoneアプリを開発できる、という分かりやすい事例になったかと思っています。
4人のかわいい女の子のまえがみをぱっつんするアプリ
あなたの指のドラッグどおりに、おでこでぱっつん、ななめにぱっつん
さあ思うがままに、ぱっつんしてみてください。今回制作したアプリは、iPhone特有のコードというものは一切使用していませんので、書き出し方を変えればそのままWebでも公開できるようなものです。私はもともとこのアプリをObjective-Cで制作しようとして挫折した経緯があったので、iPhone上で動作させたときは「本当に動いた。」という驚きと同時に、感慨深いものがありました。同じような感覚を、Flashユーザーの皆さまにも感じて欲しいです。
モアイまわし
画面をタッチして、すべてのモアイが正面を向く場所を探すゲームです。縦画面、横画面どちらでも遊べ、いつでも変更することができます。0で制作したものであれば、ほとんどそのまま書き出せることに素直に驚きました。もちろん、公開するにあたっての手直しや工夫は必要ですが、アプリ制作の敷居は下がったと思います。最初に作ったのはiPhoneの向きに合わせてテキストが変わるだけのアプリでしたが、しばらく回して遊んでしまいました。韓国語(ハングル)の読み方をローマ字にしてルビ表示してくれる、シンプルな言語学習系アプリです。
韓国旅行のお伴にどうぞ
CPUが異なるので実行速度は違いますが、PCと同じFlashコンテンツがそのまま動きます。
今後アプリが増えるにつれて、型宣言が重要なコンパイル方式ならではの高速化手法や、cacheAsBitmap周りなど最適化ノウハウがたまってきそう
期待しています。ビデオや音声を取り入れたマルチメディアコンテンツ、タブレットインターフェイスに最適化されたナビゲーションなど、これまでの電子雑誌にはない要素が盛り込まれた新たな読書体験となっており、出版関係者でなくとも必見です。以上のように、デバイスやプラットフォームによって分け隔てることなく、素晴らしいユーザー体験を提供できる環境が整いつつあります。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
ワンパクの「もっと使いこなしてみよう
大重美幸の「これ見落としてませんか
第6回柔軟・多彩・高速な画像処理を実現するシェーダーフィルタ
小野田智の「世界の制作会社からコンニチハ
これらは、「様々なデバイスで一貫したランタイム環境を実現する」ことを目指したOpen Screen Projectにおける最初の取り組みであり、PC以外のデバイスでもPCと同じようなリッチなユーザー体験を提供することを可能にしてくれます。本記事では、デモ映像を交えながら、実際にどのようなユーザー体験が提供可能となるのかを紹介します。開発者の皆さんのコメントと共に紹介します。
1のベータ版は2010年上半期に公開予定
アドビ システムズが推進役を務めるOpen Screen Projectでは、様々な業界の大手企業約70社と協力しながら、PC/ネットブック/携帯電話/スマートフォン/タブレットといった消費者向けエレクトロニクスデバイスにおいて一貫したランタイム環境を実現できるように取り組んでいます。1にはモバイル環境をサポートするための機能が満載です。例えば、以下のような機能があります(詳細は、本誌2009年10月号「モバイル対応だけじゃない。
1の特長を徹底紹介」をご覧ください)
モバイル環境に合わせたCPU&メモリマネージメント
モバイル向けに最適化されたSWF管理
マルチタッチとジェスチャー操作を検出
加速度センサーのサポート
デバイス方向に合わせた画面方向切り替え(画面位置調整)
モバイル環境上でFlashコンテンツが快適に動作するように、そしてモバイル特有の機能や操作性を活かせるように設計されており、PCとモバイル機器を分け隔てることなくリッチなユーザー体験を提供することができ、かつモバイルならではのユーザー体験を提供することも可能となっています。1へ対応するモバイル機器が既に登場してきています。1に対応する予定です。1ベータ版は一般公開されています。1ベータ版は、2010年上半期に一般公開予定です。つまり、モバイル向けAdobe AIRを通じて、単体のアプリケーションをモバイルデバイスに提供できるようになります。1のモバイル機能が活かされており、モバイル環境における動作の最適化、そしてマルチタッチ/ジェスチャー操作/加速度センサー/画面位置調整といったモバイル特有の機能や操作性をサポートしています。
1とモバイル向けAdobe AIRによって、どのようなモバイルユーザー体験を提供することが可能となるのか
1やモバイル向けAdobe AIRのベータ版を実装したモバイルデバイスでのデモ映像をご覧ください。tv」を利用しています。その他のモバイルデバイスを使ったデモ映像は、下記サイトからご覧いただけます。
そして、なんと既に
ぜひ、ダウンロードして、触ってみてください。iPhoneアプリの制作を1年半ほどやってきましたが、簡単なアプリならば、Flashで気軽に作成できるのはかなり便利です。高度なアプリの場合でも、Flashでコンセプトの実証実験を行い、最終版はObjective-Cで実装するというプロトタイピング的な使い方もできるため、実制作で重宝しそうです。左右の回転ボタンとジェット噴射ボタンで宇宙船を操作し、着陸ポイントに静かに着陸させるミニゲームです。「デベロッパー登録~アプリリリースまでのフローを確認する」と「Windows環境ですべて完結させる」ことを主な目標としていましたが、これらは一応達成できました。今回のアプリには操作的にも機能的にも「iPhoneらしい」ものはないのですが、それでもFlashで普通に作ったコンテンツが実機上で動くのは新鮮でした。0)が使えればiPhoneアプリを開発できる、という分かりやすい事例になったかと思っています。
4人のかわいい女の子のまえがみをぱっつんするアプリ
あなたの指のドラッグどおりに、おでこでぱっつん、ななめにぱっつん
さあ思うがままに、ぱっつんしてみてください。今回制作したアプリは、iPhone特有のコードというものは一切使用していませんので、書き出し方を変えればそのままWebでも公開できるようなものです。私はもともとこのアプリをObjective-Cで制作しようとして挫折した経緯があったので、iPhone上で動作させたときは「本当に動いた。」という驚きと同時に、感慨深いものがありました。同じような感覚を、Flashユーザーの皆さまにも感じて欲しいです。
モアイまわし
画面をタッチして、すべてのモアイが正面を向く場所を探すゲームです。縦画面、横画面どちらでも遊べ、いつでも変更することができます。0で制作したものであれば、ほとんどそのまま書き出せることに素直に驚きました。もちろん、公開するにあたっての手直しや工夫は必要ですが、アプリ制作の敷居は下がったと思います。最初に作ったのはiPhoneの向きに合わせてテキストが変わるだけのアプリでしたが、しばらく回して遊んでしまいました。韓国語(ハングル)の読み方をローマ字にしてルビ表示してくれる、シンプルな言語学習系アプリです。
韓国旅行のお伴にどうぞ
CPUが異なるので実行速度は違いますが、PCと同じFlashコンテンツがそのまま動きます。
今後アプリが増えるにつれて、型宣言が重要なコンパイル方式ならではの高速化手法や、cacheAsBitmap周りなど最適化ノウハウがたまってきそう
期待しています。ビデオや音声を取り入れたマルチメディアコンテンツ、タブレットインターフェイスに最適化されたナビゲーションなど、これまでの電子雑誌にはない要素が盛り込まれた新たな読書体験となっており、出版関係者でなくとも必見です。以上のように、デバイスやプラットフォームによって分け隔てることなく、素晴らしいユーザー体験を提供できる環境が整いつつあります。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。皆様のご応募、誠にありがとうございました。いずれの作品も機智に富み、アイデアに溢れたものばかりで、審査員の方々もトータル72時間に及ぶ審査の中で喧々諤々しながら、グランプリ1名、各賞5名、そして特別に審査員特別賞4名が選ばれました。そして栄えあるグランプリは「PICTAPS」を制作した福岡県在住の城戸雅行氏が獲得しました。画面上で絵を描くと、その絵が無数のキャラクタとなって踊り出すという、素晴らしいFlashコンテンツです。
キャンバスにマウスで落書きをすると
無数のキャラクタとなって、軽快なリズムに合わせて踊りまくる。Flashを初めて使用したのは、バージョン4の時でした。その頃は、サイトのちょっとした演出にFlashアニメーションを使っていました。Flashの使い方が大きく変わったのはバージョンMXの時です。社内のコミュニケーションを図るグループウェアの構築にFlashを使用し、その柔軟性と効率の良さから、インタフェイスの開発ツールとして大きな可能性を感じました。以降、アニメーションツールとしてだけでなく、主にインタフェイス開発ツールとして使用しています。
今回の作品のチャレンジポイントは
良い意味での“底の浅さ”を狙いました。多くのWebサイトの複雑化が進んでいる中で、PICTAPSでは「いかに多くのユーザに気軽に参加してもらえるか」ということに重点をおいています。まず、一目でおよそ「何ができるサイトなのか」を伝えたかったので、余計な要素を排除し、できる限りシンプルで分かりやすいインタフェイスとして気軽に楽しんでもらえるサイトを目指しました。クリエイターとしては、自分のセンスや技術を過度にアピールしたくなってしまうところを抑え、独りよがりにならないように、あくまで「ユーザが楽しめるかどうか」を念頭に置いて制作しました。技術・仕様面においては、「奥行きのある空間」「軽快な動作」「ユーザ間でのコミュニケーションの促進(作成した絵へのリンク、ブログへの貼り付け)」を目指しました。沢山のキャラクタを表示する部分に頭を悩ませましたが、BitmapDataを活用することで解決しました。Flashは、一見無理じゃないかなと思うことでも、工夫次第でこなせてしまう懐の深さが気に入っています。展示されていることや、他の方が自分のサイトを触るところを直接見ることはほとんどないので、とても不思議な感じでした。タッチパネルで展示されていた作品がありましたが、PICTAPSをタッチパネルで使うとどんな感じかな、と興味津々でした。
Flashに対してこれから期待されるところは
今後、Webサイトはもっと大規模・複雑化されていき、デザイナーやエンジニアなども作業が細分化されていくと思います。Flashは、連携のしやすさ、思いついたことをすぐ形にできる手軽さを併せ持っているので、大きなプロジェクトの中においても、個々のデザイナーのセンスを引き出しやすいです。次期バージョンではそれらが強化され、ますます使い勝手が良くなると期待しています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
アドビとマクロメディアのような企業が経営を統合する場合、ユーザ(そして従業員も)は、今後の各製品がどうなるかの発表を不安とともに待たねばなりません。お気に入りのツールが発売中止になるかどうかは、百戦錬磨のプロフェッショナルでも気が気でならないはずです。経営統合から約1年が経った今も、フォーラムやブログにはさまざまな情報が飛び交っています。残念ながら筆者は、すべての製品の将来展望に関する情報を入手していません。しかし Fireworks に限って言えば、今後も単体製品ならびにバンドル製品としてこの製品が存続することを、皆さんにお伝えすることができます。当初2人は先行情報を公開することに戸惑ってはいたものの、最終的には次期リリース版に関して、いくつかの耳寄りな情報を提供してくれました。
手軽にモックアップを作成
この準備過程において彼女らは世界中の既存カスタマーと接する時間を設け、プログラムが実際にどのように使用されているかを調査しました。調査を進める中、Fireworks 開発チームはある興味深い傾向に気づきます。Danielle 曰く、「複数の Web デザイン案を顧客に提示するために、ユーザの多くがモックアップを作成するのに多大な時間を費やしていることが分かりました。
そこで、次期 Fireworks の開発目標としては、パワーユーザが強力なモックアップを手軽に、しかも最速で作成できるようにすること
そして、無駄な作業が発生しないように、顧客にデザイン案をプレゼンできるようにすることに重点をおいています」
ここでいう「無駄な作業」とは何か
初期の打ち合わせでサイトナビゲーションのスケッチを描き、トップページ、カタログ、ショッピングカート、会社概要ページといったページ構成についても話がまとまったとします。
ここまでは順調ですが、この顧客が Web サイトを通じて、どの購買層にアピールしたいかを絞り切れていなかったらどうでしょう
ポップで軽やかな若者向けの Web サイトにするのか、あるいは、よりリッチでクラシカルなデザインを用いて、年齢層の高い顧客向けとするのか
このようなビジョンが明確に描かれていない場合、顧客は画像やコピー文、文字体裁などもすべて整った、複数のデザイン案を要求することでしょう
アドビの仕事を相当抱えるにもかかわらず、Alan Musselman は勤務時間外も、テクノロジの最先端を求めて活動しています。デザイナーやデベロッパーにとってスピードは命です。
グラフィックアプリケーションでの作業時間は、短ければ短いほど良いのです」
また、プロトタイプの作成に関して Alan は次のように語っています。「モックアップデザインの作成には、Fireworks のフレーム機能を使っています。
画像をスライスして HTML 内で使ったり、あるいはビットマップやベクトル形状を Flash に取り込んで、ミニサイトや HTML レイアウト内のモジュールとして使用しています」
Fireworks は、ユーザの操作に対する快速な応答性と、すばやい操作性を備えています。たとえば、オブジェクトに色を付ける場合は(プロパティインスペクタ内の)ポップアップカラーウェルをクリックして色を選択するだけで済み、スムーズにキャンバス上のオブジェクトの作成・移動といった作業に進めます。余談ではありますが、Alan はマクロメディアでの勤務中(アドビとの統合前)に、ポップアップカラーウェルを開発したエンジニアと出会う機会を得たそうです。「あれを開発した人とは一度会って、自分から感謝の意を伝えたいと思っていました。エンジニアには『1997年以来、あのカラーウェルピッカーを何億回とクリックさせてもらった』ということを伝えました。見事な時間節約ツールです」と、Alan は語っています。Danielle いわく、異なる趣向のデザイン案を2つ作成するには、非常に多くの時間がかかるとのことです。Photoshop や Illustrator のような(ページではなくレイヤーを概念とする)アプリケーションを使用する場合、ページや段階型ウィザードの流れを表現するためには、数多くのレイヤーから構成された「レイヤーカンプ」を作成しなければならないなど、作業がすぐに複雑になってしまいます。また、顧客にプレゼンするためにレイヤーを整理・統合して、画像を準備する作業(統合した画像を JPEG に書き出して PowerPoint に配置したり、PDF に変換するなど)は「無駄な作業」といわざるを得ません。しかも、サイトのナビゲーション構成をプレゼンしようものなら、Dreamweaver などを使って統合した画像を配置し、クリック操作でこれらの間を移動できるようにしなければなりません。
「階層的な Web/レイヤー整理機能、ページ概念を用いたレイアウト作成機能、クリック移動可能な HTML モックアップ作成機能などを盛り込んだ、次期バージョンの Fireworks は、無駄な作業が発生することを防止しつつ、プロトタイプ作成にまつわるすべての作業を簡素化することでしょう」
シンボルの強化
Alan は、これまでずっとアドビ(またはマクロメディア)に勤めていたわけではありません。今回のグッドニュースは、その彼が Fireworks の製品開発に直接かかわるようになり、ベータプログラムを支援しているということです。彼に次期リリースの特長を質問すると、眼差しが豹変するほどです。「一番の注目は、シンボルの大きさがスマートに伸縮できるインテリジェントスケール機能です」と、Alan は語っています。通常、ベクトル形状やビットマップオブジェクトの大きさを変更すると、見映えがイビツになりがちですが、インテリジェントスケール機能があれば、オブジェクトのどの部分を伸縮させ、どの部分をそのままに維持するかが指定できます。
Alan 曰く「たとえ初期デザインの段階で想定していなかったコンテンツが出てきても、より多くのコンテンツを流し込むためだけに、画像を3分割または9分割してサイズを調整しなければならないという問題が解決できます」(図1参照)
図1: オブジェクトのどの部分の大きさを調整するかが指定できる、インテリジェントスケール機能
Alan は、その他の細かな改善点にも期待を寄せています。たとえば、次期バージョンでは、新たにシンボルのプロパティにアクセスできるようになっています。つまり、これからはシンボル内のテキストオブジェクトだけを変化させるために、複数のシンボルを用意する必要はありません。この点について、Alan は次のように語っています。「シンボルプロパティパネルのラベルの値を変更するだけで終わりです。これまでのオートシェープの場合、使い勝手の良い形状を作成するには相当のコーディング作業が発生していました。それはそれで良いのですが、デザイナーの場合、これらを独自に作成することができません。しかし、これからはレイヤーのオン・オフの切り換えやオブジェクトの色の変更といった、レイヤー内の実際のオブジェクトの操作が可能な、プロパティの備わったシンボルが手軽に作成できます。
また、あらゆるプラットフォームへの書き出しに対応する複数のステートの備わったオブジェクトなど、より高度なシンボルも手軽に作成できます」
ワークフローと連携性の強化
さらに、クリップボード経由のコピー&ペーストもサポートするとともに、Photoshop での作業用に PSD 形式で保存する機能も新たに装備しています。
さらに詳しい情報
(英語記事)を参照してください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
アドビ システムズ認定トレーニングカリキュラムによる本格的なFMSトレーニング
FMS のストリーミング、音声およびビデオ配信を中心とした Flash アプリケーションの開発と、サーバ機能に関する内容を、講義と実習により習得する講座です。(※本トレーニングコースでは、英語版のテキスト および 実習教材を使用して、日本人インストラクターが講義を行います。
◇詳細は こちら
Flashを、短期集中でマスターするために必要なトレーニングコースをパックにいたしました。
◇詳細は こちら
マニュアルや書籍などではカバーされていない機能や Tips を中心に Dreamweaver を使えばいかに日々の開発作業を効率化出来るかをご紹介します。
実際に現場で活躍している著名な開発者を講師に
」 というテーマに基づいてセミナー講師とゲストによるパネルディスカッションを行います。
◇詳細は こちら
Flash は Photoshop と同様にビットマップデータを扱えるので、簡単な操作を覚えれば、静止画では得られない表現の可能性と、Web という新しい活躍の場が広がります。
この機会にぜひ、Flash について学んでみませんか
写真が動けば表現の幅が広がる。
想いの伝わるWebプロモーション
◇詳細は こちら
3日間のコースカリキュラムで、Dreamweaver の基礎から、ユーザインタフェイスやサイトのナビゲート、CSS (カスケーディングスタイルシート)を使った Web ページのレイアウト、大規模なサイトの構築や維持管理の手法を習得できます。★CSSデザイン関連講座とあわせてお得に受講できる受講パックも用意されている。
◇詳細は こちら
e ラーニング教材をはじめとしたインタラクションコンテンツや、PC キャプチャを含むコンテンツの制作を従来よりも容易にする Captivate の最新バージョン対応のトレーニングを開講しております。2日間のトレーニングでは Captivate の操作方法だけでなく、実際の e ラーニング教材開発で得られたノウハウもご紹介いたします。
◇詳細は こちら
Flex 2 による RIA 開発に必要な基礎技術をハンズオン(実習)形式で習得するトレーニングコースを2講座を開講
これから Flex 2 による RIA 開発を行う方はもちろんのこと、技術評価にも最適なトレーニングコースです。
◇詳細は こちら
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。その栄えあるグランプリに輝いた「PICTAPS」を制作した城戸雅行氏の受賞インタビューをお届けします。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
夢を紡ぐ者たちへ
※定員になり次第、締め切らせていただきます。※ 定員になり次第、締め切らせていただきます。この間、Dreamweaver の成長は、そのまま Web サイトの成長と捉えることができるほど、さまざまな機能を搭載し、さまざまなニーズに応えてきました。そして近年では、Web サイトそのものの役割が大きく変わろうとしています。テーブルによるグリッドデザインはより自由度の高い CSS デザインへと変化し、サーバサイドで生成される HTML によって構築されてきた Web サイトは、Ajax のような技術によって高度なユーザ体験へと繋がっていきます。本イベントは、そんな皆さんのご参加をぜひお待ちしております。
お申し込みはこちら >
Web 制作現場で第一線で活躍する方々が、実制作現場で役立つ Tips、裏技を紹介
10 分間という制限時間の中で紹介される技をお見逃しなく
来場者の方からの大喜利出演を募集します。我こそはと腕に自身のある方は、お申し込みフォームより大喜利出演希望としてご連絡ください。
グループ参加も可能です (最大3名のグループまで許可)
大喜利の詳細と出演者プロフィールはこちら >
使いこなすと 10 倍仕事が楽になる。また、ユーザーの方々より投稿いただいたスニペット、事例、CSSAdvisor Tips 書き込みなど、当イベントに向けてみなさまに参加いただいたものもこの場でご紹介いたします。※スケジュールは予告なしに変更になる場合があります。※本セミナーのカメラやビデオカメラによる撮影、録音機材による録音はご遠慮願います。
お申し込みはこちら >
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
その開発ストーリー
今月号の記事
そして、“あの”瞬間に立ち会いました。0の演説です。私は、彼のこの話を前にも1度聞いたことがありましたが、2度目のその時は、あるフレーズに強く惹かれました。また、英語の先生でもあり、ライターでもあり、本屋のオーナーでもありました。当時、オペレーティングシステムの主流と言えばDOSであり、ワードプロセッシングと言えばWordPerfectでした。0をリリースすると、その状況は激変しました。ご存知の通り、それ以来私たちのパソコンには必ず Microsoft Wordがあると言っても過言ではありません。
誰かが次の新しいワードプロセッサを作るだろう、と
そして、それを成し遂げることができるチームを私は知っていましたし、そのチームを集めるのにそれほど手間はかかりませんでした。
どのテクノロジープラットフォームを選ぶべきか
最初、3人の仲間が集まり、マサチューセッツのレキシントンにある屋根裏部屋からスタートしました。
目指すは「コラボレーションを促進するオンラインプロダクト」
もちろんそれは、業界標準のプロダクトよりも優れたワードプロセッサであると意気込んでいました。Buzzwordを真にページネーションに対応したワードプロセッサにしたかったのです。ドキュメントのクオリティをより高く、タイポグラフィやページレイアウトのより精密にコントロールでき、そしてレイアウトに組み込むグラフィックのサポートをより強力に、そしてWebというプラットフォームを活かせるように、複数のユーザがコメントやドキュメントを編集できるコラボレーション環境を提供したいと考えていました。そして、いつでも、どこからでも参加できるようにする。もちろん、使用するオペレーティグシステムやWebブラウザ、デバイスに依存することなくです。開発する上でまず問題となるのは、どのテクノロジープラットフォームを対象にするべきかです。プロジェクトに取りかかる前に、知っているテクノロジーを使ってプロトタイプをいくつか作ってみました。と試してみましたが、それぞれ問題がありました。Javaだとあまりにも動作が遅すぎる。Netだとクロスプラットフォームで提供できない。Ajaxだと自分たちの見解では出来ることが限られてしまう。私たちが求めていたのは、すべてのプラットフォームとWebブラウザをサポートしており、かつオペレーティングシステムやWebブラウザがアップデートしてもそれに合わせてアプリケーションをコーディングし直す必要がない、そんな素晴らしいテクノロジーです。クリックして再生を行って下さい。」と提案しました。彼は当時、マクロメディア・コンサルティングのディレクターでした。最初、デベロッパーたちはTadの言葉に耳を傾けず、Flashを真剣に検討していませんでした。5でプロトタイプ作成を行いましたが、どうにも動作が遅すぎました。おそらく10〜20倍向上していたと思います。その状態のアプリケーションを、ニュートンやマサチューセッツ、サンフランシスコにいるFlexチームに披露したところ、反応は上々でした。そのイベントまでの間に、開発をかなり進展させておき、さらに高機能となったBuzzwordでデモを行ったのです。会場はかなりの衝撃を受けたようでした。この頃の私たちの開発環境は、あまり恵まれたものではありませんでした。
私はというと、自宅の地下室です(ガレージ起業というのはよく聞く話ですが、イーストコーストだと冬がちょっと寒いのです)
当時は、アドビがマクロメディアを買収して、FlexやFlashを活用したアプリケーションに投資し始めた頃です。そのデモの時、David Colettaと私は聴衆席にいて、自分たちの子供が巨大なスクリーンを通してお披露目されるのを見ていました。それを聞いて、かなり興奮したのを今でも覚えています。アドビから出資を受けたおかげで、新しいオフィスを借りて、スタッフを充実させることができました。私たちが知る限り、彼はイーストコーストで一番のデザイナーです。彼以外考えられませんでした。思いが伝わり、Robbyは私たちのチームの一員となり、デザインを担当してくれるようになりました。新しいメンバーはみな素晴らしい経歴の持ち主です。このようにチームスタッフも充実し、開発スピードも加速していきました。2007年5月にBuzzwordのプレビュー版を公開したところ、プレスやアナリスト、ソフトウェア会社から非常に多くの関心を集めました。これはこの上ない喜びでした。これまではBuzzwordのポテンシャルを確信しつつ開発してきましたが、これからはアドビのサポートとコミットメントのもと、Buzzwordのポテンシャルを現実のものとし、さらによりよいアプリケーションへと発展させたいと考えています。やるべきことは山ほどありますが、それは楽しみでもあります。これまでなら、アプリケーションを作ったら、箱に入れてラッピングして市場に送り出すだけでした。新しいプラットフォームでは、アプリケーションを公開し、市場の声を聞き、その声に対してすぐさま応えることができるのです。実際に私たちは、4〜6週間ごとに新しいビルドをリリースしています。Abobe AIRを使えば、オンラインとオフラインで等しく機能・動作する、まさにハイブリッドアプリケーションを作ることができます。メニューやドックから起動したり、ローカルファイル保存ができるようになったり、デスクトップからのドラッグ&ドロップにも対応できるのです。最後に、クオリティやデザインに対する私たちの情熱に共感してくれたアドビと一緒に仕事できること、そして人々のコミュニケーションやコラボレーション作業に役立つアプリケーション開発に取り組めることがうれしく思います。きっと、そのリッチなインタフェイス、レイアウトやタイポグラフィのクオリティ、そこから繋がるユーザ体験に驚くはずです。ユーザ フォーラムなどがあるので、みなさんの感想を教えてください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
以後、the FWA は最先端のWebエクスペリエンスを紹介する世界的なショウケースサイトとして成長している。事実、世界中の Web デザイナーや Web デベロッパーを魅了し、一月あたり65,000以上のユニークビジター数を誇る。
年が明け2008年となりましたが、2007年の12ヶ月を振り返ってみましょう
2007年も数多くのWebサイトが公開され、クリエイティブ表現、テクノロジー、奇抜なアイデアといったさまざまな点で突出したサイトが登場しました。とはいえ、調和がとれた完璧なサイトというのは限られています。
この記事では、私が選んだ2007年ベストFlashサイトを紹介しましょう
以下に紹介していくサイトは、公開時期に合わせて時系列に並んでいます。韓国のロマンチックなコメディドラマのプロモーションサイトです。2007年には子供の飛び出す絵本が流行りましたが、それをメタファとしたインタフェイスを採用しています。非常にクリエイティビティとオリジナリティに溢れ引き込まれる作品で、思わず最後のページまでめくってしまいます。
ロードに多少時間がかかりますが、おそらくサーバが遅いせいでしょう
待ってでも見る価値はありますよ
その新たな3D表現パワーに衝撃を受けた Flash デザイナーやデベロッパーも多かったことでしょう
そのフル画面で展開される3D表現を堪能してください。また、フル画面ビデオの使い方も注目です。公開されてすぐに話題となりました。それもそのはず、この驚くべきクオリティとディテールは圧巻です。サイトの内容はオンラインボードゲームで、ユーザは主人公たちとなって罠が仕掛けられた要塞に突入し、Milkatrazという敵を避けながら、幻の「Glass」を手に入れるのです。それを採用したミシュランの120周年記念サイトは、企業の情報サイトといえども、クリエイティブな表現を用いれば若い世代にも届くことを実証してくれた素晴らしい例です。訪問者にはキャラクターが割り当てられ、そのキャラクターを使って飛んだりダンスしたり、他のユーザのキャラクターとチャットしたり、さらにはキャラクター同士で殴り合ったりすることができます。また、いろいろなイースターエッグが仕掛けられていています。たとえば、あるフレーズをタイピングすると、Jiminy Cricketをキャラクターとして選べるようになります。Web制作会社のサイトとしてはある意味リスキーな試みですが、大成功しました。旅行のプランニングを手伝ってくれるサイトです。部屋の中にはしゃべるスーツケース「Sammy」がいます、ユーザは部屋の中にあるオブジェクトの中から気に入った物を Sammy へドラッグ&ドロップで入れて行きながら、旅行計画を立てます。おしゃれなサイトですが、やはり際立つのは Sammy の個性です。
彼と一緒に歌うこともできますよ
このサイトはあなたの心に潜む「覗き願望」を引き出してしまうかもしれません。サイトでは、都会のアパートに住んでいる人々の生活模様を見ることができます。部屋ごとに異なるストーリーが展開され、それがどこかで繋がっている。画面の上にある小さなボタンを見逃さないでください。クリックすると、さらに大きな世界へと繋がっています。非常にクオリティの高い作品で、時間を忘れてしまうくらい覗いてしまいます。この2007ベストFlashサイトにリストアップできる個人作品が登場したことはうれしい限りです。今では、業界トップのエージェンシーで活躍しています。
Flashサイトを次のレベルへと押し上げたサイトの1つといえるでしょう
シンプルなアイデアながらも、非常に多くの人々の注目を集めた作品です。サイトでは、Halo 3シリーズでの戦場がジオラマで再現されています。ユーザは、キーボードやマウスを使って、そのジオラマ内を移動して戦場を体験できるのです。非常にクオリティが高く、プロモーション効果が高いサイトでした。Picnikは、オンライン画像レタッチツールです。
この手のオンラインツールの中ではベストの1つでしょう
このツールを使えば、写真を素早く手軽に編集できます。元素材となる写真は、ハードディスクにあるものだけでなく、FlickrやFacebookなどの素材も扱うことができます。今やWebサイトは、情報提供やプロモーション用途だけでなく、オンラインアプリケーションの場ともなりました。
今後このようなオンラインアプリケーションがどんどん増えてくるでしょう
Picnikと同じようにエレガントで使いやすいアプリケーションがもっと登場してくれると、未来は明るくなりそうですね
サイト名の通り、いいものには終わりはないものです。このWebサイトは、世界初の終わりのないサイトです。ページの底までスクロールしようとしてみてください。本当にいけどもいけども底にたどりつけません。携帯会社Orangeの商品ラインナップの豊富さをプロモーションするためのサイトですが、シンプルなアイデアが光っています。スクロールしてるときは、いろいろな仕掛けがあるので、あちこちをクリックしてみてください。私のお気に入りは、みんなで作るアイスクリーム屋さんです。最後に紹介するのは元男子プロテニスプレイヤー Björn Borg が展開しているファッションブランドの Web サイトです。
テニスコートであれだけの成功を収めた彼の Web サイトが、こんなに常軌を逸したものになろうとは誰が予測できたでしょうか
商品紹介を目的としていますが、非常に個性的でひねりを効かせたコンテンツに仕上がっています。もし可能なら、フルサイズ(10MB)を選んでください。一見の価値があります。実際にこの Web サイトで商品を購入することができ、そのeコマース機能のクオリティも高く、ぜひチェックしてください。
12のWebサイトを紹介しましたが、これらの中でさらにベストなサイトはどれでしょうか
著者について
the FWAは最先端のWebエクスペリエンスを紹介する世界的なショウケースサイトとして成長し、これまでに2700万以上のアクセス数を達成
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
Flash初心者のための正しいスキル修得に最適
林 拓也のFlash基礎からプログラミング入門への3ステップ
Flashを本格的にはじめる方に最適
RIA開発のための必須知識習得の決定版
植木 真のWeb標準、SEOにも通じるアクセシビリティ講座
0入門者に最適
大重美幸の目指せ
0プログラマーへの2ステップ
セミナーレポートを掲載しましたので是非ご覧下さい。
Flash初心者のための正しいスキル修得に最適
林 拓也のFlash基礎からプログラミング入門への3ステップ
Flash初心者の基礎の習得から、Flashを活用したインタラクティブコンテンツの制作方法を学習し、さらなる表現の可能性を高める為のプログラミング入門へ、順を追ってスキルを習得します。※お好きな1講座からお申し込み頂けます。
詳細は こちら
Flashではじめる本格的プログラミング入門
詳細は こちら
出演は西山正一ほか
お申し込み、詳細は こちら
3日間のコースで Flash の基礎となる制作方法、環境設定、アニーション、ユーザーインターフェース、画像の挿入、テキスト、ナビゲーション、 サウンド、ビデオをふくむ扱い方を習得できます。このコースでは、操作方法の習得だけでなく、Flash 制作における概念知識もしっかりと習得することができ、実務の活用にも結びつけることができます。
お申し込み、詳細は こちら
RIA 開発のための必須知識習得の決定版
本トレーニングパックは、Flex 2によるRIA開発に必要な基礎技術をハンズオン(実機演習)形式で習得するトレーニングコースをパックにしたものです。これからFlex 2によるRIA開発を行う方はもちろんのこと、技術評価にもお役立ていただけます。※日程が離れていますのでご注意ください。
詳細は こちら
0での外部イメージ、MP3サウンド、FlashVideoなどの外部メディアファイルとの連携技術を集中的に学習します。
詳細は こちら
3日間のコースカリキュラムで、Dreamweaverの基本的なWebサイト構築における手順、サイトのナビゲート、CSS(カスケーディングスタイルシート)を使ったWebページのレイアウトのデザイン、大規模なサイトの構築や維持管理の手法を習得することができます。
詳細は こちら
植木 真のWeb標準、SEOにも通じるアクセシビリティ講座
Webアクセシビリティの考え方を正しく理解するとともに、Web標準やSEOとの共通点をふまえたコンテンツ制作上のポイントを学習します。
受講者全員に植木氏の監修された書籍、「Webアクセシビリティ ~標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践~ 」をプレゼント
詳細は こちら
0入門者に最適
大重美幸の目指せ
0 プログラマーへの2ステップ
0の基礎からカスタムクラス定義までを学習します。ステップアップ講座ではアニメーション制御、外部イメージの読み込み処理やXMLファイルの扱い方などを学習します。※お好きな1講座からお申し込み頂けます。
詳細は こちら
Captivateの特長や制作におけるポイントなど、余すことなくハンズオン形式で学ぶことができます。
詳細は こちら
0で、テキストファイルやXMLファイルの読み込み、CGIとの連携など外部とのデータ連携について学習します。
詳細は こちら
出演は、森田雄、益子貴寛、新谷 剛史、森和恵ほか
響のホール(福井)
詳細は こちら
企業サイト構築におけるCMSとしてのMT4の活用について掘り下げます。
出演は、蒲生トシヒロ、黒野明子ほか
詳細は こちら
2008年も地元有志主導により開催します。
詳細は こちら
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
2008年最も注目を集めた記事は何
ナイスなセッション、見逃していませんか
アドビ西村がおすすめする。Flash CS4では、アニメーターに向けた新機能が数多く追加されています。
今号から2回に渡って、タイムライン派アニメーターとして長年Flashを使いこなしているA
Suckさんが、新機能のノウハウを解説してくれます。第一回目は、刷新された「モーショントゥイーン」です。私はFlashでアニメーションを作り続けて10年以上になりますが、フレームアニメやトゥイーンアニメでタイムライン上にアニメーションを制作していくという昔ながらのスタイルを続けています。そう、10年前とほとんど変わっていないんです。
そんなタイムライン派アニメーターがFlash CS4をどう使うのか
さっそく始めてみたいと思います。さて、CS4のいくつかの新機能のうち、最も興味をひかれたのが、新しくなったモーショントゥイーンです。
Flash史上、最大の事件と言っていいでしょう
ここで、モーショントゥイーンの変遷をおさらいしておきます。回転、伸縮、モーションガイド、簡易イージングの機能がすでに備わっていました。日本語化されたFlash 2では、名称が「モーショントゥイーン」に変わっただけで、操作も機能もまったく同じでした。Flash 3ではトゥイーンはフレームプロパティとして扱われるようになり、シェイプトゥイーンが加わりました。回転には方向や回数がオプションで指定できるようになりました。Flash 4ではシンボルの同期とガイドへの吸着が加わりました。Flash 5ではインターフェイスが一新され、コンパクトなタブ型パネルから設定できるようになりました。またメニューに「モーショントゥイーンを作成」が追加され、簡単にトゥイーンを作る方法も提供されました。Flash MXではパネルからプロパティインスペクタに移行し、MX2004にそのまま受け継がれました。このように、インターフェイスこそ変わってはいますが、8で可能になったイージング編集を除けば、機能的な進化はなかったのです。というのも、2Dアニメ作成機能としては、これ以上望むものはないほど洗練されていたからです。
しかし、開発者はさらなる進化を求め、トゥイーンの仕組み自体を見直すことにしたのでしょう
それがCS4の新しいモーショントゥイーンです。
従来のトゥイーンと大きく異なるのは、キーフレームという概念がなく、プロパティはインスタンスではなくトゥイーン内のフレームが持つことでしょう
また、ステージではモーションのパスが表示され、点で示されたフレームの間隔でイージングの様子も確認でき、視覚的にわかりやすくなっています。操作はこれまでの「モーショントゥイーンを作成」とほぼ同じですが、トゥイーンそのものが1つのオブジェクトとして扱われるようになったので、従来トゥイーンの機能アップではなく、まったくの新機能なのです。そのため、下位互換はありません。新しいモーショントゥイーンを含むFLAをCS3形式で保存しようとすると、「モーションオブジェクトが失われます」というアラートが表示されます。このまま保存すると、トゥイーンのオブジェクトはキーフレームに変換されてしまうので、CS3との互換を保つ必要があるなら気を付けてください。モーショントゥイーンを作成してみる。
では実際に作成してみましょう
前述したように「モーショントゥイーンを作成」と同じですが、ステージ上のシェイプやグループのコンテキストメニューからも選ぶことができるようになりました。ただし、シェイプやグループのままモーショントゥイーンを作成すると、シンボルの基準点が左上になってしまう上、シンボル名も勝手に付けられてしまいます。また、テキストブロックもコンテキストメニューから「モーショントゥイーンを作成」が選べるようになりましたが、シンボル化はされません。モーショントゥイーンを作成する前に、予めシンボルに変換しておくことをお勧めします。さて、ステージには黄色い鳥のインスタンスに登場してもらいました。
この鳥に見覚えがある方は、Flash歴が長いですね
まさかバージョン10で飛ぶことになるとは、本人も思ってもみなかったでしょう
インスタンスのビヘイビアはグラフィックでもムービークリップでも構いませんが、ここではシンボル内のアニメーションが表示されるグラフィックインスタンスにしてみます。鳥をステージの端に配置し、インスタンスのコンテキストメニューから「モーショントゥイーンを作成」を選びます。レイヤーはモーションレイヤーとなり、モーショントゥイーンが設定されました。タイムラインは1秒の長さに延長されます。レイヤー1のアウトラインカラーは本来黄緑ですが、見えにくいため赤に変更してあります。最終フレームで、インスタンスを右に移動させます。モーションパスと相当するフレームがレイヤーのアウトラインカラーで表示されます。モーションパスは選択ツールでドラッグしてカーブにすることはできますが、S字にすることはできません。ダイレクト選択ツールなら、ベジェハンドルを使った編集が可能です。手描きのパスを適用することもできます。別レイヤーに鉛筆ツールで描いた線をコピーします。カレントレイヤーをモーションレイヤーにしてペーストすると、モーションのパスが置き換えられます。
便利でしょう
従来のトゥイーンではモーションガイドを変更したらインスタンスを吸着し直す必要がありましたが、吸着はすべて自動です。モーションパスも別レイヤーの線や別のトゥイーンにコピペができます。
最後にトゥイーンスパンを調整しましょう
トゥイーンの左端を右にドラッグして空舞台を作ります。トゥイーンの後には空白キーフレームを挿入し、空舞台とします。これで画面を横切るBirdさんになります。モーションエディタを使ってみる。モーショントゥイーンのイージングはこれまでと同様、プロパティパネルで設定できます。[-100]の場合はフレームが進むごとに移動の間隔が広くなっていきます。この簡易イージングではモーションのメリハリが弱いと感じたならば、モーションエディタを使用します。プロパティパネルでイージング設定をしていなければ、各プロパティには「イージングなし」が、そうでない場合は「シンプル(低速)」が選ばれています。一番下の「イージング」欄で、+をクリックするとプリセットされたイージングを簡単に追加できます。
メリハリを強調したモーションにしたければ、(高速)か(最速)がついたものを選びましょう
例えば、この鳥の動きにふさわしいイージングは「停止と開始(最速)」でしょうか
このイージングを基本モーションに割り当てます。あとは、モーションパスに示されたフレームの間隔を見ながら、イージング値を調節します。「停止と開始」はインが加速してから減速、アウトが減速してから加速です。クラシックトゥイーンは健在なり。このように一新されたモーショントゥイーンですが、従来のモーショントゥイーンは廃止されたわけではありません。クラシックトゥイーンとして、Flashの伝統が守られているのです。残念ながらフレームプロパティパネルからこの機能にアクセスすることはできません。
フレームのコンテキストメニューから「クラシックトゥイーンを作成」を選択しましょう
いったんクラシックトゥイーンを設定したら、フレームプロパティパネルでイージングなどのオプションが設定できます。また、鉛筆アイコンをクリックするとカスタムイージングが可能になります。
モーショントゥイーンかクラシックトゥイーンか
モーショントゥイーンは新機能、従来のモーショントゥイーンはクラシックトゥイーンと、ややこしいのですが、両方あるとどちらのトゥイーンにすべきか悩んでしまうかもしれません。用途や目的、制作手法に応じて、ということになるんでしょうが、両者が別物であるということを思い出してください。新しいモーショントゥイーンでは、動きの始めと終わりを決めてからその間を補完していくという、一般的なアニメ制作法はあてはまりません。
ですから、計画的に作り込んでいくというよりは、ざっくり作って後で調整していくというスタイルになるのではないでしょうか
また、1トゥイーンにつき1インスタンスのため、複数のキーフレームを持てないので、トゥイーン内でシンボルを入れ替えたり、グラフィックインスタンスの再生モードを変更したりすることはできません。モーションエディタはトゥイーンの詳細な制御ができるものの、使いやすいと言える域には至っていないように感じます。アニメーター的には、クラシックトゥイーンの方がわかりやすく、自由度が高いと感じています。
そこで、今からFlashアニメーションを始めたい人、手っ取り早く動かしたい人、ムービークリップ派の人はモーショントゥイーンを、昔ながらのアニメ手法やグラフィックインスタンスにこだわりがあったり、CS3以下のユーザとやりとりする必要があったりする人はクラシックトゥイーンを選ぶとよいでしょう
1979年以降、アニメーターとして多くのTV・劇場アニメの作画に携わり、1997年にFLASHでのアニメ制作に移行
ペンタブレットによる手描きとトラディショナルなアニメーション技法を活かして、WEB、TV、劇場、イベント、DVDなど、様々なアニメコンテンツを制作している。
グラフィックシンボルを好むタイムライン派
今年の5月には、アニメーター業30周年を迎える。
著書に「FLASHアニメーション制作バイブル」(オーム社)など
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
2008年最も注目を集めた記事は何
ナイスなセッション、見逃していませんか
アドビ西村がおすすめする。サイトにあるフォームにActionScriptを書いて、そのコンパイル結果をWebブラウザ上でリアルタイムに見ることができます。インターネット環境とWebブラウザがあれば誰でも手軽にコードベースのFlash制作を体験することができます。しかも、他のユーザが投稿したコードを派生・分岐(Fork)させて、改造などいろいろと試すこともできます。そこで、本記事ではwonderflの使い方と注目の作品を紹介します。まずは、以下の画面を見て下さい。左側のペインがActionScriptコードを記述するフォーム、右側のペインがコードのコンパイル結果、下側のペインがコンパイル状況の出力です。他のユーザが投稿したコードを派生・分岐したい場合は、その作品を表示して「Fork」ボタンをクリックします。また、作成したコードは、「Download」ボタンをクリックして、コードファイルとして入手することも可能です。複雑なセットアップや環境構築は必要なく、すぐさま利用でき、コーディングだけに専念できます。なお、コーディング中に一定時間キー入力が無いと、自動的にコンパイルを行い、右側のFlashをリロードします。そして、コンパイルが完了し、コード内容にエラーが無ければ、自動的にコードを保存します。※サイト上に使い方のデモビデオがあります。
コーディング時の注意点
最も基本的なテンプレートは以下のようになります。登録したユーザはマイページを持つことができます。
マイページでは、投稿したコードやお気に入り登録したコードを管理できるほか、自分の作業履歴などが表示されます(他のユーザのマイページを閲覧することもできます)
マイページの例
そのほかにも、「コードランキング」「ユーザのアクション」をRSSで購読したり、作成したコードをブログに貼り付けたりすることができます。
次々と投稿されるコード、Forkで生まれるコラボレーション
サービスインして間もないwonderflですが、すでに数多くのユーザが登録し、さまざまなコードが投稿されています。サイトでは、アクセス数に基づいた「コードランキング」と「ユーザランキング」が発表されています。ワームのような線がランダムに描画され、幾何学的模様を作り出します。Webカメラの映像を表示し、被写体の動きに反応してエフェクトがかかります。ぜひチェックしてみて下さい。また、Fork機能を通して、ユーザ同士のコラボレーションが生まれています。たとえば、下記の作品群は、もともとゲームの背景だけだったコードを、音を追加したり、敵を追加したり、弾を撃てるようにしたり 、当たり判定を追加したりして、遊べるゲームへと発展させたものです。
元となった背景: gyuqueさんによる「なんとかディウスっぽい背景」
これらのほかにも、海外のクリエイターが投稿していたり、Flash未経験者がFlash上級者のコードをForkして勉強していたりと、いろいろな人がさまざまな目的で活用しています。開発を手掛けた面白法人KAYACの大塚雅和さんによれば、今後、以下の項目を検討されているようです。Flashで使えるクラスや関数を網羅して、wonderfl内のコードと結びつけて「動くコード例」をすぐ見つけられるようにする。コード編集画面の機能を強化する。コミュニケーションを促進するためにユーザのfollow機能を追加する。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
2008年最も注目を集めた記事は何
ナイスなセッション、見逃していませんか
アドビ西村がおすすめする。5 には、DTP 用アプリケーションと同等の文字組を可能にする新しいテキストエンジンが搭載されています。これによってこれまでの Web の常識を覆す文字表現が可能になります。30以上の言語環境に対応し、選択、編集、コピー&ペースト、リガチャやカーニング等を含んだ文字制御や縦中横の設定、インライン画像やリンクの埋め込みといったこともできます。本記事で実際にその柔軟性と可能性を感じて頂ければと思います。
Flash によるオンラインテキストエディタ
まるでデスクトップのアプリケーションが起動したかと見紛うようなエディタ画面が表示されますが、これはすべて Flash 上で動作しており、他のサーバーテクノロジーや Web サービス等は一切使用されていません。大変リッチで様々な設定が行えることに驚かされます。まだベータ段階であり、メニュー等の日本語化や動作が緩慢な点は何卒ご了承下さい。」ボタンをクリックして下さい。以下のようなダイアログウィンドウが開き、その中に HTML にたいへんよく似た XML 形式で記述されたコードが表示されます。試しにコードの一部を変更し、「Import」ボタンをクリックして下さい。
オンラインテキストエディタ上の表示が変化したのではないでしょうか
このダイアログウィンドウはコピー&ペーストすることもできますので、エディタ上で編集した内容を別のテキストエディタにコピーして編集したり、新たに作成した TextLayout XML をこのウィンドウにペーストして実際の表示を確認したりすることができます。それぞれ各パネルの設定内容は以下のようになっています。なお、設定を適用するためには、ウィンドウ左側のテキスト入力画面上であらかじめその適用させたい文字列を選択している必要がありますのでご注意下さい。
デバイスフォントと埋め込みフォントのどちらを使うか
太字、イタリック、下線、取り消し線、上添え字、下添え字、縦中横
文字のカーニングの有無
文字の大文字小文字
左と右のマージン幅
段落の前と後に空けるスペース量
行送りの基準位置
行送りの方向
ルーラーの表示、非表示
ルーラー上におけるタブの位置
タブに対する文字列の基準位置
数字表記における文字種別
数字表記における文字幅
基準となるベースラインの選択
ベースライン揃え
ベースラインの移動
2文字以上の文字を1つとして表示
文字の透明度
折り返し時の改行設定
使用するアンチエイリアスの形式を選択
サイズの小さいフォント等、アンチエイリアス時にグリッドに合わせることで読みやすさを向上させるかどうか
上下左右の余白設定
先頭行のオフセット
先頭行のオフセットに対する基準
テキストの向きに関する設定
縦横スクロールカーソルの表示設定
パネルを1つずつ見ると、沢山の設定項目があるために難しく感じるかもしれません。最初は一部のパラメータだけを変更して、それぞれの効果を確認しながら設定を行ってみて下さい。今後のバージョンでは日本語を含めた各国語版のご提供を予定しておりますので、何卒ご了承下さい。」ボタンをクリックしてTextLayout XML を生成し、コピー&ペーストでテキスト編集ソフトを使って任意の場所にファイルを保存して下さい。
開発環境のセットアップ
それぞれ以下の手順でインストールを行って下さい。これによって、直接 Flash アプリケーション上で UI を使ったレイアウトの設定を行うことが出来ます。残念ながら Text Layout コンポーネント上に直接テキストの入力を行う事はできません。のファイル名で始まる 3 つの swc ファイルが存在するかどうかご確認下さい。もしないようであれば、別のビルドのダウンロードをお試し願います。
開発環境のセットアップが終わりましたら、早速外部に保存したTextLayout XMLを読み込んでみましょう
0 形式の新規書類を作成し、「コンポーネント」パネルから TextLayout コンポーネントをステージ上にドラッグします。ムービーを作成し、実際にTextLayout XML で設定したレイアウトの情報が反映されるかどうかお試し下さい。
// コントローラを作成
さらなる可能性を求めて
現在のところ TextLayout XML を作成するためには、ご紹介したようなオンラインテキストエディタや直接コードを手書きするくらいしかありませんが、今後専用の編集アプリケーションや、DTP 用の高機能なアプリケーションが直接書き出しに対応してくれることも考えられます。また、データ内容はあくまでもXMLであるため、サーバーアプリケーション等から動的に生成することで、さらに面白いインタラクティブな効果やデータの共有化が容易になることが予想できます。その他、Adobe サイトで提供しておりますデモムービーやサンプル等もあわせてご参照下さい。
画面右上の下向き矢印をクリックすると
サンプルをダウンロードできる。今後さらなる機能の追加と改善を重ね、新しい Web の可能性をご提供していきたいと思います。今後も何卒ご注目下さい。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
2008年最も注目を集めた記事は何
ナイスなセッション、見逃していませんか
アドビ西村がおすすめする。多くのアドビ製品がアップグレードされ、もちろん、長くWeb開発ツールとして愛用されてきたDreamweaverもアップグレードされています。新バージョンCS4は、デザイナーやデベロッパーのために数え切れない機能強化が図られたメジャーアップグレードです。本記事では、CS4の新機能の中で最も魅力的な機能の1つである「Subversion機能」について、深く掘り下げていきたいと思います。
Subversion機能をマスターすれば、デベロッパーのみなさんの生活は非常に楽になるでしょう
バージョン管理の基本
SVNを使えば、チーム開発においてデベロッパーが個別にプロジェクトに取り組みながらも、デベロッパー同士で 簡単に同調することが可能となります。バージョン管理システムの一般的なプロセスというと、以下のような内容が考えられます。サーバ上にリポジトリを作成:リポジトリとは記録システムのようなものです。リポジトリにあるコードのコピーが公式なコピーとして扱われます。1つのプロジェクトにたとえ数百人の デベロッパーたちが関わっているとしても、チームメンバーの全員が「このシステムを使って、編集したコードファイルの変更履歴をトラッキングする」ことに同意していなければなりません。デベロッパーはリポジトリのローカルコピーを入手:デベロッパーが作業するには、リポジトリ内にあるソースコードファイルを編集する必要があります。そのためには、編集作業と検証作業に必要なファイル群すべてを引き出します。デベロッパーはローカルリポジトリのファイル群を編集:リポジトリによっては、デベロッパーがファイルを編集する前に、そのファイルを明確にチェックアウトしなければならないものがあります。逆に、チェックアウトしなくても編集できるようにしているリポジトリもあります。デベロッパーは編集したコードをサーバ上のリポジトリに戻す:デベロッパーは、新機能の追加やバグ修正などのプログラミング作業が終わったら、その変更をサーバ上のリポジトリに戻します。ファイルのバージョン管理の開始:編集したファイルの新バージョンがサーバに追加されます。編集したファイルは、単にリポジトリ内に存在するファイルを上書きするのではなく、既存ファイルと変更点を新しいバージョンのファイルとして記録します。このようにファイルの変更履歴が作られていきます。そうすることで、デベロッパーは過去のバージョンに戻り、どのような変更が行われてきたのかを調べることができます。以上は、バージョン管理システムの基本的な流れです。バージョン管理システムを使うメリットは、以下の項目を含めかなりたくさんあります。
ハードウェア損傷からデータを保護:みなさんがプロジェクトを一人で手掛けていようと、チームで手掛けていようと、一番起きて欲しくない出来事といえば、「プロジェクトの全コードデータの損失」でしょう
しかし、リポジトリに保管しておけば、そのコピーがいつでもサーバ上にあります。
たとえリポジトリサーバが壊れて、そのサーバのバックアップをとっていなかったとしても、おそらくデベロッパーのだれかがローカルマシンにほぼ最新データのコピーを保存しているでしょう
質の悪いプログラミング決断を回避:プロジェクトの新メンバーが誤って重要なシステムコードの大部分を削除してしまったら
そのコードを一から作り直さなければならなくなったらどうしますか
最悪、そのコードを作成した人がもうプロジェクトに携わっていなかったら
バージョン管理システムがあれば、前バージョンのデータを入手、あるいは前バージョンに戻して作業に戻るだけでよいのです。長期的に知識を共有:コード内に素晴らしいコメントが書かれていたとしても、後でそれが削除されたり、意味をなさなくなったりすることがあります。長い期間にわたりコードの履歴をレビューすることができれば、そのシステムが開発された時、開発者がどのような考えで開発したのかがより明確に分かるようになります。また、プロジェクトの履歴があれば、主要な改善が行われたのはいつか、どのような改善が行われたのか、などが分かります。
Dreamweaverを長年使い続けてきたユーザであれば、データのバージョン管理をするためにいろいろと試行錯誤したことを思い出すかもしれませんね
CS4以前のバージョンでは、新しいサイトを設定する際に図1の画面が表示されました。最低限のバージョン管理ができるようにDreamweaverに組み込まれた独自システムです。バージョン管理システムを構築するのは、容易ではありません。すでに確立されているバージョン管理システムをDreamweaverに組み込むことは、それだけでアップグレードに匹敵します。多くのデベロッパーが、毎日SVNを使用しています。サイト定義ウィンドウ の「詳細設定」タブを選ぶと、「バージョンコントロール」カテゴリがあります。そのカテゴリ内のアクセス項目では、初期状態では「なし」となっています。システム管理者またはSVNプロバイダーに、システム設定に必要な情報を問い合わせて下さい。すべての情報を入力したら、「テスト」ボタンをクリックします。検証が成功すると、「サーバにアクセスできるようになった」という内容ののダイアログボックスが表示されます。ダイアログボックスが表示されない場合は、入力した情報を再度チェックして下さい。なお、SVN機能を利用するには、正常に動作する設定内容でなければなりません。ダミー情報では、SVN機能を利用することはできません。SVNのセットアップが完了したら、次に新しいリポジトリを作成するか、既存のリポジトリに接続する必要があります。既存のSVNリポジトリに接続するには、読み込み を行います。新しいリポジトリを作成するには、次の項目を飛ばして、「ファイル状態アイコンと拡張ビュー」に進んで下さい。最新のファイルを取得する。SVNにある既存のプロジェクトの作業をするには、最新のファイルをローカルにコピーする必要があります。いったんファイルをローカルにコピーすれば、作業に取りかかることができます。ローカルにコピーするには、サイトフォルダを右クリックしてメニューから「バージョンコントロール > 最新のバージョンを取得」を選びます。そうすると、ファイルの取得状況を示すプログレスボックスがポップアップ表示されます。取得するファイル数が多いと、完了するまでに多少時間がかかります。
ファイルステータスを示すアイコンと拡張ビュー
ファイルパネルの各ファイルアイコンの横に、ファイルのステータスを示すアイコンが表示されます(図2)
図2 ファイルのステータスを示す3つのアイコン
ファイルステータスを示すアイコンには、以下の3つがあります。プラス「+」アイコン:自分がプロジェクトに追加したファイルで、まだそのファイルをリポジトリに送っていないことを示します。チェック「✓」アイコン:リポジトリから取得後、編集を加えていることを示します。空白のアイコン:「空白のアイコンはアイコンではない」と言われそうですが、アイコンがないということは、そのファイルはリポジトリにあり、まだローカルで手を加えていないことを示します。
こうしてファイルステータスをアイコンで確認できるのは素晴らしいことですが、リポジトリとローカルコピーのディレクトリを並列して見ることができたらもっと素晴らしいですよね
ファイルパネルの「展開してローカルおよびリモートサイトを表示」ボタン(図2の赤囲み部分)をクリックすると、リポジトリのディレクトリとローカルコピーのディレクトリを見ることができます(図3)
この拡張ビューを表示したら、「リポジトリファイル」ボタン(図3の赤囲み部分)がオンになっていることを確認して下さい。オンになっていると、左側にリポジトリファイル、右側にロカールファイルが並列表示されます。リポジトリにファイルを追加する。通常のSVNツールでは、リポジトリへのファイルの追加は手作業で行います。Dreamweaverサイトから「新規ファイル」を選ぶと、そのファイルに「ファイル追加」コマンドが自動的に内蔵されます。そのため、多くのSVNツールで行わなければならない手作業を省くことができます。
ファイルのチェックイン/コミット
新しいファイルを作成したら、あるいは既存のファイルを編集したら、その変更をリポジトリに戻さなければなりません。リポジトリに戻したいファイルを選択して、右クリックから「チェックイン」を選ぶだけです。ファイルを選択して「チェックイン」ボタンをクリックしても、同様の操作が行えます。「チェックイン」ボタンは、ファイルパネルの上にある上向き矢印と鍵が一緒になったアイコンです。この操作を行うと、ダイアログボックスが表示され、コミットするファイルにコメントを付けることができます。
ファイルに加えた変更をメモしておきましょう
オススメなのは、トラッキングしやすくするためにバグナンバーや機能リクエストのチケット番号を書き加えておくことです。また、変更・追加内容の簡単な概要も、他のデベロッパーの役立ちます。
こうしておけば、他のデベロッパー たちも、後でファイルの履歴を簡単に調べることができ、どのような変更がいつ加えられたのか、簡単に把握できるでしょう
「OK」ボタンをクリックすると、リポジトリへのファイル転送 状況を示すプログレスボックスが表示されます。バージョン管理システムの便利な機能の1つが「バージョンサポート」です。ファイルをチェックインするたびに、システム内には新しいバージョンが作成されます。単なる1文字の変更であれ、あるいは数百行の変更であれ、リポジトリシステムでは各バージョンでの変更をトラッキングできます。そのおかげで作業がとても楽になります。バージョンサポートを使うには、修正とチェックインを数回繰り返したファイルが必要です。そうしたファイルがあれば、右クリックしてメニューから「バージョンコントロール > バージョンを表示」を選んで下さい。
そうすると、バージョン履歴ダイアログボックスが表示され、そのファイルの過去の全バージョンが日付ごとにリストアップされます(図4)
図4 バージョン履歴ダイアログボックスには、過去のファイルのバージョン履歴とコメントが表示されます。このダイアログボックスには、チェックイン時に入力したコメントが表示されます。各バージョンには番号が振られているので、手元にあるファイルがどのバージョンなのかが分かります。どれか1つのバージョンをクリックすると、青色のハイライト表示になり、「表示」ボタンがアクティブになります。ボタンをクリックすると、そのバージョンのファイルを見ることができます。図5は、同じファイルの3つのバージョンを比較したところです。2つはリポジトリにある過去のバージョンと最新 のバージョンのファイルで、残りの1つはローカルにある編集中のファイルです。この機能は、たとえば、クライアントから「数か月前に削除したサイドバーを復活させてほしい」といった要望があった場合に役立ちます。わずか数クリックで、サイドバーを簡単に復活させることができます。図5 複数のバージョンのファイル内容を表示して、比較できます。ダイアログボックス内のバージョンを1つ選ぶと、「ローカルと比較する」ボタンがアクティブになります。バージョンを2つ選ぶと、「比較」ボタンがアクティブになります。いずれの場合もボタンをクリックすると、ファイル比較ツールが起動します。なお、このツールを使うには設定が必要で、設定画面がポップアップで表示されます。ツールの設定を簡単に行いたい場合は、「ヘルプ」ボタンをクリックしてプラットフォーム依存ガイダンスに従って操作して下さい。図6 は、ファイル比較ツールの結果です。変更部分がハイライト表示されるので、すぐにわかります。多数の変更を行ったファイル内で、該当箇所をすばやく見つけたい場合に便利です。
図6 ファイル比較ツールでは、同一ファイルの異なるバージョンを比較して
変更部分をハイライト表示させることができます。また、Subversionツールを使いこなしている人でも、よりスピーディに作業できるようになると感じるかもしれません。Creative Suite 4がアナウンスされた時に言われたことですが、このリリースはマクロメディアとアドビの合併後初となるフルアップグレードです。2つの素晴らしい会社が合併したことの相乗効果がついに形となりました。ぜひ、30日間の無償体験版をダウンロードして、新しい機能を試してみて下さい。その他、360Flexのような低コストでデベロッパーフレンドリーなカンファレンスのとりまとめも行っている。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
ナイスなセッション、見逃していませんか
今月号の記事
2008年最も注目を集めた記事は何
ナイスなセッション、見逃していませんか
アドビ西村がおすすめする。
2日間で70以上のセッションがありますので、セッションを選ぶのが大変
というお声をよく頂戴します。既にお申し込みいただいた方にも、また、最後の決め手で悩んでいる方にも、参考にしていただける内容となっております。締め切り間近です。
今すぐご登録を
ここでしか聞けない、会えない。
5で実現する次世代ニュースリーダー:インターナショナル・ヘラルド・トリビューン紙事例
このセッションではアドビのXDチームが取り組んだ事例をご紹介します。
5アプリケーションでユーザに配布するサービスなのですが、見所はAIR 1
5搭載のFlash Player 10リッチテキストレイアウトを実現する方法、開発ステップを余すこと無く紹介するところです。AIR開発者、AIR開発に興味がある方、そしてアドビのXDチームの取り組みに興味がある方におすすめのセッションです。当セッションでは、Joshuaの最新作品、活動を紹介します。デザインやアイディア、クリエイティブの一歩先を狙う方々、新たな発見を必要としている方におすすめのセッションです。Flash界では神と言われている方の一人です。既にJoshuaのことを知っている人にも、神がどのような作品を手がけられているのか、今から知りたい方にもおすすめのセッションです。Webアプリケーションサーバ、フレームワークの祖と言っても過言ではないColdFusion、その基本的スキルと最新ベストプラクティスを紹介します。いままでPDFというと、静的なドキュメント管理ツールとして認識されることが多かったのですが、最新のAcrobat 9ではSWFの表現力をフル活用できるようになりました。目から鱗の新しい活用術を是非ご確認ください。今まで悩んでいたことを解決するヒントも出てくると思います。
この人がMAXでセッションを
調整に時間を頂戴し、途中で追加されたセッションがいくつかあります。その中からedge 読者のお役に立つセッションを紹介します。
これからのWebに求められること
メジャーブラウザと呼ばれるものにはいくつかあり、Web Designerは『クロスブラウザ』を常に意識しています。org/)"では『クロスブラウザ』の定義が、『プログレッシブ・エンハンスメント』という言葉と共に何度も語られました。
『プログレッシブ・エンハンスメント』とは何か
フロントエンドとバックエンドの連携仕事術
大規模なサイトを構築し、クライアントとコミュニケーションするにはどのような方法があるのか
「知性」の松岡氏と「感性」の北村氏が本音で語ります。制作者の方々には必ず新たな発見、新しい考え方を共有してお持ち帰りいただけること間違い無しです。
[C-8]ワークフローとプロトタイピング
今年のMAXセッションの中で唯一、大規模サイトを作る上でのワークフローや、プロトタイピングなど、実装に入る前、納品後のクライアントとのコミュニケーションの改善を提案するセッションとなっております。株式会社ビジネス・アーキテクツ伊原力也氏が手がけられた大規模サイトを実例に、ノウハウを紹介していきます。「大規模サイト構築は自分には関係無い」と思っている方々にも、これからの時代どのような変化が起きるかわからないので、お役に立つ情報満載です。」という一言で採用が見送られ涙した経験がある方々必見です。」と言ってもらえること間違い無しです。
西村の「個人的」一押しセッションズ
今回のMAX Japan 2009ではユーザコミュニティの方々のセッションも今までよりも多くご紹介しております。是非参加してもらいたいのは、ユーザーコミュニティ活動がどういうものかを「知らない」方々です。
日々の作業でちょっと困っているんだけど、チカラ技で、もしくは経験値により克服しているという方は多いと思うのですが、「あったら便利
」と思うAdobeテクノロジーに関する悩みを解決してくれるフレームワーク、コンポーネントが紹介されていたり、新しい切り口でのAdobeテクノロジーを利用する方法などを紹介します。そしてFlashOOP、Sparkに関しては展示ブースも出展するので、来て見て触れるFlashを利用したオモシロコンテンツ、目からウロココンテンツも体験できます。
(展示ブースでお待ち申し上げます)
AVM2のパフォーマンスに正面から挑む。Adobe MAXですが真っ向からFlashテクノロジーに対してチャレンジを挑んでいる勇者達のセッションがご覧いただけます。
さて、勝敗はどちらにあがるのか
この答えは会場にこないとわかりません。興味津々です。Flash界の神と言われている方々がセッションを実施いたします。0におけるパフォーマンス向上のヒントは会場を変更し、少々余裕が出来ております。
いかがだったでしょうか
また、来場者には参加セッション、展示ブースを訪ねるとマイレージがたまる「マイレージMAX」プログラムもありますので、豪華賞品やアドビのオリジナルグッズも当たるチャンスがあります。ご来場お待ち申し上げます。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
2008年最も注目を集めた記事は何
ナイスなセッション、見逃していませんか
アドビ西村がおすすめする。"最高傑作へのショートカット" が開催されます。"最高傑作へのショートカット"
5の技術書日本語版を公開
RIA 開発を目指す方におススメ
Flashコンテンツの制作ならおまかせ
Webサイト構築の基礎とテクニックを習得
植木真のWebアクセシビリティはこう変わる。ビジネスフローを変える。
0をハンズオンで学ぼう
「ほんきでクスール」第12期
それら新機能を、アドビ システムズの各製品担当者がデモを交えて紹介いたします。ぜひ来場して、「最高傑作へのショートカット」を手に入れてください。
セミナーで講師が利用したデモ素材をプレゼント
詳細は こちら
5 の技術書日本語版を公開
これは、クライアントが Windows でも Mac でも見られるリーチの広さ、セキュリティーの高さについて認知が広まり商用コンテンツでの採用が増えたこと、サーバの価格がお求め安くなったこと、など、さまざまな理由があります。5 のマニュアルやホワイトペーパーが、日本語化し一般公開されました。無償でダウンロードしてご利用いただけます。
より簡素化されて使いやすくなったユーザインターフェイスや、複数ビットレートの同時エンコーディングなど、FMS 3
5 にあわせた機能改良が加わっています。
詳細とダウンロードはこちらから
第7回、月刊インタラ塾は「中村洋基と木谷友亮の Web 業界一受けたくない授業」と題して、「電通」の中村洋基氏と「カイブツ」の木谷友亮氏のお二人がゲストです。
Web 業界一受けたくない授業
、今回は、受ける授業ではありません。「一緒に考える」授業です。チームを組んで仕事をする中で、一見、使えないようなアイデアなどが、でることがありますが、よく考えてみると価値があるかもしれません。そんなところから化学反応が起こりすごいアイデアが浮かんだりします。
皆さんも一緒考えませんか
第8回、月刊インタラ塾はゲストにアドマン 2
0 こと、渡邊大介氏(サイバーエージェント)をお招きし、「万屋アドマン~広告業界の“村”をぶち壊す~」というお題で語っていただきます。優れたクリエイティブを制作していくために、インタラクティブ領域を中心に「専門職」の概念を変える必要性や、広告人のキャパシティの広げ方などについてお話ししていただきます。
詳細は こちら
多くの Flash ユーザーが会場に集結することでしょう
F-site ならではの“ここだけ話”やゲストとのフランクなトークを期待しちゃってください。
詳細は こちら
RIA 開発を目指す方におススメ
本トレーニングコースは、Adobe Flex 2 によるリッチインターネットアプリケーション開発にあたり、知っておくべき基礎事項が凝縮されている重要なカリキュラムです。そのため、Flex 2 のトレーニングコースフローにおいて、一番最初に受講することが推奨されています。これから Flex 2 でリッチインターネットアプリケーション開発を行う方、Flex 2 の製品評価をお考えの方に、最適な講座です。5 でもそのままお役立ていただけますので、ご安心ください。また、本講座と併せて Adobe Flex 2 でのサーバーとのデータ通信、およびそれに付随するデータの取り扱いに関しても習得したい方は、まとめて習得できる Flex 2 RIA 開発パックがおススメです。
詳細は こちら
今からでも遅くない。※お好きな1講座からお申し込み頂けます。※1日6時間のカリキュラムです。
詳細は こちら
Flashコンテンツの制作ならおまかせ
本講座では、基本となる制作方法や、環境設定、アニーション、ユーザーインターフェース、画像の挿入、テキスト、ナビゲーション、サウンド、ビデオなど、Flash コンテンツの制作に欠かせない要素を多数ご説明します。操作方法の習得だけでなく、Flash 制作における概念知識もしっかりとマスターすることができ、実務の活用にも結びつけることができます。
詳細は こちら
0初級講座」を前半と後半の2講座に分けて開講いたします。0 の基本的な考え方、シンタックスの基礎、カスタムクラス定義の方法、スクリプトでのアニメーションなど、プログラム言語としての基礎を学習します。0 の基礎知識を習得した方を対象(本講座前半を受講相当)に、Flash ならではのアニメーション表現、外部イメージの読み込み処理やXMLの読み込みといった、実際のコンテンツ制作場面で必要とされるテクニックを学習します。0 でのコンテンツ制作において重要なカスタムイベントの基礎も本講座(後半)で学習します。※お好きな1講座からお申し込み頂けます。※1日6時間のカリキュラムです。
詳細は こちら
Web サイト構築の基礎とテクニックを習得
本講座は、基本的な Web サイト構築における手順、サイトのナビゲート、CSS を使った Web ページのレイアウトのデザイン、大規模なサイトの構築や維持管理の手法など、サイト制作に欠かせない要素を多数ご説明します。もちろん実習も用意されていますので、実際の制作作業の中でしっかり把握できます。
詳細は こちら
この草案を見ながら会場からのパブリックコメントを一緒に考えてみましょう
詳細は こちら
CMS やブログツールとして人気の高い Movable Type ですが、考え方次第では Web 公開用に限らない様々なファイルを生成するプラットフォームとして使用することが可能です。本イベントではゲストに、Movable Type を提供するシックス・アパート日本法人の上ノ郷谷太一氏と、ロクナナワークショップ講師の黒野明子氏をお迎えし、開発者側と制作者側の双方から Movable Type の新しい使い方を探っていただきます。
詳細は こちら
ビジネスフローを変える。Adobe Acrobat 9 を利用することで、各種申請書類や社内外文書が、ビジネスの効率向上に貢献する「スーパー電子文章」に早変わりします。もし上記のような使い方しか知らない場合は、本講座をオススメします。
詳細は こちら
0 をハンズオンで学ぼう
0 を一人につき PC 一台の実習環境で学ぶハンズオントレーニングです。0 プロフェッショナルガイド」(マイコミ)をテキストとして、著者である野中文雄氏が直接指導にあたります。
0 の基本と処理の組み立て方・考え方を解説
0 の基礎を終えた方を対象に、MovieClip インスタンスをインタラクティブにアニメーションさせるムービーを作成しながら、座標と座標空間の扱い、条件判定、配列や Object の操作などについて学びます。
詳細は こちら
流行のアプリ開発の土俵に乗り出したい。というクリエイターのみなさんに朗報です。
アイティメディア @IT が主催する、デザインハック・ミーティング Vol
1「おバカアプリ選手権」では、出場するデザイナー×エンジニアのコラボレーションでアプリを創り上げ、その作品ができあがるまでのコラボレーション・プロセスを競います。
エンジニアの自作アプリにデザイナーがひとひねりを加え、ぐっとくるバカアプリに仕上げるまでの、チームワークの気になるツボ、そのプロセスとはいかに
※「おばかアプリ」とは、うざいぐらいにかわいくて、ムダにかっこいい。かゆくないところにも手が届くアプリを指しています。
詳細は こちら
福島では2回目の開催
テーマは「デザイン」
ビッグパレットふくしま 1F コンベンションホール(福島)
詳細は こちら
3回目の開催となる福井版は2デイズで開催
詳細は こちら
※1日6時間のカリキュラムです。
詳細は こちら
「ほんきでクスール」第12期
Flash コンテンツ制作には技術を習得することと同時に、「どんなものを作るか」というアイデアを考えることが重要です。「ほんきでクスール」では受講者みずから企画を考えてもらい、それをもとに作品を作っていきます。見学も随時可能ですので、ご興味のある方は是非ご連絡ください。
詳細は こちら
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
小野田智の「世界の制作会社からコンニチハ
今回からFlashクリエイターの小野田智さんによる長期連載のスタートです。昨年末、「小野田さんがバックパックを背負って世界一周の旅に出る」という話を聞きつけ、せっかくFlashクリエイターが世界を旅するなら、現地のWeb事情やクリエイティブの現場をレポートして欲しい。
現在開発中の Flash Catalyst の最新ビルドを使い、アドビの開発チームにフィードバックを送るプレリリースプログラム(日本語)に参加しませんか
(メールに氏名、氏名(ローマ字)、会社名をご記載ください。ぜひ、Webサイトの検証作業の補助ツールとしてご活用ください。
内田洋行の製品にみるFlashの汎用性とUCDの有用性
内田洋行の次世代ソリューション開発センターでは、様々な製品・空間のデザインを手がけています。その中からFlashを使った事例を紹介するとともに、同社がデザインプロセスに取り入れているUCD(ユーザー中心設計)手法について伺いました。
大重美幸の「これ見落としてませんか
0」 第5回 スクリプトでフィルタを適用する方法
スクリプトでフィルタを適用するなんて難しいと思っていませんか
実は、簡単にできるのです。今回は、ムービークリップとビットマップへフィルタを適用する方法を丁寧に解説していきます。
ワンパクの「もっと使いこなしてみよう
第4回 正規表現を使った検索・置換にチャレンジ
今回取り上げるのは「正規表現を使った検索・置換」です。正規表現を使えば、値の異なる属性を検索したり、特定のマークアップ構造の要素を検索したりと検索の幅がグッと広がります。本記事では、Standard版の「Edy利用履歴の読み込み機能」を使ったサンプルアプリケーションのカスタマイズ方法を紹介します。
お客様よりお寄せいただくご質問や弊社で確認している製品の不具合情報を掲載
大阪開催のセミナー他、インタラ塾、CSS nite、そしておなじみ各製品向けセミナーの最新情報を一挙公開
気になる情報のチェックはお忘れなく
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
小野田智の「世界の制作会社からコンニチハ
内田洋行の製品にみるFlashの汎用性とUCDの有用性
大重美幸の「これ見落としてませんか
第5回 スクリプトでフィルタを適用する方法
ワンパクの「もっと使いこなしてみよう
第4回 正規表現を使った検索・置換にチャレンジ
それにともないWebサイトの検証作業も負担が増しています。その検証作業の補助ツールとして活用していただきたいのが、アドビが提供するクロスブラウザーテストサービス「BrowserLab」です。BrowserLabでは、モダンブラウザーにおけるサイトの見た目を比較することができます。
モダンブラウザーの新旧バージョンをサポート
ブラウザーによっては、1台のマシンに複数のバージョンをインストールできなかったり、古いバージョンが配布されていなかったりするだけに、幅広いバージョンでチェックできる環境を持つのは大変です。0など古いバージョンもサポートしています。チェックしたいサイトのURLを入力するだけです。
入力すると、あらかじめ指定したブラウザーでの表示結果の画面キャプチャを自動生成します(後述するように、比較するブラウザーの種類をカスタマイズできます)
BrowserLabでは、この生成した画面キャプチャを使って表示することになります。そのため、BrowserLabで表示したページ上のリンクをクリックして移動したり、インタラクティブ要素を試したりすることはできません。別なページを比較する場合は、その都度、該当URLを入力して画面キャプチャを生成する必要があります。前述のように、多くのモダンブラウザーとOSの組み合わせをサポートしていますが、チェックするブラウザーのセット内容をカスタマイズし、その内容を登録することができます。ここで選択されているセットの画面キャプチャが生成されます。なお、一度に比較できるのは2画面までです。2つの画面は連動してスクロールします。
なお、スクロールバーを使わずとも、アドビ製品と同様に
上部のスライダーバーを使って、透明度を調整できます。このルーラーの単位はピクセルです。また、ルーラー部分からドラッグ操作でガイドを引くこともできます。2-up Viewの場合、片方の画面でガイドを引くと、もう片方の画面の同じピクセルの位置にガイドが自動で引かれます。また、ページの特定部位を比較しやすいように、表示基点(0, 0)の位置を移動させることができます。Flashアニメーションを埋め込んでいるサイトなどでは、ページが表示されてしばらく経過した後の状態を比較したい場合もあります。その場合は、Delay部分で遅延時間を設定します。最大10秒まで遅らせることが可能です。Viewモードの選択やルーラー表示/非表示、拡大縮小などといった操作は、キーボードのショートカットキーで操作できるようになっています。これからもユーザーのニーズを捉えてバージョンアップさせていきたいと考えています。ぜひ、試していただき、リクエストなどがあれば、BrowserLabフォーラムに投稿してください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
内田洋行の製品にみるFlashの汎用性とUCDの有用性
今月号の記事
小野田智の「世界の制作会社からコンニチハ
内田洋行の製品にみるFlashの汎用性とUCDの有用性
大重美幸の「これ見落としてませんか
第5回 スクリプトでフィルタを適用する方法
ワンパクの「もっと使いこなしてみよう
第4回 正規表現を使った検索・置換にチャレンジ
「株式会社内田洋行」と聞けば、オフィス家具をイメージする方も多いでしょうが、同社では次世代ソリューション開発センターを設立し、ナビゲーションシステムやCD試聴システムなど、様々な製品・空間のデザインを手がけています。本記事では、内田洋行 次世代ソリューション開発センターの方々に彼らの取り組みとUCDの意義について伺いました。Edge:次世代ソリューション開発センターを立ち上げた経緯や、これまでの取り組み・製品について教えてください。三宅:次世代ソリューション開発センターは、2001年7月にスタートしました。当時、「これからの空間は、小型化したコンピューターが埋め込まれ、それぞれがネットワークに繋がる。その結果、空間全体のインターフェイスやコンテンツが重要になる」と予想して、その時代に対応するための技術者部隊として立ち上げ、IT系の人材も本格的に採用しました。
組織のリーダーは1人(現センター長の村 浩二)だけで、中堅社員が2名、あとは新入社員全員と2年生社員9名の合計48名
文系理系混合で、学生時代の専門性も多岐にわたっていました。配属されたメンバーは「とにかく今までの内田洋行にはない、全く新しいことを考えなさい。ただし、社内の他部署の人には一切相談してはいけません。社外の人だけと繋がり、新しい内田洋行の姿を創りなさい」と命じられました。最初は、「何をすべきか」を考えるところからのスタートでした。最先端のコンピューター技術、あるいは空間のインターフェイスを研究している国内外のいろいろな大学の先生や先端企業の研究所へ足を運び、勉強しながら研究を進めました。
これら大学研究室や企業と共同研究も多く実施し、「これから世の中はこうなるだろう
では、何を創ろうか」というところから考えました。社内で唯一連携することを許された空間デザイン部隊とともに、アイデアを空間の中で具体化する姿は、社外から見て1つの価値になっていました。そうすることで、社外の先生や研究者から、次々と他の先生や会社を紹介していただいて、今では、ユビキタスやインターフェイスの研究をしているところとは、ほとんど何らかの繋がりができています。次世代ソリューション開発センターではこれまでに様々なものを手がけてきましたが、私達が行っているのは「場づくり」です。それは、「場」のしつらえ、「場」を制御するためのICT技術、「場」を演出するコンテンツなどを統合してデザインすることです。例えば、以下のような事例があります。JR東日本研究開発センターフロンティアサービス研究所との共同開発した、無人駅の情報提供システムです。鉄道職員が駐在していない「無人駅」では、列車の在線位置や周辺情報などの情報提供が不足しています。このシステムでは、列車の在線位置や周辺情報、緊急情報などを情報表示装置に表現することができます。また、音声での情報提供も可能となっています。空間内にあるプロジェクター、音声・映像スイッチャー、ミキサーなどのAV機器を制御できるデバイスです。各機器の電源や音量、映像切り替えなどを瞬時に操作でき、その場に合った環境を簡単に作り出すことができます。タンジブル・インターフェイスを指向したテーブル型のファニチャです。引き出しの中にある様々なモノを使って、そのモノにまつわる「情報」を引き出したり、操作したりすることができます。引き出された情報は、天板上のディスプレイに表示されたり、音楽になったり、照明の光度を変化させるという形で表出されます。※内田洋行のサイト「UCD*UCD」では、これらを含む事例の内容や開発プロセスについて詳しい情報が公開されています。
Edge:「&音試聴システム」や「けんさく君」といった製品では、Flashテクノロジーを利用されたそうですが、どのようなものなのでしょうか
馬庭:「&音試聴システム」は、株式会社旭屋書店様が大阪の大型ショッピングモール「なんばパークス」に出店した新業態複合店舗「&音(andon)」、その店内に設置したジャズレーベル澤野工房コーナー用CD試聴システムです。初めてジャズに触れる人にも敷居の高さを感じさせないようにし、快適な試聴の「場」を提供することを目指しました。従来のCD試聴機の機能を損なわないようにしつつ、既存のPC型試聴機にはない「聴きながら見ることができる」機能を取り入れています。また、RFID技術も利用し、店内にあるすべてのCDをシステムにかざすだけで試聴できるようになっており、便利で楽しく利用できるシステムを実現しています。
「&音試聴システム」の全体像
画面下にある受け手にRFIDタグ付きのCDをかざすだけで試聴できるようになっています。試聴しているCDのジャケットや曲名、関連作品などの情報が表示され、聴きながら見ることができるようになっています。馬庭:「けんさく君」は弊社コンセプトショールームに設置している製品紹介用の検索システムです。コンセプトショールームにお越しくださったお客様に、製品をよりご理解いただくために、実物を見ていただきながらより詳細な説明をしています。また、色や素材のバリエーションのシミュレーションなど、実物ではなかなかできない部分を補っています。さらに、「製品紹介」という切り口のほかに「事例紹介」という切り口も用意し、製品の利用イメージを掴んでいただけるようになっています。
「けんさく君」システムは九州支店に移転中で、2月中旬頃に公開再開予定
「けんさく君」のユーザーインターフェイス
選択した商品の情報だけでなく、その商品の利用イメージも提示するようになっています。馬庭:実は、これらのシステムを含め、弊社のインタラクティブなデジタルサイネージの多く(UCD*UCDに掲載されているワイン検索システムなど)は、Flashを利用しています。様々な技術を使って開発してきた経験から、それぞれの技術の良いとこ取りをした結果、「外部デバイスとの連携やデータの取得・解析を管理するロジックはJava」、「インタラクティブな表示部分はFlash」というスタイルに自然と落ち着きました。Flashが選ばれた理由はいくつかあります。
まずは、デザインの面
アプリケーションを構築する際には見た目だけではなく使いやすさにもこだわっているので、Flashだとデザイナーが作成したIllustratorデータとの親和性が高いことやインタラクティブなユーザーインターフェイスを実現させるのが簡単であるというメリットがあります。
開発のしやすさという面でも、メンバー内にはオブジェクト指向のエンジニアが多いので、ActionScript 3
0であればJavaやC#などと比較して教えることができるのでエンジニアの理解も早いですね
JavaとFlashの連携には、弊社で開発したフレームワークを利用しています。主に2つの技術のデータをやりとりする部分です。
イベントの引き渡しやオブジェクトの互換だったりとか
このフレームワークのおかげでデザインとロジックの分離を行うことができるので、上記2製品も含めて多く利用しています。大丸:UCDでは、解決すべき問題を見つけ、分析し、形にし、評価するための様々な手法を提供します。例えば、観察調査、ワークモデル分析、ペルソナ法、シナリオ法、ワイヤーフレーム、ユーザビリティ評価法などが挙げられます。それらの手法を用いて、製品やサービスを作る最初から最後までの全過程において、ユーザーのニーズとゴールに焦点を当てるのがUCDです。Edge:「ユーザーのことを考える」というのは当たり前のように思えます。
あえて、UCDという手法が登場したということは、従来の手法では不十分、あるいはUCDを実践すれば新たなユーザーニーズやソリューションを掘り起こせるということでしょうか
大丸:どのようなデザインであれ、「ユーザーのことを考えない」というデザイナーや開発者は存在しないと思います。しかしながら、デザイナーや開発者はユーザーではありません。自分自身の経験や偏見を持っているのは当然で、デザインするうちに、想定する場面ごとにユーザー像を自在に変えてしまうことがあります。いわゆる、開発者の利害に応じて思いどおりに行動する「ゴム製のユーザー」となってしまうのです。さらに、チームでデザインや開発を進める場合には重要です。もしメンバー間で想定するユーザー像について差異が生じてくると、目的を共有できず、結果として大変な問題を引き起こしてしまいます。UCDは、ユーザーのニーズとゴールを明確に描くことで、これらの問題を解決する手法です。単なるユーザビリティを超えた、ユーザーにとって価値あるモノづくりを行うためのデザインプロセスだといえます。Edge:「&音試聴システム」や「けんさく君」で、UCDを取り入れたからこそ生まれてきた要素があれば教えてください。大丸:「&音試聴システム」では、操作フローやアプリのユーザーインターフェイス、RFIDを利用した際のシステムの振舞いまで、すべてが観察調査の結果分析に基づいています。例えば、「澤野のおすすめ」という画面項目は、開発計画にありませんでしたが、ユーザーが求めているものだという結果を得られたので、画面項目として追加しました。また、ユーザーインターフェイスでは、CDジャケットの画像を大きく表示し、試聴を途切れさせずに他のCDを探せる仕組みとなっています。これはユーザー要求を受けて、デザインを行いました。
「澤野のおすすめ」画面
試聴中の曲を止めることなく、他のCDの概要を見られるようにダイアログを表示します。「けんさく君」においても、最初の観察結果に基づいて、ユーザーが商品とシーンを行き来しながら空間を作り上げられるユーザーインターフェイスを目指しました。※内田洋行のサイト「UCD*UCD」では、「&音試聴システム」の内容や開発プロセスについて詳しい情報が公開されています。Edge:UCDを導入したい場合、上記のような工程をすべて取り入れることが理想だと思うのですが、なかなか難しいそうです。
まず手始めにするとすれば、何かアドバイスがありますでしょうか
大丸:まず手始めとして、既存の製品に対するユーザーテストを行うと良いと思います。普段の自分達が、いかにユーザーを理解していないかということに気付かされ、ハッとするはずです。規模は小さくても構いませんから、まず始めてみることが重要だと思います。声を掛けやすい社内の方に被験者となってもらうことで十分です。
そこから見えてきた課題を解決するために少しずつUCDの手法に取り組んでいけば良いのではないでしょうか
左から、エンジニアの馬庭智憲氏、エンジニアの三宅智之氏、UCD担当の大丸晃平氏
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
0」 第5回 スクリプトでフィルタを適用する方法
大重美幸の「これ見落としてませんか
第5回 スクリプトでフィルタを適用する方法
今月号の記事
小野田智の「世界の制作会社からコンニチハ
内田洋行の製品にみるFlashの汎用性とUCDの有用性
大重美幸の「これ見落としてませんか
第5回 スクリプトでフィルタを適用する方法
ワンパクの「もっと使いこなしてみよう
第4回 正規表現を使った検索・置換にチャレンジ
スクリプトでフィルタを適用する方法と聞けば、難しそうに感じするかもしれませんが、実は簡単にできます。しかも、プロパティインスペクタの[フィルタの追加]メニューにあるのは7種類ですが、スクリプトではそれ以外にも3種類のフィルタを扱うことができます。ムービークリップとビットマップへフィルタを適用する方法を丁寧に解説していきますので、ぜひこの機会にマスターしてください。表示オブジェクトにフィルタをかける。
前回の宿題を覚えていますか
FLVに何やら模様が合成されているというやつですが、これはCS4から利用できるようになったShaderフィルタをFLVに適用しています。
そこで今回はShaderフィルタの解説を
と思いましたが、いきなりShaderの説明に入るのはハードルが高いので、今回は基礎知識としてのフィルタの話をしましょう
さて、ご存じのようにムービークリップのインスタンスにはフィルタをかけることができます。フィルタをかけるにはステージでインスタンスを選択し、プロパティインスペクタの[フィルタの追加]メニューからフィルタを選びます。例えば、ドロップシャドウを追加すればインスタンスにフィルタが適用されます。fig1 ムービークリップのインスタンスにドロップシャドウを適用します。インスタンスgirl_mcにドロップシャドウをかけるスクリプトは次のとおりです。filtersプロパティの値は複数のフィルタを追加できる配列です。適用するフィルタが1種類の場合でも[dsf]のように配列で指定します。ムービークリップインスタンスgirl_mcにドロップシャドウを適用します。[フィルタの追加]メニューには7種類のフィルタがあります。ドロップシャドウ以外のフィルタにもそれぞれ対応するクラスがあります。
[フィルタの追加]メニューから選べるフィルタとクラスの対応
例えば、ぼかしとベベルの2つのフィルタを同時に適用したいならば、2つのフィルタのインスタンスを作り、filtersの配列に追加します。スクリプトで設定したフィルタを解除するにはfiltersの値を[]にします。複数のフィルタを適用している場合は、取り去りたいフィルタを取り除いた配列を再設定します。ぼかしとベベルの2つのフィルタを適用します。fig3 ぼかしとベベルの2つのフィルタを適用します。プロパティインスペクタでフィルタを適用するとわかるように、フィルタには影の色や方向など、それぞれに様々なオプション設定があります。それらの設定値は個々のフィルタのプロパティで指定します。プロパティを指定しなければ初期値の値でフィルタが適用されます。光彩フィルタのプロパティを設定して適用します。プロパティインスペクタの[フィルタの追加]メニューには7種類のフィルタがありますが、ActionScriptを使えばさらに次の3つのフィルタを利用できます。
スクリプトでのみ利用できるフィルタの種類
置き換えマップ
フィルタを使ったアニメーション
フィルタはアニメーションしているムービークリップインスタンスにも適用できますが、フィルタのプロパティの設定値を変化させることでアニメーションの効果を作ることができます。ただし、フィルタのインスタンスのプロパティを変更しても適用している効果はそれだけでは反映されません。
//ぼかし量が変化するアニメーション
//フィルタを再設定しなければ反映されません。fig5 黄色く光る量が変化するアニメーションになります。ビットマップにフィルタを適用する。これまでムービークリップのインスタンスにフィルタを適用する例を見てきましたが、フィルタを適用できるのはムービークリップだけではありません。つまり、DisplayObjectクラスを継承しているクラス、すなわち表示オブジェクトならばフィルタを適用できるわけです。表示オブジェクトであるSpriteやTextFieldでも適用できるフィルタの種類や設定方法は同じです。しかし、フィルタを利用できるのは表示オブジェクトだけではありません。ビットマップデータにもフィルタを適用できるのを忘れてはなりません。ビットマップとビットマップデータを混同しがちですが、ビットマップはBitmapクラス、ビットマップデータはBitmapDataクラスです。この関係はテキストフィールドとテキストデータの関係に似ています。テキストフィールドは容器でテキストデータがその中身です。
テキストフィールドfldにテキストデータを入れるにはfld
これと同じようにビットマップは容器でビットマップデータがその中身です。
ビットマップbmpのビットマップデータはbmp
bitmapDataで参照でき、また、Bitmapのインスタンスを作る際のコンストラクターの引数で指定することもできます。前置きが長くなりました。
さっそくビットマップデータを使ってみましょう
ビットマップデータはBitmapDataのコンストラクターで作ることもできますが、写真などの外部イメージファイルから読み込むこともできます。ここではもっと簡単にライブラリに読み込んでおいたイメージからビットマップデータを作る方法を使います。ライブラリに読み込んだ写真からビットマップデータを取り出すには、写真にリンケージ書き出しの設定をします。サンプルではphotoのクラス名で書き出しています。fig6 ビットマップのビットマップデータにぼかしフィルタを適用します。コンストラクターの引数の2個の数値は何でも構いませんが省略できません。次にビットマップデータに適用するぼかしフィルタを作ります。これまでフィルタをfiltersプロパティに設定することでフィルタを適用してきましたが、ビットマップデータにはfiltersプロパティがありません。そして最後にビットマップデータを表示するビットマップを作ってステージに表示します。fig7 ビットマップのビットマップデータにぼかしフィルタを適用します。ビットマップデータにぼかしフィルタを適用します。//ぼかしフィルタを作ります。ビットマップデータでは、ビットマップデータの一部分の領域にフィルタを適用することもできます。第2引数は加工に使用するデータの領域です。第3引数は処理後のデータを書き出す座標です。次の例ではちょうどバケツが並んでいる領域をぼかしています。fig8 バケツが並んでいる領域だけをぼかします。ビットマップデータの一部分の領域をぼかします。//ぼかしフィルタを作ります。それでは最後に宿題です。
次回へ持ち越しの宿題があるので今回はちょっと簡単な問題
次の写真にはぼかしフィルタが適用してありますが、先のぼかしの結果と違って輪郭もぼけています。
この違いの原因はどこにあるのでしょうか
fig9 写真の輪郭もぼけていますよね
なぜこうなるのでしょうか
エッジニュースレター連載記事 : 大重美幸の「これ見落としてませんか
第2回 外部 swf ファイルのシンボルを利用する。第3回 配列の値の並べ替えをマスターする。第4回 FLV をウィンドウ/画面全体に表示する。
(おおしげよしゆき)
日立情報システムズ、コミュニケーションシステム研究所を経て独立
執筆、講師、ソフトウェア開発を行う。
趣味はサーフィンとジョギング
著著は約50冊
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
ワンパクの「もっと使いこなしてみよう
第4回 正規表現を使った検索・置換にチャレンジ
今月号の記事
小野田智の「世界の制作会社からコンニチハ
内田洋行の製品にみるFlashの汎用性とUCDの有用性
大重美幸の「これ見落としてませんか
第5回 スクリプトでフィルタを適用する方法
ワンパクの「もっと使いこなしてみよう
第4回 正規表現を使った検索・置換にチャレンジ
株式会社ワンパクの近藤&杉山の師弟コンビが 、Dreamweaver の覚えておきたい便利な機能や、見落としていた機能などをお届けする本連載
今回取り上げるのは「正規表現を使った検索・置換」です。正規表現を使えば、値の異なる属性を検索したり、特定のマークアップ構造の要素を検索したりと検索の幅がグッと広がります。そして、「杉山のこれ知ってます。」のコーナーでは、使用頻度の高い検索・置換のパターンや便利な検索・置換のパターンを保存して、すぐに呼び出せるようにするクエリーについて紹介します。やればわかる。わかれば使いたくなる。
まずははじめの一歩
杉山:師匠、ちょっと聞きたいのですが
今やっている案件のHTMLにはいろんな人が関わっていて、ちゃんとした管理がされてなくて、HTMLのコードがタブでインデントされていたりされていなかったり、記述方法がバラバラで気持ち悪いんですよ
あれほどインデントなしって指示したのに
近藤:「ソースフォーマットの適用」(メニュー[コマンド]→[ソースフォーマットの適用])で揃えたらいいのではないか
杉山:数ページだったらそれでいいのですが、もう膨大で
それでちょっと調べたのですが、正規表現ってありますよね
詳しいことはよくわからないんですが、正規表現を使ってサイト内のファイルを一気に置換できないかなーと思って
キサマから正規表現なんて言葉が出てくるとは
成長したもんだ。
感動にひたるのもいいですが、質問の件はどうなんでしょう
近藤:おぉ、そうだったな
これは便利だからぜひ覚えておくといいぞ
杉山:そもそも正規表現ってなんですか
なんか、宇宙の言葉みたいですよね、記号がたくさん並んでいて
正規表現とはいくつかの文字のかたまりをある1つの形で表す方法だ。
たくさんの文字の中から、特定の文字列を検索するときなど簡単に見つけられるぞ
近藤:とりあえずやってみよう
杉山:開きました。あっ、「オプション」のところに「正規表現を使用」のチェックボックスがある。
これで正規表現を使うんですね
赤枠部のチェックを入れる。
近藤:フムフム、なかなかカンが良くなってきたな
そうだ、そのチェックを入れることで正規表現が使えるようになるのだ。
杉山:なぜチェックを入れないと使えないんですか
近藤:正規表現では、「メタ文字」といわれる特別な意味をもつ文字を使って探したい文字列を表現するんだ。、{}、[]、()」などの半角文字なんだが、検索・置換の際にその文字が使われていた場合、それが普通の文字列なのか、それとも正規表現のメタ文字なのかわからない。どちらなのか明確にするためにチェックが必要なんだ。どうやって使うかまだわからないです。
近藤:それではまずはHTMLコード内に記述されたタブを消してみよう
検索対象は「現在のドキュメント」、検索は「ソースコード」を選択、それから検索ボックスの「オプション」で「正規表現を使用」にチェックは入っているな
杉山:入ってます。近藤:正規表現でタブは「\t」(バックスラッシュ+t)で表される。
「検索」のテキストボックスに「\t」と入力し、これを削除するわけだから「置換」のテキストボックスは空で置換をかけてみよう
「検索対象」が「ローカルサイト全体」になっているぞ
まずは「現在のドキュメント」にしておいて問題がないか確認してから、他のファイルも置換するようにな
杉山:サイト全体に対して置換すると問題があるんですか
近藤:Dreamweaverでサイト内のすべてのファイルを置換した場合、開いていないファイルは置換後そのまま保存されてしまい、もとに戻せなくなってしまうからな
杉山:あっ、そうだった。それ、経験あります。
(>_<)間違えて置換してしまって、その後またすべてのファイルを置換し直したことが
近藤:それにHTML以外のCSSやJavaScriptのファイルなど、置換したくないファイルもあるだろうし、置換対象となるファイルをちゃんと確認してから実行するように
それでは現在のドキュメントへ置換を実行します。おぉ、すごい。(@_@) 見事にタブがキレイになくなりました。
あと改行が2回入っている箇所があるので、改行は1回に統一したいのですが
試しにやってみるんだ。
杉山:えっと、改行が2回の場合は1回にすればいいわけだから
改行がキレイに1回に統一されました~
連続する改行を1回に統一
ギャル文字より簡単
メタ文字の基本
近藤:それではその他のよく使うと思われる正規表現をみてみよう
近藤:最近はサイトを作る際、XHTMLで記述することが多いが、数年前に作られたサイトはHTMLで記述されている場合もある。そのままHTMLのコードを流用できる場合でも「width」や「height」属性などが指定されているため、記述し直さなくてはならないことがあると思う。そんなときも正規表現なら一括で置換が可能だ。近藤:もちろんだ。
そのための正規表現なのだからな
「\d」は数字1文字を表し、「\D」は数字以外(スペースや改行含む)1文字、「\w」はアンダースコアを含む英数字1文字、「\W」はアンダースコアを含む英数字以外(スペースや改行含む)1文字を表しているのだ。
近藤:そうだな
それから「[]」を使って表すこともできるぞ
「[]」は括弧内に含まれる文字のいずれかを指定することができるのだ。
杉山:アルファベットを指定する場合は26文字全部指定するんですか
近藤:いやいや、数字の場合もそうだが「-」(ハイフン)で範囲を指定することができるんだ。近藤:その場合は括弧内で指定した文字に「^」を付けるんだ。これを付けることにより括弧内に含まれない文字を指定することができる。
では「\W」(アンダースコアと英数字以外)を表すには
杉山:えっと
数字以外(スペースや改行含む)1文字
アンダースコアと英数字1文字
アンダースコアと英数字以外(スペースや改行含む)1文字
近藤:まずはこれをしっかり覚えるようにな
それでは値の異なる属性の検索に戻るぞ
その数字が1桁の場合もあれば、2桁、3桁の場合もあり、バラバラだ。そこで「+」を使うんだ。これは「文字が1文字以上繰り返される」ことを表すんだ。なんかややこしくなってきましたね(+_+)
近藤:携帯メールにギャル文字使うより簡単だぞ
(そうなんですか
じゃあ早速やってみます。
数字だから「\d」を使って、数桁を表すために「+」を使うから
近藤:よくできた。
あとありがちなのが、日付の表記の変更だな
こんなときに役立つのが「()」だ。
杉山:何に使うんですか
近藤:これは「()」で括って指定した文字列をグループ化して記憶し、後で参照することができるんだ。
杉山:グループ化して記憶ですか
近藤:そうだ。
それに、いくつも記憶しておくことができるぞ
杉山:えっと
数字だから「\d」を使って、数桁を表すために「+」を使って
さっきやった属性の検索に似ていますね
近藤:コツがのみこめてきたな
では置換はどうなる。杉山:1つ目の値が年で、順に月日と続くから、「$1年$2月$3日」に置換すればいいんだ。近藤:よし、正解だ。
値の異なる属性を検索
日付の表記を置換
いらないやつを探しだせ。
条件付きで検索
近藤:制作している途中に、不要なタグが発生してくることもある。例えば、設定していたclassが不要となった場合だ。
そのclassは複数のタグに指定されているが、その中でも<p>タグに内包された<span>タグに設定されているclassだけを<span>タグごと削除したい場合、さてどんな検索をしたらよいか
class名で検索すると他のタグに設定したclassも全部ひろってしまうからダメで
近藤:そんなときも便利な正規表現
早速、正規表現を使って検索・置換してみるのだ。
<span>に内包されているテキストはそのまま保っておきたいから、グループ化して保存しておけばよさそうだな~
でも、どうやってそのテキストを指定するんだろう
近藤:テキストは数字の場合もあるだろうし、ひらがなかもしれないし、英字かもしれないしな
その場合は「
」で表すんだ。これは、「改行以外のすべての単一文字」を表す。
それに「文字が1文字以上繰り返される」を表す「+」を組み合わせると、「改行以外のすべての単一文字が1文字以上繰り返されている」ものとなるな
+」で検索できるんですね
これをグループ化して保存しておきたいから、「(近藤:いいぞ、正解だ。では置換はどうなる。杉山:<p>タグは残しておきたいからそのままにして、<span>とclassは削除したいから空にして、保存してあるテキストは$1で参照だ。
少しは正規表現に慣れてきたようだな
不要なタグごと削除
ちょっと長くなったので
そろそろまとめ
近藤:いくつか例をみてきたが、もう一度最後に今回でてきたメタ文字をまとめておこう
表の下から4項目は、先ほどの表にまとめてあるが、おさらいだ。
直前の文字の1回以上の繰り返し
改行以外のすべての単一文字
グループ化し保存
()で保存したパターンを参照
※nは任意の数字
数字以外(スペースや改行含む)1文字
アンダースコアを含む英数字1文字
アンダースコアを含む英数字以外(スペースや改行含む)1文字
【その他のメタ文字は、下記アドビサイトに掲載がありますので、ご覧ください。杉山:まずは、表のメタ文字をしっかりマスターできるようにします。まずは正規表現の基本をしっかり押さえておくのだ。今回はほんのさわりの部分をみてきたが、正規表現はまだまだ奥が深い。
話しだすと、1冊の本なみの文字数となってしまいそうなので、今日はここまで
この終わり方、前にどこかで聞いたような
杉山の「これ知ってます。
検索・置換のパターンを登録」
杉山:よく使う検索・置換のパターンや便利な検索・置換のパターンは、その都度書いていたら面倒ですよね
そのパターンを「クエリー」として保存しておけば、検索・置換ウィンドウからすぐに呼び出し検索・置換を実行することができます。今回の正規表現を使った検索・置換パターンで、よく使いそうなものは早速登録しておこうと思います。検索・置換ウィンドウの「クエリーの保存(赤枠部)」をクリックし、任意の場所へ保存します。保存したクエリーは検索・置換ウィンドウの「クエリーのロード(赤枠部)」から参照できます。
エッジニュースレター連載記事 : ワンパクの「もっと使いこなしてみよう
第1回 まずはマイワークスペースの整備、そして作業開始
第3回 蝶のように舞い、蜂のように刺せ、ショートカットキー
杉山由起子(すぎやまゆきこ)
いくつかの制作会社に在籍した後、1PAC
師匠近藤のもと、主にマークアップを担当しつつ、デザインもこなせるようになろうと日々七転八倒中
近藤将範(こんどうまさのり)
の設立に参画する。主にテクニカルディレクターとしてコーポレートサイト等の設計・制作に携わる。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
小野田智の「世界の制作会社からコンニチハ
内田洋行の製品にみるFlashの汎用性とUCDの有用性
大重美幸の「これ見落としてませんか
第5回 スクリプトでフィルタを適用する方法
ワンパクの「もっと使いこなしてみよう
第4回 正規表現を使った検索・置換にチャレンジ
SDK Standardでは、交通乗車用カードや電子マネーとして世の中に広く出回っているFeliCaカードへのアクセス(暗号化通信以外)のほか、おサイフケータイへのWebサイト起動やメーラー起動などの機能があります。さらに、ビットワレット株式会社にご協力いただき、Edyの残高や利用履歴を確認できる機能を用意しているので、手近にあるEdyを使ってEdy用のFlash/AIRアプリケーションを開発することも可能です。SDK Standardによって、FeliCaによる電子マネーカードのデータを読み書きするアプリケーションを開発したり、様々なFeliCa対応アプリケーションを販売したり、有償サービスとして提供することが可能になりますので、ぜひご活用ください。
Edyへのアクセスに必要なソフトウェア
これに加えて実行にはソニーから公開されている最新版のFeliCaポートソフトウェアが必要です。※ Standard版については、こちらのページからのダウンロード販売となっております。ダウンロード販売以外のご提供方法については後日お知らせする予定です。Edyはビットワレット株式会社が運営するプリペイド型電子マネーで、カード用のデバイスフォーマットとしてFeliCaが使用されています。提携しているクレジットカードやメンバーズカードなどに付属している場合もあります。また、専用のアプリケーションをダウンロードすることでおサイフケータイでも使用することができます。詳しくは、Edyのホームページをご覧ください。swfというファイルに実装されています。
これはクラスライブラリファイル(swc)ではないのでアプリケーションにリンクすることはできません。これにより、send()メソッド呼び出しによるコマンドが受信可能になります。send()メソッド呼び出しによりコマンドを送信します。第1引数はコネクション名の文字列で、これにより接続先を指定しています。第2引数はメソッド名の文字列を指定します。swf内の同名メソッドが呼び出されます。ドメインを超えるLocalConnectionにはセキュリティサンドボックスのポリシーが適用されるので注意してください。また、エラーイベントに対するイベントリスナーも登録した方が良いです。0 コンポーネントリファレンスガイド」などのドキュメントを参照してください。主な手順は、swfをロードする処理の例です。swfに引数がいくつか設定されています。swfは10秒間読み取りを実行し、その間にEdyが検知できなければエラーを返します。1つはアプリケーションからEdyの読み取り要求を送信するため、もう1つは読み取り結果を受信するためです。
swfの処理が完了したら、呼び出されるメソッド
できること、できないこと
Edyのカードから以下の情報を読み込むことができます。
チャージ、支払いなどの情報
残念ながら、利用した店や購入した商品などの情報はカードには記録されていないため、読み込むことはできません。アプリケーションを作成するときには注意してください。サンプルコードを以下のURLから利用できるようにしました。サンプルアプリケーションは、読み取った履歴を単純にDataGridクラスで表示させるだけのものです。背景画像を変更するだけでも自分だけのEdy Viewerになりますし、読み取った履歴を使っておもしろい使い方が見つかるかもしれません。もし自社ブランドのEdyカードを発行しているなら、自社オリジナルデザインのEdy履歴確認アプリにRSSニュースティッカーを入れたり、あるいは残高や履歴に応じた特典やゲーム機能を付加したり、などという使い方ができそうです。
今回ご紹介したSDK Standardは、このコンテストに参加される場合には貸し出しをさせていただきますので、この機会にぜひご利用ください(詳細はコンテストの応募要領をご覧ください)
既にwonderfl上には、単純にカードを補足する、おサイフケータイにURLをPushする、歩数計の情報を読み取る、といったソースコードが公開されていますが、今回Edy対応のコードも追加いたしました。みなさま、どしどしFORKいただき、いろいろな発想でのEdy対応Flashを作って、ぜひコンテストに応募してみてください。(アドビ システムズ社)の米国ならびにその他の国における商標または登録商標です。※ FeliCaは、ソニー株式会社が開発した非接触ICカードの技術方式です。※ Edyは、ビットワレット株式会社が管理するプリペイド型電子マネーサービスのブランドです。※ おサイフケータイはNTTドコモの登録商標です。※ その他本文中の会社名や商品名は、該当する各社の商標または登録商標です。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
小野田智の「世界の制作会社からコンニチハ
内田洋行の製品にみるFlashの汎用性とUCDの有用性
大重美幸の「これ見落としてませんか
第5回 スクリプトでフィルタを適用する方法
ワンパクの「もっと使いこなしてみよう
第4回 正規表現を使った検索・置換にチャレンジ
アドビ製品ハンズオンセミナー 2月開催分申込み受付中です。
Webサイトを企画・制作、管理運営、効果測定までの一連ワークフロー
今からでも遅くない。オブジェクト指向プログラミングの考え方を習得したい。
0 をハンズオンで学ぼう
0によるインタラクティブデザイン講座
Flashではじめるフィジカルコンピューティング
文系だって大丈夫
0 で学ぶ数学基礎講座
0 で学ぶ座標と3次元空間の数学講座」
「ほんきでクスール」第17期
0を「もっと」使いこなす。
「もっとほんきでクスール」第9期
第16回目の月刊インタラ塾は「広告営業力2 アカウントプランニング編」の著者である風とバラッド株式会社の長崎幹広氏と株式会社 東急エージェンシーの神田亮氏をゲストにお招きいたします。お二人には「広告営業力」についてはもちろん「クリエイティブエージェンシーとはなにか」という所から「これからの営業に求められる事」など、多岐にわたって語っていただく予定です。現在、広告営業に携わっている方からフリーランスのクリエイターの方までオススメできる内容になっているかと思います。是非、会場までお越しください。
メディア部門に配属され、フジテレビ系列局担当に
以後、メディアプランナーとしてマスメディアを中心とした広告企画立案/実施を担当
2005年6月同社退社後、同年7月、風とバラッドに参加
広告企画・プロデュースに携わる傍ら、さまざまな分野のプランニング・プロデュースを行う。主な担当クライアントには京セラ、セキスイハイム、フジテレビ、マイナビなどがある。
外資系食品企業のブランドAEを3年間担当後、ストラテジックプランニング部門に異動し、通信、ゲーム、食品などの戦略策定に従事
その後営業職に戻り、現在はコーセーコスメポート「ソフティモ」「コスマジック」のブランド戦略及び広告制作の全体統括を担当
ゲストへのご質問はTwitterより受け付けております。※全てのご質問にお答えできるとは限りませんのであらかじめご了承ください。
東京メトロ「銀座」駅(銀座線・丸の内線・日比谷線 )を下車、A13番出口から徒歩2分
東京メトロ「銀座一丁目」駅(有楽町線)を下車、8番出口から徒歩3分
詳細は こちら
アドビ製品ハンズオンセミナー 2月開催分申込み受付中です。企業経営者、企業宣伝担当者やデジタルコンテンツ業界で活躍するクリエイターをサポートするソフト産業プラザ イメディオ(大阪・南港ATC)は、大阪市のデジタルメディア産業を支援するインキュべ-ション施設です。イメディオでは毎月著名な講師を招き、時間がない人でも通い易い単回で、最新のAdobe CS4を利用できる、様々なアドビ製品関連ハンズオンセミナーを割安な受講料設定で開催しています。DTPからWebへステップアップしたい方、サイト管理の内製化を目指す事業者様等の利用も多く、アドビ製品の導入を検討されているセミナー利用者から好評を得ています。
これが出来たら脱・初心者
『脱・やらず嫌い
動きで表現力をアップ Flashコンテンツ制作入門[講師:森和恵氏]2月開催分の続編セミナーやPhotoshopを使ったフォトレタッチセミナーが開催される。
3月の告知および申込みは2月初旬より開始予定
是非お申込みをご検討ください。各セミナーの開催予定日については公式HPをご参照ください。
詳細は こちら
0の基本とプログラミングの考え方を2日間で学べる、初心者向けの基本講座です。0はもちろんのこと、『プログラムもスクリプトも、まったく経験がない。
』という方を対象に、Flashのコンテンツをインタラクティブにするには
など、初歩の初歩から、わかりやすく解説します。0 実践講座」もオススメです。0 スタートパック」もあります。※1社様向けの企業研修にも対応しております。
詳細は こちら
本講座では、これから Flash を学習しようという方を対象に、アプリケーションの基本操作から新機能はもちろん、その活用方法までしっかり学習していきます。わかりやすいサンプルを使って一緒に実習を行うため、Flash コンテンツの基本概念や実践的な制作方法も身につきます。※現在、期間限定 2講座 受講で 10,000円キャッシュバックキャンペーン 実施中です。
詳細は こちら
XHTML/CSS 入門講座では、XHTML/CSS の基礎知識はもちろん、ボックスモデルの概念の理解、カラムレイアウトなど基本的かつ実践的なCSSの記述方法までしっかり学習します。※お好きな1講座からお申し込み頂けます。※現在、期間限定 2講座 受講で 10,000円キャッシュバックキャンペーン 実施中です。
詳細は こちら
約2年間続いたアップルストア銀座3Fシアターでのイベントから、2010年は場所を渋谷に移しての開催となるFlashのお話
今回からは、毎回Flashでつくったアニメーションを紹介し、その作成方法を紹介して楽しんでいただこうという趣向でお送りする「FlashアニメShow」
第1回目は幻想的なBGVのようなアニメーションを徹底分解
Flashアニメーションがどのようにしてつくられて行くのかを御披露します。
アニメーションやグラフィックに興味のある方はゼヒ
(また、次回以降このイベントではゲストを呼んでのトークショウも予定しておりますので、お楽しみに
詳細は こちら
Webサイトを企画・制作、管理運営、効果測定までの一連ワークフロー
即効Webマスター1日養成講座は、社内のWeb担当者(Webマスター)として、最低限度知っておくべき基礎知識を1日で即効習得
Webサイトを企画・制作、管理運営、そして効果測定までの一連ワークフローを紹介します。※1社様向けの企業研修にも対応しております。
詳細は こちら
今からでも遅くない。0でのコンテンツ開発経験がある方を対象に、変数や関数の宣言、配列、制御構造といったプログラミングの基礎から始め、イベント処理、基本的なアニメーション、PointやRectangleといった座標計算、表示オブジェクト、カスタムクラス定義、描画、テキスト処理、外部ファイルの読み込み、XML処理、そして3D処理に至るまで、前半・後半の2つの講座に分けて集中的に学習します。0入門ノート 』をテキストとしてプレゼントいたします。※現在、期間限定 2講座 受講で 10,000円キャッシュバックキャンペーン 実施中です。
詳細は こちら
Flex 開発担当者に必須のコアスキルを短期習得します。4 プログラミング入門」「Flex 3 プログラミング入門」「AIR プログラミング入門」の著者である宮田亮氏が講師を行います。
詳細は こちら
4 プログラミング入門」の著者である宮田亮氏が講師を行います。
詳細は こちら
ビギナー向けの「Dreamweaverベーシックトレーニング」では、実際に Webページを作成しながら、実務でWebサイトを構築することを視野に入れたサイト定義、CSS、画像の挿入などの基本操作とサイト作成の基本的流れを学習していきます。
詳細は こちら
ボタンを使ったスライドショー等、Flash でのインターフェイス作成を題材に、基本的なスクリプトを理解するビギナー向けの講座です。
英語を初めて習うとき、まず英会話からスタートするでしょう
あいさつに始まって、自己紹介や買い物といったさまざまな場面における会話のパターンを覚えることにより、日常会話の進め方を知り、英語に親しむことができます。細かな文法には深入りせず、スクリプトというものはどう記述し、それがどのように動作するのかということを理解していただきます。0 パッケージ割引コースあります。
詳細は こちら
4 プログラミング入門」の著者である宮田亮氏が講師を行います。
詳細は こちら
「Dreamweaverアドバンストレーニング」では、Dreamweaverの基本操作を習得した方を対象に、実践的な作例を題材としてテンプレートの活用、ロールオーバーなどのデザインテクニック、ウィンドウの設定、効率的なサイト管理法などを学びます。
詳細は こちら
オブジェクト指向プログラミングの考え方を習得したい。0の基本的な文法を習得されている方や、他言語によるプログラミング経験がある方を対象とした、基礎から応用へステップアップするための講座です。0の基礎知識の復習から、クラスやオブジェクト指向といったActionScriptをさらに深く理解するための知識を、実習を通して習得します。0入門講座」をオススメします。0 スタートパック」もあります。※1社様向けの企業研修にも対応しております。
詳細は こちら
0 をハンズオンで学ぼう
0 を、一人につき PC 一台の実習環境で学ぶハンズオントレーニングです。0 プロフェッショナルガイド」(マイコミ)をテキストとして、著者である野中文雄氏が直接指導にあたります。
0 の基本と処理の組み立て方・考え方を解説
0 の基礎を終えた方を対象に、MovieClip インスタンスをインタラクティブにアニメーションさせるムービーを作成しながら、座標と座標空間の扱い、条件判定、配列や Object の操作などについて学びます。そして2日間講習の「ステップ3」では、3D風に回転するアニメーションのスクリプトを出発点に、クラスの定義やイベントの配信までデザイン(設計・構成)を展開していきます。三角関数や数学的 な考え方、クラスの応用についても触れます。0 パッケージ割引コースあります。
詳細は こちら
マルチメディアコンテンツクリエイターやインストラクターとして活躍している金像瑞穂氏が講師を担当します。※1社様向けの企業研修にも対応しております。
詳細は こちら
第17回の月刊インタラ塾は「福田敏也プレゼンツ 出張
777塾とは、福田さんが90年代より始めた広告業界の若手育成を目的とした私塾です。今回は特別出張版として、月刊インタラ塾で 777塾を開催していただきます。777塾で「受講生にこれだけは必ず教えている。また、福田さんが考える、広告インタラクティブの本質に触れることのできる良い機会です。企業の広報担当の方や広告営業、制作の方など、幅広い層にお楽しみいただける内容でお送りします。是非、会場まで足をお運びください。ゲストへのご質問はTwitterより受け付けております。※全てのご質問にお答えできるとは限りませんのであらかじめご了承ください。
東京メトロ「銀座」駅(銀座線・丸の内線・日比谷線 )を下車、A13番出口から徒歩2分
東京メトロ「銀座一丁目」駅(有楽町線)を下車、8番出口から徒歩3分
詳細は こちら
0によるインタラクティブデザイン講座
動きのデザイン、インタラクティブなデザイン、最近のWebサイトではこれらの要素が重要です。時間という数値や、ユーザーからのアクションというデータにどのような処理をして、画面上に反映させるか、そこに「アルゴリズム」を組み立ててプログラミングすれば、とても表現豊かなWebサイトが出来上がります。0を活用して、プログラミングはどのような表現が可能で、またどのような表現が得意なのかを体験し、独自の表現を模索します。また、求める表現を実現するために必要となる、基本的な物理法則や数学的な公式を復習し、どのようなプログラミングに落とし込めばよいかを学習します。※現在、期間限定 2講座 受講で 10,000円キャッシュバックキャンペーン 実施中です。
詳細は こちら
Web 制作現場にて CMS に対する必要性が高まる中、今回のセミナーは「経験豊富なパワーユーザ」によるデモを中心に構成
よくありがちな難案件をその場で解決するべく、その案件事例をもとにパワーユーザーが実際に CMS を組み込んでいく様子を大公開
詳細は こちら
スクリプティングには、数学的思考が必要だとよくいわれます。そのとき誤解されがちなのは、公式を探したり覚えたりして、それをスクリプトに当てはめればよいと思い込んでしまうことです。話はそれほど安直ではありません。けれども、シンプルです。大切なのは、基本的な仕組みを知り、論理的に考えることです。やみくもに調べたり、暗記したりするよりも、まず理解することが必要なのです。本講座では、数学の公式も紹介しながら、論理的なスクリプトの組立て方を、実習で学んでいきます。数学の知識については、高校文系程度で結構です。0を使い、イベントリスナーの扱いや条件判定を理解していることが前提となります。0プロフェッショナルガイド 』をテキストとしてプレゼントいたします。※現在、期間限定 2講座 受講で 10,000円キャッシュバックキャンペーン 実施中です。
詳細は こちら
Flashではじめるフィジカルコンピューティング
本講座は、Flashでのフィジカルコンピューティング ツールキットGainer(ゲイナー)の使い方を学習する入門講座です。電子回路の基礎知識から、実際にセンサを使ってデータを思い通りの表現に結びつけるためのいろいろなテクニックを学習します。具体的にはFunnelライブラリが提供するフィルタ処理を学ぶことによって、より実践的なフィジカルコンピューティングへのアプローチを学びます。受講者全員に講座で使用した『 67WS限定 I/Oモジュールキット(I/Oモジュール、ブレットボード、センサーなど)』をプレゼントとしてお持ち帰りいただけます。※現在、期間限定 2講座 受講で 10,000円キャッシュバックキャンペーン 実施中です。
詳細は こちら
ビギナー向けの「Dreamweaverベーシックトレーニング」では、実際に Webページを作成しながら、実務でWebサイトを構築することを視野に入れたサイト定義、CSS、画像の挿入などの基本操作とサイト作成の基本的流れを学習していきます。
詳細は こちら
ボタンを使ったスライドショー等、Flash でのインターフェイス作成を題材に、基本的なスクリプトを理解するビギナー向けの講座です。
英語を初めて習うとき、まず英会話からスタートするでしょう
あいさつに始まって、自己紹介や買い物といったさまざまな場面における会話のパターンを覚えることにより、日常会話の進め方を知り、英語に親しむことができます。細かな文法には深入りせず、スクリプトというものはどう記述し、それがどのように動作するのかということを理解していただきます。0 パッケージ割引コースあります。
詳細は こちら
「Dreamweaverアドバンストレーニング」では、Dreamweaverの基本操作を習得した方を対象に、実践的な作例を題材としてテンプレートの活用、ロールオーバーなどのデザインテクニック、ウィンドウの設定、効率的なサイト管理法などを学びます。
詳細は こちら
毎月第3木にアップルストア銀座にて開催しているCSS Niteのマンスリー版
cssの福田さん、高津戸さんをお迎えし、CSS3にフォーカスします。
詳細は こちら
文系だって大丈夫
0 で学ぶ数学基礎講座
0 で学ぶ座標と3次元空間の数学講座」
0 を、少人数制、一人につき PC 一台の実習環境で学ぶハンズオントレーニングです。0 プロフェッショナルガイド」(マイコミ)をテキストとして、著者である野中文雄氏が直接指導にあたります。本講座は、アニメーションを扱う上で重要な座標空間に関わる、数学の基礎を学習します。とくに後半は、高校文系の数学の知識では理解しにくい、行列と MatrixおよびMatrix3Dクラスについて解説します。スクリプティングよりも、数学的な説明が中心です。0 を使い、イベントリスナーの扱いを理解していることが前提となります。数学の知識については、高校文系程度とします。0 パッケージ割引コースあります。
詳細は こちら
「ほんきでクスール」第17期
Flashコンテンツ制作には技術を習得することと同時に、「どんなものを作るか」というアイデアを考えることも重要です。「ほんきでクスール」では技術の習得と合わせて、受講者が自ら企画を考えてもらい、それをもとに作品を作っていく、実践型の講座です。見学も随時可能ですので、ご興味のある方は是非ご連絡ください。
詳細は こちら
0を「もっと」使いこなす。
「もっとほんきでクスール」第9期
外部ライブラリを使った効果的な開発方法や外部APIとの連携など、Flashでのオブジェクト指向プログラミングを初歩から学ぶことができます。
通常の講義に加えて、自分の企画した作品を制作しますので、より効果的にAS3
0を習得できます。
詳細は こちら
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。AIRの最新情報とデモバトルを交えたイベントレポートをお届けします。
シカゴで最先端の技術に触れる、サンノゼAdobe本社訪問も
“気持ちよく働きたい” Web 制作者必見のイベントレポート
アートディレクション/画面およびインタフェイス設計の要となるツール
セミナーの紹介他
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。もちろん、参加者に配られて AIR Night のラベルが巻かれた缶ビールが、その盛り上がりに一役かったことは言うまでもありません。まずアドビのプロダクトスペシャリスト・太田禎一より、AIR に関する最新情報をご紹介しました。また、Flex SDK(フレームワーク、コンパイラ、デバッガ)を、2007年中を目処として MPL の下でオープンソース化する予定であること、バグベースはすでに公開されていることなども紹介されました。さらには、米国本社よりゲストスピーカーとして、テクニカルプロダクトマネジャーのリチャード・ガルヴァンが迎えられ、Dreamweaver CS3 で制作した Web アプリを AIR アプリケーションをパッケージすることを可能にするプラグイン、そして Flash CS3 から AIR アプリケーションを生成できるプラグインの「世界初のスネークプレビュー」など、今回のイベントならではのサプライズデモが続きます。
各社ともアイデア満載のデモバトル
続いては、各社が AIR を使った事例を紹介する、デモバトルのスタートです。
まず最初に登壇したのは、ソニー株式会社
同社の「FLO:Q」というプロジェクトでは、外部クリエイターなども参加しながらブログ・ウィジェット、Flash によるブログパーツなどの提供を行っています。ここに、AIR を活用しようというわけです。既存の Web 技術でデスクトップアプリが作成できる。Flash とのシームレスな連携で、いろいろと面白いことができる。周辺機器と連携させると、さらに新たな可能性が広がる。——の3点を挙げました。また、優れた運動の成果が得られた場合は、データを ColdFusion 8 に送信すると、サーバ側で PDF フォームを使った名前入りの表彰状が生成され、PDF ファイルとして出力するといったデモを行いました。少し視点を変えることで、帳票ソリューションなどでも AIR が活用できることを示しています。ひがやすを氏は、デモの前に「AIR をデスクトップアプリと見るか、Web アプリとしてみるかがポイント」と話します。
「AIR に向いてるデスクトップアプリとは何か
情報共有形のアプリが AIR に向いている」「AIR は基本的には Web アプリだが、デスクトップアプリの得意なオフラインやローカルリソースへのアクセスなどに活かすことができる」と、AIR を活用できる新しい用途について紹介しました。その上で同氏は、以前に Delphi(デルファイ)で開発されたデスクトップアプリの典型ともいえる入力システムを、AIR にコンバージョンするという仕組みをデモしました。株式会社サイトフォーディーは、同社のラボで公開しているさまざまなウィジェットと、その発展形を使って AIR の可能性を示しました。中でも目をひいたのが、「SA-602」と名付けられた、ビジネス向けダッシュボードのコンセプトモデルです。com のエンジンを追加し、業務ツールとしても使用できるようにしたものです。また、Web サイトの情報をトリミングして保持できるブックマークアプリケーション「SA-701」も紹介されました。AIR は、OS に捕われない開発環境であることを示してくれました。株式会社バスキュール は、AIR の魅力を「今まで培ってきた Web/Flash 制作技術を活用して、他のアプリケーション環境と一線を画したもの——トゥイーンアプリケーション、マルチメディア、マルチユーザ/リアルタイムコミュニケーション——が、できるかもしれない。そして AIR だと作るのが簡単、しかも速い」と話します。しかし「無駄」と言いながら、Flash がもつ描画機能にフルアクセスできる AIR の特長を端的に示したデモでもありました。株式会社ティーケーラボ は、AIR の魅力を「既存の Web デザインスキルを利用してアプリが制作可能であること」と話します。URL の通知と相手先への表示、サーバ上にある Movie のプッシュと再生(クライアントからサーバに取りに行く)などといった機能が実装されています。
各社のデモバトル、そして登壇された各ベンダーによるトークセッションを経て、会場内に設けられたデモブースが「解禁」
多くの人が各社の担当者を質問攻めにしていました。また、フードとドリンクを片手に来場者同士が交流を深める場面も数多く見受けられ、これからアプリケーション/コンテンツ開発の場で拡大していく AIR の「前夜祭」さながらの様相でした。それはまるで Flash が Web の中で無限に広がっていく、その前夜と似た雰囲気をもっていたのも、今回のイベントの特筆すべきポイントだと言えます。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
Web サイト構築設計における
今月号の記事
この年に開催されたイベントにおいて、日本で初めて Fireworks を紹介したのが筆者でした。
そして2005年のアドビとマクロメディアの合併
Fireworks は、競合関係にあったアドビ製品のなかで生き残ることができるのだろうか
森川氏が推奨するウェブ制作のワークフロー
(シリコンカフェDVDチュートリアルより)
そして現在は制作会社のプロデューサーとして Web 制作に携わっています。この9年を振り返ると、Web はサイト利用者の増加に伴い、サイト所有者とネット社会が要求する内容は大きく変化しました。当然、要求を満たすには Web 制作者もサイト構築までのプロセスを見直さなくてはなりません。それぞれの工程では専門的な知識が必要になり、工程ごとに達成すべき目標が掲げられます。そして、この数年間で多くの制作者が「設計」という工程に最も時間をかけるようになりました。私はよく Web サイト構築は、商業ビルやマンションなどの建築構造物と同じ例えをします。どんな建築物でも設計図があり、設計図のない建築物は存在しません。それは一般の家屋も同じで、いきなり大工さんがトンカチとノコギリを手に家を建てることはあり得ないのです。建築物の工事は企画から始まり、面積、高さ、階数、フロアごと、あるいは部屋ごとに詳細な設計図がなければできません。さらに土台の基礎設計や構造設計も必要になります。それは Web サイトでも同じで、企画から始まり、インフラやサーバという基礎設計、情報分類のためのディレクトリの構造設計、さらにページ内の画面設計が必要になります。同時に、内装や外観など視覚的に利用者に訴求するもの、あるいは体験させる事も重要な設計要素です。アートディレクションやインタフェイス設計が同時に走ることによって、構造と視覚および体験を同時に設計しなくてはならないのです。これらの設計工程がしっかりと構築されていれば、製造現場での Web 制作者は、鉄骨を組むように HTML を記述し、内装を担当するように CSS で装飾面を実装することが可能になるのです。つまり、それだけ「設計」という工程は、Web サイト構築において需要なプロセスであるいうことです。Fireworks CS3 は、ページ内の画面設計および、アートディレクション、インタフェイス設計という重要な部分を担います。この数年、Web ブラウザの進化と社会的要求から、Web ページの記述に「Web スタンダード」に準拠することが一般的な仕様になってきています。(X)HTML と CSS をコントロールして実装を行うには、画面設計の段階で、ページ内での情報配置が明確である必要があります。Fireworks CS3 は、この段階からインタフェイス設計と密接に結びついて作業を進めることができ、インフォメーションアーキテクトとデザイナーが、設計段階で効率よくコミュニケーションできるツールとしても有効なツールです。さらに複数の画面設計を行う際には、Fireworks CS3 の新機能である「ページ」を使いこなすことによって、効率的に作業を進めることが可能です。Web サイトの実装や設計には、その前段階として Web におけるブランディングやプランニングが重要になります。そのためには企業の場合であれば、まず企業理念を理解し、そこからコンテクスト(文脈)を広げ、ビジュアルデザインやコンテンツに落とし込みます。Web も、CI や広告をルック&フィールにして Web ブランディングとして展開していかなくてはなりません。つまり Web だけが突然変異的にデザインされることはないということです。ビジュアルコミュニケーションのコアな部分を Web に展開するためには、DTP の現場で InDesign が行っているように、シームレスなデータのやりとりが重要になります。つまり CI や広告表現を直接 Web に落とし込めるということです。
すべては Web サイト利用者のために
現在、私は「日本Web協会」という組織の理事長を務めています。
日本 Web 協会は「日本語の Web の質を向上させよう」をスローガンに、多くの会員が集まり活動を行っています(ちなみにアドビシステムズ社も法人会員として参加されています)
その活動を通して、Web が担っている社会的な責任が話題になっています。もはや Web は一部の IT リテラシーの高い人々のものではなく、水や空気のような必需品になろうとしています。そうであるならば、Web は水道の蛇口のように、誰もが使える道具でなくてはなりません。私たちは誰もが、どうやって蛇口を動かせば水が出るのかを知っています。しかし、まだまだ Web は使いやすい道具ではなく、どうやって使えば情報を引き出せるのか理解できないことも多くあります。さらに、ネット人口の増加や家電製品の進化などによって Web の利用者が増え続ける今、私たち制作者は、誰もが使える Web を作っていかなくてはなりません。生活の道具として利用されるためには、制作会社はもちろんですが、情報を発信する個人や集団も「情報を伝える」ことを真剣に考えていかなくてはならないですし、サイト利用者に使ってもらうための制作を行っていなかくてはならりません。それを満たす事が、結果的に所有者や制作者を幸福にするのではないかと考えます。そのためには、制作の現場はツールを使いこなす事が必須になります。今回の Creative Suite 3 で、Web に関するすべてのソフトウェアが足並みを揃えてバージョンアップしたのは、本当に嬉しく思いますし、今後もさらにツールが進化し続けていくことを希望します。最後に、私も個人としてこれらのツールの使い方に貢献するため、シリコンカフェとしての活動を再起動しました。ぜひサイトを見に来てください。com)取締役プロデューサーや多摩美術大学情報デザイン学科非常勤講師も兼務している。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
Ajax 化された Web ページの醍醐味は、ページ上で扱うデータの内容によって、動的にページが変化していくことです。Spry Widget は、その動きを司る重要な技術ですが、今回はその中でも理解しやすい「入力フォームの内容チェック」について、実践的に解説してきます。Dreamweaver CS3 には、テキストフィールドやチェックボックスといったフォームオブジェクトの内容を検査するWidget、メニューバーやアコーデオンといったインタフェイス作成用の Widget、任意のエレメントに対してフェードインや拡大縮小等のアニメーション効果を設定する Widget が搭載されています。Spry Widget は、アドビの作成ガイドラインに則っており、マウスが使用できない場合を想定したキーボード操作によるアクセシビリティの確保と、JavaScript が無効になっている環境でもレイアウトを保持したまま最低限の表示が行えるように配慮されています。そのため、ユーザはこれらのことを特別に意識することなく、簡単に制作中のページ内に Widget を挿入し、さまざまな機能を追加することができます。また、使用される外部 JS ファイルや CSS ファイルは一目で分かるものとなっていて、いつでもカスタマイズ可能です。まずはそれぞれの機能を実際に使ってみることにします。
フォームに値が入力されているか、入力された値が正しいか
従来はこれらのことを判定するために、JavaScript を自身で作成する必要がありました。Spry の検査フォーム Widget を使用すれば、一切の難解なコーディングを行うことなく機能を追加することが可能です。フォームオブジェクトの挿入方法は、通常の HTML オブジェクトと同様です。ラベルや ID 名を半角英数字の任意のものを入力して設定を確定してください。この状態でコードビューを見ると以下のようなソースが記述されているかと思います。まず最初のspanタグで 囲まれたエレメントが Spry テキストフィールドを宣言し、その中でテキストフィールド本体の inputタグと、表示されるエラーメッセージ用のテキストを内容がSpanタグで記述されています。ここであえて Spry のことを把握していただくためにコードを紹介しましたが、Dreamweaver CS3 上での動作定義はプロパティウィンドウだけで行うことができます。ドキュメントに挿入されたテキストフィールドをマウスで選択した状態で、その直前にあるタグ、span#sprytextfield1をタグセレクタで選択します。ここでさまざまな設定を行えます。ここでは試しに、電話番号入力用のテキストフィールドを作成してみました。タイプを「電話番号」にし、形式をカスタムパターンで好きなように設定できるようにしています。ここで「パターン」には、以下のような法則で独自の入力制限を設定することが可能です。
大文字のアルファベット
小文字のアルファベット
大文字と小文字を区別しないアルファベット
大文字のアルファベットと数字
小文字のアルファベットと数字
大文字と小文字を区別しないアルファベットと数字
日本語等も含んだ任意の文字
「ヒント」には、入力前のサンプルとして表示する内容を入力します。「必須」はテキストフィールドへの入力を必ず要求する場合、「パターンを適用」は、実際の入力時にそのパターンに適合した文字列が入力された場合にのみ、テキストフィールドへの文字入力が行われるようになります。実際に設定したテキストフィールドが以下です。値を指定する必要があります。無効な形式です。いずれもコーディングを行うことなく、プロパティウィンドウ上から設定が行えるようになっています。選択可能 選択可能 選択不可 この項目は選択できません。項目を選択してください。ここでは3つのメニュー項目を準備し、その中の「値が3の項目が」選択された場合にメッセージが表示されるように設定しています。実際のHTMLコードでは以下のような記述が行われています。以下のチェックボックスを適当に選択してみて下さい。3つまでしか選べません。ここでは、同じsprycheckbox1グループの中の4つのチェックボックスで、最低でも1箇所、最大で3箇所までチェックするように設定しています。これによって以下のコードが記述されます。最後に、テキストエリアは以下のようになります。最小文字数に達していません。現在 文字 最大文字数を超えています。ここでは文字数のカウントの表示を行うように設定しています。また、プロパティウィンドウにある「余分な文字をブロック」は、設定された入力最大文字数超えた場合、文字列の入力を禁止するかどうか」を設定しています。ここでは40文字を超えたると入力が行えなくなります。
さて、ここで Spry に予め設定されているエラーメッセージ等のスタイルを自信で好きな形に変更してみましょう
Spry エレメントを選択した状態でプロパティウィンドウ上にある「プレビュー」をプルダウンで変更すると、Dreamweaver のドキュメントウィンドウ上で各エラーメッセージの表示状態を確認できます。多数の CSS ファイルの中から該当するCSSファイルを開き、変更したいCSSの設定内容を探し出して値の変更を行う。といった煩わしい作業は一切必要ありません。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
携帯ライフがもっと楽しく便利に
モバイル向けFlashラインタイムエンジンの最新バージョンFlash Lite 3、その可能性を探りに、本社のXDモバイル&デバイスチームを訪ねてみました。
「オリジナルのインターフェイスでYouTubeの動画を快適に閲覧」「映画の予告編をチェック、お気に入りの映画は最寄りの映画館での上映時間をチェック、さらには映画館付近のおすすめレストランとそこまでの道のりをチェック」など
ダウンロードし、「1分間」を体感ください。
キャンペーン実施中(8月25日まで)
mixiらしい音楽配信サービスを実現するための鍵となったのは、Flashの表現力&普及率、そしてFMS3の高いセキュリティ性能
クリエイティブポータルサイト「CBCNET」を運営する栗田洋介さんが「これは
」と感じたWebや作品を紹介
第2回 より多機能でスムースなアドビ製品間の連携
高速化したファイルの保存/読み込み、Photoshopファイルとの互換性の向上、PDF書き出し&プレゼンテーション作成機能
お客様よりお寄せいただくご質問や弊社で確認している製品の不具合情報を掲載
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
同社がmixi Radioを提供する上で目指したのは、「できるだけすべての音楽好きに、mixiらしいインターフェイスで音楽を届ける」「コンテンツホルダー(音楽提供者)の懸念を取り払う」ということ
同社サービス企画部・太田雅登氏にmixi Radioの魅力と、アドビ製品を採用した背景を伺いました。mixiのユーザであれば、mixiのインターフェイスの中でストリーミング配信される音楽を聴くことができます。mixi Radioをリリースした背景について、株式会社ミクシィのサービス企画部・太田雅登氏は次のように話します。「mixiは音楽と親和性が高いということを、以前から感じていました。mixiの中には、音楽関連のコミュニティも多く存在しているんです。メジャーなアーティストであれば誰とでも話が通じますが、マニアックな、コアなアーティストに関しての情報は、mixiのコミュニティ等でないと情報交換できないというケースもあります。mixi Stationを起動しておくと、音楽ソフトで聴いている曲目情報がmixiにアップロードされて、他にどんなユーザがその曲を聴いているのか等がわかるというものです。「こんな曲、自分以外に聞いていないんじゃないかという曲でも、mixi Stationで情報をアップしてみたら、他に10人も聴いていた・・・・・・ということもあります。この驚きは大きいし、多くのユーザに楽しんでいただけています。そして、mixiに曲目情報をアップするだけではなく、mixi上で音楽を聴きたいという要望も多くありましたので、1年ほど準備をしてリリースしたのがmixi Radioです。mixi Radioにはマイ・ラジオ、アーティスト・ラジオ、シャッフル・ラジオという3つの機能があります。マイ・ラジオは、ユーザの好みに応じて流れる曲が変化するのが特徴で、mixi上にある曲目情報に対して「スキ/ニガテ」を登録していくと、自分好みのラジオに育てることができます。また、他のユーザのマイ・ラジオを聴くことも可能です。アーティスト・ラジオでは、自分の好きなアーティストを軸にして似たテイストの音楽が配信されます。また、シャッフル・ラジオでは、他のユーザが作成した曲目のリストをシャッフル再生することが可能です。いずれにしても、ユーザとユーザのつながりを重視しています。「ダウンロードで聴かせるなら、すでに他のサービスで満足することができます。mixiがやるからには、出会いや人とのつながりを大事にしたいですし、それが強みでもあります」と太田氏は話します。
ユーザの手を煩わせないためにFlashを採用
Flashを採用した理由について太田氏は、まずはプレイヤーという面から次のように説明します。「ユーザインターフェイスにはこだわりたいと思っていました。まず、ユーザにアプリケーションをインストールさせるといったことは無くして、ブラウザ上で簡単に聴けるようにすることで敷居を下げたい。また、ガッチリとしたインターフェイスのプレイヤーではなく、mixiらしい表情豊かなインターフェイスを実現するために、Flashを使いたかったのです。さらに太田氏は「(以前からある)mixi Stationは簡単なアプリケーションですし、音楽機能だけをとっても100万人近い方々にお使いいただいていますが、それでもダウンロードやインストールが必要で、ハードルが高いんです」とも話します。クロスプラットフォームである点も重要でした。「こういうサービスだとMac OSには対応しないというのがありがちですが、それだけはしたくなかった。私の周りでも、Macユーザの中には音楽好きが多い。本当に音楽が好きな人にサービスを届けられないのは、悲しいことです」と太田氏は話します。音楽の配信は、AAC形式で行われています。40kbpsというと中途半端に思われるかもしれませんが、32kbpsのMP3では音質的につらい物がありました。「mixi Radioのようなサービスを提供するためには、コンテンツホルダーの理解を得ることがとても重要です」と太田氏は話します。「コンテンツホルダーに対して、Flashを採用するというお話をすると、各社ともセキュリティについて心配されるのが現状です。Flashというとどうしても、YouTubeのようにダウンロードできてしまうという印象を抱いているのです。128ビットでの暗号化に対応することで、従来のRTMPよりもストリーム配信される際の安全性がさらに強化されています。「Flash Media Server 3やRTMPEについてのプレゼンテーションを行うことで、音楽が保存できてしまうのではないかというコンテンツホルダー各社の懸念を払拭し、理解を得ることができました」と太田氏は話します。Flash Media Server 3を採用することで、mixiのユーザは新たなアプリケーションをインストール・起動させること無く、Webブラウザ上にある「mixiの世界観」の中で、音楽や音楽を起点とするコミュニケーションを楽しめるようになりました。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
2008年もすでに半分以上が過ぎてしまいました。あっという間の半年でしたが、その間にもクリエイティブ業界では新しい技術やアイデアが次々と登場しました。クリエイターとしての技能やセンスを磨くためにも、クリエイティブ業界の動向はできるだけチェックしておきたいところですが、日々の業務に追われていてはなかなか大変です。そこで、日本のクリエイティブポータルサイトの草分けである「CBCNET」を運営する栗田洋介さんに、2008上半期におけるクリエイティブ・ホットトピックを5つ選んでいただきました。クリエイティブポータルサイト「CBCNET」やデザイン&アートカンファレンス「APMT」(8月に4回目を開催予定、詳しくは公式サイトへ)などを運営している栗田です。Web関連の技術は年々発達し、今や動画や3Dなどを扱うことも特別なことではなくなってきました。そんな中、今年の上半期に見つけた「これはWebっぽい。」「これはアイデアが面白い。」というサイトや作品を紹介します。
が手掛けるスクリーンメディア向けクリエイティブレーベル「SCR
SC」の第二弾となる作品です。
ハイスピードカメラを利用した単純な映像時計ですが、ずっと眺めてしまう秀作
ヴィジュアルを確認しながら、より直感的にコーディングできるため、これからプログラミングしながらVJをするというスタイルが増えてくるかもしれませんね
100ドル札を1万パーツに分割して、匿名の1万人の個人によってそれを模写してもらい、再構成するというもの
参加者には労働報酬として1セントが支払われ、合計1万セント(100ドル)が使われています。Webの特性を生かした素晴らしい作品です。
マッキャン・エリクソンの自社サイト
その圧倒的なクオリティと作り込みに、みんなが脱帽した様子でした。
1人のギターバンド
ループサンプリングの手法で曲を作成し、YouTubeなどでライブ映像を配信
単純ですが、気が利いていて、Webの面白さに改めて気づかされました。デザインポータルサイト「CBCNET」やデザインカンファレンス「APMT」の企画・運営なども行なうかたわら、デザインプロジェクトのディレクションやアーティストのコーディネーションなども広く手がけている。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
第2回 より多機能でスムースなアドビ製品間の連携
今月号の記事
第1回目は、刷新され使いやすく作業に集中しやすくなったインターフェイス、レイアウト作業を手助けするSmartGuideやToolTipsなどを紹介しました。今回は、高速化したファイルの保存/読み込み、Photoshopファイルとの互換性の向上、クライアントとの円滑なコミュニケーションを実現するPDF書き出し&プレゼンテーション作成機能などを紹介します。
ファイルの保存、読み込みの高速化により快適性が向上
特に、Fireworks CS3では待ち時間が長くなりがちだった、多量のページやレイヤー、シンボルを含むドキュメントで効果が大きく、作業の効率が悪くなるようなファイルの読み込みでもスムーズに行えるようになりました。Fireworks CS3から1つのファイルに複数のページを持つことが可能になりましたが、ページを複数作った場合、Fireworksのファイルサイズが増える傾向にありました。
これまでも機能の強化に伴い、Fireworksのファイルサイズは増大する傾向にありましたが、読み込みが高速化されたことは嬉しい改善といえるでしょう
ファイルの保存に関しても改良が加えられています。Fireworks CS4では、非同期保存が可能になっており、ファイルを保存している最中にも他の作業を行えるようになりました。これまでは、ファイルを保存している最中には他の操作をすることができず、作業が中断されてしまいましたが、非同期保存のサポートにより、連続した作業が可能になっています。保存を行っている間は、ドキュメントの左下にバーが表示され、保存中であることを教えてくれます。
Photoshopファイル読み込みダイアログにより、レイヤー読み込みの細かい指定が可能に
このダイアログでは、読み込むPhotoshopファイルのプレビューが表示される他、レイヤーの読み込み方法を指定できます。Photoshopでのレイヤー状態とできる限り同じようにレイヤーを展開するか、レイヤーを統合して1枚のビットマップとして読み込むか、などが選択できます。Photoshopでボタン画像を作成し、レイヤーで普通の状態とロールオーバーした状態を分けておき、Fireworks CS4で読み込ませれば、ステートに振り分けてくれますので、簡単にロールオーバーボタンを作成することができます。これまでのFireworksでは、テキストを含んだPhotoshopファイルなどを開くと、テキストに設定されたカーニングなどがクリアされてしまったり、別の値になってしまったりして、きちんとPhotoshopで組んだレイアウトどおりに表現できない場合がありました。Fireworks CS4では、テキストエンジンが統一されたため、これまで崩れてしまっていたテキストもきちんと表現、編集ができるようになっています。PhotoshopやIllustratorで作成したファイルをFireworksに読み込ませて編集する場合、互換性が無い部分では、表現がしきれず、悲しい思いをする場面がありましたが、今後はそういった思いをすることも無くなりそうです。またこれまでのFireworksでは不可能であった、閉じたパスの中にテキストを配置することもできるようになりました。
複雑な形を描き、中にテキストを入れる場合、これまでは非常に大変でしたが、今回からはテキストの機能で簡単に表現できるようになったため、表現の幅が広がるのではないでしょうか
Fireworks CS4でのテキストに関する注意点として、以前とはテキストエンジンが変わってしまったため、これまでのFireworksとは動きが多少異なる点があります。例えば、書いたテキストのテキストボックスを縮小し、1文字分の横幅よりも小さくしたときに、バウンディングボックスと呼ばれる小さな赤いマークが付き、テキストは見えなくなります。左寄せ、センタリング、右寄せも仕様が変わり、以前はテキストボックスにおいての場所を指定しましたが、Fireworks CS4では、Photoshopでのテキスト描画と同様の指定となり、テキストの各行の関係に対しての場所指定となっています。これまでのFireworksとは動きが異なるので、注意が必要だと思います。
選びやすくなったフォント
フォント選択部分に改良が加えられ、フォントがグルーピングされるようになりました。同じフォントで文字のウェイトが異なる場合は、まずフォントを選択し、フォント選択プルダウンの右側のプルダウンでウェイトを選択するようになりました。一見作業が増えたように感じますが、フォントを大量に入れている環境では、目的のフォントを探すだけでも大変な作業かと思います。グルーピングされることで、フォントの表示数が少なくなり、目的のフォントにたどり着きやすくなります。また、ウェイトの変更が簡単になり、以前のように再びフォントリストに戻って探す、という作業は必要ありません。
PDFファイルの出力が可能に
Fireworksでwebサイトのプロトタイプを作成している場合、クライアントにそのプロトタイプを見せる場面が多々あるかと思います。その場合、まずFireworksで作成中の作品をPDFなどの形式に変換した上で、クライアントに渡し見てもらう、という手順を踏むのが一般的です。オプションボタンをクリックすると、書き出すPDFの設定を変えることができ、画像の画質やテキスト選択の可否などのほか、セキュリティも設定可能であり、必要に応じて、パスワードによる機能制限も行えます。PDFを使用して、クライアントに作品を見て貰い、PDF上にコメントを入れて貰うことで、簡単にクライアントの意向を収集できるようになっています。
SWF書き出しによるデモ、プレゼンテーション作成機能
Fireworks CS4では、これまでにもあったSWF形式書き出しが機能強化され、プレゼンテーションを行える機能が付加されました。書き出されるファイルは、HTMLファイルとページ送りをコントロールするためのボタンが埋め込まれたSWFファイル、画像ファイルからなっており、Fireworks CS4で設定したページを順番に表示させていくことが可能になっています。書き出したSWFファイルを表示するためのHTMLファイルが出力されますから、そのまま書き出されたファイルをサーバにアップすれば、ユーザに見てもらうことが可能ですし、プロジェクタなどに映し出して、プレゼンテーションとして使うこともできます。webサイトの試作品をプレゼンする際などに、作成中の作品を書き出せばそのまま使える機能であり、有用であると思います。次回は今回お伝えできなかった、CSSと画像の書き出し、AIRアプリケーションの作成、AIRアプリケーション用コマンドの紹介などをしたいと思います。ご期待ください。
研究と実業を兼ねながら生活中
紆余曲折を経て、2008年2月に合同会社レゾリューションズ を設立
Fireworks は古くから使用している、サイト作りには無くてはならないマストアイテム
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
CMS導入は誰のため
音楽業界のマーケティング論からWeb論まで
200を超えるセッションと100を超えるハンズオンを通して、最先端の知識とスキルを共有できます。(次のバージョンではどのようになる。
)"という取れたて情報も満載
本記事では、EDGE 編集部がオススメするセッションと見所を紹介します。日本からのツアー「MAX アドバンテージツアー2009」も用意しています。航空券、宿泊、MAX の参加費が特別価格となるほか、本社オフィス訪問などの特典付きです。
今回の"みどころ"セッション
Envision トラックは、デジタル エクスペリエンスのデザインおよび開発プロジェクトを率いる企業や組織の意思決定者向けの内容になっており、様々な成功例や、実績をもたらした戦略を企業事例を通して学ぶことができます。Design トラックでは、Web、インタラクティブメディア、ビデオ、モバイル、および印刷媒体を含む複数のメディアに対応するデザインの技術や仕組みを学ぶことができます。Develop トラックは、デベロッパー向けの内容で、次世代の Web、モバイル、およびエンタープライズ アプリケーションについて、アーキテクチャや、構築、展開に関する成功例を学ぶことができます。アートディレクター、デザイナー、イラストレーターそしてフォトグラファーの方々に、照明、カメラ、アクション、プラグインそしてスクリプトを利用した最先端のテクニックをご紹介いたします。ランチタイムも是非活用ください。カジュアルにランチを食べながら世界中のデザイナー、デベロッパー、制作会社とつながるチャンスです。EDGE編集部では、数多くのセッションの中からオススメするものを5つに分けてまとめてみました。ご自身の興味のあるものにあわせて、当日参加されるセッションのご参考にして下さい。これは絶対欠かせない。
アドビの次の一手を知るには
絶対気になる。
アドビの最新動向
やっぱり気になる。
より提案力のあるアプリケーションを、Webサイト制作のために
これは絶対欠かせない。
アドビの次の一手を知るには
絶対気になる。
アドビの最新動向
以下のセッションに参加すると、製品、ランタイムの最新動向、ロードマップ、プレビューが学べます。スマートフォン向けの Adobe AIR 機能について、ライブのデモを交えてワークフローを紹介します。ロケーション、アクセロメーター、PIM データ向け新クロスプラットフォーム API を利用したモバイル向け Adobe AIR アプリケーションの構築方法が学べます。モバイル向けFlexアプリケーション開発チームが、コンテンツ最適化、コンポーネント、ツールについて紹介します。また、Flexアプリケーションがスマートフォン上で動くサンプルと、Flexアプリケーションをモバイル向けに動かす方法をご確認いただけます。やっぱり気になる。