いきなり完成図
こうゆうのは先に完成版を提示したほうがいいかなと。しょぼいんですがこんな感じでセレクトボックスから選択するとそれに応じて画像、所在地、説明文が変わるというやつです。そして、その元データはスプレッドシートに入力し、GASがそれを拾ってHTMLに表示するという流れです。
選択肢を変えると切り替わります。
画像をどこに置くか？
これがけっこう悩ましくて、まずドライブに画像を置いても.jpgなどの拡張子で参照することができず、断念しました。次に、グーグルフォトに置いてそれを参照する形を検討しました。しかしこれもまた.jpgなどの拡張子で参照することができず、あきらめました（URLFetchなど、いろいろ試したんですが）。グーグルフォトのWeb画面から検証→sourceから画像の実データを拾うというのもありですがたった75KBのサイズでたしか10万文字レベルだったのでやめました。
最終的にはXdomainの無料レンタルサーバーを使ってひとまずそこに画像を置くことにしました。1GBまで無料のようです。
いろいろ省略していますが、一通り登録が終わったらまずHTMLサーバーから管理パネルに入って、
次にFTPアカウント設定に入って、
その中の、WebFTPのところのログインを押すとやっと入れます。ログインのところがボタンになっていないのでパッと見分かり辛かったです。
imgフォルダを作ってそこに放り込んでおきました。
imgフォルダの中身はこんな感じ。サンプルとして３つ入れました。
スプレッドシートの準備
ここは単純です。画像のようにセレクトボックスに入るタイトル、そして画像アドレス、所在地、説明文です。また、E列には画像をチラ見できるよう、=IMAGE(URL)で持ってきています。このあたりがSQLiteなどのDBと違って手軽かつ便利なところじゃないかと思います。IMAGE関数は便利なのですが画像アドレスの拡張子が.jpgや.pngなどに限定されているのが残念。
画像アドレスは黒く塗りつぶしちゃいましたがここには当たり前ですがhttp://から始まるフルパスが入っています。
GAS
プログラミングに入っていきます。独立したスクリプトエディタを使いました。ちなみにレスポンシブのおまじないも混ぜたのですがスマホでは大きく表示されすぎて失敗しました。
function doGet(request) {
var html = HtmlService.createTemplateFromFile('Index').evaluate();
return html.setTitle('Index').addMetaTag('viewport', 'width=device-width, initial-scale=1.0');
}
function getList() {
var ss = SpreadsheetApp.openById("スプレッドシートキー");
var sh = ss.getSheetByName("シート名");
var list = sh.getRange(2,1,sh.getLastRow()-1,4).getValues();
return list;
}
まず、ロード時にGAS側のgetList関数が動き、スプレッドシート上のデータをHTML側が取得し、div id="list"・・・の部分に表示します。
つぎに、そのデータをセレクトボックスに入れます。option value=・・・のところには、パイプ記号で区切って画像アドレス、所在地、説明文をまとめてひとつの文字列として格納します。
さらに、セレクトボックスで選択肢が変更になったらonChange(this)でchangeItem関数を発動させます。その中でさきほどパイプ記号で区切ってまとめて文字列としていたものを配列化して生成DOM内に入れ、div id="result"の部分に表示します。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function onSuccess(list) {
var html = '<select onChange="changeImage(this)">';
for (var i=0; i<list.length; i++) {
html += '<option value=' + list[i][1] + "|" + list[i][2] + "|" + list[i][3] + '>' + list[i][0] + '</option>';
}
html += '</select>';
var div = document.getElementById('list');
div.innerHTML = html;
}
function changeImage(item) {
var ary = item.value.split("|");
var html = "<img src="+ary[0]+">";
html += "<p>" + ary[1] + "</p>";
html += "<p>" + ary[2] + "</p>";
document.getElementById("result").innerHTML = html;
}
// 初期画面
google.script.run.withSuccessHandler(onSuccess).getList();
</script>
</head>
<body>
<div id="list">
Loading...
</div>
<div id="result">
</div>
</body>
</html>
最後に公開→ウェブアプリケーションとして導入で設定し、URLを取得するだけです。言わずもがなですがファイルを変更したらそのつどこの作業を行い、バージョンは常に「新規作成」としておく必要があります。
スプレッドシート＋GAS＋HTMLの利点
特にないかもしれません。ただ、元データをいじりたいという人がプログラミング知識なしにわりと簡単にいじれるという点でよいのではないかと思っています。
あと画像アップローダーも作ろうと思ったんですがレンサバのファイルマネージャーに直接入ってアップロードすりゃいいやって気持ちになってしまってやめました。