5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

このままやったらフロントエンドエンジニアになれへんで!Advent Calendar 2022

Day 15

時短・工数削減するならアプリやChrome拡張にショートカットを設定するのがオススメ!

Last updated at Posted at 2022-12-14

私は効率のよく開発するために時々振り返っています。

理由は、ルーチンになった作業や業務こそ無駄なことが多いと考えているからです。

これまで煩わしいと考えながら放置していたことが楽になったので読んでくださる方の時短や効率化につながれば大変嬉しいです。

業務で使っているツール

リモートワークではZoomを利用しています。

  • 声をかけられた時にマイクのミュート切り替えまでにラグが出てしまい反応が遅れる
  • 画面共有やカメラのオン/オフのためのマウス操作が煩わしい
  • ブレイクアウトルームの移動が煩わしい

などが悩ましい点でした。

ブレイクアウトルームの移動が煩わしい

ブレイクアウトルームの項目は画面幅が十分でないと表示から消えてしまいます。
移動する場合どうしてもアクションが多くなるので使いづらさを感じています。
zoom.gif

ブレイクアウトルームの移動の煩わしさはいまだ模索中です…良い案があればコメントをいただけるとすごく嬉しいです!

ミュートの切り替えや各ボタンの操作はショットカットの設定をグローバルにすることで解決しました!

グローバル設定すると他のショートカットと競合する可能性があるのでご自身で調整してください…

ショートカットの設定方法

  1. command + ,で設定画面を開きます
    image.png

  2. 左のメニューから「キーボードショートカット」を選択するとショートカットの設定画面が表示されます。
    ショートカットの設定の一番右側のチェックボックスにチェックするとグローバルショートカットを有効化できます。
    image.png

初期設定だとShift + command + Aでミュートの切り替えられます!

私はミュートの切り替えを「F1」、画面共有を「F3」に設定します。
カメラのオン/オフは基本操作しないのと誤操作防止のためにcommand + F2に設定しています。

Chorome拡張機能にショートカットを設定する

よく使うChrome拡張機能はショートカットキーを設定しています。
簡単に設定できるのでぜひやってください!

ショートカットの設定方法

拡張機能にショートカットを設定するに簡単です。
拡張機能のアイコンが並んでいる一番右にパズルのピースのようなマークがあります。

スクリーンショット 2022-12-03 13.27.50.png

クリックすると拡張機能の一覧の一番下に「拡張機能を管理」という項目が表示されているのでそちらをクリックします。
スクリーンショット 2022-12-03 13.31.53 2.png

次に表示された画面左上にメニューがあります。
スクリーンショット 2022-12-03 13.39.39.png

メニューを開くとキーボードショートカットの項目が表示されます。
image.png

ショートカットの一覧から登録していくだけです。
image.png

ショートカットキーはできるだけ2つのキーを組み合わせたものにしています。
3つのキーを組み合わせるショートカットだと忘れやすいのと押しにくいと考えているからです。

業務効率が上がったChrome拡張ツールの紹介

業務の効率を上げるためや実装後のチェックに使っている拡張機能を一部紹介したいと思います!

HTMLチェッカー

HTMLの閉じ忘れなどを確認してくれます。
ショートカットはOption + Hに設定しています。

OneTab

ついついタブが増えすぎる人にオススメです。
増えすぎたタブを保存してくれる拡張機能で、ショートカットはOption + Tに設定しています。

実行すると下記のようなOneTabのページにまとまっていきます。
image.png

全てを復元することも可能ですし、まとめたタブをページとしてシェアすることも可能です。
まとめたくないページはタブを固定しておくとOneTabの対象外となります。

記事を書いていたら新しいものを発見しました。
長くなりそうなので機能紹介は記事の一番最後にします!

Copy All Urls

「現在開いているタブのURLを全てコピーする」、「コピーしたURLを全てコピーして開く」の2つの機能があります。
ショートカットはCopyをOption + C、PasteをOption + Vに設定しています。

Tab pinner

タブ固定してくれるショートカットが実現でき、ショートカットはOption + Pに設定しています。
「Tab pinner」で調べると複数ヒットしますが、機能がシンプルなのでこれを使ってます。

開いてるタブを全て固定したいなどの要望がある場合は下記の「Tab Pinner」をお使いください。

Edit This Cookie

cookieの操作を頻繁に実施する必要のある人は便利です。
cookieをすぐに消したい場合にも便利です。
ショートカットはOption + Eに設定しています。

Disable keyboard shortcuts

登録されているショートカットを無効にしてくれます。
ときどきcommand + Mで誤ってウィンドウを最小化してしまうのでこの拡張機能を使って無効にすることで文章を打ち込んでいる途中に誤って最小化されなくなって個人的にはストレスフリーです。

キーボード操作が正確な方は全く必要ないと思います。

まとめ

便利なアプリやツールはたくさんありますが、多くなればなるほど便利にしているはずなのに不要な時間をかけている可能性もあります。

業務効率を上げたいと思った時にChromeの拡張機能を探すのはお手軽に効率アップを目指せる方法だと思います。

固定するタブの位置を決めておくのも迷う時間が少なくなり時間短縮になると思います!
私は1つ目はOneTab、2つ目はチャットツールと決めておくことでChromeのショートカットcommand + 1command + 2を使うことで瞬時に切り替えられるようにしています!

ルーチンになった作業を定期的に見直してもっと作業効率を上げて本当に必要なところに時間を使えるようにしましょう!

【おまけ】記事を執筆中に見つけてしまったOneTabの上位互換「better-onetab」の紹介

OneTabのちょっと煩わしい部分が改善された上位互換であると思いました。

OneTabから改善されていて嬉しかった点

  • まとめたタブを後から移動できる
  • まとめたタブにタグ付けや検索ができる

上位互換と表現しましたが、タブのリストを共有するリンクの生成ができない模様です…。
これまで利用していたなら実装を待つか、乗り換えは控えた方がいいと思います。

まとめたタブを後から移動できる

OneTabは一度タブをまとめてしまうと別のタブのまとまりに1つだけ移動できませんでした。
better-onetabはドラッグ&ドロップで移動できます!
onetab-move_1.gif

まとめたタブにタグ付けや検索ができる

【タイトル】が付けられるのはOneTabと同じですが、タグ付けや検索もできます。
onetab-tag.gif

検索機能は、タグが直接表示されるのでよく使うものにはタグ付けしておくのが良いと思います!
image.png

拡張機能のショートカットも「拡張機能を有効にする」以外だとOneTabが2つに対してbetter-onetabは5つ設定できます。

私は5つのうち「Store all tabs」「Store selected tabs」2つにショートカットを設定しました!

「Store all tabs in all windows」のショートカットはバラバラのwindowでも一つのリストにまとめてくれますが、間違ってショートカットを実行するのが嫌だったので便利ではありそうでしたが設定はしませんでした。

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?