107回目 SayoDeviceの専用割当ソフトSetting v2を日本語化してみよう
日本語であれば使いやすい
「SayoDeviceをいざ手に入れてみたけど、設定方法がわからん」
という方は多いのかと思います。
SayoDeviceとは、いわゆる「OSU！」というリズムゲームで遊ぶために作られたゲーミングキーボードであり、特徴としてはキー数が2キーや4キーしかないキーボードなのです。
「OSU！」というゲームがどういったものなのかは僕は知らないのですが、SayoDeviceなどのキーボードには、いろいろなキー値を割り当てることが可能な専用割当ソフトが存在しています。
その専用ソフトで好きなキー値を割り当てて、「OSU!」のリズムゲームで表示されたAやらEやら0やらなどのキー値をリズムに合わせて文字を入力するのかな、と思っています。
その中でも僕が使っているSayoDeviceには、「Setting v2」という好きなキー値をキーボードへ割り当てるためのソフトウェアがあります。
ここで言う好きなキー割り当てとは、「Ctrl+ C:コピー」「Ctrl + V :ペースト」等といったショートカットキー操作も含まれます。
SayoDeviceを購入して手に入れた良いものの、キー割り当てが出来ない場合は初期設定として工場出荷時の状態である、0,1,2,3,4,5,6...などのキー値のままで使用することになってしまいます。
数値番号だけを入力するためだけのキーボードであれば、外付けテンキーを買えば良いという話になってしまいますよね。
SayoDeviceは好きなキー値をソフトウェアを使って自由に割り当てることができるプログラマブルキーボードなのです。
そして今回は、要望の多かったSayoDevice専用キーアサインソフト「『Setting v2』 UIをデフォルトで日本語化表示」について書いていきます。
待ち望んでいた人も多かったと思いますので、ズラズラと説明していきます。(設定方法は難易度高めデス)
◯Setting v2の表示を日本語化する方法
SayoDeviceのキー割当設定を行うソフトの正確な名前は、「Sayo_CLI_Windows」というソフト名です。
僕はWindows環境なので、上の画像の赤下線が引いてあるソフトをクリックして起動します。
通常、この画面では日本語化設定をしていないと↓以下のような状態です。
感覚的にはなんとなく操作していけるとは思うのですが、日本人ユーザーからしたら読めそうで読めない漢字が表示されてしまっているので使うのには躊躇してしまいますよね。
それなので、ここの表示を日本語化設定していこうということです。
ちなみに、僕のPCでは
・通常言語表示（初期状態のまま）のSayo_CLI_Windows
が両方とも保有している状態です。
通常の状態ではこの日本語表示はありません。
通常は[中文]もしくは[English]でしか表示の切り替えはできません。
それなので、ここの表示を日本語にできる設定について紹介していきます。
◯Sayo_CLI_Windowsの画面を日本語化表示する
まず、この設定は公式の方法ではなく、このブログにコメントを下さったぐれたそさん（Twitterアカウント→@Gretel_net）が作ってくれた「htmlコードを自分で編集する」という方法を使います。
↓この記事に対してコメントをしてくださいました。感謝です！m(_ _)m
そして、日本語化するためのやり方がGithubにて公開されています。
https://gist.github.com/gretchi/3b844a834301f614c9f00f0791ee325e
↑上記リンクからGithubのページへアクセスすることができます。
↓以下リンク先Githubのキャプチャ画像
日本語化の適用方法は、「中国語のプロファイルを上書きする方法」と「ちゃんと日本語（jaの言語）として追加する方法」があるということらしいです。
実際のところ、後者のやり方をしたほうが確実です。
僕はこのREADME.mdファイルの記述にあるとおり、「日本語として追加する方法」の方を設定しました。
●日本語化設定できるようにプロファイル ja.jsonをダウンロードする
ということで、日本語化設定できるようにまずはGithubリンク先ページからコードをダウンロードしてみましょう。
リンク先ページからコードをZIP形式でダウンロードすることができます。
ダウンロードしたらファイルを解凍ソフトなどを使用して解凍、フォルダを展開してください。
すると、この以下のような感じでフォルダが展開されます。
中身は
・ja.json
・README.md
のソースファイルが格納されています。
これで、日本語訳されているファイルを手に入れることができました。
次にSetting v2の方を編集していくので、まだSetting v2が手元に無い人はブラウザのリンクに
https://dl.sayobot.cn/setting_v2.zip
と打ち込んでダウンロードしてください。（というか↑のリンクをクリックすれば直接ダウンロードできます）
そして、次にプログラムコードの編集作業に移っていきます。
自分がよく使っているテキストエディタソフトなどを用意しておいてください。
そんな物は持っていないし使ったこともない、
という人は↓以下のエディタソフトを使用することがおすすめです。
リンクからエディタソフトのダウンロードページに移動できます。
・Notepad++
これらテキストエディタソフトを使っていきますので、作業前に自分の使っているPCにソフトをインストールしておきましょう。
●Setting v2 内のhtmlフォルダのソースコードを編集していく
ここからの作業は少し難しいと思う方が多いかと思います…。
Setting v2のフォルダの中を開いてみると、「Sayo_CLI_〇〇」系の実行ファイルの他に、「html」というフォルダが入っています。
上の画像で赤下線を引いている「html」のフォルダが今回触っていくものになります。
フォルダをクリックして開いていきましょう。
すると「html」フォルダ内は以下画像のような状態になっています。
ファイルパスは\setting_v2\html\assets
です。
ここで次に「assets」のフォルダを開いていきます。
「assets」内にある「i18n」というフォルダがあります。
ここまでの作業でのファイルパスは
\setting_v2\html\assets\i18n
です。
開いた「i18n」フォルダ内に、先程Githubでダウンロードしてきた日本語化プロファイルの「ja.json」のファイルをコピー、貼り付けなどをしてファイルを入れます。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
ja.jsonを「i18n」のフォルダの中に入れ終わったら、
元々フォルダ内に入っていたzh.jsonファイルをフォルダから削除
しておきましょう。
ここで削除をしておかないと後にエラーを起こしてしまうことがあるので削除をしておく必要があります。
作業フォルダを「i18n」フォルダから「html」フォルダまで戻ります。
フォルダ階層を「html」のフォルダまで戻っていってください。
\setting_v2\html←ｲﾏｺｺ
「html」フォルダ内にある「main.c9f95a8961a52e8819ac.js」というファイルを開き、テキストエディタソフトを使って編集していきます。
どのファイルかよくわからん
という人はindex.htmlのファイルの隣りにある「main.〇〇」というファイルを使うと考えてくれれば結構です。
僕の方ではVisual Studio Codeを使って、このファイルを起動します。
すると、上の画像のような意味不明単語の羅列が表示されると思います。
（集合体恐怖症の人からしたら寒気がしそうですね…）
ここで、大半の人がくじけてしまいそうですが頑張って説明についてきてください。
●README.mbに書いてある手順通りにコードを編集していく
まず、ここで編集するポイントは3箇所あります。
この意味不明な文字の羅列郡の中から適切な箇所を修正することで、Sayo_CLI_Windowsの画面を日本語化表示できるようにします。
そこで、ぐれちさんが用意してくれたGithubからダウンロードしてきた日本語化ファイルに付属しているREADME.mbファイルの内容を見ながら編集作業をしていきます。
ここに書いてあるとおりに、コード内の3箇所を加筆修正をしていきます。
・Step1
< return ["zh", "en"].includes(t) ? t : "en"
---
> return ["ja", "zh", "en"].includes(t) ? t : "en"
return["zh","en"].includes(t) ? t : "en"
↑この文字列を、「main.c9f95a8961a52e8819ac.js」ファイルの大量の文字列群から探し出して"ja"の文字を追加していきます。
ただ、この文字が大量の文字列群の中でどこにあるのか見つけ出すのは難しいと思います。
そこで、エディタ画面上でCtrl + Fキーのショートカットキーで検索窓を開きましょう。
Ctrl + F :「検索」のショートカットキー
ここに検索したい文字列を入力することで、ファイルの文字列内で該当する文字列を見つけ出すことができます。
今回検索する文字列は、
return["zh","en"].includes(t) ? t : "en"
なので、「return["z」の文字で検索をかけます。
すると、大量の文字列群の中で該当する箇所がヒットするはずです。
見つけ出した箇所を、
return["zh","en"] から return["ja","zh","en"]
のように変更しておきます。
これでStep1の編集は完了です。
・Step2
key: "ja",
> value: "日本語"
Step1同様README.mbに書いてあるとおりに作業を進めていきます。
検索窓に今度は「key:"」と入力します。
そうすると52件ほどの文字列がヒットするはずです。
52件を虱潰しにすべて確認していっても良いのですが、僕の方で修正箇所についてここに書いておきます。
エディタ画面ではソフトの右端下に、カーソルの現在位置が表示されます。
修正箇所の場所は、列739339の{key:"en",value:"English"}]の箇所です。
ここの"en"と"English"の文字を修正していきます。
README.mbには
> key: "ja",
> value: "日本語"
と書いてあるので、
↑上の画像のように"en"を"ja"に、”English”を"日本語"の文字に変えていきます。
これでStep2の編集作業が完了です。
・Step3
< defaultLanguage: "zh"
---
> defaultLanguage: "ja"
「main.c9f95a8961a52e8819ac.js」のファイル内で、
defaultLanguage: "zh"
の文字を探して修正します。
ここでも使うのは、Ctrl + Fの検索窓です。
検索窓に「defaultLanguage:」と入力してファイル内を検索します。
すると該当箇所は1件のみ発見することができるので、見つかった箇所がハイライトされて表示されると思います。
ここのハイライトされて表示されている、
「defaultLanguage:"zh"」の文字を「defaultLanguage:"ja"」の文字に変更します。
簡単に言えば、"zh"の文字を"ja"に変更するだけの作業です。
defaultLanguage:"ja"に変更し終わったらファイルを上書き保存しましょう。
これで３ステップを終わることができました！
ついに、Sayo_CLI_WindowsのUI画面を日本語化することができます❗
◯日本語化表示されたSayo_CLI_Windowsの画面
これでSayo_CLI_Windowsの画面を起動すると、↑上の画像のように無事日本語化表示されると思います。
しかし、手順を間違えてしまったりすると、日本語化がうまく反映されずSayo_CLI_Windowsが起動せずエラーを起こすことがあります。
そういったときは、再び作業をし直す必要があります。
この場合、作業途中のものをもう一度いじくり直すのではなく、新しいSetting v2をダウンロードしてきてからこれまで説明してきた日本語化の作業をしていってください。
↓ここにSetting v2の直ダウンロードリンクを再度貼っておきます。
https://dl.sayobot.cn/setting_v2.zip
作業に慣れていないと、どこを間違えてしまったのかを個人で判断するのは難しいかと思います。
そのため、自分でミスしたところをやり直すよりかは、新しく設定し直したほうが早いからです。
↓うまく日本語化が出来なかった人向けの確認ポイント
- 「i18n」フォルダ内は「en.json」と「ja.json」の２つのファイルのみであるか
- 編集ファイル「main.c9f95a8961a52e8819ac.js」を、README.mbの記述どおりにきちんと３箇所修正できているか
１と２、それぞれ詳しく説明すると、
1.「i18n」フォルダ内は「en.json」と「ja.json」の２つのファイルのみであるか
まずうまくいかなかった場合の原因として「i18n」のフォルダ内が
en.jsonとja.jsonという形になっていない場合です。
これは、たとえば「i18n」フォルダ内にもとから格納されているzh.jsonを残したまま「main.c9f95a8961a52e8819ac.js」を編集してしまうと起こってしまうエラーです。
main.c9f95a8961a52e8819ac.jsのコード内で参照するファイルがうまく参照できずにエラーを吐いてしまうからです。
新しくSetting v2をダウンロードして作業をし直す人は、まずここを注意して作業をおこなっていってください。
2.編集ファイル「main.c9f95a8961a52e8819ac.js」を、README.mbの記述どおりにきちんと３箇所修正できているか
こちらは、作業に慣れてしまえばすぐに修正していけると思います。
エディタ画面の検索窓に「zh」とだけ入力してください。
すると編集前状態では、２件のみヒットするとはずです。
検索窓の右端には「↑」「↓」が表示されており、ここをクリックすることで検索結果の文字列へ瞬時に移動することができます。
zhで検索すると２件のみヒットするので1/2の場所を見てみましょう。
Step1の作業箇所である、
return ["zh", "en"].includes(t) ? t : "en"
の行まで矢印で飛ぶことができます。
ここの[ ]内の先頭に"ja"の文字を入力して追加すればいいだけです。
次に2/2の検索結果の場所へ矢印を使って移動しましょう。
Step2の編集箇所の近くまで飛ぶことができます。
ここの"en"と"English"の文字をそれぞれ"ja"と"日本語"に変更してあげましょう。
また、編集前の状態では検索窓にzhを入力した場合は３件結果がヒットするはずです。
３件目に矢印を使って移動すると、、、
Step3のdefaultLanguageの修正箇所である"zh"まで移動することができます。
ここの"zh"の文字を"ja"に変更しましょう。
そうすることで、これまで説明してきた流れを少しだけ早く作業をしていくことができます。
検索窓が有能すぎる。。。
修正し終えたら上書き保存をして、エディタ画面を閉じてしまいましょう。
そうして、Sayo_CLI_Windowsの実行ソフトをクリックして起動すると…
このように日本語化されたSayo_CLI_Windowsの画面を開くことができます。
この方法でもエラーが出てうまく日本語化できなかった人は、この記事のコメント欄二お願いします。できる限り答えていきますので。
◯いつのまにかブラウザ上でできるようになったSayoDeviceのキー割当
僕が知らない間に、いつのまにやらSayoDeviceはブラウザページ上でキーアサインの設定ができるようになっていたらしいです。
↑上記のリンクでキー割当がブラウザページ上で出来るようになっています。
Setting v2と違うのは、こちらの場合だとオンライン上で設定をしていくという形になります。
Setting v2のSayo_CLI_Windowsを使った場合ですと、スタンドアロンの状態でキー割当ができるのでWebページ上で済ませたい方はこちらを使ってもいいかと思います。
しかしながら、日本語ではありませんので注意してください。（ブラウザの拡張機能などでページ翻訳すればどうにかなるけど…）
日本語化済みSetting v2の場合では、Sayo_CLI_Windows開けばページ翻訳などをせずとも毎回日本語化表示のままで使えます。
その点ではWebページ版のSayoDeviceキー割当よりもSetting v2を日本語化設定をおこなってから使っていったほうが良いのかもしれない、、、。
ただこれはPCを使った作業ですので、スマホやタブレットでSayoDeviceへキー割当作業したい場合には、上に貼ったWebページ版のキー割り当てのほうが良いのかなぁなんて思いました。
ってなわけで、今回はSetting v2の日本語化作業についてズラズラ書いてきました。
プログラムコードをいじったことがない人からしたら、少し難しく感じられる作業かもしれませんが、
ここを頑張ればいつでも日本語化表示の状態のSayo_CLI_Windowsのキー割当画面を使っていくことができますよ。
ここでみなさん不思議に思いませんか、
「僕が日本語化設定を済ませているSetting v2をブログで配布すれば良いんじゃないか」って…😈
しかしながら、ここらへんはかなりグレーと言いますか、
ここで日本語化済みのSetting v2を配布してしまうと著作権的なものに引っかかってしまう恐れがあるので、敢えて配布という形は今回は行いませんでした。
ここまで読んでくれた方ならきっと、手順通りに間違えずに作業を行えば自分でSetting v2を日本語化することが出来ると思います。
また、今回の作業でコードに触れることによって少しPC関係に強くなれるというかプログラマーな世界に足を突っ込んでいけるかと思いますよ。
日本語化プロファイルを作ってくださいました、ぐれたそさんに感謝です！
ぐれちさんのTwitterアカウントは@Gretel_ioです。感謝の意を込めてこの記事を読んでくれたみなさんもTwiterアカウントをフォローしましょう。
また、僕の方でも今後ともSayoDevice関係の記事は書いていきます。
紹介したいガジェットやらパソコンネタはたくさんありますので…。
それでは今回はこんな形で終わりたいと思います。
また次回で。
ばいなら。
記事への要望や質問などがございましたら是非コメント欄にお願いします。
↓過去に書いたSayoDevice関連の記事は以下のこちらからどうぞ。
