KDP(電子出版)のメモ 急急如律令

Amazon Kindleダイレクト・パブリッシングでの電子出版や電子書籍の作成販売について、文章やイラストの作成や編集方法について書いています。

chatgptでJAVAコードをJSに移植するときに躓いたこと

 chatgptを使ったコードの移植を何度か試している。問題点は長いコードは分割しないといけないこと。Javaではクラスごとに書かれているので、コードの分割すると違う意味なることがある。意味が通るように分割すると今度は結合するのがめんどくさくなる。  jsでは関数型で書いていたので、Javaのオブジェクト指向的な書き方が移植するときにあまり見慣れない書き方になる。「引数だけ異なって名前は同じメソッド」がJSではだめなので条件分岐をする必要がある。chatgptが吐いたコードは別のメソッドを作っただけだった。

jsではJavaのライブラリが同じ名前じゃないので似た機能のライブラリを探す必要がある。たまに存在しないライブラリがあるように見せたコードを出力する。使っているライブラリを置き換える必要がある。

  • common compress、jszip
  • velocity、ejs
  • juniversalchardet、encoding.js

JSではjsonファイルを読み込むのは簡単だけどJavaではxmlが多い。tsvファイルが使われていたがjsではあまり使われないので読み込むライブラリが少なかった。

ファイル全体を読み込んで変換を頼むと、サイズが多いのか省略されたので動かない。 Javascriptだけで指定すると思っていたのと違ったので「Node.jsのCommonJSで書いて」と追加で指定した。今のJavascriptではESモジュールのtypescriptが良かったと思うが、実行するのにbabelを経由すると動作に時間がかかるので使っていない。

1以下のJavaコードをJavascriptで書き直して下さい。

public class Epub3Writer
{
    /** MIMETYPEパス */
    final static String MIMETYPE_PATH = "mimetype";

    /** ORBパス */
    final static String OPS_PATH = "item/";
    /** 画像格納パス */
    final static String IMAGES_PATH = "image/";
    /** CSS格納パス */
    final static String CSS_PATH = "style/";
    /** xhtml格納パス */
    final static String XHTML_PATH = "xhtml/";

    /** フォントファイル格納パス */
    final static String FONTS_PATH = "fonts/";
    /** 外字フォント格納パス */
    final static String GAIJI_PATH = "gaiji/";
    final static String[] TEMPLATE_FILE_NAMES_STANDARD = new String[]{
            "META-INF/container.xml",
            //OPS_PATH+CSS_PATH+"vertical_text.css",
//          OPS_PATH+CSS_PATH+"middle.css",
//          OPS_PATH+CSS_PATH+"image.css",
            OPS_PATH+CSS_PATH+"font.css",
            OPS_PATH+CSS_PATH+"aozora.css",
            OPS_PATH+CSS_PATH+"fixed-layout-jp.css",
            OPS_PATH+CSS_PATH+"book-style.css",
            OPS_PATH+CSS_PATH+"style-reset.css",
            OPS_PATH+CSS_PATH+"style-standard.css",
            OPS_PATH+CSS_PATH+"style-advance.css",
        };

    String[] getTemplateFiles()
    {
//      if (this.bookInfo != null && this.bookInfo.vertical) return TEMPLATE_FILE_NAMES_VERTICAL;
//      return TEMPLATE_FILE_NAMES_HORIZONTAL;
        return TEMPLATE_FILE_NAMES_STANDARD;
    }
}
class Epub3Writer {
    /** MIMETYPEパス */
    static MIMETYPE_PATH = "mimetype";

    /** ORBパス */
    static OPS_PATH = "item/";
    /** 画像格納パス */
    static IMAGES_PATH = "image/";
    /** CSS格納パス */
    static CSS_PATH = "style/";
    /** xhtml格納パス */
    static XHTML_PATH = "xhtml/";

    /** フォントファイル格納パス */
    static FONTS_PATH = "fonts/";
    /** 外字フォント格納パス */
    static GAIJI_PATH = "gaiji/";

    static TEMPLATE_FILE_NAMES_STANDARD = [
        "META-INF/container.xml",
        //Epub3Writer.OPS_PATH + Epub3Writer.CSS_PATH + "vertical_text.css",
        //Epub3Writer.OPS_PATH + Epub3Writer.CSS_PATH + "middle.css",
        //Epub3Writer.OPS_PATH + Epub3Writer.CSS_PATH + "image.css",
        Epub3Writer.OPS_PATH + Epub3Writer.CSS_PATH + "font.css",
        Epub3Writer.OPS_PATH + Epub3Writer.CSS_PATH + "aozora.css",
        Epub3Writer.OPS_PATH + Epub3Writer.CSS_PATH + "fixed-layout-jp.css",
        Epub3Writer.OPS_PATH + Epub3Writer.CSS_PATH + "book-style.css",
        Epub3Writer.OPS_PATH + Epub3Writer.CSS_PATH + "style-reset.css",
        Epub3Writer.OPS_PATH + Epub3Writer.CSS_PATH + "style-standard.css",
        Epub3Writer.OPS_PATH + Epub3Writer.CSS_PATH + "style-advance.css",
    ];

    getTemplateFiles() {
        // if (this.bookInfo && this.bookInfo.vertical) return TEMPLATE_FILE_NAMES_VERTICAL;
        // return TEMPLATE_FILE_NAMES_HORIZONTAL;
        return Epub3Writer.TEMPLATE_FILE_NAMES_STANDARD;
    }
}

shiftjis外文字をUTF-8に変換する処理、 String.fromCharCodeで失敗したので、String.fromCodePointに置き換え 文字コード変換エラー

function  codeToCharString(unicode) {
    try {
      if (unicode === 0) return null;
      if (unicode > 0xFFFF) {
        let b = new Uint8Array([0, (unicode >> 16), (unicode >> 8), (unicode)]);
        return new TextDecoder("utf-32").decode(b);
      }
      return String.fromCharCode(unicode);
    } catch (e) {
              console.log("error")
      return null;
    }
  }

  function  codeToCharString(unicode) {
    try {
      if (unicode === 0) return null;
      return String.fromCodePoint(unicode);
    } catch (e) {
      return null;
    }
  }

node.jsにvelocityのライブラリがないので、ejsに書き換えた。テンプレートだけじゃなくて呼び出す側も書き換える必要がある。

chatgptに「下記のvelocity templateをejsに書き換えて」と指示した。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:epub="http://www.idpf.org/2007/ops"
xml:lang="ja"
>
<head>
<meta charset="UTF-8"/>
<title>${title}</title>
<link rel="stylesheet" type="text/css" href="../style/fixed-layout-jp.css"/>
<meta name="viewport" content="width=${imageInfo.OutWidth}, height=${imageInfo.OutHeight}"/>
</head>
<body>
<div class="main">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 ${imageInfo.OutWidth} ${imageInfo.OutHeight}">
<image width="${imageInfo.OutWidth}" height="${imageInfo.OutHeight}" xlink:href="../image/${imageInfo.OutFileName}"/>
</svg>
</div>
</body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:epub="http://www.idpf.org/2007/ops"
  xml:lang="ja"
>
<head>
  <meta charset="UTF-8"/>
  <title><%= title %></title>
  <link rel="stylesheet" type="text/css" href="../style/fixed-layout-jp.css"/>
  <meta name="viewport" content="width=<%= imageInfo.OutWidth %>, height=<%= imageInfo.OutHeight %>"/>
</head>
<body>
  <div class="main">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="100%" height="100%" viewBox="0 0 <%= imageInfo.OutWidth %> <%= imageInfo.OutHeight %>">
      <image width="<%= imageInfo.OutWidth %>" height="<%= imageInfo.OutHeight %>" xlink:href="../image/<%= imageInfo.OutFileName %>"/>
    </svg>
  </div>
</body>
</html>

https://www.kabipan.com/computer/mobi/aozora_kanji.html

www.aozora.gr.jp

numb86-tech.hatenablog.com

www.javadrive.jp