Zenn
⛽

GASでメモ帳を作る

2023/04/03に公開
HTML
JavaScript
GAS
tech

初めての投稿です。今回はGASとJavaScriptで簡易的なメモ帳を作ります。

ソースコード

コード.gs
function doGet() {
  let html = HtmlService.createTemplateFromFile('index').evaluate().getContent();
  return HtmlService.createHtmlOutput(html)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <base target="_top">
        <title>メモ帳</title>
        <style>
            textarea{width:100%;height:30%;}
        </style>
    </head>
    <body>
        <h1>書いたものを保存、表示できるウェブアプリです。</h1>
        <form name="form1">
            <textarea name="Memo"></textarea>
        </form>
        <p>
            <input type="button" value="保存" onclick=save(); ></input>
            <input type="button" value="読込" onclick=load(); ></input>
        </p>
            <script>
                function load() {
                    var MemoData = "";
                    if(!localStorage.getItem('MemoData')) {
                        MemoData = "メモは登録されていません。";
                    } else {
                        MemoData = localStorage.getItem('MemoData');
                    }
                    document.form1.Memo.value = MemoData;
                }
                function save() {
                    var MemoData = document.form1.Memo.value;
                    localStorage.setItem('MemoData', MemoData);
                }
            </script>
        </body>
</html>

実行結果

軽ーく解説

『GASで・・・』とは言っていますが、メインはJavaScriptです。GASはHTMLを埋め込むために使っているだけです。このGASのコードは、ウェブアプリを作る際に欠かせない重要なものなので、ぜひメモしておくと良いでしょう（このメモ帳にでもいいですww）。そしてもう一つGASをHTMLに埋め込むときに大切なのはHTMLの<base target="_top">です。これがないと埋め込むことができません。今回は、保存する仕組みにローカルストレージを使っています。JavaScriptは主にそのローカルストレージを使った保存と表示のコードになっています。

まとめ

今回は初めての投稿でした。このメモ帳は、別にGASに埋め込む必要があるわけではないです。逆にあまり埋め込む意味がないのですが、GASにHTMLを埋め込む方法を紹介する上でこのメモ帳ということになりました。皆さんもぜひ、GASにHTMLを埋め込んでみてはいかがでしょうか。Mr.Acornでした。

Discussion