GASで単語帳を作ってみた！

#GASで単語帳を作ってみた！
応用情報技術者試験の学習をしていく中で、
私立文系大学出身の自分にとって、なかなか理解するだけでは厳しいので、
とりあえず暗記したほうがよいこともかなりあるということがわかった。

そこで、Google SpreadSheet と GAS を組み合わせて単語帳を作れないかと試行錯誤した結果、
これが完成したので、晴れてQiitaに挙げてみる、といった次第だ。

#成果物

#仕様
スプレッドシート側と、GAS-WEB側で分けて説明する。
##スプレッドシート
　 　以下のカラムを保持するシートを持つ
　　　　No：行単位で一意に識別するID
　　　　次回日：次にこの問題を表示する日付
　　　　問題
　　　　答え
##GASで作成した動的Webページ
###問題ページ
　　　　「次回日」＜＝本日の問題を表示する
　　　　「答えを見る」ボタンを押下すると、答えページに遷移する
　　　　「No」を表示する
###答えページ
　　　　問題ページの「No」に紐づく、「答え」を表示する
　　　　「OK」ボタン：押下されたらその「No」の次回日を今日から3日後に更新する
　　　　「NG」ボタン：押下されたらその「No」の次回日を今日から1日後に更新する
###404ページ
　　　　エラーが発生したら、この404ページが表示される
###完了ページ
　　　　その日に実施する問題がすべて終了したら表示される

#詰まったところ
後学のため、GASで動的Webページを作るために、詰まったところはどこか説明する。

##GASでどうやって動的Webページを実現したのか？
具体的にはURLパラメータを利用した。

GASでwebページを実現するためには、サーバサイドをコード.jsに記載する。
コード.js内に、doGet()、doPost()などのメソッドを実装することで、
指定URLにアクセスした際、それに即したメソッドが呼ばれる。

今回はdoGet()を利用し、そこでURLパラメータを受け取る方法をとった。

コード.js

function doGet(e) {
  
  //ここでURLが?s=xxxx&…となっているときに、
  //status == xxxx　と取得できる
  var status = e.parameter["s"];
  
  ==省略==
  html.s = status;
}

また、html側には

index.html

==省略==
<a class="btn_area" id="show_answer" method="get" href="https://script.google.com/macros/s/xxx/exec?s=<?=s?>">答えを見る</a>
==省略==

などと、今回私はaタグのhref属性を利用したが、hrefに直接URLパラメータを記載すると、これを正しくコード.js側に受け渡すことができる。

#最後に
分かってしまえば、GASで動的Webページを実現するのはそう難しくはない。
しかし、SpreadSheetをDatabaseに擬態させたより高度な動的Webページを実現することは、若干複雑になり難しい。

本格的なサーバサイドを実現するには、GASは不向きだと思う。