最近は「ECサイト」の現場でもリッチインターネットアプリケーション（以下、RIA）のニーズがだいぶ高まってきているという。不況打開の見通しがつかない中、仕事の幅を広げる意味でも、RIA事例の最新動向を把握しておくとよいかもしれない。
そこで今回、RIAの代表的な技術の一つ「Adobe Flex」を利用してサイト内のサービスをリニューアルした株式会社MonotaROの古畑 耕輔氏と、その制作を請け負ったgenephics design, Inc.（以下、gd）の湊 隆太朗氏に、発注や開発の背景について伺ってみた。
ターゲットとなったのは、主に製造業者向けの工具や部品を取り扱うECサイト「MonotaRO.com」（モノタロウドットコム）。一方、genephics designは今年のAdobe AIR Contest 2009の審査員や、エンタープライズRIAセミナーでのセッションを担当する等、近年RIA分野で活躍している注目の企業だ。
デジタルコンテンツ／ウェブサイト制作を手がける「genephics design, Inc.」（右）
継続的な利用を考え「デザイン」と「システム開発」の両軸を重視
――ECサイトにRIAを導入するケースは増えてきているんでしょうか？
gd 湊氏：いつの時代と比較するかにもよりますが、少なくとも弊社が法人化した2005年ごろに比べると、爆発的に増えています。ただ、現時点ではフロントエンドを全面的にFlash／Flex化するのはSEO（検索エンジン最適化）やLPO（到着ページ最適化）の観点から厳しいものがあるので、今回のMonotaRO様の事例のように、ユーザーのマイページや、バックエンドの受注/出荷/発注システムへRIAを導入するケースがほとんどです。
それ以外では、Eコマースの基本的な機能はHTMLとJavaScriptで構築し、そこへの誘導策としてRIAを活用するのも有効だと思います。最近の、商品へのリンク付きデジタルチラシやアパレル系のバーチャル試着などの流行に表されるように、単にカタログ情報を見せるだけでなく、きちんと商品購入ページへの導線までを考慮したRIAに置き換わりつつあります。
RIAというキーワードの定義自体が曖昧なのですが、「ネットで商品を購入する」という行為がより便利に、より効率的に進化してゆく過程で、RIA技術の採用は大きな役割を担っていると感じています。
2、3年前までは、RIA開発環境はお世辞にも使いやすいのとは言い難かったのですが、今ではFlex Builderを筆頭にかなり充実してきました。同時にRIA開発のノウハウも蓄積し、安定した開発を行えるようになってきましたので、開発者はもとより、発注者つまりECサイトの運営者様にとっても、RIAへの投資リスクはどんどん少なくなってきていると言えます。
――今回、開発会社を選んだ経緯は？
MonotaRO 古畑氏：弊社ではB2Bにおける消耗品のネット通販を行っているので、同じ商品を繰り返し買う「リピート注文」が非常に多い傾向があります。そのため、お客様が過去に購入した商品をいかに簡単かつ直感的にご購入いただけるか、という利便性の向上が必要でした。そこでビジュアル面に強いRIAを検討することにしました。
スペシャルサイト的な使い切りのサービスではなく、お客様に継続して使っていただくものを予定していたので、デザイン面だけでなく仕様変更や機能追加に耐えれるメンテナンス性など、システム面にも強い会社を探しました。
いくつかの開発会社と打ち合わせさせて頂いたのですが、その両方を兼ね備えた提案を頂けたのはgenephics design様だけでしたので、迷わずお願いすることとなりました。
提案に幅をもたらすRIAの表現力
――抱えていた問題点をどのように解決したのでしょうか？
gd 湊氏：MonotaRO様からは、繰り返しの購買が多いお客様の利便性を向上させるため、「買ったものリスト」というサービスをRIA化したい、というリクエストをいただきました。「リピーターのお客様がいかに容易に再購入できるか？」が一番のポイントです。
要件定義の段階では、リピーター向けの機能立案に多くの時間を割き、MonotaRO様を含むプロジェクトメンバー全員で議論しました。最終的にボツになった案も含め、本当にたくさんのアイデアを出し合いましたが、いくつか代表的なものを挙げると、下記のようなものがありました。
時間軸表示による購入履歴の検索
ある程度購買時期が決まっている季節商品（夏は工場扇、冬はストーブ等）や、購入サイクルの決まっている商品など、「あの時買った商品」を簡単に探す機能が欲しいという要望がありました。
過去に買ったモノを再購入する場合、購入履歴から買ったモノを検索する必要がありますが、購入したモノが増えるにつれて購入履歴からの検索が困難になってきます。この点をクリアするために、履歴をタイムラインで表示する機能を考えました。
他メーカー商品情報
購入履歴を基に、メーカーや価格が異なる商品をアシストしてあげるという機能です。いわゆるレコメンデーション機能ですね。コピー用紙や軍手などが好例ですが、お客様が同じ商品を定期購入する際に「こんなのもありますよ！」と、そっと知らせてあげるものです。
付箋機能
付箋機能は、買ったモノや注文単位に対して、本物の付箋を貼りつけるようにドラッグアンドドロップで操作できるようにしました。過去の買ったモノに対してメモ書きができ、また付箋を表示することで視覚的なフィルタリングも行います。
検索ランチャー
ユーザーマイページからの繰り返し購入ですから、「お客様にオペレーションを学習してもらう機能も有効ではないか？」という発想で生まれたのが、コンテンツ内のランチャー機能です。ちょうどキーボードショートカットと同じような位置づけです。
これらの機能案は、豊かな表現力を持ったRIAだからこそ提案できるのであり、逆にいえば、RIAのおかげでいろいろなアイデアを考えられたのだと思います。
「RIA投資に見合う効果」を意識し考え抜くことが最重要
――実際にどのような形で実装したのでしょうか？ またその際工夫した点や苦労した点などがあれば。
gd 湊氏：こちらがFlexで実装した「買ったモノ履歴タイムライン」です（下図参照）。横軸に日付、縦軸に時間をとり買ったモノ履歴をサムネイル画像付きで表示しています。
サムネイル右上のボタンをクリックすると取引の詳細画面が開きます。サムネイル画像をショッピングカートへドラッグ＆ドロップすると、その時の同じ取引内容（商品と購入数）がショッピングカートに入るため、定期的なセット購入などが非常に便利に行えます。詳細画面からドラッグ＆ドロップすることで商品単位でカートへ追加することもでき、タイムライン表示では視覚的かつ直感的な検索が行えます。
購入履歴タイムラインは、標準コンポーネントだけでは表現しきれないため、フルスクラッチで作成する必要がありました。標準コンポーネントでは意識することがない一つ一つの挙動や振舞いまですべて作りこんだため、通常の何倍もの工数がかかりましたが、多彩な表現を加えることができました。
中でも一番の苦労した点は、やはりパフォーマンスです。
こちらは、RIAで実装した「買ったモノリスト」です（下図参照）。履歴件数が多くなると比例して処理時間も必要となり、パフォーマンスに問題が出てきます。「買ったモノリスト」ではパフォーマンスを向上するため、初期状態では表示されている十数点の商品分の要素しか生成しません。ユーザーがスクロールを行うタイミングで、次に表示する商品の要素を生成するようにしています。こうすることで、件数が大量に増えた場合でもスムーズに表示でき、ユーザーのストレスを軽減できるようになりました。
こういった手法もRIAだからこそできるテクニックだと思います。このほかにも、FlexやFlashのノウハウを最大限に活用し、パフォーマンスを向上させています。もちろん、仕様で制限を設けた箇所もありますが。
ちなみにサーバーサイドの既存システムはPythonで作成されていたので、今回はフロントにPyAMFを使用することで、既存システムとの連携を比較的簡単に行うことができました。
Flexでは、サーバーサイドとバイナリ形式でデータをやりとりするAMF（Action Message Format）というメッセージ形式が用意されている。PyAMFは、そのAMFを扱うためのPythonのライブラリ。
――改修後のシステムに関する感想は？
MonotaRO 古畑氏：ECサイト全体での「1注文当りの平均購入商品数」を比べると、改修の前後で3.06 SKU（在庫管理上の商品の単位）から3.62 SKUと、約18％アップしました。これは、先述の工夫やページング処理の実装など、検索や閲覧のしやすさを改善した結果、お客様が一度に処理できる情報量が増えたおかげだと考えています。
また、今回は「お客様が過去に購入した商品をいかに簡単かつ直感的にご購入いただけるか」をメインテーマにしたので、どちらかというとある程度弊社をご利用頂いているお客様向けのサービスのRIA化でした。
次は比較的新しいお客様にも便利にお使い頂けるようなサービスでRIAを適用できないかを検討しています。
――開発者に向けてメッセージがありましたら、ひとことお願いします。
gd 湊氏：冒頭でもお話ししたように、「ネットで商品を購入する」という行為は、より便利に、より効率的に今後もどんどん進化していくでしょう。RIA技術はその進化の役割を多く担っています。とりわけFlexはRIA技術の中でも非常に歴史の長い部類に入り、Flashの歴史を含めれば膨大なノウハウと実績もあります。
現在では、FlexのSDKがオープンソースとして開発されているので無料で使用することができますし、開発環境も充実しています。統合開発環境のFlex BuilderはEclipseをベースに作られているため、Javaを始め、多くの開発者が違和感なく操作できるはずです。様々なサーバーサイド技術との連係もスムーズに行えるため、ぜひFlexを覚え、顧客満足度の高いアプリケーション・システムづくりを目指してみてはいかがでしょうか（編集部注）。
なお、Flexによる開発は確かに豊かな表現性をもったアプリケーションを構築できますが、単純にFlexを採用するだけでは効果が出ないことも多々あります。当たり前ですが、今回のように要件やUIをしっかりと考えることが最重要ポイントになってきます。
また、Flex技術をビジネスに利用する場合は、RIA投資に対する効果をきちんと出さなければなりません。そういった、「ビジネスのためのRIA」について弊社のノウハウをご紹介する無料セミナー（エンタープライズRIAセミナー）を10月16日に開催しますので、そちらを利用していただくのも一つの方法です。
Flex Builderの試用版は、アドビシステムズ社のWebサイトから入手でき、60日間無償で全機能を利用することができます。また、Flexの概要やFlex Builder試用版の導入手順については『試してみよう！ FlexではじめるRIA開発』を参考にしてください。
