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

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

javascript

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

ページネーション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…

gatsby-starter-blogを使ってブログを作ってみた

Gatsbyではブログも作れるので作ってみた。ただ、普通のブログのようなコメントが外部の機能を使わないといけない。静的サイトというのはあまり書き換えることがないことが前提。マニュアルをいっぱい読むのも飽きてきたので、作りながら考えることにした。 …

GatsbyによるJSONからの一括生成を調べた

作りたいのがJSONデータを主体としたサイトなので、データをどのようにバックグラウンドで読み込むかが問題となっている。マークダウンファイルからの生成はいくつか見つかった。 gatsby-transformer-jsonでjsonファイルを読み込んでみると、ファイル名が数…

Gatsbyでサイトマップ作成

GitHub PagesのトップをGatsbyで作ったものに差し替えた。starterを使ったので作った感じはしない。 kyukyunyorituryo.github.io ページを作成してdeployするだけで更新できるので自分で一から作るよりは良さそう。 99nyorituryo.hatenablog.com 前やったサ…

GatsbyをGitHub Pagesに出力する

hello-world GatsbyをGitHub Pagesに出力する。とりあえず、hello-worldをGitHub Pagesにpushしてdeployをするという説明通りにやってみよう。 まず、GitHubにhello-worldのRepositoriesを新しく作るという手順だったが、先にGatsbyでhello-worldのフォルダ…

Gatsbyでサイト作成

既存のサイトをGatsbyに置き換えている。Vue.jsでもよかったけど、なんとなくreactを使ったGatsbyを試している。Gatsbyで検索するとマンダムがトップに出てくるがそっちではない。 GatsbyとContentfulとnetlifyを使ったものの説明だったが、GitHub Pagesをも…

Gatsbyを体験してみた

サイト構築を手入力でやるのに限界感じて、最近の自動でやってくれるものを試してみる。使うのはGatsbyでreactベースの静的サイトジェネレーターというものらしい。今までは、node.jsでejsとbootstrapを使っていたがだんだん使用しているライブラリが更新さ…