1:48 AM投稿記事の長さ:アメニモマケズ × 15.3個 くらい

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

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

コマンドプロンプト画面01
こんな感じで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

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

コマンドプロンプト画面02

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

そして、インストールが終了するとこんな画面が表示される。
コマンドプロンプト画面03
この状態で

npm -v

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

コマンドプロンプト画面04

のように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コマンドが使えるか確認してみよう。

コマンドプロンプト画面05

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

cordova create helloWorld com.example.helloWorld helloWorld -d

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

コマンドプロンプト画面06

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

実際にプロジェクトの生成されたユーザーディレクトリ
こんな感じに、自分でフォルダを作らなくても自動でプロジェクトを作ってくれる。

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

cordova platform add android

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

コマンドプロンプト画面7
なにやらいっぱい動いているが、不安がらずに次の命令が入力可能になるまで待とう。

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

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

cordova run android

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

アプリの実機画面

まとめ

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

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

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

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

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

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

Welcom to the Jungle.

Comments

  1. 52betwin より:

    52betwin, e aí, apostadores de plantão! Encontrei um site com umas apostas bem interessantes. Se você curte adrenalina, dá uma espiada! Acesse 52betwin.

  2. I got the 755bet app from 755betappdownload. Fast and easy. I was up and running in minutes, pretty good stuff. Try it out here 755betappdownload.

  3. lucky122 より:

    Feeling lucky? I give lucky122 a shot. Had some decent wins here and the site’s easy to navigate. Maybe it’s my lucky charm! lucky122

  4. ar777slot より:

    Alright, alright, ar777slot! These slots are BANGIN’! Good graphics, fun themes, and hey, who doesn’t love winning? Give it a spin! ar777slot

  5. evo888apk より:

    Gotta love evo888apk on the go! Downloaded the APK and now I can play anywhere. Easy install and the games are just as good as on the desktop. Get it! evo888apk

  6. ev99casino より:

    Just tried my luck at ev99casino and had a blast! The site is slick, easy to navigate, and the games were totally engaging. Checking out ev99casino for more fun soon!

  7. win8bet より:

    win8bet is my top place to bet. Simple to use and lots of games to play! Get on now: win8bet

  8. gamehay88 より:

    Gamehay88 is where it’s at for a quick gaming fix. The selection is solid and the interface is straightforward. I’ve spent quite a few hours on there, good times! Check out gamehay88.

  9. r168bet より:

    R168bet, ¡aguas! Investiguen bien antes de registrarse. La experiencia fue ok, pero hay mejores opciones por ahí. Sean precavidos, compas! r168bet

  10. mega777casino より:

    Alright, lads, let’s talk mega777casino. Had a crack at it the other night. Site’s slick enough, a decent selection of games to keep you busy. Worth a look if you’re after a new spot to have a punt. Check them out here: mega777casino

  11. 5956betapp より:

    Downloaded 5956betapp last week, and gotta say, it’s not bad at all for mobile betting. Easy to navigate, quick to load. Chucking a tenner on the footy never been easier. Give it a whirl: 5956betapp

  12. 144bet1 より:

    Just tried out 144bet1 and gotta say, pretty smooth experience. Easy to navigate, and I found some decent odds. Might stick around for a bit! Check it out here: 144bet1

  13. Had no problems with 80jili com login. Super straightforward. Let’s see if I can win something tonight! You should take a look: 80jili com login

  14. phl63.com login より:

    Is it just me, or are there tons of fake PHL63 sites? This one seems legit for login access: phl63.com login. ALWAYS double check the URL!

  15. Setting up the app takes two minutes and it quickly becomes your pocket companion for all the fun. Deposits clear fast and withdrawals hit the bank right where they should on weekdays. It has easily become my trusted sidekick for both sports and casino action. mostbetappdownload

  16. bdkirikiya より:

    I have been part of this community for a while and the cricket leagues here are super engaging. Payouts are fast and the interface is built for smooth mobile play. Definitely worth checking out if you enjoy sports betting with a local touch bdkirikiya

  17. mxespinomx より:

    I have tested quite a few gaming sites for Latin American players and this one handles everything so smoothly. I especially like that they accept local bank transfers and the support team responds in no time when I need help. The game library is constantly refreshed so I never get bored. I always point my friends toward mxespinomx when we chat about reliable platforms. Visit mxespinomx to get started

  18. idug234 より:

    Top notch service and very responsive support team. It’s rare to find a site this reliable these days. Give idug234 a try!


Warning: Undefined variable $aria_req in /var/www/html/noji.dev/wp-content/themes/ODD_CODES/comments.php on line 15

Warning: Undefined variable $aria_req in /var/www/html/noji.dev/wp-content/themes/ODD_CODES/comments.php on line 17