常連

注目の的

社会貢献

拍手喝采

自己紹介

タイトルのままですが、
要素（今回は画像を入れている<div>）を、ページを読み込んだら横からfadeInするscriptが欲しいです。
今は下のような簡単なscriptを使ってフェードインしています。

```lang-javascript
$(function() { 
	$('.要素').fadeIn(2300);
});
```

上記のだと、ゆっくりfadeinしてくるのですがこうではなく、
横から「サッ」とfadeinしてくるようにしたいです。

調べたのですが、分からずどなたかどうすれば出来るか教えて頂けますでしょうか？

jQueryで要素を横からfadeIn

こんばんは、js入門者です。jsのAjaxとJqueryのJSONを使ってボタンを押すと３件ずつ新しい記事を読み込む「もっと見る」機能を作ろうとしているのですがうまくいきません。もっと見るボタンを押すと同じ記事だけが繰り返されます…コードは下になります。

```ここに言語を入力
『サーバーサイド』
  $connect=mysql_connect("サーバー","ID","パスワード");
	mysql_query("SET NAMES utf8",$connect);
	$db="データベース";
	if (isset($_GET["page"])) {
		$page=$_GET["page"];
	}else{
		$page=0;
	}
	$sql="SELECT * FROM plan ORDER BY date_time DESC LIMIT $page,3";
	$result=mysql_db_query($db,$sql);
	while($rows=mysql_fetch_assoc($result)){
		$jrows[]=array("id"=>$rows["id"],"title"=>$rows["title"],"image"=>$rows["image"],"body"=>$rows["body"],"planner"=>$rows["planner"],"date_time"=>$rows["date_time"]);
	}
	echo json_encode($jrows);



『HTML』
//最初は３つの記事を先に見せる
$(function() {
  $.getJSON("サーバーURL" , function(data) {
    var
      ulObj = $("#showMore"),
      len = data.length;

    for(var i = 0; i < len; i++) {
      ulObj.append($("<li>").attr({"id":data[i].id}).text(data[i].title));
    }
  });
});

//サーバーに要請！
  function showMore(){
   var request=new XMLHttpRequest();
   request.onreadystatechange=function(){
  		var show=document.getElementById("showMore");
  		var showChild=show.childNodes.length;
  		if (request.readyState==4) {
  			if (request.status==200) {
  				$(function() {
				  $.getJSON("サーバーURL" , function(data) {
				    var
				      ulObj = $("#showMore"),
				      len = data.length;

				    for(var i = 0; i < len; i++) {
				      ulObj.append($("<li>").attr({"id":data[i].id}).text(data[i].title));
				    }
				  });
				});
  			}else{
  				show.innerHTML="サーバーにエラーが発生しました！";
  			}
  		}else{
      //
  		}
  	}
      var show=document.getElementById("showMore");
      var showChild=show.childNodes.length;
  	request.open("GET","json_ajax.php?page="+showChild,true);
  	request.send();
  }

//show_btnのボタンが押されたらshowMoreを実行
  document.addEventListener("DOMContentLoaded", function(){
    document.getElementById('show_btn').addEventListener('click', showMore, false);
  }, false);
</script>
```
長くなりましたが整理すると、
①最初HTMLファイルからは、サーバーのPHPファイルからJSON形式のデータを受け取って表示しようとする。

②その時PHPは
if (isset($_GET["page"])) {
	$page=$_GET["page"];
}else{
	$page=0;
}
$sql="SELECT * FROM plan ORDER BY date_time DESC LIMIT $page,3";
となっているため$pageは０になり、最新の記事３つだけ返す。（ここまではいいんです）

③今度はもっと見るボタンを押して、すでに表示されている記事の３つ前の記事を３つ表示いようとするが、なぜか同じ記事がまた表示される（これの繰り返し）。。。ということになります。

原因はなんでしょうか？そしてうまく動作させるためにはコードをどう変えたらいいでしょうか？長文で申し訳ないのですがぜひ皆さんの知恵をお借りしたいです！おろしくお願いします！

jsとjQueryでもっと見る機能を作りたいと思ってます！

環境
Rails 3.0.9
Ruby 1.9.2

http://ruby.studio-kingdom.com/rails/guides/form_helpers#building_complex_forms
こちらの「9. 複雑なフォームの構築」のようなフォームの場合、エラーメッセージを「n番目の住所を入力してください。」といった形でエラーメッセージを出すにはどうしたらよいでしょうか？
（「住所を入力してください。」といった形ではなく、何番目に入力したどの項目がエラーなのか？をエラーメッセージでわかるようにしたいです。）

複数レコードを一度に入力するようなフォームのエラーメッセージ

素朴な質問なのですが

```Ruby
class A
  attr_accessor ←これ
end
```
```Ruby
class A
  @@a ←これ
end
```
```Ruby
class A
  def initialize
    @a ←これ
  end
end
```
```Ruby
class A
  def initialize
    self.a ←これ
  end
end
```
```Ruby
class A
  def initialize
    super ←これ
  end
end
```

この５つがあまり理解できていないです。
意味、使い方など教えていただけると幸いです。

Ruby self., super など

2000年台にシステムエンジニアになり、DBはOracle、MySQLのみ、言語はActionScript、java、C#と偏った言語での開発を行ってきました。
java8になって新機能の学習をしていると、「javaはあと何年現役だろうか、そもそももう人気でもないのではないか」と疑問に思うようになりました。
2010年になってから、WEBアプリ開発を取り巻く環境は大きく変わったと思っています。

■フレームワークの今昔
数年前、javaのフレームワークは生まれては消えていきました。
逆にPHPはcake、Zend、symfony以外は名前を聞かないくらいでした。
しかし、今はjavaのフレームワーク開発は落ち着き、PHPが戦国時代に入った印象があります。
これは、javaでの開発が減り、PHPでの開発が増えたことによるものではないかと邪推してしまいます。

■非同期通信やNoSQLの出現
javascriptの発達や、DBもNoSQLの出現などWEB開発を行う上で選択肢が増えてきています。
サーバーサイドでゴリゴリ処理し、一生懸命SQLを書く時代は終わってきているのでしょうか…。

■teratailの新着を見てもPHPやRoR、javascriptタグが多い
悲しいかな、現実をつきつけられています。

■5年後にteratailで回答できる人間になるには？
結局私はjavaが好きで、できればjavaが盛り上がってくれれば嬉しいです。
しかし、現状を見るとPHPをもっとしっかり勉強したほうが良いんだろうなぁとも思います。

**本題です**
**Q.5年後にも根付いていそうな、現在最先端なWEB開発言語・環境・ツールは何でしょうか**
  →もちろん、「これからはスマホアプリの時代だ」とWEBアプリをバッサリ切っても構いません。
FWやDB、サーバなどを組み合わせて回答いただけると嬉しいです。

よろしくお願いします。

5年後にも根付いていそうなWEB開発言語・環境・ツールについて

centos6でout of memoryとなってサーバダウンしました。さくらVPSのコンパネで強制再起動したのですが、運用しているwebサービスにブラウザからアクセスできず、telnetやSSHもできない状態です。

out of memoryとなる原因はなんなのでしょうか。同時にたくさんの人がアクセスするとなるのでしょうか。それともサーバ上のソースコードが多くなってきて起こるのでしょうか。

また、php.iniやhttpd.confの設定はこの件とは関係ないのでしょうか。

centos6でout of memoryとなってサーバダウン

表示チェックをするためにURL、ファイルを入力することでIE8,7,6などでの表示を確認することができるサイトはありませんか？
よろしければ教えてください

IE8,7,6などの表示チェックができるサイトはありませんか？

最近、DOMオブジェクトとクロージャにより循環参照が起き、メモリリークが発生するという問題について知りました。
この問題が古いブラウザで発生し、動作に影響すると知ったため、昔書いた[クロスブラウザ対応コード](http://qiita.com/sounisi5011/items/767392c1f7736e2e5d4c)にこの問題が無いか検証したところ、以下の様な循環参照パターンとなっている事が分かりました。
(以下に提示するのは、簡易化したコードです)
```JavaScript
/**
 * @param {Node} targetNode
 */
function clickCaptcha(targetNode) {
    targetNode.addEventListener('click', function () {
        console.log(targetNode);
    }, false);
}
```
`targetNode`が操作対象のDOMノードです。
これに追加するリスナーがクロージャになっており、`targetNode`を参照しています。
このコードを循環参照が発生しないものに書き換えようと考えていますが、その方法が分かりません。

単純に考えるならば、以下のようにすれば解決すると思います。
```JavaScript
/**
 * @param {Node} targetNode
 */
var clickCaptcha = (function () {
    // イベントのリスナーを外部に出すことでクロージャを回避
    var clickListener = function () {
        // addEventListenerにより設定したリスナーは、
        // thisがイベントを追加した要素のDOMノード(=targetNode)となる
        console.log(this);
    };

    return function (targetNode) {
        targetNode.addEventListener('click', clickListener, false);
    };
}());
```
```JavaScript
/**
 * @param {Node} targetNode
 */
var clickCaptcha = (function () {
    // イベントのリスナーを外部に出すことでクロージャを回避
    var clickListener = function (e) {
        // EventオブジェクトのcurrentTargetプロパティを利用
        console.log(e.currentTarget);
    };

    return function (targetNode) {
        targetNode.addEventListener('click', clickListener, false);
    };
}());
```
しかし、クロスブラウザ対応用のコードであるため、`addEventListener`ではなく`attachEvent`を使用した場合は`this`が扱えませんし、Eventオブジェクトも信用できません。
このため、この2つの解決方法は採用できず、変数`targetNode`を他の方法でリスナーから参照する必要があります。

【[クロージャとメモリリークについてのコピペ - こんにちはこんにちはmonmonです！](http://monmon.hateblo.jp/entry/20080416/1208325055)】の702で提示された`createLeakFreeClosure`関数を使用し、以下のように書く方法もあります。
```JavaScript
function createLeakFreeClosure(closure) {
    /**
     * Note: 適切に動作するよう、いくつか修正
     */
    var count = createLeakFreeClosure.count++;
    createLeakFreeClosure[count] = closure;
    closure = null;
    return function () {
        return createLeakFreeClosure[count].apply(
            this,
            Array.prototype.slice.call(arguments)
        );
    };
}
createLeakFreeClosure.count = 0;

/**
 * @param {Node} targetNode
 */
function clickCaptcha(targetNode) {
    targetNode.addEventListener('click', createLeakFreeClosure(function () {
        console.log(targetNode);
    }), false);
}
```
しかし、`createLeakFreeClosure`関数は同ページの707でも指摘されているように、何度も実行した場合に引数に渡した関数が保持され続ける事になり、これはこれで問題となってしまいます。
私自身もこの関数が循環参照を回避できる理由が理解できていないため、下手に改良もできません。
よって、これも採用できません。

冒頭のコードを、循環参照が発生せず、また変数`targetNode`を参照できるようにするには、どのようにすれば良いでしょうか。
---

循環参照について理解できていないため、動作の違うサンプルを例示されても修正して活用できません。
このため、コメントにて私の書いたコードを例示し、何度も指導していただく形になってしまいます。

可能であれば、「第一引数に受けたDOM Nodeにclickイベントを定義」する、質問本文冒頭のコードと同じ動作をする循環参照を解決したコードを例示していただければ有難いです。

DOMとクロージャによる循環参照問題の解決方法

レスポンシブで、横に要素が並ぶ場合、プロのコーダーは、フロートで対処しますか？


下記の例なら、
気まぐれカフェ、キッシュランチ、ドライフルーツのケーキの部分がそれにあたります。
http://pelican-cafe.com/


下記のやり方が一般的でしょうか？
http://allabout.co.jp/gm/gc/396787/2/

レスポンシブで、横に要素が並ぶ場合、プロのコーダーは、フロートで対処しますか？

変数宣言のvarアリとナシの違いや使い分けについて教えてください。

一応自分で分かっている範囲のことを書きますと、
varアリだとconfigurableがfalseになる。つまりdeleteできない(Chromeの場合。IEとFirefoxでは削除できる)。
varナシはtrueでdeleteできる。
```ここに言語を入力
var v1 = 1;
v2 = 2;
 
console.log(Object.keys(this).filter(function (v) {return /^v.$/.test(v)}));
console.log(Object.getOwnPropertyDescriptor(this, "v1")["configurable"]);
console.log(Object.getOwnPropertyDescriptor(this, "v2")["configurable"]);

// Chromeでの結果。IE, Firefoxではどちらもtrue。
// ["v1", "v2"]
// false
// true
```

言い換えると
> varアリは「グローバル変数」、
> varナシは「グローバルオブジェクトのプロパティ」
であるということ(書籍「JavaScriptパターン」にそう書いてあった。でもそれ以上の説明はなく、本質的には違いが分かっていません)。

自分の分かる範囲では、ここだけです。もしかしたら他にも差があるかもしれませんが、ここだけだとしても、違いがあるということは意味があって差をもうけていて、何かしらの使い分けをするケースがあるのではないかと思うのですが…

だとすると「あとでdeleteしたいときにvarをつけない」とするということでしょうか？
その他、シンボルの解決に影響するとかあるのでしょうか？

質問
・上記以外に差はありますか？
・どのような使い分けをするものなのでしょうか？

よろしくお願いします。


※言うまでもないことだと思いますが、関数内でvarをつけたら関数ローカルになり、明らかに違いが出ますので比較の対象外です。

変数宣言のvarアリとナシの違いや使い分け

教えてくれたプログラマーの方々にとても感謝しています。
一から教えてくれてありがとう
クソみたいな質問にも丁寧に答えてくれてありがとう

こういうサイトが爆速で作れるようになりました。

[Rubbishbook - 失敗を共有するクチコミサイト](http://rubbishbook.net/)

レスポンスが遅いのが気になりますが、徐々に直していきます。

どこを直したらより良くなるのかがわかりません
アドバイスお願いいたします。
（ランキング機能はまだ実装していません）

teratailで質問してたら爆速でサービスが作れるようになりました（アドバイスお願いします！）

入力フォームでよくある、都道府県を選ぶとそれに対応した市区町村が自動で選択されるという仕組みを実装したいです。

現在、都道府県（Prefecture クラス)と市区町村(City クラス)に初期データを投入し、1対多のリレーションをもたせるところまでは実装しています。


ここから、他の複数のモデルの入力フォームで、選択した都道府県と市区町村をそれらのモデルのカラムに保存するため、以下の様なフォームを作成しました。


```Ruby

    <%= f.label  '会社住所' %>
    <%= f.collection_select :farm_prefectures , Prefecture.all,:name,:name , id: 'prefectureSelect'%>
    <%= f.collection_select :farm_city , City.all,:name,:name,id: 'citySelect' %>

#:farm_prefectures に都道府県を、:farm_city に市区町村を保存する
```

調べてみると、ここからjQueryやajaxを使用してプルダウンの変更を読み取る必要があるようなのですが、いろいろ試してみてもうまくいきません。

１・#prefectureSelect が変更したことを .changeで読み取る
２・City.prefecture_id と Prefecture.id が一致するものを表示させる

２・の記述方法がわかりません。

jqueryの記述と、ajax実装についてなるべく具体的なコードを教えていただけますでしょうか。
よろしくお願いいたします。

---
追記

ご回答してくださった皆様、ありがとうございます。


[こちらのページ](http://kawahiro.hatenablog.jp/entry/2013/10/26/233051)を参考に、以下の様に実装することで確かに連動ボックス自体の実装は確認できました。

しかし、都道府県と市区町村をそれぞれPostクラスのカラムに保存する方法がわかりません。

```Ruby
#view
<%= form_for @post do |post| %> 
都道府県 <%= post.collection_select :mst_prefecture , MstPrefecture.all,:id,:name %><br />
市区町村 <%= render partial: 'shared/cities',  locals: { prefecture_id: MstPrefecture.first.id }  %>
#shared/cities

<%= collection_select :post , :mst_city, MstCity.where(prefecture_id: prefecture_id),:id,:name  %>

#posts_controller.rb
def cities_select
  if request.xhr?
    render partial: 'shared/cities', locals: { prefecture_id: params[:prefecture_id]}
  end
end

#config/routes.rb
  resources :posts  do
    collection do 
      get :cities_select
    end
  end

#posts.coffee
$(document).on 'change', '#post_mst_prefecture', ->
  $.ajax(
    type: 'GET'
    url: '/posts/cities_select'
    data: {
      prefecture_id: $(this).val()
    }
  ).done (data) ->
    $('#post_mst_city').html(data)

#post.rb
class Post < ActiveRecord::Base
  belongs_to :mst_prefecture
  belongs_to :mst_city
end

# mst_prefecture.rb
class MstPrefecture < ActiveRecord::Base
  has_many :mst_cities
end

# ms_city.rb
class MstCity < ActiveRecord::Base
  belongs_to :mst_prefecture
end
```

上記の実装だと、確かに都道府県に合わせた市区町村が表示されるようにはなったのですが、それぞれのvalueを、Post.prefecture, Post.city に格納しようと collection_select を弄ると動作しなくなってしまうのです。

また、上記記述ではvalueがidとなってしまっており、データを格納する際にそのデータが数値になってしまいます。
出来れば保存するデータはidではなくnameで、都道府県や市区町村の文字データとして保存したいです。


どのように記述すればよろしいでしょうか。

【Rails】jQueryとAjaxを用いて、市区町村と都道府県の連動プルダウンメニューを作成したい

大学3年で情報工学を専攻しております。
夏休みという事で、1つWebサービスを開発したいと考えております。

現在経験、というか齧ったことのあるプログラム言語は
CとJava位です。

今そのサービスで実装したい機能として
アカウントの追加、削除
Twitter、FaceBookとの連携
ユーザ間でのデータの共有
などを考えています。

そこでお聞きしたいことは
1. 開発初心者がまず行うべきことがあれば（実践あるのみなどでも構いません）
2. この機能を実装するならば、また現在の流れ的に開発に使用すべき言語は
3. 開発する上での手順（企画、実装、テストなどの流れです。内容もあれば助かります）

長くなりましたがよろしくお願いいたします。

Webサービス開発

決済サービスの導入を検討しています。
選定するに当たり、stripe, spike, webpayなどいくつかをみているのですが、stripeを使って決済している方いらっしゃいますか？

日本国だけでなく、全世界横断でクレジットカード決済をしたいと考えております。また、決済は日本円建てではなく、USドル建てを検討しています。決済元(私)は日本国に所在のある法人です。

おすすめの決済サービスありましたらお教え頂ければ幸いです。

-追記-

サーバサイド側(ruby on rails)での単発及び定期(月額)決済を予定しています。決済金額や数はそれほど多くありません。

-追記-
> 現時点では、Visa、MasterCard、American Expressでの円建て決済に対応しています（多通貨のサポートはまもなく開始予定です）

とのことでした、Stripe。stripe便利そうですね！

決済サービスのstripeを使って決済している方いらっしゃいますか？

ユーザ(`User`)毎にグループ化した アクセスログ(`AccessLog`)一覧を作っております。
表示項目で 最新のアクセス日(`newest_accessed_at`)をArelで取得したのですが、
その内容を ActiveRecord_Relationに入れると classがArel::Tableとなり `.page`等のメソッドが実行できなくなります｡

ActiveRecord_Relationの内容に うまく Arelの内容をマージすることは可能でしょうか?

```lang-ruby
# model
class User < ActiveRecord::Base
  has_many :access_logs
end

class AccessLog < ActiveRecord::Base
  belongs_to :user
end

# model or controller
@access_logs = AccessLog.all
@access_logs = @access_logs.group(:user_id).project(arel_table[:accessed_at].maximum.as('`newest_accessed_at`')) # ここでclassがArelになる
# @access_logs = @access_logs.group(:user_id).select("`access_logs`.*, max(`access_logs`.`accessed_at`) AS `newest_accessed_at`") # mysqlエラー
@access_logs = @access_logs.page(10) # Arel::Tableだと `.page`が呼び出せない

# views
<% @access_logs.each do |access_log| %>
  <tr>
    <td><%= access_log.user.id %></td>
    <td><%= access_log.user.name %></td>
    <td><%= access_log.newest_accessed_at %></td>
  </tr>
<% end %>

```

Arel::Tableの内容をActiveRecord_Relationにマージする方法

ruby on railsでカラムの値を全て足して表示する方法を教えてください。

テーブルはこんな感じです。
id | count | user_id |

user_idが一緒なcountの数値を全て足して表示する方法です。

railsでデータを取得し計算する方法

手放せない、便利、これなしでは仕事したくないというものでも 
特定のフレームワークでしか使えないようなものでも 
便利そうで使ってみたいけどまだ手をだしていないものでも構いません。 

よろしくお願いします。

rubyでおすすめのライブラリを教えて下さい

Railsで投稿に昨日付けられたLikeの多い順に並び替えて出力する方法で悩んでおります。
アドバイスをいただければ幸いです。

下記のように投稿にLikeを関連付けしている状態です。
```lang-＜ここに言語を入力＞
#app/models/post.rb
class Post
 has_many :likes
end

#app/models/like.rb
class Like
 belongs_to :Post
end
```
投稿の一覧を昨日付けられたLikeの多い順に並び替えるために

```lang-＜ここに言語を入力＞
@like = Like.where("created_at < ?", 1.days.ago)
@post = Post.joins(:like).order("count(@like.id) DESC")
```
のように出力したいのですが、どうしたらよろしいでしょうか。

アドバイスよろしくお願いいたします。

railsで投稿を特定条件のLikeで並び替える方法

fields_forなどで、親モデルにぶら下がった子モデルをフォームで編集し、一括でsave!した場合、
子モデルのバリデーションエラーメッセージが日本語化されません。
object.errors.keys を出力すると、子モデルのエラー対象カラムのattributesは
「"モデルの複数名.カラム名"」
となってしまいます。
config/locals/modelsのja.ymlファイルでは、モデル名は単数系で指定されているため、引っかかりません。
しかし、親モデルにぶら下げずフォーム編集する場合もあるため、複数形の名前でlocalsを定義するわけにもいかず困っております。

何かいい方法はありませんでしょうか。

```lang-＜ruby＞
class Item < ActiveRecord::Base
  has_many :order
  has_many :brand
end

class Order < ActiveRecord::Base
  belongs_to :items
end

class Brand < ActiveRecord::Base
  belongs_to :brands
end
```
```lang-＜ruby＞
class ItemsController < ApplicationController
  def update
    if @item.save!
      redirect_to
    else
      render "edit"
    end
  end
end
```
app/views/items/edit.html.slim
```lang-＜ruby＞
= error_messages @item
= render 'form'
```
app/helper/application_helper.rb
```lang-＜ruby＞
module ApplicationHelper
  def error_messages(*objects)
     msg = ""
     objects.each do |o|
       if o.present?
         # p o.errors.keys
         # ex) :"brands.name"
         # :"orders.quantity"
         msg += o.errors.full_messages.join('<br />')
       end
     end
  end
end
```