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

投稿日: 2011/06/10 作成者: masuda

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

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

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

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

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

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

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

■背景画像の貼り付け

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

in PageView.h

1
2
3
4
5
6
#import <UIKit/UIKit.h>
#import <MediaPlayer/MediaPlayer.h>
 
@interface PageView : UIView {
}
@end

in PageView.h

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

■動画の表示

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- (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

1
2
3
4
5
6
7
8
9
- (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

1
2
3
4
5
6
7
8
9
10
11
12
13
- (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

カテゴリー: 開発, iPad パーマリンク