今回、Google Chrome拡張機能「HTML Visualizer」を作りました。
Chromeの拡張機能を作成したのは今回が初めてです！
今回の記事では、拡張機能「HTML Visualizer」の紹介と、プライバシーポリシーへの取り組みについて書かせていただきたいと思います！
目次
HTML Visualizerとは？？
HTML Visualizerは、WebページのHTML構造を可視化することを目的としたツールです。
見ていただけるとわかりやすいのではないかと思いますので、デモ動画をご覧になってみてください！
(※AppleのWebサイトを元にデモ動画を作成しています）
このように、チェックボックスを入れると、表示しているWebページ上のHTML上全てに背景色が塗られます。
階層構造がわかりやすくなるようにHTMLタグの階層ごとに塗られる色を変更しており、背景色に透明度を設定することで、コンテンツの内容もちゃんと見える状態を保っています。
なぜ、HTML Visualizerを作ろうと思ったのか？？
拡張機能「HTML Visualizer」を作ろうと思ったのは、僕が講義をする際に、こういうのがあったらいいなと思ったからです。笑
僕は講師業をさせていただくことがあるのですが、2日間〜3日間で集中的にプログラミングを学ぶ、というプログラムイベントでの講義担当をさせていただくことがあります。
参加いただく方の様子を見ていると、CSSレイアウトの部分で悩む方が少なくありません。
CSSレイアウトの部分を短い時間で伝え、できるだけ理解してもらう上では「HTMLを視覚的な観点から理解する」というのが必要になると考えています。
だからこそ、パッとHTML構造を可視化させることができる拡張機能があった方が、講義をスムーズに進める上でも役に立つのではないかと思い、作成に至りました！
プライバシーポリシーへの取り組み
私たちは、[拡張機能名]のユーザーのプライバシーを尊重し、保護することを最優先事項としています。以下に、当社のプライバシーポリシーの主要なポイントを記載します。
データ収集と使用
- 収集するデータ: 当拡張機能は、その機能を提供する上で必要な最小限の情報のみを使用します。具体的には、ユーザーが操作する現在のウェブページに関する情報です。ユーザーの閲覧履歴や個人情報は収集しません。
- データの使用目的: 収集した情報は、ユーザーがアクティブに操作しているウェブページ上でのHTMLタグの可視化のみに使用されます。これにより、ページの構造をユーザーに提供します。
ユーザーの同意
当拡張機能をインストールおよび使用することにより、本プライバシーポリシーに同意したものとみなします。ユーザーはいつでも拡張機能を無効化または削除することにより、同意を撤回できます。
データの保護
ユーザーデータの安全性を保つため、当社は最新の技術を使用してデータを保護します。不正アクセスやデータの漏洩を防ぐための適切な措置を講じています。
お問い合わせ
当拡張機能やプライバシーポリシーに関してご質問がある場合は、Contactよりお気軽にお問い合わせください。
まとめ
というわけで、今回はGoogle Chromeの拡張機能「HTML Visualizer」を作ったという紹介をさせていただきました！
ちょうど今週末に短期集中プログラミングCAMPのイベントで講師担当するので、今回の拡張機能を使ってみます！
その上で、フィードバックがあればさらに機能を加えたり改善していきたいと思います！
