テキストフィールドの入力欄に「キーワードを入力してください」とかデフォルトで入れておいて、フォーカスした時に消す、というインターフェースを簡単に実装する jQuery のプラグインをご紹介します。 jquery.fieldtab.js 導入はとても簡単です。 まずは上記のサイトから「jquery.fieldtag.js」をダウンロード。 次に HTML の head 内に以下のコードを。#hoge のところは適用したいテキストフィールドの id を入れます。 <script type="text/javascript" src="jquery.fieldtag.js"></script> <script type="text/javascript"> /* <![CDATA[ */ $(function(){ $("#hoge").fieldtag(); }); /* ]]> */ </s

頻繁に外部ファイルやAPIとやり取りするFlashを作る場合、ローカルでのテストには限界があります。テストサーバ等へアップロードして実際に動作させてみるのが確実なのですが、なかなか面倒。バグの正体がわからずに何度もパブリッシュ→アップ→確認・・・うわああぁぁ そこで便利なのが、ブラウザでローカルのプロキシを噛ませてswfファイルを置換する方法です。ブラウザはサーバ上のswfをロードしているつもりだけど実際はローカルのswfが再生されます。それを実現する方法はいろいろあるようですが、今回はas以外ほとんどプログラムを書けない私でも使えたCocProxyをご紹介します。 CocProxyはrubyで動作する、シンプルなローカル置換プロキシ（という言い方でいいのでしょうか）です。使い方も簡単です。 http://svn.coderepos.org/share/lang/ruby/cocproxy

というわけで前回平面充填でもやろうとか書きましたが、ちょっと方針を変更して、もっとベーシックな写真コンテンツへの改造を進めてみます。 サンプルとソースは以下。写真はこちらのサイトからお借りしています。 ResizableContent2.swf ソースファイル（resizableContent2.zip・Flash CS3） 敷き詰める対象が単なるSpriteからLoaderつきのMovieClipになった為、クラス内の構造が若干変わっています。 一応サイズ不定の画像に対応したリサイズ処理つき。 var ratio:Number = _loader.width / _loader.height; _loader.width = _width; _loader.height = _width / ratio; if ( _loader.height < _height ) { _loader

ビギナーのためのセマンティックでアクセシブルで機能性にも優れたフォームを制作するための習作Nettuts+から紹介します。 20+ HTML Forms Best Practices for Beginners 下記は、その意訳です。 1ステップずつフォームを改善し、アクセシブルで機能性をアップするポイントを紹介します。 セマンティック アクセシビリティ ファンクショナリティ デザイン 結論 セマンティック 1. fieldsetを使用 ユーザーが入力する多くのフィールドがある際、fieldset要素を使用して類似情報をまとめます。 <textarea name="code" class="html" cols="60" rows="5"> <fieldset> <span>Billing Address</span><input type="text" /> <span>City</sp

世の中には何でもPowerPointでやらないと気が済まないという人たちがいる。Excel使いがそうであるように、PowerPoint使いがいるのだ。余計なソフトウェアを購入するよりはよっぽども良いが、再利用性のない方法をとられても困る気はするのだが…細かいところは気にしないでおこう。 PowerPointを使ってアプリケーションの画面を作る そんなPowerPointウィザードな方々に送る、プロトタイプ作成ツールキットがPowerPoint Prototyping Toolkitだ。 今回紹介するフリーウェアはPowerPoint Prototyping Toolkit、PowerPointを使ってアプリケーションのプロトタイプを作成するツールキットだ。 PowerPoint Prototyping Toolkitは画面や画面を構成するオブジェクトを作成し、PowerPoint2007の

公開日 : 2009年9月2日 (2018年1月20日 更新) カテゴリー : ユーザビリティ 何やら刺激的なタイトルでビックリですが、「Web担当者フォーラム」の「HCD-Net通信」というコーナーで、「ヒューリスティック評価法の99％は間違っている？ / HCD-Net通信 #15」という記事がありましたので、ご紹介したいと思います。 UPA（Usability Professionals' Association）という米国のユーザビリティ専門家団体が主催している国際会議において、「Heuristic Evaluation: Use and Abuse（ヒューリスティック評価法の使用と乱用）」というセッションがあったのですが、パネリストでありヒューリスティック評価法の開発者でもあるRolf Molich氏が、「現状行なわれているヒューリスティック評価の99パーセントはよくないものだ」

Flash 10には新しい機能が搭載されていますが(参考)、私は新しいテキストエンジンとダイナミックサウンドの有用性について実は疑っていました。縦組みや段組ができるようになっても使う機会あるのかなぁ、とか、動的サウンドも音を生成できることって面白いのかなぁ、と。 しかし最近になってそれは間違っていると言うことに気づきました。 新しいテキストエンジンの有用性 – ジャギらない 従来のFlashのテキストフィールドではデバイスフォントを使用した場合、移動や拡大・縮小に弱く、カクカクとした表示になってしまう懸念点がありました。次の記事の紹介ではFlash 10のテキストエンジンを使用すると、その問題が解決するというのです。 Fonts in Flex 4 / Flash Player 10 / AIR 1.5 Make Me Happy これは画期的な内容で、ダイナミックテキストを使用しても通常

雨季のバンコク2泊4日旅行記 夏は苦手と言いながら、春先の憂鬱を吹き飛ばしたくて、今年も海外旅行の予定をいれてしまった。昨年20年以上ぶりに海外に足を伸ばし、旅をすると人生の栞が増えることを実感してから、だんだん旅が好きになってきたように思う。 今年の行先は雨季まっさかりのタイ・バ…

Movable Type 5 では「ウェブサイト」が導入された関係で、Movable Type 4 からのアップグレードでどのようになるのか試してみました。 確認した環境は Windows XP + xampp1.66a で、データベースは MySQL5.0 です。 アップグレード前のブログのメインページです。 アップグレードの前準備は、以下の通りです。 MT4.261 のディレクトリ（mt）をリネーム（mt-- 等） MT5.0 のディレクトリ（mt）を作成プログラムを配置 MT4.261 の mt-config.cgi を MT5.0 のアプリケーションディレクトリにコピー mt ディレクトリにアクセス アップグレード開始画面が表示されました。日本語のローカライズはまだ行われていないようです。アップグレードの際には環境変数 DefaultLanguage ja の設定が必要です。 サイ

Movable Type 5.0 の機能についてまとめましたので、管理画面および Movable Type 4 との違いを交えながら簡単に紹介します。 この記事は、Movable Type 5.0 ベータ1を元に作成しています。 １．ウェブサイトとブログ Movable Type 5 ではサイト全体の構成に「ウェブサイト」という概念が加わりました。まず最初にイメージを図示します。 MT4 では、インストールした Movable Type のサイトの単位は「ブログ」であり、メインページやウェブページはブログの中の構成要素となっています（下）。例えば、ウェブページだけを作りたい場合でも、最低1つのブログを作成する必要がありました。 MT5 では、「ウェブサイト」という概念が加わり、ブログは「ウェブサイト」の構成要素になりました（下）。また、メインページやウェブページも「ウェブサイト」の構成要素