というわけで、新時代検索エンジンSnapのユニークなサービス、SPA(Snap Preview Anywhere)の紹介と導入方法について。
概要
SPAはサムネイルを中心に据えた検索エンジンSnapが提供するサービスで、リンクにマウスオーバーした際に右のようなふきだしにリンク先のサムネイル画像を表示することを可能にします。
自分のHPやBlogに無料で簡単に追加できるのがウリで、既にお気づきかと思いますが、このBlogにも取り込んでみてあります。(2007/1/3現在。問題があれば外すかもしれませんが)
導入方法
まずはSPAサイトのコード取得ページに行き、簡単なフォームに記入して登録を行います。
...と、スナップショットを載せる癖が付いていますが、上記リンクにマウスオーバーしてもらえば不必要なわけですね。
とはいえ可読性や画像への書き込みなどもありますので、ここではこのまま続けますが。
注）どうやらSPAではスプリットテストを実施しているようで、アクセスすると異なる見た目のページが表示される場合もあるようです。
導入するサイト名、ロボットでは無い証明テキスト、メールアドレス、利用規約への同意にチェックした後、「Get Code」ボタンを押せば完了です。
次のページに、あなたが貼るべきコードが提示されています。
この部分をコピーして、SPAを取り込みたいページの<head>タグ内に貼り付ければ完了です。
なお、TypePad、WordPress、Bloggerを使っている人は同ページ下部にBlogへの取り込み方法が書いてありますので参考にして下さい。
自分はここではMovableTypeを使っているわけですが、Templateに取り込むだけなので非常に簡単でした。（実作業時間は2分程度）
ただ、デフォルトのテンプレートを使っている場合は幾つかのテンプレートに挿入してまわる必要が出てくるかと思います。
後でSPAを外したり、書くべきコードが変わったり、他にも同様のサービスを入れたくなったりした時のためにWidget化して取り込んでおくことをお勧めします。
そのための方法を、一応次に書いておきます。
Movable Typeへの取り込み方
単純に差し込むだけであれば、特に説明は要らないと思いますので飛ばしてください。
ここでは「headに入れるモジュールを操作するためにWidgetマネージャを作り、後のメンテナンス性を確保する」方法での導入方法を書いておきます。
まず、「テンプレート」→「モジュール」→「モジュールを新規作成」で、SPA用のモジュールを「Widget: Snap Preview Anywhere for head」という名前で作ります。
このfor headというsafixは、単純にheadタグ内に挿入するWidgetというだけです。実際は好きに付けて下さい。
次に「Widgetの管理」→「Widget Managerを作成」で、「Head Widget Manager」を作成します。
「利用可能なWidget」から先ほどの「Snap Preview Anywhere for head」をドラッグして、「インストールされているWidget」に移動します。
終わったら、「変更を保存」してWidget Managerを保存します。
例えば「メインページ」など、挿入したいテンプレートを開いて<head>～</head>内に次の1行を挿入します。
<$MTWidgetManager name="Head Widget Manager"$>
入れなければならないテンプレートは恐らく次のようなものだと思いますが、ご自身の環境で確かめてください。
- メインページ
- アーカイブページ
- アーカイブタグの全てのテンプレート
- トラックバックの一覧
- コメント・エラー
- コメント・保留
- コメント・プレビュー
- 検索結果
これでサイトの再構築を行えば、導入完了です。
今後、もしSPAのコードを書き換えたい場合は「Widget: Snap Preview Anywhere for head」を編集しましょう。
他に同様のサービスを導入したい場合、Widgetを新たに作ってManagerに登録します。
SPAが不要になれば、Widget Managerから外してしまえば良いわけです。
どのように動作するのか
取り込まれたjavascriptは、全てのanchorタグのmouse over/outイベントをフックしてSnapと通信を行います。
該当するページのスナップショットがSnapにあれば、それを返して表示します。
そのページがSnapに初めて知らされた場合、その場で素早くサムネイルが作られて返されます。
これらの処理は通常非常に高速ですが、状況によっては30秒以上かかるケースもあるようです。
ポップアップ画面から検索ボックスを外す方法
サムネイルのポップアップにはサムネイルだけを表示してくれればよく、検索ボックスは外してしまいたい場合は貼り付けるjavascriptにあるsbというパラメータの値を1から0にしてやります。
例：
<script defer="defer" id="snap_preview_anywhere" type="text/javascript" src="http://spa.snap.com/snap_preview_anywhere.js?ap=1&key=SAMPLE_KEY&sb=0&domain=www.example.com"></script>
あるリンクに関してはSPAを動作させたくない場合
SPAは導入した直後から、初期設定では全ての外部リンクに対して動作するようになります。
ある特定のリンクに対してはSPAを動作させたくないような場合、該当するanchorタグに"snap_nopreview"というクラスを当ててやることで動作をカットできます。
例：Snap
<a href="http://www.snap.com/" class="snap_nopreview">Snap</a></pre>
他のクラスを当てたい場合も、複数のクラスを指定することで実現できます。
<a href="http://www.snap.com/" class="sample_class snap_nopreview">Snap</a></pre>
逆に特定のリンクのみに対してSPAを動作させたい場合
幾つかの特定のページにのみSPAを動作させたい場合、まずjavascriptを変えて規定の動作をオフにします。
javascript中にあるapというパラメータの値を1から0に設定して下さい。
例：
<script defer="defer" id="snap_preview_anywhere" type="text/javascript" src="http://spa.snap.com/snap_preview_anywhere.js?ap=1&key=SAMPLE_KEY&sb=1&domain=www.example.com"></script>
次に、動作させたいanchorタグに"snap_preview"というクラスを当ててやります。
例：
<a href="http://www.snap.com/" class="snap_preview">Snap</a></pre>
内部リンクに対してもSPAを有効にする
初期設定ではSPAは外部リンク（ドメイン外へのリンク）だけに有効になっています。
内部リンクに対しても有効にするには、javascriptのsiというパラメータに1を指定して追加してやります。
例：
<script defer="defer" id="snap_preview_anywhere" type="text/javascript" src="http://spa.snap.com/snap_preview_anywhere.js?ap=1&si=1&key=SAMPLE_KEY&sb=1&domain=www.example.com"></script>
より詳しい情報は、こちらのオフィシャルサイトでどうぞ。
Social Flares:
Netscape
コメント