GASで給料日に引き出す金額を表示させるアプリを作った話 #2

2023年6月19日 21:45

前回記事の「1．GASのHTMLとCSSでフロント作成して収支の登録と確認画面を作成」をふんわり解説していこうと思います。
ふんわりといっているのは私自身、下記のブログを参考にさせていただいて作っていますので詳細は参考記事を見てもらった方がいいと思います！
参考記事：いつも隣にITのお仕事様から
GASでWebページを表示するdoGet関数のスクリプトについて丁寧に解説
 GASでWebページを作るときにHTMLとCSSを別ファイルに記述する方法
 GASのWebページにGoogleドライブ内の画像を挿入する方法
▼前回記事

用意するもの

収支と固定費を保存するためのスプレッドシート
フロント画面に表示する画像 ※Googleドライブに保存。
Apps Scriptにファイルを用意する ※拡張子はすべてhtml
1. index.htmlなど：HTMLファイルページ遷移があればその分作成
2. css.html：CSSファイル
3. js.html：JavaScriptファイル ※登録ボタンを押したときの処理用
4. コード.gs：収支の計算など処理内容を記載するファイル

GASでHTMLとCSSを書く

▼苦戦したときに残したメモ

GASのファイルの中にindex.htmlファイルを作成
headタグの中で強制スクリプトタグでcssファイルを読み込む

<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>

画像を貼るときはドライブに保存してあるIDを記載することで表示できる
src="https://drive.google.com/uc?id=<ドライブに保存している写真のID>

<img class="logo" src="https://drive.google.com/uc?id=<ドライブに保存している写真のID>" alt="home_moneyホーム">

index.htmlはこんな感じで作っています。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta charset="utf-8">
    <meta name="description" content="ホーム">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1><a href="<?= getAppUrl() ?>?pg=index"><img class="logo" src="https://drive.google.com/uc?id=<ドライブに保存している写真のID>" alt="home_moneyホーム"></a></h1>
      </header>
      <div id="home" class="main-wrapper">
        <div class="title-content">
          <h2 class="page-title">Home</h2>
        </div>
        <div class="page-jump">
          <p><a href="<?= getAppUrl() ?>?pg=record">登録</a><br>
          <a href="<?= getAppUrl() ?>?pg=past">過去履歴</a><br>
          <a href="<?= getAppUrl() ?>?pg=master">マスター</a></p>
        </div>
      </div>
    </div>
    
    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
  </body>
</html>

HTMLを表示させる

GASはデプロイするたびにURLが変わってしまうのでgetAppUrl()で最新のアプリのURLを取得するようにしています。index.htmlにも強制スクリプトタグでリンクを呼び出すのに使っています。
リンクからindex.htmlを表示するのかほかのページを表示するのかを判別するためにdoGet(e)を作成。
複数ページを作ったら複数ページ分の
else if(page == "<htmlファイル名>"){ 処理内容 }
の記載が必要です。

// 最新のアプリUrlを取得する関数
function getAppUrl(){
  return ScriptApp.getService().getUrl();
}

// ページを表示する関数
function doGet(e) {
  let page = e.parameter["pg"];
  if(page == "index" || page == null)　{
    return HtmlService.createTemplateFromFile('index')
      .evaluate()
      .setTitle("home_money")
      .setFaviconUrl("https://drive.google.com/uc?id=＜ファビコンを保存しているドライブのID＞")
      .addMetaTag('viewport', 'width=device-width, initial-scale=1');
  }else if(page == "record")　{
    return HtmlService.createTemplateFromFile('record')
      .evaluate()
      .setTitle("登録")
      .setFaviconUrl("https://drive.google.com/uc?id=＜ファビコンを保存しているドライブのID＞")
      .addMetaTag('viewport', 'width=device-width, initial-scale=1');
  }else if(...省略...)
  }
}

こんな感じでホーム画面は完成！

この記事が気に入ったらサポートをしてみませんか？