クイックスタート: Google スライド用の進行状況バー アドオン

このページの残りの手順を完了してください。約 5 分後に、進行状況バーがプレゼンテーションに追加される Google スライド アドオンが作成されます。このスライドのアドオンの詳細と仕組みについては、右側の動画をご覧ください。

セットアップ

  1. 新しい Google プレゼンテーションを作成します。
  2. 新しいプレゼンテーションから、メニュー項目の [Tools > Script editor] を選択します。ウェルカム画面が表示されたら、[Blank Project] をクリックします。
  3. スクリプト エディタでコードを削除し、Code.gs の名前を progress.gs に変更します。

    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();
          }
        }
      }
    }
  1. メニュー項目の [File > Save all] を選択します。新しいスクリプトに「Progress Bar Quickstart」という名前を付け、[OK] をクリックします。スクリプトの名前は、承認ダイアログなど、複数の場所でエンドユーザーに表示されます。

試してみる

  1. プレゼンテーションに戻り、ページを再読み込みします。
  2. 数秒後、[アドオン] メニューに [ProgressBar] サブメニューが表示されます。[アドオン > ProgressBar >進行状況バーを表示] をクリックします。
  3. スクリプトが認可を必要とすることを示すダイアログ ボックス。[続行] をクリックします。2 つ目のダイアログ ボックスは、特定の Google サービスの承認をリクエストします。[Allow] をクリックします。
  4. 進行状況バーが表示されます。進行状況バーを削除するには、[アドオン > ProgressBar > 進行状況バーを非表示] をクリックします。

公開

これはアドオンの一例であるため、このチュートリアルはここで終了します。実際のアドオンを開発していた場合、最後の手順は、他のユーザーがそのアドオンを見つけてインストールできるように公開することです。

詳細

Apps Script を使用して Google スライドを拡張する方法を引き続き学習するには、次のリソースをご覧ください。