2012年01月17日

Ruby on Rails Rails3 link_toでputとdeleteしたらログアウト

link_toのputとdeleteでログアウト


これは何かというと、rails2からrails3にversionupしたら
いままで普通に動いていた
link_to hoge_path, :method => :delete

この削除リンクで、削除はできるが、削除した後にログアウトするという現象が発生した。

環境


ruby1.9.3
rails3.0.7

状況


link_toのputとdeleteで発生、getは問題なくpostは試していない。
form_tagのputとdeleteでは問題なく動作する。

原因


link_toとform_tagで何が違うのかよく見たところ
form_tagの場合は
<input name="authenticity_token" type="hidden" value="57NpCqL11bcGsEQNpnjjWqMxbRrqefq2fBMkjEf+4FI=">

このようなhiddenが入っていた。

これはrailsが自動的にCSRF対策を行い
params[:authenticity_token]とsession[:csrf_id]を比較して、同値であればOKというようにしているらしい。
というわけでこれをlink_toに持たせれば解決じゃね?と思い実行

解決策


authenticity_tokenはform_authenticity_tokenというメソッドで取得可能なので、
link_to hoge_path(削除したいitem, :authenticity_token => form_authenticity_token), {:method => :delete}

こんな感じで問題なく動作しました。

ただ、「railsのajax用のヘルパを使わずに、独自にjavascriptを書いてdbをいじる時は手動でauthenticity_tokenをいれてあげないといけません。」
という文をみつけたので、実はjavascriptとかそっちのほうの設定とかなんやらに問題があるのかも?

rails3のよく使うコマンドについて下記に書いてあります。
(サイトがめっちゃ重い時もあります;)
Ruby on Rails Rails3コマンド 〜よく使うコマンド〜
posted by RicK at 09:35| Comment(0) | TrackBack(0) | 日記

2011年10月28日

Ruby on Rails 小数の表示桁数指定 切り捨て

小数桁数指定の切り捨て表示


railsで1.99999などを1.99で表示などが何気に面倒だったので表示方法を記載します。

環境


ruby1.9.1
rails2.3.11

今回なぜ切り捨て表示を使用としたか


AとBという値があり双方を比較する処理があります。
Aは自由に設定できる数値で、Bは自動で算出されるデータとなります。
AとBを比較した結果Bが大きければ特定の処理を行うというものです。

何が起きたかというと、
B>=Aなのに処理が実行されないという現象が起きました。
(BはDBに保存されておりviewで表示している)

原因


原因はview側で表示するときに
sprintf("%0.2f", 数値)

としており、小数第3位の値が四捨五入されてしまっているため表示している値が異なりviewと実際の処理に誤差が生じてしまいました。

例:
A=0.05
B(DB)=0.0453251
B(view)=0.05


解決方法


実際の処理が間違っているわけではないのでviewがわの表示を切り捨てで表示すればよいだけです。

この切り捨てで小数位置指定がなにげに面倒でした。

・floor
> hoge=1.9999
=> 1.9999
>> hoge.floor
=> 1
>> hoge.floor(2)
ArgumentError: wrong number of arguments(1 for 0)
from (irb):8:in `floor'
from (irb):8
from /home/search/ruby/bin/irb:12:in `<main>'

整数を返すので☓
これに引数与えれば小数第?位を表示とかしてくれたら楽だったんだが。

・s
> hoge=1.9999
=> 1.9999
>> sprintf("%0.4s", hoge)
=> "1.99"
> hoge=9.27092e-05
=> 9.27092e-05
>> sprintf("%0.4s", hoge)
=> "9.27"
>> sprintf("%0.2f", hoge)
=> "0.00"
>> sprintf("%0.10f", hoge)
=> "0.0000927092"

sprintfのsは四捨五入、これでうまく行きそうでしたが、
「9.27092e-05」こいつのせいで☓
これはなにか?というと、小数の桁数が大きすぎると「e-05」で小数点の位置を示します。
実際の数値は「0.0000927092」なので「e-05」は「0.0000」を前につけるようになります。
sでこれを処理しようとすると上記の通り「9.27」になってしまうので☓となります。
惜しい


BigDecimal
あんまり詳しくは知りませんが、可変長浮動小数点計算機能ライブラリです。
> hoge=9.27092e-05
=> 9.27092e-05
>> BigDecimal("#{hoge}")
=> #<BigDecimal:7cd07f8,'0.927092E-4',18(18)>
>> BigDecimal("#{hoge}").floor(2)
=> #<BigDecimal:7cc5e70,'0.0',9(36)>
>> sprintf("%0.2f",BigDecimal("#{hoge}").floor(2))
=> "0.00"
>> sprintf("%0.7f",BigDecimal("#{hoge}").floor(7))
=> "0.0000927"
>> sprintf("%0.6f",BigDecimal("#{hoge}").floor(6))
=> "0.000092"

まずBigDecimalはStringしかダメなので"#{}"これで囲ってあげます。
次に、BigDecimalを使用するとfloorで小数第何位まで表示するか指定可能となります。
そのままだと「#<BigDecimal:7cc5e70,'0.0',9(36)>」こんな表示なので
sprintfのfで表示を整えてあげると完成です。
fは四捨五入ですが、floorで切り捨てているので問題なし。
posted by RicK at 19:04| Comment(0) | TrackBack(0) | 日記

2011年09月22日

IE6 CSS 上下左右中央寄せ

上下左右中央寄せ


基本的に最近のブラウザだとcssで
text-align: center;
display: table-cell;
vertical-align: middle;

これを書いておけば上下左右中央寄せになりますが、
IE6ではダメだったので苦労した結果を記載

他のサイト


他のサイトを色々見ると
display: inline;
zoom: 1;

でできるとか書いてあるところも何個かあったのですが
全然ダメでした。
他にも色々ありましたがややこしいので諦めました。
その時は他にもmin-widthやmax-widthのIE6版でも調べていたのですが、
横幅最大180pxでにしたい場合
width: expression(this.clientWidth > 180? "180px" : "auto");

とすればできるようになります。(180pxにしたいとき > 180だとダメなときもとか言う話も。。)
document.body.clientWidthも多くありましたが数値を正しく取れるところと取れない所がありました。
その場合thisだと取れます。(ただし、場所によってはCPU跳ね上がって動かなくなったりしました。)

最小は>を<に変えるだけ
heightはclientWidthでなくclientHeightにすれば良い。

これを使用する場合expressionが無駄にメモリを食うという話もあったのでご注意を

解決方法


* html #main img {
padding-top: expression(this.clientHeight > 150? "0" : ((150 - this.clientHeight) / 2) + "px");
}

* htmlはIE6だけの処理
#mainのimgの最大横幅は150
151以上ならばpadding-topは0
150以下ならば(150-画像の横幅)÷2のサイズの空白をセットするといった具合です。

とりあえずこれでうまくいきました。
posted by RicK at 19:05| Comment(0) | TrackBack(0) | 日記

2011年09月21日

jQueryでグラフ表示2 〜Google Charts〜


基本的に前回と変わりませんがまたちょっとやっったので記載しておきます。

ついでにこっちにもアップしたので暇なかたどうぞ
こっち
(あんまかわんないけど)

さて、大体は前回を参照してもらうとして今回はオプションについてちょっとだけ書きます。

グラフ




ソース


<script language="JavaScript"><!--
  jQuery(function(){
    var api = new jGCharts.Api();
    jQuery('<img>').attr('src', api.make({
    data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],
    size : '100x100',
    legend : ["data1","data2","data3"],
    axis_labels : ["DATE1","DATE2","DATE3"],
    type : "bhs",
    colors : ["000000","800000","FF0000"]})).appendTo("#bar2");
  })
//--></script>


オプション


size : 画像のサイズを変更します最大300,000 pixelsとなります。
legend : ブロックの種類説明
axis_labels : y軸の説明
type : グラフの種類
colors : ブロックの色指定

といった感じです。
他にもまだまだある感じですがとりあえずこんなかんじで。
posted by RicK at 11:50| Comment(0) | TrackBack(0) | 日記

2011年07月01日

Ruby on Rails 〜Excelの読み込み spreadsheet〜

spreadsheetとは?


rubyでExcelファイルを読み込むためのライブラリです。

環境


ruby 1.9.1p378
rails 2.3.11
rake 0.8.7
spreadsheet
Excel

使用した背景


Excelにフィールドの仕様を書いてあるのですが、それを元に取り込み用のファイルを作成するのが面倒だったために、Excelから直接ファイルが作成したくて作成しました。

Install


$ gem install spreadsheet


rakeで実行するためlib/tasksに作成


$ vi lib/tasks/hoge.rake
require 'rake'
require 'spreadsheet' // これでspreadsheetを読み込む
namespace :excel_conversion do
task :create_field_csv do end
end


取込み先と出力先を指定させるために引数を追加


task :create_field_csv, "in_file", "out_file"
task :create_field_csv do |x, args|


Excelを読み込む


excel = Spreadsheet.open(args.file, 'rb')


sheetの選択


sheet = excel.worksheet("シート名")


指定行の読み込み


row = sheet.row(r)
※ r=整数


指定行で指定行の読み込み


row[l]
※ l=整数


実際のソース


require 'rake'
require 'spreadsheet'
require 'csv'
require 'app/models/field'
namespace :excel_conversion do
task :create_field_csv, "in_file", "out_file" # 引数を受け取るために記述
task :create_field_csv do |x, args|
excel = Spreadsheet.open(args.in_file, 'rb') # 読み込み専用
sheet = excel.worksheet("シート名")
r = 4 # 行
l = 1 # 列

text = CSV.generate do |csv|
while r <= 50 do # 適当に50行読み込む
row = sheet.row(r)
rows = []
break if row[1].blank? # 50行全部読み込むと長いので空の行があったら停止
while l <= 9 do # 指定列の9行目までを読み込む
case l
when 3
Field::TYPES.each do |f| # app/models/fieldを読み込んでFieldモデルのTYPESを読み込んでいます。
if f.name == row[l]
rows << LABEL[f.code] # ただのhashで入れる値を変えてるだけです。
end
end
when 4
# 3列と4列は結合しているため4列目は登録しない
when 5,6,7,8,9
row[l].blank? ? rows << 0 : rows << 1
else
rows << row[l]
end
l += 1
end
csv << rows
l = 1
r += 1
end
end
# ファイル出力
file = open(args.out_file, 'w')
file.puts text
file.close
end
end


実行方法


$ rake excel_conversion:create_field_csv[参照先,出力先]
posted by RicK at 18:08| Comment(0) | TrackBack(0) | 日記

2011年06月21日

jQuery animation 〜動きのあるWebサイト作り〜

動きのあるWebサイトとは?


ここで言う動きのあるWebサイトとは、
オンマウス時に見た目が変わること。

環境


jquery-1.4.2.min.js



動きはここで(手抜きですいませんw)

では解説に入ります。

jQueryの読み込み


まずは、jQueryを読み込まないと始まりません。
<script type="text/javascript" src="http://search.kbmj.com/javascripts/jquery-1.4.2.min.js"></script>

これによりjQueryを読み込みます。
自分で試すときは
http://jquery.com/
ここから落としてきてください。
本来は内に記述します。

表示場所


表示場所の指定
< div id="box" title="sample"></div>
< div id="linkText" class="lt"></div>


jQuery


<script language="JavaScript"<>!--URL = [1,2,3,4] //長いので省略
jQuery(function(){
  for (var i=1; i <= URL.length; i++) {
    jQuery("#box").append('< a href="' + URL[(i - 1)] + '"><div id="box'+ i + '" class="box" title="sample' + i + '" > < /div > ');
    move("box" + i, i);
  };

  jQuery(".box").css({
    "width":"40px",
    "height":"40px",
    "position":"absolute",
     "top":"400px",
    "background-color":"#FFCC66",
    "cursor":"pointer"
  });

  jQuery(".lt").css({
    "width":"270px",
    "position":"absolute",
    "font":"bold 10pt monospace",
    "top":"350px",
    "letter-spacing":"2px",
    "margin":"0px",
    "padding":"5px",
    "border-top":"dotted 2px #FFCC66",
    "border-bottom":"dotted 2px #FFCC66",
    "display":"none"
  });

  function move(id, count){
    jQuery('#' + id).animate({"left": (count * 100) + 200 + 'px'});
  };

  jQuery(".box").hover(
   function(){
     jQuery(this).css({"background-color":"#669933"});
     var tx = jQuery(this).attr("title")
     jQuery("#linkText").text("->" + tx);
     jQuery("#linkText").show();
   },

   function(){
     jQuery(this).css({"background-color":"#FFCC66"});
     jQuery("#linkText").text("");
     jQuery("#linkText").hide();
   }
  );
});
//--></script>

#boxに対しての動作


for (var i=1; i <= URL.length; i++) {
    jQuery("#box").append('< a href="' + URL[(i - 1)] + '" >< div id="box'+ i + '" class="box" title="sample' + i + '">< /div >');
    move("box" + i, i);
  };

< div id="box" title="sample">< /div>内にURLの数だけ< a>タグを追加します。

  function move(id, count){
    jQuery('#' + id).animate({"left": (count * 100) + 200 + 'px'});
  };

< a>タグ追加後moveに引数でid名と現在地(何ループ目?)を引数に渡してmoveの処理を行います。
moveの処理は、その名の通りboxを動かします。
animateによって動きのある動作をcssで指定できます。
どのboxをで第1引数のidをどれだけ移動させるかに第2引数のcountを使用しています。

#boxと#linkTextに対しての動作



  jQuery(".box").hover(
   function(){
     jQuery(this).css({"background-color":"#669933"});
     var tx = jQuery(this).attr("title")
     jQuery("#linkText").text("->" + tx);
     jQuery("#linkText").show();
   },
   
   function(){
     jQuery(this).css({"background-color":"#FFCC66"});
     jQuery("#linkText").text("");
     jQuery("#linkText").hide();
   }
  );

hoverは、各boxにマウスが重なったとき、外れたときの動作です。
まずhoverの第1引数に記述されているのが、マウスが重なったときの処理です。
cssで背景を変更、< a>タグのtitleを取り出して#linkTextに記述して表示しています。
第2引数は、マウスが外れたときの動作です。
cssで背景を元に戻して#linkTextの内容を空にして非表示にしています。

CSS


CSSの記述内容は割愛させていただきますが、本来は外部参照の方が綺麗ですね。

jQueryを使用するとこのような動きのあるサイトが簡単に作成可能です。
posted by RicK at 10:53| Comment(0) | TrackBack(0) | 日記

2011年03月20日

jQueryでグラフ表示 〜Google Charts〜


Google Chartsとは?


jQueryを使用して簡単にグラフを作成できるプラグインです。

環境


./jquery-1.5.1.min.js
./jgcharts/jgcharts.js 0.97
./jgcharts.html


Download


[HP]http://www.maxb.net/scripts/jgcharts/include/demo/#1
[DOWNLOAD]http://www.maxb.net/scripts/jgcharts/jgcharts-0.97.zip

jgcharts.zipをdownload(2011/3/20時点でversion:0.97)

内容:
.settings
.project
doc
include
lib
plugins
jgcharts
jgcharts.pack

使用方法


まずは、[HP]に掲載されているのを試してみよう。

$ vi jgcharts.html

<html>
<head>
<title>jgchargs</title>
<meta http-equiv="content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="./jgcharts/jgcharts.js"></script>
<script language="JavaScript"><!--
  jQuery(function(){
    var api = new jGCharts.Api();
    jQuery('<img>').attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]})).appendTo("#bar1");
  })
//--></script>
</head>
<body>
 <div id="bar1"></div>
</body>
</html>


これで上記のような棒グラフが表示されます。(表示されてなかったらごめんなさい)

解説


<script type="text/javascript" src="./jquery-1.5.1.min.js"></script>

jqueryを読み込みます。
こいつがないとjQueryが使用できません。
jquery-1.5.1.jsでもだめです。

<script type="text/javascript" src="./jgcharts/jgcharts.js"></script>

GoogleChartsを読み込みます。
これによりグラフを作成します。

<script language="JavaScript"><!--
  jQuery(function(){
    var api = new jGCharts.Api();
    jQuery('<img>').attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]})).appendTo("#bar1");
  })
//--></script>

htmlにjavascriptを記述しています。
無論外部参照も可能です。
jQuery(function(){})

これはhtml内を読み込んでから処理を行うということであり、これがないと基本的にjQueryは動きません。
classなどhtml内の記述を使用してjQueryを使う場合は、必ずこの中でjQueryを記述するようにしましょう。
var api = new jGCharts.Api();

jgchartの初期化

jQuery('<img>').attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]})).appendTo("#bar1");

グラフを作成して#bar1に挿入します。
appendTo:(A).appendTo(B) AをBの後ろに挿入。

<div id="bar1"></div>

ここにグラフを表示します。
posted by RicK at 08:30| Comment(0) | TrackBack(0) | 日記

2011年01月14日

jQuery Uncaught Syntax error, unrecognized expression: [@href^="http://"]

Uncaught Syntax error, unrecognized expression: [@href^="http://"とは?


jQueryを練習していておこったエラーです。

なにをして起きたエラーか


[01]javaScriptが書けない、初心者が始めるjQuery
ここを参考に「4.aタグにtarget="_blank"を追加するサンプル」をやっていたら発生したエラーです。

記述したコード


実際に記述したコードです。
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/original.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a[@href^="http://www.google.com"]').attr('target', '_blank');
});
</script>
</head>
<body>
<a href="#">hoge</a>
<p id="strong">bbb</p>
<p>bbb</p>
<a href="http://www">hoge</a>
<a href="http://www.yahoo.jp">hoge</a>
<a href="http://www.google.com">hoge</a>
</div>
</body>
</html>

aタグの部分でhttp://www.google.comのurlのみtargetの_blankを付加します。

解決策


上記コードを実行したらエラーがでました。
タイトルにもあるように
「Uncaught Syntax error, unrecognized expression: [@href^="http://"]」
ですね。
参考webページのと同じように作っているのになぜエラーがでるのかは謎でしたが、調べてみたところ。
http://www.thalesjacobi.com/Jquery_error_uncaught_exception_Syntax_error_unrecognized_expression
ここの下の方にGoodCodeとBadCodeで@idを使用するとBadなことから@を外してみたら解消できました。

jQuerのversionで@の扱いとか違うんですかね?
というよりも@が何のためにあるものなのかがわからないんですけどねw
これもそのうち調べないと。
posted by RicK at 14:27| Comment(0) | TrackBack(0) | 日記

2011年01月11日

jQueryの使い方

jQueryとは?


JavaScriptのライブラリでCSS操作などで快適に動作も軽く操作できるようになっています。

環境


jquery-1.4.4
/home/hoge/js/jquery-1.4.4.js
/home/hoge/js/original.js
/home/hoge/hoge.html

InstallというかDownload


本家サイト「http://jquery.com/」より最新版をDownload

2011/1/11 現在の最新version
http://code.jquery.com/jquery-1.4.4.js

準備


$ pwd/home/hoge/jquery
$ mkdir js
$ cd js
$ wget http://code.jquery.com/jquery-1.4.4.js
$ cd ..
$ vi hoge.html
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
// これがdownloadしたjquery
<script type="text/javascript" src="js/original.js"></script>
// これは、自分で作成するjquery
</head>
<body>
<a href="#">hoge</a>
<p id="strong">bbb</p>
<p>bbb</p>
</body>
</html>

一回ブラウザで表示してみましょう。
普通にリンクのhogeとbbbが二つ並んでいるだけだと思います。

コード記述


$ vi js/original.js
/* jQuery */
$(function() {
$("p").click(function() {$(this).css("margin-left", "50px");})
// pをクリックすると左に50px空白
$("p#strong").html("<strong>cc</strong>");
// id=strongのpが読み込まれたときbbからccへ変換される+太字
$("a").hover(
function() {
$(this).css("color", "red");
},
function() {
$(this).css("color", "black");
}
);
// aにマウスオーバーすると赤離すと黒になる
});

では、
リンクにカーソルをあわせたときに色が変わるか、bbbがccになっているか、
bbbをクリックすると右に移動するか試してみてください。

自分も今日始めて見てやったので、微妙な内容かもしれませんが、参考までに。

参考サイト


「jQuery本家」http://jquery.com/
「jQuery日本語リファレンス」http://semooh.jp/jquery/
「はじめてのjQuery」http://higashizm.sakura.ne.jp/jquery_first/
「第2回 jQueryのインストール・簡単な使い方 – jQuery入門」http://ponk.jp/?p=1696
posted by RicK at 14:50| Comment(0) | TrackBack(0) | 日記

2010年12月28日

Ruby on Rails MySQL 再install

MySQL再install


INDEXを貼ったら壊れた、、、
同じクエリーなのに違う結果がかえってくるようになった。。
全部データ消していれたりいろいろやったがダメなので再install

環境


MacOS 10.5.8 MacBookPro
MySQL 5.5.8
Ruby 1.9.1p378
Rails 2.3.5

削除


$ rm -rf /usr/local/mysql(このmysqlはlnでリンクされたものだと思うので同フォルだのmysql....っていうのも削除)
$ rm -rf /Library/StartupItems/MYSQLCOM
$ rm -rf /Library/PreferencePanes/MySQL.prefPane(なければ気にせず)
$ rm -rf /Library/Receipts/mysql-XXXXXXXXXXXXXX.pkg

これでmysqlの削除完了

MySQL Install


http://www.mysql.com/downloads/mysql/
上記から10.5用で32bitのをdownload(64bitだと環境設定から起動できるやつが使えなかった)

downloadしたら4つ程ファイルがあると思うので、長い名前のpkg、短いpkgとprefPaneの順で実行。
そしたら環境設定が立ち上がってボタン押せば起動できるようになります。

rails 起動


$ ruby script/server

。。。エラー
../mysql_utf8.rb:15:in `': undefined method `each' for class `Mysql::Result' (NameError)

うむ〜mysqlは起動してるんだがrailsが動かん、、

解決


$ gem install mysql -- --with-mysql-config=/usr/local/mysql/bin/mysql_config
$ ruby script/server
Can't connect to local MySQL server through socket '/opt/local/var/run/mysql5/mysqld.sock' (2)

またエラー。。。
mysql動いてるってのに、、、ふむ。。

解決


$ mysql -uroot
$ mysqladmin -uroot -p version
Server version 5.5.8
Protocol version 10
Connection Localhost via UNIX socket
UNIX socket /tmp/mysql.sock
Uptime: 1 min 40 sec

お、socket見てる場所違うじゃん、という訳でlnでリンク貼っちまえばいいんでね?
$ sudo ln -s /tmp/mysql.sock /opt/local/var/run/mysql5/mysqld.sock

フォルダないときは作ってしまえばおk
これで完了
posted by RicK at 16:28| Comment(0) | TrackBack(0) | 日記