ツールボックス

UI モックアップ、ユーザー エクスペリエンスに関するヒント、JavaScript チェッカー、その他

Scott Mitchell

UI モックアップの迅速な作成

ソフトウェア エンジニアリングにおいて、ユーザー インターフェイス (UI) のモックアップは重要なツールで、要求仕様の段階で関係者やエンド ユーザーからフィードバックを引き出すプロトタイプとしての役割を果たします。また、あらゆる機能仕様に不可欠なツールです。

では、UI モックアップを作成する最適な方法は何でしょう。最も簡単なのは、ペンと紙を使う方法です。迅速かつ簡単で、ソフトウェアを特に必要としません。さらに、技術的知識の有無にかかわらず、だれにでも行えます。もちろん、このようなプロトタイプは、保管するのが困難で、遠方の関係者とは簡単に共有できません。

Microsoft Office Visio や Visual Studio デザイナーのようなプログラムを使用して、完成したプロジェクトがどのようになるかを忠実に模倣する UI モックアップを作成することもできますが、残念なことに、このようなモックアップを作成するには、ペンや紙を使うよりもかなり長い時間を要します。また、技術的知識を持ち合わせていない関係者に "洗練された" モックアップを見せると、作業がほぼ完了していると勘違いされてしまうかもしれません。

"Balsamiq Mockups For Desktop" (バージョン 1.6) は UI モックアップ ツールです。このツールは、紙の上でモックアップを作成する場合の速度、簡素さ、技術性の高くない外観と、コンピューターを使ってモックアップを作成する場合のアーカイブと共有というメリットを兼ね備えています。Visual Studio や Visio など、多彩な機能を備えた巨大で複雑なプログラムとは異なり、Balsamiq Mockups For Desktop は、UI モックアップをできるだけ迅速かつ簡単に作成することに目的が絞られています。

Balsamiq Mockups For Desktop の UI は、非常にわかりやすく、デザイン画面と、モックアップに追加するコモン UI コントロール (ボタン、ラベル、テキスト ボックス、チェック ボックス、タブ、コンボ ボックス、ハイパーリンク、スクロール バー、スプリッターなど) のリストがあります。また、ブラウザー ウィンドウ、ビデオ プレーヤー、ダイアログ ボックス向けに既成のコントロールもあります。Balsamiq Mockups For Desktop には、合計 75 を超えるコントロールが付属しています。また、Balsamiq Studios LLC の Web サイトから、イメージ ファイルをコントロールとしてインポートしたり、ユーザーが作成したコントロールをダウンロードしたりすることも可能です。

コントロールは、コントロールのリストからドラッグしてデザイン画面にドロップするだけで、モックアップに追加されます。デザイン画面にコントロールをドラッグ アンド ドロップしたら、そのコントロールをダブルクリックしてコンテンツを編集します。コントロールの上にマウス カーソルを合わせると、そのコントロール固有の構成オプション一式を含むフローティング パネルが表示されます。フローティング パネルですべての設定を行うことができるため、メニューやプロパティ ウィンドウを探し回って、1 つ 1 つ設定していく必要がありません。これらの設定は簡単に行うことができるので、あまり多くのことを習得する必要はなく、モックアップ作成にかかる時間が大幅に短縮されます。

私が 3 分間で完成したモックアップをご覧ください (図 1 参照)。電子メール一覧のモックアップを作成するために、デザイナーにデータ グリッド コントロールをドラッグし、マウスを使ってコントロールの位置を揃えて、サイズを変更しました。次に、コンマ区切りテキストとしてコンテンツを表示するグリッドをダブルクリックし、図 1 に示すように 3 列、4 行を表すテキストに既定のコンテンツを置き換えました。続いて、グリッド上にマウス カーソルを合わせ、フローティング ウィンドウでプロパティを表示します。さらに、チェック ボックスをオンにしてスクロール バーを追加し、スライダーで行の高さを調整して、2 行目を選択状態で表示しました。

図 1 Balsamiq Mockups For Desktop を使用して簡単に作成した UI モックアップ

作成したモックアップは、ディスクに保存したり、.PNG イメージとしてエクスポートしたり、XML 形式にエクスポートしたりすることができます。Balsamiq Mockups For Desktop には、標準バージョンのほかに、必要最低限の機能だけを備えたバージョンがあり、同社の Web サイトに無償で公開されています。共同作業が可能な、オンライン バージョンのソフトウェアも現在開発中です。

価格: 1 ユーザー ライセンスごとに 79 ドル
balsamiq.com (英語)

注目のブログ

ユーザー エクスペリエンス (UX) は、ソフトウェア アプリケーションの重要な側面の 1 つです。ユーザーは、アプリケーションが正しく実行されるかどうかだけが重要で、アプリケーションのアーキテクチャや、完成に 1 週間もかけた精巧なアルゴリズムには関心がありません。残念ながら、私を含めて多くのソフトウェア開発者が UX デザインに悪戦苦闘しています。アプリケーションの細部にこだわって、UX デザインを後回しにすることはあまりにも安易です。

UX デザインの重要性に関心を持ち、アプリケーションの UX を向上するための優れたヒントを得たいと考えている方は、"UX Booth ブログ" をご覧ください。UX Booth ブログには、何人かの著名な UX デザインの作者、トレーナー、コンサルタントからの投稿が掲載されています。私のお気に入りの投稿は、一般的なシナリオでの UX を向上する具体的なヒントを提供しているものです。Web サイト上に連絡フォームを作成することをお考えであれば、「Creating a Usable Contact Form」(使いやすい連絡フォームを作成する) をお読みください。投稿者の Matthew Kammerer が、表示する情報、スクリーン上でのレイアウト方法、およびフィードバックが送信されたら行うべきことについてアドバイスしています。また、John Hyde の「Handling User Error with Care」(ユーザー エラーに注意深く対処する) という投稿もチェックしてください。エラー メッセージを表示する場所や、エラー メッセージの内容についてのベスト プラクティスが掲載されています。

他にも、直接的手段をあまり使用しないで UX を向上する方法に注目するブログ エントリもあります。最適化した画像を作成して、Web サイトのパフォーマンスを向上する方法について説明している投稿もあれば、アプリケーションのアクセシビリティを向上するツールを紹介している投稿もあります。ブック レビューや、最前線から学ぶユーザビリティについての教訓、ユーザビリティの専門家へのインタビューといった、全般的な投稿もあります。

UX Booth ブログ

uxbooth.com/blog (英語)

JavaScript のチェック

JavaScript は興味深い言語ですが、その歴史のほとんどにおいて、主に Web ページ内での簡単なタスクの実行に使用するだけの言語と見なされてきました。ところが、実のところ JavaScript は堅牢かつ強力な言語で、今日では、機能豊富な対話型の Web アプリケーションを構築するのに使用されています。

困ったことに、JavaScript 言語では、設計上の決定を数多く行う必要があるため、プログラミングが難しく、また、誤って使用されると、バグが発生したり、メンテナンスが難しいコードになったりしてしまいます。たとえば C# では、どの行もセミコロンで終了する必要がありますが、JavaScript ではほとんどのステートメントがセミコロンでもキャリッジ リターンでも終了できるため、ユーザーの混乱を招きかねません。同様に、C# ではどの変数も使用前に宣言しなくてはなりませんが、JavaScript では必要ありません。

"JSLint" は、Douglas Crockford によって作成された無償の JavaScript のコード品質ツールで、JavaScript コードのブロックに対して、さまざまな静的分析チェックを実行することができます。JSLint の既定では、さまざまな状態の中でも、グローバル変数、セミコロンで終了していないステートメント、ステートメント ブロックが後ろにない if、while、do、for ステートメント、および到達できないコードを見つけると警告を表示します。その他のチェックは、JSLint のオプションを使って構成することができます。たとえば、未定義変数の禁止、単項インクリメント演算子 (++) とデクリメント演算子 (--) の禁止、ユーザーに "eval" 関数を許可するかどうかなどを指示できます。

JSLint を使用するには、まず JSLint.com (英語) にアクセスし、テキスト ボックスに JavaScript コードを貼り付けます。次にオプションを選択し、[JSLint] ボタンをクリックします。すると、JSLint によってコードが解析され、エラーの一覧が表示されます (図 2 参照)。JSLint は JavaScript で記述されているため、すべてがブラウザーで実行されます。つまり、コードがインターネットに送信されることはありません。必要であれば、オプションとして JSLint のソース コードを Web サイトからダウンロードして、ローカル環境で実行することができます。

また、Predrag Tomasevic によって作成された、無償の Visual Studio アドイン "JSLint.VS" もチェックしてください。このアドインでは、ファイルまたは選択したコード ブロックを対象に、Visual Studio IDE から直接 JSLint を実行できるようになります。JSLint によって特定されたエラーは [タスク一覧] ウィンドウに表示されます。プロジェクトをビルドするたびに、選択したファイルまたはフォルダーに対して JSLint.VS を実行するように構成することもできます。

図 2 JavaScript のコード品質ツール JSLint

JSLint: jslint.com (英語) JSLint.VS: jslint.codeplex.com (英語)

推薦図書

ここ 10 年で、構造化された情報を簡単に保存できるようになりました。最新のデータベース フレームワークやデータ アクセス フレームワークでは、少量のコードを使って、数回ドラッグ アンド ドロップするだけで、データを収集することができます。保存にかかるコストが削減されるうえに、構造化された情報によって競争上の優位性が増すこともあり、ビジネスでは、できる限り多くのデータ要素の目録を作成することが熱望されるようになりました。

もちろん、そのようなデータは、作業者が意味のある方法でデータにアクセスして評価できない限り、役に立ちません。Microsoft SQL Server Reporting Services (SSRS) は、作業者がレポートの作成、調査、閲覧を行うことができる、サーバー ベースで、エンタープライズ規模のレポート処理プラットフォームです。

他のエンタープライズ規模のプラットフォームと同様、SSRS では機能やユース ケースを拡張できます。私は最近、SSRS を評価して、導入するクライアントをサポートしました。その際、詳細について学ぶのに大変役立ったガイドが『Microsoft SQL Server 2008 Reporting Services Unleashed』(Sams、2009 年) です。

この書籍は 5 部構成になっています。第 1 部では、SSRS の簡単な概要について説明し、一般的なユーザー シナリオに注目しています。また、SSRS のアーキテクチャを紹介し、さまざまなレポート展開シナリオを比較、対比しています。SSRS のインストールについて触れた短い章もあり、順を追った指示と、豊富なスクリーンショットが添えられています。

SSRS の主な目的は、レポートを通してデータを表示すること、および作業者がそのレポートを作成、分析、利用できるようにすることです。第 2 部では、レポートの作成方法について解説しています。また、式、パラメーター、書式設定、ナビゲーション、集計、アドホック レポートなどのトピックについても詳しく説明しています。私は、プロジェクトの遂行中、レポートを設計する段階でいつも障害にぶつかりました。特定の方法でデータの書式を設定しようとして頭を抱えたり、レポートが生成された日付や時刻といった、レポートに表示する特定の情報が必要なときに行き詰まったりしましたが、そのような障害のほとんどは、本の目次を眺め、このセクションの章にざっと目を通せば擦り抜けることができました。

第 3 部では、SSRS の管理について解説しています。SSRS は、サーバー ベースのテクノロジです。レポート (およびデータ) はサーバーに存在しており、さまざまな方法でクライアントからアクセスできます。レポートは、要求時に生成することも、スケジュールに従って生成することもできます。また、クライアントからレポートをサブスクライブすることができ、ファイル共有や電子メールを使ってレポートを配信することもできます。ここでは、他の管理タスクに加えて、こうしたさまざまなオプションにも触れています。

最後の 2 つのセクションでは、SSRS と SherePoint を統合する方法と、SSRS をカスタマイズおよび拡張する方法について説明しています。

『Microsoft SQL Server 2008 Reporting Services Unleashed』は、管理者、DBA、およびユーザー向けの優れた入門書です。あまり細部まで踏み込まれていない分野もいくつかありますが、最も重要な側面と、SSRS で使用できる豊富な機能についてわかりやすく解説しています。

Microsoft SQL Server 2008 Reporting Services Unleashed

価格: 49.99 ドル
informit.com/sams (英語)

Scott Mitchell は、多数の著書を出版し、4GuysFromRolla.com (英語) の創設者でもあります。また、また、1998 年からは Microsoft MVP としてマイクロソフトの Web テクノロジに携わっています。現在は、フリーのコンサルタント、トレーナー、およびライターとして活躍しています。Scott の連絡先は、Mitchell@4guysfromrolla.com (英語のみ) です。また、ScottOnWriting.net (英語) にブログを公開しています。