GASで0からHello,World!を表示するwebアプリを作ってみよう


こんにちは。

先日、以前から気になっていたGASを初めて使って、その威力に驚かされました。

サーバー、データベースなどが全て揃っていて、コードを書くだけで簡単なwebアプリならすぐ作れちゃう！

しかも必要な知識もほとんどJavaScriptとHtmlなので、初心者でも手軽に作れる！

もちろんアクセス回数の制限などもありますが、個人的に使用する分には不自由しないと思います。

また、手軽に作れるので、webアプリを思いついた時のプロトタイプ作成としても使えます。

そんなGASの始め方を、今回は０からおきまりのHello,Worldまで、わかりやすく教えたいと思います！

GASで"Hello,World"を表示しよう！

GASでプロジェクトを作るには、Google Driveで管理します。

GoogleDriveへ行き、Googleアカウントでログインしましょう。

ログインできたら、左上の「新規」という青いボタンから「その他」→「Google App Script」を選択しましょう。


そしたらJavaScriptの関数が書かれた「コード.gs」というファイルがあると思いますが、あまり気にしないでおいときます。

とりあえず、webアプリにアクセスした時に表示されるhtmlファイルを用意しておきましょう。

左上のファイルから新規作成、htmlファイルを選択して作成します。ファイル名はなんでもいいのですが、おきまりのindexにでもしておきますか。


作成できたら、今回はとりあえずHello,Worldを表示したいので<body>タグ中に書きこんで行きます。


これで表示するhtmlの準備ができたので、今度はさっきの「コード.gs」に戻り、urlにアクセスがあった場合にindex.htmlを表示する処理を作ります。



いったん最初から書かれているコードはけして、こっちのコードをかきましょう。

コード.gsはわかりやすくするため、main.gsなどに名前を変えておくと良いでしょう。

このコードの意味自体は理解できなくても、使えれば問題ありません。

とりあえず、urlにアクセスがあったらindex.htmlを取りに行って、それをreturnさせてる（表示させてる）ものだと考えてください。

では実際に、web上で表示できるようにしていきます。

上のメニューから「公開」→「webアプリケーションとして導入」を選択します。


そしたら、画像のような画面になるので、更新を押しましょう。

青線のところにはアプリのurlと自分のメールアドレスが書かれています。

更新を押したらアプリのurlアドレスが表示されるので、コピーして検索して確認しましょう。

Hello,Worldが表示されれば成功です！

これだけでもうwebアプリができました。

上の写真の「アクセスできるユーザー」を匿名も含む全員にすれば、urlにアクセスした人が誰でもあなたのwebアプリをみれるようになります。

GASすごい！

まとめ。

今回はGASを使った初心者向けの記事があまりなかったので、軽く書いてみました。

GASは機能がたくさんあるので、他の記事もどんどん更新していくつもりです。

それにしてもwebアプリ作成、公開がここまで簡単にできるGASはほんとやばい。

いろんな可能性を秘めてますね。

個人的な使用の範囲なら全然ストレスなく使えるし。

まだまだGASで遊ぼう。笑

では。
 B! LINE