PhoneGapでHelloworld

こんばんは。

名言のサイト(meigen ~名言共有サイト~)を運用しているのですが、PhoneGapでスマフォアプリを使ってつくろうと思います。 Macを使っていて、既にXcodeなどはインストールしている前提で話を進めます。

今回はHelloworldまで。

まず、brewでNodeを入れます。

$ brew install node

次に、phonegapを入れます。あと、ios-simってやつも

$ sudo npm install -g phonegap
$ sudo npm install -g ios-sim

PhoneGapプロジェクトを作成して、www/index.htmlを編集します。

$ phonegap create プロジェクト名
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>HelloWorld</h1>
        </div>
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

iOSエミュレータで起動します。

$ phonegap run ios

f:id:azuki_mihomiho:20131202174155p:plain

こんなかんじです。簡単すぎてびっくりしてます。