ラベル www の投稿を表示しています。 すべての投稿を表示
ラベル www の投稿を表示しています。 すべての投稿を表示

2014年6月25日水曜日

スクラップブックマーク



はてなブックマークのjavascriptをお気に入りに登録させてしまう仕様をみて


ほーそんなこともできるんですね。


灯台下暗しといいますか、クリック一発で登録の手軽さをこういった形で実現してしまうとはさすがです。


そこで、新発見があったのですから応用して、スクラップブック(本文中の記事だけを取得する)用に


出来ないかと考えてみました。


FireFox用



<a href='javascript:
var h = window.document.getElementById("bkmark");
if(!h){
var f=window.document.createElement("form");
f.method="POST";
f.target="bkmark";
f.action="○○○.php");
f.innerHTML="<input type=\"hidden\" name=\"doc\" id=\"bkmark\"><input type=\"hidden\" name=\"title\" id=\"bkmark_title\"><input type=\"hidden\" name=\"url\" id=\"bkmark_url\">";

var ifr=window.document.createElement("iframe");
ifr.name="bkmark";
ifr.width=0;
ifr.height=0;

window.document.body.appendChild(f);
window.document.body.appendChild(ifr);
h = document.getElementById("bkmark");
}
h.value = escape(window.getSelection().getRangeAt(0)) || "";
window.document.getElementById("bkmark_title").value = escape(document.title);
window.document.getElementById("bkmark_url").value = escape(location.href);
if(h.value){f.submit();}
void(0);
'>スクラップブックマーク(FireFox用)</a>



上記のURLをはてなブックマークと同じように、ブラウザのお気に入りに登録します。


始めは、XMLHttpRequest を使っていたのですが、別ドメインへのアクセスが出来ないことが


すぐにわかり(使う前に気がつけよ。。。)断念しました。


はてなブックマークは、local.href でGETでタイトルとURLを送っていましたが


データを一方的に送信するだけでよいので、iframe枠内に見えないところでPOST送信することにしました。


(一番下に黒いぽちがでてますけど。。。)


スクラップブックで長めの文章を送るとなるとGETではバイト数が足りなくなる場合があるからです。





指定の文章の取得には、window.getSelection().getRangeAt(0) 


でマウスで選択したテキスト部分をPHPプログラムへ送信します。


PHP側は、適当に DBに保存するなり、ファイルに書き出すなりして


後で自分で確認できるように作っておけば良いかと思います。


IEの場合は、window.getSelection().getRangeAt(0) の代わりに


(window.document.selection.createRange())[0]  を使えばできるような気がします。(試してません)


自分のサイト以外でこういったJavascriptを実行させるテクニックは面白いですね。


(FireFoxのアドオンとかは基本的にこれなんですけどね。。。気がつけよ。。。)


Greasemonkeyとかがなぜ流行るのかようやくピント来た気がします(遅)





2007年11月30日金曜日

アバターの仕組み



アバターって、自分のキャラクターに容姿を自由に変更できるあれね。


Yahooのアバターってどうなってるんだろうと、興味本位からちょっとみてみると


透過画像を重ねて、部分的に入れ替えれるようにしてる。


GDとか使って、まるまる画像生成ってしてるのかとおもったら


意外と単純。(よく考えたらアニメーションGIFとか、そのまま合成できないからあたりまえか。。。)






<style>
div{
width :100px;
height: 100px;
position:absolute;
window. }
#img1 {background: url(img1.gif) transparent no-repeat; z-index:10;}
#img1 {background: url(img2.gif) transparent no-repeat; z-index:20;}
#img1 {background: url(img3.gif) transparent no-repeat; z-index:30;}
#img1 {background: url(img4.gif) transparent no-repeat; z-index:40;}
#img1 {background: url(img5.gif) transparent no-repeat; z-index:50;}
</style>

<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
<div id="img4"></div>
<div id="img5"></div>



こんな感じのHTMLに img1.gif ~ img5.gif の同じサイズの透過GIFでも用意したら


できあがり。


要は、その画像の組み合わせが大変だってことやね。


コンテンツ生成に高額な費用がかかるのがネック!