ゼロからの業務効率化ノート

30代未経験から始まったノーコード&Pythonチャレンジ

【画像も貼れるメモ帳】ノーコード初心者必見!Glideで作るアプリのアイデア事例その2


ぬこ将軍です🐈
ノーコードに興味をもったのは結構前からですが、すぐに仕事に活用しようという発想はなくて、最初は趣味の延長上でアプリを作ってみようかなくらいの感覚でした(笑)


今回は「ノーコードツールGlideでのアプリ作成事例」の第2弾です。
ノーコードツールGlideでアプリを作成するために知っておくと良さそうな基本的な機能については色々書いたと思うので、今度は私が趣味の延長で作ってみた簡単なアプリの事例と作成手順の概要を共有しようと思います。

  • 「ノーコードツールを使ってアプリ作成を始めるためのキッカケが欲しい!」
  • 「ノーコードアプリを自分でも作れるのか不安!」

そんな風に感じている方の参考になれたら幸いです。

Glideでノーコードアプリを作る時に知っとくと良さそうな機能の話は以下の記事群で書いてます。

nukoshogun.hatenablog.com

nukoshogun.hatenablog.com

nukoshogun.hatenablog.com



Glideで具現化したアイデア事例:画像も貼れるメモ帳アプリ

ダヴィンチはメモをする習慣があったとか

作成のキッカケ

実は今回紹介するアプリは、私がGlideで初めて作成したノーコードアプリです。
ノーコードツールで何か作ってみようかなと考えていた当時はメモをするということにハマっており、「スマホを起動して、思いついたことや画像をすぐに添付できるようなアプリを作ってみたい!」と思いついたのがきっかけです。
さらに、「書いたことを確認しやすいようにジャンル別に表示できたらいいな!」と思ってフィルター機能も追加しました。

アプリの概要

本アプリは2画面で構成されており、トップ画面に使い方を記載しています。

もう1つの画面は今まで書いてきたメモが格納されたリストです。タイトルやジャンルだけでなく、添付されている画像をサムネイルとして表示しています。またこの画面から検索やカテゴリー別の表示が可能です。

各メモをタップすることで詳細内容や添付した画像が確認できます。画面右上にある鉛筆マークをタップすると編集画面での編集が可能です。

ちなみに、各メモに添付できる画像はとりあえず3枚までとしています。こんな感じで、「思いついたことを文章や画像ですぐに残せるアプリ」を作成しました!

Glideでのアイデア具現化までの実践事項

データベースの準備

まず準備したのは、メモの内容表示や入力フォームのもとになるGoogleスプレッドシートです。

あとはメモの一覧画面でSourceとして指定すればOKです。

もう1つ、ジャンル選択用のプルダウンリストで参照するGoogleスプレッドシートも用意しました。

メモの新規追加時や編集時にジャンル用のプルダウンリストのSourceとして指定すればOKです。

データベースの準備についてはコチラも参考になります。
【ノーコード始めるならコレ!】初心者必見!Glideで始めるアプリ作成入門ガイド - ゼロからの業務効率化ノート

画面内のCOMPONENT追加方法についてはコチラを参照ください。
【ノーコード始めるならコレ!】初心者必見!Glideで始めるアプリ作成入門ガイド3 - ゼロからの業務効率化ノート

使い方説明用の画面追加

本アプリ自体は誰かに共有したわけでもないですが、自分の振り返り用として使い方の説明画面を追加してみました。

「NAVIGATION」の横にある+マークから新規画面を追加し、追加した画面内には説明テキストを数個に分けて設置しました。

メモ一覧画面での画像表示

過去に自分がメモした内容を探したり振り返ろうとしたとき、文章だけでは思い出すのが難しいことはありませんか?
すぐに記憶を呼び起こす助けとなるかもしれない画像を一覧から確認できるように設定してみました。

リスト設定の1つであるCONTENTのImageで、データベースの写真列を参照するように設定しています。
ちなみに複数の画像を添付した場合は、1番目に添付した画像が表示されます。

リストの設定については以下の記事も参考になります。
【ノーコード始めるならコレ!】初心者必見!Glideで始めるアプリ作成入門ガイド2 - ゼロからの業務効率化ノート

検索用フィルターの設定

過去のメモを検索する際に直接キーワードを入力することもできますが、ジャンルを選んでフィルタリングしたほうが探しやすい気がしたので、フィルター設定により特定のジャンルのみの表示も可能にしています。

新規メモ追加機能の設定

このアプリでは新規メモを追加できるようにしています。

新規追加画面での入力項目のうち、ジャンルはプルダウンリストから選択した方が楽だと思ったのでデータベースで作ったリストから選択してもらう形式に設定しています。

各画面の項目設定については以下の記事も参考になります。
【ノーコード始めるならコレ!】初心者必見!Glideで始めるアプリ作成入門ガイド2 - ゼロからの業務効率化ノート

【ノーコード始めるならコレ!】初心者必見!Glideで始めるアプリ作成入門ガイド3 - ゼロからの業務効率化ノート

Glideアプリの事例まとめ

今回書いたアプリについてまとめると以下の通りです。

  1. 概要:文章だけでなく画像も残せるメモ帳アプリで、過去の内容も思い出しやすい。
  2. 背景:スマホを起動して、思いついたことや画像をすぐに添付できるようなアプリを作ってみたい。過去のメモを振り返りやすいと尚良い。
  3. アイデア具現化のための実践事項:①データベース準備、②使い方説明用の画面追加、③メモ一覧画面での画像表示、④検索用フィルターの設定、⑤新規メモ追加機能の設定

今回のアプリは文章だけでなく画像も添付できるメモ帳アプリです。メモ帳のように構成がシンプルなアプリは、初めてノーコードツールでアプリを作ってみるには良い題材なのかなと思います。

この記事を機に、あなたもノーコードアプリを作ってみませんか?