情報学概論Ⅱ 第13回

情報学概論2 第13回（7/14)

(Introduction to Informatics 2)

ファイルを使わない情報処理

今回は、これまでの流れと反対方向のことも経験しておこう。
今日は基本的にブラウザ内で（Googleのサーバ上で）作業する。
右図のような道具を順々に使っていく

1. アンケートのフォーム

これはこちらで用意したものを材料として使ってください。
適当に書き込んでみて下さい。
Google forms では、記入されたデータは Google SpreadSheet の形で集約される（ここ）。
- form の所有者と同じアカウントの者が、当該SpreadSheetの所有者になる（が、今は共有しているので皆さんが見られる筈です）。

2. 自分用のSpreadSheetを用意する

新規スプレッドシートを作成し、
importrange関数で、A1セル（から始まる４列の範囲）に、このシートから、

シート名「アンケート（実習用）（回答）」の、範囲 a1:d を取り込む。
- この関数に与える引数は、
  1. URLまたはスプレッドシートキー（URLの /d/ よりも後ろ）
  2. 「シート名！範囲」だが、単一シートなのでシート名は（!ごと）省略可。
  - いずれも文字列として与える。
このあと A〜D列はインポートされたデータに占拠されるので、E列以降に追加のデータは記入可能
例えば以下のような頻度統計を作ってもいい

F G

B列頻度

1

2

3

4

5
- G2 セルにこんな式を入れる。
```
=arrayformula(if(isblank(F2:F),"",countif(B$2:B,F2:F)))
```
もとの（共有された）SpreadSheetを、
- 「コピー」するのではない（コピーするとその時点のデータに固定される）
- 「リンク」するのでもない（リンク先としてもとのファイルが作業対象になる）
- import することで、
- 元シートを参照している範囲には、up to date な情報が反映され、
- それ以外の範囲は自分の自由に編集等が可能になる。

F	G
B列	頻度
1
2
3
4
5

3. GAS を使ってみる

解説

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

手順１（呼び出しまで）

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

で新しいタブが開く（これがApps Scriptエディタ; GASエディタなどとも呼ばれる）。
あらかじめ、「ファイルの追加」で HTMLファイルを１つ追加しておく。
- 名前は何でもいいがこの説明では「レポート.html」としておく。
- あとで引用するときには拡張子部分を除いた名前を文字列として渡すことになる。
- body 部分に適当にテキストやHTMLを書き加えてもいい。
Webアプリケーションとなる関数：以下をコード.gs に追加。
```
function doGet(e) {
  var tmpl=HtmlService.createTemplateFromFile('レポート')  // さっきのファイル名
  // ここにあとで行を追加する
  return tmpl.evaluate()   // ここはGASのお決まりの呼び方
}
```
- JS や HTMLのインデンテーションの調整には Ctrl-{, Ctrl-} といったショートカットが使える（Atomでも同様だが）ことは知っておくといい。
「デプロイ」操作（青いボタンから入る）
- まず「新しいデプロイ」の登録
  - 種類は「Webアプリ」
  - 基本的にはデフォルトのままでいいが、アクセス範囲は「長野大学内」ぐらいにしても大丈夫。
- 「承認」の操作が必要になることが多い（一回だけ）。自分が作ったスクリプト（これ）から、自分のシート（さっき作った）にアクセスすることを承認する、と考えていい。
- それ以降、Webアプリへのアクセスは、「デプロイのテスト」でトライすることができる。＝＞さっき作ったHTMLがページとして表示される筈。

手順２（データを表示する例）

table の準備
- アンケート結果のようなものは、Webページでは tableとして表示するのが一般的。
- なので、table の骨格を用意しておこう。
  - かといって HTMLで表を作るのは煩雑なので、
  - Atom の markdown モード（文法）で、
```
|回答|回答数|
|--|--|
|||
```
    のようなものを用意してから、
  - プレビュー画面で「Copy as HTML」したものを、
  - （ブラウザに戻って）「レポート.html」にコピペすると楽。
データの取得：
- 例えば前節で行った分析が表示される範囲を（JavaScriptの配列として）取り出す。
- 以下のコードを試しに（▷実行ボタンで）動かしてみよう。
```
function myFunction() {
  var r=SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange("f2:g6").getValues()
  console.log(r)
}
```
- ２列５行の範囲が、５要素の配列（各要素はさらに２要素の配列）としてgetできていることがわかる。
HTMLファイル（実はテンプレート）に渡す：
```
  tmpl.d=SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange("f2:g6").getValues()
```
この行を、doGet関数（の予定していた場所）に挟む。
出力させる：
- HTMLの中の、
```
<tr>
  <td></td>
  <td></td>
</tr>
```
  の部分（見出しの部分ではなく、tableの中身としての空っぽの列を表していた）を、以下のようなコードに書き換える。
```
<? d.forEach(v=>{ ?>
  <tr>
    <td> <?=  v[0] ?> </td>
    <td> <?=  v[1] ?> </td>
  </tr>
<? }) ?>
```
- これは、GASの中で使われるテンプレート言語。
  - 普通のタグはそのままHTMLとして扱われるが、
  - 中にクエスチョンマークを含むタグはJavaScriptのコードとして実行され、
  - <?= ?> の形で囲まれた式は、その式の値がページに表示される。
CSSの調整：
- 同じくHTMLの中（の、適切な部分）に、以下のようなCSS記述を入れておこう。
```
<style>
  table{border-collapse: collapse}
  td, th{border: 1px solid}
  th{background-color: #abcdef}
</style>
```
- この部分のデザインは適当でいい（もちろんCSSの文法に沿ってだが）。
- もちろん別ファイルにしてもいい。

参考：回答（いずれかの列）をすべて書き出すなら

アンケートの回答がいくつ入力されるか（SpreadSheetの行数）は予想がつなないので、範囲を予め指定しておくのは困難。こういう場合は、以下のような関数でデータをgetする。
```
tmpl.d=SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getDataRange().getValues().slice(1)
```
- データの存在する範囲に限定して（シートのすべてのデータを）取得してくれる。
- そこからプログラムで適切に必要なデータを選び出す必要がある。

課題

上記を実施してみて下さい。
この筋書き通りでもいいし、自分なりのデータ選別をして出力させてもいい。
経過（どんなことを考えて、どんな選択を行ったか、など）と、結果（どこまでできたか、Webアプリケーションとして成立したらそのURLも）を報告されたし。
- URL を提出する方は、そのURLに自分以外の者もアクセスできるよう、「デプロイの管理」画面で、共有範囲の調整をしておいて下さい。
それに加えて、（こういう情報処理のアプローチと出会ってみての）感想も、何かお書き下さい。