収集画像をお気に入り、クリック数順に並べ替えて表示するページの作成

2019年10月4日 JavaScript, Web, システム開発

前回記事で作成したグリッドレイアウトのページにWeb SQL Databaseを組み込んで、お気に入り、クリック数順に画像を並べ替えて表示してみようと思います。

今回はそのページの作成についてです。

1 前回記事おさらい
- 1.1 グリッドレイアウトのWebページを作る
- 1.2 Web SQL Databaseの使い方について
2 今回ページ作成のきっかけ
- 2.1 完成予想システム
3 ページ仕様
4 デモページ
- 4.1 キャプチャ
5 さいごに

前回記事おさらい

グリッドレイアウトのWebページを作る

こちらについては以下の記事を参照ください。

Web SQL Databaseの使い方について

こちらについては以下の記事を参照ください。

今回ページ作成のきっかけ

グリッドレイアウトで一枚のページに画像をまとめて表示することで一覧性を高めるまでは良かったのですが、表示順が常に一定であるため画像の点数が多くなったときに閲覧したい画像をスクロールして探さなければならなくなってしまいます。

どうせなら良く見る画像はページを表示したときに最も目に留まる位置にあると便利です。

加えて、画像を追加するたびにhtmlコードに修正を加えなければならない点も少々煩わしく思います。コードを書き込む必要がなくブラウザのページで画像の追加もできると良いです。

これらの目的を適えるため画像の情報をデータベース化してWebページにアクセスしたときにデータベースから情報を読み出しページに表示させるシステムをつくることにしました。

完成予想システム

ローカル環境で使用しChromeブラウザで閲覧する
閲覧するためのページはグリッドレイアウト
Web SQL Databaseを使って画像情報をデータベース化
画像ファイルはローカルPCの指定ディレクトリに保存してあるものを使う
お気に入り数（0〜5段階評価）およびクリック数の高いものから順に表示
必要のない画像はページに表示しない
画像を追加するときはブラウザのページから追加する。コード書き込みなし

ページ仕様

ページ構成

作成するページは画像一覧を表示するページ「picslist.html」、画像を追加するページ「picinsert.html」の2枚としました。それぞれのページにリンクを貼ってページ間を行き来します。

ページレイアウト

picslist.html

画像一覧ページのレイアウトです。ページ内画像下部のselectタブを変更するとonchangeイベントでスクリプト実行します。selectタブはお気に入り評価数0~5段階に加えて「表示しない」項目を選択可能とし、「表示しない」を選択すると画像一覧ページから該当画像を非表示にします。

お気に入り評価数やクリック数での画像並び替え変更が適用されるのはページ更新時とします。

また、画像クリック時にクリック数をカウントして画像表示の並べ替えに使います。

picinsert.html

画像追加ページのレイアウトです。textareaタグ内に拡張子を含む画像ファイル名を入力して「追加」ボタンを押します。ボタンを押した時にスクリプト実行して画像情報をWeb SQL Databaseのデータベースに格納します。textareaタグ内に入力する画像ファイル名は改行して入力することで、複数画像の登録を可能にします。

ここで格納するデータは画像ファイル名のみで画像そのものはローカルPCの指定ディレクトリ内に保存されているファイルを使用します。

画像情報のデータベース化

画像そのものはローカルファイルに保存してあるものを用います。データベース化するのは画像ファイル名のみです。

テーブルの作成

データベース「picsdb」にテーブル「picslist」を作成します。以下は「picslist」テーブルの構造です。

フィールド名	型、属性など	用途
uid	varchar(20) not null primary key	各々の画像を区別するためのユニークキー
filename	text not null	画像ファイル名
favorite	int default(0)	お気に入り数 ※追加した画像を先頭に配置しておきたい場合は初期値を「10」などに設定する
clickcnt	int default(0)	クリック数
delflg	int default(0)	画像をページに表示する(=0)、表示しない(=1)

ディレクトリ構成

デモページのディレクトリ構成は、グリッドレイアウトのWebページを作成した時と同様のディレクトリ構成としました。

デモページ

作成したデモページ一式はこちらよりダウンロード（zip形式74kb）できます。初期状態ではデータベースに何も保存されていませんので画像一覧ページを開くと真っ白な画面が表示されます。

とりあえずのサンプル画像としてこちらのページからサンプル画像をダウンロードするなどして、「pics」ディレクトリに保存したのち画像追加ページより画像を追加します。面倒な方は次にデモページのキャプチャ画像を貼りましたのでそちらを確認頂ければと思います。

キャプチャ

サンプル画像を使用して画像を追加したのち、画像一覧ページに戻ると下のような画面が表示されます。

このキャプチャではお気に入り数の多い画像が上位に表示されています。

さいごに

Web SQL Databaseの応用として、グリッドレイアウトで配置された画像に画像評価システムを組み込んだページ作成をしてみました。

今回システムを組み込むことによってローカルPC内の画像群の整理整頓ならびによく閲覧する画像の見つけやすさ向上の手助けになるのではと思います。『画像収集したあと放ったらかしになっていて同じ画像をまた保存している』なんてことも少なくなるかもしれません。