個人でも可能な電子出版 誰でもできる電子出版 第三十九回
ITライフハック / 2014年12月11日 9時0分
![個人でも可能な電子出版 誰でもできる電子出版 第三十九回](https://media.image.infoseek.co.jp/isnews/photos/itlifehack/itlifehack_6962_0-small.jpg)
■はじめに
今回は久しぶりに技術的なトピックで行ってみます。元ネタはhon.jpさんの記事「固定レイアウト型EPUB電子雑誌で、アプリ側UIを不用意に表示させないためのJavascriptコード」です。
記事を読んでもInDesignの知識が無いと分かりにくいかもしれないので、その辺りも補足しつつ進めていきます。
■InDesign CC2014のインタラクティブ演出が問題になるケース
以前もInDeisgn CC2014(以下単に「InDesign」と記載します)の固定レイアウト書き出しについては少し触れたことがありますが、改めて。
InDesignではEPUBの固定レイアウト書き出しが可能になりました。それに加えて、InDesign上でインタラクティブな演出を追加できるようにもなりました。
例えば、画像をクリックすると1回転する、といったアニメーション効果をつけることもできます。
![クリックすると1回転の設定](http://itlifehack.jp/wp-content/uploads/2014/12/ebook0010.jpg)
クリックすると1回転の設定
仕組みとしては、インタラクティブな演出はJavaScriptで実現されます。
インタラクティブな演出を追加すると、EPUB書き出し時にInDesignが演出を実行するためのJavaScriptコードを追加します。
もちろんEPUBリーダー側がJavaScriptに対応していなければ適切に動作しません。
AppleのiBooksはJavaScriptのサポートが良好で、InDesignのインタラクティブな演出を始め多くのJavaScriptプログラムが動作します。
この例のような、「クリックでアニメーションが実行される」コンテンツをiPadのiBooksで動作させると、微妙な問題が発生します。
iPadではこの演出を実行するために、クリックではなくタップを行うことになります。ですが、iPadのiBooksでは画面タップのデフォルトの動作として、アプリの操作インターフェイスの表示/非表示を切り替えが組み込まれています。
![操作インターフェイス(赤枠部)表示時](http://itlifehack.jp/wp-content/uploads/2014/12/ebook0020.jpg)
操作インターフェイス(赤枠部)表示時
![操作インターフェイス非表示時](http://itlifehack.jp/wp-content/uploads/2014/12/ebook0030.jpg)
操作インターフェイス非表示時
つまり、インタラクティブ機能を実行するために画面をタップする度に、アニメーションが実行されるとともに、アプリの操作インターフェイスの表示/非表示が切り替わり、読者が煩わしい思いをする可能性がある、ということです。
このような動作を解消する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
この記事に関連するニュース
-
【漫画じゃんげま】428.「ダークカーニバル」の巻
Game*Spark / 2024年7月22日 20時0分
-
脱「パワポっぽい」 Canvaでオシャレなプレゼンを 第21回 スマートフォンでCanvaを使ってみよう
マイナビニュース / 2024年7月4日 9時0分
-
Nejumi LLMリーダーボードがアップデートされ、安全性評価など多数の評価を追加
PR TIMES / 2024年7月1日 19時45分
-
クロスサイトスクリプティング(XSS)攻撃手法6選、推奨の脆弱性検出ツール3選
マイナビニュース / 2024年7月1日 13時28分
-
WindowsのMSCファイルに任意のJavaScript実行の脆弱性、注意を
マイナビニュース / 2024年6月27日 7時46分
ランキング
-
1「これが生えたら庭終了」 プロも降参する“何をやっても全部ムダな最恐雑草”の正体が400万再生「ほんとこれ厄介」「土ごと変えないと不可能」
ねとらぼ / 2024年7月25日 21時30分
-
2温水洗浄便座の異常、放置しないで──NITEが注意喚起 発火のおそれも
ITmedia NEWS / 2024年7月25日 19時13分
-
3知っているとMacがより快適になる便利な5つの小技|今さら聞けないMacの便利テク
&GP / 2024年7月25日 21時0分
-
4人気Androidアプリにゼロデイ脆弱性、動画に扮してマルウェア感染
マイナビニュース / 2024年7月25日 9時12分
-
5性的同意サービス「キロク」の登録者数が1万人超え YouTubeでは利用例を漫画形式で紹介
ITmedia NEWS / 2024年7月25日 16時31分
記事ミッション中・・・
記事にリアクションする
![](/pc/img/mission/mission_close_icon.png)
記事ミッション中・・・
記事にリアクションする
![](/pc/img/mission/point-loading.png)
エラーが発生しました
ページを再読み込みして
ください
![](/pc/img/mission/mission_close_icon.png)