サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
www.kentarox.com
入力フォームはすぐにチェックする 入力フォームの存在しないシステムは中々無いでしょう。入力する場所がある限り、サーバーサイドでそれを素直に受け入れるわけにはいきません。SQLインジェクションやOSコマンドインジェクションをかけられる事もありますし、不正な値でDBに不整合が起こる可能性があります。 すべての入力値は、チェックボックス値やラジオボタン値にいたるまで、残らずチェックしなくてはなりません。したがって、サーバーサイドではこれらの入力チェックを一分の隙間もなく行うことになります。 多くのシステムは工数の関係もあって、サーバーサイドのチェックのみを実施しています。クライアントサイド(JavaScript)での入力チェックは、実装を毛嫌いされます。やってもやらなくても変わらないよ、というのが多くの意見だと思いますが、そんな事はありません。 クライアント・サーバー間の通信が減るので負荷は下が
※D&Dの感覚でマウスを使って表を動かすことができます。 表をつかんで動かす方法 まるで手で掴んでいるかのように、表を左右に動かすことができます。いちど使えば直感的で、誰にでも理解できるUIですね。どんなにパソコンに不慣れなひとでも、すぐに使えるようになります。私の父は「ああ、ソリティアみたいなもんか」と大変すんなり理解をしてくれました。 技術的にどうするか、というと、これはDrag & Drop(以下D&D)の応用です。WEBページ上のコンテンツをD&Dする方法があり、これはJQueryUIを活用することで、大変簡単に実装することができます。 ふつう、Drag後は上下左右、自由に動かすことができますが、今回のポイントは左右にしか動かせないようになっている点です。 実際にDragを可能にするコードを以下に紹介しましょう。 // スクロール可能なオブジェクトをDragできるようにする $("
Highcharts第3弾は円グラフ 前回の記事(jQueryで棒グラフを表示してみる)で Highcharts を使った棒グラフを表示してみました。第3回となる今回は、同じくHighchartsを使い、円グラフを表示してみたいと思います。 円グラフを見てみる HighChartsで描いた実際のグラフが以下のグラフです。各パーツには店舗ごとの売上金額を表示し、全体の売上中で何%程度がそれに当たるかを見えるようにしています。また、各パーツをクリックすることで分離されて表示されるようになります。 すごい!Highcharts JSONデータをもとにグラフを描写する 今回も前回と同じく、JSON形式でデータを取得します(JSONデータはこちら)。前回と同様にデータはPHPで生成し、出力します。ここをDBからデータを取得して編集して出力するようにすると良いでしょう。 print ' {"chart
ITエンジニア向けにUI/UXの改善方法をご紹介しています。JavaScript, 主にJQueryを使った技術をご紹介します。WEBサイトの横幅はもっと広がりがあって良い 私たちが作るWEBサイトは、PCのディスプレイの関係上、さほど大きくは作りません。ユーザーは画面の横スクロールをすることを嫌うからです。横スクロールのバーが表示されるだけで、不快に感じる人もいるでしょう。 そんなわけで、普段私たちはWEBサイトの横幅をある程度、狭めて作っています。最近は1024pxで問題なく表示出来るように調整します。もちろんリキッドレイアウトを採用して画面幅いっぱいに広げることもあります。どちらにしても、もともと大きな画面を見る環境に無い人にとっては、WEBサイトの横幅は限られています。 横幅が自然に広がるUIアイデア Afracのサイトでこの概念をいとも簡単に突き抜けてしまったデザインを見ました。
データで魅せよう 情報の見せ方には様々なものがありますが、グラフほど分かりやすく、直感的な情報の見せ方は無いと思っています。データの羅列はただそれだけの情報で、そこから新たな発想や推測を生み出すのは難しいでしょう。 グラフ表示というと、Flash系の技術でFlex等が得意なイメージがありますが、JavaScriptでも十分に実現可能です。今回はjQueryとHighchartsを使って、グラフ表示を実現します。 情報をただ見せるだけでは退屈です。「魅せて」いきましょう。 まずはグラフを見てみる グラフ描画の元データはこのJSONデータです。この中身が変わると、ダイナミックにグラフの内容も変化します。また、グラフの各頂点にマウスのポインタを当ててみて下さい。数値がツールチップ方式で表示されたかと思います。 このグラフが簡単に描けたら、UIは劇的に改善出来ますね!やってみましょう。 jQuer
JavaScriptでグラフを描くのは簡単 前回の記事(jQueryで折れ線グラフを表示してみる)で Highcharts を使った折れ線グラフを表示してみました。今回は、同じくHighchartsを使い、棒グラフを表示してみたいと思います。 棒グラフを見てみる Highcharts JSONデータをもとにグラフを描写する 今回も前回と同じく、JSON形式でデータを取得します(JSONデータはこちら)。前回と同様にデータはPHPで生成し、出力します。ここをDBからデータを取得して編集して出力するようにすると良いでしょう。 print ' {"chartDatas" : [ { "name": "東京本社", "data": [12.0, 10.9, 11.5, 12.5, 13.2, 15.5, 18.2, 20.5, 21.3, 20.5, 19.6, 18.9] } ]} '; グラフ
固定位置フッターから様々な情報にアクセスできるようにする 今回は以前から作ってみたかった、位置固定のフッターを実装してみようと思います。作ってみたもののデモですが、、、画面の下の方に出ております。お気づきになりましたか?私はこれをナビゲーションフッター (Navigation Footer)と呼び、中に表示する要素をパネル(panel)と呼んでいます。 一番左側のパネルはちゃんと中身を表示するようにしてあります。パネルから飛び出す要素は、単純なHTMLのDIVタグですので、画像も動画もログインフォームも、WEBブラウザ上で表現できるすべてを表示させることができます。 多くの情報を扱う画面にナビゲーションフッターというソリューションを 多くの情報を参照しなくてはならないのだけど、画面のスペースが足りない。ここにこんな情報が表示されていたらもっと良いのに。よく使うページへのリンクがすぐに取り出
このページを最初にブックマークしてみませんか?
『エンジニアのためのUI改善講座』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く