このページの本文へ

iBooks AuthorでHTML5の電子書籍作ってみた (4/4)

2012年01月30日 13時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

iBooks Authorでどこまでできるか

 最後に、iBooks Authorとウィジェットで何ができるのか、いくつか例を紹介しましょう。

 1つは、ゲームです。これまで自作のゲームをiPhone/iPad向けにパッケージとして配布するには、App Storeを経由する必要がありました。一方、Androidであればアプリのパッケージファイル(apk)をサーバーに用意しておくだけで済むので、楽に配布できます。

 iBooks Authorを使えば、ゲームも電子書籍として配布できます。説明文をiBooks Authorで書いておき、その横にゲームのウィジェットを配置しておけばよいわけです。「無料配布なら」という前提条件はつきますが、ゲームをパッケージとして簡単に配布できるのは大きなメリットかもしれません。

 実際に自作のJavaScriptゲームをiBooksに埋め込んでみました。

【図】fig34.png

自作ゲームのウィジェットをiBook Authorで埋め込んでみた

 iPadで見ると下図のようになります。

【図】fig35.png

iPad内にゲームのウィジェットが埋め込まれページ上に表示されている

 ゲームのウィジェットをタップするとプログラムが起動し、ゲームをプレイできます。

旗を取るゲーム。全部取れればゲームクリア

 ゲームの場合、いくつか問題があります。1つは画面の回転です。ウィジェットから書籍のページに戻った後、画面を回転させるとウィジェットのプログラムはリセットされます。ゲームの場合、最初からプレイし直すことになってしまいます。回転さえしなければ、いったん書籍のページに戻ってもプログラムはリセットされません。回転させたくない場合は、インスペクタで「縦向きを無効にする」にチェックを入れてください。

【図】fig38.psd

回転しないように設定する場合は「縦向きを無効にする」にチェックを入れる

 また、HTML5のaudio要素を使って音声を再生する場合、MP3ファイルは利用できません。data URL形式であれば可能かもしれませんが、少なくともMP3ファイルは埋め込めません(インターネット上にあるファイルはURLを指定して再生できます)。

【図】fig39.png

HTML5 Audioは再生できる。図はaudio要素を使ってネット上にあるMP3ファイルを再生したもの

 localStorage(ローカルストレージ)も利用できます。ローカルストレージのストレージ領域はブック単位ではなくiBooksで共通なので、key()メソッドで他の書籍が保存したローカルストレージの内容も読み出せてしまいます(バージョンアップで変更される可能性はありますが)。逆に、異なる書籍同士でデータをやりとりできるとも言えます。

【図】fig40.png

ローカルストレージにメッセージを保存した後、画面に表示している

【図】fig41.png

他の書籍を作成し、ローカルストレージの内容を読み出した結果。他の書籍で保存したデータが読み出されてしまう

 観光案内のパンフレットなどに便利なのが地図です。iBooksではGoogleマップなどの地図も表示できます。

【図】fig42.png

新宿駅付近の地図を表示

 また、地図表示に欠かせない位置情報も、Geolcoation APIを使って取得できます(ただし、下図のように、ユーザーに位置情報の提供を確認するダイアログが2回表示されます)。

Geolocation APIも利用できる

 今回紹介したサンプルを実際に埋め込んだ電子書籍を筆者のサイトに用意しました。iPadでアクセスすれば直接、iBooksでサンプルを表示できますので、ぜひ試してみてください。

サンプルファイルのダウンロード
http://www.openspc2.org/HTML5/iBooks/081/

 iBooks Authorは手軽に電子書籍が作れたり、HTML5のアプリ/ウィジェットを埋め込んだりできるユニークなアプリケーションです。現時点ではそれほど多くの機能はありませんが、今後バージョンアップされれば、もっといろいろな使い方ができるようになるかもしれません。

 それでは、また次回。

前へ 1 2 3 4 次へ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています