H5P Development

H5P 개발 환경

H5P는 CMS의 어떤 데이터도 저장하지 않고 컨텐츠를 단독으로 관리합니다. H5P는 모두의 방식의 아키텍처를 가지고 있습니다. 다수의 라이브러리가 공개되어 있고 필요하다면 기여할 수 있습니다.

• GitHub의 H5P 공개 라이브러리

H5P 라이브러리는 몇 가지 의존성 라이브러리를 포함할 수 있습니다. H5P의 패키지로 포함되는 구성요소로는 먼저 라이브러리 메타데이터(library.json), 데이터 구조(semantics.json), 자바스크립트 라이브러리(.js), 스타일 파일(.css) 등이 포함될 수 있습니다.

• 라이브러리 메타데이터 (library.json)
• 데이터 구조 (semantics.json)
• 라이브러리 디스플레이 코드 (js)
• 스타일링 코드 (css)

라이브러리 메타데이터의 명세 - library.json

라이브러리 메타데이터는 데모 버전 추가할 자바스크립트 파일 등을 나타냅니다.

{
  "title": "Greeting card",
  "description": "Displays a greeting card",
  "majorVersion": 1,
  "minorVersion": 0,
  "patchVersion": 0,
  "runnable": 1,
  "author": "Amendor AS",
  "license": "cc-by-sa",
  "machineName": "H5P.GreetingCard",
  "coreApi": {
    "majorVersion": 1,
    "minorVersion": 0
  },
  "preloadedJs": [
    { "path": "greetingcard.js" }
  ],
  "preloadedCss": [
    {"path": "greetingcard.css"}
  ]
}

필수 프로퍼티

다음과 같은 필드는 필수적으로 정의되어야 합니다.

• title - 라이브러리 이름
• machineName - 라이브러리 머신 네임 (폴더 이름과 동일해야 함 예. H5P.GreetingCard)
• majorVersion - 주 버전
• minorVersion - 부 버전
• patchVersion - 패치 버전 (단순히 에러를 수정했을 때)
• runnable - 라이브러리가 독립 수행하는것인지에 대한 정수값 (1: 독립 수행)

마지막에 사용되는 runnable 옵션은 H5P 저작 도구를 이 라이브러리를 사용해 새로운 인스턴스로 생성할 수 있게 됩니다.

옵션 프로퍼티

• coreApi - 코어 API 버전 (설정하지 않으면 코어 v1.0 버전이 사용)
• author - 저작자 이름
• license - 코드 라이선스
• description - 라이브러리 설명
• preloadedDependencies - 미리 로드할 라이브러리 의존성
• dynamicDependencies - 동적으로 로드할 라이브러리 의존성
• preloadedJs - 라이브러리에서 필요한 js파일 경로들을 배열로 정의
• preloadedCss - 라이브러리에서 필요한 css파일 경로들을 배열로 정의
• embedTypes - 라이브러리를 위한 임베디드 컨테이너
• fullscreen - 전체화면 버튼의 활성화 여부
• metadataSettings - 메타데이터 비활성화

preloadedDependencies

의존성 있는 라이브러리를 기술하면 해당 라이브러리를 로드하게 됩니다.

"preloadedDependencies": [
    {
      "machineName": "FontAwesome",
      "majorVersion": 4,
      "minorVersion": 1
    }
]

dynamicDependencies

라이브러리가 실행되고 있는 동안 로드할 수 있는 라이브러리 목록을 기술합니다.

"dynamicDependencies": [
    {
      "machineName": "H5P.JoubelUI",
      "majorVersion": 1,
      "minorVersion": 1
    }
  ]

embedTypes

패키지에 임베디드 타입은 설정합니다. div혹은 iframe을 설정할 수 있습니다.

"embedTypes": ["div"]

데이터 구조의 명세 - semantics.json

라이브러리의 구성하는 이미지 텍스트 등에 데이터 구조를 정의할 수 있습니다.이 필드들은 에디터에서 편집할 수 있으며 어떻게 화면에 표현 될지 나타낼 수 있습니다.

[ 
  { 
    "label": "Greeting text", 
    "name": "greeting", 
    "type": "text", 
    "default": "Hello world!", 
    "description": "The greeting text displayed to the end user."
  }, 
  {
    "label": "Card image",
    "name": "image",
    "type": "image",
    "optional": true,
    "description": "Image shown on card, optional. Without this the card will show just the text."
  }
]

자세한 정리는 여기를 확인합니다.

시맨틱 (semantics)

시맨틱은 라이브러리가 초기화될때 입력값으로 정의 됩니다. 시맨틱은 설정이 불가능한 요소부터 매우 복잡한 설정이 가능한 객체까지 나타냅니다. 에디터는 시멘트 분석해서 폼 필드로 나타낼 수 있습니다.

시맨틱 형식

• 기본 형식: text, number, boolean
• 컨테이너 형식: group, list
• 복합 형식: select, library, image, video, audio, file

지원 타입은 다음과 같습니다.

H5PEditor 흐름 분석