Google Apps Script: サーバーサイドJavaScriptってことは外部HTMLが解析できる

2016/06/17

[ad#top-1]

通常のWebサービスって、クライアントサイドにHTML/JavaScript、サーバーサイドにPHPを使うのが一般的なんですが、データベースへのアクセスとか外部ページのHTML解析なんかは、基本サーバーサイドでないと処理できません。JavaScriptでは処理できないんです。

ところが、Google Apps Scriptの場合、gsファイルはサーバーサイドなので、なんとサーバーサイドの処理をJavaScriptで実現できてしまうんです。その１つに今まで紹介してきたデータべースFusion Tablesへのアクセスなんですが、外部HTMLの解析もできてしまうんじゃないかと思って、ちょっとやってみました。結論を先に書くと「可能」です。

いきなりYahoo!みたいな大サイズのページを読み込むのもアレなので、まずはテスト用の簡単なページを用意しました。

http://pineplanter.moo.jp/test/

テストページのHTMLは以下の通りです。

<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8” />
<title>テスト</title>
</head>
<body>
<h1>テスト</h1>
<br/>
<p>
このページはテストです。
</p>
</body>
</html>

これをGoogle Apps Scriptから読み込みます。通常のクライアントサイドJavaScriptではできませんが、ここはサーバーサイドの強みです。

コード.gs

doGet()は今まで通りのものです。これはindex.htmlとコード.gsとを接続するための関数なのでテンプレです。getHTMLは、index.htmlから渡されたurlを読み込んで、HTMLタグを返す関数になります。

function doGet() {
  var t = HtmlService.createTemplateFromFile(‘index.html’);
  return t.evaluate();
}
function getHTML(url){
  var myXml = UrlFetchApp.fetch(url).getContentText();
  return myXml;
}

index.html

こちらは、[HTML読込]ボタンを押すことで、urlをコード.gsに投げて、受けた結果を<div id=”TEST”></div>内に表示させるものです。タグを表示させるために、”<” をエスケープ文字の”<”に変換しています。

<!DOCTYPE html>
<html>
   <head>
      <base target=“_top”>
      <title>Google Apps Script Test</title>
   </head>
   <script>
      function getHTML(){
          google.script.run.withSuccessHandler(result).getHTML(‘http://pineplanter.moo.jp/test/’);
          function result(data){
             data = data.replace(/</g, “&lt;”);
             document.getElementById(“TEST”).innerHTML = data;
          }
      }
   </script>
   <body>
      <h1>Google Apps Script Test</h1>
      <div></div>
      <div id=“TEST”></div>
      <button onclick=“getHTML()”>HTML読込</button>
   </body>
</html>