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

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

javascript

新刊紹介サイトのGatsbyJSへ移行

新刊を探すのにどういうのがいいのか。次の要素で絞り込むことを考えた。 先月、今月、来月以降 マンガ、小説、ライトノベル、その他 出版社ごとKADOKAWA、講談社、秋田書店、白泉社、集英社、徳間書店、小学館 検索 タイトル カテゴリー 出版社 日付 kyukyu…

GatsbyJSで書いていないクエリのエラーが出る

Cannot query field "ReleaseDate" on type "Json". クエリに書いてないのにjsonにないと出てくる。謎だけど www.gatsbyjs.com exports.createSchemaCustomization = ({ actions }) => { const { createTypes } = actions const typeDefs = ` type Json impl…

Reactでリアルタイムの検索機能と複数条件での絞込

下の記事を参考にカテゴリーごとに絞り込むreactコンポーネントを作成してみた。 変更したのはカテゴリーの内容が複数条件の場合に書き換えた。 qiita.com import React, { useState } from 'react'; import Paginate from "../components/paginate" const S…

React-Paginateを入れて表示を分割した。

今やろうとしているのがpaginationで画面の表示数を分割したい。そうしないとページが重たいのでページの読み込みが長くなり評価が落ちる。使いたいのがReact-Paginateなのだが、useEffect, useStateの使い方がよくわからなかった。表示するだけなんで現在の…

HTMLのパーサーをChatGPTに書かせてみた

JavaよりJSのほうが慣れているので、JSで書いてからJavaに置き換えることが多く、二回書く必要が生じている。そこでJSからJavaをChatGPTにやってもらおうと思った。実際にやってみた問題点など。 ChatGPTに「下記のコードをJavaに書き換えて」で出力されたが…

青空文庫エディターとAozoraEpub3でkindle出版の使い勝手をテスト

実際に作ったツールを使って電子出版をしてみて問題点を抽出する。改造版AozoraEpub3ではepubによる電子出版を前提にソフトウェア作っているのでkindle出版に使える。ただ、エディターがなかったので初心者にとっつきにくかった。そこで青空文庫エディターで…

ノベルアップ+のページネーションについて調べていた

ページネーション2ページ目の書き方がなろうと同じなのでページ単位で共通化することはできそう。「?p=2」。ただ、次ページへがないのでリンク先を同じボタンを押すことで次のページに遷移することができない。 ul li要素で最終ページにクラス名がないので…

青空文庫エディタの使い方

青空文庫エディタ Meryのマクロ機能を利用して青空文庫エディターというのがある、私も使っていたが、初心者向けではないのでもう少し直感的に操作するものができないかと思っていた。ウェブ用のHTMLエディタを使って、HTMLから青空文庫に変換する機能をつけ…

カクヨム目次取得の修正

以前のカクヨムの目次取得で、あとから追加した話が最後尾になってしまうという不具合があったので修正した。原因はepisodeの内容をアドレスの番号で整列していたためだった。カクヨム各話の順番はjsonに配列で書かれているのを見落としていた。 99nyoritury…

傍点と傍線をパース

HTML青空文庫変換で傍点と傍線をパースしたが、ブラウザで縦書きにすると、下線と傍線で表示が異なる。 text-decoration: underline; 縦書きだと右側に線 text-decoration: overline; 縦書きだと左側に線 EPUBだと表示が逆 tategaki.github.io turndownの傍…

カクヨム目次変更への対応

カクヨムのサイトがリニューアルして目次がだいぶ変わったので対応。目次部分を見ていくと、HTMLを見てもすべての話へのリンクがなく一部になっている。その代わりにJSONにサイトのデータが書かれている。 github.com 対応前の状態 トップページをキャッシュ…

TinyMCEからEPUB出力できないかを考える

ちまちまと縦書き用のエディターを作っていたがいっそのことEPUB出力したらいいんじゃないかとひらめいたので実際できるのかを考えてみる。固定レイアウトのEPUB出力するサイトは作ったのでほぼ同じように作ればいいのでは。ざっくりいうとXHTMLをZIP圧縮す…

縦中横のパース

HTMLでの縦中横の書き方がいろいろある。そもそも縦書きの書き方があまり固まっていないのだろうが。電書協の書き方を変換する。html2aozoraでspanとdiv以外の変換をできたが、今度はspanの変換したい。リストから一括変換ができれば追加が楽。 github.com …

TinyMCEにふりがなボタンの追加

どうせやるならプラグインにしてフォルダーを追加すれば入力できるようにしたい。プラグインの追加の方法を読んで改造してみた。ルビボタンを押すとウィンドウを開いて「ふりがなを入れる文字」と「ふりがな」を入力するとふりがなが追加される。 www.tiny.c…

TinyMCEに縦中横ボタンの追加

TinyMCEを縦書きにしたので、半角文字を縦中横にするボタンを追加する。何もしないと半角は横倒しになる。 formats:{ tcy: {inline: 'span', 'classes': 'tcy'} }, setup: (editor) => { editor.ui.registry.addToggleButton('tcy', { text: '縦中横', onAct…

TinyMCEを縦書きエディタにカスタマイズ

縦書きエディタで検索すると色々出てくるけどWYSIWYGは少なめだった。入力欄が横で右に縦書きで表示するタイプのものがある。ワードみたいにボタン一つで編集できればなと思っていろいろ試した。ウェブでやろうとしてTinyMCEに縦書きCSSを当てたらそれらしく…

TinyMCEに入力した内容を青空文庫注記として取り出そうとしてあれやこれやした記録

TinyMCEの初期設定など 99nyorituryo.hatenablog.com 必要な機能の絞り込み 「見出し、ルビ、縦中横、太字、傍点、傍線、斜体、下線、打ち消し、下付き、上付き」などがあればいいかな showryu.web.fc2.com 縦書きは可能か tinymce\skins\content\default の…

TinyMCEを動かしてみる

青空文庫エディタ 青空文庫エディタをMeryの入力補助があるが、エディターに不慣れな人にとってはワードのように使えたほうがいいのだろう。そこで、ワードのように見たまま入力する方法はないかと考えた。ただ、見たまま入力できるWYSIWYGはふりがなに対応…

HTMLエディタで使われるhtmlタグを青空文庫形式に変換

HTMLエディタで使われるhtmlタグを青空文庫形式に変換。CKeditorやtinyMCEなどのHTMLを青空文庫形式に変換できるかも。電書協EPUBではhtmlタグでの違いで意味を取るより、spanとdivにクラスをつけてCSSの内容によって切り替えている。そのためclassの名前を…

Turndownを書き換えてhtmlパーサを作る

Turndownを書き換えて好きなhtmlパーサを作ろう Turndownのsrcフォルダのcommonmark-rules.jsを書き換える。まずheading styleから青空文庫だと見出し。青空文庫だと見出しだけではなく字下げとセットだから字下げも行う。heading styleはh1をトップに指定し…

turndownを改造してHTMLを青空文庫形式に変換するツールを作れないか試してみた。

turndownを改造してHTMLを青空文庫形式に変換するツールを作れないか試している。HTMLからマークダウンへの変換するツールはいくつかある、それならば、少し手を加えるだけで青空文庫形式に変換できるのでは。 turndown github.com turndownのコードを見ると…

epub parserを調べてみた

作ったEPUBのソースがないときに、EPUBから原稿に戻すepub parserがあればいいのではと思ったので調べてみた。 javaで調べてみるとアンドロイド向けのが見つかり、jsを調べるとepub2向けのが見つかってepub3向けのがないなという感想を覚えた。調べたらある…

Gatsbyブログにタグをつける

Gatsbyブログにタグをつけてカテゴリーごとに記事の一覧ができればなと思ったのでつけてみた。 参考にした記事がmarkdownでわたしはすでにmdxにしてしまっているのでその差を注意しながら変更していきたい。 マークダウンのfrontmatterは次のように設定して…

Gatsbyで最強SEOにしてみた

検索で上位に行くには サイトの内容よりもサイトの作り方によって検索順位がかわるのではないかと思ったので、検索順位が一番上に来やすいといわれているGatsbyでサイトを作ってみた。 はてなと比較 はてなブログと比べて同じ内容の記事で検索順位がどれくら…

gatsby starter blogをMDからではなくJSONから記事を生成する

gatsby starter blogはcontent、blogにあるマークダウンファイルから記事が作られている。それをJSONに置き換えて記事ができるかと試してみた。 JSONにタイトルや日付、説明などの情報を書き込んでからgatsbyに渡してブログ形式でサイトを生成させよう。gats…

GatsbyによるJSONからのページの一括生成の成功、ただしエラーが残る

以前に「GatsbyによるJSONからの一括生成を調べた」がGatsbyに慣れてなかったので、一通り習熟してから再チャレンジしている。 99nyorituryo.hatenablog.com reffect.co.jp gatsby starter blogではフォルダ名がslugになっているが、そこをファイル名にでき…

GatsbyブログにOGPイメージの追加

mardownのfrontmatter mardownのfrontmatterから画像URLを取得して各ページのogp:imageとしたいのだけど、適当に設定すると動かないので検証がしにくい。 とりあえず、すべてのページに対しておなじogp:imageには設定できた。staticフォルダーに画像を入れて…

gatsbyにリンクカードを埋め込む

はてなのiframeを使う方法 はてなのiframeははてなブログ以外からでも使えるが使っていいのだろうか。 ganbaranai.tech mdのfrontmatterのdateのために出力し JavaScript や Nodejs でシンプルに時刻の yyyy-mm-dd hh:mm:ss フォーマット文字列を作成 dev.ma…

Remark Transformer Plugin、独自コンポーネントを作る

Remark Transformer Pluginを作ってみる 日本語ではあまり書かれているのがないが、英語でも翻訳にかけたらわかりやすかったのでそのままやってみる。 www.gatsbyjs.com マークダウンのAST木についての理解 マークダウン→AST→HTMLという風に変換するのを途中…

gatsbyにプラグインを色々入れて調整

gatsby-plugin-twitterを入れてtwitterを表示 これの操作はツイッターのページを開いてから右上の「埋め込みポスト」からコードをコピーして貼り付ける必要がある。script部分はいらないようだ。 www.gatsbyjs.com Install npm install gatsby-plugin-twitte…