これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
jQueryベースのWebフォームライブラリ「jFormer」
WEBサイトには欠かせないフォーム。様々な情報のやりとりに利用されていて、多くのWEBサイトで利用されていますが、今回紹介するのは一般的なコンタクトフォームから、ログインフォーム、EC用のフォームまで、様々なフォームに対応したjQueryベースのWebフォームライブラリ「jFormer」です。 「jFormer」はバリデーション機能も備えたフォームのフレームワークで、AJAXを使ったページ遷移や、入力データのレジュームなど、細かな機能も標準で備わっており、フォームの開発の時間を短縮してくれます。 詳しくは以下 基本的にフォームの部分はphpで作られており、デザインをCSSで、動きなどはjavascriptを利用しています。 多彩なデモは「Demos – jFormer」からご覧いただけます。またベーシックなコンタクトフォームのつくり方は「Installation and Documenta
Androidアプリで使える便利なUIライブラリ - 遥かへのスピードランナー
Androidアプリと言えばUI命！、ということでギークな方々が作られている便利なUIライブラリを見つけられる限り、スクリーンショット付きでまとめてみます。 皆様いずれもソースと一部サンプルアプリを公開されているのですぐにでも試してみることができます。 （作者の方々、載せることに問題があるようでしたらお手数ですがご一報くださいませ） Quick Action 公式Twitterアプリ風にタッチした箇所に吹き出しを表示できる レイアウトもカスタマイズ可能 Y.A.M の 雑記帳: Android Quick Action の Android ライブラリプロジェクトを作ってみた Drag and Drop ListView ドラッグアンドドロップで並び替え可能なリストビュー 似たようなのは色々あるけどこれが一番使いやすかった！ ユーザがソート可能なListViewをすこしリッチにしてみた -
WEBアプリケーション作成に使われる４３のコントロールパターン:phpspot開発日誌
43 Essential Controls for Web Applications | UX Booth WEBアプリケーション作成に使われる４３のコントロールパターンがまとまっています。 ４３のパターンが網羅されているので、部分的に、どういうインタフェースが良いか？という点について迷った際にエントリを眺めるだけで参考になる部分がありそうです。 オートサジェスト カルーセル カレンダー、スケジュール グラフ、チャート コンボボックス スライダ ４３と言わずもっとありそうな気もしますが、ある程度のパターンを知っておき、適材適所のUIを考えてユーザビリティを上げるのに役立てることが出来そうですね。 それぞれのUIにも沢山のインタフェースがあると思いますが、その場合は「パーツごとのデザインが盛り沢山で参考にできるPattern Tap」で紹介したPatternTapなどを更に参考に出来そうです
IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開
業務アプリケーションがWebアプリケーションとして開発されるのは現在の大きなトレンドです。それに伴ってHTMLとCSSによって業務アプリケーションの複雑なユーザーインターフェイスを構築する必要性が生じます。 しかし機能が豊富な業務アプリケーションのユーザーインターフェイスをHTMLとCSSで構築するのはそれほど簡単ではなく、しかもそれをアプリケーション全体で統一し、優れたユーザビリティを実現するのはさらに手間のかかる作業です。 そうした業務用のWebアプリケーションのユーザーインターフェイスを構築するためのサンプルが豊富に含まれたガイドライン「IBM Lotus User Interface Developer Documentation」が、IBMから公開されました。 今回公開されたIBMのガイドラインは、同社のLotus製品群のユーザビリティを統一するための社内プロジェクト「One U
Rails 2.0 » Railsアプリケーションのデザインが決まらない時はWeb App Themeを使おう
開発者にとって一番難儀なのがデザインではないだろうか。いや、そうじゃないという人もいるだろうが筆者はそうだ。いつもデザインで悩んで、あげくの当てに放棄してしまう。そんな中、便利に使っているのがWeb App ThemeというRailsプラグインだ。HTMLファイルもあるのでRailsアプリケーションに限らず利用はできるが、ここではプラグインとして便利に使う方法を紹介したい。 まず最初はプラグインのインストールだ。 $ ruby script/plugin install git://github.com/pilu/web-app-theme.git Initialized empty Git repository in #{RAILS_ROOT}/vendor/plugins/web-app-theme/.git/ remote: Counting objects: 72, done. r
Deneme Bonusu Veren Bahis Siteleri - En iyi Bonus Veren Siteler Nelerdir?
Ücretsiz verilen bonusların free bet ve deneme bonusu adı altında sitelerde verildiği bilinmekte. Bu tür bonuslar küçük miktar olsa da, bazı oyuncular için önemli. Onlar risk almayı istemediklerinden bu bedava bonuslarla para kazanma şansı yakalıyorlar. Çoğu bahis sitesinde güncel deneme bonusları var. Fakat büyük sitelerde bu bonuslar daha büyük miktarlarda verilmekte. Deneme bonusu veren bahis s
Interface elements for jQuery - About Interface
Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery. With this components you can build rich client web applications and interfaces with the same simplicity as writing JavaScript with jQuery. The collection is dual licensed with the MIT license and the GPL, which basically means you can use it for free for both non-commercial and commerci
MOONGIFT: » 要注目！モダンなUIを実現するJavaScriptライブラリ「LivePipe UI」:オープンソースを毎日紹介
JavaScriptを使って、クールなインタフェースを実現するライブラリは幾つか存在する。よく使われるものとしては、画像をクリックするとその場で拡大表示するもの、タブインタフェース、WYSIWYGなHTMLエディタ、レーティング、プログレスバー、コンテクスト（右クリック）メニューなどなど。 フローティングウィンドウ どれも個別のライブラリは存在する。だが、よく使われるものだけに、一つ一つ用意するのが面倒という人もいるはずだ。そこでこれを使おう。 今回紹介するオープンソース・ソフトウェアはLivePipe UI、Prototype.jsを使ったモダンなUIを実現するライブラリだ。 LivePipe UIが実現する機能はタブ、WSYIWYGエディタ、ツールチップ、フローティングウィンドウ表示、レーティング、プログレスバー、コンテクストメニューなどがメジャーなものとして挙げられている。レーティン
会員登録フォームを構築するポイント | ランサーズ社長日記
いいね！ 11 ツイート B! はてブ 734 Pocket 58 ここ2・3日、ひたすら色々なサイトの会員登録フォームやコマースサイトの購入フローを見ていました。 また、フォームのユーザビリティについて語っているブログやサイトをみて研究していました。 こうすれば登録数が劇的に上がる！とか、売上が上がる！といった方法はありませんが、少しだけユーザーに安心感を与えたり、ストレスを取り除いたりする方法はたくさんありますし、見ていたサイトでも登録しやすいサイトには共通点が多くありました。 少し量が多いですが、自分で意識的に行ってきたこと、登録しやすいサイトの共通点、ブログやサイトをみて参考になる点をまとめてみました。 1つ1つはよく言われていることで、大したことありませんが、こういった小さなディティールにこだわって行きたいと思います。ケースバイケースの側面も強いのですが、何かの参考になればと思い
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を使って簡単に画面を作
jQueryでウィジェットインターフェース
多くのデベロッパから支持を集め、もはやおなじみとなったJavaScriptフレームワークjQuery。jQuery単体でも非常に優れたJavaScriptフレームワークだが、jQueryにはjQuery UIと呼ばれるウィジェットセットが用意されており、デベロッパは同ライブラリを利用することでグラフィカルなユーザインタフェースをより簡単に開発することが可能となる。 jQuery UIはThe jQuery Projectが開発/公開しているjQueryをベースとしたウィジェットライブラリ。The MIT License、GNU GENERAL PUBLIC LICENSE Version 2(GPLv2)のデュアルライセンスの下で公開されている。いくつかのコア機能とウィジェットが用意されており、ダイアログやスライダー、タブといったインタフェースを簡単に構築することが可能だ。また各種APIや
第5回 jQuery UIによるユーザインターフェースの改良 | gihyo.jp
今回使用する「Dialog」「Draggables」「Droppables」「Sortables」に必要なファイルは以下の通りです。 themes/ jquery-1.2.3.min.js jquery.dimensions.js ui.mouse.js ui.resizable.js ui.dialog.js ui.draggable.js ui.draggable.ext.js ui.droppable.js ui.droppable.ext.js ui.sortable.ext.js ui.sortable.js jQuery UI 1.5bを使うために、今回は同梱されているjQuery 1.2.3を使うことにします。バージョンが上がりますが、これまでのサンプルの動作に影響はありません。 ライブラリの設定 ライブラリの各ファイルを、head要素の子要素に以下のように指定します（
第11回 PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能
iPhoneのロック解除の際のあのUIをJavaScriptで実現:phpspot開発日誌
aboone.com Blog Archive JavaScript iPhone Lock Slider with jQuery iPhoneのロック解除の際のあのUIをJavaScriptで実現。 解除した際のイベントハンドラを登録することができ、サイト上では解除した際に背景色を変えるようなサンプルを確認できます。 面白いＵＩなので、ちょっと覚えておくと小ネタとして使えそう 関連エントリ JavaScriptでページスライダー用ライブラリいろいろ iPodスタイルのドリルダウンメニュー実装サンプル
二度押し防止の onsubmit で disable にするやつ :: Drk7jp
もう２年ほど前に話題になったアレなんですけど、今更ながらあるサービスでこの仕組みの導入を検討しています。 onsubmit で submit ボタンを disable にしてユーザビリティを良くする - naoyaのはてなダイアリー submit ボタン disable 技の罠 - naoyaのはてなダイアリー onsubmit で submit ボタンを < disable にしてユーザビリティを悪くするのはやめてください - のヮの うんこ♥ onsubmit で disable にするやつ - 鷹の島 onsubmit の disable 化ですが既に議論が終わっているように、onsubmit disable の実装方法として、 onsubmit イベント発生時に submit 要素を disable にして値をサーバへ渡すための hidden 要素を生成する方法 setTimeou
会員登録の敷居を下げる入力フォームの作り方(PC編) - キャズムを超えろ！
本エントリは、20〜40代のPCをある程度使いこなしているユーザー向けの会員登録フォームの設計について述べたものである。ケータイサイトは含まないし、シニアも対象としていない。シニア向けUIについては(古いエントリだが)こちら "ユーザーID"と"メールアドレス" 減ってはきたものの、ユーザーIDとメールアドレスの両方を取るWebサービスがいまだに結構ある(ex. Remember the milk)。はてなやYahooAuctionのように「ユーザーIDがニックネームに相当するコミュニティサイト」は除くとして、ユーザーIDを一般客に公開しないにも関わらずIDとメルアドの両方を取る意図がわからない。 ユーザーIDとしてメールアドレスを使うメリットは 会員登録フォームの入力必須箇所が1個減る 好みのIDが取れない事件が防げる "ID忘れ"による機会損失/幽霊会員が減る 流石に自分のメアドは忘れ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォーム要素をクールにするためのjQueryプラグイン集:phpspot開発日誌
CSSでクールなボタンを作るまとめ:phpspot開発日誌
ウェブの画面設計に使えるまとめ - DesignWalker
