OmniAICreator/Qiita-1.07M huggingface dataset:
メンバ転送で内部DSLをつくる

　やっはろー。もう日付は過ぎていますけど、飛び入りで参加します。

　Ruby の `method_missing` や Scala の `applyDinamic` のように、D言語でも `opDispatch` を定義することで存在しないメソッドを呼んだときの動作をフックすることができます。

```d
import std.stdio, std.string;

struct Foo {
    string opDispatch(string name)() const {
        return ["Call", name, "!"].join(" ");
    }

    string opDispatch(string name)(string arg) const {
        return ["Call", name, "with", arg, "!"].join(" ");
    }
}

void main() {
    auto foo = new Foo();
    writeln(foo.bar()); // Call bar !
    writeln(foo.baz("qux")); // Call baz with qux !
}
```

テンプレートの第一引数にメソッド名を取る他は普通のメソッドと同じです。

　これを利用して、XML を出力する内部 DSL を書いてみました。

```d
import std.algorithm, std.ascii, std.range, std.regex, std.string;

struct XMLGenerator {
    struct XMLElement {
        string elem;
        string[string] attr;
        string text;
        XMLElement[] children;

        string toString(int level = 0) const {
            auto indent = "  ".repeat(level).join;
            auto attribute = (attr.length)? " " ~ attr.keys.map!(k => k ~ `="` ~ attr[k] ~ `"`).join(" "): "";

            return [
                indent ~ "<" ~ elem ~ attribute ~ ">",
                (text.length)? indent ~ "  " ~ text: null,
                children.map!(x => x.toString(level + 1)).join(newline),
                indent ~ "</" ~ elem ~ ">"
            ].filter!(x => x).join(newline);
        }
    }

    alias E = XMLElement;

    static E opDispatch(string elem)(E[] children) const {
        return XMLGenerator.opDispatch!elem(null, null, children);
    }

    static E opDispatch(string elem)(string text, E[] children = null) const {
        return XMLGenerator.opDispatch!elem(null, text, children);
    }

    static E opDispatch(string elem)(string[string] attribute = null, string text = null, E[] children = null) const {
        return E(elem.replaceAll(regex("^_"), ""), attribute, text, children);
    }
}
```

こんな感じで使います。

```d
import std.stdio;

void main() {
    alias XML = XMLGenerator;
    writeln(
        XML.html([
            XML.head([
                XML.title("D Programming Language")
            ]),
            XML._body([
                XML.h1([
                    XML.font(["color": "#ff0000"], "D "),
                    XML.span("Programming Language")
                ]),
                XML.b("Hello world!")
            ])
        ])
    );
}
```

```html
<html>
  <head>
    <title>
      D Programming Language
    </title>
  </head>
  <body>
    <h1>
      <font color="#ff0000">
        D 
      </font>
      <span>
        Programming Language
      </span>
    </h1>
    <b>
      Hello world!
    </b>
  </body>
</html>
```

`mixin` と組み合わせたら化けそうです。お粗末さまでした。

> [Operator Overloading - D Programming Language](http://dlang.org/operatoroverloading.html#Dispatch)
WordPressテーマをイチから自作してみる　ーその３

やっと管理画面を触る時がきました。
学校や企業のサイトをWordPressで作る場合の、最低限必要な設定、プラグインなどを挙げておきます。

#WordPress管理画面での設定

##パーマリンク設定
設定＞パーマリンク設定
カスタム構造を選択

##プラグインのインストール
My Page Order　ー　固定ページを好きな順番に並び替えるプラグイン
WP Multibyte Patch　ー　マルチバイト文字のためのプラグイン
WordPress Flash Uploader　ー　FTPを使ってアップロードした画像ファイルなどを「メディア」に認識させるためのプラグイン
Custom Field Template　ー　投稿にカスタムフィールドを設定するためのプラグイン

##テーマを選択
これから作るテーマが、先程style.cssに記述したテーマ名で出てくるはずなので、それを選択して有効化する。
サイトを表示すると、真っ白になるが、http://hoge/wordpress/wp-admin.phpでいつでも管理画面に戻ってこれるのでご心配なく。

#固定ページを投稿する
内容が白紙でもいいので、固定ページとわかっているページをおおまかに作っておく。
TOP（またはHOME）、ブログトップ（適当な名前で）も作成。また、最低1ページは内容のあるページを作る。
こうしておくと、ヘッダーやフッタ、サイドバーを作りこむ際に、実際の表示を確かめながらできる。
パーマリンクには日本語を使わず、ローマ字でも英語でも何でもいいが、とにかく半角英数を使う。
「学園案内ー沿革」の「沿革」のように、親があるページは、親ページを指定できるので、指定しておく。

また、固定ページ一覧で見やすいように、「My Page Order」プラグインを使って、順番を整える。
設定＞表示設定で、フロントページにTOPを、投稿ページにブログトップを選択する。
![](http://cl.ly/image/3L3Z0o2g111v/ss-20140114-01.png)


***

次は固定ページ用テンプレート　page.php　を作ります
git reset を怖がらずに便利に利用してみよう。


## reset コマンドって怖いもの・・？
たまに話題になるんですが、

```
 git reset
```

コマンドを利用するときに「怖い」とか「あまり使う気になれない」みたいな話を聞きます。でも個人的には「気軽に使える便利なコマンド」のひとつなので、その理由とかを紹介したいと思います。

※別に怖がったりしてないって人にはつまらないエントリになると思います。

## git で怖いコマンドとは？
そもそも大前提として、「git に怖いコマンドなんてほとんどない」と思っています。その理由は「pushさえしておけば、ローカルは壊れてもいいから」に尽きると思っているからです。

なので怖いコマンドとなると以下みたいなコマンドですね。

```
git push origin :master
```

リモートブランチ削除なんてしたら大変です。^^;

```
git push -f origin master
```
便利そうで一番使ってはいけないコマンドの一つだと思っています^^;

```
git gc
```
唯一リモート関係ないコマンドですが、reflogが参照できなくなるので怖いです。

## reset をつかって unstage

```
git reset --soft
```

一番使う便利resetコマンドですね！

間違えてコミットしてしまったものをresetしたり、add してしまったものをunstagedに戻したい場合に結構使っています。

## reset --hard で気軽なリセット

```
git reset --hard
```

個人的には結構頻繁に利用するコマンドです。
バージョン管理の真骨頂、「いつでも過去に戻れる」っつーコマンドですね。
ちょっと違う使い方としては「作業内容をリセット」するのにも使ったりしています。かなり便利ですよ。

## 怖がらず気軽にリセット！
ということで、もしも怖がっていた方も今日からバシバシ git reset してください！w
VHDLのmath_realパッケージを使用した sin() と cos() の計算

この前はVerilog HDLの話題でしたが、今度はVHDLの話題です。
Verilog HDLで最近は書いていますが、演算が入っているモジュールは VHDL で書いています。やはり、math_real パッケージが使えて、スタティックとは言え、三角関数やLOGなどが使えるのがとっても良いです。
このブログ記事では、FFTを自作するために sin()  と cos()  の値を math_real パッケージを使って、10ビットの固定小数点で求めました。Excel を使用して浮動小数点数演算と固定小数点演算の誤差も検証しました。
hiyuhさんに、教えてもらったVHDLの神実装も貼ってあります。ぜひご覧下さい。
なお、FFTは完全にパイプライン動作するように実装されていて完成しています。

[VHDLのmath_realパッケージを使用した sin() と cos() の計算](http://marsee101.blog19.fc2.com/blog-entry-2521.html "VHDLのmath_realパッケージを使用した sin() と cos() の計算")
CSS３を使わずにa:hoverでmouseover/outで画像を変更する。



#header ul li.home a {
	margin: 0;
	padding: 0;
	width: 150px;
	height: 67px;
	text-indent: -9999px;
	display: inline-block;
	background: url(imgs/navigation/home_off.gif) no-repeat;
}

#header ul li.home a:hover {
	margin: 0;
	padding: 0;
	width: 150px;
	height: 67px;
	text-indent: -9999px;
	display: inline-block;
	background: url(imgs/navigation/home_on.gif) no-repeat;
}

#header ul li.about a {
	margin: 0;
	padding: 0;
	width: 160px;
	height: 67px;
	text-indent: -9999px;
	display: inline-block;
	background: url(imgs/navigation/about_off.gif) no-repeat;
}

#header ul li.about a:hover {
	margin: 0;
	padding: 0;
	width: 160px;
	height: 67px;
	text-indent: -9999px;
	display: inline-block;
	background: url(imgs/navigation/about_on.gif) no-repeat;
}

#header ul li.works a {
	margin: 0;
	padding: 0;
	width: 160px;
	height: 67px;
	text-indent: -9999px;
	display: inline-block;
	background: url(imgs/navigation/works_off.gif) no-repeat;
}

#header ul li.works a:hover {
	margin: 0;
	padding: 0;
	width: 160px;
	height: 67px;
	text-indent: -9999px;
	display: inline-block;
	background: url(imgs/navigation/works_on.gif) no-repeat;
}

#header ul li.fee a {
	margin: 0;
	padding: 0;
	width: 160px;
	height: 67px;
	text-indent: -9999px;
	display: inline-block;
	background: url(imgs/navigation/fee_off.gif) no-repeat;
}

#header ul li.fee a:hover {
	margin: 0;
	padding: 0;
	width: 160px;
	height: 67px;
	text-indent: -9999px;
	display: inline-block;
	background: url(imgs/navigation/fee_on.gif) no-repeat;
}

#header ul li.faq a {
	margin: 0;
	padding: 0;
	width: 160px;
	height: 67px;
	text-indent: -9999px;
	display: inline-block;
	background: url(imgs/navigation/faq_off.gif) no-repeat;
}

#header ul li.faq a:hover {
	margin: 0;
	padding: 0;
	width: 160px;
	height: 67px;
	text-indent: -9999px;
	display: inline-block;
	background: url(imgs/navigation/faq_on.gif) no-repeat;
}

#header ul li.contact a {
	margin: 0;
	padding: 0;
	width: 150px;
	height: 67px;
	text-indent: -9999px;
	display: inline-block;
	background: url(imgs/navigation/contact_off.gif) no-repeat;
}

#header ul li.contact a:hover {
	margin: 0;
	padding: 0;
	width: 150px;
	height: 67px;
	text-indent: -9999px;
	display: inline-block;
	background: url(imgs/navigation/contact_on.gif) no-repeat;
WordPressテーマをイチから自作してみる　ーその１

学校のサイトを作るお仕事をもらったので、WordPressでイチからテーマを作ってみる。

#作成するサイトの構成を考える

はじめに、サイトマップを作る。
トップページは構成も書き込み、アクセスの悪いコンテンツが無いように振り分ける。

私の場合、ほとんどのメモをテキストでicloud上のメモに書いている。
いつでも思いついた時に編集でき、MacでもiPhoneでもコピペが容易なので、意外と便利。


>【学校サイト構成案】
>
>＃→既存
>％→新規に作成、または大きく改変
>＆→コンテンツ内再構成
>
>＜＞→グローバルナビ
>ー→サイドバーメニュー
>
>○頻繁な更新のあるもの
>
>％＜トップ＞
>	・左
>		％動画　→動画集へのリンク
>		＆説明会・見学会情報　→バナー
>
>                   （中略）
>
>	＃ー入試結果
>	＃ー塾・関係業者へのお知らせ
>	＃ー入試お問い合わせ
>	＃ー学費案内
>
>＜学園生活＞
>	％ー学園行事 ○
>	＆ー教科だより　→特色ある授業などわかり易い名前に。電子黒板使用動画を入れる
>	＆ー中高部活動一覧　○→部活動見学会情報・今後は受賞情報などをアップする
>
>＆＜進路情報＞
>
>＆＜ブログ＞　○→wordpressブログ機能を使用
>
>その他
>
>                      （以下略）
>

テーマをイチから作るときは、wordpress>wp-content>themesの中に、適当な名前を付けたフォルダを作り、その中にテーマに必要なファイルを置く。
テーマの最小構成として、index.phpとstyle.cssが必要なので、とりあえずはこの２つのファイルを空で作成して、テーマ名（mytheme）をつけたフォルダに収めて、サーバにアップロードする。

***

次はサイトのデザインを作ります
linuxで renamed network interface ethX to ethY がでたときの対処法

仮想マシンをコピーしたときなどに、MACアドレスが変わってeth0がなくなってしまったときの覚え書き

```
# vim /etc/udev/rules.d/70-persistent-net.rules
SUBSYSTEM=="net" ....,NAME="ethX"  →この行をコメントアウト
# rmmod e1000  → e1000はドライバ名に読み替える
# modprobe e1000
```

rmmod以降のかわりに再起動したほうが楽かも。
the_contentを文字数指定して　改行を反映させながら表示 （get_trim_str を使って...有無）

```php

<?php
$my_content = get_the_content(); //コンテンツ取得
$my_content = preg_replace("|(<img[^>]+>)|si","",$my_content); //イメージ要素をのぞく
$my_content = wpautop($my_content); //br p を調整
$my_content = strip_tags($my_content); //タグをのぞく

?>
<?php echo nl2br(get_trim_str(array('str'=>$my_content, 'len'=>100,'echo' => false))); ?>
//改行されてるところにbrを挿入する　さらに独自関数　get_trim_strを使う　echoをファルスにする。
```
画像でマスクする

Cocos2d-xのCCClipingNodeクラスを使ってマスクする方法を共有します。
以下の例では、画面と同じ大きさの真っ白なノードを用意して、それを画像でマスクしています。

```cpp
CCSize winSize = CCDirector::sharedDirector()->getWinSize();

// マスクされる白いノード
CCDrawNode *content = CCDrawNode::create();
CCPoint vectors[] = { ccp(-winSize.width / 2, winSize.height / 2),
                      ccp(winSize.width / 2, winSize.height / 2),
                      ccp(winSize.width / 2, winSize.height / 2),
                      ccp(winSize.width / 2, winSize.height / 2) };
ccColor4F white = ccc4FFromccc3B(ccWHITE);
// vectors, count, fillColor, borderWidth, borderColor
content->drawPolygon(vectors, 4, white, 0, white);

// マスクするノード
CCSprite *mask = CCSprite::create("mask.png");

// 白いノードをマスクする
CCClippingNode *clippingNode = CCClippingNode::create();
// マスクするノードを設定
clippingNode->setStencil(mask);
// マスクの閾値の設定
clippingNode->setAlphaThreshold(0.01f);
// マスクされるノードを設定(白いノード)
clippingNode->addChild(content);

// マスクしたノードを表示する
clippingNode->setPosition(winSize.width / 2, winSize.height / 2);
this->addChild(clippingNode);
```

mask.png : 
![HelloWorld.png](https://qiita-image-store.s3.amazonaws.com/0/9950/00f46f65-5941-0d28-4f63-02c0e7ff74c8.png)

結果 :
![ss_12-21-2013_18-21-50.png](https://qiita-image-store.s3.amazonaws.com/0/9950/fec09747-7ee0-19f6-e9c9-4b14665912b0.png)
voltテンプレートを使ってみる


##タイトルを表示する
```php:view側
{{ get_title()}}
```

```php:controller側
use Phalcon\Mvc\Controller,
    Phalcon\Tag;//忘れずに記述。


class IndexController extends ControllerBase
{
	function initialize()
	{
	Tag::setTitle('hoge');//タイトルを指定します。
	parent::initialize();
	}
	
	public function indexAction()
	{
	}
```

##CSS,js読み込み
```php:css読み込み
{{ stylesheet_link('cssのパス') }}
```

```php:js読み込み
{{ javascript_include('jsのパス') }}
```


##foreach文
```php
{% for follow in follows %}
<div>{{ follow }}</div>
{% endfor %}
```

##複数のviewに分割して読み込む
```php
//partialを使用する
<div class="hoge">
    {{ partial("cook/chicken") }}
</div>

<div class="hoge">
    {{ partial("cook/beef") }}
</div>
```
Go/Mac/OpenGL でゲームを作ってみた (が間に合わなかった)

# キャプチャ

![blocks1.png](https://qiita-image-store.s3.amazonaws.com/0/1911/33177d41-6f03-3377-d9fd-e5020692fa00.png)

![blocks2.png](https://qiita-image-store.s3.amazonaws.com/0/1911/2a714785-54f8-76db-6f8e-7ec03dcd972d.png)

よくある落ち物ゲームっぽいものです。 12/21 時点で、ブロックの自然落下や消去が未実装なので、ひたすら積み上げるだけです。

![blocks3.png](https://qiita-image-store.s3.amazonaws.com/0/1911/2555ce8a-226b-a3b3-abff-fc71a9d1ac28.png)

# プレイ方法

Mac OS X でしか動きません。

```shell-session
$ go get https://github.com/hajimehoshi/go-ebiten
$ cd $GOPATH/github.com/hajimehoshi/go-ebiten/example
$ go run main.go
```

* ←: 左移動
* →: 右移動
* ↓: 下移動
* Space: 回転

# いろいろ

## Go でゲームプログラミングを書くのはどうなのか

Go だからゲームプログラミングが特別書きやすいとか書きにくいとかは無いような気がします。コンパイルが早いので、修正と確認のサイクルが早いのはいいですね。

## cgo

OpenGL の C の API を呼ぶためには [cgo](http://golang.org/cmd/cgo/) を使います。また、 C だけではなく C++ や Objective-C も使えます。特に Objective-C が使えるおかげで、 Cocoa ライブラリを呼ぶことができます。今回は cgo を使って Cocoa の NSWindow や NSOpenGLContext を扱うプログラムを書きました。

Go から OpenGL を使うだけならば、 cgo ではなく [go-gl](https://github.com/go-gl/gl) や [go-gl の glfw](https://github.com/go-gl/glfw) を使うのが楽で良いと思います。今回はあえて cgo を使いましたが、ウィンドウなどを細かくカスタマイズしたかったというのが理由です。

Objective-C から Go の関数を呼び出すには、 export を使います ([例](https://github.com/hajimehoshi/go-ebiten/blob/ce97070f66d612815a1c3047152eb0af2282364b/ui/cocoa/window.go#L143))。

## runtime.LockOSThread

[Mac はマルチスレッドな OpenGL に対応しています。](https://developer.apple.com/library/mac/documentation/graphicsimaging/conceptual/opengl-macprogguide/opengl_threading/opengl_threading.html)OpenGL 関数はそのときのスレッドローカルなコンテキスト (NSOpenGLContext) に対して実行されます。 goroutine はある OS のスレッド上で実行されますが、実行中に OS のスレッドが変わってしまうことがあります。これを防ぐために、 runtime.LockOSThread の呼び出しを goroutine で呼ぶ関数の頭に加えます ([例](https://github.com/hajimehoshi/go-ebiten/blob/ce97070f66d612815a1c3047152eb0af2282364b/ui/cocoa/window.go#L56))。

OS のメインスレッドを実行する goroutine を固定する場合は、 [init 関数で runtime.LockOSThread を呼ぶのが定石のようです](https://code.google.com/p/go-wiki/wiki/LockOSThread)。

## channel の close と受信

channel のレシーバが値を受け取らなくても良い場合があります。たとえば、channel を使って単純なブロッキングを行う場合です。こういう場合、 close するだけでレシーバーの処理を終わらせることができます。 close された channel の受信は即座に返ります。

```go
package main

import "fmt"

func main() {
	ch := make(chan struct{})
	go func() {
		fmt.Println("Foo")
		close(ch)
	}()
	<-ch
	fmt.Println("Bar")
}
```

channel の型は struct{} (空構造体) にしていますが、どうせ何も送らないので何でも良いです。空構造体は 0 バイトなのでこういう目的にうってつけだと思ったのですが、 0 バイトであるという情報がどこにあったのか失念してしまいました。

## 動的ダックタイピング

今回のゲームプログラミングで実際に使っているわけではないですが、面白かったので書きます。

```go
package main

import "fmt"

type Foo struct {}

func (f *Foo) Hello(str string) {
	fmt.Println("Hello,", str)
}

func main() {
	var foo interface{}
	foo = &Foo{}
	foo.(interface{ Hello(string) }).Hello("World")
}
```

# 免責事項

この文章は私個人の見解を述べたものであり、私の所属している団体等とは一切の関係がありません。
CSSだけでおしゃれに歯車を回してみる。

![GEAR](http://xiidec.appspot.com/img/gear/gear.png)

こんな感じの歯車がくるくる回ってるアニメーションのをCSSと静止画だけで実現してみた。


**完成品がこちら(モダンなブラウザじゃないと動かないかも)。**
**http://xiidec.appspot.com/gear.html**

##しくみ

### 歯車画像を４枚用意する。

![GEAR1](http://xiidec.appspot.com/img/gear/gear0.png)
こんなの。
それを

* 左歯車
* 左歯車(半透明)
* 右歯車
* 右歯車(半透明)

とならべる。半透明の歯車はちょっと下にズラす。


### 歯車を傾ける
`-webkit-transform: rotateX(60deg) rotateY(-10deg);`
これ。
このCSSで歯車が斜めになる。
X軸方向に60度、Y軸方向に−10度傾く。
こんな感じに。
![GEAR](http://xiidec.appspot.com/img/gear/gear.png)

###歯車をまわす。
これが今回のキモ。

`-webkit-animation: do_blue 3s;`

３秒かけてdo_blueの変化をする、という意味。

```
            @-webkit-keyframes do_blue {
                0%   {-webkit-transform:rotate(0deg);}
                100%   {-webkit-transform:rotate(180deg);}
            }
```

そしてこれがdo_blueの中身。
`0%:回転0度`から`100%:回転180度`の状態にアニメーションする、という意味。
今回は使わなかったけど、たとえば`scale(2,2)`と指定すればグーンとヨコタテ2倍拡大する。

```
			@-webkit-keyframes do_red {
				0%   {-webkit-transform:rotate(17deg);}
				100%   {-webkit-transform:rotate(-163deg);}
			}
```

赤いギアはこんな感じ。チョットだけ回転の角度をズラす。
これによって噛み合ってるような感じになる。


###完成
> おしゃれな歯車
>http://xiidec.appspot.com/gear.html

###ソース全体

```html:gear.html
<html>
	<head>
		<style>
			.gear_blue {
				-webkit-animation: do_blue 3s; 
				-webkit-animation-iteration-count: infinite;
			}
			.gear_red {
				-webkit-animation: do_red 3s; 
				-webkit-animation-iteration-count: infinite;
			}
			.opa{
				opacity:0.5;
			}
			.gears{
				-webkit-transform: rotateX(60deg) rotateY(-10deg);
				z-index: -1;
			}
			@-webkit-keyframes do_blue {
				0%   {-webkit-transform:rotate(0deg);}
				100%   {-webkit-transform:rotate(180deg);}
			}
			@-webkit-keyframes do_red {
				0%   {-webkit-transform:rotate(17deg);}
				100%   {-webkit-transform:rotate(-163deg);}
			}
		</style>
	</head>
	<body>
		<div class="gears">
			<img src="img/gear/gear1.png"  class="gear_blue" style="position: absolute; left: 0px; top: 0px">
			<img src="img/gear/gear1.png"  class="gear_blue opa" style="position: absolute; left: 0px; top: 60px">
			<img src="img/gear/gear2.png"  class="gear_red" style="position: absolute; left: 550px; top: 0px">
			<img src="img/gear/gear2.png"  class="gear_red opa" style="position: absolute; left: 550px; top: 60px">
		</div>
	</body>
</html>

```


##まとめ
わりと簡単にオシャレな感じの歯車ができた。
ほんとうは『CSSだけで作るF-ZERO』をやりたかったけど、大変そうでやめた。
時間があったら頑張ってつくろうかな。
MacのVimでclipboardを楽にペーストする

# vimでペーストめんどくさい
Vimのインサートモードで普通にペーストすると、なんか謎のインデントが入りますよね。
`set :paste`とかやってから貼り付けて、`set :nopaste`するとこれを回避できるんですが、これがめんどくさい。
この一連の流れをマッピングできたらよかったんですが、ペーストするCmd-vは僕の場合は多分iTermが処理してるらしく、無理そう。

[vimでペーストするときインデントさせない](http://qiita.com/quwa/items/019250dbca167985fe32)みたいな記事もあるけど、１発で貼り付けられない時点で明らかにめんどくさい。

# pbpasteを使う
Macには、`pbpaste`というclipboardの中身を出力するコマンドがある。
これと、`:r !command`がcommandの出力を挿入することを組み合わせると…？

```vim
:r !pbpaste
```
これで問題なくclipboardの内容をインデントされずにペーストできます
あなたの好きなキーで適当にマッピングしましょう
16行 で pushState popState

> 2013/12/27 追記：初回アクセス時に popState イベントが発生しリロードしてしまう問題への対策を記載しました。（この追記により、タイトルが 15行 → 16行 に変更になりました^^）

# pushState popState とは

Ajax を使ったスムーズな画面遷移でも、URL を書き換え履歴に追加し、ブラウザバックに対応することができる仕組みです。SEO への影響を出すこと無く操作性を向上させることができます。
現在、pushState/popState を使ったクライアントサイドルーティングを実現するライブラリがいくつか作られていますが、今回は jQuery だけで行うシンプルな方法を紹介します。

参考: [Googleに続いてBingもAjaxにはpushStateを推奨](http://www.suzukikenichi.com/blog/bing-recommends-pushstate-with-ajax/)

# 本題

jQuery だけで、15行程度でできる pushState popState を使った Ajax 画面遷移の方法です。

```js
if (window.history && window.history.pushState) {

    // 内容の読み込み処理
    function loadContents(url) {
        $.get(url, { push_state: 'true' })
            .then(function(content) { $('#main').html(content); });
    }

    // pushState を使った遷移
    $(document).on('click', '.push-state', function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        loadContents(url);
        history.pushState('', '', url);
    });

    // popState イベントをハンドリング
    $(window).on('popstate', function(e){
        if (!e.originalEvent.state) return; // 初回アクセス時に再読み込みしてしまう対策
        loadContents(location.pathname);
    });

}
```

## 内容の読み込み処理

ページの内容を Ajax で読み込んで反映する処理です。

サーバサイドに pushState による画面遷移であることを通知する必要があるなら、 `pushstate: 'true'` などのパラメタを渡します。または、サーバサイドで `HTTP_X_REQUESTED_WITH` パラメタを検出するという方法もあります。

読み込んだら、所定のコンテナ `例では <section id="main"></section> 等` に上書きします。

## pushState を使った遷移

ハイパーリンクやボタンをクリックした際に、通常の画面遷移をキャンセルして内容の読み込みと pushState へのURL変更登録を行います。

上記の例では、 `class="push-state"` 属性がついた `a` タグに反応するようになります。

## popState イベントをハンドリング

最後に「戻るボタン」「進むボタン」がクリックされた時の処理を定義します。
これは単純に、現在の URL を使って内容の読み込みを行うだけです。
ただ、popState イベントは **初回アクセス時にも発生してしまいます。** 
そのため `e.originalEvent.state` を使って、まだ pushState されていなければなにもしないという対策が必要となります。
Windows 8.1でタスクバーにピン留めされたエクスプローラのデフォルト表示パスを変更する


Windows 7の頃は、タスクバーにピン留めされたエクスプローラのデフォルト表示パスを簡単に変えることができたが、Windows 8.1では簡単には変更できなくなった。

タスクバーにピン留めされたエクスプローラのプロパティがこんなのになってしまっていてパスが変更できない。
なんだこのリンク先は！
![fileexplorer.png](https://qiita-image-store.s3.amazonaws.com/0/28644/0a8dbb2b-341a-2318-ca32-64d492709429.png)

とりあえず、デフォルト表示パスは気に入らなくても、普通にエクスプローラをピン留めしておく。
ここからがマジック。

まずはデスクトップ等に普通にショートカットを作成する。
c:\hogeフォルダをデフォルトで開くようにする場合、リンク先は以下のようにする。
ショートカット名はexplorer.exeのままにしておく。

```
%windir%\explorer.exe /n,/e,c:\hoge
```

Explorerの引数の詳細は以下を参考にしてほしい。
http://support.microsoft.com/kb/152457/ja

次に、ショートカットを作成したフォルダに、以下のようなバッチファイルを作成する。

```bat:fileexplorer.bat
move /Y "explorer.exe.lnk" "%APPDATA%\Microsoft\Internet Explorer\Quick Launch\User Pinned\TaskBar" 
del "%APPDATA%\Microsoft\Internet Explorer\Quick Launch\User Pinned\TaskBar\File Explorer.lnk" 
rename "%APPDATA%\Microsoft\Internet Explorer\Quick Launch\User Pinned\TaskBar\explorer.exe.lnk" "File Explorer.lnk" 
```

最後に、管理者でコマンドプロントを開き、ショートカットを作成したフォルダに移動した上で、

```
fileexplorer.bat
```

と実行するだけ。
これで、タスクバーのエクスプローラのデフォルト表示パスは`c:\hoge`になったはずだ。

上記バッチを見て、

```
"%APPDATA%\Microsoft\Internet Explorer\Quick Launch\User Pinned\TaskBar\File Explorer.lnk"
```

を差し替えたり、プロパティを編集すればいいんだと早とちりしたあなたは甘い。
直接いじってしまうと、エクスプローラを開いたときに、2つ目のエクスプローラのアイコンがタスクバーに表示されてしまい、もう元には戻らない。
パスを変更する場合は、もう一度ショートカットを作成するところからやり直すしかないようだ。
Pray FrameworkのCSRFフィルタ


Play(Java)のCSRFフィルタ適用。

## 環境

* Play Framework 2.2.1
* JDK 7u45

## 依存関係の追加

`$APP_ROOT/build.sbt`に依存関係を追加。

```scala:build.sbt
libraryDependencies ++= Seq(
  // snip
  filters, // 追加
  // snip
)
```

## CSRFフィルタ

`app/Global.java`にフィルタを定義。
(Global.javaはデフォルトでは存在しない)

```app/Global.java
import play.*;
import play.api.mvc.EssentialFilter;
import play.filters.csrf.CSRFFilter;

public class Global extends GlobalSettings {
  // snip

  @Override
  @SuppressWarnings({"rawtypes", "unchecked"})
  public <T extends EssentialFilter> Class<T>[] filters() {
    return new Class[]{CSRFFilter.class};
  }
}
```

## 適用

フォーム生成に適用。

```app/views/login.scala.html
@helper.form(action = helper.CSRF(routes.Sessions.createSession)) {}
```

Tokenが付与される。

```
<form action="/createSession?csrfToken=965b90f298a5bc76f397e6d1d384024c68e19973-1387604063062-6912d86536eaab2a8fe1abc8" method="POST" >
```
PHP[PDO]のbindValue, bindParamでストアドプロシージャのoutを受け取ることはバグのためできない！

#概要
MySQLのストアドプロシージャを使って、ある１つの戻り値をPHPで受け取るために奮闘した結果をメモ代わりに残します。

##結論
PHP[PDO]のbindValue, bindParamを使ってストアドプロシージャの引数を受け取ることは、仕様上できません。
彼のように頭を壁で叩きまくった結果コレにたどり着きましたが悶絶モノです。非常に気に入らない。
[PHP.net - flannell ¶](http://us3.php.net/manual/ja/pdostatement.bindparam.php#109791)

#コード
MySQLのストアドプロシージャ

```sql
use test;
delimiter //
	create procedure storedprocedure_test(in in_data varchar(255), out out_data varchar(255))
	begin
		select concat(in_data, ' is anpontan') into out_data;
	end;
//
```

PHP[PDO]からbind*でストアドプロシージャを叩く側

```php:test.php
<?php
	$dbh = new PDO('mysql:host=localhost;', 'USER_NAME', 'PASSWORD');

	$in = 'wakisuke';
	$out = '***';

	/* 値の配列を渡してプリペアドステートメントを実行する */
	$sth = $dbh -> prepare('call test.storedprocedure_test(:in_data, :out_data);');
	$sth -> bindValue(':in_data', $in, PDO::PARAM_STR);
	$sth -> bindParam(':out_data', $out, PDO::PARAM_STR | PDO::PARAM_INPUT_OUTPUT, 255);
	$sth -> execute();
	$sth -> fetchAll();

	echo $out . "\n";
?>
```

##結果
本当なら「wakisuke is anpontan」となることを期待しますが、残念ながら無理です。

```bash
> php ./test.php
> ***
```

PHPに投稿してくださったflannellさんのように、同じセッションでストアドプロシージャを叩いて、指定したユーザ変数をselectして得ましょう・・・。
GIMPを指定解像度の背景をレイヤにして一発起動＠Mountain Lion

=======================

コマンドで起動して時短。

GIMPをターミナルから開く
------------------------

```sh
$ open -a /Applications/GIMP.app hohr.jpg 
```

ただ本当にしたいのは解像度を決めうちした背景画像を生成して起動。  
しかしながらどうもそのようなコマンドはないようだ。

ImageMagickのconvertで画像の生成
-------------------------------

ImageMagickはHomeBrewでインストールするとdisplayコマンドが動かないとの事なので[ImageMagick を OSX Mountain Lion にインストールする](http://qiita.com/yaoki_dokidoki/items/2ec0540b67dcb4abd5cb)にある通り、インストーラパッケージを[http://cactuslab.com/imagemagick/](http://cactuslab.com/imagemagick/)のImageMagick 6.8.7-2 for Mac OS X 10.5 – 10.9 Requires XQuartz. から入手してインストール。別途 [X Quartz](http://xquartz.macosforge.org/landing/)も必要なので注意されたし。そうそう、Xcodeからコマンドラインツールをインストールするのを忘れずに。

実際に画像を生成してみる

```sh
$ convert -size 500x500 xc:white test.png
```

ImageMagickで画像を生成しGIMPで開く
----------------------------------

やっつけ

```startgimp.sh
#!/bin/bash
convert -size 560x346 xc:white back.png
open -a /Applications/GIMP.app back.png
```
Ruby on Railsでlightbox2による画像表示

Lightbox2.6を使って画像のモーダル表示を試してみました。
----
######画像ファイル（image-1.jpg）の配置場所
```image-1.jpg
app/assets/images/image-1.jpg
```
----
######html.erbは以下のような感じ。
```html.erb
<%= link_to image_tag("/assets/image-1.jpg", :size => "76x76"),'/assets/image-1.jpg',:rel => "lightbox"%>
```
----
######確認できたこと
_画像を表示し、その画像をクリックすると、モーダルで画像が表示される。_
ExtCore使うとJavascriptで簡単に継承をサポートしたクラスが定義できる

結構古いライブラリなんですが、ExtCore( https://staging-japan.sencha.com/products/extcore )というライブラリがあります。有名なSencha Touchの会社が公開しているライブラリです。このライブラリを使うと、Javascriptで簡単に継承をサポートしたクラスが定義できます。

```js
	ClassA = Ext.extend( Ext.util.Observable , { //Ext.util.Observableクラスを基底クラスとしてClassAを宣言する。
		constructor: function(){
			//クラスがnewされた時に呼ばれる。
			
			ClassA.superclass.constructor.call( this );
			//親クラスのconstructorを呼ぶ。
		},
		
		alert : function( message ){
			alert( message );
		},
		
		showAlert : function(){
			this.alert( "Class A" );
		}
	});
	
	ClassB = Ext.extend( ClassA ,{
		constructor: function(){
			ClassB.superclass.constructor.call( this );//Class Aのコンストラクタを実行
		},
		
		showAlert: function(){//overrideする。
			this.alert("Class B"); //Class Aのalertが呼ばれる。
		}
	});
	
	Ext.onReady( function(){
		var classAButtonElement = Ext.get( "classA" );
		classAButtonElement.on( "click" , function(){
			var classA = new ClassA();
			classA.showAlert();
		} );
		
		var classBButtonElement = Ext.get( "classB" );
		classBButtonElement.on( "click" , function(){
			var classB = new ClassB();
			classB.showAlert();
		} );
	});

```

サンプルコードは、Class Aボタンが押された場合は、ClassAを、Class Bボタンが押された場合は、ClassBをインスタンス化して、showAlertメソッドを実行します。
Class BのshowAlertメソッドでは、this.alertを実行しています。この時、継承元のClassAのthis.alertが実行されます。

残念ながらprivateは実現できていないですが、しっかりとクラスが定義できますので大規模開発などで使用できます。
[Ruby] Methodオブジェクトとは

詳しくは`パーフェクト Ruby ９章`を参照。

Methodオブジェクトを取得するには`method`(`Object#method`)をつかう。

```rb
[12] pry(main)> array = [1,2,3,4,5]
=> [1, 2, 3, 4, 5]
[13] pry(main)> array_shift = array.method(:shift)
=> #<Method: Array#shift>
```

`call`で呼び出すことができる。Methodオブジェクトはレシーバを保持しているので、副作用があるメソッドを`call`すると、レシーバに影響する。

```rb
[14] pry(main)> array_shift.call
=> 1
[15] pry(main)> array
=> [2, 3, 4, 5]
```

Methodオブジェクトの保有するメソッドに関する情報を取得することもできる。

```rb
[16] pry(main)> array_shift.owner
=> Array
[17] pry(main)> array_shift.name
=> :shift
[18] pry(main)> array_shift.receiver
=> [2, 3, 4, 5]
[19] pry(main)> array_shift.receiver.object_id
=> 28008360
[20] pry(main)> array.object_id
=> 28008360
```

singleton_methodの場合、`owner`は特異クラスとなる。

```rb
[21] pry(main)> def array.some_singleton_method; end
=> nil
[22] pry(main)> array_some_singleton_method =  array.method(:some_singleton_method)
=> #<Method: [2, 3, 4, 5].some_singleton_method>
[23] pry(main)> array_some_singleton_method.owner
=> #<Class:#<Array:0x356bf50>>
[24] pry(main)> array_some_singleton_method.name
=> :some_singleton_method
[25] pry(main)> array_some_singleton_method.receiver
=> [2, 3, 4, 5]
[26] pry(main)> array_some_singleton_method.receiver.object_id
=> 28008360
```
おれのさぶらいむてきすととsublemacspro

この投稿はSublime Textのadvent calendar企画である「[おれのさぶらいむてきすと Advent Calendar 2013](http://www.adventar.org/calendars/184)」の21日目の投稿として記述したものです。
昨日は[fukayatsuさん](http://blog.fukayatsu.com/2013/12/20/my-sublime-text-and-ime/)でした。

今回は私の数少ないカスタマイズの一つであるキーバインドについて、それも私は元々へたれEmacserだったのでEmacs風のキーバインドを実現してくれる **sublemacspro** について書きたいと思います。

…と考えていたのですが、残念なことにググってみるとすでにsublemacsproのキーバインドについて調べてくださった記事がいくつか存在するようです。
ということで、今回はsublemacsproについてのちょっとしたTIPSを書いてお茶を濁したいと思います（´・ω・｀）

-----

　
#kill-ringに保存できるテキストの数の変更
sublemacsproでは`ctrl+shift+y`の`yank_choice`で一度でもコピーしたことのあるテキストをkill-ringに保存して、以後必要に応じて引き出すことができます。このkill-ringに保存できるテキストの数は16で一定、つまり16個を超えてkillした場合、最初のほうにkillしたテキストは選択できなくなります。このkill-ringの数、もうちょっと増やしたいなという時がありませんか？そんな時は、sublemacsproのパッケージフォルダの中にある **sbp_kill_ring.py** をいじることでその数を増やすことできます。
変えるのは **sbp_kill_ring.py** の50行目、以下の記述。

```py
        self.limit = 16
```

この`self.limit`に割り当てられる数字を変更することでkill_ringに保存できるテキストの数も変更することができます。
特にsublemacsproの`yank_choice`はquick panel（GotoAnythingなどに使われる検索パネル）使って行われるので検索性も良く、50や100に変更してもそこまで扱いが難しいということはならないかと思います。


　
#ctrl+gの優先順位
sublemacsproではいろんなパネルを消したり、はたまたキャレットをマルチからシングルに戻すといった機能が`ctrl+g`に割り当てられています。「デフォルトの状態に戻したい！」、そんなときはEmacsと同じように`ctrl+g`を連打すれば安心ですね。
しかしデフォルトの設定では`ctrl+space`でセットしたマークやquick panelを消したいのに先にoutput panelが消えて困るといったような状況もあるかと思います。
この`ctrl+g`で何かを消すという機能、実は優先順位をつけることができます。優先順位のつけ方はいたって簡単。キーバインドの設定を最後に消したい項目から順に並べてやるだけです。例として自分のキーバインド設定を示すと以下のような感じです。

```json
	{ 
		"keys": ["ctrl+g"], "command": "hide_panel", 
		"context":
	  		[
	    		{ "key": "panel_visible", "operator": "equal", "operand": true }
	  		]
	},
	{ 
	 	"keys": ["ctrl+g"], "command": "hide_auto_complete", 
	 	"context":
	  		[
	    		{ "key": "auto_complete_visible","operator": "equal","operand": true }
	  		]
	},
	{ 
		"keys": ["ctrl+g"], "command": "sbp_cancel_mark", 
		"context":
	  		[
	    		{ "key": "sbp_emacs_has_mark","operator": "equal","operand": true }
	  		]
	},
	{
		"keys": ["ctrl+g"], "command": "single_selection", "context":
        [
            { "key": "num_selections", "operator": "not_equal", "operand": 1 }
        ]
	},
	{ 
		"keys": ["ctrl+g"], "command": "hide_overlay", 
		"context":
	  		[
	    		{ "key": "overlay_visible", "operator": "equal", "operand": true }
	  		]
	},
```

`command:`の次に書かれているのが何を消すかを指定しているコマンド名になっていて、それぞれ

+ `hide_panel`：　output panelなどのパネルを消す
+ `hide_auto_complete`：　オートコンプリートの表示を消す
+ `cancel_sbp_mark`：　セットしたマークを消す
+ `single_selection`：　キャレットを一つに戻す(マルチカーソルを消す)
+ `hide_overlay`：　quick panelを消す

という機能が割り当てられています。
自分の設定では、実際に`ctrl+g`を使用するとこの並びの下から順に表示が消えていく、つまり quick panel > マルチカーソル > マーク > オートコンプリート > パネル　の順に消えていきます。
このような設定にすることでコンパイルのエラー結果などを見ながらquick panelを出したり消したり、マークのキャンセルなどもできるようになります。
（sublimecsproではsnippetのキャンセルも`ctrl+g`に割り当てられていますが、自分はsnippetをあまり使わないのでここでは設定していません。）

　
-------

以上、sublemacsproのTIPSでした。
Emacsそのものが高機能なエディタですから、Sublime Textに移行した方なんてそんなにいるのかしら、と思いつつ書いてみましたがどうなんでしょうか。そして、たぶんこれで私のadvent calendarの担当日は最後だと思います。
明日の担当はDAIさんです。よろしくお願いします。
少し早いですが、皆様、よいお年をお過ごしくださいませ(´・ω・`)ﾉｼ
Vim register and paste


[Using the default register](http://vimcasts.org/episodes/simple-operations-using-the-default-register/)

```
# toggle characters
# x to cut
# p to put after cursor
xp 
bakc # xp on k will make back

# toggle lines
ddp # cursor on the first line

# duplicate a line
yyp

# check the doc
:h quotequote # unnamed register
:h registers

```
Untracked files


While I was making [dotfiles](https://github.com/shinokada/dotfiles), I could not upload two directories, .oh-my-zsh and .zsh/zsh-syntax-highlighting. The reason was that they had .git folders. So I deleted .git and .gitignore. And cleared cache and add them all again.

    $ cd ~/dofiles/.oh-my-zsh
    $ rm -rf .git
    $ rm .gitignore
    $ cd ~/dofiles/.zsh/zsh-syntax-highlighting
    $ rm -rf .git
    $ rm .gitignore
    $ cd ~/dotfiles
    $ git rm -r --cached .
    $ git add .
    $ git commit -m "fixed untracked files"
gitignore notes


## Adding gitignore file after git init

Remove the files which you don't want.

    # you did git init, added remote, added README file, add and commit then  pushed before making .gitignore
    # then you realized that you have unnessary file like README.md.swp
    # check what you have in the index
    $ git ls-files
    $ git rm README.md
    $ vim .gitignore # add contents in it and close
    # OR use .gitignore_global
    $ git config --global core.excludesfile ~/.gitignore_global
    $ git rm -r --cached .
    $ git add .
    $ git commit -m "fixed untracked files"
Git and Vim


Reference: [Using Git from command-line mode](http://www.slideshare.net/cohama/how-to-use-git-from-vim-vim-conf2013)

## Set core.editor

    git config --global core.editor vim
    # check your config
    git config --list

## Using Git from command line

    # use :!
    # add the current file
    :!git add %
    :!git commit -m "commit message"
    :!git push origin master
    :!git diff --cached

## Adding key mapping

    nnoremap \ga :<C-u>!git add  %<CR>
apple-touch-iconの機種/OS別サイズとlinkタグの書き方

iOS7でapple-touch-iconのサイズが変わっていたので調べてみました。

|機種|iOS|Retina|非Retina|
|:--:|:--:|:--:|:--:|
|iPhone|～6|114x114|57x57|
|iPhone|7～8|120x120|なし *1|
|iPhone6Plus|8|180x180|なし *1|
|iPad *2|～6|144x144|72x72|
|iPad *2|7～8|152x152|76x76|

*1 RetinaでないiPhone(3GS/3G)はiOS7にアップグレードできない
*2 iPad/iPad miniは画面サイズは違うが解像度は同じ

## linkタグの書き方

[Safari Web Content Guide: Configuring Web Applications](https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html) より引用。サイズごとに別のファイルを指定できる。

```html
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
```

sizes属性を省略すると60x60とみなされ、デバイスに最適なサイズがHTMLに明示されていない場合は最適なサイズより大きいものの中で最小のものが選択される。

## 結論

めんどくさいからもう256pxぐらいで作っとけばいいんじゃないですかね？

## 参考文献

* [Safari Web Content Guide: Configuring Web Applications](https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)
* [apple touch icon - Favicons - Best practice for 2013 - Stack Overflow](http://stackoverflow.com/questions/19029342/favicons-best-practice-for-2013)
MacでVim7.4をいれるとインサートモードで文字が消せなくなるのを解決する方法

正直Mac以外で使ってないのでMac関係あるのかは知らないです

GVimじゃなくてCUIでvim使ってて、どうやらヤンクでclipboardにコピーする機能がCUIのvimだと7.4で有効になるらしい。
なので以下のようにvim7.4をインストールした。

```bash
brew info vim # versionとoptionを確認
brew install vim --override-system-vi
brew link --overwrite vim
```

## 問題
なんか7.4に上げたとたん、インサートモードでbackspaceやC-wやC-uで文字が消せなくなった。

## 解決方法
```vim
set bs=start,indent
```
See also: `:help bs`
ちゃんと動いていたSeleniumがたまに失敗するケースまとめ

この記事は、 [Selenium Advent Calendar 2013](http://www.adventar.org/calendars/128) の21日目の記事です。

Seleniumを日々運用していると何回かに1回失敗するようなエラーに遭遇することがよくあります。
今回はそんな気まぐれエラーについて、これまで経験したパターンの主なものをまとめてみました。
また、参考までにそのパターン対して行った対策の一例をあげています。

# 指定したセレクタが一意になっていない
class属性で指定している場合はよくあるパターン。動的なページは条件によって同じ指定の要素が複数表示されるケースがあり、時と場合によってエラーになる。

## 対策例
なるべく一意になる指定をする。idを使う、inputのnameを使うなど。
Selenium Advent Calendar 2013 12/1の記事がとても参考になります。
[Selenium の locator とうまくつきあうための話](http://qiita.com/okitan/items/cdf8809405821e057609 "Selenium の locator とうまくつきあうための話")


# イベントがバインドされてない
クリック動作をテストする場合にクリックする要素にjsのイベントがバインドされる前にSeleniumがテストを実行してしまう。クリックは実行されるがイベントが実行されないので想定通りのテストが行えない。

## 対策例
バインドされるまでwaitを入れる。例えばある要素がロードされた時にイベントがバンドされていると判定できる場合は、その要素に対してwaitを入れる。最終手段は秒数を指定してsleepさせる。

# バインドされている要素と違う要素をクリックしている

例えば以下のようなアイコンを選択させるhtmlがあってそれをクリックするコードを作った場合、js側のclickイベントをバインドしている要素とSeleniumのクリックする要素が合っていないとクリックが反応しないことがある。

```html
<div class="icon tooltip-top">
	<a href="#" >
		<i class="icon-menu"></i>
	</a>
</div>
```

例）プログラムはa要素にイベントをバインドしているが、Selenium IDEではi要素をclickするコードが生成される。

## 対策例
これはアプリ側の実装に合わせるしかない。
Selenium IDEを使うとそのような空気を読んだコードは作ってくれない。
運用しやすいコードに仕上げるためにはある程度アプリ側の知識が必要。


# 要素は存在するが見えてない
DOM上には存在するが実際に表示される前にSeleniumがテストを実行してしまう。あらかじめDOM上に存在させておいてCSSのdisplay属性の指定で表示/非表示を切り替えるようなプログラムを組んだ場合、DOM上の要素を正しく指定してwaitしているつもりでも非表示の状態でテストが実行される場合がある。

## 対策例
wait.until()に指定するExpectedConditionsのメソッドを正しく使う。
例えばvisibilityOfElementLocated()は表示されるまで待ってくれるが、presenceOfElementLocated()は表示/非表示にかかわらずDOM要素の存在だけしか待たない。

```java:visibilityOfElementLocatedは要素が表示（hightまたはwidthが0より大）になるまで待つ
wait.until(ExpectedConditions.visibilityOfElementLocated(locator));
```

```java:presenceOfElementLocatedはDOM要素として存在していればOKとなる
wait.until(ExpectedConditions.presenceOfElementLocated(locator));
```

ドキュメントを参考にして正しくwaitを入れる。

[ExpectedConditionsのJavaDoc（英文）](http://selenium.googlecode.com/git/docs/api/java/org/openqa/selenium/support/ui/ExpectedConditions.html "ExpectedConditions")

日本語でまとめてくださっているかたがいます。

[チラシの裏的備忘録 | Wait.until()で指定できる状態の種類](http://motogeneralpurpose.blogspot.jp/2013/03/waituntil.html "Wait.until()で指定できる状態の種類")



# アニメーションが待てていない
メッセージがフェードインするような処理の場合、そのままSeleniumのテストを実行するとフェードインが終わる前にテストが先に進んでエラーになる。

## 対策例
メッセージなどの画面に変化が現れる要素があればまずはその要素に対してwaitを入れる。
ただし、前出のvisibilityOfElementLocatedはhightやwidthが0より大きくなるまでしか待たないのでDOM構成やアニメーションのパターンによってはwaitが終わった時点ではまだ想定通りの表示に達していない場合もある。

例）span要素が表示されるまでwaitさせたが、実際にはそのあとゆっくり文字がフェードインするため、wait終了時点ではSeleniumが文字を検出できない

最終手段としてはアプリの実装に合わせてアニメーションにかかる時間のsleepを入れる。


# まとめ
Seleniumの運用で最も厄介なのは、アプリの不具合検知以外の原因でエラーになるケースが多々あり、しかも毎回エラーになるのではなく何回かに１回エラーになる現象が起こることです。ローカル環境では正常に動いたのにJenkinsからリモートで実行するとうまく動かなくなるようなケースもよくあります。この現象の原因調査に労力をかけすぎるのは不毛なので、１つ１つベストなケースを探るのではなくいくつかのパターンに応じた対策をあらかじめ決めておいて、まずは深く考えずにいずれかの対策を採用して様子を見るような進め方も運用を続けていくための知恵かもしれません。

一方で、このような何回かに１回しか起こらないエラーでも、ある環境下で正しく動かないのであればそれは不具合という見方もあります。エラーの原因を探ってみると無駄な処理や効率の悪い処理に気づくこともあります。結局は人間が判断するしかないのですが、そのために必要な知識やノウハウをためておくことがSeleniumを賢く運用していくために重要なのではないかと思います。

まだまだ様々なパターンがあると思いますのでノウハウが溜まってきたら続編を書きたいと思います。こんなケースもよくあるよという事例があれば教えてください。
Codeforces Beta Round #2

はい。英語が全然わかりません。

####A.Winner
・ざっくりと大意
なんかカードゲームのようですが理解不能。。。

・方針のようなもの
[http://codeforces.com/blog/entry/109](http://codeforces.com/blog/entry/109)
1.First of all, we need to find the maximum score m at the end of the game. This can be done by emulating. After all rounds played just iterate over players and choose one with the maximum score.
まず第一に、我々は、ゲーム終了時に最大スコアmを見つける必要があります。これは、エミュレートすることによって行うことができる。すべてのラウンドをプレイした後だけで選手を反復し、最大スコアを持つものを選択してください。

2.Second, we need to figure out the set of players who have maximum score at the end of the game. We can do this in the same way as calculating maximum score. Just iterate over players after all rounds played and store all players with score equal to m.
第二に、我々はゲーム終了時に最大のスコアを持っているプレイヤーの集合を把握する必要があります。私たちは、最大のスコアを計算すると同じようにこれを行うことができます。ただ、すべてのラウンドをプレイした後に選手を反復し、Mに等しいスコアを持つすべてのプレーヤーを格納します。

3.And the last, we need to find a winner. To do this we will emulate the game one more time looking for player from the winner list with score not less m after some round.
そして最後に、我々は勝者を見つける必要があります。これを行うために我々はいくつかのラウンド後のスコア小さくないmの勝者のリストから選手を探していたゲームをもう一度をエミュレートします。

[http://codeforces.com/blog/entry/107](http://codeforces.com/blog/entry/107)
Simple problem, just code it.
At the first pass calculate the sum of points for each player at game end. Let M be the maximum of these sums. At the second pass check every round. If current player X has not less than M points and his final score is equal to M then he is the winner.
The following test illustrates that player could receive more than M points, then lose some and, finally, win.
単純な問題、それをコーディングします。
最初のパスでゲーム終了時に各プレイヤーのためのポイントの合計を計算します。 Mはこれらの和の最大値とする。第二パスですべてのラウンドをご確認ください。現在のプレーヤーのXが以下Mよりもポイントがあり、彼の最終的なスコアは、Mに等しい場合には、彼は勝者である。
次のテストでは、そのプレイヤーはいくつかを失うそして、以上のMポイントを受け取ると、最終的には、勝つことが示しています。
2559602 daidailanlanさんの写しです。

```python:a.py
#!/usr/bin/env python
# -*- coding: UTF-8 -*-
l=[raw_input().split() for i in range(int(raw_input()))]
d={}
for x,y in l:
#リストにしたものを0番目からx:名前 y:点数で取り出す
#辞書内のキー値と一致した名前の点数を加算処理
#元々は空で作られている辞書なのでキー一致がなければ、キー値: 点数が追加される。
    d[x]=d.get(x,0)+int(y)
#最高点を調べる
w=max(d.values())
##ここまでで方針1,2の段階かな？

#そしてゲームをもう一度エミュレート？
m={}
for x,y in l:
#もう一度リストlを回してmへ格納
    m[x]=m.get(x,0)+int(y)
#前回のforで記録した最高点以上 and 前回の集計で最高点者であること？
    if m[x]>=w and d[x] ==w:
#勝利条件の成立したxをprintして breakで抜ける
        print x
        break
```

```python:
l=[raw_input().split() for i in range(int(raw_input()))]
# [['mike', '3'], ['andrew', '5'], ['mike', '2']]
```
で改行されてるn個の要素みたいなの受け取りを一行で書けるらしい。
リストの要素数によって何箇所かでforやwhileするなら、問題文に合わせて(大体はnとか)nに代入とかしたほうがよさそうな。len(n)でも代用できますけど。。

```python:
for x,y in l:
#x,yがどんな値になってるかを確認すると
#mike 3
#andrew 5
#mike 2
```

for x in l: としても名前だけを取り出すわけではなく、['mike','3']が出てくる。

####B. The least round way
ざっくりと大意
n*nで正方形に(負ではない)整数が並んでいる。
・左上からスタートして右下がゴール
通り道の全ての数字を掛け算して四捨五入する。


####C. Commentator problem
CPU （32bit / 64bit） に応じて別のアプリを起動する

# 導入

Dropboxフォルダの中に GVIM など32bit/64bit版アプリを両方入れている場合、
PCのCPUに応じて適切な方を起動して欲しいことがままあります。（意識せずに使い分けたい）

そんな時は、以下のAutoHotKeyスクリプトをコンパイルして作成した.EXEを
起動することで、自動的に振り分けるようにしています。
コマンドライン引数も引き継いでくれます。

# ソースコード

```ahk:gvim.ahk
; Function: 32bit環境か64bit環境かを判別し、異なるEXEを実行する
; NOTICE: 32bit環境でビルドしてください
#NoEnv
SetWorkingDir %A_ScriptDir%

GetNativeSystemInfo() ; OS の種類を取得
{
  VarSetCapacity(si,44)
  DllCall("GetNativeSystemInfo", "uint", &si)
  if ErrorLevel
      return -1

  arc := NumGet(si,0,"ushort")
  return arc
}

Is64bitCPU()
{
  arc := GetNativeSystemInfo()
  return (arc = 9 or arc = 6)
}

Is32bitCPU()
{
  arc := GetNativeSystemInfo()
  return (arc = 0)
}

; CPUの種類で、実行するパスを変更する
if(Is32bitCPU())
  command := "..\vim32\gvim.exe"
else if(Is64bitCPU())
  command := "..\vim64\gvim.exe"
else
{
  msgbox, unknown CPU
  ExitApp
}

; コマンドライン引数を引き渡す
loop, %0%
{
  arg := %A_Index%
  if( InStr(arg," ") > 0 )
    arg="%arg%"

  command=%command% %arg%
}

run, %command%
```

# 注意

このスクリプトをコンパイルするのは 32bit環境の方で行ってください。

# 参考

* [Variables to differentiate between 32 and 64 bit? - Support - AutoHotkey Community](http://www.autohotkey.com/board/topic/48500-variables-to-differentiate-between-32-and-64-bit/)
C++でJavaっぽいスレッドクラス ( pthread )

昔のgcc3の頃にJavaっぽいC++のスレッドクラス作ったものがあったので、メモも兼ねて投稿します。
boostやPocoが使えない職場で使えると思います。

```cpp
#include<pthread.h>
#include<stdio.h>
#include<iostream>

using namespace std;

class Runnable{
private:
public:
	Runnable(){}
	virtual ~Runnable(){}
	virtual void run() = 0;
};

class Thread : virtual public Runnable{
private:
	Runnable * runnable;
	
	pthread_t threadID;
	
	static void * __run( void * cthis ){
		static_cast<Runnable*>(cthis)->run();
		return NULL;
	}
	
public:
	Thread() : runnable(NULL){
		
	}
	
	Thread( Runnable * runnable ){
		this->runnable = runnable;
	}
	
	int start(){
		Runnable * execRunnable = this;
		if( this->runnable != NULL ){
			execRunnable = this->runnable;
		}
		return pthread_create( &threadID , NULL ,  __run , execRunnable );
	}
	
	int join(){
		return pthread_join( threadID , NULL );
	}
	
};


class HelloWorldThread : public Thread{
public:
	virtual void run(){
		cout << "Hello World" << endl;
	}
};

int main(){
	HelloWorldThread helloWorldThread;
	helloWorldThread.start();
	
	sleep(1);
	
	helloWorldThread.join();
	
	return 0;
}
```

Javaと同じようにインスタンスを作成してからstartしないとだめです。最初はコンストラクタと同時にスレッドが動くようにクラスを作成しましたが、pure virtualエラーが発生するので駄目でした。肝はpthread_createのvoidポインターには何でも渡せるのでクラスを渡して、スレッド実行時にクラスのポインターに戻して、メソッドを実行することです。

このテクニックは、シグナルハンドラーなどvoidのポインターを渡す関数でも使えます。
ディレクトリ移動を手軽にするauto cdとcdpath

## AUTO_CD
`setopt AUTO_CD`の1行を`~/.zshrc`に設定しておくと，ディレクトリ移動時に`cd`を打たなくても，ディレクトリと解釈できる文字列を打てば`cd`してくれる

```zsh:~/.zshrc
setopt AUTO_CD
```

```zsh
cd foo/bar/baz # 設定前
foo/bar/baz    # 設定後
```

これにより`cd`はホームディレクトリに移動するとき以外は使う必要がなくなる．ディレクトリ名がコマンド名と被ってしまうようなときは`./ruby`のように指定すればよい．`cd ruby`よりは楽．

## cdpath
そして`AUTO_CD`に`cdpath`を合わせて設定するとより強力

```zsh:~/.zshrc
setopt AUTO_CD
cdpath=(.. ~ ~/src)
```

この2行を追加しておけば，親ディレクトリやホームディレクトリ，~/src以下へはどこからでもディレクトリ名だけで移動できるようになる．プロジェクト間の移動も一瞬．

## マニュアル
一応マニュアルへの参照を．それぞれ`man zshoptions`, `man zshparam`に載っている．

```
$ man zshoptions
...
 AUTO_CD (-J)
              If a command is issued that can't be executed as a normal command, and the command is the name of a directory, perform the cd command to that directory.
...
```

```
$ man zshparam
...
cdpath <S> <Z> (CDPATH <S>)
              An array (colon-separated list) of directories specifying the search path for the cd command.
...
```
PHPでナウいカレンダー

PHPでカレンダーとか死ぬほどよくありますが、mktime()とか使って手動で作ってるタイプばっかりで、DateTimeを使ったカレンダーが見当たらなかったので作ってみる。

```php
<?php
// かれんだー
class Calendar{
	
	private $datetime;
	public function getDatetime(){ return clone $this->datetime; }
	
	/**
	* コンストラクタ
	* @param int 年
	* @param int 月
	* @param int 日
	*/
	public function __construct($year = NULL, $month = NULL, $day = NULL){
		// デフォルト
		$default = new DateTime();
		if($year  ===NULL){ $year  = $default->format('Y'); }
		if($month ===NULL){ $month = $default->format('m'); }
		if($day   ===NULL){ $day   = $default->format('d'); }

		$str =sprintf('%04d-%02d-%02d', (int)$year, (int)$month, (int)$day);
		$this->datetime = DateTime::createFromFormat('Y-m-d', $str, new DateTimeZone('Asia/Tokyo'));
		if(!$this->datetime){ throw new InvalidArgumentException(); }
	}
	
	/**
	* 日曜開始、土曜終了のカレンダーを取得
	* @return DatePeriod
	*/
	public function getCalendar(){

		// 開始日 月初を含む週の日曜日
		$start = clone $this->datetime;
		$start->modify('first day of')->modify('+1 day')->modify('last Sunday');

		// 終了日 月末を含む週の土曜の次の日 DatePeriodは最終日が含まれないため+1する
		$finish = clone $this->datetime;
		$finish->modify('last day of')->modify('-1 day')->modify('next Saturday')->modify('+1 day');
		
		return new DatePeriod($start, new DateInterval('P1D'), $finish);
	}
}

	// 使い方
	$calendar = new Calendar(2013, 12, 20);
	
	// 画面表示
	print('<table><tr><th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th></tr>');
	foreach($calendar->getCalendar() as $key=>$val){
		if($val->format('w') === '0'){
			// 日曜日
			print('<tr><td>');
		}else{
			// その他
			print('</td><td>');
		}
		
		if($val->format('m') === $calendar->getDatetime()->format('m')){
			// 当月
			print($val->format('d'));
		}else{
			// 当月ではない
			print('&nbsp;');
		}
		
		if($val->format('w') === '6'){
			// 土曜日
			print('</td></tr>');
		}
	}
	print('</table>');
```

2038年問題フリーで、9999年まで使えるカレンダーです。

当月や週末の判定が微妙だな。
完全にやるなら月比較メソッドを追加するか、むしろ描画系もクラス内で行えるようにしておくとよいでしょう。

ここまで作っておいてなんですが、どうしても外部ライブラリが許されざる状況にあるとかでない限りは[PEAR::Calendar](http://pear.php.net/manual/ja/package.datetime.calendar.php)とかに任せとけばいいんじゃないかな。
ゲーム制作14日目!

#今日のメニュー
・カウントダウン画面実装
・つぶやき機能にハッシュタグ実装

#カウントダウン画面について
ゲーム画面に入る前にカウントダウン画面を挟みました。
この画面はあたらしいシーンとして定義作成し、
pushScene関数を使用して、ゲームシーンの上にかぶせています。
この時、カウントダウンシーンの背景に透明度の高い色を設定することで、
ゲームシーンをすかしてみせることができます。
このシーンのコードは以下の感じ

```js
		var createPrepareScene=function(){
			game.fps=24;
			var scene=new Scene();
			scene.backgroundColor='rgba(0,0,0,0.7)';
			const preCount=25;
			var count=preCount;
			var threeCount=2;

			const quarterOfWindow=(WIDTH+CONTROLWIDTH)/4;
			const height=HEIGHT/2;

			var countChara=new Array();
			for(var i=0;i<3;i++){
				countChara.push(new Sprite(CHARASIZE,CHARASIZE));
				countChara[i].image=game.assets['./img/charTip8dir.png'];
				countChara[i].x=quarterOfWindow*(i+1)-CHARASIZE/2;
				countChara[i].y=height-CHARASIZE/2;
				scene.addChild(countChara[i]);				
			}

			/*
			var threeSprite=new Sprite(64,64);
			threeSprite.image=game.assets['./img/charTip8dir.png'];
			threeSprite.x=quarterOfWindow-CHARASIZE/2;
			threeSprite.y=height;
			scene.addChild(threeSprite);

			var twoSprite=new Sprite(64,64);
			twoSprite.image=game.assets['./img/charTip8dir.png'];
			twoSprite.x=threeSprite.x+quarterOfWindow;
			twoSprite.y=height;
			scene.addChild(twoSprite);

			var oneSprite=new Sprite(64,64);
			oneSprite.image=game.assets['./img/charTip8dir.png'];
			oneSprite.x=twoSprite.x+quarterOfWindow;
			oneSprite.y=height;
			scene.addChild(oneSprite);
			*/

			scene.onenterframe=function(){
				count--;
				if(count<0){
					count=preCount;
					threeCount--;
					if(threeCount<0){
						game.popScene();
					}
				}

				if(threeCount>=0){
					countChara[threeCount].frame=(countChara[threeCount].frame+1)%8;
					countChara[threeCount].opacity=count/parseFloat(preCount);
				}
			};
			return scene;
		};
```

えんしゅつはてきとう

#ハッシュタグ

昨日時点ではプリセットのつぶやきにハッシュタグをつけられずなやんでいました。
プリセットの文章はURLに書く事で設定できるのですが、
その文章に空白文字が入れられなかったのが原因でした。

この問題はURLをエンコードすれば解決するということを友人に教えてもらいました。
URLをエンコードすると日本語などの文字が全て置換され、%などを使用した文字列になります。
この状態では空白文字は置換されているため問題になりません。
実際のコードは以下のかんじ

```js
			tweetButton.addEventListener(Event.TOUCH_START,function(){
				const hashtag=' #picoSnakeGame';
				const gameUrl=' ';
				var score=count+'人の子供達を育て上げました！';

				var tweetText=encodeURIComponent(score+hashtag+gameUrl);
				var url="https://twitter.com/share?text="+tweetText+"&amp;";
				var features='width=650, height=450, menubar=no, toolbar=no, scrollbars=yes';
				var win = window.open(url,"twitter-share-button",features);
			});
```

URLのエンコードについて参考
[flat memo JavaScriptでURIエンコード（URLエンコード）を行う](http://logic.moo.jp/data/archives/438.html)

#ソースコード
[githubへ](https://github.com/picoslime/SnakeGame)

#今日の成果
[ゲームが起動します](https://dl.dropboxusercontent.com/u/35809589/SnakeGame/index.html)
Arduino でなんだか起動しなくなった時の解決

# どんなとき？

無限ループしちゃうとか、辺なプログラムを書き込んでしまったときに、
USBケーブルをさしたり、リセットをしても、PC が Arduino を認識するのは数秒だけという症状に
陥ることがある。そのときの解決方法。

# 解決方法

1. Arduino ソフトウェアを起動します
2. 適当なサンプルプログラムを読み込んで書き込みボタンを押します。書き込んでいます。。。みたいなのが出るまで待機。
3. 書き込もうとしている最中に、リセットボタンを押します。
4. Arduino は、数秒だけの認識している間にプログラムを書き込んでくれます。

これでOK.
つまり、Arduino ソフトウェアのタイムアウトまでの時間に Arduino を差したりリセットをしたりすれば
何とか回避できましたよって話でした。
FlaskとPILImageを使ってリサイズした画像をResponseする

Webの画像をサムネイルにして表示したい！
ファイルシステムからの画像の読み書きは情報いっぱいあるんだけど、
メモリ上にキャッシュして処理したかったのでやってみた。

# やりたいこと
- 画像をリサイズしてサムネイルをつくりたい
- Webから撮ってきた画像をファイルに書き出すことなくレスポンスを作りたい（メモリ上にキャッシュしたい)
- Flaskで画像のレスポンスを返したい

# 方法

## 1. StringIOを使って画像のバイナリを受け取る
```
url = 'http://www.google.co.jp/intl/ja_jp/images/logo.gif'
buffer = urllib2.urlopen(url).read()
img = Image.open(StringIO(buffer))
```

## 2. 画像をリサイズしてStringIOに渡す

```py
size = (120, 75)
img.thumbnail(size)
buf = StringIO()
img.save(buf, 'png')
```

## 3. レスポンスを作る

```py
response = helpers.make_response(buf.getvalue())
response.headers["Content-type"] = "Image"
return response
```

コードは[Github](https://github.com/contaconta/FlaskPILImageThumbnailExample)に

＊参考
http://effbot.org/imagingbook/pil-index.htm