読者です 読者をやめる 読者になる 読者になる

MANA-DOT

PIXEL ART, PROGRAMING, ETC.

ドット絵のパレットその他を表示するJSをGruntやbrowserifyで作りなおしてみた

PixelTipをGruntやbrowserifyでリファクタリングしてみた

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

デモ

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

articuno_anim_ arcanine_anim_ elfoon_anim_ glaceon_anim_ gastrodon_anim_ gardevoir_anim_ quilava_anim_ charlotte

各部説明

詳細

使い方

動作には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で使っている虫眼鏡とかのアイコンはCSSBase64で埋め込むようにしました。以前公開していたものは画像を表示してなかったので(自サイトのものは、別CSSでアイコン当てていた)、ちょっとかっこよくなりました。

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

JavaScriptソースコード分割記述

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

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

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

ソースコードCoffeeScript

最近CoffeeScript使いまくってますが、便利です。JavaScriptの良い所はそのままにシンタックスの改善がされているので、純粋にJavaScriptが好きな僕にとってはとても書きやすいです。ただ、短く書きすぎてしまいがちなので、あくまで個人開発のツールとして便利といった印象。

これらいろいろをGruntで一括してビルド

結構色々させてますが、これらはGruntが全て自動でやってくれます。便利。