個人でも可能な電子出版 誰でもできる電子出版 第三十九回
ITライフハック / 2014年12月11日 9時0分
■はじめに
今回は久しぶりに技術的なトピックで行ってみます。元ネタはhon.jpさんの記事「固定レイアウト型EPUB電子雑誌で、アプリ側UIを不用意に表示させないためのJavascriptコード」です。
記事を読んでもInDesignの知識が無いと分かりにくいかもしれないので、その辺りも補足しつつ進めていきます。
■InDesign CC2014のインタラクティブ演出が問題になるケース
以前もInDeisgn CC2014(以下単に「InDesign」と記載します)の固定レイアウト書き出しについては少し触れたことがありますが、改めて。
InDesignではEPUBの固定レイアウト書き出しが可能になりました。それに加えて、InDesign上でインタラクティブな演出を追加できるようにもなりました。
例えば、画像をクリックすると1回転する、といったアニメーション効果をつけることもできます。
仕組みとしては、インタラクティブな演出はJavaScriptで実現されます。
インタラクティブな演出を追加すると、EPUB書き出し時にInDesignが演出を実行するためのJavaScriptコードを追加します。
もちろんEPUBリーダー側がJavaScriptに対応していなければ適切に動作しません。
AppleのiBooksはJavaScriptのサポートが良好で、InDesignのインタラクティブな演出を始め多くのJavaScriptプログラムが動作します。
この例のような、「クリックでアニメーションが実行される」コンテンツをiPadのiBooksで動作させると、微妙な問題が発生します。
iPadではこの演出を実行するために、クリックではなくタップを行うことになります。ですが、iPadのiBooksでは画面タップのデフォルトの動作として、アプリの操作インターフェイスの表示/非表示を切り替えが組み込まれています。
つまり、インタラクティブ機能を実行するために画面をタップする度に、アニメーションが実行されるとともに、アプリの操作インターフェイスの表示/非表示が切り替わり、読者が煩わしい思いをする可能性がある、ということです。
このような動作を解消するJavaScriptコードが提示された、というのが今回取り上げたhon.jpさんの記事の内容です。
■JavaScriptコードについて
hon.jpさんの記事で紹介されたのは、EPUB Secretsの記事です。
ここではインタラクティブ機能を付加してInDesignから書き出した固定レイアウトEPUBを解凍し、内部に含まれるJavaScriptファイル(OEBPS/script/idGeneratedScript.js)を編集する方法が紹介されています。
示されている編集内容は、イベント処理用の関数(function)内の1行目に以下のスクリプトを追加する、というものです。
event.preventDefault();
例えば、InDesignが書き出した元のonMouseUp関数は次の通りです。
function onMouseUp(element, event) {
var is_touch_device = ‘ontouchstart’ in document.documentElement;
if (is_touch_device) return;
removeClass(element, ‘_idGenStateClick’);
var actions = element.getAttribute(“data-releaseactions”);
if(actions) {
eval(actions);
}
event.stopPropagation();
}
この関数内の1行目に先のスクリプトを追加して、次のようにします。
function onMouseUp(element, event) {
event.preventDefault();
var is_touch_device = ‘ontouchstart’ in document.documentElement;
if (is_touch_device) return;
removeClass(element, ‘_idGenStateClick’);
var actions = element.getAttribute(“data-releaseactions”);
if(actions) {
eval(actions);
}
event.stopPropagation();
}
EPUB Secretsの記事では、全てのイベント処理用の関数についてこれを実行するように提示しています。
実際、その通りにスクリプトコードを修正して、再EPUB化したものをiPadのiBooksで実行すると、確かにタップでアニメーションを再生させてもアプリのインターフェイスは表示されません。
しかし逆に、どこをタップしてもアプリのインターフェイスを表示させることができず、読者に別のストレスを与えることになりそうです。
そこで、独自に修正内容を考えて次のようにしてみました。
イベント処理用の関数全てに修正を施すのではなく、onTouchEndForAnimations関数とonMouseUpForAnimations関数に共通する以下の部分を修正します。
var actions = oFrame[i].getAttribute(“data-animationOnSelfClickActions”);
if(actions) {
var selfContainerID = oFrame[i].id;
eval(actions);
}
それぞれのこの部分に「event.preventDefault();」を追加し、以下のようにします。
var actions = oFrame[i].getAttribute(“data-animationOnSelfClickActions”);
if(actions) {
event.preventDefault();
var selfContainerID = oFrame[i].id;
eval(actions);
}
再EPUB化してチェックしたところ、インタラクティブ機能を付加した画像をタップしたときにはアプリのインターフェイスは表示/非表示が切り替わらずに、他の部分をタップしたときには切り替わるという動作が実現できました。
ただし、このコード修正はInDesignのインタラクティブ機能全てに対して有効なものかは分かりません。私がテスト用に用意した簡単なサンプルでは大丈夫だった、というだけのものです。
実際に利用する場合には、より時間をかけて確認する必要があることをご了解ください。
■最後に
日本ではインタラクティブな演出や動画・音声などによる演出などを含む電子書籍はあまり目にすることがありません。制作コストに売り上げが見合わなかったり、使いどころが難しくてなかなか効果的に利用できなかったりといった理由が多そうです。
それでも、個人的にはそのような電子書籍のジャンルが育って行って欲しいと思う気持ちがあります。
2014年12月12日(金)にHTML5に関するイベント「HTML5感」が開催されます。
このイベントで私もセッションをやらせていただくことになりました。初心者さま向けの1時間ほどのセミナーです。ご都合の合う方、ぜひお立ち寄りください。
林拓也のKindle出版講座、iBooks出版講座、ロクナナワークショップで受講生募集中です。詳細はロクナナワークショップのWebサイトでご確認ください。
■著者プロフィール
林 拓也(はやし たくや)
テクニカルライター/トレーニングインストラクター/オーサリングエンジニア
Twitter:@HapHands
Facebook:https://www.facebook.com/takuya.hayashi
■ITライフハック
■ITライフハック Twitter
■ITライフハック Facebook
この記事に関連するニュース
-
ゼロからはじめるGo言語 第21回 正規表現でExcelのセルを検索するツールを作ろう
マイナビニュース / 2024年9月18日 12時59分
-
【漫画じゃんげま】436.「オトナの力3rd」の巻
Game*Spark / 2024年9月16日 20時0分
-
腕時計型GPSゴルフナビ Shot NaviのCrestシリーズ新製品『Crest II Touch』が9月1日発売 風格あるデザインにタッチパネルを搭載し、圧倒的な操作性を実現
@Press / 2024年9月1日 12時0分
-
生成AIだますプロンプトインジェクションに脆弱性、情報流出招く恐れ
マイナビニュース / 2024年8月30日 12時51分
-
Excel帳票をWebで実現!JavaScriptスプレッドシートライブラリ最新バージョンを9月10日にリリース
@Press / 2024年8月28日 11時0分
ランキング
-
1「天才かw」 家が“ゲームセンターみたいになる貯金箱”が楽しそうで「家に一台ほしすぎる」と称賛の声
ねとらぼ / 2024年9月22日 12時15分
-
2【自腹レビュー】非常時の備えって“発電”こそ重要なのでは?Ankerの7000円台ソーラーパネルが使えるのか試してみた
&GP / 2024年9月22日 21時0分
-
3iOS 18で追加された基本アプリの地味だけど便利な機能5選
&GP / 2024年9月22日 19時0分
-
4「これ私もやらかしてる」 Androidの「カメの絵文字」→iPhoneで受け取ると“衝撃のビジュアル”に大変化 思わぬ盲点に21万いいね 「びっくりした」
ねとらぼ / 2024年9月22日 20時0分
-
5iPhone 16/16 Proをお得に買う方法 Apple Storeとキャリアどちらで買うべき?
ITmedia Mobile / 2024年9月22日 10時5分
記事ミッション中・・・
記事にリアクションする
記事ミッション中・・・
記事にリアクションする
エラーが発生しました
ページを再読み込みして
ください