PowerPoint プレゼンテーション

Size: px

Start display at page:

Download "PowerPoint プレゼンテーション"

しほこみおか
5 years ago
Views:

1 EC サイト構築から見えてきた開発効率向上のポイント ~MyEclipse で顧客ニーズに応えるサービスを素早く開発しよう ~ 2008 年 6 月 18 日オイシックス株式会社

2 食材宅配 EC オイシックス食材宅配の EC サイトインターネットで日本人の食生活を豊かにする 2000 年 6 月に創業 2008 年 3 月期年商 47 億円月間サイト訪問者数 117 万人メールマガジン読者数 63 万人購入経験者数 32 万人定期購入会員数人

質監査委員会オイシックスの事業概要 EC 取り扱い商品 ( 約 1400 品 )

3 質監査委員会オイシックスの事業概要 EC 取り扱い商品 ( 約 1400 品 ) 有機無農薬減農薬野菜日配品食肉類感動食品専門スーパーこだわりのスイーツお取り寄せホームページ / メール -30 代前後の小さなお子様のいる主婦 - 妊婦 -DINKS 等 - ネット食品販売サイト No.1 のポジション確立 - 定期購入スタイルがメインとなっており安定的収益の確保 -Okasix 運営により横展開可能な専門店モデルも確立店舗宅配冷凍銘菓スイーツ牛乳屋さんの食材宅配サービス牛乳販売店チラシ - シニア層 - 主婦 - 二人暮し - インターネットではサービスを提供できないシニア層へのリーチを確保 - 全国の牛乳宅配店のネットワーキングに成功

4 オイシックスの Web サイトログイン商品一覧表示商品詳細表示ショッピングカート購入フォーム各種登録変更定期購入登録 My セット販売促進

5 Oisystem-EC の構成 OS 開発言語 Application Server フレームワークデータベース CentOS Java JBoss 独自開発 Oracle

6 EC ベンチャーの開発に求められるもの急成長しなければならないノルマ 1 分 1 秒でも早く 1 円でも多く売上を上げなければならないサイトに不具合があればすぐに直さないと次々にクレームが来るお金がない人がいない時間がない PC がない開発生産性の向上は常に課題

7 開発事例 1 スイーツサイトスイーツブームに乗ってスイーツサイトを立ち上げ着手から 1 ヶ月で構築

8 開発事例 2 My セット 1 品 1 品選べるといっても毎週買うものもデフォルトセットに追加しなければならないあらかじめ登録すればそのまま届く機能登録すればするほど顧客単価が上がる開発期間 1 ヶ月

9 ポイント 1 要件定義開発生産性を上げるには要件定義が最も重要言われるままに作るのでなく本当にやりたいことは何なのかを追求する目的が明確になればそれを最短で達成できるシステムを作ればよい

10 ポイント 1 要件定義レシピブログサイト Oixi 検索の精度を向上したい言語解析? 表記のゆれ補正? ページランク?

11 ポイント 1 要件定義真の要求 1 人あたりページビューが少なく少しでも上げたい立ち上げ直後コンテンツが少なく検索で 1 件もヒットしない場合があった検索して 0 件だとそこでページを見るのをやめてしまうひらがなでなすと検索してもナスがヒットすれば 0 件になる確率が下がる検索結果 0 件のときにおすすめ記事を表示するなどの対応も考えられる

12 ポイント 2 オブジェクト指向一時のブームの時に言われたようなメリットはあまりない単純に生産性だけならソースのコピー & ペーストが一番早いしかし後で変更を複数箇所しなければならなくなりかえって全体としては工数が増えリスクも増えトラブル対応コストもかかるやはりオブジェクト指向開発にメリットはある

13 ポイント 2 オブジェクト指向例 ) 受注のキャンセル処理の実装発送予定日の 2 日前になるとキャンセルできない発送予定日より 2 日以上前ならキャンセルするキャンセルはキャンセルフラグを true にする

14 ポイント 2 オブジェクト指向パターン 1 View で実装する JuchuuData juchuu = getjuchuudata(id); java.util.date hassoudate = juchuu.gethassoudate(); if (kigen.before(hassoudate)) { juchuu.setcancelflg(true); juchuu.save(); } これでも当然正しく動作する

15 ポイント 2 オブジェクト指向パターン 2 Model で実装する View JuchuuData juchuu = getjuchuudata(id); boolean result = juchuu.cancel(); Model(JuchuuData) public boolean cancel() { kigen = 2 日後 ; if (kigen.before(gethassoudate())) { setcancelflg(true); save(); return true; } return false; } 他のページでキャンセル処理を実装するときに cancel メソッドが使える

16 ポイント 2 オブジェクト指向処理を 1 本にせずできるだけいろいろなクラスに分散させる特に model に処理を実装させるわかりやすいネーミング

17 ポイント 3 フレームワーク最初はフレームワークを自社開発フレームワークを拡張したいが余裕がない既成のフレームワークの採用

18 ポイント 3 フレームワーク Struts URL のマッピングを XML に都度定義しなければならないので最初から手を出さなかった EJB / JSF 社内システムで採用開発効率は向上した EJB は OR マッピングのみ XDoclet を併用どちらもパフォーマンスに課題があり EC サイトでは採用していない

19 ポイント 3 フレームワーク今後の採用を検討しているもの Struts2+Convention plugin アノテーションで XML 不要 Rails のような URL TopLink JPA GlassFish に採用で JPA 実装のデファクトスタンダードになるか SAStruts+S2JDBC 一連の Seasar2 のフレームワーク本当に Agile 開発できそう

20 ポイント 4 JSP と JavaScript 手っ取り早く作る場合は JSP と JavaScript を活用する期間限定のプログラム社内向けプロトタイプ既存のページの動作の変更もサーバーサイドのプログラムを変更せず JavaScript で対応できる場合がある特に DOM は強力サーバーサイドで生成した HTML を後から書き換えられる

21 ポイント 4 JSP と JavaScript hidden タグを追加する DOM の例 <script type="text/javascript"> var inp = document.createelement("input"); inp.type = "hidden"; inp.name = "KORESUKI_CARTADD"; inp.value = " "; var elm = document.getelementbyid('koresuki_block_ '); var chld = elm.childnodes; for (i=0; i<chld.length; i++) { if (chld[i].nodename == "FORM") { chld[i].appendchild(inp); } } </script>

22 ポイント 5 カスタムタグ例 ) データベースから商品データを読み取り商品ページを表示するパターン 1 テンプレートに DB のデータを流し込むこの商品の時はこういうメッセージを表示したいこのカテゴリーの時はこのバナーを出したい if 文だらけでプログラムがぐちゃぐちゃ!

23 ポイント 5 カスタムタグ例 ) データベースから商品データを読み取り商品ページを表示するパターン 2 JSP にカスタムタグをはりつける

24 ポイント 5 カスタムタグ <osx:shouhin name= niku id= xxxx /> <osx:shouhin name= niku field= image2 /> <a href=... > <osx:shouhin name= niku field= shouhinmei2 /> </a> <osx:shouhin name= niku field= icons /> 柔軟な変更が可能パーツの使いまわしがしやすい

25 ポイント 6 ツールの活用 FireBug FireFox プラグインデザインされたサイトだと HTML の解読が困難右クリック inspect element で HTML の位置がすぐわかるコードをマウスオーバーすると画面の位置が青くなる HTML や CSS JavaScript をその場で変更可能

26 ポイント 6 ツールの活用ソースにマウスオーバーで青くなる画面右クリックでソース位置特定

27 ポイント 6 ツールの活用 WebDeveloper FireFox プラグイン Cookie を参照書き換えができる table や div を枠表示できる HTTP レスポンスヘッダを表示できる

28 ポイント 6 ツールの活用 Cookie の表示 Cookie の編集

29 ポイント 6 ツールの活用ブロック要素を枠で表示

30 ポイント 6 ツールの活用 Fiddler IE 専用ツール HTTP リクエストレスポンスを自動的に補足して表示

31 ポイント 6 ツールの活用 URL リクエストレスポンス

32 ポイント 7IDE の活用最初はエディタ派 OO 開発ではたくさんのファイルを行き来するエディタではウィンドウの切り替えが煩雑 Web+DB+Java 開発ではアプリケーションサーバーや DB にウィンドウ切り替えもしなければならないボタンの位置を固定すれば効率化する import 補完タイプミスをコンパイルかける前に気づける

33 MyEclipse Eclipse ベースの IDE プラグインとしても導入可能 Java EE 開発を全面的にサポート 1 つ 1 つの機能が作りこまれ機能間の連携も良好 AJAX 開発のサポートが強力日立製作所による日本語サポートリーズナブルな価格 ( プロフェッショナル年間 6,825 円 ( 税込み ))

34 MyEclipse と WTP WTP(Web Tools Platform) があれば必要ないのでは? WTP はよくできているが実際に使っているといろいろ不足を感じる部分がある MyEclipse はそういった不足をカバーしている

35 Tomcat,Derby 内蔵 MyEclipse は Tomcat と Derby がデフォルトで内蔵されているセットアップも済んでいてクリックするだけで起動するインストール直後から開発が可能 DB ツール Hibernate ツールとも連携されている

36 JSP/JSF エディタビジュアル開発ができるフリーのプラグインではビジュアル開発できるものでいいものがないデザインされたページではビジュアル開発は重宝する

37 JSP/JSF エディタ JSF

38 JSP/JSF エディタプレビューでは IE プレビューと Mozilla プレビューが同時に出る

39 Hibernate サポート Hibernate は組み込み済み DB のメタデータからソースと XML 定義を自動的に生成 EJB3.0, JPA も同様にできるバージョン 2, 3, 3.1 の全てに対応分離したツールでなく機能が統合されていることに意味がある

40 Hibernate サポート自動生成の様子

41 展開ディレクトリに対応 WTP でできないことの例 WTP では必ず EAR でデプロイされる大規模サイトで大量の JSP がある場合使い物にならない MyEclipse では展開ディレクトリ形式が選択できる変更した JSP だけワークスペースからアプリケーションサーバーに変更が反映される

42 展開ディレクトリに対応

43 AJAX のデバッグ AJAX はうまくいけば簡単だがうまくいかないと原因を調べるのが非常に難しい MyEclipse は AJAX のデバッグ機能も非常に充実している JavaScript デバッガ AJAX の通信のやりとりを補足して表示できる

44 AJAX のデバッグ JavaScript も Java と同様にデバッグできるステップ実行変数の表示

45 AJAX のデバッグ AJAX リクエストモニター AJAX のトランザクションリクエストの内容レスポンスの内容

46 おわりにオイシックスのお中元をよろしくお願いします! 検索ワード : oisix お中元ご静聴ありがとうございました

1. 開発ツールの概要 1.1 OSS の開発ツール本書では OSS( オープンソースソフトウェア ) の開発ツールを使用します一般に OSS は営利企業ではない特定のグループが開発するソフトウェアでソースコードが公開されており無償で使用できます OSS は誰でも開発に参加できますが大規模な

1. 開発ツールの概要 1.1 OSS の開発ツール本書では OSS( オープンソースソフトウェア ) の開発ツールを使用します一般に OSS は営利企業ではない特定のグループが開発するソフトウェアでソースコードが公開されており無償で使用できます OSS は誰でも開発に参加できますが大規模な OSS の場合企業などから支援を受けて安定した財政基盤の下で先端的なソフトウェアを開発しています企業にとっても