GASでGoogleスライド上にタイマーを設置する

13732 ワード
GoogleAppsScript Googleスライド プレゼンテーション gas JavaScript JavaScript テキストリンク

はじめに

共同作業などでGoogleスライドを利用することがあるかと思いますが、GoogleAppsScriptを使ってスライド上にカウントダウンタイマーを設置することができます。
GoogleスライドはGoogleスプレッドシートとは違って使い勝手がわかりにくかったので、設置方法を詳しく書きました。
使用例としては、スライドの提出締め切りやプレゼンの発表日をスライド上でカウントダウンしてチームの士気を高める、といった場面を想定しています。
チームメンバーの誕生日を祝ったりしてもいいかもしれませんね！

スライドの作成

GoogleドライブからGoogleスライドを作成してください。
今回はこのようなテストスライドを用意しました。

メインタイトルの「ここにタイマーを表示」というところに、2019年1月1日0時0分までのカウントダウンを表示したいと思います。

スクリプトの作成

次に、「ツール」→「スクリプトエディタ」から、新規スクリプトを作成します。
ここにJavaScriptでスライドを編集する命令を書いて、定期的に実行させます。

オブジェクトIDを調べる

タイマーを表示するテキストボックスのオブジェクトIDが必要になるので、まずは下のリンクからオブジェクトIDを調べましょう。
Method: presentations.get  |  Slides API  |  Google Developers
画面右の「Try this API」というところでpresentationId」(スライドのURLの"docs.google.com/presentation/d/ここがpresentationId/edit")を入力し、「EXECUTE」を押してください。
すると、このようなjsonデータが返ってきます(長いので適宜省略しました)。

{
  "presentationId": "PresentationID",
  "pageSize": {},
  "slides": [
    {
      "objectId": "p",
      "pageElements": [
        {
          "objectId": "i0",
          "size": {},
          "transform": {},
          "shape": {
            "shapeType": "TEXT_BOX",
            "text": {
              "textElements": [
                {},
                {
                  "endIndex": 11,
                  "textRun": {
                    "content": "ここにタイマーを表示\n",
                    "style": {}
                  }
                }
              ]
            }
          }
        }
      ]
    }
  ]
}

オブジェクトIDが"i0"であることがわかりました。

スクリプトを書く

次のようなスクリプトを書いてください。

// 当該テキストボックスの取得
var presentationID = "presentationID";
var presentation = SlidesApp.openById(presentationID);
var slide = presentation.getSlides()[0]; //スライド1枚目
var pageElements = slide.getPageElements();
var textBox = pageElements.filter(function(e){return e.getObjectId() == "objectID"})[0]; // ページ要素の配列からobjectIDで検索する
var text = textBox.asShape().getText();
Logger.log(text.asString());

var xday = new Date(2019, 1-1, 1, 0, 0, 0); //　月は0オリジン

// 当該テキストボックスの中身をクリアしてからタイマーを追加
function main() {  
  text.clear();
  var msg = TimeToGo();
  text.appendText(msg);
}

// タイマー　(テキストボックスに渡す文字列)
function TimeToGo() {
  var now = new Date();
  var diff = xday.getTime() - now.getTime();
  // 新年になったら"Happy New Year"
  if (diff<0) {
    delTrigger(); // トリガー削除(後述)
    return "Happy New Year!";
  }
  // 日、時間を計算
  var day = Math.floor(diff/(24*60*60*1000));
  diff = diff%(24*60*60*1000);
  var hour = Math.floor(diff/(60*60*1000));
  var msg = day + " Days " + hour + " Hours";
  return msg;
}

// トリガー削除(後述)
function delTrigger() {
  var triggers = ScriptApp.getProjectTriggers();
  for(var i=0; i < triggers.length; i++) {
    ScriptApp.deleteTrigger(triggers[i]);
  }
}

トリガーを設定する

次に、スクリプトを定期的に実行するためのトリガーを設定します。
スクリプトのメニューバーにある時計マークをクリックすると、このような画面が出てきます。

main関数を1時間ごとに実行する設定にして、保存します。
そのときに許可を求められた場合は、「詳細」→「（安全ではないページ）に移動」で許可を与えます。

実行結果

トリガーが実行されるとスライドにタイマーが表示されます！

これを応用すると、日替わりで背景画像を変えたり、いろいろできそうですね。

このトリガーは1時間ごとに永久に実行されてしまうので、適当なタイミングで必ずトリガー削除の関数を実行しましょう。
スプレッドシートだとOnOpen関数などでファイルを開いたときのみ実行することができるらしいのですが、スライドではうまくできませんでした。
コメントでご助言をいただければ幸いです。

参考文献

「Google Apps Script」の記事一覧 | いつも隣にITのお仕事
このシリーズにお世話になりました。