CFS-StreetView — Googleストリートビューをクリーンなフルスクリーンで表示する拡張
概要
CFS-StreetViewはChrome用の軽量な拡張機能で、Googleストリートビューのインターフェース要素(コントロールパネル、縮尺、ナビゲーションUIなど)を非表示にして、純粋なパノラマビューのみをフルスクリーン表示できるようにします。これにより余計な表示を排してスクリーンショットや資料作成、視覚確認がしやすくなります。実装はシンプルで、コンテンツスクリプト(content.js)を通じてDOMやスタイルを操作する方式と推測され、拡張配布はリリースアーカイブ(.rar)や開発者モードでの読み込みを想定しています。軽量で用途が明確なツールです。
リポジトリの統計情報
- スター数: 5
- フォーク数: 0
- ウォッチャー数: 5
- コミット数: 2
- ファイル数: 10
- メインの言語: JavaScript
主な特徴
- GoogleストリートビューのほとんどのUI要素を非表示にしてクリーンな表示を実現
- フルスクリーン表示への最適化でスクリーンショットやプレゼン素材作成に便利
- シンプルなコンテンツスクリプトベースの実装(content.js)
- 非技術者向けにリリースアーカイブからの導入が可能
技術的なポイント
この拡張はREADMEやリポジトリ構成から推測すると、主にコンテンツスクリプト(content.js)を用いてGoogleストリートビューのページに注入され、DOM要素の非表示やスタイル上書きを行うことでUIを消しています。具体的には以下のような技術的アプローチが考えられます。
- コンテンツスクリプトによるDOM操作: content.jsがページ読み込み時に実行され、特定のクラス名や要素(コントロール、パネル、バッジ、透過オーバーレイなど)をquerySelectorで取得してstyle.display = ‘none’やclassの付け替えで非表示化します。動的に生成される要素に対応するためMutationObserverで監視する実装も取り得ます。
- CSSの上書き適用: 要素を消すだけでなく、z-indexやpointer-eventsを調整してインタラクションを無効化したり、背景の余白を詰めてパノラマ領域を最大化するためにスタイルシートを注入している可能性があります。
- 互換性とフォールバック: Google側のUIは頻繁にクラス名や構造が変わるため、セレクタは複数候補を用意したり、要素のテキストや属性を参照する堅牢化が必要です。リポジトリがシンプルであることから、最小限のセレクタで動作する設計が意図されていると考えられます。
- empty.pbfの役割: リポジトリに含まれるempty.pbfは地図やベクタタイル関係のプレースホルダである可能性があり、拡張内で追加の地図タイルやレイヤーを無効化するために使われるか、配布物の構成上のダミーファイルとして含まれていると推測されます(詳細はソース参照が必要)。
- 配布と導入: READMEの説明にあるように、リリースからのアーカイブ配布(CFS-StreetView.rar)を想定しており、非技術者でも展開してChromeの「パッケージ化されていない拡張機能を読み込む」方式で利用できるようにしています。開発者向けにはソースを直接読み込んでデバッグ可能です。
- セキュリティと権限: Chrome拡張としてはページ操作のためにホスト権限(ストリートビューが動作するドメイン)やコンテンツスクリプトの実行権限がmanifestで宣言されているはずです。実行時にページ内容を変更するためプライバシーや権限周りの確認は推奨されます。
これらのポイントは、ソースを読むことでより正確に把握できますが、設計方針としては「余計なUIを視覚的に削ぎ落とす」「導入が簡単」「実行時オーバーヘッドが少ない」ことに重きが置かれています。
プロジェクトの構成
主要なファイルとディレクトリ:
- .DS_Store: file
- LICENSE: file
- README.md: file
- content.js: file
- empty.pbf: file
…他 5 ファイル
各ファイルの簡単な説明(リポジトリ内容からの推測):
- content.js: 拡張の中核となるコンテンツスクリプト。ストリートビューページに注入され、UI要素の非表示やスタイル調整を行う。DOMの監視やイベントハンドリングを含む可能性あり。
- empty.pbf: ベクタタイルや地図関連のプレースホルダ/ダミーファイル。ストリートビュー表示時の余分なタイルやレイヤーを無効化する用途、あるいは配布構成に必要な空ファイルの可能性がある。
- README.md: 機能説明、インストール手順、使用方法やスクリーンショット(before/after)が含まれている。非技術者向けインストール方法が記載されている点が親切。
- LICENSE: ライセンス表記。利用条件や再配布の可否、責任範囲が記載されているため、商用利用や改変の可否を確認する際に重要。
- その他ファイル: manifest.json(拡張で必須)、アイコンやメディア(before.png/after.png)などが含まれていることが想定される。
利用/拡張のヒント:
- 依存性が少ないため、必要ならcontent.jsを編集して任意のUI要素のみを消すようカスタマイズ可能。
- 将来的にトグルボタンやオプション画面(どの要素を隠すかを選択)を追加すると使い勝手が向上します。
まとめ
シンプルで目的が明確なChrome拡張。ストリートビューの見た目を整えたい人に有用。
リポジトリ情報:
- 名前: CFS-StreetView
- 説明: Chrome extension that hides Google Street View UI elements for a clean full-screen panorama view and screenshots.
- スター数: 5
- 言語: JavaScript
- URL: https://github.com/duy-phamduc68/CFS-StreetView
- オーナー: duy-phamduc68
- アバター: https://avatars.githubusercontent.com/u/251842523?v=4
READMEの抜粋:
CFS-StreetView
A Chrome extension that hides most Google Street View interface elements so the panorama can be viewed and captured in a clean full-screen view.
This is useful for screenshots, visual reference, or situations where the default Street View interface elements are distracting.
beforeCFSSV
Before CFS-StreetView.
afterCFSSV
After CFS-StreetView.
Installation
Non-technical
- Download CFS-StreetView.rar from the Releases…