【GAS】フォルダ内の画像一覧表を作るプログラム！
<スポンサーリンク>
GASを用いて、
・スプレッドシートにグーグルドライブのファルダ内のファイルの一覧を作る
プログラムを紹介していきたいと思います！
早速プログラムの紹介！
早速プログラムを紹介していきたいと思います！
今回作成するプログラムは、下のリンクのものとなっており、
・セル「G2」に入力したドライブのIDをもとに、
・ドライブの中のファイル一覧を書き出し、
・画像を表示させていくプログラムになります。
【公開用】image抜き出し
docs.google.com
プログラムを書くのがめんどくさいという方は、ダウンロードしてまずは使用してみてください。
そのままですと閲覧のみ可能になっていますので、
ファイル→コピーを作成で、自分のスプレッドシートにコピーを作成してください。
コード紹介
では、今回使用したコードを紹介したいと思います。
※ダブルクリックでコピーできます。
function getPicID() {
SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(2,1,1000,4).clearContent()
var Driveid= SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(2,7).getValue()
// フォルダ内のファイルを一括取得
var files = DriveApp.getFolderById(Driveid).getFiles();
// var files = DriveApp.getFolderById("1EXmXX0jzBONqx4tsKvytHQfxLwhgYy94").getFiles();
// 配列を宣言
var Pic = [];
// 配列に「名前」「URL」「ID」
while(files.hasNext()) {
//一括取得したファイルの中から順に一つ取り出す
var file = files.next();
//「名前」「説明」「URL」をそれぞれ格納
Pic.push([
file.getName(),
file.getUrl(),
file.getId(),
"=image(\"https://drive.google.com/uc?id="+file.getId()+"\")",
]);
}
SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(2,1,Pic.length,Pic[0].length).setValues(Pic)
}
プログラム内容説明
ではプログラムの詳細を説明していきましょう。
フォルダの中のファイル一覧を取得
①フォルダを指定して(getFolderbyId)、その中のファイルすべてを指定します(getFiles())。
var Driveid= SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(2,7).getValue()
// フォルダ内のファイルを一括取得
var files = DriveApp.getFolderById(Driveid).getFiles();
ファイル一覧から情報を抜き出し、配列に代入
②ファイルの情報を配列に入れていきます。
・hasNext()でファイルが終わるまで繰り返し、
・Pic.push=([名前,URL,ID,image関数])の4列の配列を積み重ねていきます。
// 配列を宣言
var Pic = [];
// 配列に「名前」「URL」「ID」
while(files.hasNext()) {
//一括取得したファイルの中から順に一つ取り出す
var file = files.next();
//「名前」「説明」「URL」をそれぞれ格納
Pic.push([
file.getName(),
file.getUrl(),
file.getId(),
"=image(\"https://drive.google.com/uc?id="+file.getId()+"\")",
]);
}
setvaluesで書き込み。
③最後にスプレッドシートに書き込んで終わりです。
SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(2,1,Pic.length,Pic[0].length).setValues(Pic)
プログラムのポイント
今回のプログラムのポイントは、
①image関数を使って、セル内に画像を表示させること。
②数式の中に「”(ダブルクオーテーションマーク)」を使う時は、
「\”」と宣言しないといけないこと。
"=image(\"https://drive.google.com/uc?id="+file.getId()+"\")",
③push関数の使い方
Pic.push([A, B, C, D ]);
です。
これ以外は特に難しいことはしていないと思います。
まとめ
スプレッドシートを使うと、ドライブと連携して、画像の表示などいろいろなことができます。
ぜひ、自分なりのアレンジをして、かっこいい表を作成してください！
コメント欄
シートを作る際に参考にさせて頂きました。
一点質問なのですが、常にフォルダの中の画像が追加されるような形で使用をしていまして、
新しい画像を入れるとシートの反映の一番上部に表示される仕様でして
これを新しい画像は下にどんどん追記されていくように作ることは可能なのでしょうか？
コメントありがとうございます！
下記urlにある通り、.getFiles()では「最終更新日」が新しい順にデータを取ってくる仕様になっています。
ですので、push ⇒ unshift にすることで、反転させることが可能だと思います。
詳しくは下記記事を参考にしてみてください。
https://nujonoa.com/how-to-combine-two-dimensional-arrays/
うまくいかないようでしたら、またご連絡いただけたらと思います。
ありがとうございます！
今やったところ、できました！
とてもブログ参考にさせて頂いておりますので、
またいろいろとご質問をさせてください！
お役に立てて何よりです！
なにぶん素人で独学で学んだものなので、
泥臭く、スマートでない部分が多々あるかと思いますが、
そのような言葉をいただけると、励みになります！
わからないことあれば、お気軽にコメントいただければ対応させていただきますので、
これからも宜しくお願い致します！
参考にさせていただきたいとおもいます！
Googleドライブではなくdropbox内のフォルダにある画像を全て表示させることも可能なのでしょうか？
またこちらも画像が増えたら常に更新されるような仕組みが理想です。
GASで連携できるのはGoogle関係のファイルとなりますので
dropboxでの使用はかなり厳しいかと思います。
※私の技術では不可能に近いです。申し訳ありません。。。
追加で質問すいません…！
❶実行ボタンのトリガーをなくして、G2にIDを記載したらすぐに反映されるような仕様に変更することは可能でしょうか？
❷ドライブフォルダの階層が以下のようになっておりまして、
フォルダA
┗フォルダ1
┣画像１
┣画像２
┣画像３
┗フォルダ2
┣画像１
┣画像２
┣画像３
┗フォルダ3
┣画像１
┣画像２
┣画像３
元の「フォルダA」のIDを記入するだけで、
各フォルダにある画像を表示させることは可能なのでしょうか。
（ちなみに2層目のフォルダは1～2000まであります。）
厚かましながら質問させていただきました。
もしよろしければ教えていただけますと幸いです。
よろしくお願いいたします。
ご返信ありがとうございます！！
なるほど分かりました、ではドライブで一度試してみようと思います。
重ねてごめんなさい…
また、画像は下に増えていくのではなく、右の列に増えていくように設定したいと思っております。
何卒よろしくお願いします。
ご連絡ありがとうございます。
1,IDを記載したらすぐに反映されるような仕様に変更することは可能です。
2,子フォルダすべて検索して書き出すことも可能です。
3,画像を右に増えていくことも可能です。
ご希望であれば、
時間があるときにサクッと作ってみたいと思いますが、
それが何時になるのか…笑
ご回答ありがとうございます！
作っていただけるならめちゃくちゃ助かります…！！
メールアドレスを記載いたしますので、よろしければぜひご連絡いただけますと幸いです。