本記事では Google Apps Script (GAS) を使用して外国語のあるページの特定の部分だけ抜き出し（=スクレイピング）、それをGoogle翻訳を利用して翻訳するページの作成方法を紹介します。

機能#####

ページのボックスに翻訳したいサイトのurlをコピペして送信。同じ画面にオリジナルテキスト&Google翻訳にかけたテキストを表示。

概要#####

モチベーション
- 普段、スクレイピングをする場合にはPythonでプログラムを書くのですが、コマンドラインからしか使えないのを不満に思い、GUIを実装できないか、と考えた。
- 自由に使えるサーバーを持っていないのでGASを使ってみようと思った。
こんな人にオススメ
- あるウェブサイトの一部のみコピー & Google翻訳にペーストを頻繁にする。具体的には曲の歌詞のサイト(Lyrics™やLetras)の歌詞を任意の言語に翻訳するなど。

実装方法#####

スクレイピング
今回のステップは全部で3段階。
2. スクレイピングをしたいサイトのHTMLを取得。UrlFetchApp.fetch("取得したいurl").getContentText()で一発。(GASのスクレイピングはなんと言っても環境構築をする必要がないのが魅力。)
1. 正規表現を用いて取得したい部分を検索。GASの正規表現では/<取得したいタグ名>([\s\S]*?)<\/取得したいタグ名>/でmatchさせてやるのが一番シンプルかと思います。閉じるタグの/はエスケープしてやらないと動きません。
2. 成型。例えば、Lyrics™では<pre id="lyric-body-text" class="lyric-body" dir="ltr" data-lang="en">で取得できる地の文には<a>タグが含まれているので、それらをreplaceで削除してあげます。
Google翻訳
これも至って簡単でLanguageApp.translate("翻訳したい文", '翻訳元言語の言語コード', '翻訳先言語の言語コード')としてやればOK.
doGet & doPost 関数
この二つの関数はGASの要となる関数です。ひとまずはdoGetはこのページを開いたときにされる動作、doPostはページに入力された情報を取得、くらいの理解で問題ないかと思います。
1. doGet関数。HtmlService.createTemplateFromFile("HTMLファイル名").evaluate().setTitle("ページタイトル名")でページを開いたときの画面とページのタイトル名を指定することができます。HTMLファイルについては後述します。ページタイトルはタブに表示される文字列のことです。
2. doPost関数。この関数内ではじめのページで受け取ったurlからスクライピング&成型&Google翻訳を経て異なるHTMLファイルとして表示する。returnする関数はdoGet関数と同じもの。
GUI作成
2種類のHTMLファイルを作成します。
4. 最初のページにはテキストをインプットする場所とsubmitボタンがあればOKです。他はお好みで。
5. 2番目のページは完全にお好み。

実際のコード#####

例としてLyrics™の歌詞画面の英日翻訳ページを作成してみます。

Example.js


function scrapingFromUrl(url) {
  var data = UrlFetchApp.fetch(url).getContentText();
  var myRegex = /<pre id="lyric-body-text" class="lyric-body" dir="ltr" data-lang="en">([\s\S]*?)<\/pre>/;
  var elem = data.match(myRegex)[0];
  elem = elem.replace(/<\/(a|pre)>/g, "").replace(/<(a style([\s\S]*?)|pre id="lyric-body-text" class="lyric-body" dir="ltr" data-lang="en)">/g, "");
  return elem;
}

function doGet() {
  return HtmlService.createTemplateFromFile("HTMLファイル名（遷移前）").evaluate().setTitle("ページタイトル");
}

function doPost(e) {
  var url = e.parameter.url;
  var original = scrapingFromUrl(url);
  var japanese = LanguageApp.translate(original, 'en', 'ja');
  
  result = HtmlService.createTemplateFromFile("HTMLファイル名（遷移後画面）");

//値をHTML（遷移後）に引き継ぐ
  result.original = original;
  result.japanese = japanese;
  
  return result.evaluate().setTitle("ページタイトル");
}

遷移前ページの<body>

example.html

<body>
    <form method="post" action="実際のGASのページのurl">
      <p>
        <label>翻訳したいページのURLを入力してください<br>
        <input type="text" name="url">
        </label>
      </p>
      <p>
        <input type="submit" value="submit">
      </p>
    </form>
  </body>

遷移後ページの<body>

example2.html

  <body>
    <h1>Original version</h1>
    <p>
    <?=original?>
    </p>
    <h1>Translation</h1>
    <p>
    <?=japanese?>
    </p>
  </body>

mainコードで定義した関数を<?= >で囲うことで引き継げる。

まとめ#####

このようなシンプルなコードでスクレイピング&Google翻訳を行うサイトを作成することができます。サーバー不要、環境構築不要はGASの大きな魅力ですね！いろいろな応用が考えられると思いますので、様々なページで試してみてくださいね！（ただし、スクレイピングが違法となるサイトもあるので注意です。）

感想#####

今回GASを初めて触ってみました。何点か引っかかりつつも、比較的短時間で使えるページを作成することができました。（更新するたびにversionをnewに変えないといけないことに気がつかずに時間を無駄にしました。）主にGoogleのサービスと組み合わせていろいろな自動化ができそうです。モバイル媒体からだとページを動かせなかったので今後はこのページの内容をLINE Botとして作成してみたいと考えています。Qiitaデビューでした。