Please be noted that this is still very experimental.

Go to Github: beatak / Meetup-Everywhere-WordPress-plugin

Requirement

• WordPress 2.9 and after?

Version 0.1
Todos

• Clean up widget’s visual (it should look similar to the official widget?)
• Organize config pages
• Reflect changes on config page to Meetup Everywhere

日本語で書かれたものとして openbooth さんの gitosis – Git リポジトリ群の管理とアクセス制御 vol.1が非常によく纏まっています。僕は Install (Set Up) Git and Gitosis on Ubuntu を参考にしました。

解説は上に上げたページを参考にしてもらうとして僕が少しハマったところを解説します。

• sudo python setup.py install は gitosis-init, gitosis-run-hook, gitosis-serve を /usr/bin 以下にセットアップする
• gitosis-init は実行したユーザのホームディレクトリに repositories ディレクトリなどを勝手に作ってくれる
• sudo chmod u+x /var/git/repositories/gitosis-admin.git/hooks/post-update は絶対にする。逆に他の hooks script は +x である必要はない
• クライアント側でする最初のタスクは、git 開発の手順通り、git clone ssh://GIT_USER_NAME@YOUR.HOST.NAME/gitosis-admin.git git clone の url がわからなかったらマニュアル参照: git-clone(1) 僕は ssh に 22 を使っていないので、git clone ssh://GIT_USER_NAME@YOUR.HOST.NAME:PORT_NUM/gitosis-admin.git のようになりました。
• gitosis.conf を編集して、新しいレポジトリを作る時、writable にするのを忘れない。そして keyfiles に ユーザの ssh public key を追加するのを忘れない。
• 一番最初に 新しい repository を追加する前に、僕のように ssh:22 で無い人は、client 側の ssh_config に、

  Host YOUR.HOST.NAME
  Port PORT
  IdentityFile ~/.ssh/id_rsa
  Protocol 2

  を追加しておく必要あり。そうしないと git remote add origin GIT_USER_NAME@YOUR.HOST.NAME:PROJECT_NAME.git が実行できない

あと、エラーがでて git push が成功しなくても、サーバにログインして fix しちゃダメだよね。このツールはサーバに git を使って git を管理できるってのが売りだし。おそらく次回は commit hook の設定の仕方かな？

僕は別のサイトで、CAcert.org を利用して、いわゆるオレオレ証明書ではない、https 通信を実現しています。利用者に root 証明書のインストールを要求するので、本質的にオレオレと変わりない、という批判は受け入れます。が、これ以降 CAcert がどう化けるかわかりませんし、証明書作成のプロセスの勉強にもなります。

なお本記事の多くは以下のページに依りました。

CACert.orgで無料のSSLサーバを動かすメモ [FreeBSD](fkimura.com)

今回は更新なので、domain の登録は済んでいるものとします。Domain の登録に必要なのは、メールアドレスだけです。

作業手順

1. サーバ秘密鍵作成の作成
   openssl genrsa -rand /var/log/messages -des3 -out /path/to/example.key 1024 54002 semi-random bytes loaded
   パスワードは後で使うことは、あまり、ない。
2. 証明書申請データの作成
   openssl req -new -key /path/to/example.key -out /usr/local/etc/apache2/ssl.key/example.jp.csr
   ここで唯一のハマりどころはCommon Name [CN] が、登録済みの domain と一致する必要がある、ということ。
3. 証明書申請データを提出する
4. (1)で作成したキーのパスフレーズを解除する
5. 今回作成した 4 ファイルの permission を全て 600 にする
6. httpd.conf をアップデート

fkimura.com に書いてあるそのままなんですが、あまりやらない作業はなんとなくやりたくない、という心理障壁になります。blog に書いておけば、また半年後やる時に、思い返せるでしょう。

というわけで本年もどうぞよろしく。

Gary B at work told me about this command.

(global-set-key "\C-x\C-m" 'execute-extended-command)

It sets up another key stroke (C-x C-m) for “execute-extended-command“, which you can do with M-x as default. I was also originally thinking that “execute-extended-command” is such a frequent command and why Emacs doesn’t assign with Control key instead of Meta. As Gary told me “it’ll grow on you.” For me personally at this moment, I have no problems with doing M-x, but we’ll see. At least now I know how to do it.

Steph told me 3 things at one message.

M-x occur

is absolute useful. My initial reaction was, “Hmm, it looks similar to tag jump?” But I was wrong. Because it takes regex, it can do a lot more flexible, and more over it’s on the fly. Neat!

M-x align-regexp

I haven’t used it yet but looks nice. And I found this page: Emacs wiki — Align commands comes with tons of other useful tricks for aligning.

Also % for finding the matching brace.

I found M-C-f (forward) and M-C-b (backward) in order to do that. How do I do with % sign?

Before I used Emacs on my dev box only very once in a while and I couldn’t like for various reasons. One of the biggest glitch was, lots of my config wasn’t simply working. So, I setup .emacs.el and .emacs.d on my linux dev box today. It was not still working, then I realize “Hmm, maybe I can update Emacs.” Gentoo default was 21. 22 was installed, but not defaultly used. And latest is 23. Why not? Boon, here you go. Emacs 23 works perfectly fine now.

As I explained before (Emacs Again (1): config), I setup all Emacs related config files on Dropbox. I know you can setup Dropbox on Linux but since all dev at work can log into my dev box, I don’t wanna do that. So what I did was setup rsync script on both my work mac and my linux box.

#!/bin/sh                                                                                

rsync --progress -a --rsh='ssh -p22' $HOME/Dropbox/Config/emacs/ takashi@my.devbox.local:emacs/ --exclude 'auto-save-list' --exclude '.DS_Store' --exclude 'tramp'

then I run this command everyday. Yay.

One last thing is about permission issue. I believe I talked about this with Mauvis before (and I don’t remember what he does, sorry!).

If you start to use Emacs, then you wanna do every text editing in Emacs. But what if you wanna edit something that requires root permission. You can do sudo emacs /something/important Yeah, you can do it but… It’s not efficient at all.

One other way I found was using tramp. But I don’t like the idea because it implicitly requires that you can login as root via ssh on your localhost. I think it’s definitely a nice hack but I don’t like the solution. And I talked to Gary about it, and he said “then I use vi.” Touché, Gary.

Change Split Ratio

So I was wondering if I can change the window split ratio, when I do C-x 2 or C-x 3. I asked it on IRC, and somebody immediately answer me. It’s simple, as Emacs way. You pass the argument.

C-u 20 C-x 3

So this will make left side 20 cursor width and split window vertically.

Community channel

Related to the preceding section, you can ask question on IRC. And also there is a twitter account @learnemacs, and he (or she) can answer your question if you tweet something.

<div class="description expandTo_500 canToggle">...</div>
<script type="text/javascript">
var someFunction = function (elm) {
  var classes = elm.className.split(' ');
  for( var i in classes )
    if( /^expandTo_[0-9]*/.test( classes[i] ) )
      var lim_char = Number( classes[i].split('_')[1] );
  ...
};
</script>

ぱっと見て、何をするかまぁだいたいわかると思うんですが、この someFunction が実行されると、引数として受け取った element を、その class にある一定の数字を解析して、それによって何かの処理をしたい、ということだと思います。

問題としたいのは以下の 4点あります。

• curly braces の欠如
• array の 列挙
• Number Objectの使用
• 正規表現を有効につかっていない

では順番に見ていきましょう。

curly braces の欠如

文法がそれを許している限り、これは好みの問題だ、という見方もあるんですが、Douglas Crockford によれば “Style isn’t subjective” だそうです。僕もそう思います。Curly braces はいかなる状況でも、省略すべきではないです。

array の 列挙

array 型の内容を列挙する時、JavaScript では、２つの方法があります。

var arr1 = [0, 1, 2, 3, 4];
for (var i = 0, len = arr1.length; i < len; ++i) {
  console.log(arr1[i]);
}

var arr2 = [0, 1, 2, 3, 4];
for (var j in arr2) {
  console.log(arr2[j]);
}

上記の二つの for ループは、基本的に同じことを目的としてしていますし、多くの場合は同じ結果をもたらすと思いますが、後者は違う結果をもたらす可能性があります。for の中で使用される in 演算子はもともと object のプロパティを列挙する為にあって、array の列挙の為ではありません。例えば Array.prototype.foo = '99'; という文がアプリケーションのどこかにあると、それだけで違う結果をもたらします。Crockford氏の jslint を使うと、for (…in…) は object の列挙の時ですら、 hasOwnProperty を一緒に用いないと、警告が出ます。

Number Object の使用

number型、boolean型、string型、には、wrapper クラスが存在するのですが、これを使う十分な理由、というのは僕には考えられません。前にも一度書きましたが、ポインタの比較をしたい時（というのがもしあれば、ですが）に、確かにこれらを使うことはできますが…ここでしているようなことの為なら parseInt で十分でしょう。

正規表現を有効につかっていない

さて最後に、文字列から数字を取り出すのに、split を使うのはもったいないです。せっかく正規表現で確認しているわけですから、一緒に切り出し作業もしてもらいましょう。

というわけで、書き直したコードを以下に。

var someFunction = function (elm) {
  var classes = elm.className.split(' ');
  var matches;
  var regex = /expandTo_(\d+)/;
  for (var i = 0, len = classes.length; i < len; ++i) {
    matches = classes[i].match(regex)
    if (matches) {
      var lim_char = parseInt(matches[1]);
    }
  ...
};

正規表現の一節以外は、ほとんど Douglas Crockford の受け売りになってしまいました。この本を読むと、Crockford氏の JavaScript に対する考え方を理解できると思います。（そして Java のような JavaScript を書くことになると思いますが…まぁそれはまた別の機会に。）

まずは非常に簡単なアニメーションをやってみましょう。Wireframe の Cube をクリックしてみてください。ジャンプ先のページでも見られますが、このアニメーションは以下のコードで実現されています。

Meetup.Tweener.isUsing = 'jQuery'; // The Magic spell of using Tweener with jQuery
$(function(){ // jQuery way of DOM Ready
  var cube = document.getElementById('cube');
  $(cube).click(function(){
    Meetup.Tweener.addTween(
      cube,  // 1st arg: the target element
      {'left': '100%'} // 2nd arg: animation property
    );
  });
});

ご覧の通り、Meetup.Tweener は AS3 Tweener と全く同じ、Tweener.addTween というメソッドの呼び出しで始まります。詳しい内容は次回以降お楽しみに、ということで。

Flickr: Hello world to Meetup.Tweener: Easy animation

Meetup.Tweener は僕が Open Source として開発している JavaScript のライブラリで、HTML + JavaScript の環境で非常に簡単にアニメーションを作ることができます。もし Flash での開発経験があれば、Tweener という Library は絶対聞いたことがあると思うのですが、Original の Tweener と API 互換性を持たせつつ、JavaScript 用に最適化をしています。

今やどのメジャー JavaScript ライブラリもアニメーション機能があるというのになんでいまさらアニメーションライブラリ？と思われるかもしれません。Meetup.Tweener の利点は

1. 依存性は低く、（理論上では）どのメジャーライブラリとも共存できる
2. 長い間 Flash で培われた API
3. Meetup での実用実績

(1) に関して、今のところ対応しているのは jQuery と MochiKit だけなんですが、Prototype.js, MooTools, YUI, Dojo には対応する準備があります。(2) に関して、HTML5 が台頭してくるにあたって、多くの Flash 製作者が JavaScript に流れてくることが予想されます（楽観的）。彼らにとってなれしたしんできた syntax が使えるのはとても大きな資産になることでしょう。また、アニメーションをメジャーライブラリに頼らないことで、突然のコードベース変更にも強いでしょう。

このライブラリは Google Adplanner によれば 6M の Unique Visitor をほこる Meetup.com で運用の実績があります。実地で使われているものですから、問題があれば対処は素早く行われます。

開発は Github 上の meetup.tweener レポジトリにて行われていて、ドキュメントも Github 上にあります。

開発にあたって、Yuichi Tateno (id:secondlife) さんの JSTweener を参考にさせていただきました。ありがとうございます。

Wordpress をアップデート。いつも忘れてしまう diretory の比較。普段は Changes.app などという Mac OS X の GUI アプリを使ってしまって、いっこうに覚えなかった…

How To Compare Directories in Unix

$ diff --recursive --brief /tmp/dir1 /tmp/dir2
Files /tmp/dir1/dir11/file12 and /tmp/dir2/dir11/file12 differ
Files /tmp/dir1/file1 and /tmp/dir2/file1 differ
Only in /tmp/dir1: file2
Only in /tmp/dir2: file3

これを応用すると、例えば dir1 にだけ存在するファイルは

$ diff --recursive --brief /tmp/dir1 /tmp/dir2 | grep '^Only \/tmp\/dir1'

とすればよいですね。

emacs で major mode を変える

例えば .html なファイルを emacs で開くとほぼおそらく HTML mode で開かれると思います。でも実は内部の JavaScript を編集したいし、js2-mode (JavaScript-IDE) で編集したい。凄い基本ですがしばらく emacs を触ってないで忘れてしまっていました。

M-x js2-mode

でした。

またこれから emacs 勉強記録をつけていきたいと思います。今日はどうやってコピーするのか忘れてましたが (M-w Copy / C-w Cut / C-y Paste) それさえわかれば、それなりに使えrて結構びっくりした。

Fliping picture

Click on picture, it will flip around.

This is even worse than CSS transformation because it only works for x-axis scaling as opposed to, CSS transformation, you can do 3d, at least more 3D-ish, flipping animation. BUT ANYWAY, this just fire on my heart to learn 3D again.