ODD CODES 野地 剛のwebデザインとか音楽とか

Apache Cordova の開発をコマンドプロンプトで始める!

トップイメージ

皆様いかがおすごしであろうか? めちゃくそに暑くなってきて思考もままならないままブログを更新している野地である。

さて、思考がままならない中でも、仕事はやってくるものだ。

一日中クーラーの効いた部屋でゴロゴロするには、我々は生まれる時代を間違えた。
働かぬ者食うべからず。ずっと未来でもそうなのかもしれないが、とりあえず現代日本において人間は働かねばならない。らしい。

そんな時代に生まれた哀れな子羊たるこの自分だが、最近どんな仕事をしているのかというと、今回の記事で紹介するApache Cordovaというものを用いたandroid用のアプリ開発である。

Apache Cordovaとは簡潔に言えば、Javaベースのアプリだけではなく、HTML,CSS,JavaScriptをベースにした所為「ハイブリットアプリ」が作成できるというモノ。

これを用いてandroidアプリ開発を始めるにはeclipseやらandroid studioやら様々なツールがあるのだが、今回はコマンドプロンプトを用いて最初のデモをandroid端末に流しこむところまでを初心者向けに解説したいと思う(windows環境についてしか解説しないので、Mac派及びlinux派の方はごめんなさい!)。

まずはNode.jsをダウンロード

まずはNode.jsの公式ページに飛んで、画面中央のDOWNLOADSをクリック、リンク先のページから自分のマシンに合ったインストーラーを保存→実行しよう。画面は規約書に同意する部分にチェックを入れる以外はnextを押しまくっていい。

無事、パソコンにインストールしたらスタートメニューとかからnode.jsが起動できるようになっていると思うが、これは起動せずスルーしてアクセサリ→コマンドプロンプトを起動しよう。

コマンドプロンプトが起動したら試しに

node -v

と入力し、エンターキーを押してみよう。


こんな感じでnode.jsのバージョン情報が出てくればOKである。

もし出てこなかった場合はnode.jsが正しくインストールされていないか、コマンドプロンプトの対象ディレクトリが間違っている可能性がある。

前者は自分の場合、ローカルディスク(C:)→Program Files→nodejsという位置にインストールされていたので、そこにnodejsディレクトリがなければ再度インストールを図ってみて欲しい。

後者の場合はコマンドプロンプト上で対象ディレクトリの変更をする必要がある。

cd C:\USERS\※「自分のアカウント名」

※「自分のアカウント名」にはキーボードのWindowsボタンもしくは画面左下のスタートボタンを押した時に出る「コンピューター」からローカルディスク(C:)→ユーザーと進んだ時に出てくるディレクトリ名のうち、自分のユーザーアカウント名を打ち込む。ちなみに自分の場合は PCUrser

と入力してエンターを押すとコマンドプロンプトが操作の対象とするディレクトリを自分のユーザーディレクトリに変更できる。この状態で再度、node -v と打ち込んでみれば、バージョン名が表示されるはずだ。

npmをコマンドプロンプト上からインストール

さて、node.jsが無事インストールできたことを確認したら、今度はコマンドプロンプト上からnpmというものをインストールする。

普通、アプリケーションをネット上からインストールする際はインストーラーやzipを用いるのが一般的な気がするが、公式がこうしろというのだから仕方ない。

まず、対象ディレクトリを自分のユーザーディレクトリに繋ぎ変える。やり方は前述した対象ディレクトリの変更方法を参照。

その後に続けて

npm install -g cordova

と入力し、エンターキーを押すと

↑のように、|や-や¥や/が高速回転し始める。ものすごく怖いがここで焦ってコマンドプロンプトを消したりしてはならない。これぞコマンドプロンプトなりの「今頑張ってインストールしてるよ!」というサインなのである。気長に待とう。

そして、インストールが終了するとこんな画面が表示される。

この状態で

npm -v

と入力、エンターキーを押し

のようにnpmのバージョンが表示されればインストール成功である。

androidの実機をUSBデバック可能状態にする

ios機ではそうはいかないが、android機は実機とパソコンをUSBケーブルで繋ぐことで直接、アプリを流しこむことができる。

まず、実機を用意し、USB接続をする前に本体の設定を開く。

そして自分の持っている実機に入っているAndoroidのバージョン(設定→端末情報から確認可能)を確認。

バージョンが Android2.x、Android3.xの場合は

  1. 設定→アプリケーション
  2. 「提供元不明のアプリ」にチェックを入れる

で完了。

バージョンが Android4.0.x、Android 4.1.xの場合は

  1. 設定→開発者向けオプション
  2. 「USBデバック」にチェックを入れる
  3. 戻るボタンを押し、設定→セキュリティ
  4. 「提供元不明のアプリ」にチェックを入れる

で完了。

バージョンが Android4.2.x以降の場合はかなりややこしくて

  1. 設定→端末情報
  2. 「ビルド番号」を7回タップ
  3. 「これでデベロッパーになりました!」と表示される
  4. 戻るボタンを押し設定→開発者向けオプション
  5. 「USBデバック」にチェックを入れる
  6. 戻るボタンを押し、設定→セキュリティ
  7. 「提供元不明のアプリ」にチェックを入れる

で完了。どうやら、一般の方が間違いを起こさないための処置かと思われる……

これで、USBデバックの準備が終わったので、パソコンと実機をUSBケーブルで接続し、実際の開発に移ろう。

cordovaを使ってプロジェクトを作る

そのままコマンドプロンプトを閉じずに、今度は

cordova -v

と入力して、cordovaのバージョンを確認しつつ、ちゃんとcordovaコマンドが使えるか確認してみよう。

↑のように表示されると思うので、続けざまに

cordova create helloWorld com.example.helloWorld helloWorld -d

と入力し、エンターキーを押すと、

といったような、「新しいcordovaプロジェクトを作ったよ」的な説明が出てきて、実際に自分のユーザーディレクトリを確認すれば「helloWorl」という名前のフォルダ(プロジェクト)ができているはずだ。


こんな感じに、自分でフォルダを作らなくても自動でプロジェクトを作ってくれる。

そこですかさずコマンドプロンプト上で、

cordova platform add android

と打ってやると今度は実際にandroid中で動く部分が自動生成される。


なにやらいっぱい動いているが、不安がらずに次の命令が入力可能になるまで待とう。


生成されたplatform→androidディレクトリの中身。

これでとりあえずの準備が整ったので、実機とパソコンがUSBデバック可能状態で接続されていることを確認しつつ、

cordova run android

と入力しよう。コマンドプロンプトの処理が終わり次第、実機にアプリが流し込まれ、自動で起動するはずだ。

まとめ

初めて(だよね?)のandroidアプリの制作、いかがだったろうか。

正直、自分が初めて取り掛かった時は「めんどくせぇ……」としか思わなかったが、やはり人間慣れである。
今では自分も初心者のくせして記事まで書いているので、数をこなせば一連の作業は身体が覚えてくれるものだ。

今回はデモアプリを流し込むところまでのみ記事にしたので、cordovaの中身についてはほとんど触れなかったが、本格的にアプリを作ろうとするとJava(悲しいことにJavaScriptではない。Java)を書く事になったり、プラットフォームごとに.jarファイルとか.xmlファイルを流し込むのに苦労したりとか、R.javaが無いとかエラーが100個以上出たりとか……正直、環境設定とは比べ物にならない苦難が待ち受けていることだろう。

しかし、やはり、人間は慣れだ。今日もどこかの会社で、涼しい顔をしながら同じようにアプリを開発してる人が少なくとも100人はいるだろう。その全てが天才なわけではない。要は慣れたのだ。

ちなみに自分はというと、慣れている途中だ。そろそろ慣れてもいいはずなのだが、世の中以上にJavaの世は甘くないらしい。

皆さんも、是非一緒にがんばろう。

Welcom to the Jungle.