OmniAICreator/Qiita-1.07M huggingface dataset:
img要素の「画像がないことを表すマーク」の表示/非表示


# 背景
img要素で指定した画像が存在しないとき、「画像がないことを表すマーク」が表示されます。
IEではバツ印で表示されるので、このマークを便宜上「バツ印」と呼びます。

このバツ印のおかげで、ユーザは「画像が本来表示されるはずだけど、何かエラーで画像が表示されていないんだ」と気づくことができます。
しかしバツ印を表示させたくない場合もあります。
たとえば、以下の場合です。

* 画像パスはkeyから決まるんだけど、画像があるかどうかは分からない。とりあえず画像があれば表示したい
* 画像の有無は調べず、とりあえずimg要素のsrc属性にkeyから決まるパスを設定しよう！

この場合、「画像が表示されない」ことも正常なので、バツ印を非表示にしたいです。

バツ印の表示/非表示が、ブラウザ、src属性,alt属性によって変わるので、それをまとめました。

# 検証方法
ブラウザ、src属性, alt属性のパターンを組み合わせて、検証します。

#### ブラウザ

* Firefox46
* IE11
* Chrome52

#### alt属性

* alt属性を指定
* alt属性が空文字
* alt属性を記述しない

#### src属性

* src属性を指定(存在しない画像パス)
* src属性が空文字
* src属性がbase64で空画像
* src属性を記述しない


以下のCSSを有効にして、ブラウザで確認します。

```css
img {
  border: solid 1px;
  width:150px;
  height:30px;
  display:block;
}
```


# 結果

表の「○」はバツ印の表示、「×」がバツ印の非表示を表します。

## src属性に存在しない画像パスを指定

```html
<h3>alt属性を指定</h3>
<img src="sample.png" alt="代替テキスト">

<h3>alt属性が空文字</h3>
<img src="sample.png" alt="">

<h3>alt属性を記述しない</h3>
<img src="sample.png" >
```

![src属性指定.png](https://qiita-image-store.s3.amazonaws.com/0/37903/214dc8e8-6805-f8d5-98ab-71c58e42ea75.png)

| alt属性 | Firefox | Chrome | IE |
|:-----------|:------------:|:------------:|:------------:|
| あり|×|○|○|
| 空文字|×|○|○|
| なし|○|○|○|


## src属性が空文字

```html
<h3>alt属性を指定</h3>
<img src="" alt="代替テキスト">

<h3>alt属性が空文字</h3>
<img src="" alt="">

<h3>alt属性を記述しない</h3>
<img src="" >
```

![src属性が空文字.png](https://qiita-image-store.s3.amazonaws.com/0/37903/c8edcb37-15b0-e53f-af76-0b2384562ce5.png)

| alt属性 | Firefox | Chrome | IE |
|:--|:--:|:--:|:--:|
| あり|×|×|×|
| 空文字|×|×|×|
| なし|○|×|×|



## src属性がbase64で空画像

```html
<h3>alt属性を指定</h3>
<img src="data:image/png;base64," alt="代替テキスト">

<h3>alt属性が空文字</h3>
<img src="data:image/png;base64," alt="">

<h3>alt属性を記述しない</h3>
<img src="data:image/png;base64," >
```

![src属性がbase64.png](https://qiita-image-store.s3.amazonaws.com/0/37903/c5088c08-9a1e-4e52-105f-90c43c500ea9.png)

| alt属性 | Firefox | Chrome | IE |
|:--|:--:|:--:|:--:|
| あり|×|○|○|
| 空文字|×|○|○|
| なし|○|○|○|



## src属性を記述しない

```html
<h3>alt属性を指定</h3>
<img  alt="代替テキスト">

<h3>alt属性が空文字</h3>
<img  alt="">

<h3>alt属性を記述しない</h3>
<img  >
```

![src属性がなし.png](https://qiita-image-store.s3.amazonaws.com/0/37903/862b6241-68f0-7a5d-05b2-d3d1bb33d9d0.png)

| alt属性 | Firefox | Chrome | IE |
|:--|:--:|:--:|:--:|
| あり|×|×|×|
| 空文字|×|×|×|
| なし|×|×|×|


# 考察

* ChromeとIEの結果は同じ。
* src属性が指定されたときと、base64形式で空画像を指定したときの結果は同じ。
* alt属性が指定されたときと、空文字のときの結果は同じ。

結果が同じパターンをまとめると、以下の表になります。

| src属性| alt属性 | Firefox | Chrome/IE |
|:-------------|:-------------|:---------:|:-----------:|
| あり/base64 | あり/空文字 | ×       | ○         |
| あり/base64 | なし        | ○       | ○         |
| 空文字      | あり/空文字 | ×       | ×         |
| 空文字      | なし        | ○       | ×         |
| なし        | あり/空文字 | ×       | ×         |
| なし        | なし        | ×       | ×         |


* Firefoxはalt属性が指定されていれば、常にバツ印が非表示。
* IE/Chromeは、src属性が記述されていない OR 空文字ならば、常にバツ印が非表示。
* Firefoxは、src属性が記述されていなければ、常にバツ印が非表示。


Firefox, Chrome, IEで、バツ印を非表示にするには、以下のいずれかの状態にする必要があります。

* src属性が空文字 AND alt属性があり/空文字
* src属性がなし

ただHTMLの仕様でsrc属性は必須です。
HTMLの仕様に従うならば、「画像の有無を判定して、画像がなければimg要素を非表示/消す」必要があるんですかね。。。
git objectを勉強するためのgit-object-trainerコマンド

[git-object-trainer](https://github.com/sonatard/git-object-trainer)はgit objectを勉強するためのコマンドです。


`git-object-trainer`はあなたに**磁器（porcelain）コマンド**(add, commit, show, diff, checkout, tag, log, diff)の利用を禁止します。それらの代わりに**配管（plumbing）コマンド**(hash-object, cat-file, update-index, write-tree)を使うことを強制します。

`git add`などを入力すると`git-object-trainer`はどのように`git add`を配管コマンドで実現すれば良いのかを教えてくれます。

- [9. Gitの内側](https://git-scm.com/book/ja/v1/Git%E3%81%AE%E5%86%85%E5%81%B4)

## 使い方

### インストール
```shell
go get -u github.com/sonatard/git-object-trainer/
```

### 設定

`.bash_profile`にaliasの設定を追加してください。


```shell:.bash_profile
alias git=git-object-trainer
```


## 例

```shell
$ git add .
Error: Exec following commands instead of git add

Basic way
# 1. Create . objects
$ git hash-object -w .
[FILE-HASH-STRING]
# 3. Check created object
$ git cat-file -p [FILE-HASH-STRING]
[FILE STRINGS]
# 4. Add or update file to staging area
## 4.1 add
$ git update-index --add --cacheinfo 10644 [FILE-HASH-STRING] .
## 4.2 update
$ git update-index --cacheinfo 10644 [FILE-HASH-STRING] .
# 5. Create tree
$ git write-tree
[TREE-HASH-STRING]
Remember [TREE-HASH-STRING] for commit
# 6. Check tree object
$ git cat-file -p [TREE-HASH-STRING]
[PERMISSION] blob [HASH] .

Easy way. You need not to remember [FILE-HASH-STRING]
# 1. Create tree
$ git write-tree
[TREE-HASH-STRING]
Remember [TREE-HASH-STRING] for commit
# 2. Add or update file to staging area
## 4.1 add
$ git update-index --add .
## 4.2 update
$ git update-index  .
# 6. Check tree object
$ git cat-file -p [TREE-HASH-STRING]
[PERMISSION] blob [HASH] .
```


ジョークソフトですが、PRお待ちしています。現在引数周りの処理が適当です。

また現在packには未対応です。

ちなみに私は配管コマンドで`add`,`commit`,`checkout`はできるようになりました :smiley:
CSSでヘッダメニューを等間隔に並べて区切り線を入れてみる

ヘッダメニューを作成する際、区切り線（|）を入れたくなる時がある。
例えば、下記の様に`ul`+`li`のリストを使っている場合

```index.html
<html>
<head>
  <title>header test</title>
  <link href="css/header.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <ul>
    <li><a href="">menu1</a></li>
    <li><a href="">menu2</a></li>
    <li><a href="">menu3</a></li>
    <li><a href="">menu4</a></li>
    <li><a href="">menu5</a></li>
  </ul>
</body>
</html>
```

```header.css
ul {
  display: flex;
  justify-content: space-between;
}
li {
  list-style-type: none;
  background-color: #fff;
  color: #000;
}
```
![スクリーンショット 2016-08-13 17.48.18.png](https://qiita-image-store.s3.amazonaws.com/0/128306/dd394e36-737a-6200-89cd-dac0cad54bdf.png)
こんな感じに表示される。

## 区切り線(|)を入れてみる
CSSを下記のように修正

```header.css
ul {
  display: flex;
  justify-content: space-between;
}
li {
  list-style-type: none;
  background-color: #fff;
  color: #000;
}
li + li {
  border-left: 1px solid #000;
}
```

すると、こんな感じに区切り線が表示される。
![スクリーンショット 2016-08-13 17.54.37.png](https://qiita-image-store.s3.amazonaws.com/0/128306/afbec790-46a5-3071-7f49-8b2290fa5c24.png)

最後に、区切り線が真ん中にくるように調整する
CSSを下記の様に修正

```header.css
ul {
  display: flex;
  /*justify-content: space-between;*/
}
li {
  list-style-type: none;
  background-color: #fff;
  color: #000;
  flex-grow: 1;
  text-align: center;
}
li + li {
  border-left: 1px solid #000;
}
```
![スクリーンショット 2016-08-13 17.57.43.png](https://qiita-image-store.s3.amazonaws.com/0/128306/2c545b02-88d1-ee88-abc6-4bdd8bace822.png)

`justify-content:space-between;`で等間隔に並べると、間にスペースが入ってしまうため、
`flex-grow:1;`により、同じ大きさに伸ばして、うまいこと間に区切り線を引ける。
ruby socketpair

```rb
require 'socket'

# s1, s2 = Socket.pair(:UNIX,:DGRAM,0)
# fork do
# 	2.times do
# 	  s2.send "lalala", 0
# 	end
# end

# 2.times do
#   p s1.recv(10)
# end


# s1, s2 = Socket.pair(:UNIX,:DGRAM,0)
# Thread.new do
# 	2.times do
# 	  s2.send "lalala", 0
# 	end
# end

# 2.times do
#   p s1.recv(10)
# end

s1, s2 = UNIXSocket.pair(:DGRAM,0)
Thread.new do
	2.times do
	  s2.send "lalala", 0
	end
end

2.times do
  p s1.recv(10)
end
```
apt.conf.d以下にファイルを突っ込む場合の番号

# 既存の apt.conf.d ファイル
```
/etc/apt/apt.conf.d/01autoremove
/etc/apt/apt.conf.d/01autoremove-postgresql
/etc/apt/apt.conf.d/05etckeeper
/etc/apt/apt.conf.d/05fs2ram
/etc/apt/apt.conf.d/10apt-listbugs
/etc/apt/apt.conf.d/10periodic
/etc/apt/apt.conf.d/11daptup
/etc/apt/apt.conf.d/15hobbit-plugins-update-stamp
/etc/apt/apt.conf.d/15update-stamp
/etc/apt/apt.conf.d/20adequate
/etc/apt/apt.conf.d/20apt-show-versions
/etc/apt/apt.conf.d/20archive
/etc/apt/apt.conf.d/20listchanges
/etc/apt/apt.conf.d/20listdifferences
/etc/apt/apt.conf.d/20packagekit
/etc/apt/apt.conf.d/20services
/etc/apt/apt.conf.d/20systraq
/etc/apt/apt.conf.d/30autoproxy
/etc/apt/apt.conf.d/50appstream
/etc/apt/apt.conf.d/50apt-file.conf
/etc/apt/apt.conf.d/50spacewalk
/etc/apt/apt.conf.d/50whatmaps_apt
/etc/apt/apt.conf.d/70debconf
/etc/apt/apt.conf.d/80debtags
/etc/apt/apt.conf.d/90fai
/etc/apt/apt.conf.d/90junior-config
/etc/apt/apt.conf.d/90med-config
/etc/apt/apt.conf.d/90rkhunter
/etc/apt/apt.conf.d/90science-config
/etc/apt/apt.conf.d/90squid
/etc/apt/apt.conf.d/90zope-common
/etc/apt/apt.conf.d/99-edu-prefer-firefox
/etc/apt/apt.conf.d/99-localepurge
/etc/apt/apt.conf.d/99apt-dater-host_periodic
/etc/apt/apt.conf.d/99how-can-i-help
/etc/apt/apt.conf.d/99needrestart
```

さて、どの番号にするのがいいのかね？
TensorFlowでゼロから作るDeep Learning [Multilayer Convolutional Network]

TensorFlowのチュートリアルのDeep MNIST for Expertsがあると思いますが、その中の[Build a Multilayer Convolutional Network](https://www.tensorflow.org/versions/r0.10/tutorials/mnist/pros/index.html#build-a-multilayer-convolutional-network)のとこで図で説明されないとイメージが湧かなかったので、作ってみました。

![スクリーンショット 2016-08-13 17.32.43.png](https://qiita-image-store.s3.amazonaws.com/0/51849/df0529fd-810c-d989-3b1b-485ea7a2870f.png)

【注意】 入力画像の部分にはわかりやすくパディングした結果を書いていますが、下の`conv2d`と`max_pool_2x2`を見てもらえば分かりますが他の画像も同様にパディングしています。

## Weight Initialization

```py
def weight_variable(shape):
  initial = tf.truncated_normal(shape, stddev=0.1)
  return tf.Variable(initial)

def bias_variable(shape):
  initial = tf.constant(0.1, shape=shape)
  return tf.Variable(initial)
```

## Convolution and Pooling

```py
def conv2d(x, W):
  return tf.nn.conv2d(x, W, strides=[1, 1, 1, 1], padding='SAME')

def max_pool_2x2(x):
  return tf.nn.max_pool(x, ksize=[1, 2, 2, 1],
                        strides=[1, 2, 2, 1], padding='SAME')
```

## First Convolutional Layer

```py
x_image = tf.reshape(x, [-1,28,28,1]) # 入力画像

W_conv1 = weight_variable([5, 5, 1, 32])
b_conv1 = bias_variable([32])
h_conv1 = tf.nn.relu(conv2d(x_image, W_conv1) + b_conv1)
h_pool1 = max_pool_2x2(h_conv1)
```

## Second Convolutional Layer

上記の図でうまく書けなかったのですが、`h_conv2`の重みの初期化時にshapeが`5 x 5 x 32 x 64`となっているので、調べたところ、以下のような説明がされていました。

[参照サイト: TensorFlow Tutorialの数学的背景 − Deep MNIST for Experts（その3）](http://enakai00.hatenablog.com/entry/2016/02/29/090112)によると、

> 2段目のフィルターでは、64枚ある「1つのフィルター」は内部的に32個のサブフィルターを持っており、「1段目から出てきた32枚のそれぞれを対応するサブフィルターにかけた結果を重ねあわせる」という処理をします。


```py
W_conv2 = weight_variable([5, 5, 32, 64])
b_conv2 = bias_variable([64])

h_conv2 = tf.nn.relu(conv2d(h_pool1, W_conv2) + b_conv2)
h_pool2 = max_pool_2x2(h_conv2)
``` 

## Densely Connected Layer

* `tf.reshape(h_pool2, [-1, 7*7*64])`でflatなベクトルに変換しています。
   * TensofFlowのreshapeについては[公式](https://www.tensorflow.org/versions/r0.10/api_docs/python/array_ops.html#reshape)ページをみてください

```py
W_fc1 = weight_variable([7 * 7 * 64, 1024])
b_fc1 = bias_variable([1024])

h_pool2_flat = tf.reshape(h_pool2, [-1, 7*7*64])
h_fc1 = tf.nn.relu(tf.matmul(h_pool2_flat, W_fc1) + b_fc1)
```

## Readout Layer

```py
W_fc2 = weight_variable([1024, 10])
b_fc2 = bias_variable([10])

y_conv=tf.nn.softmax(tf.matmul(h_fc1_drop, W_fc2) + b_fc2)
```
Goで標準出力と標準エラー出力の色情報を失わずに外部コマンドをラップする　

こちら([Golangで外部コマンドを実行する方法まとめ
GoGo2109 - Qiita](http://qiita.com/tanksuzuki/items/9205ff70c57c4c03b5e5))にGolangで外部コマンドを実行する方法や実行した結果を出力する方法がまとまっていますが、出力をプログラム上で文字列の返り値として受け取る方法だと出力時の色情報が失われてしまいます。


色情報を失わずに単純にコマンドをラップするには、`cmd.Stdout`と`cmd.Stderr`を`os.Stdout`と`os.Stdout`に置き換えてから`cmd.Run()`を実行することで実現可能です。

- 終了ステータスコードを外部コマンドから適切に取得するバージョン
https://play.golang.org/p/bPdEsY_DLh

```go
package main

import (
	"os"
	"os/exec"
	"syscall"
)

func main() {
	args := os.Args[1:]
	cmd := exec.Command("ls", args...)
	cmd.Stdout = os.Stdout
	cmd.Stderr = os.Stderr

	err := cmd.Run()
	if err != nil {
		status := 1
		if e2, ok := err.(*exec.ExitError); ok {
			if s, ok := e2.Sys().(syscall.WaitStatus); ok {
				status = s.ExitStatus()
			}
		}
		os.Exit(status)
	}
}
```


- 終了ステータスコードを簡易版
https://play.golang.org/p/jOBan0jznK

ステータスコードを厳密に外部コマンドから取得する必要がない場合には以下で十分です。

```go
package main

import (
	"os"
	"os/exec"
)

func main() {
	args := os.Args[1:]
	cmd := exec.Command("ls", args...)
	cmd.Stdout = os.Stdout
	cmd.Stderr = os.Stderr

	err := cmd.Run()
	if err != nil {
		os.Exit(1)
	}
}
```


## 参考
- [Golangで外部コマンドを実行する方法まとめ
GoGo2109 - Qiita](http://qiita.com/tanksuzuki/items/9205ff70c57c4c03b5e5)
- [Goでコマンドを実行して終了コードを取得する方法 - Qiita](http://qiita.com/hnakamur/items/5e6f22bda8334e190f63)
ofxMSATensorFlowを試してみた (mnist)


# ofxMSATensorFlow
oFでTensorFlowを使えるアドオンを試してみた

>
openFrameWorks：http://openframeworks.cc/
TensorFlow：https://www.tensorflow.org/versions/r0.10/tutorials/index.html
ofxMSATensorFlow：https://github.com/memo/ofxMSATensorFlow


# 環境
>Mac OSX El Capitan(10.11.6)
oF 0.9.3

# 1. example-mnist
手書き数字認識
下記を参考にさせていただき、無事に実行できました
>http://qiita.com/yoppa/items/229507e6300ee18793ad

## コマンドラインでの実行
せっかくなので、コマンドラインで実行の仕方も書いておきます

 - brewのインストール : http://brew.sh/index.html
 - wgetのインストール

```
$ brew install wget
```

 - oFのダウンロード : http://openframeworks.cc/ja/download/
 - ofxMSATensorFlowのダウンロード

```
$ cd of_v0.9.3_osx_release/addons/
$ git clone https://github.com/memo/ofxMSATensorFlow
```

- ライブラリファイルをダウンロードして配置

```
$ wget https://github.com/memo/ofxMSATensorFlow/releases/download/v0.0/ofxMSATensorFlow_lib_OSX_2016_02_21_v0.7_CPU.zip
$ unzip ofxMSATensorFlow_lib_OSX_2016_02_21_v0.7_CPU.zip
$ mkdir ~/lib
$ cp osx/libtensorflow_cc.so ~/lib/.
$ cp osx/libtensorflow_cc.so ofxMSATensorflow/libs/tensorflow/lib/osx/.
```
（上ではライブラリファイルを２か所に配置していますが、どちらが参照されているかわからなかった（！）ためです）

 - 学習済みモデルをダウンロードして配置

```
$ cd ofxMSATensorflow/example-mnist/bin
$ wget https://github.com/memo/ofxMSATensorFlow/releases/download/v0.0/example-mnist-data.tar.gz
$ tar xzvf example-mnist-data.tar.gz
```

 - 実行

```
$ cd ../
$ make
$ make run
```
うまくいけばGUIが表示されて、数字を書くと認識してくれます。
<img width="640" alt="Screen Shot 2016-08-18 at 4.24.48 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/136986/d708d861-8cce-c6e5-f4d0-42009e37ba03.png">
var a = a や if let b = b {} のような紛らわしい構文も使えるswiftのシャドウイング

*-- この記事はXcode8 beta5での動作を元に書いていますが、正式リリースまでに動作が変わる可能性があります。--*

実はシャドウイングというのは初めて聞きました。
どうやら変数名を使い回すことをシャドウイングと言うようです。

swift-evolutionの[この提案](https://github.com/apple/swift-evolution/blob/master/proposals/0003-remove-var-parameters.md)でシャドウイングについて触れています。
ここではSwift3で関数のパラメータにvar宣言が使えなくなるため、機械的に置き換える方法として下記のコードを紹介しています。

```swift
func foo(i: Int) {
  var i = i
}
```
この書き方、他でも使えるかと思って試してみたらエラーになりました。

```swift
let i = 3
do {
  var i = i   // Error: Variable used within its own initial value
}
```
でも、Optional Bindingではシャドウイングを使うことができます。

```swift
let b: Int? = 3
if let b = b {
    print(b)   // 3
}
print(b)   // Optional(3)
```
他にもシャドウイングが使えるパターンがあるかもしれません。

シャドウイングは変数名を決めるのが煩わしい時は便利です。
しかし、コードを誤認する可能性もあります。
複数人で作業する時はコーディング規約などでルールを明確化する必要があるでしょう。


参考文献:
[SE-0003 Removing var from Function Parameters](https://github.com/apple/swift-evolution/blob/master/proposals/0003-remove-var-parameters.md)
CPUとOSとアプリケーションの関係


[プログラムはなぜ動くのか](https://www.amazon.co.jp/gp/product/4822283151/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4822283151&linkCode=as2&tag=hellokenta102-22)という本を読んだので、まとめました。


## CPUについて
- Central Processiong Unit（中央処理装置）の略
- 内部は数百万〜数億個のトランジスタで構成されている
- CPUは「レジスタ」「制御装置」「演算装置」「クロック」の4要素から構成されている
  - *レジスタ*：処理対象となる命令やデータを格納する領域。一種のメモリのようなもの
  - *制御装置*：メモリ上の命令やデータをレジスタに読み出し、命令の実行結果に応じてコンピュータ全体を制御する
  - *演算装置*：メモリからレジスタに読み出されたデータを演算する役目を持ちます
  - *クロック*：クロック信号を発生させるもの

### メモリ
- 通常メモリと呼ぶのは *メインメモリ（主記憶）*のこと
- 命令やデータを格納する
- データには、「演算に使われる値」と「メモリのアドレスを表す値」の2種類がある
- 1バイト（= 8bit）ずつにアドレスと呼ぶ番号が付いている
- CPUはこのアドレスを指定してメイン・メモリに格納された命令やデータを読みだしたり、逆にデータを書き込んだりする

### プログラムの流れ
1. クロック信号に合わせて制御装置がメモリから命令やデータを読みだす
2. その命令を解釈・実行することで演算装置でデータが演算される
3. その結果に応じて制御装置がコンピュータを動かす

### レジスタの種類
- アキュムレータ
  - 演算を行うデータ及び演算後のデータを格納する
- フラグ・レジスタ
  - 演算処理後のCPUの状態を格納する
- プログラムカウンタ
  - 次に実行する命令が格納されたメモリーのアドレスを格納する
- ベースレジスタ
  - データ用のメモリー領域の先頭アドレスを格納する
- インデックス・レジスタ
  - ベースレジスタからの相対アドレスを格納する
- 汎用レジスタ
  - 任意のデータを格納する
- スタックレジスタ
  - スタック領域の先頭アドレスを格納する

### CPUが実行できるマシン語命令

- データ転送命令
  - レジスタとメモリー、メモリーとメモリー、レジスタと周辺装置の間でデータを読み書きする
- 演算命令
  - アキュムレータで算術演算、論理演算、比較演算、シフト演算を行う
- ジャンプ命令
  - 条件分岐、繰り返し、無条件のジャンプを行う
- コール・リターン命令
  - 関数を呼び出す・呼び出し元に戻る

## 2進数について

### 浮動小数点数
- 小数点数を*「符号」*、*「仮数」*、*「基数」*、*「指数」*という4つの部分に分けて表す。

## メモリーについて
- DRAM、SRAM、ROMなどの種類がある

### DLL（Dynamic Link Library）
- プログラム実行時にライブラリが動的に結合されるもの。

## プログラムが動く環境
- マシン語になっているコードを「ネイティブコード」という

### プログラムを実行したときに何が起こるのか？
- プログラムを実行するにはメモリーに読み込む必要がある
- アプリケーションプログラムはファイルとして、ストレージに格納されている。これを実行ファイルと呼ぶ
- OS毎に、実行ファイルの形式が定められている
- 実行ファイルを元にメモリー何に確保されていく領域を「セクション」と呼ぶ
- このようにして作られたメモリーの状態を「実行イメージ」と呼ぶ
- プロセスは
  - 実行イメージ
  - 仮想メモリの状態
  - 実行中のCPU内部情報
  - カーネル側の管理情報
を含めたもの

### BIOS
- Basic Input/Output Systemの略
- ROMに記憶され、予めコンピュータ本体に内蔵されているプログラム
- キーボード、ディスク、グラフィックボードなどの基本制御プログラムのほか、「ブート・ストラップ・ローダー」を起動する機能を持っている

### ブート・ストラップ・ローダー
- ブート・ストラップ・ローダーは、起動ドライブの先頭領域に記憶された小さなプログラム
- コンピュータの電源を入れると、BIOSがハードウェアの正常動作を確認し、問題なければブート・ストラップ・ローダーを起動します。
- ブート・ストラップ・ローダーの役割は、ハードディスクなどに記録されたOSをメモリにロードして実行すること

## コンパイル
- コンパイルして生成されるのはオブジェクトファイル
- 複数のオブジェクトファイルを結合して1つのEXEファイルを生成する処理がリンク
- `sprintf()`などの関数は、ソースコードではなくライブラリファイルの形でコンパイラと一緒に提供される。このような関数を標準関数と呼ぶ

## OSとアプリケーションの関係
- モニタープログラムという、プログラムのロードと実行する機能を持つものがOSの原型
- そこに、基本的な入出力をおkなう部分的なプログラムがモニター・プログラムに追加された。
- OSのハードウェア制御機能は小さな関数の集合体として提供されているのが一般的。これらの関数、および関数を呼び出す行為のことをシステム・コールと呼ぶ
- time()やprintf()の内部でシステムコールが行われている。
- C言語などの高水準言語は、特定のOSに依存しないもので、WindowsやLinuxでも基本的に同じソースコードを使えるようにするために高水準言語では独自の関数名を使い、それがコンパイルされる時にだいとうするOSのシステム・コールに変換される
- ネットワーク機能や、データベース機能は、OSに近い存在なので、ミドルウェアと総称されます。
- OSとミドルウェアをまとめて、システムソフトウェアと呼ぶこともあります。
- プラグ&プレイは、新しい装置を接続すると、すぐに使える仕組みのこと。
- デバイスドライバはOSの一部

## アセンブリ言語について
- ネイティブコードの命令に、その機能を表す英語の略称を付けたものをニーモニックという。アセンブリ言語では、ニーモニックをつかってプログラムを記述する。

## ハードウェア
- ディスプレイに表示されている情報を常に記憶しているメモリーのことを、VRAM(Video RAM)という
- 現在のパソコンでは、ビデオ・カードやグラフィックス・ボードと呼ばれる専用のハードウェア上に、メイン・メモリーとは独立したVRAMとGPU(Graphics Processing Unit)が装備されている

時間があるときに、もう少しわかりやすくまとめたいと思います！
typescriptとbabelを使ってるライブラリを眺める


## 検討

typescriptで書いてるが、よく分からない。
これをes2015に変換できてそこから拡張性できたりしないものかなと思ったら、
何やらできそうな感じもあったので調べた。。

トランスパイラなのか、変換のつーるがいくつかあって混乱した。
ディレクトリ構成もわかっていなかったのも混乱していた理由だった。。


```
tsc
tsc -p .
tsc --traget es6 .

tsd
typescripts
typings
```

* とりあえず、tsc -p .でlib以下にファイルができることは理解した。
* npm run start(webpack dev server)を実行する前に変換は終えている状態っぽい。
	細かいオプションはわからないが、、
* tsconfig.jsonがtscの設定。
* typingsは型の定義なので、変換には直接は関係していないっぽい。。少なくとも変換はできた。
* 変換後のファイルはES2015で、短縮系の記述になっていた。ファットアローとかとかとか。変換すげーな。。

これで結構満足できたけど、じゃあ、typescriptを学ぶべきなのかどうかをちょっと悩むな。

うーん、つい、調べてしまって具体的な進捗に繋がらない。。

変換後のファイルとdiffをとって眺めた。。
typescriptのほうが型指定ができているし、それ以外はそこまで困ることもなさそうだし基本ES2015と同じだな。。
使うのはアリかもなあ。

typescript2.0がリリースされるのが近々でだいぶ便利になるらしい。
webstormも対応したりしてる。

## urls

typescript transpile es6 - Google 検索
https://www.google.co.jp/search?num=100&safe=off&espv=2&q=typescript+transpile+es6&oq=typescript+transpile+es6&gs_l=serp.3..0i8i13i30k1.32737.33418.0.33973.5.5.0.0.0.0.161.288.0j2.2.0....0...1c.1.64.serp..3.2.287.yNqh2dRhM18

javascript - Can TypeScript compile to ES6 code? - Stack Overflow
http://stackoverflow.com/questions/30439869/can-typescript-compile-to-es6-code

TypeScript -> Babel の多段構成をやめた - 15 min/d
http://bouzuya.hatenablog.com/entry/2016/03/15/145210

kimamula/ts-babel
https://github.com/kimamula/ts-babel

Learn ES2015 · Babel
https://babeljs.io/docs/learn-es2015/

TypeScriptでasync/await (webpackビルド) - Qiita
http://qiita.com/tkrkt/items/8c819e3649db8bd15428

JavaScriptよさらば。「TypeScript」で始めるECMAScript 2015 | GROUP DEV BLOG | TECHNO MOBILE
https://www.tcmobile.jp/dev_blog/devtool/javascript%E3%82%88%E3%81%95%E3%82%89%E3%81%B0%E3%80%82%E3%80%8Ctypescript%E3%80%8D%E3%81%A7%E5%A7%8B%E3%82%81%E3%82%8Becmascript-2015/

typings tsc - Google 検索
https://www.google.co.jp/search?num=100&safe=off&espv=2&q=typings+tsc+&oq=typings+tsc+&gs_l=serp.3..0i13i10i30k1l2.3126.5273.0.5445.4.4.0.0.0.0.179.639.0j4.4.0....0...1c.1.64.serp..0.2.344...30i10k1.8A2vu-9OcuM

TypeScriptのtsdがオワコンになったのでtypingsを使ってみた | Black Everyday Company
http://kuroeveryday.blogspot.jp/2016/02/typescript-typings.html

TypeScript の開発環境構築と周辺ツールの紹介 | HTML5Experts.jp
https://html5experts.jp/vvakame/17004/



Redux typed actions でReducerを型安全に書く (TypeScriptのバージョン別) - Qiita
http://qiita.com/wadahiro/items/7c421b668f28a99e2a29

TypeScript2.0+webpack - Qiita
http://qiita.com/kmkm/items/e05cf7127395090e6019

WebStorm 2016.2 released: TypeScript 2.0, improved support for React, Angular CLI, and more | WebStorm Blog
https://blog.jetbrains.com/webstorm/2016/07/webstorm-2016-2/
混沌から構造化する レイヤパターンによる設計アプローチ

以前、[良い設計を会社に例えた話](http://qiita.com/bino98/items/f7c9060a81c0cb6a6984)を体系的にまとまっている情報があったので、それをベースにQiitaに残します。

## 前提
- 分割可能な大規模システム

## 課題
- 抽象度が異なる要素が混在するシステム
	- イメージとしてはOSI参照モデル

### フォース
- レイヤに含まれるコンポネントは変更があっても、他のレイヤ／コンポネントに影響がない
- インタフェースは変更されてはならない
- システムの部分要素は交換が可能である
	- システムの一部を交換することで再コンパイルされないことで、変更に対する許容を持たせる
- コンポネントの粒度に標準がない
- コンポネント境界はパフォーマンス低下を生む
- システムを分業できるようにする

## 解決策
- 解決策は単純で、システムを適当数のレイヤに分割し、それを重ねていくということ

## 静的側面
- レイヤコンポーネントをCRCカードなどで表現する
- レイヤJがレイヤJ-1を利用するだけ。各レイヤ間でそれ以上の依存関係はない。
	- レイヤJが必ずしもユーザに近いわけではない。トップダウンアプローチにおいては、レイヤJはOSI参照モデルにおける第7層、レイヤJ-1は第6層を取る

## 動的側面
### シナリオ1 (トップダウン・アプローチ)
- レイヤNに来たリクエストはそのレイヤだけでは対処できないため、レイヤN-1に支援してもらう
- 最上位層から最下位層、最下位層から最上位層というデータの流れ

### シナリオ2（ボトムダウン・アプローチ）
- 動作は最下位層から始める
- リクエストではなく、「通知」されるという
- 通知に対してあ、最上位層まで1対1になる事が多い
- 上位層でコールバックとして実装する

### シナリオ3・シナリオ4
- データが途中の層で止まって、再び呼び差しの層まで戻る。
	- cacheされるというとわかりやすい感じ。 

### シナリオ5
- 2以上のレイヤスタックを持つ。リクエスト／通知に対して、レスポンスが別のレイヤを通して返ってくる...など。

## 実装
- 段階的詳細化という

### 手順
1. タスクをグループ化してレイヤとするための抽象の基準を定義する
	- チェスに例えると、ゲームの基本的単位(ビショップなど)、基本的な動き(ビショップはどう動くか)、中期的な戦術(シチリア攻防)、ゲーム全体の戦略
2. 抽象の基準にしたがって抽象レベルの数を決定する。
	- レイヤが多すぎるとオーバヘッドが大きくなるぞ
3. レイヤに名前をつけて、タスクを割り振る
	- ボトムアップアプローチはドメインの予見力がないと難しいから諸刃の剣である。気をつける。
4. サービスを仕様化する
	- レイヤがまたがるコンポーネントはダメゼッタイ
	- レイヤが提供する関数やエラータイプなど、言語に組み込んであるものを使用することが望ましい。
	- 基盤レイヤは極力数を少なく。また、下位レイヤは上位レイヤよりサービスの数が多くなるはずである。プリミティブだと思ってても、変わることあるんやで。なおさらスリムにしておく。
5. 1から4を繰り返す
	- 特に1は、1から4をやらないと定義できないことがあるので、やる。
	- コンポーネントやサービスからレイヤを割り当てると、絶対無理が出る。
	- トップダウン・ボトムアップで繰り返すことで、より洗練される。「ヨーヨー開発」

6. 各レイヤのインタフェースを決定する
	- 経験則的に、レイヤJ-1はブラックボックスである方が良いらしい。
	- ホワイトボックスでも、Reflectionパターンを用いれば良い...らしいが、あまり考えないようにする

7. 個々のレイヤを構造化する
	- レイヤ...ではなく、より実装に近い要素を思考する。例えば、デザインパターンを当てはめてみるなど。

8. 隣接するレイヤ間の通信を仕様化する
	- レイヤ間の通信はプッシュ型なのか、プル型なのか。

9. 隣接するレイヤの結合を解除する。
	- 例えば、下位レイヤは上位レイヤが誰であろうが構わない。コレは一方向による結合の関係になっている。

10. 例外処理戦略を設計する。
	- 下位レイヤで起こった例外は上位レイヤまで戻さないほうが良い

## バリエーション
- リラックスレイヤシステム
- 継承によるレイヤ化

## 運用例
- 仮想マシン
	- 最終的にはbinaryを実行する仮想マシンは、上位レイヤではそれを意識しない
- API
	- 頻繁に利用される関数を纏めてあるもの。下位レイヤをカプセル化する役割もある
- 情報システム

## 結論
### 利点
- レイヤの再利用
- 標準化の支援
- 依存性の局所化
- 交換容易性

### 欠点
- 振る舞いの変更がカスケードする
	- 下位レイヤの変更は上位レイヤが受け入れられない事が多い。
	- イーサネットからATMに変更すると...
- 低い効率性
	- オブジェクトの海になることがおおい
- 不必要な作業
	- 1つのリクエストを行うために下位レイヤで同じような処理を繰り返すことがある。
- レイヤの粒度を決定することが困難である
	- レイヤ数が多ければオーバヘッドが。少なければレイヤパターンの恩恵は受けづらくなる

## 超参考
- ソフトウェア・アーキテクチャ F.ブッシュマンら著
NFSサーバーを構築したメモ


NFSサーバーを構築したメモ
今回は、
* サーバー           Debian 8.5 (IPアドレス:192.168.1.100)
* クライアント     Ubuntu14.04 (IPアドレス:192.168.1.200)

/home/server/foo を公開する

## 1. ホストの設定

まずはサーバーを以下のコマンドでインストール

```bash:Debian8.5
su
apt-get install nfs-kernel-server
```


次に

```
/etc/exports
```
に以下のように追記

```
# (公開したいディレクトリ) (どのマシンに公開するか)(公開モード)
/home/server/foo 192.168.1.200(rw,sync,no_subtree_check)
```

exports を編集したら以下のコマンドで再起動

```bash
/etc/init.d/nfs-kernel-server restart
```


## 2. クライアントの設定

最初にインストール

```bash:Ubuntu14.04
sudo apt-get install nfs-common
```

マウント先のディレクトリを作成しておく

```bash
mkdir /home/client/bar
```

今回はfstab でマウントします

```
/etc/fstab
```

に以下を追記

```
# (マウントしたいディレクトリ) (マウント先) nfs rw 0 0
192.168.1.100:/home/server/foo /home/client/bar nfs rw 0 0
``` 

ここで、クライアント側をリブート

クライアント側から、マウントできていれば完了です。お疲れ様でした。
【Unity】異なる発生確率をもったアイテムを選択する

メモ代わりにUnity公式のドキュメントからコピペ

こんな感じの時に使用

* 50% の確率で親しみやすい挨拶
* 25% 確率で逃走
* 20% 確率で急な攻撃
* 5% 確率でお金をプレゼント

```csharp
// C#
float Choose (float[] probs) {

    float total = 0;

    foreach (float elem in probs) {
        total += elem;
    }

    float randomPoint = Random.value * total;

    for (int i= 0; i < probs.Length; i++) {
        if (randomPoint < probs[i]) {
            return i;
        }
        else {
            randomPoint -= probs[i];
        }
    }
    return probs.Length - 1;
}
```
Attribution model with R 記事の紹介 + 図示用に必要なパッケージ記録


　ウェブ分析をしていると、ユーザーが最初にサービスの何に触れたかでKPIに違いがあるか知りたくなることがあります。その結果が分かると、さらに２つ目に接触するものが違うと、KPIが変化するか？ということを知りたくなります。
　まともにやると、ユーザーをグループ分けして分析して、またグループ分けして分析して、、、ということが続いて、延々にループが発生してしまいます。
何か良い方法がないかなと思っていたら、良さそうな記事が紹介されてました。

Attribution model with R (part 1: Markov chains concept)
http://analyzecore.com/2016/08/03/attribution-model-r-part-1/

詳細はリンク先の記事を参考にして欲しいのですが、
記事中には使用例が３つあり、最後の結果を図示をするときに、私の環境では明記されてないパッケージが必要でしたので、記録しておきます。

## 利用パッケージ
R :3.31
dplyr : 0.5.0
reshape : 0.85
ggplot2 : 2.1.0
ChannelAttribution : 1.8
markovchain : 0.6

記事には書かれてなかったですが、
私の環境だと、以下のパッケージも結果の図示用に必要でした。
RColorBrewer : 1.12
ggthemes : 3.2.0
ggrepel : 0.5
画像の一部のみ処理するＲＯＩの設定について【OpenCV2.x,3.x】

# メモ書き

忘れやすい自分のためのメモ書きです．
「画像の一部をぼかし処理したいっ！」とか思ったときに
すぐに思い出せないことがあるので．．．

画像の一部を処理する方法は，[マイナビのOpenCVブックサポートサイト](https://book.mynavi.jp/support/pc/opencv2/c3/opencv_img.html)に載っています．
こちらを参考にしました．

# サンプルコード
サンプルコードは以下の通りです．
入力画像を表示する時に，処理範囲がわかりやすいように緑の矩形を表示しています．

```cpp

#include"OpenCV3.h" //自作OpenCVヘッダ

int main(void)
{
	//画像入力
	cv::Mat img = cv::imread("img_0.jpg");

	//処理領域を設定
	cv::Rect roi(390, 124, 110, 100);

	//出力の初期化(入力画像を複製)
	cv::Mat dst_img = img.clone();

	//ROIの設定
	cv::Mat s_roi = img(roi);
	cv::Mat d_roi = dst_img(roi);  /* 出力側も同じ領域を指定 */

	//ROIの領域をぼかす
	cv::blur(s_roi, d_roi, cv::Size(30,30));  /* ROIを設定した画像で入出力を行う */
	
	//ぼかした領域をわかりやすくするために入力画像に矩形描画
	cv::Mat rect_img = img.clone();
	cv::rectangle(rect_img,roi, cv::Scalar(0, 255, 0), 2);

	//描画
	cv::namedWindow("image", CV_WINDOW_AUTOSIZE | CV_WINDOW_FREERATIO);
	cv::namedWindow("dst_image", CV_WINDOW_AUTOSIZE | CV_WINDOW_FREERATIO);
	cv::imshow("image", rect_img);
	cv::imshow("dst_image", dst_img);
	cv::waitKey();

	cv::destroyAllWindows();

	return 0;
}
```

# 処理結果

処理結果は以下のとおり・・・悪意はあります．

## 入力画像
緑の枠の部分をぼかし処理します．
![image_screenshot_13.08.2016.png](https://qiita-image-store.s3.amazonaws.com/0/104675/a7e11b14-2f94-3cf5-caae-66bab1150262.png)

## 出力結果
選択した範囲のみぼかし処理が施され，出力されます．
![dst_image_screenshot_13.08.2016.png](https://qiita-image-store.s3.amazonaws.com/0/104675/9de03290-3b3f-c77f-9cc5-e471f86aadc4.png)
CloudSQL (2nd gen) + App Engine PHP でphpMyAdminを動かすよ


Google Cloud SQLの第二世代に、Google App Engine PHPの上にphpMyAdminを乗っけて動かしたので作業内容公開するよ

## 動機

Cloud SQL繋いでデータ見たいんだったら他のツール使えばいいじゃんって思うんですが、いかんせんうちは外部へのWebやらメール以外の接続は許可されていないのですよ。
じゃあphpMyAdminを提供してあげなきゃいけないじゃないですかぁっ！

GCEで立てても良かったんだけど、お金かけたくないからApp Engineで立てました。

## 基本

公式にチュートリアルが用意されてるので嫁
https://cloud.google.com/sql/docs/phpmyadmin-on-app-engine

もうほぼこれだけで終了です。
デプロイまでこれでいけます。

自分はデプロイのコマンドは`gcloud app deploy`を使いました。
この場合、`app.yaml`の記述で、`application`と`module`を消さないといけません。

## チュートリアルは第二世代に対応してない

`config.inc.yml`の以下の記述

```
$host = '/cloudsql/{{your_project_id}}:{{your_cloudsql_instance}}'
```

これだと第二世代に対応してません。
このままインスタンスとプロジェクトIDを無邪気に書いてデプロイした結果がこれだよ

![スクリーンショット 2016-08-13 15.08.07.png](https://qiita-image-store.s3.amazonaws.com/0/8637/436335f3-7d90-6109-e34b-5de8f5bbb65f.png "スクリーンショット 2016-08-13 15.08.07.png")

最初出たときは普通にこのメッセージで探してパラメータいじったりしたんですが、理由は簡単でした。

公式に書いてますｗ
https://cloud.google.com/sql/docs/app-engine-connect#gaev1-csqlv2

2の`Update your application`のdです。

```
/cloudsql/<INSTANCE_CONNECTION_NAME>
```

`INSTANCE_CONNECTION_NAME`です。
最初INSTANCE_NAMEだと思ってました。
なので繋がるわけがない。

Developer Console見ましょう。

インスタンス接続名というのがあります。
ここに書いてる値を設定すればOKです。

```
<project_id>:<zone>:<instance_name>
```

になってますね。

ところで、第二世代なのに第一世代って左に出るのやめてほしいですねｗ
どっちやねん！

![cloudsql.png](https://qiita-image-store.s3.amazonaws.com/0/8637/ad31bef1-973d-1331-3e71-bee74f684df3.png "cloudsql.png")
Dataloaderでローカルファイルをアップロードする

# はじめに
Salesforceの運用を自動化するため、Force CLIツールでレコードの作成や更新を実装したが、ローカルファイルのアップロードを実装できなかった。いろいろ調べたところDataLoaderを使用して実装可能なことが分かりましたので、実装するまでの過程を紹介します。


# 必要なツール
- Windows PC
    - CLIqはWindowsのみ対応。今回の検証環境はWindows10。
- SFDCアカウント
    - 本番アカウント・開発アカウントのどちらでも◎。
- DataLoader
    - 当初v36で試したがうまくいかず、v29で試したところあっさりクリア。<br>
      過去バージョンはこちらからダウンロード可能→[apex-data-loader-archive](http://www.cloudsuccess.com/resource-centre/apex-data-loader-archive/)
- CLIq
    - バッチファイルでDataLoaderを実行できるツール。<br>
    こちらからダウンロード可能→[dataloadercliq](https://code.google.com/archive/p/dataloadercliq/)


# 前提知識<br>
詳しい知識は不要だが各種ツールの基本的な使用方法などを把握していると尚良し。

- SFDCの基本知識
    - オブジェクトの種類、必要項目の種類 ...etc
- SOQLを使った基本的なクエリの実行
- DataLoaderの基本的な利用方法

# 実装方法
それでは実装方法の説明です。
DataLoaderは上記アーカイブからv29をダウンロードしてインストールするのみ。
CLIqはZIPファイルをダウンロードし解凍後、DataLoaderのファイルが保存されているフォルダにCLIqのフォルダごとコピーします。<br>
以下にようなフォルダ構成になっていればOK。（cliq_processはこの時点でなくてもOKです）
![alt](https://qiita-image-store.s3.amazonaws.com/0/71569/0f0a9a49-5246-70b3-f5e1-319bfff30a11.png)

ファイルの配置が完了したらcliqフォルダの中にあるcliqバッチファイルを実行します。
![alt](https://qiita-image-store.s3.amazonaws.com/0/71569/f53b2c01-5e2d-105d-6c15-98cf5c24fc41.png)

バッチファイルを実行するとコマンドプロンプトが立ち上がり、CLIqの画面が表示されます。
ここで実行内容を設定することで、次回よりバッチファイルの実行だけで必要な処理が実行されます。
![image](https://qiita-image-store.s3.amazonaws.com/0/71569/118fd685-9761-ff9c-3faf-84e52bec9fa2.png)

入力内容は以下の通り。

- Insertを選択
- Enter Process Name:  適当な名前を入力。（attachment_test..etc）
- Username/password: セールスフォースのアカウント情報。
- Entity Name: 今回は添付ファイルをアップロードするので「Attachment」と入力。
- Create Data Loader CLI Filesを押下。
    - ここで「指定されたパスが見つかりません」と表示される場合は、フォルダへのアクセス権に問題がある可能性が高いです。<br>ログインしているユーザに参照権限を付与して再度実行しましょう。
 
ここまで実行すると「cliq_process」フォルダが作成され、その中にProcess名のフォルダが作成されているはずです。

「read」フォルダ内に実行する処理内容を記述したCSVファイルを配置し、実行することでローカルファイルをアップロードすることができます。

**ここで注意！！**
DataLoaderでは処理内容を記述して、項目名をMappingし実行だけでOKですが、
CLIqのMappingは「Config」ファイル内のSDLファイルに記載する必要があります。
これを忘れるといくら実行してもファイルはアップロードされません。
※他サイトではあまり記載がなく、ハマリました。

```text:ProcessName.sdl
PARENTID=ParentId
NAME=Name
CONTENTTYPE=ContentType
BODY=Body
OWNERID=OwnerId
```
あとはCSVファイルに以下項目を記述して、バッチファイルを実行するだけです。

- ParentId: AccountのIdでOK
- Name: ファイル名。（xxxxx.pdf ..etc）
- ContentType: (application/pdf ..etc)
- Body: ローカルファイルのフルパス。
- OwnerId: ユーザID



以上が実装までの手順になります。
添付ファイルのアップロードに関してはあまり参考資料がないので、是非試して頂ければ幸いです！

# SFDC運用の自動化について
Force CLIツールを使用してSOQLでクエリを実行し、「read」フォルダ内のファイルを自動作成または更新をかけることでタスクの自動化が可能。
これらの自動化はBizRobo!を使用することで実装可能。
[BizRobo!によるタスク自動化](https://bizrobo.com/)
![image](https://www.youtube.com/watch?v=7bSIM2O9jL0)
<br>
<br>


> 参考ページ
- [Salesforce Developer - データエクスポートのファイルを利用して、添付ファイルをインポートするには？](https://help.salesforce.com/apex/HTViewSolution?id=000003866&language=ja)
- [Terra Sky - DataLoaderを使いこなそう](http://www.terrasky.co.jp/blog/2013/130415_001281.php)
【WordPress✕MW_WP_Form + α】フォームから入力後の確認画面で、所定の動的な文字・数字を表示する

WordPressを導入しているサイトで、以下のことをやりたかったのですが、良い方法が思い浮かばず、結局既存のプラグインに手を加えてしまったお話

やりたかったこと

1. 複数の設問を備えたアンケートの入力
2. アンケートのお礼に何らかの重複しないギフトコードを表示する

以下、色々がんばっちゃっているのですが、もっと素敵な方法があったら教えてほしい。。

# アンケートの入力フォームプラグイン
有名所だとWP-Pollsがあるのですが、複数の設問に対応していなさそうだったので断念。
その後、カスタマイズ性の高い、[MW WP Form](http://plugins.2inc.org/mw-wp-form/)を発見。
ショートコードを使って、かなり自由度の高い設問を備えたフォームが作成できる。
フィルターフックやアクションフックも多数そろえており、
これならやりたいことができるかもっ！
とマニュアルをみたり、コードを書いてみたりしたもののやっぱりできない。

ということで、MW WP Formのソースを解析していじることに。

# MW WP Formの修正
実現方法の構成を以下のようにする

1.アンケート入力フォームにhiddenフィールドを設ける
2.このhiddenフィールドに、UUIDを埋め込む
3.アンケート入力後の確認画面で埋め込んだUUIDを表示する

hiddenフィールドを使いたくはなかったけれど、MW WP Formの構造を変えないでやるには手軽だったので。

以下で詳細を記述します。

## 1.アンケート入力フォームにhiddenフィールドを設ける
MW WP Formの標準のショートコードを用いて、MW WP Formに以下を入力する

`[mwform_hidden name="hoge" value=""]`

これで、出力されるフォームにhiddenフィールドが追加される。

なお、hogeを有効にするためには、MW WP Formのフォーム入力画面の管理者メール設定の本文に
`{hoge}`
を追加しておく必要があります。

また、合わせて、設定の「問い合わせデータをデータベース」にもチェックをいれておく。


## 2.このhiddenフィールドに、UUIDを埋め込む
このvalueにUUIDを埋め込むため、MW WP Formでサポートしているフィルターを使う

```
/**
 * @param string $content
 * @return string
 */
function my_mwform_post_content( $content ) {
	$uuid = uniqid();
	$hoge = 'name="hoge" value="'.$uuid.'"';
	$content = str_replace('name="hoge" value=""',$presentCode,$content);
	return $content;
}
add_filter( 'mwform_post_content_mw-wp-form-XXX', 'my_mwform_post_content' );
```

※mwform_post_content_mw-wp-form-XXXのXXXには、MW WP Formのフォーム識別子に置き換える

これで、以下のようにhiddenフィールドのvalueにUUIDが埋め込まれる

```
<p><input type="hidden" name="hoge" value="57aeb0c1c23fb" /></p>
```

##3.アンケート入力後の確認画面で埋め込んだUUIDを表示する
これに相当する機能が見当たらずMW WP Formを修正

### 確認画面の表示直前のフィルターを新規追加する
MW WP Formの以下のコードに修正する。
wp-content/plugins/mw-wp-form/classes/services/class.exec-shortcode.php

関数 mwform_complete_message() を修正する

```
	/**
	 * 完了後のメッセージ
	 *
	 * @param array $attributes
	 * @return string html
	 */
	public function mwform_complete_message( $attributes, $content = '' ) {
/*以下の1行を追加*/
		$content = apply_filters('mwform_before_completemessage', $content,$this->Data->gets());

		$form_key = $this->get( 'key' );
		return sprintf(
			'<div id="mw_wp_form_%s" class="mw_wp_form mw_wp_form_%s">
				%s
			<!-- end .mw_wp_form --></div>',
			esc_attr( $form_key ),
			esc_attr( $this->view_flg ),
			$content
		);
	}
```

これで、確認画面出力直前の結果をフィルターで修正できるようになる。

次に、追加したフィルターを用いて、hiddenフィールドのvalueを確認画面に表示する。

と、その前の準備。

MW WP Formの完了画面メッセージに以下を追加しておく。
`あなたのギフトコードは{hoge}です。`

これで、確認画面に{hoge}という文字が埋め込まれるので、これをhiddenフィールドに入れた、UUIDに置換する、というフィルターを作成すればよい。

```
/**
 * @param string $content
 * @param MW_WP_Form_Data $Data
 */
function my_mwform_before_completemessage( $content,$Data) {
	if ($Data) {
		$giftCode = $Data['hoge'];
		if($giftCode){
			$content = str_replace('{hoge}',$giftCode,$content);
		}
	}
	return $content;
}
add_filter( 'mwform_before_completemessage', 'my_mwform_before_completemessage', 10, 2 );
```

以上で、冒頭でも記述したやりたかったことができるようになります。

>1. 複数の設問を備えたアンケートの入力
>2. アンケートのお礼に何らかの重複しないギフトコードを表示する

#まとめ
MW WP Formの作者さん、変なコードを入れてしまってすみません。
良い方法があれば教えてくださいm(_ _)m
もし、なければこんな感じの機能を追加してもらえると嬉しいです。
RubyのHashの落とし穴？

Rubyの配列とHashを使っていて個人的にハマったのでメモ。
Hashの配列を作り、それをHashで扱うときがありましたが、Array.newで初期化してから値の変更をしようとすると全てのkeyの値が変わってしまいました。

```
# これはダメ
temp = {}
init = {:a => 0, :b => 0}
temp[:aaa] = Array.new(2, init)

p temp

# 値を代入
temp[:aaa][0][:a] = 1

p temp






# これはOK
temp = {}
temp[:aaa] = [
  {
    :a => 0,
    :b => 0
  },
  {
    :a => 0,
    :b => 0
  }
]

p temp

# 値を代入
temp[:aaa][0][:a] = 1

p temp
```

結果

```
{:aaa=>[{:a=>0, :b=>0}, {:a=>0, :b=>0}]}
{:aaa=>[{:a=>1, :b=>0}, {:a=>1, :b=>0}]}
{:aaa=>[{:a=>0, :b=>0}, {:a=>0, :b=>0}]}
{:aaa=>[{:a=>1, :b=>0}, {:a=>0, :b=>0}]}
```

(追記)
原因はこれ。
http://simanman.hatenablog.com/entry/2013/06/24/200306
初期化の仕方に問題があるみたいです。
最初の初期化で別々の配列オブジェクトを定義したつもりが、実は全て同じ配列オブジェクトを参照しているらしいですね。

ちなみに
```temp[:aaa] = Array.new(2, init)
```ここの部分ですが、
```temp[:aaa] = Array.new(2).map{Hash.new}
```のように初期化しないとダメでした。
doxygen(graphviz) on cygwinでコールグラフのフォントが豆腐になる件

#doxygenでコールグラフを作ってみたらフォントが□(いわゆる豆腐)になる

というわけで、備忘録。
gnupack環境を使っているので、タグづけておいた。

doxygenを走らせると、
```
(process:5952): Pango-WARNING **: failed to choose a font, expect ugly output. engine-type='PangoRenderFc', script='latin'
```
と出て、文字が豆腐になることがある。
見たまんまのウォーニングですが、見たまんまの名前と実際に入れる名前が違うもので…

```
# apt-cyg -p none install dejavu-fonts
Cache directory is /setup
Mirror is http://ftp.jaist.ac.jp/pub/cygwin
Updating setup.ini
signature verified: setup.bz2.sig
signature verified: setup.ini.sig
Updated setup.ini

Installing dejavu-fonts
Found package dejavu-fonts
dejavu-fonts-2.35-2.tar.xz              100%[=================================================================================>]   2.20M  2.55MB/s 時間 0.9s
2016-06-03 13:07:40 URL:http://ftp.jaist.ac.jp/pub/cygwin/noarch/release/dejavu-fonts/dejavu-fonts-2.35-2.tar.xz [2309192/2309192] -> "dejavu-fonts-2.35-2.tar.xz" [1]
hash_check: sha512sum: dejavu-fonts-2.35-2.tar.xz: OK
Unpacking...
Package dejavu-fonts installed
```

と、 dejavuフォントを入れることで治る。

豆腐がちゃんと文字になります。


#apt-cygでなんかおかしいぞ！？
あと、


```
# apt-cyg update
Cache directory is /setup
Mirror is http://ftp.jaist.ac.jp/pub/cygwin
Updating setup.ini
wget: ホストアドレス `バイナリファイル (標準入力) に一致しました' を解決できませんでした。
wget: ホストアドレス `バイナリファイル (標準入力) に一致しました' を解決できませんでした。
Error: updating setup.ini, reverting.
```
と、なる場合は、

```
# apt-cyg -p none update
Cache directory is /setup
Mirror is http://ftp.jaist.ac.jp/pub/cygwin
Updating setup.ini
signature verified: setup.bz2.sig
signature verified: setup.ini.sig
Updated setup.ini
```

-p noneでproxyを探しにいかないようにすればいける。


#bashがいちいち結果を報告してくれる

こんなエラーを追いかける際は、

apt-cygの先頭の、

```
#!/usr/bin/env bash
```

を、

```
#!/usr/bin/bash -x
```

として実行すると、逐一実行コマンドが表示されるので、追いかけに便利
envじゃなくて直接bashを指すので、パスは適宜変えてください。
-xオプションは便利ですね
パーティションを結合したらUbuntuが起動しなくなった話

# 症状
Ubuntu16.04(/dev/sda5), Ubuntu14.04(/dev/sda6), /home以下(/dev/sda8)をそれぞれパーティション切って使っていました。
しかしUbuntu16.04の領域を25GBしか確保しなかったため、使い始めて半年を待たずに空き領域が1/3になってしまいました。
そこで、全く使っていないUbuntu14.04の領域をパージし、Ubuntu16.04の領域を増やすことにしました。
gpartedで`/dev/sda6`を削除、`/dev/sda5`の領域を拡大することはすんなりできましたが...

GRUBからUbuntuを起動すると、以下のメッセージが。

``` 
Welcome to emergency mode! After logging in, type "journalctl -xb" to view
system logs, "systemctl reboot" to reboot, "systemctl default" to try again
to boot into default mode.
Give root password for maintenance
(or type Control-D to continue)
```

（引用元:[RaspbianでWelcome to emergency mode!](http://qiita.com/shoooo/items/115e8b4c2561b392ca72) ）

`/etc/fstab`を確認してみる。

```:/etc/fstab
 UUID=ddf4ccf6-d9d9-4b08-9ab8-39b7a19aa77b /               ext4     errors=remount-ro 0       1
 # swap was on /dev/sda6 during installation
 UUID=144976b4-7d1e-41ff-9527-db2477a13d6e none            swap    sw              0       0
 /dev/sda8 /home ext4 defaults 0 2
```

`errors=remount-ro`という見覚えのない文字が。
とりあえずバックアップを取ります。

```
 # cp /etc/fstab /etc/fstab.org
```

# 解決法
しかし原因はその行ではなく、その下の

```
/dev/sda8 /home ext4 defaults 0 2
```

の方にありました。
`/dev/sda6`を削除したことで、デバイスIDが前倒しになり、`/dev/sda8`が読みに行けないことが今回の症状の原因でした。
`/etc/fstab`を以下のように書き換えて再起動すると、復旧されました。

```:/etc/fstab
/dev/sda5 /               ext4    defaults 0       1
/dev/sda7 /home ext4 defaults 0 2
```
ADX2 LEでのBGMポーズ処理

あるクラスで流したBGMを、ポーズ用のクラスから一時停止させる方法。

ココ↓
[UnityでADX2 LE用のSoundManagerを作成してみた](http://qiita.com/tt-coder/items/250f7339d1efc3a2ea7d)
で作成したSoundManagerを使用する。

#実行環境
・Windows 10
・Unity 5.4.0f3
・音関係はADX2 LEで管理

#BGMを再生する処理が入っているクラスの一部分
```c#:hogehoge.cs
 public static SoundManager sm; // staticとすることで、他のクラスから参照

 void Start(){
   sm = gameObject.GetComponent<SoundManager>();
   sm.PlayBGM("sample"); //ここでBGMを流す
 }

```
ここでは、初期化時点でBGMを流す処理をしている。

#ポーズ処理用のクラス
```c#:PauseMenu.cs
using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class PauseMenu : MonoBehaviour {

    public void OnPauseMenu() { // ポーズメニューをしたときの処理を記述（ここでは、BGM一時停止のみ）
        hogehoge.sm.PauseBGM(); // BGMを一時停止
    }

}
```

あまりstaticは使用したくないが、手軽な感じでの実装方法。
staticなので、hogehogeクラスを参照
テスト用に実装するなら、uGUIでボタンを作成し、ボタンの動作をOnPauseMenu()と結びつければ、確認できる。
【Rails】Integration test で but rendering with , 422エラー


Railsのチュートリアルをやっていて、7章でIntegration testがうまくpassできませんでした。
その時のまとめです。

## 環境
* iMac El capitan 10.11.6
* vagrant centos 6.7 minimal
* ruby 2.3.1p112
* rails 4.2.6


Passできなかったのは、
* リスト7.21: 無効なユーザー登録に対するテスト 
です。

大体以下のようなエラーが出ていました。

```bash
 expecting <"users/new"> but rendering with 
<["rescues/_source", "rescues/_trace", "rescues/_request_and_response",
 "rescues/diagnostics", "rescues/layout", "_markup", "_inner_console_markup.html",
 "layouts/inlined_string", "_prompt_box_markup.html", "style.css", "console",
 "layouts/javascript", "main", "error_page", "index"]>
```

```bash
Expected response to be a <success>, but was <422>
```

## 原因

原因は、Integration testの実行環境がdevelopmentだったため、RailsのCSRFの保護機能によって、外部からのPOSTがブロックされていたためでした。

テストの実行環境が test だったら特に問題にならなかったと思います。
ただ、Railsのチュートリアルをやっている段階では、多くの人は developmentでやっているのではないかと思うので、同じようにつまづいてしまう人のために書いておこうと思います。

## 解決策

解決策は至って単純で、実行環境のRailsのCSRF保護機能をオフにしてあげれば良いです。
もちろん、production環境ではオフにできませんが、開発環境、それもチュートリアル中であればこの対策で十分だと思います。

Railsのdevelopment環境のconfigに、以下を追記します。

```ruby:config/environments/development.rb 
  # Disable request forgery protection in development environment.
  config.action_controller.allow_forgery_protection = false
```

ちなみに、実際のCSRF保護の呼び出しは、application_controller.rbで行われています。

```ruby:app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception
end
```
protect_from_forgery でCSRF保護機能を呼び出しています。

解決策として、もしくは、実行環境をtestに変更する、というのでも良いのかもしれません。


## デフォルトURL

上記を調べていて気づいたことですが、railsのintegration testで users_url などの_urlヘルパーを使う場合は、デフォルトのURLがサンプルのURLになっているので気をつけましょう。

こちらを変更する場合も、configファイルに追記することで、URLを変更することができます。
これ以外にも、リクエスト送信先のホストを変更する手段は幾つかあるようですが、全体を変更する場合は、設定ファイルが妥当だと思います。

開発環境のconfigに以下を追記します。

```ruby:
  config.action_controller.default_url_options = { host: '192.168.33.10' }
```

IPの部分はご自分の環境に合わせてください。

## 参考サイト

[railsguides.jp-security-csrf](http://railsguides.jp/security.html#%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%B5%E3%82%A4%E3%83%88%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%83%95%E3%82%A9%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%AA-csrf)
[RailsのCSRF対策の仕組みについて](http://shindolog.hatenablog.com/entry/2014/09/01/013840)
angular-fullstackアプリケーションをherokuにデプロイ

## 環境
- OSX 10.11
- node v6.3.1
- angulr-fullstack v3.7.5
- npm 3.10.6 

## 手順
- grunt build
- cd dist
- heroku login
- git init
- heroku git:remote -a YOUR-APP-NAME
- git add .
- git commit -m "first commit"
- git push heroku master
Node.jsでWebスクレイピングした内容をCSV出力

# 背景
とある番組で、誕生花についての話をされていました。そのときに、ふと「誕生花が取得できるAPIを作ろう」と思い立ったので、その前段のお話。

# アイデア
1. 適当にどっかの誕生花が載ってるサイトを探す
2. スクレイピングする
3. CSVに出力する
4. APIを作る
5. CSVを元にPOSTする
6. API叩いて誕生花取得

こんな感じでなんとかなるだろうと思いやってみました。この記事は1〜3までですね。

# 実装
今回は[cheerio-httpcli](https://www.npmjs.com/package/cheerio-httpcli)を使いました。基本的に下記でできちゃいます。

```js:scraping.js
var client = require('cheerio-httpcli');
var fs = require('fs');

// filename.csvの作成
fs.writeFile('filename.csv',"");

client.fetch('http://www.yourwebsite.jp', function (err, $, res) {
    if (err) {
        console.log(err);
    } else {
        // $にDOMが格納されているので、$をイジイジする
        var mes = "CSVに, 出力したい, 内容\n";
        fs.appendFile('filename.csv', mes, 'utf-8');
    }
});
```

# 解説
## スクレイピング
スクレイピングしたい場合は、あるタグとその子要素を取得したいことが多いと思います。例えば以下。

```html
<div class="hoge">
  <h3>fugafuga</h3>
  <p class="pic">
    <img></img>
  </p>
</div>
<div class="hoge">
  <h3>fugafuga</h3>
  <p class="pic">
    <img src="http~~"></img>
  </p>
</div>
```

このような場合は以下のように書くと取得できます。

```js
// divタグのclassがhogeのものを取得しそれぞれに対して処理を行う
$('div.hoge').each(function (idx) {
      var temp = $(this);
      var h3 = temp.find('h3').text();
      var imgUrl = temp.find('p.pic > img').attr('src');
});
```

このように取得していき、順番にCSV出力するもよし、まとめて出力するもよしです。

## CSV出力
これは超簡単ですね。今回はappendFileを利用しています。appendFileは追記になります。writeFileだと上書きされてしまいます。

# まとめ
ものすごく便利なライブラリでした。一度使うノウハウを蓄えておくと、どのサイトでもスクレイピングできそうです。
update-initramfs の余分なメッセージ（修正済みだった）

# update-initramfs の余分なメッセージ
```
update-initramfs: Generating /boot/initrd.img-4.6.0-1-amd64
cp: '/etc/modprobe.d/*' を stat できません: そのようなファイルやディレクトリはありません
```

ファイルがあることを確認して動作してほしいよね。

...git repoでは直ってた。
【Swift】型推論でビルドに時間がかかっている場合の解決法

## はじめに
最近プロジェクトのビルドが遅くなってきたので、[Swiftのメソッド毎のコンパイル時間を計測してビルド時間を短縮する](http://qiita.com/rizumita/items/913b05d799b3712260f6)という記事を参考にメソッド毎のビルド時間を図ってみました。

## Arrayの結合
すると**174536.7ms**というとんでもなくビルドに時間がかかっていた1つのメソッドがありました。
そこで型推論に時間がかかっていたものはこんな感じの部分でした。

```swift
//※実際のコードではなく、類似したコードを書いています

let resultDict: [String : NSObject] = ... //サーバーから受け取ったJSONがDictonaryとしてパースされたもの

//Dictionaryの中から異なるCommentListというものを取得する
guard
    let commentListA = resultDict["commentListA"] as? [[String : NSObject]],
    let commentListB = resultDict["commentListB"] as? [[String : NSObject]],
    let commentListC = resultDict["commentListC"] as? [[String : NSObject]],
    let commentListD = resultDict["commentListD"] as? [[String : NSObject]],
else { return }

//ここのArrayの結合部分で時間がかかっていた
let rawCommentList = commentListA + commentListB + commentListC + commentListD

//Comment型にDictionaryを変換（Dictionaryの中身が正しいものでない場合は、nilを返す）
let commentList = rawCommentList.flatMap { Comment(dictionary: $0) }
```

下記のように修正したところ、**42.7ms**まで短縮されました。

```swift
//※実際のコードではなく、類似したコードを書いています

//Arrayを結合するメソッドを追加
extension Array {
    func join(array: [Element]) -> [Element] {
        return Array([self, array].flatten())
    }
}

let resultDict: [String : NSObject] = ...

//DictionaryのArray（[[String : NSObject]]）であることを明記
guard
    let commentListA: [[String : NSObject]] = resultDict["commentListA"] as? [[String : NSObject]],
    let commentListB: [[String : NSObject]] = resultDict["commentListB"] as? [[String : NSObject]],
    let commentListC: [[String : NSObject]] = resultDict["commentListC"] as? [[String : NSObject]],
    let commentListD: [[String : NSObject]] = resultDict["commentListD"] as? [[String : NSObject]],
else { return }

//"+"による結合ではなく、"join()"を使った結合に変更
let rawCommentList: [[String : NSObject]] = commentListA.join(commentListB).join(commentListC).join(commentListD)

//Comment型のArrayであることを明記
let commentList: [Comment] = rawCommentList.flatMap { Comment(dictionary: $0) }
```

## 型変換

`flatMap`や`sort`を連続して行っているメソッドで、**921.6ms**もビルドに時間がかかっていたものがありました。

```swift
//任意のCellのArrayをNSIndexPathに変換して、rowを降順にsort
let sortedIndexPaths = tableView.visibleCells.flatMap { $0 as? CustomTableViewCell }.flatMap { tableView.indexPathForCell($0) }.sort { $0.row < $1.row }
```

下記のように一度変数に代入してから次の処理を行うことで、**136.7ms**まで短縮されました。
※その他の処理を行っているので、1つ目ほどの短縮とはなっていません。

```swift
//CustomTableViewCellのArrayに変換
let customCells: [CustomTableViewCell] = tableView.visibleCells.flatMap { $0 as? CustomTableViewCell }
//NSIndexPathのArrayに変換
let indexPaths: [NSIndexPath] = customCells.flatMap { tableView.indexPathForCell($0) }
//rowの降順にsort
let sortedIndexPaths: [NSIndexPath] = indexPaths.sort { $0.row < $1.row }
```

## まとめ
Arrayを`+`で結合するよりも`Array([[AnyObject],[AnyObject]].flatten())`で結合するほうが、型推論に時間がかからないようです。
ビルド時間は短縮されましたが、Swiftらしい書き方が損なわれてしまうのが気がかりです。
Google Compute Engine 上に構築した Redmine の添付ファイルフォルダを Google Cloud Storage バケットにマップする

[Cloud Storage FUSE](https://cloud.google.com/storage/docs/gcs-fuse) を使って redmine/filesフォルダに Google Cloud Storage のバケットをマップします。

# Compute Engine のスコープ確認
Compute Engine に``storage-full`` のスコープが設定されている必要があります。インスタンス作成時に コマンドラインなら 

```
gcloud compte instances create --scopes default="https://www.googleapis.com/auth/devstorage.full_control"
```
の指定を、Web UIなら「ID と API へのアクセス」でストレージ＞フルの設定を忘れないようにしてください。
作成済みのインスタンスへのスコープ追加は

```
gcloud beta compute instances set-scopes INSTANCE_NAME --zone=ZONE --scopes=storage-full 
```

でできます。後からスコープ追加のコマンドは2016年12月ころに追加されました。


# GCS バケットの用意
https://console.cloud.google.com/storage/browser で適当なバケットを作ってください。
本稿ではバケット名を [your-bucket-name-for-redmine-upload] と表現します。

# GCSFUSE のインストール
Ubuntu 16.04 での例。他のディストリビューションは [gcsfuseインストール](https://github.com/GoogleCloudPlatform/gcsfuse/blob/master/docs/installing.md) を参照してください。

### リポジトリ追加
```
export GCSFUSE_REPO=gcsfuse-`lsb_release -c -s`
echo "deb http://packages.cloud.google.com/apt $GCSFUSE_REPO main" | sudo tee /etc/apt/sources.list.d/gcsfuse.list
curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add -
```

### パッケージ更新・インストール

```
sudo apt-get update
sudo apt-get install gcsfuse
```

# 既存ファイルのバックアップ

redmine/files フォルダの中身をバックアップします。
以下は Redmine のインストールフォルダが /var/lib/redmine でのケース。

```
cp -R /var/lib/redmile/files /tmp
```

# マウント
redmine のユーザーアカウントとしてマウントししてください。**後からchownできません。**
```
sudo -u www-data gcsfuse --file-mode "777" --dir-mode "755" [your-bucket-name-for-redmine-upload] /var/lib/redmine/files
```

# バックアップの復帰
```
sudo -u www-data cp -R /tmp/files /var/lib/redmine
```