ITライフハック

Flash

iPhoneでFlashコンテンツを表示!グリー、開発者向けにiOS向けの技術を提供



iPhoneやiPadは、インターネットを手軽に見られる端末だが、これまで、Flashで制作されたコンテンツはiOS端末上で再生できず、その移植にはHTML5で作り直す手間と時間がかかっていた。そうした状況に対して、グリーが新たな展開を明らかにした。同社は2011年7月11日、FlashコンテンツをiOS端末上で表示させる自社開発の技術を、開発パートナー向けに順次提供していくことを明らかにした。

続きを読む

一番やさしい教材「ロクナナワークショップトレーニングビデオ」を発売



パソコンだけでなく、iPhoneやAndroidの普及によりインターネットユーザーが急増している。それに伴い、今もっとも旬な職種ともいえるのがWebデザイナーだろう。Webデザイナーは、学生だけでなく、20代後半の社会人の転職にも人気が高いそうだ。そんな、Webデザイナーを目指すなら、まず押さえておくべきツールが「Adobe Photoshop」だ。同ソフトを使うと、Webサイトを思うがままにデザインすることができる。

とはいえ、あまりにも多機能なソフトのため、初心者には学習の敷居が高く、取っつきにくいのも事実だ。そんなPhotoshopを学び始める人に向けた教材があるのをご存じだろうか。

一番やさしい教材と言われている「ロクナナワークショップトレーニングビデオ」だ。Photoshopの他にも、Webデザイナーには人気の高いアプリケーション Adobe Flashの教材も発売されていたので、ここで合わせて紹介しよう。

続きを読む

2011年はWeb名刺が流行る!?【プロに学ぶ67WS通信】

「Android元年」「タブレット元年」「電子書籍元年」など、2010年は元年がいっぱいの一年でしたね。期待を胸に、今年はどんな技術が生まれてくるのでしょうか!?

記事の最後にお年玉プレゼントをご用意しています。是非最後までみてください。

さて、みなさんはいくつのSNS(ソーシャル・ネットワーキング・サービス)をご利用ですか?
ソーシャル・ネットワーキング・サービス アイコン

Twitter、Facebook、Flickr、Bloggerなどなど、挙げていくとキリがないほどに、毎年さまざまなサービスが立ち上がっていきます。どれも便利で楽しいものばかりですよね。

2010年は前年に続いてTwitterとFacebookの爆発的な成長や、スマートフォン市場の拡大によってAR(拡張現実)や位置情報系サービスも大きく進化した年となりました。よりリアルタイムで、より現実味のあるものに世界中の関心が集まっているようです。

そんな2010年でしたが、今年はどんなサービスが注目されるのか!?今日はここ1、2年で密かに進化しつつある「自己紹介サービス」の一部をご紹介しようと思います。

続きを読む

Android旋風!魅力的なガラパゴス機能 VS 高い更新性【プロに学ぶ67WS通信】



こんにちは。ロクナナワークショップの佐々木です。
先日行われたドコモの新製品発表会を終えて、各キャリアの冬春製品が出揃いました。

前回と比べて大きく違う部分はやはりスマートフォン、特にAndroidのラインナップでしょうか。それまでAndroidスマートフォンは各キャリアに1~3種類しかありませんでしたが、今回の冬春モデルでauから4機種、ドコモから5機種、ソフトバンクから6機種が新しく発表され、各社のAndroidに対する本気の度合いが伺えます。

続きを読む

アプリをFlashで手軽に開発!「AIR for Android」実習講座

Android OS 2.2搭載のデバイスが続々と登場している昨今、ActionScriptディベ ロッパーによるAndroid向けコンテンツ開発はいよいよこれからが本番だ。

ロクナナ ワークショップは、東京・新宿の会場で 「古堅真彦のAIR for Androidインタラクティブデザイン」を2010年10月24日より開催する。

続きを読む

ネットに恩返しを!書籍、講座、アプリ開発に今もっともアクティブなクリエイター【注目クリエイター列伝】



クリエイター列伝 今回は、現在27歳ながらFlash デベロッパーでもあり、テクニカルライターとしてもアクティブに活躍中の池田泰延氏だ。

続きを読む

映画はDVDからストリーミングへ!動画投稿サイトの動向を探る【プロに学ぶ67WS通信】

こんにちは。ロクナナワークショップの佐々木です。
みなさんはYouTubeで映画が配信されていることをご存知ですか?しかもそれは最初から最後まで、無料で観ることができるのです!
YouTubeサイト

夜中にふと思い立って映画をレンタルに出かけたりしますが、Webサイトで検索するだけで、見たい映画が無料で見れちゃうなんて素晴らしいですよね。今日は、最近の動画投稿サイトの動向を探ってみました。

続きを読む

知らないと損する?体内時計とモバイルコンテンツの意外な関係【プロに学ぶ67WS通信】

こんにちは。ロクナナワークショップの佐々木です。
皆さんは、自転車でころんだことありますか?私は今でも時々ころびまずが(笑)、その瞬間は周りがスローモーションになるんです。これは実際の時間よりも頭の中の処理速度が上がっているため、相対的に周りが遅く見えているのだそうです。

一つのことに集中して作業していると、ファイル保存などのちょっとした待ち時間が長く感じられます。反対に、なにか他の作業をしながらだと、待ち時間はあまり気になりません。

1度経験したことは、2度目の経験では時間が長く感じられます。新しい刺激が少なくなるため、同じことを繰り返すと先が読める分退屈に感じます。

そう、体感時間は実際の時間の進み方よりも早くなったり、遅くなったりするのです。

続きを読む

iPhoneやAndroid端末のWebアプリを作ろう!無料フレームワーク「Sencha Touch」【プロに学ぶ67WS通信】

こんにちは、ロクナナワークショップの佐々木です。

iPadや、iPhone・Androidなどの端末の進出により、様々な環境への対応が求められるアプリケーション開発。ロクナナの制作チームも、いろいろなプラットフォームに向けたアプリケーション開発には苦労しています……。

そんななか、最近気になっているのは、ユーザーインターフェイス部分をWebブラウザに実装してしまうというWebアプリケーション。開発の容易さや、iPhone以外のプラットフォームでの動作などは、ネイティブアプリケーションよりWebアプリケーションの方がメリットも大きいようです。

そこで今日は、Webアプリケーション開発に便利な無料フレームワーク「Sencha Touch」をご紹介したいと思います。

Sencha Touchよりダウンロードしたサンプル

続きを読む

デザイナー必見!今もっとも旬なProgressionを知る絶好の機会

Flashを使ったインターラクティブなリッチコンテンツをつくりたいが、プログラミングは全くの苦手というデザイナーはいないだろうか。そういう人に最適な講座が始まる。

株式会社ロクナナは、同社が運営するセミナー「ロクナナワークショップ」において、2010年、Flashのフレームワークである「Progression」の入門講座を8月6日より開講すると発表した。

■池田泰延氏による「Progression」の入門講座
Progressionは「作りたいものは、楽しいところだけ作る。」というコンセプトを基に設計された、Flashのフレームワークだ。最新バーションであるProgression 4を使用することで、高い拡張性と柔軟性、そしてユーザビリティを併せ持つコンテンツを容易に開発することができる。
続きを読む

iPhone対抗へdocomoの切り札か?指を離さず入力できる「Swype」【プロに学ぶ67WS通信】

こんにちは、ロクナナワークショップの佐々木です。
みなさんは「Swype」というものをご存知でしょうか。今回はソフトウェアキーボードの新しい姿をご紹介します。


■iPhoneではフリック入力
現在のタッチパネル端末で主に採用されている日本語入力方式で、「フリック入力」というものがあるのは、みなさんご存知だと思います。携帯電話からiPhoneに機種変更をした方々は、その入力速度にヤミツキになっている人も少なくないことでしょう。

iPhoneで一躍有名になったフリック入力は、AndroidやWindows Mobileユーザーの方にも普段から利用されていることと思います。

「今や時代はフリック入力!」と思っていたのですが、どうやら「Swype」というものが英語圏で非常に注目されており、今後日本語版もリリース予定であるとのこと。一体どのようなものなのでしょう。

続きを読む

iPhoneでFlashがみれる?AdobeとAppleに技術者も悩み中【プロに学ぶ67WS通信】

こんにちは、ロクナナワークショップの佐々木です。今回はFlashとApple製品に縁のあるニュースです。

オーサリングツールとしてのFlashを手離せないクリエイターは、iPhone OSにもFlashをサポートさせてほしいと願うのは当然です。それに対して、AppleはFlashを頑なに拒んでいます。そんななか、こんなニュースが飛び込んできました。

[Smokescreen オフィシャルサイト]

「FlashをHTML5に自動変換するSmokescreen、iPadでも動作(engadget: http://japanese.engadget.com/2010/05/31/flash-html5-smokescreen-ipad/)」

記事によると、SmokescreenとはJavascriptで作られたライブラリとのこと。これを利用するとswfファイルから文字や画像を抜き出して、HTML5 + javascripに変換してくれるそうです。

全てのFlashが再現できるわけではないようですが、簡単な作りのFlashなら変換可能とのことです。なんともダイナミックというか、力業のライブラリですね…。

■変換することのメリット
このライブラリを利用するメリットですが、Flashに対応していない端末でもFlashコンテンツが見られるようになるということでしょう。
HTML5はこれから標準になっていくのに対して、Flashは別途Flash Playerがインストールされていなければ表示することができません。

こうした環境を好ましいと思わないAppleは、iPhoneやiPadにFlashは対応させないと公表しています。これからどうなっていくのか不安に思っていましたが、Smokescreenを使えばiPhoneでもちょっとしたFlashなら表示できるようになるみたいです。今後の対応にも期待したいところですね。

■デモが公開されている!
[FlashバナーをSmokescreenで変換してiPhoneで表示してみたデモページ]

HTML5に対応しているモダンブラウザで、Smokescreenの作者のサイト(http://smokescreen.us/)から特設ページにアクセスすると、実際に動作しているSmokescreenを見ることができます。swfと比べると読み込み時に多少のタイムラグがあるものの、動作自体は非常に滑らかで元のswfと見分けが付きません。思った以上の動きですね。

今話題のiPadで動作している動画も(http://www.vimeo.com/12014368)にて見ることができました。標準ではFlashが表示される場所は空白になっているのに対して、Smokescreenで変換済みのものは正常に動作しているようです。

■FlashとAppleの今後
このようなライブラリが出てきたからと言っても全てのFlashが再現できるとは限りません。iPad/iPhoneでのFlashについては、AdobeとApple次第となりそうです。

■ これから勉強するならどっちか?
最近、ロクナナワークショップには、「FlashとHTML5、これから勉強するならどっち?」というお問い合わせをよく頂きます。これは、なかなか難しい質問ですが、Androidは、Flash Player 10.1に対応しています。

iPadのようなタブレット端末が普及するにしても時間がかかるでしょうから、Flashの需要はまだまだありそうです。またHTML5については、今後いろいろなブラウザーで対応がすすむなど需要は広がりそうなので、押さえておきたい技術でもあります。
現状の回答としては、できるなら両方とも学習しておいた方がいいでしょう。

ロクナナワークショップでは、Flash・ActionScriptの講座を多数開講しています。また、現在HTML5の講座の開設を企画しているので、近々新講座として追加する予定です。

日進月歩で生き物のように変化するこの業界、視野を広く持ち、出来る限り多くの情報や技術を柔軟に取り入れていくことが重要になりそうですね。

Smokescreen
ロクナナワークショップ
Flash講座
ActionScript講座

【プロに学ぶ67WS通信】の記事をもっとみる
ガジェット学園祭からrudesign製 iPhone Standプレゼント!
Google Map がどうして古典3D技術を使ったのか?
エコだ!動物園 動きの仕掛け人 城戸氏のワークスタイル
出版業界の新しいスキル!電子書籍のつくりかた

ガジェット学園祭からrudesign製 iPhone Standプレゼント!【プロに学ぶ67WS通信】



こんにちは、ロクナナワークショップの佐々木です。皆さんは2010年5月22日(土)と23日(日)に開催されたMake: Tokyo Meeting 05に行かれましたか?

■Make: Tokyo Meeting 05
株式会社オライリー・ジャパン主催のガジェット学園祭?!です。私は23日に行ってきたのですが、悪天候にもかかわらず会場は大勢のお客さんで盛り上がっていました。

今回も会場は大岡山駅の目の前、東京工業大学のキャンパス。銀色のかまぼこ屋根が目印の百年記念館を始め、体育館や教室など、大学全体が会場となっています。総勢200組を超える出展者が参加されたということで、メイン会場はあふれんばかりの人でごった返していました。

いつもお仕事でお会いする皆さんも、出店されていて、嬉々として来場者と交流されているのが印象的でした。ガジェット好きのポジティブで楽しい雰囲気を実感できる祭典です。
残念ながら、会場が広すぎて全部を見て回りきれなかったので、次回のMakeは初日の早朝から行こうと思います。

■Japanino? Arduino?
今回のMakeでも、多くの作品にArduinoが使われていました。Arduinoについては、皆さんすでにご存じでしょうか?

ひとことでいうと、PCからプログラムを送り込んで自力で動作できるタイプのフィジカルコンピューティング ツールキットです。

Arduino自体はオープンソースで開発されており、その道の人達には数年前から知られた存在なのですが、最近、日本のArduino互換端末の勢力図が一気に塗り替えられるような出来事がおきたのです。学研教育出版の「大人の科学 vol.27」にJapaninoというArduino互換機が付録に付いたマガジンが発売されたのです。(発行部数推定数万部!)
今回、学研さんもMakeにも出店されていたので、私も1冊買ってみました。
[「大人の科学 vol.27」]

JapaninoとArduinoにはハードウェアとして互換性があるため、多くのArduino用のプログラムをJapaninoでも動作させることが可能です。今後、フィジカルコンピューティングの敷居が一気に下がったので、新しい何かがそこかしこで生まれてきそうな予感がしますね。

ロクナナワークショップの「Arduino講座」も、多くの個人や企業の方からお問い合わせをいただいている人気講座になりました。講座では、ArduinoとPCを使って実践的なワークショップを行います。学研さんのJapaninoに興味を持たれた方にも、是非受講していただきたい内容です。

■rudesign製 iPhone Stand
会場でrudesignの北村さんにもお会いしました。北村さんは、大ブームとなった セカイカメラのデザインを手がけられた方です。ロクナナワークショップでもiPhone関連のワークショップの企画に、アドバイザーとしてご意見いただいたりしています。

前回お会いしたときには、まだプロトタイプだったiPhone Standがいよいよ製品版として売られていました。また、その横にはなんとiPad Standもあり、もちろん本物のiPadに装着された状態でしたよ。
[iPhone Stand、iPad Stand]

そして、なんとこのiPhone Stand製品版を、4本、このブログの読者の皆様へプレゼントしていただけることになりました!
[rudesign製 iPhone Stand]

応募方法は簡単です。まずロクナナワークショップのメールマガジンに登録後、ロクナナワークショップ宛に、お名前、e-mailアドレス、発送先ご住所を記載したメールを送ってください。

また、タイトルには「iPhone Stand希望」と書いてください。締め切りは5月31日までです。
ブログの感想や、ロクナナワークショップへのご意見なども書いていただけるとステキです。

なお、当選は直接メールにてご連絡させていただきます。
黒2本、クリア2本の合計4名様です。ふるってご応募ください。

Make: Tokyo Meeting 05
大人の科学マガジン
山辺真幸のFlashとFunnelで始めるArduino入門講座
rudesign
iPhone Stand
ロクナナワークショップ

【プロに学ぶ67WS通信】の記事をもっとみる
Google Map がどうして古典3D技術を使ったのか?
エコだ!動物園 動きの仕掛け人 城戸氏のワークスタイル
出版業界の新しいスキル!電子書籍のつくりかた
動くサイトの謎を解く!中学の数学で作れるってホント?

クリエイター必見!無料でFlash技術を学べるチャンス

Flash技術は、WEBクリエイターに欠かせない技術であり、インタラクティブなデザインでは数学的・物理的な動きを組み合わせることにより表現の幅を一気に広げることができる。とはいえ、数学や物理は苦手な人もいるだろう。そんな人に絶好の機会がおとずれた。

Flashの学校 ロクナナワークショップは、「Flashアニメに頼らない!プログラムで動かす経産省認定 天才プログラマー」でも紹介した、講師 古堅真彦氏の新刊著書「 Flash Math & Physics DesignActionScript 3.0による数学・物理学入門[実践編](ソフトバンク クリエイティブ)」の刊行を記念し、2010年5月17日に無料セミナー「Flash CS5 によるインタラクティブデザイン」を開催する。

本セミナーでは、同日発売の古堅氏の新刊書籍のサンプルをベースにして、数学や物理の考え方をデザインワークに取り込む方法を概念的な側面と、実際のソースコードを交えた側面の両面から解説する。

なお、会場では、刊行したばかりの書籍を購入することができる。

●開催概要
日程:2010年5月17日(月)
時間:18:00 - 20:00
定員:80名
料金:無料 ※ 事前お申し込みが必要です。
会場:東京・表参道「 THE GALLERY 」

ロクナナワークショップ
【無料イベント】Flash CS5 によるインタラクティブデザイン
古堅真彦のActionScript 3.0によるインタラクティブデザイン講座

■インターネット関連の記事をもっとみる
Flashアニメに頼らない!プログラムで動かすIPA認定 天才プログラマー
液晶テレビを5,999円以下でひとり勝ち!宝くじのようなオークションにチャレンジ
マニアの意見で「いいモノ」を作る!最先端企業とコラボする invent-Z
Yahoo!モバゲーが登場か!ヤフーとDeNAが業務提携

A.e.SuckのFlashアニメーション講座 絵コンテ編+作画編 [DVD]
株式会社ロクナナ (2006-04-07)
売り上げランキング: 74199

Flashアニメに頼らない!プログラムで動かすIPA認定 天才プログラマー【注目クリエイター列伝】



話題のクリエイターを紹介する「注目クリエイター列伝」。第8回は、コンピューターとデザインの関係について研究しているクリエイター 古堅真彦さんに登場していただいた。

古堅さんは、IPA(独立行政法人 情報処理推進機構)が2004年度下期に実施した「天才プログラマー/スーパークリエータ」に認定されている。

■数学や物理をFlashデザイナーに教えたい
古堅真彦さんは奈良出身の出身。現在、岐阜にある国際情報科学芸術アカデミー(IAMAS)の准教授、多摩美術大学非常勤講師、武蔵野美術大学非常勤講師を仕事としている。また、ロクナナワークショップにて「ActionScript 3.0によるインタラクティブデザイン講座」を開講している。

もともとは理科系で数学や物理を研究していたが、「何かパソコンで表現をしたい」と一念発起し、1990年くらいに美術系の学校のデザイン学部に就職した。最近では、クリエイターに物理や数学を使ったFlashの表現方法を教えている。

学校では、「アルゴリズミックなデザイン」や「プログラミングを使ったデザイン」をテーマに演習や講義、共同研究を行っている。研究成果は世の中に直結させることが必要であると考え、研究成果をアプリケーションソフトウェアに落とし込み、世の中に頒布している。

古堅さんは、IPA認定「天才プログラマー/スーパークリエイター」だが、これはソフトウェア関連分野における天才的な人材の発掘・育成を目的としている「未踏ソフトウェア創造事業」開発者の認定を行うものだ。

物理法則を使った「motionExpress」というプログラミング言語を作り、「天才プログラマー/スーパークリエイター」に認定された。「motionExpress」は、コンピュータ画面上のオブジェクトの動きを,主に物理法則(ニュートン力学)によって制御する専用のプログラミング言語となっている。

■かたちではなく、動きをデザインする
古堅さんは、「Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編] 」という書籍を執筆している。これまでC言語やJavaで培ってきたインタラクションの中の物理法則のノウハウを、数学や物理を本格的に学んでいないデザイナー向けに、Flashで表現する方法について書かれたものだ。5月17日には、続編にあたる[実践編]の刊行も予定しており、刊行を記念した無料イベント「Flash CS5 によるインタラクティブデザイン」の開催も予定している。

古堅さんは、なぜ、アクションにこだわるのだろうか。

古堅さんによると、「一番手っ取り早く、『おお!』と思うので...。」と、苦笑しながら語ってくれた。物理法則を使うと、どうなるかがわからない人に対して、サンプルとして紹介するというものだ。使い方のひとつのヒントになればよいという。

物理学では、運動方程式により物体の動きを記述するが、難しい方程式にはあえて触れずに、どういう式で表現できるのかを具体的な例で示している。

「かたちを表現するのではなく、動き(アクション)をデザインします。」と、古堅さんは語る。具体的な動作を提示することで、動きのヒントを提示しているのだという。同じ動きでも、使い方によって、その動きはメニューの動きになったり、物体の動きになったりするわけだ。

「3次元でも式を知っているだけで、簡単に表現することができます。」と語る古堅さんは、視点を変えて3次元を表現するデモンストレーションを見せてくれた。

他人の作ったライブラリは、簡単に動きのあるFlashを作成できるが、基本的な動きは決まっているので、それ以上のことはできない。古堅さんは、数学と物理の基本的なことのみを教えて、Flashのデザイナーが基本的な動きから応用できるヒントを与えたいというのだ。
動きのあるFlashについて語る、IAMAS 准教授 古堅真彦さん

■アルゴリズムを組む楽しさ
最近の個人的な活動としては、NTT東日本が運営する文化施設「NTTインターコミュニケーション・センター(ICC)」からの依頼で、アルゴリズムを組む楽しさを表現するための作品として、Dainippon Type Organizationと共同で「Playgram(プレイグラム)」という作品を作った。

この作品は、下記のような要素が含まれており、プログラムの構造と自然言語のプログラム的な構造に気づくことのできる作品となっている。
1.ブロックの向きによる文字あそび
2.文字の並び順、組み合わせによる命令の文法
3.文字を図形に見立てて、図案をつくるタングラム

もう少しわかりやすく説明しよう。

「プレイグラム」では、手前のアルファベット・ブロックを並べ変えることで命令文を作り、画面上に命令文の実行結果として表示されたアルファベット・ブロックと同じ形から構成されるアニメーション映像をインタラクティブに動かすというものだ。直感的に言えば、遊びながらプログラミングを学ぶことができる。

たとえば、「P」「L」「A」「Y」という4つのブロックがある。「P」を裏返して「L」を180度回転させたものを並べると、「P」「L」が「6」「フ」に見えるので、6倍の大きさでフワフワ動く表現を画面に表示させるというものだ。

言葉では表現しづらいが、4つのブロックの向きに、それぞれ意味を持たせて、そのブロックの組み合わせで面白い動きができる。動きが面白いので、ブロックに熱中する子供もいるそうだ。

また、日本科学未来館が運営している「deep science(ディープ サイエンス)」においても、2~3年前に入り口となるサイトのFlashを作成したこともあるという。

■FlashはActionScript派
古堅さんの作品を見ると、Flashの達人としか言いようがない。ところが、Flashアニメーションについてはほとんど使ったことがなく、動きのあるFlashはActionScriptで記述しているという。

もともとはJavaを使っていたが、デザインワークに使えないことや、MacintoshとWindowsで異なることがあり、FlashのActionScriptに興味を持ったそうだ。

それでもバージョン3.0より以前のActionScriptは、表現できることが少なく、ActionScript 3.0になってやっと仕事で使えるようになったという。
FlashのActionScriptについて語る、IAMAS 准教授 古堅真彦さん

古堅さんによると、「デザインができる人は、プログラミングができない」「プログラミングができる人は、デザインができない」という人がほとんどなので、両方ができる人をもっと育てていきたいとのことだ。座右の銘はとくにないが、「人を飽きさせたくない」という古堅さんは、難しい内容も面白く話せる天才肌のクリエイターだった。

■関連リンク
「プレイグラム」
「deep science」
「FuRuKaTics」
ロクナナワークショップ
【無料イベント】Flash CS5 によるインタラクティブデザイン
古堅真彦のActionScript 3.0によるインタラクティブデザイン講座

注目クリエイター列伝をもっとみる
自然は美しい!人工知能の芋虫が世代を超えて進化する作品
日本と海外の技術の架け橋に!Time, Incを辞めて日本にくるエンジニアは愛妻
新しい可能性を提供したい!人とコンピューターを繋ぐクリエイター
三度の飯よりActionScript!Flashクリエイターにインタビュー

自然は美しい!人工知能の芋虫が世代を超えて進化する作品【注目クリエイター列伝】



話題のクリエイターを紹介する「注目クリエイター列伝」の第9回は、Flashクリエイター 奥田透也さんに登場していただいた。

奥田さんは現在、クリエイター集団tha ltdでFlash制作とデザインを仕事としているが、プライベートな時間は「alumican.net」という自分のサイトで、独自のFlash制作に没頭している。

■面白いと感じたFlashとの出会い
奥田さんのサイト「alumican.net」を拝見すると達人レベルであるFlash制作の腕前を見ることができるが、奥田さんが仕事としてのFlash制作を始めてから、まだ2年だというから驚きだ。そんな奥田さんがFlashに興味を持ったのは中学3年生からだという。現在は26歳ということで、10年以上Flashに携わっていることになる。

奥田さんが中学3年生の頃は、ちょうどインターネットをやり始めた頃でもあり、インターネット上にカッコイイFlashコンテンツも現れ始めた時期だ。それを見て、「自分もやってみよう!」と調べたところ、それがFlashで作成されていることを初めて知ったという。

すぐにFlashを作成するソフトを購入したそうだが、「その時点で、人生で一番大きな買い物だったのではないでしょうか。Flash 5でしたけど、4~5万円はしました。」と、奥田さんは当時を振り返りながら苦笑した。

パソコンは、小学生の頃からNEC PC-8801を遊び程度で触っていたが、インターネットには繋いでいなかったという。その頃は、まだ開発はしていなかったが、ペイントソフトで描いた絵を、反転ツールを使って2コマアニメにするなど、現在、Flashでやっているインタラクティブなことをすでにしていたそうだ。

今でこそ、プログラミングで様々なFlashを制作している奥田さんだが、当時Flashアニメーションが流行っていたこともあり、最初はアニメーションの制作から始めたという。最初のプログラミングは、自分が作ったアニメーションに「Now loading」を付けたいがために、スクリプトを勉強したとのこと。

当時はActionScriptについての知識があまりなかったので、スクリプトの記述は取っ付きにくかったそうだが、「Now loading」を作ったところ、「非常に面白いな!」と感じたという。これがFlashゲームを作り始めるキッカケともなった。最初に作ったFlashゲームはコンピューターと自分のコマをぶつけ合うようなベーゴマチックなゲームだった。

■人とは違う発想で物事をとらえる
奥田さんは、物理演算を使ったゲームが好きだという。大学ではプログラミングを使って数学や情報工学を研究していたが、研究が煮詰まったときには突発的にFlash制作に夢中になるそうだ。

「カオスは好きですね」という奥田さんは、「一見ランダムな模様だけど、パラメータを決めると、そこに沿ったものが出てくる。式は単純ですが、すごく綺麗なところが好きです」と、カオスを好きな理由を語る。

最近、どのようなことに興味を持っているかを尋ねてみると、「見て楽しい。触って楽しいものを追求してますが、手法としてFlashは出来ることが多くなってきたので、人があまりやっていないマニアックな技術を使っておもしろいことがしてみたいです。発想が普通と違うものを積極的に考えています。」とのこと。

実際、ブラウザだけでFlashが作れるネットサービス「wonderfl」でチェックメイトというコンテストがあり、「美味しいラーメンを作ってください」という、お題があったそうだ。そのままFlashでラーメンを作ってもつまらないので、ラーメンのどんぶりが丸いことから、どんぶりをまわしてみたり、まわして具をのせていこうと考えたときに、オルゴールに似ていることに気がついたという。
「美味しいラーメンを作れば、良い音楽が流れる」というコンセプトで攻めてみるなど、お題に対してひとひねり加えたものを作るなど、奥田さんは研究分野では地道にいろいろと実験を積み重ねている。

最近の研究では、Flashがマイクからの音声入力を波形レベルで解析できるようになったことから音声処理に興味をもっているという。具体的には、音声を解析したり、音声を作り出したりできるところを開拓して行こうと考えているが、音声処理は専門外なので、まだ勉強中だそうだ。

自力でフーリエ変換してスペクトルをとるところまではできるが、そこから先でスペクトルを組み替えてボコーダーを作るところは研究段階とのこと。

奥田さんは理系の大学を出ていることから論文は抵抗なく読めることから日夜研究に勤しんでいるという。軽いボスチェンジャーくらいだったら、今でも作ることができるそうだ。

物理演算を使ったFlashについて語る、奥田さん物理演算を使ったFlashについて語る、奥田さん

■ロボット好きの奥田さんは、人工知能好き
奥田さん、「人工知能は昔から興味があり、ロボットがすごく好き」と語る。大学ではロボット工学も勉強していた。

「日本人的な発想かもしれませんが、人工知能というと、どうしてもロボットを切り離せません。」という。

しかし、奥田さんは昔から人工知能に興味があったわけではなく、Flashを始めてから人工知能のような何かを作りたくなったそうだ。

キッカケとなったのは、「アストロノーカ」「がんばれ森川君2号」などのゲームを作った森川幸人氏の書籍「マッチ箱の脳」で、その書籍を読み、人工知能を身近なものと感じ、一気に人工知能プログラムを組んでみた。

「言ってみれば、人工知能はただの学習ですが、高校時代から何回もチャレンジし、何回も挫折した。すでに10回くらい挫折しているんですよ。」と、人工知能への並々ならぬチャンレンジを語る。

人工知能については、大学に入り、機械学習や遺伝的アルゴリズムを習ってあらためて理解することができたという奥田さん。最近作ったFlashコンテンツは、人工知能を応用した芋虫が歩き方を自律学習するコンテンツだ。

このコンテンツは、芋虫は歩行パターンを遺伝情報として持ち、そのパターンを実際に動かして評価し、交配させて新しい世代を作る、これを繰り返していくものだ。

※ちょっと解説
芋虫は、同じ遺伝子が入ってくると、必ず同じ歩き方をする。その遺伝子が優秀か否かで、子供を残せるか否かが変わる。優秀な遺伝子は次世代に子供を残せるし、そうでない遺伝子はその世代で死んでしまう。
最初はランダムに遺伝子を与えると、むちゃくちゃな歩き方をするわけだが、偶然にも少し良い歩き方をする遺伝子があると、それが優先的に子孫を残していく。それを何百世代も繰り返していくと、何となく自然に歩ける遺伝子が残っていく。

ここでの良い歩き方の定義だが、どんな歩き方でもよく、そこには制限を加えない。一定時間内でより長い距離を移動できれば、それは良い歩き方と定義する。転がっても良いわけだが、世代を重ねるごとに転がる尺取り虫でなく、尺取り虫らしいものが残っていったそうで、「自然は凄い」と、奥田さんは感動したそうだ。

芋虫を選んだキッカケだが、シンプルで動きがわかりやすい点と動きの面白さだ。奥田さんは、このバージョンアップ版として、ユーザーが自由にかたちを作っていけるものを考えている。

芋虫の遺伝子について語る、奥田さん

インタビューの最後に将来の目標について、奥田さんにうかがってみた。奥田さんは、
「人を楽しませるインタラクティブなものを作っていきたいです。僕は絵や音楽を創るのは得意ではないので、触って楽しいというところで、人を喜ばせていけるような作品というのを世界中の人に見て貰えるように活動していきたいです。」と、奥田さんはどこまでもインタラクティブなFlashにこだわる職人気質なクリエイターだった。

そんな奥田さんは、ロクナナワークショップが主催するセミナーイベント「GEEKs Flash モーションプログラミング」に出演する。

■関連リンク
alumican.net
tha ltd.
ロクナナワークショップ
GEEKs in OSAKA
GEEKs in TOKYO

注目クリエイター列伝をもっとみる
日本と海外の技術の架け橋に!Time, Incを辞めて日本にくるエンジニアは愛妻
新しい可能性を提供したい!人とコンピューターを繋ぐクリエイター
三度の飯よりActionScript!Flashクリエイターにインタビュー三度の飯よりActionScript!Flashクリエイターにインタビュー
爆発的ヒットの秘密を探る!iPhoneアプリ・クリエイター インタビュー

Google Map がどうして古典3D技術を使ったのか?【プロに学ぶ67WS通信】

こんにちは。ロクナナワークショップの佐々木です。

Google Mapのストリートビューに3D表示?

4月1日のエイプリルフールで、いろいろな面白ネタ コンテンツがリリースされたなか、Google Mapのストリートビューをみていると、赤青の3D(アナグリフ)メガネをつけたアイコンを発見!
Google Mapのストリートビュー

これは最近の3Dトレンドに便乗したネタなのか?はたまた大まじめな新機能なのかな?と、調べていると、さっそくGoogle Map チームと Google Earth チームが共同で執筆するブログ「Google LatLong(http://bit.ly/aPQHfU)」でも紹介されていました。
Google Mapのストリートビューでアナグリフ メガネをつけたアイコン

どうやらエイプリルフールのネタではなくて、新機能らしいことが判明しました。
しかし、どうしてGoogle Mapのストリートビューで、アナグリフを採用したのでしょうか?
アナグリフといえば、立体画像を作る上でもかなり古い原理です。

■3Dの仕組みとは?
そもそも3Dというのは、どんな仕組みなんでしょう。
人は通常、眼の前にあるものを右眼・左眼で異なった角度から見ています。右左の眼を交互に閉じると、眼の前にあるものが少しずつ違った角度で見えるのが分かりますよね。

この右眼・左眼から入ってくるちょっとずつ角度の違う2つのイメージを、経験に基づいて脳で瞬時に計算して合成することで、奥行きを認識しています。そして、この2つのイメージの違いを「両眼視差」と呼びます。

3D映像では、2台のカメラで右眼用・左眼用の映像を撮影し、この「両眼視差」を2Dに擬似的に作り出し、右眼と左眼ぞれぞれに異なる映像を送ることで、人間の脳に奥行きを錯覚させているんです。

■アナグリフ方式で飛び出す3D映像の作り方
では、ここでどうやって別々の映像を、右眼・左眼だけに届けているのか?

さまざまな手法がでていますが、今日は、Google Mapが採用した赤青の3Dメガネ(アナグリフ)を例にご紹介します。アナグリフとは、右眼用・左眼用の映像を、それぞれ赤と青の2色で合成し作成します。

赤と青のレンズのついたメガネで2色の映像を見ると、赤で作成された部分は赤いフィルタを通過せず、背景と見分けがつかなくなります。反対に青で作成された部分はフィルタを通過し、画像として認識されます。青いフィルタ側も同様です。
これにより「両眼視差」により3次元映像を見ることができるわけですね。

■Google Mapがどうしてアナグリフなの?
しかし面白いのは、Google Mapが、今なぜこのアナグリフという古典的な技法を採用したのか?
よくよく考えると、これは3D用に新規で撮影された画像ではなく、Google Mapの持つ元々の画像というところがポイントです。つまり、Flash ActionScript 3.0を使って、動的に元の画像を青と赤に分離してずらして表示しているのです。

厳密にどれくらい画像をずらすのか、色味は何色にするのかなど課題は多いですが、技術的にはさほど難しくなさそうですね。

■youtubeでも3D表示?
youtubeでも、一部のコンテンツに3D表示が対応されており、ユーザーが視聴形態を選択し、3Dを手軽に体験することができる仕組みになっています。
また、3D映像の公開法方(http://bit.ly/bQruEJ)も紹介されているので、興味のある方は試してみてはいかがでしょう。
youtube 3D表示切り替えのプルダウンメニュー

こういった3Dトレンドに便乗したコンテンツ。今後も、続々とでてきそうですね!

■関連リンク
ロクナナワークショップ
Google LatLong
youtube 3D映像の公開方法

【プロに学ぶ67WS通信】の記事をもっとみる
エコだ!動物園 動きの仕掛け人 城戸氏のワークスタイル
出版業界の新しいスキル!電子書籍のつくりかた
動くサイトの謎を解く!中学の数学で作れるってホント?
出来る人はオフィス不要!クラウドワークスタイル

クリエイター向けの新講座が誕生!その名も「千貫りこのXHTML/CSS中級講座」

「コーディング」という作業は「ビジュアルデザインを実装すること」とイコールであると捉えられがちだ。しかしXHTMLは本来、デザインの影響を受けるべきではないという。デザイン実装に気をとられるあまり「デザイン前提のXHTML」を記述している人は、いないだろうか。

ロクナナワークショップは、昨年の4月よりスタートした「XHTML/CSS入門講座」の続編として「XHTML/CSS中級講座」を2010年5月より開設する。
講師には、Web制作に関する著述や講演活動で活躍している、Webクリエイターの千貫りこ氏を迎える。

■仕事で使えるCSS技術を習得
今回の講座では、CSSレイアウトにある程度慣れている方人または、「千貫りこのXHTML/CSS入門講座」の履修相当の理解がある人を対象として、無理のないXHTMLを土台としてデザインを実装するためのCSSや、複雑なレイアウトを実現するためのCSSを、実習を通して習得する。

またトラブル発生時の対処方法や、知っておくと便利なCSSファイルの管理方法など、サイト制作にまつわる実践的なテクニックも紹介される。

「千貫りこのXHTML/CSS中級講座」
ロクナナワークショップ

ITライフハック
ITライフハック Twitter

■インターネット関連の記事をもっとみる
藤川優里議員も登場!「Ameba政治家ブログ」を開設
ヤフーがネット選挙運動解禁を求める署名を提出した理由
ウルトラマンが光の国なう!Twitterならぬ、円谷ッターが登場
ネット世論調査!鳩山内閣で重点的に対応すべきものは

エコだ!動物園 動きの仕掛け人 城戸氏のワークスタイル【プロに学ぶ67WS通信】



こんにちは、ロクナナワークショップの佐々木です。
最近のWebサイトには、「気持ちいい」と感じるような感覚を刺激する動きや、インタラクティブな仕掛けがいっぱい詰まっていますよね。

ユーザーに情報を提供するだけではなく、「驚き」や「楽しみ」といった、見る人に新しい感覚を発見・体感してもらう。

そこには、モーショングラフィック という手法が隠されているのです。

今日は、そんなイマドキのWebサイトを手掛けるクリエイタで、3Dを操るモーショングラフィック アーティストとして世界的にも活躍する ROXIK 城戸雅行さんにお話を伺いました。

■モーショングラフィックワークってどんなお仕事?
佐々木:城戸さんの作品には、モーショングラフィックを巧みに取り入れたFlashコンテンツが多くありますが、そもそも、モーショングラフィックワークってどんなお仕事なんですか?

城戸さん:「モーショングラフィックワーク」というのが、どこまでの範囲なのかによるけれど、ひとつの作品を作る場合の役割分担は、大きく分けると3つになるよね。

・企画
・デザイン
・プログラム

Flashにおいて、いわゆるモーショングラフィックというと、「何かしらのデザインをプログラムで動かす」ことにあたる。ただ、それだと作品にならないから、企画が必要になる。

■城戸さんが考えるモーショングラフィックワーク
僕の定義としては、モーショングラフィックワークというのは、企画(どうやったら「面白い・心地いい・感動する」ものになるのかを考えること)、プラスそれを表現するためのデザインと、実装するためのプログラミングになるのかな。

その3つのうち、デザインをやる人がデザイナーで、Flashの実装をするのがプログラマーで、企画をする人がプランナーとかディレクターとか、肩書きは色々だけど存在する。

僕は一通り担当しているから、この3つすべてを考えた上でのモーショングラフィックワークを行っている。

■「エコだ!動物園」ではマウスの動きで楽しい感覚を
僕が以前に制作した「エコだ!動物園」だったら、マウスをドラッグして上下にスライドしたり、回転させたりできる動きを取り入れている。
これは、僕がこの動きによって、ユーザーに「楽しい感覚」を提供できると思ったから。これによって、必然的に上下に長く伸びた画面構成が生まれて、それをもとにデザインを起こしていきました。
つまりモーショングラフィックスというのは、それ単体で考えることは出来なくて、アイデアとデザイン、そしてそれを実装するためのプログラムから成るわけです。
エコだ!動物園 アンコールワットさんの絵本

■城戸さん流 お仕事の進め方
佐々木:クライアントからは、どういう依頼が来て、どんな風に案件が進むんですか?

城戸さん:たとえば、以前に僕が作った作品 全日本バーベイタム選手権 を例にあげると、「Verbatim(バーベイタム)」のブランドを日本に浸透させたいと依頼が来る。
全日本バーベイタム選手権

1.企画
それをうけて、まずどのようにして展開していくべきかを考え、そのためにいくつかの企画をたてる。このときに提案した企画のうちのひとつが、現在展開されている「ロボットによる対戦ゲームを作りましょう」というもの。

2.デザイン
企画が決まったら、画面の流れやメニュー構成など細かいルールを決めながら全体の仕様を固めて、それをもとにデザインを行う。

3.プログラム
出来上がったデザインをもとに、プログラムで実装を行う。
ここはとても重要なステップで、単に仕様を満たせば良いというものではなく、いかに心地よさを感じてもらうか、かっこよさ・コミカルさを引き出すか、また余計な演出でストレスを感じさせないようにする必要もあります。注意深く何度もトライ&エラーを繰り返して完成に近づけていくのです。

この作品は、対戦するロボットの動きが命だから、企画、デザイン、プログラムと全体を通して、動きの表現・演出といった モーショングラフィック には結構こだわったよ。

■クリエイティブの本質がある
今回は、城戸さんにお話を伺って、ゼロからのモノ作りを教えてもらった気がします。
モーショングラフィックとは、デザイン(グラフィック)に動きを実装するだけではなく、クライアントの要望を受け「何を作って、どう見せたいか」「何を表現するか」を企画段階から考え、動きを考慮しつつデザイン・実装するすべてを指しているんですね。
そこには、クリエイティブの本質を感じました。

さて、そんな城戸さんは、4月23日(金)東京と、25日(日)大阪で開催のロクナナワークショップ イベント「 GEEKs Flash モーションプログラミング 」に出演されます。イベントでは、モーションプログラムの仕組みや考え方について、じっくりお話していただく予定です。

GEEKs Flash モーションプログラミング
ROXIK
エコだ!動物園
全日本バーベイタム選手権
ロクナナワークショップ

【プロに学ぶ67WS通信】の記事をもっとみる
出版業界の新しいスキル!電子書籍のつくりかた
動くサイトの謎を解く!中学の数学で作れるってホント?
出来る人はオフィス不要!クラウドワークスタイル
iPadで書籍革命!コメント付きデジタル本もあり?

ハイレベルを目指すクリエイタの為のイベントを開催へ

株式会社ロクナナは2010年3月24日、ハイレベルを目指すクリエイタを対象にしたセミナーイベント「GEEKs in OSAKA」を、4月25日(日)大阪・北区の会場にて開催する。
「GEEKs」は、4月23日(金)に東京でも開催を予定しており、今回は関西での開催の要望が多数あったことから、急遽大阪での開催を決定した。

■「GEEKs」って、なに?
「GEEKs」は自由な発想でテクノロジーを駆使し、モノを作る楽しさと独創性を刺激するセミナーイベント。今回のテーマは、Flash ActionScriptによるモーショングラフィックスとなっている。

Flashにおける、動きのデザイン、インタラクティブデザインには、見る人を魅了して驚かせる効果がある。制作者には、ビジュアルを表現するだけではなく、それを成り立たせる構造やしくみをデザインする技術が必要となる。

本イベントでは、「全日本バーベイタム選手権」や「エコだ!動物園」を手掛けた ROXIK の城戸雅行氏と、tha ltd.のFlashデベロッパーで、プライベートでは alumican.net で活躍されている 奥田透也氏をゲストに迎え、ActionScript 3.0で複雑なモーションプログラムを構築するための、考え方や手法を紹介する。

大阪イベントでは特別に、地元 Flashコミュニティ「大阪てら子」協力のもと拡大版として開催。大阪版 特別 Sessionでは、大阪てら子 代表 シナチク氏と、Katamari Inc.のSaqoosha(さくーしゃ)氏らをゲストに迎えるほか、大阪版 特別 Sessionの様子は、映像での公開を予定している。

●概要
日時:4月25日(日)12:00 - 16:00(開場11:30)
定員:180名(会場の都合により増減あり)
料金:3,800円(税込み)
   ※学生料金 1,900円(数量限定・税込み)
会場:大阪・北区「大阪市立住まい情報センター 3F ホール」

GEEKs Flash モーションプログラミング
ロクナナワークショップ

ITライフハック
ITライフハック Twitter

■ビジネス関連の記事をもっとよくみる
東芝、新型二次電池「SCiB」量産工場の建設を開始
名誉毀損訴訟に終止符!楽天、新潮社と和解
ビックカメラとソフマップがポイント交換サービス開始
国内でも本格展開へ!マイクロソフト、クラウドサービス「Azure」

できるクリエイター Flash独習ナビ CS4/CS3&ActionScript 3.0対応 (できるクリエイターシリーズ)
Brandnewtoday できるシリーズ編集部
インプレスジャパン
売り上げランキング: 71729
カテゴリ
月別アーカイブ
配信メディア
ITライフハックは以下のニュースサイトにも記事を配信しています。
記事検索
このサイトについて

ITライフハックで原稿(有償原稿)を執筆したいというプロのライターさんからの売り込みも受け付けていますので、興味をもっていただけましたら、これまでの実績等を含めてお気軽にご連絡ください。ただし、必ずお返事するわけではありません。執筆依頼は編集部から行います。また必ず校正及びファクトチェックが入ります。

>>詳しくはこちらへ

ITライフハック代表
関口哲司

日本大学大学院理工学研究科後期博士課程修了。理学博士。日本物理学会会員。データサイエンティスト協会会員。IT系記事を中心に著書多数。原稿の依頼歓迎。

>>詳しくはこちらへ

連絡先:itlifehack【at】mediabank.jpn.com
プレスリリース:press【at】mediabank.jpn.com
【at】は@
Twitterアカウント:@ITlifehack
  • ライブドアブログ