OmniAICreator/Qiita-1.07M huggingface dataset:
プログラミング学習方法(入門者向け)

##はじめに
どこかで書いていたので自分用メモ
いずれここぐらいを見ろと新人研修に利用できるとか参考にしろとか言われる程度にはなりたいです。

##プログラムの学習方法
今後記載します。

##ハード環境
デュアルディスプレイ、もしくはワイド画面 ノングレア(非光沢)なディスプレイ
キーボード 打ちやすいもの。自分的には東プレRealforceがお勧め。ただ個人差があるので自分でさわり心地を試したほうがいいかもしれません。
マウス そこそこのならいいかと思います。Microsoftの人間工学採用のにしています。
理由は長時間使うため体に不安がないものがいいと思います。
最近はインターネットで調べることが多いので、デュアルディスプレイ環境がいいかと思います。IDE(統合開発環境)とソースをみたりするのに効率がいいと思います。

##ソフト環境
Windows  or Mac or Linux
自分が得意なものでいいかなとiOSで利用するSwiftとかはもうMac一択しかないと思います。

##学習に必要なものは？
Android開発なら実機は必要かなと思いました。
特にタブレットとスマホ2台、理由は画面サイズが違うことによってレイアウトを分けたいなら。そういうものを利用しないなら1台でもいいと思います。
やりたいことが決まってなければNexusというリファレンス機かな。ハード絡みもほとんどさわれるし

##版
2014/09/18 初版作成
【備忘録】Android学習メニュー(初心者向け)

職業訓練で学んだことの学習成果をまずは箇条書きにして、達成度を測れないかのための備忘録です。
うまくテーブルで作成できていないのでまずは箇条書きにします。
後、まだレベルを揃えていません。

* Activityのライフサイクルが理解できているか
* onClickを4種類で記述できるか
* 無名クラス
* 変数においた無名クラス
* XMLで記述する方法(buttonのみ)
* LinearLayout
* RelatuveLayout
* Widget
* グラフィックを使ってWidgetをカスタマイズできるか
* ListView
* Adapterをつないで接続がわかる
* カスタムビューがわかる
* SQLiteから出力できる
* Intentで画面の遷移ができる
* 画面の縦横をいじってもいじれる
* ListViewの高速化対応できる

(2014/09/18 初版)
【Backbone】インスタンス生成時の引数の取得方法


#####例えば以下のような場合、インスタンス生成時の引数は受け取れません。

```backbone.js
var ViewDemo = Backbone.View.extend({
  defaults: {
     display: 'list'
  },
  initialize: function() {
    this.options = _.extend(this.defaults, this.options);
  },
  render: function() {
    console.log(this.options.display);
  }
})
    
var demo = new ViewDemo();
demo.render(); //list


var demo2 = new ViewDemo({display: 'details'});
demo2.render(); //list
```

#####引数を受け取るにはinitializeで設定する必要があります。

```backbone.js
var ViewDemo = Backbone.View.extend({
  defaults: {
     display: 'list'
  },
  initialize: function(options) { //←追加
    this.options = options || {}; //←追加
    this.options = _.extend(this.defaults, this.options);
  },
  render: function() {
    console.log(this.options.display);
  }
})
    
var demo = new ViewDemo();
demo.render(); //list


var demo2 = new ViewDemo({display: 'details'});
demo2.render(); //details
```
Gitで特定のハンクだけ逆マージする

デグレしてたので、前のリビジョンの特定のハンクだけ逆マージしたかったのだけど、やり方がわからなかったのでテキトーにえいやっとコマンド叩いてみたら出来たのでメモしておくのです。

```bash:Terminal
$ git checkout -p HEAD~ -- file.txt
```

これでハンク毎に「戻す？どうする？」とか聞かれるので（`$ git add -p`と同じやつです）いい感じにyとかnとかsとか押して逆マージしました。
Kernel 3.12.28+にしたら無線LANがつながらなくなった話[Linux]


Kernel 3.12.28+にしたら無線LANを認識しなくなった。

無線LANアダプタを買い替えようとすら思った。

## 環境

* Raspberry pi B+ 512MB
* Raspbian
* Elecom WDC-150SU2M

## 背景

* Kernel 3.12.26+の時に以下を実施した。

http://qiita.com/kompiro/items/da6ae0ca16a7705f21a0

(そもそもネットワークつながってない段階で`sudo rpi-update`ってどうなの？ってところはあったが、有線LAN使いました)

* 必要に迫られて`sudo rpi-update`を2014/9/17に実施したら、Kernelのバージョンが3.12.28+になっていた。

* 再起動したら無線LANアダプタを認識してくれない事象が発生した。

## やったこと

* 再度3.12.26+の時とおなじように設定を行ってみた。

なんか駄目。ドライバが見つかりませんと言われる。。。

* 以下のサイトを発見。どうも似たような人がいるようである。

http://www.raspberrypi.org/forums/viewtopic.php?f=28&t=62371&p=610775

そこで、.koファイルをぶち込んでみる。

```bash
sudo install -p -m 644 8188eu.ko /lib/modules/$(uname -r)/kernel/drivers/net/wireless

sudo insmod /lib/modules/$(uname -r)/kernel/drivers/net/wireless/8188eu.ko

sudo depmod $(uname -r)
```

* うごいたー。
CentOS6でjenkinsを動作させるためのDockerfile


```Dockerfile
FROM centos:centos6

MAINTAINER shotsky

# Install Packages
RUN yum update -y
RUN yum install wget java-1.7.0-openjdk -y
RUN wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/red
hat/jenkins.repo
RUN rpm --import http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key
RUN yum install jenkins -y

EXPOSE 8080
CMD ["java", "-jar", "/usr/lib/jenkins/jenkins.war"]
```

以下のコマンドでイメージ作成

```
docker build -t shotsky/jenkins [Dockerfileのあるパス]
```

以下のコマンドで実行

```
docker run -d -p 8080:8080 shotsky/jenkins
```
ゲストOSからホストOSのIPアドレスを確実に得るにはどうすればいいんだ。みんなの知恵をわけてくれ

ホストOS の ssh 転送をゲストOSからも使いたいんですわ。

で、どうもネットワーク設定が「NAT」の場合はデフォルトゲートウェイがたいていホストOSのIPになっているみたいなので、とりあえず、こんな Lua バッチを書いてみた。一応、期待動作はするんですけどね (Windows7ゲスト on VirtualBox)

```lua:hostip.cmd
::rem:: --[[ vim:set ft=lua:
@lua "%~f0" %1 %2 %3 %4 %5 %6 %7 %8 %9 & exit /b
]]--

function getGateway()
    local ipconfig = io.popen("ipconfig","r")
    for line in ipconfig:lines() do
        local m = line:match("デフォルト.*%s([0-9]+%.[0-9]+%.[0-9]+%.[0-9]+)")
        if m then
            ipconfig:close()
            return m
        end
    end
    ipconfig:close()
end
print(getGateway())
```

```text:実行結果
✏ hostip
10.0.2.2
```

ホストOSのIPアドレスがデフォルトゲートウェイに設定されて、それを検索するのはいいんだけど、これじゃあ、どこでも動くというわけにはいかないよね？

* 検索キーワードが「デフォルト」って日本語はどうなのよ？
* 複数ネットワークアダプタがある時、これでいいの？
* これ、VirtualBox でしか試してないけど、VMware でも動けばなぁ（理由あって、両方併用してる。まだ試せてない）
* できたら、ゲストOSとホストOSを自力で区別したいなぁ（ホストだと 127.0.0.1 を返すようにしたい)

みんなの知恵を分けてくれ！
RSpec::Core::RakeTask.new するときにdescを空にし、 rake -T で表示しない

CI用のタスクとかは普段表示したくないこともあると思う。

`desc` で空文字を指定すればよい。ちなみに `nil` 指定じゃない。

```rb:Rakefile
require 'rspec/core/rake_task'
require 'ci/reporter/rake/rspec'

desc ""
RSpec::Core::RakeTask.new("spec:ci" => "ci:setup:rspec") do |t|
  t.pattern = "spec/**/*_spec.rb"
  t.rspec_opts = "--tag '~no_docker'"
end
```

こんな感じ。
Raspberry PiにNASをマウントする。[Raspberry Pi][Linux]


先日購入したRaspberry PiにはRaspbianがインストールされている。
NASに入っているisoファイルとかを読みたいので、マウント作業。
よく忘れるので、備忘も含め。

RaspbianはDebian系なので、ubuntuと同じようにやってみる。

## cifs-utilsのインストール
```bash
sudo apt-get install cifs-utils
```

既に入ってた。

## ディレクトリの作成
```bash
sudo mkdir /mnt/nas
```

## マウント
```bash
sudo mount -t cifs //192.168.1.XX/share /mnt/nas -o iocharset=utf8
```

あっさりマウント完了。

## 起動時に自動的にマウントするようにする。

起動時に自動的にマウントするためには、`/etc/fstab`に以下のように記述する。
```bash
//192.168.1.XX/share /mnt/nas cifs username=[username],password=[password],iocharset=utf8,rw,uid=1000,gid=1000,defaults 0 0
```
あとは煮るなり焼くなり。
UbuntuでのVPNサーバー構築[Linux]


UbuntuでVPNサーバーを立ち上げたときのメモ。

## 参考

以下のサイトに従う。

http://www.pc-links.com/blog/softether/rc2-setup/

* clientからの接続にはアカウント名に@VPN(HUB名)をつける。
* ubuntuでは自動起動にはsysv-rc-confを使う。

## やりたいこと

普通にVPNサーバー立ち上げるだけならば参考URLで十分なのだが、このままだとVPNサーバー自体にsshで入れない。

そのため、以下を実現するためには追加で設定が必要である。

* VPNサーバー自体にsshで外から入る。

## 現状

* linuxの仕様上無理ぽ

マジか。。。

## 対処法

* 仮想NICを作ってブリッジしてうんたらかんたらするといけるらしい。

http://www.pc-links.com/blog/softether/tap/


*  まずはvpnサーバーのNetwork-managerを削除

http://symfoware.blog68.fc2.com/blog-entry-962.html


* その後

```bash
sudo vim /etc/network/interfaces
```

で以下のように設定する。

```
auto lo
iface lo inet loopback

auto eth0
iface eth0 inet manual

# VPN
auto br0
iface br0 inet static
address 192.168.1.XXX
netmask 255.255.255.0
gateway 192.168.1.X
dns-nameservers 192.168.1.X

bridge_ports eth0
bridge_maxwait 10
```

* VPN管理ツールから仮想HUBをブリッジで作成。(tap-vtap)

* さらに

```bash
sudo vim /etc/init.d/vpnserver 
```

より

```bash
#!/bin/sh
### BEGIN INIT INFO
# Provides:                     vpnserver
# Required-Start:               $local_fs $network
# Required-Stop:                $local_fs $network
# Default-Start:                2 3 4 5
# Default-Stop:                 0 1 6
# Short-Description:            SoftEther VPN 1.0 RC2
# Description:                  Start vpnserver daemon SoftEther VPN 1.0 Server
### END INIT INFO
 
DAEMON=/usr/local/bin/vpnserver/vpnserver
LOCK=/var/lock/vpnserver
 
. /lib/lsb/init-functions
 
test -x $DAEMON || exit 0
 
case "$1" in
start)
sleep 3
log_daemon_msg "Starting SoftEther VPN 1.0 Server" "vpnserver"
$DAEMON start >/dev/null 2>&1
touch $LOCK
log_end_msg 0
sleep 3

tap=tap_vtap
/sbin/brctl addif br0 $tap
 
;;
 
stop)
log_daemon_msg "Stopping SoftEther VPN 1.0 Server" "vpnserver"
$DAEMON stop >/dev/null 2>&1
rm $LOCK
log_end_msg 0
sleep 2
 
;;
 
restart)
$DAEMON stop
sleep 2
 
$DAEMON start
sleep 5
tap=tap_vtap
/sbin/brctl addif br0 $tap
;;
 
status)
    if [ -e $LOCK ]
    then
        echo "vpnserver is running."
    else
        echo "vpnserver is not running."
    fi
;;
*)
 
echo "Usage: $0 {start|stop|restart|status}"
exit 1
esac
exit 0
```

* 最後に再起動

```bash
sudo reboot
```

これでVPNサーバー自体にsshで入ることができる。
Photoshopのassets-generatorを使うの捗る


Photoshop CCでsvg吐き出すのどうやんだろうかと調べたら
[こちら](http://stocker.jp/diary/photoshop-generator-svg/)の記事を見つけた。
ほほー、assets-generatorなんてあんのかーと色々調べると色々面白かったのでメモ

## セットアップ
1. homeディレクトリに`.generator.json`を作成
	- 最初`generator.json`じゃないといけないのかなー、ヤだなーと思っていたけど[調べたら](https://github.com/adobe-photoshop/generator-core/wiki/Generator-Configuration-File-Format)dotfile的な感じでもOKらしい。
	- homesickの管理下に置くと捗る

1. `.generator.json`をこんな感じで下記を記載
	- svgを吐き出したかったのでやったけどしなくても動くかも

 	```json
 	{
    	  "generator-assets":  { 
       	  	"svg-enabled": true,
         	"webp-enabled": true
          }
 	}
 	```
	- ほかにも[こんなオプションが設定可能](https://github.com/adobe-photoshop/generator-assets/wiki/Configuration-Options)

1. **Photoshopを再起動**（重要）

1. Photoshopのメニューから「ファイル」→「生成」→「画像アセット」を選択してチェックを入れる
	- このチェック、起動のたびに押さないといけなそう
1. ファイル名_assetsというディレクトリにもりもり出てくる

## 使い方＆Tips
- 基本的にはレイヤーの名前を`foo.png`のようにすることで画像がぼこぼこ生成される
- グループ化されたレイヤーにつけると、グループがまとまった状態で生成される
- 複数フォーマットほしいときは`foo.png, foo.svg`のようにできて熱い
- `200% foo.png` とすると二倍化された画像が出てきて熱い
	- `100x100 foo.png`なんかも[動くらしい](http://helpx.adobe.com/photoshop/using/generate-assets-layers.html)けど未検証
AnsibleのRoleテンプレート作成スクリプト

使い方はこんな感じ

> ansible-add-role myrole

```bash:ansible-add-role
#!/bin/bash

role_name=$1
main_yml_dirs="tasks handlers vars meta defaults"
dirs="${main_yml_dirs} templates files"

if [ -z $role_name ] ; then
  echo "Usage: $0 role_name"
  exit 1
fi

for dir in ${dirs}
do
  if [ ! -d roles/${role_name}/${dir} ] ; then
    mkdir -p roles/${role_name}/${dir}
    touch roles/${role_name}/${dir}/.gitkeep
    echo "+roles/${role_name}/${dir}"
  fi
done

for dir in ${main_yml_dirs}
do
  if [ ! -f roles/${role_name}/${dir}/main.yml ] ;then
    cat >roles/${role_name}/${dir}/main.yml <<EOF
---

EOF
    echo "+roles/${role_name}/${dir}/main.yml"
  fi
done
```
週次バックアップにて、月の中の週の番号(1〜5)を用い増え続けるバックアップと戦う


```bash:月の中の週の番号を算出
$(expr $(date '+%d') / 7 + 1)
```

1〜5が出る。

日次バックアップであれば`date "+%u"`で週の番号を取得できます。
`date "+%a"`でSun, Mon..


```bash:使用例
#!/bin/sh
set -eu

# WEEKNUM is 1 to 5
WEEKNUM=$(expr $(date '+%d') / 7 + 1)
BACKUPDIR=/mnt/backup.$WEEKNUM

if [ ! -d ${BACKUPDIR} ];then
    echo quit: ${BACKUPDIR} not found!
    exit 1
fi

cd ${BACKUPDIR}
# some backup commands..
rsync -a /some/where/ ${BACKUPDIR}
docker export 5d6a7dba5dd6 > ${BACKUPDIR}/webapp.tar
docker export 1397540732ae > ${BACKUPDIR}/redmine.tar
```
rails4 ajax request for jQuery

## やりたいこと

バックグラウンドがRailsで動いているアプリにてjqplotを使ってグラフ描画を行っているが、リクエスト⇒描画までの流をページ遷移を伴わずに行いたい。

いままではrequest ⇒ コントローラ　⇒　処理したデータ構造を[gon gem](https://github.com/gazay/gon) を使ってjavascriptオブジェクトへ格納し、ページ遷移した先でオブジェクトをデータ加工、jqplot表示用の.jsファイルを起動して描画させていた。

ただ、これではデータ構造のリクエストに時間が掛かるとサーバでタイムアウトを返却したり、動きにちらつきが出てしまうため、改善の余地ありということで実施した。


## 実装方法

まず、ビュー側の実装から。

hrefリンクへajaxリクエストを呼び出す関数callExecuter(); を結びつけておく。

```html:view.html.erb
<a href="javascript:void(0)" onclick="callExecuter();">リンクです</a>

```

ajaxリクエストを実行する関数はこちら

```js:callExecuter()
function callExecuter() {
  var xhr;
  xhr = $.ajax({
    type:'GET',
    dataType: "json",
    url: '各自書き換えてください',
    data: {
      // リクエスト時に渡すパラメータを書く。
    }
  });
  return xhr.done(function(result) {
    console.log( '通信成功！');

    // javascriptオブジェクトへ加工
    var r_obj = JSON.parse(result.homearr);

    // jqplotでグラフ描画
    plotGraphHome(r_obj);

  }).fail(function(result) {
    console.log( '通信失敗！');
  });
}
```

dataTypeをjsonへ指定し、data部分にリクエストに必要なパラメータを書く。通信が成功したら、resultで返却される値をオブジェクトへ加工し、それを引数にしてjqplotグラフ描画関数を呼び出す。

リクエストを受け取るコントローラ部分はこうなる。

```rb:users_controller.rb（抜粋）

@json = p_hash.to_json

render json: { :homearr => @json } and return if request.xhr?

```
p_hashにコントローラ側で加工したデータを入れ、json形式に加工して@json変数へ代入。非同期リクエストの時はjsonファイルを返却するように記述を行う。今回はひとつしか返却しないのであまり意味はないが、複数のjsonファイルを返却にも対応できるようにしている。

リクエストが成功したら、xhr.done()でresultを受け取り、result.homearr と指定すれば返却値を受け取ることができる。それをjavascriptオブジェクトへ加工し、plotGraphHome()でグラフ描画を行っている。

以上。

## 実施までの経緯


### わかりにくいRailsヘルパー

まず、デザイナーとコーダーを今回分けていることが引っ掛かった。デザイナーは当然生htmlを送ってくる。それをいちいちコーダーがRailsヘルパーで書きかえて生成されるhtmlを確認する作業は無駄でしかない。しかもRailsのajax用ヘルパーは、今回は特にわかりにくい。**自分がajax初実装なのでなおさらだ(笑)**。

今回はRailsの参考書にも載っているremote: true や、.js.erbファイルを使う方法では**実施していない**。上に述べたようにgon gem を使ってjavascript上で収集したデータを再加工しているため、javascriptのコードが少々多くなっているからだ。そのまま.js.erbファイルへ持ってくると動きがもっさりするし、コードの分離という観点から見て**なんとなく気持ち悪い**。

さらにRailsでajaxを実現する場合、ググった結果**部分テンプレート**なるものを使い、htmlで明示的に指定したdiv要素へレンダリングをして、```<%= %>```の中でインスタンス変数を展開する方法が紹介されていた。これがあまり宜しくなかった。

jqplotもそうだが、jquery.ui は基本的にhtmlで記述したdiv要素へ処理を行う。部分テンプレートで新たにdiv要素を追加してその中で更にdiv要素へjqplotを描画するのは**ストレス**だった。加えて、既にjavascriptで記載したグラフ描画のロジックをrailsテンプレート用に書き換えるのも無駄な気がするので、できれば既存の.jsファイルには手を加えない方法を採用したかった。

### gon gem の問題

gon gem には gon.watch という機能があり、これでajaxを実装できるのではと思っていたが、どうもうまくゆかなかった。

コードを見てみたが、gon.watch では内部で$.ajax()を実行していた。しかしurlは指定できてもパラメータまで指定できないようだ。そのため、今回の要件を達成できなかった。

### jQuery ajax

結局、リクエストを投げるボタンをトリガーにして$.ajax()を実行し、返り値を.jsファイルに渡してグラフ描画ロジックを実行するのが一番処理の流れがわかりやすかった。gon gem はjavascriptオブジェクトを返すので、コントローラでjsonファイルを生成したあとでjavascriptオブジェクトに加工すれば、既存ロジックへの修正も少なくて済んだ。

あまりRailsっぽくないことをしているようだが、Railsは色々ラップしているので逆にわかりにくくなることもあった。初心者には敷居が高いです。。。
これからrailsを始める人のコードエディタ/IDE選び

ruby/railsを勉強するにあたり、悩んだのが開発環境でした。

Javaの場合Eclipseというデファクトスタンダードがあったのですが、どうやらruby/railsはそうではないらしく。。

##ruby/rails開発環境の主な選択肢
ネットで調べてみると、以下をオススメしていることが多かったです。

#####コードエディタ
* Vim
* Emacs
* Sublime Text

#####統合開発環境(IDE)
* Aptana Studio 3(Eclipseベース)
* RubyMine(有償IDE)

######※参考サイト・書籍

* [Railsの開発に使えるエディタ･IDE+新世代クラウドIDE - SideCI Blog - CIツール「SideCI」の継続的インテグレーションブログ](http://sideci.hatenablog.com/entry/2014/04/15/080000)
* [イマドキ、Ruby on Railsで開発するならエディタはRubyMineだよね？ 6出たよー！ | mah365](http://blog.mah-lab.com/2013/12/09/rubymine)
* [Ruby徹底攻略：書籍案内｜技術評論社](http://gihyo.jp/book/2014/978-4-7741-6534-9)

##Vimは学習・環境構築に時間がかかる
「なになにruby開発者はIDEよりVimが普通？なにそれプロっぽい」と、意気揚々とVimを選択したところ、見事に撃沈。。苦笑<br>
Vimはそれ自体が独特な操作方法のため、学習コストがかかります。<br>
加えて、

* 快適に使うためのカスタマイズ(vimrc)
* プラグイン追加方法(NeoBundleなど)
* プラグインの選定
* 追加したプラグインの利用方法

などが必要で、railsよりむしろVimの勉強に時間割くことになりました。苦笑

##Javaエンジニアなら、まずAptana

元々Javaで開発を行っているのであれば、EclipseベースのAptanaが扱いやすいと思います。
統合開発環境のためインストールするだけで環境が整い、操作方法も大体見当がつくのですぐruby/railsの勉強に入れます。


##いずれはVimmerに
ただしハイレベルプログラマほどVimやEmacsの利用者が多いようです。
理由としては、

* モードという概念により、単純にタイプ数が減りコーディングが速い
* カスタマイズ性が高く、自分好みにセッティング可能
* プラグイン開発が活発で、必要な機能は大体用意されている
* 欲しい機能がなければ、自分で作成可能

使いこなせばこちらの方が開発が捗るようです。

参考：[なぜ、IDEじゃなくてVimを使うか。 - Qiita](http://qiita.com/rbtnn/items/88dcbe60d49db6de8002)

##Aptanaスタート→徐々にVimへ
<b>Aptanaでrailsを一通り勉強→時間がある時に少しずつVimを勉強→徐々にVimに移行</b>

が一番効率いいんじゃないかなと思います。参考になれば幸いです。
（ちなみに現在進行形です。Vimmer目指して奮闘中。）
Leaflet 1.0 情報

https://speakerdeck.com/mourner/future-of-leaflet から、Leaflet 1.0 の内容に関する情報を抜書きしてみる。

- 次のバージョンは 1.0
- 3.5年前の初期リリース以来最大のアップデート
- 10月のいつかリリース（hopefully）
- Leaflet はシンプルさと性能が最優先
- revolution ではなくて evolution
- アニメーションとユーザビリティ
- 小数ズーム
- 弾道パン
- tile loading 改善
- panning innertia 改善
- Mac Safari でのズーム中のタイル間ギャップに関する改善
- iOS Safari でのズームのスムーズ化
- ポップアップフェードアウトのアニメーション
- vectors 2.0
- 同じ地図で SVG と Canvas を使う
- ベクトルはカスタムペーンに置く
- 巨大SVGレイヤの性能改善（追加について最大3倍高速化、2.5（分の一？）まで少ないメモリ消費）
- 巨大Canvasレイヤの性能改善（部分再描画、マウスイベント高速化）
- CanvasレイヤのRetina対応
- MultiPolygonやMultiPolylineの問題を解決（FeatureGroupを継承しない）
- PolylineやPolygonの重心
- TileLayerをGridLayerとTileLayerに分割
- GridLayerは新しいTileLayer.Canvas
- Projection
- ハードコードされた投影ハックを削除（CRSに集約）
- CRSがすべてを定義（タイルのwrap、境界、距離測度等）
- Proj4Leaflet
- すべてのレイヤがLayerを継承（コード削減、一貫性向上、プラグインのためにも良い）
- カスタムなPane管理
- LanLng生成が8倍高速に
- Layer生成が高速に
- FeatureGroup性能向上（イベント伝播機構の改善）
- DOM/Leafletイベントのメモリフットプリントの改善
- obj.offの2倍高速化
- その他バグ修正・改善多数
- 小さく（gzipped版で約32KB、約1KB減量）
- LeafletとMapbox GLの互恵関係（Leaflet GL?）
Sailsの内部のGruntをGulpに置き換える


# Sailsって何？Railsじゃないの？
A, Node.jsではRailsに現状一番近いフレームワーク。開発が活発で、常にトレンドを追い続けてる
ex, REST APIやCLIからのgeneratorなど
(まぁpull-requestの反映も一週間ぐらい待てば誰かが応答してくれる)

# Gruntってあのビルドツールでしょ？
A, そうなんです。実はSailsでは内部でGruntのビルドツールを使って静的なファイル、具体的には`assets`ディレクトリの中身をビルドするのに使用しています。

## 静的ファイルをビルドするって何をやるの？
A, 
CoffeeScriptとかSASS, LESSなどのAlt系のコンパイルや、
Imageの圧縮、JavaScript, CSSの圧縮、結合、
結合時に結合後のファイルのみをincludeするようにHTMLを書き換え
などなどやることは沢山あります。

これらの実装を楽にするために、起動時に内部的に`grunt:build`を実行しています。そのため、コンパイルするファイルが多すぎると、起動時から少し立たないと静的ファイルが落ちてこないこともよくあります。
原因はGruntの動作の遅さがあり、Gulpではそんな事は起こらないであろうと考えた。

## さっそく置き換えよう
その前に、Sails v0.10からSails-generatorという機能が実装されました。
皆さんも使ったことがあるであろう、`sails new app`コマンドは内部的にsails-generatorを使用してひな形を生成しているものでした。
それが自由に書き換え可能になったため、最大限利用しようと思います。

## How to
まずは必要なモジュールを入れます。
node.js npm sailsが導入前提です。

```ShellScript
$ npm install -g gulp sails-generate-backend-gulp sails-generate-gulpfile sails-generate-frontend-gulp sails-generate-new-gulp
```

完了したら、次に`~/.sailsrc`がなければ作成して、編集します。

```
$ vim ~/.sailsrc
```

```JSON:~/.sailsrc
{
  "generators": {
    "modules": {
      "new": "sails-generate-new-gulp",
      "frontend": "sails-generate-frontend-gulp",
      "backend": "sails-generate-backend-gulp",
      "gruntfile": "sails-generate-gulpfile"
    }
  }
}
```

そうです。勘の良い方は既に気づいているかもしれませんが、`sails new`した時に内部的に呼ばれるgrunt fileを作るgeneratorを差し替えています。
後はいつもの様に実行するだけです。
Gulpの実際のコードは`tasks`に入っています。タスクごとに分割されているため、読みやすいとは思います。
SailsのX-Powered-Byを書き換える


サイトにアクセスしているだけでは気づきませんが、HeaderにしっかりとSailsを使っているぜ！と主張なさっているヘッダーが埋め込まれています。

```
X-Powered-By	Sails <sailsjs.org>
```
これではせっかく作ったサイトもSailsが作ったみたいになってます。不愉快です。

Sailsのソースコードを見てみましょう。ワードで検索をかけた所、どうやらmiddlewareのdefault値の所に実装されているようでした。

```JavaScript:default.js
poweredBy: function xPoweredBy(req, res, next) {
  res.header('X-Powered-By', 'Sails <sailsjs.org>');
  next();
}
```
御存知の通り、Sailsのmiddlewareはconfigから自由に継承することができます。

## Sails v0.9以下の人
```coffeeScript:config/express.coffee
module.exports.express =
  middleware:
    poweredBy: (req, res, next)->
      res.header 'X-Powered-By', 'PHP/4.1.0'
      next()
```

## Sails v0.10以降の人
```coffeeScript:config/http.coffee
module.exports.http =
  middleware:
    poweredBy: (req, res, next)->
      res.header 'X-Powered-By', 'PHP/4.1.0'
      next()
```

PHP〜な奴を好きな値に変えれば幸せになります。
ヘッダーを見て脆弱性を突く人が沢山いるので、これを応用してクラッカーを欺きましょう。
また、そもそも`X-Powered-By`自体を無効化したいなら、

```
res.removeHeader "x-powered-by"
```
を書いてみると良いかもしれません。
プログラミング未経験者がサーバーを触らずにwebサービスを作る前に知っておくと役に立つかもしれない4つのリンク

　こんにちは、[@_sgtn](http://twitter.com/_sgtn)です。プログラミング難しいですよね、わかります。
　何しろ僕も22歳からコードを書き始めたのでコンプレックス感じてます。でも、作りたいものへの執念があれば十分です。今日はその足しになる道具を紹介します。

　[milkcocoa](https://mlkcca.com)って知ってますか？なんかサーバーを契約しなくてもサービスを作れるらしいし、覚える言語はJavaScriptとHTML/CSSだけで良いらしいですよ？

　というわけで、今日は未経験者編です。まったくコードが書けなくても大丈夫。まずは「サイトを作る」というのがどういうことか見てみましょう。

##[HTML+CSS+JS入門の入門](http://www.slideshare.net/unraki/web-study-html-css-js-20121116-15219431)
　HTMLなんて小学校で書いただけですという非エンジニアの方は、まずはここから始めると良いです。

　最低限覚えておけば便利な単語とか、どういうときにHTML/CSS/JavaScriptを使うかという話を簡単に説明しているのでここで全体像を掴みましょう。
　この業界は若くて優秀な人がたくさんいますが、人と比べるのではなく自分が作りたいものだけを一生懸命考えるのが、楽しむコツです。

##[ドットインストール:HTML入門](http://dotinstall.com/lessons/basic_html_v2)
　3分程度の動画がトピック毎に並んでいて、巻き戻しながら全部真似すると中々基礎力がついてくるスグレモノです。
　管理人の百式さんに感謝しながら無料で使い倒しましょう。気に入ったら**プレミアム会員**になってさしあげましょう。

##[ドットインストール:CSS入門](http://dotinstall.com/lessons/basic_css3)
　既に上記の記事を読んでいるならお分かりでしょう。webサイトのお化粧です。
　知ってますか、ボタンに陰影をつけるだけで一気にオシャレになるんですよ。
　**全部完璧にできなくても良い**です。得意なことから少しずつやってみましょう。

##[jsFiddle](http://jsfiddle.net/)
　ドットインストールでエディタ（メモ帳）の存在を学んだかもしれません。jsFiddleはより便利なメモ帳です。
　HTMLを書いて**三角ボタンを押すと結果がすぐに分かります**。CSSを足してデザインの変化を確認したりしてみましょう。これからしばらく学習の共になってくれるはずです。


# まとめ

　こうやって記事を並べ立てると、「こんなの無理だ！」って思ってしまうかもしれませんね。
　そんなときはコードのことなんか一旦忘れてしまいましょう。自分がどうして何かを作りたいと思ったのか、気持ちの一番熱い部分を思い出しましょう。
　ロードマップに従ってなぞるんじゃなくて、欲しいからなんとかして作るのが最善の学習法です。最大限楽しめるやり方でがんばりましょう！
[iOS] CloudKit Storageを使ってファイルを配信する


CloudKitを使ってPublic Dataなファイルをアプリに配信してみる。

(1) プロジェクト設定で、Project->CapabilitiesのiCloudをONに。

(2) [iCloud Dashboard](https://icloud.developer.apple.com/dashboard/)で、`Record Type`を作る。名前などはなんでもいいが、Attribute Type=Assetのフィールドをひとつ作る。フィールド名もなんでもいいが、ここでは`file`とする。

(3) Public Data->Dafault Zoneで上記で作ったRecord Typeのレコードを作成する。`file`フィールドにファイルをアップロードする。レコードのIDをコピーしておく。

(4) アプリで上記のレコードをダウンロードする。

普通に書くとこんな感じ。"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"の部分は(3)でコピーしたレコードIDに置き換える。

```
@import CloudKit; 
```

```
CKContainer *defaultContainer =[CKContainer defaultContainer];
CKDatabase *publicDatabase = [defaultContainer publicCloudDatabase];
CKRecordID *wellKnownID = [[CKRecordID alloc] initWithRecordName:@"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"];
    
[publicDatabase fetchRecordWithID:wellKnownID
          completionHandler:^(CKRecord *fetchedParty, NSError *error) {
	NSLog(@"erorr : %@", error);                     
   CKAsset *asset = fetchedParty[@"file"];

   // asset.fileURL.pathにファイルがダウンロードされてる
   NSLog(@"%@", asset.fileURL.path);                        
}];
```

上記のコードだと優先度低で実行される。優先度を上げたければ、`CKFetchRecordsOperation`を使えばいい。

```
CKFetchRecordsOperation * op = [[CKFetchRecordsOperation alloc] initWithRecordIDs:@[wellKnownID]];
op.queuePriority = NSOperationQueuePriorityVeryHigh;
op.perRecordProgressBlock = ^(CKRecordID * recordId, double progress) {
        NSLog(@"progress : %lf", progress);
};
op.perRecordCompletionBlock = ^(CKRecord *fetchedParty, CKRecordID * recordId,  NSError *error) {
	NSLog(@"erorr : %@", error);                      
	CKAsset *asset = fetchedParty[@"file"];
	NSLog(@"%@", asset.fileURL.path);
};
    
[publicDatabase addOperation:op];
```

## 制限など

https://developer.apple.com/icloud/documentation/cloudkit-storage/

Start with:
- Storage
- 5GB for assets
- 50MB for database

Data Transfer
- 25MB/day for assets
- 250KB/day for database

Grow with every user:
 - Storage
    -- 100MB for assets
    -- 1MB for database
 - Data Transfer
  -- 0.5MB/user for assets
  -- 5KB/user for database

Free up to:
 - Storage
-- 1PB for assets
-- 10TB for database

Data Transfer
 - 5TB/day for assets
 - 50GB/day for database
IntelliJ IDEAを使ってGAE/GoのHelloWorldする

# はじめに
IntelliJ IDEAでGoogleAppEngineのプロジェクトを作成して、GAE/Goをローカル環境でHello Worldする手順メモです。

## 環境
- Go（version go1.3.1 darwin/amd64）
- IntelliJ IDEA （13.1.4）
- Go language support plugin（0.9.16-dev）
- Go App Engine （1.9.10）

## 前提条件
上記環境の導入手順は省略。以下の参考URLを元にしたら大体揃います。

- [Google Compute Engine を使うための準備（Google Cloud SDK インストール - Linux &amp;amp; OS X 編）](http://qiita.com/yuko/items/aaac6ea9536cd529106f)
- [Google App Engine/GoのアプリをIntelliJ IDEAを使って開発する環境を構築する方法](http://qiita.com/grapswiz/items/fac71cadc6616317bb70)

# HelloWorldまでの手順

## プロジェクト作成

Go App Engineを選択して`Next`を押す。

![スクリーンショット 2014-09-18 3.05.56.png](https://qiita-image-store.s3.amazonaws.com/0/40887/9ab3fe54-f95a-9279-1af2-110470b2d00e.png)

適当なプロジェクト名をつけて`Finish`を押す。

とりあえず`gaehoge`にしました。

![スクリーンショット 2014-09-18 3.06.07.png](https://qiita-image-store.s3.amazonaws.com/0/40887/7e84ce63-afef-dd90-8224-3b7f3edcd4cb.png)

メニューの`File` -> `Projects Structute...`を選択する。

![スクリーンショット 2014-09-18 3.26.16.png](https://qiita-image-store.s3.amazonaws.com/0/40887/c7f67783-69a2-d096-a14e-4aa09db826d7.png)

SDKsを選んで`+`を押して、`Go AppEngine SDK`を追加する。

PATHは、自分の環境だとこちらでした。
`/Users/kyokomi/google-cloud-sdk/platform/google_appengine`

![スクリーンショット 2014-09-18 2.34.22.png](https://qiita-image-store.s3.amazonaws.com/0/40887/fb6c3d0c-bc49-f611-855c-46b044798820.png)

Projectを選んでProject SDK:に先ほど追加した`Go App Engine`を選択する。

![スクリーンショット 2014-09-18 2.47.22.png](https://qiita-image-store.s3.amazonaws.com/0/40887/8eea1c4d-9305-459e-e146-4f6ad28b40f8.png)

## Run Configurationsの作成

Edit Configurations...を選択する。

![スクリーンショット 2014-09-18 2.48.15.png](https://qiita-image-store.s3.amazonaws.com/0/40887/5765cd39-20c1-8ca2-e544-525b9e11c7a2.png)

`+`を押して、`Go Local AppEngine Server`を選択する。

![スクリーンショット 2014-09-18 2.48.24.png](https://qiita-image-store.s3.amazonaws.com/0/40887/1c178f92-28db-4c55-cadc-7bf2e3064281.png)

Nameを適当に決めて`OK`を押す。

とりあえずデフォルトのままで問題ないです。

![スクリーンショット 2014-09-18 2.48.34.png](https://qiita-image-store.s3.amazonaws.com/0/40887/67f83168-7fff-686f-3934-b8106197efb7.png)

## 実行する

以下の、緑色の三角ボタンを押す。

![スクリーンショット 2014-09-18 3.08.12.png](https://qiita-image-store.s3.amazonaws.com/0/40887/75cd4634-f70d-33ad-4fca-29b43cb70697.png)

以下のようなコンソールログが出たら成功。

![スクリーンショット 2014-09-18 2.48.52.png](https://qiita-image-store.s3.amazonaws.com/0/40887/4a228667-ccc2-f7b8-6efb-113613115a50.png)

http://localhost:8000 をブラウザで開くとdev画面が出てきます。

![スクリーンショット 2014-09-18 3.10.12.png](https://qiita-image-store.s3.amazonaws.com/0/40887/15bda53b-2185-2f72-566b-4c168ea1e785.png)

上記devページのdefaultってリンクを押すとHelloWorld画面に遷移します。

![スクリーンショット 2014-09-18 3.10.44.png](https://qiita-image-store.s3.amazonaws.com/0/40887/d729597f-f6a8-8870-5d75-98f5fd01178a.png)

とりあえずこれでローカル開発環境の完成です。
シェル上で🍣🍣（Unicode絵文字）を表示させる

# フォントインストール

> 普段使ってるシェル環境に?などのUnicode絵文字を貼り付けてみてください。
> 普通に表示されるようならこの工程は不要です。

[Symbola](http://users.teilar.gr/~g1951d/)や[NotoFonts](https://www.google.com/get/noto/#emoji-qaae)などの絵文字を表示可能なフォント[^1]が各リンク先にありますので、
それをインストールしてやります。

[^1]: https://qiita.com/polamjag/items/7295a15fca6a9eeb5d84


```shell-session:ttfインストール(Ubuntu)
mkdir ~/.fonts && cd ~/.fonts
wget http://users.teilar.gr/~g1951d/Symbola.zip
unzip Symbola.zip && rm Symbola.zip
```

次に、ターミナルエミュレータを開き、
用いるフォントを(この場合Symbolaに)変更すれば大丈夫です。
https://thomashunter.name/blog/enable-emoji-fonts-on-debian-ubuntu-mint-linux/

# Unicode絵文字を入力

## Unicodeを用いる
http://www.fileformat.info/info/emoji/list.htm
まず上のサイトなどで、表示したいEmoji(Unicode絵文字)を探して、
右に書いてある`U+1F479`(japanese_ogre:なまはげ)などのコードを覚えます

![Screenshot from 2014-09-18 02:20:25.png](https://qiita-image-store.s3.amazonaws.com/0/53766/1bef3fef-cdd7-1f8d-a3ec-88ee23ea4319.png)

![Screenshot from 2014-09-18 02:25:45.png](https://qiita-image-store.s3.amazonaws.com/0/53766/8d6ef0e3-a76d-7910-3f3e-e34753cbcb73.png)

![Screenshot from 2014-09-18 02:26:02.png](https://qiita-image-store.s3.amazonaws.com/0/53766/28a38e5e-1320-36e8-1be2-8868015e8aed.png)

そして、そのコードの`U+`部を`\U`として、`echo -e ""`の中に放り込んでやれば
どうやらシェル上で表示されるようです。

```shell-session:なまはげ?と天狗?を表示
echo -e "\U1f479 \U1f47a"
```

弄っていると`\u`はその後4桁、`\U`はその後5桁について認識するようです。
今回の絵文字たちは5桁のUnicodeになるので大文字の`\U`を用いました。


## mozcを用いる
更に簡単な入力方法としてIMEのMozcを用いるというのがあります。

プロパティを開いて、`Unicode 6 絵文字変換`のチェックボックスをオンにしてやるだけで、
`すし→?`のような変換が出来るようになります。


![Screenshot from 2014-09-18 01:57:27.png](https://qiita-image-store.s3.amazonaws.com/0/53766/fa39f726-6e59-0dd5-e1b1-9b99e79bb697.png)

![Screenshot from 2014-09-18 01:57:54.png](https://qiita-image-store.s3.amazonaws.com/0/53766/c9080360-b42e-fc68-eec5-276b7914a42b.png)

http://mlny.info/2013/09/mozc-unicode/

## その他

他の表示のさせ方は
http://stackoverflow.com/questions/602912/how-do-you-echo-a-4-digit-unicode-character-in-bash
を参照してください。

vim上やシェル上でUnicodeを直接打ち込む入力もできますが、
?など5桁のUnicodeについては不明だったので省略しました。
最速 PowerShell

# 最速 PowerShell
PowerShell を最速で起動するための方法です

## 環境
* Windows 7, 2008R2


# 方法
## 通常起動
1. `Windows` キー押下
2. `PowerShell` を決まり字だけ入力※
3. Enter キー押下

## 管理者権限で起動
1. `Windows` キー押下
2. `PowerShell` を決まり字だけ入力
3. **Ctrl + Shift + Enter** キー押下
4. UAC ダイアログが出たら `Alt + y` 押下


# 補足説明

## 検索からの立ち上げ
* 特にカスタマイズ無しですぐ使える
* 通常/管理者権限の選択が容易

理由はほぼこれに尽きます。


## 決まり字
ここで使用している「プログラムとファイルの検索」では、インクリメンタルサーチが行われます
短すぎると環境によっては目的と違うモノが上に来たりするのですが、やはり入力文字数は短い方が楽です。

決まり字は、各環境で差異があります。
実際に PowerShell ばかり使っている環境では Pow くらいで確実に PowerShell が一番上に来ています。

よくある環境としては… やはり PowerPoint とか衝突しやすいですので
`PowerS` あたりで確定できることが多いでしょうか。


今書いてて気づいたんですが、｀PowerShell ISE`  もよく使う、という人は不便かもしれないですねこれ…



## 遅いよ？

### Q
* (特に初回) 起動に時間がかかるよ？
* cmd の方が早くね？

### A
PowerShell と他を比べての最速ではないです。
特に初回起動、.NET なので時間がかかるのは仕方ありません
PowerShell の起動方法の中で (**私にとって**) 最速・便利なものです。

ngen を使って PowerShell 自体を高速起動できるようなカスタマイズがあるらしいですが、まだ手出ししてません…

## 「名前を指定して実行」ではない
Windows＋R の「名前を指定して実行」→ `PowerShell` からの起動の場合、ちょっと違う横幅が狭くて黒い画面のコンソールが立ち上がります。

なんだろうコレ…


* 実行ファイルはどうやら同じ `C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe`
* 機能的にも同じ？ tab 補完やコマンドも違いはなさげ
* 画面幅(文字数120 vs 80)
* 背景色(紺 vs 黒)

もしや、違いはレイアウトだけ？
起動時にプロファイルが指定可能で、呼び出し方で違う設定が反映されてる…とか？
N個のActiveRecordオブジェクトのそれぞれのassociationのCOUNTを出す方法4つの比較

N個ActiveRecordのオブジェクト(モデルA)があったとして、それらが持つassociation(モデルB)のデータは要らずcountだけ表示したいとする。
その際、以下のような4つの手が思いつく。

- AのテーブルにBの数をキャッシュするカラムを追加し、それをSELECTする
  - `belongs_to`の`counter_cache`オプション
- N回BのCOUNTクエリを走らせる
  - 普通にやるとこうなる
- `LEFT JOIN`と`GROUP BY A.id`で`B.id`をCOUNTする
  - がんばってクエリを1回にするとこうなる
- N個の`A.id`から`B.a_id`をpluckしてきて各idごとの個数をとる
  - これをやる方法がないので作った: [k0kubun/activerecord-has\_count](https://github.com/k0kubun/activerecord-has_count)
  - count専用のhas\_count associationを生やし、外部キーをpluckする専用のpreloaderを使うことができる
  - 作ったばかりでいまのところ最新のRailsでしかテストしてないので注意

カラムを好きに増やせる状況では`counter_cache`を使えば良いが、問題はそうでない場合に残り3つのどれを選択すべきか、である。

## ベンチをとる

「推測するな、計測せよ」というわけで、実際にベンチをとってみた。
DBはMySQLを使い、以下のコードでベンチをとった。

```ruby
TWEET_COUNT = 5   # N個のレコード
REPLY_COUNT = 100 # COUNTしたい数

TWEET_COUNT.times do
  tweet = Tweet.create(replies_count_cache: 0)

  replies = REPLY_COUNT.times.map do
    Reply.create(tweet: tweet)
  end
end

Benchmark.bm do |bench|
  bench.report("counter_cache") do
    Tweet.first(TWEET_COUNT).map{ |t| t.replies_count_cache }
  end

  bench.report("N+1 COUNT query") do
    Tweet.first(TWEET_COUNT).map{ |t| t.replies.count }
  end

  bench.report("LEFT JOIN") do
    # 無駄にオブジェクト作りたくないのでincludesやeager_loadのLEFT JOINに頼らない
    tweets = Tweet.joins('LEFT JOIN replies ON tweets.id = replies.tweet_id').
      select('tweets.*, COUNT(replies.id) AS replies_count').
      group('tweets.id').first(TWEET_COUNT).
      map{ |t| t.replies_count }
  end

  bench.report("pluck foreign key") do
    # replies_count は activerecord-has_count gem 独自のhas_countというassociationで、
    # preloadするとActiveRecord内部で外部キーをpluckする
    Tweet.preload(:replies_count).first(TWEET_COUNT).map{ |t| t.replies_count }
  end
end
```

いろいろ省略してるけど要点は伝わったと思う。

## 結果

目的は`counter_cache`以外の3つの方法を比較することだが、参考までに`counter_cache`の結果も並べる。

**N = レコードの個数** `TWEET_COUNT`
**C = COUNT対象の数** `REPLY_COUNT`

とすると、

| N / C              |  5 / 10    |  5 / 100   |  5 / 1000  | 10 / 10000 | 1000 / 5   |
|:-------------------|:-----------|:-----------|:-----------|:-----------|:-----------|
| counter\_cache(参考)| 0.002101  |  0.001904  |  0.002094  |  0.010339  |  0.064779  |
| N+1 COUNT query    |  0.008318  |  0.007874  |  0.009034  |**0.039144**|  0.554877  |
| LEFT JOIN          |  0.004635  |  0.005358  |**0.006857**|  0.056636  |  0.497913  |
| pluck foreign key  |**0.002272**|**0.004111**|  0.023250  |  0.616233  |**0.371234**|

となった。

## どの方法を使うべきか

場合によって最速の方法が変わる結果となった。  
傾向としては、以下のようなことがわかる。

- 当たり前だけど**counter\_cacheはいつでも速い**
- COUNT対象が **100オーダー以下** の場合、 **外部キーをpluckする**のが最速
  - クエリ効率が良く、数が小さければRubyでやる処理が少ないので速い
- COUNT対象が **1000オーダー** の場合、**LEFT JOINする**のが最速
  - たいていの場合無難な速さが出る
- COUNT対象が **10000オーダー以上**の場合、**COUNTクエリをN回走らせる**のが最速
  - JOINコストが大きくなり、COUNTしまくるほうが速くなる
  - あんまこういうケースなさそう

## 結論

カラムを追加しても問題ないときはcounter\_cacheを使う。
そうでなければ、COUNT対象があまり多くないときは[activerecord-has\_count](https://github.com/k0kubun/activerecord-has_count)を使い、ある程度スケールしてきたらLEFT JOINを行うのが良い。
【Linux】Apache のインストール

## パッケージインストール

```bash

# 確認
$ yum list installed | grep httpd
httpd.x86_64            2.2.15-31.el6.centos
httpd-devel.x86_64      2.2.15-31.el6.centos
httpd-tools.x86_64      2.2.15-31.el6.centos

# 上記のパッケージが無ければインストール
$ sudo yum install httpd httpd-devel
```

## httpd.conf の設定

```bash
# バックアップ
$ sudo cp /etc/httpd/conf/httpd.conf /etc/httpd/conf/httpd.conf.org

# 編集
$ sudo vim /etc/httpd/conf/httpd.conf

262行目
ServerAdmin メールアドレス # エラーが起こった時にApacheがこの宛先に送信する

# シンタックス確認
$ sudo apachectl configtest
```

## Apache起動

```bash
# 自動起動をON
$ sudo chkconfig httpd on

# 起動
$ sudo service httpd start

# 起動確認
$ chkconfig --list httpd
httpd  0:off  1:off  2:on  3:on  4:on  5:on  6:off
Windows Server 2012 に.NETの3.5インストールする時にエラーがでる

Windows Serverを単体で設定する時に、.NETをインストールしようとすると「ソースファイルが見つかりません」というエラーがでて追加できない。
インターネットに繋げるなら、Windows Updateで可能だけど、クローズドなネットワークで設定する場合、インストールメディアを使って追加することが出来る。

 1. WindowsServerのインストールメディアをマウントしておく。
 2. サーバーマネージャーから[役割と機能の追加]を選択。
 3. インストールの種類、サーバーの選択、サーバーの役割はデフォルトのまま[次へ]をクリック。
 4. [機能]ページで[.NET Framework 3.5]のチェックボックスにチェックし、[次へ]をクリック。
 5. [確認]ページで[代替ソースパスの指定]をクリック。
 6. パスの所にマウントしたメディアの<ドライブ>￥source￥sxs￥を指定してOKをクリック。
 7. インストールを開始。問題なければ[正常に完了しました]と表示される。

MSの公式サポート
http://support.microsoft.com/kb/2734782/ja


ドライブレター変更した場合に変更後のメディアパス(DVDドライブ)を指定すると失敗した。
OS再起動しても直らなくて、OSを再インストールした。
再インストール後に同じようにドライブレターを変更した状態で上記手順で追加するとできた。
あとはモジュールをダウンロードしてきて追加する方法もあるらしい。

ドライブレター変更時の影響がどこまであったのか不明。
Growth Hack勉強会に行ってきました

##株式会社Open Network Labの主催する、Growth Hack勉強会に行ってきました。##

勉強会のタイトルは、2014 Y-Combinator、Disney Accelerator出身のTraction社KenZi氏が語る、「グロース」と「トラクション」の違いとは？というもので、KenZiさんの貴重なお話が聞けました。

Traction社は、企業のキャンペーンのためのマーケティングスペシャリストを探すことのできるマーケットプレイスを提供しており、企業は今までより効果の高いマーケティング施策を行うことができます。

##内容##

まず始めに、referralの仕組みが無い状態で、プレスリリース等の獲得施策を大々的にうっても意味が無いということでした。何もしなくてもユーザがユーザを紹介するような仕組みができて初めて、TechCrunchのような大きなメディアにプレスを打つべきだと。

![10695234_621953141259194_787726956_n.jpg](https://qiita-image-store.s3.amazonaws.com/0/54243/0d1fee42-3abc-40ff-71df-53b606a793f5.jpeg)

また、Growthチームは、ラグビーチームのようなものでGrowthチームのリーダーは相手のディフェンスの穴を探すように、低コストで高い効果のあるチャネルを探します。そこへパスを投げ、チームメンバーは全力で突破するのが最良です。




##シリコンバレーと日本で言う"Growth"##

KenZi氏は以下のようなことを言いました。
**「“Growth” in Silcon Valley VS “Growth” everywhere else（シリコンバレーで言うグロースとそれ以外の土地でのグロースは意味合いが違う）」**
**「シリコンバレーでグロースというとストラテジーやプロダクトについてのグロースを指すが、それ以外の土地ではお金を払って広告を出すような旧来のマーケターの仕事のことを指すことが多い」**



![10711736_621953241259184_895448677_n.jpg](https://qiita-image-store.s3.amazonaws.com/0/54243/79173834-1336-c3a0-6cf6-146c5c3d1333.jpeg)

##Grouth Hackにおける三つの誤解##

**1.Hackerに対する悪い印象**

**2.再現性が無い**

**3.Growth Hackには特定のモデルが無い**

これらはGrowth Hackに対する大きな誤りです。

![10585100_621953154592526_1944945424_n.jpg](https://qiita-image-store.s3.amazonaws.com/0/54243/a65ad301-5f75-c978-c827-0d7218e284d4.jpeg)

**2.の再現性が無いというのは、Growth Hackは徹底したMetrics Drivenであるということ**


![10685067_621953151259193_1386707272_n.jpg](https://qiita-image-store.s3.amazonaws.com/0/54243/cd244b76-585c-129f-543e-7f79cd42e8e5.jpeg)
**3.の特定ぼモデルがないと言うのは勘違いでFacebookからDropboxまでいろいろなGrowth Hackモデルが存在します。**



##まとめ##

KenZi氏も言っていましたが、Growth Hackコミュニティに所属すること。そこで知見を蓄えることが重要です。
Sean Ellis氏が開催しているコミュニティをオススメしていました。
http://growthhackers.com/member/sean/

なかなか日本国内では聞けない貴重な話でした！ありがとうございます！
Ruby で PHP の preg_match_all 関数と同じようなことをする

例えば、下記のような文字列があったとして、li タグの中の文字列を抜き出したい場合、scan メソッドを使うことで PHP の preg_match_all 関数と同じようなことができます。

```ruby
string = '<ul><li>埼玉県</li><li>東京都</li><li>千葉県</li></ul>'
string.scan(/<li>(.*?)<\/li>/).each do |item|
  p item
end
```

実行結果です。

```
["埼玉県"]
["東京都"]
["千葉県"]
```

下記を参考にしました。ありがとうございます。
http://stackoverflow.com/questions/5791718/preg-match-all-and-preg-replace-in-ruby
ActiveRecordでBETWEEN

```rb
User.where(created_at: (1.days.ago)..(Time.now))
# SELECT "users".* FROM "users"  WHERE "users"."created_at" BETWEEN '2014-09-16 15:05:05.279232' AND '2014-09-17 15:05:05.279753'

# 同じ
User.where(created_at: [1.days.ago..Time.now])

# Arelを使う
User.where(User.arel_table[:created_at].in((1.days.ago)..(Time.now)))
# SELECT "users".* FROM "users"  WHERE "users"."created_at" BETWEEN '2014-09-16 15:08:32.972344' AND '2014-09-17 15:08:32.972610'

# Squeelを使う
User.where{created_at.in (1.days.ago)..(Time.now)}
# SELECT "users".* FROM "users"  WHERE "users"."created_at" BETWEEN '2014-09-16 15:06:01.120660' AND '2014-09-17 15:06:01.120867'

```

以下のようなSQLを書くAPIはなさそう？

```sql
-- 今日が有効期限内
SELECT "users".*
  FROM "users"
 WHERE "2014-10-10" BETWEEN stared_at AND ended_at
```

↓こう書けばいいんじゃない？　っていう記事ならたくさんありました

```rb
date = Date.today
User.where{ stared_at.lte(date) & ended_at.gte(date) }
```

余談

利用しているRDB特有の機能を使って「今日」を使うことも出来ます。
例えばPostgreSQLなら`current_date`関数を使うと今日が取得できますが、以下のようにして使います。

```rb
User.where{ updated_at > `current_date`}                                                                                 
# SELECT "users".* FROM "users"  WHERE "users"."updated_at" > current_date
Easily switch user without login, logout


When you are working, sometime you don't waste your time to login/logout with email and password, or the site have error, but this error is only raised for specified user. 

So, you can try using gem [Switch User](https://github.com/flyerhzm/switch_user).

**Install**

Open your Gemfile and add:

```ruby
	gem "switch_user
```

**Usage**

In my project, I'm using gem [sorcery](https://github.com/flyerhzm/switch_user) for authentication. So, the next step, I need run command:

`rails g switch_user:install`


A copy of the configuration file will be copied to `config/initializers/switch_user.rb`. And I'll config with provider is sorcery.

`config.provider = :sorcery`

You can learn more options at link https://github.com/flyerhzm/switch_user#configuration

Next, I'll open my route and add a route:

```ruby
	SwitchUser::Application.routes.draw do
  		match 'switch_user' => 'switch_user#set_current_user'
	end
```

Add the following code into your page, I'm using [Slim](https://github.com/slim-template/slim)

```slim
	= switch_user_select
```

Done, now you can open local site to check.
rspecでSCSSのmixinをテストしたくてやったこと


scssのテストというと、[bootcamp](https://github.com/thejameskyle/bootcamp)とかみたいにfunctionのテストなんかはよくあるみたい。
が、mixinのテストとなるとなかなかなさそうだった。

なんか良い手はないかなーと思い返すとgruntプラグインのテストなんかであれば変換前の元ソースと処理後のソースを比較するテストとかはよくやるなあと思ったのでそんなアプローチでこんな感じでテストをした。

```ruby
RSpec.describe "style" ,type: :feature do
  def parse_css(url)
    visit url
    parser = CssParser::Parser.new
    parser.add_block! page.source
    parser
  end

  it 'variant' do
    expect = parse_css '/assets/specs/some_mixin_expect.css'
    result = parse_css '/assets/specs/some_mixin_spec.css'
    expect(result.to_s).to include expect.to_s
  end
end
```

- 基本実際のassetsへアクセスすること実現している。
- `/assets/`下にspec用のファイルを置くのはかっこ悪いなあと思いつつもscssのコンパイルオプションの変更とかも検出しやすいので一旦このやり方にしといた。
- 改行による差異とかが出たりしないように`parse_css`というsupport関数を使って一度パースしなおしている。
	- このへんは[bourbon neat](https://github.com/thoughtbot/neat/blob/master/spec/support/parser_support.rb)のテストを参考にした。
	- コメントも除去される。

ちょっと複雑なmixinがほしかったのでやってはみたけど、そんなに気軽にやりたくはない感じかも
データ分析と統計処理の基本的な手順の整理 (1)

# はじめに

今日では我々の手には自由ソフトウェアである[プログラミング言語](http://qiita.com/ynakayama/items/2a4d4802c93eb5c40eab)と[その環境](http://qiita.com/ynakayama/items/488311059eda69a720b0)があり、[数学的な問題も簡単に計算機でシミュレーションする](http://qiita.com/ynakayama/items/1e1693503e27ce33e0a0)といったことが誰でもできます。

いままでデータ分析や可視化などについて記述してきましたが、あらためて一から分析と統計について整理して書いてみたいと思います。

## 仮説をたてる

以前にも[データ分析において必要なことを原点に立って考えてみる](http://qiita.com/ynakayama/items/86d32e0ba9e89d053149)という内容で分析のシナリオを計画してからそれを進めるためにどういったことが必要とされるか考えてみました。

**KPI (key performance indicator)** とは「目標を達成するために何が必要かを定量的に表す数値」です。

整形して美人になりたいというのは KPI ではありません。体重を 3 ヶ月後までに 10 キロ減らすとか鼻を 1.5 センチ高くするといったものは KPI です。

このように分析のための手立てを考え、必要なデータの種類を明らかにしてから実際にそのデータを収集します。このとき、データにはどのような種類があり KPI として利用しようとしている指標はどんなデータなのか正しく理解していないと、しばしば無意味なデータ分析へとつながってしまいます。

### データの種類に関する理解

たとえばアンケートやカルテに、あなたは性別は何ですか、年齢はいくつですか、と質問があったとします。このとき取る値は大きく次の 2 つに分けられます。

* 離散変数 (discrete variable)
* 連続変数 (continuous variable) 

さらに、離散変数は次の 2 つに分けられます。

・順序付け不能な離散変数
 (例 性別、国籍、所属している会社)

・順序付け可能な離散変数
 (例 成績: 1. 優 2. 良 3. 可 4. 不可)

[データの種類や尺度水準に関する説明は以前にも線形回帰の記事で触れました](http://qiita.com/ynakayama/items/ba3b45b376397955c3da)。

あらためて尺度水準について書きましょう。重要な事なので何度でも言います。変数はその性質について次のようにその尺度水準を分類されます。
1. 名義尺度
2. 順序尺度
3. 間隔尺度
4. 比例尺度

## データを集める

統計学が応用される分野は実に多岐にわたり、どのような統計をするかで必要なデータも異なってきます。とはいえ、利潤を求める多くのビジネス系の民間企業で有用なのは[社会統計](http://ja.wikipedia.org/wiki/%E7%A4%BE%E4%BC%9A%E7%B5%B1%E8%A8%88%E5%AD%A6)でしょう。

今日では天候や気象、人口や政府の財政状況などさまざまなデータが、データ形式はともかくとして、かなりのレベルまでオープンになっています。

社会統計学はさまざまな社会現象についてその因果関係を推測統計にて分析します。このプロセスにおいては特に変量間の相関関係を調査したり、あるいは仮説検定をおこなったりします。統計学の基礎で重要かつそれでいて簡単な計算をすることで実践できますから、分析の入門分野としても最適かと思います。

### 有用なデータソース

たとえば東京都の統計情報は以下のサイトから参照できます。

東京都の統計
http://www.toukei.metro.tokyo.jp/

また総務省統計局には国勢調査や人口、家計、労働力や企業経済、国内外の経済などのさまざまなデータがあります。

総務省統計局
http://www.stat.go.jp/

直接に因果関係を導く可能性はそれほど大きくありませんが、自然や天候に関するデータは気象庁を参照するのが最も確実でしょう。

気象庁 各種データ・資料
http://www.jma.go.jp/jma/menu/menureport.html

他にもさまざまなデータソースが考えられますが、いずれにせよ分析元のデータのソースが明らかで信頼ができること、データソースとしてライセンス上利用可能であることを確認せねばなりません。いくら役に立つからといってデータの出処があやしいものを利用してはいけないということですね。企業と提携してデータを分析する場合には当然その NDA は厳守しなければなりませんし、自社のデータであるならプライバシーの保護や[セキュリティ](http://qiita.com/ynakayama/items/24acb6eaa11b869eaa3e)には厳重な注意を払わねばなりません。
当たり前ですがとても大切なことです。

ある程度分析に関する入門的知識がそろうと、これらを基に仮説を検証できるかどうかがデータの種類からざっくりと検討がつくことになるかと思います。

## 分析の練習をする

社会統計学においてはふと思いつくような身近なテーマを題材に、高校生レベルの数学力でもできるデータ分析をおこなうことができます。たとえば

* 地球温暖化が話題だが、[東京都の平均気温は実際に上昇してきていると言えるのか](http://qiita.com/ynakayama/items/d6e8513791b43f18d28b)
* お盆で多くの人が田舎に帰省したが、地元が東京以外で上京してきている人の割合は増えてきているのか

などなど他にもさまざまなアイデアが考えられます。

## まとめ

まずは手始めに概論を復習しました。

次回以降は基本的な統計数理とそのコードをもとに手を動かすところへ入って行きたいと思います。
PHPでnullガード

ほほお。まだ提案レベルですが、なんか楽しそうですね。
[PHP: rfc:isset_ternary](https://wiki.php.net/rfc/isset_ternary)

```php
$username = $_GET['user'] ?? 'nobody';
// equivalent to: $username = isset($_GET['user']) ? $_GET['user'] : 'nobody';
```

実在すればそのまま、実在しなければデフォルト値、というような感じですね。

## モチベーション

PHPで定義されていない変数を参照すると、E_NOTICEが発生します。
そのため、isset()で実在を確認してから作業するのが美徳とされています。

しかし、そうすると手っ取り早く書けないので、気持ち悪いなあ、というのがたぶん冒頭の提案なのだと思います。

## 現状での解1

5.3以降に導入されたelvis演算子で書けば提案内容っぽいことができます。しかし存在しなかったらE_NOTICEが発生するので、仕方なくエラー抑制演算子を使うことになります。

```php
<?php
$hoge = @$_GET['hoge'] ?: 'default value';
```


## 現状での解2

[PHP: rfc:ifsetor](https://wiki.php.net/rfc/ifsetor)
こんなのもあったのですね。
php:RFCにも書いてありますが、リファレンスを使うことに抵抗がなければ、ヘルパー関数を作れば終わりだと思います。

```php
<?php
function ifsetor(&$var, $default)
{
    return isset($var) ? $var : $default;
}

$hoge = ifsetor($_GET['hoge'], 'default value');
```

もしくはデフォルト値で上書きしちゃう手もありますね。(行儀は悪いですが)

```php
<?php
function ifsetor(&$var, $default)
{
    return isset($var) ? $var : $var = $default;
}

ifsetor($_GET['hoge'], 'default value');
```

配列の奥深くをいきなり指定してもエラーは一切発生しません。

```php
ifsetor($a->b[0][1][3], 'hoge');

var_dump($a);
```
graphiteのdashboardのグラフの色を変える。


dashboardのグラフは、デフォルトでは
背景が白で文字が黒。
いくつも見ていると目が痛くなるので、
背景を黒く、文字を白くしたい。

一つだけのグラフだけならeditからGUIで
変更すれば良いが、
すべてのグラフに対して変更したい場合の方法です。

# 1.設定を書き換え

次のファイルの、
`/etc/graphite/local_settings.py`

この変数をコメント外す。
`GRAPHTEMPLATES_CONF = '/etc/graphite/graphTemplates.conf'`


# 2.テンプレを作成編集

次のファイルは存在しないはずなので、
作成し編集する。

`$ cat /etc/graphite/graphTemplates.conf`

```
[default]
background = 333333
foreground = white
majorLine = white
minorLine = grey
lineColors = blue,green,red,purple,brown,yellow,aqua,grey,magenta,pink,gold,rose
fontName = Sans
fontSize = 10
fontBold = False
fontItalic = False
```

これで、グラフの色が変わっているはず。
Rails, 1.month.ago とは何か

## 1.month.ago

Railsで１ヶ月前の日時を使う場合、 `1.month.ago` を使う。

```rb
1.month.ago #=> Sun, 17 Aug 2014 15:17:04 JST +09:00
```

では、 `1.month` とは一体なんなのか。

```rb
1.month #=> 2592000
1.month.class #=> Fixnum
```

`Fixnum` らしい。`1.month == 30 * 24 * 60 * 60` で、30日分の秒数だ。

しかし、１ヶ月分の日数は月によって異なるはずだが、以下のコードは日付がずれることはない。

```rb
(0..12).each{|m| puts m.months.ago }
2014-09-17 15:20:57 +0900
2014-08-17 15:20:57 +0900
2014-07-17 15:20:57 +0900
2014-06-17 15:20:57 +0900
2014-05-17 15:20:57 +0900
2014-04-17 15:20:57 +0900
2014-03-17 15:20:57 +0900
2014-02-17 15:20:57 +0900
2014-01-17 15:20:57 +0900
2013-12-17 15:20:57 +0900
2013-11-17 15:20:57 +0900
2013-10-17 15:20:57 +0900
2013-09-17 15:20:57 +0900
```

これはどういうことか。実は、`1.month` が返す値は、 `Fixnum` ではない。

```rb
# File activesupport/lib/active_support/core_ext/integer/time.rb, line 35
def months
  ActiveSupport::Duration.new(self * 30.days, [[:months, self]])
end
```

`ActiveSupport::Integer#months` は、 `ActiveSupport::Duration` のインスタンスを返すように作られている。

### ActiveSupport::Duration

では、 `ActiveSupport::Duration` とは何か。

```rb
# ActiveSupport::Duration のコードを抜粋
module ActiveSupport
  class Duration < ProxyObject

    attr_accessor :value, :parts

    def initialize(value, parts) #:nodoc:
      @value, @parts = value, parts
    end

# --- 中略 ---

    protected

      def method_missing(method, *args, &block) #:nodoc:
        value.send(method, *args, &block)
      end
  end
end
```

`ActiveSupport::ProxyObject` は、 `BasicObject` を継承している。

`BasicObject` とは、通常の `Object` から基本的なメソッドを省いた、より抽象的なオブジェクトクラスだ。

`BasicObject` には `#class` などのメソッドも定義されていない。このため、`ActiveSupport::Duration#class` は `ActiveSupport::Duration#method_missing` を経由して、 `ActiveSupport::Duration#value` へ proxy される。

結果、 `1.month.class` は `Fixnum` を返す。

### ActiveSupport::Duration#ago

では、 `ActiveSupport::Duration#ago` は何をしているのか。

```rb
# ActiveSupport::Duration のコードを抜粋
module ActiveSupport
  class Duration < ProxyObject

# --- 中略 ---

    def ago(time = ::Time.current)
      sum(-1, time)
    end

# --- 中略 ---

    protected

      def sum(sign, time = ::Time.current) #:nodoc:
        parts.inject(time) do |t,(type,number)|
          if t.acts_like?(:time) || t.acts_like?(:date)
            if type == :seconds
              t.since(sign * number)
            else
              t.advance(type => sign * number)
            end
          else
            raise ::ArgumentError, "expected a time or date, got #{time.inspect}"
          end
        end
      end

# --- 中略 ---

  end
end
```

`parts` の値によって挙動が変わる。 `1.month` は `[[:months, self]]` を渡しており、この値が `parts` にセットされる。 `1.day` なども同様。

`Object#acts_like?` は、ダックタイプによる `Date` と `Time` の型判定。

`(Date/Time/DateTime)#advance` は、type で指定された単位を考慮して値を変更する。

結果、 `1.month.ago` は正確に１ヶ月前の日時を返す。

### ActiveSupport::Duration の合成

`ActiveSupport::Duration#+` は、parts を合成するので、以下のようなコードが期待通りに動作する。

```rb
DateTime.now #=> Wed, 17 Sep 2014 16:00:22 +0900
(2.months + 3.days).ago #=> Mon, 14 Jul 2014 15:59:53 JST +09:00
```

#### ところで

[Repro株式会社](https://repro.io/) では一緒に切磋琢磨できる仲間を募集しています！ ぜひ[こちら](https://www.wantedly.com/companies/repro/projects)をごらんください！
EaselJSでドラッグ

EaselJSでのマウスイベントについて。

簡単な[サンプル](http://jsdo.it/matsui_q/7aXB/edit)

#JS

```
var stage;
var myShape;
var canvas = document.getElementById("myCanvas");

//初期設定
function initialize() {
	stage = new createjs.Stage(canvas);
    for (var i = 0; i < 10; i++) {
      myShape = new createjs.Shape();
      stage.addChild(myShape);
      myShape.x = Math.round(Math.random() * canvas.width);
      myShape.y = Math.round(Math.random() * canvas.width);
      draw(myShape.graphics);
      myShape.addEventListener("mousedown", startDrag);
    }
	
}

//描画
function draw(myGraphics) {
	var myColors = [
        '#224687',
        '#2ABFD4',
        '#FFCD40',
        '#E61875',
        '#8BC34A',
        '#AB47BC'
      ];
    var randomColor = myColors[Math.floor(Math.random() * myColors.length)];
	myGraphics.beginFill(randomColor);
	myGraphics.drawPolyStar(0, 0, 40, 5, 0.6, -90);
	stage.update();
}

//マウスクリックで　mousemove mouseup時のイベントを登録
function startDrag(eventObject) {
    var instance = eventObject.target;
    eventObject.addEventListener("mousemove", drag);
    eventObject.addEventListener("mouseup", stopDrag);
    instance.dispatcher = eventObject;
    instance.offset = new createjs.Point(instance.x - eventObject.stageX, instance.y - eventObject.stageY);
}

//ドラッグ時、インスタンスの座標をマウスの座標に設定
function drag(eventObject) {
    var instance = eventObject.target;
    var offset = instance.offset;
    instance.x = eventObject.stageX + offset.x;
    instance.y = eventObject.stageY + offset.y;
    instance.rotation += 5
    stage.update();
}

//マウスアップでドラッグ解除
function stopDrag(eventObject) {
    var dispatcher = eventObject.target.dispatcher;
    dispatcher.removeEventListener("mousemove", drag);
    dispatcher.removeEventListener("mouseup", stopDrag);
}

initialize();
```



##イベントの登録・解除

```
//イベントの登録
オブジェクト.addEventListenter("click",リスナー関数)

//イベントの解除
オブジェクト.removeEventListener("click",リスナー関数)
```


##ドラッグ＆ドロップ時のイベントの設定


1.マウスクリック時 
startDrag...mousemove/mouseupのイベント関数を登録

2.ドラッグ時
drag...インスタンスの座標をマウスの座標に設定

3.マウスアップ時
stopDrag...イベントの解除


##ドラッグ時のインスタンスの座標

マウスポインタの座標はこれで取得できる

```
eventObject.stageX
eventObject.stageY
```

ドラッグするとインスタンスの座標が真ん中に来ちゃうので、

```
instance.x = eventObject.stageX + offset.x;
instance.y = eventObject.stageY + offset.y;
```

としてやる。
graphiteのdashboardのナビゲーションを隠す

graphiteのちょっとした小ネタです。
dashboardを表示した際に、左側あるいは上側に表示されるメトリックスの
ナビゲーションを非表示にする方法です。

![graphite_fullscreen_800.png](https://qiita-image-store.s3.amazonaws.com/0/4187/4bcf29a5-10df-6e03-ff60-23788afbc18b.png)
http://graphite.wikidot.com/screen-shots

ナビゲーションは、初回グラフ作成時以外は基本的に不要かと思うので
デフォルト非表示の方が使いやすいように思います。

下記の内容そのままで上手くいきました。
http://www.abcn.net/2014/01/graphites-dashboard-set-auto-hide-navbar.html

次のファイルを、以下のように編集します。
.js/dashboard.js

```
 717   // Load initial dashboard state if it was passed in
 718   if (initialState) {
 719     applyState(initialState);
 720     //navBar.collapse();　//★コメントアウト
 721   }
 722   navBar.collapse();　//★追記
```

以上です。