Merge pull request #154 from silverskyvicto/translate-ja/5-browser-extension
translate 5-browser-extension into japanesepull/155/head
Jen Looper
4 years ago
committed by
GitHub
commit
89d9c73569
@ -0,0 +1,167 @@
|
|||||||
|
# ブラウザ拡張機能プロジェクト その 1: ブラウザのすべて
|
||||||
|
|
||||||
|
|
||||||
|
> Sketchnote by [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
|
||||||
|
|
||||||
|
## レッスン前の小テスト
|
||||||
|
|
||||||
|
[レッスン前の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/23)
|
||||||
|
|
||||||
|
### イントロダクション
|
||||||
|
|
||||||
|
ブラウザ拡張機能はブラウザに機能を追加するものです。しかし、拡張機能を作る前に、ブラウザがどのように機能するのかを少し学んでおく必要があります。
|
||||||
|
|
||||||
|
### ブラウザについて
|
||||||
|
|
||||||
|
この一連のレッスンでは、Chrome、Firefox、Edge ブラウザで動作するブラウザ拡張機能の構築方法を学びます。このパートでは、ブラウザがどのように動作するのかを理解し、ブラウザ拡張の要素を足場にしていきます。
|
||||||
|
|
||||||
|
しかし、ブラウザとは正確には何でしょうか? それは、エンドユーザーがサーバーからコンテンツにアクセスして Web ページに表示することを可能にするソフトウェアアプリケーションです。
|
||||||
|
|
||||||
|
✅ 少し歴史を紹介します: 最初のブラウザは 'WorldWideWeb' と呼ばれ、1990年にティモシー・バーナーズ・リー卿によって作成されました。
|
||||||
|
|
||||||
|
|
||||||
|
> いくつかの初期のブラウザは、[Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) を経由しています。
|
||||||
|
|
||||||
|
ユーザーが URL (Uniform Resource Locator) アドレスを使用してインターネットに接続すると、通常は Hypertext Transfer Protocol を使用して `http` または `https` アドレスを経由して、ブラウザが Web サーバと通信して Web ページを取得します。
|
||||||
|
|
||||||
|
この時点で、ブラウザのレンダリングエンジンがユーザのデバイス (携帯電話、デスクトップ、ラップトップなど) にページを表示します。
|
||||||
|
|
||||||
|
ブラウザにはコンテンツをキャッシュする機能もあり、毎回サーバから取得する必要がありません。ブラウザは、ユーザーのブラウジング活動の履歴を記録したり、ユーザーの活動を保存するために使用される情報を含む小さなデータである「クッキー」を保存したりすることができます。
|
||||||
|
|
||||||
|
ブラウザについて覚えておくべき重要なことは、ブラウザはすべて同じではないということです。それぞれのブラウザには長所と短所があり、プロの Web 開発者は、Web ページをクロスブラウザでうまく動作させる方法を理解する必要があります。これには、携帯電話のような小さなビューポートやオフラインのユーザーへの対応も含まれます。
|
||||||
|
|
||||||
|
あなたが使いたいブラウザにブックマークしておくべき本当に便利な Web サイトは、[caniuse.com](https://www.caniuse.com) です。Web ページを作成する際には、caniuse のサポートされている技術のリストを利用すると、ユーザーを最大限にサポートすることができるので、非常に便利です。
|
||||||
|
|
||||||
|
✅ どのブラウザがあなたの Web サイトのユーザーに最も人気があるのか、どのようにして知ることができるでしょうか? アナリティクスをチェックする - Web 開発プロセスの一環として様々なアナリティクスパッケージをインストールすることができ、様々な人気のあるブラウザで最も使用されているブラウザを教えてくれます。
|
||||||
|
|
||||||
|
## ブラウザの拡張機能
|
||||||
|
|
||||||
|
なぜブラウザ拡張機能を作ろうと思ったのでしょうか? ブラウザの拡張機能は、何度も繰り返しがちな作業に素早くアクセスしたいときに便利なものです。例えば、対話する様々な Web ページの色をチェックする必要がある場合は、カラーピッカーブラウザ拡張機能をインストールするとよいでしょう。パスワードを覚えるのが面倒な場合は、パスワード管理ブラウザ拡張機能を使うとよいでしょう。
|
||||||
|
|
||||||
|
ブラウザ拡張機能は開発するのも楽しいものです。彼らは、有限のタスクを管理する傾向があり、それがうまく機能しています。
|
||||||
|
|
||||||
|
✅ お気に入りのブラウザ拡張機能は何ですか? どのようなタスクを実行しますか?
|
||||||
|
|
||||||
|
### 拡張機能のインストール
|
||||||
|
|
||||||
|
ビルドを始める前に、ブラウザ拡張機能のビルドとデプロイのプロセスを見てみましょう。ブラウザによってこのタスクを管理する方法は少し異なりますが、Chrome と Firefox では、Edge のこの例とプロセスは似ています。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
本質的には、このプロセスになります。
|
||||||
|
|
||||||
|
- `npm build` を使って拡張機能をビルドします
|
||||||
|
- ブラウザの右上にある「設定とその他」ボタン (`...` アイコン) を使って、拡張機能ペインに移動します
|
||||||
|
- 新規インストールの場合は、`load unpacked` を選択してビルドフォルダ (私たちの場合は `/dist`) から新しい拡張機能をアップロードします
|
||||||
|
- または、既にインストールされている拡張機能をリロードする場合は `reload` をクリックします
|
||||||
|
|
||||||
|
✅ 各ブラウザに関連付けられたブラウザ拡張機能ストアにリリースされた拡張機能をインストールするには、それらの [ストア](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) に移動して、お好みの拡張機能をインストールしてください。
|
||||||
|
|
||||||
|
### 開始する
|
||||||
|
|
||||||
|
あなたの地域のカーボンフットプリントを表示し、地域のエネルギー使用量とエネルギー源を表示するブラウザ拡張機能を構築します。拡張機能には、CO2 Signal API にアクセスできるように API キーを収集するフォームがあります。
|
||||||
|
|
||||||
|
**必要なもの:**
|
||||||
|
|
||||||
|
- [API キー](https://www.co2signal.com/); このページのボックスにメールアドレスを入力します
|
||||||
|
- [電力地図](https://www.electricitymap.org/map) に対応する地域のコード (例えばボストンでは 'US-NEISO' を使用しています)
|
||||||
|
- [スターターコード](../../start)。`start`フォルダをダウンロードしてください。このフォルダでコードを完成させることになります。
|
||||||
|
- [NPM](https://www.npmjs.com) - NPM はパッケージ管理ツールです。ローカルにインストールすると、`package.json` ファイルに記載されているパッケージがインストールされ、Web アセットで使用されます。
|
||||||
|
|
||||||
|
✅ この[優れた Learn モジュール](https://docs.microsoft.com/ja-jp/learn/modules/create-nodejs-project-dependencies/)では、パッケージ管理の詳細を学ぶことができます。
|
||||||
|
|
||||||
|
コードベースに目を通してみてください。
|
||||||
|
|
||||||
|
dist
|
||||||
|
-|manifest.json (ここに設定されているデフォルト)
|
||||||
|
-|index.html (フロントエンド HTML マークアップはこちら)
|
||||||
|
-|background.js (バックグラウンド JS はこちら)
|
||||||
|
-|main.js (ビルド JS)
|
||||||
|
src
|
||||||
|
-|index.js (あなたのJSコードはここにあります)
|
||||||
|
|
||||||
|
✅ API キーとリージョンコードが手元にあれば、後で使うときのためにノートのどこかに保存しておきましょう。
|
||||||
|
|
||||||
|
### 拡張機能の HTML を構築する
|
||||||
|
|
||||||
|
この拡張機能には2つのビューがあります。1つは API キーとリージョンコードを収集するためのものです。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
そして2つ目は、地域の炭素使用量を表示するためのものです。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
まずはフォーム用の HTML を構築し、CSS でスタイリングしてみましょう。
|
||||||
|
|
||||||
|
`/dist` フォルダにフォームと結果領域を作成します。`index.html` ファイルの中には、区切りのついたフォーム領域を作成します。
|
||||||
|
|
||||||
|
```HTML
|
||||||
|
<form class="form-data" autocomplete="on">
|
||||||
|
<div>
|
||||||
|
<h2>New? Add your Information</h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="region">Region Name</label>
|
||||||
|
<input type="text" id="region" required class="region-name" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="api">Your API Key from tmrow</label>
|
||||||
|
<input type="text" id="api" required class="api-key" />
|
||||||
|
</div>
|
||||||
|
<button class="search-btn">Submit</button>
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
これは、保存した情報を入力し、ローカルストレージに保存するフォームです。
|
||||||
|
|
||||||
|
次に、結果領域を作成します。最終的なフォームタグの下に、いくつかの div を追加します。
|
||||||
|
|
||||||
|
```HTML
|
||||||
|
<div class="result">
|
||||||
|
<div class="loading">loading...</div>
|
||||||
|
<div class="errors"></div>
|
||||||
|
<div class="data"></div>
|
||||||
|
<div class="result-container">
|
||||||
|
<p><strong>Region: </strong><span class="my-region"></span></p>
|
||||||
|
<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
|
||||||
|
<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
|
||||||
|
</div>
|
||||||
|
<button class="clear-btn">Change region</button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
この時点で、ビルドを試してみましょう。この拡張モジュールのパッケージの依存関係を必ずインストールしてください。
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
このコマンドは、Node Package Manager である npm を使用して、拡張機能のビルドプロセスに Webpack をインストールします。webpack はコードのコンパイルを処理するバンドルです。この処理の出力は `/dist/main.js` を見ることで見ることができます - コードがバンドルされていることがわかります。
|
||||||
|
|
||||||
|
とりあえず、拡張機能をビルドして、拡張機能として Edge にデプロイすると、フォームがきれいに表示されます。
|
||||||
|
|
||||||
|
これで、ブラウザ拡張機能を構築するための第一歩が踏み出せました。この後のレッスンでは、ブラウザ拡張機能をより機能的で便利なものにしていきます。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 チャレンジ
|
||||||
|
|
||||||
|
ブラウザの拡張機能ストアを見て、ブラウザにインストールしてください。興味深い方法でそのファイルを調べることができます。あなたは何を発見しましたか？
|
||||||
|
|
||||||
|
## レッスン後の小テスト
|
||||||
|
|
||||||
|
[レッスン後の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/24)
|
||||||
|
|
||||||
|
## 復習と自己学習
|
||||||
|
|
||||||
|
このレッスンでは、Web ブラウザの歴史について少し学びました。この機会に、Web ブラウザの歴史を読むことで、World Wide Web の発明者がどのように Web ブラウザの使用を想定しているかを学びましょう。役に立つサイトをいくつか紹介します。
|
||||||
|
|
||||||
|
[Web ブラウザの歴史](https://www.mozilla.org/en-US/firefox/browsers/browser-history/)
|
||||||
|
|
||||||
|
[Web の歴史](https://webfoundation.org/about/vision/history-of-the-web/)
|
||||||
|
|
||||||
|
[ティム・バーナーズ・リーのインタビュー](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
|
||||||
|
|
||||||
|
## 課題
|
||||||
|
|
||||||
|
[拡張機能のスタイル変更](assignment.ja.md)
|
||||||
|
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# 拡張機能のスタイル変更
|
||||||
|
|
||||||
|
## 説明書
|
||||||
|
|
||||||
|
この拡張機能のコードベースにはスタイルが完全に含まれていますが、それらを使用する必要はありません。css ファイルを編集してスタイルを変更することで拡張機能を自分のものにしてください。
|
||||||
|
|
||||||
|
## ルーブリック
|
||||||
|
|
||||||
|
| 基準 | 模範的な例 | 適切 | 改善が必要 |
|
||||||
|
| -------- | -------------------------------------------- | --------------------- | ----------------- |
|
||||||
|
| | コードは機能的な新しいスタイルで提出されます | スタイリングが不完全 | スタイルがバグっている |
|
||||||
@ -0,0 +1,222 @@
|
|||||||
|
# ブラウザ拡張機能プロジェクト その 2: API の呼び出し、ローカルストレージの使用
|
||||||
|
|
||||||
|
## レッスン前の小テスト
|
||||||
|
|
||||||
|
[レッスン前の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/25)
|
||||||
|
|
||||||
|
### イントロダクション
|
||||||
|
|
||||||
|
このレッスンでは、ブラウザ拡張機能のフォームを送信して API を呼び出し、その結果をブラウザ拡張機能に表示します。また、将来の参照や利用のために、ブラウザのローカルストレージにデータを保存する方法についても学びます。
|
||||||
|
|
||||||
|
✅ コードをどこに配置するかについては、適切なファイル内の番号の付いたセグメントを参照してください。
|
||||||
|
|
||||||
|
### 拡張機能で操作する要素の設定:
|
||||||
|
|
||||||
|
この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `<div>` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](.../.../1-about-browsers/translations/README.ja.md) を参照してください。
|
||||||
|
|
||||||
|
`index.js` ファイルの中で作業を行うには、様々なフィールドに関連付けられた値を保持するための `const` 変数を作成することから始めます。
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
// フォームフィールド
|
||||||
|
const form = document.querySelector('.form-data');
|
||||||
|
const region = document.querySelector('.region-name');
|
||||||
|
const apiKey = document.querySelector('.api-key');
|
||||||
|
|
||||||
|
// 結果
|
||||||
|
const errors = document.querySelector('.errors');
|
||||||
|
const loading = document.querySelector('.loading');
|
||||||
|
const results = document.querySelector('.result-container');
|
||||||
|
const usage = document.querySelector('.carbon-usage');
|
||||||
|
const fossilfuel = document.querySelector('.fossil-fuel');
|
||||||
|
const myregion = document.querySelector('.my-region');
|
||||||
|
const clearBtn = document.querySelector('.clear-btn');
|
||||||
|
```
|
||||||
|
|
||||||
|
前のレッスンで HTML で設定したように、これらのフィールドはすべてその CSS クラスによって参照されます。
|
||||||
|
|
||||||
|
### リスナーの追加
|
||||||
|
|
||||||
|
次に、フォームにイベントリスナーを追加し、フォームをリセットするクリアボタンを追加します。ユーザーがフォームを送信したり、リセットボタンをクリックしたりした場合に、そのリセットボタンをクリックするようにします。何かが起こるときのため、ファイルの一番下にアプリを初期化するための呼び出しを追加します。
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
form.addEventListener('submit', (e) => handleSubmit(e));
|
||||||
|
clearBtn.addEventListener('click', (e) => reset(e));
|
||||||
|
init();
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ 投稿やクリックのイベントをリッスンするために使用される速記法と、そのイベントがどのように handleSubmit や reset 関数に渡されるかに注目してください。この速記法と同等のものを、より長い形式で書くことができますか? どちらがいいですか?
|
||||||
|
|
||||||
|
### init() 関数と reset() 関数のビルド
|
||||||
|
|
||||||
|
今度は拡張機能を初期化する関数を作ります。これは init() と呼ばれています。
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
function init() {
|
||||||
|
//何かがローカルストレージにある場合は、それをピックアップします。
|
||||||
|
const storedApiKey = localStorage.getItem('apiKey');
|
||||||
|
const storedRegion = localStorage.getItem('regionName');
|
||||||
|
|
||||||
|
//アイコンを一般的な緑色に設定
|
||||||
|
//todo
|
||||||
|
|
||||||
|
if (storedApiKey === null || storedRegion === null) {
|
||||||
|
//キーを持っていない場合は、フォームを表示します。
|
||||||
|
form.style.display = 'block';
|
||||||
|
results.style.display = 'none';
|
||||||
|
loading.style.display = 'none';
|
||||||
|
clearBtn.style.display = 'none';
|
||||||
|
errors.textContent = '';
|
||||||
|
} else {
|
||||||
|
//ローカルストレージにキー/領域を保存している場合、そのキー/領域がロードされたときに結果を表示します。
|
||||||
|
displayCarbonUsage(storedApiKey, storedRegion);
|
||||||
|
results.style.display = 'none';
|
||||||
|
form.style.display = 'none';
|
||||||
|
clearBtn.style.display = 'block';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function reset(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
//リージョン専用のローカルストレージをクリアします。
|
||||||
|
localStorage.removeItem('regionName');
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
この関数には、面白いロジックがあります。これを読み進めていくと、何が起こるかわかりますか?
|
||||||
|
|
||||||
|
- 2つの `const` は、ユーザが API キーとリージョンコードをローカルストレージに保存しているかどうかをチェックするために設定されます
|
||||||
|
- どちらかが null の場合、フォームのスタイルを 'block' として表示するように変更してフォームを表示します
|
||||||
|
- 結果、読み込み、および clearBtn を非表示にし、エラーテキストを空の文字列に設定します
|
||||||
|
- キーとリージョンが存在する場合は、そのためのルーチンを開始します
|
||||||
|
- API を呼び出して炭素使用量のデータを取得します
|
||||||
|
- 結果領域を非表示にします
|
||||||
|
- フォームを非表示にします
|
||||||
|
- リセットボタンを表示します
|
||||||
|
|
||||||
|
先に進む前に、ブラウザで利用できる非常に重要な概念を知っておくと便利です。それは [ローカルストレージ](https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage) です。ローカルストレージは文字列を `key-value` のペアとしてブラウザに保存する便利な方法です。このタイプの Web ストレージは JavaScript で操作することができ、ブラウザでデータを管理することができます。ローカルストレージは有効期限がありませんが、もう一つの種類の Web ストレージであるセッションストレージはブラウザを閉じると消去されます。様々なタイプのストレージには、その使用方法に長所と短所があります。
|
||||||
|
|
||||||
|
> 注意 - ブラウザ拡張機能は独自のローカルストレージを持っています。メインのブラウザウィンドウは別のインスタンスであり、別々に動作します。
|
||||||
|
|
||||||
|
API キーに文字列の値を設定して、例えば Edge では Web ページを「検査」して (ブラウザを右クリックして検査することができます)、「アプリケーション」タブに行ってストレージを確認することで設定されていることがわかります。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
✅ ローカルストレージにデータを保存したくない状況を考えてみてください。一般的に、API キーをローカルストレージに置くのは悪い考えです! 理由がわかりますか? 私たちの場合、アプリは純粋に学習用であり、アプリストアにはデプロイされないので、このメソッドを使用します。
|
||||||
|
|
||||||
|
ローカルストレージを操作するには、`getItem()`, `setItem()`, `removeItem()` のいずれかの方法で Web API を使用することに注意してください。これはブラウザ全体で広くサポートされています。
|
||||||
|
|
||||||
|
`init()` で呼び出される `displayCarbonUsage()` 関数を構築する前に、フォームの初期投稿を処理する機能を構築しましょう。
|
||||||
|
|
||||||
|
### フォーム送信の処理
|
||||||
|
|
||||||
|
イベント引数 `(e)` を受け取る関数 `handleSubmit` を作成します。イベントの伝播を停止し (この場合、ブラウザの更新を停止したい)、新しい関数 `setUpUser` を呼び出し、引数 `apiKey.value` と `region.value` を渡します。このようにして、適切なフィールドが入力されたときに初期フォームから取得される2つの値を利用します。
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
function handleSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
setUpUser(apiKey.value, region.value);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
✅ 記憶をリフレッシュしてください - 前回のレッスンで設定した HTML には、ファイルの先頭に設定した `const` で `values` が取得される2つの入力フィールドがあり、両方とも `required` であるため、ブラウザはユーザが null 値を入力しないようにします。
|
||||||
|
|
||||||
|
### ユーザーの設定
|
||||||
|
|
||||||
|
次に `setUpUser` 関数に進み、ここで apiKey と regionName のローカルストレージの値を設定します。新しい関数を追加します。
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
function setUpUser(apiKey, regionName) {
|
||||||
|
localStorage.setItem('apiKey', apiKey);
|
||||||
|
localStorage.setItem('regionName', regionName);
|
||||||
|
loading.style.display = 'block';
|
||||||
|
errors.textContent = '';
|
||||||
|
clearBtn.style.display = 'block';
|
||||||
|
//初期化の呼び出し
|
||||||
|
displayCarbonUsage(apiKey, regionName);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
この関数は、API が呼び出されている間に表示するローディングメッセージを設定します。この時点で、このブラウザ拡張機能の最も重要な機能の作成に到達しました!
|
||||||
|
|
||||||
|
### 炭素使用量の表示
|
||||||
|
|
||||||
|
ついに API に問い合わせをする時が来ました!
|
||||||
|
|
||||||
|
先に進む前に、API について説明しましょう。API ([Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html)) は、Web 開発者のツールボックスの重要な要素です。API は、プログラムが相互作用し、相互にインターフェースするための標準的な方法を提供します。例えば、データベースへの問い合わせが必要な Web サイトを構築している場合、誰かが API を作成しているかもしれません。API には多くの種類がありますが、最も人気のあるものの一つが [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/) です。
|
||||||
|
|
||||||
|
✅ 'REST' とは 'Representational State Transfer' の略で、様々な設定の URL を使ってデータを取得するのが特徴です。開発者が利用できる様々なタイプの API について少し調べてみてください。どのような形式に興味がありますか?
|
||||||
|
|
||||||
|
この関数には注意すべき重要な点があります。まず、[`async` キーワード](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function)に注目してください。非同期的に実行されるように関数を書くということは、データが返されるなどのアクションが完了するのを待ってから続行するということです。
|
||||||
|
|
||||||
|
以下は `async` についての簡単なビデオです:
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
|
||||||
|
|
||||||
|
C02Signal API に問い合わせを行うための新しい関数を作成します:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
import axios from '../node_modules/axios';
|
||||||
|
|
||||||
|
async function displayCarbonUsage(apiKey, region) {
|
||||||
|
try {
|
||||||
|
await axios
|
||||||
|
.get('https://api.co2signal.com/v1/latest', {
|
||||||
|
params: {
|
||||||
|
countryCode: region,
|
||||||
|
},
|
||||||
|
headers: {
|
||||||
|
'auth-token': apiKey,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
let CO2 = Math.floor(response.data.data.carbonIntensity);
|
||||||
|
|
||||||
|
//calculateColor(CO2);
|
||||||
|
|
||||||
|
loading.style.display = 'none';
|
||||||
|
form.style.display = 'none';
|
||||||
|
myregion.textContent = region;
|
||||||
|
usage.textContent =
|
||||||
|
Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
|
||||||
|
fossilfuel.textContent =
|
||||||
|
response.data.data.fossilFuelPercentage.toFixed(2) +
|
||||||
|
'% (percentage of fossil fuels used to generate electricity)';
|
||||||
|
results.style.display = 'block';
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
loading.style.display = 'none';
|
||||||
|
results.style.display = 'none';
|
||||||
|
errors.textContent = 'Sorry, we have no data for the region you have requested.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
これは大きな機能です。何が起こっているのでしょうか?
|
||||||
|
|
||||||
|
- ベストプラクティスに従って、この関数を非同期的に動作させるために `async` キーワードを使用します。API がデータを返すときにプロミスを返すので、この関数には `try/catch` ブロックが含まれています。API が応答する速度を制御できないので (全く応答しないかもしれません!)、非同期的に呼び出すことでこの不確実性を処理する必要があります
|
||||||
|
- co2signal API に問い合わせをして、API キーを使用してリージョンのデータを取得しています。そのキーを使用するには、ヘッダのパラメータで認証の種類を使用しなければなりません
|
||||||
|
- API が応答したら、その応答データの様々な要素を、このデータを表示するために設定した画面の部分に割り当てます
|
||||||
|
- エラーがあったり、結果が出なかったりすると、エラーメッセージが表示されます
|
||||||
|
|
||||||
|
✅ 非同期プログラミングパターンを使用することも、ツールボックスの中で非常に便利なツールです。このタイプのコードを設定するための[様々な方法について](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function)お読みください。
|
||||||
|
|
||||||
|
おめでとうございます! 拡張機能をビルド (`npm run build`) して、拡張機能ペインで更新すると、拡張機能が動作するようになりました! 動作していないのはアイコンだけで、次のレッスンで修正します。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 チャレンジ
|
||||||
|
|
||||||
|
これらのレッスンでは、これまでにいくつかの種類の API について説明してきました。Web API を選択して、その API が提供しているものを詳しく調べてみましょう。例えば、[HTML ドラッグ＆ドロップ API](https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API) のようなブラウザ内で利用できる API を見てみましょう。あなたの意見では、何が素晴らしい API を作るのでしょうか?
|
||||||
|
|
||||||
|
## レッスン後の小テスト
|
||||||
|
|
||||||
|
[レッスン後の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/26)
|
||||||
|
|
||||||
|
## 復習と自己学習
|
||||||
|
|
||||||
|
このレッスンではローカルストレージと API について学びましたが、どちらもプロの Web 開発者にとって非常に有用なものです。この2つがどのように連携しているか考えてみましたか? API で使用するアイテムを保存する Web サイトをどのように構築するか考えてみてください。
|
||||||
|
|
||||||
|
## 課題
|
||||||
|
|
||||||
|
[API を採用する](assignment.ja.md)
|
||||||
|
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# API を採用する
|
||||||
|
|
||||||
|
## 説明書
|
||||||
|
|
||||||
|
API はとても楽しく遊べます。ここでは、[多くの無料のもののリスト](https://github.com/public-apis/public-apis)を紹介します。API を選んで、問題を解決するブラウザ拡張機能を構築してください。それは、ペットの写真が十分にないという小さな問題 (だから、[dog CEO API](https://dog.ceo/dog-api/) を試してみてください) であっても、何か大きな問題であっても構いません - 楽しんでください!
|
||||||
|
|
||||||
|
## ルーブリック
|
||||||
|
|
||||||
|
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||||
|
| -------- | -------------------------------------------------------------------------- | ---------------------------------------- | ----------------------- |
|
||||||
|
| | 完全なブラウザ拡張機能は、上記のリストの API を使用して送信されます。 | ブラウザの拡張機能の一部を提出 | 投稿にはバグがある |
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
# パフォーマンスのためにサイトを分析する
|
||||||
|
|
||||||
|
Web サイトの詳細なレポートを提供し、パフォーマンスに問題がある領域を示します。サイトの速度が遅い理由と、速度を上げるために何ができるかを分析します。ブラウザツールだけに頼るのではなく、レポートに役立つ他のツールについても調査しましょう。
|
||||||
|
|
||||||
|
## ルーブリック
|
||||||
|
|
||||||
|
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||||
|
| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
|
||||||
|
| | レポートは、ブラウザツールだけでなく、サードパーティのツールが利用可能な場合は、サードパーティのツールから詳細を引き出して表示されます。 | 基本報告書を掲載しました | 最小限の報告書が提示される |
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
# カーボントリガーブラウザ拡張機能： 完成したコード
|
||||||
|
|
||||||
|
tmrow の C02 シグナル API を使用して電力使用量を追跡するために、あなたの地域の電力使用量がどれだけ多いかをブラウザ上でリマインダーとして表示できるようにブラウザ拡張機能を構築します。この拡張機能をアドホックに使用することで、この情報に基づいてあなたの活動を判断することができます。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## はじめに
|
||||||
|
|
||||||
|
[npm](https://npmjs.com) がインストールされている必要があります。このコードのコピーをコンピュータ上のフォルダにダウンロードしてください。
|
||||||
|
|
||||||
|
必要なパッケージをすべてインストールします。
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
webpack から拡張機能をビルドします。
|
||||||
|
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Edge にインストールするには、ブラウザの右上にある「3つのドット」メニューから「拡張機能」パネルを見つけます。そこから「Load Unpacked」を選択して、新しい拡張機能をロードします。プロンプトで「dist」フォルダを開くと、拡張機能が読み込まれます。使用するには、CO2 シグナル API の API キー ([get one here via email](https://www.co2signal.com/) - このページのボックスにメールを入力してください) と、[Electricity Map](https://www.electricitymap.org/map) に対応する [code for your region](http://api.electricitymap.org/v3/zones) が必要です (ボストンでは、例えば、'US-NEISO' を使用しています)。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
API キーと地域を拡張インターフェイスに入力すると、ブラウザの拡張バーに表示される色付きのドットが変化し、あなたの地域のエネルギー使用量を反映して、どのようなエネルギーを必要とする活動を行うのが適切なのかを示してくれます。この「ドット」システムのコンセプトは、カリフォルニア州の排出量のための [Energy Lollipop extension](https://energylollipop.com/) が私に与えてくれたものです。
|
||||||
|
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
# カーボントリガーブラウザ拡張機能： スターターコード
|
||||||
|
|
||||||
|
tmrow の C02 シグナル API を使用して電力使用量を追跡するために、あなたの地域の電力使用量がどれだけ多いかをブラウザ上でリマインダーとして表示できるようにブラウザ拡張機能を構築します。この拡張機能をアドホックに使用することで、この情報に基づいてあなたの活動を判断することができます。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## はじめに
|
||||||
|
|
||||||
|
[npm](https://npmjs.com) がインストールされている必要があります。このコードのコピーをコンピュータ上のフォルダにダウンロードしてください。
|
||||||
|
|
||||||
|
必要なパッケージをすべてインストールします。
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
webpack から拡張機能をビルドします。
|
||||||
|
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Edge にインストールするには、ブラウザの右上にある「3つのドット」メニューから「拡張機能」パネルを見つけます。そこから「Load Unpacked」を選択して、新しい拡張機能をロードします。プロンプトで「dist」フォルダを開くと、拡張機能が読み込まれます。使用するには、CO2 シグナル API の API キー ([get one here via email](https://www.co2signal.com/) - このページのボックスにメールを入力してください) と、[Electricity Map](https://www.electricitymap.org/map) に対応する [code for your region](http://api.electricitymap.org/v3/zones) が必要です (ボストンでは、例えば、'US-NEISO' を使用しています)。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
API キーと地域を拡張インターフェイスに入力すると、ブラウザの拡張バーに表示される色付きのドットが変化し、あなたの地域のエネルギー使用量を反映して、どのようなエネルギーを必要とする活動を行うのが適切なのかを示してくれます。この「ドット」システムのコンセプトは、カリフォルニア州の排出量のための [Energy Lollipop extension](https://energylollipop.com/) が私に与えてくれたものです。
|
||||||
|
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
# ブラウザ拡張機能の構築
|
||||||
|
|
||||||
|
ブラウザ拡張機能を構築することは、異なるタイプの Web 資産を構築しながら、アプリのパフォーマンスについて考えることができる、楽しくて興味深い方法です。このモジュールでは、ブラウザの仕組みやブラウザ拡張機能の展開方法、フォームの構築方法、API の呼び出し方、ローカルストレージの使用方法、Web サイトのパフォーマンスを測定して改善する方法などのレッスンが含まれています。
|
||||||
|
|
||||||
|
Edge、Chrome、Firefox で動作するブラウザ拡張機能を構築します。この拡張機能は、非常に特定のタスクに合わせたミニ Web サイトのようなもので、[C02 Signal API](https://www.co2signal.com) を使って、指定された地域の電力使用量と炭素強度をチェックし、その地域のカーボンフットプリントの読み取り値を返します。
|
||||||
|
|
||||||
|
この拡張機能は、API キーと地域コードがフォームに入力されると、ユーザーがアドホックに呼び出すことができ、地域の電力使用量を決定し、それによってユーザーの電力決定に影響を与えるデータを提供することができます。例えば、地域の電力使用量が多い時期には、衣類乾燥機の運転を遅らせることが望ましいかもしれません。
|
||||||
|
|
||||||
|
### トピック
|
||||||
|
|
||||||
|
1. [ブラウザについて](1-about-browsers/translations/README.ja.md)
|
||||||
|
2. [フォームとローカルストレージ](2-forms-browsers-local-storage/translations/README.ja.md)
|
||||||
|
3. [バックグラウンドタスクとパフォーマンス](3-background-tasks-and-performance/translations/README.ja.md)
|
||||||
|
|
||||||
|
### クレジット
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## クレジット
|
||||||
|
|
||||||
|
この Web カーボントリガーのアイデアは、Microsoft のグリーンクラウドアドボカシーチームのリーダーであり、[グリーンプリンシプル](https://principles.green/) の著者でもある Asim Hussain 氏によって提供されました。もともとは [Web サイトプロジェクト](https://github.com/jlooper/green) でした。
|
||||||
|
|
||||||
|
ブラウザ拡張の構造は [Adebola Adeniran の COVID 拡張機能](https://github.com/onedebos/covtension) の影響を受けています。
|
||||||
|
|
||||||
|
「ドット」アイコンシステムのコンセプトは、カリフォルニア州の排出量のためのブラウザ拡張機能 [Energy Lollipop](https://energylollipop.com/) のアイコン構造によって提案されました。
|
||||||
|
|
||||||
|
These lessons were written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
|
||||||
|
|
||||||
Loading…
Reference in new issue