Textwellでブログの紹介リンクを作成する BlogQuote(STYLE版)

スクリプトが長すぎて、どこを弄れば良いのやら。

TextwellのBlogQuoteをYouTubeやTwitterに対応させてみた(森杉版)
文脈に応じて変化する。Textwellの内蔵ブラウザを使い、ブログやサイトの紹介をするアクション。検索エンジンをYahooに替えてみました。Yahooだとリアルタイム検索のときTwitterの検索結果...

まずは反省。盛り過ぎた。上みたいにリンクプレートを作るアクションですけど、パソコンで見ると色合いが違う。背景のivoryがどぎつく見えます。嫌ですね。配色を変えたい。なのにソースが読みにくい。リンクプレートの設定場所を見つけるのに手間取ります。書き換え可能な項目は見つけやすいところに固めておきたい。

// リンクプレートのスタイル(${url}:アドレス ${title}:題名 ${text}:引用)
STYLE="<blockquote style=\"color:black;background:ivory;border:1px solid lightgray;padding:15px;border-radius:5px;\"><a href=\"${url}\" target=\"_blank\" style=\"color:darkblue;\"><img align=\"left\" src=\"http://capture.heartrails.com/120x120/?${url}\" style=\"border-radius:5px;margin:1px 15px 1px 1px;box-shadow:1px 2px 3px gray;\">${title}</a><a href=\"http://b.hatena.ne.jp/entry/${url}\" target=\"_blank\"><img src=\"http://b.hatena.ne.jp/entry/image/${url}\"></a><br/>${text}...<br style=clear:both;></blockquote>\n";

// タイトルから省く文字列
BLOG=" - W&R : Jazzと読書の日々";

// サーチエンジンのURLアドレス
SEARCH="http://search.yahoo.co.jp/search?p="+T.current;
// SEARCH="http://www.google.co.jp/search?q="+T.current;


// スクリプト本体
T.closelets([
  {title: "リンクタグ作成",
    fn: function(arg){
        url=location.href;
        title=document.title.replace(arg.blog,"");
        text=getSelection().toString();
        if(text){
          link="<blockquote style=\"color:black;background:ghostwhite;padding:15px;border-radius:5px;border:1px solid lightgray;\">"+text+"<br><b>(via <a href=\""+url+"\" target=\"_blank\">"+title+"</a>)</b></blockquote>\n";
        }else{
          link="<li><a href=\""+url+"\">"+title+"</a></li>\n";
        }
        T("replaceCurrent",{text:link})},
    arg:{blog:BLOG}},
  {title: "サムネイル作成",
    fn: function(arg){
        url=location.href;
        switch(true){
          case /^http:\/\/m.youtube.com/.test(url):
            url=url.replace(/m\./,"").split("&desktop")[0];
            id=url.split("v=")[1];
            title=document.title.replace(/- YouTube/,"");
            icon="http://s.ytimg.com/yts/mobile/img/apple-touch-icon-57x57-precomposed-vflDNvbEb.png";
            link="<iframe width=\"500\" height=\"280\" src=\"http://www.youtube.com/embed/"+id+"\" frameborder=\"0\" allowfullscreen></iframe><br><img width=\"16\" src=\""+icon+"\"><a href=\""+url+"\" target=\"_blank\">"+title+"</a>\n";
            break;
          case /^https:\/\/mobile.twitter.com/.test(url) && /status/.test(url):
            url=url.replace(/mobile/,"www");
            s=document.getElementsByClassName("tweet")[0];
            tweet=s.getElementsByClassName("dir-ltr")[0].innerHTML;
            fullname=s.getElementsByClassName("full-name")[0].innerText;
            name=s.getElementsByClassName("screen-name")[0].innerText.substr(1);
            time=s.getElementsByClassName("timestamp-row")[0].innerText;
            link="<blockquote class='twitter-tweet'><p>"+tweet+"</p>&mdash; "+fullname+" (@"+name+") <a href='"+url+"'>"+time+"</a></blockquote><scr"+"ipt async src='http://platform.twitter.com/widgets.js' charset='utf-8'></scr"+"ipt>\n";
            break;
          case /^http:\/\/sp.nicovideo.jp\/watch\/sm[0-9]+/.test(url):
            s=url.match(/sm[0-9]+/);
            link="<iframe src=\"http://ext.nicovideo.jp/thumb/"+s+"\"><a href=\"http://www.nicovideo.jp/watch/"+s+"\">"+document.title+"</a></iframe>\n";
            break;
          default:
            title=document.title.replace(arg.blog,"");
            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=arg.style.replace(/\${url}/g,url).replace(/\${title}/g,title).replace(/\${text}/g,text);
        }
        T("replaceCurrent",{text:link})},
    arg:{blog:BLOG,style:STYLE}},
  {title: "Safariで閲覧",
    fn: function(){
        T(location.href)}},
  {title: "ソース書き出し",
    fn: function(){
          text=document.documentElement.innerHTML;
          T("replace",{text:text});
        }
  }],
function(){
    s=T.current;
    if(s){
      location=(/^https?:/.test(s))? s:SEARCH;
    }else{
      s="<meta name=viewport content=initial-scale=1><div style=white-space:pre;word-wrap:break-word;>"+T.text+"</div>";
      document.write(s);
      T.title("BlogQuote");
    }
})

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

使い方に変更はありません。キーワードを書いてYahooで検索。ターゲットのサイトでブラウザを閉じてリンクプレートを作成する。モブログ必須のアクションです。
ポイントは、リンクプレートのスタイルを一行目に持って来たこと。STYLE変数に設定します。HTMLタグを書いておく。三つの変数を使うことができます。

${url} サイトのURLアドレス
${title} サイトのタイトル
${text} 選択範囲または先頭部分のテキスト

Textwell - The Modeless Text Box for iOS
たとえば上のように表示するには下記STYLEになります。

STYLE="<a href=${url} target=_blank><img src=http://capture.heartrails.com/350x200/?${url} style=\"box-shadow:1px 2px 3px lightgray;\">\n${title}</a>\n";

Textwell用の自作アクション集
...

しばらくは背景色をwhiteにして、丸枠も消してみようと思う。

STYLE="<blockquote style=\"color:black;background:white;border:1px solid white;padding:15px;border-radius:5px;\"><a href=\"${url}\" target=\"_blank\" style=\"color:darkblue;\"><img align=\"left\" src=\"http://capture.heartrails.com/120x120/?${url}\" style=\"border-radius:5px;margin:1px 15px 1px 1px;box-shadow:1px 2px 3px gray;\">${title}</a><a href=\"http://b.hatena.ne.jp/entry/${url}\" target=\"_blank\"><img src=\"http://b.hatena.ne.jp/entry/image/${url}\"></a><br/>${text}...<br style=clear:both;></blockquote>\n";