プログラミング

【5分で出来る!】Glideを使ったPWAアプリの作り方

こんにちは、Yui(@yui_active)です。

最近本当に暇なので、今流行りのGlideを使ってPWAアプリを作ることにしました。

まず、PWAアプリとは何かというと、簡単に言うとレベルアップしたwebアプリです。
少し語弊があるかもしれませんが、難しいことはあまり言いたくないので、表示速度が早くて、フルスクリーン表示が可能なwebアプリだと思ってもらえれば大丈夫です。

さて、余談ですがwebアプリは私も何回か作っていて、今までに簡単なメモアプリや電卓アプリ、旅行地を教えてくれるアプリ、訪日外国人向けに観光ガイドを紹介するアプリ(友人との共作)などを作ってきました。
(一応下記に参考までに稚拙なアプリで恥ずかしいのですが、公開出来るものを下記に張っておきます。)

※旅行地を教えてくれるアプリはデータが残ってなかったので前にアップした紹介動画です。

こんな拙いアプリでも制作するのにかなり時間がかかっていて、私の中でwebアプリ=時間がかかるものという印象でした。
※実務経験がないにわかなので、私の実力不足というのはおいておかせてください。笑

ただそんな中、Glideというサービスを知って、これなら超簡単に出来る!ということで作ってみることにしました。

実際にGlideで作ったもの

TOEICで必修の英単語を覚えるアプリ

めちゃくちゃ単純なアプリなのですが、実際にこれを1から作ろうとすると、かなり時間がかかりますよね!

ただ、実際は5分でできたんですよ。

もうGlide最高!ということで、今回はこのアプリの作り方を紹介します。

手順1:Glideに登録する

必要なものは、Google SpreadsheetとGlideの登録だけです。
まず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形式にするのが面倒すぎてやめました・・笑

もちろん、一切コードを書かないので、できないことも多くありますが、これだけ簡単に作れたら面白いですよね!

ぜひこれで作る楽しみを知ってもらって、もしもっと学びたい場合は、追加でスクールに通うなり、オンラインで講義を受けるなりすれば良いのではと思います。
私もまだまだにわかではありますが、やはりプログラミング楽しいなと思うので、もっと頑張ろうと思います!

最後までお読みいただきありがとうございました!

Booking.com