VS Code+GhostTextでブラウザ上のエディタをハックして書く

この記事について

Qreateに書いた記事を転載したものです。

GhostTextについて

この記事をご覧のみなさんは、投稿サイトに文章をアップするとき、どんなワークフローをたどっているでしょうか。多くの場合、サイト内のエディタで文章を書ききるのではなく、外部のテキストエディタなどで書いた文章をコピペしているのではないかと思います。あるいはスタイルを指定できるエディタでは、そのあとでブラウザ上でスタイルを指定する作業をしているかもしれません。

Webブラウザ上で文章を書くとき、やはり気になるのはエディタの使い心地でしょう。Webサイト内のエディタも必要な機能をシンプルに提供しつつ使いやすいように工夫されているのでしょうが、自分が使い慣れたテキストエディタに比べると、とても作業しづらいものです。また、サイトによってエディタの機能や形式が異なっていることもあり、ブラウザ上のエディタでスタイルを指定するのは面倒な作業だったりします。

そんなときに便利なのがGhostTextです。これは手元のテキストエディタとブラウザ上のテキストエリアの内容を同期させることができるツールで、Visual Studio CodeやSublime Textなどのテキストエディタで使うことができます。これを使うことで、たとえばQreateの場合だと、HTMLタグを手元のテキストエディタで直に書くことで文章にスタイルを適用させることができるようになります。

VS Codeで文章を書く

GhostTextは仕様上、指定したテキストエリアごとに新規の一時ファイルを作成して、そのファイルとテキストエリアを同期します。そのため、文章はすでに書き終えたものを保存していおいて、あとはコピペしてスタイルを指定するだけという段階で、Webサイト内のエディタの代用として使うのがおもな用途になると思われます。

文章を作成するテキストエディタは何でもかまいませんが、VS Codeを使う場合は次にあげるような拡張機能を入れると便利かもしれません。

GhostTextの導入

ブラウザ側での準備

GhostTextはChromeまたはFirefoxの拡張機能として提供されています。Chromeで使用する場合、あらかじめストアからインストールしておきます。

テキストエディタ側での準備

GhostTextを使用したいテキストエディタにテキストファイルをホストするための拡張機能を入れます。

GhostTextの利用

Qreateの場合

GhostTextを導入したテキストエディタを開き、コマンドパレットからEnable GhostTextというコマンドを実行します(このとき、環境によってはGhostTextのネットワークへのアクセス許可を求める警告が表示されるので、適宜許可してください)。

次に、Webブラウザでふつうに投稿するときのようにQreateの新規投稿ページを開きます。それからWebブラウザのGhostTextのアイコンをクリックし、テキストエディタと同期させたいテキストエリア(この場合は「記事内容」)をクリックしてアクティブにします。なお、入力可能なテキストエリアがページ内にひとつしかないサイトでは、GhostTextのアイコンをクリックした段階で、そのテキストエリアが自動で検出されてアクティブになります。GhostTextが有効になったテキストエリアは以下のように青い枠線でハイライトされます。

すると、新規で一時ファイルが開かれるので、そのファイル内でテキストエリアに反映したい内容を書いていきます。

Qreateの場合、Quill.jsというOSSのエディタが使われているようです。このエディタはテキストエリアの内容としてHTML文字列を返すようなので、テキストエディタ側でHTMLタグを直に書くことでマークアップできます(サイトで使われているエディタによっては、同期した整形済み文字列をうまく表示してくれないことがあるため注意が必要です)。