freeeの価値基準の一つである、ユーザーにとって「本質的（マジ）で価値ある」ものを届けるということ。本連載ではそれに向かって、日々挑戦を続ける開発現場の事例をお伝えします。本記事では、freeeでのフロントエンド環境の改善への取り組みである、Ruby on Railsアプリケーションにおけるフロントエンド環境のモダン化について紹介します。Rails5.0以前の標準的なフロントエンドのビルド基盤であるSprocketsアセットパイプラインがもたらした問題について解説するとともに、その仕組みに依存して成長してきたプロダクトがいかにしてSprocketsへの依存を断ち切ったかについて説明します。 対象読者 Ruby on Rails 5.0以前のアプリケーションのフロントエンド開発で、npmによるモジュール管理やwebpackなどによるビルドを行いたいのにそれがなかなか実現できずに困っている方
マネーフォワード Pay for Businessのフロントエンド / Money Forward Pay for Business Frontend
こんにちは。マーケティングプロダクト開発部の長田です。 この記事では、私が現在進めているプロジェクトで、Webpackerを使ったJavaScriptのモジュール管理を導入したので、それについて紹介したいと思います。 Webpackerとは Webpackerとは、Webpackを用いてRails上でJavaScript開発をするために必要な一連の流れを提供してくれる、Rails organizationで開発されているgemです。 これまで、Rails上でJavaScriptのパッケージをどのように管理するか、また、モジュール依存をどのように解決するかについて、多くの選択肢があり、それらをどう組み合わせて使うのかについて悩まされてきました。 このブログでも過去に何度か記事が投稿されており、その中でも複数の選択肢が上げられています。 webpackを使った Rails上でのReact開発
投稿推進部の外村（@hokaccha）です。 クックパッドブログの開発でRails上にECMAScript6などのモダンなJavaScript開発環境を導入した経験を元にノウハウを紹介したいと思います。 RailsはSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みが提供されています。Sprocketsによるasset管理の仕組みは非常によくできており、AltJSのトランスパイルやファイルの結合、minifyなど、assetのコンパイルに必要な機能を一通り備えています。 しかし、JavaScriptにおけるモジュールの依存関係の解決や、ライブラリの管理などについてはモダンなJavaScript開発と乖離してきているのが現状です。そこで、Railsでも以下のようなことを実現できることを目標に環境を作りました。 ECMAScript6のシンタックスを使う モジュ
すいません。締切守れませんでした…。 やっぱ、java-jaの忘年会の翌日は辛い…。 はじめに Webシステムを開発していると切っても切れないのがJavaScriptです。 Railsはかなり早い時期からalt-JSや結合、minify等を組み込めるようにフレームワークにそれを取り入れてきました。 それを支えているのがRails3.1から導入されたsprocketsです。 それに伴なってJSのライブラリをどうやって管理するかという点について、独自の路線を取ることになりました。 JSのライブラリを同梱したgemパッケージにラップしてrubygemsとして管理する方法です。 ある程度は上手くいっていたし、今もその流れは続いているんですが、時々問題になることもあります。 例えばメンテナの対応時期がズレてて古いバージョンのままだったり、似たようなgemが乱立してややこしくなったり。(backbon
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が
4. @tricknotes I am a software developer who love JavaScript and Ruby. http://tricknotes.hateblo.jp/
[Video] http://www.youtube.com/watch?v=s1dhXamEAKQ TildのYehuda KatzのGolden Gate Ruby Conference 2013での講演。 Ruby on RailsのクリエーターであるDavid Heinemeier Hanssonが、「JavaScript勢はダブルMVCで苦しんでいる。サーバとクライアント両方にMVCが必要で複雑すぎる。」とTwitterで発言したのに対して、Yehudaは、それでは誤解を与えると危惧し、GUIプログラミングが歴史的にどのようにMVCに発展してきたかを紹介することで、ダブルMVCが本当に意味するところを解説しています。 DHHの発言は、盛り上がってきたMeteor / Node.js勢に対する単なる批判っぽいですが、それに対してYehudaはロジカルに話をまとめてます。 スライドを
恐らく2日ほど前のことだと思いますが、GitHub上で、Node.jsのウォッチャー数がRuby on Railsのウォッチャー数を超えてナンバーワンの座についたようです。NodeはJavaScriptエンジンのV8＋イベント駆動のWebサーバという「処理系＋サーバ」であるのに対して、Railsは言語処理系を含まないフルスタックのWebアプリケーションフレームワークという違いがあります。NodeにはExpressなどのWebアプリケーションフレームワークがあります。だから、RailsとNode.jsを比較するのも変な気がします。そもそも「ウォッチャー数に、意味あるの？」という皮肉な見方も可能でしょう。それにしても、ウォッチャー数でNodeがRailsを超えたというのは、JavaScript人気の高まりと、リアルタイムWebへの期待感を示すという意味で、これは象徴的な数字だと思います。Nod
はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って？ ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵を投稿できる 投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。 絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、 ・mousemoveイベント発生時に点をプロット という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。 これではお話になりません。 なので、点ではなく線を引くこ
JavaScriptへコンパイルして実行することを前提としたスクリプト言語「CoffeeScript」がちょっとした注目を集めています。CoffeeScript自体は2009年末に登場し、その1年後の2010年12月にバージョン1.0がリリースされていますが、注目を集めたのは、数日前（2011年4月13日）にRuby on Railsの生みの親であるDHHが、次期バージョンのRails3.1でjQueryやSCSSと合わせて、CoffeeScriptをデフォルトとして採用するとTwitter上で発言して議論が巻き起こったからです。 Yes, it's true, Rails 3.1 is going to ship with CoffeeScript and SCSS in the box for use with the new asset pipeline. It's bad ass.
Ruby on Railsの生みの親、DHHが在籍する37signalsがMac OS X用のRackサーバ「Pow」をオープンソースで公開しました。ちょっとこれまでにない種類のプロダクトで、その使い勝手のシンプルさとアイデアに鼻血が出そうになりました。実装にNode.jsとCoffeeScriptを使っているというのも面白いです。 Powの売りは、「Zero-configuration」（設定要らず）ということで、複数のRails/Sinatraアプリをローカルで動かして開発するようなときに、仮想的なドメイン名を手軽に割り当ててアクセスできるようにしてくれる、というものです。インストールはcurlのコマンド一発で、 $ curl get.pow.cx | sh とするだけ。そして、RailsやSinatraなどのRackアプリのディレクトリをPowのディレクトリにシンボリックリンクを貼る
Express on railwayはnode.js用のRails風Webアプリケーションフレームワーク。 Express on railwayはJavaScritp/node.js製のフリーウェア（ソースコードは公開されている）。Rubyは元々優秀な言語であったが、ここ数年の爆発的な普及にはRuby on Railsの存在があったというのは間違いないだろう。 プロジェクト開始 どんなにプログラミング言語が優れていても、キラーアプリケーションになるものが必要なのだ。それはnode.jsについても同じかも知れない。node.jsにおけるRails的存在、その可能性を感じさせるのがExpress on railwayだ。 Express on railwayはRuby on Railsを真似たnode.js用Webフレームワークだ。まずプロジェクトを生成する機能を使うと、app/config/
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
どもrick No.10です。 今回は、このプルダウンを選んだらこっちのプルダウンの値が変わる！！ なんてことをしたいときにobserve_fieldを使用します。 observe_fieldは、railsのRJSテンプレートという機能を使っています。 RJSテンプレートは、javascriptを書かなくても簡単にかける機能って感じですかね。 view側(プルダウンを監視してプルダウンを更新する) <%= select("keyword", "category", Test.collect{i.title, i.id}) %> //監視されるプルダウン <%= observe_field("keyword_category" //この値を見る(上のソース) :update => "keyword_small_category", //この値の場所を更新する
趣旨 インプレース編集を可能とする in_place_editor_field。prototype.js 系はアレなので、jQuery 版を作ってみた。といっても、完全互換ではない。mouse hover がらみの処理は省略。みなさんなりの実装をするときの参考にしてもらえれば幸いです。 使い方 下のソースコードを見て config/environment.rb を修正し、public/javascripts/ajax_in_place_editor.js を新たに作る。 コントローラ・ビューを下のように設定する。 コントローラ (app/controllers/blog_controller.rb) class BlogController < ApplicationController in_place_edit_for :post, :title def update_in_place
[rails plugin] javascript_test - script.aculo.usのunittest.jsでTDD&BDD JavaScript Rails 2008-01-06 via Dr Nic - Autotesting Javascript in Rails script.aculo.usのunittest.jsを使ったRailsプラグインの javascript_test なかなか良さそう。generatorでテストのひな形作成、auto_testに対応してくれる。unittest.js単体もBDD的な記述、ベンチマーク、辺りが良い。 #インストール ruby script/plugin install javascript_test mkdir test/javascript ln -s vendor/plugins/javascript_test/assets
Railsにははじめからprototype.jsやイフェクト用のeffects.jsが入っているので、手軽にJavaScriptによる各種イフェクトを楽しむことができる。 だが、人によってはprototype.jsよりも、プラグインで拡張できて軽量なjQueryの方がお好みだろう。その際にはこれを使おう。 今回紹介するオープンソース・ソフトウェアはjRails、Rails向けjQueryプラグインだ。 jRailsはプラグインとして提供されているのでインストールが容易に完了する。それだけで15種類を超えるイフェクトや、Ajaxによるデータの送受信を実装できる。 例えばクリックすると左右に震える「Shake」、クリックすると下に落ちる「DropOut」、下からせり出してくる「Grow」など。さらにprototype.jsやScriptaculo.usを使った際に利用される「form_remo
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
