それぞれのファイルがどのように記述されているかをチェックする。テンプレートからiTunes LPを作成する場合のおもな編集手順は次のとおり。

  1. iTunes LPメタデータが格納されているiTunesMetadata.plistを編集
  2. マニフェスト情報が格納されているmanifest.xmlを編集
  3. data.jsを編集
  4. 必要な画像を作成、ただしいディレクトリにデプロイ
  5. 必要に応じてHTML, CSS, JavaScriptファイルを編集
  6. shared.cssを編集

iTunesMetadata.plistについて

iTunesMetadata.plistではiTunes上で確認するメタデータを定義している。

エディタでiTunesMetadata.plistを編集

キーと値はかならずペアで指定をする。キーの意味は次のとおり(一部抜粋)。

キー 意味
artistName アーティスト
genre ジャンル
itemName 名前
playlistName アルバム
sort-album アルバム(読み)
sort-artist アーティスト(読み)
sort-name 名前(読み)
year 年

manifest.xmlについて

manifest.xmlではプラットフォームのミニマムバージョンやライブラリアイテムの属性・IDを定義している。

エディタでmanifest.xmlを編集

曲ごとの固有なIDを振りなおした場合、data.jsの対応する箇所も修正が必要になる。

data.jsについて

data.jsではタイトルやアーティスト名のほか、BGMで使用する曲やループ設定、楽曲ごとのXIDをJSON形式で記述する。

エディタでdata.jsを編集

さきほどmanifest.xmlでXIDを変更している場合は、忘れずに修正すること。

HTML/CSS/JavaScriptファイルについて

これらのファイルではおもに次の情報を定義している。

ファイル種類 説明
HTML タイトル画像やナビゲーション用の画像を配置する。この際機能ごとに適切なクラス名を割りあてておくこと
CSS ボタンの位置や見栄え、簡単なエフェクトを定義する
JavaScript セレクタを使い、ナビゲーション機能やアニメーションをバインドする

iTunes LPを再生するとまずindex.htmlがロードされ、view/home.htmlの内容をXHRで取得・表示する。ページ間の遷移情報はすべてJavaScript上で定義されており、選択時にXHRで各種ファイルをロードし、表示をおこなう仕組みとなっている。

公開されたテンプレートファイルとTuneKit APIドキュメント、Template How-toをもとに一部ではあるがiTunes LPの仕組みを紹介した。JavaScriptの知識があるデベロッパならば画像を用意するだけで、あっという間にiTunes LPコンテンツが作成可能だ。公開された資料にはテンプレートやAPIドキュメントのほか、よりよいデザインのためのベストプラクティスやテスト用のチェックリストといったものも用意されている。興味がある方はこちらもチェックしておきたいところだ。