Category: iphone

「実寸くんAir」〜画面にipadや紙を実寸相当で表示したいときの縮尺計算機

2010/08/03

title

実寸くんのAir版をつくりました

cap
→こちらからダウンロードできます
 (文字が出てしまう方は右クリックで保存してください)

【これは何?】
実寸くんAirは、画面に表示中のiphone,ipad,印刷物のデザインを何%縮小すれば実寸相当に見えるか計算するAirアプリケーションです。

【使い方】
1.インストールして起動すると左のような画面がでてきます
2.実寸表示させたい対象を選びます。紙は解像度も選べます
3.お使いのモニタのインチ数をいれてください
4.計算を押すと一番したのフォームに%がでます
5.グラフィックアプリで対象をこの縮尺に拡大縮小させます
6.ほぼ実寸どおりの大きさで見ることができるので、実物のサイズのデザインの感じがつかめます

【動作環境】
Airランタイム1.5以上が必要です。
→Adobeサイトからダウンロードできます。
Mac Windows両方でうごきますが、72dpi換算でつくったので96dpiのwindowsだと誤差がでる可能性があります。


【免責事項】
実寸くんAir(以下本アプリ)は画面上での実寸表示を目的として縮尺率を計算するアプリケーションですが、完全に一致するかどうかはご利用のモニタの黒ふちの量等の設定などに左右されますので計算による結果を保証するものではありません。
本アプリはフリーソフトウェアです。利用者は自己の責任において本アプリを利用するものとし、いかなる損害も当方は一切責任を負わないものとします。


そんなわけで

今回のver1では紙(A5-A3 B5-B3 ハガキ 名刺)・iphone4・ipadに対応してみました。印刷デザインとかでWYSIWYGぽい使い方ができるんじゃないかな〜と思います。
Flex版の実寸くんのときにも書きましたが、photoshopでやるぶんには拡大縮小はスマートオブジェクトでやったほうがきれいです。あとイラレは解像度関係なく72dpi換算で表示されてるみたいですのでイラレ用途のときは72dpiを選択するといいと思います。

もうちょっと汎用的な数値指定のUIにする方向もあったかと思いますが、あんまり入力の手間があるのもなーということで今回は割愛。画面デザインもちょっと今iphone開発のほうに時間を使いたいので暇なときに。
前回のFlex版からはデータの追加以外はmx:Applicationをmx:WindowedApplicationに変更したくらいでAirになったので移植の手間はほとんどなかったという感じです。
もうちょいAirっぽいことを(アンドロイドに向けて)知っときたいのでまた一段落したら手をいれるかもしれません。
それでは何かのお役にたてれば。

画面展開の表記方法

2010/07/19

iphoneアプリの画面設計をしていて、画面フローの表記をしようとして普通の画面フローチャートだとUIインタラクションを表記しにくいよね、と思ったので考えてみた。



画面フロー図の限界

WebTutorial_2.1_01webの画面フロー図は以下のことができないなー、不便だなーと思ってた。

  • 画面展開を表記する記法がない。webだと_blankくらいしかないけどアプリだと不便
  • 画面が内包しているコンポーネントを表記できないので、画面のどのボタンが次の画面につながっているのかわからない。
  • ↑レベルのを練ろうとするとワイヤーフレーム/プロトタイプをつくる作業になってしまう。プロトタイプだと逆に画面のつながりや展開の法則性がとらえにくく、整合のとれたインタラクションデザインが試行錯誤しにくい
  • そもそも画面展開の種類って網羅的に把握されてる?

構造化寄りの表記方法は「情報アーキテクチャ、インタラクションデザイン記述のためのビジュアルボキャブラリー」で議論されているものの、上記のようなことをやりたいとき、どうやって書いたらいいのかなー、というのが課題だった。

(画面フロー図例:via http://terasoluna.sourceforge.jp/tutorial/server-web/Document/WebTutorial_2.html)



展開形式はどれくらいあるか〜ダイアグラム化

さがしてもないので、やりましょう。ということでリサーチ。
画面展開を表現するにあたり、どれくらいの展開形式があるのか。ざっと以下の7種類に集約されるのでは。
  • 全面上書き展開(いわゆる”_self”)
  • 別画面遷移展開(いわゆる”_blank”やiphoneでの別viewへの遷移)
  • 画面分割展開(1画面を別フレームで切って展開。Eclipseなどのペイン類)
  • 非同期部分変更(ajax的な画面変更)
  • フロート展開-排他 ダイアログ型(フロート内でアクションしないかぎり解除されない)
  • フロート展開-排他 吹き出し型(領域外クリックで容易に解除される)
  • フロート展開-非排他(パレット、ドローワー類)

さらにダイアグラム化してみる。これをフロー図の画面間に差し挟めば、画面展開形式が表現できるのではないか。

tenkai




利用例

実際に使ってみるとこんなかんじ。


diagram


通常のフローチャートの矢印の間に上記のダイアグラムをさしはさんで展開形式を表現します。また点線ワクで画面に付随するコンポーネントを表します。

●メリット
  • 画面フロー図レベルである程度のアクションとそれに対してのコンポーネントの反応、展開後の遷移を一覧できる
  • ざっとした画面フローを書いてからこれらのインタラクションを表記することで、逆算的に画面要素を決定できる
  • 対外的に必要でないかぎり画面要素仕様書を省ける。プロトタイプレベルでわかる画面の動きもある程度予想できる
  • 上記ダイアグラムの7つのパターンをさしかえてみることで画面展開構成の試行錯誤が網羅的にできる
  • フロー図を拡張したシュミレーションという側面があるので手書き向き。

●デメリット
  • スマートフォンなど要素が限られるものはいいがweb規模だと図が複雑になりすぎるか?
  • ページやコンポーネントのタイプと、展開形式をひもづけて管理するには、これで構成したあとエクセルとかにまとめたほうがいいかも。


そういうわけでPDFにしてみた

ということで、「Transition Pattern Diagram」としてPDFで公開します。

→Transition Pattern Diagram (PDF)

ご自由にご利用ください。
たぶんこれ、コンセントさんのsite-it!等の画面をパターン化したツールと組み合わせると相性いいような気がする。
あと手書きで書いて試行錯誤して詰めていくシーンを想定しているのでがっつりつくるよりラフにやるのがいいのかなーと。
もしよろしければフィードバックいただけるとうれしいです。あとcapeknoteが知らないだけでこんなのあるよ、とか。
twitter: @capeknote です。
それではー。

ObjCのメモリ管理のメモ

2010/06/29

とりあえず →詳解 Objective-C 2.0 のメモリの項をよんでたくさんハテナが浮かんだので、もっとやさしいところから・・・というわけで、なんとなくざっくり把握したところのメモ。


前提ルール

  • alloc と retain、copyしたときに参照カウントが増える。参照の所有者(生成モトでオーナーシップをもっているもの)がreleaseしゼロの時deallocが呼ばれメモリが解放される
  • クラスメソッドで生成されたものは自前でreleaseしなくていい
  • iphoneの@propaty宣言はだいたい(nonatomic,retain) 。ただしself.つけないとアクセサ扱いにならない。assignはガベコレを意図したものだがiphoneはガベコレない。
  • ループ内などではautoreleaseを活用

凡例

/*
インタフェース
*/
@interface HogeViewControler:UIViewController
{
	UILabel * windowLabel;
	NSArray * myHogeArray;
}
@property( nonatomin, retain) IBOutlet UILabel * windowLabel;
@property( nonatomin, retain) NSArray * myHogeArray;

@end


/*
実装
*/
#import "HogeViewControler.h"

@implementation HogeViewControler
@synthesize windowLabel, myHogeArray;

-(void) viewDidLoad
{
	//[1] allocでarrayが保持しているのでリリースする必要がある
	NSArray * array = [[NSArray alloc] initWithObjects : @"1", @"2", nil];

	//[2] arrayを参照しているのでretainCountふえる
	//setterのretainとarrayから渡されたポインタで合計2
	//self. なしだとアクセサにならずただの代入 
	//retainで確保されているのでNSArray * array側がreleaseしても存続できる

	self.myHogeArray = array;
	NSLog(@"%d" , [myHogeArray retainCount]); // 出力:2 


	//[3] クラスメソッドはautoreleaseされる
	NSArray * myFugaArray = [NSArray arrayWithObjects:@"1", @"2", nil]; 

	//[4] autorelease Pool
	int i = 0;
 	for ( i = 0; i < 10; i++)
 	{
 	 	NSAutoreleasePool * pool = [[ NSAutoreleasePool alloc ] init];
 	 	//大量生成されるオブジェクトを記述あとでリリース 	 	
 	 	[pool release];
 	}

	//[1] arrayのリリース
	[array release];
}

-(void) viewDidUnLoad
{
	//[2] setterのretainが確保しているカウントを解放
	//これってNSObject継承したクラスだとどこでよぶの?
	self.myFugaArray = nil;
	self.windowLabel = nil;
}

-(void) dealloc
{
	//[2] インスタンスプロパティの最終的な解放
	[windowLabel release];
	[myHogeArray release];
	[super dealloc];
}
@end

参考にしたサイト

→はじめてのiPhone3プログラミング [amazon]
→メモリ管理 byこたつつきみかん
→Objective-C メモリ管理 : 生成と解放 by Natsu's note
→iPhoneアプリ開発:XcodeのBuild and Analyze by Natsu's note
→Objective-Cのメモリ管理 by Nosue's log
→Cocoaでいこう! Macらしく 第13回

Build and Analyzeってあるの知らなかった!ちょう親切!!


AS3erのObjCメモ

2010/05/24

iphone開発のためにGWにObjCをざっととおしてみたのだけどいざ作ろうとすると鳥頭にもほどがあるので備忘録。

参考:「→XcodeによるObjective-C入門
とてもわかりやすかった。文字列、配列、クラスetc.. と基礎を通して書いてある。OSX用の話なのでそのまんまはいけませんがそれでも良書。

あと、→@ITの記事や、「最速基礎文法マスター」が流行ったときの記事も参考になりました。
→Objective-C 最速基礎文法マスター(by fn7の日記)
→ActionScript 3.0 基礎文法最速マスター(by 読書メモ+tips+日記)


で、以下メモ。


プロパティ、メソッド、定数

//プロパティ オブジェクト型は*ポインタが必要
//@privateで定義で private var myDate:Date;
NSDate * myDate;
NSString * myString;
NSLocale * myCurrentLocale;

//定数
//public static const HOGE:int = 2;
const int HOGE = 2;

//メソッド
//public function countNumber(count:int):int
-(int) countNumber :(int) count
{
	count++;

	//ローカル変数var result:int = count;
	int result = count;

	//trace(result);  %d10進数 %f小数 %c1文字 %@ オブジェクトの内容
	NSLog(@"%d", result);

	return result;
}

//--------------------------------
//よみにくいメソッド 引数2つ
//public function application
//( application: UIApplication , didFinishLaunchingWithOptions( launchOptions: NSDictionary ) ): Boolean

- (BOOL)application: (UIApplication *)application didFinishLaunchingWithOptions: (NSDictionary *)launchOptions 
{    
    
    //window.addSubview( viewController.view );    
    [window addSubview:viewController.view];

    //window. makeKeyAndVisible();
    [window makeKeyAndVisible];
	
    return YES;
}


文字列


	//変更可能な文字生成するオブジェクト
	NSMutableString * moji;

	//new NSMutableString(10); 10文字の領域を確保した変更可能な文字オブジェクトを生成
	moji = [[NSMutableString alloc]initWithCapacity:10];
	
	//moji = "foo" + "bar" + "30"; 
	[moji appendString:@"foo"];
	[moji appendString:@"bar"];
	[moji appendFormat:@" %d",30];
	NSLog(@"%@",moji);
	
	//--------------------------------
	//NSStringにあとで文字を追加したい場合
	NSString * str1 = @"hoge";
	NSString * str2 = [str1 stringByAppendingString:@"fuga"];
	
	NSLog(@"%@",str2);
	
	//--------------------------------
	//文字列の等価の判定
	
	NSString * strA = @"hoge";
	NSString * strB = @"fuga";
	
	if ([strA isEqualToString:strB]) 
	{
		
		NSLog(@"いっしょ");
	}
	else 
	{
		NSLog(@"いっしょじゃない");
	}

配列


	//Cのint型の配列 var myArray = new Array();でもintだけ
	int myArray[] = {1,31,5,6,80};
	
	double sum = 0;

	for (int i = 0; i < MAXNUM; i++) {
		sum += myArray[i];
	}
	
	//--------------------------------
	//ObjCの変更可能な配列

	NSMutableArray * mutableArray; 
	
	//メモリ領域を確保して生成
	mutableArray = [NSMutableArray arrayWithCapacity:5];
	
	//push
	[mutableArray addObject:@"one"];
	[mutableArray addObject:@"two"];
	[mutableArray addObject:@"three"];
	[mutableArray addObject:@"four"];
	[mutableArray addObject:@"five"];
	
	//for each
	for(NSString * str in mutableArray)
	{
		NSLog(@"%@",str);
	}

インスタンス化とメモリ解放


//生成 myDate:Date = new Date();	
NSDateComponents * myDate = [[NSDateComponents alloc]init];

//解放
[myDate release];

ポインタ

	//なんでも参照渡しになるかんじ?

	int thisYear = 2009;
	int * pointerYear1;//メモリ上の場所を確保して変数を宣言
	int * pointerYear2;

	//メモリ上の場所に変数thisYearをつっこむために&つきでわたす
	pointerYear1 = &thisYear;
	pointerYear2 = &thisYear;
	
	//おなじメモリ上のアドレスを見ているので変更するとpointerYear2も変更される
	*pointerYear1 = 2000;


ほかにもたくさん要素はあるけどざっくり念頭においとくために。
メモリ解放のところは、iphoneのほうの書籍にもうちょいこまかいことが書いてあったけど会社においてきたのであとで追記します。

勘違いしてるとこがあったらご指摘ください☆

「実寸くん」〜Macの画面にiphone実寸相当で表示したいときの縮尺計算機

2010/05/08

The Flash plugin is required to view this object.



使い方

01 上に表示されてる「実寸くん」はflashによる縮尺計算機です。
モニタのインチサイズ・解像度を入力すると、お使いの環境で画像を何%縮小表示すればiphone実機相当の大きさで見えるか、といった数値を表示します。
解像度は自動入力してるので、間違ってなければ、インチのみ入力してください。

その「実寸くん」から得られた縮尺率をデザイン中の画像に適用すると、左の画像のように実機と画面上のテンプレが似たようなサイズになります。実際の感じをつかみながらデザインしたい時に便利です。


(※3GSまで。iphone4は解像度4倍ですっけ・・さらに25%すればいけるとおもいますが。。)
あ、あと画像の縮小等はフォトショやGIMPつかってくださいね。

完全に一致・・・するかどうかはモニタまわりの黒縁の大きさや設定等で誤差ができると思います。
 ほんとの実寸になることを保証するものではないことをご了承ください


どうして作ったか

0左の画像は、Macで100%表示したiphone用のPSDのテンプレ(→iphone GUI PSD 3.0 by Geoff Teehan)と、実機をならべたものです。

でっかい、ですよね。

iphoneのディスプレイ部分の大きさで320px × 420px ですが、ピクセルはモニタインチと解像度によって表示される大きさがかわってしまうので、こんなふうになっています。

ちょっとこれだと、実際の見え方がわかりにくくてデザインしにくいなー、何%縮小すればモニタ上で実機サイズに見えるのかなー? と思って「実寸くん」を作成しました。


Photoshopで縮小表示するときのTips

ところでPhotoshopで作業されてる方はご存知だと思いますが、虫眼鏡ツールなどで中途半端な80.5%とかの縮尺で表示させると、すっげー文字や画像がガビガビになります。
これだと実寸でどんなかんじ?という確認にならないので、簡単なTipsをひとつ。

【photoshopで縮小表示確認するときのTips】
スマートオブジェクトを配置したほうで縮小して編集はスマートオブジェクト本体で行います。(CS3以降)
スマートオブジェクトはFlashで言うシンボルみたいなものです。配置したもののサイズを変えても内容物は非破壊のまま保たれます。またスマートオブジェクト内を修正して保存すると即座に変更が反映されます。

【手順】
02 ・必要なテンプレ画像を作成し、デスクトップかどこかに保存
・ファイル > スマートオブジェクトとして開く から先ほどのファイルを開く
・「実寸くん」でもとめたサイズに縮小します。これできれいに実寸でみれました
・レイヤーをダブルクリックするとスマートオブジェクトの本体が開くので編集
 保存すると即座に反映されるので、感じをつかみながらデザインできます

画像は、photoshopのキャプチャですが、左がスマートオブジェクトでひらいて、iphone実寸にしたもの、右が編集中の、スマートオブジェクトの中身です。こんなふうに並べて作業するとよさげかと思います。

iphone制作用ツールなのになんでflashで作ったのかはげふんげふんげふん・・

それではenjoy!