SharePoint Add-ins 開発で AnguarJS と TypeScriptを使用するための手順

提供: SharePoint Developer
移動: 案内検索

SharePoint Add-ins の開発で、AngularJS と TypeScript を使用するためには事前の準備が必要です。
ここでは、Visual Studio 2015 を使用する場合の事前準備の手順を記載しますが、他のバージョンでも同じような作業を行う必要があります。
※開発言語は C# を使用します。

SharePoint Add-ins のプロジェクトの作成

AngularJS や TypeScript の使う/使わないに関係なく、SharePoint Add-ins の開発で Visual Studio を使用する場合は、SharePoint Add-ins のプロジェクトテンプレートである「SharePoint用アプリ」を使用します。
newproject.png

AngularJS を使用するための準備

AngularJS を SharePoint Add-ins で使用するためには、他の一般的な JavaScript のライブラリ等と同様に、AnguarJS のライブラリをプロジェクトに追加する必要があります。
Visual Studio では NuGet を使ってこの作業を簡単に行うことができます。
SharePoint Add-ins のプロジェクトを作成した後、Visual Studio のソリューションエクスプローラの右クリックメニューから[NuGet パッケージの管理]をクリックします。
nuget.png

すると NuGet パッケージマネージャが起動するので、検索ボックスに「angularjs」と入力して検索をし、AngularJS のライブラリを探します。
AnguarJS のライブラリはいくつか存在しますが、必要最低限のライブラリだけ導入するには「AngularJS.Core」というパッケージをインストールします。
nuget2.png

[インストール]ボタンをクリックすると 確認ダイアログが表示されたのち、AngularJS を使用する上での必要最低限のファイルがプロジェクトに組み込まれます。
nuget3.png

プロジェクトに以下のファイルが追加されます。

  • angular-mocks.js
  • angular.js
  • angular.min.js
  • angular.min.js.map

TypeScript を使用するための準備

SharePoint Add-ins 開発用のプロジェクトテンプレートは、デフォルトでは TypeScript を使用することができないため、ちょっと強引に TypeScrip を使用するための設定を加えます。
Visual Studio を終了し、プロジェクトファイル(.csproj)をメモ帳などのテキストエディタで開きます。
プロジェクトファイルの中身は XML になっています。この XML の <Project> タグの内側に以下のタグを挿入します。

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptIncludeComments>true</TypeScriptIncludeComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptIncludeComments>false</TypeScriptIncludeComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
</PropertyGroup>
<Import Project="$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets" />


プロジェクトファイルを保存後、Visual Studio を起動します。これでプロジェクトのプロパティを開くと、[TypeScript ビルド]というセクションが追加されているかと思います。
typescriptsettings.png


以上で、SharePoint Add-ins で AngularJS と TypeScript を使用する準備が整いました。