home link download back number special issue

HMDT - Back Number / December, 2000

December, 2000

December 7, 2000

■ひとりごと

Web 編集ツールを Adobe GoLive 5.0 に乗り換えてみました。現在、少しづつ移行中です。結構、微妙に違っていて、HTML ファイルがそのまま使えないにゃー。

Illustrator 好きのわたしとしては、スマート・オブジェクトがすごく便利。Illustrator のファイルを直接埋め込んで、Illustrator 側を変更すると、自動的に反映されるってやつね。しかし、バギーで、落ちるのはあいかわらずだ。

December 6, 2000

■Cocoa で遊ぶ：NSButton 編 (2) ブラウザの戻るボタンみたいなやつ

まずはお詫びと修正から。きのう、NSRoundedBezelStyle という定数は Release Note にしかのっていない、と書いたけど、それはこのあいだダウンロード可能になった Devloper Tool に付属しているドキュメントの話。Apple のサイトに行って、Web 上のドキュメントをチェックしたら、しっかり変わっていました。ごめんなさい。常に最新の情報をチェックしないとね。

さて、ボタンに関するドキュメントを眺めてみたんだけど、デフォルトの状態で結構いろいろできそうだ。というわけで、ボタンで遊ぶ編その (2)。Web ブラウザの戻るボタンみたいなやつを作ってみよう！ほら、いつもはボタンみたいじゃなくて、ポインタを近付けると枠が出てきて、ボタンを押すとメニューが出てくるやつ。

さっそく作ったぞ！次のコードを見てくれ。きのうのコードにつけたした感じだ：

- (id)initWithFrame:(NSRect)frame {
    NSPoint   point;
    NSSize    size;
    NSRect    rect;
    NSButton* button;
    NSBundle* bundle;
    NSString* path;
    NSImage*  normalImage;
    NSImage*  alternateImage;

    self = [super initWithFrame:frame];
    if(self) {
        point.x = 10.0f;
        point.y = 10.0f;
        size.width = 100.0f;
        size.height = 32.0f;
        rect.origin = point;
        rect.size = size;
        
        button = [[NSButton allocWithZone:[self zone]] initWithFrame:rect];
        if(button) {
            [button setTitle:@"Back"];
            [button setButtonType:NSMomentaryChangeButton];
            [button setBezelStyle:NSRegularSquareBezelStyle];
            [button setShowsBorderOnlyWhileMouseInside:true];
            
            // Create image
            bundle = [NSBundle mainBundle];
            path = [bundle pathForResource:@"normal" ofType:@"tiff"];
            normalImage = [[NSImage alloc] initByReferencingFile:path];
            path = [bundle pathForResource:@"alternate" ofType:@"tiff"];
            alternateImage = [[NSImage alloc] initByReferencingFile:path];
            
            [button setImage:normalImage];
            [button setAlternateImage:alternateImage];
            [button setImagePosition:NSImageAbove];
            
            [self addSubview:button];
        }
    }
    
    return self;
}

ポイントをいくつか説明しよう！まず、ボタンの属性の設定。タイトルを 'Back' とつける。ボタンのタイプは NSMomentaryChangeButton。これだと、通常のときとボタンを押したときで違うイメージが表示されるんだ。Bezel は NSRegularSquareBezelStyle で、四角い形にしている。あと、setShowsBorderOnlyWhileMouseInside というのをセットしている。これで、ポインタが近付いたときだけ、枠が表示されるんだ。

次がボタンに表示するイメージの読み込み。まず NSBundle を取得して、そっからイメージへのパスを作って、そんで NSImage を作るんだ！すげー雑で、そのままの説明だな。で、イメージをボタンにセットして出来上がり。

じゃ、動かしてみよう！まず、初期状態はこうなる。

ポインタを近付けていくと、枠が表示される。

そしてボタンを押すと、別のイメージが表示される。

さらに、メニューが表示されて、、、っていうとこまではいかなかった。明日以降のお楽しみだ。

ちなみに、いちおう言っておくと、こんなめんどくさいコードを書かなくても、Interface Builder を使えば、このぐらいは簡単にできるはずだよ。今は、あえて、コード上でやっているだけだからね。

December 5, 2000

■Cocoa で遊ぶ：NSButton 編

やぁ！Cocoa でプログラム書いているかい？なに、書いてない？よーし、それじゃ、簡単に数行のコードで遊んでみよう。

Projec Builder で GUI を作る際は、Interface Builder を使って、ペタペタ張り付けて作るのが普通だよな。でもさ、コード中で on the fly で作りたいときもあるじゃない？よーし、やってみよう！

てなわけで書いたのが次のコードだ：

- (id)initWithFrame:(NSRect)frame {
    NSPoint		point;
    NSSize		size;
    NSRect		rect;
    NSButton*	button;

    self = [super initWithFrame:frame];
    if(self) {
        point.x = 10.0f;
        point.y = 10.0f;
        size.width = 100.0f;
        size.height = 32.0f;
        rect.origin = point;
        rect.size = size;
        
        button = [[NSButton allocWithZone:[self zone]] initWithFrame:rect];
        if(button) {
            [self addSubview:button];
        }
    }
    
    return self;
}

適当な Window の subclass を作って、この初期化メソッドを割り当ててくれ。簡単に解説すると、最初に super の初期化を呼び出す。成功したら、ボタンの大きさと位置を表す NSRect を用意して、NSButton を作ってやる。うまくできたら、Window に addSubview する。

これで、ボタンができるはずだよね、きっと。だけど、じつは走らせると、次のような画面が出てくるんだ。

うーん、たしかにボタンはできているけど、Aqua じゃないぞ。いやや、いやや、Aqua じゃなきゃいやなんや、と駄々をこねてみたので、どうにかして Aquafied の方法を探ってみたぞ。ドキュメントをあさったところ、NSRoundedBezelStyle をスタイルとして設定してやればいい。

というわけで、上のコードに次のように一文を加える：

- (id)initWithFrame:(NSRect)frame {

    ...

        if(button) {
            [self addSubview:button];
            [button setBezelStyle:NSRoundedBezelStyle];
        }

    ...

こうして実行してみると、おぉ、Aqua だ。

はーい、以上 on the fly でボタンを作る方法でした！

HMDT