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

【 Node.js 】Apache Cordova「インストール」~「Hello World!」まで

More than 1 year has passed since last update.

はじめに

Cordovaインストールした際の手順Qiitaに書き残しておく:point_up:

Apache-Cordova (略称:Cordova[コルドバ])
モバイルアプリケーション開発用のフレームワーク(オープンソース)で、
HTML,CSS,JSを使って、マルチプラットフォーム向けのアプリケーションを作成することができます。

インストール環境

  • Windows 10
  • node (v7.2.1)
  • npm (4.0.5)

※ Node.jsの環境を事前に準備していただく必要があります。
まだ、インストールされていない方はこちらの記事をご覧ください。

From Qiita
【Node.js】Nodistを使ってNode.jsのバージョンを切り替える [for Windows]

インストール方法

1. コマンドプロンプトを立ち上げ、下記コマンドを実行します。
$ npm install -g cordova

Cordovaは、さまざまなプロジェクトで活用できるので、グローバルオプション-gをつけてインストールを行います。

-g オプションをつけると、global設定されているnode.jsのバージョンでインストールされます。

C:\User\〇〇〇\src> nodist ls
(x64)
7.2.1 (global: 7.2.1)
  8.1.0
  8.1.2

-g オプションを付与してインストールした場合のインストール先 (ファイルパス) は、下記コマンドで調べることが可能です。

$ npm -g root

・出力結果
例. C:\Program Files\Nodist\bin\node_modules

2. cordovaが正常インストールできたらバージョンを確認します。

$ cordova -v
7.0.1

上記コマンドを実行し、バージョンが出力されればOKです!

3.新規プロジェクトを作成します。

下記コマンドを実行するだけで、プロジェクトファイルが生成されます。

$ cordova create HelloWorld // 新規プロジェクト作成
$ cd HelloWorld // ディレクトリ移動

・新規プロジェクトのディレクトリ構成

.
├── .npmignore
├── cofig.xml
├── <DIR> hooks
├── package.json
├── <DIR> platforms
├── <DIR> plugins
├── <DIR> res
└── <DIR> www
File / Directory 概要
.npmignore npmパッケージを登録する際の除外ファイルを記載
config.xml アプリケーションの様々な挙動をコントロールできる設定ファイル (Global)
hooks Cordovaコマンドをカスタマイズする際に利用するフック
package.json プロジェクトで使用するパッケージ一覧、バージョンを管理
platforms プラットフォーム毎で生成されるフォルダを管理
plugins cordovaプラグインのフォルダを管理
res リソースファイルを管理 (icon, img, etc)
www 各プラットフォームに展開されるテンプレートファイル (HTML, CSS, JS)

4. プラットフォームの追加

ここでは、アプリケーションを実行するプラットフォームの追加を行います。(ex.Android)

$ cordova platform add android

インストールが完了したら、lsコマンドを用いて、追加されたプラットフォームの確認を行います。

$ cordova platform ls

・出力結果

Installed platfomrs:
  android 6.2.3
Available platfomrs:
 blackberry10 ~3.8.0 (deprecated)
 browser ~4.1.0
 webos ~3.7.0
 windows ~5.0.0

5. エミュレーターで実行(動作確認)
実機がないので、エミュレーターにて動作確認を行ってみたいと思います。

$ cordova emulate android

無事、Androidのエミュレーターが起動しました。

image.png

おわりに

さて、次回は、CordovaアプリのWebView部分をCrossWalkに置き換える方法について、
検証を交えながら、書きたいと思います。

最後までお読みいただき、ありがとうございました。

Futo_Horio
Kobe Digital Labo Inc. 新事業創造係 MR班 班長 / Microsoft Azure コミュニティ「Azure Tech Lab」主催 / Honde Next 共同代表
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした