[GAS][UI]画像を表示するには: 逆引きGoogle Apps Script

このページでは、単純に画像を表示する方法を紹介している。なお、画像はパブリックである必要があり、限定公開の画像（例えば、Googleドライブにアップロードして、共有設定を「限定公開」にしている場合等）は表示することができない。

▼サンプルスクリプト

function doGet() {
  var app   = UiApp.createApplication();
  var label = app.createLabel('▼画像を表示しています');
  var image = app.createImage();
  
  //画像の設定
  image.setUrl('http://www.bmoo.net/xxxxxx.jpg');
  image.setWidth('470px');
  
  app.add(label).add(image);
  return app;
  
}

構文

{UiAppインスタンス}.createImage()

{UiAppインスタンス}.createImage(url)

{UiAppインスタンス}.createImage(url, left, top, width, height)

{string} url

表示する画像のUrl。

{int} left, top, width, height

画像の表示範囲を設定することができる。left, topの位置を起点にして、幅(width)、高さ(height)を指定する。例えば今回のサンプルで、250, 0, 200, 500を指定すると、画像の左端から250px、最上端を起点にし、幅200px、高さ500pxの、手の部分のみを抽出して表示することができる。

戻り値

Class Image

生成したImageウィジェット

注意点

冒頭でも述べた通り、表示する画像はウェブに公開されていなければならない。というのも、パラメータに指定したUrlの画像が画面にそのまま表示されているわけではなく、一旦Googleのイメージプロキシが画像を読み込んで、プロキシが再生成した画像が表示されており、プロキシが画像に到達できる必要があるためだ。

わざわざこの方法がとられているのは、マルウェアが仕込まれた画像をユーザーにダウンロードされるのを防ぐというセキュリティ対策のため。ためしに画像を表示させてみて、右クリックで画像をダウンロードしてみて欲しい。「clear.cache.gif」という、1x1pxの画像がダウンロードされるはずだ。

関連記事

この投稿は 2012 年 7 月 14 日 土曜日 12:34 AM に Google Apps Script カテゴリーに公開されました。