KOSEN{BLOG}について

中学生にネットリテラシーの話をしてきた

最初に

最近はSNSなどのインターネットを介した未成年への被害がとても多くなっています。SNSで知り合った人とトラブルになったり、リベンジポルノやいわゆるバカッターなども問題となっています。
また、近年はスマートフォンを持ち始める世代がだんだん若くなっていき今は、中学生の約7割が自分のスマートフォンを持っているらしいです。
インターネット上でのリテラシーに関する教育は、小中学校ではまだきちんと行われておらず、小・中学生もどのような問題が起きるか、被害にあってからでないと認識できないのだと思います。

そこで昨年、佐世保高専の学生と長崎県警察が主導で長崎県内にある中学校に赴き、中学生に対しネットリテラシーを教えたところ非常に好評だったそうです。そのため、高専機構が他の高専にも同じような活動をしてもらおうと、佐世保高専で九州内の高専から学生を集い株式会社ラックの方指導のもと中学生向けのネットリテラシー教育講習が行われました。

今回は私、江﨑喬祐がその講習を経て、「中学生が騙されそうなネットでの悪質なサイト」をデモとして再現し、佐賀にある中学生にネットリテラシーを実際に教えに行ったことについて書きます。

作成したデモ

僕と同じ研究室の友人の2人でそれぞれ1つずつデモを作成しました。

友人が製作したデモ

研究室の友人が作成したデモは、怪しいサイト内で怪しそうな広告をタップしてしまうと、「あなたのスマートフォンはウイルスに感染しました!」というポップアップが複数回表示されてしまうものです。
これは「怪しいサイトにはいかない」、「たとえ怪しいサイトに入ったとしても、サイト内で下手なクリックを行わない」ということを学んでもらうためです。友人はこの怪しいサイトをhtml,css,javascript等の静的なページで作成しました。
そのhtmlをどのサーバーに置いて外部からアクセスするようにするかを迷いましたが、偶然自分がfusicに一ヶ月インターンした際に教わった、「AWS S3の静的ホスティング」を使ってアクセス可能にしました。

静的ホスティングは、静的なページであれば通常のWebサーバーのような面倒くさい管理や設定は行わずに済むため非常に便利です。

自分が作成したデモ

自分は、「ある日、Amazonから今流行っている漫画の新作が出たというメールが届き、開いてみるとIDとパスワードを要求され、入力するとAmozonのページに飛ぶが、ログインはされておらず、アカウント情報が流出してしまう」というものを作りました。

もちろんAmazonそのもののサイトを使ってしまうとまずいので、Amazonではなく全てOmozonと、似せて作りました。

Amazonはありがたく、自分がよく買っている商品に関連したオススメの商品や、本などの新作が出た場合には新作が出たとのお知らせをメールで送ってきてくれます。今回はそのAmazonメールに擬態した偽のメールを作りました。
AmazonのメールはHTMLから作られたHTMLメールなので、非常に綺麗なデザインでした、そのデザイを再現するために自分もHTMLを作成して、メールにしました

作成したメールに「詳しく見る」というボタンを付け、ユーザーがそのボタンを押したらOmozonのログイン画面に飛ぶようにし、そこでIDとパスワードを奪います。
IDとパスワードを入力させ、「ログインする」のボタンを押すと、ユーザー目線ではログインはされていないOmozonのサイトにただ飛ばされただけです。ユーザーはおそらく、(なんでログインされてないんだろう…? まあいいか..)と思うとはずです。そして今度は正しいOmozonのサイトでログインし普通に買うという算段です。

「ログインする」の裏側で起きていることは、HTML内のjavascriptでXMLHttpRequestというものを使いログイン情報を私が持っているAWSのAPI GateWayまで飛ばしています。そのAPI GateWay の内部処理は AWS lambdaによって行っているため、そこからaws 内のSNSを使って私のメールアドレスに向けてアカウント情報を持っているメールを送信します。これで、ユーザーがOmozonのサイトでログインしたら僕にメールが届き、アカウント情報を奪うことができます

HTMLメールを作成する際に苦労した点が1つありました。
それは、HTMLからHTMLメールに変換する方法です。

MacでHTMLからHTMLメールの作成

  1. とりあえずHTMLを作る。(ここでは sample.htmlを作成した)  
  2. Finderを開いて、作ったHTMLのディレクトリに移動する。
  3. HTMLメールにしたいHTMLを右クリックし、「このアプリケーションで開く」=> 「Safari.app」でSafariで開きます。
  4. Safariで開いたら、上のメニューバーの「ファイル」=> 「共有」=> 「このページをメールで送信」をクリックします。画像ではスクリーンショットを撮るために「command + Shift」を押しているため、「このページへのリンクをメールで送信」となっていますが、実際は「このページをメールで送信」で大丈夫です。
  5. 結果、このようにできたら成功です。

実際に中学校で行う

中学校には私、上記の研究室の友人、現在の生徒会長的な役割の人、来年以降も行う可能性があるので受け継ぐ後輩、計四人で向かいました。

中学校での1つ分の授業のコマを使うので全体として50分間が与えられました。生徒会長が35~40分ほどネットに関する話のパワポを中学生に説明しました。パワポ中には休憩としてLINEで実際に起きたトラブルを劇形式で行ったりもしました。

デモを行う

デモ1

研究室の友人が作ったデモの方は、「ウイルスに感染しました」のポップアップが表示されます。それにインパクトを与えたかったため、タブレットの画面でそのページを見れたらいいと思っていました。
そこで、macにxcodeをインストールしその中にあるiphoneシュミレータを使用しました。これで中学生がいつも使っている画面と同じ環境で、悪質なサイトにアクセスした場合どうなるのかがわかりやすく見せることができます。
これらを使って、友人が一つ一つデモを行いました。
「怪しいサイトに行く」=> 「怪しい広告をクリック(タップ)する」 => 「ポップアップがいっぱい出る」
の順番です。そこそこウケてました

デモ2

僕が作ったデモの方は、IDとパスワードを奪うものなので、先生に協力してもらい手品のような演出をすることにしました。
中学生に対する説明として「僕のメールにOmozonからメールが届く」=> 「そのメールには最近はやりの漫画である[塊減の刀]がオススメされている」 => これちょうど見たかったんだよね〜と言いながら「詳しく見るボタンを押し、Omozonのログインページまで飛ぶ」=> 「あれっ? ログインページが表示されましたね。まあとりあえずログインしてみますか」といった感じで整えた後、ランダムに選んだ先生を呼んで僕の代わりに適当なIDとパスワードを入力してもらいます。ここで、先生がパソコンにデータを入力する際には大きな画用紙にIDとパスワードを書いてもらいます。この時点では中学生にはIDとパスを見せません。
その後、僕のメールアカウントにIDとパスワードが書かれたメールが届くので僕も違う画用紙にそのIDとパスワードを書きます。
そして、僕と友人が2人で同時に画用紙を中学生に見せて2枚の画用紙に書かれているIDとパスワードが一致しているかどうかを確認してもらいました。

こういった感じで行いました。

今回の成果

中学生からのアンケート

今回講演を受けてくれた中学生にアンケートを行ったところ、非常に高評価だったらしいです(もちろん先生主導のもとアンケートを書いているからかもしれませんが…)

感想を書く欄(書かなくてもいい場所)には「劇が面白くてもっとみたかった」という声が多いのが意外でした。劇は女子生徒と悪質な男の人の2つの役があり、研究室の友人が悪質な男役を、僕が女装(カツラを被る)して女子生徒役をしたのでそこのインパクトがでかかったのかなぁと思っています。

また、僕が中学生だった頃(今から6~8年前)とは違い、ほとんどの中学生が自分の携帯電話を持っていました。僕らの時代は3~4割くらいだったのですが、その中学校は8~9割ほど持っていたので時代を感じました。

他にも、男子よりも女子中学生の方がtiktokに動画をアップロードしていたり、実際に少し怖い目にあった中学生もいたので、アンケートからも様々な情報を得ることができました。

メディアでの紹介

今回の講演に当たって

で特集されました。

その他の知見

プログラマやクリエイターはアウトプットが必要

上記のメディアでの紹介でもそうなのですが、今回の研修で出会った企業の方や警察の方もほぼ全員責任者である現生徒会長と積極的に交流をおこなっており、まあ端的にいうと「主役は企画者や責任者であって、デモなどの制作を行うクリエイター(プログラマ)ではない」という印象を今回の活動を通してわかりました。ある意味これが社会なのだとも思いました。

そのため、僕のような将来プログラマー(クリエイター)として活動をしていきたいものは、自分から機会を待ったりするのではなく、自分で作ったものは「こんなもの作りましたよ~」として世間に積極的にアピールしなくてはならないのだと思いました。

問題の発生

デモ2では、僕が奪ったIDとパスワードが学校の先生が入力したIDとパスワードと一致しているか確認する場面がありました。ここで先生が入力したメールアドレスの文字の中には大文字が含まれており、その大文字は僕のメールアドレスに送信される際に小文字に変換されたらしく、僕のメールに届いた時には全て小文字で書かれていました。
それに僕は気づかなかったので、結果的にメールアドレスが大文字と小文字まで完全に一致していない状態のものを画用紙に書いてしまいました。
生徒達には一瞬、先生の書いたものと僕の書いた情報が一致していないと思われてしまったので、少しひやっとしたことになりました。
この出来事から「やはりテストケースは大事」と学びました。今回監督してくださった先生も「今回のような失敗をしないためにも、先にプログラムを書く前にテストケースから書くということの方がいいかもしれないぁ」とアドバイスをしてくれたため、また一歩反省点が増えてよかったです。

コメントを残す

メールアドレスが公開されることはありません。