アノテーション事情部情シスの原田です。
ここ最近はノーコードであれこれ作成して、その開発スピードに毎回感動しています。
ご存知の通り、Google AppSheetは、ノーコードでデータ操作やワークフローの自動化など便利なツールとして注目されています。
ただ、アプリの利便性だけでなく、UIも同等に使いやすいものにするのが重要です。
現状、Google AppSheetのアプリを操作するユーザー側から見ると全て英語表記になっています。
英語に強い人であれば問題がないかもしれませんが、ユーザーに分かりやすい表示が用意されているのが良いアプリです。
そういう私も英語は苦手で、少し知らない単語が出ると手が止まることもあります。
そこで今回はGoogle App Sheetの操作時メッセージを日本語化できないかを試してみました。
利用するアプリ
今回は、サンプルとして別記事で作成したメンバー管理アプリを利用します。
GoogleAppSheetでスプレッドシートの課題をクリアするアプリを作成してみました
このアプリはメンバーの追加や編集など、CRUD（Create, Read, Update, Delete）機能に焦点を当てたものです。
操作時の英語表記を確認してみる
操作した時にどのようなメッセージが表示されるかを確認してみます。
まずAddから登録フォームを開いてみます。
操作時の「Save」、「Cancel」はさすがに分かりますが、赤字の「This entry is required 」という意味は瞬間的には分からず、翻訳すると「この入力は必須です」という意味です。
また、フォームを途中まで入力し「Cancel」ボタンをクリックした場合、以下のメッセージがポップアップに出力されます。
「Discard changes?」は「変更の破棄」という意味ですが、他も全てのメッセージが英語です。これではユーザーは一度頭の中で翻訳するなり、私みたいに英語が苦手な人は調べる必要が出てきます。
もちろん、海外の方も利用する、英語の表示が理解しやすいという方もいるでしょうから、今回は英語と日本語の2か国語に対応するアプリに挑戦してみます。
AppSheetアプリのコピーを行う
2か国対応となると通常のアプリ制作ではそれなりの工数が必要になってきますが、AppSheetではアプリをコピーし少し設定を変更するだけで英語版と日本語版をそれぞれ存在させることができます。
Google AppSheetにサインインするとMy App一覧から該当アプリの3点リーダーから「Copy」を選択します。
アプリ名をここでは「メンバー管理（英語版）」とし、Make a copy of the data for the new app と Make a copy of file data (eg: images) for the new app をoffにして「Copy App」をクリックするとコピーアプリが作成されます。
今回は10秒ほどで作成されましたが、環境やデータ量によってはしばらく待つ必要があります。
この2つをoffにするとコピー元のスプレッドシートを参照し、英語版・日本語版のどちらのアプリからでも同じスプレッドシートにアクセスします。
これをonのままコピーするとスプレッドシート自体もコピーされ違うファイルを参照するので注意が必要です。
スプレッドシートがコピーされた場合、google drive の appsheet > data > コピーしたアプリフォルダ 内に作成されます。間違えた場合は、アプリを削除してコピーし直した方が早いですが、参照するAppSheetのdataをコピー元のスプレッドシートを指定することでも解決できます。
それでは、同じスプレッドシートを参照しているかを確認するため、それぞれのアプリにサンプルレコードを追加してみます。
まずコピーした英語版からサンプルデータを以下の内容で追加してみます。（コピーしただけなので、見た目は同じですが違うアプリでそれぞれ入力しています。）
次にコピー元の日本語版からサンプリデータを入力してみます。
同じスプレッドシートに反映されているかを確認してみます。
22行目と23行目に別々に追加した2件のレコードが同じシートに反映されているので、問題はなさそうです。
英語版をつくる
AppSheetはデフォルトで英語表記になっている部分が大半ですが、今回は参照しているスプレッドシートのカラムが日本語のままです。
フォームにはそのまま、カラム名が反映されるため英語に直す必要があります。下記の部分を修正していきます。
AppSheet data画面の該当カラム横にある 「DISPLAY NAME」 に表記する単語を設定していきます。
レコードの値そのものに関しては情報登録時に英字用のカラムやプルダウン選択肢などは場面によって設定してください。今回は種別に「社員（employee）」を加えました。
次にUI側に表示されるView名も同じく英語表記を行います。こちらは左のメニューViewsから該当するものをView name を変更するだけです。
それでは反映された結果を確認してみます。
カラム表記が全て英語で反映されたことが確認できたので、英語版はこれで完成です。
日本語版をつくる
次に日本語版を作成していきます。
コピー元のアプリを開き、左メニューにある Setting > Views > Localization を選択します。
「Customize System Text」 が表示され、こちらから変更したいメッセージを選びます。項目が110前後あり、探しにくい場合はページ内検索することをおすすめします。
今回は上記で記載したフォームとポップアップのメッセージを日本語化したいと思います。
まず、フォームにある「This entry is required 」を日本語訳「この入力は必須です」と設定します。
次にポップアップの「Discard changes?」「Any edits will be lost」を続けて変更し、アプリをSAVEします。
それではアプリのフォームを開き、日本語表記に変更されているかを確認します。
Cancel時のポップアップ
変更した部分は全て日本語化されました。
他も同様に、例えばSaveボタンやCancelボタンなども変更が可能です。
アプリ名も今回は「メンバー管理（英語版）」としましたが、「MemberList」のようにアプリ名を書き換えるだけで表示変更することができます。
まとめ
今回は、アプリをコピーして2つの言語対応をしてみました。
AppSheetで用意されている英語表記メッセージを日本語化の設定をすれば、ユーザーは迷うことがなく操作できるようになりそうです。
作成時にAppSheetの機能を中心に考えてしまいがちではありますが、想定されるユーザーの視点も大切だと再度考える機会になりました。
アノテーション株式会社について
アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。
4
