1. Developers
Summit
2013
ウェブブラウザの
時代は終わるのか
〜～スマホアプリとHTML5の未来〜～
February
14,
2013
奥 ⼀一穂
株式会社ディー・エヌ・エー
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

2. Developers
Summit
2013
本プレゼンテーションは個⼈人の考えを述べた
ものであり、株式会社ディー・エヌ・エーの
⽴立立場や⽅方針を反映したものではありません。
2
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

3. Developers
Summit
2013
⾃自⼰己紹介
n 1997-‐‑‒2003 Palmscape / Xiino の開発
⁃ Palm OS⽤用ウェブブラウザ
• 実質世界初
⁃ Sony, IBM, NTTドコモ等が採⽤用
n 2004 「Webアプリ統合開発環境の開発」
⁃ IPA未踏スーパークリエータ
3
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

4. Developers
Summit
2013
⾃自⼰己紹介
n 2005-‐‑‒2010 サイボウズ・ラボ
⁃ ウェブ関連のR&D業務
⁃ Japanize / Pathtraq
• ウェブブラウザ拡張を使うサービス
⁃ Q4M
• メッセージキュー（MySQLプラグイン）
• Mixi, NHN, DeNA等で使⽤用
4
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

5. Developers
Summit
2013
⾃自⼰己紹介
n 2011-‐‑‒ 株式会社ディー・エヌ・エー
⁃ ウェブ関連のR&D業務
• ngCore（スマホ向けゲームエンジン）
• JSX（プログラミング⾔言語）
5
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

6. Developers
Summit
2013
アジェンダ
n ウェブが破壊したもの
n iPhoneの登場とスマホアプリ
n ウェブvs.アプリ
⁃ 哲学的な話
⁃ 市場的な話
⁃ 技術的な話
n まとめ
6
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

7. Developers
Summit
2013
ウェブが破壊したもの
7
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

8. Developers
Summit
2013
Images
by
ScoC
Lawrence
(jsl@absynth.com),
MicrosoI
CorporaJon 8
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

9. Developers
Summit
2013
20年年前...
n 1993年年
⁃ PC-‐‑‒9801BX2
• 486SX@25MHz, RAM1.8MB
⁃ Macintosh Color Classic
• 68030@16MHz, RAM4MB, HDD40MB
⁃ 漢字Talk 7.1（1992年年秋）
⁃ Windows 3.1
9
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

10. Developers
Summit
2013
20年年前...
n CUIからGUIへの移⾏行行期
⁃ 同時にマルチタスク化
n PCは⽣生産作業のためのツール
⁃ ⼀一太郎郎, Excel, MIFES, PageMaker
n （⼀一部では）パソコン通信
10
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

11. Developers
Summit
2013
hCp://www.niIy.com/25th/niIyserve/
11
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

12. Developers
Summit
2013
20年年前...
n GUIが競争⼒力力の源泉
⁃ Apple vs. Microsoft裁判
• 1988-‐‑‒1994
• WindowsのGUIがAppleの著作権を侵害?
→ Apple敗訴
12
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

13. Developers
Summit
2013
GUIの基本操作
n GUIの基本操作
⁃ シングルクリック=選択
⁃ ダブルクリック=デフォルトアクション
Before performing an operation on an object, the user
must select it, usually by clicking it, to distinguish it
from other objects. Selecting the object to be operated
on before identifying the operation itself is a funda-‐‑‒
mental characteristic of the Macintosh human inter-‐‑‒
face. 〜～ This is often called the “noun-‐‑‒verb paradigm.”
– Apple Human Interface Guidelines
13
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

14. Developers
Summit
2013
ところが...
n 1995年年 インターネットブーム
⁃ Netscape が上場
⁃ Internet Explorer 1
⁃ Yahoo! Inc. 創業
n コミュニケーションツールとしての PC
14
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

15. Developers
Summit
2013
ウェブブラウザのUI
n OS⾮非依存（別名: オレオレUI）
⁃ ロケーションバー
⁃ シングルクリック＝ページ遷移
⁃ SDI（タブ）
n 貧弱
⁃ 例例: 画像をドラッグ＆ドロップでフォー
ム⼊入⼒力力できない
15
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

16. Developers
Summit
2013
マイクロソフト社の戦略略
n ウェブブラウザはOS間の差をなくす
→ OSメーカーにとっては危機
n Internet Explorerを無料料バンドル
→ 競合の排除
⁃ 独⾃自仕様で囲い込み
• Java独⾃自拡張, ActiveX
n IEを⾜足がかりにサーバ側へ進出
⁃ msn.com
16
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

17. Developers
Summit
2013
Google社の戦略略
n マイクロソフト社のブラウザ⽀支配は危険
⁃ Mozilla Firefoxを⽀支援
n PC上で「しか」できないことをなくそう
⁃ V8でJavaScriptの速度度向上
⁃ Google Apps
17
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

18. Developers
Summit
2013
ここまでのまとめ
n クライアントアプリの⻑⾧長所を消すのがウェ
ブ企業の戦略略
n ブラウザをバンドルすることでウェブ企業
に対抗するのがマイクロソフト社の戦略略
n ユーザビリティは進化せず
⁃ むしろ悪化というべき
• ウェブサイト毎に異異なるオレオレUI
18
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

19. Developers
Summit
2013
iPhoneの登場とスマホアプリ
19
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

20. Developers
Summit
2013
Apple社の戦略略
n アプリならではの⻑⾧長所を引き出す
⁃ ホーム画⾯面への露露出
⁃ 通知
⁃ オフライン動作
⁃ アプリならではのUI
n エコシステムを構築
⁃ AppStore
20
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

21. Developers
Summit
2013
スマホへのブラウザアプリ最適化
n 不不可能ではない
⁃ ホームへの露露出 → ブックマーク
⁃ 通知 → メール
⁃ オフライン動作 → Offline Web Apps.
⁃ UI → jQuery Mobile, etc.
n だがiOS専⽤用に作るならアプリの⽅方が簡単
⁃ Androidの場合も同様
⁃ ブラウザ間の差異異が問題に
21
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

22. Developers
Summit
2013
Objective-‐‑‒C開発者の増加
hCp://www.Jobe.com/index.php/content/paperinfo/tpci/index.html
22
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

23. Developers
Summit
2013
スマホアプリ=進化したウェブアプリ?
n 通信はHTTP、UIはネイティブ
n 「ウェブより優れた」ユーザー経験を提供
⁃ Google Maps
⁃ Facebook
⁃ Twitter
⁃ ...
23
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

24. Developers
Summit
2013
ウェブは終わり。これからはアプリの時代?
24
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

25. Developers
Summit
2013
ウェブvs.アプリ
25
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

26. Developers
Summit
2013
哲学的な話
26
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

27. Developers
Summit
2013
ウェブとは何か?
n ウェブの基本３要素
⁃ HTML
⁃ HTTP
⁃ URI
27
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

28. Developers
Summit
2013
ウェブが成功した鍵=URI
ウェブにおけるそれら（基本「プロトコル」）を重要度度の順に挙
げると、まずURI、HTTP、そしてHTMLであった。
（中略略）
ウェブの根本原則は、いったん誰かが、どこかに⽂文書を（中略略）
公開したら、リンクを共有することで、誰もが、どこにいても、ど
んなコンピューターを使ってもその情報にアクセスできるというも
のだ。この点が、それまでのコンピューターシステムのアプローチ
と哲学的に異異なっていた。
-‐‑‒ Weaving THE WEB (Tim Berners-‐‑‒Lee)
28
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

29. Developers
Summit
2013
ウェブが成功した鍵=URI
n URI以前:「○○掲⽰示板の３件⽬目の△△さん
の発⾔言」
n URI以後: http://t.co/Us9Mi…
29
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

30. Developers
Summit
2013
ウェブが成功した鍵=URI
n Google検索索があるのもURIのおかげ
⁃ クローラはURIをたどって情報を収集
n URIによるハイパーリンク
→ 役割分担と競争
• 検索索エンジンの場合:
⁃ ODiN, Yahoo!, Altavista, Lycos, goo,
excite, Google, bing, NAVER, ...
• AppStore の場合は?
30
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

31. Developers
Summit
2013
スマホアプリ=ウェブを補完する存在
n ⽬目的を限定して「ウェブより優れた」ユー
ザー経験を提供
n URIはない
31
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

32. Developers
Summit
2013
市場的な話
32
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

33. Developers
Summit
2013
スマホアプリ市場の⼤大きさ(世界)
n 両社の主⼒力力ビジネス（ハードウェア/広告）
を補完する存在
n AppStoreの四半期売上は約14億⽶米ドル
⁃ Google Playはその1/4程度度（らしい）
hCp://techcrunch.com/2012/10/25/apple-­‐sets-­‐all-­‐Jme-­‐record-­‐for-­‐quarterly-­‐app-­‐store-­‐sales-­‐700k-­‐apps-­‐275k-­‐for-­‐ipad-­‐6-­‐5b-­‐paid-­‐to-­‐devs/
hCp://news.cnet.com/8301-­‐1035_3-­‐57560218-­‐94/google-­‐play-­‐surges-­‐but-­‐apples-­‐app-­‐store-­‐is-­‐sJll-­‐no-­‐1/
33
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

34. Developers
Summit
2013
スマホアプリ市場の規模感
n ⽇日本のウェブ市場
⁃ ネット通販: 7.8兆円
⁃ ネット広告: 8,100億円
⁃ ソーシャルゲーム: 3,900億円
n スマホアプリ市場
⁃ 6,000億円前後（世界四半期推計から換算）
国内市場の数値はそれぞれ下記参照
hCp://www.dentsu.co.jp/news/release/2012/pdf/2012017-­‐0223.pdf
hCp://www.yano.co.jp/market_reports/C54101500
hCp://www.yano.co.jp/press/press.php/001053
34
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

35. Developers
Summit
2013
全てのウェブサイトがアプリ化する?
n アプリ化のメリットはサービス毎に異異なる
⁃ SNS
⁃ ニュースサイト
⁃ ECプラットフォーム（例例: Amazon）
⁃ 零零細ネット通販（例例: 伊⾖豆の⼲干物屋）
n アプリ化によるデメリットも
⁃ 開発コスト
⁃ 頻繁な更更新ができない
35
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

36. Developers
Summit
2013
技術的な話
36
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

37. Developers
Summit
2013
進化するウェブブラウザ
n JavaScript
n WebGL
n Web Audio API
n PNaCl
n W3C Push API
37
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

38. Developers
Summit
2013
進化するウェブブラウザ
n iOSのJavaScript実⾏行行速度度は１年年で2倍に
⁃ さらに⾼高速化の余地あり
• Parallel GC, optimization, etc.
38
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

39. Developers
Summit
2013
進化するウェブブラウザ
n WebGLへの対応
⁃ Chrome 25 beta for Androidで対応
• ただし、デフォルトオフ
⁃ シェーダーを使った表現が可能に
n Web Audio API
⁃ 効果⾳音再⽣生や⾳音声合成等
⁃ iOS 6で対応
⁃ Chrome for Androidは今年年前半
hCp://code.google.com/p/chromium/issues/detail?id=166003
39
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

40. Developers
Summit
2013
PNaCl (Portable Native Client)
n Native Clientとは?
⁃ ブラウザのサンドボックス上でネイティ
ブコードを動かす技術
⁃ Google Chromeに搭載
n PNaClとは?
⁃ LLVM bitcodeでバイナリ配布
⁃ ウェブブラウザがネィティブコードにコ
ンパイルして実⾏行行
40
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

41. Developers
Summit
2013
PNaCl (Portable Native Client)
n PNaCl完成時には、⼀一般のウェブサイトに配
置されたバイナリが実⾏行行可能になる予定
n 進捗:
⁃ 昨年年末に、SDKがPNaCl対応完了了
⁃ Chromeの対応は、これから
41
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

42. Developers
Summit
2013
W3C Push API
n ウェブサイトからスマホへのプッシュ通知
⁃ 通知を受けるとブラウザが起動して通知
を処理理
n 2012年年10⽉月に最初のWorking Draft
n Firefox OSが別⽅方式での実装を予定
⁃ 当初はアプリのみ
42
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

43. Developers
Summit
2013
事例例: ngCore on HTML5
n ngCoreとは?
⁃ DeNAが提供するゲーム開発環境
⁃ JavaScriptでゲームアプリ開発
• Android / iOS対応
• OpenGL等のネイティブAPIを利利⽤用
n ngCore on HTML5とは?
⁃ ngCore⽤用ゲームをウェブブラウザで
⁃ 2年年前は夢物語だと⾔言われた。今は?
43
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

44. Developers
Summit
2013
hCp://www.atmarkit.co.jp/fwcr/design/ux/d89clip43/01.html 44
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

45. Developers
Summit
2013
まとめ
45
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

46. Developers
Summit
2013
まとめ
n スマホアプリとウェブブラウザは相互補完
の関係にある
⁃ UIに優れるスマホアプリ
⁃ 幅広い⽤用途に対応するウェブブラウザ
n それでも敢えて⽐比較するなら…
46
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

47. Developers
Summit
2013
Pros and Cons
n スマホアプリ
○ デバイスの能⼒力力を最⼤大限引き出せる
× OS毎の開発が必要
n ブラウザアプリ
○ 不不⾜足していた機能が実装されつつあ
る
× ブラウザ間の互換性問題
47
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

48. Developers
Summit
2013
アプリの⽤用途別分類(例例)
スマホアプリ向き 利利⽤用頻度度⾼高
SNS ゲーム
メッセンジャー ニュースサイト
⾼高度度なUI 機種⾮非依存
ECサイト
利利⽤用頻度度低 ウェブアプリ向き
48
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

49. Developers
Summit
2013
アクション
ウェブブラウザに限らず「○○にはできな
い」と決めつけていることはありませんか?
⾃自分の中の常識識を問いなおしてみませんか?
49
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.

50. Developers
Summit
2013
ご清聴ありがとうございました
50
Copyright
(C)
2013
DeNA
Co.,Ltd.
All
Rights
Reserved.