google
GSuite
GoogleAppMaker

Google App Maker ー 検索時に日本語を使えるようにする

App Maker でデータソースのクエリのパラメータに日本語を使うとエラーになってしまう。
そのうち治ると思うが、現在(2017/10/3) は動かないので、本記事で行うようなエラーの回避を行う必要がある。

そもそも App Maker ってなに?という人は、以下の記事を参照してください。
Google App Maker とは? 短期間で Web アプリケーション構築を可能にした理由

エラーが起きるケース

次のような一覧画面があり画面上部に絞込用のテキストボックスがあるようなケース。

image.png

アルファベットは問題なし

image.png

日本語はエラー

image.png

エラーメッセージ
Tue Oct 03 17:51:34 GMT+900 2017
(InvalidCharacterError) : Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
at Users.TextBox1.onValueChange:1:41

エラーになる原因

query のパラメータに日本語を入れるときにエラーになる。

image.png

widget.datasource.query.parameters.text = widget.value;
widget.datasource.load();

改善方法

パラメータの設定側

encodeURIComponent をつける。

widget.datasource.query.parameters.text = encodeURIComponent(widget.value);
widget.datasource.load();

image.png

クエリの実行側

decodeURIComponent をつける。

var text = query.parameters.text;
if (text) {
  query.filters.Name._contains = decodeURIComponent(text);
}

return query.run();

image.png

改善後の実行結果

エラーが出ずに日本語で検索できている。

image.png