LANG SELRCT

コードを書く場所

2019年1月31日木曜日

フォルダ内の複数画像を取得してHtmlServiceで表示したい


Googleドライブのフォルダ内に複数の画像を保存してHtml Serviceに読み込みたい

今回考えた手順
  1. Googleドライブのフォルダを指定する
  2. フォルダ内のファイルを取得する
  3. 取得したファイル名とIDを配列に入れて昇順に並び替える
  4. それを不可視のtextareaに入れる
  5. ファイルIDから表示用のURLを作ってimgのsrcに入れる
  6. next, prevボタンで前後の画像を表示する
  7. 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/uc?export=view&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>