Ionic と Visual Studio で高品質なモバイル アプリを開発


 

本記事は、マイクロソフト本社の The Visual Studio Blog の記事を抄訳したものです。
【元記事】 Create high quality mobile apps with Ionic & Visual Studio 2016/8/3

 

既にモバイル アプリケーション開発に携わっている Web 開発者の皆様にとっても、これから力を入れようと考えている皆様にとっても嬉しいお知らせがあります。このたび、Typescript 言語 (英語) を使用する新しい Visual Studio テンプレートがリリースされました。Apache Cordova プラットフォーム (英語)Ionic UI フレームワーク (英語) 上に構築されるものです。

改めて説明すると、Ionic とは Cordova 開発者の間でたいへん人気の高いアプリケーション開発フレームワークであり、優れたユーザー エクスペリエンスを備えた Android、iOS、Windows 10 デバイス向けのアプリを簡単に開発することができます。ネイティブ SDK としてモバイル デバイス向けに最適化された既製の UI コントロールのセットが提供されます。HTML では、UI をデザインするためのプリミティブ (基本的に長方形) のセットしか提供されませんが、Ionic では、モバイル開発者に HTML ベースのコントロールが提供され、タブ コントロールやリスト ビュー、その他多数のコントロールの使用が可能になります。

Tool for Apache Cordova (TACO) チームは、この 1 年間 Ionic チームと協力して、Ionic フレームワークと TypeScript 言語 (今後発表予定の Ionic 2 (英語) フレームワークの開発言語) を使用する Visual Studio 開発者に最高のエクスペリエンスをお届けできるよう取り組みを進めてきました。そして今回、TypeScript 言語を使用する新しい 2 つの Ionic テンプレート セットをリリースします。

これらのテンプレートはリンク先からダウンロードできます。詳細については、次のセクションをご覧ください。

Ionic 2 のテンプレートをお試しください

Ionic チームは、Angular 2 をベースとする次期バージョンの Ionic の RC リリースに向けて精力的に取り組んでいます。同様に、TACO チームも Visual Studio による Ionic 2 の優れたサポートを実現するために尽力しており、現行の Ionic 2 Beta 10 リリースをベースとする初期バージョンの Ionic 2 テンプレートをリリースしました。

このテンプレート セットには、上記の Ionic 1 リリースと同じ 3 つのテンプレートが含まれています。

  • Blank
  • Sidemenu
  • Tabs

TACO チームは、これらのテンプレートを Visual Studio 2015 で実験的にリリースすると同時に、次期バージョンである Visual Studio “15” で Ionic 2 開発者に優れたエクスペリエンスをお届けするべく取り組みを続けています。

開発者エクスペリエンスにはまだ改良が必要な点がいくつかあります。これらは、テンプレートを使用してプロジェクトを初めて作成するときに表示されるプロジェクトの readme ページに記載されています。特に重要な点として、Ionic 2 テンプレートを使用する場合には次の作業を行う必要があります

  • Visual Studio 2015 Update 3 以上をインストールする
  • 最新版の ASP.NET Web ツール (英語) をインストールする
  • 最初のプロジェクトを作成した後、ソリューション エクスプローラーの依存関係の項目から “(Restoring)” というメッセージが消えるまで待つ
  • ビルド前に、[View] メニューから [Other Windows][Task Runner Explorer] の順に選択して、Task Runner Explorer を開く。これにより、このテンプレートで使用するカスタム Gulp ビルド スクリプトを Visual Studio で実行できるようになります。

Ionic フレームワークとベータ版のテンプレートの利用方法の詳細については、先日公開された Ionic 2 の入門ガイド (英語) をご覧ください。

TypeScript と Ionic 1: 型によるツールの強化

以前より、TACO 開発者には JavaScript 開発者向けの Ionic 1 テンプレート (英語) が提供されていました。今回の更新では、JavaScript テンプレートのマイナー アップデートが実施されたほか、TypeScript プログラミング言語を使用する新しいテンプレート セットが追加されました。

JavaScript 開発と TypeScript 開発の両方で、以下の 3 つの Ionic テンプレートを利用できます。

  • Blank
  • Sidemenu
  • Tabs

インストール後、[File] メニューから [New Project] を選択すると、[JavaScript][Apache Cordova Apps] カテゴリと [TypeScript][Apache Cordova Apps] カテゴリに対象のテンプレートが表示されます。

TypeScript のサポートが追加されたことにより、他の TypeScript 開発者と同じツールを利用できます。以下に主な機能の一部を示します。

  • 高精度の IntelliSense
  • リファクタリング ツール
  • ソース全体から参照を検索
  • シンボルを使用したコード内のナビゲーション

Visual Studio と Ionic 1 の利用方法の詳細については、Ionic 1 の入門ガイド (英語) をご覧ください。

Ionic のエクスペリエンス向上へのご協力のお願い

Ionic 2 (英語) および Ionic 1 (英語) の TypeScript テンプレートを試して、ご感想をお聞かせください。これらのテンプレートの使用方法の詳細については、Ionic 2 の入門ガイド (英語)Ionic 1 の入門ガイド (英語) のチュートリアルをご覧ください。

ご意見については、各テンプレートのダウンロード ページのコメント欄、メールStack Overflow (英語)Twitterドキュメント サイト (英語) の各ドキュメントのコメント欄までお寄せください。

Jordan Matthiesen (@JMatthiesen)

JavaScript モバイル開発者ツール担当プログラム マネージャー

Jordan Matthiesen はマイクロソフトで Web およびモバイル アプリケーション開発者向けの JavaScript ツールを担当しています。それ以前にも 18 年以上の開発経験があり、現在は優秀なモバイル開発者からできるだけ多くの意見を取り入れることにしています。プライベートでは、コーヒーを飲みながら、妻と 4 人の子ども、犬と猫と共に過ごす時間を大切にしています。

 

Comments (0)

Skip to main content