概要
GASを使ってGoogleドキュメントに書いたmermaidのコードを図で描画させるます
嬉しい点
- Googleドキュメントのコードを変更すると連動してデプロイした図も変更される
やり方
Googleドキュメントを作成して、mermaidのコードを貼ります
拡張機能→Apps Scriptをクリック
エディタが開かられるので、以下のコードを貼り付けて、DOC_IDを書き換えます。
//ドキュメントのID
//https://docs.google.com/document/d/ここの部分がDOC_ID/edit?tab=t.0
var DOC_ID = 'XXXXX';
// HTMLを表示する
function doGet() {
return HtmlService.createTemplateFromFile("index").evaluate();
}
// ドキュメントの内容を取得する
function getDocs() {
var docs=DocumentApp.openById(DOC_ID);
return {
title: docs.getName(),
text: docs.getBody().getText()
}
}
次に表示するhtmlファイルを作ります。
ファイル欄のプラスボタンから作成
名前をindexにして登録
htmlタグを以下で書き換えます
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://unpkg.com/mermaid@11.4.1/dist/mermaid.js"></script>
</head>
<body>
<h1 id="title"></h1>
<div id="mermaid" class="mermaid"></div>
<script>
function update() {
google.script.run
.withSuccessHandler(function(result) {// 戻り値に対する処理
document.querySelector('#title').innerHTML = result.title;
document.querySelector('.mermaid').innerHTML = result.text;
mermaid.init();// mermaidを更新
})
.getDocs();
}
update();// 初回実行
mermaid.initialize({startOnLoad:false});
</script>
</body>
</html>
そしたら画面右上のデプロイボタンをクリックし、新しいデプロイを選択
ウェブアプリを選択
アクセスできるユーザーを調整して、デプロイボタンをクリック！
アクセスを承認しろと言われたら、Advancedをクリックして、Gotoなんとかをクリックし承認！！
デプロイされたURLリンクが記述されてるのでアクセス！
ぱんぱかぱーん！！！表示されました！！！
超絶参考