先日知人に「Web画面のスクリーンショットってどうやって撮るの？」と質問されスタンダードな方法を口頭で説明しました。その他いくつかの方法があるので、公開＆自身の備忘録用（MyWikiの下書き）も兼ねて下記にまとめてみました。

まず「スクリーンショットってなんですか？」と言う方の為に・・・・。

スクリーンショットとは、パソコン画面 （モニター・ディスプレイ）を画像イメージとして保存する事です。その他「スクリーンキャプチャ」・「画面キャプチャ」・「キャプチャー画像」などと呼ばれる事もあります。

「機能説明」や「イメージ利用」など、Web上はもちろん、印刷物等にもWeb画面のスクリーンショットを利用する場面は、意外と多くあります。最近ではモニター上の動きを動画として保存して利用する事も増えています。

ここでは静止画像を保存する為に、もともとマシーンに備わっている「標準機能」を利用した方法や「専用ツール」、「アドオン」、「Webサービス」等を利用したいくつかの方法を紹介したいと思います。

マシーン標準機能を利用する

マシーン（PC・Mac）に予め備わっている機能を利用して「スクリーンショット」を撮る方法です。

Windowsの場合

画面全体を保存する場合は、キーボードの[PrtSc]（プリントスクリーン）ボタンを押すことで、クリップボードに保存され、画像ソフト等へ貼り付けて利用します。アクティブウィンドウ（開いている画面）のみを保存する場合は、[Alt]+[PrtSc]にてクリップボードに保存されます。

Mac（OSX）の場合

画面全体を保存する場合は、[command]+[shiftキー]+3。アクティブウィンドウのみを保存する場合は、[command]+[shiftキー]+4を押した後、スペースキーを押すとカメラ型のアイコンが出るので保存したいウィンドウをクリックする事で、キャプチャファイルがデスクトップ上に生成されます。

専用ツールを利用する

「キャプチャソフト」等と呼ばれる専用ソフトを利用する事で、画面を保存する事が出来ます。

• WinShot （Win：フリーウェア）
• 画面ライター （Win：フリーウェア）
• WebScan （Win：シェアウェア）　★お勧め
• InstantShot! （Mac：フリーウェア）

FireFoxのアドオンを利用する

ブラウザに「FireFox」を利用されている方は、アドオン（拡張機能）を利用する事で簡単に利用することが出来ます。

• Pearl CrescentPage Saver （ページ全体を保存できて便利）
• FireShot （ページに注釈を書き込める）

普段メインブラウザに「FireFox」を利用している人は、もう既に利用している人も多いのではないかと思います。「FireFox」は、レンダリング等様々な面で優秀なブラウザですが、この拡張機能（アドオン）が充実している事が最大の魅力ではないでしょうか？

Webサービスを利用する

使いどころに制限がありますが、Webサイトをサムネイルとして利用できるサービスもあります。又、ブラウザ上でページ全体の画像を取得でき、サイズ等も選べる「Super Screenshot!」は、お手軽に使えるので重宝しそうです。

• サムネイルAPI
• SimpleAPI
• Mozshot
• Super Screenshot!

マシーン標準機能・専用ソフト・ブラウザ拡張機能など、上記以外にも多くのもの又は方法等が存在しますが、自身にとって一番使いやすいものを何か一つ見つけておくと必要になった時、重宝するかと思います。

ちなみに・・・Webの場合、あまりにも簡単に保存できてしまいますが、厳密には著作権に絡む部分も出てくるので、保存した「キャプチャ画像」の使いどころには注意してください。

関連する投稿

• 関連する投稿はありません。

少し前に、この現象に気づいたのですが、運営しているサイト内にて、アンカーリンクが意図した位置を表示していない現象がありました。(IEのみ)ローカル上では正しい位置（意図したポイント）へ移動していた為、このような不具合があることに気づくのが遅くなってしまいました。

※　本投稿記事には訂正文章が追記されています。

自身で運営するサイトと言う事もありますが、何故だかこのサイトのみの現象だった為、検証して解決する時間もなく今日まで放置していましたが、ふと何気に気になり情報収集した後にようやく解決に至りました。

現象は違いましたが、どちらかのサイトでCSSファイルへのリンクをJavaScriptで書き出したところ、問題が解決したというのがヒントになりました。

たぶん今回は特殊な？例なので同じ現象に悩まされている方はまずいないと思いますが、自身のためにメモしておきます。

【追記】9月7日
どうやらXPにIE7を入れてから自身の特定のマシーンだけがこの現象となっていたようですので、記事としては全く参考にはなりませんのでご容赦ください。記事の削除も考えましたが、現象としては事実なので訂正記事として残しておきます。どうもIE７の動作が安定しなくて困っています。（サードパーティ製ツールバーも影響して強制終了しまくり）普段はFFかsafar中心iなので検証用でしか使っていませんが・・・。

現象

「FAQページ」のディレクトリーにて「質問のリストページ」と「アンサーページ」が存在し、該当の質問と答え（アンサー）をアンカーリンクにて結んでいる部分が意図している位置に正しく飛ばない。.

アンカーリンクの不具合における主な要因

例：1　リンク自体が反応しない
これは単純なケースですがタグの記載ミスが考えられます。aタグの記載を確認。
又、最近では、お手軽に導入できる為、様々なサイトでAjaxのライブラリーが頻繁に利用されていますが、リンク自体が反応しない場合は、これが影響して不具合がでる場合などもあるので、疑わしい場合は、問題解決のために切り分けて動作確認を行ってみる。（スクリプト自体が影響している場合やid名が重複している等）

例：2　反応するがリンク先のページトップに飛んでしまう
アンカー先が設置されていないかアンカー名が間違っている事が考えられます。

例：3　意図したアンカー先に飛ばない
リンクのURLとアンカー名が正しく設定されていない（合っていない）事が考えられます。
リンクするURLとアンカー名が合っているかを確認。
よくある間違いとしてはアンカー名に対して「＃」がついていたり（＃が必要なのはリンク側のURL）その他、余計な記載がある場合、又は、アンカー名が重複している等が考えられます。

例：4　アンカー名の記載に問題がある
アンカー名をつける際は、原則として半角英数字を使用し、idに対してはアンカー名の始まりはアルファベットからとされています。といっても、おおよその場合「数字のみ」や「日本語」を使用しても動作する場合がほとんどですが、あまり好ましくはありません。又、ブラウザによっては正しく動作しない可能性も考えられますので仕様に沿った記載方法がよいかと思います。

記載する基本タグ：（一例）

アンカー先へリンクするURL

<a href="linkpage#anc1">anc1へ</a>

該当のアンカー先

<a id="anc1" name="anc1">アンカー先</a>

今回の検証結果

今回の現象に関して、上記に記載する要因等は見当たりませんでした。
普段自身が制作している他のサイトでは起こらない現象だったので、該当のサイトが特殊な事をしていないかを探り、結果としてCSSファイルへのリンク方法が原因であることがわかりました。自身のマシーン（XP+IE7）が動作不安定なのが原因だと言う事がわかりました。（ホントか？）

正直な所、なぜそうなるのか等の原因追求までは出来ていませんが、CSSを無効にした際は、アンカーリンクが正しい（意図した）ヵ所へ飛ぶ現象を確認した為、記載方法を変更した所、問題が解決しました。※XPにIE7を入れた自分の特定のマシーンだけが不安定な為に起こった現象のようです。所有する他のマシーン（Win+XP+IE7）では、この現象を再現する事はできませんでした。（ただし、この特定のマシーンによって実際に他のサイトではこの現象が起こらなかった事、又、CSSの読み込み方を変更した事で解決した事は事実です。）したがって下記の方法で表題の現象が解決する事はないとおもわれます。たぶん・・・・。

問題となった部分

@import "css/imported.css";

CSSファイルへのリンクに「@import」を使用していたこと。これが原因でした。

wordpressのデフォルトテンプレート等で使われていますが、今ではこの記載方法を使用される方は少ないようです。（自身も該当サイトとwordpressでしか使用したことはありませんでした。）

丁度該当サイトを制作している当時に、クロスブラウザの問題を解決するベストな方法だと確信していた方法だった？為、年月が経った今も、この記載方法がそのまま使われていたのが原因だったようです。（たしか？JeffreyZeldmanが今のWordPress仕様に変更する前からこの記載を使っていたような・・・）

よく使われるCSSファイルへのリンク方法で

<link rel="stylesheet" type="text/css" href="css/imported.css" media="****" />

のような記載方法に直した事で問題が解決しました。

最初アンカー名の記載方法にアンダーバーを使用している為、その辺を疑ったのですが、全く違う原因でした。（アンダーバー・ハイフン・半角英数字での記載なら特に問題は無いようです。）

今回のような「@import」にるリンクは、記載方法によって「ネスケ」の古いバージョンではフリーズするとかクラッシュするとか（検証したことは無いですが）と言うことなのであまり好ましくないようです。

「@import」にるリンクによってなぜこのような現象が起こるのか、又、実際に何が影響しているか等の根本的な原因まではわかりませんが、不具合はとりあえず解決という事で。

前リニューアルから３年も経過しているので、そろそろ更新しないと・・・・・

関連する投稿

• 関連する投稿はありません。

携帯端末のシュミレーターがダウンロード出来ます。
それでも実機とは微妙に違うけど、無いよりは。。

■EZweb
Openwave Developer Network
■Vodafone live!
919シミュレータ&エディタ
■i-mode
i-mode HTMLシュミレーター

関連する投稿

• 関連する投稿はありません。