<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>PROJECT WIRED</title>
	<atom:link href="http://project-wired.net/?feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://project-wired.net</link>
	<description>やるせない徒然日常ブログ</description>
	<lastBuildDate>Sat, 02 Jan 2010 13:55:14 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>新年ゲーム福袋を買ってきました</title>
		<link>http://project-wired.net/?p=226</link>
		<comments>http://project-wired.net/?p=226#comments</comments>
		<pubDate>Sat, 02 Jan 2010 13:55:14 +0000</pubDate>
		<dc:creator>Catan</dc:creator>
				<category><![CDATA[ゲーム]]></category>
		<category><![CDATA[雑感]]></category>

		<guid isPermaLink="false">http://project-wired.net/?p=226</guid>
		<description><![CDATA[新年１発目になります。
今年もよろしくお願いいたしますm(_ _)m
さて、新年ということで買ってきました福袋！
普通にゲームショップでPS2ソフト10本入り2010円というやつを買ったあとにですね。
すごいのをみつけて [...]]]></description>
			<content:encoded><![CDATA[<p>新年１発目になります。<br />
今年もよろしくお願いいたしますm(_ _)m</p>
<p>さて、新年ということで買ってきました福袋！<br />
普通にゲームショップでPS2ソフト10本入り2010円というやつを買ったあとにですね。</p>
<p>すごいのをみつけてしまいましてですね。</p>
<p>思わず買ってしまったんですよ。</p>
<p>これを！↓<br />
<div id="attachment_224" class="wp-caption alignnone" style="width: 235px"><img src="http://project-wired.net/wp-content/uploads/2010/01/4e0b18b5cbcefa3fdb9d63eaa207df99-225x300.jpg" alt="PSソフトパック福袋(2010円)" title="PSソフトパック福袋(2010円)" width="225" height="300" class="size-medium wp-image-224" /><p class="wp-caption-text">PSソフトパック福袋(2010円)</p></div><br />
レジに持ってく時点でめっちゃ重かったです(笑</p>
<p>で、中をみたらこんな感じでした↓(笑) <br />
<div id="attachment_225" class="wp-caption alignnone" style="width: 310px"><img src="http://project-wired.net/wp-content/uploads/2010/01/8862a2d35afc8a0ca9d7341f01076104-300x225.jpg" alt="PSソフトパック福袋(2010円)の中身" title="PSソフトパック福袋(2010円)の中身" width="300" height="225" class="size-medium wp-image-225" /><p class="wp-caption-text">PSソフトパック福袋(2010円)の中身</p></div><br />
うーん、50本くらい入ってましたね！<br />
いつやるんだこの量のゲームっていう心の声はもちろん黙殺ですよ！</p>
<p>まあ、それで家に帰りまして、中を調べてみたら結果はこうでした↓</p>
<ol type="1">
<li>Beyond The Beyond</li>
<li>テニスの王子様</li>
<li>シャーマンキング スピリットオブシャーマンズ</li>
<li>NBA Live 96</li>
<li>ワールドサッカー 実況ウイニングイレブン3 ～World Cup France&#8217;98～</li>
<li>にとうしんでん</li>
<li>DRAGON BALL Z ULTIMATE BATTLE 22</li>
<li>ONE PIECE とびだせ海賊団！</li>
<li>アクアノートの休日</li>
<li>DX人生ゲーム</li>
<li>トゥルーラブストーリー</li>
<li>RPGツクール4</li>
<li>アルナムの牙</li>
<li>ギャロップレーサー2</li>
<li>ギャロップレーサー3</li>
<li>アーマードコア プロジェクトファンタズマ</li>
<li>機動戦士ガンダム 逆襲のシャア</li>
<li>ポポロクロイス物語</li>
<li>グランツーリスモ</li>
<li>グランツーリスモ2</li>
<li>スターオーシャン セカンドストーリー</li>
<li>筋肉番付VOL.3 ～最強のチャレンジャー誕生！～</li>
<li>テイルズ オブ ファンタジア</li>
<li>テイルズ オブ ディスティニー</li>
<li>ザ・コンビニ2 ～全国チェーン展開だ！～</li>
<li>みんなのGOLF</li>
<li>鉄拳2</li>
<li>鉄拳3</li>
<li>ゼロ・パイロット／銀翼の戦士</li>
<li>星で発見!! たまごっち</li>
<li>信長の野望・覇王伝</li>
<li>TOBAL NO.1</li>
<li>XI[sai]</li>
<li>FINAL FANTASY TACTICS</li>
<li>サイキックフォース</li>
<li>はじめの一歩</li>
<li>Dの食卓 コンプリートグラフィックス</li>
<li>CHASE THE EXPRESS</li>
<li>ツァイトガイスト</li>
<li>キャプテン翼 新たなる伝説・序章</li>
<li>ウンジャマ・ラミー</li>
<li>BOXER&#8217;S ROAD</li>
<li>音楽ツクールかなでーる2</li>
<li>ドラゴンクエストⅦ エデンの戦士たち</li>
<li>ZERO DIVIDE</li>
<li>スクリーン</li>
<li>第4次スーパーロボット大戦S</li>
<li>I.Q FINAL</li>
<li>A列車で行こう4</li>
<li>ARMORED CORE MASTER OF ARENA</li>
</ol>
<p>ちょうど50本でした～そりゃ重いですよね！(笑<br />
ちなみに私、根っからのセガサターンユーザだった為に、ほとんどダブリがないんですね(IQ FINALとXIがダブったくらいです)。<br />
逆に言えば、面白いゲームがさっぱり分からんということでもあります。<br />
まあ適当にやるのもいいんですが、出来ればこれが面白いよっていうソフトで絞りたいところなんですよね…。誰か教えてくれないかなあ…</p>
]]></content:encoded>
			<wfw:commentRss>http://project-wired.net/?feed=rss2&amp;p=226</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JavaScriptでDrag &amp; Drop(主要ブラウザ対応版)</title>
		<link>http://project-wired.net/?p=213</link>
		<comments>http://project-wired.net/?p=213#comments</comments>
		<pubDate>Sat, 19 Dec 2009 09:29:41 +0000</pubDate>
		<dc:creator>Catan</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[プログラミング]]></category>

		<guid isPermaLink="false">http://project-wired.net/?p=213</guid>
		<description><![CDATA[前の記事はこちら↓
JavaScriptでDrag &#38; Drop(たぶん標準準拠版)
JavaScriptでDrag &#38; Drop(IE版)
前回、前々回の記事で、標準準拠版、IE版のDrag &#38; [...]]]></description>
			<content:encoded><![CDATA[<p>前の記事はこちら↓</p>
<p><a href="http://project-wired.net/?p=139">JavaScriptでDrag &amp; Drop(たぶん標準準拠版)</a></p>
<p><a href="http://project-wired.net/?p=193">JavaScriptでDrag &amp; Drop(IE版)</a></p>
<p>前回、前々回の記事で、標準準拠版、IE版のDrag &amp; Dropのサンプルを載せました。<br />
今回は集大成として（大げさですね）、どちらにも対応するDrag &amp; Dropサンプルを載せたいと思います。</p>
<p>以下、ソースです↓</p>
<p>JavaScript(draganddrop.js)↓</p>
<pre class="brush: jscript;">
// Drog &amp; Drop Sample Standard &amp; IE Version

addEvent(window, 'load', init, false);

function init() {
    var sample = document.getElementById('sample');
    addEvent(sample, 'mouseover', mouseover, false);
    addEvent(sample, 'mouseout',  mouseout,  false);
}

function mouseover(evt) {
    var evt = getEvent(evt);
    var target = getTarget(evt);
    addEvent(target, 'mousedown', mousedown, false);
}

function mouseout(evt) {
    var evt = getEvent(evt);
    var target = getTarget(evt);
    removeEvent(target, 'mousedown', mousedown, false);
}

function mousedown(evt) {
    var evt = getEvent(evt);
    var target = getTarget(evt);
    this.ex = evt.clientX - parseInt(target.style.left);
    this.ey = evt.clientY - parseInt(target.style.top);
    addEvent(target, 'mousemove', mousemove, false)
    addEvent(target, 'mouseup',   mouseup,   false)
}

function mousemove(evt) {
    var evt = getEvent(evt);
    var target = getTarget(evt);
    var dx = evt.clientX - this.ex;
    var dy = evt.clientY - this.ey;
    if(dx &lt; 0) {
        dx = 1;
    }
    if(dy &lt; 0) {
        dy = 1;
    }
    target.style.left = dx + 'px';
    target.style.top  = dy + 'px';
}

function mouseup(evt) {
    var evt = evt || window.event;
    var target = getTarget(evt);
    removeEvent(target, 'mousemove', mousemove, false);
    removeEvent(target, 'mouseup',   mouseup,   false);
}

// ---------------------------------------
// Standard &amp; IE イベントハンドラ共通処理
// ---------------------------------------
function addEvent(obj, evtType, func, cap) {
    if (obj.addEventListener) {
        obj.addEventListener(evtType, func, cap);
    }
    else if (obj.attachEvent) {
        obj.attachEvent('on' + evtType, func);
    }
}

function removeEvent(obj, evtType, func, cap) {
    if (obj.removeEventListener) {
        obj.removeEventListener(evtType, func, cap);
    }
    else if (obj.detachEvent) {
        obj.detachEvent('on' + evtType, func);
    }
}

function getEvent(evt) {
    if (evt) {
        return evt;
    }
    else if (window.event) {
        return window.event;
    }
}

function getTarget(evt) {
    if (evt.target) {
        return evt.target;
    }
    else if (evt.srcElement) {
        return evt.srcElement;
    }
}
</pre>
<p>HTML(draganddrop.html)↓</p>
<pre class="brush: xml;">
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;
&quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
        &lt;meta http-equiv=&quot;Content-Script-Type&quot; content=&quot;text/javascript&quot;&gt;
        &lt;meta http-equiv=&quot;Content-Style-Type&quot; content=&quot;text/css&quot;&gt;
        &lt;title&gt;Drag &amp;amp; Drop Sample&lt;/title&gt;
        &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;draganddrop.css&quot; media=&quot;all&quot; charset=&quot;utf-8&quot;&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;draganddrop.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;

        &lt;div id=&quot;sample&quot; style=&quot;top:0px; left:0px;&quot;&gt;Sample&lt;/div&gt;

    &lt;/body&gt;
&lt;/html&gt;
</pre>
<p>CSS(draganddrop.css)↓</p>
<pre class="brush: css;">
/* Drog &amp; Drop Sample css */

#sample {
    position: absolute;
    z-index: 900;
    background-color: orange;
    border: 1px solid black;
    overflow: hidden;
    width: 100px;
    height: 40px;
}
</pre>
<p>実際に動作しているページはこちらです↓<br />
<a href="http://program-place.project-wired.net/draganddrop/draganddrop.html">http://program-place.project-wired.net/draganddrop/draganddrop.html</a><br />
※注 大抵のブラウザで動きます。<br />
動作確認済みブラウザ<br />
・Firefox 3.5<br />
・Google Chrome 3.0<br />
・Opera 10.0<br />
・Windows Safari 4.0<br />
・Internet Explorer 6.0<br />
・Internet Explorer 7.0</p>
<p>一応、ソースも置いときます(JS内は色々コメントを追加しています)↓<br />
<a href="http://program-place.project-wired.net/draganddrop/draganddrop.zip">draganddrop.zip</a></p>
<p>今回の対応で、JavaScriptにイベントハンドラ共通関数を作成しています。<br />
関数の動作例としては、addEventListener関数が存在すればaddEventListenerを使用し、なければattachEventを使用するといったものです。<br />
まあ地味にその共通関数のせいでソース行数が増えます…。IEに対応するためだけに約2倍…。<br />
内容の解説は、前の記事(上の方にリンクあります)を参照してください（っていっても、あんまりちゃんと書いてませんが）。</p>
<p>しかし、とりあえず書いてはみたものの、ちゃんとドラッグアンドドロップを使う場合はフレームワーク(YUIとか)を使ったほうがいいと思います。クロスブラウザ対応はめんどくさいですからね。<br />
まあでもフレームワークはJavaScriptを直で書くより遅いというし、バランスが大事かもです。</p>
<p>さて、Drag &amp; Dropのサンプル作成の理由は「作ったことなかったから」だったんですけど、なかなかに勉強になりました。好奇心って大事ですね。<br />
ではでは。</p>
]]></content:encoded>
			<wfw:commentRss>http://project-wired.net/?feed=rss2&amp;p=213</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JavaScriptでDrag &amp; Drop(IE版)</title>
		<link>http://project-wired.net/?p=193</link>
		<comments>http://project-wired.net/?p=193#comments</comments>
		<pubDate>Thu, 26 Nov 2009 13:32:43 +0000</pubDate>
		<dc:creator>Catan</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[プログラミング]]></category>

		<guid isPermaLink="false">http://project-wired.net/?p=193</guid>
		<description><![CDATA[前回記事↓
JavaScriptでDrag &#038; Drop(たぶん標準準拠版)
のつづきです。
IEのシェアが10%くらいになってくれればIE版なんて作る必要はないのですが、悲しいことにそうもいかないのでIEで動 [...]]]></description>
			<content:encoded><![CDATA[<p>前回記事↓<br />
<a href="http://project-wired.net/?p=139">JavaScriptでDrag &#038; Drop(たぶん標準準拠版)</a><br />
のつづきです。</p>
<p>IEのシェアが10%くらいになってくれればIE版なんて作る必要はないのですが、悲しいことにそうもいかないのでIEで動作するサンプルを作成しました。<br />
一応、IE6, IE7, IE8で動作確認をしています。</p>
<p>とりあえずIE版Drag &amp; Dropの全ソースです↓</p>
<p>JavaScript(draganddropie.js)↓</p>
<pre class="brush: jscript;">
// Drog &amp; Drop Sample Internet Explorer Version

window.attachEvent('onload',init);

function init() {
    var sample = document.getElementById('sample');
    sample.attachEvent('onmouseover', mouseover);
    sample.attachEvent('onmouseout',  mouseout);
}

function mouseover() {
    window.event.srcElement.attachEvent('onmousedown', mousedown);
}

function mouseout() {
    window.event.srcElement.detachEvent('onmousedown', mousedown);
}

function mousedown() {
    var evt = window.event;
    this.ex = evt.clientX - parseInt(evt.srcElement.style.left);
    this.ey = evt.clientY - parseInt(evt.srcElement.style.top);
    evt.srcElement.attachEvent('onmousemove', mousemove);
    evt.srcElement.attachEvent('onmouseup',   mouseup);
}

function mousemove() {
    var evt = window.event;
    var dx = evt.clientX - this.ex;
    var dy = evt.clientY - this.ey;
    if (dx &lt; 0) dx = 1;
    if (dy &lt; 0) dy = 1;
    evt.srcElement.style.left = dx + 'px';
    evt.srcElement.style.top  = dy + 'px';
}

function mouseup() {
    var evt = window.event;
    evt.srcElement.detachEvent('onmousemove', mousemove);
    evt.srcElement.detachEvent('onmouseup',   mouseup);
}
</pre>
<p>HTML(draganddropie.html)↓</p>
<pre class="brush: xml;">
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;
&quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
        &lt;meta http-equiv=&quot;Content-Script-Type&quot; content=&quot;text/javascript&quot;&gt;
        &lt;meta http-equiv=&quot;Content-Style-Type&quot; content=&quot;text/css&quot;&gt;
        &lt;title&gt;Drag &amp;amp; Drop Sample&lt;/title&gt;
        &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;draganddropie.css&quot; media=&quot;all&quot; charset=&quot;utf-8&quot;&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;draganddropie.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;

        &lt;div id=&quot;sample&quot; style=&quot;top:0px; left:0px;&quot;&gt;Sample&lt;/div&gt;

    &lt;/body&gt;
&lt;/html&gt;
</pre>
<p>CSS(draganddropie.css)↓</p>
<pre class="brush: css;">
/* Drog &amp; Drop Sample css */

#sample {
    position: absolute;
    z-index: 900;
    background-color: orange;
    border: 1px solid black;
    overflow: hidden;
    width: 100px;
    height: 40px;
}
</pre>
<p>実際に動作しているページはこちらです↓<br />
<a href="http://program-place.project-wired.net/draganddropie/draganddropie.html">http://program-place.project-wired.net/draganddropie/draganddropie.html</a><br />
※注 前回のときとは違い、今回はIEでしか動きません</p>
<p>一応、ソースも置いておきます↓<br />
<a href="http://program-place.project-wired.net/draganddropie/draganddropie.zip">draganddropie.zip</a></p>
<p>ちなみにJavaScriptの処理の流れは前回と同様ですが、IEでは使用できる関数が違います。</p>
<p>標準準拠版とIE版の違いは以下の点です。</p>
<p>・イベントリスナ登録関数の違い<br />
addEventListener(標準) → attachEvent(IE)</p>
<p>・イベントリスナ解除関数の違い<br />
removeEventListener(標準) → detachEvent(IE)</p>
<p>・発生イベント取得方法の違い<br />
addEventListnerで登録した関数実行時、第一引数に発生イベントが渡される(標準) → window.event(IE)</p>
<p>・発生イベントのタグ取得方法の違い<br />
event.target(標準) → window.event.srcElement(IE)</p>
<p>
はい、非常にめんどくさいですね…。そもそもIEのせいで覚える手間が約２倍になるというのが何とも…。ホントIEのシェアが0%になればいいのに！(本音)</p>
<p>さて、標準準拠版、IE版ときましたので次回は両方に対応しているサンプルを載せることにします。</p>
]]></content:encoded>
			<wfw:commentRss>http://project-wired.net/?feed=rss2&amp;p=193</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>JavaScriptでDrag &amp; Drop(たぶん標準準拠版)</title>
		<link>http://project-wired.net/?p=139</link>
		<comments>http://project-wired.net/?p=139#comments</comments>
		<pubDate>Sun, 22 Nov 2009 13:52:17 +0000</pubDate>
		<dc:creator>Catan</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[プログラミング]]></category>

		<guid isPermaLink="false">http://project-wired.net/?p=139</guid>
		<description><![CDATA[Drag &#38; Dropのサンプル書いたので、忘れないうちにメモ。
動作確認を行ったブラウザは、Firefox 3.5, Chrome 3.0, Opera 10.0, Safari 4.0になります(全部Wind [...]]]></description>
			<content:encoded><![CDATA[<p>Drag &amp; Dropのサンプル書いたので、忘れないうちにメモ。<br />
動作確認を行ったブラウザは、Firefox 3.5, Chrome 3.0, Opera 10.0, Safari 4.0になります(全部Windows)。<br />
ちなみにIEでは動きません(一応、標準準拠版ですから)。IE版についてはまた別記事で書く予定です。</p>
<p>とりあえずサンプルの全ソースです。</p>
<p>JavaScript(draganddropstandard.js)↓</p>
<pre class="brush: jscript;">
// Drog &amp; Drop Sample Standard Version

window.addEventListener('load', init, false);

function init() {
    var sample = document.getElementById('sample');
    sample.addEventListener('mouseover', mouseover, false);
    sample.addEventListener('mouseout',  mouseout,  false);
}

function mouseover(evt) {
    evt.target.addEventListener('mousedown', mousedown, false);
}

function mouseout(evt) {
    evt.target.removeEventListener('mousedown', mousedown, false);
}

function mousedown(evt) {
    this.ex = evt.clientX - parseInt(evt.target.style.left);
    this.ey = evt.clientY - parseInt(evt.target.style.top);
    evt.target.addEventListener('mousemove', mousemove, false);
    evt.target.addEventListener('mouseup',   mouseup,   false);
}

function mousemove(evt) {
    var dx = evt.clientX - this.ex;
    var dy = evt.clientY - this.ey;
    if(dx &lt; 0) {
        dx = 1;
    }
    if(dy &lt; 0) {
        dy = 1;
    }
    evt.target.style.left = dx + 'px';
    evt.target.style.top  = dy + 'px';
}

function mouseup(evt) {
    evt.target.removeEventListener('mousemove', mousemove, false);
    evt.target.removeEventListener('mouseup',   mouseup,   false);
}
</pre>
<p>
HTML(draganddropstandard.html)↓</p>
<pre class="brush: xml;">
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;
&quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
        &lt;meta http-equiv=&quot;Content-Script-Type&quot; content=&quot;text/javascript&quot;&gt;
        &lt;meta http-equiv=&quot;Content-Style-Type&quot; content=&quot;text/css&quot;&gt;
        &lt;title&gt;Drag &amp;amp; Drop Sample&lt;/title&gt;
        &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;draganddropstandard.css&quot; media=&quot;all&quot; charset=&quot;utf-8&quot;&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;draganddropstandard.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;

        &lt;div id=&quot;sample&quot; style=&quot;top:0px; left:0px;&quot;&gt;Sample&lt;/div&gt;

    &lt;/body&gt;
&lt;/html&gt;
</pre>
<p>
CSS(draganddropstandard.css)↓</p>
<pre class="brush: css;">
/* Drog &amp;amp; Drop Sample css */

#sample {
    position: absolute;
    z-index: 900;
    background-color: orange;
    border: 1px solid black;
    overflow: hidden;
    width: 100px;
    height: 40px;
}
</pre>
<p>実際に動作しているページはこちらです↓<br />
<a href="http://program-place.project-wired.net/draganddropstandard/draganddropstandard.html">http://program-place.project-wired.net/draganddropstandard/draganddropstandard.html</a><br />
※注 はじめのほうで言っていますが、IEでは動きません。Firefox,Chrome,Safari,Operaあたりでどうぞ</p>
<p>一応、ソースも置いておきます↓<br />
<a href="http://program-place.project-wired.net/draganddropstandard/draganddropstandard.zip">draganddropstandard.zip</a></p>
<p>JavaScriptでDrag &amp; Dropの流れは以下のようになります。</p>
<p>load時に、init関数を実行。<br />
↓<br />
init関数内で、id=&#8221;sample&#8221;のdivに対してmouseover,mouseout時のイベントリスナを登録。<br />
※mouseover：マウスポインタがdivに触れたときに発生するイベント。上記イベントリスナ登録により、mouseover関数が実行される。<br />
※mouseout：マウスポインタがdivから外れたときに発生するイベント。上記イベントリスナ登録により、mouseout関数が実行される。<br />
↓<br />
マウスオーバー(mouseover)時、mousedown時のイベントリスナを登録<br />
※mousedown：マウスを左クリックしたときに発生するイベント。上記イベントリスナ登録により、mousedown関数が実行される。<br />
↓<br />
左クリック(mousedown)時、mousedown関数が実行され、「マウスと左上の点との差分のX座標」と「マウスと左上の点との差分のY座標」を取得。<br />
その後、mousemove,mouseup時のイベントリスナを登録。<br />
※mousemove：マウスが動かされたときに発生するイベント。上記イベントリスナ登録により、mousemove関数が実行される。<br />
※mouseup：押していたマウスボタンを離したときに発生するイベント。上記イベントリスナ登録により、mouseup関数が実行される。<br />
↓<br />
マウスを動かした(mousemove)時、mousemove関数が実行され、「イベント発生時のX座標 &#8211; mousedown時に取得したX座標」と「イベント発生時のY座標 &#8211; mousedown時に取得したY座標」にdivを移動する。<br />
↓<br />
押したままにしていた左クリックを離した(mouseup)時、mouseup関数が実行され、mousemove,mouseup時のイベントリスナが解除される。<br />
↓<br />
id=&#8221;sample&#8221;のdivタグから、マウスを離した(mouseout)時、mouseout関数が実行され、mousedown時のイベントリスナが解除される。</p>
<p>ちなみにCSSが外部ファイル化されているのに、以下のdivタグではインラインスタイルが使われています↓</p>
<pre class="brush: xml;">
&lt;div id=&quot;sample&quot; style=&quot;top:0px; left:0px;&quot;&gt;Sample&lt;/div&gt;
</pre>
<p>これはなぜかというと、上記JavaScriptサンプルでインラインスタイル要素の取得を使用しているためです(style.leftとstyle.top)。<br />
まあインライン以外のCSSをうまく読み取る方法が思いつかなかっただけなんですが。そう、これが私の限界(いまのところ)。<br />
上記サンプルは参考程度に使っていただくのが良いと思います。使う人がいるのか分かりませんが…。</p>
<p>
さて、次回は(仕方なく作った)IE版についてのサンプルを載せようと思います。<br />
→2009/11/26 追記 IE版書きました↓<br />
<a href="http://project-wired.net/?p=193">JavaScriptでDrag &#038; Drop(IE版)</a></p>
<p>
ちなみにどうでもいい話↓<br />
今回タイトルつけるにあたり、ドラッグアンドドロップとDrag &amp; Dropのどっちが多いかググったら、<br />
ドラッグアンドドロップ：約 218,000 件<br />
Drag &amp; Drop：約 111,000 件<br />
となってました。なので少ないほうにしました。いつだって少数派が好きです。<br />
がんばれDrag &amp; Drop！</p>
]]></content:encoded>
			<wfw:commentRss>http://project-wired.net/?feed=rss2&amp;p=139</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>ピザハットのチーズくんの言わされてる感がすごい</title>
		<link>http://project-wired.net/?p=156</link>
		<comments>http://project-wired.net/?p=156#comments</comments>
		<pubDate>Sat, 31 Oct 2009 13:02:19 +0000</pubDate>
		<dc:creator>Catan</dc:creator>
				<category><![CDATA[雑感]]></category>
		<category><![CDATA[食べもの]]></category>

		<guid isPermaLink="false">http://project-wired.net/?p=156</guid>
		<description><![CDATA[ピザハットで「とある科学の超電磁砲」キャンペーン中です！2009/11/8まで！
http://www.pizzahut.jp/whatsnew/142_091013_rail/
レールガンの壁紙が欲しかったので、ピザハ [...]]]></description>
			<content:encoded><![CDATA[<p>ピザハットで「とある科学の超電磁砲」キャンペーン中です！2009/11/8まで！<br />
<a href="http://www.pizzahut.jp/whatsnew/142_091013_rail/">http://www.pizzahut.jp/whatsnew/142_091013_rail/</a></p>
<p>レールガンの壁紙が欲しかったので、ピザハットクラブに登録してみました。<br />
で、ピザハットクラブメールというメールマガジンが届くようになったのですが、涙ぐましい努力のあとがうかがえる文がありました。</p>
<p>以下、引用です。</p>
<pre>
=======================引用ここから==========================
ピザハットのマスコット、チーズくんです♪
テレビでは秋の新番組が続々とスタートしてるけど、みんなは何見てる？

ぼくが注目してるのはね、「とある科学の超電磁砲〈レールガン〉」
超能力を持つ女の子たちの活躍が、可愛いくてかっこいいんだ☆

チーズちゃん「それよりお兄ちゃん、なんか隠してるでしょー。
あっ！もしかして、私のピザ食べた！？」

おっとバレたか！おいしそうだったからつい食べちゃったんだよね。
いやぁ、チーズちゃんのカンのよさは超能力並みだね～☆

さて、ピザハットでは今「とある科学の超電磁砲〈レールガン〉」の
アニメ化を記念して、うれしいキャンペーンを実施中だよ！
番組と一緒に、こっちにもぜひ注目してね！
=======================引用ここまで==========================
</pre>
<p>
絶対言わされてるだろチーズくん…。<br />
普通「とある科学の超電磁砲〈レールガン〉」は出てこないよ…。深夜だぞ。</p>
<p>ちなみにチーズくんはこんなキャラです↓<br />
<a href="http://www.pizzahut.jp/kids/">http://www.pizzahut.jp/kids/</a></p>
<p>涙ぐましい努力のあとが見えるチーズくんが所属するピザハットはこちら↓<br />
<a href="http://www.pizzahut.jp/">http://www.pizzahut.jp/</a><br />
しかしピザハットの回し者のようだ。別にいいか。</p>
<p>ちなみに個人的なオススメはきのこチキンマヨネーズピザです。<br />
マヨ好きは食べるべき！</p>
]]></content:encoded>
			<wfw:commentRss>http://project-wired.net/?feed=rss2&amp;p=156</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JavaScriptのcookie関連関数書いた</title>
		<link>http://project-wired.net/?p=141</link>
		<comments>http://project-wired.net/?p=141#comments</comments>
		<pubDate>Wed, 28 Oct 2009 12:25:10 +0000</pubDate>
		<dc:creator>Catan</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[プログラミング]]></category>

		<guid isPermaLink="false">http://project-wired.net/?p=141</guid>
		<description><![CDATA[cookie関連のコード書くたびに毎回cookieのことについて調べたりしています（覚えられないんです）。
どう考えても効率が悪いので、cookie関連の関数を書いておくことにします。
もちろん、これを書くのにまたcoo [...]]]></description>
			<content:encoded><![CDATA[<p>cookie関連のコード書くたびに毎回cookieのことについて調べたりしています（覚えられないんです）。<br />
どう考えても効率が悪いので、cookie関連の関数を書いておくことにします。<br />
もちろん、これを書くのにまたcookieのことについて調べたのは言うまでもありません…。</p>
<p>cookie登録関数↓</p>
<pre class="brush: jscript;">
/**
 * cookieを登録する
 *
 * @param{String} cookie name
 * @param{String} cookie value
 * @param{String} cookie path
 * @param{int}    cookie time ex:1000 * 60 * 60 * 24 * 365(有効期限1年の場合)
 *                指定しない場合はsession cookie
 * @return void
 */
function setcookie(cookie_name, cookie_value, cookie_path, cookie_time) {
    var value = encodeURIComponent(cookie_value);

    // cookie用文字列に整形
    var cookie = [cookie_name];
    cookie.push(&quot;=&quot;);
    cookie.push(value);
    cookie.push(&quot;; path=&quot;);
    cookie.push(cookie_path);
    cookie.push(&quot;;&quot;);

    if (cookie_time) {
        var exp = new Date();
        exp.setTime(exp.getTime() + cookie_time);
        cookie.push(&quot; expires=&quot;);
        cookie.push(exp.toGMTString());
    }

    // cookieを登録する
    document.cookie = cookie.join(&quot;&quot;);
}
</pre>
<p>cookie取得関数↓</p>
<pre class="brush: jscript;">
/**
 * cookieを取得する
 *
 * @param{String} cookie name
 * @return{String} cookie value or @return undefined
 */
function getcookie(cookie_name) {
    var regexp = new RegExp('; ' + cookie_name + '(=([^;]*))?;');
    var match  = ('; ' + document.cookie + ';').match(regexp);

    return match ? match[2] : undefined;
}
</pre>
<p>cookie削除関数↓</p>
<pre class="brush: jscript;">
/**
 * cookieを削除する
 *
 * @param{String} cookie name
 * @param{String} cookie path
 * @return void
 */
function deletecookie(cookie_name, cookie_path) {
    // cookie用文字列に整形
    var cookie = [cookie_name];
    cookie.push(&quot;=; path=&quot;);
    cookie.push(cookie_path);
    cookie.push(&quot;; expires=Fri, 31-Dec-1999 23:59:59 GMT&quot;);

    // cookieを削除
    document.cookie = cookie.join(&quot;&quot;);
}
</pre>
<p>動作サンプルはこちらです↓<br />
<a href="http://program-place.project-wired.net/cookie/cookie.html">http://program-place.project-wired.net/cookie/cookie.html</a></p>
<p>ソースも置いておきます↓<br />
<a href="http://program-place.project-wired.net/cookie/cookie.zip">cookie.zip</a></p>
<p>動作確認ブラウザ↓<br />
・Mozilla Firefox 3.5<br />
・Google Chrome 3.0<br />
・Internet Explorer 7.0<br />
・Windows Safari 4.0<br />
・Opera 10.0</p>
<p>
これでとりあえず車輪の再発明みたいなことしなくてすむかな。</p>
]]></content:encoded>
			<wfw:commentRss>http://project-wired.net/?feed=rss2&amp;p=141</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Syntax Highlighter for WordPressを入れてみた</title>
		<link>http://project-wired.net/?p=119</link>
		<comments>http://project-wired.net/?p=119#comments</comments>
		<pubDate>Tue, 27 Oct 2009 11:16:48 +0000</pubDate>
		<dc:creator>Catan</dc:creator>
				<category><![CDATA[C++]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Perl]]></category>
		<category><![CDATA[プログラミング]]></category>

		<guid isPermaLink="false">http://project-wired.net/?p=119</guid>
		<description><![CDATA[ちょっと前に、google-code-prettify for wordpressを入れたことを書きました↓
google-code-prettifyの導入
まあ色づけはいいんですが、行番号が出ないのが致命的。
あと、自 [...]]]></description>
			<content:encoded><![CDATA[<p>ちょっと前に、google-code-prettify for wordpressを入れたことを書きました↓<br />
<a href="http://project-wired.net/?p=39">google-code-prettifyの導入</a></p>
<p>まあ色づけはいいんですが、行番号が出ないのが致命的。<br />
あと、自分のとこの環境だけかもしれないんですが、「>」や「<」が消えてしまうので、不便（むしろこれも致命的）。</p>
<p>ということで、そこらへんをすべて解決してくれる(と思う)</p>
<p><a href="http://wppluginsj.sourceforge.jp/syntax-highlighter/" target="_blank">Syntax Highlighter for WordPress</a>を入れました。</p>
<p>使い方はソースコードを[言語名]～[/言語名]で囲うだけです。<br />
perlなら［perl］～［/perl］([と]を大文字にしてます。本来は半角)と囲うだけですね。</p>
<p>とりあえず（また）色がつくかFizzBuzz問題でチェック！</p>
<p>Perl</p>
<pre class="brush: perl;">
foreach (1..100) {
    if ($_ % 3 == 0 &amp;&amp; $_ % 5 == 0) {
        print &quot;FizzBuzz\n&quot;;
    }
    elsif ($_ % 3 == 0) {
        print &quot;Fizz\n&quot;;
    }
    elsif ($_ % 5 == 0) {
        print &quot;Buzz\n&quot;;
    }
    else {
        print &quot;$_\n&quot;;
    }
}
</pre>
<p>JavaScript</p>
<pre class="brush: jscript;">
for (var i = 1; i &lt;= 100; i++) {
    if (i % 3 == 0 &amp;&amp; i % 5 == 0) {
        document.write(&quot;FizzBuzz&lt;br&gt;&quot;);
     }
    else if (i % 3 == 0) {
        document.write(&quot;Fizz&lt;br&gt;&quot;);
    }
    else if (i % 5 == 0) {
        document.write(&quot;Buzz&lt;br&gt;&quot;);
    }
    else {
        document.write(i);
        document.write('&lt;br&gt;');
    }
}
</pre>
<p>Java</p>
<pre class="brush: java;">
public class fizzbuzz {

    public static void main(String[] args) {
        for (int i = 0; i &lt;= 100; i++) {
            if (i % 3 == 0 &amp;&amp; i % 5 == 0) {
                System.out.println(&quot;FizzBuzz&quot;);
            }
            else if (i % 3 == 0) {
                System.out.println(&quot;Fizz&quot;);
            }
            else if (i % 5 == 0) {
                System.out.println(&quot;Buzz&quot;);
            }
            else {
                System.out.println(i);
            }
        }
    }
}
</pre>
<p>C++</p>
<pre class="brush: cpp;">
#include &lt;iostream&gt;
using namespace std;

int main() {
    for (int i = 0; i &lt;= 100; i++) {
        if (i % 3 == 0 &amp;&amp; i % 5 == 0) {
            cout &lt;&lt; &quot;FizzBuzz\n&quot;;
        }
        else if (i % 3 == 0) {
            cout &lt;&lt; &quot;Fizz\n&quot;;
        }
        else if (i % 5 == 0) {
            cout &lt;&lt; &quot;Buzz\n&quot;;
        }
        else {
            cout &lt;&lt; i &lt;&lt; &quot;\n&quot;;
        }
    }
}
</pre>
<p>おー、色と行がついてるー。<br />
「<」「>」もちゃんと表示されてますね。満足満足。</p>
]]></content:encoded>
			<wfw:commentRss>http://project-wired.net/?feed=rss2&amp;p=119</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Windows 7 バーガー食べてきた</title>
		<link>http://project-wired.net/?p=96</link>
		<comments>http://project-wired.net/?p=96#comments</comments>
		<pubDate>Sun, 25 Oct 2009 12:04:19 +0000</pubDate>
		<dc:creator>Catan</dc:creator>
				<category><![CDATA[雑感]]></category>
		<category><![CDATA[Windows 7]]></category>
		<category><![CDATA[食べもの]]></category>

		<guid isPermaLink="false">http://project-wired.net/?p=96</guid>
		<description><![CDATA[バーガーキングでWindows 7 発売記念バーガーが食べられるというので、秋葉原店に食べに行ってきました！（一昨日の話ですが）　ちなみに28日(水)までですよ！
先着30名様までは特別価格の777円という話ですが、金曜 [...]]]></description>
			<content:encoded><![CDATA[<p>バーガーキングで<a href="http://www.burgerkingjapan.co.jp/news/win7.php" target="_blank">Windows 7 発売記念バーガー</a>が食べられるというので、秋葉原店に食べに行ってきました！（一昨日の話ですが）　ちなみに28日(水)までですよ！</p>
<p>先着30名様までは特別価格の777円という話ですが、金曜の夜7時とかだったので普通に定価で買いました。1450円！ 高い！ しかも30分待ち！ でもここで挫けたら何をしにきたか分からなかったので注文しました。<br />
<br />
で、30待ちなので店内入って混んでるなあ…と思いきやどこもかしこもWindow7バーガー祭り（笑）。なんだろ、他の人のバーガー見ててもあの量で笑えました。</p>
<p>あ、ちなみにレシート(↓画像)貰ったんですが、Windows 7 WHOPPERという商品はないらしいです。</p>
<div id="attachment_97" class="wp-caption alignnone" style="width: 235px"><img src="http://project-wired.net/wp-content/uploads/2009/10/IMG_0005-225x300.jpg" alt="Winodw 7 WHOPPER 注文レシート" title="Winodw 7 WHOPPER 注文レシート" width="225" height="300" class="size-medium wp-image-97" /><p class="wp-caption-text">Winodw 7 WHOPPER 注文レシート</p></div>
<p>5 Add ワッパーパテとか無理やり商品まとめて販売しました感が満載。<br />
てゆうかこれ、もしかして普段でも頼めば可能なんでしょうか？　まあ絶対にやらないほうがいいと思いますが（笑</p>
<p>
友人と一緒に行ったので、周りで繰り広げられているWindow 7 WHOPPER祭りとかiPhoneのこととか話しているうちに私のWindow 7 WHOPPERがやってきました！</p>
<p>とりあえずiPhoneと比べてみた↓</p>
<div id="attachment_98" class="wp-caption alignnone" style="width: 310px"><img src="http://project-wired.net/wp-content/uploads/2009/10/IMG_0007-300x225.jpg" alt="Windows 7 WHOPPERとiPhone比較" title="Windows 7 WHOPPERとiPhone比較" width="300" height="225" class="size-medium wp-image-98" /><p class="wp-caption-text">Windows 7 WHOPPERとiPhone比較</p></div>
<p>セットメニューと撮ってみた↓(こうみるとサイズが大きいの分かりにくいですね)</p>
<div id="attachment_99" class="wp-caption alignnone" style="width: 310px"><img src="http://project-wired.net/wp-content/uploads/2009/10/IMG_0008-300x225.jpg" alt="Windows 7 WHOPPERとセットメニュー" title="Windows 7 WHOPPERとセットメニュー" width="300" height="225" class="size-medium wp-image-99" /><p class="wp-caption-text">Windows 7 WHOPPERとセットメニュー</p></div>
<p>その後、袋開けてみましたー。</p>
<div id="attachment_100" class="wp-caption alignnone" style="width: 235px"><img src="http://project-wired.net/wp-content/uploads/2009/10/IMG_0011-225x300.jpg" alt="Windows 7 WHOPPER 斜め上から" title="Windows 7 WHOPPER 斜め上から" width="225" height="300" class="size-medium wp-image-100" /><p class="wp-caption-text">Windows 7 WHOPPER 斜め上から</p></div>
<div id="attachment_101" class="wp-caption alignnone" style="width: 310px"><img src="http://project-wired.net/wp-content/uploads/2009/10/IMG_0013-300x225.jpg" alt="Windows 7 WHOPPER 真横から" title="Windows 7 WHOPPER 真横から" width="300" height="225" class="size-medium wp-image-101" /><p class="wp-caption-text">Windows 7 WHOPPER 真横から</p></div>
<p>なんだろ、これはもう笑うしかないと思いましたね(笑<br />
他の人の反応も完全に似たり寄ったりだったので、自分はそんなリアクションしないぜ、と思っていたものの無理でした。</p>
<p>で、まあ、とりあえず、このままかぶりつけるのかやってみましたが、肉4枚くらいしか噛めなかったので、肉2枚はずしてほおばって食べました（邪道だったかもしれません）<br />
はい、1口で分かりましたが、本当に肉の味しかしません。<br />
半分くらい食べたあたりで、塩かケチャップがすごい非常に欲しくなりました。てゆうか必須ですこれ。。<br />
その後、きつかったものの、パテ2枚外したWindows 5 WHOPPERはなんとか食べきりました。普段から量食べるほうではないのできつかったです。<br />
※のこり2枚のパテは友人がおいしくいただきました。（味がないとか文句いってたような気もしますが）</p>
<p>そうそう、Windows 7 WHOPPERも例に漏れず、商品写真の方が巨大でしたが、実物見て小さいのにほっとしたのは新しい体験でした。<br />
しかし、一人で記念バーガー食べていた人も結構いたけど、すごいなあ…。</p>
<p>ちなみに途中経過の画像がないのは、手がベタベタになったからです。<br />
てりやきバーガーですら、ベタベタにする能力を持つ私に写真撮るのは無理でした。悲しい。</p>
]]></content:encoded>
			<wfw:commentRss>http://project-wired.net/?feed=rss2&amp;p=96</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ザ ハウス オブ ザ デッド オーバーキルの感想</title>
		<link>http://project-wired.net/?p=85</link>
		<comments>http://project-wired.net/?p=85#comments</comments>
		<pubDate>Tue, 20 Oct 2009 16:58:21 +0000</pubDate>
		<dc:creator>Catan</dc:creator>
				<category><![CDATA[Wii]]></category>
		<category><![CDATA[ゲーム]]></category>

		<guid isPermaLink="false">http://project-wired.net/?p=85</guid>
		<description><![CDATA[
ゲーム機：Wii
評価：Ｄ(1人プレイ時)
評価：Ｃ(2人プレイ時)
(最高S～最低E)
セガ社員の方が、ファミ通レビューALL6点でぶちきれていましたが、私から言わせればセガはHOUSE OF THE DEAD(以下 [...]]]></description>
			<content:encoded><![CDATA[<p><iframe src="http://rcm-jp.amazon.co.jp/e/cm?t=project-wired-22&#038;o=9&#038;p=8&#038;l=as1&#038;asins=B002DR46LM&#038;fc1=000000&#038;IS2=1&#038;lt1=_blank&#038;m=amazon&#038;lc1=0000FF&#038;bc1=000000&#038;bg1=FFFFFF&#038;f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>
<p>ゲーム機：Wii<br />
評価：Ｄ(1人プレイ時)<br />
評価：Ｃ(2人プレイ時)<br />
(最高S～最低E)</p>
<p>セガ社員の方が、ファミ通レビューALL6点で<a href="http://blog.livedoor.jp/jin115/archives/51564841.html" target="_blank">ぶちきれていました</a>が、私から言わせればセガはHOUSE OF THE DEAD(以下HOD)のことが分かってない！分かってないよセガ！と言いたい。</p>
<p>ちなみにファミ通のレビューは見てないので何ともいえないんですが、HODファンならもっと点が低くなったと思います。</p>
<p>でも、HODシリーズが初めてで、ムービーが好きで、アメリカンテイストが嫌いじゃない(Fuck言う回数がやたら多かったりね)なら、面白いんだと思います。現にHODシリーズをほとんどやったことない友人とプレイしたんですが楽しそうでした。まぁ私もムービー嫌いじゃないんで、そこそこ楽しかったです。なにか違和感を感じていたものの。</p>
<p>で、改めてHODシリーズをやりこんでいる別の友人と一緒にプレイしたところ、さきほどの違和感の正体が色々分かりました。以下。</p>
<p>・ボスが弱すぎる。HODのボスっていったら、「え、やべぇボス超強ぇ、こんなん無理じゃん、どうすればいいんだよ」とか思いながら連コインとかのはずなのに(またそれが楽しい)。</p>
<p>・アーケードで出てないからのせいでしょうけど、あんなに長いムービーはよくよく考えたらいらない。しかも飛ばせない。いやもしかしたら飛ばせるのかもしれないですけど、全ボタン押して飛ばせなかった時点で飛ばせないことと同義。</p>
<p>・銃をSHOPで買うシステムとか全くもっていらない。ステージで手に入れるのが楽しかったのに。</p>
<p>・ラスボスで銃が最強の銃に変わるとかハァ？て感じです。それがアメリカテイストなのかもしれませんが。</p>
<p>
ああ、そういえばExtraとかいうのがありましたが、本編があまりにつまらなかった(攻略性がない)のでやっていません。<br />
一人でプレイしたいとは思わないゲームでしたねぇ。。。<br />
つーか、HODって名乗らなければここまで批判しなかったのに。まあHODじゃなかったら買ってないですが(笑</p>
<p>
THE HOUSE OF THE DEAD 5、まだー？</p>
]]></content:encoded>
			<wfw:commentRss>http://project-wired.net/?feed=rss2&amp;p=85</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>google-code-prettifyの導入</title>
		<link>http://project-wired.net/?p=39</link>
		<comments>http://project-wired.net/?p=39#comments</comments>
		<pubDate>Sun, 11 Oct 2009 01:50:10 +0000</pubDate>
		<dc:creator>Catan</dc:creator>
				<category><![CDATA[C++]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Perl]]></category>

		<guid isPermaLink="false">http://project-wired.net/?p=39</guid>
		<description><![CDATA[※2009/10/27 追記
Syntax Highlighter for WordPressを入れたため、こちらのプラグインは削除しました。
そのため、下のコードのシンタックスハイライトは機能しません。
blogにプロ [...]]]></description>
			<content:encoded><![CDATA[<p>※2009/10/27 追記<br />
<a href="http://project-wired.net/?p=119">Syntax Highlighter for WordPressを入れた</a>ため、こちらのプラグインは削除しました。<br />
そのため、下のコードのシンタックスハイライトは機能しません。</p>
<p>blogにプログラムコードを記述するにのあたり、シンタックスハイライトを実現しないと読みにくいなあと思っていたので、前々から気になっていた「google-code-prettify」を導入してみました。</p>
<p>っても「Google Code Prettify for wordpress」プラグインを入れただけなんですが。<br />
firefoxにしてもそうだけど、皆が使ってると大抵欲しいプラグインがすぐ見つかるのがいいですね。</p>
<p>使い方は、コードを&lt;pre class=&#8221;prettyprint&#8221;&gt;…&lt;/pre&gt;で囲むか、&lt;code class=&#8221;prettyprint&#8221;&gt;…&lt;/code&gt;で囲む。これだけ。<br />
言語の指定が不要で便利。ただしJavaScriptが有効じゃないとシンタックスハイライトされません。</p>
<p>とりあえず、本当に色がつくか<a href="http://ja.wikipedia.org/wiki/Fizz_Buzz" target="_blank">FizzBuzz問題でチェック！</a></p>
<p>Perl</p>
<pre class="prettyprint">
foreach (1..100) {
    if ($_ % 3 == 0 &#038;&#038; $_ % 5 == 0) {
        print "FizzBuzz\n";
    }
    elsif ($_ % 3 == 0) {
        print "Fizz\n";
    }
    elsif ($_ % 5 == 0) {
        print "Buzz\n";
    }
    else {
        print "$_\n";
    }
}
</pre>
<p>
JavaScript</p>
<pre class="prettyprint">
for (var i = 1; i &lt;= 100; i++) {
    if (i % 3 == 0 &#038;&#038; i % 5 == 0) {
        document.write("FizzBuzz&lt;br&gt;");
     }
    else if (i % 3 == 0) {
        document.write("Fizz&lt;br&gt;");
    }
    else if (i % 5 == 0) {
        document.write("Buzz&lt;br&gt;");
    }
    else {
        document.write(i);
        document.write('&lt;br&gt;');
    }
}
</pre>
<p>
Java</p>
<pre class="prettyprint">
public class fizzbuzz {

	public static void main(String[] args) {
		for (int i = 0; i <= 100; i++) {
			if (i % 3 == 0 &#038;&#038; i % 5 == 0) {
				System.out.println("FizzBuzz");
			}
			else if (i % 3 == 0) {
				System.out.println("Fizz");
			}
			else if (i % 5 == 0) {
				System.out.println("Buzz");
			}
			else {
				System.out.println(i);
			}
		}
	}
}
</pre>
<p>
C++</p>
<pre class="prettyprint">
#include &lt;iostream&gt;
using namespace std;

int main() {
	for (int i = 0; i <= 100; i++) {
		if (i % 3 == 0 &#038;&#038; i % 5 == 0) {
			cout << "FizzBuzz\n";
		}
		else if (i % 3 == 0) {
			cout << "Fizz\n";
		}
		else if (i % 5 == 0) {
			cout << "Buzz\n";
		}
		else {
			cout << i << "\n";
		}
	}
}
</pre>
<p>
さすがですね、google-code-prettify。<br />
名前もなんか好きです。</p>
<p>…あとから見て気づいたけど、C++のincludeの次の&lt;iostream&gt;が消えてるわー。<br />
でもC++はあんまり書く気ないからいいかー。</p>
]]></content:encoded>
			<wfw:commentRss>http://project-wired.net/?feed=rss2&amp;p=39</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
