皆さま、こんにちは。愛幸毎日ブログ66日目です。
今年も猛暑日が続きますがマスク必須で息苦しい日々に体調は崩してないでしょうか。本日から全3回にわたり、「Glidoを使ってPWAを作ってみた！」を特集します。以前にPWAを毎日ブログにて解説しましたが、まずはPWAの概要をおさらいします。
目次：
１．PWAとは？
２．実際につくったもの
３．Googleスプレッドシートで構成を考える
〈PWAとは？〉
PWAとは「Progressive Web Apps」を略した言葉で、モバイルサイト上でネイティブアプリのようなユーザー体験を提供する技術です。ウェブとアプリの両方の良さを兼ね備えています。インストールは必要なく、読み込み速度や表示の高速化が可能でWEBページでありながらアプリのような機能を持つため、ユーザーへのアプローチができます。社員のスケジュール管理やオンラインストアを作ることもできます。
〈実際につくったもの〉
今回使用したGlideは無料版です。基本的な操作は無料版で十分だと思います。作成する上でまず、PWAを作るうえでまずコンセプトを考えました。今回は試験的に活用してみたかったため、私は趣味であるハンドメイドアクセサリーを管理するwebページを作ることにしました。作品名と写真、種類ごとに分類し一覧で見られるようにしました。
以下、作成したものとなります。
・作成したPWAはQRコードまたはリンクを読み取り実装します。詳しくは19日に記載します。
・【作品一覧ページ】では制作した全作品を写真とともに見られます。
・各作品をクリックすると[キャッチコピー]、[使った素材]、[大きさ]、[アクセサリー種類]があります。
・タブ右下、【種類】をクリックすると[アクセサリー種類]のみ表示されます。
・例えば[イヤリング]をのぞいてみると一覧内のイヤリング作品のみが分類されます。
〈Googleスプレッドシートで構成を考える〉
このようなPWAを作成するにはまずGoogleスプレッドシートで構成を考える必要があります。
- GoogleスプレッドシートとはExcelのようなもので表に必要な値や項目を入力します。
- 項目にフィルター機能を使って選択機能を入れます。[項目]ごとに分けることができるので見やすくなります。
- 種類タブを増やしたい場合、ページを細かく分類したい場合はシートを追加します。
Googleスプレッドシートの基本的な使い方は以下をご覧ください。
pladyパソコンスクールさま：Googleスプレッドシートの使い方講座
▶
PWAはアプリに比べてシンプルで自分が使いやすく、いつでもカスタマイズできることが特長でもあります。明日はGlideにGoogleスプレッドシートをダウンロードしGlide内での編集方法を紹介します。