MOONGIFT: � Growl風の通知をJavaScriptで行うjQueryプラグイン「jGrowl」
※ 画像は公式サイトデモより Ajaxを使っている場合、その結果通知をどのように行うかは困るところだ。せっかく画面遷移のない、格好いい仕組みを使っているのに、ただ「完了しました」だけではあまりにもおざなりだろう。 右上に通知が出る 各Webサービスとも、通知のウィンドウは色々な工夫が凝らされている。自分のサイトで格好いい通知をしてみたかったら、このような仕組みはいかがだろう。 今回紹介するオープンソース・ソフトウェアはjGrowl、JavaScriptで作られたGrowlだ。 GrowlはMac OSXをお使いの方であれば知っているであろう、通知を行うためのフレームワーク的アプリケーションだ。Firefox、Cyberduck、Skypeなどなど、大抵のソフトウェアで利用されている。通知メッセージは画面の右上に表示され、時間が経過すると自動で消えていく、非常に使い勝手の良いアプリケーション
YahooUSのユーザ登録フォームにニヤリとさせられた話
Flickrで使うこともあり、わりと取得することが多いYahooUSのアカウントですが、そのアカウント登録画面がなかなかシャレていたのでご紹介。 そもそもこのフォームはJavaScriptによって入力間違いによるエラーを逐一返してくれる使用になっているのですが、誕生日の部分に未来の日付を入れたときのみ、返ってくる警告文が変わっていて 「Are you really from the future?」（本当に未来の人ですか？） と気の利いた文章になっています。すごく細かいことではありますが…。 ユーザにやり直しを迫る機能なのですから、離脱率を低下させるためにもこれくらいのジョークがあったほうが良いのかもしれませんね。他にもあるかもしれないので、色々入力して試してみてください。 →→ Yahoo US のアカウント登録画面 Norio NAKAYAMA ブロガー、ライター、フォトグラファー、ア
FirefoxにGUIプロトタイピングの機能を追加するものすごい拡張「The Pencil Project」:phpspot開発日誌
FirefoxにGUIプロトタイピングの機能を追加するものすごい拡張「The Pencil Project」 2008年07月09日- Home - Pencil Project FirefoxにGUIプロトタイピングの機能を追加するものすごい拡張「The Pencil Project」。 Pencil Projectを使えば、予め用意されているGUI部品をキャンバスにドラッグ＆ドロップしてプロトタイプの画面イメージを作成することができます。 ボタンなんかも、ダブルクリックでキャプションを変えることができたり、VisualBasic、VisualC++などのアプリを使って画面デザインをしているイメージに近い操作感が実現できています。 アプリっぽい画面を作ってみましたが、超簡単です。 GUIのスタンドアロンアプリだけでなく、Webサイトにも使うことが出来ます。 HTMLを使って簡単に画面を作
たった6行でWebサイトのUIをガラッと変える
「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、本や雑誌をめくるような感覚で、Webページの本文を横にスクロールさせるJavaScriptライブラリだ。 「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、
bookreader.js
bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。 →プロジェクトのホーム (Google Code) - New!! →ダウンロード(ver 0.4.6) - 2009/04/18公開 ※ダウンロードの詳細については、こちらのページをご覧下さい。 まずは、このページで体験してみて下さい。キーボードの[→]/[←]キーが、「進む」あるいは「戻る」に対応します。画面上に表示される、半透明の▶/◀ボタンをクリックしてもOKです。使い方の詳細は「ヘルプ」を参照ください。 次期バージョンの開発状況 幸いにしてさまざまな方からフィードバックをいただきました。ありがとうございます。それを元に機能の絞り込みとWEBサイトへの「組込み方」について検討を行っています。まだ、実装の方針が定まった、という段階ですが次期0.8.x系のサ
垂直スクロールバーを左側にしたい！（CSSではなく、アクセシビリティの話） - Trans
垂直スクロールバーは一般的にユーザの右側にあります。でも、左側にあったほうがアクセシブルなときもあると思います。 文末ではてブのコメントに返答しました。（2008年6月15日1時35分） 肢体不自由者の操作の困難さ 一般的にページを縦にスクロールしたいときは垂直スクロールバーを使うことと思います。そして、そのページから1つ前のページに戻るときはブラウザやソフトウェアのツールバーにある「戻る」などをクリックすることと思います（使い慣れた人はキーボードかもしれません）。 そのときはこんな感じのマウスポインタの移動になります。 これをマウスを使って移動すれば一瞬の出来事です。しかし、マウスを使えない肢体不自由者の場合はそうではありません。例えば、下記のような支援機器を使う人の場合はどうでしょうか。 僕はこの数ヶ月の間にこういった支援機器を使う人たち（顎や舌でマウスを使う）にパソコンを教える機会が
フォームのインタフェースデザイン（2） - builder by ZDNet Japan
さあ、クラウドで解決しよう。 Google Cloud が「業務最適化」と 「イノベーションの実現」のヒントを提案 クラウドネイティブの実現 モダンインフラの構築・運用の課題解決へ コンテナの可能性を広げるVMware Tanzu 自社利用の知見・経験を顧客に提供 コンテナ活用を推進する日立製作所 VMware Tanzuを利用したモダナイズを伝授 セキュリティモデルは変わった！ クラウド活用、リモートワークはあたりまえ いま求められるゼロトラスト実現のために IT部門のDXはこれだ！ IT運用管理新時代における最適な運用管理 の現場作り オラクルスペシャリストが語る！ 多くの企業で利用されるオラクルDBの課題 アセスメントの重要性とコスト最適化 ネットワークもサービスとして使う いま企業ネットワークが受ける大きな制約 クラウドシフトで大きく変わる！ トップランナー対談：前編 成長を続ける
jsmap - JavaScriptによる都道府県入力補助
Q - なぜ、全国地図にしないのですか? 4つほど理由があります。 ポップアップが場所をとりすぎるから 現在、地図部分は185x120pxにおさめていますが、標準的なモニタ解像度ではこの辺が限界です。 キーボード操作時の押下回数を減らすため jsmapがフォーカスするのはSugarCRMなどのWEBアプリです。使い切りのWEBフォームと違い、慣れによるスピードアップが望めるUIである必要があります。 多言語対応のため 日本は47都道府県なので、かろうじて可能だと思う方もいるかもしれませんが、これがイギリス(現在製作中)とかでは100を超えます。 認知的限界のため これも重要。ぱっと見て探せる数というのは、15や20がせいぜいです。 ただ、上記の話とは別に、地方選択用の全国図はあってもいいと考えていますので、それは将来のバージョンで。 Q - 地図はもっと詳細化/単純化しないのですか? 詳細
iPhone向けWebアプリを作ろう（1/4） − ＠IT
Safari Web Content Guide for iPhoneを読み解きながら、iPhone／iPod touch上のWebブラウザのSafariで動くWebアプリを作成し、UIを最適化するコツを紹介します。 （編集部） Safari Web Content Guide for iPhoneを読み解く ネイティブアプリケーション開発を可能にするSDKが公開され、一層注目を集めている米アップルのiPhone（Applle Developer）。3Gへの対応がうわさされ、日本市場向けの発表も待たれますが、読者の中には、早速iPhone向けのアプリケーション開発にチャレンジしている人もいるでしょう。 しかし、ネイティブアプリケーションを作るにはそれなりにプログラミングスキルが必要ですし、完成したアプリケーションは米アップルが用意する「App Store」経由でしか配布できないといった制約
第11回 PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能
ノート感覚で気軽にメモや日記が書ける『Penzu』 | 100SHIKI
親しみやすいインターフェースの割にはしっかりした機能をもっているツールのご紹介。 Penzuはいわゆるオンラインのメモ帳である。リアルなメモ帳っぽいインターフェースが最大の特徴であろう。何をすればいいのかすぐわかる。 ただ、見た目はカジュアルだが、機能が充実している。画像をアップできたり、その画像にキャプションを付けられたり、文書にパスワードでロックをかけたりすることもできるようだ。 日本語も通るし、かわいらしいツールなのでこれで日記を付け始めてもいいかもしれない。こうした「一目で何をすればいいかわかる」アプリはいいですね。 管理人の独り言 『がしがし』 最近ブログやイベントばっかりやっていて、サイトを作れなくなっているのでは・・・とひそかに恐れていたのだが、全然そんなことなかった。うし、作るぞ、と気合を入れて作り始めたらわりと調子よくカタチになっていった。こういう制作物はいいですな。あま
404 Blog Not Found:javascript - 勝手に添削 - textareaの高さを自動調節
2008年05月20日14:15 カテゴリLightweight Languages javascript - 勝手に添削 - textareaの高さを自動調節 これはなかなかいいですね。 textareaのサイズを入力にあわせて調整するＪａｖａＳｃｒｉｐｔ (イラストdeブログ開発記) イラストdeブログの掲示板の使い勝手を高めるため、textareaサイズをJavaScriptで改行入力毎に大きくするコードを書いてみました Firefox 2, Safari 3, Opera 9で動作確認してあります。 イチ に 三 function resize_textarea(ev){ //if (ev.keyCode != 13) return; var textarea = ev.target || ev.srcElement; var value = textarea.value; var
ビープが鳴るのは仕様です - Radium Software
The compatibility constraints of your side effects: Beeping - The Old New Thing Windows XP では，起動直後の「ようこそ」スクリーンでスペースキーを押すと，ビープ音が鳴る。これは，無効なキー入力が行われた際のデフォルトの挙動であって，意図されたデザインではない。 Windows Vista では，「ようこそ」スクリーンの構成が変更されていて，スペースキーを押してもビープ音が鳴ることは無い……少なくとも，ベータ版まではそうだった。 Vista のベータテストの実施中に，あるベータテスターから「『ようこそ』スクリーンでスペースキーを押してもビープ音が鳴らなくなったのはなぜか？」という問い合わせがあった。 意図的に削ったわけではなく，仕様変更によって生じた些細な副作用のひとつに過ぎない。でもなぜそんなことを，
「史上最高のインターフェース、ベスト5」から使いやすい設計を考える | WIRED VISION
「史上最高のインターフェース、ベスト5」から使いやすい設計を考える 2008年5月13日 IT コメント： トラックバック (0) Charlie Sorrel Photo:『Flickr』の 「mikelao26」 現代のインターフェース開発者はユーザーのことを考えていない。少数の例外はあるが、六分儀や経線儀が登場するまで海で進路を決めるのはきわめて難しかったのと同様に、現代の小型機器はナビゲート不能だ。 それはなぜか？ 現代のデバイスの内部の働きは、実世界でわれわれが扱うものとは関連がないため、マイクロチップと人間の脳の隔たりに橋を架けるには、場当たり的な抽象化が必要になるからだ。 おまけに、大半の機器ではユーザー・インターフェースは後回しにされることが多い。こうしたことから、操作部分のレイアウトのひどい使いにくさのせいでいたるところで嫌われている、米Motorola社の『RAZR』の
Chumby(チャンビー) 初期登録UIの"おもてなし"が素晴らしい件について - キャズムを超えろ！
WebサービスとのペアリングUI ガジェットレビュー第3弾は2007年末ごろから話題のChumby(チャンビー)というデジタルガジェット。だが今日はガジェットとしての評価は横において、このデバイスの初期登録ユーザーインタフェースのすばらしさについて、日本の家電設計者に知ってもらいたく紹介することにした。 Chumbyを簡単に説明すると、WiFiでネットに繋がる「iGoogleを表示する、ただそれだけ」みたいな家電。詳しくは http://blog.bulknews.net/mt/archives/002230.html などを参照のこと。 iGoogleをイメージしてもらうとわかりやすいが、自分の好きなウィジェットを設定しないといけない。iGoogleの場合はPCで設定してPCで見るからわかりやすいのだが、ChumbyはPCじゃぁない。マウスやキーボードといった複雑な入力装置を持っていない
便利なモノにつきまとう不快さ：D・A・ノーマン氏にきく「配慮のある技術デザイン」
人間とコンピュータの相互作用の設計に通じた人物がいるとすれば、それはDon Norman氏だ。Norman氏はNorthwestern Universityの教授であり、「The Design of Future Things」の著者、またNielsen Norman Groupの共同創設者でもある。 Norman氏は、一流のテクノロジー企業と自動車メーカーに対するコンサルティングという現在の仕事に加え、大衆に訴えかける設計を行う能力で知られたAppleのAdvanced Technology Groupのバイスプレジデントも務めた。 Norman氏は忙しい中から時間を取り、CNET News.comのインタビューに答えて、デザイナーや開発者が正しく実践していることは何か、また見落としていることは何か、消費者は技術の将来に何を期待できるかなどについて考えを語ってくれた。 ―マウスが要らなく
サイト作りに使えるインターフェースのパターンが満載！『UI Patterns』 - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
ドットインストール代表のライフハックブログ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブの画面設計に使えるまとめ - DesignWalker
TechCrunch Japanese アーカイブ » OLPC 2.0：このeBookはすごい、正しい方向に向けた一歩だ
UIパターンいろいろ - DesignWalker