ここでの動作環境は次のとおり。
- 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 - 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で中身を確認することができる。
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 | サウンドを格納する |