Windows 10 Anniversary Update における Microsoft Edge の新機能

Windows 10 が公開されてちょうど一年、Windows 10 の無償アップグレード期間が終了したのと入れ替わるように本日 (2016/8/3 日本時間) Windows 10 Anniversary Update が公開されました。 この Windows 10 Anniversary Update では、Windows 10 が発表された際の様々なビジョンのいくつかが実装され、さらにその当時は想像だにできなかった  Windows Subsystem for Linux (WSL) といったようなまったく新しい機能も搭載されています。 Windows 10 から搭載された新しい Web ブラウザーである Edge にも、当初の計画にあった新しい拡張 (エクステンション)モデルの実装や、Windows フィードバック、Developer FeedBack (旧 Edge Suggestion Box) に寄せられたフィードバックや提案をもとにした新しい機能が実装されています。 今回の記事では Windows 10 Anniversary Update の新機能、とくにユーザーが直接対話するデスクトップ UI の新機能と、新しく追加された Edge 関連のグループポリシーの設定について紹介します。   Microsoft Edge のデスクトップ…

0

[お知らせ]当ブログ過去記事がうまく表示されない問題につきまして

当ブログをご覧になっていただきありがとうございます。 過去のブログのページに関し、一部 iframe の抜けやレイアウト崩れが発生している場合があります。これは、少し前にブログの CMS が変更になったためです。 お使いになられているブラウザーなどの問題ではありませんのでご安心ください。 過去ページで表示に不都合があるものについて、改修可能なものにつきましては、順次修正していきますので、もうしばらくお待ちくださいませ。 以上、よろしくお願いします。

0

ゼロからはじめる Microsoft Edge 用の拡張の作り方

WindowsStore
WindowsStore

8 月に公開される Windows 10 Anniversary Update に搭載されている Edge では拡張 (エクステンション) がサポートされています。 この機能はすでに Windows 10 Insider Preview の最新のビルドに搭載されている Edge でもお試しいただくことができます。 Windows 10 Anniversary Update 公開に先立ち、今回から 2 回に別けて、Windows 10 Insider Preview の Build 14379 を使用した Edge の拡張の作成方法について紹介します。 その前に Edge の拡張について簡単に紹介しておきましょう。 Microsoft Edge の拡張 Edge の拡張の目的は、機能名のとおり開発者によって 「Edge の機能を拡張」 = 「できないことをできるようにする」 ことです。 同様の目的を達成するための機能として、Internet Explorer 時代は ActiveX や Flash といったプラグインが使用されてきました。 これらネイティブコードによるプラグインは…

0

ES2015 の機能を使用したイベントフローの制御

Windows 10 Anniversary Update に搭載される Edge がサポートする ECMA Script 2015 (ES2015) の機能を使用した JavaScript の非同期処理の制御について紹介します。 なぜ今、非同期処理の制御が必要なのか? 前回の記事「de:code2016セッション「モダン Web: たった今と、ほんの少し未来の話」フォローアップ」で紹介したように、Single-page Application (SPA) のようなモダンな Web アプリケーションでは、クライアントサイドのロジックとサーバーサイドのロジックの関係は疎結合となるため、処理は非同期を前提として考える必要があります。 そして、非同期処理の完了の通知は JavaScript ではイベントによって行われます。 たとえば、Web API をコールするには、XMLHttpRequest を使用して Web サーバーにリクエストを出し、イベントハンドラ内で完了のステータスを待って値を取り出します。 上記のような処理は、ひとつの大きな単位での処理を完了するのに、1 回で済むとは限らず、複数回発生する可能性があります。 そういった処理を実装する場合には、最終的な処理の完了までに実行される各々の処理の整合性 (順番とタイミング) を保つために、イベントハンドラをネストすることになり、その間に画像のロードやユーザーのアクションについてのイベントのハンドラが入ると、コードはひたすら右側に伸びていくことになります。これでは記述も煩雑になるだけでなく、デバッグも大変です。 これがいわゆる「コールバック地獄」とよばれるものです。 こういった制御を行うために、JavaScript のライブラリやフレームワークが様々な機能を提供してきました。しかし、今最新のモダンブラウザーがサポートしつつある ECMA Script の 2015 や、2016 にはそういった機能が標準で用意されています。 JavaScript によるイベントフロー制御 非同期を制御するための機能として、Ecma Script 2015 (旧 ES6) では以下の機能が標準で提供されています。 Promise…

0

de:code2016セッション「モダン Web: たった今と、ほんの少し未来の話」フォローアップ

de:code 2016、2 日めのセッション ARC-003「モダン Web: たった今と、ほんの少し未来の話」 にお越しくださいました皆さま、ありがとうございました。 そうとう気合いを入れて資料を作ったものの、セッションのビデオを見たら私の喋りがイマイチ(ほんとはイマサンくらい) だったので、猛省して内容を記事にまとめました。 なお、このセッションについては、HTML5 Experts.jp に、以下の驚くほど詳細な記事が載っており、概要であれば同記事で充分と思いますが、 モダンWeb:たった今と、ほんの少し未来のはなし~「de:code 2016」セッションレポート~ このブログの記事では、セッションでは語れなかった内容もふくめて書いていきたいと思います。 なお、デモでお見せした promise, async/await, generator/yield を使用した非同期制御については、後日別記事で紹介させていただきます。   モダン Web: たった今と、ほんの少し未来の話 この記事は、今現在、巷で言われている「モダン Web」、なかでも「モダンな Web アプリケーション」というものがどういうものであるか、また、今後一般的になるであろう「Web アプリケーションの技術的コンセプト」のいくつかを紹介するものです。 「モダン Web」 とは? 「モダン Web」 とはなんでしょう? 数年ほど前からいろいろなところで、この「モダン Web」というキーワードを耳にするようになりましたが、話されている内容というのは人によりまちまちであることが多いようです。 これはなにも話している人がそれぞれに勝手なことを言っているわけではなく、「モダン Web」で括れる範囲がそれだけ広いからに他なりません。 たとえば、一口に「モダン Web」と言っても、Web のフロントエンドからサーバーサイドのバックエンドまでを含めた「モダンな Web システム」のことの場合もあれば、最新の JavaScript のフレームワークや altJS、 プリプロセッサやタスクランナーといった様々なツールを組み合わせて作業を行う「モダンな Web フロントエンドの開発手法」の場合もあり、かと思えば、次々とやむことなく追加されていく「モダンWeb ブラウザーの新機能」を使用していることをさす場合もあります。 この記事では、「モダンな Web アプリケーション」というものがどういうものであるか、また、そういったアプリケーションを開発するのに必要な「モダンな Web…

0

UWP の Hosted Web アプリからの NFC デバイスへのアクセス

de:code 2016、1 日めのセッション DEV-008「Developing on the Edge. ~Web プラットフォームと Cordova~」 にお越しくださいました皆さま、ありがとうございました。 このセッションでは、Windows 10 Anniversary Update で Edge に新たに追加される機能と UWP (Universal Windows Platform) と Cordova で Hosted アプリを作る方法について紹介しました。 その中から実際にデモでご覧いただいた、Web サイトでホストされているページを UWP の Hosted アプリとして NFC を認識させる方法について紹介したいと思います。 UWP Hosted Web アプリからのデバイスアクセスについて UWP の Hosted Web アプリは、単に Web サイトでホストされているアプリとシングルコードベースで開発できるというだけでなく、物理的に同一のリソース (HTML、JS、CSS,各メディアファイルなど) を共用して開発を行います。 もちろん、アプリ側ではそのアドバンテージを活かして、プラットフォーム固有のリソースである連絡先や予定表へアクセスしたり、Cortana との連携なども可能です。 Web サイトにホストされているページを UWP でラップし、適切にアクセス権を設定することで、Web サイトのページ内にある…

0

Microsoft Edge Japan ブログに翻訳記事をアップしました。

以前のブログ記事でお伝えしていたとおり、本家 Microsoft Edge Dev Blog から Edge の今後の方向性を示す記事をピックアップし、翻訳したものを Microsoft Edge Japan ブログにアップしました。 今回公開したのは以下の記事になります。   2016 年の展望: Microsoft Edge の開発者向け情報 コンポーネント化: Web のために生まれ変わった従来の設計プラクティス Microsoft Edge と Web Components アクセシビリティ: Microsoft Edge と Windows 10 でさらに多くの人が Web を利用できるように ドライブバイ攻撃からユーザーを守るべく機能強化された Microsoft SmartScreen   Microsoft Edge Web Summit 2016 以降、Microsoft Edge Dev Blog には連日のように新しい記事がポストされ、Edge の開発への力の入れ具合が伝わってきます。 Edge に搭載される新機能をいち早く体験されたい方は、Windows Insider Program…

0

Microsoft Edge Web Summit 2016 以降に公開された Edge 関連の情報

4 月に Build 2016 と Microsoft Edge Web Summit 2016 という 2 つの大きなイベントが開催され、その中で、大きくアナウンスされないものの、こまごまとした新しい情報が出てきているので忘備録を兼ねてまとめておきます。 なお、上記の 2 つのイベントのブレイクアウトセッションは、以下の Channel9 のリンクから、ほぼすべてのビデオアーカイブを見ることができます。 Build 2016 | Channel9 Microsoft Edge Web Summit 2016 | Channel 9   注目のセッション 時間の関係もあり、私もまだすべてのビデオを見終えていないのですが、チェックした中から何本か紹介させていただきます。   Microsoft Edge のこれからの機能実装について Build 2016 と Microsoft Edge Web Summit 2016 それぞれのセッションで、Microsoft Edge のこれからの機能実装について紹介しています。 Build 2016 のセッションは、拡張(Extension) のつくり方からエンタープライズでの利用まで広い範囲でカバーしており、いっぽうの Microsoft Edge Web…

0

最近の Microsoft Edge の動向(Mar 2016:Extention,Web Assembly)

Microsoft Edge については、Microsoft Edge Dev Blog などでなかなか活発に情報が出ているのですが、予算の関係もあってか以前の IE blog のころとは違い日本語記事が出ていません。 今回は Edge の動向について、本家 Microsoft Edge Dev Blog に最近投稿された記事から要点をかいつまんで紹介します。 (※)“かいつまんで” と書いたのは、英語の分量のわりには意外と内容が薄かったりするものがあったりするからです。けっして英語の得意でない私が一生懸命翻訳した長い文章すべてが、本質とはまったく関係ないジョークめいた言い回しだったりするともう徒労感が半端なくてですね…、それをふたたび日本語でわざわざ書くという行為について精神的なわだかまりが払拭できないからです。たとえばなのですが、”We’re excited..(私たちは…することに興奮しています)”とか、ほんと、どうでも良くないですか? この言い回しが 1 つの記事に 4 回も出てくるともう、お願いですからいつまでも興奮してないでどうか落ち着いて早いとこ本題に入ってください、ほんとお願いします、ひらにお願いしますと、どうかお願いします、と言いたくなります。   今回は新しい順に以下の3 つの記事について紹介します。 Microsoft Edge extensions now available to preview Previewing WebAssembly experiments in Microsoft Edge Looking ahead: Microsoft Edge for developers in 2016   拡張機能のプレビュー版の公開 (Mar 18, 2016) 記事「Microsoft…

0

JavaScriptライブラリ中毒者(ジャンキー)にならないために

Web コンテンツに、より高度で複雑な機能を求められる昨今、jQuery のような外部の JavaScript ライブラリを利用しない Web サイトはほとんどないでしょう。 たしかにそれらは汎用性が高く再利用が可能なので、さまざまな機能を自分で実装する必要はなく、工数を圧縮し開発生産性を高めることができます。 また、昨今の技術系のニュース記事では、新しいフレームワークが次々と登場して話題となり、それらを使用して開発することが、さも「モダン」であるかのように書かれています。 はたして本当にそうでしょうか? DOM のセレクターを使用するためだけに大量の機能セットを含むライブラリを参照しているソースや、UI バインディングを行うためだけに大げさなフレームワークを利用しているソース、それは「モダン」で「クール」な作りなのでしょうか? 今回の記事では、外部 JavaScript のライブラリやフレームワークの使用について、その意義とリスクについてあらためと考えてみたいと思います。   あらためて意識しておきたい 外部の JavaScript ライブラリを 使用する際の影響 外部の JavaScript ライブラリは便利である一方、どのようなコードであろうと第三者が開発したものであるかぎり、自分の感知しえない不具合やセキュリティ、パフォーマンス問題、または予想外の振る舞いを潜在的に導入することになります。たとえば、JavaScript ライブラリを使用するにはブラウザーにロードされる必要があり、それには追加のサーバー ラウンドトリップやライブラリそのもののサイズが多少なりともパフォーマンスにネガティブな影響を与えます。また、コードの品質も必ずしも保障されているものではありません。 これはいたずら不安を煽っているわけではなく、外部の JavaScript を導入するのであれば、前述のようなマイナス面について最低限理解しておくべきあたりまえの事実です。 こういったマイナス面を担保するにはどういった方法がとれるでしょうか? もっとも確実な方法は使用しないということです。しかしながら、前述したように Web コンテンツに複雑な高機能を要求される昨今では、外部の JavaScript ライブラリを一切しないというのは現実的ではありません。 よって現実的な 1 つの解として導きだされるのは、実装する処理に外部の JavaScript ライブラリの機能が本当に必要であるかどうか、Web 標準技術の活用だけで実装可できないのか、正しく見極めることです。 2 番目の方法は、ライブラリの更新情報をフォローし、各ライブラリの最新の安定バージョンに常にアップグレードするかどうかを判断することで、リスクを抑制することができます。   JS ライブラリ(jQuery)の機能を置き換える 今現在、最も一般的に使用される JavaScript ライブラリの 1 つは jQuery でしょう。この JavaScript…

0