SharePoint Online で SharePoint じゃないページを作る
はじめに
この記事は Office 365 Advent Calendar 2016 の参加記事です。
SharePoint は標準でもそこそこそれなりに使えるのですが、やはりデザインをカスタマイズしたいという要望は多いです。でも SharePoint のスタイル シート構造を理解してカスタマイズするのは結構大変ですし、Bootstrap のような CSS フレームワークを使うこともできません。カスタマイズに時間をかけるならいっそ最初から作ってしまいたい気持ちになります。ということで、今回は SharePoint 上で SharePoint じゃないページを作ってみます。[1]
マスター ページをダウンロードする
発行機能が有効になっているサイトではデザイン マネージャーから最低限のマスター ページを作成してダウンロードできます。対象のサイトで発行機能が有効になっていない場合は、SharePoint Online で既定で作成される検索サイト (https://{{tenant-name}}.sharepoint.com/search) を表示してください。検索サイトは発行機能が有効になっていますので、デザイン マネージャーを使用できます。[2]
適当な名前でマスター ページを作成したら、マスター ページ ギャラリーからダウンロードして、対象のサイトにアップロードします。
サイト ページを作成する
空のサイト ページを作成します。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 からアップロードします。
リボンだけの空白のページが表示されます。
マスター ページを編集する
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 のナビゲーションが表示されていることがわかります。
サイト ページを編集する
リストの一覧を出してみましょう。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>
できました。簡単ですね。
おわりに
今回は JSOM を使用する構成にしたので、最小限のマスター ページから作成しました。しかし REST API だけを使うのであれば、SP.js を使う必要もないので、まったく新規のマスター ページからも作成できます。REST API であれば、SharePoint の知識がなくても取っつきやすいですし、jQuery との相性もよく、また単体テストもしやすいです。
Discussion