あるくテック

「分かる」をつくりたい。

プログラミングの授業

プログラミングの授業例 Webゲームその3

Webゲーム制作の授業、今回はその3としてプログラミングの基礎「変数と条件分岐(if)」についてです。 ゲーム制作を通してプログラミングの基礎を学ぼう 授業ではenchant.jsというライブラリ(プログラムのパーツ)を使って、効率よくプログラミングを行う…

プログラミングの授業例 Webゲームその2

Webゲーム制作の授業、今回はその2として画像描画についてです。 Webゲームづくりに欠かせない画像表現 授業ではenchant.jsというライブラリ(プログラムのパーツ)を使って、効率よくプログラミングを行うことで、体験重視の授業になるよう工夫していまし…

プログラミングの授業例 Webゲームその1

Webゲーム制作の授業、今回はその1初回授業についてです。 科目概要 Webページを見るためのブラウザ(Google Chrome、Safari、Edge、Internet Explorerなど)があれば遊べるゲームのことを、Webゲームまたはブラウザゲームと呼びます。このWebゲームの制作…

プログラミングの授業例 Webゲームの授業について

今回は、Webゲーム制作の授業の様子をざっくりとご紹介です。 Webゲーム(ブラウザゲーム)とは Webページを見るためのアプリケーションを「ブラウザ」または「Webブラウザ」と呼びます。代表的なものはGoogle Chrome、Safari、Edge、Internet Explorerなど…

プログラミングの授業例 リンクを設定する

『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。 今回はWebサイト制作においてとても重要な機能である「リンク」を学習する授業についてです。 リンクとは Webページ上の文字や画像をクリック、またはタップし…

プログラミングの授業例 テーブル

『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。 テーブルとは テーブルはWebページ上で表を作成して文字や画像を配置するためのHTMLプログラムの機能です。表とはいっても、エクセルのような計算機能などはあ…

プログラミングの授業例 フォーム

『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。 フォームとは Webページ上でユーザが入力するための仕組みです。例えばユーザ登録をする時に画面上で氏名、メールアドレス、住所などを入力することや、オンラ…

プログラミンの授業例  CSSのセレクタ

『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。 CSSのクラスセレクタと複合セレクタを理解する 今回はWebサイト制作の授業の中でも、Webページの装飾に関わるCSSプログラムのセレクタについての授業例です。 …

プログラミングの授業例 HTMLとCSSを併用する

『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。 HTMLとCSSを併用する 今回はWebサイト制作の授業の中で、Webページ上に表示する文字や画像情報を記述したHTMLファイルに、文字色やレイアウトなどの装飾を記述…

プログラミングの授業例 相対パスを学ぶ

『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。 今回は相対パスの理解についての授業です。私は複数の専門学校でいくつかの科目を担当していましたが、これはWebサイト制作に関する科目の中で行いました。 相…

プログラミングの授業をアクティブラーニングにするには

前回の投稿からずいぶん日が経ちましたが(汗)、今回はパフォーマンス課題と呼ばれる授業方法についてです。 実際の授業はどんな感じ? アプリケーション開発の授業で利用する「Monaca」というツールの機能や現状を理解することを目的とした、ある日の授業…