ようこそゲストさん

ITメモ

     

リンク先のプレビューを吹き出し方式のポップアップでサムネイル表示させたい

はてブ情報 はてブに登録 はてブ数
リンク先のプレビューを吹き出し方式のポップアップでサムネイル表示「WebSnapr」を利用し、adiaryで簡単に「websnapr - Preview Bubble Javascript v2.0」を搭載する方法をご紹介します。

adiary本体を一部変更を加えますので、作業の前に必ずバックアップをとってから作業してください。
失敗した場合、adiaryが動かなくなる場合もあります。
また、動作に関する一切の保証、責任は負いませんのでご了承ください。
adiary Version 1.44 で動作確認をしております。その他のバージョンは未確認です。

【目次】

1.previewbubble.zip をダウンロード

配布サイトから、previewbubble.zipをダウンロードします。

2.previewbubble.js のパス設定

previewbubble.zipを解凍し、previewbubble.js の var bubbleImagePath = '/images/bg.png'; の画像パスを設定します。
例:
var bubbleImagePath = '/previewbubble/bg.png'

3._frame.htmlにjs読み込みを埋め込む

これまでに_frame.htmlを変更されて「/diary.user.skel」に設置済みの方は、この_frame.htmlを開きます。
無い方は、「/diary.skel」にある_frame.htmlを開きます。
</head>の上の行に
<script type="text/javascript" src="previewbubble.js"></script>
と記入し上書き保存し、「/diary.user.skel」へアップロード。

4.Tag_http.pm の改造

あともう少しです。
<a>タグで、class に previewlink を付与すればOKなのですが、adiaryでは、[http://〜:○○]と記法タグが使えますのでその改造をします。
「/lib/Satsuki/TextParser/TagPlugin」の「Tag_http.pm」を開きます。
65行目付近の
return "<a href=\"$url\"$tag->{class}$target>$name</a>";

return "<a href=\"$url\"$tag->{class}$target class=\"previewlink\">$name</a>";
と変更し、上書き保存しアップロード。

5.過去の記事を再構築

以上で設定は完了です。
過去の記事のリンクに4.で付加したclassを反映させるために、記事の再構築をしましょう。
[管理]-[管理]-[日記の再構築]で「再構築を実行する」をクリックします。
(記事が多いと時間がかかります。気長に待ちましょう)

以上で完了です。
うまく行きましたか?
はじめはうまくサムネイル画像が表示されず、WebSnaprのロゴが表示されますがしばらくしたらちゃんと表示されるようになります。
  • リンク先のウェブサイトのサムネイルを表示させてみた ひとぅブログ ひとぅ
    他のブログを見ているとたまに、リンクが張られた文字の上にマウスカーソルを置くと、リンク先のウェブサイトのサムネイルがポップウィンドウで表示されることがあり、「かっこいいな」と思い早速、設置してみました。WebSnaprが配布しているJavascriptを使...
  • websnapr入れてみた 殴りふぉ○日誌 |Д`)ノ⌒After…” nonoya
    以前から、入れようx2と気になっていたwebsnaprを導入してみた参考&影響されたのはひとぅさんのブログ記事からミーハー丸出しで導入してみるヘ(゚∀゚ヘ)参考にしたページはITメモ無料イエローページwebsnaprリンク記法だと<a class=&...