nwjsで画像ファイル一度に889個開けなかったのでcss spriteにした

TL;DR

nwjs v0.12.2で889個の画像を開こうとしたら、ファイルディスクリプタが足りなくて画像が歯抜けになってしまう。

nwjs-file-descriptor-limitation

css spriteして画像が表示されるようにした。

nwjs-css-sprite

ブラウザ

chromeで開発 => OK

ブラウザで開発するぶんには何も問題なし。

nwjs v0.12.2

$ nwjs dist/
[10654:0714/134306:WARNING:shared_memory_posix.cc(385)] Shared memory creation failed; out of file descriptors

こんなのが出てしまう。

画像が歯抜けに。
nwjs-file-descriptor-limitation

chromium-args => NG

コマンドラインからの起動時に、$ nwjs target/ --file-descriptor-limit=2000 とやると、画像が全部表示された。1000だとダメだったので、ファイル数の倍ぐらい要りそう。

これを、普通の起動時に指定するためには、package.jsonにオプションを書けば良いらしい。が、ダメ。

chromium-args not apply Issue #1060 nwjs/nw.js

2013-09-02 からopenっぱなしになってる。ツライ。

もしくは、macならアプリ起動時に読むplist形式のファイルを修正して、オプションを
渡せる。node-webkit-builder のオプションにplistを用意して渡せる。が、これはつ
らすぎる。

css sprite => OK

ファイル開く数が問題なら、css spriteにすればよい? とたどり着いたので、初めてcss sprite使った。keyword: sprite でnpm package見てよさ気なsprityを選択。css-spriteの後継。

うごいた。ok。

nwjs-css-sprite

css sprite 使って困ったメモ

画像ファイル名

画像ファイル名がそのままcss class名になるので、css classとして使えない名前、内部的になんかかぶる名前はうまく処理されなかったり、lintでエラーになったりする。

具体的には、下記ファイル名がダメだった。

  • +1.png
  • -1.png

この2つはsprity create前に削除することにした。
対応するマッピングのデータ修正をする必要があるのだが、ひとまず先送り。

画像サイズ

元画像が使いたいサイズより大きかった。使うときにはimgタグのwidth, heightで縮小していた。これがcss spriteするとタグその場で縮小できなくなってしまった。

background-postionとかbackground-sizeとか関係する。
sprityは出力するcssを選べて、css以外にless, sassなどでも出せる。lessなどで出してimageを%で拡大縮小するように書けばよいが、そのmixinは自分で書かないといけない。出来れば生成したものを直接webpackに食わせたい。

また、lessで出力する場合、個別画像用のmixin作るところまでしかやってくれないので、コレも、単に全画像を適当にcss spriteして使いたいだけの場合にはもう一手間必要になってしまう。

雑な解決として、retina用の設定をすることで、見た目の表示領域を1/4にすることが出来た。コレで解決したことにした。

img['title']

span['title'] でも効くんだ。なるほど。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中