今回のWebアプリ化の流れを超ざっくり解説します。
まず想定される注意ポイント。
Chrome等のブラウザにシュババと画像を1000個表示させた場合、
一瞬でメモリを食い尽くしてフリーズするので、
どうやって管理するかが非常に重要になってきます。
画像のファイル名をJavaScriptの変数で配列としてもっておき、
表示するべき画像を絞ってHTMLに表現するという作戦になるでしょう。
ですのでReactやVue.jsといったJSフレームワークを覚えて使いこなせるようになった方が後々楽です。
これはHTML風テンプレートを読み込ませて特定のHTMLタグ内にパコッと当てはめる想定で準備します。
するとJavaScriptの変数の値が切り替わったら、
瞬時にテンプレートに従った最新のHTMLの状態に切り替わります。
ネイティブJSやjQueryはHTMLのAをBに変化しろ!という命令で記述していく事になりますので、
その場でささっと作るなら兎も角、長い目で見れば辛いでしょう。
HTML、CSS、JavaScriptファイルを用意して画面を作りました。
Ajaxを利用しながら画面を更新させていきましょう。
情報はPythonサーバを裏で動かして、
起動と同時に特定ディレクトリの画像ファイルを洗い出してリストとして変数に保存しておきます。
Ajaxで「存在している画像ファイル頂戴」と問い合わせてきたら、リストをJSON文字列にして返す作りにするのがトレンドです。
CGIでPythonを動かそうとしている位なので、
おそらくPythonが最も得意な言語だと思いますが、
CGIは時代遅れの技術なので使わないでください。
PythonでWebサーバを立ち上げる方法を勉強してみてください。
Django ドキュメント - Djangoとか、Pythonの中ではとても有名なので良いんじゃないですか?
チュートリアルもあります。
選択されたタグを元に、表示する画像のIDのリストをテキストファイルに保存
(ID,タグ等はデータベースで管理)
URIを覚えましょう。
URIとは、情報やサービス、機器など何らかの資源(リソース)を一意に識別するためのデータの書式を定義した標準の一つ。
つまり、この文字列さえ知っておき、Webサーバに問い合わせれば教えてくれるよというものです。
この役割分担を明確にしておけば、
HTML、CSS、JSファイルはベタっと書くだけで問題ありません。
最後にPythonサーバに手作業で作ったHTML、CSS、JSファイルを配信出来るようにパコッと組み合わせてWebアプリ完成です。
上記で紹介したDjangoフレームワークであれば、下記のような静的ファイルを配信する仕組みが用意されています。
調べながら作業を進めてください。
Django staticファイル まとめ - Qiita
最終形のディレクトリ構成を私が30秒で考えました。
- /index.html
- /js/main.js
- /css/style.css
- /api/: ここからPythonに問い合わせる
- /api/images: 画像ファイルの一覧を返す、GETパラメータで絞り込めるように
- /api/images/xxx: 画像ファイルそのものを返す
- /api/tags: データベースに保存したタグの一覧を返したり、保存、削除を出来るよう
こんな所ですかね。
CRUDとRESTfulに関しての知識が付けば自然とこんな感じに落ち着くと思います。
まぁ、私がたった所詮30秒でテキトーに作った内容なので、
実際に作っていくとこれじゃダメだという気付きが得られると思います。
その辺は勉強しながら適宜調整していただければと思います。
もしこれを全部完成させれば、それなりに金が取れるWebエンジニアです。
頑張ってくださいね。