Help us understand the problem. What is going on with this article?

CordovaをWindowsで。その1

More than 3 years have passed since last update.

はじめに

なるべく簡単にCordovaをWindowsで試してみる。 その1。

手順

Windowsだとどのコンソールを使うかも難しいとおもうのですが、ここでは Windows で Git を使っている人なら比較的入っている Git Bash でコマンド実行しています。

npm をインストール

(省略)

Cordova をインストール

$ npm install -g cordova

npm で Global でインストールすることで、cordovaコマンドを使えるようにします。

サンプルアプリケーション作成

$ cordova create MyApp
Creating a new cordova project.
$ ls
MyApp/

MyAppという名前でサンプルアプリを作ります。作ったアプリと同じ名前のフォルダが作られます。

アプリケーションが動くプラットフォームを作成します。

$ cd MyApp
$ cordova platform add browser

ここで addrinfo などのエラーが出た場合、Proxyが原因の可能性がほとんどなので、下記のようにプロキシの設定をしてください。

$ npm install -g plugman
$ plugman config set proxy http://proxy_address:port

アプリケーションを動かす

$ cordova run browser
Running command: cmd "/s /c ""...MyApp\platforms\browser\cordova\run.bat"""
Static file server running @ http://localhost:8000/index.html
CTRL + C to shut down
200 /index.html (gzip)
200 /css/index.css (gzip)
200 /cordova.js (gzip)
200 /img/logo.png
200 /cordova_plugins.js
200 /js/index.js (gzip)
404 /favicon.ico

のようにコンソールに出て、ブラウザが立ち上がってアプリが起動します。

ちょっとだけアプリケーションをいじる

アプリ起動中であれば Ctrl + C で止めてから www/index.html を適当なエディタで開いて、

    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>

例えばここの <h1>Apache Cordova</h1> あたりを <h1>hogehgoe</h1> とでも編集してみて、再度 cordova run browser を実行してください。
タイトルが変わっていたら成功です。

あとは少しずついじっていって、自分好みのアプリにしていきましょう。

567000
組み込みからWebサービスから機械学習からオブジェクト指向から開発プロセスから認定ScrumMasterからなんならUI/UX/HCD/デザイン思考まで。 投稿した内容でなにかあったらTwitterなどへ気軽にどうぞです。
https://twitter.com/aka567000
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away