<?xml version="1.0" encoding="utf-8"?>
<rdf:RDF
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns="http://purl.org/rss/1.0/"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:cc="http://web.resource.org/cc/"
    xmlns:admin="http://webns.net/mvcb/"
    xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/"
    xml:lang="ja">

    <channel rdf:about="http://en.yummy.stripper.jp/index.rdf">
    <title>ブログが続かないわけ</title>
    <link>http://en.yummy.stripper.jp/</link>
    <description>Webエンジニアが思うこと</description>
    <dc:language>ja</dc:language>
    <admin:generatorAgent rdf:resource="http://lolipoblog.jp/?v=1.0"/>
    <items>
      <rdf:Seq>
        <rdf:li rdf:resource="http://en.yummy.stripper.jp/?eid=1402323" />
        <rdf:li rdf:resource="http://en.yummy.stripper.jp/?eid=1395970" />
        <rdf:li rdf:resource="http://en.yummy.stripper.jp/?eid=1364502" />
        <rdf:li rdf:resource="http://en.yummy.stripper.jp/?eid=1353835" />
        <rdf:li rdf:resource="http://en.yummy.stripper.jp/?eid=1330421" />
        <rdf:li rdf:resource="http://en.yummy.stripper.jp/?eid=1317446" />
        <rdf:li rdf:resource="http://en.yummy.stripper.jp/?eid=1316792" />
        <rdf:li rdf:resource="http://en.yummy.stripper.jp/?eid=1312125" />
        <rdf:li rdf:resource="http://en.yummy.stripper.jp/?eid=1308069" />
        <rdf:li rdf:resource="http://en.yummy.stripper.jp/?eid=1299196" />
        <rdf:li rdf:resource="http://en.yummy.stripper.jp/?eid=1298963" />
        <rdf:li rdf:resource="http://en.yummy.stripper.jp/?eid=1283236" />
        <rdf:li rdf:resource="http://en.yummy.stripper.jp/?eid=1266612" />
        <rdf:li rdf:resource="http://en.yummy.stripper.jp/?eid=1255419" />
        <rdf:li rdf:resource="http://en.yummy.stripper.jp/?eid=1255043" />
      </rdf:Seq>
    </items>
    </channel>

  <item rdf:about="http://en.yummy.stripper.jp/?eid=1402323">
    <link>http://en.yummy.stripper.jp/?eid=1402323</link>
    <title>同じことなのに全然見え方が変わること</title>
    <description>今日は、プログラミングも囲碁もフットサルも関係ない話で、日頃目にしたり経験したりするもののなかで、同じことなのに受け取り方が全然変わるなーと思ったことをいくつかあげてみたいと思います。

1. アルバイトの規定

近所のレンタルビデオ屋にはアルバイト募集...</description>
<content:encoded><![CDATA[
今日は、プログラミングも囲碁もフットサルも関係ない話で、日頃目にしたり経験したりするもののなかで、同じことなのに受け取り方が全然変わるなーと思ったことをいくつかあげてみたいと思います。<br />
<br />
1. アルバイトの規定<br />
<br />
近所のレンタルビデオ屋にはアルバイト募集の貼り紙がしてあります。<br />
<pre class="terminal">時給850円/時〜<br />
笑顔で接客できる方にはボーナス50円/時</pre><br />
と書いてありました。<br />
<br />
うちの会社もフットサルコートの運営をしているので、アルバイトの方をたくさん採用しています。そして、接客に笑顔が必要なのはいうまでもなく、どうしたらスタッフ全員が気持のいい笑顔をできるかいろいろ考えています。そのとき、この貼り紙を見て、直接的ではあるが効果的だなあと思いました。ただこれってよくよく考えると<br />
<pre class="terminal">時給900円/時〜<br />
笑顔で接客できない場合には時給から50円マイナスします</pre><br />
っていうのと全く同じなんですよね。ものはいいようだなぁと。<br />
実際、時給900円にしてしまうと、笑顔がないくらいで50円マイナスすることは労基法的にも難しいと思うけど、上のやりかたなら問題ないと思います。どちらの場合も、ちゃんと働いているスタッフからみたら、時給900円ってことなんですけど、だいぶ印象が変わりますね。<br />
<br />
これは、一方は基準を850円にし、もう一方は基準を900円にしているから、見え方がだいぶ変わるだけで、どちらも「笑顔あり、900円」を基準に考えれば、笑顔がなければ50円マイナスということに全くかわりはないわけです。<br />
<br />
ちなみに、個人的にはこういう言葉のトリックのようなやり方で、よく見せるっていうのは実はあんまり好きではありません。笑顔ができないことに罰則規定(しかも罰金)を設けたいっていう発想から、上記の貼り紙が生まれたと邪推しちゃうからです。<br />
<br />
2. ソーシャルゲームのご褒美の話<br />
<br />
ヒットするソーシャルゲームのセオリーの1つに、「継続的に訪問させる仕掛け」というのがあります。よくある形は、一定時間経過してアクセスすると、ちょっとお金がもらえたり、宝箱をあけることができたりとかそういうたぐいのものです。<br />
<pre class="terminal">1時間後にアクセスすると、さらに50円もらえるよ！</pre><br />
これが楽しみで、ちょくちょく訪れるひともいるでしょう。<br />
<br />
ところが、僕が先日始めた、ソーシャルのサッカーゲームでは、これを裏返した仕掛けがありました。規定の時間以上アクセスがないと、ペナルティがあるのです。定期的にトレーニングし続けないと体がなまってしまうということで、ステータスが少しさがってしまうんですね。<br />
<pre class="terminal">1時間以上トレーニングしないと、訓練度が50さがります！</pre><br />
これらはゲーム内の経済で言えばまったく同じことです。ご褒美型の方も、例えば2時間あけてアクセスして50円もらったひとは、ちゃんと1時間ごとに2回アクセスして100円(50円 x 2)受け取ったひとより、もらえるお金が50円減ってしまっているので、マイナス50円のペナルティをくらっているのと同じことになるからです。<br />
<br />
こっちも結局基準の問題で、ご褒美がもらえてあたりまえの状態を基準に考えれば、規定の時間以上あけてアクセスしてしまうことによる機会損失はステータスが下がるペナルティと同じになるというわけです。<br />
<br />
ソーシャルゲームの場合、どちらの感情に訴えかけるもののほうが効果的なのかは僕にはわかりませんけど、最近はペナルティ型もしくは併用型が増えてきている気がしますね。<br />
<br />
最近良く思うんです。<br />
ものごとは本質が重要だけど、ひとの行動は本質にたいしてより見かけに対して行われることのほうが多いと。<br />
だから、うわっつらって超重要ですよねって。<br />

]]></content:encoded>
    <dc:subject>マイニュース</dc:subject>
    <dc:date>2010-08-24T10:38:32+09:00</dc:date>
    <dc:creator>junichiro</dc:creator>
    <dc:rights>junichiro</dc:rights>
<taxo:topics>
<rdf:Bag>
<rdf:li rdf:resource="http://jugem.jp/contents/theme.php?theme=1" />
</rdf:Bag>
</taxo:topics>
  </item>

  <item rdf:about="http://en.yummy.stripper.jp/?eid=1395970">
    <link>http://en.yummy.stripper.jp/?eid=1395970</link>
    <title>サーバ間通信のデータ詐称回避</title>
    <description>サーバ間で通信をする場合、その引数の内容が詐称されていないかを判定するためにひと工夫凝らさないといけません。良くある方法としては、サーバ同士お互いに秘密鍵を持ち、通信の引数とその秘密鍵を種にして同じロジックでハッシュを生成しそれを比較するというものがあ...</description>
<content:encoded><![CDATA[
サーバ間で通信をする場合、その引数の内容が詐称されていないかを判定するためにひと工夫凝らさないといけません。良くある方法としては、サーバ同士お互いに秘密鍵を持ち、通信の引数とその秘密鍵を種にして同じロジックでハッシュを生成しそれを比較するというものがあります。<br />
<br />
例えばユーザーIDが712904684のユーザーの残高を200円上げるという処理をサーバ間通信で依頼することを考えると、こんなAPI(URI) を考えるかもしれません。<br />
<pre class="terminal">http://www.example.com/api?uid=712904684&amp;money=200</pre>ところがこれがこのまま通って残高が200円あがるとなると、200の部分を9000に詐称するのも簡単な気がしてきます。<br />
<pre class="terminal">http://www.example.com/api?uid=712904684&amp;money=9000</pre>サーバ間通信を行うアプリケーション以外からでも、例えばこんなURLをブラウザのアドレス欄に入力して実行するだけで簡単にこのユーザーの残高を9000円もあげることができてしまいます。サーバ間通信の内容は普通はユーザーには見えにくいので、こういう問題を気にせず実装されているソーシャルアプリもたくさんあり、巷のソーシャルゲームでチートが横行している一因にもなっています。さて、話を戻して、このような詐称をさせないために、最初にお話したハッシュを比較するという方法をどのように適用するのかみてみましょう。<br />
<br />
1. サーバ間通信を行う2者で事前にsecret_key となる文字列を決めておく<br />
2. 引数のkeyをアルファベット順に並び替える<br />
3. その順番でkey=valueという文字列を連結させる<br />
4. その文字列の最後にsecret_key を連結する<br />
5. できた文字列をmd5 でハッシュにする<br />
6. 通信の最後の引数にこのハッシュを付加する<br />
<br />
secret_key をa1b23c とします。<br />
PHPで書くとこんな感じでしょうか。<pre class="code_sample">function generate_hash(&#36;params_array) &#123;<br />
    &#36;secret='a1b23c';<br />
    ksort(&#36;params_array);<br />
    foreach (&#36;params_array as &#36;k=&gt;&#36;v) &#123;<br />
        &#36;str .= &quot;&#36;k=&#36;v&quot;;<br />
    &#125;<br />
    &#36;str .= &#36;secret;<br />
    return md5(&#36;str);<br />
&#125;</pre>これで生成されたhashをx43q98tgaji45asoiとすると、次のようなURI でユーザーの残高をあげるようにリクエストを投げます。<br />
<pre class="terminal">http://www.example.com/api?uid=712904684&amp;money=200&amp;hash=x43q98tgaji45asoi</pre>こうしておいて、リクエストを受け付けたサーバ側でも同じsecret_key を用いて同じロジックでハッシュを計算して、それがhashという引数で渡ってきたもの(x43q98tgaji45asoi)と一致しているかをチェックしてデータが詐称されていないかを調べることができます。<br />
<br />
この場合に最初に見たような詐称をするとどうなるでしょう。<br />
<pre class="terminal">http://www.example.com/api?uid=712904684&amp;money=9000&amp;hash=x43q98tgaji45asoi</pre>money=9000の部分の文字列がmoney=200の文字列と異なるため、同じロジックでハッシュを生成しても、できあがるhash がx43q98tgaji45asoiという文字列になりません。そのためリクエストを受け付けたサーバ側ではhash の不一致が発生し、エラーとして処理されます。一方、詐称したいと考える第三者がこのハッシュもちゃんと書き換えたURI を作成しようと考えたとしましょう。しかし、その第三者はあいにくsecret_key を知らないのでそれも不可能です。ここはmd5 が一方通行の変換であるために、正しい通信からsecret_key が逆算されないことを利用しています。詳細は割愛しますが、「正しい通信の内容からもsecret_key は推測できない」というのは大事な部分です。<br />
<br />
以上が、サーバ間通信における詐称回避のひとつの解であり、Facebook でもほとんど似た方法が取られています。<br />
<br />
自前でセキュアなサーバ間通信を行う場合はデータの詐称というのがなかなか厄介な悩みとなります。第三者に公開しないようなシステムであればアクセス元IP をチェックするというような簡単な方法でも対応できるかもしれませんが、第三者に広く公開する場合はこういう方法を検討するのもいいと思います。その場合、API 利用者をしっかりと管理し、その利用者ごとに別のsecret_key を割り当てるのがまたもう一つ難しいところなのですが。
]]></content:encoded>
    <dc:subject>Web技術</dc:subject>
    <dc:date>2010-07-28T09:59:12+09:00</dc:date>
    <dc:creator>junichiro</dc:creator>
    <dc:rights>junichiro</dc:rights>
<taxo:topics>
<rdf:Bag>
<rdf:li rdf:resource="http://jugem.jp/contents/theme.php?theme=12" />
</rdf:Bag>
</taxo:topics>
  </item>

  <item rdf:about="http://en.yummy.stripper.jp/?eid=1364502">
    <link>http://en.yummy.stripper.jp/?eid=1364502</link>
    <title>パソコンと携帯、どちらで文字を打ちたいか</title>
    <description>ニコニコ動画より Youtube を使う人の意見を聞いてみた - IT戦記
amachang「なんで、 Youtube ばっか使うの？ニコニコ動画のほうがおもしろい動画多くない？」
知り合い「うーん。そうかなー。」
amachang「そう思うけどなー。」
知り合い「とりあえず検索するじゃん...</description>
<content:encoded><![CDATA[
<a href="http://d.hatena.ne.jp/amachang/20100406/1270525216" target="_blank">ニコニコ動画より Youtube を使う人の意見を聞いてみた - IT戦記</a><br />
<blockquote>amachang「なんで、 Youtube ばっか使うの？ニコニコ動画のほうがおもしろい動画多くない？」<br />
知り合い「うーん。そうかなー。」<br />
amachang「そう思うけどなー。」<br />
知り合い「とりあえず検索するじゃん。そのとき、候補が出てくるから楽でいいんだよねー。あと、ニコニコ動画ってログイン必須じゃん、パスワードとメールアドレス打つの大変。」<br />
amachang「え、それってそんなめんどくさいことなん？」<br />
知り合い「いやー。パソコンで文字打つのに慣れてないからさー。みんなお前みたいにパソコンで文字打てると思ったら大間違いだよ。」<br />
amachang「まじでー？」<br />
知り合い「まじでー。」<br />
</blockquote>これを見て、先日電車の中で聞こえてきた会話を思い出しました。<br />
<br />
50代くらいの女性2人での会話<br />
<br />
A:「最近さ、先生にパソコンでメール打たないといけなくて面倒じゃない？」<br />
B:「うん、パソコン大変...」<br />
A:「でも、あたし、いいこと思いついたの」<br />
B:「ん？」<br />
A:「携帯でメールを書いてね、自分のパソコンのアドレスに送るの」<br />
B:「！！」<br />
A:「そしたら、それをコピーしてすぐにメール送れるのよ」<br />
B:「うわっ、超アタマいいー。私もそうしよー」<br />
<br />
一瞬我が耳を疑いました。僕はiPhone に変える前は携帯で文字を打つのがとにかくいやで、それこそ、PC で一度打ったものを携帯にメールするというような使い方をしていたくらいです。ところがまさか、逆の発想とは...<br />
<br />
予測変換とか、変換履歴を保持しているところなんかは確かに携帯の方が便利かもしれないとは思いますけど、パソコンより携帯の方が打ちやすいと言うのはなかなか新鮮でした。<br />
<br />
自分が常識だと思ってることも常に疑ってかからなければいけないということを改めて再認識しました。また、インターフェイス設計は利用者、対象者をつねに想定しながら行わないといけないということも、再認識できました。
]]></content:encoded>
    <dc:subject>PC/家電</dc:subject>
    <dc:date>2010-04-06T13:12:43+09:00</dc:date>
    <dc:creator>junichiro</dc:creator>
    <dc:rights>junichiro</dc:rights>
<taxo:topics>
<rdf:Bag>
<rdf:li rdf:resource="http://jugem.jp/contents/theme.php?theme=1" />
</rdf:Bag>
</taxo:topics>
  </item>

  <item rdf:about="http://en.yummy.stripper.jp/?eid=1353835">
    <link>http://en.yummy.stripper.jp/?eid=1353835</link>
    <title>[JavaScript]jQuery のイベントとクロージャ</title>
    <description>以前のエントリ([JavaScript]僕、スコープとかクロージャとか曖昧でした
)で書いた、Javascript のクロージャの話と全く同じことなのですが、あれをjQuery のclick イベントで書くとどうなるかということを、自分用にメモとして残しておきたいと思います。

例えば、di...</description>
<content:encoded><![CDATA[
以前のエントリ(<a href="http://en.yummy.stripper.jp/?eid=1308069" target="_blank">[JavaScript]僕、スコープとかクロージャとか曖昧でした</a><br />
)で書いた、Javascript のクロージャの話と全く同じことなのですが、あれをjQuery のclick イベントで書くとどうなるかということを、自分用にメモとして残しておきたいと思います。<br />
<br />
例えば、div でブロックを3つ作って、それぞれにclick イベントを持たせるとします。そのとき、そのclick に反応して、そのblock が何番目に作られたものなのかをalert するようにしたいとします。<br />
<br />
jQuery の.click は第一引数にコールバック関数をとるので、クロージャのことを意識せずに直感的に書くと、次のようなコードになるのではないでしょうか。<br />
<pre class="code_sample">var div;<br />
var i;<br />
for(i=0; i&lt;3; i++) &#123;<br />
    div = &#36;('&lt;div/&gt;').click( function( e ) &#123;<br />
        alert(i)<br />
    &#125; );<br />
    div.html('click me - ' + i); <br />
    div.css('cursor', 'pointer');<br />
    &#36;('body').append(div);<br />
&#125;</pre><br />
普段からJavascript を書いているかたであれば、すぐに問題点に気付くと思います。これは例の通り、click me - [i] のところのi は正しくその番号のものが表示されるのですが、実際にそれをクリックしてみても、alert で表示されるi は目的のものとは違うはずです。ここでも前回見た通り、「関数を返す無名関数をすぐに実行する」という方法で対応できます。<br />
<br />
考え方としては、まず、「関数を返す無名関数を『すぐに実行する』」というところが重要なので、.click の引数にあたるところで、関数をすぐに実行させます。順を追って書くと、まずこんな感じになります。<br />
<pre class="code_sample">.click( function () &#123;&#125; () );</pre><br />
当然、このfunction はすぐに実行されるのですが、.click は引数にコールバック関数をとるものなので、この実行される関数がそのコールバック関数を返さなければなりません。つまり、こう書くことになります。<br />
<pre class="code_sample">.click( function () &#123;<br />
    return function() &#123;&#125;;<br />
&#125;() );</pre><br />
そして、その中に書かれた返されるコールバック関数のところに目的のコードを書くことになります。<br />
<pre class="code_sample">.click( function () &#123;<br />
    return function() &#123;<br />
        alert(_i);<br />
    &#125;;<br />
&#125;() );</pre><br />
ここで、alert(_i) と書いたのですが、この_i は外側のfor のi とは別物ということをはっきりさせるために_i と書くことにしました。つぎに、この_i に外側のfor でまわされているi を渡したすというのを表現します。<br />
<pre class="code_sample">.click( function (i) &#123;<br />
    var _i = i;<br />
    return function() &#123;<br />
        alert(_i);<br />
    &#125;;<br />
&#125;(i) );</pre><br />
すぐに実行される無名関数に、引数として i をとれるようにしました。ここでは、紛らわしくないように別の変数名(例えばn)を使ってつぎように書くこともできます。この方がi の違いを区別しやすくなるので、わかりやすいというかたもいらっしゃるかもしれません。<br />
<pre class="code_sample">.click( function (n) &#123;<br />
    var _i = n;<br />
    return function() &#123;<br />
        alert(_i);<br />
    &#125;;<br />
&#125;(i) );</pre><br />
これで目的のclick イベントは完成です。jQuery のイベントに渡すコールバック関数では、引数にevent そのものをとることができます。このような書き方をした場合、それはこの内側に書いたコールバック関数で受取れます。次のe のような書き方です(今回の例ではこのe を使うことはありませんが)。<br />
<pre class="code_sample">.click( function (n) &#123;<br />
    var _i = n;<br />
    return function(e) &#123;<br />
        alert(_i);<br />
    &#125;;<br />
&#125;(i) );</pre><br />
以上を踏まえて、最初に書いたものを書き直すと、以下のようになります。<br />
<pre class="code_sample">var div;<br />
var i<br />
for(i=0; i&lt;3; i++) &#123;<br />
    div = &#36;('&lt;div/&gt;') .click( function( i ) &#123;<br />
        var _i = i;<br />
        return function(e) &#123;<br />
            alert(_i);<br />
        &#125;;<br />
    &#125;(i) );<br />
    div.html('click me - ' + i);<br />
    div.css('cursor', 'pointer');<br />
    &#36;('body').append(div);<br />
&#125;</pre><br />
僕もまだまだ初学者の域をでておりませんので、上記のような思考のもとに書いております。
]]></content:encoded>
    <dc:subject>JavaScript</dc:subject>
    <dc:date>2010-02-28T11:42:01+09:00</dc:date>
    <dc:creator>junichiro</dc:creator>
    <dc:rights>junichiro</dc:rights>
<taxo:topics>
<rdf:Bag>
<rdf:li rdf:resource="http://jugem.jp/contents/theme.php?theme=13" />
</rdf:Bag>
</taxo:topics>
  </item>

  <item rdf:about="http://en.yummy.stripper.jp/?eid=1330421">
    <link>http://en.yummy.stripper.jp/?eid=1330421</link>
    <title>[囲碁]新春twitter囲碁部開催のお知らせ</title>
    <description>小さい頃におじいちゃんに手ほどきを受けるものの、当時は俄然将棋のほうが面白く、大人になるまでまったく碁を打たずに育ちました。ヒカルの碁を読んで、囲碁を取り巻く環境がなんだか面白そうだと感じて、ようやく打ち始め、あれよあれよというまにのめり込みました。し...</description>
<content:encoded><![CDATA[
小さい頃におじいちゃんに手ほどきを受けるものの、当時は俄然将棋のほうが面白く、大人になるまでまったく碁を打たずに育ちました。ヒカルの碁を読んで、囲碁を取り巻く環境がなんだか面白そうだと感じて、ようやく打ち始め、あれよあれよというまにのめり込みました。しかし、まわりに打てる人がほとんどおらず、人間と囲碁を打つ機会がほとんどなく、鬱々とした日々を過ごすことになりました。しかたなく、僕のまったくの趣味である囲碁を他人に押し付け、少しでも対人戦の機会を増やそうともくろみ、囲碁の啓蒙を徐々にではありますが進めてきたところ、囲碁に興味のある方もたくさんいらっしゃるという手応えを感じました。ただ、それでもやらないのは、やはりまわりに打つ人がいないというのがひとつの原因のようでした。<br />
<br />
僕を含めみなさまのニーズを満たすべく、ここにtwitter 囲碁部を開催したいと思います。<br />
<br />
<span style="font-size:medium;"><strong>■日時</strong></span><br />
2010年1月8日(金) 19:30 - 21:30<br />
参加者の状況次第では20:00 開始とするかもしれませんので、20:00 からなら来れる！というかたも、その旨を添えて申し込んで頂ければと思います。会場の都合で終了時間は変更できません。<br />
<br />
<a href="http://atnd.org/events/2589" target="_blank">twitter 囲碁部 #1 : ATND</a><br />
<br />
<span style="font-size:medium;"><strong>■人数</strong></span><br />
20人<br />
<br />
<span style="font-size:medium;"><strong>■場所</strong></span><br />
千心囲碁クラブ (<a href="http://space.geocities.jp/senshin_igo/" target="_blank">http://space.geocities.jp/senshin_igo/</a>)<br />
高田馬場 徒歩2分<br />
<br />
<span style="font-size:medium;"><strong>■対象者</strong></span><br />
1. 囲碁に興味はあるけど、囲碁のルールもご存じない方<br />
2. ルールは知っているんだけど、打つ機会が少なくて嘆いている方<br />
3. 棋力関係なく、とにかく囲碁のイベントで楽しみたい方<br />
4. 有段だけど、教えるのも好きだから手伝っちゃうよという方<br />
<br />
ちなみに、僕は2級くらいの腕前で、そこそこできる人なら1年もかからずに到達できる程度のレベルです。碁会所などに行くと、最弱の部類です。が、小学生向けの指導者免状を持っているので(正確には受講済申請中)一緒に楽しみながら教えるのは、多分できます。上記の1. に該当する方と2. のうちの希望者にはルールの講習実施します(20 - 40min.)。その後、9路盤にて棋力別のペア碁を楽しんで頂く予定です。<br />
<br />
<span style="font-size:medium;"><strong>■タイムテーブル</strong></span><br />
19:30 - 20:15 ルール講習会<br />
20:15 - 20:30 質問及び時間があれば簡単な最初のコツを伝授<br />
(ルールのわかる方はこの間にお互いの顔合わせをかねて、ペア碁を1局ほど打って頂きます)<br />
20:30 - 21:30 ペア碁 x 2<br />
組み合わせを変えて、ペア碁を2〜3局打って頂きます。<br />
<br />
<span style="color:#FF0000">※本イベントでは9路盤しか使わない予定です。</span><br />
<br />
ATND で募集中ですので、興味のある方はこちらからご登録ください！<br />
<a href="http://atnd.org/events/2589" target="_blank">twitter 囲碁部 #1 : ATND</a><br />
<br />
よろしくお願いします！
]]></content:encoded>
    <dc:subject>囲碁</dc:subject>
    <dc:date>2009-12-18T12:05:48+09:00</dc:date>
    <dc:creator>junichiro</dc:creator>
    <dc:rights>junichiro</dc:rights>
<taxo:topics>
<rdf:Bag>
<rdf:li rdf:resource="http://jugem.jp/contents/theme.php?theme=14" />
</rdf:Bag>
</taxo:topics>
  </item>

  <item rdf:about="http://en.yummy.stripper.jp/?eid=1317446">
    <link>http://en.yummy.stripper.jp/?eid=1317446</link>
    <title>[Emacs]折り返しまとめ(自分メモ)</title>
    <description>画面分割してもデフォルトで折り返す(setq truncate-partial-width-windows nil)via Emacsで、C-x 3とかした時にも行の折り返しをする設定 - subpop - subtech
折り返しする/しないをトグルで切り替える(defun toggle-truncate-lines ()
    &amp;quot;折り返し表示をトグル...</description>
<content:encoded><![CDATA[
<h3>画面分割してもデフォルトで折り返す</h3><pre class="code_sample">(setq truncate-partial-width-windows nil)</pre>via <a href="http://subtech.g.hatena.ne.jp/antipop/20071016/1192546147" target="_blank">Emacsで、C-x 3とかした時にも行の折り返しをする設定 - subpop - subtech</a><br />
<h3>折り返しする/しないをトグルで切り替える</h3><pre class="code_sample">(defun toggle-truncate-lines ()<br />
    &quot;折り返し表示をトグル&quot;<br />
    (interactive)<br />
    (if truncate-lines<br />
        (setq truncate-lines nil)<br />
        (setq truncate-lines t))<br />
    (recenter))<br />
<br />
(global-set-key &quot;&yen;C-c&yen;C-l&quot; 'toggle-truncate-lines)</pre>via <a href="http://ubulog.blogspot.com/2007/09/emacsonoff.html" target="_blank">ubulog: Emacsで行の折り返し表示をON/OFFする</a><br />
<br />
この両方の組み合わせで折り返しに関しては最強。
]]></content:encoded>
    <dc:subject>Web技術</dc:subject>
    <dc:date>2009-11-12T11:06:24+09:00</dc:date>
    <dc:creator>junichiro</dc:creator>
    <dc:rights>junichiro</dc:rights>
<taxo:topics>
<rdf:Bag>
<rdf:li rdf:resource="http://jugem.jp/contents/theme.php?theme=13" />
</rdf:Bag>
</taxo:topics>
  </item>

  <item rdf:about="http://en.yummy.stripper.jp/?eid=1316792">
    <link>http://en.yummy.stripper.jp/?eid=1316792</link>
    <title>[ツール]画面キャプチャの共有にTinyGrab をおすすめしたい</title>
    <description>

最近、TinyGrab という画面キャプチャ共有ツールを知りました。それの紹介の前に、まず、似たようなアプリケーションのGyazo を紹介したいと思います。画面キャプチャを他の人に見せたいとき、僕は今までGyazo を使っていました。

Gyazoへようこそ | スクリーンシ...</description>
<content:encoded><![CDATA[
<a href="http://tinygrab.com/" target="_blank"><img src="http://grab.by/pPR" alt="TinyGrab" /></a><br />
<br />
最近、TinyGrab という画面キャプチャ共有ツールを知りました。それの紹介の前に、まず、似たようなアプリケーションのGyazo を紹介したいと思います。画面キャプチャを他の人に見せたいとき、僕は今までGyazo を使っていました。<br />
<br />
<a href="http://gyazo.com/ja" target="_blank">Gyazoへようこそ | スクリーンショットの瞬間共有</a><br />
<br />
Gyazo の素晴らしいところは、このアプリをインストールするだけですぐに画面キャプチャの共有が実現できるところです。サイトへの登録など一切不要です。インストールして、実行するとすぐにマウスカーソルが、領域選択のようなカーソルに変わるので、それで選択するだけ。そうすると選択範囲の画面がキャプチャーされ、自動的にサーバにアップされ、さらにそのキャプチャー画像を表示するためのパーマネントなURI が生成され、親切にもそれが自動的にデフォルトブラウザで開かれます。<br />
<br />
これはホントに便利です。まだ使ってない人は試してみるといいと思います。画面キャプチャをブログにアップする方などは、わざわざブログの管理画面で画像アップロードなどしなくても、このGyazo にあがってる画像に対してリンクを貼れば十分なんじゃないかと思うくらいです。<br />
<br />
<span style="font-size:medium;"><strong>Gyazo の良いところ</strong></span><br />
<br />
1. 登録不要<br />
2. 自動的にサーバにアップロード<br />
3. 自動的にパーマネントリンクの生成<br />
<br />
<span style="font-size:medium;"><strong>Gyazo の微妙にかゆいところに手が届かないところ</strong></span><br />
<br />
1. キャプチャするたびにアプリを起動しなければならない<br />
(Spotlight などのランチャ経由でキーストロークだけでGyazo を呼び出せばそれほど気にはなりません。)<br />
2. ローカルには保存されない<br />
(自動で開くブラウザに表示されてる画像をD&D で持ってくれば解決する話ではあります。)<br />
3. 過去にアップした画像を探せない<br />
<br />
次に本題のTinyGrab についてです。最近macheist 経由で知ったのですが、これはなかなか良いアプリ/サービスです。事前にサイトへの登録が必要なのが唯一Gyazo に劣るところではありますが、それさえ一度済ませてしまえば、Gyazo で実現できなかったことがすべて実現できます。<br />
<a href="http://tinygrab.com/" target="_blank"><img src="http://grab.by/pMf" alt="TinyGrab" /></a><br />
<span style="font-size:medium;"><strong>TinyGrab の良いところ</strong></span><br />
<br />
1. 自動的にサーバにアップロード<br />
2. 自動的にパーマネントリンクの生成<br />
3. 一度アプリを起動しておけば常駐してくれる<br />
4. Mac の場合、従来のキーストロークでキャプチャするだけ<br />
(Command + Shif + 4)<br />
5. ローカルにも保存するかしないか選べる(保存しない場合はゴミ箱へ)<br />
6. Control Panel から過去に撮ったキャプチャにアクセスできる<br />
7. 自分のサーバに自動でFTP アップロードすることもできる<br />
(プレミアムのみ)<br />
<br />
7. はまだ試していないのですが、自分の好きなサーバにアップできるのであれば、ちょっとしたスクリプトやAPI と組み合わせていろいろできるかもしれません。いまなら(2009/11/12まで?)MacHeist 経由であれば自動でPremium アカウントになります。Premium じゃないと少しGyazo には劣ると思いますので、MacHeist 経由がおすすめです！<br />
<br />
<a href="http://tinygrab.com/" target="_blank">Simple. Screenshot. Sharing. - TinyGrab</a><br />
<a href="http://www.macheist.com/" target="_blank">MacHeist nanoBundle</a><br />
<br />
TinyGrab を使っていると、共有するしないということも意識せず、普通にキャプチャを撮るだけで、それがサーバに蓄積されるというのもとても魅力的です。<br />
まあ、「管理しなくてもいい」というのがGyazo の最大の魅力なので、管理できるのが強みというTinyGrab とではコンセプトが違うかもしれませんので、どちらを好きになるかは人それぞれだと思います。僕はしばらくTinyGrab を使ってみようと思います。<br />
<br />
なんとなくまたEvernote と棲み分けの難しいツールのような気もしてきていますが...
]]></content:encoded>
    <dc:subject>Web技術</dc:subject>
    <dc:date>2009-11-10T15:37:49+09:00</dc:date>
    <dc:creator>junichiro</dc:creator>
    <dc:rights>junichiro</dc:rights>
<taxo:topics>
<rdf:Bag>
<rdf:li rdf:resource="http://jugem.jp/contents/theme.php?theme=12" />
</rdf:Bag>
</taxo:topics>
  </item>

  <item rdf:about="http://en.yummy.stripper.jp/?eid=1312125">
    <link>http://en.yummy.stripper.jp/?eid=1312125</link>
    <title>[雑記]Gmail のアカウント部分のドット(.)はどうでもよかった</title>
    <description>結論例えば、this.is.a.pen@gmail.com というアドレスがあったとします。これは下記のアドレスのどこに出しても、ちゃんと届きます。

thisisapen@gmail.com
this.isa.pen@gmail.com
this..is..a..pen@gmail.com
t.h.i.s.i.s.a.p.e.n@gmail.com

アカウント部分ド...</description>
<content:encoded><![CDATA[
<h3>結論</h3>例えば、this.is.a.pen@gmail.com というアドレスがあったとします。これは下記のアドレスのどこに出しても、ちゃんと届きます。<br />
<br />
thisisapen@gmail.com<br />
this.isa.pen@gmail.com<br />
this..is..a..pen@gmail.com<br />
t.h.i.s.i.s.a.p.e.n@gmail.com<br />
<br />
アカウント部分ドット(.) はどうでもよいようです。<br />
<br />
<h3>テストアカウントに</h3>これを利用すると、別メールアドレスが簡単に作れますので、テストアカウントとか、複数のアカウントを用意したいときとかに便利です。Gmail で別メールアドレス(エイリアス)を作る方法は「+」を使う方法が良く知られていると思います。例えば、先ほどの例のアカウントですと下記のようなアドレスもエイリアスとして有効になり、this.is.a.pen@gmail.com に届きます。<br />
<br />
this.is.a.pen+test@gmail.com<br />
this.is.a.pen+sub@gmail.com<br />
this.is.a.pen+for.you@gmail.com<br />
<br />
ところが稀にこの「+」をつかったメールアドレスを許可していないサイトもあり、そういうサイトでは複数のアカウントを用意するのが面倒でした。そこで、この(.) をつかったエイリアスの方法を使えば、簡単に別のアカウントを用意できます。<br />

]]></content:encoded>
    <dc:subject>Web技術</dc:subject>
    <dc:date>2009-10-29T15:22:00+09:00</dc:date>
    <dc:creator>junichiro</dc:creator>
    <dc:rights>junichiro</dc:rights>
<taxo:topics>
<rdf:Bag>
<rdf:li rdf:resource="http://jugem.jp/contents/theme.php?theme=12" />
</rdf:Bag>
</taxo:topics>
  </item>

  <item rdf:about="http://en.yummy.stripper.jp/?eid=1308069">
    <link>http://en.yummy.stripper.jp/?eid=1308069</link>
    <title>[JavaScript]僕、スコープとかクロージャとか曖昧でした</title>
    <description>JavaScript: The Good Parts を読みましたところ、いろいろと勉強になることがありました。

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティスDouglas Crockford, 水野 貴明 ￥ 1,890 手っ取り早く習得痒いとこだけ掻いてくれるJavaScriptを勉強し...</description>
<content:encoded><![CDATA[
JavaScript: The Good Parts を読みましたところ、いろいろと勉強になることがありました。<br />
<br />
<table class="yztbl"><tr valign="top"><td class="yz-image"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873113911/portalportal-22/" target="_blank"><img src="http://ecx.images-amazon.com/images/I/41H0Dk-K3PL._SL160_.jpg" style="border: none;" /></a></td><td class="yz-info"><div class="yz-name"><a href="http://yasazon.com/asin/4873113911.html" target="_blank"><img src="http://images-jp.amazon.com/images/G/09/icons/icon-books.gif" border="0" align="left"></a><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873113911/portalportal-22/" name="yzlink" target="_blank">JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス</a></div><div class="yz-detail" style="font-size:small"><a href="http://yasazon.com/s/portalportal-22/Douglas%20Crockford.html">Douglas Crockford</a>, <a href="http://yasazon.com/s/portalportal-22/%E6%B0%B4%E9%87%8E%20%E8%B2%B4%E6%98%8E.html">水野 貴明</a> ￥ 1,890 <img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-5-0.gif" style="border: none;" /><br><img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-5-0.gif">手っ取り早く習得<br><img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-5-0.gif">痒いとこだけ掻いてくれる<br><img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-5-0.gif">JavaScriptを勉強しなおすのにとってもよいです。<br><img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-5-0.gif">JavaScript コアに関する最高の本<br></div></td></tr></table><br />
<br />
付録を除くと100ページちょいという、とてもライトな本ですが、内容は濃密です。JavaScript の中で、一番わかりにくいだろうなと思われるようなところが集中的に解説されているように感じられ、勉強したてでかつそろそろわかりかけてきたなーと思い始めていた僕にとって、最適の一冊でした。知って良かったなと思えるところがたくさんありましたので、これから少しずつ紹介して行きたいと思いますが、今日はその中でも特に印象的だった、変数のスコープにまつわるお話をしてみたいと思います。<br />
<br />
変数のスコープはその変数が宣言された関数の中だけに限定されます。なんとなく知ってはいたのですが、for 文とかではこういう風に書いてしまうことが多々ありました。<pre class="code_sample">for (var i=0; i&lt;array.length; i++) &#123;<br />
    // alert('test: ' + i);<br />
&#125;</pre>ブロックレベルのスコープはないので、これは下記と同じことなんですね。<pre class="code_sample">var i;<br />
for (i=0; i&lt;array.length; i++) &#123;<br />
    // alert('test: ' + i);<br />
&#125;</pre>変数宣言はそのスコープをできるだけ狭める方がお行儀が良いので、他のプログラミング言語ではなるべく内側のブロック、例えばさっきの例ではfor 文のブロック内で宣言するのがよいとされているのですが、JavaScript では、関数内の先頭に書くのが一番わかりやすくなります。そうすれば、その関数全体がスコープになるというのが直感的にわかるようになると思います。<br />
<br />
これを踏まえた問題をひとつ。これも、この本からの引用なので恐縮です。<br />
下記のようなhtml が与えられたときに、h1 の「JavaScript」 をクリックしたら「1」を、h2 の「The Good Parts」 をクリックしたら「2」をalert するというような、そのnode が何番目のnode なのかをalert するというコードを考えるとします。<pre class="code_sample">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?&gt;&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;<br />
&lt;link href=&quot;good_parts.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;<br />
&lt;title&gt;JavaScript The Good Parts&lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;h1&gt;JavaScript&lt;/h1&gt;&lt;h2&gt;The Good Parts&lt;/h2&gt;&lt;pre&gt;&lt;script src=&quot;program.js&quot;&gt;&lt;/script&gt;&lt;/pre&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;</pre>【参考】<br />
0番目のnode: body タグの直後の改行(テキストノード)<br />
1番目のnode: h1<br />
2番目のnode: h2<br />
3番目のnode: pre<br />
4番目のnode: pre タグの直後の改行(テキストノード)<br />
<br />
program.js<pre class="code_sample">var add_the_handlers = function (nodes) &#123;<br />
    var i;<br />
    for (i = 0; i &lt; nodes.length; i += 1) &#123;<br />
        nodes[i].onclick = function () &#123;<br />
            alert(i);<br />
        &#125;<br />
    &#125;<br />
&#125;;<br />
add_the_handlers(document.body.childNodes);</pre><br />
これは間違いの例です。僕はパッと見ただけではこのコードの問題点がわかりませんでした。<br />
実は、上記のjs では、どちらをクリックしても4 がalert されてしまいます。4 というのはノードの総数です。<br />
<br />
これはクロージャの概念と変数のスコープがわかっていればわかることらしいので、本では詳細が書かれておりませんでした。そこで、僕なりの解釈を付け加えてみたいと思います。このfor 文のi=1 の時には、「1番目のnode(つまりh1) のonclick イベントに function() &#123; alert(i); &#125; を割り当てろ」という命令がなされています。これで、h1 がonclick イベントに反応する準備ができました。そして、実際に、h1 がクリックされると、その際に実行されるのは、alert(i) です。では、このalert(i) が実行されたときに、i の値はどうなっているでしょうか。onclick を割り当てたタイミングでは1 だったかもしれないi の値ですが、実際にはにfor 文がnodes の総数分実行されたあとなので、i = 4 になってしまっています。その結果、alert(i) で、「4」がalert されてしまうということになります。<br />
<br />
では、どのように直せばよいのでしょうか。<pre class="code_sample">var add_the_handlers = function (nodes) &#123;<br />
    var i;<br />
    for (i = 0; i &lt; nodes.length; i += 1) &#123;<br />
        nodes[i].onclick = function (i) &#123;<br />
            return function () &#123;<br />
                alert(i);<br />
            &#125;<br />
        &#125;(i);<br />
    &#125;<br />
&#125;;<br />
add_the_handlers(document.body.childNodes);</pre><br />
このように、「関数を返す無名関数をすぐに実行する」という少しわかりづらいコードで、問題を回避できます。先ほどと同じように、for 文のi=1 の時に何が起きているか見てみたいと思います。i=1 の時には、「h1 のonclick イベントに、function(i) &#123; // [function を返すコード] &#125;(i) の実行結果(戻り値が関数)を割り当てろ」という命令がなされています。具体的に言うと、このfunction(i)&#123; &#125;(i) はこのタイミングで直ちに実行されますので、戻ってくる関数は「funcion() &#123; alert(1); &#125;」となります(i=1 なのでalert の中身が1 になる)。つまり、for 文のi=1 の時には、「h1 のonclick イベントにfunction() &#123; alert(1); &#125; を割り当てろ」という命令がなされていることになります。i=1 以外の時も同様で、onclick イベントに割り当てるタイミング(つまりfor 文がまわってるとき)で、その時点でのi を処理してしまっていることが最大のポイントです。その結果、実際にh1 のnode がクリックされると、今度は正しくalert(1) が実行されるようになります。<br />
<br />
言葉で書くと返ってわかりづらく見えてしまいましたが、そういうことです。<br />
この、無名関数を定義して、すぐに実行するという、function()&#123;&#125;(); というのは結構便利なので、覚えておくと良いかもしれません。
]]></content:encoded>
    <dc:subject>JavaScript</dc:subject>
    <dc:date>2009-10-19T16:17:24+09:00</dc:date>
    <dc:creator>junichiro</dc:creator>
    <dc:rights>junichiro</dc:rights>
<taxo:topics>
<rdf:Bag>
<rdf:li rdf:resource="http://jugem.jp/contents/theme.php?theme=13" />
</rdf:Bag>
</taxo:topics>
  </item>

  <item rdf:about="http://en.yummy.stripper.jp/?eid=1299196">
    <link>http://en.yummy.stripper.jp/?eid=1299196</link>
    <title>囲碁のタイトルと序列のまとめ</title>
    <description>概要自分用の備忘録として、囲碁のタイトル戦についてまとめておきたいと思います。ほとんどがwikipedia からの引用です。
覚えておきたいタイトルは下記の通りです。

タイトル名主催優勝賞金棋聖読売新聞社4200万円名人朝日新聞社3700万円本因坊毎日新聞社3200万円十...</description>
<content:encoded><![CDATA[
<h3>概要</h3>自分用の備忘録として、囲碁のタイトル戦についてまとめておきたいと思います。ほとんどがwikipedia からの引用です。<br />
覚えておきたいタイトルは下記の通りです。<br />
<br />
<table><tr><th>タイトル名</th><th>主催</th><th>優勝賞金</th></tr><tr><td>棋聖</td><td>読売新聞社</td><td>4200万円</td></tr><tr><td>名人</td><td>朝日新聞社</td><td>3700万円</td></tr><tr><td>本因坊</td><td>毎日新聞社</td><td>3200万円</td></tr><tr><td>十段</td><td>産経新聞社</td><td>1450万円</td></tr><tr><td>天元</td><td>新聞3社連合</td><td>1400万円</td></tr><tr><td>王座</td><td>日本経済新聞社</td><td>1350万円</td></tr><tr><td>碁聖</td><td>新聞囲碁連盟</td><td style="text-align:right;">777万円</td></tr></table><br />
序列は上記の順番の通りです(Wikipedia によると天元と王座が逆のようですが、基本的には優勝賞金額を基準とするため、こちらが正しいと思われます)。<br />
このうち上位3つ(棋聖、名人、本因坊)を三大タイトルと呼び、他のタイトルよりはランクが上のタイトルとして扱うこともあります。三大タイトルは7番勝負で行われ、それ以外の4つのタイトルは5番勝負で行われます。<br />
<h3>大三冠</h3>上記の三大タイトル全てを、同時に保持することを大三冠と呼びます。現在まで、大三冠を成し遂げたのは、趙治勲ただ1人です。趙治勲は2回大三冠を達成しています。<br />
<h3>グランドスラム</h3>上記7タイトル全てを経験することをグランドスラムと呼びます。同時に保持する必要はありません。現在まで、グランドスラムを達成しているのは趙治勲ただ1人です。また、6つ経験して、グランドスラムにリーチがかかっている現役棋士は、林海峯と張栩の2名です。2名ともあと棋聖をとればグランドスラム達成となります。<br />
<h3>名誉称号について</h3>各タイトルを5連覇もしくは通算10期以上保持すると、名誉称号の保持資格を得ることができ、現役引退後もしくは60歳を過ぎた後に「名誉[タイトル名]」を名乗ることができます。ただし、本因坊のみ名誉本因坊ではなく、25世本因坊治勲のように、何世の誰かをつけた呼び名となります。余談ですが、趙治勲はまだ現役ですし60前なのですが、本因坊10連覇という偉業を達成したため、特例としてすでに25世本因坊を名乗ることを許されています。<br />
<h3>棋士の序列について</h3>棋士の序列は、上記の七大タイトル保持者、名誉称号保持者、三大タイトル経験者、以下九段、八段となっています。ひとりが複数のタイトルを保持している場合、そのタイトルのなかで序列が一番上のものだけが有効になります。極端な話、棋聖以外の全てのタイトルを保持しても、棋聖ひとつを保持している棋士より序列が下になります。<br />
<h3>その他</h3><ul><li>現在まで、同時最多獲得は、張栩の5冠(名人、十段、天元、王座、碁聖)。2009年4月〜2009年9月現在。</li><li>現在の棋聖の保持者は山下敬吾で張栩が5冠を持っているのですが、序列では山下敬吾、張栩の順となります。</li><li>張栩は現在、名人戦の防衛戦を戦っている最中で、これを失うと本因坊も持っていないため、序列は4番以降に下がります。</li></ul><h3>参考</h3><a href="http://ja.wikipedia.org/wiki/棋戦_(囲碁)" target="_blank">棋戦 (囲碁) - Wikipedia</a><h4>登場棋士</h4><ul><li><a href="http://ja.wikipedia.org/wiki/趙治勲" target="_blank">趙治勲 - Wikipedia</a></li><li><a href="http://ja.wikipedia.org/wiki/林海峰" target="_blank">林海峰 - Wikipedia</a></li><li><a href="http://ja.wikipedia.org/wiki/張栩" target="_blank">張栩 - Wikipedia</a></li><li><a href="http://ja.wikipedia.org/wiki/山下敬吾" target="_blank">山下敬吾 - Wikipedia</a></li></ul>
]]></content:encoded>
    <dc:subject>マイニュース</dc:subject>
    <dc:date>2009-09-29T12:15:37+09:00</dc:date>
    <dc:creator>junichiro</dc:creator>
    <dc:rights>junichiro</dc:rights>
<taxo:topics>
<rdf:Bag>
<rdf:li rdf:resource="http://jugem.jp/contents/theme.php?theme=14" />
</rdf:Bag>
</taxo:topics>
  </item>

  <item rdf:about="http://en.yummy.stripper.jp/?eid=1298963">
    <link>http://en.yummy.stripper.jp/?eid=1298963</link>
    <title>iPhone でFX をやりたいのであれば、みんなのFX がいいのではないでしょうか</title>
    <description>いろいろなFX の業者さんがおりますが、提供しているツールがWindows 限定のものが多いと感じています。ツールがWeb アプリのものでさえ、Windows IE 前提のものが多く、Mac Safari だと使いづらい画面を、苦労しながらいじるということになってしまいます。

さらに、M...</description>
<content:encoded><![CDATA[
いろいろなFX の業者さんがおりますが、提供しているツールがWindows 限定のものが多いと感じています。ツールがWeb アプリのものでさえ、Windows IE 前提のものが多く、Mac Safari だと使いづらい画面を、苦労しながらいじるということになってしまいます。<br />
<br />
さらに、Mac をお使いの方は、iPhone をお使いの方も多いかもしれません。FX はタイミングが重要ですので、携帯で取引ができるかどうかは非常に重要だと思うのですが、ここでもiPhone でまともに取引できる業者は少ないように感じています。<br />
<br />
そこで、「みんなのFX」です。<br />
みんなのFX はモバイルサイトをAjax でiPhone 向けに作っているため、ストレス無くiPhone で情報収集及び取引を行えます。iPhone をお持ちの方は、iPhone で下記のURL にアクセスしてみてください。口座を持っていなくても、チャートの閲覧などは可能です。<br />
<br />
<a href="http://tool.min-fx.jp/iFX" target="_blank">http://tool.min-fx.jp/iFX</a><br />
<br />
さらに、みんなのFX は手数料やスプレッドの面でも他の業者にひけを取りません。ひけをとらないどころか、業界トップクラスの水準です。取引手数料は無料ですし、ドル円のスプレッドは0.7銭です。手数料関連が安いと評判の外為オンラインでも、ドル円のスプレッドは1銭かかります。外為オンラインは全ての取引のスプレッドを1銭固定にしているため、ドル円以外では、外為オンラインの方がスプレッドの面は上なので、そこは少し考慮しないといけません。<br />
<br />
ただ、iPhone に対応しているというのがやっぱり大きくて、僕はみんなのFX を使うようになりました。<br />
<a href="http://px.a8.net/svt/ejp?a8mat=1I4WJG+6UHH82+1NAQ+68U4X" target="_blank"><br />
<img border="0" width="320" height="320" alt="" src="http://www27.a8.net/svt/bgt?aid=090928060414&wid=001&eno=01&mid=s00000007685001049000&mc=1"></a><br />
<img border="0" width="1" height="1" src="http://www11.a8.net/0.gif?a8mat=1I4WJG+6UHH82+1NAQ+68U4X" alt=""><br />
※こちらはアフィリエイトになっております。<br />

]]></content:encoded>
    <dc:subject>マイニュース</dc:subject>
    <dc:date>2009-09-28T20:27:26+09:00</dc:date>
    <dc:creator>junichiro</dc:creator>
    <dc:rights>junichiro</dc:rights>
<taxo:topics>
<rdf:Bag>
<rdf:li rdf:resource="http://jugem.jp/contents/theme.php?theme=12" />
</rdf:Bag>
</taxo:topics>
  </item>

  <item rdf:about="http://en.yummy.stripper.jp/?eid=1283236">
    <link>http://en.yummy.stripper.jp/?eid=1283236</link>
    <title>= の位置がそろっているコードをそうじゃないコードにする</title>
    <description>僕は、下記のようにコードを揃えるのが好きだ。無意識のうちにそろえてしまうこともあるし、Perl ならperltidy とかで揃えている。今やっているお仕事でも同じように開発を行っていた。先日いくつかのコードを先方にレビューして頂いたのだが、先方のコーディング規約によ...</description>
<content:encoded><![CDATA[
僕は、下記のようにコードを揃えるのが好きだ。無意識のうちにそろえてしまうこともあるし、Perl ならperltidy とかで揃えている。今やっているお仕事でも同じように開発を行っていた。先日いくつかのコードを先方にレビューして頂いたのだが、先方のコーディング規約によると、こうやって揃えるのは規約違反だということだった。事前にコーディング規約を頂いているので、完全に僕のミスだ。さて、これを直さないといけないんだが、コードをそろえるためのツール(perltidy とか)はあっても、そろっているものをそうじゃなくするツールがすぐには見つからなかった。特に今回は、PHP だったのでperltidy も使えないし、かといって手で全部作業するのはモチベーション的にもキツいし、ミスも多そうだ。<br />
<br />
そこで、先日紹介した「<a href="http://en.yummy.stripper.jp/?eid=1211312" target="_blank">Lisp はわからないけどEmacs で選択範囲に対してごにょごにょしたい</a>」と同じ方法で、正規表現で下記のコードを規約に従ったコードにするためのコードを書いた。<br />
<br />
そろっているコード(いまのお仕事では規約違反)<pre class="code_sample">&#36;row-&gt;topic_category_id = &#36;topic_category_id;<br />
&#36;row-&gt;caption           = &#36;this-&gt;getData()-&gt;caption;<br />
&#36;row-&gt;description       = &#36;this-&gt;getData()-&gt;description;<br />
&#36;row-&gt;user_id           = &#36;user_id;<br />
&#36;row-&gt;uri_thumbnail     = &#36;uri_thumbnail_db;<br />
<br />
&#36;data = array(<br />
    'modified'    =&gt; date('Y/m/d'),<br />
    'modified_by' =&gt; &#36;this-&gt;user_id,<br />
    'status'      =&gt; &#36;this-&gt;status;<br />
);<br />
<br />
&#36;this-&gt;view-&gt;options<br />
    = array(E3::Registry::getConfig()-&gt;label-&gt;selectOption);</pre><br />
規約に従ったコード<pre class="code_sample">&#36;row-&gt;topic_category_id = &#36;topic_category_id;<br />
&#36;row-&gt;caption = &#36;this-&gt;getData()-&gt;caption;<br />
&#36;row-&gt;description = &#36;this-&gt;getData()-&gt;description;<br />
&#36;row-&gt;user_id = &#36;user_id;<br />
&#36;row-&gt;uri_thumbnail = &#36;uri_thumbnail_db;<br />
<br />
&#36;data = array(<br />
    'modified' =&gt; date('Y/m/d'),<br />
    'modified_by' =&gt; &#36;this-&gt;user_id,<br />
    'status' =&gt; &#36;this-&gt;status<br />
);<br />
<br />
&#36;this-&gt;view-&gt;options<br />
    = array(E3::Registry::getConfig()-&gt;label-&gt;selectOption);</pre><br />
ちょっと書いてみると意外と一筋縄では行かなくて、単に=の両サイドだけ置換するような書き方では、最後の行(これはこのままで良い)まで置換されてしまう。なんとなく悔しかったので、_33rpm の力を借りてそれなりに奇麗なものを書いた。<br />
<br />
<a href="http://gist.github.com/175485" target="_blank">gist: 175485 - GitHub</a>
]]></content:encoded>
    <dc:subject>Web技術</dc:subject>
    <dc:date>2009-08-27T11:16:37+09:00</dc:date>
    <dc:creator>junichiro</dc:creator>
    <dc:rights>junichiro</dc:rights>
<taxo:topics>
<rdf:Bag>
<rdf:li rdf:resource="http://jugem.jp/contents/theme.php?theme=1" />
</rdf:Bag>
</taxo:topics>
  </item>

  <item rdf:about="http://en.yummy.stripper.jp/?eid=1266612">
    <link>http://en.yummy.stripper.jp/?eid=1266612</link>
    <title>[雑記]トラックボールを使う4つの理由</title>
    <description>概要2002年にトラックボールを手に入れてから、僕はほとんどマウスを使っていない。2000年に社会人になって、それから2年間はマウスを使っていたことになるが、その後もう6年以上もトラックボールにお世話になりっぱなしだ。正確には、社会人になる前も多少パソコンを使っ...</description>
<content:encoded><![CDATA[
<h3>概要</h3>2002年にトラックボールを手に入れてから、僕はほとんどマウスを使っていない。2000年に社会人になって、それから2年間はマウスを使っていたことになるが、その後もう6年以上もトラックボールにお世話になりっぱなしだ。正確には、社会人になる前も多少パソコンを使っていて、そのときはマウスを使っていたので、もう少しマウスを使った時間は長いかもしれないが、圧倒的にトラックボールの方が使いやすい。<br />
<br />
僕がトラックボールに変えたのは、マウスを買い替えに行ったときに、一緒にいった女の子に、「こっちの方がかっこよくみえるから、これにしな。」と言われたという単純なきっかけだ。最初はえらく使いづらかった。購入を検討している方も、おそらく店頭で試しに操作したら、すぐに買うのをやめてしまうだろうと思う。いまでも僕の席にきてパソコンを触る人は、かなりとまどっている。<br />
<br />
しかし、これは本当にもったいないこと。トラックボールの使いづらさなんて、1週間も続かない。せいぜい3日くらいですぐに手が、指がなれて、マウスより快適になる。おそらくマウスに不満がないので、トラックボールに乗り換える必要性を感じないのだろうけれど、トラックボールにはマウスに無い良さが4つあると、僕は思う。<br />
<h3>1. 手、手首が疲れない</h3>そもそも人間の手首というのは、そんなに細かくたくさん動かすようにはできていない。知らないけど。その点、指はたくさん動かすようにできてる。それを考えるだけでも、マウスよりトラックボールの方が合理的であり、実際、手首の疲れなどはまずありえないし、指はいくら動かしても疲れを感じたことは無い。<br />
<h3>2. 場所をとらない</h3>意外かもしれないが、トラックボールの方が場所をとらない。機器そのものはマウスより大きいので場所をとるように見えるのだが、この機器自体は動かないため、可動範囲を確保しなければいけないマウスより、ずっとコンパクトに扱える。資料があふれかえったデスクで、マウスの可動範囲を確保するのが大変だなんてことはもうない。資料のやまに埋もれても、トラックボールに触れることさえできれば、コントロールはあなたのものだ。<br />
<h3>3. 掃除がいらない。もしくはラク。</h3>マウスと異なり、稼働部がすくないため、ホコリがたまったりポイントの動作がにぶくなったりすることがほとんどない。また、仮にホコリがつまってきても、ボールをはずして、さっとふいてやれば、すぐにもとのコントロールを取り戻せる。しょっちゅうマウスの下をあけて、ホコリをとってるひとは、トラックボールにしてみるとそのストレスがなくなる。マウスのゴミをとるのが結構好き、というひとは好きにすればよい。<br />
<h3>4. 数多くのボタン</h3>これはトラックボールに限らず、マウスにも5ボタンとかがついているので、トラックボールの利点に見えないかもしれないが、デバイスそのものが固定されていて動かないため、これらのボタンも非常に押しやすい。5ボタンマウスの場合、マウスがふらふらと動いてしまうので、いい感じにホールドして、いい感じにボタンを押さないとポイントが動いてしまったりする。マウスに馴れた方はそんなことはないのかもしれないが、僕にとってはこれも利点のひとつだった。ちなみに、MS のトラックボールエクスプローラー + Windows なら、それぞれのボタンをアプリケーション毎に割り当てることができ、自分なりにカスタマイズすると、作業効率がとてつもなく向上する。<br />
<h3>まとめ</h3>正直、歴史的に見て、最初にデファクトを勝ち得たポインティングデバイスが、なぜマウスなのか疑いたくなるくらい、僕はトラックボールをおすすめする。ただ、いくつかのデメリットもある。まず、かなり細かい操作を要求される場合、人間的には指より意外と手首の方が調整がきくらしく、デザイン系の作業をされる方にはマウスの方がいいかもしれない。ただ、デザイン系の作業はほとんどペンタブレットで行うという人は、通常作業をトラックボールにするのもいいかもしれない。こういう方は、通常作業もペンタブレットというひとも多いので、それはそれでいいと思う。あと、ゲームにも向かない。これも結構致命的で、右クリックしながらの動作とか苦手だし、右クリックも左クリックもどちらも親指に割り当てられているため、稀にある右クリックと左クリックの同時押しなどを要求されても無理ってもん。まあ、これらは、マウスがデファクトという前提で、マウスにあわせたUIで作られているから仕方が無く、デバイスとしてのトラックボールのマイナス点を示すものでもない。<br />
<br />
いや、そうとも言えないか。これからでる様々なUIを持つアプリも、当然マウスがデファクトのポインティングデバイスとして想定されているわけだから、こういう問題は起きるかもしれない。というわけで、開発者がマウスだけでなくトラックボールユーザーも意識するくらい、トラックボールのシェアを増やさないとだめか。<br />
<br />
どうでしょう。<br />
<br />
<table class="yztbl"><tr valign="top"><td class="yz-image"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00008B4C4/portalportal-22/" target="_blank"><img src="http://ecx.images-amazon.com/images/I/114T206FRHL._SL160_.jpg" style="border: none;" /></a></td><td class="yz-info"><div class="yz-name"><a href="http://yasazon.com/asin/B00008B4C4.html" target="_blank"><img src="http://images-jp.amazon.com/images/G/09/icons/icon-ce.gif" border="0" align="left"></a><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00008B4C4/portalportal-22/" name="yzlink" target="_blank">Trackball Explorer</a></div><div class="yz-detail" style="font-size:small">  <img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-4-0.gif" style="border: none;" /><br><img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-5-0.gif">あえて難点を上げるとすれば親指を酷使しすぎる点<br><img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-4-0.gif">マウスよりやはり使いやすい<br><img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-3-0.gif">使い始めたばかりですが、使用感を一言<br><img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-5-0.gif">往年の名選手<br><img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-5-0.gif">最高のマウス<br></div></td></tr></table><br />
<br />
<strong><span style="font-size:large;">おいおい、ここまで書いたのにトラックボールエクスプローラーは生産中止かよ！</span></strong><br />
<br />
しかたない、ケンジントンの名作を貼っておこう。<br />
<br />
<table class="yztbl"><tr valign="top"><td class="yz-image"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B0024AFD42/portalportal-22/" target="_blank"><img src="http://ecx.images-amazon.com/images/I/31nN6DDFBVL._SL160_.jpg" style="border: none;" /></a></td><td class="yz-info"><div class="yz-name"><a href="http://yasazon.com/asin/B0024AFD42.html" target="_blank"><img src="http://images-jp.amazon.com/images/G/09/icons/icon-ce.gif" border="0" align="left"></a><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B0024AFD42/portalportal-22/" name="yzlink" target="_blank">ケンジントン SlimBlade Trackball 72327</a></div><div class="yz-detail" style="font-size:small"><a href="http://yasazon.com/s/portalportal-22/%E3%82%B1%E3%83%B3%E3%82%B8%E3%83%B3%E3%83%88%E3%83%B3.html">ケンジントン</a> ￥ 14,801 <img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-4-0.gif" style="border: none;" /><br><img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-3-0.gif">PS2接続<br><img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-4-0.gif">初めてトラックボールマウスを利用<br><img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-4-0.gif">価格が難点<br><img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-3-0.gif">デザイン、操作感は良好だが・・・<br><img src="http://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-5-0.gif">マウスパッドからマウスがはみ出すとイラッとする人へ<br></div></td></tr></table><br />
<br />
あーそうそう。あと、マウスより高いです、平均的に。<br />
作業効率があがることを思えば、気にならないよね！
]]></content:encoded>
    <dc:subject>PC/家電</dc:subject>
    <dc:date>2009-07-27T12:19:28+09:00</dc:date>
    <dc:creator>junichiro</dc:creator>
    <dc:rights>junichiro</dc:rights>
<taxo:topics>
<rdf:Bag>
<rdf:li rdf:resource="http://jugem.jp/contents/theme.php?theme=13" />
</rdf:Bag>
</taxo:topics>
  </item>

  <item rdf:about="http://en.yummy.stripper.jp/?eid=1255419">
    <link>http://en.yummy.stripper.jp/?eid=1255419</link>
    <title>[JavaScript]今度はボードゲームのダイヤモンドを作った</title>
    <description>js 特訓月なので、js をいろいろ触っているのだが、今度はダイヤモンドという人気のボードゲームを実装してみた。本来のダイヤモンドは、ダイヤモンドの眠る危険な洞窟に、これ以上奥まで行くか、はたまたここで帰るのかというジレンマを、周囲のみんなを牽制し合いながら...</description>
<content:encoded><![CDATA[
js 特訓月なので、js をいろいろ触っているのだが、今度はダイヤモンドという人気のボードゲームを実装してみた。本来のダイヤモンドは、ダイヤモンドの眠る危険な洞窟に、これ以上奥まで行くか、はたまたここで帰るのかというジレンマを、周囲のみんなを牽制し合いながら楽しむという非常にスリリングなのものなのだが、その大事な部分をばっさりとカットして、今回は1人用のダイヤモンドにした。<br />
<br />
奥深くまで行く方がメリットが出るようにアレンジし、ひとりでも楽しめるようにしたのだが、まあ、評判は悪い。<br />
<pre class="terminal">11:10 mizzu_1: もうでけたのか<br />
11:10 mizzu_1: ああ<br />
11:10 junichiro: ひとり用だもの<br />
11:10 mizzu_1: １人プレイかい<br />
(中略)<br />
11:13 mizzu_1: 坊主めくりじゃんって<br />
11:13 mizzu_1: 気がしちゃうんです</pre><br />
【それでも遊びたい方はこちら→】<a href="http://www.e-3lab.com/diamond" target="_blank">Diamond</a><br />
僕は、最高で259個のダイヤモンドを持ち帰ったことがある。<br />
<br />
diamond/index.html<pre class="code_sample">&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;<br />
&quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;<br />
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;<br />
  &lt;head&gt;<br />
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;<br />
    &lt;link rel=&quot;stylesheet&quot; href=&quot;../css/diamond.css&quot;&gt;<br />
    &lt;script src=&quot;../lib/jquery/jquery-1.3.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />
    &lt;script src=&quot;../lib/diamond.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />
    &lt;title&gt;Diamond&lt;/title&gt;<br />
  &lt;/head&gt;<br />
  &lt;body&gt;<br />
    &lt;h1&gt;Diamond&lt;/h1&gt;<br />
    &lt;div id=&quot;status&quot;&gt;<br />
      &lt;span class=&quot;label&quot;&gt;現在のダイヤモンド: &lt;/span&gt;<br />
      &lt;span class=&quot;value&quot;&gt;&lt;span id=&quot;count&quot;&gt;0&lt;/span&gt;個&lt;/span&gt;<br />
      &lt;span class=&quot;label&quot;&gt;危険度: &lt;/span&gt;<br />
      &lt;span class=&quot;value&quot;&gt;&lt;span id=&quot;danger&quot;&gt;0&lt;/span&gt;%&lt;/span&gt;<br />
      &lt;span class=&quot;label&quot;&gt;残り枚数: &lt;/span&gt;<br />
      &lt;span class=&quot;value&quot;&gt;&lt;span id=&quot;left&quot;&gt;30&lt;/span&gt;枚&lt;/span&gt;<br />
    &lt;/div&gt;<br />
    &lt;div id=&quot;field&quot;&gt;&lt;/div&gt;<br />
    &lt;div id=&quot;action&quot;&gt;<br />
      &lt;input type=&quot;button&quot; id=&quot;go&quot; value=&quot;Go!&quot; /&gt;<br />
      &lt;input type=&quot;button&quot; id=&quot;return&quot; value=&quot;Return...&quot; /&gt;<br />
    &lt;/div&gt;<br />
    &lt;div&gt;<br />
      &lt;h3&gt;危険度によるブースト&lt;/h3&gt;<br />
      &lt;ul&gt;<br />
        &lt;li&gt; 0〜10%  - そのまま&lt;/li&gt;<br />
        &lt;li&gt;10〜20%  - 2倍&lt;/li&gt;<br />
        &lt;li&gt;20〜30%  - 4倍&lt;/li&gt;<br />
        &lt;li&gt;30〜40%  - 8倍&lt;/li&gt;<br />
        &lt;li&gt;40% 以上 - 20倍&lt;/li&gt;<br />
      &lt;/ul&gt;<br />
    &lt;/div&gt;<br />
  &lt;/body&gt;<br />
&lt;/html&gt;</pre><br />
lib/diamond.js<pre class="code_sample">if( typeof( window.Diamond ) == &quot;undefined&quot;) &#123;<br />
<br />
    // Diamond コンストラクタ<br />
    var Diamond = function() &#123; return this; &#125;;<br />
<br />
    // Version<br />
    Diamond.VERSION = '0.01';<br />
<br />
    // Diamond オブジェクトのプロパティ(デフォルト値)<br />
    Diamond.prototype.cgiurl = 'diamond.cgi';<br />
    Diamond.prototype.cards  = [<br />
        2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,<br />
        'Sneak', 'Sneak', 'Sneak',<br />
        'Explosion', 'Explosion', 'Explosion',<br />
        'Gas', 'Gas', 'Gas',<br />
        'Scorpion', 'Scorpion', 'Scorpion',<br />
        'Rock', 'Rock', 'Rock',<br />
    ];<br />
<br />
    Diamond.prototype.bads = &#123;<br />
        &quot;Sneak&quot;:0, &quot;Explosion&quot;:1, &quot;Gas&quot;:2, &quot;Scorpion&quot;:3, &quot;Rock&quot;:4<br />
    &#125;<br />
<br />
    Diamond.prototype.potential = new Array();<br />
    Diamond.prototype.accident  = new Array();<br />
    for(var i = 0; i&lt;5; i++) &#123;<br />
        Diamond.prototype.potential[i] = 3;<br />
        Diamond.prototype.accident[i] = 0;<br />
    &#125;<br />
<br />
    Diamond.prototype.diamond = 0;<br />
    Diamond.prototype.left    = 30;<br />
<br />
    Diamond.prototype.init = function() &#123;<br />
        var __this = this;<br />
        __this.cards  = [<br />
            2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,<br />
            'Sneak', 'Sneak', 'Sneak',<br />
            'Explosion', 'Explosion', 'Explosion',<br />
            'Gas', 'Gas', 'Gas',<br />
            'Scorpion', 'Scorpion', 'Scorpion',<br />
            'Rock', 'Rock', 'Rock',<br />
        ];<br />
        &#36;(&quot;#go&quot;).click(function(e) &#123;<br />
            __this.go(e);<br />
        &#125;);<br />
        &#36;(&quot;#return&quot;).click(function(e) &#123;<br />
            __this.go_home(e);<br />
        &#125;);<br />
        __this.diamond = 0;<br />
        __this.left    = 30;<br />
        for(var i = 0; i&lt;5; i++) &#123;<br />
            __this.potential[i] = 3;<br />
            __this.accident[i] = 0;<br />
        &#125;<br />
        __this.display();<br />
    &#125;<br />
<br />
    Diamond.prototype.go = function( arg ) &#123;<br />
        var __this   = this;<br />
        var left     = __this.cards.length;<br />
        var draw_sub = Math.floor( Math.random() * left );<br />
        var draw     = __this.cards[draw_sub];<br />
        __this.add_field( draw );<br />
        var new_cards = new Array();<br />
        for( var i = 0; i&lt;left; i++ ) &#123;<br />
            if( i == draw_sub ) continue;<br />
            new_cards.push(__this.cards[i]);<br />
        &#125;<br />
        __this.cards = new_cards;<br />
        if(typeof draw == 'string') &#123; // accident!<br />
            var sub = __this.bads[draw];<br />
            __this.potential[sub]--;<br />
            __this.accident[sub]++;<br />
            if(__this.is_finished()) &#123;<br />
                __this.game_over();<br />
            &#125;;<br />
        &#125;<br />
        if(typeof draw == 'number') &#123; // diamond!<br />
            __this.diamond += draw * __this.boost();<br />
        &#125;<br />
        __this.display();<br />
    &#125;<br />
<br />
    Diamond.prototype.go_home = function( arg ) &#123;<br />
        var __this = this;<br />
        alert(&quot;You are a chiken!&yen;nGo home!&yen;n&yen;nYou got &quot; + __this.diamond + &quot; diamonds!&quot;);<br />
        &#36;(&quot;#go&quot;).unbind();<br />
        &#36;(&quot;#return&quot;).unbind();<br />
        &#36;(&quot;#action&quot;).empty();<br />
    &#125;<br />
<br />
    Diamond.prototype.danger = function( arg ) &#123;<br />
        var __this = this;<br />
        var dan = 0;<br />
        for(var i = 0; i&lt;5; i++) &#123;<br />
            if(__this.accident[i] == 1) dan += __this.potential[i];<br />
        &#125;<br />
        var danger = Math.floor(dan * 100 / __this.cards.length * 10) / 10;<br />
        return danger;<br />
    &#125;<br />
<br />
    Diamond.prototype.boost = function( arg ) &#123;<br />
        var __this = this;<br />
        var danger = __this.danger();<br />
        if(danger &lt; 10) return 1;<br />
        if(danger &lt; 20) return 2;<br />
        if(danger &lt; 30) return 4;<br />
        if(danger &lt; 40) return 8;<br />
        return 20;<br />
    &#125;<br />
<br />
    Diamond.prototype.is_finished = function( arg ) &#123;<br />
        var __this = this;<br />
        for(var i = 0; i&lt;5; i++) &#123;<br />
            if(__this.accident[i] == 2) return true;<br />
        &#125;<br />
        return false;<br />
    &#125;<br />
<br />
    Diamond.prototype.display = function ( arg ) &#123;<br />
        var __this = this;<br />
        &#36;('#left').empty().append(__this.cards.length);<br />
        &#36;('#count').empty().append(__this.diamond);<br />
        &#36;('#danger').empty().append(__this.danger());<br />
    &#125;<br />
<br />
<br />
    Diamond.prototype.game_over = function ( arg ) &#123;<br />
        var __this = this;<br />
        alert(&quot;You got no diamond!&yen;nGAME OVER!&quot;);<br />
        &#36;(&quot;#go&quot;).unbind();<br />
        &#36;(&quot;#return&quot;).unbind();<br />
        &#36;(&quot;#action&quot;).empty();<br />
        __this.diamond = 0;<br />
        __this.left    = 30;<br />
        __this.init();<br />
    &#125;<br />
<br />
<br />
    Diamond.prototype.add_field = function ( arg ) &#123;<br />
        var div  = document.createElement('div');<br />
        div.setAttribute('class', 'card');<br />
        var text = document.createTextNode(arg);<br />
        div.appendChild(text);<br />
        if(typeof arg == 'string')&#123;<br />
            jQuery(div).css('background-color', '#FFDDDD');<br />
        &#125;<br />
        &#36;('#field').append( div );<br />
        if(typeof arg == 'string')&#123;<br />
            var br = document.createElement('br');<br />
            jQuery(br).css('clear', 'both');<br />
            &#36;('#field').append( br );<br />
        &#125;<br />
    &#125;<br />
<br />
    // リモート計算を行うメソッド<br />
    Diamond.prototype.expr = function ( arg ) &#123;<br />
        // CGI に渡すパラメータオブジェクトを生成<br />
        var param = &#123;<br />
            q: arg<br />
        &#125;;<br />
        // コールバック関数無いではthis が使えないのでコピー<br />
        var __this = this;<br />
        // JSON データを受取るコールバック関数<br />
        var func = function ( data ) &#123;<br />
            if ( ! data ) return null;<br />
            if ( data.status != 'ok' ) data.result = '';<br />
            &#36;(__this.result).text(data.result);<br />
            &#36;(__this.status).text(data.status);<br />
        &#125;;<br />
        // CGI を呼び出して、JSON データを受取る<br />
        jQuery.getJSON( this.cgiurl, param, func );<br />
    &#125;<br />
&#125;<br />
<br />
// main<br />
&#36;(document).ready(function()&#123;<br />
    var d = new Diamond();<br />
    &#36;('#field').empty();<br />
    d.init();<br />
&#125;);</pre><br />
AI を実装してNPC とプレイできるようにすればそこそこ盛り上がるとアドバイスをもらい、AI といえばjunichiro くらいのノリで行きたい僕としては、多いにモチベーションがあがったのだが、js の特訓という目的から大きく逸脱していることに気がついてやめた。<br />
<br />
次のお勉強は、ドラッグアンドドロップとなんとなくうわついたフレームみたいなやつを学ぶ予定。それからちょっとしたビジュアル的ななにかを勉強して行きたい。ダイヤモンド のNPC のAI はその後だが、その頃には需要がなくなっていると予想。
]]></content:encoded>
    <dc:subject>JavaScript</dc:subject>
    <dc:date>2009-07-08T12:48:23+09:00</dc:date>
    <dc:creator>junichiro</dc:creator>
    <dc:rights>junichiro</dc:rights>
<taxo:topics>
<rdf:Bag>
<rdf:li rdf:resource="http://jugem.jp/contents/theme.php?theme=12" />
</rdf:Bag>
</taxo:topics>
  </item>

  <item rdf:about="http://en.yummy.stripper.jp/?eid=1255043">
    <link>http://en.yummy.stripper.jp/?eid=1255043</link>
    <title>[Perl][JavaScript]JavaScript とPerl で○×ゲームを作った</title>
    <description>OpenSocial とかで遊ぶためにもJavaScript は必須で、いままで避けて通ろうとしていたのが、そろそろそうは行かなくなってきた。そのため、今月はmixi hackathon もあることだし、それまでにしっかりとJavaScript を身につけるため、js 特訓月とした。

今日は、そのト...</description>
<content:encoded><![CDATA[
OpenSocial とかで遊ぶためにもJavaScript は必須で、いままで避けて通ろうとしていたのが、そろそろそうは行かなくなってきた。そのため、今月はmixi hackathon もあることだし、それまでにしっかりとJavaScript を身につけるため、js 特訓月とした。<br />
<br />
今日は、そのトレーニングの一環として、○×ゲーム(英名: TicTacToe)を作った。<br />
【こちらで遊べます→】<a href="http://www.e-3lab.com/tictactoe/" target="_blank">TicTacToe</a><br />
<br />
tictactoe.html<pre class="code_sample">&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;<br />
&quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;<br />
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;<br />
  &lt;head&gt;<br />
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;<br />
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/tictactoe.css&quot;&gt;<br />
    &lt;script src=&quot;lib/jquery/jquery-1.3.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />
    &lt;script src=&quot;lib/tictactoe.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />
    &lt;title&gt;JavaScript Training (TicTacToe)&lt;/title&gt;<br />
  &lt;/head&gt;<br />
  &lt;body&gt;<br />
    &lt;h1&gt;TicTacToe&lt;/h1&gt;<br />
    &lt;div id=&quot;field&quot;&gt;&lt;/div&gt;<br />
    &lt;div id=&quot;result&quot;&gt;&lt;/div&gt;<br />
    &lt;div id=&quot;retry&quot;&gt;&lt;/div&gt;<br />
  &lt;/body&gt;<br />
&lt;/html&gt;</pre><br />
HTML にはプレースホルダーとなるdiv をいくつか書いただけで、あとはjs で書くことにした。<br />
<br />
lib/tictactoe.js<pre class="code_sample">if( typeof( window.TicTacToe ) == &quot;undefined&quot;) &#123;<br />
<br />
    // TicTacToe コンストラクタ<br />
    var TicTacToe = function() &#123; return this; &#125;;<br />
<br />
    // Version<br />
    TicTacToe.VERSION = '0.01';<br />
<br />
    // TicTacToe オブジェクトのプロパティ<br />
    TicTacToe.prototype.cgiurl = 'tictactoe.cgi';<br />
    TicTacToe.prototype.result = '#result';<br />
    TicTacToe.prototype.level  = '1000';<br />
    TicTacToe.prototype.data   = [<br />
        0, 0, 0,<br />
        0, 0, 0,<br />
        0, 0, 0,<br />
    ];<br />
    TicTacToe.prototype.lock  = '0';<br />
<br />
    TicTacToe.prototype.init = function ( arg ) &#123;<br />
        var __this = this;<br />
        __this.data = [0, 0, 0, 0, 0, 0, 0, 0, 0]<br />
        &#36;('#result').empty();<br />
        &#36;('#retry').empty();<br />
        __this.display();<br />
    &#125;<br />
<br />
    TicTacToe.prototype.event_init  = function( arg ) &#123;<br />
        var __this = this;<br />
        &#36;(&quot;table.game-field tr td&quot;).mouseover(function(e) &#123;<br />
            __this.mouseover(e);<br />
        &#125;);<br />
        &#36;(&quot;table.game-field tr td&quot;).mouseout(function(e) &#123;<br />
            __this.clear_color(e);<br />
        &#125;);<br />
        &#36;(&quot;table.game-field tr td&quot;).click(function(e) &#123;<br />
            if( __this.lock == '0' ) &#123;<br />
                __this.hit(e);<br />
                __this.lock = '1';<br />
            &#125;<br />
        &#125;);<br />
    &#125;<br />
<br />
    // 着手計算結果<br />
    TicTacToe.prototype.expr = function ( arg ) &#123;<br />
        // CGI に渡すパラメータオブジェクトを生成<br />
        var param = &#123;<br />
            q: arg,<br />
            l: this.level,<br />
//            debug: '1'<br />
        &#125;;<br />
        // コールバック関数無いではthis が使えないのでコピー<br />
        var __this = this;<br />
        // JSON データを受取るコールバック関数<br />
        var func = function ( data ) &#123;<br />
//            alert( data.debug );<br />
            __this.data = data.field;<br />
            __this.display( data.field );<br />
            &#36;(__this.result).text(data.result);<br />
            if( data.status != '0' ) __this.finish( data.status );<br />
            __this.lock = '0';<br />
        &#125;;<br />
        // CGI を呼び出して、JSON データを受取る<br />
        jQuery.getJSON( this.cgiurl, param, func );<br />
    &#125;<br />
<br />
    TicTacToe.prototype.mouseover = function ( arg ) &#123;<br />
        var obj = jQuery(arg.currentTarget);<br />
        var txt = obj.text();<br />
        if(txt == '') &#123;<br />
            obj.css('cursor', 'pointer');<br />
            obj.css('background-color', '#FFE7A1');<br />
        &#125;<br />
        else &#123;<br />
            obj.css('cursor', 'no-drop');<br />
        &#125;<br />
    &#125;<br />
<br />
    TicTacToe.prototype.clear_color = function ( arg ) &#123;<br />
        var obj = jQuery(arg.currentTarget);<br />
        obj.css('background-color', '#FFFFFF');<br />
    &#125;<br />
<br />
    TicTacToe.prototype.hit = function ( arg ) &#123;<br />
        var td   = arg.currentTarget;<br />
        if(td.textContent != '') return;<br />
        var data = this.data;<br />
        var sub  = td.id.split('-')[1];<br />
        data[sub] = 1;<br />
        this.data = data;<br />
        this.display( data );<br />
        this.expr( data );<br />
    &#125;<br />
<br />
    TicTacToe.prototype.display = function ( arg ) &#123;<br />
        &#36;('#field').empty();<br />
<br />
        var data;<br />
        if( arg &amp;&amp; arg.length == 9 ) &#123;<br />
            data = arg;<br />
        &#125;<br />
        else &#123;<br />
            data = this.data;<br />
        &#125;<br />
<br />
        var field = document.getElementById('field');<br />
        var div   = document.createElement('div');<br />
        var tab   = document.createElement('table');<br />
        tab.setAttribute('class', 'game-field');<br />
<br />
        var tr = new Array();<br />
        var td = new Array();<br />
        for ( var i=0; i&lt;3; i++) &#123;<br />
            tr[i] = document.createElement('tr');<br />
            for ( var j=0; j&lt;3; j++) &#123;<br />
                var sub = i*3+j;<br />
                var text;<br />
                if(data[sub] == '1') &#123;<br />
                    text = document.createTextNode('○');<br />
                &#125;<br />
                else if(data[sub] == '2') &#123;<br />
                    text = document.createTextNode('×');<br />
                &#125;<br />
                else &#123;<br />
                    text = document.createTextNode('');<br />
                &#125;<br />
                td[j] = document.createElement('td');<br />
                td[j].id = 'id-'+sub;<br />
                td[j].appendChild(text);<br />
                tr[i].appendChild(td[j]);<br />
            &#125;<br />
            tab.appendChild(tr[i]);<br />
        &#125;<br />
<br />
        div.appendChild(tab);<br />
        field.appendChild(div);<br />
        this.event_init();<br />
    &#125;<br />
<br />
    TicTacToe.prototype.finish = function( status ) &#123;<br />
        var __this = this;<br />
        var color = &#123;1: '#DDDDFF', 2: '#FFDDDD', 3: '#DDDDDD'&#125;;<br />
        &#36;(&quot;table.game-field tr td&quot;).unbind();<br />
        &#36;(&quot;table.game-field tr td&quot;).css('background-color', color[status]);<br />
<br />
        var btn = document.createElement('input');<br />
        btn.type  = 'button';<br />
        btn.value = 'リトライ';<br />
        jQuery(btn).click(function(e) &#123;<br />
            __this.init();<br />
        &#125;);<br />
        var retry = document.getElementById('retry');<br />
        retry.appendChild(btn);<br />
    &#125;<br />
<br />
&#125;<br />
<br />
// main<br />
&#36;(document).ready(function()&#123;<br />
    var ttt = new TicTacToe();<br />
    ttt.init();<br />
&#125;);</pre><br />
サーバサイドは、以前モンテカルロ法の調査をしているときに作ったAI で○×ゲームのcomp 側を実装した。<br />
tictactoe.cgi<pre class="code_sample">#!/usr/bin/perl<br />
use strict;<br />
use warnings;<br />
use Data::Dumper;<br />
use CGI;<br />
use JSON;<br />
use Games::TicTacToe;<br />
<br />
my &#36;out   = &#123;&#125;;<br />
my &#36;cgi   = CGI-&gt;new();<br />
my @data  = &#36;cgi-&gt;param('q');<br />
my &#36;level = &#36;cgi-&gt;param('l') || '200';<br />
<br />
# debug<br />
&#36;cgi-&gt;param('debug') and &#36;out-&gt;&#123;debug&#125;  = Dumper(&yen;@data);<br />
<br />
# initialize<br />
scalar(@data) != 9 and @data = qw/0 0 0 0 0 0 0 0 0/;<br />
<br />
# output header<br />
print &#36;cgi-&gt;header( -type =&gt; 'text/plain', -charset =&gt; 'utf-8' );<br />
<br />
# calculate<br />
my &#36;ttt = Games::TicTacToe-&gt;new(@data);<br />
&amp;is_finished(&#36;ttt, &#36;out);<br />
if ( &#36;out-&gt;&#123;status&#125; eq '0' ) &#123;<br />
    my &#36;result = &#36;ttt-&gt;is_finished();<br />
    &#36;ttt-&gt;level(&#36;level);<br />
    my &#36;score         = &#36;ttt-&gt;calc_next_matrix();<br />
    my &#36;next_location = &#36;ttt-&gt;next_location(&#36;score);<br />
    &#36;data[&#36;next_location] = &#36;ttt-&gt;player;<br />
    &#36;ttt-&gt;hit(&#36;next_location);<br />
    &amp;is_finished( &#36;ttt, &#36;out );<br />
&#125;<br />
<br />
# response<br />
&#36;out-&gt;&#123;field&#125;  = &yen;@data;<br />
<br />
# output json<br />
print JSON::objToJson(&#36;out), &quot;&yen;n&quot;;<br />
<br />
sub is_finished &#123;<br />
    my (&#36;ttt, &#36;out) = @_;<br />
    my &#36;result;<br />
    if ( &#36;result = &#36;ttt-&gt;is_finished() ) &#123;<br />
        my %res = ( '1' =&gt; 'You win!', '2' =&gt; 'You lose...', '3' =&gt; 'Draw' );<br />
        &#36;out-&gt;&#123;result&#125; = &#36;res&#123;&#36;result&#125;;<br />
        &#36;out-&gt;&#123;status&#125; = &#36;result;<br />
    &#125;<br />
    else &#123;<br />
        &#36;out-&gt;&#123;result&#125; = '';<br />
        &#36;out-&gt;&#123;status&#125; = '0';<br />
    &#125;<br />
    return &#36;out;<br />
&#125;</pre><br />
Games::TicTacToe の中身はgithub にあげてある。<br />
<a href="http://github.com/junichiro/games-tictactoe/tree/master" target="_blank">junichiro's games-tictactoe at master - GitHub</a>
]]></content:encoded>
    <dc:subject>Perl</dc:subject>
    <dc:date>2009-07-07T20:09:59+09:00</dc:date>
    <dc:creator>junichiro</dc:creator>
    <dc:rights>junichiro</dc:rights>
<taxo:topics>
<rdf:Bag>
<rdf:li rdf:resource="http://jugem.jp/contents/theme.php?theme=13" />
</rdf:Bag>
</taxo:topics>
  </item>

</rdf:RDF>