そのマシンは、一日に何回もフリーズするありえないＰＣ！サポートがだめ！フォント、ソフトが少ない！周辺機器が少ない高い！クライアントに迷惑をかける！など数々の大酷評を受ける。しかし、そのマシンは、あっというま（数年で）にデザイン、製版、レイアウト、校正作業をガラス張りにし、既存のワークフロー、技術者のスキルを陳腐化させるDTP革命をもたらしました。

この技術革新からは、たくさんの示唆、恩恵を受け印刷事業（当時はこの事業のみ）は延命。ほぼ同時にインターネット事業への参入も果たしました。

2012年は、その印刷事業にもひと区切りを付け、
改めて、ITをコア事業とする会社に生まれ変わることを皆で決めました。

亡くなったジョブスは自身の経験から、
点と点が、いつか繋がる！それは、未来になってみないと分からない！と、言っていました。

プレスマンも、皆でいままで挑戦、経験して来たことやノウハウ（多くの点）が繋がり、大きな成果を得ることで、社の仲間に大きな満足をもたらし、顧客、社会に貢献出来るよう な2012年にしたと思います。

新たなコア事業のフィールドでも、提供サービス、ノウハウ、技術がコモディティ化しないよう、一人ひとりが、日々真摯に革新を続けて行きたいと考えます。

今年も宜しくお願いします。

正直、eclipseやApacheやAtokはMacでも動くしその他諸々Macの方がいいことやMacでもいいことがほとんどなのですが、秀丸とtortoiseSVNが使いたいという理由でBoot Campを使ってwindows7をインストールしました。

まあ、Mac mini 2011は光学ドライブがないのでUSBメモリを使ってインストールとなりますが、ほかのPCでwindows7のISOイメージをつくればBoot Campがインストール用USBメモリを作ってくれます。色々解説サイトがあるし、インストール自体は全く問題なくいきます。一つだけ、USBメモリは４GBあれば足ります。windows7のDVDが４GB以上あるのかなと8GBを購入してしまいましたが、4GBで十分でした。後々、ReadyBoostで使えるので少々高くてもUSBメモリは高速なものをお勧めします。

さて、買ったMac miniは52800円の安い方です。windows7は32bit版ですよってメモリは4GBにしました。
ここまでは問題なかったのですが、インストール終了してメモリを確認すると使用可能メモリが2.16GBになっています。
あれ、4GB積んだよね？全部使えないのはわかっているけどいくら何でも半分ってなんで？あれれ？
理由はどうやら、Intel HD Graphics 3000が1.7GBほどメモリアドレスを占有してしまっているため？
64MBしかメモリ使っていない感じなのに・・・・・

ということで、32bit版を使用しなければならないのならグラフィックスチップがついてくる高い方のMac miniの方がいいかもしれません。
それ以外は64bit版を使えってことですね。

正直、prototypeについて読むだけで理解できるひとは天才じゃないかなと。普通わかんないッス。
解説を読んで、色々なソースを見たり書いたりして何となく理解した上で、もう一度しっかりと解説を読んで「おー、そういうことだったのか」となるのがいいやり方だと思います。
まあ、こんなサイト見てるよりサイ本しっかり読めばいいような気も。

とりあえず

• functionでつくられた関数オブジェクトは全てprototypeプロパティを持っている。
• あらゆるオブジェクトは__proto__プロパティを持っている。
• この二つは当たり前だが別のプロパティである。
• そして、プロトタイプチェーンって言われているのはprototypeプロパティじゃなくて__proto__プロパティのチェーン

って考えておくと理解しやすいです。
（__proto__自体はECMAScriptで定義されている訳でなく一部の実装でのプロパティみたいだけどこれがあると考えると分かり易い）

例1

var Car = function(){};
Car.prototype.color = "black";
var car1 = new Car();
var car2 = new Car();
alert(car1.color); //black
alert(car2.color); //black

上記の例はprototypeが何かを多少でも理解していれば当たり前じゃん！といったところですね。
Carは関数オブジェクトなのでprototypeプロパティを持っています。その中身はconstructorプロパティだけを持つオブジェクトです。
つまり

Car.prototype = {constructor:Car}

みたいな感じかな？
ちなみに

Car.prototype.constructor === Car // => true

となりますが、訳わからなくなるのでconstructorはここでは無視。
car1が作成された時点でcar1には__proto__プロパティが自動で作成されてこれはCar.prototypeへ参照されます。つまり

car1.__proto__ === Car.prototype // => true

となるわけです。で、プロトタイプチェーンはそのオブジェクトが持っていないプロパティは__proto__オブジェクトから探すので
car1.colorはcar1.__proto__.colorとなりCar.prototype.colorとなるわけでつまりblackなわけです。
car2も一緒。

つづく

通常、ブロック要素を横並びにしたいときは『float』を使うことが多いと思います。しかしfloatには

• clearする必要がある
• IE6ではfloatと同方向のpadding、marginが2倍になってしまう（バグ）
• 高さが異なるボックスがあるとその後のレイアウトが崩れる

といった面倒がつきまといますよね。そんな時は『display: inline-block;』の出番です。block要素のように高さや縦方向のpadding、marginが指定できる上に、inline要素のように横並びができ、しかも高さが異なるボックスがあってもレイアウトが崩れません。

それでは実際に『display: inline-block;』を使った例を見てみましょう。

html

<div class="ib-box">ボックス1</div>
<div class="ib-box">ボックス2</div>
<div class="ib-box" style="height: 150px;">ボックス3</div>
<div class="ib-box">ボックス4</div>
<div class="ib-box">ボックス5</div>
<div class="ib-box">ボックス6</div>
<div class="ib-box">ボックス7</div>
<div class="ib-box">ボックス8</div>

css

.ib-box{
	display: inline-block;
	width: 120px;
	height: 100px;
	margin: 10px;
	}

単純にdivを並べ、これらに『display: inline-block;』を指定しました。ここではレイアウトを見るためにボックス3の高さを敢えて変えています。

いかがでしょうか？ご覧のようにfloatを使わずとも、高さを指定したボックスの横並びが実現できました。さらに高さが異なるボックス3以降のレイアウトも崩れていないのが分かると思います。

しかし『display: inline-block;』はIE6、IE7では使うことができません。
そこでIE6、IE7用にハックを指定してあげる必要があります。

css

.ib-box{
	display: inline-block;
	/display: inline;  /* IE用ハック */
	/zoom: 1;  /* IE用ハック */
	width: 120px;
	height: 100px;
	margin: 10px;
	}

とりあえずdisplayをinlineで指定して、zoomでhaslayoutをtrueにする感じです。hasLayoutとはそのオブジェクトがレイアウトを持つかどうかの読み取り専用のプロパティです。zoomを指定することでhasLayoutをtrueにすることができ、それによってheightも指定できるようになるというわけですね。個人的には、CMSを使ってのECサイト作成やギャラリーサイトの構築なんかでよく使ってます。任意の場所でclearかけるのが難しいことが多いので。シンプルにマークアップしたいなって方は是非試してみてください。

それでは。

Apache2.3というか2.4に実装予定のmod_auth_formじゃありません。
こちらのほうです。
まあ、上記ページにApache2.4のほうを使ってねみたいなことが書いてありますが、2.4がなかなかでませんです。
さて、これを何に使うのか、何ができるのかと言うのは問題ではなく、そもそもmakeができません。
環境はCentOS5.4のApache 2.2.3,apr 1.2.7、mod_auth_form 2.05です。

ちなみに、Apache.2.0系だと問題なくmakeできます。まず./configureはこんな感じです。

./configure \
APACHE2_INCLUDE=/usr/include/httpd/ \
APR1_INCLUDE=/usr/include/apr-1/ \
APXS=/usr/sbin/apxs

これでmakeをすると、

/usr/include/apr-1/apr-i386.h:270: error: expected '=', ',', ';', 'asm' or '__attribute__' before 'apr_off_t'
・・・・・・・・・・・・・
mod_auth_form.c:1105: error: 'request_rec' has no member named 'parsed_uri'
make[1]: *** [mod_auth_form.lo] エラー 1
make[1]: ディレクトリ `/root/mod_auth_form-2.05/src' から出ます
make: *** [all-recursive] エラー 1

みたいな感じでエラーが出ます。まあ、エラーの場所がかいてあるのでとりあえずそのファイルを見ます。
/usr/include/apr-1/apr-i386.h:270

typedef  off64_t           apr_off_t;

となってます。off64_tがtypedefされてないっぽいのでググって見るとどうやら、sys/types.hで

#if defined __USE_LARGEFILE64 && !defined __off64_t_defined
typedef __off64_t off64_t;

となっているらしい。というかなってた。
つまり、__USE_LARGEFILE64 が定義されていないのでoff64_tが__off64_t になってない。つまり、
apr-i386.hを

typedef  __off64_t           apr_off_t;

と書き直してmakeすれば、はい終了。

というわけで、めでたくmakeが通ったわけですが、ヘッダファイルをいじるのはなんか微妙なので元に戻してmod_auth_formのMakefileをいじることにします。
mod_auth_formを./configureした後にsrc/Makefileを開くと”DEFS ＝ “で始まる行があります。そこの最後に

-D__USE_LARGEFILE64=1

と足してmakeしてみるとダメでした。そこでググるとどうやらfeature.h内で

#ifdef _LARGEFILE64_SOURCE
# define __USE_LARGEFILE64 1
#endif

となっているらしい。というかなってた。
そんなわけで、先ほどの”DEFS = “の行の最後に

-D_LARGEFILE64_SOURCE=1

を付け足すとめでたく通りました。

ipad_アラスカ航空

ユナイテッド航空、パイロットへ１１０００台のiPadを導入
フライトマニュアルをiPadへの置き換え、ペーパーレス化、コストダウン、重量軽減（約１７㎏→約６００g）を図る。

ブリティッシュ・エアウェイズの客室乗務員、iPadを導入
機内のカスタマーサービスを向上させる為に、iPad ２を導入。iPad ２で乗客の座席、時刻表、マニュアルなどの確認が可能となる。

アラスカ航空、フライトマニュアルをiPad導入
iPadに、PDF化された全てのフライトマニュアルを搭載。

重い、大量、更新頻度、検索性、今（紙）を上回る利便性が、keywordでしょう。
インターネットが現れたときも、このキーワードのモノが、ネット化されましたね。

iPadの有効利用については、
プレスマンまでお問合せください。

jQuery1.4.2 2594行目

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
"change select submit keydown keypress keyup error").split(" "), function( i, name ) {

// Handle event binding
jQuery.fn[ name ] = function( fn ) {
return fn ? this.bind( name, fn ) : this.trigger( name );
};

if ( jQuery.attrFn ) {
jQuery.attrFn[ name ] = true;
}
});

jQuery1.4.3 2900行目

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
"change select submit keydown keypress keyup error").split(" "), function( i, name ) {

// Handle event binding
jQuery.fn[ name ] = function( data, fn ) {
if ( fn == null ) {
fn = data;
data = null;
}

return arguments.length > 0 ?
this.bind( name, data, fn ) :
this.trigger( name );
};

if ( jQuery.attrFn ) {
jQuery.attrFn[ name ] = true;
}
});

1.4.2と1.4.3のソースをつけたのには訳があります。というか見れば同じ箇所でソースが微妙に違っているのがわかりますね。元々bindは
bind(type, [data], fn)
のような形でコールバック関数にデータを渡すことができます。dataは省略できてその場合はイベントに関数をバインドするだけです。
しかし、1.4.2まではclickイベントにデータを渡すときはbind(“click”,data,fn)と書かなくてはなりませんでした。しかし1.4.3以降は
click(data,fn)
と書けばいいということになります。これはjQuery日本語リファレンスには書いてありません。

jQuery日本語リファレンスは非常によくできていてわかりやすいので使っている人も多いはずですよね。（というかこれがないと泣いてしまう）ただ、最近の変更点については書かれていないので自分でソースを読むと新たな発見があります。
例えば、jQuery1.6.2のbindについて書かれた箇所（oneと一緒に書かれているのでわかりにくいかも）

jQuery.each(["bind", "one"], function( i, name ) {
jQuery.fn[ name ] = function( type, data, fn ) {
var handler;

// Handle object literals
if ( typeof type === "object" ) {
for ( var key in type ) {
this[ name ](key, data, type[key], fn);
}
return this;
}

if ( arguments.length === 2 || data === false ) {
fn = data;
data = undefined;
}

if ( name === "one" ) {
handler = function( event ) {
jQuery( this ).unbind( event, handler );
return fn.apply( this, arguments );
};
handler.guid = fn.guid || jQuery.guid++;
} else {
handler = fn;
}

if ( type === "unload" && name !== "one" ) {
this.one( type, data, fn );

} else {
for ( var i = 0, l = this.length; i < l; i++ ) {
jQuery.event.add( this[i], type, handler, data );
}
}

return this;
};
});

これを読むとbindの一つ目の変数にObjectを渡して複数のイベントを一気にバインドできるのがわかります。つまり

var data = {hoge:"hoge",piyo:"piyo"};
$('#hoge').mousedown(data,function(e){
//処理内容
});
$('#hoge').mouseup(data,function(e){
//処理内容
});

を

var data = {hoge:"hoge",piyo:"piyo"};
$('#hoge').bind({
mousedown:function(e){/* 処理内容 */},
mouseup:function(e){/* 処理内容 */}
},data);

のように書けるということです。

で、bindにデータを渡すと何が嬉しいのかは次回。

柔道世界選手権の日本代表チーム
外国人対戦相手の映像を数万点レベルでデータベース化し、練習や試合の合間にも見られるようにするため、全員に一台づつｉＰａｄを配備（これまでは、練習後、ＭＴＧ時などにパソコンを使って見ていた）

バレーボール女子日本代表
選手への指示や交代のタイミングがより的確になるほか、試合中にその試合のプレー映像も取得が可能に。

モータースポーツ
AppStoreから無料ダウンロードアプリを配信。主なコンテンツは、レースレポート、結果、写真、サウンド、ビデオ映像。例えば、レースカーの３６０度パノラマ画像、サーキットの詳細解説、ウォールペーパー、レースウィークの概要、メイキング映像などの最新情報を提供。

導入に当たっては、
・リアルタイムに使える！
・隙間の時間に利用可能な機動力、操作性！
というiPadならではの特徴があるようです。普及スピード、市場シェアなど、ノートＰＣを凌駕する勢いが、こんなところにも現れているのでしょうか。

ブックマークスのタグクラウド

プレスマンの社内で、運営中のブックマークスというサイトのタグクラウドを紹介します。今日の時点で、一番目立つのが、iPad、WordPress、HTML５、iPhone、facebook、Ａｎｄｒｏｉｄ。

ブックマークス、オープン３ヶ月。
投稿数１９１件。

みんなの興味＝世の中の注目度＝顧客のニーズ。
営業ネタにもたくさん使えて、皆さんの投稿に感謝です。

jQuery用に書かれたJavaScriptをみるとよく

(function($){
    var hoge = function(){
        alert($("#hoge").val());
    };
    hoge();
})(jQuery);

みたいに書かれています。ぱっと見るといったい何をやっているのか意味不明ですよね。
これは何をやっているか理解すると「おぉー」と言う感じです。

分解して書くと下記と似たような意味になります。

var piyo = function(fuga){
        var hoge = function(){
            var foo = fuga("#hoge");
            alert(foo.val());
        };
        hoge();
    };
piyo(jQuery);

関数を作ってそれにjQueryという引数を渡して実行しているだけです。
$は普通にただの変数なので特別に考える必要はないです。（fugaに書き直しています）
JavaScriptは変数に関数を入れられる（というか参照値が入るのだけど）ことを覚えておけばわかりやすいと思います。

で、これが何なの？別にこんなことすることないじゃんと言う話になりますが、利点は当然あります。
まず、$が別に定義されてしまっていた場合です。例えば、prototype.jsとjQueryを同時に使う場合がこれにあたります。
どちらも$が特別な意味を持った変数です。jQueryでは変数jQuery == $ なので無名関数の引数$にjQueryを渡して実行して、あげればprototype.jsとの混在環境でもfunction($){}の中では普段と同じように$(“#hoge”)のように書くことができます。
あとは、変数のスコープの問題です。色々なライブラリを組み合わせれば当然変数名が被るでしょう。しかし、function($){}の中で、varをつけて変数を宣言しておけばこの中だけのスコープになるので、他のライブラリに影響しなくなります。

JavaScriptはスコープ、無名関数、クロージャがわかるようになると書くのが非常に楽しくなります。あと、applyもキモです。applyに関してはまた後日。多分。