あぷつう.com

弱ニートだから楽しいことだけやっていく

*

初心者が自分ルールWebアプリケーションをGoogleAppsScript(GAS)で作成する手順(1)

      2019/05/02

最近自分はダラダラと行動することが多く、どうにかしてこのダラダラを脱却できる習慣を作れないか考えてみました。

「そうだ!行動をポイントみたいに貯めて使えるようなシステムにすれば、ポイントを貯めるために頑張れるのではないか?」

そう考えてアプリで探してみました。

iPhoneアプリ「自分ルール」はゲーム感覚で習慣化をサポートしてくれる

一応アプリでもあるにはあったのですが、使い勝手がどうにも悪い(件数の制限があったり、広告出たり、マルチデバイス不可)ので、なんか楽にできるような仕組みないかなぁーっと検索。

そしたら、Google Apps Scriptでスマホからも楽に入力できる家計簿作ってみたというサイトを発見!

これを見ながらちょこちょこ工夫して作成。

必要な知識

  • HTML
  • CSS
  • JavaScript
  • GoogleAppsScript(GAS)

サーバーの手間とかなくてほぼフロントエンドの知識しか使わなくていいからめちゃくちゃ楽。
HTMLとCSSについてわからない人は、ドットインストールで無料で学習できるので、そちらで学習してからのほうが理解しやすい。

JavaScriptについても、ドットインストールで「はじめてのJavaScript」を学習しておくといい。また、GoogleAppsScript(GAS)についてもドットインストールで学習したほうがいいが、こちらの学習は有料のため気を付けてもらいたい。

しかし、有料だけどやっておくと理解がしやすくなる。

メリット

GoogleAppsScript(GAS)で作成したものはWebアプリケーションとして利用可能。
いろんな人に公開することもできるが、個人的な使用の場合もOK!

個人の場合は、Googleのアカウントと紐付けされているため、他の人に利用される心配が少ない。

特に今回自分で作成するメリットは以下のことになる。

  • マルチデバイス対応(インターネット環境必須)
  • 件数はGoogleSpreadsheetの件数分
  • 広告なし
  • デザイン・カスタマイズ可能

デメリットは、作成のための知識が必要になること、作成までに時間がかかることぐらい。
また、家族や友人との共有も可能。ただし、個人以外での利用の場合はURLさえ知っていれば誰でも利用できるため、複数人で共有で利用するためには何らかの対策が必要になる。

早速作成

GoogleのアカウントでGoogleSpreadsheetを開いてもらいます。

GoogleSpreadsheetを開いたら、ツールのスクリプトエディターをクリック。
Webアプリケーション001

そしたら、コードを入れる場所が開かれる。
Webアプリケーション002

まず初めにWebで表示するためのHTMLファイルを作成していきます。ファイル→新規作成→HTMLファイルをクリック。ファイル名はindexにしましょう。
Webアプリケーション003

index.htmlで最初はこのようになっています。
Webアプリケーション004
では、早速タイトルを作成。タイトルとh1タグは<?・・・?>で囲んでいます。これはGoogleAppsScript(GAS)で使われるものなのですが、スクリプトレットと言われた記述方法になります。
そのまま、入力をしてもらうのも可能ですが、この方法を使うことでタイトルの変更をしやすくなります。

これによってHTMLを動的に変化させることができます。よく使われる手法なので覚えておきましょう。
他にも、<?=・・・?>,<?!=・・・?>などがあります。

スクリプトレットについて知りたい方は下記サイト参照。
【GAS】WebアプリやAPIも作れちゃう!HtmlServiceについて、できることをまとめてみた。 ~ その① Webアプリケーションの基本 ~
GASでWebページを作るときにHTMLとCSSを別ファイルに記述する方法

Webで公開

先程作成したindex.htmlをWebで公開する手順になります。
コード.gsにはこのように入力。ここでtemplate.titleに「自分ルール」とありますが、これが先程のindex.htmlに入ります。

indexは先程作成したファイル名になります。コード.gsでファイルを読みにいって、Webで表示するためこのようになっています。
ちなみにコード.gsに最初にあった。function myFunction() {} は消去してしまってください。

では、Webで公開しましょう。

公開→ウェブアプリケーションとして導入を選択。
Webアプリケーション005

プロジェクトバージョンはそのままでOK。アプリケーションにアクセスできるユーザーは、自分or全員or全員(匿名含む)のいずれかになります。
今回は個人利用を考えて自分だけにしておきます。その後、導入をクリック。
Webアプリケーション006

WebアプリケーションのURLがここでは表示されます。このURLがあればどのデバイスからでもアクセスができます。
Wsbアプリケーション007

URLを開くとこのように表示。
Webアプリケーション008

一応これで自分だけしか使えないWebアプリケーションの基礎ができました。
次回からはもう少し踏み込んで、グーグルスプレッドシートにあるデータをHTML作成していく方法について書いていこうと思います。

初心者が自分ルールWebアプリケーションをGoogleAppsScript(GAS)で作成する手順(2)

 - program ,