แปลข้อความจาก Google เอกสาร ชีต และสไลด์

ระดับการเขียนโค้ด: ระดับกลาง
ระยะเวลา: 30 นาที
ประเภทโปรเจ็กต์: ส่วนเสริม Google Workspace

วัตถุประสงค์

• ทําความเข้าใจประโยชน์ของโซลูชัน
• ทําความเข้าใจประโยชน์ของบริการ Apps Script ภายในโซลูชัน
• ตั้งค่าสภาพแวดล้อม
• ตั้งค่าสคริปต์
• เรียกใช้สคริปต์

เกี่ยวกับโซลูชันนี้

คุณสามารถใช้โซลูชันนี้เพื่อแปลข้อความจากภายใน Google เอกสาร ชีต และสไลด์ได้อย่างง่ายดาย

ลักษณะการทำงาน

เมื่อคุณเลือกข้อความในเอกสาร เอกสาร หรือสไลด์ แล้วคลิกรับการเลือกในส่วนเสริม สคริปต์จะคัดลอกข้อความลงในส่วนเสริม จะแปลและแสดงข้อความที่แปลแล้ว

โดยค่าเริ่มต้น สคริปต์จะตรวจจับภาษาต้นทางและแปลข้อความเป็นภาษาอังกฤษ คุณจะแก้ไขภาษาต้นฉบับและภาษาเป้าหมายได้

บริการ Apps Script

โซลูชันนี้จะใช้บริการต่อไปนี้

• บริการการ์ด - สร้างอินเทอร์เฟซผู้ใช้ของส่วนเสริม
• บริการภาษา - แปลข้อความโดยใช้ Google แปลภาษา

สิ่งที่ต้องดำเนินการก่อน

หากต้องการใช้ตัวอย่างนี้ คุณต้องมีข้อกําหนดเบื้องต้นต่อไปนี้

• บัญชี Google (บัญชี Google Workspace อาจต้องได้รับการอนุมัติจากผู้ดูแลระบบ)

• เว็บเบราว์เซอร์ที่เข้าถึงอินเทอร์เน็ตได้

• โปรเจ็กต์ Google Cloud

ตั้งค่าสภาพแวดล้อม

เปิดโปรเจ็กต์ที่อยู่ในระบบคลาวด์ใน Google Cloud Console

หากยังไม่ได้เปิด ให้เปิดโปรเจ็กต์ Cloud ที่คุณตั้งใจจะใช้สําหรับตัวอย่างนี้

1. ไปที่หน้าเลือกโปรเจ็กต์ในคอนโซล Google Cloud

   เลือกโปรเจ็กต์ที่อยู่ในระบบคลาวด์

2. เลือกโปรเจ็กต์ Google Cloud ที่ต้องการใช้ หรือคลิกสร้างโปรเจ็กต์และทําตามวิธีการบนหน้าจอ หากคุณสร้างโปรเจ็กต์ Google Cloud คุณอาจต้องเปิดการเรียกเก็บเงินสําหรับโปรเจ็กต์

กําหนดค่าหน้าจอขอความยินยอม OAuth

ส่วนเสริมของ Google Workspace ต้องมีการกําหนดค่าหน้าจอขอความยินยอม การกําหนดค่าหน้าจอขอความยินยอม OAuth ของส่วนเสริมจะกําหนดสิ่งที่ Google แสดงต่อผู้ใช้

1. ในคอนโซล Google Cloud ให้ไปที่เมนู > API และบริการ > หน้าจอขอความยินยอม OAuth

   ไปที่หน้าจอคํายินยอม OAuth

2. เลือกประเภทผู้ใช้สําหรับแอป แล้วคลิกสร้าง
3. กรอกแบบฟอร์มการลงทะเบียนแอป แล้วคลิกบันทึกและต่อไป

4. ในระหว่างนี้ คุณสามารถข้ามการเพิ่มขอบเขต แล้วคลิกบันทึกและต่อไป ในอนาคตเมื่อคุณสร้างแอปสําหรับการใช้งานภายนอกองค์กร Google Workspace คุณต้องเพิ่มและยืนยันขอบเขตการให้สิทธิ์ที่แอปต้องการ

5. หากเลือกภายนอกสําหรับประเภทผู้ใช้ ให้เพิ่มผู้ใช้ทดสอบ ดังนี้
   1. ในส่วนทดสอบผู้ใช้ ให้คลิกเพิ่มผู้ใช้
   2. ป้อนอีเมลและผู้ใช้ทดสอบคนอื่นๆ ที่ได้รับอนุญาต จากนั้นคลิกบันทึกและดําเนินการต่อ
6. ดูสรุปการลงทะเบียนแอป หากต้องการทําการเปลี่ยนแปลง ให้คลิกแก้ไข หากการลงทะเบียนแอปถูกต้องแล้ว ให้คลิกกลับไปที่หน้าแดชบอร์ด

ตั้งค่าสคริปต์

สร้างโปรเจ็กต์ Apps Script

1. คลิกปุ่มต่อไปนี้เพื่อเปิดโปรเจ็กต์ Google แปลภาษา
   เปิดโครงการ

2. คลิกภาพรวม

3. คลิกทําสําเนา ในหน้าภาพรวม

คัดลอกหมายเลขโปรเจ็กต์ Cloud

1. ไปที่โปรเจ็กต์ Google Cloud ในคอนโซล Google Cloud
2. คลิกการตั้งค่าและยูทิลิตี > การตั้งค่าโปรเจ็กต์
3. คัดลอกหมายเลขโปรเจ็กต์

ตั้งโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Apps Script

1. ในโปรเจ็กต์ Apps Script ที่คัดลอกไว้ ให้คลิกการตั้งค่าโปรเจ็กต์
2. ในส่วนโปรเจ็กต์ Google Cloud Platform (GCP) ให้คลิกเปลี่ยนโปรเจ็กต์
3. วางหมายเลขโปรเจ็กต์ Google Cloud ในหมายเลขโปรเจ็กต์ GCP
4. คลิกตั้งค่าโปรเจ็กต์

ติดตั้งการทําให้ใช้งานได้ของการทดสอบ

1. คลิกตัวแก้ไขในโปรเจ็กต์ ที่คัดลอกไว้
2. เปิดไฟล์ Code.gs แล้วคลิกเรียกใช้ ให้สิทธิ์สคริปต์เมื่อได้รับแจ้ง
3. คลิกการทําให้ใช้งานได้ > ทดสอบการติดตั้งใช้งาน
4. คลิกติดตั้ง > เสร็จสิ้น

เรียกใช้สคริปต์

1. เปิดไฟล์ใน Google เอกสาร ชีต หรือสไลด์ หรือสร้างไฟล์ใหม่
2. ในแถบด้านข้างทางขวา ให้เปิดส่วนเสริมแปลภาษา
3. ให้สิทธิ์ส่วนเสริมหากได้รับแจ้ง
4. เลือกข้อความในไฟล์
5. คลิกดาวน์โหลดรายการที่เลือก > แปลภาษาในส่วนเสริม

ตรวจสอบโค้ด

ในการตรวจสอบโค้ดของ Apps Script สําหรับโซลูชันนี้ ให้คลิกดูซอร์สโค้ดด้านล่าง

ดูซอร์สโค้ด

รหัส

const DEFAULT_INPUT_TEXT = '';
const DEFAULT_OUTPUT_TEXT = '';
const DEFAULT_ORIGIN_LAN = ''; // Empty string means detect langauge
const DEFAULT_DESTINATION_LAN = 'en' // English

const LANGUAGE_MAP =
  [
    { text: 'Detect Language', val: '' },
    { text: 'Afrikaans', val: 'af' },
    { text: 'Albanian', val: 'sq' },
    { text: 'Amharic', val: 'am' },
    { text: 'Arabic', val: 'ar' },
    { text: 'Armenian', val: 'hy' },
    { text: 'Azerbaijani', val: 'az' },
    { text: 'Basque', val: 'eu' },
    { text: 'Belarusian', val: 'be' },
    { text: 'Bengali', val: 'bn' },
    { text: 'Bosnian', val: 'bs' },
    { text: 'Bulgarian', val: 'bg' },
    { text: 'Catalan', val: 'ca' },
    { text: 'Cebuano', val: 'ceb' },
    { text: 'Chinese (Simplified)', val: 'zh-CN' },
    { text: 'Chinese (Traditional)', val: 'zh-TW' },
    { text: 'Corsican', val: 'co' },
    { text: 'Croatian', val: 'hr' },
    { text: 'Czech', val: 'cs' },
    { text: 'Danish', val: 'da' },
    { text: 'Dutch', val: 'nl' },
    { text: 'English', val: 'en' },
    { text: 'Esperanto', val: 'eo' },
    { text: 'Estonian', val: 'et' },
    { text: 'Finnish', val: 'fi' },
    { text: 'French', val: 'fr' },
    { text: 'Frisian', val: 'fy' },
    { text: 'Galician', val: 'gl' },
    { text: 'Georgian', val: 'ka' },
    { text: 'German', val: 'de' },
    { text: 'Greek', val: 'el' },
    { text: 'Gujarati', val: 'gu' },
    { text: 'Haitian Creole', val: 'ht' },
    { text: 'Hausa', val: 'ha' },
    { text: 'Hawaiian', val: 'haw' },
    { text: 'Hebrew', val: 'he' },
    { text: 'Hindi', val: 'hi' },
    { text: 'Hmong', val: 'hmn' },
    { text: 'Hungarian', val: 'hu' },
    { text: 'Icelandic', val: 'is' },
    { text: 'Igbo', val: 'ig' },
    { text: 'Indonesian', val: 'id' },
    { text: 'Irish', val: 'ga' },
    { text: 'Italian', val: 'it' },
    { text: 'Japanese', val: 'ja' },
    { text: 'Javanese', val: 'jv' },
    { text: 'Kannada', val: 'kn' },
    { text: 'Kazakh', val: 'kk' },
    { text: 'Khmer', val: 'km' },
    { text: 'Korean', val: 'ko' },
    { text: 'Kurdish', val: 'ku' },
    { text: 'Kyrgyz', val: 'ky' },
    { text: 'Lao', val: 'lo' },
    { text: 'Latin', val: 'la' },
    { text: 'Latvian', val: 'lv' },
    { text: 'Lithuanian', val: 'lt' },
    { text: 'Luxembourgish', val: 'lb' },
    { text: 'Macedonian', val: 'mk' },
    { text: 'Malagasy', val: 'mg' },
    { text: 'Malay', val: 'ms' },
    { text: 'Malayalam', val: 'ml' },
    { text: 'Maltese', val: 'mt' },
    { text: 'Maori', val: 'mi' },
    { text: 'Marathi', val: 'mr' },
    { text: 'Mongolian', val: 'mn' },
    { text: 'Myanmar (Burmese)', val: 'my' },
    { text: 'Nepali', val: 'ne' },
    { text: 'Norwegian', val: 'no' },
    { text: 'Nyanja (Chichewa)', val: 'ny' },
    { text: 'Pashto', val: 'ps' },
    { text: 'Persian', val: 'fa' },
    { text: 'Polish', val: 'pl' },
    { text: 'Portuguese (Portugal, Brazil)', val: 'pt' },
    { text: 'Punjabi', val: 'pa' },
    { text: 'Romanian', val: 'ro' },
    { text: 'Russian', val: 'ru' },
    { text: 'Samoan', val: 'sm' },
    { text: 'Scots Gaelic', val: 'gd' },
    { text: 'Serbian', val: 'sr' },
    { text: 'Sesotho', val: 'st' },
    { text: 'Shona', val: 'sn' },
    { text: 'Sindhi', val: 'sd' },
    { text: 'Sinhala (Sinhalese)', val: 'si' },
    { text: 'Slovak', val: 'sk' },
    { text: 'Slovenian', val: 'sl' },
    { text: 'Somali', val: 'so' },
    { text: 'Spanish', val: 'es' },
    { text: 'Sundanese', val: 'su' },
    { text: 'Swahili', val: 'sw' },
    { text: 'Swedish', val: 'sv' },
    { text: 'Tagalog (Filipino)', val: 'tl' },
    { text: 'Tajik', val: 'tg' },
    { text: 'Tamil', val: 'ta' },
    { text: 'Telugu', val: 'te' },
    { text: 'Thai', val: 'th' },
    { text: 'Turkish', val: 'tr' },
    { text: 'Ukrainian', val: 'uk' },
    { text: 'Urdu', val: 'ur' },
    { text: 'Uzbek', val: 'uz' },
    { text: 'Vietnamese', val: 'vi' },
    { text: 'Welsh', val: 'cy' },
    { text: 'Xhosa', val: 'xh' },
    { text: 'Yiddish', val: 'yi' },
    { text: 'Yoruba', val: 'yo' },
    { text: 'Zulu', val: 'zu' }
  ];


/**
 * Callback for rendering the main card.
 * @return {CardService.Card} The card to show the user.
 */
function onHomepage(e) {
  return createSelectionCard(e, DEFAULT_ORIGIN_LAN, DEFAULT_DESTINATION_LAN, DEFAULT_INPUT_TEXT, DEFAULT_OUTPUT_TEXT);
}

/**
 * Main function to generate the main card.
 * @param {String} originLanguage Language of the original text.
 * @param {String} destinationLanguage Language of the translation.
 * @param {String} inputText The text to be translated.
 * @param {String} outputText The text translated.
 * @return {CardService.Card} The card to show to the user.
 */
function createSelectionCard(e, originLanguage, destinationLanguage, inputText, outputText) {
  var hostApp = e['hostApp'];
  var builder = CardService.newCardBuilder();

  // "From" language selection & text input section
  var fromSection = CardService.newCardSection()
    .addWidget(generateLanguagesDropdown('origin', 'From: ', originLanguage))
    .addWidget(CardService.newTextInput()
      .setFieldName('input')
      .setValue(inputText)
      .setTitle('Enter text...')
      .setMultiline(true));

  if (hostApp === 'docs') {
    fromSection.addWidget(CardService.newButtonSet()
      .addButton(CardService.newTextButton()
        .setText('Get Selection')
        .setOnClickAction(CardService.newAction().setFunctionName('getDocsSelection'))
        .setDisabled(false)))
  } else if (hostApp === 'sheets') {
    fromSection.addWidget(CardService.newButtonSet()
      .addButton(CardService.newTextButton()
        .setText('Get Selection')
        .setOnClickAction(CardService.newAction().setFunctionName('getSheetsSelection'))
        .setDisabled(false)))
  } else if (hostApp === 'slides') {
    fromSection.addWidget(CardService.newButtonSet()
      .addButton(CardService.newTextButton()
        .setText('Get Selection')
        .setOnClickAction(CardService.newAction().setFunctionName('getSlidesSelection'))
        .setDisabled(false)))
  }


  builder.addSection(fromSection);

  // "Translation" language selection & text input section
  builder.addSection(CardService.newCardSection()
    .addWidget(generateLanguagesDropdown('destination', 'To: ', destinationLanguage))
    .addWidget(CardService.newTextInput()
      .setFieldName('output')
      .setValue(outputText)
      .setTitle('Translation...')
      .setMultiline(true)));

  //Buttons section
  builder.addSection(CardService.newCardSection()
    .addWidget(CardService.newButtonSet()
      .addButton(CardService.newTextButton()
        .setText('Translate')
        .setTextButtonStyle(CardService.TextButtonStyle.FILLED)
        .setOnClickAction(CardService.newAction().setFunctionName('translateText'))
        .setDisabled(false))
      .addButton(CardService.newTextButton()
        .setText('Clear')
        .setOnClickAction(CardService.newAction().setFunctionName('clearText'))
        .setDisabled(false))));

  return builder.build();

}

/**
 * Helper function to generate the drop down language menu. It checks what language the user had selected.
 * @param {String} fieldName
 * @param {String} fieldTitle
 * @param {String} previousSelected The language the user previously had selected.
 * @return {CardService.SelectionInput} The card to show to the user.
 */
function generateLanguagesDropdown(fieldName, fieldTitle, previousSelected) {
  var selectionInput = CardService.newSelectionInput().setTitle(fieldTitle)
    .setFieldName(fieldName)
    .setType(CardService.SelectionInputType.DROPDOWN);

  LANGUAGE_MAP.forEach((language, index, array) => {
    selectionInput.addItem(language.text, language.val, language.val == previousSelected);
  })

  return selectionInput;
}

/**
 * Helper function to translate the text. If the originLanguage is an empty string, the API detects the language
 * @return {CardService.Card} The card to show to the user.
 */
function translateText(e) {
  var originLanguage = e.formInput.origin;
  var destinationLanguage = e.formInput.destination;
  var inputText = e.formInput.input;

  if (originLanguage !== destinationLanguage && inputText !== undefined) {
    var translation = LanguageApp.translate(e.formInput.input, e.formInput.origin, e.formInput.destination);
    return createSelectionCard(e, originLanguage, destinationLanguage, inputText, translation);
  }
}

/**
 * Helper function to clean the text.
 * @return {CardService.Card} The card to show to the user.
 */
function clearText(e) {
  var originLanguage = e.formInput.origin;
  var destinationLanguage = e.formInput.destination;
  return createSelectionCard(e, originLanguage, destinationLanguage, DEFAULT_INPUT_TEXT, DEFAULT_OUTPUT_TEXT);
}

/**
 * Helper function to get the text selected.
 * @return {CardService.Card} The selected text.
 */
function getDocsSelection(e) {
  var text = '';
  var selection = DocumentApp.getActiveDocument().getSelection();
  Logger.log(selection)
  if (selection) {
    var elements = selection.getRangeElements();
    for (var i = 0; i < elements.length; i++) {
      Logger.log(elements[i]);
      var element = elements[i];
      // Only modify elements that can be edited as text; skip images and other non-text elements.
      if (element.getElement().asText() && element.getElement().asText().getText() !== '') {
        text += element.getElement().asText().getText() + '\n';
      }
    }
  }

  if (text !== '') {
    var originLanguage = e.formInput.origin;
    var destinationLanguage = e.formInput.destination;
    var translation = LanguageApp.translate(text, e.formInput.origin, e.formInput.destination);
    return createSelectionCard(e, originLanguage, destinationLanguage, text, translation);
  }
}

/**
 * Helper function to get the text of the selected cells.
 * @return {CardService.Card} The selected text.
 */
function getSheetsSelection(e) {
  var text = '';
  var ranges = SpreadsheetApp.getActive().getSelection().getActiveRangeList().getRanges();
  for (var i = 0; i < ranges.length; i++) {
    const range = ranges[i];
    const numRows = range.getNumRows();
    const numCols = range.getNumColumns();
    for (let i = 1; i <= numCols; i++) {
      for (let j = 1; j <= numRows; j++) {
        const cell = range.getCell(j, i);
        if (cell.getValue()) {
          text += cell.getValue() + '\n';
        }
      }
    }
  }
  if (text !== '') {
    var originLanguage = e.formInput.origin;
    var destinationLanguage = e.formInput.destination;
    var translation = LanguageApp.translate(text, e.formInput.origin, e.formInput.destination);
    return createSelectionCard(e, originLanguage, destinationLanguage, text, translation);
  }
}

/**
 * Helper function to get the selected text of the active slide.
 * @return {CardService.Card} The selected text.
 */
function getSlidesSelection(e) {
  var text = '';
  var selection = SlidesApp.getActivePresentation().getSelection();
  var selectionType = selection.getSelectionType();
  if (selectionType === SlidesApp.SelectionType.TEXT) {
    var textRange = selection.getTextRange();
    if (textRange.asString() !== '') {
      text += textRange.asString() + '\n';
    }
  }
  if (text !== '') {
    var originLanguage = e.formInput.origin;
    var destinationLanguage = e.formInput.destination;
    var translation = LanguageApp.translate(text, e.formInput.origin, e.formInput.destination);
    return createSelectionCard(e, originLanguage, destinationLanguage, text, translation);
  }
}

appscript.json

{
  "timeZone": "America/New_York",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "oauthScopes": [
    "https://www.googleapis.com/auth/documents.currentonly",
    "https://www.googleapis.com/auth/spreadsheets.currentonly",
    "https://www.googleapis.com/auth/presentations.currentonly"
  ],
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "Translate",
      "logoUrl": "https://www.gstatic.com/images/branding/product/1x/translate_24dp.png",
      "layoutProperties": {
        "primaryColor": "#2772ed"
      },
      "homepageTrigger": {
        "runFunction": "onHomepage"
      }
    },
    "docs" : {},
    "slides" : {},
    "sheets" : {}
  }
}

ผู้ร่วมให้ข้อมูล

ตัวอย่างนี้ได้รับการดูแลโดย Google ด้วยความช่วยเหลือจากผู้เชี่ยวชาญของ Google

ขั้นตอนถัดไป

• ขยายการใช้งาน Google Workspace ด้วยส่วนเสริม
• สร้างส่วนเสริม Google Workspace
• เผยแพร่แอป