2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Glideをさわってみた

Last updated at Posted at 2019-07-09

概要

  • Glideという、スプレッドシートに定義したデータを綺麗なUIでWebアプリ化してくれるツールを試してみた

やったこと

スプレッドシートを作る

  • プロ野球の順位表をコピペしてきてスプレッドシートに貼り付けてみた
    • シート名は画面に表示されるので変えておく
    • 一行目はヘッダーとして解釈されるので注意
スクリーンショット 2019-07-10 7.56.42.png

アプリを新規作成する

  • GlideにGoogleアカウントでログインして「New App」から新規アプリを作成する
  • 先程作成したスプレッドシートを選択する
スクリーンショット 2019-07-10 8.05.49.png
  • 雛形生成が完了すると以下のような画面が表示される
  • もうすでにそれっぽいアプリができてる!

demo.gif

雛形に手を加える

  • 一覧の表示形式は右側のタブで選択することができる
    • 今回の例ではデフォルトで選択されていたListがよさそう

demo.gif

  • リストに表示する内容も右側のメニューで変更できる
    • スプレッドシートに定義した列が選択肢として表示される
    • TitleとDetailの2項目しか選択できないという制約っぽい
    • 検索窓やアイコンの表示切り替えもできる

demo.gif

  • 詳細画面はスプレッドシートの全ての列の情報が表示されている
    • 表示する列を変更したりラベルを変えたりできた

demo.gif

アプリを公開する

  • 「Open App」を押すとQRコードが表示される
    • URLは自動で生成された文字列が含まれるがxxxの部分はカスタマイズもできる
    • https://xxxxx.glideapp.io/
スクリーンショット 2019-07-10 8.29.15.png スクリーンショット 2019-07-10 8.29.36.png

感想

  • 想像以上に簡単に作ることができた
  • レイアウトはGlideの仕様に乗っかるしかないのでそこは制約として受け入れる必要があった
    • 一覧画面に表示できる情報が限られてる
    • パーツの配置の方法に制約がある等
  • プロトタイプを素早く作るのには有用
2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?