OmniAICreator/Qiita-1.07M huggingface dataset:
Slackでbotからきれいに自作画像を投稿する小技

SlackでKPI等のグラフが閲覧できると便利ですよね。
そのとき、メッセージに含まれるリンクをクリックするのではなく、
メッセージ上で画像が表示できれば、みんなその画像を見てくれます。

Webリンクの自動読み込み機能を使えば上記は簡単にできますが、
インターネット上に公開されてしまいます。
セキュリティ等の制約や機密情報が含まれるときは悩みどころです。

かといって画像を直接アップロードすると、そこに注釈をつけたりスレッドを利用することができません。
通常のAPIでのメッセージ送信と違い`attachments`は付与できないのも問題です。

##解決方法
以下が上記を解決する方法です。

1. 適当な公開channelに画像をアップロードする。
2. その画像へのリンクをメッセージ送信する

公開channelに画像をアップロードし、Slack内のWebリンクを作るのがポイントです。
メッセージ送信する際はリンクなので画像が読み込まれ、`attachments`で装飾もできます。
画像置き場として公開channelを一つ作ればよいでしょう。
Redmine 構築メモ

#Redmine
Qiitaに投稿するのは違うとは思うんだが、さんざん検索しても一向に見当たらなかったので残しておく。
Redmine構築時、メール通知テストは出来るのだが、イベントでの通知が全く飛ばなくて悩んでいた。

結局

「管理」→「ユーザ」→「全般」→「メール通知」→「自分自身による変更の通知は不要」をチェック外す 

構築テスト時のユーザが「自分」しかいなかったので気がつかなった。

いろいろなケースで似たようなことある・・・・よね。
simctlでiPhoneシミュレータを全削除する

今までiPhoneやApple WatchのシミュレータをXcodeのDevices上でチマチマ消してたのですが、何らかの動作が関係して、全復活したので用意しました。

忘れてしまいそうなのでほぼ自分用として用意しました。

**もし使う場合は削除操作なので自己責任でお願いします**

```bash
$ for i in $(xcrun simctl list | grep -oE '\w{8}-\w{4}-\w{4}-\w{4}-\w{12}'); do xcrun simctl delete ${i}; done
```
ReactNative 開発で Android アプリを adb からリロードする

基本的には Hot Reload が適用されるので、明示的なリロードする機会は少ないともいえ、それなりにリロードする。

Android アプリはエミュレータならエミュレータにフォーカスをあわせ `r r` でリロードできる。がフォーカスを合わすのもめんどうな時には adb から keyevent を送ることでリロードできる。

```
adb shell input keyevent 46 46
```

使ってるエディタから送れる用にしておくと、エディタでコード書きながら明示的リロードも簡単。

またデバッグリストは(macOSなら) ```cmd + m``` で表示できる、のでその keyevent を送ることで表示できる。

```
adb shell input keyevent 82
```

実機でのデバッグ中だとデバッグリストを出すのがシェイクジェスチャーで少々面倒なので、直接キーコードを送っちゃった方がかんたん。
Ubuntu Server 16.04に上げてEUC-JPな#markdownが表示されなくなった場合の対策


#背景
　pukiwikiでmarkdown記法を実装する手段の１つに、sonotsさん作の [markdown.inc.php](https://pukiwiki.osdn.jp/?%E8%87%AA%E4%BD%9C%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/markdown.inc.php) があります。
　社内のwikiサイトに組み込んで使用してましたが、サーバOSをUbuntu Server 12.04から16.04にdo-release-upgradeした後で使えなくなりました。

#原因

　aptで入るPHPのバージョンが5.3->7.xに上がったことで、PHPの標準charsetがUTF-8となり、EUC-JPベースのテキストのParseが失敗していたからでした。（元々、UTF-8ベースで構築しているPukiwikiサイトは影響なかったと思います）

#対策

　今回、問題があったのはmarkdown表記の部分だけだったので、markdown.ini.phpに以下の文字コード変換を組み込んだらうまく表示できました。（PHPは素人なのでもっと良い修正方法があるかもしれません・・）

```php:markdown.ini.php
  //22行目あたり
  $noskin = in_array("noskin", $args)
+ $body = mb_convert_encoding($body, "UTF-8");
     : (中略)
  $body = Markdown($body);
+ $body = mb_convert_encoding($body, "EUC-JP", "UTF-8");
```

#備考

　pukiwikiのテキストの文字コードをUTF-8に変換する方法もあるかと思います。今回は影響範囲が大きいので止めました。
WordPressのサーバがメモリ不足で落ちたので、SWAP領域を追加して応急処置

# はじめに

先日、ブログサイトとして運用していたWordPressのサーバがメモリ不足で落ちたので、実際にやった対処法をご紹介します。
原因は、深夜にヘッダー画像をアップロードしたり、切り取ったりを繰り返していたら、MySQLが死んだみたいです。

EC2　t2.microのインスタンスはWordPressのサーバに使用すると、ぎりぎり落ちるか落ちないかのスペックみたいですね。

<pre># service mysqld status
mysqld dead but subsys locked

tail -100 /var/log/mysqld.log
// 一部抜粋
2017-02-07 16:41:15 17577 [ERROR] InnoDB: Cannot allocate memory for the buffer pool
2017-02-07 16:41:15 17577 [ERROR] Plugin 'InnoDB' init function returned error.
2017-02-07 16:41:15 17577 [ERROR] Plugin 'InnoDB' registration as a STORAGE ENGINE failed.
2017-02-07 16:41:15 17577 [ERROR] Unknown/unsupported storage engine: InnoDB
2017-02-07 16:41:15 17577 [ERROR] Aborting
</pre>


# インフラ構成

EC2　t2.microインスタンス1台構成
AmazonLinux
Apache2.2 MySQL5.5 PHP5.6


# SWAPとは
>
ハードディスクなどの補助記憶装置を利用して使用可能なメモリ容量を増やすOSの機能の一つ。
ハードディスク上に「スワップファイル」あるいは「スワップ領域」と呼ばれる専用の保存領域を用意して、メモリ容量が不足してきたら現在使われていないプログラム(プロセス)を一時的にスワップファイルに書き出して消去し、占有していたメモリを開放する。メモリからハードディスクに退避する動作を「スワップアウト」(swap-out)、ハードディスクからメモリに書き戻す動作を「スワップイン」(swap-in)という。

http://e-words.jp/w/%E3%82%B9%E3%83%AF%E3%83%83%E3%83%97.html
より引用

# 作業内容

とりあえずMySQLの再起動を試しましたが、出来ず。

<pre># service mysqld restart
Stopping mysqld:                                           [  OK  ]
Starting mysqld:                                           [FAILED]
</pre>


freeコマンドで現在のメモリの仕様状況を確認します。

<pre># free
             total       used       free     shared    buffers     cached
Mem:       1019280     560060     459220      54268       9936      96820
-/+ buffers/cache:     453304     565976
Swap:            0          0          0
</pre>




## SWAP領域の追加

ddコマンドで、SWAP用ファイルを作成する。
※中身が0で埋め尽くされた、1Gbyteのswapfile1という名前のファイルができます。


<pre># dd if=/dev/zero of=/swapfile1 bs=1G count=1
</pre>



パーミッションを設定

<pre># chmod 600 /swapfile1
</pre>

SWAP領域の作成

<pre># mkswap /swapfile1
Setting up swapspace version 1, size = 1048572 KiB
no label, UUID=67eb1ae1-16bf-4ed2-9b4c-3808cd59f6d3
</pre>

SWAP領域を有効化する

<pre># swapon /swapfile1
</pre>


freeコマンドでSWAP領域が適用されたことを確認

<pre># free
             total       used       free     shared    buffers     cached
Mem:       1019280     949668      69612      54268       3052     481712
-/+ buffers/cache:     464904     554376
Swap:      1048572          0    1048572
</pre>

MySQLの起動

<pre># service mysqld start
Starting mysqld:                                           [  OK  ]
</pre>



# 終わりに

最初MySQLが再起動出来なかった時、正直めっちゃ焦りました笑
なんとか原因がわかって、対処出来てよかったです。
SWAP領域を確保しておくだけで、ある程度の負荷には耐えられるようになるので、サーバのスペックを変更せずに対処出来てオススメです。

読んでいただきありがとうございました！
【詰まった】CakePHPにAWS SDK for PHPを導入する方法〜仕事あるある〜

## ***'Aws\S3\S3Client' not found***の呪縛から解放するには...

　  
ある案件で、すでにCakePHPで作られた管理画面があった。
(※この案件でCakePHPを初めて使うことになる)

そこに画像をアップロードする機能があったんだけど、プロジェクトが大きくなるにつれてAWSに以降することになった。

そのため、画像アップロードの向き先をローカルではなく、S３に以降しようと話がまとまった。

そんなときに起きたあるある話をまとめますた。


## 環境
　
・ CakePHP v2.5.4
・ AWS SDK for PHP v2.8
・ composer/installers v~1.0

　
## 途中から知るComposerについて
　
最初にやったことは、AWS SDK for PHP(aws-sdk-php)を[AWS公式](https://aws.amazon.com/jp/sdk-for-php/)からダウンロード。
　
CakePHPの場合、GITで管理されているプラグインに関しては、cakephp/app/Plugin直下で管理し、ライブラリ/モジュールなどcakephp/app/Vendorで管理されることが作業中わかったので、ダウンロードしたaws-sdk-phpのzipをVendorの中で解答(zipファイルは消す)。
　
そして参考記事で紹介されている内容をもとにaws-sdk-phpの中に入っているS3Clientを使うと...

```
2017-04-24 20:12:18 Error: Fatal Error (1): Class 'Aws\S3\S3Client' not found in [/opt/www/cakephp/app/Plugin/AmazonWebServices/Model/Datasource/S3.php, line 24]
```
　
とエラーが出て、
>use Aws\S3\S3Client;

ここの呼び出しがちゃんと処理されていないらしい。

### 参考記事　
[CakePHPのDatasourceを使ってAWS S3にファイルをアップロードする](http://j-caw.co.jp/blog/?p=1195)
[CakePHP2.3でAWS SDK2 for PHPを使ってS3にファイルをアップロードする方法](http://www.live2love.co.jp/blog/cakephp2-amazon-s3-file-upload/)
　


## 'Aws\S3\S3Client' not foundの対策

### 手動でaws-sdk-phpを入れたが、Composerで導入する。
　
[AWS SDK for PHPをインストールするならComposerでしょ！](https://www.slideshare.net/slywalker/aws-sdk-for-phpcomposer)の記事の内容を見て、
[AWSの公式ドキュメント](http://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/DeletingMultipleObjectsUsingPHPSDK.html)と[CakePHPの公式ドキュメント](https://book.cakephp.org/2.0/ja/installation/advanced-installation.html)を確認。


### Composerについて
　
元々、FuelPHPでComposerを使っていたこととaws-sdk-phpをComposerから導入したので、フレームワークは違うがすでにComposerでaws-sdk-phpを入れていたFuelPHPのプロジェクトを見ながら作業を再開。
　
次に詰まったのは、Composerで入れても***'Aws\S3\S3Client' not found***が起きてしまう。
再度、ドキュメントを確認していくとComposerで入れた時に自動的に生成された、***autoload.php***を読み込みが必要だが、それまでのCakePHPのプロジェクトでは、そもそも***autoload.php***がなかったため、インポート処理もなかった。
　


### autoload.phpを読み込み
　
ドキュメントを確認すると

bootstrap.phpに

>require APP . 'Vendor/autoload.php';

を追加することがわかった。


### Vendorにもcomposerを入れる

また、composer.jsonのrequire内に

>"composer/installers": "~1.0"

を追加する。
　
　
これは、autoload.phpが使うようだ。
composer/installersがないと、また違うエラーが出てしまう。


## 結果

これらの設定で、***'Aws\S3\S3Client' not found***の呪縛から解放された。
　
他にこれらが書かれている記事がなかったのと、社内共有のためにまとめました。
　
お役にたたてもらえばと存じまする〜。
tiny_tdsでAzure SQL Databaseに接続できない（解決）

# TL; DR

tsqlコマンドでは接続できるが、Rubyのtiny_tds gemでは接続できない状況。
freetdsをyumでインストールし直し、gemもインストールし直したら接続できるようになった。
自分でビルドしたfreetdsが原因だった模様。

Rubyで出ていたメッセージは：

```
/home/ao/tds/vendor/ruby/2.3.0/gems/tiny_tds-1.3.0/lib/tiny_tds/client.rb:53:in `connect': Adaptive Server connection failed (XXXXXXXXXXX.database.windows.net:1433) (TinyTds::Error)
        from /home/ao/tds/vendor/ruby/2.3.0/gems/tiny_tds-1.3.0/lib/tiny_tds/client.rb:53:in `initialize'
        from 1.rb:10:in `new'
        from 1.rb:10:in `<main>'
```

# 環境
CentOS 7.3.1611
Ruby 2.3.1p112
freetds-devel-0.95.81-1.el7.x86_64（正常動作）
freetds-0.95.81-1.el7.x86_64（正常動作）
freetds-1.00.27（動作しなかった）
tiny_tds 1.3.0

# 動作しなかったfreetdsのインストール方法

https://docs.microsoft.com/ja-jp/azure/sql-database/sql-database-connect-query-ruby
のUbuntu用の説明と同様、freetds-1.00.27.tar.gzをビルドした。

# 正常動作したfreetdsのインストール方法

```
# yum install epel-release
# yum install freetds freetds-devel
```
Highchartsのカスタムボタンでhtml使用を許可する

### 概要
`title`や`subtitle`では`useHTML: true`を設定することでHTMLを使用可能になるが、
カスタムボタンではuseHTMLを使用できないのでフォントアイコン等が使用できない。
highchartsの[extending](https://www.highcharts.com/docs/extending-highcharts/extending-highcharts)を行えばカスタムボタンでもHTMLが使用可能になる

```js
{
  title: {
    useHTML: true,
    text: '<i class="fa fa-bar-chart"></i> Chart!'
  }
}
```

### 方法

以下のようなwrapをhighchartsに実行を書く

```js
import * as ReactHighcharts from 'react-highcharts'
import HighchartsExporting from 'highcharts-exporting'

(function (H) {
  H.wrap(H.Renderer.prototype, 'label', function (proceed, str, x, y, shape, anchorX, anchorY, useHTML) {
    // When refresh is called, code inside this wrap is executed
    let arg = [].slice.call(arguments, 1)
    if (this.allowHTML) {
      arg[6] = true
    }
    console.log()
    return proceed.apply(this, arg)
  });
}(ReactHighcharts.Highcharts))

// export moduleの有効化
HighchartsExporting(ReactHighcharts.Highcharts)
```

カスタムボタンの設定

```js
{
  exporting: {
    buttons: {
      contextButton: {
        enabled: false
      },
      exportButton: {
        text: '<i class="fa fa-bell-o" aria-hidden="true"></i> Alert!',
        onclick: ()=>{
          alert("hi")
        }
      }
    }
  }
}
```

argumentsの6番目の要素で`useHtml`を制御しているので、そこに`true`を入れる。
問題点としてはconfigでhtml使用のon/offが効かなくなること。
`str`特定の文字列が含まれる時だけ`true`を入れるなどの細かい制御はお好みで

あと、自作のwrap関数のあとに、exporting moduleを有効化させないと

```
TypeError: (0 , _highchartsExporting2.default)(...) is not a function
```
みたいに怒られる。

### 参考
https://forum.highcharts.com/highcharts-usage/font-awesome-in-exporting-menu-t34732/
Google リッチカードの導入

##リッチカードとは？

>リッチスニペットを発展させたもので、より”ビジュアル”な検索結果を提供します。まずレシピと動画を対象に米Googleで提供が始まりました

検索結果に表示された際に、テキストよりもリッチカードでの表示の方がクリックされるよ！？という話。下の画像を見ても、同じ検索結果ならカード型をクリックしたくなるはず。

![rich-result-evolution-800x450.png](https://qiita-image-store.s3.amazonaws.com/0/20635/d345e7e9-4277-ed1c-df38-47f5bc92d62f.png)
※[参照先画像](https://webmasters.googleblog.com/2016/05/introducing-rich-cards.html)

##したいこと
検索結果で、各記事の表示をリッチカードで表示させたい
例：カレーライスのレシピ記事、　肉じゃがのレシピ記事。。。


#導入手順
##1、構造化データでのマークアップ


###できたコード
```
<script type="application/ld+json">
　　{
　　　　"@context": "http://schema.org/",
　　　　"@type": "Recipe",
　　　　"url": "#{www_test_url(@test)}",
　 　"name": "#{@test.name}",
　 　"image": "#{@test.image}"
　　}
</script>
```


###1-1
```
"@context": "http://schema.org/",
```
"http://schema.org" での定義に従って記述しますよという宣言をする。
例:検索エンジン（コンピュータ）に対して、会話をする言語は「英語」で話しましょうと伝えているイメージ。

###1-2
```
"@type": "Recipe"
```
typeで何について表現するのかを指定します。Recipe以外にも、[Person](http://schema.org/Person)、[Event](http://schema.org/Event)。。。などあります。これは、schema.orgが用意してくれてる各タイプのkeyにります。なので表示させたいコンテツによってタイプを選択します。

###1-3
```
"url": "#{www_test_url(@test)}",
"name": "#{@test.name}",
"image": "#{@test.image}"
```
url、name、imageのkeyに対しては、変数で指定をします（@testには記事に関する各データが入ってる）




##2、Googleの構造化データテストでエラーと表示結果を確認
###2-1
[Googleの構造化データテスト](https://search.google.com/structured-data/testing-tool)で、script内のコードを、作成したコードに置き換えて、テスト結果を確認する
※警告は、推奨フィールドであって、値がなければ指定しなくても良い
![test.png](https://qiita-image-store.s3.amazonaws.com/0/20635/c21c5971-3a63-61b8-696c-7d9d47d33826.png)


###2-2
プレビューボタンを押して表示を確認する
![tsa.png](https://qiita-image-store.s3.amazonaws.com/0/20635/c0494e81-0a98-33b6-7a3e-0aa79d26bdc2.png)


##3、表示させたいページに組み込む
自分の場合は、ファイルがhamlだったので「:plain」で組み込みました。


```
:plain
  <script type="application/ld+json">
 　  {
　　　　    "@context": "http://schema.org/",
　　　　    "@type": "Recipe",
　　　　    "url": "#{www_test_url(@test)}",
　 　    "name": "#{@test.name}",
　 　    "image": "#{@test.image}"
　　   }
  </script>
```


#参考記事
・[http://schema.orgとは?](https://syncer.jp/schema-entering)
・[構造化データとは？](https://www.seohacks.net/blog/seo-tech/1191/)
・[JSON-LDとは？](https://www.suzukikenichi.com/blog/google-recommends-to-use-json-ld-and-web-components-together/)
・[Stand out in search results with Rich Cards](https://www.youtube.com/watch?v=L9BqE01SLeE&t=327s)
・[Google Webmaster Tools Rich Cards](https://www.youtube.com/watch?v=sxac8PqrVqk&t=261s)　←スピーカーの方の髪型がすごく気になる。
Node.jsを触る前にこれだけは絶対に押さえておこう4選

# Node.jsを触る前にこれだけは絶対に押さえておこう4選

## 第1選 ブロッキングI/OとノンブロッキングI/O

**Node.jsは「ノンブロッキングI/O」**

I/O(Input/Output)は時間がかかるものです。
そこで、この時間がかかる作業を処理の完了を待ってから次の処理をするのが**ブロッキングI/O**です。
逆に、処理の完了を待たずに、処理を投げたら次の処理を実行して、いくのが**ノンブロッキングI/O**です。

処理が文字通り、ブロックされている形になっております。

## 第2選 スレッドモデルとイベントループモデル

**Node.jsは「イベントループモデル」**

**イベントループモデルのイメージは、一人の人が複数の人を相手するイメージ**です。
逆に、**スレッドモデルのイメージは、複数の人がいたら、複数人で相手をして一人の負担を減らしていくイメージ**です。

イベントループモデルは、複数のアクセスがあっても、スレッド数は増えません。
スレッド数が増えないので、CPUはあまり食わずに、動作させることができます。

スレッドモデルは、複数のアクセスがあったら、スレッドを複製して処理にあてていきます。
そのため、スレッドを複製した分CPUを食いつぶしてしまいます。

## 第3選 イベントドリブン

**Node.jsは「イベントドリブン」**

イベントドリブン(イベント駆動型)とは、あるものが実行した操作(イベント)に対応した処理を行うプログラムの形式です。
ユーザが操作をしていないときは、常に待機状態でプログラムが待っており、対応するイベントが発火したタイミングで初めて実行されるようになります。
そのため、必要以上にユーザを拘束しないので、マルチタスクOSとの親和性が高いです。

逆に、マルチタスク性をあまり意識する必要がないことが多いときは、逐次実行のプログラミングが採用されます。

## 第4選 npmをしっかりと利用しよう

**Node.jsは「npm」を使おう**

npmはNode.jsのパッケージ管理ツールです。
パッケージ管理ツールを使うことで、自分が欲しいライブラリの導入や削除を簡易にしたり、パッケージ同士の依存関係を自分が意識せずに解決してくれます。

[npmの公式サイト](https://www.npmjs.com/)

ここからパッケージを探せます。

## まとめ

Node.jsの特性一覧

- ノンブロッキングI/O
- イベントループモデル
- イベントドリブン

※ npmを利用することで、様々なモジュールを手軽に使うことができる

PHPやRubyを過去触っていて、Node.jsを触りだしたら、Node.jsの特性の3つに中々慣れないと思います。
とくに、思ったようにコーディングができず、「なぜか処理飛ばされる！！」ことや、「思ったように変数に値が入ってない・・」ことがありました・・・
上記の特性を理解することで、素早くそういった問題に気づくようになると思うので、触る前にふわっとでも理解しておきましょう！
Windows環境でflake8のチェック内容を調整する（Windows7, Python3）

## はじめに
Python3の構文チェックでflake8を使うことにしたけど、
一行あたりの文字数のチェックが、デフォルトだと短い。(79文字)

ので、チェック内容の変更方法を記録しときます。


## 設定ファイルを作成/更新する
OSのユーザーごとに設定ファイル作りたい。
何も意識しないでPythonインストールしただけだと、設定ファイルは作られないっぽいので、ユーザーディレクトリの直下に'.flake8'ファイルを作成する。

今回は最大文字数チェックの文字数を増やしたかったので、以下のようにした。(100文字までOKに)

``` :~\.flake8
[flake8]
max-line-length = 100
```

## 結果確認
最大文字数のチェックを変えられた。

```
>flake8 .\hoge.py
hoge.py:69:101: E501 line too long (114 > 100 characters)
```

## 参考
[Configuring Flake8]http://flake8.pycqa.org/en/latest/user/configuration.html)

その他のチェック内容とかも、いろいろ書いててくれてるかも（未確認）
技術書読書会 #10 Infrastructure as Code

# 技術書読書会 #10 Infrastructure as Code

## 読書会とは
「読書とは、自分で考える代わりに他のだれかにものを考えてもらうことである。」と、ドイツの哲学者が言っていました。

なんかぐっと来ました。

技術書を最後まで読み切る事は意外と大変です。一人なら無理だけどみんなの力があればできるかも・・・。
そんなことを誰が思たのか、ともあれそんな気持ちに賛同したメンバーが１冊の技術書を読み込むという結構ハードルの高いことにチャレンジをしていきます。

## 技術書読書会の進め方
eXtreme Readingの方式で進めていきます。

### 実施方法
以下の流れで読書をしていきます。

```
1. 0分～5分間で、今回読み進める章/節を発表する
2. 15分～30分間で、読書
3. 5分～10分間で、ディスカッション
4. 1～3を時間分繰り返す
5. まとめ
```

今回の読書会は、所要時間30分で以下の配分で行いました。

```
1. 5分間で、今回読み進める章/節を発表する
2. 15分間、読書
3. 5分間、ディスカッション
4. 10分間、まとめ
```

### 利点
eXtreme Readingの利点です。

- 事前の準備がいらない。
- ディカッションをすることにより理解を深める事ができる。参加者全体の理解度の底上げが期待できる。
- 時間を区切って進行するので、読書の進捗が一定となり本の読み終わり時期を予測することができる
- みんなでやればなんとかなる


## 今回読む書籍
[Infrastructure as Code ―クラウドにおけるサーバ管理の原則とプラクティス](
https://www.amazon.co.jp/Infrastructure-Code-%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%90%E7%AE%A1%E7%90%86%E3%81%AE%E5%8E%9F%E5%89%87%E3%81%A8%E3%83%97%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%82%B9-Kief-Morris/dp/4873117968/ref=sr_1_1?ie=UTF8&qid=1491455639&sr=8-1&keywords=Infrastructure+as+Code)

## 参加人数
6人

## 所要時間
30分

## 進捗
4.4.1- 4.5

## ディスカッション

### 4.4.1 Rubyアプリケーション管理がコンテナによってどのように変わるか？
浜　環境ごとパッケージングできるので依存関係を解消できるのでいいよね。ってことですよね。

### 4.4.2.1 仮想マシンとコンテナの違い
岡　ディストリビューション違いならいいよ。
浜　カーネルとディストリビューションの間あたりにレイヤーがあるというか

### 4.4.3 仮想マシンよりもコンテナ
岡　これ結構好きなんですけど
浜　コンテナは起動がはやいですよね
岡　一つ一つのプロセスでコンテナを分けましょう
浜　プロセス単位というのはちょっと微妙なのかな
岡　ようは、できるだけ小さくするというイメージなのかな
浜　適切な粒度があるのかなと
浜　スケーリングしたい単位で分ける。というのはありかと
浜　コンテナは管理がめんどくさい。

### 4.4.4 コンテナの実行
岡　これ使ったことない。コンテナオーケストレーションシステム
浜　比較的最近にkubanates使いました。
浜　ロギングとかを独自で実装していると、結構複数のサーバーが絡んでくるとごちゃごちゃする。という傾向がある。Dockerは、ロギングサービスがあるので比較的楽。GKEはロギングがすごく楽。サービス化されているので、AWSでkubanatesを利用するとそこまで楽じゃなかったような記憶があります。

### 4.4.5.1 コンテナの分離とセキュリティー
浜　コンテナ使っているから安心というわけではない
飯　のらコンテナを使うとそれに脆弱性が入っている可能性がある

### 4.5 まとめ
飯　結果、みんなで頑張りながらVCSを利用してバージョン管理しましょう。ということですね。
岡　バージョン管理、いっぱい出るからね。

## 気づき

## まとめ
本日、4章が終わりました。1部は残すところ5章のみ。まだまだ継続できそうです。
WEB技術で仕事したいのにWEB技術を全然知らなかった話

# はじめに
ちくしょう！転職だ！
と思ったとき、どこから手をつけていいの？となりました。
特にエンジニアとしてのスキルで何か尖ったものがあるどころか見習いレベルだったので、「最低限知っておくべきこと」を知らずに大変でした。

そこで、やっといたら転職準備になりそうなところをメモります。
（プログラマの情報共有サイトに書く話なのか微妙ですが・・・）

※大前提は、やらなきゃいけないからやるのではなく、**「興味があるからやってた」って方が絶対いいです。**
もちろんその方がハッピーですが、私のように[運命に導かれてエンジニアになった人](http://qiita.com/VTRyo/items/9f1eb5844d163adc1209 "運命に導かれてエンジニアになった人")もいるかもしれないので、このような記事を書いてしまいます。

# 読者想定
* 未経験からエンジニアになったばかりの人
* 第二新卒くらいの人
* WEB企業で働きたいと漠然と思ってる人
 
# WEB企業に行きたいな
前職はSIerの下請け・孫請けとしてExcelにスクショ貼ったり、サーバ一台一台を手動で構築したりと大忙しだったのですが、1年ほど業務をしていて思ったのは「世には自動化なるものがあるのになぜこんなことを・・・」でした。

そしてWEB系企業はスピード重視！比較的自由！インターネットが使える！というのは聞いていたので転職はWEBにしよーと決めました。

## 誤算
インフラエンジニアの求人を見ると大抵「LAMP環境」「構成管理ツール」とか書いてあります。インフラ的な要素以外だと「Git」とかよく見ました。
ちなみに私は全部、業務で使ったことがなかったので焦りましたし、どのようなものか『概念として知っている』だけだったので絶望的に無知でした。

### 経験が浅いので、とにかく手広く知っておけばよかった
WEB系なので、当たり前ですが絶対WEBサーバがあります。当たり前だろ！と思うかもしれませんが、じゃあWEBサーバってなんだよって聞かれたら答えられなかったんですよね。

後になって求人に「LAMP環境」と書いている意味がそこでやっとわかる、というレベル。
自動化がトレンド（というか当たり前）なのにどうやって実現するかもわかっていないという悲惨な現実。

闇雲にもエンジニアとか名乗ってた自分が恥ずかしくていっそ辞めたくもなりましたが、同時に「知らないことが多くて面白い」とも思いました。

## LAMP
ネット上にゴロゴロ構築の仕方は書いています。そもそも単語自体を知らないと調べようがなかったりするので、これを機会に自分のPCに立ててみましょう。
大抵一発目はうまくいかない上に、そもそも自分のレベルが低いので取り組むだけでレベルがあがってしまうのです。
なのでやりましょう今すぐ。やってみて「全然わからねえ」という認識を持つほうが大事でした。

## 自動化
私の場合、非効率的な作業に疑問を覚えたパターンだったので、今後はどんどんこの手を知識を増やしていきたいと思ってました。
仮想マシンをコードで書いたり（最初はかけないっす）、ミドルウェアをコードで書いたり（最初はかけないっす）、テストが自動でされていたりしますよね。
概念は知っていても、じゃあ書いてよと言われても書けないっす。書こうとしたことがないから。

なのでまずは仮想マシンを爆速で立てようと頑張ってみましょう。手を動かす以外に道がないとわかりました。

## Git
[サルでもわかるGit入門](http://www.backlog.jp/git-guide/)
さっぱりなんのことか理解できない時期がありサル以下だった思い出があります。とはいえわかれば超便利ですねこれ。
私がお世話になった組織はどこもバージョン管理は`_yyyymmdd`でやってたので、コマンドを叩くだけでそんなことができるなんて知る由もなかったです。
知らないって損、とかいうレベルじゃないです。
あまりの便利さに興味があるないとか関係なしにもっと知りたくなっていました。

## そもそも基礎は知ってるか問題
Excel職人してたのでVBAは書けたものの、サーバやネットワークは取得した資格分と実務でかいつまんだ程度にとどまっていました。
当然ながら単語の意味を知っているだけでは不十分で、普段どんなところに気を配って業務をしているかは何回か面接すれば相手にはわかります。

新しいことばかりに目が行きがちですが、立ち止まって自分が携わっていた業務の概要から詳細まで話せるのか見直すのも面白いです。
サーバは何台構成だったか、何製の機器を使っていたか、深掘りするのも勉強になりました。

## 見習いであることを忘れない
結局、私はWEB企業に転職しました。世界の広さに驚きつつ、楽しい世界に来たと思っています。
スキル的には依然ガバガバで、焦りはずっと消えないと思います。
ただ「転職だ！」という動機で行動し始めたとしても、そのうち結果はじわじわついてくると思っていたので、自分にできるかどうかという不安はなかったです。

「取り組んでわかることがある」を忘れずにこれからも前に進んでいきます。
GoogleDriveのファイルをドメインが異なるオーナー権限の変更について

#GoogleDriveではドメインが異なるアカウントへのオーナー権限の譲渡ができない


自身がオーナーのファイルをドメインが異なるアカウントに共有しようとすると、

![00.png](https://qiita-image-store.s3.amazonaws.com/0/178201/3e52416a-3408-3abb-5cb3-0e49102c7eda.png)
![01.png](https://qiita-image-store.s3.amazonaws.com/0/178201/18f4b378-66de-94f2-9227-3dcfd9d45308.png)
![02.png](https://qiita-image-store.s3.amazonaws.com/0/178201/cfbf676d-f864-2415-52d6-be4040d5ab30.png)

**「オーナー権限を xxx@sample.zzz に譲渡できません。
オーナー権限は、現在のオーナーと同じドメイン内の他のユーザーのみに譲渡できます。」**
と言われてしまい、オーナー権限の譲渡は行えない。

さすが、Googleセキュリティがしっかりしてます。


#解決法をgoogleに問い合わせたところ

>「**オーナー権限の譲渡はできません**。
>オーナーの譲渡はできませんが、ローカルにデータをバックアップし、
>そのデータをGoogleDriveにアップロードすることはできる」そうです。

**オーナー権限の譲渡はできません**
ということなので、バックアップの方法をまとめておきます。

#ファイルのバックアップ方法
0.まずgoogleChromeで[GoogleDrive](https://drive.google.com/)を開きます。
![000.png](https://qiita-image-store.s3.amazonaws.com/0/178201/e72abe8f-0e14-1958-6194-0bb38e9637fc.png)


1.ファイルをダウンロード
フォルダ・ファイルを右クリックし、ダウンロードすると、zipファイルで保存されます。
![03.png](https://qiita-image-store.s3.amazonaws.com/0/178201/5c1f7b8b-87f9-c213-a95e-d7cf640e0374.png)

2.ファイルの解凍
zipファイルを展開してください
ドキュメントやスプレッドシートなどの拡張子は、
マイクロソフトオフィスの形式`.docx` `.xlsx` `.pptx`で保存されます。
![04.png](https://qiita-image-store.s3.amazonaws.com/0/178201/210deea3-3af3-01bc-8c39-c7c9c44a4dff.png)

3.譲り受けたかったオーナーでファイルをアップロード
Chromeをお使いの場合は、ドラッグ・アンド・ドロップで復元可能です。
![05.png](https://qiita-image-store.s3.amazonaws.com/0/178201/e1f8fdea-592c-5d13-b3ba-223f8d488bbc.png)

以上です。

#この方法のデメリット
マイクロソフトの形式に変換されているため、ドキュメント、スプレッドシート、スライドのようにそのまま開くことができません。下記のようになります。
![06.png](https://qiita-image-store.s3.amazonaws.com/0/178201/78f5968c-5d88-9c59-d179-92c8d6a3c3c1.png)
こんな感じになります

#他の方法について
マイクロソフトオフィスの形式にしない方法は[Copy Folder](https://i-bitzedge.com/tips/how-to-copy-folders-on-google-drive)をご活用ください。
Copy Folderを使うことで、ローカルの容量を使うこと無くバックアップが取ることができます。
matplotlibのヒストグラムで分割線を表示

- 以前は(おそらく)ヒストグラムを表示させたらbarの境目の線(分割線)が出ていた
- hist関数のオプションに `ec='black'` を追加してやると良い


Python 3.6.0, matplotlib 2.0.0 を使用

Jupyter-notebookで動作確認


## デフォルトではヒストグラムそれぞれのbarの分割がされない

例えば下記コードだとそれぞれのbarの境目が出てこない

```py
% matplotlib inline
import numpy as np
import matplotlib.pyplot as plt

plt.hist(np.random.randn(100))
```

![hist1.png](https://qiita-image-store.s3.amazonaws.com/0/44492/d093a393-4091-9216-e1b4-92bd560746b7.png)

<br>

matplotlib2.0.0から変更になったのかな・・・

documentを読んでもオプションにそれらしきものは見当たらず

ので、調べてみると下記がヒット

[python - Cannot get histogram to show separated bins with vertical lines - Stack Overflow](http://stackoverflow.com/questions/42542252/cannot-get-histogram-to-show-separated-bins-with-vertical-lines)



下記コードのように、pyplotのhist関数に `ec='black'` を加えてやればよい

```python
% matplotlib inline
import numpy as np
import matplotlib.pyplot as plt

plt.hist(np.random.randn(100), ec='black')
```

![hist2.png](https://qiita-image-store.s3.amazonaws.com/0/44492/02b6b3ad-a5f7-c4a5-e75a-c5eac292590d.png)

- もちろん、`ec='red'` など別の色でも指定できるので色々と試してみると良い
- ecは edgecolor の略のよう

<br>

(seaborn使えと言われたら・・・)
JMeter で JDBC 接続でハマったメモ

JMeter は JDBC 接続を使って SQL を実行し DBMS の負荷テストもできるので試した。
１箇所以外はすんなり。ハマった１箇所だけメモしておく。

JDBC Connection Configuration の Connection Validation By Pool はデフォルトで有効で、 Validation に使用する SQL が次のように入力されている。

> SELECT 1

![スクリーンショット 2017-04-27 10.53.50.png](https://qiita-image-store.s3.amazonaws.com/0/31769/d065c4d6-293d-57b4-da12-ab83ab0b9a2f.png)

これに気づかず、せっせと JDBC Request を追加して実行すると次のエラーに見舞われる。

> Cannot create PoolableConnectionFactory (DB2 SQL Error: SQLCODE=-104, SQLSTATE=42601, SQLERRMC=END-OF-STATEMENT;SELECT 1;<table_expr>, DRIVER=4.9.78)

これが出たら、上の図の Test While Idle を False にするか、DBMS に応じて Validation Query を編集する必要がある。

stack overflow の次の Q&A に記載があった。

[DBCP - validationQuery for different Databases](http://stackoverflow.com/questions/10684244/dbcp-validationquery-for-different-databases)

リンク切れ時の備忘録として転記しておく。

>Database validationQuery notes
>
> hsqldb - select 1 from INFORMATION_SCHEMA.SYSTEM_USERS
> Oracle - select 1 from dual
> DB2 - select 1 from sysibm.sysdummy1
> mysql - select 1
> microsoft SQL Server - select 1 (tested on SQL-Server 9.0, 10.5 [2008])
> postgresql - select 1
> ingres - select 1
> derby - values 1
> H2 - select 1
> Firebird - select 1 from rdb$database

この回答を書いた人のブログへのリンクもあったのでメモ。

[validation query for various databases.](http://vondrnotes.blogspot.com/2012/05/validationquery-for-different-databases.html)

１時間以上ロス・・・は痛い。 orz
テキストファイルの編集不要、WebStormのEditorConfig設定機能がスゴイ


複数人のコードスタイルを統一するには「[EditorConfig](http://editorconfig.org/)」が便利で、記事「[エディター間のインデントや改行コードを統一する為のEditorConfigの設定方法](http://qiita.com/tonkotsuboy_com/items/b969289e99781d476da9)」にて解説しました。

記事にある通り、通常は`.editorconfig`というテキストファイルを更新して設定します。しかし、[WebStorm](https://www.jetbrains.com/webstorm/)や[IntelliJ IDEA](https://www.jetbrains.com/idea/)を使うと、**テキストのファイルを直接編集することなくUI上からコードスタイルを設定し、`.editorconfig`を出力できます**。コードスタイルがどのように変化するかを目視しながら設定できるので、直感的な作業が可能です。

# EditorConfigの設定

例としてHTMLコードのインデントをスペース2つに設定してみましょう。

[Code Style]→[HTML]より、[Use tab character]のチェックを外し、[Indent]を2に設定します。

![image](https://qiita-image-store.s3.amazonaws.com/0/67884/aa1ce300-0721-b9a9-13b4-4d538fc33ccc.png)

他にも、JavaScript、CSS、TypeScript等、多くのコードスタイルを設定できます。

## .editorconfigファイルの書き出し
設定が完了したら、設定内容を`.editorconfig`ファイルに書き出します。この**`.editorconfig`ファイルをGit等で共有することで、各開発者の各エディターのコードスタイルを統一できる**のです。

[Code Style]画面より、[EditorConfig]の箇所にある[Export]をクリックします。

![image](https://qiita-image-store.s3.amazonaws.com/0/67884/cffdf281-0a64-f444-f011-b622304b4624.png)

次のような`.editorconfig`ファイルが書き出されます。

```
[*]
charset=utf-8
end_of_line=lf
insert_final_newline=false
indent_style=space
indent_size=4

[{*.jhm,*.xslt,*.xul,*.rng,*.xsl,*.xsd,*.ant,*.svg,*.tld,*.fxml,*.jrxml,*.xml,*.jnlp,*.wsdl}]
indent_style=space
indent_size=2

[{.babelrc,.stylelintrc,.eslintrc,jest.config,*.json,*.jsb3,*.jsb2,*.bowerrc}]
indent_style=space
indent_size=2
```

# EditorConfigの設定をコードに反映
[Preferences]→[Editor]→[Code Style]より、[Enable Editor Config support]にチェックが入っていることを確認してください。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/52a759e2-9d29-50de-1f8a-e3f9588cd94d.png)

コードスタイルを反映させるには、該当ファイルを選択した状態で[Code]→[Reformat Code]を実行します。キーボードショートカットを使うと便利です(macOSなら[alt]+[command]+[L])。なお、WebStormにもコードフォーマット機能がありますが、EditorConfigを有効にした場合、EditorConfigの設定が優先されます。

![codeformat3.gif](https://qiita-image-store.s3.amazonaws.com/0/67884/1a22ba83-8c8d-f429-a67d-aa53b38b72fa.gif)

また、フォルダを選択した状態で[Code]→[Reformat Code]を実行することで、フォルダ内の全ファイルに対して一括でコードスタイルを設定できます。

# WebStorm(IntelliJ IDEA)で快適なEditorConfigライフを
筆者はこれまでEditorConfigの設定を変更する際に直接テキストファイルを編集してきましたが、WebStorm(IntelliJ IDEA)のこの機能のおかげで直感的に設定を行うことができるようになり、設定時間が短縮できました。**何より、HTMLではこのコードスタイル、JavaScriptではこのコードスタイル、というように、言語毎に設定を分けたい場合に、いちいちテキストファイルで分岐条件を書くよりも、かなり楽です**。是非使ってみてください。
図 > {状態、イベント、経過時間条件} を組み合わせた状態変化 (時系列)

```txt:動作環境
Windows 8.1 Pro (64bit)
Google Chrome バージョン 57.0.2987.133
```

- 状態
- イベント
- 経過時間の条件

上記３つを含めた時系列の状態変化の図はどういうのがいいか。

UMLで良さそうな図は見当たらなかった。

### draw.io使用

[draw.io](https://www.draw.io/)で描いてみた。

![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/a96c72bf-19a7-c57b-5799-86a19207100c.png)

分岐が増えていくと破たんする。
図の変更が面倒。

### 正規表現使用 v0.1

https://www.debuggex.com/#cheatsheet
で正規表現表示。

```
(Normal)(Proc1[N min])([for N<10]Proc2-1[P min]([for P<5]Proc3-1|[for 5<=P]Proc3-2)|[for 10<=N<20]Proc2-2[Q min]([for Q<7]Proc4-1|[for 7<=Q]Proc4-2)|[for 20<=N]Proc2-3[R min])
```

![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/4c5cbbf1-61d4-2834-224f-3ebd73546e1d.png)


- 分岐は分かりやすい
- キーボード入力だけ
- イベントの開始と終了が不明瞭
- 分岐3つになると見にくい
- mindmupとの違いは右側で分岐を減らすことができるかどうか

### 正規表現使用 v0.2

```
(Normal)(Proc1|[N min])([N<10](Proc2-1|[P min])([P<5]Proc3-1|[5<=P]Proc3-2)|[10<=N<20](Proc2-2|[Q min])([Q<7]Proc4-1|[7<=Q]Proc4-2)|[20<=N](Proc2-3|[R min]))
```


![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/fcc01dcc-8590-93c4-f4ad-be7b9859322f.png)

### タイミングチャート 
(追記 2017/04/28)

関連: http://qiita.com/7of9/items/4febc353f37ee2cd262b

https://rawgit.com/osamutake/tchart-coffee/master/bin/editor-offline.html

```
U  ====SPL====X=BKU=X=SPL============
S  ===NRM======================

U  ====SPL====X=BKU====X=SPL=========
S  ===NRM=========X=SDN1===X=DWN==X=BOOT==

U  ====SPL====X=BKU===============
S  ===NRM=========X=SDN1===X=DWN======

U  =SPL====X=BKU=X=SPL===============
S  =X[=BOOT=X=NRM=X=SDN2==X=]DWN==XBOOT===X=====

U  =SPL========X=BKU=X=SPL===========
S  =X=BOOT=X=NRM=====X=SDN2==X=DWN==X=BOOT==X=

U  =SPL=============X=BKU=X=SPL======
S  =X=BOOT=X=NRM==========X=SDN1==X=DWN==X

```

![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/4c8fc02e-a3cb-3621-5b12-48fa486333d2.png)



- 利点
  - テキストで変更が容易
  - ２つのシステムのタイミングをだいたいつかめる
  - コピペが簡単
  - コンパクトに表示
- 欠点
  - `経過時間の条件`が数値的に見えにくい
PYNQ-Z1を始めます

# PYNQ-Z1を買いました。
機械学習を学び始めるにあたり、FPGAにも踏み込んどくかと、
会社の先輩？上司？の勧めでDIGILENTのPYNQ-Z1を買いました。
xilinxのZynqが載ってます。Python Productivity for ZynqでPYNQ。

PYNQ-Z1
https://japan.xilinx.com/products/boards-and-kits/1-hydd4z.html

読み方はぴんくぜっとわん？ or ぴんくぜっといち？

この記事では簡単なセットアップくらいを範囲にするつもりです。

# 早速セットアップ！
詳細は以下のページを見ながらやれば問題ないかと。
ここでは自分がひかかったことを書きます。

PYNQ-Z1を購入して動かしてみる
http://qiita.com/takushi-m@github/items/54e8c654ae74d786550d
pynq-z1 購入から動作確認まで
http://qiita.com/HirofumiTamori/items/dacb6b42ce6218b8c6a2
FPGAの部屋
http://marsee101.blog19.fc2.com/blog-entry-3596.html

## microSDカードはFAT32でフォーマット

当たり前かもしれませんが、よくわからないフォーマットのままイメージを焼きましたが、起動しませんでした。

## USBシリアルで接続するためにドライバをインストール

IPアドレスが何になるかわからなかったので初めはUSBシリアルで接続しました。
USBシリアルなので当たり前のようにドライバが必要です。（標準ドライバはありません。）
色々ありますが、下記のAdept 2を入れておけば問題なさそうです。
まだ何に使うかわかりませんが、PYNQで使えそうなツールも色々インストールされます。
https://reference.digilentinc.com/reference/software/adept/start?redirect=1#software_downloads
USBシリアルのドライバだけ入れるのであれば、FTDIのものを入れれば大丈夫そうです。
（これでRaspberry PiにもUSBシリアル接続できるとのこと。）

## デフォルトではteratermはCOM4までしか使えない。

なのでiniファイルでMaxComPort=8とか設定しておきます。

## pynqのアップデートは2回やる

ちゃんと調べていませんが、1回だけだとアップデートされません。
Pynq repoをcloneしておわり？
もう一回やるとちゃんとアップデートされます。

## パスワードを変える

OSのパスワードはlinuxなのでpasswordコマンドで変更できます。
xilinxとrootを変えましょう。どちらも初期パスワードはxilinxです。
またjupyter notebookのパスワードも変えたほうが良いです。
jupyterでterminalを開くとrootでログインした状態になりますので。

jupyterで以下のコマンドを実行してハッシュ値を取得。
（コマンドラインでやってもだめです。）

```bash
from notebook.auth import passwd;passwd()
```
パスワードの入力を2回聞かれるので入力するとハッシュ値が出てきます。
これを`/root/.jupyter/jupyter_notebook_config.py`の一番下に書きます。
元々のパスワードも載っているのでコメントアウトしておきます。
しなくてもいいですが。

```py:jupyter_notebook_config.py
#c.NotebookApp.password = 'sha1:46c5ef4fa52f:ee46dad5008c6270a52f6272828a51b16336b492' # デフォルトパスワード(xilinx)
c.NotebookApp.password = '出てきた文字列をここにコピペ'
```

つづく
WPF TreeViewを使ってみた

WPFでTreeViewが使いたくてググったものを試してみたら少しハマった

#作るもの
こんな感じのものを作ってみる
![2017-04-27_09h39_04.jpg](https://qiita-image-store.s3.amazonaws.com/0/145898/d1086424-35ff-d772-238c-fec513712aa3.jpeg)

#作ってみる
MVVM的に作ってみる
##Model
まずはModelを作る
NameプロパティとListで自身を持てるプロパティを作っとく

```csharp
    public class Person
    {
        public string Name { get; set; }
        public List<Person> Child { get; set; }
    }
```

##ViewModel
そんでViewModel
ここではテスト用にコンストラクタでデータを入れている
実際はModelのプロパティだけ定義しといてデータは別で入れたりすると思う

```csharp
    public class VM_Person
    {
        public List<Person> _person { get; set; }

        public VM_Person()
        {
            _person = new List<Person>()
            {
                new Person()
                {
                    Name = "test1",
                    Child = new List<Person>()
                    {
                        new Person() { Name = "test1-1" },
                        new Person() { Name = "test1-2" },
                        new Person() { Name = "test1-3" },
                    }
                },
                new Person()
                {
                    Name = "test2",
                    Child = new List<Person>()
                    {
                        new Person() { Name = "test2-1" },
                        new Person()
                        {
                            Name = "test2-2",
                            Child = new List<Person>()
                            {
                                new Person() { Name = "test2-2-1" },
                                new Person() { Name = "test2-2-2" }
                            }
                        }
                    }
                }
            };
        }
    }
```

実はここでハマった
この_personプロパティをListにしていなかった
✕　`public Person _person { get; set; }`
○　`public List<Person> _person { get; set; }`
TreeViewはItemSourceにコレクションを指定するから当然なんだけど...

##View
最後にView
(TreeView以外は省略)

```xml
        <TreeView x:Name="TreeView" ItemsSource="{Binding _person}">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate DataType= "local:Person" ItemsSource="{Binding Child}">
                    <TextBlock Text="{Binding Name}"/>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
```

<dl>
<dt>TreeView<dt>
<dd>ItemSource　→　ViewModelのプロパティ( _person )<dd>

<dt>HierarchicalDataTemplate<dt>
<dd>DataType　→　扱う型を指定( Person )<dd>
<dd>ItemSource　→　子要素のプロパティ( Child )<dd>
<dt>TextBlock<dt>
<dd>Text　→　Personが持つプロパティ( Name )<dd>
<dl>
ちなみにHierarchicalDataTemplate 内で指定したTextBlock は他のコントロールでもOK(但し1つのみ設定可能)で、
例えばCheckBoxにするとこんな感じになる
`<CheckBox Content="{Binding Name}"/>`
![2017-04-27_10h18_31.jpg](https://qiita-image-store.s3.amazonaws.com/0/145898/b8be48a2-4a8d-9499-8713-2a121a1b3c31.jpeg)

#まとめ
少しハマったけどTreeViewの実装自体は結構簡単そう
要素の取得方法とかはまだ分かってない...
調べてまとめようと思う

##参考
[かずきのBlog@hatena](http://blog.okazuki.jp/entry/20130409/1365479109)
CSSで画像を加工する filter プロパティの使い方&レナ画像での加工例


## filter プロパティとは
CSSで、画像を加工するプロパティです。

### Can I use...
主要ブラウザのうちIEは非サポート、Edgeは url のみ非サポートです。

### 対象要素
- img
- background-image

### プロパティで加工出来る要素

| プロパティ名 | 変わる要素 | 設定する値 | 初期値 |
|:-----------|-------------|--------------|--------------|
| blur|ぼかし | 0 ~ 10px    | 0px |
| drop-shadow|影|box-shadowと同じ|box-shadowと同じ|
| contrast|コントラスト|0 ~ 100%|100%|
| grayscale|グレイスケール（モノクロ化）|0 ~ 100%|0%|
| sepia| セピア|0 ~ 100%|0%|
| opacity|透明度|0 ~ 100%|100%|
| saturate|彩度|0 ~ 100%|100%|
| brightness |輝度（明るさ）|0 ~ 100%|100%|
| hue-rotate|色相回転|0 ~ 360deg|0deg|
| invert|色調反転|0 ~ 100%|0%|


### シンタックス
```css:style.css
img {
  filter: contrast(175%); 
}

/* 複数指定 */
img {
  filter
}

/* 全要素への指定 */ 
img {
  filter: inherit;
  filter: initial;
  filter: unset;
}
```

## 実例

レナ画像の加工例を[gist](https://gist.github.com/DesignChips/51d63559634171b2da0c6bc318a6679e)で作りました。

[githack](https://gist.githack.com/DesignChips/51d63559634171b2da0c6bc318a6679e/raw/2c4fe9e52a9cf13115f14f189391ff788ad93c4b/index.html)で確認できます。

![Lenna.png](https://qiita-image-store.s3.amazonaws.com/0/130741/c34cf5c2-1e8e-a156-8a35-ffa64967fba9.png "Lenna.png")
CSS(SASS)でスライドバー(input[type="range"])をアレンジする

# スライドバーをアレンジしてみた

HTMLでスライドバーを使ったときに、デフォルトだと不恰好だったのでアレンジしてみました。
※GoogleCromeなどのWebKit系が対象

## 実際にやってみた

### before

![image](https://qiita-image-store.s3.amazonaws.com/0/95875/69d14758-48af-3d06-834c-421007fc7d5d.png)

### after

![image](https://qiita-image-store.s3.amazonaws.com/0/95875/220b6907-5b31-fc09-f45a-608234b1b84a.png)

### ソースコード

``` renge.html
<div class="time-select-slider">
  <input class="slider" type="range" min="0" max="86400">
</div>

```

``` style.scss
.time-select-slider {
  // スライドバー自体の横幅
  width: 810px;
  .slider {
    -webkit-appearance: none;
    margin: 14px 0;
    width: 100%;
    &:focus {
      outline: none;
      &::-webkit-slider-runnable-track {
        background: #3f51b5;
      }
    }
    // スライドバーの横軸
    &::-webkit-slider-runnable-track {
      cursor: pointer;
      background: #3f51b5;
      border-radius: 1.3px;
      height: 8px;
      width: 100%;
    }
    // スライドバーのつまみ
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      background: #3f51b5;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      height: 36px;
      margin-top: -14px;
      width: 20px;
    }
  }
}

```

## さいごに

普段からSASSを使っているのでSCSSのコードを書きましたが、LESSやStylusをお使いの方は、適宜読み替えていただければと思います。
もっと立体感がほしいかたは、box-shadowなどを使ってもっとかっこよくしてやりましょう！
Pythonでカーソル位置の取得

# 導入
Facebookがカーソル位置の情報を集めていると、いつだか耳にしました。調べてみたら2013年には話題になっていたようです。[^1]
[^1]: [Facebookが「ユーザーが動かすカーソル」の行動データを収集する予定](http://gigazine.net/news/20131031-facebook-tracks-cursor/)

というわけでPythonでカーソル位置のデータを取得しましょう。

# 環境
OSはwindows10、Pythonは3.5.2を利用しました。

# 利用モジュール
カーソル位置を取得する方法はいくつかあるようですが、インストールの容易さなどからPyAutoGUIを選択しました。
- [公式ドキュメント](https://pyautogui.readthedocs.io/en/latest/index.html#)
- [日本語でまとめてる記事](http://whitecat-student.hatenablog.com/entry/2016/06/27/010812)

キー操作やクリック操作なども実装できるようでワクワクしますが、今回は触れません。
pipを使ってインストールしましょう。

```bash
pip install pyautogui
```
OSがmacだとpyobjc-coreとpyobjcも同時にインストールする必要があるそうです。

# カーソル位置取得方法
```pyautogui.position``` 関数で、カーソルが位置するx座標とy座標を取得します。

```py3
>>> pyautogui.position()
(255, 939)
```
(0, 0)が画面の一番左上、(画面サイズ横, 画面サイズ縦)が画面の一番右下を表します。


# 実行してみる
今回は0.1秒おきに1分間データを取得します。
あとで使いたいので、```pyautogui.size```でウインドウサイズも取得しておきます。

```py3:get_cursor.py
# -*- coding: utf-8 -*-
import pyautogui
import time
from datetime import datetime

def get_now():
    now = datetime.now().strftime("%Y/%m/%d %H:%M:%S")
    return now

def get_cursor_loop(loop_second):
    """
    0.1秒ずつ、指定秒数分カーソル位置を取得
    
    args
    ----
    loop_second:int
    データを取得する秒数
    """
    times = []
    positions = []
    
    for _ in range(0, loop_second*10):
        # 時刻とカーソル位置の取得
        now = get_now()
        x, y = pyautogui.position()
        
        # リストに情報を追加
        times.append(now)
        positions.append([x, y])
        
        # sleep
        time.sleep(0.1)

    return times, positions

def get_window_size():
    window_size = pyautogui.size()
    return window_size

if __name__ == '__main__':
    times, positions = get_cursor_loop(60)
    window_size = get_window_size()
```

データは取れたのでプロットしてみましょう。
今回はパッと見たかったので```seaborn.jointplot```を使っています。

```py3:plot_cursor.py
import numpy as np
import pandas as pd
import seaborn as sns

data = np.array(positions)
df = pd.DataFrame(data, columns=['x', 'y'])

# (0,0)座標が画面の左上なのでy軸のみ順番を反転
sns.jointplot(data=df, x='x', y='y', xlim=(0, window_size[0]), ylim=(window_size[1], 0))
```
![joint_plot.png](https://qiita-image-store.s3.amazonaws.com/0/132984/5d32c3dd-6b16-b1ae-4bd9-439183249598.png)

左下の方に固まっていますね。この記事を書きながらデータ取ったので、エディタがある左側に寄ってる気がします。

# おわりに
簡単にデータを集めることができました。データの使い道はいろいろありそうですが、例えばサンプルデータを作りたいときに使えるかもしれませんね。（分布もへったくれもないですが）
CircleCI 2.0 では Docker ビルドキャッシュが効く

2通りのやり方がある。pull/cache-from を使う方法と、save/load を使う方法。
手元のプロジェクトだと前者の方がだいぶ速い。

# 1. pull/cache-from を使う方法

```yaml
version: 2
jobs:
  build:
    machine: true
    environment:
      - DOCKER_IMAGE_REPO: your-private-repository
    working_directory: ~/your-repo
    steps:
      - checkout
      - # ...必要に応じて ecr login など
      - run: docker pull $DOCKER_IMAGE_REPO:latest
      - run: docker build -t circleci --cache-from $DOCKER_IMAGE_REPO:latest .
      - run: docker tag circleci $DOCKER_IMAGE_REPO:latest
      - run: docker push $DOCKER_IMAGE_REPO:latest
```

既存の latest イメージを pull して、ビルド時に --cache-from として指定する。
このオプションは [Docker 1.13 で追加された](https://github.com/moby/moby/pull/26839) もので、以前は pull したイメージをキャッシュとして利用する手段が存在しなかった。
CircleCI 1.0 では Docker 1.10 の独自拡張版を利用していたが、CircleCI 2.0 で Docker のバージョンが新しくなったため可能となった。

![jobtalk_cf-recommend__102_-_CircleCI.png](https://qiita-image-store.s3.amazonaws.com/0/15173/6dcc89f4-f30a-f460-8b65-3fd9d573f147.png)

イメージサイズは 800 MB 程度だが、pull に 4 分かかる。0 からビルドするよりは速いので許容できる。

# 2. save/load を使う方法

`.circleci/config.yml` にこんな内容を書けば良い。

```yaml
version: 2
jobs:
  build:
    machine: true
    working_directory: ~/my-repo
    steps:
      - checkout
      # 1. キャッシュリストア
      - restore_cache:
          keys:
            - my-docker-cache-{{ .Branch }}
            - my-docker-cache
      # 2. キャッシュイメージ読み込み
      - run: if test -d ~/cache; then docker load -i ~/cache/image.tar; fi
      # 3. ビルド
      - run: docker build -t my-image .
      # 4. イメージ書き出し
      - run: mkdir -p ~/cache && docker save -o ~/cache/image.tar my-image $(docker history -q my-image | tail -n +2 | grep -v \<missing\> | tr '\n' ' ')
      # 5. キャッシュ保存
      - save_cache:
          key: my-docker-cache-{{ .Branch }}-{{ checksum "~/cache/image.tar" }}
          paths:
            - ~/cache
```

ビルド終了時に `docker save` でイメージの **全レイヤをまとめて** tar に保存し、CircleCI のキャッシュ機構を使って tar を保存する。
ビルド開始時に前回のキャッシュ (tar) をリストアし、`docker load` でロードしてやれば良い。

Docker 1.10 にはイメージのキャッシュをファイルからロードする手段が存在しない。そのため CircleCI 1.0 ではビルド間でキャッシュを持ち越せなかった。(参考: [CircleCI で Docker ビルドキャッシュができない理由](http://qiita.com/na-o-ys/items/d16fd4959d4aec405f4f))

また、Docker ビルド環境にキャッシュファイルを渡すため、 executor type は machine でなければいけない。

![jobtalk_cf-recommend__87_-_CircleCI.png](https://qiita-image-store.s3.amazonaws.com/0/15173/d2636b14-42a5-1165-d4e2-9a472922dcc1.png)

Restore(CircleCI Cache), docker load, docker save, Save(CircleCI Cache) それぞれで地味に時間がかかる。

# 備考

`docker save/load` を明示的に書かずにキャッシュ効かせる方法も用意されているが、2017/04 現在特別に申請された一部のリポジトリのみ有効であり、将来的には有料オプションになるかもしれないらしい。 (https://circleci.com/docs/2.0/docker-layer-caching/)

# 参考

- save/load の詳細: https://github.com/moby/moby/issues/20316#issuecomment-221289631
- 全レイヤをまとめて保存するワンライナー: https://github.com/moby/moby/issues/20316#issuecomment-221388885
Visual Studio / WPF > コントロール > ToolTip > マウスオーバーでヒントを表示

```txt:動作環境
Windows 7 Pro (32bit)
Microsoft Visual Studio 2017 Community
Sublime Text 2
```

@ WPF 4.5入門 by 大田一希さん
No.4994 / 9985
> ToolTipコントロールは、マウスをコントロール上に置いたときに補助的な情報を表示するためのコントロールです。

試してみた。

```xml:XAML
<Window x:Class="_170427_t0710_tooltip.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_170427_t0710_tooltip"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Content="Button" Height="50">
            <Button.ToolTip>
                <StackPanel>
                    <TextBlock Text="Are you sure?"/>
                    <TextBlock Text="If you press this button,"/>
                    <TextBlock Text="you'll lose everything what you've got by now."/>
                    <TextBlock Text="I'm telling you. Stop it."/>
                    <TextBlock Text="This is not an advice, but an order"/>
                    <TextBlock Text="as a friend"/>
                </StackPanel>
            </Button.ToolTip>
        </Button>                
    </Grid>
</Window>
```

![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/e27dba6d-6498-5e2b-5646-527c26089e0c.png)

### 検索用キーワード

- Hint
Visual Studio / WPF > コントロール > Popup > .IsOpen

```txt:動作環境
Windows 7 Pro (32bit)
Microsoft Visual Studio 2017 Community
Sublime Text 2
```

@ WPF 4.5入門 by 大田一希さん
No.4903 / 9985

Popupコントロールの例が紹介されている。
試してみた。

ボタンを押したらPopupを表示して、少ししてから消える、というのを試したが失敗した (ポップアップが表示されなかった)。

```xml:XAML
<Window x:Class="_170427_t0657_popup.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_170427_t0657_popup"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <TextBlock Height="50"/>
            <Button Content="Button1" Width="70" Click="Button_Click"/>
            <Popup x:Name="popup1">
                <TextBlock Text="Popup1" Background="Green"/>
            </Popup>
        </StackPanel>
    </Grid>
</Window>
```

```MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace _170427_t0657_popup
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            popup1.IsOpen = true;
            System.Threading.Thread.Sleep(1000);
            // popup1.IsOpen = false;
        }
    }
}
```

上記にて.IsOpen = falseを入れておくと、.IsOpen = trueでのポップアップの表示自体がされない。

クリックイベントを抜けてから.IsOpenの値を見て描画する、というような仕組みなのかもしれない。

C++ Builderで使っていたApplication.ProcessMessage()相当のものは見つからなかった。(きちんとは調べていないが)。

ボタン押下イベントに時間待ちを入れること自体が良くない実装ではある。
Visual Studio / WPF > コントロール > TextBlock > ハイパーリンク | 改行

```txt:動作環境
Windows 7 Pro (32bit)
Microsoft Visual Studio 2017 Community
Sublime Text 2
```

@ WPF 4.5入門 by 大田一希さん
No.4876 / 9985
> TextBlockコントロールは、Textプロパティ以外にInlinesというプロパティもあり、ここにRunやHyperlinkをつかって書式付のテキストやハイパーリンクを挿入することもできます。

試してみた。

```xml:XAML
<Window x:Class="_170427_t0640_TextBlock.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_170427_t0640_TextBlock"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid Margin="0, 20, 0, 0">
        <TextBlock>
            <Run Text="Running to Horizon (シティーハンター)"/>
            <LineBreak/>
            <Hyperlink NavigateUri="https://ja.wikipedia.org/wiki/RUNNING_TO_HORIZON">
                Wikipedia (!!! 職場での閲覧注意 !!!)
            </Hyperlink>
            <LineBreak/>
            <LineBreak/>
            <Hyperlink NavigateUri="http://www.google.com">
                Google
            </Hyperlink>
        </TextBlock>
    </Grid>
</Window>
```

![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/c0f1d0a0-1c10-f5ff-7208-d90aab788743.png)

### 未消化

ハイパーリンク表示にはなるが、クリックしてもブラウザが開かない。

すぐに使いそうにない機能なので、今は調べない。
Visual Studio / WPF > コントロール > StatusBar > Dock.Panelで配置 | TextBlock:AcceptsReturn > 改行を許可

```txt:動作環境
Windows 7 Pro (32bit)
Microsoft Visual Studio 2017 Community
Sublime Text 2
```

@ WPF 4.5入門 by 大田一希さん
No.4848 / 9985
> StatusBarコントロール


試してみた。
昔のMS-DOSの画面を再現してみようと思った。

別途、以下にDockPanelを使った良い例がある。
参考: http://www.wpf-tutorial.com/common-interface-controls/statusbar-control/

StatusBarはC++ Builderではデフォルトサイズがあったが、VSでは自分でHeightを設定することになりそう。設定しないと高さ全部を使い切る。

TextBoxはAcceptsReturnをTrueにすれば改行を入力できることを知った。


```xml:XAML
<Window x:Class="_170427_t0615_statusBar.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_170427_t0615_statusBar"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel Margin="0, 20, 0, 0">
        <StatusBar DockPanel.Dock="Bottom" Height="30">
            <StatusBarItem>
                <TextBlock Text="F1 Help"/>
            </StatusBarItem>
            <Separator/>
            <StatusBarItem>
                <TextBlock Text="F2 Menu"/>
            </StatusBarItem>
            <Separator/>
            <StatusBarItem>
                <TextBlock Text="F3 Load"/>
            </StatusBarItem>
            <Separator/>
            <Separator/>
        </StatusBar>
        <TextBox DockPanel.Dock="Top" Height="Auto" AcceptsReturn="True"/>
    </DockPanel>
</Window>
```

```MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace _170427_t0615_statusBar
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}
```

![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/229bfdc9-a0ec-94b4-b930-8b11f0158fe4.png)

上記のテキストは実行後に手打ちした。
内容はgoogle検索したもの。
技術英語 > but most of us [are not in that boat] / people in the making

@ http://thecodist.com/article/the-six-goals-of-every-programming-project

> but most of us **are not in that boat**.

ベンチャーキャピタルにより何十億の資金を集めたり、最終的に会社の売買で大金を得る人たちのboatには多くの人は乗っていない。

https://eow.alc.co.jp/search?q=in+the+same+boat
> in the same boat
> 《be ～》同じ境遇［立場・苦境・運命］にある、行動［運命・危険］を共にする、運命共同体である、一連托生である

...
> with one competitor in the same boat

<hr>
@プログラマが知るべき97のこと by Kevlin Henney

> 超人の神話 by Ryan Brush
> 超人はいないと思うようになれば、皆の行動は必ず良い方向に変わります。たとえば、共に仕事をしている人が自分よりはるかに賢いと分かっていても、「何も言わなくてもわかってくれる」とは考えなくなります。手間をかけてでも現状についての情報を十分に集め、その人に伝えるはずです。

### ポエム

「短期間でXXをしました」という人は数万人に一人の超人の話なので、自分の関心圏外の話。
むしろ、普通の人が如何に知識を集積して日々設計・実装をうまくこなしているか、という方が興味深い。

効率的な凡人を目指して修行中。
in the making

http://eow.alc.co.jp/search?q=in+the+making
> people in the making
進化途上の人類