質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.76%

  • HTML5

    3734questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webページ上に画像の検索機能が付いたデータベースのようなものを設置したい。

解決済

回答 2

投稿

  • 評価
  • クリップ 2
  • VIEW 224

narita993

score 6

前提・実現したいこと

Webページ上に画像の検索機能が付いたデータベースのようなものを設置したいのですが、どのような言語や環境が適しているかわからないため、教えていただきたいです。Webページを運用するサーバーはLinuxの予定です。

実装したい機能は以下の通りです。
プログラミング初心者のため無理難題などがあったら申し訳ないです。

・画像の検索機能
画像の撮影日時で年月日と時間を
〇年〇月〇日 から 〇年〇月〇日 まで
〇時〇分 から 〇時〇分 まで
のように範囲を指定して検索できるようにしたいです。

・フォルダに保存した画像を自動でデータベースのようなものに追加
あらかじめフォルダを作っておき、そこに画像を保存することで自動で更新や読み込みがされるようにしたいです。

・検索結果の表示
検索結果で出てくる画像はサムネイルで表示し、クリックすると元画像が出てくるように。
画像の中または画像の横に撮影日時を表示するようにしたいです。

できれば実装したい機能は以下の通りです。

・画像の明るさで検索
明るい 普通 暗い などで検索。

・検索結果で出てくる画像のサイズ選択
検索した際に出てくる画像のサムネイルの大きさを2,3種類程度から選べるように。

補足情報(言語/FW/ツール等のバージョンなど)

使用する画像の名前は2017年01月02日03時04分00秒の場合
20170102030400.jpg
のようになっていて、一応名前からでも時間を判別することができるようになっています。
私自身プログラミングをあまりしたことがないため質問内容に不備があったら申し訳ございません。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

どのような方法を試したのか記載がほしいところですが。。。
いくつか方法がありそうです。

・データベースを使用する方法(1)
データベースに、画像ファイルのパスを入れておき、必要に応じて、レスポンスを返す。
・データベースを使用する方法(2)
データベースに、画像ファイルそのものを入れておき、必要に応じて、レスポンスを返す。
・データベースを使用しない方法
ファイル名とディレクトリで属性を管理して、必要に応じて、レスポンスを返す。
ディレクトリに入れられるファイル数に注意が必要。

等々。

どの案を採用してもサーバサイドの言語で制限されるものは無いです。ので、自身の得意な言語を選ぶか、他の仕様を精査するかして決定すれば良いです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/17 20:07

    回答ありがとうございます。

    キャンセル

checkベストアンサー

+1

SQLのテーブルに全画像のメタデータを入れるのがいいでしょう。

テーブルの属性として撮影日時、明るさ、サイズ、ファイルパス、サムネイルのファイルパスを用意し、画像追加時に明るさやサイズを計算しサムネイルを生成してこのテーブルに追加します。

Webサーバーとしては、とりあえずNode.jsはいいと思います(というかそれ以外よく知らないです)。phpだとサーバーサイドレンダリングになるので、例えば検索条件を変える度にwebサーバーがページ全体をレンダリングする必要がありますし、クライアントでも画面が一旦真っ白になって最初からページが読み込まれることになります。

なので、クライアントがAPIを通じて検索結果をサーバーから取得し動的にページを更新するのがいいと思います。Node.jsのWeb API ServerのライブラリとしてはExpressが最も人気です(たぶん)。リクエストに応じてSQL serverとやり取りします。

クライアントサイドはjsですが、apiを通じて検索結果をとってきて表示するので、テンプレートに基づくUIライブラリを使ったほうがいいかなと思います(jQueryでもできなくはないですが)。個人的にはVue.jsが好きです。

・フォルダに保存した画像を自動でデータベースのようなものに追加
あらかじめフォルダを作っておき、そこに画像を保存することで自動で更新や読み込みがされるようにしたいです。

特定のフォルダー内の変更を検知することはできると思います。
Node.jsにはそのようなライブラリがあります。
https://github.com/paulmillr/chokidar

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/17 20:06

    回答ありがとうございます。
    実践してみます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML5

    3734questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。