アマゾンやyouyobeのような星型評価をサイトに実装したいと思い
http://www.lifeisg.com/blog/jquery/raty/
上記のサイトを参考にしたのですが、よくわかりません。
http://www.wbotelhos.com/raty/
記事に書いてある通り、jQuery Ratyの「DOWNLOAD」からサンプルページのファイルがまるごとダウンロードし
「まずJSとJqueryを読み込み、」とありますが、これは使いたいサーバーにアップロードするということなのでしょうか?
私は、JSフォルダをそのままアップロードしました。
また、下記コードはどこに挿入すればよいのでしょうか?
<head>内でよろしいのでしょうか?
私は、<head>内に記載しました。
<script type="text/javascript">
$(function() {
$('#default').raty();
});
</script>
後は機能を出したい箇所に以下のコードを記述をすればOKです。
<div id="default"></div>
とありまして、上記コードを出したいところに記載したのですが、設置できませんでした。
お分かりになる方、ご教授お願い致します。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
>コピペ貼り付けレベルで
>もっと簡単に実装できるものってないですか?
うーん・・・
Ajax含んでコピペ可能ってなると、探したことがないです。(とくにjQuery入ってるなら、Ajaxも楽に実装できちゃう)
ざっと調べたりしてみましたが、ほぼjQueryなりPrototype.jsあたりのプラグイン(=JavaScript)ですね。
PHPスクリプト付きでJRATINGってのがありますが、デザインもPHPで行いますし、サーバ構造にもよってきますので完全にコピペとはいかないです。
http://www.myjqueryplugins.com/jRating
ある程度の内容はドキュメントに書いてあります。
私自身は、ここまでくると面倒!つくる!ってなっちゃうタイプなので、あまりいいアドバイスできないです・・・
申し訳ないス。
No.3
- 回答日時:
あ、保存だけじゃなく、表示側でも工夫が要りますな・・・。
レーティングがサーバに保存されているので、それを表示に反映させる仕組みが必要です。
方法としてはいくつか考えられますが・・・
・そもそもページ自体をCGIやPHPで生成してしまう
→素直っちゃ素直な方法
・ページ表示後、Ajaxでリクエストを送り、レスポンスを基にAjavaScriptでレーティング表示を変える
→手数が増えるため、レスポンスが遅くなる可能性がある。
慣れてくれば、途中で処理をかませたりも可能。
・レーティング変更時点でHTMLファイルを再生成する
→あまり利点がない。
レーティング変えたりすることがあまりない場合、スクリプト動作がいらないので軽くなる可能性がある。
効果に対して手間はめんどくさい。ロック処理がいろいろと面倒。
慣れてくれば、現Ver.と旧Ver.で動的にレーティング表示を変えたり、といったことも可能に。
丁寧な解説ありがとうございます。
>・そもそもページ自体をCGIやPHPで生成してしまう
>→素直っちゃ素直な方法
上記の方法をやろうと思いまして、試行錯誤しておりましたところ
http://labs.unoh.net/2007/08/javascript_1.html
なかなか素晴らしい記事があったのですが、最後の方で
「実際にサーバ側にデータを登録するには、もう少しやらなければならないことがあります。アンカーをクリックしたら、JavaScriptでPOSTするようにしたり、サーバ側でデータを受け取ってデータベースに格納するなどをしなければなりません。今回はそこまでは解説できませんでしたが、AJAXでページ遷移なしに処理するのもそんなに難しくないと思いますので、ぜひ挑戦してみてください。」
とあり、重要なところが知りたいのに書いてませんでした。
http://tokuna.blog40.fc2.com/blog-entry-1169.html
上記の Outbrainというのが簡単でなかなかよかったのですが
投票時に別画面にいってしまうのが、うーん・・・という感じです。
コピペ貼り付けレベルで
もっと簡単に実装できるものってないですか?
No.2
- 回答日時:
>星型評価のところをクリックしても結果が反映されない、データが残っていないという状態です。
>>ちなみに、レーティングしても保存するサーバスクリプト組まないと何にもならんですよ。
>これはどういうことなのでしょうか?
まさにそのことです。
これはJavaScriptの基礎なので、詳しく記載しませんでしたが・・・
JavaScriptはクライアントサイド・・・ブラウザで動くスクリプトです。
サーバからはただのHTTPプロトコルで送られてくるだけです。
(サーバ側で何かしらの動作を行うわけではない)
レーティングの選択を行った場合や、何かしら保存させたい動作を行ったとしてもデータを保存することはありません。
サーバにデータを保存するのはサーバで動いているプログラムで行わなければなりません。
一般的なCGIや、PHPスクリプトと呼ばれているものは、サーバ上で稼働しています。
こういったレーティングスクリプトであれば、一般的にAJAXを使用します。
レーティング変更をトリガーとして、データをGETやPOSTでHTTPリクエストとしてサーバ上で稼働するスクリプトに送信します。
サーバ上スクリプトは、その受信したデータを扱い、ファイルとして保存する、SQLに書き込む・・・といった動作をすることになります。
基本的にサーバサイドで動くスクリプトはJavaScriptではないんで、別にサーバで稼働する言語を覚える必要があります。
こういった動作を行わせるのであれば、HTML/CSSなどの記述言語を理解しただけでは不十分です。
どのような動作を行っているのか、サーバはどういう役割を持っているのかを理解しないといけません。
また、サーバサイドスクリプトを開発するのであれば、自分でサーバを立てた開発環境が必要です。
動作確認を行うたびにサーバにあげるのでは手間がかかりすぎますし、そもそもそういった利用はマナー違反です。
(開発中ということはエラーが発生する可能性が極めて高い)
もしサーバの停止や、破損といった事例になると数千万単位で損害賠償を請求される可能性もないとは言えません。
ただのHTML作成から、こういったスクリプト作成に入る段階になったら、実際の作成はまず手を止め、各プロトコルやサーバの役割といった基礎情報の習熟に一旦取り組むとよいと思います。
・・・もちろん、大量な情報量ですからすべて理解することは大変です。
てか、私も基礎の基礎しかわかってないス。
が、それすらわからなければ開発は無理といっても過言じゃないです。
各ドキュメントもその程度の知識は前提になっていますし。
No.1
- 回答日時:
JavaScript自体別ファイルなんで、読み込みしないと。
<script type="text/javascript" src="スクリプトパス"></script>
で、jquery.min.jsとjquery.raty.js(もしくはjquery.raty.min.js)にsrc通してください。
書くところはhead内でよいです。
実際の配置されている場所がわからないのでパスはわからんですが、ふつうのリンクと一緒です。
./js/jquery.min.js
みたいに。
ちなみに、レーティングしても保存するサーバスクリプト組まないと何にもならんですよ。
丁寧な解説ありがとうございます。
スクリプトパスを指定するということはわかりました。
http://www.mt312.com/category/script/
先のjQuery Ratyは難しすぎたので
新しく上記のサイトを参考に試してみたところ、設置はできたのですが
星型評価のところをクリックしても結果が反映されない、データが残っていないという状態です。
>ちなみに、レーティングしても保存するサーバスクリプト組まないと何にもならんですよ。
これはどういうことなのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript プラグイン無しでContactform7にdatepickerを実装 3 2022/10/25 02:18
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptでテキス...
-
Ajaxが動きません~『status=0』?
-
JavaScriptによる....
-
XMLHttpRequestオブジェクトに...
-
ブラウザからエクセルを開く方法
-
VBAによる第3、4水準文字の判定...
-
JSPの処理の途中で、JavaScript...
-
VB.NET2003 テキストボックスに...
-
JavaScriptで ブラウザの閉じる...
-
JavascriptでのExcel起動について
-
IEでalertのみを無効にする方法...
-
javascriptで「オブジェクトを...
-
csvファイルを読み込み、該当項...
-
正整数の半角数字かどうか判定する
-
禁止文字チェック
-
IE8開発者ツールでソースの修正
-
VBAの[cellsメソッドは失敗しま...
-
デザイン時のVisible=Falseは実...
-
「終了していない文字列型の定...
-
変換テーブルを使った、文字列...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jsでルートディレクトリより上...
-
Ajaxが動きません~『status=0』?
-
ブラウザからエクセルを開く方法
-
JavaScriptでテキス...
-
html組込み時のカレントフォル...
-
nodeでJavaScriptの標準入力
-
ローカルのtest.txtを1行ずつ...
-
JavaScriptによる....
-
ブラウザ上でjavascriptを編集...
-
ローカル環境で動作しないJavaS...
-
ajax 通信 iisの設定?
-
ブックマークレットが動かない。
-
ジャバスクリプトがポップアッ...
-
ActiveXObjectについて
-
javascriptでサーバ上のActives...
-
ブラウザ上でファイルの修正を行う
-
Illustrator でjavascriptによ...
-
XMLHttpRequestオブジェクトに...
-
node.jsでmysqlをローカル環境...
-
JavaScriptを使ってファイルの...
おすすめ情報