こんにちは、Masukoです。
アナログ人間が進化を遂げるべく、もがき続けて必死のパッチです。
今回はノーコードでアプリ作成チャレンジのお話です。
以前、記事に書いた荷物発送の管理なんとならない？のお悩み改善再チャレンジ企画！
過去の記事はこちら↓ （Dify×Make×LineBot）
正直画像アップロードが手間で使えていませんでした😂
もっと手軽に出来ないかと思い、今回のアプリ作成に至りました。
今回もゴールまでの道のりが長すぎた
「荷物発送管理アプリ」作成までの道のり
アプリでは以下の3点が可能💡
- 伝票情報の登録・履歴参照（スマホでサクッと！）
- 会場の住所や電話番号参照（伝票作成するとき、住所等いちいち調べなくていい～）
- 電話帳から電話（運送会社さまの電話を登録しておけばスピーディに連絡可能！）
使用ツール
- Glide
- スプレッドシート
📝まずはスプレッドシートを準備
アプリで表示させたい項目は「伝票登録」「会場一覧」「電話帳」「履歴」の4点ですが、データ連携をしたいため以下の７シートを準備しました。
💻スプレッドシートのデータを取り込もう！
まずはGlideにログイン！
Glide(https://www.glideapps.com/)
New app ➡ google Sheets ➡「import Google Sheet once」
（⚠無料枠は1回しかスプレッドシート連携できません）
➡以下のような画面が出てきます。
➡スプレッドシート連携内のデータを連携します。
今回は「会場」と「会場一覧」のシートを紐付けたいので以下で実施します。
上部「Date」➡Table「会場」選択➡[右]上部「＋」を押して表のとおりに設定➡[Save]
項目の隣にデータが出現しました。
➡「Layout」に移動
「外部会場」の中はまだ真っ白。
[左] COMPONENTS「＋」を押す ➡ COLLECTIONS > Listを選択
そうすると連携したデータが現れます。
入力画面を作ろう！
大本命「伝票情報を入力」をする画面を作ります！
「伝票入力」の画面で再び、COMPONENTS「＋」➡FORMS > Form Containerを選択
そうすると↓写真①↓の画面になります。
事前にスプレッドシート「履歴」に記入をした項目を入れたいので、
[左] COMPONENTS > Form Containerを選択
[右] Date > Table tableを「履歴」に変更
そうすると↓写真②↓のように事前に設定した項目が表示されます。
中身を変更していこう！
「日付」はカレンダーから選びたい！
今は文字を入力するタイプなので作り直そう！
[左] COMPONENTS「＋」➡ FORM ELEMENTS > Dateを選択
[右] Date > Table tableを「日付」に変更
追加したら不要な項目は✖で削除しよう！
「発送先」などはドロップダウンリストから選びたい！
[左] COMPONENTS「＋」➡ FORM ELEMENTS > Choiceを選択
ドロップダウン選択できるようになります。
⇒同じように「発送先」も設定変更。
「宛先」は「発送先」の選択肢によって表示させるリスト情報を変えたい！
（↓こんなイメージ）
同じようにFORM ELEMENTS > Choiceを選択 ➡ [右]Optionsの中のFILTER DATEを設定
設定すると以下のように変化します！
後は必要な項目を修正・追加して完成！
ちなみに画像を取り込みたい場合はこちら👇
ただし、無料プランでは保存できる容量は100MBみたいなので多くはUPできません😂
⇒入力画面で必要事項を入力して「提出」を押すと履歴に表示された🙌
📞電話帳から電話をかけよう！
画面中央青枠の「電話をかける」ボタンを設置
[左] NAVIGATION >「電話番号」を選択➡COMPONENTS > ACTION > Buttonを選択
[右] ACTIONの中身を設定
これで実際にアプリから電話がかけられます！
細かいところを修正していこー！
◆「履歴」画面の表示形式
時間の表示は不要なのでDate画面より日付のデータを修正➡「Date only」で日付のみの表示になります
◆「履歴」画面のデータ表示数
表示されるデータ個数と日付の降順設定（新しいデータを上から表示）
◆検索窓の表示・非表示
所々に現れる検索窓🔍設定したいところのOptionsのSEARCHで必要に応じてON・OFF
アプリを公開する準備をしよう！
中身が完成したらいよいよ公開間近！
画面右上「Settings」
各項目
Accessを開いて今回は「Private」で設定
🐣ついにアプリを公開するよ！
画面右上「Publish」で公開！！
公開後に表示されるQRコードを読み取ると、Webアプリへログインできるようになります。
無料プランだと、公開できるアプリは1つ。
非公開にするときはShare > Publishing > Unpublishで非公開状態に戻せます。
初めてGlideを使用してみて…
挫折しかけたよ。ほんとに。😿
「感覚で触っていったらとりあえずなんとかなるんじゃね？」
と、舐めてかかった自分をまじで殴りたくなりました😂
色々触ってみたり、他の方の記事を読んでみたけど…理解ができない(´；ω；`)
すぐに理解してる人まじですごい。
「あかん、、、意味わからん。詰んだ・・・」（絶望）
そんな絶望の縁に立った私を救ってくれたのはこちらの動画！
15分程の動画だけど、中身濃いっっ！！
ありがとう、スチームとーちゃん😭
スプレッドシートとアプリ、両方何回も作り直してやっと今回のアプリが完成！
ここまできて、何となく要領が掴めたような気がします！
(気のせいかもしれません！！)
少し分かったら楽しくなってきたので、他にも作ってみたいな～～
でも無料プランは1個しか公開できない～～🫠
以上、お読み頂きありがとうございました