【Vagrant】rsync で仮想環境からローカル環境にデータを同期する

様々な環境開発を考えると rsync で同期したい訳だが、これだと仮想環境からローカル環境への同期が対応されていない（2014/10/23 現在）。

rsync-push and rsync-pull · Issue #3062 · mitchellh/vagrant · GitHub

コメントを見る限り、所望するユーザは多いようだ。
また、この問題を解決するプラグインがいくつか紹介されている。

• vagrant-rsync-back
• vagrant-unison
• vagrant-winnfsd

vagrant-rsync-back は、仮想環境からローカル環境に rsync を用いてデータを同期するプラグイン。

インストール

vagrant plugin install vagrant-rsync-back

同期

vagrant rsync-back

これだけ。とても簡単。自動的に同期しないので注意。

vagrant-unison は、unison(ファイル同期プログラム) を用いて双方向で同期を行えるプラグイン。試していないので何とも言えない。仮想環境に unison のインストールが必須。プラグインの問題か、複数の synced_folder には対応していない。

vagrant-winnfsd は、Mac でしか使えない共有タイプである nfs を Windows でも使える様にするプラグインみたい。こちらも試していない。

ネイティブで実装されるまで、vagrant-rsync-back を使っていこうと思う。

【Mac のみ】Kitematic でフロントエンドの開発環境を整えられるか？

追記: 2014-10-21 10:40

無事インストールはできるようになっていた。
ただ、イメージを作成することしかできず、アプリケーションの作成が行えない状態となっている。
もう少し様子を見ようと思う。

追記: 2014-10-20 22:46

早速 0.3.0 がリリースされていたので、これから試す。

---

Vagrant + Docker でフロントエンドの開発環境が整えられるか？ - 2noの日記

前回からの続き

Vagrant + Docker が思うような結果にならなかったので、別の方法を Mac オンリーで考えた。

Kitematic とは、Docker を GUI で管理できるツールであり、
kitematic-vm という一つの vm 上で管理される。

Kitematic

早速インストール…と思ったが、Yosemite にアップデートしたせいなのか、
インストールに失敗しまくりで断念。
10.9 の時もインストールが失敗する頻度が高かったので原因は分からない。

もうすぐバージョン 0.3.0 が出そうなので、その時に直っていると期待して待つ。

余談だが、この Kitematic は node-webkit で作られているせいか、ブラウザみたく Ctrl-R や Backspace が効くので気持ちが悪い。

Vagrant + Docker でフロントエンドの開発環境が整えられるか？

追記: 2014-10-20 17:19

問題点に挙げている「vm が使い回せない」だが、Vagrant プロジェクトを一つにしてしまっていることが原因だった。これについては、また後日追記する。

---

バックエンド開発では毎回お世話になっている Vagrant だが、フロントエンド開発でも使えるのか試してみた。

なぜ Vagrant + Docker で開発環境を整えたいかと言うと、次の二点が挙げられる。

• ローカル環境を汚さずに Windows/Mac で開発環境を整えることが容易になるのではないか。
  ※ 開発環境は Docker のイメージとして提供されるので、OS 間の環境構築の面倒を解消してくれるはず
• vm を再利用し、コンテナを用意することで省スペースでの開発が可能になるのではないか。

結論から言うと、環境は整えられるが思った様にはいかなかった。
使い方から間違っているかもしれないが。

とりあえずテストとして次の Vagrantfile を書いた。

この Vagrantfile があるディレクトリで vagrant up を実行すると、proxy vm の作成が行われる。
今後 docker コマンドはこの proxy vm から実行されるが、Vagrant を使用する上で気にする必要はない。

synced_folder に nfs を指定しているので、Windows では動かないはず。これについては別のオプションを検討した方が良い。
※ nfs の代わりに rsync を試してみたが、自分が持っている Windows 機では同期がうまくいかなかった。

そして肝心のイメージだが、dockerfile/nodejs-bower-grunt を採用した。

vagrant up が成功すれば、以下のコマンドが使用可能になる。

Run node

vagrant docker-run develop -- node ...

Run npm

vagrant docker-run develop -- npm ...

Run bower

vagrant docker-run develop -- bower ...

Run grunt

vagrant docker-run develop -- grunt ...

これらのコマンドは、コンテナ内では synced_folder で指定した /data において実行される。
今回は proxy.vm.synced_folder ".", "/data" としているので、Vagrantfile と同階層に各種設定ファイルを用意してコマンドを実行してあげれば良い。

自分はテストとして package.json を用意して vagrant docker-run develop -- npm install を実行してみた。
node_modules がコンテナ内に生成され、同期されてローカルにも生成されたので成功と言える。

問題点

Windows で同期がうまくいかない

単に環境の問題かもしれないが、これでは使えると言えない。

vm が使い回せない

Docker だし、コンテナを複数作れば vm はひとつで良いのかな？と思っていたのだけど、Vagrant は作成する vm の名前を指定（この場合 docker_proxy）していて、且つ作成済みの場合は同名の vm が存在しているとエラーを吐いて終了する。
つまり、上の Vagrantfile をコピーして使い回すことができない。
設定次第でうまく回避できるのかもしれないが、よくわからなかった。

結論

ローカル環境を汚さない点や、そもそも環境を用意してくれている点で良いが、複数 vm を作るのは Docker の利点が無いかなと思った。

【Mac】clang によるビルドエラー【Xcode 5.1】

brew upgrade を実行して mercurial のアップグレードを行っていたら、次のエラーが発生した。

clang: error: unknown argument: '-mno-fused-madd' [-Wunused-command-line-argument-hard-error-in-future]
clang: note: this will be a hard error (cannot be downgraded to a warning) in the future
error: command 'clang' failed with exit status 1
make: *** [build] Error 1

今までになかったエラーが出ている。

どうやら Xcode 5.1 へのアップデートによって clang が更新された事が原因ぽい。
https://developer.apple.com/library/ios/releasenotes/DeveloperTools/RN-Xcode/Introduction/Introduction.html

As of Apple LLVM compiler version 5.1 (clang-502) and later, the optimization level -O4 no longer implies link time optimization (LTO). In order to build with LTO explicitly use the -flto option in addition to the optimization level flag. (15633276) The Apple LLVM compiler in Xcode 5.1 treats unrecognized command-line options as errors. This issue has been seen when building both Python native extensions and Ruby Gems, where some invalid compiler options are currently specified. Projects using invalid compiler options will need to be changed to remove those options. To help ease that transition, the compiler will temporarily accept an option to downgrade the error to a warning:

-Wno-error=unused-command-line-argument-hard-error-in-future

Note: This option will not be supported in the future. To workaround this issue, set the ARCHFLAGS environment variable to downgrade the error to a warning. For example, you can install a Python native extension with: $ ARCHFLAGS=-Wno-error=unused-command-line-argument-hard-error-in-future easy_install ExtensionName

Similarly, you can install a Ruby Gem with:

$ ARCHFLAGS=-Wno-error=unused-command-line-argument-hard-error-in-future gem install GemName 16214764 updated

どうやら、-Wno-error を指定することでエラーを回避出来るらしい。
試しに例に習って実行してみたらアップグレードできた。

$ ARCHFLAGS=-Wno-error=unused-command-line-argument-hard-error-in-future brew upgrade

この -Wno-error は将来的にサポートされなくなる様なので注意。

glue 0.9.2 で scss 吐き出しを試す

追記：14/08/21

吐き出された scss は、css で吐き出した結果と同じことが分かった。
ソースレベルで見ても、css のテンプレートをそのまま使っている模様。

---

いつの間にか glue が大幅アップデートされて scss の吐き出しがサポートされていた。 https://glue.readthedocs.org/en/latest/

元々 0.4.1 がインストールされていたので、アップデートして試してみる。

$ sudo pip install glue --upgrade
$ glue -v
glue 0.9.2

テスト用にフリーアイコンを入手。
http://www.fatcow.com/free-icons http://www.fatcow.com/fatcow-icons/fatcow-hosting-icons-3800.zip

ダウンロードしたアイコンを丸ごとスプライトマップにするには数が多すぎるので適当にディレクトリを作って 9 個アイコンをコピーする。

.
└── FatCow_Icons
    ├── 32_bit.png
    ├── 3d_glasses.png
    ├── 64_bit.png
    ├── accept(2).png
    ├── accept.png
    ├── access_exports.png
    ├── access_imports.png
    ├── accordion.png
    └── account_balances.png

実験

$ glue FatCow_Icons --output=output --scss

結果

output/
├── FatCow_Icons.png
└── FatCow_Icons.scss

画像

scss

/* glue: 0.9.2 hash: befcc8c81c */
.sprite-FatCow_Icons-account_balances,.sprite-FatCow_Icons-accordion,.sprite-FatCow_Icons-access_imports,.sprite-FatCow_Icons-access_exports,.sprite-FatCow_Icons-accept,.sprite-FatCow_Icons-accept2,.sprite-FatCow_Icons-64_bit,.sprite-FatCow_Icons-3d_glasses,.sprite-FatCow_Icons-32_bit{
    background-image:url('FatCow_Icons.png');
    background-repeat:no-repeat;
}

.sprite-FatCow_Icons-account_balances{
    background-position:0 0;
    width:16px;
    height:16px;
}

.sprite-FatCow_Icons-accordion{
    background-position:-16px 0;
    width:16px;
    height:16px;
}

.sprite-FatCow_Icons-access_imports{
    background-position:0 -16px;
    width:16px;
    height:16px;
}

.sprite-FatCow_Icons-access_exports{
    background-position:-16px -16px;
    width:16px;
    height:16px;
}

.sprite-FatCow_Icons-accept{
    background-position:-32px 0;
    width:16px;
    height:16px;
}

.sprite-FatCow_Icons-accept2{
    background-position:-32px -16px;
    width:16px;
    height:16px;
}

.sprite-FatCow_Icons-64_bit{
    background-position:0 -32px;
    width:16px;
    height:16px;
}

.sprite-FatCow_Icons-3d_glasses{
    background-position:-16px -32px;
    width:16px;
    height:16px;
}

.sprite-FatCow_Icons-32_bit{
    background-position:-32px -32px;
    width:16px;
    height:16px;
}


@media screen and (-webkit-min-device-pixel-ratio: 1.0), screen and (min--moz-device-pixel-ratio: 1.0),screen and (-o-min-device-pixel-ratio: 100/100),screen and (min-device-pixel-ratio: 1.0),screen and (min-resolution: 1.0dppx){
    .sprite-FatCow_Icons-account_balances, 
    .sprite-FatCow_Icons-accordion, 
    .sprite-FatCow_Icons-access_imports, 
    .sprite-FatCow_Icons-access_exports, 
    .sprite-FatCow_Icons-accept, 
    .sprite-FatCow_Icons-accept2, 
    .sprite-FatCow_Icons-64_bit, 
    .sprite-FatCow_Icons-3d_glasses, 
    .sprite-FatCow_Icons-32_bit
    {
        background-image:url('FatCow_Icons.png');
        -webkit-background-size: 48px 48px;
        -moz-background-size: 48px 48px;
        background-size: 48px 48px;
    }
}

正常に出力はされた。
ちなみに、アイコン一式丸ごと試したら 26616 行と膨大な量になった。

Sass 3.3 で変数を使って更に変数展開

本日 Sass 3.3 が正式リリースされた。
http://blog.sass-lang.com/posts/184094-sass-33-is-released

このアップデートで以前からずっとやろうと思ってたことをやってみる。
もしかしたら標準機能として追加されているのかもしれないけど、その辺りは気にしない。

何をやりたかったかと言うと、変数を使って更に変数を展開すること。
StackOverflow にも Double interpolation (variable inside variable) in Sass という質問があるので、こちらの例を参考にしてみる。

$gray = #ccc;
$white = #fff;

@each $color in gray, white {
    div_#{$color} {            // works fine
        color: #{$#{$color}};  // fails
    }
}

もちろん、この例はエラーになる。
じゃあ、どうしたら良いだろうかと調べてみると、sass-utilities の interpolate-variable 関数を使うと出来るらしい。内部処理の問題で Sass 3.3 以降でのみ使える。

gem でのインストールも出来るので、試すのは簡単。
ただし、これ自体は compass 用に作られているので、sass オンリーで試したいなら改変が必要。

必要な部分だけ抜き出したのがこちら。

module Sass::Script::Functions

  # Interpolate
  def interpolate_variable(variable_name)
    environment.var(variable_name.value) || Sass::Script::Bool.new(false)  
  end

end

これを適当に sass-utilities.rb と名前を付けて保存しておく。
次に scss ファイルを作成する。

$gray: #ccc;
$white: #fff;

@each $color in gray, white {
    div_#{$color} {
        color: interpolate-variable(#{$color});
    }
}

これも適当に test.scss とか名前を付けて保存しておく。

▼実行

$ sass -r ./sass-utilities.rb test.scss

▼結果

div_gray {
  color: #cccccc; }

div_white {
  color: white; }

無事展開できた。

IE9 以下で Web Worker

IE9 以下は Web Worker はサポートしていない為、下記のスクリプトが必要。
https://code.google.com/p/ie-web-worker/
https://github.com/in2rd/ie-web-worker/

Worker の仕様上、コンストラクタは必須であり、インスタンスを生成した直後にスクリプトの読み込みが開始されてしまう。これによる問題としては、new の後に onerror、onmessage を設定していても開始直後は未定義になってしまい、スレッド内で postMessage を呼び出しても処理されない（ちなみに Worker を正式サポートしている各ブラウザでは、この問題は生じない）。

setTimeout を駆使する事で、この問題は対応出来る。

▼対応例

// スレッド内の処理

// onmessage に処理が行かない。
postMessage('test1');

// onmessage に処理が行く。
setTimeout(function() { postMessage('test2'); }, 1);