Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン Ajaxやタブクリックなどのイベントでもブラウザの「戻る」「進む」を有効にすることができるjQueryのhashchange eventというプラグインを紹介します。同じような効果を得られるスクリプトより断然使いやすいのでおすすめです。 使い方はとても簡単で windowにhashchangeイベントをbindするだけです。 $(window) .hashchange(function() { Hoge(location.hash.replace('#', '')); }); // ハッシュフラグメントが変わったときにHoge()を実行する $(window).hashchange(); // Windowロード時に実行できる Ben Alman » jQuery hashc
現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoader」 2010年04月12日- prettyLoader | Stphane Caron ? No Margin For Errors 現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoader」 通常、ローディング中というと、ボックス要素の中身にローディングするGIFアニメーションなんかがはいっていたりしますが、prettyLoaderはマウス追従型のローディング表示実装用ライブラリです。 Windowsでいう砂時計みたいな扱いですが、どんなページにも違和感ない実装が可能で、応用範囲が広そうです。 次のような、比較的古いブラウザにも対応しているようです。 Firefox 2.0+ Safari 3.1.1+ Opera 9+ Internet Explo
Googleの検索結果のように、長いリスト項目を複数のページに分割して表示することを「ページング」（Paging）と言います。ページング処理では下部にナビゲーションリンクを配置し、クリックされた番号のページを表示しますが、ページ全体をリロードして切り替えるには時間がかかります。そこで今回は、スムーズにページングさせるためにAjaxを利用して更新が必要な部分のみを外部ファイルから読み込んで書き換え、ユーザーのストレスを軽減する方法を紹介しましょう。 データのHTMLを用意する 今回は、数が多い商品情報のリストを複数のページに分割して表示するサンプルを作成します。はじめにAjaxで読み込むコンテンツデータを用意します。Ajaxは、XMLやJSON（JavaScript Object Notation）、テキストなどさまざまデータを扱えますが、今回はもっとも手軽なHTMLを使いましょう。コンテン
(smt) simple mouse tracking // home ユーザのマウスの動きを保存して再生できるPHP+Ajaxな仕組み「smt」がなかなか興味深いです。 次のように、マウスを移動した軌跡を描画してくれ、利用者のマウスの動きを元にユーザビリティ向上に貢献できそう。 smtを使ったデモムービー集ページ mousemove イベントを使って座標をトラッキングさせてデータをサーバに保存、あとはデータを元にタイマーを使って描画するという仕組みのようで、なかなか面白いですね。 アクセスが多いとデータ量も結構なものになってきそうなので、自前でやるしかこうしたデータをちゃんと見ることは難しいのかもしれません。 このsmt は、ダウンロードしてサーバ設置型なので、遠慮なく使えますね。 関連エントリ Yahoo!のアクセス解析ツール「Yahoo! Web Analytics」 ケータイ用高機
SWFUpload jQuery Plugin : Adam Royle Flashを応用して便利にファイルアップできる「SWFUpload」のjQueryプラグインが公開されています。 SWFUpload を使えば、複数ファイルのアップロードが行え、アップロードの進捗もプログレスバーで確認できて、通常のブラウザベースのアップロードとは格段に使い勝手がよくなるのはご存知の通り。 SWFUploadの動作を実際に確認してみる場合はこちら SWFUpload を jQuery方式で関数を呼べてしまうので、jQuery な方はこれを使ったほうが使いやすいかも。 次のように初期化ができ、簡単です。 $('.swfupload-control').swfupload({ // BEの設定 upload_url: "../upload.php", // 送信先URL // ファイルアップロードに関する
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
最近はWebDAVも普及しつつあり、HTTPを使ったファイル管理を行うケースも増えてきた。WindowsやMac OSXなどのクライアントからであればWebDAVをそのまま使うのが良いが、他のクライアントからでは接続が難しい。そのときに便利なのがWebベースのファイル管理ソフトウェアだ。 インタフェースの優れたAjaxファイルマネージャ Webブラウザからの操作は難点も多いが（特にファイルアップロード）、簡易的なファイル操作であれば十分可能だ。その一つとしてMollifyを紹介しよう。 今回紹介するオープンソース・ソフトウェアはMollify、GWT（Google Web Toolkit）を使ったAjaxファイルマネージャだ。 MollifyはPHPベースで作られている。インタフェースにGWTを使うことで、まるでMac OSXのようなインタフェースを実現している。データベースは不要で、設定
Jones氏は、Ajaxを使ったタブ切り替えなどインタラクティブにコンテンツを提示するUIを用いた際の、ユーザビリティやビジネス効果(ユーザの説得)といった観点での注意点を紹介しています。以下では、その中から2つの事例をご紹介いたします。 ユーザビリティへの配慮 コンテンツを参照しにくくしていないか？ Ajaxにより、ページ遷移をしないコンテンツの見せ方が普及しつつあります。よく見られるケースとしてタブ形式のインタフェースがあります(図1)。このタイプのUIでは、素早いコンテンツの切り替えができる反面、切り替えたコンテンツはページとして存在しないため、後からユーザが参照しづらいデメリットが生じることをJones氏は指摘しています。例えば、ユーザがあるタブのコンテンツを友達と共有したいと思っても、そのコンテンツはページとして存在しないため、リンクを送っただけでは友達は別のコンテンツを見てしま
入力フォームについて、最近ではAjaxを用いることで、「送信」ボタンをクリックする前にエラーチェックをする手法が使われるようになっています。 今回はリアルタイムでフォームのエラーチェックを行う場合の注意点について考えてみます。 あまり良くない例：Remember the Milkの登録画面 http://www.rememberthemilk.com/signup/ ユーザ名を入力する欄では、入力と同時にエラーチェックが行われるため、多くの場合1文字目からエラーが表示されます。 2文字目を入力すると即座にエラーメッセージが更新されます。 ユーザが当初から自分のユーザ名として考えていた「bebittaro」を入力し終えると、利用可能である旨のメッセージが表示されます。 上記は入力に対しリアルタイムでフィードバックを返すことで誤入力を避けようという工夫ですが、ユーザが入力を終える前にエラー表示
平成10年卒業生のみなさんへ 卒業生の名簿を作ります。以下の項目を入力して送信してください。 名前： 電話（携帯）： メール： 郵便番号： 住所： 今年の夏頃（7〜9月）に同窓会を開きたいと思います。希望する日程を選んでください。 希望日程１： 希望日程２： 希望日程３：
busy.js (loading indicators) busy.js 1.0 allows you to add/remove loading indicators to html elements on your webpages 指定したHTMLエレメントをローディング中にする際に便利な「busy.js」。 例えば、div 要素全体に次のようにローディング中にすることが出来ます。 デモはこちら - 要素をクリックでローディング状態にすることが可能 オーバーレイで要素自体の色も変わるため、ローディング中であることがよく分かるようになっています。 関連エントリ グレーアウト表示ライブラリ:glayer.js 様々なLightBox風ダイアログを超簡単に作れるJavaScriptライブラリ「Control.Modal」
Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト：パターンとライブラリで作るAjaxおいしいレシピ（4）（1/4 ページ） script.aculo.usの一歩進んだテクニック 今回紹介するscript.aculo.usは、以下のような機能を提供するAjax（JavaScript）フレームワークです。 ビジュアルエフェクト ドラッグ＆ドロップ DOM操作 オートコンプリート スライダー 単体テスト prototype.jsをベースのライブラリに使用しているので、prototype.jsとともに利用したことがある方も多いのではないでしょうか。 今回はscripot.aculo.usのエフェクト機能に焦点を絞り、より突っ込んだ使い方を紹介していきます。 ■ Ajaxの弱点を補う「エフェクト」の必要性 Ajaxを活用することで、画面全体を再描画せずに画面上の一部分のみを変更し
はじめに AJAXは、デスクトップアプリケーションと同じくらい対話性と応答性のよいリッチなWebアプリケーションを開発する手段として、多くの開発者に採用されてきました。AJAXでは、WebのUIを異なるセグメントに分割します。ユーザーはあるセグメントで操作を実行し、その操作が終わらないうちに他のセグメントで作業を開始することができます。 しかし、AJAXには大きな欠点があります。戻る、進む、ブックマークといった標準的なブラウザ機能が無効になるのです。AJAXアプリケーションの開発者は、ユーザーをAJAXの欠点に無理やり順応させるのではなく、アプリケーションを従来のWebインタラクションスタイルに合わせ、次の機能を提供するようにしなければなりません。［戻る］／［進む］ボタンが機能するようにして、エンドユーザーが直観的なやり方で履歴ページ間を移動できるようにする。ユーザーがブックマークを作成で
ページ上で動かしたマウスの軌跡を記録し、再生することが可能になるJavaScriptやAJAXなどの組み合わせデモが公開されています。実際に試してみればわかりますが、記録している際には、特に記録されていると気づくような要素は全くありません。 応用としては、広告バナーのクリックについてアイトラッキング（目の動きを追う）の代わりに、マウスの移動する軌跡を記録して「マウストラッキング」が可能になったり、あるいはAJAXをフルに駆使したサイトにおけるユーザービリティの記録による操作の改善、あるいは各種スパイ行動などにも使えます。 実際のデモは以下から。 Record mouse movement using Javascript and AJAX http://pure.rednoize.com/movelogger/ 上記ページで四角いキューブの辺の周囲をマウスでなんどかぐるぐると回転させてみた
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます 今回は書式設定が可能なテキストエディタRich Text Editorを取り上げる。これはベータ版なので、対応するブラウザや利用条件に配慮した上でご利用いただきたい。また、実行環境となるWebブラウザはJavaScriptを実行可能にしておかなくてはならないのは前回と同様だ。 コンポーネントの概要 ブログなどの投稿サイトでも、投稿用の文章を入力する画面でフォントの大きさや色を変えるなど、ワープロソフトに近い操作性を有するところが多くなっている。Rich Text Editorは、そのような入力画面を提供するコンポーネントだ。 画面の操作 画面の上3分の1のグレーの部分がテキストに対する設定を行うためのボタンで、右上の-をクリックすると表
去る8月10日、銀座のアップルストアにて「CSS Nite Vol.20」が開催された。 テーマは米ヤフーが無償で提供しているJavaScriptとCSSのライブラリ「Yahoo User Interface Library」。「YUI」の名で知られる、このライブラリに関して、米ヤフーのYUIチームエンジニアリングマネジャーであるエリック ミラグリア氏が来日して講演した。 編集部では、独自に日本語向けのYUI CSSに関する情報も入手したので、イベントの様子と併せてレポートしよう。 結論から言うと、YUIライブラリは非常によく作り込まれているので、どんなウェブサイト開発にも利用できる便利なもので、ぜひ使ってみてほしい。無償で利用できるうえに、利用条件としても、再配布時に著作権表示をするだけいい「BSDライセンス」で提供されているので、商用サイトで使う場合でも、ソースコードを公開する義務が生
スライダーでブログの過去記事を検索できるインターフェース August 23, 2007 5:30 AM written by Gen Taguchi Save the assistants.comのブログのインターフェースがちょっと気になります。過去記事へのアクセスをスライダーで行うことができるのです。 ↑ こんな感じ。Ajaxな感じで、スライドさせると動的にページをロードしてくれます。 「次のページ」「1 > 2 > 3 >」といったインターフェースより直感的でよいですね。 » save the assistants Info: ナビゲーション | 固定リンク | コメント (0) | トラックバック (0) | ↑
操作感はAJAXで、画像などはCSSで実装されたわかりやすいプログレスバーです。進捗状況などの表示が簡単にできます。また、クリックする度に10％増やしたり、あるいは減らしたりといったことも可能。いろいろなウェブアプリの開発などに応用できそうです。 詳細は以下から。 WebAppers Simple Ajax Progress Bar with CSS by WebAppers ライセンスはMITライセンスで提供されており、以下から実際に試してみることができます。 Demo http://www.webappers.com/progressBar/ 実際にダウンロードしてみると、prototype.jsを使っており、使用するイメージ画像は2種類。その組み合わせでバーの増減を表現するとは、なかなかいい発想。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
