「執筆専用ブラウザ」をパワーアップ〜タグでシンタックスハイライト〜

以前、「執筆専用ブラウザ、という考え方」ということで、FireFoxをWorkFlowyで文章を書くためだけに使う、というエントリを書きました。
そこでは、書き出して、うんじゃかんじゃするまではWorkFlowy、つまりアウトライナーでこなし、仕上げはほかのエディタを使う、みたいに、書く段階を分けている、ってことを紹介しました。

・はじめのだぁーっと書き出すのはまっさらなエディタにて。
・そのあとは、アウトライナーへ投げて、うんじゃかんじゃする。
・最終的に記事に仕上げる際には、マークダウンをプレビューしてくれるエディタへ。
執筆専用ブラウザ、という考え方 – iPhoneと本と数学となんやかんやと

3つの段階のうち、はじめ二つをWorkFlowyに担ってもらい、最終の段階は別のエディタで書いていきます。
なぜ別のエディタを使うのか?
マークダウン記法で書いていく際に、「シンタックスハイライト」なる機能があったほうが、文章の見出しや引用、リストとなる部分が色で表現され、視覚的に見やすく、書きやすいから。
シンタックスハイライトとは、こんなんです。

マークダウン記法を用いて書いた見出しやらリストやらを色分けしてくれる機能です。
また、マークダウン記法で書いた文章を、最終的にはHTMLに変換しなくちゃいけなくて、その作業も簡単であるから。
加えて、いくつかのデバイス間でテキストを共有し、書く環境も統一したい、という願いもあったから。

3つのデバイスでテキストのやり取りしたい

メインのPCは、家のiMacです。持ち運び用として、eeeBook。スマホはiPhoneを使ってます。

ぼくの要望は、以下のようなもの。

  • 3つのデバイス間で、テキストのやりとりをスムーズに行いたい。
    • どのデバイスでも、何かしら「書く」ことをするので。
  • iMacに対し、eeebookはWindowsPCです。その両者で、異なるOS間で、書く環境を統一したい。つまり、エディタを同じやつ使いたい。
    • 環境が違えば、そのぶんいろんなことを覚えないといけなくなっちゃうのは嫌ですもんね。
  • エディタは、マークダウン記法を使うので、見出しや箇条書きなどをシンタックスハイライトしてほしい。
    • 色分けされてるほうが、最後の仕上げやりやすい。

これらを満たすようなツール、サービスをしばらくの間さがし歩いてみました。
MacとWinという違う環境下でも、同じようテキストを扱うために、両方で使えるエディタをいくつか試し、「SublimeText」を使っていました。
そして、テキストは「Simplenote」というサービスを利用して、3つのデバイス間でやりとりをしていました。

もちろん、ある程度の不便さを抱えることになります。
普段ぼくはEvernoteとWorkFlowyを使っていて、そこにテキストをやりとりするために、新たにSimplenoteを使うようになりました。
EvernoteかWorkFlowyで完結できれば、わざわざSimplenoteを使わず、これまでどおり2つだけでやりくりできるのに。
また、WorkFlowyからエディタへと書きかけの文章をコピペし、書き進め、仕上げなくちゃいけないわけですが、コピペにちょっと手間がかかります。
改行とかがうまく反映されず、わざわざもう一度改行しなおさなくちゃいけないんです。
エディタからWorkFlowyへとテキストを移すときにも同じで、少々手間がかかります。

WorkFlowyの文章を出し入れするのは、めんどうくさいんです。
であるがゆえに、別のエディタでSimplenoteを利用して文章を管理していたわけです。
環境を統一したい、という願望から、MacでもWinでも使えるSublimeTextを使っていた。
けれどもね、ここではたと考えます。
WorkFlowyは、どのデバイスからも扱えるじゃん、と。Macでも、Winでも、iPhoneでも。その気になれば、どこででも同じ環境で「書く」作業ができる。
そうすればWorkFlowyから文章を出し入れすることもなくなる。
明らかに、WorkFlowy上ですべてを完結させるのが一番いい。

残す課題は、一つ。

もしWorkFlowyにシンタックスハイライトがついたら、、、

そうですそうです、シンタックスハイライトの機能です。
それがあればすべてをWorkFlowyで完結することができる。ほんとにきれいにすべてがつながる。
Workflowyだと、そこにある文章の「見かけ」を、Stylishで変えることができます。
書き出すときは「・」を消し、エディタっぽく。
「・」が消えたとはいえ、アウトライナーであることには変わりないので、インデント・アウトデントをして、文章を組み立てることができる。
トピックを入れ替えたり階層化したりしながら、形にしていくことができる。
他の人が読んで理解できるように、読みやすいように仕上げるときには、マークダウン記法を利用して。シンタックスハイライトにて、構成を見えやすくしながら。
書きあがった後はiPhoneのHandyFlowyで、スタイルをブログっぽくして完成した文章を読み返し、修正する(文章の推敲にiPhoneを用いて、自分の中の「推敲モード」のスイッチを入れる)。
同じWorkFlowy上で作業が完結するので、どのデバイスにもStylishをインストールして同じスタイルを適用できるようにしておけば、まったく同じ環境が出来上がる。
どこから手を加えても、すべてもれなく変更が同期される。勝手に。ほとんど同期を意識することなく。
一連の流れのすべてが、WorkFlowyという場でつながる。
こんな快適さは、ほかにはない、と思います。

となるとやることは一つ。WorkFlowyでシンタックスハイライトを実現すること。
で、がんばりました。そして、なんとかそれっぽいものを実装できました。
本来のシンタックスハイライトは実装できませんでしたが、「タグ」をつけることで文章を色分けすることができるようになりました。
見出しとリストと引用の部分にタグをつけると、タグのついたトピックの文字の色や大きさを変える、ちょっとした装飾をほどこすことができるようになりました。
ただ、リンク、太字、下線はハイライトされません。当然で、タグをつかっている関係上、トピックの中の一部分だけを装飾、ってことができないためです。
普段太字や下線は使っていないので、まぁえぇか、ということになりました。

できたのが、こんなかんじ。

次回は、この実装について書きたいと思います。

おわりに

おそらくは、本などを書こうとおもうとWorkFlowyのみで完結することは難しいとは思うのですが、そんなに長くない文章であれば、なんの問題もなく、どこからでも、快適に「書く」ことができるようになったな、と思います。
最近文章を書くのが楽しくなってるのですが、この執筆用にカスタマイズしたWorkFlowyのおかげであるかもしれません。

今後の課題は、WorkFlowy上では、タグを使いながらマークダウン記法で書いていくので、それをエクスポートする際に、まだブログ用のHTMLで文章を取り出すことができない、ってところです。いちいち成形しなくちゃいけない。
独自のハサミスクリプト的なものが必要だなぁ、という感じです。次はそれを作れないかあがいてみようかな。

では、お読みいただきありがとうございました。

See Also