Cordovaでハイブリッドアプリを作るver0.5（開発環境構築）

最近スマホをiPhoneからandroidのスマホに変えた。 機種はnexus6にして、初のandroidに感動してたんだけど致命的な問題に気づいた。「いい家計簿アプリがない…」iPhoneで使ってた家計簿アプリは100円の有料アプリだったけど、すごく使いやすかった。ないならそっくりなのを自分で使ってみるかーっと思いおとといあたりからandroidアプリを自分で作ってみること決めた！

なんでCordovaで作るのか

web屋さんだからhtml, css, jsは普段さわっている、とりあえずhtml5で開発したかった、ほかにもhtml5で開発できるフレームワークはいろいろあったCordovaはドキュメントがweb上に多そうだったからえらんでみた。

とりあえず開発環境構築

アプリ制作1日目

cordovaとphonegapは同じようなものらしいのでとりあえずこの2つをキーワードにして環境構築のやり方をググった。

頑張ってググってたけど30分で限界を感じたから本を買った。amazonで検索して上位だったやつ。

[iOS/Android対応] HTML5 ハイブリッドアプリ開発[実践]入門 (Software Design plus)

紙の本はかさばるし嫌だったからkindle本で購入。 実は以前kindle本の技術書をパソコンで読む気で買ってパソコンで読むことができずに悲しい思いをして記事を書いたことがあった。

kindle本がパソコンで読めない、、、 - ミズイロラボ

だけど今やkindle本はパソコンでも読める、Chromeにkindle本を読むためのエクステンションがでたからだ。 ダウンロードしてエクステンションで読もうとしたら

「この本はKindleCloudReaderでは開けません。」

とかいう絶望的なお知らせがきた。そういえば漫画はいけるけど小説とかは読めないって噂を聞いたな…この本はそれにあたるのか、マジかよ＼(^o^)／ とはいえ買ってしまったしスマホで読むことにしたnexus6画面でかくてよかった…それでも技術書読むのにはつらいけど...

Android SDK（AndroidStudio）ダウンロード

最初はAndroid SDKをダウンロードするらしい。 URLが書いてあったから早速ダウンロードページを開いた。 早速最初の落とし穴があった。本に書いてあるページと表示されるページが全然違う。

本だと上の画像の青いドロイドくんがいるページのキャプチャがあっがAndroidStudioとかいうツールのダウンロードページに飛ばされた。

こいつがググっても環境構築の仕方がよくわからなかった原因なんだよなー。 割りと最近でたものらしくてネットや買った本などの説明にはでてこない、とりあえず代わりになるだろうと思いダウンロードした。起動の途中で「JDKが必要ですよ」みたいなことを言われたからいれた。

Node.jsインストール

これは実はすでにやっていた、ググればでてくるので飛ばす。

cordovaコマンドラインツールをインストール

ターミナルを開いて

$ npm install cordova -g

でOK! 環境構築でターミナルでなんかするときは「どうせ一発じゃだめなんでしょ？まぁとりあえずコマンドいれてみるかー」くらいの気楽な気持ちでいかないと心折れると思う、とりあえずこれは一発でいった。コマンドの最初にsudoをつけないといけない場合もあるみたい。

$cordova -v

がとおればうまくいってるはず！

Android SDKのディレクトリにパスを通す

cordovaのコマンドはAndroid SDKのコマンドを内部で利用するためパスを通す必要があるらしい。 「パスを通す」って言葉にすごい恐怖心ある、なんか新しく環境を構築するとき毎回でてくるけどすんなりいった試しがない… 案の定今回もすんなりいかなかった。

本にも書いてあったしこちらのページとかにも書いてあるけどAndroid SDKのディレクトリがどこに格納されてるのかわからなかった。結構ググってみたけどわからなかったためこの日は寝た。

アプリ制作2日目に続く…

Cordovaでハイブリッドアプリを作るver1.0（開発環境構築） - ミズイロラボ