2017-05-03

Windowsでシェルスクリプト書きたいときはShellJSが使える

久々のブログ更新となります。

シェルスクリプトをWindows用に移植したい・・・という場面でShellJSが便利だったというお話です。

ShellJSとは？

github.com

Node.jsでシェルスクリプトが書ける！（※実際書くのはJavaScript。APIが限りなくシェルスクリプト風）
Windows/Mac/Linuxでポータブルに動く！

ヤツです。

採用実績

YeomanとかZeptoとかJS界隈の有名どころで使われています。
GitHubスター数も5,835（2017/05/03現在）なので結構人気あるライブラリと言ってよいのではないでしょうか。自分は ESLintで使われていて知りました。

何で必要になった？

当初JSファイルをcatして結合するだけの単純なスクリプトをシェルスクリプトで書いてました（LinuxとWindows（MSYS2）だけで動けばよい）
ところが、Windowsでコマンドプロンプト使っている人が・・・
コマンドプロンプト用にバッチファイル書いて二重管理とかアレだなぁと思っていたところ、ふと存在を思い出しました。

イメージ

https://github.com/shelljs/shelljs の例そのままですが、↓のようなノリで書けます。

var shell = require('shelljs');

if (!shell.which('git')) {
  shell.echo('Sorry, this script requires git');
  shell.exit(1);
}

// Copy files to release dir
shell.rm('-rf', 'out/Release');
shell.cp('-R', 'stuff/', 'out/Release');

// Replace macros in each .js file
shell.cd('lib');
shell.ls('*.js').forEach(function (file) {
  shell.sed('-i', 'BUILD_VERSION', 'v0.1.2', file);
  shell.sed('-i', /^.*REMOVE_THIS_LINE.*$/, '', file);
  shell.sed('-i', /.*REPLACE_LINE_WITH_MACRO.*\n/, shell.cat('macro.js'), file);
});
shell.cd('..');

// Run external tool synchronously
if (shell.exec('git commit -am "Auto-commit"').code !== 0) {
  shell.echo('Error: Git commit failed');
  shell.exit(1);
}

自分の場合

catして結合したテキストをgrep -vして書き出すスクリプトがこう変わりました。

シェルスクリプト版

cat src/*.js | grep -vE '^\s*//.+' > target/bundle.js

↓

ShellJS版

※ npm install shelljs でインストールしておく。この辺のNode.jsの説明は省略。

const shell = require('shelljs');
shell.cat('src/*.js').grep('-v', '^\s*//.+').to('target/bundle.js');

パイプもいい感じに書けます。

まとめ

Windowsでシェルスクリプトが書きたい→ShellJS お試しください。

2016-10-10

fish shellはじめました

これは(ターミナル開発環境のメンテに疲れた|zshの設定に挫折した)人向けにfish shellをオススメする記事です。

自分がzshで手放せなかった機能達

プラグインマネージャ・・・zgenを使っていました
テーマ・・・pureというシンプルなテーマを使っていました
ディレクトリ移動・・・zで、一度cdしたディレクトリを記録して、次からはファジーな感じで移動できるようにしていました
補完・・・zshの補完機能 + auto-fuで、いい感じに勝手に補完してくれるようにしていました
Ctrl + R で履歴検索・・・peco + 設定ファイルを書いて使っていました
Ctrl + Gでリポジトリにジャンプ・・・peco + ghq + 設定ファイルを書いて使っていました。

これらを、なるべく設定せずにfishで使えるようにしてみます。

zshだと、この辺のツールの導入はちょっと手間ですが、fishなら瞬殺です！

もろもろインストール&開発環境構築

実は、以下3つのコマンドを打てば設定なしでも上記の機能が一通り動きます。

# fish shellとfzfを入れる
brew install fish fzf
# プラグインマネージャのfishermanを入れる
curl -Lo ~/.config/fish/functions/fisher.fish --create-dirs git.io/fisher
# fishermanでもろもろプラグインを入れる
fisher install z fzf decors/fish-ghq rafaelrinaldi/pure

なんということでしょう。

これなら、休日の疲れた状態（今の私）でも問題なく環境構築できますね！

上記でインストールしたモノの補足

プラグインマネージャ

fishermanというfish用のプラグインマネージャを入れました。

ちょっと前まではoh-my-fishがオススメという記事もありますが、最近はコチラを推奨している記事が多い気がします。

テーマ

https://github.com/fisherman とか oh-my-fish/Themes.md at master · oh-my-fish/oh-my-fish · GitHub を探せばいっぱいあります。

自分はzshのときと合わせてpureにしました。

ディレクトリ移動

zがfisherman公式リポジトリにあったので、そのまま入れました。

なお、後述しますが、zsh時代の設定に合わせるために、自分の場合は設定ファイルに2つほど記述を足しました。

set -U Z_CMD "j"
set -U Z_DATA "$HOME/.z/.z"

補完

補完系はfishのデフォルトで十分便利なので、auto-fuはやめました。

Ctrl + R で履歴検索

pecoにこだわりはなかったので、全く設定なしで動くという理由でpeco同等のfzfにしました。

fisher install fzfだけで使えるようになります。

Ctrl + Gでリポジトリを検索＆ジャンプ

fisher install decors/fish-ghqだけで、使えるようになります。

その他補足

~/.zshrc的な設定ファイルは？

~/.config/fish/config.fish に設定します。

fishの文法がbash/zshと全然違う！

そうなんです。

ちょっと独特。

Shell Translation Dictionary · fish-shell/fish-shell Wiki · GitHub

にbashの文法との対比表があるので、見比べながら書いたらよいかも。

↓設定に必要なものだけ書いておきます。

PATHの設定

export PATH=/usr/local/bin:$PATHをどうするか？ですが、

~set -x PATH /usr/local/bin $PATHで大丈夫そう。~

追記: fish v3.2からは fish_add_path を使うのが良いです。重複を排除して追記してくれます。

http://fishshell.com/docs/current/cmds/fish_add_path.html

aliasの設定

alias rm='rm -i'はalias rm 'rm -i'みたいな感じでいけます。

最終的な ~/.config/fish/config.fish

あってるか自信ないですが、いちおう動いたので、一旦これで。 https://github.com/yukidarake/dotfiles/blob/master/.config/fish/config.fish

あとがき

私は、これまでzsh + tmux + vimという感じで開発してきて、zshとかターミナル開発環境の知見をコツコツ蓄えてきました。

が、今はWindowsでジャヴァジャヴァしている関係でzshとかターミナル開発環境を整備する意欲がなくなってしまいました。

そんな折、Windows/MSYS2環境でbashが非力で辛いし、zshちゃんと動かんし、じゃあfishどうだろう？と導入してみたところ、えらく気に入ってしまったので、家のMacにも入れました。

この記事を読んでピンと来た人、ぜひ一度fishをお試しください。

（またconfig.fishの書き方に自信がないので、経験者の方、アドバイスあれば、ぜひ教えてください）

2016-10-04

静的ファイルを配信する場合にはパスにバージョンを含めるのがいいんじゃなかろうか

最近、思っていることを。

なお、バージョンとは言ってますが、Gitのコミットハッシュ値でもUnixタイムスタンプでも何でもいいです

静的ファイル配信パターン

WEBアプリで静的ファイルを配信するパターンは以下3つあるんじゃないかとなんとなく思っています。

1. パスに特になにもつけない

<link rel="stylesheet" type="text/css" href="/static/css/hoge.css" />
<img src="/static/img/hoge.png" />
<script src="/static/js/hoge.js"></script>

2. パスにクエリストリングでバージョンを付ける

<link rel="stylesheet" type="text/css" href="/static/css/hoge.css?v=1" />
<img src="/static/img/hoge.png?v=1" />
<script src="/static/js/hoge.js?v=1"></script>

3. パスにバージョンを含める

<link rel="stylesheet" type="text/css" href="/static/v1/css/hoge.css" />
<img src="/static/v1/img/hoge.png" />
<script src="/static/v1/js/hoge.js"></script>

この中でどれがいい？

1はいろいろ辛そうなのでなしとして、2よりも自分は3がいいと考えています。

以下、その理由をば。

任意のタイミングで確実にリリースできる

これは2のパターンでも当てはまるので、3だけではないですが。

リリースしたタイミングで新しいファイルとしてロードされます。

クライアントのキャッシュを気にしないでも大丈夫。

新旧のバージョンが混在できる

LBから切り離して、アプリサーバを1台ずつローリングアップデートするパターンなんかでも問題なく。

古いアプリサーバにアクセスしたクライアントは古いバージョンのファイルを見て、新しいアプリサーバにアクセスしたクライアントは新しいバージョンのファイルを見て、動作します。

2だと(初めてアクセスした|キャッシュの期限が切れた)クライアントがサーバ側が古い状態で、最新の静的ファイルにアクセスしてしまう可能性があるかと（ブルーグリーンデプロイメントしているなら問題ないかもしれませんが）

事前にリリースできる

現在動作しているアプリには影響を与えず、安心安全に本番環境に事前にリリースできます。

これは2だと無理ではないでしょうか。

補足

ディレクトリではなく、ファイルにバージョンを含めるパターンはどうか？

<script src="/static/js/bundle-abcdefg1234xxxxxxxx.js"></script>

的な。CSS/JSはいいですが、画像のことを考えるとディレクトリにバージョンを含めたほうがいいんじゃないかと思います。

まとめ

久しぶりにブログを書きました。

もし違うよとかもっといい方法があるよということであれば、コメントしていただければ幸いです。

ではでは。

2016-08-26

Windowsを少しでもMacの環境に近づける

最近転職しました。

で、現状、PCがWindowsしかない + VirtualBoxとかVM使う系禁止という縛りがあるわけです。

というわけで最近のWindowsをMacに近づけられないかという記録をば。

Homebrew(Cask)が恋しい

Chocolateyというブツがありました。

chocolatey.org

Windows用のパッケージマネージャだそう。

Homebrew(Cask) 同様

choco install vim とかでいろんなアプリをインストールできます。

※ただし、もちろんコマンドプロンプト or PowerShellから！

Alfredが恋しい

ランチャーがないのが辛い。

いくつか候補があった中で、Woxにしてみました。

gigazine.net

が、クリップボード履歴とかスニペット機能がない。。

しゃーなくこちらを導入。

クリップボード履歴と定型文機能があります。

forest.watch.impress.co.jp

窓の杜とか久しぶりなんだが。。

ターミナル環境が恋しい

で、最大の問題がUnix系のコマンドが使えないこと。

CUI大好き人間だったので、ないのが辛い。。

Cygwin？いやいや・・・

coLinux

昔使ってたなぁと思ってみてみたら、

http://www.colinux.org/

どうも開発は止まっているよう。

まぁ、今の時代にあんま需要なさそうだしね・・・

MSYS2（Git for Windowsにも付いてくる）

qiita.com

なものがあると。

この辺も参考になるかもしれません。 d.hatena.ne.jp

これだ！と思ったが、自分の環境では動かないので断念。。。

Babun

こんなものがあるそう。

Babun - a windows shell you will love!

一言でいうと使いやすくしたCygwin。

いちおう動いたけど、キーをタイプしてレスポンスが遅いのが辛い。。

ConEmu

Unix系のツールが揃うわけではなく、単なる端末エミュレータだけど、コマンドプロンプトよりは幾分まし。

conemu.github.io

いろいろやったけど、、、

やっぱり無理ある。。

まとめ

5年ぶりくらいにWIndowsを触ってみて、それなりに進化はしているのだけれども、やっぱりMacサイコーという気持ちが強くなりました。

CTRL+N、CTRL+P、CTRL+E、CTRL+A・・・とかのEmacs的キーバインド使えないのも辛い。

Bash on Ubuntu on Windowsがちゃんと使えるようになれば、幾分ましになるのかなぁ・・・

2016-07-28

ターミナル派の人はHyperTermに近いうちに乗り換えると良いかもしれない

HyperTermというターミナルソフトウェアが大変興味深かったので、そのご紹介を。

hyperterm.org

HyperTermとは？

公式サイトで JS/HTML/CSS Terminal と謳っている通り

Electron + React + Redux製のターミナルです。

他のElectronアプリのご多分にもれず、JavaScriptで機能を拡張できる作りになっています！

公開されてから、まだ1ヶ月そこらですが、現時点で既に6000以上GitHubスターを集めています。

github.com

インストール

今のところMacでしか動かんとのこと。

とりあえず試したい方は https://hyperterm.org/#installation から落とすか

Homebrew Caskを使っている人はいつもの

brew cask update
brew cask install hyperterm

で。

初期設定

通常のMacアプリ同様設定変更できます。

⌘, を押すと、HyperTerm上で設定用のJSONファイル（~/.hyperterm.js）が開きます。

デフォルトのフォントとテーマが気に入らなかったので、↓みたいな感じに変更しました。

{
  config: {
    fontSize: 13,

    // font family with optional fallbacks
    fontFamily: '"Droid Sans Mono for Powerline", Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',

    // 中略
  },
  plugins: [
    'hyperterm-seti',
  ],
}