ふつうのformをつかいたい - はまちや２ - ニコニコ超会議2012
こんにちはこんにちは！！ はまちや２ (@Hamachiya2) ブロガー、クラッカー。特技は洗濯、趣味は破壊、苦手なことはプログラミング。 WEB+DB PRESS のお便りコーナー担当。 「はまちちゃん」とかで適当にググってください。 無料で プレミアム機能を 使う方法 見つける時間がありませんでした。 何話そう？ プログラムは苦手だし… セキュリティとか興味ないし… そんなわけで普通のことを話します。 本日のテーマ： 『ふつうのformを使いたい』 <form> 電話番号はハイフン抜きの半角で…（はいはい） フリガナはカナで… (カナで名前を学習してしまうのが嫌だけど…) 郵便番号は前と後ろに分けて… (めんどくさいなぁ…) 住所は全角で… (あーはいはい…) … (できた！) (これで送信、と…) ※エラー：住所を正しく入力してください (え、なんで！？) ※住所は全角で入力してく
スマホUI考3 ～ ジェスチャ入力について | fladdict
スマホUI考１ 〜 ボタンについて スマホUI考２ 〜 フィードバックについて スマホといえばジェスチャー入力、ジェスチャーといえばスマホ。そんなジェスチャーについて、つれづれと。 でも個人的には、ジェスチャーはほとんど要らないと思う。 ジェスチャ全般 ・ジェスチャは補助操作。メイン操作ではない。 ・ボタンでできる操作をプラスアルファで、ジェスチャでもできるようにする。 ・なぜならジェスチャの有無は視覚的にわからない。 ・ユーザーがジェスチャを理解しなくても操作できるのがよい。 ・またジェスチャー時に、画面のかなりの部分が指で隠れる。 ・極論ジェスチャなしでもアプリがリリースできる状態なのがよい。 ・つまり予算や工数があまったときに入れよう。 タップ ・マウスクリックではなくタップ。 ・ボタンの精度は指のサイズに依存する。 ・細かい座標指定はできない。 ・ロールオーバーがない。 ・触ってみ
100℃を巡るUI - L'eclat des jours(2010-01-20)
_ 100℃を巡るUI ガスレンジを変えたら、これまでおれが培ってきたガスレンジの常識と違い過ぎる。たぶん、それは良いことなのだろうが、どうにも違和感がある。 早い話、安全側に倒してあるということなのだが、お湯を沸かして沸騰したら止まる、中華なべをコンロから浮かせてかき混ぜていれば止まる、ガンガン強火で煮詰まらせようと（というか、アルコールを飛ばそうとしたりとか）していても勝手に弱火に変わってしまうとか。っていうか、まさにそういうことをしたいがために、IHコンロではなく、ガスコンロを選んだのだ。これではガスにした意味が、炎を眺めて原始の感覚を揺すぶるだけの意味しかないではないか。 もっとも、どえらく便利になっている点もあって、トロ火で5分なんていうのは、タイマーを設定すれば勝手にそうやってくれるから、今まで使っていたキッチンタイマーがほとんど不要になったり。というか、ガスコンロにタイマーが
iPhone向けサイトのユーザビリティ最適化でチェックしておきたい項目まとめ
iPhoneを始めとするタッチパネル＆フルブラウザ搭載のスマートフォンの普及が進んでいる。iPhoneの出荷台数は世界で3000万台、日本国内に関して公式な発表はないが200万台を超えていると推測されている。今後はWindows Mobile端末の進化やAndroid携帯電話により、このスタイルの携帯端末の利用者がさらに拡大していくことが予想される。 今回は、こういったタッチパネル＆フルブラウザ搭載のスマートフォンからのウェブサイト／サービスのユーザビリティについて、主にiPhoneを題材に考えてみよう。 iPhone対応は形式にとらわれず「ユーザー中心」視点で iPhoneからのウェブ利用には、従来の携帯電話と同様の「携帯性の高さ」「位置情報との連動」などに加え、 従来の携帯電話と比べて画面サイズが広い 端末の処理能力が高く、アプリでのサービス提供の自由度が高い 独自の操作（画面をつまむ
タブUI詳解
タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。 Module Tabs in Web Design 以下、その意訳です。 ※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。 タブのみを指す場合は、「タブ コントロール」としています。 はじめに 1. タブの構造 2. タブはいつ使用するのか 3. タブのユーザビリティとベストプラクティス 4. タブのアクセシビリティ 5. タブの拡張 6. タブの実装集 7. タブを実装するためのチュートリアル集 8. タブを実装するスクリプト集 はじめに タブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。 パネル
Googleのトップページを開くと毎秒100回JavaScriptが実行されるよ - 射撃しつつ前転 改
FirefoxがCPUを常に15%ぐらい食うのが気になっていたので調べてみたら、Googleのトップページを開くとものすごい勢いでJavaScriptが実行されることがわかった。具体的には、var k=t.value;k!=h&&X(0);h=k というコードが毎秒100回実行されている。このせいで、自分の使っているPCだと、Googleのトップページを開くだけでCPU使用率が2%ぐらい上がっているようだ。Firefox特有の問題というよりは、ウェブページ側の作り方に依るものみたいだ。たぶん他のブラウザでも問題は変わらないだろう。 Googleのトップページの場合、コードを調べてみた限りでは、原因はどうも検索候補の自動補完用のコードみたいだ。現在の入力文字列が過去の記録と違ったら補完の提示をやり直す、みたいなことをやっているように見える。 HTMLではテキストボックス内のテキストが変更され
デザイニング・ウェブナビゲーション
TOPICS Web , Design 発行年月日 2009年05月 PRINT LENGTH 388 ISBN 978-4-87311-410-1 原書 Designing Web Navigation FORMAT PDF ウェブサイトが提供する情報やサービスを、ユーザーが適切に探し出し、利用できるようにすることは、ウェブサイトを構築する上で非常に重要な目標です。本書は、使いやすいウェブサイトの構築において、根幹をなすテーマであるナビゲーションのデザインについて、理論から実践まで、豊富な実例と共に解説した書籍です。 本書は、3部構成となっており、まず第1部ではウェブナビゲーションの概要と、ナビゲーションをデザインする上で考慮すべきポイントを学びます。続いて第2部では、評価、分析、アーキテクチャ、レイアウトなど、最適なナビゲーションを構築するためのフレームワークを解説します。さらに、第3
WEB+DB PRESS Vol.49 WAI-ARIA: Days on the Moon
現在発売中の WEB+DB PRESS Vol. 49 にて Accessible Rich Internet Applications (WAI-ARIA) に関する記事を書かせていただきました。2009 年は Web アクセシビリティの年になるという噂をどこからともなく聞きつけてこのテーマにしたのですが、ちょうど WAI-ARIA 1.0 の最終草案も公開されよいタイミングになったのではと勝手に思っています。 WAI-ARIA とは何なのか、詳しいことは雑誌記事を参照していただくとして、簡単に言えば JavaScript で構築した RIA を機械的に認識するための仕様です。たとえば JavaScript でこったボタンを作ったとしましょう。利用者がどうやって「それがボタンである」ということを認識するかといえば、「周りから浮き出ていてマウスカーソルを乗せると色が変わる」といった感覚によ
第8回 業務アプリケーションに最適なUI／UXを考える（1/2） - ＠IT
本「VB研」のオフライン・セミナーである「VB研公開ゼミ」だが、その第8回が昨年末、東京・千代田区のベルサール九段にて行われた。本稿は、その概要と、ゼミのメイン・イベントであるパネル・ディスカッションの内容を伝えるものである。 今回の公開ゼミのテーマは「次世代業務アプリはどうなる？」。WPF（Windows Presentation Foundation）やSilverlight 2（以下、単に「Silverlight」と記述）などの最新技術の登場で、現在の業務アプリケーションは今後どのように変わっていくのか、変わっていくべきなのか。ユーザー・インターフェイス（UI）についての最新技術を学びつつ、ユーザー・エクスペリエンス（UX）の向上について考え、業務アプリケーションの将来の姿を議論するのが今回の目的である。 開催は土曜日の午後であったが、会場には定員をはるかに超えるたくさんの方にご参加
ハンディがあっても利用できるページづくり：Webアクセシビリティについて
様々な環境に配慮して、どんなユーザーでも使いやすい方法で提供されている情報はアクセシビリティ (accessibility) が高いと言います。アクセシブルなコンテンツづくりとは、ウェブでのコミュニケーションに誰もが参加できるよう設計すること。情報の利用者であると同時に提供者でもある私たちは、常にこの点に配慮していきたいものです。 なぜアクセシビリティか コミュニケーションとしてのアクセシビリティ：WCAG 2.1 1. 全ての機能と情報が誰にとっても認識可能であること 2. 全ての機能は誰にでも操作可能であること 3. コンテンツの内容、および機能が誰にとっても理解可能であること 4. 将来にわたってコンテンツの力を最大限に発揮できる技術を用いること 元祖ガイドライン：WCAG 1.0 アクセシビリティのJIS規格（2004年初出時の情報） JISの改定：X 8341-3:2010と20
フォームとアクセシビリティ -- ごく簡単なHTMLの説明
フォームはテーブルと同様、視覚的な表現を伴わないと理解しにくいところがあります。HTML4.0では、フォームの各要素とラベル（説明的な名前）を結びつける手段や、要素をグループ化する手段が提供されました。これらを使うとフォームの内容を論理的に構造化でき、スタイルシートとの組合せで自在なデザインも可能になってきます。まだ未対応のブラウザが多い要素ですが、アクセシビリティに配慮したページづくりのためにも、このような機能があることをぜひ理解しておいてください。 目次： コントロールにラベルを付ける コントロールをグループ化する メニュー項目のグループ化 キーボードによる項目移動 取り上げる要素： label fieldset legend optgroup コントロールにラベルを付ける フォームの入力コントロール（テキストフィールドやメニューなど）は、name属性を持ちますが、それは送信データに名
第32回 リダイレクトの正しい使い方とは
あるページ（URL）にアクセスすると，自動的にほかのページにジャンプするリダイレクトは，ウェブサイトを構築するうえで非常に重要な仕組みです。しかし，ユーザーの知らないうちにページの移動を行うため，ユーザーを戸惑わせることにもつながりかねません。ユーザーを惑わせないためにはどうしたらいいのか，どういうリダイレクトならユーザーの感覚に合致するのか，ということについて考えて行きましょう。 リダイレクトをして，ほかのページにユーザーを導くという手法は，様々な利用方法があります。例えば，ページのURLを移動したり，サイトごとどこかに移動したりした場合に，移動前のページにアクセスしてきたユーザーを新しいサイトに自動的に移動させたり，アクセス解析や広告のCTR計算のためにクリック数などを取得したりする目的で使われます。携帯からのPC向けのページにアクセスしてきたユーザーを，携帯向けのページに移動させる利
Expired
Expired：掲載期限切れです この記事は，ロイター・ジャパンとの契約の掲載期限（30日間）を過ぎましたので本サーバから削除しました。 このページは20秒後にNews トップページに自動的に切り替わります。
WAI-ARIA（日本語訳）：日立のユニバーサルデザイン
WAI-ARIAとは、Web Accessibility Initiative-Accessible Rich Internet Applicationsの略で、W3Cが現在、勧告に向けて策定作業を進めているリッチなインターネットアプリケーションのアクセシビリティに関する仕様書のことです。JavaScriptやAjaxなどを使用した動的なコンテンツは、スクリーンリーダーやキーボード操作では利用できないことがあります。WAI-ARIAは、そういった問題を解決すべく、W3CのProtocols and Formats ワーキンググループ (PFWG) において策定されています。 WAI-ARIAの関連文書群の原文は英語ですが、日本におけるこの仕様への理解と普及が進む一助になればと、日立が社内用に翻訳した文書を日立のユニバーサルデザインサイトで公開します。Webサイト、Webシステムのアクセシ
安藤日記
安藤日記 安藤日記：デジタルガジェット好き「安藤幸央」の日々のメモ ( yukio.andoh@gmail.com ) [ http://twitter.com/yukio_andoh ] SIGHCI: 第126回ヒューマンコンピュータインタラクション研究会 SIGHCI http://www.sighci.jp/2007/11/200711121000.html 1) Fabcell - Fabric Element http://idl.sfc.keio.ac.jp/project/fabcell/ 2) 視覚認知に基づくインタフェースデザインに関する考察 Webページの視覚認知による構造解析 一目見てひとかたまりのグループがわかる。 画像が分割されいたりするので HTMLソースの解析だけでは把握仕切れない Webページ全体を１枚の画像として、構造解析、画像解析が可能 文字を文字とし
WAI-ARIA クライアントサイド野郎向けまとめ - oogatta のブログ
何これ Web Accessibility Initiative(WAI) が作った Accessible Rich Internet Applications(ARIA) のためのご提案。(X)HTML 上で動く RIA をターゲットにしているので当然 (X)HTML に属性を追加しようとするもの。 ※「HTML 文書をアクセシブルにする」ためのものではない。RIA は前提として JavaScript でビヘイビアが記述されるので「JavaScriptオフ」というのは基本想定外（と思う）。 ※ちなみに、ほとんどのスクリーンリーダは JavaScript を普通に処理します。 今更 HTML4 と XHTML1.0 に属性付けられるの？ Valid じゃないのでは？ Embedding Accessibility Role and State Metadata in HTML Docume
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
#0010 - /* XXX: 怪文書 */ - return 0
http://moto-mono.net/2009/05/26/preview_default_url_shorten_by_bitly.html
Amazon.co.jp： ユーザ中心ウェブサイト戦略 仮説検証アプローチによるユーザビリティサイエンスの実践
Amazon.co.jp: インタラクションデザインの教科書 (DESIGN IT! BOOKS): Dan Saffer (著), 吉岡いずみ (翻訳), ソシオメディア株式会社 (翻訳): 本
