やさしい AJAX on Rails という資料を作りました - satococoa's blog
最近 SPA (Single Page Application) についての議論が盛んで、Angular とか React とか Flux とか Mithril とかの名前をよく聞くようになりました。 でも必ずしも全ての Web アプリにおいて SPA は必須ではありません。 むしろ枯れた jQuery と Rails の remote: true の仕組みを正しく使うだけで十分なケースも多数あると思います。 (特に iOS, Android のネイティブ開発者が身近にいる環境では SPA で開発するのとネイティブで実装するのとでは後者の方がコストが低いこともありますし。) ということで、「じゃあ Rails で Ajax ってどうやって実装するんだっけか？」というところをまとめた資料を公開します。 中級者以上の方にとっては特に目新しい情報は無いと思いますが、経験の浅い方の自己学習や研修な
turbolinksを使うときに気をつけるべきたった一つのこと - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年10月10日14:48 JavaScript Ruby turbolinksを使うときに気をつけるべきたった一つのこと さて、今更ですが、turbolinks とは pjax（Ajaxで要素を動的に変えつつ、pushStateでURLも変更しちゃう）をRailsで簡単に利用出来るようにしたものです。 pjaxを使えば、Ajaxと違ってURLもちゃんと変わるし、ブラウザの戻るだって普通に使えるからとても便利です。毎回ページ全部を評価してまるっと書き換えるんじゃなくて、必要と部分だけを入れ替えるので、レスポンスだって高速になります。 このturbolinksに関してはいろんな人が記事を書いてくれているので詳細はそちらを見ていただくとして、 Rails 4のturbolinksについて最低でも知っておきたい事 | KRAY Inc Rails4でturbolinksを謳歌するためのまと
フルAjaxで動くRailsアプリを作ってみたよ。 | Ginpen.com
scaffoldを使うとCRUDが揃った「土台」を一発で作れるわけですが、それをアレコレして全ての操作をAjax化してみたので、手順をまとめました。 記事を読むのがだりぃって方はソースコードをGitHubで公開してるので、そちらをご覧ください。 RubyもRailsもあんまり触った事がないので、識者によるツッコミ歓迎します。 (｀・ω・´) 概要 やること indexの画面だけでCRUD、つまり新規作成 (Create)、表示 (Read)、編集 (Update)、削除 (Delete)を行えるよう、scaffoldで作成したファイルをいじります。 結論 form_for()にremote: trueを与えるだけで、とりあえずAjax化します。あとはサーバー側のレスポンスの内容を整えて、クライアント側で適切に処理してやればOKです。 作業 下準備（scaffoldとか） indexに編集フ
text.ssig33.com - Rails の Ajax は過渡的なもので注意が必要だ
Rails の Ajax は過渡的なもので注意が必要だ この記事は Ruby Advent Calendar 2011 の 11 日目の記事です。真面目な話を書く。 Ruby プログラマーの皆様にあっては Rails プログラマーの方が多くいらっしゃると思います。 Rails を用いて開発されるプログラムには悉く Ajax が使用されていることでしょう。 つまり Ruby プログラマの多くは JavaScript プログラマです。 ところで Ruby と JavaScript はその思想に多きな差異があります。 JavaScript はその隅々においてコールバック制御を用いたシングルスレッドのイベントドリブンなプログラミングを要求します。 実際こうしたイベントドリブンなプログラミングは大層難しく、 Rails ではそれを隠蔽する為の仕組みが提供されています。御存知 link_to や fo
本当はそれなりに面倒くさいJavaScriptとhistoryとAjaxのお話 - 愛と勇気と缶ビール
口上 historyとAjaxといえば、JavaScriptからある程度任意でhistoryのエントリをpushできるhistory.pushStateとか、history.replaceStateは既に大分有名になった感がある。 素晴らしい未来では、全てのブラウザにpushStateが乗っていて「location.hashを使ったAjax遷移が許されるのは10年前のブラウザまでだよねー」というハッピーな世界が実現するのだろう。が、今現在ではまだpushStateに対応していないブラウザのシェアも多く、Ajaxによる擬似画面遷移をモリモリ行うようなサイトではpushStateのある環境、ない環境の両方を考慮してやる必要がある。 (ちなみに、要件によっては「pushStateがないブラウザは通常の遷移で我慢しろ！」という割り切りも全然ありだと思う) 先に言っておくと、この記事は長いです。 環
statSVNで開発の状況を可視化する
みなさんこんにちは。@ryuzeeです。 先日何人かに聞かれたので書くことにします。 うちはPHPでの開発が多いので、色々なオープンソースなツールを組み合わせて自動化に組み込んでいますが、Javaな人はSonarを使うとよいかもしれません。 statSVNって何？http://www.statsvn.org/にある通りで、Subversionのログを利用して以下のような分析をしてくれる。 ソースコードの行数推移開発者ごとのソースコード行数時間別のアクティビィティ分析開発者毎のアクティビィティ分析モジュール毎のアクティビィティ分析ディレクトリ毎の状況ファイル数や平均ファイルサイズ、巨大ファイル変更回数の多いファイルの分析コミットログの時系列での整形出力などなど インストール簡単です。 http://sourceforge.net/projects/statsvn/にアクセスし、statsvn
PHPのイタい入門書を読んでAjaxのXSSについて検討した(1) - ockeghem's blog
このエントリでは、あるPHPの入門書を題材として、Ajaxアプリケーションの脆弱性について検討します。全3回となる予定です。 このエントリを書いたきっかけ twitterからタレコミをちょうだいして、作りながら基礎から学ぶPHPによるWebアプリケーション入門XAMPP/jQuery/HTML5で作るイマドキのWeという本を読みました。所感は以下の通りです。 タレコミ氏の主張のように、本書はセキュリティを一切考慮していない 主な脆弱性は、XSS、SQLインジェクション、任意のサーバーサイド・スクリプト実行（アップロード経由）、メールヘッダインジェクション等 脆弱性以前の問題としてサンプルスクリプトの品質が低い。デバッグしないと動かないスクリプトが多数あった 上記に関連して、流用元のソースやデバッグ用のalertなどがコメントとして残っていて痛々しい 今時この水準はないわーと思いました。以前
Rails3でAjaxでformのcallbackを指定するには - ryopeko の何か
Rails3からの変更点でハマったのでメモ。 Rails2ではformをAjaxで送信するにはform_remote_tagを利用していた。 これがRails3では以下のように:remote => trueを指定することで実現する。 <%= form_tag(url_for(:action => 'create'), :remote => true, :id => "result_form") do %> <% end %> 今は主にjQueryを使って開発している為、デフォルトで扱うjavascriptをjQueryに変更する。 Gemfileに以下記述 gem 'jquery-rails' bundle installして関連ファイルをgenerate $ bundle install $ rails g jquery:installjquery.jsとrails.jsを読み込むように
Rails3のAjaxでHTMLを返してjQueryで処理する - #詰んでる日記
6月末くらいからRailsを触り始め、ようやく慣れてきたと思ったらRails3が出て涙を流してるのがおれです。そんなわけで会社のプロジェクトをRails3で書きなおしてます。 Rails2時代 Rails2時代のAjaxのリクエストは、link_to_remoteを使えば問題ありませんでした。こんな感じ <%= link_to_remote "hoge", :url => hoge_path,:update => "hoge_id" %> こうするとhoge_pathっていうURLにAjaxで通信して、返ってきたレスポンスでid="hoge_id"な要素以下を更新してくれてました。 Rails3時代 Rails3ではlink_to_remoteは廃止され、代わりに:remote => trueを使うようになりました。あと:updateもなくなったみたいです。こんな感じです。 <%= lin
InfoQ: HTML 5 Web Sockets vs. Comet and Ajax
World Wide Webは90年代半ばに急速に成長し、情報分散の一番の手段となった。そしてブラウザがユビキタスになりユーザがそれを使うことに慣れてくれば、歴史上のどんなプラットフォームのユーザ数よりも多いユーザが利用するアプリケーションプラットフォームになることは明らかだ。しかし今はHTMLやHTTPなどの標準が、高度なインタラクションや優れたユーザエクスペリエンスといった考え方を元々の設計思想に持ってないため、まだその段階には至っていない。多機能なオンラインアプリケーションを提供しようとする初期の取り組みのいくつかは、MicrosoftのExchangeエンジニアチームでされていた。このチームはメールサーバのフロントエンドをOutlookに似たものにするために96年からIFrame要素を使っていた。当時はそれが応答性や全般的なユーザエクスペリエンスを妨げるものになっていたが、しかし来
Ajaxに力を入れ始めたマイクロソフト、今度はJavaScript圧縮ツールを無料公開
マイクロソフトのAjaxに関する動きが目立ってきました。以前のエントリで紹介したように、9月にはAjaxによるWebアプリケーションを最適化して起動速度を改善するツール「Doloto」の配布を開始。 Ajaxの起動を高速化するツール「Doloto」、マイクロソフトが発表 － Publickey 10月には、Ajaxのライブラリとして最も人気のあるjQueryのマイクロソフト自身による配布を開始すると同時に、Ajaxライブラリを高速に配布するためコンテンツデリバリネットワーク、「Microsoft Ajax CDN」を立ち上げています。 マイクロソフトも配布を開始したjQuery、今後のバージョンでは大幅な性能向上とモバイル対応へ － Publickey Announcing Microsoft Ajax Library (Preview 6) and the Microsoft Ajax
フレッシュなJavaScriptツールチップライブラリ等のまとめ:phpspot開発日誌
フレッシュなJavaScriptツールチップライブラリを含むツールチップライブラリが25種類まとまっているエントリのご紹介。 当サイトで紹介したことのないツールチップも含まれていましたのでご紹介。 ツールチップという完成されたと思われる分野においても様々な工夫がなされているのが分かります。 アニメーションしつつ表示される、デザインされたポップアップ フェードインアニメーションしながら表示される画像ツールチップ del.icio.usとかdigg等へ投稿するソーシャル機能付きツールチップ作成チュートリアル 角丸シャドウ付きのツールチップ 各リンク先は以下のエントリを参照してください。 25 Useful jQuery Tooltip Plugins and Tutorials : Speckyboy Design Magazine
A Fancy AJAX Contact Form
Introduction Providing a simple and reliable means of feedback from site visitors is a crucial part of any web presence. The most simple and common feedback channel are contact forms. In this tutorial we are going to make an AJAX contact form which leverages modern web development techniques. We are using PHP, CSS and jQuery with the help of the formValidator plugin for form validation and the JQT
【ハウツー】Webデバッガに新星登場!? 操作を記録し、イベント/DOMを一発解析 - FireCrystal (1) FireCrystalとは | エンタープライズ | マイコミジャーナル
複雑な機能をいくつも実装したWebアプリケーションのデバッグはツールなしでは一苦労だ。Ajax処理やこまかいイベント制御・DOM操作をおこなっている箇所でバグを出してしまった日には、解析だけで大変な時間を割かなければならない。 そんなときは、FireCrystalを使えば解決するかもしれない。ユーザの操作を記録し「どのタイミングで」「なにがおこなわれているか」を一発で表示してくれる便利なアドオンだ。 本稿では、そのFireCrystalについて紹介しよう。 FireCrystalとは Stephen Oney氏は8月21日(米国時間)、Firefox上で動作するアドオン「FireCrystal」をリリースした。FireCrystalはThe MIT Licenseのもとで公開されている、Webデザイナ・デベロッパ向けのデバッガ。Webページ上でユーザの操作を記録し、内部でどのようなイベント
Ajaxの起動を高速化するツール「Doloto」、マイクロソフトが発表
マイクロソフトリサーチが、AjaxによるWebアプリケーションを最適化して起動速度を改善するツール「Doloto」をの公開を、9月8日から開始しました。 DolotoのWebページの解説によると、Dolotoとは「Download Time Optimizer」の略であり、またロシア語で「彫る、干渉する」という意味の単語だとのこと。発表されている資料を基にDolotoがどのようなツールなのか、紹介していきましょう。 JavaScriptのロードを最適化するDoloto 最近の大規模なWebアプリケーション、例えばGMailやGoogle MapなどのAjaxで開発されたアプリケーションは、Webページを呼び出した時点で大量のJavaScriptコードをサーバからWebブラウザへとダウンロードするため、起動に時間がかかるようになってきています。 DolotoはこうしたWebアプリケーションを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.yuku-t.com/entry/20110823/1314111340
ピュアCSS3を使ったajaxアニメーション実装例:phpspot開発日誌
透明感のあるデザインをJavaScriptで実装する（glassbox.js） - youmos
IBM Developer
YAPC::Asia 2009 / Asynchronous Programming for (A)synchronous Communication