filesystem API で作成し展開したたepubファイル群を readium.jsで表示させる
288 views
Skip to first unread message
Toyoaki Washida
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"です。
私の問題の捉え方が間違っているのかもしれません。
何か、この問題への対応方法をご存知の方がいらっしゃれば、お教えいただきたく、
お願いいたします。
表題にあるように、電子書籍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
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:
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
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();
}
// オリジナルは以下３行
// Make absolute to the package document path
//var epubResourceRelURI = new URI(epubResourceURI);
//var epubResourceAbsURI = epubResourceRelURI.absoluteTo(this.packageDocumentURI);
//return epubResourceAbsURI.toString();
// オリジナル終わり
}
// ここまで
これで、梱包書籍ファイルも、ローカルの書籍ファイルも表示できました。
最終的に以下のような方法で対応しました。お騒がせしました。
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();
}
// オリジナルは以下３行
// 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
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
あんどうと申します。
面白そうなアプリを作成されてるんですね。
完成したらぜひぜひ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
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:
完成すれば紹介させていただきます。
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