はじめに 最近 jQuery はじめたけど、セレクタ自由に使えないと捗らないのでまとめておく。 注意点 以下に出てくるセレクタ特殊文字（'.', ',', ':', '#', '[', ']'）はエスケープが必要 基本セレクタ タグ名 or クラス名 or ID による指定ができる。 $("form"); // タグ名="form" $(".className"); // クラス名="className" $("#formId"); // ID="formId"

hp-stylelink.com 2024 著作権. 不許複製 プライバシーポリシー

//= require jquery //= require jquery_ujs //= require turbolinks こういう状態になってたら、Turbolinksがちゃんと設定されている。 （普通に rails new するとデフォルトでこんなんなってる） Turbolinks をOFFしないでそのままdocument.readyしてほしい kossnocorp/jquery.turbolinks を使う。 Gemを追加

前々回のAngularJS、前回のEmber.jsときて、ラストはBackbone.jsを試してみたい。作成するリアルタイム掲示板は今までと同じ仕様。 環境 Ruby on Rails 4.1.6 Backbone.js 1.1.2 jquery 2.1.1 セットアップ いつも通りGemfileから。またもやRails Assetsのお世話になる。 📄Gemfile source 'https://rubygems.org' source "https://rails-assets.org" gem 'rails', '4.1.6' gem 'sqlite3' gem 'sass-rails', '~> 4.0.3' gem 'uglifier', '>= 1.3.0' gem 'coffee-rails', '~> 4.0.0' gem 'jbuilder', '~> 2.0' ge

丹内です。 最近ReactJSを触り始めました。 掲題の通り、Railsをバックエンドにした場合のFluxを書いてみたのでまとめます。 このエントリの参考URLにあるリポジトリを参考にしました。 バックエンド 普通のRailsアプリです。Scaffoldをベースに、フロントエンドを書いていきます。 db/migtate/create_books.rb class CreateBooks < ActiveRecord::Migration def change create_table :books do |t| t.string :title t.timestamps null: false end end end BooksController#index 今回、ブラウザで/booksにアクセスした時に、最初に空っぽのHTMLを返し、ReactJSでAjaxリクエストによってデータを取得

長文注意。 angularjsについて今更ながらに触り始めて色々と感動したので纏めておく。 angularjsがどういったフレームワークかは公式のチュートリアルを眺めてたらぼんやりと把握できると思うので今回その辺の話はあまり触れない。 http://angularjs.org/ angularjsのAPIについては公式のドキュメント含めて様々なメディアやブログに取り上げられているが、導入から体系的に語られてるものはあまり無い印象だったので、僕のブログでは導入から具体的な目的に沿った実装方法を紹介していこうと思う。 ちなみに自分のangularjsへの理解も触り始めて一週間程度なのでだいぶ甘い。 angularjsを一週間やってみた感想 最初の2日くらいがだいぶつらい。 飲み込みが早い人ならすぐに使いこなすのかもしれないが、angularjsはdirective, controller, f

ことば コードの直交性を維持するために使うことのできる技法。 ・コードの結合度を最小化する ・グローバル・データを避ける ・類似機能のリファクタリングを行う 達人プログラマー―システム開発の職人から名匠への道 Ajaxの勉強 ・入力したキーを取得するJavaScript function getkchar(e) { var code; if(!e) var e = window.event; if(e.keyCode) { code = e.keyCode; } else if(e.which) { code = e.which; } if (code) { return String.fromCharCode(code); } else { return code; } } ・inputに入力した文字を取得して、outputに表示する <script type="text/javascr

Photo by Flickr: James Marvin Phelps' Photostream jQueryを使ってイベント処理の登録と削除方法、登録できるイベントの一覧を説明します。 また、JavaScriptはイベントを通してHTMLと結びついているので、イベントハンドラのコーディングと修正に多くの時間を使います。 そのため、イベントハンドラとアプリケーションロジックを分離することで、疎結合にする考え方も説明します。 目次 イベントハンドラの登録(on) イベントハンドラの削除(off) イベント一覧 イベントハンドラとアプリケーションロジックを分離する 1. イベントハンドラの登録(on)onメソッドを使うことでイベントハンドラを登録することができます。 // クリックのイベントハンドラを登録 $('#confirm').on('click', function() { retu

昨年くらいから次世代JavaScript（ES2015 & 2016）やReactやAngularJSなどのフレームワークの普及により脱jQueryの動きが見られ始めました。そして2016年はさらに脱jQueryの動きが加速するのではないかと見ています。その最も大きな要因として1月12日に実行されたマイクロソフトによる旧IE（Internet Explorer 8, 9 ,10）のサポート終了が挙げられます。そんな訳でjQueryは便利ですが、特に使う必要もなくなってきているのが現状です。今回紹介するjQueryに頼りがちな処理をJSで書けるようにさえなれば、脱jQueryはすぐにでもできるのではないかと思っています。ぜひ参考にしてください。 はじめに脱jQueryに関して以下のような記事が年末に投稿されました。 You-Dont-Need-jQuery – jQueryを使わない書き方教

Railsでの基本的な開発スタイルといえば、ページはリンクとフォーム送信、そしてリダイレクトの基本構成だろう。確かにこれでWebアプリケーションを作ることができる。 ただ今回はよりリッチなWebアプリケーション、具体的にはAjaxを駆使した開発について、Railsでどうやって開発していけばグチャグチャにならずに簡潔に書けるのか、私が心がけている点を紹介したいと思う。これを読めば、別にクールなJavaScriptフレームワークを使わずとも、シンプルなjQueryで作れることを知ることができるだろう。 そもそもなぜリッチにするのか リッチなWebアプリケーションにすれば、以下のような点のメリットがある。 毎回application.js や application.css、共通画像などを読み込む必要がなくなるため、サーバー負荷に優しい。 ユーザーはページ遷移を意識せずにWebアプリを利用できる

前回は、Cape.JS コンポーネントとデータの関係について解説しました。 今回のテーマは、Ajax です。Rails アプリケーションの API を通じてデータベースから初期データを取得し、コンポーネントに割り当てる方法について説明します。 まずは、「Todo リスト」のタスクを記録するための tasks テーブルをデータベースに作りましょう。ターミナルで次のコマンドを実行してください。 $ bin/rails g model task そして、テキストエディタで db/migrate/ ディレクトリの下にある _create_tasks.rb で終わる名前のファイル（「マイグレーションスクリプト」と言います）を開いて、次のように書き換えます。 class CreateTasks < ActiveRecord::Migration def change create_table :tas

$.when()で複数の非同期処理を行って、.done()で結果を受け取ってその後の処理をするのですが、特に非同期処理がAjaxの時、$.when()の.done()でAjaxで取得できた値を受け取って加工するのではなく、Ajax側で取得したデータを加工して$.when()のdone()に渡したい時のやりかたのメモ。 例 var foo = $.ajax({ url : "foo_API_URL", // {"text": "foo"} が返ってくるとする type : "GET", dataType : "json", data: data }).done(function(res) { var resText = res.text; // "foo" // ↓ 加工済みのデータを返したい return resText }); var bar = function() { return

Ruby on Rails + jQuery で Ajax 処理を行う際に、そのステータスにより処理を振り分ける必要があるケースもあります。 その方法についての備忘録です。 0. 前提条件 Rails 4.1.0 での作業を想定。 jQuery 導入済みであることを想定。 1. 準備 以下のような View テンプレートがあるとする。（説明用に簡素な例） （Form 内の Submit ボタン押下でメソッド hoge Controller, fuga Action を Ajax 呼び出しする） File: app/views/hoge/fuga.html.erb

動画の読み込みに失敗しました。しばらく待ってからリロードしてみてください。解決しない場合は ヘルプ「動画が見られない場合について」 もご覧ください。

RailsではフォームのAjax化を機能として提供してくれるが、あえてそれを使わないパターンを試してみる ポイントはcsrf対策向けの処理を自分で書かなければならないというところか # POST /users # POST /users.json def create @user = User.new(user_params) respond_to do |format| if @user.save format.html { redirect_to @user, notice: 'User was successfully created.' } format.json { render :show, status: :created, location: @user } else format.html { render :new } format.json { render json

※ ConcatenateをIndividual filesにすると個々のファイルが分割されます。 ※ CDNをLocal filesにするとファイルをダウンロードできます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script> <script> jQuery(function($){ $("#foo

Railsのサーバサイドだけで解決している編 Railsで例えばこういうデータがあったとして、 positive_phrasesテーブル text 頑張る人は報われる ここで諦めちゃダメだ 君ならやれる さあ、もう一度トライしよう view側でこの文言を装飾したいとすると、 - @positive_phrases.each do |positive_phrase| tr td = in_social_game_context(positive_phrase.text) def in_social_game_context(text) "#{text} ※ソーシャルゲームのガチャの話です" end こういうヘルパーを作ったら、以下のような表示がされます。 ここまでは楽勝ですね。 Javascript編 より良いUXのためにデータをページ遷移無しで追加／更新できるようにするとか、コンテンツ量が

create.js.erbはJavaScriptなので、JavaScriptの alert メッセージとか入れてみると、呼び出されたかそうでないかすぐわかる。 メッセージが表示されなければ、このファイルは読み込まれていない。 （表示されなかった） 確認その２ その１で確認できてるので、もうその２まで確認しなくていいんだけど・・・ Ruby - Railsのデバッグを助けるgems - Qiita で入れた、RailsPanelで呼び出されたコントローラーと、レンダーされた結果が確認できる。 正しくAjax呼び出しできてる場合はこんな感じ create.js.erbが返ってくるのを期待している。 間違ってる状態 Format は js なのに、何故か返っているViewは create.html.haml 原因 create.js.erb の置き場所が間違ってた；； 正：app/views/u

react-railsというReact.jsをRailsに簡単に統合できるgemを使い、React.jsをサーバーレンダリングする方法を説明します。 サーバーレンダリングすることで、初期値をHTMLの初期レンダー時に渡せるようになるので、ロード中による画面のばたつきや、ロード中といった表示をなくせます。 RailsでReactを使ってメッセージボックスアプリを作成 - Rails Webookをベースに説明しています。 また、この記事のソースコードは https://github.com/nipe0324/rails_samples/tree/master/react_server_rendering_test です。 目次 RailsでReactコンポーネントをレンダーする Reactコンポーネントをサーバーレンダリングする コントローラーでReactコンポーネントをレンダーする 動作確

react-railsというReact.jsをRailsに簡単に統合できるgemを使い、React.jsについて説明します。 次のような画面をReact.jsで実装し、Reactとサーバ(Rails)間でメッセージ一覧の取得や作成をできるようにします。 ソースコードはこちらです。 https://github.com/nipe0324/rails_samples/tree/master/react_test 目次 react-railsのインストール Reactのコンポーネントの表示 メッセージボックスの概要 メッセージボックスのリストを作成 メッセージフォームを作成 サーバーサイド(Rails)との連携 動作確認 Ruby 2.2.0 Rails 4.2.3 react-rails 1.4.2 react 0.14.2 0. React.jsとはReact.jsはMVCフレームワークでい

引用元 #402 Better Errors & RailsPanel - RailsCasts Better Errors RailsPanel 超有名gemなので今更感ですが、エディタの設定でコードに飛べるところと、Ajax 時の Better Errors の見方を知らなくて「おお！」と思ったので、メモ。 参考：Gems - すべてのRailsプロジェクトでいれておくべき7つの開発用Gem - Qiita BetterErrors BetterErrors エディタの設定 エディタ設定してあれば、エラー画面の赤四角で囲ったファイルパスのリンクをクリックで、該当のコードを開いてくれる。 設定方法 MacVim の場合の例

React.jsが流行ってますね。React.jsは「単一方向データフロー」であることと、フルスタックではない「UIライブラリ」であることがAngularJSなどとの違いだと思っております。このへんは詳しい記事をググって下さい(無責任)。 Railsな人の為にオフィシャルでreact-railsというgemがあるのでこちらでサクッと入門してみましょう。 react-rails 最初にやることとしては公式のチュートリアルがあります。Reactの公式ページはかなり充実してる上に読みやすく気合を感じます。 自分はmarkdownにするとことか省いてみてサクッと作ってみました。 準備 $ rails new react_sample -d sqlite3 --bundle-skip -T Gemfile gem 'haml-rails' gem 'react-rails', '~> 1.0.

セキュリティソリューション事業部からのお知らせ セキュリティソリューション事業部のブログサイトを新たに開設いたしました。 https://blog.sie-security.com/ 今後のセキュリティニュースの投稿は上記URLのサイトからとなります。よろしくお願いいたします。 担当：TY …More Read

1. jQuery 2.x vs 1.x 2. イベントハンドリングには on() を使うべし 3. AJAXには done(), fail() を使うべし 4. ajax()だけじゃなくショートカット・メソッドも活用すべし 5. find() を使って絞り込むべし 6. カスタムイベントを定義する 7. 属性を指定してDOMエレメントを生成できる 8. form送信時は serialize() を使って値をまとめて取得すべし 参考 本記事はjQuery Advent Calendar 2013の23日目の記事となります。今回はjQuery使いとして覚えておきたいテクニックを個人的に8つピックアップしてみました。 日本との時差の関係で更新が24日になっているでしょうが気にせずいきましょう。 1. jQuery 2.x vs 1.x １つ目はテクニックというよりTipsになります。jQuer

概要 通常 Rails の flash メッセージは、アクションごとに HTML をレンダリングする場合にしか使用できません。 Rails 側の各アクションで flash メッセージの設定を行う必要があるからです。 つまり、Ajax 通信が終了 (complete) した際に flash メッセージを表示する手段は、デフォルトでは用意されていません。 一応、サーバ側で flash メッセージを表示するための JavaScript を用意して、それをレスポンスとして返すなどの方法はあります。 それでも Ajax 通信 (JSON リクエスト) でも flash メッセージを表示したいよぉ！ というわけでその方法を調べてみました。 方法 Rails 側ではレスポンスヘッダ ('X-' で始まるカスタムヘッダ) に flash メッセージを格納してレスポンスを返します。 そして、JavaScri

2023/04/11 · アニメを見ながら英語を勉強する方法について、手順やアニメの選び方などを解説しています。注意点も紹介しているので、アニメで英語を勉強したい方は ...

ソフト音源やプラグインを多用するヴァーチャル・オーケストレーションにおいて、「システム負荷の改善」と「効率アップ」に貢献するミキシング＆ホスティング・アプリケーション ミキシング＆ホスティング・アプリケーションとして世界中のコンポーザーやアレンジャー、プロデューサーに愛用された「VIENNA ENSEMBLE PRO」 は、今やスタジオ及びプロダクションに必須とも言える「クロスプラットフォーム・ネットワーク・ソリューション」となりました。このアプリケーションは、外部MIDI デバイスやオーディオ・インターフェースを使わずに、Mac 及びWindows で、コンピューター・ネットワークを設定することができます。必要なものはイーサネット・ケーブルだけです。 「プリサーブ機能」によって、全てのプラグインとロードしているサンプルを保持したままDAW のプロジェクト・ファイルを切替えることができます

偏った選曲なのはご勘弁ください。 受験のときの頭の中はこんな感じでした。 自分的に戦闘モードの時の曲というセレクトです。 心情と曲調がなんとなくリンクしています。 最後は晴々と終わりますので、すっきりと作業を終えていただけたらと思って組みました。 1.ベートーベン　ピアノ・ソナタ第17番ニ短調Op.31-2「テンペスト」第3楽章 2.ヴィヴァルディ　バイオリン協奏曲ヘ短調Rv.297「冬」第1楽章 3.ショパン　エチュードOp.10-12ハ短調「革命」 4.ヴィヴァルディ　バイオリン協奏曲ト短調Rv.315「夏」第3楽章 5.ベートーベン　ピアノソナタ第14番嬰ハ短調Op.27-2「月光」第3楽章 6.ホルスト　組曲「惑星」Op.32より「火星」 7.ドヴォルザーク　交響曲第9番ホ短調Op.95「新世界より」第3楽章 8.ショパン　エチュードOp.25-12ハ短調「大洋」 9.ショパン　

運命 vs. 革命　鳴り響けムジーク！！

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

プログラミングをはじめて半年。 まだまだ世に出ているアプリのような、大そうなものは作ることはできない。 ネットで公開されている誰かのように、独学で爆速で成長して、独自のウェブサービスを公開できているわけでもない。 そんなすごい人たちと比較すると、自分なんてちっぽけに思えてしまう。 落ち込んでしまうこともあるけど、確実に言えること。 １日１つは新しいことを学んで、習得して成長しているってこと。 すごい人たちのように１日に１０段とか２０段飛ばしで、階段をジャンプできているわけではないけれど、１段づつ確実に階段を登れているってこと。 １日に１段登ることができた「小さな喜び」を大切にしたい。

８月にスパルタキャンプに参加してから、日中仕事をして、その後はプログラミングの生活をずっと送ってきている。 仕事の後のプログラミングはけっこう大変。楽しいけれど、仕事で疲れている中、頭を使うプログラミング。土日もどっぷりプログラミングしているから、この半年間まるまる休んだことはない。もう半年もたつのか。 半年たったらもっと上達している自分を思い描いていたけど、そうでもなかった。やっぱり仕事にしてがっつり時間をとった方が覚えも早いんだろうな。

nikkan-spa.jp これいいな。春からこれでいこう。

概要 Rails でページング処理といえば、kaminari だと思う。 github.com kaminari で Ajax のページングもできるようだが、 AdventCalendar - kaminari徹底入門 - Qiita jQuery の DataTables プラグインと連携して、ページング(一覧画面)を実装する。 （ページ送りは kaminari 使います・・・） github.com この gem を利用することで jQuery の DataTables プラグインを簡単に導入できる。 DataTables プラグイン自体のサンプルは下記。 DataTables example - Ajax data source (arrays) 検索・ソート・件数指定など、javascript 側で実装してくれている。 件数が少ないようであれば、全件データを JSON形式で Dat