意外と知られていないAUNの使い方

  • このエントリーをはてなブックマークに追加

「URLを入れるだけでスクショが撮れて、しかもメモして共有できるなんて便利!」とお声を頂く「AUN」ですが、URLを入力してもAUNできないWebページもあるんです。「便利!!」という声と共に、「なんか、壊れたんですけど・・・」といった声も、実はよく頂いています。その都度、お教えしているのですが、URLを入力する以外にもAUNする方法はあります。URLを入力してキャプチャする他に、AUNできる方法が意外に知られていないので、今回はURLでスクリーンショットが撮れなかった時の代替策をご紹介します。

gf01a201503290500

※AUNする = 「AUN」を使って画像をキャプチャして、メモを追加する一連の行為を「AUNする」と呼びます。

そもそも、なぜURLでスクショが撮れないの?

URLを入力しても、スクリーンショットを撮れないサイトには特徴があります。大雑把にお伝えすると、「動くサイト」「会員制サイト」がそれに当たります。これらの条件に当てはまるサイトは、諸々の理由によってスクリーンショットを撮ることができません。では、どんな理由なのか説明していこうと思います。

1.動くサイトについて

「動くサイト」とは、パララックスやレイジーロード(サイトにアクセスした時には画像を読み込ませず、ウインドウの表示領域に入った時に初めて読み込みを開始させる手法)など、JavaScriptを利用して、ユーザーの操作に応じて、何かしらの効果を出す「インタラクティブ」なサイトを指します。これらのサイトは、ユーザーがマウスを操作して、初めて視覚的な効果を得ることができます。「AUN」のサーバーの中では、スクリーンショットを撮るツールが動いていますが、このツールは人がブラウザを使ってWebサイトを見る要領で、スクロールをしたり、動画を再生することができないことがあります。ただ、軽めのパララックスなら、適応する場合もあり。結局このツールの”さじ加減”によって、AUNできたり、できなかったりします。ですので、明確な動作環境を示すことができていません。実際のところは、やって見ないと分からないというのが、正直なところなのです。

  • パララックスでも比較的うまくAUNできてる例

a

参照元:日本コカ・コーラ株式会社 「Schweppes」
  • うまくAUNできなかった例

b

参照元:キリンビール株式会社 「キリン 澄みきり」

2.会員制サイトについて

「会員制サイト」とは、ログインが必要のあるWebサイトです。CMSの管理画面やRMS(楽天ショップオーナの管理画面)などの、Webシステムがこれに当たります。これは単純に、前述のサーバーサイドのツールが、管理画面にログインすることができないので、スクリーンショットを撮ることができません(逆にログインできてしまったら大変ですね)。ちなみに、当サイトはCMS(WordPress)を利用していますが、今書いている入力画面をAUNすると、下の様になってしまいます。

c

 

ということで、

  • 「動くサイト」
  • 「会員制サイト」

の2つに当てはまるサイトは、URLを入力してもAUNできない場合が多いのです。開発時からこの問題は把握済みで、この問題を回避する策として、我々は2つの方法を用意しています。それが、PC内の画像をアップロードする方法とプリントスクリーンを利用する方法です。

 

AUNする方法は3つある!

URLを入力してエラーの出るWebサイトには、是非とも別の方法でトライして頂きたいのです。ということで、「AUN」の画像取込み方法を改めてご紹介すると、以下の3つの方法があります。

  1. URLを入力して画像を取り込む方法
  2. プリントスクリーンから取り込む方法
  3. PC内の画像をアップロードする方法

1の方法がダメだった場合には、もっとも手っ取り早く対応できるのが、「プリントスクリーン」です。どんなパソコンのキーボードにも、「PrtSc」とか「PrintScreen」のようなキーがあるはずです。これを押すと、クリップボードというパソコン内の一時保管場所にデータが記録されます。「AUN」は、クリップボードに一時的に記録したスクリーンショット画像を、貼り付けて使うことができるのです。※ちなみに、クリップボードを利用するということは、プリントスクリーンのデータでなくても、利用可能ということです。例えば、wordやExcelに配置してある画像をコピペすることもできます。

プリントスクリーンから取り込む方法

実際にやってみましょう。対象は先程URLを入力するも、真っ白になったサイト。このサイトを開いた状態で、「Prent Screen」ボタンを押します。(Macの場合はcontrol+command +SHIFT+3)

e
参照元:キリンビール株式会社 「キリン 澄みきり」
d

はい、これでプリントスクリーンがクリップボードに記録されました。そこで、「AUN」のURLを入力する枠の下にある「クリップボード」と書かれた部分をクリックしてください。

 

koko

すると、↓こんな画面に変わります。ここで、キーボードのコントロールキーとVキー(Macはcommand キーとVキー)を押すと、

g

先ほどクリップボードに保存したスクリーンショット画像が貼り付け(ペースト)されます。

h

 

見てお分かりの通り、プリントスクリーンを使ってAUNする場合の最大の欠点は、一回でページ全体をキャプチャできないことです。あくまでも、PCのディスプレイ上に表示されたものをコピーするので、残念ながらブラウザ上のWebコンテンツを縦断して読み込んでくれません。どうしても、全ページのキャプチャが必要な場合は、もう一手間必要になるのですが、それが2の「PC内の画像をアップロードする方法」を使う方法です。つまり、一旦ブラウザの拡張機能や画像編集ソフトを駆使して、Webページのキャプチャ画像を作ります。.JPEGや.png形式の画像ファイルとしてアップロードすればAUN出来ます。

PC内の画像をアップロードする方法

これも実際にやってみましょう。「AUN」のURLを入力する枠の下にある「画像ファイル」と書かれた部分をクリックします。

koko2

すると、↓のような画面に変わります。ここへ対象の画像をドロップしますと。。。

j

はい。できました。

k

このキャプチャ画像を作るのに、GoogleChromeの拡張機能「Awesome Screenshot」を使いました。スクロール時の画像の切り替わる過程が、キャプチャされているので、崩れているように見えますが、修正指示などを作るのには十分使えると思います。

まとめ

現状は、プリントスクリーンから取り込む方法PC内の画像をアップロードする方法のいずれかで、カバーして頂くようになります。URLでキャプチャ出来なかった時には、是非ともお試しください。いま以上に、URLからスクリーンショットを撮る技術を改良し、精度も高めていくようします。がしかし、そもそもエラーが出た時に、”プリントスクリーンを利用して代用できる”ということを知らしめる導線がないことに問題があるので、このへんのナビゲーションは追加していきたいと思います。

  • このエントリーをはてなブックマークに追加

トコトン公式サイトへ

「トコトン」はサイト保守を効率化するサービスです。

使用感をお確かめ頂ける無料トライアルがございます。

詳しくはこちら

SNSでもご購読できます。