התחלה מהירה: תוסף Translate ל-Google Slides

קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

משלימים את השלבים המתוארים בהמשך הדף, ובתוך כ-5 דקות יצרתם תוסף של Google Slides שיתרגם טקסט במצגת.

להגדרה

  1. יוצרים מצגת חדשה ב-Google.
  2. מתוך המצגת החדשה, בוחרים בפריט בתפריט כלים > עורך סקריפטים. אם מוצג מסך פתיחה, לוחצים על פרויקט ריק.
  3. יש למחוק כל קוד בעורך הסקריפטים ולשנות את השם של Code.gs ל-translate.gs.
  4. יוצרים קובץ חדש על ידי בחירה בפריט התפריט קובץ > חדש > קובץ HTML. תנו שם לקובץ sidebar (סקריפט של Apps מוסיף את התוסף .html באופן אוטומטי).
  5. צריך להחליף כל קוד משני הקבצים האלה בתוכן הבא, בהתאמה:

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;
}

סרגל הצד

/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. בוחרים בתפריט את האפשרות קובץ > שומרים הכול. נותנים שם לסקריפט החדש "Translate Quickstart" ולוחצים על OK. שם התסריט מוצג למשתמשי קצה בכמה מקומות, כולל תיבת הדו-שיח לאישור.

רוצה לנסות?

  1. חוזרים למצגת וטוענים מחדש את הדף.
  2. אחרי כמה שניות, בתפריט המשנה תוספים, יופיע תפריט משנה של תרגום מהיר. לוחצים על תוספים > תרגום מהיר > התחלה.
  3. תיבת דו-שיח מציינת שהסקריפט דורש הרשאה. לוחצים על Continue. תיבת דו-שיח שנייה מבקשת הרשאה לשירותי Google ספציפיים. לחצו על אישור.
  4. סרגל צד מופיע. כדי לבדוק אותו, מקלידים טקסט במצגת, בוחרים אותו ולוחצים על הלחצן תרגום הכחול. כדי להחליף את הטקסט במצגת, לוחצים על הוספה.

פרסום

מכיוון שמדובר בתוסף לדוגמה, המדריך שלנו מסתיים כאן. אם פיתחתם תוסף אמיתי, השלב האחרון הוא לפרסם אותו כדי שאנשים אחרים יוכלו למצוא ולהתקין אותו.

מידע נוסף

כדי להרחיב את Google Slides עם Apps Script, עיינו במקורות המידע הבאים: