OmniAICreator/Qiita-1.07M huggingface dataset:
offsetTopはtable要素の中ではtable要素からの位置を取得する

jsで特定の要素の位置を取得する場合、

```js:javascriptで位置を取得する
$('#check1').get(0).offsetTop
```

```js:jqueryを使って取得
$('#check1').offset().top
```

このように書けますが、たまに取得する値が異なっていたので、どのような時に異なるのかコード書いて試してみました。

## サンプルコード
jquery1.11.1
jsfiddle
chromeで

```html:html
<div class="box">
  <p id="check1">check1</p>
</div>

<div class="box">
  <table>
    <tr>
      <td>
        <p id="check2">check2</p>        
      </td>
    </tr>
  </table>
</div>
```

```css:css
.box {
  width: 200px;
  height: 200px;
}
```

```js:js
console.log($('#check1').offset().top, $('#check1').get(0).offsetTop, $('#check1').position().top, '#1');
console.log($('#check2').offset().top, $('#check2').get(0).offsetTop, $('#check2').position().top, '#2');
```

## 出力結果

```
16 16 0 "#1"
235 17 219 "#2"
```

## まとめ
- table内の要素に対して、`$('#check1').get(0).offsetTop`で位置を取得した場合、table要素からの位置を取得します。
- cssのzoomプロパティを使用した状態の場合、jqueryの`$('#check1').offset().top`はうまく動きません。
- positionは親要素からの位置を取得します。

この３点を理解した上で、どのように書くのか考えたほうが良さそうです。

## ついでに
上記例ではtable要素内で試したましたが、もしかしたら、他にも同様の動作が確認できる状況があるかもしれません。スタックコンテキスト生成して試しましたが、関係ありませんでした。リスト内でも大丈夫でしたし、今の所table要素以外では上記動作は確認しておりません。このメモを書きながら、そもそもtable内で位置取得する書き方はどうなのかってことを考えたほうが良いような気もしております。
どう書く用の Ruby のテンプレート作った

[オフラインリアルタイムどう書く](https://yhpg.doorkeeper.jp/) 用のテンプレート作った。

`bundler/inline` を最近知ったので使ってみたかっただけとも言う。
`gemfile(true)` で `bundle install` してくれるみたいだけど、毎回問合せされて時間かかって辛かったので強引に Gemfile との複合構成にしてみた。
こうすることで lock も吐けるし binstubs も使うことができる。(多分使わないけど)

## template/doukaku.rb

```rb
require 'bundler/inline'

gemfile do
  source 'https://rubygems.org'

  gem 'activesupport', require: 'active_support/all'

  gem 'minitest', require: 'minitest/autorun'
  gem 'minitest-reporters'

  gem 'awesome_print'
  gem 'tapp'

  gem 'pry'
  gem 'pry-rescue', require: 'pry-rescue/minitest'
  gem 'pry-stack_explorer'
end

def solve(input)
end

TEST_DATA = <<~EOS
EOS

Minitest::Reporters.use!(Minitest::Reporters::ProgressReporter.new)

describe 'Doukaku' do
  TEST_DATA.each_line do |test|
    input, expected = test.scan(/"(.*)", "(.*)"/)[0]

    it input do
      assert_equal expected, solve(input)
    end
  end
end
```

## template/Gemfile

```rb
eval File.read('doukaku.rb').scan(/gemfile do\n(.*?)\nend/m)[0][0]
```

## bin/setup

```rb
#!/usr/bin/env ruby

require 'pathname'
require 'fileutils'
require 'date'
include FileUtils

def system!(*args)
  system(*args) || abort("\n== Command #{args} failed ==")
end

root_dir     = Pathname.new(File.expand_path('../../', __FILE__))
template_dir = root_dir.join('template')
dir          = root_dir.join(Date.today.strftime('%Y%m%d'))

cp_r template_dir, dir

chdir dir do
  system! 'bundle install --binstubs'
  system! 'git add . && git commit -m "init"'
end
```
SQLの間違い集1 Oracleで誕生日から満年齢を求める

OracleやMySQLで
よく見かけるSQLの間違いをまとめていきます。

#Oracleで誕生日から満年齢を求める
#####テーブル定義とデータ準備
```sql
Create Table BirthDayTable(BirthDay date);
insert into BirthDayTable(BirthDay) values(date '2000-01-01');
insert into BirthDayTable(BirthDay) values(date '2008-02-28');
insert into BirthDayTable(BirthDay) values(date '2008-02-29');
insert into BirthDayTable(BirthDay) values(date '2008-03-01');
```

#間違ったSQL
Months_Betweenで月の差を求めて、12で割って、小数を切り捨てる
といったもの

```sql
select to_char(date '2009-02-28','YYYY/MM/DD') as NowDate,
to_char(BirthDay,'YYYY/MM/DD') as BirthDay,
trunc(Months_Between(date '2009-02-28',BirthDay)/12) as Age
  from BirthDayTable
order by BirthDay;

NowDate     BirthDay    Age
----------  ----------  ---
2009/02/28  2000/01/01    9
2009/02/28  2008/02/28    1
2009/02/28  2008/02/29    1
2009/02/28  2008/03/01    0
```

#間違いの理由
誕生日が2月29日の場合
うるう年でない年の2月28日の年齢が間違ってしまう。

#正しいSQL
```sql
select to_char(date '2009-02-28','YYYY/MM/DD') as NowDate,
to_char(BirthDay,'YYYY/MM/DD') as BirthDay,
trunc((to_number(to_char(date '2009-02-28','yyyymmdd'))
      -to_number(to_char(BirthDay,'yyyymmdd')))/10000) as Age
  from BirthDayTable
order by BirthDay;

NowDate     BirthDay    Age
----------  ----------  ---
2009/02/28  2000/01/01    9
2009/02/28  2008/02/28    1
2009/02/28  2008/02/29    0
2009/02/28  2008/03/01    0
```
ズンドコキヨシEPUB

#ズンドコキヨシをEPUBで

みなさんズンドコってますかー。だいぶ極まって変態(褒め言葉)実装がいろいろ出てきていて楽しいです。

さて、ちょっとQiita向けではないネタかもしれませんが、総本山なのでここに投稿しますね。

今回のネタは、EPUBです。電子書籍のファイルのアレです。

まずは、オンラインのブラウザビュアー(BiB/i)で見ていただきましょう。

http://wakufactory.jp/densho/bib/i/?book=zundoko

epubファイルのダウンロードは[こちら](http://wakufactory.jp/densho/zundoko/zundoko.epub)から。お好きなEPUBビュアーでご覧ください。

iPhoneのiBooksでの表示例です。

 「ズン」ページと、
<img width="320" alt="ファイル 2016-03-19 17 45 42.png" src="https://qiita-image-store.s3.amazonaws.com/0/74838/6f8971f2-5498-09ec-f3fe-bef4fe99717e.png">

「ドコ」ページがあって、
<img width="320" alt="ファイル 2016-03-19 17 46 07.png" src="https://qiita-image-store.s3.amazonaws.com/0/74838/a83f57d8-6f3a-580d-9c3f-71788249ae99.png">

「ズンズンズンズンドコ」と遷移すると、「キ・ヨ・シ」ページが現れます。
<img width="320" alt="ファイル 2016-03-19 17 44 40.png" src="https://qiita-image-store.s3.amazonaws.com/0/74838/0040b37d-1565-ce9f-342e-5e98aa5fc78f.png">


#仕組み

仕組みも何もないのですが、往年のゲームブック形式にページを移動していって、ズンドコキヨシ遷移を実現するということです。本もページという状態を持ち、読者のページ選択によって状態が遷移するコンピュータであると言っても過言ではありませんw。

EPUBはjavascriptによるインタラクティブな動作を組み込むことができます。このEPUBでは、javascriptが動作する場合は、次のページをランダムで移動するリンクが追加されるようになっています。

その部分のコードはこんな感じで、各ページのxhtmlにincludeされてます。

```lang:javascript
var sel ;
onload = function() {
	var ul = document.getElementById('sel') ;
	sel = ul.querySelectorAll("a") ;
	var n = document.createElement("li") ;
	n.innerHTML = '次は <a href="javascript:click()">ランダム</a>' ;
	ul.appendChild(n) ;
}
function click() {
	var l = sel[ (Math.random()>0.5)?1:0].getAttribute("href") ;
	var a = l.split("/") ;
	l = a[a.length-1] ;
	location.href = l ; ;	
}
```

現在のところ動作するのを確認できているのは、ブラウザ系のビュアーと、iBooksだけです。
OracleのModel句でズンドコキヨシ

分析関数とmodel句
https://oraclesqlpuzzle.ninja-web.net/oow2009-olap-model.html
を参考にして、Model句で作りました。

```sql
select ZunDokoStr || 'キ・ヨ・シ！' as "ズンドコキヨシ"
from dual
model
dimension by(1 as Soeji)
measures(Cast(Null as VarChar2(4000)) as ZunDokoStr)
Rules Iterate(9999) Until (ZunDokoStr[1] Like '%ズン！ズン！ズン！ズン！ドコ！')
(ZunDokoStr[1] = ZunDokoStr[1] 
              || decode(Mod(Dbms_Crypto.RandomNumber,2),1,'ズン！','ドコ！'));

ズンドコキヨシ
------------------------------------------------
ドコ！ズン！ズン！ズン！ズン！ドコ！キ・ヨ・シ！
```
Oracleの再帰With句でズンドコキヨシ

Oracle11gR2から使える、再帰With句で作りました。

```sql
with rec(LV,ZunDokoStr) as(
select 0,Cast(Null as VarChar2(4000))
  from dual
union all
select LV+1,
ZunDokoStr || decode(Mod(Dbms_Crypto.RandomNumber,2),1,'ズン！','ドコ！')
  from rec
 where LV = 0 or ZunDokoStr Not Like '%ズン！ズン！ズン！ズン！ドコ！')
select ZunDokoStr || 'キ・ヨ・シ！' as "ズンドコキヨシ"
from (select LV,Max(LV) over() as MaxLV,ZunDokoStr
      from rec)
where LV = MaxLV;

ズンドコキヨシ
------------------------------------------------------------------
ドコ！ズン！ドコ！ズン！ズン！ズン！ズン！ズン！ドコ！キ・ヨ・シ！
```
文系でPCスキルもない私が３年間エンジニアをやってみて思った事

この春から社会人4年目に突入する私が、
入社当初の自分を思い出して思うことを書いていこうと思います。

## 私のプロフィール
高校・大学共に、文系科目を中心に勉強。
理系に進もうとして先生に止められた経験がある。
（それぐらい数学の点数が低い。でも、理系科目は好きだった。）
エンジニアになる前、PCは、WordとExcelぐらいしか使っていない。
「プログラミング」て言葉を就職活動中に知ったぐらいの無知。
色々あって（ここは語らないよ）入社決定。

## 一番最初の壁
配列が分からなくて詰む。
添字なにそれ状態。その前にイメージがつかなくて思考停止。
（土日に分かりやすい専門書漁って読んだりして地道に理解を深めていた）
この時点で、先輩方から使えない新人として見られていたかもしれない。

## 研修終わったかと思いきや
苦しみながら終えた研修。
やっとこさOJTで業務に入る。
先輩に教わりながらプログラムの改修作業に入るが、
ファイルのどこを読めば良いのか分からず、
（プログラムがどこからスタートするのかも分からない）
先輩に１行ずつ解説してもらう有様・・・。

## エンジニア3年目になった私
いろいろあって、転職を経験（詳しいことは、機会があればまた語る）
第2新卒として、別のIT企業に就職。
私は、ここで初めてプログラミングの勉強方法を教わった気がする。

- 勉強会の存在を初めて知る。
- Qiitaというブログが存在することを知る。
- 開発環境の作り方を教わる（今までは先輩に用意してもらった開発環境で
開発していた。）

etc・・・
自力で何か作るようになれたのが、実はこの時期。
簡単な改修なら、自力で出来るようになってきた。
改修案件のみならず、自分で小さなWebサービスを作ってリリースも経験。
現在がここ。

## 今だから思う入社当初に知りたかった事
- Qiitaの存在
- 勉強会の存在
- 自宅で勉強方法<br>
  (入社当初は、開発環境すら作れないし、何から手をつければ良いのか分からなかった。)
- プログラミングは、専門書読んでるだけじゃ、身につく事は少ないという事。<br>
  実際にプログラムは書かないと身にならないという事実。
- 他人と比較して技術差感じて落ち込む必要はないという事。<br>
  マイペースに勉強していったほうが成長しやすかった。

## 文系でPCスキルなくてもエンジニアはできるのか。
結論から言うとできる。（じゃないと私の存在がなくなってしまう）
ただ、向き不向きがあるのは確か。
エンジニア諦めて別の職種に変えた人も存在するにはする。
私の場合、苦しくても諦めなかった。ただそれだけ。

## 新卒に向けてのメッセージ
社会人になるにあたって、他人と仕事の出来を比較していると
気持ち的に負けてしまうので、あまりオススメはしない。
（同期にすごいやつなんて死ぬほどいるし、
後輩で自分よりできる人なんてのも腐るほどいる。）
大切なのは、自分が何を得たいのか、仕事を通して何を成し遂げたいのか、
という気持ち。

そして私達は、仕事をする上で手段としてプログラミングしてるわけだが…。
誰かのためにシステムを作りたい、て気持ちがあって、
そのためにプログラミングの勉強しよう、てのが一番モチベーションは上がる。
私は、ITの力を持って誰かの役に立ちたい、て気持ちがあったから、
ここまで続けられたんだと思うし、これからも続けるんだと思う。

以上

## 最後に
ビミョーな文章で大変申し訳ない…。
こういった思いをつらつらと書いて公開するのは初めてでして…
ここまで読んでくださった皆様、ありがとうございました。
Ubuntu 14.04 LTS 開発環境構築ログ #05

# MariaDBとPHPをインストール
```
$ sudo apt install mariadb-server
$ sudo apt install php5 php5-mysqlnd php5-mcrypt php5-gd php5-curl
```
## MariaDBの文字コードをUTF-8に変更
```
$ cd /etc/mysql
$ sudo cp -p my.cnf my.cnf.org
$ sudoedit my.cnf
$ diff -u my.cnf my.cnf.org
--- my.cnf      2016-03-19 17:16:06.000000000 +0900
+++ my.cnf.org  2014-02-20 06:18:21.000000000 +0900
@@ -32,7 +32,6 @@
 #
 # * Basic Settings
 #
-character-set-server = utf8
 user           = mysql
 pid-file       = /var/run/mysqld/mysqld.pid
 socket         = /var/run/mysqld/mysqld.sock
$
```
## MariaDBを再起動
```
$ sudo service mysql restart
```
## MariaDBの文字コードを確認
```
$ mysql -uroot -p
MariaDB [(none)]> show variables like 'char%';
+--------------------------+----------------------------+
| Variable_name            | Value                      |
+--------------------------+----------------------------+
| character_set_client     | utf8                       |
| character_set_connection | utf8                       |
| character_set_database   | utf8                       |
| character_set_filesystem | binary                     |
| character_set_results    | utf8                       |
| character_set_server     | utf8                       |
| character_set_system     | utf8                       |
| character_sets_dir       | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+
8 rows in set (0.01 sec)

MariaDB [(none)]> quit
```
Macを買った時最初にすること

# はじめに

新人のみなさん、こんにちは！

最近家にも会社にも新しいMacがやってきて、何入れるんだっけ〜？Rubyってどうやってインストールするんだっけ〜？となってやや辛い思いをしたので、みなさんが辛い思いをしないようにMacを会社からもらったり、個人で買ったりした時にインストールしておいたほうがよいものをまとめておきます。

よかったら参考にしてね！

でも、これ超自分用だから、仮想環境とかGoとかElixirとかフロントエンド系のセットアップの仕方やGemってなんだ！？みたいな分からないことは優しい先輩に訊いてね！

# GUIインストール編

まずは以下のソフトをダウンロードしよう！

* Xcode
  * iOSアプリ開発しない人も落としておこう！
* Google Chrome
  * ついでにFirefoxダウンロードするのも(・∀・)ｲｲﾈ!!
* CotEditor
  * 軽いメモ帳。Miでもおk。
* Sequale Pro
  * MySQLのGUIツールだよ。MySQL WorkBenchもオススメ！
* SourceTree
  * GitのGUIツールだよ。でも、最初はコマンドラインで勉強するのも(・∀・)ｲｲﾈ!!
* Cyberduck
  * FTPクライアントだけど正直使いづらいので、財力があれば、Transmitを買おう！
* iTerm2
  * 最近はデフォルトのターミナルも悪くない。
* Atom
  * 開発エディタは宗教戦争になりがちだけど、自分が使いやすいものを選ぼう。
  * Atomの設定なら、以下の記事がオススメ。
  * http://qiita.com/rei-m/items/9de2aea80043d1d1fbf6
  * 僕はPhpStormを使ってるのは秘密だ！

# CUIインストール編

## 基本セットアップ

開発言語に依らず、以下の作業は行っておくのがベター。

### 公開鍵作成

```
$ ssh-keygen -t rsa
```

### 隠しファイル表示

```
$ defaults write com.apple.finder AppleShowAllFiles -boolean true
$ killall Finder
```

### Xcodeインストール

```
$ xcode-select --install
```

### Homebrewインストール

```
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

### .bash_profile作成

```
$ vi .bash_profile
$ export PATH=/usr/local/bin:$PATH
$ source .bash_profile
```

### 各種ライブラリインストール

Ruby使いならインストールしておいたほうがベター。

```
$ brew tap homebrew/dupes
$ brew install libxml2 libxslt
$ brew install libiconv
```

### Gitインストール

プリインされてるけど、brewで管理したいので！

```
$ brew install git
```

### Opensslインストール

```
$ brew install openssl
$ brew link openssl --force
```

### curlインストール

```
$ brew install curl --with-nghttp2 --with-openssl
$ brew link curl --force
```

## 各種開発言語編

ここからは各開発言語のインストール方法を紹介するので、必要に応じてインストールしてね！

### nodeインストール

nodeは開発で使わなくても、色々なツールで利用するので、入れておいて損はない。

```
$ brew install node
```

### PHPインストール

```
$ brew install php56 --with-homebrew-curl --with-homebrew-openssl
$ brew install php56-mcrypt
```

### Ruby / Railsインストール

```
$ brew update
$ brew install rbenv rbenv-gem-rehash ruby-build
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ echo 'export PATH="$HOME/.rbenv/shims:$PATH"' >> ~/.bash_profile
$ source ~/.bash_profile
$ rbenv install 2.2.3
$ rbenv global 2.2.3
$ gem i rails --no-ri --no-rdoc
$ gem install bundler
```

### MySQLインストール

`mysql_secure_installation`はセキュリティの設定だけど、基本的には全部Yesでおｋ。

```
$ brew install mysql
$ mysql_secure_installation
```

### Nginxインストール

会社がApacheを使っている場合は素直にApacheをインストールしよう。

```
$ brew install nginx
```

# おわりに

この記事を読んでくれた新人の方で、上記作業を自動化してくれる人待っています！

（変なテンションで書いてごめんなさい）
クラウド9の利点・欠点を考えてみた。

Cloud9をRuby on Railsチュートリアルで使って初めてクラウドIDEというものがあるのを知った。
使ってみて結構便利そうなので、Cloud9良いところ・悪いところがあるか考えてみた。

# 長所

##1.ウェブブラウザがあればすぐに使う事が出来る。
Cloud9はクラウドサービスなので、ウェブブラウザでアクセスするだけですぐ使える。
IDEのように起動が遅いといった不満は無い。
また、自分のPCがWindowsだろうとMacだろうと関係なく同じ環境で開発をすることができる。

##2.CPU、メモリが貧弱なPCでも気にせず使える。
貧弱な性能のCPUやメモリのPCでもウェブブラウザがあれば、開発をする事が出来る。
普通のIDEと違ってインストールをする必要もないので、ディスクの容量を気にしないで使える。

##3.最初からある程度開発環境が整っている。
gitやRubyなどの各言語が最初からインストールなしで使用することができる。
これは言語をちょっと試しで触りたい場合に便利だと思う。
【参考】[Cloud9 Supported Languages](https://docs.c9.io/docs/supported-languages)

##4. IDE上から仮想マシンのシェルを使用する事ができる。
シェルが使えるので、仮想マシンのファイルシステムを操作したり、
gitコマンドでリポジトリの操作やherokuにデプロイをすることも可能。
Cloud9では、Ubuntu上にIDEがインストールされていて、IDE内のターミナルでアクセスする事が出来る。

#欠点

##1.使用できる言語は英語のみ
使える言語は英語のみで日本語対応していないようです。設定を探してみましたが、見当たりませんでした。

##2.仮想マシンのリソースが限られている。
CPU、メモリ、ディスク容量に限りがある。
ここら辺は月額19$程度でリソースを増やす事が出来る。
なので、性能のいいCPUやGPUなどが必要なら、ローカルで開発をした方が良いと思う。
※Cloud9はオープンソースで公開されているので、自分でサーバーをたてるか借りるなどしてその上に
Cloud9をインストールして使うと言った事も出来るようです。
【参考】[Cloud9を自サーバにインストールしてどこでもコーディング](https://kijtra.com/article/cloud9-install/)


#まとめ
クラウドIDEは環境設定が簡単で、使い始めるのにもインストールなどを行う必要がなく、気軽に使える。
新しい言語をちょっと遊びで触ってみたい時にはウェブブラウザでCloud9を立ち上げてすぐに開発できるので、便利だと感じました。
TeX の仮想フォント（VF）でズンドコキヨシ

どうやら最近、Qiita で[ズンドコキヨシ](http://qiita.com/shunsugai@github/items/971a15461de29563bf90)が氾濫しているようである。

数あるズンドコキヨシの中で自分が注目しているのはコレ。

  * [ズンドコキヨシをフォントで](http://qiita.com/wakufactory/items/67b0cfc402daa5dda58f)

……素晴らしい。

でも、自分が考えているズンドコキヨシフォントはコレジャナイ。
（↑なんだお前も考えていたのか）

## ぼくの かんがえた さいきょうの ズンドコキヨシ フォント

>   「ズン」「ドコ」のいずれかをランダムで出力し続けて「ズン」「ズン」「ズン」「ズン」「ドコ」の配列が出たら「キ・ヨ・シ！」って出力した後終了

という「ズンドコキヨシの要件」を（できるだけ）満たすようにした。

でも、あいにく自分にはOpenType力が1ミリも備わっていないので、代わりにTeXの仮想フォント（VF）で実装することにした。

  * [TeXの仮想フォント（VF）でズンドコキヨシ](https://gist.github.com/zr-tex8r/19a64a5f68f01164dbe3)

この zdkysm.vpl をカレントディレクトリに置いて、次のコマンドを実行すれば、仮想フォントのバイナリファイル（zdkysm.tfm と zdkysm.vf）が生成される。

```
vptovf zdkysm
```

あとは、このフォントを用いて適当なLaTeX文書を作成する。

```latex
\documentclass[a4paper]{article}
% もちろん(La)TeXマクロは一切無し!
\begin{document}
% ズンドコフォントを指定する
\newfont\fzdk{zdkysm at 4pt}\fzdk

% (人間が)ランダムな文字列を打ち込む
knknjnysnyitndsysnysstrnnkhtgmckcipidswrninds

\end{document}
```

これをコンパイル[^compile]するとズンドコキヨシな出力が得られる。
[^compile]: エンジンは何でも（pdflatex でも）よい。

![image-zdkystfm-1.png](https://qiita-image-store.s3.amazonaws.com/0/14550/f603ba1c-f360-4068-7ba9-f7ff01e37f5d.png)

## ズンドコキヨシフォントの仕様

  * 何か文字を入力すると「ズン」「ドコ」の何れかが表示される。
      * どちらになるかは文字により決まっている。
      * だから“ランダムに出す”には人間が“ランダムに入力”する必要がある。
  * 「ズンズンズンズンドコ」が並ぶと直後に「キ・ヨ・シ！」も表示して、**そこで終了**する。
      * つまりそれ以上文字を入力しても表示が変わらない。
      * 例えば先の例では37文字目の `d` のところで「キ・ヨ・シ！」が出るので、それ以降の `swrninds` は何も表示しない。

## さいごに

TeXのVFではアレなので、誰か先述の仕様を満たすOpenTypeフォントを作ってください。（他力本願）
Ubuntu 14.04 LTS 開発環境構築ログ #04

前記事：[Ubuntu 14.04 LTS 開発環境構築ログ #03](http://qiita.com/cazborg/items/3883d1d7e39c6011b1a0 "#03")
# iptablesのルールを登録
```
$ sudo iptables -A INPUT -p tcp --tcp-flags ALL NONE -j DROP
$ sudo iptables -A INPUT -p tcp ! --syn -m state --state NEW -j DROP
$ sudo iptables -A INPUT -p tcp --tcp-flags ALL ALL -j DROP
$ sudo iptables -A INPUT -i lo -j ACCEPT 
$ sudo iptables -A INPUT -p icmp -j ACCEPT
$ sudo iptables -A INPUT -p tcp -m tcp --dport 80 -j ACCEPT
$ sudo iptables -A INPUT -p tcp -m tcp --dport 443 -j ACCEPT
$ sudo iptables -A INPUT -p tcp -m tcp --dport 22 -j ACCEPT
$ sudo iptables -I INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT
$ sudo iptables -P INPUT DROP 
$ sudo iptables -P OUTPUT ACCEPT
```

# ルールを保存
iptables-persistentをインストール。
インストール途中に現在の設定を保存するか確認を求められる。
「yes」を選択すると上記で登録した設定が /etc/iptables 配下に保存される。
（再起動しても設定が消えない）
```
$ sudo apt install iptables-persistent
```
参考：[iptablesの設定方法](https://help.sakura.ad.jp/app/answers/detail/a_id/2423/~/iptables%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95,"参考")
ひよっこの僕がビッグデータ分析について学んだこと

# 背景
僕は直近の4年間をビッグデータ分析に従事してきたのですが、それを通じて「こうしていたら良かった！」と反省することがあったため、それをまとめたのがこの投稿です。

__*注意点__
この投稿はその道のプロが書いたものではありません。とある学生の個人的な見解として流し読みして頂ければと思います

__*ビッグデータの定義__
この界隈ではよく議論になりますが、この投稿ではビッグデータを「システム一台では処理できない量のデータ」とします。例えば、HDD 500GBのラップトップしか使えないのでしたら扱えるデータ量は小さくなりますが、Hadoopを複数台のサーバで走らせて、十分にディスク容量がある分散システムを利用しているのであれば扱えるデータ量が増えます。僕の場合、最初はデスクトップPC (メモリ16GB, CPU Core i7 3.2GHz, HDD 1TB) 一台で処理していましたが、扱うデータが大きくなり、最後の方は1台のサーバと2台のデスクトップで処理を分散化してました。

# 学んだこと (一般的な話)

## 1. 最終的なゴールを見失わないように気をつける

僕の場合、__データを分析しているうちに分析の目的（例. 精度の改善）を見失って、時間がしばらく経ってから実装していたコードが無駄であったことに気がついた__ことがありました。
研究でも仕事でもPDCAサイクルを回していくことが大切ですが、ビッグデータは特にDoとCheckに時間がとてもかかります。常に__なぜこのデータを分析する必要があるのか__を考え、「これって分析のコードを書いても意味ないんじゃないのか？」ということに気がついたら、誰かに相談するか、目的の再確認をした方が良いと思います。Plan - Delay - Cancel - Apologize にならないようにしましょう。

## 2. Garbage In Garbage Out (GIGO)を常に意識する

どんなことでも通じる法則ですが、極端な話、__ノイズを処理してもノイズしか生まれない__ということです。自分が扱っているデータが本当にノイズが除かれているのか（ちゃんと前処理したのか）、あるいは処理の最中にノイズが混ざっていないかどうかを確認することが重要です。
最初だけでなく、__常に__GIGOを意識する必要があるのは、データを処理していくうちに、徐々に有益なデータまで除いてしまっている可能性を考慮するためです。

## 3. 人間に分からないことは、基本的に機械にも分からない（視覚化が重要）

Deep Learningなどの成功を通じて、機械学習が万能であるかのような錯覚がありますが、__基本的に人間が見て区別がつかないデータを機械で精度良く区別することはできません__。機械でうまく区別できるのは、データ量や次元が大きすぎて人間が見ても分からない場合に限られます。

機械学習の中で行なわる数学は難しいものが多いため、ブラックボックスになりがちですが、途中結果などを視覚化することで「これは機械でうまくいきそう」ということが分かります。国際学会に参加していて、「この研究すごいな」と思うものの多くは、前処理後のデータの波形や機械学習の途中経過を視覚化することで、「どおりでこの手法でうまくいくのだ」と納得させられます。

その他にも視覚化は以下の理由で重要です。

* 直観的に理解ができるため、他人と議論がしやすくなり、進捗報告や説得が簡単になる（重要）
* データに問題がないか、どういった傾向があるかというのを確認できる
* 自分の処理に間違いがないか、方向性が間違っていないかを確認できる


# 学んだこと（技術的な話）

## データはビッグでない方がいい（一つのシステムで処理できた方がよい）

僕の研究では計算に時間がかかるため、逐一処理した結果をファイルに出力していました。処理していくうちにデータ量が増大し、最終的にはデータをディスク容量が大きい別のシステムに移さなければ処理しなければならなくなりました。このとき、注意しておけばよかったと思う事項を列挙します。

### データの一貫性を保つ（バージョン管理）

機械学習ではランダムサンプリングを用いたり、学習パラメータを調整することが多いため、実行タイミングやパラメータによって出力される結果が異なることがあります。そのため、出力された結果がPC間で異なり、それらを統合した結果が意図しない結果になっていることがありました。
出力されたデータが__どういったパラメータ（シード値など）__で作られたのかを記録して、再現性を保てるようにしましょう。特に分散して処理を行っているときは注意が必要です。
（再現性のないos.urandom()などシステムの乱数生成器を用いる関数は使わないように）

### 小規模なデータから徐々に大規模に

最初から大規模データを試す人もなかなかいないとは思いますが、ランダムサンプリングした小規模なデータで精度をある程度確認してから大規模にすることが重要です。小規模なデータで精度が低い場合、データの数を数倍にしたところで精度が望むほど高くならないことが多いです。まずは小規模データでPDCAサイクルを速く回しましょう。

### データ形式 & serialization に気をつける

データ形式はデータ分析において非常に重要です。バイナリにするのか、csvにするのかによって必要なディスク量が大きく変わってきます。また、データが大きくなってくるにつれて、データ形式を変換するのにも数日取られることがあります。
僕の場合は、最初のうちはcsvやjsonなど視認性の高い形式で出力し、データの形式が固まり次第、バイナリなどでデータ量を減らしてました。

### バックアップは大切

これも言うまでもありませんが、定期的なバックアップは重要です。前述したように調整したパラメータによって結果が変わるため、それに応じたバックアップを取っておくのが理想です。バックアップはディスクアクセスが高いので、計算を並行して回すのは危険です。分析や他の仕事があるときに回しておきましょう（理想的にはSSDで十分な容量があれば良いのですが...）。

## notification の重要性

大規模なデータの分析で苦労したことに一つに__最初の数分で処理が止まっていたのに気付かず、数時間経った後にやり直した__ことが挙げられます。
例外が発生した場合、計算が正常に終了した場合には、メールでもSlack、Twitterでも良いので通知を自分の元へ飛ばすようにしましょう。notificationが精神的な支柱になってくれます。

## 信頼できる結果を出すための設計スキルが求められる

ここまでの話のように、ビッグデータ分析に要求される技術は多岐にわたります。それらをプログラムに落とし込むときに、__理路整然とした分かりやすいコード（リーダブルコード）__が求められます。
データとアルゴリズム（処理するプログラム）は密接な関係があるため、データが複雑になれば俄然プログラムも複雑になります。しかし、1箇所でも間違っていると分析結果は間違ったものになります。結果を保証するためには適切なプログラムの設計が求められます。
ChaSenをUTF-8用にインストール


# はじめに
本記事では形態素解析器ChaSenでUTF-8を扱うための手順を説明します。
環境はMac上のVagrant、[bento/centos-6.7](https://atlas.hashicorp.com/bento/boxes/centos-6.7)です。（Macの環境を汚したくなかったためVagrantにしました。）

なお、この手順に従うとEUC-JPで読むことはできなくなります。

# インストール

## ローカル（Mac上での作業）
必要なファイルをローカルにダウンロードする

| ライブラリ | ダウンロードページ | 取得するファイル |
|:--|:--|:--|
| ChaSen | https://osdn.jp/projects/chasen-legacy/releases/ | chasen-2.4.5.tar.gz |
| IPADIC | https://osdn.jp/projects/ipadic/releases/ | ipadic-2.7.0.tar.gz |

scpでVagrantに送信（ホスト:192.168.33.10、ユーザー:vagrant）
パスワードは変更していなければ`vagrant`です。

```
scp ~/Downloads/chasen-2.4.5.tar.gz vagrant@192.168.33.10:/home/vagrant
scp ~/Downloads/ipadic-2.7.0.tar.gz vagrant@192.168.33.10:/home/vagrant
```

## リモート（vagrant上での作業）

### gcc-c++をインストール

```
[vagrant@ ~]$ sudo yum install gcc-c++ -y
```


### Dartsをインストール

```shell-session
[vagrant@ ~]$ wget http://chasen.org/~taku/software/darts/src/darts-0.32.tar.gz
[vagrant@ ~]$ tar xvf darts-0.32.tar.gz
[vagrant@ ~]$ cd darts-0.32
[vagrant@ darts-0.32]$ ./configure
[vagrant@ darts-0.32]$ make
[vagrant@ darts-0.32]$ sudo make install
```

makeで`make: *** ターゲットが指定されておらず, makefile も見つかりません.  中止.`というエラーが出たらgcc-c++がインストールされていない可能性があります。（`./configure`の出力にエラーがあるはずです）

### ChaSenをインストール

```shell-session
[vagrant@ ~]$ tar xvf chasen-2.4.5.tar.gz
[vagrant@ ~]$ cd chasen-2.4.5
[vagrant@ chasen-2.4.5]$ ./configure
[vagrant@ chasen-2.4.5]$ make
[vagrant@ chasen-2.4.5]$ sudo make install
```
Dartsのインストールされていないと`./configure`にエラーが出て止まります。

### IPADICをインストール（UTF-8）

UTF-8変換に必要なnkfをインストールしておきます。

```
[vagrant@ ~]$ sudo yum install nkf -y
```

辞書ファイルをUTF-8に変換した後でmakeします。

```shell-session
[vagrant@ ~]$ tar xvf ipadic-2.7.0.tar.gz 
[vagrant@ ~]$ cd ipadic-2.7.0
[vagrant@ ipadic-2.7.0]$ find -name '*.dic' | xargs nkf --overwrite -w
[vagrant@ ipadic-2.7.0]$ find -name '*.cha' | xargs nkf --overwrite -w
[vagrant@ ipadic-2.7.0]$ `chasen-config --mkchadic`/makemat -i w
[vagrant@ ipadic-2.7.0]$ `chasen-config --mkchadic`/makeda -i w chadic *.dic
[vagrant@ ipadic-2.7.0]$ ./configure
[vagrant@ ipadic-2.7.0]$ make
[vagrant@ ipadic-2.7.0]$ sudo make
[vagrant@ ipadic-2.7.0]$ sudo nkf -w --overwrite /usr/local/etc/chasenrc
```

# 実行
test.txtというファイルをUTF-8で作成します。

```text:test.txt
これは茶筅のテストです。
すもももももももものうち！
```

```shell-session
[vagrant@ ~]$ chasen -iw test.txt
これ	コレ	これ	名詞-代名詞-一般		
は	ハ	は	助詞-係助詞		
茶筅	チャセン	茶筅	名詞-一般		
の	ノ	の	助詞-連体化		
テスト	テスト	テスト	名詞-サ変接続		
です	デス	です	助動詞	特殊・デス	基本形
。	。	。	記号-句点		
EOS
すもも	スモモ	すもも	名詞-一般		
も	モ	も	助詞-係助詞		
もも	モモ	もも	名詞-一般		
も	モ	も	助詞-係助詞		
もも	モモ	もも	名詞-一般		
の	ノ	の	助詞-連体化		
うち	ウチ	うち	名詞-一般		
！	！	！	記号-一般		
EOS
EOS
```

# メモ

* chasen実行で`chasen: /usr/local/lib/chasen/dic/ipadic/cforms.cha:9-21: no basic form` というメッセージが出たら、正しくUTF-8化できていません

# 参考リンク
* http://chasen-legacy.osdn.jp/
* [install chasen 茶筅をインストール](http://blog.bbtune.com/archives/66/install-chasen-%E8%8C%B6%E7%AD%85%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)
標本の標準偏差の計算式


合計と二乗合計から標準偏差を計算したいことが時々あります。
頻繁には使わないのですが、なぜかぐぐってもこの式を見つけるのは苦労します。
自分でも計算できますが結構面倒です。
ということで、備忘録です。

## 定義

ここで、標本の標準偏差 `u` といっているのは次のことです。
（似たようなもので、`n-1` ではなく `n` で割るものもあります。）

https://ja.wikipedia.org/wiki/標準偏差

```math
u = \sqrt{ \frac{1}{n - 1} \sum_{i=1}^{n}(x_i - \bar{x})^2 }
```

ここで、 $\bar{x}$ は、$x$ の平均。$\bar{x} = \frac{1}{n}\sum_{i=1}^{n}x_i$


$u$ は、式を変形すると、次の様になります。

```math
\begin{eqnarray}
u & = & \sqrt{ \frac{1}{n - 1} \sum_{i=1}^{n}(x_i - \bar{x} )^2 }
  \\
  & = & \sqrt{ \frac{1}{n - 1} \sum_{i=1}^{n}(x_i^2 - 2x_i\bar{x} + \bar{x}^2 ) }
  \\
  & = & \sqrt{ \frac{1}{n - 1} \sum_{i=1}^{n}
    \left\{
    x_i^2
    - 2x_i\frac{1}{n}\sum_{i=1}^{n}x_i
    + \left( \frac{1}{n}\sum_{i=1}^{n}x_i \right)^2
    \right\}
  }
  \\
  & = & \sqrt{ \frac{1}{n - 1}
    \left\{
    \sum_{i=1}^{n}x_i^2
    - 2\frac{1}{n}\sum_{i=1}^{n}x_i\sum_{i=1}^{n}x_i
    + n \left( \frac{1}{n}\sum_{i=1}^{n}x_i \right)^2
    \right\}
  }
  \\
  & = & \sqrt{
  \frac{n}{n - 1}
  \left\{
    \frac{1}{n} \sum_{i=1}^{n}x_i^2 
    -
    \left( \frac{1}{n} \sum_{i=1}^{n}x_i \right)^2
  \right\}
  }
  \\
  & = & \sqrt{
  \frac{n}{n - 1}
  \left\{
    \bar{ (x^2) } - (\bar{x})^2
  \right\}
  }
\end{eqnarray}
```

ここで、$\bar{x^2}$ は、$x^2$ の平均。$\bar{x^2} = \frac{1}{n}\sum_{i=1}^{n}x_i^2$

## 計算方法

サンプル数 `n` のデータ列で、合計を `sum` 二乗合計を `sqsum` とすると 平均と標本の標準偏差は、python では、次のように求めることができます。

```python
# n : サンプル数 (n >= 2)
# sum : 合計
# sqsum : 二乗合計
# ave : 平均
# std : 標本の標準偏差
import math

ave = sum / n
std = math.sqrt((sqsum / n - ave * ave) * n / (n - 1))
```

注意点として、`(sqsum / n - ave * ave)` の引き算で有効桁数が失われる様な場合には誤差が大きくなってしまいます。

## 簡単な検算

```python
#!/usr/bin/env python
import sys
import math

data = []
count = 100
if len(sys.argv) > 1:
    count = int(sys.argv[1])

# データの準備 -- data = [1, 2, ..., n-1]
for i in range(1, count+1):
    data.append(float(i))

#
# 変形した式での計算
#
sum = 0.0
sqsum = 0.0
for d in data:
    d = float(d)
    sum += d
    sqsum += d * d

n = float(len(data))
ave = sum / n
std1 = math.sqrt((sqsum / n - ave * ave) * n / (n - 1))

print("ave=%.3f" % ave)
print("method 1: std1=%.3f" % std1)

#
# 元の標本の標準偏差の定義の式での計算
#
sum2 = 0.0
for d in data:
    d = float(d)
    sum2 += (d - ave) * (d - ave)

std2 = math.sqrt(sum2 / (n - 1))
print("method 2: std2=%.3f" % std2)
```

結果は、以下のとおりで、method 1 と method 2 の値が同じでOKの様です。

```bash
$ ./std-test.py
ave=50.500
method 1: std1=29.011
method 2: std2=29.011
```
Herokuでwebsocket-railsを利用する場合はRedisが必要

# 概要
websocket-railsのサンプルアプリをherokuで動かそうとしてハマったのでメモ
多分websocket全般でそうなんではないか

ruby 2.2.2
rails 4.2.6
websocket-rails 0.7.0 712fd4e

# (先に)結論
ローカルでは正常に動いている事が前提
以下は、参考URLに書いてある通り

1.Redisの有効化
heroku addons:add redistogo 

2.Redisの接続先、パスワードを確認
herokuダッシュボード ⇒ 自分のアプリケーションのページ　⇒ Add-ons ⇒ Redis To Go
Generalに以下のように書いてある
redis://redistogo:”パスワード”@”RedisのURL”:”ポート”

3.websocket-railsにredis接続先を与える
vim config/initializers/websocket_rails.rb
config.redis_options = {:host => ’RedisのURL’, :port => ’ポート’, :user => 'redistogo', :password => ’パスワード’}
（ここで、ユーザ名は'redistogo'固定）

4.ディスパッチャのurlをlocalhostではなく、heroku上での自分のアプリ公開URLに変更 (RedisのURLではない)
var ws_rails = new WebSocketRails("自分のアプリ.herokuapp.com/websocket");

# 参考
[[some tech talks ：Deploy Rails Websocket App Into Heroku]](http://tgib23.github.io/blog/2014/10/30/deploy-rails-websocket-app-into-heroku/)


### 備考1
特にHerokuの構成について未だあまりよく分かっていないため、以下は推測を含む

HerokuでRedisが必要となる理由は、heroku dev centerによると、1アプリケーションでもdynoは複数に分かれる可能性があり、そうなった場合に異なるdyno同士で通信ができないため。
無料利用ではdynoは１台限定なのでは？という気もするが、とにかくRedisを介さないと動かなかった。

### 備考2
以前の記事で参考にしたwebsocketのサンプルは、上記参考URLがもとになっているようだ
FluidQuery 1.6 

こんにちは。今月から自分の興味ある分野の記事をアップしていきたいと思います！今回は興味のあるポイントとしてFluidQueryを題材にした記事を書いてみたいと思います。
###**FluidQueryとは何か？**
***
FluidQueryはIBM社のDWHアプライアンスであるPuredata System for Analytics(Netezza)のアドオン機能(無償)であり、Netezza環境からSQLを通して他のRDBMSやHadoop環境のデータを取得することができる非常に便利な機能です。興味深い点として、RDBMSの表データをNetezza側にコピーできることはもちろん、RDBMSに対して実行したSQL結果セットをNetezzaに持ってきたり、RDBMS側で実行したSQLの結果セットとNetezza側の表を結合させてユーザーが求める結果を取得するといったことも可能です。RDBMSの違いを意識することなく、1つの論理的なデータウェアハウスのような感じで様々なデータソースへのアクセスができるようになります。

また履歴データやアクセス負荷の低いものは他のHadoop環境にデータを移動させることが可能です。またHadoop上にあるデータに対してもSQLを解してNetezzaからデータを引っ張ってくることができます。

###**FluidQuery概要**
***
![FluidQuery1.6.png](https://qiita-image-store.s3.amazonaws.com/0/94920/37ba94e8-24a2-4917-4f58-88d02ce71eff.png)

![FluidQuery1.6_5.png](https://qiita-image-store.s3.amazonaws.com/0/94920/e4541e7b-a087-ee1c-1471-e5140760d448.png)

![FluidQuery1.6_3.png](https://qiita-image-store.s3.amazonaws.com/0/94920/77b1f88d-71d2-5868-6aa0-ec86ddf6fede.png)


**FluidQuery参考情報**
***
使い方からデモまで英語ですが、一通り情報が揃っている様子。今後Netezzaのエミュレーション環境とRDBMSをつなげて、ちゃんと動くか試していきたいと思います。

・[IBM Fluid Query v1.6.0.1 documentation](http://www.ibm.com/support/knowledgecenter/SSULQD_1.6.0/com.ibm.nz.hdp.doc/kc_welcome_fq.html)
・[What’s new: IBM Fluid Query 1.6](https://ibmdatawarehousing.wordpress.com/2015/11/13/whats-new-ibm-fluid-query-1-6/)
・[Using Fluid Query to offload data to Hadoop](http://cleverowl.uk/2015/12/08/using-fluid-query-to-offload-data-to-hadoop/)
・[IBM FluidQuery 1.6 data sheet](http://www-01.ibm.com/common/ssi/cgi-bin/ssialias?htmlfid=WAS12388USEN)

**FliudQuery1.6 セットアップ、使用例**
***
・[FluidQuery1.6を使用してNetezza環境とOracle DB環境のデータ連携をやってみた。](http://qiita.com/e33119/items/57ac17c22309e03ea873)
・[FluidQuery1.6を使用してNetezza環境とSQLServer環境のデータ連携をやってみた。](http://qiita.com/e33119/items/de56a3e0a47d8333ce43)
[Android] RxJavaでズンドコ

前回の [RxJSでズンドコ](http://qiita.com/hkusu/items/88b70ece9fd1f8d42b84) に引き続き、[RxJava](https://github.com/ReactiveX/RxJava) on Android でやってみました。

> ズンドコキヨシとはなんぞや？という方はこちら ⇒ [ズンドコキヨシまとめ](http://qiita.com/shunsugai@github/items/971a15461de29563bf90)

```java:
PublishSubject<String> subject = PublishSubject.create();

subject
        .doOnNext((aString) -> Log.i("ZunDoko", aString))
        .buffer(5, 1)
        .filter(aArray -> aArray.toString().equals("[ズン, ズン, ズン, ズン, ドコ]"))
        .take(1)
        .subscribe(aArray -> {
            Log.i("ZunDoko", "キ・ヨ・シ！");
            subject.onCompleted();
        });

while (!subject.hasCompleted()) {
    if (Math.random() > 0.5) {
        subject.onNext("ズン");
    } else {
        subject.onNext("ドコ");
    }
}
```

<img width="600" alt="スクリーンショット 2016-03-19 15.25.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/35733/8093ad74-3d6e-44cc-b53b-0e59b0c823f1.png">
Thymeleafのth:replaceとth:includeはこう使い分ける！


最近SpringBoot x Thymeleafを本格的に使うようになったのですが、先日UI部品の共通化で少し混乱したことがあったのでコトの顛末をまとめておきます。

## 先に結論

先に結論だけ書いておきます。
**共通化したいパーツが1つのタグに収まっていれば`th:replace`、そうでなければ`th:include`を使う。**

Thymeleafでは部品の共通化のために2つの方法が提供されています。`th:replace`と`th:include`です。これらは上記のルールに基づいて使い分けることができます。
本家サイトにも[th:includeとth:replaceの違い](http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf_ja.html#thinclude-と-threplace-の違い)という項目はあり、以下のように書かれているのですが、

> th:include と th:replace の違いって何でしょうか？ th:include はホストタグの中にフラグメントの中身をインクルードする一方で th:replace は実際にホストタグをフラグメントで置換します。

私には初見ではよくわかりませんでした。
そこで挙動を整理してみたところ、本家の解説の意味にもシンプルなルールにも気づけました。

では順番に挙動を見ていきましょう。
以下に登場するコードは[github](https://github.com/blackawa/examples/tree/master/th-include-or-replace)にあげてあります。

## th:replaceの挙動

`th:replace`は**書かれたタグをth:fragmentが書かれたタグで置き換え**ます。
単純にタグを置換するので、th:replaceタグとth:fragmentタグが1:1対応している必要があります。

たとえばこのような場合、`th:replace`を使うことができます。

```html:src
<div th:replace="common::replace"></div>
<hr class="ui divider">
<div th:replace="common::replace"></div>
```

![th_replace.PNG](https://qiita-image-store.s3.amazonaws.com/0/57085/6b0e2b7b-3fb7-897f-dd23-9b2d97a905c7.png)

```html:display
<div class="ui container">
  <div class="ui buttons">
    <button class="ui primary button">Save</button>
    <div class="or"></div>
    <button class="ui button">Cancel</button>
  </div>
</div>
<hr class="ui divider">
<div class="ui container">
  <div class="ui buttons">
    <button class="ui primary button">Save</button>
    <div class="or"></div>
    <button class="ui button">Cancel</button>
  </div>
</div>
```

`<button>`の集合がグループ化されて一つのタグにまとめられているので、`th:replace`でガツンと置換してしまえばキレイに意図したViewが構築できますね。

## th:includeの挙動

`th:include`は**書かれたタグはそのままに、タグの内部を書き換え**ます。
`th:replace`と違い、共通部品と1:1対応でなくとも置換が可能です。

```html:src
<div class="ui three item menu" th:include="common::include"></div>
<hr class="ui divider">
<div class="ui vertical menu" th:include="common::include"></div>
```

![th_include.PNG](https://qiita-image-store.s3.amazonaws.com/0/57085/9fe51747-bc34-e5f9-2311-ae8ae26faf35.png)

```html:display
<div class="ui three item menu">
  <a class="active item" href="#">item 1</a>
  <a class="item" href="#">item 2</a>
  <a class="item" href="#">item 3</a>
</div>
<hr class="ui divider">
<div class="ui vertical menu">
  <a class="active item" href="#">item 1</a>
  <a class="item" href="#">item 2</a>
  <a class="item" href="#">item 3</a>
</div>
```

`th:include`を書いたタグのclass指定によって、縦並びと横並びが入れ替わっています。このような指定をしたい時は`th:include`が有効だといえます。

## まとめ: 作れない構成もあるので気をつけて

しかし、これでは共通化部品が一つのタグにまとまっていなくて、かつ親タグが共通部品以外の子要素を持っていたら書けません。

```html:example
<div>
    <p>共通化したい部品1</p>
    <p>共通化したい部品2</p>
    <p>共通化したい部品3</p>
    <div>このページ固有の要素たち</div>
</div>
```

一旦今はそのような状況に遭遇はしていませんが、そうなったらHTMLの構成で吸収するしかなさそうです。
GitHub PagesにGitHubからsubmoduleを入れるときSSH形式のURLは使えない

# Tl;dr T/O
はまったのでメモ。
GitHub Pagesのリポジトリに`git submodule`でGitHubの別のリポジトリのコンテンツを入れようとするとエラーになった。
原因は、submoduleのURLが`git@github.com:...`で始まっており、
ページをビルドする際にGitHub自身から`git clone`しようとして鍵認証でこけたためである。
同じGitHubなのだからビルド・プログラムにも鍵くらい持たせていいような気もするが、やってないのはセキュリティ上の理由なんだろうか。

ちなみに`https://...`形式のURLを指定すればエラーはなくなった。

もう一つメモとして、GitHub Pagesのビルド・エラーは、Pagesのリポジトリの設定ページ（settings）で確認出来る。
ちょっと嵌ったので書き残しておく。
CSS三角形の角度を決めて表示させるSTYLUS MIXIN 

みなさん、CSS三角形使ってますか？　ていうかアレ、正式名称とかあるんでしょうかね？　私はあまり使いません。サイズやらイメージが合わないとやらで突っ返されると、この辺の角度かこの辺のサイズかとちまちま1pxずつborder-widthをなぶることになったりして面倒なのです。おとなしくいただいた画像を貼っているほうが気が楽なのです。

# 動機
と、よくあるリストのマーカー部分の三角形、背景画像にして表示させていたら「そういうのはCSSで〜」とかわけ知り顔で語られたので、どうせなら融通の効くやつを。

## 融通ポイント1 頂点の角度を決めうちしたい
あると思うんですよ、もう少し鈍角のが、とか尖ってるのが、とか。サイズ感も出しやすいですし、表示させるイメージも掴みやすいですしね。

## 融通ポイント2 stylusのmixinで
要は使いまわしたい。

# こうなった

```stylus
triangle(color, forward = u, base, d)
  width 0
  height 0
  border-style solid
  w = round(base / 2)
  h = round(w / tan((d / 2)deg))
  if forward == d
    border-width (h)px (w)px
    border-color color transparent transparent
  else if forward == r
    border-width (w)px (h)px
    border-color transparent transparent transparent color 
  else if forward == l
    border-width (w)px (h)px
    border-color transparent color transparent transparent
  else
    border-width (h)px (w)px
    border-color transparent transparent color
```

http://codepen.io/kobaatsu/pen/wGJvPW

## ポイント

こちら、想定している三角形のサイズを1/2にして、

```stylus
w = round(base / 2)
```

それを底辺に見立てた直角三角形の高さを`tan()`を使って算出します。文系野郎ですからね、三角関数とかおっかなびっくり使いますよええもう。
参考にしたのはこちら。[角度と高さから底辺と斜辺を計算](http://keisan.casio.jp/exec/system/1177477195)

```stylus
h = round(w / tan((d / 2)deg))
```

# 使い方
`triangle()` mixinを呼び出して色・向き（上/u 下/d 右/r 左/l）・三角形のサイズ・頂点の角度を指定してやります。向きは指定しないと自動的に上向きになります。ほら、いつだって上向きに生きていきたいじゃありませんか。

```stylus
.triangle
  triangle(red, d, 40, 60)
```

は、このようにコンパイルされます。`round()`している以上厳密性は求め難いですが、だいたいなんとかなっています。

```css
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 35px 20px;
  border-color: #f00 transparent transparent;
}
```

[codepenでざっくり実行できるようにしました](http://codepen.io/kobaatsu/pen/wGJvPW)ので、いろいろ数値を変えるなどしてお試しください。

# 最後に
みんなもっとstylus使おうよー。ここ2ヶ月で3人くらいに何それって言われて、結構歴史あるのになんでこんなに知名度ないんですかね。
ズンドコ with Apex


これだけたくさんの[ズンドコキヨシ](http://qiita.com/shunsugai@github/items/971a15461de29563bf90)があるのに、Apex ないじゃないか!! ってことで、お勉強がてら、ちょっと試してみました。久しぶりに、厳格な変数宣言の必要な言語触ったので、不思議な感覚です。

## 素直にループで作ってみた

Anonymous Window での実行を想定しているので、Salesforce の開発者コンソールから、`Ctrl+E` でウィンドウ開いてコピペして、`Execute`してください。結果は、ログを開いて`Debug Only` にすると見られます。

[Apexコード](https://github.com/sho7650/zundoko001.git)

```apex:zundoko001.apex
String  Z = 'ズン';
String  D = 'ドコ';
String  K = 'キ・ヨ・シ！';
Integer R, i = 0;

List<String> ZD       = new List<String> {Z, D};
List<String> Complete = new List<String> {Z, Z, Z, Z, D};

do {
    R = Math.abs(Math.mod(Crypto.getRandomInteger(),2));
    System.debug(ZD[R]);
    
    if (Complete[i] == ZD[R])
        i++;
    else
        i = 0;
} while (i < 5);

System.debug(K);
```

結果はこんな感じになりますね。

![Screen Shot 2016-03-19 at 15.02.00.png](https://qiita-image-store.s3.amazonaws.com/0/37263/44de98cd-f001-a2a0-a03a-98ecda5c0cb0.png "Screen Shot 2016-03-19 at 15.02.00.png")

## Class つくって、再帰呼び出しさせてみた

お行儀の良い言語だと、洗練されたアルゴリズムをいくらひねっても、コードが短くなっていかないですな。素直な方が短い。

[Apexコード](https://github.com/sho7650/zundoko002.git)

```apex:zundoko002.apex
public class Zundoko {
    String  Z = 'ズン';
    String  D = 'ドコ';
 	String  K = 'キ・ヨ・シ！';
    Integer R;

    List<String> ZD       = new List<String> {Z, D};
    List<String> Complete = new List<String> {Z, Z, Z, Z, D};

    public void Kiyoshi(List<String> Nominees) {
        if (Complete == Nominees){
            System.debug(K);
            return;
        } else {
            if (Nominees.size() > 4) {
                Nominees.remove(0);
            }
            R = Math.abs(Math.mod(Crypto.getRandomInteger(),2));
            Nominees.add(ZD[R]);
            System.debug(ZD[R]);
            this.Kiyoshi(Nominees);
        }
    }
}
```

Caller は、上と同じく、Anonymous Window から実行させています。初期値として、空欄入れたいだけなんだけど、リストの空欄をどうやって送ったらいいのか分かっていないので、今はこんな感じ。

```apex:caller
Zundoko Z = new Zundoko();
List<String> Nominee = new List<String>();

Z.Kiyoshi(Nominee);
```


## Apexってなんじゃい?

> Apex は、開発者が Force.com プラットフォームサーバでフローとトランザクションの制御ステートメントを Force.com API へのコールと組み合わせて実行できるようにした、強く型付けされたオブジェクト指向のプログラミング言語です。Java に似た、データベースのストアドプロシージャのように動作する構文を使用する Apex により、開発者は、ボタンクリック、関連レコードの更新、および Visualforce ページなどのほとんどのシステムイベントにビジネスロジックを追加できます。Apex コードは、Web サービス要求、およびオブジェクトのトリガから開始できます。

[「Apex コードの概要」 ](https://help.salesforce.com/apex/HTViewHelpDoc?id=code_about.htm&language=ja)
sdccでmsx

#概要
sdccでｃをコンパイルして、Z80のインテルhexにします。
hex2romでROM化します。
エミュレータで実行します。
#開発環境
SDCC : ver2.8.1
ruMSX : ver0.41 
#写真
![zun.jpg](https://qiita-image-store.s3.amazonaws.com/0/18104/525164b1-ba31-bd8a-1cc9-f17cf56f4c35.jpeg)

#ツール
https://github.com/ohisama/hex2rom
#MakeFile
```
All : zun.hex zun.rom 
zun.hex : zun.o
	sdcc -V -mz80 --no-std-crt0 --code-loc 0x4010 --data-loc 0x7000 -o zun.hex  zun.o
zun.rom : zun.hex
	hex2rom zun.hex zun.rom
zun.o : zun.c
	sdcc -V -mz80 zun.c

```
#サンプルコード
```
#define	CHPUT		#0x00A2
#define	CHGET		#0x009F
void print(char * pc);
void putchar(char c);
int getchar();
int rnd(char c);
void main(void)
{
	int n = 0;
	int c = 0;
	char d = 12;
	putchar(d);
	do
	{
		c = rnd(10) & 0x0E;
		if (c < 7)
		{
			print("zun ");
			n++;
			if (n == 4)
			{
				print("doko ");
				d = 0;
			}
		}
		else
		{
			print("doko ");
			n = 0;
		}
	} while (d == 12);
	print("ki yo shi!");
	putchar(getchar());
}
void print(char * pc)
{
	while (* pc != '\0')
	{
		putchar(* pc);
		pc++;
	}
}
void putchar(char c)
{
_asm
	ld		a, 4(ix)
	call	CHPUT
_endasm;
}
int getchar()
{
_asm
	call	CHGET
	ld		l, a
	ld		h, #0
_endasm;
}
int rnd(char c)
{
_asm
	ld		a, r
	ld		b, a
	ld		a, r
	add 	a, b
	ld		l, a
	ld		h, #0
_endasm;
}
```
iPhoneの写真を、日付ごとに振り分けてMacに保存 - PHP

# 概要
iPhoneで撮りためた写真を、ローカルのMacに保存するにあたり、日付ごとにうまく整理して取り込む方法が見つからなかったので、PHPでスクリプトを書いてみました。

シンプルに画像管理をしたかったので、画像の場所がわかりづらいMacの「写真.app」は使いたくない、という背景があります。また、Picasaがこの機能を持っていたのですが、ある日突然、iPhoneを認識してくれなくなり調べるのも面倒だったので・・・

なお、はじめに「イメージキャプチャ」、「プレビュー」などを使って、日付分けされていない状態で、ごそっとMacにインポートする必要があります。

# 機能
* iPhoneからは、予め画像をインポートしておく必要あり
* 取り込み済み画像を、日付ごとのフォルダに分けてそちらに移動 (mv)
* 日付はファイル作成日時を元に判断
* 日付ごとのフォルダは out/フォルダ内に自動生成される
* out/は自動生成される
* 拡張子のフォーマットチェックをかける
* 2回目の実行時など、出力先にファイルが存在したらSkipする


# 手順
* 以下の様にスクリプトを配置

```
├── script/allocator.php

└── pict_data/
  /*ここにiPhoneよりインポートしておく*/
  image01.jpg
  image02.jpg
  image03.jpg
  image04.jpg
```

* 実行

```

$ php script/allocator.php

image01.jpg:Allocated file to 2016-01-19
image02.jpg:Allocated file to 2016-01-30
image03.jpg:Allocated file to 2016-01-31
image04.jpg:Skip /* もしすでにファイルが存在する場合はSkipされる */
```

```
└── out/
     └── 2016-01-19/
             └── image01.jpg
     └── 2016-01-30/
             └── image02.jpg
     └── 2016-01-31/
             └── image03.jpg
```


# 注意
日付の取得は、lsコマンドを元にawkで無理やり引っ張ってきているので、環境によってはうまく取得できない可能性あり。
また、定義されていない拡張子はSkipされてしまう。

# 環境

```
$ php --version
PHP 5.5.9 (cli) (built: Feb 13 2014 01:17:07) 

$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.11.1
```

# スクリプト

```php:allocator.php

<?php

/*
 * pict_data/ に写真を配置
 * $ php script/allocator
 * out/が生成され、日付ごとに写真が振り分けられる
 * out/にすでに存在する場合はSkipされる
 * 拡張子チェックNGはSkipされる
 * 拡張子の許可はcheckFileFormat の$extensionsに追記する
 */

define("OUTPUT_DIR", __DIR__ . '/../out/'); 
define("PICT_DATA", __DIR__ . "/../pict_data/");

$output =  shell_exec("ls -lT " . PICT_DATA . " | awk '{print $9\"-\"$6\"-\"$7\",\"$10}'");

$array = preg_split('/\n|\r|\r\n/', $output, -1, PREG_SPLIT_NO_EMPTY);

allocate($array);

function allocate($array)
{
    foreach ($array as $k => $v) {
        try {
            $info = explode(",", $v);
            $date = date("Y-m-d", strtotime($info[0]));      
            $file = $info[1];
            $dir = OUTPUT_DIR . $date;
            $path = OUTPUT_DIR .  $date . "/" . $file;     

            if (!file_exists($dir)) {
                mkdir($dir, 0777, true);
            }

            if (checkDatetimeFormat($date)
                && checkFileFormat($file)
                && !file_exists($path)) {
                # 移動ではなくコピーにしたい場合は mv→cpに
                shell_exec("mv " . PICT_DATA . $file . " " . $path);
                echo $file . ":Allocated file to " . $date . PHP_EOL;
            } else {
                echo $file . ":Skip" . PHP_EOL;
            }
        } catch(\Exception $e) {
            echo $e->getMessage() . PHP_EOL;
        }
    }
}

function checkDatetimeFormat($datetime) {
    \DateTime::createFromFormat("Y-m-d", $datetime);
    $info = \DateTime::getLastErrors();
    return !$info['errors'] && !$info['warnings'];
}

function checkFileFormat($file)
{
    #念のための拡張子チェック 必要に応じて追記
    $extensions = array("JPG", "JPEG", "jpg","jpeg","mov","MOV","png","PNG","gif","GIF");
    $path_parts = pathinfo($file);
    return in_array($path_parts['extension'], $extensions);
}

```

# Gist

https://gist.github.com/yotasasaki/dd0a28e5c134cb3804dd
ElasticBeanstalk(Java)でMaxOpenFilesを増やす

Javaを使用してアプリケーションサーバを実行する場合、1プロセスで多くのリクエストを処理することととなるので
リクエスト数が増えるとToo many open filesエラーが発生することがあるかと思います。

アプリケーションサーバ起動時にはPAMを通らない＝/etc/security/limits.conf に記述しても効かないので、
通常はアプリケーションサーバの起動スクリプト等にulimit -nを記述したりすることで対応するかと思いますが、
ElasticBeansTalkではアプリケーションの起動周りにcloud-init→foreman/supervisordが使われており、起動スクリプトに追記することが難しくなっています。

# 現象確認
まずは変更前の値をcat /proc/プロセスID/limits | grep "Max open files"で確認します。

```text
Max open files            1024                 1024                 files
```
Max open filesはSoft/Hardともに1024となっています。（左の1024がSoft Limit、右の1024がHard Limitです）

# Javaの起動元プロセス確認
ElasticBeansTalkで作成したEC2にてpstreeで確認したところ、

```text
init-+-agetty
     |-atd
    略
     |-supervisord-+-java---28*[{java}]
     |             `-python
    略
```

となっていましたので、
Max open filesが子プロセスに引き継がれることを利用して
supervisordのMax open filesを増やす方針で対応します。

# 修正
/etc/supervisor/conf.d/supervisord.conf にあるminfdsの値をEC2起動時に書き換えます。

```text:/etc/supervisor/conf.d/supervisord.conf
[unix_http_server]
file=/tmp/supervisor.sock   ; (the path to the socket file)

[supervisord]
logfile=/var/log/supervisord.log ; (main log file;default $CWD/supervisord.log)
logfile_maxbytes=50MB       ; (max main logfile bytes b4 rotation;default 50MB)
logfile_backups=10          ; (num of main logfile rotation backups;default 10)
loglevel=info               ; (log level;default info; others: debug,warn,trace)
pidfile=/var/elasticbeanstalk/supervisord.pid ; (supervisord pidfile;default supervisord.pid)
nodaemon=false              ; (start in foreground if true;default false)
minfds=1024                 ; (min. avail startup file descriptors;default 1024)
minprocs=200                ; (min. avail process descriptors;default 200)

[rpcinterface:supervisor]
supervisor.rpcinterface_factory = supervisor.rpcinterface:make_main_rpcinterface

[supervisorctl]
serverurl=unix:///tmp/supervisor.sock ; use a unix:// URL  for a unix socket

[include]
files = /etc/supervisor/conf.d/application.conf /etc/supervisor/conf.d/containerlistener.conf
```
↑ここでは上記のminfds=1024をminfds=60000に変更します。

supervisordが起動する前に、上記設定ファイルを書き換える必要がありますので
/opt/elasticbeanstalk/hooks/appdeploy/pre
にsupervisord.confを書き換えるスクリプトを配置します。
即ち、.ebextensions配下に以下のような設定ファイルを配置してeb create/eb deployします。

```text:00_supervisord.config
files:
  "/opt/elasticbeanstalk/hooks/appdeploy/pre/00_supervisord.sh" :
    mode: "000744"
    owner: root
    group: root
    content: |
      #!/bin/bash
      sed -i "s/^minfds=1024/minfds=60000/" /etc/supervisor/conf.d/supervisord.conf
```

# 修正の確認
アプリケーション起動後にcat /proc/プロセスID/limits | grep "Max open files" で確認すると、無事増えていることが確認できます。

```text
Max open files            60000                60000                files
```

参考
http://supervisord.org/configuration.html
http://staffblog.yumemi.jp/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%87%E3%82%A3%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%82%BF%E6%95%B0%E3%81%AE%E4%B8%8A%E9%99%90%E5%A4%89%E6%9B%B4%E3%81%A8limits-conf%E3%81%AE%E7%BD%A0-2/
http://blog.father.gedow.net/2012/08/08/ulimit-configuration/
PHP & Phake で static なモックを「副作用」なく使用する方法

Static なメソッド呼び出しにモックを適用したい。でも PHPUnit や Mockery で static なモックを設定すると、他クラスで当該メソッドが読み込まれた場合にエラーが発生してしまう。。。
このようなジレンマを克服するために、PHP の OSS のモックフレームワークの [Phake](https://github.com/mlively/Phake) を使用して、上述の課題を克服する方法を説明します。


# 説明の前提条件
- モックを適用する対象は、`API`クラスの`request()`メソッドとします。
- `request()`メソッドは、static とします。
- `request()`メソッドの引数には、任意の値を指定できることとします。
- `request()`メソッドは、基本的に以下のように呼び出されるものとします。

```php
    API::request($hoge);
```
- `API`クラスの`request()`メソッドを使用している SUT（テスト対象）は、`SUT`クラスとします。


# 1. SUT の修正手順
## 1) `API`を、クラス変数として定義する
```php
    private static $api;
```

## 2) コンストラクタで、`API`変数を初期化する
```php
    function __construct() {
        self::$api = new API();
    }
```

## 3) `API`変数用の setter を用意する
```php
    public function set_API($arg) {
        self::$api = $arg;
    }
```
[DI（Dependency Injection）](https://ja.wikipedia.org/wiki/%E4%BE%9D%E5%AD%98%E6%80%A7%E3%81%AE%E6%B3%A8%E5%85%A5)の、特に **setter injection** の手法を採用しています。
これにより、テストケースで static なモックを設定することが可能になります。

## 4) `request()`メソッドの呼び出し箇所を、`API`変数を使用する方法に変更する
```php
    // self::$api::request() という表記は出来ない模様。
    self::$api->request($hoge)
```
上記 2) と合わせ、モックをセットしていない場合（＝通常呼び出し時）は、これまで通り`API::request()`と同じ挙動をすることになります。
また、モックをセットしている場合は、セットしたモックが呼ばれることになります。


# 2. テストケースの作成手順
## 1) `tearDown()`メソッドを定義し、`Phake::resetStaticInfo()`を呼び出すようにする
```php
    public function tearDown() {
        Phake::resetStaticInfo();
    }
```
これにより、各テストケース実行の度に static なモックの設定がリセットされるため、他クラスで当該メソッドが読み込まれた場合にエラーが発生することを予防できます。

## 2) static なモックを定義する
```php
$mock = Phake::mock('API');

// 引数が毎回異なる前提なので、Phake::anyParameters() メソッドを使用しています。
// また、戻り値の変数 $return は、予め定義してあるものとします。
Phake::whenStatic($mock)->request(Phake::anyParameters())
    ->thenReturn($return);

// request() メソッドがキチンと1回だけ呼び出せていることの検証です。
Phake::verifyStatic($mock, Phake::times(1))->request(Phake::anyParameters());
```
Phake の各メソッドの後ろに **Static** とつけることで、static なモックとして定義できます。


## 3) static なモックを SUT にセットする
```php
    $sut = new SUT();
    $sut->set_API($mock);

    // テスト対象メソッドを呼び出します。
    $sut->xxx();
```

これで、SUT に先に設定した **setter injection** との合わせ技で、Phake で static なモックを「副作用」なく使用することができるようになりました。
【Xcode】実行ごとにビルド設定を切り替える

プロジェクトを実行（Run）するごとにビルド設定（Debug, Releaseなど）を切り替える方法をメモしておきます。毎回「Edit Scheme」から確認する手間が省けます。

# 実行環境

Xcode 7.2.1（6.xでもできたはず）

# やり方

Alt キーを押しながら Run ボタンを押すだけです。

![image](https://qiita-image-store.s3.amazonaws.com/0/8292/1b11d77b-d56d-af47-8947-fff207a33091.png)

ビルド設定を変更して「Run」を押すとそのまま実行できます。

![image](https://qiita-image-store.s3.amazonaws.com/0/8292/7302db76-71ad-fd49-f04b-a637bfedb71c.png)

ここで変更した内容はその後も保持されます。
「org.scalaz.stream#scalaz-stream_2.10;0.7a: not found」というエラーが出る場合の対処


`plugin.sbt`に次の設定を追加すれば良い。


```scala:plugin.sbt
resolvers += "scalaz-bintray" at "https://dl.bintray.com/scalaz/releases"
```

# 参考

https://github.com/mmizutani/sbt-play-gulp/issues/3
[ssh] poderosaでサーバーごとに作業した内容をログに保存

#poderosaはタブ式 のユーザーインターフェイスを持ち、Telnet、SSH1/2、cygwinなど、さまざまな接続方式をサポートするWindows用のターミナルエミュレータです。

ダウンロード先
https://osdn.jp/projects/sfnet_poderosa/

#使ってなかった方はぜひ使ってみてください。
##メンテナンスなどの作業履歴もTabで複数サーバーに接続できるので、サーバーごとに作業ローグを保存したい場合便利です。使い方も簡単

#サーバー接続後タブが生成されるのでタブにマウスを乗せて右クリック
ログの設定を選択するとログ設定画面が表示されます

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/108475/c43ffe3e-6e92-d94b-d4fe-78c11a21c447.png)

#ログ設定画面からログの種類を選択してファイル名を指定するだけで、画面で作業した内容が全てログに残りますので、便利ですよ。
![キャプチャ2.PNG](https://qiita-image-store.s3.amazonaws.com/0/108475/cc35f34f-6bba-9314-ec92-c668eb5130e8.png)

#複数のサーバーに接続して各サーバーのログを別々の名前に設定すれば、色んなサーバーで作業した内容を全部保存できます。
link_toで突然methodが効かなくなって困ってるあなたへ

# 最近あったこと
Railsで、deviseを使ってサインアウトのリンクを貼っていたところ、ページ遷移が行われなかった。

![スクリーンショット 2016-03-19 13.32.01.png](https://qiita-image-store.s3.amazonaws.com/0/91609/85702a92-9bf3-84ef-3240-f6a01dd8b320.png)

サーバーのログを確認すると……

> Started GET "/users/sign_out" for ::1 at 2016-03-19 13:32:29 +0900

GETでアクセスしてる。

# 現状

```haml:_header.html.haml
%ul.dropdown-menu{:role => "menu"}
  %li
    = link_to 'マイページへ', user_path(current_user)
  %li
    = link_to 'サインアウト', destroy_user_session_path, method: :delete
```

ちゃんと書いてある。

# 原因
作業の途中で読み込むべきファイルのrequireを消していた。
（Railsであれば元から記述してあるはず)


(誤)

```js:application.js
//= require jquery
//= require turbolinks
//= require bootstrap
```


(正)

```js:application.js
//= require jquery
//= require jquery_ujs　←こいつが必要
//= require turbolinks
//= require bootstrap
```


## これなんだろう
**jquery_ujs**
[Ruby on Rails unobtrusive scripting adapter for jQuery](https://github.com/rails/jquery-ujs)

> ・force confirmation dialogs for various actions;
・make non-GET requests from hyperlinks;
・make forms or hyperlinks submit data asynchronously with Ajax;
・have submit buttons become automatically disabled on form submit to prevent double-clicking.

だって！！(あとは訳して)




今回の話で言うと、上から２つ目のこれ
> ・make non-GET requests from hyperlinks;

GET以外のハイパーリンクを結んでくれるらしい。



> These features are achieved by adding certain "data" attributes to your HTML markup. 

data属性が云々とのことなので、実際に先ほどのHTMLをドン

```html:headernohtml.html
<li>
  <a rel="nofollow" data-method="delete" href="/users/sign_out">サインアウト</a>
</li>
```

data-method属性にいい感じに指定してくれるっぽいですね。

# 所感
Railsばっかり弄っていると、こういう所が勝手に上手くいくものと思い込んでたから怖いと思った。これからはRailsの中身も弄って遊んでいきたい。

# 参考にさせていただいたサイト様
[Ruby on Rails unobtrusive scripting adapter for jQuery](https://github.com/rails/jquery-ujs)
[TechRacho link_toのmethodが効かない！？](http://techracho.bpsinc.jp/kazumasa-ogawa/2011_12_27/4874)