DEV-008_Developing on the Edge. ～Web プラットフォームと Cordova～

1. ROOM
J

4. Microsoft Edge と Windows 10 の
Web プラットフォーム

5. Window 10 の 2 つの Web ブラウザー
～ 異なる描画エンジンと JavaScript エンジン～
EdgeHTML.dll MSHTML.dll
相互運用性
既定のブラウザ
モダン Web サイト向け
JavaScript ベースの拡張
互換性
ActiveX, BHO, ツールバー,
VB Script,etc…
IE11 IE10 IE9 IE8 IE7 IE5.5
★
Edge

6. アプリケーションでの Edge エンジンの利用
UWP
Win8.x
Win32
EdgeHTML(Edge)
MSHTML(Trident)

7. EdgeHTMLの新機能と
これからの方向性

8. 2016 年の方向性
～先行実装された機能を使用可能に～
拡張機能
アクセシビリティ
基本機能
新しい機能
コミュニティ
http://bit.ly/msedge2016lookingahead

9. Insider Preview の Edge に搭載された新機能
• Web Speech API (synthesis)
• Fetch API
• Beacon
• Web Notifications
• Web RTC
• OPUS open audio
• VP9 open video playback
• WOFF File Format 2.0
• FIDO 2.0 Password-Less API
• Canvas 2D path2D
• Ambient Light Events
• Color input type
• <data> Element
• <output> Element
• <time> Element
• Default parameter (ES2015)
• Destructuring (ES2015)
• Generators (ES2015)
• SIMD (after ES2016)
• Exponentiation Operator (ES2016)
• Array.prototype.includes (ES2016)
• Async Functions (after ES2016)

10. • BCP-47 言語選択
• Windows にインストールされている言語が対象
• 音声の選択
• 音量
• 速度
• SSML 入力
Web Speech API (synthesis)
window.speechSynthesis.speak('こんにちは世界');
Hello World!

11. • ネットワークリクエストと
レスポンスをGeneralizesする
• Promise ベース
• ServiceWorker の
ネットワーク管理ための
ビルディングブロック
Fetch API fetch
method
header
content-Type
body
then res
res ok
res status 401

12. Web Notifications
• アクションセンターと統合
• カスタムアイコン、タイトル、メッセージ
var notify = new Notification(
"New message from Bob!",
{icon: "bob.png", title: "Microsoft Bob"}
);
notify.onclick =
function(){ showBobsMessage(); };

13. WOFF 2.0
WOFF 1.0 を超える更なる圧縮性を提供する
フォント・パッケージ・フォーマット
WOFF 1.0 より平均 30% 以上節約

14. RTC の相互運用性
API サポート
Codec サポート
ORTC Web RTC 1.0
EdgeHTML 13 Yes No
EdgeHTML 15 Yes Yes
H.264 UC H.264 VP8
EdgeHTML 13 Yes No No
EdgeHTML 15 Yes Yes Yes

15. その他 • OPUS open audio
• VP9 open video playback
• High Resolution Time Level 2
• Folder Drag Drop
• FIDO 2.0 Password-Less API
• Beacon
• アクセシビリティ関連のエレメント:
• <input type=color> コントロール
• <time> エレメント
• <output>エレメント

16. ＋
Chromium

17. Web プラットフォームを
利用したアプリ開発

18. Windows 10 Web プラットフォームの利用
HostedPackage Web View

20. Package アプリと Hosted アプリ
Package
Hosted
コンテンツの配置場所くらいしか違いがない

21. Hosted
Web or アプリ "だけ" よりも
発見率/使用率アップが期待できる

23. HTML
CSS
JS
.appx __ ×
Universal Windows Platform
http://mysite.com

27. Tools for Apache Cordova が提供する機能
デバッグ
> 4.4 : 〇
< 4.4 : ×
iOS : ×
• Android 2.33+(4.4◎)
• iOS 6 , 7 , 8, 9
• Windows 8, 8.1
• Windows Phone 8, 8.1
• Windows 10 (UWP)
ターゲット
ビルド
iOS : ×
: 〇
エミュレーター
: 〇
iOS : 〇 (Ripple)
iOS アプリのビルドには
Mac が必要
(Hyper-V
&Ripple)
: 〇
: 〇Store 8, 8,1
Phone 8.1
: ×Phone 8
: 〇 (Hyper-V)
“ ”
コード補完
Windows10
(UWP) : 〇

29. //アプリケーションの URL を追加
<allow-navigation
href="https://contoso.com/myApp" />

30. Apache Cordova を使用した
ホスト型 Web アプリの作成
http://bit.ly/
howto_cordova_hosted

32. Ripple Android
Monaca Debugger
(iOS/Android) Windows Phone

33. その他
HTML5 と JavaScript で
作られたアプリケーションを
ネイティブな “hosted” アプリに
一括変換
http://www.manifoldjs.com/
Web でも、ローカルでも
(npm でインストール)
iOS

34. その他
https://github.com/ReactWindows/
react-native
Facebook が開発 した
Reactjs ベースでネイティブアプリを
構築できるSDK
iOS

35. Windows 10
Web プラットフォーム
+ たくさんの API
Universal Windows Platform
React
Native

36. 関連セッション
• ARC-003
「モダン Web: たった今と、ほんの少し未来の話」
• 場所 ルーム F
• 時間 9:30 – 10:30
• CHK-007
「Windows 10 のブラウザー、Edge のこれからについて」
• 場所 いちょう
• 時間 14:25 – 15:25

37. アンケートにご協力ください。
●アンケートに 上記の Session ID のブレイクアウトセッションに
チェックを入れて下さい。
●アンケートはお帰りの際に、受付でご提出ください。
マイクロソフトスペシャルグッズと引換えさせていただきます。

38. ROOM J
Ask the Speaker のご案内
●本セッションの詳細は、EXPO 会場内
『Ask the Speaker』コーナー
Room A カウンタにてご説明させて
いただきます。是非、お立ち寄りください。
Ask the Speaker
EXPO会場MAP