読者です 読者をやめる 読者になる 読者になる

からめもぶろぐ。

ワタシ SharePoint チョット デキル

SharePoint で SharePoint じゃないページを作る

この記事は「Office 365 Advent Calendar 2016」の参加記事です。

www.adventar.org


SharePoint は標準でもそこそこそれなりに使えるのですが、やはりデザインをカスタマイズしたいという要望は多いです。でも SharePoint のスタイル シート構造を理解してカスタマイズするのは結構大変ですし、Bootstrap のような CSS フレームワークを使うこともできません。カスタマイズに時間をかけるならいっそ最初から作ってしまえ!となってしまいます。ということで、今回は SharePoint 上で SharePoint じゃないページを作ってみたいと思います。*1

マスター ページをダウンロードする

発行機能が有効になっているサイトではデザイン マネージャーから最低限のマスター ページを作成してダウンロードすることができます。対象のサイトで発行機能が有効になっていない場合は、SharePoint Online で既定で作成される検索サイト (https://***.sharepoint.com/search) を表示してください。検索サイトは発行機能が有効になっていますので、デザイン マネージャーを使用できます。

f:id:karamem0:20161202231756p:plain

余談ですが、発行機能はよほどの理由がない限り無効にしておくことをお勧めします。UI のサポートは受けられませんが、既定のマスター ページを変更したり、異なるマスター ページを使用するサイト ページを作るのに発行機能は必要ありません。

適当な名前でマスター ページを作成したら、マスター ページ ギャラリーからダウンロードして、対象のサイトにアップロードします。

サイト ページを作成する

空のサイト ページを作成します。MasterPageFile を "~masterurl/default.master" から先ほどアップロードしたマスター ページに変更します。

<%@ Page Language="C#" MasterPageFile="~sitecollection/_catalogs/masterpage/custom.master" inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Assembly Name="Microsoft.Web.CommandUI, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
</asp:Content>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
</asp:Content>
<asp:Content ContentPlaceHolderID="PlaceHolderSearchArea" runat="server">
</asp:Content>
<asp:Content ContentPlaceHolderID="PlaceHolderPageDescription" runat="server">
</asp:Content>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
</asp:Content>

エクスプローラーまたは SharePoint Designer からアップロードします。

f:id:karamem0:20161204231030p:plain

リボンだけの空白のページが表示されます。

マスター ページを編集する

Bootstrap を設定してみましょう。<head> の適当な位置に以下の記述を追加します。

<SharePoint:CssRegistration name="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" runat="server" />
<SharePoint:ScriptLink language="javascript" name="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.1.1.min.js" runat="server" />
<SharePoint:ScriptLink language="javascript" name="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.js" runat="server" />

既定のリボンの記述である <div id="ms-designer-ribbon"> および <wssucw:Welcome> はサクッと消してしまい、代わりに Bootstrap のナビゲーション バーを追加します。

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="collapse navbar-collapse">
            <p class="navbar-text navbar-right"><span id="current-user"></span></p>
        </div>
    </div>
</nav>

現在のユーザー名を表示するスクリプトを追加します。最低限のマスター ページでは SP.js を読み込んでいますので、JSOM を使用できます。

<script type="text/javascript">
    SP.SOD.executeFunc("sp.js", "SP.ClientContext", function () {
        var ctx = new SP.ClientContext.get_current();
        var web = ctx.get_web();
        var user = web.get_currentUser();
        ctx.load(user);
        ctx.executeQueryAsync(function () {
            $('#current-user').text(user.get_title());
        });
    });
</script>

マスター ページをアップロードします。
サイトにアクセスするとマスター ページで設定した Bootstrap のナビゲーションが表示されていることがわかります。

f:id:karamem0:20161204231034p:plain

サイト ページを編集する

リストの一覧を出してみましょう。JSOM を使ってリストのデータを読み込みます。

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <div class="container">
        <div class="table-responsive">
            <table id="table" class="table">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript">
        SP.SOD.executeFunc("sp.js", "SP.ClientContext", function () {
            var ctx = new SP.ClientContext.get_current();
            var web = ctx.get_web();
            var list = web.get_lists().getByTitle("ドキュメント");
            var items = list.getItems("");
            ctx.load(items, "Include(Id, File)");
            ctx.executeQueryAsync(function () {
                var collection = items.getEnumerator();
                while (collection.moveNext()) {
                    var item = collection.get_current();
                    var id = item.get_id();
                    var title = item.get_file().get_name();
                    $("#table tbody").append("<tr><td>" + id + "</td><td>" + title + "</td></tr>");
                }
            });
        });
    </script>
</asp:Content>

できました!簡単ですね。

f:id:karamem0:20161204231037p:plain

まとめ

今回は JSOM を使用する構成にしたので、最小限のマスター ページから作成しましたが、REST API だけを使うのであれば、SP.js を使う必要もないので、まったく新規のマスター ページからも作成できます。REST API であれば、SharePoint の知識がなくても取っつきやすいですし、jQuery との相性もよく、また単体テストもしやすいと思います。

*1:念のためお断りとして言っておくと、基本的にはプロバイダー ホスト型アドインを作って Azure なんかに置くのが推奨された手段です。ういうことができない特殊な事情がある場合の手段だと思ってくださいね!