【番外編】AppGyverからGoogleドライブ上の画像を呼び出す方法

2024年6月9日 21:36

沼にハマりました。

今回は、「AppGyverからGoogleドライブ上の画像を呼び出す方法」について沼にハマった点を含めて紹介したいと思います。

・やりたかったこと

AppGyverの仕様として、画像のURLを指定して、Imageコンポーネントのソースとして接続すると、画面上にURLの画像を出力することができます。
（実際の接続方法は、今後のnoteで紹介予定です）

私がやりたかったことは、

4. AppGyverからスプレッドシートを呼び出し、特定の画像を表示させる

以上です。

私は、

「そもそも、1 から 3 はできることが分かっているので、簡単にできる」

そう思ってました・・・

ひとまず、1から説明していきたいと思います。

これは、難しくありません。

Googleアカウントを持っていれば、マイドライブに画像を保存していけばいいだけです。

これも、難しくはないです。

①マイドライブ上のリンクを取得したい画像を選択し、リンクボタンを押すことで画像の共有リンクが取得できます。

注意点としては、リンクの共有先を「リンクを知っている全員」にしておくことです。

②その後、Googleスプレッドシート上にペーストする

これも、できました。（前述の記事を参照）

なぜか、これができません。

正しいリンクに接続したはずなのに、画像の破損表示になるのです。

リンク先を変えてみたり、
画像の画質を落としてみたり、
画像の保存形式を変えてみたりといろいろ試しましたが、

なぜできないか分からず、私はここで沼にハマりました。

いろいろ調べていくうちに、分かったことがあります。

それは、今のリンクのURLは画像への直接のURLではないということです。

Googleドライブから取得できる以下のURL

・https://drive.google.com/file/d/[ファイルID]/view?usp=drive_link
（ファイルIDは画像によって変化します）

は画像への直接のリンクではないため、AppGyverでも読み込めなかったということでした。
（Googleドライブへの共有リンクであり、画像への直接リンクではない）

では、どうしたのかというと、ChatGPTにいろいろ質問して、URLを以下のように変えました。

ただし、注意点としては、lh3.google.com形式のURLは公式に文書化されておらず、動作が保証されていない場合があります。

ChatGPTからの引用文

そうすると、画面上で表示できるようになりました。

今回はAppGyverというよりもGoogleドライブのコツの紹介となりました。

直接リンクの貼り付けに関しては、ChatGPTも言っているように、動作が保証されていませんので、自己責任でお願いします。

以上となります。

今回もありがとうございました！

この記事が気に入ったらサポートをしてみませんか？