Entries Tagged as 'memo'

スクリーンショットを撮る(スクリーンキャプチャ)

ScreenCapture

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

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

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

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

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

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

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

Windows
画面全体を保存する場合は、キーボードの[PrtSc](プリントスクリーン)ボタンを押すことで、クリップボードに保存され、画像ソフト等へ貼り付けて利用します。アクティブウィンドウ(開いている画面)のみを保存する場合は、[Alt]+[PrtSc]にてクリップボードに保存されます。
Mac(OSX)
画面全体を保存する場合は、[command]+[shiftキー]+3。アクティブウィンドウのみを保存する場合は、[command]+[shiftキー]+4を押した後、スペースキーを押すとカメラ型のアイコンが出るので保存したいウィンドウをクリックする事で、キャプチャファイルがデスクトップ上に生成されます。

専用ツールを利用する

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

FireFoxのアドオンを利用する

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

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

Webサービスを利用する

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

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

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

アンカーリンクが正しいポイントへ飛ばない件

anchor_link

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

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

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

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

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

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

現象

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

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

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

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

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

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

記載する基本タグ

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


(例) <a href="linkpage#anc1">anc1へ</a>

該当のアンカー先


(例) <a name="anc1" id="anc1">アンカー先</a>
(例) <p id="anc1">アンカー先</p>

今回の検証結果

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

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

問題となった部分


<style type="text/css" media="all">@import "css/imported.css";</style>

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

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

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

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


<link rel="stylesheet" type="text/css" href="css/import.css" media="all" />

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

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

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

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

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

Eolas問題への対応

ActiveX コントロールのアクティブ化

この問題以前に、標準対応を意識してLint結果をパスする為に.Jsファイルで書き出すのはどうなのか?と考えていましたが、対処方法の大半が、.Jsファイルで書き出す方法のようです。

スクリプト機能OFF時の対応はどうするのか?等ありますが、大半のWEBユーザーが使用するIEの仕様だけに、対応しないわけには・・・。

以下Eolas問題に関する対応方法等の情報掲載先リンク。

■Eolas問題とは
MSのセキュリティ・パッチでFlashコンテンツの再生に不具合発生,その理由は? [ITpro]

米Microsoft,次回のIE向け修正パッチで米EolasのWebブラウザ特許を回避 [ITpro]

■対応方法
FlashなどをIE仕様変更に対応させる [All About]

ActiveX コントロールのアクティブ化 [MSDN]

ブラウザの更新に備えたアクティブコンテンツ使用Webサイトの準備 [Adobe]

IE 7 Beta 2 チェックリスト

■InternetWatch
IE 7 Beta 2でWebデザイナーと開発者が確認すべき点がチェックリストに

米MicrosoftがIE7に関して情報を公開しています。

■チェックリスト(英文)
http://www.microsoft.com/windows/IE/ie7/devwebchecklist.mspx
■IE 7におけるCSS互換性(英文)
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/ie7_css_compat.asp

IE7 CSS Hack

IE7に有効なCSSHackが早速公開されています。
■The IE7 CSS Hack
http://www.ibloomstudios.com/article7/

IE7のみに有効なHackが必要な場面は?現時点では??

とりあえず、ざっと見た感じでは
スターハック・アンダースコアハック・再定義等はIE7では動作しないが、従来通りQuirksモードへの対応へ使用するには多分問題ないかと??

ちなみに条件付コメントにてIE(WIN全部)を指定している場合は、当然IE7にも反映されてしまうので、振分けが必要。βなのでなんとも言えませんが、すべての検証はしていないので時間が空き次第、引き続き検証してみたいと思います。ズーム機能の追加や印刷機能の環境が随分と改善されているのはすごくよいですね。

携帯端末シュミレーター

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

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

QRコードの活用。

74e6a432c5b68b142b68ce2199952db3.jpg

ブランドショップのプライスカードや駅の広告ポスターなど、様々な分野で利用されているQRコード。名刺やDM、チラシ広告や懸賞プレゼント応募などさまざま。 他にも

■商品の補足説明の為に商品に
■生産地・工場などがわかるように食品タグに
■携帯サイトのURL記載に

等など。
マグカップにプリントしてるサイトなんかもあったりして、非常に広がりつつあります。
上手い事活用すればまだまだ利用法は無限大?

しかし 悲しい事に自分の携帯ではQRコードは読めない。
実感してないからアイデアが浮かばない.....

携帯端末の進化の早いこと早いこと。

QRコード作成サイト<<<
QRコードblog<<<
QRコード作成用フリーウェア<<<
QRコードについて<<<

Windows XP Service Pack 2 関連情報

【主なウイルス対策ソフトウェアメーカーのWindows XP SP2情報】

株式会社シマンテック
http://www.symantec.com/region/jp/techsupp/sp2/faq.html

ソースネクスト株式会社
http://sec.sourcenext.info/support/xp2.html

トレンドマイクロ株式会社
http://www.trendmicro.com/jp/support/winxpsp2.htm

マカフィー株式会社
http://www.mcafeesecurity.com/japan/mcafee/support/040813.asp