結構前に作ったブラウザでドット絵のパレットその他を表示するライブラリをGrunt / CoffeeScript / browserify / compass といったモダンなツールでビルドするように作りなおしてみました。また、新しくリポジトリを切り直して公開しました。

デモ

以下の画像にマウスを乗せると、Tipが出現します。

各部説明

使い方

動作にはjQueryが必要です。こんな感じのJSを書いて、画像に対してTipを表示するイベントハンドラを登録してやります。

<link rel="stylesheet" type="text/css" media="all" href="http://manaten.net/repos/pixel-tip/dst/pixel-tip.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="http://manaten.net/repos/pixel-tip/dst/pixel-tip.js"></script>
<script type='text/javascript'>
$(function() {
  var tips = [];
  $('img').each(function(_, img) {
    var $img = $(img);
    var tip = new PixelTip($img.attr('src'));
    tips.push(tip);
    $img.hover(function() {
      var pos = $img.offset();
      $.each(tips, function(_, v) { v.hide(); });
      tip.show(pos.left-10, pos.top-10);
    }, null);
  });
});
</script>

よくなったこと

Tip中のアイコンのCSSへの埋め込み

compass を用いて、CSSで使っている虫眼鏡とかのアイコンはCSSにBase64で埋め込むようにしました。以前公開していたものは画像を表示してなかったので(自サイトのものは、別CSSでアイコン当てていた)、ちょっとかっこよくなりました。

compassはinline-imageを使うことで、CSSへの画像埋め込みをコンパイル時にやってくれます。

JavaScriptのソースコード分割記述

browserifyを用いることで、JavaScriptを分割して記述できるようになりました(こんなかんじ)。

browserifyはnodejsのCommonJSスタイルで分割記述したJavaScriptのファイルをひとまとめにし、ブラウザで実行可能にしてくれるツールです。また、依存しているnpmのモジュールもブラウザで実行可能にしてくれたりします。

クライアントサイドJavaScriptをモジュール分割して記述方法として、他にconcatを使って単につなげて上げる方法や、RequireJSによる分割が有りますが、concatは当然構造を持っていないので、ある程度複雑なプロジェクトには不適ですし、RequireJSは非同期的にモジュールを読み込むのが主目的(全部ひとまとめにする方法もあるようですが)で、単に開発のしやすさのためにモジュール分割してる場合には微妙かなと思っていた次第で、個人的にはこれが一番しっくりきています。