ふんわりした生活

本を読んだり仕事でやってみたことなどの日常から、ふんわりと気づきなどを書いていきます

自分用の執筆環境を整える長い旅に出てしまった

f:id:m0t0k1m0t0k1:20170222140930j:plain

とうとう、時間を見つけてつくりはじめてしまった。自分だけの、快適な執筆環境のことだ。

いままで、いろんなマークダウンエディタ、テキストエディタを試してきた。ところが、どれもしっくりこなかった。理由というか原因がはっきりしたのでそれを踏まえてつくりはじめた。

古今東西、素晴らしいテキストエディタがある。いつもお世話になっているものもたくさんある。たとえば、TeraPadにはじまって、VimAtomSublime Text3、そしてVisual Studio Code。マークダウンエディタなら、MarkdownEdit、Typora、オンラインのStackEdit.ioとかwri.pe、そしてGitbook。どれもそれぞれ素晴らしいエディタで、どれも愛用している。

だけど、あるとき気が付いた。わたしが本当に必要としているのはそうした優れた環境ではない、ということに。気に入らないことがあるか?いや、ない。そう、必要としていない理由はそこだ。だからわたしは自分用の環境をつくることにしてしまったのだ。

優れた環境から必要なかったもの

わたしが長い時間をかけて文章を書くとしたら、電子書籍をつくるときだ。このときはマークダウンを延々と書いていく。あるいは、ブログの記事を書く。こうしたときに必要なものはそれほど多くないことに気が付いた。

優れたエディタの、素晴らしいけどわたしがそうした作業のときに不要なものをあげていきたい。

  1. マークダウンの構文ハイライト
  2. コード部分のプログラミング言語ごとのハイライト
  3. 行番号
  4. コード補完機能
  5. PDFやePubファイルへのエクスポート機能
  6. カーソルのある行のハイライト
  7. 優れた一括置換機能
  8. 矩形選択機能
  9. ファイル検索機能
  10. プロジェクト機能
  11. マークダウンのプレビュー機能

これらは大規模なプロジェクトではどれも必要になってくるものだ。ないと話にならない。だが、わたしが執筆をするにあたってはほとんど不要な機能だ。まずは…マークダウンの構文ハイライト機能。これはマークダウンとして妥当なものを書いているかというチェックには役立つ。しかし、それ以上のものではない。

次に、コード部分のプログラミング言語ごとのハイライト機能。これも当初はすげー便利ー、と思っていた。特にTyporaなどはプログラミング言語を後から指定しなおしてほかの文章部分へ影響が出ないようなブロックを生成してくれる。しかし、ずっと書いていると逆にうっとおしく感じるようになっていた。なぜか。動作するコード片を書籍に埋めたいのであれば、必ず動作確認をしているからだ。そうなると、実際に動作したコード片をペーストしてくることになる。そうなれば、コードはプログラミング用のエディタを利用するため、ハイライトもコード補完も必要ない。

3つ目は行番号。最初はこれ、必要かなーと思ったのだけど、何行書いたのかはまったくもって大事ではなかった。文章なのでプログラムやスクリプトではなかった。書き換えていくと何行目なのかはまったくわからなくなるが、推敲のときにはプログラミング用のエディタを利用してこまごまと修正していくので書くときには必要なかった。

4つ目はマークダウンのコード補完機能。できることはわかった。でも、いらない。必要なものは最低限だけでよくて、見出しはたいてい3以降のものしか使わない。リストはハイフンかアスタリスクで記述する、リンクは角かっこと丸かっこの組み合わせ、画像もこれの先頭に「!」がつくだけ。このくらい知っておけばたいていの文章は書くことができる。脚注?必要ならつけるといいし、動作しない環境も多いのでほっておけばいい。

5つ目はエクスポート機能。最終的に文章はファイルにしてからカバー画像やスタイルシートをあててePubやPDFにするので、手軽で便利だと思うがわたしにはいらない。こういう手軽なものが必要なときって、マニュアルやドキュメントを書くときなので電子書籍用ではないよね。

6つ目はカーソル行のハイライト機能。プログラムやスクリプトを記述するときにはものすごく便利な機能なのだが、単なる文章を書いていくときには必要ない。カーソルは見えているのでそれで十分だ。何行目なのかも関係ないしね。

7つ目は一括置換機能。これは書いていく時ではなくて推敲するときに必要になる。気分的にガンガン書いていきたいときには必要ない。

8つ目は矩形選択機能。固定長テキストファイルを修正するときにはものすごく便利な機能なんだけど、記事や書籍の文章が固定長なわけはない。

9つ目はファイル検索機能。どのファイルにどんなテキストがあるか?うん、知ったことではない。

10個目はプロジェクト機能。これもプログラミング用のエディタにあるので書くときには必要ない。いままでの経験上、だいたいの構成を決めてもあとから構成をしなおすこともあるので、最初からファイルを管理してなくてもいい。

最後、11個目はマークダウンのプレビュー機能。だいたいどのエディタでもこの機能があってプレビューできるんだが、最初にイラっとしたのはマークダウンエディタで書いたあとに貼り付けた先でhtmlにうまく変換できていない場合。たとえばバッククォート3つで囲んだコード部分はtumblrではコードとしては扱わない。tumblrはスペース4つ以上が行の先頭にある箇所をコードと認識する。ほかには、段落から改行してすぐハイフン記号などで箇条書きをはじめたとして、あるエディタではそれを箇条書きとしてプレビュー表示できる。しかし、はてなブログではきちんと段落のあとに改行だけの行がはさまらないと箇条書きとして編集してくれない。こういうことがあるなら、むしろ紛らわしいのでプレビュー機能はいらない、ということだ。これだけじゃなくてPandocでマークダウンから変換したときのePubなんかでもこういうことはよくある。どのサービスやアプリで書き出すかによってマークダウンの記法を微妙に変える必要がある。Githubとかでもそうでしょ?

どんなエディタにしたのか

以前から、理想のエディタではなく現実的なエディタとして考えていたのはブラウザだけで動作するものだった。というのも、アプリだとそこらじゅうにインストールしてまわることになるので面倒だし、AmazonKindle Fireだとアプリ自体がほとんど流通していないのでブラウザで動いてもらわないことには困ってしまうのだ。

スマホだとどうせフリック入力になるので、正直なところなんでもいい。iPhoneだったら下手をすると音声入力のほうが速いということも考えられるぞ。

ということで、本当に最低限のミニマムなエディタをつくっていっている。まだまだつくりはじめたばかりだし、今どきのつくり方ではない。だけど、用を足せるならなんでもよい。

機能

  1. 単語数と文字数が表示される
  2. 何もしてくれないエディタ
  3. 5秒おきにローカルストレージへ保存
  4. 10分おきに鐘の音を再生する

たったこれだけ。いまのところこれで十分に快適な執筆を行うことができている。とてもいい。

まず1つ目の単語数と文字数だが、これはエディタ用のtextareaの値を単語数では半角スペースと改行文字で区切ったときの数にしてある。英語の文章を書くことはあまり考えにくいけど、最低限ということで。文字数はtextareaの値のlengthプロパティそのまま。せいぜいtrimしてあるくらい。

次に2つ目。本当になにもしてくれないエディタ。キーアップのイベントを拾って単語数と文字数を表示させるのみ。

3つ目はよくあることなので。文章を書いている途中で割り込みが入ったときにファイルに保存してなくて…ということが頻繁にある。これはwri.peがかなり頻繁にlocalStorageへ保存してくれていたことを思い出して入れてみた。再度開いたときにlocalStorageに指定のキーがあればそれをエディタへ表示してくれるようにしてある。

4つ目は完全に謎の仕様だけど、わたしには必要。熱中して書いていると、時間を忘れてしまう。そこで、10分おきに鐘の音を鳴らすようにしてある。鐘の音はFL Studioにデモ版として付属してくるSytrusというFMシンセサイザーにプリセットされている鐘の音を鳴らしたものをmp3にエクスポートして利用している。やはり金属音っぽいものはFMシンセサイザーに限る。もちろんWebAudio APIなのでFMシンセを実装して鐘の音を鳴らしてみてもよかったのだけど、以前つくってみたときには思ったよりきれいな音にならなかったので普通にシンセの音にしたほうがいいな、と考えていた。いまのところこのタイマーを一時停止する機能はつけていないので、10分おきに鳴り続ける。もう少し使い方に慣れてきたらタイマーの間隔を指定できるようにしたいと思っている。

今後実装したい機能

もうほんの少しだけ機能追加したいな、と思うものはある。きっと近いうちに追加していくと思う。

  • 鐘の音のタイマー時間を設定できるようにする
  • Ctrl+Sでタイマーを待たずにローカルストレージへ保存できるようにする
  • 文章を読むために要する目安時間を表示できるようにする
  • フルスクリーンモードにできるようにする
  • テーマを切り替えできるようにする
  • スマホ向けブラウザでの見栄えを改善する

今後は公開サーバーでホストするようにもしたい。わざわざローカルのウェブサーバーを起動するのが面倒なので。そうなるとほかにもいろいろすることが増えそうだな…

現時点の開発環境

項目 環境
OS Windows10
サーバー PHP7.0 ビルトインサーバー
ブラウザ Chrome, Edge
IDE Visual Studio Code
記事の執筆 開発中のエディタ

cloud9とかつかったほうが便利なような気がしなくはないけど、静的ファイルのホスティングにわざわざウェブサーバーの環境とか必要ないだろうと思うのはわたしだけだろうか。

また進捗があったらここへ投稿していきたい。

PowerShellはどうした

PowerShellPHPビルトインサーバーを起動するために利用しているよ! 以上だ。

Image-Line FL STUDIO 12 SIGNATURE BUNDLE【国内正規品】

Image-Line FL STUDIO 12 SIGNATURE BUNDLE【国内正規品】

はじめてのVisual Studio Code (I・O BOOKS)

はじめてのVisual Studio Code (I・O BOOKS)