Google Slides apiを使ってスライドの中身を書き換える
SNSでシェアする
こんにちは。広報担当の小林です。
以前までの記事でGoogle Apps Scriptの使い方や、Google AnalyticsのデータをGoogleスプレッド上に表示する方法などを簡単にご紹介してきました。
今回はGoogle Apps Script(以下GAS)のGoogle Slides apiを使用して、スプレッドシートからスライドの内容を書き換えていきます。
ではさっそくGoogleドライブ上にGoogleスプレッドシートを作成して、上部メニューの「ツール」＞「スクリプトエディタ」からスクリプトエディタを開きましょう。
Google Slides apiを有効化
GASでスライドシートの中身を書き換えるには、まずGoogle Slides apiを有効にする必要があります。
スプレッドシートのスクリプトエディタを表示して上部メニューにある「リソース」＞「Googleの拡張サービス」をクリックすると拡張サービスの一覧が表示されますので、「Google Slides API」をONにして下さい。
なお、「Googleの拡張サービス」を押した際に一度もプロジェクトを保存していない状態だと、プロジェクト名の入力フォームが表示されます。
名前はなんでも構わないので、自分が分かり易い名前を設定して下さい。
これで準備完了です。
※以前の記事でAnalytics APIを有効にする際、Google Cloud PlatformでAPIの有効化していましたが、不要になりました。
Google Slides api以外のAPIも同じ方法で有効化できます。
準備
まず対象となるスライドを用意します。
スプレッドシートの表示は以下のようになっています。
円グラフはA2セルからB3セルの入力値をグラフにしたものです。
今回は上部のメニューに追加した「myMenu」＞「スライド書き換え」を押すと、対象のGoogle スライドファイルに新しいスライドが追加され、当日の日付とスプレッド上のグラフが配置されるようします。
予め調べておく必要があるものは、以下の3つです。
・GoogleスライドのID
Googleスライドを開くとブラウザのアドレスバーには以下のようなアドレスが表示されます。赤字部分に書かれているのがスライドのIDです。
https://docs.google.com/presentation/d/スライドのID/edit#slide=id.p
・GoogleスプレッドシートのID
スライド同様、スプレッドシートを開いた際のアドレスの赤字部分がIDです。
https://docs.google.com/spreadsheets/d/スプレッドシートのID/edit#gid=0
・グラフID
スプレッドシートからスライドにコピーするグラフのIDです。
取得方法は後述します。
スライドを書き換える
今回のスクリプトはこんな感じです。
// グラフのIDを取得してログ表示
function getChartID(){
var sheetName = 'sample';
var charts = SpreadsheetApp.getActive().getSheetByName(sheetName).getCharts();
for(var i=0,len=charts.length; i<len; i++){
Logger.log(charts[i].getChartId());
}
}
// 起動時にメニューを追加
function onOpen(){
// スプレッドシートのメニューに新たな項目を追加する
SpreadsheetApp.getActive().addMenu(
'myMenu',
[
{name: 'スライド書き換え', functionName: 'replaceSlide'},
]
);
}
// スライドを書き換える
function replaceSlide(){
const SPREADSHEET_ID = 'GoogleスライドのID';
const PRESENTATION_ID = 'GoogleスプレッドシートのID';
const CHART_ID = グラフID;
// 現在の日時から追加するスライドに指定するIDを作成
var date = new Date();
const SLIDE_ID = 'slide_'+date.getTime();
// Google Slides api
// スライドを追加
var requests = [
{
createSlide : {
objectId : SLIDE_ID
}
},
{
createShape : {
objectId : SLIDE_ID+'_TEXT_BOX',
shapeType : "TEXT_BOX",
elementProperties : {
pageObjectId : SLIDE_ID,
size : {
height : {
magnitude : 25,
unit : 'PT'
},
width : {
magnitude : 100,
unit : 'PT'
}
}
}
}
},
{
insertText : {
objectId : SLIDE_ID+'_TEXT_BOX',
text : date.getFullYear()+'/'+(date.getMonth()+1)+'/'+date.getDate()
}
},
{
createSheetsChart : {
spreadsheetId : SPREADSHEET_ID,
objectId : SLIDE_ID+'_CHART',
chartId : CHART_ID,
elementProperties : {
pageObjectId : SLIDE_ID,
size : {
height : {
magnitude : 4000000,
unit : 'EMU'
},
width : {
magnitude : 8000000,
unit : 'EMU'
}
},
transform : {
scaleX: 1,
scaleY: 1,
translateX: 600000,
translateY: 800000,
unit : 'EMU'
}
},
linkingMode : 'NOT_LINKED_IMAGE'
}
}
];
Slides.Presentations.batchUpdate({"requests" : requests},PRESENTATION_ID);
}
1~8行目の関数を実行するとグラフIDをログ表示します。
グラフが複数ある場合は、IDも複数表示されますので該当するグラフを選択して下さい。
10~19行目はスプレッドシートを開いた際に実行される関数です。
上部メニューを追加しています。
1~19行目はスライドの編集とは関係がありません。
22行目以降がスライドを書き換える処理になります。
23~25行目で前述の3つのIDを指定しています。
33行目からapiへのリクエストを作成、93行目で実行しています。
リクエストの種類についてはGoogle Slides Apiのリファレンス等に詳しく書かれていますので、今回はどのようなリクエストを行っているか簡単にご紹介します。
{
createSlide : {
objectId : SLIDE_ID
}
},
createSlideを使用して新しいスライドを作成します。
objectIdにはそのスライドに指定するIDを指定して下さい。
objectIdはスライドファイル内の要素全てにおいてユニークでなかればいけません。
{
createShape : {
objectId : SLIDE_ID+'_TEXT_BOX',
shapeType : "TEXT_BOX",
elementProperties : {
pageObjectId : SLIDE_ID,
size : {
height : {
magnitude : 25,
unit : 'PT'
},
width : {
magnitude : 100,
unit : 'PT'
}
}
}
}
},
{
insertText : {
objectId : SLIDE_ID+'_TEXT_BOX',
text : date.getFullYear()+'/'+(date.getMonth()+1)+'/'+date.getDate()
}
},
createShape,insertTextの2つを使用してスライドに文章(日付)を挿入しています。
文章を追加する際はこの2つの組み合わせを使用することが多くなると思います。
elementProperties内のsizeでテキストボックスの大きさを指定しています。
{
createSheetsChart : {
spreadsheetId : SPREADSHEET_ID,
objectId : SLIDE_ID+'_CHART',
chartId : CHART_ID,
elementProperties : {
pageObjectId : SLIDE_ID,
size : {
height : {
magnitude : 4000000,
unit : 'EMU'
},
width : {
magnitude : 8000000,
unit : 'EMU'
}
},
transform : {
scaleX: 1,
scaleY: 1,
translateX: 600000,
translateY: 800000,
unit : 'EMU'
}
},
linkingMode : 'NOT_LINKED_IMAGE'
}
}
createSheetsChartでグラフをスライドに追加しています。
spreadsheetIdはグラフを表示しているスプレッドシートのID、chartIDはグラフのIDになります。
elementProperties内のsizeは大きさの指定。
transformは変形を指定するフィールドですが、追加する位置の指定に使用することが多いと思います。
位置の指定を行う際にはscaleX,scaleYに1を指定、translateX,translateYでそれぞれ横・縦の位置の指定を行っています。数値が大きくなればtranslateXなら右に、translateYなら下に移動されます。
上記の処理を実行すると、スライドが変化します。
今回の記事はいかがでしたでしょうか？
リクエストの内容を調べたり、位置の調整をしたりと中々大変なことも多いですが、一度実装してしまえばボタン一つでスライドを作成できるようになります。
因みに弊社では以前の記事で紹介したGoogle Analytics apiを併用して、
スプレッドシートWEBの統計情報を取得・集計
↓
取得したデータを元にスライドを書き換え
↓
スライドをPowerPointファイルにエクスポート
といった形でWEBのアクセス解析レポートを作成などに使用しています。
フォーマットが共通で内容が異なる資料が繰り返し必要な場合、全て手動で書き換えていくのは中々大変ですし、漏れも出てきます。
自動化できるところは極力自動化して、業務の時短に繋げていきたいものです。
SNSでシェアする