from electron 2 web

インターネットのリソースを無駄遣いして検索におけるUXを下げてごめんなさい

圧倒的文章力のNASAでゴミみたいなチラ裏のようなメモを量産してしまい全ての"Web開発者"にごめんなさい

ServiceWorkerを知らない人が翻訳してしまった話~英語編~

英語に関しても学べることが数多くあった。同じ技術翻訳でもサイトや原作者が変わればそこに使われる英語もだいぶ変わってくる。

気づいたこと:俺はforが弱いかもしれない。あとthatも弱い、あとasも弱い。というか接続詞や前置詞に弱い。

なんかレシピとかクックブックとか大量出てきた。

P.S. ServiceWorker Cookbookをcookbookと呼んでる。

Beyond Offline ★ Mozilla Hacks – the Web developer blog

これが今回の翻訳の記事


This is my first post on Mozilla Hacks and despite my personal blog, it is my first post as a mozillian (yay!). During this month I’ve been working in the Service Worker Cookbook project —part of the Web Application Developer Initiative (WADI)— which gives me the opportunity to put my expertise in Service Workers into practice while at the same time learning new ways to exploit this exciting new web technology for the good of the Web. Let me share with you some of my latest thoughts.

これは私の個人的なブログの内容であるにもかかわらずMozilla Hacksとしての最初の投稿であり、Mozillianとしての最初の投稿でもあります!今月はずっとWeb Application Developer Initiative (WADI)のService Worker Cookbook projectに取り組んでいました。Service Worker Cookbook projectは私にService Workersの専門知識をアウトプットする機会を与えてくれて、それと同時にこのエキサイティングな新しいWebテクノロジーを活用する方法を学ばせてくれました。

The previous post in this series involved my colleague David Walsh talking about Application Cache and its lack of flexibility, so I won’t delve more into this topic. I will however look at some more of the recipes available in the Service Worker Cookbook. David introduced it and discussed some offline recipes; I want to go a little bit further and look at some other uses of Service Workers.

このシリーズの以前の投稿に私の同僚のDavid WalshがApplication Cacheの柔軟性の欠如について話しています。なので私はこのトピックについて詳しく掘り下げません。私はService Worker Cookbookのレシピの詳細を見ていこうかと思います。DavidはService Workerの導入といくつかのoffline recipesについて議論してくれました。私はもう少し広げてService Workerのほかの使い方についてみていこうかと思います。私の考えをシェアしてみませんか。


  • despire

にもかかわらず

  • despire ~ing

and的な使い方

  • put into practice

実施する?訳ではアウトプットと訳してみた。

  • lack of frexibility

柔軟性の不足

活用する。

エクスプロイトはもともとセキュリティ用語。脆弱性てきな。 英語だと偉大とか光栄とか手柄とか

  • for the good of the

~のため

ejje.weblio.jp

  • delve

掘り下げる

  • some more

詳細
いい訳だ。先生さすが。

I want to go a little bit further and look at some other uses of Service Workers.

  • little bit further

もう少し広げて


Service workers today

Despite having been under development for some time, it’s only now that we are starting to hear about Service Workers being used in the wild.

まだ開発下であるにもかかわらず、Service Workersは世界中で使われていると聞き始めています。

To recap, this API was originally committed to do right what Application Cache did wrong. Some web archaeology reveals that the intention was precisely to fix offline caching, allowing Web developers "to build URL-friendly, offline-by-default applications in a sane and layered way".

要約すると、このAPIは元々アプリケーションキャッシュが間違えたことを正しくするに全力を尽くしていました。Some web archaeologyはオフラインキャッシュを正確に修正する意図を明示し、Web開発者に「URLの設計をやりやすくするために、健全で階層的な方法のオフラインアプリケーションを」認めています。

ここまでは分かるんだけどここから下がまったくわけ分からん訳になってしまった。レビュー待ち。

The initial approach introduced the concept of navigation control through a concept that evolved into the Service Worker’s fetch functional event: a way to intercept network requests and respond with data obtained from the network, databases or procedurally generated. The best part? Controlled pages do not have to know that they are actually being hijacked (although they can be told) so the service logic is completely decoupled from the application logic. A perfect “man in the middle”.

最初の取り組みはService Workerのfetch functional event を発展させるというコンセプトを介してナビゲーションを制御する概念の導入です。 fetch functional event はネットワークリクエストを妨害し、ネットワーク、データベース、作成した手続きから取得したデータを返却する方法です。 大半は?コントロールされるページはかれらの実際ハイジャックされている(しかし伝えられることはできます)ことを知る必要ありません。 そのためサービスロジックは完全にアプリケーションロジックから切り離されています。完全な"中間者"です。

But as hackers (this is the Hacks blog, after all!) what we like is to craft ingenious solutions to relevant problems in which “ingenious” often means abusing the real intention of something. In Mozilla, from our WADI and Firefox OS initiative we are exploring the following off-label uses of Service Workers.

しかしハッカー(結局これもハッカーブログだからね!!)は関連する問題への“ingenious”な解決策を作るのが好きですが、 “ingenious”は時々なにかを悪用することを意味します。


To recap, this API was originally committed to do right what Application Cache did wrong.

前のrightは形容詞。

API do right what Application Cache did wrong. (SV(right)O)

正しくするappが間違えたこと(名詞節)

分かりにくかった。。。

to recup:要約すると

off-label:適用外


API analytics

APIの解析

Let’s start with a direct application of the man in the middle: API analytics. Imagine you want to get statistics about the usage of an API and do not have access to the server. Current solutions manipulate the client code generating HTTP requests, sending appropriate logs to the analytics service. A Service Worker could go one better, intercepting each request, extracting its parameters, sending the log for analysis and leaving the original request to reach the network.

アプリケーションの直接的なMitMアプローチをやってみましょう:

あなたはAPIの使用方法の統計がほしい、そしてサーバーにアクセスできないと想定しましょう。現在の解決方法はクライアントコードをあやつり、HTTPリクエストを作成し適切なログをanalytics serviceに送信します。Service Workerは一枚上手で、それぞれのリクエストを妨害し、パラメーターを抽出して、分析やネットワークに到達するためにもともとのリクエストを残す為にログを送ります。


A Service Worker could go one better, intercepting each request, extracting its parameters, sending the log for analysis and leaving the original request to reach the network.

A:不定冠詞 could:助動詞。本動詞の原形と一緒に用いる。 go:V.他動詞。 intercepting:現在分詞。PresentParticipate.名詞代名詞を形容し、また目的語、保護を伴うことが出来る。


Installing packaged apps

Before exploring other exotic uses, here is a more traditional one —a Service Worker can be used to offline resources, by installing packaged applications. It is possible to download a single zip package and unzip it at the time of enabling of a Service Worker. This reduces the overhead introduced by each of the HTTP requests and makes downloading the resources an atomic operation. Smart and automatic caching of large static assets such as fonts or images is another good example of offlining.

他のユニークな使い方を探る前に、伝統に従いましょう。 Service Workerはinstalling packaged applicationsを使いオフラインのリソースが使用できます。これはzipパッケージとしてダウンロードし、Service Worker有効時に解凍することができます。これはそれぞれのHTTPリクエストのオーバーヘッドを減らし、原始的な(一度の)操作によってダウンロードすることが可能です。フォントや画像などの静的なオフセットの自動キャッシュは"offlining"の良い例であり良い方法です。


*imagineが先頭の文

想像してください、想定してください。


Impersonating servers

Recalling the man in the middle approach, by acting as proxy a service worker could impersonate a server and implement the API that the client expects to reach through the network. ServiceWorkerWare, developed within Firefox OS, is a library to support the New Gaia Architecture for applications and allows developers to write Service Workers in a declarative way, following the philosophy of the popular Node.js Express library but on the client side.

上記のServiceWorkerがプロキシとして動作するMitMアプローチをもう一度考えて見ましょう。ServiceWorkerはサーバーを偽装し、クライアントがネットワークを通して期待するAPIを実装することができます。

ServiceWorkerWareライブラリはFirefox OSで開発されていて New Gaia Architecture と呼ばれるものをサポートしています。

New Gaia Architecture はアプリケーションや開発者にService Workers in a declarative way で記述することを許可し、Express (Node.jsのライブラリ)のクライアントサイドで動く環境をサポートしています。


Recalling the man in the middle approach/by acting as proxy/a service worker could impersonate a server /and implement the API /that the client expects to reach through the network

a service worker implement the API (SVO)/that the client expects to reach through the network

Service workerはクライアントがネットワークを通して届いてほしいAPIを実装することもできます。

  • Recalling

再考する

  • impersonate

偽装する


Implementing modern framework functionality

機能的な現代のフレームワークを実装する。

Service Workers have their own place as building blocks for modern frameworks too.Consider template interpolation as an example. Lots of current popular web application frameworks such as backbone.js and Angular render models by interpolating their properties in a template. The New Gaia Architecture we spoke of previously introduces the concept of a render store,

Swはモダンなわく組み用の構成要素の一部分として自分自身の地位を確立しています。

例として、template interpolationを考えてみます。 backbone.js や Angularのような現在のポピュラーなフレームワークの多くはテンプレートの中に特性を補間することによってモデルを描きます。

以前その話を聞いた私たちはNew Gaia Architectureに render storeの概念を導入しています。

an offline cache that stores the result of interpolating the template with the data model so that the second time the client requests the same model, it can be retrieved from the render store, avoiding interpolation delays.

interpolation delays.をなくすため次にクライアントが同じモデルをリクエストしたときレンダーストアから探せるようにデータモデルにinterpolating the template の結果を保存するオフラインキャッシュ

Service Workerはモダンな枠組みの構成要素の一部分として自分自身の地位を確立しています。

例として、template interpolationを考えてみます。backbone.js や Angular のような現在のポピュラーなフレームワークの多くはテンプレートの中に特性を補間することによってモデルを描きます。

以前その話を聞いた私たちはNew Gaia Architectureに render store の概念を導入しています。 render store とはinterpolation delaysをなくすため次にクライアントが同じモデルをリクエストしたときレンダーストアから探せるようにデータモデルにinterpolating the template の結果を保存するオフラインキャッシュです。


Service Workers have their own place as building blocks for modern frameworks too.

building blocks :積み木、構成要素。今回は構成要素のほうが適切やね!

by interpolating their properties in a template.

here to stay:定着する

lie ahead:待ち受けている。

too:あまりにも 自分は~もまたのtooだと勘違いしてた

  • so that

Switch the light on so that we can see what it is. 何なのか見えるように明かりをつけなさい.

Lots of current popular web application frameworks such as backbone.js and Angular render models by interpolating their properties in a template. render models:モデルを描く。MVCのMか。描写モデルとして約していたので詰まった。


Dependency injection

Another popular concept in modern frameworks is dependency injection, which states that dependent code need not know how its dependencies have been built.

現代的なフレームワークの他のポピュラーなコンセプトに dependency injectionがあります。これは依存するコードが依存関係を知る必要は無い状態です。

It only knows about abstract interfaces, and the specific implementations are provided by an abstract factory called an injector. A Service Worker could act as a dependency injector.

これは抽象的なインターフェースのみ知っていて、詳細な仕様はinjectorと呼ばれるabstract factoryから提供されます。Service Workerはinjectorとして動作します。

A framework could make its components declare API dependencies via script tags, then the Service Worker, acting as the injector, could identify requests to the abstract resources and respond with the actual modules.

フレームワークスクリプトタグを経由してそのコンポーネントAPIの依存関係を宣言させます。その後Service Workerはinjectorとして動作し、抽象的なリソースのリクエストを特定して、実際のモジュールを返却します。


Deferring requests

If the device does not have connectivity but the app continues accepting operations, the client application and the service in the cloud will be eventually out of sync.

もしデバイスが connectivityを持っていなくて、しかし連続して操作を受け入れていると最終的にクライアントアプリケーションやサービスが非同期になってしまいます。

An interesting feature for a framework could be to offer a request deferrer. For instance, while offline a Service Worker could withhold requests to the API and release them when the connection comes back.

フレームワークの面白い特徴としてrequest deferrer.をすることができます。例としてオフライン時のサービスworkerはAPIのリクエストを保留して接続が来たときにリクエストを解き放つことができます。

In the meantime, the Service Worker could imitate the server by answering with generic OK (status code 200) or ACCEPTED (status code 202) responses to client operations. Once connectivity returns, the Service Worker could sync with the cloud by recreating the requests against the network from a queue of deferred requests.

一方でServiceWorkerはクライアントにgeneric OK (status code 200)やACCEPTED (status code 202)などの サーバーの応答を模倣することができます。コネクションが復帰するとServiceWorkerはdeferred requestsキューからネットワークに対してリクエストを再作成し同期します。


  • withhold

保留する

ageinst:対して


Network logic ideas

Network logic のアイデア

And to finish, the Service Worker could also contain network logic, perhaps multiplexing a request to multiple sources, measuring the availability and quality of each source and returning the data via the right channel.

最後に、Service Workerはnetwork logicを含むこともできます。たぶんmultiplexing リクエストを複数のソースに使用することもできるでしょう。可用性や計測やそれぞれの正しいチャンネルを通り返ってきたデータソースの質の計測もできます。

Let me provide a little example before wrapping up. Suppose we have an online video application. The user wants to see an HD movie so the application requests the movie URL, but before starting to serve the content the Service Worker intercepts the request, asks for the load levels of the servers, selects the one with the lowest value and starts serving the content from that specific server. Sounds familiar? It’s a load balancer, yes, but now achievable on the client side! Nice, isn’t it?

結論を出す前に小さい例を挙げましょう。ユーザーはHDの動画を見たいため、アプリケーションは動画のURLをリクエストします。しかしコンテンツの提供が始まる前に、ServiceWorkerがリクエストを妨害し、サーバーにサーバー自身のロードレベルを聞きに行きます。一番低いボリュームを選択し、その特定のサーバからコンテンツを提供開始します。なにか気づかないか?そう、これはロードバランサーだ!今はクライアント側で使える!すごいとは思わないか?

__

  • And to finish

最後に

right channel ????

気づいたこと:俺はforが弱いかもしれない。あとthatも弱い、あとasも弱い。というか接続詞や前置詞に弱い。

ejje.weblio.jp

丸暗記して圧倒的成長。

  • in the mean time

これまでは、とりあえず、その間

  • wrapping up,wrap up

要約 結論 結果

Let me provide a little example before wrapping up.:結論を出す前に小さい例を挙げましょう。 先生に頼った。"私に"と勘違いしてた。どこにもtoがないのにね。

serve :提供する、奉仕する。知ってたけど忘れてたやつ。

Sounds familiar? It’s a load balancer, yes, but now achievable on the client side! Nice, isn’t it? なにか気づかないか?そう、これはロードバランサーだ!今はクライアント側で使える!すごいとは思わないか?

↑訳してて楽しかった。


Summary

That’s all for now folks! Seven uses, seven exotic recipes beyond simply caching content for offline availability.At this time, the Service Worker Cookbook project exposes all these ways (and others besides) to take advantage of the features provided by the Service Workers API.

今はこれくらいにしておきましょう。7つの使い道、単にオフラインで使用するためにコンテンツをキャッシュするだけを超えた7つのユニークなレシピ。現在、 Service Worker Cookbook projectはService Workers APIによって提供される特徴を活用するためこれらのすべての(そのほかにもある)方法を公開しています。

And we will not stop here —there is much more to explore; the Push API is here to stay and Background Sync is coming soon, with streamed HTTP responses and cancellable requests on the horizon. Who knows what opportunities lie ahead?

そして私たちはここでとまらず、さきへ行く。 Push API は定着し、 Background Sync ももうすぐです。

For more info about Service Workers and other platform implementation status, take a look at Platatus, and we’ll keep you informed!

Service Workersの更なる情報や他のプラットフォームでの実装状況はPlatatus,を参照してください。私たちはあなたの参加を待っています!


summaryは概論とかそういう意味だがここでは"終わりに"と訳した。

  • That’s all for now folks!

米国の授業の終わりとかにいう感じらしい。

  • beyond

超えて

  • to take advantage

活用する。

  • lie ahead

待ち受ける。


ここから下は副次的にやった翻訳(MDNのfetchのページとか)とか自分用ログ

Once the promise is resolved, fetch is called with the request.

once:数詞。pert-of the 形容詞。数量形容詞と数詞(基数詞、倍数詞、序数詞)は違うっぽい。どっちも形容詞だけど

the:冠詞。定冠詞。 promise:名詞。数えられないため不可算名詞。普通名詞かな? resolved:過去分詞。最初動詞かと思った。自動詞の過去分詞 resolvedに繋がるものがないから。 自動詞の過去分詞は受動の意味は無い。

fetch:S,名詞、普通名詞 is:V,be verb, with:前置詞 名詞のまえに前置詞を置く

indexjsでボタンがsubmitされるとpostでapi/quotationに投げる この時もlogをsw.jsが投げる

鯖はquotation(デフォルトでロードされる奴)配列に追加

https://serviceworke.rs/api-analytics_service-worker_doc.html

developer.mozilla.org

Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available.) ServiceWorkerは基本的にwebapp sarverとbrowserの間プロクシサーバーとして動作します

serviceworker:S essentially :actを修飾しているため副詞 act as proxy servers:動詞句 as:接続詞。

as は確かに「曲者(くせもの)」で厄介ですね。前置詞、接続詞、関係詞など様々な意味・用法があります。

串鯖:名詞

that:名詞節のthatかと思ってたら関係代名詞のthatでワロリンヌ。名詞の後ろの名詞節ってよく考えたらおかしいよね 代名詞は5つの種類がある 人称代名詞、疑問代名詞(whoとか)、不定代名詞、関係代名詞、指示代名詞

関係代名詞のthatの前の詞を先行詞という。

sit:動詞。不規則動詞。between webapp and andを目的語としている他動詞。 between:前置詞らしい。関係代名詞か接続詞かと思った。 群前置詞ではない。前置詞は英語でPreposition 前置詞の後は目的語☆ and:接続詞。等位接続詞

that sit between web applications, and the browser and network (when available.) that節は名詞節。

i do not know whether such a thing is going to happen or when it will happen if it does happen. whether~,whenが名詞節(←疑問詞で始まる奴も名詞節っていったよね?もう忘れたのか?アホ) whether~,ifも名詞節

そして名詞節は従属節なのか。

we may find that the reform deadens their sense of responsibility and that the total efect is at best one of futility deadens their sense of responsibity 彼らの責任の感覚(責任感)を鈍らせる

この場合は前者のthatを後者のthatが結果を述べている。

こうして考えてみると前のthatダブルも2つ目が一つ目にかかっている気が姉妹でもない

しかし1,2とも2版目のthatが最初にかかっているとも言えなくともない

最初の文はダブルthatのthatが省略された形かと思ってたけど違うわ。

A service worker is run in a worker context: A:冠詞 ServiceWorker:名詞 名詞の中でも固有名詞。名詞は文の中のSになれる。 この中のSはこれでしょうね。 is:be動詞:v in a worker context:S=Cとなるので SVCの文型

SVCの場合、vの代表的なものはbe.例外もある

as a consequence その結果 essentially 基本的に

目的語には他動詞と自動詞ががある。限定用法と叙述用法みたいなね。 限定用法は他動詞。叙述用法が自動詞。

It's incredibly useful to have good, clean tags on pages, so be sure to have good tags on articles you contribute to.

よくわからなかったけどわかったものの文法に落としこむ

It:代名詞。代名詞は確か5つあったよな。人称代名詞。 it~to+構文なんてあるのか。 incredibly :usefulを修飾しているため副詞(adverb) 副詞はlyで終わることが多い。 useful:形質代名詞?。叙述用法。

have good 良さを保つ。これへんな感じがするのは俺だけなのか?未来進行形を使わないのか? 以降のコンマはandとして考えると良い。

clean:名詞を修飾しているため.形容詞。性質形容詞限定用法。nで終わってるから性質形容詞。 tag:普通名詞 on:前置詞。名詞や代名詞につける。 前置詞の目的語は名詞や代名詞

the arrival of the train のofの後ろのtrainは主格っぽい。 これを主格のofという 電車"が"到着した

主格のofと目的格のof


S force O to do SがOにVさせる ASAP as soon as possible


Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available.) ServiceWorkerは基本的にwebapp sarverとbrowserの間プロクシサーバーとして動作します

A service worker is run in a worker context: A:冠詞 ServiceWorker:名詞 名詞の中でも固有名詞。名詞は文の中のSになれる。 この中のSはこれでしょうね。 is:be動詞:v in a worker context:S=Cとなるので SVCの文型

SVCの場合、vの代表的なものはbe

as a consequence その結果 essentially 基本的に

目的語には他動詞と自動詞ががある。限定用法と叙述用法みたいなね。 限定用法は他動詞。叙述用法が自動詞。

developer.mozilla.org

GlobalFetch is implemented by both Window and WorkerGlobalScope — meaning that the fetch() method will be available in pretty much any context you might want to fetch resources in. SV

他動詞とは、動詞の動作が対象に何らかの影響を及ぼす意味を持った動詞のことを指す。

SVCOM S:名詞 V:動詞 C:名詞、形容詞、分詞の限定用法 O:名詞 M:副詞

動詞、分詞は目的語、補語などを持つことができる。

Any body that you want to add to your request:

名詞の説明のthatは関係代名詞。

今回は、thatの使い方について。 特に、代名詞・形容詞・関係代名詞・接続詞が紛らわしいので、 例文と一緒にパターンを覚えてしまいましょう!

接続詞もしくは関係代名詞の前後を見て判断する。

前の品詞がなんなのか?後ろの文はそれだけで完結してるのか?後ろの最初の品詞は?

名詞を修飾するのが関係代名詞。後ろは文ではない(主語がない)

ServiceWorker Cookbook

The code in oninstall and onactive force the service worker to control the clients ASAP.

S force O to do SがOにVさせる ASAP as soon as possible