2BLOG

air 2.5の公開でandroidアプリ開発の話題が過熱する中、すっかり忘れ去られた感のあるpackager for iphoneですが最近いろいろ試しています。

packager for iphoneでは新しいFlex SDK Heroのmobile用クラスライブラリやコンポーネントが使えない上、iOSが元々備えるUIKitも使えない。
これはつまりボタンもスクロールバーもなにかもすべて1から自分で作らなきゃいけないってことを意味します。
といってもWebコンテンツだと大抵の場合ボタンやスクロールバーといったUIは毎回のように作ることが多い訳で普段通りだぜ！と思うのですが、スマートフォンアプリの場合、小さい画面ゆえの切り替えの多さ、タッチパネルゆえのユーザーアクションの多さ・煩雑さが相まってはるかに面倒です。
とくにHeroをかじった後なんかだとあらかじめ用意されているコンポーネントの有り難みがよく解る感じ。

さらにpackager for iphoneでは使えないiPhoneデバイス機能が沢山あって、これならandroidのほうがとか、似たような技術でもJSでUIKitにアクセスできるってことでこれまた旬な感じのtitanium mobileなんかのほうが魅力的だったりとか…。あちこちに目移りしてしまいますね。

で思うに比較していくと現状のpackager for iphoneはそれほど魅力的でないものになって行っちゃうので、使うなら普段作りなれているスタイルをそのまんま使って作るっていうメリットを十分に活かしていく感じがいいんじゃないかと。Heroのモバイル機能使って作るandroidアプリですら普段作りなれている方法っていうのと変わってくるんじゃないかなと思うところもありますので。

ということで、僕の場合ウェブコンテンツなら大抵の場合Progressionで囲っちゃうので、Progressionありきでpackager for iphoneのプロジェクトをセットアップする手順を書いておきます。

1）アプリケーション名でフォルダを生成。

2）Progression プロジェクトパネルから新規プロジェクトを生成。

基本タブ
プロジェクト名：アプリケーション名
書き出し先：先に生成したアプリケーション名のフォルダ
種類：クラス
プレイヤー：AIR 2.0
環境設定：AIRアプリケーション

Flashタブ
幅：320
高さ：480
フレームレート：12〜20（iPodTouch第2世代だと安定するのこのあたり）

ActionScriptタブ
メインクラス名：アプリケーション名
FlashBuilder（Eclipse）に対応させるにチェック

拡張ライブラリ
SWFProfilerにチェック（一応。実機確認ではStatsとか半透明で重ならないものがパフォーマンス低下少ない。）

3）Progressionが書き出したファイルをリネームなどする。

index.fla → アプリケーション名.fla

パブリッシュ設定を変更
形式タブ
Flashにチェック、../bin-debug/index.swf → アプリケーション名.swf

Flashタブ
Player：iPhone OS
ここで一度パブリッシュ設定を閉じる。

iPhone OS 設定
一般タブ
出力ファイル：アプリケーション名.ipa
アプリーエション名：アプリケーション名

デプロイタブ
.p12証明書、プロビジョニングプロファイルを設定
アプリケーションID：逆読みドメイン（jp.nipx） + アプリケーション名（プロビジョニングプロファイルに設定していれば自動的に入る。）

OKを押してパブリッシュ設定を完了。
bin-debugに、アプリケーション名-app.xmlが出来る。

4）FlashBuilderでプロジェクトを生成

ファイル / Flex プロジェクトを読み込み → プロジェクトフォルダの参照から生成したフォルダを指定 → 終了 → キャンセル（なぜか終了を押してもウインドウが閉じないので。）

パッケージエクスプローラーにプロジェクトが出来ているのでプロジェクトを右クリック。
プロジェクトタイプを追加または変更 → Flex プロジェクトタイプを追加 → 次へ（SDKは4.0以上を選択する） → 終了

再度プロジェクトを右クリック。
プロジェクトタイプを追加または変更 → Flex デスクトッププロジェクトに変換（Adobe AIRで実行）

プロジェクトのプロパティを設定。

Flex コンパイラー
非埋め込みファイルを出力フォルダにコピー、アクセス可能な SWF ファイルを生成する、警告を有効にする のチェックを外す。

Flex ビルドパス
ソースパスにlibsを追加。

5）ファイルの削除

プロジェクト、自動的にビルドのチェックを外す。
src内、mxmlとapp.xmlを削除。
bin-debug内のアプリケーション名-app.xmlをsrcフォルダにコピー。
bin-debugからアプリケーション名-app.xml以外削除。

アプリケーション名.asを右クリック。デフォルトアプリケーションに設定。

6）実行/デバックを設定をする。

プロパティ → 実行/デバックの設定

コマンドライン引数：-screensize iPod
プロファイル：mobileDevice

これでflaファイルからパブリッシュ出来るし、FBからデバック・実行可能です。
シンボルはflaファイルのライブラリに直接作るんじゃなくて、別のflaからswc書き出しするなり、Flexコンポーネントに書き出すなり、Flexのメタタグ使うなどして作る。flaファイルに直接作っちゃうとFBでデバックできなくなるので。お好みでlibsの中のProgressionの各パッケージを削除してswcファイルのProgression4_ext_AIR.swcに差し替えておくとSWFの書き出しが早くなる。

Flash Player 10未満でパブリッシュした場合、デバイスフォントのテキストフィールドを半透明にしようとalphaを設定しても透明度は反映されません。テキストフィールドの親表示オブジェクトのalphaを設置しても同じです。たとえば以下のソースはFlash Player 9書き出しだと半透明になりません。

デバイスフォントでalpha = 0.5。Flash Player 9書き出し

var field1:TextField	= new TextField();
field1.x		= 20;
field1.y		= 20;
addChild( field1 );
var format:TextFormat	= new TextFormat();
format.color		= 0x000000;
format.size		= 14;
format.align		= TextFormatAlign.CENTER;
field1.defaultTextFormat= format;
field1.width		= 280;
field1.multiline	= false;
field1.wordWrap		= false;
field1.embedFonts	= false;
field1.defaultTextFormat= format;
 
var field2		= new TextField();
field2.defaultTextFormat= format;
field2.width		= 280;
field2.multiline	= false;
field2.wordWrap		= false;
field2.embedFonts	= false;
field2.defaultTextFormat= format;
var sprite:Sprite	= new Sprite();
sprite.x		= 20
sprite.y		= 60
sprite.graphics.lineStyle( 2 );
sprite.graphics.drawRect( 0,-2,280,22 );
addChild( sprite );
sprite.addChild( field2 );
 
field1.alpha	= 0.5;
sprite.alpha	= 0.5;	
 
field1.text	= "field1.alpha=" + field1.alpha + " / ver." + this.loaderInfo.swfVersion;
field2.text	= "sprite.alpha="+ field1.alpha + ", field2.alpha=" + field2.alpha + " / ver." + this.loaderInfo.swfVersion;

Flash Player 10以降ではこの問題がついに解決されて、デバイスフォントでも半透明に表示されます。

デバイスフォントでalpha = 0.5。Flash Player 10書き出し

しかし以下のようにColorMatrixFilterが利用できるなら、環境によって文字が少し滲んだりcacheAsBitmapが有効になったりとFilter利用の弊害はありますが、Flash Player 10未満でもデバイスフォントの透明度を変更できます。

ColorMatrixFilterで半透明

//field1.alpha	= 0.5;
//sprite.alpha	= 0.5;	
 
var filter:ColorMatrixFilter	= new ColorMatrixFilter();
var mat:Array			= filter.matrix
mat[ 18 ]			= 0.5;
filter.matrix			= mat;
field1.filters			= [ filter ];
sprite.filters			= [ filter ];
 
field1.text	= "field1.alpha=" + field1.alpha + " / ver." + this.loaderInfo.swfVersion;
field2.text	= "sprite.alpha="+ field1.alpha + ", field2.alpha=" + field2.alpha + " / ver." + this.loaderInfo.swfVersion;

Yさんが今年も@nifty 年賀状 2011 用にオリジナル年賀状素材を8点作りました。
本人は左から4番目の凧揚げしているウサギの作品が一番のお気に入りだそうです。
気になるものがあったら@niftyのサイトをご覧くださいませ。
気に入っていただけたら嬉しいかぎりです！

@nifty 年賀状 2011 用 オリジナル年賀状素材
http://nenga.nifty.com/
Producer / 株式会社グッドファーム・プランニング
Design&Illustration / Yoco,Nakamura.nipx

自分の為にメモ。それぞれ白黒を指定した時、ColorTransformの各色プロパティがどうなっているか。

new ColotTransform();

redMultiplier	= 1
greenMultiplier	= 1
blueMultiplier	= 1
alphaMultiplier	= 1
redOffset	= 0
greenOffset	= 0
blueOffset	= 0
alphaOffset	= 0

var color:Color = new Color();
color.brightness = -1;

redMultiplier	= 0
greenMultiplier	= 0
blueMultiplier	= 0
alphaMultiplier	= 1
redOffset	= 0
greenOffset	= 0
blueOffset	= 0
alphaOffset	= 0

var color:Color = new Color();
color.brightness = 1;

redMultiplier	= 1
greenMultiplier	= 1
blueMultiplier	= 1
alphaMultiplier	= 1
redOffset	= 255
greenOffset	= 255
blueOffset	= 255
alphaOffset	= 0

Tweener.addTween( target, { _brightness:-2.55 } );

redMultiplier	= 1
greenMultiplier	= 1
blueMultiplier	= 1
alphaMultiplier	= 1
redOffset	= -255
greenOffset	= -255
blueOffset	= -255
alphaOffset	= 0

Tweener.addTween( target, { _brightness:2.55 } );

redMultiplier	= 1
greenMultiplier	= 1
blueMultiplier	= 1
alphaMultiplier	= 1
redOffset	= 255
greenOffset	= 255
blueOffset	= 255
alphaOffset	= 0

Tweener.addTween( target, { _tintBrightness:-1 } );

redMultiplier	= 0
greenMultiplier	= 0
blueMultiplier	= 0
alphaMultiplier	= 1
redOffset	= 0
greenOffset	= 0
blueOffset	= 0
alphaOffset	= 0

Tweener.addTween( container, { _tintBrightness:1 } );

redMultiplier	= 0
greenMultiplier	= 0
blueMultiplier	= 0
alphaMultiplier	= 1
redOffset	= 255
greenOffset	= 255
blueOffset	= 255
alphaOffset	= 0

ファッションブランド beautiful people のサイトを作りました。
2010.10.18に東京ミッドタウンで行われたJapan Fashion Week in TOKYOのインスタレーションショーの告知及びレポートサイトです。

beautiful people
http://www.beautiful-people.jp
ArtDirection / Design : Munehiro Machida.nssgraphica
Flash & HTML : KOSUKE,Nakamura.nipx
Photo : Motofumi Sannomiya, Fumihito Katamura, Takahiro Motonami

アートディレクションは今年何かとよく絡ませてもらっている、nssgraphica 町田さん。サイトに掲載されているだけでも400枚以上ある写真は3人のカメラマンがイベント当日に撮影しています。僕はFlashを担当させていただきました。

企画段階から絡ませていただいていて一般参加型のショーということでWEBではイベント当日までのカウントダウンを表示しつつtwitterのタイムラインを表示。
イベント翌日に写真を公開する運用方法などイベントを盛り上げるアイデアを出し合って進めたプロジェクトです。撮影から公開までうまくいって良かったですね。皆様おつかれさまでした。

beautiful peopleを着たモデルさん。イベント中は自由に撮影出来ました。カメラを向けると笑ってくれる。

詳細写真にディープリンクを設置し、twitterかメールでシェア出来るようにしています。

告知ページはFlashを使わずAjaxで構築しました。

frocessing使ってみました。面白いです。

東京ミッドタウンでJapan Fashion Week in TOKYOというファッションイベントが行われています。ファッションブランドbeautiful peopleのイベントが本日開催だったのですが、イベントのサイトをやらせてもらっていることもあってnssgraphicaの町田氏と観に行ってきました。

このショーはミッドタウンのいたるところにbeautiful peopleの新作を纏ったモデルさんがポーズをとっているというもの。
なのでモデルさんのいるエリアは、月曜日の昼間にもかかわらず大勢の人だかりが出来ていました。そしてイベント中は一般の人でもモデルさんを撮影できる。これって中々経験出来ないですよね。

何枚か写真を撮ってきましたがこんな感じです。

どうでしょう？服やモデルが良いせいかとっても素敵な写真に…。
素人でもカメラを向けているとちゃんと笑ってくれるモデルさんのサービス精神に感激。
ちょうど晴れの天気が暖かい春先のような気候で服もすごく景色と調和して素敵でした。

beautiful peopleの公式サイトのほうでイベントに参加された方のtwitterが盛り上がっています。興味がある方は是非チェックしてみてください。

Flashからアップロードする方法を調べたのでまとめ。

ファイルリファレンスでファイルのアップロードする。
ローカルファイルをアップロードするならこの方法。

AS

var file:FileReference	= new FileReference();	//ファイルリファレンス
var req:URLRequest	= new URLRequest( "upload_filereference.php" );	//リクエスト先CGI
file.browse();	//ファイルを選択
file.addEventListener(Event.SELECT, function( e:Event ):void{
	file.upload( req );	//選択後アップロード
});

PHP

<?php
$name	= $_FILES[ 'Filedata' ]['name'];
$tmp	= $_FILES[ 'Filedata' ]['tmp_name'];
move_uploaded_file( $tmp, "./$name" );
?>

BASE64にエンコードしてアップロードする。
ダイナミックに生成した画像データをアップロードする例。

AS

//画像データ
var bmp:BitmapData	= new BitmapData( 100,100,false,0x000000 );
//PNGにエンコード
var pngEncorder:PNGEncoder	= new PNGEncoder();
//そのバイトデータ
var bytes:ByteArray	= pngEncorder.encode( bmp );
//Base64エンコード
var base64Encorder:Base64Encoder = new Base64Encoder();
base64Encorder.encodeBytes( bytes );
var base64:String	= base64Encorder.toString();
 
//リクエスト
var vars:URLVariables= new URLVariables();
vars.base64 = base64;
var req:URLRequest	= new URLRequest( "upload_base64.php" );
req.method	= URLRequestMethod.POST;
req.data	= vars;
 
//送信
var loader:URLLoader	= new URLLoader();
loader.load( req );

PHP

<?php
$bas = $_POST['base64'];		//BASE64エンコードテキストを受け取る
$bin = base64_decode( $bas );	//デコード
 
//ファイルに書き出す
$fp = fopen( "./xxx.png", "w" );
fwrite( $fp, $bin );
fclose( $fp );
?>

さらにバイナリのままアップロードする方法があった。

AS

//画像データ
var bmp:BitmapData	= new BitmapData( 100,100,false,0x000000 );
//PNGにエンコード
var pngEncorder:PNGEncoder	= new PNGEncoder();
//そのバイトデータ
var bytes:ByteArray	= pngEncorder.encode( bmp );
 
//リクエスト
var req:URLRequest	= new URLRequest( "upload_binary.php" );
//application/octet-streamはContent-Typeヘッダにおいてバイナリ形式である場合に指定されるサブタイプ
req.contentType	= "application/octet-stream";
req.method	= URLRequestMethod.POST;
req.data	= bytes;
 
//送信
var loader:URLLoader	= new URLLoader();
loader.load( req );

PHP

<?php
/*POST受信時にphp://inputで生データを取得できる*/
$bin= file_get_contents( "php://input" );	//バイナリを受け取る
//ファイルに書き出す
$fp = fopen( "./xxx.png", "w" );
fwrite($fp, $bin);
fclose($fp);
?>

パブーにて、ニピクセルオリジナル絵本、てんとちゃんの家さがし ePub版を販売しています。
このブログに掲載中の同作品に、新カットを描き加えた新しいてんとちゃん。秋の夜長にお子さんとご一緒に読んでいただけたら幸いです。

作品：てんとちゃんの家さがし
作者：Yoco,Nakamura. nipx

今年の。

Y型2気筒エンジン
ArtDirection / Design : Hiroki Miura.mopstudio
CreativeDirection / Flash : KOSUKE,Nakamura.nipx

昨年同様、モップスタジオの三浦氏と一緒に作った作品。
三浦氏を焼き肉定食で買収し、あーでもない、こーでもないと進めた作品でして、僕的にはBox2Dを使ったり、モーフィングさせたりと意欲的に作ったものの、見事に選から漏れている訳で…。スミマセン、ミウラサン。

結果は残念でしたが、このままお蔵入りにしてしまうのもあまりにもったいないので、今回は読み物的にこの作品が出来るまでの道のりを紹介したいと思います。

当初、今回作ろうとした案はY型2気筒エンジンではありませんでした。
元々の案は「Nedelka」、通称「テュラテュラ案」。

僕が自信満々だったこの案についてはもはや説明をしませんが、打ち合わせの時点でとりあえずの大ラフなFlashが出来ていました。しかしこの案、ウチのYさん始め、三浦氏にもいまいち不評。ですが、僕のゴリ押しもあって、ひとまず打ち合わせた内容でコンテを描いてみようという話になりました。

で、まぁ思うところもあったのでしょう。
三浦氏が修正と脚色を加えて戻してきてくれたのが次のコンテです。

三浦氏が戻してきたコンテは、ラフのFlashの前後に新しい展開を加えたものです。

こういう時に、これが良くない、これは違うと駄目だしだけをする人がいますが、僕の経験からすると、はっきり言って大抵そういう人は何も生み出しません。

今回はこのコンテの前半から今回のY型2気筒エンジン案の原型が出来ました。
コンテを見てから、僕があらためて三浦氏に戻したのが次のラフ案。

このラフについては、二人で「おおっ、いいんじゃねーか！」と盛り上がります。
そして、やがて「テュラテュラ案」はやめて「Y型2気筒エンジン案」を作ることに決定します。

三浦氏にデザイン・イラストをお願いして、僕は実装方法の検討を進めます。
しばらくしてあがってきたデザインは、まるで設計図のような精巧なもの。（汗

これを組み上げていった訳ですが、その間にも様々な検討がありました。

例えば、煙を入れてみたり、

ハンマー使いませんか？とか、

他にも音やコピーワークなんかは、特に検討を重ねて決まったものです。そんな紆余曲折へて最終的な形になっています。

といった流れで打ち合わせから完成まで、お互い普段の仕事をしながら2週間くらい時間を使っているでしょうか。残念な結果ですけど、出来には満足してますし作業は面白かったですね。

一緒に仕事をさせていただくパートナーの方の中でも、三浦氏とはもう10年くらいの付き合いです。毎回焦りますが、今回の上のデザインも全てIllustratorでパスを使って描かれています（！）。そんなの他で見たことありません。Flashで使うにしても何にしても、パスで出来ているとビットマップのそれより何かと便利なことが多いのに異論は無いでしょう。パスをビットマップにするのは容易ですが逆は難しいですから。

ということで、ミウラサン。今回もありがとうございました。
これに懲りずにまたお付き合いくださいね。また次の機会に一緒にがんばりましょう！