研究ノート

H5P プラグインを利用した Moodle 上での教材作成
森野誠之 （非常勤）要旨
従来の Moodle では基本機能での教材作成方法は種類も少なく，特に小テストは作成の難易度が高いために，本学での利用者が少なくなっていた。Moodle3.8 からは H5P プラグインがライブラリと連携し，小テストなどの教材作成が容易になっている。H5P プラグインの Moodle へのインストール，教材の作成方法などを説明する。

キーワード：Moodle，H5P，プラグイン，教材作成

1．はじめに
Moodle の基本機能で作成できる教材は，小テスト・フィードバック・HTML ページなどで種類も少なく，特に小テストは設定も煩雑で難しいものとなっている。基本機能は Moodle が開発された当初からあまり変わっておらず，今後も追加される予定はない（※ 1）。したがって，基本機能以外での教材作成はプラグインを追加しての作成が主となる。他方で HTML5 が普及し，以前の Flash のような動きをする教材がブラウザ上で容易に作成できるようになっている。その 1 つが紹介する H5P である。
H5P（HTML5 Package） は HTML5 を 用 い て ブ ラ ウ ザ 上 で ゲ ー ム や ク イ ズ な どの イ ン タ ラ ク テ ィ ブ な 教 材 を 作 る た め に 開 発 さ れ た も の で あ る。OSS の Drupal，WordPress，そして Moodle での利用が可能で，特徴は以下の 4 点である（※ 2，3）。
・コンテンツが増えることにより web サイトが強化される・モバイルフレンドリーなコンテンツが提供できる・ビデオなどのリッチコンテンツが共有できる・MIT ライセンスで利用できる
H5P は 2017 年頃から Moodle 上で利用できるようになっていたが，当時の Moodle
ではコンテンツの追加を個別に行う必要があり，利用できるコンテンツの全体を俯瞰できない状況になっていた。コンテンツとは計算クイズやグラフなど教材作成のテンプレートのようなものである。本学で 2020 年度に導入予定の Moodle3.8 より，H5P
愛知大学情報メディアセンター

－ 37 －

Vol.30, No.1, 2020

のコンテンツライブラリと連携できるようになり，コンテンツの把握と導入が容易となっている。
2．H5P プラグインの Moodle へのインストール
H5P プラグインの Moodle へのインストール手順は以下の通りである。
2-1．プラグインのダウンロード
Moodle 公式のプラグインディレクトリ（https://moodle.org/plugins/mod_hvp）
より Interactive Content – H5P をあらかじめダウンロードしておく。

図 1．Interactive Content – H5P のダウンロード画面
2-2．Moodle のプラグインインストールよりインストール
1でダウンロードしたものをドラッグ＆ドロップすることでインストールができる。

図 2．Moodle のプラグインインストール画面

愛知大学情報メディアセンター

－ 38 －

Vol.30, No.1, 2020

2-3．プラグインのチェックが正常に完了

図 3．プラグインチェック完了画面
2-4．Moodle データベース更新画面で確認
H5P プ ラ グ イ ン が 表 示 さ れ て い る こ と を 確 認 す る。 確 認 後 に ペ ー ジ 最 下 部 のMoodle データベースを更新するをクリック。

図 4．Moodle データベース更新画面
2-5．H5P などのインストールを確認
H5P ハブに登録されたことも確認しておく。登録されることで，Moodle 上からコンテンツを選択できるようになる。

愛知大学情報メディアセンター

－ 39 －

Vol.30, No.1, 2020

図 5．H5P プラグインのインストール完了画面
2-6．H5P 設定画面で設定設定は特に変更せず初期設定のままで問題はない。

図 6．H5P 設定画面
以上で Moodle への H5P プラグインのインストールは完了である。
愛知大学情報メディアセンター

－ 40 －

Vol.30, No.1, 2020

3．H5P プラグインのコースへの反映
H5P プラグインのコースへの反映手順は以下の通りである。
3-1．編集モードに切り替えて活動の追加より選択
H5P プラグインをインストールすると，活動にインタラクティブコンテンツが追加され選択できるようになる。

図 7．インタラクティブコンテンツの選択
3-2．インタラクティブコンテンツ設定画面からコンテンツを選択する
H5P のコンテンツライブラリと連携しているので，設定画面から選択できるようになっている。今回は Multiple Choice を使用するので，Multiple Choice の Get ボタンをクリックしインストールする。

図 8．H5P コンテンツの選択画面
愛知大学情報メディアセンター

－ 41 －

Vol.30, No.1, 2020

図 9．Multiple Choice のインストール

図 10．Multiple Choice のインストール完了画面
3-3．Multiple Choice の設定をする
タイトル，設問，選択肢，正解の設定をする。初期設定では選択肢は 2 つで増やすこともでき，ヒントやフィードバックも設定できるが今回は割愛する。

愛知大学情報メディアセンター

－ 42 －

Vol.30, No.1, 2020

図 11．問題の作成画面
この設定で保存をするとコース上に表示されるようになる。

図 12．コース上に反映された多肢選択問題

愛知大学情報メディアセンター

－ 43 －

Vol.30, No.1, 2020

実際に作成されたコンテンツは以下の図のように表示される。

図 13．実際の多肢選択問題
このようにインタラクティブなコンテンツがブラウザ上で容易に作成できるようになる。スクリーンショットではわかりづらいが，実際は Flash のようにスムーズに動きユーザーにとっても自分の操作がわかりやすくなっている。

愛知大学情報メディアセンター

－ 44 －

Vol.30, No.1, 2020

4．作成できるコンテンツ
執筆時点作成できるコンテンツ数は 33 である。

図 14．H5P で選択できるコンテンツ
愛知大学情報メディアセンター

－ 45 －

Vol.30, No.1, 2020

33 のコンテンツがあるが，実際に授業内で利用するものは多肢選択問題や穴埋めなどのテスト関連ものが多くなると思われる。語学では単語スピーク，単語のドラッグなどのコンテンツ利用も有用であると考えられる。
5．まとめと注意点
H5P は HTML5 で作成されるために，専用ソフトなどの必要がなく，容易に教材が作成されるため，パソコンの操作が苦手な教員でも利用が可能である。しかし，コンテンツによっては IE11 などの古いブラウザでは表示がされないことがあるので注意が必要である。筆者が確認した範囲では Chrome，Firefox，Safari の最新版では問題なく表示され，スマートフォンの操作も問題ない。
多肢選択問題などでは Moodle の評定と連携しているが，テスト回数の制限・開始時刻などの細かい設定ができないために，評価に含めるのは難しいであろう。反復テストや力試しのテストとして使うのが現実的な利用方法である。
本学では Moodle のアクセスの半分ほどがスマートフォンからであるために，H5Pのようにスマートフォンに対応したコンテンツを作成することで，学生も手軽に学習できるようになり，授業外での学習も促進されると考えられる。
参考文献※ 1. Roadmap - MoodleDocs
https://docs.moodle.org/dev/Roadmap#Moodle_3.9_.28LTS.29_Dates※ 2. H5P 日本語コミュニティ
https://h5p.jp/※ 3. H5P インタラクティブコンテンツ共有サイトの構築 https://www.jsise.org/taikai/2017/
program/contents/pdf/I1-28.pdf

愛知大学情報メディアセンター

－ 46 －

Vol.30, No.1, 2020