約2ヶ月前より、iPhoneアプリ開発の勉強をスタートしました。
iPhoneアプリ開発に関しては、右も左も分からない田舎ペーペーな状態からスタートであって、
何から始めればいいのかサッパリ検討がつきません。
ゆえに何か掴めるまで、本を買いあさり読みまくる手法で攻めることにしました。

以下、本単体に対するレビューというより、
僕の勉強日記な部分が強いです。
僕の実力はActionScriptがちょいちょいぐらいなので、
ばりばりプログラマーさんや、頭の回転が速い人にとっては、 参考にならない記事になるかと思います。
※レビューはリンク先のamazonの方が充実してます。

2010.05〜2010.07 我が脳ミソが自信をなくした日々

上から読んだ順です。

はじめてのiPhoneプログラミング

開発についての必要知識が一通り詳しく載っている本。
題名のとおり、はじめてのiPhone本として読んだが、10%も理解できなかった。
ある程度全体を理解して最後の仕上げに読むべき本かもしれない。

iPhone SDK アプリケーション開発ガイド

必要な基本知識が詰まった本で、グラフィックやサウンド等突っ込んだ部分の記述もある本。
こちらも、10%も理解できなかったものの前回読んだ本と被る場所もあり、
「この問題見たことあるぞ！」っという受験生気分になれてテンションUP。

Objective-C逆引きハンドブック

先にこの本に目を通すべきだった！
言語であるObjective-Cを全然分かっていなかったことに気づく。
変数定義、配列、ループ等、基本制御から、各リファレンスに目を通して雰囲気は掴めた。

iPhone SDK リファレンス大全 実践インターフェース構築

挿入画像が多くて見やすくやさしい本。
基本部分をゆったりと多くの誌面を使って説明してくれた本。
一番はじめに読めばよかったかもしれない。

iPhone SDK 3 プログラミング大全 ゲームプログラミング

こちらも挿入画像が多くて見やすくやさしい本。
ゲームプログラミングとあるが、世に出ているような凄いゲームを作るためのものではない。
iPhone開発の基本部分を押さえながらの開発全体像が把握できたような。

ライトウェイト・プログラマのためのiPhoneアプリ開発ガイド

サンプルアプリを解説していく本
ライトウェイト・プログラマとあるが、中のコードは結構複雑。。
開発手法を学ぶには良いと思います。

現在、Webから拾ってきたサンプルコードを試したりしてるのですが、
本で読んだことを全く理解できてないことに気づきました。
でも、「何をすれば良いか全く分からない世界」から、
「どうやって実現すれば良いか分からない世界」へと
旅立つことが出来た気がします。

MySpaceのカスタマイズで苦戦したのでメモ。
アーティストアカウントでのカスタマイズの話であり、個人アカウントでの カスタマイズではないです。
個人アカウントはプロフィール2.0とかいうのが使えるらしい。

※2010.06.19現在の仕様のため今後変わる可能性多いにありです

苦戦の流れから苦肉の対処

まずは基本的なデザイン変更方法

「プロフィール編集」→「アーティスト詳細タブ」→「バイオグラフィー」にHTML/CSSを記述。

ハックくさい方法だが、公式ブログに書かれています。

アーティスト詳細画面で問題発生

実行ボタンが行方不明。
MySpaceのレイアウトそのままで、CSSで色付けしていくだけなら問題ないのですが、 ちょこっとレイアウトを変えたり、不要な部分を表示しないように変更を加えると、 下記のようにプレビュー表示用のCSSがぶつかってしまって必要な実行ボタンまでも 非表示になってしまったり、埋もれてしまったりします。

このままでは、編集できないので、苦肉の策で対処。

javascript: editInterest('bio');

上記スクリプトをブラウザ上で実行（アドレス欄に記述してエンター）
これでなんとかアーティストバイオグラフィーの編集が可能に。

さらにプレビュー画面で問題発生

またまた実行ボタンが行方不明。
編集してプレビューボタンを押すと、アーティスト詳細画面と同様に 実行ボタンが無い。
このままでは、編集を反映できないので、苦肉の策で対処。

table table table div form input 
{
display: block;
visibility: visible;
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
}

上記CSSをバイオグラフィーに記述するHTML/CSSに入れる。 すると、以下のように送信ボタンがひょっこり現れる。

そもそも、バイオグラフィーの編集自体できないから、CSS追加できないよって方は、 Firebugで編集してボタンを表示させるべし。

これで何とか編集できるようになった。

その他、MySpaceデザイン編集における悲しい仕様

・CSSのID指定が出来ない。
フォーム入力不可の文字があった、#を受け付けてくれない。
CSSハックの文字も受け付けないのが何個かあり。

■追記2010.07.12

div[id="hoge"]{}

・サーバーが不安定。
やたら重かったり、原因不明のサーバーエラーが頻繁に出たり。。

・吐き出されるHTMLがゴリゴリのテーブル組。
CSSによる制御が厳しい。

FlashBuilderのコードアシスト機能を飛躍的にUPしてくれるSourceMateを入れたものの[SWF(backgroundColor="0x0")]と指定すると以下のようなコンパイルエラーとなって困ったものの解決したメモ。

エラー内容

Unrecognized attribute 'backgroundColor' in [SWF]

バージョンが上がってそのうち対応されると思いますが。。
現バージョン「sourcemate_1.0.1.v05172010」ではエラーとなっています。

対処方法

FlashBuilderの「ウィンドウ > 設定」より、「SouceMate > Metadata」を選択し、【SWF(Specifies application attributes)】を選択してEditボタン

下のようなウィンドウが開いたら、Addボタンを押して【backgroundColor】を追加。DatatypeはStringでOK。一番右のチェックボックスが勝手にONになってたけど、他と合わせてOFFにした。どういう機能かは不明。あとはOKボタン。

これで多分解決

ちなみに今までFlexBuilder3 + Snip Tree Viewにて開発していたのですが、SourceMateにもスニペット機能があるので、FlashBuilder + SourceMateにて前環境と同じように使えそう。

大阪てら子 23 「みんなで作る特別授業」行ってきました。
武田鉄矢ばりに参加者全員が先生になるという勉強会です。

今回は、怖くて手を出せなかった「マトリックス」を元に画像変形に挑戦してみました。
※アフィン変換や、射影変換と言われる変換方法を理解してから、actionscriptを書きたかったのですが、ちょっと理解不可能だったので、とりあえず、平行四辺形と台形の変形を実現することに力を注いでみた。

平行四辺形な変形

wonderflにUPしてみた

とりあえず、平行四辺形に変形してみた。Matrixのa,b,c,d,tx,tyのプロパティを以下のように設定し、画像に適応すると平行四辺形に変形します。

adobeのデベロッパーセンターに野中さんの記事より
a: 水平方向の伸縮率 = 変換後の幅/もとの幅
b: 垂直方向の傾斜率 = 垂直方向の傾斜/もとの幅
c: 水平方向の傾斜率 = 水平方向の傾斜/もとの高さ
d: 垂直方向の伸縮率 = 変換後の高さ/もとの高さ
tx: 水平方向の移動ピクセル数
ty: 垂直方向の移動ピクセル数

Matrix部分

private function _getTransformMatrix($pt0:Point, $pt1:Point, $pt2:Point):Matrix
{
	/*
	http://www.adobe.com/jp/devnet/flash/articles/matrix_class.html
	a: 水平方向の伸縮率 = 変換後の幅/もとの幅
	b: 垂直方向の傾斜率 = 垂直方向の傾斜/もとの幅
	c: 水平方向の傾斜率 = 水平方向の傾斜/もとの高さ
	d: 垂直方向の伸縮率 = 変換後の高さ/もとの高さ
	tx: 水平方向の移動ピクセル数
	ty: 垂直方向の移動ピクセル数
	*/
	var w:Number = _bmd.width;
	var h:Number = _bmd.height;
	var mat:Matrix = new Matrix();
	mat.a = ($pt1.x - $pt0.x) / w;
	mat.b = ($pt1.y - $pt0.y) / w;
	mat.c = ($pt2.x - $pt0.x) / h;
	mat.d = ($pt2.y - $pt0.y) / h;
	mat.tx = $pt0.x;
	mat.ty = $pt0.y;
	return mat;
}

Matrixを適応する部分

	_canvas.transform.matrix = newMatrix;

※_canvasに画像をaddChildしてます。 ※_canvasはSprite。

台形な変形

wonderflにUPしてみた

平行四辺形な変形は、どう頑張っても台形の変形は実現できません。ということで、三角形を２つ使用して台形を実現させます。
三角形？？何故に？？という方は以下の画像を！

三角形といえど、平行四辺形な変形と同様です。
多分ですが、この三角形はポリゴンと呼ばれるやつなのかもしれない。（推測）

Matrixを適応する部分

	_canvas.graphics.clear();
			
	//分割した１個目を描画
	_canvas.graphics.lineStyle(1 , 0x00FF00);
	_canvas.graphics.beginBitmapFill(_bmd , newMatrix1 );
	_canvas.graphics.moveTo(bP0.x , bP0.y );
	_canvas.graphics.lineTo(bP1.x , bP1.y );
	_canvas.graphics.lineTo(bP2.x , bP2.y );
	_canvas.graphics.endFill();
			
	//分割した２個目を描画
	_canvas.graphics.lineStyle(1 , 0x00FF00);
	_canvas.graphics.beginBitmapFill(_bmd , newMatrix2 );
	_canvas.graphics.moveTo(bP3.x , bP3.y );
	_canvas.graphics.lineTo(bP1.x , bP1.y );
	_canvas.graphics.lineTo(bP2.x , bP2.y );
	_canvas.graphics.endFill();

台形への描画は、ちょっと面倒くさいけど、beginBitmapFill とmoveToとlineToを使って描画してます。

上記の理解を元に遊んでみた

その１
その２

三角形の分割数を増やしたりで色んな表現ができそうな気がします。ただし、分割の方法や、ポイントの配置方法などがちょっと難しい。手探り状態なので色々試してみるしかないか。
view source

Flex BuilderにはPublishing source codeというViewSource機能（ソースをHTMLへ変換してプレビューが出来る機能）があって、これが凄い便利です。

Saqooshaさんがソース公開する時によく使われていて、どうやっているんだろう？？と調べてみたら、いつも使っているFlex Builderの機能に存在していたという。全く知らなかった。

ViewSourceデモ

ViewSource

今までソース公開にzip化したファイルにリンクという方法でやってたのですが、断然、Publishing source codeで吐き出したHTMLファイルの方が手軽で見やすい。ピックアップしたいソースはjavascriptのSyntaxHighlighterでブログに直に書いて、全体ソースはViewSourceな感じがいいかな。

Publishing source codeの場所

プロジェクト - リリースビルドの書き出し - ソースの表示

１、プロジェクト - リリースビルドの書き出し

２、リリースビルドの書き出し - ソースの表示

ActionScriptソースをHTMLへ変換（コンバーター？）なものを探してたわけですが、ちょうどいいもん見つけれた。Flex Builderはやっぱり偉大だ。