Web Study http://web.elmblog.com/study/ en Copyright 2006 Thu, 17 Aug 2006 23:11:27 +0900 http://www.sixapart.com/movabletype/ http://blogs.law.harvard.edu/tech/rss Ajaxアプリケーション ajax = false; // IE以外 if(window.XMLHttpRequest) { 　　　ajax = new XMLHttpRequest(); // IE用 } else if(window.ActiveXObject) { 　　　try { 　　　　　　ajax = new ActiveXObject("Msxml2.XMLHTTP"); 　　　} catch(e) { 　　　　　　ajax = new ActiveXObject("Microsoft.XMLHTTP"); 　　　} } 2. サーバと通信してデータを取得し、ページを書き換える関数(Ajaxエンジン)を作る。この関数は、第1引数に指定されたURLにアクセスして返された文字列で、第2引数で指定されたIDを持つページ内のオブジェクトの中身を書き換える。 function getData(serverURL, objID) { 　　　ajax.open("GET", serverURL); 　　　ajax.onreadystatechange = function() { 　　　　　　if (ajax.readyState == 4 && ajax.status == 200) { 　　　　　　　　　var obj = document.getElementById(objID); 　　　　　　　　　obj.innerHTML = ajax.responseText; 　　　　　　} 　　　} 　　　ajax.send(null); } 3. このJavaScriptを使うHTMLページを作る。ページ内には段落と、Ajaxを実行するためのボタンを1つ配置する。ボタンは通常のsubmit動作は行わずに、JavaScriptの関数を呼び出すだけ。onClickイベントハンドラで指定しているURLは、スクリプトの置かれているURLに置き換える。 <html> <head><title>最も簡単なAjaxサンプル</title></head> <body> <form> <input type=button value="取得＆書き換え" onClick="getData('http://www.example.jp/server.php', 'maintext'); return false;"> </form> <div id="maintext"><p>ボタンを押すとこのテキストが書き換わります。</p></div> </body> </html> 4. サーバ側のスクリプトを作る。サンプルとしてHTMLテキストを返すだけのスクリプトを、クライアント側で指定されている /server.phpとして配置する。サーバ側はPerl、PHP、ASP.NET、J2EEなど、どのような開発環境でも利用できる。 ボタンがクリックされました。

'; ?> 5. これで、ボタンがクリックされるとサーバから取得したデータでページが書き換えられる。]]> http://web.elmblog.com/study/archives/javascript/000972.html http://web.elmblog.com/study/archives/javascript/000972.html JavaScript Thu, 17 Aug 2006 23:11:27 +0900 コメント書き込みの認証 Typekeyアカウントを作成する必要がある。メールアドレスを持っていれば無料で登録できる。 Movable Typeを使ったブログにコメントを書き込む前に、Typekeyにサインインする。認証されると、コメント投稿フォームの名前、メールアドレスは空白にして、コメントだけを書いて投稿する。名前、メールアドレスを書くとエラーが出るので注意！]]> http://web.elmblog.com/study/archives/movabletype/000959.html http://web.elmblog.com/study/archives/movabletype/000959.html MovableType Movable Type Tue, 08 Aug 2006 04:33:29 +0900 移動する時計

ようこそ、だるまの世界へ
Welcome to The Web Dharma


人生は恐れを知らぬ冒険か無か
Life is a daring adventure or nothing　


There are three kinds of people; those who make things happen, those who watch things happen, and those who don't know what the hell is happening.

管理人用
Index　 Photo　 Guest　 Diary　 Study　 SVC　 Game　 BlogRoll

　　　∇Top Stories　∇The Superficial　∇My Slideshows １　２　３　 popup
左下のボタンをクリックして、スライドを一時停止したり、スクロール速度を変えたりすることができます。マウスを重ねると説明が表示され、クリックすると本文ページが開きます。
Copyright ©1995-2005 Elmblog http://www.elmblog.com/
]]> http://web.elmblog.com/study/archives/javascript/000958.html http://web.elmblog.com/study/archives/javascript/000958.html JavaScript JavaScript Mon, 07 Aug 2006 23:26:42 +0900 任意の曲を連続演奏 登録されているmidi音楽をランダムに選曲して連続演奏するスクリプト。ウィンドウ画面をリフレッシュする（キーボードのファンクションキーＦ５を押す）とランダムに選ばれた曲が演奏される。 http://web.elmblog.com/study/archives/javascript/000948.html http://web.elmblog.com/study/archives/javascript/000948.html JavaScript Music Mon, 31 Jul 2006 00:04:20 +0900 JukeBox Script MidiPlayerとWeb_Jukeがある。前者はJavaスクリプト、後者はPerlで書かれている。一長一短だが基本はおなじである。自動演奏だけのシンプルなJavaスクリプトもある。

]]> http://web.elmblog.com/study/archives/javascript/000947.html http://web.elmblog.com/study/archives/javascript/000947.html JavaScript JavaScript Sun, 30 Jul 2006 22:21:33 +0900 Cipher 暗号化ソフトウェア モバイル用ストーレッジとしてUSB接続のClipdriveを愛用している。ただひとつ不便なのはそのセキュリティロックに時間がかかることである。最初の頃はセキュリティがあるため、内部資料の持ち運びも安心なのでロックをかける手間も苦にならなかったが、毎日何回かロック／アンロックをするのがだんだん面倒になってきた。格納ファイルの一部が機密を要する内容でも全部のロックをかけるのも面倒なものである。ファイルあるいはフォルダー単位で簡単に暗号化できるソフトウェアを使うことにして、特に機密を要するものはClipdriveのセキュリティも使って二重に保護することにした。

]]> http://web.elmblog.com/study/archives/tools/000946.html http://web.elmblog.com/study/archives/tools/000946.html Tools Tools Sun, 30 Jul 2006 20:56:16 +0900 お役立ちツール 　ここではWeb制作に役立つソフトウェアを紹介します。いずれも無料配布されているもので、個人が非営利目的で使用することができます。ただし著作権は放棄されていませんので使用するときは必ず原著作者のサイトで確認してください。

■Accelyzer # アクセス解析用phpスクリプト…直近の訪問者、ホスト/OS統計情報やアクセス数を集計しグラフ化するツール
■Cipher 暗号化ソフトウェア　Chaky、Crypt、アタッシェケースが無料配布されている。
■ColorPalette 好きな色を作成でき、また画面上の色に対応するコードを簡単に知ることができる。
■Win高速化PC+ Windowsをボタンひとつで高速化するツール
■縮小専用 画像の縮小が簡単にできる。
■すなねぃる!! 画像一覧やｽﾗｲﾄﾞを簡単に作成できる。
■MKEditor フリーソフトのテクストエディター
■サクラエディタ オープンソースの日本語テクストエディター
■英日・日英翻訳 Ｗｅｂ上で簡単にテクスト翻訳、Ｗｅｂページおよびホームページの翻訳ができるExciteサービス。
■PHPSlideShow 画像があるフォルダーに保存するだけでスライドショウが可能(GPL)　


■PicturePackage
　 Producer		 縦横の動き（パン）やズーム効果およびBGMを加えたスライドショー(mpg形式)が簡単に作れる。ムービーの形式やBGMをテンプレートから選択できる。個々の写真の効果は指定できない。(Sony Cyber Shot DSC-T9付属ソフト)
■ Photo Story 3 写真ごとにアニメーション効果やタイトルをつけることができる。写真の順番もドラッグ＆ドロップで変更でき、スライドショーの流れに沿ってナレーションを吹き込むことができる。
]]> http://web.elmblog.com/study/archives/tools/000945.html http://web.elmblog.com/study/archives/tools/000945.html Tools Tools Sun, 30 Jul 2006 19:50:12 +0900 RSS Reader Code sample
#!/usr/local/bin/perl
use LWP::Simple 'get';
use XML::RSS;
use Jcode;
my $URL = 'http://www3.asahi.com/rss/index.rdf';
my $rss = new XML::RSS;
eval {
$rss->parse(get($URL));
};
print qq|Content-Type: text/html\n\n|;
print qq|<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
</head>\n|;
print qq|<body>Perlで書いたRSS Readerの例です。<br>
この例ではasahi.comのrss/index.rdfを読み込み表示しています。&lt;ul&gt;\n|;
for my $item (@{$rss->{items}}) {
printf qq|&lt;li&gt;<a href="%s">%s</a><br>\n|, $item->{link}, Jcode::convert(\$item->{title}, sjis);
}
print qq|</ul></body></html>\n|;
]]> http://web.elmblog.com/study/archives/tools/000944.html http://web.elmblog.com/study/archives/tools/000944.html Code Tools Sun, 30 Jul 2006 19:25:31 +0900 特殊文字コード Special Chars Reference Sheet
Name Code Glyph Description
&lsquo; ‘   left single quote
&rsquo; ’   right single quote
&sbquo; ?   single low-9 quote
&ldquo; “   left double quote
&rdquo; ”   right double quote
&bdquo; ?   double low-9 quote
&dagger; †   dagger
&Dagger; ‡   double dagger
&permil; ‰   per mill sign
&lsaquo; ?   single left-pointing angle quote
&rsaquo; ?   single right-pointing angle quote
&spades; ?   black spade suit
&clubs; ?   black club suit
&hearts; ?   black heart suit
&larr; ←   leftward arrow
&uarr; ↑   upward arrow
&rarr; →   rightward arrow
&darr; ↓   downward arrow
&trade; ?   trademark sign
 
Name Code Glyph Description
&#09; horizontal tab
&#10; line feed
&#32; space
&#33; !   exclamation mark
&quot; &#34; "   double quotation mark
&#35; #   number sign
&#36; $   dollar sign
&#37; %   percent sign
&amp; &#38; &   ampersand
&#39; '   apostrophe
&#40; (   left parenthesis
&#41; )   right parenthesis
&#42; *   asterisk
&#43; +   plus sign
&#44; ,   comma
&#45; -   hyphen
&#46; .   period
 
Name Code Glyph Description
&frasl; &#47; /   slash
&#48;-
&#57;		 digits 0-9
&#58; :   colon
&#59; ;   semicolon
&lt; &#60; <   less-than sign
&#61; =   equals sign
&gt; &#62; >   greater-than sign
&#63; ?   question mark
&#64; @   at sign
&#65;-
&#90;		 uppercase letters A-Z
&#91; [   left square bracket
&#92; \   backslash
&#93; ]   right square bracket
&#94; ^   caret
&#95; _   horizontal bar (underscore)
&#96; `   grave accent
&#97;-
&#122;		 lowercase letters a-z
&#123; {   left curly brace
&#124; |   vertical bar
 
Name Code Glyph Description
&#125; }   right curly brace
&#126; ~   tilde
&ndash; &#150; ?   en dash
&mdash; &#151; ?   em dash
&nbsp; &#160;     nonbreaking space
&iexcl; &#161; !   inverted exclamation
&cent; &#162; ¢   cent sign
&pound; &#163; £   pound sterling
&curren; &#164; ?   general currency sign
&yen; &#165; \   yen sign
&brkbar; &#166; |   broken vertical bar (&brvbar;)
&sect; &#167; §   section sign
&uml; &#168; ¨   umlaut (&die;)
&copy; &#169; c   copyright
&ordf; &#170; a   feminine ordinal
&laquo; &#171; ≪   left angle quote
&not; &#172; ¬   not sign
&shy; &#173; -   soft hyphen
&reg; &#174; R   registered trademark
&hibar; &#175; ￣   macron accent (&macr;)
 
Name Code Glyph Description
&deg; &#176; °   degree sign
&plusmn; &#177; ±   plus or minus
&sup2; &#178; 2   superscript two
&sup3; &#179; 3   superscript three
&acute; &#180; ´   acute accent
&micro; &#181; μ   micro sign
&para; &#182; ¶   paragraph sign
&middot; &#183; ・   middle dot
&cedil; &#184; ，   cedilla
&sup1; &#185; 1   superscript one
&ordm; &#186; o   masculine ordinal
&raquo; &#187; ≫   right angle quote
&frac14; &#188; ?   one-fourth
&frac12; &#189; ?   one-half
&frac34; &#190; ?   three-fourths
&iquest; &#191; ?   inverted question mark
&Agrave; &#192; A   uppercase A, grave accent
&Aacute; &#193; A   uppercase A, acute accent
&Acirc; &#194; A   uppercase A, circumflex accent
 
Name Code Glyph Description
&Atilde; &#195; A   uppercase A, tilde
&Auml; &#196; A   uppercase A, umlaut
&Aring; &#197; A   uppercase A, ring
&AElig; &#198; A   uppercase AE
&Ccedil; &#199; C   uppercase C, cedilla
&Egrave; &#200; E   uppercase E, grave accent
&Eacute; &#201; E   uppercase E, acute accent
&Ecirc; &#202; E   uppercase E, circumflex accent
&Euml; &#203; E   uppercase E, umlaut
&Igrave; &#204; I   uppercase I, grave accent
&Iacute; &#205; I   uppercase I, acute accent
&Icirc; &#206; I   uppercase I, circumflex accent
&Iuml; &#207; I   uppercase I, umlaut
&ETH; &#208; D   uppercase Eth, Icelandic
&Ntilde; &#209; N   uppercase N, tilde
&Ograve; &#210; O   uppercase O, grave accent
&Oacute; &#211; O   uppercase O, acute accent
&Ocirc; &#212; O   uppercase O, circumflex accent
&Otilde; &#213; O   uppercase O, tilde
 
Name Code Glyph Description
&Ouml; &#214; O   uppercase O, umlaut
&times; &#215; ×   multiplication sign
&Oslash; &#216; O   uppercase O, slash
&Ugrave; &#217; U   uppercase U, grave accent
&Uacute; &#218; U   uppercase U, acute accent
&Ucirc; &#219; U   uppercase U, circumflex accent
&Uuml; &#220; U   uppercase U, umlaut
&Yacute; &#221; Y   uppercase Y, acute accent
&THORN; &#222; T   uppercase THORN, Icelandic
&szlig; &#223; s   lowercase sharps, German
&agrave; &#224; a   lowercase a, grave accent
&aacute; &#225; a   lowercase a, acute accent
&acirc; &#226; a   lowercase a, circumflex accent
&atilde; &#227; a   lowercase a, tilde
&auml; &#228; a   lowercase a, umlaut
&aring; &#229; a   lowercase a, ring
&aelig; &#230; a   lowercase ae
&ccedil; &#231; c   lowercase c, cedilla
&egrave; &#232; e   lowercase e, grave accent
 
Name Code Glyph Description
&eacute; &#233; e   lowercase e, acute accent
&ecirc; &#234; e   lowercase e, circumflex accent
&euml; &#235; e   lowercase e, umlaut
&igrave; &#236; i   lowercase i, grave accent
&iacute; &#237; i   lowercase i, acute accent
&icirc; &#238; i   lowercase i, circumflex accent
&iuml; &#239; i   lowercase i, umlaut
&eth; &#240; d   lowercase eth, Icelandic
&ntilde; &#241; n   lowercase n, tilde
&ograve; &#242; o   lowercase o, grave accent
&oacute; &#243; o   lowercase o, acute accent
&ocirc; &#244; o   lowercase o, circumflex accent
&otilde; &#245; o   lowercase o, tilde
&ouml; &#246; o   lowercase o, umlaut
&divide; &#247; ÷   division sign
&oslash; &#248; o   lowercase o, slash
&ugrave; &#249; u   lowercase u, grave accent
&uacute; &#250; u   lowercase u, acute accent
&ucirc; &#251; u   lowercase u, circumflex accent
 
Name Code Glyph Description
&uuml; &#252; u   lowercase u, umlaut
&yacute; &#253; y   lowercase y, acute accent
&thorn; &#254; t   lowercase thorn, Icelandic
&yuml; &#255; y   lowercase y, umlaut
]]> http://web.elmblog.com/study/archives/code/000943.html http://web.elmblog.com/study/archives/code/000943.html Code Sun, 30 Jul 2006 19:14:51 +0900 Color Palette

Fieldeast社が配布しているフリーウェアFE-Color Palette ≫Download lzh(40kb) がおすすめ。ホームページを作っているとき、色使いに悩むことがある。文字や背景の色と対応するHTML色コードの一覧（Color Table）を使うと良い。しかし、作成のたびに色コードをColor Tableから選択するのも面倒くさくなってくる…。画面に表示されている気に入った色を使いたいが、Color Tableにない…。そんなときに便利なのがFE-Color Paletteである。

]]> http://web.elmblog.com/study/archives/tools/000942.html http://web.elmblog.com/study/archives/tools/000942.html Tools Tools Sun, 30 Jul 2006 18:45:13 +0900 ActiveXの処理方法
　その結果、一部のWebページを閲覧する際FlashやShockwaveなどの<object>、<embed>、または<applet>タグを使用したアクティブコンテンツを有効にするためには、閲覧者がアクティブコンテンツをクリックする必要がある。

この問題を回避し、Webの閲覧者が今までと同じような使い方ができるようにするためには、Webページの修正が必要となる。

１．<object>を外部の.jsファイルに置いて、HTMLファイルから呼び出す方法
  • 外部ファイル(foo.js)で<object>をdocument.writeする。　 
    function RunFoo()
{
    document.write('<object classid="clsid:D27CDB6E..." ...>\n');
    document.write('<param name="movie" value="foo.swf" />\n');
    document.write('</object>\n');
}

  • HTMLファイルの<head>セクションにfoo.jsの呼び出しを追加する。

    <script src="[path]/foo.js" type="text/javascript"></script>

  • 元の<object>タグを、外部ファイルの関数呼び出しに置き換える。

    <script type="text/javascript">RunFoo();</script>
　<embed>や<applet>タグについても同じように変更する。

２．複数のアクティブコンテンツを共通に処理する方法
　　ActiveX コントロールのアクティブ化　または Adobeが提供するJavaScriptソリューションの詳細
　を参照のこと。煩雑ではあるが、サイトで使っているすべてのコンテンツに有効である。]]> http://web.elmblog.com/study/archives/javascript/000941.html http://web.elmblog.com/study/archives/javascript/000941.html JavaScript JavaScript Sun, 30 Jul 2006 18:12:24 +0900 Falling Bubble
■　画像の上下移動　No.１
画像がゆっくりと左右に揺れながら、上下に移動する。シャボン玉がふわふわと登っていくイメージに利用できる。

《編集方法》
<!--画像ファイルの指定-->と書いてある部分で動かしたい画像を指定する。画像は８個まで指定できる。次にJavaScript 内の画像の数、移動方向、移動速度、揺れ幅、揺れの周期、画像のサイズを適宜指定する。
サンプル表示
■　画像の上下移動　No.2
単純に画像が上から下に向かって移動する。雪が降ったり、あるいは落ち葉が散るようなイメージ表現に使える。

《編集方法》
<!-- 画像の指定 -->と書いてある部分で動かしたい画像を指定する。指定できる画像は一種類のみ。
サンプル表示
■　画像の上下移動　No.3
こちらは非常に細かくパラメータが設定できるスクリプト。縦一列に移動させる事もできるし、画面いっぱいに降らせることもできる。また、一定の速度で移動したり、次第に加速させるような移動も可能である。

《編集方法》
<!--画像の指定-->と書いてある部分で動かしたい画像を指定する。その際、id をサンプルのように img1〜 の連番で指定する。あとはスクリプト部分に書かれているコメントを参考にしながら各種のパラメータを指定する。
サンプル表示
]]> http://web.elmblog.com/study/archives/javascript/000936.html http://web.elmblog.com/study/archives/javascript/000936.html JavaScript Fri, 28 Jul 2006 00:41:48 +0900 Status Message 時間ごとに変わるメッセージ

時刻に応じて異なるメッセージを表示する。つぎのスクリプトを表示したい位置に書く。

【例】 お疲れ様です。深夜0時です。

<SCRIPT type="text/JavaScript">
<!--
now = new Date();
hh = now.getHours();
switch(hh){
case 0:msg="お疲れ様です。深夜0時です。 ";break;
case 1:msg="お疲れ様です。1時です。 ";break;
case 2:msg="お疲れ様です。2時です。 ";break;
case 3:msg="お疲れ様です。3時です。 ";break;
case 4:msg="お疲れ様です。4時です。 ";break;
case 5:msg="おはようございます。5時です。 ";break;
case 6:msg="おはようございます。6時です。 ";break;
case 7:msg="おはようございます。7時です。 ";break;
case 8:msg="おはようございます。8時です。 ";break;
case 9:msg="おはようございます。9時です。 ";break;
case 10:msg="おはようございます。10時です。 ";break;
case 11:msg="こんにちは。11時です。 ";break;
case 12:msg="こんにちは。お昼です。 ";break;
case 13:msg="こんにちは。13時です。 ";break;
case 14:msg="こんにちは。14時です。 ";break;
case 15:msg="こんにちは。15時です。 ";break;
case 16:msg="こんにちは。16時です。 ";break;
case 17:msg="こんにちは。17時です。 ";break;
case 18:msg="こんばんは。18時です。 ";break;
case 19:msg="こんばんは。19時です。 ";break;
case 20:msg="こんばんは。20時です。 ";break;
case 21:msg="こんばんは。21時です。 ";break;
case 22:msg="お疲れ様です。22時です。 ";break;
case 23:msg="お疲れ様です。23時です。 ";break;
}
document.write(msg);
//-->
</SCRIPT>

]]> http://web.elmblog.com/study/archives/000935.html http://web.elmblog.com/study/archives/000935.html Fri, 28 Jul 2006 00:34:12 +0900 Scientific calculator

科学計算用電卓

Degrees Radians Gradients
]]> http://web.elmblog.com/study/archives/javascript/000934.html http://web.elmblog.com/study/archives/javascript/000934.html JavaScript Fri, 28 Jul 2006 00:27:06 +0900 Calculator

簡易電卓

=

]]> http://web.elmblog.com/study/archives/javascript/000933.html http://web.elmblog.com/study/archives/javascript/000933.html JavaScript Thu, 27 Jul 2006 23:45:21 +0900