filesystem API で作成し展開したたepubファイル群を readium.jsで表示させる

287 views
Skip to first unread message

Toyoaki Washida

unread,
Aug 14, 2013, 9:59:07 AM8/14/13
to chrome-api-d...@googlegroups.com
鷲田と申します。質問させてください。

表題にあるように、電子書籍epub3のオフラインでも表示させられるようなpackageアプリを作成しています。

packageに同梱したepub書籍は, zip.jpで解凍しsimpleReadium.jsできれいに表示させることができます。

一方、パソコン上のepubファイルをfilesystem apiでtemporaryに取り込み、zipで解凍することまでは、
できるのですが、ファイルエントリのソースをreadiumuが表示させるときに以下のような問題が発生します。

Refused to frame 'filesystem:' because it violates the following Content Security Policy directive: "frame-src 'self' data: chrome-extension-resource:".


各ファイルは、toURLでurl化すれば表示できます。
問題は、simpleReadium.jsが書籍内容のファイルを表示させるとき、iframeタグを使用していて、
そのソースの指定が、filesystem apiファイルの特徴である、filesystem://形式のurlになっていて、たとえば、
<iframe scrolling="no" ・・・・src="filesystem://text/cover.xhtml tite=・・・・>
という感じで、
このiframeがcontent_security_policyのframe-srcと矛盾しているために、ないしは、filesystemから始まるurlをurl
と認めないために発生しているようです。readiumによるsrcの指定そのものが間違っているのかもしれません。

content_security_policyは、packageアプリでは変更できないので、困っています。

エラーを発生させる前の、scriptのデバック情報は以下のとおりです。(上が新しい)
(iframeタグは、simpleReadiumが作成し、それをページに貼付ける役割をjqueryが担っている)

jquery-2.0.3.js:5457
jquery-2.0.3.js:5457
jquery-2.0.3.js:5659
jquery-2.0.3.js:5453
SimpleReadium.js:7509
SimpleReadium.js:7788
SimpleReadium.js:7989
SimpleReadium.js:8060

simpleReadium.jsを全体的に書き換える能力は持っていません。
simpleReadium.jsはversion: "0.0.1"です。

私の問題の捉え方が間違っているのかもしれません。

何か、この問題への対応方法をご存知の方がいらっしゃれば、お教えいただきたく、
お願いいたします。

Toyoaki Washida

unread,
Aug 14, 2013, 7:47:11 PM8/14/13
to chrome-api-d...@googlegroups.com
鷲田です。自己レスです。

iframeタグで、filesystem apiとzip.jsで展開したファイルが表示されないという問題ですが、
simpleReadiumではなく、自分で作成したiframeタグで、packageアプ上に
表示させたところ、問題なく表示しました。原因は、iframeとCSPの問題ではなく
simpleReadiumが作成するiframeのsrcのURLが不適切なために、
CSPに関わるエラーを出しているようです。まだ、完全にはわかっていないのですが。

問題は解決していませんが、当面試みるべきことはわかってきました。

一人で悶々とするだけではなく、問題を客観的に鳥瞰する場として
このような場があることをとてもありがたく思っております。

今後ともよろしくお願いします。


2013年8月14日水曜日 22時59分07秒 UTC+9 Toyoaki Washida:

Toyoaki Washida

unread,
Aug 15, 2013, 6:16:02 AM8/15/13
to chrome-api-d...@googlegroups.com
鷲田です。

最終的に以下のような方法で対応しました。お騒がせしました。
simpleReadium.jsの6562行にある関数resolveURIを次のように変更。
//ここから
   resolveURI : function (epubResourceURI) {
        // 書籍ビューに表示するためのiframeタグのsrc属性は全てのこの関数に依存している
        var epubResourceRelURI = new URI(epubResourceURI);
        var opfURI = this.packageDocumentURI;
        var opfPath = opfURI.toString();
        if(opfPath.lastIndexOf('filesystem:chrome-extension:', 0) === 0){
            // ブラウザのfilesystemファイルの場合
            var terms = opfPath.split("/");
            terms.pop(); // termsの最後の要素は、opfファイル名、これを削る
            var parentPath = terms.join("/");
            // 残りを親パスにして、opfのresourceパスをつなげる
            return parentPath+"/"+epubResourceURI.toString();
        }else{
            // その他、パッケージ梱包のファイルなどの場合
            var epubResourceAbsURI = epubResourceRelURI.absoluteTo(opfURI);
            return epubResourceAbsURI.toString();
        }
        // オリジナルは以下3行      
        // Make absolute to the package document path
        //var epubResourceRelURI = new URI(epubResourceURI);
        //var epubResourceAbsURI = epubResourceRelURI.absoluteTo(this.packageDocumentURI);
        //return epubResourceAbsURI.toString();
        // オリジナル終わり
    }
// ここまで

これで、梱包書籍ファイルも、ローカルの書籍ファイルも表示できました。


2013年8月14日水曜日 22時59分07秒 UTC+9 Toyoaki Washida:
鷲田と申します。質問させてください。

Yasushi Ando

unread,
Aug 15, 2013, 6:22:44 AM8/15/13
to chrome-api-d...@googlegroups.com
鷲田さん、はじめまして。
あんどうと申します。

面白そうなアプリを作成されてるんですね。
完成したらぜひぜひML上でも紹介してください。
質問の回答じゃなくてすいません。
それでは。

2013/8/15 Toyoaki Washida <toy...@gmail.com>:
> --
> --
> このメールは Google グループのグループ「Chrome API Developers JP」の登録者に送られています。
> このグループに投稿するには、chrome-api-d...@googlegroups.com にメールを送信してください。
> このグループから退会するには、chrome-api-develop...@googlegroups.com
> にメールを送信してください。
> 詳細については、http://groups.google.com/group/chrome-api-developers-jp?hl=ja
> からこのグループにアクセスしてください。
>
> ---
> このメールは Google グループのグループ「Chrome API Developers JP」の登録者に送られています。
> このグループから退会し、メールの受信を停止するには、chrome-api-develop...@googlegroups.com
> にメールを送信します。
> その他のオプションについては、https://groups.google.com/groups/opt_out にアクセスしてください。



--
ANDO Yasushi
- and...@gmail.com
- http://d.hatena.ne.jp/technohippy/
- http://twitter.com/technohippy

Toyoaki Washida

unread,
Aug 18, 2013, 6:33:53 PM8/18/13
to chrome-api-d...@googlegroups.com
あんどうさん、鷲田です。

完成すれば紹介させていただきます。

2013年8月15日木曜日 19時22分44秒 UTC+9 Yasushi Ando:
> このグループに投稿するには、chrome-api-develo...@googlegroups.com にメールを送信してください。
> このグループから退会するには、chrome-api-developers-jp+unsubscribe@googlegroups.com
> にメールを送信してください。
> 詳細については、http://groups.google.com/group/chrome-api-developers-jp?hl=ja
> からこのグループにアクセスしてください。
>
> ---
> このメールは Google グループのグループ「Chrome API Developers JP」の登録者に送られています。
> このグループから退会し、メールの受信を停止するには、chrome-api-developers-jp+unsub...@googlegroups.com
Reply all
Reply to author
Forward
0 new messages