MDN翻訳ツールについて:その2

この記事はMDNとかをみんなで編集!翻訳! Advent Calendar 2018 - Adventarの 10日目の記事です。
昨日はdummyさんのWeb standards (ウェブ標準) | MDN(https://developer.mozilla.org/ja/docs/Glossary/Web_standards)でした。
明日はfuzz139さんのMDN 翻訳コミュニティミートアップ・10回目開催を迎えて(https://www.webdino.org/updates/blog/201812111734/)です。

さて、今日は3日目(2018-12-05 - Uemmra3のフルスタックエンジニア?日記)にお伝えしたMDN翻訳ツールのインストール方法をお伝えします。

だいたいのマシンにはインストール済みで困ってたのですが、今日は漫画喫茶のマシンに入れてみたいと思います。


README(https://github.com/mozilla-japan/translation/tree/master/MDN)を見てみると

インストール

開発は主に Google Chrome で行っていますが、ES2015が普通に使える環境なら動くはずです。

1.UserScriptを動かすための拡張機能をインストールします(次のようなもの)

-Tampermonkey -Firefox版 -Chrome
-Greasemonkey -Firefox

2.このリポジトリの MDN/TranslationHelper.user.js を開いて右上の Raw をクリック。
もしくはこちらから: https://github.com/mozilla-japan/translation/raw/master/MDN/TranslationHelper.user.js

MDNで翻訳画面や日本語記事の編集画面を開くと自動で作動します。

となっており、実は現状Greasemonkeyでは動作せず、Tampermonkeyをインストールします。
念のため、このツールはブラウザーの挙動を変えるため、自己責任でお願いします。

Tampermonkeyのインストール


READMEのリンクから飛んで、「Firefoxに追加」をクリックして、権限設定を確認します。

インストールが成功すると、このようなグラサンのようなタブができています。
これがTampermonkeyのタブです。

MDN Translation Helperのインストール

でREADMEに戻って
「もしくはこちらから: https://github.com/mozilla-japan/translation/raw/master
とある部分をクリックすると

という、個別のユーザースクリプトのインストール画面に移り、
ここで「インストール」を押すと完了です。

Tampermonkeyのダッシュボードで確認してみましょう。

のようなメニューを操作すると

のように追加したユーザースクリプトが見えるはずです。

確認
実際にMDNを編集してみましょう。
Githubでログインして、任意のページを編集してみると

このようなUIができています。
「Translation Helper」のリンクをクリックしてみると、
このような実行結果が出ます。

拡大すると

のようなメッセージが表示されます。
青いメッセージは処理の確認です。
前回説明した英語ページのリンクの日本語化は、
「記事URLを日本語に修正: 0件」のところで確認できますね。

赤いメッセージは変換処理前後の文字数が同一と言っています。
一度処理済みの本文ではこのようなメッセージが出るので気にしなくてもいいです。
あとは下のタグの部分にも同様なメニューが追加されています。

これはやたら長い記事を翻訳するときに、上下のメニューの近いほうを選べるようにしているほか、「英語版のタグと揃える」のボタンにて、タグを全てコピーする機能もあります。

まとめ
というわけで、今日はMDN翻訳ツールのインストール方法をお伝えしました。

今後、MDN本体がもっと改良される可能性はありますが、
特に日本語ロケールへの翻訳の痒い所に手が届くツールだと思います。
ぜひ一度使ってみて、色々な意見を(GithubのIssueとかで)ください。
これがオープンソースソフトウェアの面白いとこだと思います。

では。