投稿の経緯

GoogleDriveに格納されているhtmlファイルはそのまま開いてもWebページとして表示されませんが、GASを使いWebページを表示させる機会があったのでその方法をまとめました。

前提

今回Webページは外部に公開しないため、GoogleDriveが参照可能な権限内で行う必要がありました。それを理由にホスティングサービスは使わず、リスク回避のためにWebページ表示はGASによる実装で作りました。

扱うファイルの種類

ファイルの種類は以下になります。JavaScriptは含まれていません。cssと画像ファイルは相対パスで参照されていました。

html
css
画像ファイル

方法

Webページとして表示させるにはGASでhtmlファイルの変換やURLへの読み替えをし、そのGASをウェブアプリケーションとしてデプロイします。そしてWebブラウザからのデプロイしたURLにリクエストすることで表示が可能になります。
今回表示するにあたり、相対パス参照しているファイルの変換とURLへの読み替えが一番手こずりました。

ファイルの変換

htmlファイル

GASでhtmlを表示する方法については調べれば出てきますので、ここでは詳しく説明しません。

やり方は、htmlファイルはGoogleドライブのファイルIDで特定して読み込み、Webページとして出力する関数で表示させます。

// htmlファイルの読み込み
var htmlContent = DriveApp.getFileById({htmlのファイルID}).getBlob().getDataAsString();

// htmlファイルを表示
HtmlService.createTemplate(htmlContent).evaluate();

cssファイル

これだけだと、htmlファイルから相対パスで参照されているcssファイルは読み込まれません。cssファイルもhtmlファイルと同様の読み込みが必要になります。
更に今回はファイル参照から読み込んだファイルを展開する形で置換することにしました。

htmlContent.replace(<link rel="stylesheet" href="{相対パス}.css" />, `<style>${DriveApp.getFileById({CSSのファイルID}).getBlob().getDataAsString()}</style>`);

画像ファイル

相対パスによる参照となっているため、ファイルリンクで参照させようとしましたがうまくいきませんでした。
これはファイルリンクをhttps://lh3.googleusercontent.com/d/{画像ファイルID}とすることで解決しました。

htmlContent.replace('../{画像ファイル名}.png','https://lh3.googleusercontent.com/d/{画像のファイルID}');

リクエストの方法

.gsファイルにdoGet()関数を用意します。
ブラウザからのリクエストするとdoGet()が動きます。クエリパラメータを受け取りたい場合は、doGet(e)のように引数を設定すると、e.parameterという形でパラメータが取得できます。

リクエストパラメータの形式については以下を参照ください。

次のステップ

今回JavaScriptファイルの扱いがありませんでしたが、次回はJavaScriptファイルも考慮したWebページ表示をしてみたいです。