2024-01-19 Day 2 JavaScript講座 後編
講師
watanabe.icon 渡邉
タイムテーブル
10:00 JavaScript - 反復処理
11:05 非同期処理
12:00 〜お昼休み〜
13:30 Google App Script (GAS) で作るWebアプリ
15:00 Google App Script (GAS) で作るWebアプリ 後半
16:45 チェックフォームとレポートの案内
17:00 解散
ゴール
位置情報を表示するWebアプリを作ってみよう
https://scrapbox.io/files/658bdd0f9e12e50024b3e0e0.png
用意していただくもの
パソコン
Google Chrome または Microsoft Edge がインストールされたパソコン
インターネット接続
(Wi-Fi接続情報は会場でご案内します)
前回の内容
WebとWebブラウザー
Webの仕組み
Web標準技術
HTML/CSS/JS
Webブラウザー上で JavaScriptを動かす方法
今回の内容
どうやってJavaScriptを書くのか
反復処理
while
for
非同期処理
async/await
Webブラウザーの組み込みAPIやサードパーティAPIを使う
組み込みAPI
fetch
サードパーティAPI
地図表示
IoTとは何か
資料 > JavaScript
JavaScriptの基本文法 (一部Day1のおさらい)
開発者ツールでの値の表示方法
「この値は何だろう」と思ったら console.log() を使って表示する
エラーメッセージは学びのチャンス
資料 > ループと反復処理
資料 > 非同期処理
準備
プロジェクトのフォルダーを作成
テキストエディター
ここにアクセス
フォルダーを開く…
https://scrapbox.io/files/65a9e04654941a00249aa50f.png
作成したフォルダーを選択
index.html を作成する
https://scrapbox.io/files/65a9e09c730a620025d0d52f.png
変更を保存を選択する
HTML
<html>
lang … 言語コード
<head>
<meta charset="UTF-8">
文字コード
<meta name="viewport" content="width=device-width, initial-scale=1.0">
資料 > Google App Script (GAS) で作るWebアプリ
ステップ1: 地図上に位置を表示する
ステップ2: スプレッドシートの作成
ステップ3: データを送信する
ステップ4: 位置情報を送信する
ステップ5: データを取得する
コメントを通知するには
2. 次のfetch()コードを加える
code:js
method: "POST",
body: comment,
});
全体のサンプルコード (送信ボタンを押したとき、その入力したコメントをスマートフォンに通知する)
code:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>位置情報メモ</title>
<script type="module">
/** 経緯度の取得 */
async function getLatLng() {
const position = await new Promise((resolve, reject) =>
navigator.geolocation.getCurrentPosition(resolve, reject),
);
}
const map = L.map("map").setView(36, 138, 15); // OpenStreetMapのデータはOpen Database Licenseのもとに利用を許諾されています。
attribution: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors,
}).addTo(map);
// 現在地
const here = await getLatLng();
// 現在地にマーカーを表示
L.circleMarker(here).addTo(map);
// 現在地に移動
map.flyTo(here);
// ここはWebアプリのURLに書き換えます
const res = await fetch(endpoint);
const rows = await res.json();
for (const row of rows) {
const date = new Date(timestamp).toLocaleString();
const popup = document.createElement("span");
popup.textContent = ${date}: ${comment};
L.marker(lat, lng).addTo(map).bindPopup(popup); }
const form = document.querySelector("form");
form.addEventListener("submit", async function submit(e) {
e.preventDefault();
document.body.style.cursor = "wait";
const formData = new FormData(form);
const comment = formData.get("comment");
const row = [comment, here0, here1]; await fetch(endpoint, { method: "POST", body: JSON.stringify(row) });
// コメントの送信
method: "POST",
body: comment,
});
location.reload();
});
</script>
</head>
<body>
<h1>位置情報メモ</h1>
<div id="map" style="width: 500px; height: 500px"></div>
<form>
<input name="comment" placeholder="コメント" required />
<button type="submit">送信</button>
</form>
</body>
</html>
次のステップ
16:40 チェックフォームとレポートの案内
(1) チェックフォーム
Day1/Day2 講義に関する確認フォームです
(2) 受講者アンケート
Day3「IoTハンズオン講習」講義終了後、アンケートへのご協力をお願い致します
(3) 今回の講義に関するご質問・要望・気になる点などフィードバックはScrapboxでも受け付けておりますのでお気軽にお寄せください 😀 (任意)
上の https://scrapbox.io/files/657c04c5224e6200237be5f4.png https://scrapbox.io/intro-to-web-dev/new new から新しいページを追加します