[GAS]HTMLファイルにCSSとJavaScriptを繋ぐ方法 #3

Y.Yamada

2023年2月24日 13:45

今回は、Google Apps ScriptでHTMLファイルにCSSとJavaScriptを繋ぐ方法について解説したいと思います。

詳しくは動画で解説していますが、ポイントについてNOTEにまとめています。詳細まで知りたい方は、動画をご覧くださいませ。

HTMLファイルにCSSとJavaScriptを繋ぐ方法

今回は、3回目になりまして、StylesheetとJavascriptの連携方法について解説しています。

前回がHTMLのデプロイについて説明でしたので、今回は、CSSとJavascriptの連携方法とコーディングなどについて学んでいきましょう。

また今回の完成イメージですが、下記のようなものになります。

画面上のHello Worldの文字を緑色に変更しています。そして検証画面のコンソールで「ページのローディング」を表示させています。

CSSとJavascriptのファイル作成

前回、HTMLファイルを作成する方法で作成したファイルに、新しいファイルを追加していきます。

まず「ファイルの追加」からHTMLファイルを選択して、StylesheetとJavascriptのファイルを作成します。

CSSファイルに記述

次に、Stylesheet.htmlにコーディングをしていきましょう。

<style>
  body{
    color : green;
  }
</style>

今回は、文字を緑色にすると言う変更を加えてみます。

Javascriptファイルに記述

次に、Javascript.htmlにコーディングをしていきましょう。

<script>
  window.addEventListener('load', function(){
    console.log('ページのローディング');
  });
</script>

今回は、windowがロードされたときに、console.logに「ページのローディング」と表示させてみます。

PageとCSS及びJavascriptを繋ぐ

前回作成しているcode.gsと言うファイルに新しいコーディングを追加していきます。

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

今回、記述した内容は、page.htmlをデプロイするときに、追加ファイルのコンテンツを取得するといった内容のものになります。

Page.htmlに記述

そして、最後にPage.htmlに強制出力スクリプトレットタグを埋め込みましょう。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    <p>Hello World</p>
    <?!= include('Javascript'); ?>
  </body>
</html>

<head>タグと<body>タグのところに、作成したinclude関数を埋め込み、作成したStylesheetとJavascriptのファイルを仮引数のところにいれます。

CSSとJavaScriptの連携が完成

ここまで完成すると、完成イメージのように、htmlファイルをデプロイしたときに、文字の色が緑色になり、検証のコンソール画面に「ページのローディング」と言う文字が表示されているはずです。

今回の学習まとめ

今回は、Google Apps ScriptでHTMLファイルにCSSとJavaScriptを繋ぐ方法について解説したいと思います。

Google Apps Scriptが、他のGoogleアプリと連携できることを知っている人は多いと思いますが、HTMLファイルとしてウェブ上に公開できると言う事は、意外に知られていない事実です。

知ってると知ってないでは、全くできることが変わってきますので、今回の内容もしっかり覚えてください。

このマガジンまとめ

投稿記事と動画を併用しながら、このマガジンを最初から見ていただいた方は、仕事で使えるプログラミングスキルがアップしたのではないでしょうか。

もしGASに興味があれば、マガジンフォローやYoutubeチャンネル登録をお願いします。また今後も様々な仕事に役立つGASスキルを紹介していきますので、よろしくお願いします。

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