第15回全国高等学校情報教育研究会全国大会(オンライン大会)

Ｒ１－２

動画と文字を重ね合わせたコンテンツを制作する授業実践
埼玉県立川越南高等学校

春日井 優

発表の概要
１．勤務校の教育課程
２．学習指導要領上の位置付け
３．本授業の概要
４．授業実施時の苦労と工夫
５．授業を実施して
６．今後の課題と展望

発表の概要
１．勤務校の教育課程
２．学習指導要領上の位置付け
３．本授業の概要
４．授業実施時の苦労と工夫
５．授業を実施して
６．今後の課題と展望

勤務校の教育課程
H23
以前
1学年

H24
H25

H26

H27

H28

H29

情報A
(必履修)

H30
R01

R02
R03

R04
R05

R06

情報の科学

情報の科学

情報Ⅰ

情報Ⅰ

(必履修)

(必履修)

(必履修)

(必履修)

情報の表現と管理

2学年
３学年

特記事項

情報Ａ

情報A

（文系選択）(文系選択)

数学・理科
先行実施

情報の情報Ｂ
科学(必履修)(必履修)

着任

情報の科学

情報の科学

情報の科学

(必履修)

(必履修)

(必履修)

共通テスト
学年入学新指導
国研指定校 国研指定校
要領告示

教育課程
見直し

情報の表現と管理(文系選択) (文系選択)

情報Ⅱ（文系選択・理系選択）

新課程
完全実施

新教育課程開始 共通テスト「情報Ⅰ」

教育課程を見直すきっかけ• 高大接続システム改革会議(H28.3) → 新聞報道もあった

勤務校においての議論の方向性• 情報科の必履修科目を１学年で実施することを前提の見直しをする。
• センター試験に替わる入試（大学入学共通テスト）において変更があっても対応できるように，平成30年度入学生から対応できるようにする。

【結論】平成30年度入学生から１学年で「情報の科学」を必履修とする
３学年で「情報の表現と管理」を文系で選択科目として設置

ＡＩ戦略（人材育成関連）
ＡＩ戦略２０１９（いずれも内閣府）

勤務校の教育課程
H23
以前
1学年

H24
H25H26

H27

H28

H29

情報A
(必履修)

H30
R01

R02
R03

R04
R05

R06

情報の科学

情報の科学

情報Ⅰ

情報Ⅰ

(必履修)

(必履修)

(必履修)

(必履修)

情報の表現と管理

2学年
３学年

特記事項

情報Ａ

情報A

（文系選択）(文系選択)

数学・理科
先行実施

情報の情報Ｂ
科学
(必履修)

(必履修)

着任

情報の科学

情報の科学

情報の科学

(必履修)

(必履修)

(必履修)

共通テスト
学年入学
新指導
国研指定校 国研指定校
要領告示

教育課程
見直し

情報の表現と管理(文系選択) (文系選択)

情報Ⅱ（文系選択・理系選択）

新課程
完全実施

新教育
課程開始 共通テスト「情報Ⅰ」

発表の概要
１．勤務校の教育課程
２．学習指導要領上の位置付け
３．本授業の概要
４．授業実施時の苦労と工夫
５．授業を実施して
６．今後の課題と展望

「情報の表現と管理」の授業内容• （いわゆる１学期中間考査まで）

プレゼンテーション（学びたい学問分野）• （いわゆる１学期期末考査まで）

プレゼンテーション（関心がある分野の最近のニュース）
デザインを意識して資料を作る• （いわゆる２学期中間考査まで）

プレゼンテーション（関心がある分野についての本の紹介）
図解説明を意識して資料を作る• （１月末まで）

動画を作成し，2種類以上の字幕を重ねる

旧課程「情報の表現と管理」• 内容(1)情報の表現
ア．情報と表現の基礎 イ．情報の表現技法(2)情報の管理
ア．ドキュメンテーション イ．情報の管理
ウ．コンピュータによる情報の管理と活用

ウ．情報の発信(1)のアについては，文字，図形，音などのコミュニケーションを行う際のメディアを取り上げ…
動画も含めて大丈夫に違いない！

新課程「情報Ⅱ」(2)コミュニケーションとコンテンツ
多様なコミュニケーションの形態とメディアの特性に着目し，目的や状況に応じて情報デザインに配慮し，文字，音声，静止画，動画などを組み合わせたコンテンツを協働して制作し，様々な手段で発信する活動を通して，次の事項を身に付けることができるよう指導する。

これだ！！

さらに「情報Ⅱ」(2)コミュニケーションとコンテンツではア（イ） 文字，音声，静止画，動画などを組み合わせたコンテンツを制作する技能を身に付けることでは，目的や状況に応じてコミュニケーションを行うために，文字，音声，静止画，動画などを適切に組み合わせてコンテンツを制作する方法，レイアウトや時間軸に沿った情報の配置を行うことの重要性を理解し，コンテンツを制作する技能を身に付けるようにする。

これしかない！

動画に字幕を付けよう
JavaScriptで字幕が付くようにプログラム中に配列としてデータを埋め込むことにしよう！

発表の概要
１．勤務校の教育課程
２．学習指導要領上の位置付け
３．本授業の概要
４．授業実施時の苦労と工夫
５．授業を実施して６．今後の課題と展望

ということで授業をしました【授業計画】
１時限目
２時限目
３～８時限目
９・１０時限目

撮影技法・編集技法を学ぶ
字幕の付け方を学ぶ
動画の編集，字幕の作成
発表【動画編集ソフト】
LoiLoScope2（PC教室にインストール済み）
または生徒所持のスマートフォンにインストールされたアプリ

動画作成の条件• 60秒程度の動画を作成する• 動画編集ソフトでは，できる限り文字を入れない• 字幕は切り替えることにより，２種類以上表示されるようにする• 表示するそれぞれの字幕には，読み手となる対象を設定する• ＨＴＭＬを編集して，ページタイトルを設定し，簡単な説明文を付ける
JavaScriptを含むＨＴＭＬファイルは，教員が骨格部分を作成しておき，生徒は配布フォルダからコピーして，自分用のファイルとして修正する

生徒に例示した動画（略）

発表の概要
１．勤務校の教育課程
２．学習指導要領上の位置付け
３．本授業の概要
４．授業実施時の苦労と工夫
５．授業を実施して
６．今後の課題と展望

動画のファイル形式
授業前は，種類が多くて対応できるか心配だった• 生徒のｉＰｈｏｎｅ使用率が高いので比較的同じファイル形式が多い• 動画編集ソフトは大抵の形式に対応している• 編集後の書き出しでＭＰＥＧ４またはＭＯＶあたりで出力する• ＨＴＭＬに対応する形式で出力させる

実際に授業を始めて気が付いたこと• テレビ世代のおじさん（私）にとっては動画は横長しか想定していなかった• スマホ世代の高校生にとっては動画は縦横自由自在にその場に合わせて撮影するものだった画面サイズへの対応• 動画の高さを固定した<canvas id="cv" width="800px" height="600px"></canvas>
ブラウザ
川越の紹介
川越は・・・・

600px

画面サイズへの対応• 動画の高さを固定した（縦長では動画の領域が狭くなる）
ブラウザ
川越の紹介
川越は・・・・

600px<canvas id="cv" width=“400px" height="600px"></canvas>

ＨＴＭＬファイル編集イメージ• Sublime Textで編集
エディタ宗教戦争を吹っ掛けないでください

データの形式(二次元配列で，各行が1つの字幕表示のための情報)
var tx = [//モード, 開始秒, 終了秒, x座標, y座標, 文字サイズ,[0,];5.3, 8.2,50, 400, 60,

文字色,縁取り色,表示文字”#BF6504”, ”#FFFFFF”, ”文字”],

Ｗｅｂページでもデザインにこだわりたい• 動画と文字の位置は重要• フォントにもこだわりたい

Google fontsを利用してフォントを変更できるようにした<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?
family=Ma+Shan+Zheng&family=Nunito:wght@200&display=swap"
rel="stylesheet">同一画面での相互評価• プログラムを作成し，GoogleFormと生徒の作品が同一画面に表示されるようにした。

そのためのプログラム
import os
from bs4 import BeautifulSoup
dir_lists = os.listdir('.')
dir_lists = [f for f in dir_lists ifos.path.isdir(os.path.join('.',f))]
for di in dir_lists:
if not os.path.exists(di + '/movie.html'):continuewith open(di + '/movie.html', encoding='utf-8') as f:
html = f.read()soup = BeautifulSoup(html, 'html.parser')title = soup.find('title').text
new_html = '''<!DOCTYPE html>¥n<html lang="ja"><head><meta charset="UTF-8"><title>''' + di + ' | ' + title + '''</title><style type="text/css">
iframe {border: none;}</style></head><body><iframe src=“(Google FormのURL)?embedded=true“
width="640" height="827“
frameborder="0" marginheight="0" marginwidth="0">
読み込んでいます…
</iframe><iframe src="movie.html" width="1200" height="850"></iframe></body></html>'''f2 = open(di + '/index.html', 'w', encoding='UTF-8')
f2.write(new_html)
f2.close()

わずか３０行程度のプログラムで設定できます。
教員の仕事を減らすには，プログラミングもできるようにしましょう発表の概要
１．勤務校の教育課程
２．学習指導要領上の位置付け
３．本授業の概要
４．授業実施時の苦労と工夫
５．授業を実施して
６．今後の課題と展望生徒が作成した動画⚫ 複数の経路を通る速さ・安全性の比較する動画⚫ 母親に対して感謝の気持ちを伝える動画⚫ 交通安全や挨拶の呼びかけを行い，その様子の紹介する動画⚫ お菓子などの作り方の説明する動画⚫ 「テレビやアニメのシーンをやってみた」動画⚫ 自分のペットや地元を紹介する動画⚫ 他の生徒が動画を制作している様子を紹介するメイキング動画⚫ 映画の予告編やＣＭのような動画

動画作成をきっかけに問題解決しようとする動画
エンターテインメント性のある動画

２種類の字幕の付け方◼ 日本語と外国語（翻訳サイト利用）◼ 話している言葉と心情◼ 話している言葉と状況説明◼ カメラ側の視点と被写体側の視点◼ ストーリーと撮影場所

テレビにおける多重音声放送と同様の目的・効果

実際に生徒が制作した動画の一部（略）

成果物の評価の観点• 動画の作成意図を表現できているか（技術・表現）• 対象とする人に応じて字幕を付けているか（思考・表現）• 動画を見た人にどのような影響を与えようとしているか（情報を主体的に活用する態度）「情報の表現と管理」としての観点「情報Ⅱ」では観点が使えるのでは？

本授業の意義と効果• レイアウトや時間軸に沿った情報の配置を行うことの重要性を生徒が認識して作品を制作することにつながった• 字幕を切り替えることから，複数の視点で1本の動画を作成，視聴することができ，視聴する動画を制作者・視聴者ともに，多様な見方ができた• 表示場所や色を考えたり，フォントを変更したりして情報デザインの視点も持たせる効果もあった「情報Ⅱ」を，大学入学共通テスト「情報Ⅰ」の受験対策科目にすることなんてありえない！

発表の概要
１．勤務校の教育課程
２．学習指導要領上の位置付け
３．本授業の概要
４．授業実施時の苦労と工夫
５．授業を実施して
６．今後の課題と展望

今後の課題「情報Ⅱ」→

役割分担して協働して取り組むこと• 動画の制作
• Ｗｅｂデザイン• Ｗｅｂページ• ＪａｖａＳｃｒｉｐｔの作成など協働して取り組む学習として実施できる授業を検討したい
協働して取り組んだ場合、学習評価についても検討が必要

プログラミングが得意な生徒が増えれば• 字幕を最初から埋め込まなくてもコメントで入力してもらえばいいんじゃない？
• コメントを字幕に入れるなら，どこかにデータを蓄えられるようにする必要があるね！

• 字幕の表示位置をリアルタイムに変えて，文字が動くようにしてもいいんじゃない？
（ニコニコ動画の弾幕のイメージ）

例えばこのようなコンテンツ• これくらいなら作れる生徒が出てくるのでは？

（略）

その結果としてこれを超える機能をもったコンテンツを実装できるくらいスキルがある高校生も，きっと出てくるはずイノベーションの創出をし情報社会の発展に寄与する人が（←情報Ⅱの目標）多く世の中に出て活躍してくれることを期待したい

発表の概要
１．勤務校の教育課程
２．学習指導要領上の位置付け
３．本授業の概要
４．授業実施時の苦労と工夫
５．授業を実施して
６．今後の課題と展望