MDN Web Docs 翻訳の紹介(2023.10.26.勉強会)

MDN Web Docs 翻訳の紹介 2023.10.26 勉強会

質問 Web の技術のドキュメントはどこを見ていますか？

今日お話する事 ● MDN Web Docs の簡単な歴史 ● 翻訳で、皆さんが気になる事 ● MDN Web Docs の翻訳フロー

What is MDN Web Docs?

MDN Web Docsは、ウェブ標準 及びMozillaプロジェクトの開発文書のための Mozillaの公式ウェブサイトです。 2017年 MDN Web DocsはGoogle、サムスン電子、Microsoft及びMozillaのウェブ技術の統 一文書となった[8][9]。 MicrosoftはMSDNからMDNへのページのリダイレクトを開始した[10]。 Wiki 出典

• https://ja.wikipedia.org/wiki/ウェブ標準
• https://ja.wikipedia.org/wiki/Mozilla
• https://ja.wikipedia.org/wiki/ウェブサイト
• https://ja.wikipedia.org/wiki/Google
• https://ja.wikipedia.org/wiki/サムスン電子
• https://ja.wikipedia.org/wiki/Microsoft
• https://ja.wikipedia.org/wiki/MDN_Web_Docs
• https://ja.wikipedia.org/wiki/MSDN

ウェブ技術の統一文書となった

ブラウザの歴史（インターネット老人会的知識） 90 年代の歴史的ブラウザ展示と "Web ブラウザ年表"最新版の配布

• http://number-blog.bunshun.jp/blog/entry/10547/

MDN のあゆみ（インターネット老人会的知識） ● Netscape DevEdge ● MediaWiki 最初の Wiki エンジン ● DekiWiki ● 2 つ目の Wiki エンジン ● Kuma ● 3 つ目の Wiki エンジン ● Yari ● 現在のMDN Webドキュメントプラットフォーム ● Wiki ベースの編集からGithub, MarkDown 形式編集へ変更

翻訳にあたり、みんなが（多分）心配している事 ● 英文が読めない（訳せない） ● 英検？級の語学力が必要？ ● TOEICの語学力が必要？

翻訳にあたり、みんなが（多分）心配している事 ● 英文が読めない（訳せない） => とりあえず気にしない ● 英検？級の語学力が必要？ => あれば越した事はない ● TOEICの語学力が必要？ => あれば越した事はない

必須 日本語の文章を正しく書ける事

Q どうすれば良いか？ （意訳：翻訳出来るの？）

A 文明の利器（翻訳ソフト）を使おう！

注意 著作権に抵触しない様に使いましょう

Google 翻訳 https://translate.google.com/ DeepL翻訳ツール https://www.deepl.com/ja/translator

• https://translate.google.com/
• https://www.deepl.com/ja/translator

本題 翻訳はどうやって始めるの？

Mozilla Japan コミュニティに参加しよう！ （推奨）

翻訳ガイドを見てみよう！（必須）

翻訳までの流れ（準備編） ・Mozilla Japan コミュニティに参加（推奨） ・月１回の翻訳イベントに参加（推奨） ・翻訳ガイド査読（必須） ・Github アカウント作成（必須、既に作成済み人は不要） ・翻訳環境を準備（必須） ・Node.js, Yarn のインストール

翻訳に関係するリポジトリ① https://github.com/mozilla-japan/translation

• https://github.com/mozilla-japan/translation

翻訳中の記事が issue で、列挙されています 手順等は後ほど説明します。

翻訳に関係するリポジトリ② https://github.com/mdn/content 原文（英語）のリポジトリ

• https://github.com/mdn/content

翻訳に関係するリポジトリ③ https://github.com/mdn/translated-content 各言語に翻訳された記事のリポジトリ

• https://github.com/mdn/translated-content

翻訳に関係するリポジトリ④ https://github.com/mdn/yari MDN Web Docs のサイドバーのリポジトリ

• https://github.com/mdn/yari

ここの翻訳 このリポジトリはちょっと特殊なので、別途解説します

翻訳作業の流れ 1. 記事を選定する 2. 作業を宣言する 3. fork リポジトリを用意する 4. fork リポジトリを clone する 5. 日本語記事ページを新規作成する 6. 日本語記事ページを編集する 7. Pull Request を作成する ※ガイドラインに沿って解説します。

• https://mozilla-japan.github.io/mdn-translation-guide/

1. 記事を選定する 翻訳作業を始める初心者の方にお勧めなのは、記事の文章量 が比較的少ない「用語集」ページです。

用語を訳すだけでも翻訳です！

興味のあるページでOK!!!!

2. 作業を宣言する ・翻訳コミュニティでは、日本語翻訳作業用の GitHub リポジトリを用意しています。 ・翻訳作業に関するタスクは、このリポジトリの Issues に記録しています。 ・翻訳作業の対象ページが決まったら、作業内容を 書いた Issue を作成してください。

通常は、新規翻訳になります。

翻訳中の issue （再掲

issue 例

3. リポジトリをフォークする ①. 原文リポジトリ https://github.com/mdn/content （必須） ②. 各言語翻訳リポジトリ https://github.com/mdn/translated-content （必須） ③. サイドバーリポジトリ https://github.com/mdn/yari （適宜）

• https://github.com/mdn/content
• https://github.com/mdn/translated-content
• https://github.com/mdn/yari

3-①. 原文リポジトリ https://github.com/mdn/content

• https://github.com/mdn/content

3-②. 各言語翻訳リポジトリ https://github.com/mdn/translated-content

• https://github.com/mdn/translated-content

4. fork リポジトリを clone する 重要！！！！

content をローカル起動しておく

ローカルサーバー起動後、 原文以外の言語を指定された時に .env パスへアクセスします。

5. 日本語記事ページを新規作成する 例： https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain 原文のディレクトリ位置 ~/work/mdn/content /files/en-us/learn/tools_and_testing/understanding_client-side_tools/introducing_complete_toolchain 翻訳のディレクトリ位置 ~/work/mdn/translated-content/files/en-us/learn/tools_and_testing/ 配下 ※翻訳されていない場合、フォルダとファイルは存在しません

• https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain
• https://github.com/mdn/content
• https://github.com/gurezo/translated-content

mdn/content 内にある原文（英）をフォルダごと mdn/translated-content の 同じディレクトリ位置へコピー

• https://github.com/mdn/content
• https://github.com/mdn/translated-content

原文が追加された時

6. 日本語記事ページを編集する メタデータ部分（Front-matter）の編集 日本語版では、title と slug 以外を削除し、l10n を追加します。 ・tags, translation_of, browser-compat, spec-urls などは全て削除してください。 ・l10n は「エル１０エヌ」です。アイではありません。 ・localization：エルとエヌの間に１０文字あるから、ｌ１０ｎと表記します。

sourceCommit のハッシュ値は、編集作業時点の content リポジトリの当該記事ページのファイル（英語版）の 最新コミットハッシュ値を記述します。 下図の様にリポジトリのリンクから取得することも可能です。

翻訳をしてみる 原文 To solidify what we‘ve learnt so far by working through a complete toolchain case study. Google 翻訳 完全なツールチェーンのケーススタディに取り組むことで、これまでに学んだことを定着させるため。 DeepL 翻訳 完全なツールチェーンのケーススタディを通して、これまで学んだことを固める。 修正文章 ツールチェーンのケーススタディの演習を完了して、これまでに学んだことを確実に理解します。

翻訳作業イメージ（ブラウザ確認） 原文（英語） 翻訳文（日本語）

翻訳作業イメージ（エディタ） ※画像は、VS Code を使用しています（お好みのエディタで作業して下さい）

コミット単位はセクション毎に

7. Pull Request を作成する 例

L10N ガイドラインについて ・Editorial Guideline ・L10N Guideline ・Mozilla L10N Glossary ・日本語の文体 ・Firefox OS Glossary ・SUMO localization guide

• https://github.com/mozilla-japan/translation/wiki/Editorial-Guideline
• https://github.com/mozilla-japan/translation/wiki/L10N-Guideline
• https://github.com/mozilla-japan/translation/wiki/Mozilla-L10N-Glossary
• https://docs.google.com/spreadsheets/d/1y-hC-xMXawCgcYZwJDnvuSlAOTgMRLLyqXurpYkJbYE/htmlview
• https://github.com/mozilla-japan/translation/wiki/Firefox-OS-Glossary
• https://github.com/mozilla-japan/translation/wiki/SUMO-localization-guide

よくある指摘例

Pull Request 例

マージされると・・・？！全世界に公開されます！

おまけ① https://github.com/mdn/yari について このリポジトリのみ コミットに GPG 署名が必要です

• https://github.com/mdn/yari

翻訳対象は、「LearnSidebar.ejs」 辞書ファイル的な存在で、左辺キー：右辺翻訳

通常は翻訳ページのタイトルがサイドバーに 反映されます。

現状サイドバー直下のタイトルだけは、 https://github.com/mdn/yari 上記リポジトリを翻訳する必要があります。 ※GPG署名が必要

• https://github.com/mdn/yari

サイドバー翻訳は必須ではないので通常は気に する必要はないです。 ※別 issue での作業もOKです。 参考程度に覚えておいてください。

その時のメモと PR https://lifewood.hatenablog.com/entry/2022/08/24/223159 https://github.com/mdn/yari/pull/6757

• https://lifewood.hatenablog.com/entry/2022/08/24/223159
• https://github.com/mdn/yari/pull/6757

おまけ② MDN では、SPA に関するページもあります。 Angular, Ember, React, Vue, Svelte

皆さんも翻訳にチャレンジしてみませんか？（提案

次回は、【第63回】2023年11月11日(土)に開催します！ ご興味のある方、お待ち申し上げます！（勧誘

mozilla-japan/translation slack mdn/content twitter mdn/translated-content Discord

まとめ ほんやくできるよ、にんげんだもの ぐれを

ご静聴ありがとうございました！