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

396 Views

October 26, 23

スライド概要

MDN Web Docs の歴史や翻訳手順を紹介します。

profile-image

フリーランスプログラマです。 Angular, CHIRIMEN Open Hardware, MDN Web Doc 推しの人です。

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

4.

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

5.

What is MDN Web Docs?

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

Q どうすれば良いか? (意訳:翻訳出来るの?)

14.

A 文明の利器(翻訳ソフト)を使おう!

15.

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

16.

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

17.

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

18.

Mozilla Japan コミュニティに参加しよう! (推奨)

19.

翻訳ガイドを見てみよう!(必須)

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

翻訳中の issue (再掲

34.

issue 例

35.

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

36.

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

37.

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

38.

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

39.

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

40.

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

41.

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/ 配下 ※翻訳されていない場合、フォルダとファイルは存在しません

42.

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

43.

原文が追加された時

44.

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

45.

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

46.

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

47.

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

48.

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

49.

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

50.

7. Pull Request を作成する 例

52.

よくある指摘例

53.

Pull Request 例

54.

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

55.

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

56.

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

57.

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

58.

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

59.

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

60.

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

61.

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

62.

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

63.

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

64.

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

65.

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

66.

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