(4)RaspberryPiとタッチディスプレイで自動起動LocalUIFlowサーバーを作る - 言語ファイルを編集して教育用に改変
LocalUIFlowの言語ファイルの差し替え
さて、LocalUIFlowを構築する上で、参考にさせて頂いてる武藤武士氏のサイトでは、LocalUIFlowの翻訳にも言及されています。
武藤氏本人が、M5Stack社のCEOJimmyさんに翻訳させてくれ！と掛け合って、翻訳ファイルをGithubで公開する運びとなったようです。
（私が公立中学の教諭ということもあって）英語に抵抗感のある日本の中学生への教育用に考えたときに日本語UIに切り替えられるUIFlowは、もちろん素晴らしいわけですが、英語のままだったり「ここがこういう翻訳だったらいいな」という翻訳の部分があったりと、ちょっとローカライズに難点に感じる部分もあります。
日本語だったら説明いらないのに、英語なばかりに説明が必要だったり、プログラム初心者にはその用語でないほうが伝わるのでは？みたいなものです。
そこへ来て、「LocalUIFlowの翻訳ファイルの入れかえ」とな……？
というわけで
日本語言語ファイルをいじって、単なる日本語へのローカライズだけではなく、初学者向けへの改変をさせてもらいました。以下に一例を挙げます。(LocalUIFlowはv1.13.4、公式UIFlowはv1.13.6です)
まずはM5StickC Plusの「電源」ブロック。
公式では「Get battery percentage」が英語表記のままでした。
それを、日本語化しています。これは、正規のローカライズっぽいですね。
単純なことではありますが、「英語が混ざっている」だけで抵抗感のある生徒はいます。もちろん、個人的には、プログラミングをちゃんとやっていくには、テキストプログラミングこそが重要だと思っていて、英語でのプログラミングは避けて通れないとは思っています。ただ、学習段階にある中学生にプログラミングに対して興味を持たせるにはブロックプログラミングは有効だと思ってもいます。でも、「何が書いてあるか、ぱっと見で、分からない」というのはよくありません。少しでも心理的なハードルを下げる必要があります。
実は、こういうのも気になってました。
「接続済み」や、「接続中」が日本語化されているのに、「Disconnected」だけ英語のままだったりしたのです。自分が使用する分にはいいのですが、中学生にはあまり優しい表記とはいえません。
これは少し迷いました。
というのは、if - else文や、if - else if 文など、基本的なプログラミングの考え方からいって、「 if とか else というのは押さえておくべきだろう」と思ったからです。設定を出したときの、もとの表記が if や else なのもそういう意図なのかな、と思ってはいますが、ブロックそのものが「もし」「そうでなければ」「そうでなくもし」なので、elseを追加すると「そうでなければ」が入ったり、else ifで「そうでなくもし」がブロック的に追加されるのは「直感には反すかな……」と思いました。その意味で、どちらかに統一したかったのですが、完全に日本語化するとif - else文的な要素が消えるので、括弧書きで残してあります。多少冗長的ですが、教育用にはいいかな、と思っています。自分なら、もし、完全な子供用にするなら括弧なしの完全な日本語にすると思います。
同様にswitch-case文も悩みました。micro:bitのMakeCodeを参考にしようと思って見に行きましたが、switch-case文はありませんでした。
たしかに、switch-caseはswitch-caseとしか言えなさそうではあります。
ですから、ちょっと機能面から直訳気味の訳にはなっていますが、日本語にしてみました。
true、falseも、真、偽にしようかな、とも思っていましたが、そこは、そのままにしてあります。プログラミング的にtrue、falseは慣れておいた方がいいかな、というのと、true、falseはそこら中で使われるので、UIFlowのいじれない部分でtrue、falseが残ると表記が揺れて、分かりにくくなってしまいそうだな、と思ったのと２つです。nullもそのまま。
ちなみに、翻訳ファイルからはどうしても見当たらなかったのがこれです。いくつか、翻訳ファイル上には無いブロックがあり、そこは手を付けられていません。
さて、実は言語ファイルの入れ替えでは対応できない部分があります。
それが……
これです。
ただ、Webアプリの原理から言って、画像ファイルを読んでいるはずだということで、画像ファイルを探しました。
そして、見つけた（ちなみに、場所は、「{LocalUIFlowの保存フォルダ}/bin/webview/assets/images」でした）ので、画像ファイルをレタッチし、差し替えたら、日本語化できました。それが、これです。
デザイン的には公式と比べると、超野暮ったい！（笑）
けど、まぁ、分かりやすくはなったとは思います。特に、「Label」を追加するとUIブロックに「ラベル」が追加される、辺りは違和感を持ちにくくなりました。あと、個人的には「BarGraph」だと「棒グラフ」感が否めないので、「メーター」に変えました。「棒グラフ」だと「グラフ(ChartGraph)」の「Chart Type」を「Bar」にした方を想像しちゃうので、機能面から言って、BarGraphは思い切ってメーターに変えました。ただ、細かいことを言うと、オブジェクト名は変わらないので、そこは残念な感じがします。（公式も、Graphを追加するとUIにChartGraphが追加されて、オブジェクト名はgraph0とかなので、統一はされてないのだけれど…）
変更方法
さて、私のやった、具体的な変更方法です。実質的に同じことができれば別にこのやり方でなくてもOKだと思います。
基本、作業環境がWindowsなので、
Windows版LocalUIFlowで変更
Windows版LocalUIFlowで反映させて動作確認
RaspberryPi 4ローカルサーバー上の同じ階層にコピー
の手順でやっています。
なお、テキストエディタはTeraPadを使ってますが、何でもよいと思います。
i)．Githubからダウンロードした、翻訳作業用ファイルを編集
ii)．翻訳作業用ファイルを上書き保存
iii)．置換で、「改行(¥n)」を「何もなし」に置換→全て置換
iv)．名前をつけて保存で、「{LocalUIFlowの保存フォルダ}/bin/webview/assets/blockly/langage」に保存
v)．LocalUIFlowのページを再読み込み（反映されない場合、ブラウザのキャッシュをクリア）
vi)．RaspberryPi 4ローカルサーバー上の同じ階層にコピー
最後に
ちなみに、このファイルをコミットするのは、「日本語」の言語ファイルに対する変更になってしまうので、しません（というかできません）。
また、完全に全て翻訳しているわけでもない、自分が授業で使う用のデータになるので、言語ファイルも公開しないつもりでいます。
……が、もし欲しい、という方がいれば相談には乗りたいと思います。
まぁ、自分で作っちゃった方が、自分の思い通りにはなるかもしれません。