『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。
今回はWebサイト制作においてとても重要な機能である「リンク」を学習する授業についてです。
リンクとは
Webページ上の文字や画像をクリック、またはタップして、別のページに移動するための機能です。
これは、エクセルやワードなどで行う「ファイルを開く」という操作に該当します。「ファイル」→「開く」→「ファイル名入力」→「開く」といった一連の作業を、Webでは一回のクリックまたはタップで実現しているといえます。しかもWebの場合、全世界のファイルを開く、そして見ることができる訳です。
今のWebサイト、そしてインターネットの普及の立役者ともいうべきリンクは、現在のWeb制作においても欠かせない機能です。
授業概要
今回はプリントの概要を説明をします。以前に配布したプリントは、テキストを参照しながら行うものだったため、プリント単体で掲載しても分かりにくいのが理由です。
「リンクを理解する」
Mission１）ページ間リンクとページ内リンクの違いが分かる。設定できる
確認方法 まとめの問題を説明することができる。
サーバにある実習用データを各自にコピーしてください。
作業内容
１）実習用データのindex.htmlについて、テキストを参考にページ間リンクとページ内リンクを設定する。
まとめの問題
１）リンクとはどのような仕組みですか
２）リンク２種類について設定方法を説明しましょう
・ページ間リンク（他のページへ移動する）
・ページ内リンク（同じページ内の別の場所へ移動する）
小学生から大人まで、ぜひ「リンク」で遊んでみて！
リンクは、簡単なHTMLプログラムの記述だけで、Webサイトの動きを作ることができるので、小学生から大人まで気軽に取り組めます。
たとえばこんな感じ。
- シンプルなHTMLファイルのテンプレートを準備しておく。
- ブラウザで好きなWebサイトを開き、URLアドレスをコピー。
- HTMLファイルをテキストエディタで開き、コピーしたURLアドレスを指定された箇所にペースト。
- ブラウザからHTMLファイルを開いて、動作確認！
応用編としてクリックやタップをしたら
- 写真を見せる（リンク先を画像ファイルに）
- Googleマップを使って案内したい場所へのリンクを埋め込む
- スマホからアクセスした人にダイヤル発信してもらえるようにする（href属性の"tel:"を使う）
などもあるので、楽しいと思います。
プログラミング教育にも
今年４月から、小学校でプログラミング教育がいよいよスタートします。
Webページを作るには、「テキストエディタ」（Windowsならメモ帳でOK）と「ブラウザ」（Google ChromeやSafariなど）があれば、シンプルなものなら作れてしまうのもメリットです。
普段なんとなくスマホでタップして使っていたリンクを自分で作れた！という体験は、身近なものがプログラミング言語で制御されていることを体験を通して知る良い機会になると思います。
授業のながれ
授業は、課題の説明、活動、振り返りという流れで行います。活動の時間をできるだけ多く取るために、最初の教員からの課題の説明は必要最小限にとどめています。
プログラミングの授業では、よく自転車に乗れるかどうかに例えて活動の大切さを伝えていました。
「自転車の乗り方を人からどんなに上手に聞いたとしても、実際に自分で乗れるようになるためには自分で乗って練習しないといけない。」
活動の時間を通して、自分で作業や説明ができるようになることがゴールです。
『学び合い』について
『学び合い』（二重括弧付き）は、授業の考え方です。授業方法ではないため、単純にプリントを配ればアクティブラーニングが成立するというものではないだろうと考えています。もし私のプリントを参考にして下さる方は、『学び合い』についての様々なサイトや書籍がありますのでそちらもぜひご覧くださいね。
