初学者のためのプログラミング入門を行います。
従来の方法と違って、サイト検索だけでなくChatGPTを使って効率よく学習できるようにしていきます。
プログラミングにはJavaScriptを使いますので、最初HTML, CSSの基礎も学んでいただきます。
また受講者のレベル別の調整もします。
対象：高校生以上
まず最初に簡単なHTMLページを講師の手順を真似しながら作ってもらいます。
その後、コンテンツを考えつつ、HTML, CSS, JavaScriptを使ったプログラミングの基礎を自主的に学べるようにChatGPTの使い方を説明していきます。
最後は、みなさんが楽しくコラボレーションしながら自由にサイトを完成していきます。
Zoomリンク（19:15には開始しています。早く来て雑談できます。また最大22:00まで雑談が可能です。）
パスコードは初日5/16に使ったもので共通です。北星オープンユニバーシティのマイページにあります。
2025/05/16 (金) 終了19:30〜21:00 ChatGPTを使ったJavaScriptプログラミング入門1/8 ① 説明、Google/ChatGPT登録、Google Slide/Site、エディタ、HTML基礎
2025/05/23 (金) 終了19:30〜21:00 ChatGPTを使ったJavaScriptプログラミング入門2/8 ② Google Slide共有、HTML (+CSS, JS) 基礎
2025/05/30 (金) 終了19:30〜21:00 ChatGPTを使ったJavaScriptプログラミング入門3/8 ③ 楽しみ方、Google Site作成、リンク、Google Site内JS
2025/06/06 (金) 終了19:30〜21:00 ChatGPTを使ったJavaScriptプログラミング入門4/8 ④ 画像の扱い、個別目標設定、個別質問、進捗状況、他
2025/06/13 (金) 終了19:30〜21:00 ChatGPTを使ったJavaScriptプログラミング入門5/8 ⑤ Google Site内JSの特殊性、個別対応、一部全体説明、他
2025/06/20 (金) 終了19:30〜21:00 ChatGPTを使ったJavaScriptプログラミング入門6/8 ⑥ 質問、理解、サンプル、感想
2025/06/27 (金) 終了19:30〜21:00 ChatGPTを使ったJavaScriptプログラミング入門7/8 ⑦ 質問、理解、サンプル、感想
2025/07/04 (金) 終了19:30〜21:00 ChatGPTを使ったJavaScriptプログラミング入門8/8 ⑧ 質問、理解、サンプル、感想
まず、すでに動くおもしろそうなものを真似、それをちょっといじってみて、変化を観察しながら理解して、想像&創造で擬似新作をたくさん作る
現在、学校などで一般的に行われている基礎重視の勉強（＋試験）方法は、おもしろみが少なく想像力も創造力も使わないものが多いようです。
他人が作ったプログラムを想像力で楽しみ、さらに少し付け足して、（擬似的）創造力を楽しむことが唯一のプログラミングを続ける動機となります。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
第１回（5/16）授業メモ
１）自己紹介（関谷のこと）
・どんなことしてる？：プログラマ、コンピュータの先生、ウーバーイーツドライバー
・どの辺に住んでいる？：西区、琴似
・最近の興味：３Dプリンタ（制作、販売）、バイラテラル制御（ロボットの関節研究）
２）受講者の通信、PC環境チェック
３）会話で（授業、先生、仲間、PC環境などに）慣れる
４）登録（ID, パスワード）
５）最後：来週のこと：入り方、パスコード（19:15雑談開始〜最長22:00まで雑談可能）
来週までに確実に準備して欲しいこと：
・Googleログイン,
・ChatGPTに慣れる
・テキストエディタ準備（選定、ダウンロード＆インストール）おすすめは、Windowsは秀丸エディタ、MacはCotEditor
第２回（5/23）授業メモ
１）Google Drive -> Google Slideテスト作成、関谷に編集権限を与える
・メモノートとしてそのGoogle Slideを使う、関谷が個別アドバイスできるように
２）HTML基礎（ChatGPTに尋ねながら、テキストエディタで保存して、ブラウザで開いて確認）
HTMLテンプレート
・フィールド１つ以上、ボタン１つ以上
CSSの意味
・フィールド、ボタンの色、大きさなど
JavaScriptサンプル
・ボタンをクリックしたら、フィールドの値から何かを計算して表示
日本語（UTF-8）
３）関谷に作ったファイル（index.html）をメールで添付送信
来週までに出来るのであれば、準備して欲しいこと：
・ChatGPTー＞エディター＞ブラウザにて、いろいろ試してみてください。
・わからないこともChatGPTに聞いてみてください。
・作りたいけど、どう聞くべきなのか、わからないことはぜひ関谷に直接聞いてみてください。
・４回目以降はどんどん自由に作ってもらいますので、もし可能ならば、難しいけど出来そうな課題を見つけてください。
Googleスライドでノート共有
テキストエディタの使い方、HTMLとは
Google Siteの作り方
Google Site内JavaScriptの入れ方
以下が講義でコピーしたサンプルプログラムです。
<!-- この前のHTMLは不要です。 -->
<button onclick="drawShape()">四角形を描画</button><br />
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
function drawShape() {
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// 四角形を描画
ctx.fillStyle = 'red'; // 塗りつぶしの色を赤に設定
ctx.fillRect(10, 10, 100, 50); // (10, 10)の位置に幅100、高さ50の長方形を描画
}
}
</script>
<!-- この後ろのHTMLも不要です。 -->
ボタン定義
CANVAS定義
script開始
関数定義 {}
色
長方形
script終了
imgタグの基本：
<img src="IMG_1047.JPG" width="200">
htmlファイルの場合、画像を同じ場所（フォルダ）において上記のタグで表示できる。
<img src="https://www.calulu-dogwear.jp/html/plugin/Exp/assets/images/column/recommend/calulu_006/main.jpg" width="200">
Google画像検索、画像のURLをimgタグとしてコードへ挿入
<img src="https://ik.imagekit.io/nlcynsjwm/IMG_1047.JPG" width="200">
imagekit.ioにアップロードして、画像のURLをimgタグとしてコードへ挿入
第５回（6/13）授業メモ
１）Google Site内JSの特殊性
２）理解、修正
・構造、変数、流れ、インデント
・印刷、マーカー、色ペン、並べる
・関数名再考、インターフェース改良
３）個別目標設定、個別質問、進捗状況、他
４）公開準備など
第６回（6/20）授業メモ
１）質問受付
２）理解、修正
・分離、試す
・インターフェース改良
３）どういうサンプルが必要か？
４）感想
・わかったこと
・知りたいこと
第７回（6/27）授業メモ
１）質問受付
２）理解、修正
・いじってみる、試してみる、理解を試みる、ChatGPTに聞く、関谷に聞く
・インターフェース改良
３）中途半端なソースコードでも公開
４）どういうサンプルが必要か？
第８回（7/4）最終授業メモ
１）5分：関谷、次なる目標（ロボットアームキットの3Dプリンタによる模倣）
２）20分：質問受付、気づきを共有、次なる目標
３）20分：質問受付、気づきを共有、次なる目標
休憩5分
４）20分：質問受付、気づきを共有、次なる目標
５）20分：質問受付、気づきを共有、次なる目標