Macで矢印キーを使わずに移動がしたい？それ、Hammerspoon でできるよ！
私はタイピングが遅いので、常日頃、「ホームポジションから移動せずに入力がしたいなぁ」と思っていました。
OS がSierra なので、Karabiner は使えないということは聞いていたのですが、では、実際にどうしたのかというとをメモ。
Hammerspoon を使う
This is a tool for powerful automation of OS X. At its core, Hammerspoon is just a bridge between the operating system and a Lua scripting engine. What gives Hammerspoon its power is a set of extensions that expose specific pieces of system functionality, to the user.
なんでも、OS X を自動化してくれるよ〜というツールらしい。（適当）
早速使ってみます。
いつものようにHomebrewでインストールします。
$ brew cask install hammerspoon ==> Downloading https://github.com/Hammerspoon/hammerspoon/releases/download/0.9.54/Hammerspoon-0.9.54.zip ######################################################################## 100.0% ==> Verifying checksum for Cask hammerspoon ==> Installing Cask hammerspoon ==> Moving App 'Hammerspoon.app' to '/Applications/Hammerspoon.app'. ==> Enabling accessibility access Warning: Accessibility access cannot be enabled automatically on this version of macOS. See System Preferences to enable it manually. 🍺 hammerspoon was successfully installed!
無事インストールできたので、起動します。
起動すると、設定画面が出るので、好みでセッティング。
私は Launch Hammerspoon at login にチェックと、 dock アイコンは不要なので、チェックを外しました。
メニューバーにアイコンが表示されるので、クリック ＞ Open Config を開きます。
あとは、こちらのサイトを参考に設定を書いていきます。
qiita.com
こちらでは、hjklでのカーソル移動だけでなく、テキスト選択などにも対応しています。
Open Config にペースとしたら、Reload Config を押して反映完了。
使ってみる
好みのエディターを開いて、ctrl + h, ctrl + j, ctrl + k, ctrl + l を押してみましょう。
上下左右の移動ができていると思います。
さらには、crtl + cmd + j , crtl + cmd + k で最上部、最下部への移動もできます。
他にもできることはあるのですが、実際には触ってみた方がわかりやすいと思うので、ぜひ触ってみてください。（丸投げ）
One More Thing…
ここまでやると、delete キーを押すのも、enter を押すのもホームポジションから行いたくなってきます。
なので、その設定を追加します。
さきほどの Config の末尾に以下を追加します。
remapKey({'ctrl'}, 'm', keyCode('return'))
remapKey({'ctrl'}, 'd', keyCode('delete'))
-- sublime text用
remapKey({'ctrl', 'cmd'}, 'm', keyCode('return', {'cmd'}))
remapKey({'ctrl', 'shift', 'cmd'}, 'm', keyCode('return', {'shift', 'cmd'}))
私はSublime Textでcmd + enter,cmd + shift + enter を多用するので、その設定も入れました。
ここまできたら、再度メニューバーから Reload Configで設定反映。
ctrl + m でenter 、 ctrl + d でdelete ができると思います。
最後に
ホームポジションから手を離さずに色々できるのはやはり便利です。
最初は慣れないので、ついついカーソルやenterにて（指）が伸びてしまいますが、慣れれば、きっと素敵なタイピングライフが来るものと信じています！！
ではでは〜。
mac で複数ファイルを一括zipする
タイトル通りなんですが、忘れないようにメモ。
複数のファイルをまとめて個別にZipしたい時があると思います。私はありました。
単純に複数ファイルを選択して、右クリック → ◯項目を圧縮 とすると、選択したファイルが一つにまとまった「アーカイブ.zip」というファイルが出来上がります。
そうじゃなくて、おれは個別に圧縮したいの！！
そんな時はデフォルトで入っている 「アーカイブユーティリティ」 を使いましょう。
「アーカイブユーティリティ」はいつも使うアプリケーションフォルダにはないので、あまり意識して使ったことはないかもしれません。
では、場所と使い方を説明します。
Finderで Command + Shift + G で ‘/システム/library/CoreServices’ でディレクトリに移動します。 すると「アーカイブユーティリティ」があるので、それを開きます。
この状態でも複数のファイルをDockアイコンに投げれば個別に圧縮してくれますが、圧縮すると拡張子が .cpgz となるので、修正します。
Command + , から環境設定を開き、アーカイブのフォーマットを「Zipアーカイブ」とします。
この状態で複数のファイルを選択し、Dockアイコンに投げると、個別にZipされたファイルが出来上がります。
これで終わった案件を、Zipして保存しておきたい時に便利ですね！
以上、メモでした。
DrawerJSでリサイズしてもドロワーを閉じないようにする
ドロワーメニュー（横からスッと滑りこんでくるメニューです。）を使うとき、DrawerJSをよく使います。
きれいな動きでお気に入りなんですけど、デフォルトでは画面をリサイズするとドロワーが閉じてしまいます。
画面向きを変えたり、URLバーが消えるだけでも消えてしまうので、ちょっと使い勝手がよくありません。
ちょっとした修正で改善できたので、備忘録を兼ねてメモ。
触るファイルは drawer.js のみ！！
ダウンロードすると drawer-master/dist/js/drawer.js があるので、これを開きます。
リサイズ時に発生している問題なので、おもむろに resize で検索。
72行目あたりに
$(window).on('resize.' + namespace, function close() {
__.close.call(_this);
return _this.iScroll.refresh();
});
という記述があります。
それを・・・こうします。
// $(window).on('resize.' + namespace, function close() {
// __.close.call(_this);
// return _this.iScroll.refresh();
// });
コメントアウトですね。
これだけでリサイズしても、ドロワーメニューは閉じなくなります。
でも閉じないよ・・・
これだけだと開いたはいいけど、閉じれないメニューが出来てしまいました。
なので、もうちょっと修正。
先程のコメントアウトしたもののすぐ下に以下を追加。
// $(window).on('resize.' + namespace, function close() {
// __.close.call(_this);
// return _this.iScroll.refresh();
// });
// これを追加します。
$('.drawer-overlay').on('click', function(e) {
e.preventDefault();
__.close.call(_this);
return _this.iScroll.refresh();
});
$('.drawer-overlay')が後ろのオーバーレイになりますので、これをクリックしたら、__.close.call(_this);を呼んで、iScrollをリフレッシュしてやってるんですね。
これでリサイズしても閉じないドロワーが出来ました。
drawerjs使ってる（使いたい）人で同じように困ってる人の助けになれば幸いです。
ではでは〜。
IE(Edge含む！！)でcalc(% + vw)の計算はダメ、ゼッタイ！！
手短に行きます。
フォントサイズを%（パーセント）とvwで指定するとこうなります。
Chrome → OK
Firefox → OK
Safari → OK
IE11 → ×（なーんだ、いつものことか）
Edge → ×（ファッ！！！？）
なんと、IEだけならず、Edgeでもダメなんですね。 具体的には
font-size: calc(200% * 2vm);
みたいにフォントサイズを指定していると、IE，Edgeでは小さく表示されてしまっていました。
どうすればいいの？
teratailに答えがありました。
なんでも、IE9-11/Edgeでは、%とvwでは正確な計算ができないそうな。
紹介されているように、以下のようにしたら直りました。
font-size: calc(200% * 2vm); ↓ font-size: calc(2em * 2vm);
ほんとに勘弁して欲しいです。。。
同じようにハマっている人がいたらやってみてください。
Sublime Text で入力済みの大文字英単語をサクっと小文字にする
簡単なのでサクっと。
THIS IS A PEN
みたいな英単語があったとします。
これを全部まとめて小文字にしたい時、全部を選択して、command + k + l で小文字になります。
l はたぶんLower Caseの意味。
逆に大文字にしたいときは、command + k + u。
u はたぶん Upper Caseの意味。
ngrokでサクっとローカル環境を外部に公開！
このサイトで紹介されていた ngrok が面白そうだと思って使ってみました。
上の記事では ngrok の本サイト https://ngrok.com/
からDownloadして〜とあったんですが、「ちょっと面倒だなぁ」と思ったので、Homebrewで探してみました。
$ brew cask search ngrok ==> Exact match ngrok
あった。すげぇなHomebrew。
というわけで、サクっとインストール。
$ brew cask install ngrok
==> Downloading https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-darwin-amd64.zip
######################################################################## 100.0%
==> Verifying checksum for Cask ngrok
==> Symlinking Binary 'ngrok' to '/usr/local/bin/ngrok'
🍺 ngrok was successfully installed!
// インストールされたか確認
$ ngrok ⏎
NAME:
ngrok - tunnel local ports to public URLs and inspect traffic
DESCRIPTION:
ngrok exposes local networked services behinds NATs and firewalls to the
public internet over a secure tunnel. Share local websites, build/test
webhook consumers and self-host personal services.
Detailed help for each command is available with 'ngrok help <command>'.
Open http://localhost:4040 for ngrok's web interface to inspect traffic.
EXAMPLES:
ngrok http 80 # secure public URL for port 80 web server
ngrok http -subdomain=baz 8080 # port 8080 available at baz.ngrok.io
ngrok http foo.dev:80 # tunnel to host:port instead of localhost
ngrok tcp 22 # tunnel arbitrary TCP traffic to port 22
ngrok tls -hostname=foo.com 443 # TLS traffic for foo.com to port 443
ngrok start foo bar baz # start tunnels from the configuration file
VERSION:
2.1.18
AUTHOR:
inconshreveable - <alan@ngrok.com>
COMMANDS:
authtoken save authtoken to configuration file
credits prints author and licensing information
http start an HTTP tunnel
start start tunnels by name from the configuration file
tcp start a TCP tunnel
tls start a TLS tunnel
update update ngrok to the latest version
version print the version string
help Shows a list of commands or help for one command
入ってますね。
使ってみる
適当なディレクトリに移動して、サーバーを立てます
$ cd /〇〇/ngrok-test/ $ python -m SimpleHTTPServer 8080 Serving HTTP on 0.0.0.0 port 8080 ...
別のタブを開いて、ngrokの設定をします。
// 上で指定したポートを指定。
$ ngrok http 8080
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Version 2.1.18
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://〇〇.ngrok.io -> localhost:8080
Forwarding https://〇〇.ngrok.io -> localhost:8080
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
ここでブラウザから http://〇〇.ngrok.io にアクセスすると、ローカルファイルがひらきます。 すごくね？
ポートが振られていれば、MAMPなどで作成したWordpressのサイトも公開することが出来ます。
公開用のURLは毎回ランダムの文字列で構成される上、ターミナルを落とせば見れなくなります。
なので、リモートにいる仲間にローカルファイルをサクッと確認してもらう時に便利かと思います。
Sublime Text で散らかりがちなMedia Queryをまとめる
スマホ、タブレット用にCSSを書く時、気を抜くとページ内にいくつも書くことになってしまう Media Query。
以前はSassを使ってPC用、SP用のScssファイルを用意して対応しましたが、Sublime Textのパッケージでまとめることが出来たので、メモ。
必要なもの
- SublimeCombineMediaQueries
- group-css-media-queries
SublimeCombineMediaQueries
こちらはPackage Controlにまだないので、Githubから落とします。
ダウンロードしてきたものを解凍し、Packageディレクトリに CombineMediaQueries という名前で設置します。
group-css-media-queries
npmからもってきます。
$ npm install -g group-css-media-queries
インストール出来たらSublime Text を起動して、Preferences: Package Settings > CombineMediaQueries > Settings – Userを開き、自分のnode のパスを記載します。
nodeのパスを確認するのは、ターミナルからわかります。
$ where node /usr/local/bin/node
{
"bin_path" : "/usr/local/bin/node" // 上で調べたパスを記載
}
やってみよう
Media Queryがあちこちに散らばったCSSファイルを開いて、Shift + Control + C を押すと・・・、
// これが
.itemA {
background-color: #f00;
}
@media screen and (max-width: 1200px) {
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
}
@media screen and (max-width: 768px) {
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
}
.itemB {
background-color: #ff0;
}
@media screen and (max-width: 1200px) {
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
}
@media screen and (max-width: 768px) {
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
}
.itemC {
background-color: #f0f;
}
@media screen and (max-width: 1200px) {
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
}
@media screen and (max-width: 768px) {
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
}
// `Shift + Control + C`を押すと・・
.itemA {
background-color: #f00;
}
.itemB {
background-color: #ff0;
}
.itemC {
background-color: #f0f;
}
@media screen and (max-width: 1200px) {
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
}
@media screen and (max-width: 768px) {
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
}
うん、いい感じ。
でも実際にはSassコンパイルのタイミングで走らせたいから、gulp-combine-media-queriesとか使ってgulpでやったほうがいいかも。
まぁ、ケース・バイ・ケースで使い分けていこうかなぁ。
