日本語のシンタックスハイライト

about novel-writer

プログラム用のエディターは賑やかだ。変数や修飾子、プロパティ、関数、制御用の予約語などが異なる色でハイライトされている。下のスクリーンショットはnovel-writerの「〜た」「〜る」変換を行うコードの一部だが、この短い部分だけでも、色分けされていなければコードを読み解くのに苦労してしまう。

    // 対象の文だけ処理する
    if (processingSentence === targetSentence) {
      // 自立「〜る」の変換
      if (
        token.conjugated_form === "基本形" &&
        token.conjugated_type.match(/.+ガ行$/) &&
        nextToken.pos_detail_1 === "句点" &&
        nextToken.surface_form === "。"
      ) {
        const attributedVerbeForm = token.surface_form.replace(
          /(.+)[ぐ]/,
          "$1いだ"
        );

もちろん読める。だけど括弧やクォーテーションの閉じ忘れひとつとっても、色分けされているのに越したことはない。

というわけで、日本語でも品詞ごとにハイライトするといいんじゃないかと思った次第。VS Codeを使い始めて三日目で作ったのが、会話の部分を色分けする言語拡張だった。行頭が「、行末が」で終わる行を、プログラミング言語のコメントアウトに指定するだけの簡単な色分けだ。ついでに、青空文庫のルビにも色をつけることにした。

もちろん鉤括弧があるかどうかなんて読めばわかる。しかし色分けをしたことで視認性は上がった。エディターの右にあるミニマップ(テキストの縮小表示)では、会話が続くか続かないかを俯瞰することもできた。

書いている時に見やすくても、出版した後で読みにくければ意味がない。そこで縦書きプレビューを表示することにした。VS Codeを使い始めた時は、n-fukujuさんの作った縦書きプレビューを使っていた。これが想像していたよりもずっと良かったので、自分でも機能拡張を作ろうと決意したのだ。

Novel-writerで縦書きプレビューを表示しているところ

色分け機能だけだったnovel-writerは縦書きプレビューを内蔵してサーバー化し、原稿用紙のような見た目に変え、文字数カウントをつけ、バラバラに書いたテキストファイルをひとつに結合する機能をつけて、PDF出力もできるようにした。Textlintも導入して、正規表現を使う校正機能や、タイプミスで生まれる助詞の連続をエラー表示できるようにもなった。

仕事に使えるようになったVS Codeだが、どうしようもない弱点もあった。

テキストが単語分割されていないので、カーソルを単語ごとに移動できなかったのだ。「てにをは」や「、。」などを区切り文字にして凌いでいたがストレスから解放されるには、日本語を単語に分解する形態素解析をするしかない。形態素解析ができれば、日本語のハイライトをもう一段階進められるし、「です・ます」を「だ・である」に変換したり、「していた」を「している」に変換できることもわかっていた。ルビの読み仮名も自動で挿入できる。

というわけで、昨年の秋にようやくKuromoji.jsという形態素解析ライブラリを導入することに成功した。日本語をハイライトできるようになったのだ。

動き出した時にようやく気づいたのだけど、日本語の品詞がハイライトされているのを見るのは初めてだった。色分けはちょっとだけ難航した。

文法が緩い会話はグリーン系統で統一することにした。「あはははっ」のように、2文字目の「は」と3文字目の「は」が異なる品詞に分解されてしまう可能性がある。地の文の色分けは、品詞の種類が多いので少し悩んだ。名詞グループの中でも、普通名詞と代名詞、固有名詞は扱いを変えたいのだ。

特に代名詞は可読性を落とすので積極的に消していきたい品詞のひとつだ。逆に名詞の中でも接尾語として使われる単語は目立たせたくないし、普通名詞には主張してほしくない。動詞は重要なので目立ってほしい。副詞は本質的に不要だ。なければない方がいいので思い切り目立たせたい。助詞は、タイプミスが一番多く現れる部分なので見えてほしいが意味は欲しくない――そんな基準で色をつけてみた。

結果的にびっくりするような色合いになってしまったが、使うと違和感はすぐに消えると思う。単語は探しやすくなるし、入力ミスにも気付きやすくなる。読む速度も上がるはずだ。難点は、見た目がちょっと煩雑ということか。いずれ、カラーリングを簡単に指定できる画面も作ってみようとは思う。

ルビ追加機能の搭載

about novel-writer

novel-writer 1.7.0で青空文庫記法ルビの追加機能を搭載しました。

novel-writer – Visual Studio Marketplace

テキストエディターでルビを追加したい場所を選択して ⌘+R(WindowsやLinuxではCtrl+R)すると、ルビを入力するためのダイアログボックスが現れます。

選択範囲がある場合には、その範囲全体に有効なルビを追加します。たとえば「国際宇宙ステーション」に「ISS」というルビを付与したいときは以下のように選択しておきます。

今日の夕方、国際宇宙ステーションが東京の空を飛んだ。

ここで⌘+R(WindowsやLinuxではCtrl+R)を押してルビの追加を行うと、ルビを指定する入力ボックスが現れます。ここでISSと入力してEnterを押すと、ルビが挿入されます。

今日の夕方、|国際宇宙ステーション《ISS》が東京の空を飛んだ。

「|(縦棒)」は青空文庫記法で漢字以外の文字グループにルビをつける時の開始記号です。novel-writerは選択範囲が漢字だけでない場合には開始記号を自動的に挿入します。

novel-writerは、選択範囲がない場合にルビ追加を行うと、直前の単語、またはカーソルの入っている単語にルビを追加します。

今日の夕方、国際宇宙ステーションが東|京の空を飛んだ。
今日の夕方、国際宇宙ステーションが東京|の空を飛んだ。

上のいずれかの状態でルビを追加すると、ルビ入力ボックスが現れます。

この時には、読み仮名も推測したものが入っていますのでこのままEnterを押すと、ルビが挿入されます。

今日の夕方、国際宇宙ステーションが東京《とうきょう》の空を飛んだ。

novel-writerはカーソルが入っている場所の単語と読みを判定するために、Kuromoji.jsによる形態素解析を行なっています。

ちょっとした機能ですが、とても快適になりました。

たんごカーソル

2021年の春から、マイクロソフト社のプログラム開発用エディター、Visual Studio Codeで執筆のほとんどを行うようになりました。

高速なユニコードエディターに複数ファイルを閲覧できるエクスプローラー、正規表現を用いた検索置換、このブログの「小説Git」でも紹介したGitとの連携機能、統合されたターミナルに魅力的なエクステンションの数々は、これで小説を書こうと思うのに充分な動機になりました。

しかし欠陥がないわけではありません。

行が折り返す部分での日本語入力の表示の崩れ方は見苦しいし、あらゆる設定がプログラミング用なので、標準の状態ではとても日本語の執筆に向いているとは言えません。何より致命的なことに、VS Codeは日本語の単語分割を理解してくれないのです。

Optionキーを押しながら右カーソルキーを押すと、VS Codeのカーソルは次の単語の先頭ではなく行末に移動してしまいます。

|たしは今日、旅に出ます。  「わ」の後ろにカーソルがある時に
      ↓          option + → キーで
わたしは今日、旅に出ます。|   行末に移動してしまう

本当は下のように動いて欲しいんですよね。選択なら右のような感じ。削除も単語単位でやりたいわけです。

わたし|は今日、旅に出ます。→    わたし今日、旅に出ます。⇧→
わたしは|今日、旅に出ます。→    わたしは今日、旅に出ます。⇧→
わたしは今日|、旅に出ます。→    わたしは今日、旅に出ます。⇧→
わたしは今日、|旅に出ます。→    わたしは今日、旅に出ます。⇧→
わたしは今日、旅|に出ます。→    わたしは今日、旅に出ます。⇧→
わたしは今日、旅に|出ます。→    わたしは今日、旅に出ます。⇧→
わたしは今日、旅に出|ます。    わたしは今日、旅に出ます

ないのなら作ってしまえ、ということで作ってしまえるのがVS Code用のいいところです。

たんごカーソル

紹介ページの先頭にも書いてありますが、独力で書いた機能拡張ではありません。VS Codeとのインターフェイスは、Suguru Yamamoto氏のJapanese Word Handlerzlib License)のコードを丸ごと使っています。日本語の単語分割はTaku Kudo氏のTinySegmenter 0.1(修正BSDライセンス)を組み込むことで、実用的な速度で動作するようになりました。

たんごカーソルはWebブラウザ版のVS Code、codespacesでも動作しますので、github.devやvscode.devからオンライン編集を行う時にもお使いいただけます。

小説の執筆だけでなく、ドキュメント執筆にも有用な機能拡張になりました。どうぞご自由にお使いください。

PDF出力の方法

about novel-writer

novel-writerを用いると、CSS組版ソフトウェアVivliostyleで縦書きのPDFを出力できます。

VivliostyleはVS Codeのターミナルで以下のコマンドを入力することでインストールできます。

npm install -g @vivliostyle/cli

エディターでテキストファイルを開いた状態でコマンドパレットからNovel: PDFプレビューを選ぶと、縦書きプレビューの書式でPDFを作成します。

VivliostyleはGoogleのWebブラウザーChromeの開発版である「Chromium」で縦書きレイアウトを作ります。初回起動のときは最新版のChromiumをダウンロードするために、少々時間がかかります。

しばらく待つとChromiumが起動し、A5用紙に縦書きレイアウトされた原稿が表示されます。

1行の文字数が少ない場合などには、段組で表示を行います

文字組みの様式は縦書きプレビューで設定する字数行数になりますが、日本語の表示機能がVS CodeのプレビューとVivliostyleでは異なるため、レイアウトは微妙に異なります。

VivliostyleのChromiumを開いたまま、原稿や行あたりの文字数やページあたりの行数を変更してPDF生成を行うと、レイアウトの変更はすぐに反映できます。

PDFを保存するときは、Novel:PDF出力を実行してください。プレビューしているものと同じPDFを保存します。

PDFの出力には少々時間がかかりますので、保存終了のダイアログが出るまでお待ちください。novel-writerで保存するPDFは右綴じになっていますので、Acrobatから見開き印刷することが可能です。

Mac OSの標準PreviewやiPad、iPhoneで見開き印刷を行うときは、印刷ダイアログのレイアウトを選び、ページ数を「2」に、レイアウト方向を右から左に設定することで、見開きの印刷が可能になります。

novel-writerのPDF出力は、著者自身の推敲や、テキストファイルで納品する原稿に添付する棒組み原稿を想定して開発しています。冊子を作る場合には、PDF出力時に保存するpublish.htmlに手を入れて、Vivliostyleで調整していくことをお勧めいたします。

小説Git 3:VS Codeのインストールと最低限の設定

それではVisual Studio Code―VS Code(ブイエスコード)をインストールしましょう。VS CodeはMicrosoftのソフトウェア開発環境「Visual Studio(ビジュアルスタジオ)」のWebサイトからダウンロードできます。

VS Code公式Webサイト

ダウンロードしたVS Codeをアプリケーションフォルダーに移動します。小説GitではMac版で説明することが多くなりますが、WindowsやLinux(Chromebook)などをお使いの方は、適宜読み替えてください。

App Storeの審査を経ていないアプリケーションですので、初回起動時にはセキュリティ警告が表示されます。

システム環境設定セキュリティとプライバシーでVisual Studio Codeの起動が止められたことがわかります。ここで「このまま開く」をクリックし、確認画面でもう一度「開く」をクリックするとVS Codeを起動できます。

VS Codeの起動画面です。

VS Codeの初回起動画面:すぐに日本語化できます。
VS Codeの基本インターフェイス

起動していたらこのまま日本語化まで行いましょう。アクティビティバーの一番下にあるExtensionsをクリックし、検索フィールドにJapaneseと入力してください。Japanese Language Pack for Visual Studio Codeというエクステンションが表示されるので、これをインストールします。

VS Codeを再起動すると、日本語インターフェイスのVS Codeが起動します。

起動画面で促されているように、VS Codeは一つ一つのファイルを開くよりも、フォルダーを開いて作業することを前提に設計されていますので、下のようなフォルダーを開きます。

フォルダーを開くと、制作者を信用するかどうかを確かめるアラートが表示されます。プログラミングエディタならではですね。もちろん信頼してフォルダーを開きます。

アクティビティバーでエクスプローラーをクリックすると、開いたフォルダーの内容がサイドバーに表示されます。ここでファイルを選択すると、ファイルをエディターで編集できます。

画面に収まりきれない長さの行が画面外に延びていますので、日本語を書くために最低限の設定を行います。

アクティビティバーの一番下にある「管理」をクリックし❶、メニューから「設定」を選択する❷と、エディターに設定画面が表示されます。設定項目は無数にあるので、目的の設定を探すには検索する必要があります。検索フィールドに「折り返し」を入力すると❸、Editor: Word Wrapという項目が出てきます。初期設定ではoffになっているので、onに切り替えます❹。これで長い行を折り返すことができるようになりました。

設定画面の構成や設定の方法などが一般的なデスクトップアプリケーションと違うことに戸惑うかもしれませんが、ファイル保存などの基本的な操作は、他のデスクトップアプリケーションと大差ありません。

次はVS Codeの中にある「黒い画面」に向き合って、Gitのインストールに進むことにしましょう。ようやくGitと対面です。

コンテンツ一覧

  1. 小説Git 1:はじめに
  2. 小説Git 2:黒い画面でタタタターン
  3. 小説Git 3:VS Codeのインストールと最低限の設定
  4. 小説Git 4:Gitのインストール
  5. 小説Git 5: VS CodeのGit拡張機能