ノーコードBubbleを使って1ヶ月で絵本読み聞かせアプリを作成してみた

子供を寝かしつける際の絵本読み聞かせは終わりがないと思いませんか？私の家では毎晩２～５冊の絵本を読んでいますが、途中で子供が寝てしまうなんてことはありません。どちらかというと親が先に寝落ちしてしまう確率の方が高いです。

今回はそんな寝かしつけの悩みを解消すべく、ボイスメモアプリを開発しました。ノーコードツールBubble学習から1か月程で作成したサービスになり、躓きポイントや感想をまとめています。

この記事を最後まで読むことで、ノーコードBubbleを使ってどれくらいの期間でどれくらいのサービスが作れるのか参考になりますよ。

1. サービス紹介
2. 作ってみた感想
- 2.1. つまづいたポイント
  - 2.1.1. 投稿された記事に対してコメントを紐づけることができない
  - 2.1.2. 投稿が無い時に指定のテキストを表示させる
3. 今後の予定
4. 次回の作成予定アプリ

サービス紹介

約1か月間（30時間）ほどで作成したサービスになります。

【機能紹介】

ログイン/ログアウト
新規登録時メール認証
ボイスメモ投稿
コメント入力
いいね
投稿削除

音声投稿型のSNSとなります。どんなアプリか見てみたい場合は、テストアカウントを用意しているので、登録しなくてもお試しいただくことが可能です。

https://pokevoice.bubbleapps.io/

アプリの目的

私は30代男性で2人の娘がいますが、妻が居ないと娘たちがなかなか寝付いてくれず困っていました。ふと、妻の声で絵本の読み聞かせができたら寝てくれるのでは！？という考えが浮かび、今回のPokeVoiceを作ろうと思いました。

絵本の読み聞かせは、幼少期の子供にとって必要なことだと思っています。物語を通じて想像力を育み、感情が豊かになっていきますし、絵本の中に出てくる登場人物やお話の流れを子供と話し合うことで、親子の絆が深まるからです。

機能一覧

機能名称	内容
新規登録時メール認証	ご自身のメールアドレスに通知が届き、承認することで登録できます。追加でプラグインを入れなくても実装可能でした。
ボイスメモ投稿	このアプリの目玉機能になります。スマホからもPCからも投稿可能です。
コメント入力	投稿された絵本に対してコメントを入力できます。
いいね	投稿された絵本に対して「いいね」ができます。
投稿削除	投稿した本人のみ投稿した絵本を削除することができます。

使用した言語

Bubbleというノーコードツールを使用しました。Bubbleに関してはこちらで詳しく解説しています。

ノーコードツールBubbleを使うと爆速でアプリ開発が可能になる！元SEが開発アプリ事例も踏まえて魅力を解説

作ってみた感想

スマホから手軽にボイスメモが投稿できるので、寝る前の読み聞かせ時に録音しておいて次の日に使っていました。絵本を読むという行為はPokeVoiceにお任せ！物語の考察や、登場人物の気持ちを一緒に考える時間を作る余裕が生まれました。

子育てサークルのパパ達にも共有し、使ってもらったところ以下の意見をいただけました。

投稿が公開されるのは恥ずかしい
投稿者を年代ごとにソートできると嬉しい
SNSログインしたい
どこから登録するの？
iPhoneで再生できない

様々な意見を頂いたので、これからPokeVoiceの機能を追加・修正していき、よりよいアプリにしていきます。

【追加予定】

録音/再生時間バーの表示
投稿非公開設定
DM機能
お知らせ通知
SNSログイン

つまづいたポイント

PokeVoice作成時につまづいたポイントは２つありましたが、どちらもNoCodeCampに質問を投げかけたところすぐに回答してもらえました。

プログラミング学習時やオリジナルアプリ開発時は必ず問題に衝突します。3日悩んでも解決できないことが多く、それをきっかけに挫折してしまうことがありましたが、質問できる環境があることで挫折回避できます。

ただ、注意しないといけないのは、問題に直面してすぐに質問しないことです。順序だてて質問文を作成することで、自分の中で問題が整理され、自己解決できることも少なくありません。

以下に質問文の例を作成しました。最初はかなり面倒ですが、慣れてくると自分の思考整理にもなりますし、質問相手の時間を奪うことがなくなるので、結果として早期解決に繋がります。

【質問文の例】

解決したい問題
いいね機能を実装するために、ハートボタンを実装したが、カウントアップされない
調べたこと
以下のページを参考に添付画像のような設定をしました。（参考URL＋スクショ）
試したこと
Likeテーブルを作成し、カウントできるようにLikeCountとLikeUserのfieldを追加
ハートボタンを実装し、カウントアップできるように計算式を追記
調べたことに対する仮説
データベース間の関係性と表示したいデータの関連付けがうまくいっていないと思っています。

このように順序立てて自分の不明点や試したことを洗い出すと一回の説明で解決できることがあります。さらに画像や参考にしているURLを載せているので、回答者も質問者の問題がわかりやすくなり、回答しやすくなります。今回作成したPokeVoiceもたくさんの壁がありましたが、思考整理して質問して一つずつ解決していきました。

投稿された記事に対してコメントを紐づけることができない

絵本詳細ページにコメント送信機能を設けて投稿できるようにしましたが、投稿に対するコメントを表示することが出来ませんでした。なぜなら、Commentテーブルから全ての情報を持ってきて、表示しようとしていたからです。

そこでER図を作成し（本来は開発前にやること）関係性を見直したところ、どの投稿に対してどのコメントが紐づいているかの関係性が設定されていないことがわかりました。

BooksテーブルのBook_commentのidと現在表示している投稿ページのidが同一のデータのみ表示する設定に変更したところ、無事目当てのデータが表示できました。

変更前のRepeatingGroup設定

Data sourceをCommentsテーブルから作成順に全て取得しています。

これでは投稿したコメントが全て表示されてしまいます。

変更後のRepeatingGroup設定

CommentBook（投稿ページid）とCurrent Page Books（現在のページid）が一致するコメントを投稿順に並べ替えて取得するようにしました。

投稿が無い時に指定のテキストを表示させる

投稿が全くない時は投稿を促すテキストを配置しようと思いましたが、投稿があってもなくても表示されてしまっていました。

表示/非表示を切り替える時にミスしがちなのが「This element is visible on page load（この要素はページの読み込み時に表示されます）」にチェックを入れるかどうかです。

非表示にしたい場合はチェックを外しておき、Conditional設定にて表示条件を指定することで解決できました。RepeatingGroupにはログイン中のユーザーがいいねした投稿のみを取得してきているので、表示するデータが０の場合は「いいねをしてお気に入りを追加してね」というような表示が出てくるように設定しました。