ハンズオン：XcodeとHTMLとCSSで作る

電子書籍アプリケーション

山辺真幸2010/09/29

http://www.allianceport.jp

背景• iPadアプリで電子書籍を作れば、iTunes Store

で販売できる。

• Objective-Cのプログラミングは大変！

• HTML、CSSでコンテンツを作り、アプリとしてコンパイルする方法だと敷居がぐっと下がる。

本日の目的

• アプリケーション内にHTMLやCSSを格納する。

• 内部のHTMLを表示する部分をXcodeとInterface builderで作ってアプリ化する。

必要なもの

• Xcode

• HTML,CSSの基礎知識

• ちょっとだけObjective-C

http://developer.apple.com/technologies/tools/xcode.html

新規プロジェクトの作成

View-based applicationを選択します。プロジェクト名「myFirstBook」

とりあえず、「ビルドと実行」

シミュレータが起動します（真っ白）

画面に何か置いてみましょう。

myFirstBookViewController.xibをダブルクリック

Interface Builderがごちゃごちゃ起動します。

Labelを置いて保存します。

ビルドと実行。myFirstBookViewController.xibにオブジェクトを配置すると起動時に表示されます。

さて、本題に入りましょう。

これからやること

• htmlを読み込んで表示するUIWebViewというオブジェクトを配置する。

• index.htmlをプロジェクトに加える。

• アプリケーション起動時にUIWebView

にindex.htmlを読み込ませるプログラムを書く。

では、はじめます

step1

htmlを読み込んで表示するUIWebViewというオブジェクトを配置する。

先ほど置いたlabelは削除してUIWebViewを配置

step2

index.htmlをプロジェクトに加える

Resourcesの中にhtmlやcssをドラッグします

「デスティネーショングループのフォルダに　項目をコピーする」にチェックを入れます。

ここではコンテンツは階層的に置かず、リンクは「./ファイル名」で指定します。

step3

アプリケーション起動時にUIWebViewにindex.html

を読み込ませるプログラムを書く。

step3-1

プログラムをどこに書くか？

myFirstBookViewController.h

ヘッダファイル=実装に使う変数名や、メソッド名などのインターフェイスを書く

myFirstBookViewController.m

実装ファイル=メソッドの実装部分を書く

myFirstBookViewController.h

@interface myFirstBookViewController : UIViewController {! ! ! IBOutlet UIWebView *webView; //この行を追加! ! }

myFirstBookViewController.m- (void)viewDidLoad { [super viewDidLoad];!! [[UIApplication sharedApplication] setStatusBarHidden:YES]; //追加（ステータスバーを消す）! [self.navigationController setNavigationBarHidden:YES]; //追加!! NSString *fileName = @"index"; //追加! NSString *filePath = [[NSBundle mainBundle] pathForResource:fileName ofType:@"html"];　//追加! NSURL *url = [NSURL fileURLWithPath:filePath];　//追加（外部サイトを読み込みたい場合は [NSURL URLWithString:@"http:～"];）! NSURLRequest *request = [NSURLRequest requestWithURL:url]; //追加! [webView loadRequest:request]; //追加!}

step3-2

Interface Builderで関連付け

myFirstBookViewController.xibをダブルクリックして

File’s Ownerを‘ctrl’+クリック

webViewの右端の○をプレスしたままで、Web Viewに線を引っ張る。

こうなっていればOK

保存して「ビルドと実行」

おつかれさまでした。あとは、htmlやcssを改造して

魅力あるコンテンツを作ってください。

あ、iTunes Storeでのアプリケーションのリリースには、apple審査があります。このハンズオンは審査通過を保証する

ものではありませんのであしからず。