• 締切
  • 困ってます

星型評価スターレーティングの実装の仕方について

  • 質問No.7146125
  • 閲覧数2352
  • ありがとう数5
  • 気になる数0
  • 回答数4
  • コメント数0

お礼率 67% (25/37)

アマゾンや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>

とありまして、上記コードを出したいところに記載したのですが、設置できませんでした。

お分かりになる方、ご教授お願い致します。

回答 (全4件)

  • 回答No.4

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

>コピペ貼り付けレベルで
>もっと簡単に実装できるものってないですか?

うーん・・・
Ajax含んでコピペ可能ってなると、探したことがないです。(とくにjQuery入ってるなら、Ajaxも楽に実装できちゃう)
ざっと調べたりしてみましたが、ほぼjQueryなりPrototype.jsあたりのプラグイン(=JavaScript)ですね。

PHPスクリプト付きでJRATINGってのがありますが、デザインもPHPで行いますし、サーバ構造にもよってきますので完全にコピペとはいかないです。
http://www.myjqueryplugins.com/jRating
ある程度の内容はドキュメントに書いてあります。

私自身は、ここまでくると面倒!つくる!ってなっちゃうタイプなので、あまりいいアドバイスできないです・・・
申し訳ないス。
  • 回答No.3

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

あ、保存だけじゃなく、表示側でも工夫が要りますな・・・。
レーティングがサーバに保存されているので、それを表示に反映させる仕組みが必要です。
方法としてはいくつか考えられますが・・・

・そもそもページ自体をCGIやPHPで生成してしまう
→素直っちゃ素直な方法

・ページ表示後、Ajaxでリクエストを送り、レスポンスを基にAjavaScriptでレーティング表示を変える
→手数が増えるため、レスポンスが遅くなる可能性がある。
 慣れてくれば、途中で処理をかませたりも可能。

・レーティング変更時点でHTMLファイルを再生成する
→あまり利点がない。
 レーティング変えたりすることがあまりない場合、スクリプト動作がいらないので軽くなる可能性がある。
 効果に対して手間はめんどくさい。ロック処理がいろいろと面倒。

慣れてくれば、現Ver.と旧Ver.で動的にレーティング表示を変えたり、といったことも可能に。
お礼コメント
s13doridori

お礼率 67% (25/37)

丁寧な解説ありがとうございます。

>・そもそもページ自体をCGIやPHPで生成してしまう
>→素直っちゃ素直な方法

上記の方法をやろうと思いまして、試行錯誤しておりましたところ

http://labs.unoh.net/2007/08/javascript_1.html

なかなか素晴らしい記事があったのですが、最後の方で
「実際にサーバ側にデータを登録するには、もう少しやらなければならないことがあります。アンカーをクリックしたら、JavaScriptでPOSTするようにしたり、サーバ側でデータを受け取ってデータベースに格納するなどをしなければなりません。今回はそこまでは解説できませんでしたが、AJAXでページ遷移なしに処理するのもそんなに難しくないと思いますので、ぜひ挑戦してみてください。」

とあり、重要なところが知りたいのに書いてませんでした。


http://tokuna.blog40.fc2.com/blog-entry-1169.html

上記の Outbrainというのが簡単でなかなかよかったのですが
投票時に別画面にいってしまうのが、うーん・・・という感じです。

コピペ貼り付けレベルで
もっと簡単に実装できるものってないですか?
投稿日時:2011/11/25 20:35
  • 回答No.2

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

>星型評価のところをクリックしても結果が反映されない、データが残っていないという状態です。

>>ちなみに、レーティングしても保存するサーバスクリプト組まないと何にもならんですよ。
>これはどういうことなのでしょうか?

まさにそのことです。
これはJavaScriptの基礎なので、詳しく記載しませんでしたが・・・
JavaScriptはクライアントサイド・・・ブラウザで動くスクリプトです。
サーバからはただのHTTPプロトコルで送られてくるだけです。
(サーバ側で何かしらの動作を行うわけではない)
レーティングの選択を行った場合や、何かしら保存させたい動作を行ったとしてもデータを保存することはありません。
サーバにデータを保存するのはサーバで動いているプログラムで行わなければなりません。
一般的なCGIや、PHPスクリプトと呼ばれているものは、サーバ上で稼働しています。

こういったレーティングスクリプトであれば、一般的にAJAXを使用します。
レーティング変更をトリガーとして、データをGETやPOSTでHTTPリクエストとしてサーバ上で稼働するスクリプトに送信します。
サーバ上スクリプトは、その受信したデータを扱い、ファイルとして保存する、SQLに書き込む・・・といった動作をすることになります。
基本的にサーバサイドで動くスクリプトはJavaScriptではないんで、別にサーバで稼働する言語を覚える必要があります。

こういった動作を行わせるのであれば、HTML/CSSなどの記述言語を理解しただけでは不十分です。
どのような動作を行っているのか、サーバはどういう役割を持っているのかを理解しないといけません。
また、サーバサイドスクリプトを開発するのであれば、自分でサーバを立てた開発環境が必要です。
動作確認を行うたびにサーバにあげるのでは手間がかかりすぎますし、そもそもそういった利用はマナー違反です。
(開発中ということはエラーが発生する可能性が極めて高い)
もしサーバの停止や、破損といった事例になると数千万単位で損害賠償を請求される可能性もないとは言えません。

ただのHTML作成から、こういったスクリプト作成に入る段階になったら、実際の作成はまず手を止め、各プロトコルやサーバの役割といった基礎情報の習熟に一旦取り組むとよいと思います。
・・・もちろん、大量な情報量ですからすべて理解することは大変です。
てか、私も基礎の基礎しかわかってないス。
が、それすらわからなければ開発は無理といっても過言じゃないです。
各ドキュメントもその程度の知識は前提になっていますし。
  • 回答No.1

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

JavaScript自体別ファイルなんで、読み込みしないと。
<script type="text/javascript" src="スクリプトパス"></script>
で、jquery.min.jsとjquery.raty.js(もしくはjquery.raty.min.js)にsrc通してください。
書くところはhead内でよいです。
実際の配置されている場所がわからないのでパスはわからんですが、ふつうのリンクと一緒です。
./js/jquery.min.js
みたいに。

ちなみに、レーティングしても保存するサーバスクリプト組まないと何にもならんですよ。
お礼コメント
s13doridori

お礼率 67% (25/37)

丁寧な解説ありがとうございます。

スクリプトパスを指定するということはわかりました。

http://www.mt312.com/category/script/

先のjQuery Ratyは難しすぎたので
新しく上記のサイトを参考に試してみたところ、設置はできたのですが
星型評価のところをクリックしても結果が反映されない、データが残っていないという状態です。

>ちなみに、レーティングしても保存するサーバスクリプト組まないと何にもならんですよ。
これはどういうことなのでしょうか?
投稿日時:2011/11/23 21:15
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

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

関連するQ&A

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

ピックアップ

ページ先頭へ