解決済み

Webサイト設計 データの記録

  • 困ってます
  • 質問No.7339151
  • 閲覧数153
  • ありがとう数4
  • 気になる数0
  • 回答数4
  • コメント数0

お礼率 77% (514/662)

Webサイト上で以下のことを実現したいです。

Gallaryページに表示にする画像の順番をどこかに記録、ページを開く度に、その順番に従って、画像を表示。管理画面で画像の順番を変更可能にする。

JavaScriptを使って、実装中。

Webシステムの製作は素人。Windowsプログラミングは経験者。
Windowsプログラミングでは、上記のような仕様を実現するために、テキストファイルやIniファイルを用意して、そこに情報を記録、ページを読み込む際にそのテキストから情報を取得し、画像を表示の順番を決定するのですが、Webシステムでは、どのようにこの仕様を実現するのでしょうか?
記録するデータは少しですので、データベースは利用しません。

Webサーバーにテキストファイルを置いて、そのファイルに記録するのでしょうか?
その場合、JavaScriptからそのテキストを読み込み、書き込みする処理があると思い、ネット上でコード内容を調べているのですが、見つかりません。要求を満たすサイトを知ってられましたら、ご教授お願い致します。

質問者が選んだベストアンサー

  • 回答No.3

ベストアンサー率 55% (1287/2335)

>Webサーバーにテキストファイルを置いて、そのファイルに記録するのでしょうか?
基本的にはそうなります。
ただ、WindowsAppsと違うのはクライアントからサーバのファイルに対し、基本的に直接アクセスはできないということです。
一般的なHTTPアクセスでも、ファイルにアクセスするのはWebサーバアプリケーションであってクライアントではありません。
まぁ、閲覧に限ってしまえば、Webサーバがアクセスできるファイルであれば大きな問題にはなりません。
今回の場合であれば、JavaScriptでhttpRequestを行い、該当テキストファイルをリクエストします。
一般的にはそのままテキストファイルの中身を応答してきますから、それをJavaScriptで成形・表示してやればいいわけです。
#2さんのおっしゃるように、jQueryなどのフレームワークで十分可能です。

対して、管理画面からの編集ではこれだけでは済みません。
クライアントから直接ファイルにアクセスできないということは、ファイルの編集ができないということです。
編集するには、サーバサイドで稼働するスクリプトが必要になります。
一般的にはPHPなり、Perlなりがサーバ側に実装されていますので、それを使ってスクリプトを書くことになります。
実際の実装に関しては、設計次第です。Ajaxで作ることも可能ですし。

今回の場合、テキストベースであることは全く問題がありません。

>その場合、JavaScriptからそのテキストを読み込み、書き込みする処理があると思い、
>ネット上でコード内容を調べているのですが、見つかりません。要求を満たすサイトを知ってられましたら、ご教授お願い致します。
JavaScriptでは書き込みができませんから、サンプルコードはどうしても存在しません。
jQueryなどのフレームワークを使い、Ajaxを組んでいくことになります。
jQuery:http://jquery.com/
prototype.js:http://www.prototypejs.org/
どちらもJavaScriptフレームワークで、Ajaxフレームワークも持ちます。

サーバサイドであれば、掲示板スクリプトなどが書き込みのサンプルになるのではないかと思います。
実際にどういった言語を使うかで要件が変わってきますから、その部分をまず決めておくのがいいかと思います。
お礼コメント
tosi_u

お礼率 77% (514/662)

そうなんですね。ここで回答いただいた内容などは、なかなかネット上では記載されておらず大変貴重です。
設計の仕方の大枠もわかりましたし、教えていただいたことを元に、jQuery、Ajaxなどのキーワードを調べていけば、解決に繋がることがわかったからです。もしそれを教えていただけなければ、そういったキーワードにもたどりつけなかったです。
この内容は同じ問題を抱えている他の方にも大変役に立つ情報だと思います。ありがとうございました。
投稿日時 - 2012-03-03 15:11:36
Be MORE 7・12 OK-チップでイイコトはじまる

その他の回答 (全3件)

  • 回答No.4

ベストアンサー率 60% (79/130)

その場合、JavaScript が無効の場合に何も生じない残念なページになりますが、よろしいのでしょうか。

HTML というのは、ページデザイン言語ではありません。第一義的に構造化データですよ。例えば、「画像の順番」は ol/li のリストとして表すことができます。ブラウザは、このデータを箇条書きとして表示するでしょう。

JavaScript で何かしらのギミックが必要なら、このリストデータを使うことができます。つまり、HTML に存在するデータを利用すれば、JavaScript が無効でも特に問題ありません。

最近のブラウザなら、HTML Editing API や Drag&Drop API を使うことで、その場でリストを入れ替えることができます。入れ替えたデータをサーバ側に送信し、元ファイルを更新します。

繰り返しますが、HTML は第一義的に構造化データです。これを利用しない手はありません。

---
分かりづらいのは、HTML が構造化データであると同時に、事実上はブラウザ表示用データも兼ねている、ということです。両者を切り離すための仕組みが XHTML でしたが、残念ながら広まりませんでした。

とにかく、「設定ファイル」そのものを HTML としてマークアップし、JavaScript から利用してみる、という観点で考えてみて下さい。少なくとも、ウェブアプリでもないウェブページであれば、JavaScript が無効になるだけで読めないというのは設計として論外ということになってしまいます。

---
なお、どうしても HTML としてマークアップできない、もしくはその必要がない(なくても閲覧に支障のないギミックである)ということなら script 要素内に入れるということもできます。

<script type="text/csv">
"file1.png", "file2.png"
</script>

これを外部ファイル化したければ XMLHttpRequest を使っても構いません。
お礼コメント
tosi_u

お礼率 77% (514/662)

ご回答、ありがとうございます。なにぶんWebプログラミング素人ですので、説明していただいた内容で、分からない言葉などがあり、一つ一つ勉強が必要です。ただ、Javascriptを使わずとも、HTMLだけで、要求を満たすことができるのでは?ということがわかりました。HTMLだけでできるなら、不必要に他の技術を使う必要はありません。
教えていただいたことを理解するために、少しキーワードの勉強をさせてください。そして、HTMLだけで私の要求を満たす処理を書けるかやってみます。
問題解決の道筋ができました。
ありがとうございました。
投稿日時 - 2012-03-04 06:13:18
  • 回答No.2

ベストアンサー率 45% (253/561)

http://note.chiebukuro.yahoo.co.jp/detail/n14189
beauty.geocities.jp/nishihama985/ajax-table/page01.htm
http://beauty.geocities.jp/nishihama985/ajax-table/data.txt
テキストファイルを読み込む例です

Ajax 非同期通信 がキーワードになります
http://www.google.co.jp/#hl=ja&output=search&sclient=psy-ab&q=Ajax%E3%80%80%E9%9D%9E%E5%90%8C%E6%9C%9F%E3%80%80%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88&psj=1&oq=Ajax%E3%80%80%E9%9D%9E%E5%90%8C%E6%9C%9F%E3%80%80%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88&aq=f&aqi=&aql=&gs_sm=3&gs_upl=1646l12199l0l12945l20l19l0l0l0l0l0l0ll0l0&gs_l=hp.3...1646l12199l0l12945l20l19l0l0l0l0l0l0ll0l0&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=b25273785c8c4df2&biw=1251&bih=819
jQueryを利用するものが多いです
お礼コメント
tosi_u

お礼率 77% (514/662)

親切にご回答ありがとうございました。これから詳しく見ていきますが、役立ちそうな情報です。
ありがとうございます。助かります。
投稿日時 - 2012-03-03 12:32:12
  • 回答No.1

ベストアンサー率 48% (325/664)

残念なことに、
> 記録するデータは少し
でもデータベースを使用するのが現実的です。なぜなら、ブラウザが覚えていられるデータ量が非常に少なく、しかも、ページ遷移ごとにそのデータをサーバーに送信する必要があるためです。
ブラウザでデータを記憶するにはCookieを使用します。JavaScriptによるCookieの設定・読み取りは以下のURLの通りです。
http://homepage3.nifty.com/aya_js/js2/js226.htm
……が、このCookieは記憶できる容量が4kバイトしかなく、その中に必ず有効期限を記述しなくてはなりません。しかも、Cookieの内容はページ遷移ごとにサーバーに送られ、その分サーバーとの通信量が増えてしまいます。
したがって、Cookieに保管するデータとしてはセッションID程度にしておくべきでしょう。
また、hiddenフォームに必要なデータを記録しておくという方法もありますが、こちらは容量制限は無いもののページ遷移ごとにそのデータをサーバーとやりとりする必要があるという点ではCookieと変わりません。
そもそも、不特定多数がアクセスするWebプログラムである人がどう並べたかをどう識別するのでしょうか?それを考えると、サーバー側で保持するデータは並び順だけでは不十分で、アクセスしてきた人と並び順のペアが必要になります。しかも、そのデータの整合性などを考えるとデータベースを使用してデータを記憶するのが現実的になります。

……というのは少し前までの話で、ひょっとしたらあなたの案件はWeb Storageを使えば実現できるかもしれません。ただし、対応ブラウザとしてIE7以前がある場合は上で書いた手段を使わなくてはならないでしょう。
Web Strage 解説
http://www.htmq.com/webstorage/
ブラウザの対応状況
http://caniuse.com/#feat=namevalue-storage
補足コメント
tosi_u

お礼率 77% (514/662)

詳しいご説明ありがとうございます。私の説明が紛らわしかったので、1点認識違いをされている部分があるかと存じます。

「Gallaryページに表示にする画像の順番」ですが、これはWeb管理者用の裏画面である「Gallery画像編集ページ」でのみ更新可能です。なので、Webを閲覧しているクライアントは設定変更できません。Web管理者のみ閲覧・編集です。Webサーバー内にデータを保存できれば仕様を満たせます。

素人なので認識に誤りがあるかもしれません。誤りがあれば、ご指摘お願いします。
Cookieは、Webクライアント毎のPCに記録されるデータなので、今回の仕様ではデータ記録場所としては最適でないと思われます。
hiddenフォームの場合もユーザのブラウザ毎にデータが記録されるので、ブラウザを閉じると、データが抹消され、最適でないです。
すると、やはりMySQLなどデータベースをWebサーバーに導入するしかないのでしょうか?

Windowsプログラムだと、データ保存は、データベースも使いますが、ちょっとしたデータはIniファイルなどテキスト形式のファイルから読み書きを行い、その方がコーディングも、環境設定も簡単なのですが。
投稿日時 - 2012-03-03 05:49:19
お礼コメント
tosi_u

お礼率 77% (514/662)

詳しいご説明ありがとうございます。私の説明が紛らわしかったので、1点認識違いをされている部分があるかと存じます。

「Gallaryページに表示にする画像の順番」ですが、これはWeb管理者用の裏画面である「Gallery画像編集ページ」でのみ更新可能です。なので、Webを閲覧しているクライアントは設定変更できません。Web管理者のみ閲覧・編集です。Webサーバー内にデータを保存できれば仕様を満たせます。

素人なので認識に誤りがあるかもしれません。誤りがあれば、ご指摘お願いします。
Cookieは、Webクライアント毎のPCに記録されるデータなので、今回の仕様ではデータ記録場所としては最適でないと思われます。
hiddenフォームの場合もユーザのブラウザ毎にデータが記録されるので、ブラウザを閉じると、データが抹消され、最適でないです。
すると、やはりMySQLなどデータベースをWebサーバーに導入するしかないのでしょうか?

Windowsプログラムだと、データ保存は、データベースも使いますが、ちょっとしたデータはIniファイルなどテキスト形式のファイルから読み書きを行い、その方がコーディングも、環境設定も簡単なのですが。
投稿日時 - 2012-03-03 05:49:42
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


より良い社会へ。感謝経済プロジェクト始動

ピックアップ

ページ先頭へ