プログラミング?コーディング?ナニソレおいしいの?GlideとGoogleSpreadSheetで5分でPWAを作成!

プログラミング?コーディング?ナニソレおいしいの?GlideとGoogleSpreadSheetで5分でPWAを作成! 技術

こんにちは!いつもご覧いただきありがとうございます。

なんと私、「Glide」という面白いおもちゃを発見しましたのでそちらを今回は紹介したいと思います。

ちらっと耳にしてはいましたが、なんとこのツール、コーディングやプログラミングなしでPWAが作れちゃうのです!
最近Web界隈ではこの「PWA(Progressive Web Apps)」が盛り上がっており、賛否両論もあったりと何かと話題に取り上げられることが多いので注目しています。
しかも、僕が多用している「Google SpreadSheet」と連携するだけで簡単にWebサイトが作れるという!!!

実際に使ってみてめちゃくちゃ感動したのでご紹介いたします!
簡単なものだとたった五分でできちゃいます!

実際に作成したものがこちら↓
Kyoto Brew Map

PWAって?

最近話題になっている「PWA」。
これは「Progressive Web Apps」の略で、スマホ向けのWebサイトWebアクリケーションを、スマートフォンアプリのように使える仕組みです。
これは「Webサイトなのにアプリみたいにホーム画面にアイコン追加したり、プッシュ通知がきたり、オフラインで使えたりする」スグレモノです!

サイト運営者はアプリのストアへの申請もなく規制もなくアプリ(のようなもの)を作成できます。
ユーザーとしてはアプリをインストールするわけでないので容量を節約できます。

サイト運営者にもユーザーにも優しい技術なのです。

主な事例としては

など、様々な業種の企業が参入している急上昇の技術です!

そんなPWAをたった5分で作れちゃうツールが「Glide」なのです!
※簡単なものに限る

早速作ってみるよ「Glide」!手順を紹介!

「いやいや!そんなに簡単にWebサイトとか作れるわけないじゃん!しかも最新技術でしょ!?無理無理!」
僕も最初はそう思ってました。

しかし、実際に使ってみるとまさに「目からウロコ」
超手軽!超簡単!超コーディング不要!
「百聞は一見に如かず」ということで早速触ってみましょう!

今回必要なものは

  • Googleアカウント
  • Glideアカウント
  • Google SpreadSheet
  • ちょっとしたデータ

です。

Googleアカウントを所持している前提で進めますのでGoogleアカウント持ってない方は先に作っておくことをお勧めいたします。
Googleアカウントの作成方法は今回は紹介しないのでご注意を!

下準備1(Glideアカウント登録)

まず、Glideのアカウントを作成します。

下記のURLからGlideにアクセス↓
Glide

するとこのような画面が表示されるので右上の「Sign up」をクリック!

プログラミング?コーディング?ナニソレおいしいの?GlideとGoogleSpreadSheetで5分でPWAを作成!

登録はGoogleアカウントで行います。
真ん中の「Continue with Google」をクリック

プログラミング?コーディング?ナニソレおいしいの?GlideとGoogleSpreadSheetで5分でPWAを作成!

Googleのアカウントを選択します。

プログラミング?コーディング?ナニソレおいしいの?GlideとGoogleSpreadSheetで5分でPWAを作成!

アカウント認証が完了するとダッシュボードが表示されるのでまずはここでアカウント登録は終了です。

プログラミング?コーディング?ナニソレおいしいの?GlideとGoogleSpreadSheetで5分でPWAを作成!

下準備2(Google SpreadSheet)

次はPWA作成のための「データ作成」です。

普通のWebサイトではここでデータベースやJSON、APIなどを使用するのですが、今回は「Google SpreadSheet」を使用します。

まずはGoogle DriveGoogleSpreadSheetAppにログインして新しいスプレッドシートを作成します。

ここに自分の表示させたいデータを入力します。
今回はとりあえず京都のカフェにしました。

プログラミング?コーディング?ナニソレおいしいの?GlideとGoogleSpreadSheetで5分でPWAを作成!

ここでシートの名前などはしっかり書いておけばあとで変更する手間がないのでお勧めします。

これで下準備完了です。

新しいアプリを作る(Map機能を使ってみよう)

それでは早速サイトを作成しましょう。

Glideのダッシュボード画面に戻って「+ New app」を選択。

プログラミング?コーディング?ナニソレおいしいの?GlideとGoogleSpreadSheetで5分でPWAを作成!

するとスプレッドシートの選択窓が表示されるので先に作成したスプレッドシートを選択します。

プログラミング?コーディング?ナニソレおいしいの?GlideとGoogleSpreadSheetで5分でPWAを作成!

スプレッドシートのデータをもとに雛形を作成してくれました!!早い!
このままでも完成で良いのですが画像を用意していないのでちょっと不恰好かも。

プログラミング?コーディング?ナニソレおいしいの?GlideとGoogleSpreadSheetで5分でPWAを作成!

そこで「このアプリをMapアプリにしてしまおう」という考えに至りました。
そして右側のメニューの「Map」をクリック

プログラミング?コーディング?ナニソレおいしいの?GlideとGoogleSpreadSheetで5分でPWAを作成!

すると、自動で住所を検出してマップにピンを立ててくれるではありませんか!

ピンをクリックすると下からそこの情報が。

プログラミング?コーディング?ナニソレおいしいの?GlideとGoogleSpreadSheetで5分でPWAを作成!

さらに下から出てきたものをクリックすると詳細画面に遷移します。

プログラミング?コーディング?ナニソレおいしいの?GlideとGoogleSpreadSheetで5分でPWAを作成!

モックアップをみながらサイトを作成できるのです!
すごい!

あとはドメインやディスクリプションなど、ちょっとした調整。
左側のメニューの「Settings」で調整できます。

プログラミング?コーディング?ナニソレおいしいの?GlideとGoogleSpreadSheetで5分でPWAを作成!

これで完成とします!

実際にスマホで見るときは左下の「Open app」をクリック。

アプリのおすすめページ!ここで右上のQRコードにカメラをかざすと実際に見ることができます。

プログラミング?コーディング?ナニソレおいしいの?GlideとGoogleSpreadSheetで5分でPWAを作成!

すげえ。

独自ドメインの使用などは有料月額料金で設定できるみたいです。

使ってみて思ったこと

Glideを使ってみてこのツールのメリット、デメリットをまとめてみました。

  • メリット
    • コーディング、プログラミング不要
    • デプロイ不要
    • データベース不要
    • Googleアカウントとの連携が簡単
    • Google SpreadSheetを利用するっていうのがまたいい
  • デメリット
    • 自由度が低い
    • 無料版では制限が多い
    • 有料版でも自由度は比較的低めかも

Google SpreadSheetでURLだけの一覧を作って、GAS(Google Apps Script)を使ってそのURLからスクレイピングして各項目をセルに挿入するみたいなことを自動化したら面白そうだなあ

軽いものであれば、Webの入門、ブログのちょっとした付随アプリ、少人数でのメモ共有程度に使えそうです。
僕はついでに「Kyoto Brew」のマップ版に利用しようかなと思ってます。

  

コメント

  1. inonere より:

    [url=https://gcialisk.com/]buy cialis online forum[/url]

  2. inonere より:
  3. OCCUSTYNC より:
  4. inonere より:
  5. OCCUSTYNC より:
  6. OCCUSTYNC より:
  7. OCCUSTYNC より:
  8. OCCUSTYNC より:
  9. inonere より:
  10. OCCUSTYNC より:
  11. Brianna より:

    Everything published made a ton of sense. But, what about this?
    what if you were to create a killer headline?
    I ain’t saying your information is not good., however suppose you added a post
    title to possibly grab a person’s attention? I mean プログラミング?コーディング?ナニソレおいしいの?GlideとGoogleSpreadSheetで5分でPWAを作成!
    | タシュミスト is a little vanilla. You might peek at Yahoo’s home page and
    watch how they create article headlines to grab viewers to open the links.
    You might add a video or a picture or two to get people excited about what you’ve written. In my opinion, it might bring your blog a little
    livelier.

  12. Good blog you have got here.. It?s difficult to find
    quality writing like yours nowadays. I really appreciate people like you!
    Take care!!

    Here is my web page … http://clubriders.men/viewtopic.php?id=507799

  13. inonere より:
  14. Hello there! This blog post couldn’t be written much
    better! Reading through this post reminds
    me of my previous roommate! He continually kept preaching about this.

    I most certainly will send this post to him.
    Fairly certain he’s going to have a good read.
    Thanks for sharing!

    Also visit my web blog: anapa-alrosa.com.ru

  15. Carmon より:

    Howdy very nice blog!! Man .. Excellent .. Wonderful ..

    I will bookmark your web site and take the feeds also?
    I am happy to search out a lot of helpful info right here within the
    submit, we want work out extra techniques in this regard,
    thank you for sharing. . . . . .

  16. inonere より:
  17. Hello are using WordPress for your site platform?
    I’m new to the blog world but I’m trying to get started and
    create my own. Do you require any coding knowledge to make your own blog?
    Any help would be really appreciated!

    Feel free to surf to my web blog – Divine Dynamic Keto Ingredients

  18. OCCUSTYNC より:
タイトルとURLをコピーしました