Project Server 2013 JavaScript オブジェクトモデルの概要

[アーティクル]
04/04/2023

Project Server 2013 では、Project Online、モバイル、オンプレミスの開発で JavaScript オブジェクトモデルを使用できます。このトピックでは、JavaScript オブジェクトモデルの概要と、JavaScript オブジェクトモデルを使用してプロジェクトを取得して反復処理するアプリケーションページを作成する方法について説明します。

Project Server JavaScript オブジェクトモデルの使用

JavaScript オブジェクトモデルを使用すると、(リモートで実行する必要があるマネージドクライアントコードではなく) クライアント側で実行するアプリを作成するのに最適な方法です。アプリでは、JavaScript オブジェクトモデルを使用して、サーバーに非同期呼び出しを送信することで、オブジェクトを取得または変更できます。 JavaScript オブジェクトモデルを使用するアプリは、通常、カスタム SharePoint アドイン、アプリケーションページ、Web パーツとしてデプロイされます。詳細については、「SharePoint 2013 のホスト Web、アドイン Web、および SharePoint コンポーネント」の「SharePoint 用アプリに含めることができる SharePoint コンポーネントの種類」を参照してください。

JavaScript オブジェクトモデルは Project Server 2013 のメイン機能を実装しますが、JavaScript オブジェクトモデルとサーバーオブジェクトモデルには 1 対 1 のパリティがありません。 JavaScript オブジェクトモデルのエントリポイントは ProjectContext オブジェクトです。これは Project Server 2013 のクライアントコンテキストを表し、サーバーのコンテンツと機能へのアクセスを提供します。 Project Server 2013 の JavaScript オブジェクトモデルは、アプリケーションサーバーの既定のパス %ProgramFiles%\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS にある PS.js ファイルで定義されています。 Project Server 2013 では、PS.Debug.js ファイルも同じ場所にインストールされます。 PS.Debug.js は、IntelliSense 情報を提供する未承認バージョンの PS.js です。

JavaScript オブジェクトモデルではフォーム認証が許可され、すべての要求が現在のユーザーとして認証されます。カスタムアプリとソリューションを設計するためのセキュリティとその他の考慮事項の詳細については、「 SharePoint 2013 での認証、承認、セキュリティ」、 SharePoint アドインのアーキテクチャと開発状況の重要な側面、 SharePoint ソリューションと比較した SharePoint アドインに関するページを参照してください。

注:

SharePoint サイトからリモートでデータにアクセスするために、SharePoint 2013 には、クライアント側のクロスドメイン呼び出しを行えるクロスドメインライブラリが用意されています。詳細については、「クロスドメインライブラリを使用してアドインから SharePoint 2013 データにアクセスする」を参照してください。

Project Server 2013 の JavaScript オブジェクトモデルを使用するための多くの概念とプロセスは、関連するクライアントオブジェクトモデルに似ています。 Project Server 2013 マネージドクライアントオブジェクトモデルの詳細については、「 Microsoft.ProjectServer.Client」を参照してください。 SharePoint 2013JavaScript オブジェクトモデルとマネージドクライアントオブジェクトモデルの詳細については、「 SharePoint 2013 で JavaScript ライブラリコードを使用して基本的な操作を完了する」および「SharePoint 2013 クライアントライブラリコードを使用して基本的な操作を完了する」を参照してください。

チュートリアル: プロジェクトを取得および反復処理するアプリケーションページの作成

サイトの各発行済みプロジェクトの ID、名前、および作成日を表示するアプリケーションページを作成する方法を説明します。

プロジェクトを取得および反復処理するアプリケーションページの作成の前提条件

このトピックで説明するアプリケーションページを開発するには、以下の製品をインストールおよび構成する必要があります。

SharePoint Server 2013
少なくとも 1 つの発行済みプロジェクトを含む Project Server 2013
Visual Studio 2012
Office Developer Tools for Visual Studio 2012

また、SharePoint Server 2013 に拡張機能を展開したり、プロジェクトを取得したりするためのアクセス許可も必要です。

注:

次の手順では、Project Server 2013 を実行しているコンピューターで開発していることを前提としています。

Visual Studio 2012 でのアプリケーションページの作成

次の手順では、SharePoint プロジェクトと、テーブルとラベルを含むアプリケーションページを作成します。テーブルにはプロジェクトに関する情報が表示され、ラベルにはエラーメッセージが表示されます。

Project Server 2013 を実行しているコンピューターで、管理者として Visual Studio 2012 を実行します。
次のように、空の SharePoint 2013 プロジェクトを作成します。
1. [ 新しいプロジェクト] ダイアログボックスで、上部のドロップダウンリストから [ .NET Framework 4.5] を選択します。
2. テンプレートカテゴリの一覧で、[Office SharePoint] カテゴリを選択し、[SharePoint 2013 Project] テンプレートを選択します。
3. プロジェクトに GetProjectsJSOM という名前を付け、[ OK ] ボタンを選択します。
4. [SharePoint カスタマイズウィザード] ダイアログボックスで、[ファームソリューションとして配置する] を選択し、[OK] ボタンを選択します。
ソリューションエクスプローラーで、ProjectsJSOM プロジェクトの Site URL プロパティの値を編集して、https://ServerName/PWAProject Web App インスタンスの URL (例: ) と一致させます。
[GetProjectsJSOM] プロジェクトのショートカットメニューを開き、SharePoint "レイアウト" のマップされたフォルダーを追加します。
[レイアウト] フォルダーで、GetProjectsJSOM フォルダーのショートカットメニューを開き、ProjectsList.aspx という名前の新しい SharePoint アプリケーションページを追加します。

注:

この例では、Visual Studio 2012 がアプリケーションページ用に作成する分離コードファイルは使用しません。
[ProjectsList.aspx] ページのショートカットメニューを開き、[スタートアップアイテムとして設定] を選択します。

次のように、[ProjectsList.aspx] ページのマークアップで、"Main" の asp:Content タグ内にテーブルとメッセージプレースホルダーを定義します。

<table width="100%" id="tblProjects">
    <tr id="headerRow">
        <th width="25%" align="left">Project name</th>
        <th width="25%" align="left">Created date</th>
        <th width="50%" align="left">Project ID</th>
    </tr>
</table>
<div id="divMessage">
            <span id="spanMessage" style="color: #FF0000;"></span>
</div>

プロジェクトコレクションの取得

次の手順では、プロジェクトコレクションを取得および初期化します。

次のように、div 終了タグの後ろに、PS.js ファイルを参照する SharePoint:ScriptLink タグを追加します。
```
 <SharePoint:ScriptLink name="PS.js" runat="server" ondemand="false" localizable="false" loadafterui="true" />
```

次のように、SharePoint:ScriptLink タグの下に script タグを追加します。

 <script type="text/javascript">
     // Paste the remaining code snippets here, in the order that they are presented.
 </script>

次のように、プロジェクトコレクションを格納するためのグローバル変数を宣言します。
```
var projects;
```
ユーザー設定コードの実行前に PS.js ファイルが確実に読み込まれるようにするための SP.SOD.executeOrDelayUntilScriptLoaded メソッドを呼び出します。
```
SP.SOD.executeOrDelayUntilScriptLoaded(GetProjects, "PS.js");
```
次のように、現在のコンテキストに接続してプロジェクトコレクションを取得する関数を追加します。
```
 function GetProjects() {
     // Initialize the current client context.
     var projContext = PS.ProjectContext.get_current();
     // Get the projects collection.
     projects = projContext.get_projects();
     // Register the request that you want to run on the server.
     // This call includes an optional "Include" parameter to request only the
     // Name, CreatedDate, and Id properties of the projects in the collection.
     projContext.load(projects, 'Include(Name, CreatedDate, Id)');
     // Run the request on the server.
     projContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);
 }
```
このコンテキストで取得されるいくつかのクライアントオブジェクトは、初期化されるまでデータが格納されません。さらに、 ValueObject 型のプロパティの場合は、その値にアクセスする前にプロパティを明示的に要求する必要があります。 (初期化前にプロパティにアクセスしようとすると、 PropertyOrFieldNotInitializedException 例外が発生します)。

オブジェクトを初期化するには、load メソッド (または loadQuery メソッド) を呼び出し、次に executeQueryAsync メソッドを呼び出します。
- load 関数または loadQuery 関数を呼び出すと、サーバー上で実行する要求が登録されます。取得するオブジェクトを表すパラメーターを渡します。 ValueObject プロパティを操作する場合は、そのプロパティもパラメーターで要求します。
- executeQueryAsync 関数を呼び出すと、クエリ要求がサーバーに非同期に送信されます。サーバーから応答を受け取ったときに呼び出す成功のコールバック関数と失敗のコールバック関数を渡します。
ネットワークトラフィックを減らすには、load 関数を呼び出すときに、操作するプロパティのみを要求します。また、複数のオブジェクトを操作する場合、可能であれば load 関数の複数の呼び出しをまとめてから、executeQueryAsync 関数を呼び出します。

プロジェクトコレクションの反復処理

次の手順では、プロジェクトコレクションを反復処理 (サーバーの呼び出しが成功の場合)、またはエラーメッセージを表示 (呼び出しが失敗の場合) します。

次のように、プロジェクトコレクションを反復処理する成功のコールバック関数を追加します。

 function onQuerySucceeded(sender, args) {
     // Get the enumerator and iterate through the collection.
     var projectEnumerator = projects.getEnumerator();
     while (projectEnumerator.moveNext()) {
         var project = projectEnumerator.get_current();
         // Create the row for the project's information.
         var row = tblProjects.insertRow();
         // Insert cells for the Id, Name, and CreatedDate properties.
         row.insertCell().innerText = project.get_name();
         row.insertCell().innerText = project.get_createdDate();
         row.insertCell().innerText = project.get_id();
     }
 }

次のように、エラーメッセージを表示する失敗のコールバック関数を追加します。

function onQueryFailed(sender, args) {
    $get("spanMessage").innerText = 'Request failed: ' + args.get_message();
}

アプリケーションページをテストするには、メニューバーの [デバッグ] を選択し、[デバッグの開始] をクリックします。 web.config ファイルの変更を求められたら、[OK] を選択します。

完全なコード例

以下は ProjectsList.aspx ファイルの完全なコードです。

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProjectsList.aspx.cs" Inherits="GetProjectsJSOM.Layouts.GetProjectsJSOM.ProjectsList" DynamicMasterPageFile="~masterurl/default.master" %>
<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
</asp:Content>
<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <table width="100%" id="tblProjects">
    <tr id="headerRow">
        <th width="25%" align="left">Project name</th>
        <th width="25%" align="left">Created date</th>
        <th width="50%" align="left">Project ID</th>
    </tr>
</table>
<div id="divMessage">
        <span id="spanMessage" style="color: #FF0000;"></span>
</div>
<SharePoint:ScriptLink name="PS.js" runat="server" ondemand="false" localizable="false" loadafterui="true" />
<script type="text/javascript">
    // Declare a variable to store the published projects that exist
    // in the current context.
    var projects;
    // Ensure that the PS.js file is loaded before your custom code runs.
    SP.SOD.executeOrDelayUntilScriptLoaded(GetProjects, "PS.js");
    // Get the projects collection.
    function GetProjects() {
        // Initialize the current client context.
        var projContext = PS.ProjectContext.get_current();
        // Get the projects collection.
        projects = projContext.get_projects();
        // Register the request that you want to run on the server.
        // This call includes an optional "Include" parameter to request only the
        // Name, CreatedDate, and Id properties of the projects in the collection.
        projContext.load(projects, 'Include(Name, CreatedDate, Id)');
        // Run the request on the server.
        projContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);
    }
    function onQuerySucceeded(sender, args) {
        // Get the enumerator and iterate through the collection.
        var projectEnumerator = projects.getEnumerator();
        while (projectEnumerator.moveNext()) {
            var project = projectEnumerator.get_current();
            // Create the row for the project's information.
            var row = tblProjects.insertRow();
            // Insert cells for the Id, Name, and CreatedDate properties.
            row.insertCell().innerText = project.get_name();
            row.insertCell().innerText = project.get_createdDate();
            row.insertCell().innerText = project.get_id();
        }
    }
    function onQueryFailed(sender, args) {
        $get("spanMessage").innerText = 'Request failed: ' + args.get_message();
    }
</script>
</asp:Content>
<asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
Application Page
</asp:Content>
<asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" >
My Application Page
</asp:Content>

次の方法で共有

Project Server 2013 JavaScript オブジェクトモデルの概要

Project Server JavaScript オブジェクトモデルの使用

チュートリアル: プロジェクトを取得および反復処理するアプリケーションページの作成

プロジェクトを取得および反復処理するアプリケーションページの作成の前提条件

Visual Studio 2012 でのアプリケーションページの作成

プロジェクトコレクションの取得

プロジェクトコレクションの反復処理

完全なコード例

関連項目

フィードバック

その他のリソース

次の方法で共有

Project Server 2013 JavaScript オブジェクト モデルの概要

Project Server JavaScript オブジェクト モデルの使用

チュートリアル: プロジェクトを取得および反復処理するアプリケーション ページの作成

プロジェクトを取得および反復処理するアプリケーション ページの作成の前提条件

Visual Studio 2012 でのアプリケーション ページの作成

プロジェクト コレクションの取得

プロジェクト コレクションの反復処理

完全なコード例

関連項目

フィードバック

その他のリソース

Project Server 2013 JavaScript オブジェクトモデルの概要

Project Server JavaScript オブジェクトモデルの使用

チュートリアル: プロジェクトを取得および反復処理するアプリケーションページの作成

プロジェクトを取得および反復処理するアプリケーションページの作成の前提条件

Visual Studio 2012 でのアプリケーションページの作成

プロジェクトコレクションの取得

プロジェクトコレクションの反復処理