GoogleスプレットシートでポケモンGo図鑑作ってみた「Glide」

こんばんは、わいまつです。みなさん、GlideというGoogleスプレットシートからアプリを作成できるツールをご存知ですか?このGlideというのは、ノーコードで、Googleスプレットシートを準備するだけで、アプリライクなWebサイトが作れるというものです!

今回はそちらを使って簡単なポケモンGo図鑑を作ってみました。30分くらいで遊びで作ったものですがここまで作れるのすげえ。。

「Glide」で30分で作ったポケモン図鑑アプリURL ※是非スマホからアクセスして、ホーム画面に追加してみてください!

https://t5ysb.glideapp.io

 

■ Glide
https://go.glideapps.com/

Googleスプレットシートだけで、

ここまでできちゃう!!

1.Googleスプレットシートを準備

まず、Googleスプレットシートを用意する必要があります。こちらが実質データストアになっています。今回はポケモン図鑑を作るということで、CSVデータと画像データを以下からお借りしてます。

CSVデータ:https://empoh.com/2019/02/20/142/

画像データ:https://yakkun.com/sm/zukan/n1

落としてきたExcelファイルに

画像のURLを追加、https://img.yakkun.com/poke/sm/n<図鑑番号>.gif

※今回はお試しなので10番まで

これをGoogleスプレットシートに追加します。コピペでもいいですし、ファイル追加からでも読み込めます。

シート名をちゃんとつけるのがキモです!

これでGoogleスプレットシートの準備は完了です!

2.Glideの起動

「+ New App」から、Googleスプレットシートを選択します。

すると、もう勝手にここまでレイアウトしてくれます!名前の列とか指定してないのに!もちろん右のカラムから色々なSTYLEが選択できます。色々いじってみると楽しいです。サクサク動くし。

フシギダネの列をクリックすると詳細画面に切り替わる。

シートの数だけ画面ができる。シート名がそのまま画面名になるので、つけておくと良い。右カラムのEdit sheetで編集できる。もちろんここもレイアウト編集可能。

まとめ

いかがでしたでしょうか?Googleスプレットシートだけでここまでできます。というか、もっと作り込めます。コードを書かずにスプレットだけでここまでできるなんて、かなり驚きです。

GoogleスプレットシートはAPIも使えるので、マッシュアップすればかなり色々なことができそうです。社内ツールとか身内で使うだけのアプリだったらこれで十分事足りそうですよね。みなさんもぜひ触ってみてください!

Twitterでは日々の気づき等もつぶやいているのでぜひご登録ください。よければコメント、記事のシェア等してくれたら嬉しいです。ではまた。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です