p5js web editorに日本語を加えた話

これはProcessing Advent Calendar 2020の5日目の記事です。

先月、p5js-web-editorに送ったPRがdevelopにマージされて、リリースされたのでその一連の流れについてご紹介したいと思います。
https://editor.p5js.org/

うぉおおああ！p5.js ウェブエディタの日本語化キタぁあ！！！https://t.co/mBOEK7UxYG pic.twitter.com/gDLZCQUd7S

— takawo shunsuke (@takawo) November 20, 2020

きっかけ

内容に入る前に、きっかけについて少しだけ触れておきたいと思います。
きっかけは、p5jsのTwitterアカウントからのスペイン語リリースのTweetの中にITP時代の友達の名前があり、
該当のGitHubのPRを軽く確認した感じ、i18nのセットアップは終わっているので単純にjsonに記載されているアイテムを翻訳して、ReactのコンポーネントのDropdownメニューにlinkを追加する作業で済みそうな感じでした。
開発環境はDockerも用意されているので、セットアップ自体も簡単な印象を受けました。
正直、この時点ではやるかどうか迷っていたんですが、たまたまIssueにKorean Translationに上がっていたのを見て、すぐにIssueを上げました。ITP時代に韓国人の友達と話すとMedia Artへの理解とか環境で日本って結構behindだなぁと感じていたことが大きい気がします。ちなみ、Issueあげていた方は全く知らない方ですw
あとは、夏にml5jsのサイトについて友達にサイトを多言語する予定あるのか聞いたら、i18n使いたいみたいな話があったので、予行練習という意味合いもあります。

環境セットアップ

先述したように、環境のセットアップは用意されている、Docker composeを使うことで10分位で完了しました。
https://github.com/processing/p5.js-web-editor/blob/develop/developer_docs/installation.md#docker-installation

合わせて、翻訳についてのガイドもあったので、それを参考に変更する必要があるファイルとi18n関連の情報を確認しました。
https://github.com/processing/p5.js-web-editor/blob/develop/developer_docs/translations.md

ちなみ、翻訳作業の中で、ドキュメントで言及されていない事が幾つか会って、このガイドにもPRを2回ほど送りました。
一つは.envの設定（一連の作業の中で唯一詰まったところ）
もう一つは具体的に変更が必要なjsファイルとそのサンプルコード

翻訳作業

メインの翻訳作業なんですが、正直当初想定していたよりは作業的には重かったです。

コードの変更自体は恐らく、20行くらいだったと思います。
i18n.jsに日本語用の変数を追加して、DropdownのReact componentに日本語メニューを加えるという非常に単純な作業でした。

翻訳の不整合

一人でやっているので、翻訳の整合性が取れないということはないだろうと思っていたんですが、割と不整合が発生していて、
この修正には@naoto_hieda,　@deconbatch,　@sugi2000, @takawo, @PCD_Tokyoに助けて頂きました。

例えば、下さいとくださいが混在していたり、eメールとEメールみたいなの結構ありました。

翻訳自体が難しいケース

訳が硬すぎる

自分自身は今NYにいることやwebアプリケーションは基本英語のUI使うので、元の英語のファイルが言及している内容は理解できるんですが、それを日本語に訳すとこんな日本語は日本のwebアプリケーションでも見たことない。。。みたいな事がそこそこあってこれは結構頭悩ませました。
例えば、descriptionです。素直に訳せば、記述とか説明書なんですが、その前後の文章とのバランス、想定されるユーザーとかを考えると果たして、それでいいのかみたいな葛藤があって、結構時間使いました。

英単語の翻訳だけでは意味が通じない

これも数ケースあったのですが、英語だと単語一語だけでも十分何を言っているのか意味が通じるんですが、日本語訳するとそれだけだと？？？で表示の関係である程度スペースに制限があるなかで、説明に必要な日本語を加えるのは結構いい勉強になりました。

どこまで翻訳すれば

これは日常生活とかでも、時々悩むんですが、日本って結構英単語を日常会話で使う事が多いので、翻訳した方が良いのか、それとも単純に音だけをカタカナにする方が良いのかみたいなケースが幾つかありました。
その最たる例はshareでした、日本語だと共有するですが、ソーシャルメディアの利用が一般的になっている昨今では結構、シェアとそのまま英単語を使うケースも人も多く、ローカライズされている大手サイトを幾つか調べても、統一されていないため、どっちが良いのだろうかと悩みました。今回はGitHub上で意見を聞いた上で、日本語訳という事に重きをおいて、共有で行くことにしました。

そのほかは、プレビュー、クリア、コンソール etc.

なので、もしかしたらどこかの時点でスイッチする可能性はあるのかなと思っています。
もし、この記事をご覧になった方で意見があれば、伺えると幸いです。

そもそも一般的ではない英単語

これはlintだけの話なんですが、NYに来てから、技術関連の会話以外で単語を聞いた事ない上に、日本でも開発チーム内で使うくらいなので、扱いどうするべきか悩みました。最終的には自分がITPでRessearcherやってた時に学生にlintを使った時に返ってきた"You、何言ってんの"という反応と、p5js自体がプログラミング教育に重きをおいている点を考慮して、リントを採用しました。

まとめ

軽い気持ちで始めた割には、結構パワー使ったなぁというのが率直な感想です。
ただ、i18nの使い方の概要が掴めたのは良かったと思います。あとは、ITPにいた時に何らかの形でProcessingコミュニティに貢献したいなぁと思っていたで、非常に小さな貢献ですが、目に見えるものが出せたのは素直に嬉しいです。
ITP時代にアドバイザーだったDan Shiffmanにはちょくちょく、貢献の最初の１歩は何が良いのかなみたいなことを聞きに言ってたのでw。まぁ、今更感はありますが。
日本語UIが使えることになったことで、ちょっと試してみようと思う人が出てきて、日本におけるMedia artに対する認知度とかが上がって、多くの素晴らしいアーティストの人がフォーカスされるようになったらなぁと思いますw

余談ですが、分量が多かったため、いつの間にか自分よりよっぽど貢献している人たちや友人達をごぼう抜きして、Contributorsに自分のアイコンが表示されるようになりました。

ml5jsに関しては完全に止まっているので、今回の経験を応用してi18nのセットアップとかを年末年始に試せたらなぁと。

GitHub
https://github.com/koji

Twitter
https://twitter.com/koji_kanao