GoogleスライドでDALL-E3の画像生成を実行する方法【テンプレート公開】

2023年11月30日2023年12月3日

OpenAIが提供する画像生成AIのDALL-E3は、プロンプトに応じた高精度・高画質な画像を生成できます。

DALL-E3を活用したいツールの１つがGoogleスライドですが、現時点でDALL-E3のモデルで画像生成できるアドオンはありません。

そこで、GoogleスライドのメニューからDALL-E3による画像生成を実行可能にするスクリプトを用意しました。

DALL-E3実行のためのOpenAIのAPIキーがあれば誰でも利用可能なので、導入方法を説明します。

※予めDALL-E3を利用できるようスクリプトをセットしたGoogleスライドのテンプレートも公開しています。

1. 高性能な画像生成ができるDALL-E3
2. GoogleスライドでDALL-E3が使えると便利
3. DALL-E3を使えるアドオンはまだない
4. GoogleスライドでDALL-E3の画像生成を簡単実行
5. DALL-E3のGoogleスライド導入手順
6. DALL-E3実行できるスライドの雛形も用意
7. まとめ・終わりに

高性能な画像生成ができるDALL-E3

OpenAIのChatGPTなどのテキスト生成AI以外に、画像生成AIも開発しています。

OpenAIの画像生成AIの最新モデルは、2023年9月に発表されたDALL-E3です。

このDALL-E3は2023年11月にAPI経由での利用ができるようになりました。

これによって、DALL-E3による画像生成があらゆるサービスやアプリに組み込めるようになりました。

GoogleスライドでDALL-E3が使えると便利

DALL-E3と連携することで効率化が図れるサービスの１つがGoogleスライドです。

画像生成AIが利用できると便利なのは、プレゼン資料を作成できるGoogleスライド

プレゼン資料などを作成するGoogleスライドでは、多くの画像を用意します。

これまでは自分で画像を作成したり、フリー素材を検索して用意して配置する必要がありました。

しかし、DALL-E3を使えば、求める画像をプロンプトで入力すれば、その指示に従った画像を作成してくれます。

※まだまだ求める水準の画像が生成されないケースもあります。

それゆえに、Googleスライド上でDALL-E3が使えるようになると、とても便利です。

わざわざ有料版のChatGPT Plusや、Bing AIにアクセスしなくてもGoogleスライド上で画像生成ができれば、スライド作成の効率が格段にアップします。

DALL-E3を使えるアドオンはまだない

Googleスライドの標準機能には画像生成はありませんが、アドオンという拡張機能を追加することができます。

Google Workspace Marketplaceには、Googleスライドで生成AIを利用した画像生成機能を追加するアドオンが公開されています。

しかし、現時点ではOpenAIのDALL-E2のモデルを使ったものが多く、DALL-E3で検索しても該当するアドオンはありません。

2023年1月1日時点でGoogleスライドのアドオンにDALL-E3による画像生成ができるものは存在しない

そのため、アドオンを追加してもGoogleスライドでDALL-E3は使えない状態です。

GoogleスライドでDALL-E3の画像生成を簡単実行

そこで、GoogleスライドでDALL-E3による画像生成AIを利用できる方法を用意してみました。

Googleスライドの画面から画像生成AIのDALL-E3を使えるGoogle Apps Script(GAS)のスクリプトを作成

Googleが提供するGoogle Apps Script(GAS)を用いたプログラムをGoogleスライドに設定し、OpenAIのAPIキーをセットするとDALL-E3の画像生成がGoogleスライド上で利用できます。

一度セットアップすれば、以下の動画のようにプロンプトを入力して簡単にDALL-E3の画像生成が可能です。

Googleスライドで資料作成を行いながら、必要な時に画面を切り替えずに画像生成できます。

DALL-E3のGoogleスライド導入手順

GoogleスライドでDALL-E3を使えるようにする導入手順を解説します。

１．事前準備としてDALL-E3のAPIリクエストが必要になるので、OpenAIのAPI利用登録を行い、APIキーを取得します。

※OpenAIのAPIキーの取得手順は下記の記事で解説しています。

【2023年版】OpenAIのAPIキー発行・取得手順！ChatGPTやGPT-4、DALL-E3をAPI経由で利用可能

２．DALL-E3を使えるようにしたいGoogleスライドのファイルを開きます。

Googleスライドの新しいファイルでDALL-E3を使うために拡張機能のApps Scriptを選択

３．メニューバーにある「拡張機能＞Apps Script」を選択します。

Googleスライドから開いたGoogle Apps Script(GAS)にDALL-E3を使うためのスクリプトを貼り付け

４．Apps Scriptのスクリプトエディタが表示されるので、記載されたmyfunctionを削除して、下記スクリプトを貼り付けます。

//Googleスライドを開いた際に実行する関数
function onOpen() {
  //GoogleスライドのメニューUIを取得する
  const ui = SlidesApp.getUi();
  // メニューを作成し、アイテム名と実行関数を定義する
  ui.createMenu('DALL·E3')
    .addItem('初回認証','menuItem0')
    .addItem('APIキー設定(初回のみ)', 'menuItem1')
    .addItem('画像生成', 'menuItem2')
    .addToUi();
}

//GASの初回認証を実行するための関数(メッセージを出すだけ)
function menuItem0(){
  SlidesApp.getUi().alert('認証されています');
}

//OpenAIのAPIキーの入力とユーザープロパティへの登録する関数
function menuItem1() {
  //GoogleスライドのメニューUIを取得する
  const ui = SlidesApp.getUi();
  //APIKEYがすでに設定済みか確認する
  if (PropertiesService.getUserProperties().getProperty('APIKEY')) {
    ui.alert('APIキーはすでに設定済みです');
  }
  //APIKEYが未設定の場合のみ、APIキーの入力と登録を実施
  else {
    //GoogleスライドにAPIキーを入力するプロンプトを表示し、入力テキストを取得
    const apiKey = ui.prompt('OpenAIのAPIキーを入力してください').getResponseText();
    //OpenAIのAPIキーの仕様から一定文字数以下は処理しない
    if (apiKey.length < 40) {
      ui.alert('APIキー形式が不正のため登録できませんでした');
    }
    else {
      //ユーザープロパティに入力されたAPIキーを登録
      //スクリプトプロパティだと他の人のAPIキーで画像生成して費用が請求されるため
      PropertiesService.getUserProperties().setProperty('APIKEY', apiKey);
      ui.alert('APIキーが設定されました');
    }
  }
}

//入力されたプロンプトをAPI経由でDALL·E3の画像生成し、Googleスライドの現在のページに挿入する関数
function menuItem2() {
  //GoogleスライドのメニューUIを取得する
  const ui = SlidesApp.getUi();
  //APIKEYがすでに設定済みか確認し、設定済みの場合にAPIリクエスト実行
  if (PropertiesService.getUserProperties().getProperty('APIKEY')) {
    //事前にユーザープロパティに登録したOpenAIのAPIキーを取得
    const apiKey = PropertiesService.getUserProperties().getProperty('APIKEY');
    //DALL-E3で画像生成するためのプロンプトの入力を受け付けて、入力テキストを取得
    const prompt = ui.prompt('DALL·E3で生成したい画像のプロンプトを入力してください').getResponseText();
    //DALL-E3の画像生成を行う関数を実行し、戻り値で画像(blob形式)を取得
    const image = generateImage(prompt, apiKey);
    //今表示しているスライドにDALL-E3で生成した画像を挿入
    const currentSlide = SlidesApp.getActivePresentation().getSelection().getCurrentPage();
    currentSlide.insertImage(image);
    ui.alert('画像生成しました。');
  }
  //
  else {
    ui.alert('APIキーが未設定です');
  }
}

//プロンプトとAPIキーを引数にしてDALL·E3にAPIリクエストして画像生成する関数
function generateImage(prompt,apiKey){
  //画像生成AIのAPIのエンドポイントを設定
  const apiUrl = 'https://api.openai.com/v1/images/generations';
  //OpenAIのAPIリクエストに必要なヘッダー情報を設定
  let headers = {
    'Authorization':'Bearer '+ apiKey,
    'Content-type': 'application/json',
    'X-Slack-No-Retry': 1
  };
  //画像生成の枚数とサイズ、プロンプトをオプションに設定
  let options = {
    'muteHttpExceptions' : true,
    'headers': headers, 
    'method': 'POST',
    'payload': JSON.stringify({
      'model' : 'dall-e-3',
      'n' : 1,
      'size' : '1024x1024',
      'prompt': prompt})
  };
  //OpenAIの画像生成(Images)にAPIリクエストを送り、結果を変数に格納
  const response = JSON.parse(UrlFetchApp.fetch(apiUrl, options).getContentText());
  //生成された画像のURLにフェッチして画像データを取得して、名前をつける
  const image = UrlFetchApp.fetch(response.data[0].url).getAs('image/png').setName('DALL-E生成画像');
  return image;
}

５．スクリプトエディタのタブを閉じて、Googleスライドを再度読み込みます。