OmniAICreator/Qiita-1.07M huggingface dataset:
Eclipse4.6 + Spring MVC

今のプロジェクトでSpring+Oracleを初めて使うことになったのでSpring MVCプロジェクト作成した時のメモ
(ホントはSpring Bootでやりたがったけど、最後はTomcat上で動かすし、Boot急に起動しなくなったりと意味不明だったので断念)
また、あとでOrace DB接続したときのことも書こうかと。。

## Eclipse

まずはEclipse最新版(4.6)のJava+Full Editionをダウンロード

http://mergedoc.osdn.jp/

![image](https://qiita-image-store.s3.amazonaws.com/0/133525/4b73a837-f65a-7b4e-af41-cf259ff5589c.png)

## Spring Tool Suite

EclipseでSpring開発するためのプラグインをインストール

メニューのヘルプ→Eclipseマーケットプレースで"STS"で検索

![image](https://qiita-image-store.s3.amazonaws.com/0/133525/ad0b0585-9b60-8818-df06-d5e7c7bda757.png)

「Spring Tool Suite(STS) for Eclipse 3.8.0 RELEASE」をインストール
インストール後、Eclipse再起動してSpringパースペクティブを開く。

![image](https://qiita-image-store.s3.amazonaws.com/0/133525/beddd69d-588f-1156-1c6e-63373c2e3b3c.png)

## Spring MVCプロジェクト作成

パッケージエクスプローラ上で右クリック→新規→Springレガシー・プロジェクト

![image](https://qiita-image-store.s3.amazonaws.com/0/133525/bc2dd9f2-e4ef-7b5b-20a3-940d6a2b8e5c.png)

テンプレートから「Spring MVC Project」を選択してプロジェクト作成

![image](https://qiita-image-store.s3.amazonaws.com/0/133525/903de163-1485-3de2-dd05-d9a88b898cb1.png)

どっかのリポジトリからテンプレートをダウンロードしてるみたいなので数秒待つとプロジェクト作成完了～

![image](https://qiita-image-store.s3.amazonaws.com/0/133525/416fb43a-bc5d-3165-2b9c-1351faf0f97b.png)

## Spring MVCプロジェクト起動

動作させるサーバーが設定されていないので左下の「使用可能なサーバーがありません。・・・」リンクをクリックしてサーバー設定
今回はTomcat8を選択

![image](https://qiita-image-store.s3.amazonaws.com/0/133525/7119b5f2-e6b7-88ef-4d8b-95ae2f49c798.png)

プロジェクトを右クリック→実行→サーバーで実行

![image](https://qiita-image-store.s3.amazonaws.com/0/133525/5caa73e6-b877-b01c-0a66-788242c323cb.png)

Hello world!が表示
もちろんブラウザでhttp://localhost:8080/spring/ にアクセスしても表示される

![image](https://qiita-image-store.s3.amazonaws.com/0/133525/0da9b8c2-b638-8689-a255-2c071b808c05.png)
gulp-pugを使っている時に、pugでmarkdownをincludeするべく、filterを書いてみた。

昔のjadeであれば、普通にすんなりmarkdownぐらいincludeできていたのになあ。

```jade:jadeの頃はこんなに簡単だった。
include:md ./include.md
```

特にjadeのfilterなどの実装は必要なかった。

pugでこれをやろうとしたらできなかったが、どうしてもmarkdownが書きたくて`gulpfile.babel.js`をちょっといじった。

# どうやってやったか。

手順はだいたい2つ。

## 1. `gulpfile.babel.js`からfilterを追加。

`gulp-jade`と同じようにしてfilterを追加したら普通に動いた。

```js:gulpfile.babel.js
import marked  from 'marked';
import pug     from 'pug';
import fs      from 'fs'
import gulpPug from 'gulp-pug';

pug.filters.markdownInclude = function (filePath) {
  var str = fs.readFileSync(filePath).toString();
  return marked(str);
}

gulp.task('pug', () => {
  gulp.src('path/to/src.pug')
    .pipe(gulpPug({
      pug: pug
    }))
    .pipe(gulp.dest('./path/to/dest/'));
});
```

## 2. 実際のpugファイルでmarkdownをinclude

```jade:src.pug
include:markdownInclude ./include.md
```

これでincludeできる :tada: 


# 注意点

以前のmarkdown用のfilterだとこの書き方ができた。

```jade:以前はできていたこと
:md
  # hoge
  
  * fuga
  * piyo
```

今回の`:markdownInclude`だとそれはできない。下記のような実装でならできる(気がする)。

```js:gulpfile.babel.js
import marked  from 'marked';
import pug     from 'pug';
import gulpPug from 'gulp-pug';

pug.filters.md = function (str) {
  return marked(str);
}

gulp.task('pug', () => {
  gulp.src('path/to/src.pug')
    .pipe(gulpPug({
      pug: pug
    }))
    .pipe(gulp.dest('./path/to/dest/'));
});
```

```jade:上記のgulpfile.babel.jsならこれでできる。
:md
  # hoge
  
  * fuga
  * piyo
```


# 謎の知見

pugの場合だと`include:filter-name`と同じ行に相対パスを書くと、gulpfile上で実装したfilterの関数の引数に絶対パスが降ってくる(というか降ってきた)。謎の知見になった。
Advanced Custom Fields Pro 5.4.0-betaでGoogleMapsAPIのKeyを設定する

当分GoogleMapフィールド使ってなかったら気付かなくて、なんで動かんのじゃぁと悩むこと数時間。。。

[Google Maps field needs setting to add API key - ACF Support #post-40268](https://support.advancedcustomfields.com/forums/topic/google-maps-field-needs-setting-to-add-api-key/#post-40268 "Google Maps field needs setting to add API key - ACF Support")
上記URLのところに普通に書かれてました。

AdvancedCustomFieldsProの5.4.0-betaをダウンロードしてから以下を書き足せばOK。

```php:PHP
add_filter('acf/settings/google_api_key', function() {
	return 'your-api-key';
});
```

これを`functions.php`なりに書いてAPIキーを設定してあげれば管理画面側で動くようになりました。
API Keyはご自身で用意してください。

検索だと`MissingKeyMapError`で大体見つかると思います。
Rubyのクラスの中でメソッド定義して、その中でメソッド定義すると元のクラスのメソッドになる

ちょっとびっくりしたのでコード片と簡単な説明を書いてみます。

```ruby:sample.rb
class A
  def a1
    def a2
      'a2'
    end
    'a1'
  end
end
```
```ruby:output1
irb(main):013:0> obj1 = A.new
=> #<A:0x00000002500198>
irb(main):014:0> obj1.a1
=> "a1"
irb(main):015:0> obj1.a2
=> "a2"
```

ご覧のとおり、a1の呼び出しでa2がAのインスタンスメソッドとして動的に定義されます。ちなみに、a1を呼びださなければa2は存在しません。

```ruby:output2
irb(main):009:0> obj2 = A.new
=> #<A:0x000000011b7398>
irb(main):010:0> obj2.a2
NoMethodError: undefined method `a2' for #<A:0x000000011b7398>
        from (irb):10
        from /usr/bin/irb:11:in `<main>'
```

a2はAのインスタンスメソッドとして定義されるので（Aのインスタンスから共通して参照されるので）、プログラムが終了するか、明示的にAから削除されるまで全てのオブジェクトで呼び出すことができます。

```ruby:output3
irb(main):009:0> obj3 = A.new
=> #<A:0x00000001106f70>
irb(main):010:0> obj3.a1
=> "a1"
irb(main):011:0> obj3.a2
=> "a2"
irb(main):012:0> obj4 = A.new
=> #<A:0x00000001118888>
irb(main):013:0> obj4.a2
=> "a2"
```

ちなみに、この話はメタプログラミングRuby第二版、p111に載っています。

同じことをpythonでやるとこうでしょうか？

```python:sample.py
class A:
  def a1(self):
    self.__class__.a2 = lambda cls: 'a2'
    return 'a1'
```

```python:output4
>>> obj1 = A()
>>> obj1.a1()
'a1'
>>> obj1.a2()
'a2'
>>> obj2 = A()
>>> obj2.a2()
'a2'
```

これならまだ、無理やりやってる感があって安全（？）な気がしました。
[PowerShell] Try to write a simple PowerShell script

## A sample

If you want to do something like processing a lot of files at Windows. Maybe powershell script is a alternative choice.

Here I wrote a simple powershell script.

```ps1
foreach($file in (ls *.cpp)) {
    write-host $file
    $source = "$file"
    $target = $source.Replace(".cpp", ".cc")
    // Do some processing...
}
```

`foreach .. in ..` like the `for` in other languages. 

`ls *.cpp` will list all the files in the current directory with suffix `.cpp`. Alternatively you can do something like this to count the number of files of the result `ls`.

```ps1
(ls *.cpp).Count
```

`write-host` would like output some log in the console.

`Replace` can replace the string at first parameter with the second parameter.


## Remove file 

```ps1
Remove-Item $path
```


## Check if file exist

```ps1
Test-Path $path
```
Unity標準UIのInputFieldはScroll出来ないので対処法

## InputFieldの罠
Unity標準UIのInputFieldには微妙なバグ（仕様？）があります。
たとえば、こんな感じで
![Unity (64bit) - Untitled - stv_sample01 - Android_ _DX11 on DX9 GPU_ 2016-07-15 16.05.49.png](https://qiita-image-store.s3.amazonaws.com/0/37184/7f2b0141-fb16-b856-4180-339a63b94eda.png)

全画面InputFieldしか無い画面をScrollViewのContentに配置すると
スクロールさせようとタップした途端にInputFieldにフォーカスがあたってしまい、スクロールがキャンセルされてしまうのです。
なのでこの画像の例だと、InputField(16)を選択するのがすごく大変になります（ScrollBarでスクロールさせるか、Editor/PCならマウスホイールでできなくもないですが・・・いけてない）

なお、同じく標準UIのButtonなんかはスクロールも出来るし、タップも出来るんですよ。おかしくないですか。

## あーあ。次のバージョンで修正されるといいなー。

と。そうも言ってられないので今できる事をしましょう。

前述の通りInputFieldはスクロール対応じゃないですが、Buttonはスクロール対応なので、InputFieldの上に同じサイズの透明なButtonをかぶせてしまう荒業を試してみます。
![Unity (64bit) - Untitled - stv_sample01 - Android_ _DX11 on DX9 GPU_ 2016-07-15 16.14.50.png](https://qiita-image-store.s3.amazonaws.com/0/37184/97ed34a2-f47f-afa8-7678-5ec27df2dcbe.png)

上記のように一つ親(ScrollableInputField)を作って、その中にInputFieldとButtonを。

なおButtonはボタン判定はあるけど、見えない（InputFieldを隠さない）ようにしなくてはなので

![Unity (64bit) - Untitled - stv_sample01 - Android_ _DX11 on DX9 GPU_ 2016-07-15 16.16.02.png](https://qiita-image-store.s3.amazonaws.com/0/37184/8f06f1f7-c8b3-ec94-1a65-cad25688a753.png)

α値を0にしたり、TransitionをNoneにしたりしておきます。
（※このScrollableInputFieldをPrefab化して使う。）

わーい、これでスクロール出来るぞ！！
![Unity (64bit) - Untitled - stv_sample01 - Android_ _DX11 on DX9 GPU_ 2016-07-15 16.35.31.png](https://qiita-image-store.s3.amazonaws.com/0/37184/0f65c52f-7722-32d6-1a4a-cfd7ea105d40.png)


## スクロールは出来るようになった。　がしかし・・・。

しかしこれだとInputFieldに入力できないんですよね。
まぁ、そりゃそうです。上にかぶさっているボタンがタップイベントを奪うので、InputFieldにフォーカスが行かなくなってしまっています。

なので一工夫。この透明ボタンのonClickにInputFieldのactivate処理を入れてあげれば上手く行きそうです。

以下ソース

```csharp
using UnityEngine;
using UnityEngine.Events;
using UnityEngine.UI;

public class ScrollableInputField : MonoBehaviour
{
    [SerializeField]
    private InputField _targetInputField;

    [SerializeField]
    private Button _guardButton;

    public UnityEvent OnFocus = new UnityEvent();

	void Start ()
    {
	    _guardButton.onClick.AddListener(() =>
	    {
	        _targetInputField.ActivateInputField();
            OnFocus.Invoke();
	    });
	}
}

```

めちゃめちゃ短いですね。
そして忘れずにInspectorでInputFieldとButtonをセットしておきます。

![Unity (64bit) - Untitled - stv_sample01 - Android_ _DX11 on DX9 GPU_ 2016-07-15 16.43.11.png](https://qiita-image-store.s3.amazonaws.com/0/37184/a155df72-6f6d-d53c-22f2-e082a20884b2.png)

これで、ドラッグでスクロールできるし、タップすれば入力が出来るInputFieldの完成です！

### 良いScrollライフを。

## おまけ
ところで謎の`UnityEvent OnFocus`があります。
これは折角ボタンのOnClickでフォーカスを発生させているので、副次的な効果としてフォーカスの取得もUnityEvent化してしましまいました。
（余計なお世話な人は消しちゃってください。）

まぁ、見ての通り非常にシンプルで、ボタンクリックイベントでフォーカスするついでに
`OnFocused.Invoke(this);`
とするだけで外部から擬似的にフォーカスイベントが取れる形になるのでお得感あります。[^1]

[^1]: InputFieldにはOnFocus的なイベントが存在せず毎フレーム`isFocused`を見る。　みたいな処理が必要だった（はず）

例えばフォーカスが当たると同時にそのInputFieldを画面の真ん中に持ってくる（ScrollRectのvertical(holizontal)NormalizedPositionを良い感じに変更する）みたいなことがやりたい場合に便利です。

お試しあれ～
Qiitaのスライドモードを試してみた

# スライドモード？
どうやら2016/06/20に[リリース（Qiita blog）](http://blog.qiita.com/post/146195241579/slide-mode)されたようです

'---'で改ページし、マークダウン記法でスライドを作れるらしいです

かなり便利そうだから試してみた

---
# 色々試してみる（見出し）
## 見出し２
### 見出し３

---
# 色々試してみる（表）


| 1 | 2 |　3　|4|5|
|:-:|:-:|:-:|:-:|:-:|
|あー   |かー   |さー|たー|なー|
|いー   |きー   |しー|ちー|にー|
| うー  |くー   |すー|つー|ぬー|
| えー  |けー   |せー|てー|ねー|
| おー  |こー   |そー|とー|のー|

---
# 色々試してみる（画像）
![てすと](https://qiita-image-store.s3.amazonaws.com/0/84307/fc822872-23d5-6b95-be8c-645eb67a5b64.jpeg)


---
# 色々試してみる（めっちゃ縦に長い）
![てすと](https://qiita-image-store.s3.amazonaws.com/0/84307/fc822872-23d5-6b95-be8c-645eb67a5b64.jpeg)

**どうやらスクロールするらしい**

![てすと](https://qiita-image-store.s3.amazonaws.com/0/84307/fc822872-23d5-6b95-be8c-645eb67a5b64.jpeg)

---
# 色々試してみた

これを勉強会のスライドに使えたら資料登録とかめっちゃ楽になるしいいね！
Rails5 のaccepts_nested_attributes_for & has_one で create だけ上手くいかない

# 現象

こんな感じで作っていたら、createだけinvalidになる。
updateはOK。何故だ？？

### Model

```app/model/product.rb
class Product < ApplicationRecord
  has_one :image
  accepts_nested_attributes_for :image,
                                allow_destroy: true
end
```

```app/model/image.rb
class Image < ApplicationRecord
  belongs_to :product
end
```

### Controller

``` app/controller/products_controller.rb
  def new
    @product = Product.new
  end

  def create
    @product = Product.new(product_params)

    respond_to do |format|
      # ここでsaveが必ず失敗する
      if @product.save
        format.html { redirect_to @product, notice: '新規作成しました' }
        format.json { render :show, status: :created, location: @product }
      else
        format.html { render :new }
        format.json { render json: @product.errors, status: :unprocessable_entity }
      end
    end
  end
```

### View

```
  <%= f.fields_for :image, @product.image || @product.build_image do |image| %>
    <%= f.file_field :path %>
  <% end %>
```

# 原因

結論から言うと多分これのせいじゃないかなーと。
[belongs_to should default to required: true](https://github.com/rails/rails/issues/18233)

上記の例で言うと
①ProductはImageが無いとinvalidになり、
②ImageはProduct保存後でないと親レコードのIDが決まらないので保存できない。



# 対策

以下の様にして、requiredを解除して①を解消すれば保存できるようになりました

```app/model/image.rb
class Image < ApplicationRecord
  belongs_to :product, optional: true
end
```
軽量HTTPサーバーのDockerイメージ作ったよ

最近流行りのDocker。
開発でも基本的にDockerを利用している。

ふとHTTPサーバを複数立てたくなった時Node.jsのhttp-serverを使っても良かったんだけど、
せっかくならとalpineイメージを利用して軽量HTTPサーバのDockerイメージを作ってみた。
ちなみにまだSSLには対応できていない。

## github
[https://github.com/takahiromaki/alpine-http-server](https://github.com/takahiromaki/alpine-http-server)

## Docker hub
DockerHubからpullするにはこちら。

```bash
$ docker pull taka0225/alpine-http-server:latest
```

## Uses
使い方はとても簡単。
表示したいトップレベルディレクトリを`/home`に繋げて下さい。

```bash
$ docker run --name http-server \
  -p 80:8080 \
  -v /path/to/project:/home \
  -d \
  -t taka0225/alpine-http-server:latest
```

プルリクエストもお待ちしています。
勉強会会場検索サイト


IT勉強会会場リスト - Google Sites
https://sites.google.com/site/meetingroomlist/

NAVERまとめ　【東京】IT勉強会の会場【無料】
http://matome.naver.jp/odai/2134508731715149201

Doorkeeper IT勉強会の会場
https://www.doorkeeper.jp/会場

東京イベントガイド
http://guide.eventfes.org/venue/workshop/
goの変数スコープ

なんか地味にハマってしまった。
同じ名前の変数を、入れ子になったスコープで新しく定義した時は別参照になるのか…。

```go
package main

var dummy int = 1

func main() {
        variable := "outside"
        if dummy == 1 {
                variable := "inside"
                println("variable:", variable)
                // variable: inside
        }
        println("variable:", variable)
        // variable: outside
}
```

もちろん内部スコープから、外側の変数は参照できる。（当たり前だけど）

```go
package main

var dummy int = 1

func main() {
        variable := "outside"
        if dummy == 1 {
                variable = "inside"
                println("variable:", variable)
                // variable: inside
        }
        println("variable:", variable)
        // variable: inside
}
```

ん、なんか地味にハマった。名前衝突でエラーにならないのかー。
git status→git diftool→git add

gitに慣れるべくGUIツールは使わずにコマンドラインでやってました。
ただ、gitでファイルの差分を確認するとき
`git status`→`git diftool`→`git add`
の流れはもうめんどくさいので、少しらくになるシェルスクリプトを作成しました。
mac向けです。

```hoge.sh
#!/bin/bash
# gitの差分確認用
commitId="^HEAD"
if [ $# -eq 1 ]; then
  commitId=$1
fi
if [ $# -eq 2 ]; then
  commitId="${1} ${2}"
fi

echo "git difftool ${commitId} 選択されたファイル -Y &  を実行します"
while : ;do
  i=1
  echo stageにある
  status=$(git status --porcelain | grep "M  ")
  dir=$(pwd)
  for file in ${status}
  do
    if [ -f ${dir}/${file} ]; then
      files[$i]=${file}
      echo -e "[\033[0;34m$i\033[0m]\033[0;32m${files[$i]}\033[0m"
      add_flag[$i]=
      diff_flag[$i]=1
      let i++
    fi
  done
  echo stageにない
  status=$(git status --porcelain | grep " M ")
  dir=$(pwd)
  for file in ${status}
  do
    if [ -f ${dir}/${file} ]; then
      files[$i]=${file}
      echo -e "[\033[0;34m$i\033[0m]\033[0;31m${files[$i]}\033[0m"
      add_flag[$i]=1
      diff_flag[$i]=1
      let i++
    fi
  done
  echo "新規作成ファイル(addだけします)"
  status=$(git status --porcelain | grep "?? ")
  dir=$(pwd)
  for file in ${status}
  do
    if [ -f ${dir}/${file} ]; then
      files[$i]=${file}
      echo -e "[\033[0;34m$i\033[0m]\033[0;31m${files[$i]}\033[0m"
      add_flag[$i]=1
      diff_flag[$i]=
      let i++
    fi
  done

  read -p "ファイルの番号選択:" num;
  if [ $num ]; then
    if [ ${diff_flag[$num]} ]; then
      git difftool $commitId ${files[$num]} -Y &
      osascript -e 'tell application "FileMerge" to activate'
    fi

    if [ ${add_flag[$num]} ]; then
      read -p "addする？(y/n):" flag ;
      if [ $flag = y ]; then
        git add ${files[$num]}
      fi
    fi
  else
    exit
  fi
done

```

[このファイル](https://github.com/y-katsumi/shell/blob/master/gg)をパスの通っているディレクトリに置いて、ターミナルからgitで管理しているフォルダの中に入って`hoge.sh`で動きます。
で、僕の環境ではdifftoolが動くと必ずFileMergeのポップアップが出てきてしまいます。
このポップアップもスクリプトでなんとかしたいんですができていません。
`osascript -e 'tell application "FileMerge" to activate'`でフォーカスを移すことはできました。後はspaceを押すだけなのですが。。
【three.jsのヘルパー解説集】 ⑨ GridHelperの使い方

## GridHelper
継承：THREE.Line
解説：グリッドを表示してくれるヘルパーです。__床として設置しておくとオブジェクトの位置などが把握しやすくなります。three.jsで開発する際はまずこのヘルパーを設置してから始めると効率良く進められるのでおすすめです。__

### デモ

![Untitled.gif](https://qiita-image-store.s3.amazonaws.com/0/42248/2abb393d-17c2-bf39-12f9-6df2bf28eed9.gif)

- [jsdo.itで確認する。](http://jsdo.it/sawa-zen/6PMu)
- [ソースコードを確認する。](https://github.com/sawa-zen/three_js_demo/blob/master/helper/src/helper/GridHelper.ts)　

### 実装例

```js:javascript
var size = 10;
var step = 1;

var gridHelper = new THREE.GridHelper(size, step);
scene.add(gridHelper);
```

GridHelper(size, step, colorCenterLine, colorGrid)

- size：グリッド全体のサイズ
- step：1分割のサイズ
- colorCenterLine：中央十字ラインの色
- colorGrid：中央十字ライン以外の色
three.jsで作った空間をJavascriptでビューんと飛ぶ。


つまりは、three.js editorで作った3D空間のカメラの座標を Javascriptで動かして、視点を動かしてみよう。というお話です。


まず、three.js/editor を使ってテスト用の3D空間を作成。
（と言ってもまずは簡単なオブジェクトを置いただけの空間を作成）
立方体とか円柱とか球とか単純なオブジェクトなら、サクサクと配置可能

http://threejs.org/editor/


そして、File - Export Scene を選択して、JSONでエクスポートします。
![スクリーンショット 2016-07-13 9.49.17.png](https://qiita-image-store.s3.amazonaws.com/0/92491/12ed3f2c-0922-fac5-fdd5-fb596e639ec8.png "スクリーンショット 2016-07-13 9.49.17.png")

![スクリーンショット 2016-07-13 9.49.23.png](https://qiita-image-store.s3.amazonaws.com/0/92491/ae272a03-76ef-f74d-47e8-31a361178c16.png "スクリーンショット 2016-07-13 9.49.23.png")


エクスポートすると「scene.json」がダウンロードされます。
出来上がったJSONを読み込めるようにします。
https://github.com/motokazu/threejs-playroom/blob/master/json/scene.json


サンプルコード:
https://github.com/motokazu/threejs-playroom

    $ git clone https://github.com/motokazu/threejs-playroom.git
    $ cd threejs-playroom
    $ python -m SimpleHTTPServer 8080


index.htmlのあるディレクトリで http サーバーを起動して、ブラウザを開いて http://localhost:8080 にアクセスします。 

カメラを動かすところは、room.js の L47-L59です。

    // target object
    var targetLookAt = new THREE.Vector3( 0, 0, 0 );
    
    function animate(){
	    requestAnimationFrame(animate);
		renderer.render(scene, camera);
					
		if(cameraWorks && cameraWorks.length > 0){
			var pos = cameraWorks.shift();
		    camera.position.x = pos.x;
			camera.position.y = pos.y;
			camera.position.z = pos.z;
						
			camera.lookAt( targetLookAt );
		}
	}

(x,y,z) = (0,0,0) を見ながら カメラが指定した座標を移動します。

このサンプルでは、移動させる座標は cameraWorks 配列に入っています。

    // camera work
    var cameraWorks = [];
    for(var i = 0;i < 10000; i++ ){
        var p = {};
        p.x = Math.sin(i/100)*20;
        p.y = Math.sin(i/100)*10+20;
        p.z = Math.cos(i/100)*20;
        
        cameraWorks.push(p);
    }


ぐるぐると動きます。
Wget,cURLにおいてProxyを利用する際の設定

#cURL
```bash
$ curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py
curl: (7) couldn't connect to host
```

* -xを使う

```bash
 -x/--proxy <host[:port]> Use HTTP proxy on given port
    --proxy-anyauth Pick "any" proxy authentication method (H)
    --proxy-basic   Use Basic authentication on the proxy (H)
    --proxy-digest  Use Digest authentication on the proxy (H)
    --proxy-negotiate Use Negotiate authentication on the proxy (H)
    --proxy-ntlm    Use NTLM authentication on the proxy (H)
```

```bash
$ curl -x http://192.***.***.***:****/ https://bootstrap.pypa.io/get-pip.py -o get-
pip.py
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 1488k  100 1488k    0     0  3381k      0 --:--:-- --:--:-- --:--:-- 5816k
```

# Wget

```bash
$ wget --no-check-certificate https://access.redhat.com
--2016-07-15 19:13:54--  https://access.redhat.com/
access.redhat.com をDNSに問いあわせています... ***.***.***.***
access.redhat.com|***.***.***.***|:443 に接続しています... 失敗しました: 接続がタイムアウトしました.
```

* /etc/wgetrcに明示的に有効と記述する

```bash
--- /etc/wgetrc.orig    2016-07-15 19:11:40.368050104 +0900
+++ /etc/wgetrc 2016-07-15 19:16:53.756649933 +0900
@@ -77,9 +77,11 @@
 # They will override the value in the environment.
 #https_proxy = http://proxy.yoyodyne.com:18023/
 #http_proxy = http://proxy.yoyodyne.com:18023/
+http_proxy = http://192.***.***.***:****/
+https_proxy = http://192.***.***.***:****/
 #ftp_proxy = http://proxy.yoyodyne.com:18023/
 # If you do not want to use proxy at all, set this to off.
-#use_proxy = on
+use_proxy = on
 
 # You can customize the retrieval outlook.  Valid options are default,
 # binary, mega and micro.
```

```bash
$ wget --no-check-certificate https://access.redhat.com
--2016-07-15 19:19:14--  https://access.redhat.com/
192.***.***.***:****/ に接続しています... 接続しました。
Proxy による接続要求を送信しました、応答を待っています... 200 OK
長さ: 89324 (87K) [text/html]
`index.html' に保存中

100%[===============================================================>] 89,324      --.-K/s 時間 0.07s   

2016-07-15 19:19:15 (1.29 MB/s) - `index.html' へ保存完了 [89324/89324]
```

#環境変数
* 登録

```bash
$ export http_proxy=http://192.***.***.***:****/
$ export https_proxy=http://192.***.***.***:****/
```

* 削除

```bash
$ unset http_proxy
$ unset https_proxy
```
Mackerelの`check-log`プラグインでエラーの内容も取得する

# `check-log`プラグインについて

サーバー監視のSaaSである[Mackerel](https://mackerel.io/)は, [公式が提供するプラグイン](https://mackerel.io/ja/docs/entry/howto/mackerel-check-plugins)を利用することで, サーバー上にある様々なリソースや情報を監視することができます.

その中の1つが, ログ監視を行う[check-log](https://mackerel.io/ja/docs/entry/howto/check/log)です.
このプラグインを使えば, サーバ上に存在する任意のログファイルを監視し, そこに指定した文字列が出現した場合にアラートを発生させることができます.

例えば, `mackerel-agent.conf`に次のように書いておけば, `/var/log/myapp/app.log`に, `[CRITICAL]`というログが書き込まれた時, アラートを発生させることができます.

```
[plugin.checks.app]
command = "check-log --file /var/log/myapp/app.log --pattern '\\[CRITICAL\\]'"
```

更にその際, 例えばMackerelからSlackへの通知が設定されていれば, Slack上には次のようなメッセージが送信されます.

![スクリーンショット_2016-07-15_18_46_23.png](https://qiita-image-store.s3.amazonaws.com/0/737/7c23d548-608a-df87-ca6d-3053f087ec6a.png)

`check-log`を使えば, アプリケーションのエラーについても, Mackerelで管理をすることができ, 非常に便利です.

# エラーの内容も取得したい!

とはいえ, 上の通知内容では, ｢`[CRITICAL]`という文字列が含まれるログが書き込まれた｣ということしかわかりません.
ログの具体的な内容を確認するためには, 実際にサーバーに接続して, ログファイルを確認する必要があります. これは非常に面倒です.

というわけで, こういう場合は`--return`オプションを使いましょう.

```
[plugin.checks.app]
command = "check-log --file /var/log/myapp/app.log --pattern '\\[CRITICAL\\]' --return"
```

`check-log`に`--return`オプションを付与すると, 条件に当てはまったログの全文がMackerelに送付されるようになります.
例えば, 上記の設定であれば, `/var/log/myapp/app.log`に`[CRITICAL] Test for Mackerel check-log plugin`という文字列を書き込んだ場合, Slackへの通知が次のようになります.

![スクリーンショット_2016-07-15_18_46_39.png](https://qiita-image-store.s3.amazonaws.com/0/737/ce983fde-0d2e-3a15-6483-c7480da00309.png)

`[CRITICAL] Test for Mackerel check-log plugin`という文言が含まれていることがわかります.

また, この内容はMackerel上からも確認することができます.

![スクリーンショット_2016-07-15_18_57_37.png](https://qiita-image-store.s3.amazonaws.com/0/737/202337da-99f4-e6c8-f61e-5c5188e3a064.png)

# 注意点

`--return`オプションを有効にすると, 条件を満たしたログの内容が全てMackerelに送信されてしまいます.
意図せず秘匿しないといけない情報が含まれないように, 注意しましょう.

また, 送信するログのサイズが大きい場合, 表示が切り詰められる場合もあるので, こちらも注意しましょう.

# 補足

...ぶっちゃけ, この記事でご紹介した`check-log`の`--return`オプションについては, Mackerelのマニュアルの[ログ監視をおこなう](https://mackerel.io/ja/docs/entry/howto/check/log)に, しっかり書かれています.

が, [mackerelio/go-check-plugins](https://github.com/mackerelio/go-check-plugins)の[check-log](https://github.com/mackerelio/go-check-plugins/tree/master/check-log)の[README](https://github.com/mackerelio/go-check-plugins/blob/master/check-log/README.md)には書かれておらず, 先日Mackerelの中の人にお聞きするまで知らなかった, という感じだったので, もしご存じない方がいたら... という気持ちで書きました.
認証とか認可とか（AuthなんちゃらとかCertifyとか）が何なのかについて、自己解釈

「オレ」が「お前ら」に、認証とか認可とかをしていただく ようなフローで考える。

# [Authentication](https://en.wikipedia.org/wiki/Authentication)（認証≒本人か確認）

wikipediaには、```confirming the truth```とある。つまり、クライアントに対して、「貴様は間違いなく貴様か？」を確認する。  
例えば、「Twitterで、@ndxbn アカウントを作った本人かを確認する（≒クライアントから見たら、ログインする・サインインする）」とか。  
![Authentication.png](https://qiita-image-store.s3.amazonaws.com/0/29233/a778d97a-0ff9-5bad-672e-913db6a8d886.png)

「俺」が「お前ら」を信頼していないと成り立たない。世の中の「パスワード漏えいした」とかいうのは、つまり「秘密鍵をばらまいた」というなので、「お前ら」の信頼がなくなる。「お前ら」は、信頼を死守しなければいけない、というプレッシャーに追われるわけだ。

# [Authorization](https://en.wikipedia.org/wiki/Authorization)（認可≒限定的な権威の委譲）
なにかするための **権限（権威、権利…）を与える**。権限を与える事ができる人を「権威者」と言うことにする。「権威者」の由来は、Authoritative name serveを権威DNSサーバと訳することに由来する。  
例えば、「Twitterで、@ndxbn アカウントでツイートする権限を与える」とか。この権限を与えられるために、権限がほしいクライアントは、自分自身の証明ができるようにするためのものをメッセージングの引数にする。  
![Authorization.png](https://qiita-image-store.s3.amazonaws.com/0/29233/08579f39-ac08-9455-41bb-1c16af3bdd65.png)

#### 移譲と委譲の違い

どちらも、「Aが持つ権限・権威・権利を、Bへわたす」部分は同じ。「Bへわたした」後に、「Aに残るか」という点が違う。「移譲」は残らない。「委譲」は残る。  
「移譲」は「完全に引き渡すことを目的としている」が、「委譲」は「（一時的に）代わりにやってもらうこと」を目的としている。

## OAuth
[OAuthって、Authorizationなんだぜ…。](http://oauth.net/articles/authentication/)
まぁ確かに、「ユーザIDだけをもらう権限」にしてれば、認証っぽく使えるかもしれないけどな。

> OAuth 2.0 is not an authentication protocol.

![OAuth(orization).png](https://qiita-image-store.s3.amazonaws.com/0/29233/6825599b-6968-3e21-2bff-c68acd27e177.png)


# Certification（認証≒本人かを確認する。ただし、お互いに信用してない）

今までのAuthなんとか は、すべて「どっちか片方が信頼・信用されている」ことを前提に成り立っていた。しかし、お互いに信用ならない時だってある。  
そういう時は、俺もお前らも信用している「第三者認証機関」を使おうじゃないか。

![Certification.png](https://qiita-image-store.s3.amazonaws.com/0/29233/4ecd261e-7280-82c9-7a08-6fafc1fb2759.png)

ちなみに、HTTPSとかでのCertificationは、「お前ら（HTTPクライアント）」の方が、立場は上になる。  
お前らの目標は、「"信頼できる"Webコンテンツを取得すること」だから、わざわざWebサーバに対して「オレ氏は信頼できる」フィードバックはしない。むしろうざいからやめろ。（信頼できるかどうかは、アドレスバーの鍵のやつで見れる。）
![SSL証明.png](https://qiita-image-store.s3.amazonaws.com/0/29233/0ab72409-6f77-3714-bc4f-f46f4d41527b.png)
お前ら（GoogleChromeとか）がオレ（ www.google.coo.jp ）の確認（認証）
![SSL証明.png](https://qiita-image-store.s3.amazonaws.com/0/29233/84c9c6aa-bb18-34e8-7fc9-66126d68f68f.png)


認識間違ってたりしたら、ツッコミください。お願いします。
casper.jsで要素とキャプチャーの取得

要素とキャプチャーってこんなに簡単に取得できるんだ。
という事で、備忘録。

```
var casper = require("casper").create();
casper.start();
casper.thenOpen(URL,function() {
  this.repeat(2,function(){

    // 要素
    var xpath = 'XPath';
    var element = this.evaluate(function(path){
                return __utils__.getElementByXPath(path).innerHTML;
    },xpath);
  });

  // キャプチャ
  var filename = "aaa.png";
  this.capture(filename);
});
```

casperjs でなんかいろいろとやってみたい。
DigdagでRubyのBundlerを使う


## JRubyじゃないよ

Digdagのコードを追っていくと[RbOperatorFactory.RbOperator#runTask()](https://github.com/treasure-data/digdag/blob/44660872b830d94d2d4f9589634fa07441495cb5/digdag-standards/src/main/java/io/digdag/standards/operator/RbOperatorFactory.java#L85)でRubyスクリプトを実行しています.
具体的には[ProcessBuilder](java.lang.ProcessBuilder)を使っています.

システムの環境変数を見てrubyコマンドを実行しています.

[Tokyo Ruby会議#11 ワークフローエンジンDigdagのまとめ - Qiita](http://qiita.com/hiroysato/items/d0fe5e2d88c267413a82#%E9%81%8E%E5%8E%BB%E3%81%AE%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88)のビデオを見たときRuby使えると聞いて勝手にJRubyだろうなとか思ってました. :astonished: 

## Digdagのワークフローの仕組み

 - `digdag push`をすると
 - アーカイブが作成されてそれがDigdag serverに送られる
 - ワークフローを実行するとき
	 - テンポラリディレクトリに展開される
	 - ワークフロー実行されます

## Bundlerを使う

では本題のBundlerを使う方法です.
Digdagの仕組みをある程度知った上でBundlerを使う方法は幾つかあると思います.

### bundler/inlineを使用する :star2:

 - Bundlerが入っている場合
	 - [bundler/inline](https://github.com/bundler/bundler/blob/eef043a655039a91e51004cb28d321999a8ccad7/lib/bundler/inline.rb)を使う
	 - [Example of using bundler/inline](https://gist.github.com/chrisroos/0ddf618ac711abe0f465)


以下のような感じでスクリプト内に`Gemfile`相当のものが書けます.
調べた限りでは`Gemfile.lock`相当はありませんでした.

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

require 'bundler/inline'

# 第１引数をtrueとするとbundle install相当をしてくれます.
gemfile(true) do
  source 'https://rubygems.org'
  gem 'json', require: false
  gem 'nap', require: 'rest'
  gem 'cocoapods', '~> 0.34.1'
end
```

### pathオプションを使用する

 - Bundlerが入っている場合
	 - プロジェクト内にライブラリを入れる
	 - `bundle install --path vendor/bundler`

### standaloneオプションを使用する

 - Bundlerが入っていない場合
	 - スタンドアロンのオプションを有効にする.
	 - `bundle install --standalone`
	 - Rubyスクリプトに`require`を追記
		 - `require './bundle/bundler/setup'`


`path`と`standalone`は、ワークフローのアーカイブに含まれるので色々依存しすぎると、アーカイブでディスクを圧迫したり、展開に時間がかかったりするのでほどほどにしましょう.
【かけだし用】GMOのVPSコンソールでvi中に「:」コロンが使えなかったときの対処

__ビックリマークを二個「!!」を入力すると「:.!」の３文字が現れる__ので、二文字削って「:」にしてから追記すれば「:wq」とかがちゃんと使える。
（ただ、確認できてるのが自分の環境だけなので、もしかしたら使っているキーボードとかによっても違うかもです）

余談、上記はあくまでコマンド呼ぶときしか使えないので、文中で「:」や「@」とかを使う場合は付近の文章からコピペが手っ取り早い。「yy」で行ごとコピー、「p」でペーストしてから欲しい部分を削り出す感じで。
また、 TeraTermとかPuTTYみたいなソフトから接続すれば、キーボードの入力は正常に働くし、参考サイトからのコードのコピペとかもちゃんとできるのでとっとと導入したいところ。


経緯
初心者がVPSを借りるも、ターミナルも何もない状態でwebページのVPSコンソールに突撃。セキュリティの初期設定とかでvi編集するも、なぜか「:」が打てずに、保存も終了もできない状態に。「:」が割り当てられてるキーがないか適当に打っていたら偶然でていたので検証して発見。

---
補足
単にファイルを閉じる/保存して閉じるであれば「ZZ」や「ZQ」で良いようです。（コメントありがとうございます）私は「zz」とか小文字で試してしまって使えないと判断しちゃいました、みなさんはちゃんとShif押してくださいね！（あんまり使わないかもですが他の「:」付きコマンドを使いたいこともあるかもしれないということで何卒）
Re:dash (study meeting)

#
![imgres.png](https://qiita-image-store.s3.amazonaws.com/0/106937/55a45380-3a6c-11ec-3c13-2b96584a5e11.png)

---
### 今回使った時間配分
#### demoを見せれるようにset up : 2割
#### demoを見せれるようにsql : 5割
#### 文章まとめ: 3割
---
### なので

---
### demo重視の勉強会にする

---
### What is Re:dash
* Open Source Data Collaboration and Visualization Platform
  * http://docs.redash.io/en/latest/
* BI(Business Intelligence) Tool
* Open Source
  * https://github.com/getredash/redash
* Supported Data Sources
  * PostgreSQL,Redshift,Greenplum,MySQL,Google BigQuery,Graphite,MongoDB,ElasticSearch,InfluxDB,Presto,Hive,Impala,Google Spreadsheets,Python,Vertica,Oracle,Treasure Data,Microsoft SQL Server

---
### 主な機能

---
* クエリーの登録
* Visualize
  * Boxplot
  * Chart
     * Line
     * Bar
     * Area
     * Pie
     * Scatter
  * Cohort
  * Counter
  * Map
  * Pivot Table
* http://redash.io/static/img/redash_screenshot_dashboard.png

* Alerts
* Share

---
### Set up Re:dash
* http://docs.redash.io/en/latest/setup.html
  * AWS image
  * GCP image
  * Docker Compose
  * Heroku
  * Other

---
# Architecture

---
### Production
![arc.png](https://qiita-image-store.s3.amazonaws.com/0/106937/089530c9-2431-6139-4578-a39095f360e7.png)

---
# 今回はすべてlocal

---
### Setting up Re:dash from Docker
1. `git clone https://github.com/getredash/redash.git`
2. Rename `docker-compose-example.yml` to `docker-compose.yml`
3. Set up DB `docker-compose up -d postgres`
4. Create DB Schema `./setup/docker/create_database.sh`
5. Run `docker-compose up`

---
# Demo

---
### ES+Kibanaと役割重複！？

---
### Difference between ES+Kibana
#### ES+Kibana
* indexされたデータを分析対象
* 自分でインデックスするデータを予め決めてESにStore


#### Re:dash
* データストアすべてが対象で分析可能
* データストアは別にある前提

---
### まとめ
* SQLは覚える必要がある
 * データストアによってクエリは変わるけど
 * SQLはエンジニアだけが使う時代はもう終わってるよ
* 可視化までの超簡単
* データの民主化
* ES+Kibanaとの切り分け重要
* Data Engineer
rbenv: ruby: command not found  The `ruby' command exists in these Ruby versions:

rbenvでrubyをインストールした後に
`ruby -v`をすると以下のエラーが出る。

```
rbenv: ruby: command not found

The `ruby' command exists in these Ruby versions:
  2.2.3
```

これは、どのrubyのバージョンを使うかをちゃんと特定していないために起こるエラーなのでちゃんと指定してあげる。

まずインストールしたrubyのバージョンの確認をする。

```
$ rbenv versions
 2.2.3
```

これでバージョンを特定してあげる。

```
$ rbenv global 2.2.3
```


そうすれば、エラーは出なくなる。
WordPress オススメプラグイン


WordPressでは、便利なプラグインが沢山あります。
ありすぎて、WP初心者の人は、何を使ったらいいのか迷うはず。
私個人が使用して、使えると思ったプラグインを随時アップしていきます。

    - Advanced Custom Fields
    - Akismet
    - All In One SEO Pack
    - Attachment Importer
    - AMP
    - Better Delete Rivision
    - Broken Link Checker
    - Categories Images
    - Contact Form7
    - Google XML Sitemaps
    - JP Markdown
    - Search Regex
    - WP Multibyte Patch
    - WP No Category Base
    - WP-PostViews
    - カスタムフィールドテンプレート
    - マルチデバイス
    - リディレクション
    - WP-DBManager
strace and rbtrace

https://www.91ri.org/14455.html

https://github.com/tmm1/rbtrace

strace ruby

http://www.thegeekstuff.com/2011/11/strace-examples/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+TheGeekStuff+(The+Geek+Stuff)
http://timetobleed.com/hello-world/

gem 'rbtrace', :require => false

特定的地方 require 'rbtrace'

https://github.com/tmm1/rbtrace/issues/9

http://www.justinweiss.com/articles/how-to-debug-ruby-performance-problems-in-production/
今さらTwilio

「出るまで、順番に電話をかける」というお題で、今更Twilioを使ってみました。
TROPOの方が情報が少なくて手探りで面白そうとでしたが、そこにはスケジュールがの壁が。。

PHP版で良いサンプルがなかったので、備忘録も兼ねてソースをアップします。
構成は電話をかけるPHPと喋らす内容を記述したXMLの2つのファイルです。

Twilioの情報と、電話番号の別ファイルでの管理部分と、電話後のメッセージの取り扱いは環境によりけりなので割愛しています。
割愛しすぎて間違えているところがあるかも知れませんが。。

##■call.php
```
<?php
　　require "Twilio.phpのパス";

　　// パラメーター
　　$status = $_REQUEST["CallStatus"];
　　$count = $_REQUEST["count"];
　　$total = $_REQUEST["total"];

　　// 連絡先用番号の処理
　　if($count == ''){
　　　　$currentcount = 0;
　　}else{
　　　　$currentcount = $count + 1;
　　}

　　// 電話をかけた回数の処理
　　$total++;

　　// Twilio用設定
　　//$sid       ACCOUNT SID
　　//$token     AUTH TOKEN
　　//$timeout   電話を鳴らす秒数
　　//$maxcall   電話をかける回数
　　//$from      発信元
　　//$xml       Twilio動作用XML
　　//$url       コールバックのURL

　　// 電話番号
　　// コールバックのURLに何人目かを仕込んでいるので順々に電話
　　$number = array('***********','***********','***********');
　　if(count($number) == $currentcount){
　　　　$currentcount = 0;
　　}

　　// Call back用URL の生成
　　$url = str_replace('COUNT',$currentcount,$url);
　　$url = str_replace('TOTAL',$total,$url);

　　// 電話の処理
　　$exec = 0;
　　if($status != 'completed'){
　　　　if($total <= $maxcall){
　　　　　　$msg = $number[$count].' に電話をします。';
　　　　　　$client = new Services_Twilio($sid,$token);
　　　　　　$call = $client->account->calls->create($from,$number[$count],
　　　　　　　　　　$xml,array(
　　　　　　　　　　　　"StatusCallback" => "$url",
　　　　　　　　　　　　"Timeout" => "$timeout"
　　　　　　　　　　));
　　　　}else{
　　　　　　$msg = '誰も電話に出てくれない。';
　　　　}
　　}else{
　　　　$msg = $number[$count].' が電話に出ました。';
　　}
?>
```
##■call.xml
```
<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Say language="ja-jp">喋らせたい文言</Say>
</Response>
```
Mac ターミナル　基本ショートカット

| ショートカットキー | 説明 |
| ---- | ---- |
| Ctrl + A | カーソルを行頭へ |
| Ctrl + E | カーソルを行末へ |
| ESC + F | カーソルを1単語先に進める |
| ESC + B | カーソルを1単語戻す |
| Ctrl + K | カーソル位置から行末までを削除 |
| Ctrl + U | カーソル位置から行頭までを削除 |
| Ctrl + W | カーソル位置から単語の先頭までを削除 |
| Ctrl + D | カーソル位置の文字を削除 |
gulp 良く使う パッケージリスト

1. gulp
1. browser-sync      :  ブラウザシンク 
1. gulp-rename       :  ファイル名変更 
1. gulp-ejs          :  EJSコンパイル
1. gulp-sass         :　Sassコンパイル
1. gulp-typescript   :　TypeScriptコンパイル
1. gulp-plumber      :　プラグインエラーがおきてもwatchを継続できる
1. gulp-rename       :  ファイル名を変更する
1. gulp-concat       :  複数のファイルをまとめる
1. gulp-autoprefixer :  ベンダープリフィックスを自動付与
1. gulp-csscomb      :  プロパティの順番を整理する
1. gulp-minify-css   :  CSSの圧縮
1. gulp-uglify       :  JSの圧縮
1. gulp-minify-html  :  HTMLの圧縮
1. gulp.spritesmith  :  スプライト画像
1. gulp-babel        :  ES6対応
pythonでEOFを明示的に取得する

pythonでは，イテレーションでファイル読み込みをするため，明示的にファイルの読み込みの終了を示すEOFを意識することはありません．ですが，複数のファイルを同時処理する際にハマったので，EOFの取得方法を調べてみました．
  
# ファイルオブジェクトのreadline()が空文字かを調べる方法
readline()の返り値が空文字のとき，EOFまで達しています．

```
# -*- coding: utf-8 -*-

#!/usr/bin/env python

filename = 'test.txt'

with open(filename,'r') as fi:
    while True:
        line = fi.readline()
        if not line:
            break
```


# 組み込み型のファイルオブジェクトのStopIterationを用いる方法
※python2.3以上，python3以下でしか動きません．

ファイルオブジェクトからnext関数を呼び出した場合，EOFに達するとStopIterationという例外が発生します．これを捉えることで，EOFを検知できます．

```
  # -*- coding: utf-8 -*-
    
  #!/usr/bin/env python

  filename = 'test.txt'

  with open(filename,'r') as fi
  	while True:
		try:
			line = fi.next()
		except StopIteration: # EOFに到達
		        break
```

# 参考リンク
* python2のファイルオブジェクト
    * http://docs.python.jp/2/library/stdtypes.html?highlight=read#bltin-file-objects
* python3のファイルオブジェクト
    * http://docs.python.jp/3/library/io.html#io.TextIOBase
改行を含むMySQLログを整形するperlスクリプト

# 中身
```perl:qb
#!/usr/bin/perl
use strict;

my ($time, $id, $command, $argument, @lines) = ();

while(my $line = <>){
  chomp $line;

  if(
    $line =~ /^(\d{6}\s+\d+:\d+:\d+)\s+(\d+)\s([A-Z]\w+)(.*)$/ ||
    $line =~ /^(\t\t)\s*(\d+)\s([A-Z]\w+)(.*)$/
  ){
    _flush();
    ($time, $id, $command, $argument) = ($1, $2, $3, $4);
  } else {
    $line =~ s/^\s+/ /; # 行頭の空白は１つ
    $line =~ s/\s+$//;  # 行末の空白は取り除く
    $line =~ s/^(\S)/ $1/;
    push @lines, $line;
  }
}

sub _flush {
  print sprintf("%15s %9s %-11s %s %s\n",
          $time,
          $id,
          $command,
          $argument,
          join('', @lines),);
  ($time, $id, $command, $argument, @lines) = ();
}
```

```perl:qbt
#!/usr/bin/perl
use strict;

my ($time, $id, $command, $argument, @lines) = ();
my $tmp = '';

while(my $line = <>){
  chomp $line;

  if(
    $line =~ /^(\d{6}\s+\d+:\d+:\d+)\s+(\d+)\s([A-Z]\w+)(.*)$/ ||
    $line =~ /^(\t\t)\s*(\d+)\s([A-Z]\w+)(.*)$/
  ){
    _flush();
    ($tmp, $id, $command, $argument) = ($1, $2, $3, $4);
    if($tmp =~ /^(\d{6}) ([ \d]\d):(\d\d):(\d\d)/){
      $time = sprintf("%06d %02d:%02d:%02d", $1, $2, $3, $4);
    }
  } else {
    $line =~ s/^\s+/ /;
    $line =~ s/\s+$//;
    $line =~ s/^(\S)/ $1/;
    push @lines, $line;
  }
}

sub _flush {
  print sprintf("%15s %9s %-11s %s %s\n",
          $time,
          $id,
          $command,
          $argument,
          join('', @lines),);
  ($id, $command, $argument, @lines) = ();
}
```

# 使い方
unixコマンドライクなフィルタのように使ってください。
qbtは拾える限り時刻を拾います。
ネーミングはQuery-log Beautifier (with Timestamp) のつもり。
必要だったら実行属性付けてください。

> $ tail -f mysql.log | qbt
Google Play/App Storeマーケティングガイドライン

Android/iOSアプリを作ったらプロモーションをしなくてはなりません。多くのユーザにアプリを通じた価値を届けるためGoogle Play/App Storeそれぞれのガイドラインに従ったプロモーションをしましょう。

(参考)

- Google Play Badge Guidelines: https://play.google.com/intl/en_us/badges/
- App Store Marketing Guidelines: https://developer.apple.com/app-store/marketing/guidelines/

## Google Play Badge Guidelines

![google-play-badge-guideine-201607.png](https://qiita-image-store.s3.amazonaws.com/0/49113/e907b9d0-1859-000e-9da9-b04e3bff4d1c.png)
via https://play.google.com/intl/en_us/badges/


## App Store Marketing Guidelines

![apple-app-store-marketing-guideine-201607.png](https://qiita-image-store.s3.amazonaws.com/0/49113/0bc3ce3b-7141-0ac1-255d-fc289a15f397.png)
via https://developer.apple.com/app-store/marketing/guidelines/

## いくつか抜粋

### 修正を加えてはいけない

公式で出ている画像を加工してはいけません。

### 最新のバッジを使いましょう

Play/AppStoreともに何度か画像が変わっているので、最新版を使いましょう。

### 適切な余白を空けましょう

隣接した画像や文字とくっつけてはいけません。


## まとめ

紹介しきれない部分も多いので、アプリ開発者・アプリマーケターには熟読してほしいところです。
みなさん上手にアプリマーケティングをして価値を提供していきたいですね。
JAVA staticなメソッド

▪️Hero.java

```java
public class Hero {
	String name;
	int hp;
	static int money;

	static void setRandomMoney() {
		Hero.money = (int) (Math.random() * 1000);
	}

}
```

▪️A.java

```java
public class A {
	public static void main(String[] args) {
		Hero.setRandomMoney();
	}
}
```

<font color="ff0000">1メソッド自体がクラスに属する様になる</font>
静的メソッドは、その実体が各インスタンスではなくクラスに属し、
「クラス名.メソッド名();」で呼び出せるようになる。

<font color="ff0000">2インスタンスにメソッドの分身が準備される</font>
静的メソッドは、「インスタンス変数名.メソッド名();」でも呼び出せるようになる。

<font color="ff0000">3インスタンスを1つも生み出すことなく呼び出せる</font>
静的メソッドは、1つもインスタンスを生み出していない状況であっても、
呼び出すことができる
【対策】Capistrano3  mkdir で permission denied

WEB公開用のパス(/var/www/html) の所有者は nginxやapacheで
デプロイ用のユーザは deployuser だったりすると、```cap deploy``` で permission deniedが発生する。

```
mkdir: ディレクトリ `/var/www/html/shared' を作成できません: 許可がありません
mkdir: ディレクトリ `/var/www/html/releases' を作成できません: 許可がありません
```

mkdir を実行するときに sudoでなく普通に実行してるのが原因の模様。
下に対策を上げてみたけど、俺は対策２を採用してみた。

## 対策1. ルートディレクトリのパーミッションを変えちゃう

```bash
$ chown -R deployuser:deployuser /var/www/html
```
これでデプロイは動く様になる。その代わりnginxとかapacheの実行ユーザも変えなきゃいけないので面倒くさい。
VirtualHostで運用してるともう本当に面倒くさい

## 対策2. デプロイ中だけファイルのパーミッションを変えちゃう

capistrano に初期処理/事後処理としてパーミッションを変更させる。
とりあえず普通に動く。余計なファイルまで chownしないように deploy_toの管理に注意 

```ruby:deploy.rb
namespace :deploy do
  task :init_permission do
    on release_roles :all do
      execute :sudo, :chown, '-R', "#{fetch(:user)}:#{fetch(:group)}", deploy_to
    end
  end

  task :reset_permission do
    on release_roles :all do
      execute :sudo, :chown, '-R', "nginx:nginx", deploy_to
    end
  end

  before :starting, :init_permission
  after :finished, :reset_permission
end
```


## 対策3. mkdirのオーバーライド

mkdirを実行するタスクをオーバーライドして sudo実行にする。
capのバージョンによってtaskが増えてるかも。

```ruby:deploy.rb
namespace :deploy do
  Rake::Task["deploy:check:directories"].clear
  Rake::Task["deploy:check:linked_dirs"].clear


  namespace :check do
    desc '(overwrite) Check shared and release directories exist'
    task :directories do
      on release_roles :all do
        execute :sudo, :mkdir, '-pv', shared_path, releases_path
      end
    end

    task :linked_dirs do
      next unless any? :linked_dirs
      on release_roles :all do
        execute :sudo, :mkdir, '-pv', linked_dirs(shared_path)
      end
    end
  end
end
```
【参考】
http://qiita.com/paty-fakename/items/a1d4034d97ef9d36ec3e
webpackちゃんと理解しとこ チュートリアル編

※ webpack3のときの記事です、鮮度については注意してください

記事は解説記事ではなく作業ログです。

next → [loader編](http://qiita.com/umezo@github/items/82cf78f76be8ca0b614c)

webpack使えることは使えるんだけど、そのへんの記事を読んで色んなものとの抱き合わせで覚えていて、webpackそのものを使いこなしているか？と言われたらNoである。

webpack単体に注目してその把握を図る。

という経緯で今回は公式チュートリアルをやった。
やってみた結果、１回もやったことない人はやったほうがいいだろうなと思った。
脳死してやれば５分ぐらいだし、仕組みに思いを馳せながらやっても１時間もかからないだろう。


## とりあえずチュートリアルやるか
[公式tutorial](http://webpack.github.io/docs/tutorials/getting-started/)をみながら作業。
0. nodeの更新 `v6.3.0`へ
1. 適当に空ディレクトリを作って `git init` & `npm init`
    - git initはいらなかった

### INSTALLING WEBPACK
webpackのインストール
`i -g`でのインストールを説明しているがあんまりやらないことにしているので`i --save-dev`でやる。
後で気づいたけど別に`--save-dev`いらなかった

### SETUP THE COMPILATION
`-g`でインストールしてないので `./node_modules/webpack/bin/webpack.js ./entry.js bundle.js`で実行
あとでscriptsにするかも

`it works.`

### SECOND FILE
`It works from content.js.`

### THE FIRST LOADER
ローダを２つ追加してrequire出来る種類を増やす。
`npm install css-loader style-loader`してから`webpack`

この時点で`1.59kb`から`11.8kb`へ。
`bundle.js`の中身を見た感じ、インストールしたローダのロジックが追加されたようだ。
__改行コードが混じっててキモい__


### BINDING LOADERS
`.css`に反応して自動的にローダを選択する設定を追加する。
`webpack ./entry.js bundle.js --module-bind 'css=style!css'`

解説記事見るといきなり`webpack.config.js`作ることが多いけど、ちゃんとCLI用のインターフェース作ってあってwebpackは親切だ。

`--module-bind '拡張子=ローダ1!ローダ2....'`ということか。


### 寄り道
`style!css`を`css!style`にするとどうなる？



エラーになるのはわかりきっていたが、`CssSyntaxError`とのこと。

```
ERROR in ./style.css
Module build failed: CssSyntaxError: /css-loader!/.../node-modules/style-loader/index.js!/.../style.css:5:1: Unknown word
    at Input.error (/.../node-modules/postcss/lib/input.js:121:22)
    at Parser.unknownWord (/.../node-modules/postcss/lib/parser.js:457:26)
    at Parser.word (/.../node-modules/postcss/lib/parser.js:174:14)
    at Parser.loop (/.../node-modules/postcss/lib/parser.js:60:26)
    at parse (/.../node-modules/postcss/lib/parse.js:25:12)
    at new LazyResult (/.../node-modules/postcss/lib/lazy-result.js:80:24)
    at Processor.process (/.../node-modules/postcss/lib/processor.js:202:12)
    at processCss (/.../node-modules/css-loader/lib/processCss.js:188:11)
    at Object.module.exports (/.../node-modules/css-loader/lib/loader.js:24:2)
```

`css`だけバインドするとコンパイル(?)はできるが、スタイルシートは適用されてなかった。
`style`だけをバインドすると `Module parse failed:` だった。

`css-loader`はスタイルシートなファイルを`module.exports = 'スタイル定義'` なモジュールに変換する物と思っておけばしばらく大丈夫そう。(と思ったら、なんらかのオブジェクトになっている模様。)
あとでちゃんと読もう。

`css-loader`だけではhtmlに反映されなかったところを見ると`style-loader`はhtml上に出力する(headタグにstyleタグが生成されてた)ためのloaderであるということか。それってloaderか？

あと`style!css!style.css`は後ろにバインドされたものから逆順で処理されるのか。
__遊戯王__のチェーン解決と同じだ。


### A CONFIG FILE
コマンドラインオプションだるいってことで設定ファイルに。
設定ファイルの項目をみるに`entry`や`module`といった概念があることがわかる。
コマンドラインでは`module-bind`という項目だったが、設定ファイル上では`module/loader`という表現になっている。
多少対称性が無い気がする。そのまま`bind`という項目で良かったような。

まぁ慣れよう。

### A PRETTIER OUTPUT / WATCH MODE
うん。便利便利。

### DEVELOPMENT SERVER
`-g`無しで`webpack-dev-server`をインストール。
これは大体どの解説記事でも言及されるデバッグ用のwebサーバ。
ブラウザ側の更新まで自動でやってくれるすぐれもの。使わない理由はない。


## まとめ
さすがチュートリアル手順だけが淡々と書いてあって解説は殆ど無かった。
とはいえ混じり気がない分webpackを理解するにはやはり向いている。
【Python環境整備】脱NeoBundle。超便利補完プラグインjedi-vimの環境をdeinで整えて快適になる設定までやる


jedi-vimの設定についての記事は多いのですがNeoBundleやneocompleteと合わせた設定の記事ばかりだったのでdein.vimバージョンを書きます。

## 概要
* jedi-vimの設定をNeoBudleではなくdein.vimで行う
* jedi-vimの保管時のポップアップを表示しなくさせる
* . を打った瞬間に補完するというのをやめる
* neovimで快適にPythonプログラミングできる

 
## 環境
| 項目 | version |
|:---:|:---:|
|OS|OS X Yosemite|
|Python| Python2.7.10|
|neovim|NVIM 0.1.4

## jedi-vim 導入
[dein.vimでvimのplugin管理](http://kyo-bad.hatenablog.com/entry/2016/05/28/172510)を参考にdein_lazy.tomlにjedi-vimの設定を書きました。
###最小限の設定
最小限の設定が良いという方はこちらの設定をコピペしてください。概要の通りポップアップとか自動補完を無くしたい方は眺めるだけに留めておいてください。
ちょっと雑談ですが、プラグインインストール後に設定ファイルを書き換えても設定が反映されなくて困っています。どなたかわかる方いましたら教えて頂けると幸いです。現状ではプラグインの設定を書き換える度にプラグイン本体を消して再インストールしています(;_;)

```dein_lazy.toml
[[plugins]]
repo = 'davidhalter/jedi-vim'
on_ft = 'python'
```
この設定を書いたのち hogehoge.pyをneovimで開くとjedi-vimのインストールが始まるかと思います。
:h jediとかでちゃんとhelpが表示されればインストールできてるということです。
この設定でも十分に便利だとは思います。
ただ、ちょっと不便だと感じるケースがあって、簡単なコードで説明します。

```python:test.py
import pandas as pd

list. #この補完はすぐさま候補がでてきて嬉しい

pd. #pandasなどだと補完候補を提示してくるまですごく時間がかかってストレス
```
Pandasを使うケースが多いのでどうにかしたいということで、補完は自動ではなく自身のタイミングで開始するようにしたいと考えました。それと最低限の設定だと補完候補を移動する度に画面上半分にその候補の説明文（英語）が表示されます。正直見ないと思ったのでこれも消したいと思います。
最小限の設定後はこんな感じになります。
![min_qiita.png](https://qiita-image-store.s3.amazonaws.com/0/83457/31edb5e6-d6b4-224f-c1be-0dc0672d2f0b.png "min_qiita.png")

赤枠内がポップアップです。

![pd_qiita.png](https://qiita-image-store.s3.amazonaws.com/0/83457/ffcc6190-777e-4953-adf8-fc61b17ec516.png "pd_qiita.png")

numpyとかの補完もけっこうかかります。
pandas [B] ってやつはdeopleteによる補完候補です。ファイル内で既出の単語が候補として出てきてます。

### ポップアップなし. 自動補完なしの設定

オリジナルのリポジトリ[davidhalter/jedi-vim
](https://github.com/davidhalter/jedi-vim)のREADMEを参考に設定してみました。

```toml:dein_lazy.toml
[[plugins]]
repo = 'davidhalter/jedi-vim'
on_ft = 'python'
hook_add = '''
  let g:jedi#use_tabs_not_buffers = 1 #補完で次の候補に進むときにtabを使えるという設定にしたつもりですができませんでした。
  let g:jedi#popup_select_first = 0 #1個目の候補が入力されるっていう設定を解除
  let g:jedi#popup_on_dot = 0 # .を入力すると補完が始まるという設定を解除
  let g:jedi#goto_command = "<leader>d"
  let g:jedi#goto_assignments_command = "<leader>g"
  let g:jedi#goto_definitions_command = ""
  let g:jedi#documentation_command = "K"
  let g:jedi#usages_command = "<leader>n"
  let g:jedi#rename_command = "<leader>R" #quick-runと競合しないように大文字Rに変更. READMEだと<leader>r
  autocmd FileType python setlocal completeopt-=preview #ポップアップを表示しない
'''
```
この設定を書いたのち、適当なpythonファイルを開くとインストールが始まるはずです。
補完したいタイミングで\<C+Space\> (コントロール + スペース)を入力すると補完候補が表示するようにしました。
ポップアップも表示されなくなるはずです。

↓こんな感じ↓
![スクリーンショット 2016-07-15 16.20.03.png](https://qiita-image-store.s3.amazonaws.com/0/83457/754cfbbf-52ed-3de1-99fb-bfea4ace1ffb.png "スクリーンショット 2016-07-15 16.20.03.png")

pd.rea まで入力してから\<C + Space\>を押したらこうなったよって画像です。
ポップアップも出ていませんし、途中まで打って候補数が減っているからかあまり待たされませんでした。

普通のVimを使ってた頃は最小限しか設定しておらず、毎回 pd. で待たされていて苦痛でしたが今回で解消できてよかったです。
jedi-vimを使っていて、自動補完に悩んでいる方、読みもしないポップアップで編集画面がガタガタして困っている方は是非やってみてください。

## 参考
> [dein.vimでvimのplugin管理](http://kyo-bad.hatenablog.com/entry/2016/05/28/172510)

> [davidhalter/jedi-vim
](https://github.com/davidhalter/jedi-vim)

>[[vim]python補完プラグイン「jedi-vim」を快適にする方法(jedi-vim+neocomplete)](http://dackdive.hateblo.jp/entry/2014/08/13/130000)
\tの文字を除去する

```rb
a = "\t僕は\r\n元気です"
b = "僕は\t\r\n元気です"
c = "僕は\r\n元気です\t"
```

みたいな文字列があったときに、`\t`だけ除去したい。
こうする。
正規表現よくわかってないけど。

```rb

a = "\t僕は\r\n元気です"
b = "僕は\t\r\n元気です"
c = "僕は\r\n元気です\t"

puts a.gsub(/(\t)/,"")
puts b.gsub(/(\t)/,"")
puts c.gsub(/(\t)/,"")

```

```code:実行結果
僕は
元気です
僕は
元気です
僕は
元気です
```

irbで試しちゃった。
画像でトラッキングコードを入れられてbody下にできる空白を解消

body直下にheight=1 width=1で入っている画像を
absouteで飛ばしちゃいます。

```
body > img[width="1"]
  position: absolute
  bottom: 1px
  left: 0
  z-index: -10
```

空白取れてすっきり。

- bottom:0だと、1px分の空白？が出来てる感じがなぜかあったので、1pxにしました。

- body > img
にすることによって、divで囲まれたものなどは対象されないようにしました。
UnityでVSCode使ってたらインテリセンスなどが効かなくなった話


# VSCodeでインテリセンスが効かない
普段Unityでアプリケーションを開発するのにVSCodeを使用しているが、ある日VSCodeをアップデートすると急にインテリセンスが効かなくなったり、メソッドの参照数が表示されなくなったことがあった。

![Hoge_cs_-_Hoge.png](https://qiita-image-store.s3.amazonaws.com/0/133794/214bf8da-c71a-8de4-1931-e41e8ee91630.png "Hoge_cs_-_Hoge.png")


OmniSharpのログを見ると何やらエラーが出力されていた。

![Hoge_cs_-_Hoge.png](https://qiita-image-store.s3.amazonaws.com/0/133794/d043f89c-98e4-bd94-9715-c81555a21806.png "Hoge_cs_-_Hoge.png")

## 対処法
VSCodeの[公式サイト](https://code.visualstudio.com/docs/runtimes/unity)に記載されてた...

![Visual_Studio_Code_and_Unity.png](https://qiita-image-store.s3.amazonaws.com/0/133794/1bc3263c-0bff-6743-7078-b3e500ac94d2.png "Visual_Studio_Code_and_Unity.png")

ExtensionのC#をアンインストールし、Legacy C# Supportをインストールしたら直った。

![Hoge_cs_-_Hoge.png](https://qiita-image-store.s3.amazonaws.com/0/133794/4ce00c38-ccf3-f575-499e-f66680b08412.png "Hoge_cs_-_Hoge.png")
検索とソーシャルシェアで別の記事タイトルを使う方法

ソーシャルにシェアされた時に目を引く記事タイトルと、Google 検索結果内でクリックされやすいタイトルはちがいます。Movable Type のカスタムフィールドを使って、 &lt;title&gt; と、 og:title の中身に、それぞれ別のタイトル文言を設定してみました。

# 仕様
* 記事作成ページに、SNS用タイトルを記述するためのカスタムフィールド [SNS用タイトル] を設ける
* [SNS用タイトル] が登録されている場合、og:title にその登録内容を利用する
* [SNS用タイトル] が登録されていない場合、og:title には記事タイトルを利用する


これで、SNS用に別タイトルをつけたい場合も、面倒なのでおんなじで良いときにも、ばっちりです。

# 設定方法

## 1. カスタムフィールドを作る

以下のような設定のカスタムフィールドを作ります。

<img width="683" alt="customfield.png" src="https://qiita-image-store.s3.amazonaws.com/0/4584/9b459c89-2e79-9c4c-fdb8-056bced421b0.png">

* 名前: SNS用タイトル
* ベースネーム: ogtitle
* テンプレートタグ: EntryDataOgTitle

## 2. 記事テンプレートHTMLヘッダー内更新
HTMLヘッダー内の og:title の行を以下のコードに差し替えます。

```html
<meta property="og:title" content="<mt:If tag="EntryDataOgTitle"><mt:EntryDataOgTitle encode_html="1" /><mt:Else><mt:EntryTitle encode_html="1"></mt:If>"/>
```

# 使い方

記事の編集画面で、記事本文入力エリア下に表示されるカスタムフィールド [SNS用タイトル] に、ソーシャル用のタイトルを入力します。

※カスタムフィールドが表示されていない場合は、記事の編集画面右上の [表示オプション] - [SNS用タイトル] をONにしましょう。

<img width="828" alt="ogtitle_entry.png" src="https://qiita-image-store.s3.amazonaws.com/0/4584/5aac4ac4-9b71-d54b-0eda-60f35e97f667.png">

記事を公開して、ソースを見てみましょう。

<img width="776" alt="source.png" src="https://qiita-image-store.s3.amazonaws.com/0/4584/5db5b1af-4ad8-1c4c-edcd-28e4569247b8.png">

&lt;title&gt; と、 og:title に、編集画面で指定した文言が入っています。

Facebook Debugger で見ても、 og:title が使われています。

<img width="716" alt="debugger.png" src="https://qiita-image-store.s3.amazonaws.com/0/4584/ede87339-0f9b-456b-d1db-478107ec7d7a.png">