Gulp on Rails: Replacing the Asset Pipeline | Viget
Just over a year ago I started using Gulp and created gulp-starter. The setup works great out of the box on projects that are unopinionated about assets. Rails, unfortunately, is very opinionated, and it's taken me a year of trial and error to land on a solution that fully integrates a Gulp-based asset pipeline with Rails without compromising existing features or sacrificing speed, power, or flexi
Rails, React, Browserify
Originally published on techtrails.io Using Node.js, I’ve grown accustomed to using CommonJS modules and I like them as a solution to dependency management and scope isolation in Javascript. Using Rails, what you natively get is Sprockets, which I feel doesn’t provide the same robustness and flexibility CommonJS does. So how could I continue using modules within Rails? Browserify is a tool that le
material uiをRailsで使ってみた - Qiita
material uiはreact.jsを使ってMaterial Designを実現しています。 material uiはbrowserifyと一緒に使うことになります。 そこでbrowserify-railsを利用してみました。 この方法だとJavaScriptを変更する度にbrowserifyが実行されてとても重いです。 また、railsプロジェクト内に埋め込みする利点も浮かびません。 そのため、この手法はおすすめしませんが、せっかく試したので記録を残しておきます。 作成したソースコードはeiel/material-ui-rails-sampleに置いています。 利用方法 利用するには、rubyとnodejsがインストールされている状態で
Rails 4で作るドラッグアンドドロップで表示順を変更できるサンプルアプリ(スクリーンキャスト付き) - Qiita
はじめに データの並び順を自由自在に入れ替えたい、という要求があったとき、ドラッグアンドドロップで順番が変えられるとなかなか便利です。 そこで本記事ではドラッグアンドドロップによる表示順変更機能をRails 4で実装する手順を説明します。 補足資料 理解しやすくするための補足資料をいろいろ用意してみました。 デモサイト Herokuにデモサイトを作ってみました。 元々のサンプルアプリケーションはCRUDができるようになっていますが、このデモサイトではデータの更新はできません。(変更できるのは順番のみ) ドラッグアンドドロップするとどうなるか、実際に動かしてみてください。 スクリーンキャスト サンプルアプリケーションを作る過程を録画してみました。 フルスクラッチでrails newするところから始めています。 http://www.youtube.com/watch?v=YQ-6HkBhVy
Throw away Sprockets!!
SprocketsをNode.jsのエコシステムで置き換えてRailsと組み合わせる話
Rails アプリケーション開発で役に立ったJavaScript デバッグの小技｜TechRacho by BPS株式会社
Chrome devtools でイベント監視 いろいろなJavaScriptプラグインを使っていると イベントの伝播を止めてしまうような動作をするものを使ってしまうことがあります。 function を割り当てたいイベントが止められていると厄介です。 代用できるイベントが生き残っていればそちらを使ってしまいたいです。 そんな時、どんなイベントが発生しているのかは Chrome devtools のmonitorEvents で確認することができます。 https://developer.chrome.com/devtools/docs/commandline-api#monitoreventsobject-events 第一引数で監視対象、第二引数でイベントを指定します。 monitorEvents(window, "resize"); イベントの指定はイベント名だけでなく、"mouse
Turbolinksをオフしないためにやった事 - Qiita
fetchReplacement失敗時は再度レンダリングされ, landingの状態になる。 よく出てくるおまじない $(document).on 'ready page:load', -> これはjqueryが提供する'ready'とTurbolinksが提供する'page:load'の両方で定義すること。 非Turbolinks遷移時は'ready'で発火。 Turbolinks遷移時は'page:load'で発火の両方をカバーするという意味。 Turbolinksをサポートしていないブラウザでも'ready'が発火するので安心。 jquery-turbolinks gem 'ready'triggerにpage:loadを追加してくれる機能を提供。 Trigger tips 通常、page:changeでaddEventListenerしてはいけない。 fetchHistoryの際に
アセットパイプライン | Rails日本語ドキュメント | Ruby STUDIO
このガイドでは、アセットパイプラインについて説明します。 このガイドを読むことで、次の事が学べるはずです。 アセットパイプラインとは何か、何が出来るのか アプリケーションのアセットの適切な構成について アセットパイプラインを使用するメリット パイプラインにプリプロセッサを追加する方法 アセットをgemパッケージにする方法 1. アセットパイプラインとは? 2. アセットパイプラインの使用方法 3. 開発環境での使用 4. 本環境での使用 5. パイプラインのカスタマイズ 6. アセットのキャッシュストア 7. Gemにアセットを追加する方法 8. ライブラリまたはGemのプリプロセッサの作成 9. 古いバージョンのRailsからのアップグレード 1. アセットパイプラインとは? アセットパイプラインは、javaScriptとCSSの連結・圧縮をフレームワークとつなぎ合わせる機能を提供します
uu59のメモ | RailsとJS(vue.js)の連携
前書き Railsを使いつつJSもそこそこ書きたい、という条件であればまず前提としてjQuery脳を捨てましょう。jQueryスタイルで考えるかぎり何をどうやっても破綻するのでJSを諦めるか保守性を諦めるかして覚悟を決めましょう。 捨てるのは「jQuery」ではなく「jQuery脳」です。jQueryでグローバルな領域に進出してメソッドチェインで狼藉を働いたり、いま現在目の前にあるHTMLだけを考えてDOM操作をしたり、$.onと$.triggerを使ったクロージャ内部へのGOTOなどを記憶から消しましょう。 可能な限りスコープを小さく保つのはプログラミングの基本原則といえます。その原則を思い出し、JSを軽く扱わず、一般的なプログラミングと同様に閉じられた関心事にのみ注力するようにしましょう。 RailsとJSと役割分担 Railsもviewとしてテンプレートエンジンの処理を持っていますが
Railsが時代に合わなくなってきた - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 追記 RailsでJS辛い問題に関しての結論：http://qiita.com/kaiinui@github/items/dad6180f1910c6a4bfd5 -- 近年、(1) Web/App両対応が増えてきたこと、(2) WebでもJSを多用するようになったこと、の二つがあり、以下の点でRailsが微妙になっている。 ViewのJavascriptがRailsから独立している API層のサポートが微妙 最初に書いておきますが、特に決定的な解決策もなく、辛いから今後解消されてほしいよね、な話です。 ViewのJavascriptが
[ruby][rails] rails と bower を組み合わせて assets を良い感じに使う術 - HsbtDiary(2014-06-17)
■ [ruby][rails] rails と bower を組み合わせて assets を良い感じに使う術 npm と bower と grunt を使って javascripts のテストに必要なライブラリをインストールするようにした by hsbt · Pull Request #414 · tdiary/tdiary-core で導入した npm, grunt, bower の組み合わせで javascript/css をかなり良い感じに organize するという仕組みを production の rails に投入した。 準備としてはまず nodejs を使えるようにするところから開始。これは cli さえ満足に動けばいいので xbuild を使ってビルドしたものを /opt/node-x.y.z とか /usr/local/node-x.y.z に置いて /usr/loca
![[ruby][rails] rails と bower を組み合わせて assets を良い感じに使う術 - HsbtDiary(2014-06-17)](https://cdn-ak-scissors.b.st-hatena.com/image/square/8cab6183abe73ade0ce0a24c302ac36ee5c17b43/height=288;version=1;width=512/https%3A%2F%2Fwww.hsbt.org%2Fdiary%2Ftheme%2Fogimage.png)
位置情報の取得とWebSocketによる送信 [Geolocation APIとwebsocket-railsによる位置情報通知アプリ #1] | DevelopersIO
はじめに ブラウザにて位置情報を取得し、その情報を別のクライアントへPush通知する処理の サンプルをRuby on Railsで作成してみました。 なんらかの業務で、ある社員が持つ端末より位置情報を取得し、本社側でリアルタイムで その情報を把握する、というような用途を想定しています。 アプリの機能としては JavaScriptにて、Geolocation APIを使用して位置情報を取得する websocket-railsを使い、WebSocketでサーバ側へ送信する サーバ側は、受け取った位置情報をwebsocket-railsを使い、別画面へPush通知する の3つに分けることができます。 これらの機能を実装するポイントについて書いていきたいと思います。 今回は、1.と2.についてです。 Geolocation APIを使用して位置情報を取得する 位置情報の取得は上記に書いた通り、Ja
![位置情報の取得とWebSocketによる送信 [Geolocation APIとwebsocket-railsによる位置情報通知アプリ #1] | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/c4ba9673af464883e264d1d320af2d2947fae03d/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F11%2Frails.jpg)
AngularJSとRuby on Railsで作るCRUDアプリ – (1)環境構築 | DevelopersIO
t.hondaです。AngularJSとRailsの勉強がてら、CRUD機能を持つサンプルプログラムを作ってみました。 ウィスキーの名前と価格を、登録して表示するアプリです。 先ずは開発するための環境を構築する手順を、メモ書き程度に書いておきます。 「開発するため」なので、AugularJS側、及びRails側でユニットテストも実行できる環境を整えたいと思います。 また、ViewにはTwitter Bootstrapを使用します。 では、手順です。 プロジェクト作成 0.(rails new などでRailsアプリケーションを作成) 1.Gemfileに以下を追加 gem 'therubyracer' gem 'execjs' gem "twitter-bootstrap-rails" gem "less-rails" group :development,:test do gem 'rs
SelfieGirlで使っている技術の紹介とOAuth.ioについて | 自転車で通勤しましょ♪ブログ
twitter上ではもう宣伝していますが、SelfieGirlをリリースしました。 SelfieGirlは、twitter上で話題になっている#グラドル自画撮り部のハッシュタグを元に検索して、スマートフォンで見やすいように整形したWebサービスです。Androidアプリはちょこちょこ出ているようなので、Androidじゃなくて別の方法でやってみようかなと思っていました。 SelfieGirlを作っている技術は以下になります。 Ruby on Rails Ruby製フルスタックフレームワーク AngularJS JavaScript MVCフレームワーク ionic framework AngularJSを前提にしたスマートフォン用に最適化されたhtml5フレームワーク heroku Ruby on Railsを簡単にデプロイできるPaaS。様々な言語をサポートしている。 oauth.io
Turbolinksを実装するにあたっての注意点 - おやまのエンジニアリングブログ
はじめに Rails 4になってTurbolinksやpjaxなどの非同期通信を使ってページを更新する方法が広く知られるようになりました。自分も積極的にプロジェクトに取り込んだのですが、結構癖があり、実装するにあたって色々考慮が必要だったのでその実装方法をまとめておきます。 ページ遷移後に$.readyが実行されない jQueryの.readyが実行されないというのがありますが、実はjquery-turbolinksというgemをGemfileに加えて、追加されたファイルをJavascriptのマニフェストファイルに加えるだけで解決するので特に問題ではありません。 グローバルスコープがクリアされない 技術の特性として、コンテンツ部分だけを置き換えているので、Javascriptのスコープはページ遷移をしてもクリアされません。なので、グローバルスコープに関数や変数を定義し続けると、どんどんメ
Angular + Rails with no fuss - Sébastien Saunier
I haven't been satisfied with the way my front-end code (mainly based on JQuery) has grown with my previous rails app, so I took the time to sit and explore the great front-end framework we now have. I still like handling the routing in Rails with several pages, it feels wrong to move that logic to the javascript layer. I don't want to build a single-page application. But having some canonical way
Rails4.0でangularjsを使ってRESTfulなajaxを実装する - is Neet
長文注意。 angularjsについて今更ながらに触り始めて色々と感動したので纏めておく。 angularjsがどういったフレームワークかは公式のチュートリアルを眺めてたらぼんやりと把握できると思うので今回その辺の話はあまり触れない。 http://angularjs.org/ angularjsのAPIについては公式のドキュメント含めて様々なメディアやブログに取り上げられているが、導入から体系的に語られてるものはあまり無い印象だったので、僕のブログでは導入から具体的な目的に沿った実装方法を紹介していこうと思う。 ちなみに自分のangularjsへの理解も触り始めて一週間程度なのでだいぶ甘い。 angularjsを一週間やってみた感想 最初の2日くらいがだいぶつらい。 飲み込みが早い人ならすぐに使いこなすのかもしれないが、angularjsはdirective, controller, f
Railsアプリでリアルタイムアップデートをサポートするmessage_bus - ワザノバ | wazanova
http://samsaffron.com/archive/2014/01/15/vintage-javascript-begone1 comment | 0 pointsDiscourseのSam Saffronが、Railsでリアルタイムアップデートするためのmessage_bus gemを紹介しています。 The Problem ユーザが最新のバージョンにバンドルしているJavaScriptとCSSを読込んでなくて、古いバージョンいよる変なバグに遭遇する可能性がある。どうするか？ The message bus シングルページアプリでは、リアルタイムをサポートするなんらかのメッセージング busが求められるが、今回Rails向けに用意したmessage_busのコアは、クライアントでメッセージをpub/subできるシンプルなAPIを提供できることである。 # in ruby Mess
AngularJS on Rails | GMOメディア エンジニアブログ
最近は子供中心の生活になっている、技術推進室の中村です。 先日RailsとAngularJSの連携について調べていましたので、それについて簡単に紹介したいと思います。 AngularJSとは、Googleが作成したJavaScriptのMVCフレームワークです。同じようなフレームワークでBackbone.jsがありますが、Backbone.jsが機能が少ない軽量なフレームワークなのに対し、AngularJSは機能が豊富なフレームワークです。 以降では、このAngularJSをRailsで使う方法を紹介したいと思います。 環境構築今回使用するRailsのバージョンは4.0.2です。またAngularJSのバージョンは1.2.1を使います。 まずはサンプル用のRailsアプリケーションを作成します。 $ rails new angularjs_sample 作成されたら、次にangularjs
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - mkwiatkowski/todo-rails4-angularjs: Showcase of Rails 4 and AngularJS integration
