OmniAICreator/Qiita-1.07M huggingface dataset:
Emscripten File System API でディレクトリツリーを表示する

# Emscripten File System API でディレクトリツリーを表示する

[大本営](https://kripken.github.io/emscripten-site/docs/api_reference/Filesystem-API.html) にはごく一部のAPIしか載っていないので[ソースコードを読む](https://github.com/kripken/emscripten/blob/incoming/src/library_fs.js)かコンソールで `FS` に生えているメソッドを確認する必要がある。

## コード

```js
function ls(pathname){
  var names = FS.readdir(pathname);
  return names.map(function(name){
    var stat = FS.lstat(pathname +"/"+ name);
    return {name: name, stat: stat};
  });
}

function getFileType({mode}){
  return FS.isFile(mode) ? "file"
       : FS.isDir(mode) ? "dir"
       : FS.isBlkdev(mode) ? "blcdev"
       : FS.isChrdev(mode) ? "chardev"
       : FS.isLink(mode) ? "symlink"
       : FS.isFIFO(mode) ? "fifo"
       : FS.isSocket(mode) ? "socket"
       : "unkown";
}

function tree(pathname){
  var elms = ls(pathname).map(function(elm){
    if(elm.name !== "." && elm.name !== ".." && getFileType(elm.stat) === "dir"){
      var dir = tree(pathname +"/"+ elm.name);
      return {name: elm.name, type: dir};
    }
    return {name: elm.name, type: getFileType(elm.stat)};
  });
  return elms.reduce(function(o, elm){
    o[elm.name] = elm.type;
    return o;
  }, {});
}


FS.chdir("/home/web_user");
FS.mkdir('working');
FS.mount(MEMFS, { root: '.' }, 'working');
FS.chdir("working");

console.log(JSON.stringify(tree("/home"), null, "  "));
```

## 結果

```json
{
  ".": "dir",
  "..": "dir",
  "web_user": {
    ".": "dir",
    "..": "dir",
    "working": {
      ".": "dir",
      "..": "dir"
    }
  }
}
```
## 参考
* https://kripken.github.io/emscripten-site/docs/api_reference/Filesystem-API.html
* http://qiita.com/DUxCA/items/10efc3b74ede2f91f3c7
* http://qiita.com/DUxCA/items/5b725cb6359003c53171
matplotlib / Jupyter > 散布図を重ねる / color設定 / marker設定

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 14.04 LTS desktop amd64
TensorFlow v0.11
cuDNN v5.1 for Linux
CUDA v8.0
Python 2.7.6
IPython 5.1.0 -- An enhanced Interactive Python.
```

関連　http://qiita.com/7of9/items/b364d897b95476a30754

http://qiita.com/7of9/items/b7d38e174d4052b74cae
にて作成した２つの散布図を重ねたくなった。

参考 http://stackoverflow.com/questions/31104867/how-to-superimpose-figures-in-matplotlib
参考 Python 機械学習プログラミング by Sebastian Raschkaら

### Jupyterコード

```py
%matplotlib inline

import numpy as np
import matplotlib.pyplot as plt

data1 = np.loadtxt('res.161210_1958.cut', delimiter=',')
inp1 = data1[:,0]
out1 = data1[:,1]
data2 = np.loadtxt('res.reprod_sine', delimiter=',')
inp2 = data2[:,0]
out2 = data2[:,1]

fig = plt.figure()
ax1 = fig.add_subplot(1,1,1)

ax1.scatter(inp1, out1, label='TensorFlow prediction', color='blue', marker='o')
ax1.scatter(inp2, out2, label='from model_var.npy', color='red',marker='x')

ax1.set_xlabel('x')
ax1.set_ylabel('sine(x) prediction')
ax1.grid(True)
ax1.legend()
ax1.set_xlim([0,1.0])

fig.show()
```

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/649d7610-f01f-b791-c314-bc05162256d9.png)

argumentが0.3以下でずれが大きい。
AWS LambdaでS3イベントを処理する時の例の処理は何をしているのか


# 概要

AWS LambdaでS3イベントを処理する時に、イベントデータからオブジェクト名を取り出す時の処理を解説しました。

# 例の処理

S3イベントをトリガーに実行する Lambda Function で、イベントデータからオブジェクトのキーを取得する時のこの処理、

```
const key = decodeURIComponent(event.Records[0].s3.object.key.replace(/\+/g, ' '));
```

これは何をしてるんでしょう。


# 試してみる

こんな感じで処理の途中経過をログに出力するようにして、いくつかファイルをバケットに入れてみます。

```
console.log('original = ' + event.Records[0].s3.object.key);
console.log('replaced = ' + event.Records[0].s3.object.key.replace(/\+/g, ' '));
console.log('decoded = ' + decodeURIComponent(event.Records[0].s3.object.key.replace(/\+/g, ' ')));
```


# 結果

## その1

```
original = readme.txt
replaced = readme.txt
decoded = readme.txt
```

## その2

```
original = %E3%81%93%E3%81%93%E3%81%AB%E2%86%92+%E2%86%90%E7%A9%BA%E7%99%BD.txt
replaced = %E3%81%93%E3%81%93%E3%81%AB%E2%86%92 %E2%86%90%E7%A9%BA%E7%99%BD.txt
decoded = ここに→ ←空白.txt
```


# まとめ

ということで、

- ```replace(/\+/g, ' ')``` は「+」に変換されていた空白を元に戻す処理
- ```decodeURIComponent()``` はURLエンコードされていたマルチバイト文字のファイル名をデコードする処理

でした。
IE11でCSSアニメーションが動かなかった



```scss:IEで動かなかったコード
div{
  animation: flip-image 1s steps(60) 1;
  &:hover{
    animation-iteration-count: infinite;
  }
}

@keyframes flip-image{
  0%    { background-position: 0 0; }
  100%  { background-position: 0 (- $height); }
}
```

hoverしたときに連番PNGをエンドレスに回したかった。
`animation-iteration-count`だけを変更してみたが動かず。

```
&:hover{
  animation: flip-image 1s steps(60) infinite;
}
```

あらかじめanimationはつけず、hoverしたときだけanimationをつけてみたら成功。
RailsアプリをHerokuにデプロイした時にSass::SyntaxErrorが出たら確認すること



## 環境
- Mac OS X El Capitan 10.11.6
- Rails 5.0.0.1
- Ruby 2.3.1

## 問題
- Herokuへのデプロイ時にSass::SyntaxErrorが起きていると表示された

```
Sass::SyntaxError: Invalid CSS after "}": expected selector or at-rule, was "}"
```


## 原因
- `}` が1つ余分にあるのが原因でした

```hoge.css
.photo {
  width: 100%;
}
.review {
  font-size: 16px;
}
}
```


## 背景
- scssファイルではなく、cssファイルを使用
- scssファイルなら開発環境でSyntaxErrorが起きるが、cssファイルに書いている場合は `}` が1つ多くてもエラーが起きないため気づかなかった
Bluemixでお天気情報ゲットだぜ（The Weather Company第１段）

ずっと気になっていたBluemixのサービス、Weather Company Dataをやっと使ってみました。

![スクリーンショット 2016-12-11 20.08.06.png](https://qiita-image-store.s3.amazonaws.com/0/119378/5a7df3ec-8bc5-c56c-6224-fbf4c1b2c59f.png)

世界中のお天気予報、過去データ、注意報系等の気象情報をゲットできるのです。使い方は、サービスの画面から飛べるAPI情報のページで確認。

![スクリーンショット 2016-12-11 20.12.07.png](https://qiita-image-store.s3.amazonaws.com/0/119378/90d967c4-ccc6-766c-0b33-5d659419d024.png)

こんなかんじで、載っています。
![スクリーンショット 2016-12-11 20.13.10.png](https://qiita-image-store.s3.amazonaws.com/0/119378/d9b01e3b-ae39-3616-bff3-04f6c6e9a930.png)

じゃあ自分が欲しいデータはどうやって手に入るのかしら？というのは、下にフォームがあって、そこに引数を入れてあげて、Try it out! というボタンを押せばJSON形式のドキュメントをゲットできるURLを作ってくれます。
（キャプチャの都合上、字が小さいですけど、一応東京っぽいところの情報を日本語で取るようにしてます）
![スクリーンショット 2016-12-11 20.14.59.png](https://qiita-image-store.s3.amazonaws.com/0/119378/41932af2-01a5-3961-992e-5e01ef102dd5.png)

こんなかんじです。
で、このURLをそのままブラウザに突っ込んでも・・・何もでません。ユーザ名/パスワードが抜けてますので、それを入れます。
![スクリーンショット 2016-12-11 20.16.40.png](https://qiita-image-store.s3.amazonaws.com/0/119378/4b1213c3-f93f-dd7a-bb29-5aa5057e9a97.png)

もう１回Bluemixのページに戻って接続情報を確認します。
username:password@twcservice...というアドレスにする必要があります。
![スクリーンショット 2016-12-11 20.18.12.png](https://qiita-image-store.s3.amazonaws.com/0/119378/d3ec43f9-9714-4f1f-6f3d-223a869cee1c.png)

これを先ほどのREQUEST URLの頭と差し替えて実行すると・・・
![スクリーンショット 2016-12-11 20.24.26.png](https://qiita-image-store.s3.amazonaws.com/0/119378/c7fc95cb-03f6-e7f0-d465-a7b409371750.png)

ずらーっと出ます。

とりあえずデータをGETできるまではできました。
次回はこれをDBに突っ込んだりしたいなと思います。
Windows Subsystem for Linux で快適日本語ターミナル

# 概要
Windows Subsystem for Linux (旧 Bash on Ubuntu on Windows) で快適にターミナルで日本語使いたい。

（更新） April 2018 Update 以降の状況で更新しました。

# 個人的な結論
ConEmu や cmder も試したものの、全角文字でカーソル位置がずれるので、特に vim で日本語混じりのファイルを扱うときに使い物にならない。
cygwin などで使われている mintty がやっぱり枯れているなぁ。

# Windows Subsystem for Linux で mintty を使う方法
自前でビルドする、という男らしい対応記事もいくつか上がっていますが、時間も経って、ビルド済みのものも公開されています。

https://github.com/mintty/wsltty

は、インストーラ実行するだけで、いい感じのショートカットも登録してくれるのでよい感じ。

# いくつかの問題点
## コマンドプロンプトが色が付いていなくて寂しい
~/.bashrc を見ればわかりますが、TERM が xterm*-color の時だけ色をつけているので、mintty の Options > Terminal > Type を xterm256-color にしておきましょう。
代わりに ~/.bashrc を編集して force_color_prompt=yes の行をコメントアウトしても良いはず。

## ls したときに全体的に色がおかしい
（更新）April 2018 Update より、Windows 側のファイルシステムを Linux で参照する際に使われる drvfs の更新が行われ、metadata 対応が入りました。これにより、mount 時のオプションを適切に設定することで、見かけ上、パーミッションが 644 とか 755 に見せられたり、都合が悪いファイルは linux 側の見かけ上のパーミッションを変更できるようになりました。同じタイミングで入った /etc/wsl.conf で設定が可能です。参考: [ASCII.jpの記事](http://ascii.jp/elem/000/001/634/1634120/)

```/etc/wsl.conf
[automount]
options = "metadata,umask=22,fmask=11"
```

~~ls を責めてはいけません。Windows Subsystem for Linux で Windows 側のファイル・フォルダのバーミッションが全部 777 に見えているのがあかんのです。~~

```
$ dircolors -p > ~/.dircolors
```

~~して、.dircolors で必要ない設定を 0 に書き換えましょう。このファイル名で置いておくと、.bashrc で読み取ってくれます。~~

~~vim で編集するとどの設定値がどの色なのかが編集時にわかるため、問題の設定がどこなのかがわかりやすいはずです。OTHER_WRITABLE とか EXEC とかそのへん。~~

## カラーテーマを変更したい
4bit color のターミナルは原色でどぎついので、ターミナル側のカラーテーマをいじりたくなります。
最近、mintty には Theme 機能がついていますので、そちらで気に入ったものを設定しましょう。

独自でカスタマイズしたいときは、mintty の設定メニューからもリンクが付いている http://ciembor.github.io/4bit/ で自分の好きな淡さに調節しましょう。
設定できたら、右上の Get Scheme ボタンから mintty を選ぶと、.minttyrc に追記するためのテキストが得られます。

コピーしたら、 .minttyrc に追記したいのですが、普段は $HOME にいるはずの設定ファイルが見当たりません。wsltty では、%APPDATA%/wsltty/config にありますので、これに追記します。

## 注意点
（更新）最新の wsltty でログインシェルの変更に対応しました。

~~Fall Creators Update で、ログインシェルを bash 以外に変更できるようになったのですが、wsltty では、バックエンドに使っている wslbridge の都合で bash しか使えません。~~

~~zsh 使いの方は、この issue をウォッチしていましょう。~~
https://github.com/rprichard/wslbridge/issues/17

## その他
mintty のフォント設定などはググればきっといろんな記事が出てくるはず。Ricty Diminished で快適に使えております。
lolipop - wordpressでマルチサイトを作るまで

#丁寧ではなくて本当に申し訳ありません

あくまでも自分用の備忘録として、丁寧に手順を踏んで説明してません。なので参考にはならないと思いますのでご了承ください。（こういう甘い性格を治したい...orz）

#ロリポップのftpに入る

レンタルサーバーのロリポップにワードプレスを入れてます。何故か、ワードプレスの管理画面からphpファイルを編集できなかったのでftpに入って編集することにしました。

<img width="380" alt="スクリーンショット 2016-12-11 18.40.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/135794/fe3f5738-3e07-5e76-e5d8-1c2e197bf002.png">

#書き込み権限を与える

最初、呼び出し権限しか無かったので、普通にロリポップのブラウザで書き込み権限と実行権限を与えま

<img width="207" alt="スクリーンショット 2016-12-11 18.40.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/135794/ebaf39ae-5c23-9da3-51ed-9ebf2e3ac7ea.png">


#下記のコードを記述する

wp-config.phpに下記のようにコメントが記載してある行がありますので、そこコメントの上に下記のコードを記述してください。このコードがないとサブドメインを切るために必要な設定画面が管理画面に出ません

<img width="395" alt="スクリーンショット 2016-12-11 18.40.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/135794/9e7e30a0-ea3f-edf1-d5d7-f8afd4bf4c3b.png">




#一応バックアップは取っておく
一応デスクトップに（ここも適当でごめんなさい）バックアップをとっておきます
<img width="118" alt="スクリーンショット 2016-12-11 18.58.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/135794/ffd23b25-0ca2-6911-5b77-2cd8e37affe9.png">


#ユニーク認証キーはいいやと思ったので今は保留
下記の画面が出現して入れば、まあ、その通り、ファイルに記述してください。
<img width="1114" alt="スクリーンショット 2016-12-11 18.58.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/135794/254acacb-30c2-7465-2436-598efcbb1843.png">



#実行結果
ワードプレスの管理画面左上にこのようなボタンが出現して入れば大成功です。おめでとうございます
<img width="134" alt="スクリーンショット 2016-12-11 19.00.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/135794/77fd7cec-c157-719e-36dc-812c5e990eca.png">




#参考文献

ここまで、自分のqiitaなど参考にならないと思いますで、参考になった文献を書いておきます

ワードプレスのカスタマイズがわかる本
http://www.shoeisha.co.jp/book/detail/9784798130934

[WP]WordPressの認証用ユニークキーを設定する方法
http://www.webantena.net/wordpress/wp-config-unique-authentication-key/
java.langまとめ2（String）

## Stringクラス
### hashCodeメソッド

文字のハッシュコードを返すメソッド。

ハッシュコードは次の計算式で求められ、

$$
String.hashCode = \sum^{n}_{k = 1} 31^{(l-k)}*s[k-1]　　\text{(l = String.length())}
$$

s[k]はインデックスk番目の文字で文字列がString.length()=0の時はString.hashCodeは0となる~~(こんなの気にしなくても、javaが勝手にやってくれるから気にしなくても大丈夫)~~。

### lastIndexOfメソッド
指定された文字列の最大値、つまり、指定文字列が一番最後に出てくるインデックス番号を返すメソッド。引数にはUnicodeで指定することも可能。さらに、検索を始めるインデックス番号を指定してそこから始めることもできる。

### startsWithメソッド
指定した文字列が接頭辞として検索文字列にあればtrueを返す。

```java:StarrtsWithSample.java
public class StarrtsWithSample {

	public static void main(String[] args) {
		String str = "Java String";
		
		System.out.println(str.startsWith("Java"));        //Java～
		System.out.println(str.startsWith(" Strin"));      //Strin～
		System.out.println(str.startsWith("Java Str"));    //Java Str～
		System.out.println(str.startsWith("ing"));         //ing～
		System.out.println(str.startsWith("J"));           //J～
	}
}
```

実行結果は

```
true
false
true
false
true
```

となり、指定した接頭辞なる文字列があるとtrueを返してくれる。上の例だと、Java~、Strin~、Java Str~、ing~、J~が接頭辞として検索されている。

### endsWithメソッド
前のstartsWithとは逆に今度は接尾辞を指定して文字列が検索文字列にあったらtrueを返す。

例えば、英単語の検索で後ろに~ingがあるかないかを調べてみるものを書いてみると

```java:EndsWithSample.java
public class EndsWithSample {

	public static void main(String[] args) {
		String[] strs = {"trying","boolean","string","building","having","catch","throw"};
		
		for(String str : strs){
			System.out.println("検索文字列: " + str);
			
			if(str.endsWith("ing")){
				System.out.println("～ingがあります。");
			} else {
				System.out.println("～ingはありません。");
			}
		}
	}
}
```

結果は次のようになる。

```
検索文字列: trying
～ingがあります。
検索文字列: boolean
～ingはありません。
検索文字列: string
～ingがあります。
検索文字列: building
～ingがあります。
検索文字列: having
～ingがあります。
検索文字列: catch
～ingはありません。
検索文字列: throw
～ingはありません。
```

### isEmptyメソッド
length()=0の時にtrueを返すメソッド。

### splitメソッド
指定した文字列で分割してその結果を配列として返すメソッド。何回まで分割させるか指定することも可能。

下記のものはURLを/で分割するもの

```java:SplitSample.java
public class SplitSample {

	public static void main(String[] args) {
		String str = "developers.google.com/analytics/devguides/reporting/mcf/v3/";
		
		for(String part : str.split("/")) {
			System.out.println(part);
		}
	}
}
```

結果は

```
developers.google.com
analytics
devguides
reporting
mcf
v3
```

になる。

### toCharArrayメソッド
文字列（String型）をCharの配列にして返すメソッド。

例えば、

```java:ToCharArraySample.java
public class ToCharArraySample {

	public static void main(String[] args) {
		String str = "Google";
		char[] char1 = str.toCharArray();
		
		for(char partChar : char1) {
			System.out.println(partChar);
		}
	}
}
```

を実行すると、

```
G
o
o
g
l
e
```

を返して、char型の配列に格納される。
terraform で Mackerel の監視ルールを管理する

## はじめに

ここのところ terraform を使い AWS の構成を管理するようにしています。
コードで管理することで、PullRequestベースでレビューしあうことができ、かつリポジトリに過去の履歴が全て残るという点がすばらしいですね。
その分、コードに落す工数がかかってしまいますが。

今開発しているサービスでは Mackerel を監視に使用するつもりでいます。
Mackerel は go で書かれたライブラリがあり、簡単にAPIへのアクセスができます。
監視ルールも AWS と同じく terraform で管理できると良いな、と思い、terraform で Mackerel を管理する provider を作ってみました。

## terraform-provider-mackerel
### terraform-provider-mackerel とは
Hashicorp社が開発している [terraform](https://www.terraform.io/) というツールのプラグインです。
このプラグインを使用することで terraform で Mackerel の設定を管理することができます。

https://github.com/kjmkznr/terraform-provider-mackerel

### できること
現時点では以下のことができます。

* ダッシュボードの管理
* 監視ルールの管理
    * ホストメトリック
    * サービスメトリック
    * 外形
    * 式

API が用意されていないロールの管理や、ユーザの管理、AWS Integrationなどはできません。

### インストール方法

ソースからビルドする場合は `make build` とすれば実行ファイルが `bin/terraform-provider-mackerel` というファイル名で作られます。
[govendor](https://github.com/kardianos/govendor) というツールをビルド時に使用していますので、あらかじめインストールしておく必要があります。

ビルド済みのファイルを使用する場合は、[Release](https://github.com/kjmkznr/terraform-provider-mackerel/releases)ページからダウンロードすることができます。

`terraform-provider-mackerel` を `$PATH` に含まれているディレクトリに配置するか、以下のような設定ファイルを作ることで terraform から認識されるようになります。

* ~/.terraformrc

```
providers {
    mackerel = "/path/to/terraform-provider-mackerel"
}
```

### 使い方

mackerel.tf

```hcl
provider "mackerel" {
    apikey = "xxxx"
}

resource "mackerel_dashboard" "foobar" {
    title         = "terraform_for_mackerel_test_foobar"
    url_path      = "foo/bar"
    body_markdown = <<EOF
# Head1
## Head2

* List1
* List2
EOF
}

resource "mackerel_host_monitor" "cpu" {
    name                  = "CPU"
    duration              = 10
    metric                = "cpu%"
    operator              = ">"
    warning               = 85.5
    critical              = 95.5
    notification_interval = 10
}
```

```shell-session
$ terraform plan

+ mackerel_dashboard.foobar
    body_markdown: "# Head1\n## Head2\n\n* List1\n* List2\n"
    title:         "terraform_for_mackerel_test_foobar"
    url_path:      "foo/bar"

+ mackerel_host_monitor.cpu
    critical:              "95.5"
    duration:              "10"
    metric:                "cpu%"
    name:                  "CPU"
    notification_interval: "10"
    operator:              ">"
    warning:               "85.5"


Plan: 2 to add, 0 to change, 0 to destroy.

$ terraform apply
```

![dashboard.png](https://qiita-image-store.s3.amazonaws.com/0/9450/7e05d063-70d6-d4a8-1056-d5c0ae43b893.png)

![cpu.png](https://qiita-image-store.s3.amazonaws.com/0/9450/917b8e3c-be09-9cf7-92fb-f0295cb5f42a.png)

以上です。
Pharo SmalltalkでSlackにメッセージを投稿したり、Botを作ったりする

PharoからSlackにメッセージを投稿したり、問い合わせに応えるBotを作ったりする例です。
そこそこ簡単にやれます。


## Pharoの準備
この辺から環境に応じてPharoを入手、インストールしてください。
http://pharo.org/download


## SlackのTest tokenの入手
Slackにユーザ登録して、適当なteamを作るかjoinした後、
https://slack.com/

そのteam内で利用可能なTokenを以下から入手します。
https://api.slack.com/docs/oauth-test-tokens


# Phaslack
Phaslackは拙作のSlack APIクライアントライブラリです。
http://smalltalkhub.com/#!/~kaminami/Phaslack


自分にとっての必要最低限しか実装していませんが、メッセージ送受信、添付ファイル投稿あたりは出来るようになっています。
PSlackClientクラスのclass側にサンプルが並んでいます。


## PharoへのPhaslackの導入
以下のスクリプトをPharoのWorkspace等でdoItして必要なライブラリを導入します。

```smalltalk
"Phaslackの導入"
Gofer new
 url: 'http://mc.stfx.eu/Neo';
package: 'Neo-JSON-Core';
load.

Gofer new 
 url: 'http://mc.stfx.eu/ZincHTTPComponents';
package: 'Zinc-WebSocket-Core';
load.

Gofer new smalltalkhubUser: 'kaminami'
    project: 'Phaslack';
    package: 'ConfigurationOfPhaslack';
    load.
(Smalltalk at: #ConfigurationOfPhaslack) project load: '1.0'.
```

# メッセージ投稿
とりあえずメッセージ投稿の例です。
tokenは上記で取得したものを設定、チャンネルはあらかじめSlackクライアントなどで作っておいてください。

```smalltalk
"メッセージを投稿"
| userName token client |
userName := 'greeter'. "任意のユーザ名で投稿できる。権限はtokenを取得したユーザとなる"
token := 'YOUR_TOKEN'.
client := PSlackClient user: userName token: token.

client 
	chatPostMessage: 'Hello' 
	channel: 'test'
```


# Pharoのスクリーンショットを返すBot
メッセージ投稿を待ち受け、投稿があったらアクションを起こす、チャットBotの例です。

以下は、「@world image」が投稿されたら、Pharoのスクリーンショットを投稿する、というBotスクリプトです。
サーバサイドで動作するPharoイメージに仕掛けておくと便利、かもしれません。


```smalltalk
"「@world image」が投稿されたら、Pharoのスクリーンショットを同チャンネルに投稿する"
| token client res url block handler receiver |
token := 'YOUR_TOKEN'.
client := PSlackClient token: token.

res := client rtmStart.
url := res values at: 'url'.
block := [ :slackClient :receivedValues | 
	| msg channel |
	channel := receivedValues at: 'channel'.
	msg := receivedValues at: 'text'.
	
	(msg beginsWith: '@world image') ifTrue:  [ 
		| ws |
		ws := WriteStream on: ByteArray new.
		PNGReadWriter putForm: World imageForm onStream: ws.

		slackClient 
			filesUploadStream: ws contents readStream
			fileNamed: 'World_imageForm.png' 
			channels: {channel}.
	 ].
 ].
handler := PSlackBlockEvaluator client: client block: block.

receiver := PSlackRtmReceiver url: url handler: handler.
receiver start.
receiver inspect. "停めるには、receiverオブジェクトにstopメッセージを送る"

```

# おわりに
Pharo SmalltalkからのSlack API利用例でした。
SwiftでUILabelの縦揃えをする

StoryboardやXIB上で設定したかったのでライブラリにしました。

https://github.com/darquro/VerticalAlignmentLabel

インストール

```ruby
pod "VerticalAlignmentLabel"
```

StoryboardやXIBでUILabelを貼り付けたら、`Class`と`Module`を以下のように変更します。

<img width="307" alt="スクリーンショット 2017-09-04 0.11.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/92539/bb1eba4e-8111-6d88-3ae7-d3d0cc8085aa.png">

次にAttribute Inspectorに移動し、`Top`または`Buttom`をOnにします。
(*両方Onだと`Bottom`になります。)

<img width="308" alt="スクリーンショット 2017-09-04 0.14.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/92539/f1a68e6b-5840-e926-0723-34aa63c2794a.png">

実行結果

<img width="312" alt="SS1.png" src="https://qiita-image-store.s3.amazonaws.com/0/92539/66e1a8a2-f601-945a-8eea-a4dcd94228f7.png">

コード上の指定だとこのようになります。

```swift
// var label: VerticalAlignmentLabel

label.verticalTextAlignment = .top
label.verticalTextAlignment = .center
label.verticalTextAlignment = .bottom
```
Reactをやろう！そう思ったならッ！その時すでにFlowを使う準備は終わっている！

2016年12月現在、Reactを使ってるみなさんにおかれましては、必ずFlowを使っているとおもいます。

[Flow | A static type checker for JavaScript](https://flowtype.org/)

使ってない？本当ですか？
あなたの`.babelrc`は以下のようになっていませんか？

```.babelrc
{
  "presets": ["react"]
}
```

ここで、`React preset`の内容を確認してみましょう。

[React preset · Babel](https://babeljs.io/docs/plugins/preset-react/)


[![https://gyazo.com/7b968e9c3903377dd59f714fcdac7cbf](https://i.gyazo.com/7b968e9c3903377dd59f714fcdac7cbf.png)](https://gyazo.com/7b968e9c3903377dd59f714fcdac7cbf)

よく見てください。

[![https://gyazo.com/ff6ef2e753c95f3ac154f3779ea6a432](https://i.gyazo.com/ff6ef2e753c95f3ac154f3779ea6a432.png)](https://gyazo.com/ff6ef2e753c95f3ac154f3779ea6a432)

[![https://gyazo.com/2a61712af699378c4e4d21e69dfe7514](https://i.gyazo.com/2a61712af699378c4e4d21e69dfe7514.png)](https://gyazo.com/2a61712af699378c4e4d21e69dfe7514)

もう、おわかりですね。
`React preset`を入れた時点で`flow`を使う準備は終わっているのです。

もうあとは２つほどコマンドを叩くだけです。

```
$ touch .flowconfig
$ npm install --save-dev flow-bin
```

これで、型安全にReactを書いていけるでしょう。

## まとめ
presetの内容をきちんと確認してから使いましょう。
Firebase Realtime Databaseを試してみた

# Firebase Realtime Database について


[Firebase Realtime Database](http://qiita.com "Qiita")はNoSQLのクラウドのデーターベースです。データはすべてリアルタイムにクライアントと同期をされるので、チャットアプリなどの開発が非常に簡単に行うことができます。

今回は簡単なiOSチャットアプリの開発についてご紹介したいと思います。

# 初期設定
### インストール
Cocoapodsが対応されているので、インストールは簡単することができます。

```ruby
pod  'Firebase/Database'
```

`pod install`を実行してインストール完了です。

あとは、`application:didFinishLaunchingWithOptions:`内にFireAppの共有インスタンスの設定を行えば完了です。

```swift
FIRApp.configure()
```

### Google Info plistの設定

Firebase consoleから新しいアプリを作成し、`GoogleService-Info.plist`を取得して、Xcodeのプロジェクトに保存します。

### Firebase Database ルールの設定

データの書き込みと読み込みに関してアクセス権などの制限ができます。
今回はテストのためすべてのユーザーに書き込みと読み込みを許可します

```javascript
{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}
```

![Screen Shot 2016-12-11 at 18.40.31.png](https://qiita-image-store.s3.amazonaws.com/0/90489/65d120cc-9185-d132-31ca-9f4c2641bcfc.png)


## データの保存について

基本的な書き込み操作については`setValue`を用いて行います。

```swift
self.ref.child("users").child(1).setValue(["username": "wakaka", "email" : "abx@xyz.com"])
```
このようにに書き込みを行うとFirebase Realtime Database上でjsonとして保存されます。

<img width="295" alt="Screen Shot 2016-12-11 at 18.54.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/90489/fe47ab9c-26fe-1ec3-d936-f956f9d61717.png">

今回はチャットを作成するのでmessageを時系列順で保存をします。
`timestamp`をIDとして、messageを保存するやり方もありますが、今回はFirebase Realtime Databaseに用意されている`childByAuto`メソッドを使用します。

`childByAutoId`は新しい要素を追加するたびに一意のIDを生成します。これによって生成されるIDはタイムスタンプに基づいているため、リストのアイテムは自動的に時系列に並び替えられます。

```swift

self.ref?.child("messages").childByAutoId().setValue(["name" : message.name, "text" : message.text, "timestamp" :message.timestamp])

```

このように書き込みを行うと、以下のように`messages`の要素の中に一意のIDと共にmessageが書き込まれていきます。

<img width="343" alt="Screen Shot 2016-12-11 at 19.02.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/90489/4718daf4-3d78-4fdf-9d9e-3e24caeebd75.png">

## データの取得について

最後にデータの取得についてです。
チャットは常にデータベースの変更をキャッチする必要があります。
それを行うために、イベントリスナーをアタッチする必要があります。
今回は`FIRDataEventTypeChildAdded`イベントにより、アイテムのリストの追加をリッスンします。

```swift
self.ref?.child("messages").observe(.childAdded, with: { [weak self](snapshot) -> Void in
  let name = String(describing: snapshot.childSnapshot(forPath: "name").value!)
  let text = String(describing: snapshot.childSnapshot(forPath: "text").value!)

  // ここでtableviewなどの更新を行う  
            
  self?.finishReceivingMessage()
})
```

以上で、データベースの変更をキャッチし、tableviewなりのデータの更新を行えば簡単なチャットアプリを作成することができます！

## まとめ

Firebase Realtime Database使用すれば非常に簡単にリアルタイムアプリケーションが作成できます！

今回は本当に簡単なチャットあぷりになりましたが、開発時間は２時間程度できました。
友達と一緒に秘密のチャットルームを作るのはいかがでしょうか。

## おまけ
今回作ったチャットアプリです。
（シミュレーターとの会話です）

![Slack for iOS Upload.jpg](https://qiita-image-store.s3.amazonaws.com/0/90489/cd801a78-38bf-9f38-3c7b-e6529ad151ba.jpeg)
SECCON 2016 オンライン予選

チームshioshiotaで参加して結果は2000点で39位でした。
傾向が変わって普通のCTFの問題が多いように見えました。

###Anti-Debugging
パスワードが合うとデバッガ検知して落とす処理が入ってる。
デバッガを立ち上げない状態でやっても1/0とかやっててうまくいかないので、デバッガ検知の回避が必要。
ただ、デバッガ検知した後に分岐してexitするタイプだったのでIDA Proで分岐潰しまくるだけでいけた。

###pppppoxy
少し触ってみて、問題名がproxyじゃなくてpoxyなのでhttpoxyの脆弱性調べてみたらそれっぽかった。
Burp Suiteで、Proxy: http://localhost:8080/ ヘッダをつけてやるとユーザのパスワードのmd5のハッシュを取る通信が取れた。
通信が取れたのはいいもののadminのハッシュがググっても出てこないからどうしたもんかと思ったけど、逆に考えて通信改竄で1のmd5値にしたらadmin:1でログインできた。

###uncomfortable web
HTTPリクエストではなくスクリプトファイルをアップロードしてローカルのサーバを攻撃する問題。
まず、/select.cgiを調べたらtxtパラメータに%00を末尾につけることで任意のファイルを読み込める事が分かったので、/authed/.htpasswdを取得。
.htpasswdはjohnでパスワードを復元したらtestだと分かったので、/authed/sqlinjに入れた。

sqlinjディレクトリの中には無駄に100個もcgiがあったので、下のようにforで全部に対してSQLインジェクションの検査をしてみたら72.cgiだけSQLインジェクションができるっぽい事が分かった。

```bash
for i in `seq 1 100`
do
  curl --user keigo:test "http://127.0.0.1:81/authed/sqlinj/$i.cgi?no=4822267938%27%7c%7c%27"
done
```

sqlmapが使えなくて面倒だけどいろいろやったら、sqliteのDBなので下のようにUNIONを使ってsqlite_masterからDB情報抜けば良い事が分かった。最後にf1agsテーブルからf1agを抜くところでflagとしてしまって無駄に時間食った。

```bash
curl --user keigo:test 'http://127.0.0.1:81/authed/sqlinj/72.cgi?no=%27+OR+%271%27=%271%27+UNION+ALL+SELECT+sql%2cname%2ctbl_name+FROM+sqlite_master%3b--+'
curl --user keigo:test 'http://127.0.0.1:81/authed/sqlinj/72.cgi?no=%27+OR+%271%27=%271%27+UNION+ALL+SELECT+f1ag%2cf1ag%2cf1ag+FROM+f1ags%3b--+'
```
どうしてもゲームプログラマになりたい人へ【フロント編】＃F０１

## 記述する動機

私、とある専門学校でPGを教えています。はや10年。
いまだにSEもやってます。
学生さんたちに読んでもらうために書いているのですが、全て実例です。学校名は秘密！！

## フロント編
言語
基本であるC,C++は避けられません。
できればSTLも理解しておきましょう。
３D画像処理のためにOPENGLも必須です。
3D画像処理をガリガリ書けるようになること
Makeもきちんと理解しておきましょう。

android,iphoneのネィティブ開発。
unity,アンリアルはどちらかやっておきましょう。

##開発環境
エディタ
個人的にはSublime一択です。好みの問題ですね。

コンパイラ
gcc

Linux環境、Mac環境
ターミナルからMakeできるように

IDE
Mac環境　XCODE
他OS Eclipse
bash の for ループ

こうやって書ける

```
#!/bin/bash

for((i=0;i<5;i++)){
    echo $i
}
```
スペース入れてもＯＫ

```
#!/bin/bash

for (( i = 0 ; i < 5 ; i ++ )) {
    echo $i
}
```

出典
http://qiita.com/b4b4r07/items/e56a8e3471fb45df2f59

man bash 抜粋

```
for (( expr1 ; expr2 ; expr3 )) ; do list ; done
    First,  the  arithmetic  expression  expr1  is  evaluated according to the rules
    described below under ARITHMETIC EVALUATION.  The arithmetic expression expr2 is
    then evaluated repeatedly until it evaluates to zero.  Each time expr2 evaluates
    to a non-zero value, list is executed and the  arithmetic  expression  expr3  is
    evaluated.   If  any  expression is omitted, it behaves as if it evaluates to 1.
    The return value is the exit status of the last command in  list  that  is  exe-
    cuted, or false if any of the expressions is invalid.
```

; do list ; done の部分がなんで { list } でいいのか謎。
PHPで画像のリサイズ＆圧縮する方法を比較する

この記事は[一人PHP総復習 Advent Calendar 2016](http://qiita.com/advent-calendar/2016/php_beginner)4日目の記事です。
いきなり内容が飛びますが、進捗がやばいので一旦書きます汗

PHPで画像をリサイズ＆圧縮する際、どのライブラリを使うのがよいのか迷っていくつか調べたのでまとめておきます。
Laravelの記法などを大いに含むので、How toは参考程度にしてください。

サンプルでは保存をjpgにしてますが、元ファイルの拡張子を取得などしてください。あと本来必要なエラー処理とかも省いています。

## 試した環境
* PHP7
* Laravel5.3

## php-gd
PHP拡張モジュールの[GD](http://php.net/manual/ja/book.image.php)を使う方法です。
導入はこちらの記事などを参考に。

[PHPの拡張モジュールGDが動くまでの試行錯誤](http://qiita.com/nusa/items/8a71dcc630e7d7118f5b)

### How to

```php
$h = 200; // リサイズしたい大きさを指定
$w = 200;

$file = $request->file; // 加工したいファイルを指定

// 加工前の画像の情報を取得
list($original_w, $original_h, $type) = getimagesize($file);

// 加工前のファイルをフォーマット別に読み出す（この他にも対応可能なフォーマット有り）
switch ($type) {
    case IMAGETYPE_JPEG:
        $original_image = imagecreatefromjpeg($file);
        break;
    case IMAGETYPE_PNG:
        $original_image = imagecreatefrompng($file);
        break;
    case IMAGETYPE_GIF:
        $original_image = imagecreatefromgif($file);
        break;
    default:
        throw new RuntimeException('対応していないファイル形式です。: ', $type);
}

// 新しく描画するキャンバスを作成
$canvas = imagecreatetruecolor($w, $h);
imagecopyresampled($canvas, $original_image, 0,0,0,0, $w, $h, $original_w, $original_h);

$resize_path = public_path('image/new.jpg'); // 保存先を指定

switch ($type) {
    case IMAGETYPE_JPEG:
        imagejpeg($canvas, $resize_path);
        break;
    case IMAGETYPE_PNG:
        imagepng($canvas, $resize_path, 9);
        break;
    case IMAGETYPE_GIF:
        imagegif($canvas, $resize_path);
        break;
}

// 読み出したファイルは消去
imagedestroy($original_image);
imagedestroy($canvas);
```
### 特徴
* フォーマット別に処理を分けなくてはいけない
* フォーマット別に圧縮率を分けやすい
* 元画像の情報を取得しなくてはいけない
* 基本の処理だけなら十分

## Imagick
画像処理ツールImageMagickをPHPから使う拡張モジュールです。
導入はこちらの記事などを参考に。
[CentOS6 上のPHPでImageMagickを動かす](http://qiita.com/fulcrum/items/5563f3cc2f976c19f86f)

### How to

```php
$w = 200; // リサイズしたい大きさを指定
$h = 200;

$file = $request->file; // 加工したいファイルを指定
$resize_path = public_path('image/new.jpg'); // 保存先を指定

// 加工するファイルを読み出し
$original_image =  new Imagick($file);
$original_image->resizeImage($w, $h, Imagick::FILTER_LANCZOS, 1);
$original_image->writeImage($resize_path);

// 読み出したイメージは消去
$original_image->destroy();
```

### 特徴
* 対応フォーマット、できる処理はかなり多い
* 加工後のファイルサイズが大きくなる
* リサイズ・圧縮だけならオーバースペック感

## Intervention/Image
Laravelプラグインの[Intervention/Image](http://image.intervention.io/)を使う方法です。
GDとImagickをラップしています。

導入、設定などはこちらの記事などを参考に。
[Laravel5 Intervention Image 2.xを利用した画像加工](http://qiita.com/m1takahashi/items/eee3815309eb85d2b870)

### How to
```php
$h = 200; // リサイズしたい大きさを指定
$w = 200;

$resize_path = public_path('image/new.jpg'); // 保存先を指定

$original_image = Image::make($file->path);
$original_image->resize($w, $h);

$original_image->save($resize_path);
```

サイズが片方だけ指定されているときは元画像の縦横比に合わせてリサイズしてくれます。

```
$image->resize(200, null, function ($constraint) {
    $constraint->aspectRatio();
});
```

### 特徴
* 簡潔に記述できる
* 圧縮率は一括指定できるが、PNG、GIFなどは未対応
* 基本的にこれで良さそう

## まとめ
Intervention/ImageはGDもImagickもラップしてくれているので、基本的にこれを選択するので良さそうです。（他にユースケースがあれば教えてください:bow:）
あとIntervention/Imageでもpngとか圧縮したい場合はどうするのがベストなのでしょう・・。場合分けしてベタの関数書くしかないのかな。
Failed to mount component: template or render function not defined. (found in root instance) の対応


Webpack で Vue.js 2 を含めてビルドした場合、実行時にタイトルのエラーが発生した。

公式ドキュメントでは、下記にて解説されている。
https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build

ポイントは、下記。

* Vue.js では、スタンドアロン版とランタイムのみ版がある。
* 前者はテンプレートコンパイラを含み、後者は無い。
* デフォルトでは、NPM パッケージでは、ランタイムのみ版をエクスポートする。
* このテンプレートコンパイラが無いためにエラーが発生する。

Webpack によるビルドでスタンドアロン版を含めるなら、下記を `webpack.config.js` で設定すれば良い。

```webpack.config.js
module.exports = {
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.common.js'
        }
    }
};
```
JSONで動的にオブジェクトを指定する方法

たとえばView側でクリックイベントの引数として値を渡し、JSONのフィルタリングのための値として受け取る場合、スマートに値を使用するケースを想定。

```
function getPage (id) {
    var dataPath = 'data.json';
    var data = JSON.parse(fs.readFileSync(dataPath, 'utf8'));
    // ローカルのJSONファイルのオブジェクトを指定して値を取得してコンソールに出力
    console.log(data.pages[id].title);
    // データの中のpagesオブジェクトの中にあるidオブジェクトのtitleを取得
}
```
通常JSONのデータをフィルタリングしていく場合、例えば<code>data.id.title</code>という具合に<code>.</code>でつないでいくわけですが、これだと変数として渡せないので、<code>[]</code>で渡せるという話です。

何かしらのIDをフックとして受取り、それでJSONのデータをフィルタリングして、JSONのデータをView側に返すというケースで使えるかもしれません。

関数に渡してみたり、オブジェクトを再定義してみたり、いろいろ試したあげく、ただ無知だったことで時間を潰してしまった。

<code>.</code>と<code>[]</code>の違い、覚えておこう。。
目的と手段と、日々迷い

昨日の諸岡さんが書きたい内容の全てを描いてくれましたので、ネタがもうありませんｗ

なので、皆さんの参考になるようなことは全く書けません。
自己を振り返って、今後を考える指標にしたいというとても個人的な理由のために書きますがお許しください。

#起業する人の考え
目的
〇〇業界のこんなことを解決したい！
こんな世界にするために、このプロダクトを作る！
〇〇が好きでこれを広めたい！

手段
スタートアップを始める
起業する
チームを組む

一般的には目的があって、そのために手段として起業があると思いますが、自分は、手段が目的となっています。

つまり、やりたいことや解決したいほどのミッションはないのですが、起業やスタートアップをすることが目的になっています。

その背景には、稼ぎたい、注目されたい、挑戦したい気持ちがあるのですが、全ては自分の内側だけからでてくる欲求ですので、やはり軸がなく、何か始めようとしてもブレてしまいます。

本当にやりたいことや、好きなことを迷いなく突き進めることってすごい尊いことなんだと、最近より一層感じています。

しかし、このまま何かしたい！と言いながら朽ちていくのも嫌なので、やはり何か成し遂げたいわけです。

#幼い頃好きだったことを思い出す
大人になってくると、損得勘定や確率などで物事を考えてしまいます。
もっと純粋だった頃何が好きで、何に夢中になっていたのかを思い出したいと思います。

小学生の時の夢はお寿司屋さんでしたｗ
理由はイカが好きだったので、寿司屋になれば好きなだけ食べれると思ったからです。

得意なことは図工でした。
絵を描いたり、何かを作り出すことや考えることは小さな頃から好きだったようです。

人を驚かせたり喜ばせたりすることが好きでした。
サプライズを考えたり笑かすことは楽しかったみたいです。

#今後やりたいこと
自分で考えたり計画を立てて実行すること、人を喜ばせることが楽しいと思うことを考えると、何が向いているのかな？

飲食業界に勤めていたこともあるので、飲食業界向けのITサービスで起業することがいいのかな？

んーーーー、着地点が見えてきませんｗ

飲食店のスタートアップ？を目指す！

飲食店の不満や解決することはやってみないとわからないので、飲食店を出してみようと思います！

#プログラミングを学ぶ意味
自分にとってプログラミングとは、物事を理論的に考えたり、順序立てて考えるためのツールでした。
もう一つは自分が考えたことを表現することの楽しさ。
どうやればできるか考えて迷って、解決できて、表現できた時の気持ちよさはすごくありました。
今後飲食で何かするにしてもジーズアカデミーで学んだ考え方や、解決の仕方は一生ためになると感じています。
それとともに、同じ志を持つ仲間がたくさんできたこと、刺激をもらえる環境があることが自分にとっては一番良かったことだと思います。

#これから
また色々迷ったり、ぶれたりすると思います。
何かしたいけど、何をしようか？
本当にやりたいことってなんなのかな？
こんなことをこれからもずっと考えながら生きていくと思います。

しかし、一つやったことがダメでもそれで終わらず、あきらめず、また挑戦していきます。
![20151203134606.jpg](https://qiita-image-store.s3.amazonaws.com/0/116193/6a055216-f25e-0d87-467d-e1a2a846d6a7.jpeg)
皆さんご存知のカーネル・サンダース氏も様々な職を転々とし、ケンタッキーのフランチャイズを始めたのも60歳を過ぎてかららしいです。

自分は、もう少し早く成功したいですが、おじいちゃんになっても挑戦し続けていきたいと思います！

全くエンジニア色ありませんでしたが、最後まで読んでいただきありがとうございました！
sedで置換がうまくいかなかった話

この記事は諸事情により、[このリンク先](https://sublimer.hatenablog.com/entry/2016/12/11/192100)に移行しました。
This article has moved to [this link](https://sublimer.hatenablog.com/entry/2016/12/11/192100) due to various reasons.
RubyでhttpsのAPI叩いてJSONをファイルに保存してそのファイルをJSONとして読み込むまで

RubyでAPIたたくときのコードの書き方や、ファイルへの保存、JSONの扱いなどについてのメモです。

## ざっくり流れ
1. httpsのAPIをたたいて、JSONを取得
2. 取得したJSONを.jsonで保存
3. 更に、保存したJSONファイルからJSONオブジェクトの読み込み

やりたいことは、1だけでしたが、
どうせならファイルに保存するとこまでやってみたい
更にどうせならJSONファイルの読み込みもやってみたい
と思い、2と3を追加しました。

今回対象とするAPIは、[**GitHub Search API**](https://developer.github.com/v3/search/)です。
ソースで使用しているパラメタなども、Referenceに書かれているものをそのまま使用しています。

他の人のソースからの引用がかなり多く、理解しきれていない部分もあると思いますが、いったんやりたかったことはできたので、OKとしています。
※特にSSL周りでかなりはまりました。引用に記載されている記事がなかったらどうなっていたことやら。。。

```ruby
# https通信に必要
require 'openssl'
require 'net/http'

# JSON加工用に必要
require 'json'

# Logger
require 'logger'

TIMEOUT_SEC = 10

# ロガー
logger = Logger.new('./webapi.log')

url = 'api.github.com'
https = Net::HTTP.new(url, 443)
https.open_timeout = TIMEOUT_SEC
https.read_timeout = TIMEOUT_SEC
https.use_ssl = true
https.verify_mode = OpenSSL::SSL::VERIFY_PEER
https.verify_depth = 5
# [OpenSSL::SSL::SSLError]への対応のため、証明書を直に指定
https.ca_file = 'C:\cacert.pem'

begin
  response = nil
  path = '/search/repositories?q=tetris+language:assembly&sort=stars&order=desc'
  https.start do
    response = https.get(path)
  end

  # 同階層にSample.jsonがなかったら作成、あったらその末尾にputsしていく
  File.open('.\Sample.json', 'a') do |file|
    file.puts response.body
  end

  # ファイルからJSONオブジェクトの読み込み
  File.open('.\Sample.json') do |file|
    hash = JSON.load(file)
    puts hash['total_count']
  end
# rescueするErrorは今回発生したものだけにしておく
rescue OpenSSL::SSL::SSLError => e
  logger.error([e.class, e.message].join(' : '))
  logger.error('証明書関係のエラー')
rescue JSON::ParserError => e
  logger.error([e.class, e.message].join(' : '))
rescue => e
  logger.error([e.class, e.message].join(' : '))
end
```
ちょっと試してみるだけのつもりが、GitHub Apiがhttpsなため、SSL周りでかなり苦労しました。。。
httpでも叩くことができるAPIにしておくべきでしたね。
まぁ、普段あまり意識することがないセキュリティ部分に若干触れることができたので、良しとします！
## 参考にしたサイト
[OpenSSL::SSL::SSLError]の解決(非常に助かりました。これらの記事がなかったら、完全に挫折していました。)
http://d.hatena.ne.jp/komiyak/20130508/1367993536
https://mcrn.jp/blog/2015/10/28/205049.html

RubyでJSONを扱うため
http://qiita.com/awakia/items/bd8c1385115df27c15fa

Loggerについて
http://qiita.com/mogulla3/items/a4bff2e569dfa7da1896
macOSでduコマンドの-dオプションが使えないとき

# TL;DR

`sudo`を付けて実行しよう

# `du`コマンドとは

簡単に言うと，ディレクトリ，ファイルの容量を調べるコマンドです。
この記事は`du`の使い方の説明文ではないので，このコマンド自体の説明の詳細は記載しません。

# Linuxでの`du`コマンド

Linuxでは`du`に`--max-depth`というオプションが使えます。

```
$ du -ah --max-depth=1
```

普通に`du`だけで実行すると，*ディレクトリ下のファイル*や*ディレクトリ下のディレクトリ下のファイル*までをズラーっと全て出力してしまいます。
ですが，これを使う事でディレクトリの何階層までをまとめて計算して表示するかを指定出来ます。

# macOSでの`du`コマンド

macOSでもこの`du`コマンドを使用してみましょう。

```
$ du
......
......
4.0K	./Program/Carbonara/README.md
 50M	./Program/Carbonara/src/img
4.0K	./Program/Carbonara/src/md/check.md
4.0K	./Program/Carbonara/src/md/restaurant.md
 12K	./Program/Carbonara/src/md
 50M	./Program/Carbonara/src
100M	./Program/Carbonara
......
......
 60G	.
```

カレントディレクトリ下のファイルの全ての容量を表示しちゃうので表示が長くって端折って記述していますが…… 使えています。

```
$ du -ah
......
......
4.0K	./Program/Carbonara/README.md
 50M	./Program/Carbonara/src/img
4.0K	./Program/Carbonara/src/md/check.md
4.0K	./Program/Carbonara/src/md/restaurant.md
 12K	./Program/Carbonara/src/md
 50M	./Program/Carbonara/src
100M	./Program/Carbonara
......
......
 60G	.
```

オプションもキチンと使えています。
(結果を端折っていることもあって結果が上と変わってはいないけれど，動作はしています)。

## `--max-depth` (`-d`)を使用する

```
$ du -ah --max-depth=1
du: illegal option -- -
usage: du [-H | -L | -P] [-a | -s | -d depth] [-c] [-h | -k | -m | -g] [-x] [-I mask] [file ...]
```

macOSではどうも`--`を使うオプションはないみたい。
調べてみると，macOSではこれを`-d`オプションで扱うということはわかりましたが……。

```
$ du -d 1
usage: du [-H | -L | -P] [-a | -s | -d depth] [-c] [-h | -k | -m | -g] [-x] [-I mask] [file ...]
```

使えません……😞。
エラー内容も特には出ていないけれど，これだとオプションの指定を間違えてる?かに見えます🙄。

## 解決

`sudo`を付けることで問題なく実行出来た。

```
$ sudo du -d 1
0	./Applications
16	./Desktop
16	./Documents
432	./dotfile
38240568	./Downloads
2701904	./Dropbox
18004472	./Library
0	./Movies
54744	./Music
161560	./Pictures
3137080	./Program
0	./Public
61492040	./VirtualBox VMs
125959448	.
```

```
$ sudo du -d 1 -h
  0B	./Applications
8.0K	./Desktop
8.0K	./Documents
216K	./dotfile
 18G	./Downloads
1.3G	./Dropbox
8.6G	./Library
  0B	./Movies
 27M	./Music
 79M	./Pictures
1.5G	./Program
  0B	./Public
 29G	./VirtualBox VMs
 60G	.
```

(こっちもちょいと端折ってます。)

Permissionエラーとかの表示がないので戸惑いましたが，ふと`sudo`を付けて実行してみたらキチンと出力出来ました🎉。

普通の`du`コマンドは動作していたので，管理者権限でないと覗けないファイルを見たりはしていないと思うのだけれど……。
`-d`オプションを使用する場合は注意が必要そうです。
【JavaScript】JavaScriptを初めから

備忘録チックに学習したことをまとめます。ES2015対応。
実行はnode.jsでやっています。node.jsの環境構築は[こちら](http://qiita.com/7tsuno/items/e666223d6be22d657542)

## Hello World
```js:hw.js
console.log("Hello World!");
// Hello World!
```

## 変数

### var
variable 文は変数を宣言し、任意でそれをある値に初期化する。

```js:var.js
var message;
message = "Hello World!";
console.log(message);
// Hello World!
```

### let
let 文はブロックスコープの局所変数を宣言し、任意でそれをある値に初期化する。
varはブロック外にもスコープを持つが、letはブロック外にスコープを持たない。

```js:let.js
if(true){
    var message = "in block var";
    console.log(message);
    // in block var
}
console.log(message); // ここでもmessageが参照できる。
// in block var

if(true){
    let message2 = "in block let";
    console.log(message2);
    // in block let
}
console.log(message2); // ここではmessage2は参照できない
// ここでReferenceError
```

```js:let2.js
var message = "out block var"
if(true){
    var message = "in block var"; // 同じ変数となるため、上書きされてしまう。
    console.log(message);
    // in block var
}
console.log(message);
// in block var

var message2 = "out block let"
if(true){
    let message2 = "in block let"; // ブロック内の固有の変数となる。
    console.log(message2);
    // in block let
}
console.log(message2);
// out block let
```

## データ型

* 文字列

```js
var str = "string";
```

* 数値

```js
var num = 100;
```

* オブジェクト（関数・組み込みオブジェクト）

```js
var obj = {hoge:"ho", fuga:"fuga"};
```
オブジェクト・関数については詳細は後述

* undefined : 定義されていない
* null : なにもない

### nullとundefinedの違い
[ここ](http://qiita.com/shuhei/items/199281e07925d24059d5)が参考になった



## テンプレートリテラル

`（バッククォート）を利用することで改行コードなしで記述可。

```js:tl.js
console.log(`line one
line two
line three`);
// line one
// line two
// line three
```

## オブジェクト

## 関数
### 無名関数
### アロー演算子による記述
タイムラプス動画の自動速度調整の試み（前編）

## モチベーション

夏にアメリカをレンタカーで少し回ったのですが
サクションカップマウントを買って一定間隔で画像を撮りました。
(確か5秒間隔だったと思います)

シカゴからピッツバーグに向かう途中の前半部分のライムラプスが以下になります。

`0:34` 付近で高速のゲートのバーが上がらずバックしているのですが
こういうイベントが発生しているところはゆっくり再生して
他の延々と道路が続いているところはよしなに速く再生する
的なこと自動でして欲しいと思いました。

かといって `1:08` くらいのサービスエリア的なところは少し長すぎるなと感じます。
2秒くらいですが長いので、長くても1秒くらいにしたいことにします。

https://youtu.be/BOHDtW9_tlQ
[![](http://img.youtube.com/vi/BOHDtW9_tlQ/0.jpg)](https://youtu.be/BOHDtW9_tlQ)

## ffmpeg

[ffmpegで連番画像から動画生成 / 動画から連番画像を生成 ~コマ落ちを防ぐには~ - Qiita](http://qiita.com/livlea/items/a94df4667c0eb37d859f)
上記サイトを参考に動画を作成してみました。

```
ffmpeg -framerate 30 -start_number 416 -i ./data/images/001/DSC%05d.JPG -vframes 6000 -vcodec libx264 -pix_fmt yuv420p -r 60 out.mp4
```

タイムラプスにしたい画像が `DSC00416.JPG` から `DSC03415.JPG` だとします。
1秒間に `30` 画像使って出力動画のフレームレートが `60` で
1つの画像を２回使うので、 全部で `6000` フレームという意味だと思います。
`-vrames` オプションは指定しなくてもいいと思いますが、小さくテストしたい時に `180` とか指定してました。

```
$ ffmpeg --help | grep -E "(-framerate)|(-start_number)|(-vframes)|(-vcodec)|(-pix_fmt)|(-r )"
-pix_fmts           show available pixel formats
-vframes number     set the number of video frames to output
-r rate             set frame rate (Hz value, fraction or abbreviation)
-vcodec codec       force video codec ('copy' to copy stream)

$ ffmpeg -pix_fmts | grep -E "(FLAGS NAME)|(yuv420p )"
FLAGS NAME            NB_COMPONENTS BITS_PER_PIXEL
IO... yuv420p                3            12
```

詳細は `ffmpeg --help full` 。

## phash

以前、類似画像検索をした際に

[類似画像検索について簡単にまとめてみた - Qiita](http://qiita.com/hurutoriya/items/88a16d36bafa8d6360e2)

上で紹介されていた `phash` を ruby から使うライブラリを使ったのですが
今回は python から `opencv` を使って連携させたいと思ったので python から `phash` が使えるものを探してみました。

https://github.com/JohannesBuchner/imagehash

ありました。

各フレーム間のハッシュ値の距離をプロットして
タイムラプス動画を合わせてみました。
真ん中が `phash` です。
https://youtu.be/oIoNYs4yLio


橋とかで空が隠れてブレてます汗
<img width="865" alt="Screen Shot 2016-12-11 at 17.45.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/32636/01e415ef-1525-1816-c9de-44ec764d7762.png">

ここらへんを抽出したいですね。。。
<img width="861" alt="Screen Shot 2016-12-11 at 17.47.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/32636/bcf01179-ca39-682e-52d2-ad4da20c8828.png">

ここを短縮したいですね！（これはいけそうな気がします）
<img width="859" alt="Screen Shot 2016-12-11 at 17.50.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/32636/7a35e6d7-37cd-fa56-32ec-44486aaf4027.png">

## 後編へ

ウィンドウサイズ決めて、ローカルな分散とか見て色々やってみたいと思っていますが
正直、同じようなことやっている人はいると思うので
時間をかける前に情報収集ですね。


## 参考

* ffmpeg
    * [ffmpeg を Homebrew からインストール。動画から静止画を1枚書き出す。 | 雑記 BOOOKs](https://yuichon.com/2016/02/ffmpeg-install/)
    * [ffmpeg - Create a video from image frame with a start and a cout - Super User](http://superuser.com/questions/688015/ffmpeg-create-a-video-from-image-frame-with-a-start-and-a-cout)
* phash
    * 雰囲気を知るには 1.の表が中のハッシュのアルゴリズムを知るには 2.が。
    * 1. [perceptual hash(phash)を利用して画像比較をしてみる - テノニッキ (@hideack 's diary)](http://hideack.hatenablog.com/entry/2015/03/16/194336)
    * 2. [Perceptual Hash - stMind](http://stmind.hatenablog.com/entry/2014/04/18/001453)
Perl 6 用語集

こんにちは、Perl 6アドベントカレンダーの12日目の投稿になります。

[Perl6を学ぶ時に参考になるページ 2016](http://qiita.com/titsuki/items/549ac95b8c37feb1dee1) ではいろいろなPerl 6関連コンテンツを紹介しました。
しかし、実際に中を見てみると、下記のようなケースに遭遇するかもしれません：

+ ISSUEに意味の分からないタグがついている
+ irclogをみても略語が多すぎて我々日本人には何をしゃべってるのかいまいちわからない

そういうケースがあるかもと思って今日は箸休めで、Perl 6の用語を紹介するという内容にしました。
（ごく普通のチャット用語も混じってます）

# 用語一覧

## RT
Request Tracker
Perl6のバグ報告システムのこと
RTed のように動詞のように使われることもある

## FWIW
for what it's worth
真意のほどはわからないが

## IIRC
If I remember correctly
私の記憶が正しければ、

## shrug, shrugs
I don't know.
の意味

## IMHO
In my humble opinion
私の取るに足らない意見ですが、

## IMO
In my opinion
私の意見ですが、

## BTW
by the way
ところで、

## LTA
less than awesome
本当に起こっているエラーとは程遠い内容のエラーメッセージを指す [1]

## ENOSPEC
Error: No space available をもじったもの [要出典]
Error: No Spec available のこと [要出典]
roastのテストに入っていない、内部関数とかのことを指す [要出典]
ちなみにそういうものは基本的にドキュメントには入れてはいけないことになっている。
若干不正確なことを言ってるかもしれないので細かい話はSTYLEGUIDEを参照するとよい [3]

(※) perl6/docのリポジトリにおいては、上記に該当するISSUEにはNOTSPECCEDタグがついてます

## TimToady
ラリーウォールのIRCでのアカウント名

## Hacktoberfest
Perl 6関連リポジトリのIssueにまれについているタグ
2016年秋ごろにデジタルオーシャン社が取り組んでいたキャンペーンで
このタグのついたISSUEを解決するプルリクを4回送るとTシャツとステッカーがもらえた

## LHF
Low Hanging Fruit
Perl6関連リポジトリのIssueにまれについているタグ
新参者でもこなせそうな単純なISSUEに対してつけられる [1]

# 参考
1. glossary
  + https://docs.perl6.org/language/glossary#IRC_Lingo
2. What does shrug mean?
  + https://answers.yahoo.com/question/index?qid=20110817143046AAnabph 
3. スタイルガイド
  + https://github.com/perl6/doc/blob/master/STYLEGUIDE.md


以上、Perl 6アドベントカレンダーの12日目の投稿になりました。
説明つきの画面キャプチャー図をSVGでつくる

この記事は、[SVG Advent Calendar 2016](http://www.adventar.org/calendars/1428)の3日目の記事です。
投稿は12/11です。遅刻してしまい、申し訳ありません。

## 画面キャプチャー図に説明をつけるのは面倒くさい

コンピューター関係の仕事をしていると、画面キャプチャー（スクリーンショット）を撮る機会も多いと思います。

画面キャプチャーをドキュメントにそのまま挿入する場合は、図を撮ったり、ドキュメントに挿入したりするのが
面倒ですが、それは仕方のないことでしょう。

従来、画面キャプチャーに説明をつけて、たとえば次のような図を作成するとなると面倒くささが倍増していました。

![sample01.png](https://qiita-image-store.s3.amazonaws.com/0/15467/a8fe4799-8247-140d-abb9-3c03992f929a.png)

お絵かきソフトを使い、画面キャプチャーやテキストボックスを配置したりするのが面倒なのは仕方がないことでしょう。

本当に面倒なのは、あとから修正しようとした場合です。
たとえば、PNG形式などで保存している画像は、文字の一部を修正しようとしても、簡単にはできません。
文字やテキストボックスはそのままに元の画面キャプチャーだけ変更することもむつかしいでしょう。
図の一部だけを修正することができず、結局図そのものを最初から作り直す必要があるというのがほんとうに面倒なのです。

対策として、お絵かきソフトについているレイヤー機能などを使うという手もあります。
でも、そうした機能を使うと、特定のソフトを使い続ける必要が生じる、画像を変換する別の手間が生じるなどの問題があるわけです。

## 画面キャプチャー図作成にSVGは便利

SVGでimage要素を使えば、図の一部だけを修正することができる説明つきの画面キャプチャーを作成できます。
たとえば、```cap/001.png```というファイルが画面キャプチャーの場合に次の内容でSVGファイルを作成すれば、SVG形式の画面キャプチャー図となるわけです。

```
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="768" height="540" viewBox="0 0 1252 810" preserveAspectRatio="xMax slice">
  <image xlink:href="cap/01.png" x="50" y="100" width="1152" height="700" />
</svg>
```

あとは、説明用のテキストボックスや引き出し線、囲みなどを追加して図を完成させます。
その場合、SVG用の編集ソフト（InkscapeやSketch）などを使うことができますし、SVGのソースを直接編集することもできます。
テキストをちょこちょこ直すには、意外とソースを直接いじる方が楽な場合もあります。

## 公開用にSVGファイルを変換する

作成したSVG形式の図を公開するときには、PNG形式などに変換する方が安全です。
変換にあたっては、[ImageMagick](http://www.imagemagick.org/script/index.php)の```convert```コマンドが使えます。
たとえば、```001.svg```をPNG形式に変換して```001.png```ファイルを作成するには次のコマンドをシェルで実行します。

```
convert 001.svg 001.png
```

ちなみにWindowsでは、ImageMagickは使えるものの、[convertコマンドは要注意](http://enz0.net/windows/software/vba_imagemagick/)です。
また、[Qiitaのこちらの記事](http://qiita.com/mstssk/items/8e79d946de2cf1d2786f)にもあるようにInkscapeも使えます。

### 変換は必要なの？

かつて、Internet ExplorerではSVGが使えない時代が長く続きました。
そのため、HTMLファイルに図を挿入するときにSVGファイルを作成した場合には、PNG形式に変換することが必要でした。

時代が変わり、SVGに対応していないWebブラウザーは過去の遺物となりつつあります。
それでは、SVGファイルとして作成した画面キャプチャーをPNG形式などに変換する作業は不要になるのか？

そう期待していたのですが、単純にそうはなりませんでした。
image要素を使って外部のファイルを参照するSVGファイルは正常に読み込んでくれないのです。

どうせなら画像を変換する手間は避けられないだろうか…この点で悩みはじめたら結構個人的には深刻で、
SVG Advent Calendarに参加していたことさえ忘れてしまうほどでした。
なんとか解決方法らしきものを見つけたので、[別のページ](http://qiita.com/j8takagi/items/96fe243b99d95f04ff24)で改めてご紹介したいと思います。
GitLab CIでMilkcocoaを動かしてみた #mlkcca


[dotstudio](https://dotstud.io)ではGitLabを使っています。

> [Azure WebAppsにGitLab連携でデプロイしてみよう](https://dotstud.io/blog/azure-webapps-gitlab-connect/)

ということでGitLab CIも最近つかいはじめてみています。
今日は、GitLab CIを使ってMilkcocoaのアプリケーションが動くかテストしてみたので紹介します。

> GitLabのアドベントカレンダー代理で投稿させて頂きます

## Milkcocoaとは

GitLabのアドベントカレンダーということでMilkcocoaの説明を簡単にします。
Milkcocoaはリアルタイム通信、IoTデバイスとの接続などが簡単にできるようになるバックエンドサービスです。

* https://mlkcca.com/
* [Milkcocoaの歩き方 - 2016年12月版 (+2016年の振り返り) #mlkcca](http://qiita.com/n0bisuke/items/81b8b209374daf8c4930)
* アドベントカレンダーもあります -> http://qiita.com/advent-calendar/2016/milkcocoa

## 今回やること

MilkcocoaにはNode.jsのSDKがあるので今回はNode.jsアプリケーションでMilkcocoaを動かして、別のアプリケーションと接続してみます。

CI上でアプリケーションを動かすってCIのちゃんとした使い方ではないですが、無料でホスティングサービス的にCIを活用できたら楽しいことできそうだなと思った次第です。

![](https://i.gyazo.com/354f0c8d2c91451b24095251334fd9bb.png)

## やりかた

まずはMilkcocoaのアプリケーションIDを取得しましょう。

[Milkcocoaの送信テスト用JSサンプル](http://qiita.com/n0bisuke/items/f4e933e4cd0f7c68b097)この辺も参考に

### 情報を送る側の`send.js`を作成

こちらでMilkcocoaのSendメソッドを使って情報送信ができます。

```send.js
'use strict'

const MilkCocoa = require('milkcocoa');
const milkcocoa = new MilkCocoa('アプリケーションID.mlkcca.com');
const ds = milkcocoa.dataStore('message');

setInterval(()=>{
  ds.send({v:1,time: new Date()}, (err, sended) => {
    console.log('送信:', sended);
  });
},2000);
```

send.jsはCI側で動作させます。2秒に一回sendするプログラムです。

### 受け取り側の`receive.js`を作成

```receive.js
'use strict'

const MilkCocoa = require('milkcocoa');
const milkcocoa = new MilkCocoa('アプリケーションID.mlkcca.com');
const ds = milkcocoa.dataStore('message');

ds.on('send', (sended) => {
  console.log('受信:',sended);
});
```

手元のPCで動作させます。sendが発生したら反応します。

### package.json

package.jsonのscriptsに以下を指定して、CI側で`npm run send`を実行することで`send.js`が起動するようにします。

```package.json
・
・
・
"scripts": {
    "send": "node send.js"
  },
・
・
・
"dependencies": {
    "milkcocoa": "^0.6.0"
  }
・ 
・
・
```

またdependenciesにmilkcocoaを指定しましょう。

### `.gitlab-ci.yml`を作成

```.gitlab-ci.yml
image: node:7.2.1

before_script:
  - npm install

all_tests:
  script:
   - npm run send
```

そのままですが、7.2.1のNode.jsを使えるイメージで`npm install`して`npm run send`を実行します。

##試してみた

CIの画面で起動を確認しつつ、手元のPC側はreceive.jsを起動させます。

```
$ node receive.js
```

こんな感じでちゃんとCI側で動いてるsend.jsから手元のPCで動いているreceive.jsに対して情報が送られています。

![](https://i.gyazo.com/84c53351f35fe2e74ffa685000c1b98d.gif)

思ったより普通に動きましたね。

##終わりに

これをずっと稼働させてるとどこかでfailするのかずっと起動できるのか、そもそも規約違反なのかはわかっていないのでとりあえず最後にキャンセルしておきました。これを何か実際のアプリケーションなどで活用する際は注意してください。

![](https://i.gyazo.com/27f81881b01df53d759f817ee00cf263.png)