Google Apps Script(GAS)でNCBIのAPI(E-Utils)を使えるようにする

前回はPythonプログラムを使ってローカル環境からNCBIのAPI(E-Utils)にアクセスし、PMIDからDOIを取得しました。

https://qiita.com/TatsuokaH/items/d8315458632bcd79f5a9

今回は、Google Apps Script(GAS)を使用して、同じ作業を行えるwebアプリを作成したいと思います。

記載時：2021/9/13
環境：Google Apps Script(GAS) (Safari 14.1.2で編集)

#1. 完成イメージ図

このように、テキストボックスに数値を入力することで、DOIを返すページを表示します。
(現在時刻もついでに表示しています)

<img width="500px" alt="index.html" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590859/cccd1ef7-b815-634e-ff21-4011acaf290f.png">
↓
<img width="300px" alt="index.html" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590859/5973c0c2-c275-c117-6718-d2e058d5c9c4.png">


css用のページも作成していますが、説明では省略します。

#2. GASでindexページを作成する。
まずはindexページを作成しておきます。

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <base target="_top">
  </head>
  <body>
    <header>
    </header>
    <main>
      <section>
        <p></p>
        <p>今日の日付は<?= new Date(); ?>です。</p>
        <form method="post" action="https://script.google.com/macros/s/xxxxxxxx/exec"> //アプリのURLを指定します
          <label>PubMed ID <input type="text" name="pmid"></label>
          <input type="submit" value="DOIを調べる">
        </form>
      </section>
    </main>
  </body>
</html>
```

formはpostで、nameに"pmid"を付与します。actionにはデプロイ後にアプリURLを指定します。

#3. 結果を出力するresultページも作成しておく。
```html:result.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <header>
    </header>
    <main>
    <section>
      <p>検索結果</p>
      <table>
        <tbody>
          <tr>
            <td>PubMed ID</td>
            <td><?=pmid ?></td>
          </tr>
          <tr>
            <td>DOI</td>
            <td><?=doi ?></td>
          </tr>
        </tbody>
      </table>
    </section>
    </main>
  </body>
</html>
```

検索結果には入力したPMIDと、APIの返すDOIをtable形式で表示させます。
それぞれpmid、doiという名前のオブジェクトで返すことにします。

#4. code本体を作成する。
```JAVASCRIPT:code.gs
// index.htmlを呼び出すコード
function doGet() {
  var template = "index";
  return HtmlService.createTemplateFromFile(template).evaluate();
}

function doPost(e) {
  let pmid = e.parameter.pmid;　// 入力された値を取得

// ベースとなるURLを指定  
let url1 = "https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi";
// 入力値(PMID)を用いてクエリパラメータを作成　出力はJSON
let param =  "db=pubmed&id=" + pmid + "&rettype=null&retmode=json" 

// 結果のjsonデータを取得し、parseする
let json = UrlFetchApp.fetch(url1+"?"+param);
let jsonData = JSON.parse(json);

  htmlTemplate = HtmlService.createTemplateFromFile("result"); //result.htmlを指定
  htmlTemplate.pmid = pmid; //pmidにはpmidパラメータを用いる
  htmlTemplate.doi = jsonData["result"][pmid]["articleids"][1]["value"]; //jsonDataの中からDOIの箇所を取得
  
// 結果を表示
  return htmlTemplate.evaluate();
}

```

まず、お決まりのdoGet関数でindex.htmlを表示。
次に入力されたpmidパラメータを受け取って、UrlFetchAppでAPIからデータを取得して、JSON.parseでJavaScriptオブジェクトに変換します。クエリパラメータに"retmode=json"を入力しておき、JSONで取得するのがポイントです。
htmlTemplateにresult.htmlを代入し、そのpmidパラメータに引数のpmidを、doiパラメータに取得したデータの中からdoiに該当する部分を抽出して渡します。まとめてreturnで表示すれば完成です。
最後に、アプリをデプロイした後、アプリURLをindex.htmlのactionの"`https://script.google.com/macros/s/xxxxxxxx/exec`"に書き加えると完成です。

#参考にした資料
GASからのhtml表示方法

https://qiita.com/taromorimotohf/items/5e52cb9062600e8ccac3

JSONデータをJavaScriptオブジェクトにして処理する方法

https://qiita.com/mitsuhiro_K/items/2d179632f62a591a1582