WebViewで表示している Webサイトページの表示サイズはどこから取得できるだろうか？デバッグにサイズを表示して確認してみたところ、どうもメインフレーム配下の NSDocumentView から取得できるようだ。
NSView* view = [[[_web_view mainFrame] frameView] documentView];
NSRect rect = [view bounds];
NSLog(@"%@", NSStringFromRect(rect));
[Session started at 00:58:31 +0900.]
00:58:51.595 WebKitSample[923:10b] {{0, 0}, {984, 938}}
00:59:05.908 WebKitSample[923:10b] {{0, 0}, {984, 938}}
先日の SnapWeb に刺激され（？）ウィンドウキャプチャ方式のアプローチを試してみる (*)。
(*) 実際に SnapWebがこの方法をとっているかは不明
サンプルに「Capture」ボタンをつけて、AppController#capture: へ接続する。実装はこんな感じ。
{
// (1) setup filename
NSArray *paths = NSSearchPathForDirectoriesInDomains(
NSDesktopDirectory, NSUserDomainMask, YES);
NSString* path = [NSString stringWithFormat:@"%@/test.png",
[paths objectAtIndex:0], nil];
// (2) capture
CGWindowID *windowIDs = calloc(1, sizeof(CGWindowID));
windowIDs[0] = [_window windowNumber];
CFArrayRef windowIDsArray =
CFArrayCreate(kCFAllocatorDefault, (const void**)windowIDs, 1, NULL);
CGImageRef cgimage =
CGWindowListCreateImageFromArray(
CGRectNull, windowIDsArray, kCGWindowImageBoundsIgnoreFraming);
NSBitmapImageRep *bitmap_rep =
[[[NSBitmapImageRep alloc] initWithCGImage:cgimage] autorelease];
NSData* data = [bitmap_rep representationUsingType:NSPNGFileType
properties:[NSDictionary dictionary]];
[data writeToFile:path atomically:YES];
CGImageRelease(cgimage);
free(windowIDs);
CFRelease(windowIDsArray);
}
本屋へ行くとまたまたObjc/iPhone関連の新刊が出ていた。
木下さんによる Objective-C本。これはネットの連載に加筆して出版したもの。連載はたまに読んで参考にさせてもらっていた。
こちらは「Cocoaはやっぱり」で有名な鶴薗さんによる iPhone本。立ち読みした感じでは図が多く（おなじみの？シーケンス図も健在）わかりやすそうな印象を受けた。Amazonの評価も１件だけだが高い。
WebKit の Flashの問題で情報を探しているとこんなソフトを見つけた。
Brain Tickling Software - SnapWeb
"The internet snapshot and archiving utility"
試してみよう。
起動すると簡易ブラウザが立ち上がる。
Flashを含むページを表示する。
Saveボタンを押す。少し間がありファイルが作成された。色や内容がきちんと再現できている。
いろいろオプションもある。
- - - -
なんだかやりたいことがこのソフトで
すべて実現できているような。
なおソフトの動きで気になることが２点あった。
一つは、ブラウザ部分と、その枠の部分が別のウィンドウになっていたこと。
もう一つは、Save時にどうも screencaptureコマンドが動作していること。
この２つから類推するに、もしかしてブラウザ部分のウィンドウをサイトの表示ができる最大サイズまで拡大し、それを screencaptureコマンドで撮影しているのでは？だとしたらかなりユニーク、というか荒技だ。でも再現性という意味では確実かもしれない。ちょっと試してみたいな。
さて用意したメニューのプレースホルダーにプリセットされた範囲選択サイズを設定する。
QuickConfigのメニューは、範囲選択処理を司る SelectionHandler がボタンが押されたら反応し、上位のCaptureController に開いてもらっている。これは Nib内のインスタンスを上位のコントローラで保持しているため。そんなこともあるので（少しややこしいが）CaptureControllerから再び SelectionHandlerをコールバックし、ここでプレースホルダーへプリセットサイズを設定することにする。
QuickConfigボタン押下
↓
SelectionHandler
↓
CaptureContorller#openSelectionConfigMenuWithView:event:
↓
SelectionHandler#setupQuickConfigMenu:(NSMenu*)menu
- (void)setupQuickConfigMenu:(NSMenu*)menu
{
// [super setupQuickConfigMenu:menu];
NSMenuItem* item;
NSString* title;
item = [menu itemWithTag:1];
title = [self sizeTitleWithNameKey:UDKEY_SELECTION_NAME1
widthKey:UDKEY_SELECTION_WIDTH1
heightKey:UDKEY_SELECTION_HEIGHT1];
[item setTitle:title];
[item setAction:@selector(selectSize:)];
[item setTarget:self];
：
久々に SimpleCap の調整。
範囲選択で右クリックするとコンテキストメニューが開きプリセットされたサイズを選択できる。
右クリックはわかりづらい上、その後 QuickConfigが用意されたのでそこへ移すことにする。
まずは InterfaceBuilderでメニューに５つ分のメニューアイテムを追加する。SimpleCapではプリセットは５個固定なので安易だが固定枠をあらかじめ用意しておき、これをプレースホルダーとして実行時に内容を置き換えることにする。
置き換えはまた明日。
Flashが正しくキャプチャできない件についてネットで調べてみたところ何人か困っている人がいた。
Apple Mailing Lists - Capturing offscreen webview containing flash
NSBitmapImageRep#initWithFocusedViewRect: を使うことが示唆されている。
cocoa-dev - Capture youtube image in webview
本ブログ同様に NSView#cacheDisplayInRect:toBitmapImageRep:
でうまくいかない件が取り上げられている。
今日は調査だけでおしまい。
NSView を画像に保存する方法がもう一つあったのを思い出した。こちらを使って Flashページのキャプチャをやってみよう。
現在は NSView#cacheDisplayInrect:toBitmapImageRep: を使っている。
NSBitmapImageRep* bitmap =
[view bitmapImageRepForCachingDisplayInRect:rect];
[view cacheDisplayInRect:[view bounds]
toBitmapImageRep:bitmap];
NSData* data = [view dataWithPDFInsideRect:rect];
NSImage* img = [[[NSImage alloc] initWithData:data] autorelease];
data = [img TIFFRepresentation];
NSBitmapImageRep* bitmap = [NSBitmapImageRep imageRepWithData:data];
Flashを含むページを保存するとどうなるのだろうか。やってみよう。
まずFlashがあるページをサンプルプログラムで開き画像を保存する。
色がおかしい。
次にPDFで保存してみる。色はいいが、上の赤いメニューが消えている。
試しに Safariで印刷プレビューを見てみる。こちらは見たままが再現できているようだ。
しまいにはクラッシュしてしまった。。。
[Session started at 2009-04-22 17:07:57 +0900.]
プログラムをデバッガに読み込み中...
GNU gdb 6.3.50-20050815 (Apple version gdb-962) (Sat Jul 26 08:17:57 UTC 2008)
Copyright 2004 Free Software Foundation, Inc.
GDB is free software, covered by the GNU General Public License, and you are
welcome to change it and/or distribute copies of it under certain conditions.
Type "show copying" to see the conditions.
There is absolutely no warranty for GDB. Type "show warranty" for details.
This GDB was configured as "powerpc-apple-darwin".プログラムは読み込まれました。
sharedlibrary apply-load-rules all
Attaching to program: `/Users/hashi/Documents/Private/study/WebKitSample/build/Debug/WebKitSample.app/Contents/MacOS/WebKitSample', process 14036.
これまでに WebViewを使って画像やPDFを作成してきたが、どれも一部のフレームしか表示されなかった。そういうものなのかと思っていたところ、先日 odnazさんから印刷用CSS が適用されたのではないかとの指摘を受けた。なるほど。確かにそんな感じがする。
動作確認に利用していたページ（ADCのリファレンス）を Safariで開き、印刷プレビューを見ると確かに右側のフレームだけの表示になっている。
印刷用プレビュー
スタイルシートにはメディアタイプと呼ばれる出力媒体を設定することができる。一般的に使われる画面(screen)、印刷(print) の他に、携帯デバイス(handheld)や点字向け(braille, embosseed)、さらには音声(speech)などを指定することができる。この設定を受け取ったブラウザはそれらに適合したデバイス（例えば音声合成ソフトとスピーカー）が利用可能であれば、その出力媒体をターゲットにした表現を行う（例えば、ページを読み上げる）。
参考：正しい知識を得たい人の為のCSS2リファレンス - メディアタイプ
よく使われるのは screen（画面）と print（印刷）で、通常ブラウザで使っている場合には screen向けに定義されたスタイルシートを使い画面表示を行う。一方 印刷（もしくはプレビュー）する場合には print向けに定義されたスタイルシートを使う。今回 ADCのリファレンスページではCSS内に printが設定されていたので、Safari（もしくは WebView）がそのスタイルシート設定を使い、一部のフレームだけを表示していた。
ということは WebView が使うメディアタイプを制御できれば、画像生成時（もしくはPDF生成時）の表現を変えられるのでは？
そこでリファレンスを眺めているとメディアタイプを指定するメソッドが見つかった。
WebView#setMediaStyle:
ここへ "screen" を渡してみたらどうなるのか？やってみよう。
コードへ下記を１行追加する。
[_web_view setMediaStyle:@"screen"];
前回の PDF生成の方法は簡易ではあったものの、ページ制御ができなかった（大きなサイズも１ページの PDF書類になっていた）。
そこで WebKitと少し離れるが、PDF形式をページ付きで保存できないかどうか、もう少し調べてみた。
（１時間程度）いろいろ調べた結果、とりあえず２つの方法があることが分かった。
一つはカスタムビューを作り NSView#knowsPageRange: と NSView#rectForPage: をオーバーライドした上で、前回の NSView#dataWithPDFInsideRect: と組み合わせてページ制御する方法。
これは今回の様に他から与えられた NSView を扱う場合、少々面倒（カスタムビューを用意した上で、そちらへ描画内容をコピーしなければならない）。
もう一つは NSPrintOperation を使い印刷の仕組みを借りる方法。
通常印刷する時に印刷ダイアログを開き PDF保存することができるが、それと同じ仕組み（多分）。
今回はこの方法を試してみた。
参考にしたページ：
Printing Dicrectly To PDF Without Dialog
コードはこんな感じ。
- (IBAction)savePDF:(id)sender
{
// (1) setup filename
NSArray *paths = NSSearchPathForDirectoriesInDomains(
NSDesktopDirectory, NSUserDomainMask, YES);
NSString* path = [NSString stringWithFormat:@"%@/test.pdf",
[paths objectAtIndex:0], nil];
// (2) setup WebView
NSView* view = [[[_web_view mainFrame] frameView] documentView];
// (3) setup NSDictionary for NSPrintInfo
NSMutableDictionary* p_dict = [NSMutableDictionary
dictionaryWithDictionary:[[NSPrintInfo sharedPrintInfo] dictionary]];
[p_dict setObject:NSPrintSaveJob forKey:NSPrintJobDisposition];
[p_dict setObject:path forKey:NSPrintSavePath];
// (4) setup NSPrintInfo
NSPrintInfo* p_info = [[NSPrintInfo alloc] initWithDictionary:p_dict];
[p_info setHorizontalPagination:NSAutoPagination];
[p_info setVerticalPagination:NSAutoPagination];
[p_info setVerticallyCentered:NO];
// (5) setup NSPrintOperation
NSPrintOperation* p_ope =
[NSPrintOperation printOperationWithView:view
printInfo:p_info];
[p_ope setShowPanels:NO];
// (6) print it
[p_ope runOperation];
}
次は PDF形式で保存してみる。
NSViewには #dataWithPDFInsideRect なんてそのものずばりのメソッドが用意されているのでこれを使ってみよう。以前の画像を保存するコードを流用してちょっぴり書き換えるだけ。
- (IBAction)savePDF:(id)sender
{
NSView* view = [[[_web_view mainFrame] frameView] documentView];
NSRect rect = [view bounds];
NSData* outdata = [view dataWithPDFInsideRect:rect];
NSArray *paths = NSSearchPathForDirectoriesInDomains(
NSDesktopDirectory, NSUserDomainMask, YES);
NSString* path = [NSString stringWithFormat:@"%@/test.pdf",
[paths objectAtIndex:0], nil];
[outdata writeToFile:path atomically:YES];
}
WebKitを使って Webアーカイブ形式の保存を試してみよう。
Webアーカイブ形式とは、Webページをファイルに保存する時に使われている形式の一種で、Safariからだと メニューから「別名で保存...」で保存できる。
保存したファイルは Safariで読み込み表示させることができる。
まずWebアーカイブ形式で保存するためのボタンを追加する。
ボタンが押されたら次の処理を実行する。
- (IBAction)saveWebArchive:(id)sender
{
WebDataSource* dataSource = [[_web_view mainFrame] dataSource];
WebArchive* webArchive = [dataSource webArchive];
NSData* data = [webArchive data];
NSArray *paths = NSSearchPathForDirectoriesInDomains(
NSDesktopDirectory, NSUserDomainMask, YES);
NSString* path = [NSString stringWithFormat:@"%@/test.webarchive",
[paths objectAtIndex:0], nil];
[data writeToFile:path atomically:YES];
}
範囲選択で矢印キーを押すとラバーバンドが10ピクセル移動するようになっている。これを1ピクセルへ変更した。
10ピクセル単位で移動したい場合は Optionキーを押しながら矢印キーを押す。
矢印を使うケースは微調整を行いたい時が多いので通常1ピクセル移動の方が使い勝手が良い。
生成画像の横幅を固定にする為、はみ出た部分はカットしてしまおう。これは簡単にできて NSView#bitmapImageRepForCachingDisplayInRect: へ渡す NSRectで調整（クリップ）できる。
NSView* view = [[[_web_view mainFrame] frameView] documentView];
NSRect rect = [view bounds];
rect.size.width = 600;
NSBitmapImageRep* bitmap =
[view bitmapImageRepForCachingDisplayInRect:rect];
昨日の続き。
WebFrameView#setAllowsScrolling: を呼び出してスクロールを禁止してみよう。
- (void)awakeFromNib
{
:
[[[_web_view mainFrame] frameView] setAllowsScrolling:NO];
}
キャプチャ画像のサイズはどうやって決まるのだろうか。調べてみる。
まず表示ビューの大きさに影響を受けているかどうかを確認しよう。InterfaceBuilderで、ウィンドウサイズによってWebViewが伸縮するように設定する。
ウィンドウを小さくした時と大きくした時とで生成画像に差が出るかどうか見てみる。
まず小さくした場合。
生成画像は大体見えているものと同じだ。幅があるのは、スクロールで隠れていた部分がある為。
次に大きくした場合。
こちらも基本的に見えている大きさで画像が生成されている。
では、もっと極端に幅を狭くしてみよう。
やはり生成画像も細長くなる。
全体はこんな感じ。
- - - -
ビューから直接画像へ落としているので、見えるものがそのまま画像として生成されるという当たり前といえば当たり前の結果となった。ただし、ビューはスクロールを許しているので、生成画像の幅をビューの大きさで制御することはできない。であればスクロールを禁止すれば良い？？
