皆さま、こんにちは。愛幸毎日ブログ68日目です。
本日は「Glideを使ってみてPWAを作ってみた！」その３です。
Glide内編集方法、設定方法を解説していきます。簡単な説明と解説ではありますが皆さまのお役に立てればと思います。
〈Glideを使って編集してみる〉
スプレッドシートを反映できたらPWAをスマホ上で使いやすく、見やすいようにするために編集します。
以下、Glide編集画面レイアウトです。
左側はアプリ全体に関わる設定です。ほとんどは１番上の【Layout】で画面のレイアウトを編集します。上から2つ目【Tabs】では複数のシートを参照、画面の切り替えをできるようにするモードです。
真ん中はライブプレビューです。現在操作している内容がライブで反映されます。ここを操作してデータを変更することもできます。
右側はインスペクタです。レイアウトやタブの細かな項目設定はここで行います。
〈インスペクタでよく使うボタン〉
・Properties
画面表示時のレイアウトやスタイルを設定します。
・Componets
はじめの画面の項目をどれかクリックすると詳細ページに移動します。
具体的な内容を編集できます。インスペクタ右上の[＋]ボタンから[素材][アクセサリー種類]といった新しい項目を追加します。
[Edit]ではユーザーが画面上で編集することを許可するかどうかというものです。
〈設定する〉
ひととおり編集が終わったら、最後にアプリ公開のための設定をします。
赤枠上から5つ目の【Settings】です。
・アイコンをつくる
緑枠内[icon]をクリックし自分のオリジナルのイラストや画像をアップデートします。
絵文字などから選択することも可能です。[Accent color][Theme]も変更可能です。
・アプリ公開設定
青枠内【Share】でシェアするリンクを、赤枠内[Settings]の[Sign-in]でパスワード作成(必要ならば。個人用や仕事で使うものはパスワード設定がおすすめです。)
→設定完了！
〈実装する〉
設定完了したら、いよいよスマホに入れて使ってみましょう。
- 作成したPWAは青枠内【SHARE】からQRコードまたはリンクを読み取ります。
- 読み込んだら、[ホーム画面に追加]を選択してください。と出てくるので選択します。
- そしてアプリが並ぶホーム画面に戻ります。そうするとアプリと同じように自分が作成したPWAが並ぶのです！
- 作ったアプリをタップすると[パスワード入力]画面になるので先ほど設定したパスワードを入力します。
→実装完了！
〈編集後記〉
今回は編集～実装までを簡単に説明させていただきましたがいかがでしたでしょうか。
実際に使ってみると、スプレッドシートがGlideではこのように反映されるのかという発見があったり、逆に思っていたようにならないと感じることがあります。レイアウトの設定はパズルのようでもあるので面白かったです。
今回作成したものは1時間ほどでできましたが、もっと簡単なものなら10分から作成可能です。アプリ制作と聞くと一般的にはプロの専門的な技術が必要だと思いますよね。
しかしGlideでは一切コードが書けない初心者でも、読み込み速度が速くシンプルなつくりで使いやすいアプリと同じようなウェブアプリが作れてしまうのです。とても革新的なサービスだということがわかりました。
次回は「特集！PWAを作ってみた~番外編~」、利用してみて良かった点や気づいた点を紹介したいなと思います。