メモ帳だけで出来る！ SharePoint 2013

JS リンク “ちょい” Hacks

Japan SharePoint Group #9 @東京 2013/5/18

株式会社内田洋行 太田浩史

自己紹介 太田 浩史 （おおた ひろふみ） • 株式会社 内田洋行 （http://www.uchida.co.jp）

– オフィスと教育と情報の会社

– 「働き・学び」の変革

• SharePoint への関わりは MOSS 2007 から。

• Windows から SharePoint まで、サーバ構築から開発まで導入サポート

• 社内でも Notes を Office 365（SharePoint Online）へ移行

• “基本的” には SharePoint 一筋で。

個人的な活動

Ota Hirofumi https://facebook.com/hrfm.jp

@hrfmjp https://twitter.com/hrfmjp

Hirofumi OTA http://www.slideshare.net/hirofumi_ota

ブログ idea.toString();

http://idea.tostring.jp/ 「idea.tostring」を bing で検索すると出てきます。

本日の内容

1. JS リンクってなに？

2. 実際に使ってみましょう。

SharePoint 2013 のカスタマイズでは、こんなことが出来るんだ！と、 イメージを持ってもらう。

SharePoint 2013 リストやライブラリの 表示部分のカスタマイズ Visual Studio を利用する？

SharePoint Designer を利用する？

XSLT を記述する？

少しムズカシイですよね。

SharePoint 2013 の JS リンクだと、少し簡単にできます！

JS リンクってなに？

これです！

リスト・ライブラリの Web パーツ設定にあります。

コンテンツ レンダリング方式の変更点

SharePoint 2013 からは、クライアント サイド レンダリング（CSR）が採用されました。

メリットは、HTML・JavaScript の知識で表示を カスタマイズできること。 ※従来通りの サーバー サイド レンダリングへも設定で変更可能です。

タイトル: ○○のお知らせ 部署: 広報部

クライアント側の処理（JavaScript) によって、ページが描画される。

クライアント側の処理

表示テンプレート（Display Template）

– クライアント側でコンテンツ描画時に実行される JavaScript が記述されたファイル

– 「デザイン マネージャ」が特定の HTML から自動で生成されるものもある（今回は使いません）

–今回扱うのは、「JavaScript の表示テンプレート」 （コンテンツタイプで定義されています）

実際に使ってみましょう。

基本編 ブログで解説している内容です。 詳しくは下記記事をご参照下さい。

SharePoint 2013 「JS リンク」を試してみた

http://idea.tostring.jp/?p=68

続・SharePoint 2013 「JS リンク」を試してみた

http://idea.tostring.jp/?p=133

「申請状況」列の入力値に応じて色分け表示をしてみたいと思います。

結果を先に確認すると…。

適用前 適用後

列の入力値に応じて表示を変更する 表示テンプレート JavaScript ファイル（たったの！20行程度）

(function(){ var overrideCtx = {}; overrideCtx.Templates = {}; overrideCtx.ListTemplateType = 100; overrideCtx.BaseViewID = 1; overrideCtx.Templates.Fields = { '_x7533__x8acb__x72b6__x6cc1_': { 'View' : Color } }; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); function Color(ctx){ var ret; var orgVal = ctx.CurrentItem._x7533__x8acb__x72b6__x6cc1_; if(orgVal == '受付'){ ret = '<b style="color:#DA4F49">' + orgVal + '</b>'; }else if(orgVal == '作業中'){ ret = '<b style="color:#5BB75B">' + orgVal + '</b>'; }else if(orgVal == '完了'){ ret = '<b style="color:#2E7BCC">' + orgVal + '</b>'; } return ret; } })();

実際に使ってみましょう。

応用編 jQuery のプラグインと組合わせて、 イメージ ローテーターを作成してみます。

今回利用する jQuery プラグイン

jqFancyTransitions

http://www.workshop.rs/projects/jqfancytransitions/

このプラグインを利用するために、用意しなければいけない タグ構造は下記の通り。

<div id='slideshowHolder'> <img src='img1.jpg' alt='img1' /> <img src='img2.jpg' alt='img2' /> <img src='img3.jpg' alt='img3' /> </div>

必要なタグ構造を出力するための 表示テンプレート JavaScript ファイル（たったの！20行程度）

(function(){ var overrideCtx = {}; overrideCtx.Templates = {}; overrideCtx.ListTemplateType = 109; overrideCtx.BaseViewID = 1; overrideCtx.Templates.Header = "<div id='slideshowHolder'>"; overrideCtx.Templates.Footer = "</div>"; overrideCtx.Templates.Item = slideShowItem; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); function slideShowItem(ctx){ var ret = "<img src='" + ctx.CurrentItem.FileRef + "' alt=''/>" return ret; } })();

jQuery のプラグインを起動するコード

JavaScript ファイル

記述は、プラグインのリファレンスに沿って下さい。

ページへは、「スクリプト エディター Web パーツ」を利用して 埋め込むのがお手軽です。

<script type="text/javascript" src="/Style%20Library/myFiles/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="/Style%20Library/myFiles/jqFancyTransitions.1.8.min.js"></script> <script> $(document).ready(function(){ $('#slideshowHolder').jqFancyTransitions({ width:300, height:100, navigation:true }); }); </script>

実際に使ってみましょう。

変化球編 ナビゲーション等の文言を変更してみます。 JS リンクの特殊な使い方としてご紹介。

リストやライブラリで表示されている標準ナビゲーションの文言を変更します。

結果を先に確認すると…。

適用前 適用後

仕組み

SharePoint 2013 ではナビゲーションの文言も JavaScript としてクライアント側へ渡されています。

ページ表示時に実行される言語リソース系スクリプト

• initstrings.js

• strings.js

これらスクリプト内の文字列を定義されている変数の 格納値を上書きします。

文言を上書きするためのコード

JavaScript ファイル（たったの！10行程度） (function(){ function stringsOverride(){ Strings.STS.L_SPAddNewDocument="新しい書類をアップロード・作成"; Strings.STS.L_NODOCView="条件に当てはまる書類はありません。"; } ExecuteOrDelayUntilScriptLoaded(stringsOverride, "strings.js"); ExecuteOrDelayUntilScriptLoaded(stringsOverride, "initstrings.js"); })();

実際に使ってみましょう。

デモ編 • 適用手順の確認

• 動作の確認

• 注意点

ポイント

• JS リンクを利用する際の、適用対象を特定するには次の値を用いる。 – ListTemplateType 参考：SharePoint 2013 の ListTemplateType 一覧 http://msdn.microsoft.com/ja-jp/library/microsoft.sharepoint.client.listtemplatetype.aspx

– BaseViewID SharePoint の一般的なルールでは、「すべての○○」ビューが “1”

特に複数の Web パーツを配置したページで、JS リンクを利用する際には注意。

overrideCtx.ListTemplateType = 109; overrideCtx.BaseViewID = 1;

ポイント

• 作成した JavaScript ファイルは「マスターページ ギャラリー」に アップロード

• コンテンツ タイプは「JavaScript の表示テンプレート」を選択

• Web パーツの JS リンクの設定には、「URL トークン」を利用して 指定する

• 上手くカスタマイズが反映されない場合、サイト機能の「ダウンロード最小化戦略」を非アクティブにする 参考：SharePoint 2013 の URL とトークン http://msdn.microsoft.com/ja-jp/library/ms431831.aspx その他、日本語の情報では、MS エバンジェリスト 松崎さんのブログ SharePoint 2013 Apps : List の開発と Client Side Rendering (CSR) http://blogs.msdn.com/b/tsmatsuz/archive/2013/01/28/list-definition-list-instance-and-client-side-rendering-csr-using-apps-for-sharepoint-2013.aspx

まとめ

• SharePoint 2013 の表示カスタマイズとして「JS リンク」をご紹介しました。

• 簡単なカスタマイズであれば、数十行程度の JavaScript の記述でカスタマイズすることができます。

• アイデア次第では、色々な使い方ができる可能性があると 思います。