見出し画像

ノーコードでアルコールチェック表を作る Glide編

ノーコードってどうなの?何に使えるの?
と言っている方に向けた記事です。

前回はノーコードであるAppSheetでアプリを作りました。アルコールチェック表アプリです。今回このアプリのGlide版も作ってみました。


画像25


GlideでもAppSheetとだいたい同じように作れます。

大きく違う部分といえば無料枠の利用者制限です。
無料枠の利用者制限のAppSheetとGlideの違いは

・AppSheetはユーザー10人までに配布できる
・Glideは利用人数制限なしで大勢に配布できる

このようになっているのでGlideは観光ガイドとかカタログのような不特定多数が使うアプリに向いています。逆に使う人を制限するには不向き。無料枠内でなんとかしたいのであれば使い分けるといいと思います。(私が知らないだけでAppSheetでも人数制限無しで配れるかもしれません。GlideやAppSheetの無料枠制限は調べてみてください。)


<前回記事リンク>


今回も作り方の流れを書いていきますが、下の書籍を参考にしました。どれもアマゾンの読み放題サービスに入っていれば無料で読めますのでオススメです。





作り方の手順

Glideでアプリを作るにはこんな4ステップがあります。

① データを用意
 アプリの元になるデータベースを用意します。最初は最低限の機能を満たすようにします。この記事ではスプレッドシートを使いますが他のデータベースも使えます。

② アプリを編集
 UI(アプリの見た目)の作り込みを行います。Glideはブラウザ上で実際の画面を見ながら構築できるので完成をイメージしやすくなっています。

③ アプリを公開(デプロイ)
 アプリが完成したら公開。Glideの場合、自動的に公開用のページも作られます。

④アプリをアップデート
 アプリを公開して利用が始まったら、利用者の感想を聞いてどんどん改善していきます。


①データを用意


 今回は下のようなデータをGoogle スプレッドシートで用意します。
ファイルは1つで中身は4個のシートです。

ファイル名 点呼記録簿Glide
シート名 チェック表
 項目「日付、運行状況、氏名、点呼執行者、検知器の使用、酒気帯び、疾病疲労等の状況、写真、備考」
シート名「社員マスタ」
 項目 氏名
シート名「運行状況マスタ」
 項目 運行状況文言
シート名「有無マスタ」
 項目 有無文言


画像1
画像2
画像3


画像10


上のスクリーンショットと同じようにシートを4つ作ってください
社員マスタには適当に名前を入れておきます(前記事と同じ)
運行状況マスタには運行前、中間、運行後
有無マスタには無、有
この4つのシートがアプリの元になります。



②アプリを編集

・2-1.Glideにログイン
Glideのページを検索して開きます
https://www.glideapps.com/

ログイン画面へ進みGoogleアカウントでログインします。
初めてログインしたときだけ許可を求められますが画面に従って進めてください。

Glide画面画面が開いたら、

画像4

プロジェクトを作成します。画面中央付近の「New Project」をクリックします。プロジェクト名は適当に付けます。

画像5

Select a source(データ元)は、Google Sheetsを選択して、最初に作ったスプレッドシートを選択します。

画像6


・2-2.トップ画面
トップ画面を整えるために「表示形式を変える」「追加ボタン追加」を行います。

「表示形式を変える」:
画面左側メニューの「チェック表」をクリックして
画面右側メニューの「Cards」を選択します。
DATAの中身を
 Image 写真
 Header 日付
 Title 氏名
 Datails 運行状況
に変更します。

画像7

「追加ボタン追加」:
左側メニューの「チェック表」をクリック「Cards List」をクリック
右側メニューの「Add Form」をクリック「Allow users to add items」にチェックを付けます。

画像9


これでトップ画面の右上に追加ボタンが付きます。


・2-3.追加画面の編集
データ追加画面を出して各項目を編集していきます。

トップ画面の右上の+ボタンを押します

画像11

画面左側メニューを見ます。

画像10

SCREENの右の⊞ボタンを押すとメニューが出てきます↓

画像12

Insert Componentの中のPICKERSの「Date」アイコンをクリックします。
赤色表示で「Date 日付」というのが追加されたと思います。
「Date 日付」を選択して右側メニューを下のスクショのように変更します。

画像13


変更出来たら、左側メニューのSCREENの中の「Text Enter 日付」のちょっと右側のxを押して「Text Enter 日付」項目を削除し、「Date 日付」を一番上にスライドさせます。

画像14


このような要領でドンドン画面を編集していきます。


次は運行状況。
運行状況は「運行前、中間、運行後」から選択するので3つボタン式にします。
SCREENの右の⊞ボタンを押します。
PICKERSの中の「Choice」アイコンをクリック
右側メニューを下のスクショのように変更します。

画像15

ちなみにRequiredにチェックを入れると入力必須項目になります。

運行状況が追加できたら、もともとあった「Text Entry 運行状況」を削除します。


同じような要領で他の項目を下のスクショのように編集していきます。

氏名:

画像16

点呼執行者:

画像17

検知器の有無:

画像18

酒気帯び:

画像19


写真:

画像20


もしかしたらスクショでは分かりにくいところがあるかもしれません。細かい部分は後で修正できるので、分かる範囲で編集して完成させましょう。



③ アプリを公開(デプロイ)

 アプリを公開します。

画像21

画面右上のPublicボタン(またはShareボタン)を押します。

画像22

「公開する」を選ぶと上の画面のようなQRコードが表示されます。しかし、このままだと自分用のアプリなので公開設定に変更します。
「Personal App」の右のEditボタンを押します。

画像23

画面右側にSettings画面が出てくるのでオレンジ色のアイコンの「Privacy」をクリック、PUBLIC SING-INのPublicにチェックを入れたら、Shareボタンを押してQRコードを出します。すると

画像24

さっきと違って、「Personal App」の下の文字が「Your app is public」に変わりましたね(さっきは「Team member only」)。
この画面のQRコードをスキャンしてブラウザで開くと、このアプリが使えます。スマホで開くとインストールもできます。






#Glide #ノーコード #情シス #業務改善 #アルコールチェック #ノーコードアプリ #プログラミング #つくってみた




この記事が参加している募集

この記事が気に入ったらサポートをしてみませんか?