Visual Studio 2017 と Ionic2 でハイブリッドアプリ開発環境の構築
今年の初め頃に、「Visual Studio 2017」や「Ionic2」が正式にリリースされたようなので、この2つをベースとしたハイブリッドアプリ開発環境を新しく構築したいと思います。
スマホアプリの開発環境の違いやどれを選べばいいか分からないといった方は、こちら（【2017年版】スマホアプリ開発環境の種類一覧と選び方）を一読するといいと思います。大変分かりやすく説明されていると思います。
以下は、環境構築の手順になります。
目次
- Visual Studio 2017 Communityのインストール
- Tools for Apache Cordovaのインストール
- Ionic2用のテンプレートをインストール
- 今後の予定
- 参考リンク
Visual Studio 2017 Communityのインストール
まずは、個人開発者向けの「Visual Studio 2017 Community」をインストールします。
インストーラーはこちらからダウンロード。
一番左の「Visual Studio 2017 Community」の無償ダウンロードをクリック。
ダウンロードされたexeファイルを起動します。
「続行」をクリック。
しばらく待つとインストーラーが起動。
インストールする場所を選んで、右下の「インストール」をクリック。（この時点でCordovaのインストールを行ってもいいですが、今回は後で追加します）
インストール完了。
「起動」をクリックするとサインインの画面が表示されます。
「サインイン」をクリック。
アカウント情報を入力して「サインイン」をクリック。
アカウントが無事に認証されるとVisual Studioが起動します。
Tools for Apache Cordovaのインストール
Visual StudioでCordovaを利用する場合、「Tools for Apache Cordova」をインストールします。
インストール方法はVisual Studioのインストーラーから行います。先ほどのインストーラーをもう一度開いて、下の方へスクロールすると「モバイル＆ゲーム」というカテゴリがあるので、その中の「JavaScriptによるモバイル開発」にチェックを入れて「変更」をクリックします。
「Tools for Apache Cordova」のインストールが完了して、Visual Studioを起動すると、プロジェクトの新規作成（ファイル ＞ 新規作成 ＞ プロジェクト）で「Apache Cordova」用のテンプレートが選択できるようになります。
Ionic2用のテンプレートをインストール
最後にIonic2用のテンプレートをインストールします。
インストールはVisual Studioの拡張機能（ツール ＞ 拡張機能と更新プログラム）から行います。「拡張機能と更新プログラム」のダイアログが表示されたら、「オンライン」を選択し、右上の検索ボックスに「Ionic 2」と入力して検索を実行。
「Ionic 2 templates for Visual Studio 2017」が表示されたら、「ダウンロード」をクリック。
ダウンロード後、インストールを行うにはVisual Studioを一度終了します。終了すると以下のようなスケジュールされたタスクの実行確認が表示されます。
「変更」をクリック。
インストールが完了。
もう一度、Visual Studio を起動して、プロジェクトの新規作成（ファイル ＞ 新規作成 ＞ プロジェクト）画面を表示すると、「Ionic 2」用のテンプレートが選択できるようになっています。
「Ionic 2 - Blank」を選択してプロジェクト新規作成後、なにも変更せずに「F5」でデバッグ実行を行うと、ブラウザーのシミュレーションで以下の画面が表示されます。（初回はビルドに失敗したのか10分ほどして画面が起動し、その後にフリーズ。再起動後は問題なく動作しています。）
[2017年5月17日 追記]
上記の画面が表示されたらOKと思っていましたが、表示された英語の文章をよくよく読むと『準備はほとんど完了したけど、Visual Studioの拡張機能「NPM Task Runner」のインストールがまだ必要。ダウンロードはここから。』的なことが書かれています。つまるところ、開発環境の構築はまだ完了していませんでした。
というわけで、Visual Studio用のNPMタスクランナーをインストールします。上記のブラウザーに表示されたリンクをクリックすると以下のサイトが表示されます。
「Download」ボタンをクリックして「NPM Task Runner v1.4.81.vsix」をローカルに保存。保存されたインストーラーを実行します。
下記の画面が表示されたら、インストールする製品を選択して、「インストール」をクリック。
Visual Studioを起動していると以下のようなメッセージが出るので一旦終了します。
インストール中。
しばらくすると、インストールが完了します。
再びVisual Studioを起動して、先ほどのプロジェクトを開いてデバッグ実行すると、ブラウザーのシミュレーションで以下のような画面が表示されます。
上記の画面が表示されれば、今度こそ、完了です。
今後の予定
以前に、「Visual Studio 2015」「Tools for Apache Cordova」「Ionic」でアプリ開発をやってみましたが、それぞれバージョンが上がったことで画面の構成やJavaScriptからTypeScriptベースになったことなど、結構色々と変わっているので、また最初からアプリの開発をやってみようと思います。
思えば、前回は初めから「Google Map API」を利用しようとしてかなり苦労したので、今回はもっとシンプルなアプリから作っていこうと思います。