webKit検証(19) - Flash#9 ウィンドウを大きく（再チャレンジ）

ようやくウィンドウサイズを自由にできる方法がわかったのでキャプチャに使ってみる。仕切り直しにコードを新しく書き直した。

サンプル：WebViewSample-1.zip

InterfaceBuilderでコントロール用の小さなウィンドウを用意する。


アプリケーションを起動したタイミングで WebViewとそれを表示するボーダレスウィンドウをコードから作成する。
AppController.m

- (void)awakeFromNib
{
 NSRect rect = NSMakeRect(0, 0, 100, 100);
 _window = [[NSWindow alloc] initWithContentRect:rect
            styleMask:NSBorderlessWindowMask
           backing:NSBackingStoreBuffered
             defer:NO];
 _view = [[WebView alloc] initWithFrame:rect];

 [[[_view mainFrame] frameView] setAllowsScrolling:NO];
 
 [_window setContentView:_view];

 [_window makeKeyAndOrderFront:nil];
}

最初は左下に 100x100の小さなウィンドウ（白）が現れる。


URLを入力し Loadボタンで読み込み、Captureボタンでキャプチャする。Webページの大きさに合わせてウィンドウが拡大される。


キャプチャコードはこんな感じ。Paparazzi! で使われていた NSBitmapImageRep#initWithFocusedViewRect: を使ってみた。

- (IBAction)capture:(id)sender
{
 // (1) filename
 NSArray *paths = NSSearchPathForDirectoriesInDomains(
    NSDesktopDirectory, NSUserDomainMask, YES);
 NSString* path = [NSString stringWithFormat:@"%@/test2.png",
    [paths objectAtIndex:0], nil];
 
 // (2) size
 NSRect rect = [[[[_view mainFrame] frameView] documentView] bounds];
 [_window setContentSize:rect.size];
 
 // (3) capture
 [_view lockFocus];
 NSBitmapImageRep* bitmap_rep = [[NSBitmapImageRep alloc] initWithFocusedViewRect:rect];
 [_view unlockFocus];
 
 NSData* data = [bitmap_rep representationUsingType:NSPNGFileType
           properties:[NSDictionary dictionary]];
 [data writeToFile:path atomically:YES];
}

出た。Flashも行けそうだ。


- - - -
ずいぶん時間がかかったが、再現力の高い方法が見つかった（メモリは大量に使いそうだが）。

ウィンドウサイズの制約解除〜NSBorderlessWindowMask

色々試行錯誤していてウィンドウサイズの制約解除をする方法がわかった。
何の事はない、ボーダレスのウィンドウを作成すればステータスバーやDockの制約は受けずに自由な位置に任意のサイズのウィンドウを作成することができる。

InterfaceBuilderではなくコード中でウィンドウを作成する。

こんな感じ。

 _window = [[NSWindow alloc] initWithContentRect:rect
    styleMask:NSBorderlessWindowMask
    backing:NSBackingStoreBuffered
      defer:NO];

スタイルマスクに NSBorderlessWindowMask を指定する。
タイトルバーが付く通常のウィンドウは NSTitledWindowMask を指定する。

NSWindow.h

enum {
    NSBorderlessWindowMask  = 0,
    NSTitledWindowMask   = 1 << 0,
    NSClosableWindowMask  = 1 << 1,
    NSMiniaturizableWindowMask  = 1 << 2,
    NSResizableWindowMask  = 1 << 3
    
};

- - -
これでWebページ全体を表示できるウィンドウが作れる。

Paparazzi! を試す(2)

Paparazzi! は古いバージョンだがソースコードが用意されている。ポイントだけ引用してみる。

PaparazziController.m

- (id)initWithWindow:(NSWindow *)window {
 if (self = [super initWithWindow:window]) {
  webWindow = [[NSWindow alloc] initWithContentRect:NSMakeRect(-16000.0, -16000.0, 100.0, 100.0) styleMask:NSBorderlessWindowMask backing:NSBackingStoreRetained defer:NO];  
  webView = [[WebView alloc] initWithFrame:NSMakeRect(-16000.0, -16000.0, 100.0, 100.0)];
　　　：

なるほど。表示領域外にウィンドウと WebViewを作っている。

- (IBAction)fetch:(id)sender {
　　　：
 [webWindow setContentSize:newSize];
 
 [webView setFrameSize:newSize];
 
 [self validateInputSchemeForControl:urlField];
  
 [[webView mainFrame] loadRequest:[NSURLRequest requestWithURL:url]];
}

サイズを調整し URLを表示する。

- (void)takeScreenshot {
　　　：
 [webView lockFocus];
 bitmap = [[NSBitmapImageRep alloc] initWithFocusedViewRect:cropBounds];
 [webView unlockFocus];
　　　：

NSBitmapImageRep#initWithFocusedViewRect: を使いキャプチャしている。このメソッドは #lockFocus 対象のビューが表示している内容をビットマップイメージに落とす。隠れている部分はイメージに落ちないので、Webページ全体をキャプチャする場合、あらかじめビューのサイズを大きくとっておく必要がある。んん。これはこれまで試していた方法に近い。

表示領域ではウィンドウのサイズに制約がかかっていたが、表示領域外であれば制約がかからないということだろうか。

Paparazzi! を試す

WEB画面のキャプチャツール Paparazzi (0.4.3) でFlashページをキャプチャしてみる。



正しく再現されているようだ。

SimpleCap調整（QuickConfigにマウスカーソルを追加）

QuickConfigにマウスカーソル設定を追加した。



しばらく使って様子見。

今日はそれだけ。

WebKit検証(18) - Flash#8 ウィンドウを大きく

前回のウィンドウサイズを大きくする件、横幅は画面をはみ出す場合でも大丈夫だった。
縦の高さだけがメニューバーとドックの制約を受ける。

試しに Info.plist の LSUIPresentationMode を設定し、メニューバーとDockを消して見る。

なお Xcodeではなぜか Normal（０）以外の値を設定できなかった。別のエディタで開き All suppressed(4) を設定した。


実行するが変わらず。メニューバーと DocKは消えたがその分拡大できただけで画面のサイズ以上には高さが広がらない。


方法をがみつからない。
うーむ。

WebKit検証(17) - Flash#7 WebViewウィンドウをリサイズしてキャプチャ

さて実際にウィンドウをWebサイトの大きさにリサイズし、それをキャプチャしてみよう。

ウィンドウリサイズのコードを追加する。

 // (2) resize window
 NSView* view = [[[_web_view mainFrame] frameView] documentView];
 NSRect document_bounds = [view bounds];
 NSRect original_window_frame = [_window frame];
 NSRect new_window_frame = original_window_frame;
 new_window_frame.size = document_bounds.size;
 new_window_frame.size.height += 100;
 new_window_frame.size.width += 60;
 [_window setFrame:new_window_frame
     display:YES
     animate:YES];

ページを表示させて「Capture」ボタンを押す。


ウィンドウがリサイズされて Webサイトの大きさになった。。と思いきや Dockに引っかかり高さが制限されてしまった。


そういえば SnapWebは起動/終了時に Dockが一時的に消える奇妙な動作をしていた。このあたり何かシステム設定を変えているのだろうか？