LoginSignup
38
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@keymoon

【Blazor】C#でブラウザ拡張を開発する

Last updated at Posted at 2019-12-09

はじめに

Blazorとは、JavaScriptが担っているDOM操作やリクエストといったクライアントサイドの動作を、C#を用いたテンプレートエンジンRazorの記法で行えるようにしたものです。
サーバーサイドでバイナリを実行し、結果をSignalRを通してクライアントに反映させるServer-side Blazorのみが正式版としてリリースされ、クライアントサイドでバイナリを直接実行するClient-side Blazorは、.NET Core 3.1現在プレビュー版となっています。

これを用いて先日、以下のようなものを作成しました。

これは、コンパイラのRoslynをClient-side Blazorを用いてBackground pageで実行し、それに対してコンパイルと実行のリクエストをコンテンツスクリプトから送ることによって実現しています。
Client-side Blazorは静的な要素のみで完結しているため、このようなアドオンのようなものも作成可能です。

本記事では、Client-side Blazorで作成した簡単なアドオンを通じ、RazorにはなかったClient-side Blazorの要素やアドオンとして発行するに当たっての注意点等に触れていきたいと思います。

本記事を通じて作成していくアドオンは、以下のような現在地を取得して天気予報を表示するアドオンです。アドオンのpopup上に外部のAPIを叩いた結果を表示する簡素なものです。(Chrome、Firefoxで動作を確認しました。)
j.gif

完成したリポジトリは以下になります。
key-moon/WeatherForecastExtensionWithBlazor

1 JavaScript-C#間の相互運用

1.1 C#からJavaScriptを呼び出す

JavaScriptの関数は、C#からIJSRuntime.InvokeAsync<T>(string identifier, params object[] args)メソッドを用いることによって呼び出すことができます。以下にて、現在の座標を取得するコードを通じて使い方を見ていきます。

現在の座標は、JavaScriptでnavigator.geolocation.getCurrentPosition関数を用いることで取得することができます。
これは引数にコールバック関数を要求します。ここで、C#からActionを渡したとしても動くことはありません。C#からJavaScriptにオブジェクトを渡す場合はJSONを経由することで引渡しが行われるため、渡されたオブジェクトは持っていたメソッド等の情報を失うからです。
次項で説明しますが、専用のラッパで包むことで擬似的に参照の引渡しを実現できます。それによってC#の関数をコールバックとして実行することはできますが、ここではもう少し簡易的なアプローチを取ることにします。
まず、以下のようにしてgetCurrentPositionを非同期関数でラップします。

main.js
async function get_coord() {
    return new Promise((success, reject) => {
        if (!navigator.geolocation) reject("Geolocation is not supported by this browser.");
        navigator.geolocation.getCurrentPosition((position) => {
            success({ lat: position.coords.latitude, lon: position.coords.longitude });
        });
    }); 
}

そして、、C#側でInvokeAsyncを用いることでJavaScript側の関数を非同期的に呼び出すことが可能になります。InvokeAsyncはJavaScriptでのPromiseをC#でのValueTaskに置き換えてくれるため、これは以下のようにawaitすることで返り値を取得することができます。

FetchData.razor.cs
async Task<Coord> GetCoordAsync()
{
    return await Runtime.InvokeAsync<Coord>("get_coord");
}

class Coord { public double lat { get; set; } public double lon { get; set; } }

1.2 JavaScriptからC#を呼び出す

今回は使用しませんでしたが、先程述べたようにC#側のメソッドをJavaScriptから呼び出すこともできます。
先程の例に続いて、コールバック関数として渡したC#側関数オブジェクトであるAction<T>のInvokeをJavaScriptから呼ぶことを目標としましょう。
JavaScript側から呼び出すことができるC#のメソッドは、[JSInvokable]属性がついているものです。このような属性がついていた場合、invokeMethodで呼び出すことができます。staticメソッドの場合はDotNet.invokeMethodを、非staticの場合は後述のDotNetObjectReferenceオブジェクトのinvokeMethodを使用します。staticメソッドの場合、引数は(アセンブリ名, メソッド名, 引数1, 引数2…)と取り、そうでない場合は(メソッド名, 引数1, 引数2…)と取ります。
つまり、もしAction<T>.Invokeに[JSInvokable]が指定されていたならば、funcRef.invokeMethod("Invoke", position);と書くことができるようになるということです。しかし、残念ながらそのようなことはありません。そのため、引数で渡されたActionを実行するだけのInvokeToというstaticメソッドを作ってやります。(以下のコードでジェネリックを使っていないのは、ジェネリックメソッドにもJSInvokableを指定することができないからです。)

DotNetObjectReference.CreateはJavaScriptに渡せる参照のラッパを作るメソッドです。作成されたDotNetObjectReferenceオブジェクトは、Valueプロパティを参照すれば元の値を得ることができます。
ここでは、callbackの参照をラップして渡し、帰ってきたcallbackからValueを取り出して実行しています。

_FetchData.razor.cs
void GetCoord(Action<Coord> callback)
{
    return await Runtime.InvokeVoidAsync(
        "get_coord_with_callback", 
        DotNetObjectReference.Create(callback)
    );
}

[JSInvokable]
static void InvokeTo(DotNetObjectReference<Action<Coord>> action, Coord arg)
    => action.Value.Invoke(arg);

class Coord { public double lat { get; set; } public double lon { get; set; } }

そして、JavaScript側では以下のようにDotNet.invokeMethodを呼ぶ関数を指定するようにすれば良いです。

_main.js
function get_coord_with_callback(funcRef) {
    if (!navigator.geolocation) throw new Exception("Geolocation is not supported by this browser.");
    navigator.geolocation.getCurrentPosition((position) => {
        DotNet.invokeMethod("AsmName", "InvokeTo", funcRef, position);
    });
}

2 リクエストを送る

C#からAPIを叩いてみます。これは、普段C#で書いているのと同じようにHttpRequestを用いることで可能です。
今回であれば天気予報を取得したいため、OpenWeatherの座標から3時間おきの天気予報を得ることができるエンドポイントを叩くこととします。(ドキュメント)
ここで注意することとして、以下のようにデフォルトでDIされているHttpClientを使ってはいけません。

@inject HttpClient Client

Blazorでシングルトンとして生成されるHttpClientは、BaseAddressをlocation.originに指定します。アドオンのポップアップページでのlocation.originはスキームが特殊なため、BaseAddressに指定しようとした時点で例外を起こしてしまいます1。

これを踏まえた上で実装すると以下のようになります。

FetchData.razor.cs
HttpClient Client = new HttpClient();
const string AppID = "xxxx";
static readonly Uri BaseURL = new Uri("https://api.openweathermap.org");
private City City;
private Forecast[] forecasts;

protected override async Task OnInitializedAsync()
{
    var coord = await GetCoordAsync();
    var query = new Uri(BaseURL, $"/data/2.5/forecast?lat={coord.lat}&lon={coord.lon}&units=metric&appid={AppID}");
    var forecast = await Client.GetJsonAsync<Forecasts>(query.AbsoluteUri);
    City = forecast.city;
    forecasts = forecast.list;
}

3. アドオンとして発行する

Client-side Blazorでは、ファイルに発行をすることでビルド後に静的デプロイできるファイルを[BuildDirectory]/[ProjectName]/distに配置します。そのため、distディレクトリをアドオンとして発行すれば良いこととなります。
発行するためには、アプリケーションの設定等を記したmanifest.jsonが必須です。これはアドオンのルートディレクトリに書き出されていたいため、ウェブサーバーに静的コンテンツを配置する場合に用いるwwwrootディレクトリ直下に追加します。
今回は位置情報を使用しているのでpermissionには"geolocation"を指定しています。
そして、popupに表示されるHTMLにはindex.htmlを指定しました。
また、Blazorのブートや実行時にevalやscriptタグの埋め込みを行うため、content_security_policyでそれを許可する必要があります。evalについてはunsafe-evalを、scriptタグについては、実行されるscriptのhashを指定します。scriptタグは、ブートでしか追加されず、追加されるscriptは常に一定なのでhashを調べることができます。
結果として、manifest.jsonは以下のようになります。

manifest.json
{
  "name": "ForecastViewer",
  "version": "1.0",
  "description": "",
  "content_security_policy": "script-src 'self' 'unsafe-eval' 'sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA='; object-src 'self'",
  "permissions": [ "geolocation" ],
  "browser_action": {
    "default_popup": "index.html"
  },
  "manifest_version": 2
}

ここでindex.htmlをページとして指定した関係で、アプリケーションのマッピングを/index.htmlにする必要があります。(デフォルトでは/などになっていることが多いです。)

FetchData.razor.cs
@page "/index.html"

また、ファイル名/ディレクトリ名の先頭にアンダーバーを含めることはできません。そのため、発行されたところにある_framework/_binというディレクトリを改名する必要があります。
改名した後、index.html,blazor.webassembly.jsに含まれるこれらの文字列も変える必要があります。

# ディレクトリからアンダーバーを除去
mv _framework/_bin _framework/bin
mv _framework framework
# スクリプト内で登場しているところを書き換え
sed 's/_bin/bin/g' framework/blazor.webassembly.js
sed 's/_framework/framework/g' framework/blazor.webassembly.js index.html

これで、晴れてアドオンとして発行できます。Chromeならばパッケージ化されていない拡張機能を読み込むでdistディレクトリを、Firefoxならば一時的なアドオンを読み込むでmanifest.jsonを指定してください。

おわりに

いかがでしたでしょうか。
冒頭で触れたような特殊なケース以外では、アドオンを作る際の第一の選択肢として自信を持ってBlazorをオススメすることは現状できません。
ただ、Blazorに触れて数時間の素人である私がある程度のことができるように、様々なことが簡素に行えるとても柔軟性の高い技術であることを感じ取っていただければ幸いです。

  1. 余談ですが、上記の理由からアドオンに置いた別のファイルを動的にダウンロードする、といったことがC#側からだとできません。そのため、もしもファイルをロードをする場合はJavaScriptを経由させる必要があります。 ↩

BlazorAdvent Calendar 2019

Day 10
38
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
38
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?