以前、Ajax通信で結果を出力する際XMLデータだったので、Content-Typeを「application/xml」か「text /xml」にしようと、RequestHandlerのメソッド(setContent)をいろいろ試したのだが、いつも「text/html */*」となり、なかなか思うように出力できなかった。あの時は、クライアント側で支障なく利用できたので、放り出してしまった。 今回、クライアント側のJavaScriptで扱いやすいように、JSONでデータを出力することにしたので、前回クリアできなかったハードルに再 挑戦することとなった。と言っても、CakePHPについは世界中で多くの情報が公開されているため、作業は検索と動作チェックだけだったけど (^_^;)。 お題は、「ユーザ番号をAjaxのGETで渡し、DBのユーザ情報をJSONで出力する」という、簡単なお話し。クライア
最近PS3とPSPを買いましたが、モンスターハンターをプレイするのではなくtorneで番組を録って見る用です。tanakaです。 今日はAjaxでよく書く処理を共通化させるコードを紹介します。 CakePHPでJSON出力する CakePHPでAjax処理を実装するとき、楽に実装できるように次のヘルパーやコンポーネントが用意されています。 JSON出力に使えるJavascriptヘルパー JSON用HTTPヘッダーの送出で使えるRequestHandlerコンポーネント Ajaxによるリクエストに対してJSONで応答するときは決まった手順で処理するだけなのでそこをひとまとめにしたいと考えます。配列を受け取ってJSONとしてController::render()するメソッドを考えます。必要な処理をAppController::_renderJson()にまとめてみました。 app/app_
マスターのメンテナンス機能やCMS系の機能を開発する際に、データの並びをユーザーが自由に設定できるようにしたいという要件はよくあります。 CakePHPとprototype.jsを使えば、ドラッグ＆ドロップでデータの並びを設定することが簡単に実装できます。 今回のサンプルはこちらで確認できます。 id, name（果物名）, position（position） の３カラムのfuruitsテーブルのデータを並び替えています。 方針 CakePHPではAjaxヘルパにドラッグ＆ドロップのメソッドが用意されていますが、普通にjavascriptを書いたほうが簡単に実装できますので、今回はあえて自前で実装していきます。 処理の概要としては、以下のような感じです。 １．レイアウト：headタグ内でprototype.js、scriptaculous.jsを読み込む ２．ビュー：並び替えの対象用の
jQuery UI API 1.8.6 の日本語リファレンスです。 ソースコードを読み、jQuery UI(公式サイト)のドキュメントを参考に解説しました。 また、全ての解説に、実際に実行できるサンプルを付けました。 jQuery UIとは jQuery UIとは、jQueryライブラリ上に構築された強力なユーザインターフェースライブラリです。 jQuery UIの構成 jQuery UI 1.8.6 は、大きく分けて「インタラクション」「ウィジェット」「ユーティリティ」「ビジュアル効果」3つのカテゴリに分けることができます。 それぞれ、次の機能が提供されています。 インタラクション 対話型ユーザインターフェースを構築するためのライブラリ ライブラリ説明対応ファイル
MopBox 複数パネル（デモには100以上のパネルも）の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
Dragdealer JS ドラッグを必要とする様々なUI実装に使える「Dragdealer JS」。 マウスを使ったドラッグ＆ドロップ操作というのは、スクロールバーや、スライダー等色々と存在しますが、そういった処理を一手に引き受けてくれるライブラリのご紹介です。 要素を動かした後のコールバック関数が指定できるので、ドラッグ＆ドロップ後の処理が自由に記述できてアイデア次第ではなかなか便利なUIが作れそうです。 横スライダー 縦スライダーで文字サイズを変更するサンプル 横スライダーで文字サイズを変更するサンプル ドラッグで移動させるスライドショー 予め用意されているUI実装をするのもよいですが、ドラッグ＆ドロップに関する新しいUIを思いついた場合にも参考にしてみるとよさそう。 関連エントリ IEにも対応！ブラウザ上でローカルにストレージを作るJavaScriptライブラリ「jStorage」
jQuery.upload: A simple ajax file upload plugin ajaxで簡単ファイルアップロードが可能なjQueryプラグイン「jQuery.upload」 同じページ内に生成したiframeへデータをPOSTすることで、非同期にファイルをアップロードが可能にするものです。 ファイルを選択すると即時にアップロードが開始するのが特徴 アップロードを完了すると次のように、ファイル名・サイズといったファイル情報が表示されるデモが公開されています。 ファイルアップロードを頻繁に行うようなケースにおいて、便利に使えるインタフェースが組み込めそうですね。 関連エントリ ajaxファイルアップロードに使えるjQueryプラグインいろいろ PHPでファイルアップロードの処理を超簡単にするクラス例「EasyUp」 ファイルアップロードの際に便利なFlash/JavaScri
下記ページを参考にさせていただきました。 “jQueryを使ったAjaxファイルアップロード” フォーラム – CakePHP Users in Japan David Golding Design Blog - 上記ページでは jQuery を使用してテキストファイルをアップロードしてテキストの内容を表示するというものですが、画像をアップロードしてアップロードした画像をフォームの下に Ajax を利用して表示するというのをやってみました。 jQuery 使用準備 jquery.js と jquery.form.js を app/webroot/js/ 以下に配置します。 アップロードするビューで上記 JavaScript ファイルを読み込むため下記コードをビューに追加します。 <?php echo $javascript->link(array('jquery.js','jquery.f
スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 2010年03月31日- AjaxScroll ? Ajax Scroll jQuery Plugin | blogfreakz.com スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 「MSN Image Search」は画面遷移なしに画像をガンガンよんでくれて、スクロールすれば次の画像を見れるためストレスが少なく、画像を探せます。 これと同様の機能を実現するためのjQueryプラグインのご紹介です。 デモページはこちら。スクロールすると次の画像を読んでいっているのが分かると思います。 Ajaxで次の内容を読むので、一回における転送量を少なくした上で、利用者には画面遷移なしの利便性を提供出来ると言うわけですね。 垂直方向だけでなく
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
jQuery: The Write Less, Do More, JavaScript Library jQueryチームは2009年1月14日(米国時間)、最新のメジャーバージョンとなるjQuery 1.4を公開した。jQueryはJavaScriptで開発されたAjaxアプリケーションフレームワーク。軽量で高速、さまざまなシーンで採用されるもっとも人気のあるフレームワークのひとつであり、将来のFirefoxでもデフォルトで採用されるとみられる。 jQuery 1.4では1年間に渡って取り組まれた開発の成果が取り込まれている。より開発を便利にする機能の追加、テストケースカバレッジを広げ包括的なバグフィックスの実施などがある。しかし、もっとも注目されるのは、実行速度をさらに高速化させた点にある。 主要メソッドの呼び出し回数比較 - jQuery 1.4 Releasedより抜粋 .css(
フォームのinputやtextarea要素にキーボード機能をつけたい。 そんなときにおすすめなのが、『jQuery Keypad』。ソフトウェアキーボードを実装するjQueryプラグインです。 ↑の例は、inputにフォーカスすると、キーボードが現れるタイプです。キーボードには、「閉じる」「クリア」「一文字削除」機能がついていて、「View」ボタンを押すと、入力した値を確認できますね。 ライセンスはGPL and MITになっているので、自由に使えそうです。 一度見てみてください。 jQuery Keypad LADでいろいろと購入。パーカとボーダーT、ジャケット、ニット帽など。全部かなり気に入りました。09 A/WのBLACK PAINTINGのものが30%OFF〜になっていたので、いいのが揃っていましたね。 パーカはほしかったやつだからめちゃうれしい。
Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」 2010年01月08日- jQuery 'Notify bar' Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」。 ページの上部にアニメーションされながら表示されるあの通知バーです。 時間がたつとアニメーションしながらスマートに消えてくれます。ページデザインがどんなものであろうと影響を受けません。 色を変えて、エラーモードにしてみたり、成功モードにしてみたり自由にできます。 実装は超簡単で、次のように初期化するだけです。 $(function () { $.notifyBar({ html: "メッセージ", delay: 2000, // 表示するミリ秒数 animationSpeed: "norm
jQueryをよく使う人に使えそうな７つのチートシートがまとまっています。 内容が被ってしまう部分もあると思いますが、７種類の中から自分が使いやすいものを組み合わせて置いておくと便利ですね。 ajaxブームの2005年から4年。すっかりjQueryが地位を確立してしまった感がありますね。 以下のエントリを参照してください。 7 jQuery Cheatsheets For Every Designer & Developer to Have | TutZone 関連エントリ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」 少ないスペース内でコンテンツをグリグリスクロールさせられるjQueryプラグイン「Flips」 jQuery用のGUIコンポーネントプロジェク
データベースをAJAXで直接編集できるテーブルがインスタントに作れる「DHX Quick Tables」が便利 2009年12月17日- データベースをAJAXで直接編集できるテーブルがインスタントに作れる「DHX Quick Tables」が便利そうです。 簡単にいうと、データベースとテーブルを指定すれば次のような、AJAXで即座に編集が可能なテーブルを作成することができます。 各カラムは「編集可能」や「読み込みオンリー」に指定することができて、好きなカラムのみ編集させることができます。 データの追加、削除、編集といったこともAJAXで実施することができます。 データベースを扱う部分の管理画面とかに使えるスクリプトを動的に作ることができてしまいますね。 利用には条件があって、id に auto_increment なint値を指定しているテーブルにしか使うことができません。 設置方法は、
PHPによるAjaxなどを活用したQ＆Aシステム「Qwench」がオープンソースとして公開されており、自分のサーバに設置してQ&Aシステムを構築することができます。 UIは次のようにスッキリ見やすいデザインです。 質問一覧や、まだ回答されてない質問、タグによる質問の分類や、質問に星をつけたりコメントしたり、回答したりと基本的なQ&Aシステムの仕組みは備えているようです。 質問画面 回答画面 質問一覧 簡単なものであればこれで構築してしまってもよいかもしれませんね。 以下のエントリを参照してください。 PHP StackOverflow Clone | anant garg
Firefox 3とFirebugで始めるJavaScript開発 第3回Command Line APIとその活用、各タブからのデバッグ方法 さて、前回はConsole APIの解説とそれを利用してのデバッグについて簡単な解説を行いました。 今回は、Firebugに実装されているもう1つのAPIである、Command Line APIや、各タブの機能を利用してのデバッグ方法について解説をしていきたいと思います。 Command Line API Command Line APIはFirebugのConsoleタブから利用することができます。ただし、グローバルですでに利用されている名前については利用できません。例えばPrototypeやjQueryが利用されているページのConsoleでは$()関数はそれらのライブラリのものが実行されます。 利用できるAPIは以下の通りです。 $(id
ページを遷移せずにサムネイルの一覧から画像を選んで拡大表示する「画像ギャラリー」は、jQueryを使えば比較的簡単に作れます。今回は、シンプルなデザインの画像ギャラリーの作成方法を紹介します。 画像ギャラリーの基本部分を作ってみよう 作成するのは、左側にサムネイル画像の一覧、右側にメイン画像を配置し、サムネイルをクリックするとメイン画像がページを遷移せずに切り替わる画像ギャラリー機能です。 はじめに、もっともシンプルな「サムネイルをクリックするとメイン画像が切り換わるページ」を作成します。 WebページのHTML／XHTML（以下HTML）とCSSは以下のようになっています。サムネイルの一覧部分はul／li要素でマークアップし、サムネイル画像はそれぞれ a要素で包みます。a要素のhref属性にはサムネイルに対応するメイン画像のURLを設定します。メイン画像は div#main内にimg要素
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く