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

『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。

HTMLとCSSを併用する

今回はWebサイト制作の授業の中で、Webページ上に表示する文字や画像情報を記述したHTMLファイルに、文字色やレイアウトなどの装飾を記述したCSSを連動させる方法を学習した授業についてです。

最初に反省

今プリントを見直すと、授業のねらいが多すぎて学生達にとってはどこまでやればいいのか不安になったかもしれないと思いました。

こうなった背景としては、この年の授業スケジュールがタイトだったことや、学生の理解度にばらつきがあったことで、ここまでは最低限クリアしてほしいことをMissionとして、よりチャレンジできる人はチェックポイントも、という意図でした。

改善の余地がありです。

授業概要

授業で配布したプリントは次のようなものです。

「HTMLとCSSの連携」

Mission：HTMLとCSSを両方使ってWebページを作ることができる。

課題　下記のフォルダ＆ファイル構成で、HTMLとCSSを連携させた１つのWebページを作る。

フォルダ＆ファイル構成

GWフォルダの中に、index.htmlとstyle.cssが入っている。

※実際には樹形図で指示

作業

１）index.htmlとstyle.cssファイルを作成する。

２）index.htmlに見出し１と段落を作る。

見出し1にはゴールデンウィークにしたこと、言った場所など。段落にはその説明を表示させる。

（文章は短くてOK）

３）index.htmlとstyle.cssを連携させること。

ヒント：linkタグを使う。

４）style.cssにCSSを記述し、文字色や背景色を設定する。

チェックポイント

HTMLとCSSの役割の違いを説明できる。

CSSの「タグセレクタ」の役割を説明できる。

反省の追加

「技術」を身に付けるのか、「考え方」を理解するのか、ゴールの種類もいくつかあると思います。そういったことも今後は明確に分けて考えていけたらと思います。

『学び合い』について

『学び合い』（二重括弧付き）は、授業の考え方です。授業方法ではないため、単純にプリントを配ればアクティブラーニングが成立するというものではないだろうと考えています。もし私のプリントを参考にして下さる方は、『学び合い』についての様々なサイトや書籍がありますのでそちらもぜひご覧くださいね。

arukutech.hatenablog.com

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

『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。

今回は相対パスの理解についての授業です。私は複数の専門学校でいくつかの科目を担当していましたが、これはWebサイト制作に関する科目の中で行いました。

相対パスと絶対パス

これらはWebサイトを制作するときには欠かせない知識の１つで、ファイルやフォルダの場所を指定する方法です。相対パスと絶対パスは、道案内や住所に例えられることが多いかもしれません。

例えば相対パスは、「（今いる建物の中の）ここから２つ上の階のAという部屋」といったように、ある地点（現在地など）を基準に位置を説明します。

それに対して絶対パスは「○○県○○市○○区○○番地　Xビル５階A号室」といった指定方法です。
どちらも決められたルールに従っていれば間違いなくファイルやフォルダを指定できるとはいえ、Webサイトの制作においては相対パスを使うことで、納品後の誤動作などを防ぐことなどができるため必須の知識といえます。

授業概要

授業で配布したプリントは次のようなものです。

「相対パスを理解する」

Mission１）相対パスをHTMLの中で使うことができる。

Mission２）相対パスについて説明することができる。

次の例題を利用しても構いません。

例題　下記のようなフォルダ構成でデータが保存されている。次の問題に答えましょう。

ファイルとデータの構成について（あるフォルダの中に下記ファイルとフォルダが入っているとします。）

index.html

pic01.jpg

imagesフォルダ中にpic11.jpgとpic12.jpgがある

profileフォルダ中にprofile.htmlがある

※実際には樹形図で表示

１）Index.htmlで画像ファイルpic01.jpgを表示させるには、index.htmlの中に記述するimgタグはどのようになるか？

２）Index.htmlで画像ファイルpic11.jpgを表示させるには、index.htmlの中に記述するimgタグはどのようになるか？

３）profile.htmlで画像ファイルpic01.jpgを表示させるには、profile.htmlの中に記述するimgタグはどのようになるか？

４）profile.htmlで画像ファイルpic12.jpgを表示させるには、profile.htmlの中に記述するimgタグはどのようになるか？

５）profile.htmlで表示される文字列「トップページへ」をクリックするとindex.htmlへジャンプするようなリンクの設定をするには、profile.htmlにどのようなaタグを記述をすれば良いか？ 

 求められたMissionをクリアできたのかについてはクラスの状況に合わせて方法を変えてみていました。『学び合い』で使われるネームプレートでの確認、学生をランダムで指名して答えてもらう、振り返りのための問題を出題する、などです。

振り返りの問題例

フォルダ構成（課題用のフォルダ中に下記ファイルとフォルダがある）

index.html

pic01.jpg

imagesフォルダ中にtitle.jpgとmenu1.jpgがある

accessフォルダ中にaccess.htmlとimgフォルダ(map.jpg含む)がある。

※実際には樹形図で表示

問１）index.htmlに画像を表示するための記述について答えましょう。

　A）title.jpgを表示するためにindex.htmlに記述するimgタグを書きましょう。

　B）map.jpgを表示するためにindex.htmlに記述するimgタグを書きましょう。

問２）access.htmlに画像を表示するための記述について答えましょう。

　A）title.jpgを表示するためにaccess.htmlに記述するimgタグを書きましょう。

問3）access.htmlに表示される文字「トップページへ」をクリックしたときに、index.htmlへジャンプするようなリンクの設定について。index.htmlに記述するaタグを書きましょう。

〇Mission２　相対パスについて説明することができる。

問1）相対パスを知らない人（後輩、家族）に説明しなければいけないとき、あなたならどうやって説明しますか？（記述スペースが足りないときは、裏へ）

振り返り

こうやって見てみると、最初のMisson（達成課題）をもう少し具体的にできたらと思いました。授業ではおそらく口頭で補足説明をしたのだろうと思いますが、例えばMission2「相対パスについて説明することができる。」については、振り返りの問題「相対パスを知らない人（後輩、家族）に説明しなければいけないとき、あなたならどうやって説明しますか？」の方が、指示が明確なので学生もより動きやすいだろうと思いました。

『学び合い』について

『学び合い』（二重括弧付き）は、授業の考え方です。授業方法ではないため、単純にプリントを配ればアクティブラーニングが成立するというものではないだろうと考えています。もし私のプリントを参考にして下さる方は、様々なサイトや書籍がありますのでぜひ一度ご覧ください。

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

前回の投稿からずいぶん日が経ちましたが（汗）、今回はパフォーマンス課題と呼ばれる授業方法についてです。

実際の授業はどんな感じ？

アプリケーション開発の授業で利用する「Monaca」というツールの機能や現状を理解することを目的とした、ある日の授業の課題プリントは次のようなものでした。

今日のMission

お客様からの問い合わせがありました。回答を考えましょう。

あなたは、○○（クラスの略称）株式会社マルチデバイスアプリ開発課のメンバーです。

顧客

　公共機関（○○市）

問い合わせ内容

　公共サービスのためのアプリの開発を検討している。情報や提案が欲しい。

質問

１）どんなサービスが提供できる？

２）いろいろなデバイスを使っている市民が利用できるのか？

３）データベースとの連携はできるか？

４）その他提案があったら欲しい

この時は、複数人のグループで取り組んでもらいました。もちろん何を使って調べても良いです。むしろテキストになるような書籍の出版が追い付いていないこともプログラミングの授業では日常茶飯事ですので、自分達でネットで調べたり、もし必要であればパソコンを使って自分で実際に試してみる力も求められます。

ja.monaca.io

授業の流れ

1. 今日のミッションとして、達成してもらいたいゴールを説明。
2. 必要があれば補足説明を全体に、ただし最小限に。
3. 課題に取り組む（教室内は自由に立ち歩きOK。相談OK。ネットも自由に利用。）※時間をできるだけ確保する。
4. 教員（私）がお客役となり、各グループにプレゼンテーションをしてもらう。

きっかけ

こういった授業をしようと思ったのは、授業で使うツール（プログラミング言語や開発環境）の特徴をまず最初に理解させたかったからです。

アプリなどを作るためのプログラミング開発環境は、年々進化して驚くほど便利になっていく一方で、機能が増えて複雑になってもいます。そのため「このツールで一体何がどこまでできるのか」を学生が把握しにくくなっていました。

これは授業に一番良いツールを毎年選定し、必要と判断すれば授業での開発環境を変えていっていた私にとっても同じく課題でした。

システム開発の仕事をしていた時も使うツールの選定は慎重に選んでいたつもりだったことを思い出し、学生達にもシステム開発部門のスタッフになったつもりで調べてもらえれば、当事者意識をより持って考えられるのではと思いついたのがきっかけです。

合わせて自分で考えてみる体験や、協働の効果を感じることも狙っていました。

実は、パフォーマンス課題やGRASP（詳細は下記）といった言葉を知ったのは本当に最近です。

パフォーマンス課題とは

ストーリ仕立ての課題に沿って、問題解決を行う授業です。

パフォーマンス課題の要素

ところでパフォーマンス課題には「GRASPS」と呼ばれる６つの要素があります。

1. Ｇoal （目的）
2. Ｒole（役割 ）
3. Ａudience（相手）
4. Ｓituation（状況）
5. Ｐerformance（完成品・結果）
6. Ｓtandards（スタンダード・観点）

この頭文字をとってGRASPSと呼ばれています。必ずしも６項目全てが含まれる必要はないようです。

 効果は？

ツールについての講義を一方的に聞く授業ではないですし、学生達はそれぞれ知恵を出し合って積極的に取り組んでいました。

学生同士や時には私も参加して話す中で、コンピュータ用語であいまいに覚えていたものがあれば、その場で補足し合ったり確認することもできますので、分からないことがそのままにならず知識も増えます。

なぜ効果がでたのか

学生達がより積極的に参加できていたカギは「当事者意識」だろうと思います。

「就職」が徐々に現実的になり、またIT企業への就職へのあこがれも持つ学生にとっては、単なる講義よりも興味のある取り組みだったのだろうと。

また技術者として顧客に伝えることの大切さや難しさについて時々話しており（私も決して得意でなく努力継続中であることも含め）、互いを練習相手として協力することもできたのだろうと思います。

予告。プログラミングの授業を『学び合い』で。

すっかりご無沙汰していました（汗）

状況の変化もあり、これまでのプログラミングの授業について、少しずつ振り返りながら記事にしていこうと思い立ちました。

ここ数年間、授業のほとんどは、アクティブラーニング『学び合い』で行っていました。（二重カッコの『学び合い』についてリンク先をご参照下さい。）

来年度から小学校でもプログラミング教育が開始されますね。プログラミング＋『学び合い』のイメージを掴むのに微力ながらお役に立てたら嬉しく思います。

プログラミングにアクティブラーニングが必要な理由

指だけ動かしても、理解できない。

プログラミングの授業は、ともすれば「タイピング」の授業になりがちです。

サンプルプログラムをテキストやプリントを見ながらそのまま入力し、無事に動いたら完了といった流れです。

特にプログラミング初学者にとっては最初は必要なステップでしょう。ですがそのままだと「とりあえずプログラムは動いたみたいだけれど、内容は全く理解はできていない」という状況で止まってしまう恐れがあります。

元々プログラミング関心が高かったりある程度知識があった学生は、自主的にプログラムを作り始めることで自力でこういった段階を抜けていきます。

ですが、授業ではやってみたものの自力でプログラミングできるようにならない状況を、「自分が向いていないからだ」と結論付けてしまう学生もいたように感じました。

英文をただ書き写しても英語を話せるようにはならないのと似ていて、タイピングしたところで自在にプログラミングができるようには、ならないのです。

文法の理解だけでなく、「なんかやり続けちゃった」が大事。

プログラミングを理解していく上で、必要不可欠なのが「トライ＆エラーを繰り返せるか」ということです。英会話ならカタコトだろうとも、プログラミングであれば滝のようにエラーを吐き出そうとも、とにかく続けてみることで上達するしかありません。

そのための時間、環境、そしてマインドセットを授業の中で実現できないかと、何年も私なりに試行錯誤した結果、もちろん他の方法もあるかもしれませんが、私の場合は『学び合い』での授業によって以前よりずっとずっと「まし」になったと思います。

今日は予告だけに終わってしまいますが、時間を作って徐々に記事をアップしたいと思います！

www.iamjun.com

Kindleも「聴く」読書ができる！

知っている方には今更のことかと思いますが。。。

私は知りませんでした。Kindleもスマホなどの読み上げ機能を使って、「聴く」ことができる！？

「聴く」読書は、家事をしながらや車の運転中にラジオやＢＧＭを聴く代わりに読書ができ、時間が有効に使えて便利です。

知ったきっかけは、勝間和代さんの記事です。

katsumakazuyo.hatenablog.com

Audible vs Kindleの読み上げ

これまでAmazonのAudibleを良く利用していましたが、うかつにもKindle本を読み上げてもらう機能には知らずにいました。

そこで、購入してあったKindle本をiOSのテキスト読み上げ機能を使ってさっそく聴いてみました。
Audbleのようにプロの方が朗読している訳ではないので、少々棒読みな感じ、ページが変わる時に少し間が空くなどはあります。使い勝手については他にもあるようですが、内容は十分把握できますので良いです。座って読む時間がない時に、全く情報に触れられないことに比べたら、はるかに良いです。

厚くて読むのを躊躇していた本にこれなら挑めるかも！

例えば、去年から話題のティール組織。

私は現在大学（通信課程）の学生で、AmazonのPrime Studentを利用していますので、ポイント割引も利用できお得感がさらに増しています。