SlideShare a Scribd company logo
1 of 39
Download to read offline
ウェブアーキテクチャの
   歴史と未来
  株式会社ディー・エヌ・エー
      奥 一穂
自己紹介

     氏名: 奥 一穂
     所属: 株式会社ディー・エヌ・エー
         システム統括本部 IT基盤部




2011年2月17日   ウェブアーキテクチャの歴史と未来   2
主な仕事

     Palmscape
         1997年~ 後に Xiino に改名
         Palm OS 用ウェブブラウザ (実質世界初)
         M.I.T. TR100/2002 受賞
         オフラインコンテンツの配信プラットフォームを兼ねる
     Webアプリケーション統合開発環境の開発
         IPA 未踏 2004 – スーパークリエータ



2011年2月17日        ウェブアーキテクチャの歴史と未来   3
主な仕事 (2)

     前職: サイボウズ・ラボ株式会社
         Japanize
             Web UI の日本語化サービス
         パストラック
             リアルタイムアクセス解析/データマイニングサービス
         Q4M
             メッセージキュー (MySQLの拡張)




2011年2月17日           ウェブアーキテクチャの歴史と未来    4
アジェンダ

     ウェブアーキテクチャについて
         ウェブの何が新しかったか、および成功した理由
         技術トレンドの推移と今後について
     個人的経験をベースに語ります
         ※会社を代表した意見ではありません




2011年2月17日      ウェブアーキテクチャの歴史と未来   5
Palmscape とは?

     Palm OS用ウェブブラウザ
     1997年8月公開
         後に Xiino に改名




2011年2月17日         ウェブアーキテクチャの歴史と未来   6
Palmscape – 当初の動作環境

     PalmPilot Pro
         CPU: 68328 @ 16MHz
             初代NeXTの1/3程度の速度
             160x160ドットのJPEGデコードに3秒
         ワークメモリ: 10KB強 (TCP/IPスタックロード時)
         スクラッチメモリ: 最大約900KB




2011年2月17日            ウェブアーキテクチャの歴史と未来    7
Palmscape – 当時のネット回線

     1990年代末のインターネット
         アナログモデム (〜56Kbps) or ISDN (128K)
         テレホーダイ
     1990年代末のモバイルインターネット
         赤外線公衆電話 (64Kbps)
         PHSモデム (32Kbps)
         PDCモデム (9.6Kbps)
         アナログモデム (〜10Kbps)


2011年2月17日          ウェブアーキテクチャの歴史と未来        8
Palmscape – Palm 向けの最適化

     HTMLをレンダリング用VM命令にコンパイ
     ル
         vs. DOMツリー生成
     画像を中間サーバでフォーマット変換
         JPEGより軽いフォーマットへ
         端末画面のサイズにあわせる
         送信タイミングをHTMLより遅らせる



2011年2月17日        ウェブアーキテクチャの歴史と未来   9
Palmscape – 中間サーバによる最適化例
  HTTP/1.0 200 OK
  ...

  <HTML>
  ...
  <UL CLASS="rectangle">
  <LI><A HREF="/recruit/"><IMG SRC="/images/top/bnr/recruit.jpg" ALT="採
  用情報" WIDTH="164" HEIGHT="38" EBDWIDTH="82" EBDHEIGHT="19" EBD="#1">
  </A></LI>
  <LI><A HREF="http://developer.dena.jp/mbga/" TARGET="_blank"><IMG
  SRC="/images/top/bnr/devsite.jpg" ALT="DeNA デベロッパーサイト モバゲーオープ
  ンプラットフォーム" WIDTH="164" HEIGHT="38" EBDWIDTH="82" EBDHEIGHT="19"
  EBD="#2"></A></LI>
  ...
  </BODY>
  </HTML><EBDIMAGE MODE="9" NAME="1"><!--6EsZ6Evd6Esy/Czs7TIsEt9XGRNE3+
  0Z7TLtEzIsKxntMu0s7RlXE+koGegAPu5qAOw/AOwsAMruPu5q7hkAVwA+7lcZV+5EAOZ

2011年2月17日                  ウェブアーキテクチャの歴史と未来                              10
15年間でのモバイル端末の進化

     概ね1,000倍
         CPU: CISC @ 16MHz    ⇒ RISC 〜1GHz
         メモリ: 数MB             ⇒ GBオーダー
         回線: 〜32Kbps          ⇒ 〜21Mbps
     cf. ムーアの法則
         半導体集積度は18ヶ月〜24ヶ月で倍増




2011年2月17日          ウェブアーキテクチャの歴史と未来         11
ウェブの時代は続く

     HTTP/1.1 全盛
         消滅したプロトコル: gopher, nntp
         ウェブメールだと不要: pop3, imap
         HTTP 上に定義される新プロトコル: REST, WebDAV
         HTTPng の中止
     HTML の時代は続く
         HTML 5 (vs. Flash)
         XHTML 2 の廃案
     WAP? (笑)
2011年2月17日             ウェブアーキテクチャの歴史と未来   12
Q. なぜウェブなのか?




2011年2月17日     ウェブアーキテクチャの歴史と未来   13
ウェブ以前のプロトコル

     プロトコルとアプリケーションが結合
       メール: SMTP/POP3/IMAP4
       ネットニュース: NNTP
       ファイル転送: FTP
       Gopher: ファイル検索
      …




2011年2月17日        ウェブアーキテクチャの歴史と未来   14
ウェブのプロトコルはアプリケーション中立

     HTTP – 「リソース」の転送プロトコル
         「リソース」が何かは規定しない
         cf. Representational State Transfer (REST)
     HTML – ハイパーテキスト言語
         何を記述するものかは規定しない
            ⇩
  通信プロトコルやマークアップ言語の変化を
   待たずに、アプリケーションが進化可能
2011年2月17日             ウェブアーキテクチャの歴史と未来               15
Q. 「より良い」プロトコルが普及しないのは、
              どうして?



2011年2月17日   ウェブアーキテクチャの歴史と未来   16
HTTP/1.x は(実は)効率的なプロトコル

     HTTP はテキスト+バイナリ混在プロトコル
         ヘッダは可読性の高いテキスト
         コンテンツは CPU 負荷の低いバイナリ
             ただしバイナリ長をテキストで表現
               Content-Length, chunked エンコーディングのバイト数
         cf. SMTP は古典的テキストプロトコル
             メッセージの終わりは CR LF . CR LF を探索して検出

     仕様が明確で実装が容易かつ普及してい
     るため、新しいプロトコルの提案は困難
         専用プロトコルの衰退
2011年2月17日              ウェブアーキテクチャの歴史と未来               17
進化を続ける HTML

     「ウェブ前」を彷彿とさせるタグは非推奨に
         <DIR>, <ISINDEX>, <LISTING>, …
     インタラクティブ性
         Dynamic HTML (DOM操作), XHR
     構造と体裁(デザイン)の分離
         CSS
     そして HTML 5 へ

2011年2月17日           ウェブアーキテクチャの歴史と未来     18
ここまでのまとめ

     なぜ「ウェブの時代」なのか
         HTTP + HTML = アプリケーション中立な基盤技術
         可読性・互換性と効率性を兼ね備えた HTTP
         進化を続ける HTML




2011年2月17日       ウェブアーキテクチャの歴史と未来        19
ウェブ技術の変遷




2011年2月17日    ウェブアーキテクチャの歴史と未来   20
ウェブ技術の変遷

     「ウェブ技術」のトレンドは4期に分類可能
         マスコミ期 (Yahoo! 等)
         ブログ期 (livedoor blog 等)
         ソーシャル期 (Mixi 等)
         リアルタイム期 (Twitter 等)
     時期毎に注目技術が変化
         今はソーシャルとリアルタイムの中間あたり?



2011年2月17日           ウェブアーキテクチャの歴史と未来   21
マスコミ期

     代表サイト例: Yahoo!
     機能: 多数の読者に同一の情報を配信
         静的配信が基本の時代
     コア技術:
         httpd
         一部差替 (テンプレート, Edge-side Includes)
     技術指標:
         httpd の同時接続数・バンド幅

2011年2月17日          ウェブアーキテクチャの歴史と未来         22
マスコミ期 (2)

     Better FTP + Gopher としての利用
         パフォーマンスに劣るものの、静的ファイルの配信な
         ら ftp + HTML でも実現…できなくは…ない
     当時のトピック:
         SIMTEL20 (cdrom.com 等) の転送量が 417GB/日
         を記録 – 1998年7月
         ファイルアーカイブの運用は、今でも興味深い話題
             cf. ftp-admin.blogspot.com
                スケールアップの生きた教科書
                アクセスの多いファイルを移動平均で抽出してSSDに載せる等

2011年2月17日                ウェブアーキテクチャの歴史と未来      23
ブログ期

     代表サイト例:
         アメーバブログ, livedoor blog, はてなダイアリー, …
         画像や動画共有サイトも: Flickr, YouTube, …
     機能: エンドユーザーが不特定多数に発信
     変化:
         ウェブ経由での入力
             「アプリケーションサービス」の時代
              ホームページ作成ソフト ⇒ ブログサービスへの移行
         データセットの増大
2011年2月17日          ウェブアーキテクチャの歴史と未来       24
ブログ期 (2)

     コア技術:
         オープンソース RDBMS
             大量のデータを構造化して管理 (≠集計)
         over HTTP な分散ファイルシステム
             mogilefs 等
         memcached
             RDBMS に入れづらい「ホット」(高頻度にアクセスされる
             データ)をキャッシュ
         シャーディング (水平分散)
             一定数のユーザ毎に異なるデータストアを利用

2011年2月17日                ウェブアーキテクチャの歴史と未来   25
ブログ期 (3) – キャッシュのデータ一貫性問題

     RDB とキャッシュのデータ一貫性維持が難
     しい
         そもそもキャッシュを使う理由は RDB の同時接続数
         あるいは qps の上限が低いから
         HandlerSocket plugin for MySQL (or mycached)
         は両者の問題を解決
                                ⇩
                         キャッシュ不要

  ※よりアプリケーションよりの非正規化されたキャッシュが必要な場合は別途検討が必要

2011年2月17日            ウェブアーキテクチャの歴史と未来              26
ソーシャル期

     代表サイト例:
         GREE, Mixi, モバゲータウン
             「ソーシャル」なウェブサイト
         Twitter, ソーシャルゲーム系
             より高頻度な更新

     コア技術: フォロワーへの通知の捌き方



2011年2月17日          ウェブアーキテクチャの歴史と未来   27
ソーシャル期 (2)

     ブログとの違い:
         書き込みが、より高頻度 (特に Twitter やゲーム)
         フォロワーへの通知が必要
             書き込みコストはフォロワー数に依存
             大規模環境(シャーディング)では、複数台のデータベース
             への書込が必要
              耐障害性とレイテンシの2点が問題となる
                           ⇩
                  非同期書込 (ACID から BASE へ)



2011年2月17日          ウェブアーキテクチャの歴史と未来       28
ソーシャル期 (3) - 非同期書込の実現手法

     2種類のモデル
         RDB + メッセージキュー + ワーカー
             Mixi, DeNA, livedoor 等では MQ として Q4M を利用
             メリット: 柔軟、複雑な処理が可能
             デメリット: 要プログラミング
               ワーカーを自動生成する手法も (cf. Incline)
         非同期書込機能つき分散ストレージを使用
             Cassandra 等
             メリット: 処理の定義が簡単
             デメリット: チューニング困難、複雑な処理ができない
               MQ + ワーカーモデルとの併用が必要になるケースも
2011年2月17日              ウェブアーキテクチャの歴史と未来               29
ソーシャル期 (4) – 図 (MQ + Worker)


                              Queue
             Appサーバ                   Worker


                               DB
    httpd    Appサーバ


                               DB
             Appサーバ




2011年2月17日        ウェブアーキテクチャの歴史と未来             30
ソーシャル期 (5) – 図 (分散ストレージ)


                             (Queue)
             Appサーバ                        (Worker)


                              (KVS)
    httpd    Appサーバ


                              (KVS)
             Appサーバ
                                BASE 対応分散ストレージ




2011年2月17日        ウェブアーキテクチャの歴史と未来                    31
ソーシャル期 (6) – 最適化手法

     専用サーバによる高速化
         cf. Mixi の足あと機能における検討例
             http://alpha.mixi.co.jp/blog/?p=185

     読み込み時にフォロワーリストで絞り込む
     方法 (Pull型)
         MySQL におけるフォロワーリストの処理手法
             http://labs.cybozu.co.jp/blog/kazuho/archives/2008/06/
             mysql_direct_access.php



2011年2月17日                ウェブアーキテクチャの歴史と未来                       32
リアルタイム期

     代表サイト例:
         Twitter (Streaming), Facebook
         (PC / スマートフォンの) ソーシャルゲーム
     機能: 準リアルタイムコミュニケーション
         PCやスマートフォンでは Comet (long-poll) が可能
         一部のブラウザでは WebSockets が利用可能




2011年2月17日         ウェブアーキテクチャの歴史と未来           33
リアルタイム期 (2)

     いくつかのプログラミングモデルが存在
         suspend & resume (Jetty Continuations, …)
         suspend & push (cometd, nginx, …)
         独自 httpd サーバ (イベントドリブン)
     アプリロジック的には非同期書込の一種
         ストレージ意外に他のクライアントへも書込
         実装の選択肢は以下の2つ:
             メッセージキュー + ワーカーモデル
             httpd への通知プッシュ機能つき分散ストレージ
              もしリリースされれば
2011年2月17日            ウェブアーキテクチャの歴史と未来               34
リアルタイム期 (3) – 図


                              Queue
             Appサーバ                   Worker


                               DB
    httpd    Appサーバ


                               DB
             Appサーバ




2011年2月17日        ウェブアーキテクチャの歴史と未来             35
リアルタイム期 (4) – 別解

     Long polling の使用範囲が限定できるなら、
     独自サーバで頑張るのも良い選択
         スクリプト言語で実装しても問題ないレベル
         数千クライアント程度の同時接続ならハンドリング可
         能
             http://labs.cybozu.co.jp/blog/kazuho/archives/2008/03/
             fastr.php




2011年2月17日                ウェブアーキテクチャの歴史と未来                       36
まとめ

     HTTP + HTML の時代は続く
     ウェブの進化とともに書き込みが増加
         非同期書込が重要に
         キュー + ワーカーモデルの普及
     RDB と NoSQL はパッケージングの違い
         やっていることは同じ
         自社の技術スキルとストレージソフトウェアの実装を
         天秤にかけた選択をすべき

2011年2月17日      ウェブアーキテクチャの歴史と未来    37
まとめ (2)

     古いトレンド技術の変化をふりかえるべき
         過去の事例から学べることはないか
         同分野の最新の手法は何か




2011年2月17日     ウェブアーキテクチャの歴史と未来   38
ありがとうございました




      いっしょにウェブ技術の未来を切り拓いて
             いきましょう



2011年2月17日   ウェブアーキテクチャの歴史と未来   39

More Related Content

Viewers also liked

Modern Governor for Bristol School Governors, July 2013
Modern Governor for Bristol School Governors, July 2013Modern Governor for Bristol School Governors, July 2013
Modern Governor for Bristol School Governors, July 2013
Elaine Walton
 

Viewers also liked (19)

Personal Branding
Personal BrandingPersonal Branding
Personal Branding
 
Launch Your Real Estate Business in 30 Days
Launch Your Real Estate Business in 30 DaysLaunch Your Real Estate Business in 30 Days
Launch Your Real Estate Business in 30 Days
 
Trip of a lifetime
Trip of a lifetimeTrip of a lifetime
Trip of a lifetime
 
Zara
ZaraZara
Zara
 
Wie betaalt, bepaalt!
Wie betaalt, bepaalt! Wie betaalt, bepaalt!
Wie betaalt, bepaalt!
 
96 Years of Temporary Taxation in Canada [infographic] via FBC
96 Years of Temporary Taxation in Canada [infographic] via FBC96 Years of Temporary Taxation in Canada [infographic] via FBC
96 Years of Temporary Taxation in Canada [infographic] via FBC
 
5 Dos and 5 Don'ts of Networking!
5 Dos and 5 Don'ts of Networking!5 Dos and 5 Don'ts of Networking!
5 Dos and 5 Don'ts of Networking!
 
Tips for Nonprofit Directors and Officers
Tips for Nonprofit Directors and OfficersTips for Nonprofit Directors and Officers
Tips for Nonprofit Directors and Officers
 
Step by step deployment of sampleappv406
Step by step deployment of  sampleappv406Step by step deployment of  sampleappv406
Step by step deployment of sampleappv406
 
Installing ms office 2010
Installing ms office 2010Installing ms office 2010
Installing ms office 2010
 
Euros pp
Euros ppEuros pp
Euros pp
 
Modern Governor for Bristol School Governors, July 2013
Modern Governor for Bristol School Governors, July 2013Modern Governor for Bristol School Governors, July 2013
Modern Governor for Bristol School Governors, July 2013
 
The Beginners Guide to VA Home Loans by Low VA Rates
The Beginners Guide to VA Home Loans by Low VA RatesThe Beginners Guide to VA Home Loans by Low VA Rates
The Beginners Guide to VA Home Loans by Low VA Rates
 
Noticias TEL junio 2012
Noticias TEL  junio 2012Noticias TEL  junio 2012
Noticias TEL junio 2012
 
Connecting to the remote database through sql developer without database clie...
Connecting to the remote database through sql developer without database clie...Connecting to the remote database through sql developer without database clie...
Connecting to the remote database through sql developer without database clie...
 
Windows server 2012 and group policy
Windows server 2012 and group policyWindows server 2012 and group policy
Windows server 2012 and group policy
 
Removing babylon toolbar from browsers
Removing babylon toolbar from browsersRemoving babylon toolbar from browsers
Removing babylon toolbar from browsers
 
How can A/B testing go wrong?
How can A/B testing go wrong?How can A/B testing go wrong?
How can A/B testing go wrong?
 
Circuit
Circuit Circuit
Circuit
 

Similar to 【17-A-5】ウェブアーキテクチャの歴史と未来

ウェブアーキテクチャの歴史と未来
ウェブアーキテクチャの歴史と未来ウェブアーキテクチャの歴史と未来
ウェブアーキテクチャの歴史と未来
Kazuho Oku
 
Lesson01
Lesson01Lesson01
Lesson01
MRI
 
Google Compute EngineとPipe API
Google Compute EngineとPipe APIGoogle Compute EngineとPipe API
Google Compute EngineとPipe API
maruyama097
 
Google Compute EngineとGAE Pipeline API
Google Compute EngineとGAE Pipeline APIGoogle Compute EngineとGAE Pipeline API
Google Compute EngineとGAE Pipeline API
maruyama097
 
Share pointを支えるsql server2014最新情報 tokyo_公開用
Share pointを支えるsql server2014最新情報 tokyo_公開用Share pointを支えるsql server2014最新情報 tokyo_公開用
Share pointを支えるsql server2014最新情報 tokyo_公開用
Yukio Kumazawa
 

Similar to 【17-A-5】ウェブアーキテクチャの歴史と未来 (20)

ウェブアーキテクチャの歴史と未来
ウェブアーキテクチャの歴史と未来ウェブアーキテクチャの歴史と未来
ウェブアーキテクチャの歴史と未来
 
Lesson01
Lesson01Lesson01
Lesson01
 
Web on Kernel
Web on KernelWeb on Kernel
Web on Kernel
 
Google Compute EngineとPipe API
Google Compute EngineとPipe APIGoogle Compute EngineとPipe API
Google Compute EngineとPipe API
 
Google Compute EngineとGAE Pipeline API
Google Compute EngineとGAE Pipeline APIGoogle Compute EngineとGAE Pipeline API
Google Compute EngineとGAE Pipeline API
 
Cld018 コンテナ go_~あなた
Cld018 コンテナ go_~あなたCld018 コンテナ go_~あなた
Cld018 コンテナ go_~あなた
 
Cld018 コンテナ go_~あなた
Cld018 コンテナ go_~あなたCld018 コンテナ go_~あなた
Cld018 コンテナ go_~あなた
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
 
Dotnetlab 20110827
Dotnetlab 20110827Dotnetlab 20110827
Dotnetlab 20110827
 
勉強会資料①
勉強会資料①勉強会資料①
勉強会資料①
 
Kilimanjaro Event
Kilimanjaro EventKilimanjaro Event
Kilimanjaro Event
 
Speed Up Web 2012
Speed Up Web 2012Speed Up Web 2012
Speed Up Web 2012
 
Share pointを支えるsql server2014最新情報 tokyo_公開用
Share pointを支えるsql server2014最新情報 tokyo_公開用Share pointを支えるsql server2014最新情報 tokyo_公開用
Share pointを支えるsql server2014最新情報 tokyo_公開用
 
Logs are better with elastic apm 20210623
Logs are better with elastic apm 20210623Logs are better with elastic apm 20210623
Logs are better with elastic apm 20210623
 
Browser and Mozilla
Browser and MozillaBrowser and Mozilla
Browser and Mozilla
 
これから利用拡大?WebSocket
これから利用拡大?WebSocketこれから利用拡大?WebSocket
これから利用拡大?WebSocket
 
BPStudy20121221
BPStudy20121221BPStudy20121221
BPStudy20121221
 
OSSとクラウドによるコンピューティングモデルの変化
OSSとクラウドによるコンピューティングモデルの変化OSSとクラウドによるコンピューティングモデルの変化
OSSとクラウドによるコンピューティングモデルの変化
 
WebDAV, ATOM, and REST
WebDAV, ATOM, and RESTWebDAV, ATOM, and REST
WebDAV, ATOM, and REST
 
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介
 

More from Developers Summit

【15-A-5】ゲーミフィケーションエバンジェリストが説く、アプリ開発で見落としがちな「おもてなし」とは~面白さを伝える × 面白く魅せる~
【15-A-5】ゲーミフィケーションエバンジェリストが説く、アプリ開発で見落としがちな「おもてなし」とは~面白さを伝える × 面白く魅せる~【15-A-5】ゲーミフィケーションエバンジェリストが説く、アプリ開発で見落としがちな「おもてなし」とは~面白さを伝える × 面白く魅せる~
【15-A-5】ゲーミフィケーションエバンジェリストが説く、アプリ開発で見落としがちな「おもてなし」とは~面白さを伝える × 面白く魅せる~
Developers Summit
 

More from Developers Summit (20)

【18-A-2】ゲーミフィケーション・エバンジェリストが見る「あなたの技術力が“ワクワクするサービス”に変わる未来」
【18-A-2】ゲーミフィケーション・エバンジェリストが見る「あなたの技術力が“ワクワクするサービス”に変わる未来」【18-A-2】ゲーミフィケーション・エバンジェリストが見る「あなたの技術力が“ワクワクするサービス”に変わる未来」
【18-A-2】ゲーミフィケーション・エバンジェリストが見る「あなたの技術力が“ワクワクするサービス”に変わる未来」
 
【C-2・小林様】AIとAPIがITインフラにもたらす変化 ~プログラマブルなクラウド型Wi-Fi~
【C-2・小林様】AIとAPIがITインフラにもたらす変化 ~プログラマブルなクラウド型Wi-Fi~【C-2・小林様】AIとAPIがITインフラにもたらす変化 ~プログラマブルなクラウド型Wi-Fi~
【C-2・小林様】AIとAPIがITインフラにもたらす変化 ~プログラマブルなクラウド型Wi-Fi~
 
【C-2・醍醐様】AIとAPIがITインフラにもたらす変化 ~プログラマブルなクラウド型Wi-Fi~
【C-2・醍醐様】AIとAPIがITインフラにもたらす変化 ~プログラマブルなクラウド型Wi-Fi~【C-2・醍醐様】AIとAPIがITインフラにもたらす変化 ~プログラマブルなクラウド型Wi-Fi~
【C-2・醍醐様】AIとAPIがITインフラにもたらす変化 ~プログラマブルなクラウド型Wi-Fi~
 
【B-4】オープンソース開発で、フリー静的解析ツールを使ってみる
【B-4】オープンソース開発で、フリー静的解析ツールを使ってみる【B-4】オープンソース開発で、フリー静的解析ツールを使ってみる
【B-4】オープンソース開発で、フリー静的解析ツールを使ってみる
 
【B-6】Androidスマホの生体認証の脆弱性、調べてみたらよくある話だった。
【B-6】Androidスマホの生体認証の脆弱性、調べてみたらよくある話だった。【B-6】Androidスマホの生体認証の脆弱性、調べてみたらよくある話だった。
【B-6】Androidスマホの生体認証の脆弱性、調べてみたらよくある話だった。
 
【13-B-6】Hondaの生産技術屋さんがソフトウェア開発でアジャイルを初導入し組織変革に挑戦
【13-B-6】Hondaの生産技術屋さんがソフトウェア開発でアジャイルを初導入し組織変革に挑戦【13-B-6】Hondaの生産技術屋さんがソフトウェア開発でアジャイルを初導入し組織変革に挑戦
【13-B-6】Hondaの生産技術屋さんがソフトウェア開発でアジャイルを初導入し組織変革に挑戦
 
【15-E-7】セキュアな環境でDevOpsを実現する厳選ツール
【15-E-7】セキュアな環境でDevOpsを実現する厳選ツール【15-E-7】セキュアな環境でDevOpsを実現する厳選ツール
【15-E-7】セキュアな環境でDevOpsを実現する厳選ツール
 
【15-E-7】セキュアな環境でDevOpsを実現する厳選ツール
【15-E-7】セキュアな環境でDevOpsを実現する厳選ツール【15-E-7】セキュアな環境でDevOpsを実現する厳選ツール
【15-E-7】セキュアな環境でDevOpsを実現する厳選ツール
 
【14-E-3】セキュリティ・テストの自動化によるDevSecOpsの実現 (デモ有)
【14-E-3】セキュリティ・テストの自動化によるDevSecOpsの実現 (デモ有)【14-E-3】セキュリティ・テストの自動化によるDevSecOpsの実現 (デモ有)
【14-E-3】セキュリティ・テストの自動化によるDevSecOpsの実現 (デモ有)
 
【15-D-2】デンソーのMaaS開発~アジャイル開発で顧客との協調・チームビルディング・実装概要~
【15-D-2】デンソーのMaaS開発~アジャイル開発で顧客との協調・チームビルディング・実装概要~【15-D-2】デンソーのMaaS開発~アジャイル開発で顧客との協調・チームビルディング・実装概要~
【15-D-2】デンソーのMaaS開発~アジャイル開発で顧客との協調・チームビルディング・実装概要~
 
【14-C-8】みんなの暮らしを支えるAmazon S3の裏側、お伝えします
【14-C-8】みんなの暮らしを支えるAmazon S3の裏側、お伝えします【14-C-8】みんなの暮らしを支えるAmazon S3の裏側、お伝えします
【14-C-8】みんなの暮らしを支えるAmazon S3の裏側、お伝えします
 
【14-C-7】コンピュータビジョンを支える深層学習技術の新潮流
【14-C-7】コンピュータビジョンを支える深層学習技術の新潮流【14-C-7】コンピュータビジョンを支える深層学習技術の新潮流
【14-C-7】コンピュータビジョンを支える深層学習技術の新潮流
 
【15-B-7】無意味なアラートからの脱却 ~ Datadogを使ってモダンなモニタリングを始めよう ~
【15-B-7】無意味なアラートからの脱却 ~ Datadogを使ってモダンなモニタリングを始めよう ~【15-B-7】無意味なアラートからの脱却 ~ Datadogを使ってモダンなモニタリングを始めよう ~
【15-B-7】無意味なアラートからの脱却 ~ Datadogを使ってモダンなモニタリングを始めよう ~
 
【15-A-1】ドラゴンクエストXを支える失敗事例
【15-A-1】ドラゴンクエストXを支える失敗事例【15-A-1】ドラゴンクエストXを支える失敗事例
【15-A-1】ドラゴンクエストXを支える失敗事例
 
【15-A-5】ゲーミフィケーションエバンジェリストが説く、アプリ開発で見落としがちな「おもてなし」とは~面白さを伝える × 面白く魅せる~
【15-A-5】ゲーミフィケーションエバンジェリストが説く、アプリ開発で見落としがちな「おもてなし」とは~面白さを伝える × 面白く魅せる~【15-A-5】ゲーミフィケーションエバンジェリストが説く、アプリ開発で見落としがちな「おもてなし」とは~面白さを伝える × 面白く魅せる~
【15-A-5】ゲーミフィケーションエバンジェリストが説く、アプリ開発で見落としがちな「おもてなし」とは~面白さを伝える × 面白く魅せる~
 
【B-2】福岡発Node.jsで支える大規模システム!〜「誰ガ為のアルケミスト」と歩んだ三年〜
【B-2】福岡発Node.jsで支える大規模システム!〜「誰ガ為のアルケミスト」と歩んだ三年〜【B-2】福岡発Node.jsで支える大規模システム!〜「誰ガ為のアルケミスト」と歩んだ三年〜
【B-2】福岡発Node.jsで支える大規模システム!〜「誰ガ為のアルケミスト」と歩んだ三年〜
 
【B-5】モダンな開発を実現するツールチェーンのご紹介
【B-5】モダンな開発を実現するツールチェーンのご紹介【B-5】モダンな開発を実現するツールチェーンのご紹介
【B-5】モダンな開発を実現するツールチェーンのご紹介
 
【C-2】メモリも、僕のキャパシティも溢れっぱなし。。2年目エンジニアが実現した機械学習
【C-2】メモリも、僕のキャパシティも溢れっぱなし。。2年目エンジニアが実現した機械学習【C-2】メモリも、僕のキャパシティも溢れっぱなし。。2年目エンジニアが実現した機械学習
【C-2】メモリも、僕のキャパシティも溢れっぱなし。。2年目エンジニアが実現した機械学習
 
【A-2】とあるマーケティング部隊とデータエンジニアのデータドリブンへの道
【A-2】とあるマーケティング部隊とデータエンジニアのデータドリブンへの道【A-2】とあるマーケティング部隊とデータエンジニアのデータドリブンへの道
【A-2】とあるマーケティング部隊とデータエンジニアのデータドリブンへの道
 
【B-2】AI時代におけるエンジニアの生存戦略
【B-2】AI時代におけるエンジニアの生存戦略【B-2】AI時代におけるエンジニアの生存戦略
【B-2】AI時代におけるエンジニアの生存戦略
 

【17-A-5】ウェブアーキテクチャの歴史と未来

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