SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

事例インタビュー(AD)

ECサイトにも着実に浸透が進むRIA
Adobe Flexをビジネスに適用する勘所とは

Adobe Flex導入事例 「MonotaRO.com」

  • X ポスト
  • このエントリーをはてなブックマークに追加

「RIA投資に見合う効果」を意識し考え抜くことが最重要

――実際にどのような形で実装したのでしょうか? またその際工夫した点や苦労した点などがあれば。

gd 湊氏:こちらがFlexで実装した「買ったモノ履歴タイムライン」です(下図参照)。横軸に日付、縦軸に時間をとり買ったモノ履歴をサムネイル画像付きで表示しています。

 サムネイル右上のボタンをクリックすると取引の詳細画面が開きます。サムネイル画像をショッピングカートへドラッグ&ドロップすると、その時の同じ取引内容(商品と購入数)がショッピングカートに入るため、定期的なセット購入などが非常に便利に行えます。詳細画面からドラッグ&ドロップすることで商品単位でカートへ追加することもでき、タイムライン表示では視覚的かつ直感的な検索が行えます。

買ったモノ履歴タイムライン(商品のサムネイルをドラッグ&ドロップしてカートに入れることができる)
買ったモノ履歴タイムライン(商品のサムネイルをドラッグ&ドロップしてカートに入れることができる)

 購入履歴タイムラインは、標準コンポーネントだけでは表現しきれないため、フルスクラッチで作成する必要がありました。標準コンポーネントでは意識することがない一つ一つの挙動や振舞いまですべて作りこんだため、通常の何倍もの工数がかかりましたが、多彩な表現を加えることができました。

 中でも一番の苦労した点は、やはりパフォーマンスです。

 こちらは、RIAで実装した「買ったモノリスト」です(下図参照)。履歴件数が多くなると比例して処理時間も必要となり、パフォーマンスに問題が出てきます。「買ったモノリスト」ではパフォーマンスを向上するため、初期状態では表示されている十数点の商品分の要素しか生成しません。ユーザーがスクロールを行うタイミングで、次に表示する商品の要素を生成するようにしています。こうすることで、件数が大量に増えた場合でもスムーズに表示でき、ユーザーのストレスを軽減できるようになりました。

買ったモノリスト
買ったモノリスト

 こういった手法もRIAだからこそできるテクニックだと思います。このほかにも、FlexやFlashのノウハウを最大限に活用し、パフォーマンスを向上させています。もちろん、仕様で制限を設けた箇所もありますが。

 ちなみにサーバーサイドの既存システムはPythonで作成されていたので、今回はフロントにPyAMFを使用することで、既存システムとの連携を比較的簡単に行うことができました。

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日に開催しますので、そちらを利用していただくのも一つの方法です。

Adobe Flexを学び始めるには

 Flex Builderの試用版は、アドビシステムズ社のWebサイトから入手でき、60日間無償で全機能を利用することができます。また、Flexの概要やFlex Builder試用版の導入手順については『試してみよう! FlexではじめるRIA開発』を参考にしてください。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
事例インタビュー連載記事一覧

もっと読む

この記事の著者

CodeZine編集部(コードジンヘンシュウブ)

CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4477 2009/10/15 14:40

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング