Tech Archive

I found a nice elisp to show line number.

wb-line-number

As you see on screenshot, it shows line number on left side of the emacs window. As usual .el files, download it into your elisp directory, and add some lines in your emacs.el file. I usually like to wrap line by window size. And here’s what I did on .el file.

(require 'wb-line-number)
(setq truncate-partial-width-windows nil)  ; wrap line by window size
(wb-line-number-toggle)

# 追記: このバグは最新の開発版では修正されています。WebKit Bugzilla を参照のこと→ WebKit Bugzilla 19094. Nightly でも既に修正されているみたいですね。もしこれに関してハックをしたなら（つまり僕のことですが）、以下のようなもう一つ、ハックが必要です。

var webkit = indow.navigator.userAgent.match(/WebKit\/([0-9]{3})/);
if (webkit && parseInt(webkit[1]) < 528) {
...
}

---

JavaScript ライブラリの多くは、HTML エレメントの（ページ上での）ピクセル位置（絶対座標）を返すメソッドを備えています。jQuery の jQuery.offset() しかり、MochiKit の MochiKit.Style.getElementPosition() しかり、MooTools の Element.getPosition() 等々… ほとんどの場合これらはうまく動くのですが、今日動かないケースを確認し、おそらく Safari のバグだと思うのでここに報告しておきます。

以下の条件が揃ったとき、ピクセル絶対座標を取得するメソッドは間違った値を返します。

1. ブラウザは Safari
2. 取得しようとしているエレメントは TD (あるいは display:table-cell)
3. CSS で vertical-align を top 以外の値 (middle or bottom) が設定されている

次にこのケースの例を作りました。Safaribug: wrong offsetTop on TD. テーブルセルをクリックすると、アラートで、そのテーブルセルのピクセル座標を返します。Safari とその他のブラウザで開いてみてください。違いがあります。

ではコードで解説します。以下は Google doctype project で見つけた PageOffset: How to calculate the position of an element on the page (goog.style.getPageOffset) を下にしています。オリジナルの PageOffset のコードは非常に細かく説明してあるので、一度読んで見ることをお勧めします。長くないし。

function getPageOffset(el) {
    var pos = {
        x: 0,
        y: 0
    };
    var viewportElement = document;
    if (el == viewportElement) {
        return pos;
    }

    var parent = null;
    var box;

    pos.x = el.offsetLeft;
    pos.y = el.offsetTop;

    parent = el.offsetParent;
    if (parent != el) {
        while (parent) {
            pos.x += parent.offsetLeft;
            pos.y += parent.offsetTop;
            parent = parent.offsetParent;
        }
    }

    if (el.style.position == 'absolute') {
        pos.y -= doc.body.offsetTop;
    }

    parent = el.offsetParent;
    while (parent && parent != document.body) {
        pos.x -= parent.scrollLeft;
        parent = parent.offsetParent;
    }

    return pos;
};

Safari では、指定したエレメントから、その相対目標（これを指定しなければ、document.body を相対目標とします。つまりページの絶対座標ですね。）まで、エレメントを上り詰めて、その間の offset を累積加算していきます。問題は、一番最初の el.offsetTop (15行目) で起こります。これは table cell で、padding/margin/border が設定されていませんから、0 であるべきなのですが、Safari は、子孫要素への offset を返しているようなんですね。

どうにもいい方法が見つからなかったので、実際のアプリケーションではダーティハックを入れましたが、WebKit チームの早急な fix を望みます!!。

# EDIT: This bug will be fixed soon. See WebKit Bugzilla 19094. It’s fixed already on Nightly. If you do have a tweak for this bug, (such as me) you need to add another sniff like follows.

var webkit = indow.navigator.userAgent.match(/WebKit\/([0-9]{3})/);
if (webkit && parseInt(webkit[1]) < 528) {
...
}

---

Most of JavaScript library comes with a method that returns pixel position of the given element. For example, jQuery has jQuery.offset(), MochiKit has MochiKit.Style.getElementPosition(), MooTools has Element.getPosition(). They work well in most cases, but today i found the situation that doesn't work and that, I think, is a Safari's bug.

Before going into detail, here's the condition that pixel position getter method doesn't work.

1. The browser is Safari
2. The element you try to work on is TD (or display:table-cell)
3. It set vertical-align NOT as top (maybe middle or bottom)

Here I made examples for this case: Safaribug: wrong offsetTop on TD. When you click each table cell, it will return the pixel position of the clicked TD. Open the page with Safari and other browsers. There are differences.

How it happens? Let me introduce how JS lib calculate the pixel position of any given element. I found a nice code with comments on Google doctype project.

PageOffset: How to calculate the position of an element on the page (goog.style.getPageOffset)

It's really step-by-step good explain, you should go through with it. Here I extract how Safari runs the code:

function getPageOffset(el) {
    var pos = {
        x: 0,
        y: 0
    };
    var viewportElement = document;
    if (el == viewportElement) {
        return pos;
    }

    var parent = null;
    var box;

    pos.x = el.offsetLeft;
    pos.y = el.offsetTop;

    parent = el.offsetParent;
    if (parent != el) {
        while (parent) {
            pos.x += parent.offsetLeft;
            pos.y += parent.offsetTop;
            parent = parent.offsetParent;
        }
    }

    if (el.style.position == 'absolute') {
        pos.y -= doc.body.offsetTop;
    }

    parent = el.offsetParent;
    while (parent && parent != document.body) {
        pos.x -= parent.scrollLeft;
        parent = parent.offsetParent;
    }

    return pos;
};

The problem happens on the very first access to el.offsetTop on line 15. It should be 0, since it's a table cell and no padding/margin/border set, but it seems Safari returns the vertical offset to the descendant element on that property.

I don't come up with any smart way to solve it... so I just tweak it.. Please WebKit, fix this bug!!

I got Learning GNU Emacs, Third Edition. And here’s the summary I learned from Chapter 1.

Key Stroke	Command Name	Action
C-x C-f	find-file	Find file and read it into a new buffer.
C-x C-v	find-alternate-file	Read an alternate file, replacing the one you’ve done with C-x C-f
C-x i	insert-file	Insert file at point position.
M->	end-of-buffer	Move point to the end of the buffer; leave mark at previous position. By being followed by C-x i you can append file.
C-x C-s	save-buffer	Save buffer with the current buffer name.
C-x C-w	write-buffer	Emacs prompts you to set a new file name, and save it.
C-x C-c	save-buffers-kill-emacs	Exit Emacs with asking you if there are any un-saved buffer. But *scratch* is different. Even you’ve editted *scratch*, Emacs discard it silently.
C-h	help-command	Enter the online help.
C-h ?	help-for-help (or help-for-help-internal)	Display a list of available help command?
C-h f	describe-function	Display help for a given command.
C-h k	describe-key	Display help for a given key stroke.
C-h v	describe-variable	Display help for a given variable (a symbol).
C-h t	help-with-tutorial	Start Emacs tutorial.

dired

dired stands for DIRectory EDit. (Not sure how it’s pronounced.) It is very useful bundled application. When you do C-x C-f then just hit enter. You’ll see something like ls but with cursor on it. You can do a lot of stuff by this, but mainly, you’ll do open files, just choosing file with cursor, and hit enter. You can also delete by press d for marking. And then press x to execute it. I’m sure there’s a lot more to do, but that’s what I do so far.

If you’re a Mac person, and If you using Display ANSI colors on Terminal.app, and if you use black background theme, such as Pro, you hardly see color of Blue. You can try TerminalColoreopard. Yoshimasa Niwa made a SIBML extension for choosing ANSI color. This ANSI color setting can be only for for one user. Cannot be like theming, but I don’t change theme everyday, so that works fine for me.

js2-mode

In emacs, there are Major mode and Minor mode. Major mode work like a Perspective in Eclipse IDE. It gives certain kind of framework to work on a given issue. There are ecmascript-mode.el, javascript.el and js2.el. I use js2.el for now.

In order to make js2.el work, emacs needs to know which directory autoload search for. It’s like a path setting in your shell. How do you know which directories your emacs search for? Type C-h v load-path. It will return your emacs’ search path. I found a nice article about load-path on emacs wiki. I wanna load everything in ~/.emacs.d is represented as follows.

(progn (cd "~") (normal-top-level-add-to-load-path '(".emacs.d")))

And download js2.el, put it into my ~/.emacs.d/. Open js2.el, then do M-x byte-compile-file. You’ll get js2.elc, which is pre-compiled version. Then add following lines in .emacs.el

;; js2-mode
(autoload 'js2-mode "js2" nil t)
(add-to-list 'auto-mode-alist '("\\.js$" . js2-mode))

now whenever you open *.js, you’ll use Js2 Major mode.

ctags

Tag is not like delicious tag. It’s more like search index.

EmacsTags

I use exuberant ctags. Just compile and install (./configure ;; make;; sudo make install). And disable original ctags (sudo chmod a-x /usr/bin/ctags).

Outside of emacs, go to top directory of your source file. Try ctags -e --recurse --languages=javascript. Then you’ll get TAGS file in the same directory.

You can do
M-x visit-tags-table and choose TAGS file first. But if you don’t choose TAGS file and try to do tag jump by M-., you’ll be asked which file emacs should read anyway.

A few times, I mentioned on my blog here, “JavaScript: The Good Parts.” The author of the book, Douglas Crockford gave a talk at Google Campus on Feb 27, 2009. You can check it out on YouTube.

JavaScript: The Good Parts

The talk is very insightful. And it actually very much about what he wrote on the book. If you are interested in reading that book but haven’t got that yet, you may get at least half of his points by watching this Google TeckTalk. And also he is touching what the future of JavaScript will be. Strict mode will be interesting. And I guess it would boost the speed.

I pick up some of his points what I was interested in.

Continue reading

Auto save revisited

So I joined irc.freenode.net#emacs, and asked how to configure auto-save. Several nice people helped me out. Here’s my .emacs.el for backup and auto-save.

(setq make-backup-files t)       ; enable backup file
;;; locate where you backup files
(setq backup-directory-alist
      (cons (cons "\\.*$" (expand-file-name "~/.backup"))
            backup-directory-alist))

(setq version-control t)     ; enable versions of backup
(setq kept-new-versions 5)   ; how many keep new verisons
(setq kept-old-versions 5)   ; how many keep old versions
(setq delete-old-versions t) ; delete old version without asking
(setq vc-make-backup-files t) ; still make a backup for version-controled files                

;;; Autosave in .backup dir
(setq auto-save-file-name-transforms
  '(("\\([^/]*/\\)*\\([^/]*\\)\\'" "~/.backup/\\2" t)))

Originally, I was very confused by auto-save and backup. FIles of backup are named usually like FILE_NAME~ and autosave are like #FILE_NAME#. At this point, I’m not quite sure that auto-save-file-name-transforms will take, but that’s alright. What I wanted to d

Japanese (or other multibyte)

Me as a native Japanese speaker, I often times, use Japanese Characters, plus I learned Chinese these days, I may have chances to read and write in Chinese Characters as well. Here’s what I use now for Japanese language. They are all copied from some of XEmacs distribution package I guess. It’s still just a magic spells…

;; ============= Japanese language setting ======================                              

;; A. inline input method (window-system)
(when (eq window-system 'mac)
  (add-hook 'minibuffer-setup-hook 'mac-change-language-to-us)
  (mac-translate-from-yen-to-backslash) ;; yen => backslash
  (set-language-info "Japanese" 'input-method "MacOSX") ;; bad fix
  ;; input method in read-only buffer (e.g. C-s in dired-mode)
  (setq mac-pass-key-to-system-on-read-only-buffer t)
  )
;; A. end                                                                                      

;; B. language environment
(set-language-environment "Japanese")
(set-default-coding-systems 'utf-8-unix)
(set-keyboard-coding-system 'utf-8)
(set-clipboard-coding-system 'utf-8)
(set-terminal-coding-system 'utf-8)
;; (set-file-name-coding-system 'utf-8m) ; already set
(prefer-coding-system 'utf-8-unix)
;; B. end                                                                                      

;; C. fix: Unicode => Japanese mapping
;; Thanks to saiki-san (see [macemacsjp-users 870])
;; register circle around digits to cjk table (by Ando-san)
(defadvice utf-translate-cjk-load-tables
  (after my-ad-circled-digit activate)
  (dotimes (i 20)
    (let ((unicode (+ #x2460 i))
          (char (+ 54433 i)))
      (if (utf-translate-cjk-substitutable-p unicode)
          (puthash unicode char ucs-unicode-to-mule-cjk))
      (puthash char unicode ucs-mule-cjk-to-unicode))))
;; prevent to use half-width marks (by Nanba-san)
(utf-translate-cjk-set-unicode-range
 '((#x2e80 . #xd7a3)
   (#xff00 . #xffef)
   (#xa7 . #xa7)                        ;
   (#xb0 . #xb1)                        ;
   (#xb4 . #xb4)                        ;
   (#xb6 . #xb6)                        ;
   (#xd7 . #xd7)                        ;
   (#xf7 . #xf7)                        ;
   (#x370 . #x3ff)                      ; ギリシャ
   (#x400 . #x4ff)                      ; キリル
   (#x2000 . #x206f)                    ; 一般句読点
   (#x2103 . #x2103)                    ; ℃
   (#x212b . #x212b)                    ; Å
   (#x2190 . #x21ff)                    ; 矢印
   (#x2200 . #x22ff)                    ; 数学記号
   (#x2300 . #x23ff)                    ; 技術記号
   (#x2460 . #x2473)                    ; 円囲み数字
   (#x2500 . #x257f)                    ; 罫線
   (#x25a0 . #x25ff)                    ; 幾何学模様
   (#x2600 . #x26ff)                    ; その他の記号
   ))
;; C. end

Font for Terminal

And for terminal font, I really appreciate Droid Sans Mono. Droid Family is designed for Google’s Android.

Download the Android SDK

Unzip the archive, and you’ll find .ttf files under tools/lib/fonts/default/. what it’s cool about is, very readable with small font size, mono space and comes with CJK typeface as well. License-wise, maybe ok for your personal use, you can at least develop Android with this. Small note: Android SDK comes with Android.el as well.

As my tradition, I moved, and I changed a title of my blog. It was called “Ten Eyck,” but now it’s called “Vantage Point of Queens.” Go visit my flickr page, you’ll see some of my house warming pictures.

So, I desperately try again on Scheme, Emacs and SICP. This time, I have a Kindle to read on, a friend working with me (again). I have experienced more than ever… Well let’s see what’s going on.

As a first time (and I wish this will keep going on), I will start with writing about how to configure emacs. Although there are tons of XEmacs implementation on Mac OS X, I run emacs on Terminal.app. I guess it’s because… (1) one of the fundamental reason to use emacs is because you can use on almost any platform. And if I just use one of those “OS X Specialized” emacs, then I will not remember how to configure. I don’t wanna miss anything. (2) Terminal.app can do “Alt as Meta” natively. (3) Apple keeps evolving Termianl.app. It has great transparent setting, multi-byte char enable, UTF-8 clear and a lot more.

But I digress. In order to configure emacs, you edit .emacs.el file. It usually stay on your home directory. Since it’s already 21st century and the cloud computing is really coming, why don’t I put on the cloud? I setup Dropbox account, and I mkdir-ed ~/Dropbox/config/emacs. I mv-ed .emacs.el and .emacs.d into there and make a symbolic link to them. It works great.

no welcome message

(setq inhibit-startup-message t)

By having this line in your .emacs.el, you don’t see welcome message anymore. That also indicates that your change is applied to your emacs.

aggregate all backup craps

(setq make-backup-files t)
(setq backup-directory-alist
  (cons (cons "\\.*$" (expand-file-name "~/.backup"))
    backup-directory-alist))

You have to mkdir for this before relaunch emacs. Hmm… I don’t see this working. I may try it later again.

しばらく前から、Google Calendar を僕の iPhone で使いたくて、NuevaSync を使っていました。NuevaSync を通せば Google Calendar が Microsoft Exchange Server のように見える、という優れたサービスで、かつ無料です。

何も文句はなかったのですが、今日 Google Calendar を見てみたら Sync with iPhone なんてあったので、試してみました。英語ですが、次のリンクに説明があります: Sync: Set Up Your iPhone or iPod Touch

現状では NuevaSync の方がいいです。左の写真のように Google Sync ではメインのカレンダーにしかアクセスできません（何かほかに設定があるのでしょうか？）。NuevaSync ならすべてのカレンダーにアクセスできます。

これまでの Google からすると、きっと改善されるんでしょうがとりあえず現状はこうですよ、という覚え書きでした。

あ、そうだ。iPhone が Exchange Server のアカウントを１つしか設定できない、というのも酷いと思いました…

以前は、開発者たるもの全てのソフトはソースから作るべし！なんて思っていましたが、さすがに何年もやってると、継続してメンテされるソフトウェアパッケージのありがたみもよくわかるようになってきました。

しばらく前から xampp をローカル開発用によく使っています。最近アップデートされていないのが少し心配ですが、インストールは簡単だし、よく出来ていると思います。ただ実際に使ってみると少し手を加えた方が使いやすいので、自分が銜える変更などを備忘録としてまとめておきます。

今回は起動時に xampp パッケージのソフトをシステム起動時に全部稼働させる、ということを扱います。

ダブルクリックできるようなアプリケーションは、Classic OS でやっていたのと、まぁ何となく似ているように、GUI (システム環境設定) から設定できますね？

ここでは、そうではなくて、いわゆるコマンドラインから立ち上げるアプリケーションを扱います。なおこの方法を使えばは他のサービス系のソフトウェアでも同じように応用できます。

Mac OS X では、10.4 (Tiger) から launchd というサービス管理機構が組み込まれ、10.5 (Leopard) では従来型の rc を廃止しました。

launchd は、起動スクリプトと、設定ファイル (.xml) で制御します。英語が出来る方は developer.apple.com: System Startup Programming Topics: Creating a Startup Item をどうぞ。僕のこのエントリは基本的に Creating a Startup Item 以上の情報はありませんので。

1. /Library/StartupItems に起動項目となる directory を作成
   起動項目に任意の名前を付けます。今回は /Library/StartupItems/XamppBoot という directory を作りました。
2. (1) の中に起動スクリプトを書く
   親ディレクトリと同じ名前のシェルスクリプト (/Library/StartupItems/XamppBoot/XamppBoot) です。もう写経で。start|stop|restart の各項目は、xampp の起動スクリプトへのパス（と引数）が含まれています。

   #! /bin/sh
   
   
   . /etc/rc.common
   
   
   StartService() {
     /Applications/xampp/xamppfiles/mampp start
   }
   
   
   StopService() {
     /Applications/xampp/xamppfiles/mampp stop
   }
   
   
   RestartService() {
     /Applications/xampp/xamppfiles/mampp restart
   }
   
   
   RunService "$1"
   

3. (1) の中に設定ファイルを書く
   Mac OS X ではおなじみ .plist 形式の設定ファイル (/Library/StartupItems/XamppBoot/StartupParameters.plist) 。description と message はあんまり大事じゃないと思う。Provides で指定される文字列が、システム全体でユニーク（一意）な値でないと行けないはず。requires などは先に上げた資料を参考のこと。

   <?xml version="1.0" encoding="UTF-8"?>
   <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
   <plist version="1.0">
     <dict>
       <key>Description</key>
       <string>xampp startup items</string>
       <key>Messages</key>
       <dict>
         <key>restart</key>
         <string>restarting xampp service</string>
         <key>start</key>
         <string>Starting xampp service</string>
         <key>stop</key>
         <string>Stopping xampp service</string>
       </dict>
       <key>OrderPreference</key>
       <string>Late</string>
       <key>Provides</key>
       <array>
         <string>XamppDeamon</string>
       </array>
       <key>Requires</key>
       <array>
         <string>Network</string>
       </array>
       <key>Uses</key>
       <array>
         <string>Network</string>
       </array>
     </dict>
   </plist>
   

4. permission を確認する
   全てディレクトリ／ファイルは root:wheel の所有で 755 パーミッションで。

全て設定がうまく行っていたら、コマンドラインの起動項目管理アプリである SystemStarter を使って起動、停止、再起動が

sudo /sbin/SystemStarter start XamppDeamon
sudo /sbin/SystemStarter restart XamppDeamon
sudo /sbin/SystemStarter stop XamppDeamon

という風にできるようになります。お試しあれ。