第1回 UIはハンガー、ネットの価値をリアルに展開し新体験を創る
第1回 UIはハンガー、ネットの価値をリアルに展開し新体験を創る チームラボの「teamLabHanger」 スマートフォン/タブレットが業務システムから日常生活まで、あらゆる利用シーンに浸透し始めている。そしてオフィスにはパソコンがあり、自宅にはテレビが置かれ、街を歩けばデジタルサイネージが煌々と輝く。画面を備え、ネットワークにつながるデバイスが生活のここかしこに遍在する状況が当たり前になりつつある。現状それらはただバラバラに存在しているだけのように感じられるが、もっと新しい“何か”がこうした環境から生まれてくるような予感も同時に抱かせる。 この特集ではそんな期待を込めて、これからのユーザー・インタフェース（UI）、ユーザー・エクスペリエンス（UX）について識者の意見を聞いた。第2回以降で識者の談話を紹介していく。第1回は“少し先”を感じさせる実際の事例からそのUI/UXの考え方などを見
人気のあるサービスを真似よう。Tumblr風タグ編集コンポーネント·jQuery Tumblr Tags Editor MOONGIFT
jQuery Tumblr Tags EditorはTumblrのタグ編集風のUIを実現するjQueryライブラリです。 Tumblrのタグ編集を行うUIを真似たjQueryライブラリがjQuery Tumblr Tags Editorです。よくあるタグ編集という機能だけに参考になりそうです。 最初の表示です。テキストボックスが表示されるパターンとそうではないパターンがあります。 文字を入力してエンターでタグ設定できます。×ボタンを押せば消えます。 数多くなると改行します。 テキストボックスがない場合も使い方は変わりません。 jQuery Tumblr Tags Editorではエンターキーを押すとタグに変わります。キーバインドを変更してカンマを認識するようにしても便利そうです。 jQuery Tumblr Tags EditorはjQuery/JavaScript製のオープンソース・ソフ
42 Outstanding FREE UI Kits for Web Designers
Internet is full of freebies for web designers and developers. Today, we will be covering 42 free UI Kits and templates. All of them are editable in PSD format and mostly covering all of the basic UI elements such as textfield, checkboxes, radio buttons, buttons, drop down menu and some other cover extensive list of elements. Well, you might say, "They're gorgeous! But what can I do with it?". The
画像もHTMLもオーバーレイ表示 - ThickBox 3 | JavaScript | かたつむりくんのWWW
2008-02-27 説明を詳しくしました。 画像やHTMLをオーバーレイで表示するAjaxライブラリ、ThickBox 3.1を導入しました。導入方法は【ハウツー】ゼロからはじめるThickBox 3 - 画像もHTMLファイルもスイスイ表示（マイコミジャーナル）を見れば問題なく導入できると思いますが、ここでも素人なりに丁寧に手順を載せておきます。 まず簡単なサンプル作ったので見てやってください。 画像もHTMLもオーバーレイ表示 - ThickBox 3（サンプル） ThickBoxライブラリのダウンロード はじめにThickBox 3.1へアクセスします。 画面を少し下へ移動したところの「Download」のタブの中の、次の4つのリンクを右クリックしてファイルをダウンロードして保存します。このとき、「jQuery JavaScript library」については名前を「jquery-
Scroll your HTML with jquery scrollable
Demo Scroll through these elements by clicking on the items clicking on the arrows and those small round buttons using left and right arrow keys from your keyboard scrolling with your mousewheel 1. An example title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a. 60 sec 2. An example title Lorem
Linux上でマウスジェスチャーを使う | OSDN Magazine
私がマウスジェスチャーを初めて使ったのはOperaブラウザ上で意図せずしてであったのだが、メニューを使ったりナビゲーションツールバーにマウスを移動させたりしなくても、ブラウザ履歴の前後のページへ移動したり、新規ウィンドウを開いたり、タブを閉じたりするなどの様々なことを素早くすることができるので、すぐに気に入ってしまった。今やマウスジェスチャーはFirefoxやKonquerorでも使うことができるだけでなく、GNOMEやKDEデスクトップ環境でも使うように設定することができるようになっている。 マウスジェスチャーというのは、要するにキーボードのショートカットのようなものだ。マウスジェスチャー機能を利用すれば、マウスで描くパターンに対してよく使うタスクを割り当てることができる。つまり例えば、マウスをクリックして左にドラッグすることで、閲覧していた一つ前のページに移動できるようにすることなどが
Webブラウザ上のプログラミングエディタBespinを再現する·Bespin on Rails MOONGIFT
BespinとはMozillaの開発するWebブラウザ上で動作するプログラミングエディタのことだ。他のユーザとコラボレートしたり、Firefoxに限らず他のブラウザからでも操作ができるようになるとしている。CGMやクラウドを語る上で欠かせない要素になるだろう。 Bespin風テキストエリアを設置しよう そんなBespin風のプログラミングエディタをサイトに設置できるのがBespin on Railsだ。 今回紹介するオープンソース・ソフトウェアはBespin on Rails、Bespin風エディタを表示するRailsプラグインだ。 Bespin on Railsをインストールすると、専用のJavaScriptと専用のタグが使えるようになる。それをViewの中に埋め込めば、まるでBespinのようなテキストエリアが表示される。背景色は茶色で、ハイライト表示にも対応している。 各種言語向けに
suggest.js - 入力補完ライブラリ
Japanese / English JavaScriptで入力補完を手軽に行うためのライブラリです。 (【お知らせ】ver2.0からprototype.jsを必要としなくなりました) 下記のような機能を持っています。 入力内容をもとに検索を行い、補完候補を表示します。(Google Suggestぽく) Ajaxでは無く、初回画面表示時のみデータの読み込みを行い、それ以降は、クライアント側で対象データから検索します。したがって、入力内容に変化があってもサーバ側にアクセスすることはありません。 検索は、前方一致/部分一致、大文字と小文字の区別あり/なしといったように、オプションで簡単に指定できます。また、その他にも様々なオプションが指定可能です。 検索結果の表示上限を指定できます。(デフォルト上限20件) 補完候補はキーボードの上下と、マウスにて選択できます。また、キーボードで選択中にES
スライドショーのようにテキストを読むGreasemonkeyスクリプト、YHC - FAX
JavaScript YHC – Userscripts.org 長文をスライドショー形式で読むテキストリーダーです。デモビデオ(1分半)は以下。kotorikoさんの『捨松定吉』を、ランダムフィルタをかけて読んでいます。 機能説明ウィンドウ右下のGreasemonkeyメニューから[YHC]を選びスタートさせます。先に文章の一部を選択している場合はその部分を、そうでない場合は対象となる部分をマウスで指定します。 操作は主にキーで行います。 キー機能Esc終了↓ or S再生開始/停止→ or J or Space次のスライド 再生中はスピードアップ← or K前のスライド 再生中はスピードダウンGジャンプHome先頭のスライドEnd最後のスライド ↓キーで再生を開始して、→キーで再生速度を少し速くして、速すぎたら←で遅くして。気になるところに戻りたい場合は、↓で止めて、←→で移動して手動
エンジニアにもわかる「ユーザーインターフェース設計」
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに 島津悠樹と申します。Yahoo! JAPANのソーシャルメディア系サービスの開発・ユーザーインターフェース（以下UI）設計を担当しています。私からは「エンジニアにもわかる『ユーザーインターフェース設計』」と題し、エンジニアのみなさまに考え方のヒントとなるようなネタをお届けします。 エンジニアの方々にとって、UI設計は、おもしろそう、けれど、どこかとっつきにくい......、そんな印象を持っておられるのではないかと思います。 私も以前はそう思っていました。ですが、とっつきにくさを理由にUI設計をやらないのはもったいない、という思いで試行錯誤した結果、なんとか、UI設計のお仕事をいろいろ担当させていただくことができるようにな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQT
JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」:phpspot開発日誌
はてなブログ | 無料ブログを作成しよう