にわかプログラマの備忘録

仕事の過程で調べたことを忘れないように記載しています

作って覚えるGAS:献立スロット1

献立スロットを作ろう

GASを使ってなんか作りたい。
でも、会社のは公開なんてできないし、ということで一時話題になった献立スロットを作ろうと思います。

基本仕様

既存のものだと作れないor作りたくない料理が出てくるのでスプレッドシートに料理の情報を入力し、その中からランダムで出てくるようにします。
一番簡単なのはスプレッドシート上にメッセージとして出力することなんですが、味気ないのでWebアプリとして作っていきます。

そしてリンクを張ってレシピページへ飛べるようにします。
大変なので栄養バランスは考慮しません。

事前準備

料理情報を入れるスプレッドシートを用意します。
下記のシートをもとに好きなだけ料理を追加してください。
献立スロット - Google スプレッドシート

各シートの1列目はシステム的に使用するので名前は変えないでください。
シート名が料理の種類になるので、ほかにも「ご飯もの」や「パスタ」など好きなものを追加してください。

name料理の名前
foodstuffメインの食材
(どうせ詳細はリンク先で確認するのでそれを作るか判断できる程度に記載)
recipeURLレシピの書いてあるURL

料理の画像も、と思ったのですが直リンクになり引用元のサーバーに負荷をかけてしまうためやめました。
画像を表示させたい場合は自分でレンタルサーバーを借りてUPするかGoogleドライブから使えるURLを生成するなどの手段をとってください。
くれぐれも著作権には気を付けて。

プログラムを作る

やること
  1. スプレッドシートの各シートから情報を取得する
  2. 各シートからランダムで1つ選ぶ
  3. 1つの配列にまとめる
  4. 表示させるHTMLファイルを作る(スロットのスタートボタンを作る)
  5. HTMLに紐づけたJavaScriptに3の配列を渡す
  6. JavaScript(JQuery)で配列情報をHTMLに表示させる

次からいよいよプログラムを作っていきます。