今回も、ハンドメイド作家さんが日々の作業をもっと楽にするために、
アプリ制作初心者の私が、AI（chatGPT)サポートの元にハンドメイドサポートアプリを作っていく様子をご紹介します。このアプリは、私の転職活動にも役立つ成果物として作っています。
今回は、アプリに登録した素材を検索する機能を作ります。素材が増えるとどこに何があるか分かりにくくなりますよね？この機能で、登録した素材をすぐに見つけられるようにしていきます。
今回は登録した素材の検索機能やフィルタリングの実装をしていきたいと思います。
目次
検索機能を作ろう
１.検索フォームの作成
まずは、検索するための入力画面を作ります。ユーザーが何を探しているかを入力するための「検索ボックス」や「カテゴリーを選ぶメニュー」を画面に表示します。
今回は、こんな感じで検索フォームを作りました。
2.サーバーサイドでの検索処理
検索フォームに入力された内容は、アプリの裏側（サーバー）で処理されます。
例えば、「フラスク（Flask）」というツールを使うと、検索した内容を受け取り、素材のデータが保存されている場所（データベース）で探してくれます。
3. データベースへの検索方法
データベースに保存された情報を探すためには、特定の条件に合うものを探す仕組み（クエリ）を使います。たとえば、素材の名前に「部分一致」するものや、カテゴリーに「完全に一致」するものを探すことができます。
4. 結果の表示
検索して見つけた素材を画面に表示します。
この時、検索した内容が残った状態で結果を表示できるようにします。これで、何を探していたのかがすぐに分かるようになります。
画面で見るとこんな感じです。
5. 検索リセット機能の追加
検索結果をリセットする機能も重要です。検索条件をリセットする「リセットボタン」を付け加えます。これで、新たに別の検索が簡単にできます。
6. 検索結果の絞り込み（動的に更新）
素材やカテゴリーがたくさんあると、どれを選べばいいか迷ってしまいますよね？
そこで、「JavaScript」という技術を使って、検索結果をリアルタイムで絞り込むこともできます。
たとえば、カテゴリーを選んだら、それに合う素材だけを表示したり、他の選択肢を追加することができます。
今回の進捗状況
これで、素材を簡単に検索できる機能ができました！
今回でアプリの大枠が完成したようですが、しかし
ほかにも販売に繋がったら、制作した作品の在庫を減らす、簿記のシステムを取り入れると言うことを考えると、まだ50％程度のようです。
もうしばらくは今作った素材追加のアプリをもっと使いやすくブラッシュアップしたいと思います。
自己紹介
pekopokoです。プロフィールページはこちら
普段はハンドメイド作品をオンラインで販売しています。
メタバース空間に視覚的なお店を自分で構えることを目標に現在プログラミングも学習中です。
作品はオンラインショップでご覧いただけます。
物作りで日常を明るく♪をコンセプトに活動中のハンドメイド作家です。minneやメルカリショップス 、Creemaにてマクラメ・レザーブレスレットなどを中心に出品中です。
コメント