REST API を使った SharePoint 用アプリ 3 分間クッキング


以前のエントリで PowerShell を使った REST API の利用例を紹介しました。今回は、折角ですので REST API を使う SharePoint 2013 の新機能にあたる SharePoint 用アプリをパパッと作ってしまいましょう。”環境が整っていれば” 3 分で実行できます。

事前の準備

以下のインストールおよび設定を行ってください。特に最後の手順は若干手順が多いので、注意してください。

SharePoint 用アプリの作成

今回は、以下のサンプル コードをベースに、日本語環境でも問題なく動作するように若干手を加えたものを作成します。注意点としては、取得した検索結果の 2 列目に Doc ID が必ず入ってくるという点と、取得したいと指定した管理プロパティの後 (の列に) にいくつかの情報が付与されるので、それらは不要ならスキップすること、です。

SharePoint 2013: Using the search REST service from an app for SharePoint
http://code.msdn.microsoft.com/officeapps/SharePoint-2013-Perform-a-1bf3e87d

  1. 新しいプロジェクトを作成し、テンプレートとして [Visual C#] – [Office/SharePoint] – [アプリ] の [SharePoint 2013 用アプリ] を選択します
    image
  2. [アプリのデバッグに使用する SharePoint サイト] に [開発者向けサイト] テンプレートで作成しておいた SharePoint サイトの URL を、[SharePoint 用アプリをホストする方法] に [SharePoint ホスト型] を選択します (今回はオンプレミス前提なので、この選択を行いました)
    image
  3. AppManifest.xml ファイルをソリューション エクスプローラーから選択し、[アクセス許可] タブ内に、[スコープ] が [検索対象] で、[アクセス許可] が [QueryAsUserIgnoreAppPrincipal] を選択します
    image
  4. Default.aspx をソリューション エクスプローラーから選択し、画面表示用の HTML を追加します
    image
  5. App.js をソリューション エクスプローラーから選択し、REST API 呼び出しを含む JavaScript コードを追加します
    image
  6. [ビルド] – [ソリューションの配置] で SharePoint 用アプリの配置を行うと、SharePoint ページが表示され、SharePoint 用アプリを信頼するか聞かれるので、[信頼する] を選択します
    image
  7. 表示された検索ボックスに検索キーワードを入力し、[検索] ボタンをクリックすれば、検索結果が表示されます
    image

実際のプロジェクト ファイル一式は、こちらからダウンロードできます。
作成したコードの主な箇所を以下に記載します。TABLE タグが利用されているなど、若干見苦しいところもありますが、そこはサンプルということでご容赦ください。

Default.aspx (一部掲載)

<%– 次の Content 要素内のマークアップはページの TitleArea 内に配置されます –%>
<asp:Content ContentPlaceHolderID=”PlaceHolderPageTitleInTitleArea” runat=”server”>
    サンプル検索アプリケーション
</asp:Content>

<%– 次の Content 要素内のマークアップとスクリプトはページの <body> 内に配置されます –%>
<asp:Content ContentPlaceHolderID=”PlaceHolderMain” runat=”server”>

    <div>
        <input id=”searchTextBox” type=”text” />
        <input id=”searchButton” type=”button” value=”検索” />
    </div>
    <div id=”resultsDiv”>
    </div>

</asp:Content>

App.js (全文掲載)

‘use strict’;

var context = SP.ClientContext.get_current();

// このコードは、DOM を準備できると実行され、SharePoint オブジェクト モデルを使用するために必要なコンテキスト オブジェクトを作成します
$(document).ready(function () {
    var spAppWebUrl = decodeURIComponent(getQueryStringParameter(‘SPAppWebUrl’));

    $(“#searchButton”).click(function () {
        var queryUrl = spAppWebUrl + “/_api/search/query?querytext='” + encodeURIComponent($(“#searchTextBox”).val()) + “‘&selectproperties=’Title,Path,Author,Write,HitHighlightedSummary'”;

        $.ajax({ url: queryUrl, method: “GET”, headers: { “Accept”: “application/json; odata=verbose” }, success: onQuerySuccess, error: onQueryError });
    });
});

// この関数は、上の呼び出しが成功した場合に実行されます
function onQuerySuccess(data) {
    var results = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;

    $(“#resultsDiv”).empty();
    $(“#resultsDiv”).append(‘<table>’);

    $(“#resultsDiv”).append(‘<tr><th>ランク</th><th>タイトル</th><th>作成者</th><th>更新日</th><th>スニペット</th></tr>’);

    $.each(results, function () {
        $(“#resultsDiv”).append(‘<tr>’);
        $(“#resultsDiv”).append(‘<td>’ + this.Cells.results[0].Value + ‘</td>’);
        $(“#resultsDiv”).append(‘<td><a href=”‘ + encodeURI(this.Cells.results[3].Value) + ‘”>’ + this.Cells.results[2].Value + ‘</a></td>’);
        $(“#resultsDiv”).append(‘<td>’ + this.Cells.results[4].Value + ‘</td>’);
        $(“#resultsDiv”).append(‘<td>’ + this.Cells.results[5].Value + ‘</td>’);
        $(“#resultsDiv”).append(‘<td>’ + this.Cells.results[6].Value + ‘</td>’);
        $(“#resultsDiv”).append(‘</tr>’);
    });

    $(“#resultsDiv”).append(‘</table>’);
}

// この関数は、上の呼び出しが失敗した場合に実行されます
function onQueryError(error) {
    $(“#resultsDiv”).append(error.statusText)
}

//function to get a parameter value by a specific key
function getQueryStringParameter(urlParameterKey) {
    var params = document.URL.split(‘?’)[1].split(‘&’);
    var strParams = ”;
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split(‘=’);
        if (singleParam[0] == urlParameterKey)
            return decodeURIComponent(singleParam[1]);
    }
}

広告