ご質問させて下さい。 勉強中ではありますがgoogle apps script でWEBアプリで作成しております。
ご質問させて下さい。 勉強中ではありますがgoogle apps script でWEBアプリで作成しております。 （Google Workspace（旧 G Suite）の環境で数百名がipadでアクセスする様な使用用途になります） スプレッドシートでのGAS使用には若干の心得がございます。 有識者の方にお知恵をお貸し頂ければと思っております。 ・やりたい事 ①日々変動するgoogle drive内の画像を<select>に設定し、表示したい画像のFILE名を選択⇒ボタンをクリック⇒表示画像が切り替わる。 ②<select>を切り替える⇒ボタンをクリック⇒表示したい<table>が切り替わる。 ※ここの<select><table>は①とは違い決まった物になります。 例：①各シェフが作成した料理を選択。 ②和食・中華・フレンチ…のようなジャンルごとの<table>を選択 みたいな仕組みにしたいと思っています。 ・試している事 ①google drive内の画像詳細を二次元配列に並べる [[file名,fileId,fileUrl,base64url]] ※IDとURLは後々に使用する予定ですが、今は無関係です ②配列のfile名で<select>を作成。 （Scriptletsで書いています） ③この後の書き方に困っています。 以下HTML文になります。 index.html <body> <label for="select">Choose a menu:</label> <select name="select" id="select"> <option value="">--Please choose an option--</option> <? var ss = DriveApp.getFolderById("AAAAAAA"); var files = ss.getFiles(); var list = []; while (files.hasNext()) { var file = files.next(); var blob = file.getBlob(); var contentType = blob.getContentType(); var base64 = Utilities.base64Encode(blob.getBytes()); var image = "data:" + contentType + ";base64, " + base64; list.push([file.getName(),file.getId(),file.getUrl(),image]); } ?> <? for (var i = 0; i < list.length; i++) { ?> document.write("<option value=<?=list[i][0]?>><?=list[i][0]?></option>"); <? } ?> </select> <br><br> <button type="button" id="bt">ボタン</button> <p><img src="ここにBASE64のURLを動的に表示したい" height="562" width="750" alt="サンプル画像" align="top" id="image">ここに画像表示</p> <script> document.getElementById("bt").onclick = get_select; function get_select() { var select = document.getElementById("select"); var index = select.selectedIndex; var value = select[index].value; //ここに配列list[index][3]を使用してinnerHTML??を使用すれば良いと思われるのですが、書き方がわからないのです。 alert(index+value); ⇒とりあえず動作テストで入れているだけです。 } </script> </body> </html> そもそもこの書き方自体に無駄がある。複数アクセス時に重くなるなどがあればご教示願います。
HTML、CSS | JavaScript・157閲覧・100
