# ちょっとした作業をラクにするアプリとそのTips #1日1Tips – 2019年9月

URL: https://webrandum.net/tips-2019-09/
公開日: 2019-10-01
更新日: 2020-04-12
カテゴリー: 作業効率化
タグ: Alfred, Automator, Karabiner-Elements
出典: Webrandum（著者: サイトウ マサカズ）

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

今月に入ってから、[Twitter](https://twitter.com/31mskz10)でも同時に発信するようにしました。

文字数上限の関係上、Facebookページよりも簡略化されている場合もありますが、Twitterをメインに使用している人はそちらもご覧ください。

また、今回は自分自身がアプリケーションの見直しもしていたこともあって、アプリ関連の話題が多めです。

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

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

## 基本操作

### スクリーンショットの撮影時に気をつけること

- メニューバーを整理しておく

- デスクトップには何も置かず、壁紙もシンプルに

- ウインドウの撮影時には基本影を消す

ブログを書くためにコツコツしてきたことですが、結果的に自分の作業環境が整理されています。

[過去に記事](https://webrandum.net/how-to-take-article-screenshot/)にして詳しくまとめているので、そちらも参考にしてください。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/08/eyecatch-15.jpg)記事用のスクリーンショットを撮るときに気をつけていることhttps://webrandum.net/how-to-take-article-screenshot自分はブログを毎日のように書いているので、ふとした瞬間に記事用のスクリーンショットが撮れるように色々と工夫しています。今回は、記事用のスクリーンショットを撮るときに、自分が気をつけていることをまとめました。メニューバーは撮影するアイコン以外隠すメニューバーのアイコンに関しての撮影をするとき、不要なアイコンはBartender 3というアプリで隠すようにしています。見比べると分かりますが、関係のないアイコンがごちゃついていると見ている人の気が散ってしまいます。Bartender 3以外にも、BetterTouchToolを使えばBe...](https://webrandum.net/how-to-take-article-screenshot)

### クリップボード共有

MacとiPhoneを両方持っている人であれば、ユニバーサルクリップボードというクリップボードの共有機能が使えます。

同じiCloudアカウントでログインした状態で、Macの［システム環境設定］→［一般］→「このMacとiCloudデバイス間でのHandoffを許可」にチェックを入れるだけです。

![クリップボード共有](https://webrandum.net/mskz/wp-content/uploads/2019/10/image_4.png)

### Finderのメニューをoptionを押しながらクリック

FinderなどのApple純正のアプリに多いのですが、メニューバーや右クリックメニューでoptionを押すと、別のメニューに切り替わることがあります。

思いもしない便利な機能が隠されてある可能性もあるので、とりあえずoptionを押して見るといいかもしれません。

### Finderの移動

Finderにフォーカスを合わせた状態で、フォルダ名の最初2文字を素早く入力すると、フォルダ選択ができます。

地味に便利なのですが、日本語だと対応していないので、フォルダ名は半角英数字にしておくのをオススメします。

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

### アプリ：SteerMouseとMagicPrefs

マウスのカスタマイズをしたいなら[SteerMouse](http://plentycom.jp/steermouse/)（マジックマウスは非対応）がオススメです。

マジックマウスを使っている人は[MagicPrefs](http://magicprefs.com/)というアプリもありますが、最近動作が不安定だったり、SteerMouseほど細かく設定はできません。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/09/eyecatch-10.jpg)外部マウスを自由にカスタマイズできるステアーマウスで、マウスの細かい設定を行うhttps://webrandum.net/steermouse今までMac純正のマジックマウスを使用して、カスタマイズはMagicPrefsを使っていたのですが、動作が不安定だったり、マジックマウスで色々ジェスチャーを登録していると、誤操作を起こしてしまいます。MagicPrefsにはジェスチャーを認識する感度設定もできるのですが、それでもやっぱり誤操作してしまいます...というわけで、最近ELECOMのM-XGM20DLBKを購入しました。 物理ボタンがある程度多くある ホイールを左右に傾けて左右にスクロールもできる 無線（有線でPC周りを線だらけにしたくなかった） 安かったのでとりあえ...](https://webrandum.net/steermouse)

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/03/eyecatch-6.jpg)MagicPrefsを使ってMagic Mouseのカスタマイズを行うhttps://webrandum.net/magic-prefsキーボードショートカットは色々登録して、自分の作業環境を便利にしてきたのですが、マウスは今まで特に何も設定していませんでした。そこで今回は、Apple純正のMagic Mouseのカスタマイズを行ってみます。MagicPrefsのダウンロードMagicPrefsというアプリを使えば、Apple純正のマウスであるMagic MouseやTrackpadのカスタマイズが可能になります（今回はMagic Mouseにフォーカスして解説を行います）。 ダウンロードは公式サイトからMagicPrefsのダウンロードを行いましょう。ただし、5年近くメンテナンスがされていないようなので、...](https://webrandum.net/magic-prefs)

### アプリ：EvernoteとBear

ノートアプリで有名なEvernoteとBear。

後から探すのに特化したいなら「Evernote」、書くのに特化したいなら「Bear」という基準で選ぶと良さそうです。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/04/eyecatch-21.jpg)EvernoteとBearの違いや使い分けのヒントhttps://webrandum.net/evernote-bear自分はずっとEvernoteというノートサービスを使っています。しかし、少し前からBearというMarkdownに対応しているノートアプリが気になっていて、乗り換えも視野に入れつつ少し触ってみる事にしました。最終的な結論としては、「Evernoteの方が自分には適している」と判断したので、結局乗り換えはしませんでした。今回はそう判断した理由や、BearとEvernoteの違いやそれぞれの違いをまとめておきます。EvernoteとBearの違いざっくりしたEvernoteとBearの違いは下記の通りです。 Evernote Markdown非対応 ノートの分類は「ノートブック...](https://webrandum.net/evernote-bear)

### アプリ：f.lux

[f.lux](https://justgetflux.com/)というアプリを使うと、画面の色温度を調節してブルーライトを抑えられます。

時間帯によって自動で調節してくれるのも魅力的。

デザイン制作をするときは一時的にオフにする必要がありますが、目にかかる負担はできるだけ減らしていきましょう。

[![](https://www.google.com/s2/favicons?domain=justgetflux.com)justgetflux![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/66a1498b78d927f136801c7c66bc8c69d47ea8d9a4ffeb8ce65cd56e942955a9.webp)f.luxhttps://justgetflux.comSoftware to warm up your computer display at night, to match your indoor lighting.](https://justgetflux.com)

### アプリ：Kap

デスクトップ画面のキャプチャにはKapというアプリを使っています。

クリックしたときのエフェクトもできますし、メニューバーから簡単に撮影できてオススメです。

[![](https://www.google.com/s2/favicons?domain=getkap.co)Kap![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/c54cd24372e037e6735f46f7ac645deac07b0b749315ae9d50bd125b7f17bcdd.webp)Kap - Capture your screenhttps://getkap.coAn open-source screen recorder built with web technology](https://getkap.co)

### アプリ：ImageOptim

画像の圧縮にはImageOptimをオススメしていますが、デフォルトのままだと可逆圧縮（後から元に戻せる圧縮方法）になっているため、圧縮率が低いです。

ちゃんと設定して初めて効果を発揮するので、ひと手間かかりますが是非設定してみてください。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/02/eyecatch-4.jpg)ImageOptimで画像圧縮に最適な設定を行うhttps://webrandum.net/imageoptimMacの画像圧縮アプリでおそらく一番有名なImageOptim。PNG・JPG・GIF・SVGとWebで使用する画像形式はひと通り対応しているので、非常に便利なのですが、デフォルトの状態だと可逆圧縮（後から画質をもとに戻せるレベルで圧縮する方式）になってしまっているので、圧縮率がイマイチです。というわけで今回はImageOptimの最適な圧縮設定について考えてみます。ImageOptimのインストールImageOptimは公式サイトからダウンロードしましょう（複製版が出回っていて、検索をかけると公式以外からもダウンロード出来る場所が見つかりますが、...](https://webrandum.net/imageoptim)

### アプリ：Bartender 3

Bartender 3というアプリを使うと、散らかりがちなMacのメニューバーをキレイに整理できます。

メニューバーに限った話ではありませんが、アイコンが散乱していると探すときにムダが発生します。

あまり使わないものは隠して整理していきましょう。

[![](https://www.google.com/s2/favicons?domain=www.macbartender.com)www.macbartender.com![](https://s.wordpress.com/mshots/v1/https%3A%2F%2Fwww.macbartender.com?w=160)Bartender 3 - How to hide menu bar icons on Machttps://www.macbartender.comBartender for your Menu Bar](https://www.macbartender.com)

### アプリ：Client Folder Maker

Client Folder Makerというアプリを使うと、あらかじめ設定したテンプレートのフォルダ一式を一括で生成できます。

毎回ちまちまファイルを作る必要がなくなるので、特にWebのコーディングをする人にはオススメです。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/04/eyecatch-19.jpg)Client Folder Makerでよく使うフォルダ構成を一気に作成するhttps://webrandum.net/client-folder-makerwebサイトの実装をするときや、WordPressのテンプレートを作成する時など、毎回同じようなフォルダ構成を1から作成するのは非常に面倒です。例えば、シンプルなwebサイトを作成するときは、下記のような構成のフォルダ一式を毎回作成することになります。 assets css style.css scss style.scss bsae _reset.scss _variables.scss _mixin.scss common _common.scss _header.scss _footer.scss _layout.scss page js images index.htmlClient Folder Makerを使えば、このような...](https://webrandum.net/client-folder-maker)

### アプリ：ポモドーロテクニック

ポモドーロ・テクニック（25分集中→5分休憩を繰り返して作業をするテクニック）をするなら、Be Focusedというアプリがオススメです。シンプルで使いやすく、メニューバーから管理ができます。

[![](https://www.google.com/s2/favicons?domain=apps.apple.com)Mac App Store![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/7b0a7940fb9f44e4dfca04d54d28a3075869f3802207edccd7c72431cde06785.webp)‎Be Focused - 仕事および勉強用の Timerhttps://apps.apple.com/jp/app/be-focused-仕事および勉強用の-timer/id973134470?mt=12‎タスクを続けることは、画面に束縛されている私たちのような世代には非常に難しいことです。Be Focusedは、個人のタスクを短い休憩で分割し、身元を隠した複数の個人の間で分担作業することによって処理します。これは、作業に対するやる気と集中力を保持するために驚くほど効率てな方法です。タスクの作成、休憩時間の設定や一日、一週間あるいは指定期間中の進捗状況の追跡を行います。主な特長:- タスクの管理- 一日、一週間または指定期間中の進捗の追跡- 素早く簡単な目標追跡- 生産性を最大化するためのカスタマイズ: • ...](https://apps.apple.com/jp/app/be-focused-%E4%BB%95%E4%BA%8B%E3%81%8A%E3%82%88%E3%81%B3%E5%8B%89%E5%BC%B7%E7%94%A8%E3%81%AE-timer/id973134470?mt=12)

### Chrome拡張機能：Create Link

ウェブサイトのリンクを生成したいときは、Create LinkというChrome拡張で生成しています。

「タイトル + URL」のリンクが簡単に生成できます。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/05/eyecatch-27.jpg)Chrome拡張機能の「Create Link」を使って簡単にサイトリンクを生成するhttps://webrandum.net/create-linkサイトをコピーしてリンクのシェアをしたい時は、「タイトルのコピー」と「リンクのコピー」とコピーの作業が2回必要になってきます。更にサイトタイトルも入れる必要がある場合は「サイトタイトル」もコピーしなければなりません。今回はそれらを整形して、コピーできるCreate LinkというChrome拡張機能の紹介です。Create LinkのインストールGoogle Chromeのウェブストアからダウンロードします。Chromeの右上にCreate Linkのアイコンが追加されているので、それをクリックしてフォーマットを選ぶと整形したリンクのコピーができます...](https://webrandum.net/create-link)

## Karabiner-Elements

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

Karabiner-Elementsを使うと、アプリを終了させるcommand + Qを2回押しで発火するようにできます。 command + S（保存）の近くにあるので、保存する前に間違えてアプリを終了させてしまうと怖いので、前もってこういう設定はしておいた方が吉です。

[![](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でアプリ切り替え

アプリの起動、切り替えにAlfredを使っています。

例えばGoogle Chromeを起動したいときは「`gc`」と入力してenterで起動できますし、ものによっては1文字で起動できたりします。

Alfred自体が学習していって、よく使うアプリは上位に表示させるようにしてくれるので便利です。

![Alfredでアプリ切り替え](https://webrandum.net/mskz/wp-content/uploads/2019/10/image_3.png)

## Automator

### 右クリックからPNG画像の圧縮を行う

PNG画像の圧縮であれば、Finderの右クリックメニューから圧縮できるようにする方法もあります。

少し設定に手間はかかりますが、1度設定してしまえば次からすぐ圧縮できます。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/01/eyecatch-18.jpg)PNG画像の圧縮をpngquantとAutomatorを使って右クリックメニューからできるようにするhttps://webrandum.net/pngquant-and-automatorMacにはAutomatorという、色んな操作を自動化するアプリがデフォルトで入っています。今回はそのAutomatorと、pngquantというコマンドライン上でPNG画像を最適化するツールを組み合わせて右クリックメニューからPNG画像の最適化ができるように設定します。pngquantをインストールまずはpngquantをインストールします。panquantをコマンドライン上で動作するPNG画像の圧縮ツールです。インストールにはHomebrewを使用します。Homebrewが何か分からない方は過去に詳しい記事を書いているので参考にしてください。$ brew install pngquant...](https://webrandum.net/pngquant-and-automator)

## Google Chrome

### Chrome拡張機能をローカルファイルでも許可

Chrome拡張機能は、ローカルファイル上では機能しませんが、右クリック→［拡張機能の管理］で「ファイルの URL へのアクセスを許可する」にチェックを入れると、ローカルファイルでも使えるようになります。

![ローカルファイルを許可](https://webrandum.net/mskz/wp-content/uploads/2019/10/image_1.png)

### Chrome拡張機能の管理

Google Chromeで下記URLにアクセスすると、拡張機能の管理画面が表示されます。

各拡張機能の設定や、オンオフ切り替えが可能です。

```
chrome://extensions/
```

### Google ChromeからiOSのGoogle Chromeにサイトを送信する

Google Chromeの検索バーから、「お使いのデバイスに送信」で、iOS版のGoogle Chromeに閲覧中のサイトを送信できます。

わざわざ検索し直したり、URLをコピーしなくて済みます。

![Google ChromeからiOSのGoogle Chromeにサイトを送信する](https://webrandum.net/mskz/wp-content/uploads/2019/10/image_5.png)

## その他

### CodePenのデフォルト設定

CodePenのSetting画面にある「Preprocessor & Library Defaults」でプリプロセッサーやライブラリを選択しておくと、新規ペン作成時にデフォルトで設定が反映されます。

毎回選ぶ必要がなくなるのでよく使うものを設定しておくのが良さそうです。

![CodePenのデフォルト設定](https://webrandum.net/mskz/wp-content/uploads/2019/10/image_2.png)

### Simulatorを使ってデバイス確認

XCodeに付属しているSimulatorを使うと、アップル製品を使っての表示確認ができます。

iPhoneXを持っていなくてもノッチ（メニューバー部分の出っ張り）の確認や、iPadでの表示確認も可能です。

![Simulatorを使ったデバイス確認](https://webrandum.net/mskz/wp-content/uploads/2019/10/image_6.png)

### FileMerge

XCodeに付属しているFileMergeを使えば、2つのファイルの差分を確認できます。

とりあえず差分が確認できればいい人はこれで問題ない気がします。

![FileMerge](https://webrandum.net/mskz/wp-content/uploads/2019/10/image_7.png)