Google Slides 편집기 부가기능 빠른 시작

이 빠른 시작에서는 프레젠테이션에서 선택한 텍스트를 번역하는 Google Slides 편집기 부가기능을 만듭니다.

목표

  • 스크립트를 설정합니다.
  • 스크립트를 실행합니다.

기본 요건

이 샘플을 사용하려면 다음과 같은 기본 요건이 필요합니다.

  • Google 계정 (Google Workspace 계정은 관리자 승인이 필요할 수 있음)
  • 인터넷에 액세스할 수 있는 웹브라우저

스크립트 설정

  1. slides.new에서 Slides 프레젠테이션을 만듭니다.
  2. 확장 프로그램 > Apps Script를 클릭합니다.
  3. 제목 없는 프로젝트를 클릭합니다.
  4. Apps Script 프로젝트 이름을 슬라이드 번역으로 바꾸고 이름 바꾸기를 클릭합니다.
  5. Code.gs 파일 옆에서 더보기 > 이름 바꾸기를 클릭합니다. 파일 이름을 translate로 지정합니다.
  6. 파일 추가 > HTML을 클릭합니다. 파일 이름을 sidebar로 지정합니다.
  7. 각 파일의 콘텐츠를 상응하는 다음 코드로 바꾼 후 저장 저장 아이콘을 클릭합니다.

    translate.gs

    Slides/translate/translate.gs
    /**
     * @OnlyCurrentDoc Limits the script to only accessing the current presentation.
     */
    
    /**
     * Create a open translate menu item.
     * @param {Event} event The open event.
     */
    function onOpen(event) {
      SlidesApp.getUi().createAddonMenu()
          .addItem('Open Translate', 'showSidebar')
          .addToUi();
    }
    
    /**
     * Open the Add-on upon install.
     * @param {Event} event The install event.
     */
    function onInstall(event) {
      onOpen(event);
    }
    
    /**
     * Opens a sidebar in the document containing the add-on's user interface.
     */
    function showSidebar() {
      const ui = HtmlService
          .createHtmlOutputFromFile('sidebar')
          .setTitle('Translate');
      SlidesApp.getUi().showSidebar(ui);
    }
    
    /**
     * Recursively gets child text elements a list of elements.
     * @param {PageElement[]} elements The elements to get text from.
     * @return {Text[]} An array of text elements.
     */
    function getElementTexts(elements) {
      let texts = [];
      elements.forEach((element)=> {
        switch (element.getPageElementType()) {
          case SlidesApp.PageElementType.GROUP:
            element.asGroup().getChildren().forEach((child)=> {
              texts = texts.concat(getElementTexts(child));
            });
            break;
          case SlidesApp.PageElementType.TABLE:
            const table = element.asTable();
            for (let y = 0; y < table.getNumColumns(); ++y) {
              for (let x = 0; x < table.getNumRows(); ++x) {
                texts.push(table.getCell(x, y).getText());
              }
            }
            break;
          case SlidesApp.PageElementType.SHAPE:
            texts.push(element.asShape().getText());
            break;
        }
      });
      return texts;
    }
    
    /**
     * Translates selected slide elements to the target language using Apps Script's Language service.
     *
     * @param {string} targetLanguage The two-letter short form for the target language. (ISO 639-1)
     * @return {number} The number of elements translated.
     */
    function translateSelectedElements(targetLanguage) {
      // Get selected elements.
      const selection = SlidesApp.getActivePresentation().getSelection();
      const selectionType = selection.getSelectionType();
      let texts = [];
      switch (selectionType) {
        case SlidesApp.SelectionType.PAGE:
          selection.getPageRange().getPages().forEach((page)=> {
            texts = texts.concat(getElementTexts(page.getPageElements()));
          });
          break;
        case SlidesApp.SelectionType.PAGE_ELEMENT:
          const pageElements = selection.getPageElementRange().getPageElements();
          texts = texts.concat(getElementTexts(pageElements));
          break;
        case SlidesApp.SelectionType.TABLE_CELL:
          selection.getTableCellRange().getTableCells().forEach((cell)=> {
            texts.push(cell.getText());
          });
          break;
        case SlidesApp.SelectionType.TEXT:
          selection.getPageElementRange().getPageElements().forEach((element) =>{
            texts.push(element.asShape().getText());
          });
          break;
      }
    
      // Translate all elements in-place.
      texts.forEach((text)=> {
        text.setText(LanguageApp.translate(text.asRenderedString(), '', targetLanguage));
      });
    
      return texts.length;
    }

    사이드바.html

    slides/translate/sidebar.html
    <html>
    <head>
      <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
      <style>
        .logo { vertical-align: middle; }
        ul { list-style-type: none; padding: 0; }
        h4 { margin: 0; }
      </style>
    </head>
    <body>
    <form class="sidebar branding-below">
      <h4>Translate selected slides into:</h4>
      <ul id="languages"></ul>
      <div class="block" id="button-bar">
        <button class="blue" id="run-translation">Translate</button>
      </div>
      <h5 class="error" id="error"></h5>
    </form>
    <div class="sidebar bottom">
      <img alt="Add-on logo" class="logo"
           src="https://www.gstatic.com/images/branding/product/1x/translate_48dp.png" width="27" height="27">
      <span class="gray branding-text">Translate sample by Google</span>
    </div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      $(function() {
        // Add an input radio button for every language.
        const languages = {
          ar: 'Arabic',
          zh: 'Chinese',
          en: 'English',
          fr: 'French',
          de: 'German',
          hi: 'Hindi',
          ja: 'Japanese',
          pt: 'Portuguese',
          es: 'Spanish'
        };
        const languageList = Object.keys(languages).map((id)=> {
          return $('<li>').html([
            $('<input>')
                    .attr('type', 'radio')
                    .attr('name', 'dest')
                    .attr('id', 'radio-dest-' + id)
                    .attr('value', id),
            $('<label>')
                    .attr('for', 'radio-dest-' + id)
                    .html(languages[id])
          ]);
        });
    
        $('#run-translation').click(runTranslation);
        $('#languages').html(languageList);
      });
    
      /**
       * Runs a server-side function to translate the text on all slides.
       */
      function runTranslation() {
        this.disabled = true;
        $('#error').text('');
        google.script.run
                .withSuccessHandler((numTranslatedElements, element) =>{
                  element.disabled = false;
                  if (numTranslatedElements === 0) {
                    $('#error').empty()
                            .append('Did you select elements to translate?')
                            .append('<br/>')
                            .append('Please select slides or individual elements.');
                  }
                  return false;
                })
                .withFailureHandler((msg, element)=> {
                  element.disabled = false;
                  $('#error').text('Something went wrong. Please check the add-on logs.');
                  return false;
                })
                .withUserObject(this)
                .translateSelectedElements($('input[name=dest]:checked').val());
      }
    </script>
    </body>
    </html>

스크립트 실행

  1. Slides 프레젠테이션에서 페이지를 새로고침합니다.
  2. 확장 프로그램 > 슬라이드 번역 > 시작을 클릭합니다. 부가기능 메뉴 항목이 표시되는 데 몇 초 정도 걸릴 수 있습니다.
  3. 메시지가 표시되면 부가기능을 승인합니다.
  4. 다시 확장 프로그램 > 슬라이드 번역 > 시작을 클릭합니다.
  5. 프레젠테이션에 텍스트를 추가하고 선택합니다.
  6. 부가기능에서 번역을 클릭하여 선택한 텍스트를 바꿉니다.

다음 단계