iPhoneアプリ:画像ビュアーを作る

このエントリーを含むはてなブックマークはてなブックマーク - iPhoneアプリ:画像ビュアーを作る

さて、これまで3回のiPhoneネットワークプログラミング
iPhoneネットワークプログラミング (同期通信)
iPhoneネットワークプログラミング (非同期通信)
iPhoneネットワークプログラミング (ファイルダウンロード)
を書いてきました。
ここいらで、総まとめとして一つアプリを作ってみたいと思います。

今回作成するアプリは画像ビュアです。
Downloadボタンをタップすると、プログラム中にハードコーディングされたURLから画像をダウロードしてきてiPhoneの画面上に表示するという、実用性0のアプリを作ってみたいと思います(笑)

完成図がこちら。
生意気にもプログレスバーなどもつけてみました。
(そのせいでややこしくなったけど・・・)

iphonenetworkprogramming2

さて、ではXcodeで開発を進めていきます。
毎度おなじみの手順ですが,

Xcodeの「新規作成」-> 「ファイル」->「新規プロジェクト」を選択。
プロジェクトの種類「Application」でテンプレート「View-based Application」を選択。プロジェクト名は「PhotoViewer」にします。

エディタが起動したら、まずはIBでGUIを設計します。
左カラムから「グループとファイル」->「Resources」-> PhotoViewerViewController.xib
をダブルクリックするとIBが立ち上がりますので、
次の部品をライブラリからドラックしてきて並べてください。

iphonenetworkprogramming1

ここまでで、IB側での作業は終了です。
次はXcodeに戻ってプログラムをかいていきます。

PhotoViewerViewController.h

@interface PhotoViewerViewController : UIViewController {
	NSFileHandle *file;
	NSString	 *filePath;
	
	IBOutlet UIImageView	*imageView;
	IBOutlet UIProgressView *progressBar;
	double expectedContentLength;
}
-(IBAction) downloadButtonPressed:(id)sender;

@end

PhotoViewerViewController.m

- (void)connection:(NSURLConnection *)connection 
	didReceiveResponse:(NSURLResponse *)response {
	expectedContentLength = [response expectedContentLength];
}

- (void)connectionDidFinishLoading:(NSURLConnection *)connection {
	UIImage *img = [[UIImage alloc] initWithContentsOfFile:filePath];
	imageView.image = img;
}

- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data {
	if (file == nil) {
		NSFileManager *fm = [NSFileManager defaultManager];
		[fm createFileAtPath:filePath contents:[NSData data] attributes:nil];
		file = [[NSFileHandle fileHandleForWritingAtPath:filePath] retain];
	}
	progressBar.progress = progressBar.progress + 
		((long double)[data length] / (long double)expectedContentLength);
	[file writeData:data];
}

-(IBAction) downloadButtonPressed:(id)sender
{
	NSString *url = [NSString stringWithString:
		@"http://blog-imgs-45.fc2.com/i/i/p/iiphoneapp/sky.jpg"];	
	NSString *directoryPath = [[NSHomeDirectory() 
		stringByAppendingPathComponent:@"tmp"] retain];
	NSString *fileName = [url lastPathComponent];
	filePath = [[[directoryPath stringByAppendingPathComponent:fileName] 
		stringByStandardizingPath] retain];
	NSLog(@"%@", filePath);
	
	NSURLRequest *request = [ NSURLRequest requestWithURL:[NSURL URLWithString:url]];
	[NSURLConnection connectionWithRequest: request delegate: self ];
}

大半が前3回で説明済みのコードなので理解しやすいと思います。まず、ヘッダファイルではUIImageViewとUIProgressViewのアウトレットを宣言しています。このアウトレットとIB側の部品を、次のように接続しておいてください。

iphonenetworkprogramming3

前回まではviewDidLoadにコアの処理を書いていましたが、今回はDownloadボタンが押されたときにダウンロードを開始したいので、大半の処理はdownloadButtonPressedメソッドの中に移動しています。

プログレスバーの更新はconnection:didReceiveDataメソッドの中で行っています。
現在の進行具合 = 受信量 /ダウンロードサイズで求めています。これはプログレスバーの常套手段ですね。

全体のダウンロードサイズ(変数:expectedContentLength)はconnection:didReceiveResponseメソッドの中で求めています。このメソッドは、iPhone側から送ったリクエストに対してのレスポンスとして呼び出されます。そのレスポンスを利用して、これからダウンロードするファイルのサイズを取得します。

ダウンロードが終了するとconnectionDidFinishLoadingメソッドがトリガされるので
このメソッドの中で画面の更新を行っています。Documentフォルダ以下に保存された画像の読み出しにはinitWithContentsOfFileメソッドを使用します。

コンパイル&実行して、うまく動作するかを確かめてみてください。

One Response to “iPhoneアプリ:画像ビュアーを作る”

  1. [...] iPhoneアプリと、そのプログラム iPhoneアプリを作る際に役立つプログラムを置いています コンテンツへ移動 ホーム紹介 ← iPhoneアプリ:画像ビュアーを作る [...]

Leave a Reply

You must be logged in to post a comment.