メインエディタに「Subline Text」を選定しました。＋全角スペースを可視化する方法 - Devil！Daredevil！！ -dev challenge-

• Facebook
• Twitter
• はてブ
• LINE
• Pocket

#SublimeText #全角スペース #全角スペース可視化

　こんにちは、如月翔也（@showya_kiss）です。
　今日は久々に時間があったので、ずっと悩んでいたエディタ選びについて結論を出し、そしてそのエディタで「全角スペースを可視化する」方法を実装しましたのでお話しします。

　結論から言うと「Sublime Text」というクロスOSのエディタを採用し、かつ今Sublime Textでは公式の方法で安定して「全角スペースを見えるようにする」方法がないので自分で実装してしまいました。
　お話は長いですが、後半に行けばどうすれば「全角スペースを可視化できるか」を載せておきますのでお急ぎの方はToCから該当項目へどうぞ。

エディタ選定について

　僕はへっぽこなんですが一応開発者で（いくつかMacのApp Storeにアプリを出しています）、そしてメイン環境はMacなんですが「全ての環境で動くアプリを作りたい」「全ての環境で作った記事の見栄えを確認したい」というニーズがあり、家では「M4のMacBookAir（メモリ24GB）」「ゲームもバリバリ遊べるWindows（Core i7+RTX4060）のノートPC」「Ubuntuを入れたノートPC」を持っていまして（全部ノートなのは設置場所がないからです）、それでブログを書いたりレビューを書いたりXしたり二次創作書いたりしているわけです。

　この環境から、メインPCこそMacBookAirなんですが、実際何のパソコンを使って何の作業をするかわからないですし、Macが壊れた時に同じ作業をWindowsやUbuntuでもしたいので、基本的にはほとんどの作業を「クロスOSのツール」を使っています。

　それで色々なツールを使っているのですが、実は一番頭を悩ませていたものがありまして、実はエディタってクロスOSで良いものがなかなか見つからなかったのです。

エディタに求める条件

　僕がエディタに求める条件は以下です。

• 軽い事：VS CodeとCursorは使っているので、それ以下の軽い作業を担当させたい
• タブ/半角スペース/全角スペースを可視化できる：扱うものがコードから文章まであるため、これらの見分けが付かないと困る
• クロスOSである：最低でもMac/Windows/Ubuntuで使いたい。使えないならMDエディタのTyporaで良いので

　しかしこれがなかなか達成できない。
　Mac限定だとCotEditorとか、Windows限定だとEmEditorとかがあるんですがクロスOSだといきなり数が絞られます。
　vi？vim？文章も書くのでコード専用を言われても困るんですよね（苦笑）

　と言うわけで結構前から彷徨っていたんですが、結局Sublime Textに落ち着きました。

　Sublime Textには次の特徴があります。

• 軽い
• タブ/半角スペースは設定で可視化できる
• クロスOSである
• 拡張機能で全角スペースを可視化できる：今はできません
• 拡張機能をpythonで書いて実装できる

　はい、要求のほぼ全てが載っています。「全角スペースを可視化する」以外は。
　もともとSublime Textにはユーザー開発の「全角スペースを可視化する」機能拡張があり、これは今でも検索して入れられるんですが、実はSublime Textのバージョンアップで不整合になり機能拡張を有効化できないので使えないんですね。それが原因で僕は「残念」と思って他を探し続けていたんです。

　探し始めてなくて諦めて、を繰り返し、今回もSublime Textの機能拡張を探しましたがちゃんと動くものが見当たらなかったので、「じゃあちょっと作ってみて駄目なら諦めよう」と思って手を出したんですが。

　もっと早くやるべきでしたね。簡単でした。
　誰も手を出していないので難しいのかな、と思っていたんですが、要求としては難しくないですよね。
　できてしまい問題もなかったのでSublime Textで「全角スペースを可視化する」のができました。

　ので、備忘録も兼ねて方法と作るファイルの内容を残しておきます。

Sublime Textで全角スペースを可視化する方法

　簡単に言うと「機能拡張を作る」んですが、作業としては

• 所定のフォルダにテキストファイルを作る
• 内容をコピペして保存

　だけです。

所定の場所の開き方

　所定のフォルダの開き方は「Sublime Text」のメニューから「Setting」→「Browse Packeges」を選び、フォルダが開くので中の「User」を開いて下さい。ここです。

　作るファイル名は拡張子が「.py」なら何でもいいんですが（一応半角英数でお願いします）、今回は「ZenkakuHighlighter.py」としました。

コピペする内容

　作ったファイルに以下内容を貼り付けます。

import sublime
import sublime_plugin

# 全角スペース(U+3000)を検出してハイライトするプラグイン
# 対象イベント: ファイルを開いた時、編集した時、タブを切り替えた時

ZENKAKU_REGION_KEY = "zenkaku_space_highlight"
ZENKAKU_PATTERN = "\u3000"  # 全角スペース1文字


def highlight_zenkaku(view):
    """指定されたviewの中から全角スペースを探してハイライトする"""
    if view is None:
        return

    # ビュー内のテキストから全角スペースの位置を全て検索
    regions = view.find_all(ZENKAKU_PATTERN)

    if regions:
        # 見つかった場合はハイライトを描画
        # scope: "invalid" は赤系の警告色を使う組み込みスコープ
        # icon, flags は見た目の調整用
        view.add_regions(
            ZENKAKU_REGION_KEY,
            regions,
            scope="auto",
            icon="",
            flags=sublime.DRAW_NO_FILL
        )
    else:
        # 見つからなければ既存のハイライトを消す
        view.erase_regions(ZENKAKU_REGION_KEY)


class ZenkakuHighlighterListener(sublime_plugin.EventListener):
    """ファイルの読み込み・編集・タブ切り替え時に自動でハイライトを更新する"""

    def on_load(self, view):
        highlight_zenkaku(view)

    def on_activated(self, view):
        highlight_zenkaku(view)

    def on_modified(self, view):
        highlight_zenkaku(view)


class ToggleZenkakuHighlightCommand(sublime_plugin.TextCommand):
    """コマンドパレットや手動実行用: 現在のビューで強制的に再ハイライトする"""

    def run(self, edit):
        highlight_zenkaku(self.view)

　これを貼り付けて保存すればOKです。

　これで拡張機能が有効になるので、Sublime Textで全角スペースを打てば四角として表示されます。

　と言うわけで、Sublime Textで全角スペースを可視化する方法でした。
　僕は気に入ったので次の収入でSublime Textに課金するつもりです。Sublime Textは試用期間が特に定められておらず、使っている時に時々ライセンス登録のお誘いがある程度なので延々試用が可能なのですが、とても良いエディタなので敬意を表して99ドルを支払うのが良いと思います。

• Facebook
• Twitter
• はてブ
• LINE
• Pocket