mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-08-21 05:52:23 +02:00
日本語訳ファイルの修正
This commit is contained in:
ナモすけ
@@ -65,7 +65,7 @@
|
||||
|
||||
- [API キー](https://www.co2signal.com/); このページのボックスにメールアドレスを入力します
|
||||
- [電力地図](https://www.electricitymap.org/map) に対応する地域のコード (例えばボストンでは 'US-NEISO' を使用しています)
|
||||
- [スターターコード](../../start)。`start`フォルダをダウンロードしてください。このフォルダでコードを完成させることになります。
|
||||
- [スターターコード](/5-browser-extension/start/translations/README.ja)。`start`フォルダをダウンロードしてください。このフォルダでコードを完成させることになります。
|
||||
- [NPM](https://www.npmjs.com) - NPM はパッケージ管理ツールです。ローカルにインストールすると、`package.json` ファイルに記載されているパッケージがインストールされ、Web アセットで使用されます。
|
||||
|
||||
✅ この[優れた Learn モジュール](https://docs.microsoft.com/ja-jp/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)では、パッケージ管理の詳細を学ぶことができます。
|
||||
|
||||
@@ -12,11 +12,11 @@
|
||||
|
||||
### 拡張機能で操作する要素の設定:
|
||||
|
||||
この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `<div>` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](.../.../1-about-browsers/translations/README.ja.md) を参照してください。
|
||||
この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `<div>` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](/5-browser-extension/1-about-browsers/translations/README.ja) を参照してください。
|
||||
|
||||
`index.js` ファイルの中で作業を行うには、様々なフィールドに関連付けられた値を保持するための `const` 変数を作成することから始めます。
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
// フォームフィールド
|
||||
const form = document.querySelector('.form-data');
|
||||
const region = document.querySelector('.region-name');
|
||||
@@ -38,7 +38,7 @@ const clearBtn = document.querySelector('.clear-btn');
|
||||
|
||||
次に、フォームにイベントリスナーを追加し、フォームをリセットするクリアボタンを追加します。ユーザーがフォームを送信したり、リセットボタンをクリックしたりした場合に、そのリセットボタンをクリックするようにします。何かが起こるときのため、ファイルの一番下にアプリを初期化するための呼び出しを追加します。
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
form.addEventListener('submit', (e) => handleSubmit(e));
|
||||
clearBtn.addEventListener('click', (e) => reset(e));
|
||||
init();
|
||||
@@ -50,7 +50,7 @@ init();
|
||||
|
||||
今度は拡張機能を初期化する関数を作ります。これは init() と呼ばれています。
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
function init() {
|
||||
//何かがローカルストレージにある場合は、それをピックアップします。
|
||||
const storedApiKey = localStorage.getItem('apiKey');
|
||||
@@ -112,7 +112,7 @@ API キーに文字列の値を設定して、例えば Edge では Web ペー
|
||||
|
||||
イベント引数 `(e)` を受け取る関数 `handleSubmit` を作成します。イベントの伝播を停止し (この場合、ブラウザの更新を停止したい)、新しい関数 `setUpUser` を呼び出し、引数 `apiKey.value` と `region.value` を渡します。このようにして、適切なフィールドが入力されたときに初期フォームから取得される2つの値を利用します。
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setUpUser(apiKey.value, region.value);
|
||||
@@ -124,7 +124,7 @@ function handleSubmit(e) {
|
||||
|
||||
次に `setUpUser` 関数に進み、ここで apiKey と regionName のローカルストレージの値を設定します。新しい関数を追加します。
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
function setUpUser(apiKey, regionName) {
|
||||
localStorage.setItem('apiKey', apiKey);
|
||||
localStorage.setItem('regionName', regionName);
|
||||
@@ -153,7 +153,7 @@ function setUpUser(apiKey, regionName) {
|
||||
|
||||
C02Signal API に問い合わせを行うための新しい関数を作成します:
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
import axios from '../node_modules/axios';
|
||||
|
||||
async function displayCarbonUsage(apiKey, region) {
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
|
||||
`src/index.js` の中で作業し、`calculateColor()` という関数を、DOM にアクセスするために設定した一連の変数 `const` の後に追加します。
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
function calculateColor(value) {
|
||||
let co2Scale = [0, 150, 600, 750, 800];
|
||||
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
||||
@@ -93,7 +93,7 @@ chrome.runtime には、あらゆる種類のバックグラウンドタスク
|
||||
|
||||
ここで、`init()` 関数の中で、アイコンをジェネリックグリーンに設定して、chrome の `updateIcon` アクションを再度呼び出して起動します。
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'updateIcon',
|
||||
value: {
|
||||
@@ -105,14 +105,14 @@ chrome.runtime.sendMessage({
|
||||
|
||||
次に、C02Signal API が返すプロミスに追加して、先ほど作成した関数を呼び出します。
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
//let CO2...
|
||||
calculateColor(CO2);
|
||||
```
|
||||
|
||||
最後に、`/dist/background.js` で、これらのバックグラウンドアクションの呼び出し用のリスナーを追加します。
|
||||
|
||||
```JavaScript
|
||||
```javascript
|
||||
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||
if (msg.action === 'updateIcon') {
|
||||
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
# カーボントリガーブラウザ拡張機能： スターターコード
|
||||
|
||||
**ローカルフォルダのWeb-Dev-For-Beginners/5-browser-extension/startをご覧ください**
|
||||
|
||||
tmrow の C02 シグナル API を使用して電力使用量を追跡するために、あなたの地域の電力使用量がどれだけ多いかをブラウザ上でリマインダーとして表示できるようにブラウザ拡張機能を構築します。この拡張機能をアドホックに使用することで、この情報に基づいてあなたの活動を判断することができます。
|
||||
|
||||
|
||||
|
||||
@@ -8,13 +8,13 @@ Edge、Chrome、Firefox で動作するブラウザ拡張機能を構築しま
|
||||
|
||||
### トピック
|
||||
|
||||
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)
|
||||
1. [ブラウザのすべて](../1-about-browsers/translations/README.ja.md)
|
||||
2. [API の呼び出し、ローカルストレージの使用](../2-forms-browsers-local-storage/translations/README.ja.md)
|
||||
3. [バックグラウンドタスクとパフォーマンスについて学ぶ](../3-background-tasks-and-performance/translations/README.ja.md)
|
||||
|
||||
### クレジット
|
||||
|
||||
|
||||
|
||||
|
||||
## クレジット
|
||||
|
||||
|
||||
Reference in New Issue
Block a user