こんにちは teruteru_layです。
サーバーはないけどHTMLでWebページを作ってみたい…
借りるのはめんどくさいし、作るのはもっとめんどくさい…
とあまりやる気がなかったのですが、どうやらGoogleAppsScript(GAS) で
簡単なWebページをHTML形式で作れるらしいと知ったので備忘録です。
概要と実作業で分けています。
概要だけでわかる方は作業は読み飛ばして構いません。
GoogleAppsScript(GAS) の作成
作業概要
1. Google Driveにアクセス
2. 新規ファイル作成をクリック
3. その他→GoogleAppsScriptの選択
実際の作業
ではGASを作っていきましょう。
まず、Google Driveに行きます。
以下のドライブを開く を選択します。
アカウントがない方は作成してください。ここでは作成の仕方はスキップします。
ドライブを開いたら、左にある新規ボタンから
画像の通りにGoogle Apps Scriptを選択します。
これでGAS作成完了です！簡単ですね。
HTMLファイルの準備
作業概要
1. ファイル横にある＋ボタンからHTMLを選択
2. タイトルを付けてenterでファイル生成
3. bodyタグに適当な文字を入れて保存！
実際の作業
GASを作成すると以下の画面が表示されます。
こちらがGASのメイン画面になります。
いろいろとありますが、今回はHTMLファイルを作成して
表示するだけなので飛ばします。
ではHTMLファイルを作成していきましょう。
まず左にあるファイルから、＋ボタンを押してHTMLを選択しましょう。
すると、無題というファイルが生成されるので、
わかりやすい名前に変更してエンターキーを押してください。
今回はindexというタイトルにしました。
するとindex.html（拡張子は自動でつきます）が生成されます。
作成したindex.htmlの bodyタグ内に適当な文字列を挿入し、保存します。
Ctrl + S で保存できます。
htmlタグの意味については今回は割愛します。
これでhtmlファイルの準備が整いました。次は.gsの編集を行います！
デプロイ（Webページの表示）
.gsの準備を行います。
HTML サービス: ベスト プラクティス から
以下のコードを、もともとあったコード.gsのmyFunctionを消去して入力します。
コードの'index'は先ほど作成したhtmlファイルと同じ名前にしてください！
function doGet(request) {
return HtmlService.createTemplateFromFile('index')
.evaluate();
}
作業概要
1. デプロイから新しいデプロイを選択
2. 種類の説明でウェブアプリを選び、デプロイする。
3. 表示されたウェブアプリのURLをコピーしてブラウザで立ち上げる。
4. デプロイの管理からアーカイブして終了。
実際の作業
.gsを編集します。
上部にあるコードをコード.gsにコピーして保存します。
これで後はデプロイするとHTMLを表示するWebページを作成できます。
次はデプロイします。
デプロイボタンから新しいデプロイを選択します。
すると新しいデプロイのオプションが表示されるので、歯車ボタンからウェブアプリを選択します。
説明文を入力してデプロイを選択します。
デプロイを押すと、ウェブアプリにURLが表示されるので、
コピーしてブラウザにペーストします。
これで、サーバーを使わずに簡単にWebページを表示することができました！
先ほどbodyタグに打ち込んだ文字が表示されていれば成功です。
最後に立ち上げたデプロイを終了するプロセスを書いておきます。
デプロイボタンにあるデプロイを管理から
デプロイメントをアーカイブを選択します。
これで先ほどのURLが機能していないことを確認できます！
さいごに
GASを使用してHTMLを表示するWebページの作成を紹介しました。
私はこれでHTMLの勉強がはかどりそうです！
いろいろ試してみてまた気になったことがあれば記事にしようと思います。
最後まで、閲覧いただきありがとうございました。