ブラウザのブックマークの小咄 / Browser bookmark's technique

多くの人がなんとなく使っているブラウザのブックマークについて、意外と知らなそうな小テクニックを紹介します。

U-NEXTの第1回社内勉強会「TECH NIGHT」 で発表したLTのスライドです。
スライド内で紹介してるリンクは以下にまとめます。

7p
lil seperator 2 Favicon https://www.favicon.cc/?action=icon&file_id=367071
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - http://separatethis.com/

8p
Bookmark Manager - Chrome ウェブストア https://chrome.google.com/webstore/detail/bookmark-manager/gmlllbghnfkpflemihljekbapjopfjik

13p
Tabli Home https://www.gettabli.com/
The Great Suspender - Chrome ウェブストア https://chrome.google.com/webstore/detail/the-great-suspender/klbibkeccnjlkjkiokjodocebajanakg?hl=ja
ブックマークサイドバー - Chrome ウェブストア https://chrome.google.com/webstore/detail/bookmark-sidebar/jdbnofccmhefkmjbkkdkfiicjkgofkdh?hl=ja
Better Than Bookmarks - Toby https://www.gettoby.com/

20p
すこしでもJSかjQueryが書けるならブックマークレットを作ろう | WEBA https://hirata.blog/201710_lets-bookmarklet/
Cool Bookmarklet https://psephopaiktes.github.io/pages/bookmarklets/

21p
平田(@psephopaiktes)さん | Twitter https://twitter.com/psephopaiktes

22p
https://raw.githubusercontent.com/psephopaiktes/pages/master/bookmarks/google.html
https://raw.githubusercontent.com/psephopaiktes/pages/master/bookmarks/chrome.html
https://raw.githubusercontent.com/psephopaiktes/pages/master/bookmarks/bookmarklet.html

Transcript

1. ブラウザの★の小咄 UXデザイン部 平田 章 ブックマーク 2018/08/29 TECH-NIGTH
2. / 22 自己紹介 平田 章 • アプリやWebのデザイナー、コーダーです。 • Chromeに1300くらいブックマークを登録しています • 他人のPCのDock、常駐ソフト、ブックマークと 拡張機能を観察するのが趣味です 2
3. / 22 いまからする話 「 ブックマークをもっと活用することで、 快適でスタイリッシュなブラウジングライフを送ろう 」 • とにかく小ネタをどんどん紹介するだけです • Chrome & Mac想定ですが、わりと他の環境でも使えるテクニックです 3
4. / 22 タブ、開きすぎてませんか • もはやどこになにがあるかわからない • メモリをとってもたくさん食べる • スタイリッシュじゃない
5. まずはブックマークを整理しよう ブックマークに目的のページがきれいにまとまっていれば、 タブを開きっぱなしにする必要性も減ります。 一度整理しておけば、 Googleアカウントに紐付いて永遠に同期・管理され続ける ので、時間をかけてでもしっかりまとめよう
6. / 22 よく使うものは名前を消す 超基本テクニック 1. ブックマークを右クリック→「編集」 2. 名前を全部消して「保存」 左からよく使う順か、色順に並べるとキレイ 6
7. / 22 区切り線を使う 「区切り線のファビコン」を持つサイト [1] をブックマークすることで、 擬似的に区切り線を追加できます。 ( Firefoxはデフォルト機能でできます。) フォルダの中にも追加できます。 [2] 7 1. https://www.favicon.cc/?action=icon&file_id=367071 2. http://separatethis.com/
8. / 22 ブックマークマネージャを活用しよう chrome://bookmarks • 整理する時お世話になる画面。 まとめて移動したり消したり検索したり • Google公式の Bookmark Manger という拡張機能を入れると、 さらに見た目がリッチになり、 タグをつけてクラウド管理したりも可能 8
9. / 22 ルートフォルダは3種類 Chromeのブックマークは、3種類のフォルダに保存できます。 • ブックマークバー : PCの基本となるフォルダ。ブラウザのブックマークバーに表示される。 • モバイルのブックマーク : モバイルのChromeアプリのデフォルトフォルダ。 スマホでよく見るサイトの管理に便利。 PCからでもブックマークマネージャで確認可能。 • その他のブックマーク : 上記以外を保存するためのフォルダ。 存在が謎だが、常にブックマークバーの右端に表示されるので意外に便利。 9
10. / 22 その他のブックマーク フォルダ 平田は主に、 • Google系サービス • Chromeのシステム画面 (後述) • ブックマークレット (後述) の登録に使っています。 10
11. 日頃の行いを見直そう とにかくタブをたくさん開くのをやめる のが大事です。
12. / 22 Chromeの機能に頼る • 定期的に必ず見るものはピンどめしよう 1. タブを右クリック→「このタブを固定」を選択 • たくさん開いたタブはいったんフォルダにまとめよう 1. Command + Shift +D で開いているタブをフォルダにまとめてブックマークできる 2. 後からフォルダを右クリックし、「すべてのブックマークを開く」で一気に復元可能 3. 不要になったらフォルダを消せばOK 12
13. / 22 拡張機能に頼る それでもタブをたくさん開いてしまう人は、拡張機能を使うのもオススメ • Tabli 開いているタブを一覧で確認、検索、選択して閉じたりできる。 • The Great Suspender しばらく放置されたタブをスリープして、メモリを節約してくれる。 • Bookmark Sidebar ChromeにFirefoxライクなブックマークのサイドバーを追加する。 • Toby タブをクラウドで管理できるサービス。Firefoxでも使える 13
14. / 22 必要ならブラウザのアカウントを使い分ける Chromeのブックマークや履歴は ブラウザにログインしたアカウントごとに管理 されるため、仕事用・プライベート用などでGoogleア カウントを使い分けるのも便利 右上のボタンからすぐにアカウントを 切り替えられ、同時に使うことも可能です。 14
15. その他の小テク 知ってたのしい使って便利
16. / 22 chrome:// • Chromeのシステム系画面は ブックマークすることができます • デフォルトのメニューから開くより すばやく開けて便利です • 実はシステムメニューからは開けない 隠し画面もたくさんあります 16
17. / 22 chrome://dino • Chromeがオフラインのときに出現する例のアレをいつでも楽しめます • しかも全画面で遊べます 17
18. / 22 外部サービスでのWEBページ管理 ( 1/2 ) Feedly よく見るブログやニュースサイトはブックマークするのではなく、 RSSを登録します。更新された記事だけを一覧で確認できます。 Pocket いわゆる「あとで読む」サービス。 スマホのFeedlyやTwitterでみかけたリンクをどんどん保存します 18 ド定番ですが、用途に応じてWEBサービス・アプリも活用しましょう
19. / 22 外部サービスでのWEBページ管理 ( 2/2 ) 19 RAINDROP.IO マイナーですが、大量のページを レファレンスとして管理したい人に超オススメ 私はEvernoteが嫌いなので使いませんが、 WebClipperも定番ですね
20. / 22 ブックマークレット鬼便利` • Javascriptの短いプログラムを ブラウザのブックマークとして登録できる • 任意のページで登録したブックマークレットをクリックすることで、 そのページ上でいろんな機能が実行できる ◦ そのページをSNSですぐにシェアしたり ◦ そのページのタイトルとURLをMarkdwonリンクでコピーしたり ◦ ほかにもたくさん • ここではとても書ききれないので、ぜひ拙ブログを見てください ◦ すこしでもJSかjQueryが書けるならブックマークレットを作ろう | WEBA ◦ Cool Bookmarklet 20
21. / 22 まとめ • ブラウザ黎明期からあるブックマーク、使い方次第でいろいろ便利 • ChromeはOperaやVivaldiと比べると機能が少なく見えますが、 意外に奥が深いです • なにかあればお気軽に話しかけてください 21 @psephopaiktes Twitter
22. / 22 O-MA-KE 今日紹介したブックマークは、手動で登録するのは結構だるいので、 各種ブラウザで読み込めるブックマーク設定ファイルを用意しました。 リンクを右クリックして「名前をつけてリンク先を保存」し、 ブックマークマネージャからインポートしてください。 • Googleセット : Google系サービスのブックマークまとめ • GoogleChromeセット : 履歴・設定などのChromeのシステム画面のまとめ • Bookmarkletセット : おすすめのブックマークレットまとめ 22