DraftPadアシスト活用術(BlogQuote篇)

ネットの情報を記録するとき、引用元を表示したいことがあります。でも、文字だけのリンクだとさみしくなる。サムネイルもつけたい。概略も表示したい。自分ならではの特色も出したい。そんな場合の手軽なアシストがBlogQuoteです。


DraftPad 1.6.2
分類: 仕事効率化,ユーティリティ
価格: 無料 (Manabu Ueno)

このアシストはhiro45jp氏のShareHtmlを参考にしています。Safariを使い、ブログの紹介を行うブックマークレット。引用元を示すことはエチケットであるとともに、情報を立体視するための必要条件だと思います。あるいは、来られた人が探している情報と出会えるように、少しでもその確率を上げるお手伝いをする。「引用」には様々な意義が含まれています。その意義を引き出し紡ぎ合わせることこそ「Web」の根幹ではないでしょうか。

draftpad://self/web?source=<meta name=viewport content=initial-scale=1><title>BlogQuote</title><script>function main(x){if(u=x.current){open((/^http/.test(u))? u:x.URL+u)}else{document.write(%22<body style=white-space:pre;word-wrap:break-word;>%22+x.whole+%22</body>%22)}}location=%22draftpad:///webdelegate?load=main%26unloadconfirming=true%26unloadconfirmtitle=引用しますか?%26unloadconfirmdefault=はい%26unloadconfirmclose=いいえ%26unload=function(){location=\"draftpad:///webdelegate?load=f\";f=function(x){fav=document.getElementsByTagName(\"link\");icon=\"http://\"+location.host+\"/favicon.ico\";for(i=0;i<fav.length;i++)if(fav[i].rel.match(/^shortcut icon|^apple-touch-icon/i)) icon=fav[i].href;text=getSelection().toString();if(!text){p=document.getElementsByTagName(\"p\");for(k in p) text+=p[k].innerText};text=text.replace(/\\n/g,\"\").replace(/undefined/g,\"\").substr(0,100);link=x.STYLE.replace(/\\${posturl}/g,location.href).replace(/\\${posttitle}/g,document.title).replace(/\\${postselect}/g,text).replace(/\\${favicon}/g,icon);draftpad.replaceCurrent(link)}}%22</script>&whole=<@@>&current=<@>&URL=https://www.google.com/search?q=&STYLE=<blockquote style=\"color:black;background:ivory;padding:15px;border-radius:5px;border:1px solid lightgray;\"><a href=${posturl} target=_blank style=color:darkblue;><img align=left src=http://capture.heartrails.com/150x120/?${posturl} style=\"border-radius:10px;margin:1px 15px 1px 1px;box-shadow:1px 2px 3px gray;\">${posttitle}</a><a href=http://b.hatena.ne.jp/entry/${posturl} target=_blank><img src=http://b.hatena.ne.jp/entry/image/${posturl}></a><br>${postselect}...<br style=clear:both;></blockquote>

登録リンクはこちら→ http://tinyurl.com/nafwm73



使い方はReviewと同じ。キーワードを書いてアシストを起動するとGoogleで検索します。引用したいページが開いてから内蔵ブラウザを閉じる。するとリンクプレートがDraftPadに貼りつきます(検索サーバーの変更は「&URL=」を書き換えてください)。

  • DraftPadアシスト活用術(Review篇)


  • URLアドレスを書いてから立ち上げれば、直接そのサイトを開きます。空行で起動するとプレビュー画面になり、そこからリンクをたどることも出来ます。
    ページの一部を選択状態にしているときは、その部分を抜き出し、リンクプレートに追加します。感銘を受けた文章を引用するのが簡単になります。


    ShareHtmlとFocusHtmlもリニューアルしました♪ | 普通のサラリーマンのiPhone日記
    iPhoneに魅せられた普通のサラリーマンの日々の生活を綴ってます。AppHtmlに続きまして他のBookmarkletも順次リニューアル中です。今回はShareHtmlとFocusHtmlが一週間ほ...
    リンクプレートは上記のように表示されます。BlogQuoteの特徴は、このリンクプレートを「&STYLE=」でカスタマイズできること。ShareHtmlに準じ下記変数が使用できます。ネット上のサービスを組み合わせると、意外と多彩な表現ができます。

    ${posturl} ページのURLアドレス
    ${posttitle} ページのタイトル
    ${postselect} 範囲選択した部分のテキスト
    ${favicon} ファビコンのURLアドレス

    たとえばファビコン付きリンクなら下記のように記述するだけです。

    &STYLE=<img width=16 src=${favicon}><a href=${posturl}>${posttitle}</a>


    個性の見せ方はこのカスタマイズ次第。なお、STYLEを記述する際は、引用符は「\"」に、「&」は「%26」、「%」は「%25」に置き換えてください。これは、アシストが区切りを誤読しないようにする対応策なので、表示が崩れるならここあたりをチェック。
    しかし、このアシストの弱点はどこからが「&STYLE=」なのか、探しにくいところかもなあ。標準アシストのSearchをインポートして検索するのが良いかもしれません。

    draftpad://self/search?

  • DraftPad用の自作アシスト集

  • 追記: 2013/08/18

  • DraftPadのBlogQuoteにフィルターを付けてみました