配列に入れたキーワードにマッチした文字列をタグで囲むやつを作ってみた。

やりたいこと

とあるサイトで、ページ内にある文章から複数のキーワードに該当する文字列をタグで囲みたいことがありました。
ページが長く、動的に作成されるページだったので、jQueryで対応できないかなとやってみたら案外うまく言ったので、備忘録を兼ねてメモ。

作ったもの

こんなのができました。 codepen.io

devツールなどで見ると、配列に入れたキーワードごとにで囲まれているのがわかると思います。
さらに、キーワードのカテゴリーごとに別々のクラスが付与されています。

キーワードを配列に入れる

まずは配列にキーワードを入れています。

  // キーワードをカテゴリー別に配列に格納
  var sport = ['野球', 'サッカー'];
  var animal = ['犬', '猫'];
  var country = ['日本', 'アメリカ'];
  // カテゴリーを配列に格納
  var keyword = [sport, animal, country];

今回は複数のカテゴリーに分かれてキーワードが存在していたので、それらをまとめてkeywordという配列に入れています。

また、そのほかに使用する変数も用意しておきます。

  var i,j = 0;
  var $sample = $('.sample'); // 対象を指定
  var sourceStr = $sample.html(); // 対象のHTMLを抽出
  var targetStr = keyword; // キーワードを一度変数に格納
  var typeClass; // カテゴリーごとにクラスを振りたいので、変数を用意
  var regExp; // のちにキーワードを正規表現オブジェクトにするので変数を用意しておく

カテゴリーごとにループを回す

配列、変数の用意ができたら、最初にカテゴリーごとにループを回します。

  // カテゴリーごとにループを回す
  for(i in targetStr){
    // キーワードによって付与するクラスを変える
    if (i == 0) {
      typeClass = ' class="sport"';
    }else if (i == 1) {
      typeClass = ' class="animal"';
    }else if (i == 2) {
      typeClass = ' class="country"';
    }
  }

ここでは、カテゴリーごとに違うクラス名を指定したかったので、ループの値( i )によって変数typeClassに異なる値を入れています。

キーワードごとにループを回す

次に、カテゴリーに含まれるキーワードごとにループを回します。

    // カテゴリーに含まれるキーワードごとにループを回す
    for(j in targetStr[i]) {
      regExp = new RegExp( targetStr[i][j], "g" ) ;
      // 置換したものを、一度変数sourceStrに格納
      sourceStr = sourceStr.replace( regExp , "<span" + typeClass + ">$&</span>" ) ;
    }

正規表現で置換したかったので、regExp正規表現オブジェクトを作成しています。

ページ内で引っかかったキーワードを.replaceで置換します。

置換するキーワードを囲む には、キーワードに応じて先ほど用意したクラスを指定します。

ここで使っている &$ は「一致した対象文字を抽出する」というものなので、キーワードを<span class="animal">犬</span> とできます。

ページの内容を置換したもので置き換える

最後に対象を置き換えれば完成です。

$sample.html(sourceStr);

終わりに

配列に入れた複数のキーワードをタグで囲むことができました。
意外とこういう記事が見つからなかったので、苦労しましたがなんとかできました。

もし同じようなことをしたい人がいたら、使ってください。

Macで矢印キーを使わずに移動がしたい?それ、Hammerspoon でできるよ!

私はタイピングが遅いので、常日頃、「ホームポジションから移動せずに入力がしたいなぁ」と思っていました。

OS がSierra なので、Karabiner は使えないということは聞いていたのですが、では、実際にどうしたのかというとをメモ。

Hammerspoon を使う

www.hammerspoon.org

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をよく使います。

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は毎回ランダムの文字列で構成される上、ターミナルを落とせば見れなくなります。
なので、リモートにいる仲間にローカルファイルをサクッと確認してもらう時に便利かと思います。