古籏一浩のJavaScriptラボ ― 第81回

iBooks AuthorでHTML5の電子書籍作ってみた

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

古籏一浩

ツイートする

iBooksで時計を表示する

　最初に、簡単なHTML+JavaScriptを電子書籍に埋め込んでみましょう。

　iBooks Authorは、Mac OS Xの「Dashboardウィジェット」の埋め込みに対応しています。DashboardウィジェットはHTML/CSS+JavaScriptで構成されているので、Dashboardウィジェットを介してHTMLを電子書籍に埋め込むわけです。

　Dashboardウィジェットに関しては本連載の52回～56回で詳しく解説しているので、参照してください。また、Dashcodeアプリケーションを利用しても作成できます。

第52回　Web技術で作るDashboardウィジェット開発入門: http://ascii.jp/elem/000/000/593/593994/

　「ウィジェットを作らないといけないのか、面倒だな」と思う人もいるかもしれません。でも、そんな心配は不要です。ウィジェットは、HTMLファイルやCSSファイルなどをフォルダにまとめ、ファイル情報を示す「Info.plist」ファイルを用意するだけで作成できます。

　サンプル1は、時計をリアルタイムで表示するプログラムです。電子書籍に埋め込む前に、Safariで動作を確認しておきましょう。シンプルなコードですので特に難しい部分はありません。JavaScript初心者でも分かるでしょう。


Safariで動作を確認しておく

■サンプル1


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>時計</title>
  </head>
  <body>
    <h1>iBooks時計</h1>
    <output id="time">00:00:00</output>
    <script>
      setInterval(function(){
        var dateObj = new Date();
        var h = dateObj.getHours();
        var m = dateObj.getMinutes();
        var s = dateObj.getSeconds();
        var timeStr = h + "時"+m+"分"+s+"秒";
        document.getElementById("time").innerHTML = timeStr;
      }, 1000);
    </script>
  </body>
</html>

　このプログラムを「index.html」という名前にしてフォルダに入れます。フォルダ名がウィジェット名になりますが、iBooks Authorに埋め込むのであれば特に命名規則などはありません。


index.htmlファイルをclockフォルダに入れる

　次に、「Info.plist」ファイルを新規に作成します。テキストエディターでも作成できますが、Mac OS Xに付属する「プロパティリストエディタ」を利用して記述すると修正が簡単です（関連記事）。

　プロパティリストエディタでは、以下の図の矢印で示した項目を、ウィジェットに応じて変更します。


アプリケーションに応じて変更する部分

　各項目の意味は以下の通りです。ウィジェットの幅はiPadの画面サイズに合わせておきます。

CFBundleDisplayName: ウィジェット名
CFBundleIdentifier: ウィジェットID (ドメイン名とアプリ名を組み合わせる。同名のIDがなけばよい）
CFBundleName: ウィジェット名
Height: iPadで表示する際のウィジェットの縦幅
Width: iPadで表示する際のウィジェットの横幅
MainHTML: 最初に読み込むHTMLファイル名

　Info.plistをテキストエディターで作成する場合は以下のように記述します。

■サンプル1　[Info.plist]


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>CFBundleDevelopmentRegion</key>
  <string>English</string>
  <key>CFBundleDisplayName</key>
  <string>clock</string>
  <key>CFBundleIdentifier</key>
  <string>com.openspc.widget.clock</string>
  <key>CFBundleName</key>
  <string>clock</string>
  <key>CFBundleShortVersionString</key>
  <string>1.0</string>
  <key>CFBundleVersion</key>
  <string>1.0</string>
  <key>CloseBoxInsetX</key>
  <integer>15</integer>
  <key>CloseBoxInsetY</key>
  <integer>15</integer>
  <key>Height</key>
  <integer>700</integer>
  <key>MainHTML</key>
  <string>index.html</string>
  <key>Width</key>
  <integer>1024</integer>
</dict>
</plist>

　Info.plistはindex.htmlファイルと同じ階層に入れます。


index.htmlと同じ階層に入れる

　次に、フォルダに「.wdgt」という拡張子を付けます。するとフォルダアイコンがDashboardウィジェットに変わります。


フォルダに.wdgtの拡張子を付ける


確認のダイアログが出るので「追加」ボタンをクリック


フォルダアイコンがDashboardウィジェットに変わる

　これで電子書籍に埋め込むDashboardウィジェットが用意できました。

iBooks Authorで埋め込む

　作成したウィジェットをiBooks Authorで電子書籍に埋め込んでみましょう。iBooks Authorを起動します。


iBooks Authorを起動する

　電子教科書のテンプレートが表示されます。


テンプレートが表示される

　今回は「基本（植物学）」のテンプレートを使用します。植物学のアイコンをダブルクリックすると、テンプレートをベースにしてドキュメントが作成されます。


新規のドキュメントが作成される

　ページ内に作成したウィジェットを埋め込みます。埋め込むページを選択します。


ウィジェットを埋め込むページを選択する

　画面上部にあるウィジェットボタンをクリックします。一覧が表示されたら、「HTML」を選択します。


ウィジェットボタンをクリックする


HTMLを選択する

　するとページ内にウィジェットが配置されます。この段階では埋め込むウィジェットが設定されていないため、枠だけが確保された状態です。


ページ内に配置される

　作成したウィジェットが表示されるように設定します。ウィジェットパレット内の「選択...」ボタンをクリックし、選択ダイアログから前に作成したウィジェットを選択します。


「選択...」ボタンをクリックする


作成したウィジェットを選択する

　これで、選択したウィジェットが配置されました。ウィジェットの上下にあるキャプション（現状はダミーが入っています）も修正しておきましょう。ウィジェットの下にある「HTMLを編集」ボタンをクリックします。


「HTMLを編集」ボタンをクリックする

　画面が切り替わったら英文字をクリックして編集し、文字の修正が終わったら「完了」ボタンをクリックします。


文字を修正する


修正が終わったら「完了」ボタンをクリックする

　これでできあがりです。iPadで動作を確認しましょう。iPadをMacに接続し、iBooksを起動しておきます。なお、iBooks Authorで作成した電子書籍はiBooks 2.0以降に対応しています。iBooksは最新版にアップデートしておきましょう。


iBooksを起動する


iBooksの画面

　iPadを接続したらiBooks Authorでプレビューボタンをクリックします。iPadを接続していない場合は接続確認が表示されます。iPadを接続しているのにプレビューボタンが反応しない場合は、iPadとMacを再接続してみてください。


プレビューボタンをクリックする

　少しすると作成した書籍がiBooksで開きます。ページを移動するとウィジェットが埋め込まれているのが確認できます。なお、横画面と縦画面ではウィジェットの位置が異なります。


埋め込んだウィジェットがページ中央に表示されている。なお、縦方向にするとウィジェットは左側に配置される