「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開発』を参考にしてください。