2016年6月 5日 (日)

Responsive UI Package for SharePoint on-premises について

Microsoft Office Dev Center で先日アナウンスがあったオンプレミスの SharePoint で利用できる Responsive UI Package を試してみました。ちなみに、レスポンシブ Web デザインとは、利用する端末の種類を問わず、Webブラウザーの解像度に合わせて自動的にWebページのレイアウトを調整してくれる仕組みを持ったデザインのことです。

基本的な使い方等は下記の通り動画が公開されています。

 

概要

さて、このパッケージについて簡単に解説しておきましょう。

このパッケージは Microsoft 社が公開しているサンプルコード集である SharePoint Patterns & Practices (PnP) の一環として公開されています。PnPは GitHub 上で共有されています。GitHub から必要なファイル群をダウンロードすれば、パッケージの適用自体は、PowerShell で行えるようになっています。このレスポンシブWebデザインのパッケージは、JavaScript と CSS のみで動作するようになっており、既存のマスターページは一切手を入れていないというのが特徴です。適用対象はチーム サイトです。また、この機能を利用するにはサイトの拡張機能の一つである「モバイル ブラウザー ビュー」は非アクティブ化され利用できなくなります。

このパッケージでは、次の3つのレンダリングモデルをサポートしています。

  • デスクトップ : 768px 以上のスクリーンサイズ
  • タブレット : 481px から 768 px までのスクリーンサイズ
  • スマートフォン : 480px 以下のスクリーンサイズ

スクリプトは jQueryを使っておりインターネット上の CDNを参照しているため、インターネット接続環境が必要です。インターネット接続環境が利用できない場合は、JQueryのクラスライブラリをダウンロードし、任意のライブラリに格納した上で、 PnP_Responsive-UI.js内にある参照パスをこれに書き換えます。

手順

検証した際の手順は次の通りです。ちなみに、各手順はすべて検証環境の SharePoint 上で行いました。

SharePoint 2013 でこのパッケージを利用するには最低限 2015年4月のCUが適用されている必要があります。これ以前だとPowerShell実行時にエラーとなります。現在使っているサーバーの状況を確認するには手っ取り早くビルドナンバーを確認してみましょう(SharePoint 2013 のビルドナンバー)。

  1. GitHub から必要なファイルをダウンロードする。
  2. ソフトウェアをセットアップする
  3. PowerShell を使って Enable-SPResponsiveUI コマンドを実行する

GitHubから ZIPファイルをダウンロードします(ダウンロードリンク)。ダウンロードしたら、ZIPを解凍し、 Solutions フォルダ内の SharePoint.UI.Responsive フォルダーを開きます。
2016-06-05 16-23-49

ちなみに、この中にある pnp_responsive_ui.css と PnP_Responsive-UI.js はPowerShellコマンドレット実行後に、目的のサイトの"サイトのリソース"ライブラリにアップロードされます。

続いて、OfficeDevPnP.PowerShellコマンドを利用できるよう準備します。これは次の URLからダウンロードできるためそのまま SharePoint 上で実行します。

OfficeDevPnP.PowerShell v15 package

最後に Windows PowerShell　を使って、目的のサイトに UIを適用します。まず、PowerShell コマンドでSharePoint.UI.Responsive フォルダーにカレントを移動します。

次のようなコマンドを実行します。-TargetSiteUrl では目的のサイトコレクションのURLを指定します。オプション等は GitHub のページに記載されているので、そちらを確認してください。

PS C:\> .\Enable-SPResponsiveUI.ps1  -TargetSiteUrl "https://sp2013-b.contoso.com/sites/ResponsiveUiTest"

以上でSharePoint サイトがレスポンシブUIになります。

[デスクトップ] 通常のチームサイト表示のまま

2016-06-05 16-41-04

[タブレット]　サイドリンクバーが小さく折りたたまれ、検索ボックスの位置も変わる。また、本文も縦方向に並ぶ。


2016-06-05 16-42-30

[スマートフォン]　タブレットよりさらにコンパクトに!


2016-06-05 16-43-06

使ってみて問題点などあれば、GitHubにてフィードバックするようにしましょう!

 

コメント