AppSheetのサンプルアプリから作った在庫管理アプリを日本語化してみる

# はじめに
前回のサンプルアプリを色々カスタムしてみる

前回：AppSheetを使って爆速で在庫管理アプリをスマホで動かしてみる。
https://qiita.com/Gerbera/items/dc66e689306061191ebe

#何を修正するか
1. 在庫商品の画像が表示されてないのをどうにかしたい

![コメント 2020-03-07 140609.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/861d43b4-e24e-c051-2d77-d4fad4260efe.png)
2. アプリ起動画面のロゴと説明文を変えたい

![コメント 2020-03-07 140652.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/3ee00c1a-95c6-fa6b-da3d-1593ef526dd8.png)
3. データを日本語化したい、修正したい

![コメント 2020-03-07 141228.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/d7d49d53-f5b1-f963-507b-273ad9d6885e.png)
4. UIを日本語化したい

![コメント 2020-03-07 141007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/b5ca1d81-dedd-bb81-ecbe-f1db6af78557.png)


# 修正してみる
## 環境
- Chrome 79
- Windows 10 1909

## 必要な物
- Googleアカウント（他のでもいいけどとりあえず）
- iOSデバイスかAndroidデバイス

## 費用
無料

## かかる時間
ゆっくり15分

## 手順
**1. 在庫商品の画像が表示されてないのをどうにかしたい**

こことか。

![コメント 2020-03-07 140609.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/0aab161b-e680-31bd-f04b-40243929b4ce.png)

ここやで。

![コメント 2020-03-07 145824.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/02055455-8563-6c43-b94c-f81de06ebd9a.png)

ほんとはここに商品の画像が入るんやが、うまく表示されてへんのや。ちょっとかっこわるいので直したい。

ちなみにAppSheetは、ExcelやGoogleスプレッドシート、各種データベースを基礎としてアプリが作られるんや。

セルの中の「ほにゃらら県ほげほげ市」や「2020/3/8」とかの値を見て、「あ、これは住所やな。住所なら地図のUIがいいやろ。こっちは日付か、カレンダーのUIにしとこか。」ってな感じでUIが出来るんや。（正確には嘘、実際には1行目とか表初めの項目を見てると思う）

その場合セルに書けない画像はどうするんやって話や。

~~画像をbase64でエンコードするんや！~~
**セルに画像のURLを書くんや！！**

まずは、アプリの基礎となっているデータベースを開くんやで。今回はGoogleスプレッドシートや。

DATA　→　Tables　→　Products（今回の対象テーブル）　→　View Source　やで。

![コメント 2020-03-11 222106.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/30d13786-af34-eb33-1e8e-4714cffb9b04.png)

これで元データが開くんや。今回は「Image」列に書かれているURLをしっかり画像が表示されるURLに書き直すんや。ちなみに画像以外にもここで元データの修正ができるんやで。

![コメント 2020-03-11 222620.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/345141ad-4574-1d66-6bcb-978cf40c98eb.png)

修正したら、メイン画面に戻って右側のアプリプレビュー画面の更新ボタンを押してリロードするんや。これで画像が表示されるはずや。

![コメント 2020-03-11 223237.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/754985e8-07f9-bf47-a8f6-2aed74b98167.png)


![コメント 2020-03-11 222826.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/f07dbedc-69be-9c2a-6096-30c71e898993.png)
![コメント 2020-03-11 222842.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/b137a15b-0e84-2dba-a2fd-fc2062572d86.png)


これで一気にアプリっぽくなったな。





**2. アプリ起動画面のロゴと説明文を変えたい**

まずはロゴや。
UX　→　Brand　→　App logo　→　CUSTOM　やで。

![コメント 2020-03-07 142915.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/eeb479e0-3972-4aff-d8ce-ffcac026638d.png)

URL入力ボックスがでるから画像URLを直接入力するか、右のほうに見える（見えない）選択ボタンで、自分のGoogleドライブの中の画像を選択するんや。簡単やな。

![コメント 2020-03-07 142946.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/1e6633f5-4eb6-0546-7fe0-4f3ac236864b.png)

Brandではアプリのテーマや主要色など look and feel を変えられるんや。見やすいアプリにしような。


次は説明文や。
INFO　→　Propaerties　→　Short Name, Short Description
, Description　やで。
![コメント 2020-03-07 144423.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/57b1ff53-61fc-19c1-1e69-b5f1cc9b3b6d.png)

ここではもちろん日本語も使える。

アプリ起動した初めの画面が英語だと「うっ！」ってなる奴おるから日本語で書くんや。ただ大事なのは母国語で書くこともやけど**アプリ利用者のリテラシーにあった文章で書くこと**やで。


**3. データを日本語化したい、修正したい**
これは、「1. 在庫商品の画像が表示されてないのをどうにかしたい」と同じように、元データを開いて修正すれば楽勝や！

ちなみにGoogleスプレッドシートで英語を日本語に翻訳したい場合は、「GOOGLETRANSLATE」関数を使うと楽やで。ただあんまり精度はよくない。

GOOGLETRANSLATE
テキストをある言語から別の言語に翻訳します
https://support.google.com/docs/answer/3093331?hl=ja

**4. UIを日本語化したい**
まずは下のメニューから日本語化するで。

![Inkedコメント 2020-03-11 222826 - コピー_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/1bd3d1b2-bb51-fd57-529a-919fe6e44c05.jpeg)

このメニューは「PRIMARY VIEWS」といっていつも画面に出ている画面選択用のボタンや。
逆に左上のハンバーガーの中のメニューは「MENU VIEWS」やで。だいたい今のスマホアプリはこんな感じの画面やな。

ここは、
UX　→　Views　→　PRIMARY VIEWS　→　Add Stock（対象のVIEW）　→　View name　
で変えることができるんやで。

![Inkedコメント 2020-03-11 225148_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/4ace6839-99a8-3e00-27f4-6f1087aeabab.jpeg)

次に、項目の名称を変えるんや。
ここも元データを変えればいいと考えると思うんやが、それだけだとダメなんや。

![Inkedコメント 2020-03-11 222826 - コピー２_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/56b517d4-35bd-5f52-125a-6880b20eb8d4.jpeg)

まずは元データを書き換えるな。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/5f23f0e8-d50c-b5b8-4302-cb3b737846c6.png)

次に、元データの再読み込みや。

DATA　→　Columns　→　Products（対象カラム）　→　Regenerate Structure

![Inkedコメント 2020-03-11 232213_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/6c2b4d4b-503a-f123-29e2-f21e87ef03dd.jpeg)

~~するとな、ひどいことになるんや。~~
**記事を作成した時点ではエラーが出ていたのですが、最近（2020/04/02）では内部処理が変わったのかエラーになりません。
なのでエラー処理は以下のエラー処理は不要です。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/48fde4d0-9c6a-6348-8f7c-6984d3de44af.png)

~~でもな、落ち着いて赤メッセージを読むんや。~~

~~`Column Name 'Current Stock' in Schema 'Products_Schema' of Column Type 'Number' has an invalid app formula '=SUM([Related Purchases][Quantity]) - SUM([Related Sales][Quantity]) + [Initial Stock]'. Unable to find column 'Initial Stock'MORE INFO`~~

~~下がGoogle先生の訳や。~~

~~`列タイプ 'Number'のスキーマ 'Products_Schema'の列名 'Current Stock'に無効なアプリ式 '= SUM（[関連購入] [数量]）-SUM（[関連販売] [数量]）+ [初期在庫] '。列「初期在庫」が見つかりません詳細`~~

~~さっき日本語化した列名を設定で使っている箇所があったから、列が見つからないと言っているんや。~~
~~ここを直してこ。~~

~~おかしなところは赤枠で囲まれるからここをクリックや。~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/0a78dbe0-cadd-9663-f069-d2f61a8a10d2.png)

~~詳細設定が表示されて、さらにエラーになっている箇所を表示してくれるんや。やさしいんやで。~~
~~ここでフラスコをクリックや。~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/487eedde-1f82-112e-cd47-6f0121ad010b.png)

~~今回は関数の数式に使われている「Initial Stock」が見つからなくておかしいみたいやな。~~
~~「Initial Stock」を「現在庫」に変えてみよ。~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/f862dcbb-f499-7e8a-e1b8-745cb6a14e4a.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/826703a7-164d-3ed2-8f94-03a3ca9712eb.png)

~~エラーが消えたで！右上の「Save」でセーブや。さらにメイン画面の右上の「Save」でもセーブや！~~
~~これで安心や…なんでや！なんでまだエラーでとるん！？？？~~

~~今度も修正方法は同じや。まずは~~
~~Data　→　Slices　→　Restock Needed　→　フラスコ~~
~~や。~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/15822c35-bed9-f0ca-2b48-1a2547a5a499.png)

~~これ以外にも同じ方法で解決できるエラーをつぶしていくと…~~
やっとアプリが動くようになったで！！…でもなんか表示がへんやないか？currentStockだけ表示じゃなくて商品名も欲しいやん…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/295cc23b-3e6d-8c9e-c35d-9c4e9147b107.png)

項目を追加するで！
UX　→　Views　→　ProductsList　→　Column order　→　＋
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/4913c50f-95e9-66ba-4b7c-eadee96ccd2a.png)

ここで表示するカラムを設定するんや。今回は以下のようにしたで。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/e0fe500b-f0e6-5625-5b35-d10bd39fa199.png)

この設定はリアルタイムで右のプレビューに反映されるで。これで日本語になったやろ。
テキストにすると長ったらしいんやが、わかってくるとすぐやで！


## 終わりに
①サンプルアプリの出来がいい
②エラーの場合にどこを直せばいいのかわかりやすい
③リアルタイムでプレビューに反映される
ので、修正や改修もすぐにできる。
すぐにできるっていうのは大きいと思っていて、客先でのニュアンスを見ながらの改修だったり、なんども修正してもよいものを選ぶことができたり、今までの開発のイメージとちがったより顧客側によった価値を提供できると思う。

次回は、0からアプリを作ってみようと思う。

## ノーコード開発もくもく会のおしらせ
毎月1回ぐらい、「Play (No) Codes!」というグループ名でノーコード開発もくもく会をしています。
基本オンライン＋オフラインで実施しているので、よければ参加ください！
https://playnocodes.connpass.com/