ここでの動作環境は次のとおり。

  • OS: Mac OS X 10.6.2
  • iTunes: 9.0.2

まずはiTunes LPがどのようなファイルから構成されているかを確認してみよう。iTunes LP and iTunes Extras for Developersより、利用規約に同意した上でiTunes LP Template(iTunesLPExample.zip)をダウンロードする。解凍するとiTunes-LP-Example.itlpというファイルが生成されるので、これをiTunesで開く。

iTunes-LP-Example.itlpをiTunesで開くと、ライブラリのHard Rockジャンルにサンプルデータが追加される

「iTunes LP - Album Name」を再生すると、iTunes LPコンテンツが表示される(こちらをクリックすると動画を再生します)

テンプレートのiTunes LPでは「Play Album」「Song List」「Photos」「Videos」「Liner Notes」「Credits」の6メニューが用意されている。Song ListやPhotos・Videosにはアニメーション付きの簡単なメニューもある。iTunes LPの動きを理解するに適したサンプルともいえよう。

iTunes-LP-Example.itlpの実体はディレクトリ。ファイルを右クリックし「パッケージの内容を表示」を選択することでFinderで中身を確認することができる。

パッケージ「iTunes-LP-Example.itlp」の内容を表示。おもにHTML、CSS、JavaScriptから構成されている

index.htmlをSafariで開くと、さきほどiTunesで表示されていたiTunes LPとほとんど同じ内容が表示されることがわかる。メニューの「Song List」や「Photos」の遷移先画面はviewsディレクトリ以下の「songs.html」や「photos.html」に当たる

パッケージ内のディレクトリ/ファイル用途は次のとおり。

ディレクトリ/ファイル名 用途
audio パッケージ内で使用する短いループ用のBGMを格納する
controllers 各ページやナビゲーション、ページ間の画面遷移といったJavaScriptのアクションコントローラを格納する。data.jsにはiTunes LP全体で使用される共通のパラメータなどが格納されている。対となるビューファイルをview/以下に配置すること
css ボタンの位置やテキスト・画像のスタイル・いくつかのインタラクティブな要素/アニメーションを定義したCSSファイルを格納する。shared.cssにはビュー全体で使用される共通のスタイルが定義されている
images パッケージ内で使用する画像ファイルを格納する。interfaceディレクトリには再生ボタンや一時停止ボタンといった、共通UIとして使用できる画像が格納されている
index.html iTunes LP対応コンテンツを開いたときに最初に表示されるページ
iTunesArtwork iTunes LPのパッケージアイコン。フォーマットはPNG/JPGのどちらかであること
iTunesMetadata.plist ジャンルやコピーライト、アーティスト名といったiTunes用のメタデータをXML形式で格納する
manifest.xml iTunes LPのバージョンやサポートするプラットフォームといったマニフェスト情報を格納する。かならずトップレベルの階層に配置すること
views iTunes LPのビューファイル(HTML)を格納する。対となるコントローラファイルをcontrollers/以下に配置すること
TuneKit/src TuneKitライブラリが格納される。このテンプレートでは「TuneKit.js」1ファイルのみ
TuneKit/sounds サウンドを格納する

各ディレクトリ以下のファイル