node-sassのError: `libsass` bindings not found. Try reinstalling `node-sass`?

Error: `libsass` bindings not found. Try reinstalling `node-sass`?

対策2016/1/13版。多分もっと古くからある。

インストールメッセージを確認してみると、

node-gyp@3.2.1は-gつきでインストールしろとあるので、

npm install node-gyp -g

を実行。環境全体(グローバル)なので一回でいい。

いつの間にやらバージョンが変わって環境その他が変化していたようです。

もの凄く久しぶりにAir for Androidをいじったらはまったことのまとめ

どうも、けーすけです。

すごく久しぶりにAir for Androidを使ってスマホアプリの機能デモというかモック的なものを作ろうとしたらはまったことのまとめです。

続きを読む もの凄く久しぶりにAir for Androidをいじったらはまったことのまとめ

gulp plug-inを作ってみた。

参考にしたところ:http://horicdesign.com/js/entry-146.html

上記サイト様を見ればほぼ分かります。といっても、gulpfile.jsすらまだまともに書けるか怪しい身としては(ついでに素のnode.jsすらいじったことがない)、through2が一体何をしているのかよく分からなかったので追々調べる。

上記サイトさんだと解説がなかったんで適当に他のプラグインを覗き見したところ、taskからオプションを受け取りたい場合は、module.exportsに入れる関数に引数を設定してやればいいみたい。

ブラウザで動かすようなのと同様に、オブジェクト化して受け取って、||なりなんなりで初期値をセットしてやると使う時に楽。

今回作ったのだと、出力用の拡張子をいじりたくなることが確定しているので、拡張子だけ受け取る。もしかしたら、後々拡張するかもなので、最初からオブジェクトを受けている。

through2.obj()に投げてreturn しないといけない関数 transform(多分、through2とgulpがよしなにしてくれる)はfile, encode, callbackの3引数を取り、それぞれ

  • ファイル(入力)のメタと実態
  • エンコード
  • コールバック

となり、今回わたしが作ったのは例外なんか出ようもないくらいシンプルなリプレース用プラグインだったのであんまり関係ないが、エラーなんかで途中で関数を抜けたりする場合なども必ずcallbackは呼ばないといけない(終了通知となる)。

通常、ファイルを加工して一つのファイルを出力するようなプラグインだと余り関係ないが、through2.obj()の第二引数にも関数オブジェクト(flush)を代入することができ、こちらはファイル単位ではなくてtaskの実行ごと、最後のファイル実行後に呼び出される関数のようで引数はcallbackのみを取る。

例えば、CSSファイルを一つにまとめて最適化する場合やCSS Spriteなどを作成する場合などはファイル単位の処理ではファイルを出力せず(this.push(output_stream)しなければいい)、このflushでまとめてthis.push()する、という形になるんだと思う。

また、あわせて気をつけないといけないのが、transformの中でうっかり、module.exports直下の変数を書き換えてしまうと、スコープの関係でそれ以降のファイル処理に悪影響を与える可能性があるということ。

逆に、flushに残すデータはmodule直下で宣言しておかないと参照できないのでインスタンス変数的な使い方となるようだ。

そこに気をつけておけば、1ファイルずつ加工していく場合は、(テキストファイルが期待される場合は)file.contents.toString()でまず加工しやすい文字列に変換してから好きなように加工して、file.contentsに今度はnew Buffer(StringContents)で内容を戻してやり、拡張子をいじりたい場合などはfile.pathをgulp-utilのreplaceExtension()で加工してから、this.push(file)してやれば以降のチェインにも続いていくし、特に変なことをしなくてもdestが勝手にパスをいじってくれるのでプログラム歴1年生でも色々作れて楽しそうだと思う。

ただnode.jsのテンプレートエンジンやらコンパイラやらのラッパーになってくると、それ自体がファイルを出力したりするのでそういう場合はなにやらちゃんとしてやらないといけない模様(/.tmpに出力されたファイル自体を読み取って、改めてcontentsに入れてpushするなど)。

バイナリファイルの処理はよく分からない(し、するつもりもない)のでひとまずは放置かな。

ちなみに作成したものは、HTMLの特定の書式のコメントを削除し、特定のコメントに囲まれた部分を削除するという、実に簡単なもの。

用途としてはWordpressとかMovableTypeとかその他諸々テンプレートやらなんやら、node.jsでないサーバーで動かすソースの、プレースホルダーと本番環境用のコードを切り替えるというもの。

インデントとか改行とか全く削除しないてきとーっぷりなので、他のプラグインで整理すること前提ですが、モックを組んでからばらしてテンプレート化するのが大嫌いというようなタイプには便利に使ってもらえるんじゃないかと。

npm install gulp-switcher

そのうち使い方(もクソもないが)書きます。

gulp-ectで階層構造が上手く再現されない

相変わらずgulpに振り回されているけーすけです。どう考えても使わない方が早い。

さて、爆速らしいテンプレートエンジン、ECTをgulpで使うgulp-ectですが、npm install gulp-ectして適当に

// ECT
gulp.task('ect', function(){
 return gulp.src(['app/ect/**/*.ect','!app/ect/**/_*.ect'], {base: 'app/ect'})
 .pipe(ect({data: function (filename, cb) {
 console.log(filename);
 cb({foo: "bar"});
 }}))
 .pipe(gulp.dest('app'));
});

とかやって(デバッグ用コンソール出力はこちら様を参考に)、

app
│
├─about
├─company
├─css
├─ect
│ ├─partials
│ ├─about
│ └─company
├─images
└─js

みたいな構造で、ect以下、partialsを除いてaboutとかcompanyとか全てにindex.htmlがある状態で動かしても、何故か、aboutにもcompanyにもect直下のindex.ectが書き出されてしまう。

はて、gulpfile.jsの問題かしらんと思っていじくったりぐぐったりで3時間。

考えて見たら、階層構造自体は再現されているのだからgulpfile.jsの問題とは思えないということで、gulp-ectのindex.jsの23行目辺りを

 //var filePath = file.base;
 var filePath = path.dirname(file.path);

改変。まだちゃんと使ってないですが、とりあえずディレクトリ1個に関しては上書きされずに動作することを確認したので、これでようやくまともにサイトのコーディングに使えるかなという感じです。

爆速爆速という割りに、意外と使われてないのかなぁ。

gulp(あるいはnode.js)でFTP

こんにちは。どう考えてもタスクランナーに使われているけーすけです。

慣れたワークフローを変えるのって大変ですね。しかもいわゆるフロントエンドエンジニアではなくて一通り自分でやっちゃうタイプなので、なかなかワークフローが独特になってしまってるというのもあるかもしれません。

さて、他所のフロントエンジニアさんなんかが書いてらっしゃるblogを拝見すると、本番環境の適用にみなさん、gitなりrsyncなり、リッチなツールを使ってらっしゃる。

VPSなり何なりだったらそういうのでもいいのでしょうが、残念ながら格安レンタルサーバーにとりあえず置いときゃいいやーなんて仕事も結構あるもんです。

そういう場合、まあ、大体FTPを使いますね。面倒ですね。ということでせっかくタスクランナー様を使いだしたのでgulpから使えるFTPクライアントを利用してみましょう。ドキュメントを見るに、一応素のnode.jsでも使えるっぽいです。使う機会があるのかどうかは別ですが。

vinyl-ftp

続きを読む gulp(あるいはnode.js)でFTP

Google Web Starterkitのgulpfile.jsをいじる。

週末、簡単なサイト(※ただし曲がりなりにもレスポンシブになってないと困る)を2サイト上げろと言われて泣いていたけーすけです。

WSKなんて使わなければ1日で終わったと思います。

これはGulp Starter Kitに改名してもいいんじゃないのかな。それはともかく、ver0.5.4betaについてくるgulpfileでgulpしてpublishするとWebフォントを利用したアイコンが上手く表示されません。なんじゃいそりゃ、ということでgulpfile.jsをいじってみました。

WSKどころかgulp二日目なので間違っていてもなんか色々ご容赦ください。

続きを読む Google Web Starterkitのgulpfile.jsをいじる。

emmet.vimでxhtmlを書く際、imgに閉じタグを付けたい(暫定対処

表題通り。<img />とか<br />とかしたい。

zen-coding.vimの時はなんとでもなってたのだけれど、emmet.vimに変えてからなんともならなかったので、力技でなんとなく対処。

参考:https://github.com/mattn/emmet-vim/issues/161

続きを読む emmet.vimでxhtmlを書く際、imgに閉じタグを付けたい(暫定対処

Chromeのタブが「Domainを待機しています」状態でフリーズする現象

表題の通り。これまでもちょくちょく発生していたのですが原因が(何故か表記されているDomainとは異なる)主に重たい広告類だったので、拡張機能でブロックして対処していたのですが、今回、WordPressの編集画面やらプラグイン管理画面やらで起こるようになって、さすがにこれはどうにかしないといけない、と調査開始。

一般的な対処としては

  • 閲覧履歴等、各種キャッシュをクリアする
  • DNSキャッシュもクリアする
  • 高速化ツールを使用してSQLiteも最適化する
  • 拡張機能はとりあえず全部無効にする
  • Proxyの設定の自動検出をやめる
  • 64bit版にしてみる

などが一般的なようですが、いずれをやっても解決しない(リストされた解決方法については、多分ぐぐれば一杯出てくるので割愛します)。

続きを読む Chromeのタブが「Domainを待機しています」状態でフリーズする現象

VMWare Player7 ProとCentOS7でWebテスト環境を構築する

こんにちは。最近ではめっきりサービスエンジニアのような仕事ばかりのkskeです。

 

さて、表題の通りですが、最近、また新しくCMS等をインストールするテスト環境を新しくしないといけなくなったので、覚え書き程度に。

テスト環境仮想化のメリット・デメリット

まず、WindowsなどのデスクトップにWebのテスト環境を構築する場合、ほとんどの場合手軽なXAMPPBitnamiなどを使うと思いますし、個人主体でテスト/Webの実装を行う場合は、おおよそ充分だと思います。

ただ、それでも敢えて仮想化するメリットとしては、

  • 実環境(納品環境)に厳密に合わせたソフトウェアのバージョン、プラグインなどを用意出来る
  • 環境のコピー、バックアップが容易
  • 個人で用意した環境を更にサーバー上に移すことでスムーズに共同作業に移れる
  • 基本的なセットアップを終えた仮想マシンを保存することで再利用が出来る
  • (仮想的な)ハードウェア環境を変更出来る
  • 個別にIPアドレスを割り当てられる

ほとんどのものが一般的に仮想環境の利点ですが、ハードウェアの割り当てを変更できるのは、特にレンタルサーバーなどに納品する場合など、制約が大きい時に事前にテスト出来るという意味合いで重宝しています(もっとも、混雑などにもよるので充分ではないですが)。

また、個別に、ホストマシンとは別にIPアドレスを割り当てられる利点ですが、Webサイトのテスト環境でサイトを切り替える場合、VirtualHostなどを用い、ドメインでアクセスするサイトを切り替える場合が多いと思います。

ただ、スマートフォン、タブレット向けの開発などで実機による検証が必要な場合、ローカル内でのドメインの設定は正直とても面倒くさいです。デスクトップだけであればhostsファイルの編集などでも対応出来ますが、簡単にテスト環境を構築したいだけなのにローカル向けのDNSを立てて、検証用の実機のDNS設定を変更……、など本末転倒もいいところです。

この点、仮想化し、ブリッジ接続などで個別のIPアドレスを割り当てれば、検証用の端末で該当IPアドレスにアクセスすれば動作しますから、極端な話、クライアントへのデモなどにも対応が可能です。

逆にデメリットとしては、

  • サーバーにファイルをアップロードしなければならない

という、何のためにローカルに環境を用意するか分からない、本末転倒な状況になります(外部に大事なデータを置かないというセキュリティ的な面はありますが)。

これに関してはVMWare Playerの場合、VMWare Toolsをインストールしてホストのフォルダをマウントすることで対処出来ますが、環境の移動などのメリットを捨てることになりますので、別の方法で対処したいと思います。

続きを読む VMWare Player7 ProとCentOS7でWebテスト環境を構築する