Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ウェブアーキテクチャの歴史と未来

9,453 views

Published on

Published in: Technology
  • Be the first to comment

ウェブアーキテクチャの歴史と未来

  1. 1. ウェブアーキテクチャの 歴史と未来 株式会社ディー・エヌ・エー 奥 一穂
  2. 2. 自己紹介 <ul><li>氏名: 奥 一穂 </li></ul><ul><li>所属: 株式会社ディー・エヌ・エー </li></ul><ul><li>      システム統括本部 IT 基盤部 </li></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  3. 3. 主な仕事 <ul><li>Palmscape </li></ul><ul><ul><li>1997 年~ 後に Xiino に改名 </li></ul></ul><ul><ul><li>Palm OS 用ウェブブラウザ ( 実質世界初 ) </li></ul></ul><ul><ul><li>M.I.T. TR100/2002 受賞 </li></ul></ul><ul><ul><li>オフラインコンテンツの配信プラットフォームを兼ねる </li></ul></ul><ul><li>Web アプリケーション統合開発環境の開発 </li></ul><ul><ul><li>IPA 未踏 2004 – スーパークリエータ </li></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  4. 4. 主な仕事 (2) <ul><li>前職 : サイボウズ・ラボ株式会社 </li></ul><ul><ul><li>Japanize </li></ul></ul><ul><ul><ul><li>Web UI の日本語化サービス </li></ul></ul></ul><ul><ul><li>パストラック </li></ul></ul><ul><ul><ul><li>リアルタイムアクセス解析/データマイニングサービス </li></ul></ul></ul><ul><ul><li>Q4M </li></ul></ul><ul><ul><ul><li>メッセージキュー (MySQL の拡張 ) </li></ul></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  5. 5. アジェンダ <ul><li>ウェブアーキテクチャについて </li></ul><ul><ul><li>ウェブの何が新しかったか、および成功した理由 </li></ul></ul><ul><ul><li>技術トレンドの推移と今後について </li></ul></ul><ul><li>個人的経験をベースに語ります </li></ul><ul><ul><li>※ 会社を代表した意見ではありません </li></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  6. 6. Palmscape とは ? <ul><li>Palm OS 用ウェブブラウザ </li></ul><ul><li>1997 年 8 月公開 </li></ul><ul><ul><li>後に Xiino に改名 </li></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  7. 7. Palmscape – 当初の動作環境 <ul><li>PalmPilot Pro </li></ul><ul><ul><li>CPU: 68328 @ 16MHz </li></ul></ul><ul><ul><ul><li>初代 NeXT の 1/3 程度の速度 </li></ul></ul></ul><ul><ul><ul><li>160x160 ドットの JPEG デコードに 3 秒 </li></ul></ul></ul><ul><ul><li>ワークメモリ : 10KB 強 (TCP/IP スタックロード時 ) </li></ul></ul><ul><ul><li>スクラッチメモリ : 最大約 900KB </li></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  8. 8. Palmscape – 当時のネット回線 <ul><li>1990 年代末のインターネット </li></ul><ul><ul><li>アナログモデム ( 〜 56Kbps) or ISDN (128K) </li></ul></ul><ul><ul><li>テレホーダイ </li></ul></ul><ul><li>1990 年代末のモバイルインターネット </li></ul><ul><ul><li>赤外線公衆電話 (64Kbps) </li></ul></ul><ul><ul><li>PHS モデム (32Kbps) </li></ul></ul><ul><ul><li>PDC モデム (9.6Kbps) </li></ul></ul><ul><ul><li>アナログモデム ( 〜 10Kbps) </li></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  9. 9. Palmscape – Palm 向けの最適化 <ul><li>HTML をレンダリング用 VM 命令にコンパイル </li></ul><ul><ul><li>vs. DOM ツリー生成 </li></ul></ul><ul><li>画像を中間サーバでフォーマット変換 </li></ul><ul><ul><li>JPEG より軽いフォーマットへ </li></ul></ul><ul><ul><li>端末画面のサイズにあわせる </li></ul></ul><ul><ul><li>送信タイミングを HTML より遅らせる </li></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  10. 10. Palmscape – 中間サーバによる最適化例 <ul><li>HTTP/1.0 200 OK </li></ul><ul><li>... </li></ul><ul><li><HTML> </li></ul><ul><li>... </li></ul><ul><li><UL CLASS=&quot;rectangle&quot;> </li></ul><ul><li><LI><A HREF=&quot;/recruit/&quot;><IMG SRC=&quot;/images/top/bnr/recruit.jpg&quot; ALT=&quot; 採 </li></ul><ul><li>用情報 &quot; WIDTH=&quot;164&quot; HEIGHT=&quot;38&quot; EBDWIDTH=&quot;82&quot; EBDHEIGHT=&quot;19&quot; EBD=&quot;#1&quot; > </li></ul><ul><li></A></LI> </li></ul><ul><li><LI><A HREF=&quot;http://developer.dena.jp/mbga/&quot; TARGET=&quot;_blank&quot;><IMG SRC=&quot;/images/top/bnr/devsite.jpg&quot; ALT=&quot;DeNA デベロッパーサイト モバゲーオープ </li></ul><ul><li>ンプラットフォーム &quot; WIDTH=&quot;164&quot; HEIGHT=&quot;38&quot; EBDWIDTH=&quot;82&quot; EBDHEIGHT=&quot;19&quot; </li></ul><ul><li>EBD=&quot;#2&quot; ></A></LI> </li></ul><ul><li>... </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> <EBDIMAGE MODE=&quot;9&quot; NAME=&quot;1&quot;><!--6EsZ6Evd6Esy/Czs7TIsEt9XGRNE3+ </li></ul><ul><li>0Z7TLtEzIsKxntMu0s7RlXE+koGegAPu5qAOw/AOwsAMruPu5q7hkAVwA+7lcZV+5EAOZ </li></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  11. 11. 15 年間でのモバイル端末の進化 <ul><li>概ね 1,000 倍 </li></ul><ul><ul><li>CPU: CISC @ 16MHz ⇒ RISC 〜 1GHz </li></ul></ul><ul><ul><li>メモリ : 数 MB ⇒ GB オーダー </li></ul></ul><ul><ul><li>回線 : 〜 32Kbps ⇒ 〜 21Mbps </li></ul></ul><ul><li>cf. ムーアの法則 </li></ul><ul><ul><li>半導体集積度は 18 ヶ月〜 24 ヶ月で倍増 </li></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  12. 12. ウェブの時代は続く <ul><li>HTTP/1.1 全盛 </li></ul><ul><ul><li>消滅したプロトコル : gopher, nntp </li></ul></ul><ul><ul><li>ウェブメールだと不要 : pop3, imap </li></ul></ul><ul><ul><li>HTTP 上に定義される新プロトコル : REST, WebDAV </li></ul></ul><ul><ul><li>HTTPng の中止 </li></ul></ul><ul><li>HTML の時代は続く </li></ul><ul><ul><li>HTML 5 (vs. Flash) </li></ul></ul><ul><ul><li>XHTML 2 の廃案 </li></ul></ul><ul><li>WAP? ( 笑 ) </li></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  13. 13. <ul><li>Q. なぜウェブなのか ? </li></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  14. 14. ウェブ以前のプロトコル <ul><li>プロトコルとアプリケーションが結合 </li></ul><ul><ul><li>メール : SMTP/POP3/IMAP4 </li></ul></ul><ul><ul><li>ネットニュース : NNTP </li></ul></ul><ul><ul><li>ファイル転送 : FTP </li></ul></ul><ul><ul><li>Gopher: ファイル検索 </li></ul></ul><ul><ul><li>… </li></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  15. 15. ウェブのプロトコルはアプリケーション中立 <ul><li>HTTP – 「リソース」の転送プロトコル </li></ul><ul><ul><li>「リソース」が何かは規定しない </li></ul></ul><ul><ul><li>cf. Representational State Transfer (REST) </li></ul></ul><ul><li>HTML – ハイパーテキスト言語 </li></ul><ul><ul><li>何を記述するものかは規定しない </li></ul></ul><ul><li>⇩ </li></ul><ul><li>通信プロトコルやマークアップ言語の変化を待たずに、アプリケーションが進化可能 </li></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  16. 16. <ul><li>Q. 「より良い」プロトコルが普及しないのは、どうして ? </li></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  17. 17. HTTP/1.x は(実は ) 効率的なプロトコル <ul><li>HTTP はテキスト + バイナリ混在プロトコル </li></ul><ul><ul><li>ヘッダは可読性の高いテキスト </li></ul></ul><ul><ul><li>コンテンツは CPU 負荷の低いバイナリ </li></ul></ul><ul><ul><ul><li>ただしバイナリ長をテキストで表現 </li></ul></ul></ul><ul><ul><ul><ul><li>Content-Length, chunked エンコーディングのバイト数 </li></ul></ul></ul></ul><ul><ul><li>cf. SMTP は古典的テキストプロトコル </li></ul></ul><ul><ul><ul><li>メッセージの終わりは CR LF . CR LF を探索して検出 </li></ul></ul></ul><ul><li>仕様が明確で実装が容易かつ普及しているため、新しいプロトコルの提案は困難 </li></ul><ul><ul><li>専用プロトコルの衰退 </li></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  18. 18. 進化を続ける HTML <ul><li>「ウェブ前」を彷彿とさせるタグは非推奨に </li></ul><ul><ul><li><DIR>, <ISINDEX>, <LISTING>, … </li></ul></ul><ul><li>インタラクティブ性 </li></ul><ul><ul><li>Dynamic HTML (DOM 操作 ), XHR </li></ul></ul><ul><li>構造と体裁(デザイン)の分離 </li></ul><ul><ul><li>CSS </li></ul></ul><ul><li>そして HTML 5 へ </li></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  19. 19. ここまでのまとめ <ul><li>なぜ「ウェブの時代」なのか </li></ul><ul><ul><li>HTTP + HTML = アプリケーション中立な基盤技術 </li></ul></ul><ul><ul><li>可読性・互換性と効率性を兼ね備えた HTTP </li></ul></ul><ul><ul><li>進化を続ける HTML </li></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  20. 20. <ul><li>ウェブ技術の変遷 </li></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  21. 21. ウェブ技術の変遷 <ul><li>「ウェブ技術」のトレンドは 4 期に分類可能 </li></ul><ul><ul><li>マスコミ期 (Yahoo! 等 ) </li></ul></ul><ul><ul><li>ブログ期 (livedoor blog 等 ) </li></ul></ul><ul><ul><li>ソーシャル期 (Mixi 等 ) </li></ul></ul><ul><ul><li>リアルタイム期 (Twitter 等 ) </li></ul></ul><ul><li>時期毎に注目技術が変化 </li></ul><ul><ul><li>今はソーシャルとリアルタイムの中間あたり ? </li></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  22. 22. マスコミ期 <ul><li>代表サイト例 : Yahoo! </li></ul><ul><li>機能 : 多数の読者に同一の情報を配信 </li></ul><ul><ul><li>静的配信が基本の時代 </li></ul></ul><ul><li>コア技術 : </li></ul><ul><ul><li>httpd </li></ul></ul><ul><ul><li>一部差替 ( テンプレート , Edge-side Includes) </li></ul></ul><ul><li>技術指標 : </li></ul><ul><ul><li>httpd の同時接続数・バンド幅 </li></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  23. 23. マスコミ期 (2) <ul><li>Better FTP + Gopher としての利用 </li></ul><ul><ul><li>パフォーマンスに劣るものの、静的ファイルの配信なら ftp + HTML でも実現…できなくは…ない </li></ul></ul><ul><li>当時のトピック : </li></ul><ul><ul><li>SIMTEL20 (cdrom.com 等 ) の転送量が 417GB/ 日を記録 – 1998 年 7 月 </li></ul></ul><ul><ul><li>ファイルアーカイブの運用は、今でも興味深い話題 </li></ul></ul><ul><ul><ul><li>cf. ftp-admin.blogspot.com </li></ul></ul></ul><ul><ul><ul><ul><li>スケールアップの生きた教科書 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>アクセスの多いファイルを移動平均で抽出して SSD に載せる等 </li></ul></ul></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  24. 24. ブログ期 <ul><li>代表サイト例 : </li></ul><ul><ul><li>アメーバブログ , livedoor blog, はてなダイアリー , … </li></ul></ul><ul><ul><li>画像や動画共有サイトも : Flickr, YouTube, … </li></ul></ul><ul><li>機能 : エンドユーザーが不特定多数に発信 </li></ul><ul><li>変化 : </li></ul><ul><ul><li>ウェブ経由での入力 </li></ul></ul><ul><ul><ul><li>「アプリケーションサービス」の時代 </li></ul></ul></ul><ul><ul><ul><ul><li>ホームページ作成ソフト ⇒ ブログサービスへの移行 </li></ul></ul></ul></ul><ul><ul><li>データセットの増大 </li></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  25. 25. ブログ期 (2) <ul><li>コア技術 : </li></ul><ul><ul><li>オープンソース RDBMS </li></ul></ul><ul><ul><ul><li>大量のデータを構造化して管理 (≠ 集計 ) </li></ul></ul></ul><ul><ul><li>over HTTP な分散ファイルシステム </li></ul></ul><ul><ul><ul><li>mogilefs 等 </li></ul></ul></ul><ul><ul><li>memcached </li></ul></ul><ul><ul><ul><li>RDBMS に入れづらい「ホット」(高頻度にアクセスされるデータ)をキャッシュ </li></ul></ul></ul><ul><ul><li>シャーディング ( 水平分散 ) </li></ul></ul><ul><ul><ul><li>一定数のユーザ毎に異なるデータストアを利用 </li></ul></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  26. 26. ブログ期 (3) – キャッシュのデータ一貫性問題 <ul><li>RDB とキャッシュのデータ一貫性維持が難しい </li></ul><ul><ul><li>そもそもキャッシュを使う理由は RDB の同時接続数あるいは qps の上限が低いから </li></ul></ul><ul><ul><li>HandlerSocket plugin for MySQL (or mycached) は両者の問題を解決 </li></ul></ul><ul><ul><li>⇩ </li></ul></ul><ul><ul><li>キャッシュ不要 </li></ul></ul><ul><li>※ よりアプリケーションよりの非正規化されたキャッシュが必要な場合は別途検討が必要 </li></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  27. 27. ソーシャル期 <ul><li>代表サイト例 : </li></ul><ul><ul><li>GREE, Mixi, モバゲータウン </li></ul></ul><ul><ul><ul><li>「ソーシャル」なウェブサイト </li></ul></ul></ul><ul><ul><li>Twitter, ソーシャルゲーム系 </li></ul></ul><ul><ul><ul><li>より高頻度な更新 </li></ul></ul></ul><ul><li>コア技術 : フォロワーへの通知の捌き方 </li></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  28. 28. ソーシャル期 (2) <ul><li>ブログとの違い : </li></ul><ul><ul><li>書き込みが、より高頻度 (特に Twitter やゲーム ) </li></ul></ul><ul><ul><li>フォロワーへの通知が必要 </li></ul></ul><ul><ul><ul><li>書き込みコストはフォロワー数に依存 </li></ul></ul></ul><ul><ul><ul><li>大規模環境(シャーディング)では、複数台のデータベースへの書込が必要 </li></ul></ul></ul><ul><ul><ul><ul><li>耐障害性とレイテンシの2点が問題となる </li></ul></ul></ul></ul><ul><ul><ul><li>⇩ </li></ul></ul></ul><ul><ul><ul><li>非同期書込 (ACID から BASE へ ) </li></ul></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  29. 29. ソーシャル期 (3) - 非同期書込の実現手法 <ul><li>2 種類のモデル </li></ul><ul><ul><li>RDB + メッセージキュー + ワーカー </li></ul></ul><ul><ul><ul><li>Mixi, DeNA, livedoor 等では MQ として Q4M を利用 </li></ul></ul></ul><ul><ul><ul><li>メリット : 柔軟、複雑な処理が可能 </li></ul></ul></ul><ul><ul><ul><li>デメリット : 要プログラミング </li></ul></ul></ul><ul><ul><ul><ul><li>ワーカーを自動生成する手法も (cf. Incline) </li></ul></ul></ul></ul><ul><ul><li>非同期書込機能つき分散ストレージを使用 </li></ul></ul><ul><ul><ul><li>Cassandra 等 </li></ul></ul></ul><ul><ul><ul><li>メリット : 処理の定義が簡単 </li></ul></ul></ul><ul><ul><ul><li>デメリット : チューニング困難、複雑な処理ができない </li></ul></ul></ul><ul><ul><ul><ul><li>MQ + ワーカーモデルとの併用が必要になるケースも </li></ul></ul></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  30. 30. ソーシャル期 (4) – 図 (MQ + Worker) 2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来 DB Queue DB App サーバ App サーバ App サーバ Worker httpd
  31. 31. ソーシャル期 (5) – 図 ( 分散ストレージ ) BASE 対応分散ストレージ 2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来 (KVS) (Queue) (KVS) App サーバ App サーバ App サーバ (Worker) httpd
  32. 32. ソーシャル期 (6) – 最適化手法 <ul><li>専用サーバによる高速化 </li></ul><ul><ul><li>cf. Mixi の足あと機能における検討例 </li></ul></ul><ul><ul><ul><li>http://alpha.mixi.co.jp/blog/?p=185 </li></ul></ul></ul><ul><li>読み込み時にフォロワーリストで絞り込む方法 (Pull 型 ) </li></ul><ul><ul><li>MySQL におけるフォロワーリストの処理手法 </li></ul></ul><ul><ul><ul><li>http://labs.cybozu.co.jp/blog/kazuho/archives/2008/06/mysql_direct_access.php </li></ul></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  33. 33. リアルタイム期 <ul><li>代表サイト例 : </li></ul><ul><ul><li>Twitter (Streaming), Facebook </li></ul></ul><ul><ul><li>(PC / スマートフォンの ) ソーシャルゲーム </li></ul></ul><ul><li>機能 : 準リアルタイムコミュニケーション </li></ul><ul><ul><li>PC やスマートフォンでは Comet (long-poll) が可能 </li></ul></ul><ul><ul><li>一部のブラウザでは WebSockets が利用可能 </li></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  34. 34. リアルタイム期 (2) <ul><li>いくつかのプログラミングモデルが存在 </li></ul><ul><ul><li>suspend & resume (Jetty Continuations, …) </li></ul></ul><ul><ul><li>suspend & push (cometd, nginx, …) </li></ul></ul><ul><ul><li>独自 httpd サーバ ( イベントドリブン ) </li></ul></ul><ul><li>アプリロジック的には非同期書込の一種 </li></ul><ul><ul><li>ストレージ意外に他のクライアントへも書込 </li></ul></ul><ul><ul><li>実装の選択肢は以下の2つ : </li></ul></ul><ul><ul><ul><li>メッセージキュー + ワーカーモデル </li></ul></ul></ul><ul><ul><ul><li>httpd への通知プッシュ機能つき分散ストレージ </li></ul></ul></ul><ul><ul><ul><ul><li>もしリリースされれば </li></ul></ul></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  35. 35. リアルタイム期 (3) – 図 2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来 DB Queue DB App サーバ App サーバ App サーバ Worker httpd
  36. 36. リアルタイム期 (4) – 別解 <ul><li>Long polling の使用範囲が限定できるなら、独自サーバで頑張るのも良い選択 </li></ul><ul><ul><li>スクリプト言語で実装しても問題ないレベル </li></ul></ul><ul><ul><li>数千クライアント程度の同時接続ならハンドリング可能 </li></ul></ul><ul><ul><ul><li>http://labs.cybozu.co.jp/blog/kazuho/archives/2008/03/fastr.php </li></ul></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  37. 37. まとめ <ul><li>HTTP + HTML の時代は続く </li></ul><ul><li>ウェブの進化とともに書き込みが増加 </li></ul><ul><ul><li>非同期書込が重要に </li></ul></ul><ul><ul><li>キュー + ワーカーモデルの普及 </li></ul></ul><ul><li>RDB と NoSQL はパッケージングの違い </li></ul><ul><ul><li>やっていることは同じ </li></ul></ul><ul><ul><li>自社の技術スキルとストレージソフトウェアの実装を天秤にかけた選択をすべき </li></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  38. 38. まとめ (2) <ul><li>古いトレンド技術の変化をふりかえるべき </li></ul><ul><ul><li>過去の事例から学べることはないか </li></ul></ul><ul><ul><li>同分野の最新の手法は何か </li></ul></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来
  39. 39. ありがとうございました <ul><li>いっしょにウェブ技術の未来を切り拓いて </li></ul><ul><li>いきましょう </li></ul>2011 年 2 月 17 日 ウェブアーキテクチャの歴史と未来

×