プログラミング：iBooks AuthorでのJAVAScript
2012.1.22
非常勤講師：山本博志 講義補助資料
AppleからiBooks Authorという教科書を作るアプリが無料で公開された。インタラクティブな教科書が作れるというので早速試してみた。まず、分子模型を描くプログラムを教科書に載せるということに挑戦してみた。このプログラム自体はHTML５対応にDashCodeで書いてあるので、そのまま教科書に貼付けられるのかと思っていたら、そんなには甘くなかった。DashCodeでプログラムを書く場合にはSafari (Mobile Safariを含む)用のプログラムを書くのか、Dashboard用のプログラムを書くのか、最初に下の絵のように決めてやる必要がある。
自分の場合はピリカのHPで公開、ビジターはブラウザーでそれを見るという前提なので、これまではSafariを選んで開発を進めてきた。ところが、この電子書籍でJavaScriptのプログラムを動作させる場合には、Dashboardを選択してプログラムを作らなくてはならない。このDashboardのWidget（ちいさなアプリケーション）はマック上でしか動かないので自分はほとんど利用してこなかった。おそらく、iBook2という電子書籍を読むアプリケーションにこのウィジェットを理解して動作させる機能が実装されたのだろう。ただ、プログラムの作成と言う観点から見ると、そんなに大きな変更は無い。Safari用に作ったテキストフィールド、ボタン、プルダウン・メニューなどは、そのままコピーしてDashboard用のプロジェクトに貼付ける事ができる。JavaScriptのソースコードもそのままコピーして貼付ければいい。
HTML5+JavaScriptのプログラムも簡単にWidget化できるようだ。自分にとって困る違いはスライダーだ。Safari, DashBoardプロジェクトはスライダーが使えるが、Mobile Safariでは使えない。そこでスライダーのあるプログラムはiPadのMobile Safariではテキストフィールドが表示されてしまう。Mobile Safariのプロジェクトを選択すると、Touch Eventなどは使いやすいが、画面がiPhone用になってしまう。iPadはサイズ的にはSafariプロジェクトを選択したいのだが、機能的にはMobile Safariなのでイマイチ使い勝手が悪い。ぜひとも次のDashCodeではiPad、もしくはiBooks Author用のプロジェクトも付け加えて欲しいものだ。
5分もあれば移植できた。と、走らせると、画面は表示されるのだけど、分子を回転できない。回転させようとCanvas(分子模型を描く領域)でマウスを押したままドラッグするとウインドウ自体が動いてしまう。
プルダウンメニューはうまく働く。当然キャンバス内では分子の回転、移動、拡大縮小と独自の動作をさせるので、
event.preventDefault();
を使ってデフォルトの動きを止めてあるのに、ウインドウが動いてしまう。しょうがないので、Dashboardのお絵描きの例題をネットで探す。そうした例題をネットからダウンロードしてどうやっているのかを見る。結構時間がかかったが（１時間）結局、その指定はJavaScriptのソースコードの指定ではなく、CSSの側でやる事が判明した。
#canvas {
position: absolute;
-apple-dashboard-region: dashboard-region(control rectangle);
width: 364px;
height: 243px;
right: 27px;
margin-left: auto;
left: 27px;
margin-right: auto;
top: 31px;
margin-bottom: auto;
bottom: 53px;
margin-top: auto;
}
キャンバス・タグに赤文字の１行を入れると、縁をつかむと動かせ、キャンバス内では動かせるようになった。そして、それを”動作形式で保存する”を選択すると、マックのWidget専用フォルダーに保存される。
そして、iBooks Authorを立ち上げる。適当なひな形を選んで、最後の方にページを加え、そこに先ほど作ったWidgetをドロップする。文字の部分はiBooks Authorが勝手に付け加えた物で後で自分で編集する。
Widgetの部分を選択すると、下にHTMLを編集というボタンが現れる。
そのボタンを押すと分子模型のプログラムが現れ、回転させたり、拡大縮小させたり自由に操作する事ができる。
ちゃんと動く事が確認できたので、プレビュー・ボタンを押してiPadで実際の出来具合を見る。ちょっとビックリしたのはマック上でプレビューするのでは無く、実機のiPadでプレビューする点だ。iPadで見ると、このJAVAScriptのWidgetは左下のように見える。
これをクリックすると、全面に広がる。左上のX印をクリックするともとの書籍の方に戻る。
ところが、問題発生。当たり前の事だが、今までのテストはマックで行っていた。ところが、iPadではマウス・イベントは発生しないので、また分子が回転しない。onClickイベントは発生するのでChooserは動作する。そこで、再びDashCodeに戻り、Touch eventを実装する。
DashCodeでは例えばキャンバスを選択すると、そのイベントとハンドラを簡単に結びつけられる。ここにTouchイベントもあればいいのだが、それが無い。自分で書き加える。（プロジェクトをMobile Safariを選ぶとイベントは自動的にTouch Eventになる。）
ここまできて、やっとiPadで自由に動かせるプログラムになる。午前中、半日の作業だった。それができたらiBooks Authorから電子書籍を保存する。そのやり方は２つある。公開を選ぶと、iTunes Store パッケージを作る。それをiTunesにドロップすれば自分のiPadにインストールできる。今まで、Safari用のHTML5プログラムを書いても、ネット経由でしかiPadで動作させる事ができなかった。これは大きな改善だ！
もう一つは、書き出すを選ぶ。これを選ぶとiBooksで読めるブックを作製、PDFを作製、テキストを作製が選べる。
このブックはiBookstoreでのみ販売できる。
普通には”バージョンを保存”しておけば、ダブルクリックすればiBooks Authorが自動的に立ち上がる。
いろいろ面白く使えそうだ。
ネットでも色々話題になっている。多くの論調はiBookStoreは日本でサービスしていないから意味が無いといった論調だ。これは立場の違いだろう。自分は画像や動画は持っていないが、インタラクティブなコンテンツはHTML5の形でたくさん持っている。コンテンツ・フォルダー（中身を持っているもの）にとってはキラー・アプリケーションだ。PDFやe-Pubで書籍を作った場合には、アマゾンのキンドルやソニーのReaderで読むことができる。でもPDFは巻物であって書籍では無い。インタラクティブなコンテンツを持っているものにとってはe-Pubではどうしても物足りない。そのe-Pubであってもマックのワープロ・ソフトPagesを使えば簡単に作成できる。GoogleのSigilでもいい。だから、iBooks AuthorはJavaScriptのプログラムが載るのがキーポイントだ。ものすごく色々なアイデアが浮かぶ。DashCodeが使えて簡単にプログラムが書けて、それと共に文章が書ければ簡単に教科書が作れる。学生に読ませる場合には無料コンテンツでいいので自由に配布できる。iBookStoreが日本でサービスしているとか、いないとかは問題にならない。もちろん英語の教科書が書ける人は全世界に売ればいい。これをアップルの囲い込みと見るか、アップルのエコシステムと見るかは受け手次第だ。インタラクティブなコンテンツを持っていないなら、PDFとe-Pubで十分で、それで作ればキンドルやReaderも含まれるので、そちらの方がエコだ。ツイッター、ブロガーにとってはあまり意味のないソフトだろう。
今まで、日本ではプログラムで食べていけるのはゲーム系のプログラマーか、システム・エンジニアだけだと思っていたが、サイエンス系のプログラマーの育成が非常に重要になると思う。そこら辺に対する日本の教育はお寒い限りだ。日本ではブログ・ネタとして賑わっているが、すぐに沈静化してしまうだろう。大学の先生から変わらなくては駄目だ。それと、日本の出版社と端末メーカーの無益な囲い込みで日本のサイエンスがどんどん遅れていく。ほんとに、ガラパコスだ。
自分がこれまでに作ったHTML5のプログラムは
物性推算のページ
化学工学のページ
高分子化学のページ
分子軌道のページ
その他の化学のページ
に置いてある。これらから簡単に教科書が作れるのはすごいことだと思う。
このページを日本語と英語のページで公開してから、４日たった。英語のページは"iBooks Author JavaScript"で検索するとトップページの６番目に現れている。英語ページのアクセスは急増だ。言語を日本語にしぼると圏外だ。（3ページ先は見ないので）やはり日本ではJAVAScriptの部分は注目されていないようだ。
プログラミングのトップページへ
