Zenn
💭

Googleスライドで作成したプレゼンテーションに含まれるスライド画像のURL一覧を取得する

2021/09/30に公開
GAS
#
googleslides
tech

Googleスライドで作成したプレゼンテーションに含まれるスライド画像のURL一覧を取得し、JSON形式で取得したいとします。スライドの画像URLだけ取得しておいて、表示するためのビューは自分で作りたいというような場合を想定しています。

ここでは、Google Apps Script（以下、GAS）を用いてJSON APIを作ってみます。

スライドのURLを取得する方法

Google Apps ScriptからGoogleスライドを操作できるAPIがあります（Class SlidesApp  |  Apps Script  |  Google Developers）。しかし、このAPIではスライドの画像URLそのものを取得する方法はないようでした。

そこで、スライドをpng画像としてエクスポートするURLを自分で作ってやることで、スライド画像のURLに換えたいと思います。以下のようなURLを作ってやると、スライドをpng画像としてエクスポートするURLを作れます。

"https://docs.google.com/presentation/d/" +
presentation.getId()                      +
"/export/png?pageid="                     +
slide.getObjectId();

上記コード片に含まれるpresentationやslideについては、後述します。

スライドの画像URL一覧を取得するGASスクリプト

以下に示すような簡単なスクリプトを、GAS上に作成しました。?url=プレゼンテーションのURLというパラメタを受け取り、そのURLが示すGoogleスライドのプレゼテーションに含まれるスライド画像のURL一覧をJSON形式で返すAPIとして動作します。

このスクリプトの前提として、パラメタとしてわたすプレゼンテーションは、公開状態になっている必要があります。

また、GASのスクリプトをWebアプリとして公開する方法については、別途いろんなところで書かれているので、そちらをご参照ください。

function doGet(e) {
  var url = e.parameters.url;
  var presentation = getPresentationFor(url);
  var result;

  if (presentation) {
    var slides = presentation.getSlides().map(function(slide) {
      return getSlideUrlFor(presentation, slide);
    });

    result = {
      error: false,
      title: presentation.getName(),
      url: url[0],
      slides: slides
    };
  } else {
    result = {
      error: true,
      presentation: undefined
    }
  }

  return ContentService.createTextOutput(JSON.stringify(result))
                       .setMimeType(ContentService.MimeType.JSON);
}

function getPresentationFor(url) {
  var presentation;

  try {
    presentation = SlidesApp.openByUrl(url);
  } catch(e) {}

  return presentation;
}

function getSlideUrlFor(presentation, slide) {
  var url = "https://docs.google.com/presentation/d/" +
            presentation.getId()                      +
            "/export/png?pageid="                     +
            slide.getObjectId(); 

  return url;
}

スライド画像URL一覧APIの動作確認

「私が所属する業界における最近10〜20年間における最大のイノベーション」という公開スライドを例に、APIの動作確認をしてみましょう。

$ curl -s -L "https://script.google.com/macros/s/AKfycby1lq2umAu34LkpMQJ6ncqF_8Of-vUgD7QngAVCuo2gQ9gfYIw4zMRW7ygc3hhl4uA4yg/exec?url=https://docs.google.com/presentation/d/1nwLrZzuXC_CWC42IgRl0QnNq5xsAc83gakgY2RHu3v8/edit" | jq
{
  "error": false,
  "title": "私が所属する業界における最近10〜20年間における最大のイノベーション",
  "url": "https://docs.google.com/presentation/d/1nwLrZzuXC_CWC42IgRl0QnNq5xsAc83gakgY2RHu3v8/edit",
  "slides": [
    "https://docs.google.com/presentation/d/1nwLrZzuXC_CWC42IgRl0QnNq5xsAc83gakgY2RHu3v8/export/png?pageid=g8ba55efc7c_0_1",
    "https://docs.google.com/presentation/d/1nwLrZzuXC_CWC42IgRl0QnNq5xsAc83gakgY2RHu3v8/export/png?pageid=g8ba55efc7c_0_8",
    "https://docs.google.com/presentation/d/1nwLrZzuXC_CWC42IgRl0QnNq5xsAc83gakgY2RHu3v8/export/png?pageid=g8ba55efc7c_0_107",
    "https://docs.google.com/presentation/d/1nwLrZzuXC_CWC42IgRl0QnNq5xsAc83gakgY2RHu3v8/export/png?pageid=g8ba55efc7c_0_22",
    "https://docs.google.com/presentation/d/1nwLrZzuXC_CWC42IgRl0QnNq5xsAc83gakgY2RHu3v8/export/png?pageid=g8ba55efc7c_0_34",
    "https://docs.google.com/presentation/d/1nwLrZzuXC_CWC42IgRl0QnNq5xsAc83gakgY2RHu3v8/export/png?pageid=g8ba55efc7c_0_51",
    "https://docs.google.com/presentation/d/1nwLrZzuXC_CWC42IgRl0QnNq5xsAc83gakgY2RHu3v8/export/png?pageid=g8ba55efc7c_0_102",
    "https://docs.google.com/presentation/d/1nwLrZzuXC_CWC42IgRl0QnNq5xsAc83gakgY2RHu3v8/export/png?pageid=g8ba55efc7c_0_181",
    "https://docs.google.com/presentation/d/1nwLrZzuXC_CWC42IgRl0QnNq5xsAc83gakgY2RHu3v8/export/png?pageid=g8ba55efc7c_0_123",
    "https://docs.google.com/presentation/d/1nwLrZzuXC_CWC42IgRl0QnNq5xsAc83gakgY2RHu3v8/export/png?pageid=g8ba55efc7c_0_149"
  ]
}

ちゃんと取得できているようですね。レスポンスには、URLだけでなく、ついでにプレゼンテーションのタイトルも含めてみるようにしました。

Discussion