//---------------------------------------------------------------------------------------------------- // 5w1h.js ---- ajax 5w1hゲーム JavaScriptプログラム // Author:Yebis // date:2008/03/04 // Version:0.6 // //=== 開発履歴 === // 0.6 HTMLを変更しやすいようにdisp_系と_to_html系の関数を上部へ移動 // 0.5 DISP_PAGES_ID1,2にページインデックスを表示するように変更 // 0.4 ランキングのXML解析で過去ログ解析と重なる部分を利用するように変更 // 0.3 ワード総数取得と過去ログ取得をわけるように変更 // 0.2 log.js および ranking.js の処理を5w1h.jsにまとめるように変更 // 0.1 とりあえず作成してみる // //=== メモ === // 出力HTMLに関する記述は「disp_○○」か「○○_to_html」関数にあるよ //---------------------------------------------------------------------------------------------------- // 変数初期設定(定数) //---------------------------------------------------------------------------------------------------- var PLAY_CGI = "cgi-bin/play.cgi"; //5W1H文章取得CGI var TOTAL_CGI = "cgi-bin/total.cgi"; //ワード総数取得CGI var LOG_CGI = "cgi-bin/log2.cgi"; //過去ログ取得CGI var RANKING_CGI = "cgi-bin/ranking.cgi"; //ランキング取得CGI var ENTRY_SENTENCE_CGI = "cgi-bin/sentry.cgi"; //文章投稿CGI var ENTRY_WORD_CGI = "cgi-bin/wentry.cgi"; //ワード投稿CGI var COMMENT_CGI = "cgi-bin/comment.cgi"; //コメント投稿CGI var ASSESSMENT_CGI = "cgi-bin/assessment.cgi"; //文章評価投稿CGI // var DISP_SENTENCE_ID = "5W1H_sentence"; //5W1H文章を表示するID属性 var DISP_TOTAL_ID = "5W1H_total"; //ワード総数を表示するID属性 var DISP_LOG_ID = "5W1H_log"; //過去ログを表示するID属性 var DISP_RANKING_ID = "5W1H_ranking"; //ランキングを表示するID属性 var DISP_PAGES_ID1 = "5W1H_pages1"; //ページインデックスを表示するID属性その1 var DISP_PAGES_ID2 = "5W1H_pages2"; //ページインデックスを表示するID属性その2 // var PLAY_BUTTON_ID = "5W1H_play_button"; //文章作成ボタンのID属性 var ENTRY_AUTHOR = "author"; //作成者テキストフィールドのID属性 var ENTRY_SENTENCE_BUTTON_ID = "5W1H_entry_sentence_button"; //文章投稿ボタンのID属性 var ENTRY_WORD = "word"; //ワードテキストフィールドのID属性 var ENTRY_WORD_BUTTON_ID = "5W1H_entry_word_button"; //ワード投稿ボタンのID属性 // var DISP_GET_LOG_LENGTH = 5; //過去ログ取得数 var DISP_LOG_LENGTH = 10; //1ページに表示する過去ログ数 var DISP_COMMENT_LENGTH = 10; //文章ごとのコメント表示数 var DISP_RANKING_LENGTH = 30; //ランキング表示数 // var RANKING_TYPE = 0; //ランキングのタイプ(0:評価ポイント順, 1:コメント数順, 2:評価ポイント＋コメント数順) //---------------------------------------------------------------------------------------------------- // 変数初期設定(初期値) //---------------------------------------------------------------------------------------------------- var current_page = 1; //現在のページ(過去ログ表示で使用) var first_page = 1; //最初のページ(過去ログ表示で使用) var last_page = 1; //最後のページ(過去ログ表示で使用) var pages = []; //ページを添え字とした過去ログ配列 //---------------------------------------------------------------------------------------------------- // 汚いソースの合間に…AA劇場① //---------------------------------------------------------------------------------------------------- /* 馬鹿もーんっ････! なんだっ･･! このコードはっ････! 通るかっ････! こんなもん･･! _r――――、 ／r――､＿＿r＼ `/ / -#-､ヽ r-ゝ ｜ Lu v ＼`ーｲ／ ヽ ∥-､)ヽ￣ヽヽ /／~7| ∥6| u`ｰﾟｲ u ｜ﾟｰ | ハ_| u＿ﾉ ( u )じv| | ﾊ r"ニ=＝=＝=ﾆヽ| | /|｜|亠亠亠亠亠|∥ |/ |｜lｰiｰiｰiｰiｰrl∥ iヽヽヽニニニニニﾝﾉ | ヽ `ー―ﾆ二二-く＼ | ヽ :::／ ｜＼ | i ／/ ｜ ヽ iヽ＿/／＼ ｜ `oヽ|:::/ ＼｜ |::/ ｒ￣￣￣￣ヽ | あ | | き | | ら | | め | ＿ | た | 谷w) | ら ＞ t_ノ | ？ | ／/ ヽ ヽ＿＿＿_／/ i⌒/ i rニ7 ⑪-" ﾉ ｜ |/=j (`￣ ｜ r" ┘ i￣￣￣/ /4 ( i `{ / `/__彡{| `i } ( ミil､ ｉ ノ じ二ニLっ) ど_j */ //---------------------------------------------------------------------------------------------------- // 受信した5W1h文章をDISP_SENTENCE_IDに表示する //---------------------------------------------------------------------------------------------------- function disp_sentence(text){ try{ $(DISP_SENTENCE_ID).innerHTML = text; document.getElementById("target").innerHTML = 'twitter Twitterでつぶやく'; }catch(e){ alert(e + " in : disp_sentence()"); } } //---------------------------------------------------------------------------------------------------- // 受信したワード総数をDISP_TOTAL_IDに表示する //---------------------------------------------------------------------------------------------------- function disp_total_word(count){ try{ $(DISP_TOTAL_ID).innerHTML = "現在" + count + "個のワードが登録されています。"; }catch(e){ //alert(e + "in : disp_total_word()"); } } //---------------------------------------------------------------------------------------------------- // 過去ログをDISP_LOG_IDに表示する //---------------------------------------------------------------------------------------------------- function disp_log(log_arr){ try{ var html = ""; var offset = DISP_LOG_LENGTH * (current_page-1); for(var i=offset; i= log_arr.length){ break; } html += ""; } $(DISP_LOG_ID).innerHTML = html; }catch(e){ alert(e + " in : disp_log()"); } } //---------------------------------------------------------------------------------------------------- // 個々の過去ログ表示のHTMLを記述 //---------------------------------------------------------------------------------------------------- function log_to_html(log){ var html = ranking_to_html(log) + "\n" + sentence_to_html(log) + "\n" + assessment_to_html(log) + "\n" + comments_to_html(log) + "\n" + comment_form_to_html(log) + "\n" + meta_to_html(log) + "\n"; return html; } //---------------------------------------------------------------------------------------------------- // ランキング表示のHTMLを記述 //---------------------------------------------------------------------------------------------------- function ranking_to_html(obj){ var html = "" return html; } //---------------------------------------------------------------------------------------------------- // 生成文章表示のHTMLを記述 //---------------------------------------------------------------------------------------------------- function sentence_to_html(obj){ var sentence = "
  • " + obj.sentence + "
    • "; return sentence; } //---------------------------------------------------------------------------------------------------- // 評価フォーム表示のHTMLを記述 //---------------------------------------------------------------------------------------------------- function assessment_to_html(obj){ var html = "
  • " + "この文章どう？" + "" + "グッド！" + "" + obj.assessment.good + "" + "" + "バッド！" + "" + obj.assessment.bad + "" + "　　　
    • \n"; return html; } //---------------------------------------------------------------------------------------------------- // コメント群表示のHTMLを記述 //---------------------------------------------------------------------------------------------------- function comments_to_html(obj){ var comments = ""; for(var i=0; i" + obj.comments[i].name + " " + obj.comments[i].date + "\n"; } return comments; } //---------------------------------------------------------------------------------------------------- // コメントフォーム表示のHTMLを記述 //---------------------------------------------------------------------------------------------------- function comment_form_to_html(obj){ var form = "
  • " + "
    " + "" + "" + " " + "" + " " + "" + "
    " + "
    • "; return form; } //---------------------------------------------------------------------------------------------------- // 文章のメタデータ表示のHTMLを記述 //---------------------------------------------------------------------------------------------------- function meta_to_html(obj){ var meta = "
  • 作成者:" + obj.author + " 日付:" + obj.date + "
    • "; return meta; } //---------------------------------------------------------------------------------------------------- // 評価を表示する //---------------------------------------------------------------------------------------------------- function disp_assessment(id, ass, status){ try{ if(status.result == "正常"){ $(ass + "point" + id).innerHTML = $(ass + "point" + id).firstChild.nodeValue - -1; } //result&reasonを表示 $('status' + id).innerHTML = status.reason; //情報の更新 timerid = setTimeout('read_log(DISP_LOG_LENGTH)', 3000); }catch(e){ alert(e + " in : disp_assessment()"); } } //---------------------------------------------------------------------------------------------------- // 過去ログページへのリンクをDISP_PAGES_ID1,2に生成する //---------------------------------------------------------------------------------------------------- function disp_pages(){ var html = ""; //last_pageの更新 if(pages.length%DISP_LOG_LENGTH != 0){ last_page = pages.length/DISP_LOG_LENGTH; }else{ last_page = pages.length/DISP_LOG_LENGTH - 1; } //<" + (i+1) + " "; } } //Next>> //最後のページにはリンクをつけない if(current_page == last_page){ html += "Next>>"; }else{ html += "Next>>"; } try{ $(DISP_PAGES_ID1).innerHTML = html; $(DISP_PAGES_ID2).innerHTML = html; }catch(e){ alert(e + " in : disp_pages()"); } } //---------------------------------------------------------------------------------------------------- // ランキングをDISP_RANKING_IDに表示する //---------------------------------------------------------------------------------------------------- function disp_ranking(ranking_arr){ try{ var html = ""; for(var i=0; i\n"; } $(DISP_RANKING_ID).innerHTML = html; }catch(e){ alert(e + " in : disp_ranking()"); } } //---------------------------------------------------------------------------------------------------- // 結果と理由をDISP_SENTENCE_IDへ表示する //---------------------------------------------------------------------------------------------------- function disp_result_reason(obj){ disp_sentence(obj.result + "
    " + obj.reason); } //---------------------------------------------------------------------------------------------------- // 汚いソースの合間に…AA劇場② //---------------------------------------------------------------------------------------------------- /* 綺麗なコードなどないっ…！ ､-ヽｰvーz_ ≦ ､､､､､､､ ≧ ∠／―-r-､―ヽゝ ｲ∠――ﾞｰﾞ――ゝ ﾘ∠二コU 匸二ヽﾘ `_| r=＝ r＝=､ |_ {f| しﾟ_ // ､ﾟ〈 |i} lL|[○]Uｌlu ~U"v|ﾌi ｧ＜ r―ヽL|／― |ｲ ﾉ |｢匚匚匚匚匚匚i|i ｲ ﾉ|-r-r-r-r-r-rｦ|ヽ iｉu￣￣二二￣￣v|＼ -1ﾍ＿!_!_!_!_!_!ノ∥ ∥ ||:::::::: /｜∥ ∥ |ヽ / ｜∥ ∥ |へ＼―-／へ/ ∥ これからが ｜ ほんとうの / 地獄だ‥ ＼ ∧＿／∨＼/￣ ＿ ヽ / }ﾚ /ヽ／＜ヽ u ∨u iレ ﾋ`-) ｜＼＼ヽ) ／>/ ヽ( U ＼ `｡Ｖﾚ｡７/ -ヽ〉"""`-ヘ=`-"/ U ∥ u u へ_-> / iヽ i(++-7 / ＼i ＼ ￣￣／=､_ ＼ ／ヽ_／| i ヽ ＼ `ー／＿ノ ノ ヽ ￣￣ ｜ なん… / だと… ＼ ∧＿／∨＼/￣ ハ∧／|／レ ﾊﾉ マ ﾑ ＞ 幺 ヽ＼ヾ ゝ 彳_Ｗヾ＼ヘヘﾍﾍゞ ﾑ( ﾘ<･_≧`＜･ﾊﾞ ﾘヽﾍ ｜ / ヘ/ﾊ i＼ ＿7／ ∠_ ＼ヽ ＼_/ヽ＿ ＼ ＼ r｜ / ￣＼ ＼ ヽ/ ｉ Ｖﾍヽ/ ＿人人人人人人人人＿ ＞な､なんだってー!＜ ￣ＹＹＹＹＹＹＹＹ￣ _r―-､_ ／ `"vν ｉ ／￣""--iｲ iﾍ /ー､u ＿|ﾉ |ﾋiﾞioﾆｰくｭﾆﾘ リ u ゝｉ ＿r-< ＼ (二> ／ |ヽ＼ ＼ " ／ _r-v―、/￣ Σ ＞"`"""ヽ､ ﾚｲﾚﾚﾚ､､Σ ヽ |ﾉ-､"`二|/ﾘ^iﾍ､､､ | ﾘヽoj<_oﾚ_ "､_ ヽ i i 丿 }o〉"oヽ |y} ヽ `-っ |7 ￣ u|/ ＼" ／ヽ`"⊃ ﾉ>､ γ/ｲ￣ // ＼二-"／／ ざわ‥ ざわ‥ ＜￣￣ヽr"￣￣マ -=ﾆ ゝ ∠ ハ、 ヽ / ｨ|i ヽヘヽ | ﾚ|ﾉ|ヽ _／／＼ | `|ハ=< `-ｲ==＝ﾊr-､ | ||_ﾟ〉u _ﾟノ∥)| | ||u/ U ∥ｿ| | ||/＿rヽ ∥ノ | |ヽヽニ二) ／| ハ ／７lヽ ≡ ／ | ｜| / | ＼／ ｕ | ｜| `/ リｗ､l リﾉ | */ //---------------------------------------------------------------------------------------------------- // 文章を作るボタン押下 //---------------------------------------------------------------------------------------------------- function play(){ //通信完了時の処理 var func = function(req){ //取得したXMLから文章を取り出し var text = get_sentence(req); //文章表示関数へ disp_sentence(text); //ボタンのロックを解除する unlock_button($(PLAY_BUTTON_ID)); unlock_button($(ENTRY_SENTENCE_BUTTON_ID)); unlock_button($(ENTRY_AUTHOR)); }; var opts = { onComplete: func }; var ajax = new Ajax.Request( PLAY_CGI, opts ); } //---------------------------------------------------------------------------------------------------- // PLAY_CGIから取得したXMLの5W1H文章を取り出す //---------------------------------------------------------------------------------------------------- function get_sentence(req){ try{ var text = req.responseXML.getElementsByTagName('sentence')[0].firstChild.nodeValue; }catch(e){ alert(e + " in : get_sentence()"); text = ""; } return text; } //---------------------------------------------------------------------------------------------------- // TOTAL_CGIにアクセスしてワード総数を取得する //---------------------------------------------------------------------------------------------------- function read_total_word(){ //通信完了時の処理 var func = function(req){ //取得したXMLからワード総数を取り出す var total_count = get_total_word(req); //ワード総数表示関数へ disp_total_word(total_count); }; var opts = { //asynchronous: false, onComplete: func }; var ajax = new Ajax.Request(TOTAL_CGI, opts); } //---------------------------------------------------------------------------------------------------- // TOTAL_CGIから取得したXMLのワード総数を取り出す //---------------------------------------------------------------------------------------------------- function get_total_word(req){ try{ var count = req.responseXML.getElementsByTagName('total')[0].firstChild.nodeValue; }catch(e){ //alert(e + " in : get_total_word()"); count = "0"; } return count; } //---------------------------------------------------------------------------------------------------- // 作成した文章を投稿する //---------------------------------------------------------------------------------------------------- function post_sentence(form){ //ボタンのロック lock_button($(PLAY_BUTTON_ID)); lock_button($(ENTRY_SENTENCE_BUTTON_ID)); lock_button($(ENTRY_AUTHOR)); //通信完了時の処理 var func = function( req ){ //result(結果)文字列とreason(理由)文字列の取得 var status = get_result_and_reason(req); //結果と理由を表示 disp_result_reason(status); //ボタンのロックを解除 unlock_button($(PLAY_BUTTON_ID)); //情報の更新 read_log(DISP_LOG_LENGTH); }; var opts = { parameters: "sentence=" + $(DISP_SENTENCE_ID).firstChild.nodeValue + "&author=" + form.author.value, onComplete: func }; var ajax = new Ajax.Request(ENTRY_SENTENCE_CGI, opts); } //---------------------------------------------------------------------------------------------------- // 取得したXMLからresultタグの文章とreasonタグの文章を取得する //---------------------------------------------------------------------------------------------------- function get_result_and_reason(req){ try{ var obj = new Object(); obj.result = req.responseXML.getElementsByTagName('result')[0].firstChild.nodeValue; obj.reason = req.responseXML.getElementsByTagName('reason')[0].firstChild.nodeValue; }catch(e){ alert(e + " in : get_result_and_reason()"); text = ""; } return obj; } //---------------------------------------------------------------------------------------------------- // 作成したワードを投稿する //---------------------------------------------------------------------------------------------------- function post_word(form){ //ボタンのロック lock_button($(ENTRY_SENTENCE_BUTTON_ID)); lock_button($(ENTRY_AUTHOR)); lock_button($(ENTRY_WORD_BUTTON_ID)); lock_button($(ENTRY_WORD)); //通信完了時の処理 var func = function( req ){ //result(結果)文字列取得 var status = get_result_and_reason(req); //結果と理由を表示 disp_result_reason(status); //ボタンのロックを解除 unlock_button($(ENTRY_WORD_BUTTON_ID)); unlock_button($(ENTRY_WORD)); //ワード総数情報の更新 read_total_word(); }; var opts = { parameters: "5w1h=" + form.category.value + "&word=" + form.word.value, onComplete: func }; var ajax = new Ajax.Request(ENTRY_WORD_CGI, opts); } //---------------------------------------------------------------------------------------------------- // LOG_CGIにアクセスして過去ログを取得する //---------------------------------------------------------------------------------------------------- function read_log(howmany){ //homany=undefinedならDISP_LOG_LENGTHを代入 if(typeof(howmany) == "undefined"){ howmany = DISP_GET_LOG_LENGTH; } //通信完了時の処理 var func = function(req){ //取得したXMLから過去ログを取り出す pages = get_log(req); //ワード総数表示関数へ disp_log(pages); }; var opts = { parameters: "howmany=" + howmany + "&type=" + RANKING_TYPE, //asynchronous: false, onComplete: func }; var ajax = new Ajax.Request(LOG_CGI, opts); } //---------------------------------------------------------------------------------------------------- // 取得したXMLから過去ログを取り出してオブジェクトにする //---------------------------------------------------------------------------------------------------- function get_log(req){ try{ var arr = []; var creation = req.responseXML.getElementsByTagName('creation'); for(var i=0; i=0; j--){ if(comments.length-1 - j >= DISP_COMMENT_LENGTH){ break; } var comment_obj = new Object(); comment_obj.name = comments[j].getAttribute('name'); comment_obj.comment_id = comments[j].getAttribute('comment_id'); comment_obj.date = comments[j].getAttribute('date'); comment_obj.comment = comments[j].firstChild.nodeValue; obj.comments[obj.comments.length] = comment_obj; } arr[arr.length] = obj; } }catch(e){ alert(e + " in : get_log()"); text = ""; } return arr; } //---------------------------------------------------------------------------------------------------- // コメントを投稿する //---------------------------------------------------------------------------------------------------- function post_comment(form){ //ボタンのロック lock_button(form.input_comment_button); lock_button(form.input_name); lock_button(form.input_comment); //対象となる文章を取得 var id = form.sentence_id.value; //投稿者の名前を取得 var name = form.input_name.value; //投稿するコメントを取得 var comment = form.input_comment.value; //通信完了時の処理 var func = function(req){ //result(結果)文字列とreason(理由)文字列の取得 var status = get_result_and_reason(req); //result&reasonを表示 //disp_result_reason(status); //情報の更新 read_log(DISP_LOG_LENGTH); }; var opts = { parameters: "id=" + id + "&comment=" +comment + "&name=" + name, onComplete: func }; var ajax = new Ajax.Request(COMMENT_CGI, opts); } //---------------------------------------------------------------------------------------------------- // 評価を投稿する //---------------------------------------------------------------------------------------------------- function post_assessment(id, ass){ //ボタンのロック lock_button($('good' + id)); lock_button($('bad' + id)); //通信完了時の処理 var func = function( req ){ //result(結果)文字列とreason(理由)文字列の取得 var status = get_result_and_reason(req); disp_assessment(id, ass, status); }; var opts = { parameters: "id=" + id + "&assessment=" + ass, asynchronous: false, onComplete: func }; var ajax = new Ajax.Request(ASSESSMENT_CGI, opts); } //---------------------------------------------------------------------------------------------------- // RANKING_CGIにアクセスしてランキングを取得する //---------------------------------------------------------------------------------------------------- function read_ranking(term){ if(term == undefined){ term = ""; } //通信完了時の処理 var func = function( req ){ var ranking = get_log(req); disp_ranking(ranking); }; var opts = { parameters: "howmany=" + DISP_RANKING_LENGTH + "&type=" + RANKING_TYPE + "&term=" + term, onComplete: func }; var ajax = new Ajax.Request(RANKING_CGI, opts ); } //---------------------------------------------------------------------------------------------------- // 取得したXMLからランキングの情報を取得する //---------------------------------------------------------------------------------------------------- function get_ranking(req){ //get_logを使用してランキング情報以外を取得 var arr = get_log(req); var creation = req.responseXML.getElementsByTagName('creation'); for(var i=0; i first_page){ current_page--; disp_page(current_page); } } //---------------------------------------------------------------------- // 次のページを表示する 最後のページで使用した場合は動かない //---------------------------------------------------------------------- function next_page(){ if(current_page < last_page){ current_page++; disp_page(current_page); } } //----------------------------------------------------------------------