準備

新しいGoogleドキュメントを作成します。

新しい文書の中から、メニュー項目の[ツール]> [スクリプトエディタ]を選択します。ようこそ画面が表示されたら、[空のプロジェクト]をクリックします。

スクリプトエディタでコードを削除し、下のコードに貼り付けます。

/**
 * @OnlyCurrentDoc
 *
 */
 
/**
 * ドキュメントを開いたときに、GoogleドキュメントのUIにメニューを作成します。
 * このメソッドは通常のアドオンでのみ使用され、モバイルでは呼び出されません。
 *
 * @param {object} e 単純な onOpen トリガーのイベントパラメーターです。
 *     トリガーが実行されている認証モード（ScriptApp.AuthMode）を確認するには、
 *     e.authModeを調べます。
 */
function onOpen(e) {
  DocumentApp.getUi().createAddonMenu()
      .addItem('Start', 'showSidebar')
      .addToUi();
}

/**
 * アドオンがインストールされているときに実行されます。
 * モバイルでは動きません。
 *
 * @param {object} e 単純なonInstallトリガのイベントパラメータです。
 *     トリガーが実行されている認証モード（ScriptApp.AuthMode）を
 *     確認するには、e.authModeを調べます。（実際には、onInstall
 *     トリガーは常にAuthMode.FULLで実行されますが、onOpenトリガーは
 *     AuthMode.LIMITEDまたはAuthMode.NONEです。）
 */
function onInstall(e) {
  onOpen(e);
}

/**
 * サイドバーを開きます。
 * モバイルでは動きません。
 */
function showSidebar() {
  var ui = HtmlService.createHtmlOutputFromFile('Sidebar')
      .setTitle('Translate');
  DocumentApp.getUi().showSidebar(ui);
}

/**
 * ユーザーが選択したテキストを取得します。
 * 選択がない場合は、エラーメッセージを表示します。
 *
 * @return {Array.} 選択されたテキスト
 */
function getSelectedText() {
  var selection = DocumentApp.getActiveDocument().getSelection();
  if (selection) {
    var text = [];
    var elements = selection.getSelectedElements();
    for (var i = 0; i < elements.length; i++) {
      if (elements[i].isPartial()) {
        var element = elements[i].getElement().asText();
        var startIndex = elements[i].getStartOffset();
        var endIndex = elements[i].getEndOffsetInclusive();

        text.push(element.getText().substring(startIndex, endIndex + 1));
      } else {
        var element = elements[i].getElement();
        // テキストとして編集できる要素のみを翻訳します。
        // 画像やその他のテキスト以外の要素をスキップします。
        if (element.editAsText) {
          var elementText = element.asText().getText();
          // このチェックは、画像を除外して空のテキスト要素を返すために必要です。
          if (elementText != '') {
            text.push(elementText);
          }
        }
      }
    }
    if (text.length == 0) {
      throw 'Please select some text.';
    }
    return text;
  } else {
    throw 'Please select some text.';
  }
}

/**
 * 設定されているオリジナルの言語と目的の言語（翻訳後）を取得します。
 * モバイルでは動きません。
 *
 * @return {Object} オリジナルの言語と目的の言語
 */
function getPreferences() {
  var userProperties = PropertiesService.getUserProperties();
  var languagePrefs = {
    originLang: userProperties.getProperty('originLang'),
    destLang: userProperties.getProperty('destLang')
  };
  return languagePrefs;
}

/**
 * ユーザーが選択したテキストを取得し、オリジナルの言語から目的の言語
 * （翻訳後）に変換します。言語は2文字の短い形式で表記されています。
 * たとえば、英語は「en」、スペイン語は「es」です。
 * オリジナルの言語は、Google Translateが自動的にその言語を検出する
 * ことを示す空の文字列として指定することができます。
 *
 * @param {string} origin オリジナルの言語の２文字の短縮形
 * @param {string} dest 目的の言語の２文字の短縮形
 * @param {boolean} savePrefs オリジナルの言語と目的の言語を保存するかどうか
 * @return {Object} 元のテキストと翻訳後のテキストを含むオブジェクト
 */
function getTextAndTranslation(origin, dest, savePrefs) {
  var result = {};
  var text = getSelectedText();
  result['text'] = text.join('\n');

  if (savePrefs == true) {
    var userProperties = PropertiesService.getUserProperties();
    userProperties.setProperty('originLang', origin);
    userProperties.setProperty('destLang', dest);
  }

  result['translation'] = translateText(result['text'], origin, dest);

  return result;
}

/**
 * 現在の選択範囲のテキストを指定されたテキストに置き換えるか、
 * 現在のカーソル位置にテキストを挿入します。
 * 複数の要素が選択されている場合は、テキストを含むことができる
 * 最初の要素に翻訳されたテキストを挿入し、他の要素を削除します。
 *
 * @param {string} newText 現在の選択を置き換えるテキスト
 */
function insertText(newText) {
  var selection = DocumentApp.getActiveDocument().getSelection();
  if (selection) {
    var replaced = false;
    var elements = selection.getSelectedElements();
    if (elements.length == 1 &&
        elements[0].getElement().getType() ==
        DocumentApp.ElementType.INLINE_IMAGE) {
      throw "Can't insert text into an image.";
    }
    for (var i = 0; i < elements.length; i++) {
      if (elements[i].isPartial()) {
        var element = elements[i].getElement().asText();
        var startIndex = elements[i].getStartOffset();
        var endIndex = elements[i].getEndOffsetInclusive();

        var remainingText = element.getText().substring(endIndex + 1);
        element.deleteText(startIndex, endIndex);
        if (!replaced) {
          element.insertText(startIndex, newText);
          replaced = true;
        } else {
          // このブロックは、部分的な要素で終わる選択を処理します。
          // この部分テキストを前の要素にコピーして、最後の部分的な
          // 部分の前に改行がないようにします。
          var parent = element.getParent();
          parent.getPreviousSibling().asText().appendText(remainingText);
          // ドキュメントの最後の段落は削除できません。
          // この場合は、代わりに最後の段落内のテキストを
          // 削除してください。
          if (parent.getNextSibling()) {
            parent.removeFromParent();
          } else {
            element.removeFromParent();
          }
        }
      } else {
        var element = elements[i].getElement();
        if (!replaced && element.editAsText) {
          // テキストとして編集できる要素のみを翻訳し、
          // 他の要素は削除しないでください。
          element.clear();
          element.asText().setText(newText);
          replaced = true;
        } else {
          // ドキュメントの最後の段落は削除できません。
          // このような場合は、要素をクリアしてください。
          if (element.getNextSibling()) {
            element.removeFromParent();
          } else {
            element.clear();
          }
        }
      }
    }
  } else {
    var cursor = DocumentApp.getActiveDocument().getCursor();
    var surroundingText = cursor.getSurroundingText().getText();
    var surroundingTextOffset = cursor.getSurroundingTextOffset();

    // カーソルがスペース以外の文字の前または後にある場合は、
    // 文字と翻訳の間にスペースを挿入します。
    // それ以外の場合は、翻訳を挿入するだけです。
    if (surroundingTextOffset > 0) {
      if (surroundingText.charAt(surroundingTextOffset - 1) != ' ') {
        newText = ' ' + newText;
      }
    }
    if (surroundingTextOffset < surroundingText.length) {
      if (surroundingText.charAt(surroundingTextOffset) != ' ') {
        newText += ' ';
      }
    }
    cursor.insertText(newText);
  }
}


/**
 * Google翻訳を使って翻訳をします。
 * 言語は2文字の短い形式で表記されています。
 * たとえば、英語は「en」、スペイン語は「es」です。
 * オリジナル言語は、Google Translateが自動的にその言語を検出することを示す
 * 空の文字列として指定することができます。
 *
 * @param {string} text 翻訳するテキスト
 * @param {string} origin オリジナルの言語の２文字の短縮形
 * @param {string} dest 目的の言語の２文字の短縮形
 * @return {string} 翻訳の結果
 */
function translateText(text, origin, dest) {
  if (origin === dest) {
    return text;
  }
  return LanguageApp.translate(text, origin, dest);
}

メニューから[ファイル] > [新規作成] > [HTMLファイル] 選択して新しいファイルを作成します。ファイルに「Sidebar」という名前を付けます。

新しいエディタタブでコードを削除し、下のコードに貼り付けます。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <!-- The CSS package above applies Google styling to buttons and other elements. -->

    <style>
    .branding-below {
      bottom: 56px;
      top: 0;
    }

    .branding-text {
      left: 7px;
      position: relative;
      top: 3px;
    }

    .col-contain {
      overflow: hidden;
    }

    .col-one {
      float: left;
      width: 50%;
    }

    .logo {
      vertical-align: middle;
    }

    .radio-spacer {
      height: 20px;
    }

    .width-100 {
      width: 100%;
    }
    </style>
  </head>
  <body>
    <div class="sidebar branding-below">
      <form>
        <div class="block col-contain">
          <div class="col-one">
            <b>Selected text</b>
            <div>
              <input type="radio" name="origin" id="radio-origin-auto" value="" checked="checked">
              <label for="radio-origin-auto">Auto-detect</label>
            </div>
            <div>
              <input type="radio" name="origin" id="radio-origin-en" value="en">
              <label for="radio-origin-en">English</label>
            </div>
            <div>
              <input type="radio" name="origin" id="radio-origin-fr" value="fr">
              <label for="radio-origin-fr">French</label>
            </div>
            <div>
              <input type="radio" name="origin" id="radio-origin-de" value="de">
              <label for="radio-origin-de">German</label>
            </div>
            <div>
              <input type="radio" name="origin" id="radio-origin-ja" value="ja">
              <label for="radio-origin-ja">Japanese</label>
            </div>
            <div>
              <input type="radio" name="origin" id="radio-origin-es" value="es">
              <label for="radio-origin-es">Spanish</label>
            </div>
          </div>
          <div>
            <b>Translate into</b>
            <div class="radio-spacer">
            </div>
            <div>
              <input type="radio" name="dest" id="radio-dest-en" value="en">
              <label for="radio-dest-en">English</label>
            </div>
            <div>
              <input type="radio" name="dest" id="radio-dest-fr" value="fr">
              <label for="radio-dest-fr">French</label>
            </div>
            <div>
              <input type="radio" name="dest" id="radio-dest-de" value="de">
              <label for="radio-dest-de">German</label>
            </div>
            <div>
              <input type="radio" name="dest" id="radio-dest-ja" value="ja" checked="checked">
              <label for="radio-dest-ja">Japanese</label>
            </div>
            <div>
              <input type="radio" name="dest" id="radio-dest-es" value="es">
              <label for="radio-dest-es">Spanish</label>
            </div>
          </div>
        </div>

        <div class="block form-group">
          <label for="translated-text"><b>Translation</b></label>
          <textarea class="width-100" id="translated-text" rows="10"></textarea>
        </div>

        <div class="block">
          <input type="checkbox" id="save-prefs">
          <label for="save-prefs">Use these languages by default</label>
        </div>

       <div class="block" id="button-bar">
          <button class="blue" id="run-translation">Translate</button>
          <button id="insert-text">Insert</button>
        </div>
      </form>
    </div>

    <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() {
        $('#run-translation').click(runTranslation);
        $('#insert-text').click(insertText);
        google.script.run.withSuccessHandler(loadPreferences)
            .withFailureHandler(showError).getPreferences();
      });

      /**
       * サーバーから渡されたオリジナルの言語と目的の言語を設定するための
       * コールバック関数。
       *
       * @param {Object} languagePrefs 保存されたオリジナルの言語と目的の言語
       */
      function loadPreferences(languagePrefs) {
        $('input:radio[name="origin"]')
            .filter('[value=' + languagePrefs.originLang + ']')
            .attr('checked', true);
        $('input:radio[name="dest"]')
            .filter('[value=' + languagePrefs.destLang + ']')
            .attr('checked', true);
      }

      /**
       * サーバーサイドで翻訳を実行して、サイドバーの結果を更新します。
       */
      function runTranslation() {
        this.disabled = true;
        $('#error').remove();
        var origin = $('input[name=origin]:checked').val();
        var dest = $('input[name=dest]:checked').val();
        var savePrefs = $('#save-prefs').is(':checked');
        google.script.run
            .withSuccessHandler(
              function(textAndTranslation, element) {
                $('#translated-text').val(textAndTranslation.translation);
                element.disabled = false;
              })
            .withFailureHandler(
              function(msg, element) {
                showError(msg, $('#button-bar'));
                element.disabled = false;
              })
            .withUserObject(this)
            .getTextAndTranslation(origin, dest, savePrefs);
      }

      /**
       * サーバー側の機能を実行して、翻訳されたテキストをユーザーのカーソルに
       * 挿入または選択したテキストを置き換えます。
       */
      function insertText() {
        this.disabled = true;
        $('#error').remove();
        google.script.run
            .withSuccessHandler(
              function(returnSuccess, element) {
                element.disabled = false;
              })
            .withFailureHandler(
              function(msg, element) {
                showError(msg, $('#button-bar'));
                element.disabled = false;
              })
            .withUserObject(this)
            .insertText($('#translated-text').val());
      }

      /**
       * 指定された要素（element）にエラーメッセージを含むdivタグを挿入します。
       *
       * @param msg 表示するエラーメッセージ
       * @param element エラーを表示する要素
       */
      function showError(msg, element) {
        var div = $('<div id="error" class="error">' + msg + '</div>');
        $(element).after(div);
      }
    </script>
  </body>
</html>

メニューの [ファイル] > [すべてを保存] を選択します。新しいプロジェクト名を「Translate Quickstart」とし、「OK」をクリックします（プロジェクトの名前は、承認ダイアログを含むいくつかの場所のエンドユーザーに表示されます）。

実行

ドキュメントに戻ってページをリロードしてください。アドオンが読み込まれるまで数秒待ちます。

メニュー [アドオン] > [Translate Quickstart] > [Start] を選択します。（スクリプトに別の名前を選択した場合は、代わりにその名前が表示されます）

３.
承認が必要となるので[継続]ボタンを選択してください。

４.
[許可]ボタンを選択してください。

５.
サイドバーが表示されます。
ドキュメントにテキストを入力し、それを選択して青の翻訳ボタンをクリックします。ドキュメント内のテキストを置き換えるには、[Insert]ボタンをクリックします。