【GAS】サーバー借りずにGASでHTMLを表示できるらしい

こんにちは teruteru_layです。

サーバーはないけどHTMLでWebページを作ってみたい…
借りるのはめんどくさいし、作るのはもっとめんどくさい…

とあまりやる気がなかったのですが、どうやら**GoogleAppsScript(GAS)** で
簡単なWebページをHTML形式で作れるらしいと知ったので備忘録です。

概要と実作業で分けています。
概要だけでわかる方は作業は読み飛ばして構いません。

# GoogleAppsScript(GAS) の作成
:::note info
**作業概要**
1\. **Google Drive**にアクセス
2\. **新規ファイル作成**をクリック
3\. その他→**GoogleAppsScript**の選択 
:::

## 実際の作業
では**GAS**を作っていきましょう。
まず、**Google Drive**に行きます。

https://www.google.com/intl/ja_jp/drive/

**以下のドライブを開く** を選択します。
アカウントがない方は作成してください。ここでは作成の仕方はスキップします。
![drivein.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528087/48d7e209-896b-779e-874c-92d10d2e323c.png)

ドライブを開いたら、左にある**新規**ボタンから
画像の通りに**Google Apps Script**を選択します。

![ドライブ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528087/218b5d8b-fbcc-291d-4ba8-8ed5d27592eb.png)
![GAS選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528087/250a746f-2447-95a1-0e17-aa7c5d326de1.png)

これで**GAS**作成完了です！簡単ですね。


# HTMLファイルの準備
:::note info
**作業概要**
1\. ファイル横にある**＋ボタン**から**HTML**を選択
2\. タイトルを付けてenterでファイル生成
3\. bodyタグに適当な文字を入れて保存！
:::
## 実際の作業
**GAS**を作成すると以下の画面が表示されます。
こちらが**GAS**のメイン画面になります。
いろいろとありますが、今回はHTMLファイルを作成して
表示するだけなので飛ばします。
![gas.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528087/64078889-9717-7b21-97d3-b467cc191081.png)

ではHTMLファイルを作成していきましょう。
まず左にあるファイルから、**＋ボタン**を押して**HTML**を選択しましょう。
![HTMLファイル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528087/94d5e07f-8c79-b70e-5a58-1b49b0d4b0c4.png)
すると、無題というファイルが生成されるので、
わかりやすい名前に変更してエンターキーを押してください。
今回は**index**というタイトルにしました。
![スクリーンショット 2023-08-19 204328.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528087/1a930768-6697-361e-1172-165b04cac496.png)
すると**index.html**（拡張子は自動でつきます）が生成されます。
作成した**index.html**の bodyタグ内に適当な文字列を挿入し、保存します。
Ctrl + S で保存できます。
htmlタグの意味については今回は割愛します。
![スクリーンショット 2023-08-19 205205.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528087/994b7d9d-69b4-ddcf-6a46-63501d771ce8.png)

これでhtmlファイルの準備が整いました。次は.gsの編集を行います！

# デプロイ（Webページの表示）
**.gs**の準備を行います。
[HTML サービス: ベスト プラクティス](https://developers.google.com/apps-script/guides/html/best-practices?hl=ja) から
以下のコードを、もともとあった**コード.gsのmyFunctionを消去して入力します**。
コードの'index'は**先ほど作成したhtmlファイルと同じ名前**にしてください！

~~~gs:コード.gs
function doGet(request) {
  return HtmlService.createTemplateFromFile('index')
      .evaluate();
}
~~~

:::note info
**作業概要**
1\. **デプロイ**から**新しいデプロイ**を選択
2\. 種類の説明で**ウェブアプリ**を選び、**デプロイ**する。　
3\. 表示されたウェブアプリの**URLをコピーしてブラウザで立ち上げる**。
4\. **デプロイの管理**から**アーカイブ**して終了。
:::


## 実際の作業
**.gs**を編集します。
上部にあるコードを**コード.gs**にコピーして保存します。
![スクリーンショット 2023-08-20 134039.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528087/04a4c4ee-6d38-a7f8-8a81-ce4b33ea848c.png)

これで後は**デプロイ**するとHTMLを表示するWebページを作成できます。
次は**デプロイ**します。
![スクリーンショット 2023-08-19 205943.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528087/9ae250eb-bc9c-de17-e5c2-3f0ffda06305.png)
**デプロイボタン**から**新しいデプロイ**を選択します。
すると**新しいデプロイのオプション**が表示されるので、**歯車ボタン**から**ウェブアプリ**を選択します。
![スクリーンショット 2023-08-19 205615.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528087/24215b44-cfd0-3b05-33ed-c0541f1133a7.png)
**説明文**を入力して**デプロイ**を選択します。
![スクリーンショット 2023-08-19 205653.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528087/504d6b4a-750e-ab53-578c-22c26533db30.png)
**デプロイ**を押すと、**ウェブアプリ**に**URL**が表示されるので、
**コピーしてブラウザにペースト**します。
![スクリーンショット 2023-08-19 205717.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528087/b5901ca8-e806-4fbe-ed85-fd5278665381.png)
![スクリーンショット 2023-08-19 205757.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528087/09fdb9b4-dda3-99c0-02b9-442a1d2fdae5.png)
これで、サーバーを使わずに簡単にWebページを表示することができました！
先ほどbodyタグに打ち込んだ文字が表示されていれば成功です。

最後に立ち上げたデプロイを終了するプロセスを書いておきます。
**デプロイボタン**にある**デプロイを管理**から
**デプロイメントをアーカイブ**を選択します。
![スクリーンショット 2023-08-19 205830.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528087/bd97840d-88fd-8e16-f5a7-4577a0fc3ff0.png)
これで先ほどのURLが機能していないことを確認できます！
![スクリーンショット 2023-08-19 205916.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528087/dd66c3f4-5833-1d2e-b047-0b40abac7183.png)

# さいごに
**GAS**を使用して**HTML**を表示する**Webページ**の作成を紹介しました。
私はこれで**HTML**の勉強がはかどりそうです！
いろいろ試してみてまた気になったことがあれば記事にしようと思います。

最後まで、閲覧いただきありがとうございました。