webKit検証(25) - Webウィンドウを重ねる(3)

サンプルに NSWindow#addChildWindow:ordered: を使ってみる。



これで表示に関しては違和感がなくなった。

が、何故かファーストレスポンダになれない。WebView上に表示されたテキストボックスに文字を入力しようとすると、外側のウィンドウの URL欄に文字が入ってしまう。

複数のNSWindowを紐づける

NSWindowのリファレンスを眺めていると複数のウィンドウを紐付けられることがわかった。

NSWindow#addChildWindow:ordered:

どんな動きになるのかサンプルを作って確かめてみよう。

サンプル：PiledWindows.zip

まず InterfaceBuilderで２つのウィンドウを用意し、これを AppController のアウトレットに接続する。


AppController.h

@interface AppController : NSObject {

 IBOutlet NSWindow* _window1;
 IBOutlet NSWindow* _window2;
}
@end

紐付けは awakeFromNibで行う。
AppController.m

- (void)awakeFromNib
{
 [_window1 addChildWindow:_window2
    ordered:NSWindowAbove];
}

実行してみよう。２つのウィンドウが表示される。


子ウィンドウを移動すると通常通り任意の場所へ移動できる。
重なり順に NSWindowAbove を指定しているので、必ず子ウィンドウが上にくる。親ウィンドウをクリックしてアクティブにしても下に表示されたまま。




次に親ウィンドウを移動すると、おお。
子ウィンドウが位置関係を保ったままついてくる。こんな機能があったのか。

- - - -
これがあればわざわざ透明にすることもなく簡単に WebViewを重ねられる。
次回やってみよう。

webKit検証(24) - Webウィンドウを重ねる(2)

ウィンドウを単純に重ねると重なり順やフォーカスの問題などがあって意外と面倒なことがわかった。そこで外側のウィンドウの中をくり抜いて（透明にして）その下に Webページを表示するウィンドウを当てはめてみた。

InterfaceBuilderでカスタムビューを貼付ける。


そのビューを透明色で塗りつぶす。するとこうなる。

なおウィンドウの属性で不透明設定をNOにしないと真っ黒になる。またくり抜いた部分に影がかかるのでこれをoffにしておく。

 [_frame_window setOpaque:NO];
 [_frame_window setHasShadow:NO];

さてこの状態で Webページを表示するウィンドウを当てはめる。するとこうなる。


- - - -
これもSpacesなどで操作していると変な挙動が起きる。やはり２つのウィンドウを重ねるのは無理がある気がしてきた。どうするか。

WebKit検証(23) - Webウィンドウを重ねる

次は WebView が載ったウィンドウを重ねる。

こんな感じ。


実装のポイントは次の通り。

まず位置と大きさを外側のウィンドウ内の表示範囲に合わせる。正確なものはここでは不要なのでおおざっぱな位置と大きさを決めるメソッドを用意しこれを使う。

- (NSRect)calcRect
{
 NSRect rect = [_frame_window frame];
 rect.size.height -= 120.0;
 rect.size.width  -= 40.0;
 rect.origin.x += 20;
 rect.origin.y += 50;
 
 return rect;
}

コントローラを外側のウィンドウの Delegateに設定し NSWindow#windowDidMove: と NSWindow#windowDidResize: を実装し、この中で位置と大きさを合わせる。

- (void)resizeWebWindow
{
 [_web_window setFrame:[self calcRect] display:YES];
}
- (void)windowDidMove:(NSNotification *)notification
{
 [self resizeWebWindow];
}

- (void)windowDidResize:(NSNotification *)notification
{
 [self resizeWebWindow];
}

キャプチャ時には一旦ウィンドウを非表示にする。

- (IBAction)capture:(id)sender
{
 [_web_window orderOut:nil];
　　　：
　　// キャプチャ処理
　　　：
 [self resizeWebWindow];
 [_web_window makeKeyAndOrderFront:nil];
}

- - - -
外側のウィンドウを移動した時に Webページのウィンドウが遅れたり、重なりかたが変だったりと細かいところで問題はあるが、それらしい形になってきた。

WebKit検証(22) - 操作用ウィンドウ

まずは外枠にあたる操作用のウィンドウを用意する。前回までのサンプルのウィンドウを広げる。中の開いている部分に別のウィンドウを重ねて表示する。


プログレスバーも付けてみた。

次はWebページを表示するウィンドウの重ね合わせてみる。

WebKit検証(21) - 見ているページをキャプチャするには？

さて基本的な検証ができたので、もう一歩進んでアプリへの実装を考える。

Paparazzi の様に入力された URLのページをキャプチャするだけであれば、これまで検証した方法で簡単にできる。
ただそれだと使い勝手が悪い。できれば SnapWebなどの様に簡易ブラウザを操作して、任意のタイミングで表示ページをキャプチャできるような方が使いやすい。ただし、その場合は見ていてる状態を変えずにこれまで検証してきたようなウィンドウサイズの変更を行わなければならない（例：表示中の Flashを任意のタイミングでキャプチャ）。


以前見た SnapWebではブラウザ部分が操作ボタンなどとは別ウィンドウになっていた。方法としては良いと思うが、ウィンドウを拡大した場合は見た目がわるい。SnapWebの場合はキャプチャ時には非表示になっていたので、恐らくその間にウィンドウを拡大していたのだと思われる。まずはこの方法をとってみよう。

続く..

WebKit検証(20) - 隠しウィンドウを使ってキャプチャ

前回のウィンドウの表示位置を (-1000, -1000)に変えてみる。

 NSRect rect = NSMakeRect(-1000, -1000, 100, 100);
 _window = [[NSWindow alloc] initWithContentRect:rect
            styleMask:NSBorderlessWindowMask
           backing:NSBackingStoreBuffered
             defer:NO];

Load、Capture を実行する。

Webページは表示されないが、問題なくキャプチャできた。