こんにちは！肉球です🐶
最近近所にフルーツサンド屋さんができて仕事の合間に買いに行ってみたんですが、フルーツサンドよりもアフォガードが美味しかったです。そこのお店のエスプレッソがね、めちゃくちゃ美味でした。
そうそう、商品待ちしてるときにメニューだったりカウンター周りだったり観察してたら、英語、中国語、韓国語の翻訳もあって親切だな～なんて思ったんですよ。

そして仕事に戻ったときにふと考えました。AppSheetのアプリも他の言語に切り替えられたりしたらユーザーとしては嬉しいのでは？
ということで、今日は誰でも簡単に作れる多言語対応アプリの作成方法についてシェアしていきたいと思います！

多言語対応アプリを作ろう！

アプリ概要

AppSheetの言語設定はデフォルトで英語になっていますが、今回作るアプリは、メニュー画面のSettingsで言語を変えるというシンプルなものです。具体的には日本語、英語、中国語、フランス語の４つの言語に対応した、従業員リストを想定して作っていきます。

言語の切り替えができると、表示される項目名だけでなく細々としたアプリ内の言葉が設定された言語になるので、ユーザーとしてアプリがより使いやすくなり、言語に統一感が生まれるので見た目もきれいになります。
グローバルな職場ではもちろん、英語が苦手～とかしゃべれるけど読み書きは苦手～という方でも使えるアプリです。

このアプリのポイントとして、

• User SettingでLanguage Optionを表示させる

• SWITCH関数を各項目＋Localizationに設定する

ざっくりこの二点が挙げられるかな～と思います。

ではいってみよ～。

作成手順

このアプリでは以下のテーブルを用意します。

• 従業員テーブル

• 翻訳テーブル

従業員テーブルは簡易なものでOKです。

そして翻訳テーブルの方に、このアプリ内で使用する単語を書き出して、各言語に翻訳しておきます。
テーブルは以下の通りで、FUNCTION_MEMO列は後ほど使うSWITCH関数のメモなのであってもなくてもよいです。
私はLocalizationにも後々入力することを考慮して、いざ使うときにパッと探せてコピペで済むようにこの列を作りました。

ではここから具体的な説明をしていきます。
開発画面はimproved editorを使用しています。

まずはUser settingsから設定していいきましょう。
User Settingsでは、ユーザー設定用の項目が作成できます。
アプリ使用時にユーザーがこの項目に値を入力することで、アプリの動作をユーザーごとに制御することができます。
なお、入力した値はクラウドではなくデバイスに保存されるため、設定値が他のデバイスを使用するユーザーに影響することはありません。

User Settingsの設定は、メニューバーのDataを開いた状態で下部のOPTIONSにあるUser settingsをクリックします。
ここでアプリのSettingsの表示設定をします。
デフォルトではすべて非表示になっているので、表示させたい項目のSHOW?にチェックを入れます。今回の場合だと、言語設定なのでLanguage Optionですね。
この設定をすることでSettingsがメニュー画面に表示されるようになります。

Language OptionのEmumには以下の通り、4つの言語を設定しました！これで言語の選択が可能になります。

では次にメニューバーのDataで、従業員テーブル各項目のDISPLAY NAMEにSWITCH関数を設定していきます。
以下はNAMEの列に設定する式です。

SWITCH(
    USERSETTINGS("Language Option"),
    "English", "NAME",
    "Japanese", LOOKUP("NAME", "翻訳", "English", "Japanese"),
    "Chinese", LOOKUP("NAME", "翻訳", "English", "Chinese"),
    "French", LOOKUP("NAME", "翻訳", "English", "French"),
    "NAME"
)

この式を一つ一つ見ていきましょう。

USERSETTINGS("Language Option"):
ユーザーのLanguage Optionを取得します。
"English", "NAME":
Language Optionが "English" の場合に"NAME" というテキストを返します。(デフォルトが英語のためLOOKUPは不要)
"Japanese", LOOKUP("NAME", "翻訳", "English", "Japanese"):
Language Optionが "Japanese" の場合に"NAME" の日本語翻訳を検索して返します。
"Chinese", LOOKUP("NAME", "翻訳", "English", "Chinese"):
Language Optionが "Chinese" の場合に"NAME" の中国語翻訳を検索して返します。
"French", LOOKUP("NAME", "翻訳", "English", "French"):
Language Optionが "French" の場合に"NAME" のフランス語翻訳を検索して返します。
"NAME":
どの条件にも一致しない場合、デフォルトの操作として "NAME" というテキストを返します。

SWITCH関数は条件分岐に使う関数で、以下のような構文で表します。

SWITCH関数についてもっと知りたい方はこちらをどーぞ！

ちなみにLOOKUP関数は値を検索するのに便利な関数です。

LOOKUP(検索キー, 検索対象テーブル, 検索条件列, 戻り値)で表し、上記の式「LOOKUP("NAME", "翻訳", "English", "Japanese")」であれば、次のように解釈できます。

• "NAME"という値を翻訳テーブルのEnglish列から探し、該当する行のJapanese列から値を取得する

LOOKUP関数の詳細はこちらに置いときますね～。

そんなこんなで各項目名に従って同じように関数を設定できたらOKです。
完成まではもう１ステップ必要です。

項目名表記だけ言語が切り替わっても見た目的な部分で微妙な感じしませんか？
例えばこちら。どーん。

これは日本語に設定した場合なんですが、せっかく翻訳するならこういった細かい部分も設定した言語に切り替わると嬉しくないですか？
A型の私としてはなんか気持ち悪いです。設定した言語に統一させたい。
ということで、こんな時に役立つのがLocalization設定です。
ここにもSWITCH関数を入れていきましょう。
メニューバーのSettings＞Views＞Localizationで設定画面に移ります。
すると、AppSheetに出てくる言葉がずら～～～～～っと並んでますので必要な箇所(今回はSaveとCancelの部分)にSWITCH関数を入れます。

冒頭でも書きましたが、デフォルトでは英語表記になるように設定されている状態です。
テキストが入っている部分にDISPLAY NAMEに入れたときと同様のSWITCH関数を入力し、フラスコマークをクリックすることで関数として認識させます。
入力ができたらSaveして、アプリの方を確認してみましょう。

日本語になってますね！
他の言語にした場合も見てみましょう。

項目名だけでなく、アプリ内の表示も各言語に無事切り替わりました。

最後に

今回ご紹介したような多言語に対応したアプリは、私のように英語に苦手意識がある方だけでなく、グローバルな職場にもニーズがあるのではないでしょうか！
メニューのSettingsがデフォルトで非表示になっていたり、普段使用している言語でのアプリ開発が当たり前になっていたりするので意外と盲点になっている気がします。
ぜひ皆さんもお試しあれ。

ではまた次回～。

ソシオネット株式会社について

IT内製化支援、Salesforceの運用・導入、および、DX化推進に関するご相談を承っております。

　弊社では、ノーコード開発ツールを用いたIT内製化支援、Salesforceの運用・導入、および、DX化推進に関するご相談を承っております。お気軽に弊社お問い合わせサイトよりご相談などをお寄せいただければと思います。

ソシオネットHP：http://www.socionet.co.jp/
IT内製化支援サービス：https://socionet.co.jp/insourcing-support-service/
Salesforce最適化支援サービス：https://socionet.co.jp/salesforce-service/
DXサポーターズ特設サイト：https://socionet.co.jp/dx-supporters/
お問い合わせ：https://socionet.co.jp/contact/

AppSheet勉強会もやってるよ！

弊社主催のAppSheet勉強会を毎月開催しております。直近開催分のお申込みは以下からお願いいたします。

10/10(火)【毎月第2火曜開催】Appsheetを知ろう！初心者向けかんたんハンズオン勉強会！ | Peatix

10/17(火)【毎月第3火曜開催】実践的なスキルが学べる！AppSheetアプリ開発ワークショップの編集 | Peatix