Googleドライブのフォルダ内に複数の画像を保存してHtml Serviceに読み込みたい
今回考えた手順
- Googleドライブのフォルダを指定する
- フォルダ内のファイルを取得する
- 取得したファイル名とIDを配列に入れて昇順に並び替える
- それを不可視のtextareaに入れる
- ファイルIDから表示用のURLを作ってimgのsrcに入れる
- next, prevボタンで前後の画像を表示する
- jumpボタンで指定した番号の画像を表示する
コード.gs
//フォルダを指定する
var FOLDER_ID = "フォルダID";
/************************************
doGet
************************************/
function doGet(e) {
return HtmlService.createHtmlOutputFromFile("index");
}
/************************************
getFiles
フォルダ内のファイルを取得して
昇順にして返す
************************************/
function getFiles() {
var array = [];
var folder = DriveApp.getFolderById(FOLDER_ID);
var contents = folder.getFiles();
while(contents.hasNext()) {
var file = contents.next();
var name = file.getName();
var id = file.getId();
var obj = {};
obj["name"] = name;
obj["id"] = id;
array.push(obj);
}
var sorted = objSort(array);
return array;
}
/************************************
objSort
並べ替える
************************************/
function objSort(array) {
var ascending = array.sort(asc);
return ascending;
}
/************************************
asc
nameで昇順に並べ替える
************************************/
function asc(a, b){
var targetA = a.name;
var targetB = b.name;
if(targetA > targetB){
return 1;
}else if(targetA < targetB ){
return -1;
}else{
return 0;
}
}
|
index.html
<!DOCTYPE html>
<html>
<head>
<style>
#image {
height: 100vh;
}
.display_none {
display: none;
}
</style>
</head>
<body>
<textarea id="ta" class="display_none"></textarea>
<input id="num_tb" type="text">
<button id="jump_bt">jump</button>
<button id="prev_bt">prev</button>
<button id="next_bt">next</button>
<br>
<img id="image" src="">
<script>
/************************************
グローバル
************************************/
var jump_bt = elem("jump_bt");
var next_bt = elem("next_bt");
var prev_bt = elem("prev_bt");
var num_tb = elem("num_tb");
var image = elem("image");
var ta = elem("ta");
/************************************
イベント
************************************/
jump_bt.onclick = jumpClicked;
next_bt.onclick = nextClicked;
prev_bt.onclick = prevClicked;
/************************************
elem(id)
************************************/
function elem(id) {
return document.getElementById(id);
}
/************************************
起動時に実行
************************************/
getFilesNameId();
/************************************
get_data()
************************************/
function getFilesNameId() {
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.getFiles();
}
/************************************
onSuccess(result)
************************************/
function onSuccess(array) {
ta.value = JSON.stringify(array);//一度JSON形式にする
showImage(0);
}
/************************************
showImage
ファイルのURLをimageのsrcに入れて
テキストボックスにページの数値を入れる
************************************/
function showImage(num) {
var array = JSON.parse(ta.value);//JSON文字列をオブジェクトに変換する
var view_path = "https://drive.google.com/thumbnail?sz=w1000&id=";
image.src = view_path + array[num]["id"];
num_tb.value = num;
}
/************************************
onFailure(e)
************************************/
function onFailure(e) {
alert([e.message, e.stack]);
}
/************************************
jumpClicked
テキストボックスの数値をみてそのページを開く
************************************/
function jumpClicked() {
var num = getNumTotal()["num"];
var total = getNumTotal()["total"];
if(num > total-1 || num < 0) {
alert("有効範囲は、0〜" + (total-1).toString() + "ページ");
} else {
showImage(num);
}
}
/************************************
nextClicked
ひとつ次の画像を開く
************************************/
function nextClicked() {
var num = getNumTotal()["num"];
var total = getNumTotal()["total"];
num = num + 1;
if(num > total-1) {
num = total-1;
} else {
showImage(num);
}
}
/************************************
prevClicked
ひとつ前の画像を開く
************************************/
function prevClicked() {
var num = getNumTotal()["num"];
num = num - 1;
if(num < 0) {
num = 0;
} else {
showImage(num);
}
}
/************************************
getNumTotal
テキストボックスの数値とファイルの総数をオブジェクトで返す
************************************/
function getNumTotal() {
var num = parseInt(num_tb.value);
var array = JSON.parse(ta.value)
var total = array.length;
var obj = {};
obj["num"] = num;
obj["total"] = total;
return obj;
}
</script>
</body>
</html>
|
