読者です 読者をやめる 読者になる 読者になる

mac で複数ファイルを一括zipする

タイトル通りなんですが、忘れないようにメモ。

複数のファイルをまとめて個別にZipしたい時があると思います。私はありました。

単純に複数ファイルを選択して、右クリック → ◯項目を圧縮 とすると、選択したファイルが一つにまとまった「アーカイブ.zip」というファイルが出来上がります。

そうじゃなくて、おれは個別に圧縮したいの!!

そんな時はデフォルトで入っている 「アーカイブユーティリティ」 を使いましょう。

アーカイブユーティリティ」はいつも使うアプリケーションフォルダにはないので、あまり意識して使ったことはないかもしれません。

では、場所と使い方を説明します。

Finderで Command + Shift + G で ‘/システム/library/CoreServices’ でディレクトリに移動します。 すると「アーカイブユーティリティ」があるので、それを開きます。

この状態でも複数のファイルをDockアイコンに投げれば個別に圧縮してくれますが、圧縮すると拡張子が .cpgz となるので、修正します。

Command + , から環境設定を開き、アーカイブのフォーマットを「Zipアーカイブ」とします。

この状態で複数のファイルを選択し、Dockアイコンに投げると、個別にZipされたファイルが出来上がります。

これで終わった案件を、Zipして保存しておきたい時に便利ですね!

以上、メモでした。

DrawerJSでリサイズしてもドロワーを閉じないようにする

ドロワーメニュー(横からスッと滑りこんでくるメニューです。)を使うとき、DrawerJSをよく使います。

git.blivesta.com

きれいな動きでお気に入りなんですけど、デフォルトでは画面をリサイズするとドロワーが閉じてしまいます。

画面向きを変えたり、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に答えがありました。

teratail.com

なんでも、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でサクっとローカル環境を外部に公開!

www.yoheim.net

このサイトで紹介されていた 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から落とします。

GitHub - astronaughts/SublimeCombineMediaQueries: Sublime Text Package for grouping CSS media queries.

ダウンロードしてきたものを解凍し、Packageディレクトリに CombineMediaQueries という名前で設置します。

group-css-media-queries

npmからもってきます。

github.com

$ 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でやったほうがいいかも。

www.npmjs.com

まぁ、ケース・バイ・ケースで使い分けていこうかなぁ。

Mac使いはSpaceキーで決定できるようにすると色々捗る!

久しぶりの更新です。

確認用ダイアログ(「上書きしてもよろしいですか?」みたいなやつ)が出てきて、その都度マウス or トラックパッドで「OK」を選択すると思います。

でもこれって、 - キーボードから手を離さないといけない - 「OK」の場所にポインタを合わせないといけない

というふうに、結構めんどくさいです。

それを、Tabキーで選択して、Spaceキーで決定してしまおうという話。

やること

「システム環境設定」 → 「キーボード」 → 「ショートカット」タブ を開きます。

下の方の、「フルキーボードアクセス」を「すべてコントロール」に変更します。

これだけです。

やってみよう

ダイアログが出ればなんでもいいんですが、今回は拡張子を変えてみましょう。

画像を一つ用意して、拡張子を変えてみてください。 ダイアログが出るので、おもむろにTabキーを押してみましょう。青い枠が動くのがわかると思います。 そして、またまたおもむろにSpaceを押してみましょう。ダイアログにポイントを合わせて選択したのと同じ結果になりましたね?

これでいちいちマウスから手を話す必要がなくなりました。

簡単にできる設定なので、やっていない人はぜひやってみてください。