IT CIRCUS 2010 OSAKAでしゃべってきました

DSC_5878.JPG
平日の昼間にも関わらず、100名近い業界関係者の方にお集りいただきました、ありがとうございました。

正直、僕の業種のお話として、デザイナーさんが少なく、超アウェーな状態でのスタートでした。
でも何だか、新鮮かも、どう思われるかなんてどうでもよく、自分の持ってるものをいろんなジャンルからネタを出させていただきました。

で、終演したあとに、多くの方にお声をかけていただき、「資料が欲しいです」ということでしたので、遅くなりましたが、フォローアップさせていただきます。

他の地域の方のためにスライドは、端折っています。(実演の方が多かったので)

IT CIRCUS 2010のスライド抜粋(PDF:8.2MB)

もちろん、地域毎に変えていきますが、伝えたい事も共通してあるので、そこはご了承ください。

当日のスライドの内容です。

  • 【Illustrator編】
    ・手作業で大変なアートワークをJavaScriptで楽に作ってみよう
  • 【CIデザイン編】
    ・トレンド!?はき違えないで!!顧客が全て受け入れるワケがない!
     というわけで、「こんなCIデザインを求められたときに持っておきたいテクニック」
  • 【Photoshop編】
    ・Adobe Configuratorで自分カスタマイズ
    ・地方ごとに実演、その地方の企業サイトのナビゲーションをPhotoshopで真似る実演
  • 【Flash編】
    ・Flash CS5でiPhoneのタッチイベントって!?
  • 【HTML5編】
    ・ちょっとでも触れておくべき、とりあえずHTMLのデータをcanvasでグラフに図式化。

さて、次は福岡会場。
新しいネタを用意します、福岡の方、お楽しみに!(またアウェーかも・・・)

今後ともよろしくお願いします。

DSC_5875.jpg
アウェーな状態でスタート!宣戦布告!!

DSC_5878.jpg
CIデザイン編、このあと、Shadeによる、ブランドロゴの手法を実演させていただきました。

DSC_5907.jpg
「コミュニケーションとは?」というパネルディスカッションでお話させていただきました。

DSC_5918.jpg
森川氏とちょっとした意見の出し合い。

女体をwonderflで。

ちょっと前の投稿です。
実はこのデータ、POSERを元にLIGHTWAVEでデフォルメしまして、それをPapervision 3Dフレームワークで読み取りました。

ParticleGirl !?

頂点のデータだけにしたかったので、全部ポリゴンを外しました。
ああっ、、、ってアホな妄想をしながらColladaファイルに書きだしたんですが、中身を3次元座標データだけにまとめてあとは削除、もはやDAEではなくなって、読み込みソースも自前で作る羽目になりました。

ボディ、髪、オッパイ

この3つの3D座標を別々に読み取り、オッパイ部分は先に向かうほど揺れるようにしてみました。
しかしこれ、結構めんどうなのは、オッパイの先の座標から付け根の座標に向かって、Z座標の配列をソートしないといけなくて、まあ、もっと揺らしたい場合、あるパラメータを書き換えてFORKしてください、妄想しながら。。。
正直気持ち悪いくらい、ぶるんぶるん揺れてたのでわざと大人しくしてしまいました。
だめだなあ、ってか、、バカだなあ。

canvasに3000個のドット、Processing.jsを使わないと…

canvasに3000個のドット

processing_no_use.html ←クリックして見てください、Safari,Chromeあたりが速いです、Mac版でしか見てませんが…

この前書いたブログ記事のあと、「Flashとcanvasを比べるなんておかしい」なんて声をいただきました、、、すいませんすいません。。。

ただし、最近どこかのサイトで「Flashに取って代わる」、とか「Flashが要らなくなる」、とか、ずいぶんはっきりした書き方をしている所もあるから。。

で、、そのときの記事でJavaScriptのフレームワーク、「Processing.js」を使って1000個のドットを動かしたんですが、システムエンジニアの方に「フレームワークを使ったら処理も影響されるんじゃない?」って言われて、良く分かんない僕は「え?」って思いました。

で、1000個のドットを動かすのもやっとこさのProcessing.js+canvasだったんですが、(初めてProcessingを書いたに等しいので書き方としてソースの善し悪しがわからず。)結構重たい。
そんなものかと思っていましたが、Processing.jsナシで書いてみると、、

え?

割と軽快でした。

今回はブラウザでパフォーマンス比較、もうFlashとの比較はしません。。
今このマシンにあるブラウザの中で軽快な順番だと

1位がSafari
2位がChrome
3位がOpera
4位がFirefox
(全てMac版)

やっぱりSafariが軽快でした。
JavaScript、あんまりわからずに書いてみたけど、一応動きました、こんな感じで書いてみました。

僕が編曲しています。

ちょっとハズカシいけど、、、昔の音楽の仕事。

リピート山中さんってシンガーソングライターがいます。

その方、昭和のフォークソングを今も唄い続けている、素敵なおじさんなのですが、数年前、彼の曲を僕がアレンジしたことがあります、

その曲が最近アマゾンで見つかって、どういうわけだか僕の名前までクレジットされています。

http://www.amazon.co.jp/s/ref=pd_rhf_s_1?ie=UTF8&search-alias=aps&keywords=%E7%A7%8B%E8%91%89%E7%A7%80%E6%A8%B9

なぜか僕の名前が入っています。

それにしても昭和だなあ。

http://www.amazon.co.jp/%E4%BA%8C%E5%BA%A6%E7%9B%AE%E3%81%AE%E9%9D%92%E6%98%A5%E8%A1%8C%E9%80%B2%E6%9B%B2-%E3%83%AA%E3%83%94%E3%83%BC%E3%83%88%E5%B1%B1%E4%B8%AD/dp/B000GALCMO/ref=sr_1_1?ie=UTF8&s=music&qid=1265665286&sr=8-1

に入ると、

「曲目リスト」って見出しがあるので、

「夢見ることを忘れていないか」

という曲、良かったら試聴してください、多分みなさんの趣味にあうか保証出来ませんが。。

ドラムは僕が打ち込み

ピアノ、ベース、ギターは僕が実際に弾いています。

ほんと、昭和だなあ、ある意味新鮮。。。

大阪DTPの勉強部屋、開催!!

大阪でDTP関係のイベント、「大阪DTPの勉強部屋」が開催されます!
今回のテーマは「出力」。
この内容はかなり興味あり、僕も行きます。

でも、この日午前からデジハリで講義があり、途中参加です。

最近のDTP事情を知りたい方、
是非参加されてみては?

■勉強会
 3月6日 土曜日
 14時~19時
 受付 13時から

■場所
 TKP大阪淀屋橋カンファレンスセンター 
 
〒530-0005 大阪府大阪市北区中之島2-2-2
 大阪中之島ビル (旧ニチメンビル)
 B1F ホールA

【アク
セス】
 地下鉄 御堂筋線 淀屋橋駅より徒歩3分
 地下鉄 四つ橋線 肥後橋駅より徒歩3分
 京阪中之島線
大江橋駅より徒歩20秒
 

 
■参加費 2,000円(領収書の発行有)

■内容(予定)

Session
1「DTP完全データでトラブル回避」
 Illustrator 8からCS以降になって出力はどう変わったか。
 モニター・プリンタ・
印刷間の色ズレを最小限に
 実際の印刷物を用意してトラブルの事例や出力のルールを解説します。
 クラッシックOS9とOSX、ハイブ
リッドで使える実機で説明します。(G5(PowerPC))
 スピーカー:柴田勉(株)ノア・デジタル
 mixiコミュ「DTP完全
データへの道」管理人

Session 2「出力・印刷の現場から」
 出力データを受け取った現場ではナニが起こっているのか?
 
現場からの声をお届けします。
 スピーカー:村上良日
       坂口礼治
       柴田勉

HTML5 canvasのブラウザ別描画処理速度の比較をパーティクルで。

最近特に、Apple iPadが発表されるニュースより、AppleがFlashをどんどん淘汰していくような動きの方がよっぽど気になります。
Appleはどうやら HTML5を推進しているとのこと。
確かにAppleのサイトはだいぶ前からリッチコンテンツな部分にもJavaScriptを導入していましたね。
最初は「どっちも良い所あるから仕様をしっかりと見据えて使い分けるべき」と捉えていました。
でもどうやらHTML5のcanvasという要素が、Flashみたいな表現も可能ということで、色々調べてみたら、どうもスゴい所までいってるらしい。
で、色々と試していたんですが、やはりブラウザで動くわけなので、当然描画速度ってブラウザによって違うんじゃないかな?って思います。

どれに優劣を付ける訳じゃないけど、パフォーマンスがどんなものか知っておきたかった。
ついでにFlashでも作ってみた。

canvasで1000個のパーティクル

canvasの方はprocessing.jsを使って書きました、基本Javaベースで書くんですね、型の記述とかちょっと手惑いました。
1000個のパーティクルを、それぞれ移動距離をランダムに設定してランダムな向きに移動、
一気に1000個を動かすというものです。
ブラウザは今Mac環境で作ってますが、Firefox3.6, Safari4.0.4, Chrome4.0.249.49betaでそれぞれ確認しました。
結果、Safariが一番速い、ように見えました、Chromeでも同じ位だけど。
頑張れ、Firefox。ってかんじでした。
ところが、パーティクルを5000個に増やすともう、コマ送りのような重さ、とても動いてるという表現は無理でした。

で、Flashですが、全然問題ないです、やはりこのあたり、ブラウザと比較しちゃいけないんだろうけど、このあたりは断然Flashに軍配あり、といった感じでしょう。
一気に1000個から10万個に増やしても全くと言って良いほど処理落ちを感じさせないので、1000個でなんとかの状態のHTML5+canvasの描画APIは今後の課題になってくるんじゃないかな?と思います、Flashにとって代わる、というのであれば、ですが。

※【修正記事】 こういう場合はprocessing.jsを使わずに、フレームワークを使わないで書く方が結構高速に処理しました。補足記事はこちらです、惑わせてしまってすいません!

canvas用(processing.js使用)

Flash用(ActionScript 3.0使用)