ネットワーク構築論第14回

ネットワーク構築論第14回 7/23

Building Network and Services

クラウドスクリプティング（新しい選択肢）

比較的新しい話題であり、他の科目との内容の重複もあるが、当科目でもこの技術 Google Apps Script (GAS) を紹介しておく。
- たとえば昨年までの情報学概論Ⅱでも扱っている。
  - SpreadSheetのデータをデータベースとして扱う技術はこちらを参照ください（Google Forms 〜 SpreadSheet　の流れは今回はパス）。
  また過去に平岡ゼミでも紹介済
- すでに経験済の人は復習、補強（重複しない内容もある）に活用ください。
- 今回の課程で扱わない内容もあるので、他の科目資料も参考にしてください。
今日は、前回 Rails の Scaffold で作らせた memo アプリケーションに近い機能を、クラウド上に実現する簡便（といっても以下のようにかなり煩雑ではあるが）な方法を見てみる。
- 本格的な（一般公開して広くユーザを支える）Webサイト/Webアプリケーションを提供する場合は（サーバを自主運用するのでなければ） AWS, Azure などのクラウドサービスを活用することになる（課金方法を含めたユーザ登録が必要になる）。
- このGASによる開発も、本格的な運用を考えるときには Googleのクラウド（GCP）の利用を視野に入れることになる（が、今回はそこまではいかない）。
今日は基本的にブラウザ内で（Googleのサーバ上で）作業する。

1. 空のSpreadSheetを用意する

新規スプレッドシートを作成。
- 今回はここは空っぽでいい。
  - が、前回のメモアプリを想定して１行目にタイトル行を用意しておいていい
    
    日付題名内容
- 名前などは適当に。

2. GAS に移行

解説

GASエディタ上で、JavaScript言語の（自分が作った関数つまりプログラムの）実行ができる
サーバ上で待ち受けてJavaScript関数を呼び出し、Webアプリケーションにすることもできる。
- ということは、Webサーバーを持たなくてもWebアプリケーションが持てる。

手順と解説

SpreadSheetの（他のアプリケーションからも行けるが今回はここから）拡張機能->Apps Script

で新しいタブが開く（これがApps Scriptエディタ; GASエディタなどとも呼ばれる）。
- 直接 GAS のプロジェクトを作ることもできるが、特に開発者としてGoogleに登録していない場合、このプロジェクトが連携するアプリケーションを保持しておいた方がスムーズに行くようだ。
あらかじめ、「ファイルの追加」で HTMLファイルを１つ追加しておく。
- 名前は何でもいいがこの説明では「index.html」としておく。
- あとで引用するときには拡張子部分を除いた名前を文字列として渡すことになる。
- body 部分に適当にテキストやHTMLを書き加えてもいい。
Webアプリケーションとなる関数：以下をコード.gs に追加。
```
function doGet(e) {
  var tmpl=HtmlService.createTemplateFromFile('index')  // さっきのファイル名
  // ここにあとで行を追加する
  return tmpl.evaluate()   // ここはGASのお決まりの呼び方
}
```
- 用意したHTMLをただ表示するだけなら HtmlService.createHtmlOutputFromFile('index') でいいのだが、あとで拡張する（値をページ内に展開させる）ため上記の関数を呼び出しておく。
- JS や HTMLのインデンテーションの調整には Ctrl-[, Ctrl-] といったショートカットが使える（Atomでも同様だが）ことは知っておくといい。
「デプロイ」操作（青いボタンから入る）
- まず「新しいデプロイ」の登録
  - 種類は「Webアプリ」
  - 基本的にはデフォルトのままでいいが、アクセス範囲は「長野大学内」ぐらいにしても大丈夫。
- 「承認」の操作が必要になることが多い（一回だけ）。自分が作ったスクリプト（これ）から、自分のシート（さっき作った）にアクセスすることを承認する、と考えていい。
- それ以降、Webアプリへのアクセスは、「デプロイのテスト」でトライすることができる。＝＞さっき作ったHTMLがページとして表示される筈。
HTMLに仕組みを仕込む（１）: 入力のためのフォーム（ここではHTMLの手打ちが必要になる）
```
<form id="newData">
   題名: <input type="text" name="title">
   内容: <input type="text" name="content">
   <input type="button" value="入力" onclick="sendIt()">
</form>
```
- form に付与したid や、input に付与した name は、あとで使います。
- ボタンクリック時の動作（関数呼び出し）の内容は、あとで用意しましょう。
- 念のためこの時点で、あらためてデプロイのテストで表示を確認しておくといい。
- かっこよく表示させるためには、このHTMLの中にstyleタグでCSSを書き込むことが必要になるが今日は基本的にパス（あとで少し使うが）。
入力動作
- HTML側とコード側の両方に分けてJavaScriptのコードをしくむ必要がある
  - 前者はブラウザ内で実行され、後者はGASの空間で呼び出される
- コード側（受け皿）
```
function addData(ary) {
  const sheet = SpreadsheetApp.getActiveSheet() // ①最初につくったSheetにアクセスするためのハンドル
  sheet.appendRow(ary)
}
function addFromForm(form) {
  addData([new Date(), form.title, form.content])()
}
```
  - この処理は１つの関数にまとめることもできるが、あとの拡張のために２つに分けてあることを了承されたい。
  - sheet の取得の書き方を、上記ではちょっと手抜きで書いている（たぶんこれでも動く）。正確に書くとこうなる（動かないときはこちらで書いてください）
```
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet()
```
- HTML側（呼び出しのトリガー）
```
<script>
function sendIt() {
   const form = document.getElementById("newData")
   google.script.run.addFromForm(form)
}
</script>
```
- これでテータの追加ができる筈（ためしてみて下さい）
- 日付の取得については手抜きをしています。ちょっと見苦しいけど。

データの一覧表示

まずHTML内に表示する場所を tableタグで用意する（この中にテンプレート領域や繰り返しのためのJSコードが仕組まれている）
```
<table>
  <tr><th>日付</th><th>題名</th><th>内容</th></tr>
  <? for(i=1 ; i<val.length ; i++) { ?> 
  <tr>
    <td><?= val[i][0] ?></td>
    <td><?= val[i][1] ?></td>
    <td><?= val[i][2] ?></td>
  </tr>
  <? } ?>
</table>
```
- よくあるテンプレートの形（GASでは <? ... ?> の表記）が見られる
- シートのタイトル行を無視するするためループは（0でなく）1から開始している
- val という変数（JS用語で言えばオブジェクトのプロパティ）は、このテンプレートが参照される前に与えられることを前提にしている（↓ この GAS側のJSのコードを参照）。

コードの追加

function showPage(){
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet()
  const values = sheet.getDataRange().getValues()
  // これでシートの中のデータを２次元配列として取得した 
  const template = HtmlService.createTemplateFromFile('index')
  template.val=values
  return template.evaluate()
} // この関数を用意して、doGetから呼ぶようにしよう
function doGet(e) {
  return showPage()
}

体裁の調整
- テーブルに枠がないと見にくいね
```
<style>
table, td ,th {
  border:1px solid #333;
  border-collapse: collapse;
}
</style>
```
  - もちろんこれはHTMLの中に埋め込む（CSSの別ファイルにするほどの量でもないので）
- 入力した時に応答がないと使いづらいね
```
form.reset()
var url = ScriptApp.getService().getUrl()
window.open(url,'_top')
```
  - これはブラウザ側で実行する（ので、HTML内のscriptで、さっき sendIt() として定義した関数の中（GASの関数を呼んで送信、が終わってからの場所）に追加する。
API化（これでスプレッドシートが簡易データベースとして外部ページから使える
- ここまで見てきたコードは、doGet で簡易アプリケーションのページを表示してきた。
  - このときこのページのURL（デプロイされたアドレス）は、URLパラメータなしで呼ばれる。
  - APIとして呼ぶときにはこのURLにパラメータを何かつけて呼ぶのが一般的
  - なので e.parameters （配列）が要素を持つかどうかで判断しよう。
```
function doGet(e) {
  if( Object.keys(e.parameters).length == 0)
     return showPage()
  else if(e.parameter.list != undefined) 
     return ContentService.createTextOutput(JSONoutput())
  else if(e.parameter.title && e.parameter.content)
     return addFromParam(e.parameters)
  else
     return ContentService.createTextOutput("parameter error")
}
```
- データを追加するAPIはこんな感じになるかな
  - URLの後ろにパラメータ文字列として ?title=...&content=.... が付加されるとして、
```
function addFromParam(param) {
  addData([new Date(), String(param.title), String(param.content)])
  return ContentService.createTextOutput("ok")
}
```
  - 前に作った addData はそのまま活用できそう（そのために二階建にした）。
- データ全体をJSON形式でそのまま返すAPIも作っておこう
```
function JSONoutput() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet()
  return JSON.stringify(sheet.getDataRange().getValues())
}
```

課題

上記を実施してみて下さい。
この筋書き通りでもいいし、自分なりのデータ選別をして出力させてもいい。
経過（どんなことを考えて、どんな選択を行ったか、など）と、結果（どこまでできたか、Webアプリケーションとして成立したらそのURLも）を報告されたし。
それに加えて、（こういうサービス構築のアプローチと出会ってみての）感想も、何かお書き下さい。

ネットワーク構築論 第14回 7/23

クラウドスクリプティング（新しい選択肢）

1. 空のSpreadSheetを用意する

2. GAS に移行

解説

手順と解説

課題

ネットワーク構築論第14回 7/23