チュートリアル:iBook Authorで、iBooksの中にパノラマVRコンテンツを埋め込む方法

  • comment:3
  • | trackback:1

(昨日の日付が変わる直前まで頑張ったんですが...御免なさい、間に合いませんでした。なので、今日あらためてキッチリ作りました)

というワケで、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. レイアウトが決まったページ全体をドラッグ選択してコピーし、
  2. 左カラムのリストのセクションページあたりで右クリックして「ページを挿入」し、
  3. 新しいページが出来たら、ページレイアウトを「空白」にしてから、右カラムのページ中央部あたりを右クリックで「ペースト」する。
  4. 上記(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ウィジェットである。ウ... 続きを読む

コメント(3)

期待して読んだのですが、ibookをクリックすると、文字列になってしまいます。どうすればいいのでしょうか。今iPad2にはiPanoを用いてcuvicVRを表示しています。iBookも使ってみたいと思っています。

ninomiya様

サンプル見させていただきました。
こういう風にテキストからスムーズにパノラマを見せられるのって、自然ですごく見やすいです。ほんとipadにピッタリのコンテンツが作れる感じがします。参考にして勉強させていただきます!

コメントする

日本唯一のパノラマ画像/VRムービーに関する企画・制作から、セミナー、ソリューション開発・販売に至る、あらゆる業務を行っています。

» パノラマの知名度は今や一般大衆レベルです。

近年パノラマコンテンツは、Googleストリートビューに代表される地図の付加情報としてのパノラマVRムービーの台頭で非常に注目を浴びていますが、その表現力はそれだけに留まらず、多方面で利用されるパノラマヴァーチャルツアーコンテンツ、ギガピクセルクラスの超高解像度パノラマコンテンツ、さらには、360°全方位パノラマ動画が、ライブ配信されるまでになっています。

» 他社を圧倒する経験値が皆様をサポートします。

このような、あらゆるパノラマコンテンツを総合的にプロデュース出来るのは、15年来培ってきたパノラマ制作のノウハウと、2005年から発信してきた「QTVR Diary」での情報の蓄積の賜物です。

» 常に業界をリードし続けます。

世界でも類を見ないパノラマ関連情報専門ブログ「QTVR Diary」の知名度は、リソースの少ない日本だけでなく海外からも注目を浴びています。国内外のメーカーからの情報やソリューションサンプルの提供を受け、いち早くパノラマ業界の専門情報をお届けしています。

» 新しいソリューションを常に開拓し続けます。

今後ますます増え続けるパノラマのニーズに対応すべく、日々研鑽を重ね、多くの方々にパノラマを楽しんで頂けるよう、努力してまいります。

<サイト内リンク>

<姉妹サイト>

<連絡先>

design studio "PENCIL" 二宮 章
〒602-8237
京都府京都市上京区
 大宮通一条下ル梨木町189-5
075-417-3062 (office)
075-417-3063 (fax)
090-9628-6263 (au)
080-3832-2352 (iphone)
ninomiya@pencil-jp.net