静的 HTML ファイルを SharePoint にアップロードして公開する

SharePoint 2010
スポンサーリンク

静的 HTML にて作成していたポータルを運用されていたユーザーさんなどで、サーバーの老朽化などで取り急ぎそれらのファイルを SharePoint のドキュメント ライブラリへアップロードして閲覧可能にすることはできないか??といった要望はじつは珍しくありません。

実際に試してみると、HTML ファイルを単純にドキュメント ライブラリへアップロードした場合は、ドキュメント ライブラリからファイルをクリックすると「ダウンロード」の動作となってしまいます。これは SharePoint のサーバー側の設定によるもので、こうしたファイルをブラウザで開くことを禁止されているからです。ただし、簡単な手順でこれをブラウザで開くようにすることができます。

(2020/7/20 追記)現在この記事の内容を試そうと思うと、サイトコレクションの DenyAddAndCustomizePages プロパティを変更する必要があります。下記のリンク先も参考にしてみてください。

SharePoint Online モダン ページで “ちょっと” カスタマイズできる方法を模索してみる
https://idea.tostring.jp/?p=3986

カギは拡張子

ファイルによる動作の違いは、拡張子の違いによるものです。また、SharePoint の機能で作成されるページは .aspx の拡張子になっています。この拡張子は、ASP.NET の Web ページの拡張子ですので TechNet で情報を確認してみます。

ASP.NET Web ページの構文の概要
https://msdn.microsoft.com/ja-jp/library/k33801s3(v=vs.100).aspx

すると、気になる一文が書いてあります。

すべての HTML ページは .aspx ファイル名拡張子を付けた名前に変更することによって、ASP.NET Web ページとして実行できます。

というわけで、.html(または .htm)のファイル拡張子を .aspx へ変更することで SharePoint のページと同様の扱いとなり、ドキュメント ライブラリから直接ブラウザで開くことができるようになるというわけです。

さっそく試してみる

今回用意したファイルはこれらです。「HelloWorld.html」から「css」「js」フォルダのそれぞれのリソースを相対パスで参照しています。ファイルから絶対パスで参照しているリソースがある場合は、書き換える必要がありますので注意が必要です。

20150323-1

この「HelloWorld.html」を「HelloWorld.aspx」に変更し、ディレクトリの構造を維持したままドキュメント ライブラリへアップロードします。

20150323-2
20150323-3

こうしてアップロードされた HelloWorld.aspx をクリックすると問題なくブラウザで開くことができます。

20150323-4

SharePoint のページに埋め込む

こうしてアップロードされたコンテンツは、SharePoint のページへ埋め込むことができます。こうしたコンテンツを埋め込むための Web パーツが「ページ ビューアー」Web パーツです。この Web パーツをページ上へ追加し、Web パーツの設定から先ほどアップロードした「HelloWorld.aspx」への URL を設定することで、簡単にページ上へ表示ができます。

20150323-5

文字化けする場合

(2018/12/25 追記)この方法で文字化けしてしまう場合は、head タグに次の meta タグの記述を追加すると上手く動くようです。なお、.aspx ファイル自体は UTF-8 で保存しています。

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>

さいごに

非常に簡単な変更のみで、SharePoint でも過去の静的 HTML の資産を閲覧できるようになります。また、こうした方法は、過去のポータル資産をアップロードするという使い方だけではなく、例えばバッチ処理などで HTML ファイルを出力している業務アプリケーションなどがある場合、その出力処理を少し変更することで簡単に SharePoint を利用した社内への情報公開が行えるようになる可能性もあります。

最終的には、SharePoint のページへ移行されることをオススメしますが、こうして手軽に出来る方法があることを知っておくと便利に利用できる場面も多くあります。ぜひ試してみてください。

タイトルとURLをコピーしました