REMIX07 TOKYO イベント レポート

---

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

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

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

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

「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-ラーニング サイトとはかなり異なる印象を受けていただけるかと思います。

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

映像配信などの領域に対して、ただ高画質な映像を配信するだけでなく、ユーザー インターフェースに組み込んで新しいものを作るということに、私たちはトライしております。そういったときに HD 画質の扱いには苦労していますが、Silverlight の技術ではそこに期待をしております。
また日立製作所の取り組みとして、情報漏洩対策・個人情報保護といったセキュリティについても厳しくなってます。 Windows OS との親和性においてもやはり Silverlight には非常に期待していますので、今後もより活用していきたいと考えています。

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

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

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

ユーザビリティより、運用のしやすさ、手間の軽減などが優先され、ユーザー インターフェースが置き去りにされている。厚いマニュアルで操作を覚えなかればなりませんし、なにより最大の弱点は、システム開発者がそのまま UI も含めて開発していることではないでしょうか?　「システムのプロ≠ユーザビリティのプロ」ということです。
ユーザー インターフェースはエンタープライズを変えるのか、という質問には即答できませんが、ソフトウェアやインターフェースが、「使う側にとって仲間だと思える」 「使いやすい・カッコイイ」 「見てと自慢したくなる」、そんなものを作っていきたいと思っております。

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

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

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

また通常であれば、「入庫処理」 「出庫処理」 などとモードを分けてブレイクダウンして処理を進めていくスタイルになりがちですが、このデモ表現のような環境になっていると、画面遷移が少なくなります。ユーザーも情報が把握しやすくなるだけでなく、“入庫と出庫の直接やりとり” のような情報リンクも可能となります。また開発側の負担も軽減されます。
技術面の解説としては、この倉庫の構造や棚の構造はすべて XML で保持され、いわゆるリストボックスでカスタマイズ表現されています。 WPF コントロールのカスタマイゼーションの強力さ、テンプレートによる複雑なコントロール表現、そういったことで、この倉庫の 3D 表現が可能となっています。 XML でカスタマイズしたうえで使う感覚は、通常のエンタープライズ アプリケーションの利用に近いと思います。

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

次の段階では、倉庫の面表現が斜め視点になるなどやや進化しましたが、データがズレているなど、まだデザインの細部が詰まってません。

1.1 か月ぐらいの段階で、ほぼ完成したものと同じ表現になりました。
このとき XAML を使っていて、なにが凄いかといいますと、これらの段階を進めていくときに、同じプロジェクトをベースにデザイナーとプログラマーが一緒にアプリケーションを進化させていくことができるという点です。どちらかがウェイトすることなく、並行して作業を進め、最終的に出来上がるところまで行けるわけです。これが XAML のパワーです。ユーザー インターフェースを再考する場あるいはヒントにしていただければと思います。

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

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

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

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

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

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

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

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

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

アプリケーションの画面ですが、全社の収益状態がポイントごとに表示されています。緑が黒字、赤が赤字の経常利益の部門です。連鎖体系のなかでもで赤のところ、矢印が下がっているところに問題があることが一目で分かります。地図で指定して各事業所の収益状態を見ることも可能です。

「PMA」 は、先ほどまでのデモのように、タスクを実行させていくアプリケーションではなく、各種情報を確認しシミュレーションし問題を発見するシステムになっています。情報はリンクされているので、各数値を変更してシミュレーションすると、それに連動して各ポイントの数値や画面が変化します。こういったシミュレーションの場合、「どこから手を付けて治していくのか」 が、初期段階では決めにくいのですが、このアプリケーションでは 「どこからでも」 手を付けてシミュレーションできるようになっています。 WPF はフォーム間のリンクが柔軟に可能なため、このようなビジネス インテリジェンス系の表現に向いています。

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

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

「eTicketExplorer」 は情報端末でのオンライン チケット販売というシナリオで制作されたデモです。ジャンルや地域により絞り込みをかけ、スタジアムの座席選択にまでシームレスに移行します。さらには自分が選択した座席でのビューまでバーチャルに表示でき、それらを確認したうえでチケットを購入する、という仕組みを実現しています。
Web ではコストがかけるために “平たい表現” しかできなかったのですが、WPF のテクノロジーなどで、よりリッチな UI を提供できる時期に来たのではないかと思います。

WPF と Silverlight 1.0 の違い

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 が持っているポイント アニメーションを使いました。しかしツールがないので、3D の円周図面を起こして、各座標を算出して手打ちしました。

またマウス エンターした際に回転物の動作速度を落としたかったのですが、SpeedRatio の操作が Silverlight ではうまく行かなかったので、今回は Storyboard をポーズする方法を使いました。

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

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

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

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

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

今回作ったデモについては、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