SharePoint サイトで外部スクリプトを参照する方法については、先ごろ MSDN フォーラムにも投稿がありましたし、時々セミナーの受講者の方にも質問されるので、一度このブログにもまとめておこうと思います。
主に次の2つの方法があります。
- SharePoint:ScriptLink サーバーコントロールを使用する
- Script 要素を使用する
どちらを使用してもよいように、作成した外部スクリプトは SharePoint サーバー上の以下の場所に配置するとよいです。
- SharePoint ハイブ\TEMPLATE\LAYOUTS\1041フォルダ内にカスタムスクリプトを格納するためのサブフォルダを用意し格納。
※SharePointハイブは通常は次のディレクトリです。"c:\Program Files\Common Files\Microsoft Shared\web server extensions\12
このLAYOUTSフォルダはプロパティ(Web共有タブ)を参照するとわかりますが、エイリアスが設定されていてどこのSharePointサイトのURLからでも、URLの後に "/_layouts/"と指定することで参照できるように既定で設定されています。
以上を踏まえ、外部ファイルの参照方法の例を具体的にご紹介しておきます。
- SharePoint ハイブ\TEMPLATE\LAYOUTS\1041 フォルダ内に "MyScripts"フォルダを作成します
- 1で作成したフォルダに外部スクリプトファイル "CustomJScripts.js" を格納します。このスクリプトには次のような簡単な関数を用意しておきます。function SayHello(){
return "Hello SharePoint!";
}
あとは参照をするだけです。たとえば、コンテンツ エディタ Web パーツを任意のページに配置し以下のように記述します。
SharePoint:ScriptLink サーバーコントロールを使用する場合
このコントロールを使用する場合は、既定でSharePoint ハイブ\TEMPLATE\LAYOUTS\1041 フォルダを参照してくれますので、あとはそこからの相対パスを Name属性に指定するだけです。
<SharePoint:ScriptLink Name="MyScripts/CustomJScripts.js" runat="server" />
<h1>外部スクリプトを "script"要素から呼び出す</h1>
<input type="text" id="MyInputBox2">
<input type="button" value="ご挨拶" OnClick="document.aspnetForm.MyInputBox2.value=SayHello()">
<input type="reset" value="クリア">
<input type="text" id="MyInputBox2">
<input type="button" value="ご挨拶" OnClick="document.aspnetForm.MyInputBox2.value=SayHello()">
<input type="reset" value="クリア">
Script 要素を使用する場合
こちらは _layouts の相対パスを指定しています。
<script src="/_layouts/1041/MyScripts/CustomJScripts.js" type="text/javascript"></script><h1>外部スクリプトを "script"要素から呼び出す</h1>
<input type="text" id="MyInputBox" ></input>
<input type="button" value="ご挨拶" OnClick="document.aspnetForm.MyInputBox.value=SayHello()"></input>
<input type="reset" value="クリア"></input>
<input type="text" id="MyInputBox" ></input>
<input type="button" value="ご挨拶" OnClick="document.aspnetForm.MyInputBox.value=SayHello()"></input>
<input type="reset" value="クリア"></input>
あとはこれらのパターンを応用して、マスタページや任意のページなどに配置すればよいわけです。