OmniAICreator/Qiita-1.07M huggingface dataset:
apache のデフォルト実行ユーザ www-data で github や bitbucket にSSH 接続する


Redmine や Jenkins などWEBサーバを建てていると、github や bitbucket 、デプロイ先のPCなどに、WebサーバーからSSH接続したくなるときがあります。今回は、WEBサービスの実行ユーザ(www-data)のSSH接続の設定方法を記述します。なお、私の使っているOSはUbuntu であるため、Redhat系ではどうやって行うのか知りません。知っている人が教えていただければ嬉しいです。

## 結論

www-dataで公開鍵、秘密鍵を作成

```
$ sudo -u www-data ssh-keygen -t rsa
```

作成した公開鍵(id_rsa.pub)はgithubやbitbucketに登録しておきます。
/var/www/.ssh/config に次の設定を記述

``` conf:config
Host github.com
    Hostname github.com
    IdentityFile /var/www/.ssh/id_rsa
    User git
    Port 22

Host bitbucket.org
    Hostname bitbucket.org
    IdentityFile /var/www/.ssh/id_rsa
    User git
    Port 22
```

ログインテストをしてみて、正しくログインできれば完了です。

```
$ ssh -T github.com
```

## 解説
debian 系のapache2 実行ユーザはwww-data です。ですが、www-data はLinuxのシステムユーザのため、ログインすることができません。なので、su www-data と実行してログインユーザを変更することができず、ssh-keygen も実行できません。
解決策としては sudo コマンドを利用します。

```
$ sudo -u www-data ssh-keygen
```

-u オプションでコマンドの実行ユーザーを指定することができます。
公開鍵と秘密鍵が/var/www/.ssh/に作成されます。
あとは、Githubやbitbucketに公開鍵を登録して、configファイルを作成してやると完了です。

### www-data のホームフォルダ
www-data のホームフォルダは/var/www/です。

ホームフォルダの場所は

```
$ sudo cat /etc/passwd | grep www-data
```

で確認できます。

なので、www-data でSSHコマンドを実行するときは /var/www/.ssh/ フォルダが参照されるということです。
今回はsudo コマンドでssh-keygenコマンドを実行しましたが、www-data のホームフォルダが/var/www/ であるということを知っているならば、次のようなコマンドでもSSH接続の設定ができるはずです。これだったらRedhat系でもできるんじゃないでしょうか？

```
$sudo su
# mkdir -p /var/www/.ssh/
# ssh-keygen -t rsa -f /var/www/.ssh/id_rsa
# vi config
Host github.com
    Hostname github.com
    IdentityFile /var/www/.ssh/id_rsa
    User git
    Port 22

# chown -R www-data:www-data /var/www/.ssh/
```

### あとがき
www-data でSSH接続する方法について、日本語で書かれた記事が見つけられなかったため、書きました。誰かの役に立てれば幸いです。
３ヶ月でMVPを作る - Week 5

##進歩

![1002_01.png](https://qiita-image-store.s3.amazonaws.com/0/104858/ad16949c-3e17-c677-e657-f836a292206d.png)
S3でホストした画像を、htmlでリンクを貼ることでどうにか画像がうまく表示

![1002_02.png](https://qiita-image-store.s3.amazonaws.com/0/104858/503b9b0d-b2be-73d4-8bff-ea97023daa5d.png)
deviseのフラッシュにbootstrapのテーマを適用（先頭にある・を消したい）

![1002_03.png](https://qiita-image-store.s3.amazonaws.com/0/104858/f975eea7-9b06-f82a-5e06-088d672a29e7.png)
sendgridで認証メールを送っても、"A message with a confirmation link has been sent to your email address. Please follow the link to activate your account."というメッセージが出ないのが悩みの種。


##やったこと
-S3に画像などのデータをホストする
-RDSを設定してEC2インスタンスに接続する
-Devise gemのFlashメッセージにbootstrapのデザインを適用する
-Deviseとsendgridを連携させて、サインアップ時にメールを送る
-質問サイト（teratailとstack overflow）への質問の投稿した！


##学び
-RDSは本当にこの記事に助けてもらった
http://qiita.com/hiroshik1985/items/6643b7323183f82297b2﻿
-asset:precompileすると文字の位置は正しいところに移動
http://qiita.com/naoki_mochizuki/items/5a1757d222806cbe0cd1#%E7%A2%BA%E8%AA%8D
-本番環境で画像が表示されない問題の解決法
http://qiita.com/wadako111/items/03bc00d914e62243a511﻿
-Railsでよく使われるgemの一覧
https://www.quora.com/What-are-the-most-useful-gems-to-use-in-Rails﻿
-この通りコピペしたらdeviseのflashがうまくいった（英語）
http://stackoverflow.com/questions/20260151/devise-flash-method-rails﻿
-これが理解できれば、transactional mailは完璧？！（英語）
http://www.bogotobogo.com/RubyOnRails/RubyOnRails_Devise_Authentication_Sending_Confirmation_Email.php﻿
-秘密鍵をそのままgithub上に公開ないためにも環境変数についての理解
http://tsumazuki.hatenadiary.jp/entry/2013/08/22/110530﻿

（全ての学びはここに👇）
https://plus.google.com/u/1/107221871269602934448

##これから
-ドメイン名とIPアドレスの結びつける 
https://aws.amazon.com/jp/getting-started/get-a-domain/
（これを参考にしているのに全然うまくいかない。。）
-httpsからでも画面を表示できるようにする（うまくいかない。。）
-旅行フォームの入力画面を作成する
-写真のアップロード機能をAjaxで実装する
-その過程でRailsとRubyをもっと理解する


##感想
過去１週間の投稿をもう一度振り返ると、どれだけMVP開発が順調に進んでいないかが分かってしまう。特に金曜日の夜に「１時間で５つぐらいの違うエラーメッセージに遭遇した」や「MVPを開発するだけで後１０００回ぐらいは壁にぶち当たりそうな、この果てしない感覚は何なんだろう。。﻿」という自分の投稿を振り返ると、初心者がMVPを制作するのも苦労するのがわかる。

せめてもの救いがteratailやstackoverflowに投稿した質問には、すぐに返信が返ってきて何とか先に進むことができた。きっとこのままのペースだと終わらないから必要最小限の機能以外はリリースしてから実装したり、分からないことは質問サイトに投稿したり、友人のエンジニアに助けてもらうことで、どうにかMVPを３ヶ月以内に完成させたい！
クラス間でのメソッド実行　Javaの問題をTypeScriptにしてみる 6-2

次のプログラムの実行結果を選びなさい

```java:java.java
public class Sample {
  private String value;
  public void setValue(String value){
   this.value = value;
  }
  public String getValue(){
   return this.value;
  }
}

public class Main{
 public static void main(String[] args){
  Sample s = new Sample();
  String val = s.setValue("hello");
  s.getValue();
  System.out.println(val);
 }
}
```

A.Mainクラスの「String val = s.setValue(“hello”);」でコンパイルエラーが発生する。
B.Mainクラスの「 s.getValue();」でコンパイルエラーが発生する。
C. AとB両方が発生する
D.何も発生しない。

答えはAです。
setValueには戻り値は設定されていません。よってコンパイルエラーが発生します。
また、コンパイルエラーは発生しませんが、Bも戻り値を受け取っていないので、使い方としては間違っています。

これをTypeScriptで書くと

```ts:TypeScript.ts
class Sample{
  private value:string;
  public setValue(value:string):void{
   this.value = value;
  }
  public getValue():string{
   return this.value;
  }
}

var s = new Sample;
var val:string = s.setValue("hello");
s.getValue();
console.log(val);
```
とこのようになります。nodejsでコンパイルをかけてみると

```ts:node実行.js
ts62.ts(16,5): error TS2322: Type 'void' is not assignable to type 'string'.

```

というエラーが表示されました。同様の動きのようです。
ちなみに、このプログラムを書きなおすなら

```ts:TypeScript.ts
class Sample{
  private value:string;
  public setValue(value:string):void{
   this.value = value;
  }
  public getValue():string{
   return this.value;
  }
}

var s = new Sample;
s.setValue("hello");
var val:string = s.getValue();
console.log(val);
```
このようになります。こちらなら正常にコンパイルされ「hello」が表示されました。
Lazurite Mini > 消費電流を計算してみた > 40.7uA/秒

920MHz帯無線通信搭載マイコン
http://www.lapis-semi.com/jp/company/news/news2016/r201609_1.html

> 注2：10年以上動作
1000mAhの電池容量で、7m秒の無線通信を１時間に40回通信した場合の換算値。

### 計算1

上記を元に「７m秒」の消費電流を計算してみる。

10年 = 365 * 10 * 24 = 87600 h

1000mAhをフルに使うと仮定したら

1000mAh / 87600h
= 0.0114mA

これが　1hあたりの平均消費電流。

1時間に7m秒の通信を40回する、というので

消費電流_7m秒　* 40 = 0.0114mA
消費電流_7m秒 = 0.0114 / 40 mA = 0.000285 mA = 0.285 uA

上記の計算が間違ってなければ、ESP8266と比べても驚異的に消費電流が小さい。
無線を使ってこれはすごい。

### 待機ばかりの場合

> また、ハードウエアとソフトウェアの最適化により、待機電流を 約7uAとArduino比で99.98%削減し、単三電池3本で10年以上動作することが可能です。 

7uAという表記があった。

待機ばかりの場合。
1000mAh / 7uA = 142857.1 h
142857.1 h = 142857.1 / 24 days = 5952 days

こちらは確かに10年以上だ。

### 再計算

計算1の再度検討。

消費電流_7m秒 = 0.0114 / 40 mA = 0.000285 mA = 0.285 uA

は「7m秒」間の消費。

消費電流_1秒 = 0.285 * (1000 / 7) = 40.7uA

1秒あたりの消費電流でも十分小さい。

なお、上記の計算は「動作時間」しか考慮していない。待機時間の消費電流は0mAでの計算だ。
「待機時間」も考慮した計算にした方がより正確な値になる。
Google が提供している無料で使えるデータベース

Google が提供しているデータベースについて調べてみました。

ちょっとしたデータを保持する無料で使えるデータベースが欲しかったので、Googleが提供しているデータベースサービスについて調べてみました。

2016年10月時点の情報です。

# Google Sheets
* 無料
* Quotaがあるが、余裕がある。
 * 1,000,000,000 requests per day per API 
* セルの最大個数は200万個　(https://support.google.com/drive/answer/37603?visit_id=1-636112169262357756-1179412859&rd=1) 
*　 Google driveのストレージ容量の無料枠は15GB per アカウント 
* ちゃんとしたデータベースではないけど、CSV的なデータを溜め込むのには使える。

# Google Fusion Tables
* 無料
* Quotaがある。 けっこう、すぐに引っかかるみたい。
 * 25,000 requests per day per API 
 * 30 write requests per minute per table
 * 250 MB per table
 * 1 GB total among all your tables
 * https://developers.google.com/fusiontables/docs/v2/using#quota

# Firebase
* 無料利用枠がある。 1GB stored / 10 GB downloaded

# Google Cloud Datasrore
* 無料利用枠がある。 1 GB ストレージ / 読み取りオペレーション 50k / 書き込みオペレーション 50k / 小規模オペレーション 50k

# Google App Engine
* Google Cloud Datastore の無料利用枠が使える。

# Google Cloud SQL
* 無料利用枠はない。

# Google Cloud Bigtable
* 無料利用枠はない。
カメラの距離に応じて音量を変える


デモ：https://mo49.github.io/qiita/20160908/audio.html

まずデータを用意

```javascript:SOUNDBOX_DATA
const SOUNDBOX_DATA = [
	{
		imgSrc: './img/rad.png',
		audioSrc: './sound/rad.mp3',
		pos: {
			x:0,
			y:15,
			z:0
		}
	},
	{
		imgSrc: './img/utada.jpg',
		audioSrc: './sound/utada.mp3',
		pos: {
			x:0,
			y:15,
			z:100
		}
	},
	{
		imgSrc: './img/yonezu.jpg',
		audioSrc: './sound/yonezu.mp3',
		pos: {
			x:0,
			y:15,
			z:-100
		}
	}
]
```

続いて、音源を置く箱を作成

```javascript:createSoundBox
createSoundBox(src, pos) {
	const geom = new THREE.BoxGeometry(30,30,30);
	const textureLoader = new THREE.TextureLoader();
	const texture = textureLoader.load(src);
	texture.minFilter = texture.magFilter = THREE.LinearFilter;
	const mat = new THREE.MeshBasicMaterial({
		color:0xffffff,
		side:THREE.DoubleSide,
		map:texture
	})
	const mesh = new THREE.Mesh(geom, mat);
	mesh.position.set(pos.x, pos.y, pos.z);

	return mesh;
}
```

作成した箱に音源を紐付ける

```javascript:setAudio
setAudio(src, mesh, refDis, rolloff, volume) {
	const listener = new THREE.AudioListener();
	this.camera.add(listener);

	const sound = new THREE.PositionalAudio(listener);
	const audioLoader = new THREE.AudioLoader();

	refDis = refDis || 10; // 音量が下がり始める距離
	rolloff = rolloff || 2; // 音源から遠ざかった時にどのくらいすぐに音量が下がるか
	volume = volume || 1;

	audioLoader.load(src, (buffer) => {
		sound.autoplay = true;
		sound.setBuffer(buffer);
		sound.setRefDistance(refDis);
		sound.setLoop(true);
		sound.setRolloffFactor(rolloff);
		sound.setVolume(volume);
		mesh.add(sound);
	})
}
```

シーンに音源を追加

```javascript
for (let data of SOUNDBOX_DATA) {
	const mesh = this.createSoundBox(data.imgSrc, data.pos);
	this.scene.add(mesh);
	this.setAudio(data.audioSrc, mesh);
}
```
MSC-MOD20 > SDモジュール ソフト > v0.12 > 複数行のI2C通信の不具合対応 / SD空き容量読取り実装

```txt:動作確認
ESP8266 (気圧計で使用したユニバーサル基板: I2Cを4.7kでプルアップ)
SDモジュール: MSC-MOD20 ( http://www.microtechnica-shop.jp/shopdetail/000000000026/ )
```

http://qiita.com/7of9/items/0b17a601e464e67494af
の続き。


## code v0.12

[v0.12 @ github](https://github.com/yasokada/esp8266_160730_MSC-MOD20p1/releases/tag/v0.12)

以下が主な変更

- I2Cの複数行応答の読取り変更
- SDのバージョン確認コマンドにてACKをチェックするように変更
- SDの空き容量を確認するコマンドを実装

```txt:結果
v2.0.0
init SD: OK
rcvd:!00

2:22,$000000006E170000
!00

SD free space:
$000000006E170000
```

途中にデバッグ用の出力(2:22...)があるが、バージョン(v2.0.0)と空き容量($000000006E170000)が読取りできた。

## I2C > 複数行の応答読取りのハマリポイント

空き容量の確認コマンドの応答は以下のようになっている。

```
$000000006E170000<0x0A>
!00<0x0A><0x00>
```

こういう場合に各行をどう読取るか?

### 試した方法1 > 0x0Aまで読取る

ターミネータが0x0Aなので、0x0Aまで読取る処理にした。

自分の実装が悪かったのか、MSC-MOD20のI2C通信に問題があったのか不明だが、通信が失敗するようになった。
未確認ではあるが、<0x0A><0x00>で終わる場合は、きちんと<0x00>を読込まないとその後の通信がおかしくなるようだ。

一方で、上記の複数行の例にあるように<0x0A>の後のコードは<0x00>とは限らない。これを考慮した処理は複雑になりそうなため、0x0Aまでの読取りという方針はやめた。

### 試した方法2 > 複数行を読取ってからsplit

I2C通信をした時は、とにかく<0x00>まで読取り、その後に読取った文字列を<0x0A>区切りで分割することにした。

こちらの方は問題なく動作し、今のバージョンで使用している。
03-5050-1410詐欺スパムアドウェアをタスクマネージャから見つけて削除した話

03-5050-1410詐欺スパムアドウェアをタスクマネージャから見つけて削除した話タイトルまんまです。
ほんとーにイラついたのでyahoo！知恵袋でも解決できなかった人のために書き残しておきます。

これが出た人の解決方法です。

![2016-09-21_19h23_35.png](https://qiita-image-store.s3.amazonaws.com/0/103720/601d9a3d-95cb-b816-5917-1fc6302142ed.png)

１）Ctrl　＋　Shift　＋　Esc　を同時に押してタスクマネージャを開きましょう。
![2016-09-21_19h32_53.png](https://qiita-image-store.s3.amazonaws.com/0/103720/bb0a4669-72d2-df73-a4b5-2b17b0a71cd5.png)
キーボードきたない。。すみません。。

２）タスクマネージャが開けましたね？こんなやつ。
![2016-09-21_19h30_01.png](https://qiita-image-store.s3.amazonaws.com/0/103720/398ed4b8-a4d1-6f8f-7543-a63792a8c6ba.png)

３）その中にem.exeっていうのが出してるプログラム。なのでem.exeを右クリックして、出たメニューから　ファイルの場所を開く　を選びます。
![2016-09-21_19h54_32.png](https://qiita-image-store.s3.amazonaws.com/0/103720/491d73a6-2b0e-5dd5-a7af-df5485438a1e.png)

でたーお前かー！という気持ちを抑えて、再度タスクマネージャでem.exeを右クリックしてタスクを終了させます。※タスクマネージャでem.exeを終了させないと、起動中のプログラムは削除できないよーっていうエラーが出るので、いったん終了させる

４）出たファイルごと削除して駆除完了です。（今回であればEventMonitorファイルですね）

お疲れ様でした。


セキュリティソフト入れてても自分でアドウェアインストールしてりゃ世話ないですよね…気を付けようと思いました。
mac os sierra にアップグレードしたら git が Permission denied (publickey). とか言い出した（原因不明だけど解決した）

せっかくの土曜日だし、そろそろいいだろう。と思って mac os を sierra にアップグレードしてみました。
まんまとハマったので書いておきます。

# git pull が出来ません。

githubでprivateでホスティングしているリポジトリです。
厳密に言うと、SSHがつながってない感じ。

```
$ git pull origin master
Switched to branch 'master'
Your branch is up-to-date with 'origin/master'.
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```

そう言えば一発目にKeychainのパスワード入力のやつ出なかったな。変わったのかなー…
だけど、これはSSHする時にkeyが見つからないとかのやつだな。余裕だぜと思って

# brew upgrade --all

Homebrew 経由で入れた git を使っていたので、「きっとsierra用に新しいのがあるはず」とupgradeしてもダメ。

XCode最新版をAppStoreからインストール後に

```
$ brew update
$ brew upgrade --all
```

動かない…エラーも変わらない…

# ssh-add すれば…

```
$ eval "$(ssh-agent -s)"
$ ssh-add ~/.ssh/id_rsa
```

とかしましたが、動かない。エラー内容も一向に変わらない。

# keyを別名で作り直して `.ssh/config` に設定

色々ググったけど `ssh-add` のやつばっか出てきて、俺ググり力が低いなーと思いながら、
今までの自分を捨てて過去の自分を捨てて一からやり直そう。過去の過ちを清算しよう。
と思い、keyを作り直しました。
`github_id_rsa` みたいなファイル名にして作り直したらうまく動いたよ。

```
$ ssh-keygen -t rsa -b 4096 -C "*****@gmail.com"  # 途中でファイル名聞かれるので github_id_rsa と答えた
$ cat .ssh/github_id_rsa.pub | pbcopy  # これをgithubに登録
```

動きましたが未だ原因が分かってません…腑に落ちない…
どなたかご存知でしたらコメント頂けますと嬉しいです…
GitLab運用で起きた謎現象と解決方法

皆さんはGitLabをどのくらいのユーザで使用していますか？
仕事でユーザ数2000超えのGitLabの運用を行ってます。
リポジトリも4000を超え、よくわからない現象にたまに出会います。。。
(本家の英語のissue読めよって話ですが…)

現在version：8系のGitLabCEをソースビルドして使用しているのですが、以下のような現象に出くわした。
(大人の都合でパッケージ版は使えない。)

## pushしたはずのブランチがMergeRequestから見えなくなる現象
これは以下のissueで上がっている内容です。
https://gitlab.com/gitlab-org/gitlab-ce/issues/15392

cacheのclearをすると直るようです。

```bash
~/gitlab
bundle exec rake cache:clear RAILS_ENV=production
```

リモートのリポジトリ(/home/git/repositories配下)には問題なさそうで…。
発生するタイミングは、新しいリポジトリをpushした時のように見える。
ただし、100%起きるわけではない。
1度発生したリポジトリは何度も再発する。

直感的には、何らかのタイミングで
app/workers/配下のものが呼ばれていない感じがする。

GitLabを止めずにcache:clearが実行でき、実行中もredisにキューはたまり、実行も行われる。
これは救いである。
しかし、発生を知るには１度起きたリポジトリを目視して確認するか、ユーザからの問い合わせを待つしかないように思えるのがつらみ。

公式が修正されるまでは、cronで適度なタイミングでcache:clearを実行するのが良いのだろうか…。
または、新規にリポジトリを作ってもらってお引っ越しして貰えば、起きないのだろうか…。
後者はissueやMergeRequest、wikiなどを捨てることになるので、最悪の場合の選択肢だろう。

## MergeRequestにpushしたコミットが反映されない現象
これはissue上がってます？
見つけた方いらっしゃいましたら、教えてください。

WIPのMergeRequestや、コードレビューの後に、修正分・加筆分をpushすることがあるかと思います。
CommitsやNetworkにはコミットが反映されるが、MergeRequestの差分には反映されない現象が起きた。

これは、GitLabのサーバ管理者ではなく、ユーザがワークアラウンドで解消することが可能でした。
発生したMergeRequestを `Close` → `Reopen` するだけで良いです。
これはReopenの際にブランチ比較を再実行がされ、差分が再構築されるのを利用してます。


---
他にもみなさんが出くわした、よくわからない事象がありましたら共有してほしいです。
GitLabはいろんなところで使用されているため、導入手順は確立され日本語記事が上がってくるのですが、
運用で起きたことは本家のissueを見ないとわからないことが多く、英語が読めない身としては辛いものがあります。

みなさんよろしくお願いしますmm
Qiita > コードのスクロールバー表示回避

Qiitaのコード表示においては、複数行の表示("```"使用)ではスクロールバーが標準でつく。

時々、そのスクロールバーによりコードの閲覧性が悪いと思う時がある。

本日、Qiitaの投稿記事を見ていてその回避策を見つけた。
それは、「複数行の表示」でなく「１行表示」を使うこと。

### 実例

https://en.wikipedia.org/wiki/One-liner_program
のExcamplesのCで試した (本当はbashのone-linearなど記載したかったが具体例を見つけていない)。

```
main(int c,char**v){return!m(v[1],v[2]);}m(char*s,char*t){return*t-42?*s?63==*t|*s==*t&&m(s+1,t+1):!*t:m(s,t+1)||*s&&m(s+1,t);}
```

`main(int c,char**v){return!m(v[1],v[2]);}m(char*s,char*t){return*t-42?*s?63==*t|*s==*t&&m(s+1,t+1):!*t:m(s,t+1)||*s&&m(s+1,t);}`

後者だとmain()という表記と後ろの処理すべてを一見できる。

スクロールバーを使ってみた時と、一見できる表示の違いは、モニタの切替え表示の時のコンテキストスイッチに似ている気がする。
[Webプログラマーがデュアルディスプレイで作業する理由 @ shi3zの長文日記](http://d.hatena.ne.jp/shi3z/20070923/1190551088)
> 　単位時間当たりにどれだけ作業を効率的に進めることが出来るかということを「生産性」と呼ぶとすれば、ALT+TABによるタスク切り替えは脳のタスクスイッチにとって完全に悪なのです。
　もっと言えば、ALT+TABを押すことにより画面が切り替わると、思考が分断され、実際にはもっと多くの時間を失うことになります。

コードについて試案している中で「スクロールバーの操作を行う」というのが苦手だ。

関連 http://qiita.com/7of9/items/47fb1a83d982a9e85c93
技術英語 > for ages 0 through 17 and 66 and over, ... / aged 18 or over

@ Code Complete (No. 13939 / 36077)

> for ages 0 through 17 and 66 and over, ...

意訳「0才から17才、66才以上（の人）に対して」

<hr>
関連して思い出したのは

aged 18

https://en.wikipedia.org/wiki/Appropriate_adult
> any responsible person aged 18 or over

<hr>
age以外でも使えそうな気がするがソースはなし。
Blenderで立体視静止画/動画を作成するためにいじるとこ

# はじめに
数年前までは自分で頑張るか、野良のアドオンもしくは野良ビルドを拾ってきて作るしかなかったBlenderによる立体視静止画/動画の作成ですが、2.75から立体視(Multi View)に公式対応しはじめ、ついに2.78では全球の立体視静止画/動画を作成できるようになりました。
その設定方法について簡単に解説します。

Blenderのバージョンはもちろん2.78を使います。

# 通常の立体視静止画/動画の場合
通常の立体視静止画/動画の場合は、Blender RenderとCycles Renderの両方で機能します。

## 立体視を有効化
まず、立体視を有効化する方法について解説します。

Propertiesパネル -> Sceneタブ の下の方にあるViewsにチェックを入れます。

![スクリーンショット 2016-10-01 14.09.56.png](https://qiita-image-store.s3.amazonaws.com/0/34714/34e57c77-f955-0471-311e-61b6b3d3b7fa.png)


すると3D Viewのカメラの前に黒い四角形が表示されます。これはコンバージェンスポイントといって、実際のスクリーンの位置を表しています。この面上にあるものは飛び出しても来ませんし、奥行きを感じたりもしないということになります。この面よりカメラ寄りにあるものは飛び出して見え、この面より遠くにあるものは奥まって見えます。

## 保存方法の設定
レンダリングした画像の保存方法にもいくつか種類がありますので解説します。

![スクリーンショット 2016-10-01 14.55.14.png](https://qiita-image-store.s3.amazonaws.com/0/34714/d6a91c7c-22ae-de23-4c3a-804e9aced137.png)


RenderタブのOutputのところにViews Formatという設定項目が増えています。
Individualは左目用画像右目用画像を、_L/Rといったサフィックスをつけて、それぞれ別のファイルに記録します。
Stereo 3Dは1つのファイルにまとめます。左右の画像を上下(Top-Bottom)に、左右(Side-by-Side, SBS)に、一列ごと交互(Interlace)に並べる、またはアナグリフ(Anaglyph)でといった形式で保存できます。
SBSで左右を逆にする場合はCross-Eyedにチェックを入れます。
Squeezed Frameにチェックを入れるとTop-Bottomなら縦が半分に、Side-by-Sideなら幅が半分になります。
再生できる環境が最も広いと思われるのは、Side-by-SideでSqueezed Frameにチェックを入れたものです。(Individualや、Squeezed FrameしないSBSで出力しておくと、編集などの後工程での融通は効きやすくなるとは思います。)

## カメラの設定

カメラを選択し、Cameraタブに切り替えます。
Stereoscopy -> Convergence Plane Distanceをいじると、コンバージェンスポイント(視差0の位置、スクリーンから飛び出しても奥まっても見えない位置)を変更できます。
Stereoscopy -> Interocular Distanceをいじるとカメラ間距離(視差の量)を変更できます。(Convergence Plane Distance　/ 30が推奨値だそうです。)
Stereoscopy -> PivotをCenterにします。(左右どちらのカメラ、もしくはその中間点を回転中心にするかの設定です。)

![スクリーンショット 2016-10-02 03.12.38.png](https://qiita-image-store.s3.amazonaws.com/0/34714/ce000a19-bc11-5a35-c76b-027191c778c4.png)

これで通常の立体視静止画/動画の場合の設定は完了です。


# 全球の立体視静止画/動画の場合
全球の静止画/動画はCycles Renderのみで利用できます。
全球の立体視静止画/動画の場合も、もちろんCycles Renderのみです。

## 立体視を有効化
上記、通常の場合と同様です。

## 保存方法の設定
設定方法は上記、通常の場合と同様ですが、Squeezed FrameしないTop-Bottomの形式が最近よく使われていると思います。
ちなみに、画像の比率はプラットフォームによって違います。YouTubeでは16:9(1920x1080など)が推奨されており、その他では2:1(1920:960など)がよく使われているようです。（全球静止画/動画では例示した解像度の、最低でも2倍は必要です。3840x2160, 3840x1920など）

## カメラの設定
LensをPanoramicに変更し、TypeはEquirectangularを選択します。
StereoscopyのSpherical Stereoにチェックを入れます。(これを忘れると、一見正しくレンダリングされているように見えますが、正面しか立体視になりません。他の方向を向くと立体視が破綻します。)
Use Pole Mergeにチェックを入れると真上や真下を見たときの違和感が軽減されます。

![スクリーンショット 2016-10-02 03.51.54.png](https://qiita-image-store.s3.amazonaws.com/0/34714/2fc3b680-109e-230b-96de-31ae85a3187b.png)


以上で設定は終わりです。

快適な立体視静止画/動画作成ライフを～♪
ATOMでemmet初期設定

# <i class="fa fa-tag" aria-hidden="true"></i> やること

 - htmlのlangをjaに設定する
 - 閉じタグの後ろにコメントを加える(※)

( ※ 閉じタグの後ろのコメントは、入れたい方だけ入れちゃってください。 )

## <i class="fa fa-tag" aria-hidden="true"></i> デフォルトでは言語指定が英語になっているので、日本語に変更

Emmetを使用していると`!`で`Tab`を押すだけでhtmlが展開されます。
詳しくはこちらの[Emmetチートシート](http://docs.emmet.io/cheat-sheet/)を参考にどうぞ

![en.gif](https://qiita-image-store.s3.amazonaws.com/0/96220/d9969f3e-4e43-9396-551a-a59e739a68d8.gif)


このデフォルト`lang`の`en`を`ja`にするの地味にめんどくさいですよね...
初期設定してしまいましょう！

### 1 .emmetフォルダを作成
 - Windows：　C:¥Users¥ユーザ名¥emmet
 - Mac： /Users/ユーザー名/emmet

### 2. emmetフォルダの中にsnippets.jsonファイルを作成

```snippets.json
{
  "variables": {
    "lang": "ja",
    "locale": "ja-JP"
  },
  "html": {
    "filters": "html,c"
  }
}
```
### 3. ATOMを再起動

1~3までやると設定が反映されます。やったね！楽ちん

![ja.gif](https://qiita-image-store.s3.amazonaws.com/0/96220/1dce5425-7e4c-98b8-941b-89cc82581f93.gif)


<br>

## <i class="fa fa-tag" aria-hidden="true"></i> 閉じタグの後ろにコメントを加える
やりたいこと

```html
<div class="hoge">
</div><!-- /.hoge -->
```

#### 1 .emmetフォルダを作成 (既にemmetフォルダがある方は2から)
 - Windows：　C:¥Users¥ユーザ名¥emmet
 - Mac： /Users/ユーザー名/emmet

#### 2. emmetフォルダの中にpreferences.jsonファイルを作成

```preferences.json
{
  "filter.commentAfter": "<!-- <%= attr(\"id\", \"#\") %><%= attr(\"class\", \".\") %> -->"
}
```

### 3. ATOMを再起動

![cm.gif](https://qiita-image-store.s3.amazonaws.com/0/96220/a20dd5d8-2266-77b8-d288-15addec0d9ce.gif)



設定おつかれさまでした。
關於 Command Line 的自動完成

想說要寫個什麼東西，就來寫這個唄。

Mac 在預設的 bash 狀態下，就像 Linux 一樣有一些基本的自動完成功能，
雖然堪用，不過還是覺得不夠強大

直到我遇到了 zsh 之後

## zsh + oh-my-zsh

這個自動完成和除錯（應該算是除錯吧）的功能，
算是超乎我的想像

裝了之後有發現一些有趣的功能：

### 候選列表

當打入一些字之後，如果有多個候選，他會列表出來，很厲害

### 模糊比對自動完成

假如我想要編輯某個檔案的時候，我只要輸入檔案名稱中的幾個字，
接著按 tab 就可以找到了

### 除錯

這我就覺得滿厲害的，
當我要邊際目前檔案夾裡面某個資料夾的一個檔案的時候，
假如資料夾名稱不小心打錯了，
按下 tab 想要自動完成，還會幫忙改正資料夾的名稱

## 結

目前發現的東西就這些，
沒有裝過的人不妨也裝來玩玩看唄！

- [oh-my-zsh](https://github.com/robbyrussell/oh-my-zsh)
自作repositoryをcomposer経由でinstallしたい

# 背景

+ fuelPHPを触っていて、composer使いやすいな〜と思っていた
+ ansibleの自作rolesを複数repositoryで使いまわしやすいな〜と思ってた
+ **git submoduleはよく分からなかった**

# 導入方法

### 共有repository作成

[github](https://github.com/)、[bitbucket.org](https://bitbucket.org/)等々に登録しましょう。
今回は2段階認証設定済みのbitbucketのプライベートrepositoryで試してみます。

![Screen Shot 2016-10-02 at 02.13.47.png](https://qiita-image-store.s3.amazonaws.com/0/25582/9ecb4933-d57b-1b8f-0a71-37d9787fd467.png)

![02.png](https://qiita-image-store.s3.amazonaws.com/0/25582/b60cd57f-acad-a1a5-305a-6bf7ac17f6a4.png)


### 適用したいrepository

+ インストール

```
$ curl -sS https://getcomposer.org/installer | php
```

```
$ tree
.
└── composer.phar
```

+ composer.jsonの作成

```
$ cat composer.json
{
  "name": "iganari/package",
  "type": "project",
  "repositories": [
    {
      "type": "package",
      "package": {
        "name": "package-ansible-playbook-roles",
        "version": "1.0",
        "source": {
          "url": "ssh://git@bitbucket.org/iganari/package-ansible-playbook-roles.git",
          "type": "git",
          "reference": "master"
        }
      }
    }
  ],
  "require": {
      "package-ansible-playbook-roles": "1.0"
  },
  "config": {
    "vendor-dir": "opsfiles/vagrant/playbook/vendor/"
  }
}
```

後はインストールコマンドで入っていきます。

```
$ php composer.phar install
$ tree -L 2 opsfiles/vagrant/playbook/vendor/
opsfiles/vagrant/playbook/vendor/
├── autoload.php
├── composer
│   ├── ClassLoader.php
│   ├── LICENSE
│   ├── autoload_classmap.php
│   ├── autoload_namespaces.php
│   ├── autoload_psr4.php
│   ├── autoload_real.php
│   ├── autoload_static.php
│   └── installed.json
└── package-ansible-playbook-roles
    ├── readme.md
    └── ubuntu-16.04

3 directories, 10 files
```

なんか~~余計なもの~~色々入って来ましたが、ちゃんと意図してるものは入っています。



### 自作composerではまった点

+ 鍵の設定  
`~/.ssh/config` にて、鍵をbitbucketと紐付けると思うのですが、その時に名前を変えているとそこでコケます。
素直に複数登録するか、composer.jsonをあわせましょう

```text:個人的な設定を晒す
# to private Bitbucket
Host         bitbucket.org bitbucket.org.iganari
Hostname     bitbucket.org
Identityfile ~/.ssh/id_rsa-bitbucket-mykey
```
Fedora 上で CentOS の Docker ベースイメージを作成するときのコマンド

# 背景
http://knowledge.sakura.ad.jp/tech/2226/ を参考にして、Fedora 上で CentOS の Base Image を作ろうとしたけど以下のメッセージが表示されてうまくできなかったので、備忘録

```
$ sudo dnf -c my.cnf --installroot=/tmp/centos6.6 -y groupinstall Core
CentOS-6 - Base                                               1.0 MB/s | 8.2 MB     00:08
エラー: Failed to synchronize cache for repo 'fedora'
```

# 環境
- Fedoraバージョン: 24
- Base Image にする CentOS のバージョン: 6.6

# 解決策
dnf コマンドを使うか、yum-deprecated コマンドを使うかで、リポジトリの指定の仕方が若干違う

dnf コマンドの場合

``` shell-session
sudo dnf -c my.cnf --disablerepo="fedora" --disablerepo="updates" --enablerepo=*-centos6.6 --installroot=/tmp/centos6.6 -y groupinstall Core
```

もしくは

``` shell-session
sudo dnf -c my.cnf --disablerepo="*" --enablerepo=*-centos6.6 --installroot=/tmp/centos6.6 -y groupinstall Core
```

yum-deprecated コマンドの場合

``` shell-session
sudo yum-deprecated -c my.cnf --disablerepo=fedora,updates --installroot=/tmp/centos6.6 -y groupinstall Core
```

- dnf コマンドの場合、カンマ区切りで複数リポジトリを指定できなかった(--disablerepo に `fedora,updates` を指定すると `Error: Unknown repo: 'fedora,updates'` が表示されてエラー)、
- なので、--disablerepo を複数並べるか、--disablerepo で全リポジトリを無効化して、--enablerepo でcentos6.6が含まれるリポジトリを有効化(つまり CentOS6.6 用のリポジトリ ID はワイルドカードで指定できるような命名にする必要あり)
- yum-deprecated はみたまんま

yumは廃止の方向なので、dnfの方がいいかと

# その他
リポジトリの一覧は以下コマンド

```
$ dnf repolist
```

もしくは 

```
$ yum-deprecated repolist
```
React+Reduxで簡単な勉強会イベント検索アプリを作って公開してみる

# はじめに
React+Reduxを使用して、簡単な勉強会イベント検索アプリを作ってみる。

# プロジェクト作成、ライブラリ追加
事前に[ここ](http://qiita.com/cacarrot/items/8c653128d18883a208be)に書いた手順でcreate-react-appコマンドを使えるようにしておく。

```bash:プロジェクト作成
create-react-app study-meeting-search
```

```bash:redux追加
npm i --save redux react-redux

```

```bash:jquery追加(Ajax用)
npm i --save jquery@1
```

```bash:moment追加(日付フォーマット処理用)
npm i --save moment
```

# プログラム実装
ソースは[ここ](https://github.com/cacarrot/study-meeting-search)にアップしているので割愛。

ディレクトリ構成は以下。

```text:ディレクトリ構成
study-meeting-search
├── README.md
├── build
├── database.rules.json
├── firebase.json
├── package.json
├── public
│   ├── 404.html
│   ├── favicon.ico
│   ├── index.html
│   └── lib
└── src
    ├── App.jsx
    ├── actions
    │   └── index.js
    ├── api
    │   └── index.js
    ├── containers
    │   ├── ResultList.jsx
    │   └── SearchBox.jsx
    ├── index.js
    ├── reducers
    │   ├── condition.js
    │   ├── index.js
    │   └── result.js
    ├── store
    │   └── configureStore.js
    └── util
        └── index.js
```

package.jsonはこんな感じ。

```json:package.json
{
  "name": "study-meeting-search",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.6.0"
  },
  "dependencies": {
    "jquery": "^1.12.4",
    "moment": "^2.15.1",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-redux": "^4.4.5",
    "redux": "^3.6.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "firebase deploy --project study-meeting-search"
  }
}
```

ちなみに、CSS Frameworkとしては、今回は[HTML KickStart](http://www.99lime.com/elements/)を利用した。

# ビルド

以下のコマンドでプロダクションビルドすると、buildフォルダにビルド結果のファイルが生成される。

```bash:ビルド
npm run build
```

# 公開（ホスティング）
今回はデータベースは使わないけど、ホスティング先にFirebaseを使う。（参考：[以前の記事](http://qiita.com/cacarrot/items/c69dd3a82ce81e4e0e61#firebase%E3%81%AB%E3%83%9B%E3%82%B9%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0)）

```bash:Firebaseツールログイン
firebase login
```

```bash:Firebase設定ファイル初期化
firebase init
```

```json:firebase.json（hosting.publicをディレクトリ構成に合わせて変更）
{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "build"
  }
}
```

```bash:Firebaseへデプロイ
firebase deploy --project study-meeting-search
```

# 所感
・Ajax処理実装ライブラリ
Reactの場合、DOM操作は基本必要ない（というか基本やらないほうがよい）はずで、jQueryはちょっと余分な機能がありすぎなので、[SuperAgent](https://github.com/visionmedia/superagent)や[axios](https://github.com/mzabriskie/axios)を使ったほうが軽量。
ただ、JSONPを扱う場合は、[superagent-jsonp](https://www.npmjs.com/package/superagent-jsonp)などが必要になったり統一感がないのと、ライブラリ自体の品質を考慮して、今回はjQueryを利用した。

・Reduxにおける非同期処理の実装箇所
今回、非同期処理があったが、あえてredux-thunkやredux-promiseは使わなかった。
正直なところ、これらを使うとactionsが汚れるし、それよりも、普通に非同期処理部分はAPIとして分けて作成したほうがソースとしての見通しが良いと思う。

# おわりに
今回作ったアプリケーションは以下で公開しています。
https://study-meeting-search.firebaseapp.com
（ソースは[ここ](https://github.com/cacarrot/study-meeting-search)）

## 参考
- [Redux](http://redux.js.org/)
androidスマホからraspberrypi3を操作する

スマホから操作するのに一番簡単なのはssh接続できるアプリをインストールして操作することですが、下記はあえてＧＵＩ的に操作できるようにする方法です。

#raspberrypi3の準備
raspberrypiにxrdpをインストールする。
詳細は下記参照
[Windowsパソコンからraspberrypi3にリモートデスクトップで接続する](http://qiita.com/t114/items/bfac508504b9a6b7570d)


# androidスマホの準備
（アプリはxrdpで接続ができればどのアプリでも問題ないと思います。）
想定：
raspberrypi3のipアドレス：192.168.0.10
user：pi
password：raspberry

  * aRDP:Secure RDP Clientをインストールする。
  * アプリを実行する。
  * 下記設定を行う
    * RDP Connection Settingsに192.168.0.10
    * RDP Usernameにpi
    * RDP Passwordにraspberry
  * 画面右上のConectをタップする。
  * raspberrypi3のデスクトップ画面が表示される。
  * 解像度が合わず見づらい場合
    * Show Adbanced Settingsを開く
    * Remote Desktop SizeでCustomを選ぶ
    * 好きな解像度を指定する。（854 x 480とか）
十字の壁がそそり立つ世界の中を君は螺旋状に歩く (規則性、PowerShell)


|問題|http://nabetani.sakura.ne.jp/hena/ord28spirwa/|
|:--|:--|
|シミュレーション (Python/Ruby/C++)|http://qiita.com/cielavenir/items/8c77a158136bd668a27b|
|規則性 (Python/Ruby/C/C#/Java)|http://qiita.com/cielavenir/items/a285b0cea4a26ff886b8|
|規則性 (D/Go/Swift/PHP/ **Vala** )|http://qiita.com/cielavenir/items/edb1daff9ea861a418ec|
|規則性 (VB/F#/Perl)|http://qiita.com/cielavenir/items/0c84af4049ab161f82c1|
|規則性 (PowerShell)|http://qiita.com/cielavenir/items/d9ef9f12068e99e888f2|
|規則性 ( **AIR-lang** )|http://qiita.com/cielavenir/items/d804f61412fb4f07ba06|
|規則性 (Crystal/Perl6)|http://qiita.com/cielavenir/items/13896a662b05da8b77a2|
|Rubyの多次元配列で最初の要素を加工して返したい<br>(tap/break等について)|http://qiita.com/cielavenir/items/3f209351b924e2615f5e|

- twitterを見ていて、「yhpgの過去問から1つ選んでPowerShellで答案を書け」なる電波を受信したので、しこしこ書きました。
  - https://twitter.com/cedretaber/status/782156425694892032
  - https://twitter.com/basso414f/status/782217929311997953
- とりあえず採点プログラムで通してあります。
  - 確認は **OSXにて。**
- それにしても、<del>PowerShellは[除算が酷い](https://technet.microsoft.com/en-us/library/hh848303.aspx)ですね＾＾</del>
  - 整数除算をするには`[int]()`ではなく`[Math]::Floor()`すればよいようです。

```tyama_hena28_fast.ps1
#!/usr/bin/env powershell
#http://qiita.com/Nabetani/items/23ebddb44f0234e7fb15
#http://nabetani.sakura.ne.jp/hena/ord28spirwa/

$dir="ESWN"
while(1){
	$line=[Console]::ReadLine()
	if($line.length -eq 0){break}
	$a=$line.Split(":")
	$b=$a[0].Split(",")
	$n=[Convert]::ToInt32($b[0])
	$e=[Convert]::ToInt32($b[1])
	$s=[Convert]::ToInt32($b[2])
	$w=[Convert]::ToInt32($b[3])
	$days=[Convert]::ToInt64($a[1])
	$days+=1
	[int[]]$l=@($e,$s,$w,$n)
	$i=0
	$f=1
	for(;$f;$i++){
		[int[]]$x=@( # それぞれ括弧でくくらないとだめっぽい
			($l[$i%4]+($i%4 -eq 0)),
			(([Math]::Floor($i/4)+1)*2),
			($l[$i%4]-($i%4 -eq 3))
		)
		for($j=0;$j -lt 3;$j++){
			if($days-$x[$j] -lt 0){
				[Console]::WriteLine($dir[($i+$j)%4])
				$f=0
				break
			}
			$days-=$x[$j]
		}
	}
	[Console]::Out.Flush()
}
```
在中国 让 Android  Nougat (7.0) 启用 Google Now


先决条件: Google Launcher 工作正常. VPN工具最好是SS

- 开启飞行模式。
- 进入设置，把系统语言设置为英文。
- 找到设置里的Location，关闭功能开关。
- 找到设置里的App，点右上角三个点，选择 `show system`。
- 清除以下几个 App 的 数据
    - `Google Service Framework`
    - `Google App`
- 先打开SS并链接，然后开启WiFi（不要关闭飞行模式）。
- 然后在Google Launcher 里设置Google Now 即可
MacOSⅩ で Eclipse のディレクトリツリーのフォントサイズを変更する

# Eclipseの設定ファイルを修正する
- 修正対象ファイル：/Applications/eclipse/php-neon/Eclipse.app/Contents/Eclipse/eclipse.ini
※ 私のEclipseはバージョンがneonになっているので、上記パスは各人の環境で変わります。

- 修正方法
```vim /Applications/eclipse/php-neon/Eclipse.app/Contents/Eclipse/eclipse.ini```
eclipse.ini の中の
```-Dorg.eclipse.swt.internal.carbon.smallFonts```
を全て削除する。

```
-startup
../Eclipse/plugins/org.eclipse.equinox.launcher_1.3.200.v20160318-1642.jar
--launcher.library
/Users/horisawa/.p2/pool/plugins/org.eclipse.equinox.launcher.cocoa.macosx.x86_64_1.1.400.v20160518-1444
-product
org.eclipse.epp.package.php.product
--launcher.defaultAction
openFile
-showsplash
org.eclipse.platform
--launcher.appendVmargs
-vm
/Library/Java/JavaVirtualMachines/jdk1.8.0_101.jdk/Contents/Home/jre/bin
-vmargs
-Dosgi.requiredJavaVersion=1.8
-XX:+UseG1GC
-XX:+UseStringDeduplication
-XstartOnFirstThread

-Dorg.eclipse.swt.internal.carbon.smallFonts ← ココ！

-Dosgi.requiredJavaVersion=1.8
-Xms256m
-Xmx1024m
-Xdock:icon=../Resources/Eclipse.icns
-XstartOnFirstThread

-Dorg.eclipse.swt.internal.carbon.smallFonts ← ココ！

-Declipse.p2.max.threads=10
-Doomph.update.url=http://download.eclipse.org/oomph/updates/milestone/latest
-Doomph.redirection.index.redirection=index:/->http://git.eclipse.org/c/oomph/org.eclipse.oomph.git/plain/setups/
```

- Eclipse を再起動する

# 結果
フォントサイズが標準になる。
webpackを使ってjQueryとlodashが使える環境を構築する

webpackめっちゃ便利ですね(・ω・)
良いチュートリアルがあったので、実際にやってみて
メモしたものを簡単にまとめました。良ければ参考にしてください。


## <i class="fa fa-pencil" aria-hidden="true"></i> 概要
scripts.jsにmodule1.jsとmodule2.jsをrequireし、
依存解決してscripts.min.jsに吐き出します。

## <i class="fa fa-pencil" aria-hidden="true"></i> ディレクトリ構成
※変更する場合、configも直してください。( jsフォルダをsrcとdestに分けたいですね。

![スクリーンショット 2016-10-02 0.50.15.jpg](https://qiita-image-store.s3.amazonaws.com/0/96220/39d42276-847f-0d2a-3053-6bf575f2c00f.jpeg "スクリーンショット 2016-10-02 0.50.15.jpg")

```scripts.js
require('./module1.js'); // あとで例としてjqueryを導入
require('./module2.js'); // あとで例としてlodashを導入

```

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>my webpack page</h1>
  <script src="js/scripts.min.js" charset="utf-8"></script>
</body>
</html>

```

## <i class="fa fa-pencil" aria-hidden="true"></i> webpackを使えるようにする

```cmd
npm init
npm install -S webpack
npm install -g webpack
```




## <i class="fa fa-pencil" aria-hidden="true"></i> webpackの設定ファイルを作成する

```cmd
touch webpack.config.js
```

```webpack.config.js

var debug = process.env.NODE_ENV !== 'production';
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  devtool: debug ? 'inline-sourcemap' : null,
  entry: './js/scripts.js',
  output: {
    path: __dirname + '/js',
    filename: 'scripts.min.js'
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};


```

## <i class="fa fa-pencil" aria-hidden="true"></i> ソースのビルド
###  - 開発用
開発時はこちらのコマンド

```cmd
webpack
```

基本監視をかけたいアナタはこちらのコマンド

```cmd
webpack --watch
```
<br>

###  - 本番用
minifyされたものがscripts.min.jsに吐き出されます
本番にデプロイする前はこちらのコマンドを使うと◎

```cmd
NODE_ENV=production webpack
```

## <i class="fa fa-pencil" aria-hidden="true"></i> 例1: jQueryを導入
```cmd
npm install -S jquery
```

```module1.js
var $ = require('jquery');
$('h1').html('jqueryなう');
```

## <i class="fa fa-pencil" aria-hidden="true"></i> 例2: lodashを導入
```cmd
npm install -S lodash
```

```module2.js
var _ = require('lodash');
_.each([1, 2, 3], alert);
```

## <i class="fa fa-pencil" aria-hidden="true"></i> 参考 special thx!
[Webpack Tutorial - Replace Gulp/Grunt plugins with a single tool](https://www.youtube.com/watch?v=9kJVYpOqcVU)
setContentTypeでcharset=UTF-8を設定してもISO-8859-1になってしまう

HttpServletResponseのsetContentTypeメソッドでcharsetをUTF-8にしているにもかかわらず、実際にブラウザから見るとResponseHeaderのContent-typeはISO-8859-1となっており文字化けしてしまう。

# 修正前
```servlet.java

public void doGet(HttpServletRequest req,
                  HttpServletResponse res) 
                  throws ServletException, IOException {
  // 略

    try (PrintWriter pw = res.getWriter()) {
      res.setContentType("text/html; charset=UTF-8");
      StringBuffer sb = new StringBuffer();
      //返却するHTMLの内容
      sb.append("<html>");
      // 略
      pw.println(new String(sb));
      pw.close();
    } catch (IOException e) {
      // 例外処理
    }
}
```

# 修正後
```servlet.java

public void doGet(HttpServletRequest req,
                  HttpServletResponse res) 
                  throws ServletException, IOException {
  // 略

    res.setContentType("text/html; charset=UTF-8");
    try (PrintWriter pw = res.getWriter()) {
      StringBuffer sb = new StringBuffer();
      //返却するHTMLの内容
      sb.append("<html>");
      // 略
      pw.println(new String(sb));
      pw.close();
    } catch (IOException e) {
      // 例外処理
    }
}
```

# まとめ
HttpServretRequestのgetWriterを呼び出す前に、charsetを指定しないと、
defaultのISO-8859-1が設定されてしまう。

すでに動いていたコードからコピペしたら、うまく行かなかったけどAPI仕様を見たらちゃんと書いてあった。
[ServletResponse (Servlet 2.4 API 仕様)](http://mergedoc.osdn.jp/tomcat-servletapi-5-ja/javax/servlet/ServletResponse.html#getWriter())

安易なコピペはダメゼッタイ！
ファイルの一覧からtarボールを作る


## 目的

tarコマンドでアーカイブ対象のファイルのリストファイルをあらかじめ用意しておき、tarボールとしたい。

OSやOracleの設定ファイルやログファイルをリストファイルにしておいて、tarボールにできたら構成変更時やトラブル時に主要なログを回収するときなんかに便利です。


## コマンド

「-T」あるいは「--files-from=FILE名」で可能です。

```
tar cvf <アーカイブ名> -T <リストファイル名> 
```

以下manコマンドより抜粋。

```
 -T, --files-from=FILE
              get names to extract or create from FILE
```



### 例1　ログファイルをリストしたファイル

```
$ cat oralog.lst
/u01/app/oracle/diag/rdbms/orcl/ORCL/trace/alert_ORCL.log
/u01/app/oracle/diag/tnslsnr/dbaas01/listener/trace/listener.log

$ tar cvf oralog.tar -T oralog.lst
tar: Removing leading `/' from member names
/u01/app/oracle/diag/rdbms/orcl/ORCL/trace/alert_ORCL.log
/u01/app/oracle/diag/tnslsnr/dbaas01/listener/trace/listener.log

$ tar tvf oralog.tar
-rw-r----- oracle/oinstall 2910 2016-10-02 00:06 u01/app/oracle/diag/rdbms/orcl/ORCL/trace/alert_ORCL.log
-rw-r----- oracle/oinstall 48471 2016-10-02 00:59 u01/app/oracle/diag/tnslsnr/dbaas01/listener/trace/listener.log
```

### 例2　コメント「#」を含むリストファイル

「--exclude=#*」オプションを追加します。

```
$ cat oscfg.lst
# Single files
/home/oracle/.bashrc
/etc/crontab
/etc/sysctl.conf
/etc/passwd
/etc/group
/etc/oraInst.loc
/etc/oratab
/etc/fstab

$ tar cvf oscfg.tar -T oscfg.lst --exclude=#*
tar: Removing leading `/' from member names
/home/oracle/.bashrc
/etc/crontab
/etc/sysctl.conf
/etc/passwd
/etc/group
/etc/oraInst.loc
/etc/oratab
/etc/fstab

$ tar tvf oscfg.tar
-rw-r--r-- oracle/oinstall 699 2016-09-23 21:21 home/oracle/.bashrc
-rw-r--r-- root/root       587 2016-09-23 21:21 etc/crontab
-rw-r--r-- root/root      3692 2016-07-08 14:59 etc/sysctl.conf
-rw-r--r-- root/root      1841 2016-07-08 14:45 etc/passwd
-rw-r--r-- root/root       923 2016-07-08 14:45 etc/group
-rw-r--r-- root/root        56 2016-09-23 21:08 etc/oraInst.loc
-rw-rw-r-- oracle/dba      788 2016-09-23 21:11 etc/oratab
-rw-r--r-- root/root      1108 2016-09-23 21:08 etc/fstab
```
[翻訳]マイクロサービスの考え方、SOAとの違い。

今日、Javaエバンジェリストの寺田さんに会社にお越しいただき、現在のシステム開発を取り巻く環境が向かっている方向性について、ご教示頂きました。
キーワードは"Microservices"。
恥ずかしながら、今日までこのキーワードすら聞いたことがなかったので、早速自宅に帰ってからググってみました。
自分の理解の確認を兼ねて、Wikipedia（英語版）からの意訳をここに記します。

#Microservicesとは？
マイクロサービスとは、SOAの延長線上にあるソフトウェアアーキテクチャの考え方です。
SOAと同じように、マイクロサービスアーキテクチャ（MSA)の中にあるサービス達は、要件を満たすためにネットワークを通じて互いにコミュニケーションを取るプロセスです。
また、SOAと同様に、これらのサービスはテクノロジーに依存しないプロトコルを利用します。このマイクロサービスの構築スタイルは、DevOpsに続く最初のSOAを具現化したものであり、継続的デプロイシステムを構築するために次第にポピュラーになってきています。

この考え方は、段階的な開発・変更にフォーカスしているためか、マイクロサービスはこれまでのシステム開発に比べて投資を早く回収できる方法であると捉えられがちです。

SOAと比較して、マイクロサービスはサービスはどのくらいのサイズであるべきか、また、サービスはお互いにどのように通信すべきかに対しての回答を持ち、マイクロサービスアーキテクチャでは、サービスは小さく、通信プロトコルは軽量であるべきと定義されています。
システムの責務を分散することのメリットは、結合(cohesion)を強くし、連結(coupling)を弱めることです。

これは、新たな機能の追加や既存の機能の変更を容易にし、更にシステムの品質を高めます。また、これは個々のサービスのアーキテクチャが作成されていることを継続的リファクタリングを通じて許可します。
そして、結果的に大きな事前おの必要性を低下し、シンプルで継続的なソフトウェアリリースを可能にします。

マイクロサービスとサービス中心的アーキテクチャ（SOA)は異なるゴールを持ちます。SOAは再利用と分離にフォーカスしているのに対し、マイクロサービスは巨大なアプリケーションを段階的に機能追加できる、かつ管理を容易が容易なシステムに置き換えることフォーカスしています。

元サイトURL
https://en.wikipedia.org/wiki/Microservices

---翻訳ここまで---

他にも、Microservicesの提唱者であるMartin Fowler氏のページなどに詳しい解説が乗っていたり、同氏の動画がYouTubeに上がっていたりします。
時間があれば、これらのサイトについても翻訳し、理解を深めたいと思います。

Martin Fowler氏のWebサイト
http://www.martinfowler.com/articles/microservices.html

同氏のYoutube
https://www.youtube.com/user/martinfowlercom
Zabbix 3.0系でのAPIの変更点

Zabbix Server 3.0系のAPIを実行してみた際、2.2系と比較して変更されている箇所がいくつか見つかったので、ここに記します。

確認したZabbix Serverのバージョンは、3.0.4 と 2.2.9 と 1.8.15 です。

# バージョン情報APIやログインAPIでリクエストに認証情報を含めてはいけなくなった

Zabbix APIを実行するには認証情報のトークンをリクエストのJSONの auth フィールドに含める必要がありますが、次の2つのAPIは認証情報がなくても実行できます。

- apiinfo.version
- user.login

これらのAPIを実行する際、これまでは認証情報が含まれていても問題なく実行できていましたが、3.0系ではエラーを返すようになりました。

実際、APIのドキュメントページには次のように書かれていました。

>This method is available to unauthenticated users and must be called without the auth parameter in the JSON-RPC request.

https://www.zabbix.com/documentation/3.0/manual/api/reference/apiinfo/version


# ホスト削除APIのパラメータ指定が変わった

ホスト削除API (host.delete) のリクエストにおいて、これまでは削除するホストIDを次のように指定できていました。

```json
{
    "method" : "host.delete",
    "params" : [
        {
            "hostid" : "10001"
        },
        {
            "hostid" : "10002"
        }
    ]
}
```

3.0系では次のように指定しなければならなくなりました。

```json
{
    "method" : "host.delete",
    "params" : [ "10001", "10002" ]
}
```

もともと、1.8系では前者の指定が必要で、2.2系では前者と後者とどちらの指定でも良かったのですが、3.0系では後者だけになったということですね。

https://www.zabbix.com/documentation/3.0/manual/api/reference/host/delete


# アイテム取得APIの呼び出し方によってはレスポンスが少なくなった

アイテム取得API (host.get) のリクエストでアプリケーション名 (appilication) を指定した場合、これまではレスポンスにもアプリケーション名のフィールドが含まれていましたが、3.0系では含まれなくなりました。

もともと、アプリケーション名を指定しなければレスポンスにも含まれなかったわけですし、アプリケーション情報を取得するためのパラメータが用意されていますので、これまでの動作がイマイチだったとも言えますね。

https://www.zabbix.com/documentation/3.0/manual/api/reference/item/get


# アイテム削除APIのレスポンスのデータ型が変わった

アイテム削除API (item.delete) のレスポンスには、これまでは削除されたアイテムIDが文字列型として含まれていました。

```json
{
    "result" : {
        "itemids" : [ "20001", "20002" ]
    }
}
```

それが3.0系では数値型として返すようになりました。

```json
{
    "result" : {
        "itemids" : [ 20001, 20002 ]
    }
}
```

3.0系のドキュメントページに記載されているサンプルのレスポンスでは文字列型になっており、他のAPIではIDを文字列として扱っていますので、おそらくこの変更はバグのように思えます。

以前もこんなことがあったような…。

https://www.zabbix.com/documentation/3.0/manual/api/reference/item/delete


# テーマ名が変わった

ユーザ作成API (user.create) やユーザ更新API (user.update) のリクエストでは、ドキュメントページに記載はありませんが、画面のテーマを指定できます。

そのテーマ名が3.0系でまたまた変わりました。

- 1.8系 : default.css , css_ob.css , css_bb.css
- 2.2系 : default , originalblue , darkblue , darkorange , classic
- 3.0系 : default , blue-theme , dark-theme

テーマ情報は graph_theme テーブルに入っていますので、そちらで確認できます。


# その他

情報取得系のAPIではレスポンスに含まれるフィールドが増えており、書ききれないので省略します…。

残念なことに、Zabbix APIのドキュメントページは今も昔も完全ではないので、実行しながら確認しましょう。
オフラインリアルタイムどう書くE08 の問題の ruby による実装例


問題 : http://mtsmfm.github.io/2016/10/01/doukaku-e08.html
実装リンク集 : http://qiita.com/mtsmfm/items/94ebd353fa3b7e608f68

真剣にワーストケースを考えるとなかなか面倒な問題のような気がしている(詳しく検討すらできていない)んだけど、テストケースはそれほど厳しくないのでテストケースを通す方針でさらりと。

```ruby:ruby2.3.1p112
require "benchmark"

class Array
  def x; self[0]; end
  def y; self[1]; end
end

def rev(m)
  m.size.times.with_object({}){ |e,o| o[m[e]]=e }
end

def fields( sq, rev_enemy )
  xr,yr = 2.times.map{ |e| sq.map{ |f| f[e] }.uniq.sort }.map{ |a,b| (a..b) }
  xr.each.with_object({}) do |x,o|
    yr.each do |y|
      o[[x,y]]=true if x!= xr.last && y != yr.last
      return {} if rev_enemy[[x,y]]
    end
  end
end

def solve_impl( me, enemy )
  rev_me = rev(me)
  rev_enemy = rev(enemy)
  me.size.times.with_object({}){ |ia,o|
    ia.times do |ib|
      a = me[ia]
      b = me[ib]
      next if a.x==b.x || a.y==b.y
      next unless ic = rev_me[[a.x, b.y]]
      next unless id =rev_me[[b.x, a.y]]
      o.merge!( fields( [a,b,me[ic], me[id] ], rev_enemy ) )
    end
  }.size
end

def solve( src )
  wb=src.split(",").map{ |b|
    b.scan(/([a-z])([0-9]+)/).map{ |a,b|
      [a.ord-?a.ord, b.to_i]
    }
  }
  [ solve_impl( *wb ), solve_impl( *wb.reverse ) ].join(",")
end

$stdout.sync=true

DATA.map do |line|
  /(?<num>\d+).*"(?<src>.+)".*"(?<expected>.+)"/=~line
  actual = nil
  tick = Benchmark.realtime{ actual = solve( src ) }
  okay = actual==expected
  puts( "%s %s %s->%s ( e:%s ) %f" % [ ( okay ? "ok" : "**NG**" ), num, src[0,70], actual, expected, tick ] )
  okay
end.all?.tap{|x| puts( x ? "everything is ok" : "something wrong" ) }

__END__
/*0*/ test("d3d4e3e4d9h7h9j3j4j7j9,f4f6g4g5g6h5h6", "5,3")
/*1*/ test("a1,s19", "0,0")
```

いろいろまずい点はあるものの、1時間経った時点でのソースコード。
二重ループは `combination` を使うべきだとか、`Array` に `x` とか勝手に生やすなとか、後置 unless の中で代入するなとか、`Array` を `Hash` のキーにするなとか、いろいろ。

私は `Hash` を `Set` 代わりに使ったんだけど、どうせ重複がそれほど多くないので `Array` を使って最後に `uniq` した方がよかったなぁと思ったり。

あと。「`-?a.ord`」は不要だった。これもなんかくやしい。

これで、手元で実行して 0.2秒弱。

ちょっともやもやしているんだけど、よしとする。

## 追記

http://qiita.com/mtsmfm/items/94ebd353fa3b7e608f68#comment-a7b2f5a98c8d94535090

のテストケースを追加すると 12秒。やっぱりダメか。
ハッシュのキーを `[x,y]` ではなく `[x*32+y]` にするだけで 3.3秒になるんだけど、本質的ではないよね。
カウントダウンタイマーをツイッターに自動でポストしてみた。


元ネタはこちら
[割と本気で家庭用Slack Botを作ってみた](http://blog.8arrow.org/entry/2016/01/13/183349)


>普通の機能だけではつまらない。せっかく夫婦で使っているので、夫婦っぽく記念日の情報とか流してみることにしました。

>はてなカウンティングでカウントアップを作成し、そのスクリーンショットを撮って切り抜き、Gyazoにアップロードします。

>記念日とキリの良い日数のときにお知らせしてくれます。「fukabot 記念日」と言うとすべての記念日情報を教えてくれます


上記のエントリーの中に、夫婦の記念日をお知らせする機能をSlackで実装されていたので、再現してみました。ただ、ぼくは結婚してないので、お正月までの日数をツイッターに投稿してみました（かなしみ）


### 実行環境
- mac OSX
- Python 2.7.1
- Phantomjs

まず、[はてなカウンティング](http://counting.hatelabo.jp/)で、カウントダウンタイマーを作成。


pyantomjsで作成したはてなカウンティングのURLから、キャプチャ画像を取得

```javascript
var page = require('webpage').create();
page.viewportSize = {width: 1024, height: 768};
var url = 'http://counting.hatelabo.jp/count/i9nv7u2esv'
page.open(url, function () {
    window.setTimeout(function () {
        page.render('newyear.png');
        console.log("saved capture");
        phantom.exit();
    }, 200);
});
```

その画像をImage Magickで加工して、Twitterに投稿している。

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

import json
from requests_oauthlib import OAuth1Session
import os

current_path = os.getcwd()

CK = 'your_key' # Consumer Key
CS = 'your_key' # Consumer Secret
AT = 'your_token' # Access Token
AS = 'your_token' # Accesss Token Secert

url_media = "https://upload.twitter.com/1.1/media/upload.json"
url_text = "https://api.twitter.com/1.1/statuses/update.json"

# OAuth認証 セッションを開始
twitter = OAuth1Session(CK, CS, AT, AS)

# 画像投稿
files = {"media" : open('after.jpg', 'rb')}
req_media = twitter.post(url_media, files = files)

# レスポンスを確認
if req_media.status_code != 200:
    print ("画像アップデート失敗: %s", req_media.text)
    exit()

# Media ID を取得
media_id = json.loads(req_media.text)['media_id']
print ("Media ID: %d" % media_id)

# Media ID を付加してテキストを投稿
params = {'status': 'お正月まで〜', "media_ids": [media_id]}
req_media = twitter.post(url_text, params = params)

# 再びレスポンスを確認
if req_media.status_code != 200:
    print ("テキストアップデート失敗: %s", req_text.text)
    exit()

print ("OK")
```
それぞれ、実行する。

```bash
#!/bin/bash
cd ~/Desktop/capture

#phantom.jsでキャプチャを取得
phantomjs capture.js

#image_magickで画像サイズを変更
convert newyear.png -crop 500x250+100+70 after.jpg

#ツイッターに投稿
python update_image_twitter.py

```

### 参考URL
- http://qiita.com/weedslayer/items/5e55f3e5af1f5cebf41f
- http://qiita.com/yubais/items/864eedc8dccd7adaea5d
Node.jsでJSONデータをHTTP POSTするメモ


[Node.jsでHTTP GETしてJSONパースするメモ](http://qiita.com/n0bisuke/items/788dc4379fd57e8453a3)を発見したのでPOSTも書こうかと思ったら`requestモジュール`を使う例ばかりで素のサンプルが少なかったのでメモです。

Node.jsはv6.6.0です。

## 試す内容

http://requestb.in/wm8697wm に対して 

以下のJSONデータをPOSTしてみます。

```
{
    "name": "n0bisuke",
    "comment": "nemui"
}
```

* curlの例

curlだとたぶんこんな感じ

```
curl -d '{"name":"n0bisuke","comment":"nemui"}' -H 'Content-Type: application/json' http://requestb.in/wm8697wm
```

こういうときにrequestb.inがすごく便利ですよね。

## コード

```app.js
'use strict'

const http = require('http');
const HOST = `requestb.in`;
const PATH = `/wm8697wm`;

let postData = {
    "name": "n0bisuke",
    "comment": "nemui"
};

let postDataStr = JSON.stringify(postData);
let options = {
    host: HOST,
    port: 80,
    path: PATH,
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Content-Length': Buffer.byteLength(postDataStr)
    }
};

let req = http.request(options, (res) => {
  console.log('STATUS: ' + res.statusCode);
  console.log('HEADERS: ' + JSON.stringify(res.headers));
  res.setEncoding('utf8');
  res.on('data', (chunk) => {
    console.log('BODY: ' + chunk);
  });
});
req.on('error', (e) => {
  console.log('problem with request: ' + e.message);
});
req.write(postDataStr);
req.end();
```

## 実行

```
$node app.js

STATUS: 200
HEADERS: {"date":"Sat, 01 Oct 2016 15:39:33 GMT","content-type":"text/html; charset=utf-8","transfer-encoding":"chunked","connection":"close","set-cookie":["__cfduid=d9e2d353c3ca9f35720ad33b07bc569791475336373; expires=Sun, 01-Oct-17 15:39:33 GMT; path=/; domain=.requestb.in; HttpOnly"],"sponsored-by":"https://www.runscope.com","via":"1.1 vegur","server":"cloudflare-nginx","cf-ray":"2eb1020e83f62df7-NRT"}
BODY: ok
```

requestbinはリクエスト成功するとBODYがOKとでるので成功してることがわかります。
requestbinのサイト側を見に行くと、更にリクエストの詳細を見れるのでデバッグに使えます。

`httpモジュール`だけでいけるので`npm i`しないでそのまま試せますね。
Webアプリケーションにおけるセッション管理


## セッションとは
HTTP通信は一度リクエストを送信したらレスポンスが返ってきた時点で通信処理が終了するので、
HTTPでは通信状態を維持することが不可能です。
そこで、PHPには擬似的に通信状態を維持するためのセッションと呼ばれる仕組みが存在します。
Cookieは、クライアントとサーバー間でデータを共有できる便利な仕組みですが、
このようなCookieの仕組みをさらに便利にしたのがセッションです。

## セッションのデータはサーバー側に保存される
Cookieはクライアント側に保存される軽量なデータです。
サーバー側は、クライアント側のCookieを読み取ることで、ユーザに適したページを表
示したりすることができます。
クライアントからのリクエストによって処理された内容をサーバー側に保存しておき、
クライアントを識別するためのIDをCookieに保存します。
こうすることで、次回のアクセスではCookieに保存されたIDを参照してサーバー側に保存したデータを読み出すようにします。
これがセッションの仕組みです。

![php.png](https://qiita-image-store.s3.amazonaws.com/0/136533/b0b08919-0845-de5e-4705-38b7185e679b.png)

## 最後に
最近PHPの勉強を始めました。
次回はスーパーグローバル変数について掘り下げていきます。
Ruby でキーワード引数として定義した引数群を Hash で得る方法を知りたい

当然ながら、以下であれば普通に `Hash` として得られる。

```ruby
def hoge(options = {})
end

def hoge(**kwargs)
end
```

問題は、以下だった時に `{a: x, b: y, c: z}` な形で引数群を参照したいのだけど、方法が分からないということ。これができる何かが用意されている様な気がするのだけど、分からない。

```ruby
def hoge(a:, b:, c:)
end
```

`Binding#local_variables` を使うと以下の様に書く事ができる。 `method(__method__).parameters` を使う方法もある模様。

- [Ruby - Keyword Arguments - Can you treat all of the keyword arguments as a hash? How? - Stack Overflow](http://stackoverflow.com/questions/22026694/ruby-keyword-arguments-can-you-treat-all-of-the-keyword-arguments-as-a-hash)

```ruby
def hoge(a:, b:, c:)
  p Hash[binding.local_variables.map{ |_| [_, binding.local_variable_get(_)] }]
end
hoge(a: 1, b: 2, c: 3) # => {:a=>1, :b=>2, :c=>3}
```