GASでGoogle ドライブ上にある画像のリサイズを行う。

皆さんこんにちは。GMOアドマーケティングのR.Aです。
今回はGoogle ドライブ上にある画像を任意のサイズにリサイズ・トリミングするものを紹介したいと思います。
先日社内にて画像のリサイズを行っているが、量が多く工数がかかるため自動化したいという相談があり、作成いたしました。
現在は、特定のディレクトリにある画像を全て複数サイズにリサイズ・トリミングし、スプレッドシートに保存するGoogle Apps Script（GAS）を活用しております。

今回のリサイズ・トリミングはGAS上で実装したいと思うのですが、GAS単体では画像を修正する事ができないので、ImgAppというライブラリを使用します。

ライブラリの導入

まず加工に必要なImgAppをGASにインストールを行います。ライブラリは以下になります。 https://github.com/tanaikech/ImgApp
ライブラリからスクリプトIDに「1T03nYHRho6XMWYcaumClcWr6ble65mAT8OLJqRFJ5lukPVogAN2NDl-y」を追加し、インストールを行います。するとImgAppが使用できるようになり、画像の加工が可能になりますので一部機能をご説明いたします。

画像のサイズを取得する。

ImgAppのgetSize()メソッドを使用すると対象の画像のサイズを取得します。
例)

function getSize() {
  const fileId = "ファイルID";
  const file_id = DriveApp.getFileById(fileId);
  const imageBlob = file_id.getBlob();

  // getSizeでサイズを取得
  const res = ImgApp.getSize(imageBlob);
}

function getSize() {

const fileId = "ファイルID";

const file_id = DriveApp.getFileById(fileId);

const imageBlob = file_id.getBlob();

// getSizeでサイズを取得

const res = ImgApp.getSize(imageBlob);

}

返却値を参照すると、width、height、filesize、形式が取得できます。

画像をリサイズする。

ImgAppのdoResize()メソッドを使用すると対象の画像のリサイズが行えます。
Google ドライブの画像IDとサイズを渡すと画像が生成され、blobに返却されます。
例)

function doResize() {
  const fileId = "ファイルID";

  // doResizeを使用し、幅を320pxに変更
  const res = ImgApp.doResize(fileId, 320);

  // 新しく作成したファイルをフォルダに保存
  const folderId = "保存先のフォルダID";
  const folder = DriveApp.getFolderById(folderId);
  const new_image = folder.createFile(res.blob.setName("sample"));
}

function doResize() {

const fileId = "ファイルID";

// doResizeを使用し、幅を320pxに変更

const res = ImgApp.doResize(fileId, 320);

// 新しく作成したファイルをフォルダに保存

const folderId = "保存先のフォルダID";

const folder = DriveApp.getFolderById(folderId);

const new_image = folder.createFile(res.blob.setName("sample"));

}

画像をトリミングする。

続いては、editImage()を使用し、画像の一部をトリミングしたいと思います。
必要な情報を以下のようにまとめ、メソッドに渡すと指定した値に基づいてトリミングを行います。
また使用には、DriveAPIとSlidesAPIが必要になるので、インストールを行います。
使用方法

const object = {
  blob: imageBlob, 
  unit: "pixel",
  crop: { t: 50, b: 100, l: 200, r: 100 },
  outputWidth: 800,
};
const blob = ImgApp.editImage(object);

const object = {

blob: imageBlob,

unit: "pixel",

crop: { t: 50, b: 100, l: 200, r: 100 },

outputWidth: 800,

};

const blob = ImgApp.editImage(object);

blob：画像のブロブ。.getBlob()で取得可能。
unit：このメソッドを使用するための単位。pixelおよびpointどちらか記入します。
crop：上下左右のサイズになります。unitが「pixel」の場合、こちらが適用されます。
outputWidth：出力画像の幅のサイズ。unitが「pixel」の場合、こちらが適用されます。

例)

function editImage() {
  const fileId = "ファイルID"

  const file_id = DriveApp.getFileById(fileId);
  const imageBlob = file_id.getBlob();

  const object = {
    blob: imageBlob,
    unit: "pixel",
    crop: { t: 200, b: 100, l: 400, r: 300 },
    outputWidth: 500,
  };
  //ImgAppを使用し、上:200px、下:100px、左:400px、右:300pxをトリミング。幅を500pxに設定。
  const blob = ImgApp.editImage(object);

  // 新しく作成したファイルをフォルダに保存
  const folderId = "保存先のフォルダID";
  const folder = DriveApp.getFolderById(folderId);
  const new_image = folder.createFile(blob.setName("トリミングテスト"));
}

function editImage() {

const fileId = "ファイルID"

const file_id = DriveApp.getFileById(fileId);

const imageBlob = file_id.getBlob();

const object = {

blob: imageBlob,

unit: "pixel",

crop: { t: 200, b: 100, l: 400, r: 300 },

outputWidth: 500,

};

//ImgAppを使用し、上:200px、下:100px、左:400px、右:300pxをトリミング。幅を500pxに設定。

const blob = ImgApp.editImage(object);

// 新しく作成したファイルをフォルダに保存

const folderId = "保存先のフォルダID";

const folder = DriveApp.getFolderById(folderId);

const new_image = folder.createFile(blob.setName("トリミングテスト"));

}

わかりづらいですが、上下左右指定のピクセル数分、トリミングされています。

まとめ

いかがだったでしょうか。本来だったら画像ごとに編集をしなければならない作業を、指定のサイズにする事ができました。
このライブラリを使用すれば、Google ドライブに格納するだけで自動的にリサイズを行うことも可能です。
画像によっていい感じにトリミングという事は難しいですが、弊社の加工はおおよそがセンターを中心にしてリサイズ・トリミングを行うので、かなりの工数削減ができたかなと思います。

R.A

ライブラリの導入

画像のサイズを取得する。

画像をリサイズする。

画像をトリミングする。

まとめ

おすすめ

Railsのタグ機能でN+1問題解消

Professional Scrum Master ⅠとⅡに合格しました

background-imageを活用して、アップする画像を1個で済ませたい