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でのプレゼンを見たいという方はこちらからどうぞ！

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

5月24日、25日の二日間にわたり開催されたMicrosoftの技術者向けイベント「de:code 2016」で、日本マイクロソフト赤間信幸氏の「エンプラ系 業務Webアプリ開発に効く！実践的SPA型モダンWebアプリ開発の選択手法」というセッションを聴講しましたので、そのレポートをお届けします。

ただタイトルにもある通り、筆者的にはちょっともやもやする内容でもあったので、HTML5 Experts.jpコントリビューターの酒巻瑞穂さんと、講演の内容をベースとした軽い対談も行いました（後日、エンタープライズWebアプリのあるべきかたちについて、もっと掘り下げた内容の記事も作る予定です。乞うご期待）。

セッションレポート

SPA(Single Page Application)とは

今、Single Page Application(以降、SPAと記載する）が業務アプリケーションでも利用できないかということが話題になっています。復習になりますが、SPAとは以下の様な特徴を持つアプリケーションです。

• 単一ページで機能を提供するWebアプリケーション
  • ページをリロードせずにJavaScriptでWebAPIと通信
  • JavaScript、CSS、HTMLを組み合わせて画面を更新
  • これにより応答性が高く、使い勝手の良いWebアプリケーションを実現する
• Web上では割とSPAは一般的だが、業務アプリケーションでもSPA型の開発ニーズが高まっている

従来型のWebアプリケーションはサーバサイドが中心でした。そのほとんどの処理をWebサーバで行い、クライアントは受け取ったHTML、CSSを使ってレンダリングを行い、若干のJavaScriptを動かすというものでした。SPA型のWebアプリケーションでは、サーバはクライアントの指示に応じてデータを返し、UIの更新等はすべてクライアントで行います

SPA型Webアプリケーション開発の難しさ

このようなSPA型アプリケーション開発は相当のスキルが必要であり時にとてもむずかしいものになります。特に、SPA型Webアプリケーション開発に関するネット上の情報は、低水準からスクラッチで開発するためのものが多い。OSSなどをフル活用して作りこむ、いわばC++開発のような「職人技」の世界であり、ハードルが高いのが現実です。

エンタープライズ系業務Web開発の場合、こうした「職人的開発」はあまり向いていないように思います。

ここでエンタープライズ系開発とオープン系開発のギャップを確認してみましょう。

このような比較から、.NETのような高水準言語での開発に慣れ親しんだ開発者が、SPA開発に取り組むのはハードルが高いといえます。まとめると次の問題が挙げられます。

• 低水準開発の必要性：HTML, CSS, JavaScriptでの開発はC#, .NETでの開発に比べて低水準
• 高すぎる開発自由度：「どう作るか」は自分でゼロから決める必要がある
• ライブラリの選択の難しさ：膨大なライブラリからどれを選べばよいか分からない

そしてSPA型開発では、利用するフロントエンドライブラリによって作り方が大きく変わります。同じ「HTML5」の開発といえど、コードの互換性はほとんどありません。このためライブラリの選択には特に慎重を期す必要があるといえます。

そこで、自分のプロジェクトに合わせた適切なライブラリの選択が必要になるのですが、実際の現場ではこれが非常に難しい。Microsoftからは、クライアントライブラリは（ほぼ）提供されていませんが、世の中にライブラリは星の数ほどあります。

ライブラリを選ぶ際に考慮すべき事項

言語拡張

ここで、ライブラリを選択する際の私なりのやり方をご紹介します。ライブラリの選択では、基本言語仕様、DOM操作、通信処理、CSSに分けて考えてみます。そうすると、DOM操作・通信部分はほぼ必須になるので、jQueryを利用すればいい。基本言語仕様とCSSに関しては、スクラッチの作り込み型Webアプリケーションでは非常に重要ですが、業務Webアプリケーション開発の場合はケースバイケースです。より具体的に言うと、CSSではLess、SASS、StylusなどのCSSプリプロセッサーの選択、altJSでは、TypeScript、CoffeeScriptの選択などが挙げられます。

UIライブラリ

UIライブラリに関しては、低水準UI部品郡と高水準UI部品郡に分けて考えます。低水準UIライブラリには無償のものが多く、高水準UIライブラリは高機能ではあるが、ほとんどの場合有償製品となっています。

設計・実装方法論、フレームワーク

進化が激しくトレンドも頻繁に変わるため、注意が必要です。フレームワークを利用すれば、ロックインも発生します。特にWebフロントエンドの世界では数年と経たずにトレンドが変化します。このため頻繁に手を入れる見込みがない場合には、むやみにフレームワークに依存させるのは危険だと考えます。

各種ツール、ユーティリティ

どのような各種ツール、ユーティリティを利用するかというような考えは、初めてSPA型開発に取り組む場合には、後回しにするとよい。より高い生産性を目指す際には欠かせないツール郡ではあるが、ここまで述べてきた、言語拡張、UIライブラリ、設計・実装方法論、フレームワークなど覚えるべき要素、考えるべき要素が山ほどあります。最初はなくてもなんとかなりますので、必要性を感じたところから段階的に導入していくことをお勧めします。

ライブラリの組み合わせに関する注意

ライブラリは安易に組み合わせないように注意しましょう。ライブラリには必ず寿命がある上、複雑に依存しあっていることも多い。古いライブラリが他のライブラリのバージョンアップの足かせになることがあります。

長期的な保守が重要になる業務Webアプリケーションでは安易にライブラリを組み合わせるべきではないと考えています。

SPAフレームワークライブラリ

商用の高水準UI部品ライブラリは高価ですが、多くはオールインワンパッケージ（=SPAフレームワーク）になっていて、ライブラリの組み合わせ方で悩む必要が少なくなります。

このため、業務Webアプリケーション開発におけるクライアントライブラリの選択は、高水準UI部品の要否で大きく方針が変わります。

OSSライブラリの組み合わせ型開発では、利用できる高水準UI部品が少なめなので、メジャーなライブラリを中心に必要最小限の組み合わせを行います。。SPAフレームワークライブラリ依存型開発では、高水準UI部品が数多く利用できるので、シェア、情報量、日本語サポート、ライセンス費用などを元に選択するとよいでしょう。

サーバ側のページ構築

個人的には完全なSPA型ではなく、うまくサーバ技術を併用した方がSPA型の業務Webアプリケーションは作りやすい。特に.NET開発者の場合、複雑な業務ロジックはサーバ側でC#を使って記述した方が作りやすいことも多いでしょう。実際のSPA型アプリケーション開発では、サーバ側で組み立てなどにASP.NET MVCを併用するといいのではないでしょうか。UI処理の中心はあくまでもクライアントだが、上手に併用しましょう。

編集後記: 講演の内容について対談してみました。

レポートは以上になります。ただ、講演の結論が結局のところ「完全なSPA型じゃないほうがいい」と言っているように思え、少し違和感が残ったのも事実。そこで、同じくセッションを聴講していたコントリビュータの酒巻瑞穂さんと、疑問に感じたところを少し話し合ってみました。私も酒巻さんも、現役でエンタープライズWebに取り組んでいるエンジニアとして、これを機にエンタープライズ×SPAについて整理しておきたいと考えたからです。以下、その対談の内容を編集後記として掲載します。

SPAはつらい？

佐川：講演を聞いて、どんな感想を持ちました？

酒巻：正直、ちょっと違和感残る内容でしたね。

佐川：結論が結局、本格的なSPAは難しいからやめとこう、と言っているようにも聞こえました。

酒巻：私も、メリットが見えないものはがっつりSPAにする必要はない。何もかもSPAにすべきとは思いません。ただ例えば、モバイルの事を考えると、SPAにしていくメリットは大きいですよね。クライアントサイドでのオフライン処理を求められることも多いので、そうなるとSPAで作るほうが自然だったりする。

SPAはセッションをクライアント上で維持できるので、Server Push型のイベントが必要なアプリケーションを作る必要がある場合にも有効ですね。

佐川：SPA開発は職人技という話がありましたけど、ここはどうですか？

酒巻：職人技…かどうかはわかりませんが、開発の自由度は確かに高いですよね。アプリケーションの品質が、プログラマ個人の力量に左右される部分はまだ大きいですね。

佐川：フレームワークがそういう問題解決を担えるはずなんですが、そのフレームワークが多すぎるという(笑) 。講演でも「ライブラリ選択が多すぎる」という問題提起をしていらっしゃいましたね。

酒巻：確かにそれは同意できます。でも、「開発時の選択肢がない」というのは言い換えると「衰退する技術」のようにも思えるので、個人的にはむしろ今の状況は歓迎しています。業務エンジニアとしては社内ルールなどを作って統制する方がいいんじゃないかと。

佐川：それにライブラリの選択も、Yeomanなどのジェネレータやいろんなスターターキットを使えば、かなりの部分楽できますよね。

SPAの設計は悩ましい

酒巻：ただ、講演でも取り上げられていましたが、設計の方法論などについては確かに難しいです。ここはまだ結論がないと言うか、個人的にも難しいところですね。というのもWebの進化がまだ当分先を見てるので「今」の最善はあっても来年の最善はもう判らない。

佐川：設計方法論は、採用するフレームワークによっても大きく変わってくるところですしね。ただ、今のトレンドとしてはUIのコンポーネント化というのは間違いない方向性なので、そこからスタイルを決めていける。ただ、設計方法論を語った書物はあまり見られないのも事実で、これはWebの進化が早すぎるためではないかと。

しかしSPA設計の話って、「サーバでやるか、クライアントでやるか」って話になりがちですよね。ただ、MVC的なものをどちらかに寄せなければならないという話ではない。基本的には、UIを更新する処理はクライアントに寄せるというほうが筋が良いと思います。

この話はSPAをどうするかという話ではなく、もう少し広くWebアプリケーションをどうやって作るかの話です。SPAでもMPAでも議論としては同じで、SPAにすべきかそうすべきではないということになる。 そういう意味でも、SPAを採用すべき勘所とか、Webアプリケーション全体の中のSPAの位置付けについて、先ほどの講演でもっと聞きたかった。

酒巻：個人的には、ちょっと古い内容でしたね。「DOM操作はjQuery」と言っていたが、個人的にもうあまりやりたくない(笑)。

佐川：そうそう、個人的には4年くらい前の感覚に思えました。その頃とはWebアプリケーション開発のやり方そのものが変わっている。もちろん（Webアプリケーションではなく）Webサイトを作るときにわざわざReact.jsとかAngularを利用しなくてもいい。そういう時はjQueryでもいいと思います。こういうものは当たり前ですが、適材適所で考える必要があって、それこそマネージャやアーキテクトの腕の見せどころなのではないでしょうか。

最後に

ここのところ、確かにエンタープライズでSPAの導入が多くなってきました。 一方でまだまだ事例が少ないこと、開発経験のあるエンジニアが少ないため導入しようとしてもなかなかプロジェクトとして進められないという現状もあります。この記事が、エンタープライズWebアプリの開発に少しでも寄与できたなら幸いです。

de:code 2016に参加中の、編集長の白石です。

今回は、編集部のメンバーそれぞれが興味あるセッションに参加してセッションレポートを書こう、ということになってまして、ぼくは「Big Data/機械学習がソフトウェア開発手法を変える! 〜静的アルゴリズム生成から動的アルゴリズム生成への道〜」というセッションを聴講しました。 スピーカーである田丸健三郎さんの語り口が心地よく、機械学習についてはかじったことくらいしかないぼくにとってはレベル感もちょうど良く、知らなかったことも数多く学べてとても満足でした。

以下に、簡単なセッションレポートを掲載します。機械学習については素人の、Webエンジニアによるレポートではありますが、何かのお役に立てば幸いです。 （ちなみに画像に沿えた文章は白石による補足文章であり、スピーカーご本人による発言ではないことをお断りしておきます）。

日本マイクロソフト株式会社 技術統括室 ナショナルテクノロジーオフィサー 田丸健三郎氏

もはやとても身近な技術、機械学習

今の時代、データソースは拡大の一途をたどっています。

そんな中、機械学習が非常に注目されています。以前は、ビッグデータの分析といえば高い専門性が必要な分野でしたが、機械学習によって安価で高品質な分析が可能になりつつあります。

従来アルゴリズムといえば、従来は職人による新規性、進歩性を競う芸術(?)の世界でした。

しかしそれでも、従来は機械学習によるデータ分析のアプローチよりは、職人によるアルゴリズム開発のほうが開発コストが低かったのです。かつてはデータ量も限られ、コンピュータリソースは非常に高価だったからです。

しかし今や、データ+機械学習のアプローチのほうが、アルゴリズムをプログラミングするよりも開発コストが安上がりになりつつあります。それは、クラウドによってほぼ無限とも言えるコンピュータリソースを手に入れられるようになったからです。

また、開発コストの面だけではありません。機械学習にとっての学習データの爆発的な増加、学習精度の大幅な向上など、機械学習を取り巻く環境も大きく進歩しています。

それにより、従来のようにアルゴリズムを静的にプログラミングするのではなく、データを分析し、アルゴリズムを動的に生成するというアプローチが採用されることが増えているのです。

機械学習とMicrosoft

例えば、Microsoftの製品においても機械学習は既に広く利用されています。意外な製品にも使われていると思われるのではないでしょうか？（白石的には、Kinectが関節の位置を特定するのに機械学習を使っているというのが少し驚きでした。まさかそんなところにも応用できるとは…）。

そして、ディープラーニングによる画像認識の精度は、人間の認識力すら超えつつあります。実際以下のグラフのように、Microsoftによる2015年の成果では、人間の認識エラー率を下回っているのです。

この進化は、ニューラルネットワークの多層化によってもたらされています。2012年には8層、2014年には19層、そして現在ではなんと152層にまで深く階層化できるようになっています。

実は、画像内のオブジェクトの認識率では、Microsoftは世界トップクラス。

動画のタグ付けなどにも実用化されています。

以下はMicrosoftにおける機械学習の歴史です。

Microsoftが今公開している対話型AIとしては、以下の２つが有名です。Cortanaは生産性の向上を目指して開発されており、女子高生AI「りんな」や、中国で大人気のXiaoIceは、人間の感情に寄り添うことを目指しています。

マイクロソフトのIoT基盤は、以下の様なビジネス上の変革を実際にもたらしています。

また、自動翻訳の分野も、機械学習が応用されている分野です。Microsoftも、Translatorというサービスを提供しており、現在50言語に対応しています。

次のバージョンであるバージョン4では、翻訳精度が大きく向上する予定だそうです。期待したいですね。

セッションを聞いての感想

はじめにも書きましたが、ぼくは機械学習の分野についてはほとんど知識がなく、軽くかじったことがあるくらいです。 そんなぼくにとっては、「機械学習による動的なアルゴリズム生成のコストが、プログラマーによる静的なアルゴリズム開発のコストを下回りつつある」というのはとても驚きました。

それが本当だとすると（実際本当なのでしょうが）、開発にあたって考えるべきはまず機械学習、データをどう収集してどう分析するかを最初に設計すべきだということになります。ぼくらプログラマーの仕事が大きく変わるかもしれない…と感じ、焦りと同時にワクワク感を感じたセッションでした。

エキスパートの佐川が、「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の現場に身をおいていると、そのメッセージは強く説得力を持って感じられます。エンジニアの端くれとして、もっと新しいものを作っていきたいと、強く刺激を受けました。