Webサイト上で以下のことを実現したいです。
Gallaryページに表示にする画像の順番をどこかに記録、ページを開く度に、その順番に従って、画像を表示。管理画面で画像の順番を変更可能にする。
JavaScriptを使って、実装中。
Webシステムの製作は素人。Windowsプログラミングは経験者。
Windowsプログラミングでは、上記のような仕様を実現するために、テキストファイルやIniファイルを用意して、そこに情報を記録、ページを読み込む際にそのテキストから情報を取得し、画像を表示の順番を決定するのですが、Webシステムでは、どのようにこの仕様を実現するのでしょうか?
記録するデータは少しですので、データベースは利用しません。
Webサーバーにテキストファイルを置いて、そのファイルに記録するのでしょうか?
その場合、JavaScriptからそのテキストを読み込み、書き込みする処理があると思い、ネット上でコード内容を調べているのですが、見つかりません。要求を満たすサイトを知ってられましたら、ご教授お願い致します。
No.3ベストアンサー
- 回答日時:
>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フレームワークも持ちます。
サーバサイドであれば、掲示板スクリプトなどが書き込みのサンプルになるのではないかと思います。
実際にどういった言語を使うかで要件が変わってきますから、その部分をまず決めておくのがいいかと思います。
そうなんですね。ここで回答いただいた内容などは、なかなかネット上では記載されておらず大変貴重です。
設計の仕方の大枠もわかりましたし、教えていただいたことを元に、jQuery、Ajaxなどのキーワードを調べていけば、解決に繋がることがわかったからです。もしそれを教えていただけなければ、そういったキーワードにもたどりつけなかったです。
この内容は同じ問題を抱えている他の方にも大変役に立つ情報だと思います。ありがとうございました。
No.4
- 回答日時:
その場合、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 を使っても構いません。
ご回答、ありがとうございます。なにぶんWebプログラミング素人ですので、説明していただいた内容で、分からない言葉などがあり、一つ一つ勉強が必要です。ただ、Javascriptを使わずとも、HTMLだけで、要求を満たすことができるのでは?ということがわかりました。HTMLだけでできるなら、不必要に他の技術を使う必要はありません。
教えていただいたことを理解するために、少しキーワードの勉強をさせてください。そして、HTMLだけで私の要求を満たす処理を書けるかやってみます。
問題解決の道筋ができました。
ありがとうございました。
No.2
- 回答日時:
beauty.geocities.jp/nishihama985/ajax-table/page01.htm
http://beauty.geocities.jp/nishihama985/ajax-tab …
テキストファイルを読み込む例です
Ajax 非同期通信 がキーワードになります
http://www.google.co.jp/#hl=ja&output=search&scl …
jQueryを利用するものが多いです
No.1
- 回答日時:
残念なことに、
> 記録するデータは少し
でもデータベースを使用するのが現実的です。なぜなら、ブラウザが覚えていられるデータ量が非常に少なく、しかも、ページ遷移ごとにそのデータをサーバーに送信する必要があるためです。
ブラウザでデータを記憶するには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
この回答への補足
詳しいご説明ありがとうございます。私の説明が紛らわしかったので、1点認識違いをされている部分があるかと存じます。
「Gallaryページに表示にする画像の順番」ですが、これはWeb管理者用の裏画面である「Gallery画像編集ページ」でのみ更新可能です。なので、Webを閲覧しているクライアントは設定変更できません。Web管理者のみ閲覧・編集です。Webサーバー内にデータを保存できれば仕様を満たせます。
素人なので認識に誤りがあるかもしれません。誤りがあれば、ご指摘お願いします。
Cookieは、Webクライアント毎のPCに記録されるデータなので、今回の仕様ではデータ記録場所としては最適でないと思われます。
hiddenフォームの場合もユーザのブラウザ毎にデータが記録されるので、ブラウザを閉じると、データが抹消され、最適でないです。
すると、やはりMySQLなどデータベースをWebサーバーに導入するしかないのでしょうか?
Windowsプログラムだと、データ保存は、データベースも使いますが、ちょっとしたデータはIniファイルなどテキスト形式のファイルから読み書きを行い、その方がコーディングも、環境設定も簡単なのですが。
詳しいご説明ありがとうございます。私の説明が紛らわしかったので、1点認識違いをされている部分があるかと存じます。
「Gallaryページに表示にする画像の順番」ですが、これはWeb管理者用の裏画面である「Gallery画像編集ページ」でのみ更新可能です。なので、Webを閲覧しているクライアントは設定変更できません。Web管理者のみ閲覧・編集です。Webサーバー内にデータを保存できれば仕様を満たせます。
素人なので認識に誤りがあるかもしれません。誤りがあれば、ご指摘お願いします。
Cookieは、Webクライアント毎のPCに記録されるデータなので、今回の仕様ではデータ記録場所としては最適でないと思われます。
hiddenフォームの場合もユーザのブラウザ毎にデータが記録されるので、ブラウザを閉じると、データが抹消され、最適でないです。
すると、やはりMySQLなどデータベースをWebサーバーに導入するしかないのでしょうか?
Windowsプログラムだと、データ保存は、データベースも使いますが、ちょっとしたデータはIniファイルなどテキスト形式のファイルから読み書きを行い、その方がコーディングも、環境設定も簡単なのですが。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) エクセルのマクロについて教えてください。 2 2023/07/21 09:42
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- その他(プログラミング・Web制作) Windowsのマクロプログラムで、こんなことできますか? 3 2022/06/28 14:30
- C言語・C++・C# c言語の問題です 2 2023/07/21 10:51
- 格安スマホ・SIMフリースマホ 格安SIMカードについて。イオンモバイルの月のデータを使い切った後、ものすごくスピードが遅いです。L 6 2023/02/09 06:56
- gooポイント gooポイントをdポイントに交換できない。 3 2022/04/22 20:39
- その他(IT・Webサービス) 動画が多い(容量が多い)Webサイト作成 1 2023/04/08 17:42
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- MySQL PHPとMySQLを使った掲示板の作り方 1 2022/06/02 13:00
- Visual Basic(VBA) Excelのマクロコードについて教えてください 1 2022/03/27 12:02
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
外部リンクのクリック数を表示...
-
PHPとjavascriptで共通なエンコ...
-
JavaScriptの便利なところ
-
ASPによるEXCELファイルの操作
-
ブラウザ自体の事じゃなくてJav...
-
VB.NET2003 テキストボックスに...
-
if(1){...}とはどういうことで...
-
JSPの処理の途中で、JavaScript...
-
javascriptで「オブジェクトを...
-
VBScript から JavaScript を呼...
-
VBAによる第3、4水準文字の判定...
-
VBA ステータスバー DoEvents
-
PowerPointで時計表示
-
jQuery ui Datepicker 明日以降...
-
「終了していない文字列型の定...
-
htmlのfileタグに自動で値を入...
-
C#でボタン名を変更しても動く
-
正整数の半角数字かどうか判定する
-
VBA SORT Applyでエラー
-
VC#でテキストボックスに変数の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptを使用して、クライ...
-
PHPとjavascriptで共通なエンコ...
-
外部リンクのクリック数を表示...
-
リアルタイム表示ホームページ...
-
CGIとJavascriptの違いについて
-
プルダウンリストを作りMySQLか...
-
csv2tableのテーブルを動的に変...
-
webの文字データの取得
-
JavaScriptの負荷について
-
Session切れ前にWarningメッセージ
-
IEでalertのみを無効にする方法...
-
Wordpressでヤフー知恵袋やgoo...
-
PHPとJavaとC#の違い
-
Perl LINE(チャット) 仕組み
-
セレクトで都道府県から市区町...
-
JAVAについて
-
javascriptをつかって売上管理
-
ランキングサイトの構築って予...
-
仮アップ?
-
javascriptでサーバの時間を取...
おすすめ情報