SimpleCapでWebキャプチャ

SimpleCapに組み込むWebキャプチャ機能はどんなものが良いのだろうか。用途を考えてみた。

(1) ブログ用
　用途として多そうなのがブログなどに掲載するホームページの紹介画像など。通常はWebページの一部分のキャプチャか、ウィンドウのキャプチャがあれば良い。この場合は縮小機能（サムネイル）があると良さそう。

(2) メモ用
　自分のメモ用途として Web画面をキャプチャするケースなど。この場合は一部分のキャプチャに加え、ページ全体を残したい場合がある。ただこの場合、Safariでは Webアーカイブとして保存することができるのでたいていはこれで事足りる。

(3) マニュアル用
　マニュアル記載のスクリーンショットを作成するケースなど。この用途で使う人は限られているが、ページ全体を画像として残したい。



(1)(2)は SimpelCapの既存機能（ウィンドウキャプチャ、範囲選択キャプチャ）か Safariの Webアーカイブ保存で対応できそう。このため、Webキャプチャ機能を使うケースは (3)が多いと想定される。とりあえずは (3)を想定した作りで進めてみよう。

キャプチャ方法としては、(a)特定のページだけを手軽にキャプチャ、(b) 一連の画面を続けてキャプチャする方法が考えられるが、(3)の場合だと、後者の(b)の方が良いと思われる。そうなると URLを指定して即キャプチャ(a想定）するようなユーザインターフェイスよりは、簡易ブラウザを用意して表示しているページをワンボタンでキャプチャするスタイルが良さそう。

WebKit検証(4) - Webのキャプチャ

WebKit検証の続き。

さて前回までで WebView を画像に落とすことに成功した。ただしこの画像は目に見えている範囲しか写っていなかった。やりたいのはページ全体を画像に落とすこと。前回のサンプルコードを使ってさらに検証を進めてる。


WebView は中にフレームを持っているので、今度はこれらのビューの内容を画像に落として行ってみる。

まずは WebViewの直下に存在するメインフレームのビュー。メインフレームは WebView#mainFrame メソッドで取得できる。ただしこれはモデルなのでビューは別に存在する。これはフレームに対して #frameView を投げれば取得できる。このビューを画像に落としてみよう。

NSView* view = [[_web_view mainFrame] frameView];

※以下前回と同じコード

さてどんな画像ができあがるか。実行して画像を作ってみる。

んん？変わらない。

ではさらに深く潜って #documentView はどうだろう。

NSView* view = [[[_web_view mainFrame] frameView] documentView];

おお出た。良い感じだ。

- - - -
WebKitが良くできているので結構簡単にキャプチャはできそうだ。
ただこの画像サイズ（縦横）はいったいどこで決まるのだろうか？

SimpleCap ...ローカライズ中

stringsファイルを修正し日本語 Nibファイルを作成して実行してみた。
「スクリーンオプション」が途中で切れている。



こっちも切れている。


Interface Builderで確認すると、コントロール幅が元の英語表記に合う分しか取られていないのが原因。


これをのばしてやる、というのは簡単だがこれをやると今後英語Nibファイルを変更すると再度幅の調整をする必要がある。


それは面倒なので、英語Nibの方で調整する。名一杯幅をとっておこう。


他も同様にして、


広げておく。



修正した英語Nibを元に日本語Stringsファイルを噛ませ、日本語Nibファイルを作成する。

ibtool --strings-file Japanese.lproj/MainMenu.strings --write Japanese.lproj/MainMenu.nib English.lproj/MainMenu.nib

とりあえず大丈夫なようだ。








- - - -
現状古い日本語Nibの位置情報は持ち越せない。こればっかりは仕方がないので、今後は英語Nibでデザインする場合はその辺りを念頭において進めた方がよさそうだ。

SimpleCap近況

地道にローカライズ中

WebKit検証(3) - ビューを画像に保存

WebKitのビューはどんな構成になっているのか。
ADC のドキュメントから図を拝借してきた。

WebKit Objective-C Programming Guide: Core WebKit Classes


なるほど WebViewは フレームで構成されていてこれらが入れ子になった構造になっている。
表示されている内容を画像に落とすにはどうしたら良いのだろうか？

ネットで調べるとすぐに出てきそうな気もするが、今回は検証も兼ねて少し自分で調べてみよう。
まず WebView 自体の表示内容はどうなっているのか。WebViewは NSView のサブクラスになっているので、表示内容を画像として書き出すことができる。

とりあえず作ってみよう。

まず Interface Builderで右下に「Save」ボタンを追加する。


AppControllerクラスに #saveImage: メソッドを追加し、「Save」ボタンの Actionへ接続しておく。

- (IBAction)saveImage:(id)sender;

#saveImage: の実装は次の通り。とりあえず NSWebView の表示内容をそのままPNG形式の画像ファイル（test.png）へ保存するコードを書いてみた。

<- (IBAction)saveImage:(id)sender
{
 NSBitmapImageRep* bitmap =
  [_web_view bitmapImageRepForCachingDisplayInRect:[_web_view bounds]];
 [_web_view cacheDisplayInRect:[_web_view bounds]
     toBitmapImageRep:bitmap];

 NSData* outdata = [bitmap representationUsingType:NSPNGFileType
             properties:[NSDictionary dictionary]];

 NSArray *paths = NSSearchPathForDirectoriesInDomains(
   NSDesktopDirectory, NSUserDomainMask, YES);
 NSString* path = [NSString stringWithFormat:@"%@/test.png",
       [paths objectAtIndex:0], nil];
 
 [outdata writeToFile:path atomically:YES];
}

NSView の表示内容を画像に落とす方法は Cocoaの日々：波紋（その１４） 前後を参照のこと。


さて実行してみよう。米国アップルのホームページを表示させてみた。


読み込みが終わったら「Save」ボタンを押す。デスクトップ上にファイルができた。なにやら画像が出来ている様子。プレビューで開いてみよう。


出た。HTML全体ではなく、ビューの表示領域だけだが画像に落とすことができた。


うーむ。こんなに簡単にいくとは思ってなかった。何事もやってみるものだ。

(ひさびさの)サンプルコード：WebKitSample-1.zip

WebKit検証(2) - プログレスバー

プログレスバーを付けてみる。今回もバインディングは使わずに実装する。

まず InterfaceBuilderで NSProgressIndicator を貼り付ける。


AppController.h へアウトレットを用意し InterfaceBuilderで接続する。

IBOutlet NSProgressIndicator* _progress;

ページの読み込み状況は WebView からの通知で知ることができる。

WebViewProgressEstimateChangedNotification
WebViewProgressFinishedNotification
WebViewProgressStartedNotification

通知を受け取るために #awakeFromNib内で、observerとして AppController自身を NSNotificationCenterへ登録する。
AppController.m

- (void)awakeFromNib
{
 NSNotificationCenter* nc = [NSNotificationCenter defaultCenter];
 [nc addObserver:self
     selector:@selector(processNotification:)
      name:WebViewProgressStartedNotification
    object:nil];
 [nc addObserver:self
     selector:@selector(processNotification:)
      name:WebViewProgressEstimateChangedNotification
    object:nil];
 [nc addObserver:self
     selector:@selector(processNotification:)
      name:WebViewProgressFinishedNotification
    object:nil];
}

通知が来たら #processNotification: メッセージが投げられるので、メソッド内でプログレスバーの値を更新する。ページ読み込み状況は WebView#estimatedProgress で取得できる。この戻り値は 0.0〜1.0 の範囲を取る（1.0=>100%完了）。

- (void)processNotification:(NSNotification *)notification
{
 WebView* wv = [notification object];
 [_progress setDoubleValue:[wv estimatedProgress]];
}

実行してみよう。


出た。

WebKit検証

SimpleCapはリリースに向けて地味な作業が続くのでブログでは別の話題を扱っていく。以前、Webページのキャプチャ機能を追加して欲しいとの要望を受けたので少しWebKitについて調べてみよう。

まずは最初の一歩として Webページを表示するだけのアプリを作ってみる。ネット上にこの話題はたくさんあるので適当に参考にして進めてみた。

まずはお約束通り、URL用の NSTextFieldと WebViewを配置する。


次は NSTextFieldを WebViewへバインドする。


あれ？ WebViewが選べない。他のサイトの説明だとここで WebViewが選べるのだが。

時間も無いのでとりあえず Action/Target ＆ Outlet で対応する。かっこわるいのだが "Go"ボタンを追加しておく。


AppControllerクラスを用意してアウトレットとアクションを実装する（もちろん InterfaceBuilderでワイヤー接続しておく）。

AppController.h

#import 
#import 

@interface AppController : NSObject {

 IBOutlet NSTextField* _url_text;
 IBOutlet WebView* _web_view;
}
- (IBAction)loadPage:(id)sender;

@end

WebView へページを表示させるには #mainFrame で WebFrame を取得した後、#loadRequest: を投げてやる。
（参考）WebKit Objective-C Programming Guide: Simple Browsing

AppController.m

@implementation AppController
- (IBAction)loadPage:(id)sender
{
 [[_web_view mainFrame] loadRequest:
  [NSURLRequest requestWithURL:[NSURL URLWithString:[_url_text stringValue]]]];
}
@end

実行して "http://www.apple.com/" を NSTextFieldへ入力し、"Go"ボタンを押す。


でた。
バインディングが使えない理由がわからないがとりあえずWebページが表示できた。