ステムの復元をしました。（前日の同時刻へ復元） するとポップアップされなくなったのですがEdgeのお気に入りが開かなくなりました … 動速度や、表示速度は基本的に大きな問題はなさそうだ。 Edgeの検索エンジンをBingからGoogleに変更する方法. 開発者ツールの主な機能. ¨ã€‘。Windows 10 Anniversary Updateでアップデートされた最新Edgeの「JavaScript標準仕様への対応状況／オープンソース化／追加されたHTML5標準／F12開発ツールの新機能」をWeb開発者向けに概説する。 化された新機能を中心に、最新のF12開発者ツールの主要機能を一通り解説。このツールを使いこなすためのポイントを取り上げる。 ョットを撮る4つの方法, Windows 10搭載パソコンで音が出ない場合の設定・対処方法, Windows 10搭載パソコンでマイクが使えない、認識されない場合の設定・対処方法, Excel ドロップダウンリスト（プルダウン）を作成する方法, Windows 10の空き容量を増やす方法. Windows10 Anniversary Updateをインストール後に、Microsoft Edgeのスタート画面にトラブルが発生するようになりました。 それまでは、タスクバーの Edge アイコンをクリックするとスタート画面が立ち上がり、すぐ「マイニュースフィード」画面が表示されました。 化されたF12開発者ツールが搭載されています。今回の記事ではF12開発者ツールの主要な新機能について紹介します。 … PCでスマホサイトの表示 パソコンのWebブラウザーのIE11(Internet Explorer 11)で、ウェブサイトをスマホで見るような画面表示するやり方です。 インターネットのウェブサイトで、パソコンで見る場合とスマホで見る場合で表示が異なる場合あります。 Internet Explorer 8 (IE8) でツール バー ボタンが見つからない はじめに . Windows 10 Anniversary Updateでアップデートされた最新Edgeの「JavaScript標準仕様への対応状況／オープンソース化／追加されたHTML5標準／F12開発ツールの新機能」をWeb開発者向けに概説する。, 前回は2016年8月2日にリリースされたWindows 10 Anniversary Updateについてユーザー向けの機能を紹介したが、今回はWeb開発者向けにアップデートされた内容を紹介する。, Microsoft Edge（以下、Edge）は、Windows Insider Program（以下、WIP）でWindows Insider Preview Branch（以下、WIPB）が提供されるごとに新しいビルドが提供され、新機能が提供され続けてきたが、一般ユーザーが利用可能になるのが今回のアップデートのタイミングとなるため、Web開発者としてもここから新機能が利用可能になるタイミングといえるだろう。, これまでモダンブラウザーのHTML5標準の対応状況は、html5testなどで対応されているAPIの数で比較されてきた。そのため、「EdgeもがんばってるけどChromeが先行しているな」といった会話がされてきた。, だがAPIの対応数が多いからといって、他のブラウザーでサポートされていなければ、Web開発者がその機能を利用すると決めるのは難しいだろう。実際にはいくつのAPIがサポートされているかの「数」ではなく、その機能を使えるか、または使われているかの「質」を重視する段階に移ってきた。, マイクロソフトが公開したAPI Catalogでは、各ブラウザーの標準仕様対応状況を一覧したり、視覚的に確認したりできる（図1）。, 上：各ブラウザーが標準仕様に対応している領域とブラウザー間のカバー領域を視覚的に見られる。 下：また、標準機能ごとのブラウザー対応状況を表で確認できる。, API Catalogで分かるように全ての仕様をカバーしているブラウザーがなく、またブラウザーごとに対応状況が異なっている。各ブラウザーが競い合って機能を実装していくのはよいが、Web開発者からすると、ブラウザーごとに使える機能が異なる状況は望ましいとはいえない。, そのためEdgeは、どの標準仕様を実装するかを、標準仕様の安定性、熟成度、パートナーやWeb開発者コミュニティーからのリクエスト、そしてBingクローラーから収集された全データの結果に基づき決定しているという。つまり、現実世界で使われている、または使われる可能性が高いものから実装していくということだ。, Bingクローラーで収集したCSSプロパティの利用状況はAPI Usageとして公開されている。ここでは約120万ページをクロールした結果、公開されているWebサイトで使われているCSSプロパティの使用率を確認できる（図2）。, 上：CSSプロパティの使用率をよく使われている順に表示している。 下：webkitプレフィックスが指定されているものだけを抜き出して表示することもできる。, このようにBingで収集したデータは公開されており、これを確認すると、「よく使われているのにまだ実装していない機能」を優先的に実装しようとしていることが分かる。, また対応状況は以前からPlatform statusとして公開されていて、検討中（Under consideration）や実装中（In development）など途中状態も把握できる（図3）。, Platform statusがPreviewになるとWIPBでWIP参加者向けにプレビューで公開される。ビルドごとの変更点はMicrosoft Edge changelogとして公開されており、ビルド番号ごとの差分を確認できる。, このようにEdgeの開発状況は以前よりも情報がオープンになってきており、ビルドの提供頻度も高くなっている。実装状況は随時変わっていくので、これらの状況を確認しつつ、使用するAPIを決めるのがよいだろう。, JavaScriptの標準仕様はECMAScriptとして定義されており、2015年に策定された標準仕様がECMAScript 2015（以下、ES2015）である。ES2015は正式名称だが、ES6という呼称も並行して使われることが多い。これは、もともと仕様策定の初期には“ES6”と仮に呼ばれてその名前が浸透した後で、途中から“ES2015”という名前が正式に付けられたためだ。その次バージョンや次々バージョンはES2016やES2017とのみ呼称されている。, ECMAScriptの各ブラウザーによる実装状況を提供しているECMAScript Compatibility Tableを見ても、EdgeにおけるES2015とES2016以降の実装が先行していることが分かる。, Edge 14がAnniversary Updateのバージョンを示しており、Edge13はその前のバージョンになる。Edge 14が他のブラウザーよりも先行してES2015とES2016の機能を実装していることが分かる。, ECMAScriptの実装についてはEdgeが先行しているが、先にも述べたとおり、いまやブラウザーは互換性を重視する時代であり、Edgeが先行しているからといって「採用しよう」という判断ができるものではない。そのため、実際に利用するには、他のブラウザーの実装を待つ必要があり、IE11など、機能が追加されない古いブラウザーをサポートする必要がある場合は、そもそも利用できない。, とはいえ、新しいECMAScriptの機能は、便利で魅力的な機能が多い。そのような機能が利用したいときには、BabelやTypeScriptといった、他の言語からJavaScriptへコードを変換するトランスパイラーを使って、古いバージョンのJavaScriptに変換するのがよいだろう。, なおES2017の機能も一部先行して実装されているが、仕様が不安定なため（変更の可能性がある）、「about:flags」（アドレス欄に入力すると開く）で［試験的な JavaScript 機能を有効にする］をチェックしないと利用できなくなっている。, マイクロソフトの最近の流れとしてオープン化が挙げられるが、クローズで進むかと思われてきたEdge自体の開発もオープン化が進んでいる。Edgeで使われているJavaScriptエンジンであるChakra（ChromeのV8に相当）からWindowsやEdgeに依存している部分を除外したChakraCoreをオープンソースとして公開した。, ChakraCoreはすでにLinuxやmacOSに移植され、Node.jsのエンジンとしても動作できるようになっている。, もう一つのオープンソースプロジェクトとして、EdgeのWebGL実装の一部がGitHubで公開されている。公開されているコードは、WebGLで使われているGLSLという記法から、Edgeの内部で仕様されているDirectXの記法であるHLSLに変換するトランスパイラー実装である。, EdgeのレンダリングエンジンであるEdgeHTMLのバージョンは13から14になっており、HTML5標準機能が追加で実装されている。最近のWeb業界は、Webをオフラインで利用可能になるService Workerが大きく注目されており、Edgeでは現在、それを開発中である。今回のリリースでは、「Service Workerのための布石」と呼べる機能がいくつか提供されている。, Edgeでもようやく通知（Web Notifications）が使えるようになった。Webページからユーザーに通知を送信するには、以下のようなコードを書けばよい。, ユーザーに通知の権限（requestPermissionメソッド）を要求し、許可された場合に限り（戻り値が“granted”）、通知を送信するためのオブジェクトを作成する（new Notification）。そのオブジェクトでclickイベントをハンドルして、通知をクリックされた時の処理を実行する。, このように、ユーザーが通知を許可したときのみ通知が送信できるようになっている。サイトからいろいろと通知したくなるだろうが、通知が多すぎるサイトはユーザーから嫌われることが多いため、適切な量に抑えるように考慮する必要がある。, ようやくEdgeでも通知が送信できるようになったが、現状の実装ではページを開いているときしか通知ができない。現在実装中（In Development）のService WorkerやPush APIが提供されるようになると、オフラインでの利用や、Webサイトからのプッシュ通知が可能になり、現実のシナリオで利用可能になると考えられる。, Fetchは、ネットワーク上のリソースを取得するためのAPIで、XMLHttpRequest（以下、XHR）を強化したものだ。XHRは後方互換を重視する必要があったため、よりモダンな新しいAPIが設計された。画像などのバイナリデータを扱うblobメソッドや、JSONなどのよく使うデータを取得するメソッドを提供しており、ストリームにより完全な読み込みが終わる前にデータを扱うことができる。Promiseを使ったモダンな記述ができる。, パスワードというセキュリティシステムが安全でないことは広く知られている。多くのユーザーが推測可能なパスワードを使ったり、複数のサイトで同じパスワードを使ったりしているためだ。最近もいくつかの大手サイトでパスワードの流出があったが、同じIDとパスワードを使っているサイトが他にいくつあるか分からない方も多いのではないだろうか。, これを解決するために、.NET Passport（現在のMicrosoftアカウント）やOAuthなどの実装が提供されてきたが、HTML5のWeb Authenticationでは、FIDO 2.0と呼ばれる生体認証の仕様をベースに顔認証や指紋認証も可能になっている。現時点ではEdge以外のブラウザーでは実装されていないため、すぐにWebサイトに採用することは難しいだろうが、パスワードレス認証がWebでも普及していくことに期待したい。, Beaconは、分析などに使うデータを非同期にWebサーバーに送信するAPIである。こういったいわゆる「ビーコン」の用途では、これまでXMLHttpRequestや1ピクセルの画像を読み込むタグなどのテクニックが使われてきたが、どちらもブラウザーのパフォーマンスに影響を与えることがあった。Beacon APIを使うと、非常に簡単に非同期でデータを送信できる。, 要素は、日付、時間、またはその両方を機械が認識可能な形で表現するタグだ。, このようにタグに意味付けをすることで、機械が日時を認識できるようになるため、カレンダーと連携したり、タイムテーブルの管理などを自動化できるようになる。, 要素は、表示する文字列に数値を追加でき、機械が読み取り可能な値を設定できる。,

要素は、計算結果を表示する要素である。以下の例では、足し算の結果を表示している。, 要素にtype="color"属性を付与することで、色を入力できる。, 要素や要素は、直接的な見た目に影響は少ないが、機械によるページの処理やアクセシビリティなどで要素を意味付け（＝セマンティック）しておくことで、価値を発揮する。, CanvasはWebブラウザー上でグラフィックを描画できる機能だが、これまではCanvasのコンテキストに対して、座標を直接指定して円や四角を描画してきた。Path2Dオブジェクトを使うとパスの集合をオブジェクトとして管理できるため、描画の記述をシンプルにできる。, Web Speech APIには、入力（Speech Recognition： 音声認識）と出力（Speech Synthesis： 音声合成）の2つの定義があり、今回のビルドでは出力（Speech Synthesis）のみが提供されている。Test DriveページにSpeech Synthesis APIのデモページが公開されており（図6）、実際に音声出力を確認できる。, 入力した文字列が読み上げられていることが確認できたと思う。なお、入力（Speech Recognition）は、現在、開発中のステータス（In Development）であるが、Chromeでは先行して実装が完了しており、Developerサイトで説明とデモを確認できる。, WOFF 2は、Webフォントの標準規格であるWOFF（Web Open Font Format）にBrotliと呼ばれる圧縮アルゴリズムを使用している。これによって、30％以上の配信コストを削減するといわれている。ただし、フリーで日本語が利用できるWebフォントであるNoto Sansで確認したところ、WOFFとWOFF 2のサイズの差は、13～15％程度のため、日本語では若干圧縮効率が悪くなってしまうようだ。とはいえ、日本語フォントはサイズが大きくなるため、13％の差は大きいといえるだろう。, Edgeがリリースされて大きく変わったのが、マイクロソフトが自社技術にこだわらなくなったことだろう。グーグルが開発して標準化されたWebM、VP9、Opusといったロイヤリティフリーでオープン、高圧縮率のフォーマットがサポートされることにより、相互互換性が高まり、どのブラウザーでも同じビデオやオーディオが再生できる環境に近づいたといえる。, WebRTCとは、テキスト、音声、ビデオなどを使ってユーザー同士がリアルタイムにコミュニケーションするためのWeb仕様である。WebRTC 1.0仕様が公開された後、よりシンプルな実装としてObject RTC仕様が公開され、マイクロソフトがこちらを推したが、他のブラウザーはWebRTCの実装を進めていたため、Edgeと他のブラウザーとの非互換が発生してしまった。現在、Edgeチームは相互互換性を高めるためにWebRTC 1.0を実装していると公表している（図7）。, WebRTC v1.0 APIが「開発中（In Development）」になっている。, なお、音声については、adapter.jsを使うことでChromeやFirefoxと通話が可能になっており、SimpleWebRTCというデモで会話を試せるようになっている。, 今回のアップデートから、右クリックメニューに表示されていた開発者向けのメニューはデフォルトで非表示になっている（図8）。, F12開発者ツールを初めて起動すると、「開発者向けのメニューが追加された」旨のメッセージが表示される（図9）。, これ以降は、右クリックメニューに［要素の検査］と［ソースの表示］が追加される（図10）。, これにより、開発者がF12開発者ツールを起動しやすくなる。また、このメニューを再び非表示にするには、「about:flags」で［コンテキストメニューに“ソースの表示”と“要素の検査”を表示する］のチェックを外せばよい。, HTML5 Accessibilityを参照すると、EdgeはHTML5アクセシビリティ仕様を完全にサポートしていることが分かる。, ブラウザーがアクセシビリティに対応していると同時に、F12開発者ツールにもアクセシビリティ対応の機能が実装されている（図12）。, ツールバーの［アクセシビリティ］ボタンをクリックすると［アクセシビリティ ツリー］（中心のペイン）が表示される。また右ペインには［アクセシビリティ］タブが表示されている。, ［アクセシビリティ ツリー］では、スクリーンリーダーなどの支援ツールに受け渡すデータを確認できる。, ［アクセシビリティ］タブでは、DOMツリーで選択した要素のアクセシビリティプロパティを一覧で確認できる。またプロパティ名にカーソルをあてると説明文がある場合は、説明文が表示される。, 開発者としては、HTML5で定義されている要素をセマンティックに沿ってきちんと記述することや、ARIAと呼ばれるアクセシビリティのためのルールにのっとって実装することが求められている。F12開発者ツールのアップデートが提供するアクセシビリティ機能は、これらが正しく実装されているかを確認するための補助ツールとなっている。, 今回のアップデートで、EdgeにはChromeに似た「HTMLやJavaScriptを使った拡張機能」がサポートされるようになった。HTMLやJavaScriptで実装されるため、F12開発者ツールでデバッグが可能になった。, 拡張機能のデバッグは、「about:flags」で拡張機能の開発者向け機能を有効にするとよい（図13）。, 拡張機能の開発者向け機能を有効にして、ブラウザーを再起動すると拡張機能のデバッグが可能になる。, 右上にある［...］メニューの［拡張機能］をクリックして［拡張機能］ペイン（図14）を開くと、その一番下に［拡張機能の読み込み］ボタンが表示される。, ［拡張機能の読み込み］ボタンをクリックすると、［フォルダーを開く］ダイアログが表示されるので、そこでファイルを選択することで（自作を含めて）任意の拡張機能が読み込める。, 自作でも、ストアからダウンロードした拡張機能でも、［拡張機能］ペインで任意の拡張機能をクリックした後の表示（図15）には［ID］と［検査］が表示され、ここからデバッグが可能だ。, 具体的には［検査］に表示されている［バックグラウンド ページ］リンクをクリックすると、デバッガーが表示される（図16）。そのデバッガーでは、ブレークポイントを設定するなどしたデバッグ実行が可能である。, まず、日本語でフィードバックを送信するには、［･･･］メニューにある［フィードバックの送信］をクリックする。これにより［フィードバックと報告］ペイン（図17）が表示され、フィードバックのための各種ボタンが表示される。, JavaScriptの問題は、GitHubからレポートが可能だ。前述のとおり、JavaScriptエンジンであるChakraのコア部分は、オープンソース化されているため、Issueやプルリクエストが送信できる。, HTMLレンダリングエンジンであるEdgeHTMLは、EdgeHTML Issue Trackerから報告できる。, 新機能や改善要望はUserVoiceが提供されており、要望の追加や投票（Vote）できる。, そして最後にTwitterからもバグの報告が可能になった。コードが共有可能なcodepen.io、jsfiddle.net、jsbin.com、dabblet.comで再現可能なコードを書いて、簡単な説明とともにハッシュタグ#edgebugを付けてTweetするだけだ。, 今回のアップデートでMicrosoft Edgeが他のモダンブラウザーに置いていかれることなく、機能が実装されていることがご理解いただけたのではないだろうか。, Edgeのアップデートは年に1～2回と、他のブラウザーに比べて少ないため、「遅れている」と感じるかもしれないが、Windows Insider Programで提供されるInsider Preview Buildでは頻繁にアップデートされ、機能が追加されている。いち早く機能を試したい方は、Insider Previewに参加してフィードバックを送信することをお勧めする。筆者は自宅のメインマシンで利用しているが、「今のところ」大きな問題は発生していない（もちろん自己責任で参加してほしい）。, Windows 10 Anniversary Updateで、ようやく日常使用に耐えられる機能性と安定性が備わってきたEdge。その最新機能をパワーユーザー向けに概説する。, Windows 10 Creators UpdateでEdgeはどのように進化したのか？ CSS／JavaScriptに関する新機能や新搭載のAPIを、開発者目線で紹介する。, リスト3　dataに小さなデータをセットして、パフォーマンスに影響を与えることなくサーバーに非同期でデータを送信できる, 図6　テキストボックスに文章を入力して［Speak］ボタンをクリックすると日本語の文章を読み上げる（「en-us」と表示されているが、問題ない）, 図9　F12開発者ツールを表示すると、「コンテキストメニューに開発者向けのメニューが追加された」という内容のメッセージが表示される, 図13　「about:flags」を開いて［拡張機能の開発者向け機能を有効にする］をチェックする。ブラウザーを再起動すると設定が有効になる, 図14　［拡張機能］ペインに［拡張機能の読み込み］ボタンが表示され、自作の拡張機能を読み込めるようになる, 図16　［検査］に表示されている［バックグラウンド ページ］をクリックするとデバッガーが表示される, 図17　［フィードバックと報告］ペインに表示された各種ボタンからフィードバックを送信できる, "result.value = parseInt(a.value) + parseInt(b.value)", ONLINE SITE 最新情報： 人気記事ランキング Top 100 ［5年間］, C#による.NET Core入門（6）： .NET CoreライブラリプロジェクトをパッケージングしてNuGetサーバーに発行する, Microsoft Edge： HTML5／JavaScript最新標準仕様への新応とF12開発者ツールの新機能, Microsoft Edgeの進化 ～Windows標準ブラウザーの最新機能と使い方, Windows 10 Creators UpdateのJavaScript／CSS関連の新機能, jQuery： 要素の高さ／幅を設定／取得するには？（height／width／innerHeight／innerWidth／outerHeight／outerWidth）, jQuery： id値／タグ名／クラス名で特定の要素を取り出すには？ ― 基本セレクター, .NET Coreとは？ 開発環境（SDKとVisual Studio Code）のインストール. この資料では、Internet Explorer 8 (IE8) で、使用していたツール バー ボタンが見つからない場合の対処方法について説明します。 ア語、スペイン語で利用できるようになった。 早速Edgeを使ってみると、検索エンジンがデフォルトでは「Mirosoft Bing」になっていた。 ¥çŸ¥èƒ½ã¨ã‚«ã‚¹ã‚¿ãƒ  ロジックをあらゆる IoT デバイスにデプロイする包括的な … Chrome開発者ツールについて. Internet Explorer 6 (IE6) で、メニュー バーやツール バーが表示されない場合の対処方法 はじめに . ョン」タブをクリックして、ブラウザープロファイルのドロップダウンメニューから「iPhone」などを選択します。 開発者ツール（Chromeではデベロッパー ツール、Firefoxでは開発ツール）は名前の通りWebブラウザ上で表示するコンテンツの開発者のためのツールで、Webコンテンツの表示や動作の確認や調整を、実際にブラウザ上で表示しながら行うことができます。 ¯æ¨™è­˜è¡¨ç¤ºã®æ”¹å–„; POI検索結果が正しく表示されない問題の修正; Ver.3.50(2017/11/15) まずは、最も基本となるブラウザのデバッグツールについて見ていきましょう。本章では利用者の多いChromeブラウザを元にして解説しますが、FirefoxやEdgeブラウザでも類似のツールが提供されています。 この資料では、Internet Explorer 6 (IE6) でメニュー バーやツール バーが表示されない場合の対処方法について説明します。