見出し画像

「やり込み要素」をGlideでPWAにしてみた.【ノンコーディング】【webアプリ】

この人生のやり込み要素のお話が面白かったので,
せっかくなのでwebアプリにしてみました.
プログラミングなしで作れます!
超簡単!
なので,ぜひ皆さんにもやってみて欲しいので記事にしてみました.

プログラミングなし→Glide,webアプリ→PWAって感じです.

PWA:Googleが提唱しているアプリっぽいウェブアプリ.iOSなら【共有→ホーム画面に追加】でアプリっぽくなります.

Glide:スプレッドシートからPWAを作成してくれる.UIとか組んでくれるGoogleさまさま.

スプレッドシート作成

まずはスプレッドシートでやり込みリストの雛形を作成です.

ミヤザキユウさんに倣ってこんな感じです.

シートの名前も【やり込みリスト】にしておきましょう!
あとでGlideに影響してきます.

画像1

Glideプロジェクト作成

Glideと検索しましょう.
面倒な人は次のリンクをクリックです笑

Googleのアカウントで【Sign in】できます.

(0.チュートリアルが出てくるのでSkipする)
1.左側のプロジェクト一覧からNew Appを選択
2.先ほど作成した【やり込みリスト】のスプレッドシートを選択

※下の画面のAppsの下の3つのアイコンは僕が前に作成したアプリたちです.

画像2

アプリ編集画面に遷移し,
左側のパネルがこんな感じに変わります.
ここまでくればほぼ終わりです.
あとはほぼセンスですね笑

画像3


Settings

Theme->Boldへ(趣味ですね笑)
Icon->好きなアイコンを選択

Screens:トップ画面

アプリの画面をいじるのにはScreensを選択.
Listでどんどん積んできたい.
下の画面が目標です.

画像4

うん,設定はこんな感じですね.

1.Layout->List
2.Show search box->off
3.Add item->on
4.Show initials as default image->on

画像5

お好みでLayoutとかTitleはいじくってみてもいいかもしれません.
性質上search boxはいらないですかね?

Screens:アイテム画面

アイテム画面は,トップ画面でアイテムをクリックすると遷移できます

ここでは次の2つを実装します.

1.内容,No.,記録日,達成日を表示
2.内容,記録日,達成日を後から記入

1.表示
基本的に自動で組んでくれます
が,
足らない部分はComponentsの右側のプラスをクリックして足しましょう
クリックするとSearch Boxが出るのでSimple Valueと入れて追加です

画像6

2.記入

アイテムの画面の右上の鉛筆ピクトグラムをクリックすると遷移します

Componentsの右側のプラスをクリックして
項目を追加します.
こんな感じです.

画像7

登録

スマホでPWAとして使えるようにします.

1.URLをコピーしてスマホに送信
2.ホーム画面に追加

もはや手順とは呼べませんね笑
URLの共有方法については,編集画面の左下のShare Appでもいけます.
URLが共有できればなんでもいいですね.

感想

爆速で出来上がりました.
なんなら記事書くほうが時間かかりました笑.