タグテスト2

タグ追加のための投稿です。

タグ：JavaScript タグクラウド

タグテスト1

タグ追加のための投稿です。

タグ：動く 3D 球体 タグクラウド

3D球体タグクラウドの設置の仕方

FC2ブログで「3D球体タグクラウド」というものを作成しました。このタグクラウドは、3Dの球体に張り付いたタグをマウスでグルグル回転させることができます。FC2ブログでこの「3D球体タグクラウド」をプラグインという形で共有（アップロード）したところ、おかげさまで1,000人以上の方にダウンロードして、利用されています。

このタグクラウドは、Flashは使わず、JavaScriptだけで動かすことができるため、FC2ブログに限らず、JavaScriptが実行でき、ブログに「タグ」の仕組みがあれば、どこでも利用できるものです。
FC2のブログ記事にも「3D球体タグクラウド」のことを書いたのですが、その記事のコメントに「So-netブログでも利用できないか」という要望をいただきました。

そこで、So-netブログでも「3D球体タグクラウド」を利用できるように、少し修正を加えました。以下のような手順で、So-netブログでも「3D球体タグクラウド」が表示できるようになります。（このブログの左上のようなタグクラウドになります。）

1. ブログの管理ページを開き、[デザイン]→[レイアウト]とクリックします。
2. 左の「レイアウト」から、[サイドコンテンツ]を開き、[タグクラウド]を[サイドバー]にドラッグ＆ドロップします。（「カスタムペイン」ではうまくいきません。）
3. 「サイドバー」に追加された「タグクラウド」をクリックします。
4. 「コンテンツHTML編集」リンクをクリックします。
5. 表示されたHTMLコードを下に書かれたコードにすべて書き換えます。（362行ありますので、すべてコピーしてください。）

置き換えるHTMLコード↓
<div class="sidebar" id="side_tag"> <h3 class="sidebar-title"><% content.title | html %></h3> <div class="sidebar-body"> <% content.header -%> <div id="tagcloud" style="overflow: hidden;" onmouseover="onMouseCloud();" onmouseout="offMouseCloud();" onmousemove="mouseHandler(event);" > <div id="tagcloudInner" style="position:relative;"></div> </div> <script type="text/javascript"> <!-- var cloudSize = 180; // px クラウドサイズ(縦横共通) カラムの幅(width)と同じ値を設定してください。 var maxTagNum = 30; // タグの最大表示件数 -1:全件表示 var darkColor = 64; // 最も手前にあるときの文字の暗さ 0～255 var lightColor = 216; // 最も 奥 にあるときの文字の明るさ 0～255 var linkColor = "#FF6600"; // タグにマウスが乗った時の色 var maxFont = 24; // px 使用回数最多のタグのフォントサイズ var minFont = 12; // px 使用回数最少のタグのフォントサイズ var rewriteSec = 10; // 再描画間隔(ミリ秒) var maxVelocity = 1500; // 1周にかかるおよそのミリ秒数 var attenuation = 0.95; // 減衰率 (0～1) マウスオーバーしていないときの速度の減衰率 var perspective = 0.50; // 遠近率 (0～1) 遠くなったときのフォントサイズ比率 var initrthv = 1.50; // 初期回転軸角速度（0～） var wordKey = "word"; var wordKeyAnc = wordKey + "Anc"; var tagcloudArea = "tagcloudInner"; document.getElementById("tagcloud").style.width=cloudSize+"px"; document.getElementById("tagcloud").style.height=cloudSize+"px"; var cloudWidth = cloudSize; var cloudHeight = cloudSize; var cloudRad = cloudSize/2*0.8; // タグクラウド領域半径 var dx = 1/Math.sqrt(2); // 初期回転軸方向 単位法線 var dy = 1/Math.sqrt(2); // 初期回転軸方向 単位法線 var rvconst = 2 * Math.PI * rewriteSec / maxVelocity; // 回転角速度 var rthv = initrthv * rvconst; // 回転軸角速度（0～） var isOnMouseCloud = false; var mouseX = 0; var mouseY = 0; var isOnAnc = false; var tagNameList = new Array(""<% loop:list_tags -%>, "<% tag.word | html %>"<% /loop -%>); tagNameList.shift(); var tagLinkList = new Array(""<% loop:list_tags -%>, "<% blog.tag_url(tag) %>"<% /loop -%>); tagLinkList.shift(); var tagNumList = new Array(""<% loop:list_tags -%>, <% count %><% /loop -%>); tagNumList.shift(); var posi = new Array(); var dtag = new Array(); var atag = new Array(); var minCount = 0; var maxCount = 0; mouseCheck(); drowCloud(); function drowCloud() { if (tagNumList.length==0) return; if (maxTagNum>0 && tagNumList.length>maxTagNum) { tagNameList.splice(maxTagNum, tagNameList.length-maxTagNum); tagLinkList.splice(maxTagNum, tagLinkList.length-maxTagNum); tagNumList.splice (maxTagNum, tagNumList.length -maxTagNum); } minCount = tagNumList[0]; maxCount = tagNumList[0]; for (i=1;i<tagNameList.length-1;i++) { if (minCount > tagNumList[i]) minCount = tagNumList[i]; else if (maxCount < tagNumList[i]) maxCount = tagNumList[i]; } if (minCount==maxCount) {minCount-=0.5; maxCount+=0.5;} var cntsqrX = Math.ceil(Math.sqrt(tagNameList.length)); var cntsqrY = cntsqrX; if (cntsqrX*(cntsqrY+1)<=tagNameList.length) { cntsqrY += 1; } for (i=0;i<tagNameList.length;i++) { var sfont = (maxFont-minFont)/(Math.log(maxCount)-Math.log(minCount))*(Math.log(tagNumList[i])-Math.log(minCount)) + minFont; posi[i] = new Position(tagNameList[i], tagLinkList[i], sfont); } // シャッフル posi.sort(function(a,b) {return Math.random()-0.5;}); // 初期位置 var tagcnt=0; var forExit=false; for (i=0;i<cntsqrX;i++) { var x = (i+0.5)/cntsqrX; for (j=0;j<cntsqrY;j++) { var y = (j+0.5)/cntsqrY; var rndth = 2*Math.acos(Math.sqrt(1-x)); var rndfi = 2*Math.PI*y; var sinth = Math.sin(rndth); posi[tagcnt].x=sinth*Math.cos(rndfi); posi[tagcnt].y=sinth*Math.sin(rndfi); posi[tagcnt].z=Math.cos(rndth); tagcnt++; if (tagcnt >= posi.length) { forExit=true; break; } } if (forExit) break; } var I=""; for (i=0;i<posi.length;i++) { I += posi[i].getInitHTML(i); } document.getElementById(tagcloudArea).innerHTML = I; for (i=0;i<posi.length;i++) { posi[i].width = document.getElementById(wordKey+i).offsetWidth; posi[i].height = document.getElementById(wordKey+i).offsetHeight; dtag[i] = document.getElementById(wordKey + i); atag[i] = document.getElementById(wordKeyAnc + i); } rotateLoop(); } //////////////////////////////////////////////////////////////// function rotateLoop() { if (isOnMouseCloud) { var dx1 = (mouseX - cloudWidth /2) / cloudRad; var dy1 = (mouseY - cloudHeight/2) / cloudRad; dx1 = Math.max(-1,Math.min(1,dx1)); dy1 = Math.max(-1,Math.min(1,dy1)); var rlength = Math.sqrt(dx1*dx1+dy1*dy1); if (rlength>0.001) { dx= dy1/rlength; // マウスのx位置はy軸に影響 dy=-dx1/rlength; // マウスのy位置はx軸に影響 rthv = rlength*rvconst; } } else { rthv *= attenuation; } var cosr = Math.cos(rthv); var sinr = Math.sin(rthv); var cost = 1-cosr; // 座標変換 for (i=0,len=posi.length;i<len;i++) { var dxcost = dx*cost; var dxdycost = dxcost*dy; var dxsinr = dx*sinr; var dysinr = dy*sinr; var x1=(dx*dxcost +cosr)*posi[i].x+ dxdycost *posi[i].y+dysinr *posi[i].z; var y1= dxdycost *posi[i].x+(dy*dy*cost+cosr)*posi[i].y-dxsinr *posi[i].z; var z1=- dysinr *posi[i].x+ dxsinr *posi[i].y+ cosr*posi[i].z; posi[i].x=x1; posi[i].y=y1; posi[i].z=z1; } // 奥から表示するために簡易ソート for (i=0,len=posi.length-1;i<len;i++) { if (posi[i].z > posi[i+1].z) { var t = posi[i]; posi[i] = posi[i+1]; posi[i+1] = t; } } // 再描画 for (i=0,len=posi.length;i<len;i++) { posi[i].updateHTML(i); } setTimeout('rotateLoop()',rewriteSec); } function mouseCheck() { if (isOnAnc==true) offMouseCloud(); setTimeout('mouseCheck()',1500); } function onMouseCloud() { isOnMouseCloud=true; } function offMouseCloud() { isOnMouseCloud=false; } function mouseHandler(event) { if (!event) event = window.event; var mox; var moy; if (document.all) { // for IE mox = event.offsetX; moy = event.offsetY; } else { mox = event.layerX; moy = event.layerY; } var elem; if (event.target) { // Firefox elem = event.target; } else if (window.event.srcElement) { // IE elem = window.event.srcElement; } if (elem.name) { var id = Number(elem.name.substring(wordKeyAnc.length)); var w = posi[id].width; var h = posi[id].height; mouseX = Math.floor( mox + posi[id].x * cloudRad+cloudWidth /2 - w/2); mouseY = Math.floor( moy + posi[id].y * cloudRad+cloudHeight/2 - h/2); isOnAnc=true; } else { mouseX = mox; mouseY = moy; isOnAnc=false; } } function onMouseAnc(event) { if (!event) event = window.event; var elem; if (event.target) { // Firefox elem = event.target; } else if (window.event.srcElement) { // IE elem = window.event.srcElement; } if (elem.name) { var id = Number(elem.name.substring(wordKeyAnc.length)); posi[id].onMouse(); } } function offMouseAnc(event) { if (!event) event = window.event; var elem; if (event.target) { // Firefox elem = event.target; } else if (window.event.srcElement) { // IE elem = window.event.srcElement; } if (elem.name) { var id = Number(elem.name.substring(wordKeyAnc.length)); posi[id].offMouse(); } for (i=0,len=posi.length;i<len;i++) { posi[i].offMouse(); } } function getStyleW(id) { return getStyle(wordKey + id); } function getStyle(name) { var element = document.getElementById(name); return (element.currentStyle || document.defaultView.getComputedStyle(element, '')); } //// Positionクラス function Position(tag, link, f) { this.tag=tag; this.link=link; this.f=f; // font this.x=0; this.y=0; this.z=0; this.isOnMouse=false; this.onMouse = function() { this.isOnMouse=true; }; this.offMouse = function() { this.isOnMouse=false; }; this.getInitHTML = function(id) { return this.getHTMLInner(id, -10000, -10000, 12); }; this.getHTMLInner = function(id , left, top, sfont) { var clr = Math.round(lightColor-(this.z+1)/2*(lightColor-darkColor)); var clrs = clr.toString(16); // 16進数文字列に変換 clrs = "#" + clrs+clrs+clrs; var I = "<div id='" + wordKey + id + "' style='position:absolute;text-align:center;vertical-align:middle;left:" + left + "px;top:" + top + "px;font-size:" + sfont + "px;white-space:nowrap;font-weight:bold;'>" + "<a href='" + this.link + "' name='" + wordKeyAnc + id + "' id='" + wordKeyAnc + id + "' style='text-decoration: none;color:" + clrs + "' onmouseover='onMouseAnc(event);' onmouseout='offMouseAnc(event);'>" + this.tag + "</a></div>"; return I; }; this.updateHTML = function(id) { var left =(this.x*cloudRad+cloudWidth /2)-this.width /2; var top =(this.y*cloudRad+cloudHeight/2)-this.height/2; var sfont=this.f*((this.z+1)/2*(1-perspective)+perspective); dtag[id].style.left= left + "px"; dtag[id].style.top = top + "px"; dtag[id].style.fontSize= sfont + "px"; if (atag[id].href != this.link) { atag[id].href = this.link; atag[id].innerText = this.tag; } var clrs = ""; if (this.isOnMouse) { clrs = linkColor; } else { var clr = Math.round(lightColor-(this.z+1)/2*(lightColor-darkColor)); clrs = clr.toString(16); // 16進数文字列に変換 clrs = "#" + clrs+clrs+clrs; } atag[id].style.color = clrs; this.width = dtag[id].offsetWidth; this.height = dtag[id].offsetHeight; }; } // --> </script> <% content.footer -%> </div> <div class="sidebar-end"></div> </div>

6. 「保存」ボタンをクリックします。
7. 「タグクラウドの設定に戻る」リンクをクリックします。
8. 「タイトル」を「3D球体タグクラウド」（任意）に書き換えます。
9. 画面下のほうの「設定を保存する」ボタンをクリックします。
10. iframeの[×]ボタン（ブラウザの[×]ボタンではなく、右上「So-netブログ」表記のすぐ下のボタン）をクリックします。
11. 「設定を保存する」ボタンをクリックします。

Javascriptコードを詳しく読んだり、カスタマイズしたい方は、FC2ブログ側の記事をご覧ください。また、質問、要望などがある場合も、FC2ブログ側の記事にコメントを集約して頂けると助かります。

タグ：グルグル Chrome Internet タグクラウド 動く ブログ so-net 3D 球体 JavaScript cool TagCloud