審査員から一言●「これは魚河岸ガールと同数一位でした。
イラスト作品が多い中、たとえ絵が描けなくてもFlashというツールから作品が発想されるという、エンジニアリングのお手本ですね」
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
新たなる発見、広がるクリエイティブの源泉
今月号の記事
Adobe MAX Japan 2007に参加した方の多くが、アドビテクノロジーの最先端部分に触れ、新たな発見を見いだし、2008年以降の各々のアクションに結びつけていきたい、という思いのがあったのでしょう
Adobe AIR関連のセッションには大勢の参加者が集まり、静寂の中にもホットな空気が漂っていました。
ここでお伝えする各セッションの模様は、Edge Newsletterを通じてアドビテクノロジーの最先端部分に触れている皆さんには、どれも興味深い内容ばかりでしょう
アドビの最先端テクノロジーの中心となるのは、言うまでもなくAdobe AIRです。
” “AIRでアプリケーションを開発する、その手法にはどういうものがあるのか
”という誰もがもつ疑問について、デモを中心に解説するセッションでした。Edgeでもご紹介しているように、AIRはWeb標準技術を全面採用し、実行環境はもちろん開発環境もWindows、Mac、そしてLinuxのクロスプラットフォームが用意されているという、Web技術と高速かつ高機能化できるデスクトップアプリケーションの「いいとこどり」なプラットフォームです。このセッションのデモでは、Flex、Dreamweaver、Flashという3つの異なる開発環境で、それぞれ独自の手法を使い、結果として同じように動作するAIRアプリケーションが完成するというデモが行われました。参加した方々がAIRについて同じ前提に立ったところで、各々のアプローチを追求していくためのセッションに散らばっていきました。「僕らはこれを待っていた。Coldfusion 8の新機能を活用することにより、Flash単体で開発されたAIRアプリケーションよりも、さらに多目的なファンクションを実装できます。NETとの連携など、サーバソフトウェアとしてさらなる強化が図られ、より多彩なWebサービスが提供可能になるのです。
これからのWebクリエータには必須
この手のセッションはコーディングの話題が中心になりがちですが、Dreamweaver CS3を使って一切のコードを書かずにAjaxの機能が扱えるSpryだけあって、「Ajaxとはこんなにも簡単なものだったのか」という驚きの印象をもった方も多かったほど、その手軽さを十分実感できたセッションでした。0の世界に入ってくる人は当然、大勢います。0を始めるにあたって、スクリプトがアニメーションにどのように作用するのか、実際の目で見て分かる内容となっていました。
初めての人でもスクリプトによるアニメーションに開眼する良い動機付けになったのではないでしょうか
そして基調講演でも入念に語られたWebにおける映像表現
これから映像制作を手がけたいと考えているWebクリエータに必見だったのが「Webクリエータのための初めての映像制作ガイド」です。このセッションでは、Web向けの映像制作フローを「企画」「撮影」「編集」「Webへの最適化」を中心とした11のステップに分けて解説されました。
その流れはCM制作の過程に近いものであり、セッション参加者は企業のWebサイトやプロモーションサイトなどの映像が、CMと同じくらいのポテンシャルを持ち始めているのをこのセッションで発見できたことでしょう
日々のWeb制作に新しい変化を
Word書類で作られた原稿を元にWebサイトのコンテンツ構造に落とし込み、CSSでサイトデザインを組み立てていくという一連のフローの中、このセッションで紹介されたDreamweaver CS3のテクニックやノウハウ、Fireworks CS3との連携、複数スタッフとの共同作業におけるTIPSなどは、どれも有益なものでした。現在のWebコンテンツ制作において重要視されているのがアクセシビリティです。「PDF、SWF、HTML でアクセシビリティを実現するには」セッションでは、AcrobatやInDesignを使ってアクセシブルなPDFを生成する方法、Flash MX以降より追加された「アクセシビリティ」パネルを使用した、SWF内のボタンやコンポーネントに対する読み上げの設定やタブキーによるフォーカスの遷移指定、そしてDreamweaverの環境設定方法やページチェック機能と問題発生時の修正方法が紹介されました。日米におけるアクセシビリティの法整備や規格改訂の動きや、PC用ブラウザに留まらない再生環境の充実などが進む昨今、アクセシビリティに関する知識を蓄えるのに有効なセッションとなりました。0で革新的なコンテンツを制作している方々がたくさんいます。」セッションでは、ActionScript 1/2 を利用して如何に効率よく作業を進めるのかを命題に多くの大手クライアントワークをこなしているトザキ氏を講師として呼び、フレームワークやMVC(Model-View-Controller)という概念をFlashの世界に持ち込んで、いかに作業分担やコードの視認性向上を図るか、実例を交えてその手法を紹介されました。
実際に使用されているコードの紹介や実装の実例など、セッションの内容は盛り沢山
限られた時間でありながらアプリケーションのモデル構造を中心とした非常に内容の濃いものでした。本セッションの補足については氏のブログでも確認できます。そしてWebの世界の常として、これからも日増しに新たな発見の種がどんどん生まれていきます。
◎ここで紹介したセッションの一覧
僕らはこれを待っていた。
株式会社エイチツーオー・スペース 代表取締役 たにぐちまこと 氏
0はじめの一歩
Webクリエータのための初めての 映像制作ガイド
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
直結するセッションの数々
今月号の記事
新しい技術、手法に触れることで生まれるインスピレーション、そのインスピレーションをカタチにするための技術や手法
全セッションの中でも圧倒的な人気を誇った中村勇吾氏によるインタラクションデザインの講演
そしてユビキタスの原石ともなり得るフィジカルコンピューティングの世界
その様子をぜひご覧ください。
日米インタラクションデザインの競演
James氏が1997年に初めて制作したFlashアニメーションに始まり、プログラミングを手がけるようになったことで誕生した、ドローイングがランダムに組み合わされるプログラム化されたアート
そしてペンとトラックボールを使って3D空間に線画が描けるオリジナルのツールまでが紹介
0の登場を受け、「ツールがあればリアルタイムで楽器のようにドローイングを見せることができる」という最新のアイデアまでが披露されました。インタラクションデザインで著名な中村勇吾氏の「インタラクションデザインの実際:アイデアの開発」セッションは、Adobe MAX Japan 2007の中での特に人気の高かったものです。セッションでは中村氏が1999年頃から現在に至るまでに手がけた、多くのインタラクティブな作品をスクリーン上で紹介していきました。そして「反応する快感とは、単純なエフェクトではなくて、前後での状況の落差をいかに作るか」と話します。さらにユニクロなどの事例を見せながら「Webムービーブームへのアンチテーゼとして、なんとなく見ていられるものを作りたかった」「映画の縮小版みたいなものをネットで見せるという発想ではなく、単なるデザインエレメントとして使う」と、ここでもアイデアの源泉となるコメントがいくつも語られました。さらに三角関数を使ったActionScriptの座標変換プログラムについても紹介され、まずは丸暗記から初めて「なぜこれなのか」まで探ってもらえると、なお良いと加えていました。
アドビが示す新しい表現プラットフォームの基盤
こうした新しい表現、新しいプラットフォーム環境の土台を支える立場として、アドビからも多くの技術解説が行われました。そのFlexを担当するシニアプロダクトマネージャーのスティーブン ハインツは「アドビのオープンソース戦略」セッションにおいて、オープンソースへのコミットについて紹介しました。アドビは様々なオープンソースプロジェクトに対して実際のソースコードの提供をはじめ、資金や人材といったリソースの提供も行っています。0に親しんでおくことが、将来のJavaScriptの習熟のショートカットとなるわけです。米国のケーブルテレビ局の実に76%がFlash Videoによる映像配信をWebを通じて行っているというレポート、イギリスのBBCがアドビと共同してiPlayerという自社向けのメディアプレーヤーを提供開始した事実からも、Flash Videoによる映像配信の目ざましい普及が伺えます。264をサポート、RSSによる情報フィードで独自チャンネルを提供できる仕組みなどが語られました。国内のさまざまなソリューションパートナーで採用されることも紹介されました。IIJやJストリームもホスティングパートナーとしてFMS 3をサポートします。
PCの枠組みを超えたデバイスへのアプローチ
「ビデオとWebフルブラウザが可能にする新たなモバイルコンテンツ開発と海外市場でのビジネスチャンス」と題されたセッションで、フォーラム・ノキア マーケティングダイレクターのエリック・ジョン氏は「新興国におけるはじめてのWeb体験は、PCではなくモバイル(携帯電話)になると考えられる」と語り、Symbian OSベースのプラットフォーム「S60」にもFlash Lite3の機能を統合させたことで、ビデオコンテンツの閲覧やリッチメディアを取り入れたゲーム、さらに「ノキア端末で見るコンテンツは、モバイル用Webではなく、Webそのものだ」と話しました。
「日本には、アメリカから見たら夢のようなアーリーアダプタが存在する」とも話すエリック・ジョン氏
日本の市場、そして日本の開発者に対する期待も大きいといえるでしょう
PCやモバイルデバイスをも超えた自由なコンピューティングの世界に参加者を誘う「フィジカルコンピューティングへ の招待」セッションは、GainarとFunnelという技術を通じて、フィジカルコンピューティングの実践を紹介する内容でした。Flex Builder 3を使い、わずか十数行のコーディングで、Flashの画面上にあるボタンを押すとLEDが点灯したり、モジュールを傾けると画面上のブロックがまったく同じく傾くというプログラムが、その場でどんどんコーディングされていきます。さらに、フィジカルコンピューティングで「面白い事」を実践する「くるくる研究室」のメンバーによる実践的なデモンストレーションでは、Flashで場所を入力すると、緯度経度を Geocoding APIから把握してコンパスが方向を指す「あっち↑」や、ディスプレイをくるっと傾けると画面の中の小人が傾いた方向に転げ落ちる「神様BOX」、そしてダンスダンスレボリューションのマット上を走ることでかき氷ができあがる「かき氷ジェネレーター」など、インスピレーションに溢れたアイデアが披露されました。
◎ここで紹介したセッションの一覧
インタラクションデザインの 実際:アイデアの開発
アドビのオープンソース戦略
Tamarinプロジェクトとブラウザ スクリプティングの革命
ビデオとWebフルブラウザが可能にする。
新たなモバイルコンテンツ開発 と海外市場でのビジネスチャンス
フィジカルコンピューティングへ の招待
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
アドビ製品を使いこなしたい、いろいろな制作ノウハウを知りたいという人は、ぜひアドビWebサイト内にある「Developer Center」コーナーにアクセスしてください。みなさんからの開発Tipsを募集しています。詳しくはページの最後をご覧ください。カテゴリーは、ベストビジネスアプリケーションFlex版、ベストビジネスアプリケーションHTML版、ベストコミュニティアプリケーションFlex版、ベストコミュニティアプリケーションHTML版、ワイルドカード(他の4カテゴリーに含まれないアプリケーション)です。同ダービーには、業界経験豊富で広い視点を持つ4人のデベロッパーに審査員として協力していただきました。4人とも、応募作品の多様さ、量、クオリティともに素晴らしかったと語っています。
それでは、受賞者を発表しましょう
ブロードバンドの普及により、Webにおけるビデオの使用は驚異的に伸びました。この傾向を推進するFlashビデオは、新しい種類の統合インタラクティブビデオコンテンツとアプリケーションを配信し、Webでビデオの新しいビジネスモデルを実現するために使用されています。現在のFlash PlayerとFlashビデオでも「没頭できる」ビデオ体験が可能ですが、ビデオを投稿している多くの人々が視聴者に提供したいと願う「完全没入型の体験」を提供できるまでには至っていません。
「フルスクリーンモードの仕組み」
orgで運営されています。
「コミュニティへの貢献とコミュニティからの還元」
「さらに詳しい情報」
あなたのビジネスにも大きく貢献しますので、この機会にぜひご投稿ください。掲載させていただく際に、弊社からご連絡させていただきます。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
大重美幸の目指せ
Flashを本格的にはじめる方に最適
RIA 開発のための必須知識習得の決定版
0 を使ってみよう
世界各地の49機種用の新しいデバイスプロファイルと、56の既存のプロファイルに対するアップデートが含まれたプロファイルをリリースしました。重要:現在のデバイスプロファイルに変更を加えた場合、その内容は、新しいプロファイルへ更新する際に失われる可能性があります。現在のデバイスプロファイルに加えた変更を保持するには、XMLファイルをDevices Folder内で別名保存してください。
CS3デバイスプロファイルアップデート4の詳細はこちらから
是非コンテンツ制作にご活用ください。コミュニケーションの優れたウェブサイトを表彰する、アックゼロヨン・アワード2007を開催します。アワードのご案内コンテンツも12月1日公開となっております。
0 プログラマーへの3ステップ
0 の基礎・実務に必要とされるス キル・マルチメディアのハンドリングと3つのクラスに分けてしっかり学習 していきます。※1講座からお好きな講座のお申し込みとなります。
●大重美幸氏の目指せ
詳細は こちら
Flash の基本的な操作を学習することはもとより、概念の部分を理解することを目的としています。簡単なサンプルの制作を通して、実践的な内容にも触れていきます。
詳細は こちら
Flashを本格的にはじめる方に最適
3日間のコースでFlashの基礎となる制作方法、環境設定、 アニーション、ユーザーインターフェース、画像の挿入、テキスト、ナビゲーション、 サウンド、ビデオをふくむ扱い方を習得できます。このコースでは、操作方法の 習得だけでなく、Flash制作における概念知識もしっかりと習得することができ、 実務の活用にも結びつけることができます。
お申し込み、詳細は こちら
RIA 開発のための必須知識習得の決定版
本トレーニングパックは、Flex 2 による RIA 開発に必要な基礎技術をハンズオン(実機演習)形式で習得するトレーニングコースをパックにしたものです。これから Flex 2 による RIA 開発を行う方はもちろんのこと、技術評価にもお役立ていただけます。
詳細は こちら
3日間のコースカリキュラムで、Dreamweaver の基本的な Web サイト構築における手順、サイトのナビゲート、CSS(カスケーディングスタイルシート)を使った Web ページの レイアウトのデザイン、大規模なサイトの構築や維持管理の手法を習得することができます。
お申し込み、詳細は こちら
Flash アニメーションから一歩進んで、ビデオで表現してみたい方に最適なファーストステップです。
お申し込み、詳細は こちら
0 を使ってみよう
0 の新たな考え方やこれまでと異なる点を分かりやすく学習します。
※受講者全員に野中氏も執筆されている、「Flash プロフェッショナル・スタイル CS3対応 (共著)」をプレゼント
詳細は こちら
日本語版いよいよ開講
本トレーニングは、Adobe Flex 2 における、デザインなどの視覚的要素やインタラクションを実装する手法をハンズオン(実習)形式で習得できる3日間のカリキュラムです。Flex の視覚的要素を大きくカスタマイズして、よりリッチなアプリケーションを構築したい Flex 開発者には最適なトレーニングです。
詳細は こちら
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。Flash を活用したソーシャルゲームが熱い。ここ数年の間に海外では「ソーシャルゲーム」と呼ばれるオンラインゲーム市場が急成長を遂げています。一方、日本ではというと、ようやく「ソーシャルゲーム」という言葉が使われ始めたという状況です。しかし、日本最大手 SNS の mixi が「mixi アプリ」サービスを開始したことで、ソーシャルゲームへの注目が高まり、これから急成長していくと思われます。本記事では、日本の成功事例として、短期間で300万人以上のユーザーを獲得した Rekoo「サンシャイン牧場」を紹介します。0」記事の掲載予告をしておりましたが、諸事情 により次号以降での掲載となりました。ご了承ください。
— マイク音声によってアプリケーションを起動する音声認識型アプリケーション起動ソフト
なお、アドビストアなら申請なしで、その場でキャッシュバック中
現在開発中の Flash Catalyst の最新ビルドを使い、アドビの開発チームにフィードバックを送るプレリリースプログラム(日本語)に参加しませんか
お申し込みはこちらからどうぞ
(メールに氏名、氏名(ローマ字)、会社名をご記載ください。
最新のキャンペーン情報やアドビストア限定のお得な情報をどこよりも早くご紹介
特集で取り上げている「サンシャイン牧場」のモバイル版の開発に際し、日本からタカギズムの高木敏光さんと hi-posi Inc
の岡田昇三さんが参加されました。中国の開発現場の様子については特集を見ていただくことにして、こちらの記事では高木敏光さんによるスピンオフコラムをお届けします。スマートファインダーは、「人物」「ゲーム」「自動車」などのテーマごとに用意された情報を、オプション項目を選択しながら絞り込む検索サービスです。
ワンパクの「もっと使いこなしてみよう
第2回目で取り上げるのは、「ライブラリ」「スニペット」「テンプレート」です。いずれも作業を効率よく進めるために役立つ機能です。これを知っている/知らない、使いこなしている/こなしていないでは、作業時間が大きく違ってきます。
ぜひマスターして、サクッと仕事を終わらせて飲みにいく時間を作りましょう
大重美幸の「これ見落としてませんか
0」 第3回 配列の値の並べ替えをマスターする。今回のテーマは配列の値の並べ替えです。配列は複数の値を管理したいときに便利な機能です。
配列を使いこなせてこそ一人前
配列を使ってスマートなスクリプトを書きましょう
お客様よりお寄せいただくご質問や弊社で確認している製品の不具合情報を掲載
今後予定されている最新セミナー情報を一挙公開
1年の締めくくりにあなたにピッタリの講座が、きっと見つかります。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。Flash を活用したソーシャルゲームが熱い。
今月号の記事
もっと使いこなしてみよう
これ見落としてませんか
ここ数年の間に海外では「ソーシャルゲーム」と呼ばれるオンラインゲーム市場が急成長を遂げています。しかも、本誌9月号の記事で紹介したように、この不況の中でもその勢いは増しています。一方、日本ではというと、ようやく「ソーシャルゲーム」という言葉が使われ始めたという状況です。しかし、日本最大手 SNS の mixi が「mixi アプリ」サービスを開始したことで、ソーシャルゲームへの注目が高まり、これから急成長していくと思われます。実際、mixi アプリで公開されている Rekoo の「サンシャイン牧場」は短期間で300万人以上のユーザを獲得し、日本でもソーシャルゲームのニーズが高いことを実証しています。そこで、本記事では、日本の成功事例として Rekoo 「サンシャイン牧場」を紹介します。
ソーシャルゲームとは
ソーシャルゲームには、トランプゲームのような対戦型、動物を育てるといった育成型など、様々なジャンルのものがあります。一見すると従来のゲームと変わりがないように思えますが、ソーシャルゲームの特徴は「人と人とのコミュニケーションをより重視している」という点だと言えます。例えば、チャット機能、友達を手助けする機能、相手を評価する機能など、ユーザ 同士のコミュニケーションを促進する様々な機能を備えています。ソーシャルゲームが急成長を遂げた大きな要因の1つとして、SNS との融合が挙げられます。SNS は人と人とを繋げる場であり、ソーシャルゲームとの相性が良いことは間違いありません。特にアメリカ、ロシア、中国では、ソーシャルゲームが大きな市場へと発展しています。一方、日本ではというと、ようやく「ソーシャルゲーム」という言葉が使われ始めたという状況です。しかし、日本最大手 SNS の mixi が「mixi アプリ」サービスを開始したことで、ソーシャルゲームへの注目が高まり、これから急成長していくと思われます。
日本のソーシャルゲームを牽引する Rekoo/サンシャイン牧場
サンシャイン牧場は、ユーザが自分の牧場を持ち、野菜や果物を育てて収穫したり、動物を飼ったりする牧場経営ゲームです。マイミク達と畑や牧場のランキングを競ったり、マイミクの畑を世話したり、虫を入れてイタズラしたりと、mixi の機能を活かしたコミュニケーションが充実しています。公開してから、たった数ヵ月の間に300万人以上のユーザを獲得するほどの人気ぶりで(広告などのマーケティング活動は一切行わず、口コミだけでユーザ拡大)、先月発表された mixi 「ソーシャル アプリケーション アワード」ではグランプリ賞を受賞しています。このサンシャイン牧場を制作・提供しているのが、中国のソーシャルゲーム会社「Rekoo」です。
サンシャイン牧場は世界展開しており、中国では No
「サンシャイン牧場では、友達を助けたり、ちょっとしたイタズラをしたりできるというフレンドリーな機能を持たせたことが、多くの方々に支持していただけることに繋がったのではないでしょうか
また、サンシャイン牧場に工場やペット犬の追加、新たなソーシャルゲームとして「サンシャインタウン(仮)」「サンシャイン深海(仮)」を予定しているなど、今後ますます日本でのソーシャルゲーム展開に力を入れていくようです。実際、サンシャイン牧場、そして海外で大成功を収めているソーシャルゲームの多くは、Flash Platform で作られています。ソーシャルゲームを成功させるには、できるだけ多くのユーザ 環境に届けることが重要となります。特に若い層にリーチするにはモバイル展開が必須です。「Flash は覚えるのが簡単かつ開発効率が良いので、モバイルゲームに携わるデベロッパーには最適なツールです。
これからのモバイルゲームは、Flash Player がマルチ・プラットフォーム上で利用できるようになるので、より迅速に開発できるようになるでしょう
デベロッパーはプラットフォームを意識せずにゲームそのものに集中できるようになり 、他のツールで悩んだり足止めを食らっ たりしていた問題を考えずに済むようになります。また、Flash はベクターグラフィックを扱えるので、ゲームをより魅力的に面白く、表現力豊かに制作することが可能です。Flash 開発については Adobe がすばらしいデバッガを提供しているので、デベロッパーはスムーズに開発に専念できます。
タカギズム&岡田昇三の中国開発滞在秘話
11月6日に提供開始したモバイル版サンシャイン牧場
その開発を手伝うべく、日本から訪中したタカギズムの高木敏光さんと hi-posi Inc
の岡田昇三さんに、Rekoo 北京本社の開発現場について伺いました。
―― 今回、どのような目的(役割)で北京に行かれたのでしょうか
正直、わけが分からないうちに北京行きが決まったという感じです。mixi アプリのうち、私が一番ハマったのがサンシャイン牧場でした。グラフィックしかり、少々奇妙な日本語しかり、サン牧だけが持つプリミティブさに惹かれました。自分でもソーシャルゲームのプランを持ちながら、今の日本では現実的に開発不可能だなと、少々悶々とした気持ちを抱きながら、連日、牧場の世話をしていました。そんなある日、アドビ社の太田さんと久々にお会いする機会があり、酒を飲みながら、サン牧について熱く語りました。《事件》が起きたのは、その5日後でした。なんと、サン牧を作っている Rekoo 社と深い関係にあるというインフィニティ・ベンチャーズの小野さん(現 Rekoo Japan株式会社 社長)を紹介されたのです。
その日の別れ際に「一度、北京で制作現場をご覧になりませんか」と言われ、「それは素敵ですね」と別れたのですが、その夜のうちに小野さんから電話があり、「来週北京に行きましょう
ともあれ、パスポート番号を教えて下さい」と言われたのです。旅立つまでの間、Skype でチャットミーティングを行い、サンシャイン牧場のモバイル版のリリースを急いでいることをなんとなく知りました。「モバイル版を作る」ということを聞いていたので、日本特有の制限などを説明するという役割で参加しました。後で話しますが、今回この役割は必要ありませんでした。私の方も北京に行くことになった経緯が、高木さんと似ています。Twitter上でサンシャイン牧場についてポストしまくっていたのです。
例えば、収穫時間に合わせて起床したり
それが届いたのか届いていないのか、アドビ社の太田さんに声を掛けていただき、小野さんをご紹介していただきました。
モバイル版の話をお伺いし、アドバイスが欲しいとオファーをいただき、翌週には北京に行くことに
驚くべきスピードです。思えばこのスピード感こそ、この旅のベースとなるスピードであるということを、後に知ることになります。
―― 北京の制作現場で、「これは日本と違う」と感じたことはありますか
日本のどんなプロダクションよりも、ハングリーな環境だと思いました。
オフィスがあるビルは、北京市内では、推測ですが平均以上なのでしょう
しかし、「片付けるヒマも惜しい」と言わんばかりに雑然としていました。スタッフは皆、相当に若く、25歳前後と見えました。日本ではおなじみのスターバックスのカフェオレなどはなく、常温の水をめいめいのコップに注いで飲んでいました。「なるほど、制作にコーヒーやおやつが必須なわけではないよな」と、思いを新たにしました。Rekoo の社員は60名ほどとのことですが、誰もが自分のマシンにかじりついて必死、という印象を受けました。
ランチタイムらしきものは実感できず、会議室に運ばれてきたケータリングの料理を、入れ替わり立ち替わりつまんでいるといった様子
もちろん私もその一人になりました。これは楽しいものでした。「ベンチャースピリットが溢れている」と感じました。オフィスの入り口付近に世界地図が貼ってあり、世界中のどの SNS に提供しているかがすぐ分かるようになっています。このように目標と現状が分かりやすく提示されていれば、モチベーションを保ちやすいと思いました。モバイル版は11月6日(金)20時にローンチしました。実際、金曜日の20時近くになっても、まだ作業中でした。通常だと、もう少し早い段階で「もう金曜はやめておいて、来週にリスケしよう」という判断になることが多いと思います。しかし、皆ギリギリまであきらめず、なんと19時59分にローンチできました。その瞬間、社内に歓声と拍手が湧き上がりました。私は2000年くらいにベンチャーで働いていた経験があるのですが、その当時の気持ちを久しぶりに感じました。
ビジネス一色ではなく、世界を変えてやろう
そんな熱い想いからか、久しぶりに感じた一体感、これはエキサイティングな経験となりました。
―― 中国のクリエイターと一緒に仕事をして、驚いたこと、刺激を受けたことはありますか
姿勢はとてもひたむきです。日本でもこれほどのものは見たことがない。ほとんどのスタッフが、日本語はもちろん、英語もほぼ通じませんから、意志の疎通はホワイトボードに描いた図や、筆談になります。
ただ、学ぶ姿勢がかなり強く、少し仲良くなった後では、にっこりとした笑顔とともに、「ちょっと質問していいですか
」ということが増えていきました。年長者を敬うお国柄なのか、私がよほど怖いオーラを発していたのか、若いスタッフはみな丁寧でした。ともあれ、一つのアドバイスや指摘に対して、ものすごく反応が速い。言葉による意志の疎通を、コンテンツクリエイションで補うといった印象です。ある課題が残っている場合、担当者は帰りません。実際のところ、私たちが先にオフィスを出るので夜中はどうなるかと思っていたのですが、後から聞いたところによると、少なくとも Rekoo社は不夜城で24時間体制、警備会社ともそういう契約になっているそうです。そこを説明しようと意気揚々としていたのですが、仕様に関してよく勉強されていて、ほとんど何もアドバイスすることはありませんでした。
例えば、iモードブラウザ 2
0 に対応したオートロードバージョンと 1
1 をベースとしたバージョンを出し分けまでしていました。日本語のページを見て研究したらしいのです。ですので、アドバイスできたのは、操作系の調整だけでした。なるべく日本のユーザ に合うように調整をしてもらいました。通常日本では、携帯 Flash アプリや Web サイトを作る場合、開発の方と密な打ち合わせをし、設計をかなり細かい所まで決めてから作り始めるのですが、Rekoo では Flash の機能だけで何とかしようとしている印象を受けました。ここは改良の余地があり、モバイル版はさらなるバージョンアップを期待しています。
―― 日本の制作現場・クリエイターも取り入れた方がいい、見習った方がいいということはありましたか
日本では就業率の低下が言われていますが、中国でも事態は同様、あるいはもっと悪いようです。そんなこともあってか、首都北京で仕事をできることのありがたさを、若い人は実感しているかのように思いました。しかし、もう一歩掘り下げると、「何かを作ることの楽しさ」に取り憑かれているとしか思えない情熱でした。日本の制作現場は、納期だとかコストだとかにこだわりすぎているように思われました。もちろんそれらは、仕事の上では重要事項ですが、北京の若いクリエイターは、そんなものは眼中にないようでした。言い換えると、上に立つ人はクリエイターにそのことを感じさせないような環境を作り、クリエイターは目先の成功などにこだわらないでただひたすら作ることが大事なのかなと思いました。私にも、20年代後半(約20年前になりますが)、家に帰る時間も惜しく、ただひたすらモノ作りが楽しかったことがあります。もし、日本の若いクリエイターがそこまで夢中になる何かがないのなら、それは上に立つ人の責任だと思います。北京の若いクリエイターたちは、売上額や会員数や PV などといったデータには、いい意味で無関心でした。これは実は大切なことで、自分の過去を思い出しても、無欲で作ったモノにこそ、制作の達成感があったと感じます。ハングリーとスピードという2点が自分にとって一番の収穫でした。Rekoo 社はサン牧をはじめ、たくさんのユーザ を抱えるソーシャルゲームを多数提供していますが、制作体制は優秀な人間をリクルートしてきて、少人数で驚くほどのスピードで開発を行っています。モバイル制作時には、私を含め皆で会議室にカンヅメで作業していました。それぞれ PC を持ち込み、横でどんどん改善されていきます。質問もどんどんされ、アドバイスを受ければすぐに改善を行います。このスピード感には圧倒されました。他には言葉の問題があると思います。ソーシャルアプリは来年にかけて、日本国内では mixi アプリ以外にも増えていくと思います。少し乱暴に言うと、アプリを運用フェーズで持っていければ、日本語だけでサービスするのはもったいない。きっと海外へ向けて挑戦したくなると思います。ただ、通常のゲームと違い、ソーシャルアプリの場合は感覚が違う場合も多々ありますので、「複数の言語でコミュニケーションしていく」ということは、制作上でもビジネス上でも重要になってくると思います。
左:高木敏光さん、右:岡田昇三さん
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
もっと使いこなしてみよう
これ見落としてませんか
今号の特集では、国内におけるソーシャルゲーム成功事例として、中国の Rekoo 社が開発した「サンシャイン牧場」を紹介しています。mixi アプリ内で爆発的な人気を誇り、今月初めにはモバイル版が公開されました。そのモバイル版の開発に際し、日本からタカギズムの高木敏光さんと hi-posi の岡田昇三さんが参加されました。中国の開発現場の様子については特集を見ていただくことにして、こちらの記事では高木敏光さんによるスピンオフコラム「サンシャイン語の秘密」「1949」をお届けします。
サンシャイン語の秘密
「虫を入れたと知らせて下さいませんか
このフレーズに象徴されるサンシャイン牧場の独特の言い回し
いかにも異国で開発されたソフトの日本語で、初めのうちは意味が分からずとても奇妙に感じていたが、やがて病みつきになった人も多いのではないだろうか
僕が最初と主張するつもりはさらさらないが、これを「サンシャイン語」あるいは「サンシャイニーズ」と呼んで楽しんでいた。今回、北京への旅をアテンドしてくれたインフィニティ・ベンチャーズの小野さん(現・Rekoo Japan株式会社 社長)に聞いたところ、「あれは、わざと残したんです」とのことだった。北京への往路の機内でも、わざと「喉が渇きました。
誰か酒を入れてくれませんか
」などと話し、どんどんその魅力に惹かれていった。サンシャイン語には、深いストーリーがある。Rekoo の日本語スタッフはたった一人しかいない。6年間日本に留学していたという、安(アン)くんという若者だ。いわば彼こそが、サンシャイン語の生みの親だ。
インフィニティ・ベンチャーズの田中さん
安くんは英語を話さないし、僕は北京語がまったくできないので、おのずと会話は日本語になる。不思議なことに、安くんに分かってもらうために僕の日本語は自然とサンシャイン語になる。
あなたの日本語は、日本のみんなにとても好かれています」
そういうことのはないかと思います。
私は日本語はうまくないのですので」
安くんは、とても謙虚で奥ゆかしい若者だ。
「もっと、勉強が必要だと思いますので、いい日本語を入れてくれませんか」
僕らは、「速度 成功 激情 自信」と大きな赤文字で壁に記された会議室をあてがってもらい、そこでひたすらサン牧をやっていた。安くんが、おずおずと来る。
「タカギさん
」と、僕はそういうときはネイティブっぽく日本語を話してみる。安くんのマシンに近づいてみると、Rekoo から日本ユーザ へのメンテナンスのお知らせについてだった。“サーバのメンテナンスを夜にすることにより、日本のユーザーには迷惑をかけることになるでしょうですので、努力をして、早い復旧を目指しますから、お許し下さい。この日本語は、いくらでもこなれた文章にすることはできる。
だが、どうしよう
少し悩んで、僕は言う。「とてもいい。
何も問題はないですよ」
しかし、一読したときの、僕の微笑みは見られていたようで、安くんは少し不安になる。
「何か問題があると知らせて下さいませんか」
決して侮蔑などではなく、生のサンシャイン語を耳で聞けた喜びだ。
もちろん、Rekoo からユーザ 向けのアナウンスも、クリティカルなものは日本人(もっぱら小野さん)が書くのだが
しかし、丸二日を一緒に過ごし、熱心な安くんに呼ばれて会話するうちに、彼はたちまち日本語力を上げる。
サンシャイン語ネイティブが失われないかと、むしろ心配になるくらい
僕らの帰国直後、一時期、畜産の方にあった「お世話になっていますので、一つ持っていただけますか
」という見事な初期設定が「もってけドロボー
」に変わったり、単なる誤訳(あるいは中国語の直訳がもと)だった謎の「パラミツ」が「パイナップル」になったり、謎の魅惑植物「メキシコシティー」が「さぼてん」になったり、「豌豆」(「えんどう」で変換されるが、小野さんは「うでまめ」と嬉しそうに呼んでいた)が「あおまめ」になった時期があった。僕は驚愕して日本側スタッフに同報メールを送った。「至急、直させましょう」というのが皆の一致した見解で、中国側に連絡した。
「元に戻してください」と
今は、「豌豆」も「パラミツ」も「メキシコシティー」も「 一つ持って下さい」も、元通りのはずだ。
それにしても、「もってけドロボー
」なんていうこなれた日本語の元は何だったのだろうと、心配になった。
誰か、日本語ネイティブのスタッフでも入ったのか
いずれにせよ、Rekoo のアクションは速いので、何が起きても不思議ではない。後日、その謎が解けた。そもそもローカライズの初期段階で「より正しい日本語」を目指しつつ翻訳を行っていたものの、結局は「オリジナルが味だね」と断念した日本スタッフの文字原稿データがどこかに残っていて、安くんがより正しい表現にしようと使ったためだと分かったのだ。安くんの日本語は、あれでいいと思う。僕の使える英語よりずっとましで、とてもスクエアだ。ちなみに、サンシャイン語の典型の一つである「虫を入れたと知らせて下さいませんか」は、なかなか意味の取れない言葉である。元になった台詞を、中国語に堪能なインフィニティ・ベンチャーズの田中さんが調べてみたそうだ。すると、だいたい「ちょっと~、虫入れるなら、ゆってよ~、も~」程度の軽口だったそうである。中国では「1949」という数字をよく目にした。街の一角が高い塀で区切られ、ちょっとした城塞のような中が、モダンなデザインの庭園になっていて、何軒かの店が並んでいる。庭園は水と玉砂利で飾られ、ライトアップされている。何よりも目を引くのは、金属で作られた重厚な彫刻だ。丸っこく力強くデフォルメされているが、それらは明らかに、労働者を象っている。
ハンマーを振る男、農作業にいそしむ男
いくら共産主義の国とはいえ、まるでそれをパロディにしているかのようだ。
店は、ウェイティングバー付き、現代アメリカ風のしつらえで、テーブルや食器もまさに資本主義の権化のようにメタリック
そんなアンバランスを無邪気に楽しみながら、赤ワインと北京ダックをいただいた。別の日、台湾風火鍋の老舗というのが凄かった。北京市街を縦横に貫く巨大な街路の端、奥まった路地のようなところにその店は偉容を誇っていた。
ここで酒飲みの私の希望に応じて、リーダーの田中さんが頼んでくれた白酒(ベイチュウ
後で聞くと、4人分に余るほどの料理全体より高価だったというその酒は、本格的な磁器の瓶に入ったうえに、ギンギラギンの箱に収められていて、そのチャイニーズな装飾とはいささか不釣り合いに1949の文字が躍っていた。原料には、サン牧にも出てくる豌豆も使われている。ここに至って、一同、悟った。
中国は建国60周年
建前と本音、歴史とモダニズムがモザイク状に組み合わさっている中国
不思議な魅力とパワーがある。スモッグにけぶる月だけは、いつも真っ赤だった。
北海道生まれ
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
もっと使いこなしてみよう
これ見落としてませんか
スマートファインダーは、「人物」「ゲーム」「自動車」などのテーマごとに用意された情報を、オプション項目を選択しながら絞り込む検索サービスです。その理由は、リソースの有効活用という点だけでなく、Flash での操作性を向上させるためでもあります。1つの技術に固執することなく、技術を組合せ、それぞれの長所を活かすことで、利便性の高いサービスを提供することができます。スマートファインダーは人物、映画、TV、自動車などの専門テーマを様々な条件でピンポイントに検索することができる新感覚のフィルタリング検索ツールです。例えば「自動車」ファインダーであれば、今まで販売された自動車に関する情報について、車種、価格帯、販売年、販売国、排気量、燃費など、検索条件をマウスで選択していくだけで、適切なキーワードが思い浮かばなくても、知りたい情報を直感的かつ簡単に調べることができます。このサービスは「知りたい情報をただ調べる」だけの従来の検索とは異なり、「検索という行為そのものを楽しむ」という体験をユーザに提供するためのサービスです。現在は人物、ゲーム、自動車、映画、グループ、TV、大学の7分野でサービスを提供しています。フィルタリング検索ツールという特性上、(検索前の段階で)整理されていない情報を、ユーザの選択条件に応じて、結果を素早く、わかりやすく整理された状態で表示させることによって、求める情報が簡単に得られるという利便性を提供する必要があります。そのため UI 開発では一つのテーマに対して多様なオプションを提供し、これらを効率的にサーバー側に渡す必要があるため、Ajax はモジュール化を通じてテーマ別(人物、自動車、ゲームなど)オプションを構成・管理し、Flash はこの結果を効率的にディスプレーする役割を担当しています。なお、スマートファインダーの検索結果を表示している Flash UI は、NAVER の画像検索サービスでサポートしている全てのユーザインタラクションをサポートしています。データ管理とオブジェクト管理は画像検索と同じロジックで処理し、画面にディスプレーされる要素の変化やデータ条件の管理のみスマートファインダーの独自UIを採用するなど、サービスごとに最適化された構造でフレキシブルな機能を提供しています。上記で説明したように、スマートファインダーのオプション UI および情報は Ajax が担当しています。これはオプション UI と情報を全て Flash で処理している画像検索とは一番異なる部分です。
内部的なメリットとして、こうすることで以前制作した旧バージョンのスマートファインダー(http://theme
jp/映画ファインダー)の構造とプラットフォームをそのまま利用できる利点がありました。Flash 単体で処理できない部分に関しては Flash 開発者が一番よくわかっているので、Ajax 開発者・Web 開発者との継続的なコミュニケーションを通じて問題を解決していく課程が必要です。Flash で構成されたサービスは、ページの更新をしないままデータを変更して表示できるメリットがある反面、HTML ページのように内部の情報の変化がブラウザで認識できる単位に区分できない問題があります。これを解決するため、スマートファインダーでは Ajax History を利用して Flash の状態が変更された際、Hash(ページのアドレスの「#」記号)以降の情報を動的に変化させることにより、ブラウザの「戻る」ボタンを機能させています。ユーザはページ変化がない RIA 環境でより高いクオリティのインタラクションを体験できると同時に、例えばブラウザの「戻る」ボタンを利用できたり、現在閲覧している情報をブックマークしたり、ブラウザの URL をコピーして他人と共有したりなど、一般的な HTML ページを利用する際の利便性を享受することが可能になります。この作業は Flash 内部で正常ではない流れを作る可能性があるため、細心の注意を払った処理とテストが必要ですが、ユーザに高い利便性を提供するためには欠かせない機能だと考えています。
UI 開発はどの技術を使うのかではなく、どのように調和させるのかが重要
)Flash の限界に関しても認識する必要があります。その限界を超えるためには、企画・デザイン・Web 開発者などプロジェクトメンバー間で協力し、密接なコミュニケーションを行うことが必要です。スマートファインダーの場合は既存サービスとの連携のため、オプション管理と結果表示という2つの機能で完全分離されましたが、ある面では Ajax と Flash のそれぞれの長所が融合した良い OOP の形態ではないかと思います。しかし、大規模サービスを開発・運営していくためには、多様なユーザ環境への配慮と、Flash 内部のロジックとは無関係な API サーバーの変更や新しいバージョンのブラウザで生じる問題などに対する維持・補修も考慮する必要があります。このとき Flash が独断的に全ての機能に含まれていると、「難しくてややこしいブラックボックス」になってしまうため、JavaScript やサーバー側との役割分担を通じて Flash の限界を克服し、外部のコード修正を通じて問題解決の方向性を提案するのが理想的な Flash 開発ではないかと思います。次回は Web 上で強力なイメージ編集ができる「NAVERフォトエディター」を紹介します。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
ワンパクの「もっと使いこなしてみよう
今月号の記事
もっと使いこなしてみよう
これ見落としてませんか
株式会社ワンパクの近藤&杉山の師弟コンビが Dreamweaver の覚えておきたい便利な機能や、見落としていた機能などをお届けする連載の第2回目
今回取り上げるのは、「ライブラリ」「スニペット」「テンプレート」です。いずれも作業を効率よく進めるために役立つ機能です。これらの機能を知っている/知らない、使いこなしている/こなしていないでは、作業時間が大きく違ってきます。
ぜひマスターして、サクッと仕事を終わらせて飲みにいく時間を作りましょう
そして、好評
の「杉山のこれ知ってます。」コーナーでは、サイトの定義を共有する方法と、ターゲットブラウザを設定する方法を紹介します。
コードを瞬時に挿入「ライブラリ・スニペット」
近藤:今回はライブラリ・スニペット、そしてテンプレートの機能についてみていこう
杉山:はい、今回もよろしくお願いします。
近藤:まずはライブラリだが
杉山:はい、ライブラリはコードを登録可能で、各ページにコードがあっとゆう間に挿入できますよね
挿入後にライブラリを修正すれば、挿入箇所に修正が反映されるというのもすごく便利ですよね(^^)作成したライブラリは「Library」フォルダ内に格納されるから共有もすぐできますしね
でも挿入した後は、個別に修正ができないんですね
ここだけなおしたいところがあるのになぁ
近藤:そういう使い方なら、スニペットのほうが適しているぞ
スニペットはライブラリとは異なり、登録したコードを修正しても、すでに挿入した箇所へ反映はされないが、挿入した箇所それぞれで個別に修正が可能だ。よく使用するコードで汎用的なものを登録・管理しておくのだ。
杉山:よく使用するコードで汎用的なもの
CSS・JavaScript の読み込みは必ず記述しているから、スニペットに登録しておけばよかったんですね
ファイル名とパスを編集すれば、どのサイトでも使い回しができますもんね
記述が必要な時は、別ファイルからコピーしていました。
近藤:いちいち別ファイルを開くのは効率が悪いな
スニペットに登録しておけば、コードの挿入はあっとゆう間だ。これからスニペットをたくさん増やしておきます。
他には何をスニペットにしておこうかな
近藤:そうだな
他には、社内でエリア分けのルール・id名の命名規則などが決まっていれば、div 要素の大きな枠組みもスニペット化できるな
杉山:コードはドラッグ・ダブルクリックで挿入できるので、入力ミスも減りますね
新しく追加したスニペットは作業者同士で共有しておきたいです。
ライブラリと違って、サイト内には自動でスニペットデータは作られていないようですが
登録しているコード一覧を渡せばいいのかな
近藤:そんな一覧は必要ないぞ
このデータを共有したい相手のマシンの同様のフォルダへコピーしてもらえば共有が可能だぞ
スニペットを右クリックすると「キーボードショートカットの編集」が選択できて、各スニペットに対してキーボードショートカットを割り当てることもできましたよ
すでに使用されているショートカットの場合は警告で教えてくれました。スニペットの中でも特に使用頻度が高いものはショートカットを割り当てれば、さらに便利ですね(^^)ショートカットを割り当てたいスニペットを右クリック(Macはcontrol + クリック)し、「キーボードショートカットの編集」をクリックします。該当のスニペットを選択し、「キー」の項目でショートカットのキーをクリックします。「OK」をクリックすると反映されます。ショートカット割り当て後はスニペット名の横にショートカットキーが表示されるようになります。割り当てたショートカットの削除や編集も同様にできます。
スニペットにショートカットを設定できるのか
知らなかった。
使いこなさないとソン
「テンプレートのオプション領域」
近藤:それでは次にテンプレート機能の見落としがちな機能をみていこう
そもそも、なぜテンプレートを使うんだ。杉山:えっと、テンプレートで管理することによって複数ページの修正が容易になり、品質管理にも有効だからです。近藤:制作者として立派な答えだ。真の理由は「ラクしたいから」だ。
そんなこと言ってもいいんですか
近藤:事実だから仕方がない。こんな便利な機能があるんだからサクッと仕事を終わらせて飲みにいく時間を作らなきゃソンだ。近藤:ところでテンプレートではどんな機能を使っている。
杉山:ヘッダとかフッタとかブロックごとにわけてネストして管理したり、リピート領域を使ったり
近藤:うん、いいぞ
だが理想的なテンプレートには及ばないな
杉山:理想的なテンプレート
近藤:そうだ。理想的なテンプレートとは少しの設定をおこなうだけで、あとはテキスト入力、画像の挿入程度でページ作成できるレベルのテンプレートだ。
杉山:どうすればいいんですか
近藤:例えば、ページ内には共通要素が複数存在することがある。
そんなときに「オプション領域」機能を使って一括で定義してしまおう
下のページの共通要素は何だと思う。
杉山:えっと
、わかりました。<title> タグ内のページタイトル部分とパンくずのテキストが同じです。
ページタイトルは画像のようなのでこれは指定しないといけませんね
近藤:あまい。
あまちゃんすぎる
近藤:心の目で HTML のコードを見なくてはいかん。ディレクトリやファイル命名規則が決まっていれば、画像のパス(相対パスで記述の際)はどのページも同じになるから固定で記述できる。ちなみに正解は以下のようになる。近藤:これらに「オプション領域」を設定すれば一括して管理することが可能になるのだ。<head>タグ内に下記のコメントを追加するのだ。杉山:追加しました。
valueが空になっていますがいいんですか
近藤:問題ない。このテンプレートを元にページを作成する際にこの値を「テンプレートプロパティ」から設定することになる。それからここで指定したnameの値を「@@( )@@」内に指定し、適用させたい箇所に記述すれば設定終了だ。
それじゃ保存して次にすすむぞ
杉山:あれっ
エラーがでています。
あとは大丈夫なんですか
大丈夫だと思います。
赤枠部を忘れずに削除
近藤:え~と、それでは実際にこのテンプレートを元にファイルを作成してみよう
え~と、「ファイル」→「新規」→「テンプレートから作成」でいま作成したテンプレートを選択してもらえます。
近藤:それでは「修正」→「テンプレートプロパティ」でウィンドウを開いてもらえますでしょうか
杉山:ここでさっき設定したpageTitleを選択して設定したい値を下のテキストボックスに入力すればいいんですね
近藤:おっしゃるとおりです。あと「オプション領域」は条件分岐も使えるので表示する画像の切り替えやインクルードファイルの切り替え、パンくずの階層の指定、レイアウトの指定などにも応用して使えるんです。近藤:気づきました。
ここには以下の5つの型を指定できるんですよ
指定する値の型
また条件式は論理演算子のような記述をするので JavaScript などおさらいしておくとより複雑な設定もできるんじゃないかと思います。
杉山:「オプション領域」って覚えることが多そうですが、使いこなしたら本当に簡単にページ作成ができるようになりそうですね
欲を言えば、もっと具体的なことも教えてほしかったんですが
「リピート領域」の便利な使い方とか
近藤:具体的なことももっと取り上げたいが、このまま続けると文字数が1冊の本なみになりそうだから、今回はここまで
杉山:はい、まずは今回の応用から始めたいと思います。
テンプレートを作成する際にちゃんと要素を確認したりして構造・構成を考えないといけませんね
同じことはライブラリ・スニペットを作成する時にもあてはまりますもんね
今回の内容もとてもためになりました。
近藤:そうだろ
ためになっただろ
杉山:エラー出してしまっていましたけどね
杉山のこれ知ってます。
「“サイトの定義” を素早く共有&ターゲットブラウザお好み設定」
杉山:サイトの定義の設定は案件ごとに異なり、また複数人で作業をする場合もあります。この機能を知らなかった時は、他の作業者へメールやメモで、その都度、設定内容を伝えていたのですが、そんな手間はもうかけずに済みます。
サイトの定義情報を書き出して、共有したい相手にファイルを読み込んでもらえば素早く設定の共有ができますよ
書き出されたファイルは拡張子
ファイルウィンドウから「サイトの管理」を表示します。情報を書き出す時は「書き出し」から、保存内容と保存場所を指定します。情報の読み込みは「読み込み」からファイルを選択します。杉山:続いては、Dreamweaver では使用しているタグと CSS のブラウザの互換性のチェックができますが、このチェックの対象となるターゲットブラウザを細かく設定することができます。ドキュメントツールバーの「ページのチェック」から「設定」を選択します。「ターゲットブラウザ」のダイアログが表示され、チェック対象のブラウザのバージョンを細かく設定することができます。
杉山由起子(すぎやまゆきこ)
いくつかの制作会社に在籍した後、1PAC
師匠近藤のもと、主にマークアップを担当しつつ、デザインもこなせるようになろうと日々七転八倒中
近藤将範(こんどうまさのり)
の設立に参画する。主にテクニカルディレクターとしてコーポレートサイト等の設計・制作に携わる。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。0」 第3回 配列の値の並べ替えをマスターする。
大重美幸の「これ見落としてませんか
第3回 配列の値の並べ替えをマスターする。
今月号の記事
もっと使いこなしてみよう
これ見落としてませんか
今回のテーマは配列の値の並べ替えです。配列は複数の値を管理したいときに便利な機能です。
配列を使うときに、よく分からなくて、頭の中が混乱していませんか
配列を使いこなせてこそ一人前
配列を使ってスマートなスクリプトを書きましょう
配列の値をソートしよう
配列の値を並べ替えることをソートと言います。ここで配列を扱うとき注意しなければならないことがあります。
さっそく例を見てみましょう
ソートでは値を小→大と並べる昇順と逆に大→小に並べる降順があります。配列に対してsort()を実行すると値は昇順に並びます。念のために colors 配列の値を確認すると、これも降順に並び変わっています。こうなる原因は配列がリファレンス型だからです。3個の配列を扱っているようで、実際には1個の同じ配列に3つの名前を付けて操作しているわけです。trace()するタイミングを変えてみるとすべて同じ配列だとわかります。したがって、スクリプトのムダを無くそうとあらかじめソートした配列を変数に入れておいても、これではうまくいかないことがわかります。このような場合には、配列を複製してソートを行います。複製した配列をソートします。
文字でのソートと数値でのソート
値をソートする場合には値の種類によって並び順の大小の判断の基準が違ってきます。先の例でも示したようにsort()では文字を昇順に並べますが、次のスクリプトでは、大文字小文字を区別して、大文字が先に並ぶのがわかります。大文字小文字を区別して昇順に並べます。
英文字の大文字小文字を区別せずに並べたい場合には、次のようにArray
大文字小文字を区別せずに昇順に並べます。次の例では配列 months には数値が入っていますが、これをソートした結果を見ると数値の大きさではなく、文字列として大きさを比較して並べてしまっています。数値ではなく、文字列として値をソートしています。
配列の値を数値として比較して並べたい場合には、ソートオプションにArray
これで数値が昇順に並びます。配列の値を数値として比較して昇順にソートします。
では、数値として降順に並べるにはどうすればよいでしょうか
その答は次のように2つのソートオプションを演算子の|で区切って指定します。配列の値を数値として比較して降順にソートします。
書式が揃っていない日付を並べるには
これらの値を日付順に並べるにはどうすればよいでしょうか
問題は書式が揃っていないところです。書式が揃っていれば文字列として比較してソートできます。AS3 ではこのように正規表現を利用できます。配列の値を順に変換するには、forステートメントなどを使って配列から1個ずつ値を取り出して関数を実行する方法がありますが、Arrayクラスには map() という便利なメソッドがあります。map()を使えば、配列のすべての値を引数で指定した関数で変換できます。日付の桁数と書式が揃ったならば、あとは文字列としてソートすれば日付順に並びます。配列に入っている日付の書式を揃えた後でソートします。//日付をソートする。
//日付の書式を整える関数
プロパティの値で並べる
オブジェクトが入っている配列では、オブジェクトのプロパティの値でソートすることができます。そして、ラジオボタンでソート順を選ぶと本の並びが変わります。ソート順を選ぶと本の並びが変わります。スクリプトでは、まず最初に配列 books に本データのオブジェクトを入れています。本のムービークリップのインスタンスはリンケージ書き出し設定がしてあるシンボルの Book1~Book5 のインスタンスを作っています。を実行してオブジェクトの price プロパティの値で配列をソートします。注目は btn3 のようにソートフィールドが複数ある場合です。この場合はソートフィールドとソートオプションをそれぞれ配列に入れて指定します。なお、star は文字列で昇順にソートしますが、文字列、昇順を示す定数がArrayクラスで定義してありません。この場合は0を指定します。オブジェクトのプロパティの値でソートして本を並べます。//本のインスタンスを作る。//本データのオブジェクトを配列に入れる。//ラジオボタンを作る。
//ラジオボタンのグループ設定
//最初は価格でソートする。
//ラジオボタンの選択の変更イベントのリスナー関数
//mcをソート順に配置する。たとえば、次のように使います。配列の値を逆順に並べ替えます。このreverse()とストリングを配列に分割するsplit()、逆に配列をストリングに連結するjoin()を組み合わせることで、文字列の並びを逆順に並べ替えることができます。split("")では、配列に分割するための区切り文字が空なので、文字列は1文字ずつに分かれて配列に入ります。文字列を逆順に並べ替えます。値をシャッフルする。
最後に配列の値をシャッフルする方法を紹介しましょう
シャッフルする方法はいろいろありますが、よく利用されるのは Fisher-Yates アルゴリズムで、配列からランダムに値を選んで、後ろから順に詰め替えていく方法です。これは席替えでみんなで抽選して後ろの席から順に座る位置を決めていく感じです。席が決まった人は次の抽選には参加せず、残りの席を残りの人たちだけで繰り返し抽選します。ところで、この関数を使って席替えを行うと元と同じ席になってしまう人がまれにあります。
そのほうがラッキーという人もいるでしょうが、それではつまらないという人もいるでしょう
では、元と同じ席には続けて当たらないようにするにはどうすればよいでしょうか
その答は次回までの宿題にしましょう
大重美幸の「これ見落としてませんか
第2回 外部 swf ファイルのシンボルを利用する。
(おおしげよしゆき)
日立情報システムズ、コミュニケーションシステム研究所を経て独立
執筆、講師、ソフトウェア開発を行う。
趣味はサーフィンとジョギング
著著は約50冊
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
アドビデザインセンターがスタート
デザイナーのための情報リソースやチュートリアルが集約された「アドビデザインセンター」がスタートしました。今月の注目アーティスト達のモーショングラフィックをお楽しみください。
アドビデザインセンターへ
【重要なお知らせ】 アップグレードポリシー変更のお知らせ
学習効果の高いラーニングコンテンツを素早く作成
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
株式会社リクルートが 2006年9月にオープンした、Flash をフル活用して構築された地図情報サイト「スゴイ地図」
「Ajax による実装」 がブームともいえるオンライン地図サービスにおいて、フル Flash で制作したのには、どんな狙いが込められているのか
株式会社リクルートと、制作を担当した ネットイヤーグループ株式会社と株式会社コスモ・インタラクティブ に伺いました。
リクルートの持つさまざまな情報と地図を組み合わせた新しい Web サイト
株式会社リクルート 事業開発室の橋場一郎氏(右)と「スゴイ地図」運営メンバー
ネットイヤーグループ株式会社の西川 忍氏(右)と中西淳雄氏(左)
右から阿部淳也氏、吉森大介氏、 原 冬樹氏、岩崎 亮氏
サイト遷移やインタフェイスの動きをチーム内で共有するにあたって作られた、紙によるサイトのモックアップ
これによって意思統一がかなりスムーズに行われたという。
インタラクティブな面白さを目指して
「スゴイ地図」は、リクルートの持つさまざまな情報と電話帳データ、地図を組み合わせた新しい Web サイトです。
リクルートがすでにサービスを提供していたローカルサーチ「ドコイク
」の情報をベースとしており、店舗などのスポット情報の検索結果がインタラクティブに地図上で確認できます。また、単に地図と検索機能を提供するだけではなく、季節や場所などに関係した特集コンテンツなども用意された「雑誌的なサイト」になっていて、「検索キーワードがないと探すことができない」検索サイトとは一線を画するものとなっています。スゴイ地図の企画立案はリクルートが行い、ネットイヤーグループが設計を担当し、コスモ・インタラクティブとともに開発しました。リクルート事業開発室の橋場一郎氏は、次のように話します。「検索サイトはとても便利ですが『検索キーワードが想起できないと使うことができない』という欠点も持っていました。『スゴイ地図』は、もっと検索を気軽に楽しんでもらいたいという意図から“パラパラと雑誌をめくる感覚で検索できること”を大事にしました。同時に、裏コンセプトは“なんかスゴイ。
”と思ってもらえること
これらの思いを持って、機能や概要を設計していきました。ネットイヤーグループさんと一緒に想定されるユースケースを洗い出し、そこから必要な機能、画面の配置やフローを考えました。実際にデザインをしたり、インタラクションやビジュアルを考える際は、コスモ・インタラクティブさんにも入っていただき進めていきました。
独自の世界感を生み出すために Flash を採用
リクルートの橋場氏とネットイヤーグループの中西淳雄氏によれば、開発のかなり早い段階で「スゴイ地図は Flash を使おう」という方針があったと言います。「Flash を使うことで雑誌をめくるような世界感を実現し、検索キーワードや目的がなくても検索できる世界感を楽しんでもらいたいという考えがありました」と話します。また、コスモ・ インタラクティブで開発のリーダーを務めた阿部淳也氏も「Flash を使うことによって付加価値を与えることができます。単なる地図サイトではなく動きなどで感情的な要素を加え、ユーザの体験を強く打ち出すことができると考えました」と振り返ります。実際にスゴイ地図でエリアの情報を検索してみると、その画面遷移やインタラクションの動きには独特のリズムがあるほか、アイコンやボタンなどのデザインにもどこか優しさや楽しさを感じさせます。それらが、スゴイ地図の世界感を構築しているのです。コスモ・インタラクティブの原 冬樹氏は、「Web 標準の考え方が一般化されてきた一方で、サイトの使い勝手に上限が生じてしまっているのでは、と考えます。今はアナログ的で感覚的な、リッチな Web 体験が求められている時代です。人に寄ったサービスを前提にしたいというリクルートさんの思いを生かしました」と話します。さらに同社の吉森大介氏が「スゴイ地図というものに愛着をもらいたい。あまりにツールっぽくなってしまうと冷たい印象を受けるので、それは避けました」 と話します。このように、スゴイ地図では「世界感」と「ユーザ体験」が大きなポイントとなっています。それを実現するために、他の地図サービスのような Ajax ではなく、Flash を多用するという手段をとったのです。とはいえ、ただ Flash を使えば世界感が生まれるわけでも、リッチなユーザ体験が実現されるわけでもありません。実質 3ヶ月という短い開発期間の中で確実にゴールへ持ち込むために、徹底したディスカッショが行なわれました。Illustrator で画面や各パーツのラフを作り、それを紙に出力して、工作するようにそれらを重ねたり、ページをめくったり、そして各パーツを手で動かしたりしながら、デザインやインタラクションのイメージを共有しながら設計・開発を進めました。例えばスゴイ地図のトップページにはキャラクターがいて、季節に合わせたアニメーション( 秋なら「サンマを焼いている」など) が動いているのですが、これも親しみをもってもらうための手段として、設計の中にしっかりと盛り込まれていたのです。
短い開発期間を乗り越えるための工夫
コスモ・インタラクティブでは、Flash による開発を行う際に、グ ラフィック面での「デザイン」と、スクリプト作成などの「インタ ラクション」は担当が分けられていますが、その境界は「あえて曖昧になっている」(阿部氏) と言います。実際には、デザイナーもスクリプトを書くことが多いのです。
阿部氏は「(スクリプトについては) ワークフローや各人の理解度にも寄りますが、まずはみんなが知るべき
共通の認識を持ち、自分が何をやったらいいのかをメンバーで共有できればいいと思います。そのためにも“知る” ことは絶対条件です」と話します。インタラクションを取りまとめたコスモ・インタラクティブの岩崎 亮氏も、「デザイナーとスクリプターの境目を曖昧にしておくことで、かえって歩み寄れるのです」と話します。そして、デザイナーもスクリプトを書けることによって、開発期間の短縮を実現しているのです。
例えばコスモ・インタラクティブの吉森氏は、もともとはデザ イナー
「最初はスクリプトが書けなかったのですが、ボタンを作ったりすることから少しずつ覚えてきました」と言います。こうやって、デザイナーとスクリプターの敷居をあえて曖昧なままにしたのです。阿部氏は「インタラクションやアニメーションも、基本的にスクリプトで実現しています」と話します。吉森氏もパーツごとに設計された上での Class 書き(スクリプトを書く事)でなければ、実現できない部分も多々あったと思いますと語ってくれた。クラス化でスクリプティングする理由を、岩崎氏は「MVC モデルに準じた、オブジェクト指向設計の上でのクラス化を行わない限り、大規模な開発はできません。この基本の設計があるからこそ、パーツごとの開発が可能となり、基本的に同じ機能を持つ部分は使い回しが可能となります」と話します。「例えばティッカーなどは複数の場所で使い回せますし、地図を表示する際の動きも同様です。
そうすることで、開発のスピードは 1/3 になっていると思います」と岩崎氏
しかもメリットは開発スピードだけではありません。これはタイムラインアニメーションではなく、大半をスクリプトによって実装を行なったからこその恩恵です」とも語ってくれました。中西氏は「開発期間短縮のためスゴイ地図用に多少変更を加えて、そのまま Flash からも直接 SOAP API を利用することに決定しました。これはチャレンジングなことかもしれません」と話します。Flash コンテンツを省サイズ化しつつ、表現力とパフォーマンスを向上できたのは、Flash Professional 8 の先端機能によるところが大きく、「フィルタ・ブレンド機能の強化によって、かなりの表現力を向上することができました。また、それとあわせてほとんどのアニメーションをトゥイーンクラスでスクリプトによって実現することで、ファイル容量のスリム化に貢献しています。また、ビットマップキャッシュによるパフォーマンスの向上にはかなりの恩恵を受けていると考えます」と阿部氏は語っています。さらに、Flex についても次のようにコメントされています。「今後、業務系の開発に踏み込むために Flex の使い手を育てていく予定です。また、CMS 系や EC 系の管理画面での利用や、商品管理の部分に表組みなどを入れ込んでいけたら、使いやすいインタフェイスになるのではないかと考えています。
いずれにしてもビジネスにもユーザにとってもメリットのある UI を構築していくための心強いツールが登場したということは間違いないと思います」(阿部氏)
短い開発期間で独自の世界感を実現させた、スゴイ地図
今後は「マイマップ」機能やユーザからの投稿などといったサービスを実現させていきたいということです。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
この史実の生き証人()であり、雑誌、書籍、セミナー、ユーザコミュニティなど様々な活動を通じて国内における Flash の啓蒙を続けてきた、まつむらまきお氏と笠居トシヒロ氏
今回は「日刊デジタルクリエーターズ」で大好評の「MKチャット対談」の出張編として、「マツカサ対談エクストラ」をお届けします。お二人が作られた貴重な Flash ムービーもたくさん眺めることができます。この対談を読むと、新しいアイデアが生まれてくるかもしれません。
最後までお読み逃しなく
まつむらまきお
1961年大阪府大阪市生まれ
在学中の'84年マンガデビュー
会社員兼業時代を経て'91年独立
Mac専門誌を中心にイラスト、コミックを描き散らす。
'93年「ふしぎなすいぞくかん」で講談社絵本新人賞佳作受賞
'96年、朝日新聞のコラムおまけマンガ連載をきっかけに幅広く新聞、雑誌、Web等にコミック、イラストを提供
1961年広島県広島市生まれ
'83年に京都市立芸術大学美術学部油画科を卒業
ゲージュツでは食えないので、某特殊印刷系の会社にデザイナーとして紛れ込む。
入社数年後に訪れた省力化・機械化の気運に便乗し、デザイン室にMacを導入させることに成功
以後、独学でマスターする。
'96年ごろから、書籍・雑誌等に執筆活動を開始
現在は、有限会社マッドシーデザイン代表、およびFLASH-JPフォーラム主宰
」というインタビューをお願いして、皆さんそれぞれの思い入れがあって面白かったのですが、今回はやはりこのお二人、かさいさん&まつむらさんにチャット対談でFlash 10年を振り返っていただきたいと思います。
隔離やったんか~(笑) じゃあ今回は裏歴史で(笑)
隔離だったのか
まず、お二人が スマートスケッチ*1 を知った経緯からお聞きしたいのですが、別々に知ったんですか
それとも当時から「こんなのあるぞ」って話をされていたんですか
かさい:なんでスマスケを知ったのかは、あまりよく憶えてないんです。
そのころ二人は知り合ってなかったし
全然別々やねぇ
ぼくはめっちゃ覚えてます。
ところが、きちっとした感じのイラストは Illustrator が得意なんだけど、手描きっぽい絵だと結構時間がかかってしまって
そんな時、立ち読みした(笑) MacPower 誌にスマートスケッチとスーパーペイントの比較紹介記事があって
で、MACLIFE の編集さんに、レビューするからって製品手配してもらったのが最初です。
その時はまだ製品出てなかったんですわ
まつむらさんのかもしれない。
最初に使ってみて、どういう印象でしたか
もうですねぇ、目の前のディスプレイ上で起きていることが信じられなかったです、はい
最初にスマスケで描いた絵です。
オレ、見たことあるなあ、これ
まず、お二人がスマスケを知った経緯からお聞きしたいのですが、別々に知ったんですか
それとも当時から「こんなのあるぞ」って話をされていたんですか
なんで知ったのかはあまりよく憶えてないんですよ
そのころ二人は知り合ってなかったし
レビューに作例として載せたからね
おそらく世界で初めて、スマスケから EPS 変換して印刷されたデータです(笑)
オレはやっぱり「へんなソフト」って印象でしたね
ドローなのにペイントのインターフェイスなんて尋常じゃないでしょう
でもわりとすぐに慣れました。
ぼくはもう、ひとりで大騒ぎしてました(笑)
目に浮かぶようや(笑)
まずね、アンチエイリアスで線が描ける。
リアルタイムにですよ
当時、そんなもん、どこにもなかった。これはタテヨコの時と、斜めの時で画面表示上線の太さが変わってしまう。
これも絵を描くには不適当
ところがスマスケはリアルタイムにアンチエイリアス表示され、これが印刷イメージにとても近いレンダリングだったんですわ
あと、ベクターなのにバケツツールで色が塗れる。しかも線の間にスキマがあっても検知してくれる。
で、最後にそれを Illustrator のパスに描き出せるってんで、もうノックアウトされちゃったんですわ
オレはシルクスクリーンで屋外広告とか作ってたんで、スマスケをそれ用のイラストにも使いました。ただね、今もそうだけど、印刷用の CMYK にコンバートするのには苦労した。はっきりコレはスゲー。というのも、オレはまだその頃会社員デザイナーだったわけで、業務に使うという意味では、スマスケの出番はやはり少なかったんです。ぼくはスマスケですでにアニメつくりはじめてたんです。
あぁ、素材をスマスケで作ってたんだっけ
当時ですね、アンチエイリアスかけた線画に色つけるのってめんどくさかったんですよ、一般的にはスキャンした線画に Adobe Photoshop で色付けるって手順だったんだけど、それを省力化したかった。
アニメだからたくさん原画かかないといけないし
ラスターだと回転させると汚くなるけど、ベクターの Flash なら簡単にきれいなイメージが得られるってんで、スマスケのおかげで随分楽になりました。
当時プライベートで作ってたのはこのあたり
当時から動かすことを前提に考えられていたんですね、まつむらさん的には
っていうか、これ、めっちゃアニメ向きやん、ってのはありました。
だから、スマスケがアニメソフトに進化するってニュースが来たときは、それこそ「キターッ」(笑)
最初「スマートスケッチ・アニメーター」って名前で発表されて、「セルアニメーター」って名前に変わってベータが出て
世に出たときはその名前になってましたけどね(笑)
まつむら氏が10年前にスマートスケッチで描いたイラスト
今回の対談にあたって、特別に、お二人の過去の作品を下記のサイトにまとめてもらいました。
めっちゃ貴重品(笑)
めっちゃ適当なデザイン(笑)
で、製品版が カニさんパッケージ*5 ね
ハイブリッド CD-ROM、インスタントタトゥー付きという画期的な製品(笑)
アニメーション機能がついたときは、どういう印象でした。
Web でサンプル見て、スゲー興奮しましたね
ぼくはまず、オニオンスキンにカンドウした。オニオンスキンで前後の線のみ表示させられるようになって、まともに動画を描く環境ができたー、って感じでした。オレ的には額面どおり、Web でのツールとして捉えてたんです。FSAって発表されたときから、Web アニメーションを睨んでいたって思う。
すごくキレイで、そのくせめっちゃくちゃ軽いアニメーションができるって
初期の頃作ったフライングロゴ(右)です。
丁度、個人 Web サイトの最初の波が来るか、という時でしたね
そうですそうです。
べっこあめとか
ぽまーどとか
オレ、リムネットだった。だれかつっこんでくれ。
ぽまーどってどんなボケだよ
かつての都市伝説、口裂け女がやって来たら「ポマード、べっこうあめ」と言うと、逃げて いくという言い伝えから来ているボケだそうです)
マツカサ対談 その2へ
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
Flash という名前に変わったのは、この頃ですよね
いや、まだまだ
まだ半年くらい(笑)
FSA が出て、半年くらい経ってマクロメディアに買収されて
という流れです。
MS に買われるんじゃないか、って話もあったね
それが普及に貢献しましたよね
ところが一般ユーザはプレイヤーの壁がねぇ
そうなんだよね
制作側は使いたいんだけど、ユーザがプラグイン入れてくれないと、見てもらえない。
んで、それぞれ、布教啓蒙活動へとまい進するわけですが、オレはまず数人の仲間と意見交換のための BBS 立ち上げたんですよ
それに絡めて、チュートリアルサイトを作った。制作方法を解説する Web コンテンツです。
(右の Flash ムービーがチュートリアルサイトで使った作例)
それ、おいら見てないんだよ
あの恐竜のオープニングのヤツよ
恐竜はおぼえてるが
チュートリアルだっけ
あの恐竜見て「おお、ちゃんと Flash のことわかって作ってるやつがおる。」とびっくりした。
そのあたりがお二人の出会いですか
出会ってはないですね、まだ
出会いはですねぇ
出会い系サイトでアメ村で待ちあわせして
女性だと思ったら、かさいさんで
オレはそのとき、Flash 本の執筆中で、マクロメディアから資料とかをもらうために、UCON に足を運んだんですよ
そこで初めて会って、他のセッションすべてキャンセルして、二人で延々情報交換してました。
ビールのみながら(笑)
ビックサイトの逆ピラミッドの上にある店ね
まぁ、会って話したら、まちがいなく日本で一番くわしいな、こいつ、と
お互いね(笑)
2 で音が使えるようになった。
あと、ビットマップの切り抜きも Ver
2 で付いたね
これ、当時つくったものです →
あー、見た見た、これ
オレは恐竜アニメに吼え声付けてリニューアルしましたよ(笑)
サイズとか作り方、テキトーにやってて
シンボルとかあまり活用してなかったんですが、この時点で Flash の流儀でつくるようになった。
流儀はわかってたんですけど、それより、Director にもっていきやすい形で作る方が重要だったので
音が出たら Flash そのままで公開できるし、スタンドアロンプレイヤー作れるようになったら CD-ROM のコンテンツも Flash で直接作れるんでようやく Flash でまるごと作れるようになった。3 はすごかった。グラフィックとしてはアルファチャネルがサポートされて半透明表示が可能になったんです。構造的にはムービークリップができて、多元的、階層的な構造をインタラクティブに活用できるようになった。
ここにまた二人ともハマりました(笑)
半端じゃないんですよ、このアルファの扱いが
塗り色も半透明できるし
ビットマップのアルファチャネルも、このときサポートされたね
ボカシた表現が可能になったんよね
こうなってくると、それで描かれる絵やアニメの質感とかは、完全に変わってきますよね
全然かわります。
ただ、動かないんだな、これが(笑)
当時つくったコンテンツが 600 ピクセル くらいの画面で、フレームレート 4 くらいの設定です。それでも半透明なものを動かそうとしたら、小さい部分でしか使えなかった。
リドローする面積で、CPU への負荷が変わるからね
ドローだから、CPU の性能にもろに影響受ける。
だから、この当時、いろんな誤解がありましたよ
マツカサはできてるとか
半透明な関係だとか
Flash って軽くないじゃん、とかあったでしょ
容量は軽いけど、動作が重いとか
いっぱいビットマップ取り込んでしまって、軽くならないとか
軽くするには
みたいな Tips は、セミナーのネタでよくありましたね
軽いことが善、みたいな
1分以上待たせるな、と
でも、Flash ってうまく作れば、どんな大きなサイズのファイルでも待ち時間は短くできるんですよね
全体のサイズが小さくても、ヘタに作ると待ち時間多くなる。
これはなかなか理解されなかったねぇ
って言い続けてたんだけど
マツカサ対談 その3へ
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
その後、インターネットも一般化し Web サイトも増えて、Flash を使う人もたくさん増えて、最初の大きな盛り上がりが来たという感じだったと思うんですけど
爆発的に増えた。もう、すごかったです。アクションがちょっと進化して、If文とか変数、プロパティとかが使えるようになった。
こんなのとか
当時、マルチメディアコンテンツって言い方してたけど、インタラクティブなもの作るのは、Director しか選択肢なかった。というユーザや、ネットの普及で個人のアニメやサイト制作者がとびついてきた。
当時の UCON セミナー用の作例として、かさい氏が制作したもの
で、このとき松笠コンビで UCON デビューしてます(笑) そのときの作例
わりとすんなり
文系頭だったんで、プログラムとか超苦手で、If だの変数だの、ぜんぜんわかんなかった(笑)
インタラクティブ至上主義っていうか、そういう旋風がありました。
当時は仕掛けがとにかく受けた時代で、ボタンでいいのに、わざわざ ドラッグ & ドロップさせるとか
全面書き換えでいいのに、わざわざまったりスクロールさせるとか
とにかくうっとーしいインターフェイスが「クール」のひとことで蔓延した時代で
ゆるいところですかね
普通、ソフトウエアって目的があって、そのためにもっとも効率的な手順でワークフローが考えられていて、そのワークフローに乗って、ユーザは準備や作業を強いられると思うんすよ
ワークフローがゆるいってことは、作り手側の気持ちもゆるくなるんです(笑)
もちろん、ちゃんとワークフロー組み立てる人もたくさんいるけど、いいかげんに作っても、あとからなんとかなる。だから思いついたらすぐ作り始められる。
だから小学生でも使えちゃうんでしょうね
スクリプトでできちゃうことがタイムラインでもできたり、また逆もあったり、別にどっちでもいいんですよ、手段は
でき上がったもんがおもしろければ
たとえば、トゥイーンやシンボル使ったら、ファイルサイズ軽くできる。
スクリプトで描画したらもっと軽いかも
でも、そんなのわかんなくてもコマアニメという非常にプリミティブな表現でも作れちゃう。
重たいかもしんないけど、気にしなければ大丈夫(笑)
そうそう、その「気にしない」ってのが大事(笑)
ちょっと変だけど、動きの途中一瞬だからまぁいいか、みたいな(笑)
プログラム系の人たちは、そのへん許せないかもだけど
効率的、ということと、とにかく自分のスキルなりに工夫すればそれなりに作れるってことは全然違うと思う。
そうそう、業務で使う場合はしっかり使えないとまずいけど、それは効率の面の話だから
さっき、お二人の昔の作品を見せてもらいましたけど、今、同じの作れって言われたら、全然違う作り方をしますか
多分いっしょでしょう
なんらかの理由があれば、新しい機能もつかうかもしれないけど
オレは違う作り方しようとするかも
あくまでチャレンジとして、ですけどね
自分なりに一番スマートな方法を探すのが楽しいから、とか
例えばですが、ひとつの絵を3分割するのにマスクとトゥイーンを組み合わせてみるとか
マニアックな(笑)
最近良くやる。文字をひとつずつ登場させるのに文字列をばらすんじゃなくて、一文字分のマスクと、トゥイーンでずらした文字列を組み合わせる。それはよくやる。
けど、文字数少なくてやりなおしの予定がなければ、全部先にキーフレームにして、文字列として一文字ずつ消す(笑)
シンボル化なんかしない。
データサイズかわらんし~
そうそう、あとで修正が入るであろうなあ、という場合のやり方ね、これは
トゥイーンさせて、ざくっと移動させてから、全部キーフレームにして微調整ってのをよくやるよ、おいらは
全部はしないけど、ここもちょっと動いて欲しい、みたいな箇所ではキーフレーム増やしたりするね
まぁ、そういうゆるさ
ある目的のための機能のはずが、他に転用できるゆるさみたいのが Flash には昔からあった。
開発チームが想定してなかったであろう使い方をして、すげーものができるのが楽しい (笑)
この前、アドビの開発者と話してたら、Flash のゆるさはわかってる面もあったね
もともとアドビにいた開発者は、Flash の進化をすごく期待してる印象だったね
ゆるさってのは、可能性だと思うんです。最初から目的のものを最大の効率で作れるようなツールは専門性が強すぎて、新しいものが出てくる可能性は低い。なんかわけわからんから、変なもんができる、それがFlashだと思うわけです。
ジョナサン*7 が、よく「 Flash は紙と鉛筆なんだ」って言ってますが、同じことだとおもうんよね
何も出来ないけど、何でもできる。そのあたり、Macに似た思想を感じる。
ゆるい、シンプル
使い方はユーザが考える、みたいな
紙と鉛筆だと普通は文字や絵を書くんだけど、折り紙で飛行機や船を作ってあそぶこともできる。ワープロは効率的だけど、飛行機は作れないってことです。
鉛筆は背中もかけるしね(笑)
この対談の中でも語られているように「思いついたらすぐ作り始められる」ことが Flash の魅力
もしまだ応募されていない方は、あなたのハードディスクにひっそりと置いてある力作 Flash ムービー、もしくは頭の中にあるアイデアを Flash でカタチにして、ぜひ Flash 10年を祝うお祭りに参加しましょう
スマートスケッチ:Flash の起源となるソフト
まつむら氏は同誌で、連載執筆をはじめソフトウェアレビューやイラスト提供などをしていた。
Mac OS X 以前の Mac オペレーティングシステムが持っていたグラフィックス描画エンジン
スマートスケッチがバージョンアップし、ソフト名称が変更されたもの
初期の Macintosh に付属していた、ハイパーテキストを使ってさまざまなコンテンツやプログラム開発を可能とするソフトウェア
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
液晶パネルから液晶テレビまで一貫生産を行う世界最大規模の生産拠点として注目を集め、「亀山モデル」の名が浸透してきているシャープ株式会社の亀山工場
今や生産工場に留まらず、 同社の技術力の証としてTV CM や店頭プロモーションを積極的に行っています。そしてWeb サイトも、Flash をフル活用した幻想的な世界が造り出されています。オープニング終了後の画面は、後に展開される世界のパーツを集結することでページ全体を形成しています。浮遊する神殿の中に滝がありますが、よく見ると水が流れています。これはサイト全体に言えるのですが、アクオス=アクアクオリティーというコンセプトから「水」をイメージするものを多く用いています。サイト全体の造りとして、テキストメニューだけではなく、画面上のビジュアルからも全コンテンツへのナビゲーションが可能になっています。
ビジュアルイメージの直感からコンテンツに落ちていっても面白いかも
夢想 ─ 培った歴史と開拓する未来
神殿を、過去(アクオスへとつながる歴史)、現在(進化し続けるアクオス)、未来(さらなる進化を目指して)の 3つに分類し、神殿の上に昇るほど、時代が進む設計になっています。ユーザは 3つの神殿をマウスで自由に回遊できます。神殿の一番下には、1915年に開発され、後の社名にもなる「シャープペンシル」をはじめ、国産第一号の鉱石ラジオ、テレビ、世界初の電卓など、珍しいビジュアルが配置されています。そして神殿の一番上は、未来を見据えるシャープがもつ、さまざまなノウハウの集大成という位置づけで亀山工場があります。白い空間に彩を与えるために、奇麗なハチドリを飛ばせています。
共振 ─ 単体と集合体
亀山工場の強みのひとつである立地環境
工場内ではテレビと液晶パネルを一貫生産しており、両技術者の「超高度な擦り合わせ」と呼ばれるコミュニケーションが日々行われています。また、亀山工場周辺は「クリスタルバレー」と呼ばれ、液晶にまつわる企業、最先端の技術者が結集し、企業の枠を越え、互いの力を引き出し合っています。今回の Flash サイトでは、技術者達の擦り合せ(交流)を、自由に飛び交うアクオスの内部パーツの動きによって表現してみました。これは完成品のアクオスを実際に分解して、主要パーツを抜き出したものを使用しています。
アクオスの画面内に注目
背景の絵が透けているだけと思いきや、空間が動くと実はテレビの映像になっています。アクオスの色表現の方針として、そのままの自然な色を再現するといったポリシーがあります。クリスタルバレーだけに、水晶(の谷)をコラージュのパーツとして使用しています。
繊細 ─ 匠の技と最先端テクノロジー
シャープの匠の技を「繊細」と定義し、基本的にモノトーンの澄み 切った空間に微妙な色合いを加える程度のあしらいで、エレガントかつ繊細な雰囲気を作っています。また、繊細や歴史(時間)をイ メージするキーワードとして、時計のパーツをコラージュに加えて います。
そして、日本文化を想像させる「絵巻物」「屏風」をモチーフに展開
動きもそれに合わせてマウスの座標で左右の動きを付けています。実は、動画は写真の切り抜きなのです。
対比 ─ マクロとミクロ
大きく分けて2つのスケールギャップをコンセプトに構成しています。
象ほどの大きさがある巨大なマザーガラスであるにも関わらず、液晶を挟み込むパネル(ガラスとガラスの間に液晶 + 諸々を挟み込んだ状態
実際のテレビに使われている完成系のものを指します)の隙間は 3μm と、赤血球の幅よりも狭いのです。他にも大と小の対比があります。画面上にもクジラが泳いでいますが、亀山工場は世界最大の動物種であるシロナガスクジラ約8,000頭が入れるほど大きな工場でありながら、そのクリーンルームは、東京ドームの大きさにスギ花粉を 4個しか許さないレベルです。
アクオス = アクアクオリティーというところから、アクアをイメージする展開
調和 ─ 自然と産業
亀山工場は、世界ナンバーワンの環境先進工場を目指すスーパーグリーンファクトリーであることから、工場内の設備と自然物のコラージュにより世界観を形成しています。
亀をクリックすると鶴が飛びます(笑)
本当は共存させたかったのですが、スペックの負荷が高いため、分散したという裏事情があります。
鶴が飛び立つ瞬間に羽毛が飛んでくるのもポイント
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
0が一筆で描く「人と人のつながり」
2007年10月1日に民営化し分社化を果たした日本郵政グループ
0を全面採用したスペシャルコンテンツを公開
0の性能と思いもよらない制作テクニックがふんだんに使われています。
ここでそのノウハウを一挙公開
ご存知ですか
あなたのサイトがアドビのトップに事例として掲載可能です。
[今だけのチャンス
サイト設計からデザイン、ブログパーツ開発まで、一挙紹介
0で画像の反射 他
サイト構造のXML定義〜コンポーネントの配置
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
0が一筆で描く「人と人のつながり」
2007年10月1日に民営化し分社化を果たした日本郵政グループ
従業員数が24万人に上る一大企業グループの誕生となりました。明治以来130年もの歴史をもつ官営郵政が、持株会社である日本郵政(株)と、郵便局(株)、郵便事業(株)、(株)ゆうちょ銀行、(株)かんぽ生命、という4つの事業会社に民営化・分社化されたことで、当然のことながら、国民の中にはある種の不安感も芽生えます。その不安を安心に変えて、さらに期待感へと繋げていくことが、日本郵政グループの目的といいます。
そこで、持株会社である日本郵政(株)は、この目的に基づいたWebサイトのスペシャルコンテンツを公開
0を全面採用した、意欲的なWebコンテンツを構築しています。
「人と人のつながり」を感じるWebコンテンツ
このスペシャルコンテンツには明確なコンセプトが込められています。日本郵政(株)のコーポレート・コミュニケーション部グループリーダーである姫野佳史氏は、そのコンセプトをこう説明します。「民営化された郵政は、『あなたの近くにある会社』です。日本全国をカバーする地域密着型の民間企業であり、誰にとっても近い会社になります。
日本郵政公社が民営・分社化されたことに対する漠然とした不安感を安心感に変えることが一貫した目的であり、スペシャルコンテンツのコンセプトになっています」
そのコンセプトを具現化するために生まれた重要なキーワードが「人と人のつながり」と言います。「人同士のつながりの中で新しい日本郵政グループが担う役割、それをサイト上で表現し、人同士が触れあう暖かさを感じてもらうのと同時に、日本郵政グループのネットワークの広さも感じてもらいたい」(姫野氏)という考えに基づいたWebコンテンツを展開する。こうすることで、今までの生活の中で当たり前だった存在が故に、普段はなかなか感じられない郵政サービスの本質をWebコンテンツを通じて再認識してもらい、それが新しい安心感と期待感に繋がっていくことが、スペシャルコンテンツの大きな目的です。スペシャルコンテンツでは、Flashによって途切れることのない一筆書きが描かれていくという手法で表現されています。このアナログ感に溢れた表現により「暖かさ」「変わらない存在」「ネットワークの広さ」という日本郵政グループの本質が、郷愁をも誘う暖かい表現で展開され、見終わった時に日本郵政グループの身近さ、信頼さを感じさせることに成功しています。
0だから表現できる「暖かなアナログ感」
このような印象的なWeb表現を実現したのが、博報堂アイ・スタジオです。同社のクリエイティブディレクター佐野勝彦氏は、今回のコンセプトをヒヤリングしたときのことをこう語ります。「新しい日本郵政グループは従業員とその家族を含めれば100万人近い集団であり、それはつまり、誰もが知り合いを辿れば郵政に関連した人に出会えるということです。さらに、地域情報を全国に発信していることも学びました。
こうした生活に根ざした企業であることを盛り込んだインタフェイスのプランを作り、提案しました」
その提案が、上記のコンセプトと完璧にマッチしたものであるのは、スペシャルコンテンツを見れば明らかです。0によるコンテンツ開発が欠かせないものだったと言います。「スペシャルコンテンツを構築するにあたってActionScript 3の採用にGoサインが出ていたので、今までのFlashコンテンツにはない表現を盛り込むことを念頭に考えていました。Flashでスピード感があってカッコイイものは今まで数多く作られていますが、Flash単体の効果で人の心に響くやさしい表現をするにはツールとして成熟しきっていないところがあったと思います。
逆にその壁を超える表現ができれば、日本郵政グループのコンセプトに合った良いサイトになると考えていました」(佐野氏)
人の心に響く表現のひとつが「一筆書き」という手法です。
直線の組み合わせよりずっと処理が複雑になる手書きの表現は、従来の10倍以上の処理速度をもつActionScript 3
0だからこそ実現できたものです。さらに67人にも及ぶ「人の声」でコンテンツ展開にテンポをつけ、ハミングなどを交えることで、視覚と聴覚を通じて情感に訴えかけるアナログ感が実現しています。
クリエイティビティに溢れた制作手法の数々
制作の視点で見た時、このコンテンツにはさまざまなクリエイティビティが盛り込まれています。まず一筆書きによるグラフィック制作を担当した博報堂アイ・スタジオの大江達朗氏は、登場するパーツをAdobe Illustratorを使って一筆書きとして描かれました。
「さまざまな資料やデータベースを通じて全国の風景印や切手のデザインなどをピックアップし、そこから面白いつながりが発生する順番を考え、さらにすべてのパーツが奇麗に繋がるパズルのピースを作るように描いていきました」(大江氏)
そのデータはXMLによってアイコンの描かれる順を制御し、大量にあるアイコンの表示順を管理することで高い更新性を保ちつつ、ランダムアクセスが可能となりました。そのため、コンテンツにアクセスしたときに毎回最初から描かれるわけではなく、前回の続きから描かれ、なおかつ途切れることのない一筆書きで描かれるという画期的なアイデアが実現されています。0だからこそこの画期的なアイデアが実現できたと言います。0でロジック処理のスピードが飛躍的に向上したおかげで、データの最適化をリアルタイムで実行し、さらにリマッピング処理を行うことでデータの細分化も行うことができました。そのため、より柔軟なデータ形成、作業の効率化を実現することができました。一例として、人物のデータを透過PNGで読み込み、アルファチャンネル化されていない部分をペンで塗りつぶすという処理をすべてリアルタイムで行っています。
ペンの軌跡が逆になった時も、余裕のある処理のおかげで問題なく対応できるのです」(西塚氏)
開発にあたってのもうひとつのチャレンジは、コンテンツを見ても分かるように、とてつもなく縦に長いFlashムービーであることです。「Flashで扱えるひとつのビットマップの限界は一辺が2,880ピクセルまでですが、それを遥かに超える7,000ピクセルを超えるコンテンツになっています。複数のビットマップを縦に並べることで2,880を超える長さのビットマップを再現しているのですが、どうしても「つなぎ目」が問題になります。そこで最後の300ピクセルを”糊代”の領域とし、次 の透過ビットマップと重ねて描画するという処理をすることで、こうした問題も突破しています。
このような膨大なデータを扱って、果たして動くのかの検証をしたところ、ActionScript 2では徐々に処理スピードが落ちていくのに対して、ActionScript 3のスピードであれば全てリアルタイムに処理できるという結論に達しました」(西塚氏)
このコンテンツの開発期間は、たったの一カ月
しかもロジックの設計は最初の一週間で完成させています。0 Previewをすぐにダウンロードして検証を行ったと言います。
こうした積み重ねが、貴重なリードタイムと共にクリエイティブに貢献していく秘訣なのでしょう
そして、一カ月の間の残りの時間は、表現の作り込みに当てられています。その作り込みの中には、決してアプリケーションで自動化できない作業が山のようにあると佐野氏は語ります。そうした部分を手で作業することで、結果としてアナログ感が増し、今回のコンセプト通りの表現へと繋がっていくのです。コンセプトを的確に具現化したスペシャルコンテンツですが、そのアイデアは現在のものだけに留まらず、今後も人と人とのつながりを体感できるサービスを追加していく予定であると言います。本記事は、アドビWebサイトの事例紹介ページ 「ショーケース」でも掲載されています。他にもさまざまな事例をご紹介していますので、ぜひ併せてご覧ください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
が提供するショッピングポータルサイト
今月号の記事
が提供するショッピングポータルサイト
- みんなのショッピングポータル
が提供するショッピングポータルサイトです。
が提供するショッピングポータルサイト「カラメル」
pro」というネットショップのASPサービスから発展したもので、それらのショップを束ねたポータルとしてカラメルが機能しています。の家入一真社長は、カラメルについて次のように話します。「カラーミーショップに参加してくださっているショップの属性を見ると、個人でやられているところが多いんです。個人で手作りしたモノを売られていたりするので、必然的に面白い商品が集まってくるんです。
それらのショップがバラバラに存在するよりは、モールとして存在したほうが面白いし、モールにすることで他社のモールにも匹敵するものになるのではないかと考えました」
カラメルのサイト全体はPHPで開発されており、スタティックなWebサイトのデザインとは少々異なるワークフローで制作されています。ロジックとコンテンツを分離して管理するためにテンプレートエンジンの“Smarty”(スマーティ)に落とし込んでいるため、日々の更新や修正作業などはテキストエディタなどでHTMLを修正しています。同社のプロデューサー・藤川真一氏に、サイト全体の制作ワークフローについて聞きました。「特集ページなどを新たに作る際は、プレゼンテーションソフトで企画を詰めて、Fireworks CS3 CS3で画面レイアウトを考えます。
画面設計をしたものをデザイナーに渡す部分の作業が、かなり効率良くなります」(藤川氏)
グラフィックの部分を担当するスタッフがFireworks CS3でデザインしたデータをWebクリエイター・田澤裕士氏がシームレスにFlash CS3に読み込み、インタラクションをデザインし、さらなる作り込みを進めていくという分業がなされています。カラメルは日々使いやすいサイトとなるように、機能強化が行われており、最近では「マイカラメル」という新たな機能が追加されました。カラーミーショップだけではなく、Amazonや楽天など他のECサイトの商品なども含め「お気に入り」を登録することができる、ショッピングのためのソーシャルブックマークと言える機能です。「マイカラメル」では、「ヘルメットアタカ」と名づけられたブログパーツを提供しています。
これは、ユーザがマイカラメルにお気に入りとして登録した商品を、ブログパーツの中でテレビショッピング風に紹介していくというもの
ブックマークされたタイトルのテキスト情報を音声を読み上げるのが大きなポイントです。「テキスト情報はサーバサイドで音声に変換して読み上げています。商品画像やスクリーンショットと組み合わせることで、通販番組のようなイメージが実現するわけです。PIP(Person In Presentation)だと作り込みが必要ですが、このブログパーツの場合、ユーザがブックマークにお気に入りの商品を追加すれば自動更新されていくので、低コストで面白いものができます」と、藤川氏は話します。このブログパーツの制作で主導的な役割を果たしたのが、同社社長の家入氏です。「動画デジカメを使い、会議室で人物の動きを撮影しました。
ボツになったものも含め、かなりのカット数を撮っていますね
動画と効果音のリンクは、Flash CS3上でキューポイントを設定して行っています。あと、例えばIllustrator CS3で作った素材をドラッグ&ドロップでFlash CS3に持っていってもグラデーションが崩れない、文字が崩れないなど、Illustratorのデータがそのまま読み込めるように進化しており、各アプリケーションが緻密に連携しているところが便利だと思いました。
将来的には自分を切り抜いて、自分の部屋の中を動くようなものを作りたいと思っています(笑)」
この「ヘルメットアタカ」のブログパーツ
ショップを出店しているユーザが、自ら販売している商品を紹介するといったことも可能であり、先述のカラメルブルーも含め、開発段階から「ショップの人に使ってほしい」という願いが込められています。「ヘルメットあたか」に出演している同社の安宅 啓氏は「企画段階ではまだモヤモヤとしたものが、実際にリリースされて、誰かに使ってもらえているのを見ると、便利で面白いものが公開できて良かったなと思います」と語っています。マイカラメルのサービスを使用するには、最初にユーザ登録をする必要があります。
一般的な入力フォームでは、ユーザがすべての情報を入力し終えて「登録」ボタンを押した後にエラーが表示され
といった繰り返しになり、ユーザ登録のモチベーションが大きく損なわれたり、ユーザのドロップ率が高まる要因になります。しかしSpry Widgetを活用することで、ユーザが情報を入力すると同時にフォームの入力チェックが行われるため、ユーザは必要な情報を正しく入力でき、登録処理がスムーズに行われます。Spryのメリットについて、藤川氏は次のように話します。「新しいサービスですので、いかに簡単に登録してもらえるかが重要だと考えました。フォーム入力が面倒なせいでユーザを逃してしまうことは避けたかったので、入力していて“気持ちいい”と思えるようなフォームを作りました。Spryフレームワークは「デザイナーのためのJavaScriptライブラリ」というだけあって、他のJavaScriptライブラリでは得られないデザインや動きの見栄えがあり、今回の制作のイメージとマッチしていました。とくにアドビのプロダクトは常にクロスプラットフォームを念頭に開発されているので、OSやWebブラウザの違い、とくにInternet Explorer 6のような古いブラウザでもきちんと動作します。そのため、クロスプラットフォーム・テストにかかる時間が大幅に削減できるのは大きなメリットでした。それに、アドビのプロダクトであるというだけで、覚えたくなる気持ちになるというか、習熟のモチベーションが違うんです。
というのがわかって面白いですね」
その言葉を受けて藤川氏も「モバイルはぜひ今後やってきたいです」と言います。「従来であれば携帯電話の新しい機種が出るたびに、コンテンツ変換サーバの機種プロファイルが更新されるのを待っていましたし、そこに年間数十万円というコストがかかっていたわけです。本記事は、アドビWebサイトの事例紹介ページ 「ショーケース」でも掲載されています。他にもさまざまな事例をご紹介していますので、ぜひ併せてご覧ください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
サイト構造のXML定義〜コンポーネントの配置
今月号の記事
が提供するショッピングポータルサイト
ベータ版もリリースされ、さらに有用なフレームワークとしてどのように進化したのか実際に体感することができるようになっています。今回は XML データの作成を以下の細かいステップで進めていきます。
各シーン(ページ)を定義
イベントを定義
パーツの変数や関数を使う。パーツのフレームアニメーションを再生する。それぞれのタグの詳しい解説は PRML リファレンスはご覧ください。以下のコードが PRML の基本形になります。XML」というファイル名で保存してください。*1 バージョンによって若干 PRML の記述方法が変更されていますので、現在インストールされているバージョン番号を指定してください。
各シーン(ページ)を定義
<scene> を使用してサイトのページ構造を記述していきます。シーンを定義します。このタグは、子タグにも <scene> を定義することで、階層構造を表現することが可能です。このタグは最低1つ以上設定する必要があります。シーン識別子を設定します。この値は同階層にある <scene> タグの id 属性値と重複して設定することはできません。この値が省略されている場合にはシーン識別子を表示します。これでサイトのページ構造が記述できました。次はページごとのイベントや配置する MovieClip の情報を追加します。パーツをコントロールするには Progression にパーツのクラス名を教える必要があります。シーン内で使用したいキャストオブジェクトを宣言します。このタグは、XML 上の任意の場所に記述できますが、同じ id 属性値を持つタグを2つ以上設定できません。キャストオブジェクトを呼び出す際に使用するキャスト識別子を設定します。キャストオブジェクトを生成する場合のベースとなるクラスのパスを指定します。次はキャストオブジェクトの表示をどのタイミングで行うかを構造化していきます。
イベントを定義
for 属性で表示をコントロールするキャストオブジェクトの id を指定します。対象となるキャストオブジェクトを最前面に配置します。対象となるキャストオブジェクトが画面上に配置済みであった場合には何も起きません。ここで設定する識別子は、あらかじめ<casting> で宣言されている必要があります。また、カンマで区切ることで複数のキャスト識別子を指定することができます。対象となるキャストオブジェクトを画面から削除します。対象となるキャストオブジェクトが画面上に存在しない場合には何も起きません。ここで設定する識別子は、あらかじめ<casting>で宣言されている必要があります。また、カンマで区切ることで複数のキャスト識別子を指定することができます。シーンのイベントタイプを設定します。イベント発生時には、タグ内に設定されている各コマンドを最初から順次実行します。このタグは同じ type 属性値を持つタグを2つ以上設定できません。type 属性には以下の4つのタイミングがあります。以上の4つのタイミングで、各シーン毎にいつ何をするのか指定します。パーツの変数を設定する。url プロパティを設定すると、その url のファイルの読み込みが始まります。キャストオブジェクトに定義されているプロパティを変更します。対象のプロパティが存在しない場合には何も起きません。ここで設定する識別子は、あらかじめ<casting>で宣言されている必要があります。また、カンマで区切ることで複数のキャスト識別子を指定することができます。プロパティ名を設定します。プロパティ変更後の値を設定します。パーツのフレームアニメーションを再生する。ここで設定する識別子は、あらかじめ<casting>で宣言されている必要があります。また、カンマで区切ることで複数のキャスト識別子を指定することができます。フレーム番号またはフレームラベルを設定します。はじめは難しそうに感じますが、慣れてくるとスラスラと書けるようになります。それでは最後の仕上げです。下記のように記入します。
最初のシーン識別子
はじめに表示したいシーン識別子を記入してください。
XML、ギャラリー用の写真が入っている gallery ディレクトリを同じディレクトリに配置してパブリッシュしてみましょう
ステージのインスタンスを自動宣言は必ずチェックを外すようにして下さい。外さないとエラーが出てしまい、パブリッシュができなくなってしまいます。Flash にサイトの根幹部分を担当させるだけでこんなにも可能性が広がります。
今まで敬遠していた人もこれを機会にチャレンジしてみてはいかがでしょうか
そして何よりも Progression を使うことで今までのサイト制作より時間的にも余裕ができます。
その余った時間をさらにクオリティのアップにつぎ込んだり、早めに帰宅して遊ぶ時間や家族や友人などと過ごす時間に使うのもいいですね
最近は映像や3Dにちょっと浮気気味
映像会社、デザイン会社を経て、現在はフリーランスで活動中
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。今回のバージョンではデザイナーデベロッパー双方にとってメリットがある進化を遂げております。Flashとの連携機能をクローズアップして紹介します。
成長していくAIRアプリ
「たまごっちガジェット」
株式会社バンダイでは、さまざまなプロモーションと連動できるツールとしてデスクトップガジェットに注目しており、その可能性を伺いました。
お客様よりお寄せいただくご質問や弊社で確認している製品の不具合情報を掲載
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
Flashをメインに据え制作されたアニメーション作品のプロセスとは
今月号の記事
バージョン判別について
成長していくAIRアプリ
「たまごっちガジェット」
まず脚本をもとに、15FPSに設定したドキュメントに、絵コンテを制作していきました。Flashのタイムライン上でざっくりとタイミングをとりながら、ブラシツールで直接ステージ上にラフスケッチを描き込んでいきます。既に使用が決まっている楽曲はストリーム再生で配置し、直感的かつスムースに編集作業を行い、この段階でほぼ全体のカットの核を決め込み、動画コンテを作ります。このコンテで、スタッフ内でのチェック、意見交換を行い、作品のテンポをほぼ決定し、各カットをグラフィック・シンボルに変換しています。Flashのタイムライン再生は、このラフスケッチ、タイミング調整、修正というプロセスに大変適していると思っています。
レイアウト、作画、着色へのシンボル単位での作業
この作品では、Flashと親和性の高い3Dアプリケーション(SWIFT3D)を使用し、ベクター書き出しした素材を用いて各カットのレイアウトを決定しました。この素材で光源の位置設定や、影の様子を確認します。そして、そのレイアウトを基に、ブラシツールで作画を行います。一見、二度手間に感じられるかもしれませんが、作画の統一や下書きの手間を考えると、自分では最も効率の良い方法だと思っています。作画が終了したら、カット毎にシンボル化したデータをサーバー上へアップしていきます。すると、遠隔地にいるスタッフが、順次、着色作業を仕上げながら、動画コンテのシンボルと置き換えていき、アニメーションを完成させる仕組みです。
多媒体への多彩な書き出し
この作品は、音楽がメインで、台詞は字幕で表示するというスタイルをとっていましたので、各媒体用に字幕の修正をしています。モバイル配信向けの場合は、再生画面が小さいので、字幕をいったん125%に拡大し、ムービー全体を縮小して QuickTime形式に仕上げます。また、CS放送、地上波放送向けには、高解像度な連番PNGで書き出し、放送用テープにデータ変換する方法を採りました。サウンド効果や音編集の作業のためには、別途、高圧縮なQuickTimeファイルを書き出しておき、動画コンテにつけておいた仮のサウンドエフェクトを参考にして、MAを行いました。最終的には、アフレコ用に字幕のない動画を制作する運びとなり、このMAデータに台詞をのせて再調整しています。映像のプランニングから書き出しまで、ほぼ全行程をFlashで行いました。演出・作画1名、着色2名、サウンドデザイン1名というコンパクトなスタッフながら、約2週間で5分程度の作品を仕上げるという、ハイペースな作品作りを可能にしました。2002年に制作した初代「CATMAN」の映像については、今回のDVD化にあたり、もう一度、全体のイメージをブラッシュアップしたいと考えました。6年前に作った初期の映像は、今見るとやや陳腐化しているように思えたからです。このため、まずAfter Effectsに字幕を入れずに書き出した高画質のPNGを読み込み、フィルターの追加、カラー調整を行っています。Flashで制作したベクター画像に特徴的に見られる、「線画的な」イメージの素材に、輝きとリッチさを加えることができたと思っています。インタラクティビティを含まないシンプルなムービーコンテンツは、Web配信においても、FLV仕上げの場合が多く、一時期のようにSWFでのムービー納品は極端に少なくなってきました。同作品は30分番組として放映されますが、総尺の約半分が実写ドラマで、残り半分がアニメーションという構成になっています。来るMax Japanでは、その制作の裏側を実例として詳しく解説する予定です。
青池 良輔氏による特別セミナー&イベント情報
大阪芸術大学映像学科で映画制作を専攻後、カナダの映像制作プロダクションでクリエイティブディレクター、アートディレクターを遍歴
主にFlashを用い、アニメーション、 Webサイト、TVCMなど、多方面のメディアにむけたコンテンツ制作を行っている。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
「たまごっちガジェット」
成長していくAIRアプリ
「たまごっちガジェット」
今月号の記事
バージョン判別について
成長していくAIRアプリ
「たまごっちガジェット」
「たまごっち」
Edge読者の中にも夢中になって育てた方が多いのではないでしょうか
今や、たまごっちは、ゲーム機内だけでなく、文具や雑貨、アパレルなどいろいろなところで見かける国民的キャラクターとなりました。このガジェットでは、たまごっちの生活を見て楽しめるだけではなく、スケジュールやメモ帳などの多彩な機能を実装しています。充実した機能もそうですが、より興味深いのはガジェット自体の今後の可能性です。たまごっちのプロモーションに連動して、ガジェットもいろいろな展開が予定されているようです。「たまごっちガジェット」の魅力とその可能性について、株式会社バンダイ メディア部リーダーの久保勝範さんにお話を伺いました。Edge:「たまごっちガジェット」の主な機能、注目して欲しい機能について教えて下さい。
また、このガジェットがターゲットとしているのは、どのようなユーザ層なのでしょうか
久保:たまごっちガジェットのターゲットは、「昔、たまごっちで遊んでいた方々」です。初代たまごっちのブーム時に小学生~高校生だった方々は、今では20〜30代の大人となり、お子さんもいる年齢になられているかと思います。そういう方々が、当時の気持ちを掘り起こしつつ、お子さんとも一緒に楽しめるようなツールとして、玩具のたまごっち本体と近い形のガジェットを開発しました。このガジェットをインストールすると、たまごっちのキャラクターがご飯を食べたり、お風呂に入ったりと、生活している様子をPC上で見て、癒され、楽しめます。「ともだち」時間を設定しておくと、お友達キャラが画面の中に遊びに来ます。メインに設定するキャラクターによって、お友達やアクションが変わるので、毎日見ても飽きずにお使いいただけると思います。そうした本来のたまごっちの機能以外にも、スケジュール、メモ帳、フォトスタンドなどさまざまな機能を備えています。キャラクターを楽しめるだけでなく、幅広い層の方々が利用できる便利なツールでもある。いわば、エンターテイメントアイテムとなっています。
図1 「たまごっちガジェット」の各種機能
Edge:ガジェットを実現するテクノロジーとしてAdobe AIRを採用された理由を教えてください。久保:Adobe AIRを採用した理由の中で大きかったのは、Flashアニメーションの活用が容易だったことです。弊社のキャラクターの中で、たまごっちはFlashアニメーションで映像を作ることのできる数少ないキャラクターです。バンダイのホームページでは、こうしたキャラクターを使ったオープニングアニメーションをシーズンごとに公開しています。
図2 バンダイのホームページのオープニングアニメーション
これらのFlashアニメーションの表現を、ガジェットにも活用したいと考えていました。それを実現できるテクノロジーとなると、Adobe AIRは他のテクノロジーに比べて抜きん出ていました。市場に出ているキャラクター系ガジェットは、ドット絵アニメーションや3Dモデルが主流で、それではたまっごちキャラクターの表現に難しさを感じていました。
従来のガジェット開発では、「アニメーター/クリエイターがFlashアニメーションを作って、プログラマーがそれをそのまま手を加えずにガジェットに取り込むことができる」
この一見簡単そうなことが難しい状況でした。それがAdobe AIRでは簡単に移植でき、再現性や信用性、生産性が非常に高く、キャラクター表現が非常にやりやすいことが大きな利点でした。また、運用コストがかからないことも大きなポイントでした。ライセンス費用などのコストがかからない分、アニメーションの種類やアクションの数を増やすことにコストを割け、結果として良いモノに仕上がったと思います。おかげさまで、たまごっちは多くの方に愛されるキャラクターとなっています。こうしたキャラクターのプロモーションを実施するためのプラットフォームを選ぶ際は、「リリースして数ヵ月で終わってしまうようなものではなく、長くご提供し続けられるもの・今後の拡張性がもてるもの」ということが大きな条件となります。ガジェットは、これから数年間、PC上でのプロモーションツールとして、飛躍的に伸びてくるものだと思っています。今後は、PC上で長く利用していただくために、話題性のあるデザインやアクションを加えていき、それぞれの目的に合わせたツールの充実を図っていこうと考えています。また、たまごっち自体の面白さ、キャラクターの魅力などの新しい発見をお客様に伝えて、たまごっちのファンになっていただくことを、たまごっちガジェットの目標にしたいと考えています。
Edge:ユーザからの反応はいかがでしょうか
久保:キャラクターの特性を生かして、従来のガジェットよりも受け入れていただきやすいもののようです。分析結果からも、継続利用をしていただいているようでして、「お邪魔にならないための縮小機能」を入れておいてよかったなと思っております。
Edge:今後、たまごっちのプロモーションをいろいろと予定されていると思いますが、それに連動してガジェットも活用されていくのでしょうか
久保:たまごっち自体のプロモーションとしては、いろいろと予定しています。たとえば、日本マクドナルドとのタイアップとして、11月7日より、たまごっちとしては初のマクドナルドハッピーセットが展開されます。
日本では初の試みとして、セットの付録としておもちゃ以外にオリジナルアニメ等を収録した DVDも配布します(11月8日、9日の2日間のみ)
たまごっち うちゅーいちハッピーな物語
」では映像内にマクドナルド店が登場します。更に11月27日発売予定の任天堂DSソフト「たまごっちのキラキラおみせっち」でも、たまごっち達がマクドナルド店で働くゲームを盛り込んでいます。また、11月22日にはカラー液晶になったたまごっち「たまごっちプラスカラー」が発売となります。「たまごっちプラスカラー」の液晶画面には、EXILEのメンバー7人やEXILEのオリジナルキャラクターが登場します。他にも映画を中心に様々なタイアップを組んでいます。キャラクターを旬な物として、みなさんにいつも新しい感動を提供するためには、このようにタイアップや流行っているものを取り込むことが重要だと思っています。こうした動きに合わせてガジェットも活用していく予定です。たとえば、たまごっちがタイアップする企業やアーティスト、番組などの情報をガジェットのスキンとして配布したり、ネット上で流行っているYouTube映像を配信したり、視覚的にも飽きさせない工夫を続けていこうと考えています。実際、現在開発中の次期バージョンでは、ガジェット内の「TVコーナー」でネット業界でもっとも話題となっている映像コンテンツを楽しむことができるメディアチャンネルを実装する予定です。Edge:たまごっちガジェットは単なるプロモーションツールの1つというよりは、いろいろなプロモーションと連動しながらたまごっち同様に成長し、ユーザを楽しませてくれる。
いろいろな可能性をもったプロモーションツールですね
久保:どこまでメディア連携をできるかわからないのですが、実現の可能性がありそうな企画に関しては、それを実現させるための機能をあらかじめガジェットに盛り込んでいます。タイアップなどが決まれば、すぐにでも実施可能な機能をいくつか仕込んでいますので、今後も、より効果的なプロモーション施策が打てればと考えています。0を使って開発でき、Webや外部データベースとの連携が容易に取れるので、面白い企画が結構実現できそうです。タイアップ先のメリット・自社サイトのメリットが大きく引き出せるような、今までにない取り組みができると思います。2004年より現セクションにて、映画の立ち上げや自社・グループ・ライセンス商品など、「たまごっち」全体の総合プロデュースを行なっている。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
バージョン判別について
成長していくAIRアプリ
「たまごっちガジェット」
注目のサイト
56年という非常に長い歴史を持つ全日本剣道選手権のサイト
随時応募受付中です。
自己流よりも効率的に作業をこなすワザを習得
クオリティの高いページレイアウトならお手のもの
面白法人カヤックが語る制作会社のお仕事と
0を一から学べる講座
0をハンズオンで学ぼう
ビジネスフローを変える。
0からのステップ~
0アドバンスコースが新登場
CSS レイアウト(XHTML+CSS)について、これから取り組みたい方や、改めてじっくり学びたい方のための集中セミナーです。
詳細は こちら
0 の基本講座です。携帯電話向け Flash(Flash Lite)の基本的な違い、作成するコンテンツによってのバージョンの考え方やバージョンによる違いを分かりやすく解説します。※1日6時間のカリキュラムです。
詳細は こちら
自己流よりも効率的に作業をこなすワザを習得
本講座は、Illustrator を初めて使用する方が、基本的な制作技術を習得できる、初心者向けのトレーニングコースです。何事も基本が肝心です。自己流では理解するのに時間のかかる内容を、短期間でご紹介するためすぐに実務に生かせます。
詳細は こちら
0 のもっとも基本となる必須事項を中心に学習していきます。独学では理解しにくい部分を一緒に学習していくことで効率よく学習が進み、その後の学習の進み具合も大きく変わるはずです。0 の基本を習得した方を対象(本講座前半を受講相当)に、オブジェクト指向プログラミングの基本的な考え方を学習していきます。独立性の高い機能をカスタムオブジェクトとしてまとめることで、管理しやすいプログラムを作ることができます。※お好きな1講座からお申し込み頂けます。※1日6時間のカリキュラムです。
詳細は こちら
クオリティの高いページレイアウトならお手のもの
InDesign をこれからスタートしたい方、効率よく複数ページのキュメントを管理・制作したい方、ドキュメントのデザインを向上させたい方にオススメのトレーニングコースです。
詳細は こちら
面白法人カヤックが語る制作会社のお仕事と Adobe AIR 最新事例と制作実演
Flash の学校 ロクナナワークショップによる、クリエイター向けセミナーイベントです。話題のクリエイティブ集団 面白法人カヤック より、ディレクター 鈴木啓央氏と Flash Developer 瀬尾浩二郎氏をお迎えし、普段見ることのできない制作現場において、どのように Flash や AIR のコンテンツが企画・開発されているか実演を交えながらご紹介いただきます。国内外の広告賞を受賞した作品から、Flash や AIR を活用したサイトやサービス/プロダクトをディレクター目線、Flash Developer 目線とともに開発プロセスを含めながら制作の裏までたっぷり語っていただきます。オーガナイザーは、ロクナナワークショップの講師であり Flash 関連の書籍も多数執筆されている大重美幸氏をお迎えします。
詳細は こちら
0 を一から学べる講座
0 はちょっととっつきにくいなあ
」という方のためのコースです。0 の違いや、クラスについての説明など、オブジェクト指向プログラミングを知らない方から始められます。0 では外部のライブラリを使うことが多くなりますので、ライブラリの使い方を紹介し、それを使った簡単なサンプルを作成してもらいます。
詳細は こちら
0 をハンズオンで学ぼう
0 を一人につきPC一台の実習環境で学ぶハンズオントレーニングです。
0 の基本と処理の組み立て方・考え方を解説
0 の基礎を終えた方を対象に、MovieClip インスタンスをインタラクティブにアニメーションさせるムービーを作成しながら、座標と座標空間の扱い、条件判定、配列や Object の操作などについて学びます。
詳細は こちら
ビジネスフローを変える。Adobe Acrobat 9 を利用することで、各種申請書類や社内外文書が、ビジネスの効率向上に貢献する「スーパー電子文章」に早変わりします。もし上記のような使い方しか知らない場合は、本講座をオススメします。
詳細は こちら
第5回、月刊インタラ塾は「広告営業力 - 風とバラッド/ワイデン+ケネディ編」と題して、「風とバラッド」の戸練直木氏と「ワイデン+ケネディトウキョウ」の松永有子氏のお二人がゲストです。大手広告代理店を離れ現在クリエイティブエージェンシーで営業として活動する二人に、激変する広告業界を広告営業の視点から語っていただきます。第6回、月刊インタラ塾はゲストに西田幸司氏(RAKU-GAKI)をお招きし、WEB サイトを制作していく上で、アートディレクターの役割について語っていただきます。
管理、制作、指示、落としどころ等、どこにも所属したことがないという西田氏独自のアートディレクションとはどういったものなのでしょうか
詳細は こちら
0 からのステップ~
0 をお使いの方にとって、少々なじみにくいと感じる方も多いと思います。
本講座では、3
0 初心者の方が最初に攻略すべきとも言える『オブジェクト指向プログラミングの仕組みと、カスタムクラス定義』『イベント処理』に重点を置いて習得します。
プログラムの概念や仕組みにも時間をかけてお伝えするので、これから AS3
0 を始めたいという方にぴったりの講座です。
詳細は こちら
0 でコンテンツを一緒に制作していく実習講座です。本講座では実際にゲームを作っていきます。ゲームコンテンツにはイベント処理、XML 読み込み、サウンド再生など、様々な要素を含んでいるため学習には最適です。また、本講座はオブジェクト指向で行います。0 になじめない人にはおすすめの講座です。※1日6時間のカリキュラムです。
詳細は こちら
0 アドバンスコースが新登場
0 の基本的なスクリプティングの知識をもった方を対象とした講座です。一人につきPC一台の実習環境で、3D風に回転するアニメーションのスクリプトを出発点に、クラスの定義やイベントの配信までデザイン(設計・構成)を学習していきます。三角関数や数学的な考え方、クラスの応用についても触れます。
詳細は こちら
キャラクタークリエイター タロアウトの仕事 〜Dior ゴルメットちゃん誕生秘話〜
Flash の学校 ロクナナワークショップによる、クリエイター向けセミナーイベントです。Dior (ディオール)の ゴルメットちゃん、日産自動車キューブのブログパーツ CUBOX などでも知られるクリエイター タロアウト氏によるトークセッションです。代表作 Dior ゴルメットちゃん誕生秘話を中心に、企画・提案からキャラクター制作、Web コンテンツの立ち上げ、Dior ブティックでの展開までたっぷり語っていただきます。
比類ないキャラクターを生み出す、その情熱と感性
見る者全てをそのキャラクターの世界へ引き込んでしまう力はどこにあるのか
タロアウト氏のキャラクタークリエイティブの秘密に迫ります。
詳細は こちら
デジタルハリウッド 東京本校(お茶の水)
詳細は こちら
CSS レイアウト(XHTML + CSS)について、これから取り組みたい方や、改めてじっくり学びたい方のための集中セミナーです。
詳細は こちら
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
1の特長を徹底紹介
モバイル対応だけじゃない。
1 の特長を徹底紹介
今月号の記事
モバイル対応だけじゃない。
1の特長を徹底紹介
第2回 画像検索_快適さを生むデータ管理と画像リスト管理
「これ見落としてませんか
第2回 外部swfファイルのシンボルを利用する。
「もっと使いこなしてみよう
第1回 まずはマイワークスペースの整備、そして作業開始
まさに、Adobe が目指すデジタルライフ像をあますことなく体験できるイベントでした。すでに話題となっているモバイル対応の他にも、生産性、高画質メディア配信、ブラウザとの統合においても魅力的な機能が満載です。1 では、スマートフォンやネットブックなど、幅広いモバイル機器をサポートしています。1 では、さまざまな新機能や機能強化が予定されており、それらは大まかに以下の4つのカテゴリに分けられます。
モバイル環境のサポート
生産性の向上
ブラウザ統合の強化
高画質メディア配信の強化
1 の新しい特長を紹介していきましょう
1 のパブリックベータ版が公開される予定です。Adobe TV(英語サイト)では、基調講演のほか、すべてのセッションのビデオが公開されています。
モバイル環境のサポート
モバイル環境に合わせたCPU&メモリマネージメント
スマートフォンなどのモバイル機器は、PC と比べると、CPU パワーやメモリ量が劣ります。そうしたモバイル機器でも SWF コンテンツを利用できるように、レンダリング、スクリプティング、メモリ消費、起動時間、バッテリーや CPU の最適化を行っています。
1(緑)で動作させた際のメモリ消費量の比較
4時間、アニメーションならば6
ローパワー時のアニメーションなら14
5時間も再生できました。なお、モバイル機器だけでなく、PC においても、メモリ消費や管理、起動時間、CPU 使用率、レンダリングやスクリプティングのパフォーマンスなどが向上しています。
モバイル機器搭載の仮想キーボードのサポート
1 では、物理的キーボードが検出されない場合、TextField クラスを使ってモバイル機器に搭載されている仮想キーボードを使うことができます。テキストフィールドの選択・非選択状態に合わせて、仮想キーボードの表示・非表示が自動的に切り替わります。テキストフィールドを選択すると、テキストフィールドはページ表示領域の中央に移動し、仮想キーボードで隠れてしまわないようにズームやスクロール処理が行われます。このようにスムーズかつ直感的にテキスト編集が可能となります。また、入力中に画面を回転させたり、電話がかかってきたり、他のシステムイベントが起きたりした場合でも、入力済みのテキスト情報は保持されます。テキストフィールドをタップすると、モバイル機器が搭載している仮想キーボードが表示されます。現時点で仮想キーボードを制御できるのは TextField クラスのみです。
マルチタッチとジェスチャー操作を検出
最新のハードウェアや OS では、マルチタッチやジェスチャー操作に対応したユーザインターフェイスを実装しています。複数のオブジェクトと同時にインタラクションしたり、つまみ/スクロール/回転/拡大縮小/二本指タップなどのジェスチャー操作を利用したりすることができます。
加速度センサーのサポート
このクラスを使えば、機器に内蔵された加速度センサーから XYZ 軸の加速度値を取得することができます。加速度入力装置を利用して、ユーザに新たな入力・操作手段を提供したり、画面の方向をコントロールしたりすることが可能です。なお、バッテリーの寿命を保つために、加速度更新頻度を指定することができます。
デバイス方向に合わせた画面方向切り替え(モバイル機器のみ)
加速度センサーのサポートの有無に関わらず、モバイル機器の中にはその方向によって画面表示が自動的に切り替わるものがあります(たとえば、ポートレイトモードとランドスケープモードの切り替え)
1 では、モバイル機器に内蔵されたアプリケーション(ブラウザなど)の挙動に同調して、SWF コンテンツもその画面方向変化に対応させることが可能です。画面表示モードの切り替えをイベントとして取得し、SWF コンテンツのレイアウトやフォーマットを変化させることができます。逆に、ボタンなどを用意し、画面表示の切り替えをユーザが制御できるようにすることもできます。
Movieのページを表示させたところ
デバイスの向きを変えると、ブラウザの向きも変わり、それに合わせてページ内のFlash Videoも向きが変わります。
モバイル向けに最適化された SWF 管理(モバイル機器のみ)
モバイル機器では、PC に比べると、CPU やメモリなどが限られています。1 では、モバイル特有の動作環境を考慮して、SWF のロードや再生を自動で最適化します。SWF 優先度/画面上での可視性/有効メモリ/CPU リソースを踏まえた上で、SWF コンテンツのインスタンスをロードしたり、待機させたりします。そうすることで、HTML ページ内にある各 SWF のローディングが完了せずとも、すぐにブラウジングができるようになります。待機となったインスタンスは、HTML ページのロードが完了してからロードされます。また、スクリーン外のインスタンスや不可視状態のインスタンスは、画面上に表示される状態となってからロードされます。さらに、画面から外れた SWF コンテンツは再生を一時停止し、電話やアラームなどの優先アプリケーションが起動した際には CPU/メモリ/バッテリーの消費を抑えるようになっています。
スリープモード時の最適化(モバイル機器のみ)
モバイル機器では消費電力を抑えるためにスリープモードがあります。1 では、スリープモードを検知でき、スリープモード時は CPU/バッテリーの消費を抑えるためにフレームレートを小さくして再生します。スリープモードが解除された際には、SWF に設定されたフレームレートに戻ります。なお、オーディオやビデオの再生時の場合は、この最適化は行われません。
グラフィックのハードウェアアクセラレーションのサポート(モバイル機器のみ)
スマートフォンなどのモバイル機器では、ソフトウェアレンダリングの代わりに、GPU ベースのベクターレンダリングを利用します。その結果、レンダリングパフォーマンスが向上し、より少ないパワーでも、表現力豊かなユーザ体験を提供することができます。1 では、3D エフェクト、ベクターグラフィック、色変換、アルファ、デバイスフォント/埋め込みフォント、Saffron(アンチエイリアスエンジン)、サーフェス描画のハードウェアアクセラレーションをサポートしています。
ビデオを再生したところ
フルスクリーン表示でも、コマ落ちすることなく、滑らかに再生しています。
ビデオのハードウェアデコードのサポート
1 では、最小限のマシン負荷でスムーズかつ高画質のビデオを配信するために、ハードウェアベースの H
264 ビデオデコードをサポートしています。ビデオのデコード作業を CPU からハードウェアへと移行することで、ビデオ再生のパフォーマンスが向上し、システムリソースの負担が減り、バッテリーの寿命も延ばすことができます。
フレームレートの調整(モバイル機器のみ)
1 では、SWF のフレームレートを監視し、必要に応じてフレームレートを下げることで、より大きな CPU パワーをレンダリングに割くようになっています。その結果、コンテンツのユーザビリティが向上し、CPU の利用率を抑えることができます。もし、フレームレートが閾値より下がった場合、Flash Player はフレームを飛ばして、所定のフレームレートに達するように調整します。
生産性の向上
予期せぬエラーを検出
新しく「グローバルエラーハンドラ」というハンドラが用意されます。
このハンドラを1つ記述するだけで、すべてのランタイムエラーを処理することが可能となります(try/catch文で検出するエラーは除く)
そのため、ユーザがコンテンツを再生・操作している際に、予期せぬランタイムエラーが生じた場合、オリジナルのエラーメッセージを表示させることができます。なお、グローバルエラーハンドラを記述した SWF をデバッグプレーヤで検証した場合、エラーポップアップは表示されません。
グローバル化のサポート
また、Flash Player が実行されている OS 側で現在選択されているロケールと関係なく、任意のタイミングで任意の国の通貨、小数点、時間の表記フォーマットに変換することもできます。これらの処理を行う上でロケール要件の知識は必要ありません。ロケール特有の情報や処理としては、「日付」「時間」「通貨」「数字フォーマット」「通貨や数字の解析」「テキストの並び替えや検索時の文字列比較」「大文字/小文字変換」などがあります。
ブラウザ統合の強化
ブラウザのプライバシーモード閲覧のサポート(デスクトップのみ)
1 では、ユーザがプライベートブラウジングモードで閲覧している場合、SWF や HTML コンテンツにおいても同様の仕様が適用されるようになっています。プライベートブラウジングモードに入る前にすでに存在していた Shared Object はそのまま保存されていますが、プライベートブラウジングモードが解除されない限り、その Shared Object にはアクセスできません。
メモリ不足の管理
1 では、SWF がインスタンスに対して有効なメモリ量以上にメモリを割り当てようとすると、そのインスタンスをシャットダウンして、メモリ不足によるブラウザクラッシュを回避するようになっています。その際、ユーザに対して SWF を再起動するように通知したり、すべてのインスタンスをシャットダウンしたりする必要がある場合は、ページをリフレッシュするように通知します。
高画質メディア配信の強化
コンテンツの保護(デスクトップのみ
1 上で安全に再生することが可能です。このコンテンツ保護機能は、ビデオオンデマンド、レンタル、電子販売などの幅広いビジネスモデルで利用でき、ダウンロード配信とストリーミング配信の両方において機能します。業界標準の暗号技術を使った堅牢な保護機能なので、改ざんやキャプチャ行為からコンテンツを守ることができます。また、Windows 環境では出力保護機能をサポートしており、コンテンツ提供者はアナログ出力やデジタル出力時の保護に関する条件を指定することができ、無許可の録画行為を防ぐことができます。なお、今回の Flash Player リリースバージョンでは、暗号化されたコンテンツに対してハードウェアアクセラレーションを利用することはできません。RTMFP プロトコルは「グループ」機能をサポートしており、アプリケーションのユーザをセグメント化し、グループのメンバー間だけでメッセージやデータを送信できます。アプリケーションレベルマルチキャストを使って、1対多や複対多での連続ライブストリーミング(ビデオやオーディオ)、RTMFP グループによるライブビデオチャットなどを実現することが可能です。1 を使えば、HTTP ストリーミングであっても、高画質かつ効率よく、さらに堅牢な保護機能のもとでメディアを配信することが可能です。HTTP ストリーミングというオープンフォーマットのソリューションを使えば、オンライン出版社は既存のネットワークを活用でき、さらにインフラのキャッシュ機能を利用して効率よくメディアを配信することができます。スマート再接続機能を使えば、RTMP ストリーミング中に接続が遮断されたとしても、バッファを使って再生を続けることができます。そのため、短時間のネットワーク障害にも耐えることができ、継続的なビデオ再生が可能となります。接続が回復すると、再生を再開します。また、ActionScript に再接続ロジックを追加して、サーバ接続を再構築したり、ビデオの映像を崩すことなくストリーミングを再開したりすることが可能です。スマートシーク機能とは、すでにバッファ済みの映像データに対してシークできるようにする機能です。これにより、シーク後の再生タイムラグを減らすことができ、サーバにアクセスすることなく簡単にビデオの巻き戻し/早送りをすることができるようになります。スマートシーク機能により、ストリーミング配信時のシークパフォーマンスが向上するだけでなく、スローモーション、倍速、簡易リプレイといった機能も作ることが可能です。
バッファ済みストリームのキャッチアップ機能
バッファ済みストリームのキャッチアップ機能を使えば、遅延時間の閾値を設定することができます。この閾値を超えると、ビデオ再生の速度を若干スピードアップし、ライブビデオストリーミングの再生状況がリアルタイムの再生状況と同期するようになります。5 には、ダイナミックストリーミング機能があります。1 ではその機能をさらに強化し、ビットレートを変更する際の時間が短縮されました。そのため、有効な回線幅や CPU 速度に応じて最適な閲覧環境がすぐに提供されるようになります。もはやユーザはバッファリングで待たされることはありません。ビットレート変換の速度の向上により、回線幅が変動するような状態でも、中断することなくビデオを再生することができます。
マイクアクセス機能(デスクトップのみ)
1 では、マイクから入力される波形のバイナリデータにアクセスすることができます。この機能を使えば、トランスコーディング用の録音、カラオケ、ボコーダのような音声操作、超音波解析、ピッチ検出など、新しいタイプのオーディオアプリケーションを構築することができます。1 のリリースに合わせて公開される予定です。
日本のユーザー向けの改善点
以下は、その一例です。
インライン入力のサポート
マルチスクリーン Web を考慮したデザイン、開発手法
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
ワンパクの「もっと使いこなしてみよう
第1回 まずはマイワークスペースの整備、そして作業開始
今月号の記事
モバイル対応だけじゃない。
1の特長を徹底紹介
第2回 画像検索_快適さを生むデータ管理と画像リスト管理
「これ見落としてませんか
第2回 外部swfファイルのシンボルを利用する。
「もっと使いこなしてみよう
第1回 まずはマイワークスペースの整備、そして作業開始
この連載では、株式会社ワンパクの近藤&杉山の師弟コンビが、Dreamweaver の覚えておきたい便利な機能や、見落としていた機能などをお届けします(一部、株式会社ワンパクでの実話に基づいています)
少しでもみなさんの作業効率アップのお手伝いができればうれしいです。また、「杉山のこれ知ってます。」コーナーでは、杉山のお気に入りの機能を紹介します。
第1回目は、まずはワークスペースが自分にとって快適な環境になるように整えましょう
そして制作作業を進めていく上で役立つ、「関連ファイルツールバー」と「コードナビゲータ」を覚えましょう
なにはともあれ作業環境の整備から
近藤:はじめまして
本連載を担当させていただきます株式会社ワンパクのテクニカルディレクターの近藤です。
杉山:はじめまして
師匠近藤のお手伝いをしながら Dreamweaver マスターをめざす株式会社ワンパクのデザイナーの杉山です。
師匠、では、まず何から始めましょうか
近藤:そうだな、まずは作業環境の整備から始めるぞ
Dreamweaver にはデフォルトで数種類のワークスペースのレイアウトが用意されているからそこから選んでもよいのだが、そのまま使用するだけでなく、自分好みにカスタマイズも可能なのだ。杉山:レイアウトと言えば、上下にしか配置できなかったコードビューとデザインビューですが、CS4 から配置パターンが増えたんですよね(^^)
メニューの [表示]-[左右に分割] からコードビューを左に、デザインビューを右に配置でき、その後 [表示]-[デザインビューを左に表示] から、ビューの左右を入れ替えられるぞ
コードビューとデザインビューは上下だけでなく左右の配置も可能
杉山:自分の使いやすいようにコードビュー・デザインビューの配置ができるのはうれしいですね(^^)
でも、私はデザインビューはあまり使わないのですが
「分割コード」なるものを発見しましたよ
近藤:メニューの[表示]-[分割コード]を選択すると、上下にコードビューを配置でき、その後[表示]-[左右に分割]から左右にコードビューを表示することも可能だぞ
杉山:コードビューの分割ができるのは、かなりうれしいですね
メニューからだけじゃなく、アプリケーションバーのレイアウトアイコンからも変更できちゃうんですね
コードビューを上下・左右に配置可能
お気に入りのレイアウトは保存すべし。
杉山:このパネルは右のモニタの右側に表示して、このパネルは左のモニタめいっぱいのサイズで表示して
このパネルはフロート表示にしておこう
近藤:毎回レイアウトの設定をしているのか
杉山:はい、案件によってなど、適宜使い勝手のよいレイアウトにカスタマイズすることが大事なんですよね
近藤:確かにそうだが、毎回となると時間の無駄だな
設定したレイアウトは保存して、いつでも切り替え可能にしておくのだ。保存しておけば、毎回手間をかけずにすんだの(>_<)近藤:メニューの [ウィンドウ]-[ワークスペースのレイアウト]-[新規ワークスペース] から、もしくはアプリケーションバーのワークスペースのレイアウト名から「新規ワークスペース」を選択し、任意の名前でカスタマイズしたワークスペースを保存することができるのだ。
カスタマイズしたレイアウトの保存が可能
杉山:本当だ。自分が保存したレイアウトが追加されました(^^)
近藤:保存したレイアウトの管理は、メニューの[ウィンドウ]-[ワークスペースのレイアウト]-[ワークスペースの管理]から「名前の変更」や「削除」が可能だぞ
保存したレイアウトは[ワークスペースの管理]から管理可能
複数ファイルを開くなんてナンセンス「関連ファイルツールバー」
近藤:それでは作業環境が整ったところで、さっそく作業を始めてもらおう
近藤:ちょっと待て。せっかく Dreamweaver を使うんならいくつものファイルを開いて編集なんてことはせずに「関連ファイルツールバー」を活用するのだ。近藤:デザインビュー、もしくはコードビューの上部を見てみるのだ。杉山:なにかファイル名が表示されています。赤枠部分にファイル名が表示される。近藤:それが「関連ファイルツールバー」だ。ここには現在のファイルに関連する各種ファイルが表示されている。そして編集したいファイルをクリックすると、すぐにそのファイルにアクセス可能だ。
杉山:これは便利
よくどのファイルを編集しなきゃいけないのかコードビューを調べたり、どのフォルダに格納されているか探したりしてたのですが、これなら手間いらず。
さっき教えてもらった分割コードと併用すれば、HTML を表示しつつ関連ファイルから CSS を開いて修正なんてこともできるんですね
編集したい場所にすぐにアクセス「コードナビゲータ」
「関連ファイルツールバー」は編集するファイルがすぐに開けて便利ですが、編集する箇所を探すのが大変です(><)
近藤:なるほど
自分以外が制作したファイルを編集する場合などにありがちな話だ。そんな時は「コードナビゲータ」を有効活用だ。ページ内の任意の場所でデザインビューやコードビューにマウスオーバしてみるのだ。
杉山:なにか舵のようなアイコンがでましたよ
近藤:「コードナビゲータインジケータ」が表示されたのだ。
クリックしてみよう
杉山:あ、セレクタの一覧が表示されました。
セレクタの一覧
近藤:そこで修正や確認をしたいセレクタをクリックすれば対象箇所のCSSのコードにすぐにアクセスできるぞ
杉山:これなら修正や更新のときなど作業が早くなりますね(^^)近藤:「コードナビゲータ」はCSSファイルはもちろん、JavaScript、テンプレートファイルやライブラリ、インクルードファイルにも、瞬時に対象箇所にアクセス可能だ。杉山の「これ知ってます。
"結果"ウィンドウの活用」
作って終わりではなく、しっかりチェックすることを習慣化しましょう
「結果」ウィンドウの「サイトレポート」タブを選択
「レポート」ボタンをクリック
「レポート」ウィンドウが開くのでチェックしたい項目を選択
左下の「レポート設定」ボタンから詳細項目の設定が行えるので、各サイトにあった設定も可能
杉山由起子(すぎやまゆきこ)
いくつかの制作会社に在籍した後、1PAC
師匠近藤のもと、主にマークアップを担当しつつ、デザインもこなせるようになろうと日々七転八倒中
近藤将範(こんどうまさのり)
の設立に参画する。主にテクニカルディレクターとしてコーポレートサイト等の設計・制作に携わる。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
モバイル対応だけじゃない。
1の特長を徹底紹介
第2回 画像検索_快適さを生むデータ管理と画像リスト管理
「これ見落としてませんか
第2回 外部swfファイルのシンボルを利用する。
「もっと使いこなしてみよう
第1回 まずはマイワークスペースの整備、そして作業開始
ブラウザの更新に備えたアクティブコンテンツ使用Webサイトの準備
0書き方教室
1週間で学ぶ Flex は、Flex の製品ページやヘルプ等のトップページからもリンクされています。現在は3日目まで日本語訳されており、セミナーを受けている感覚で見ていただけると思います。4日目以降はまだ英語のみの掲載ですが、とてもいい内容ですので、ぜひご覧ください。続く2位~5位の記事は、よく上位にランクインしているものです。次点には、将来を見据えた、新たなHTML内SWF埋め込み用コードの考察がありました。やはり、他からは入手しにくい実践的な基本情報が多く方々に支持されていることを強く感じます。
有益な情報を提供することを大前提に、仕様などの基本情報を盛り込みながら、ADC では中級者や上級者向けの記事も充実させていきたいですね
大重美幸の「これ見落としてませんか
大重氏の記事が第1位となりました。
ActionScript 初級者の方だけでなく、中・上級者の方も読んでいただけたのではないでしょうか
もちろん今月は、第2回 外部 swf ファイルのシンボルを利用する を掲載しております。サンプルファイルもありますので、ご活用ください。受賞作品を、審査員のコメントも交えながらご紹介しています。バスキュール×TGC 記事では、新たなビジネスモデルをご紹介しました。PC や携帯の枠をこえて、その場の大勢と共有できる楽しみは大きな魅力です。
ガールズパワーに圧倒された本瀬氏ですが、憧れに秘められた力はとても大きいですね
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
モバイル対応だけじゃない。
1の特長を徹底紹介
第2回 画像検索_快適さを生むデータ管理と画像リスト管理
「これ見落としてませんか
第2回 外部swfファイルのシンボルを利用する。
「もっと使いこなしてみよう
第1回 まずはマイワークスペースの整備、そして作業開始
0新機能を一足早くご紹介
「イメージソース開発チーム・実装最前線からの叫び」
Flexによるリッチクライアントアプリケーションの開発
0をはじめるにはこちら
0で学ぶ座標と3次元空間の数学講座」
小林茂に学ぶFIOモジュール入門ワークショップ
この度、"クラウドの環境とサービスがもたらす新しいユーザーエクスペリエンス"を主テーマに据えたイベント、『DESIGN IT
「クラウド」環境を活かした新しいユーザーエクスペリエンス、UI 設計のための方法論などについて、ユーザビリティ、インタラクション、情報アーキテクチャ、デザインマネジメント、コンテンツマネジメントの視点から多角的にご紹介します。
・企業・行政の IT 部門の担当者、マネジメント層
・クラウドを利用したサービスやコスト削減を検討している一般企業
・最新技術を知りたい開発担当者
※10月中のお申込みの場合、早期割引(10%引き)が適用されます。
詳細は こちら
0新機能を一足早くご紹介
0(2010年上半期にリリース予定)の新機能を中心に紹介していきます。
「イメージソース開発チーム・実装最前線からの叫び」
第15回月刊インタラ塾は、次々と高いクオリティの制作物を世に送り出している株式会社イメージソースの開発チーム全スタッフ総勢10人による1人5分間のセッションバトルです。
ウェブデザインの黎明期から常に第一線で「新しいもの」を創りだしてきたイメージソース
今回は現場の「今」を形づくっているデザインエンジニアの方々にスポットを当て、実装最前線からの生の声を多面的に語って頂きます。最前線の現場だからこそ生まれる喜びの声や苦しみの声、愚痴に至るまで、生の声をお聞き頂き、ものづくりのヒントをお持ち帰り頂く良い機会になると考えています。是非、会場までお越しください。
詳細は こちら
Flex によるリッチクライアントアプリケーションの開発
本トレーニングは、Adobe Flex 3 によるリッチインターネットアプリケーション開発にあたり、知っておくべき基礎事項が凝縮されている重要なカリキュラムです。そのため、Adobe Flex 3 のトレーニングコースフローにおいて、一番最初に受講することが推奨されています。これから Adobe Flex 3 でリッチインターネットアプリケーション開発を行う方に最適な入門講座です。
詳細は こちら
0 でクラス定義を習得している方を対象に、Progression の基本的な考え方と実装方法などフレームワークの基礎を学習します。中級講座では、すでに Progression を使用されている方を対象に、CMS との連携など制作現場で役に立つ実践的な活用方法を学習します。※現在、期間限定2講座受講で10,000円キャッシュバックキャンペーン実施中です。
詳細は こちら
サーバとデータ通信に関する必須知識を習得
詳細は こちら
技術者不要、デザインや依頼仕様で実現する表示 速度改善についてワークショップ形式で取り組みます。
詳細は こちら
0 をはじめるにはこちら
0 の基本とプログラミングの考え方を2日間で学べる、初心者向けの基本講座です。0 はもちろんのこと、「プログラミングもスクリプトも、まったく経験がない。
詳細は こちら
2回目の広島版
「地方での今後の Web 制作ビジネスについて改めて考えてみよう」をテーマに開催
3つのセッションと4つのライトニングトークで構成
詳細は こちら
0 で学ぶ座標と3次元空間の数学講座」
0 を一人につき PC 一台の実習環境で学ぶハンズオントレーニングです。0 プロフェッショナルガイド」(マイコミ)をテキストとして、著者である野中文雄氏が直接指導にあたります。本講座は、アニメーションを扱う上で重要な座標空間に関わる、数学の基礎を学習します。スクリプティングよりも、数学的な説明が中心です。0 を使い、イベントリスナーの扱いを理解していることが前提となります。数学の知識については、高校文系程度とします。※セット申込での割引あります。
詳細は こちら
カスケーティングスタイルシートで Web サイトを自由にデザイン
CSS レイアウトに必要な知識とテクニックが、2日間のハンズオン(PC を使用しての実習)で身につきます。さらに、各種ブラウザーでの見え方の違いや、Web 標準化などの話題もご紹介します。
詳細は こちら
4回目の福井版
詳細は こちら
※終了後15:30まで同会場にて懇親会(無料・自由参加)あり
詳細は こちら
※終了後20:45まで同会場にて懇親会(無料・自由参加)あり
詳細は こちら
小林茂に学ぶ FIO モジュール入門ワークショップ
IAMAS(岐阜県立国際情報科学芸術アカデミー)准教授、Gainer(ゲイナー)および Funnel(ファンネル)開発チームの中心メンバーである小林茂氏を講師にお迎えし、FIO(フィオ)モジュールの入門ワークショップを開催します。本ワークショップでは、ご自身のノート PC をお持ち込みいただき、ロクナナワークショップ限定 FIOモジュールキットを1人1セットお配りし、実際に FIO のセットアップ方法と基本操作から、Funnel ライブラリと無線通信を使ったプロトタイプ制作までを行います。0 を使用します。
詳細は こちら
「Web 制作のワークフローを考える」をテーマに四国は高松にて初開催
e-とぴあかがわ
詳細は こちら
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。モバイル対応だけじゃない。
1 の特長を徹底紹介
すでに話題となっているモバイル対応の他にも、生産性、高画質メディア配信、ブラウザとの統合においても魅力的な機能が満載です。
三角形分割によるテクスチャマッピング
マルチスクリーン Web を考慮したデザイン、開発手法
Flash Platform の動向や新しいクリエイティブの刺激を受けたい方に体感いただきたいイベントです。
残席僅かですので、お申し込みはお早目に
特集記事「機動戦士ガンダムの名場面をリアルに見せる方法」を紹介
ガンダムのプラモデルを撮影、Photoshopで写真画像などと合成・レタッチし、本物のガンダムの世界観などをリアルに表現
唯一日本語対応しているグローバルサインなら購入手続きも簡単
現在開発中の Flash Catalyst の最新ビルドを使い、アドビの開発チームにフィードバックを送るプレリリースプログラム(日本語)に参加しませんか
お申し込みはこちらからどうぞ
(メールに氏名、氏名(ローマ字)、会社名をご記載ください。
第2回 画像検索_快適さを生むデータ管理と画像リスト管理
NAVER JAPANの画像検索では、ノンリフレッシュで検索結果を閲覧でき、しかもユーザーがウインドウをリサイズしたり、サムネイルサイズを変更したりすると表示内容がダイナミックに変化します。このような高負荷が予想されるサービス内容ながら、快適な体験を生み出すコツはデータ管理と画像リスト管理にあります。
大重美幸の「これ見落としてませんか
第2回 外部swfファイルのシンボルを利用する。今回のテーマは、「外部swfファイルの活用」です。
みなさん、外部swfファイルをムービーに読み込む方法は知っているでしょう
では、外部swfファイルのシンボルにアクセスする方法となると、どうでしょう
外部swfファイルのライブラリにあるムービークリップシンボルやフォントシンボルを利用できますか
ワンパクの「もっと使いこなしてみよう
第1回 まずはマイワークスペースの整備、そして作業開始
Dreamweaverの覚えておきたい便利な機能や、見落としていた機能などを、チャット形式で取り上げていきます。第1回目は、ワークスペースを快適な環境に整える機能、そして制作作業を進めていく上で役立つ機能を紹介します。
お客様よりお寄せいただくご質問や弊社で確認している製品の不具合情報を掲載
晩秋に予定されている最新セミナー情報を一挙公開
あなたにピッタリの講座が、きっと見つかります。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
あなたはどのバージョンのFlashに出会いましたか
そのとき、どんなサイトが流行っていましたか
日本語版に先駆けて、先頃公開された英語版をお楽しみください。
審査員からクリエイターへの
サウンド・コミュニケーションという潮流
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
Flashの新しいトレンド サウンド・コミュニケーションという潮流
デザイン会 社勤務を経てフリーランスとなり、2000 年にトゴル・ カンパニーをパートナーと共に設立
" 私にとってFlash は、人生のターニングポイントになった。といっても過言ではありません。最初のバージョンからです。カニの絵のパッケージに「FLASH」と ステッカーが貼られていたものです。もう10 年くらい経ちますが、当時わたしはソフトバンク系のパソコン雑誌付録CD-ROM に収録するアニメーション制作の仕事をしていました。もともと3D アニメーションを作っていたのですが、 2Dアニメーションを作れるソフトもいくつかあり結構がんばりました。
でも、とにかく作りにくかったんですね
一番最初に作ったアニメーションは、擬人化したMac がペンでMac を描いて、 その描いたMac 君同士で手をつないで走り去り、「MacUser」というロゴが出る、というものでした。シンボルとか、そんな機能はまったく知らず、ただタイムラインの概念が従来の3D ソフトと同じだったので、とにかくステージに描いてAVI 形式に書き出し、 Premiereで編集して音をつけ、納品しました。」と知りました。これがきっかけです。
今まで、どのようなFlash 作品を手がけられましたか
先に述べた CD-ROM 収録アニメーションを作った後、おそらく世界で初めてインターネットという媒体で Flash を使った連載企画が、インプレスの 「PC Watch」 で採用され話題になりました。
最初は編集部員をキャラクター にして、面白おかしく紹介するというたわいのないものでしたが、Flash Ver
2 が出てからは音がつけられるよう になり、「インタラクティブで音も出てデータサイズが小さい」といった体験そのものが、エンドユーザにとって とても新鮮に映った時代だったように思います。これは Flash で作り、GIF アニメーションで書き出して納品するスタイルをとっていました。10年前ということもあり、1ファイルにつき50KB以下という制限があったのです。実は 「編集後記GIFあに」は現在も継続しています。Flash 3 で制作したもので、トゴル・カンパニーとして応募しました。最近のものでは、「ハバネロ」などのクラシック音楽をテーマにしたヤマハ音楽振興会さんのコンテンツ 「Classic Toy」 を作らせていただきました。音楽にあったアニメーションや、作曲家に関するお勉強コーナーやオマケコンテンツなど盛りだくさんで、好評をいただいています。あなたのFlash 作品のうち、お気に入りの作品を教えてください。携帯電話でも PDA でも動きます。小さなおもちゃのような愛らしい作品です。オーサリングは弊社トゴル・カンパニーの代表の NORI が手がけています。私自身、Flash そのものからは現在は離れておりまして、イラストレーションが仕事のメインになっているため、 長編アニメが作りたいとか、凝ったギミックの作品を作りたいといった積極的な欲求も、また技量もありません。ただ、インターネットの回線が昔に比べて非常にタフになり、ビットマップを読み込むことにさほど抵抗がなくな ったことが、とても嬉しいのです。私のイラストレーションの世界を、もっと多角的にプレゼンテーションできる ようなコンテンツをNORI にオーサリングしてもらって作れたらいいなぁ、と秘かに考えています。「これは実現できる。」と尋ねたもので、実現しなかったものは殆どありません。私自身が、そういった恵まれた 環境にいるので、技術的な部分までもトータルで考えてFlash コンテンツを作るのではなく、作品性を突き詰める ことに専念できました。そういう意味で「Flash から少し距離を置いている」ということです。「楽しいもの」であるべきだと思います。お気に入りのFlash 機能を教えてください。シンボルです。
シンボルを使わずに全フレームを描いた 「MacUser」での処女作の制作を考えると、この機能 のおかげでどれだけ助けられたことか
また、ビットマップを PNG で表示できるのは、イラストレ ーターとしてとても嬉しい機能です。
あなたのクリエイティビティーを触発させるモノ、ヒト、環境は
本がきちんと読める環境、何もしない時間を設けられるムード、音楽が聴けるワーキングルーム、表現について深 く語り合えるパートナー、そして猫たちです。どんなチープなものでもいいので、まずは1 つ作品を仕上げて達成感を味わうのが良いと思います。昔と違って機 能が多くなったFlash は、最初はちょっととっつきにくいかと思いますが、すべての機能を網羅しなくても作品は作れますし、作品を作り上げる感動はFlash をマスターするための一番の先生だと思います。人生のターニングポイントになった。といっても過言ではありません。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
Flashの新しいトレンド サウンド・コミュニケーションという潮流
Webメディアを中心としたインタラクションデザイン、インタフェイスデザインの分野で制作活動を継続中
今まで、どのようなFlash 作品を手がけられましたか
あなたのFlash 作品のうち、お気に入りの作品を教えてください。お気に入りのFlash 機能を教えてください。
なんといっても一番のFlashのオリジナリティなので
あと、アルファ
透明だと綺麗だから
あなたのクリエイティビティーを触発させるモノ、ヒト、環境は
こまめにSAVEしておくこと
(あとで泣いても知らないよ
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
Flashの新しいトレンド サウンド・コミュニケーションという潮流
ソフトウェア・アーキテクトとして、直感的な操作性を特長とする独自の発想のソフトウェアを創出
" Flashくん、もういっぱしの大人になったわけだけど、嫌な大人にはくれぐれもならないでくれよ
もう10年になるんですね
それなので、誕生直後からずっと見守ってきたことになります。
今でも大事に当時のパッケージを会社の棚に飾ってあって「これ何ですか
」と聞かれることが多く、その度に「これはねぇ実は
」と昔話をしています。当時は、国内ではまだ誰も知らなかったような時期なので、自力でネットサーフィンして見つけました。最初のうちは「珍しい技術」という点が先行していて、サンプルやWebの事例を見ても、デザイン的に優れたものがなかったことを思い出します。そんな中で「センス次第でいくらでも素晴らしいWebが作れる」という点と、「ナビゲーションが作れる」という点で、Flashは他のインターネットプラグインのように淘汰されることはないだろうし、なくなって欲しくないと思いました。だから、「開発者にセンスのいいものがつくれるってことを教えてあげたいな」って言いながら、仲間といじくり倒したのが使い始めたきっかけです。
今まで、どのようなFlash 作品を手がけられましたか
Flashというと、カチッカチとしていたり、カクカクしていたり、あるいはアメリカやヨーロッパのいわゆるユルキャラっぽいアニメーションみたいなものが多かったので、他のFlashサイトにはない、まったく違う方向を見いだせて嬉しかったですし、自分にとって思い出深い作品です。「motion dive」では、リアルタイムでタイポグラフィーを生成して映像と合成するというエンジン部分にFlashを利用しました。こういう使い方はこのソフトが初めてだったと思います。こうした「デザイナーがプログラミングまでできる」という点は、Flash以外では実現できない技です。あなたのFlash 作品のうち、お気に入りの作品を教えてください。すでにこの頃には「Flash」という言葉がメジャーになりました。そうなると、素朴に「みんなFlashサイトつくりたいだろうなぁ」と思ったんです。なのに、相変わらず技術的なハードルが高い。だったら、Flashがなくてもすごく素敵なFlashサイトが誰でもできちゃうようにしちゃえ。Flashを使いたいけど使えない人たちにFlashの魅力を伝える、Flashと触れてもらえるのが、このソフトだと僕は思っています。実際、このアイディーというソフトでコンテストをやったんですが、ああ、サイトって技術じゃなくて内容なんだなぁ、と当たり前のことを実感しました。このソフトをきっかけに本格的にFlashの勉強をはじめた人も多く、それが願いでもあったので、そういう話はすごく嬉しいです。僕がこれからのFlashでやりたいことというのは、アプリケーションの分野です。低コストですごくデザイン性が高く、そして使いやすいいろいろなツールを作れるようになると思います。今の時代、デスクトップというのは毎日何時間も「滞在」する場所です。だから少なくともデスクトップにいる時間が、今のような世界で良いわけないと僕はすごく思ってます。
使いにくいソフト、人に優しくないOS、訳の分からないウィザードとか、はっきり言って「暮らしにくい」
でもデスクトップの世界の建築物としてのソフトウェアを個人レベルで開発できるようになれば、きっとすごくナイスなヤツやグループが、「個人の発想」とか「きめ細やかな心遣い」をもった素敵なソフトを作るかもしれない。僕もそういうヤツになりたくてがんばってるんですけど、Flashは本当にそういう「ガレージソフト」みたいなものを誕生させる可能性に満ちていると思います。