2007年12月31日月曜日

Webサイトのスクリーンショットを kwout で撮り、Flickr へアップロードして、Picnik で加工する

1. Web サイトのスクリーショットを撮るのに kwout を利用

サイトのスナップショットを撮りたい場合、

を真っ先に思い出す。

「ウェブ魚拓」という名前は一度聞いたら忘れない。

も類似したサービス。

"kwout" is a way you quote a part of a web page as an image with an image map.

kwout という名前は、quote に由来しているのかな?サービスの名称を忘れたとき、果たして

kwout

という単語を思い出すことができるだろうか。 (+_+)

http://kwout.com/

kwout | A brilliant way to quote via kwout

 

2. kwout でスクリーンショットを撮る

例えば、last.fm のスクリーンショットを撮ってみる。

最初に、kwout にアクセスし、URL を入力するフィールドに

http://www.last.fm/

を入力して、kwout ボタンを押す。

071231-005

しばらくすると、 URL を入力したサイトのスクリーンショット画面が表示される。

引用したい範囲をドラッグして選択し、 Cut Out ボタンを押す。

071231-006

 

3. kwout から Flickr に投稿する

スクリーンショットをとった画像を、kwout から Flickr へ投稿することができる。

上記の続きで、Cut Out ボタンを押すと、Quote 画面で切り取った画像が表示される。

Post のラジオボックスで、

Post this to your Flickr

を選択。

Flickr を選択し、Click here をクリックする。

071231-007

flickr に、はじめて kwout から投稿する場合、認証画面が出る。OK, I'll ALLOW IT ボタンを押す。

071231-008

投稿した画像が表示されたら、This photo is private となっているので、 edit を押す。

071231-012

Anyone を選択し save ボタンを押す。これにより、投稿した写真を後悔できる。

071231-014

 

4. flickr で Picnik を使い、写真を加工する

投稿した写真の画面で、EDIT PHOTO ボタンを押すと、画像を編集できる。

071231-009

画像を加工するための画面が表示されたら、Create タブを押し、Shapes を選択する。

Basic Shapes の中の矢印を選択し、ドラッグ&ドロップで配置し、Shape Color で色を選択。

071231-015

完成!

 Last.fm – The Social Music Revolution

 

Flickr に投稿しない場合のメリット

kwout の Quote 画面において、Post の

Post this to your web site

を選択すると、ブログ等に貼り付けるためのコードが生成される。

071231-016

コードの内容を見てわかるように、イメージマップが作成されている。

<div class="kwout" style="text-align:center;">
<img src="http://www.flickr.com/photos/8246127@N08/2150391343/" alt="http://www.last.fm" height="60" title="Last.fm – The Social Music Revolution" width="538" usemap="#kwout_fffbqs2u"/>
    <map name="kwout_fffbqs2u" id="kwout_fffbqs2u">
        <area coords="377,0,442,33" href="http://www.last.fm/widgets/" shape="rect" alt="#"/>
        <area coords="208,0,261,33" href="http://www.last.fm/users/" shape="rect" alt="#"/>
        <area coords="154,0,207,33" href="http://www.last.fm/music/" shape="rect" alt="#"/>
        <area coords="317,0,377,33" href="http://www.last.fm/events/" shape="rect" alt="#"/>
        <area coords="443,0,517,33" href="http://www.last.fm/download/" shape="rect" alt="#"/>
        <area coords="0,0,153,31" href="http://www.last.fm/" shape="rect" alt="#"/>
        <area coords="20,38,109,47" href="http://www.last.fm/uploadmusic/" shape="rect" alt="#"/>
        <area coords="262,0,317,33" href="http://www.last.fm/listen/" shape="rect" alt="#"/>
        <area coords="428,38,449,47" href="http://www.last.fm/login/" shape="rect" alt="#"/>
        <area coords="494,38,527,47" href="http://www.last.fm/?change=language" shape="rect" alt="#"/>
        <area coords="464,38,479,47" href="http://www.last.fm/help/" shape="rect" alt="#"/>
    </map>
<p style="text-align:center;margin-top:10px;"><a href="http://www.last.fm">Last.fm – The Social Music Revolution</a> via <a href="http://kwout.com/quote/fffbqs2u">kwout</a></p></div>

これを貼り付けると、画像をクリックして、リンク先に飛ぶことができる。すごい!