2020年8月3日に4冊目となるKindleの電子書籍

【Mbed OSではじめるIoTデバイス開発　＃１入門編: 簡単プロトタイピングから本格開発まで】

を出版しました。

この本以前はMS Wordで執筆して、Kindleの変換機能を使ってKindleのファイル形式であるmobiに変換し出版という流れでしたが、これを変えてみたので紹介します。

変えた理由

MS Wordは、ページ分割や改行、文字の装飾等をそのままいじりながら書いていけるので、イメージそのままで最終的なデザインイメージで書いていけますが、どうしてもデザイン的にオリジナル感を出しにくかったり、ソースコードを掲載しにくかったりとやりにくい部分がありました。

今回の書籍は

文章の執筆はQiitaの記事と同じmarkdown形式、デザインはCSS、Pandocというドキュメントコンバータを使って、markdown + CSSからepub3、kindleの変換機能でmobiに変換という流れです。
「Kindleで技術書の電子書籍を公開するまで」と「Markdown + Pandoc でお手軽に電子書籍を書く」という記事を参考にさせてもらいました。

markdown

Qiitaの記事を書いている方でしたら説明するまでも無いと思いますが、テキストだけで見出しや文字の装飾、画像や表の挿入等が表現できる形式です。テキストエディタはVisual Studio Codeを使っています。markdownのプレビューも確認することができます。

CSS

CSSを1から全部書くのは大変だったため、GithubのCSSをベースに使わせてもらいました。
見出しのデザインやコードブロックのデザインをカスタムしています。

見出しのデザイン

たとえば見出し1と見出し2のデザインは次の様に変えています。

見出し1

  font-size: 28px;
  color: #FFFFFF;
  padding: 0.2em 0.5em;
  background: #002B49;
  font-weight: bold;

表示例

原文

# Mbedの概要

Kindle書籍上の表示

見出し2

  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 1px #96c2fe;
  padding: 0.2em 1em;
  color: #454545;
  padding-top: 20px;

表示例

原文

## Mbedとは

Kindle書籍上の表示（章番号が表示されるのはpandoc変換時の機能）

コードブロック

pre.numberSource {
  border-left: 1px solid #000000;
  margin-left: 3em;
  padding-left: 4px;
}

pre.numberSource code > span > a:first-child::before{
  text-decoration: none !important;
}

# cpp_code {
  background-color: #f8f8f8;
  border: 2px solid #000000;
  color: #000000;
  font-weight: bolder;
  font-size: 10px;
  line-height: 1;
  display:block;
  padding: 1px;
  overflow: hidden;
}

表示例

原文

```{#cpp_code .cpp .numberSource startFrom="1"}
/* mbed Microcontroller Library
 * Copyright (c) 2019 ARM Limited
 * SPDX-License-Identifier: Apache-2.0
 */

# include "mbed.h"
# include "platform/mbed_thread.h"


// Blinking rate in milliseconds
# define BLINKING_RATE_MS            500


int main()
{
    // Initialise the digital pin LED1 as an output
    DigitalOut led(LED1);

    while (true) {
        led = !led;
        thread_sleep_for(BLINKING_RATE_MS);
    }
}
```

Kindle書籍上の表示

この方法の利点

テキストで書かけるので空いた時間にスマホでもちょっとしたテキストエディタでも書き進められます。ちょっと独特のルールもありますが、CSSでいじれる幅がかなり広いため、デザインは自由にできます。

この方法の欠点

CSSはほぼ初めていじったので、悩みました。最終的なデザインに反映されるのにどこをどういじればいいかなかなかドキュメントが無いため、試行錯誤しました。実際、うまくいかずごまかした部分もあります。ある程度自動な方が楽だと思います。