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

アマゾンやyouyobeのような星型評価をサイトに実装したいと思い http://www.lifeisg.com/bl...

neko-ten さんからの 回答

  • 2011/11/24 11:58
  • 回答No.2
neko-ten

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

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

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

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

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

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

ただのHTML作成から、こういったスクリプト作成に入る段階になったら、実際の作成はまず手を止め、各プロトコルやサーバの役割といった基礎情報の習熟に一旦取り組むとよいと思います。
・・・もちろん、大量な情報量ですからすべて理解することは大変です。
てか、私も基礎の基礎しかわかってないス。
が、それすらわからなければ開発は無理といっても過言じゃないです。
各ドキュメントもその程度の知識は前提になっていますし。
この回答にこう思った!同じようなことあった!感想や体験を書こう!
この回答にはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A
  • PHPでレイティングバーの値を取得 JavaScript

    下記のようなJQuery スクリプトにおいて、 レイティングバーの値を、PHP変数に取得するには どうすればいいのでしょうか。ご指導お願い致します。 ちなみに、 $manzokudo = $_POST['rating']; var_dump($manzokudo); で、ダンプしたところ、中身がNULLでした。 【detail.php】 <link rel="stylesheet" type="text/css" href="jquery.rating.css"> <script type="text/javascript" src="jquery-2.1.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script> <script type="text/javascript" src="jquery.rating.js"></script> <script type="text/javascript"> $(function () { // レーティングバーを有効化 $('.starbar').rating({ cancel: '消去', // 「キャンセル」ボタンのテキスト // ★アイコンをクリックした時の処理 callback: function(value){ // detail.phpに対してレイティングバーの値を送信 $.post( 'detail.php', { rating: value }, function(){ window.alert('「' + value + '」をつけました。'); } ); } }); }); </script> </head> <body> <?php $_POST[] ?> </body> </html>...

  • jQueryの導入方法について CSS

    jQueryの導入が上手くいかず、全く動かなくて困っております。 サイト(http://labs.opentone.co.jp/?p=4923)から説明があったURLから実装に必要なjQueryをダウンロードしました。 ・jquery.flexslider.js ・flexslider.css そして下記コードを入力しました。 <link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="jquery.flexslider.js"></script> さきほど取得した画像をスライドショーを表示させたい場所に下記の通り指定します。 画像名を「sampleX.png」としています。 <div class="flexslider"> <ul class="slides"> <li><img src="images/sample1.png"></li> <li><img src="images/sample2.png"></li> <li><img src="images/sample3.png"></li> <li><img src="images/sample4.png"></li> <li><img src="images/sample5.png"></li> </ul> </div> 最後にflexfliderの関数を呼び出してスライドショーを実行させます。 $("document").ready(function(){ $('.flexslider').flexslider(); }); 以上のことを行ってjQueryらしい動作どころか画像すら表示されませんでした。(画像パスは入力し直しています) 他にダウンロードするものやコードを書かなければならないことなど、動作に必要なものについて教えて頂けませんでしょうか。 ※上記以外のことは一切行っておりません 何卒よろしくお願い致します。...

  • jQueryでホバーされていない要素を半透明にする JavaScript

    http://www.skuare.net/test/jopacity_show.html 下記のようにスクリプトがありますが、いまいちわかりません。 画像の場合 <li><img src=hoge.gif title="menu 1"></li>でよろしいのでしょうか? <ul id="menu"> <li>menu 1</li> <li>menu 2</li> <li>menu 3</li> <li>menu 4</li> </ul> 「menu 1」にマウスオーバーされた際に、ほかの2-4が半透明になるイメージです。 まずはjQueryからjquery.jsをダウンロードします。 その後、以下のようなscriptを記述します。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#menu').children().hover(function() { //#menuの子要素にマウスオーバーした時の処理 $(this).siblings() //その要素の兄弟要素をすべて取ってきて .stop().fadeTo(500,0.5); //500ミリ秒かけて、opacity0.5まで変化させます }, function() { //マウスアウトの処理 $(this).siblings() .stop().fadeTo(500,1); //戻します }); }); </script>...

  • jqueryが動作しない その他(プログラミング・開発)

    jqueryが動作しません。 私が行った手順を書きます。jqueryのサイトからdownloadをします。英文だったのでDreamweaverで開いて名前を付けて別名で保存しました。jquery-1.8.0.js拡張子で保存。 ソースコードをかいてみました。 <html> <head> <script src="jquery-1.8.1.min.js"></script> // urlを指定した場合です。 <script src="http]//jquery-1.8.1.min .js"></script> </head> <body> <h1>Jquery</h1> <script> $(function(){ $('h1').css('color'.'red'); }); </script> </body> </html> これを保存します。(拡張子は.navi.html) 実行しても動作しません。どうしてでしょうか?...

  • bxsliderでスライドショーの間違い教えて ホームページ作成ソフト

    ホームページ制作素人の質問で申し訳ありません。 「bxslider」を用いてスライドショーを作成しようとしていますが、jQueryのホームページから必要ファイルをダウンロードし、ガイドに従いサンプルをコピペして一番基本的な(と思われる)ものを作成してみましたが、張付けた画像が4枚縦に並んで表示されるだけで、「スライドショー」的なものになりません。 プログラムの理解が基本的に不十分な素人の厚かましい質問で恐縮ですが、下記の記述のどこが間違っているか、どう修正すれば良いか、などどなたかご教示下さればありがたく思います。 <head> <!-- jQuery library (served from Google) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script src="jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="jquery.bxslider.css" rel="stylesheet" /> </head> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxSlider({auto: true,autoControls: true}); </script> <ul class="bxslider"> <li><img src="http://www.geocities.jp/画像ファイル1.jpg" /></li> <li><img src="http://www.geocities.jp/画像ファイル2.jpg" /></li> <li><img src="http://www.geocities.jp/画像ファイル3.jpg" /></li> <li><img src="http://www.geocities.jp/画像ファイル4.jpg" /></li> </ul> </html>...

ページ先頭へ