Q&A
ひとつ確認ですが、その Web アプリケーションは、世界中に公開するものですか？ それとも、自分用に自分の PC で動かすものですか？
PCに保存されている画像を見るための、
簡単なイメージビュワーのWebアプリを作ろうと考えています。（自宅LAN内で使用するのみで、インターネットへ公開はしません）
機能として最低限、画像にタグをつけて管理し、そのタグで表示する画像の一覧をフィルタリングできるようにはしたいです。
アプリの構成を考えているのですが、Webアプリの知識があまりないためどうデザインするのがいいのか悩んでいます。
ネットでざっくり調べて構成を考えてみたのですが、果たして効率のいいやり方なのか、そもそもちゃんと動くのかも分かりません。
とりあえず考えたのは、
ーーーーーーーーーーーー
クライアントがCGIにアクセス（cgiプログラムはpythonで記述）
↓
選択されたタグを元に、表示する画像のＩＤのリストをテキストファイルに保存
（ＩＤ，タグ等はデータベースで管理）
↓
javascript でテキストファイルを読んで、リストにある画像を出力
ーーーーーーーーーーーー
のような形です。
説明が分かりにくくて済みません。
特に、入力に応じて適宜表示するコンテンツを変えていくにはどうすればいいのかが分かりません。
一般的なアプリの構成や、上記の構成で変えたほうがいい点などがありましたら教えてください。
[開発環境]
OS: Windows10
＞ＩＤのリストをテキストファイルに保存
と
＞（ＩＤ，タグ等はデータベースで管理）
は矛盾するように思います。
テキストデータベースにするということでしょうか。
あと、teratailってURLに応じてコンテンツを出力する仕組みになっていますが、それは何も参考になりませんか？
> PCに保存されている画像を見るための、
> 簡単なイメージビュワーのWebアプリを作ろうと考えています。
PCはパーソナルコンピュータの略なので、
自分が所持している眼の前のノートPCやデスクトップマシンを指しているのだと思います。
それに対してWebアプリというのは
HTTPの機能を利用して情報を受け渡ししたいという目的を達成するアプリやサービスを指します。
情報を発信するブログ、対話を行うSNS等がその代表です。
自分の画像を自分で管理するだけ？
しかもWebアプリ縛り？
最初の要件の所で矛盾してしまっています。
記述不足ですみません。
Webアプリにしたかったのは、自宅LAN内で他のＰＣやスマホなどからも閲覧できるようにしたかったからです。インターネットで公開するものではありません。
なるほど、自宅用Webサーバですね。
用途としては納得行くものなのでそれ用に回答してみます。
回答3件
0
ベストアンサー
今回の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の中ではとても有名なので良いんじゃないですか？
チュートリアルもあります。
選択されたタグを元に、表示する画像のＩＤのリストをテキストファイルに保存
（ＩＤ，タグ等はデータベースで管理）
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エンジニアです。
頑張ってくださいね。
投稿2020/02/26 04:40
総合スコア21158
0
クライアント
結局作ろうとしているファイルはどのような目的でどのような人がどうやってアクセスするものなのでしょうか
Who Why When Where How
誰が？ 何故？ いつ？ どこで（どこから）？ どうやって？
少なくとも4W1Hは明確にしてください。
さっきも同じような回答をしたような気がしますがDBか何かに、タグ名とファイル名を紐付けするように保存して、それを探すPHPファイルを作成し、Ajaxか何かでとりにいくってやり方が楽だと思いますが、これに関しても色々気をつけるべきポイントがあるので、経験者と一緒に作成することをお勧めします。
投稿2020/02/26 00:13
編集2020/02/26 00:16
総合スコア10429
要件定義が一番大事ですね
結局、作りながら要件定義とかは無理なので（たぶん）しっかりと定義した方が効率も良いし余計な遠回りもしなくていいのになぁ、と思う今日この頃です。
0
自宅 LAN 限定公開であればセキュリティを気にする必要はありませんので、普通に Web サーバーを立てて、画像表示・検索プログラムを書くだけです。python (+ JavaScrip) 限定で考えると、大きく分けて、以下の 3 種類があると思います。
- apache などの汎用 Web サーバーを立てて、そこから CGI として呼ばれる python コードを書く。
- python で Web アプリサーバーを書く。私はあまり詳しくありませんが、Flask というライブラリを使うと Web サーバーはすぐに立ち上げられて、あとは自分のやりたいことを書くだけです。
- 1 または 2 の方法で API サーバーを立てて、JavaScript でブラウザ上に表示する。
最近は CGI という言葉をほとんど聞かないので、たぶん 2 が一般的なんだと思います。
参考: Flaskの簡単な使い方 - Qiita
参考: Webアプリ初心者のFlaskチュートリアル - Qiita
投稿2020/02/26 04:32
総合スコア7895
あなたの回答
tips
プレビュー
