Googleスプレッドシート 画像にまつわるエトセトラ 4 （完全版：スプレッドシート内の画像を一括保存したい！を解決する）
いままで何度か Googleスプレッドシートの 画像ネタをnoteで取り上げてきました。（マガジンにまとめています）
今回は「Googleスプレッドシート内の画像を保存したい！」を解決する 集大成 noteです。（若干 過去ネタの焼き直し、使いまわし感も・・・）
今まで取り出すのは難しい（無理じゃね？）と書いてきた、IMAGE関数 の値コピペ画像 を含め、セル内画像、セル上画像 に関わらず、全ての画像URLを取得。さらに一括保存！
これをやってみましょう！
前回は Googleスプレッドシートをオーナーであっても閲覧モードで開くことが出来る Googleドライブのロック機能について書きました。
スプレッドシート内 全画像保存のゴール
今回はここまでたどり着きませんがｗ とりあえず目指すゴールです。
たとえば、このようなセル上画像やセル内画像、IMAGE関数による画像、それを値コピペした画像（隠れIMAGE関数）などがあった場合、
画像を保存したい対象のスプレッドシートのIDと保存先の Googleドライブ上のフォルダのIDを指定して
GASを実行するだけで
このようにドライブの指定フォルダにスプレッドシート内の画像が保存される。
保存された画像は、いずれも元画像と同じサイズ（同じと思われるもの）です。
今までは取り出すことを諦めていた、スプレッドシート上の画像データをなんとか取得したい！という場合に役立つんじゃないでしょうか？
スプレッドシート内の画像 4タイプ と取得方法
Googleスプレッドシート内で扱う画像は 大きく4つのタイプに分かれます。
セル上画像（挿入した画像）
セル内画像（挿入した画像）
IMAGE関数でセル内に表示させた画像
IMAGE関数を値コピペしたセル内画像（隠れIMAGE関数）
これ以外に 図形描画に貼り付けて挿入した画像もありますが、これは シート上では 図形という扱いになります。
図形描画 機能については 過去noteで触れています。
1a. セル上画像（挿入した画像）のダウンロードなら 拡張機能で
1番シンプルな セルの上に存在する画像。昔ながらの Excelの画像もこれですね。
これが一番保存が簡単ですし、元データのサイズそのままで保存が出来ます。
てっとり早い方法としては、Chromeの拡張機能で Image Downloader系 を使うのがおススメです。
幾つか似たような拡張機能はありますが、今回は人気の高い Imageye を使ってみましょう。
これは Chromeに追加して 対象のスプレッドシートのシートを開いた状態で
Chromeのアドレスバー右の拡張機能アイコンから Imageye を起動するだけで
このように 挿入したセル上画像を 縮尺を変更する前の元データの形で取得することが出来ます。
この際、アイコン等の余計な画像も一緒に表示されちゃうので
サイドバー上部の URLということに
https://docs
と入れることで 余計な画像を排除して、セル上に挿入した画像だけに絞り込みできます。
絞り込みできたら 上部の Select all ボタンをクリックして、全ての画像が選択された状態としてから
Downloadボタンを押せば、スプレッドシート名のフォルダが生成され、その中に画像ファイルが一括保存されます。
これは便利ですね。
ただし、このツールを使った場合は 他のシートの画像も合わせて取得してしまうことがあります。
特定のシートだけを対象としたい場合は、一度シートを新規の別スプレッドシートにコピーして、そこから取得するのが良いかも。
1b. どうしても拡張機能を入れるの難しい場合は セル上画像はデベロッパーツールで取得
会社のセキュリティ上 拡張機能が使えなかったり、1,2枚の画像を保存するだけなんで拡張機能を追加するのはちょっと・・・。という場合は、デベロッパーツールを使いましょう。
Windows PCで Chromeを利用して スプレッドシートを表示さいている場合は F12キーでサイドにデベロッパーツールを出現させて
この場所をクリックすると色が変わるので
この状態で保存したい画像のところにカーソルを当てると画像だけ反転した状態になるので、ここでクリック
そうすると、デベロッパーツールでこの画像部分のコードがフォーカスされた状態になります。
この中の
blob:https://docs.google.com/＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
という部分が、さきほど拡張機能 Imageyeで取得できたものです。
ここで右クリックして Open in new tab を選択すれば
別タブでフルサイズの画像が開くので、あとは名前を付けて保存でOK
1，2枚程度の保存なら 拡張機能がなくても簡単ですね。
2. セル内画像の保存は 編集履歴から
では、セル上画像ではなく セル内に画像があった場合はどうなるか？
残念ながら Image Downloader系の拡張機能では、セル内画像を取得できません。
セル内画像のダウンロード方法として、もっとも簡単なものが
右クリック ＞ 編集履歴を表示
を使う方法です。
右クリックの「編集履歴を表示」はセル単位で 誰が、いつ、そのセルをどうのように編集したかを確認できる 非常に便利な機能です。
※あくまでもセル内の入力に関する情報で 背景色や罫線、文字の色などが追える機能ではありません
これを セル内画像が入ったセルで使うと
このように
追加しました: "画像"
と表示され、「画像」という文字がハイパーリンクになっています。
この「画像」をクリックすると
別タブでフルサイズの画像が開くので、あとは名前を付けて保存でOK。
数枚程度の保存であれば、これが一番簡単です。
大量にあるセル内画像を保存したいんで、もっと楽にやる方法が知りたい！って人は少々お待ちください。
後ほど複数画像への対応方法を紹介しています。
3a. IMAGE関数の場合は元のURLから保存が一番
同じセル内画像でもIMAGE関数を使った表示の場合は、IMAGE関数内で利用している画像URLから元画像を取得するのがベストです。
たとえば
=ARRAYFORMULA(IMAGE(A2:A5))
こんな式でURL部分を別セルから引っ張ってきている場合は簡単ですね。
A2:A5の画像URLが入っているので
セル範囲を選択状態として 右クリックから
セルで他の操作項目を表示 ＞ リンクを開く
で一気に開いて 画像を保存してく方法があります。
URLがリンクになっていない場合は、検索と置換を使って h を h に置換することで ハイパーリンクさせるテクニックが使えます。
もし 画像URLがIMEAG関数内に直接記述されている場合は
=INDEX(SPLIT(FORMULATEXT(A1),""""),,2)
こんな式で取り出す方法があります。
A1にIMAGE関数の式が入っているとしたら、まずFORMULATEXT関数で セル内の数式をテキストとして取得。
これを IMAGE関数内の画像URL前後にある "（ダブルクォート）を区切り文字として SPLIT関数で区切りたいんですが、ダブルクォートを2つ繋げることでエスケープさせる必要があります。
これに前後のダブルクォートが必要になるので " の4連発ですね。
で区切った中の2番目をINDEX関数で取得で URLのみを出力できます。この時自動でURLはハイパーリンク化します。
INDEXにはARRAYFORMULAと同じ効果があるんで、配列指定出来そうに見えますが、
残念ながら FORMULATEXT関数が 配列非対応（スピらない）関数である為、これは無理です。
式をコピペで対応しましょう。
3b. 開いたタブの画像を保存するChrome拡張機能
URLから複数画像が一気に開けても、いちいつ保存するのが面倒。って場合は、昔懐かしい Irvine https://forest.watch.impress.co.jp/library/software/irvine/
などのダウンローダーを使う方法もありますが、こちらもChrome拡張機能で対応できます。
先ほどの スプレッドシートの URLを一括で開く機能 + Tab Save で
タブで開いた複数画像の一括保存が可能です。
これも便利ですね。
4. 便利だけど厄介な IMAGE関数を値コピペ画像（隠れIMAGE関数）はどうやっても画像を保存できない？
Googleスプレッドシートの画像は同じスプレッドシート内であれば 別シートへのコピペは可能です。
しかし、別スプレッドシートへの画像コピペが出来ません。
この制限を回避する 唯一の方法が、 IMAGE関数を値貼付けした セル内画像です。
これは非常に便利なんですが、このIMAGE関数値コピペ画像はちょっと扱いが厄介で、元の画像URLがわからなくなるのと、元の画像URLが死亡（停止）したら IMAGE関数による画像と同じように表示されなくなります。
当然 セル内なので、Imageyesでも 取得ができません。
セル内画像が IMAGE関数値コピペ画像かどうか？の見分け方としては
■IMAGE関数 値コピペ画像の見分け方
・右クリックメニューで 「画像」の項目が表示されない
・セルを選択した際、数式バーに何も表示されない
この2点となります。
ちなみに IMAGE関数 値コピペ画像ですが、
編集履歴を表示で 出てくる「画像」 の文字は リンクのように見えてリンクではないので、クリックしても画像が開けません。
この為、以前の noteでは IMAGE関数値コピペの画像は、取り出すことは出来ないと書いていました。
しかし、この画像を取り出す方法があったので、今回その方法を紹介します！！
プレビュー機能+デベロッパーツールを使って セル内画像のURLを取得する
その方法とは Googleスプレッドシートのプレビューを使う方法です。
プレビューに切り替えるとデベロッパーツールでセル内画像を選択できる！
GoogleスプレッドシートのURLは
https://docs.google.com/spreadsheets/d/【スプレッドシートID】/edit?gid=【シートID】#gid=【シートID】
このような構成になっています。
このURLの edit? 部分を preview? に変えることで
通常のスプレッドシートの画面とは違う プレビュー表示でスプレッドシートを開くことができます。
このプレビュー状態で デベロッパーツールを立ち上げると、
取り出すことが出来ないと思われた、IMAGE関数を値貼付けした画像のURLが取得できます。
ただし、このURLをそのまま開くと
こんな感じのセルに合わせたサイズに縮小された画像となってしまいます。
しかし、ここで諦めてしまってはいけません！ここからフルサイズの画像を取りに行きます。
このちょー長い画像URLを確認すると
こんな感じでサイズ指定のパラメーターのような記述があります。
もしや、これを削除すれば！
サイズの大きい画像が取得出来ました。
ただしこれは元画像ではありません。まだ 縮小された画像なんです。
プレビュー + デベロッパーツールを使えば、基本的にはスプレッドシートの4タイプの画像全て取得することが可能です。
ただし、同じように取得できたかに見えるセル内画像でも、URLやサイズ指定のパラメーターのあるなし、取得できる画像のサイズ、それぞれ違いがあるんです。
この違い理解すると、プレビュー + デベロッパーツール で全ての画像パターンで元サイズの画像を取得できます！！
1. セル上画像をプレビュー＋デベロッパーツールで取得する
セル上画像のプレビュー状態のURLは
https://lh7-rt.googleusercontent.com/sheetsz/【長い文字列】?key=【文字列】
このようになっています。
シート上で縮尺を変更していた場合でも、URLにサイズを指定するパラメーターはありません。
このURLの画像を保存したものを オリジナル、Imageyeで取得した画像と比較すると
元の画像に比べるとファイルサイズが少し小さくなっているので、なんらかの情報は失われているようですが、Imageyeで取得した画像とは完全に同じものです。
画像サイズは同一であり、オリジナルと同じ画像を取得できていると言ってよいでしょう。
2. セル内画像（挿入）をプレビュー+デベロッパーツールで取得する
画像ファイルを挿入したセル内画像の場合は
https://lh7-rt.googleusercontent.com/sheetsz/【長い文字列】=w150-h89?key=【文字列】
このようなURLになっています。
=w150-h89
の数値はケースによって違ってくると思われますが、これはまさに画像の幅と高さを指定しているパラメーターですね。
このURLで画像を開いたり保存すると非常に小さいサイズとなってしまいますが、このパラーメーター部分を削除すれば
大きいサイズの画像を取得できます。
これを保存して詳細を見ると
元画像と同じサイズ、Imageye、プレビュー経由で取得した セル上画像と同じものとなっています。
セル内画像の場合は URLのパラメーター削除でOKってことですね。
3.セル内画像（IMAGE関数）をプレビュー＋デベロッパーツールで取得する
IMAGE関数のセル内画像は、これまでの画像を直接シートに挿入（またはペースト）した セル上、セル内画像と違って URLが
https://lh3.googleusercontent.com/docsubipk/【とんでもなく長い文字列】=s150-w150-h89
このような構成になっています。
ただし IMAGE関数は 第2引数で 画像の表示モードを指定できます。
IMAGE(URL, [モード], [高さ], [幅])
モード - [省略可 - デフォルトは 1] - 画像のサイズモードです。
1 は、アスペクト比を維持しながらセル内に収まるように
画像のサイズを変更します。
2 は、アスペクト比を無視してセル内に収まるように
画像を引き伸ばすか縮めます。
3 は、画像を元のサイズのままにします。
その場合、画像がトリミングされることがあります。
4 は、カスタムサイズに変更できます。
ここで アスペクト比（縦横のバランス）を無視した 2 や 4 のモードを使った場合
このように サイズ指定のパラーメーターの末尾に -s が付きます。これがアスペクト比無視の指定のようで
この部分を削除すると
アスペクト比が保持された状態に戻ります。
じゃあ、とりあえずURL末尾の
=s（数字）-w（数字）-h（数字）または
=s（数字）-w（数字）-h（数字）-s
このパラメーター部分を削除すれば、セル内画像挿入の時と同じように元画像が取得できるのでは？
と考えますが、これもうまくいきません。
末尾を削除することで大きい画像は取得できますが、これは保存して確認すると
やや縮小された画像であることがわかります。
どうやら IMAGE関数経由の画像は、幅または高さの大きい方を上限 512ピクセルに制限されているようです。
じゃあ、元画像の取得を諦めて 512ピクセルの縮小画像で妥協するしかないのか？
実は パラメーターを削除ではなく 数値をいじることで 元画像を取り出せます。
=s（数字）-w（数字）-h（数字）または
=s（数字）-w（数字）-h（数字）-s
この部分を
=s10000
※数字は十分に大きいものであればなんでもOK
と置き換えると
元画像と同じサイズの画像を取得できます。
サイズも 大きさも同じですね。
画像類似度チェッカーさんで計測しても
100%の一致という結果になっています。
IMAGE関数の元画像を プレビュー表示から取得できました。
ポイントは パラメーターを削除ではなく 書き換える です！
4. IAMGE関数 値コピペ画像を プレビュー＋デベロッパーツールで取得する
この手法はそのまんま、IMAGE関数を値コピペした画像に対しても使えます。
これまで元のURLもわからず、どうやっても元画像を取り出すことは不可能？と思っていた IMAGE関数 値コピペ画像も
プレビュー + デベロッパーツール + URLパラメーター改変
このコンボで元画像を取り出して保存できるってことです。
手順は IMAGE関数の画像の時と一緒です。流れをおさらいしましょう。
スプレッドシートのURLを変更してプレビューモードにしてから、デベロッパーツールを起動。
保存したい IMAGE関数値コピペ画像のURLをクリック、別タブで画像が開くので URL末尾の =s・・・ を =s10000 に変更 して 画像を開きなおす。
オリジナルサイズの画像が表示されるので、これを保存。
オリジナルと同じサイズの画像ですね。
これで スプレッドシートにある4タイプの画像、全てをプレビューから取得できました。
プレビュー＋デベロッパーツール による Googleスプレッドシートの画像取得まとめ
まとめると
画像を直接挿入（コピペ）した セル上画像、セル内画像のURLは
https://lh7-rt.googleusercontent.com/sheetsz/・・・
となっている。
セル上画像ならそのまま保存でOKだが、セル内画像の場合は URLの途中（?key の前にある）
https://lh7-rt.googleusercontent.com/sheetsz/【長い文字列】=【パラメーター】?key=【文字列】
=【パラメーター】 の部分を削除したURLが元画像のURL
一方 IMAGE関数の画像やIMAGE関数を値コピペした画像のURLは
https://lh3.googleusercontent.com/docsubipk/【とんでもなく長い文字列】=【パラメーター】
このようになっており
末尾の =【パラメーター】 を 削除ではなく、 =s10000 のように十分に大きい数値に改変することで、元画像を取得できる
この 数字は大きければいいというものではなく 100000（10万）とかにするとエラーになるので注意です。 1万あたりが現実的なところでしょうか。
また、プレビューから取得できる 画像 URLはいずれも
ログインなしで誰でもひらける特殊なURLです。
取扱いには十分注意しましょう。
シート関数をフル活用して 画像URLの取得、パラメーター削除・変更をやってみよう！
URLの取得方法はわかりましたが、一つ一つ プレビューモードから 画像のURLを取得してパラメーターに対処するのは面倒ですよね。
上で書いた4つのパターンの ロジックを使って、シート関数で数式を作って シート内の画像の元画像URLを取得してみましょう！
デベロッパーツールから 画像URLが入った部分を取得する
では、全画像のURL部分が入った ソースコードををどうやって取得するか？をまず見ていきましょう。
このような 様々なパターンの画像が挿入されたシートがあったとして、
URLの edit? 部分を preview? に置き換えてプレビューモードで開き、デベロッパーツールを起動するんですが
一つ目の body ではなく
その中にもう1回 html タグが登場して bodyが出てくるので、そっちを取得します。
取得の方法は コードの bodyタグの行を選択すると ・・・が出てくるので、そこを右クリック して、 Copy > Copy element を選択で OK
適当な 新しいスプレッドシートを1つ立ち上げて A1セルの中に（A1セルに入るように）
こんな感じで貼り付けましょう。
※データ量の多いシートだと1セルに入る上限を超えてしまうかもしれません。その際は分割を。
これで準備はOK。後は URLを取り出すだけですね。
今回はお題にはしませんが、この下を見ずに先に自力で数式作成に挑戦してみてもOKです！！
SPLIT関数で分割する
まず 画像URL部分だけを取り出したいので、一旦分割しちゃいましょう。
・URLの前後は ダブルクォート（ " ）で囲われている
・URL内には ダブルクォートは登場しない
これらの条件があるので、ダブルクォートを区切り文字として分割するのがよいでしょう。
=TOCOL(SPLIT(A1,""""))
上でも登場した ダブルクォートのエスケープですね。
そのままだと膨大な数が横に展開されてしまうので、TOCOLで縦方向への展開とします。
早速幾つか 画像URLっぽいものがSPLITで分割されたことでハイパーリンクになってますね。
LETで 変数化してから FILTER関数 + REGEXMATCHで絞り込む
式の中で何度か =TOCOL(SPLIT(A1,"""")) の結果を使いたいので、これを LET関数で適当な変数 x と置きます。
で、画像URLだけに絞り込みたいので、条件を試しに httpsから始まるとしてみましょう。
REGEXMATCH関数を使うと簡単です。
「https から始まる」は "^https" と記述すればOK
=LET(x,TOCOL(SPLIT(A1,"""")),FILTER(x,REGEXMATCH(x,"^https")))
画像以外には他に httpsで始まるものは無いようで、無事画像URLだけ に絞り込み出来ました。
※シート上に図形などがある場合は、他のhttps要素が含まれる可能性があります。
URLのパラメーターへ対処する
画像のURLは
https://lh7（挿入された系）
か
https://lh3（IMAGE関数系）
に分類される、つまり先頭から11番目の文字が "7" か "3" で処理を分岐させれば良いとなります。
11番目の文字を取り出すのは MID関数が良いでしょう。
※ MID関数で取り出した数字は 文字列扱いになることに注意
今回は 7 と 3 以外のパターンは無いんで 7であるか否かで分岐しちゃいましょう。
=LET(x,TOCOL(SPLIT(A1,"""")),
FILTER(IF(MID(x,11,1)="7", 真の時の式, 偽の時の式),
REGEXMATCH(x,"^https")))
こんな風にすれば良いですね。
FILTER内で処理すれば 自動で配列処理効果が付与されるので、ARRAYFORMULAいらずです。
7の時は セル上画像なら そのまま変更なし、セル内画像の場合は
https://lh7-rt.googleusercontent.com/sheetsz/【長い文字列】=【パラメーター】?key=【文字列】
このような URLになるので =【パラメーター】? 部分を ? に置換してあげれば良いってことで
REGEXREPLACE(x,"=.+?\?","?")
正規表現を使える REGEXREPLACE関数の出番です。
ちょっとわかりにくいですが、?は正規表現内で特別な意味合いを持つので、文字列としての?は \? で表しています。
※ \ はエスケープを意味します
第2引数の方は正規表現ではないので エスケープ不要で "?" でOK。
つまり上の式は
"=.+?\?" ・・・ =から始まって最初の?までの文字列があったら
"?" ・・・ ? その部分を ? に置換する
という式です。
もう一方の 7出ない時は 3のケースなので、IMAGE関数かIMAGE関数の値コピペ画像のURL
https://lh3.googleusercontent.com/docsubipk/【とんでもなく長い文字列】=【パラメーター】
こちらのパターンなので、末尾の =【パラメーター】 を =s10000 に置換でOKですね。
式としては
REGEXREPLACE(x,"=.+$","=s10000")
このようになります。
【完全版】Googleスプレッドシート シート内 全元画像URL取得式
これらを組み合わせると
=LET(x,TOCOL(SPLIT(A1,"""")),
FILTER(IF(MID(x,11,1)="7",
REGEXREPLACE(x,"=.+?\?","?"),
REGEXREPLACE(x,"=.+$","=s10000")),
REGEXMATCH(x,"^https")))
こんな式になります。
Googleスプレッドシートの プレビューのHTMLソースから 元画像のURLを取り出す式 完成です！
インデントつけると こう。
=LET(
x,TOCOL(SPLIT(A1,"""")),
FILTER(
IF(MID(x,11,1)="7",
REGEXREPLACE(x,"=.+?\?","?"),
REGEXREPLACE(x,"=.+$","=s10000")
),
REGEXMATCH(x,"^https")
)
)
結果の画像URLはハイパーリンクになってるんで、一括で開くことができます。
一括で選択したセルのハイパーリンクを開く ショートカット Alt + Enter でいってみましょう。
このようにフルサイズ？の画像を表示できました～。
もちろん 先ほど紹介した 拡張機能 Tab Save でこれらの開いたタブの画像を丸っと一気にダウンロードできちゃいます。
ちなみに Tab Saveは鉛筆マークを押すことで 直接 URLを貼付け出来る状態になるので、タブで開かずにそのままURLをコピー貼り付けでもOK。
このように さくっと一括保存出来ちゃいます。
オリジナルとサイズも一致しています。
とりあえず ソース取得のところは手作業ですが、数式と拡張機能で Googleスプレッドシートの 元画像の一括保存が実現できました。
注意点として、
https://lh3.googleusercontent.com/docsubipk/
このタイプのURLは変動？するようです。
URLを取得してからしばらく時間経過すると、開けなくなる（画像が保存できない）ことがあるので注意しましょう。鮮度が命！
結論：Googleスプレッドシート内の 画像は フルサイズを 保存できる
と思う・・・。としておきましょうか。
もしかしたら漏れているパターンもあるかもしれませんので。
とりあえず幾つかの方法がありますが、GASを使わずに特定シートの様々なパターンの画像を 一括保存する手順としては
スプレッドシートの URL の edit? 部分を preview? に変更して プレビュー表示
F12キーで デベロッパーモードを立ち上げる（Chrome）
HTMLのソースから 2個目のbody部分を Copy element で取得
コピーしたソースコードを A1セルに貼り付け
この式で画像URLを元サイズに変換して取得
=LET( x,TOCOL(SPLIT(A1,"""")), FILTER( IF(MID(x,11,1)="7", REGEXREPLACE(x,"=.+?\?","?"), REGEXREPLACE(x,"=.+$","=s10000") ), REGEXMATCH(x,"^https") ) )拡張機能 Tab Saveで一括保存
こんな流れです。
これで セル内画像を蓄積した スプレッドシートが、さらに有効活用できそうですね！
次回、GASを使ってさらに自動化して スプレッドシートの複数シートの複数画像を丸っと Googleドライブに保存！ を・・・やるかもしれないし、違うネタを先にやるかもしれません。って感じです。
※利用させていただいてる画像は いらすとやさんのONE PICEのイラストです。活用させていただいております。