フィボナッチ数列というのは、簡単に言うと「隣り合う二項の和が次項の値になる」数列のこと(0, 1, 1, 2, 3, 5, 8, 13, 21, 34...)。植物の葉の付き方や、花弁の配置、星雲の渦巻きなど、自然界の至るところにあるため本質的な美を内包するとされ、多くのデザインで取り入れられています。

有名なところではローマの詩人ウェルギリウスが叙事詩『アエネイス』の構成に用いたとか、モーツァルトのソナタやベートーベンの交響曲にも使われてたりとか、ル・コルビュジェの「モデュロール」の元になってたりするようですね。隣接する二項の比が、どんどん黄金比に近付いていくことでも有名です。

というわけで、そのフィボナッチ数列をサクッと取得できるJavaScriptを作りました。ついでにSugamo.cssとかいう謎なフロントエンド集会に持ち込んでみたり。

1. var fib = {
2. num: [0,1,1],
3.  
4. get: function(n){
5. n = Number(n);
6. if (n < 0) return false;
7. if (isNaN(n)) return false;
8.  
9. if (!fib.num[n]) {
10. for (var i=2; i<n+1; i++){
11. fib.num[i] = fib.num[i-1] + fib.num[i-2];
12. }
13. }
14. return fib.num[n];
15. },
16.  
17. list: function(n){
18. n = Number(n);
19. if (n < 0) return false;
20. if (isNaN(n)) return false;
21.  
22. var list = [];
23. if (!fib.num[n]) fib.get(n);
24. for (var i=0; i<n+1; i++) {
25. list.push(fib.num[i]);
26. }
27. return list;
28. }
29. }

fib.get()で指定した項のフィボナッチ数を。fib.list()で指定項までの数列を返します。以下にデモを用意してます。

»続きがあります

Perlスクリプトを作ったんだけど... 動かない！ なんでだろー。ちゃんと毎ページ呼んでるし、GETリクエストも遅れてるのに... 統計に反映されてない！ ga.jsだからかと思ってUrchin.jsでアクティベートもしたのにダメだった。ちなみに元ネタはコレ。

動作確認できました。ソースは記事中の追記にて。

• Google Analytics without javascript!,Linklove
• ケータイサイトでGoogle Analyticsを利用するためのライブラリ,ke-tai.org
• Google AnalyticsのAnalysis、そして滞在時間のウソ,404 Blog Not Found

原理は簡単。Google Analyticsで呼び出してるJSは――読むのすっごいダルいんだけど――単に「http://www.google-analytics.com/__utm.gif」というGIF画像をリクエストしてるだけらしい。画像を読み込みはJavaScriptでクロスドメイン処理を行うときのセオリーだから、要はリファラとかUAだとかって各種情報をくっつけたGETリクエストを毎ページ送ってカウントしてるわけだ。

んで、話題の携帯analyticsモジュールはPHPからGETリクエストを送信することでGoogle Analyticsに対応してる。既にちゃんと動作確認も取れている（らしい）PHPコードを元に、だいたい同じような動作をするPerlコードに書き直したのが、以下のコード。

»続きがあります

オールドスタイル数字と余白の調節について、それぞれ１記事ずつ担当させていただきました。ちなみに今更ですが本名は福田泰雄といいます。H.N.とはまったく関係ないですが、まあそういう人もいるってことで。

今回は年末年始ということでバタバタしていたのか、参考画像に差し違いがあるようです。この場を借りて訂正しときます。

左が通常のライニング数字。右がオールドスタイル数字です。オールドスタイル数字のほうが英数字混合のとき数字だけ目立ちません。より詳しい解説は、前回の記事でということでヨロシク！

フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。

1. オールドスタイル数字
2. アンパサンド（“＆”）
3. スモールキャップ
4. ハイフンとダーシ
5. 各種スペース
6. 合字
7. 約物
8. 約物はぶら下げる
9. :beforeと:after
10. 見出しのサイズ
11. 初期フォントサイズ
12. 行間の調整
13. 余白の調節
14. 各国の日付表記

年始にサンプル作って安心放置してたら、今月のWebDesigningがWebタイポ特集だったという罠。やられました。完全に出遅れましたね。まあ良いか。

2009.01.26: 「見出しのサイズ」に一筆追加しました。

»続きがあります

1. function showObject(elm,type){
2. var str = '「' + typeof elm + "」の中身";
3. var cnt = 0;
4. for(i in elm){
5. if(type == 'html'){
6. str += '<br />\n' + "[" + cnt + "] " + i.bold() + ' = ' + elm[i];
7. }
8. else {
9. str += '\n' + "[" + cnt + "] " + i + ' = ' + elm[i];
10. }
11. cnt++;
12. status = cnt;
13. }
14. return str;
15. }

主としてIEデバック用に、オブジェクトの中身を表示させるスクリプト。「IEでFirebugが使えたらなあ」という願望の不完全燃焼系。まあ任意のオブジェクトの内容が意図したものか、そもそも取れているかさえ判れば、大抵はどうにんかなるよね。

文字列を返すようにしているので、alert()で出しても良いし、適当な<div>に吐き出しても良い。

1. //ex1
2. alert(showObject(obj));
3.  
4. //ex2
5. var testDiv = document.createElement('div');
6. testDiv.innerHTML = showObject(obj,'html');
7. document.body.appendChild(testDiv);

サンプルはこちら