OmniAICreator/Qiita-1.07M huggingface dataset:
Ember.js 組み込みViewクラスと、Viewクラスの実装方法

今日は、Ember.Viewを継承した、組み込みのViewクラスを紹介します。
また、自前でカスタムViewクラスを作ってみます。

Viewクラスは、例えばinput要素をラップして、データとinput要素の値を相互にバインディングするためなどに利用します。
その他、表示の抽象化一般に使えるはず。

Viewクラスは以下のように使います。

```html
  <h3>Your name</h3>
  {{view Ember.TextField valueBinding="name"}}
```

それではViewクラスを見ていきましょう。


## Ember.Checkbox

名前の通り、input type="checkbox"の要素を出力します。
データ -> input要素、input要素 -> データ と、双方向のデータバインディングを行います。

```html
{{view Ember.Checkbox checkedBinding="receiveEmail"}}
```

## Ember.TextField

名前の通り、input type="text"の要素を出力します。
双方向のデータバインディングを行います。
type, value, size, placeholder, disabled, maxlength, tabindex属性に値をセットできます。

```html
{{view Ember.TextField valueBinding="firstName"}}
```

## Ember.TextArea

名前の通り、textarea要素を出力します。
双方向のデータバインディングを行います。
rows, cols, placeholder, disabled, maxlength, tabindex属性に値をセットできます。

```html
{{view Ember.TextArea valueBinding="firstName"}}
```

## Ember.Select

名前の通り、select要素を出力します。
双方向のデータバインディングを行います。


```html
Ember.Select = Ember.View.extend(
{{view Ember.Select
   contentBinding="App.controller.content"
   valueBinding="App.controller.selected"
}}
```

contentBindingにoptionの値の配列を指定します。valueBindingはデータバインディングする変数を指定します。
対応するcontrollerの定義は以下のようになります。

```js
App.controller = Ember.Object.create({
  selected: null,
  content: [
    "Yehuda",
    "Tom"
  ]
});
```


option要素をもっときめ細かく指定するときは、contentBindingにオブジェクトの配列を指定することもできます。
その時の記述は以下のようになります。



```html
{{view Ember.Select
       contentBinding="App.controller.content"
       optionValuePath="content.id"
       optionLabelPath="content.firstName"
       selectionBinding="App.controller.selectedPerson"}}
```



## Ember.RadioGroup


実は現在のバージョン1.0.0-pre.2には、ラジオボタンのためのViewクラスが用意されていません。ただし、ラジオボタンのサポートは以下のPull Requestが取り込まれましたので、もうすぐリリースされるはずです。備えましょう。

https://github.com/emberjs/ember.js/pull/1235

## Ember.ContainerView

Ember.ContainerViewを使うことによって、Viewの組立をプログラムで制御することができるようになります。

```js
var container = Ember.ContainerView.create();
container.append();
var coolView = App.CoolView.create(),
    childViews = container.get('childViews');
childViews.pushObject(coolView);
```




## カスタムViewクラス

Ember.TextFieldをほぼコピって、input type="date" 型の要素を出力するEmber.Viewサブクラスを実装してみます。

```js
App.DateField = Ember.View.extend(Ember.TextSupport,
    {
  classNames: ['ember-date-field'],
  tagName: "input",
  attributeBindings: ['type', 'value', 'size'],

  value: "",

  type: "date",

  size: null
});
```

```html
{{view App.DateField valueBinding="start_on"}}
```

この程度のカスタマイズなら簡単に実装できて良い感じですね。

今回の用途なら、既存のEmber.TextFieldクラスを継承するほうがいいでしょう。(ursmさん、情報ありがとうございます!)

```js
App.DateField = Ember.TextField.extend({
  type: "date"
});
```

このクラスは、上に書いたApp.DateFieldクラスと全く同じように動作します。
dotfiles (設定ファイル)の管理に git submodule を使う

こんにちは [@sonots](https://twitter.com/sonots) です。今回わたしは git submodule の使いどころの一例として dotfiles (設定ファイル)の管理への応用を紹介してみようと思います。

# まえおき. dotfiles の管理に git を使う

自分の dotifles (設定ファイル)を github のリポジトリに登録して、新しい環境でも git clone すれば簡単に環境構築できるようにしている方って、最近ではけっこういらっしゃるのではないでしょうか？そういう私も

    https://github.com/sonots/.dotfiles

で設定ファイルを管理をするようにしていて、新環境へのインストールはこちらの gist https://gist.github.com/4239842 に書いたスクリプトを

    curl https://raw.github.com/gist/4239842/dotfiles.sh | sh

のように実行してインストールできるようにしています。中でやっているのは git clone と設定ファイルへのシンボリックリンク作成ですね。

設定ファイルをいじった時も手元の環境で git push しておき、他の環境で git pull --rebase すれば配布ができるので、非常に捗ります。

# 本題. dotfiles の管理に git submodule を使う

dotfiles (設定ファイル)の管理をしようと思うと、他の方が書いて公開してくださっている zsh plugin だとか vim plugin だとかを使いたくなることがありますよね。

そんなときにオススメしたいのが git submodule を利用した dotfiles の管理です。

# git submodule とは

git submodule は、外部の git リポジトリを、自分の git リポジトリソースツリーのサブディレクトリとして登録する仕組みです。

リビジョン番号も登録されるので、バージョンを固定化するのにも使えます。

# 簡単に使い方を紹介

git submodule add で外部リポジトリをサブモジュールとして登録できます。たとえば、vimmer の方なら皆使っているであろう vim の plugin マネージャーである vundle を submodule として登録してみます。

    git submodule add http://github.com/gmarik/vundle.git .vim/vundle.git

submodule を登録すると、.gitmodules ファイル（なければ作られる）に以下のような変更が加えられます。

    [submodule ".vim/vundle.git"]
            path = .vim/vundle.git
            url = http://github.com/gmarik/vundle.git

これで登録は完了しているので、git commit && git push しておいてあげましょう。

上記の例では直接、公開されているレポジトリを submodule として登録しましたが、私自身は fork した github の自分のポジトリを submodule として登録するようにしています。魔改造をしたくなることがけっこうあるので ^ ^;

submodule 内の変更は、その submodule ディレクトリ内で git commit && git push する形になります。

※ git submodule の微妙な所その１なのですが、git submodule には削除コマンドが用意されていないです。単に git rm -rf などして削除するとおかしな感じになるので、例えばこちらのサイト http://d.hatena.ne.jp/oppara/20101116/p1 などを参考に削除していただければと思います。

# git clone した場合の反映方法

これがまたちょっと git submodule の微妙な所その２なのですが、

    git clone https://github.com/sonots/.dotfiles.git ~/.dotfiles

のように git clone しただけでは、まだ submodule の内容は取得されません。その後に

    cd ~/.dotifiles
    git submodule init
    git submodule update

としてやっと submodule の内容を clone することができます。これがやり方を忘れがちで面倒くさいのですが、dotfiles (設定ファイル)のインストールスクリプトにそれを書いてしまえばOKです。私は書くようにしました。https://gist.github.com/4239842

これで、インストールスクリプトを実行すれば、zsh plugin や vim plugin (このタイミングでは vundle しか入れてませんが) などもインストールされるようになって捗るようになりました。

# まとめ

というわけで、git submodule はちょっと癖があって使いづらいのですが、dotfiles (設定ファイル)の管理に使ってみたら、それなりに便利に使えたので、紹介してみました。

というか、これ以外に git submodule の使いどころを見出せていない自分がいます ^ ^;

# 追記: git submodule cheat sheet

リンク貼っておきますね [git submodule cheat sheet - sonots:blog](http://blog.livedoor.jp/sonots/archives/30742374.html)
はてなブログ+Markdown記法でわかりやすいコード表示方法

といっても code, pre に自分で CSS を定義するだけですが。

参照元：http://stackoverflow.com/questions/9045677/css-help-how-to-format-code-block-and-code-line

管理画面「デザイン」→「デザインテーマ」で選択できる8種類のどのテーマでも、残念ながら現時点では Markdown コード記法に対応したハイライト表示がされません（フィードバックは提出済み）

管理画面「デザイン」→「カスタマイズ」→「デザインCSS」欄、デフォルトで定義されている
 
```css:on_default.css
/* <system section="theme" selected="bordeaux"> */
@import "/css/theme/bordeaux/bordeaux.css";
/* </system> */

/* <system section="background" selected="a0a0a0"> */
body{background:#a0a0a0;}
/* </system> */
```

‥の下へ、たとえば以下の defined_by_you.css のような内容を貼り付けて保存する

2014/03/21追記：今更ですが、より正確には pre.code { } に指定するのがよいようです（下記のままでも適用はされます）

```css:defined_by_you.css
code {
  font: 12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
  color: #52595d;

  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;

  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;

  border: 1px solid #ccc;
  background-color: #f9f099;
  padding: 0px 3px;
  display: inline-block;
  margin: 2px;
}

pre {
  border: 1px solid #cacaca;
  line-height: 1.2em;
  font: 12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
  padding: 10px;
  overflow:auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #FAFAFB;
  color: #393939;
  margin: 2px;
}
```

ブログ本文中の
\`one line code\` や

\`\`\`
first line include code
this line also code
\`\`\`
の見映えを自分で定義できます。好みによって背景色 `background-color: #f9f099;` や角丸の径 `border-radius: 3px;` を変えるとよいかもしれません。
Scrum boardとKanban boardの使い分け

この記事は[Atlassian Advent Calendar 2012](http://www.zusaar.com/event/444403)の11日目です。

Greenhopperではboardを作成できますが、このときにScrum boardにするか、Kanban boardにするか選択できます。
同じフィルタ条件でいくつでも作成できるので、二つ作って比べてみるのが手っ取り早いのですが、両方使ってみてなんとなく適したやり方が見えてきたので、一例として紹介します。

Kanban Board
-------------
Kanban boardは、Scrum boardと下記の点が違います

* sprintがないので、planメニューがない
* sprintがないので、バーンダウンチャートがない
* sprintがないので、story pointがない

Kanbanを見て現在のタスクの状態を確認しつつ、ベロシティに相当する速度は、Cumulative flow diagramで確認することになります。

使い始めてすぐ気がつくのは、KanbanでDoneにしたタスクが消えずに積み上がることです。これは、Doneレーンの右上から、Releaseをすると消えます。基本的な考え方は、Releaseの間は同じboardを使い続けるということだと思います。

ただDoneの所に積み上がっちゃうのが嫌で、Releaseよりももうちょっと短い単位で綺麗にしていきたいという事もあるでしょう。その場合はフィルタ条件に適当な条件を追加すればOKです。

使いどころ
---------

ところで、Kanbanの機能は、全部Scrum boardがもっています。じゃあScrum boardだけで足りるんじゃないの？ と普通思います。

実際ちゃんとしたScrum（顧客側Product Ownerがチームに寄り添ってくれる）ならばScrum boardだけで良いと思います。

しかしここは日本（いや海外だからって理想的なケースばかりだとは思いませんけど）、顧客がオンサイトじゃない場合や、ステークホルダーが入り組んでいるケースも多々あります。また、証跡としてコミュニケーションのログを求められるケースもあります。

そんな場合に、JIRAでQ&Aやリスク一覧、課題一覧も統合しようとするのは自然な流れです。

その場合、それら（総称して「課題」と呼びましょう）の解決サイクルと、タスクの解決サイクルの違いが問題になります。
Scrumでしたら基本的にはスプリントを単位としますが、課題やリスクはスプリント単位でアクションを起こすのが難しいものもあります。

そういうときに、Kanban boardを使います。具体的には、Issue Typeでフィルタ条件を分け

* 課題やリスクやQ&A - Kanban board
* それ以外 - Scrum board

という感じで、使い分けます。

メリット
--------
課題をKanban boardで管理したのは、先の解決サイクルの違いのためでしたが、運用してみると、

* 課題の状況が一発で分かる。例えば回答待ちの課題がいくつ以上になったら催促するといったアクションに結びつけられる
* Cumlative flow diagramやControl chartにより、課題のサイクルタイムや、その健全性が分かる。
* ずーっと居座り続けている課題について、分割して少しでも先に進める機運が出てくる

という利点がありました。課題を全部解消してboardをリリースしてまっさらに戻すという達成感があり、表形式で管理したときには得られない充実感があります。

まとめ
-----
Kanban boardは、leanを採用していない場合でも、課題管理にリズムを付ける道具として利用することができます。
それにより、課題管理が受け身から攻めの姿勢に変わるのが実感できるのでオススメです。
TheanoのWindows対応等についての現状

Theanoは、PythonでCUDAが手軽に使えるライブラリですが、あまり新しい情報が日本語でも英語でもないようなので、昨日確認したことをシェアします。

・Theano 0.6rc2 が最新バージョンとして普通に紹介されているが、Windows環境では0.5までしか対応していない。0.6rc2をWindowsで使う場合、CPUモードでならば動作するが、肝心のGPUを使うモードにすると、Theanoから下請で呼び出すnvcc（というか実態としてはVC++）でエラーが出てコンパイルできない（TheanoのMLにはCPUモードは動作確認したと書いてあるが、GPUモードはダメとまでは書いてない模様・・・）。

・Theano 0.5をWindows環境で動かす場合、CUDA v5.0でもGPUモードで実行できる。deeplearning.netのチュートリアルにあるLiner RegressionもMultilayer Perceptronもそのまま動くし、0.6rc2のチュートリアルにあるコードも、少しの修正（CPUモードかGPUモードかの自動判定機能のコメントアウト等）で問題なく動作するが、0.5や0.6rc2のテストがどの程度通るかどうかは未確認。
テーマのOGP対応カスタマイズ

----

[この投稿はXOOPS Themes and Templates Advent Calendar 2012の8日目の記事です。](http://qiita.com/advent-calendar/2012/xoops-themes-templates/participants)

⇒　[アドベントカレンダーの参加者リスト](http://qiita.com/advent-calendar/2012/xoops-themes-templates/participants)
⇒　[7日目の投稿 デザイナが知っておくべき XOOPS Cube Legacy 2.2 の新機能 by kilica](http://qiita.com/items/3e386c93bc8db161796d)
⇒　[bodyにclass設定して、１～３カラム対応のテーマにする方法TwitterBootstrapを使ったテーマで、１～３カラム対応にする方法 by marine_xoops123](http://qiita.com/items/70eca3f9344757407b3a)

----

今回がAdvent Calendarへの投稿が始めてになりますargonです。よろしくお願いします。

さて、今回は既存のテーマを少しカスタマイズしてOGP対応をする方法の紹介をしたいと思います。
最近はFacebookの利用者も増え、Facebookでいいね！したり自分のウォール等にウェブページのURLを貼ったものを投稿する機会も増えてきたと思います。そのFacebook上で良い感じに表示する設定がOGPになります。

# OGPとは
OGPとはThe Open Graph protocolの略でFacebookやGoogle+、mixiなどのSNSで使われている、ウェブページに何を書いてあるかの説明の書き方になります。

The Open Graph protocol(英語)
http://ogp.me/

# テーマへのカスタマイズ方法
やり方はわりと簡単です。以下の記述をテーマのメタタグに追加とウェブページ内容にそって修正し表示用の画像を用意するだけです。

```theme.html
<meta property="og:title" content="<{$xoops_sitename}>" />
<meta property="og:type" content="website" />
<meta property="og:description" content="<{$xoops_meta_description}>" />
<meta property="og:url" content="<{$xoops_url}>" />
<meta property="og:image" content="<{$xoops_imageurl}>images/ogp_image.png" />
```

各行ごとに見て行きましょう。
「og:title」はウェブページが名前になります。こちらはSmartyでXOOPSの設定を自動で入力してくれます。
「og:type」はの項目はウェブページが何のページであるかを記します。上記では"website"としましたが、ブログを中心としたウェブページでしたら"blog"、学校なら"school"、会社なら"company"など適切な内容に変更してください。
「og:description」はウェブページの説明になります。こちらもSmartyで記述してあるのでXOOPSの設定と同じものが表示されます。XOOPSの設定は管理画面の「互換カレンダーシステム -> 一般設定 -> METAタグ(Description)」で行えます。ここではフッターの設定も行えます。忘れがちですが部分ですがしっかりと適正な内容を設定しておきましょう。
「og:url」はウェブページのURLです。こちらもSmartyで記述してあるのでXOOPSの設定と同じものになります。
「og:image」ウェブページが記述しているモノの画像になります。こちらもテーマのimagesフォルダの下にogp_image.pngを追加するという形で記述してあります。
画像の内容ついてですが、個人のサイトでしたらその個人のアバター画像、会社のサイトでしたら会社のロゴマーク等適切な画像をリサイズして、テーマのimagesフォルダに設置してください。テーマの中に設置する形で書きましたが、もちろん画像の設置先を変更しても問題ないので、運用しやすいように設定しましょう。
画像のサイズですが規定で縦横200pxになっているので縦横200px以上にしましょう。

# 確認
設定後に下記のサイトでURLを入力して"デバッグ"をクリックして、確認してみてください。
意図しているよう正しく表示されたでしょうか？
https://developers.facebook.com/tools/debug

# 最後に
テーマのOGP対応カスタマイズいかがでしたか？記述する部分も少なく画像を1つ用意すれば、すぐできるのでXOOPSウェブサイトのオーナーさんは是非トライしてみてください。
パターンマッチもどき


このまえ何とか実験でOCamlを使ってコンパイラやインタプリタを実装したので、それを真似てPerl6で似たようなことをやってみようと思います。

実験ではパーザによってヴァリアント型に落とし込まれた命令列をパターンマッチによって分解しながら実行していくという方針だったのですが、Perl6にはヴァリアント型のようなデータ構造も、パターンマッチもありません。しかし、「似たような」という程度のレベルなら実現する方法がありますので、今回はそれを紹介したいと思います。

## 代数的データ構造
おそらくPerl6のような型のゆるい言語では、OCamlのヴァリアント型のような構造を格好良くバラすというのは難しいと思います。Perl6的にはおそらくRoleを使って実現するとスマートなのでしょうが、今回は話を簡単にするため、リストを使うことにします。

## パターンマッチ
私の理解では、パターンマッチというのは

* 構造によって処理を分岐しつつ
* 構造をバラし、部分ごとに変数に束縛する

という操作です。前述のとおり、今回考える構造はリストだけなので、こいつを上手いことバラしつつ変数に束縛するというのが目標になります。網羅性チェックについては、まぁどう考えても無理なので気にしないことにしましょう。無理なものは無理。

とりあえず今回あつかう対象として次のようなリストを考えます。

```
 [Plus, [Literal, 1], [Minus, [Literal, 2], [Plus, [Literal, 3], [Literal, 4]]]]
```

ヴァリアント型のデータ構成子に相当するものが無いので、ここでは型オブジェクトで代用することにします。`Plus`は足し算、`Minus`は引き算、`Literal`は評価すると値を返すリテラルを示す命令だと考えてください。
つまり、この式はポーランド記法で`(+ 1 (- 2 (+ 3 4)))`に相当する式になります。これを評価して正しく`-4`が計算できるような関数`evaluate`を考えて行きましょう。


## どうやるとスマートか
今までずらずらと書いてきましたが、ようやくここが今日の本題です。

リストの先頭の要素をチェックして大量に分岐するのもいいですが、これも命令の種類が増えてくると破綻が見えてきます。どうするとイイカンジに捌けるようになるのでしょうか。

結論から言うと、関数のmultiple dispatchを使います。これは関数オーバーロードのような機能で、(オーバーロードとは違い)実行時にシグネチャにマッチする実装を呼び分ける機能です。一般的には引数の型や個数を見て処理を分岐するのに用いるのですが、実はmulti宣言された関数のシグネチャにリストを書くと、リストの構造によっても呼び分けることが出来たりします。

具体的に今回の場合について考えると、以下の様なディスパッチを作ることで、命令別に処理を分けることができるようになります。

```
multi sub evaluate ([Plus, $e1, $e2]) { ... } # 足し算
multi sub evaluate ([Minus, $e1, $e2]) { ... } # 引き算
multi sub evaluate ([Literal,  $l]) { ... } # リテラル
multi sub evaluate (*@_) { ... } # 実装されていない命令
```

これを踏まえて、足し算と引き算を評価できるように実際の処理を書いてみましょう。

```
use v6;

class Plus {}; #足し算命令
class Minus {}; #引き算命令
class Literal{}; #リテラル命令

multi sub evaluate ([Plus, $e1, $e2]) {
    my ($v1, $v2) = ((evaluate $e1), (evaluate $e2));
    return $v1 + $v2;
}

multi sub evaluate ([Minus, $e1, $e2]) {
    my ($v1, $v2) = ((evaluate $e1), (evaluate $e2));
    return $v1 - $v2;
}

multi sub evaluate ([Literal, $l]) {
    return $l;
}

multi sub evaluate (*@_) {
    fail "Unknown instruction " ~  @_.perl;
}
```

引数に与えられた式を再帰的に評価して、帰ってきた値を足したり引いたりして式の値を計算します。非常に単純ですね。`*@_`は全ての引数をリストとして`@_`に格納するという記述なので、`_`のように全てにマッチするパターンとして用いています。命令に対する引数の数がおかしかったり、実装されてない命令が見つかると、最後のディスパッチが呼ばれてエラーを吐きだします。

実際に実行した結果を以下に示します。

```
say evaluate [Plus, [Literal, 1], [Minus, [Literal, 2], [Plus, [Literal, 3], [Literal, 4]]]];
say evaluate [Plus, [Literal, 1], [Literal, 2], [Literal, 3]]; #不正な引数
```

```
% perl6 simple.pl
-4
Unknown instruction Array.new([Plus, [Literal, 1], [Literal, 2], [Literal, 3]])
  in method gist at src/gen/CORE.setting:10149
  in sub say at src/gen/CORE.setting:7460
  in block  at simple.pl:28
```

イイカンジに計算できていますね。

## まとめ
今回はmultiple dispatchを使ってリストを分解する手法を紹介しましたので、次回からはもう少し機能を増やして行きましょう。値に型をつけたり、roleを用いて更にイイカンジに命令を定義できるようにしたりします。あと3,4回くらいで簡単なインタプリタが完成すると思いますので、気長にお付き合いください。
jQuery+CoffeeScriptでのクリックイベント時の引数の渡し方

jQueryとCoffeeScriptならなんか格好良い書き方があるのかと思ったけど、生JSと対して変わらんのしかわからんかった。
とりあえずコードは以下のような感じ。

```coffeescript:function.rb()->
$("element").click(->
  ((num) ->
    console.log num
    return
  )(123)
)
```

なんか良い書き方があったら教えて欲しい。
Rcpp:: Named と _[ 

Named と _[ が同じなのは
分かっているんだが，マニュアルというか
ビネットには記されていないような

```

#include <Rcpp.h>
using namespace Rcpp;

// [[Rcpp::export]]
List test (){
  return List::create(_["first"]= "ABC",_["second"]= 3.14,
   		      _["third"]= 3L)
  // return List::create( Named ("first") = "ABC", Named("second") = 3.14,
  // 					   Named("third")= 3L); 
   
}
/*** R
  test ()
*/
```


Rcpp-quickref.pdf のコード内に
コメントとして // short for Named とあった．
unite-outlineが便利すぎる

unite-outlineがとても便利。プラグインの指定は次のとおり。

    NeoBundle "h1mesuke/unite-outline"

markdownで文章を書いているときに、そのアウトラインを表示してくれる。
べつにmarkdownに限らない、JavaScriptのコードで実行すれば関数一覧がでる。めっちゃ便利です。

僕は、ずっと出しておきたいのと画面の右側に表示させたかったので、

    nnoremap <silent> <Leader>o :<C-u>Unite -vertical -no-quit outline<CR>

と定義して使ってます。
Rails 3でER図を作成

Rails ERDが楽ちん

# インストール方法

graphvizをインストール

```
$ sudo brew install graphviz
```

Gemfileを編集

```
group :development do
  gem "rails-erd"
end
```

gemをインストール

```
$ bundle install
```

グラフ作成
notation=bachmanで一対多の関係をわかりやすく

```
$ rake erd notation=bachman
````
# 参考文献

http://rails-erd.rubyforge.org/install.html
前方, 後方, 部分一致セレクタ


[（バグあるけど）IE7 以上で使えるらしい](http://reference.sitepoint.com/css/css3attributeselectors)のに、使ったことありませんでした。[パフォーマンスは悪いらしい](https://speakerdeck.com/jonrohan/githubs-css-performance)けど、便利そう。

## 前方一致

`[attr^="val"]` の型式。

```css
a[href^="https"] {
  ...
}
```

## 後方一致

`[attr$="val"]` というふうに。

```css
img[src$="png"] {
  ...
}
```

## 部分一致

`[attr*="val"]` な感じ。

```css
a[href*="qiita.com"] {
  ...
}
```
webdriverでスクリーンキャプチャ

```java
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;

File tmpFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
try {
    FileUtils.copyFile(tmpFile, new File("tmp.png"));
} catch (IOException e) {
    e.printStackTrace();
}
```
Qiita Notifications v2.1.0 Release

インストールはこちらから > [Chrome Web Store - qiita-notifications](https://chrome.google.com/webstore/detail/qiita-notifications/hcnchocfgcldaldkchelnhpidgmfaocc)

##リンクを挿入ボタンを設置

Markdown のリンク記法は自分でタイトルを入力しないといけないのが極めて面倒くさいので、textarea の上に「リンクを挿入」ボタンを追加しました。
これを使うとリンク先のタイトルをアンカーテキストとしたリンクを簡単に作ることができます。

![](http://cdn-ak.f.st-hatena.com/images/fotolife/y/yuku_t/20121208/20121208142918.png?1354944578)

「リンクを挿入」をクリックするとプロンプトが開かれるので、好きな URL を入力します。

![](http://cdn-ak.f.st-hatena.com/images/fotolife/y/yuku_t/20121208/20121208142919.png?1354944604)

すこしすると、現在のカーソル位置にリンクが挿入されます。

![](http://cdn-ak.f.st-hatena.com/images/fotolife/y/yuku_t/20121208/20121208142920.png?1354944619)

本機能を実装するために extension のアクセス権限を強化しました。
その関係で自動アップデートが効かないので、本機能を利用したい方は Tools > Extensions を表示して更新を許可してください。
AndroidエミュレータとEclipseの接続が切れた時

せっかく長い時間待ってエミュレータを立ち上げたのにEclipseとの接続が切れてしまって
またエミュレータを立ち上げなおさないといけないという時のTipsです。

#### エミュレータを起動している時に以下のメッセージで接続が切れる

````zsh
[2011-03-31 11:22:58 - Logcat]device not found
com.android.ddmlib.AdbCommandRejectedException: device not found
    at com.android.ddmlib.AdbHelper.setDevice(AdbHelper.java:736)
    at com.android.ddmlib.AdbHelper.executeRemoteCommand(AdbHelper.java:373)
    at com.android.ddmlib.Device.executeShellCommand(Device.java:284)
    at com.android.ddmuilib.logcat.LogPanel$3.run(LogPanel.java:527)
````

この状態でもう一度 Run すると違うエミュレータが立ち上がってしまいます。

####ターミナルで以下のコマンドを実行することで再接続できます

````zsh
# adb kill-server
# adb start-server
````

これでエミュレータが起動するのを待ってエラーが出た時のショックから解消されます。
Bonfire for JIRAの紹介

この記事は[Atlassian Advent Calendar 2012](http://www.zusaar.com/event/444403) の9日目です。

ここ半年ほど、機会があってAtlassianのJIRA Ondemandを利用しています。10人以下だと 10$/月で、更にGreenhopperやbonfireといった付加サービスも +10$/月で利用できます。

Webシステムの開発でGreenhopperとBonfireを利用して、特にBonfireがものすごく便利だったので、今回紹介したいと思います。

Bonfire
-------
[実際の作業動画][2]

[Bonfire][1]はAtlassianが提供しているブラウザプラグインで、Webブラウザから簡単にJIRAのIssueを作成する機能を提供します。Firefox, Chrome, IE, Safari用のプラグインが提供されており、特にクロスブラウザのテストなどで威力を発揮します。

Webのテストでは、ブラウザ間に微妙に異なる挙動のせいでたとえばIEだけ見た目がずれたりIEだけ表示されなかったりIEだけ(略)といったケースがあると思います。そしてそれを開発チームに伝えるために実施手順はもちろん、画面キャプチャや実行環境を伝えることも欠かせません。

JIRAからIssueを登録するときにこれらの情報を登録しようとすると、ファイルアップロードを行ったり、ブラウザバージョンや実施OSといったカスタムフィールドに情報を書いたりと、とかく煩雑になりがちです。Bonfireはそれらを本当に簡単にしてくれるツールなのです。

主な機能は下記の通りです。

* Issueテンプレート機能
* 画面キャプチャ機能
* 画面キャプチャ加工機能
* 環境情報登録機能

Issueテンプレート機能
------------------
![テンプレート作成画面](http://gyazo.com/fe6f269ee2937b5a034168f2009521f2.png "テンプレート編集画面")

Bonfireの基本的な操作は、

1. テスト対象のサイトをブラウズ（テストシナリオの実施）
2. 問題のあるページを見つけたら、Bonfireアイコンをクリック
3. 画面キャプチャ、環境情報が自動で添付されるので、必要事項を記入してIssueを起票。

となります。
Issueを起票する際、BonfireではIssueのテンプレートを作成して、入力項目を絞ったり、デフォルト値を入力しておくことができます。分かりやすい例としては、Issue登録先のプロジェクトの指定、Issue Typeの設定などが挙げられます。

また複数のテンプレートを登録して、切り替えて利用することも可能です。テストチームが複数の開発のテストを並行で実施している場合などに便利でしょう。

JIRAと同じくテンプレートは共有、自分専用それぞれ作成できるので、ユーザー主導でどんどん改善していくことができます。

画面キャプチャ加工機能
------------------
![画面キャプチャ](https://www.evernote.com/shard/s11/sh/b669b32b-4b4d-4ef9-8fb0-f4919f6046d2/0e155cfb6b62709dc06df79c1b2a937f/res/4b5493b3-fe69-405d-aa7d-be940cfe7ab5/skitch.png)
画面キャプチャは複数枚取得することも可能（アイコンをクリックするだけ）ですが、更に画面キャプチャの簡易加工機能も備えています。

とあるテキストボックスの表示がおかしい、エラーが正しく表示されない・・・といった時に、具体的にどの要素が問題なのかを明示することができます。MacのSkitchのような機能です。

また、画面キャプチャ機能は、最近のバージョンアップで、ブラウザ画面のキャプチャだけではなく、クリップボードからのペーストにも対応しました。これにより、任意のアプリケーションの画面を添付することが可能になりました。

そのため例えばDBの値を貼り付けたり、ログを貼り付けたりといった「ブラウザ画面以外」の情報も任意で貼り付けられるようになったのです。ブラウザのテストをしているときにブラウザをテストツールとして利用できるのは、やってみるとわかりますが本当にスムーズです。


環境情報登録機能
-------------
![環境情報(JIRA Issue内)](https://www.evernote.com/shard/s11/sh/593c816b-35eb-4bbd-98f1-22fddd43e36d/8913057dbeeeac739d1949519a7fa4ab/res/209337aa-4a8f-4f19-96db-87db079d4a73/skitch.png)

BonfireはIssueを作成する際に、問題があったURLやブラウザ、OSのバージョンなどの情報を一緒に登録します。
これはBonfireを導入すると追加されるフィールドなので、自分でカスタムフィールドを準備する必要はありません。

環境情報を入力するのはテスターにとっては苦痛以外の何者でもありませんが、開発者にとっては重要な情報です。Bonfireはそれを自動化して支援します。


おわりに
------
いかがでしたでしょうか。
JIRA Ondemandだと、付加サービスを追加した場合は1ヶ月間の無料期間があります。僕もちょっと便利そうだから使ってみようか、というのがきっかけだったのですが、テストのワークフローを変えるくらいの衝撃がありました。

一番良かったのはテストチームと開発チームの認識相違が格段に少なくなることです。また、テンプレートのおかげでIssueの起票ミスも少なくなります。

Bonfireを入れると、もう一ついいことがあって、Test Sessionが使えるようになります。Test Sessionについては、また別の機会に紹介したいと思います。


[1]: http://www.atlassian.com/software/bonfire/overview
[2]: http://youtu.be/bwNTp1RzLDA
git push の反対は git pull ではない


`git push` の反対は `git fetch` です。`git pull` ではありません。

どういう意味？
==============

* `git push` は、ローカルのリポジトリの内容をリモートのリポジトリに送り込むコマンドです。
* `git fetch` は、リモートのリポジトリの内容をローカルのリポジトリに取り込むコマンドです。

ほら、対になるコマンドでしょう。

では、`git pull` は？

* `git pull` は、まず、リモートのリポジトリの内容をローカルのリポジトリに取り込み、次に、現在のローカルのブランチに対して、それに対応するリモートのブランチをマージするコマンドです。

マージ処理が入りますね。特に、マージが完了すると、作業ツリーの内容がマージ後の内容に変わります。

`git push` や `git fetch` は、リポジトリだけを操作し、作業ツリーは無関係です。これに対して、`git pull` は、リポジトリだけでなく、作業ツリーも操作します。このため、`git push` と `git pull` を対にして語るのは不自然だといえます。

git fetch を使おう
==================

`git fetch` は作業ツリーを書き換えないので、気軽に実行できます。リモートの情報をいつでも取り込んでおきましょう。リモートに追随したくなったときに、自分の目でログを確認して、`git merge FETCH_HEAD` でマージすれば良いです。

`git pull` は妙に複雑なコマンドで、分かりにくいし、余計なことするし、いいことありません。こんなコマンドは忘れてしまいましょう。

これからは、リモートの取り込みは `git fetch` です。
View/Context Bounds の制約

## Advent Calendar を作る人に個人的に考えて欲しいこと

1. コミュニティと相談する
2. 私物化しない

## View/Context Bounds の制約
わー遅刻だ遅刻だ。

View/Context Bounds は便利な型制約ですが、制約自身に制約があるというめんどくさいことになっています。

例えば以下のコードは formed です。

```scala
abstract class A[T : Manifest]
```

しかし以下のコードは ill-formed です。

```scala
trait A[T :  Manifest]
```

abstract member type を使っても ill-formed です。

```scala
trait A { type T : Manifest }
```

これは View/Context Bounds が実際にどのように実装されているかを考えれば理由は明白で、trait の場合 implicit parameter を置くべき場所がないためです。abstract class もダメそうに見えますが、abstract class の場合にはコンストラクタに implicit parameter が付くので大丈夫です。

```scala
  abstract class $read$$iw$$iw$A extends java.lang.Object with ScalaObject {
    def this(implicit evidence$1: scala.reflect.Manifest): $line1.$read$$iw$$iw$A = {
      $read$$iw$$iw$A.super.this();
      ()
    }
  };
```

まあ通常は型パラメタ使ってる場所で適当に implicit parameter 書けばいいわけです。そういうの嫌だっていう人は [Scala 3 をお待ちください](https://groups.google.com/forum/#!msg/scala-internals/eThZIT6y5pM/TLp7QYEw6SYJ)。

というのは冗談で Scala 3 って言いたかっただけです。おしまい。

追記：invalid じゃなくて ill-formed なの？と思った人へ。本当に ill-formed です。Syntax として書けないことになっています。
Ember.js 組み込みViewヘルパ

今日は、Ember.jsに組み込みで用意されているViewヘルパを見ていきます。


### {{action}}

DOMイベントへのイベントハンドラの設定を行います。

```html
<a href="#" {{action "edit" on="click"}}>Edit</a>
```

このテンプレート記述は、clickイベントが発生したら、edit()メソッドを実行することを指定しています。
Viewクラスの記述は、以下の例のようにedit()メソッドを実装していることを期待します。

```js
App.ListingView = Ember.View.extend({
  templateName: 'listing',
  edit: function(event) {
    event.view.set('isEditing', true);
  }
});
```

### {{bindAttr}}

属性値に対してデータバインディングします。

```html
<img {{bindAttr src="logoUrl"}} alt="Logo">
```

Boolean値をバインドすると、その属性のON/OFFを切り替えます。

```js
App.InputView = Ember.View.extend({
  isDisabled: true
});
```

こういうViewクラスに対して、

```html
<input type="checkbox" {{bindAttr disabled="isDisabled"}}>
```

こういうテンプレートを記述すると、disabledのON/OFFをisDisabledの値で切り替えます。
以下のようなHTMLを描画します。(データバインディングのためのマーカは省いています)
```html
<input type="checkbox" disabled>
```



### {{debugger}}

ブレークポイントを仕掛け、デバッガを起動します。

### {{#each}}

配列値をイテレートします。

```html
<ul>
  {{#each people}}
    <li>Hello, {{name}}!</li>
  {{/each}}
</ul>

{{#each App.peopleController}}
  {{#view App.PersonView}}
    {{firstName}} {{lastName}}
  {{/view}}
{{/each}}
```

### {{#if}} {{else}} {{#unless}}

テンプレートに制御構造を与えます。


```html
{{#if person}}
  Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>!
{{else}}
  Please log in.
{{/if}}
```

評価値の判定方法は、false, undefined, null, [] なら否とみなします。

### {{log}}

console.logで出力します。printfデバッグに便利。


```html
{{log firstName}}
```



### {{template}}

サブテンプレートを挿入します。
テンプレートを分割するだけなら、これで良いみたい。


```html
<script type="text/x-handlebars">
  {{#with loggedInUser}}
    Last Login: {{lastLogin}}
    User Info: {{template "user_info"}}
  {{/with}}
</script>
<script type="text/x-handlebars" data-template-name="user_info">
  Name: <em>{{name}}</em>
  Karma: <em>{{karma}}</em>
</script>
```


### {{unbound}}

データバインディングせずに、値を埋め込みます。
つまり、値が更新されても表示は更新されなくなります。
これは、パフォーマンスの改善のために利用します。


### {{#view}} {{view}}

子供Viewを挿入します。


```html
{{view App.SubView}}
```
{{#view}}ヘルパを使うことで、子供Viewのテンプレートを埋め込むことができます。


```html
{{#view App.SubView}}
  {{view.firstName}}
  {{view.lastName}}
{{/view}}
```


### {{#with}}

変数スコープを、指定したオブジェクトのコンテキストに切り替えます。

```html
<b>{{person.firstName}} {{person.lastName}}</b>!
<br>
{{#with person}}
  <b>{{firstName}} {{lastName}}</b>!
{{/with}}
```



今日はドキュメントに書いてる内容、ほぼそのままの紹介になりました。
発見も多かったです。
おすすめの helm拡張

拙作の helmプラグインを紹介しようかと思ったのですが、そもそも
あまり helm(anything)を使っている人がそこまで多くなさそうなので
私が使っているものの中でおすすめの拡張を紹介することにしました。

[おすすめの helm拡張](http://d.hatena.ne.jp/syohex/20121207/1354885367)
Railsがmissing :action (ArgumentError)と言ったときの対策


## 問題
```
rails g controller music audio:string
```
で作ったコントローラを消そうとして

```
rails d controller music
```
とコマンドを叩いたら

```
/actionpack-3.2.9/lib/action_dispatch/routing/mapper.rb:181:in `default_controller_and_action': missing :action (ArgumentError)
````

と出てエラーになりました。

## 解決方法
config/routes.rbに

```
  get "music/audio:string"
```

という行が生成されてしまっていたのが原因でした。
これのせいでルーティングでエラーが発生してしまい、rails destroyコマンドが使えなくなっていました。

この一行を消せばちゃんと元通りに動くようになりました。
書き方を間違えてmodelやmigrationみたいに書いてしまったというミスでした。
Unity C# DLL化 メモ


【前回大盛り上がりで続編！Unity勉強会】Unityで作るアルゴリズムゲーム大会！第ニ回天下一技道会！
http://atnd.org/events/33267

天下一に出場する為にC#を始めた時のメモです。
C#を使うとDLL化できてソースが隠せる… 勝つために戦略上必要でした♪

【その.1】
テラシュールウェア
[Unity3D]UnityのスクリプトをDLL化する
http://terasur.blog.fc2.com/blog-entry-312.html

GUIでわかりやすいが、手間がかかる…

【その.2】
Using Mono DLLs in a Unity Project
http://docs.unity3d.com/Documentation/Manual/UsingDLL.html

ターミナルから一発で変換できる。

##手順
ターミナルで、変換したいcsファイルのあるフォルダーに移動して、以下のコマンドを実行。


```bash
mcs -r:/Applications/Unity/Unity.app/Contents/Frameworks/Managed/UnityEngine.dll -target:library hoge.cs
```


##サンプル

![移動](http://cl.ly/LQbS/Unity-DLL-A%202012-12-07%2020.05.05-2.png "移動")


![DLL化](http://cl.ly/LQCf/Unity-DLL-B%202012-12-07%2020.05.23.png "DLL化")

![成功](http://cl.ly/LQ2f/Unity-DLL-C%202012-12-07%2020.08.34.png "成功")
高速ソースコード検索のackをCPANを使わずローカルインストールする

grepよりも高速に動作するソースコード検索のackをCPANを使わず単体でインストールするワンライナー。

```sh
mkdir -p ~/local/bin; cd ~/local/bin; wget "http://beyondgrep.com/ack-2.02-single-file" -O ack;chmod 755 ack;
```

これを実行の後、~/local/bin/ack [キーワード] かパスを通してack [キーワード] と利用すればOK。
GASで外部APIと連携（１／３） 

初めてAdvent Calendarに参加します。
よろしくお願いします！

先日、GASで[Pivotal Tracker](https://www.pivotaltracker.com) というプロジェクト管理ツールと連携させたスクリプトを書いてみました。
それにまつわるGASのTips的な内容を書いていきたいと思います。
作ったものの全容についてはこちらのブログ↓
[GoogleAppsScriptでPivotalTrackerのストーリー/イテレーションから（あえて）ガントチャートをつくってみる](http://blog.gigei.jp/tech/000073.html)
をご覧ください。

全３回で、

1. APIを呼ぶ(トークンの取得と使用)
2. レスポンス(XML)を処理する
3. 日付データからシート上の位置を探す

という構成で書いていきたいと思います！

ではまず、**"APIを呼ぶ"**ところからです。

##前提
1. GASのUrlFetchAppクラスを使う
実際にAPIをコールしてレスポンスを受け取るにはこのクラスの機能を使います。
2. Pivotal TrackerのAPI v3を呼ぶ
リファレンスは[こちら](https://www.pivotaltracker.com/help/api?version=v3)
認証方式はいまのところBasic認証のみのようです。

##流れ
1. トークンを取得する
2. トークンを使ってAPIをコールする
3. レスポンスを受け取る

##トークンの取得
↓のgetToken(*$ACOUNT_NAME, $PASSWORD*)で、トークンを文字列として取得できます。

```javascript:gas_pivotal_api1.gs
// APIトークンの取得
function getToken(user,pass){
  var apiUrl = 'https://www.pivotaltracker.com/services/v3/';   //(1)

  // リクエストの中身
  var extUrl = 'tokens/active',
      auth_data = Utilities.base64Encode(user + ':' + pass),
      headers = {'Authorization' : 'Basic ' + auth_data},
      params = {'headers' : headers};                           //(2)

  // fetch
  var res = UrlFetchApp.fetch(apiUrl + extUrl , params),
      txt = res.getContentText();                               //(3)

  // XML parse
  var elem = Xml.parse(txt, true).getElement(),                //(4)
      token = elem.getElement('guid').getText();               //(5)
  return token;
}
```

以下ざっと追っていきます。
(1) APIのベースとなるURL
(2) フェッチするURLとヘッダとしてBasic認証のためのデータ(※1)を用意
(3) フェッチ。resにレスポンスが格納され、そのボディがtxt
(4) XML文字列(※2)をパースしてXMLエレメントとして取得
(5) guidタグの中身をテキストとして取得 -> トークン文字列

簡単ですね！これでめでたくトークンを取得できました。
あとはこのトークンを添えてあげれば、Pivotal TrackerのAPIを使いたい放題です!!

##APIを使用する
では、試しにトークンを使ってみることにします。(※3)
以下の例では、全プロジェクトの情報をXMLエレメントとして取得しています。
ポイントとしては、トークン文字列をリクエストヘッダの中に'X-TrackerToken'の値として渡してあげるというところです。(※Pivotal Trackerでは！)

```javascript:gas_pivotal_api2.gs
function useApiTest(){
  var apiUrl = 'https://www.pivotaltracker.com/services/v3/',
      extUrl = 'projects',
      token = getToken($ACOUNT, $PASSWORD),
      headers = {'X-TrackerToken'  : token},
      params ={method : 'get', headers: headers};
      
  // fetch
  var res = UrlFetchApp.fetch(apiUrl + extUrl , params),
      txt = res.getContentText(),
      elem = Xml.parse(txt , true).getElement();
  return elem;
}
```

と、プロジェクトの情報を取得したわけですが、XMLエレメントとして取得してもそのままでは中身がまったく見えません。
XMLをうまいこと処理してあげる必要があります。
ということで、次回の**レスポンス(XML)を処理する**に続きたいと思います。

---

※1 自分はヘッダを文字列で与えればいいのかと勘違いしていたので、少しハマってしまいました。
オブジェクトとして与えないといけないようです。
※2 レスポンスの構造は[リファレンス](https://www.pivotaltracker.com/help/api?version=v3#retrieve_token) に載っています。
※3 また、ここでは$USER、$PASSにアカウント名とパスワードを手打ちで入れなければいけませんが、実装するときにはそれだとトークンの意味があまりないので、トークンをどこかに保持しておいてそれを呼び出すようにするとよいかと思います。
ちなみに僕はGASのUserPropertiesという機能を使いました。
macでnginxインストール時のエラー対応方法


***対象OS：OS X 10.8.2***
***対象バージョン：1.2.5***

nginxインストールしようとしてこんなエラーが出た

```Errors
Undefined symbols for architecture x86_64:
  "_pcre_free_study", referenced from:
      _ngx_pcre_free_studies in ngx_regex.o
ld: symbol(s) not found for architecture x86_64
collect2: ld returned 1 exit status
make[1]: *** [objs/nginx] Error 1
make: *** [build] Error 2
```

エラーが出たときのconfigure

```
./configure --conf-path=/etc/nginx/nginx.conf \                                                                                                                                                                                                                                      [~/tmp/nginx-1.2.5]
--prefix=/usr/local/nginx \
--error-log-path=/var/log/nginx/error.log \
--pid-path=/var/run/nginx.pid \
--lock-path=/var/lock/nginx.lock \
--sbin-path=sbin/nginx \
--without-http-cache \
--with-http_ssl_module \
--without-http_access_module \
--without-http_autoindex_module \
--without-http_empty_gif_module \
--without-http_ssi_module \
--without-http_auth_basic_module \
--without-http_browser_module \
--without-http_geo_module \
--without-http_referer_module \
--with-http_gzip_static_module \
--without-http_charset_module \
--without-http_fastcgi_module \
--without-http_geo_module \
--without-http_scgi_module \
--without-http_split_clients_module \
--without-http_userid_module \
--without-http_upstream_ip_hash_module \
--http-proxy-temp-path=/var/tmp/nginx/proxy_temp \
--http-uwsgi-temp-path=/var/tmp/nginx/uwsgi_temp \
--http-client-body-temp-path=/var/tmp/nginx/client_body_temp \
--http-log-path=/var/log/nginx/access.log \
--without-http_proxy_module \
--add-module=../nginx_tcp_proxy_module/ \
--with-debug
```

以下のオプションを追加してやり直し

```
--with-ld-opt="-L /usr/local/lib"
```
pryで入力中の文に対してもシンタックスハイライトを適用する

![coolline](https://dl.dropbox.com/u/10177896/pry-coolline.png)
` gem install pry-coolline ` で色がつきます。

(ただし` Pry.config.color = true`になっている必要あり)

[pry / pry-coolline](https://github.com/pry/pry-coolline)
linuxにソースからVim7.3インストールメモ

``` command
# cd /usr/local/src
# tar xvf vim-7.3.tar.bz2
# mkdir vim73/patches
# wget http://ftp.vim.org/pub/vim/patches/7.3/7.3.{001..754}
# cd ..
# cat patches/7.3.* | patch -p0
# ./configure --prefix=/usr/local --enable-multibyte --with-features=huge
# make
# make install

```
pryで返り値のダンプを抑制する

デフォルトのpryだと、行実行時に返り値がダンプされると思います。
これは大体の場合に便利ですが、巨大な配列に対してeachを使ったデバッグとかすると、別に見たくない出力で画面が埋めつくされて不便。
そんなときは行末尾に;(semicolon)を付け足してから実行すると返り値のダンプが抑制されます。

```ruby:pry                                                          
[73] pry(main)> (1..100).step(1).to_a.each{|n| warn n if n==100}
100                                                             
=> [1,                                                          
 2,                                                             
 3,                                                             
 4,                                                             
 5,                                                             
:  #ダンプ出力があふれてpagerが立ち上がる
---------------------                                                             
[74] pry(main)> (1..100).step(1).to_a.each{|n| warn n if n==100};
100                  
#セミコロンをつけるとダンプ出力がなくなる                                                                                
```
iTerm2で矩形選択

![831e69fa33905e3b0e9bea3483d4bb2b.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12187/246288ed-a91d-46dc-5c84-2006c41bd3bc.gif)


opt+commandでカーソル形状が十字に変化して矩形選択モードになる。
iTerm2 + tmux での pane の枠線の表示に関する問題を解決する


iTerm2 で tmux を使っていると pane の枠線が2文字分の幅で描画されており、枠線と隣り合う文字が見えくなる問題がある。

その場合、
Preference… > Profiles > Text を開き Double-Width Charactors: の Treat ambiguous-width charactors as double width のチェックを外すと問題は解決する。

![pref](http://gyazo.com/171525b5826ace6ff29be1871b2edb62.png)

## 参考

[Tmux Displaying Split Borders as Dashes in OSX Lion — Jamie Curle](http://jamiecurle.co.uk/blog/tmux-displaying-split-borders-dashes-osx-lion/)
hubコマンドを利用&&プロンプトにgitのブランチ等を表示している人向けのzsh高速化

```sh
branchname=`git symbolic-ref --short HEAD 2> /dev/null`
```

のように`precmd`内でブランチ名を取得してプロンプトに表示，ということをやっている人は多いと思うけど，[hub](http://defunkt.io/hub/)コマンドを使っていて以下のような設定をしていると毎回`hub`が呼ばれてしまい，結構重くなる．

```sh
function git(){hub "$@"}
```

そのため`precmd`内ではhubを呼ばずにgitそのものを呼ぶようにするとプロンプトの表示がかなり早くなる．

```sh
local git==git
branchname=`${git} symbolic-ref --short HEAD 2> /dev/null`
# command git
```

パスをベタ書きしているのが嫌だけどかなり早くなった．
→コメントより，`git==git`もしくは`command git`でokとのこと．`git==git`は見た目気持ち悪いけど…
SQLだけでオートインクリメントされてないカラムにユニークな値をINSERTする

DBレプリケーションのテストで大量のデータをINSERTする際、オートインクリメント設定されてないのにUNIQUE制約がかかっているカラムがあったのでこう解決した。

TABLE_NAME:example

| column_name | auto_increment | info |
|:---|:---|:---|
| id   | yes | pk |
| code | no | non_unique|

下記SQLをshellでループして実行させている。

```sql:examle_insert.sql
INSERT INTO example VALUES(
  null,
  (SELECT max_val FROM (SELECT max(code) + 1 AS max_val FROM example) AS tmp)
);
```

また、文字列を含むコードをいれなきゃいけないケースはこうやった。別に減算じゃなくてもいいと思う。

```sql:examle_insert.sql
INSERT INTO example VALUES(
  null,
  (SELECT 'E' || max_val FROM (SELECT 99999999 - max(id) AS max_val FROM example) AS tmp)
);
```
GitでProxyの設定

Proxyの設定が必要な環境下からのgitの利用設定

特に、cloneすらできないときの設定方法
Windowsだろうが、Macだろうが、Linuxだろうがこれで通るはず(Windowsは確認済み)

そもそもリポジトリの作成やcloneがまだの時は、`git config` だけ実行しようとしても、怒られるので、`git config --system` を実行する。
ひょっとしたら、`git config --global`でもいいのかもしれない

```
]$ git config --system http.proxy http:{proxy_host}:{proxy_port}
]$ git config --system https.proxy https:{proxy_host}:{proxy_port}
```

これで、cloneが通るはず

```
]$ git clone https://github.com/hoge/fuga.git
```
VagrantでUbuntuを使っていて、networkがゆっくりしてるときの対処方法

例えば、libavahi-common3 を remove してみる。という対処方法

 $ cd cookbooks
 $ knife cookbook create libavahi-common3 -o ./

```ruby:libavahi-common3/recipes/default.rb
#
# Cookbook Name:: libavahi-common3
# Recipe:: default
#
# Copyright 2012, YOUR_COMPANY_NAME
#
# All rights reserved - Do Not Redistribute
#
package "libavahi-common3" do
  action :remove
end
```

 $ cd ..
 $ vagrant provision

これで今のところ事なきを得ています。

Vagrantの公式サイトに載っていたんですけどね！
GPGPUを行う時のホスト側ＰＣを選ぶときの注意点

この記事は [GPGPU Advent Calender](http://atnd.org/events/34539
) の7日目の記事です。

***
始まる直前になっても参加者が少なくGPGPU Advent Calendarを立ち上げた山田てるみがあまりに不憫なのと、w_oに頼まれたら断れないというのもあって、参加をする事に。

一番の目的は、山田に恩を売っておくことだ。
(あと、山田がブログ書くのに時間取られすぎて、いろんなところに影響が出るのを防ぐため)
***
今回はGPUを使うときのホストとなるPCの選び方について少しだけ。

既に知っているとは思うけどおさらい。

それぞれのGPUのインターフェイスについて。

GTX 580シリーズ：PCI Express Gen 2 x 16
GTX 680シリーズ：PCI Express Gen 3 x 16

ちなみに[理論性能](http://ja.wikipedia.org/wiki/PCI_Express#.E8.BB.A2.E9.80.81.E9.80.9F.E5.BA.A6)はPCI Express Gen 2 x 16で双方向16.0GB/sec、単方向8.0GB/sec,
PCI Express Gen 3 x 16なら双方向32.0GB/sec、単方向16.0GB/secとなる。
(Teslaシリーズは自分で調べてね)

別にGTX 580がPCI Express Gen 2 x 8で動かないわけではないし、GTX 680もPCI Express Gen 2でも動作する。
なので性能を出し切れなくてもいいなら、物理的に装着できることと、電源の容量を気にすればいいだろう。

ただし、ホストPCとGPUの間のデータ転送の速度はPCI Expressの性能によって制限されて本来の性能は発揮出来ない。

GPGPUをやっているとデータ転送に時間が掛かって、結局それほど速くならなかったとか、GPUで計算しているよりデータ転送の時間の方が長くなることなどはよくあるので、できるだけ速いインターフェース上で利用したいものである。

そこで、GPGPUを行う時にPCを購入する場合には、ちゃんとGTX 580ならGen2 x 16、GTX 680を利用するならGen 3 x 16のインターフェイスを備えていることを確認しよう。

とくにGTX 680等のKepler世代のGPUを使うときにはGen 3 x 16をサポートしているか注意が必要だろう。

GPUを2枚装着したい場合には、PCI Express x 16のスロットが2つ同時に利用可能かを購入前に確認しておかないと、後で後悔する事になるだろう。

探せばPCI Express Gen 3 x 16を2スロット以上備えたPC(ワークステーション)も存在する。（ステマっぽくなるので具体的には挙げない）
ただしそれなりの値段になるだろうから、購入前にはGPU2枚装着可能かを問い合わせすることが望ましい。
自作する場合はちゃんと勉強して自己責任で。

もちろん、物理的にハイエンドのGPUが搭載できるかの確認も忘れずに。
PCI Express x16のスロットはあるのに、ケースと干渉して刺さらなくて泣くとかはよくある。
あ、あとPC自体の電源容量もね。これは不足すると警告音が鳴ってOSの起動までいかなかったりして心臓に悪い。

(それほど調べずに書いているので、間違いや訂正があればお知らせ下さい)
VimでRubyのrequire_relativeのファイル名を自動補完する

http://qiita.com/items/839f4b9e07cf7f341835 (一日目) にてuniteでrequireを手動補完する方法についての記述がありました。それと関連するようであまり関連しない、neocomplcacheでrequire_relativeを自動補完するためのneco-rubyというプラギンがあったのがなくなったというのが本日の内容です。

http://vim-users.jp/2012/12/neco-ruby-to-neocomplcache/ 続きはコチラ
git環境まとめ


最近gitをめぐる環境がいろいろとごちゃごちゃしてきたのでまとめる。

# 結論
add, commitする
=> **github for mac**
branch切る、マージする
=> **git flow**
branch切り替え、push/pull
=> **legit**

いろいろ試して、上記3ツールが利用者も多いし、枯れてそうなイメージなので、これらの記述がメイン。

# oh-my-zsh
oh-my-zshのプラグイン。~/.zshrcのplugins=()のカッコのなかにスペース区切りで書くと適用される。

## git
[oh-my-zsh git aliases]
(http://jasonm23.github.com/oh-my-git-aliases.html "")
gitエイリアス集。基本ですね。

    $ gst   = status
    $ ga    = add
    $ gc    = commit
    $ gl    = pull
    $ gp    = push
    $ gco   = checkout
    $ grh   = reset --soft HEAD
    $ grhh  = reset --hard HEAD

私はだいたいこいつらをよく使います。

あと、このプラグインは、プロンプトにカレントブランチ名表示してくれるのがありがたい。

## git-extras, git-flow, github
後述の同名gitサブコマンドのtab補完プラグイン。エイリアスではありません。

# github for mac
[GitHub for Mac]
(http://mac.github.com/ "GitHub for Mac")
「addする -> commitする」という一連の作業はこれが最強に使いやすい。それ専用GUIアプリだと思っている。GUIアプリなんだからコミットグラフがもっと見やすくてもいいのにね。

# SourceTree
※[methane - Qiita](http://qiita.com/users/methane "methane - Qiita")さんにコメントで教えていただきました。ありがとうございます。

BitBucketのAtlassianさまがもたらされたGit, MercurialのGUIアプリ。github for macより高性能で、gitxよりビューが美しい。

そういえば、昔触ってみたことがあったが、当時はgitを本当に使い始めてすぐで、GUI使っちゃうとそれっきりでコマンドから使わなくなりそうで、結局使うのをやめたのを思い出しました。今は適材適所でよくね？という考え方になった。

# subcommands
## legit
[Welcome | Legit (Git Workflow for Humans)]
(http://www.git-legit.org/ "Welcome | Legit (Git Workflow for Humans)")
人間のためのgitワークフローとのこと。gitのコマンドをわかりやすいコマンド名でラップしてくれている。でも、そんなgitのコマンド、慣れればどうってことないですよね。

    $ git switch
    $ git sync
    $ git publish
    $ git unpublish
    $ git branches

こいつらよく使う。

## git-flow
[nvie/gitflow]
(https://github.com/nvie/gitflow "nvie/gitflow")
gitワークフローのベストプラクティス。それを推奨する(実践しやすくする)サブコマンド。

## git-daily
先日興味を持ちましたが、git flow, github flowとの比較検討の末、魅力を感じなくなりました。

## github 
githubのリポジトリ作成とかをCUIでできますよ。これはgemでできている。

## git-extras
[visionmedia/git-extras]
(https://github.com/visionmedia/git-extras "visionmedia/git-extras")
まだ使ってないけど、鉄板っぽい。

## git-now
テンポラリコミット作成

# tig
ターミナルgitブラウザ。入れてるけどたまにしか使わない。というか全く使わない。

# まとめ
結局どのような文脈で、どのようなコマンドを打つのか。

## コミット
	$ gst
	$ ga hoge.rb
	$ gc
この後、$GIT_EDITORでコミットメッセージを書く。でもMacならgithub for macで簡単！

## flow
それでは新機能のajax化の開発に取り掛かる。

	$ g flow feature start ajax
	$ ga xxx
	$ gc
	$ g publish

これでfeature/ajaxというブランチが切られ、そこにコミットされる。publishでoriginにfeature/ajaxブランチをつくる。ここでしばらく開発を続ける。だが・・・

おっと、ここでチームメイトがfeature/ajaxに変更を加えたらしい。

	$ g sync
すると、pullしてからpushしてくれる。そんなこんなでajax化の仕事を進めていると、上司からバグ報告が飛んできたので、直ちにhotfixをはじめる。上司によると、IEでのCSSの様子がおかしいらしい。uncommited filesがない状態で(stashかcommit後で)

	$ g flow hotfix start msie
	$ ga app/assets/stylesheet
	$ gc
このブランチで修正コミットを作ってから、

	$ g flow hotfix finish msie
これでhotfix完了。デプロイする。

さてと、いま我々はajax化の最中だったな。

	$ g switch feature/ajax
という感じ。かな？
画像を左に90°回転させる5ステップ

![](http://cdn-ak.f.st-hatena.com/images/fotolife/t/t-kashima/20121207/20121207005535.jpg "")

#### 1. 画像を描画するためのコンテキストを作成して取得します。

```objective-c
// image が元画像(UIImage)
// 元画像の縦が横向きになるので横と縦を反転して指定する
UIGraphicsBeginImageContext(CGSizeMake(image.size.height, image.size.width));
CGContextRef context = UIGraphicsGetCurrentContext();
```
* 描画の開始位置は左下から描画方向 X, Y が標準になります。

![](http://cdn-ak.f.st-hatena.com/images/fotolife/t/t-kashima/20121207/20121207010347.jpg "")


#### 2. 描画開始位置を右上に変更します。
```objective-c
//  image.size.height, 
//  image.size.width の場所に描画開始位置を変更します。
CGContextTranslateCTM(context, image.size.height, image.size.width);
```
![](http://cdn-ak.f.st-hatena.com/images/fotolife/t/t-kashima/20121207/20121207011108.jpg "")

#### 3. 描画方向のY軸を反転します。

```objective-c
// X軸はそのまま(1.0)、Y軸は反転(-1.0)
CGContextScaleCTM(context, 1.0, -1.0);
```
![](http://cdn-ak.f.st-hatena.com/images/fotolife/t/t-kashima/20121207/20121207011816.jpg "")

#### 4. 描画方向を90°回転します。

```objective-c
// M_PI は定義されていて180°を表します。
CGContextRotateCTM(context, M_PI / 2);
```
![](http://cdn-ak.f.st-hatena.com/images/fotolife/t/t-kashima/20121207/20121207012046.jpg "")

#### 5. 画像をコンテキストに描画します。

```objective-c
// 元画像のコアグラフィックを取得します。
CGImageRef image_ref = [image CGImage];
// 領域は元画像全体になります。
CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height);
// 元画像のコアグラフィック全体をコンテキストに描画します。
CGContextDrawImage(context, rect, image_ref);
```
![](http://cdn-ak.f.st-hatena.com/images/fotolife/t/t-kashima/20121207/20121207012647.jpg "")

ここまでで左に90°回転させることができます。
これを応用すれば180°回転させたり、反転させることもできます。
Unity制作でのおすすめ３Dソフト

僕はUnityでアプリ作るまえは3Dソフトを使って作品を作ってました。
Unityで自作の3Dモデルを組み込んでアプリを作りたい人向けに僕の意見を紹介します。

３Dソフトはフリーからハイエンドソフトまでピンキリですが、最初はフリーソフトから使うのがいいでしょう。メタセコイアが一番有名ですかね。
メタセコイア　　http://www.metaseq.net/metaseq/

ただしアニメーションが作れないので、Unityの物理演算で動かす事になります。
（飛ばしたり、爆発させたり）
「ぴよ盛り」が有名ですね。　　http://www.piyomori.com/


「俺のアプリは３Dアニメーションが絶対に必要！」って人は有料の３Dソフトを買った方がいいと思います。
僕のオススメはmodo601です。http://www.luxology.jp/modo/
12万8000円と買いやすい価格ながらモデリングとアニメーションはハイエンドソフトと同じくらい機能が多く、使いやすいです。
IKinemaというフルボディIK/FKシステムがあるのでアニメーションを短時間で作る事が出来ます。

12万8000円って高い！と思われるかもしれませんが、アニメーションを作るのに掛かる人件費を考えたら微々たるもんですよー。僕が前に一分間のアニメーション作成の見積もり出したら360万でした。（アニメーションだけで！）


あとソフトによってインターフェイスが全然違うので移行するときに多少苦労しますので「ずっと３Dをやってく！」と決めてる人は最初からmodo601を使うことをオススメします。

今回はソフトの選ぶ基準の内容で記事を書きました。次回はモデル制作、色塗り（テクスチャー作成）辺りの説明をしたいと思います。
YiiのPaginationをブラウザの戻るボタンに対応させる


`CListView` と `CGridView` のPaginationは、デフォルトでAjaxを使うようになっていて、次のページがリンクしているリソースを再ロードしないので、レスポンスも高速だしサーバにも優しいです。
しかも、非常に高度なHTMLとJavaScriptでPaginationまで付けてくれるのに、ビューに書くコードはせいぜいこれぐらいでOKという優れもの。

```php
<?php $this->widget('zii.widgets.CListView', array(
	'dataProvider'=>$dataProvider,
	'itemView'=>'_view',
)); ?>
```

ところが、これらのウィジェットは、デフォルトではひとつ困ったことがあります。それはブラウザのヒストリに前のページが残らないこと。何かの項目をクリックして詳細を閲覧し、「あ、これじゃない」と思ってとっさに戻るボタンをクリックしたとき、その項目があった状態に戻れないんですね。前の状態がAjaxで変化した結果なので。というわけで、それに対応する方法を少し。

## 対策1 Ajaxをやめる

```php
<?php $this->widget('zii.widgets.CListView', array(
	'dataProvider'=>$dataProvider,
	'itemView'=>'_view',
	'ajaxUpdate'=>false,  // これ追加
)); ?>
```

はい、これだけでAjaxをオフにでき、2ページ目以降に行くと、HTML全体がリロードされるようになります。で、URLには、`Item_page=2` とかそんな感じのパラメータが付くことになります。

ただしこの方法だと、ページを送るたびに1ページ分まるごとリクエストやり直しになり、せっかくリンクしている jQuery が使われなくてもったいないですね。まあ、これでも普通のページ送りですが、ちょっとWeb2.0フレームワーク感がない。

## 対策2 pjaxにする

で、次の方法は Yii 1.1.11 からなので最近のプロジェクトでないとダメかもしれませんが、マジですごくいいです。なんとこのバージョンで、`CListView` と `CGridView` に `enableHistory` というステキなプロパティが増えました。

```php
<?php $this->widget('zii.widgets.CListView', array(
	'dataProvider'=>$dataProvider,
	'itemView'=>'_view',
	'enableHistory'=>true,  // これを追加
)); ?>
```

こうすると、AjaxでDOMを更新しつつ、ブラウザのアドレスバーに履歴を残してくれます。いわゆる **pjax** というやつです。GitHubのソースを閲覧するときフォルダを掘ったり戻ったりするアレですね。

やってみると、対策1と見た目が同じに見えるかもしれませんが、ブラウザのデバッガでよく調べると、HTML全体がリロードされていないことがわかります。

また、微妙な変化ですが、ページのスクロール位置が維持されていると思います(環境によるので保証はないですが)。この次へボタンが同じ位置を維持するというのは、わりとUIの使いやすさにつながるんですよね。

http://www.yiiframework.com/doc/api/1.1/CListView#enableHistory-detail

http://www.yiiframework.com/doc/api/1.1/CGridView#enableHistory-detail

ただしこれ、ブラウザが `pushState` をサポートしている必要があります。また、アドレスバーは1つしかないので、1ページ内に複数の `CListView` と `CGridView` を置いて両方 pjax したいというのはダメです。

Yii のソースには History.js が含まれてたので、少々古いIEでもなんとか動くようにしてくれるかもしれませんが、そこはちょっと未検証。

(実はこれ書いてる本人が、softark さんに教えてもらうまでこの新プロパティが増えてたことを知りませんでした。YiiのCGridViewでpushStateできたらいいのにって、もう1.1.12がリリースされてるのに言ってた/// どうもありがとうございます。)

## pjaxがダメだったときすぐAjax更新をオフにできるように

オススメはpjaxですが、もしユーザの多くがpjaxできない場合、彼らにはデフォルトのAjax更新を強いることになります。そうなったときユーザが「サーバ負荷は気にしないからブラウザの戻るボタンを効かせたい」と言い出したら、すぐにAjax更新を使わないほうの対策に切り替えたいですね。

`Yii:app()->widgetFactory` コンポーネントを `config/main.php` で構成して、特定の種類のウィジェットが作られるときのシステム全体でのデフォルト値を指定しておけば、変更スポットを集約しておけます。

```php:protected/config/main.php
<?php

	'components'=>array(
		...
		'widgetFactory'=>array(
			'widgets'=>array(
				'CListView'=>array( // CListViewのデフォルト
					'enableHistory'=>true, // pjax on
					'ajaxUpdate'=>true, // ajax on
				),
				'CGridView'=>array( // CGridViewのデフォルト
					'enableHistory'=>true, // pjax on
					'ajaxUpdate'=>true, // ajax on
				),
				...
			),
		),
```

これで、`config/main.php` に登録したウィジェットを使っている箇所では、カスタマイズされた設定を使いつつ、ソース上ではGiiが生成したまんまに近いコードを維持できます。

```php
<?php $this->widget('zii.widgets.CListView', array(
	'dataProvider'=>$dataProvider,
	'itemView'=>'_view',
)); ?>
```

デフォルトは `main.php` から引き継ぎ、アドホックに必要なものはその場で指定したものに。

これで、今後Giiで新しいビューを作ったときも、コード変更なしで同じ方針が引き継げて便利ですね。
Iterableな要素をランダムに取り出す

Randomクラス(scala.util.Random)にシャッフルさせるだけ．

```scala:sample.scala
import scala.util.Random
val r = new Random()
val list = List(1, 2, 3, 4, 5)

// 実行ごとに変化
r.shuffle(list).foreach { println }
>> List[Int] = List(3, 5, 4, 2, 1) 

// toIterableを被せるといろいろ使えるかも
r.shuffle(1 to 10 toIterable).foreach { println }
>> List[Int] = ... 
```
テーマでアバターとログインIDを表示する


[XOOPS Themes and Templates Advent Calendar 2012](http://qiita.com/advent-calendar/2012/xoops-themes-templates/participants)
⇒　5日目の投稿 [Suinさん:在来テーマのスタイルを利用したテンプレート](http://www.naaon.com/modules/plactice/index.php/home/hobby/xoops/legacy_theme.htm "Suinさん:在来テーマのスタイルを利用したテンプレート")
⇒　7日目の投稿 [kilicaさん:デザイナが知っておくべき XOOPS Cube Legacy 2.2 の新機能](http://qiita.com/items/3e386c93bc8db161796d "kilicaさん:デザイナが知っておくべき XOOPS Cube Legacy 2.2 の新機能")


今回のアドベントカレンダーの2回目のポストになります、竹原です。
師走とはよく言ったもので、こないだ4月になったばかりと思っていたらあっちゅう間に12月になってしまいましたし、なんでこんなに月日の経つのって早いんでしょうね。（歳だからってのは内緒だからね）
というわけで、今回もはりきっていっちゃいましょう！


最近のログイン可能なウェブサイトやウェブサービスでは、画面の右上などにログイン者名やアバターが表示されていることが多いと思います。

XOOPS Cubeでもテーマのちょっとしたカスタマイズで同じことが可能ですので、そのやり方を紹介したいと思います。

**アバターとログイン者名を表示するコード**

```theme.html
<div class="management_bar">                                   # classを割当て
        <{if $xoops_isuser === true}>                          # ログインユーザか判定
                <span id="headerName">
                        <a href="<{$xoops_url}>/user.php">     # プロフィールへのリンク
                                <img src="<{$xoops_userid|xoops_user_avatarize}>" /> # アバターを表示
                                <{user_uname2name uname=$xoops_uname}>  # 本名があれば本名を表示、なければアカウント名を表示
                        </a>
                </span>
                <span id="headerLogOut">
                        <a href="<{$xoops_url}>/user.php?op=logout"><{$smarty.const._LOGOUT}></a>
                                                               # ログアウトリンク
                </span> 
        <{else}>                                               # ログインユーザでない場合
                <a href="<{$xoops_url}>/user.php"><{$smarty.const._LOGIN}></a> # ログインリンク
        <{/if}> 
        <{if $xoops_isadmin}>                                  # 管理者か判定
                <a href="<{$xoops_url}>/admin.php">ADMIN</a>   # 管理画面へのリンク
        <{/if}> 
</div>
```

```style.css
.management_bar {
	position: relative;
	margin: 1px auto;
	max-width: 1024px;
	width: 100%;
	background: #000;
	padding: 1px 0 4px;
	color: #ff0000;
	text-align: right;
}
.management_bar a {
	color: #ff0000;
	text-decoration: none;
}
.management_bar a:hover {
	color: #ffb900;
}
.management_bar img {
	width: 1.2em;
	height: 1.2em;
	margin-top: 2px;
	vertical-align: text-bottom;
}
#headerLogOut {
	margin-left: 0.5em;
}
```

**ログイン前の例**
![ログイン前の例](http://i.imgur.com/l7k3o.png "ログイン前の例")


**ログイン後の例**
![ログイン後の例](http://i.imgur.com/bhmiE.png "ログイン後の例")