チュートリアル:iBook Authorで、iBooksの中にパノラマVRコンテンツを埋め込む方法
(昨日の日付が変わる直前まで頑張ったんですが...御免なさい、間に合いませんでした。なので、今日あらためてキッチリ作りました)
というワケで、PanotourPro日本語化記念(併せてパノラマニア,ストアPayPal導入記念も!)ということで、iBooks AuthorとPanotourProを使った、iBooksの中にパノラマVRコンテンツを埋め込む方法をご紹介したいと思います。
...その前に、大前提条件ですが、iBooks Authorは、Mac専用ソフトウェアです(使用環境は、原則的にLion上のみです)。しかもiPadのみで動く電子書籍を作るソフトです。さらに有料のiBooksストアは現段階では日本では開設されていませんので、将来的な投資の意味合いも大きいことを覚えておいて下さい。
しかし、非常に簡単に...本当にアっという間に出来てしまいます!...作成することが出来る無料の電子書籍制作環境がリリースされたことで、教科書だけでなく電子書籍そのもののインタラクティブ化は大きく進歩するのではないでしょうか。
まず、今日作るデータを先にご覧頂きましょうか。
下記のアイコンをクリックして、ダウンロードして下さい。

vrpodcast_sample.ibooks
(Zip圧縮していますので、ダウンロード後解凍してからiTunesにドラッグ&ドロップしてインストールして下さい)
ちなみに、ダウンロードできたファイルは、iTunesにドラッグ&ドロップすると、「ブック」にインストールされます。これをiPadで選択して同期して下さい。
これを作成する手順を、お話していきたいと思います。
準備するものは、以下の通りです。

■ Mac App Store - iBooks Author

■ Panotour Pro - パノラマ専用ソフトウェア - Panoramania, STORE
http://panoramania.jp/store/products/detail.php?product_id=49
- iBooks Author
- Panotour Pro
- テキスト(書籍の題名/ページタイトル/本文、他)
- パノラマ画像(Equirectangularが良し)
- サムネール画像
- 表紙用画像(惑星画像っぽいのがイイかも)
- チャプター表紙画像
実はiBooks Authorには「HTML」というウェブページを埋め込む機能が備わっている...ように見えるのですが、実はそんな簡単なものではありませんでした。
Appleの開発環境の中に「Dashcode」というデスクトップ用スモールアプリケーション「Dashboard」のオーサリングアプリケーションがあり、ベースはHTML/css/JavaScript/XMLで記述していきます。
![]()
実はiBooks Authorで埋め込めるHTMLは、まさにDashboardで構築されたパッケージ化されたウェブアプリケーションでなければなりません。拡張子は「.wdgt」というヘンテコな記述ですが、これは「widget」の略で、このパッケージアプリケーションの名称を「ウィジェット」と読んでいます。iBooks Authorでは、このウィジェットを埋め込むことで、様々なインタラクティブコンテンツの表示を実現しています。
というワケで、1/20のこのブログの記事の2日後に既にボク自身はiBooksでのパノラマVRコンテンツの実装が済んでいましたが、かなり面倒な手作業が必要でした。勿論、Dashcodeも使わなければなりませんし、なかなか素人さんには取っ付きにくいんじゃないかなと思い、どうしようかと思案しておりました。
そしたらPanotourProが何と、iBooks Authorに埋め込める.wdgtフォーマットのデータの出力に対応したじゃありませんか!Dashcodeを起動することなしに、直接PanotourProからiBooks用ウィジェットを出力することが出来るようになりましたので、本当に楽です。
[ STEP 1 ] 各パノラマ画像をウィジェット化する
というワケで具体的な手順をお話します。
(スクリーンショットはクリックすると拡大します)
PanotourProを起動し、画像を読み込みます。
Finderにあるパノラマ画像1枚を、PanotourProのワークスペース(真ん中の広いスペース)にドラッグ&ドロップで放り込んで、読み込みます。画角を決めます。
PanotourProの画面右下「3Dエディタ」で画角や視野角を決め「デフォルトの画角として指定」ボタンをクリックします。ジャイロスコープは利用可能にしておくと良いでしょう。
「プロジェクトプロパティ」タブの「エキストラ」タブの「ジャイロスコープ」は「利用可能」にしておくと良いでしょう(iPad2ではジャイロセンサーが働きます)ビヘイビアも実装できます。
「プロジェクトプロパティ」タブの「ビヘイビア」タブで自動回転やリトルプラネットのイントロなどのビヘイビア設定も可能です。ビルドの設定をします。
「プロジェクトプロパティ」タブの「ツアーのビルド」タブで「モバイルデバイスツアー」にチェックを入れ「スタンダードツアー」のチェックを外し、さらに「iBoos Widget」にチェックを入れて下さい。この時「HTMLテンプレート」は必ず「fullpage.html」を選択しておいて下さい。これでウィジェット出力の準備が整いました。
ビルドして保存します。
最後にビルドボタン(cmd+B)をクリックすると、保存ダイアログが出てきますので、好きな場所に好きな名称を入れて、保存して下さい。拡張子は自動的に入力されます。ヴァーチャルツアーの埋め込みも出来ますが、初代iPadでも動かそうと思ったら、CPUとメモリの関係で、ヘヴィなコンテンツは再生が非常に厳しいです。基本的には単体のパノラマVRムービーをめくっていく方が良いんじゃないかなと思います。なので、複数載せる場合は、上記を複数回繰り返して下さい。
[ STEP 2 ] iBooks Authorに埋め込み、電子書籍として構築する
上記で出来上がるウィジェットのアイコンは、こんなのです。
![]()
通常Macで使われているこのアイコンのウィジェットはダブルクリックするとDashboardが起動してインストールされますが、これは純粋にパノラマVRデータだけが入っているので、インストールても表示されません。エラーが出るだけです。
で、コイツをiBooks Authorの中に埋め込んでいきます。
iBooks Authorを起動します。
起動時には「テンプレートセレクタ」が出現します。ここでは左上の「基本」で良いでしょう。iBooks Authorのチュートリアルは、他のサイトで散々やっているので、検索して参照して下さい。デフォルト画面はこのようになります。
ページにウィジェットを配置します。
チャプタ直下のページを一旦空白にしておきます。パノラマ画像のサムネールが大きい場合は見開きレイアウトになってしまいますので、フリーレイアウトの方が構築しやすいでしょう。そこにツールバーから「ウィジェット>HTML」を選択して下さい。
すると画面上にこのような表示がされます。
ツールバーからインスペクタをクリックしてインスペクタウインドウを表示させ、ウィジェットレイアウトのタイトルや見出し、背景のチェックを全て外して下さい。
ページにパノラマウィジェットを埋め込み、レイアウトを構築します。
先ほど配置したウィジェットの「HTML」という表示部分に、Finderに保存したパノラマウィジェットをドラッグ&ドロップで放り込んでやります。すると、PanotourProのウィジェット出力時に同時生成するサムネール画像が自動で貼付けられます。若干歪んでますし、なにより小さいので、ここで大きい画像に差し替えましょう。このサムネール画像の場所に、Finder上にある自分で作成したサムネール画像をドラッグ&ドロップして放り込んでやると、見事に差し変わります。
この状態ではサムネールサイズが小さいままなので、サムネール画像をダブルクリックしてバウンティングボックスを表示させ、サイズの調整を行います。
また画像のフチには飾り枠を設けることも出来ますので、これを使って装飾を施せば、かなり良い雰囲気になるでしょう。
あとは用意したテキストを自由に流し込めば、ページレイアウトの完成です。
他のコンテンツもそれぞれ埋め込みます。
上記ページをコピー&ペーストで他の白紙ページに複製します。実はこの辺がソフトウェアとしてはまだ不完全なようで、気軽にはいかないようです。現時点では、- レイアウトが決まったページ全体をドラッグ選択してコピーし、
- 左カラムのリストのセクションページあたりで右クリックして「ページを挿入」し、
- 新しいページが出来たら、ページレイアウトを「空白」にしてから、右カラムのページ中央部あたりを右クリックで「ペースト」する。
- 上記(1)〜(3)を繰り返す
また1つチャプタが出来あがったら、「チャプタの複製」で同じようなレイアウトのページを作ることが出来ます。
この状態で「テンプレートして保存...」しておくと、便利だと思います。
あとはこの状態で用意していた他のコンテンツを流し込むだけです。レイアウト作業さえ出来てしまえば、あとは手が勝手に動いてくれます(笑)
他のコンテンツもそれぞれ埋め込みます。
表紙やチャプターのトップページ、目次ページなどを作成します。それぞれデザインが必要なので、予め用意しておくソースはそれなりに必要です。 またテキストに関しては、iPadのシステムフォント(iOSのシステムフォント)を使用して下さい。PDFみたいにフォントデータまで埋め込まれるようなことはありません。インストールしてるiOSのシステムフォントを調べるには「Typefaces」という無料のアプリがあるので、こちらを参照してみて下さい(ググっても、リストを公開しているWebページが幾つか出てきますね)。ちなみに日本語フォントは以下の4つです。Hiragino Kaku Gothic ProN
- HiraKakuProN-W3(ヒラギノ角ゴ ProN W3)
- HiraKakuProN-W6(ヒラギノ角ゴ ProN W6)
Hiragino Mincho ProN
- HiraMinProN-W3(ヒラギノ明朝 ProN W3)
- HiraMinProN-W6(ヒラギノ明朝 ProN W6)
これに、サンセリフ系の「Helvetica Neue」とセリフ系の「Times New Roman」で組むぐらいで良いと思います。余りいろんなフォントを混ぜるのは、非常に危険です(汚く見えるので)。
さぁ、これでレイアウトが全て完了しました。あとは確認作業と出力作業ですね。
[ STEP 3 ] iPadで確認する
ココまで出来たらもう一息です。
iBooks Authorを起動しているMacにiPadを接続して、iPad側の「iBooks」アプリを起動しておきます(まだインストールしてない方は、無料ですのでダウンロードしておいて下さい!)
iBooks Authorに戻って、ツールバーの「プレビュー」ボタンをクリックして下さい。
iPadが接続されていない場合は上記のようなダイアログが出ますが、きちんと接続されていれば大丈夫です。そのまま「OK」で続けて下さい。

iPadへ転送するデータを作成し、完了するとデータ転送が始まります。iPad側では自動的に読み込みが始まり、完了するとブックという棚に自分が作成したデータが入って、自動的に開きます。
ブックコレクションの棚の自分のブックの肩にある「Proof」は、自分が制作している検証中のブックであることを示しています。
表示で不備が見つかったら、iBooks Authorに戻って編集し、プレビューを繰り返せば、iBooks側のデータは自動的にアップデートされます。心ゆくまで編集してみましょウ!
[ STEP 4 ] 配布用データを保存する
プレビューを繰り返して最終データとして確認し終わったら、最後に配布用データとして書き出しましょう。
有料販売に関しては、iBooks Authorの利用規約として、iTunes iBookStoreでなければ販売できないことになっていますが、日本国内では未だストアが開設されていないこともあり、無料配布版のみデータ作成が可能というのが現状です。したがってここではツールバーの「公開」ボタンをクリックするのではなく、「ファイル」メニューの「書き出す...」を選択しましょう。すると、下記のようなダイアログが出てきます。

ここで左端の「iBooks」を選んで「次へ...」ボタンをクリックすると現れる保存ダイアログで、好きな場所に保存して下さい。
...さぁ、如何でしょうか?
パノラマVRコンテンツの埋め込みは、本当に呆気ないほど簡単です。全てはPanotourProの出力機能のお陰です。本当に有り難いです!
このパノラマウィジェットですが、PanotourProで作ったヴァーチャルツアーも埋め込めますので、iPad2を持ってる方なら動くんじゃないでしょうか。ちなみにボクの初代iPadだと、3ノードぐらいのツアーでギリギリ落ちるか落ちないか、です。
少なくとも単体のパノラマVRムービーがさくさく動きますので、パノラマ作品のポートフォリオなんかも、これで簡単に作れそうです。人に配るにも簡単ですし。
こうしてPanotourProがサクっとウィジェット出力機能を搭載してきたことから、他のメーカー(Pano2VRやTourweaverなど)も追随してきそうですね。
この業界も活況を呈するのでしょうか。非常に期待したいところです!
トラックバック(1)
トラックバックURL:
iBooks Authorがいままでの電子書籍と全く異なっているのは、書籍内部にアプリを埋め込みできることにある。Dashcodeウィジェットである。ウ... 続きを読む






























( 2012年2月 7日 23:10 )
期待して読んだのですが、ibookをクリックすると、文字列になってしまいます。どうすればいいのでしょうか。今iPad2にはiPanoを用いてcuvicVRを表示しています。iBookも使ってみたいと思っています。
( 2012年2月 9日 10:02 )
>山道さん江
こんにちは、
ダウンロードフィアルがバイナリになってしまってたんですね。
ゴメンナサイ。
生データでも大丈夫かなぁって思ってたんですが…ZIP圧縮しましたので、再度ダウンロードしていただけますか?解凍後は「.books」という拡張子の、上記のアイコンのファイルになっていると思うので。
(もしなっていないとなると…もしかしてLionじゃないとか?が原因と考えられます)
「iBooks Author」は、至上最も安価で簡単な「iOSアプリ制作環境」になってしまった感があります。ここで「開発」とは言わずに「制作」と言ってしまえるところがミソですね。全くのプログラミングの知識も、Appleとの開発者契約の必要も全くナシに、iPad限定ではありますが、インタラクティブコンテンツを自由に流し込めるのは、本当に大きな進歩だと思います。
現段階でパノラマVRコンテンツを実装する“簡単な”方法は、PanotourProを使うしか方法はありませんが(実は、他のHTML5/css3ライブラリでも出来なくはないですが、ハードルは高いと言っていいでしょう)、他社も間違いなく追随してくるはずです。自分の所有しているソフト群でも出てくると思いますので、どうぞ気軽に待っていて下さいね〜!
( 2012年2月 9日 17:38 )
ninomiya様
サンプル見させていただきました。
こういう風にテキストからスムーズにパノラマを見せられるのって、自然ですごく見やすいです。ほんとipadにピッタリのコンテンツが作れる感じがします。参考にして勉強させていただきます!