イベントに参加できなかった方に向けてセッションの内容を記事にまとめましたので、ぜひご覧ください。

この記事では、昨今話題に上ることが多いPWAことProgressive Webアプリケーションについて、実際の作り方を解説しながら、それがいったいどういったものであるかを詳(つまび)らかに紹介することを目的としています。

Webでは、「ネイティブアプリと同じことができる」「ネイティブアプリを置き換える」など、期待に胸を膨らませずにいられない浪漫に満ちた噂がありますが、それが本当かどうか記事をご覧いただくとご理解いただけると思います。

Progressive Web Appsの作り方を紹介する前に、簡単に概要を紹介しましょう。

Progressive Web Appsとは?

Progressive Web Apps(以下PWAと記述) は、一言でいうならば「ネイティブアプリのようなUXを提供するWebアプリの概念」といったところでしょう。2015年の11月に開催されたChrome Dev Summit 2015のキーノートで発表されて話題となりました。

もともとは、その年の10月にAlex Russell氏(Google)がブログ記事に投稿した、クライアントの性能に合わせて段階的に進歩するWebアプリケーションのコンセプトでした。

PWAというと、”ネイティブアプリのような体験”といった特徴ばかりが注目されますが、大きな特徴がもう一つあります。それは、PWAという名前にも含まれているProgressiveというところです。

これはHTML5が普及しはじめた頃にあった、「HTML5が解釈できるモダンブラウザーにはリッチな体験を、そうでないブラウザーには従来とおなじ体験を」というデザインの考え方 Progressive Enhancementに由来します。

PWAはこの思想を踏襲し、性能の低いWebブラウザーを切り捨てることなく、クライアントの性能に合わせた機能提供を行います。

PWAは、性能の低いWebブラウザーからアクセスがあった場合は従来と同じWebページとして動作し、PWAが動作する機能を備えたWebブラウザーからアクセスがあった場合は、その機能を活かし、これまでのWebアプリにはなかったネイティブアプリのような体験を提供します。

Progressive Web Appsを実現する機能

それでは、”これまでのWebアプリにはなかったネイティブアプリのような体験”というのはどのようなものがあるでしょう?

代表的なものとしては以下の4つが挙げられます。

1. オフラインサポート
2. プッシュ通知
3. バックグラウンド処理
4. デバイスへのインストール(デバイスのホーム画面から起動できる)

これらはの機能はそれぞれ以下のような新しいAPIによって実現されます。

1. オフラインサポート – Cache API
2. プッシュ通知 – Push API
3. バックグラウンド処理 – Background Sync
4. デバイスへのインストール(OSのメニューから起動できる) – Web App Manifest

そして、これらの機能を提供しているのが1～3がService Workerで、4がWeb App Manifestです。

PWAの定義に明確なものはありませんが、上記の機能の中からオフラインサポートと、インストール（アイコンをデバイスのホーム画面に追加）機能をサポートしていれば、PWAを名乗ってもそう否定されることはないでしょう。

これらの機能により、デバイスのホーム画面から、ナビゲーションバーなどのブラウザーUIがない状態でアプリケーションを起動し、オフラインの状態でも使用できる、という体験をユーザーに提供できます。これらの体験は、これまでのWebアプリケーションにはなかったネイティブアプリのならではのメリットと言えるでしょう。

それでは、逆に Web ならではのメリットとはなんでしょう?

Webのメリット

ネイティブアプリにはないWebならではのメリットを、Googleさんのイベントではよく以下のSLICEという言葉で表しています。

• Secure (安全)
• Linkable (リンク可能)
• Indexable (インデックス可能)
• Composable (再構成可能)
• Ephemeral (一時的な利用)

これら従来のWebとネイティブアプリの体験上のメリットを合わせたものが、PWAのメリットとなります。

Progressive Web Appsが提供する価値

PWAの提供する価値について、GoogleさんのイベントではよくFIREという言葉で紹介されていますが、

• Fast: パフォーマンスの良い、軽快な動作
• Integrated: OSと統合されたユーザー体験
• Reliable: オフラインでも動作する利便性と信頼性
• Engaging: Webサイトの価値向上

この記事ではもう少しかみ砕いて紹介しましょう。

発見性

PWAであれば、アプリを公開するのにアプリストアにわざわざお金を払ってアプリを提出したり、審査を通すための不自由なルールに縛られる必要はありません。これまでのWebアプリと同じようにインターネットに公開しておけば、検索エンジンがクロールして見つけてくれます。

いままでのSEOのスキルがそのまま使える上、Webはアプリストアとは比べものにならない数のユーザーが、比べものにならないくらいの回数、常に検索を行っています。この圧倒的なオポチュニティ（機会）の違いは、自分自身が今日何回Webを検索したか、アプリストアを何回検索したか、比べてみればよくわかるでしょう。

インストール可能

PWAはさまざまなデバイスにインストール可能ですが、そのためにプラットフォームごとに違う開発言語で書き直したりパッケージンクしなおしたりする必要はありません。PWAをサポートしているWebブラウザーであれば、同じアプリケーションをその全部にインストールして使うことができます。

また、”インストールしなくても使える”点もメリットです。もともとがWebページなので、ちょっとだけ使ってみるということが可能です。

サービスを試用してみようと思ったときに、”アプリのインストールが障壁になって利用を中断してしまった”、という経験は誰にでもあることでしょう。また、スマートフォンでコンテンツを閲覧中に、突然、アプリのストア画面が表示され、アプリのインストールを促されて不快な思いをしたこともあるかと思いますが、そういったことを避けられます。

PWAであれば提供者もユーザーもアプリのインストールについてのネガティブな点を回避することができます。

再エンゲージ可能

従来のWebページであれば、ユーザーがコンテンツから離脱したあとは、再び訪問してくれることを祈るくらいしかできませんでしたが PWAはサーバー側から通知をPushすることができます。

これによりユーザーに即時的な価値を提供できます。例えば、ECショップであればタイムセールの開始であるとか、オークションサイトであればオークションの開始や、最高落札額の更新などです。

通知機能を適切に利用することで、ユーザー側の機会獲得を増やし、再エンゲージを促すことができます。

逆にどうでもいいことを通知しすぎるとユーザーの心象を害するので注意が必要です。特に、初めてページを訪問したユーザーに「プッシュ通知を許可しますか?」というメッセージを表示するのは避けたいところです。

ネットワーク非依存

PWAはオフラインでの使用が可能ですので、ネットワークの状態に左右されないように作ることが可能です。また、常に使用されるアセットをローカルにキャッシュすることで表示のスピードアップや、回線の使用料を減らすことにも貢献します。

プログレッシブとレスポンシブ

PWAはきちんとその思想を理解して開発すれば、低機能なブラウザーやPWAをサポートしないデバイスにもサービスを提供できます。また、さまざまな画面サイズに対応するためのレスポンシブな機能については、WebにはMedia Queries等、そのためのナレッジもリソースも豊富に存在するため、既存のスキルを活かして機能を実装できます。

安全

PWAはWebコンテンツと同じWebブラウザーの強力なサンドボックス内で動作するため、ネイティブアプリのようにユーザーの強い権限で動作しないため、誤動作や悪意のあるコードによってシステムに深刻なダメージを与えることはありません。またhttpsによる接続でのみ動作するのでサーバーとのやりとりを安全に行うことができます。

リンク可能

PWAはインターネット上でユニークな URL をもっており、ハイパーリンクのあるさまざまなところからサービスに接続することができます。PWAを使用するのにアプリ ストアは必要なく、面倒なインストールプロセスも必要ありません。

PWAのメリットは、Webとネイティブ アプリのメリットを合わせたということだけでなく、それらを状況に合わせて取捨選択できることです。

Progressive Web Appsを実現するAPI

ここからはPWAを実現するためのAPIと、それらをどのように使ってアプリケーションを構築していくかについて紹介します。

Service Worker

PWAを実現する上で中心となる機能を提供するのが、Service Workerです。

Service Workerとは何か？ 端的に言うと、「バックグラウンドで動作する“プログラミング可能な”ネットワークプロキシ」です。

Service WorkerはWeb Workerの一つで、Webページのスクリプトとは独立して動作しており、DOMにアクセスしたりすることはできませんが、Webページのネットワークリクエストすべてをインターセプトできます。

つまり、Webページからのリクエストを横取りしてキャッシュしたものを返したり、改ざんしたりといったことができます。そのため localhost、127.0.0.1接続以外はhttpsの使用が必須となります。

Service Workerが提供する機能

Service Workerが提供する機能は主に以下の4つです。

• キャッシュ
• リクエストのハンドリング
• Push通知
• バックグラウンド同期

これらの機能を図で紹介します。

キャッシュとリクエストのハンドリング

Service WorkerはWebページからのリクエストの中に、自分のキャッシュリストに含まれるアセットを見つけると、レスポンスからこれを取得してキャッシュします。

それ以降、Webページからリクエストされたアセットがキャッシュ内に存在する場合は、そのキャッシュされたアセットを返します。ネットワークから取得しないので、アセットの取得は高速に完了し、通信コストは発生しません。

Push通知

関連付けられたWebページがアクティブでなくても、サーバーからのPushを受け取り、Notification API等を使用してユーザーに通知を行えます。

バックグラウンド同期

オフライン中にユーザーが行った操作をキャッシュし、

オンライン時にその内容を同期することができます。

このように Service Worker はプログラミング可能なネットワークプロキシとして、これまでにないさまざまな機能を提供します。

これらの機能の2018年6月時点のサポート状況は以下のとおりです。

ここからは、Service Workerの具体的使い方について解説していきます。

Service Workerを使う準備

Service Workerを使った開発を行う際に用意しなければならないものがあります。

まず、Service Workerを利用するためのWebアプリケーション、もしくはWebコンテンツが必要です。これはけしてSPA(Single Page Application)のようなアプリケーション然としたものである必要はなく、既存の一般的な Web ページであってもかまいません。

このWebページ、もしくはWebアプリケーションは、htmlやcss、jsや画像に代表されるメディアといった複数のファイルで構成されていると思いますが、それとはべつにService Worker用のJavaScriptファイルをひとつ用意します。ここでは便宜上sw.jsと名付けます。

このService Worker用のJavaScriptファイルはWebコンテンツ側のJavaScriptコードから登録され稼働を開始します。

Service Workerは、自身のファイルが配置された以下のディレクトリに対しスコープを持つので、コンテンツ/アプリケーション全体をキャッシュするなど管理下におきたい場合はWebサイトのルートに配置します。

Service Workerの登録

Service Workerの登録はWebコンテンツのJavaScript から行います。

登録に必要なコードは非常にシンプルで、最低限、以下のコードで問題を発生させることなく、Service Workerの登録が行えます。

Webコンテンツ側のコードから、navigator.serviceWorker.registerメソッドにより、Service Workerの登録が行われると、Service Worker用のJavaScriptコード（ここではsw.js）ではinstallイベントが発生します。

install イベントハンドラ内では、キャッシュを開き

キャッシュにアセットのリストを登録します。

Service Workerが登録され、installイベント内の処理が無事に完了すると、次にactivateイベントが発生します。（もしinstallイベント内の処理が失敗した際にはerrorイベントが発生します）

installイベント内で”しなければいけない処理”というものは特にないのですが、一般的に古いキャッシュを削除するのに使用されます。このサンプルコードではキャッシュからキーの一覧を取り出し、

キャッシュの名前（新しく指定された）と比較し、異なるものをすべて削除しています。

上記サンプルコードの、”キーの一覧と新しく登録されたキャッシュの名前を比較して異なるものをすべて削除してしまう”、というやり方は少々乱暴かもしれませんので、実際に実装を行う際にはどのようにキャッシュの削除を行うかは十分に考慮してください。

なぜ、activateイベントでキャッシュを削除するのか？

Service Worker自体は、Service Worker用のJSファイルを更新することで再登録されますが、キャッシュが削除されるわけではありません。よって、いずれどこかのタイミングで用済みとなった古いキャッシュを削除する必要が出てきます。

例えば、キャッシュの対象となっているindex.htmlに更新があった場合は、更新前のindex.htmlを保持しているキャッシュを削除しないかぎりユーザーにはいつまでも更新前のindex.htmlが表示されることになります。

Service Worker用のJSファイルが更新されたあと、新しいService Workerはバックグラウンドでインストールされますが、まだ動作はしません。新しいService Workerに制御が移るタイミングは、古いService Workerが制御しているすべてのページが閉じた後からになります。そのためinstallイベントで古いキャッシュを削除してしまうと、まだ動作している古いService Workerはキャッシュを使用できなくなってしまいます。

一方、activateイベントではページの制御が新しいService Workerに移っているので、古いService Workerが使用していたキャッシュを削除することができます。

何をキャッシュさせるか？

Service Workerにキャッシュさせるべきは、App Shellです。App ShellはアプリケーションのUIが機能するために必要な最小限のリソースです。App Shellをローカルにキャッシュすることで、アプリケーションのUI表示と使用可能となるまでの時間を短縮することができ、オフラインでの使用も可能になります。また要件に応じて、キャッシュが有効となるアセット類を指定してもよいでしょう。

しかし、何でもキャッシュさせればよいというものでもありません。例えば、WebGLベースのゲームは、一般的に使用するアセット類のサイズが大きく、これを毎度起動する際にサーバーからダウンロードするのは時間もかかり、通信コストもかさみます。たしかに、これらをキャッシュさせておけば、通信コストを下げ、ゲーム開始までの時間も短縮できます。

しかし、キャッシュストレージの容量には制限があり、また、cacheオブジェクトの代わりに容量の大きいIndexedDBを使用したとしてもクライアントのストレージを占有することになります。

PCなどのストレージ容量の大きいデバイスではあまり問題にならないかもしれませんが、スマートフォンのようなモバイルデバイスではストレージ容量を圧迫することにつながります。よって、なにをキャッシュさせるかは十分に考慮する必要があります。

リクエストのハンドリング

Service Workerは有効化(activate)された後、アイドル状態となり、WebページからのリクエストやサーバーからのPushを待ちます。

アイドル状態のとき、制御下にあるWebページでリンクをクリックするなどしてネットワークリクエストが発生するとService Worker ではfetchイベントが発生します。

fetchイベントハンドラの引数として渡されるオブジェクトに、発生したリクエストが含まれるので、同リクエストがキャッシュ内に存在するのか調べ、

キャッシュ内にリクエストが存在すればそれを返し、存在しなければfetchメソッドを使用してネットワークにリクエストを投げます。

それぞれの処理結果をリクエスト元のWebコンテンツ側に返します。

この動作により、Webコンテンツ側ではService Workerやキャッシュを意識することなく、これまで通りの方法でページの制作を行うことができます。

また既存のWebコンテンツにService Workerの機能を追加する場合も、Service Workerを登録するためコードを追加する以外の作業は基本的に必要ありません。

de:code 2018のセッション動画でService Workerを追加するデモを行っていますので、ぜひ実際の動作をご覧ください。

Web App Manifest

Web App Manifestは、デバイスのブラウザーによって[ホーム画面に追加]される際のアイコンや、ホーム画面から起動した際のスプラッシュアイコンや背景色、アプリケーションが動作するウィンドウのスタイルを定義します。

manifestは、json形式で記述し、以下のようなlinkタグをWebコンテンツ/アプリケーション側に追加して参照させます。

Web App Manifestについては、詳しい解説がMDNにあるので、そちらを参照することをお勧めしますが、以下に簡単な説明を兼ねたサンプルを掲示します。

de:code 2018のセッション動画でWeb App Manifest を追加するデモを行っているので、ぜひ実際の動作をご覧ください。

現在のWindows 10バージョン 1803のProgressive Web Appsの動作

なお、2018年6月現在のWindows 10バージョン1803(OS ビルド 17134.112)では、残念ながらWeb App Manifestによるウィンドウの制御は有効になりません。

例えば、Windows 10のMicrosoft EdgeでProgressive Web Appsのページをタスクバーにピン留めして起動したとしてもWebブラウザーのUIを表示したまま起動してきます。

Windows 10でProgressive Web Appsにそれらしい動作をさせるにはUWP(Universal Windows Platform)アプリでラップする必要があります。

しかし、Windows 10の次のアップデートでは、Web App Manifestのdisplayの設定に対し、PWAのウィンドウは以下のような表示になるそうです。

マイクロソフトのProgressive Web Appsへの
取り組み

Windows 10の[Microsoft Store]から Progressive Web Appsとして作られたアプリを入手することができます。

Web App Manifestのところで書いたとおり、現在のWindows 10にプレーンな Progressive Web Appsをインストールしても、ネイティブアプリのような外観にはなりません。そのためMicrosoft Storeから入手できるProgressive Web AppsはUWPアプリにラップされています。

MicrosoftストアでのProgressive Web Appsの公開

MicrosoftストアでProgressive Web Appsを公開するには 2つの方法があります。

1つめがBingによる自動インデックスによる登録と、2つめがProgressive Web Appsの提供者がMicrosoftストアにProgressive Web Appsを提出するセルフパブリッシングです。

以下でこの 2つの方法について紹介します。

Bingによる自動インデックス(BETA)

現在はまだBETAの状態ですが、BingがWeb上のProgressive Web Appsを検出し、レビューを行い、自動的にMicrosoftストアに公開します。

Bingに自動インデックスされるための条件は、現在のところ以下のようなものがあります。

• HTTPS、セキュアなエンドポイント
• 高品質の manifest
• オフラインサポート
• ストアの審査をパス
  • デジタルグッズを販売しないこと
  • アダルトコンテンツを含まないこと
  • 不快なコンテンツは不可
• Windowsならではの差別化がされている

上記リストで、最後の”Windowsならではの差別化がされている”というのは、少しわかりづらいかもしれません。

Microsoft Storeで公開されるProgressive Web Appsは、UWPアプリにラップされるのでWinRT (Windows Runtime) APIを使用することができます。

つまりWinRT APIを使用することで、Windows 10で使用した際には、純粋なProgressive Web Appsからはアクセスできないプラットプラットフォームやハードウェアリソースの機能を使用することができるため、これらを利用した機能を実装することで差別化を図ることができます。

Microsoftストア向けProgressive Web Appsの検証

決して、Progressive Web Appsの検証に限ったものでなく、ましてやMicrosoftストア向けのWebコンテンツ用に限定するものではありませんが、WebサイトやProgressive Web Appsの品質をチェックするためのsonarwhalというサービスが公開されています。

sonarwhalはProgressive Web AppsがMicrosoftストア向けの準備がてきているか、だけでなく、一般的なWebサイトやアプリケーションのパフォーマンスやユーザーエクスペリエンス、セキュリティの向上の役に立つ情報を提供してくれます。

Bingに検出されないようにするには

インターネットで公開しているProgressive Web AppsをMicrosoftストアから配布されたくない場合、Progressive Web Appsが以下のいずれかの条件に合致していた場合、Bingは自動インデックスを行いません。

• manifest なし
• https なし、もしくは オフラインで動作しない
• Robot.txtファイルが設定されている
• manifestのdisplay設定がbrowser

既に Microsoftストアで公開されているものを取り消したい場合は、アプリを削除するよう reportapp@microsoft.com宛にサービスリクエストを出します。

セルフパブリッシングによるMicrosoftストアでの公開

Bingの自動インデックスに期待するのではなく、明示的にMicrosoftストアでProgressive Web Appsを公開するにはdev.microsoft.comで開発者アカウントを取得し、パッケージ(appx)化してMicrosoftストアに提出します。アプリの内容がMicrosoftストアの審査をパスすればMicrosoftストアで公開されます。

Progressive Web Appsをパッケージ化するには以下の方法があります。

• Visual Studio 2018 を使用する
• PWABuilder を使用する
• pwa-builder CLI を使用する

PWABuilder

PWABuilderはインターネットにホストされているサービスで、同じくインターネットにホストされているWebアプリケーションのためのmanifestファイルやService Workerのコード、Service Workerを登録するためのコードを生成します。

また、UWPのHostedアプリのパッケージも生成できるので、Progressive Web AppsをMicrosoftストアで公開する際にはこれをストアに提出します。

PWABuilderを使用した既存のWebアプリケーション用のmanifestファイルやService Workerのコードを生成する手順については de:code 2018 の セッション動画のデモをご覧ください。

Windows ストア(UWP) アプリの価値

前述しましたが、Progressive Web AppsをUWPアプリ(Hosted Web アプリ)としてラップすることで WinRT が提供するすべての機能を利用することができます。

これは予定表やアドレス帳といったプラットフォームが提供するソフトウェア的なリソースはもちろん、USBやセンサー類といったハードウェアリソースも含まれます。

アプリケーションが通常のWebブラウザー上で動作しているのか、UWPで動作しているかは JavaScriptのif文で簡単に判断できるので、WinRT APIにアクセスするためのコードをインターネットでホストされているコンテンツに含めておくことができます。

JavaScriptで記述したUWPから,WinRT APIを使用するサンプルコードは以下に豊富に用意されているので、Windows 10限定となってしまいますが、純粋なProgressive Web Appsの機能だけでは実現できない要件がある場合は、こういった方法もあるということを覚えておくとよいかもしれません。

・コードサンプル – Windows アプリの開発

Visual Studio 2018を使用してProgressive Web AppsをUWPでラップし、WindowsRT APIを使用する方法については、de:code 2018 のセッション動画のデモをご覧ください。

その他、Progressive Web AppsをUWPとしてMicrosoftストアに公開することで、Microsoftストアの提供するマーケティングデータ (ダウンロード数、ユーザーの性別、年齢層、国、etc.)や、決済のためのストアのAPIが利用できたり、人気があればMicrosoftストアのトップページに掲示されたり、とさまざまなメリットもあります。

しかも、Hostedアプリであれば、共通のコンテンツでありながら純粋なままのProgressive Web Appsがインターネットでホストされているので、アプリストアを通さない場合のメリットも享受できます。

【参考】
・Windows デベロッパーセンター – PWAとWindows10

この記事では、UWPのHostedアプリについて紹介しましたが、Apache Cordovaでもさまざまなモバイル プラットプラットフォーム向けに Hostedアプリを開発することができます。興味のある方は以下の記事をご覧ください。

・Create a hosted web app using Apache Cordova

Progressive Web Appsの価値を高める API

ここまでWindows 10で動作するUWPアプリでラップされたProgressive Web Appsの紹介をしていましたが、ここからは再びプレーンな Progressive Web Appsについてです。

Progressive Web Appsは、ネイティブアプリのような体験を提供しますが、WebアプリケーションなのでWebブラウザーの機能を超えて動作することはできません。

例えば、表示速度や動作速度はネイティブアプリと比較するとどうしても劣ります。

しかし、Webブラウザーで新しくサポートされた以下のような機能を使用すれば、その能力的な差を縮めることができます。これまでの Webコンテンツにはなかった新しい体験をユーザーに提供したり、決済の仕組みもWeb標準のAPIを使用してこれまでよりも少ない工数で組み込むことができるので、これらを使用してアプリケーションの価値を高めることができます。

• CSS3 3D Transform関連等GPUを使用する設定があり、これを意識的に利用することで描画速度を向上させることができます。
• WebAssembly C言語などで記述し、あらかじめコンパイルしたものをWebブラウザーで動作させるため高速な計算が可能となります。
• WebVR VRデバイスの提供するAPIをサポートし、ユーザーによりImmersiveな体験を提供できます。
• Web Payments 決済画面その他、支払いに関する機能を提供します。これとPaypalやStripeなどが提供する決済用のAPIを繋げれば少ない工数で独自に決済期の機能を実装できます。自前の決済の仕組みがあれば、もう何かを販売するたびにアプリ ストアに使用料を支払う必要はありません

この他にも、最新のWebブラウザーにはこれまでできなかった機能が日々搭載されてきます。そういった新機能をいち早く利用できるのも、逆にレガシーなWebブラウザーには引き算した機能を提供できるのもProgressive Web Appsの良いところです。(もちろん、そう作れば、ですが)

Progressive Web Appsの位置づけ

PWAことProgressive Web Appsは「ネイティブアプリのような体験を提供する」という言葉が独り歩きしてしまい、まるで「ネイティブアプリを置き換える」といった印象を持っている人も多いようです。とはいえ、「ネイティブアプリを置き換えることはできない」というのも真ではないでしょう。

例えば、スマートフォンアプリには、アプリとしてインストールさせるためだけに外側をWeb Viewでラップしたいわゆる「ガワアプリ」と呼ばれるものがあります。こういったものは今後はProgressive Web Appsに置き換えられていくでしょう。

実際にイベントサイトや、カンファレンスのセッションスケジュールの部分をPWA化してユーザーが持ち歩けるようにしているサイトはすでにいくつか存在します。

• ABC 2018 Spring | 日本最大級のAndroidデベロッパーの祭典
• ng-japan – The Angular conference in Tokyo, Japan (2018/6/16)

こういったものもProgressive Web Appsが出てくる以前はWebページとは別にスマートフォン用のアプリを、場合によってはプラットフォームごとに別々の言語で開発し、それぞれのアプリストアに提出して審査を受けるといったことをしていました。

Webページとアプリの開発が共通化でき、配布の手間もかからないということは予算や時間的にも非常に大きなメリットがあります。

しかし、Webブラウザー内のJavaScriptからアクセスできないプラットフォームの機能を利用するアプリケーションや、高速な動作や描画を必要とする用途には今後もネイティブ アプリが選択されることでしょう。

Progressive Web AppsはWebアプリケーションとネイティブアプリの体験的なメリットを受け継ぎ、ちょうどその中間に位置し、その隙間を埋めるものです。

Webのページではpoorだったもの、逆にネイティブアプリではtoo muchだったものが、Progressive Web Appsには最適なのかもしれません。

少し作って試すだけの実装ならそれほど難しくありませんので、気になる人はぜひProgressive Web Appsを作ってみることをお勧めします。

5月23・24日の二日間に渡って開催された日本マイクロソフトの開発者向けカンファレンス「de:code 2017」。その中でも定員数をはるかにオーバーし、入場規制もかかった澤円さんのセッション「これからのエンジニアに必要な『マネジメント』の考え方」が興味深かったので、レポートしたいと思います。

マネジメントは「管理職」のことだけはない

エンジニアの世界では日常茶飯事で交わされている以下のセリフ。皆さんも聞き覚えがありませんか？

「これさ、なるはやでチャチャっと作ってよ」

「とりあえずいい感じに仕上げといて」

「なんかこれ、あんまり動かないよ」

実はこれ、澤さんいわく「マネジメントが欠けている状態」なのだとか。どんなマネジメントが欠けているのかというと…、

• なるはやでチャチャっと　→　スケジュールマネジメント
• とりあえずいい感じに　→　クオリティマネジメント
• あんまり動かない　→　リスクマネジメント

このように全ての出来事にはマネジメントがからんでいます。

マネジメントという言葉からは人事管理や人事評価といった「管理職」をイメージしがちですが、必ずしもそれだけではありません。仕事をする全ての人は、上記のようになんらかの形でマネジメントを「する側」の人であるのです。こうしたマネジメントをきちんと意識して仕事をすることが「エンジニアを救う」のだと澤さんは言います。

マネジメントという言葉は、もしドラ（※もし高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら）でピーター・F・ドラッカー氏とともにメジャーになりましたが、セッションではそのドラッガーの名言として澤さんが紹介したのがこちら。

テクノロジーで生活は便利になる。効率化するツールが出てくることによって、幸せになることもあれば、逆に振り回されることもある。ある人に都合のいいことは、ある人には都合が悪い場合もある。それは全てのマネジメントは常に「人」にあるからであり、エンジニアも結局は「人」だから。

「テクノロジーは人を幸せにするし、人の生活を豊かにするために存在するものですが、『Visual Studioはこういうことができます』『Windows 10にはこういう機能があります』というように、技術や製品の機能に人を合わせて説明してしまうと、だいたいうまくいかなくなります。主役は人であることを常に意識し、ユーザーサイドに立ち、主語を人にして人の立場をメインに話すとわかりやすくなります。そのために大事になってくるのは、最終的にはコミュニケーションです」

では、コミュニケーションをうまくするにはどうしたらいいのでしょうか。

「ここの色を変えて」「画面遷移を逆にしといて」

要求する側にしたら簡単にできそうに思えますが、その作業の裏側には数えきれないメソッドや作業が潜んでいたりします。なぜそう誤解してしまうのかというと、要求する側は自分の都合のいい状態で頭の中でイメージしてしまうからなのです。

「それを防ぐには、何が問題なのか、何が原因なのか、何がどう見えているのかを理解し、言語化して伝えることで、お互いの合意にもっていかなくてはいけません。しかし、日本人はそうしたマネジメントが根付いていません。どちらかと言えば、曖昧なコミュニケーションを好む傾向があります」

コンピュータの世界は、0と1のみ。「なる早でちゃちゃっと」では通じません。エンジニアがコーディングするとなれば、明確な仕様、要件定義が必要です。それを伝えるためにはわかりやすい言葉に置き換える必要があるのです。

シリコンバレーは“マインドセット”の聖地

ここで澤さんは、シリコンバレーに在住する友人の言葉を紹介。

「シリコンバレーは地名ではなく、マインドセット。マインドセットは空気を共有するのに必要不可欠」だという友人の言葉に、澤さんはすごく腹落ちしたそうです。

時間と空間を共有できる価値、カッティングエッジとパッション、優秀な頭脳はもちろんですが、マインドセットが共有されている場がシリコンバレーなのだと。

そして、このマインドセットが輸出され、最も息づいているところはインドだといいます。ただ勉強や仕事をして帰ってくるだけではなく、マインドセットを吸収し、帰国して起業する人が増え、インドはシリコンバレー化しているのだそうです。

「インド人は成長力が高くて問題解決能力が抜群であり、GoogleやMicrosoftをはじめとするグローバル企業でもインド人の優れた経営者が数多くいることがそれを証明しています」

当事者全員が「理解できる」のがマネジメント

実際にMicrosoftではどのように開発フローが進められているのか、マイクロソフトディべロプメントのトップ・安達理社長にヒアリングした話を紹介してくれました。

１）カスタマープロミス

まず最初に行うのは、カスタマーに対してどんな約束ができるのか、全員で合意すること。全員というところが大事　合意しないことに対して何かすると必ずエラーになる。

２）シナリオプランニング

具体的にどんなシーンでどんな使い方をするのかなどを考えてプランニングする。例えば「最高のエクスペリエンスとエンターテインメント機能を持つコンピュータを提供する」としたら、どんなシーンで使うのかといったことをペルソナを作りながら考えていく。

３）デリバラブル定義

実現できるかどうか　デリバリできるかどうかを検討する。

４）タスク設定

誰が何を担当するかを決めてタスク設定し、アジャイルで開発していく。

ポイントは、上の人が決めたことに対して言われた通りに開発するのではなく、みんなで合意して作っていくということ。実際の作業はこのように細分化されて開発が進んでいくといいます。

それぞれのタスクにはKPIが設定され、責任範囲や実行状況などを判断していきます。このKPI設定とタスク設定がきちんとしていないとプロジェクトはうまくいかないと澤さんは言い切ります。

「タスクは降ってくるものだという意識でいると仕事はできません。自分たちで定義して作っていくもの、権利だと考えるべきです。不得意なことは人に任せるという手もあるが、タスクを自分で定義することが大事。イノベーションは言われたことをやっているだけでは絶対に生まれません。それができていないのなら、提言してみる。それでも変わらないと思うのなら転職をしほうがいいくらい重要な権利なのです」

ちなみに、Microsoftではオーナーシップという言葉がよく使われるそうです。タスク設定した人がオーナーでボスで、責任はその人にある。だからオーナーシップをとるという考え方。案件を作った瞬間にその人は一番偉い立場となり、社内はリソース化します。たとえ社長であってもリソースの一部なので、必要であれば社長を動かすこともできるのだとか。

ただし、全てのボスには説明責任があります。構築までのステップから改変作業まで可視化して説明し、リスク、コスト、スケジュール、リソースをマネジメントする責任や、場合によっては交渉や提案する責任もあります。

「当事者全員が理解できることがマネジメント。説明責任を果たすためには、言語化が必要です。技術的に詳しいことは武器ですが、それに説明スキルを持つエンジニアはさらに無敵。論理的かつ簡単に説明する能力を磨くべきだと思います。その技術や製品に対して何も知らない人に説明するといい訓練になります」

自分で案件を生み出しマネジメントするのであれば、時間も人のリソース、働く場所も自由に選べるメリットがあります。自由と責任のバランスは大事なポイントであり、責任を果たせば自由が手に入る。責任を果たせれば、さらにもっと大きな責任を任されるようになり、世の中に貢献する場が増えるでしょう。

▲通路もステージ前も受講者で埋まっていた澤さんのセッション会場

最後にシリコンバレーの友人が教えてくれたこととして、以下の3つを挙げました。

• クリエイティブであること
• リーダーシップを発揮すること
• 起業家精神をもつこと

「AIやロボットが発達していったとしても、この3つは機械にはできないこと。そうであってほしい、そうでなくてはいけない。最前線で仕事をしているのに、置き換えられるなんてもったいない、つまらないですよね。皆さんも組織の中でも起業家精神を持ちつつ、リーダーシップを発揮してクリエイティブなことをしたいと思っている人は多いはず。
僕も文系の大学でしたが、ITは大きなものを生み出せるし、世の中を変えることができるんじゃないかと思って、IT企業に入ったんです」

ITは、人の幸せを創るために存在しています。そう信じることがマネジメントの神髄であり、ITと触れていれば、仕事のやり方も変わってきます。

「どうやったら人を幸せにできるテクノロジーを生み出せるかを考える、人がどう幸せを感じるのか見てみることは本当に大事なことです。ステキな未来を一緒に創っていくために我々はここにいます。創る権利、パワー、能力、理解など、もし足りてないものがあれば、私たちからもピックアップしてください」

そんなエモーショナルなメッセージでセッションは終了。50分間があっという間でした。澤さんのセッションはMicrosoftの動画チャンネルchannel9で公開されるそうなので、動画で見たいという方はぜひチェックしてみてください。

▲セッション前の澤さん自撮りショットから拝借。参加者の皆さん、嬉しそうですね

5月23・24日の二日間に渡って開催され、大盛況のうちに幕を閉じた日本マイクロソフトの開発者向けカンファレンス「de:code 2016」。その参加者アンケートの総合点数で、134セッションの中でトップのスコアを獲得したのが、2日目の最終セッションに登壇した澤円氏のセッションだ。

澤氏のセッション、「クラウド心配性な上司を説得するコツを伝授します。本当に信頼できるクラウドの構築/運用とは～マイクロソフト クラウド成長の軌跡～」の概要をレポートする。

▲日本マイクロソフト株式会社　マイクロソフトテクノロジーセンター センター長　澤円氏

クラウド心配性な上司を説得するコツを伝授

プレゼンで重要なのは、伝えたい内容をいかに伝言ゲームのように伝播させていくか。そう常日頃から断言している澤氏。今回伝えたい相手は、クラウド導入に納得してくれない上司である。どう伝えたら説得できるのか、参加者が会社に持ち帰ってそのまま話したくなるような情報とネタが満載のプレゼンスタイルでセッションは行われた。

セッションの構成は大きく「データセンター構築から運用まで」「データセンター構築中」「データセンター運用」の3つのシーンに分けて語られた。

【上司に提言】海外との通信に専用線は高すぎますよね？

Microsoftのデータセンター構築から運用まで一連のオペレーションは、Microsoft Cloud Infrastructure and Operations、略してMCIOと呼ばれる。データセンター構築の情報を漏らさないために、会議室の予約は別の部署の名前を使うなど、情報管理は徹底している。

データセンターの場所選定は、さまざまな条件を要する。まずは電源が確保できること。発電所の近くであり、さらには発電所が停電になったことも考えると二カ所に近いほうが望ましい。液体燃料の確保が必要なので、道路の選定もデータセンター設置の条件となる。

電源ケーブルは二重化するのは当然のこと、アメリカでは米国基地とネットワーク網を共有している。海底ケーブルへも大型投資を行っているという。海底ケーブル最大の敵はサメ。サメがかじっても切れないケーブルを用意しているという小ネタも披露された。

こうしたトピックをもとに、「自分だけの専用ケーブルを引いてるみたいだから、ネットワークも信用できるみたいですよ。うちの会社で海外との通信に専用線は高すぎますよね？自分の国にデータセンターを持っているし、グローバルにクラウドの話をしてくれるはず」と上司に提案するヒントを語る澤氏。

実は、日本にMicrosoftのデータセンターを置くことを決めたのはCEOのサティア・ナデラ氏だという。日本の地下ネットワーク網は世界最強と言われており、マイクロソフト専用線も複数本ある。さらにその徹底されたグローバル標準について、話を進める。

【上司に提言】ここまでの標準化ってできますか？

Microsoftは、Open Compute Projectへの参加をしている。これはFacebookやGoogle、Intel、rackspaceなども参加しているプロジェクトで、サーバーの内部設計がすべて公開されている。

組み立てられたサーバー、ラックは同じ品質・クオリティで世界に出荷され、100カ所以上、40か国以上・22リージョン以上（※現在も増加中）にラックの状態でデータセンターに納品される。徹底的な標準化で大幅なコストダウンを目指し、標準化スタイルを決めたらそれを貫く。データセンターでやることはほぼケーブル接続だけだという。

特徴的なのは、ラックが白であることだ。白にすることで明るくなるので、接続ミスを減らすことができるし、何より光の量が少なくて済む。空調も使わず、空気の流れで調節している。これらはコストカットにもつながる。そして、こうした対応は一切の例外を認めておらず、全世界共通に行われている。

「そうはいっても」とマジックワードを繰り出す上司がいたら、「うち、ここまでの標準化ってできますか？」そう上司に問いかけることを勧める澤氏。ダラダラと妥協を繰り返すことは、コストを増やすだけと指摘した。

【上司に提言】サーバールームのログ取れてます？

さらに徹底したデータセンター運用について説明する澤氏。人はミスする、機械は壊れるを大前提として、人の手を介さない「自動化」を徹底すべきだと語る。

白いラックの上には、むき出しのケーブルが設置されている。なぜなら下（地下）だと手元が見えないから。すべての行動は追跡され、不正がないように手元が見えない状態を作らない。すべてがモニタリングの対象になる。

不正があれば証拠が残るが、逆にやってなかった場合も証明になる。データが守られると同時に社員も守られているという。知っていることで事故が起こることがある。その可能性をMicrosoftは徹底的に排除している。

データセンターで働く人は情報を見る術を持っていない。サーバーの電源や物理層だけチェックしている。鍵の管理は別組織だ。壊れていたらラックごと交換する。

ハードディスクもデータセンターから生きて出ることはない。役目を終えたハードディスクは4つに分割されて、それぞれ別の国で処理される。時間と手間がかかることで、犯罪者もあきらめる。犯罪の余地を作らないのだ。

ここでの上司への質問は「誰が触ったかわからない状態ってこわくないですか？うち、サーバールームの出入りって全部ログ取れてましたっけ？」。顧客データと社員を守るため、という大義名分に反論できる上司はなかなかいないだろう。

【上司に提言】「日本の法律」に対応できるそうですよ

最近Microsoftが変わりだしたのは、CEOのサティア・ナデラ氏によるところが大きいというのはよく聞く話だ。だが、社長のBrad Smith氏が弁護士だということを知る人は少ないのではないだろうか。彼が大切だと考えているのは、セキュリティ・プライバシー・透明性・法令順守。これはMicrosoftが法を順守する会社であるということを意味すると、澤氏は言う。

さらにCOOのKevin Turner氏によるMicrosoftのコミットメントを披露。上司に「日本の法律にちゃんと対応できるそうですよ」と言える要素を紹介した。

【上司に提言】あの人たちやりすぎです

最後に澤氏は、海底に設置するデータセンター「Project Natick」を紹介。究極の水冷化とセキュリティを実現する取り組みでありつつも、「あの人たちやりすぎです」と自虐ツッコミで会場の笑いをとった。

人々を成長させるためのモバイルファースト、クラウドファーストに徹底的にコミットして世の中をよく変える。「未来を一緒に」つくるために、今できることを伝える努力を最大限やっていきたいと宣言し、セッションを終えた。

澤氏のセッションはMicrosoftの動画チャンネルchannel9で公開されている。澤氏のde:codeでのプレゼンを見たいという方はこちらからどうぞ！

• クラウド心配性な上司を説得するコツを伝授します ～本当に信頼できるクラウドの構築/運用とは？ マイクロソフト クラウド成長の軌跡～【動画公開中】

エキスパートの佐川が、「de:code2016」のセッションレポート、日本マイクロソフトエバンジェリスト・物江修氏の「Developing on the Edge. 〜 WebプラットフォームとCordova 〜」をご紹介します。

今年の夏、MicrosoftはWindows 10の大型アップデート「Windows 10 Anniversary Update」を予定している。このアップデートで「Microsoft Edge」にも数多くのAPIが追加される。このセッションでは新しく追加されるAPIの紹介と、それらを利用したUniversal Windows Platform(以下、UWPと記載する)、Cordovaアプリケーションの開発ポイントを紹介する。

• Microsoft EdgeとWindows10のWebプラットフォーム
• EdgeHTMLの新機能とこれからの方向性
• Webプラットフォームを利用したアプリケーション開発

Microsoft EdgeとWindows10のWebプラットフォーム

初めに、Microsoft EdgeとWindows 10で「Webプラットフォーム」と呼んでいる事柄についてみていく。すでにご存じのとおり、Windows10には、2つのマイクロソフト製のブラウザが含まれている。Windows10から新しく採用された「Microsoft Edge（以降、Edgeと記載する）」と「Internet Explorer11」である。

Webブラウザが2つ入っている理由は、以下のとおり。

• Edgeは相互運用性を重視し、最新のWebコンテンツをブラウズするため
• Internet Explorer 11は過去のバージョンのIE向けに作られたコンテンツを従来どおりに見るため

この二つは物理的に完全に別なものとなっていて、レンダリングエンジンもJavaScriptエンジンも異なる。

EdgeのレンダリングエンジンとJavaScriptの組み合わせが、Windows 10用のアプリケーションを開発する際に使用されるWebプラットフォームになるが、現状、Windows 10で動作するアプリケーションのすべてがEdgeのエンジン（以降、EdgeHTMLと記載する）を利用しているわけではない。

どういう意味か。

アプリケーションとの組み合わせを見てみる。Windows 10から採用されたUWPアプリケーションは、EdgeHTMLを使用している。しかし、以前の環境で作られたWindows 8系のいわゆるWindowsストア・アプリケーションやデスクトップ・アプリケーションであるWin32アプリケーションは、以前の Tridentを使用している。

新しいSDKに含まれるWeb ViewコントロールはEdgeを使用するようになっているので、もしどちらも選択が可能である場合はEdgeHTMLを使用する。

Windows 10 Anniversary Updateまでに搭載されるEdgeの新機能

ここからは「Windows 10 Anniversary Update」までに搭載されるEdgeの新機能について紹介していく。Edgeのエンジンが、Windows 10でアプリケーションを開発する際に使用するWebプラットフォームの機能になるので、そのままアプリケーションから使用できるようになる。

Edgeの2016年の機能実装を含めた展望については、今年の2月にEdgeの開発者ブログで公開されており、その記事では優先課題とて5つ存在する。（参考までに、日本語の開発者ブログはこちらです）

1. WebテクノロジとWindowsストアによるモダン拡張機能プラットフォームを提供する
2. アクセシビリティとインクルーシブ デザインにより、Microsoft Edgeを使うすべての人の力になる
3. Microsoft Edgeの基本であるセキュリティ、パフォーマンス、効率を引き続き向上させる
4. Webの未来を見据えて開発する
5. コミュニティのフィードバックや参加を可能にするチャネルを増やす

まずは拡張機能。ネイティブ形式のアドオンとは異なるWebテクノロジを活用した、開発者になじみのある拡張機能プラットフォームを作成する。現在のInsider Previe版のEdgeでは同じくプレビュー版のアドオンを使用できるようになっている。

次にアクセシビリティ。この項目では「HTML Accessibility API Mappings」と「Core Accessibility API Mappings」への対応、「ハイコントラストのサポート」や「視覚障碍のある方にとっての読みやすさ」や、「フォーカスおよび選択の操作性の向上」などが表明されていた。

基本機能では、「JavaScript エンジンのベンチマークの向上」「さらなるセキュリティの強化」たとえばFlashを別のプロセスに分離し、不要なコンテンツ処理を保留したり、GPUレンダリングの強化などが表明されている。

Insider Preview に搭載された新機能

ここからは「Insider Preview」に搭載された新機能について紹介していく。現在、Insider Previewに実装されていて、実際に試すことができるものが約20個以上、開発中のものを含めると36個くらいあり、しかも、これは現段階のものなので、これからまだ増える可能性がある。

• Web Speech API (synthesis)
• Fetch API
• Beacon
• Web Notifications
• WebRTC
• OPUS open audio
• VP9 open video playback
• WOFF File Format 2.0
• FIDO 2.0 Password
• Canvas 2D path2D
• Ambient Light Events
• Color input type
• Element
• Default parameter (ES2015)
• Destructuring (ES2015)
• Generators (ES2015)
• SIMD (after ES2016)
• Exponentiation Operator (ES2016)
• Array.prototype.includes (ES2016)
• Async Functions (after ES2016)

Insiger Previewに新しく搭載された機能をいくつか、デモを交えながら紹介する（この記事ではデモ資料省略）。

Web Speech API

IETF標準の言語タグである「BCP 47」に対応しており、タグの指定によってさまざな言語の指定ができる。音量、音声、速度はもちろん、SSML (Speech Synthesis Markup Language) を使用して音声合成時の修飾的情報を指定したりもできる。

Fetch API

「Fetch API」は、Webサーバと通信するためのAPIで、Promise ベースで非同期処理を行える。従来の「XMLHttpRequest」の仕様のさまざまな不足分をなくし、より細かい処理ができるようになっていて、将来的に「XMLHttpRequest」は「Fetch API」に置き換わると言われている。「Fetch API」は「XMLHttpRequest」とは異なり「Service Worker」からも使用できる。参考までに「Service Worker」とは、「Progressive Web Apps」というモバイルWeb向けの新しいコンセプトだ。

Web Notifications

「Web Notifications」はユーザーへのデスクトップ通知の設定や表示のために使われるもので、EdgeではWindows 10のアクションセンターと統合される。この通知には、カスタムアイコンやタイトル、メッセージが設定可能だ。Service WorkerとPush APIを組み合わせると、サーバからのPuch通知を受け取って表示したりということが可能になるが、残念ながらこの2つはまだサポートされていない。しかし、ブラウザ上でアプリケーションが稼働状態であれば、WebSocktsやWebRTCの通知を受け取ってデスクトップ通知を表示するといったことが可能だ。

WOFF2.0フォント

WOFF2.0フォントは、従来のフォントファイルのサイズを30%以上多く減らす新しいフォーマットだ。日本語を含むアジアフォントではおよそ50%前後節減できると言われている。現在、Webページの60%以上でカスタムWebフォントが使用されていて、平均的にWebページのサイズの5.3%を占めると言われているので、これをサポートすることでページの表示速度の向上が期待できる。

WebRTC

WebRTCについて。RTCとは「Real Time Cominucation」の略で、プラグインなしでWebブラウザ間のボイスチャット、ビデオチャット、ファイル共有ができる技術がWebRTCだ。Firefox、Chromeは、Edgeに先行してWebRTC1.0をサポートしているが、EdgeはWebRTCの使い勝手を改善したORTCのみをサポートしてた。このWebRTCとORTCは互換性があるので、互いに通信を行うことができるが、さらなる相互運用性を高めるためにEdgeHTML 15では、WebRTC1.0もサポートすることになった。

RTCの相互間運用性

その他

そのほかにもオーディオ用の高い圧縮フォーマットであるOpusや動画圧縮コーデックのVP9、細かい時間の計測に使用される「High Resolution Time」のLebel2や、フォルダのドラッグ・アンド・ドロップ、Webブラウザで生体認証を行うためのFIDO(ファイド)2.0、それからBeacon、アクセシビリティ関連のエレメントなどなど多くの機能がサポートされる。

ハイブリッド・アプリケーション

説明した機能は、ハイブリッド・アプリケーション開発用の様々なフレームワークを使用することで、スマートフォンやデスクトップのアプリケーションとして利用することができる。ここからは、Webプラットフォームを利用したアプリの開発について紹介していきます。

ブラウザで動作するWebアプリケーションを、ハイブリッド・アプリケーション化するメリットは3つほどあります。

• オフライン
• アプリストアのエコシステム
• プラットフォーム/ハードウェアの機能

もう少し待っているとEdgeでもService WokerがサポートされてWebアプリケーションでもオフラインの利用が可能になるので、実際にアプリケーション化するメリットというのはアプリストアのエコシステムを使用するとか、Webブラウザでは使用できないハードウェアの機能を使用するということぐらいに差が縮まる。

このハイブリッド・アプリケーションの形式には、Packageアプリケーションと、Hotedアプリケーションがある。Packageは、オフラインで利用可能。サーバサイドのリソースががならずしも必要でない。Hostedは常に最新のコンテンツで実行でき、開発の一元化が可能だがオフラインでの使用が前提となる。ざっくり言うとコンテンツの配置場所くらいしか違いはない。

Universal Windows PlatformとCordovaを利用したHostedアプリケーション

UWPとCordovaで、どのようにHostedアプリケーションを作るか、というのを紹介する。

UWP

これがWindow 10に用意されている、アプリから使用可能なOSリソースだ。プッシュ通知や、タイルへの情報表示、予定表、アドレス帳へのアクセス、Cortana連携とWindowsランタイムを使用し、さまざまなハードウェアにもアクセスできる。作成は

1. package.appmanifestの[アプリケーション]タブで[スタート]を指定
2. [コンテンツURI]タブでWinRTへのアクセスを設定
3. 使用しないファイルを削除

Cordova

Tools for Apache Cordovaが提供する機能は

• ターゲット
• ビルド
• デバッグ
• エミュレータ
• コード補完

がありiOSアプリケーションに対するビルドにはMacが必要ではあるが、ほとんどの環境(Android系/iOS系/Windows系)で実行可能だ。CordovaにおけるHostedアプリケーションの作成は以下の３つで行っていく。

1. config.xmlの編集
2. www¥scripts¥index.jsの編集
3. index.htmlの編集

尚、Apache Cordovaを使用したホスト型Webアプリケーションの作成についてはこちらの資料を見るとよい

Visual Studioで提供されている検証環境

• Ripple
• Android
• Monaca Debugger(iOS/Android)
• Windows Phone

その他、Mac OS用、リモートエージェント、Mac in Cloud(Mac OSのホスティング)などがある。

最後に、Webプラットフォームについてということと、この夏に向けていろいろなAPIが出てくる。そして、Webではできないことができるようになると物江氏は締めくくり、Microsoft Edgeのすぐそこにある未来について熱く語ってくれた。今最も熱いブラウザは「Microsoft Edge」ではないだろうか。

こんにちは。編集部の仲です。de:code 2016はいかがでしたか？

この記事では、初日の最後に行われた、Microsoftのエバンジェリストであり「エバンジェリスト養成講座」などで有名な、西脇資哲さんのセッションをご紹介します！ AI、ドローン、ロボティクス、そしてテスラ Model Sまで会場に登場した、盛りだくさんのセッションでした。

Twitterのライブ配信

筆者が前回西脇さんのセッションを聴講した時も同じことをやっていたため、もはや恒例となっていると勝手に思ってますが、セッション中、Twitterにハッシュタグをつけてつぶやくと、前方スクリーンにその様子が表示されるという、イカした趣向が用意されていました。その日一番多くつぶやいた方には最後にプレゼントがあるとのこと。

ウェアラブルデバイス

最初のテーマはウェアラブルデバイスです。会場では、IoT☓医療現場での活用例として、Microsoft Band 2を利用したデモが披露されました。

このデモでは、Microsoft Band 2で西脇さんの皮膚の表面の汗の量や心拍数等を収集。BluetoothでRaspberry Pi（OSはWindows 10 IoT）に転送し、そこからSoracomのSIMでAzureにアップロードされます。アップロードされたセンサーデータは Motion Board Cloud というサードパーティのサービス(Azure上で稼働)を利用して、活動量という形で表示しているそうです。活動量は100を超えるとちょっと落ち着きないな、というぐらいの指標になるんだとか。

これが実際にどのようなシーンで活用されるのか、１つ例が紹介されました。

我々の国を含め、先進国は医療費の高騰が問題となっています。そのための対策として、患者さんに積極的に在宅医療をすすめるという試みが行われています。在宅医療をすすめるべきかどうかの判断について、今までは医者が個別に診察を行い、膨大な時間をかけて判断（トリアージュ）していました。

この活用例では、IoTデバイスからの生体情報や、過去の病歴、類似治療比較を基にマシンラーニングによって、各患者さんのシビリティレベル（治療が必要か否か）を自動判別しています。画面右側の上位に表示されている患者さんは緊急度が高い（すぐに治療が必要な）患者さんであると判断できます。

医療の現場ではIoTを活用して、このような自動化が行われているという事例の紹介でした。IoTデバイスとAzure、ソフトウェア・パッケージなどを開発者の皆さんが自由に組み合わせて、様々なソリューションを実現することができるため、是非チャレンジしてほしいとのこと。

ロボティクス

次の題材はロボティクス。今回のセッションでは基調講演でも出てきたPalmi（パルミ）君とPepper君が登場しました。

Palmi君

今回のデモは、西脇さんの予定を取り込み受付を行うデモでした。このデモはOfice365と連携しているそうです。その他、ドリンクオーダーのデモとして、パルミくんが音声認識しその結果をExcel Onlineのスプレッドシートに自動入力するデモや、音声認識したデータを、別のサービスで書かれた議事録に添付する等、ロボティクスとクラウドサービスを連携したデモが披露されました。

Pepper君

次はPepper君を利用した見守りを行うデモです。ある空間の見守りをPepper君にお願いすると、音楽に合わせてるんるん踊る感じで見守り。見守り中に目の前で起きたことを画像認識等を活用して把握し、事後報告するというもの。写真では伝わりませんが、とても面白いデモでした。また、認識精度もかなり高いです。

自動車

次は自動車です。今回はなんと、会場内にあのテスラの実写が持ち込まれていました。西脇さんいわく、内燃機関を積んでいるクルマをイベント会場に入れるためには消防法の関係などで、いろいろな制約があるそうです。しかし、テスラは電気自動車で内燃機関がないため、大型のコンピュータを導入するのと手続き的には変わらなかったということ。

今回はテスラをMicrosoft Bandから操作するデモが披露されました。仕組みはテスラに持ち込まれているSurfacesがコンパニオンデバイスとして機能しており、そのデバイスに対して、様々なアクションを与えることでテスラを制御、また、テスラから得られた車両情報をデバイスを通して収集し、クラウドにアップしたりすることが可能ということです。

このコンパニオンデバイス上のアプリは、C#やJavaでアプリケーションを書くことができるそうです。現在テスラは、安全性の面等から、サードパーティ制のアプリを認める（導入する）ことはやっていないそうですが、この取組には非常に大きな可能性があると、西脇さんは付け加えました。今まで、車両の制御等を自由にするということは難しかったが、Surfacesで.netやJavaを使いこの車両を自由にコントロールし、クラウド上から操ることが可能になる。非常に大きな可能性を秘めていると言っても過言ではないと付け加えました。

そして、もうひとつ、テスラに関するデモが行われました。テスラを持っている人が一番悩ましいのは、実は充電スポットを探すことだと西脇さんは言います。テスラは走行用バッテリーとしては、一般家庭1週間分の電気容量を蓄えているそうですが、実際に走行するとバッテリーの消費量は激しいのが事実。バッテリーを充電するための充電スポットを検索するアプリとして、EVSmartというものが出ているそうです。このアプリはXamarinで開発されているとのこと。

Xamarinを商用環境で積極的に活用してほしいと締めくくりました。

鉄道

次は、鉄道ということでNゲージが登場。鉄分が高まってきましたー。余談ですが、このジオラマは銚子電鉄をモデルにしているそうです。

このNゲージのデモでは、Windowsタブレット上のXamarinで開発されたアプリから電車を制御します。Nゲージをコンピュータから制御するというのはわりとありふれたことかもしれませんが、このデモで一番重要なのは、センサーを利用して在線検知（鉄分が高い言葉かもしれないがお分かりいただけるだろうか？）を行っているということでした。

仕組みは、線路上に電流を計測するセンサーを設置し、電車が通過すると電流が流れるため、その状態を検出して、電車が線路のどの部分に存在するのか判定するという。このデモでは、電流の情報はAzure IoT Suiteで収集し、タブレット上のアプリでそれを表示しているそうだ。（画面上部オレンジ色に変わっている部分が在線している位置）この仕組は、デモのために作ったわけではなく、今後実際の鉄道でも使われようとしている技術だという。

実際この技術を応用するとどんなことができるかといえば、速度・走行位置のリアルタイム表示も可能になるため、現在、人が電車の運行を集中管理しているところを、一部コンピュータに任せることができるかもしれないという。これに車両本体のセンサ情報（人がどれだけ載っているか等）を加えてマシンラーニングと組み合わせれば、実現できる可能性がある。可能性が広がっていると締めくくった。

船舶

次は、船舶について。まず最初にある動画が流されました。船舶の位置情報（AIS）は公開情報になっており、この情報を使って、Azure、マシンラーニング、PowerBIを組み合わせて、東京湾のすべての船舶位置の表示とすべての船舶の航行進路予測を行い、その結果から衝突予測を行い、必要な船舶に回避命令を出したり新しい航路を指示するというのを実現したそうです。この画像はその時の動画の一部です。

（とても良く出来た動画でしたが、おそらく公開されてないと思われます）

東京湾は世界でも有数の過密航路区間となっており、衝突事故が発生しないように、通常は東京湾に入ってくる大型船舶にはタグボートが付くことになっているそうです。しかし、小型の船舶はそんなことが出来ないため、それを解決するために、マイクロソフトと中央省庁で一緒に行った取り組みが、この動画だという。

船舶の安全は古くは灯台の明かりと人間の判断によって守られてきました。それが、無線になり、レーダーになり、ITの技術革新によって、今ではマイクロソフトのクラウドと機械学習技術がお役に立てる時代になった、と締めくくりました。

無線航空機

次は、空、ドローンの話です。昨今、Windows 10 IoTで動くドローンが登場し始めたということ。実際会場では実物が披露されました。

このドローンを利用して実際に無人航行を行った際のフライト情報（バッテリー残量、電圧、高度等）をクラウドに蓄積し、PowerBIで可視化するというデモが紹介されました。

　人／人工知能

最後は、基調講演にも登場した人工知能「りんな」の話題です。会場では画像認識のデモが行われました。

この画面は西脇さんのiphone上でLINEをつかってりんなと会話をしているところです。文章の代わりに柴犬のイメージをアップロードしています。

西脇さんいわく、柴犬の画像を送って、「これは柴犬です」と返すのは、人工知能ではなくアシスタントであるということ。りんなは、人と楽しく会話をするにはどうすればいいかを考えて実践する事を目的とした人工知能なので、そうは返さないようです。上記例では、「超かわいい」と、それ以降話を繋げられるような返しができていることがわかると思います。

次に、りんなにテレビの音声を聴かせるというデモが行われました。左の写真のように、テレビの横で音声認識機能を利用して音声を取り込み送信してあげます。時間にして５秒程度。そうすると、写真右のようにどのテレビ局のどういう番組名なのか、その番組に出演しているタレントさんの名前や関連する話題を喋ってくれるんです。

このデモは、りんなとクラウド上の深層学習によるデモということです。マイクロソフトのデータセンタは地デジの映像をリアルタイムですべて蓄積しているそうです。今放送されている音声とアップロードした音声をクラウド上でリアルタイムにマッチングして、番組名を推測する。そこから、出演者の情報などを検索し、会話につなげていくということ。これはすごかった。

今日紹介した、りんなを使ったデモは皆さんも自分のスマホで試すことが出来るようなので、是非試してみてください！

技術革新に付いていこう

最後に昨今の技術革新について、こんな話がありました。

「技術革新が進むと今までの職業がなくなるのでは？」とよく言われます。最近では人工知能の話題が熱いですし、尚更。そこで登場したのがこの写真。

1905年のマンハッタンの写真と1925年のマンハッタンの写真。（写真は1925年の方） 両方の時代の写真を比較し、1905年は馬車が全盛。当然馬の世話をする職業があったはず。しかし、20年後の1925年の写真では馬車が姿を消し、すべて自動車に置き換わっています。では、1905年当時馬の世話をしていた人達は、1925年には職を失っているのでしょうか？

西脇さんはこう言いました。

「違うんです。1925年になったら、駐車場やガソリンスタンド、板金工場を運営してるんです。カーアクセサリを売ってるんです。技術革新についていった人は職業を変えるんです。技術革新についていった人は職業がなくなることはありません。プログラミングできる人は絶対に職業が無くなることはありません。」

マイクロソフトのテクノロジーとそれを支えるエンジニアの皆さんのおかげで、将来は大きく変わって魅力あふれる未来になる。そんな未来を一緒に作っていきましょう。

最後にそう締めくくり、西脇さんのセッションは終わりました。

この記事は、「de:code2016」のセッションレポート、日本マイクロソフトエバンジェリスト物江修氏による「モダンWeb:たった今と、ほんの少し未来のはなし」です。講演内容を再現していますが、ニュアンス等伝えきれない場合があるかもしれません。ご了承ください。

モダンWebとは

昨今、様々なところで「モダンWeb」という言葉を聞くが、その定義は曖昧で意味するところの範囲が広範囲に及んでいるためではないかと考える。多くの場合、「モダンWeb」という文脈で語られている内容は次の４つの事柄で語られている。

• モダンなWebシステム
• モダンな開発手法
• モダンな標準機能
• モダンなアプリケーション

単にモダンWebアプリケーションと言った場合にはこれらいろいろな意味に捉えることが多いが、このように四つに分けることができる。このセッションでは、アプリケーションを開発するのに必要な「モダンなWeb標準の機能」、「モダンなWebアプリケーション」に関して触れる。

なぜ「モダンWeb」が話題になっているのか

第一に挙げられることは「時代の要求」。具体的には以下の3つが挙げられる。

• Web技術の進化
• コンテンツのリッチ化
• クライアントの多様化

Web技術で作るリッチなUIは昔から存在していたが、以前はFlashなどのプラグインを利用したいわゆるRIA(Rich Internet Applications)のほうが優勢だった。その後、Ajaxでデータを取得し、そのデータを使って部分的なUIの更新が可能になり、jQuery UIなどのUIライブラリによる開発生産性の向上、そしてHTML5の登場によって、プラグインで行っていたことがWebの標準技術だけで作ることが可能になった。これがWeb技術の進化である。

そしてスマートフォンから始まったFlashの衰退が進み、今までFlashで行っていたような要求をWebコンテンツ側にやってくるようになり、コンテンツのリッチ化が始まった。

スマートフォンを始め、PCブラウザー以外の様々なものがインターネットに繋がり、クライアントが多様化した。

この「クライアントの多様化」はサーバーサイドの形態にも影響を与え、その影響が、Webブラウザー上で動くアプリケーションにも影響を与えたという状況になっている。具体的にどういうことなのか。

黎明期のWebアプリケーションは、リクエストされたページを単純にレスポンスするというもの。ちなみに一番最初のWebサーバーはティム・バーナーズ・リーが作った「CERN Httpd」で、1991年にニュースグループで公開されたが、翌年に作られた「NCSA Httpd」ではCGIがサポートされ、動的ページが作れるようになった。ご存知の通り、このサーバーサイドで処理をして、処理結果をページで返すWebアプリケーションは広く使われている。

さらに、新しいクライアントとして携帯電話が現れる。NTT Docomoから始まった携帯電話は、それまでWebのクライアントというと、PCブラウザかゲーム機くらいで、いずれも机に座って使うようなものだった。

しかし、携帯電話は持ち歩き、行動に必要な情報を得るためのツールとして機能するモビリティという考え方が生まれた。

今までとは利用用途が異なる、サーバーではデバイスに応じた専用のコンテンツを作る必要があるなどコンテンツを作っていくには困難な状況だった。

やがて、スマートフォンに代表されるスマートデバイスが現れます。これらは、PCブラウザー用のコンテンツを同じ様に処理することができたので、わざわざ専用のコンテンツを用意しなくても済む。問題は、画面サイズに応じて表示を切り替える必要があり、同時期に出てきたHTML5関連技術であるCSS3を使ったレスポンシブWebデザインで、こうした技術を吸収することができた。

さらにスマートフォンは、サーバーサイドの処理にさらに大きな変化をもたらした。

Webアプリケーションの登場です。サーバにリクエストを投げるが、必要とするのはページではなくデータでした。この影響を受け、Webサーバーに必要な技術は、データを返す「API」が重要になった。

現在では、クライアントデバイスの性能とWebブラウザーの機能も数段上がり、処理性能ではネイティブで作られたアプリケーションと同等なことができるようになった。

SPA(Single-page Application)

単一ページによるWebアプリケーションであるSPAの特徴は、以下が挙げられる。

• 画面遷移はDOM操作
• ページのリフレッシュは不要
• リッチなエクスペリエンス

SPAにするメリットもいくつかある。例えば、サーバーサイドを「サービス化」することによって、多様化していくクライアントにも対応できるようになる。つまり、サービスをどこにでも提供できポータビリティを上げることができる。

現在のようにクライアント技術の進化が劇的に早い（言い換えると、陳腐化する速度も早い）状況下でもSPAは有効だ。クライアントとサーバーのロジックを物理的に別けることで保守性を上げることができるから。さらに分業においては、サーバーサイドを開発する人間、クライアントサイドを開発する人間で、やるべきことに集中できるということが挙げられる。

プログラミングスタイルの変化

SPAの登場によつてプログラミングのスタイルも少なからず変化している。Ajaxなどの非同期処理を行う場合、処理の単位はサーバーサイドの動作と必ずしも一致せず、処理の順番やタイミングもまちまちになる。それらを適切にハンドリングして画面に描画する必要がある。

さらに、ユーザーアクションの開始が、いわゆるPull型（サーバにリクエストするという意味で）だったが、WebRTCやWebSocketsの登場にによって、突発的に開始されるPush型（サーバからクライアントに通知する）可能性もある。

非同期処理の完了であるが JavaScriptではイベント通知で行われる。また、今まではサーバーロジックで行われていた処理をクライアントで行うケースも出てくるので、1つの完結する処理を行う場合、複数回サーバーとやり取りする必要がある。よく「コールバック地獄」ということに陥る。

不規則に発生するイベントを適切にルーティングしつつ、状態を把握し、かつ処理全体を制御する仕組みが必要で、こういった制御を行うために、JavaScriptのライブラリやフレームワークが様々な機能を実装し提供している。

そして、最新のモダンブラウザーがサポートしつつあるECMA Script2015や2016にも、こうした機能が標準で用意されようとしている。つまりイベントのフロー制御方法は

• Promise(ES2015)
• async/await(ES2016)
• Generator/yield(ES2015)

Promiseは非同期処理を抽象化したオブジェクトでPromiseパターンで非同期処理を行う。async/awaitは、Promise とGeneratorの糖衣構文で、そのGenerator/yieldは、反復子 (イテレータ )の生成元で、実行環境を維持したま中断・再開が可能となる。

SPAでは画面のレンダリングも従来のサーバーサイドの処理をメインしたものとは異なる。

SPA以前のサーバーサイドでページが生成されるタイプのWebアプリケーションでは、画面データの成形もサーバーサイドで行われていましたが、SPAではその部分をクライアントサイドで行うことになる。

素直に書くなら、エレメント一つひとつのインスタンスを取得して、各々データをセットする所謂「Glue code」を書く（”グルー”とは糊のこと）ことになる。だが、これだとエレメント変更に関わるUI仕様があるたびにコードまで修正する必要がありメンテナンスが大変だし、いちいちデータを入れるためだけのコードを書くということ自体が非効率。

データバインディング

そこで出てきたのがUIへのデータバインドです。 マークアップにUIとデータの関係を記述しておくと、JavaScriptフレームワークがよしなにデータをセットしてくれるという仕組みです。 こうすることで、データと画面、いわゆる ModelとViewの関係を1:1に紐づけ、構造的には明確に分け部品化することが可能になった。

“バインド”とあるように、ModelとViewの関係を保持します。つまり、モデルもしくはビューに変更が発生した場合、その変更が一方向、あるいは双方向に反映されます。Modelの変更のみかViewに反映されるのが1Wayバインドで、双方向に変更が伝わるのが2Wayバインドです。

まとめるとモダンなWebアプリケーションとは

• SPA
• リアクティブな動作
• M-V-Whatever

少し先のWebアプリケーションの技術的コンセプト

ここからは、ここ数年提唱されているWebアプリケーションの技術的コンセプトについて紹介します。

• Web Components
• Progressive Web Apps
• WebAssembly

Web Components

まずは「Web Components」です。これはWebをコンポーネント化する仕組みで、2013年のGoogle I/Oで紹介された。実は、Webをコンポーネント化するという仕組みは、これが最初ではなく、マイクロソフトも1998年にHTMLコンポーネントというものを提案したし、Mozillaも2001年にXBLと2007年にXBL2というのを提案した。

このコンポーネント化のメリット、目的について

Webのアプリケーションは、他のソフトウェア・アプリケーションと同様に複雑になり、今ではリリース製品の開発に大勢が協力して取り組むことは珍しくなくなった。少しでも効率化を図るには、関係者やシステム間の重複が最小限になるように開発作業を分割する正しい方法を見つけることが重要になる。そのための方法としてコンポーネント化がある。複雑なシステムでも、機能を分割していけば、単純化することができる。全体をある程度の機能単位に分割する、つまりはコンポーネント化だ。

Web Componentsの目標は、HTML、CSS、JavaScriptの関連グループを分離し、単一ページのコンテキスト “内” で共通関数を実行することで、複雑さを軽減することだ。

この Web Components は、複数の API を組み合わせるか、それ単独を使用して実現する。 しかし、すべての Web ブラウザーがその API をサポートしているわけではないので、Polyfill 用のライブラリーが用意されています。

そしてこちらがWeb Componentsを構成する要素です。

• HTML Templates
• Shadow DOM
• Custom Elements
• HTML Imports

現在のサポートの状況はこのようになっています。

※ 既定では動作しない

Progressive Web Apps

これはモバイル Web アプリ向けのコンセプトで、具体的には、高性能のモバイルWebブラウザー向けにネイティブアプリケーションのようなUXを提供しようというも。去年の「Chrome Dev Summit」のキーノートで発表され話題になったものだ。今年の４月に行われた「Google Developers Summit Tokyo 2016」でも2日のテーマになっていたくらい力を入れている。

Progressive Web Appsに求められる体験をまとめると次の様なもの

• ネイティブアプリケーションのようなUX
  • オフラインサポート: Service Worker
  • プッシュ通知: Web Notifications/Push API
  • ホームスクリーンにアイコンの追加: Web App Manifest
  • バックグラウンド: Service Worker
  • 高速でなめらかなインターフェース: CSS3 Animation

Service Workerは、JavaScriptで実装されているローカルのプロキシ、あるいはApplication Cacheの改良版として利用できる。 いままで Web ブラウザーからサーバーにコンテンツをリクエストする場合、サーバーになげてそれを返していたのが、その間にカスタマイズ可能な Service Worker というのが入って バックグラウンドで動いているので、タブを閉じてもブラウザを終了しても動作しているので、プッシュ通知もうけとれるとこと。httpsでしか動作しない。

Progressive Web Appsを実現する技術のサポート状況は

WebAssenbly

WebAssenblyは、コンパイル済みのバイナリをWebブラウザ上で直接動作させる仕組で、Microsoft、Google、Mozilla、Webkitプロジェクトのメンバーで共同開発されていて足並みが揃っている。

JavaScriptよりもポータブルでロード時間や実行に対するパフォーマンスに優れたアプリケーションを作ることが可能だ。asm.jsの次のステップとしている。

2016/3/14〜16の間にMicrosoft、Google、Mozillaの3社が3DゲームAngry botでの検証結果を各ブログで公開している。

WebAssemblyの実装状況は

ハイブリッドアプリケーションとしての利用

Webアプリケーションが苦手とするところは

• ストアのエコシステムを利用しない
• Webブラウザからはどうしてもアクセスできないハードウェアリソース

そしてこれらの Web アプリケーションのは、ハイブリットアプリとしてパッケージすることにより、ターゲットとなるプラットフォームのリソースや、ブラウザーからはアクセスできないハードウェアの機能を使用できるようになる。 また、アプリストアのエコシステムを利用することができる。

Webフロントエンドの開発リソース

インタラクティブなコンテンツを作ることができるようになったので、開発は非常に大変なものになった。

• JavaScript
  • ライブラリ
  • フレームワーク
  • エンジンテンプレート
  • altJS
• CSS
  • フレームワーク
  • プリプロセッサー
• HTML
  • 軽量マークアップ
• パッケージマネージャ
• タスクランナー
• モジュール管理

Richになったことで多くのライブラリが提供された結果「Chaos」になったのか？と思いがち。そして、ライブラリ/フレームワークの選定として考える必要がある。

• ブラウザサポート
• ベンダーサポート
• 情報
  • ドキュメント
  • 書籍類
• 学習コスト
• 開発生産性
• 機能範囲
• ロックイン
• 運用コスト

特にこの中のロックインですが、ロックインは決して悪いものではなく、優秀なベンダーと一緒になってやっていくこと、コミュニティの力を借りることでむしろ良い状況も作れる。運用コストに関しては、便利なんだけどお金がかかるというものについては考えもの。

標準技術は不変

結局、Webブラウザで動作するのは、HTML、CSS、JavaScriptであり、ブラウザがサポートしていない機能は動かない。技術はあくまでも「手段」でり、そうした技術に対する勉強は大事だが、手段であって目的ではない。目的は、ユーザに対して良いプロダクトを提供すること。たとえば、YouTubeはFlashで作られていたが、HTML5に変わったことに気づいた人はいない、そういうものが良い。

そして、WebはApplicationのプラットフォームになる。どんどん低レベルなAPIを実装することになる。結果、デスクトップと同じ様なアプリケーションを作っていける。こうした変貌は「変化」ではなく「拡張」である。

編集長の白石さんに続き、エキスパートの佐川がde:codeをレポート。

「すべての人の可能性を拡げるモバイルファースト、クラウドファーストの世界」をテーマに行われたde:code基調講演は、静なる改革者 米国本社CEOのサティア ナデラ(Satya Nadella)氏の素晴らしい基調講演の後、スティーブングッゲンハイマー(Steven Guggenheimer)氏が具体的な事例とともに紹介した。 de:codeは5/24-25の2日プリンスパークタワー東京で開催された。

de:code2016では、IT技術者の多くが、昨年から始まったMicrosoftの変革を疑わなくなり、更に変貌するMicrosoftのすべてをキャッチアップできる。ただ残念なことにコンテンツが多すぎて全てを見て回ることができない！分身の術が欲しくなるほど興味深いセッションが目白押しです。それをMicrosoftも理解しているのか「de:code 2016の歩き方」もあり、すべてのIT技術者が戸惑うことなく適したコンテンツを見られるよう工夫がされています。

Microsoftが示すオープンイノベーション

初めに サティア ナデラ氏 が開発者やインフラ エンジニアの創造力を最大限に活かす方法について、世界に大きな影響力を与える日本国内の事例を交えて、そのソリューションの紹介がありました。米国本社VP(Vice President)スティーブングッゲンハイマー(Steven Guggenheimer)をはじめ、日本マイクロソフトの統括本部長 伊藤かつら氏、最高技術責任者の榊原彰氏が登壇し、オープンソース コミュニティやパートナーエコシステム、そして経済成長の機会を確実にとらえる最新のプラットフォーム イノベーションが紹介され、日本市場でこれらがどのようにビジネスやエンジニアの変革をMicrosoftとして手助けできるのかを、豊富なデモを交えて解説してくれた。

デベロッパーは何ができるのか

Microsoftがデベロッパーに対して、どういった活動をしているのかを説明してくれた。

1. Microsoftはコミュニティとデベロッパーとどういうことをしているか
2. Microsoftは何を作って、どういう需要に対応しているのか
3. テクノロジーを使って個人として何ができるのか

Microsoftは、何年も前から、モバイルファーストについて取り組んできているという話があった。そして、古い時代からデベロッパーとはビジネスを進めてきたか、今後、Microsoftはどう進めていくのか、その答えがオープンプラットフォームにあるようだ。 何を作って、どういう需要があるのかを常に考え、デベロッパーのために様々な環境を作ってきたというMicrosoftの姿勢がここにある。

プラットフォームカンパニーとしてのMicrosoft

今とこれからのMicrosoftは次のようなポジショニングを行っている。つまり、Microsoftはプラットフォームカンパニーとなった。がしかし、パーソナルコンピューティングとしてWindows10というのもまだ推し進めていく。

ここ３年間の進化として、IoT、タブレット、テレビ、ホロレンズなどバラバラで提供してきた技術が今集約され、そしてWindows10では、一気に全てを集約し、その集約できるものがWindows10であるというように考えていて、今では、すべてのデバイスを横展開できるようになったそうだ。しかし当然難しいところもあり、それぞれのデバイスに対するカスタマイズは必要ではあると言う。だがだが！中心部分はひとつのコードで動いていて、これは本当に素晴らしいことで、Windows PCを使って開発すれば、.NetやC#によりどんなプラットフォームでも動くようになるということを意味し、Microsoft上でEcosystemを構築しているように思える。

Windows10の新しい3つの機能デモ

ペン、ペンタブレットとして利用したWindows10はインクワークスペースを持っている。このインクワークスペースはペンで使える機能が充実している。例えば、付箋、スケッチパット、新しくインク用に作られた、定規もあり様々な機能が充実している。そして、これら機能は、デベロッパーが作ったアプリケーションにインクの機能を追加することができる。

Windows10ではbashコマンドが利用できる。UbuntuのバイナリをインストールしているのでLinux系のコマンドがほとんど利用可能となりvimやemacsを当然利用することができる。XWindwの機能も動くし、apt-getのコマンドなど我々が通常MACで利用しているコマンドが何のわだかまりもなく動くのは素晴らしいことだ。

ディスクトップアプリケーションをパッケージングしウィンドウズストアにアップすることができる。今回デモでは秀丸をパッケージングしローカルPCにインストールをした。これによりセキュアな形でインストール、実行できる。

UWPのアプリケーションを紹介

具体的には、ブリジストンが作っているタイヤの検査アプリケーションのデモを行っていた。

Xamarinを使って作られたアプリケーションで、日々複雑な仕事を様々なデバイスを使って業務を行っている。特徴は

• 音声により画面を切り替える
• 音声により測定（検査）をこなう
• 項目への入力も音声

XamarinによりiOA、Androidも作成可能になる。MACでは通常XCodeが必要になるが、Windowsではエミュレーションがあるので実行確認でき、Mac Bookではできないタッチ確認ができるのも特徴のひとつ

Officeというのは仕事の最前線にポジショニングされていたが、様々な接続をOfficeがサポートしています。OfficeがAzureのデータを出力することで、またはそれ以外のもののインターフェースになりOfficeがフロントエンドとしての役割を担う。アプリケーションと一緒に、スカイプを使うことも可能です。言い換えると、Officeはビジネルの共通な言語になった。

Wordクラウドによるビジュアリゼーション

文字を値で表現するWordクラウドによるビジュアリゼーションに関するデモンストレーションが行われた。

まず、Webエンジニアには馴染みのあるYEOMANを使ってジェネレートを利用してテンプレートを作成した。テンプレートにあるmanifestファイルを作成しホスティングするURLを定義する。

重要なパッケージは

• microsoft.office.js
• d3.js

ローカル上で作成したものがクラウド上のExcelに登録されビジュアリゼーションとして表現することが可能となる。ここで利用されているようなアドインはストアの中で多く展開されグラフや図などもストアに存在する。

DMM.makeのデモ

クラウド上にあるメールやデータを集めることができる

ロボット（ペッパー）のセールス・デモ

ペッパーを通し年齢、性別などを判断し的確な製品をセールスすることが可能となる。つまり、ロボットを利用し、マシンラーニングをベースにして、誰がどういう人なのかを判断することが可能となる。

クラウド

事業のライフサイクルはそれぞれ異なるがMicrosoftは’Platform as a Service’としてクラウド事業をしている。様々なところでAzureが提供できるが、まだクラウドかしていないものがある。Microsoft Cloudの特徴は

1. ハイパースケール
2. ハイブリット
3. エンタープライズカスタマー

ハイパースケールとは、世界全体で使え世界中にある。キャパシティもAmazone,Googleを合わせてもより大きい。つまりアウトソースにかかるコストが安いことを意味している。

10年以上クラウドサービスを作っているMicrosoftのハイブリットの意味するところは、クラウドに置くもの、ファイアオールに置くものをビジネスの利用局面で考える必要がありAzureスタックを柔軟に利用できることがあげられる。 Microsoftは、サポート、サービス、エバンジェリストを通じて、エンタープライズカスタマーをクラウドの利用をサポートしていく。多くの利用者がAzureに移行して行っている。

キャプションボットAPIのデモ: 機械学習、人工知能

機械学習、人口知能を通じて、より人間味のあるアプリケーションを作ることができる。

キャプションボットAPIを使ったデモが３つ行われた。写真は、プロ野球選手でピッチャーのものを利用しキャプションボットでどういう回答があるか。

人間が見れば、野球選手、投球中であることがわかるが、キャプションボットでもこれを正しく判断することができる。もっと複雑な写真のデモ。これも完璧な回答が得られた。写真の構図は、丘の上でバイオリンを弾く女性、牛も二匹いた。

さて、次のデモ。ホテルに行くと鍵をなくしたらどうなるか、マネージャが鍵を盗んだらどうなるかということを想定して欲しい。この時に生体情報を使って管理したらどうなるかというデモンストレーションを行った。

シナリオは次の通りで制度の高い認証が出来ていた。

1. Windows10を利用する
2. Face APIを使って承認済みのものを使う
3. ドアの前に立つ
4. 承認されてない人はドアを開けることができない
5. 承認済みであればドアの鍵が開く

Microsoftのオープンマインド

この基調講演を通じて感じたのは、Microsoftは今まで我々が知っているMicrosoftでは無くまるで別会社のような存在になったということかも知れない。昨年のde:codeでもこの「変わった」感は半端なかったが、いまはWindows上でbashが動き、VSCodeのようにオープン化し新しいデバイスへのチャレンジがまだまだ確信的に進んでいくのだろう。

おはようございます、編集長の白石です。 今、Microsoftが主催する技術者向けイベント、de:code 2016に来ています。

最近のMicrosoft、なんか変わりましたよね。今回のイベントでは、その変化の立役者であるサティア・ナデラCEO自らが来て話をするというので、とてもワクワクしていました。

で、まだ基調講演を半分聞いただけですが先に感想を言っちゃいますと、ぼくはここ10年くらい記者も細々と続けてまして、Microsoftのイベントもちょこちょこと参加して記事を書いたりしてきましたが、正直、今のMicrosoftが一番カッコいいと、率直に思います。

この記事では、基調講演の前半の模様をお伝えします。現場の熱気をお伝えしたく大急ぎで書いたので、ちょっと乱文＆文章ゆるめですがご容赦あれ。

Javaと.NETのエバンジェリストが歴史的握手！

これはイベント開始前の話ですが、ちょっとしたラジオっぽいライブ中継をしていました。 英語中心の中継だったので、正直内容はほとんどわからなかった（英語勉強しろ）のですが、Javaと.NETのエバンジェリストが歴史的な握手！をしたところではちょっと感動してしまいました。

ぼくは昔Javaのエンジニアで、NETが世に出てきた時には正直むっとしたものでした。その前はJavaをめぐって開発元のSun MicrosystemsとMicrosoftは訴訟なんかしてた時代もありましたし…その頃を知る人間にとっては、隔世の感があります。

オープニング: Mixed Realityのデモに度肝を抜かれた

伊藤かつら氏、榊原彰氏によるオープニング。ついでに、Microsoft性の対話型AIであるCortanaもアシスタントも務めていました。

内容は、主にMicrosoftの変化と現状について。 OSSへの傾注、WindowsへのUbuntu搭載（これ、米国のBuildカンファレンスで発表された時には、会場は狂喜乱舞だったそうです…榊原さんは「阿鼻叫喚」と言い間違えて、伊藤さんが慌てていたのが面白かったですが）、Hololens、Xamarinの無償提供…などいろんな話題を取り上げていましたが…最初の方に紹介されたデモがすごかったです。ぼくが知らなかっただけで、知っている人にとっては「普通でしょ」って感じなのかもしれませんが…

紙のカタログにカメラをかざしたら3Dの東京タワーが表示されます。

カメラを通して名刺を見ると、観客と榊原さんご本人が表示されます。なんということだ…テクノロジーすげえ

ナデラCEO来た！

そして来ました、サティア・ナデラCEO。世界有数のテクノロジー企業のCEOを生で見れただけでもテンション上がります。

そして、以下に上げるのが、CEO自らが語るMicrosoftの重点分野。これが、世界トップレベルのテクノロジー企業が優先的に取り組んでいるものです。

インテリジェントなクラウド（Build the intelligent cloud platform）

クラウドの大きな利点であるスケーラビリティは同然のこと、[22のコグニティブ・サービス]に代表されるような、先進的で強力な機能をクラウド上のAPIで簡単に利用できるようになります。あらゆる業種がデジタルカンパニーに変わろうとしている今、こうしたサービスを利用することで、ユーザーへの価値をより迅速に高めていくことができます。

生産性と業務プロセスの再発明（Reinvent productivity & business processes）

Microsoft Officeに代表される業務ツールの進化、そして企業活動をより強くサポートしていく。Microsoft GraphというAPI群を用いて、Office365の機能を自由に利用・拡張していくことが可能だとのこと。

プラットフォームとしての会話（Conversations as a Platform）

人間同士が使用している、最も柔軟で歴史あるインターフェースが自然言語。その自然言語を用いて、究極的には「アプリケーション」という概念をなくしてしまおうというビジョンです。

対話型のAIとしてはCortanaがありますし、対話コマンドとしてのボットは、Microsoft Bot Frameworkなどのツールを用いれば、開発も容易です。

また、女子高生AIの「りんな」も非常に有名ですね。ナデラ氏の基調講演中で、唯一他のスピーカーがデモをしていたのがこのりんな。Microsoftとしての力の入れようもわかるというものです。

LINEで「りんな」と話すデモ。自分のパートだけじゃなく、りんなの返信も声に出してのデモはなんかシュールで面白かったです（文章では伝わらない…くそう）

よりパーソナルなコンピューティング（Create more personal computing）、そしてMixed Reality

「パソコン」というジャンルを世に知らしめたMicrosoftが、「よりパーソナルな」というのはどういうことでしょう。 例えば Surface Proによって2 in 1という製品カテゴリを創ったことなどを挙げていましたが、さらにHololensに代表されるホログラフィックコンピューティング、そしてその先にMixed Reality（複合現実）という概念を紹介していました。

アナログとデジタルが完全に融合した全く新しいメディア、プレゼンスの概念による「どこにでも行ける」世界。リッチメディアにはもはや限界がなく、ゲームやエンターテインメントの世界にかぎらず、あらゆる業種に関わり、コアとなるビジネスプロセスをも変革する可能性のあるもの。基調講演のハイライトとして、一番力強くてワクワクする場面でした。

Microsoft ♡ Developer

言わずもがなですが、de:codeは開発者のためのイベントです。ナデラ氏の基調講演を聞き、この文章を書きながら感じているのは、未だに私たちは大きく変化する時代にいて、開発者はその変化に直接携われる立場にいるのだなあ…ということ。伊藤かつらさんのオープニングの終わりに掲げられていたメッセージは「Microsoft ♡ Developer」でした。実際、de:codeの現場に身をおいていると、そのメッセージは強く説得力を持って感じられます。エンジニアの端くれとして、もっと新しいものを作っていきたいと、強く刺激を受けました。

マイクロソフトのWebブラウザのいままでとこれから

HTML5 Experts.jpのエキスパートであり、日本マイクロソフトのエバンジェリストである春日井さんのセッションです。

IE9は大きなターニングポイントだった

マイクロソフトはブラウザをレガシーブラウザとモダンブラウザに分類しています。Windows8までは、以下のように、IE8以前はレガシーブラウザ、IE9からはモダンブラウザという括りになります。

IE9からモダンブラウザと言われる所以は、HTML5やCSS3、SVG等の次世代Web標準技術への対応がなされたからで、IE11でも使われているJavaScriptエンジンである「Chakra」もIE9から実装されています。また、IE同士の互換性、ChromeやFirefox等の他ブラウザとの総合運用性を重要視する方針もこの時に打ち出されました。

IE11は最後のIEです

マイクロソフトはWindows10に向けて、新しいブラウザブランドを「Microsoft Edge」としました。春日井さんいわく、とてもいいネーミングだと思ったそうです。

IEサポートポリシーの変更は未来への布石

Edgeの登場より少し前の2014年8月7日、IEのサポートポリシーの変更が行われたことは、ご存じの方も多いですよね。

今までは、この図のように、例えば同じIE8でもVistaと7ではサポート期間が異なっていました。しかし、これからはOS毎にサポートするIEのバージョンが決められ、最新のIEのみサポートするというポリシーに変更されました。ライフサイクルはOSのライフサイクルに準拠します。

春日井さんは、このポリシー変更に至った理由を市場の変化によるものだと語ります。

コンシューマーをターゲットにみると、ネットに接続するデバイスがPCからスマートデバイスにシフトしていて、そのデバイスは多様化しています。ビジネスについても、BYODの導入が盛んに行われ、個人が持っているデバイスを会社で利用するというニーズは今後ますます大きくなってきます。そういう背景にマッチさせるために、3つのアクションが取られています。

1つは、セキュリティ対策です。セキュリティ的な脆弱性をいち早く発見し、それに迅速に対処する事が求められています。ポリシー変更に伴い、対策稼働を集中させる事ができ、それを実現することができます。

2つめは、エンジニアの開発・検証作業の軽減です。例えば、Webサイトを開発する場合、スマートデバイスの種類が増えるとそれだけ、動作保証するブラウザや機種が増えますよね。ポリシーを変更することで、それを軽減することができ、効率のよい開発が可能になるはずです。

最後は、最新のWeb標準技術への対応を加速化させたいという思いがあるからです。例として、WebフォントとWebRTCをを取り上げます。

Webフォントはサイトを見るユーザーに、与えたい印象を決める重要な素材です。活用するこで、DTPに近い形でWebコンテンツをお届けできるようになります。

TypeSquare – http://typesquare.com/

WebRTCでは、今までSkype等の専用アプリケーションが必要だった、ビデオチャットをブラウザだけで実現することができます。IE11はネイティブではWebRTCをサポートしていないため、プラグインが必要になります。

Tokbox – https://tokbox.com/

このように、最新の技術をいち早く試したいというユーザーのニーズに、サポートポリシーの変更で、答えていこうとしています。

それでも後方互換性って大事ですよね…

IEに搭載されているTridentというブラウザエンジンには、互換性を担保する仕組みが用意されています。例えば、IE6の時代には、Quirks、Strictというモードが搭載されていました。

これは、ドキュメントモードというもので、IEのレンダリングルールを切り替える仕組みです。開発者ツールやmetaタグからの指示で切り替えることができます。

IE11になると、後方互換性はこんな感じになります。（筆者の感想ですが、正直すごいですね）

IE11には後方互換性を担保するエンタープライズモードが搭載されています。エンタープライズモードと標準モードの違いは以下のとおり。エンタープライズモードへは、GroupPolicyやレジストリで切り替えることができます。

また、このモードはWebサイトごとに有効無効を切り替えられます。GroupPolicy向けのXML定義ファイルを作るEnterprise Mode Site List Managerというツールも用意しています。

Edgeは後方互換性を捨てて相互運用性を重視する

Edgeには、「Living on the Edge」というスローガンのようなものがあります。最新の仕様に沿ったフレッシュな状態を常に提供し続ける、つまり、エバーグリーンであることがEdgeの特徴なのです。

しかし、全てが全て標準仕様に従えるわけではないありません。そのため、マイクロソフトは相互運用性に関する考えも明確に示しています。

どうしても、Web標準から外れないといけない事態になった場合は、他ブラウザとの相互運用性を考慮して決定すると言っていますね。こういう姿勢からも、過去のIEのように、MS独自機能は徹底して作らないという気合を感じてもらえると思います。

そして、こういう姿勢は既によい方向に進んでいて、マイクロソフトが提案したPointer EventをBlinkが採用することにしたとか、MozillaのAsm.jsがChakraやEdgeに搭載されるとか、様々な発表がなされています。また、JavaScriptの標準仕様という点で言えば、ECMAScript6にもマイクロソフトは積極的です。ECMAScript Internationalに積極的に貢献しています。

そして、PCについてはだいぶ相互運用性が担保されてきましたが、スマホについてはまだ対応が進んでいないところもあります。Windows10はマルチデバイス対応なので、Edgeも当然マルチデバイスに対応します。こちらについても今後頑張っていく予定です。

Windows10にはIE11とEdgeを両方搭載

後方互換性などを省いたEdgeのソースコードは約22万行。そして、最新のWeb標準に対応するために追加されたコードは30万行にも及びます。

つまり、後方互換性はIE11で担保するというのが、マイクロソフトの見解です。

Edgeに搭載される最新Web技術とは

では、Edgeにはどのような最新機能が搭載されるのでしょうか。こんなかんじです。

これらの機能は実際に試してみることができます。デモサイトはこちらです。（SSL証明書のエラーが気になりますが…）

例えば、こちらはブラウザからWebカメラの画像を取り込んで利用するデモです。

dev.modern.ieでは、その他にも、最新機能の実装状況を確認したり、Web制作に便利な各種ツールを無料で利用することができますので、興味ある方は是非お試しください。

その他、Edgeに搭載される機能で面白いものがあるので、ここで2つご紹介します。

これは、ウェブノートという機能で、Web上に文字やイラストを重ねることが出来ます。Web制作現場でのレビューなどに使えそうですよね。

こちらは、リーディングモードと言って、Webサイトを読むことに集中できるにする機能です。これは、スマホブラウザでも有効です。

また、Edgeではこれらの機能をON/OFFできる「About:flags」という機能も搭載されます。Chromeなどをご利用の上級者の方ならご存知だとは思いますが、あれと同じような機能ですね。

Microsoft Edgeのまとめ

最後にEdgeについてまとめます。マルチデバイス対応でUIは根本的にも直されています。また、新しいExtensionモデルにも対応し、ChromeやFirefoxの拡張機能も利用することができるようになります。

それから、今日発表されたホヤホヤ情報ですが、ドルビーオーディオにも対応します。

逆に削除された機能もあります。ActiveXやVBScriptなどなど。

ここまでで、Edgeを使ってみたいと思った方、Windows Insiderから、Windows 10 Insider Previewをダウンロードして、是非使ってみてください。

最後に1つ。Edgeを始めとして、マイクロソフトはこれから、クロスプラットフォームを重要視していきます。しかし、クロスプラットフォームはブラウザ側だけでは完成しません。Web制作の現場でも、是非、クロスプラットフォームを意識して下さい。マイクロソフトはそれを全力で支援します。

以上、セッションの内容をまとめた、速報記事でした。

このセッションの後に、Edgeに関する座談会「新ブラウザ Microsoft Edge はどうあるべきかを議論する会」が開催されました。座談会の模様は後日レポートしますので、お楽しみに！かなりコアな内容でしたよー。

＊速報記事のため、内容が訂正する可能性があります。ご容赦下さい。

Microsoft Azureの話題が中心だった前半（レポート記事）とは対照的に、後半はWindows 10やHoloLensなど、コンシューマ向けプロダクトの紹介が主でした。 よって、内容が派手！見栄えのするデモや、ぼくらが大好きなコードの話も出てきて、見どころ満載でした。

ジョ〜〜！！！

「前後半の合間に、ちょっとした息抜きをしましょうか。Power BIの勉強でもしましょう」って言われた時は「えっ」という気持ちでいっぱいでしたが、フタを開けてみると本当に息抜きのコンテンツでした。

次の登壇者である「Giorgio Sardo」（ジョー）さんの名前を観客が全力で叫び、その音量を視覚化するというもの。 何やらせんだ。

最後はメーター振り切ることができて、マイクロソフトの方々もご満悦

で、ジョーが出てきました。

デベロッパーエクスペリエンス & エヴァンジェリストグループ シニアディレクターのGiorgio Sardo氏

Windows 10で、目指せ10億台！

話題はもちろんWindows 10です。 Windows 10は、「巨大なターゲット市場」「スマートエンゲージメント」「One Store & Dev Center」「統合された開発プラットフォーム」という特徴を備え、大きなチャンスを生み出すと言います。

巨大なターゲット市場

この画像で言いたいことは、「Windows 10はスゲエよ！10億台のデバイスを繋げるんだ！儲かるぜ！」ということ（超意訳）。

「儲かるぜ！」は、さすがに言ってなかったっけな。

スマート エンゲージメント

あらゆるデバイスを統合した通知機能や、Cortanaによるインテリジェントな検索により、アプリケーションとユーザの接点をより緊密なものにします。

（Windows 10がどこでも動くから）Windows 10アプリは一度書けばどこでも動く！HoloLensでも！

Windows 10の目指す所は、あらゆるデバイスに対して一つのOSという「One Windows」というビジョンです。 それにより当然ながら、アプリストアも一つに統合されます。

そうなると、「一つのアプリがあらゆるデバイスで動作する」必要も出てきます。つまり、あらゆるスクリーンサイズで動作する…レスポンシブであることが望まれる ということです。 レスポンシブなWindows 10アプリの例を、楽天のポータルアプリ「楽天Gateway」で実演。

あらゆるデバイスを統合するプラットフォームとしての、Windows 10のデモはまだまだ終わりません。 この画像が、マイクロソフトさんの言いたいことをよく表しているように思います。

こんなすごい3Dマップも…

一行書くだけで実現できます。

こういう、3Dモデルを作れるアプリも…

HoloLensがあればホログラム化！これはすごい！

Edgeの話も忘れずに

Webエンジニアとしては、最近一番ワクワクする話題だった「Microsoft Edge」の発表。 もちろんこの基調講演でも大きく扱われていました。

EdgeHTMLという新しい描画エンジンにより、4,200以上の相互運用性を改善したそうです。

もちろん、JavaScriptの実行速度を向上させるのも忘れません。

Edgeの大きなウリをMicrosoftさん自身でまとめるとこうなります。 「定期的な更新」っていうのが個人的には一番ツボです（IEは後方互換性の問題があって、これができなかったからなあ…）。 あと、ChromeやFirefoxの拡張機能が（ちょっとした修正で）動くと噂の、「新しいエクステンションモデル」も気になります。

新機能「Hosted Web Apps」は、WebサイトをそのままWindowsアプリにしてしまえる機能。

こんな感じのフライトシミュレーターアプリ（Webアプリ）も…

っと、デモを本格的にやる前に、プレイヤーとしての心の準備。 （最近のMicrosoftさん、エンジニアが好むゆるい雰囲気をよくよくわかってらっしゃる）

Windowsアプリにしてしまえば、よりネイティブな機能を利用できるので、Microsoft Bandと連携して飛行機を操縦…なんてこともできちゃう。

IoTも！機械学習も！

見どころ多すぎて、書くの疲れてきたんですが、まだまだ行きます。

Windows 10をIoTに対応させる動きも活発ですが、Minnowboard MaxとRasberry Pi 2ですでに利用可能です。

なんか偉い人らしいんですが、コスプレして出てきました。

これは何のデモかというと、富士通と共同で開発した「牛管理アプリ」だそうで（コスプレしてた偉い人は「Connected Cow」という札を下げてました）、牛にセンサーを付けて集めたデータを、Azure Machine Learningを使って機械学習＆統計出力していました。なんでもありだな、マイクロソフト。

スクエニ来た！なんかすごいデモや！

そろそろ最後の山場。

Windows 10のゲームとグラフィックの機能をプレゼンする段になり、スクウェア・エニックスの第2ビジネス・ディビジョンから田畑 端氏がいらっしゃいました。

中央がスクウェア・エニックス 第2ビジネス・ディビジョン ディレクター・プロデューサー 田畑 端氏

発表はふたつありました。

ひとつは「FINAL FANTASY AGITO on Windows 10」。

年内ローンチって言った？言ったよね？え？予定？

もうひとつは、Windows 10に搭載されるDirectX 12、そしてNVIDIAも巻き込んで開発された、アートとテクノロジーを融合させたデモンストレーション。

このクオリティの3D CG（髪の毛の本数も、実際の人間と同じだそうです）を、リアルタイムに視点移動させることができます。思わず会場からはため息が漏れました。 これは、動画見ないと伝わらないかも…。

WITCH CHAPTER 0 [cry]

ってことで動画貼っておきますね！

すべてのエンジニアとアプリのために

基調講演の最後は、MacやLinuxでも動作することで話題になった「Visual Studio Code」や、Dockerを一例としてオープンソースコミュニティへの貢献を拡大させていることなど、Microsoftの開発者に向けた取り組みが、Windowsに囲い込もうとしていた以前とは全く異なることへの言及でした。

「Empower every engineer」（すべてのエンジニアに力を与える）というフレーズは、このキーノートで一貫して取り上げられていましたが、聞いていたぼくとしてはその本気度が十分に伝わる内容でした。この記事を読んでいらっしゃる皆様にも、その雰囲気が少しでも伝われば幸いです。