scaffoldを使うとCRUDが揃った「土台」を一発で作れるわけですが、それをアレコレして全ての操作をAjax化してみたので、手順をまとめました。 記事を読むのがだりぃって方はソースコードをGitHubで公開してるので、そちらをご覧ください。 RubyもRailsもあんまり触った事がないので、識者によるツッコミ歓迎します。 (｀・ω・´) 概要 やること indexの画面だけでCRUD、つまり新規作成 (Create)、表示 (Read)、編集 (Update)、削除 (Delete)を行えるよう、scaffoldで作成したファイルをいじります。 結論 form_for()にremote: trueを与えるだけで、とりあえずAjax化します。あとはサーバー側のレスポンスの内容を整えて、クライアント側で適切に処理してやればOKです。 作業 下準備（scaffoldとか） indexに編集フ
jQuery や Backbone.js で UI を開発していて面倒なのが、サーバー側の API を呼び出す部分の実装です。呼び出したい API が既に実装されていないと、細かいところまで作り込めません。 あと、上手く動かなかったときも面倒です。原因がクライアント側ならすぐ直せますが、サーバー側だった場合、サーバー側のコードを修正して、テストまでしないといけません。効率悪いですよね。 できれば、クライアント側の開発はクライアント側だけで完結したい。さらに欲を言えば、最終的にサーバー側の API を呼び出すように修正するとき、出来るだけ少ない修正で済むようにしたい。 API 呼び出しを抽象化してダミーの処理と差し替えたり、jQuery.ajax を上書きしたり、色々工夫して最後に行き着いたのが『jquery-mockjax』。 appendto/jquery-mockjax · GitHu
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
お久しぶりです。@doryokujinです。11/14(日)に行われました、第８回 データマイニング+WEB 勉強会＠東京−大規模解析・ウェブ・クオンツ 祭り−で発表してきました。Togetterも参考にして下さい。 発表者・参加者双方の議論を重視するこの勉強会、今回もアツイ議論が絶えず巻起こって、とてもエキサイティングで有意義な勉強会でした。僕は前回に引き続き、今回も発表側として参加させていただきました。その時の資料は以下になります。 MongoDBとAjaxで作る解析フロントエンド＆GraphDBを用いたソーシャルデータ解析 View more presentations from doryokujin. 前回のログ解析バックエンドの続編として、散在する各種ログを集計してMongoDBに入っているデータを表・グラフとして可視化するためのフロントエンドのお話と、ソーシャルデータの解析をG
Ajaxのアクセシビリティ向上：jCarouselLite auto controllerを利用した自動スクロールのアクセシビリティ対応 こんにちは。竹村です。 accessibility Wikiに書いた内容ですが、より広くお知らせした方がよいのではないか、ということでブログにも書いておきます。 元記事は↓こちらです。 jCarouselLiteのautoにて停止/再スタートできるようにするアクセシビリティ対応 jCarouselLite がどんなものか説明すると、JavaScriptのオープンソースなライブラリで、『カルーセル』のユーザーインターフェイスが簡単に実装できるものです。 jCarouselLiteのサンプル 「前へ」「次へ」のボタンを押さなくても、数秒経ったら自動的に次の画像を表示するのが、jCarouselLiteのautoの機能です。 元記事では、このautoの機能に、
pQueryに期待してます。agoです。 なぜか"Google AJAX Feed API"で検索しても本家のドキュメントがトップに来ないGoogle AJAX Feed APIのドキュメントを眺めていてちょっとした利点に気付いたのでご紹介したいと思います。 1 文字コードのUTF-8統合 encoding指定がUTF-8以外のfeedもUTF-8に変換して返してくれます。 マッシュアップやブログパーツで別サイトのRSSを利用しようと思っても相手サイトがShift_JISでしかRSSをはいていない場合、文字コードを変換するためだけにAPIを作成しないといけない場合があります。 そんな時Google AJAX Feed APIを使うとどんな文字コードのRSSでもUTF-8に変換して返してくれます。 ただ、逆にUTF-8以外の文字コードで取得することはできないようです。 kyo@andLinu
かつて、ウェブページは静的なテキストとグラフィックの集合体だった。しかし、ウェブが成熟してくるに従い、ウェブを豊かで双方向的なアプリケーションにするための技術についての激烈な競争が起こった。 一方の陣営は、HTML（Hypertext Markup Language）と呼ばれる元からあるウェブページを記述するための技術だ。HTMLの機能の不足は、最初は基本的なプログラミング言語であるJavaScriptで補われ、その後AJAXと呼ばれるJavaScriptが巨大化した技術で補われることになった。 もう一方の陣営はAdobe SystemsのFlashで、この技術はグラフィックのアニメーションを実現するための手段としてスタートした。その後、Flashは長年をかけてはるかに強力なプログラミング基盤に成長し、最近はMicrosoftのSilverlightという競争相手も登場している。 これらす
SWFUploadはオープンソースのファイルアップロード用ライブラリでJavaScriptとFlashで実装されている。 主な特徴は CtrlやShiftキーを使って一度に複数ファイルを選択しアップロードできる 全てのイベントでJavaScriptのコールバックが可能 アップロード開始前にファイルの情報の取得が可能 アップロードの部品もCSSで加工してある ファイルやアップロード状況をhtml上で表示 ページのリロードが不要 Flashをサポートしているプラットフォームならどんなブラウザでも動作 FlashかJavaScriptが使えない場合は、標準のアップロード機能として動作 アップロード開始前にファイルサイズで判定 指定したファイル種別のみを選択画面に表示 キューを使ったアップロードが可能で、アップロード開始前ならキューへの追加・削除が可能 んでもってCakePHPで簡単に利用できる
リクエストがあったので。ちょっとどうするか整理してみる。 http://zip.ricollab.jp/を使おうと思う。 httpsでは投げさせてくれないみたいなので、proxyする踏み台も必要。複数サービスで必要なので、共有で使える場所に置かないと。 一応「こんなのやります」はシステム側（インフラ側）に伝えてあるけど、もう一回確認取ってからスタートする。 要件は 郵便番号を入力して「住所を入力」を押すと、住所が補完される 郵便番号入力時に、補完候補を自動表示 「一覧から探す」で、住所一覧から選択できる。絞り込み検索可能に。 ぐらいかな。まずは1をさくっとリリースして、後は追加機能で後追いにしちゃおっと。 システム側 jsライブラリはjQueryで（なぜなら好きだから）。 共有で使えそうなサーバで、https受け付けてるサーバはphpで動いてるので、踏み台はphpで。 指定サービス以外のド
僕がCEOを務めているStone Temple Consultingでは、「Google AJAX 検索 API」と「Google AJAX フィード API」を使って少し遊んでみた。これらは、ウェブサイトに動的コンテンツを埋め込むためのすばらしいツールだ。 今回の記事では、この2つのAPIを使ってサイトにコンテンツを埋め込む方法を説明しようと思う。 Google AJAX フィード APIこれは、よそのサイトから（RSSやAtomなどの）フィードを取得してコンテンツを抽出し、それを自分のサイトに埋め込めるようにするGoogleのAPIだ。フィード管理ウィザードの使い方などは開発ガイドから参照できる。 Google AJAX フィード APIがどのように機能するのかを理解してもらうために、Web担から最近の記事を表示するサンプルを作ってみよう。次のようになる。 ブログのあるサイトだけでなく
ちょっと癖のあるデータ形式であるJSONですが、ブラウザ上で編集できるツールが出たようです。 ツリー状のナビゲーションが直観的で使いやすいです。ちょこちょこっといじるときに便利そうですね。簡単な使い方は以下からどうぞ。 ↑ まずはサンプルデータをロード。ご自分のJSONデータを貼り付けてもかまいません。 ↑ Build Treeをクリック。左側にデータ構造がツリー状に出てきます。 ↑ ツリーを展開して編集。終わったら「Save」。 ↑ 変更されたJSONデータを見るにはツリーのトップをクリック。データが変わっているのがわかります。 あとはこうして変更されたデータをご自身のプログラムで利用するだけです。データ構造が複雑になりすぎて変更が面倒・・・というときにご利用されてはいかがでしょうか。 JSON Editorは以下よりどうぞ。 » javascript json editor
Jaslabsにて、IEでAjaxリクエストをキャッシュさせない方法が掲載されています。 IEの場合Ajaxを用いた通信を行うと、GETメソッドの場合一度実行されるとデータがキャッシュされて、2回目以降の通信はそのキャッシュされたデータを読みに行くようになってしまいます。 そこでJaslabsでは、その対策として2つの策を提示しています。1つめは、GETメソッドを辞めてPOSTメソッドを使う方法です。POSTメソッドの場合、GETメソッドと異なりこちらは2回目以降の通信でもキャッシュされることなくサーバのデータを取得します。 2つめの策は、GETメソッドで取得する先のURLにユニークIDを付加する方法です。下記のようにここではユニークIDとしてタイムスタンプを付加しています。 var date = new Date(); var timestamp = date.getTime()
こんにちは、JavaScript担当の（株）アークウェブの竹村です。 2008年2月25日にAdobe AIR 1.0 (英語版)がリリースされましたね。 Adobe AIR AIRはHTMLやJavaScriptなどWebの技術をそのまま利用してクライアントサイドのデスクトップアプリケーションの開発ができるので、今までのWebデベロッパーには親しみやすいと思います。 今回は、このAIRでHTMLとJavaScriptを使ったWebアプリをAIRに変換してユーザに配布するまでについて、書いていきます。 レジュメは↓このようになっています。 AIRアプリケーションを制作できる環境構築 ユーザに配布するまでの流れ アプリケーション記述ファイルの作成 AIRコンテンツの制作 AIRコンテンツの確認 電子署名の作成 インストールパッケージの作成 Webにアップする (インストールバッジの作成) お
Ruby（とRails）を担当している石原です。 ソーシャル「OSを入れた後にインストールする10のアプリケーション」(仮) を作る過程をレポートしています。 これまでのエントリーはこちら ↓ つくるぶガイドブログ: Ruby on Rails を使ってひとりでサービスを作ってみよう つくるぶガイドブログ: ひとりサービスの雛型をつくる(リキッドレイアウト、GetText、Acts as Authenticated) つくるぶガイドブログ: Rails で楽々ソーシャルブックマークの仕組みを作る つくるぶガイドブログ: Rails プラグイン acts_as_taggable_redux でタグクラウドを作ろう 今回は、登録した10のアプリケーションをベスト1からベスト10まで並べ替えたい、ということで、ちょっと趣向を凝らしてそれをドラッグアンドドロップで出来るようにしたいと思います。 A
2007/12/19追記。onExceptionオプションを追加しました。例外発生時の処理も変更しています。 2007/12/03追記。Opera9.24に対応しました。 以前書いたように、IE7ではローカル環境でAjaxが使えません。今まで使えたのに・・・。 拙作theater.jsはprototype.jsを使用しているとはいえ、Ajax関連は未使用です。けど、readmeでwikiのソースをそのまま使うためにAjax.Requestを使ってました。これがIE7だとまったく読めなくなります。 で、隠しフレーム通信に再登場願います。昔、Ajaxのなかった頃、ユーザーの注文に対して一日悩んだ挙句自力でこの方法を編み出すも、直後に持っていた本に載ってるのが発覚して凹んだことはすでになつかしい話・・・。 Ajax.Requestからの移行を容易にするために、インターフェースを似せてみます。 <
「つくるぶ特集 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回は 「お題６＞検索が楽しくな
「つくるぶ特集 Flash|Ajax ベストサイトセレクション20」：郵便番号から住所ライブラリと、クライアント側での描画のテクニック 2007年10月10日 「つくるぶ特集 Flash|Ajax ベストサイトセレクション20」：郵便番号から住所ライブラリと、クライアント側での描画のテクニック SEの竹村です。 スミマセン、あいだが開いちゃいました。 今回も「つくるぶ特集 Flash|Ajax ベストサイトセレクション20」のJavaScriptの技術面をフォローしていきます。 ▼Flash | Ajax ベストサイトセレクション20 http://www.tkrb.jp/modules/feature0/index.php?id=12 フォローを弊社のブログで行う理由は、「実際にどのように作るのか」という部分がある程度見えていた方がよいのでは？という話もあったのですが、Ajax ベストサ
「つくるぶ特集 Flash|Ajax ベストサイトセレクション20」：「Apple - iPod + iTunes」はどう実装されているか SEの竹村です。 私は先日から「つくるぶ -デベロッパー応援プロジェクト」(運営：株式会社リクルートメディアテクノロジーラボ)にてJavaScriptまとめノートを担当させてもらっていますが、同サイトの「Flash | Ajax ベストサイトセレクション20」という企画に参加させていただきました。 Flash | Ajax ベストサイトセレクション20 http://www.tkrb.jp/modules/feature0/index.php?id=12 この企画は、たとえば「ナビゲーションがカッコいいサイトは？」というお題に対してFlashとAjaxでそれぞれマッチするサイトを紹介し、競い合うというものでした。 つくるぶのポリシーを考慮して、「実際に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
