More than 5 years have passed since last update.

GAS でホームページ作りたい！！

Last updated at 2020-07-27Posted at 2020-07-27

自分のホームページを作りたいが無料で作りたい人が，ちょっと遊び感覚でホームページを作る話．

そんなことが出来るのか？と．GoogleAppScript で作れるよっと．
ということで，GoogleAppsScript（GAS）でホームページ作りたい．

Markdown でものを書いていてHTML は自動で生成出来てしまうから，あとはそれを公開する環境が欲しいなぁという思いで，サクッと作ってみた．

まだ何もわからずに写経状態で，覚書き程度に書いているので，間違い等あったら教えてください．また，このプロジェクトをひな型にして作成していて十分動いています．

記事を書いた他の動機として，CSS を外部ファイルにする，ページを複数設定するtips 記事はいくつか見つかったが，これらを複合的に扱う記事が見つからなかったということもある．

○ ページ設定

ホームページからほげページに移れるようものを作成する．また，エラーページも用意する．

プロジェクト内のファイル一覧

コード.gs : GAS の要
css.html : CSS
home.html : ホームページ
error.html : エラーページ
hoge1.html : ほげページ1
hoge2.html : ほげページ2

○ コードの設定

今回のプロジェクト公開ページのURL は以下とする．
（※ URL の部分は一部***** で伏字にしてあります．各プロジェクトで書き換えてください．）

https://script.google.com/macros/s/*****/exec

このプロジェクト公開ページのURL の末尾に?p=foo を付けることで，プロジェクト内のパラメータ"p" ごとに呼び出すHTML ファイルを変えることが出来る．

それを利用して，ここではパラメータごとにページが切り替わる仕掛けを作る．また，CSS を取り込むfunction も入れておく．

コード.gs

//css.html ファイルを読み込む
function include(filename){
    return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

//各HTML を呼び出す
function doGet(e){
  var page = e.parameter["p"];
  var pageout = HtmlService.createTemplateFromFile
  
//以下でパラメタごとにページが切り替わる仕掛けを作る．
  if(page == "home" || page == null){ 
    return pageout("home").evaluate();
  }
  else if(page == "hoge1"){
    return pageout(`hoge1`).evaluate();
  }
  else if(page == "hoge2"){
    return pageout(`hoge2`).evaluate();
  }
  else{
    return pageout(`Error`).evaluate();
  }
  return 
}

if 以降の部分で，パラメータ"p" がどの値を取るかでどのHTML ファイルを呼び出すかを選ぶようにしている．

プロジェクト公開ページのURL 末尾の?p=foo に対して，page == "foo" が対応している．

また，HtmlService.createTemplateFromFile("Foo") はFoo.html を呼び出すことになる．¹

ホームページはパラメータ"p" の値が"home" または何も入力されない（null）のときに呼び出されるようになっている．

エラーページはパラメータ"p" の値が存在しない値になっているときに呼び出されるように設定している．

○ CSS の設定

GAS はCSS ファイルを入れられない．したがって，<style> ~</style> をそのまま取り込みさせることで，CSS 部分を取り出す．

css.html

<style>
  /*  CSS */
</style>

スクリプトファイルも以下のようにしておけば，外に取り出すことが出来るらしい．（実装していないのでよく知らない）

js.html

<script>
  //JavaScript
</script>

このCSS を複数作っておいて，ページごとに使い分けることも可能だ．

○ ホームページ

CSS は<?!= include(`css`) ?> で取り込んでいる．"css" の部分はcss.html に対応している．

home.html

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <?!= include(`css`) ?>
    </head>
    <body class="vscode-light">
        <h1>
          Home
        </h1>
        <h2>Contets</h2>
        <a href="https://script.google.com/macros/s/*****/exec?p=hoge1">
          ほげページ1
        </a><br>
        <a href="https://script.google.com/macros/s/*****/exec?p=hoge2">
          ほげページ2
        </a><br>
    </body>
</html>

○ エラーページ

CSS は<?!= include(`css`) ?> で取り込んでいる．

Error.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include(`css`) ?>
  </head>
  <body>
    ！ここはエラーページです！<br>
    <a href="https://script.google.com/macros/s/*****/exec?p=home">
    ホームへ戻る
    </a><br>
  </body>
</html>

ホームに戻れるようにURL を貼っておくと親切だろう．

○ ほげページN

N 番目のほげぺーじは以下のようにする．CSS は<?!= include(`css`) ?> で取り込んでいる．

hogeN.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include(`css`) ?>
  </head>
  <body>
    ほげほげ　ふー
  </body>
</html>

あとはbody を編集すればいいだけ．

○ 他にできそうなこと

ホームページから各ページに飛んだあと，またホームページに戻るときにはブラウザバックを用いれば良いだけな感じもするが，戻るボタンがあった方が好ましいだろう．
しかし，エラーページのようにすべてのページにいちいち入れるのも面倒くさい．そこで，今回のCSS と同じように各ページのヘッダー/フッターを取り出して，編集，追加することは容易なのではないだろうか．

また，このホームページ作成をやっていて思ったのは「管理するの面倒くさい」ということ．ただただ，編集するのが面倒くさい．HTML ファイルをポンと置いたら，勝手にホイっとページとページリンクが出来たら幸せなのになぁ（さすがに怠惰かも知れない）．実際にサーバーを借りてホームページを作ったことがないので，どこまでが許容範囲なのか分からないけれど，面倒だから自動化してしまいたいという思いはある．

GAS はしょうがないところがあるのかもしれないが，ページの一番上に利用規約のバーが出てしまっているのをどうにかしたい．

○ 参考

今回，HtmlService.createTemplateFromFile の部分をpageout に置き換えてしまっていることに注意． ↩

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up