OmniAICreator/Qiita-1.07M huggingface dataset:
jQueryを使ってるページでJSの読み込みを手軽にbodyの最後に移動させる

JavaScriptの読み込みはレンダリングなどの処理をストップさせてしまうので、body要素の最後に設置すべきです。Google PageSpeed Insightsでもこの点をチェックされます。

```html
<head>
  <!-- headの中ではなく -->
</head>
<body>
  コンテンツ

  <!-- bodyの一番最後で読み込むべき -->
  <script src='/path/to/main.js'></script>
</body>
```

しかし既にhead要素の中でJavaScriptを読み込んでいる状態で、しかもbodyの中にscriptがインラインで記述されていて、その内容が読み込んでいるスクリプトに依存する場合、一旦その依存関係を解消してからでないと移動させられません。

```html
<head>
  <!-- すでにheadの中で読み込んでいる -->
  <script src='/path/to/main.js'></script>
</head>
<body>
  main.jsに依存関係のあるscriptを含むコンテンツ

  <!-- このままでは移動させられない -->
</body>
```

ページ数が多いとその全てをいちいち直して回るのは非常に大変ですが、jQueryを使っている場合は次のようなコードを読み込むことで簡単に移行することができます。

```html
<head>
  <script>
    App = {  // Appという名前は適当に変える
      _q: [],  // queue
      ready: function (func) {
        if (typeof func == 'function') App._q.push(func);
        return App;  // $(document).ready() をサポートする
      },
      unqueue: function () {
        for (var i = 0, l = App._q.length; i < l; i++) App._q[i]();
        App._q = [];
      }
    }
    jQuery = $ = App.ready;
  </script>
</head>
<body>
  jQueryの遅延実行を含むコンテンツ

  <!-- スクリプトを読み込む -->
  <script src="/path/to/main.js"></script>
  <script>
    // main.jsにjqueryが含まれているので、ここではjQueryにアクセスできる
    $(function () { App.unqueue(); });
  </script>
</body>
```

そしてコンテンツ中の全てのscriptを `$(function({ ... })` で囲みます。

```html
<script>
$(function () {
  // もとのコードを囲む
});
</script>
```

これでほぼ何も考えることなくscriptの位置をbodyの最後に移動させることができます。
メモ: Ubuntu , Debian ISO配布日本ミラーサイト

今まで本家からダウンロードしててダウンロードに３時間！！かかっていたので朗報

## ubuntu

* [13.10](http://ftp.riken.jp/Linux/ubuntu-iso/CDs/13.10/)

* [12.04](http://ubuntutym2.u-toyama.ac.jp/ubuntu//precise/)

## debian

* http://ftp.riken.jp/Linux/debian/debian-cd/current/amd64/iso-cd/
pythonのデフォルトエンコーディングをutf-8に変更する


##こんなエラーが出る

```python
#こんなエラーが出たときの対処法
UnicodeDecodeError: 'ascii' codec can't decode byte 0xe5 in position xx: ordinal not in range(128)
```

##エラーの原因を確定させる

```python
import sys
print sys.getdefaultencoding()
#>>'ascii'asciiがデフォルトなので、これがutf-8になるようにするのがゴール
```

##設定ファイルを置くべき場所(site-packagesディレクトリ)を探す

```sh
#site-pacagesというフォルダを探す
find / -name site-packages

#結果はいくつかでると思うけど、homebrewのpythonを使ってるならこのへんがくさい
#/usr/local/lib/python2.7/site-packages/
```

##設定ファイルの上部に下記を追加
上記で特定したsite-packagesの中にあるsitecustomize.pyの上部に下記を追記

```python:sitecustomize.py
import sys
sys.setdefaultencoding("utf-8")
```

##問題が解消されていることを確認する

```python
import sys
sys.getdefaultencoding()
#>>'utf-8'デフォルトのエンコーディングがutf-8になった
```
node.jsの開発環境構築まとめ


node.jsでWebアプリケーションの開発を行うまでの環境構築についてまとめてみた.

## nvm
https://github.com/creationix/nvm

nvmはnode.jsのバージョンの管理ツール（rvm, perlbrew, 〜env的な）
複数バージョンのnodeを共存させることができる.

### nvmのインストール
	$ git clone git://github.com/creationix/nvm.git ~/.nvm	
	$ source ~/.nvm/nvm.sh
	// この行を~rcに追記する.


### node.jsのインストール

	$ nvm ls-remote
	// 使用可能なバージョンがずらっと表示される.

	$ nvm install v0.10.21
	// バージョンを指定してインストール

	$ nvm use v0.10.21
	// バージョン指定
  
	$ node -v
	v0.10.21

ログアウト後もnodeのデフォルトバージョン指定を有効にするためには, `〜rc`に`nvm use v0.10.21`と記述しておけばよい.
（バージョンを新しくする時に, いちいち書き換えるのめんどくさいので, きっと他にいい方法ありそう...）

  
  
## npm
https://npmjs.org/

npmはnodejsのライブラリ管理ツール（rubygem, cpan的な）
nvmからnode.jsをインストールすると, npmもセットでインストールされる.

### 使い方
詳細は`npm -h`を参照

	$ npm install mysql -g  

`-g`オプションをつけると.nvm/v0.10.21/lib/node_modules以下に, つけないとカレントディレクトリにインストールされる.

## bower
http://bower.io/

Twitter社製のJavaScript,CSSのパッケージマネージャ
新しいアプリを作製する度にJQueryとかを手動で複製しなくてもよくなる.

### インストール
	$ npm install bower -g
	// npmでOK
	$ bower -v
	1.2.7
	
### 使い方
	$ bower install bootstrap
	// bower_componentsにインストールされる.
	// boostrapをインストールすると依存関係のあるJQueryも自動でインストールされる.
	
bowerでインストールしたライブラリは`./bower_components`下に配置されるので, 使用する時はそこまでのパスを引っ張ってくる必要がある.



## express
http://expressjs.com/guide.html

node.js用のWebアプリケーションフレームワーク.
Sinatraっぽい.

	$ express ExpressSample
	// ファイルが生成される
	// オプションでlessやstylusなどの指定も可能

	$ cd ExpressSample && npm install
 	// ライブラリのインストール

	$ npm start
	// アプリケーションの起動
	// デフォルトのポートは3000

`start`の他にも`packege.json`の"scripts"にコマンドを設定が可能.

## grunt
http://gruntjs.com/

JS用のタスクランナー
とりあえずインストール方法のみ記載.

### インストール
	
	npm install grunt -g
	npm install grunt-contrib -g
	// 便利なプラグイン達をインストール
	npm install grunt-cli -g

grunt-contribをインストールすると以下のURLに記載されている様々なプラグインが利用可能になる.

https://npmjs.org/package/grunt-contrib


 



## 参考URL
http://codedehitokoto.blogspot.jp/2012/03/sudo-npm-install-g.html
http://d.hatena.ne.jp/Yudoufu/20111010/1318252162
http://gihyo.jp/dev/serial/01/nodejs/0003
http://yosuke-furukawa.hatenablog.com/entry/2013/06/01/173308
http://tech4403.hatenablog.com/entry/2013/02/02/170957
ndmacroで数字をインクリメントする in Emacs

`ndmacro.el` はすごく便利で無いと困るけどあまり知名度がなさそうなので紹介しておく。

https://github.com/snj14/ndmacro.el

## 使い方
適当にロードパスに `ndmacro.el`を置いて

```
(require 'ndmacro) (global-set-key (kbd "C-t") 'ndmacro)
```

してから

```
10
11
```
と入力して `C-t`を連打すれば

```
10
11
12
13
14
```
と勝手にインクリメントして連番にしてくれる。2個飛ばしとかデクリメントも勝手に認識してくれるし

```
010
011
```
とか0を入れてもちゃんと動く。ステキ！
ルーティング

ルーティング：
どの要求を受けたら、どのコントローラを呼び出すかを決めている場所。

①リクエスト＝GET/books/2
↓
②パスの解析＆ルート定義の検索
サーバー（アプリ）
routes.rb
↓
③ルート定義に基づいてアクションを呼び出し

config/routes.rbに定義する。

routes.rb
match ':controller(/:action(/id(.:format)))'
:controller=books/hello/blog/etc...
:action=index/show/
:id=108等のid番号
:format=xml/html/etc

Railsにおいて名前はすべてを紐づける鍵！
OSX MavericksでXlibを使ったプログラムをコンパイルする

OSX 10.9 MacBook Pro Retina 15(2012)を使用

昔使Bていたコマンドの組み合わせがOSX Mavericksで使えなくなっていたので修正した。 
以下のコマンドでコンパイルできる。

```
gcc $1 -I/opt/X11/include -L/opt/X11/lib -lX11
```

ちなみに、XQuartzを起動していないとsegmentation faultでプログラムが動かないので注意。
Emacsで数字をインクリメントする（ついでにデクリメントも）

# 概要
Emacsで数字をインクリメントしたくてぐぐったんだけれど、自分で関数定義してるのばっかりだった。で、そんなことしなくてももっと簡単にできるやり方を見つけたのでエントリ化する。

# cua-mode と cua-incr-rectangle
`cua-mode`って知ってますか？emacsの矩形選択モードです。昔は拡張だったんですが今は本家に取り込まれています。
このcuaのパッケージに、`cua-incr-rectangle`って関数があります。これです。これを使えば数字をインクリメント出来ます。

# やりかた

順番的には

1. `M-x cua-mode` する
2. `M-x cua-set-rectangle-mark` を実行してインクリメントしたい数字を選択する
3. `M-x cua-incr-rectangle` を実行する
4. 選択モードを終了する

という流れだけど、毎回`M-x cua-mode`をオンにするとか、選択開始するたび`M-x cua-set-rectangle-mark`って入力するとかやってられないので、init.elに書いちゃいましょう

```el
(cua-mode t)
(define-key global-map (kbd "C-RET") 'cua-set-rectangle-mark)
```

これで常に`cua-mode`がオン、Control+Returnで選択開始出来ます（このキーは各自でお好みなキーバインドにして下さい。）

また、cuaの選択モードに限って`M-i`が`cua-incr-rectangle`にバインドされてます。
というところまでを前提にすると、やり方は

1. `C-RET`押して数字を選択する
2. `M-i`押す
3. `C-g`押す

終わり。便利！

# デクリメント

インクリメントがあったらデクリメントもあるだろう、と思ったんですがないようです。
ぐぐったら[実装してる方がいたので](https://web.archive.org/web/20130314100947/http://www.kaichan.mydns.jp/~kai/orgweb/init.html)<del>丸パクリ</del>参考にさせてもらって、init.elに以下の記述を行うとデクリメントを行う関数`cua-decr-rectangle`が`M-I`で使える

```el
(defun cua-decr-rectangle (decriment)
  "Decrement each line of CUA rectangle by prefix amount."
  (interactive "p")
  (cua-incr-rectangle (- decriment)))
(define-key cua--rectangle-keymap (kbd "M-I") 'cua-decr-rectangle)
```

# 補足

* cua-modeは矩形じゃない普通の選択モードと違って、カーソルの位置の文字は選択範囲に **含まれます**
* 10増やす、とかしたかったら、数字を選択した状態で`C-u 10 M-i`とかするといける。
ltsvをRubyのワンライナーで扱う


[awkとシェルでLTSVの取り扱いを簡単にするフィルタを書いてみた](http://koduki.hatenablog.com/entry/2013/07/31/000817)

なるほど。

上の記事を見てrubyでもやってみた。

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

def ltsv(line)
        log = {}
        line.strip.split("\t").each {|kv|
                k,v = kv.split(":", 2)
                log[k] = v
        }
        log
end
```

```
tail -f access.log | ruby -r./ltsv -ne 'log=ltsv($_);p log if log["status"]=="404"'
```

もっと短く書けないかと試行錯誤していたらこれでもよかった

```
tail -f access.log | ruby -ne 'log=Hash[$_.strip.split("\t").map{|kv|kv.split(":",2)}];p log if log["status"]=="404"'
```

## 流れるログを「トータルの処理時間が大きい順」に並べて見たい

```ruby
#!/usr/bin/env ruby
# tail -f /var/log/nginx/access.log | ruby ltsvstream.rb

while true
        summary = {}
        time = nil
        while line = STDIN.gets
                log = Hash[line.strip.split("\t").map{|kv|kv.split(":",2)}]
                time = log['time'] if time.nil?
                break if time != log['time']
                req = log['method'] + ' ' + log['path']
                summary[req] = {count:0,time:0} if summary[req].nil?
                summary[req][:count] += 1
                summary[req][:time] += log['req_time'].to_f
        end

        puts "=== #{time} ==="
        summary.sort_by{|req, detail| detail[:time]}.reverse.each do |req,detail|
                puts "#{'%.2f'%detail[:time]}\t#{detail[:count]}\t#{req}"
        end
end
```

こんな感じ

```
=== 2013-11-06T02:02:00+09:00 ===
54.29   7       GET /ticket/2
21.92   8       GET /
11.12   4       POST /buy
10.96   4       GET /artist/1
=== 2013-11-06T02:02:01+09:00 ===
100.95  14      GET /ticket/2
15.83   6       GET /
8.27    3       GET /artist/1
=== 2013-11-06T02:02:02+09:00 ===
51.33   7       GET /ticket/2
32.36   12      GET /
10.67   4       POST /buy
8.76    3       GET /artist/1
=== 2013-11-06T02:02:03+09:00 ===
31.22   4       GET /ticket/2
28.16   11      GET /artist/1
15.61   7       GET /
8.61    4       POST /buy
=== 2013-11-06T02:02:04+09:00 ===
39.55   5       GET /ticket/2
23.31   11      GET /artist/1
11.96   6       GET /
6.04    3       POST /buy
```

ltsvの形式は[昨日](http://qiita.com/edvakf@github/items/3bdd46b53d65cf407fa2)と同じ
RubyでHTTPS接続時にSSL証明書のエラーがでる。


`bundle install` や `gem install` 実行時に下記のエラーが出力された。

```bash
SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B
```

これはSSL証明書が見つからなくて、HTTPS接続に失敗しているのが原因だ。
対応するには Ruby がSSL証明書を見つけられるようにすればよい。

```bash
% brew install curl-ca-bundle

# SSL証明書をどこに置けばいいのかを調べる。
% ruby -ropenssl -e 'p OpenSSL::X509::DEFAULT_CERT_FILE'
"/usr/local/etc/openssl/cert.pem"
%  cp /usr/local/opt/curl-ca-bundle/share/ca-bundle.crt /usr/local/etc/openssl/cert.pem
```
Oracle SQL 逆引きメモ

個人用oracle逆引きメモ。随時追加予定。

###### Oracleインスタンス名、バージョンを取得したい

```sql
select INSTANCE_NAME, VERSION from v$instance ;
```

###### SGAに割り当てられてるメモリ容量を知りたい

```sql
select * from v$sga ;
```

###### アラートログの出力場所を忘れてしまった

```sql
sho parameter BACKGROUND_DUMP_DEST
```

###### データファイルの場所を知りたい

```sql
select NAME from v$datafile;
'表領域とセットで
select TABLESPACE_NAME, FILE_NAME from dba_data_files;
```

###### テーブルがどの表領域に属するかを知りたい
```sql
select TABLE_NAME, TABLESPACE_NAME
from ALL_TABLES;
```

###### テーブル情報が知りたい

```sql
select TABLE_NAME from USER_TABLES;
select TABLE_NAME from ALL_TABLES;
```


###### Oracleのユーザ情報が知りたい

```sql
select USERNAME, DEFAULT_TABLESPACE, TEMPORARY_TABLESPACE from DBA_USERS;
```

###### Oracleのユーザを追加したい

```sql
CREATE USER TESTUSER
 IDENTIFIED BY "hogehoge"
 DEFAULT TABLESPACE users
 TEMPORARY TABLESPACE temp
 /

 GRANT CONNECT TO TESTUSER
 GRANT CREATE TABLE TO TESTUSER;
 ALTER USER TESTUSER QUOTA UNLIMITED on USERS;
```

###### SQL*Plusなどで現在ログインしているユーザ情報が知りたい

```sql
select * from USER_USERS;
```
StarlingでBlendModeを使った際の落とし穴

# はじめに
FlashのStage3Dを活用したライブラリである、StarlingフレームワークでのTipsのご紹介です。
エフェクトなどの表現を作る際、レイヤーのBlendModeをうまく活用すると効果的だと思いますが、注意しないと思わぬ落とし穴に落ちてしまうことがあります。

# 問題点(落とし穴)
テクスチャにATFファイルを使いBlendModeを使用すると、下図のようにアルファ部分が黒くなってしまうことがあります。左側の星がその症状、右側の星は対処済みのものです。

![capture.png](https://qiita-image-store.s3.amazonaws.com/0/16944/7b9a5319-7ff3-b399-ed28-55ce8a771c48.png)


# 発生条件
+ Starling 1.4.1 (2013年11月5日での最新バージョン)
+ モバイルデバイスでの再生 (PCでは発生なし)
+ ATFファイルをテクスチャに使用する
+ BlendModeを使用する
+ BlendModeを適用していなレイヤーにアルファを適用している
+ Android 4.1.1 / iOS 6.1.3 / iOS 7.0.3で確認済。

# 解決策
+ カスタムブレンドモードを作成して使用する。

```as3
// カスタムブレンドモードを作成
BlendMode.register("CUSTOM_ADD", Context3DBlendFactor.SOURCE_ALPHA, Context3DBlendFactor.ONE);
```
※使うときは、お好みのMyBlendModeクラスを作るといいかもです。

# まとめ
+ ATF の作成の際、設定を色々変えてテストしてみましたが同様の症状でした。(-0, -2, -4, -c など)　おそらく機種依存の問題ではないと思います。
+ 沢山のオブジェクトに対してBlendModeを使う際は親レイヤーに一括して適用した方がお得です。
+ アルファとBlendModeはつい一緒に使いたくなりますが、極力避けた方が色々な箇所でいいコトがありそうです。スケールアニメーションや、スプライトシートを活用するといいでしょう。
+ BlendModeは使い方を間違えると諸刃の剣となるでしょう。

## 参考
+ [Multiply blend mode is not working properly with ATF containing transparency - Starling Forum](http://forum.starling-framework.org/topic/multiply-blend-mode-is-not-working-properly-with-atf-containing-transparency )
+ [New Feature: BlendModes! - Starling Forum](http://forum.starling-framework.org/topic/new-feature-blendmodes)
Model.model_name.humanとModel.human_attribute_name


備忘録というかメモ。
railsで、次のように翻訳のファイル（例：config/locales/application.ja.yml）を書いておく。

```
ja:
  activerecord:
    models:
      user: ユーザ
    attributes:
      user:
        name: 名前
```

すると、コード上では次のようにモデル名とモデルの属性の翻訳を使うことができる。

```ruby
# t("activerecord.models.user")と同じ
User.model_name.human #=> "ユーザ"
```

```ruby
# t("activerecord.attributes.user.name")と同じ
User.human_attribute_name :name #=> "名前"
```
wp_cron のジョブを確認したい

wp_cron のジョブ情報も WP_OPTIONS 表に入っています。全ての wp_cron ジョブのデータがシリアライズされた形で option_name = 'cron' の 1レコードに格納されています。

配列内の情報としては以下の例のように実行日時タイムスタンプ、action 関数名、action 関数への引数を MD5 でハッシュ化した値、実行間隔等が含まれています。wp-cron 機能を使ったプログラムのデバッグ時には、まずこれらを用いてきちんとジョブがスケジュールされるか確認すると良いかも知れません。

```
i:1383688800;a:1:{s:20:"wp_maybe_auto_update";a:1:{s:32:"40cd750bba9870f18aada2478b24840a";a:3:{s:8:"schedule";s:10:"twicedaily";s:4:"args";a:0:{}s:8:"interval";i:43200;}}}
```

付け加えると、ジョブはタイムスタンプと action 関数名＋ MD5 値で識別されています。ですので wp_next_scheduled ではきちんと action 関数への引数も正確に指定しないと期待した動作になりません。
option_name = 'gmt_offset' のレコードがおかしい？

WordPress では標準時との差を取得するのに以下の関数で取得した値を使うことができます。

```php
get_option( 'gmt_offset' );
```

これなんですが、素直にみると WP_OPTIONS 表に option_name = 'gmt_offset' のレコードがありそうに見えます。で、実際にレコードはあるのですが、値が空だったりします。

実はこのレコードは使用されておらず、option_name = 'timezone_string' のレコードの値 ('Asia/Tokyo' とか) に従って get_option( 'gmt_offset' ) の戻り値が決まります。これらの処理は、以下のように wp-includes/default-filters.php の中でデフォルトフィルターが設定されていて、get_option よりこの wp_timezone_override_offset が呼ばれてその中で処理されています。

```php
add_filter( 'pre_option_gmt_offset','wp_timezone_override_offset' );
```

このように get_option 内で特別な振る舞いをするオプション値があるので注意が必要です。

*この記事は WordPress 3.7 をベースにして書いています。*
Javaで最大公約数

#最大公約数

説明するまでもないですが、２つ以上の正の整数に共通な約数（公約数）のうち最大のものを最大公約数といいます。

これを簡単に求めるには

##ユークリッドの互除法


を用います。

言葉だけだと難しく感じそうですが、プログラム的にはすごくシンプルになります。

##最大公約数のコード
```java
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
 
public class Gcd {
 
	public static void main(String args[]) throws IOException {
		BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
		String line = br.readLine();
		int[] numArray = parseInt(getSplitLine(line));
 
		int x;
		int y;
		if (numArray[0] > numArray[1]) {
			x = numArray[0];
			y = numArray[1];
		} else {
			x = numArray[1];
			y = numArray[0];
		}
 
		// ここからがユークリッドの互除法を用いた最大公約数を
		// 求める為の式
		int tmp;
		while ((tmp = x % y) != 0) {
			x = y;
			y = tmp;
		}
 
		System.out.println(y);
	}
 
	private static String[] getSplitLine(String line) {
		return line.split("\\s");
	}
 
	private static int[] parseInt(String[] line) {
		int[] numArray = new int[line.length];
		for (int i = 0; i < line.length; i++) {
			numArray[i] = Integer.parseInt(line[i]);
		}
		return numArray;
	}
}
```

##解法
例：
147 と 105 の最大公約数は 21

これを解いていく方法としては、

147 % 105 = 1 あまり 42
105 % 42   = 2 あまり 21
42   %  21  = 2 あまり 0
よって、21が最大公約数となる。
※証明の観点ですともっと複雑になりますが、この方法で解いた結果が
　最大公約数となるという理解で十分だと思います。
vagrant-global-statusを入れた


## 早速やってみる

```bash
vagrant plugin install vagrant-global-status
```

けど、
インストール直後、早速

```bash
vagrant global-status -a
```


してみたけど何も表示されない。
公式のREADMEを読んでみると、こんな記述が。


>
Whenever you vagrant up a VM, the plugin will register the machine name and path to its Vagrantfile on a global state file under ~/.vagrant.d. That is enough information for the global-status command to do its job and parse machine's statuses.
After a vagrant destroy, the VM will get removed from the global state file and will no longer show up by default on vagrant global-status unless you pass in -a to it.


vagrant upをフックして、vagrant.d以下に立ち上げたVMのパスやステータスを保存している模様。
実際にvagrant upして「.~/.vagrant.d」以下の様子を見てみると、２つのファイルが更新されていた。

* plugins.json

* machine-environments.json
	
「machine-environments.json」のほうにVMの情報が記載されてました。

```javascript:machine-environments.json
{"environments":{"C:/Users/jacoyutorius/vagrant_berks":{"machines"[{"name":"default"}]}}}
```

こんな感じで。
このあと、再度vagrant global-status -a やってみたらVMの情報がしっかり表示されました。


## 参考にしたサイト

[Vagrantで仮想マシンの一覧を簡単に取得する方法](http://www.ryuzee.com/contents/blog/6752)

[vagrant-global-status](https://github.com/fgrehm/vagrant-global-status)
Javaで挿入ソート

今更ながらアルゴリズムの勉強をおさらいしようとしています。
忘れてしまったのでメモがてら残していきたいと思います。

正直普段の開発業務でアルゴリズムを ~~意識するのは殆どなかったりする~~ 
意識して使えてないのでちょっとがんばります。（こんな人は多いと信じたい。。。）

取りあえずAOJの基本問題をちょっとずつ解いてこうと思います。
http://judge.u-aizu.ac.jp/onlinejudge/index.jsp

#挿入ソート


一昔前なら当たり前にソートアルゴリズムを自分で書いていたらしいのですが、
自分世代だとJavaのコレクションクラスで既に用意してくれていたりします。
自前で書こうものならコードレビューでお叱りを受けるでしょう。
とは言え、じゃあ実際に書けるのかと言われれば

どうやんだっけ？


そもそも挿入ソートってなんだっけ？


となってしまうのは、学生時代に習った数学を忘れたサラリーマンならありがちだと思います。
※調べりゃ出来るってのはありますが。

前置きが長くなりましたが基本を思い出すことで新しい発想に繋げる為にも
今一度勉強していきます。
※人に説明できて初めて本質的に理解しているとも言いますし。

##挿入ソートのコード

```java
import java.io.IOException;
import java.util.Arrays;
import java.util.Scanner;
public class InsertionSort {
	public static void main(String args[]) throws IOException {
		@SuppressWarnings("resource")
		Scanner scanner = new Scanner(System.in);
		int n = scanner.nextInt();
		int A[] = new int[n];
		for (int i = 0; i < n; i++) {
			A[i] = scanner.nextInt();
		}
 		System.out.println(Arrays.toString(A).replaceAll("[,\\[\\]]", ""));
		// ここから挿入ソート
		for (int j = 1; j < A.length; j++) {
			int key = A[j];
			int i = j - 1;
			while (i >= 0 && A[i] > key) {
				A[i + 1] = A[i];
				i--;
			}
			A[i + 1] = key;
			System.out.println(Arrays.toString(A).replaceAll("[,\\[\\]]", ""));
		}
	}
}
```

##解法
array[5] = { 5, 2, 4, 1, 6, 3}
のような配列があった場合、以下のようにソートをしていきます。
サンプルコードを見ながら読み進めてもらえると理解しやすいと思います。

・5 > 2 // 1番目と２番目の要素を比較
-> 5, 5, 4, 1, 6, 3 // int key = A[j];
-> 2, 5, 4, 1, 6, 3 // A[i + 1] = key;
・5 > 4 // 2番目と3番目の要素を比較
-> 2, 5, 5, 1, 6, 3 // int key = A[j];
-> 2, 4, 5, 1, 6, 3 // A[i + 1] = key;
・5 > 1 // 3番目と4番目の要素を比較
-> 2, 4, 5, 5, 6, 3 // int key = A[j];　
-> 2, 4, 4, 5, 6, 3 // int key = A[j];
-> 2, 2, 4, 5, 6, 3 // int key = A[j];
-> 1, 2, 4, 5, 6, 3 // A[i + 1] = key;
・・・・後は省略
こんな感じで手前の要素と比較し、手前の要素の方が大きければ、
数値を先頭まで比較し入れ替え、最後に先頭となった要素へ数値を入れていきます。
MavericksでCommand Line Tools for Xcodeをインストールする

macのOSをMavericksにしたらxcodeのcommand line toolsのインストール方法がわからなくてちょっと調べたのでメモ

## 手順
* メニューからXcode->Open Developer Tool->More Developer Tools
![スクリーンショット 2013-11-05 21.48.02.png](https://qiita-image-store.s3.amazonaws.com/0/6129/fb458cc6-4cfc-7572-6621-b2e67f219bdb.png)

* Downloads for Apple Developerページが開くのでそこのリストから”Command Line Tools(OS X Mavericks) for Xcode”をダウンロードしてインストール
![スクリーンショット 2013-11-05 21.56.47.png](https://qiita-image-store.s3.amazonaws.com/0/6129/a3138a68-78f1-04cc-b284-bbbc0959d5d0.png)
FirefoxでSWFからフォーカスを外す方法

## 想定状況

###### jquery1.10.2を使用しています
###### FlashPlayer9 AS3でパブリッシュしています
###### Firefox24で確認しました

## 問題点と解決方法

### 問題： FirefoxでSWFをクリックして非表示化したあと、ページ上でマウスホイールが効かなくなる。

### （微妙な）解決策：隠したinputタグにfocus()させてSWFからフォーカスを外す

まずinputタグをページのどこかに隠しておきます。

```html
<div class="anywhere">
  <input type="button" id="dummy" class="hide" focushide="true" />
</div>
```

flashを非表示化する前後に上記のinputタグにfocus()させます

```js
$('#dummy').focus();
```

そうするとフォーカスがSWFから外れてくれます。

微妙過ぎる解決策なので、もっとスマートに出来る方法があれば教えて下さい！
Playframework2.2.0 + Scala2.10 + Scala IDE 3.0.2 (eclipse) でScalaTestまで

最近、Scala+Playframework を使ってます。（業務はPHP or Javaですが） Scala自体、Javaの経験があれば取っ付きやすそうなのと関数型言語、型推論というキーワードに 惹かれて初めて見ました。 で、とりあえず開発を進めるにあたってテストコードを書けなければと思い、 情報をまとめてみました。

#Playframework

特に迷うことはありません。
公式サイトから最新のパッケージをダウンロード
公式サイト：http://www.playframework-ja.org/
※2013/11/2 時点では 2.2.0が最新
で、チュートリアルとおりソースの展開、起動確認

Tips：Playframeworkのソースも参照したい場合は、playコンソール上で
　　　eclipse with-source=true もやると一緒に取り込まれます。

#Scala IDE (Eclipse) + Scala2.10

公式サイト：http://scala-ide.org/
これも迷うことはありません。
公式サイトから最新のパッケージをダウンロード
※Scalaも同梱されるので意識する必要はありません。
※Java6 or 7 どちらも利用可能なので、環境に応じてお好みで使い分ければOKです。

Tips：Javaも使いたい方は、デフォルトだとJavaのコード保管が無効になっているので、
　　　環境設定->Java->Editor->Content Assistant->Advancedで
　　　Javaを有効にする必要があります。

最後、
#ScalaTest

このあたりが一番迷ったところですが、Playframeworkではデフォルトで
Spec2がテストフレームワークとして採用されています。
色々調べた結果ではありますが、基本的にはScalaTestが一番多様な使い方が
出来る様なので、私はこれを使ことにしました。

参考にしたページ
ScalaTest（公式）：http://www.scalatest.org/user_guide/selecting_a_style
http://seratch.hatenablog.jp/entry/20110807/1312726957

導入方法ですが、以下のURL通りで問題ないです。
http://www.scalatest.org/download#20rc3

ポイントだけ記載しておくと
###公式サイトからjarファイルをダウンロード
※ScalaTest and ScalaUtils 2.0.RC3でした。

###ダウンロードしたjarをEclipseのプロジェクトのクラスパスが通っている場所へ配置

ちなみに、私はプロジェクト内で lib フォルダを新たに作り、そこへ配置し、
ビルドパスへ通すことで対応しました。

###build.sbt へ追記
> name := "sharedNewses"
> version := "1.0-SNAPSHOT"
> libraryDependencies ++= Seq(
>   jdbc,
>   anorm,
>   cache
> )
> // 空行を入れないとplayコマンド実行時に怒られる
> libraryDependencies += "org.scalatest" % "scalatest_2.10" % "2.0.RC3" % "test"★追加
> // 空行を入れないとplayコマンド実行時に怒られる
> play.Project.playScalaSettings

######playframeworkではbuild.sbtでビルドの定義を行っています。
######一応、playコンソール上で、clean , compile , eclipse で再定義をし直した方が無難です。

最後、サンプルコード

公式に良いサンプルはありますが、とりあえずScalaTestのFunSuite
を使ったテストコードを記載しておきます。
※Eclipseのテストコード上で右クリック->DebugConfigrationを選択するとScalaTestが出てくるはずです。
　それを使ってテスト実行できます。
（出てこない場合はEclipseでScalaTestPluginをインストールする必要があります。が、同梱されていたと思います。。。）

```scala
import org.scalatest.FunSuite
 
class WebSiteTest extends FunSuite {
 
  test("webSite.echo shoud have echo") {
    var webSite = new WebSite
    assert(webSite.echo == "test")
  }
}
 
package models
 
class WebSite {
 
  def echo: String = {
    "test"
  }
}
rpm-build 4.11.x の入ったAmazon Linuxでのcheckinstall

この記事を書いている時点の Amazon Linux で、rpm-build をインストールすると

```
rpm-build-4.11.1-3.49.amzn1.x86_64
```

というのが入ります。この 4.11 では、

- http://rpm.org/gitweb?p=rpm.git;a=commitdiff;h=f9f74db13e3bd94debcd7c33194e27649e5adfca

という修正により、シンボリックリンクに対して spec ファイルにて

```
%dir /symbolic/link
```

のように記述してRPMを作成しようとすると

```
ビルド対象プラットフォーム: x86_64
ターゲット x86_64 用にビルド中
ファイルの処理中: hogehoge-1.1-1.x86_64
エラー: Not a directory: /var/tmp/tmp.MwR4KMsuLD/symbolic/link

RPM ビルドのエラー:
    Not a directory: /var/tmp/tmp.MwR4KMsuLD/symbolic/link
```

みたいな感じでエラーとなります。

これを回避するために、以下のようにcheckinstall本体にパッチをあててインストールする手順を記載します。

# 準備

必要な環境を準備します。

```bash
$ sudo yum -y install git make gettext gcc rpm-build
$ mkdir ~/src
$ cd ~/src
$ git clone http://checkinstall.izto.org/checkinstall.git
$ cd checkinstall
```

# パッチ

64ビット向けの修正、および 4.11 での変更に対応するための修正をします。
以下のような修正点となります。

```
$ git diff
diff --git a/Makefile b/Makefile
index 2e28adc..b6d217c 100644
--- a/Makefile
+++ b/Makefile
@@ -4,7 +4,7 @@
 PREFIX=/usr/local
 BINDIR=$(PREFIX)/sbin
 LCDIR=$(PREFIX)/lib/checkinstall/locale
-CONFDIR=$(PREFIX)/lib/checkinstall
+CONFDIR=$(PREFIX)

 all:
        for file in locale/checkinstall-*.po ; do \
diff --git a/checkinstall b/checkinstall
index 978360f..69a0344 100755
--- a/checkinstall
+++ b/checkinstall
@@ -2428,7 +2428,7 @@ EOF
 # Prepare directories to be included in the .spec file
 mv ${TMP_DIR}/newfiles ${TMP_DIR}/newfiles.tmp
 cat ${TMP_DIR}/newfiles.tmp | while read line; do
-   [ -d "${BUILD_DIR}/${line}" -o -L "${BUILD_DIR}/${line}" ] && echo -n "%dir " >> ${TMP_DIR}/newfiles
+   [ -d "${BUILD_DIR}/${line}" ] && echo -n "%dir " >> ${TMP_DIR}/newfiles
    echo "\"/${line}\"" >> ${TMP_DIR}/newfiles
 done

diff --git a/checkinstallrc-dist b/checkinstallrc-dist
index d4feb4e..fe5f56e 100644
--- a/checkinstallrc-dist
+++ b/checkinstallrc-dist
@@ -117,7 +117,7 @@ RESET_UIDS=0
 NEW_SLACK=1

 # Comma delimited list of files/directories to be ignored
-EXCLUDE=""
+EXCLUDE="/selinux"

 # Accept default values for all questions?
 ACCEPT_DEFAULT=0
diff --git a/installwatch/Makefile b/installwatch/Makefile
index ae34fc1..fb41eb3 100644
--- a/installwatch/Makefile
+++ b/installwatch/Makefile
@@ -11,7 +11,7 @@ PREFIX=/usr/local
 VERSION=0.7.0beta7

 BINDIR=$(PREFIX)/bin
-LIBDIR=$(PREFIX)/lib
+LIBDIR=$(PREFIX)/lib64

 all: installwatch.so
```

# インストール

```bash
$ make
$ sudo make install
```

# checkinstallのRPM作成

この手順ではcheckinstallは/usr/local/sbinに入りますが、sudoするとパスが通っていないので、ec2-userの.bash_profileに下記を追記し、有効にしておきます。

```:/home/ec2-user/.bash_profile
alias sudo='sudo env PATH=$PATH'
```

```bash
$ . ~/.bash_profile
```

また、checkinstall自体は問題ないですが、他のRPM作成時に/usr/src/rpm配下に作成しようとするので、これを/root/rpmbuild配下に作成するように/root/.rpmmacrosを以下の内容で作成しておきます。

```:/root/.rpmmacros
%_topdir /root/rpmbuild 
```

その後、以下のようにしてcheckinstallのRPMを作成します。

```bash
$ sudo mkdir -p /root/rpmbuild/SOURCES
$ sudo rm /usr/local/checkinstallrc
$ cd ~/src/checkinstall
$ sudo checkinstall
```

いくつかの質問に答えると、checkinstallのPRMが作成されます。

これで、rpm-build 4.11 系に対応した checkinstall の RPM が完成です。
Python3.3.1でcChardetとpython3-chardetを使ったメモ


[chardet](https://pypi.python.org/pypi/chardet)というPythonのライブラリがある。bytes列を入力すると、bytes列が何の文字コードで書かれた文字列をエンコードしたものだったのかを推論することができる。

chardetをPython3で使おうと思ったが、公式はまだPython3に対応していない。

探してみたところ、[python3-chardet](https://github.com/bsidhom/python3-chardet)という、chardetをforkしたライブラリを見つけたのでそれを使うことにした。

※追記 [cChardet](https://github.com/PyYoshi/cChardet)のほうが速いのでそっちのほうが使いやすい。記事の下に追記した。

## インストール
githubからダウンロードしてインストールする。

```terminal
$ git clone git@github.com:bsidhom/python3-chardet.git 
```

で作ったディレクトリで

```terminal
$ python setup.py install
```
するとインストール完了。

## 実験

```python:ipython3
import chardet

chardet.detect('abc'.encode('utf-8'))
> {'confidence': 1.0, 'encoding': 'ascii'}

chardet.detect('あいうえお'.encode('utf-8'))
> {'confidence': 0.9690625, 'encoding': 'utf-8'}

chardet.detect('あいうえお'.encode('Shift-JIS'))
> {'confidence': 0.5, 'encoding': 'windows-1252'}
```

ちゃんと動いた。'あいうえお'.encode('Shift-JIS')がwindows-1252だと判定されたのはちょっと不安だが、confidenceが0.5なのでchardet自信も半信半疑なのだろう。文が短すぎたので仕方がない。

Webページをスクリプティングするときに使えるか、さらに実験を行った。

対象となるWebサイトは価格.com http://kakaku.com/ に決定。Shift_JISを使っているのでちょうどよい。

```python:ipython3
import chardet
import requests

r = requests.get('http://kakaku.com')
chardet.detect(r.content)
> {'confidence': 0.99, 'encoding': 'SHIFT_JIS'}
```

うまく判別してくれた。'あいうえお'.encode('Shift-JIS')の例と異なり、windows-1252ではなくSHIFT_JISと正確に判断してくれたのは、Webページ全体を対象とした長いbytes列を対象にしたからと思われる。confidenceも高くなった。

# 追記
[cChardet](https://github.com/PyYoshi/cChardet)というC拡張のPythonライブラリがあることにあとで気づいた。Python3で使える。PyYoshiさんすごい。

pypiにあるので https://pypi.python.org/pypi/cchardet/ pipで取ってこれる。

```terminal
$ pip install cchardet
```

せっかくなので、さきほどの価格.comのトップページを利用して、速度比較を行った。コードは以下の通り。

```python:compare.py
import chardet
import cchardet
import requests
import time

if __name__ == '__main__':
    r = requests.get('http://kakaku.com')
    begin_time = time.clock()
    guessed_encoding = chardet.detect(r.content)
    end_time = time.clock()
    print('chardet: %f, %s' % (end_time - begin_time, guessed_encoding))

    begin_time_of_cc = time.clock()
    guessed_encoding_by_cc = cchardet.detect(r.content)
    end_time_of_cc = time.clock()
    print('cChardet: %f, %s' % (end_time_of_cc - begin_time_of_cc, guessed_encoding_by_cc))
```
そして結果は以下のようになった。

```result
chardet: 1.440141, {'confidence': 0.99, 'encoding': 'SHIFT_JIS'}
cChardet: 0.000589, {'confidence': 0.9900000095367432, 'encoding': 'SHIFT_JIS'}
```

圧倒的ではないか。

## 結論
[cChardet](https://github.com/PyYoshi/cChardet)を使おう！！！
SWFをhtml上からremoveする時に気をつけること

## 想定状況

* swfobject2.2を使ってswfを生成しています
* jquery1.10.2を使用しています

## 問題点と解決方法

### 問題： objectタグをremoveするとIE6-8でブラウザがクラッシュする

コードはこんな感じです。
生成

```js
swfobject.embedSWF("player.swf","flashContent", "640", "480", "9");
```
削除

```js
$('#flashContentWrapper').remove();
```
### 解決方法：

```js
swfobject.removeSWF("flashContent");
$('#flashContentWrapper').remove();
```
## 参考

[How to proprely remove a flash object from a HTML page(stackoverflow)](http://stackoverflow.com/questions/2942244/how-to-proprely-remove-a-flash-object-from-a-html-page)
Chrome Canaryをデフォルトブラウザにする

Chrome Canaryからは設定出来ないっぽいけどSafariからならなぜか設定できるっぽい。

1. Safariの環境設定を開く
2. 一般タブを選択
3. デフォルトWebブラウザからChrome Canaryを選択する
Gruntのlivereloadポート変更

Gruntを使ってるときに、なんらかの事情でサーバを複数立ち上げて、監視対象も複数にしたい場合の設定メモ。

## grunt-contrib-connetの設定でhttpのポートとlivereloadのポートを設定する。

middlewareオプションで、connect-livereloadモジュールをportオプションを指定して実行。
httpのほうは、tmpディレクトリをルートディレクトリに指定。pathはpathモジュールだけど、path.resolveしなくても動くと思う。

```js:Gruntfile.js
connect : {
    develop : {
        options : {
            port: 9002,
            middleware : function(connect,options){
                return [require('connect-livereload')({
                    port : 35730
                }),(function (connect,p){
                    return connect.static(p);
                })(connect,path.resolve('tmp'))];
            }
        }
    }
},
```

## grunt-contrib-watchのほうの設定でも同じポートに設定する。

watchタスクで監視設定。connectで設定したlivereloadのポートと同じにする。

```js:Gruntfile.js
watch : {
    develop: {
        options : {
            livereload : {
                port : 35730
            }
        },

        files : [
            '<%= config.src %>**/*.js',
            '<%= config.scssPath %>**/*.scss',
            '<%= config.viewsPath %>**/*.jade'
        ],
        tasks : ['build']
    }
},
```

例で使ってるconfigはこんな感じで設定。

```js:Gruntfile.js
config: {
  src :  'src',
  scssPath : 'sass',
  viewsPath : 'views'
},
```


## 追記

<a href='http://qiita.com/sasaplus1' target='_blank'>sasaplus1</a>のご指摘で<a href='https://github.com/gruntjs/grunt-contrib-connect' target='_blank'>GitHub</a>みたらv0.4.0からgrunt-contrib-connectにlivereloadオプションが追加されたらしい。

```js:Gruntfile
connect : {
  options: {
    hostname : '<%= config.hostname %>'            
  },         

  test : {
      options : {
          port: 9001,
          livereload : 35730,
          base : 'public'
      }
  }
},
```


おわり。
地理院地図の標高タイル(CSV)を描画してみた


国土地理院が提供している API の一つに「標高タイル」というものがあります。

タイルというと、Googleマップや OpenStreetMap などの Web地図では通常、画像を指しますが、標高タイルAPIでは **「画素毎の高度(ｍ)」** が取得できます。

* [標高タイル仕様 - 地理院地図](http://portal.cyberjapan.jp/help/development/demtile.html)
* [サンプルURL](http://cyberjapandata.gsi.go.jp/xyz/dem/14/14547/6463.txt)

これは面白い、ということで使ってみました。

## サンプル

* [地理院地図の標高タイル(CSV)を描画してみた - jsdo.it](http://jsdo.it/amay077/jjod)

### Google Map 

![img1](http://blog.amay077.net/assets/images/posts/using_gsimap_dem_csv_api_01.png)

### 標高タイルAPI で取得した標高値を描画

![img1](http://blog.amay077.net/assets/images/posts/using_gsimap_dem_csv_api_02.png)

## 何をしているか？

下は、このサンプルのコードの抜粋ですが、ポイントは２つ

* getTile で通常 img 要素を生成して返すが、代わりに canvas 要素に返す
* 標高API をコールして得られた CSV をパースし、 高さに応じた色を計算して、canvas に矩形を描画する

さすがに1ピクセル毎に描画すると重すぎるので、初期値では 16ピクセルずつに間引きしています(画面の DotSize で変更できます)。

クライアント側でレンダリングしているので、色などが動的に変更できます。

```javascript:
    map.mapTypes.set("GsiMaps", {
      name:"標高タイル",
      tileSize:new google.maps.Size(256,256),
      minZoom:14, // 標高タイルは Lv:14 しか用意されてないので
      maxZoom:14, 
      getTile:function(tileCoord, zoom, ownerDocument) {
          
        // 普通は img だけど、標高タイルは CSV で画素毎の標高値が取得できるので、
        // クライアント側で描画するために Canvas を使う
        var canvas = ownerDocument.createElement("canvas");
        canvas.width = 256;
        canvas.height = 256;
        
        var x = (tileCoord.x % Math.pow(2, zoom)).toString();
        var y = tileCoord.y.toString();
        
        // 各画素の標高値を取得する
        canvas.tileUrl = "http://cyberjapandata.gsi.go.jp/xyz/dem/" + zoom +  "/" + x + "/" + y + ".txt";
        // 標高を描画する
        renderDem(canvas);
        renderedTiles[canvas.tileUrl] = canvas; // タイル再描画の為にとっておく
        return canvas;
      }
    });
    
    // 標高タイルを描画する
    function renderDem(canvas) {
      var ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, 256, 256);
      
      $.get(canvas.tileUrl, function(data) {
        // CSV が得られるのでパース
        var lines = data.split(/\r\n|\r|\n/);
        for (var i = 0; i < lines.length; i+=dotSize) {
          var cols = lines[i].split(',');
          for (var j = 0; j < cols.length; j+=dotSize) {
            if (cols[j] == 'e') { // エラーの画素には 'e' が入ってる
              continue;
            }
              
            // 標高0ｍ を startColor、標高1000ｍを endColor としたグラデーション色を設定する。
            ctx.fillStyle = $.xcolor
            .gradientlevel(startColor, endColor, cols[j] / 1000.0 * 100.0, 100)
            .getCSS();
            ctx.fillRect(j, i, dotSize, dotSize);
          }
        }
      });
    }
```

## まとめ

ただの標高値を地図に表すなら画像でいいじゃん！とか言われそうですが、よいアイデアが浮かばなかったのでまずは素直に使ってみました。

たとえば、移動手段による移動コストの違い(車だと坂道余裕だけど自転車だとキツい)みたいなのを視覚化するのに使えるような気がします。

今回は、Canvas を使ったのでこの程度ですが、WebGL とかを使えば、Google Map の地形図に負けない、美しい3D地図が描画できるはずです。

他に例を見ない、野心的な試みだと思うので、何か面白い使い方ができるといいなと思います。
WebFont の使い方


## Usage

WebFont の使い方をざっくりと.

![screenshot](http://jsdo-it-static-contents.s3.amazonaws.com/images/capture/y/u/u/yuuf.jpg?t=1383647975)

### Step 01

フォントファイル(`.ttf` or `.otf` or `.woff`) を用意する.
今回は `myfont.ttf`.

### Step 02

CSS3 の `@font-face` を使って使いたい WebFont を font-family として登録します.
`font-family` にフォント名, src に読み込むフォントデータへのパスを指定します.

```css
@font-face {
    font-family: 'myfont';
    src: url('myfont.ttf');
}
```

### Step 03

WebFont を使いたい要素に `@font-face` で登録したフォントを指定します.

```css
body {
    font-family: 'myfont';
}
```

これで Web Font が使えます.

## Example

#### [Demo](http://jsdo.it/phi/yuuf)
#### [Download](http://jsdo.it/phi/yuuf/download)

## Reference

- [@font-face - CSS | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/@font-face)
- [CSS Fonts Module Level 3](http://www.w3.org/TR/css3-fonts/)
iOSアプリにFlurryの導入（備忘）

アプリ向け解析ツールFlurryの導入
http://www.flurry.com

ライブラリを追加し忘れたりして時間を取られたので、備忘のために記録。
バージョンは4.3.0。

プロジェクトに以下2つを追加。

* Flurry.h
* libFlurry_4.3.0.a


ライブラリも追加。

* SystemConfiguration.framework
* Security.framework
* AdSupport.framework


あとはAppDelegateにインポートしたりコード書いたりして実装。
以上。


参照元の公式リファレンス
http://support.flurry.com/index.php?title=Analytics/GettingStarted
より良いテストケースを書きたい

最近業務でテストケースを書くことが増えました。

「テスター」としてテストケースを書くようになってから、
「プログラマー」だったときに、いかに適当に書いていたかを痛感しました。

## シチュエーション

メール送信ツールに「下書き保存」機能を追加した。
さあ、テストじゃ、テストじゃ。

## ダメな例

【手順】
 メールの文章を入力し、下書き保存ボタンを押す

【結果】
編集した内容が、正常に上書き保存される


ひどいときはこんな感じに書いていたかと、、、
以下、簡単に問題点を挙げてみます。

## 問題点

* 下書き保存の方法は「ボタンを押す」だけではないかもしれない
* 「正常」の基準が曖昧
* 編集内容の指定が曖昧

もしかしたら、「Ctrl + sで保存できるようにしている」という機能もあるかもしれません。
もしかしたら、「ファイルを添付して、Ctrl + s で保存後、再度開くと添付ファイルが消えている」といった
バグが有るかもしれません。

上記のようなテストケースだと、上記のようなバグが後から発覚した場合、
そのテストを本当に実施できていたかどうか、追跡できない可能性があります。

ということで、問題点を踏まえて、再度テストケースを考えてみます。

## テストケース

【手順】
1. ファイルのサイズが0より大きいテキストファイルを1つ添付する
2. Ctrl + s を押す
3. 上書き保存が完了したらファイルを閉じる
4 .メールを開き、添付ファイルを確認する

【結果】
・添付ファイルのファイル名が、上書き保存を行う前と同じ名前である
・添付ファイルの内容が、上書き保存を行う前と同じである


という感じでしょうか。
（自分もまだまだ勉強中なので、少し不安ですが、、、）

## まとめ

* 手順と結果を具体的に記述する
* 正しい手順にとらわれず、あらゆるケースを想定する
Macのネットワーク環境に合わせてHTTP_PROXYを切り替えるシェルスクリプト

![s.png](https://qiita-image-store.s3.amazonaws.com/0/19622/70777ef9-5b76-909f-b6ab-d8e41368a835.png)

大学のネットワークに接続している時だけプロキシを設定したい時がある。

Macのネットワーク環境は`networksetup -getcurrentlocation`コマンドで取得することが出来るので、 
__.zshrc__ 辺りに以下のシェルスクリプトを書いておけばTerminalで新しいタブを開いた時に自動でプロキシを設定してくれるはずである。

```zsh
proxy=proxy.hogehoge.ac.jp
switch_trigger=大学

if [ "`networksetup -getcurrentlocation`" = "$switch_trigger" ]; then
  export HTTP_PROXY=$proxy
  export FTP_PROXY=$proxy
  ...以下省略
fi
```

## gitのプロキシ設定も書き換えたい

gitはhttp_proxyを見てくれないのでリモートリポジトリにpush出来なくて困ることがあった。そこでhttp_proxyと一緒にgitのプロキシ設定も書き換えるようにしたい。

gitのプロキシは以下のコマンドで設定出来る。`--global`の代わりに`--system`を使っても良い。

```zsh
git config --global http.proxy $proxy
git config --global https.proxy $proxy
git config --global url."https://".insteadOf git://
```

逆にgit configから設定を削除したい場合は`git config --gobal --unset {item}`を使えば良いので、先ほどのコマンドと組み合わせると最終的なコードは以下のようになる。

```zsh:switch_proxy.sh
proxy=proxy.hogehoge.ac.jp:80
switch_trigger=大学

function set_proxy() {
  export http_proxy=$proxy
  export HTTP_PROXY=$proxy
  export ftp_proxy=$proxy
  export FTP_PROXY=$proxy
  export all_proxy=$proxy
  export ALL_PROXY=$proxy
  export https_proxy=$proxy
  export HTTPS_PROXY=$proxy

  git config --global http.proxy $proxy
  git config --global https.proxy $proxy
  git config --global url."https://".insteadOf git://
}

function unset_proxy() {
  unset http_proxy
  unset HTTP_PROXY
  unset ftp_proxy
  unset FTP_PROXY
  unset all_proxy
  unset ALL_PROXY
  unset https_proxy
  unset HTTPS_PROXY

  git config --global --unset http.proxy
  git config --global --unset https.proxy
  git config --global --unset url."https://".insteadOf
}

if [ "`networksetup -getcurrentlocation`" = "$switch_trigger" ]; then
  echo "Switch to proxy for university network"
  set_proxy
else
  unset_proxy
fi
```

このコードを __.zshrc__ に保存して適当なターミナルで新しいセッションを開くと、`switch_trigger`で指定されたネットワーク環境下にいる時だけプロキシを通すことが出来る。
既に開いているセッションに対してプロキシを適用する方法がわからなかったが、
コードを __~/.switch_proxy__ 辺りに置いて、

```zsh:~/.zshrc
alias nswitch=~/.switch_proxy
```

と`.zshrc`に書いておくことで、`nswitch`とタイプしてプロキシを切り替えられるようになる。
brewで特定のバージョンをインストール

## まずは古いものをアンインストール
```bash
$ brew uninstall foobar
```

## foobarにどのバージョンがあるか調べる
```bash
$ brew versions foobar
```

## 下記ディレクトリに移動
```bash
$ cd /usr/local/
```

## brew versionsで出てきたものでチェックアウト
```bash
$ git checkout ***************
```

## インストール
```bash
$ brew install foobar
```
iodocsで便利なREST APIドキュメントを作成する


wikiとかでドキュメントを書くのが面倒で、良いツールを探していたら[iodocs](https://github.com/mashery/iodocs)というnode製ツールを見つけた。

これを使うとドキュメント作成が楽になるだけじゃなく、 **ドキュメント上のformからAPIリクエストを試せて便利っぽい。** 

![iodocs-screen.png](https://qiita-image-store.s3.amazonaws.com/0/7325/b50d4c1d-198c-3529-e4c2-02d0f39a76d3.png "iodocs-screen.png")


普段APIドキュメントを見つつcurlとかでリクエスト送信して試してたのが、全てドキュメント上で完結して良さげ。

## 使い方
[mashery/iodocs](https://github.com/mashery/iodocs)からcloneしてアプリを起動すると、FoursquareやLinkedin APIを叩くサンプルをすぐに試せる。redisが必要なのでserver起動を忘れずに。

```
~/ $ git clone http://github.com/mashery/iodocs.git
~/iodocs $ npm install
~/iodocs $ redis-server &
~/iodocs $ npm start
```

ドキュメントは `public/data/` 下にjson形式で書くようになっていて、新しくドキュメントを追加したい場合は以下のように記述する。

```javascript:my-api.json
{
    "endpoints": [
        {
            "name": "Public API",
            "methods": [
                {
                    "MethodName": "ユーザ情報取得API",
                    "Synopsis": "会員の詳細情報が取れるよ",
                    "HTTPMethod": "GET",
                    "URI": "/user",
                    "RequiresOAuth": "N",
                    "parameters": [
                        {
                            "Name": "user_id",
                            "Required": "Y",
                            "Default": "",
                            "Type": "string",
                            "Description": "会員IDです"
                        }
                    ]
                }
            ]
        },
        {
            "name": "Private API",
            "methods": [
                {
                    "MethodName": "ユーザ設定変更API",
                    "Synopsis": "ユーザの設定情報が見れるよ",
                    "HTTPMethod": "POST",
                    "URI": "/user/setting",
                    "RequiresOAuth": "Y"
                }
            ]
        }
    ]
}
```

あとは `public/data/apiconfig.json` に作成したドキュメントのjsonファイル名と、formからリクエストを投げるAPIサーバの情報を書いておく。

```javascript:apiconfig.jsonに追記
"my-api": {
    "name": "My API",
    "protocol": "http",
    "baseURL": "127.0.0.1",
    "publicPath": "/api/v1",
    "auth": "key",
    "keyParam": "api_key_var_name",
    "headers": {
        "Accept": "application/json"
    }
}
```

あとはnodeを立ち上げるだけ。APIリクエスト用のformもjsonの内容から自動生成してくれる。

ドキュメントを不慣れな記法で書きつつレイアウトやらfontサイズやら考えなくて済むし、APIコールを試す側の手間も省けて便利。
OS XにJenkinsをHomebrewでセットアップする


Jenkinsは [jenkins-ci.org](http://jenkins-ci.org/) からMac OS  X用のインストーラも配布されている。公式のインストーラはシステム、Homebrewの場合はユーザ環境で使うことを想定している。どちらも一長一短あるが特に致命的で回避できない問題はないように思えるのでセットアップが楽なHomebrewを使っている。

## インストール

```bash
brew install jenkins
```

jekinsをhomebrewでアップデートすると起動ファイルも更新されてしまうのでシンボリックリンクを張るのではなくコピーを ``~/Library/LaunchAgents/homebrew.mxcl.jenkins.plist`` に置くため以下を実行する。

```bash
cp -p /usr/local/opt/jenkins/*.plist ~/Library/LaunchAgents
```

## サーバの起動コマンドのカスタマイズ

``~/Library/LaunchAgents/homebrew.mxcl.jenkins.plist`` を編集し、起動時のパラメータを指定する。

起動引数: https://wiki.jenkins-ci.org/display/JENKINS/Starting+and+Accessing+Jenkins


変更例

```xml:~/Library/LaunchAgents/homebrew.mxcl.jenkins.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>Label</key>
    <string>homebrew.mxcl.jenkins</string>
    <key>ProgramArguments</key>
    <array>
      <string>/usr/bin/java</string>
      <string>-Xms512m</string>
      <string>-Xmx1024m</string>
      <string>-XX:MaxPermSize=128m</string>
      <string>-Dfile.encoding=utf-8</string>
      <string>-jar</string>
      <string>/usr/local/opt/jenkins/libexec/jenkins.war</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
  </dict>
</plist>
```


### 文字コードの変更

GitのUTF-8のコメントが化ける場合があるのでエンコードを設定している。

``<string>-Dfile.encoding=utf-8</string>``

### 外部から接続させる場合

外部からアクセスさせるため ``<string>--httpListenAddress=127.0.0.1</string>`` の行を削除している。

### メールサーバの証明書が不完全な場合

社内メールサーバなどでメールサーバの証明書が完全に信頼できない場合でもメールを送信できるように ``<string>-Dmail.smtp.starttls.enable=true</string>`` の行を削除している

※Gmailなどを使う場合は関係なし

### ポートを変える場合

例では入れていないが ``<string>/usr/local/opt/jenkins/libexec/jenkins.war</string>`` の次の行あたりに以下のように追加すると良い。
``<string>--httpPort=80</string>``

### メモリの変更

適当。

```
<string>-Xms512m</string>
<string>-Xmx1024m</string>
<string>-XX:MaxPermSize=128m</string>
```

参考: https://wiki.jenkins-ci.org/display/JENKINS/Builds+failing+with+OutOfMemoryErrors

## 自動起動の設定

以下を実行しておく。

```bash
launchctl load ~/Library/LaunchAgents/homebrew.mxcl.jenkins.plist
```

## 自動起動の解除

```bash
launchctl unload ~/Library/LaunchAgents/homebrew.mxcl.jenkins.plist
```

## launchctlで再起動したり

自動起動が設定済みであれば以下のコマンドを利用できる。

```bash
launchctl stop homebrew.mxcl.jenkins
launchctl start homebrew.mxcl.jenkins
```


## 参考

* Mountain Lion環境への「Jenkins」のインストール手順: http://qiita.com/skinoshita/items/6862b4a6726fc3b24944
* Jenkins を Mac で使う: http://tech.hazi.jp/2012-08/13/
Sinatra + haml + Sass + CoffeeScript + Backbone.js ON heroku のサンプルコード

# 最近の統合的フレームワークって何？

日進月歩のこの世界、少し気を許すとすぐに次のトレンドが来てしまう。
そんな中、恐らく現状（2013/11/05）で、
トレンドに近い統合的フレームワークをご紹介します。

まずは、それぞれのライブラリを説明したのちに、
実際の構築方法をおって説明していきます。

※ ソースはこちら
https://github.com/siluejp/sinatra_start


##heroku
いわゆるサーバを貸してくれるとこ。
RubyをメインにしたPaaSです。誰でも無料で始められます。
最近では、有志のおかげで、Ruby以外にも言語が拡張されて色々できるようになってます。
無料版は一定時間使用していないと、起動時に時間が掛かるなどのデメリットもあります。
あと、クレカ登録しないとadd-onが使えない。

でも、コマンドラインだけで手軽にサーバーが追加できるので重宝させてもらってます。

####Paas
Paasとは、アプリケーションソフトが稼動するためのハードウェアやOSなどの基盤(プラットフォーム)一式を、インターネット上のサービスとして遠隔から利用できるようにしたもの。

##Sinatra
Rubyで作成されたオープンソースのWebアプリケーションフレームワーク
小さく、柔軟性があるプログラミングが可能となるよう意識されている。

※ Railsよりも手軽に始められます。

##haml
HTMLテンプレートエンジン。
少ないコーディングで効率的にHTMLを記述するためのライブラリ。

##Sass
CSS拡張メタ言語。
少ないコーディングで効率的にCSSを記述するためのライブラリ。
変数や入れ子構造でCSSを記述できることが特徴。

拡張フレームワークに、Compassがあり、
これを組み合わせると、ものすごく効率的にCSSが書けます。

※ 対抗馬にlessがありますが、個人的にSassの方が有名と感じたのでこっちを使ってます。

##CoffeeScript
javascriptの拡張言語。
少ないコーディングで効率的にjavascriptを記述するためのライブラリ。

##Backbone.js
javascript向けMVCフレームワーク。
大規模向けで、奇麗にjavascriptを記述することが可能。
ただし、Underscore.jsに依存しています。

####Underscore.js
便利な関数がパッケージされたJavaScriptのライブラリ

##Bootstrap
Bootstrapは、デザインができないエンジニアでも簡単に見た目を整えられるライブラリです。
今回のサンプルコードにはないですが、とても便利なのでおすすめです！

# 構築手順
統合的フレームワークの構築から、サーバの構築、デプロイまで、
順をおって説明していきます。

## Sinatraをインストール

※ 事前にRubyをインストールしてください。

```
mkdir hello
cd hello
```

```rb:main.rb
require 'sinatra'

get '/' do
  "Hello World!"
end
```

```rb:config.ru
require './main'
run Sinatra::Application
```

```rb:Gemfile
source 'https://rubygems.org'
gem 'sinatra'
```

for test localy

```
bundle install
ruby main.rb
# see http://localhost:4567
```

##herokuにデプロイ
事前にgitのインストールと、herokuのユーザ登録をしてください。

```
cd hello
git init
git add .
git commit -m 'first commit'
heroku create
git push heroku master

heroku open # check your app
```

これで、サーバーとWEBアプリケーションの設置が完了です。
続いて、haml・Sass・CoffeeScriptを設置した後に、
Backbone.jsの設置とサンプルコードを記述して行きたいと思います。



第二部へ続くとか続かない！？とか・・・
Ext.factoryでのconfigとclassReference

【メモ】の内容を忘れないためだけに記録

## Ext.factory

factory( config, classReference, [instance], [aliasNamespace] )

### Parameters
* config : Object
The config object to instantiate or update an instance with.
* classReference : String
The class to instantiate from.
* instance : Object (optional)
The instance to update.
* aliasNamespace : String (optional)

## Documentより
以下２つは等価

```js
Ext.factory({ text: 'My Button' }, 'Ext.Button');
Ext.create('Ext.Button', { text: 'My Button' });
```

buttonがすでに作成済みの場合、buttonがconfigの内容で更新される。
(`button.setConfig(config)`が実行される=Modelで使用してもフィールドは更新されない)

```js
var button;
// Button created
button = Ext.factory({ text: 'New Button' }, 'Ext.Button', button);
// Button updated
button = Ext.factory({ text: 'Updated Button' }, 'Ext.Button', button);
```

## 【メモ】configとclassReferenceの関係
configに`xtype`を含む場合classReferenceよりもそのタイプが優先される。
また、buttonが作成済みの場合、button.destroyが内部で実行される。

```js
con = Ext.factory({xtype: 'container', text: 'This is Ext.Container' }, 'Ext.Button', button);
```
CreateJS+iPhone4+iOS7でhitTestが動作しない？

Toolkit for CreateJSで吐き出したものを、iPhone4 + iOS7 で実行したら、タッチが効きませんでした。
なんでだろうと唸りつつ、

```js:CreateJS
createjs.Touch.enable(stage);
```

上記のタッチを有効にする記述もしっかりあるし、どうしてだろうと思って、色々試行錯誤しました。

```js:CreateJS
(lib.mc01 = function(){
  this.frame_0 = function(){
    canvas.addEventListener('touchstart', (function(_self){
      return function(evt){
        var btn = _self.btn;
        point = btn.globalToLocal(stage.mouseX, stage.mouseY);
        console.log(btn.hitTest(point.x, point.y));
      };
    };
  })(this), false);
}).prototype = p = new MovieClip();
```

…物凄く横着して書きましたが、ようはオブジェクト（ボタン）をクリックできているかを
MovieClip.prototype.addEventListener()に頼らずに書いた感じになります。
が、これも動かず。
Safariの個人的に使いづらいリモートデバッグを使って見ていたら、すごい不思議な現象に出会いました。

※下のスクリーンショットは諸事情につき、Windows7のChromeでのモノです

![無題2.png](https://qiita-image-store.s3.amazonaws.com/0/31684/667ebdbb-2de1-27ae-b83b-c7328bb6c757.png)

こんなことが起きているせいで、座標位置が上手く変換されず、hitTest()が、「あたってないよー！」と
falseを返すみたいでした。
起こっていた内容は別な気がしましたが（英語読めないデス。Google先生に頼りました）、まさに

Toolkit for CreateJS + iPhone 4 + iOS 7 = A nightmare
http://forums.adobe.com/message/5750592

な気がしてる今日この頃です。
解決策は……今から考えます！（その問題と格闘している最中）

何かいい案お持ちの方とか、既にぶつかったよーっていう人がいたら嬉しいナ。
Vagrant AWS でavailability_zone は region の後に書く

Vagrant AWS (https://github.com/mitchellh/vagrant-aws) でavailability_zone は region の後に書く

```
    aws.region = "ap-northeast-1"
    aws.availability_zone = "ap-northeast-1b"
```

region = "ap-northeast-1b" と書くとエラーになる。

> vagrantでawsのインスタンスを起動しようとしたときに、getaddrinfo: nodename nor servname provided, or not known (SocketError)と出る件 - Qiita [キータ]  
> http://qiita.com/ise_daisuke/items/394532103c49c6ac980d
ALMiniumをバックアップ、バージョンアップ、リストア

* mysql<->sqliteを切り替えたい場合は[Redmine - alminiumのDBをyaml化してバックアップ - Qiita](http://qiita.com/tukiyo3/items/fe8daabc0be72d76b0b1)

ProxmoxのOpenVZ上でUbuntu13.04 32bit版を動作させてインストールした。
[参考](http://moomindani.wordpress.com/2013/08/03/alminium_verup/)

```bash:データベース
$ mysqldump -uroot alminium > alminium.dump
```

```bash:redmineの添付ファイル
$ cd /opt/alminium/files/
$ sudo tar czf ~/opt_alminium_files.tar.gz .
```

```bash:ソースコードリポジトリ
$ cd /var/opt/alminium/
$ sudo tar czf ~/var_opt_alminium.tar.gz .
```

* [alminiumを再インストール](http://qiita.com/tukiyo/items/53b2fd1c19b809c713f6)する。

```bash:バックアップの復元
$ cd /var/opt/alminium/ && sudo tar xzf ~/var_opt_alminium.tar.gz
$ cd /opt/alminium/files/ && sudo tar xzf ~/opt_alminium_files.tar.gz
$ mysql -uroot alminium < alminium.dump
```

```bash:データベースのマイグレーション
$ cd /opt/alminium
$ sudo rake db:migrate RAILS_ENV="production"
$ sudo rake redmine:plugins:migrate RAILS_ENV=production
$ sudo rake tmp:cache:clear
$ sudo rake tmp:sessions:clear
```

```bash:apache再起動
$ service httpd restart
```

redmineの日本語が文字化けする場合
------------------------------------------

```bash:/etc/mysql/my.cnf
[client]
default-character-set=utf8

[mysqld]
character-set-server=utf8
```

* `活動`ページが文字化けたが、`前`、`次`リンクを押したら文字化けが解決しました。キャッシュかな

## alminiumからRedmine3に添付ファイルを移行

/opt/alminium/files/ の中身を
/usr/src/redmine/files/ にコピー
Yahooアクセス解析を始める際に設定すべき3つのこと

## Yahooアクセス解析について
Webサイトのアクセス解析ソフトといえば、 **Google アナリティクス** がデファクト・スタンダードになりつつあるのですが、10月30日から、Yahooでもフリーのアクセス解析ツールが提供されました。

http://yongshuangchem.com/news/3100/ によると大きな違いは、

1. ユーザー属性分析
2. リアルタイム分析
3. 組織分析
4. 広告コンバージョン分析
5. スマートフォンに最適化

だそうです。

そんなYahooアクセス解析を始める際に設定すべき3つのことをまとめます。なお、基本的なアカウントの取得だとかの準備については、 http://yongshuangchem.com/news/3100/ の記事をご参照ください。


## URLパラメーター
Yahooアクセス解析画面内の右上 **設定** リンクから、 **URLパラメータ** を指定してください。WebサイトをPHPなどで動的に作成しているケースで、URLパラメーターがページを特定するために意味をもっている場合、こちらの設定画面から、意味のあるURLパラメータを指定してください。
WordPressのデフォルトの場合、「p」とか「author_name」といったパラメータを指定するといいかと思います。よく分からない場合は、Webのシステム担当の方などに確認するといいかと思います。

## 除外IPアドレス
自分や、自社内からのアクセスをIPアドレス指定で除外することが可能です。Googleアナリティクスのように正規表現で指定する、といったことはできませんが、テキストエリアに除外したいIPアドレスを羅列するだけで可能です。また、正規表現は使えませんが、前方一致で判断する、ということですので、「xxx.xxx.xxx.」のような指定も可能です。

## 広告出稿用パラメータ設定
デフォルトでは、広告出稿用パラメータは、

- ui_medium
- ui_campaign
- ui_source
- ui_term

となっているようで、Googleアナリティクスの広告出稿用パラメータとは異なっているようです。Googleアナリティクスを併用している場合や、これから併用を考えている場合は、異なる広告出稿用パラメータにすると、後々面倒なことになりそうなので、揃えておくのが賢明かと思います。Googleアナリティクスは設定不可だったと思いますが、Yahooアクセス解析は設定できるようなので、こちらの設定をGoogle アナリティクスに合わせます。同じく右上の設定から **広告出稿用パラメータ設定** にて設定可能です。

パラメータのプリフィックスが **ui** になっているのを **utm** に4つとも変更すれば終わりです。

## 終わりに
Yahooアクセス解析でどんなことができるかについては、今後使ってみて、またレポートを上げてみようかと思います。