2013年06月26日

Font Awesome 文字のアイコン

Font Awesomeとは


http://fortawesome.github.io/Font-Awesome/icons/
ここに表示されているアイコンを画像ではなく文字で表現が可能になるプラグイン?です。

環境


Rails 3.0.19

使用方法


http://fortawesome.github.io/Font-Awesome/
ここよりDownload
(とりあえずHomeに)解凍してcssとfontだけを抜き出します。

$ cd Rails.root/public/stylesheets/
$ mkdir font_awesome
$ cp -r ~/font-awesome/css Rails.root/public/stylesheets/font_awesome
$ cp -r ~/font-awesome/font Rails.root/public/stylesheets/font_awesome


cssを読み込みます。

$ vi app/view/hoge/index.html.erb

<%= stylesheet_link_tag './font_awesome/css/font-awesome.css' %>
<%= stylesheet_link_tag './font_awesome/css/font-awesome-ie7.css' %>


IE7でも正常に表示させたい場合は2段目のfont-awesome-ie7.cssが必要

タグの設置


$ vi app/view/hoge/index.html.erb

<i class="icon-zoom-in"></i>


これだけでアイコンが表示されます。
他にどんなclassでどんなアイコンが表示されるかは、サイトを御覧ください。


サイズ変更


cssでfont-size:25px;とすると、アイコンのサイズが変更されます。(アイコンは画像でなく文字)

色変更


文字なのでcssのcolorで色も自由自在

マウスオーバー



a.zoom {
color: #222222;
text-decoration: none;
}
a.zoom :hover {
font-size: 25px;
color: #222222;
text-decoration: none;
}

こんなかんじでマウスオーバーで拡大切替
posted by RicK at 12:14| Comment(0) | TrackBack(0) | 日記

2013年04月08日

JavaScript JSONPのajax非同期通信を同期通信として動作させる方法

JSONPのajax


JSONPはクロスサイトスクリプティング対策用として基本的にJSで使用されます。

環境


jQuery

概要


JSONPのajaxは非同期通信しかできません。
非同期通信は、画面Aから画面Bへ遷移する間に使用すると、
画面Bへの遷移が早すぎて通信が行われないことがあります。
そのため、このような状況では非同期通信は使用出来ませんが、
外部通信するためにはJSONPを使用したい、というジレンマからなんとか考えついた方法です。

対策


ajaxには通信処理が終了した後に処理を行うcompleteがあります。
このcompleteを遷移で使えばいいというのが対策です。
通常

aタグ -> jsによる外部通信 -> 画面B

という動きになりますが、

divタグ -> jsによる外部通信 -> -> completeによる画面遷移処理 -> 画面B

という動きになります。
具体的には下記ような形


$.ajax({
url: URL,
dataType: "jsonp",
data: data,
jsonpCallback: "callback",
async : true,
complete: function(u) {
return function() {
location.href = u;
};
}(url)
});



completeにあるurlはdivタグのnameとかに埋め込んでjsにて取得すればおkです。
これで何とか外部通信を完了させてから画面Bへ遷移するという同期通信のような動作ができます。
posted by RicK at 10:48| Comment(2) | TrackBack(0) | 日記

2013年03月21日

Postfix reject: RCPT disconnect

Postfix外部受信のメモ

環境


postfix 2.3.3

エラー内容



connect from unknown[X.X.X.X]
reject: RCPT from unknown[X.X.X.X]: 450 Client host rejected: cannot find your hostname, [X.X.X.X]; from= to=
disconnect from unknown[X.X.X.X]


解決策


mynetworksに
disconnect from unknown[X.X.X.X]
のIPを記載(範囲にするか固定にするかは自由)

# vi /etc/postfix/main.cf

mynetworks=xxx.xx.xx.xxx



posted by RicK at 11:25| Comment(0) | TrackBack(0) | 日記

2012年12月14日

Ruby on Rails Rails3 メール送信エラー ~ OpenSSL::SSL::SSLError: hostname does not match the server certificate ~

Rails3にてメールを送ろうとしたらエラーが出たのでその解決策

環境


Rails3.0.11

エラー内容



OpenSSL::SSL::SSLError: hostname does not match the server certificate


解決策



$ vim config/environments/production.rb

config.action_mailer.smtp_settings = { :enable_starttls_auto => false }


RailsがTLSという暗号化を行うためため、それを解除

ホストベース認証
posted by RicK at 17:07| Comment(0) | TrackBack(0) | 日記

2012年09月28日

Ruby on Rails Rails3 外部DB参照 ~別DB参照~

外部DB参照とは?


通常database.ymlに参照先DBを記載すると思いますが、
基本的にproductionで起動したならばproductionで設定した参照先しか見に行きません。
しかし、負荷軽減の関係でSlaveにSELECTだけはしたいときなどがあります。
そのときに、production以外の参照先を指定する事を外部DB参照といっています。

環境


Rails 3.0.1
Mysql

設定



$ cd RAILS_ROOT
$ vi config/database.yml # production_slaveを追加

production:
adapter:mysql2
...
host:192.168.1.1
...

production_slave:
adapter:mysql2
...
host:192.168.1.2
...

$ vi app/model/hoge.rb

def self.master_connection(conf)
establish_connection(conf.to_sym)
Rails.configuration.database_configuration[conf]
end



実行



$ cd RAILS_ROOT
$ bundle exec ruby c production

Hoge.find 1 # 192.168.1.1を参照
Hoge.master_connection("production_slave")
Hoge.find 2 # 192.168.1.2を参照

posted by RicK at 19:09| Comment(0) | TrackBack(0) | 日記

2012年08月30日

jQuery スマートフォン ブラウザバック後の動作

ブラウザバック後の動作とは?


jQuery1.8.1を使用しスマフォのページを作成しており、
作成ページはオートページャライズが付いているのですが、
iPhone4だけ作成したページから、遷移してブラウザバック後オートページャライズが動作しませんでした。

試行錯誤


「javascript ブラウザバック」などで調べたら色々でてきました。
そのだいたいはonloadやらonunloadをすると良いとのことでしたが、
そもそも、iPhone4だとリロード時はonloadとonunloadが動作するが、
aタグにて遷移の時は、動作しなかった。

対策1


色々探していたところ、
参考
このサイトにてsetTimeoutを使用して無理やり動作するというのがあった、
まず、aタグをonloadでファンクションに飛ばす。

<a href="http://hoge.com" onclick="javascript:Search.movePage();">hoge</a>

JSファイルにて

movePage: function() {
setTimeout(function() {
// onload時に走らせるイベントを指定
location.reload();
}, 100);
}

これは、aタグを押下するとタイマーが作動、遷移するとタイマーが停止し、
ブラウザバックで戻ってくると再度タイマーが起動しリロードが走ります。
一応できましたが、これだと遷移に時間がかかると遷移する前にリロードがかかってしまいます。

対策2


対策1の弱点を考慮したものが、参考
「onpageshow」です。
ここにあるように、ページが表示されたときに呼び出されます。
これを使用すると、ページが表示された時なので、aタグを押下していくら時間が過ぎようとも今いるページがリロード等されているわけではないので作動しません。
しかしブラウザバックしたときに、起動だけしていたonpageshowが再度ページが表示されることにより動作しreloadが走ります。

movePage: function(val) {
window.onpageshow = function() {
location.reload();
}
}

これで問題なしです。
ただ、このonpageshowは、チェックしたandroidでは動作しないようなので、
iphone5などバージョンが変わると動作するかは不明です。
(androidは対策しなくても動くので丁度よいのですが)
posted by RicK at 16:19| Comment(0) | TrackBack(0) | 日記

2012年07月24日

CentOS dfとdu 値が違うのはなぜ?

dfとduとは


dfとは、ディスク容量の表示。
duとは、ファイル容量を表示。

環境


CentOS 5.4

現象


dfで「/」が使用で80%近く容量を圧迫していたので、
不要なファイルを削除しようとファイルをduなので探していたが、
「/」以下(他パーティション除く)の結果が15G程度しかなかった。

原因


プロセスの動作中に使用しているファイルの削除を認め、
open状態のままOSがファイルを捕まえたままになることがあるようだ。

確認


本当に原因が起きているのかを確認しよう。
# ls -al /proc/*/fd/* | grep deleted

このコマンドを打って表示されたリストがそうである。
きっとそのファイルを見れば何に使用しているファイルかわかることでしょう。
きっと思い当たるフシがあるはず。(少なくとも自分にはありました)

解決方法


確認でみたファイルを使用しているアプリを再起動してください。

自分の場合、アプリを再起動したら使用容量が半分近くになりました。
ほとんど同じ事書いてありますが、こちらもどうぞ
posted by RicK at 16:01| Comment(0) | TrackBack(0) | 日記

2012年03月22日

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

これで解決
posted by RicK at 17:35| Comment(0) | TrackBack(0) | 日記

2012年01月24日

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__

とすれば良い
posted by RicK at 11:48| Comment(0) | TrackBack(0) | 日記

2012年01月19日

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内に表示、
2度目以降は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もなにか関係しているんだろうな。

解決策


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

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

こいつを使って
@hoge.force_encoding("UTF-8")

これで完成。
このまま登録して、再度外してもエラーになったので、
表示のコードを変換したからといって登録されるデータが変わるでもないので、
とりあえずこれで問題なし。
posted by RicK at 10:41| Comment(0) | TrackBack(0) | 日記

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) | 日記