Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@Futo_Horio

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

はじめに

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に置き換える方法について、
検証を交えながら、書きたいと思います。

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

17
Help us understand the problem. What is going on with this article?
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
17
Help us understand the problem. What is going on with this article?