REMIX07　ブレイクアウト セッション
「WPF/Silverlight Case Studies」

株式会社南国ソフト 代表取締役 コンサルタント 森下 浩二氏

WPF や Silverlight は企業システムにとって役立つのか？ その高度なユーザー インターフェース表現をどのようにエンタープライズで活かすことができるのか？
本セッションではこれまで南国ソフトが関与してきたいくつかの事例を紹介し、実際の企業システムでの活用アイデアやヒントをお伝えできればと思います。またシステム開発を通して学んだテクニックや考慮すべき点についても解説します。

【メインスピーカー】
森下 浩二氏
株式会社南国ソフト 代表取締役 コンサルタント

	ブレイクアウト セッション BD003 概要

WPF/Silverlight Case Studies として、実例を紹介

「REMIX07」 のキーノートやジェネラル セッションで紹介したマイクロソフトのテクノロジー以外にも、Web 業界の有識者の方々から Web デザイナー、Web デベロッパー、意志決定者向けにさまざまな情報をお届けするブレイクアウト セッション。ここでは株式会社南国ソフト 代表取締役 コンサルタントの森下 浩二氏が、WPF/Silverlight といったテクノロジーをエンタープライズ業務システムにどのように適用していくかを、実例をもとにしながら紹介します。

	日立製作所における WPF/Silverlight の活用事例

株式会社南国ソフト 代表取締役 コンサルタント 森下 浩二氏 （左） と日立製作所 デザイン本部 主任デザイナー 町田 和久氏 （右）

Silverlight で構築した e-ラーニング サイトが、まずオープニングにて紹介されました。南国ソフトと日立製作所との共同プロジェクトとして、このコーナーは日立製作所 デザイン本部 主任デザイナーの町田 和久氏が、代わって説明を行いました。

Kowa E-Learning
http://www.kowa-ebiz.jp/

【登壇者】
町田 和久氏
日立製作所 デザイン本部 主任デザイナー

■ デモ： Kowa E-Learning

日立製作所におけるソフトウェアのデザインの 一例

日立製作所は家電が一番有名ですが、それ以外にも車輛、ATM、ビデオ機器、携帯電話などいろいろなデザインを行っております。なかでも私が担当しているのがソフトウェアのデザイン、組み込み系のデザインです。最近は Web ベースのものも増えており、HTML もあれば RIA もある。そういう状況です。
今回の事例は、興和株式会社さまとジョイントして手掛けた、Silverlight を使った e-ラーニング サイトです。医薬事業の “Kowa” が一番知られているかと思いますが、国内だけでなく海外にも事業所を持ち、歴史もある非常に大きな会社です。同社の IT 事業の e-ビジネスの 1 つとして、e-ラーニングのサイトがあり、それを構築するというところで関わることとなりました。本日は、そのサイトの、Silverlight で構築したトップページを紹介したいと思います。
分担については、中心になってデザインを考えたが日立で、Silverlight での制作部分が南国ソフト、それ以外の HTML 部分がマキシー・スタイルとなります。

興和株式会社について		プロジェクト概要

他社サイトの把握

実物を見せる前に背景の説明ですが、e-ラーニングサイトの GUI について、他社分析を行いました。ぱっと見の印象がどこも似ておりが、「できるだけシンプル」 で 「印象深いもの」 というコンセプトで我々はデザインを行っております。そこで 「Cool & Stylish」 をキーワードにしていくことにしました。
実際の画面を見ていただくと分かりますが、非常に静かな印象を受けると思います。普通、Silverlight を駆使したサイトといいますと、派手な仕上がりになりますが、そういったサイトのほうが作りやすく作っていて楽しいかと思います。ただ、今回はクールでシンプルなもので構成したいという要望から、単純な動きと最小の効果音でデザインされています。シンプルななかでもにも、文字のリフレクトを多く使うなど、他の e-ラーニング サイトとはかなり異なる印象を受けていただけるかと思います。

キーワードによるビジュアル検討		Kowa E-Learning。それぞれの見出しが、立体感を持ちつつ静かに回転するメニューになっており、マウスオーバーすることで、枝メニューが ポップアップする

見出しをクリックすることで、さらに詳細な情報が表示されます。非常にさりげなく作られていますが、かなり高度なことが実現されており、多色を使わず形や動きで見せるデザインとなりました。アイコンにカーソルを合わせるとアニメーションと効果音が現れるなど、いろいろな表現を使って、安心感や使いやすさが実現できていると思います。

メニューをクリックすると回転するキューブが 出現。それぞれの面で異なる動画が再生される		キューブをクリックすると、なめらかに展開し、 そのまま個別のメニューとなる

	ユーザー インターフェースはエンタープライズを変えるのか？

南国ソフト 森下 浩二氏により、さらに WPF/Silverlight による制作事例が多数紹介されました。まずは前段として、そもそもユーザー インターフェースの造り込みがエンタープライズ シーンにどのような影響をあたるのかが論じられます。

さて、エンタープライズに高度な UI は必要でしょうか。
「WPF が出てきたけど、うちの業務システムにそんなの使うのかな？」 と感じている人もいるでしょう。私自身、かつてはそう思っていましたが、ちょうど 1 年ほど前から WPF/Silverlight にフォーカスして、さまざまなアプリケーションを作っていくなかでもで考えを変えました。
エンタープライズにおける IT の業務システムは欠かせないものです。しかし 「現代社会はストレス社会」 などといわれており、「IT の業務システムがストレスに一役買っているのではないか」 とも思いました。業務システムのユーザー インターフェースは、ずいぶんと進化が止まっており、「使いやすい」 「カッコイイ」 と思うものにはなかなか出会えません。

現代社会はストレス社会だそうだ		進化しない業務システムの ユーザー インターフェース

■ 業務アプリデモ： 倉庫管理アプリケーション （Warehouse Management）

倉庫管理アプリケーション 「PowerStock」

そういう考えのもと、南国ソフトが実際に開発してきた業務システム 「PowerStock」 を見ていただきましょう。この倉庫管理アプリケーションは、昨年 11 月 〜 12 月の 1.5 か月で、2 人で作りました。 WPF を用いて作っておりますが、“記号化” ということを推し進めています。

倉庫そのもの、倉庫のエリア、エリアの棚、棚に入れる商品……、それぞれ ID を振らなければならない。その記号化されたものをコンピュータで表現するときに、「データ」 がそのまま 「ユーザー インターフェース」 に直結していては使いにくい、文字のままでは分かりにくいという問題があるわけです。数値や文字データだけで表現してしまったりすると、物理的な棚の状況とかビジネス プロセスとかが把握できなくなるからです。
この 「PowerStock」 では、実際の倉庫と同じように、エリアがそのまま地図化されているほか、棚の中身のインフォメーションも視覚化されています。また各種ランキング、実際の倉庫での見た目なども同時に表現されています。通常は棚やエリアの情報は表ベースで表現しがちですが、このように記号化したことで、倉庫の中に入っている商品までイメージを目視できます。こうすることで、直感的・直接的にオペレーションできるようになり、利用者のトレーニングやマニュアルを不要にしてくれます。

実際の倉庫と同じように、エリアがそのまま 地図化されている		棚の中身のインフォメーションも視覚化されている

画面下段では、不良在庫ランキング、実際の倉庫内視点での 3D グラフィックなどが表示されている

「デザイナーとデベロッパーのコラボレーション」 ということで、共通の中間言語的な XAML が注目されているわけですが、実は XAML を使うと、ほとんどのインタラクティブなもの、操作や画面遷移やインターフェースが XAML だけで記述できてしまいます。つまりデザイナーだけでもモックアップが作れるということになります。 HTML であれば 「ただインターフェースを作った。終わり」 となりますが、XAML であれば、表層でなく表現を含めた中身を利用できる、ということです。
たとえば、倉庫データをどう表現するか、最初段階のプロトタイプのモックアップでは、2 次元で表現されていました。この段階でもかなり表現のカスタマイズは進んでいます。

初期段階のモックアップでは、倉庫は 2 次元の 面を並べて表現されていた		次の段階のモックアップでは、倉庫は斜め視点の 3D 表現に進化した

この段階で、ほぼ完成形と同じ状態に

■ 業務アプリデモ： 生保向け顧客ターゲティング （Customer Targeting）

生保向け顧客ターゲティング 「LifeNavigator」

続いては、セールスマン用の営業支援ツールである 「LifeNavigator」 です。自分の顧客に対して、絞り込みを行い、どういった順でどういった層に営業をしていくのかを見極めるための仕掛けです。現在考案中の仕様を WPF で表現するとどうなるか、を追求したものになっています。

検索条件を設定し検索を実行し絞り込んでやり直して……という操作を行うと、通常はだいたい 5 画面ぐらい画面遷移があるわけですが、「LifeNavigator」 ではタブレット PC での操作などを想定して、ツリー型のメニューで不要な情報タブはたたんでいくようになっていますが、こういったメニューはリストボックスの中にリストボックスを入れて表現しています。従来の WindowsForm などで考えると作りづらいですが、非常に簡単にシンプルに実現しており、カスタマイズも容易になっています。
検索結果の顧客情報を Excel の表のような状態で表現していますが、これを見ただけではピンと来ないでしょう。これを WPF を使って表現すれば、パターン 2 の表現のようになります。人に会いに行くのが営業ですから、「人はそのまま人で表そう」 と考え、人型のアイコンになっています。そしてそれがどんな人かを直観的に判断できるように、色によって年齢を表したり、アイコンの数で家族の有無を表現したり、顧客を絞っていくアプローチがしやすいと思います。また営業としての “勘” も働かせやすいと思います。

パターン1： 顧客の基本情報は、通常の一覧表示となっている		パターン2： アプローチを切り替えると、マップにプロットされた状態で、各レイアーごとの顧客傾向がカラー表示される

リスト一覧や条件検索だと、ロジックにないと取り落とす、あるいは発見が難しいというのが普通です。しかしこういう直感的なインターフェースであれば、無意識のうちに自分が持っている行動ルールを発見できるかもしれません。こういった表現も、3D 表現をする PathGeometory をリストボックスに入れてあげることで実現してます。またこの画面だけで、ターゲットである顧客に対する、インからアウトまでをフォーカスを変えずに扱うことができる、というのも大きなアドバンスでしょう。
ここで画面デザインについても考えてみると、データベースの場合、プログラムが実際に動いてデータが入らないとデザインが進まないということがありがちです。しかし WPF/Silverlight での開発の場合は、Expression Blend を利用するわけで、XML をデータ ソースとするようなケースであれば、使うデータを入力しながらデザインを進めていくことになります。入力文字数の制限チェックや配置の整理などが最初から可能ですので、テンポラリーのダミー データなどがいらないですね。

■ 業務アプリデモ： 電力会社向け顧客管理 （CRM： Customer Relationship Management）

電力会社向け顧客管理 「PowerNavigator」

「PowerNavigator」 は電力会社向けの CRM です。たとえば契約している帯域別に顧客を表示すると、画面のようになります。見ていただいて分かるとおり、「LifeNavigator」 の画面を作り直したものとなっています。
湯気が出ているアイコンがありますが、これは 80％ リーチしていてサービス体系をシフトしたほうがいい状態を表しています。アイコンをクリックすると、それぞれの顧客について、詳細情報を表示します。基本的に発想も使い方も同じで、1 つの画面ですべての情報を確認し、顧客に対するすべてのアクションが行えるようになっています。

顧客の詳細情報。グラフは日次の電力消費量の変移を示している

グラフのコントロールを専用に作っていますので、Excel よりリッチな表現も可能なのですが、アプリケーションごとに作るのもしんどいので、サードパーティ製の汎用的なグラフィック コントロールでインテグレートしやすいものが出てくるといいなあと思ってます。

■ 業務アプリデモ： 製造業向け収益モニタリング （Profit Monitoring）

次の 「PMA （Profit Monitoring Application）」 は少し毛色が変わりますが、いわゆる収益モニタリング システムで、「グラフィカルな表現で経営の状態を見たい」 という要望に応えるものです。たぶん WPF/Silverlight を一番適用しやすい領域ではないかと思います。 Windows ガジェットも用意されていて、そこからラウンチすることもできます。

製造業向け収益モニタリング 「PMA （Profit Monitoring Application）」		全社の収益状態とそのリンクを、連鎖体系のツリー図で確認できる

赤字要因について、原因ごとの推移をグラフ 表示させた場合		赤字要因について、生産ラインごとの不良率を 表示させた場合

■ 業務アプリデモ： e-コマース （e-Commerce）

「eTicketExplorer」 は、WPF テクノロジーの表現形態の 1 つ 「XBAP」 を使った “XAML ブラウザ アプリケーション” で、ブラウザにホストして使うものです。 WPF 自体は Windows OS に依存していますが、アニメーション表現などが容易かつ安価に構築でき、情報端末向きだといえます。

e-コマース 「eTicketExplorer」		地図を操作しながら、地域による絞り込みを行う

スタジアムの座席選択に、シームレスに移行		自分が選択した座席で、どのように会場が見えるかバーチャルに表示

	WPF と Silverlight 1.0 の違い

WPF と Silverlight でずいぶんと違う開発スタイル

対処方法のアイデア

WPF と Silverlight でずいぶんと開発スタイルが違うわけですが、WPF はプログラマーにとって楽にできています。 UI 周りのインタラクションはデザイナーが XAML で実装し、プログラマーはビジネス ロジックしか扱わない、ある種シンプルな状態になっています。一方 Silverlight 1.0 では、デザイナーは画面やアニメーションを定義しますが、インタラクションはプログラマーが書かねばなりません。如実にこの差が現れるのがコード量です。 WPF では、デザイナーの生成する XAML が 85％ 程度を占めていたとすると、Silverlight 1.0 では 75％ 程度の比率に下がります。またデータを UI のエレメントにセットするようなことはできないので、ここでもプログラムでセットするようにコードを書く必要が出てきます。
大きくは 「トリガーがない」 ことと 「データバインドの実装がない」 ことの 2 点になるかと思います。これに対する対処アイデアとしては、たとえば命名規則を使って汎用ハンドラを構築するといったことが考えられます。「マウスをクリックされたら、こう動かなければならない」 といった挙動を、できるだけ繋ぎやすいようにユーザー操作と、UI をコントロールするアニメーションであるストリーボードをマッピングするようなコードを用意しておく、といったものです。

• UIElement へのユーザー操作と Storyboard のマッピング
• Storyboard から Storyboard へ連鎖

この例では、“Menu1 というキャンバスにマウスが入ったときに、デフォルトで 「MouseEnter」 イベントを呼ぶと、「Menu1Cvs_MouseEnter」 を発動する” といった命名規則を付けて、マッチングさせておくことで、プログラマーがコードを書かなくても動かせるようにしています。

	Kowa E-Learning における Silverlight を使った開発時の難関

今回の 「Kowa E-Learning」 サイトの開発において、難関となったのは次の 3 点です。 Silverlight 1.0 には 3D 機能はありませんので、それを自分たちの手で作ることに挑戦しました。

• モーション タイポ
• リフレクション効果
• モーション キューブ

Silverlight を使った開発時のポイントを、 実例に則して解説		「モーション タイポ」 「リフレクション効果」 「モーション キューブ」 のそれぞれに難関が待ちかまえていた

これ以外にも 「レイアウト変更」 という難関もありました。

まずモーション タイポについては、Silverlight が持っているポイント アニメーションを使いました。しかしツールがないので、3D の円周図面を起こして、各座標を算出して手打ちしました。
またマウス エンターした際に回転物の動作速度を落としたかったのですが、SpeedRatio の操作が Silverlight ではうまく行かなかったので、今回は Storyboard をポーズする方法を使いました。

難関 1： モーション タイポの 3D 表現		モーション タイポの動作速度の調整

難関 2： リフレクション効果のエフェクト不在

続いてリフレクション効果ですが、WPF にはビットマップ エフェクトがありますが、Silverlight にはありません。またモーション タイポに対して鏡面表現を追加するなら、再度ポイント アニメーションの書き起こしが必須となってしまいます。そこでプログラム側で同じラインを引いて、上で回っている Storyboard を追う仕組みにしました。

モーション キューブは Polygon を使って線を繋て面を作っています。これも最終的には Storyboard にすればいいなあと思ったんですけど、PointCollection が Storyboard にマッピングできないため、結果的に三角関数を駆使して自分でキューブを作りました。ポリゴンをタイマーで 1度ずつずらしていくことでキューブの回転を表現しました。キューブの展開についても同様にロジックを考えて作り上げています。

難関 3： モーション キューブが Storyboard にマッピングできない		参考： モーション キューブの作り方

参考： ポリゴンのなかでもでの動画再生

Silverlight らしかったのは、ポリゴンのなかでもでの動画再生でしょう。 Polygon の Fill に VideoBruch を設定しているだけですが、キューブ回転に合わせて面の形が変わるので、トランスフォームをかけています。

泣けた話として 「レイアウト変更」 がありました。 WPF は非常に高度なレイアウト システムを持っていて簡単にやり直しができるのですが、Silverlight は XY の絶対値的な配置になるので、サイズ変更やレイアウト変更は、すべて手で移動し直す必要があります。アニメーションも含めてなので、かなり大変でしたが、Silverlight 1.1 でレイアウト システムが採用されるので、それに期待しています。

難関 4： レイアウト変更		展開

展開は非常に簡単で、作った HTML、JavaScript、XAML、画像などを Web サーバーにコピーするだけです。必要なコンテンツを ZIP にラップしておくことで一括ダウンロードができる 「Downloader オブジェクト」 もありますので、すべてのファイルがローカルに揃ったところで表現を開始する、といったこともできます。

業務システムに Silverlight を考える

今回作ったデモについては、Web コンテンツとしての表現ですので、実際に業務システムにおける Silverlight 活用については、まだ分からないというのが正直なところです。 1.1 では WPF のモデルを採用している部分もありますので、最終的にどこまで近づけるのかがポイントになると思います。
Web に業務システムを移行して、「システム屋は楽になったけど、ユーザーは使いにくくなった」 ということもありますし、「開発やデバッグが大変になった」 ということもあります。
そういう意味で、冒頭でも掲げた「UI はエンタープライズを変えるのか」 という問いに対して、答えは分からない、というのが正直なところです。ただ、進化の先には、エンドユーザーの笑顔が待っていると思います。それを想像しながら、ぜひインターフェースを作っていただければと思います。

=====

南国ソフト
http://nangokusoft.com/

WPF Demo Applications Walk-Through
http://nangokusoft.com/Documents/WPFDOC2007_1.pdf

当日資料
http://nangokusoft.com/Documents/remix07.pdf