iPad の電子書籍アプリを作るよ(1)

とある六本木でとある電子書籍アプリを作っている途中でして…全くの iPad/iPhone の素人プログラマ(.NET プログラミングに関してはプロねッ!!!プロッ!!!) が、玄人になるまでの航跡だったらいいなぁと。

iPad電子書籍アプリ開発ガイドブック
http://www.amazon.co.jp/dp/4844329065

賛否両論ありましょうが、最初の一冊が↑です。
電子書籍アプリに特化しているので、その他のアプリ（ゲームアプリとかネットにアクセスするアプリとか）には全く役に立ちませんが、逆に言えば、取っ掛かりとしては十分です。

これを読んで、電子書籍アプリの作成をする際に、

・文章も含めて背景を貼り付ける。
・動画やアニメーションを重ね合わせる。
・透明ボタンを重ね合わせて、ボタン機能を作る。

という方針を決めました。まぁ、お手軽に作るのと、電子書籍自体のページ数がそう多くない場合(50頁以下ぐらい?)ならば、こっちのほうがやりやすいかなと。

以下は、上記を実現するためのコードメモです。

■背景画像の貼り付け

UIView を継承している PageView クラスの drawRect に記述する。
背景で使う画像ファイル(title.jpg)は、Resource フォルダに突っ込んでおく。

in PageView.h

#import <UIKit/UIKit.h>
#import <MediaPlayer/MediaPlayer.h>

@interface PageView : UIView {
}
@end

in PageView.h

- (void)drawRect:(CGRect)rect {
	UIImage *img = [UIImage imageNamed:@"title.jpg"];
	[img drawInRect:CGRectMake(0,0,768,1024)];
}

■動画の表示

よくわからんですが、UIView::initWithFrame のところ(初期化かな?)で、MPMoviePlayerController クラスを使って動画を表示させます。カレントビューに [self addSubview:movie.view]; な形で追加して指定した矩形に表示させます。
本当は、動画の終了を検知しないといけないんですけどね、これは後ほど。

- (id)initWithFrame:(CGRect)frame {
    if ((self = [super initWithFrame:frame])) {
        // Initialization code
		self.backgroundColor = [UIColor whiteColor];
		
		MPMoviePlayerController *movie = [[MPMoviePlayerController alloc] 
			initWithContentURL:[NSURL fileURLWithPath:[
			[NSBundle mainBundle] pathForResource:@"m01" ofType:@"mov"]]];
		movie.controlStyle = MPMovieControlStyleNone;
		movie.scalingMode  = MPMovieScalingModeFill;
		movie.view.frame = CGRectMake(50,50,400,300);
		[movie play];
		[self addSubview:movie.view];
    }
    return self;
}

■横スクロールさせる

ページ送りは、いくつか方法があるのですが、指でスライドさせることでページを送れるスクロール方式にします。
ちょっと、方法は後で変えるかもしれませんが、実験コードということで、ざっと。

UIView を継承した PageView クラスの表示部分で、3 枚の背景画像を貼り付けます。
なので、横幅が、768 x 3 ドットのビューができますね。

in PageView.m

- (void)drawRect:(CGRect)rect {
    // Drawing code
	UIImage *img1 = [UIImage imageNamed:@"title.jpg"];
	[img1 drawInRect:CGRectMake(768*0,0,768,1024)];
	UIImage *img2 = [UIImage imageNamed:@"winemovie01.jpg"];
	[img2 drawInRect:CGRectMake(768*1,0,768,1024)];
	UIImage *img3 = [UIImage imageNamed:@"last.jpg"];
	[img3 drawInRect:CGRectMake(768*2,0,768,1024)];
}

これを横スクロールさせるために UIViewController クラスを継承した SamplePad04ViewController のようなクラスの loadView メソッドを書き換えます。

in SamplePad04ViewController.m

- (void)loadView {
	[super loadView];
	PageView *pageView = [[PageView alloc]
						  initWithFrame:CGRectMake(0,0,768*3,1024)];
	UIScrollView *scrollView = [[UIScrollView alloc]
								initWithFrame:self.view.bounds];

	[scrollView setContentSize:pageView.frame.size];
	[self.view addSubview:scrollView];
	[scrollView addSubview:pageView];
	[scrollView setDelegate:self];
	[scrollView setPagingEnabled: YES];
}

表示するビューの親子関係は UIViewController -> UIScrollView -> PageView になります。
親子関係は addSubview メソッドを使います(そうらしい)。

■参考にしたサイト

iPhoneアプリ開発、その(118) UIScrollViewはどうやって使うのか？｜テン＊シー＊シー
http://ameblo.jp/xcc/entry-10322378932.html
UIScrollView
http://iphone-tora.sakura.ne.jp/uiscrollview.html