PR

Visual Studio 2015 community でCordova(phonegap)を使ったandroidアプリの作成


visual studio 2015 community のcordovaインストール手順

2015-1 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のサイトからダウンロード

まずは、ダウンロードサイトに行きます! 2015-1 cordova ここの、左側、紫のcommunityを無料ダウンロードをクリックしてインストーラを起動させ、ダウンロードを開始しましょう。   ちなみに、結構重いファイルなので、就寝中に行うのがベストだと思います。

当方のLTEはplalaの3M使い放題ですが、なんと、速度が8Bを記録したこともある非常に遅いシロモノです。去年あたりは2Mくらい出てたんですが、まともにメールが読めないこともしばしば。  

で、インストールにもどりますが、標準でインストールを始めます。 visualstudio cordova

カスタムが軽くなるのは当然ですが、予期せぬトラブルのもとなので標準でインストールします。

VS2015cordova

この状態になったら、明かりを消して朝を待ちます。 ちなみに、VS2013では10時間ほどインストールに時間を費やしました!

VS2015 2 cordova

朝目を覚ますとインストールが終了していました。  

さらに次のインストールを始めます。 VisualStudio2015のアイコンが作成されているので、これをクリックします。

VS2015 3 cordova

クリックするとサインインをもとめられます。

VS2015 4 cordova

サインインが完了するとVisualStudio2015が起動します。VS2013と見た目の大きな違いはなさそうですね。  

  2015-8

これより、cordova(phonegap)を使用するためのライブラリのパッケージをインストールします。

始めに、[新しいプロジェクト]テンプレートの[javascript]-[Apache Cordova アプリ]-[Tools  for Apache Cordova Update2をインストール]-[OK]の順にクリックします。

cordova22015-9VS2015cordova

ダイアログが表示されたらインストールをクリック

2015-11cordova

ここで再起動を求められるので再起動させます。

2015-12cordova

再起動したら再びインストールの続きです。

VS2015-13cordova

すでにチェックが入っていますがそのままで大丈夫です。

CUIではこれを手動でインストールしていました。 かなりインストール作業が楽になったと思います!   インストールをクリックします。 なんか最大10GBという文字が。。。

激遅plalaのLTEが悔しいです。 VS2015-14 cordova(phonegap)

この画面がでたら、就寝もしくは出勤です。

非常にダウンロードの時間がかかります!

VS2015 cordova(phonegap)

これでインストール作業が終了です。  

やはり定番のhello worldをやってみる

VS2015のアイコンをクリックしてVS2015を起動させましょう。 起動したら早速hello worldを表示してみます。   まず始めに新しいプロジェクトを選択し、 VS2015 cordova(phonegap)3

  [javascript ] –  [Apache Cordova Apps] – [空のアプリ(Apache Cordova)]を選択します。 名前を適当に入れ,[OK]をクリックします。 VS2015 cordova(phonegap)4VS2015 cordova(phonegap)VS2015 cordova(phonegap)VS2015 cordova(phonegap)   なんかチュートリアル的なものが出てきました。 ここで、右のウインドウのソリューションエクスプローラーに注目 VS2015 cordova(phonegap)5 メロンのようなマークとWWWをクリックし、 index.htmlもクリックしてその中身を表示してみましょう。 VS2015 cordova(phonegap)7   ここに表示された部分でアプリを作ります! でも、なんか行番号がありません。

行番号がないと寂しいので、VS2015に行番号を表示してみます。 [ツール]-[オプション]の順に選択しましょう。   VS2015 cordova(phonegap)8

つぎに、[HTML]-[全般]を選び、[行番号]をチェックします。

VS2015 cordova(phonegap)9

  これでVS2015に行番号が表示されました。 つぎに、Pタグの下に、同じくPでくくり,hello world と入力します。

VS2015 cordova(phonegap)10 これで準備は整いました!  

いよいよhello world

上にDebugの表示があることを確認し、となりの窓でandroidを選択、つぎにとなりでRippleを選択します。     VS2015-cordova(phonegap)24 選択し終えたら、Ripple横の緑の矢印をクリック! VS2015-cordova(phonegap)25

リップルのエミュレータでハローワールドが表示されました。   このような感じで、VS2015を使用したcordova(phonegap)でのAndroidやiOSアプリの開発は簡単にできます!

スポンサードリンク

VS2015のCordova(phonegap)開発で秀悦なエミュレータ ” VS Emulator ”