かまてく ブログ

今日の努力は、明日の経験! - Kamakura Shinsho Engineer Blog

ノンプログラミング、スプレッドシートから5分でモバイルアプリが作れるGlideをさわってみた

こんにちは、私です。 今日は巷でそこそこ話題に上がってきている、Glideというサービスをご紹介させていただきます。

https://www.glideapps.com/

Glideとは何か

Glideとは、Googleスプレッドシートから簡単・早い・イケてるUIなモバイルアプリ(PWAアプリ)を超速で作れてしまうWebサービスとなっています。

Glideで何ができるか

Glideで実現できる機能として「リスト」「検索」「地図埋め込み」」「動画埋め込み」「コメント機能」などいろいろあり、ブラウザ上で簡単に追加することができます。

スプレッドシートがあれば、5分でさくっと簡単にアプリが作れてしまう

必要なものはGoogleスプレッドシート(データリスト)のみです。あとはボタンをポチポチするだけ、5分もあれば簡単なリストアプリができてしまいます。

実際に作ってみる

では実際にGlideでアプリを作ってみましょう。

Glideにサインインする



まずはGlideにアクセスします。 www.glideapps.com

f:id:hide-sakai:20190422155539p:plain



「Create an App」ボタンを押すと、以下のような画面になります。初めてなので「SignIn」を押します。 f:id:hide-sakai:20190422155623p:plain



Googleスプレッドシートが必要なので、GoogleアカウントをGlideと連携させます。 f:id:hide-sakai:20190422155628p:plain

アプリを作成する



連携完了したら、左メニューバーの「New App」をクリックします。
f:id:hide-sakai:20190422155632p:plain:w300



そうすると、スプレッドシートの選択画面が開くので、アプリ作成に使うスプレッドシートを選択します。 f:id:hide-sakai:20190422161018p:plain



スプレッドシートは以下のようにデータを入れておきます。 スプレッドシートの一行目に項目名を入れておけば、Glide上で自動的に項目が読み込まれます。 f:id:hide-sakai:20190422155641p:plain

アプリの設定



スプレッドシートを選択すると、画面上に以下のようなスマホビューで、自動的に一覧が表示されます。次にメニューの「Setting」を押して設定を進めます。 f:id:hide-sakai:20190422155645p:plain



「Setting」を開くと「App URL」という項目があります。ここに適当な名前(サブドメイン名)を入力します。 f:id:hide-sakai:20190422155650p:plain



「SignIn」のプルダウンで「Password」を選択し、パスワードを入力します。サインインの方法として他に「メールでの認証」や「公開」などが選択できます。 f:id:hide-sakai:20190422155653p:plain

アプリをカスタマイズする



次に左メニューの「Screen」を選択します。そうすると、右側に「Properties」という一覧の各種設定が表示されるはずです。ここでは特に設定は変えません。スマホビュー内の適当な項目をクリックしてください。 f:id:hide-sakai:20190422155656p:plain



そうすると、スマホビューが切り替わって詳細画面に切り替わります。右側の「Components」という詳細項目に変わっているはずです。次に画面右上の「+」ボタンを押します。 f:id:hide-sakai:20190422155701p:plain



「+」ボタンを押すと、コンポーネントの追加画面になります。ここでmapと入力し、地図を追加してみましょう。
f:id:hide-sakai:20190422155706p:plain:w400



地図を追加すると、スマホビューの下部に地図が追加されました。
f:id:hide-sakai:20190422155709p:plain:w400



地図を追加したら左メニューの「Open App」をクリックします。
f:id:hide-sakai:20190422155720p:plain:w400

実際のアプリにログインしてみる



そうすると、アプリのログイン画面が開きます。パスワードを入力してログインしてみましょう。 f:id:hide-sakai:20190423164351p:plain



ログインできましたか?ログインすると一覧が表示されました。
f:id:hide-sakai:20190422155727p:plain:w400



検索機能もサクサク動いてますね。
f:id:hide-sakai:20190422155717p:plain:w400

Glideがあればなんでもアプリ化できる



スプレッドシートをもとに、Glideを使って簡単アプリが作成できました。 Glideであれば、いろいろなアプリが作れます、例えば友人だけに公開する「美味しいランチが食べれるお店アプリ」や社内だけに共有する「社員紹介アプリ」などがスプレッドシートにまとめるだけで作れます。

また、スマホなどでブックマークすれば、ホーム画面にアイコンが登録され、ネイティブアプリのように簡単にアクセスできるようになります。

鎌倉新書では正社員を積極採用しています!

(WEBデザイナー)デザインからコンセプト設計まで■賞与実績4ヶ月分■

仕事内容 【仕事内容】 ■ポータルサイト(お墓・葬儀・仏壇)のWebサイト構築のためのWebデザインの設計からコーディング業務まで担って頂きます。 特に事業側のコンセプトを理解しながら、LPやサイトのデザイン設計を提案できる方を求めています。 【提供できる価値・経験】 ■細かく数字を見て、サービスをグロースさせていく経験 1週間単位でスプリントを組んで、数多くの機能をリリースさせていく開発プロセスを導入しています。 数多くのトライ&エラーを行い、きっちり効果を分析していくことで、サービスを着実に成長させるプロセスが身につきます。 また、事業側のWebディレクターとも密にコミュニケーションを取りながら、事業会社ならではの一体感を持ったクリエイティブワークを実践しています。 ■今後大きく成長するマーケットにおけるサービス開発に携わることができる経験 世界一の高齢化社会である日本においてライフエンディング業界は大きなポテンシャルを持っています。 その業界に必要なサービスを提供することで、大きなユーザーの需要を満たすサービスを提供するやりがいと経験を得ることができます。 また、今の日本社会で必要とされているサービスを提供しているという社会貢献も大きなやりがいとして持つことができます。 【デザインの特徴】 ■企画構想段階から関わり、ユーザー視点に立ったUIの設計、ビジュアルデザイン ■色彩学、構成学、視覚生理学などの知識を生かしたデザイン ■プロジェクトの成功に貢献するデザイン(目的を本質的に達成するデザイン) ■問題点や課題、目的をしっかり理解し、解決するデザイン 応募資格 【必須(MUST)】 ■Webサービスのデザイン・コーディング経験 ■WebサービスやスマートフォンアプリのUI・情報設計の経験 ■Photoshop、Illustratorなどの画像処理ソフトを使用したビジュアルデザイン業務 【歓迎(WANT)】 ■情報の可視化 ■部分遷移、画面遷移を含むプロトタイプ構築経験 ■デザインコンセプトの言語化 ■ユーザー体験の設計業務 ■デザインのトーン&マナー設計 ■プロダクト改善経験 ▼求める人物像 ・自発的に施策を立案・実行できるマインドを持つ方 ・成長環境の中で自分を試してみたい方 ・数字の分析に強い方 ・コミュニケーション能力 ・課題発見力、解決力 続きを見る