JavaScriptで簡単に独自の右クリックメニューを作成するライブラリ「RightContext」:phpspot開発日誌
MS、パケット情報の解析ツール「Microsoft Network Monitor 3」を無償公開 次の記事 ≫：PHPからjQuery（JavaScriptライブラリ）を簡単に使うことができる「PQuery」 RightContext JavaScriptで簡単に独自の右クリックメニューを作成するライブラリ「RightContext」。 ページで右クリックを押したときに、次のようにポップアップで独自メニューを出すライブラリが公開されました。 右クリックにメニューを組み込んでしまうことで、ツールによっては大変便利な使い勝手を提供できるはずです。 以下に実装方法を紹介。 (1) まずScriptファイルを読み込みます。 <script type="text/javascript" src="rightcontext.js"></script> (2) 次に右クリックしたときに独自メニューを表
地方議会サイトのユーザビリティ，もう少し何とかならないのか？
「日経BPガバメントテクノロジー」という雑誌の性格上，地方自治体の議会ページを参照することが時々ある。そこで常々気になっていたのは，議会サイトの使いにくさだ。トップページと各ページのナビゲーションメニューが統一されていないなど，どうにも使いにくいサイトが多いのだ。 そこで，都道府県の議会サイトについて，簡単に調べてみることにした。本来であれば，かつて日経BPコンサルティングが実施した「自治体サイトユーザビリティ調査」のように，きちんと網羅的に項目をチェックすべきなのだが，まずは取り急ぎ，都道府県議会の会議録検索のページについて「フレーム使用の有無」「議会ページから別ウィンドウにジャンプするかどうか」「議会の他のページと，メニューのデザインの統一が取れているか」の3点に限って，チェックしてみることにした。 会議録検索のページを選んだのは，私がこれまでいくつかの議会サイトを訪れた経験から，特に
iPod風の階層的なナビゲーションを実装する面白ＵＩサンプル「ColumNav」:phpspot開発日誌
ColumNav Documentation ColumNav is a hierarchical menu implementation utilizing Bill Scott's Yahoo UI Carousel component. iPod風の階層的なナビゲーションを実装する面白ＵＩサンプル「ColumNav」。 一見、アイコンのついたコンボボックス風ＵＩでiPodライクな次のようなナビゲーションを実装する方法. ファイルをクリックでファイルを表示し、フォルダをクリックでアニメーションしながら階層を移動します。 動きがなめらかでクールな印象を出すことが出来そうです。まさにiPod風。 Ajaxを使って無制限に階層を辿ることが出来たり、なかなか工夫されているようです。 ソースも次のようにクリーンになるので使いやすそう。 <ul id="basketball-list"> <li>
第1回 ユーザビリティでまず何を考えるべきか
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
小野和俊のブログ:それでも、はてなブックマークでなければならない理由
昨日、自分でブックマークをしたり、過去に自分がブックマークをしたりする時のユーザビリティの側面から、del.icio.us が結構行けてるので、ブックマークする時に自然に del.icio.us の使用頻度が高くなって行っている、という趣旨のエントリを書いたのだが、このテーマについてのまなめさんの記事について考えるところがあったので、エントリを書くことにした。 del.icio.us : b.hatena.ne.jp = 1:100 くらいで b.hatena.ne.jp の方が圧倒的に多い状況は変わらないと思う。 それは、はてなブックマークは、del.icio.us と比べ物にならない程、ブログのエントリやニュースサイトの記事と、それに対する他の人のコメントとをつなぐソーシャルな部分が強いから。 Web2.0 はマイクロコミュニケーションだと常々思っているのだが、 例えばある人がへぇと思
【勘違いでした】Windows Vistaの「Windowsフォトギャラリー」は酷すぎる【なので俺が酷すぎる】 :Heartlogic
【勘違いでした】Windows Vistaの「Windowsフォトギャラリー」は酷すぎる【なので俺が酷すぎる】 追記 以下の「上書き保存されてしまったらもう戻せない」は私の勘違いでした。この記事を書く前には上書き保存されたものは戻せないと思っていたのだけど、こちらでご指摘いただいた通り。 ■[PC] Windows VistaのWindows フォト ギャラリーはひどくないような 確認してみたら、確かに直せました。 上書き保存されてしまった ↓ 再度開いて、［修正］に入る ↓ ［元に戻す］で元に戻せる という仕組み。勘違いでお騒がせしてしまい、申し訳ありませんでした。 これは私の勘違いであり何か方策があるんだよよくマニュアル嫁やボケが！ ということになって欲しいと願っているのだけど、今のところの結論として、「Windowsフォトギャラリー」は酷すぎる。戯れにいじった写真を意に反して
80年代のAppleに学ぶUIの部品化とガイドライン ― ＠IT
インタラクションデザインパターン（1） 80年代のAppleに学ぶUIの部品化とガイドライン ソシオメディア 上野 学 2007/2/7 インタラクションデザインパターンのプロローグとして、その原則や秩序の歴史を見てみよう。20年前のAppleはどのように質の高いアプリケーション開発を目指していたか デザインが優れていれば、道具はより楽しいものになり、利用者はより生産的になるはずです。道具のデザインというものは大昔から私たち人間が取り組んできたことですが、近年急激にデジタルデバイスが多様化したことによって、インタラクティブな道具をデザインするための方法論は技術の進歩に追い付くことができなくなっています。利便性を高めるはずの新技術が使い方を複雑化する要因となり、利用者の混乱は増すばかりです。 最近私は携帯電話を買い替えたのですが、同じメーカーの3年前の機種と比べて、著しく使い勝手が悪くなって
フォームの入力エラーを吹き出しで教えてくれる JavaScript
■ フォームの入力エラーを吹き出しで教えてくれる JavaScript フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。 AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。 実際の動作サンプル とりあえず submit ボタンを押せば、全て理解出来るかと思います。 今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。 いつもの JavaScri
ヤコブ・ニールセンの考えをまとめたWebユーザビリティガイドライン::ホームページ制作::NPO法人しゃらく
ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン ユーザビリティのグル、ヤコブ・ニールセン氏の考えや調査を元にユーザビリティガイドラインを作りました。 デザインやコーディングをしている際に、このガイドラインを元に自分のデザインを一度チェックしてみるのもよいかと思います。 TRANS - ヤコブ・ニールセン氏の考えを元に、ユーザビリティガイドラインを作った。
ハイクオリティサイトのワイヤーフレーム分析 (1) 他サイトのワイヤーフレームから学べること
ワイヤーフレームとは「ページの大まかな見取り図」のことであり、この部分にはこのコンテンツ、というページ構成を示したものである。Web制作の案件では、比較的上流の工程でワイヤーフレームづくりを行い、その後にビジュアルデザインやインタフェース制作、(X)HTML+CSSページへの落とし込みの作業に入る。 コンテンツそれぞれをどこに配置するかという判断、いわゆる「情報アーキテクチャ」は、限られたスペースを有効活用するのに重要なだけでなく、ユーザービリティ(使いやすさ)やファインダビリティ(発見しやすさ)にも大きく関わってくる。ユーザー中心デザイン(User-Centered Design: UCD)という言葉を借りなくとも、Webサイトはユーザーに使ってもらってはじめて意味があるのであって、運営者とユーザー双方の満足が、車の両輪のようにサイトを動かし、発展させるのである。 特にトップページのワイ
3Dデスクトップ環境「Project Looking Glass」を試してみた － ＠IT
2007/01/11 コンピュータの操作環境として、2次元の「デスクトップ」というメタファーが登場してから20年以上が経過している。画面を架空の机として扱い、そこに電卓やノートパッドを必要に応じて配置する。本格的なGUI環境の普及をWindows 95以降と考えるとしても、このユーザーインターフェイスには、10年以上も本質的なイノベーションは起こらなかったことになる。 一方でゲーム用途にドライブされる格好で、3Dアクセラレーション機能は長足の進歩を果たした。しかし、ゲームユーザー以外には無用の長物となって久しい。 これを背景として、最近はデスクトップを3次元空間として扱う、3Dデスクトップ環境の実験的プロジェクトや実装が増えてきている。われわれが仕事をしている机というのは3次元的で、書類を立てて縦に並べることもできれば、上下に重ねることもできる。下になって微妙に色だけが見えている書類は、処
第10回 文字のサイズとブラウザの違い 〜「はてなダイアリー」で起こった問題点：ITpro
今回は，先日筆者の勤務するはてなのサービスの一つである「はてなダイアリー」で起こった，使いやすさに関する問題を取り上げてみたいと思います。使いやすさの向上のためにデザインを変更したところ問題が発生し，それをプログラミング言語であるところのJavaScriptを使って解決した，というお話です。 その問題とは，「文字の大きさ」に関するものです。 ブラウザには，文字のサイズを変更する機能が用意されています（図1）。例えばInternet Explorer（IE）なら「表示」メニューの「文字サイズ」から「最大」「大」「中」「小」「最小」の五つの段階を選ぶことができます。Firefoxも「表示」メニューの「文字サイズ」から選ぶことができますが，「大きく」「小さく」というメニューになっており，より自由に表示サイズを変更することができます。 図1：ブラウザでは文字サイズを変更できる ちなみにOperaは
ぼくはまちちゃん！(Hatena) - インタラクティブデザイン論
本が山盛りとどいちゃったよ！！ 最初は、ちょっと PHP の勉強しようかな！と思って、 Amazon で良さそうなの選んでただけなんだけど、 なんだか、どんどんお奨めされちゃって、どんどんクリックしていくうちに いつのまにやら DS用のゲームまで…！ (これ結構おもしろくていいけどね！) そんな中で、ぱらぱらっと読んでみて、いちばん面白そうだった本がこれ！ クロフォードのインタラクティブデザイン論 ちょっと難しそうな題名だけど、翻訳も上手で読みやすいし、 ぼくでも楽しく読めそうな本ですよ！ あ、内容は、ユーザーインターフェースについての色々なこと！ ちょこちょこっとページめくりながら引用してみますね…！ 第4章 「考える」 アルゴリズム 先ほどの簡単な例は、コンピュータプログラムではなくアルゴリズムです。 (中略) では、誰がアルゴリズムをデザインするのでしょうか？ 今までは、コードを記述
100種類のデータ表現手法を学べる『aPToVM』 - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
ドットインストール代表のライフハックブログ
第9回 どうすればユーザー登録してもらえるか：ITpro
この連載では，エンジニアの視点から使いやすさを考えています。今回はユーザー登録画面などに代表される，フォームを使った入力画面について考えてみたいと思います。 なぜこのテーマを選んだかというと，フォームを介して利用者からデータを受け取って処理をして返すという一連の処理が，ウェブサイトのバックエンドの処理やデータ形式などによって変化しやすく，プログラマやエンジニアの作業がもっとも使いやすさと関係しやすい分野ではないかなあ，と思っているからです。こうした部分はエンジニアが使いやすさに寄与しやすい部分であり，もっと言えば，使いやすさを向上させるに当たって，エンジニアにしかできない事柄がたくさんある部分だってことになると思います。 今回は「ユーザー登録ページ」を例に，フォームにおける使い勝手を考えていきたいと思っています。その理由としてまずは，筆者が勤務する株式会社はてなにもユーザー登録画面があり，
最速インターフェース研究会 :: ライブドアのテクノロジーセミナーでしゃべってきました
昨晩はライブドアで開催されたテクノロジーセミナーで「Technologies for UI」という題でプレゼンをやりました。 発表資料はpdfかhtmlで公開する予定ですが、とりあえずテキストだけ先にアップしておきます。 http://ma.la/files/livedoor/seminar2006/seminar.txt プレゼンツールがFirefox専用だったりするので、これも少し手直しして公開予定です。 こういう機会があるたびにプレゼンツールを作ってるような気がします。 ---- 追記:12/15 ライブドアのtechblogの方に発表資料をアップしました。 http://blog.livedoor.jp/techblog/paper/ldtech2006/ 上下カーソルキーでページをめくれます。
ウノウラボ Unoh Labs: ユーザビリティって何だろう？（基本のまとめ）
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論 [絵文録ことのは]2006/11/25
このブログの本文の横幅は、かなり狭い。それはなぜか。 結論から言えば、「ブラウザで見るときの実際の横幅」と「印刷可能な横幅」の二つの要素が大きな要因となっている。画面そのものはかなり広くても、実際に見るサイズ、そして印刷したときにはみ出ないサイズというのは案外小さい。 このことを実際の統計数値を交えて書いてみたいと思う。 ■画面の広さ 以前の旧デザインでは、横幅を指定せず、可変幅で表示していた。たとえばここなどを見てもらえばわかるが、ブラウザを小さくすればそれに応じてサイズが縮まる。したがって、どんな幅のブラウザでも（狭すぎると困るが）はみ出ることはないし、また、印刷するときにもきちんと印刷される。画面上で見るときの「横スクロール」というのは想像以上に鬱陶しい。 だから、可変幅というのは、ある意味、無難な正解といえる。 ■一行の長さは40字前後にしたい しかし、画面そのものがかなり大きくな
シニアはログインでつまづく？！ - Trans
最近、シニア向けのあるWebサービスを構築している。その中で、シニア（特に、団塊世代、もしくはそれ以上）の方が、どういったところでWebサービスにてつまづくのかが少し分かってきたので、自分の備忘録も兼ねてメモしておく。 先に言っておくと、シニアはまずログイン、もしくは新規登録でつまづく。「中に入れない」「何かパスワード間違えているみたいなんだけど」そういった質問が、どんどん寄せられる。このWebサービスを構築する前に、できる限りネット上でシニアのネット行動特性みたいなものは調べてみたが、その多くは「ログイン後」、もしくは「ログインする必要がないサイト」のことだったと、今更ながら気が付いた。例えば、 ユーザビリティ研究所: シニア向けウェブサイト構築のための10のポイント 使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から) そう、シニアのネット上の行動特性はある程度研究が進ん
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
COULD：Webデザインに関する 15 の調査結果