アレアレ

お役立ち情報、お悩み解決情報を発信!

電子書籍

テキストエディタで書いている電子書籍をリアルタイムにブラウザでプレビューする方法

テキストエディタで書いている電子書籍をリアルタイムにブラウザでプレビューする方法

今回は、リフロー型の電子書籍を執筆している人に向けてのお役立ち情報をご紹介します。

テキストエディタはそのプレビューを確かめるのが面倒くさい

リフロー型の電子書籍を執筆するにあたり、何らかのテキストエディタを利用していますよね。で、その時に次のような不満を感じていませんか?

「テキストエディタは文章を書くのには便利だけど、いちいちプレビューを確かめるのが面倒くさい」

例えば、電子書籍を書くにあたり、でんでんコンバーター向けのマークダウンで書いている人も多いですよね。ご存じない方ために補足をしておくと、マークダウンとは、「## 見出し ##」のような装飾で構造的な文章を記述する方法です。

で、テキストエディタでマークダウンを利用して書くと、文章がサクサクかけて快適なんですね。これが例えば、MicrosoftのWordを利用していた場合、いちいちマウスをクリックして、タイトルを「見出し1」に設定するような操作が必要になり面倒なわけです。

そして、テキストエディタを利用しマークダウンで書くと、キーボードから一切手を離さずにそのような記述ができ便利なんですね。

その一方で。テキストエディタで、電子書籍を書くことにはデメリットもあるんですね。そのデメリットですが、自分が今マークダウンで書いている内容が、実際に電子書籍リーダーで見ると、どのように見えるのか、つまりプレビューがわかりにくいことです。

例えば「## 見出し ##」とマークダウンで書いたものは、電子書籍リーダー見ると実際には、見出しになっているわけです。ですが、テキストエディタ上は、あくまで「## 見出し ##」という文字でしかないので、わかりにくいんですね。

で、その面倒くささを解消する方法の1つとして、次の記事でその方法をご紹介しています。

でんでんコンバーターでepub化、Kindle Previewerで確認、の流れを簡単にする方法

この記事では、でんでんコンバーター向けに書いたテキストを、コマンド一発でepubに変換し、そのepubをプレビューできるようにKindle Previewerを立ち上げるまでの流れを楽にする方法をご紹介しています。

この方法は、これはこれで便利です。いちいちブラウザを立ち上げて、でんでんコンバーターのサイトにアクセスし、電子書籍化したいファイルを選ぶような手間がなくなるからです。

もっと手軽にプレビューする方法がある

ですが、この方法ですら、正直面倒に感じるんですね。

なぜかというと、その変換コマンド実行するために、テキストエディタから作業を移す必要があるからです。しかもその後、起動したKindle Previewerで、epubファイルを選ぶ、というマウス操作が必要になります。この操作が面倒なわけです。

前置きが長くなりましたが、そこで「もっと楽にマークダウンで書いているテキストをプレビューする方法があるよ」ということなんですね。

その方法ですが、次の動画を見ていただくのが、一番わかりやすいです。

この動画では、テキストエディタでマークダウン形式の文章を書きながら、その文章が同時にブラウザでプレビューされる様子が確認できます。マークダウンで書いている内容がブラウザに反映されるタイミングは、テキストエディタで文章を保存した時です。

マークダウンでテキスト保存 → バックグラウンドでHTMLに変換 → それを検知してブラウザ側が自動更新

とこのような仕掛けになっているわけです。つまり、テキストエディタから一切離れることなく、プレビューが更新されていくんですね。結果として、本当にサクサクと文章を書いていくことができます。

その実現方法

では、この動画で実現している方法についてご紹介します。ここからは、ITに詳しい方でないとわからない内容となります。詳しくなくても、ご紹介している方法を利用したい人は、この記事をITに詳しい人に見せて、その実現方法を教わってください。

それでは、その方法について解説します。まず、概要からご紹介しますと。まず、この方法では、node.jsを利用しています。

また、マークダウンをHTMLに変換する処理として、gulpのタスクを利用しています。で、その変換処理は、gulp-markdownを利用しているため、残念ながらでんでんコンバーター独自の書式には対応していません。

プレビューは、node.jsでexpressでウェブサーバとし、テンプレートエンジンとしてejsを利用して実現しています。そのローカルのウェブサーバにブラウザでアクセスして、プレビューを見ているわけですね。

gulpでディレクトリ内のファイルを監視し、変更があったらマークダウンをHTMLに変換後にブラウザを更新するようにしています。そのため、テキストエディタで文章を保存するとプレビューを見ているブラウザが自動更新されます。

ご参考として、次のリンクから、この動画で利用しているソースの圧縮ファイルをそのままダウンロードできます。

ソースをダウンロードする
※nodeのモジュールは削除しているので、「npm install」をしてください。それができたら、「gulp」とターミナルに打てば、動作します。

ただ、このソース内には、でんでんコンバーターのサイトで配布しているCSSファイルを含めていません。なので、CSSファイルは、でんでんコンバーターのサイトからダウンロードして使ってください。

このプレビュー環境の良さ

さて。今回ご紹介しているnode.jsを利用したプレビュー環境の良さですが、2つあります。

まず1つ目の良さは、この方法では、どんなテキストエディタを利用していても、このリアルタイムでのプレビュー確認ができることです。極端には、OS標準のメモアプリを利用していても問題なく、便利にプレビューを確認できます。

私は、電子書籍を書くにあたり、今現在はAtomというテキストエディタを利用しています。が、これまで利用してきたテキストエディタは、秀丸エディタ、Sakura Editor、Sublime Text3と、変遷してきた経緯があります。つまり、今後Atomから違うテキストエディタを使いたいたくなることは、十分に考えられます。

なので、今回ご紹介したプレビューの確認環境が、特定のテキストエディタに依存してない点が、メリットとなるんですね。今後、テキストエディタを変えたとしても、プレビュー環境を変えずに済むからです。

2つ目の良さですが、このプレビューの確認方法では、プレビュー側を読み込み直したときに、表示している途中のところがちゃんと再表示される点にあります。

この良さは、上でご紹介した動画では表現できていないのですが、こうなるのと、ならないのでは、プレビューの確認の便利さが大きく違うんですね。

例えば、電子書籍を書き進めて、第5章くらいを書いているとしましょう。そのときに、Kindle Previewerを使ってプレビューを確認しようとすると、表紙から読み込み直しになるんですね。

またAtomのテキストエディタには、実は、マークダウンをプレビューする機能があります。ですので、マークダウンをプレビューするだけなら今回のような仕掛けがなくても、Atomを使っていればその目的は達成できます。ですが、Atomのマークダウンプレビュー機能も、編集しているファイルの先頭からの読み直しになってしまうんですね。

つまり、Kindle Previewerを使う場合でも、Atomのマークダウンプレビューを使う場合でも、今自分が書いている箇所まで、プレビューをスクロールし直す手間があるわけです。

一方、今回の方法はでは、その手間がありません。第5章を書いていて、一度その位置までブラウザのプレビューを表示させておけば、読み込み直したときには、その第5章に新しい文章が追記された形で再表示されます。

つまり、今回の方法では、プレビューを第5章の書いているところまで、スクロールさせずに済み便利なんですね。

この2つの良さがあるので、今回のプレビューの確認方法は本当に便利なんですね。

Return Top