Visual Studio 2015 community でCordova(phonegap)を使ったandroidアプリの作成
visual studio 2015 community のcordovaインストール手順
cordova(phonegap)というフレームワークを使うと、javascriptを使用してandroidやiOS、windows phone などスマホアプリを比較的簡単に作ることができます。
cordovaの読みは”コルドバ”です。
cordova(phonegap)というフレームワークはCUI(コマンドプロンプト)でインストールし、実行もコマンドプロンプトで行う必要があり、GUIに慣れきっていると意外と面倒でした(私も)。
また、cordovaのインストールは失敗することが多く、最初の最初でつまずくことも多いと思います(私もそうでした)。意外な落とし穴がandroid SDKあたりのインストールだったりと、アプリの開発を始めるにあたり、大きな障害になっていたと思います。
ということで、これらのインストールの失敗やCUIを解決してくれるのが Visual Studio 2015 community を利用したcordovaのアプリ開発です。
visual studio 2015のパッケージをインストールすることで、開発環境の構築自体が無理という元も子もない状態を避けれると思います。 このvisual studio 2015 communityは個人なら誰でも無料で利用できるので利用しない手はありませんね!
では早速インストールです。 その前に当方のインストールの環境は、
OS:windows8.1 pro
CPU:i7
HD:SSD128G
メモリ4G
GPU不明。。。
すでにvisual studio 2013 community がインストールされており、日本語化されている状態です。
あと、VS2015をインストールすると、visual studio 2013 communityはビルドが不能になります!おそらくcordovaのバージョンが上がるためでしょう。
Microsoftのvisual studio 2015のサイトからダウンロード
まずは、ダウンロードサイトに行きます! ここの、左側、紫のcommunityを無料ダウンロードをクリックしてインストーラを起動させ、ダウンロードを開始しましょう。 ちなみに、結構重いファイルなので、就寝中に行うのがベストだと思います。
当方のLTEはplalaの3M使い放題ですが、なんと、速度が8Bを記録したこともある非常に遅いシロモノです。去年あたりは2Mくらい出てたんですが、まともにメールが読めないこともしばしば。
で、インストールにもどりますが、標準でインストールを始めます。
カスタムが軽くなるのは当然ですが、予期せぬトラブルのもとなので標準でインストールします。
この状態になったら、明かりを消して朝を待ちます。 ちなみに、VS2013では10時間ほどインストールに時間を費やしました!
朝目を覚ますとインストールが終了していました。
さらに次のインストールを始めます。 VisualStudio2015のアイコンが作成されているので、これをクリックします。
クリックするとサインインをもとめられます。
サインインが完了するとVisualStudio2015が起動します。VS2013と見た目の大きな違いはなさそうですね。
これより、cordova(phonegap)を使用するためのライブラリのパッケージをインストールします。
始めに、[新しいプロジェクト]テンプレートの[javascript]-[Apache Cordova アプリ]-[Tools for Apache Cordova Update2をインストール]-[OK]の順にクリックします。
ダイアログが表示されたらインストールをクリック
ここで再起動を求められるので再起動させます。
再起動したら再びインストールの続きです。
すでにチェックが入っていますがそのままで大丈夫です。
CUIではこれを手動でインストールしていました。 かなりインストール作業が楽になったと思います! インストールをクリックします。 なんか最大10GBという文字が。。。
この画面がでたら、就寝もしくは出勤です。
非常にダウンロードの時間がかかります!
これでインストール作業が終了です。
やはり定番のhello worldをやってみる
VS2015のアイコンをクリックしてVS2015を起動させましょう。 起動したら早速hello worldを表示してみます。 まず始めに新しいプロジェクトを選択し、
[javascript ] – [Apache Cordova Apps] – [空のアプリ(Apache Cordova)]を選択します。 名前を適当に入れ,[OK]をクリックします。 なんかチュートリアル的なものが出てきました。 ここで、右のウインドウのソリューションエクスプローラーに注目
メロンのようなマークとWWWをクリックし、 index.htmlもクリックしてその中身を表示してみましょう。
ここに表示された部分でアプリを作ります! でも、なんか行番号がありません。
行番号がないと寂しいので、VS2015に行番号を表示してみます。 [ツール]-[オプション]の順に選択しましょう。
つぎに、[HTML]-[全般]を選び、[行番号]をチェックします。
これでVS2015に行番号が表示されました。 つぎに、Pタグの下に、同じくPでくくり,hello world と入力します。
いよいよhello world
上にDebugの表示があることを確認し、となりの窓でandroidを選択、つぎにとなりでRippleを選択します。 選択し終えたら、Ripple横の緑の矢印をクリック!
リップルのエミュレータでハローワールドが表示されました。 このような感じで、VS2015を使用したcordova(phonegap)でのAndroidやiOSアプリの開発は簡単にできます!