アークウェブのブログ

RIA開発におけるデザイナー／デベロッパー協業のワークフローについて

このデブサミのテーマが「越境しよう！コードで世界を変えよう」ということだったのですが、「コードだけでは世界は変わらないでしょう」とまず最初に言っていました。どういうことかというと、セッションの後半に出てくるのですが、「エクスペリエンスチーム」という話がありました。

これは、ビジネス、デザイン、システムの3つの領域のバランスを取ることが大切ということでした。システム担当は完全にデザインについて知る必要がないかというと、そうではないし逆もしかり。恐らく「コード」というとシステム的を強くイメージしてしまうので、それだけではダメだろう、ということを言っていたのかと思います。

ビジネスに結びつかないシステムは作っても意味がないし、デザインのないシステムは使ってて分かりづらかったり、使うモチベーションが湧かなかったりしますからね。

次に、スターバックスやハーレーダビッドソンの例をあげてエクスペリエンスについて話していました。

スタバにおけるエクスペリエンスは、注文して品を受け取ってソファやデザイン性のあるテーブルなどで飲み物を楽しもことができますが、このちょっとリッチな空間の提供が付加価値であり、ユーザの体験となり、リピーターが来る。
ハーレーの場合は、アメリカをイメージしやすいバイクであり、そのバイクを所有しているだけで owner ship を楽しめる。これが付加価値であり、体験を生み出す。
このようなエクスペリエンスを提供する必要性と絡めて、「機能を提供するだけなら競争優位を保てない」と話していました。

どのような付加価値をアプリケーションに持たせ、どのような体験を生み出すようにするかは、RIA を作るビジネス的に重要なポイントなのだと思います。それを提供するには、ビジネス担当者がデザイン/システムについて少しでも理解する必要があるし、デザイナーやシステムアーキテクトなども同様にお互いの領域を理解する必要がありますね。

そこで各自がどのようなロール(役割)を果たすべきか…という話がありましたが、これは資料がダウンロードできるようになったら確認してみてください。

デベロッパーに贈る！業務アプリのためのユーザーエクスペリエンス向上講座

次のセミナーは、タイトルにもあるように「業務アプリケーション」の話でした。普段Web系の仕事をメインでしているので、業務系システムに特化した話を聞けたのは新しい刺激になったように思います。

まず、業務において重要なのは『早さ』と『正確性』ということでした。これは人件費や教育コストに影響してくるから、ということですね。そして、人とアプリのコミュニケーションを『効率化』するためには、機能美が必要で芸術性については特に問われない…といったニュアンスの話が続きました。

郵便番号入力をするとAjaxで住所が補完される機能がありますが、こうした入力補助は業務アプリでは、早い上に手入力するより正確なので重宝するようです。また、日付を入力する際にカレンダーを表示するのはWebアプリでもよくありますが、数字(何らかの金額)を入力する際に電卓を表示する仕掛けなどは、ちょっと斬新だと思いました！

あとは、入力した文字を自動変換したり、枠に入りきらない文字列を「中略」と表示して全体を見せつつマウスオーバーするとフローティングで表示されるなど、ちょっとした機能によって効率化が生まれるという例に感心させられました。

マニュアルを読ませて学ばせるのではなく、アプリ上でエラーを表示させて学びながら使っていけるのも、間違える経験としてエクスペリエンスと考えることができるようです。

そこで、このようなアプリを作るためのプラットフォームとして WPF が使える、ということでした。

WPF は『機能』と『外観』が別になっているようで、外観を管理するXAMLのテンプレートを変えるだけで、フォーム要素にデザインが当てられるようです。ちょうど、FlexのMXMLのようなものですね。MXMLと同じようにXMLで定義しています。

次のセッションで、Microsoftの春日井さんがWPFについて話していたので、いい勉強になりました。

リッチクライアント最前線 (小川誉久 氏/ 小島英揮 氏/ 三野凡希 氏/ 春日井良隆 氏)

このセッションはパネルディスカッションでした。

デジタルアドバンテージ: 小川さん (モデレータ)
アドビシステムズ : 小島さん
株式会社カール : 三野さん
マイクロソフト株式会社: 春日井さん

まずは、小川さんの話で、DOSからWindowsへ変わっていくときに、やれることの本質は同じなのにどうしてマウスを操作する必要があったか、UIへの過小評価があったよね、という話がありました。これは上の東さんの『競争優位性』の話からうなづけますよね。

次に、各社がブラウザアプリ/デスクトップアプリのリッチクライアントとして用意しているアプリケーションについての話が続きました。

アドビシステムズ

Flashについて
- 顧客利用率やデベロッパーの開発率が他のプラットホームより圧倒している

Adobe AIRについて
- Webを作る知識をそのまま活かして開発ができます
- バックエンドをそのままにフロントエンドをデスクトップ化することができる
- SQLiteを使ってデスクトップにデータを置いておける

カール (Curl)

Curlってナニ?
- HTML以外の言語でアプリを構築できます
- 要するに言語で、IDE(統合開発環境)があり、SDKも出ている
- 実行するには Flashと同じようにプラグインが必要です
- 主に業務系アプリで利用されます (むしろ特化してきた)
- Windowsはもちろん、MacとLinux対応にも対応しています

オフラインモード搭載
- オフラインでも作業が続けられるようになっています
これは「業務を止めない」ということに注力しているため
- オフラインモードも作り方は同じです
FlashとAIRのような分け隔てはない
- SQLiteを使えるようだ

マイクロソフト

Silverlight
- Flashと同等と思ってください
比較対象はAIRではないです
- Macでも動きます
Linuxでも動くようになるらしい (Moonlightプロジェクト)
- .netの技術をWebで使えます
ランタイムを持っているのでC#を実行できる
それが、Macであろうと実行できる！

WPF
- デスクトップは引き続きWindowsアプリとしての開発となる
ただし、WPFは八巻さんの話にあったように『機能』と『外観』を分けて開発しやすくなっている
- デスクトップをWindowsのみに照準を絞っているのは、ぶっちゃけMacでエンタープライズ向けって必要ないでしょ?
ブラウザアプリとデスクトップアプリでは必要性が違う

これを踏まえて行われた小川さんからの質疑応答から、各社の姿勢が分かるように思います。

リッチとは?
- Adobe : 目的を達成する手段
- Curl : 効率化(生産性)のためのUserInterface
- Microsoft: ユーザエクスペリエンス (利用感)

業務系にエクスペリエンスは必要ですか?
- Adobe : 経営分析など、どういう見せ方をするかがポイント
要件出しの段階で、実ユーザから新しいエクスペリエンスが出てくることはない
つまり、提供側が引き出しを多く持っておく必要がある
- Curl : UIで生産性を上げる
- Microsoft: 使い勝手の向上

インターネットでのエクスペリエンス アプリ開発の経験は?
- Adobe : 証券会社のWebをFlexで作った
リアルタイム性と手順を減らすのに注力した
- Curl : あまりない
リテラシーの低い方の事を考えると、デファクトスタンダードになるUIをつくったらいいのでは?
- Microsoft: GyaoがSilverlightで作っている部分がある (プレーヤー部分かな?)
楽天のランキングタウン、というガジェットがあります

個人的には、Adobeにどんどん惹かれていっています ^^
それは、Webデベロッパーが同じ技術を使って開発できるプラットホームがあり、CurlやMicrosoftの製品と同じようなことが実現できるので、RIAへの近道であるためです。

次は、そのAdobe AIRについてのセッションです。

いよいよ現実となるRIA on Desktop。君はこの流れについてこれるか？

Adobe AIRの1.0があと数週間でリリースされるようです。それに続いて、90日以内で日本語版が出るだろう、と話が始まりました。

AIRの適用分野は多岐にわたるようです。それは上のセッションで小島さんが言っていたようにバックエンドを問わないため、ということです。AIRの内部にはブラウザを内包しているので、Webでできることはもちろん、Webの要求を超えることもFlashで実現できるのであれば可能なため、クライアント側の自由度がかなり高いのです。

サンプルとして、下記のアプリのデモを見ました。

▼AIR iPhone
- URL: http://www.merhl.com/?p=29 (英語)
- オリジナルウィンドウ
- 組み込みブラウザでWebページ閲覧

▼NHK時計
- URL: http://www.nhk.or.jp/lab-blog/035/4893.html
- ブログパーツ

▼AOL
- URL: http://labs.adobe.com/showcase/air/aol.html (英語)
- 音楽プレイヤー
- ウィンドウの端への吸着

▼FLO:Q ガジェット
- URL: http://blog.floq.jp/gallery/desktops/20080131/index.html
- ガジェットの保管
- 個別のアプリの起動

Adobe AIRの日本語サンプルについては↓こちらの公式ページに数点あります。

▼Adobe - AIRギャラリー
http://www.adobe.com/jp/devnet/air/gallery/

ひょっとしたら裏話かもしれませんが、AIRは携帯にも対応を検討中とのこと。そうなったらFlash Liteより全然リッチなアプリケーションが作れるようになりますね！

さて、アプリケーションがもっともっとリッチになっていくと、バックエンド側とのデータ接続において問題が 3つ存在します。
1.リアルタイム性
2.データ転送効率
3.データの同期問題

それを解消するのが LiveCycle Data Services ES と、BlazeDS です。
それぞれ↓下記のように解決するようです。

1.リアルタイム性への解決方法
200台くらいまでをHTTPデータプッシュで実現。
RTMPデータプッシュだと1000台まで実現(LiveCycleのみ)

2.データ転送効率への解決方法
AMF3というバイナリ通信を行うので高速とのこと。XMLやJSONのように生テキストでは重くなる、と言っていたので、圧縮して通信するのでしょう。
詳しくは↓こちらに書いてありました。

▼クラウドコンピューティングの決め手はバイナリーXML?アドビのAMF3が勝利するか？
http://trendy.nikkeibp.co.jp/article/column/20080111/1006042/

今後のオフライン双方向のやり取りにおいては、データは巨大化する可能性が高いのでパージングのコストに見合えば十分実用的なのかもしれません。また、同記事にはAMF3はオープンソースとして提供、とあるのでこの技術だけでも注目かもしれません。

3.データの同期問題への解決方法
データマネジメントというのがLiveCycleには付くようです。

これによって、複数台同時データ更新ができるアプリケーションが作れますよね。
とはいえ、LiveCycleは200万円ほどするそうです^^; オープンソースのBlazeはLGPLライセンスとのこと。

「3.データの同期問題」の対処方法は不明ですが、Blazeを使った複数人でインタラクティブなアプリができるとなると楽しそうですよね。

まとめ

以上がデブサミ初日のRIAのセッションのレポートです。

Web屋として RIA を制作するのであれば、やはり AIR 方面が気になりますよね。
AIRを使い、ユーザ体験を創り出すような付加価値の提供が楽にできればよいですが、そのようなインスピレーションは顧客から出てくることは期待しづらいので、様々なサンプルやサービスを自分で触っておき、どの組み合わせで制作できるか、という引き出しを整備しておくことが大切になるように思います。