AndroidとiOSアプリをいっぺんに作りたいからCordova環境を構築したよ

スマートフォンアプリ開発Android, Cordova, iOS

どうも先日MacBookAirなるものを買ったのですが、せっかく林檎端末を買ったならやはりやりたいのはiOSアプリの開発ですよね。しかし、せっかくiOSで作るならAndroid側でもアプリを開発したい…しかしそれぞれの環境でコーディングするのはめんどくさい・・・「よし、なら一つのコードで開発しよう」という流れになるわけです。そこで出てくるのがハイブリッドアプリ開発環境のCordovaです。というわけで、今回はMacにこのCordova環境を構築していこうと思います。この記事での最終目標はサンプルアプリをiOSとAndroidのエミュレータで動かすことです。

Mac : MacBook Air(13-inch, Early 2015)
OS : macOS Sierra 10.12.1

0. 下準備

今回の記事では、すでにnode.jsの使用環境が整っていることを前提にお話ししていきます。なので、まだ環境が整っていない方は、他のサイトさんを参考にするか、このサイトの作業記録を元に環境を整えておいてください。最低限npmコマンドが使えれば問題ないと思います。

1. Cordovaのインストール

では、早速やっていきましょう。npmコマンドが使えればインストールはめちゃんこ簡単です。というわけで以下のコマンドを実行してください。

はい。これだけです。では、インストールがちゃんとできているか、実際に使ってみて確認してみましょう。というわけで以下のコマンドでCordovaのプロフェクトを作成します。

このコマンドを実行するとカレントディレクトリに”Test”というプロフェクトディレクトリが作成されます。てな訳で、とりあえずインストールはおしまいです。

2. 各OSで使う準備

インストールは終わりましたが、まだ各OSで使うには不十分です。まずは、以下のコマンドで開発するプラットフォームを追加します。 このコマンドにより、ブラウザとAndroidそしてiOSがこのプロジェクトの対象として追加されました。

自分の環境では、このコマンドを実行すると「androidのSDKがねーよ」と言われてエラーが起こりました。皆さんの環境ではどうでしょうか、ChromeやXcodeなんかの環境が整っているとエラーは出ないみたいです。というわけで、これからは、自身の環境でエラーが出たものに対して作業してみてください。

ブラウザ

今回の記事ではスマホアプリを対象にしているので、関係ないといえばその通りなのですが、一応紹介しておきます。これに関してはChromeをインストールすればいいみたいです。というわけで、GoogleのChrome提供ページからインストーラをダウンロードしてインストールすればおっけーです。

環境が整ったら以下のコマンドを実行するとブラウザでの動作確認をすることができます。

iOS

次はiOSです。これに関してはxcodeをインストールすればいいみたいです。というわけで、インストールですが、AppStoreからできます。インストールが完了したらコマンドラインツールやらライセンスやらのめんどくさいのを終わらしておきます。

環境が整ったら以下のコマンドを実行するとiOS（エミュレータ）での動作確認をすることができます。

Android

さて、めんどくさいのがAndroidです。こいつに関してはやることが多めですが無心で頑張りましょう。まずは必要なもの達、JDKとAndroidStudioのインストールです。それぞれ公式の配布ページに行ってインストーラをダウンロードしてきてください。ダウンロードする際、AndroidStudioはページトップにあるリンクを押すだけで分かりやすいのですが、JDKの方は、ぐちゃぐちゃしている一覧のかから見つけて、その一覧の上部にある”Accept License Agreement”のラジオボタンを選択しなければいけません。なかなか見辛いですが、自分は「Java SE Development Kit 8u111」という一覧から「Mac OS X」の項目をダウンロードしました。そして、ダウンロードしてきた奴らでインストールしちゃってください。

AndroidStudioのインストールが終わったら、起動してください。そこで出てくる以下の画面右下にある”configure”から”SDK Maneger”を選択してください。

それで出てきた画面の上部にある”Android SKD Location”というテキストボックスの内容をメモを元にPathを通します。というわけで、以下のコマンドで設定ファイルに追記し、適用させちゃってください。

次に、エミュレータで使用する端末の環境情報を構築します。コマンドラインで”android”と打ってSDKマネージャーを起動してください。ここで、下記の画像のようにメニューから”Manage AVDs…”を選択してください。

ここれで出てきた画面から”Create”で環境情報を作成するのですが、めんどくさかったら”Device Definitions”から持ってくるというのもアリだと思います。これで、環境構築ができたら作業は終わりです。

環境が整ったら以下のコマンドを実行するとAndroid（エミュレータ）での動作確認をすることができます。

おわりに

さて、これでCordova環境の構築はおしまいです。前回のnode.js環境構築に比べたらちょっとヘビーでしたね。それでも一応環境は整ったので、これからアプリ開発に勤しもうと思います。

「Cordova(コルドバ)チュートリアル2」

2016-12-24スマートフォンアプリ開発Android, Cordova, iOS