やさしい日本語エディタ WordPressプラグインを制作

公開

勤務先にて「やさしい日本語エディタ WordPressプラグイン」を制作し、9月14日に「Simplified Japanese – WordPress プラグイン | WordPress.org 日本語」にて公開の運びとなりました。
ブロックエディタ（Gutenberg）にSimplified Japaneseプラグインを適用した画面

正直なところ以前は「やさしい日本語」にはあまり興味が持てなかったのですが、特にコロナ禍になって以降、自治体のサイトや自治体のSNSで頻繁にやさしい日本語を見かけるようになり、「やさしい日本語を必要としている人がいるのかもしれない」「自分がやさしい日本語を必要とされている方と接点がないだけかもしれない」などと考えるようになってきました。そして、WordPressプラグインによってやさしい日本語が簡単に作成できたり、簡単にルビを振ることができたりできれば便利ではないだろうか？と考えました。
（ちなみに「Webアクセシビリティ」については大伯父が目が不自由で、僕が幼い頃からラジオで株の情報を聞いているのを間近に見ていたことが大きく影響していると思います。）

公開後、三省堂さまの「三省堂 WORD-WISE WEB -Dictionaries & Beyond-」において、「【やさしい日本語（にほんご）】「今年（ことし）の新語（しんご）2020」募集中（ぼしゅうちゅう）！」という記事が公開され、私が制作したプラグインが利用されていることを知って大変うれしく思いました。

苦労や工夫

WordPressのブロックエディタ（Gutenberg）がReactで実装されていることは知っていたのですが、Reactは触ったことがありませんでしたしGutenbergを拡張する方法も知りませんでしたので、ReactとGutenbergの勉強から始めました。Reactはチュートリアルを一通り見て、あとはBlock Editor Handbookをひたすら読んでいきました。ただ、公式のハンドブックだけではすぐに理解できないこともあり苦労しました。

WordPressのコーディング規約に則るのが大変でしたが、PHP_CodeSnifferやwp-prettierを利用できるように整え、苦なく対応できるようになりました。

ルビの編集UI

ルビを編集する時、Gutenbergに標準搭載されているリンクボタンのように、編集対象テキストを選択してボタンをクリックするとピロッとテキストの下に設定のUI（Popover）が出てくるようにするのはこだわりました。リンクの編集に近づけたかったことと、モーダルでは大げさな感じがしてテキストのすぐ近くにちょっとPopoverが出た方が使いやすいのではないかと考えたためです。ただ、選択したテキストの真下に出す方法がどうしても分からず海外サイトに情報がないか調べたところ、偶然「0up/insert-special-characters: A Special Character inserter for the WordPress block editor (Gutenberg).」を見つけ、なんとか実現にこぎ着けました。anchorRectを得るところがポイントでした。
Simplified Japaneseプラグインでルビを編集する画面

DOMRectを取得する関数を定義します。

import { getRectangleFromRange } from '@wordpress/dom';

let anchorRange;
const preRubyEditorOpen = () => {
    const selection = window.getSelection();
    anchorRange = selection.rangeCount > 0 ? selection.getRangeAt( 0 ) : null;
};
const anchorRect = () => {
    return getRectangleFromRange( anchorRange );
};

定義した関数をPopoverのgetAnchorRectに指定しました。

const rubyEditor = isRubyEditorOpen && (
    <Popover
        position="bottom center"
        noArrow={ false }
        getAnchorRect={ anchorRect }
        onClose={ () => setIsRubyEditorOpen( false ) }
    >
        <RubyControl
            onEditDone={ onEditDone }
            targetText={ targetText }
            value={ rubyContents.ruby }
        />
    </Popover>
);

これでテキストの直下にルビ編集のPopoverが表示できました。お盆休みに頑張った甲斐がありました。