SharePoint Online のドキュメント ライブラリに拡張子を .aspx とした HTML をアップロードすると、そのままブラウザで HTML の内容を表示できることは以前の記事で書いた通りです。
SharePoint Online モダン ページで “ちょっと” カスタマイズできる方法を模索してみる
https://idea.tostring.jp/?p=3986
上記リンク先の記事を書いたときは、.aspx から SharePoint への通信は REST API を利用する方法で紹介しましたが、どうしても JSOM(JavaScript Object Model)を使いたいという方向けに方法を書いておきます。
リンク先の記事では「この方法では SharePoint Online の JavaScript Object Model(JSOM)は利用できないため、SharePoint Online のデータを利用する場合には REST API を利用する」と書いていますが、実は JSOM も利用できました!という内容です。
さっそくコード
それではさっそくサンプルコードです。
<html dir="ltr" lang="ja-JP"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>サンプル</title> <script type="text/javascript" src="//contoso.sharepoint.com/_layouts/15/init.js"></script> <script type="text/javascript" src="//contoso.sharepoint.com/_layouts/15/MicrosoftAjax.js"></script> <script type="text/javascript" src="//contoso.sharepoint.com/_layouts/15/SP.Runtime.js"></script> <script type="text/javascript" src="//contoso.sharepoint.com/_layouts/15/SP.js"></script> <script type="text/javascript"> var ctx = SP.ClientContext.get_current(); var web = ctx.get_web(); var lists = web.get_lists(); ctx.load(lists, "Include(Id,Title)"); ctx.executeQueryAsync( function (sender, args) { lists.get_data().forEach(function(list){ var node = document.createElement("li"); node.appendChild(document.createTextNode(list.get_title())); document.getElementById("result").appendChild(node); }); }); </script> </head> <body> <ul id="result"></ul> </body> </html>
ポイントは 5 行目~ 8 行目です。4 つの .js ファイルを順番に呼び出しています。
- /_layouts/15/init.js
- /_layouts/15/MicrosoftAjax.js
- /_layouts/15/SP.Runtime.js
- /_layouts/15/SP.js
この 4 つの .js ファイルを呼び出したら、あとはいつも通りに JSOM で処理を書きましょう。URL のテナント名などは環境に応じて書き換えてください。
動作確認
上記のコードを .aspx ファイルで保存し、ドキュメント ライブラリにアップロードして開くと次のように表示されます。
はい。ちゃんとファイルをアップロードしたサイトのリストの一覧が取得できました。
さいごに
SharePoint Online で利用を推奨される API は完全に REST API ですし、将来的には Microsoft Graph API からも多くのことが実行できるようになると思います。
それでも、過去のスクリプト エディター Web パーツの移植などで、どうしても JSOM のスクリプトを動かしたい時があるかもしれません。そんなときには、今回の記事の方法も試してみてください。
近ごろ、クラシックサイトからモダンサイトへといったお話も増えてきました。そんな移行プロジェクトでどうしても元の処理を使いたい場合などには、とても有効化もしれませんね。