20260526_アプリ開発部門第2回
書いた人Nagaya_king.icon
Webアプリを作ろう
前回はGASをもちいて、簡単なタスク管理システムを作成しました。今回はそのタスク管理システムをWebアプリに昇華させましょう。
Webアプリを作動させよう
前回作成したコード.gsを起動して以下のコードを追加してください。
code:コード.js
function doGet() {
return HtmlService
.createTemplateFromFile('index')
.evaluate();
}
追加できたら、
Apps Scriptの「ファイル」から「ファイルを追加」、「HTML」を選択
ファイル名をindexとしてください
index.htmlができたら成功です
index.htmlの中身を書き換えてみましょう
code:index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
これで準備は整いました。今作成したものを起動してみましょう。
index.htmlの右上の「デプロイ」から「新しいデプロイ」を選択
「種類の選択」の歯車アイコンから「ウェブアプリ」を選択
「次のユーザーとして実行」は「自分」、「アクセスできるユーザー」は「自分のみ」を選択
「デプロイ」を選択
作成されたURLをクリック
https://scrapbox.io/files/6a1538a165e24daf8cb8ca32.png
このような画面になっていたら成功です。
Webサイトに期限が近い宿題を表示しよう
それでは作成したWebサイトに期限が近い（今回は1週間）宿題を表示してみましょう。
まずは、期限が近い宿題の要素をスプレッドシートから取得する関数を考えてみましょう。
新たに、コード.gsにgetEmgHomework関数を定義します。（前回作成したコードをは削除しないでください）
code:コード.js
function getEmgHomework() {
}
getEmgHomework関数はスプレッドシートから日付の列を取得して、条件分岐を用いて、期限が1週間を切っている行番号をを取得しその宿題の内容を行ごと取得する関数とします。よってコードは以下の通りです。
code:コード.js
function getEmgHomework() {
const sheet = SpreadsheetApp.getActiveSheet();
const now = new Date();
const now_num = now.getTime();
const sevenDay = 7 * 24 * 60 * 60 * 1000;
const deadlines = sheet.getRange("D:D").getValues();
const eHomeworks = [];
// 宿題の期限まで1週間を切っているものの行の要素を取得する
for(i = 1; i < deadlines.length; i ++) {
let n = new Date(deadlinesi0) let num = n.getTime();
if(now_num + sevenDay > num){
eHomeworks.push(sheet.getRange(i+1, 2, 1, 4).getValues()0) }
}
return eHomeworks;
}
時間の比較はgetTimeメソッドを使用しています。getDaysなどを用いるとだいたい変なことになります。
ちなみにですが、CalendarAppクラスを用いて宿題を取得したほうが簡単です。
これで期限が近い宿題の配列を取得することができました。
続いて、index.htmlに変数を渡してみましょう。通常htmlファイルにJavaScriptファイルから変数を渡すのは容易ではありません。ですが、GASには標準で変数を渡すための処理が用意されています。
コード.gsのdoGet関数を以下のように書き換えてください
code:コード.js
function doGet() {
const html = HtmlService.createTemplateFromFile('index');
const rows = getEmergencyHomework();
return html.evaluate();
}
html["rows"] = rowsはhtmlファイルで使用するrowsという変数はrowsの値を使いますよということを宣言しています。これでhtmlファイルに変数を渡すことができました。
最後にhtmlファイルで変数を扱うことを考えましょう。先程の処理でhtmlで変数を扱うことができるようになりましたが、通常htmlに変数というものは存在しません。変数はGASで使用します。htmlでGASを記述できるようにするには<? ?>で囲う必要があります。index.htmlをいかに書き換えてください
code:index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<?
num = 5;
output.append(<h1>+ num + </h1>);
?>
</body>
</html>
https://scrapbox.io/files/6a17ce3065e24daf8cbddc9c.png
大きい5が表示されれば成功です。output.appendを使用することで引数の文字列をhtmlとして変換することができます。
それでは、先程htmlに渡したrowsの中身を表示させていきましょう。rowsは二次元配列になっていますから、for文を二重で使用すれば表示できそうです。
code:index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<?
for(i = 0; i < rows.length; i++) {
for(j = 0; j< rowsi.length; j ++) { output.append(<p>+ rowsij + </p>); }
}
?>
</body>
</html>
最後にHTMLの表形式に整えましょう。HTMLの表は少しややこしいので調べながらやってみましょう。
code:index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>期限が近い宿題一覧</h1>
<table>
<thead>
<tr>
<th>科目</th>
<th>宿題名</th>
<th>期限（日付）</th>
<th>期限（時刻）</th>
</tr>
</thead>
<tbody>
<?
for(i = 0; i < rows.length; i++) {
output.append(<tr>);
for(j = 0; j< rowsi.length; j ++) { output.append(
<th>
</th>);
}
output.append(</tr>);
}
?>
</tbody>
</table>
</body>
</html>
以上で期限の近い課題をWebサイトに表示するアプリは完成です。