プログラムは、用いる言葉の選択で決まるスマートフォン用の表示で見るプログラムは、用いる言葉の選択で決まる2014-03-10Rails4で簡単AjaxRailsRailsアプリケーションでAjaxを実装する際にかなり躓いたので手順のメモ。trueをするだけの簡単なお仕事だと言われているけど、流れが分かっていないと存外難しいように思う。実際問題、大体の仕組みさえわかれば、jQueryでajax要求出す必要もないし、とても簡便にajaxが実装出来るようになっていると思う。今回はとりあえずメッセージの投稿だけを行う簡易アプリを作り、Ajax化する。scaffoldは便利だけど、この程度の規模の場合は使わないほうが明解だと思うので、一つ一つ手作りしていく。何はともあれ新規プロジェクトを作成し、モデルおよびコントローラの作成。sいつもモデルで指定する型とかを忘れてしまう。いつになったら覚えられるのか......。サーバー起動後localhost:3000にアクセスすると親しみ深い画面が。"bweets/create"という感じで、rootアクションをindexに変更およびcreateのメソッドをpostに変更。次にindexアクションの編集。DESC").limit(10)endとりあえず、新しい投稿を10件取得する感じで。RailsでAjaxを簡単に実装するためには、Ajaxで表示したい要素を、部分テンプレートで作成するのがコツっぽい。indexでは、投稿されたメッセージの一覧表示をAjax化したいため、ここを部分テンプレートで作成する。いうわけで、app/views/bweets以下に、_bweet.html.erbという部分テンプレートファイルを新規作成する。%>表示を手抜くためにfieldsetを使っているけど、大した意味は無い。実は部分テンプレートの中では、render時に持ってきたインスタンス変数を@省略のファイル名で利用できたり、コレクションのループがされたりと、色々複雑っぽい。これで、理解を深めたら追々使いこなしていきたい。部分テンプレートは出来たので、index.html.erbの中に埋め込んであげればOK。投稿フォームも一緒に作成。投稿フォームはTwitter風に、index画面の横側に表示。-->divは後で多少体裁を整えるためだけなので、基本的には気にする必要はなし。部分テンプレートの呼び出しを行っている部分のdivのidは、Ajaxでの要素入れ替えで利用するので、設定の必要がある。部分テンプレートの呼び出しは、renderのpartialオプションで指定する。変数はcollectionsで渡す。実際問題formのAjax化はこのオプションだけで完了。ちなみにform_tagのオプションは、1つ目のハッシュがアクションの指定、2つ目のハッシュがその他のオプションの指定という感じだったと思う。ここでもエラーを吐かれた。表示の部分は大凡出来たので、次はcreateの方を作る。createができないと表示の確認すら出来ない(DB直接叩けば可能ではあるが......)。params.permit(:description)endcreateでは、送信されたパラメータを取得し、bweetの新規作成と保存という、一般的な格納の手順をそのまま踏んでいる。一つ特殊なのが、respond_toのformatにformat.jsを指定していること。これを用意することで、後述するcreate.js.erbの呼び出しが行われる。privateで定義しているbweet_paramsメソッドは、Rails4で導入されたstrong_parametersのために定義しているだけ。ここでは詳しく述べない。最初のbweet10件取得は、後の描写時に@bweetsの値が必要なため。スマートなやり方はいくらでもありそう。現状でformに値を入れsubmitすると、特に表示の変化が起きない事が確認出来ると思う。更新を押すと、投稿したメッセージが現れるはず。※cssでfloatの設定だけ行った先ほどcreate内のformatでjsを指定したことで、createアクション時にcreate.js.erbが呼ばれるようになった。app/views/bweets以下に、create.js.erbを新規作成し、Ajaxで処理をしたい、bweetの表示部分テンプレートの呼び出しを記述する。%>");$('#description').val("");こんな感じ。jはjavascriptで云々かんぬんなメソッドらしい。画像では表現出来ないけど、無事投稿と同時に、BweetsListに新規投稿が表示されたのではないかと思う。まとめ復習がてらに簡単なAjaxアプリを作ってみたけど、再度の作業でも若干の躓きがあった。Rails自体にあまり慣れていないのと併せて、結構辛い。Rails4からはturbolinksなるものが標準搭載されているので、jQueryを使う場合は競合に気を使ったりする必要がある様子。今回のAjax化手法の場合は、特段turbolinksに関する設定は弄らず実装できた。予想外に記事は長くなるし、要旨も纏まってないしで最悪ではあるけど、ともかく、RailsもAjaxもすごいね!ってことで誤魔化す。・余談RailsのAjaxスタイルは、恐らくこの形が最も簡単なのではないかと思うが、一応jQueryのajaxメソッドを使ったAjax化も、後々手順をメモるつもり......いつの日か......。第4版をベースに作成しました。Railsドキュメントその他色々Webサイト(書き記せないくらい膨大な数のページを参考にしました。通常Bottleを使用する場合は、使用するテンプレートに併せて必...2015-05-10某ネトゲを多重起動する際の手順とハマった点のまとめ2PCがしたい......でも実機を2台立ち上げるのは面倒だ。関連記事2014-08-17【Rails】モデルのアップデート時に変更されたカラムを取得する方法2014-05-05form_tagのオプションの付け方で毎回迷う。いうかRubyきらい。Meスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。