ペーパープロトタイピング事例集 | 秋元@サイボウズラボ・プログラマー・ブログ
実際に動的なウェブサイトを作ってしまう前に、紙上でデザインや部品の配置、画面遷移などを確認するペーパープロトタイピングという設計技法があります。書籍もありますね。 ペーパープロトタイピング 最適なユーザインタフェースを効率よくデザインする そのペーパープロトタイピングの事例を集めたページというのがありました。たとえば次のこれは、2000年5月31日にスケッチされたtwitterのプロトタイプです。当時はstat.usという仮名で、これによるとtwitterはLiveJounal(ブログサービス)とAIM(インスタントメッセンジャー)から最初の着想を得てから実装まで5年以上の間があったことになりますね。 FlickrのPlacesページやVimeoなどのペーパープロトタイプの写真も紹介されています。 こちらは韓国のポータルサイトDaumのAjaxウェブメール開発時に行なわれた、ペーパープロト
秋元@サイボウズラボ・プログラマー・ブログ: スクロールするタブをYUIベースで実現したライブラリ
yodelerというYahoo UI ライブラリベースのUIを開発しているReid Burkeさんが発表したのが、タブ切り替えとスクロールを組み合わせた新しいタブ切り替え表示部品。 切り替えるときにタブの中身の切り替わりがスクロールでなされる、ということなんだけど、見てもらうほうがはやい。 縦スクロール版 / 横スクロール版 切り替えに時間がかかるので日常使いのページには良くない気もするけど、そうでないときにちょっとユーザをびっくりさせることができるかもしれない。 ライブラリはBSDライセンスで、その他の作品とあわせてsvnで公開されている。 via Ajaxian この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッタ
秋元@サイボウズラボ・プログラマー・ブログ: 管理画面用のフリーテンプレートが公開されている
ブログやエンドユーザ向けページのデザインテンプレートは多いけど、管理画面用でフリーでいいのはあまりない、と主張する作者による、自由に使える(言及やリンクも不要。できればブログ読んでね、だそうだ)管理画面デザインテンプレートというのがWebResourceDepoｔというブログで配布されていて、del.icio.us/popularに出ていた。 開くとこんな感じ。アイコンは、これもフリーアイコンとして有名なfamfamfamを使っている。 これを使った管理画面をWebアプリケーションフレームワークのAdminジェネレータで生成するようにすれば、バックエンド側の画面作成は手間が減るだろう。 via del.icio.us/popular この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の
秋元@サイボウズラボ・プログラマー・ブログ: lightboxライブラリ37個の比較表
写真などをページ上で強調表示する、いわゆるlightbox効果を実現するJavascript+CSSライブラリを37個も集めて、ライブラリサイズやそれぞれの機能、どのJavascriptライブラリを使っているかなどで絞り込めるようにした比較表が発表されている。 このようなUI系のライブラリを使う際には、自分が普段使っているベースライブラリとの親和性などが重要だと思うので、このような形でまとまっているとdel.icio.usで”lightbox”タグで絞り込む、といった調べ方よりも楽にライブラリが選べていい。 via del.icio.us/popular この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッターでご指摘い
パスワードの強度をチェックするツールPassword Meter | 秋元@サイボウズラボ・プログラマー・ブログ
Password Meterは、パスワードの強度を独自の評価式で測定してくれるサービス&スクリプト。 たまにネットサービスでパスワードを決めようとするときにその強度を示してくれるサイトがあったりするけど、ああいうのを単体にしたようなものだ。 今評価しているのは、純粋な文字種やその規則性の判定だけで、辞書にあるかどうか、といった要素までは入っていない。 このチェッカプログラム自体(Javascript)もGPLで配布されているので、自分用に設置したり、改造したりすることができる。自分のサービスのユーザ登録フォームに使って、よりわかりにくいパスワードを設定してもらうように誘導したりできるかもしれない。 [追記] リンク忘れでした。ご指摘ありがとうございます via del.icio.us/popular この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合が
Yahoo! UI LibraryによるJavascriptゲームのサンプル集 | 秋元@サイボウズラボ・プログラマー・ブログ
Yahoo! UI ライブラリを使って、テトリス(Yetris!)、15パズル、スペースインベーダー、ソリティアなどを作って公開しているKris Cieslakという人のインタビューが、Yahoo User Interface BLOGに出ていた。 それぞれのゲームについては、Javascriptでも昔からそれなりのものはあっただろうと思う。テトリスについては、何年も前にすごい方法で作ってた人もいるし。ソリティアがしたければWindowsについてるやつを起動すればいいでしょ、という話はある。まあ、これらの目的は技術力のデモ的なところがあるのだろう。 ライブラリを活用し、ゲーム本体のJavascriptファイルはどれも非常に小さい(10KBとか20KB)ところがこれらのデモの肝かなあと思う。 これで、Yahoo UIライブラリの各ファイルはYahooにあるものを呼べるようになったことをあわせ
HTML構造のグラフによる可視化 | 秋元@サイボウズラボ・プログラマー・ブログ
[2006/5/28 追記] applet バージョンが公開されたので、自分のページのHTMLを可視化することもできるようになった。 論文にありそうなネタで、じつは同案多数かもしれないが, Websites as graphs では、HTML の構造を要素ごとに色分けしグラフ化する作業を著名ないくつかのサイトについて行なったという。下はグーグルのもので、 以下のような色分けになっているという。 青: リンク (A タグ) 赤: テーブル (TABLE, TR , TD タグ) 緑: DIV タグ 紫: 画像 ( IMG タグ) 黄色: フォーム (FORM, INPUT, TEXTAREA, SELECT OPTION タグ) オレンジ: 改行と引用 (BR, P, BLOCKQUOTE タグ) 黒: ルートである HTML タグ 灰: その他のタグ 元記事ではもっとたくさんの実例が出てい
秋元@サイボウズラボ・プログラマー・ブログ: Yahoo! UI Library はすごいね
via O’Reilley Radar Yahoo! UI Library で、Yahoo! が実際に使っている Javascript のライブラリ集が公開されている。 Yahoo! のどこでこんなユーザインタフェースが使われてるんだろう? と思うぐらい、サンプルで見せられる UI パーツは豊富だ。それぞれの “Example” を見てまわるだけでもおなかいっぱいだ。 コアユーティリティ アニメーション クロスブラウザ対応の XMLHttpRequest ラッパ DOM 操作 ドラッグアンドドロップ イベントハンドリング UI コントロール部品 カレンダー スライダー ツリー ドラッグアンドドロップなんかは、ファンタジースポーツで使われているのを見たことがあるので知っていた。複数のリスト間でアイテムの移動や並べ替えを行うときには使えるパーツだろう。 日本語カレンダーなんかも、いい感じで再利
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
