発端
今回はon Businessなので発端は伏せておきます。
完成版動作
ローカルで編集した結果が、Webに公開したページに数秒後に適用されます。
ローカルで編集したHTMLファイルをGoogle経由でWebコンテンツとしてほぼリアルタイム公開するのに成功しました。数秒遅延。
— W.D. (@WD4096) July 4, 2020
個人向けGoogle Driveでは成功しましたが、G Suiteは未検証です。G Suiteで成功したら１つブレイクスルー出来るのです。
以上、わからないならわからないでもいい。風味で。 pic.twitter.com/ugC8mJ7QoX
ツイートには意識的に書くことを避けましたけど、これ、「VBAなどで動的生成したHTML」もリアルタイム公開できるってことなのですよね。
まだ検証していませんが、G Suiteは社外からの参照が可能なので、オンプレミス環境で動的生成したコンテンツをリアルタイム公開できることに繋がるのです。
会社でG Suiteを契約している場合に、社外の人間に見せたくない社内向けコンテンツを社外から参照できるので、このことのメリットはかなり大きいのです。
仕組み
- 「Googleのバックアップと同期」でローカルのHTML出力先フォルダーをGoogle Driveに同期
- GASでGoogle Drive上のHTMLファイルをHTMLコンテンツとして出力
- Webアプリとして公開
上記3段階で公開しています。
意外と簡単ですね！
なお、G Suiteで同じことを行う場合、「Googleのバックアップと同期」は使えなくで、「ドライブファイルストリーム」を使う必要があります。
使わなくても済む方法があれば凄く助かるのですけど、ちょっと分からないのです。
実装
まず、「Googleのバックアップと同期」をダウンロード・インストールします。
インストール完了後、タスクトレイに雲のアイコンが表示されますので、ここから同期設定を行います。
今回、C:\sessionのみ同期対象にしました。
同期された後、フォルダーに移動してフォルダーIDを確認します。
URLの末尾にあるのがそれです。
今回の場合、「13JIkXUT4ZQ5-OLjmo_nMPPVT2immSCbC」がフォルダーIDです。
これは後程GASからフォルダを取得する際に必要になります。
次に、GASを追加します。
function doGet() {
var contents = DriveApp.getFolderById('13JIkXUT4ZQ5-OLjmo_nMPPVT2immSCbC')
.getFilesByName('test.html')
.next()
.getBlob()
.getDataAsString("sjis");
return HtmlService.createHtmlOutput(contents);
}
getFolderByIDで指定しているのが先ほど取得したフォルダーIDです。
最後に、GASをWebコンテンツとして公開します。
「公開」→「Webアプリケーションとして導入」
「Project Version」は常に「New」を選択します。
「Execute the app as」は自分のGoogleアカウントを指定します。
ただ、ここはGoogle Driveにアクセスできるアカウントならどれでもいいのだと思います。
「Who has access to the app:」アクセス可能なメンバーを選びます。今回テストですので、自分だけをアクセス可能にしました。
「更新」ボタンをクリックすると、デプロイされ、以下のような画面が表示されます。
「Curent web app URL」が公開するURLです。
最後に
CSSをまだ適用していないので、帰宅後適用する処理を入れます。
参考記事は以下の記事です。
GAS関連検索すると高確率でこの方の記事が出てくるので、足を向けて眠れないのです。
GASでWebページを作るときにHTMLとCSSを別ファイルに記述する方法
追記
CSSをファイルから読み込ませる機能を追加しましたので、ひとまずこれでこの記事の更新は終了です。
参考URLは前述の通り。
以下、結果だけを書きます。構成ファイルは３個です。
HTMLファイル
|
|
CSSファイル
.td_not_null{
border:solid;
border-color:black;
}
GASファイル
function doGet() {
var contents = DriveApp.getFolderById('13JIkXUT4ZQ5-OLjmo_nMPPVT2immSCbC')
.getFilesByName('test.html')
.next()
.getBlob()
.getDataAsString("sjis");
const htmlOutput=HtmlService.createTemplate(contents).evaluate();
return htmlOutput;
}
結果について
概ね満足です。
これで、ローカルで作成したHTMLファイルとCSSファイルを、Google Driveの機能で同期を行えば公開可能になるのです。
また、お気づきかも知れませんが、今回のやり方だと、GASで公開した内容と、ローカルファイルが実現できる見た目が一致します。
したがって、オンプレミス環境用のファイルと、GAS用のファイルとで２パターン持つ必要がなくなるのです。
データを一元化できるというのは、継続したメンテナンスのコストが安くなる事につながるので、良い結果だったと思います。
G Suiteでの結果について
良好でした。
最初うまくいかなかった原因は、「アップロードされたファイルを自動でGoogleドキュメントに変換する」オプションが有効になっていたためでした。
このオプションが有効であるとき、HTMLファイルをアップロードすると自動でPDFファイルに変換されるというアレげな仕様だったのです。
真面目に初見殺しな仕様ですよねー。
まあ、道は開けたので、あとは横展開するだけですね。
オンプレミス環境で自動生成したHTMLファイルを自動公開する手段が出来たのって、かなり業務の幅が広がるはずなのです。
今度こそこの記事の更新は終わります。
