メモ帳だけで出来る！ SharePoint 2013 JS リンク “ちょい” Hacks
•
10 likes•18,348 views
Japan SharePoint Group勉強会 #9でお話させて頂いた資料です。 あとから知ったのですが、OnPostRender という素晴らしいのが用意されていたんですね。jQuery のプラグインなどを適用するにはこれが便利です。 http://msdn.microsoft.com/ja-jp/library/jj220045(v=office.15).aspx
Recommended
More Related Content
More from Hirofumi Ota
More from Hirofumi Ota (20)
Recently uploaded
Recently uploaded (9)
メモ帳だけで出来る！ SharePoint 2013 JS リンク “ちょい” Hacks
- 1. メモ帳だけで出来る！ SharePoint 2013 JS リンク “ちょい” Hacks Japan SharePoint Group #9 @東京 2013/5/18 株式会社内田洋行 太田浩史
- 2. 自己紹介 太田 浩史 （おおた ひろふみ） • 株式会社 内田洋行 （http://www.uchida.co.jp） – オフィスと教育と情報の会社 – 「働き・学び」の変革 • SharePoint への関わりは MOSS 2007 から。 • Windows から SharePoint まで、サーバ構築から開発まで導入サポート • 社内でも Notes を Office 365（SharePoint Online）へ移行 • “基本的” には SharePoint 一筋で。
- 5. 本日の内容 1. JS リンクってなに？ 2. 実際に使ってみましょう。 SharePoint 2013 のカスタマイズ では、こんなことが出来るんだ！と、 イメージを持ってもらう。
- 6. SharePoint 2013 リストやライブラリの 表示部分のカスタマイズ Visual Studio を利用する？ SharePoint Designer を利用する？ XSLT を記述する？ 少しムズカシイですよね。 SharePoint 2013 の JS リンクだと、少し簡単にできます！
- 7. JS リンクってなに？ これです！ リスト・ライブラリの Web パーツ設定にあります。
- 8. コンテンツ レンダリング方式の変更点 SharePoint 2013 からは、クライアント サイド レンダリング（CSR）が採用されました。 メリットは、HTML・JavaScript の知識で表示を カスタマイズできること。 ※従来通りの サーバー サイド レンダリングへも設定で変更可能です。 タイトル: ○○のお知らせ 部署: 広報部 クライアント側の処理（JavaScript) によって、ページが描画される。
- 9. クライアント側の処理 表示テンプレート（Display Template） – クライアント側でコンテンツ描画時に実行される JavaScript が記述されたファイル – 「デザイン マネージャ」が特定の HTML から自動で生成さ れるものもある（今回は使いません） – 今回扱うのは、「JavaScript の表示テンプレート」 （コンテンツタイプで定義されています）
- 10. 実際に使ってみましょう。 基本編 ブログで解説している内容です。 詳しくは下記記事をご参照下さい。 SharePoint 2013 「JS リンク」を試してみた http://idea.tostring.jp/?p=68 続・SharePoint 2013 「JS リンク」を試してみた http://idea.tostring.jp/?p=133
- 12. 列の入力値に応じて表示を変更する 表示テンプレート 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; } })();
- 14. 今回利用する 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>
- 15. 必要なタグ構造を出力するための 表示テンプレート 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; } })();
- 16. 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>
- 19. 仕組み SharePoint 2013 ではナビゲーションの文言も JavaScript としてクライアント側へ渡されています。 ページ表示時に実行される言語リソース系スクリプト • initstrings.js • strings.js これらスクリプト内の文字列を定義されている変数の 格納値を上書きします。
- 20. 文言を上書きするためのコード JavaScript ファイル（たったの！10行程度） (function(){ function stringsOverride(){ Strings.STS.L_SPAddNewDocument="新しい書類をアップロード・作成"; Strings.STS.L_NODOCView="条件に当てはまる書類はありません。"; } ExecuteOrDelayUntilScriptLoaded(stringsOverride, "strings.js"); ExecuteOrDelayUntilScriptLoaded(stringsOverride, "initstrings.js"); })();
- 22. ポイント • 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;
- 23. ポイント • 作成した 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
- 24. まとめ • SharePoint 2013 の表示カスタマイズとして「JS リンク」を ご紹介しました。 • 簡単なカスタマイズであれば、数十行程度の JavaScript の 記述でカスタマイズすることができます。 • アイデア次第では、色々な使い方ができる可能性があると 思います。