デザインスタジオウェブログ
リンク先ウェブサイトのスクリーンショットをポップアップ表示

リンク先ウェブサイトのスクリーンショットをポップアップ表示

2013年4月1日 追記
アダルト・商用サイトからの利用があまりにひどいので規制しました。
ご利用をご希望の場合、メールにてお問い合わせ下さい。
個別に許可させていただきます。 

ウェッジのウェブサイトで利用するために作成した JavaScript ですが、需要がありそうなのでダウンロードできるようにしました。
リンクに class="previewlink" と書くだけで、リンク先ウェブサイトの縮小画像(サムネイル)をポップアップで表示します。
以下2点のおまけ機能付きです。

  • リンクに title が設定されている場合、タイトルの内容をポップアップ表示
  • リンクに rel="external" が設定されている場合、リンク先を別ウィンドウ表示

サンプル :

JavaScript が機能しない場合でも閲覧に支障はありませんので、 W3C 標準準拠でアクセシビリティ・ユーザビリティに配慮しているサイトでも気軽に導入して頂けます。
また、 CSS が書ける方はご自身のサイトに合わせてカスタマイズ可能です。


--

ご注意

ウェブサイトのスクリーンショット撮影と、その画像の利用には賛否両論ありますが、ウェブサイトのデータの全てはローカルコンピュータに複製された上で逐次レンダリングされている点や、 arpanet から流れるインターネットの思想、及び日本国内の著作者人格権に関する記述から、ウェッジでは虚偽のないスクリーンショットの利用に関して、法律上・倫理上問題がないと判断して、このスクリプトを公開しています。
上記内容に関して不安、もしくは抵抗のある場合はご利用を差し控えてください。

導入方法

以下の3行を HTML のヘッダー内に記入するだけです。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.linkactions.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.linkactions.css" media="screen" />

jQuery を利用していますので、既に jQuery を導入済みの場合、1行目は必要ありません。
デザインを変更する場合はお好みに合わせて jquery.linkactions.css を編集してください。

利用方法

リンク先のスクリーンショットを表示する場合は、以下のように a の要素に class="previewlink" と記述します。

<a href="http://www.j-wedg.co.jp/" class="previewlink">リンク先のスクリーンショット表示</a>

上記コードのサンプル : リンク先のスクリーンショット表示

初回画像取得時は約5~10秒かかります。
(スクリーンショットは3日おきに再取得します)

リンク先の解説をポップアップ表示する場合は、以下のように a の要素に title="解説など" と記述します。

<a href="http://www.j-wedg.co.jp/" title="大阪のデザイン会社なら株式会社ウェッジ。WEB制作からパンフレットや会社案内などの企画・制作まで、グラフィックデザインはお任せ。">リンクの title 要素を表示</a>

上記コードのサンプル : リンクの title 要素を表示

別ウィンドウ(別タブ)を開いてリンク先を表示する場合は、以下のように a の要素に rel="external" と記述します。上記2つの機能と併用可能です。

<a href="http://www.j-wedg.co.jp/" rel="external">リンク先を別ウィンドウ表示</a>

上記コードのサンプル : リンク先を別ウィンドウ表示
target="_blank" 等のタグは InternetExploror の(建前は)独自拡張ですし、ユーザビリティー上何かと問題がありますので、このような機能を付加してみました。
JavaScript が機能しない場合は同一ウィンドウでリンク先を表示するという点がみそです。

ダウンロード

以下のリンクをクリックしてください。サンプル HTML と必要ファイル一式の ZIP ファイルです。

linkactions.zip

画像はウェッジのサーバより取得していますので、サーバがダウンしている際はサムネイルは表示されません。

2010年6月16日 追記 : 動作を一部変更しました。
詳細は「ウェブサイトのスクリーンショット生成」

旧コメント

Hiro

大変参考になり、使わせて頂きます。

ushio

コメント頂きありがとうございます。
なかなか思うように時間が取れないのですが、これからもちょっとしたツール類をご紹介していきたいと思います。

tさん

使わせて頂きました。ありがとうございます。

ひで

頂戴しました。
素晴らしい機能ですね。
lightboxと合わせて使わせてもらいます。
ありがとうございます。

ushio

ありがとうございます。
お役に立てば幸いです。

こんにちは、サムネイルサービスですが、
非常に使い勝手がよく、重宝させて頂いております。

1点質問があるのですが、サムネイル画像のサイズは貴社サーバーの方で特定サイズのもの1点のみ保存させるような仕様になっているのでしょうか?
もう少し大きいサイズで画像を利用したいのですが、それは可能でしょうか。
お手数をおかけしますが宜しくお願いいたします。

ushio

ご連絡ありがとうございます。
出来るだけ手軽に使えるようにしたいので、現状パラメータはURLのみにしています。画像サイズはサーバ側で決め打ちです。
使用用途など、具体的なご相談を頂ければ対応させていただくことも可能ですが、商用利用に関しては保証いたしかねますのでご注意下さいね。

Takahiro Takeuchi

ushioさま

早速の返信をありがとうございます。
丁寧な対応に感謝致します。
使用用途はファッション系のギャラリーを予定しています。
ご相談ですが、こちら商用利用を目的とした動作保証用のサービスは別途であるのでしょうか?

ushio

ご連絡が遅くなり申し訳ありません。
商用利用をお考えとのことですので、自前でキャプチャされては如何でしょうか。Windows機であれば簡単なスクリプトで実装できます。
ウェッジのスクリーンショット取得サービスは個人の方に気軽に使って頂くことを前提にしており、サーバのスペックや回線帯域、特に稼働保証の面でご要望に耐えうるような体制を取っておりません。
Alexa のサムネイルサービスは終了してしまったようですが、他にも商用利用可能な有料サービスはあるようですので、そちらもあわせて検討されては如何でしょうか。

Takahiro Takeuchi

ushioさま

商用利用の件、承知致しました。
こちらのご相談内容に色々とご提案も頂きましてありがとうございます。
自前での構築または、他のサービスについても色々と調べてみるようにします。
忙しい中丁寧なご対応大変感謝致します。

また何かありましたらご相談させて頂きます。
引き続き、宜しくお願い致します。

toshi

初めまして。
貴社のプレビューショットを是非使用したいのですが、

ダウンロードしたZIPファイルが開けません。
XPですがダブルクリックでは無効か壊れているとでて、解凍ソフトを使うと未知の形式になります。

何か解凍に仕方が間違っているのでしょうか?
何度がダウンロードしてみたのですが・・・。

ushio

ご連絡ありがとうございます。
こちらで確認したのですが、正常に解凍できるようです。
もしも Internet Explorer をお使いでしたら、FireFox か Chrome で再度ダウンローしてみていただけますでしょうか?

toshi

こんにちは。IE8を普段使用しておりますが、Firefoxでは普通にダウンロード出来ました。お騒がせいたしました、そして有難うございました。

Google Partners
大阪府産業デザインセンター 扇町クリエイティブクラスター JAGDA 日本グラフィックデザイナー協会