ローカルHTMLを表示するだけのiOSアプリ

2013/6/23 [19:45:50] (日)

UIWebViewというのがある。
これを使えば、iOSアプリ（iPhoneやiPad）で簡単にHTMLを読み込んで表示してくれる。ローカルにおいたHTMLも同じく。

ということで、ガワさえ作ってしまえば、中身はHTMLとCSSで頑張ればアプリっぽいものができる。というかほぼまんまWEBの再現が可能。とはいえ、この程度のシロモノがapp storeの審査を通るとはとても思えないので「AD-HOC配布で野良アプリ」もしくは「専用端末化したiOSデバイスにプリインストールして配布」というのが使いどころだろう。

とりあえずこのローカルHTMLを読むアプリは、ド素人、超初心者でも作れるiOSアプリということで、Xcode 最初の1歩としては（わたしのような素人には）ちょうどいい練習問題っぽい。

・Xcodeを立ち上げる。
↓新規作成する
↓「Single View Application」を選択
↓「Product Name」「Organization Name」「Company Identifier」など適当に
　※ Storyboardsがよくわからないので、チェックを外しておいた。
↓プロジェクトフォルダを作成する
・デフォルトのシンプルな設定でXcodeが立ち上がる。

ソースを２つ編集する。

ViewController.h の @interface の行の下に追加。
（WEB表示オブジェクト（？）はwviewという名前ですよと設定・宣言する）
{ @private IBOutlet UIWebView* wview; }

ViewController.m の viewDidLoad の中に LoadRequestうんぬんの行を追加。
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. [wview loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"index"] ofType:@"html"]isDirectory:NO]]]; }
プロジェクトフォルダの中のResourceフォルダを探して、そこにあるindex.htmlを読み込んで表示しますよ、ということなので、Resource フォルダを作ってそこにHTMLやCSS、画像などを入れるようにする。

Xcodeでプロジェクトフォルダを右クリックして「Add Files to "SAMPLE"」（SAMPLEはプロジェクト名）でリソース用のHTMLなどが入ったフォルダを追加する。
※ この時、HTMLの中から相対パスで画像などを指定できるように「Create folder references for any add folders」にチェックを入れる。

Xcode の便利だけど面倒くさいのが画面設計。UIが良く出来ていて、部品をドラッグアンドドロップするだけでそれっぽい見た目のできあがり。

ViewController_iPhone.xib をクリックするとiPhoneのモックアップ（？）が現れる。
とりあえず表示するだけなら、そこにWebViewオブジェクトをドラッグアンドドロップ（このWebViewオブジェクトの中にHTMLが表示されることになる）すれば完成。
あとは、シミュレーターにiPhoneを指定して、「Run」するだけ。

以下は、index.htmlに戻るとかリロードなどのコントロールをつけたもの。
 
コントロールをつけるとなると、とたんに考えることがいろいろ増えるので試行錯誤で大騒ぎ・大変。なかなか思うようにいかない…けど、今日のところは終了、続きはまた明日以降。もう初老だ。７時間程度ぐらいしか続かない。

・画面・レイアウト設計
・ソースコードの編集
・画面レイアウトされたオブジェクトをソースコードの該当するところに紐づける

大雑把に、XcodeでのiOSアプリの作成はこの３つかな。

Xcodeのソースについて調べていて。バージョンごとで書き方がけっこう違うんで、混乱。基礎からきちんと訓練を受けたプログラマならすぐに解決だろうなあと、うらやましい。

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

»電子書籍制作代行についてはこちら

« 前記事へ | [新着] | 次記事へ »

» iOSアプリ(29)

Tweet

この記事が役に立ったら
PayPalで投げ銭