メモ帳だけで出来る! SharePoint 2013 JS リンク “ちょい” Hacks

11,952 views

Published on

Japan SharePoint Group勉強会 #9でお話させて頂いた資料です。
あとから知ったのですが、OnPostRender という素晴らしいのが用意されていたんですね。jQuery のプラグインなどを適用するにはこれが便利です。
http://msdn.microsoft.com/ja-jp/library/jj220045(v=office.15).aspx

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,952
On SlideShare
0
From Embeds
0
Number of Embeds
355
Actions
Shares
0
Downloads
91
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

メモ帳だけで出来る! SharePoint 2013 JS リンク “ちょい” Hacks

  1. 1. メモ帳だけで出来る!SharePoint 2013JS リンク “ちょい” HacksJapan SharePoint Group #9 @東京2013/5/18株式会社内田洋行 太田浩史
  2. 2. 自己紹介太田 浩史 (おおた ひろふみ)• 株式会社 内田洋行 (http://www.uchida.co.jp)– オフィスと教育と情報の会社– 「働き・学び」の変革• SharePoint への関わりは MOSS 2007 から。• Windows から SharePoint まで、サーバ構築から開発まで導入サポート• 社内でも Notes を Office 365(SharePoint Online)へ移行• “基本的” には SharePoint 一筋で。
  3. 3. 個人的な活動Ota Hirofumihttps://facebook.com/hrfm.jp@hrfmjphttps://twitter.com/hrfmjpHirofumi OTAhttp://www.slideshare.net/hirofumi_ota
  4. 4. ブログ idea.toString();http://idea.tostring.jp/「idea.tostring」を bing で検索すると出てきます。
  5. 5. 本日の内容1. JS リンクってなに?2. 実際に使ってみましょう。SharePoint 2013 のカスタマイズでは、こんなことが出来るんだ!と、イメージを持ってもらう。
  6. 6. SharePoint 2013 リストやライブラリの表示部分のカスタマイズVisual Studio を利用する?SharePoint Designer を利用する?XSLT を記述する?少しムズカシイですよね。SharePoint 2013 の JS リンクだと、少し簡単にできます!
  7. 7. JS リンクってなに?これです!リスト・ライブラリの Web パーツ設定にあります。
  8. 8. コンテンツ レンダリング方式の変更点SharePoint 2013 からは、クライアント サイドレンダリング(CSR)が採用されました。メリットは、HTML・JavaScript の知識で表示をカスタマイズできること。※従来通りの サーバー サイド レンダリングへも設定で変更可能です。タイトル: ○○のお知らせ部署: 広報部クライアント側の処理(JavaScript)によって、ページが描画される。
  9. 9. クライアント側の処理表示テンプレート(Display Template)– クライアント側でコンテンツ描画時に実行されるJavaScript が記述されたファイル– 「デザイン マネージャ」が特定の HTML から自動で生成されるものもある(今回は使いません)– 今回扱うのは、「JavaScript の表示テンプレート」(コンテンツタイプで定義されています)
  10. 10. 実際に使ってみましょう。基本編ブログで解説している内容です。詳しくは下記記事をご参照下さい。SharePoint 2013 「JS リンク」を試してみたhttp://idea.tostring.jp/?p=68続・SharePoint 2013 「JS リンク」を試してみたhttp://idea.tostring.jp/?p=133
  11. 11. 「申請状況」列の入力値に応じて色分け表示をしてみたいと思います。結果を先に確認すると…。適用前 適用後
  12. 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;}})();
  13. 13. 実際に使ってみましょう。応用編jQuery のプラグインと組合わせて、イメージ ローテーターを作成してみます。
  14. 14. 今回利用する jQuery プラグインjqFancyTransitionshttp://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. 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. 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>
  17. 17. 実際に使ってみましょう。変化球編ナビゲーション等の文言を変更してみます。JS リンクの特殊な使い方としてご紹介。
  18. 18. リストやライブラリで表示されている標準ナビゲーションの文言を変更します。結果を先に確認すると…。適用前 適用後
  19. 19. 仕組みSharePoint 2013 ではナビゲーションの文言もJavaScript としてクライアント側へ渡されています。ページ表示時に実行される言語リソース系スクリプト• initstrings.js• strings.jsこれらスクリプト内の文字列を定義されている変数の格納値を上書きします。
  20. 20. 文言を上書きするためのコードJavaScript ファイル(たったの!10行程度)(function(){function stringsOverride(){Strings.STS.L_SPAddNewDocument="新しい書類をアップロード・作成";Strings.STS.L_NODOCView="条件に当てはまる書類はありません。";}ExecuteOrDelayUntilScriptLoaded(stringsOverride, "strings.js");ExecuteOrDelayUntilScriptLoaded(stringsOverride, "initstrings.js");})();
  21. 21. 実際に使ってみましょう。デモ編• 適用手順の確認• 動作の確認• 注意点
  22. 22. ポイント• JS リンクを利用する際の、適用対象を特定するには次の値を用いる。– ListTemplateType参考:SharePoint 2013 の ListTemplateType 一覧http://msdn.microsoft.com/ja-jp/library/microsoft.sharepoint.client.listtemplatetype.aspx– BaseViewIDSharePoint の一般的なルールでは、「すべての○○」ビューが “1”特に複数の Web パーツを配置したページで、JS リンクを利用する際には注意。overrideCtx.ListTemplateType = 109;overrideCtx.BaseViewID = 1;
  23. 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. 24. まとめ• SharePoint 2013 の表示カスタマイズとして「JS リンク」をご紹介しました。• 簡単なカスタマイズであれば、数十行程度の JavaScript の記述でカスタマイズすることができます。• アイデア次第では、色々な使い方ができる可能性があると思います。

×