# 日々の制作をラクにするTips #1日1Tips – 2019年10月

URL: https://webrandum.net/tips-2019-10/
公開日: 2019-11-01
更新日: 2019-10-31
カテゴリー: 作業効率化
タグ: Alfred, BetterTouchTool, Chrome拡張機能, Keyboard Maestro
出典: Webrandum（著者: サイトウ マサカズ）

[先月](https://webrandum.net/tips-2019-09/)に引き続き、[Twitter](https://twitter.com/31mskz10)や[Facebookページ](https://www.facebook.com/webrandum/)で #1日1Tips というハッシュタグを付けて、ちょっとした作業効率化の投稿をしています。

記事に書くまでもないちょっとした小技を紹介しているのですが、あとから検索できるようにしておきたいので、記事として1ヶ月分の投稿をまとめておきます。

※文章に関しては、ほぼ投稿のコピペですが、ある程度整形を加えています。

## アプリ・拡張機能紹介

### チャット統合アプリ

複数のチャットツールを使っている人は、[Station](https://getstation.com/)などの1つのアプリで管理するのをオススメします。

[過去に記事](https://webrandum.net/station/)にもしているので、そちらもご覧ください。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/01/eyecatch-3.png)StationであらゆるWebサービスをまとめて管理するhttps://webrandum.net/stationSlack・ChatWork・Skype・Facebook Messengerなどなど、あらゆるチャットサービスを行き来しているとサービスを開くまで通知に気が付かない事があったり、サイトを開いているとウインドウが大量に出来てしまいます。それらをまとめて管理するアプリとして、「Franz」や「Rambox」などが有名ですが、今回紹介するStationはチャットサービス以外のメジャーなWebサービスが登録出来る上に、1Passwordと連携して、Station上でサッとログイン出来ます。StationのメリットStationを利用するメリットは下記の通りです。細かいことを言い出すと...](https://webrandum.net/station)

### Chrome拡張機能：devtools-z-index

devtools-z-indexというChrome拡張機能を使うと、開発者ツールでz-indexを一覧で見れます。

とりあえず`z-index: 99999;`などやりだすと管理が大変になるので、こういった拡張機能で確認して、適切な値を設定するようにしましょう。

[![](https://www.google.com/s2/favicons?domain=ginpen.com)ginpen.com![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/19a44d011276d6a9699ffe2f034ceab0e7f108839512162fd28de43e2294295e.webp)DevToolsでz-index一覧できるやつ作ったよ。https://ginpen.com/2018/06/20/devtools-z-index/Chrome用とFirefox用です。(https://raw.githubusercontent.com/ginpei/devtools-z-index/master/doc/ChromeWebStore_BadgeWBorder_v2_206x58.png)](https://chrome.go](https://ginpen.com/2018/06/20/devtools-z-index/)

### Chrome拡張機能：Black Menu for Google

Chrome拡張機能のBlack Menu for Googleを使うとGoogleのサービスを拡張機能のアイコンから素早く使えるようになります。

![Black Menu for Google](https://webrandum.net/mskz/wp-content/uploads/2019/11/image_5-1024x942.png)

[![](https://www.google.com/s2/favicons?domain=chrome.google.com)chrome.google.com![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/a79992be39b1862ed96564b9c5c6dc02c01dde5b2d6b0c7335b9075775f95eb3.webp)Black Menu for Google™https://chrome.google.com/webstore/detail/black-menu-for-google/eignhdfgaldabilaaegmdfbajngjmoke?hl=jaGoogle universe への最も簡単なアクセスを提供します](https://chrome.google.com/webstore/detail/black-menu-for-google/eignhdfgaldabilaaegmdfbajngjmoke?hl=ja)

### Chrome拡張機能：ato-ichinen

ato-ichinenというChrome拡張機能をアクティブにしていると、検索結果を自動的に1年以内のものにしてくれます。

[![](https://www.google.com/s2/favicons?domain=chrome.google.com)chrome.google.com![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/42ca12e3fc5b4579868f9a640ba576fb99643654befe2ead92a86b457df5ba51.webp)ato-ichinenhttps://chrome.google.com/webstore/detail/ato-ichinen/pojaolkbbklmcifckclknpolncdmbaph?fbclid=IwAR345EMww5Eac9YptgfOjG09imHi-dGXvofMeWHE2aRBzgVeWSFqKsFH5j0Activeにしている間、Google検索結果を1年以内のものに限定します。](https://chrome.google.com/webstore/detail/ato-ichinen/pojaolkbbklmcifckclknpolncdmbaph?fbclid=IwAR345EMww5Eac9YptgfOjG09imHi-dGXvofMeWHE2aRBzgVeWSFqKsFH5j0)

## コーディング

### SourceTreeのリポジトリグループ

SourceTreeで[新規…]→［新規リポジトリグループ］で、リポジトリをまとめるフォルダを作成できます。

![リポジトリグループ](https://webrandum.net/mskz/wp-content/uploads/2019/11/image_1.png)

Gitのリポジトリは増えてくると探すのに地味に時間がかかってきますが、整理しておくと多少探しやすくなります。

### スニペットツールでの効率化

AlfredのSnippets機能や、[Dash](https://kapeli.com/dash)、[TextExpander](https://textexpander.com/)などのスニペットアプリを使うことで、素早くコードを呼び出せます。

よく使うコードはどんどん登録していくと、少しずつラクになっていきます。

自分の場合はコードに関することはDashに登録しています。

### gulpのタスク一覧を表示

gulpでタスクを色々設定している場合、`npx gulp --tasks`コマンドを実行すると設定されているタスクが一覧で見れます。

![gulpタスク一覧を表示](https://webrandum.net/mskz/wp-content/uploads/2019/11/image_2-1024x814.png)

タスク名を確認したい場合に、わざわざgulpfile.jsを開く必要がなくなります。

### Bracket Pair Colorizer

Visual Studio Codeの拡張機能の「[Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)」をインストールすると、対応するカッコに色が付くようになります。

![Bracket Pair Colorizer](https://webrandum.net/mskz/wp-content/uploads/2019/11/image_3.png)

Sassなどでカッコを入れ子にしていると、どこと対応しているか分かりにくくなりますが、こういった拡張機能で対策できます。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/03/eyecatch-7.jpg)Bracket Pair ColorizerでVisual Studio Codeの括弧を色分けして見やすくするhttps://webrandum.net/vscode-bracket-pair-colorizerSassやJavaScriptを書いていると括弧が多くて、どの括弧とどの括弧が対応しているのかパッと見で分かりにくくなってしまいます。何とかならないかと探してみると「Bracket Pair Colorizer」というプラグインを見つけたので紹介します。Bracket Pair ColorizerのインストールVisual Studio Codeの拡張機能で「Bracket Pair Colorizer」と検索するかマーケットプレイスでインストールが可能です。ちなみに「Bracket Pair Colorizer」と「Bracket Pair Colorizer 2」があるのですが、何が違うのかイマイチ分かりませんでした。インストー...](https://webrandum.net/vscode-bracket-pair-colorizer)

## BetterTouchTool

### 修飾キーでのウインドウ移動

BetterTouchToolの「修飾キーの移動」機能を使うと、fnを押しながらドラッグでウインドウを移動できるようになります。

わざわざウインドウの上の部分まで行く必要がなくなりますし、移動させたいアプリがアクティブにならないので、地味に便利です。

## Keyboard Maestro

### Open the Finder Selection

Keyboard Maestroの「Open the Finder Selection」を使うと、Finderで選択したファイルを特定アプリケーションで開くマクロが作れます。

パレットにしておけば覚えておくショートカットキーは1つで済みます。

![Open the Finder Selection](https://webrandum.net/mskz/wp-content/uploads/2019/11/image_8.png)

### Execute a JavaScript in Front Browser

Keyboard Maestroの「Execute a JavaScript in Front Browser」を使うと、ブラウザでJavaScriptを実行できるので、「Facebookの通知ボタンをクリックするJavaScript」を書いてショートカットキーで発火させたりできます。

## Karabiner-Elements

### command + Qの2回押しでアプリ終了

command + Qを間違えて押してしまってアプリ終了…そんなトラブルが起きないように、command + Qは2回押しで発火するように統一しておくのがオススメです。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/07/eyecatch-20.jpg)Karabiner-Elementsでcommand + Qの2回押しでアプリが終了するように変更する方法https://webrandum.net/karabiner-elements-application-close普段、ウインドウを閉じるためにcommand + Wを押して閉じているのですが、Wの左隣にはQがあり、間違えてcommand + Qを押すとアプリケーションが終了してしまいます。間違えて押してしまうと、かなりのストレスです。そこで今回は、Karabiner-Elementsを使ってcommand + Qを2回押すと、アプリケーションが終了するようにします。Karabiner-Elementsの設定Karabiner-Elementsの環境設定の［Complex Modifications］→［Rules］にある「Add rule」をクリックします。ルールを追加するパネルが開くので、「Import more rules from the Inter...](https://webrandum.net/karabiner-elements-application-close)

## Alfred

### Alfred Workflow「Colors」

Alfredの「[Colors](http://www.packal.org/workflow/colors)」というWorkflowを使うと、色コードの変換が簡単にできます。

![Alfred Color](https://webrandum.net/mskz/wp-content/uploads/2019/11/image_7-1024x824.png)

16進数からRGBに変換したいときは、Alfred起動してペーストするだけなので非常にラクです。

[![](https://www.google.com/s2/favicons?domain=www.packal.org)Packal![](https://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.packal.org%2Fworkflow%2Fcolors?w=160)Colorshttp://www.packal.org/workflow/colorsA Workflow for the OS X app Alfred: Color tools for developers](http://www.packal.org/workflow/colors)

## Path Finder

### 一括リネーム機能

Path Finderの一括リネーム機能を使うと、複数のファイル名を一気に変更できます。

連番の入力や正規表現を使ったリネームもできますし、設定を保存しておくこともできるのでよく使うものは登録しておくと便利です。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/03/eyecatch-8.jpg)Path Finder 8の一括名称変更機能を使って楽にファイル名を変更するhttps://webrandum.net/pathfinder8-renamePath Finderには地味に便利な機能が色々あるのですが、機能が多くてなかなか使いこなせません。今回は、最近まで知らなかった「一括名称変更」についてまとめてみます。Path Finderについて知らない方は過去の記事をご覧ください。一括名称変更機能複数のファイルの名前変更を行う時に、1つ1つ変更していくのは面倒。そこで使えるのが「一括名称変更」です。使い方は名前の変更をしたいファイルを選択してメニューから［コマンド］→［一括名称変更］を選択するか、command + shift + Rを押します（1つしか選択していないと、通常の名称...](https://webrandum.net/pathfinder8-rename)

## その他

### Gyazo撮影後の自動コピー

Gyazoの撮影後、ページが開いたタイミングでURLは自動的にコピーされてあります。

スクリーンショットは日によって何回もする作業なので、わざわざURLを選択してコピーする必要はないことを知っているだけで全然違います。

### FontExplorer X Proのアプリケーションセット機能

FontExplorer X Proのアプリケーションセット機能を使えば、特定のアプリを起動・終了したタイミングでフォントを有効化・無効化してくれます。

![FontExplorer X Proのアプリケーションセット機能](https://webrandum.net/mskz/wp-content/uploads/2019/11/image_4-1024x594.png)

アイコンフォントはデザインツールを使うときだけ有効化しておきたいので、設定しておくのをオススメします。

### メディアをエンコード

動画の圧縮はそこまでこだわりがないのであれば、Finderの右クリックメニューから「選択したビデオファイルをエンコード」で軽くできます。

![メディアをエンコード](https://webrandum.net/mskz/wp-content/uploads/2019/11/image_6.png)

### Wordoid

Wordoidというサイトで英単語を入力すると、適当に造語を生成してくれます。

日本語には対応していませんが、サービス名などの最初の案出しに使えるかもしれません。

[![](https://www.google.com/s2/favicons?domain=wordoid.com)wordoid.com![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/6857c5bc470c48bd3d2c8456f9d03c43a67eae6cf505addb10b1a80231978de4.webp)Wordoid: Catchy Names for your Company, Product or Websitehttps://wordoid.comPick a short and memorable business name. Our intelligent name generator suggests dozens of quality name ideas and checks domain name availability.](https://wordoid.com)