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

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

セットアップ

1. 新しい Google プレゼンテーションを作成します。
2. 新しいプレゼンテーションから、メニュー項目の [Tools > Script editor] を選択します。ウェルカム画面が表示されたら、[Blank Project] をクリックします。

3. スクリプト エディタでコードを削除し、Code.gs の名前を progress.gs に変更します。

   Slides/Progress/progress.gs

   GitHub で表示

   /**
    * @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();
         }
       }
     }
   }

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

試してみる

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

公開

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

詳細

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

• アドオンのドキュメント
• Apps Script による Google スライドの拡張