1. mimonelu

    Posted

    mimonelu
Changes in title
+Google Maps の UI を消すブックマークレット
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,38 @@
+Google Maps の UI 、邪魔じゃないですか?特にストリートビューのスクショを撮りたい時とか。
+というわけで Google Maps の UI を非表示にしたり表示したりするブックマークレットを作りました。
+ちなみに PC ブラウザ版の話で、 API は無関係です。
+
+```javascript
+javascript: (() => { [ '.widget-pane-toggle-button-container', '#omnibox-container', '#vasquette', '.top-center-stack', '#titlecard', '#image-header', '.app-viewcard-strip', '.scene-footer-container', '#watermark' ].forEach(query => { const target = document.querySelector(query); target && (target.style['display'] = target.style['display'] === 'none' ? '' : 'none'); }); })(); void 0;
+```
+
+## デモ
+
+ストリートビュー - 起動前
+<img width="800" alt="スクリーンショット 0001-08-29 14.35.28.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248832/b64e98ec-060b-eecb-7198-3be81145127b.jpeg">
+ストリートビュー - 起動後
+<img width="800" alt="スクリーンショット 0001-08-29 14.35.45.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248832/0feed0c5-7b0f-26a6-ee7d-2e2362423d35.jpeg">
+通常マップ - 起動前
+<img width="800" alt="スクリーンショット 0001-08-29 14.31.34.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248832/e433abbc-2d87-1774-d73e-209b6ee8e9e0.jpeg">
+通常マップ - 起動後
+<img width="800" alt="スクリーンショット 0001-08-29 14.31.47.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248832/a03f8a5b-177c-2d84-5c6d-7c31a050cc1e.jpeg">
+
+## 使い方
+
+単純に Google Maps 上でブックマークレットを起動してください。 UI の表示状態が切り替わります。
+__ただし、左サイドバーだけは消えません。手動で非表示にしてから起動してください。__
+<img width="800" alt="スクリーンショット 0001-08-29 14.32.18.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248832/38f7d7fa-924a-01f3-31bb-2c33fa6393dd.jpeg">
+また、すべての UI を消せるかどうかはチェックしていません。適当に修正してケロ。
+
+## 仕組み
+
+これまた単純に対象要素の `display` プロパティを操作しているだけです。
+対象要素は `class` や `id` で指定しているため、それらが変更されたら動作しなくなる可能性はありますがまぁいいや。
+
+## おまけ
+
+現在のウェブページをフルスクリーン表示するブックマークレットも置いておきます( Mac の Chrome 以外では動作しないと思います…)。
+
+```javascript
+javascript: (() => { [ 'mozRequestFullScreen', 'webkitRequestFullscreen', 'requestFullscreen' ].some(rf => { if (document.documentElement[rf]) { document.documentElement[rf](); return true; } }); })(); void 0;
+```