image | nujonoa_blog https://nujonoa.com 人生に役立つデータ集 Mon, 25 Apr 2022 08:56:14 +0000 ja hourly 1 https://wordpress.org/?v=6.8.3 https://nujonoa.com/wp-content/uploads/2019/04/cropped-DSC00976-e1554456145409-32x32.jpg image | nujonoa_blog https://nujonoa.com 32 32 【GAS】フォルダ内の画像をセル内に挿入する方法！ https://nujonoa.com/gas-paste-the-image-in-the-cell/ https://nujonoa.com/gas-paste-the-image-in-the-cell/#respond Mon, 25 Apr 2022 10:50:00 +0000 http://nujonoa.com/?p=13893
  1. 【GAS】フォルダ内の画像一覧表を作るプログラム！
  2. 早速プログラムの紹介！
  3. コード紹介
  4. プログラム内容説明
    1. フォルダの中のファイル一覧を取得
    2. ファイル一覧から情報を抜き出し、配列に代入
    3. setvaluesで書き込み。
  5. プログラムのポイント
  6. まとめ

【GAS】フォルダ内の画像一覧表を作るプログラム！

GASを用いて、

・スプレッドシートにグーグルドライブのファルダ内のファイルの一覧を作る

・さらに、セル内に画像を挿入する！！

プログラムを紹介していきたいと思います！

早速プログラムの紹介！

早速プログラムを紹介していきたいと思います！

今回作成するプログラムは、下のリンクのものとなっており、

・セル「G2」に入力したドライブのIDをもとに、
・ドライブの中のファイル一覧を書き出し、
・画像を表示させていくプログラムになります。

【公開用】image抜き出し
docs.google.com
プログラム例

プログラムを書くのがめんどくさいという方は、ダウンロードしてまずは使用してみてください。

そのままですと閲覧のみ可能になっていますので、
ファイル→コピーを作成で、自分のスプレッドシートにコピーを作成してください。

スプレッドシートをコピーする方法

コード紹介

では、今回使用したコードを紹介したいと思います。
※ダブルクリックでコピーできます。

function getPicID2() {
   
  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();

    if(file.getName().match(/jpg/) ||　file.getName().match(/png/)){
  //ドライブから画像を取得
  var PicID = file.getId()　　　//画像のファイルID
  var blob = DriveApp.getFileById(PicID).getBlob();
 
  //base64に変換
  var c_type = blob.getContentType();
  var base64 = Utilities.base64Encode(blob.getBytes());
  var data = "data:" + c_type + ";base64, " + base64;

  var image = SpreadsheetApp.newCellImage()
                            .setSourceUrl(data)
                            .build();
  }else{
    image=""
  }

    //「名前」「説明」「URL」をそれぞれ格納
    Pic.push([
      file.getName(),
      file.getUrl(),
      file.getId(),
      "=image(\"https://drive.google.com/uc?id="+file.getId()+"\")",
      image
    ]);
  }
 
  
  SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(2,1,Pic.length,Pic[0].length).setValues(Pic)
   
}

/*
参考URL


Google Apps Scriptでスプレッドシートに画像を貼り付ける【GAS】 | 🌴 officeの杜 🥥
年度初めは忙しく、今年度こそこれまで作りためたGASアプリを全公開しようと目論んでいるのですが、GWまでは十分な時間が取れそうにない。そんな時ようの小ネタもいくつか蓄えています。 そんな中、Googleスプレッドシートの機能増強の中で地味な
officeforest.org

*/

プログラム内容説明

ではプログラムの詳細を説明していきましょう。

フォルダの中のファイル一覧を取得

①フォルダを指定して(getFolderbyId)、その中のファイルすべてを指定します(getFiles())。

  var Driveid=  SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(2,7).getValue()
  
  
  // フォルダ内のファイルを一括取得
  var files = DriveApp.getFolderById(Driveid).getFiles();

ファイル一覧から情報を抜き出し、配列に代入

②ファイルの情報を配列に入れていきます。
　・hasNext()でファイルが終わるまで繰り返し、
　・Pic.push=([名前,URL,ID,image関数])の4列の配列を積み重ねていきます。
　・このリンク先を参考に、セル内に画像貼り付けできるデータに変換(blob⇒Base64データ)

  // 配列を宣言
  var Pic = [];
  // 配列に「名前」「URL」「ID」
  while(files.hasNext()) {
    //一括取得したファイルの中から順に一つ取り出す
    var file = files.next();

    if(file.getName().match(/jpg/) ||　file.getName().match(/png/)){
  //ドライブから画像を取得
  var PicID = file.getId()　　　//画像のファイルID
  var blob = DriveApp.getFileById(PicID).getBlob();
 
  //base64に変換
  var c_type = blob.getContentType();
  var base64 = Utilities.base64Encode(blob.getBytes());
  var data = "data:" + c_type + ";base64, " + base64;

  var image = SpreadsheetApp.newCellImage()
                            .setSourceUrl(data)
                            .build();
  }else{
    image=""
  }

    //「名前」「説明」「URL」をそれぞれ格納
    Pic.push([
      file.getName(),
      file.getUrl(),
      file.getId(),
      "=image(\"https://drive.google.com/uc?id="+file.getId()+"\")",
      image
    ]);
  }

setvaluesで書き込み。

③最後にスプレッドシートに書き込んで終わりです。

SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(2,1,Pic.length,Pic[0].length).setValues(Pic)

プログラムのポイント

今回のプログラムのポイントは、

①image関数を使って、セル内に画像を表示させること。

【spreadsheet】image関数！セル内に画像を入れて一気に見栄えアップ！
【spreadsheet】image関数！セル内に画像を入れて一気に見栄えアップ！Excelに対して、スプレッドシートを用いる利点として、・共有しやすい・QUERY関数を使えるので、データベースを作りやすい・グーグル関係(メールなど)と連携...
nujonoa.com
2020.08.11

②数式の中に「”(ダブルクオーテーションマーク)」を使う時は、
　「\”」と宣言しないといけないこと。

      "=image(\"https://drive.google.com/uc?id="+file.getId()+"\")",

③push関数の使い方

    Pic.push([A, B, C, D ]);
【GAS入門】2次元配列の結合方法。unshift,push,concatの使い方
【GAS入門】2次元配列の結合方法。unshift,push,concatの使い方スプレッドシートで、GASを使っていくうえで、非常に重要になるのが・二次元配列を使えるかどうか？です。というのも、20回掛け算する場合、・セル毎に計算　→　4...
nujonoa.com
2020.07.14

です。

あとは、

セル内に画像を入れるためのデータ変換ですが、これはおまじないとして覚えるのがよさそうです。。

まとめ

スプレッドシートを使うと、ドライブと連携して、画像の表示などいろいろなことができます。

ぜひ、自分なりのアレンジをして、かっこいい表を作成してください！

]]> https://nujonoa.com/gas-paste-the-image-in-the-cell/feed/ 0 【GAS】フォルダ内の画像一覧表を作るプログラム！ https://nujonoa.com/how-to-create-a-list-of-images-with-gas/ https://nujonoa.com/how-to-create-a-list-of-images-with-gas/#comments Tue, 11 Aug 2020 12:25:34 +0000 http://nujonoa.com/?p=6701
  1. 【GAS】フォルダ内の画像一覧表を作るプログラム！
  2. 早速プログラムの紹介！
  3. コード紹介
  4. プログラム内容説明
    1. フォルダの中のファイル一覧を取得
    2. ファイル一覧から情報を抜き出し、配列に代入
    3. setvaluesで書き込み。
  5. プログラムのポイント
  6. まとめ

【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関数を使って、セル内に画像を表示させること。

【spreadsheet】image関数！セル内に画像を入れて一気に見栄えアップ！
【spreadsheet】image関数！セル内に画像を入れて一気に見栄えアップ！Excelに対して、スプレッドシートを用いる利点として、・共有しやすい・QUERY関数を使えるので、データベースを作りやすい・グーグル関係(メールなど)と連携...
nujonoa.com
2020.08.11

②数式の中に「”(ダブルクオーテーションマーク)」を使う時は、
　「\”」と宣言しないといけないこと。

      "=image(\"https://drive.google.com/uc?id="+file.getId()+"\")",

③push関数の使い方

    Pic.push([A, B, C, D ]);
【GAS入門】2次元配列の結合方法。unshift,push,concatの使い方
【GAS入門】2次元配列の結合方法。unshift,push,concatの使い方スプレッドシートで、GASを使っていくうえで、非常に重要になるのが・二次元配列を使えるかどうか？です。というのも、20回掛け算する場合、・セル毎に計算　→　4...
nujonoa.com
2020.07.14

です。

これ以外は特に難しいことはしていないと思います。

まとめ

スプレッドシートを使うと、ドライブと連携して、画像の表示などいろいろなことができます。

ぜひ、自分なりのアレンジをして、かっこいい表を作成してください！

]]> https://nujonoa.com/how-to-create-a-list-of-images-with-gas/feed/ 11 【spreadsheet】image関数！セル内に画像を入れて一気に見栄えアップ！ https://nujonoa.com/how-to-use-the-image-function/ https://nujonoa.com/how-to-use-the-image-function/#respond Tue, 11 Aug 2020 04:40:33 +0000 http://nujonoa.com/?p=6692
  1. 【spreadsheet】image関数！セル内に画像を入れて一気に見栄えアップ！
  2. image関数とは？
  3. 関数の使い方は簡単
  4. ドライブの画像を張り付ける。
  5. グーグルドライブのフォルダ内の画像を一覧表にする方法
  6. まとめ

【spreadsheet】image関数！セル内に画像を入れて一気に見栄えアップ！

Excelに対して、スプレッドシートを用いる利点として、

・共有しやすい
・QUERY関数を使えるので、データベースを作りやすい
・グーグル関係(メールなど)と連携できる

ことなどが利点として挙げられると思いますが、

「image関数」

を使うことができることも1つの利点だと思います。

やはり、画像などをふんだんに使った表の方が、見る人の目を引くことができます。
人の目を引くということは、使用してもらえる確率が上がります。

image関数のイメージ

今回は、そんなimage関数について解説していきたいと思います。

image関数とは？

image関数とは、先ほどもご紹介した通り、
下記のように、セルの中に画像を挿入するテクニックになります。

image関数のイメージ

え、そんなのExcelでもできるじゃん。と思った人もいるかと思いますが、

・googleドライブに保存した画像を表示できる。
　※ファイル自体が重くならない。
・セルの大きさに合わせて画像の大きさが調整できる。

ことが利点となります。

関数の使い方は簡単

関数の使い方は非常に簡単で、セルに

=image(URL,選択モード)

を入力するだけです。

例えば、グーグルの画像アドレスをコピーして、urlの部分に入力すると、

下記のように、簡単にスプレッドシートのセル内に画像を張り付けることができます。

画像の大きさは、
①自動で倍率を変えてくれるモード
②セルの大きさに引き延ばしてくれるモード。
③オリジナルサイズで張り付けるモード
④カスタムサイズで張り付けるモード
の4つです。

ドライブの画像を張り付ける。

image関数を使うタイミングで一番多いのは、
グーグルドライブに保存した画像をセル内に表示したい場合だと思います。

そのためには

=image(URL,選択モード)

の URL の部分にドライブの画像のURLを入れる必要があるのですが、
この作業に、若干手間がかかります。

共有可能なリンクを取得

ドライブで共有可能なリンクを取得すると、

[ https://drive.google.com/file/d/画像id/view?usp=sharing ]

このようなURLが表示されると思いますが、このまま数式に挿入しても、残念ながら表示されません。

どうやら、画像に直接アクセスするリンクが必要なようで、

https://drive.google.com/file/d/画像id/view?usp=sharing
↓
https://drive.google.com/uc?id=画像id

に変換してあげる必要があります。

グーグルドライブのフォルダ内の画像を一覧表にする方法

グーグルドライブのフォルダ内の画像一覧表を作成するための
GASを作りましたので、使ってみてください。

ボタン

そのままですと閲覧のみ可能になっていますので、
ファイル→コピーを作成で、自分のスプレッドシートにコピーを作成してください。

スプレッドシートをコピーする方法

ドライブのフォルダのIDを入力して実行していただくと画像一覧を作成できると思います。

まとめ

imge画像を使って表をまとめると非常に見栄えの良い表を作成することができます。

ぜひ使ってみてください！！

]]> https://nujonoa.com/how-to-use-the-image-function/feed/ 0