Make組ブログ

Python、Webアプリや製品・サービス開発についてhirokikyが書きます。

CodeMirrorでphrasesオプションを使ってUIを日本語化できるようになったという話

2018年8月25日にリリースされたCodeMirrorの5.40.0から、検索ダイアログなどのUIを日本語化できるようになりました。

New features

New method phrase and option phrases to make translating UI text in addons easier.

github.com

何が嬉しいのか

CodeMirrorの検索アドオンなどを使うとき、ダイアログ内の一部UIを英語から日本語に置き換えられませんでした。 例えば Search:(Use /re/ syntax for regexp search) という文言が変更できませんでした (それほど難しい文言でもないので英語のままでも良いですが、置き換えられるとUI上、言語を統一できてキレイです)。

CodeMirror: Search/Replace Demo

phrasesオプションに指定して変更できます

phrases というオプションをCodeMirrorに指定して、置き換える言葉を設定できます。 プロパティーにキーになる文言を、値に変更したい文言を指定します。

以下の例では searchアドオンのフレーズ を置き換えています。

CodeMirror(targetElement, {
  ...,
  phrases: {
    'Search:': '検索:',
    'Replace:': '置換:',
    '(Use /re/ syntax for regexp search)': '(/正規表現/ と書いて正規表現で検索できます)',
    'With:': '置換する文字:',
    'Replace?': '置換しますか?',
    'Yes': 'はい',
    'No': 'いいえ',
    'All': 'すべて',
    'Stop': 'やめる'
  }
})

そうすると、表示される文言を日本語に変更できます。

f:id:hirokiky:20180903193303p:plain

文言がユーザーのAccept-Languageによって切り替わるわけではないので「国際化」とは呼べなそうですが、僕はかなりありがたい機能だと思います。