- 投稿日：2021-10-26T21:44:22+09:00
【Vue.js】監視プロパティ（ウォッチャ）の基本
はじめに こんにちは！ 今回は【Vue.js】監視プロパティ（ウォッチャ）の基本についてアウトプットしていきます！ 監視プロパティとは 監視プロパティとは、特定のデータまたは、算出プロパティの状態を監視して変化があったときに登録した処理を自動的に実行できるものです。 書き方・解説 HTML <div id="app"> <p> {{ message }} </p> <p> <input type="text" v-model:value="message"> </p> <pre>{{ $data }}</pre> <!-- ⏫変更された内容がわかるように記述しておきます。 --> </div> Vue.js var app = new Vue({ el: "#app", data: { message: 'Hello Vue.js!' }, watch: { //⏫監視プロパティ（ウォッチャ） message: function(newValue, oldValue){ //⏫新しい値 ⏫変更前の値 console.log('new: %s , old: %s' , newValue,oldValue) //⏫newValue,⏫oldValueがコンソールされる。 } } }) 監視プロパティ（ウォッチャ）watchを定義し、`dataのmessage`の値に変更があったらconsoleにlogに新しい値と変更前の値を表示するプログラムを記述しました。 上記のようにテキストに「abc」と続けて値を変更していくと、以下のように新しく入力した値と入力する前の値がconsoleに出力されました。 まとめ ・監視プロパティ（ウォッチャ）とは、対象の監視物に変化があったとき記述した処理が自動的に実行されるものである。 最後に 今回は監視プロパティ（ウォッチャ）の基本についてアウトプットしました。 今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。 今後ともQiitaにてアウトプットしていきます！ 最後までご愛読ありがとうございました！
- 投稿日：2021-10-26T13:50:40+09:00
CSSのみでハンバーガーメニューを作る
よくあるハンバーガーメニューをCSSのみを使用して作っていきます。 応用するとボタンのクリックに応じて様々な要素をアニメーションさせることが出来ます。 CSSのみで作ると以下のメリットがあると思います。 JSライブラリに依存しない CSSを使用した自由度の高いアニメーション表現が可能 完成品 1. ヘッダーの作成 まずはヘッダーを作成していきます。 site_logo.html <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="header_container"> <div class="header_start"> <h1 class="site_name">SITE NAME</h1> </div> </div> </header> </body> </html> CSSを書きヘッダーのデザインをしていきます。 headerにposition: sticky;を記載することで、画面をスクロールしてもヘッダーが追従してくれるようになります。 style.css body { margin: 0; padding: 0; } header { background-color: darkred; width: 100%; position: sticky; top: 0; } .header_container { padding: 5px 10px; } h1.site_name { color: white; margin: 0; padding: 0; } Font Awesomeを利用してハンバーガーメニューアイコンを追加します。 site_logo.html <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" /> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="header_container"> <div class="header_start"> <h1 class="site_name">SITE NAME</h1> </div> <div class="header_end"> <i class="fas fa-bars menu_icon"></i> </div> </div> </header> </body> </html> display: flex;とjustify-content: space-between;を使ってサイトタイトルとメニューアイコンを横並びにします。 style.css body { margin: 0; padding: 0; } header { background-color: darkred; width: 100%; position: sticky; top: 0; } .header_container { padding: 5px 10px; display: flex; align-items: center; justify-content: space-between; } h1.site_name { color: white; margin: 0; padding: 0; } .menu_icon { color: white; font-size: 2rem; } それっぽくなってきましたね！ 2. メニューの作成 次にメニューを作成していきます。 site_logo.html <html> <head> <!-- 省略 --> </head> <body> <header> <!-- 省略 --> </header> <div class="side_menu"> <ul class="menu_items"> <a class="menu_item" href="#"> <li>メニュー項目 1</li> </a> <a class="menu_item" href="#"> <li>メニュー項目 2</li> </a> <a class="menu_item" href="#"> <li>メニュー項目 3</li> </a> <a class="menu_item" href="#"> <li>メニュー項目 4</li> </a> </ul> </div> </body> </html> CSSを書き、メニューが開いた状態のデザインをしていきます。 style.css // 省略 .side_menu { position: fixed; top: 0; right: 0; background: rgb(170, 170, 170); height: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); transition-duration: 0.3s; } .menu_items { list-style-type: none; padding: 5px 0; margin: 0; } .menu_item { color: white; text-decoration: none; } .menu_item li { padding: 8px 30px; transition-duration: 0.3s; } .menu_item li:hover { background-color: gray; } メニューを閉じるボタンを追記します。 site_logo.html <html> <head> <!-- 省略 --> </head> <body> <header> <!-- 省略 --> </header> <div class="side_menu"> <ul class="menu_items"> <div class="close_button"> <i class="fas fa-times"></i> </div> <!-- 省略 --> </ul> </div> </body> </html> style.css // 省略 .close_button { width: 35px; height: 35px; color: white; font-size: 2rem; width: 100%; text-align: right; } .close_button i { margin-right: 10px; } .side_menuのrightの値を変更しメニューが隠れるようにします。 style.css // 省略 .side_menu { position: fixed; top: 0; right: -200px; background: rgb(170, 170, 170); height: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); transition-duration: 0.3s; } 3. メニュー開閉を実装 CSSには:checkedというセレクタがあります。 :checkedを使用すると、チェックボックスのオンオフに応じてCSSの内容を変更することが出来ます。 まずはチェックボックスを作成します。 site_logo.html <html> <head> <!-- 省略 --> </head> <body> <input id="side_menu_check" type="checkbox"> <header> <!-- 省略 --> </header> <div class="side_menu"> <!-- 省略 --> </div> </body> </html> :checkedセレクタを使用してチェックボックスにチェックが入ったらメニューが表示されるよう実装します。CSSセレクタについてはこちらのチートシートがわかりやすいです。 style.css // 省略 #side_menu_check:checked ~ .side_menu { right: 0; } チェックボックスをオンオフしてみましょう！ メニューが表示/非表示されるようになっています。 labelタグを使用することでチェックボックスのオンオフを切り替える事ができます。forでチェックボックスのidを指定します。 site_logo.html <html> <head> <!-- 省略 --> </head> <body> <input id="side_menu_check" type="checkbox"> <header> <div class="header_container"> <!-- 省略 --> <div class="header_end"> <label for="side_menu_check"> <i class="fas fa-bars menu_icon"></i> </label> </div> </div> </header> <div class="side_menu"> <ul class="menu_items"> <label for="side_menu_check"> <div class="close_button"> <i class="fas fa-times"></i> </div> </label> <!-- 省略 --> </ul> </div> </body> </html> これでメニューボタンからメニューの開閉が出来るようになりました。チェックボックスをdisplay: none;して非表示にすれば完成です。 以下、ソースコードの全文です。 site_logo.html <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" /> <link rel="stylesheet" href="style.css"> </head> <body> <input id="side_menu_check" type="checkbox"> <header> <div class="header_container"> <div class="header_start"> <h1 class="site_name">SITE NAME</h1> </div> <div class="header_end"> <label for="side_menu_check"> <i class="fas fa-bars menu_icon"></i> </label> </div> </div> </header> <div class="side_menu"> <ul class="menu_items"> <label for="side_menu_check"> <div class="close_button"> <i class="fas fa-times"></i> </div> </label> <a class="menu_item" href="#"> <li>メニュー項目 1</li> </a> <a class="menu_item" href="#"> <li>メニュー項目 2</li> </a> <a class="menu_item" href="#"> <li>メニュー項目 3</li> </a> <a class="menu_item" href="#"> <li>メニュー項目 4</li> </a> </ul> </div> </body> </html> style.css body { margin: 0; padding: 0; } header { background-color: darkred; width: 100%; position: sticky; top: 0; } .header_container { padding: 5px 10px; display: flex; align-items: center; justify-content: space-between; } h1.site_name { color: white; margin: 0; padding: 0; } .menu_icon { color: white; font-size: 2rem; } .side_menu { position: fixed; top: 0; right: -200px; background: rgb(170, 170, 170); height: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); transition-duration: 0.3s; } .menu_items { list-style-type: none; padding: 5px 0; margin: 0; } .menu_item { color: white; text-decoration: none; } .menu_item li { padding: 8px 30px; transition-duration: 0.3s; } .menu_item li:hover { background-color: gray; } .close_button { width: 35px; height: 35px; color: white; font-size: 2rem; width: 100%; text-align: right; } .close_button i { margin-right: 10px; } #side_menu_check { display: none; } #side_menu_check:checked ~ .side_menu { right: 0; }
- 投稿日：2021-10-26T09:29:29+09:00
Amazon Insentives APIのHTMLサンプルの実行の仕方
自分用メモ Amazon Insentives APIを使えばアマゾンギフトコードの発行などができます。ただこれに使われている認証方法が「AWS 署名バージョン 4」というものでbasic認証などの用にただ打てばいいというわけではないそうです。ありがたいことにサンプルも用意されていますが、若干古くそのままでは動かなかったのでここにメモします。 Web Server for Chromeなどでローカルでサーバーを建てて、サンプルコードがあるディレクトリにネットワーク越しにアクセス可能にする。 google-chrome --allow-file-access-from-files --disable-web-security --user-data-dir=/home/USERNAME/HOGEHOGE のようにしてchromeを起動して、1.のURLへアクセス。
- 投稿日：2021-10-26T07:12:21+09:00
React×TypeScriptで作ったポートフォリオサイトの説明
作成したサイト 実現したいこと ・自分の経歴、能力、作品などが伝わるポートフォリオサイトの作成 ・SPAによる高速なページ遷移 ・必要な人のみ閲覧してもらえばいいのでSEO対策は考えない ・学習コストが増えすぎるのを防ぐため、サーバーサイドは考慮しなくていい構成にする ・同様の理由で必要以上のフレームワーク、ライブラリを導入しすぎないようにする ・レスポンシブ対応の実装 ・チーム開発を意識したコーディングを心掛ける 使用技術 フロントエンド React, React-Router, React-Hook-Form, EmailJS, TypeScript, styled-component, styled-media-query, Material-UI, react-vertical-timeline-component Yarn, Prettier ツール Git, GitHub, git-Flow, GitHub-Pages 個人的に今一番人気があると感じているJavaScriptライブラリであるReactと、今後は新規開発で使われることになりそうなTypeScriptを採用しました。cssライブラリとしてコンポーネント指向と相性の良いstyled-componentsを採用しました。あまりデザインに時間をかけすぎたくなかったのでMaterial-UIも採用しています。ホスティングはGitHub-Pagesで行っています。 ディレクトリ構成 ディレクトリ構成はcreate-react-appコマンドで作成したプロジェクトディレクトリにatomic designを適用して決めました。organismsやmoluculesは将来的に分割が予想されるコンポーネントも配置しています。コンポーネントを分割する際は再利用性がある場合と可読性の向上のための2つの場合に分けて行いました。 reactPortfolio ├── build ├── node_modules ├── package.json ├── public │ └── index.html ├── README.md ├── src │ ├── App.tsx │ ├── assets │ │ ├── data //配列などのデータ格納ディレクトリ │ │ ├── images //画像格納ディレクトリ │ │ ├── styles │ │ │ ├── media.tsx //styled-media-queryのラッパーファイル │ │ │ └── theme.tsx //Material-UI用のカラーテーマファイル │ │ └── Type.tsx │ ├── components │ │ ├── atoms │ │ ├── molecules │ │ ├── organisms │ │ ├── pages │ │ └── templates │ ├── index.tsx │ ├── react-app-env.d.ts │ └── ComponentRouter.tsx //ルーターファイル ├── tsconfig.json ├── types │ └── import-jpg.d.ts └── yarn.lock コーディング規則 型定義 ・関数コンポーネントにはアロー関数を使い、型定義は「VFC」で行う。 ・childrenを使いたい場合は"PropsType"に型定義して使うこと。 ・基本的に関数コンポーネントの返り値に型注釈はつけない。 ・anyは使用禁止。 スタイル ・一行で済むスタイリングも基本的にはstyled-coponentsでスタイルコンポーネントを作成する。 ・スタイルが2行以上に拡張される確率が非常に低いと判断される場合はインラインスタイルを使用してもよい。 ・スタイルコンポーネントは関数コンポーネントの後に記述し、登場するスタイルコンポーネントの順に書く ・レスポンシブ対応はstyled-media-queryを用いて行い、レスポンシブ対応しているcssプロパティは下の部分に寄せて改行する。 命名規則 ・スタイルコンポーネントの名前は"S + キャメルケースの名称"とする。 ・複数要素を囲うタグの名前は”意味を推測しやすい名前 + Container”とする。"Wrapper"は混乱を避けるため利用しない。 ・コンポーネント全体を囲うタグの名前は”SComponentContainer”とする。 ・命名は"Container"などを含めて4単語までのキャメルケースで行い、5単語以上になる場合は1単語を省略するか異なる命名を考える。 ・型定義の末尾には"Type"とつける。 ・propsの型名は"PropsType"とする。 その他 ・短絡評価によるコンポーネントの表示、非表示は行わず、三項演算子で実現する。 ・importのエリアはライブラリ、material-uiなどのスタイル、自作関数コンポーネントや型定義や配列データ、に分けて改行を入れる。 ・importの3つ目のエリア内では一番上が型定義、その次が配列や画像などのデータ、最後に自作関数コンポーネントの順に記述する。 ・コンポーネント内のreturn文の前の定数宣言同士に改行をいれない。 ・将来的に数が大きくなる可能性がある定数配列などはdataフォルダに格納し、インポートして使う。 工夫した点 atomic designによるディレクトリ構成 atomic designを利用することでコンポーネントがどのように利用されるのかが分かりやすくなり、可読性も向上しました。 コーディング規則による統一性 自分以外の人間がコーディングをしたとしても同じようなコーディングになるように自分なりに規則を決めてコーディングしました。 styled-media-queryを用いたレスポンシブ対応 そのまま記述することも考えましたが、ブレイクポイントを数値で書くのは非常に危険だと考え、別ファイルに書いてインポートするなども考えましたが少し手間でした。何か良いライブラリがないかと探した際にstyled-media-queryを見つけましたが、そもそもの記述が少し冗長だったのでラップして短く、安全にレスポンシブ対応を行うことが出来ました。今回のポートフォリオではブレイクポイントを1170pxと768pxの２つに設定してレスポンシブ対応を行っています。 //そのままのstyled-media-query const SText = styled.h1` font-size: 64px; ${media.between("medium","large")` font-size: 36px; `} ${media.lessThan("medium")` font-size: 26px; `} `; //ラップして簡略化したもの const SText = styled.h1` font-size: 64px; ${media.lg` font-size: 36px; `} ${media.md` font-size: 26px; `} `; 簡潔で分かりやすいデザイン Material-UIやreact-vertical-timeline-componentを利用した簡潔で分かりやすいデザインを心掛けました。 反省点 レスポンシブ対応がモバイルファーストでない モバイルファーストで設計した方が良いことは知っていたのですが、具体的にどうすれば良いのかわからずPCをベースにスタイリングしていった結果、あとから大幅な修正をすることになりました。 おわりに モダンな技術を用いてポートフォリオサイトを作成しました。作ってみないと分からないことがたくさんあったので良い経験になりました。次はサーバーサイドの技術を含めた作品を作りたいと思います。 参考文献
- 投稿日：2021-10-26T07:12:21+09:00
React×TypeScriptで作ったポートフォリオサイトを作成した
はじめに React、TypeScriptを使った初めての作品として自己紹介サイトを作成しました。 作成したサイト 実現したいこと ・自分の経歴、能力、作品などが伝わるポートフォリオサイトの作成 ・SPAによる高速なページ遷移 ・必要な人のみ閲覧してもらえばいいのでSEO対策は考えない ・学習コストが増えすぎるのを防ぐため、サーバーサイドは考慮しなくていい構成にする ・同様の理由で必要以上のフレームワーク、ライブラリを導入しすぎないようにする ・レスポンシブ対応の実装 ・チーム開発を意識したコーディングを心掛ける 使用技術 フロントエンド React, React-Router, React-Hook-Form, EmailJS, TypeScript, styled-component, styled-media-query, Material-UI, react-vertical-timeline-component Yarn, Prettier ツール Git, GitHub, git-Flow, GitHub-Pages 個人的に今一番人気があると感じているJavaScriptライブラリであるReactと、今後は新規開発で使われることになりそうなTypeScriptを採用しました。cssライブラリとしてコンポーネント指向と相性の良いstyled-componentsを採用しました。あまりデザインに時間をかけすぎたくなかったのでMaterial-UIも採用しています。ホスティングはGitHub-Pagesで行っています。 ディレクトリ構成 ディレクトリ構成はcreate-react-appコマンドで作成したプロジェクトディレクトリにatomic designを適用して決めました。organismsやmoluculesは将来的に分割が予想されるコンポーネントも配置しています。コンポーネントを分割する際は再利用性がある場合と可読性の向上のための2つの場合に分けて行いました。 reactPortfolio ├── build ├── node_modules ├── package.json ├── public │ └── index.html ├── README.md ├── src │ ├── App.tsx │ ├── assets │ │ ├── data //配列などのデータ格納ディレクトリ │ │ ├── images //画像格納ディレクトリ │ │ ├── styles │ │ │ ├── media.tsx //styled-media-queryのラッパーファイル │ │ │ └── theme.tsx //Material-UI用のカラーテーマファイル │ │ └── Type.tsx │ ├── components │ │ ├── atoms │ │ ├── molecules │ │ ├── organisms │ │ ├── pages │ │ └── templates │ ├── index.tsx │ ├── react-app-env.d.ts │ └── ComponentRouter.tsx //ルーターファイル ├── tsconfig.json ├── types │ └── import-jpg.d.ts └── yarn.lock コーディング規則 型定義 ・関数コンポーネントにはアロー関数を使い、型定義は「VFC」で行う。 ・childrenを使いたい場合は"PropsType"に型定義して使うこと。 ・基本的に関数コンポーネントの返り値に型注釈はつけない。 ・anyは使用禁止。 スタイル ・一行で済むスタイリングも基本的にはstyled-coponentsでスタイルコンポーネントを作成する。 ・スタイルが2行以上に拡張される確率が非常に低いと判断される場合はインラインスタイルを使用してもよい。 ・スタイルコンポーネントは関数コンポーネントの後に記述し、登場するスタイルコンポーネントの順に書く ・レスポンシブ対応はstyled-media-queryを用いて行い、レスポンシブ対応しているcssプロパティは下の部分に寄せて改行する。 命名規則 ・スタイルコンポーネントの名前は"S + キャメルケースの名称"とする。 ・複数要素を囲うタグの名前は”意味を推測しやすい名前 + Container”とする。"Wrapper"は混乱を避けるため利用しない。 ・コンポーネント全体を囲うタグの名前は”SComponentContainer”とする。 ・命名は"Container"などを含めて4単語までのキャメルケースで行い、5単語以上になる場合は1単語を省略するか異なる命名を考える。 ・型定義の末尾には"Type"とつける。 ・propsの型名は"PropsType"とする。 その他 ・短絡評価によるコンポーネントの表示、非表示は行わず、三項演算子で実現する。 ・importのエリアはライブラリ、material-uiなどのスタイル、自作コンポーネント、型定義や配列データ、に分けて改行を入れる。 ・将来的に数が大きくなる可能性がある定数配列などはdataフォルダに格納し、インポートして使う。 工夫した点 atomic designによるディレクトリ構成 atomic designを利用することでコンポーネントがどのように利用されるのかが分かりやすくなり、可読性も向上しました。 コーディング規則による統一性 自分以外の人間がコーディングをしたとしても同じようなコーディングになるように自分なりに規則を決めてコーディングしました。 styled-media-queryを用いたレスポンシブ対応 そのまま記述することも考えましたが、ブレイクポイントを数値で書くのは非常に危険だと考え、別ファイルに書いてインポートするなども考えましたが少し手間でした。何か良いライブラリがないかと探した際にstyled-media-queryを見つけましたが、そもそもの記述が少し冗長だったのでラップして短く、安全にレスポンシブ対応を行うことが出来ました。今回のポートフォリオではブレイクポイントを1170pxと768pxの２つに設定してレスポンシブ対応を行っています。 //そのままのstyled-media-query const SText = styled.h1` font-size: 64px; ${media.between("medium","large")` font-size: 36px; `} ${media.lessThan("medium")` font-size: 26px; `} `; //ラップして簡略化したもの const SText = styled.h1` font-size: 64px; ${media.lg` font-size: 36px; `} ${media.md` font-size: 26px; `} `; 簡潔で分かりやすいデザイン Material-UIやreact-vertical-timeline-componentを利用した簡潔で分かりやすいデザインを心掛けました。 反省点 レスポンシブ対応がモバイルファーストでない モバイルファーストで設計した方が良いことは知っていたのですが、具体的にどうすれば良いのかわからずPCをベースにスタイリングしていった結果、あとから大幅な修正をすることになりました。 おわりに モダンな技術を用いてポートフォリオサイトを作成しました。作ってみないと分からないことがたくさんあったので良い経験になりました。次はサーバーサイドの技術を含めた作品を作りたいと思います。 参考文献
- 投稿日：2021-10-26T06:06:53+09:00
Web開発者向けの24のChrome拡張機能
今日の投稿では、ウェブサイトのデザインと開発で一般的に使用されているGoogleChrome拡張機能について学習します。 Google Chromeとは何ですか？ Google Chromeは、2008年に製造されたWebブラウザであるGoogleの有名で成功した製品の1つです。これは、高度なセキュリティ機能と優れたブラウジングエクスペリエンスを備えたクロスプラットフォームのWebブラウザです。 さらに、アドレスバーのURL提案、メモリ使用量の最適化、ページ応答時間の短縮など、他の多くのデバイスで一緒に使用できる便利なプロパティがいくつか見つかりました。 それだけでなく、プログラマーが作業効率を高め、時間と労力を節約するのに役立つ拡張機能も提供します。 次に、一般的に使用されるChrome拡張機能をいくつか見てみましょう。 Lorem Ipsum Generator Lorem Ipsum Generatorは、必要な段落と行の数を指定することにより、ドキュメントをすばやく作成するのに役立ちます。 Webページ上にコンポーネントを構築する場合、人々はコンテンツを使用して、Web上でどのように表示されるかをテストまたは確認することがよくあります。 これにより、ワンクリックで偽のコンテンツを作成できます。 Lorem Ipsum Generator Postman Postmanは、サーバーにHTTPリクエストを送信するのに役立つアプリケーションです。 これは、プログラムAPIを実行またはテストするときに役立ち、GET、POST、DELETE、およびPUTリクエストを簡単に作成できます。 さらに、Postmanを使い始めたばかりのときに質問をするのに役立つ、多数のプログラマーがいる専用のフォーラムがあります。 Postman JavaScript and CSS Code Beautifier JavaScriptおよびCSSコードビューティファイアは、CSSおよびJavascriptコードを美化し、読みやすくするのに役立ちます。 通常、ウェブサイトをホスティングにアップロードするときは、可能な限り最適化するために、次の画像のような不要なスペースを削除して、CSSファイルとJavascriptファイルを圧縮することがよくあります ご覧のとおり、コードは一連の文字であるため、読みやすくありません。 したがって、JavaScriptとCSS Code Beautifierを使用して、コードをより科学的かつ簡単に整理する必要があります。 詳細については、下の画像を参照してください。 JavaScript and CSS Code Beautifier Web Developer Web Developerは、100万人以上のユーザーによってインストールされた数少ないものの1つです。 これは、Web開発者がWebページを迅速に開発およびデバッグするのに役立ちます。 これは、無効化、Cookie、CSS、フォーム、画像などのさまざまなツールのコレクションです。 Web Developer Window Resizer Window Resizerは、電話、タブレット、ラップトップ、デスクトップなどのブラウザーでWebサイトの可視性をすばやく構築またはテストするのに役立つ重要なツールです。 ブラウザウィンドウの幅と高さを設定することで、表示サイズを動的に調整することもできます。 Window Resizer Colorzilla Colorzillaを使用すると、Webページ上の任意のオブジェクトの色の値を読み取ることができます。 さらに、クリップボードへの色の自動コピー、最近選択した色の履歴の表示、高度なカラーピッカーなど、その他の便利な機能もサポートしています。 Colorzilla WhatFont WhatFontを使用すると、Webページ要素が使用しているフォントを簡単に識別できます。 フォント名を表示するには、表示するオブジェクトにマウスをインストールして移動するだけです。 WhatFont WhatRuns WhatRunsユーティリティは、フレームワーク、分析ツール、Wordpressプラグイン、フォントなど、Webサイトで使用されているWebテクノロジを識別するのに役立ちます。 必要なページにアクセスし、whatrunsアイコンをクリックするだけで、完全な情報が表示されます。 1分未満。 監視対象サイトが新しいテクノロジーを追加したときに通知を受け取るようにサインアップすることもできます。 WhatRuns CSSViewer CSSViewerを使用すると、色、フォント、サイズ、位置など、最も一般的な方法でWebオブジェクトのCSSプロパティを表示できます。 それを選択して、目的のオブジェクトにカーソルを合わせるだけです。 CSS情報が自動的に表示されます。 CSSViewer Page Ruler Redux Page Ruler Reduxは、ウェブサイトユニットのサイズをピクセル単位で取得するのに役立ちます。 Webページ上の特定の要素の正確なサイズを取得する必要がある場合のWebデザイナーに適しています Page Ruler Redux TinEye Reverse Image Search TinEye逆画像検索は、画像認識技術を使用して、異なる解像度の画像を含む複数のリンクの結果を含むWeb上の画像のサイズ変更、編集、または検索を支援します。 検索する画像を右クリックし、[TinEyeで画像を検索]を選択して、結果が表示されるのを待ちます。 そして、これが私が画像を検索したときの結果です： TinEye Reverse Image Search The Great Suspender Google Chromeを使用するときにご存知のように、RAMの使用は、コンピューターを高速化する上で重要な要素です。 Great Suspenderを使用すると、未使用のタブを一時停止して、ブラウザをよりスムーズに実行できます。 20秒、1分、5分など、タブを使用していないときにタブを一時停止することもできます。 The Great Suspender Marmoset Marmosetは、プログラム内のコードを画像として保存するのに役立ちます。 これは、たとえば、関数のコードをソーシャルネットワーキングサイトのプログラムに入れて共有する必要がある場合に役立ちます。 また、色、言語、テーマの調整などの追加機能を提供して、コードのビジュアルをより人目を引くように見せることもできます。 Marmoset User-Agent Switcher User-Agent Switcherを使用すると、Opera、Safari、Firefox、Internet ExplorerブラウザなどでWebページを表示する方法など、追加のプログラムをインストールしなくても、さまざまな画面やデバイスでWebページを表示できます。 User-Agent Switcher Clear Cache Clear Cacheは、ワンクリックでキャッシュをクリアし、データを閲覧する役割を果たします。 さらに、オプションで、アプリケーションキャッシュ、Cookie、履歴、データベースなど、クリアするデータを選択できます。 Clear Cache React Developer Tools React Developer Toolsは、Chromeの開発者ツールに追加されたReactデバッグツールです。 これにより、Webサイトの開発中にReactコンポーネントを簡単かつ迅速にテストできます。 React Developer Tools Check My Links [マイリンクを確認]を使用すると、ワンクリックでWebサイトの壊れたリンクを確認できます。 Check My Links Checkbot Checkbotは、サイトマップ、404ページ、コンテンツ計画などのさまざまなタイプの要素を使用して、Webサイトの速度、セキュリティ、およびSEOをテストするのに役立ちます。 Checkbot Site Palette SitePaletteツールを使用すると、ブラウザの複数のWebページのカラーパレットをすばやく簡単かつ自動的にエクスポートできます。 Site Palette Web Developer Checklist Web Developer Checklist あなたのウェブサイトが持っていなければならないすべての必需品をチェックするのを助けます。 Web Developer Checklist EditThisCookie EditThisCookieは、WebサイトでのCookieの追加、削除、編集、使用、検索、保護、およびブロックを支援することを目的としたCookieマネージャーです。 EditThisCookie リラックスするのに役立つユーティリティ ここでは、リラックスして生産的な1日を始めるためのエネルギーを増やすためのヒントをいくつか紹介します。 Momentum Tab Flickr Earth View from Google Earth 概要： これを通じて、この記事がGoogleChrome拡張機能を提供してくれることを願っています Web開発で使用できます。ご不明な点がございましたら、メールを送信してください。できるだけ早く回答いたします。 体。 今後ともよろしくお願いいたしますので、よろしくお願いいたします。 あなたが持っていることを望みます 良い一日を！ 参照リンクen.niemvuilaptrinh.com