paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

簡単過ぎる!GoogleスプレッドシートからPWAアプリを開発できる「Glide」を使ってみた!

f:id:paiza:20190410112329j:plain
どうも、まさとらん(@0310lan)です!

今回は、Googleのスプレッドシートを利用して誰でも手軽にPWAアプリを開発して公開することができるサービスをご紹介します!

スプレッドシートにデータを準備するだけなので、エンジニア以外の方でも簡単にアプリ開発を楽しむことができます。多彩な機能をグラフィカルなGUIで追加していくことも可能なので、ご興味のある方はぜひ参考にしてみてください!

Glide

f:id:paiza:20190410112413j:plain
 

■「Glide」の使い方

それでは、まず最初にGlideをどのように使っていけばよいのかを見ていきましょう!

サイトにアクセスしたら【Sign Up】ボタンをクリックして無償のユーザー登録を済ませておきます。

f:id:paiza:20190410112434j:plain


GlideはGoogleのスプレッドシートを利用するので、自分のGoogleアカウントから簡単にログインできるようになっています。

f:id:paiza:20190410112449j:plain


ログインが完了すると自分専用のダッシュボードが表示されるようになります。

f:id:paiza:20190410112502j:plain

この画面から新規のプロジェクトを作成・管理できるわけです。


今回はこのGlideを利用して簡単なPWAアプリを構築してみたいと思います。

内容は、架空の公園を検索できるアプリにしようと思いますので、まずは新規のスプレッドシートを作成して以下のような「公園リスト」を作りましょう!

f:id:paiza:20190410112519j:plain

内容や項目は好きなもので構いませんが、今回のサンプルデモは「名称」「住所」「電話番号」「イメージ画像」という4つの項目を作成しています。

■簡単なPWAアプリを作成してみよう!

それでは、さっそくですがGlideとスプレッドシートを利用して簡単なPWAアプリを作成してみましょう。

ダッシュボード画面の左メニューから【New App】をクリックします。

f:id:paiza:20190410112543j:plain


Googleドライブに保管されているスプレッドシートの一覧が表示されるので、さきほど作成した公園リストを選択します。

f:id:paiza:20190410112606j:plain


すると、スプレッドシートを自動的に解析してスマホ表示に最適化してくれます!

f:id:paiza:20190410112616j:plain

基本的なアプリの骨組みはすでに完成しているのですが、ここから自分の好きなようにカスタマイズしていくことができます。


そこで、まずは表示レイアウトを変更してみたいと思います。画面右メニューからレイアウトを「Tiles」にしてみましょう!

f:id:paiza:20190410112628j:plain


「Image」の項目で、スプレッドシートに画像リンクを記載していた列をひもづけます。

f:id:paiza:20190410112641j:plain


すると画像を利用したタイル表示に変わります!

f:id:paiza:20190410112656j:plain

事前に用意したスプレッドシートを組み合わせることで、簡単にさまざまなレイアウトへの変更が可能です。


また、いずれかの公園を選択すると自動生成された詳細画面が表示されます。

f:id:paiza:20190410112716j:plain

スプレッドシートに入力した項目が表示されているのですが、不要な項目はクリックして除外することもできます。


さらに、画面右上の【+】アイコンからボタンや入力フィールドなど、さまざまなコンテンツを追加することができます。

f:id:paiza:20190410112730j:plain


たとえば、公園の場所を分かりやすくするために「Map」をクリックして地図を追加してみましょう。

f:id:paiza:20190410112743j:plain


「Address」の項目で、スプレッドシートへ入力していた住所の列をひもづけます。

f:id:paiza:20190410112755j:plain


これだけで、自動的に公園の場所を表示する地図を埋め込むことができるわけです!

f:id:paiza:20190410112807j:plain


今度はユーザーが公園についてコメントを書き込めるようにしてみましょう。メニューから「Comments」を選択します。

f:id:paiza:20190410112819j:plain


たったこれだけで、不特定多数のユーザーがコメントを投稿できるようになるのです。

f:id:paiza:20190410112837j:plain

コメントは、ユーザー名とメールアドレスを登録したあとに入力できる仕様なので安心です。


また、投稿されたコメントは自動的にスプレッドシートの新しいシートに書き込まれるようになっています。

f:id:paiza:20190410112851j:plain
 

■PWAアプリを公開してみよう!

自分で作成したPWAアプリはすぐにでもネット上へ公開することができるので、その方法についてご紹介しておきます。

最初にアプリの基本設定をするため、左メニューの【Settings】をクリックします。

f:id:paiza:20190410112945j:plain


アプリの設定画面が表示されるので、自分の好きなアプリ名や公開用URLなどを設定しておきましょう!

f:id:paiza:20190410113009j:plain


スマホのホーム画面に配置するためのアイコンも設定することができます。

f:id:paiza:20190410113020j:plain

用意されているアイコンリストから選んでもいいですし、もちろん自分が用意した画像をアップロードすることもできます。


設定が完了したら、左メニューから【Open app】をクリックしましょう!

f:id:paiza:20190410113034j:plain


すると、アプリの公開用Webサイトが表示されます!

f:id:paiza:20190410113047j:plain

このまま画面上でアプリを操作することも可能ですが、シェア用のURLやQRコードからスマホにPWAアプリとして登録することができます。

このようにGlideを利用すると、スプレッドシートにデータを用意するだけで誰でも簡単にPWAアプリを作成して公開することができるので非常に便利ですね!

■ぜひ活用したいGlideの便利機能!

最後に、Glideが提供している機能の中で特にオススメの便利機能をご紹介しておきます!


まずは、「ナビゲーション機能」です。

これはアプリにボトムナビゲーションを追加することができるのですが、方法は簡単で新規にシートを追加していくだけです。

f:id:paiza:20190410113113j:plain

たとえば、上記の場合だと「Employees」「Offices」「Library」という3つのシートを作成しています。


そして、ナビゲーション機能をONにすることで以下のような表示になります!

f:id:paiza:20190410113209j:plain

ナビゲーションをタップすることで、複数の画面を切り替えられるようになるというわけです。


次に、「認証機能」も解説しておきます!

【Settings】メニューからアプリを利用する際の認証設定ができます。

f:id:paiza:20190410113228j:plain

それぞれの認証方法は以下のとおりです。

  • Public:誰でも利用可能
  • Password:指定されたコードを入力すると利用可能
  • Email:メールアドレスを認証すると利用可能


たとえば、メールアドレスを利用する場合であれば新しく「Emails」というシートを作成します。

f:id:paiza:20190410113255j:plain


そして、認証するメールアドレスを登録すれば準備完了です。

f:id:paiza:20190410113307j:plain


ユーザーがメールアドレスを入力すると、ワンタイムパスワードのようなコードが送付されるので、そのコードを入力するとアプリを利用することができるわけです。

f:id:paiza:20190410113318j:plain

ちなみにユーザーが認証した時間なども別シートで記録されるようになっているので便利です。

このようにGlideのさまざまな機能を活用することで、より高機能なPWAアプリを手軽に作成することができます。

■動画でプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

■まとめ

今回はGoogleのスプレッドシートを利用することで簡単にPWAアプリを作成できるサービスをご紹介しました!

データを用意するだけという手軽さで、エンジニア以外でもアプリ開発ができるので必要なのはアイデアのみと言えるでしょう。

ぜひ、みなさんもオリジナルのアプリを開発してネット上へ公開してみましょう!


<参考リンク>





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud