OmniAICreator/Qiita-1.07M huggingface dataset:
VirtualBox の CLI で起動に失敗した時の対処方法

# 概要

さっきまで動いていて、停止して少し変更しただけの仮想マシン起動できなかった

# 結論

ヘッドレス起動すれば問題なかった

# まとめ

```
$ VBoxManage  startvm docker1.10
VBoxManage: error: Could not launch a process for the machine 'docker1.10' (VERR_FILE_NOT_FOUND)
VBoxManage: error: Details: code VBOX_E_IPRT_ERROR (0x80bb0005), component MachineWrap, interface IMachine, callee nsISupports
VBoxManage: error: Context: "LaunchVMProcess(a->session, sessionType.raw(), env.raw(), progress.asOutParam())" at line 589 of file VBoxManageMisc.cpp
Error: Can't open display: (null)
Failed creating new xdo instance
```

```
$ VBoxManage  startvm docker1.10 --type=headless
Waiting for VM "docker1.10" to power on...
VM "docker1.10" has been successfully started.
```
Stylus の Mixins でハッシュを使った初期値を設定する方法

# Mixins
```stylus
sample(opts = {})

  // 初期値
  default-opts = {
    width : 100
    height: 50
  }
  
  // 引数の値を初期値にマージ
  opts = merge(default-opts, opts)

  // ハッシュ内の値を直接取得する場合はプロパティの後に:（コロン）が必要みたい
  // もしくは事前に変数に格納しておく必要がある
  width: (opts.width)px
  height: (opts.height)px
```

# 使用方法
まあ、普段から stylus 使ってる人に説明の必要はないかもだけど。一応ね。

```stylus
// 初期値で使用
.sample-1
  sample()

// 必要な値だけ変更
.sample-2
  sample({ width: 50 })

// 複数の値を変更
.sample-3
  sample({ width: 50, height: 100 })

// 複数の値を変更する場合は改行してみやすくもできる
.sample-4
  sample({
    width : 50
    height: 100
  })
```

---

ちなみに明記されている箇所は見つけられてないけど、ハッシュの改行時にカンマは不要っぽい感じ。
SSHリモートサーバーのIPを通して、ローカルマシンのブラウザからウェブサイトにアクセスする

SSHでアクセスしているリモートサーバーのIPを使って、ブラウザでウェブにアクセスする方法です。

## ユースケース

特定のIPにアクセスを制限しているウェブサイトに、アクセスが許可されていないIPを持つローカルマシンから、アクセス許可されているIPを持つサーバーにSSHすることで、アクセスする.

## 方法

OpenSSH dynamic port forwardingを使う. 以下のコマンドを叩く. 変数は`%{}`で書いた.

```
ssh %{portとかkeyの情報} -D 1080 %{username}@%{ipaddress}
```

そして、ブラウザクライアントのSOCKS proxyを 127.0.0.1, port 1080 にセットする. 

[SSH/OpenSSH/PortForwarding: Dynamic Port Forwarding](https://help.ubuntu.com/community/SSH/OpenSSH/PortForwarding#Dynamic_Port_Forwarding)に詳細が書いてある.


これやんなきゃいけなかった。

```
You can also set Firefox to use the DNS through that proxy, so even your DNS lookups are secure:

Type in about:config in the Firefox address bar
Find the key called "network.proxy.socks_remote_dns" and set it to true
```

## ssh configとの併用

configにhost-name-1というhostに関するconfigを書いてる場合は、以下のようにもアクセスできる. (要はこれやればいい。portとかkeyとかはデフォルトでいいので何もいれなくていい。)

```
ssh -D 1080 host-name-1
```

## IPの変更がうまく行っていることの確認

自分のIPアドレスを確認できるサービス([これ](http://www.showmyipaddress.com/)とか)で確認するといい.

### 参考

* [How do I launch a web browser on my local machine that visits websites through the ip of a remote machine?](http://askubuntu.com/questions/308634/how-do-i-launch-a-web-browser-on-my-local-machine-that-visits-websites-through-t)
Ruby 正規表現のまとめ

## 正規表現オブジェクトの生成
+ 1. //でくくる ex) re1 = /Ruby/
+ 2. Regexp.new() ex) re2 = Regexp.new("Ruby")
+ 3. %r を使う ex) re3 = %r(/Ruby/) ★正規表現に/を含んだ文字列を指定したい場合便利 

## 正規表現のマッチング
正規表現 =~ 文字列
マッチングした場合はマッチングした文字が何文字目かを、
マッチングしない場合はnilを返す。
ex)

+ 1. /Ruby/ =~ "aaRuby" #=> 2
+ 2. /Ruby/ =~ "Java" #=> nil

## 正規表現のパターン
+ ^ 行頭
+ $ 行末
+ [] または ex) /[AB]/ AまたはB
+ [^] 〜以外　ex) /[^AB]/ A,B以外
+ . 任意の1文字
+ \s 空白文字
+ \d 0-9までの数字
+ \w 英数字
+ \A 文字列の先頭
+ \z 文字列の末尾
+ \メタ文字　メタ文字自体（エスケープ）　ex/\^ABC/ =~ "^ABC"
+ * 0回以上の繰り返し (のうち最長)
+ + 1回以上の繰り返し (のうち最長)
+ *? 0回以上の繰り返しのうち最短
+ +? 1回以上の繰り返しのうち最短
+ ? 0または1回の繰り返し
+ {n} n回の繰り返し
+ {n,m} n-m回の繰り返し
+ | どれかに当てはまる ex) /^(ABC|DEF)$/ =~ "DEF"

## Regexp.guote() , Regexp.escape()メソッドによるエスケープ
ex)

```rb
re1 = Regexp.new("abc*def")
re2 = Regexp.new(Regexp.quote("abc*def"))
re3 = Regexp.new(Regexp.escape("abc*def"))
p re1 =~ "abc*def" #=> nil
p re2 =~ "abc*def" #=> 0
p re3 =~ "abc*def" #=> 0
```

## 正規表現のオプション
| オプション文字 | オプション定数 | 意味 |
|:-----------:|:------------:|:------------:|
| i | Regexp::IGNOREGASE | 大文字小文字区別しない |
| x | Regexp::EXTENDED | パターン内の空白と#以下(=コメント）を無視|
| m | Regexp::MULTILINE | .が改行コードにもマッチするようになる = 複数行マッチ |
| o | なし | 式展開は1度のみ行う（繰り返し処理内で正規表現を使う場合等）|


##キャプチャ
### $数字　で正規表現内の()で囲まれた部分を取り出せる
ex)  

```rb
/(.)(.)(.)/ =~ "ABC"
p $1 #=> "A"
p $2 #=> "B"
p $3 #=> "C"
```

### (?:)でまとめられた部分はキャプチャ対象外
ex)

```rb
/(.)(?:\d\d)+(.)/ =~ "123456"
p $1 #=> "1"
p $2 #=> "6"
```

### $` , $& , &' 
+ $` マッチした部分より前の文字列
+ $& マッチした部分
+ &' マッチした部分より後ろの文字列
ex)

```rb
/C./ =~ "ABCDE"
p $` #=> "AB"
p $& #=> "CD"
p $` #=> "E"
```

## 正規表現を使うメソッド
### scan メソッド
scan(正規表現) ・・・ マッチした部分を取り出す
ex)

```rb
str = "abracatabra"
#1. ブロックなし ・・　配列で戻って来る
p str.scan(/.a/)  #=>=> ["ra", "ca", "ta", "ra"]

#2. ブロックを使用した例 ・・ マッチした文字列が個別に返ってくる
str.scan(/.a/) do |matched|
 p matched
end

#=>
"ra"
"ca"
"ta"
"ra"

#3. ブロックを使用、正規表現内で()が使われている場合　・・　配列で戻って来る
str.scan(/(.)(a)/) do |matched|
 p matched
end
#=>
["r", "a"]
["c", "a"]
["t", "a"]
["r", "a"]

```

### subメソッドとgsubメソッド
+ sub(正規表現 ,  置き替えたい文字列) ・・・　正規表現にマッチした部分を置き替えたい文字列で置き換える　最初にマッチした部分だけを置き換える
+ gsub(正規表現 ,  置き替えたい文字列)　・・・ subメソッド同様だが、マッチする部分を全て置き換える

ex)

```rb
str = "abc_def__g__hi"
p str.sub(/_+/, ' ') #=> "abc def__g___hi"
p str.gsub(/_+/, ' ') #=> "abc def g hi"
```

ex) ブロックを取る場合の例

```rb
str = "abracatabra"
nstr = str.gsub(/.a/) do |matched|
  '<' + matched.upcase+'>'
end
p nstr #=> "ab<RA><CA><TA>b<RA>"
```
sedを使ってみた

テスト用の入力文字列

```:lorem.txt
Lorem ipsum dolor sit
amet,
consectetur
adipiscing
elit.
```

## 特定の文字を置換する

```
sed -e y/置換前文字/置換後文字/
```

```:コマンド例
sed -e y/l/!/ lorem.txt
```

```:出力結果
Lorem ipsum do!or sit
amet,
consectetur
adipiscing
e!it.
```

`l`(小文字のエル)が`!`に置換されました。

置換前文字と対応するように複数の置換後文字を指定することもできます。


```:コマンド例
sed -e y/lor/!@#/ lorem.txt
```

```:出力結果
L@#em ipsum d@!@# sit
amet,
c@nsectetu#
adipiscing
e!it.
```

注意点は、**文字列を置換するのではなく文字単位での置換をする**ということです。また、置換前文字と置換後文字の文字数が違うとエラーになります。

## 文字列を置換する

```
sed -e s/置換前文字列/置換後文字列/
```

```:コマンド例
sed -e s/it/**/ lorem.txt
```

```:出力結果
Lorem ipsum dolor s**
amet,
consectetur
adipiscing
el**.
```

文字列置換では正規表現を使うこともできます。たとえば`[uep]`(u, e, p のいずれか)を`@`に置換するには次のようにします。

```:コマンド例
sed -e s/[uep]/@/ lorem.txt
```

```:出力結果
Lor@m ipsum dolor sit
am@t,
cons@ctetur
adi@iscing
@lit.
```

…あれ、ところどころ置換されていない文字があります。
これは正規表現による置換は**各行につき最初にマッチした箇所だけを置換する**ようになっているためです。最初にマッチした箇所以外も全て置換するようにするには、次のように末尾に`g`を付けます。

```
sed -e s/置換前文字列/置換後文字列/g
```

```:コマンド例
sed -e s/[uep]/@/g lorem.txt
```

```:出力結果
Lor@m i@s@m dolor sit
am@t,
cons@ct@t@r
adi@iscing
@lit.
```

正規表現について詳しく知りたい方はこの辺を参照

* [MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions)
* [MSDN](https://msdn.microsoft.com/ja-jp/library/cc392020.aspx)
* [サルにもわかる正規表現入門](http://www.mnet.ne.jp/~nakama/)
Sketchプラグインの作成に挑戦して見る

今朝Mediumを見ていたら初心者向けのSketchPluginの作り方の記事があったので翻訳。

[参考記事１](https://medium.com/@marianomike/the-beginners-guide-to-writing-sketch-plugins-part-1-28a5e3f01c68#.v96gwsg57)
[参考記事２](https://medium.com/@marianomike/the-beginners-guide-to-writing-sketch-plugins-part-2-user-notifications-753ad869f00d#.wbsa1noax)

基本的にCocoaScriptで作る。（ObjectiveC/Cocoa + Javascript）

所定の場所にjsonファイルとjsファイル、２つのファイルを用意し、
jsonファイルには基本的な情報、
jsファイルにはどういった挙動をするかを入力指定指定する


```
{
 “name” : “My Plugin”,
 “identifier” : “my.plugin”,
 “version” : “1.0”,
 “description” : “My First Sketch Plugin”,
 “authorEmail” : “your@email.com”,
 “author” : “Your Name”,
 
 “commands” : [
	 {
		 “script” : “MyScript.js”,
		 “handler” : “onRun”,
		 “shortcut” : “command shift y”,//ショートカットキーを指定できる
		 “name” : “Get Page Names”,
		 “identifier” : “my.plugin.pagenames”
	 }
 ],
}
```

```js
var onRun = function(context) {
 
 //reference the Sketch Document
 var doc = context.document;
 
 //reference all the pages in the document in an array
 var pages = [doc pages];
 
 //loop through the pages of the document
 for (var i = 0; i < pages.count(); i++){
	 
	 //reference each page
	 var page = pages[i];
	 
	 //get the name of the page
	 var pageName = [page name];
	 
	 //show the page name in the console
	 log(pageName);
 }
}
```
<img width="572" alt="スクリーンショット 2016-08-24 19.10.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/54076/9d25d383-2d15-7b7c-82fa-726ac5395685.png">

これだけで、Sketchファイルを開いてみると自分のプラグインが表示されると思います。
ショートカットも指定できたりしています。
OctoberCMSで作ったプロジェクトのgit管理

大した内容ではないですが、前回の記事に含めると長くなるので別にさせてもらいました。

ダウンロードしたパッケージやプラグインなど全てを自分のプロジェクトファイルとしてgit管理してしまうのも、場合によってはいいのかもしれませんが、私は出来る限り自分のソースコードと外部のパッケージ等は分けて管理したいと思います。正直どちらがいいのかはわかりません。

OctoberCMSにもpluginやvendorなど様々なディレクトリがあって、いまいちどこまでをgit管理に含むべきかわかりづらいと思いますんで、そのお話を書きます。

まず、プロジェクトディレクトリ直下の.gitignoreは下記のような感じでよいかと。どこかから拝借したものに少し手を加えています。

```:.gitignore
/bootstrap/compiled.php
composer.phar
.idea
.env
.env.*.php
.env.php
*.log
sftp-config.json
selenium.php

# OS or editor misc files
*~
*.bak
Thumbs.db
desktop.ini
.DS_Store

# for netbeans
nbproject

# Eclipse setting files
.buildpath
.project
.settings

# IDE Helper
_ide_helper*.php
```

ここで除外したいディレクトリをリストアップしてもいいんですが、ディレクトリ構造は残しておいたほうが個人的にはわかりやすくて良いと思うので、私は各ディレクトリの中にそれぞれの.gitignoreを配置する方法をとっています。`storage`ディレクトリを見てもらうとわかりますが、OctoberCMSのプロジェクトでもそのようにしているみたいです。

除外したいディレクトリはmodules、plugins、vendorです。

* modules: OctoberCMSのモジュール群
* vendor: 外部の依存パッケージ
* plugins: 外部プラグインや自作したプラグイン

いずれも、composerでインストールしていれば、デプロイ先では`composer install`を実行することで適宜入れられます。
自作するプラグインも汎用化できるならば別プロジェクトとして管理した方が別件で流用できて良いかと思います。

除外するにはそれぞれのディレクトリに下記の内容の.gitignoreを格納します。同ディレクトリ以下の.gitignore以外のすべてを除外するという意味の内容です。

```:.gitignore
*
!.gitignore
```

themesディレクトリに関しては含めても別リポジトリでも良いと思います。テーマにゴリゴリにページを実装していくなら、アプリ専用のテーマになるのでアプリのソースツリーとして同じリポジトリでも良いでしょう。もし、ページはDBに保存してテーマのソースコードは変更しないのであれば、別リポジトリとして管理しても良いと思います。

~~（追記：以下のthemesディレクトリに関しては自信ありません。そもそも使い方・考え方が間違っているかも。）
ちなみに、私の場合、themesディレクトリの内容は除外しません。実装するページのソースコードはテーマに入るからです（つまり、テーマを切り替えるとページが無くなってしまいます）。plugins同様にgit submoduleなどで別途管理してもいいんですが、この段階では面倒なだけでメリットがあまりないので一緒にします。
このテーマの切り替えが綺麗にできないのはOctoberCMSの微妙なところではあります。これって、普通なんですかね？他のCMSに詳しくないのでわかりません。~~

~~OctoberCMSはテーマのソースコードにViewだけでなくControllerも含まれてしまっています。その代わり、Componentという概念で、ロジックを部品化してほとんど分離することはできるかと思います。が、Laravelを素で使う様にきれいにMVCで分けるのは難しいかもしれません。
まぁ、それでも効率よく開発ができるので使っているんですが。~~

もしアプリのソースツリーにテーマを含めるのであれば、デフォルトで入っているdemoというテーマもgit管理に入ってしまうので、気持ち悪かったらdemoディレクトリごと削除してください。テーマがないとサイトを表示できないので、管理画面からお好きなテーマを入れるかしてください。BootstrapやjQuery、FontAusomeを使ってスクラッチから作りたい場合は[Blang-Bootstrap](http://octobercms.com/theme/krisawzm-blank-bootstrap)のテーマなどいいと思います。

余談でしたが、こんな感じでgit管理を始めます。

```bash
cd my-blog
git init
git add .
git commit -m "Initial commit"
```

OctoberCMSのインストールにcomposerを使うのをおすすめしたのは、このようにgitでソース管理するファイル数をミニマムにしたり分離したりできるためでした。
C# で XmlDocument からインデント付きの整形文字列を得る

System.Xml.XmlDocument を整形済み文字列（インデント付き）に変換する方法。

## 整形関数
```csharp
public static string FormatXmlDocument(XmlDocument xmlDocument)
{
    MemoryStream stream = new MemoryStream();
    XmlTextWriter writer = new XmlTextWriter(stream, Encoding.Unicode);

    // indent setting
    writer.Formatting = Formatting.Indented;
    writer.Indentation = 2; // indent length
    writer.IndentChar = ' '; // indent character

    // formatting write
    xmlDocument.WriteContentTo(writer);
    writer.Flush();
    stream.Flush();
    stream.Position = 0;

    // to string
    StreamReader reader = new StreamReader(stream);
    string formattedXml = reader.ReadToEnd();

    return formattedXml;
}
```

```writer.Indentation``` でインデント幅を設定できます。今回は 2 にしておく。

## 使用例
```csharp
public static void Main()
{
    // 日本語化けないようにする
    Console.OutputEncoding = new UTF8Encoding();

    // サンプルXML構築 (整形を確認するために意図的に崩してある)
    XmlDocument xmlDocument = new XmlDocument();
    xmlDocument.LoadXml(@"<?xml version=""1.0""?>
        <catalog><book id=""bk101"">
        <author>Gambardella, Matthew</author>
        <title>XML Developer's Guide</title>
        </book>
        <book id=""bk102""><author>Ralls, Kim</author>
        <title>ほげほげ</title></book></catalog>");

    // インデント付き整形表示
    Console.WriteLine("----------------------------------------");
    Console.WriteLine(FormatXmlDocument(xmlDocument));
    Console.WriteLine("----------------------------------------");
}
```

サンプルXML は [サンプル XML ファイル (books.xml)](https://msdn.microsoft.com/ja-jp/library/ms762271(v=vs.85).aspx) から拾ってきたものをちょっといじって使ってます。

## 出力結果
```text
----------------------------------------
<?xml version="1.0"?>
<catalog>
  <book id="bk101">
    <author>Gambardella, Matthew</author>
    <title>XML Developer's Guide</title>
  </book>
  <book id="bk102">
    <author>Ralls, Kim</author>
    <title>ほげほげ</title>
  </book>
</catalog>
----------------------------------------
```

見やすい形になりました。

## 参考
- [c# - Format XML String to Print Friendly XML String - Stack Overflow](http://stackoverflow.com/questions/1123718/format-xml-string-to-print-friendly-xml-string)
rdm動作からredis commandを学ぶ

RedisデータをGUIベースで操作できるrdm(Redis Desctop Manager)はredisを触った人なら誰もが知っている有名なクライアントアプリですね。
https://redisdesktop.com/

rdmからキーを選択した時にどのような処理が行われているか確認してみました。
処理の内容がわかれば自分のアプリを開発するときにも活用できそうですね。

<img width="1003" alt="Redis_Desktop_Manager.png" src="https://qiita-image-store.s3.amazonaws.com/0/46268/438cf921-9344-3aa3-5905-653ba0a6a087.png">

上記のイメージのようなzsetのキー(5758:101:2016818)を選択した時を例として説明したいと思います。
****
**処理1. データのタイプを調べる**

```
type 5758:101:2016818
```
結果としてzsetが返されるので、次回以降、zset関連のコマンドが実行されます。

**処理2. キーの有効期限を調べる**

```
ttl 5758:101:2016818
```
有効期限が設定されている場合は残りの秒数、設定されてない場合は-1が返されます。

**処理3. zsetのメンバー数を取得する**

```
ZCARD 5758:101:2016818
```
今回の例では3が返されます。

**処理4. zsetのすべてのデータを取得する**

```
ZRANGE 5758:101:2016818 0 2 WITHSCORES
```
処理3で取得したメンバー数を利用し、すべての値を取得するコマンドが実行されます。

****

他のredis data typeでも同じような処理が行われると思います。
興味ある方は確認してみてください。以外と勉強になりますよ〜
VagrantでRails4.2を動かす時には、listenするAddressを指定しないとダメ


vagrantでサーバーを立てて、自分のローカルマシンからRailsにアクセスする時の動作が、Rails4.2系から
変更されている。

####Rails4.2系で普通に動かした場合には、自分のローカルマシンからはアクセスできない。

```
rails s
```
![スクリーンショット 2016-08-24 17.45.01.png](https://qiita-image-store.s3.amazonaws.com/0/39073/c3186415-952c-5ad8-b8bc-b5bed4610784.png "スクリーンショット 2016-08-24 17.45.01.png")

Local Addressが127.0.0.1に指定されている。
Local Addressが指定されている場合は、接続先アドレスがそのアドレスの接続しか受け付けないようになっています。

####Rails4.1系で普通に動かした場合には、自分のローカルマシンからはアクセスできる。

![スクリーンショット 2016-08-24 17.43.51.png](https://qiita-image-store.s3.amazonaws.com/0/39073/412c83ab-7ef1-dbda-963a-77e697243af4.png "スクリーンショット 2016-08-24 17.43.51.png")

Local Addressが0.0.0.0に指定されている。

####では、Rails4.2系でローカルからアクセスできるようにするには、どうしたらいいのか？
RailsがBindするIPを変更すればいい

```
rails s -b 0.0.0.0
```

![スクリーンショット 2016-08-24 17.49.09.png](https://qiita-image-store.s3.amazonaws.com/0/39073/e21c9d43-3fa5-60da-d976-2468e4c3c8c7.png "スクリーンショット 2016-08-24 17.49.09.png")

Local Addressが0.0.0.0に変更されました。
jQueryを使わないでGETのパラメータ付きURLを生成する

## 追記:
[URLSearchParams - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)が使えるならそっちの方が便利。


## Search Param付きURL生成
いよいよjQueryを使う必要がなくなってきており、```$.ajax```は滅多に使わなくなり、```fetch```を書くことが増えた。しかし、POSTはまだしもGETでパラメータを送りたい場合、```$.ajax```では

```js
var data = {
	a:1,
	b:2,
	c:3
};
$.ajax({
	url:'hogehoge',
	method:'GET',
	data:data
});
```

とやればよかったものが、```fetch```の場合はパラメータのkeyとvalueを&で繋いでURLにくっつけるのを自前でやらねばならない。特にURLにSearch Paramsがある場合は```?```以降を切った後に繋ぎ直さねばならず面倒くさい。
どうにかならないかと調べてみたところ、anchor要素を使うのが良さそうだった。

anchor要素のhrefにURLを入れると、searchプロパティに```?```以降の文字列が入る。```?```以降がなければ空文字となる。
（他に```hash```に```#```以降の文字列が入るし、```pathname```にはドメイン以下のパスが入る）
そして書き換えるとhrefにも自動的に反映される。
そこで、

```js
var data = {
	a:1,
	b:2,
	c:3
};
var a = document.createElement('a');
a.href = url;
var queryArray = [];
Object.keys(data).forEach(function (key) { return queryArray.push(key + '=' + encodeURIComponent(data[key])); });
a.search = '?' + queryArray.join('&') + a.search.replace(/^\?/, '&');
alert(a.href);
```

Search Paramsが存在すれば```?```を```&```に置換し、存在しなければ空文字なのでそのまま後ろに連結してやれば良い。
この時の```a.href```がパラメータ付きのURLとなる。

## 参考
[HTMLAnchorElement - Web API インターフェイス | MDN]
(https://developer.mozilla.org/ja/docs/Web/API/HTMLAnchorElement)
AppBarLayout+ViewPagerでAppBarLayoutへのドラッグが効かなくなることがあった

CoordinatorLayoutの中にAppBarLayout、ViewPagerの構造で、ViewPagerのページを切り替えるとAppBarLayoutへのドラッグが効かなくなることがあった。
AppBarLayoutはCollapsingToolbarLayoutを持っていて、CollapsingToolbarLayoutはImageViewやCustomViewなどを持っている。
ViewPagerはTabLayoutを使い、コンテンツはRecyclerViewでリストを表示している。

AppBarLayoutに独自のBehaviorをセットしていたが、そもそもonNestedScroll等のメソッドが呼ばれなくなっていてた。  
ということでAppBarLayoutにセットしているBehaviorのコンストラクタでsetDragCallbackを使い、trueを返すと正しく動くようになった。
原因はわからないままで気持ち悪いけど、これで解決

```java
    public Behavior(Context context, AttributeSet attrs) {
        super(context, attrs);
        setDragCallback(new DragCallback() {
            @Override
            public boolean canDrag(@NonNull AppBarLayout appBarLayout) {
                return true;
            }
        });
    }
```
itamae sshした時に実行してるユーザを取得したかった

そういう機会がたまにあるんだけどその度にレシピ中に `binding.pry` を仕込んで探してるのでメモ

# シチュエーション
レシピを実行してるユーザのhomeディレクトリを作成したいような場合です

```ruby:recipe.rb
directory "/home/#{current_user}" do
  mode  "755"
  owner current_user
end
```

`whoami` だと `itamae local` の時は問題ないのですが、`itamae ssh` だとレシピ適用先のリモートのユーザ **ではなく**、実行してるローカルのユーザがとれてしまいます。

ローカルとリモートでユーザが同じならそれでもいいのですが一致してない場合もあるので厳密にやるならssh実行中のユーザを取得する必要があります

# やり方
こんな感じ（itamae v1.9.9で確認）

```ruby:recipe.rb
def current_user
  case @recipe.runner.backend
  when Itamae::Backend::Local
    `whoami`.strip
  when Itamae::Backend::Ssh
    @recipe.runner.backend.instance_variable_get(:@backend).instance_variable_get(:@config)[:ssh_options][:user]
  end
end

node[:current_user] = current_user

directory "/home/#{node[:current_user]}" do
  mode  "755"
  owner node[:current_user]
end
```

一度 `node` につっこんでいるのは、`directory` リソースのブロック内で `current_user` を参照しようとするとそんな変数やメソッドはないよとエラーになるためです。（owner設定しないなら不要）

```
NameError: undefined local variable or method `current_user' for #<Itamae::Resource::Base::EvalContext:0x007fb53bf609a8>
  /myapp/vendor/bundle/ruby/2.3.0/gems/itamae-1.9.9/lib/itamae/resource/base.rb:40:in `method_missing'
  /myapp/cookbooks/home_dir/default.rb:18:in `block in load'
```

# 追記
書いた後にいろいろ試してみたけど `~/.ssh/config` が設定されてないとうまくとれないっぽい :cry:
MacOS上で.NET Coreを使ってフォルダ/ファイル変更監視

# 概要
MacOS上にてちょっとしたフォルダ監視のためにNode.jsをgrunt-contrib-watchするのが面倒だったので、愛するC#を使ってさくっと書いた。

Windowsなフォルダ監視コードは書いたことがあったのだが、本当にそれが.NETCoreで動くのかはやったことがなかったのでそういうテストも含んでいたりする。


# .NET Coreについて
この辺りを読んで導入すべし。
http://qiita.com/koki_cheese/items/727577ab830a44050dcc

エディタはVSCodeを使い、C#なエクステンションを入れると幸せになれる。


# やり方
## 新規プロジェクト作成
```shell-session
mkdir filewatcher
cd filewatcher
dotnet new
```

## `Program.cs`をカキカキ
```csharp
using System;
using System.IO;

namespace ConsoleApplication
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var watcher = new FileSystemWatcher();
            watcher.Path = args[0];
            watcher.NotifyFilter = NotifyFilters.FileName | NotifyFilters.DirectoryName | NotifyFilters.LastWrite;
            
            var eventHandle = new FileSystemEventHandler((o,e)=>{
                Console.WriteLine("{0}: {1}", e.Name, e.ChangeType);
            });

            watcher.Changed += eventHandle;
            watcher.Created += eventHandle;
            watcher.Deleted += eventHandle;
            
            watcher.EnableRaisingEvents = true;

            Console.WriteLine("監視開始");

            while(true){
                System.Threading.Thread.Sleep(1000);
            }
        }
    }
}
```


## 実行
```shell-session
dotnet restore
dotnet run "watch dir path"
```


# まとめ
良さ。

![image](https://qiita-image-store.s3.amazonaws.com/0/133666/a5e6f13b-1185-6f68-928f-4f0599db7c95.png)
inode 消費数を調べる

カレントディレクトリ直下のディレクトリを対象に inode 消費数を調べる

```
for DIR in $(ls -lat | grep "^d" | grep -v "\." | awk '{print $9}'); do echo "$(find ./${DIR} -true | wc -l) $(pwd)/${DIR}"; done | sort -n
```

たとえば /home 直下だと、こんな感じ

```
root@server:/home# for DIR in $(ls -lat | grep "^d" | grep -v "\." | awk '{print $9}'); do echo "$(find ./${DIR} -true | wc -l) $(pwd)/${DIR}"; done | sort -n
5 /home/hoge
6 /home/piyo
8 /home/poyo
9 /home/fuga
```

おしまい
Docker inspectでのWORKDIRやENTRYPOINT取得

`docker inspect`に`-f`オプション指定すればOKだけど、毎回忘れて調べてるからコピペ用にメモ。

#### WORKDIR取得

```bash
docker inspect -f "{{ .Config.WorkingDir  }}" your-image
```

#### ENTRYPOINT取得

```bash
docker inspect -f "{{ .Config.Entrypoint  }}" your-image
```

#### EXPOSE取得

```bash
docker inspect -f '{{ range $k,$v := .Config.ExposedPorts }}{{ println $k}}{{end}}' your-image
```


#### Author取得

```bash
docker inspect -f "{{ .Author  }}" your-image
```

#### Labels取得

以下のようにDockerfileでLABELが指定された場合

```Dockerfile
FROM alpine:latest
LABEL multi.label1="value1" multi.label2="value2" other="value3"
```

`{{ index .Config.Label ラベルのキー }}`という書式で取得します。

```bash
docker inspect -f '{{ index .Config.Labels "multi.label1"  }}' your-image
```
import scalaz._, Scalaz._をやめる

Scalaz便利ですが、`import scalaz._, Scalaz._` するとIntelliJが重くなってきます。使うモジュールに合わせてimportしましょう。

# だいたい3通り（たぶん）

### Scalazが提供する型を使う => `import scalaz.Foo`

```scala
import scalaz.\/

def search(s: String): String \/ Seq[Foo] = ???

\/.fromTryCatchNonFatal(aSafeFunction("foo")) // \/-("bar")
\/.fromTryCatchNonFatal( throw new Exception("noo") ) // -\/(java.lang.Exception: noo)

import scalaz.NonEmptyList

NonEmptyList(1, 2, 3) // NonEmpty[1,2,3]
```

### Scala標準の型を返すインスタンス、関数を使う => `import scalaz.std.foo._`

```scala
import scalaz.std.option._

none[Int] // None: Option[Int]

import scalaz.std.boolean._

nand(false, true) // true: Boolean
```

### メソッドを生やす

- Scala標準の型にメソッドを生やす => `import scalaz.syntax.std.foo._`
- Scalazの型にメソッドを生やす => `import scalaz.syntax.foo._`

```scala
import scalaz.syntax.std.boolean._

true.option("success") // Some(success)
false either 1 or "boo" // -\/(boo): \/[String,Int]

import scalaz.syntax.either._

1.right[String] // \/-(1): \/[String,Int]

import scalaz.{ NonEmptyList, OptionT }
import scalaz.syntax.monad._

NonEmptyList(1,2,3).liftM[OptionT] // OptionT(NonEmpty[Some(1),Some(2),Some(3)])
```
MacでCDやDVDを焼く方法


# Burnのアプリを使ってCDにデータを焼き込みます。

## 使うもの

- MacBook Pro
- Mac用DVDドライブ（　Apple USB SuperDrive MD564ZM/A ）
- Burn(アプリインストール）
- CD-R, DVD-Rなど


## Burnのアプリを開く

![BurnScreenShot.png](https://qiita-image-store.s3.amazonaws.com/0/60923/d62ed5fa-8796-e2f1-866f-4bd11dc3609d.png)

#### ① Burn内に焼きたいデータをドラッグ&ドロップまたは、[+]を押して選択
#### ② DVDのタイトルを付けたければ入力
#### ③ 右上にあるファイルシステムの選択

※　MacとWindows両方で使う場合は、Max+Pcを選ぼう！
（Mac(HFS+)を選ぶとMacでしか開けません！）

```Mac(HFS+).
Mac OS上でのみディスクを使うのであればこのファイルシステムを選択します。Windowsはこのファイルシステムを読むことができません。
```

```PC(Joliet).
このファイルシステムはCD用に頻繁に使われ、大部分のコンピューターによって読み込まれます。DVDに使うこともできます。
```

```DVD(UDF).
このファイルシステムはDVD用に頻繁に使われます。大部分の現代コンピューター(Mac OS 9とWindows 98 システムを含めて)により読み込まれます。CDに使うこともできます。(この項目はPantherに適用されません)
```

```Mac+PC.
これは、MacのファイルシステムにPC のファイルシステムを加えたものです。殆ど総てのコンピューター上で読み込まれますし、Macの特殊情報(アイコンとリソースフォークのような情報)が保存されます。
```

#### ④ 右下のディスクの作成を押下
#### ⑤ あとは数分待つと...書き込み完了！
AppleScript入門 (操作対象のアプリで利用できるコマンドを調べる) (Evernoteを自動バックアップ)

Evernoteのノート一式のバックアップとるために、AppleScriptを使い始めたが、
AppleScriptで利用できるEvernote用のコマンドがどこに記載されているか分からなかったので、メモ。

コマンド類を調べて、作成したのがこれ。

```applescript:backup_notes.scpt
tell application "Evernote"
	set all_notes to find notes
	set output_path to "/Users/xxxx/Desktop/BACKUP"
	export all_notes to output_path format ENEX
end tell
```

#####1. まず、スクリプトエディタを起動。

#####2. ウィンドウのライブラリをクリック
<img width="197" alt="スクリーンショット 2016-08-24 17.43.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/110085/245469d4-d2c3-d05c-558e-b89fc8e06ac4.png">

#####3. プラスボタンをクリックして、Evernoteを選択
Evernoteがライブラリ一覧に追加される
<img width="221" alt="スクリーンショット 2016-08-24 17.44.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/110085/1b426a59-c1c5-c5f3-50b0-068a50fcddd9.png">

#####4. 追加されたら、再度Evernoteをダブルクリック
そうするとEvernoteが持っているAppleScript用コマンド一覧を確認できます
<img width="802" alt="スクリーンショット 2016-08-24 17.45.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/110085/7bdc55fe-1873-5015-7cfd-b4bcccf4c45f.png">

このコマンド一覧は、「用語辞書」と呼ぶそうです。
ため込んだ学習履歴のアップ開始

# はじめに
　いままで書き溜めてきた学習履歴のテキストを、おさらいもかねてQiitaにアップすることにしました。分野は主に、PHP、Python、機械学習、自然言語処理、自動売買システム（金融）の予定です。（HadoopやHBaseなどビッグデータ方面も少々出すかもしれません。）
　他にも面白そうなネタがあったらアッサリ方針転換するかもしれません。


　書籍の執筆の経験はあるのですが、ネット上に記事をオープンにするというのは実質的に今回からになります。（以前、AWSにワードプレスサーバーを立てて一時公開していたこともあったのですが、更新がおろそかになって一年くらいでインスタンスを止めてしまいました...今度こそはちゃんと更新するぞ！）
AmazonとGoogleの開発前のドキュメント（古い）

開発前に一枚程度のドキュメントを書く話があったよねと、うろ覚え状態だったのを発掘したのでメモ。


Amazonのプレスリリース。（開発の最初に書く）

> **見出し**
顧客が商品を理解できるタイトル
**副題**
ターゲット層と、彼らのメリットを1行で。
**概要**
商品の特徴と利点をまとめる。この段落で全てを理解できるように。
**課題**
このプロダクトが解決する課題を説明。
**解決**
プロダクトがどのように課題を解決するかを説明。
**コメント**
自分による紹介コメント（社長のコメント的なもの）。
**使い方**
どれくらい使い方が簡単かを説明。
**ユーザーからの声**
仮想ユーザーからのコメント。
**締め**
最後にしめ、次にユーザーがどうすればいいかを示す（Amazonで買えます！等）。

[Amazon流の開発術では、まずプレスリリースを作る](http://fladdict.net/blog/2012/08/amazon-product-design.html) (2012-08-10)


GoogleのDesign Doc。

> * Google で必ず書くことになっているドキュメント
* プロジェクト立ち上げ時の 1～2週間をかけて書く。ある程度ポイントが書け たら、もうコーディングへ。
* 一般的にはあんまり長くない。詳細を書かなきゃいけなくなったら、それ はまた別プロジェクトになることが多い
* Design Doc の内容
 * プロジェクトの背景、目的
 * おおまかな設計(コードを見ただけでは判らないような、アーキテクチャ)
 * プロジェクトの参加者(このプロジェクトに関して、誰に連絡を取ればいいのか)
 * セキュリティやプライバシーについての考察(問題と対処方法)
 * テスト、モニタープラン(運用時の考慮。障害の発見と復旧手法など)
 * レポジトリ上の位置やサーバのアドレスなど
* コードを書いていると解離していくので、できるだけ解離しないようにアップデート

[Google のソフトウェア・エンジニアリング](http://blog.livedoor.jp/heitatta/archives/54439839.html) (2007-06-07)
アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装！

少し前に、[アニメーション最強のVelocity.jsの使い方](http://qiita.com/kyota/items/754e0e6cb7a144eda850)という記事を書きましたが、対抗馬となる[anime.js](http://anime-js.com/)が出てきたので使ってみました。

## anime.jsとは？
高機能かつ軽快なアニメーションする軽量ライブラリです。
Velocity.jsと違い、jQueryの`$.animate`と互換性はありませんが、記述方法が分かりやすくカンタンに導入できると思います。
なお、アニメーションは、Velocity.jsと同様に`requestAnimationFrame`ベースで動作させており、スムーズにアニメーションされます。

### 容量
Velocity.jsと比べると、anime.jsの方が軽いですね。

- velocity.min.js : **34.4 KB**
- anime.min.js : **9.21 KB**

## 記述方法
はい、これで動きます。（右に100px移動）
カンタンですね。


```js
anime({
  targets: 'i',
  translateX: '100px'
});
```

`targets`には、CSSセレクタと同様の記述ができ、IDやClass指定もできます。

また、以下のようにDOMを渡しても大丈夫です。

```js
anime({
  targets: document.querySelector('i'),
  translateX: '100px'
});
```

### パラメーター
以下を指定していくことでアニメーションの細い設定ができます。
※主要のものだけ記載

| 名前 | デフォルト | 説明
| --- | --- | ---
| delay | `0` | 遅延時間
| duration | `1000` | アニメーション時間
| autoplay | `true` | 自動再生するかどうか
| loop | `false` | ループ再生するかどうか
| direction | `'normal'` | `'normal'`, `'reverse'`, `'alternate'`のうちから再生方向を指定
| easing | `'easeOutElastic'` | イージング。http://easings.net/ja を参考するといいよ
| begin | `undefined` | アニメーション開始時に実行したいこと
| update | `undefined` | アニメーション中に実行したいこと
| complete | `undefined` | アニメーション終了時に実行したいこと

### 使用できるCSSプロパティ
`width`, `borderRadius`, `'background-color'`など

### 使用できるCSS Transform
`translateX`, `rotate`, `scale`など

### 記述例

```js
anime({
    targets: 'i', // 対象を指定
    scale: {
        value: 2, // 2倍サイズになる
        duration: 500, // 0.5秒間アニメーションする
        easing: 'easeOutQuad'
    },
    translateY: {
        value: [0, 200], // []で開始値と終了値を指定できます
        delay: 500, // 0.5秒後に実行
        duration: 3000, // 3秒間アニメーションする
        easing: 'easeInBounce'
    },
    begin: function(){
        console.log('アニメーション始まったよ');
    },
    update: function(){
        console.log('アニメーション中');
    },
    complete: function(){
        console.log('アニメーション終わったよ。お疲れ様でした');
    },
    direction: 'alternate', // 逆再生させアニメーションサイクルさせる
    loop: true // ループさせる
});
```

他にも、再生・停止などの制御ができたり、また凄いのがSVGのパスに合わせてアニメーションさせたりできます！

詳しくは、公式ページを見てみてください。

## 最後に
今までアニメーションライブラリーはVelocity.jsをよく使っていましたが、anime.jsの方が記述が分かりやすく書け、ファイル容量も軽量なため、今後はanime.jsの方が有力だなと思いました。
（Velocity.jsは最強じゃなくなったか・・・）

ぜひ、アニメーションさせるようなページにご活用いただければと思います。


## 参考URL
- [anime.js](http://anime-js.com/)
- [GitHub](https://github.com/juliangarnier/anime)
- [Velocity.js](http://velocityjs.org/)
SQL Server 2016 Management Studio で Poor Man's T-SQL Formatter が動かない場合

## 問題

SQL Server 2016 Management Studio (以下 SSMS 2016) では、Poor Man's T-SQL Formatter は動作しなかった。
SSMS 2016 でアドインが使用すべき API に変更があったようなので Poor Man's T-SQL Formatter の対応を待つしかない。
Poor Man's T-SQL Formatter は、SQL を整形するアドオン。

Poor Man's 以外のフリーの SQL 整形ツール ApexSQL Refactor をインストールしてみたところ、以下の環境では動作した。
また、SQL Pretty Printer (有償かもしれない) が SSMS 2016 に対応していそうだが試していない。


>SSMS 2014 なら次の方法で Poor Man's T-SQL Formatter を使うことができた。
[SQL Server Management Studio で Poor Man's T-SQL Formatter が動かない場合の対処](http://qiita.com/monta31538/items/246ced682b467eb7e80e#_reference-3c0036a7aa353a4e1b9d)


## 情報元

- [Does the Poor Man's T-SQL formatting add-in for Management Studio 2012 work in Management Studio 2016?](http://stackoverflow.com/questions/36881346/does-the-poor-mans-t-sql-formatting-add-in-for-management-studio-2012-work-in-m)


## 確認した環境

- Windows 10 Home 64 ビット
- SQL Server 2016 Management Studio
- ApexSQL Refactor (2016.04, Aug 19 2016)


## 参照先

- [ApexSQL](https://www.apexsql.com/)
- [SQL Pretty Printer](http://www.dpriver.com/products/sqlpp/index.php)


## 手順

1. ApexSQL の [Downloads](https://www.apexsql.com/Download.aspx) から `ApexSQL Refactor` をダウンロードしてインストールする。
- SSMS 2016 のツールバーに [ApexSQL] が追加される。
Storyboard（InterfaceBuilder）の設定だけで、TableViewのセパレーターの左端の余白を消す方法（iOS8以上？）


メモ

![スクリーンショット_2016-08-24_17_12_23.png](https://qiita-image-store.s3.amazonaws.com/0/4560/dda40065-ba01-69ba-9211-502753258124.png "スクリーンショット_2016-08-24_17_12_23.png")

![スクリーンショット_2016-08-24_17_12_53.png](https://qiita-image-store.s3.amazonaws.com/0/4560/4c8d0850-5a1f-b189-2f35-dd1ff1352c7c.png "スクリーンショット_2016-08-24_17_12_53.png")

上記設定だけで消せました。

偉大な参考（パクリ）元：[objective c - iOS 8 UITableView separator inset 0 not working - Stack Overflow](http://stackoverflow.com/questions/25770119/ios-8-uitableview-separator-inset-0-not-working)
【MySQL】日時の計算（INTERVAL）

##例

```
--現在時刻から60秒前以降の値のものを抽出
select * from foo where modified < now() - interval 60 second;
 
--7日後を表示
select now() + interval 7 day;

```

##構文

```
+(-) INTERVAL 数値　単位
```

単位として使えるもの

MICROSECOND
SECOND
MINUTE
HOUR
DAY
WEEK
MONTH
OctoberCMSの導入

さっき書いた内容の薄っぺらい投稿が意外にも結構見られていて、焦りましたw

今回はローカルマシンでサイトと管理画面が見られるところまでをまとめます。入門的な内容です。

ローカルマシンの環境は下記な感じで構築済みを前提とさせてもらいます。

* OS: OS X El Capitan
* DB: MySQL
* httpサーバ: Apache 2.4

（最近はUbuntu16のDockerコンテナにnginx+PHP7で運用してます。OctoberCMSはすんなりnginxでも動きます。）

ローカルマシンへのインストール
========================
インストール方法はGUIなど幾つかありますが、composerを使用するのが後々便利なので、composerでの方法を説明します。と言っても、非常に簡単です。
CUIからのインストールに関する公式ドキュメントは[こちら](http://octobercms.com/docs/console/commands#console-install)。

composerのインストール
-------------------
composerのインストールしてください。既に入ってる場合は不要です。

インストーラーを実行してComposerを取得します

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

コマンドとして使用できるように適宜移動する

```bash
$ sudo mv composer.phar /usr/local/bin/composer
```

`/usr/bin`の変更がEl CapitanからSIPで保護されており面倒なので、`/usr/local/bin`へ入れます。新しいシェルを開くと直接呼び出せるようになります。
参考：[composer公式ドキュメント](https://getcomposer.org/doc/00-intro.md)

OctoberCMSのソースコード取得
-------------------------
OctoberCMSのソースコードをローカルマシンへ取得します。
書き込み権限のあるディレクトリで下記を実行します。任意のディレクトリ名のディレクトリが作成されてその中にソースコードがダウンロードされます。ここでは”my-blog"とします。

```bash
$ composer create-project october/october my-blog
```
ソースコードのインストールは以上です。とっても簡単！

ソースコードがクリーンなこの時点でgit管理を始めると良いですね。
どこをgit管理から除外すべきかは[こちらの記事](http://qiita.com/pikanji/items/384278f9d633c9077a24)に書きました。

あと、少しだけ設定を変更します。

注意：「[環境別の設定](https://qiita.com/pikanji/items/6e2141f05aae224f2553)」で説明しているように、.envファイルを作成して設定を行えますが、これは本ページ最後の `php artisan october:install` を実施した後に行ってください。現時点(2017/11)では、 `install` コマンドが.evnの読み込みを上書きしてしまうので。

`config/cms.php`を開きます。
composerで管理する場合、composerでのアップデートとCMSのアップデートが重複しないように、CMSのコアアップデートをOFFにします。`true`にしても、プラグインやテーマの更新はCMSから可能です。

```php
'disableCoreUpdates' => true,
```

また、なぜか、この期に及んでデフォルトの改行コードがWindows仕様になっており、CMSでページを作ると改行コードが`\r\n`となるので、下記の様に変更しておきます。（それでも一部、CMSが作成するHTMLファイルの改行コードが`\r\n`となってしまいますが・・・）

```php
'convertLineEndings' => true
```

そして、2017/11現在、Laravel5.5を使ったベータ版を使いたい場合は下記をtrueにする必要があります。これをしないと、ベースになるLaravelは5.1になります。

```php
'edgeUpdates' => true,
```

次に、ローカルマシンでも動作を確認したいので、その設定を行います。

ローカルのWebサーバへ配置
----------------------
インストールしたOctoberCMSのソースコードをローカルwebサーバのドキュメントルートにソースコードをディレクトリごと移動します。

```bash
$ sudo mv my-blog /Library/WebServer/Documents/
```

webサーバが読み書きできるように、テキトーに権限をフルオープンにします。

```bash
$ chmod -R 777 my-blog
```

Apacheの設定をいろいろと変更していなければ、これでブラウザから`http://localhost/my-blog` を見ると、OctoberCMSのデモ画面が表示されるはずです。
（バーチャルホストなどの設定も別の記事で書こうと思います。）

しかし、管理画面はまだ見られません。CMSなのでデータベースの設定が必要ですよね。

データベースの設定
---------------
下記のコマンドで、必要なテーブルを作成してくれます。実行する前に専用のデータベースを作成して、そのデータベース名、ユーザ名、パスワードを把握しておいてください。ここでは、ローカルマシン上のデータベースで構いません。環境別の設定は[こちらの投稿](http://qiita.com/pikanji/items/6e2141f05aae224f2553)で説明してます。

```bash
$ php artisan october:install
```

以上で、OctoberCMSのインストールは完了です。

`http://localhost/my-blog/backend/`を開くとCMSの管理画面にログインすることができます。
デフォルトのID/passwordはadmin/adminです。

OctoberCMSは訳の分からないファイルをあちこちに作成することはないので、git管理を始めていない状態で開いても大丈夫です。
flexboxで要素の高さを揃えつつ上下中央にする方法（IE10対応）

flexboxを使うと簡単に要素を上下中央に揃えられますが、親要素に背景色や枠線がついていると一手間必要になるので順を追ってサンプルを作成してみました。

**実装したいデザイン**
![03.png](https://qiita-image-store.s3.amazonaws.com/0/98323/3e7249db-e1c8-7da7-b8b7-f73a687d1c55.png)



まずHTMLから

**HTML**

```html
<div class="wrap01">
	<div class="col01">
		<p>テキストテキストテキスト</p>
	<!-- /col01 --></div>
	<div class="col01">
		<p>テキストテキスト</p>
	<!-- /col01 --></div>
	<div class="col01">
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<!-- /col01 --></div>
<!-- /wrap01 --></div>

```

上のHTMLをflexboxを使って横並びにします。

**CSS**

```css
.wrap01 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.col01 {
	padding: 20px;
	width: 320px;
	border: #ccc solid 1px;
	background-color: #ff9900;
}

```

この時点で下記のレイアウトになります。

![01.png](https://qiita-image-store.s3.amazonaws.com/0/98323/97c02341-a0b6-6368-8d95-bd23c9c3eb5e.png)

これのテキストを上下中央にするためにflexboxの`align-items: center;`を使うのですが、これを親要素にそのまま適用すると下記のようになってしまいます。

**CSS**

```css
.wrap01 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.col01 {
	padding: 20px;
	width: 320px;
	border: #ccc solid 1px;
	background-color: #ff9900;
}

```

![02.png](https://qiita-image-store.s3.amazonaws.com/0/98323/5633e55e-8797-74f9-005d-a788afa0a2f7.png)


実装したいデザインのようにするためには、親要素ではなく子要素に`display: flex;`と`align-items: center;`を適用させます。


**CSS**

```css
.wrap01 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.col01 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	padding: 20px;
	width: 320px;
	border: #ccc solid 1px;
	background-color: #ff9900;
}

```

そうすると実装したいデザインのようになります。

![03.png](https://qiita-image-store.s3.amazonaws.com/0/98323/778ec4c1-228c-ffc5-3f94-9912774c6a8a.png)


flexboxを使うとレスポンシブサイトなどで簡単にレイアウトの変更が出来ると思うので、積極的に使っていきたいですね。
IoTについて勉強したいのですが何から勉強すればいいでしょうか？

以前は業務系のプログラミングを3年ほどしていて、仕事としてのプログラミングは10数年しておりません。

IoTに関係する仕事につきたいのですが個人レベルでは何を勉強しておけば
1番役に立ちますか？
プログラミングはできます。

組み込み系特有のハードに関する制約(メモリが少ない？等)
とかは理解できていないのでそこから勉強しようかと思ってるのですが
お勧めの本とかあれば教えてください。
Interfaceという雑誌を見つけたのですが組み込み系の人の定番なんでしょうか？

後は、ラズペリーパイを使って遊ぶぐらいしか思いつきません。

IoTに従事している人がいれば今はこーゆーのが流行ってるとかこーゆーのを
覚えていたほうがいいよ。というのがあれば教えてください
fedoraのhttpd24でサーバが起動できない


##問題

サーバを起動、または再起動しようとすると、以下のようなエラーが出る。

```shell-session

$service httpd24-httpd restart

rm: cannot remove `/opt/rh/httpd24/root/var/run/httpd/httpd.pid': Permission denied

rm: cannot remove `/opt/rh/httpd24/root/var/lock/subsys/httpd': Permission denied
rm: cannot remove `/opt/rh/httpd24/root/var/run/httpd/httpd.pid': Permission denied
Starting httpd: AH00526: Syntax error on line 31 of /opt/rh/httpd24/root/etc/httpd/conf/httpd.conf:
Invalid command '/etc/httpd', perhaps misspelled or defined by a module not included in the server configuration
                                                           [FAILED]
```

※環境はcentos65で、httpd24は以下のリポジトリのものを使用。
https://repos.fedorapeople.org/repos/jkaluza/httpd24/epel-httpd24.repo


##解決方法

sudoのつけ忘れ。エラーメッセージから分かりにくい。

```shell-session
$ sudo service httpd24-httpd restart
Stopping httpd:                                            [  OK  ]
Starting httpd:                                            [  OK  ]
```
サーブレットでリクエストボディを取得する

# 

リクエスト本文(リクエストボディ)を取得するメソッドって特に提供はされていないと思いつつ、Java8ならば少し簡単に記述できます。

```BodySampleServlet.java
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	String result = request.getReader().lines().collect(Collectors.joining("\r\n"));
}
```

1行でまとめているところ分割すると、次のように。

```BodySampleServlet.java
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	BufferedReader reader = request.getReader();
	Stream<String> lines = reader.lines();
	String result = lines.collect(Collectors.joining("\r\n"));
}
```
Pythonのリスト要素からある値と最も近い値を取り出す

Pythonでリスト内からある値と最も近い値を取り出す際に少し手間取ったのでメモ.

# 失敗例

ネット上でnumpyの[searchsorted関数](http://docs.scipy.org/doc/numpy/reference/generated/numpy.searchsorted.html)を使う方法を見たが, この関数はリストに値を挿入する際のインデックスを返却する関数なので, ある値ともっとも近い値のインデックスを返してくれるとは限らない.

**実際に失敗した例**

```py3:失敗例.py
# coding: utf-8

import numpy as np


def getNearestValue(list, num):
    
    # 昇順に挿入する際のインデックスを取得
    sortIdx = np.searchsorted(list, num, side='left')
    return list[sortIdx]
    

if __name__ == "__main__":

    list = [0, 0.5, 1]

    print(getNearestValue(list, 0.1))  # →0 OK
    print(getNearestValue(list, 0.4))  # →0 NG
```

上記コードのリスト内要素で`0.4`と最も近い値は0.5ですが, 0が返ってきています.


# 解決策

~~そこでsearchsorted関数で得られたインデックスの周辺要素から目的の値の差分を計算して, ある値ともっとも近い値を取り出す関数を実装しました.~~

**追記: 2016/08/24**
[kochory](http://qiita.com/kochory)さんから大幅に効率化されたコードを教えて頂きました.
ある値とリスト内の要素の差分を計算し, その最小値のインデックスを求めることで実装しています.
ありがとうございます!

```py3:getNearestValue_sample2.py
# coding: utf-8

import numpy as np


def getNearestValue(list, num):
    """
    概要: リストからある値に最も近い値を返却する関数
    @param list: データ配列
    @param num: 対象値
    @return 対象値に最も近い値
    """

    # リスト要素と対象値の差分を計算し最小値のインデックスを取得
    idx = np.abs(np.asarray(list) - num).argmin()
    return list[idx]
    

if __name__ == "__main__":

    list = [0, 0.5, 1]
    
    print(getNearestValue(list, -0.1)) # →0
    print(getNearestValue(list, 0.1))  # →0
    print(getNearestValue(list, 0.4))  # →0.5
    print(getNearestValue(list, 0.5))  # →0.5
    print(getNearestValue(list, 0.6))  # →0.5
    print(getNearestValue(list, 0.8))  # →1
    print(getNearestValue(list, 1.2))  # →1
```
Facebook Messenger Bot を Hubot で構築して Heroku で動かす

## 予め
1. Heroku のアカウントがあって、[heroku toolbelt](https://toolbelt.heroku.com/) が ローカルにインストールされている
2. [nodejs](https://nodejs.org/en/) が インストールされている
3. Facebook の Page が作られている(https://www.facebook.com/pages/create/)
4. Facebook アプリが作成されている(https://developers.facebook.com/quickstarts/?platform=web)

##  開発環境作り
### Hubot のインストール

```
$ npm install -g yo generator-hubot
```

### Hubot application の Generate
[yeomen](http://yeoman.io/) generator を 使ってアプリケーションのベースを作ります
Messenger Bot 用の Adapter には [messenger-bot](https://github.com/ClaudeBot/hubot-messenger-bot) を使います

かりに アプリケーション名を botapp とします

```
$ mkdir botapp
$ cd botapp
$ yo hubot
```

git に Commit しておく

```
$ git init
$ git add .
$ git commit -m 'Initial commit'
```

adapter を聞かれたら、 messenger-bot と入力する

### Facebook access token を作る

1. アプリケーションの管理ページから Messenger を選択する
2. 登録した Messenger Bot 用の アプリケーションを選択
3. Token が表示される

![FBAPP.jpg](https://qiita-image-store.s3.amazonaws.com/0/9906/034b851a-a9da-4437-b1ab-fc7bee3a352c.jpeg)

### Heroku に Push

Heroku の git に Push する 

```
$ heroku apps:create botapp
$ git push heroku master
```

Token とか 登録する

```
$ heroku config:set MESSENGER_ACCESS_TOKEN=(先ほど取得した Token)
$ heroku config:set MESSENGER_VERIFY_TOKEN=botapp (何か適当な文字列 Webhooks　登録時に使用します）
$ heroku config:set HUBOT_HEROKU_KEEPALIVE_URL=$(heroku apps:info -s  | grep web-url | cut -d= -f2)
```

### Webfook を登録

1. Tokenを取得した Facebook のアプリケーション管理ページで Webhooks の欄の Edit Events ボタンをくりく
2. 下のダイアログが表示されるので、コールバックURLへ (herokunourl)/webhook/、トークン確認へ MESSENGER_VERIFY_TOKEN へ設定した文字列を入力する 
3. チェックボックスを全部チェックして 確認して保存 する

![webhook.jpg](https://qiita-image-store.s3.amazonaws.com/0/9906/59c14903-fdbc-2729-03a2-2f06ada3a3a7.jpeg)


**これで準備完了です**

## 簡単な Coll and Response

### Hubot の応答Scriptを書く

1.script フォルダ内に以下のファイルを設定  

```coffeescript:botapp.coffee
#commands:
# hubot こんちは return the message ちはこん
#
module.exports = (robot) ->
  robot.hear /こんちは/i, (res) ->
    res.send 'ちはこん'
```

2.heroku に Push　する
3.facebook の Page から メッセンジャーを起動してメッセージを入力する

![kontiha.jpg](https://qiita-image-store.s3.amazonaws.com/0/9906/c11b838c-dd05-bb9d-ca01-9a2e18218ee1.jpeg)

これで、返事が帰ってくるはずです
Firefox でアドオン無しでスクリーンショットを撮る


## この記事は古い記事です

すでに Firefox は[便利なスクリーンショット機能がネイティブ搭載されています](https://support.mozilla.org/ja/kb/firefox-screenshots)ので、そちらを使いましょう。
（コメントでの言及にもあるように）インスペクタから「ノードのスクリーンショットを撮影」なども役立ちます。

この記事で紹介している開発ツールバーは、[Firefox 62 で削除されました。](https://developer.mozilla.org/ja/docs/Mozilla/Firefox/Releases/62#Removals)

引き続きスクリーンショットをコンソールで撮りたい場合は、開発ツールバーの代わりに、[開発者ツールのコンソールで `:screenshot` と打ってみてください。](https://blog.nightly.mozilla.org/2018/08/23/screenshots-from-the-console/)

---

私は Firefox を常用していますが、アドオンを使わなくても、ブラウザだけでスクリーンショットを撮れます。しかも開発ツールバーを使うと超速。

改めて探したら散々概出でしたが、アドオン使うのは信用ならねえ、という方に、自分の忘備録も兼ねてメモ。

## 今表示している部分を撮る

```text:開発ツールバー
screenshot
```

こんな感じで撮れます。 :arrow_down:

![Screen Shot 2016-08-24 at 15.51.32.png](https://qiita-image-store.s3.amazonaws.com/0/70467/bc22fdd0-4cd8-926f-d22c-e0af42e6ed47.png)

### やり方

1. `Shift` + `F2` で開発ツールバーを開く
2. `screenshot` と入力
3. `Enter`

スクショ画像がダウンロードされます。

<img width="1146" alt="スクリーンショット 2016-08-24 15.51.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/70467/ca78ac29-9b7a-88aa-cfdf-d253115d4e66.png">

開発ツールバーは補完も効くので、慣れれば超速で撮れます。

## オプション

### ページ全体を撮る

```text:開発ツールバー
screenshot --fullpage
```

### そのほか使いそうなもの

- **`--fullpage`: ページ全体を撮る**
- **`--clipboard`: クリップボードにコピー**
- *`--imgur`: [imgur.com](https://imgur.com) にアップロードする*
- `--chrome`: ウィンドウも含めて撮る
- `--delay 5`: タイマー (5秒)
- `--dpr 2`: ピクセル比 (2倍の解像度)
Juniper JUNOS PyEz (python library)を試すメモ 1  ~PyEz概要~

#1.概要
近年、AI、ロボット、自動化などの注目が高まっており、ネットワークでもオートメーション/自動化、スクリプティングというのが注目されている。メジャーネットワークベンダーのひとつであるJuniper Networksは、ネットワークOSのJUNOSにて、以下のようなオートメーションスタックにより様々なツールやAPIを公開し、多様なオートメーション要求に対応できる環境を提供している。

![image](https://qiita-image-store.s3.amazonaws.com/0/138304/d76ff1a1-00d6-91af-450d-5b3f65fc4af6.png)

今回は、その中で、あまり日本語の情報が検索できなかった、PythonのフレームワークであるPyEz(パイイージー)というのを試してみる。
PyEzとはPythonをEasyに使用できるというものらしく、熟練のプログラマでなくても簡単にpythonでリモートからの情報取得/抽出や設定変更が可能となる。

Juniperのドキュメントには、PyEzにより、以下が提供されるとある。[※1](https://www.juniper.net/techpubs/en_US/junos-pyez1.2/topics/concept/junos-pyez-overview.html)

+ デバイスからオペレーション情報やfactsを取り出したり、Junos XML APIにより、RPC(remote procedure call)を実行可能
+ Junos OSのインストール、再起動、シャットダウンのようなソフトウェアユーティリティを提供
+ コンフィグレーションの比較、レスキューコンフィグレーション設定、コンフィグ変更のアップロードなどのマネージメントユーティリティの提供
+ コンフィグ変更のアップロードに関しては、ASCII text, Junos XML elements,Junos OS setコマンドに加え、 Jinja2テンプレートや柔軟にカスタマイズ可能なテンプレートがサポート
+ ファイルコピーやチェックサム計算などの共通的な管理者タスクをシステムユーティリティで提供
+ Tables and Viewsを使用し、オペレーション情報やコンフィグレーション情報を稼働しているJunos OSから効率的に取得
+ Tables and Viewsにより、RPCに相当するJunos OSコマンドが利用でき、情報の抽出やカスタマイズも可能
+ これらを活用することで、show routeやshow intefaceなどの組み込まれたコマンドの出力結果から、必要なフィールドのみを抽出することが可能

尚、検索できるドキュメントは英語ばかりになるが、[PyEz Techwiki](http://forums.juniper.net/t5/Automation/Where-can-I-learn-more-about-Junos-PyEZ/ta-p/280496)や、[Python EZ Google](https://groups.google.com/forum/#!forum/junos-python-ez)などもあるため、そちらで確認や質問もできそう。


#2.環境準備
今回は無償で試せるvSRX ※2 とAWS EC2の無償枠で使用できるサーバー(Amazon Linux AMI 2016.03.3)を利用し、PyEzで設定確認や設定変更を試してみる。

PyEzを使うには、junos-ezncというパッケージをインストールする必要があるが、そのために、[Junos PyEZ Dependencies](https://www.juniper.net/techpubs/en_US/junos-pyez1.2/topics/task/installation/junos-pyez-server-installing.html)を参考に、使用するOSに応じてパッケージをインストール。

AWS Linux AMIはRHELをベースにしたAWS独自提供のLinux OSのためCentOSに必要なパッケージをインストール。

しかし、pipコマンド(# pip install junos-eznc)によりPyEzのパッケージをインストールしようとしたが、"fatal error: openssl/opensslv.h: No such file or directory"となった。よって、openssl-develもインストールしたら、junos-ezncもインストール可能となった。


尚、現在のPyEzは、python 2.6 または 2.7がサポートされており、AWS Linux AMIにはPython2.7がプリインストールされている。


正常にインストールできた場合は、pytyonで以下のようなPyEz関連のモジュールのインポートが可能となる。

```
$ python
>>> from jnpr.junos import Device
>>> 
```

正常にインストールできていない場合は、例えば、以下のようなエラー。

```
>>> from jnpr.junos import Device
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ImportError: No module named jnpr.junos
```

各モジュールは、[こちら](https://www.juniper.net/techpubs/en_US/junos-pyez1.2/topics/reference/general/junos-pyez-modules-overview.html)を参照。



実際のコネクションはnetconf over SSHを使用するため、JUNOSもあらかじめ設定が必要となる。
```
user@host# set system services netconf ssh port 22
user@host# commit
```


これで、環境準備ができたため、次回は、JUNOSの情報取得や設定変更を試してみる。

#参考リンク：
　[Juniper Tech Library: Junos PyEZ](https://www.juniper.net/techpubs/en_US/release-independent/junos-pyez/information-products/pathway-pages/index.html)*1　
　[slide share:PCではじめるvSRX] (http://www.slideshare.net/JuniperJapan/vsrx-laptop-201505)*2　
　[PyEz Techwiki](http://forums.juniper.net/t5/Automation/Where-can-I-learn-more-about-Junos-PyEZ/ta-p/280496)
　[Python EZ Google](https://groups.google.com/forum/#!forum/junos-python-ez)
ofxBlackMagicを使った時のメモ（of_0.9.2)

##使用用途
Nikon D5100で撮った映像をリアルタイムでopenFrameworksに取り込む用途で用いた。


##使ったもの
・MacbookPro2015 mid
・UltraStudio Mini Recorder
・openFrameworks(of_0.9.2)
・Nikon D5100

##使用するときの注意点
ofxBlackMagicは[マスターブランチ](https://github.com/kylemcdonald/ofxBlackmagic)ではなく、
[こっち](https://github.com/kylemcdonald/ofxBlackmagic/tree/0.9.0)を使う。
その他は、[このサイト](http://blog.cameura.com/openframeworks/bmd_decklink)に従えば多分大丈夫。
VirtualBox 用の CentOS-7.2 の Vagrant box を作ってみた

CentOS-7.2 用の Vagrant Box がなかなか見つからなかったので、練習がてら作ってみました。とりあえず手元では動いているようです。bento/centos-7.1 から起こした VM で yum update して、VirtualBoxGuestAddition を最新にして、あとは git を入れた程度です。

# 使い方

```bash
$ git clone https://github.com/hotta/vagrant-cent72-box
$ cd vagrant-cent72-box
$ vagrant up
```

もしくは

```bash
$ mkdir XXX
$ cd XXX
$ vagrant init vagrant-cent72-box https://dl.dropboxusercontent.com/s/eb370ttc2v26lzb/CentOS-7.2-x86_64.box 
（2016/08/29 以下に変更）
$ vagrant init vagrant-cent72-box https://github.com/hotta/vagrant-cent72-box/releases/download/v1.0.1/CentOS-7.2-x86_64.box
$ vagrant up
```

# Box 作成時に参考にしたサイト：

[Vagrant box 作成手順(CentOS 6.7)](http://qiita.com/KisaragiZin/items/64b664c8b20ea39a6cd1)

めちゃくちゃ親切に解説してくださっています。
Vagrant の配布元から ssh の公開鍵をダウンロードして設置するのがキモでした。

# Box イメージを公開するために検討した方法

[http://www.vagrantbox.es/](http://www.vagrantbox.es/) を見ると、皆さん実にいろんな方法で公開されています。

1. Github
  - ここで公開している方が一番多そうですが、Github に精通していないこともあり、正直やり方がよくわかりませんでした（汗。

2. AWS上のLinuxインスタンス（自己所有）
  - ここに置くのが一番簡単でメンテナンスもやりやすそうなのですが、万が一のパケ死（？）が怖かったので思い留まりました。
  - 参考までに、インスタンスからインターネット側への転送料（アウト）は[10TBまで $0.140 /GB/月](https://aws.amazon.com/jp/ec2/pricing/)です。Boxファイルは600MBほどありますので、仮にひと月で100回（60GB）ダウンロードされたら 1,400円／月 ほどになります。[S3 も同じ値段](https://aws.amazon.com/jp/s3/pricing/)です。
 - （さくらの VPS だと[転送量課金がない](http://vps.sakura.ad.jp/specification/)ので、引っ越したのはやっぱり失敗だったかな？）

3. Google Drive
 - 普段から使い慣れているのでとりあえずアップロードしたんですが、わかりやすい URL を取得しようとしてやり方を探していたら、こういうのを見つけました。
 - [Google ドライブにおけるウェブ ホスティング機能の廃止について](http://googleappsupdates-ja.blogspot.jp/2015/09/google.html)
 - ファイル名を含む URL は今月いっぱいまでで使えなくなりそうなので、あきらめました。

4. Dropbox
  - ずっと前にアカウントを取ったまま放置していたんですが、結局これに落ち着きました。
  - Google Drive よりは転送が遅い気がしますが、初回ダウンロードの時だけなので、あまり問題なさそうです。
  - 無料プランにつき、[帯域制限は 20GB/日](https://www.dropbox.com/ja/help/4204) のようです。まぁ大丈夫かな…。
雑にzsh_historyをfish_historyに変換する

zsh_historyにはASCII以外の文字がメタ文字を使ってエスケープされているので、適切にデコードしてからfishが読み取れるyamlに変換する。

```rb:convert.rb
require 'stringio'

File.open(File.expand_path('~/.zsh_history')) do |f|
  escaped = StringIO.new

  # .zsh_historyのデコード
  f.to_enum(:each_byte).tap do |enum|
    processes = []
    loop do
      b = enum.next
      if b == 0x83
        b = enum.next
        b = (b ^ 0x20)
      end
      processes << b
    end
    escaped.write processes.pack('c*')
  end

  # 雑にパースしてfish_historyのyamlに変換
  # ヒアドキュメントなどを使った複数行入力については諦めて標準エラー出力に出す
  escaped.rewind
  escaped.each_line do |l|
    unless l[0] == ':'
      $stderr.puts l
      next
    end
    command = l.split(/;/, 2).last
    time = l.split(/\:/, 3)[1]
    if time.nil?
      $stderr.puts l
      next
    end

    puts "- cmd: #{command}"
    puts "  when: #{time.strip}"
  end
end
```

```shell-session
$ ruby convert.rb > ~/fish_history
$ cat ~/fish_history >> ~/.local/share/fish/fish_history
```

## 参考

- [Emacs で zsh の ヒストリファイルを閲覧・編集する - A Riddle Wrapped in a Mystery](http://kawabata.github.io/blog/2013-03-17-zsh-history.html)
- https://github.com/fish-shell/fish-shell/blob/master/src/history.cpp
- [history file location · Issue #862 · fish-shell/fish-shell](https://github.com/fish-shell/fish-shell/issues/862#issuecomment-240547960)