2024-11-16 Day 1. IoTとWeb技術の基礎講座とJavaScriptプログラミング
最初に、IoT(Internet of Things)の基本概念やその構成要素、そしてWeb技術との関連性について講義を行います。具体的には、Webの仕組みを学びつつ、HTMLやCSSの基礎を復習します。その後、JavaScriptの基礎に触れ、プログラミングの構造(順次処理、条件分岐、繰り返し処理)を理解し、文字列や数値、配列、オブジェクトといったデータ型についても学習します。また、非同期処理やGoogle App Scriptも取り扱い、実践的なWeb技術演習を進めます。
事務連絡 (信州大学スタッフによってご案内します)
Wi-Fiのセットアップ
Eラーニングシステムのご案内
Web × IoTの未来と可能性:オープンスタンダードで作る新しい価値
構成要素
IoTとWeb技術
Webの仕組み
Web技術演習
ファイルの扱い
HTML・CSS
基礎講座の内容からのフォローなど必要に応じて対応
JavaScriptプログラミング
プログラミングの構造
順次
条件分岐
繰り返し
データ
文字列
数値
論理型
配列
オブジェクト
非同期処理
Google App Script
デモ
https://kou029w.github.io/intro-to-web-dev/gas-web-app/example/index.html
https://scrapbox.io/files/658bdd0f9e12e50024b3e0e0.png
準備
https://kou029w.github.io/intro-to-web-dev/get-started/index.html
プロジェクトのフォルダーを作成
完成をイメージする
例:
https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/website-drawing-scan.png
画像ファイル
Webサイトに使用する画像をコンピューターに保存します
例えば
自分やペットの写真
イラスト
Google 画像検索
画像生成AI
ChatGPT
画像生成は ChatGPT Plus USD $20/月 〜
Android/iOS
https://openai.com/chatgpt/download/
Gemini
Imagen 3 での画像生成に対応
Android/iOS
https://gemini.google.com/app/download?hl=ja
Microsoft Copilot
無料・利用回数制限あり
画像生成にはMicrosoft アカウントが必要
Android/iOS
https://www.microsoft.com/en-us/microsoft-copilot/for-individuals/copilot-app
保存するには
画像を右クリック > 名前をつけて保存
テキストエディター
https://vscode.dev/
ここにアクセス
フォルダーを開く…
https://scrapbox.io/files/65a9e04654941a00249aa50f.png
作成したフォルダーを選択
index.html を作成する
https://scrapbox.io/files/65a9e09c730a620025d0d52f.png
変更を保存を選択する
デモ:
https://mdn.github.io/beginner-html-site-scripted/