Ionic と Monaca によるモバイルアプリの作成

Cordova を利用すると、iOS、Android、Windows 向けのアプリを、Web テクノロジを使用して簡単に作成できるようになります。空のプロジェクト テンプレートには、基本的な「Hello World」アプリを作成するためのコンポーネントがすべて用意されてはいますが、その一方でユーザーの皆様からは、足がかりとなる機能を充実させて、コミュニティで細かく検討されたベストプラクティスや、適切にモデル化された設計パターン、洗練された外観のアプリをより短時間で作成する方法のアドバイスを利用したいとのご意見をいただいていました。マイクロソフトは常にこうした皆様の声に応えてきたいと考えています。

そこで今回は、業界における評価が特に高いモバイル開発者の方と連携し、出発点として最適な機能を Visual Studio で利用できるようにしました。具体的には、Ionic (英語) と Monaca に熟練した開発者の皆様にご協力いただき、それらのライブラリをベースとして AngularJS (英語) のルーター、モジュール、コントローラー、ファクトリを使用したプロジェクトテンプレートをリリースしました。これらのテンプレートを利用すれば、Ionic または Onsen UI フレームワークを使用して、ネイティブの外観を持つモバイルアプリを Visual Studio 内で作成できるようになります。

こうしたプロジェクト テンプレートを基に Apache Cordova アプリを作成するには、Visual Studio ギャラリーにアクセスして、Ionic テンプレート (英語) と Monaca テンプレート (英語) をそれぞれインストールします。数回クリックするだけで、これらのテンプレートが [New Project] ダイアログに表示されるようになります。

注: 現在のところ、利用可能な Ionic テンプレートは JavaScript 用のみです。マイクロソフトでは Ionic チームと共に、近いうちに TypeScript 用テンプレートをリリースできるように取り組んでいます。

プロジェクトを作成すれば、Visual Studio での開発を始める準備がすべて整います。既定の Apache Cordova プロジェクトとまったく同じように、Ripple やデバイス、エミュレーターでアプリの実行とデバッグが可能です。また、JS と HTML Intellisense が AngularJS 向けに機能拡張されているため、ドキュメントを参照する機会が減り、その分コーディングに時間をかけることができます。

Ionic CLI を使い慣れている場合でも、Visual Studio 2015 RC で相互運用性が強化されたため、Ionic のコマンド ラインにシームレスに移動することが可能です。Visual Studio での表示内容には、ファイル システムでの表示内容が反映されます。

Intellisense のサポート強化

数か月前になりますが、Jordan Matthiesen のブログ記事で、AngularJS での作業が簡単になるエディターの拡張機能が取り上げられていました。Ionic フレームワークと Monaca フレームワークは共に AngularJS をベースとしているため、こうしたエディターの拡張機能や若干の機能追加のおかげで、これらのフレームワークを使用した作業がはるかに改善されています。

まず、Ionic と Monaca の両方のプロジェクト テンプレートで .d.ts ファイルが提供されます。これらのファイルに含まれるメタデータによって、Visual Studio で JavaScript ライブラリのクラスやメソッドの定義を表示できるようになります。つまり、次の図のように、非常に便利な Intellisense が標準で利用可能なのです。

また、Visual Studio 2015 RC の Intellisense では、Angular ディレクティブと、HTML マークアップ内の ng- 属性がサポートされます。これにより、次の図のように、Ionic と Onsen UI の両方の Web コンポーネントで Intellisense を利用することができます。

今後の展開

マイクロソフトでは今後も、皆様がよく使用されるフレームワークやライブラリ、ツールを利用した Visual Studio のテンプレートをさらに追加していきたいと考えています。次に提供すべきテンプレートの作成にご協力いただける場合やアイデアをお持ちの場合は、UserVoice (英語)、Twitter (英語)、StackOverflow (英語) までお知らせください。筆者の電子メール アドレス宛てにも直接ご連絡いただければ幸いです。

次回もどうぞお楽しみに。

Kirupa

Kirupa Chinnathambi (Visual Studio クライアントプラットフォーム チーム、プログラム マネージャー) @kirupa Kirupa Chinnathambi は Visual Studio チームのプログラム マネージャーであり、HTML 開発者エクスペリエンスの改良について日々検討しています。余暇にはブログを投稿したり、Twitter や Facebook、kirupa.com (英語) でも活動しています。