JavaScript

[JavaScript]jsでリンクを開くとリファラが取得出来ない

某案件でこんな事象があったようなので調べました。
IE6,7でjavascriptのwindow.openでリンクを開くとリファラが取得できないようです。
また、AS3のnavigateToURL、AS2のgetURL、AS2のExternalInterfaceでwindow.open
ではswfファイルの絶対パスがリファラになってしまうようです。
その回避方法をここに記します。

サンプル

//リンクを開くときにこのメソッドを使う
function open_main2(url, target){
	if(document.all){//IEの時
		var body=document.getElementsByTagName("body")[0];
		var atag=document.createElement("a");
		atag.href=url;
		atag.target=target;
		body.appendChild(atag);
		atag.click();
		body.removeChild(atag);
	}else{//IE以外
		window.open(url, target);
	}
}

[JavaScript]ブックマークレットまとめ

サンプル

twitter

var t="frasio report | /";
var url="http://twitter.com/home?status="+encodeURIComponent(t);
window.open(url, "_blank");

はてなブックマーク

var t="frasio report";
var u="/";
var url="http://b.hatena.ne.jp/add?mode=confirm&url="+u+"&title="+encodeURIComponent(t);
window.open(url, "_blank");

Yahoo!ブックマーク

var t="frasio report";
var u="/";
var url="http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t="+encodeURIComponent(t)+"&u="+encodeURIComponent(u)+"&ei=UTF-8";
window.open(url, "_blank");

Googleブックマーク

var t="frasio report";
var u="/";
var te=encodeURIComponent((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));
var url;
if(te==""){
	url="http://www.google.com/bookmarks/mark?op=add&bkmk="+u+"&title="+encodeURIComponent(t)
}else{
	url="http://www.google.com/bookmarks/mark?op=add&bkmk="+u+"&title="+encodeURIComponent(t)+"&annotation="+te;
}
window.open(url, "_blank");

facebook

var t="frasio report";
var u="/";
var url="http://www.facebook.com/sharer.php?u="+u+"&t="+encodeURIComponent(t);
window.open(url, "_blank");

delicious.

var t="frasio report";
var u="/";
var url="http://delicious.com/save?v=5&noui&jump=close&url="+encodeURIComponent(u)+"&title="+encodeURIComponent(t);
window.open(url, "_blank");

Yahoo!カレンダー

var std=new Date();
var st=std.getFullYear()+pzero(std.getMonth()+1,2)+pzero(std.getDate(),2)+"T"+pzero(std.getHours().toString(), 2)+pzero(std.getMinutes().toString(), 2);
var dur="0100";
var t="frasio report";
var s="flashやflashとかflashなど・・・最近はそうでもない";
var url='https://calendar.yahoo.co.jp/?';
url+='V=60';
url+='&ENC=UTF-8';
url+='&ST='+st;
url+='&DUR='+dur;
url+='&TITLE='+encodeURIComponent(t);
url+='&DESC='+encodeURIComponent(s);
url+='&URL='+"/";
url+='&chgp=1';
window.open(url, "_blank");

[twitter]reply counter

あなたが誰に何回ツイートしたか調べます。
最近フォローした100人まで、過去3200ツイートまで調べることが出来ます。
twitterAPIを一回だけ使用します。

追記
少し修正しました。
・最近フォローした100人まで → フォローしている人全員
・twitterAPIを一回だけ使用します。 → twitterAPIを使用しません。

reply counter


次の更新は6月の予定

[HTML5]Web Storage

HTML5 Web Storageであそびました。

HTML5.JPより抜粋
Web Storage とは、データをブラウザ側に蓄積する仕組みです。
クッキーとよく似ていますが、多くの点で異なります。
Web Storage は大きなデータを蓄積できますので、ユーザーエクスペリエンスの向上や
サーバー負荷の低減に役立てることができます。
現在はW3CのHTML5仕様から分離されてしまいましたが、
次世代のウェブアプリケーションの中核を担うテクノロジーとして期待されています。

WindowsXPの下記のブラウザで動作を確認しました。
Firefox 3.6.3
Safari 4.0.4
Google Chrome 4.1.249.1064

HTML5 Web Storage

key,valueを入力して「保存」をクリックすると

WebStorageにキー、値が保存される。キャッシュをクリアしても消えません。
保存した内容は同じpcで同じブラウザじゃないと閲覧できません。

削除をクリックすると

削除される

参照したサイト一覧(順不同)

HTML5.JP – APIチェッカー – Web Storage
http://www.html5.jp/tutorial/apicheck/webstorage.html

HTML5.JP – W3C – 『Web Storage』日本語訳
http://www.html5.jp/trans/w3c_webstorage.html

[HTML5]Web Messaging

HTML5 Web Messagingで遊んでみました。
イケてるブラウザなら使えるはず。

Web Messaging
フォームにテキストを入力して「送信」を押す

するとiframeでロードしたhtmlに入力したテキストを送信できる

んー?この機能何に使えばいいんだ?・・・よくわからんから保留。

参照したサイト一覧(順不同)

HTML5.JP – HTML5 チュートリアル – HTML5 API チェッカー – HTML5 Web Messaging
http://www.html5.jp/tutorial/apicheck/postmsg.html

W3C – HTML5 Web Messaging
http://dev.w3.org/html5/postmsg/

[HTML5]File API #03

と、言うことは音楽ファイルも再生出来るのではないか。・・・できた。

各ブラウザのコーデック対応状況

Ogg Vorbis mp3 wav
FireFox 3.5 ×
Safari 4 ×
Chrome 3 (beta) ×
Opera 10 (beta) × ×

pcにあるogg音声ファイルをドラッグ&ドロップで再生する。
※Firefox3.6でしか動きません。
File API #03

参照したサイト一覧(順不同)

HTML5.jp – ブラウザーのネイティブなオーディオ
http://www.html5.jp/html5doctor/native-audio-in-the-browser.html

W3C – DOM-Level-2-Events
http://www.w3.org/TR/DOM-Level-2-Events/events.html

[HTML5]File API #02

と、言うことはjsを挟めばflashにデータを送れるのではないか。・・・できた。

pcにある画像ファイルをドラッグ&ドロップでflashに表示する。
※Firefox3.6でしか動きません。

File API #02


と、言うことは・・・。

参照したサイト

Dynamic Flash – Base64 encoder/decoder class
http://dynamicflash.com/goodies/base64/

[HTML5]File API #01

W3Cで色々策定しているみたいです。色々と。
で、HTML5であそんでみたクエストというものを見つけて
私もFileAPIであそんでみました。

pcにある画像ファイルをドラッグ&ドロップでブラウザに表示する。
※Firefox3.6でしか動きません。
File API #01


と、言うことは・・・。

参照したサイト一覧(順不同)

HTML5であそんでみたクエスト
http://dot3.jp/html5quest/

W3C – FileAPI
http://dev.w3.org/2006/webapi/FileAPI/

株式会社あゆた – HTML5サンプル集
http://ayuta.co.jp/html5-samples/

しばそんノート – W3C File APIを使ってJavaScriptでファイル加工
http://d.hatena.ne.jp/shibason/20100111/1263191021

[HTML5]Drag&Drop API

W3Cで色々策定しているみたいです。色々と。
ブラウザがネイティブのDnDをサポートしているそうなので遊んでみました。

HTML5 – DnD

WindowsXPの以下のブラウザで動作を確認しました。
Firefox3.6
Google Chrome 4.1.249.1064

参照したサイト一覧(順不同)

HTML5.JP – ネイティブのドラッグ & ドロップ
http://www.html5.jp/html5doctor/native-drag-and-drop.html

本の虫 – QuirksBlog: HTML5のドラッグ&ドロップはクソだ
http://cpplover.blogspot.com/2009/09/quirksblog-html5.html

Diaspar Journal – Drag & Drop – HTML5 版
http://diaspar.jp/node/200