mojaラボ ニコウゴコメントフォームをJSONPでクロスドメイン対応にしました！
トップページにフォームがおいてあります
GET URLの構築
送信するURLはコチラです。http://labs.mojalog.com/mojascript/nicougo/nicougo.php
リクエストURL例
http://labs.mojalog.com/mojascript/nicougo/nicougo.php?url=http%3a%2f%2fmojalog%2ecom%2f&msg=&fmt=nicougoloadリクエストパラメータ例
url=http%3a%2f%2fmojalog%2ecom%2f【URL】（document.URLをencodeURIしたもの）
msg=【投稿メッセージ】（空だと投稿は行いません）
fmt=nicougoload【nicougoloadというメソッド名で実装する】
| パラメータ | 値 | 説明 |
|---|---|---|
| url | string(URLエンコード) | 利用者のURLです。URL(http/https)形式かどうかをサーバ側で判定しています。 |
| msg | string(URLエンコード) | 送信するメッセージです。空だと投稿はされません。 |
| fmt | string(コールバックメソッド名) | 実装するスクリプトのコールバック関数名を与えます |
レスポンスフィールド例
nicougoload ([{"datetime" : "2007/10/27 22:50:25", "item" : "キタ――――(ﾟ∀ﾟ)――――"},{"datetime" : "2007/10/27 22:00:53", "item" : "３２文字以上ですとサーバ側で切り落とします。"},{"datetime" : "2007/10/27 22:00:25", "item" : "投稿できる文字数は３２文字になっています。３２文字以上ですとサー…"},{"datetime" : "2007/10/27 21:58:31", "item" : "こんにちは"},{"datetime" : "2007/10/27 13:16:06", "item" : "firefoxだと妙に重い"},{"datetime" : "2007/10/27 13:06:12", "item" : "ニコウゴニコウゴ"},{"datetime" : "2007/10/27 13:04:30", "item" : "ニッコウゴにしてやんよ"},{"datetime" : "2007/10/27 13:04:10", "item" : "（ﾟ∀ﾟ）にこうご"},{"datetime" : "2007/10/27 13:03:35", "item" : "firefoxでも一応動くように…"},{"datetime" : "", "item" : "END"}]);
パラメータのfmtを省略した場合RESTで結果を返却します。
<?xml version="1.0" encoding="UTF-8" ?> <elems> <elem datetime="2007/10/27 22:50:25">キタ――――(ﾟ∀ﾟ)――――</elem> <elem datetime="2007/10/27 22:00:53">３２文字以上ですとサーバ側で切り落とします。</elem> <elem datetime="2007/10/27 22:00:25">投稿できる文字数は３２文字になっています。３２文字以上ですとサー…</elem> <elem datetime="2007/10/27 21:58:31">こんにちは</elem> <elem datetime="2007/10/27 13:16:06">firefoxだと妙に重い</elem> <elem datetime="2007/10/27 13:06:12">ニコウゴニコウゴ</elem> <elem datetime="2007/10/27 13:04:30">ニッコウゴにしてやんよ</elem> <elem datetime="2007/10/27 13:04:10">（ﾟ∀ﾟ）にこうご</elem> <elem datetime="2007/10/27 13:03:35">firefoxでも一応動くように…</elem> </elems>
注意点
- mojaラボ ニコウゴウェブサービスは、パラメータのurlが正しく解決できれば、サーバ側で持っているメッセージをすべて閲覧することが可能です。ある掲示板に、URL名でスレッドがたっているだけというイメージでご利用ください。
- つまり、ニコウゴフォームを設置したサイトからでなくとも投稿や閲覧が可能です。何らかのパスワードや機密情報、個人情報などの投稿はお控えください。
- ブログやサイトに設置する方は、エンドユーザに上記内容をお知らせすることをオススメします
- 投稿されたメッセージはURL毎に30件保管します。それ以上のメッセージが送られると古いものから削除されます。（サーバの負荷などを見て変更されることがあります）
- 投稿されたすべてのメッセージは、ご利用される方に通知連絡なしで削除されることがあります。
- mojalog管理人は、ユーザが本サービスを利用して、損害や不利益を被った場合でも、一切の責任を負わず、一切の損害賠償の義務を負わないものとします
HTMLサンプル
サンプルhtmlはエントリ下部に記します。このhtmlサンプルは３つのjavascriptライブラリを利用しています。
１．JSONscriptRequestというライブラリを使用しています。
JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScript
こちらからダウンロードしてきてください。「1.My JSONscriptRequest class」ってとこにアンカされてます。
２．firefoxブラウザを判定するためのスクリプト
as flash as flexさん■[AJAX/JavaScript] UserAgentからブラウザを判定するオールマイティなJavaScript(browsercheck.js)を利用させてもらっています。
３．ニコニコでウゴウゴな表示をするためのスクリプト
nicougo.zip
dynamicdriveにあったドラッグ＆ドロップスクリプトを利用しています。
via : dynamicdrive
nicougo.jsの中身は表示方法などを記述したスクリプトです。ご自由にいじってくださっても構いません。といいますか、いい感じな見せ方ができたら教えて欲しいです。ワタシscriptいじるの下手なんで。
htmlに必要なのは以下のコードです。タグのidがご自身のページで競合した場合は、スクリプトのほうも合わせて変更してください。
最後のdivタグ（id=nicougowrap）はbodyタグを閉じる直前あたりに書いたほうがいいかもしれません。
<input type="text" id="nicougosendmsg"> <input type="button" onclick='initJsr();' value="ニコウゴする！" id="nicougobtn"> <div id="nicougowrap"></div>
nicougo.jsはご自由にいじってください。一応 user setting に適当なコンフィグを用意しておきました。
// user setting.
var NICOUGOWIDTH = 360; // display width.
var NICOUGOHEIGHT = 240; // display height.
var NICOUGOBGCOLOR = "#FFFFFF"; // display color.
var NICOUGOVPOS = "240px"; // display vertical position.
var NICOUGOHPOS = "120px"; // display horizonal position.
var NICOUGOFONTSIZE = 14; // font size.
var NICOUGOOPC = 80; // opacity.
var NICOUGOSPD = 16; // speed.
var NICOUGOSHAKE = 8; // ugougo shakes.
var NICOUGOEMGSPAN = 80; // emerge span.
// user setting.
var itemList;
var topBlurList;
var leftBlurList;
var jsrInst;
var dataSize = 0;
var nowRendering = false;
var Drag = {
obj : null,
init : function( o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper )
{
o.onmousedown = Drag.start;
o.onmouseover = Drag.over;
o.onmouseout = Drag.out;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if ( o.hmode && isNaN( parseInt( o.root.style.left ) ) ) o.root.style.left = "0px";
if ( o.vmode && isNaN( parseInt( o.root.style.top ) ) ) o.root.style.top = "0px";
if ( !o.hmode && isNaN( parseInt( o.root.style.right ) ) ) o.root.style.right = "0px";
if ( !o.vmode && isNaN( parseInt( o.root.style.bottom ) ) ) o.root.style.bottom = "0px";
o.minX = typeof minX != 'undefined' ? minX : null;
o.minY = typeof minY != 'undefined' ? minY : null;
o.maxX = typeof maxX != 'undefined' ? maxX : null;
o.maxY = typeof maxY != 'undefined' ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function( e )
{
var o = Drag.obj = this;
e = Drag.fixE( e );
var y = parseInt( o.vmode ? o.root.style.top : o.root.style.bottom );
var x = parseInt( o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart( x, y );
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if ( o.hmode ) {
if ( o.minX != null ) o.minMouseX = e.clientX - x + o.minX;
if ( o.maxX != null ) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
}
else {
if ( o.minX != null ) o.maxMouseX = -o.minX + e.clientX + x;
if ( o.maxX != null ) o.minMouseX = -o.maxX + e.clientX + x;
}
if ( o.vmode ) {
if ( o.minY != null ) o.minMouseY = e.clientY - y + o.minY;
if ( o.maxY != null ) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
}
else {
if ( o.minY != null ) o.maxMouseY = -o.minY + e.clientY + y;
if ( o.maxY != null ) o.minMouseY = -o.maxY + e.clientY + y;
}
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},
drag : function( e )
{
e = Drag.fixE( e );
var o = Drag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt( o.vmode ? o.root.style.top : o.root.style.bottom );
var x = parseInt( o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if ( o.minX != null ) ex = o.hmode ? Math.max( ex, o.minMouseX ) : Math.min( ex, o.maxMouseX );
if ( o.maxX != null ) ex = o.hmode ? Math.min( ex, o.maxMouseX ) : Math.max( ex, o.minMouseX );
if ( o.minY != null ) ey = o.vmode ? Math.max( ey, o.minMouseY ) : Math.min( ey, o.maxMouseY );
if ( o.maxY != null ) ey = o.vmode ? Math.min( ey, o.maxMouseY ) : Math.max( ey, o.minMouseY );
nx = x + ( ( ex - o.lastMouseX ) * ( o.hmode ? 1 : -1 ) );
ny = y + ( ( ey - o.lastMouseY ) * ( o.vmode ? 1 : -1 ) );
if ( o.xMapper ) nx = o.xMapper( y )
else if ( o.yMapper ) ny = o.yMapper( x )
Drag.obj.root.style[ o.hmode ? "left" : "right" ] = nx + "px";
Drag.obj.root.style[ o.vmode ? "top" : "bottom" ] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag( nx, ny );
return false;
},
end : function()
{
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.root.onDragEnd( parseInt( Drag.obj.root.style[ Drag.obj.hmode ? "left" : "right" ] ),
parseInt( Drag.obj.root.style[ Drag.obj.vmode ? "top" : "bottom" ] ) );
Drag.obj = null;
},
over : function( e )
{
nowRendering = true;
return false;
},
out : function( e )
{
nowRendering = false;
rendering();
return false;
},
fixE : function( e )
{
if ( typeof e == 'undefined' ) e = window.event;
if ( typeof e.layerX == 'undefined' ) e.layerX = e.offsetX;
if ( typeof e.layerY == 'undefined' ) e.layerY = e.offsetY;
return e;
}
};
// setup json script request.
function initJsr()
{
// ローカルでテストする場合は encodeURI( document.URL ) を'http%3a%2f%2fexample%2ecom%2f'など実URLに変更する必要があります
jsrInst = new JSONscriptRequest( 'http://labs.mojalog.com/mojascript/nicougo/nicougo.php?url='
+ encodeURI( document.URL ) + '&msg='
+ encodeURI( document.getElementById( "nicougosendmsg" ).value )
+ '&fmt=nicougoload' );
jsrInst.buildScriptTag();
jsrInst.addScriptTag();
}
function nicougoload( param ){
var nicougoItem = "";
dataSize = param.length;
for( idx = 0; idx < dataSize; idx++ ){
nicougoItem = nicougoItem + '<div id="nicougomsg' + idx
+ '" style="position:absolute; top:0px; left:' + NICOUGOWIDTH
+ 'px; font-size:' + NICOUGOFONTSIZE
+ 'px;"><Nobr><ruby><rb>' + param[ idx ].item
+ '</rb><rp>(</rp><rt>' + param[ idx ].datetime
+ '</rt><rp>)</rp></ruby></Nobr></div>';
}
isRender = true;
var browserInf = new BrowserInfo();
var inf = 'filter:Alpha( opacity=' + NICOUGOOPC + ' );';
if( browserInf.firefox ){
inf = '-moz-opacity:' + NICOUGOOPC / 100 + ';';
}
else if( browserInf.opera ){
inf = 'opacity:' + NICOUGOOPC / 100 + ';';
}
document.getElementById( "nicougowrap" ).innerHTML = '<div id="nicougo" style="position:absolute; top:' + NICOUGOVPOS
+ '; left:' + NICOUGOHPOS
+ '; width:' + NICOUGOWIDTH
+ 'px; height:' + NICOUGOHEIGHT
+ 'px; padding: 5px; cursor:move; background-color:#ffffff;'
+ inf
+ '"><span style="cursor:pointer;" onclick="unload()">'
+ '<img alt="閉じる" src="close.PNG" /></span>'
+ nicougoItem + '</div>';
jsrInst.removeScriptTag();
Drag.init( document.getElementById( "nicougo" ) );
setupItem();
rendering();
}
function setupItem()
{
itemList = new Array();
topBlurList = new Array();
leftBlurList = new Array();
for( idx = 0; idx < dataSize; idx++ ){
itemList.push( document.getElementById( "nicougomsg" + idx ) );
itemList[ idx ].style.top = 20 + ( Math.random() * ( NICOUGOHEIGHT - 60 ) );
topBlurList.push( parseInt( itemList[ idx ].style.top ) );
leftBlurList.push( parseInt( itemList[ idx ].style.left ) + ( idx * NICOUGOEMGSPAN ) );
}
nowRendering = false;
}
function rendering(){
document.getElementById( "nicougobtn" ).disabled = true;
if( nowRendering ) return false;
for( idx = 0; idx < dataSize; idx++ ){
itemList[ idx ].style.position = 'absolute';
leftBlurList[ idx ] = leftBlurList[ idx ] - NICOUGOSPD;
if( leftBlurList[ idx ] <= NICOUGOWIDTH ){
itemList[ idx ].style.display = "";
itemList[ idx ].style.left = parseInt( itemList[ idx ].style.left ) - NICOUGOSPD + "px";
}
else {
itemList[ idx ].style.display = "none";
}
var browserInf = new BrowserInfo();
var vanishPoint = 0;
if( browserInf.firefox ){
vanishPoint = 0;
}
else {
vanishPoint = itemList[ idx ].innerText.length * parseInt( itemList[ idx ].style.fontSize );
}
if( leftBlurList[ idx ] + ( vanishPoint ) <= 0 ){
itemList[ idx ].innerHTML = "";
}
itemList[ idx ].style.top = topBlurList[ idx ] + ( Math.random() * NICOUGOSHAKE ) + "px";
}
if( itemList[ dataSize -1 ].innerHTML == "" ){
unload();
}
else {
setTimeout( 'rendering()', 100 );
}
}
function unload(){
nowRendering = false;
document.getElementById( "nicougobtn" ).disabled = false;
document.getElementById( "nicougowrap" ).innerHTML = "";
}
[ 最近のエントリーとその関連エントリー ]
[ スポンサードリンク ]
| パーマリンク
コメント (2)
Det ar fint! Mycket bra sida..
投稿者: giochi it | 2008年11月14日 20:38
日時: 2008年11月14日 20:38
..was just passing by.. good work
投稿者: playboy com | 2008年11月16日 15:07
日時: 2008年11月16日 15:07