フル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に編集フ
jquery-mockjax 使えよ色々と捗るぞ - present
jQuery や Backbone.js で UI を開発していて面倒なのが、サーバー側の API を呼び出す部分の実装です。呼び出したい API が既に実装されていないと、細かいところまで作り込めません。 あと、上手く動かなかったときも面倒です。原因がクライアント側ならすぐ直せますが、サーバー側だった場合、サーバー側のコードを修正して、テストまでしないといけません。効率悪いですよね。 できれば、クライアント側の開発はクライアント側だけで完結したい。さらに欲を言えば、最終的にサーバー側の API を呼び出すように修正するとき、出来るだけ少ない修正で済むようにしたい。 API 呼び出しを抽象化してダミーの処理と差し替えたり、jQuery.ajax を上書きしたり、色々工夫して最後に行き着いたのが『jquery-mockjax』。 appendto/jquery-mockjax · GitHu
ajaxしまくるページで不要な処理はabortすべし
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ポチってもうたー開発メモ。 UIだけJSでいじってる時はそこまで慎重になることでもないけども、頻繁にガシガシajaxする場合は、既に走っているajaxリクエストもうまいことハンドリングすべき。ポチってもうたーでは、ツイートをJSONで返すよう、サーバーサイドでサービスを用意しているわけだけれども、まぁ、普通に考えれば、こんな感じで、JSON返ってきたらUIを更新するってやるんじゃないだろーか。 $.ajax(url, query).then(function(){ // UI更新しちゃう }, function(){ alert('ゴメンなんか変'); });しかし、これには問題があって、JS
[メモ]SWFUpload | Ryuzee.com
SWFUploadはオープンソースのファイルアップロード用ライブラリでJavaScriptとFlashで実装されている。 主な特徴は CtrlやShiftキーを使って一度に複数ファイルを選択しアップロードできる 全てのイベントでJavaScriptのコールバックが可能 アップロード開始前にファイルの情報の取得が可能 アップロードの部品もCSSで加工してある ファイルやアップロード状況をhtml上で表示 ページのリロードが不要 Flashをサポートしているプラットフォームならどんなブラウザでも動作 FlashかJavaScriptが使えない場合は、標準のアップロード機能として動作 アップロード開始前にファイルサイズで判定 指定したファイル種別のみを選択画面に表示 キューを使ったアップロードが可能で、アップロード開始前ならキューへの追加・削除が可能 んでもってCakePHPで簡単に利用できる
jQueryとphpでAjaxな郵便番号入力補助を作ろうと思う - blog::konk303
リクエストがあったので。ちょっとどうするか整理してみる。 http://zip.ricollab.jp/を使おうと思う。 httpsでは投げさせてくれないみたいなので、proxyする踏み台も必要。複数サービスで必要なので、共有で使える場所に置かないと。 一応「こんなのやります」はシステム側（インフラ側）に伝えてあるけど、もう一回確認取ってからスタートする。 要件は 郵便番号を入力して「住所を入力」を押すと、住所が補完される 郵便番号入力時に、補完候補を自動表示 「一覧から探す」で、住所一覧から選択できる。絞り込み検索可能に。 ぐらいかな。まずは1をさくっとリリースして、後は追加機能で後追いにしちゃおっと。 システム側 jsライブラリはjQueryで（なぜなら好きだから）。 共有で使えそうなサーバで、https受け付けてるサーバはphpで動いてるので、踏み台はphpで。 指定サービス以外のド
JSON形式のデータをブラウザ上で編集できる『JSON Editor』 | POP*POP
ちょっと癖のあるデータ形式であるJSONですが、ブラウザ上で編集できるツールが出たようです。 ツリー状のナビゲーションが直観的で使いやすいです。ちょこちょこっといじるときに便利そうですね。簡単な使い方は以下からどうぞ。 ↑ まずはサンプルデータをロード。ご自分のJSONデータを貼り付けてもかまいません。 ↑ Build Treeをクリック。左側にデータ構造がツリー状に出てきます。 ↑ ツリーを展開して編集。終わったら「Save」。 ↑ 変更されたJSONデータを見るにはツリーのトップをクリック。データが変わっているのがわかります。 あとはこうして変更されたデータをご自身のプログラムで利用するだけです。データ構造が複雑になりすぎて変更が面倒・・・というときにご利用されてはいかがでしょうか。 JSON Editorは以下よりどうぞ。 » javascript json editor
つくるぶガイドブログ: Adobe AIRでAjax！HTMLとJavaScriptでそのままAIRに移行できるサンプル
こんにちは、JavaScript担当の（株）アークウェブの竹村です。 2008年2月25日にAdobe AIR 1.0 (英語版)がリリースされましたね。 Adobe AIR AIRはHTMLやJavaScriptなどWebの技術をそのまま利用してクライアントサイドのデスクトップアプリケーションの開発ができるので、今までのWebデベロッパーには親しみやすいと思います。 今回は、このAIRでHTMLとJavaScriptを使ったWebアプリをAIRに変換してユーザに配布するまでについて、書いていきます。 レジュメは↓このようになっています。 AIRアプリケーションを制作できる環境構築 ユーザに配布するまでの流れ アプリケーション記述ファイルの作成 AIRコンテンツの制作 AIRコンテンツの確認 電子署名の作成 インストールパッケージの作成 Webにアップする (インストールバッジの作成) お
つくるぶガイドブログ: ドラッグアンドドロップで並べ替え(Rails + Ajax)
Ruby（とRails）を担当している石原です。 ソーシャル「OSを入れた後にインストールする10のアプリケーション」(仮) を作る過程をレポートしています。 これまでのエントリーはこちら ↓ つくるぶガイドブログ: Ruby on Rails を使ってひとりでサービスを作ってみよう つくるぶガイドブログ: ひとりサービスの雛型をつくる(リキッドレイアウト、GetText、Acts as Authenticated) つくるぶガイドブログ: Rails で楽々ソーシャルブックマークの仕組みを作る つくるぶガイドブログ: Rails プラグイン acts_as_taggable_redux でタグクラウドを作ろう 今回は、登録した10のアプリケーションをベスト1からベスト10まで並べ替えたい、ということで、ちょっと趣向を凝らしてそれをドラッグアンドドロップで出来るようにしたいと思います。 A
「つくるぶ特集 Flash|Ajax ベストサイトセレクション20」：スライダー(Slider)ライブラリと、写真の中に写真レイヤーを表示するテクニック｜アークウェブのブログ
「つくるぶ特集 Flash|Ajax ベストサイトセレクション20」：スライダー(Slider)ライブラリと、写真の中に写真レイヤーを表示するテクニック 2007年10月22日 「つくるぶ特集 Flash|Ajax ベストサイトセレクション20」：スライダー(Slider)ライブラリと、写真の中に写真レイヤーを表示するテクニック SEの竹村です。 今回も「つくるぶ特集 Flash|Ajax ベストサイトセレクション20」のJavaScriptの技術面をフォローしていきます。 ▼Flash | Ajax ベストサイトセレクション20 http://www.tkrb.jp/modules/feature0/index.php?id=12 フォローを弊社のブログで行う理由は、Ajax ベストサイトセレクション20ではプログラム的な話はしていないためです。 さて、第4回は 「お題６＞検索が楽しくな
RedLine Magazine : ライブラリのリファレンス本
ライブラリのリファレンス本 最近買った本。 >>Ajaxライブラリリファレンス 本屋で立ち読みして「欲しいけど、これって全部ネットで調べられるよな･･･」と一旦買うのをやめたわけだけど、どうも気になったので後日Amazonさんで注文。内容はAjaxライブラリのリファレンスで全14種のライブラリが掲載されている。それぞれのライブラリのすべての事を網羅してあるわけではないが、よく使われてるものなんかは抑えてあるという感じ。99%解説やらソースやらのテキストで絵はほとんどない。 掲載ライブラリ prototype.js script.aculo.us Rico moo.fx Lightbox PrototypeWindowClass Yahoo! UI Library jQuery ThickBox JKL Mini Ajax bytefx reflection.js Highslide 上でも
超シンプルで使い勝手のよいJavaScriptコード集「Nomadic Functions」:phpspot開発日誌
NoFunc Nomadic Functions 超シンプルで使い勝手のよいJavaScriptコード集「Nomadic Functions」。 他のどのライブラリにも依存しない、★投票システムや、Ajaxリクエスト、カラーピッカー、ドラッグ＆ドロップ、テーブルソートなどを実現するためのJavaScriptコード集です。 例えば、ajaxリクエストをするのに、次の関数があって、wReq('http://www.YourDomain.com/',0,function(v) { alert(v); }); のようにシンプルに呼び出せるコードが紹介されています。 function wReq(u,s,change) { var r=[function(){ return new XMLHttpRequest(); },function(){ return new ActiveXObject("Ms
Ajax しない Ajax.InPlaceEditor (hPod)
Google Maps をきっかけに、数年ぶりに JavaScript に手をつけ始めて、それからしばらく。いろいろ試行錯誤したりして、それなりに最近のスタイルが解って来たつもりなのだけれども、これまではその仕組みやら原理やらを知るためにも、世に出回っている各種「便利なライブラリ」には敢えて触れないで、なんとかがんばって自作するようにして来た。 でも、もう、その、ブラウザごとの癖をどうにかすることに頭を悩ませるのはウンザリにも程がある、ということで、ついにその便利なライブラリの世話になる事に決めた。我慢してないではやく使っていればいいのに。 いくつかのサイトをまわってサンプルや機能を見てみると、 script.aculo.us というプロジェクトのそれ［参考１］が、いまじぶんが欲しい機能をスマートに実現してくれそうだった。 とくに Ajax.InPlaceEditor と、それから Dra
jQuery 開発者向けメモ
jQuery 開発者向けのメモです． ずっと以前に，jQuery に関する日本語の情報がまだ少ない頃に作ったページですが， その後 jQuery を再び利用する機会があったので，最新バージョン向けに記述を更新しました． 住宅ローンシミュレーションです． jQueryを利用したフォームの動的な追加や，flotプラグインによるグラフ描画などを行っています． 本ページの記載に間違い等見つけた方はブログのエントリまで連絡いただけるとうれしいです． 最終更新：2009/1/10 jQueryとは jQuery は様々な処理を短く簡単に書ける JavaScript ライブラリです． 独自のXPATH/CSSセレクタを利用することで，多くのDOM操作を非常に簡単に書くことが出来ます． JavaScriptのDOM操作や，XMLHTTPRequest，XMLの操作などを覚えなくとも， Ajaxを利用したイ
Ajax (Script.aculo.us)を多用した「GUCCI」Webサイトのリニューアル｜アークウェブのブログ
SEの竹村です。 英語圏のAjax関連のニュースを見ていて、あの「GUCCI」のサイトがリニューアルしたことを知りました。 Ajaxian ≫ Gucci Relaunches on Script.aculo.us http://ajaxian.com/archives/gucci-relaunches-on-scriptaculous http://www.gucci.com/us/ トップページやオンラインショップ、商品カタログ、About、カート機能までAjaxを多用した実装が行われています。 そこで、それぞれの画面で気になったところをチェックしてみました。 トップページでは、「GUCCI」ロゴのフェードイン→画像のフェードイン/アウト→画像の移動というギミックを使っていました。 アークウェブでもmusicmarQのリニューアルをお手伝いした際( 音楽情報サイト「musicmarQ」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
第19回html5とか勉強会 PJAX ～HTML5時代のAJAXサイトプラクティス～
新規