Quick Usability Checklist 下記は、その意訳です。 はじめに 下記の全ての項目が、すべてのサイトに当てはまるわけではありません。これらは、あなたのサイトの方向性を示唆するものです。 1. Site ID サイトはIDは非常に重要な要素で、ページ上部の左やナビゲーションの側によく配置されているサイト名やロゴのことです。 サイトIDには、トップへのリンクを設けるか、ナビゲーションにトップのリンクを設置する必要があります。 2. Page Name ページの名前は、サイトIDと同様にユーザーに明確に伝える必要があります。 ビジュアル的にページの名前であると分かるように目立たせるべきです。 また、ユーザーがそのページに到着するためにクリックしたテキストと一致している必要もあります。リンク元とリンク先が同じ内容のものであれば、ユーザーは混乱することがなくなります。 3. Na

マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".button").hover(function(){ $(".button img") .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump .animate({top:"-6px"}, 100).ani

商用サイトでもフリーで利用できる、ヨガやスポーツなど全部で120種類以上のポーズをとった人物のシルエットのベクター素材をSadMonkeyDesignから紹介します。

twitter facebook hatena google pocket 巷に溢れかえるLightBox風ギャラリー。 ColorBoxもそんなJavaScriptの一つですが、colorと名乗るだけあり、綺麗な感じです。 sponsors 使用方法 ColorBoxからファイル一式をダウロードします。 <link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" /> <link type="text/css" media="screen" rel="stylesheet" href="colorbox-custom.css" /> <!--[if IE]> <link type="text/css" media="screen" rel="stylesheet" href="colorbox-cus

twitter facebook hatena google pocket amazonなどでは、書籍を回転表示させ一覧性と省スペースを兼ね備えています。 jQuery Carouselを使用することで、似たよう表示が可能です。 sponsors 使用方法 jQuery Carouselからjquery.carousel.jsを、jQueryからjquery.jsをjQuery Easing Pluginからjquery.easing.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.carousel.js"></script> <script type="text/javascript" src="jq

twitter facebook hatena google pocket Googleなどでは、入力されたパスワードに対し、強度を示してくれます。 そんな手法をあなたのサイトでも取り入れてみませんか？ pwd_strength.jsは非常に簡単にパスワード強度を表示させられるJavaScriptです。 sponsors 使用方法 pwd_strength.jsからpwd_strength.jsをダウロードします。 <script type="text/javascript" src="pwd_strength.js"></script> 上記を記述したら、フォームを以下のように記述します。 <input type="text" id="mypassword" name="mypassword" onkeyup="runPassword(this.value, 'mypassword');

25-point Website Usability Checklist | User Effect サイト公開前に役立つ２５のユーザビリティチェックリストが公開されていましたのでメモしてみました。 サイトの公開前にチェックリストとして使うといいかもしれません。 アクセシビリティ 1. ロード時間が速いか？(60KBぐらいがベター) 2. テキストと背景のコントラスト調整(差異が低く見にくくないか) 3. フォントサイズが読みやすいサイズか？行間、文字間は適切か？ 4. Flashやアドオンは控えめか？ 5. 画像に適切なALTタグが指定されているか？ 6. カスタマイズした404ページがあるか？デフォルトは非常に不親切 7. カンパニーロゴが分かりやすい位置におかれているか？ 8. キャッチフレーズが適切に設定されているか？ 9. 5秒で大体どんな内容が分かるものになっているか？ユーザは

Easy Display Switch with CSS and jQuery クールに表示を切り替えられるCSSとjQueryサンプルが公開。 デモページ でそのかっこよさが確認できます。 かっこよくてつい切り替えてしまう、そんなスイッチになってますね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集 グラフ描画用のjQueryプラグイン集 15分で理解するjQueryのスライド「jQuery in 15 minutes」

TinyTable JavaScript Table Sorter - 2.5KB - Web Development Blog わずか2.5KBでテーブルにソート機能を提供する「TinyTable」。 シンプルだけど次のようなかっこいいソート可能テーブルを実現できる軽量ライブラリが公開。 デモページ 各種変数の設定でカスタマイズも可能みたい。 ＣＳＳのクラス名の指定なんかが出来るようです。 var sorter = new TINY.table.sorter("sorter"); sorter.head = "head"; //header class name sorter.asc = "asc"; //ascending header class name sorter.desc = "desc"; //descending header class name sorter.even

これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」 2009年03月12日- jQuery Context Menu Plugin これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」。 ちょっと前までだと独自の右クリックメニューを作るのはすごく大変でした。特にクロスブラウザで動作することなんかを考慮すると本当に大変でした。 が、このライブラリを使えば簡単に実装できてしまいます。 特定のエレメント上のみに右クリックメニューを設定できるという、柔軟なつくりになっています。 どのアイテム上でクリックしたかっていうのがイベントハンドラで受けられるところも汎用的になっていていいです。 このライブラリ１つとってみても、jQueryを使う意味が出てきそうです。 jQueryは本当にデフ

モバイルに関するユーザ動向・意識を調査した無料のデータ資料「Mobile User Book 2009」 Tweet 2009/3/11 水曜日 matsui Posted in 記事紹介・リンク | 1 Comment » 株式会社アイ・エム・ジェイのサイトに、過去1年にわたってユーザ動向及びユーザの意識を調査した計10本のレポートが、PDFの形で無料掲載されています。 →　IMJモバイル　「Mobile User Book 2009」過去1年間の調査データを集約 [imjmobile.co.jp] →　Mobile User Book 2009　PDF資料 [imjmobile.co.jp] この資料に載っている調査内容は次の通りです。 携帯サイトフィルタリングサービスに関する意識調査 企業のモバイルサイトへの取り組み実態及び意識調査 モバイルキャンペーンに関する意識調査 携帯画面のカ

新生銀行カードローンのレイクは、大手の消費者金融から銀行のカードローン事業の一つとして生まれ変わった唯一のカードローンです。いまだ消費者金融としてのイメージを持つ方が多いですが、総量規制対象外のれっきとした銀行カードローンとなります。 レイクの魅力はなんといってもはじめてであれば30日間無利息または5万円まで180日間無利息、という無利息サービスを選択できる点です。お金を借りるのであればできるだけ余計な利息は支払いたくはありませんし、無利息サービスを利用すれば期間によっては利息を全く支払わずにお金を借りることができます。短期間の借入を希望している方、また単発でカードローンを利用するという方におすすめです。 レイクの金利は他の銀行カードローンと比べると高く、年4.5％～18.0％と大手消費者金融並みです。また即日振り込みが可能であり、平日14時までに手続きが完了した場合にはその日のうちにお金

Processing 標準の IDE が、コードの補完をしてくれなくて使い辛いので、普段 mac では TextMate を使っていたんだけど、windows でも何かエディターがあれば便利だよなあと思い探してみました。 ざっと調べてみた結果、標準以外で開発する場合は下記の手段がある（まだあるかもしれない）。 mac ・Xcode ・TextMate ・Eclipse win ・jEdit ・Eclipse このうち共通するのは Eclipse のみ！ということで、WindowsでのProcessing用エディタ１Eclipse編を参考に思い切って導入してみた。 やってみたら意外と簡単で、Eclipse インストールして、新規で java のプロジェクト作って、ライブラリで processing の lib フォルダに入ってる core.jar を追加するだけのことだった。 ただ

アークコサインは、比率を与えると角度（ラジアン）が得られる。 例）0.865 のアークコサイン（30 度のコサイン） 0.523 = Math.acos(0.865) これを度に変換↓ 30 = Math.acos(0.865) * 180 / Math.PI アークタンジェントは、対辺と隣辺の比率を与えると角度（ラジアン）が得られる。 例）0.577 のアークタンジェント（30 度のタンジェント） 0.523 = Math.atan(0.577) これを度に変換↓ 30 = Math.atan(0.577) * 180 / Math.PI もうひとつのアークタンジェント 例）0.577 のアークタンジェント（30 度のタンジェント） 0.523 = Math.atan2(1, 1.73) = Math.atan2(対辺, 隣辺) これを度に変換↓ 30 = Math.atan2(1, 1

Flash(ActionScript3.0)とFlex3(MXML)によるWebコンテンツ制作・AIRアプリケーション製作・RIA開発。 Flex Builder 3 に Flex SDK 3.3 をインストールして、Flex SDK 3.1 でつくった AIR 1.1 アプリを AIR 1.5.1 で動作確認してみた。 Flex SDK 3.3 ダウンロード Download Flex 3 - Flex SDK - Confluence http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3 flex_sdk_3.zip Build 3.3.0.4852 （2008/03/09 現在） AIR 1.5.1 ダウンロードとインストール Adobe - Adobe AIR http://get.adobe.co

SoundSpectrumを使ったサイトで 「Flash Player Windows IE, Firefox環境にて音がしなくなる」 という現象がおきたので報告。 Mac(Firefox, Safari)では、問題なく音も流れSoundSpectrum自体も動作します。 また、WindowsでもDebug Playerだと問題なく音も流れSoundSpectrumも動作します。 （MacはDebug Playerでも普通のでもどちらでも問題なし） また、音のmp3自体をURLRequestを使った外部読み込みにすると どの環境でも問題なく動作します。 ということで、問題が起きているのは 「Soundの外部読み込みを行わなず、ステージに配置してあるmp3サウンドに対して、 SoundSpectrumを行った場合にのみWindows の Flash Playerで音が出なくなる」 って

ちょっと脱線するのですが、ProgressionのTransittionEventクラスをみるまでビルトインのTransitionManagerがイベントを送っていることを知らなかったのでメモ。 改めて書くことでもないですが、TransitionManagerはflashにビルトインされているアニメーション効果を得られるクラス。僕はほとんど使っていなかった。 これを以前調べた時はTransitionはいいけれど、その完了を通知するイベントは無いと思ってました。リファレンスに記載ないし。だけれどProgressionのTransitionEventでそのようなイベントが定義されているので、もろもろ中身を覗いてみたら、そもそもTransitionManagerやTransitionがイベント送信しているのね…知らなかった。TransitionEventはこのイベントに定数を設定してくれるよう。

パッケージの仕方で小一時間転んだので記録。 ドキュメントクラスをIndexにTestClassのインスタンスを作り、TestClassのメソッドを実行する場合を想定します。 Index.as index.fla testclass/ TestClass.as ってファイル構成で、TestClass.asの中身は、 package testclass{ public class TestClass{ public function TestClass(){} public function testMethod():void{ trace("testMethod"); } } } package{ import flash.display.Sprite; import testclass.TestClass; public class Index extends Sprite{ public

W3C W3Cは8日(米国時間)、Device Description Repository Simple APIをW3C勧告として発表した。Device Description Repository Simple APIはDDR情報にアクセスするための簡単なAPIを規程したもの。DDRを操作するためのインタフェース/クラスとメソッドが定義されている。DDRを利用した開発を促進するものになると考えられる。 モバイルデバイスへ配信されるWebコンテンツはスクリーンサイズなどモバイルデバイスの特徴を加味したものへ加工されている場合に利便性の高いものとなる。こうしたデバイス特有の情報はDDR (Device Description Repository)に保持されているが、今回W3C勧告になったのはこのリポジトリにアクセスするためのAPI。 モバイルデバイスへのWebコンテンツの配信は増加傾向に