Ruby on Rails Rails3 processing: パス is not recognized by the 'identify' command

processing: パス is not recognized by the 'identify'

画像をアップロードして表示しようとした時に発生したエラーです。

環境

ruby 1.9.3
rails 3.1.3
rmagick 2.13.1
ImageMagick 6.6.7-10

解決策

identifyのエラーで検索すると大抵は、enviroment.rbに

Paperclip.options[:command_path] = "C:/ImageMagick-6.6.2-Q16/"

こんな感じで追記しろとあったが、自分は解決しなかった。
しょうがないので、
そのエラーを吐き出している場所を探してみました。

$ vi Rails.root/vendor/bundler/ruby/1.9.1/gems/paperclip-2.4.5/lib/paperclip/geometry.rb

raise(NotIdentifiedByImageMagickError.new("#{file_path} is not recognized by the 'identify' command."))

18~30行目あたりのself.from_fileメソッドの上記コードで出力されているようです。
ここらへんでデバッグをしつつ、
identifyコマンドをフルパスで書いてみたりとやっていたところ
jpg形式はエラーにならずpng形式がエラーになっていた。
(PNGしか通さない仕様だったため気づかなかった)

ということは、単純にpingをサポートしてないだけじゃん？ということになり
・サポートできる拡張子を表示

$ convert -list format

やっぱりPNGが入っていなかった。

# yum -y install zlib
# yum -y install libjpeg-devel
ImageMagick再Install
# cd ??/ImageMagickxx/
# ./configure && make && make install
# convert -list format

これで解決

Ruby on Rails Rails3 NoMethodError: private method `readline'

NoMethodError: private method `readline'

rails2からrails3へバージョンアップしたときにでたエラーです。

環境

ruby1.9.3
rails3.0.7

状況

よくあるファイルのアップロードの箇所で起こったエラーです。
コントローラー側でparams[:file]といった具合にファイルを受け取って登録しようとしたら発生しました。(rails2では動いていて)

解決策

細かい説明は
Rails3 + fb_graphでFacebookに画像のアップロードをしてみる
こちらを参考にしていただき、結果としては

params[:file].tempfile.__getobj__

とすれば良い

Ruby on Rails ActionView::Template::Error (incompatible character encodings: ASCII-8BIT and UTF-8)

ActionView::Template::Error (incompatible character encodings: ASCII-8BIT and UTF-8)

rails2からrails3へVersionUpしたときに出たエラーです。

環境

ruby1.9.3
rails3.0.7
mysql5.0.77

状況

formでデータを入力するページで、
text_areaにデータを入力するのだが、
初期のデフォルトのデータとして、特定のhtmlファイルを読み込んでその内容をtext_area内に表示、
２度目以降はDBに登録されたデータをtext_area内に表示するという仕組みがある。

このページをrails2からrails3へVersionUpした後に遷移したら

ActionView::Template::Error (incompatible character encodings: ASCII-8BIT and UTF-8)

というエラーが発生した。

原因

ruby1.9から文字列にエンコーディングが設定されて、
それがデフォルトでASCII-8BITになるのだが、DB adapter(MySQL/Ruby)がエンコーディングを気にせずに、デフォルトのASCII-8BITのまま返してしまうのが原因らしい。

だが、ruby1.9は前から使っていたが発生していないが？
rails3もなにか関係しているんだろうな。

解決策

他のサイト等を見るとバッチあてるとあるが、
１箇所だけで他のところはなんにもないのであまり変えたくないなーと思ったので、
ASCII-8BITに変換されるならUTF-8に変換してしまうことにしました。

ruby1.9からStringに文字コード系のメソッドが追加されたようです。
Ruby1.9をこれから使う人のためのM17Nまとめ
上記の中の

String#force_encoding(encoding)

こいつを使って

@hoge.force_encoding("UTF-8")

これで完成。
このまま登録して、再度外してもエラーになったので、
表示のコードを変換したからといって登録されるデータが変わるでもないので、
とりあえずこれで問題なし。

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コマンド 〜よく使うコマンド〜

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で切り捨てているので問題なし。

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のサイズの空白をセットするといった具合です。

とりあえずこれでうまくいきました。

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 : ブロックの色指定

といった感じです。
他にもまだまだある感じですがとりあえずこんなかんじで。

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[参照先,出力先]

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を使用するとこのような動きのあるサイトが簡単に作成可能です。

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>

ここにグラフを表示します。