GASでWebページを作るときにHTMLとCSSを別ファイルに記述する方法


divide

photo credit: what’s_the_frequency *a house divided against itself cannot stand* via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

GASユーザーのためのHTML入門として簡単なWebページの作り方についてお伝えしています。

前回の記事はコチラ。

【GASユーザーのためのHTML入門】範囲指定するだけの便利なdivタグとspanタグ
GASユーザーのためのHTML入門ということで、簡単なWebページの作り方を紹介しています。今回は、範囲指定すdivタグとspanタグとその使い方についてです。ブロック要素とインライン要素についても触れますよ。

範囲を好きに指定することができるdivタグとspanタグについてお伝えしました。

これでスタイルし放題だ…!

って、なればいいんですが、CSSの記述をHTMLファイルにじゃんじゃん書き込んでいくと、長くなるし混雑感が半端なくなってきます。

なら、分けちゃいましょう!それで、スッキリさせちゃいましょう!

ということで、GASでWebページを作るときに、HTMLとCSSを別ファイルに記述する方法です。

強制出力スクリプトレットタグとか、HtmlTemplateオブジェクトとか、新しく登場するものがたくさんあって若干長いですが、どうぞお付き合いください。

では、行ってみましょう!

前回のおさらい

前回作成したHTMLファイルはコチラです。

…なげーっすよね。

ということで、今回はこのHTMLファイル「index.html」からCSSの記述だけを別ファイルに移しちゃいたいと思います。

CSSを別のHTMLファイルに記述する

では、CSSを別ファイルに書き写します。

まず、ファイルを作ります。

一般的には、CSSは拡張子cssのファイルに記述するのですが、GASの場合はCSSファイルってやつがないので、CSSを記述するファイルもHTMLです。

スクリプトエディタのメニューから「ファイル」→「新規作成」→「HTMLファイル」を選択します。

GASでHTMLファイルを新規作成する

続いて、「ファイルを作成」ダイアログが開きますので、作成したHTMLのファイル名を「css」として「OK」します。

GASで作成したHTMLファイルのファイル名を「css」

これでHTMLファイル「css.html」が出来上がるのですが、デフォルトで入っているHTMLコードは全部消して、以下を入力して保存します。

強制出力スクリプトレットタグで他のHTMLファイルを読み込む

それで、移動する前の「index.html」のほうですが、CSSを記述したstyleタグをごそっと別ファイルに移しましたので、こんな感じになっています。

この3行目のところに、css.htmlを呼び出す記述を以下のように入れるのです。

まず、ビックリマークとエクスクラメーションマークでできている以下の記述ですが、これはGASの機能で強制出力スクリプトレットタグと言います。

<?!= GASスクリプト ?>

強制感ありますよね。

HTMLファイルをそのまま文字列として取得する

まずは、強制出力スクリプトレットタグの役割は置いておいて、その中身から見ていきましょう。

以下の部分です。

…どうやら、GASっぽいですよね。そうなんです、GASなんです。

前半部分は以前の記事でお伝えしましたね。

createHtmlOutputFromFileメソッドはプロジェクト内のHTMLファイルから、HtmlOutputオブジェクトを生成するメソッドです。

HtmlService.createHtmlOutputFromFile(ファイル名)

そして、そのHtmlOutputオブジェクトに対して、getContentメソッドを使っています。

これは、HtmlOutputオブジェクトのコンテンツを文字列として取得するメソッドです。

HtmlOutputオブジェクト.getContent()

つまり、このGASの部分は、css.htmlの内容をそのまま文字列で取得しているというわけです。

強制出力スクリプトレットタグとは

はい、ではいよいよ強制出力スクリプトレットタグとは何者なのかを説明しますよ。

GASのHTMLファイルには、GASのスクリプトを埋め込むことができるという特典があります。

それで、その埋め込み方には以下のように3つの種類があります。

名称 記述 役割
スタンダードスクリプトレットタグ <? GASスクリプト ?> スクリプトを埋め込む
出力スクリプトレットタグ <?= GASスクリプト ?> スクリプトの戻り値をエスケープして出力する
強制出力スクリプトレットタグ <?!= GASスクリプト ?> スクリプトの戻り値をエスケープせずに埋め込む

今回は、css.htmlの内容をエスケープせずに出力したい(つまりそのまま出力したくない)ので、強制出力スクリプトレットタグを使うというわけです。

そして、おそらく、強制出力スクリプトレットタグ以外のスクリプトレットタグは使うことはないかな~と思います。

スクリプトレットを含むWebページを表示するために

では、Webページとして表示してみましょう!

しかしながら、以下のように強制出力スクリプトレットタグがそのまま表示されてしまいました。

GASで強制出力スクリプトレットタグがそのまま表示されてしまった

しかも、css.htmlによるスタイルがされていませんね。

こうならないように、もう一つ作業が必要です。

もうすっかりお忘れかも知れませんが、「コード.gs」のdoGet関数を変更しなくてはいけないのです。

以下のように変更します。

HtmlTemplateオブジェクトとスクリプトレットの実行

以前は、createHtmlOutputFromFileメソッドを使っていましたが、今回は以下のcreateTemplateFromFileメソッドになっていますね。

HtmlService.createTemplateFromFile(ファイル名)

書式自体は、createHtmlOutputFromFileメソッドのそれと酷似しています。

ただ、生成されるオブジェクトが異なり、HtmlTemplateオブジェクトというオブジェクトが生成されます。

HTMLファイルにスクリプトレットタグが含まれている場合は、いったんHtmlTemplateオブジェクトとして生成する必要があります。

そして、そのHtmlTemplateオブジェクトに対して、evaluateメソッドを実行することで、スクリプトレットを実行し、HtmlOutputオブジェクトを返すことができるというわけです。

HtmlTemplateオブジェクト.evaluate()

これで、HTMLファイル内に埋め込んだ強制出力スクリプトレットタグがきちんと実行され、その内容、つまりCSSのスタイルが反映されたWebページが表示されるわけです。

まとめ

以上、GASでWebページを作るときに、HTMLとCSSを別ファイルに記述する方法についてお伝えしました。

HTMLファイルに一文挿入するだけですが…以下の部分は抑えておくと後々楽ができると思います。

  • GASのHTMLファイルには強制出力スクリプトレットタグで、他のHTMLファイルを読み込んで表示することができる
  • スクリプトレットを実行するには、HtmlTemplateオブジェクトを生成してevaluateメソッドを実行する

ただ、どーしても難しくて理解できん!って方は、いったん強制出力スクリプトレットタグとその中身は「おまじない」的に記述いただいても良いかも知れません。

さて、たくさんありますが、以下がまとめのソースです。

表示するコンテンツと装飾とを別ファイルに分けられるので、管理はしやすいはずです。

次回は、CSSが苦手なすべての人の味方、Bootstrapについてです

GASでWebページを作成する際にCSSフレームワークBootstrapを導入する方法
GASユーザーのためのHTML入門、簡単なWebページの作り方をお伝えしています。今回はGASでWebページを作成する際にCSSフレームワークBootstrapを導入する方法をお伝えします。

どうぞお楽しみに!

連載目次:GASユーザーのための初めてのHTML・CSS講座

Google Apps ScriptではHTML・CSSを使ってWebページを作成し、公開することもできます。本シリーズでは、HTMLやCSSの全くの初心者が、GAS環境を利用してその基本的な知識を身に着けられるようにお手伝いしますよ!
  1. Google Apps Scriptで最も簡単なWebページを作成して公開する
  2. GASでWebページを表示するdoGet関数のスクリプトについて丁寧に解説
  3. GASで作成した最も簡単なWebページのHTMLコードについて丁寧に解説
  4. 【GASユーザーのためのHTML入門】よく使う基本のHTMLタグを紹介します
  5. 【GASユーザーのためのHTML入門】アンカーリンクを張るaタグの書き方
  6. GASのWebページにGoogleドライブ内の画像を挿入する方法
  7. GASで作ったWebページにCSSでスタイルをする最初の一歩
  8. 【GASユーザーのためのHTML入門】好きな要素にだけCSSでスタイルを適用する
  9. 【GASユーザーのためのHTML入門】範囲指定するだけの便利なdivタグとspanタグ
  10. GASでWebページを作るときにHTMLとCSSを別ファイルに記述する方法
  11. GASでWebページを作成する際にCSSフレームワークBootstrapを導入する方法
  12. GASのWebページのナビゲーションをBootstrapでスタイルする方法
  13. GASとBootstrapでWebページを超簡単にいい感じのレイアウトにする方法
  14. GASでWebページを作るときにページのタイトルを設定する方法
  15. GASで作成したWebページにファビコンを設定する方法
  16. GASで作成したWebページをスマホで表示させたいときのmetaタグviewportの設定

The following two tabs change content below.
株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ ★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ ★フォロー頂ければ嬉しいです。

コメント