Glideのフォーム機能のテストが開始されました(正式リリースされました)

Glideのフォーム機能のテストがアナウンスされました。

[[INSIDERS] New feature: Forms - please help us test](https://spectrum.chat/glideapps/general/insiders-new-feature-forms-please-help-us-test~06caf811-5900-4687-80b3-c504db76c88c)

ボタンを押して、フォーム入力を行うような機能です。

早速使ってみました。

テストは、これまでと同様にstaging.heyglide.comで行われています。
ここで作成したGlideアプリは、削除される可能性がありますので、リリース用には使えません。

##スプレッドシートの作成
フォーム入力用の簡単なスプレッドシートをGoogle Spreadsheetで作ります。

飲み会の希望日をアンケートするサンプルにしましょう。
タブを２つ持ったシートを作ります。

新しいSpreadsheetを開いて、form_testという名前を付けました。
フィールドには、開催予定日を入れておきます。
日付だけだと味気ないので、曜日の項目も入れました。
![スクリーンショット 2019-06-20 9.49.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/6444ac31-d1fb-88dd-4b06-8bda45c43d8b.png)
新規にタブを開いて入力フォーム用のシートを作ります。
希望日、メールアドレス、記入日、備考の項目を作りました。
![スクリーンショット 2019-06-20 10.33.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/b31ac605-f06d-bd52-da45-83d641671113.png)
作ったタブに名前をつけておきます。
![スクリーンショット 2019-06-20 9.51.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/0507d38f-9ed2-0780-f16a-ed294b5ac23b.png)

##Glideアプリケーションを作る
stagingを開いて、作成した"form_test"スプレッドシートを指定します。
自動作成されたアプリケーションが開きます。
![1Glide – amazing apps without code 2019-06-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/30a965e7-3bee-634e-0d3d-b6159cda151f.png)
アイコンは登録していないので見栄えが悪いので消します。
検索も不要なのでフィールドを消しておきます。
表示項目を入れ替えて見やすくします。
![2Glide – amazing apps without code 2019-06-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/95ab3bac-2be2-d3a9-4120-dffd4e0fbc98.png)
詳細画面を作ります。
ここに今回のフォーム機能を埋め込みます。![3Glide – amazing apps without code 2019-06-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/0b2bf933-703f-d7a6-34e1-8eccc23041ad.png)
Summaryのレイアウトを少し整えて、フォーム記入用のボタンを追加します。
![4Glide – amazing apps without code 2019-06-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/25c88c03-88fb-1392-97b4-01c07f77611d.png)
ボタンのLABELを「この日に投票」に変えて、ActionをFormに指定します。
![6Glide – amazing apps without code 2019-06-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/3ea40b8e-4a45-3583-6786-2d92c1fab3bb.png)
画面上のボタンを押して、入力画面のレイアウトを決めていきます。
![7Glide – amazing apps without code 2019-06-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/f13f5392-ba4f-fc06-0bb8-cfcdb858a53f.png)
選んだ希望日を入れるフィールドと、記入日とメールアドレスを入れるフィールドを作ります。
![8Glide – amazing apps without code 2019-06-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/d2ca55d7-34c8-dd15-a796-0ea24185b3c4.png)
![9Glide – amazing apps without code 2019-06-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/c7dbce4e-f9ee-eb0a-af8f-de3d4edba15a.png)
![12Glide – amazing apps without code 2019-06-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/d8d1fb28-bcc4-c8d4-f302-6dbdbfe2eca7.png)


##使ってみる
作成画面の左ペインから、Open Appボタンでアプリを開いてみます。
![スクリーンショット 2019-06-20 10.19.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/43a610bb-80b5-28c8-f5e3-42ed48349c05.png)

あー、いまのところ、備考欄のようなフィールドを追加すると、ボタンがリダイレクトになってしまうようです。
![スクリーンショット 2019-06-20 10.56.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/dc421a84-a1d9-140d-c002-ff6c70402298.png)
修正待ちですね。

6/21：修正されました。後述します。
![スクリーンショット 2019-06-21 8.33.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/793fbf04-6d0d-466c-3eee-c2db4ada58b1.png)

##入力フィールドを追加せずにバグを回避する
備考欄の入力を入れずに作るとうまくいくようです。
![13Glide – amazing apps without code 2019-06-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/74c101bd-4a5b-83c9-7dc3-4edab7e139b5.png)
アプリを開いてみます。
日付を選びます。
![スクリーンショット 2019-06-20 11.43.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/61083b99-2c25-49eb-f050-b1fb197173ca.png)
ボタンを押します。
![スクリーンショット 2019-06-20 11.43.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/c5b4375e-40f6-1e6f-a72a-8be9632a053b.png)
なにもない入力画面が開きます。submitボタンを押すと入力されます。
![スクリーンショット 2019-06-20 11.08.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/22851318-3d2e-bcb0-036f-0fa5ce19f630.png)
Submitを押すとボタンのある画面に戻ります。

しかし、自動入力の項目だけしかエントリできずに、この味気ない画面のままでは、リリースするのはダメではないかと...

うまくいくと、Formタブにデータが入力されます。
![スクリーンショット 2019-06-20 11.03.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/05fd05b1-a620-4a6f-207d-738f961ba296.png)

同じアドレスから複数データを投入すると、最新のものしかメールアドレスが入らないような感じです(アプリでPIN認証すると毎回アドレスが入力されていたので問題なさそうです)。
アクセスにメールアドレスを必須にしていないと、アドレス部分は空欄になってしまって、意味がありません。

Navigation画面で、Formタブを不可視に設定して、公開用のホスト名を決めれば出来上がりです。
![14Glide – amazing apps without code 2019-06-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/314bd114-4ff5-2d5c-7921-99ed6d7733ab.png)
![15Glide – amazing apps without code 2019-06-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/e2d51afc-f38e-5e33-16bd-7f32c413a826.png)

##バグ直りました！
入力系のComponentをForm系のComponentといっしょにレイアウトすると、うまく動作しないバグは解消されたようです。

予定日のリスト表示から、日付を選びます。
![スクリーンショット 2019-06-21 8.23.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/d57ee4e4-e8e1-675e-684f-be70c6b6fb24.png)
伝言を入れて、Submitボタンを押します。
![スクリーンショット 2019-06-21 8.24.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/fe08f55c-65eb-ad8a-f9a9-d4f99a8071b6.png)
Formタブには、このように入力されます。
![スクリーンショット 2019-06-21 8.17.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/f6d1bda9-9120-2749-1dda-39a5251fc1ae.png)

まだ、いくつかバグが残っているようですが、フォーム機能、いろいろと活用できそうです。
早くリリース版に反映されるといいですね。

6/26: 
フォームボタン機能が正式リリースされたようです。
[Forms - Glide Library](https://docs.glideapps.com/all/guides/intermediate-techniques/forms)


## 関連ドキュメント
・[流行りのGlideでプログレアプリ(PWA)してみた](https://qiita.com/kinneko/items/548597770d93aa17c6cf)
・[プログレアプリGlideappsにchoice機能が追加されたので使ってみました](https://qiita.com/kinneko/items/99a67faa231226335ba6)
・[Glideappにコメント/チャットのメッセージ追加を通知する機能が付いたので試してみた](https://qiita.com/kinneko/items/654c2a1e6e13d9c9592c)
・[Glideappsでfav機能が評価中なので試してみた(リリースされました)](https://qiita.com/kinneko/items/d4fae3ae26d358b130ba)
・[「5分で作れる！Glideappsではじめる超簡単PWA」セッションで利用する予定のデモ動画とプレゼン資料](https://qiita.com/kinneko/items/2d15a7cb87cb17a483a7)
・[Glideで画像アップロードの機能のテストが開始されました](https://qiita.com/kinneko/items/6831572cf3cf12a4a4e3)
・[Glideのリスト表示で地図と連携表示する機能のテストが開始されました](https://qiita.com/kinneko/items/79e84181ab7c0bcef88d)
・[Glideで画面のリロードをさせるための対策](https://qiita.com/kinneko/items/dec896995aca30b91ec6)
・[Glideのフォーム機能のテストが開始されました(バグは修正されました)](https://qiita.com/kinneko/items/8cbd5eea2c17610afeb6)