LoginSignup
1
0

More than 3 years have passed since last update.

Apache Cordovaの環境構築

Last updated at Posted at 2019-12-17

はじめに

業務でApache Cordovaを使う必要に迫られたので、とりあえずインストールして動くか確認したところまでの備忘録。
OSはWindows10。
Cordovaの公式サイトに従って進めていく。

Apache Cordovaとは

HTMLとJavaScriptというWebライクな言語でマルチプラットフォームアプリを作るよっていう技術。(そういうものをハイブリッドアプリというらしい)
多くの場合はiOSやAndroidといったモバイル向けアプリ作成に使われるが、Windowsや普通のWebアプリも作れる。

文系学部出身の筆者からしたらコルドバって後ウマイヤ朝の首都(Cordoba)かなって感じだけど、スペルが違った。

下準備

Node.jsというものが必要。

Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。

(https://nodejs.org/ja/about/ より)

うーん。
とりあえずNode.jsの公式からLTS版をデフォルト設定のままインストール。

その他にもアプリを動かしたいプラットフォームによって必要なものがあるらしいので、そのあたりは各自で。
筆者の場合はWindowsで動かしたかったのでVisualStudioの環境を整える必要があったが、これがまた一苦労。(それはまた別のお話)

Cordovaのインストール

npm install -g cordova

作成されたファイルのツリーが出力されていればたぶん成功。

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

公式チュートリアルだと、サンプルアプリはWebアプリとして作られる。(Cordovaを使う意味とは)

まずアプリを作りたいディレクトリに移動して

cordova create MyApp

途中で匿名のレポートを送信します的なことを聞かれるので、とりあえずY。

Creating a new cordova project.とか出てきたら成功。
プロジェクトディレクトリの中に入りましょう。

cd MyApp

続いてプラットフォームの追加。
先述の通り、ブラウザ上で動くWebアプリを作成するので、

cordova platform add browser

ここまででWebアプリのサンプルが出来上がる。
実行してみてブラウザが立ち上がり、Apache Cordovaのロゴが表示されれれば完璧。

cordova run browser

(場合によっては自動でブラウザが立ち上がらないこともあるそうなので、その時はURL手打ちで)

確認が終わったらCtrl + Cでサーバを閉じる。

いじってみた

MyApp/www/index.html<body>の中身を全部消して書き換えてみた。

index.html
<body>
    <h1>Hello, World!</h1>
</body>

こうなった。
cssが効いている模様。

Hello World - Google Chrome 2019_12_17 15_13_42.png

おわりに

序盤で言及した通り、Cordovaはハイブリッドアプリを作る技術なので、ブラウザで動くアプリを作ってもあまり意味がない。
動かしたいプラットフォームに合わせて環境を構築したり、プラグインを作成したりが醍醐味らしいが、そのあたりは追い追い。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0