スポンサーリンク

No.0 Visual Studio 2015 Community

 ハイブリッドアプリを作ろう!と思っていろいろ調べたところ、Onsen UI や Ionic なる UI フレームワークがあり、それらを使えばデザインセンスのない僕でもそれなりのアプリが作れそう。
 それらを慣れ親しんだ Visual Studio で使ってみようというのが今回のコンセプトの 1 つ。
 あと、UI フレームワーク以外にも JavaScript のフレームワークとして AngularJS とか React とかあるけど、それらの知識がほぼない状態からのスタートです。
 で、Onsen UI と Ionic、他に famo.us とかあるけど、今回のターゲットは Ionic です。バージョンは 2 系です。Ionic 2 を Visual Studio で扱ってる情報が意外と少ない!調べる努力が足りないのか……。

環境

  • Visual Studio 2015 Community Update 3
  • Visual Studio Tools for Apache Cordova
 Visual Studio Tools for Apache Cordova は Visual Studio 2015 Community をインストールするときに Cross Platform Mobile Development の下にある HTML/JavaScript (Apache Cordova) にチェックを入れると一緒に入ります。
 詳しくは以下を参照してください。


準備

 Visual Studio 用に Ionic 2 のプロジェクトテンプレートが用意されています。
 Visual Studio を起動したら、メニューの「ツール」から「拡張機能と更新プログラム」を選択します。



 左のペインで「オンライン」を選択肢、右上のテキストボックスに「Ionic2」と入力して検索します。



 ダウンロードボタンを押下します。途中、ライセンスの確認ダイアログが表示されるので、問題がなければ「インストール」ボタンを押下します。



 これで、新しいプロジェクトを作るときのテンプレートに Ionic 2 用のものが TypeScript の Apache Cordova Apps 下に追加されます。



その他

 Observable 見つからないエラーがいっぱい

 ビルドも通るし Ripple で実行も可能。でも、エラー一覧をい表示すると以下のようなエラーが 200 個とか出るw
Invalid module name in augmentation, module '.../../Observable'
  とりあえず「ionic2 vs2015 Observable cannot be found」とかで Google 先生に聞いて、執筆時点で一番上に表示される github の Issues に出ていた方法で解決しました。

Invalid module name in augmentation #8518

 英語にめげずにずーっと読んでいくと、以下のコメントに解決策があります。

#8518 (comment)

 要は、このバグを直した TypeScript のソースがあるから入れ替えてくれ、とのこと。
 以下の URL から typescriptServices.js をダウンロードして、Visual Studio 2015 のインストールで配置されたものと入れ替えます。

https://raw.githubusercontent.com/Microsoft/TypeScript/Fix8518/lib/typescriptServices.js

 typescriptServices.js のデフォルトの配置場所は以下のとおり。
C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\COmmonExtensions\Microsoft\TypeScript\typescriptServices.js
これによって Visual Studio の動作がおかしくなったりしても責任は負いませんのであしからず。

 次回!とりあえず Hello World を表示してみる!

0 件のコメント:

コメントを投稿