GASの勉強を始めて1週間でWebAppを作成した話

GASの勉強を始めて1週間でWebAppを作成した話:

概要

正月も近いということで正月に因んだアプリを作成し2019年1月1日に公開することに決めました。

今回、GAS(Google Apps Script)で開発を行った理由は3点あります。

1.新しい言語を扱いたかったため

2.思いついたのが、2018年12月25日であり、1週間で勉強して公開する必要あったため。

→これまでに、JavaScriptとVBAを学習してきたので、短時間で習得が容易だろうと感じた。

3.Google系のサービス（G Suite）と連携できることを知ったため。

→例えば、Gmailでメールの通知が来たものをGoogleスプレッドシートに書き出しDBの様に扱うことができるようにできる。

作成したもの

「ポジティブおみくじ」→左記URLからおみくじを引くことが可能です！！

正月に因んだアプリは何がいいかと考えた時に、おみくじはいかにも正月っぽい感じがしたのでおみくじアプリを作ることにしました。しかし、ただのおみくじアプリではつまらないのではと感じました、何か付加価値をつけられるものはないかと考えました。そこで、思いついたのがポジティブおみくじです。普通のおみくじだと小凶から大凶までの悪い運勢を引いてしまうことがあり、くじ引きの結果が落ち込んでしまう方もいらっしゃるのではないかと感じました。それで、おみくじについて調べて見たところ京都の伏見稲見神社に一般的な、大吉、中吉、吉、末吉、凶、大凶など以外にも、大大吉、吉凶不分末吉、凶後大吉などの、運勢があることを知り参考にして下記の3つの条件の中で2つ満たされる運勢とメッセージを考え作成しました。

• メッセージがポジティブ
• 運勢が凶、大凶の場合は、将来的にいい運勢になるもの
• ネタになりそうな運勢

下記が実際の流れです。この流れでは一番運勢が良い大大吉を引いています。

作成に使用したもの

• 
  Googleスプレッドシート
  
  
  
  
  • おみくじの運勢、解説、メッセージ、各運の数値を格納するDB
    
• 
  GAS
  
  
  
  
  • Googleスプレッドシートに、DBとして格納した値を取得
  • doget()でHTMLファイルをWeb表示
• 
  HTML
  
  
  
  
  • 言わずもがな
• 
  CSS
  
  
  
  
  • Webページのスタイルを指定
• 
  JavaScript
  
  
  
  
  • 1. GASで取得したスプレッドシートの値を設定
  • 2. 運勢、解説、メッセージ各運の数値をランダム表示
  • 3. 各運の数値はそれぞれの運勢ごとにランダム表示
  • 4. 各運の数値は表示する際、数値　数値分の★を一緒に表示
  • 5. おみくじ終了時にTwitterリンク生成

ざっくりとした流れ

1日目：アイデア出し、おみくじ調査、設計、GAS勉強

2日目：GAS勉強、スプレッドシートのDBを作成　モック作成

3日目：少し寄り道して、おみくじの前にGASで抽選アプリ作成

4日目：GAS、HTML完成。JSは1〜3まで作成完了

5日目：JS完成

6日目：デザイン完成　簡易なテスト

所感

1月1日に公開できるかは不安でしたが、公開できて一安心です。

製作中は、目立ったエラーに悩まされることがなく、わりかし、スムーズに開発できた印象があります。それと同時に、自分で決めた1月1日に公開できるか焦りもありましたが、開発している最中は楽しかったです。

あとは、今回、公開した時に達成感があって、この感覚を大事にしたいなと改めて思いました。

最後に

「ポジティブおみくじ」良かったら、2019年の運試しということでよろしければ、引いて見てください。

また、ハッシュタグは#ポジティブおみくじなので、ハッシュタグ付きで呟いてもらえると嬉しいです。

改善案・修正案がありましたら、お気軽にコメントいただけると有難いです。

最後まで読んでくださりありがとうございました。