「SharePoint All Page Scripting」でCSSを読込む

前回ご紹介した masterpageをカスタマイズせずにすべての画面にスクリプトを挿入できるサンドボックスソリューション「SharePoint All Page Scripting」を活用して、スクリプトだけでなくスタイル(CSS)も読み込ませてみました。

通常、すべてのページにCSSを適用するには、やはり masterpage を SharePoint Designer でカスタマイズする必要があります。また、発行機能をアクティブにして共通CSSとして指定する方法もありますが、発行機能が前提になるため、環境により利用できない場合が少なくありません。

という訳で。「SharePoint All Page Scripting」が実行してくれるスクリプトの中でCSSファイルを読込ませ、動的にページに適用してしまおう、というアプローチです。

まず、「SharePoint All Page Scripting」がスタイルライブラリに作成した AllPageScripting.js を一度ダウンロードして、以下のスクリプトを追記します。

function loadCss( cssUrl ){
var cssElm = document.createElement( 'link' );
with( cssElm ){href = cssUrl; type = 'text/css'; rel = 'stylesheet';}
var headObj = document.getElementsByTagName( 'head' );
headObj.item(0).appendChild( cssElm );
}
loadCss(location.protocol + '//' + location.hostname + _spPageContextInfo.siteServerRelativeUrl + '/Style%20Library/AllPageStyle.css');

当然ながら既存のスクリプトと矛盾しないように書いて下さい。こちらに実ファイルを置いておきますのでご参考まで。

次に、AllPageStyle.css というファイル(スタイルシート)を作成して、このスタイルライブラリに登録します。ここでは、以下のソースを記述しました。無茶苦茶なスタイルです(笑)結果の判りやすさ重視。

DIV {border:1px solid #000000 !important;}

これをアップロードすると…わあ(笑)

特別に難しい処理はしていません。スクリプトで <link> エレメントを作成し、それをDOM操作で <head> の配下に挿入しています。この要領で、IF文と組合わせれば画面により異なるCSSを読み込ませることも出来ますね。

ミソは _spPageContextInfo.siteServerRelativeUrl でしょうか。これはSharePoint 2010から利用できるようになった標準の変数で、そのサイトコレクションのルートURLを返します。ただし、ホスト名は省略されているので location.protocol + ‘//’ + location.hostname で完全なURLを組み立てています。

発行機能がいらない、という点で実用性はかなり高い気がします。

これでもうmasterpage編集いらず?「SharePoint All Page Scripting」
「_spPageContextInfo」でサイトURLや現在のユーザ情報を取得(SharePoint 2010限定)
JavascriptでサイトURLをちょいと取得する方法(2007/2010対応)


Author

中村 和彦(シンプレッソ・コンサルティング株式会社 代表)が「ユーザ視点の SharePoint 情報」を発信します。元大手製造業 SharePoint 運用担当。現SharePoint コンサルタント。お仕事のお問い合わせはこちらまでお願いします。当ブログにおける発信内容は個人に帰属し所属組織の公式発信/見解ではありません。
FB : 中村 和彦
blog: Be・Better!
MS MVP SharePoint 2009/10-2011/9
MS MVP Office 365 2012/10-2014/9