ブログトップ 記事一覧 ログイン 無料ブログ開設

電子ガジェットいろいろ このページをアンテナに追加 RSSフィード Twitter

主に自分用に色々なアプリ開発のメモや電子工作や色々な開発関連のメモを書いてます


2010-02-25

HTMLとJavaScriptでiPhoneアプリを超簡単に作る方法

過去のエントリーの改訂版です。
今回はより簡単にHTML+JavaScriptiPhoneアプリを作る方法を紹介します。
より少ない手順で、ビルド時に警告もありません。

iPhoneSDKにはSafariにも搭載されているレンダリングエンジンのWebkitが含まれています。これを利用して、HTMLでもiPhoneアプリを作ることができます。
このままAppStoreにも登録できます。
ゲームも作ろうと思えば作れますが、iPhoneCPUはPCと比べると非常に遅いので、いくらJavaScriptが早いSafariと言えども、動作速度は期待できません。

HTMLファイルの準備

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <script type="text/javascript">
    function init() {
      // touchmoveイベントでevent.preventDefault()を実行して、フリックによるスクロールを禁止
      // touchmoveに独自の処理を行いたい場合は、event.preventDefault()を最後に実行する
      document.addEventListener("touchmove", function(){ event.preventDefault(); }, false);
      // 日付、時刻の表示処理を実行
      setDateTime();
    }
    function setDateTime() {
      // 日付、時刻の取得
      var now = new Date();
      var nowDate = now.getFullYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日";
      var nowTime = now.getHours()+"時"+ now.getMinutes()+"分"+now.getSeconds()+"秒";
      document.getElementById("datetime").innerHTML = nowDate +"<br>" + nowTime;
      // 200ミリ秒毎に日付、時刻の表示処理を実行
      setTimeout(setDateTime, 200);
    }
  </script>
</head>
<body onload="init();">
  <center>
    <img src="title.gif"><br>
    <br>
    <div id="datetime" style="font-size:30px;background-color:#eeeeee;"></div>
  </center>
</body>
</html>

あと、タイトル画像を"title.gif"で用意しました。
f:id:uosoft:20090517013113g:image

プロジェクトの新規作成

テンプレートは"Window-Based Application"を選択します。
f:id:uosoft:20100224113005j:image

HTMLファイルや画像ファイルをプロジェクトに追加

とりあえず、Resourcesの中に入れることとします。
f:id:uosoft:20100224113006j:image

Web表示のコード追加

"<プロジェクト名>AppDelegate.h”へUIWebViewのインスタンス変数定義を追加します。

@interface sampleHTMLAppDelegate : NSObject <UIApplicationDelegate> {
    UIWindow *window;
    UIWebView *view;    // この行を追加する
}

"<プロジェクト名>AppDelegate.m”のapplicationDidFinishLaunchingメソッドへUIWebViewを使うコードとHTMLを表示するコードを追加します。

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch
    [window makeKeyAndVisible];
	
    /* ここ以下を追加 */
    view = [[UIWebView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
    [window addSubview:view];
    NSString *filepath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"html"];    // ここで表示するHTMLファイルを指定する
    NSURL *fileurl = [NSURL fileURLWithPath:filepath];
    [view loadRequest:[NSURLRequest requestWithURL:fileurl]];
    /* ここまで */
	
}

ステータスバーを表示したくない場合は、UIWebViewを定義している部分の前に下の文を記述してください。

[[UIApplication sharedApplication] setStatusBarHidden:YES animated:NO];

忘れずに終了時にメモリを解放

"<プロジェクト名>AppDelegate.m”のdeallocメソッドへUIWebViewで使ったメモリを解放する処理を追加します。

- (void)dealloc {
    [view release];    // ここを追加する
    [window release];
    [super dealloc];
}

実行サンプル

上のように作った実行結果です。
f:id:uosoft:20100224113007j:image

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証