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

質問

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

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

JavaScriptを使って、実装中。

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

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

回答No.3

neko-ten · ベストアンサー

＞Ｗｅｂサーバーにテキストファイルを置いて、そのファイルに記録するのでしょうか？
基本的にはそうなります。
ただ、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フレームワークも持ちます。

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

お礼

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

回答No.4

Chaire

その場合、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 を使っても構いません。

お礼

ご回答、ありがとうございます。なにぶんＷｅｂプログラミング素人ですので、説明していただいた内容で、分からない言葉などがあり、一つ一つ勉強が必要です。ただ、Ｊａｖａｓｃｒｉｐｔを使わずとも、ＨＴＭＬだけで、要求を満たすことができるのでは？ということがわかりました。ＨＴＭＬだけでできるなら、不必要に他の技術を使う必要はありません。
教えていただいたことを理解するために、少しキーワードの勉強をさせてください。そして、ＨＴＭＬだけで私の要求を満たす処理を書けるかやってみます。
問題解決の道筋ができました。
ありがとうございました。

回答No.2

aoyama984

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を利用するものが多いです

お礼

親切にご回答ありがとうございました。これから詳しく見ていきますが、役立ちそうな情報です。
ありがとうございます。助かります。

回答No.1

hitomura

残念なことに、
＞ 記録するデータは少し
でもデータベースを使用するのが現実的です。なぜなら、ブラウザが覚えていられるデータ量が非常に少なく、しかも、ページ遷移ごとにそのデータをサーバーに送信する必要があるためです。
ブラウザでデータを記憶するには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

お礼

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

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

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

Windowsプログラムだと、データ保存は、データベースも使いますが、ちょっとしたデータはＩｎｉファイルなどテキスト形式のファイルから読み書きを行い、その方がコーディングも、環境設定も簡単なのですが。

補足

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

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

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

Windowsプログラムだと、データ保存は、データベースも使いますが、ちょっとしたデータはＩｎｉファイルなどテキスト形式のファイルから読み書きを行い、その方がコーディングも、環境設定も簡単なのですが。