コンテンツ作成者ガイド

H5Pのコンテンツを作成しようと考えている方のためのガイドです。

基本

H5Pを使用すると、Webページ上でリッチなインタラクティブコンテンツを簡単かつ迅速に作成できます。
このドキュメントでは、以下の方法について説明します。

  • 既存のH5Pコンテンツをアップロードする
  • H5Pコンテンツの編集
  • 新しいH5Pコンテンツを作成する
自分のサイトにH5Pコンテンツを作成するには、サイトにH5Pプラグインをインストールして有効にする必要があります。コンテンツオーサリングをサポートするプラグインは、現在、WordPress、Drupal、Moodle用が存在します。H5Pでサイトを設定していない場合は、h5p.orgでH5Pのドライブを試してみてください。

既存のH5Pコンテンツをアップロードする [編集]

開始する方法の1つは、h5p.orgのサンプルとダウンロードページからH5Pコンテンツタイプを選択することです。コンテンツの左下にあるダウンロードアイコンをクリックして、サンプルコンテンツのいずれかをダウンロードします。


これで、このファイルをH5Pハブ経由でサイトにアップロードできます。以下は、これを行う方法に関する説明です:

プラットフォームの管理メニューで次の項目を選択します。

  • Drupal:コンテンツの追加 > インタラクティブコンテンツ
  • WordPress:H5Pコンテンツ > 新規追加
  • Moodle:活動またはリソースを追加する > インタラクティブコンテンツ 

コンテンツタイプの選択]をクリックして、H5Pハブを開きます。

ハブ

上部の[ アップロード ]タブをクリックして、既存の.h5pファイルをアップロードします。
アップロードするファイルを選択し、「使用」をクリックします。

06

エディタがロードされ、H5Pコンテンツの編集を開始できます。
一番上のリンクは、選択したコンテンツタイプについて、h5p.orgのTurtorialsExample Contentのページに移動します。

編集者

新しいH5Pコンテンツを作成する [編集]


プラットフォームの管理メニューで次の項目を選択します。 

  • Drupal:コンテンツの追加 > インタラクティブコンテンツ
  • WordPress:H5Pコンテンツ > 新規追加
  • Moodle:活動またはリソースを追加する > インタラクティブコンテンツ 

新しいH5Pコンテンツを作成するには、最初にコンテンツタイプをインストールする必要があります。以下は、H5Pハブを使ってこれを行う方法の説明です:

コンテンツタイプの選択]をクリックして、H5Pハブを開きます。

ハブ

すべて」の下には、インストール可能なすべてのコンテンツタイプのリストが表示されます。コンテンツタイプの詳細ページに進むには、任意のコンテンツタイプで[ 取得]をクリックします。

01

上のコンテンツの種類の詳細ページあなたは、各コンテンツタイプの詳細を読みスクリーンショットとサンプルコンテンツを見ることができます。[ インストール ]をクリックして、選択したコンテンツタイプをインストールします。

02

コンテンツタイプがインストールされ、使用できるようになりました。[ 使用 ]をクリックしてエディタを開き、コンテンツの作成を開始します。

03

選択できるコンテンツタイプには、「すべて」と「自分コンテンツタイプ」の 2つのリストがあります。

 「自分のコンテンツタイプ」では、サイトにインストールしたすべてのコンテンツタイプのリストが表示されます。新しいコンテンツタイプをインストールすると、ここに表示されます。

すべて」を選択すると、利用可能なすべてのH5Pコンテンツタイプのリストが表示されます。私たちがリリースする新しいコンテンツタイプはすべて、ここでインストール可能です。
 

02

サイトのH5Pコンテンツを編集する [編集]

既存のH5Pコンテンツをアップロードした後、内蔵のエディタを使用して編集できます。 

  • Drupal:H5PノードのEditボタンを押します。
  • WordPress:H5Pインスタンスの編集ボタンを押します。
  • Moodle:H5Pインスタンスの横にあるEdit / Edit Settingsリンクを押します。

Editを押すと、次のようなエディタが表示されます。


編集

ここでは、H5Pのすべてのフィールドを編集できます。保存するとH5Pも更新されます。上部にある「チュートリアル」リンクと「例」リンクを使用して、このコンテンツタイプの詳細と使用法の例をご覧ください。

標準エディタでは、すべてのフィールドが順番に表示されます。高度なコンテンツの場合、これはすぐに維持することが困難になります。エディタを拡張することは、標準的な機能を拡張する(つまり、リストのタブ付きビューを提供するなど)エディタライブラリを介してサポートされるか、完全なWysiwyg編集エクスペリエンスを提供することができます。以下は、プレゼンテーションエディタとインタラクティブビデオエディタの簡単な例です。 

インタラクティブビデオエディタ

コースプレゼンテーションエディタ

H5Pコンテンツの作成についてもっと知りたいですか? 、コンテンツ作成者ガイドチュートリアルをみてみましょう。

H5Pコンテンツを埋め込む [編集]

h5p.org(または他のサイト)で作成されたH5Pコンテンツは、あなたのサイトに埋め込むことができます。コンテンツの下にある[埋め込み]ボタンを押してコードをサイトにコピーするだけです。


以下は、WordPressのブログ記事にH5Pコンテンツを埋め込む方法の例です:

  1. 埋め込みたいコンテンツの下にある[埋め込み]リンクをクリックします。 
    embed.png
  2. コードをコピーします。 
    embed2.png
  3. WordPressのブログのポストエディタswith to Textualのエディタとコードを貼り付けてください。 
    text.png
  4. ビジュアルエディタに戻り、埋め込んだコンテンツを表示します。 
    visual.png
  5. ブログ投稿の編集を続け、いつものように保存してください。