Appsから新規アプリ作成スプレッドシートを読み込むはい完成そうは言ってもUIを最適化しましょう。Glideの編集画面レイアウトすべて表示はいどうも〜UI/UXデザイナーのうっくんです。App)を作る方法を紹介したいと思います。プログレッシブWebアプリケーションは、Webを通じて配信されるアプリケーションソフトウェアの一種で、HTML、CSS、JavaScriptなどの一般的なWebテクノロジーを使用して構築されます。これらは、標準に準拠したブラウザを使用するプラットフォームで動作することを目的としています。Wikipediaen.wikipedia.orgと、まあ適当にWikipediaを翻訳してみましたが、この説明だけだと普通のWebアプリと変わらないですね。続きを読むとこう書いてます。従来のウェブアプリは、最初からスマホで動くことを想定しているネイティブアプリに比べて一般的に「遅い、機能が少ない、起動される頻度が少ない、オフラインで全く使えない」、などの弱点がありました。ここを解決しようとしたのが「プログレッシブ」の部分になるわけですね。言うと、ネイティブアプリみたいなウェブアプリっちゅうことやな。細かい技術的なことは技術的な方が書かれていると思いますので、ググっていただいて今回はそんなPWAを一切コードを書かずに10分で作れるという魔法のようなサービスを紹介します。AppsはGoogleスプレッドシートを「データベース」として利用し、簡単なPWAを自動的に生成してくれるというものです。部品の中から好きなものを選んでカスタマイズすることもできます。Appsへはこちらから行くことができます。Appsのアカウント作成をしましょう。Docsへのアクセスを許可する必要があります。ワークアウト管理ツールを作ってみよう今回は例として、ワークアウト(ジムでのトレーニング)を記録する自分専用のアプリを作ってみましょう。運動の記録(タイトル、日付、回数)が入力できて、保存すると、自動的に時間順に並べてくれます。いつどれだけ運動したかという記録が一目瞭然になります。Appsでアプリを作る場合、まずベースとなるデータベースをスプレッドシートで作っておくと良いです。今回の場合、下記のようなデータが必要になるのが完成後のイメージからわかると思います。(10回など)さらにダミーのデータを1つ入力してみましょう。Appsからロードしたときに、データのタイプを判断して、いい感じに扱ってくれます。スプレッドシートに名前をつけて保存しましょう。Appsを開いてみましょう。クリックして、新しいアプリを作り始めましょう。スプレッドシートを読み込むGoogle連携が求められたら、許可します。先ほど保存したファイルを選択し、次へ。嘘やろ?と思われるかもしれませんが、これだけで完成です。あとはUIを用途に応じてカスタマイズして、公開するだけでリンクを知っていれば誰でもアクセスして利用可能になります。言ってもUIを最適化しましょう。ダミーのデータが一つしかなかったので、Glideは1つのデータを表示するのに特化したUIのテンプレートを自動的に作りました。実際は、複数のデータを入力して一覧できる必要があるので、カスタマイズしていきましょう。画面のレイアウトを編集するモード。ほとんどはこのモードで作業します。(真ん中、青いエリア)ライブプレビューこのまま操作してデータを変更したり入力ができる。(右、緑のエリア)インスペクタ赤いエリアか青いエリアで選択した要素に関わる設定項目がここに表示される。リスト表示に切り替える今回、データが一件だったのでデフォルトで、1件しか表示しないDetailsという表示パターンが選ばれています。これをListに切り替えてみます。それっぽくなりました。Listはよく使うので覚えておくと良いのですが、今回は、Calendarの方が実はいいので、カレンダー表示に変えてみましょう。最初に紹介した完成イメージにかなり近づきました。firstに変更しましょう。すれば、新しいアイテムがリストの一番上に表示されます。触ってみた人は気づいたかもしれませんが、このままではデータを追加することができません。「ADD」のセクションから、データの追加を許可しましょう。itemsのチェックボックスをOnにすると、新たな設定項目が表示され、アプリのプレビューには追加時のUIが表示されています。ダミーデータを入力したおかげで、データ入力時のUIもそれぞれ最適なパーツがデフォルトで選択されています。Dateの部分はスマホ上ではDatePickerを使って簡単に日付を入力できるようになります。変更したい場合はインスペクタエリアを触って、変更することができます。アプリのプレビュー上で「キャンセル」を押して、元のリスト画面に戻りましょう。すると、リストの右上、アイテムを追加するための「+」ボタンが表示されています。これでアプリは完成です。あとは、アイコンをカスタマイズするなどして、アプリを公開しましょう。appとクリックすることで、アプリが公開されURLが生成される。これで、URLが生成されます。あとはそのURLをスマホで開いて、「ホーム画面に追加」することで、あたかもネイティブアプリのように使用することができます。他人にシェアして一緒に使うこともできますが、ログイン機能などはさらなる開発が必要なので、全員が同じデータにアクセスし、同じものをみることになります。Appsによれば100人以上で同時に使っても大丈夫な設計になっているとしていますが、大規模での使用にはより細かいニーズ(ログイン、権限、データの出しわけ)やUIのカスタマイズの必要性も大きくなってくると思いますので、個人〜小さなグループでの使用に向いていると思っています。料金について現時点では、500レコード(ワークアウト管理の例で言うと、1回のワークアウト記録が1レコード。要するにスプレッドシートの1行分。)まで無料ということになっています。それ以上は下記の通り。(最新の情報は公式サイトでご確認ください)500件なら個人のワークアウト管理や、メモアプリなら、かなりガッツリ使えると思うので、非常に良心的。安すぎる気がするので、将来実質的な値上げはあるかも。Appsは精力的に新機能を開発しており、これからもどんどん便利になる可能性が高いです。それでは皆さん、良いアプリライフを!メリークリスマス!ダウンロード#UI#UIデザイン#アプリ開発この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。某自動車メーカーでUIデザイナーをしていました。現在はdely株式会社で新規事業のUI/UXデザインを担当しています。記事まとめデザイン系の記事を収集してまとめるマガジン。ついた記事などをチェックしています。こちらもおすすめ【デザイナー向け】Lottieの使い方。クリエイターへのお問合せnoteカイゼン目安箱クリエイターの。