2006-06-18 Sun
HTML Slidy - W3Cが提供するプレゼンテーションツール
- Reference
HTML Slidy
http://www.w3.org/Talks/Tools/Slidy/
2006-06-16 Fri
JavaScriptのコーディング規約
- Reference
Javascript Programming Conventions
http://dojotoolkit.org/js_style_guide.html
MochiKit - StyleGuide
http://trac.mochikit.com/wiki/StyleGuide
Collection & Copy - MochKit - スタイルガイド
http://d.hatena.ne.jp/brazil/20060615/1150324291
2006-06-15 Thu
TOC script - 目次自動生成スクリプト
- Summary
h1,h2,h3,h4 などの ヘッダタグから自動的に目次を生成.

- Reference
QuirksMode.org - JavaScript - TOC script
http://www.quirksmode.org/dom/toc.html
Ppk on Javascript: 洋書
2006-06-12 Mon
dp.SyntaxHighlighter - JavaScriptでソースのハイライト
- Summary
C#,Javascript,VB,XML,HTML,PHP,SQL,Delphi,Python に対応.
- Reference
dp.SyntaxHighlighter - free JavaScript syntax highlighting
http://www.dreamprojections.com/SyntaxHighlighter/Examples.aspx
- via
phpspot開発日誌 - 2006-01-17 - Javascriptだけで各種プログラム言語コードを色分け表示する方法
http://phpspot.org/blog/archives/2006/01/javascript_2.html
2006-06-12 Mon
振る舞い分離 JavaScript ライブラリ
- behaviour.js
http://bennolan.com/behaviour/
- Modified Behavior
behaviour.jsの改良版.
http://www.firelord.net/modifiedbehavior
- document.getElementsBySelector
http://simon.incutio.com/js/getElementsBySelector.html
- cssQuery
http://dean.edwards.name/my/cssQuery/
- jQuery
http://jquery.com/
- prototype.js
http://prototype.conio.net/
- Reference
我的春秋: 振る舞い分離 JavaScript ライブラリ一覧
http://my-chunqiu.cocolog-nifty.com/html/javascript-behaviour.html
TECHMemo - 2005-12-31 - CSSのselectorとイベントハンドラの関連付け
http://d.hatena.ne.jp/dann/20051231/p5
fladdict.net blog - 2006-06-02 - jsがメッサ楽しくなるフレームワークjQuery(1)
http://fladdict.net/blog/2006/06/jsjquery1.html
JavaScript++かも日記 - 2006-06-02 - jQuery
http://jsgt.org/mt/archives/01/001088.html
- via
我的春秋 - 2006-01-05 - JavaScript ソースが HTML から消える日
http://my-chunqiu.cocolog-nifty.com/blog/2006/01/javascript_html_bc22.html
我的春秋 - 2006-06-10 - 続 JavaScript ソースが HTML から消える日
http://my-chunqiu.cocolog-nifty.com/blog/2006/06/_javascript_htm_d49c.html
2006-06-09 Fri
JavaScriptでラスタスクロール,サイコロ回転エフェクト
- Reference
Kawa.net - Animation.Raster - ラスタスクロールだ!
http://www.kawa.net/works/js/animation/raster.html
Kawa.net - Animation.Cube - サイコロ回転エフェクト (rotating cube animation)
http://www.kawa.net/works/js/animation/cube.html
- via
@IT - Ajax うきうき Watch 第8回 “CGUI” 消費者が作り出すユーザーインターフェイスの時代
http://www.atmarkit.co.jp/fwcr/rensai/ajaxwatch08/01.html
2006-06-06 Tue
Bubble Tooltips - 吹き出し方式のツールチップテキスト作成JavaScriptライブラリ
- Reference
wg:Bubble Tooltips
http://web-graphics.com/mtarchive/001717.php
- via
phpspot開発日誌 - 2006-06-06 - 吹き出し方式のツールチップテキスト作成JavaScriptライブラリ
http://phpspot.org/blog/archives/2006/06/javascript_14.html
2006-06-05 Mon
Lib_Excel.js - XML出力したExcelファイルを扱うJavaScriptライブラリ
- Reference
Ajax : WebDesigning 2006年5月号サンプル
http://www.openspc2.org/JavaScript/Ajax/WebDesigning/200605/
2006-05-18 Thu
指定した日時までの時間を表示するスクリプト "countdown.js" と使用法
- Summary
YAPC::Asia 2006のカウントダウンで使われていたスクリプトを見てみた.
- countdown.js
function toCountString(sec) { if (sec <= 0) { return '00:00:00'; } var day = Math.floor(sec / (60*60*24)); var hour = Math.floor(sec % (60*60*24)/(60*60)).toString().replace(/^(\d)$/, '0$1'); var min = Math.floor(sec % (60*60*24) / (60) % 60).toString().replace(/^(\d)$/, '0$1'); var sec = Math.floor(sec % (60*60*24)%60%60).toString().replace(/^(\d)$/, '0$1'); return day + 'days ' + hour + ':' + min + ':' + sec; } function updateCountdown(id, m, c) { var node = document.getElementById(id); if (!node) { return false; } for (var i = 0; i < node.childNodes.length; i++) { node.removeChild(node.childNodes[i]); } var count = toCountString(Math.floor((m - c)/1000)); node.appendChild(document.createTextNode(count)); }
- HTML
<script type="text/javascript" src="countdown.js"> <div id="countdown"></div> <script type="text/javascript"> updateCountdown('countdown', new Date('March 29,2006 00:00:00'), new Date()); setInterval("updateCountdown('countdown', new Date('March 29,2006 00:00:00'), new Date())", 1000); </script>
- 複数のカウントダウンに対応する
原始的にやってみると以下のようになる.
<div id="countdown-1"></div> <div id="countdown-2"></div> <div id="countdown-3"></div> <script type="text/javascript"> updateAllCountdown(); setInterval("updateAllCountdown()",1000); function updateAllCountdown(){ updateCountdown('countdown-1', new Date('June 22,2006 00:00:00'), new Date()); updateCountdown('countdown-2', new Date('October 1,2006 00:00:00'), new Date()); updateCountdown('countdown-3', new Date('March 18,2007 00:00:00'), new Date()); return true; } </script>
2006-04-20 Thu
リンクをマウスオーバーでサムネイルをポップアップ
- Source
function linkthumb(){ var nophoto = 'http://img.simpleapi.net/img/nophoto.gif'; var img = document.createElement('img'); img.src = nophoto; img.onmouseout = function(){ img.src=nophoto; img.style.display='none'; }; img.style.position = 'absolute'; img.style.cursor = 'pointer'; img.style.display = 'none'; document.body.appendChild(img); var d = document.getElementsByTagName('div'); for (var j = 0 ; j < d.length ; j++){ if (d[j].className != 'body') continue; var a = d[j].getElementsByTagName('a'); for (var i = 0 ; i < a.length ; i++){ if (!a[i].href.match(/^http:/)) continue; if (a[i].href.match("^http://www\.example\.org/path/to/dir/")) continue; a[i].onmouseover=function(e){ var link = this.href; var thumb = 'http://img.simpleapi.net/small/'+link; img.onmouseover=function(){ img.src=thumb; img.style.display='block'; }; img.onclick = function(){ location.href=link; }; if(document.all){ img.style.left = document.documentElement.scrollLeft + event.x + "px"; img.style.top = document.documentElement.scrollTop + event.y + "px"; }else{ img.style.left = e.pageX + "px"; img.style.top = e.pageY + "px"; } img.src = thumb; img.style.display = 'block'; }; a[i].onmouseout = img.onmouseout; } } } if(window.addEventListener){ window.addEventListener('load',linkthumb,false); } else if(window.attachEvent){ window.attachEvent('onload',linkthumb); } else { window.onload=linkthumb; }
以下の部分を適宜書き換えることで,自分のサイトはポップアップさせないように設定可能.
if(a[i].href.match("^http://www\.example\.org/path/to/dir/")) continue;
- Reference
Simple API - ウェブサイト・サムネイル化ツール
http://img.simpleapi.net/
- via
halchan's diary
http://www.halchan.org/diary/
2006-04-03 Mon
Lightbox JS v2.0
- Reference
Lightbox JS v2.0
http://www.huddletogether.com/projects/lightbox2/
2006-03-15 Wed
JavaScript で指定の HTML 要素を動的に角丸デザインにする方法
- Source
Rounded("div#nifty","#377CB1","#9BD1FA"); // この1行だけで要素を角丸にすることが可能
- Reference
Nifty Corners
http://pro.html.it/esempio/nifty/
- via
phpspot開発日誌 - Javascriptで指定のHTML要素を動的に角丸デザインにする方法
http://phpspot.org/blog/archives/2006/03/javascripthtml.html
2006-03-15 Wed
target="_blank" を使わないで別ウィンドウでリンクを開くのに rel="external" を使う
- Reference
tcervo.com - 2004-01-01 - Opening a link in a new window - the valid way
http://tcervo.com/?p=18
- via
hori-uchi.com: _blankを使わないで別ウィンドウを開くにはrel="external"を使うのが美しいと思う。
http://hori-uchi.com/archives/000424.html
2006-03-15 Wed
target="_blank" を使わないで新しいウィンドウでリンクを開く方法
- Summary
target="_blank" を使わないで新しいウィンドウでリンクを開くための手法.
Behaviour.js を利用すればより簡単,かつHTMLを汚さずに実装可能.
Sample
- Source
var myrules = { '.popup' : function(el){ var href = el.getAttribute('href'); if (href){ el.onclick = function(){ window.open(href); return false;} el.onkeypress = function(){ window.open(href); return false;} } } }; Behaviour.register(myrules);
<script type="text/javascript" src="behaviour.js"></script> <a href="index.html">Normal</a> <a class="popup" href="index.html">Pop up</a>
- Reference
Behaviour : Using CSS selectors to apply Javascript behaviours
http://bennolan.com/behaviour/
- via
cl.pocari.org - 2006-03-14
http://cl.pocari.org/2006-03-14-5.html
2006-03-13 Mon
JavaScript で数値を3桁区切り
function toReadableNumber(str){ var ret = Math.floor(str).toString(); ret = ret.match(/./g).reverse().join(""); ret = ret.replace(/(\d{3})/g,"$1,"); ret = ret.match(/./g).reverse().join("").replace(/^,/,""); return ret; }
- Reference
きんがくとかをけたくぎり
http://page.freett.com/elledia/tips/comma.html
2006-02-17 Fri
JavaScriptにおけるコントロール名としてのブラケット (大括弧) の利用
- Summary
PHP で フォームの値を配列として受け取りたい場合,
以下のように記述するが,JavaScript で値を受け取る場合にちょっと面倒.
- name が hoge[0],hoge[1] ... の場合
JavaScript で hoge[1] の値を取得したい.
以下の場合,配列として認識されてしまう.
document.forms[0].hoge[1].value;
elements を用いて解決.
document.forms[0].elements["hoge[1]"].value;
- name が hoge[],hoge[] ... の場合
JavaScript で hoge[1] の値を取得したい.
getElementById を用いて解決.
document.getElementById('hoge1').value;
elements を用いて解決.
document.forms[0].elements[1].value;
- Reference
Web相談室 - JavaScriptにおけるコントロール名としての[]の利用
http://www.parkcity.ne.jp/~chaichan/qanda/qa5517.htm
PHP マニュアル - 第71章 PHPとHTML - 3. HTMLフォームで配列を使用するにはどうすればよいですか?
http://php.s3.to/man/faq.html.html#faq.html.arrays
W3C Recommendation - HTML4.01 - Basic HTML data types - CDATA
http://www.w3.org/TR/html401/types.html#type-cdata
W3C Recommendation - HTML4.01 - Forms in HTML documents - The INPUT element
http://www.w3.org/TR/html401/interact/forms.html#h-17.4
2006-02-16 Thu
今日から使える JavaScript カスタム関数トップ 10
- Reference
Web Standards with Imagination - Top 10 custom JavaScript functions of all time
http://www.dustindiaz.com/top-ten-javascript
- via
[戯] 今日から使える JavaScript カスタム関数トップ 10
http://cl.pocari.org/2006-02-13-2.html
2006-02-16 Thu
Canvas Graph library - canvas を使った JavaScript によるグラフ描画ライブラリ
- Reference
Announcement: new Javascript/Canvas Graph library
http://aslakhellesoy.com/articles/2006/02/09/announcement-new-javascript-canvas-graph-library
OpenSpace - HTMLタグリファレンス - <canvas>タグ
http://www.openspc2.org/HTML/appendix/canvas_param/title.html
- via
[戯] canvas を使った JavaScript によるグラフ描画ライブラリ
http://cl.pocari.org/2006-02-13-1.html
2006-02-07 Tue
Firefox 検索 Plug-in を追加する JavaScript
- Summary
クリックすると,Firefox に検索プラグインを追加するダイヤログが表示される.
Qooqle で発見した.
http://qooqle.jp/javascripts/firefox_plugin.js
- Source
function addEngine() { if ((typeof window.sidebar == "object") && (typeof window.sidebar.addSearchEngine == "function")) { window.sidebar.addSearchEngine( "http://xight.org/misc/firefox/searchplugins/xight.src", /* engine URL */ "http://xight.org/misc/firefox/searchplugins/xight.png", /* icon URL */ "memo.xight.org", /* engine name */ "Web検索"); /* category name */ } else { alert("検索プラグインを使用するには Mozilla Firefox、Mozilla、または Netscape 6 以上が必要です。"); } }
<a href="javascript:addEngine();">Firefox に検索プラグインを追加</a>
- Sample
Firefox に検索プラグインを追加
- Reference
Qooqle
http://qooqle.jp/
2006-02-06 Mon
FCKEditor - WYSIWYG な HTML 編集ライブラリ
- Summary
<?php include "fckeditor.php"; $fckObject = new FCKeditor( "edit_name") ; $fckObject->BasePath = "./"; $fckEditorHtml = $fckObject->CreateHtml(); ?> <form method="post"> <?= $fckEditorHtml ?> <input type="submit" value="send" /> </form> <?= $_REQUEST['edit_name'] ?>
- イメージマネージャを利用する
fckconfig.js を編集
// var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py // var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php
editor/filemanager/browser/default/connectors/php/config.php を編集
// SECURITY: You must explicitelly enable this "connector". (Set it to "true"). // $Config['Enabled'] = false; $Config['Enabled'] = true; // Path to user files relative to the document root. // $Config['UserFilesPath'] = '/UserFiles/' ; $Config['UserFilesPath'] = '/FCKeditor/UserFiles/' ;
% mkdir /var/www/FCKeditor/UserFiles
- XOOPSに組み込む
FCKeditor - xoopsに組み込む
http://www.geocities.jp/fckeditor/xoops.html
- FCKEditorクラスのメソッド
| メソッド名 | 用途 |
| FCKeditor | コンストラクタ |
| Create | FCKEditorを実行するHTMLを出力する |
| CreateHtml | FCKEditorを実行するHTMLを返す |
| IsCompatible | FCKEditorが使用できるかどうか調べる |
| GetConfigFieldString | ConfigプロパティをFCKEditorに渡すパラメータ文字列に変換する(private的関数) |
- FCKEditorクラスのプロパティ
| プロパティ名 | 用途 |
| $InstanceName | インスタンスするフォーム要素名を指定する |
| $BasicPath | FCKEditor本体のURLパスを指定する |
| $Width | 表示するFCKEditorの幅をピクセル単位で指定する |
| $Height | 表示するFCKEditorの高さをピクセル単位で指定する |
| $ToolbarSet | 使用するツールバーの種類を指定する.デフォルトでは「default」と「Basic」がある |
| $Value | FCKEditorのデフォルト文字列 |
| $Config | その他のFCKEditorの設定を配列で指定 |
- Reference
FCKeditor - The text editor for Internet
http://www.fckeditor.net/
- via
Writing/kiwameru_php_vol.1/wysiwyg-editor - よくきた wiki
http://wiki.poyo.jp/read/Writing/kiwameru_php_vol.1/wysiwyg-editor
cl.pocari.org - PHP で WYSIWYG な編集ライブラリ FCKEditor
http://cl.pocari.org/2006-01-23-2.html