ついにrailsを始めました。 初心者には敷居が高いとそこかしこで言われてるのを聞きましたが、やり始めて確かにこりゃ敷居高い気がするなぁと納得しておるところです。railsの理念の一つである「設定より規約」の「規約」の部分が膨大なところが敷居の高さの原因なんじゃないかと思ったり。イマイチそこらへんが自分の中でもまとまってないので手こずっています。 実行の度にコントローラなりモデルなりシンボルなりに三単元のsが足りないとか単数形じゃないとか、どこぞの公立中学の英語教師みたいに嫌味のようなエラーをネチネチと吐かれ、ストレスを貯めこむ日々です。 とかまぁなんとかで昔の嫌な思い出を掘り返しつつもrailsでajaxで通信する方法を学んだので、覚書。 環境はrails3.2.3, ruby1.9.3, on ubuntu12.04 view側に必要なコード <%= link_to "get data

NEXTしたら要素がどんどん追加されてくようなのを作りたかった views <div id="lists"> <%= render 'hoge' %> </div> <%= paginate @hoges, remote: true %>partial <ul> <% @hoges.each do |hoge| %> <li><%= hoge.name %></li> <% end %> </ul>js.erb $('#lists').append("<%= escape_javascript(render 'hoge', object: @hoges) %>");こんな感じやった。 参考リンク kaminariを試してみました - rochefort's blog

render_to_stringメソッドを使ったことがありますか？ ぱっとみて、 「renderメソッドでも十分なのに、なんでrender_to_stringが出ての？」 という疑問が浮かぶでしょう。 確かに、最初はそいうふうに思うかもしれません。 このメソッドはView以外の所でrailsタグを解析するには役にたつ。 railsタグは、普通viewのファイルで解析してくれます。 しかし、 Ajaxコードを入れたり、 Rjsコードを書いたりすると、どうしてもView以外の所で、Railsタグを解析して Ajax、Rjsコードに入れたい時もある。 例： render :update do |page| page[:htmlタグのID].replace_html　　「A」 end 「A」所にRailsタグを入れたとしても解析してくれないです。 HTMLコードとして扱ってクライアントに送られるの

こんばんは、技術担当の山下です。 週末になるとブログのネタを考えているのですが、毎回、何を書こうか結構悩んでし...こんばんは、技術担当の山下です。 週末になるとブログのネタを考えているのですが、毎回、何を書こうか結構悩んでしまいます。 そんなときは、そこそこ簡単に実装できそうな Rails の小ネタを勉強を兼ねて書いていこうかなと思っております。 今回は kaminari を使って Twitter みたいな ajax ページネーション（無限スクロールと呼ばれてるみたいです）を実装してみたいと思います。 現状ではリンクをクリックしないと読み込みませんが、画面の下までスクロールしたら自動で読み込む処理も実装する予定です（いつになるかはわかりませんが…）。 環境 Rails: 4.2.1 実装 Gemfile に kaminari とサンプルデータ生成で利用する faker を追加します

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

※ 「あなたがRails触る人なら見ておきたい「体系的な」豆知識」からの派生記事です。 Railsでフォームに入力した文章をリロード無しで保存、描画することで最も簡単なAjaxの流れの説明を試みたいと思います。 Ajaxとは 「Ajaxとは」と検索すると大量に説明文が出てきますがよく「非同期通信の総称」とかいう記述を目にします。 難しい話はよくわからないので「何かフォームからデータを送信した時にページをリロードせずにデータの保存・描画を行う」ことだとしましょう。以下のような感じです。 いちいちリロードしないとは素晴らしいですね！ これを応用すると「いいねボタン」なども簡単につくれます。 Ajax通信の必要条件 formにremote属性がセットされていること 対応するアクションが存在すること 対応するJSファイルが存在すること 実はこれくらいです。 ファイルを作り、記述をちょちょいっと変え

やりたい事 大項目 (セレクトボックス) を変更したら、それに紐づく小項目 ( チェックボックス ) を動的に変更したい。 宅配ピザのお店を管理するシステムで、お店の情報を登録する際、県 ( 大項目 ) を選択したら、それに紐づく配達可能な詳細エリア ( 小項目 ) が動的に変更するようなイメージ。 前提 バージョン

本ガイドでは、JavaScript機能をRailsアプリケーションに統合する方法について解説します。外部のJavaScriptパッケージを利用する場合に使えるオプションや、RailsでTurboを使う方法についても解説します。 このガイドの内容: Node.jsやYarnやJavaScriptのバンドラーを使わずにRailsを利用する方法 JavaScriptをimport maps・bun・esbuild・rollup・webpackでバンドルする新規Railsアプリケーションを作成する方法 Turboの概要と利用法 Railsが提供するTurbo HTMLヘルパーの利用法 1 import maps import mapsは、バージョン付けされたファイルに対応する論理名を用いてJavaScriptモジュールをブラウザで直接importできます。import mapsはRails 7から

フォームに値を入力したがValidatesに引っかかり、もう一度入力し直し。。。その時にページがリロードされ、さっき入力した値がまっさらに消えて、直さなくて良いところも入力し直し。。。それはあまりにも酷だ！！！ ということで、入力失敗した時に値を保持したままリロードする方法について記します。 だいたいformを使用して値を保存するアクションはcreateかupdateだと思うので、create、updateを例に紹介します。 createアクションの場合 まずnewアクション内で@hoge = hoge.newという空のインスタンス変数を作り、 そして、createアクションで@hoge = hoge.new(params[:hoge])と書く。この際に、フォームで入力した値はparams[:hoge]に値を格納されています。 なので、エラーしrenderで再びnewアクションに戻したいと

Railsのコントローラーでのrenderメソッドの使い方について説明します。 renderメソッドは、「コントローラー(Controller)」と「ビュー(View)」のそれぞれにあります。 ここではコントローラーのrenderメソッドの使い方を示します。 ビューでのrenderメソッドの使い方は こちらを参照してください。 動作確認 Rails 4.1 目次 1. ビューを表示する 1.1. 暗黙的なビューの表示する 1.2. 他のアクションのビューを表示する(actionオプション) 1.3. 他のコントローラーのビューを表示する(templateオプション) 2. JSONを返す 2.1. renderメソッド 2.2. jbuilder 2.3. ActiveModelSerializer 3. ビュー以外を表示する 3.1. 文字列を表示する(textオプション) 3.2. X

やろうとしたことは Facebookのタイムラインのように、スクロールした際にajaxでリクエスト 部分テンプレ返してもらって描画 そうすると 複数回テンプレが描画されてしまって困った というやつです。 知ってればなんてことないのですが、知らなくて無駄にハマったのでメモ。 一応あまりバージョン関係ないと思うのですが、Rails4.1とRuby2.1.2で書いてます。 -- もともと私が書いていた描き方が # controller html = render_to_string partial: 'layouts/more_somethings', collection: [@hoge, @fuga] render json: { html: html }

Guardとは Guardとはファイルの変更を検知して、自動的にさまざまな処理を実行してくれるRubyのGemです。 これ単体で使うよりも、他のツールと連携し、自動的に処理を行い開発効率を上げるために使います。 メジャーどころとしては、次の３つだと思います。 guard-livereload - Viewファイルの変更したときに自動的にブラウザをリロードする guard-rspec - specファイルを変更したときに自動的にRSpecを実行する guard-rubocop - ファイルを修正したときにRuboCopを実行する 本記事では、Railsへguard-livereloadの導入方法を記載します。 動作確認 Mac OSX 10.9 Ruby 2.0 Rails 4.1 guard 2.6.1 guard-livereload 2.3.0 目次 Railsプロジェクトの作成 gu

redirect_toのレスポンスコードをデフォルトで302 Foundではなく301 Moved PermanentlyにするRubyRails 302じゃなくて301を使う理由は、301リダイレクトと302リダイレクトの違い参照。 重要なところを抜き出すと、 301リダイレクトは、”Permanent Redirect”で「恒久的な転送」、一方、302リダイレクトは、”Temporary Redirect”で「一時的な転送」を表します。 検索エンジンのインデックスに関して： 302リダイレクト：旧URLのまま 301リダイレクト：新URLへ というようになっている。 ちなみにRailsでは、デフォルトで302が返るようになっている。 これを変えるには、

Web2.0と言われ始めた時代に、Ajaxという手法が広まりました。今ではAjaxを使っていないウェブアプリケーションを探すのが難しいくらい、Web開発の現場には浸透していると思います。もちろん、Ajaxを知らなくてもウェブアプリケーションは作れますが、これは使い心地を意識すれば自然と必要になってくるものです。 この記事では、実際に簡素な掲示板アプリを作りながら、現在ほとんどのウェブアプリケーションで使われているAjaxという手法を紹介していきます。ちなみに、タイトルの「100行で」というのは今回書いたapp.rb、index.erb、schema.sqlの３つのファイルのトータルがおよそ100行だという意味です。数字をタイトルに入れると読んでもらいやすいという話をどこかで聞いたので入れてみました。 ソースコードはGithubにも置いておきました。 gaaamii/ajax_sample

scaffoldで生成されたアプリケーションの中身 コマンド1つでデータ管理機能のscaffoldを生成できました。「rails generate scaffold」コマンドはデータを管理するために必要なソースを生成しています。その中に含まれるMVCの各種コンポーネントについて見ていきましょう。 ERBテンプレートエンジンを使ったビューの概要 ビューのソースコードは「app/views」ディレクトリに置かれます。早速、一覧ページを表示するための「app/views/books/index.html.erb」を見てみましょう。 <h1>Listing books</h1> <table> <thead> <tr> <th>Title</th> <th>Outline</th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <% @b

このブログの最初のエントリは301リダイレクトと302リダイレクトは離婚と不倫というステータスコードのネタでした。 そして雲の上にいらっしゃるSEOの権化・渡辺さんより以前から、 「200、301、302、500、503の例え話をまとめよ」 とご啓示頂いてましたので、そのすべてを夫婦仲で例えてみました。 第7回：夫婦関係で例えるHTTPステータスコード はい、パチパチー。今回は一般的な新婚のご夫婦に登場していただきます。 新婚ですからね、まずはラブラブです。 そう、それはステータスコードにすると・・・「200」 円満な夫婦生活と同じです。はい、ラブラブです。 200 OK コンピュータやサーバーとの間での通信が成功した状態。問題なくウェブページが表示される 円満な家庭生活を送っていたお二人ですが、結婚前には分からなかった驚愕の事実があったようです。 大変です。旦那が重度のマザコンだったと、

セレクトボックスを選択したら非同期通信でDBを更新する セレクトボックスを変更した時点で非同期通信でDB更新、最新の状態を表示する。 formの:remote => true のようにボタンを用いないAjaxの実装。 一覧画面でステータスのみを更新したり、フィルター機能をボタンを押下せずに実現する。 View1 index.html.erb <h1>注文リスト</h1> <div id="order_list" style="display: inline;"> <%= render :partial => 'list_body' %> </div> View2 部分テンプレート _list_body.html.erb option：中身はモデルに定義。 onchange：セレクトボックスの値を変更すると指定したJSが呼び出される。 <table> <thead> <tr><th>状態</

JQueryとの連携方法でいつもとまどう点をまとめとこう。というよりも、jQueryからRailsのアクションを呼ぶ方法。初心者にはなかなか流れが掴みにくいです。 用途は限定されるかもしれないですが、たとえばselectの変更をjQueryで検知したときに、RailsでActionを叩いてsessionの値を書き換えるときなどは次のようにする。 まず、流れ。 １）jQueryでselectの変更を検知する ２）jQuery内からURLを指定してAjax通信する ３）２）のURLがActionを叩くようにルーティングを設定する ４）２）のURLに従って、html.erbファイルを設置する ５）後は好きなようにAction内で処理をする <select id="year_select" name="y" style="width:100px;"> <option value="2011">20

Twitter風と言っているのはMoreなリンクがある(かまたはオートページャライズ)でどんどん次のページの要素がたされていくようなページネーション。 Kaminariでの実現方法なのだけどStackOverFlowに同じような質問をしている人がいて、それにKaminariの作者の松田さんが やり方を答えているものがみつかったのでそれを使って簡単にできた。 Rails 3 - "More" ajax pagination with Kaminari - Stack Overflow ありがとうございます 前回ページネーションの実装まではできているのでそれに付け足して行く感じ。ページャの部分を追記していく。 KaminariのAjaxページネートが簡単すぎた - chulip.org helper # usage: # link_to_next_page(@items) # link_to_

api.rubyonrails.org/classes/ActionView/Helpers/RecordTagHelper.html erbでdivタグのidをつけたいとき <div id="person_<%= @person.id %>" > とかやらなくていい

Docker は、以前に「勉強」だけはしていたのだけど「実践」はあんまりできていなかった。でも、ここのところ Docker for Mac の評判がずいぶん良いらしいので、遅くはなったけど「実践」の頃合いかなということで腰を上げてみた。Docker 再入門、ってことで。 Docker for Mac のインストールと Getting Started ここの通りに進めていってみる。Docker for mac は 2016/06/29 現在、public beta。 進めていくなかで、Getting Started の途中にある、hello-world の docker run にて $ docker run hello-world Unable to find image 'hello-world:latest' locally Pulling repository docker.io/l

esaすごい！今日またちょっとしたフィードバックを送ったんだけど、「まぁこんな感じに直してもらえるのかな」とか思ってたら、「こんな感じにしてみました！」との期待値を上回る対応をしてもらえた！それも修正後の挙動を示すGIFアニ付きで！だいすき！(\( ⁰⊖⁰)/)— いのうえ (@a_know) 2015, 5月 14 僕は、自分用のメモとかの整理に esa.io を使って いて、今までにも、使っていて気づいた変な挙動については、フィードバックを送るようにしてた。というのも、画面の右下にフィードバック送信用のフォームが常にあるから、とても送りやすいのだ。 で、今日もひとつ、見つけたので送った。 そんなに丁寧には書かない。 そしたら「修正します！」とのメールが、4分後に。早い！ まぁ、今回の事象から連想できる解決策は、「異なるテンプレートを選択した場合は、現在すでに編集済みのテンプレート内容を

写経した。 「パーフェクトに」というのは、6章から8章までのひととおり全部を、ということ。 https://github.com/a-know/awesome_events アプリケーションのコード https://github.com/a-know/server_awesome_events サーバー周りのコード 6章は「イベント管理アプリケーション」を Rails で構築してみる、というもの。7章はテスト。8章で Rails のインフラ・運用周り。 感想とか 写経を終えてみて、やってよかったと心底思っている。 今の職場でも、この本で扱われているような Rails アプリケーションの開発 TDD の実施 CI DevOps Chef でのインフラの構成管理 Capistrano デプロイ インフラのCI といったようなことには普段から接しているのだけど、とはいえ DevOps のあたりは

パーフェクトRuby on Rails を読みました。 いまさら！？という感じですが、しばらく仕事では iOS をメインでやっていたのですが、最近またサーバーサイドに戻ってきたそのタイミングで電子版が発売されたので。 ちなみに epub 版は 以下の URL から買えます。 Rails で仕事をしている人にはこの辺がオススメ 全体的には仕事、趣味を問わずバリバリ Rails を使っている人にこそ必要な本だなーという印象でした。 特に4章と9章が今後の自分の設計指針にとって非常に参考になりました。 4章の “Railsのロードパスとレイヤーの定義方法” は Model, View, Controller 以外の層 (Worker とか Service とか) を定義して使うための方法について書いてあります。ジョブキューでよく使われている sidekiq が例に出ているのでわかりやすくて実践的

このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年10月時点の調査。

概要 selectboxの内容をajaxで動的に変更したいとき用のメモ。 AとBの２つのselectboxがあるとして、Aのselectboxで値を選択したら、それに連動した値の一覧をBのselectboxに反映するといった動作だ。 例としてAを都道府県、Bを市区町村とする。 これらはhas_manyの関係とする。 都道府県(prefecture)　==has_many=⇛ 市区町村(city) 簡単に流れをまとめると 1. jqueryで都道府県のselectboxが変更されたことを探知して、$.getメソッドでajaxのactionを選択された都道府県idのparameterを渡して呼び出す。 2. ajax actionで都道府県idを基に市区町村をデータを取得する。 3. javascriptで上記で取得した市区町村データをselectboxに反映する。 formを作成 contr

ここ数年、Javascript界隈でフレームワーク戦争が勃発してきました。クライアント開発の規模も年々大きくなり、jQueryだけでは複雑な画面遷移などを管理しきれなくなってきたのが原因だと思います。 私も昨年までAngularとbackboneを試しましたが、サーバサイドをMVCにしているのに、クライアントでもMVCを作るMVCの2階建ては、やり過ぎなのではないかと思っていました。フレームワークそのもの覚えるまでにも一苦労というのも面倒に感じました。 2014年、海外でブームに火が付いたReact.js そんな中、2014年の後半からFacebook発のReact.jsの採用事例が聞こえてくるようになりました。AirBnBや米Yahoo! Mailなど大手がReact.jsを積極的に採用し出したので気になり、年末年始を使って色々調べてみることにしました。 Rails以来の衝撃 色々試して

あの、ずっと悩んでました… ここ２週間くらい。 すごい簡単なことなのですがぁ。 私がやりたかったのはですね、検索を実行すると取得結果を含めそのページを再描画すること。 画面イメージ ただ単に、検索ページ(templete)の中に結果表示ページが含まれているだけなので、 viewの中に「yield」と書いて取得情報部分を埋め込んでやればいいだけじゃないか、と思っていました。 で、検索結果を取得して描画するコントローラー＆ビューを作ってyieldで埋め込み…てやってたんですが、 外枠の検索ボタンを押して結果を取得、画面全体を再描画しても 取得した値はもうどっか行ってて表示されない、みたいな… （超意味不明ですみません…） ずーっと悩んだ挙句、 部分テンプレート「partial」使って取得情報を埋め込んであげよう という結論に至りました。 〜参考になりました！！〜 Ruby On Rails ピ

Photo by Flickr: J. A. Alcaide's Photostream jQueryを使うことでブラウザ間の違いを吸収しながらも、簡易にDOM操作のJavaScriptコードを記載することができます。 よく使われるjQueryのDOM操作のメソッドをまとめました。 また、jQuery1.x系とjQuery 2.x系の選択基準として、 1.x系は IE8 以前をサポートするレガシーブラウザ向けのバージョン 2.x系は IE8 以前のサポートは捨てて、高速に安定して動作させることを目指したバージョン ですので、適切なjQueryのバージョンを選んでください。 目次 jQueryの初期化処理の記述場所 子要素の追加(append, appendTo, prepend, prependTo) 要素の挿入(after, insertAfter, before, insertBefo

まず「リスト選択」の列の選択肢から「B」を選択します。 ⇒「リスト名」が「B」に変更されます。（変更）「追加/削除」の列の「+」ボタンを押します。 ⇒行が追加されます。（追加）追加された行の「リスト順」の列の「↑」をクリックします。 ⇒行が上へ移動します。（移動）移動した行の「リスト順」の列の「↓」をクリックします。 ⇒行が下へ移動します。（移動）最後に、好きな行の「追加/削除」の列の「-」ボタンを押します。 ⇒行が削除されます。（削除） いかがでしょうか。まあ、よくある機能ですね。では、この機能の実装方法について以下にまとめておきたいと思います。 HTMLHTMLでは、以下の点がポイントとなります。 それぞれの機能を発生させるためのイベントハンドラをセットしておきます。操作の対象となる「行」の部分は<tbody>タグ内に記述するようにします（これが後々大事になります）。JavaScrip

jqueryのマウスでグリグリするやつをRails+Ajaxで更新しるのをやってみたいなぁと思い ちょっと試してみました。 参考サイトの内容が超絶役に立ちました。ありがとうございます。 こんな感じの。 参考 ・Sortable List in Ruby on Rails 3 – Unobtrusive jQuery | Web Tempest ・JQuery UI Sortable を使ってドラックアンドドッロプでRuby on Railsの一覧表示の順を設定する - @yuumi3のお仕事日記 ・Sortable - jQuery UI API 1.8.4 日本語リファレンス - StackTrace ・Collapsible Drag & Drop Panels Using jQuery How to JQuery / JQuery UIを使えるようにします。 (20120107修正：

jqueryでhtmlを書き換える方法はいろいろとあります。 テキストを書き換える方法 $("セレクター").text("書き換え"); 例えば、フリーランスをデザイナーに書き換える <p class="text">フリーランス</p> jqueryのタグは $("p.text").text("デザイナー"); すると <p class="text">デザイナー</p> になります。 htmlタグごと書き換える方法 $("セレクター").html("書き換え"); 例えば、pタグのフリーランスをh3タグのデザイナーに変更します。 <p class="text">フリーランス</p> jqueryのタグは $("p.text").html("<h3>デザイナー</h3>"); すると <h3>デザイナー</h3> にかわります。 htmlの追加 指定した要素内部の先頭に追加する方法 $("セ