mattodesign blog

感想としては「孫正義のバイタリティの高さが尋常じゃない」というとこ。
正直勝てる気がしない、と若干へこみつつもヤル気が出る一冊。

実は、孫正義のことは、Twitter始めるまではあまり好感を持っていなかったんだけど、最近はかなり尊敬してます。この本読んでますます好きになった感じ。

今となっては人気者だけど、昔は何百億の借金をかかえたり、持ち込んだアイデアを他の企業に盗まれたりと、かなり苦労したみたい。だけど絶対にあきらめない精神が孫正義の違うところ。

ふつう何百億の借金をかかえたら、それだけで人生終わったと考えそうだけど、孫正義はいかに借金を返せるビジネスをするか考える。そしてすぐさま実行に移す。この実行力と決断力の早さは真似したい。

あと、実際はこの本はiPadの無料アプリ（iTunesリンク）で読みました。
無料ですよ無料。絶対に読むべき！！

2010年7月30日 01:14

2010年1月19日 02:31

前にもやったことのある動体検知ですが、認識率悪かったり最適化できてなかったりと改善点あったので、もっかいやってみた。


動体検知して何しようと思い、最初は動いた部分だけパーティクルで崩れるようにしてたのですが、いまいち良い表現にならず、流行りのみかんを出してみることにしました。
虫みたいできもい。

以下は備忘録的なメモです。

・カメラ映像はデフォルトだと左右反転してしまう
これだとちょっと気持ち悪いので、Matrixを使って鏡みたいに反転させた。
まずscaleを-1倍して左右を反転。そして、対象のビットマップの幅分をx方向に移動させてやればOK。

// カメラ映像を左右反転してdrawする
_mat = new Matrix( -1, 0, 0, 1, _videoBmd.width);
_videoBmd.draw(_video, _mat);

・動体検知
要は、1フレーム前の映像と現在の映像の差異をBlendMode.DIFFERENCEで調べて、動きがあった部分のピクセルを0xFFFFFFFFで表示。
0xFFFFFFFFで表示されたピクセル情報を_particleListに格納してパーティクルを発生させている。

動体検知の映像は表示されずに、裏で処理してるので、見たい場合は_oldBmdをaddChildしてやれば見れます。

動体検知部分のソースがこちら。
色々な方のソースを参考にしているので、他にもいぱい方法はあるはず！

// 動体検知
_oldBmd.copyPixels(_videoBmd, _videoBmd.rect, _pt);
_oldBmd.draw(_beforeBmd, null, null, BlendMode.DIFFERENCE);
_oldBmd.threshold(_oldBmd, _oldBmd.rect, _pt, ">", 0xFF222222, 0xFFFFFFFF);
_beforeBmd.copyPixels(_videoBmd, _videoBmd.rect, _pt);

// 動体検知情報を_particleListに格納
var margin:int = 20;
for (var x:int = 0; x < _oldBmd.width; x = x + margin) {
    for (var y:int = 0; y < _oldBmd.height; y = y + margin) {
        if (_oldBmd.getPixel(x, y) == 0xFFFFFF) {
            _p = new Particle();
            _p.x = x;
            _p.y = y;
            _particleList.push(_p);
        }
    }
}

と、2009年も残すところあと3日！！
よいお年を！！


来年はもっとブログ更新するようにしよ。





2009年12月28日 10:41

久々にWonderflしました。
今回は音とパーティクル連動の勉強です。

本当はマウスホイールで早送り・巻き戻しできる擬似DJアプリ（？）作ろうと思ったのですが、
音の概念が深く理解できず挫折・・・。
Flashでもっと簡単にSoundを扱えるようになってから挑戦します。

で、今回できたのがこれ。


以下個人的メモ。

・入力したテキストのビットマップへの変換

// 入力したテキストをビットマップ変換用のテキストフィールドに入れる
var tf:TextField = new TextField();
tf.text = _tf.text;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.setTextFormat(new TextFormat("_sans", 10, 0xFFFFFF));

// 入力したテキストを一時格納用ビットマップデータにdraw
var matScale:Number = 50 / tf.length;
var mat:Matrix = new Matrix(matScale, 0, 0, matScale, (STAGE_WIDTH - tf.width * matScale) >> 1, (STAGE_HEIGHT - tf.height * matScale) >> 1);
_bmd.draw(tf, mat);

工夫点としては、入力した文字数に応じて、表示ビットマップ（パーティクル文字）の大きさを変えているところです。
単純に1文字の場合最大Scaleを50として、あとは入力文字数でScaleを割っているだけです。
あと、色々な方のソースを見て勉強になったのが、ビット演算（ビット単位シフト演算）。
 (STAGE_WIDTH - tf.width * matScale) >> 1は (STAGE_WIDTH - tf.width * matScale) /2と同意。
つまりx >> y は x / (2^y)ということです。
詳しくはこちら。

・波形データをパーティクルの動きに変換

// 波形データを取得
SoundMixer.computeSpectrum(bytes, false, 0);

// 波形データをパーティクルの動きに変換
_canvas.lock();
_canvas.colorTransform(_canvas.rect, COLOR_TRANSFORM);
_canvas.applyFilter(_canvas, _canvas.rect, _pt, _filter);

for (var i:int = 0; i < CHANNEL_LENGTH; i++)
{
    xrf = bytes.readFloat();
    yrf = bytes.readFloat();
   
    for (i = 0; i < _particleArray.length; i++)
    {
        p = _particleArray[i];
        setX = p.x + Math.round(xrf * Math.random() * 300);
        setY = p.y + Math.round(yrf * Math.random() * 300);
        _canvas.setPixel32(setX, setY, p.c);
    }
}
_canvas.unlock();

結論から言うと、上記ソースでは理想の動きが出ませんでした。
パーティクルの動きをよく見ると分かるのですが、右上と左下にパーティクルが散りません。
setX、setYの式が要調整です。時間見つけてやってみます。

あと、colorTransformの挙動がよくわかりませんでした。
パラメータはトライ＆エラーでチェックしながらやってるので、いい加減です。
なによりOKボタン押しまくるとfpsがどんどん落ちてくので、最適化しなきゃなんですが、
知識不足でできませんでした。
まぁ、今後の課題として・・・。

あ、159行目のコメント「// テキストが未入力の場合は"文字を入力してください"を表示」は
「// テキストが未入力の場合は"Wonderfl"を表示」の間違いです。スミマセン＞誰。

  2009年12月11日 00:44

めちゃくちゃ簡単だったので、「iPhoneテンプレートfor MT」ってのを使ってブログをiPhone用に最適化してみた。
導入方法はダウンロードファイル内の「readme.txt」に最高に詳しく書かれています。

これが導入後のブログトップ。




これが記事ページ。



唯一惜しいのが、iPhoneからのアクセスを自動判別している訳ではないので、
直接iPhone用のURLを見る必要がある。
URLはこれ。
http://mattodesign.com/blog/i/
（ユーザーエージェントをサーバで判断すればいけるんだろうか？） 2009年12月 1日 17:35

情報管理方法が散らばってきたので、ここら辺で整理してみる。
今使ってるサービスはこんな感じ。

・Twitter（TwitBird）
・GoogleReader（RSS）
・Read It Rater（Read It Rater）
・GoogleCalender（カレンダー）
・Del.icio.us（Bookmarks）
・Evernote（Evernote）


優先度は付けられないけど、上から順に使用頻度が高いかな。
と、言っても毎日使ってるけど。

ツールを使う前提条件として、「iPhoneでも同期できる」ということが重要。
なので、上記ツールすべてiPhoneアプリも入れている。
括弧内が使っているアプリ名です。

それぞれの個人的な使い方をさらっとまとめてみる。

・Twitter（TwitBird）
基本、iPhoneから通勤などの隙間時間にチェック。
気になった記事はアプリの機能でRead It Raterに送って後で見る。
情報のスピードはやっぱりTwitterが一番。

・GoogleReader（RSS）
説明するまでもないですね。
iPhoneでのチェックが多い。
こちらも気になる記事はアプリの機能でRead It Raterに送る。
また、リーダーに登録しておくと便利なサービスとしてReadtwitがあります。
これはTwitterで流れたURLをまとめてRSS配信してくれるサービスです。

・Read It Rater（Read It Rater）
これは「後で読む」系のサービス。
一時的なブックマークみたいな位置づけ。
FireFoxのアドオンなんかもあるから、各所のPC間の同期も問題なし。
ただ、使い勝手がいいかと言われると微妙・・・。
iPhoneアプリのTwitBirdとRSSにRead It Raterの機能が付いているので、しょうがなく使っているくらい。
ちなみに、同じようなサービスでInstapaperってのもあるけど使ったことないです。

・GoogleCalender（カレンダー）
これも説明の必要はないですね。
用途としては、スケジュールおよびTODO管理です。
こちらの記事を参考にPCとiPhoneを同期してます。

・Del.icio.us（Bookmarks）
ソーシャルブックマーク。
はてぶよりデザインが好きだし、RSSリーダーでの表示がシンプルなので、
こっち使ってます。

・Evernote（Evernote）
何でも保存のテキストエディタ。
思いついたメモやら簡易的なTODOやらブログネタやらetc.
今回のブログ記事もこれでざくざく書いてます。



と、まぁざっと書いてはみたのですが、未だに困っていることがあります。

それはDel.icio.usやEvernoteで使う「タグ付け」です。

「タグ付け」は、情報をあるまとまりで管理したり、後々検索しやすくする際には便利なのですが、タグを付けるときにいつも悩んでます。あまり多くのタグで管理していても「何のタグつけたっけ？」とか「この場合は何のタグ付けるっけ？」
となってしまい、結局偏ったタグしかつけず、後で検索でない・・・といったことになります。
このブログのカテゴリ分けもある意味タグ付けなので、整理しなければ！

これは今後自分なりのルールを決める必要があるかな。

なので、情報管理の今後の課題は、「タグ付けのルール化」！！
それにしてもiPhoneへの依存がヤバいな。




2009年11月21日 22:33

試しに入れてみました。

サンプルソースを表示してみます。

いい感じです。

var context:LoaderContext = new LoaderContext(true);
loader = new Loader();
loader.load( new URLRequest("xxxxxx"), context );
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, complete);

導入にあたって、つまずいた点をメモ。

まず参考にさせていただいたのはここ！
手順通りに進めるも、全然表示されません・・・。

色々調べているうちに、解決した記事がこちら！
ちょっと転載させてもらいます。

window.onload = function() {
dp.SyntaxHighlighter.HighlightAll('code', true, false);
}

上記スクリプトを「webscript.js」で保存して、
SyntaxHighlighterのディレクトリにアップします。
んで、ヘッダに下記を追記。

<script type="text/javascript" src="http://mattodesign.com/blog/syntaxhighlighter/webscript.js"></script>

ということで無事表示されました！
過去の記事にも適用するのは億劫なので、今後はこれで。

あと、AS3用のjsはこちらにあります。
shBrushAS3.jsをヘッダに追加して、class名にactionscriptを指定するだけ！




2009年11月11日 17:38

試しにCheckmateをやろうと思ってはまったのでメモ。

ローカル上で普通に動いたので、「いざ、わだふる」と思いつつコードをアップすると、セキュリティサンドボックスが・・・。

どうやら、外部ドメイン画像をBitmapDataにしてdrawするとでるみたい。
ちょっと調べてみたら、ドンピシャの記事（_level0さん）があったので、助かりました！
正確には、記事内ので紹介されていたこれに助けられました。
要は、外部ドメインの画像に対して、LoaderContextをtrueにしなさいよってこと。

var context:LoaderContext = new LoaderContext(true);　//ここ！
loader = new Loader();
loader.load( new URLRequest("http://swf-dev.wonderfl.net/static/assets/checkmate04/tree.jpg"), context );　//第２引数でLoaderContextを指定
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, complete);

で、やっとアップできたのがこれ。




2009年10月19日 00:21

仕事終わってから粛々と長いこと作ってきたサイトをやっと公開しました。
細かい調整できてないけど形はできたので、まぁいいか。
2009年10月 4日 22:37

フルFlashサイトを作る時にブラウザ画面の最小サイズを決めておくことがあります。
AS側で最小サイズの場合の処理を書いても良いけどなかなか面倒。

そこで活躍するのがswffit。
詳しくはこちら。サンプルもあります。

swfobjectばりに有名らしいですが、知りませんでしたよ。ええ。
で、今回swffitを使う場合に初歩的なミスではまったので、メモ。

swffitを使用する場合はswfobjectと併用しなければ動作しません。
そこでHTMLのヘッダに下記を記述。

<script type="text/javascript" src="swffit.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
	var vars = {};
	var params = { scale:"noscale", menu:"false", allowScriptAccess:"samedomain", allowFullScreen:"true" };
	var attributes = { id:"flashContent", name:"flashContent" };
	swfobject.embedSWF("index.swf", "flashContent", "100%", "100%", "9.0.45", "expressInstall.swf", vars, params, attributes );
	swffit.fit("flashContent", 1000, 600);
</script>

swffit.fit("flashContent", 1000, 600);の1000, 600が今回指定したい最小サイズ。
これで一件落着。

と、思ったら全然効きません。
小１時間はまって心が折れそうになりつつも悪戦苦闘してましたが、
よくよくソース見てみると・・・

<script type="text/javascript" src="swffit.js"></script>
<script type="text/javascript" src="swfobject.js"></script>

・・・読み込み順が逆じゃね？

ということで、上記ソースを以下のように修正したら全然動きました。

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="swffit.js"></script>


と、久々のブログ更新でした。

2009年10月 4日 15:06