H5P - リッチコンテンツとアプリケーションの作成・共有

Enables creation, sharing, and reuse of interactive HTML5 content types like presentations, quizzes, interactive videos, and games directly within Drupal.

h5p
3,874 sites
95
drupal.org
gui api content integration
e-learning interactive content HTML5 quizzes presentations content authoring xAPI learning management rich media education

概要

H5P（HTML5 Package）は、サイト管理者やコンテンツ作成者がリッチでインタラクティブな学習コンテンツを構築できる強力なコンテンツオーサリングフレームワークです。このモジュールはH5PライブラリをDrupal 7と統合し、40種類以上の異なるコンテンツタイプを作成・表示するための完全なソリューションを提供します。

H5Pコンテンツはプログラミング知識不要のビジュアルエディタを使用して作成します。コンテンツタイプには、インタラクティブ動画、コースプレゼンテーション、分岐シナリオ、クイズ、ドラッグ＆ドロップ、穴埋め問題、メモリーゲーム、タイムラインなど多数があります。すべてのコンテンツはモバイルフレンドリーでアクセシブルであり、最新のHTML5技術を使用しています。

このモジュールはH5P Hubをサポートしており、ユーザーはH5P.orgリポジトリから直接コンテンツタイプを閲覧してインストールできます。xAPI（Experience API）をサポートした包括的なユーザートラッキング機能を含み、詳細な分析のためのLearning Record Storeとの統合が可能です。コンテンツは外部サイトに埋め込んだり、再利用のためにダウンロードしたり、H5P対応プラットフォーム間で共有したりできます。

Features

  • 40種類以上のコンテンツタイプ（クイズ、プレゼンテーション、動画、ゲームなど）を使用してインタラクティブなHTML5コンテンツを作成
  • プログラミング知識不要のビジュアルエディタによるコンテンツ作成
  • H5P.orgからコンテンツタイプを閲覧・インストールするためのH5P Hub統合
  • ユーザーインタラクションと学習進捗を追跡するためのxAPI（Experience API）サポート
  • ダウンロード、埋め込み、H5P Content Hub共有を含むコンテンツ共有機能
  • H5Pコンテンツタイプライブラリのインストール、更新、保守のためのライブラリ管理システム
  • ライブラリ開発者が再インストールなしで変更をテストできる開発モード
  • H5Pコンテンツとユーザースコアのカスタム表示を作成するためのViews統合
  • カスタマイズ可能な表示オプション（ダウンロード、埋め込み、著作権ボタン）
  • コンテンツタイプの翻訳機能を備えた多言語サポート

Use Cases

Creating Interactive Course Content

Use H5P Course Presentation to build slide-based learning modules with embedded quizzes, videos, and interactive elements. Track learner progress using the built-in xAPI support and Views integration to display completion statistics.

Building Assessment Quizzes

Create quizzes using H5P Question Set or Single Choice Set content types. Configure passing scores, retry options, and solution displays. Use the H5P points system to track user scores and integrate with Views to create leaderboards or progress reports.

Interactive Video Learning

Use H5P Interactive Video to add clickable hotspots, questions, and navigation to videos. Learners can engage with content at specific points, answer comprehension questions, and branch to different content based on their choices.

Embedding Content on External Sites

Enable the embed button in H5P settings to allow users to copy embed codes. H5P content can be embedded in external websites, learning management systems, or content management systems using iframe embedding.

Content Reuse and Sharing

Enable download functionality to allow users to export H5P content as .h5p files. These files can be uploaded to other H5P-enabled platforms, facilitating content sharing between institutions or platforms.

Customizing Content Type Behavior

Use hook_h5p_semantics_alter to modify the content editing interface for specific content types. For example, add additional HTML tags to text fields, or use hook_h5p_filtered_params_alter to modify how content behaves at runtime.

Tips

  • Enable development mode during content type development to see all library versions and allow reinstalling patched libraries without version number changes
  • Use Views to create custom listings of H5P content with user scores for building learning dashboards
  • Implement hook_h5p_styles_alter to apply consistent branding across all H5P content without modifying library files
  • Set up cron to automatically clean up temporary H5P files and maintain database performance
  • Use the xAPI integration with an LRS to get detailed analytics on how learners interact with your content

Technical Details

Admin Pages 4
H5P Settings /admin/config/system/h5p

Configure global H5P module settings including display options, file paths, library settings, and Hub integration options.

H5P Libraries /admin/content/h5p

Manage installed H5P libraries and content types. View, upgrade, delete, and configure library restrictions.

Rebuild H5P Content Caches /admin/content/h5p/rebuild

Rebuild cached data for all H5P content. Useful after manual file changes or database modifications.

Create H5P Content /node/add/h5p-content

Create new H5P interactive content using the visual H5P Editor. Choose a content type and configure the content.

権限 15
Create new H5P Content

Allow users to create new H5P content nodes

Edit own H5P Content

Allow users to edit their own H5P content nodes

Edit any H5P Content

Allow users to edit any H5P content node regardless of author

Delete own H5P Content

Allow users to delete their own H5P content nodes

Delete any H5P Content

Allow users to delete any H5P content node regardless of author

Update H5P Libraries

Allow users to upload and install H5P libraries/content types

Install recommended H5P Libraries

Allow users to install only recommended content types from the H5P Hub

Create restricted H5P content types

Allow users to create content using libraries marked as restricted

Administer H5P

Access H5P administration pages and configure module settings

View H5P results

View result data and statistics for H5P content

View H5P contents

View published H5P content

Download all H5P content

Download any H5P content as .h5p file

Download own H5P content

Download own H5P content as .h5p file

Embed all H5P content

Get embed code for any H5P content

Embed own H5P content

Get embed code for own H5P content

Hooks 5
hook_h5p_semantics_alter

Alter a library's semantics definition to add fields, change widgets, modify allowed HTML tags, or customize the content editing form for a specific library.

hook_h5p_filtered_params_alter

Alter H5P content parameters before rendering. Useful for modifying content behavior at display time, such as disabling retry buttons in quiz contexts.

hook_h5p_styles_alter

Add custom CSS stylesheets to H5P content. Allows theming and style overrides for specific libraries or all H5P content.

hook_h5p_scripts_alter

Add custom JavaScript to H5P content. Allows adding functionality or modifying behavior for specific libraries or all H5P content.

hook_h5p_library_installed

Triggered when an H5P library is installed or updated. Use for running custom actions after library installation.

Troubleshooting 5
Content types not appearing in editor

Ensure the H5P Editor submodule is enabled. Check that content type libraries are installed at admin/content/h5p. If using Hub, verify Hub connectivity in settings. Clear Drupal caches after installing new libraries.

Files not uploading or content not saving

Verify that the files directory (sites/default/files/h5p) has proper write permissions. Check PHP upload limits (upload_max_filesize, post_max_size) are sufficient for H5P packages.

JavaScript errors in H5P content

Clear the CSS/JS aggregation cache. Ensure jQuery and jQuery UI are properly loaded. Check for JavaScript conflicts with other modules using browser developer tools.

Library upgrade not working

Use the 'Upgrade content' feature at admin/content/h5p for the specific library. Ensure no content is currently being edited. Check error logs for specific upgrade failures.

Hub content types not loading

Verify internet connectivity from the server. Check that H5P Hub is enabled in settings. The Hub requires outbound HTTPS connections to h5p.org.

Security Notes 5
  • The module filters HTML content in H5P packages to prevent XSS attacks. Do not disable HTML filtering unless absolutely necessary
  • Restrict the 'Update H5P libraries' permission to trusted administrators as libraries can contain JavaScript code
  • Use the restricted library feature to prevent regular users from creating content with potentially dangerous content types
  • Review uploaded .h5p files before installation in production environments
  • The library whitelist controls what file types can be included in H5P packages - modify with caution