Google スライドのプレゼンテーションに進行状況バーを表示する

コーディングレベル: 中級
所要時間: 15 分
プロジェクト タイプ: エディタ アドオン

目標

  • ソリューションの機能について理解する。
  • ソリューション内での Apps Script サービスの役割を理解する。
  • スクリプトを設定します。
  • スクリプトを実行します。

このソリューションについて

このソリューションは、プレゼンテーションのスライドの下部に進行状況バーを追加する場合に使用します。

スライド エディタの進行状況バー アドオンのスクリーンショット

仕組み

このスクリプトは、プレゼンテーション内のスライド数を計算し、各スライドの下部に長方形のシェイプを追加します。このスクリプトは、スライド内の進行状況を示すために、各長方形の幅を増やします。

Apps Script サービス

このソリューションでは、次のサービスを使用します。

  • スライド サービス - プレゼンテーションのスライドを取得し、各スライドに長方形の図形を追加します。

前提条件

このサンプルを使用するには、次の前提条件を満たしている必要があります。

  • Google アカウント（Google Workspace アカウントの場合、管理者の承認が必要となる可能性があります）。
  • インターネットに接続できるウェブブラウザ。

スクリプトを設定する

  1. 次のボタンをクリックして、進行状況バーのスライド プレゼンテーションのコピーを作成します。このソリューションの Apps Script プロジェクトは、プレゼンテーションに添付されています。
    コピーを作成
  2. プレゼンテーションで、[拡張機能] > [進行状況バー] > [進行状況バーを表示] をクリックします。

  3. プロンプトが表示されたら、スクリプトを承認します。OAuth 同意画面に [このアプリは確認されていません] という警告が表示された場合は、[詳細] > [{プロジェクト名} に移動（安全でない）] を選択して続行します。

  4. 再度、[拡張機能] > [進行状況バー] > [進行状況バーを表示] をクリックします。

  5. 進行状況バーを削除するには、[拡張機能] > [進行状況バー] > [進行状況バーを非表示にする] をクリックします。

コードを確認する

このソリューションの Apps Script コードを確認するには、下の [ソースコードを表示] をクリックします。

ソースコードを表示

slides/progress/progress.gs
/**
 * @OnlyCurrentDoc Adds progress bars to a presentation.
 */
const BAR_ID = 'PROGRESS_BAR_ID';
const BAR_HEIGHT = 10; // px

/**
 * Runs when the add-on is installed.
 * @param {object} e The event parameter for a simple onInstall trigger. To
 *     determine which authorization mode (ScriptApp.AuthMode) the trigger is
 *     running in, inspect e.authMode. (In practice, onInstall triggers always
 *     run in AuthMode.FULL, but onOpen triggers may be AuthMode.LIMITED or
 *     AuthMode.NONE.)
 */
function onInstall(e) {
  onOpen();
}

/**
 * Trigger for opening a presentation.
 * @param {object} e The onOpen event.
 */
function onOpen(e) {
  SlidesApp.getUi().createAddonMenu()
      .addItem('Show progress bar', 'createBars')
      .addItem('Hide progress bar', 'deleteBars')
      .addToUi();
}

/**
 * Create a rectangle on every slide with different bar widths.
 */
function createBars() {
  deleteBars(); // Delete any existing progress bars
  const presentation = SlidesApp.getActivePresentation();
  const slides = presentation.getSlides();
  for (let i = 0; i < slides.length; ++i) {
    const ratioComplete = (i / (slides.length - 1));
    const x = 0;
    const y = presentation.getPageHeight() - BAR_HEIGHT;
    const barWidth = presentation.getPageWidth() * ratioComplete;
    if (barWidth > 0) {
      const bar = slides[i].insertShape(SlidesApp.ShapeType.RECTANGLE, x, y,
          barWidth, BAR_HEIGHT);
      bar.getBorder().setTransparent();
      bar.setLinkUrl(BAR_ID);
    }
  }
}

/**
 * Deletes all progress bar rectangles.
 */
function deleteBars() {
  const presentation = SlidesApp.getActivePresentation();
  const slides = presentation.getSlides();
  for (let i = 0; i < slides.length; ++i) {
    const elements = slides[i].getPageElements();
    for (const el of elements) {
      if (el.getPageElementType() === SlidesApp.PageElementType.SHAPE &&
        el.asShape().getLink() &&
        el.asShape().getLink().getUrl() === BAR_ID) {
        el.remove();
      }
    }
  }
}

寄稿者

このサンプルは、Google デベロッパー エキスパートの協力を得て Google によって管理されています。

次のステップ