こんにちは、Yui(@yui_active)です。
最近本当に暇なので、今流行りのGlideを使ってPWAアプリを作ることにしました。
まず、PWAアプリとは何かというと、簡単に言うとレベルアップしたwebアプリです。
少し語弊があるかもしれませんが、難しいことはあまり言いたくないので、表示速度が早くて、フルスクリーン表示が可能なwebアプリだと思ってもらえれば大丈夫です。
さて、余談ですがwebアプリは私も何回か作っていて、今までに簡単なメモアプリや電卓アプリ、旅行地を教えてくれるアプリ、訪日外国人向けに観光ガイドを紹介するアプリ(友人との共作)などを作ってきました。
(一応下記に参考までに稚拙なアプリで恥ずかしいのですが、公開出来るものを下記に張っておきます。)
※旅行地を教えてくれるアプリはデータが残ってなかったので前にアップした紹介動画です。
こんな拙いアプリでも制作するのにかなり時間がかかっていて、私の中でwebアプリ=時間がかかるものという印象でした。
※実務経験がないにわかなので、私の実力不足というのはおいておかせてください。笑
ただそんな中、Glideというサービスを知って、これなら超簡単に出来る!ということで作ってみることにしました。
実際にGlideで作ったもの


めちゃくちゃ単純なアプリなのですが、実際にこれを1から作ろうとすると、かなり時間がかかりますよね!
ただ、実際は5分でできたんですよ。
もうGlide最高!ということで、今回はこのアプリの作り方を紹介します。
手順1:Glideに登録する
必要なものは、Google SpreadsheetとGlideの登録だけです。
まずGlideに登録します。
登録とは言っても無料なので安心を!
まず、Glideのページを開きます。
右上のGet Startedをクリックします。

Sign up with Googleを押して自分のGoogleアカウントから登録します。
ここまで出来ればもうアプリの8割は完成したも同然です。
手順2:スプレッドシートを用意して選択する
好きなデータを詰め込んだスプレッドシートを用意します。
私はトイグルというサイトからスクレイピングでデータを取ってきましたが、そのへんは何でも大丈夫です。
ちなみに私が用意したスプレッドシートを参考までに貼っておくとこんな感じです。
https://docs.google.com/spreadsheets/d/1MXlx6enZK0XfpW7KsiaG4zOoFDbWVwqWO9K7bEJVKjE/edit?usp=sharing
もはやシンプルすぎて心配になるレベルですが、Glideが全部良い感じにしてくれるので大丈夫です。笑
さて、スプレッドシートが用意できれば、再度Glideを開きます。

このFrom Google Sheet…をクリックすると、ファイルが開かれてスプレッドシートを選べるようになります。
そして用意したスプレッドシートを選択すると完成です!
あとはPropertiesの部分をいじってレイアウトを好みのものに整えます。
手順3:公開する
さて、アプリが完成したらあとは公開するだけなのですが、これもボタン一つでできます!

アプリ編集画面の右上のShareを押すと、公開URLとQRコードが発行されます。
簡単すぎて、好き・・・ってなりますよね!
おまけ:もっと複雑なアプリを作るためには
これで簡単なアプリの作り方はわかったかと思うのですが、じゃあもっと複雑なアプリとか作れないの?って感じですよね。
もちろん、できます。
どうするかというと、ここのFrom Template…をクリックします。
そうすると、様々な人が作ったテンプレートをそのままコピーすることができます!

好きなテンプレートを選んで、Use this templateを押すと、自動的にアプリが作成されます。
そしてそのためのスプレッドシートも自動で作成されるので、あとはデータをいじるだけです!
ちなみに私はこれで英語練習用のpod castの音声を聞くことが出来るアプリを作ろうとしたのですが、pod castの音声をmp3形式にするのが面倒すぎてやめました・・笑
もちろん、一切コードを書かないので、できないことも多くありますが、これだけ簡単に作れたら面白いですよね!
ぜひこれで作る楽しみを知ってもらって、もしもっと学びたい場合は、追加でスクールに通うなり、オンラインで講義を受けるなりすれば良いのではと思います。
私もまだまだにわかではありますが、やはりプログラミング楽しいなと思うので、もっと頑張ろうと思います!
最後までお読みいただきありがとうございました!