カテゴリ別記事リスト秋葉秀樹個人ブログ

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

秋葉秀樹 (2010年4月29日 15:39) | コメント(0) | トラックバック(0)

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

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

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

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

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

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

秋葉秀樹 (2010年4月12日 20:48) | コメント(0) | トラックバック(0)

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

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

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

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

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

秋葉秀樹 (2010年4月 9日 22:24) | コメント(0) | トラックバック(0)

IT CIRCUS 2010 FUKUOKAで共演させていただいた、株式会社ペンシルの覚田社長がiPadを持ってきていた。

覚田さん、僕がFlash CS5ベータで作った習作アプリ「モグタッチ」をこっそりとiPadにインストールしてくれていた。

iPadでもちゃんと動いていました。

拡大、原寸のボタンも出ていて、プレイしているとこんな感じです。

それにしても今日のアップルの発表、なんだそりゃ～。

http://journal.mycom.co.jp/articles/2010/04/09/ip4sdk/index.html

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

Flash CS5でiPhoneアプリを作りました

秋葉秀樹 (2010年3月12日 06:49) | コメント(0) | トラックバック(0)

初のiPhoneアプリ開発デビュー！
http://itunes.apple.com/jp/app/id360846210?mt=8

アプリ名「モグタッチ」
キッズ向け（キッズでiPhoneユーザが多いかどうかは微妙だけど）のシンプルなモグラたたきアクションゲームです。
制限時間内にモグラをタッチして昇天させてください。
ステージをクリアするたびにモグラが1匹ずつ増えていき、制限時間も徐々に短くなっていきます。
ただそれだけです・笑
お暇なときに遊んでやってください、もちろん無料なので。。
あと3GとiPod Touchの環境では未検証（！）です。

このアプリはのAdobe Flash CS5のベータ版「Packager for iPhone」という機能で作りました。

CSS Nite in KANSAI, LP1が終わりました

秋葉秀樹 (2010年3月 7日 13:47) | コメント(0) | トラックバック(0)

半年近く前から計画していたCMS特集勉強会、CSS Nite in KANSAI, LP1〜POWER USER'S SUMMIT 2010〜が終わりました。

参加者総勢240人！

今までそんな規模のセミナーはやった事が無いのでとても心配があり、胃が痛かったこともありましたが、スタッフのみんな、会場の皆さんのお陰でなんとか無事（？）成功する事ができました。

でも、なにより今回苦労されたのはパーワーユーザのみなさんではないでしょうか？ cremaさん、太田さん、勝又さん、藤井さん。
事前準備はものすごく大変だったと思います、こんな無茶、本当に引き受けてくれて。
お疲れさまでした、そしてありがとうございました。

フォローアップ記事は徐々に上がってくるそうです。
CSS Nite in OSAKA公式サイトのほうで確認してください。

なお、CSS Nite公式サイトの方では早くも参加者の方のレポートが紹介されています。 http://cssnite.jp/archives/post_1771.html

アンケートには色んなご意見をいただきました。
厳しい意見ももらいました。
で、司会者である僕に対する意見も、好評と批評をいただくという、まあそれだけこのイベントは関心を持っている人が多かったんだな、と思います。

で、僕をはじめとする主催者側にもらったご意見として。。

・出演者の顔が見えない、声が聞き取りにくい、スクリーンが見えにくい　→キャンセル待ち70名以上の方がいらっしゃって、なるべく参加していただきたく、会場を急遽変更しました、後ろの方のためにスクリーンを調達してきましたが、やはりそういった声が聞こえると言う事で、次回からの会場選びはしっかり考えていこうと思います。

・司会者（つまり僕です）が上から目線、出演者にプレッシャーを与え過ぎ
　→すいません。
　　でも・・・スタンスはこのままで行こうと思います。

リハーサル風景とかの写真。　撮影：おかだよういち（s-style-arts）

会場となったTKP大阪梅田ビル。なんと、阪神高速道路がビルの中を貫通しています。

リハーサル準備中、顔が手で隠れているけど、鳥取から実行委員として駆けつけていただいた丸山章さん（兄さん！）、テクニカル・機材周辺を担当。こんどCSS Nite in KYOTO, Vol.2に出演されます。各出演者、持ち込みマシンを入念にチェック中。

会場の準備風景、スタッフは12時入り、CPIの方やファーストサーバの方も会場設営を手伝ってくださいました。

怪しい人、わたくしでございます！

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

秋葉秀樹 (2010年2月12日 01:46) | コメント(0) | トラックバック(0)

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、あんまりわからずに書いてみたけど、一応動きました、こんな感じで書いてみました。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>canvas prosessing.js not use</title>
<style type="text/css" media="all">
</style>

</head>

<body>
<canvas id="canvasID" width="600" height="600"></canvas>
<p>パーティクルの数 : <span id="point">3000</span></p>
<script type="text/javascript">
<!--
var r = 0.75;
var width = document.getElementById('canvasID').width;
var height = document.getElementById('canvasID').height;
var ctx;
var timer;
var len;
var pList = [];

window.onload = function() {
	len = document.getElementById('point').innerHTML;
	init();
};

function init() {
	var canvas = document.getElementById('canvasID');
	ctx = canvas.getContext('2d');
	pList = [];
	ctx.fillStyle = "black";
	ctx.rect(0,0,width,height);
	ctx.fill();
	for (i = 0 ; i<len ; i++){
		var myX = rand(width);
		var myY = rand(height);
		var vx = rand(1)*10-5;
		var vy = rand(1)*10-5;
		pList[i]=[myX,myY,vx,vy];
		ctx.beginPath();
		ctx.fillStyle = "red";
		ctx.arc(myX,myY,r,0,Math.PI*2,true);
		ctx.fill();
		}
	timer = setInterval(draw,33);
}

function rand(num){
	return Math.random()*num;
}

function draw() {
	ctx.fillStyle = "black";
	ctx.rect(0,0,width,height);
	ctx.fill();
	for (i = 0 ; i<len ; i++){
		var myX = pList[i][0];
		var myY = pList[i][1];
		var vx = pList[i][2];
		var vy = pList[i][3];
		myX += vx;
		myY += vy;
		if(myX<0) myX = width;
		if(myX>width) myX = 0;
		if(myY<0) myY = height;
		if(myY>height) myY = 0;
		
		pList[i]=[myX,myY,vx,vy];
		ctx.beginPath();
		ctx.fillStyle = "red";
		ctx.arc(myX,myY,r,0,Math.PI*2,true);
		ctx.fill();
		}
}

-->
</script>
</body>
</html>

僕が編曲しています。

秋葉秀樹 (2010年2月 9日 07:00) | コメント(0) | トラックバック(0)

ちょっとハズカシいけど、、、昔の音楽の仕事。
リピート山中さんってシンガーソングライターがいます。
その方、昭和のフォークソングを今も唄い続けている、素敵なおじさんなのですが、数年前、彼の曲を僕がアレンジしたことがあります、
その曲が最近アマゾンで見つかって、どういうわけだか僕の名前までクレジットされています。

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の勉強部屋、開催！！

秋葉秀樹 (2010年2月 9日 06:25) | コメント(0) | トラックバック(0)

大阪で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のブラウザ別描画処理速度の比較をパーティクルで。

秋葉秀樹 (2010年2月 9日 04:32) | コメント(0) | トラックバック(0)

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

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

canvasで1000個のパーティクル（重たくなります）
Flashで10000個のパーティクル

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使用）

package  {
	
	import flash.display.*;
	import flash.events.*;
	
	[SWF(width="300", height="300", backgroundColor="#FFFFFF", frameRate="30")]
	
	public class ParticleTest extends Sprite {
		var _width:uint = 300;
		var _height:uint = 300;
		var len:uint = 10000; //パーティクル1万個
		var pList:Array = [];
		var canvas:BitmapData;
		public function ParticleTest() {
			// constructor code
			if(stage) init();
			else this.addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init (e:Event=null):void {
			canvas = new BitmapData(_width, _height, false, 0x00000000);
			addChild(new Bitmap(canvas));
			for (var i:uint = 0 ; i<len ; i++){
				var particle:Particle = new Particle();
				particle.x = rand(_width);
				particle.y = rand(_height);
				particle.vx = rand(1)*10-5;
				particle.vy = rand(1)*10-5;
				particle.col = rand(0xFFFFFF);
				pList.push(particle);
			}
			this.addEventListener(Event.ENTER_FRAME, enterframeHandler);
		}
		
		private function enterframeHandler (e:Event):void {
			canvas.fillRect(canvas.rect,0x00000000);
			for (var i:uint = 0 ; i<len ; i++){
				var pt:Particle = pList[i];
				pt.x+=pt.vx;
				pt.y+=pt.vy;
				if(pt.x <0) pt.x=_width;
				if(pt.x >_width) pt.x=0;
				if(pt.y <0) pt.y=_height;
				if(pt.y >_height) pt.y=0;
				canvas.setPixel(pt.x,pt.y,pt.col);
			}
		}
		
		private function rand(num:Number):Number {
			return Math.random()*num;
		}
	}
}

class Particle {
	var x:Number, y:Number, vx:Number, vy:Number, col:uint;
}

web creators vol.99にIllustratorの記事を寄稿しました

秋葉秀樹 (2010年1月30日 03:25) | コメント(0) | トラックバック(0)

99号目となるweb creatorsの特集記事「WEBの作業が楽になるテクニック総まとめ」に寄稿しました。

題して「Illustrator内で完全にシンボル化しFlashにインポートする」というものですが、年末年始激務に追われ、編集部に「もうだめ〜」って言って今回は甘えて1記事だけ書かせていただきました。すいません、編集部の方、次からはなるべく貢献します。。

しかし今まで寄稿してきた内容、振り返ってみると色んなジャンルの記事書いてるな、何が得意な人と思われているのか、実は自分が一番わかってない。。。

カテゴリ別：「Diarys」の一覧