ノンプログラマーでもアプリが作れる!Cordova環境構築編

thumb002

アプリというと、iOSであればSwift/Objective-C、AndroidであればJavaといういうように専用の言語が必要ですよね。
代替え言語は他にも、RubyやC#などありますが、最近は素晴らしいオープンプラットフォーム/フレームワークが登場して、プログラマーでなくてもアプリを開発することができるようになったのです!しかも、ワンソースでiOSとAndroidどちらもリリースできるんです!
 
どういう仕組みなのかは、そのプラットフォーム/フレームワークによって違ってきます。
ノンプログラマーでもWeb言語でアプリ開発できるプラットフォーム/フレームワークをさっくりご紹介します。
 

Web言語でアプリ開発できるプラットフォーム

 
現在、Web言語でアプリ開発できるプラットフォームは下の4つです。
 

  • Apach Cordova
  • React Native
  • Titanium
  • Cocos2d-JS

 

Apach Cordova

PhoneGapという名前のほうが聞いたことある方もいるかもしれませんね!
アプリのWebView機能を使って、Web言語でもアプリ開発を可能にしたプラットフォーム。
つまり、アプリでもWebサイトを閲覧する機能があるのですが、それを使って擬似的にアプリに見せるようなイメージです。
なので結局のところは、アプリでWebサイトを見ていることと同じなのですが、Web言語だけでもアプリという市場に乗り出せる可能性を、一番初めに提供してくれたのはこのCordovaだったんです。
 
monacaAppGyverAppDeckアプリカンなどもCordovaを用いています。
 
Cordovaは、自分でインストールして環境構築することができますが、コストをかけても良いのであれば、先ほど紹介したmonacaなどのサービスを活用したほうが時間と手間を大幅に削減できます。
 
WebView機能を使っているだけなので、制作する感覚はWebとほぼ同じと言っていいです。もちろんサーバーを介しているわけではないので、PHPなどのサーバー言語は使えませんし、アプリパッケージ特有のデータ構造を理解しておく必要もありますし、広告などを導入する場合はネイティブファイルをいじる必要もあります。
 
Cordovaでアプリを作ったので、いくつか紹介させていただきます。もし興味があればご覧ください。
 
やるコトリすと -iOS
やるコトリすと -Android
@sample -iOS
@sample -Android
顔文字CUTIE -iOS
顔文字CUTIE -Android
ジャニーズ相性診断 -iOS
ジャニーズ相性診断 -Android
 

React Native

Facebookが提供しているネイティブアプリプラットフォーム。Javascriptだけでアプリ開発が可能で、FacebookメッセンジャーもこのReact Nativeで作られているんだそうです!
JavascriptのモジュールでReact.jsというものがあるんですが、もしこれを使ったことがある方なら同じような組み方なのでとっつきやすいかもです。
React Nativeは、2015年秋にAndroid版をオープンソース化したことで、最近かなり火が付いています!
Web言語で開発できるアプリは、メリットもあればデメリットもあるのですが、Facebookメッセンジャーを見てもらえれば分かるように、ほとんどネイティブと変わらないクオリティなので、夢が広がりますね:)
 

Titanium

TitaniumもJavascriptで開発できるアプリプラットフォームです。Titaniumの残念な所は、オープンソース化されていないところ、つまり全て無料ではないのです。
ただ、型落ちバージョンなら無料で使用することができるみたいですね!エラーもたくさん出るみたいですけど(汗)
なので、対処法などの情報があまりWebに出回っていません。このような特異なプラットフォームを使用するときは、どれだけ普及しているかが解決の鍵になってきます。
例えばビルドエラーが出た時に、何が何だかわからない…なんてことも多々あります。そんな時、Webで対処策を探すと思うんですけど、普及していればサクッと解決します。
 

Cocos2d-JS

ゲーム用Javascriptアプリ開発プラットフォーム。なぜゲーム用かというと、Cocos2dはCANVASを用いてるからなんです。そのかわり、とってもヌルヌルっと動くのでまるでネイティブかのような動きに感激します:)
Cocos2d-JSでもアプリを作ったのでよければご覧ください。
 
COLORWARS – iOS
COLORWARS – Android
 

Cordovaの環境構築をしよう!

 
アプリ開発プラットフォームについてさらりとお話しましたが、その中でもWeb言語だけで一番簡単に作れるCordovaの環境構築をしていきたいと思います。
まず前提として、MacOSXであることが条件になります!なぜかというと、MacOSXでないとiOSアプリ開発はできません。iOSアプリ開発にはXcodeというツールからアプリリリースしていく手順があるのですが、WindowsOSだとそれができないんです。
 
Androidだけでもいい!って方もいるかと思うのですが、iOSとAndroidどちらもリリースしましたがユーザー数が桁違いにiOSの方が多いのであんまりオススメできません;(
 
それでは、Cordovaの環境構築へ進みたいと思います。全ては環境構築から、ですが…魔の環境構築です。
エラーが出てうまくいかなくなるかもしれませんが、負けないで頑張ってください!Hello Worldを表示できたらもうゴールです!
 
環境構築は以下のような流れで進みたいと思います。
 

  1. Android SDKをインストール
  2. Android SDK Managerを起動する
  3. Android SDKのPATHを通す
  4. Node.jsのインストール
  5. Cordovaコマンドラインツールのインストール

 

AndroidSDKをインストールする

 
AndroidSDKをダウンロードします。
Android Developersにアクセスします。
 
上部の[Develop]-[Tools]をクリックします。
 
[DOWNLOAD OPTIONS]というボタンをクリックします。
 
Get just the command line toolsからandroid-sdkと描かれているファイルをダウンロードします。
 
ダウンロードが完了したら、インストーラーを起動してください。
もし、インストールできない場合はJDKがインストールされていないかもしれないので、確認してください。
 
基本的にはデフォルトのまま[次へ]進むと、[完了]ボタンが表示され、Android SDKのインストールが完了となります。
 

Android SDK Managerを起動する

 
Android SDKのインストールが完了したら、Android SDK Managerを起動してください。
Android SDK Managerでは、必要なパッケージをインストールします。
 
Tools
 ー Android SDK Tools
 ー Android SDK Tools Platform-tools
 ー Android SDK Build-tools 23.0.3
Android 6.0(API 23)
 ー SDK Platform
Android 5.1.1(API 22)
 ー SDK Platform
Android 5.0.1(API 21)
 ー SDK Platform
Android 4.4.2(API 19)
 ー SDK Platform
Android 4.1.2(API 16)
 ー SDK Platform
Android 5.0.3(API 15)
 ー SDK Platform
Extras
 ー Android Support Library
 
必要なパッケージは上記のようになります。
ライセンスに同意し、インストールして完了です。
 

AndroidSDKのPATHを通す

 
ホームディレクトリにある、.bash_profileに下記のようにパスを追加します。
.bash_profileがない場合は新しく作成してください。
 

export PATH=$PATH:/Applications/[Android SDK 展開フォルダ]/sdk/tools/
export PATH=$PATH:/Applications/[Android SDK 展開フォルダ]/sdk/platform-tools/

 
上のパスを反映させるコマンドを叩きます。
 

source ~/.bash_profile

 
反映を確認するコマンドを叩きます。
 

android -h

 
上のコマンドを実行すると、Androidのヘルプオプションが表示されます。
 
次に、adbコマンドを確認します。
 

adb version

 
adbのバージョンが表示されます。以上でパスを通す作業は完了です。
 

Node.jsをインストールする

 
次に、Node.jsをインストールします。
公式ページにアクセスし、パッケージをダウンロードします。
Node.jsはCordovaのコマンドを使えるようにします。
 
インストールが完了したら、下記コマンドを実行します。
 

node -v

 
Node.jsをインストールすると、npmもインストールされるのでこちらも合わせて確認します。
 

npm -v

 
上記でバージョンが表示されていれば、インストール完了です。
 

Node.jsとは

サーバーサイドのJavascriptで、JavaScriptアプリケーションのプラットフォームです。
非同期で動作し、メモリ消費の少ないシングルスレッドで、速いです。
Javascriptのエンジンは、GoogleのV8というものでとくかく速いです(笑)
 
Node.js上で動く有名なフレームワーク

  • Express
  • Backbone.js
  • AngularJS
  • Sails
  • Meteor

 

Cordovaコマンドラインツールのインストール

 
Cordovaコマンドラインツールのインストールは下記のコマンドを実行します。
 

sudo npm install -g cordova

 
最後に、Cordovaのバージョンを確認します。
 

cordova -v

 
バージョンが表示されていれば完了です!
 

Cordovaコマンドラインツールとは

Cordovaフレームワークを使ったアプリプロジェクトの作成や管理を行うために用いられます。
Cordova3.0から、このようなコマンドラインツールが導入され、ターミナル上でCordovaコマンドが使用できるようになりました。
それを知らずに過去記事などを参考にしていた私は、かなり遠回りをしたのであります。
みなさんお気をつけください。Cordovaはプロジェクト作成やビルドまでほぼ全てターミナルで作業しますよ!
 

最後に

ここまですんなりと環境構築できた、なんて方は奇跡でしょうね。
多分エラーが出たり、うまくパスが通らなかったりするかもしれません。
 
これまでにNode.jsを入れていたのをうっかり忘れていて、バージョンが古くて動かなかったり…なんてこともあります。
 
上でも記載しましたが、Cordovaは -g でグローバルにインストールするのが無難です;(
次回は、いよいよテストアプリを作っていきます!
プロジェクトの新規作成と実機での確認方法を紹介していきます。