はじめに
「Web Development For Beginners」というMicrosoftがGithubに公開している教材についての記事です。
https://github.com/microsoft/Web-Dev-For-Beginners microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/3-accessibility より 各レッスンに以下の要素が含まれます。 チャレンジ〜は調べ物や課題をこなします。 教材の紹介・選んだ理由など
この教材を選んだ理由
+α 実際に取り組んで感じたこと
flexbox の扱いについて学べるサイトです。超わかりやすいです。
translationsというフォルダに日本語訳があります。
教材の概要
課題については必要だと思ったものだけやりました。
教材の構成
取り組む際に気をつけたこと
〜②JavaScript基礎まで【導入/アクセシビリティ/JavaScript の基礎】
③テラリウム構築 【HTML・CSS基礎/DOM操作/クロージャ】
④タイピングゲーム 【JavaScriptのイベント処理】
⑤-1ブラウザ拡張機能 【ブラウザの仕組み/拡張機能作成の導入】 本記事
⑤-2ブラウザ拡張機能 【API/LocalStorage/BackGround/Performance】
⑥スペースシューティングゲーム 【ゲーム開発の基礎/Pub-Sub/Canvas/衝突検出】
⑦-1銀行プロジェクト【SPA//HTMLフォーム】
⑦-2銀行プロジェクト【ログイン/データ管理/状態管理】
記事の目的
- 学習のアウトプット
- 教材を使ってみたところかなり良かったので、その紹介
注意点
自身の学習のアウトプットがメインなので、理解できているところ(他言語と共通の箇所など)は省いています。
また、課題やtipsについても結構省きます。
この教材に興味を持った方はぜひご自分で取り組んでみてください。
5-Browser-extension
指定された地域のカーボンフットプリントを表示するブラウザ拡張機能を作っていきます。
その過程でブラウザの仕組みやフォームの構築方法、APIの呼び出し、ローカルストレージの使用方法などについて学びます。
https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension より
学習の目的
- ブラウザの仕組み、歴史、ブラウザ拡張機能の最初の要素の足場の作り方を学ぶ
- ローカルストレージに格納された変数を使用してAPIを呼び出すためのブラウザ拡張機能のJavaScript 要素を構築する
- ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理する
- Webのパフォーマンスと最適化について学ぶ
ブラウザの全て
ブラウザ拡張機能を作って見る前に、ブラウザがどのように動くのか学んでみましょう！という感じのノリです。
このレッスンをやる前の知識としては↓が何となく分かるくらいです。
- クライアント/サーバ
- IPアドレス/MACアドレスとか、名前解決でやっていることの概要
- RESTの概要
- Cookie/ローカルストレージ/Session
- APIの概要
- HTTPS、SSL/TLSの概要
ブラウザについて
https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension/1-about-browsers より
このイラストがすごくわかりやすかったので内容について説明があるのかとワクワクしていたのですが、特に説明はなかったです・・・
なので、構成要素について自分で調べました。
ざっくりとした処理の流れ
上のイラストにおいて、ユーザがURLを入力してからWebページが表示されるまでの流れはざっくりと以下のようになります。
- ユーザ(クライアント)がURLを入力して何かを検索
- DNSを利用して名前解決を行い、IPアドレスを得る
- TCPによるコネクションの確立
- HTTP>GETリクエストを発行
- サーバからレスポンスとしてステータスコード/ファイルなどを受け取る
- ブラウザが受け取ったファイル(HTML/CSS/JS)を解釈し、表示する
各要素を見ていく
ドメイン名からIPアドレスを調べる際の流れ ネームサーバ キャッシュDNSサーバ DNS
ルートサーバに対して、検索したいドメインのトップレベルドメイン(TLD)を管理するDNSサーバの場所を問い合わせる
→次にTLDサーバにセカンドレベルドメイン（SLD）を管理するDNSサーバの場所を問い合わせる・・・
という手順を繰り返す。
権威DNSサーバ/コンテンツDNSサーバとも呼ばれる。
ドメインとIPアドレスを紐付ける台帳を持ったサーバ。
主な役割は、名前解決要求に対して自身が持つ情報を基に名前解決結果を返すこと。
フルリゾルバとも呼ばれる。
PCからの名前解決要求（このドメインのIPアドレスは何？）をとりまとめる。
ISP
Internet Service Provider のこと。
インターネット接続サービスを提供する事業者。
IPアドレス情報を確認して、データをどのルートを通して転送すべきかを判断するルート選択機能を持つ。 Router
データを2つ以上の異なるネットワーク間に中継する通信機器。
TCPにおいて、通信の信頼性を確認するために実施される手法。 1．送信元が通信路を確保するため、相手にデータ転送の許可要求を出す。（SYN） ３−way Hanshake
SYN = synchronize
ACK = acknowledge
2．宛先側が許可を送信元に知らせると同時に受信側も許可要求を出す。（ACK + SYN）
3.最初にSYNを送った送信元も宛先側に許可を出す。（ACK）
HTTP HTTPリクエストメソッド など。 HTTPレスポンス HTTPリクエスト/レスポンス
リソースに対して実行するアクション。
MDN - HTTPリクエストメソッド
特定のHTTPリクエストが正常に終了したか示す。
ドキュメントの解析とは、ドキュメントを意味のある構造（コード内で解釈し、使用できる形式）に変換することです。解析結果は通常、ドキュメントの構造を表すノードのツリーになります。これを「解析ツリー」または「構文ツリー」といいます。 Parse
Parse : 解析
ブラウザの主な構造
HTML/CSSの解析〜表示について
参考
↑のサイトは少し古めですが、かなり詳しく解説されているのでおすすめです。
ブラウザを作ってみるような記事もいくつか有りました。いずれやりたい。
HTMLの解析
- トークナイザー(またはレキサー)によりトークン(開始タグ、終了タグ、属性名、属性値など)に分割する
- 言語の構文ルールに従ってドキュメントの構造を分析し、解析ツリーを構築する
トークンとは、ここでは最小の構成単位のことを指すのだと思います。
トークンとは、証拠、記念品、代用貨幣、引換券、商品券などの意味を持つ英単語。ITの分野では、長いデータを最小の構成単位に分解したものや、何かの証や印になるようなデータや装置、器具などのことをトークンということが多い。
トークン - IT用語辞典
解析ツリー = DOMツリーです。
生成される「解析ツリー」は DOM 要素と属性のノードのツリーです。DOM は「Document Object Model」の略で、HTML ドキュメントや、HTML 要素と JavaScript などの外部世界とのインターフェースをオブジェクトで表現したものです。ツリーのルートは「Document」オブジェクトです。
DOM とマークアップはほぼ 1 対 1 の関係になっています。たとえば、次のようなマークアップがある場合、<html> <body> <p> Hello World </p> <div> <img src="example.png"/></div> </body> </html>次のような DOM ツリーに変換されます。
https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork より
パーサーがトークナイザーにトークンを要求
→構文ルールと一致すればそのトークンに対応するノードが解析ツリーに追加される
→別のトークンを要求
という流れで解析されていきます。
CSS
解析され、CSS Object Modelに変換されます。
参考になりそう → ブラウザの仕組み - CSSの解析
Java Script
JSも解析されます。
ただし、JSが読み込まれた時点でHTMLの解析を中断してJSの解析が開始されます。
また、JSがまだ読み込まれていないスタイルシートの影響を受けそうな特定のスタイルプロパティにアクセスした場合、JSはブロックされます。
参考になりそう → JavaScriptがブラウザでどのように動くのか - mercari engineering
レイアウト
レンダラー（レンダーツリー内の要素）を作成してツリーに追加したとき、それらには位置やサイズがありません。
これらの値を計算することを「レイアウト」または「リフロー」といいます。
解析〜表示の流れ
- HTML/CSS/JavaScriptに対して↑の処理を行う
- DOMツリー、CSSOMツリーからレンダーツリー(視覚的な要素を表示順に並べたツリー)を生成。
- レイアウト（もしくはリフロー）処理によりレンダーツリー内の要素に正確な位置や座標を割り当て
- 画面に描画する
イラストの再掲
https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension/1-about-browsers より
ここまででおおよそこのイラストの構成要素が理解できました。
トピック
- ブラウザとは何か？
- エンドユーザーがサーバーからコンテンツにアクセスしてWebページを表示することを可能にするアプリケーション。
- 最初のブラウザは
Sir Timothy Berners-Leeによって1990年に作られたWorldWideWeb- 画像は扱えず、文字だけの文章同士をリンクでたどりながら閲覧できるソフトだった。
- ブラウザは通常、Webコンテンツをキャッシュする機能を持つ。これは毎回サーバからデータを受け取らなくても良いようにするため。
- ユーザアクティビティの記録はCookiesに残される。
- ブラウザは全て少しずつ違う。それぞれ長所/短所があるため、複数のブラウザで正しく動作するようなWebページの作り方を学ぶことが大切。
- https://caniuse.com/ を使うとどのブラウザに何が対応しているか調べることが出来るのでとても便利。
ブラウザ拡張機能
ブラウザ拡張機能は繰り返し行うことが多い作業に素早くアクセスしたいときなどに便利。例えば色のチェック、パスワードの管理など。
拡張機能作成に必要な要素
スタート時点のフォルダ構成は以下。
- dist
- manifest.json
- index.html (HTML)
- background.js (バックグラウンドのJavaScript)
- main.js (ビルド後のJavaScript)
- src
- index.js (ビルド前のJavaScript、自分が編集する)
ウェブアプリマニフェストは、プログレッシブウェブアプリ (PWA) と呼ばれる一連のウェブ技術の一部であり、アプリストアを通さずに端末のホーム画面にインストールすることができるものです。単純なホーム画面リンクやブックマークを持つ通常のウェブアプリとは異なり、 PWA は事前にダウンロードしてオフラインでも動作するだけでなく、通常の Web API を使用することもできます。 ウェブアプリマニフェストは、ウェブアプリケーションについて、ウェブアプリをダウンロードしたり、ユーザーにネイティブアプリと同じように見せる（例えば、端末のホーム画面にインストールされ、ユーザーに素早いアクセスと豊かな操作性を提供するなどの）ために必要なの情報を JSON テキストファイルで提供します。 PWA のマニフェストには、その名前、作者、アイコン、バージョン、説明、および (他のものの中で特に) 必要なすべてのリソースのリストが含まれています。manifest.json is 何
{
"manifest_version": 2,
"name": "My Carbon Trigger",
"version": "0.1.0",
"permissions": ["<all_urls>"],
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_popup": "index.html"
}
}
HTMLの構築
APIキーとリージョンコードの確認、地域の二酸化炭素消費量表示が出来るようにしていきます。
<!--form area-->
<div>
<h2>New? Add your information</h2>
</div>
<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>
<!--result area-->
<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>
- ローディング/エラー/データなどのクラスはおそらく状態に応じてレイアウトを変更するために使う。
-
MDN - autocomplete
- ユーザの入力支援(自動で候補が表示される機能)
-
onで補完ON、nameで氏名、など
-
MDN - required
- 入力必須パラメータ
-
要素と同一の文書内にあるラベル付け可能フォーム関連要素の id。文書中の for 属性の値と合致する id を持つ最初の要素がラベル付け可能な要素であれば、このラベル要素の示すラベル付きコントロールとなります。ラベル付け可能要素でなければ、 for 属性は効果がありません。一致する id 値を持つ他の要素が文書内のその後にあったとしても、考慮されません。
- idが同じラベル付け可能要素があればその要素と関連付けられる。
-
ラベル付け可能要素は
<button>,<input>,<keygen>,<meter>,<output>,<progress>,<select>,<textarea>。
拡張機能のビルド&デプロイ(Chromeの場合)
-
npm installで必要なパッケージをインストール(package.jsonを参照してインストールしてくれる。) -
npm run buildでsrcをビルド - 設定 > 拡張機能 にアクセス
- 「パッケージ化されていない拡張機能を読み込む」を選択
- dstフォルダを選択
- 以降、変更を反映させたい場合は「更新」を押下する。
デプロイ結果
動作も問題なさそう。
課題
-
インストールした拡張機能のソースコードを見てみる
- 普通に見れちゃうんですね。実装の参考的な意味ではありがたいんですが、パクリなどの問題は大丈夫なんでしょうか。
- ブラウザ拡張機能のソースコードを確認する
- Chrome拡張機能のソースコードを見る方法
-
ブラウザの歴史を学んでみる
- 今やすっかり邪魔者扱いのIEも覇権を取っていた時期があると思うと何とも言えない気分になりますね・・・
- The History of Web Browsers
- History of the Web
- An interview with Tim Berners-Lee
- 20年以上にわたるWebブラウザーのシェア推移を可視化したムービーが面白い
学んだこと
- ブラウザの仕組み、構造などの概要
- Webページが読み込まれる時に起きていることの概要
-
autocompleterequiredなど - パッケージ化していない状態で拡張機能のデプロイ