プログラム書いたがあまり収益性がなさそうなので本でも書いて消化しようと思っている。ついでに、書いたコードが忘れないうちにどのあたりに躓いたかどうかもメモっておこうかと。githubでサンプルコードを配りながら、EPUB作成プログラムを作っていくというそういう本になる予定である。ブラウザで作るだけじゃなくて、node.jsでも作るという無茶なことをしている。DOMとテンプレートエンジンの解説をするのに、node.jsでEPUBを作るプログラムをつくってしまった。
ブログでもそうなんだが、EPUBを作成するプログラムについての話題はニッチなのか書くたびにアクセス数が減る気がする。
さて、このプログラムの問題点は、インターネットエクスプローラーをいかに攻略するかという問題である。インターネットエクスプローラーが癖が強すぎてどうやったら動くんだよ。どうせあと2,3年で消えるブラウザなのにやたらと利用者が多い。全く更新する気がないマイクロソフトがEDGEを配れよって思うんだけど、なんだかんだで残っている。いまのjavascriptの本なんか見てみると、たいていchromeブラウザを入れようというものが多い。 ニュースを見ているとEDGEがクローミアムになってwindows7にも対応させるとあったので問題が解消するかも。
FixedEpub3JSはブックウォーカーからなのかリンクが張られていて、そっからのアクセスが多いようである。広告張れば収益化されるんだろうが、EPUBを作ろうとする人は数的に多くない。なのでアクセス数による収益は見込めそうにない。
「HTML5+javascriptを使ってブラウザでEPUB３を作成する」で、以前の記事では、簡略的にかいていたのを個々個別に詳細に書いてみようと思う。 https://qiita.com/99nyorituryo/items/68f4d67bfda5d8aab25d
JSZIPで圧縮したファイルを生成するには。最低限次のようにjszipとFileSaverを読み込む。
<script type="text/javascript" src="js/jszip.min.js"></script> <script type="text/javascript" src="js/FileSaver.js"></script>
var zip = new JSZip();
zip.file("sample.txt", "sample");
zip.generateAsync({type:"blob"})
.then(function(content) {
saveAs(content, "example.zip");
});
とjavascriptを実行するとsample.txtの内容がsampleでzip圧縮したexample.zipのファイルが生成される。ここで面倒なので、onclickとして書いて、クリックしたら上記のzip生成スクリプトを実行するとする。
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript" src="js/jszip.min.js"></script> <script type="text/javascript" src="js/FileSaver.js"></script> <script type="text/javascript" src="js/myscript.js"></script> </head> <body> <button type="button" onclick="script()"> ファイルの生成 </button> </body> </html>
ここからさらに、テキストエリアから読み込んだテキストをsample.txt内に書き込んでzip圧縮することをやってみる。
index.htmlに次の内容を追加する
<textarea id="textarea" rows="4" cols="40">ここにZIP圧縮する内容を書き込む</textarea>
myscript.jsを書き換える。
var sample= document.getElementById("textarea").value
var zip = new JSZip();
zip.file("sample.txt", sample);
つぎに、画像ファイルを読み込み表示する。読み込んだ画像ファイルをzipファイル内に入れる。ｔ
画像ファイルの読み込みには、アドレスを指定して読み込み場合と、指定ディレクトリ内のファイルを読み込む方法がある。 今回はfileapiを用いてローカルファイルの読み込みを行う。
javascriptでのファイルの扱いでは、Base64で表される。 ファイル名とデータの関係、例えば画像ファイルとファイル名では別々に扱うので、
