月別: 2010年4月

canvasのコードヒントをDreamweaverで出るようにしてみた。

CSS3やHTML5要素のコードヒント機能拡張を作っている丸山さん（兄さん）と、夜スカイプで話をして、「へえ」なんて聞いていたけど、自分でもやってみようかな？って、本当は全然自信がなかったんだけど、ちょっと触ってみたら、ここまで出来た。

canvascode.png
canvasの勉強をしている時に、コードが補完されなかったから、あると便利だなって自分の都合ばっかり考えてたんだけど。
オブジェクトの型はなんだろうと迷っていたけど、どうやら「getContext型」みたい。
ここは正直自信がないですが・・・。
W3Cの仕様書を読むと英語だらけでモチベーションが下がったので、ココがありがたいです。

「HTML5.JP – 次世代HTML標準 HTML5情報サイト」http://www.html5.jp/

このサイトの中にcanvasの使い方を図を用いて紹介してくれているので、わかりやすいです。
ここで書かれている「ctx.fillRect()」みたいな、メソッドとか「ctx.fillStyle」みたいな、プロパティが一気に出てきます。
本当はメソッドの引数とかもヒントとして出るようにしたいのですが、ひとまずこれだけでもだいぶ楽になるので使いつつ、もうちょっと探ってみたいです。
で、どうしたらこれが出来るかというと、Mac版しかわかりませんが（丸山さんは詳しい）
/Applications/Adobe Dreamweaver CS4/configuration/CodeHints/CodeHints.xml
というファイルを触ります。
（要注意！：触って壊れても責任は持てませんよ〜）
で、このXMLファイルの4172行目あたりに下記を追加しました。

 

一行目の「Javascript Canvas Class」は妥当じゃないですね、Canvasというクラス自体は存在しないはずだから、、ここは無視してください。
で、この話を5/14（金）、デジハリ大阪校の地下のイベントでやる予定です。丸山さんも出る予定です。
ただ僕がこの日、2Fで講義をしてるのでもしかしたら懇親会でデモをするかもしれません。
もし興味があったら告知サイトをチェックしておいてください。

MacPeopleにFlash CS5の新機能記事を書きました。

macpeople20100427.jpg
MacPeople 2010年6月号に、今回Adobeより発表されたFlash CS5の新機能記事を書きました。

145ページからの
特集2：新バージョンの奥義を入手せよ！大攻略「Adobe Creative Suite5」
という特集記事です。
CS5の主要製品の新機能を紹介していて、僕はFlash担当でした。

特に大きく取り上げたのは、TLF（テキストレイアウトフレームワーク）って機能で、Flash上で縦書きや段組みなども出来る機能を紹介させてもらったほか、ActrionScript3.0が苦手なデザイナーさんでもありがたい「コードスニペットパネル」や、ActrionScriptコードのコード補完機能がFlash IDE内でもかなり良くなった点をあげました。
僕の中ではこのコード補完機能が実はもっともデカイな、と感じています。

ちなみにDreamweaverの記事は西畑さん、だと思う、多分。

やっぱり、Packager for iPhoneの記事は書きにくかったよ、、、さすがに。。

IT CIRCUS 2010 福岡で使った資料やARの素材

fukuoka_akiba.jpg

いきなりFLARToolKitを使った、ソフトバンクホークスのマスコットキャラ、「ハリーホーク」でごあいさつ。
鼻の頭にマーカーを付けて皆さんに見ていただきました。
笑っていただいた福岡の皆さん、どうもありがとうございます！
というわけで、IT CIRCUS 2010 福岡が終了しました。
で、せっかくハリーホークをLightWave 3Dでモデリング（といっても帽子がないとわかりずらい、目とくちばしだけだし。）したデータ、もしご入用でしたら、あげます。
Papervision 3Dとかでも読めるはずです。
でも基本的にお面のつもりだったので、FLARToolKitでマーカーを鼻の頭に貼ってバカやって遊んでください。

ダウンロードはこちら↓（LZH：115KB）
モデリングをどうしてるか聞かれたので、一応このブログに作業中のスクリーンショットを撮っておきますけど、LightWave 3Dはバージョン9.5からCollada（コラーだ）フォーマットの書き出しが可能になりました。
PLAYSTATION 3でも採用されているXMLベースの3Dフォーマットファイルです。
lw.png
書き出しの際に注意するとしたら、テクスチャのURLを修正しないといけない事です。
Macの場合、「user/○○〜」から始まる、絶対パスで、テクスチャを読み込むので、ミミカキエディットかなにかで相対パスに直しました。
lw2.png
あとはUVマッピング、目やくちばし、帽子が離れたオブジェクトだったので、今回はそれぞれに、同じテクスチャマップを位置づけして貼りました。
テクスチャマップはIllustratorで普通に作りました。
さて、IT CIRCUS 2010 札幌が6月9日（ロックの日）に札幌で開催されます。
詳しくは公式サイトの方でご確認ください。
僕自身としては、またARネタも面白いと思いますので、検討中です。
で、札幌では、いつもよりちょっとネタを変えます。
そもそも、IT CIRCUSって何？ってのはサイトでわかると思いますが、適当な言い方をすると、Webに関わる異業種セミナーです。
日本ウェブ協会の森川さんは、歴史的に業界長い人で、今までの業界のいきさつや歴史から、マーケティング寄りのお話まで幅広く。
ファーストサーバの森下さんはレンタルサーバ業界の裏話を、数字（売り上げ）などもバラしてぶっちゃけ話を淡々とします。
で、僕はというと完全デザイナーよりの話で、あまりコーディングとかの話は興味が薄く、
デザインやらHTML5 canvasやFlashの話とか、Illustrator漫才（ペンシルの覚田社長いわく）でライブデザインやプログラミングをやります、Webデザイナーでも使おう、3DCGツールなどの無茶ぶりな話やライブ操作などをお見せします。
お陰で「何者？」と思われている方もいらっしゃいます。
怪しいものではありません、ただ、自分でも良く分かりませんが、話しかけていただけたらうれしいです。
で、今度の札幌開催では、CSS Nite東京版でおなじみ（？）というか有名な方が共演してくださるとか、しないとか。
ちなみに僕はCSS Niteの東京版とはちっとも馴染みがありません。
どうやらその5日前にはCSS Niteの東京版では大きなイベントがあるそうですので、気になる方は行ってみてはいかがでしょうか？

Adobe station5に出ます

ピクチャ 1.png
こんな私ですが、、、

http://station5.jp/seminar/list.html

出演します。なんとAdobeさんのCS5イベント、イン東京、表参道のDTP Booster。
セッション内容ですが、IT CIRCUS 2010でよくやってる内容で、web creators5月号にも執筆した記事でもある、Illustratorについてお話しします。
無数のオブジェクトをちりばめたりして、イラスト作品を作っていく、それをJavaScriptで作っていく。
というお話です。
JavaScriptプログラム未経験者の方が対象となります。
あらかじめどういう事をやるかというと、PDFを見てください、IT CIRCUS 2010 FUKUOKAのスライドを抜粋しました。
illustrator_js.pdf (PDF: 3.5MB)
こんなグラフィックデザインにも。
イラストレータでシンボルを飛び散らせよう！！
nature-0f672952ec6928c53e6a3cde15d43664_h.jpg

こちらが1000枚の花弁を飛び散らせるスクリプトです、くわしくは当日〜！

var page = documents[0];
for (var i = 0; i< 1000 ; i++){
var symbol = page.symbols[0];
var item = page.symbolItems.add(symbol);
item.top = rand(600);
item.left = rand(800);
var scales = rand(100);
item.resize(scales, scales);
item.rotate(rand(360));
}
function rand(num){
return Math.random()*num;
}


canvasアニメーションでゲーム制作-3〜動かすには再描画！〜

さてさて、前回のサンプルでは、マウスに戦闘機がくっついてくるのはいいんですが、スタンプを押し続けたように何機も表示されますよね？

canvasはFlashのムービークリップを動かすのと違い、アニメーションしたい所は、一度背景も全部書き直しが必要なんです。

で、どうするかというと、前回のサンプルから1行だけ、ある場所に動かすだけで解決！します。
それがこのソースです。

「ctx.fillRect(0, 0, 600, 400);」の位置ですね、あと、全面を塗るために、四角形のサイズを一杯までひろげてます。
要はこれで、一度塗り、そして上に戦闘機を描き、これを繰り返しています。

ちゃんと戦闘機がついてきてます。

↓クリックしたらデモページに飛んじゃいます。

スクリーンショット（2010-04-21 0.53.59）.png

canvasアニメーションでゲーム制作-2〜new Image()とマウス座標〜

普通にイラストレータの画面です。
戦闘機を作ってみました。

スクリーンショット（2010-04-20 23.34.09）.png

なんだか頼りない戦闘機ですが、まずはこれをcanvasに表示してみましょう。
PNG形式で透過付きの状態で保存します。
これをHTMLと同じ階層に「images」というフォルダを作ってそこに「player.png」と名付けて保存しましょう。

出来たら前回のJavaScriptコードの中にちょっと追加します。

結果はこんな感じです。
スクリーンショット（2010-04-20 23.52.26）.png
解説はこんな感じです。


これを「マウスの動きに付いてくる」やつを作りましょう。
昔あったなあ、マウスに付いてくるなんてヤツ、今はそんなに見ないですか、、やっぱり。

こういう場合、なんといってもマウスの座標が分からない事には、なんともなりません。
で、色々訳あって、IEを除いたとしてもすべてのブラウザで、マウスの取得方法が一緒とは限りません。

何故かというと、canvasがブラウザの左上隅にある場合問題ないですが、
スクロールしたりして、ブラウザの左上からcanvasの位置がずれている場合、Safari, FF, Chromeなどで共通して、マウスの位置を取れません。
で、こないだ朋やんが教えてくれたやり方でこんな方法がありました。

http://cpplover.blogspot.com/2009/06/dom-level-3.html

「canvas.onmousemove = getMousePoint;」は、キャンバスでマウスが動くたびに「getMousePoint」って関数を呼びなさいって言ってます。

その中でこのように書くと、マウスの座標がそれぞれmouseX、mouseYに代入されますからこれが使えます。

そのmouseX、mouseYを、戦闘機の座標に入れてあげたらマウスと一緒に動きます。
試してみるとこんな感じです。


結果はこんな感じです。

スクリーンショット（2010-04-21 0.26.00）.png

canvasアニメーションでゲーム制作-1

スクリーンショット（2010-04-20 22.54.20）.png

あるWeb系セミナーイベントのおまけで作ったcanvasを使ったゲームです。
と言っても点数が出るわけでもなく、戦闘機を動かして、クリックしたら弾が出て敵のタコキャラを消していくって一連の流れを追って作っていきましょう。

まずcanvasですが、お決まりのパターンとして憶えておきます。

1200pxの横幅、800pxの高さのcanvasタグを書きます。
これをJavaScriptで読みにいきます。

これで、このあとはJavaScriptで変数「ctx」にドットシンタックス（ドット「.」で命令をつないでいく文法、JavaScriptやActionScriptでは定番）で書いていくことになります。

で、四角を描く方法は以下の通りです。（ソースをコピペしてcanvas対応ブラウザで見てください）

スクリーンショット（2010-04-20 23.20.57）.png 

 ポイントは「ctx.fillRect(0,0,300,200);」です。
ctxというキャンバスのスクリプトが書ける場所に「fillRect」という四角形を描く関数を使って書いてます。
（）の中の座標は、横座標の開始点、縦座標の開始点、長方形の横の長さ、長方形の縦の長さ、と、なります。

今回は左上隅に横300px、縦200pxの長方形を描いた訳です。

で、次は四角形ではなく、IllustratorやPhotoshopなどで作ったPNG画像を読み込んで表示してみましょう。

web creators紙面として最終の5月号に記事を書きました。

web creators 2010年5月号
今更ですが、、web creatorsが5月号をもって、雑誌という体制を終えてwebサイトに移行するらしく、最後の紙面となる連載記事を僕が担当させていただきました。

思えば執筆デビューしてから1年半程でしょうか、編集部の方にはほんっとお世話になり、いい勉強をさせてもらいました。

今、ちょっと別の編集部からのお話があって、そちらを書いています。
紙面版web creatorsが終わるので、もう執筆も無いかな？と思ってたら、なにかの巡り合わせか、ただの偶然か。。

よろしくお願いします、新しい編集部さん。

iPadで自作iPhoneアプリを試してみた

IT CIRCUS 2010 FUKUOKAで共演させていただいた、株式会社ペンシルの覚田社長がiPadを持ってきていた。
覚田さん、僕がFlash CS5ベータで作った習作アプリ「モグタッチ」をこっそりとiPadにインストールしてくれていた。
iPadでもちゃんと動いていました。
拡大、原寸のボタンも出ていて、プレイしているとこんな感じです。
それにしても今日のアップルの発表、なんだそりゃ～。
http://journal.mycom.co.jp/articles/2010/04/09/ip4sdk/index.html

ここはAdobe頑張ってほしい。