適当な思いつきで書くブログ

UbuntuやPerlやJavaScriptやVimやZshやShellScriptやMySQLと戯れている中で適当な思いつきでやってみたことを書いています。

lesscの圧縮オプションの比較 --compress V.S. --yui-compress

less css

lesscの圧縮オプションは--compressと--yui-compressがある。

これらの圧縮オプションでコンパイル結果は下記のような差がある。

--compress

  • すべてのコメント表記を削除する
  • スタイルごとに改行

--yui-compress

  • /*! comment */ のコメントは削除しない(/* comment */は削除される)
  • すべてのスタイルが一行にまとめられる

ソースレベルで比較すると下記のような感じ。

生のlessファイル(foo.less)

@charset 'utf-8';

/*!
 * foo
 */

/*
 * 色指定
 */
body {
  color: #333;
}

article {
  p {
    // pは少し薄く
    color: #666;
  }
}

--compressによるコンパイル結果

$ lessc --compress foo.less
@charset 'utf-8';
body{color:#333;}
article p{color:#666;}

--yui-compressによるコンパイル結果

$ lessc --yui-compress foo.less
@charset 'utf-8';/*!
 * foo
 */body{color:#333}article p{color:#666}

--yui-compressは改行しない分だけ圧縮率が高い。また、Twitter Bootstrapのようなライブラリのライセンス表記が削除されない(/*! comment */で記載しあることが前提だけれども)。
圧縮オプションを利用するならば--yui-compressの方が良さそう。

Ubuntu12やLinuxMint13でGNOME Shellのテーマを変更する

linux gnome-shell

GNOME Shellでテーマを変更するには、エクステンションのUser Themesをインストールする必要がある。

ただし、Ubuntu12.04やLinuxMint13においては、User Temesのインストールだけではテーマを変更できないどころかgnome-tweak-toolすら起動しなくなってしまうので、以下のような対処が必要。

1. gnome-tweak-toolのインストール
$ sudo apt-get install gnome-tweak-tool
2. User Themeエクステンションのインストール

https://extensions.gnome.org/extension/19/user-themes からON/OFFでインストールできる。

3. スキーマファイルのコピーとコンパイル*1
$ sudo cp ~/.local/share/gnome-shell/extensions/user-theme@gnome-shell-extensions.gcampax.github.com/schemas/org.gnome.shell.extensions.user-theme.gschema.xml /usr/share/glib-2.0/schemas/
$ sudo glib-compile-schemas /usr/share/glib-2.0/schemas/
4. テーマをダウンロード

GNOME-Look.orgあたりから。

5. ダウンロードしたファイルを解凍して、~/.themesにコピーする

その際に./gnome-shellディレクトリが以下のような位置にあること。

~/.themes/THEME NAME/gnome-shell/...
6. gnome-tweak-toolを起動し、「テーマ」から選択

テーマを正しく適用するにはAlt+F2からrまたはrestartと入力し、gnome-shellを再起動しなければならないこともある。

*1:[https://extensions.gnome.org/extension/19/user-themes/ より

VimperatorでTracのチケット番号やチェンジセット番号をいい感じに扱う

vimperator firefox

VimperatorでのTrac利用におけるいい感じな小ネタを二つほど...。

copy.jsを使ってチケット番号やチェンジセット番号をいい感じにコピる

会社ではTracを使用しているのだけれども、Tracリンクの記法で「#」＋数字は「チケット番号」、「r」＋数字は「チェンジセット番号」を示すことから、社内IRCでも下記のようなやりとりが多い。

#1234 のチケットが云々...
r1234 の修正で云々...

このときに、直接数字を手打ちしたり、チケットのページからマウスで数字部分を選択してコピーしたりなんていうのが許されるのは小学生ま（ｒｙということで、Vimperatorプラグインのcopy.jsを利用するといい感じにコピーできるようになる。

javascript <<EOM
(function () {
  liberator.globalVariables.copy_templates = [
    {label: 'trackChangesetOrTicketLink',
     value: 'copy number',
     custom: function() { return content.document.location.pathname.replace(/.*\/(changeset|ticket)\/(\d+)/, function($0, $1, $2){return ($1 === 'changeset' ? 'r' : '#') \
     map: ',tn'},
  ];
})();
EOM

上記の処理を.vimperatorrcに書いておき、Tracのチケットかチェンジセットのページで「,tn」すると「#1234」とか「r1234」とかでいい感じにコピれる。

チケットやチェンジセットや検索結果にいい感じにアクセスする

自分統計によると会社Tracのアクセスの実に67%(適当)は「チケット」と「チェンジセット」と「検索」に絞られる。

let g:trac_base_url = 'http://YOUR.TRAC.URL/PATH'
let g:trac_force_type = ''  " '#' OR 'r' OR '' default ''

js <<EOM
  commands.addUserCommand(
    ['trac', 'tr'],
    'Tracのページへいい感じに',
    function(args) {
        var arg = args.join('');
        var force_type = liberator.globalVariables.trac_force_type;
        force_type = /^(?:r|#)$/.test(force_type) ? force_type : '';

        if (force_type && !isNaN(arg)) {
            arg = force_type + arg;
        }

        content.document.location.href = liberator.globalVariables.trac_base_url + (function() {
            if (/^(?:r|#)\d+$/.test(arg)) {
                return arg.replace(/(#|r)(\d+)/, function($0, $1, $2) {
                    return ($1 === 'r' ? 'changeset/' : 'ticket/') + $2;
                });
            } else {
                // return 'search?q=' + encodeURIComponent(arg); 2012/10/10 修正
                return 'search?q=' + encodeURIComponent(args.join(' '));
            }
        })();
    }
  );
EOM

上記を.vimperatorrcに書いておき(trac_base_urlはTracのURLを指定してください)、下記のようにtracに対して「# OR r」付き番号または検索キーワードを渡してあげると、それぞれのページをいい感じに開いてくれる。

:trac #1234  // http://YOUR.TRAC.URL/PATH/ticket/1234
:trac r1234  // http://YOUR.TRAC.URL/PATH/changeset/1234
:trac hoge   // http://YOUR.TRAC.URL/PATH/search?q=hoge

trac_force_type(名前が微妙...)を「# OR r」で指定してあげると、数字だけが渡された場合に「チケット番号」または「チェンジセット番号」として扱ってくれる。

// g:trac_force_type = ''
:trac 1234  // http://YOUR.TRAC.URL/PATH/search?q=1234

// g:trac_force_type = 'r'
:trac 1234  // http://YOUR.TRAC.URL/PATH/changeset/1234

// g:trac_force_type = '#'
:trac 1234  // http://YOUR.TRAC.URL/PATH/ticket/1234

LinuxMint13をインストールしたのでGNOME Shell環境のチラ裏

linux gnome-shell

ようやくLinuxMintを13にアップデートした。

Main Page - Linux Mint

なんだかんだでGNOME Shellが一番使い勝手が良いのでgnome-sehllとgnome-tweak-toolをインストール。以下はその設定(主にgnome-tweak-tool)。

インストール

$ sudo apt-get install gnome-shell
$ sudo apt-get install gnome-tweak-tool

gnome-shell-extensions

Mint13を新規にインストールしたところ、Mint12のときにはあったgnome-shell-extensions(拡張パックのようなもの)がなかったので、欲しい拡張だけ自分で揃えた。

GNOME Shell Extensionsはブラウザ上で拡張を(enable|diable)設定が可能。gnome-tweak-toolからも「GNOME Shell機能拡張」メニューから設定できる。

Frippery Move Clock - GNOME Shell Extensions

時計を右寄せしてくれる拡張。デフォルトの中央表示は目立つので...。

Windows Alt Tab - GNOME Shell Extensions

デフォルトのAlt-Tabは、同一アプリケーションが二つ以上開いている場合にグルーピングしてひとつにまとめてしまう。グルーピングせずひとつひとつ表示されるAlt-Tabを実現してくれる拡張。

Advanced Settings in UserMenu - GNOME Shell Extensions

デフォルトのユーザメニューからは直接(再起動|シャットダウン)ができず、一度ログアウトする必要がある。メニューにシャットダウンを追加してくれる拡張。

Status Icon Fixer - GNOME Shell Extensions

一部の常駐アプリのアイコンを画面右上に表示。すべてではないのが少々残念だけれども、まー便利。

(追加)Disable Corners - GNOME Shell Extensions

マウスカーソルがコーナーに移動した際に表示される画面一覧を無効にする。表示したい場合はWindowsキーで。


gnome-tweak-toolの設定

ウインドウの最大化・最小化ボタン

GNOME Shellのウインドウには最小化・最大化ボタンがなく、あるのは閉じるボタンだけ。そんなに利用しないけれども、なきゃないで不便なので設定変更。

とりあえず、こんな感じ。

bashから起動したzshで、exitしたらbashもexitするようにしたら捗った

shell

Zshのインクリメンタルサーチがないと生きていけない人間になってしまったので、login shellを指定できない環境の場合は、デフォルトのshell(今回の場合はbash)からzshを起動している。

# .bashrc
# サーバにzshがインストールされていたらそのzsh、なければhomeディレクトリに入れたzshを起動している
which zsh 1>/dev/null 2>&1 && zsh || ~/local/bin/zsh

これでとりあえずよしとしようと思っていたのだけれども、exitが面倒。
zshをexitした後にbashもexitしなければならない。やっぱり一発でexitしたい。

しばらく悩んでいたのだけれども簡単に解決できた。要はzsh終了時にbashも終了させれば良いだけ。

(which zsh 1>/dev/null 2>&1 && zsh || ~/local/bin/zsh) && exit

exitし放題。

PropelでBLOBな値の中身があるかないかの判定

php

BLOBの中身を見たいときはgetContents()を使うっぽい。

$item = ItemPeer::retrieveByPK(FOO);
if ($item->getBlobData() && $item->getBlobData()->getContents()) {
    // あるよ
}

プロペルって聞くとライフが0.5くらい減る気がするのなんで。

jquery.balloon.jsをクリックで表示したいときのTIPS

jquery.js

jquery.balloon.jsはツールチップ(バルーン？)を簡単に利用できるプラグインで、

$('a#help').balloon({contents: '<p>Help me!</p>'});

jsにこんな感じに書いておくとa#helpの要素にマウスオーバーするとcontentsで指定したHTML(プレーンテキストでもOK)をツールチップで表示してくれる。マウスアウトするとツールチップは消える。

これをマウスクリックに反応させようとすると、サイトのデモには

$('a#help').showBalloon({contents: '<p>Help me!</p>'})
  .toggle(
    function(){ $(this).hideBalloon(); },
    function(){ $(this).showBalloon(); }
  );

のようにすればおｋとのことなんだけど、これだとツールチップが初めから表示されてしまっている。

初めは非表示、クリックすると表示みたいにしたいときは、

jQuery(document).ready(function($) {
  $('a#help').showBalloon({contents: '<p>Help me!</p>'})
    // ごめんなさい、typoしてました...
    //  .hideBaloon()
    .hideBalloon()    // ここでいったん非表示にする。
    .toggle(
    // ごめんなさい、カンマ位置を間違えていました...
    //    function(){ $(this).showBalloon(); }
    //    function(){ $(this).hideBalloon(); },
      function(){ $(this).showBalloon(); },
      function(){ $(this).hideBalloon(); }
    );
});

みたいにしてあげればおｋ。
ちょっとカッコ悪いけど、CSSでごにょごにょやるよりかマシかなーと。