よくあるスライドにプログレスバーつけるってやつ
GoogleSlideでも公式でGASを使ってやってねというドキュメントがあるので使ってみた
Google スライドのプレゼンテーションに進行状況バーを表示する | Apps Script | Google Developers
これを見ながらアドオンとしてGASのコードをインストールする
スライドもコピーされるのでコピーされたスライドで「拡張機能」→「Apps Script」でコードの中身を閲覧できる
実際に動かしてみたらこんな感じ
やっていること
そんなにコード量多くなかったのでどんなことしているのか見てみた
アドオンのインストール
インストールするにはonInstallを実行する
onOpneを呼んでいるだけなのでその中身は下記
SlidesApp.getUi().createAddonMenu()
.addItem('Show progress bar', 'createBars')
.addItem('Hide progress bar', 'deleteBars')
.addToUi();
この箇所で下記のようにメニューを追加している
addItemの第二引数は実行する関数名になっている
プログレスバーの表示/削除
createBars,deleteBarsでは主に次のような処理をしていた
- スライドのリストを取得
insertShapeで矩形を挿入getPageHeight,getPageWidthでスライドの縦横幅を取得し、横幅は進捗に合わせた幅、縦幅は定数値を定義し挿入する座標を特定
- 挿入した矩形の枠線を透明にする
- 矩形に対してリンクのURLを設定(定数値、デフォルトでは
PROGRESS_BAR_ID)- deleteの際はページ内すべての要素を取得し、このリンクの中身のURLが定数と一致している矩形のみ削除する
矩形にリンクを設定して、その値に適当なユニークとなるIDを割り当てて、アドオンで追加した矩形かどうかの判断をしていた
かなり力技感があり、なるほど…って思った
コードをカスタマイズする
GAS内で使えるメソッドとかはこの辺を見れば分かる
Class Shape | Apps Script | Google Developers
とりあえずアドオンのコードから色と大きさを変えた
- const BAR_HEIGHT = 10; // px + const BAR_HEIGHT = 3; // px ..... ..... bar.setLinkUrl(BAR_ID); + bar.getFill().setSolidFill(255,13,115, 0.8)
こんな感じ
コピーしたスライド以外での利用
コピー以外の他のプレゼンテーションに適用するにはGASのコードを対象のプレゼンテーションの「Apps Script」でコピー&ペーストしてインストールすることでインストール、設定ができる
実行する関数： onInstall
やってみた
他のGoogleSlide用のGAS
他にもいくつかサンプルがあった
apps-script-samples/README.md at main · googleworkspace/apps-script-samples · GitHub
- スライドのテキストを抽出してGoogleDocに落とし込むスクリプト
- 選択したテキストを翻訳するスクリプト
- HTMLをサイドバーに用意してそこからGASの関数を実行しているよう
まとめ
- GoogleSlideでプログレスバーを表示できるようにした
- GASのコードを修正して自身のスライド用に色やサイズを変更した
感想
- GASなのでほどほどにというのはあるものの、工夫次第で色々できそうだなという感じがした
- 何かしら作ってみたい
- すべてのページで同じ図形や画像を配置するならテーマを編集して実現したほうが良い
- ページによって動的な情報を元に図形を配置したい場合はGASを用いて実現できることを知れたので良かった
- また、アドオンで生成した図形の制御の方法としてリンクの中身を識別子として扱う方法もスマートではないとは思うもののアイデアとしては面白いと思った
