Hatena::ブログ(Diary)

Uemmra3のフルスタックエンジニア?日記

2018-12-09

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

02:27 |

この記事は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のインストール

f:id:Uemmra3:20181210020256p:image

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

f:id:Uemmra3:20181210020600p:image

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

これがTampermonkeyのタブです。

MDN Translation Helperのインストール

でREADMEに戻って

「もしくはこちらから: https://github.com/mozilla-japan/translation/raw/master

とある部分をクリックすると

f:id:Uemmra3:20181210021425p:image

という、個別のユーザースクリプトインストール画面に移り、

ここで「インストール」を押すと完了です。

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

f:id:Uemmra3:20181210023849p:image

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

f:id:Uemmra3:20181210021721p:image

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

確認

実際にMDNを編集してみましょう。

Githubログインして、任意のページを編集してみると

f:id:Uemmra3:20181210022423p:image

このようなUIができています。

「Translation Helper」のリンクをクリックしてみると、

このような実行結果が出ます。

f:id:Uemmra3:20181210022737p:image

拡大すると

f:id:Uemmra3:20181210022859p:image

のようなメッセージが表示されます。

青いメッセージは処理の確認です。

前回説明した英語ページのリンクの日本語化は、

「記事URLを日本語に修正: 0件」のところで確認できますね。

赤いメッセージは変換処理前後の文字数が同一と言っています。

一度処理済みの本文ではこのようなメッセージが出るので気にしなくてもいいです。

あとは下のタグの部分にも同様なメニューが追加されています。

f:id:Uemmra3:20181210024245p:image

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

まとめ

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

今後、MDN本体がもっと改良される可能性はありますが、

特に日本語ロケールへの翻訳の痒い所に手が届くツールだと思います。

ぜひ一度使ってみて、色々な意見を(GithubのIssueとかで)ください。

これがオープンソースソフトウェアの面白いとこだと思います。

では。

2018-12-05

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

| 08:49 |

この記事はMDNとかをみんなで編集!翻訳! Advent Calendar 2018 - Adventarの 3日目の記事です。

昨日はlevena_evenasさんの[:title]でした。

明日は…登録がありませんが明後日はhmatrjpさんのMDN Adventar 12月5日分: hama の record of lifeです。

さて、去年のAdventarにて書いた雑な記事(MDNの翻訳お役立ちツールがメチャクチャ便利な件 - Uemmra3のフルスタックエンジニア?日記)で紹介した

MDN翻訳お役立ちツールがメチャメチャ便利

なので、シリーズ化してご紹介したいと思います。

README(no title)には

新規翻訳

● 見出しのidを英語のままにするためのname属性付与(参考)

● 自動翻訳もとい置換

◯ 見出しや互換性表などのよくある語句

◯ アルファベットと日本語の間に半角スペースを自動挿入

◯ 実装・継承するプロパティメソッドがないことを示す文

◯ The hogehoge interface → hogehoge インターフェイス

● /en-US/docs/ → /ja/docs/

● 翻訳中フラグをオフに、編集レビューをオンに

● タグを元記事からコピー

● 編集コメントに元記事のリビジョン番号を自動入力

とありますが、

/en-US/docs/ → /ja/docs/

を紹介します。


MDNを訳していると、他のMDN記事へのリンクが載っていることがありますが、新規翻訳時にはオリジナル版である「en-US」ロケールのものになっています。

f:id:Uemmra3:20181205094624p:image

このままにしておくと、日本語版の記事を見ているユーザーが、他の記事を読もうとしてリンクをクリックしても、英語版に飛んでしまって不親切です。

もちろん手作業で /en-US/docs/ → /ja/docs/ と変換しても良いですが、

ページ内に5個とか10個とかリンクがあるとウンザリします。

TranslationHelperをインストールしておくと、新規翻訳ではこれを自動化してくれます。

既存記事の編集時には

f:id:Uemmra3:20181205095735p:image

のように「Translation Helper」のボタンをクリックすると

f:id:Uemmra3:20181205095451p:image

このように日本語ロケールへのリンクに変わります。

便利だ!

鋭い方は「リンク先が未翻訳の場合は大丈夫なの?」と心配するかもしれませんが、そこはMDN側で自動的に英語ロケールを表示するのでOKです。


クリスマスも近づいて来ました。

MDN翻訳お役立ちツールを活用して、記事の翻訳に挑戦してみてはいかがでしょうか?

では。

2018-12-01 [翻訳][アドカレ][Mozilla]Mozilla翻訳関連の勝手に5大ニュース!!

この記事はMDNとかをみんなで編集!翻訳! Advent Calendar 2018 - Adventarの 1日目の記事です。

明日はlevena_evenasさんの[:title]です。

さて、いろいろあった今年も残りあと1ヶ月です。

どうやら1年ブログをサボっていたようですが、

今年の Mozilla翻訳 界隈のニュースを勝手に発表したいと思います!

個人的な捉え方なので異論は認めます。

第5位

MDNの日本語更新が古いことをハイライトする拡張機能をリリース!

いきなり自分ごとでアレなんですが、extensionコミュニティに活気がでてきたのに刺激を受けて、

MDNの更新日が古いのをハイライトする拡張機能を作りました。

更新サイトmdn-l10n-update-checker ? ? Firefox (ja) 向け拡張機能を入手

ソースno title

これを開発したモチベーションを説明します。

MDNの機能に日本語ページと対応する英語版が更新された時に

通知できるように機能があるんですが、登録しまくってたら通知が多すぎる問題があります。

(そのページだけでなくその階層以下も登録できる)

その上に、変更通知を登録していない日本語ページをブラウジングしている時に、

それが最新の英語版よりも新しいかを確認するには

デフォルトのMDNの機能だと「編集」をクリックして差分が出るのか確かめないといけません。

それをブラウジングしている時に「編集」ボタンの付近をオレンジ色にハイライトする

(あくまで日付の比較しているだけですが)

そんな拡張機能です。

百聞は一見に如かず、一度インストールして試してみてください。

(MDN翻訳している人はもちろん、参照している人にも便利な機能と思っています)

第4位

MDNのマクロの廃止が発表される!

少なくとも日本語のローカライズコミュニティではよく使用されていたマクロ機能の廃止/縮小が発表されました。

https://discourse.mozilla.org/t/next-steps-for-kumascript/32227

要はいろんなマクロが存在していてカオスなため、整理したいということのようです。

私自身もとつぜんフランスの方が{{Yakuchu}}というマクロをすごい勢いで消し始めたのを発見して、必要性を説明したりもしました。

そのへんの議論はこちらにあります(https://github.com/mozilla-japan/translation/issues/263)

第3位

翻訳ツールに新しい貢献者が登場

去年のカレンダーでも紹介したMDNの翻訳お役立ちツールがメチャクチャ便利な件 - Uemmra3のフルスタックエンジニア?日記超絶便利なMDN翻訳ツールに、新しい貢献者が現れました!

<https://groups.google.com/forum/#!topic/mozilla-translations-ja/pAFrkTLR4Qo:title>

のような問題に対応してくれた sutara79 さん(https://github.com/sutara79)です。

これまではこのツール作者の uranist さんと私が編集していたこのツールですが、

新たな貢献者によって別の視点でブラッシュアップしていくといいなぁ、と思っています。

第2位

OSC名古屋に翻訳ハンズオンを出展!

オープンソースカンファレンス(OSC)はいろいろな技術コミュニティが集まるイベントです。

これまでOSC東京で開催してきた翻訳ハンズオンを、OSC名古屋で初開催しました。

【名古屋と東京の二箇所開催!】【第4回!】みんなで MDN を翻訳しよう!翻訳コミュニティ月例ミートアップ! 2018年5月19日開催 - Mozilla Japan コミュニティ | Doorkeeper

東京でのmonthlyミートアップと同時開催したのですが、しょうじき事前告知がうまくいかず、名古屋の登録者はチューター陣よりも少ない2名だったので辛かったです。。

当日に宮原さんのセッションで告知したり他のブースで宣伝したりして、なんとか身のあるハンズオンとなりました。

あとはこの時にスタッフとして協力してくれた chameleonhead さんの加入も心強いと思います。

第1位

monthlyミートアップを開始!!

今年の2月から、東京のWebDINO Japanにて毎月のミートアップが始まりました。

「翻訳に興味あるけど、どうやったらいいんだろう?」「翻訳やってみたけど、細かいことがよくわからないな…」という方は、ぜひ参加してみてほしいです。

基本は現地参加ですが、オンラインでリモート参加することもできます(私は地方住みなのでリモート参加)。

DoorKeeperにてお申し込みください。

Mozilla Japan コミュニティ | Doorkeeper

クリスマスも近づいて来ました。

MDNとかをみんなで編集!翻訳! Advent Calendar 2018 - Adventarではまだまだ登録を募集しています。

ぜひ気軽に登録してみてください。

では。

2017-12-23

MDNの翻訳お役立ちツールがメチャクチャ便利な件

| 22:25 |

この記事はMDNとかをみんなで編集!翻訳! Advent Calendar 2017 - Adventarの 23日目の記事です。

昨日はhmatrjpさんのno titleでした。

明日はic_lifewoodさんのno titleです。

まず、MDNはこれまでMozilla Developer Networkの略だったんですが、もう少し他のWeb標準全体を扱うものとして

MDN Web Docs という名前に変わっています。

no title

ChromiumやEdgeなどの仕様をもらって、クロスブラウザー問題を軽減したいという思いがあるようです。詳しくは次の記事でも。

Mozilla、Microsoft、Googleがブラウザ横断Webドキュメントネットワーク構築で協力 - ITmedia NEWS

さて本題。

MDNの翻訳をしていると、とても便利な編集環境だ!と思う反面、めんどくさい面もあります。

良い面

  • Githubアカウントでログインしたら、ブラウザー画面ですぐに編集できる
  • 単に編集するだけでなく、編集履歴とかもMDNエディター上で見られる

悪い面

  • 英語版(en-US)がデフォルトなので、MDN内のリンクに対しても手作業で日本語(ja)に変える必要がある
  • ページを分類するタグの概念があるが、翻訳時には英語版のものを引き継いでくれない
  • 見出しにアンカーがついているが、見出しを翻訳するとアンカーも翻訳されてしまう(アンカーへのリンクは英語のまま)のでページ内リンクがうまくいかない

この悪い面(とにかくメンドイのです)は翻訳モードに入っていた思考を分断させちゃいます。なんかいちいちマウス操作で単純作業するのも悲しいです。Firefox拡張機能の仕様が変わってVimperatorのサポートがなくなった時と同じ悲しみです。

ところが、こんなメンドイ作業を自動化してくれるツールコミュニティのunaristさんが作ってくれました!!あなたは神か!?

_人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人_

> https://github.com/mozilla-japan/translation/tree/master/MDN <

 ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄

これをセットアップすると(詳しくはリンク先の「インストール」にて)上に書いた悪い点がすべて解消します。

ストレスフリーな作業ができること請け合いです。騙されたと思って使ってみてください。わりと荒削りな面も残っていますが、もちろんPull Requestや要望なども受け付けています。

クリスマスも近づいて来ました。

それでは、楽しいWeb開発ライフを!

2016-12-22

baserCMSのワンラインインストール+起動の解説

| 09:05 |

昨日の記事(酔っ払ってからbaserCMSをインストールしてみた - Uemmra3のフルスタックエンジニア?日記)で、baserCMSをインストールできました。

ただ外谷さんがこちらで(404 Not Found | このページは存在しないか、すでに削除されています)書いているように、ユーザー寄りの方や初心者の方の参加が求められています。そうした方にはチンプンカンプンなものになるかもしれません。

つまり昨日の記事でインストールできた事実は良いのですが、それだけだと不親切な気がします。なので、kaburkさんの記事(no title)に対して、少し解説を書くことにしました。

元々のコマンドはワンラインになっています。

git clone git@github.com:baserproject/basercms.git; ./basercms/app/Console/cake bc_manager install "http://localhost:8080/" "sqlite" "admin" "password" "webmaster@example.org" --host "localhost" --database "basercms" --data "bccolumn.default"; php -S localhost:8080 -t basercms/app/webroot

で私の場合はこれをWindows上のGit Bashで実行したのですが、UNIXライクOSのシェルの機能として、「;」で複数行のコマンドを連続させる機能を利用しています。

例えばtestというディレクトリを作って移動するのをワンライナで書くと、次のようになります。

mkdir test; cd test

ワンライナはコピペが簡単なのですが、解説するにはそれぞれのコマンド単独の方が良いと思いますので、1コマンドずつ説明しましょう。

1コマンド目

git clone git@github.com:baserproject/basercms.git;

baserCMSは、githubというインターネット上のリポジトリ(ソースコードなどの置き場)に保管されています。このコマンドでは、githubからソースコードを取得します。

なおこのリポジトリウェブブラウザーからも見ることができます(no title)。

2コマンド目

2コマンド目を整理して書いてみます

./basercms/app/Console/cake bc_manager install

"http://localhost:8080/"

"sqlite"

"admin"

"password"

"webmaster@example.org"

--host "localhost"

--database "basercms"

--data "bccolumn.default";

元記事にも記載のあるこちら(コマンドインストール | baserCMS - 国産オープンソース!フリー(無料)でコンテンツ管理に強いCMS)がコマンドリファレンスです。このコメント(#より右がコメントです)を付けてみると、おぼろげながら理解が進むのではないでしょうか。

./basercms/app/Console/cake bc_manager install

"http://localhost:8080/" # サイトURL

"sqlite" # DB種類

"admin" # 管理システムログイン

"password" # 管理システムログインパスワード

"webmaster@example.org" # 管理者メールアドレス

--host "localhost" # DBサーバホスト名

--database "basercms" # DB名

--data "bccolumn.default"; # 初期データのパターン

実際私も正確に理解しているのではないですが、DB(データベース)サーバと、管理システムをインストールしている、ということがわかります。

あと「cake」というのは、CakePHP(PHPのWebアプリケーションフレームワーク)のコマンドだと思います。詳しくはCakePHPの解説書、解説をご覧ください。

3コマンド目

php -S localhost:8080 -t basercms/app/webroot

インストールが終わったので、実行します。

PHPの簡易ヘルプを出すと、次のようになります。

$ php --help

Usage: php [options] [-f] <file> [--] [args...]

php [options] -r [--] [args...]

php [options] [-B <begin_code>] -R [-E <end_code>] [--] [args...]

php [options] [-B <begin_code>] -F <file> [-E <end_code>] [--] [args...]

php [options] -S <addr>:<port> [-t docroot]

php [options] -- [args...]

php [options] -a

-a Run interactively

-c <path>|<file> Look for php.ini file in this directory

-n No php.ini file will be used

-d foo[=bar] Define INI entry foo with value 'bar'

-e Generate extended information for debugger/profiler

-f <file> Parse and execute <file>.

-h This help

-i PHP information

-l Syntax check only (lint)

-m Show compiled in modules

-r Run PHP without using script tags

-B <begin_code> Run PHP <begin_code> before processing input lines

-R Run PHP for every input line

-F <file> Parse and execute <file> for every input line

-E <end_code> Run PHP <end_code> after processing all input lines

-H Hide any passed arguments from external tools.

-S <addr>:<port> Run with built-in web server.

-t <docroot> Specify document root <docroot> for built-in web server.

-s Output HTML syntax highlighted source.

-v Version number

-w Output source with stripped comments and whitespace.

-z <file> Load Zend extension <file>.

args... Arguments passed to script. Use -- args when first argument

starts with - or script is read from stdin

--ini Show configuration file names

--rf <name> Show information about function <name>.

--rc <name> Show information about class <name>.

--re <name> Show information about extension <name>.

--rz <name> Show information about Zend extension <name>.

--ri <name> Show configuration for extension <name>.

この

php [options] -S <addr>:<port> [-t docroot]

がここで使っている引数ですが、

php -S localhost:8080 -t basercms/app/webroot

では、Webアプリケーションサーバーのアドレスがlocalhost、ポートが8080

でドキュメントのルート(置き場所を指定する)がbasercms/app/webroot、になっています。

ちょっと初心者向けの説明をすると、

Webアプリケーションサーバーを情報を表示・操作するお店の店員さんだとします。お店がどこにあるかを指定しているのが -S の直後の引数です。そのうち、localhostとは自分自身の場所を指し、ポートはさしずめ窓口やカウンターのようなものです。つまり、あなたがインストールしたPC自身の、8080という窓口からアクセスできるようになります。そして、トップページの情報を置いている場所はbasercms/app/webrootになります。アクセスしてきたユーザーの要求に対して、店員(Webアプリケーションサーバー)は、最初はbasercms/app/webrootという棚から情報を取って、そこにあるマニュアルに沿って(PHPプログラムを解釈して)お客さん(ユーザー)に返事をする。そんな流れでしょうか。

まとめ

1行に連結されていた3つのコマンドを順に説明しました。

  • githubからのソースコード取得(ダウンロード)
  • 取得した環境を用いたbaserCMSのインストール
  • Webサーバーの起動

というステップに分かれていました。当然ですが、次回起動するには3ステップ目だけを実行すればよいですね。

ではあなたもステキなbaserCMSライフを!ビバ!