こんにちは。ブログビジネス部の河野です。

説明や提案など資料を作る際に、Webページやアプリケーションの画面のイメージを取り込んだり利用することは多くあると思います。

今回はそのような場面に役立つツールをご紹介したいと思います。

画面キャプチャーツールの使い分け


窓の杜には「画面キャプチャー」、ベクターには「グラフィックセーバ(キャプチャ)」と、キャプチャーツールは、数多く紹介されています。それぞれ、細かいところで特徴に違いがありますので、自分の好みに合わせて使えばいいと思います。

私の場合は、
  • キャプチャ対象がWebページかそれ以外のデスクトップアプリか
  • 範囲がユーザー指定か全画面か、或いは、表示されないページ全体部分も含むか
  • キャプチャした画像はファイルとして保持したいか、クリップボードに保持でOKか
などによって、いくつか使い分けをしています。

【1】Webページのキャプチャー

Webページのキャプチャーの場合には、やはりブラウザのアドオンの形が手軽であり、私はFirefoxを使用しているので、スクロールを含めたページ全体もキャプチャーできる「Pearl Crescent Page Saver Basic」を使用しています。

また、選択範囲を素早く共有したり、URLとしてお知らせしたい場合には、Gyazoを使うこともあります。手軽かつ、URLで共有できるため、グループチャットなどテンポラリでの利用に重宝しますが、アップロードした画像は消せないため、機密な内容が含まれる画面には使用しない方がいいです。

【2】デスクトップアプリのキャプチャー

Web以外のデスクトップアプリのキャプチャーには、非常に高機能な「WinShot」を昔から使っています。

ただ、WinShotではスクロールを含めたページ全体を取れないので、ページ全体を取る場合には、 「消費リソース零!『キャプラ』」を使用していました。デスクトップアプリでページ全体の画像を1枚絵としてキャプチャーできるツールはなかなかないので重宝しています。アプリケーションによってはキャプラではスクロールキャプチャーが動作しないこともあるので、その場合はFastStone Captureを使用します。

図1

インストールして起動すると、上の図1のメニューバーが立ち上がります。この画面の赤枠で囲ったボタンがスクロールキャプチャーです。このボタンを押下し、対象のアプリケーションを指定すると、指定したアプリが自動でスクロールを始めます。Excelのように最大行数までスクロールするタイプのものは、希望のところでEsc(エスケープ)ボタンを押せばそこでキャプチャーを終了します。

また、本ディレクターブログの過去エントリーにも「モバイルサイトのキャプチャを撮ろう」というよくまとまった記事があります。ここで紹介のツールはモバイルサイトに限らず利用できる内容になっていますので、こちらも是非ご参照下さい。

閲覧中のWebページをお手軽に編集するFirefoxアドオン


Webページをキャプチャーする際に、表示されている内容を編集したい状況があると思います。その際、わざわざWebページをローカルに保存して編集するのも手間ですし、かといって「Firebug」を利用するには少し重たいこともあるでしょう。

そこでFirefoxのアドオンを使って編集する方法を2つ紹介します。

【1】Page Hackerを使ったWebページ編集

内容の一部分をちょっと編集したい時には、Firefoxのアドオンである「Page Hacker」が便利です。 下記過去の記事ページを開いた状態で、ページ編集ボタン(図2のドクロのボタン:ツールバーカスタマイズで「ページ編集」というアイコンがありますので、それをセットします)を押すとその画面の編集ができます。

図2

例えば、以下のように、タイトルの日付を選択して、再度本日の日付に変更(図3)したり、

図3

サイドバーカラムの広告を消して、別のページにある画像を持って来たり(図4)などができます。CSSなどは使えないため、あくまで画像やプレインテキストの編集ですが、ちょっとした修整には役立つと思います。

図4

【2】GreaseMonkeyを使ったWebページ編集

特定の文字列の置換や削除をしたい時、GreaseMonkeyのスクリプトを利用することができます。

kenmituoの日記にはCSVファイルとGreasemonkeyで強引に置換する方法が書いてありますし、きりんシステムさんのWebAborn(ウェブあぼ〜ん)では、いやな文字列を'あぼ〜ん'と置換するスクリプトを提供しています。今回は試しに後者のWebAbornを利用して、削除したい文字列を非表示にしてみましょう。

下のPukiWiki(図5)は弊社社内で使用しているWikiの印刷用ページです。こちらを印刷しようとすると、各セクションに「↑」と「edit」と自動で付く文字列により縦に間延びして1ページで印刷できる領域が少なくなっています。ですので、上のWebAbornを使ってこの文字列を消してみましょう。

図5

先程の「WebAborn(ウェブあぼ〜ん)」ページの「作成フォーム」で、NGワード:に「↑」と「edit」を記載して「WebAbornダウンロード」ボタンを押します(図6)。

図6

すると、WebAborn.user.jsをダウンロードできますので、このユーザースクリプトをGreaseMonkeyの入っているFirefoxインストールしましょう(GreaseMonkeyのインストール方法については、Google Maniaさんの「Greasemonkey入門 〜よくわかるグリースモンキーの使い方 〜」が詳しいのでご参照下さい。また、ユーザースクリプトファイルはFirefoxにドラッグ&ドロップすればインストールできます)

WebAborn.user.jsをインストールすると、上のNGワードは「あぼ〜ん」に置換されます(図7)。

図7

今回は、NGワード自体を削除したいので、GreaseMonkeyスクリプトに少し手を加えます。Firefoxの「ツール」>「Greasemonkey」>「ユーザースクリプトの管理」で管理画面(図8)を開き、「編集」ボタンを押します。

図8


そのスクリプトの23行目、

23: const abornString = 'あぼ〜ん'; //あぼ〜ん
をコメントアウトし、24行目に空白にするよう指示します。

23: //const abornString = 'あぼ〜ん'; //あぼ〜ん→使用しない
24: const abornString = ''; //空白に
このように修正して保存します。同じページをリロードしてみると、無事NGワードが消えて1ページに表示できる領域が広がりました(図9)。

7d7e224e

ライブドアでは、資料作成が得意なディレクターを募集しています。