【Bubble】公式プラグインを使用したオリジナルアプリの紹介

こんにちは。

前回の記事で紹介しましたBubbleの公式プラグイン「Ionic Elements」を使用したオリジナルアプリを作成してみましたので、今回はそのアプリについて紹介したいと思います。

　　　　　　↓Ionic Elementsについて紹介した記事はこちら↓

オリジナルアプリの紹介

●概要

私が作成したのは「自分のお気に入り楽曲リストを作成することができる」というアプリです。また、その曲をジャンルごとに分類したり曲名やアーティスト名で検索したりすることができます。

ジャンルを絞り込む部分にIonic Toggle、曲を登録する際のジャンル選択にIonic Checkbox、アイコンなどにはIonic Iconを使用して作成しました。

●使い方

※ここでは分かりやすいように曲名を登録した時のジャンルの名前にしています。　※実際には赤枠と赤文字は表示されません。

▶曲を登録する

➀「曲の登録」ボタンをクリックし、曲を登録するためのポップアップを開きます。

➁登録したい楽曲の曲名・アーティスト名を入力し、下のチェックボックスでその曲のジャンルを選択します。

③登録ボタンをクリックすると「登録が完了しました」と表示されるので、×ボタンでポップアップを閉じます。

④曲が登録されます。

▶曲をジャンルで絞り込む

➀右上の「絞り込み」で絞り込みたいジャンルのトグルを選択します。

➁そのジャンルの曲だけが表示されるようになります。

③トグルをオフにすることで元に戻ります。

▶曲を検索から絞り込む

➀右下の検索ボックスに探したい曲名やアーティスト名を入力して検索ボタンをクリックすると、前方一致検索をすることが出来ます。

➁「検索を解除」をクリックすることで元に戻ります。

●改善したい点

▶ジャンル分けの部分

ジャンル分けの機能を作る際、楽曲を表示するリピーティンググループに対して「J-POPのトグルがオンになっている場合、J-POPが"Yes"の曲だけを表示する」というように1つのジャンルごとに細かく条件を設定しました。

しかし「全てのトグルがオフになっている場合」にリストに何も表示されなくなってしまいました。

そのため、全く同じリピーティンググループを2つ重ね、

●トグルが1つもオンになっていない場合

条件を設定していないリピーティンググループAを表示

●トグルがどれか1つでもオンになっている場合

条件を設定しているリピーティンググループBを表示

という風に対処しました。しかしこの方法だと、「ジャンルを2つ以上選択できない」「2つ重なっているので編集が大変」などといった問題点が複数発生してしまったため、別の方法を調査中です。

●今後の課題

➀ジャンルで絞り込む際にトグルを複数選択できるようにする

➁お気に入り登録している曲だけを表示する機能を付ける

③ジャンル名も楽曲リストに表示できるようにする

③曲を登録する際にジャンルのチェックボックスを1つ以上選択できないようにする

④ログイン機能を実装し、自分だけの楽曲リストを作ることが出来るようにする

私がBubbleを使用して作った初めてのオリジナルアプリでまだまだ未完成の部分も多いですが、ここからさらに改善を加えて行き皆様に実際に使っていただくことが出来るようなアプリにできたらいいなと考えています。

ここまで読んでいただき、ありがとうございました！