ぷろじぇくと、みすじら。

Micorosoft Edge Build 14316 リリース

Created at:

Windows 10 build 14316のリリースで先日のBuildやEdge Summitで出てきたいろいろなアップデートが入ってきました。

プラットフォームアップデートもいろいろありますが、拡張がパワーアップしたのと、Web Notifications、アクセシビリティーツリービューあたりが気になるところでしょうか。

新しい機能

Webプラットフォーム機能

Web Notifications

Webページから通知を表示できる機能で、Edgeの場合にはWindowsの通知機能と連動することになります。

ページが通知の許可を求める(Notification.requestPermission)と、ページの下の方に確認が出てきます。

スクリーンショット: 通知の許可を求める

許可をした状態でページから通知を発行する(new Notification(...))とWindowsの通知として表示されます。

スクリーンショット: 通知が表示される

もちろんちゃんとAction Centerにも入ります。

スクリーンショット: Action Center内にも通知が表示される

F12: アクセシビリティーツリービュー

F12にアクセシビリティーツリービューというものが増えました。 これはページについているroleやスクリーンリーダーに渡す読み上げテキストをツリー表示できるものです。

ツリービューを開くにはF12のDOM Explorerのカラーピッカーのボタンの横に新しいボタンがあるのでそれを押します。

スクリーンショット: F12のアクセシビリティーツリービューをオンにするボタン

ツリービューを表示すると、どういう名前とロールなのかを一覧でき、選択することでその要素にジャンプできます。

スクリーンショット: F12のアクセシビリティーツリービュー

Micorosoft Edge(プレビュー)の拡張について調べる、デバッグする方法

Created at:

Micorosoft Edge(プレビュー)の拡張を作ってみるでは未公開の情報を元にノリと勢いでChrome拡張をEdge拡張にしてみましたが、さっくりとできたわけではなくAPIに関しては当然少し調査してから試しました。

その調査方法兼デバッグ方法についてせっかくなのでメモっておきます。もちろん将来のビルドでは手順が変わる可能性がかなり高いです。

まずはChromeが持っているpermissionをすべて列挙したマニフェストを持つ空の拡張を作ります。JavaScript不要です。

{
    "manifest_version": 2,
    "name": "Dummy Extension",
    "version": "1.0",
    "background": {
        "page": "background.html"
    },
    "permissions": [
        "activeTab",
        "alarms",
        /* 長いので省略 (https://gist.github.com/mayuki/5ae554c8e825f32921c7) */
        "webRequest",
        "webRequestBlocking"
    ]
}

バックグラウンドページはこんな感じでtitle要素だけ。

<!DOCTYPE html>
<!-- 名前は付けておいた方がいい -->
<title>Dummy Extension - BackgroundPage</title>

そしてACLを付けて、

icacls . /grant "*S-1-15-2-3624051433-2125758914-1423191267-1740899205-1073925389-3782572162-737981194":"(OI)(CI)(WDAC,WO,GE)"

Edgeに読み込ませます。

デバッグコンソールを開く

これで拡張は読み込まれましたがEdgeのデバッグする口がありません。Chromeなどでは拡張画面からいろいろ開けるのですがそういうインタフェースは見当たりません。

そこでF12開発者ツールをスタンドアローンで立ち上げます。実は結構前からF12開発者ツールは単体で起動できるようになっています。

単体で起動するにはC:\Windows\SysWOW64\F12にあるF12Chooser.exeを実行します。するとF12開発者ツールをどのインスタンスのEdgeにアタッチするか、という画面が表示されます。

F12Chooser

この画面でさっき作った"Dummy Extension - BackgroundPage"を選択します。すると指定したページ、つまり拡張のバックグラウンドページにアタッチされたF12開発者ツールが起動します。

F12開発者ツールが立ち上がる

そうしたらあとはコンソールでいろいろ試してみます。

windowオブジェクトにbrowserやchromeが生えている

chromeオブジェクトにはほとんど機能がないこと、pageActionの実装が中途半端なこと、webRequest/webNavigationがある(使えたとは言っていない)といったことが分かります。コンテキストメニューを足してみるのもここからできます。

ちなみにこのアタッチする手段を使うことで拡張をデバッグできます。…が、読み込み時のエラーのキャッチはできないのでなかなか厳しいです。そのあたりは将来正式に解放されるときに手段が整うのではないかと思います。

Micorosoft Edge(プレビュー)の拡張を作ってみる

Created at:

Microsoft Edgeのブラウザーに対する拡張がついにWindows 10 Insider Preview build 14291からサポートされました。 サポートされたのですが現状は拡張機能のプレビューということで開発者には特に情報は開示されていません。 この辺りはBuild 2016で発表されるのではないかと思います。

せっかくサポートされたので開発情報はないものの試行錯誤で作ってみます。 作り方も「Google Chrome向け拡張を少しの変更で動かせるようになる」という話は出ていて、 公開されているプレビューの拡張機能も適当なところにぶちまけられたパッケージ化されていないものを読み込む感じなので作れそうです。

というわけで以前から「選択した文字列をGoogleで検索する」機能が欲しいと思っていたのでそれを作ることにします。Google Chromeには標準であるアレです。

そもそもGoogle Chrome拡張のAPIのどこまでがサポートされているのかわかりませんが、そのぐらい簡単なものなら動くだろうみたいな勢いです。

出来上がりはこんな感じです。

コンテキストメニューに"Search Google for ..."を追加

便利なのです。#Chromeでは前からできる #IEもアクセラレーターで出来た

Google Chrome向けに作る

いきなりEdgeで作り始めると色々とハマるのでとりあえず最初はまずGoogle Chromeで動くように作ります。

用意するファイルは次の3つです。

まずはマニフェストですが、最低限のことを書いてバックグラウンドページとパーミッションを指定します。

{
    "manifest_version": 2,
    "name": "Google Search for Context Menu",
    "version": "1.0",
    "background": {
        "page": "background.html"
    },
    "permissions": [
        "contextMenus"
    ]
}

background.htmlもbackground.jsを読むだけの人に。

<!DOCTYPE html>
<html>
<head>
<title>Background</title>
<script src="background.js"></script>
</head>
<body>
</body>
</html>

メインの処理であるところのbackground.jsではコンテキストメニューを作成します。ちなみにUTF-8とかで保存しておかないと事故が起きるかもしれません。

// コンテキストメニューに "Search Google for "%s"" を追加する
chrome.contextMenus.create({
    id: 'searchGoogleForSelection',
    title: 'Search Google for "%s"', // %s は選択している文字列で置き換わる
    contexts: ['selection'], // 選択しているときのみメニューに表示される
    onclick: (info, tab) => {
        // クリックのイベント
        // 新しいタブを開いてGoogleで検索する
        chrome.tabs.create({
            url: 'https://www.google.com/search?q=' + info.selectionText
        });
    }
});

コンテキストメニューのAPIはchrome.contextMenus - Google Chromeにある通りで、項目がクリックされたらタブを開く処理を書いておきます。

で、この一式をChromeに読み込ませます。Chromeの拡張の画面から"Developer Mode"を有効にして"Load unpacked extension..."で読み込ませることができます。

特にエラーがなければ適当なページで文字列を選択してコンテキストメニューを開くと項目が増えているはずです(まあ同じものをChromeが提供しているので被ってますが)。

コンテキストメニューに"Search Google for ..."を追加

Microsoft Edgeで動かす

というわけでChromeで無事動作したらEdgeで動かせるように対応します。

まずはbackground.jsを修正する必要があります。修正点は2点でchrome.contextMenusbrowser.contextMenusに、chrome.tabs.createbrowser.tabs.createに変更します。 要するにchromebrowserに変更です。

次に拡張の入っているフォルダーをコマンドプロンプトで開いて次のコマンドを実行します。

icacls . /grant "*S-1-15-2-3624051433-2125758914-1423191267-1740899205-1073925389-3782572162-737981194":"(OI)(CI)(WDAC,WO,GE)"

このコマンドはEdgeがフォルダーとその配下のファイルにアクセスできるようにするための権限付与です。EdgeはAppContainerに閉じこまれててファイルアクセスに制限がかかっているので必要なのでしょう。そのあたりはNyaRuRuさんのエントリーが詳しいです。

変更はこれだけで、あとは拡張から読み込ませて、コンテキストメニューに出てくれば成功です。簡単ですね。

拡張の一覧に追加される コンテキストメニューに"Search Google for ..."を追加

というわけで本当にChrome拡張を移植できるらしいことを確認できました。早くいろいろなAPIがそろって、情報が公開されるのが楽しみです。

既知の問題

どうもEdgeを再起動すると起動時にバックグラウンドページを自動では読み込んでくれないらしく、再読み込みが必要になります。Chromeではそういうこともないので多分プレビューだからなのでしょう。たぶん…。

ついでに

そういえばGitHubのドキュメントにも拡張周りが少し追加されていたので訳しておきました。

さらについでにMicorosoft Edge(プレビュー)の拡張について調べる、デバッグする方法についても書いておきました。

MicrosoftEdge Documentationを訳してみる

Created at:

GitHubにMicrosoftEdge DocumentationというEdgeについてのドキュメントがあるのですが、 それをふと英語の勉強もかねて訳してみたりしています。

https://github.com/mayuki/MicrosoftEdge-Documentation

まああまりうまくないし間違ってるかもしれませんがそこまで極端には間違ってないと思いたいところ…。

今のところ以下のあたりをやってあります。

Intel Edisonを買ったのでC#でも触りたいのです

Created at:

Intel Edison

最近、Intel Edisonをおすすめされたので買ってみました。

Arduinoなどと比べるとお高いのですが、その分性能も高くてSDカードのひと回り大きいぐらいのサイズで500MHzで動作するAtomとRAMが1GB、ストレージとして4GBを持ち、Wi-FiとBluetooth 4.0も持っていて技適も通っていてLinuxが動くという代物。すごい。ちなみに写真はBreakout Board Kitに乗せた状態のものです。

Edisonのセットアップは簡単で、ちょこちょこと初期設定するとsshで入れるようになり、Node.jsも標準で使えます。EdisonのピンというかIOを操作するためにMRAAというライブラリが用意されていてNode.jsのバインディングも用意されていて簡単に扱えるようになっています。

Intel Edison (Breakout Board Kit)でLチカ - Qiitaといった記事を参考にLチカをするのも簡単です。

C#を書けるようにする

やはりC#書きたいですね。LチカするにもC#でやりたい!…ということで最初はCoreCLRのネイティブコンパイルしたバイナリを持っていくか、CoreCLR自体を持っていこうと思っていたのですがそもそもLinux x86 portはまだのようなのできっとあるであろうMonoを探すことに。

探してみるとMonoのパッケージを提供している方がいらっしゃるのでありがたく利用させていただきます(EdisonのLinuxにはopkgというパッケージマネージャーが入っています)。

…と、簡単に入ります。

Monoがインストールできればあとはmonoコマンドでいろいろ実行できてこっちのものです。ちなみにMono 4.0なので少し古いのですが概ね問題ないでしょう。

C#からピンを操作できるようにする

しかしMonoからいざEdisonのGPIOのようなものを操作するにはsysfs経由 (/sys/class/gpio/)で操作する必要がありあまり使い勝手がよくありません。そこでNode.jsのようにMRAA(libmraa)をC#から使えるようにするライブラリがあれば…!と思ったので作ったのがMraaSharpです。

MraaSharpはだいぶ作りかけですが、libmraaをP/Invokeで呼び出すためMono以外に必要としません。本来であればMRAAはSWIGで各言語のバインディングを生成できるのですが、いろいろと(入れるのもビルドも)面倒なのでピュアC#で完結するものにしました。

使い方は簡単で、MraaSharp.dllを参照したうえで大よそMRAAと同じようなAPIを呼び出せます(ほとんど未実装ですが)。

using MraaSharp;

// 初期化 (mraa_init)
Mraa.Initialize();
// 情報を表示する (mraa_get_version, mraa_get_platform_name)
Console.WriteLine("Version: {0}", Mraa.Version);
Console.WriteLine("PlatformName: {0}", Mraa.PlatformName);

// ピンをGPIOの出力として開く
var gpio = new Gpio(MraaIntelEdisonMiniboard.J17_8, MraaGpioDir.Out);
Console.WriteLine("Gpio Pin: {0}", gpio.Pin);
Console.WriteLine("Gpio PinRaw: {0}", gpio.PinRaw);

while (true)
{
    gpio.Write(MraaGpioValue.High); // 出力をHIGHにする
    Thread.Sleep(1000);
    gpio.Write(MraaGpioValue.Low); // 出力をLOWにする
    Thread.Sleep(1000);
}

なおMonoをインストールするとC# ShellというMonoのC# REPLが一緒に入るので、それを起動してMraaSharpを読み込むとインタラクティブに試すことができます。Node.jsに負けてない!(MraaSharpがすべて実装済みとは言っていない)

というわけでC#でLチカできてよかったのです(1.8Vなので直接つなげない分、若干難易度高かった)。

MRAA + C#

A video posted by Mayuki Sawatari (@misuzilla) on