■はじめに
今回は久しぶりに技術的なトピックで行ってみます。元ネタはhon.jpさんの記事「固定レイアウト型EPUB電子雑誌で、アプリ側UIを不用意に表示させないためのJavascriptコード」です。
記事を読んでもInDesignの知識が無いと分かりにくいかもしれないので、その辺りも補足しつつ進めていきます。
■InDesign CC2014のインタラクティブ演出が問題になるケース
以前もInDeisgn CC2014（以下単に「InDesign」と記載します）の固定レイアウト書き出しについては少し触れたことがありますが、改めて。
InDesignではEPUBの固定レイアウト書き出しが可能になりました。それに加えて、InDesign上でインタラクティブな演出を追加できるようにもなりました。
例えば、画像をクリックすると1回転する、といったアニメーション効果をつけることもできます。
クリックすると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
今回は久しぶりに技術的なトピックで行ってみます。元ネタはhon.jpさんの記事「固定レイアウト型EPUB電子雑誌で、アプリ側UIを不用意に表示させないためのJavascriptコード」です。
記事を読んでもInDesignの知識が無いと分かりにくいかもしれないので、その辺りも補足しつつ進めていきます。
■InDesign CC2014のインタラクティブ演出が問題になるケース
以前もInDeisgn CC2014（以下単に「InDesign」と記載します）の固定レイアウト書き出しについては少し触れたことがありますが、改めて。
InDesignではEPUBの固定レイアウト書き出しが可能になりました。それに加えて、InDesign上でインタラクティブな演出を追加できるようにもなりました。
例えば、画像をクリックすると1回転する、といったアニメーション効果をつけることもできます。
クリックすると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
ITライフハック代表
