OmniAICreator/Qiita-1.07M huggingface dataset:
Twitter の投稿を IFTTT で Mastodon へ転送するためのMastodonのAccessTokenを取得するスクリプト

小ネタです。

TwitterのツイートをMastodonに流すために[Twitter の投稿を IFTTT で Mastodon へ転送する。](http://qiita.com/yukimochi/items/f80a50a4486d0cb770dc)を参考にさせてもらったのですが、MastodonのAccessTokenを発行する手順がちょっと煩雑だったので、スクリプト化してみました。

# 必要なもの
- curl
- jq

macならHomebrewでインストールできます。

```bash
brew install curl jq
```

# スクリプト

```bash
MASTODON_URL=<MastodonのURL（例:https://mstdn.jp）>
MASTODON_EMAIL=<登録したメールアドレス>
MASTODON_PASS=<パスワード>

RESULT=`curl -X POST -d "client_name=From Twitter&redirect_uris=urn:ietf:wg:oauth:2.0:oob&scopes=write&website=${MASTODON_URL}" -Ss ${MASTODON_URL}/api/v1/apps`
ACCESS_ID=`echo $RESULT | jq -r .client_id`
ACCESS_SECRET=`echo $RESULT | jq -r .client_secret`

ACCESS_TOKEN=`curl -X POST -d "scope=write&client_id=${ACCESS_ID}&client_secret=${ACCESS_SECRET}&grant_type=password&username=${MASTODON_EMAIL}&password=${MASTODON_PASS}" -Ss ${MASTODON_URL}/oauth/token | jq -r .access_token`
echo "Access Token: ${ACCESS_TOKEN}"

# テスト投稿（必要ならば）
curl -X POST -d "access_token=${ACCESS_TOKEN}&status=This is a test toot via OAuth&visibility=private" -Ss ${MASTODON_URL}/api/v1/statuses
```

`MASTODON_XXX`の環境変数（3つ）を変更して、ターミナルにコピペすればAccessTokenが取得できるはずです。
これをITFFFのWebhookに設定する`access_token`に指定します。

TwitterのツイートをMastodonに流すのは、できれば本家でサポートしてほしい機能ですね。普通の人にはハードルが高すぎます。
cURLコマンドでレスポンスヘッダのみを取得する --head

# `--head` でできます！
元の記事を書い際には見つけられていなかったのですが、 `--head` でレスポンスヘッダーのみを取得することができます！！！

```console
$ curl --head http://example.com

HTTP/1.1 200 OK
Content-Encoding: gzip
Accept-Ranges: bytes
Age: 431277
Cache-Control: max-age=604800
Content-Type: text/html; charset=UTF-8
Date: Tue, 29 Jun 2021 15:49:43 GMT
Etag: "3147526947"
Expires: Tue, 06 Jul 2021 15:49:43 GMT
Last-Modified: Thu, 17 Oct 2019 07:18:26 GMT
Server: ECS (oxr/8314)
X-Cache: HIT
Content-Length: 648
```

## バラバラにオプションを指定する

`-D -`で標準出力にヘッダを出力。(--dump-header)
`-s`で進捗などを表示しないサイレントモード。(--silent)
`-o /dev/null`でbodyを/dev/nullに捨てる。 (--output)

```bash
$ curl -D - -s  -o /dev/null http://example.com


HTTP/1.1 200 OK
Cache-Control: max-age=604800
Content-Type: text/html
Date: Sun, 23 Apr 2017 01:45:02 GMT
Etag: "359670651+ident"
Expires: Sun, 30 Apr 2017 01:45:02 GMT
Last-Modified: Fri, 09 Aug 2013 23:54:35 GMT
Server: ECS (cpm/F9FC)
Vary: Accept-Encoding
X-Cache: HIT
Content-Length: 1270
```

エイリアス化しておくと便利そう。

```bash:~/.bashrc
alias curl_header='curl -D - -s -o /dev/null'
```
Xamarin.iOSでアラートを表示する方法

Xamarin.iOSでアラートを表示する方法です。iOS8からUIAlertViewがdepreciatedになっているので、UIAlertControllerを使用します。

アラートスタイルやアラートを表示したときのアクションは任意で変えられますが、アラートだけの例を示します。UIViewControllerを継承したサブクラスで使ってください。

```csharp
try
{
}
catch (Exception e)
{
	var alert = UIAlertController.Create("ここは任意のタイトル", e.Message, UIAlertControllerStyle.Alert);
	alert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Cancel, null));
	PresentViewController(alert, true, null);
}
```

エラーのアラートだけではなくて、普通のダイアログとしても使えます。アラートのスタイルを変える場合はUIAlertControllerStyleを、アクションスタイルを変える場合はUIAlertActionStyleを変えてください。
Windows8.1でのファイル盗難や無断閲覧を回避するためにEFS(Encrypting File System)を用いてファイルとフォルダを暗号化する方法

#解説
機密情報の高いファイルやメモ、プログラミングのソースコード、開発で用いるプロジェクトフォルダなどを、一括で暗号化し、なおかつWindows 8.1からは、通常のファイル同様に読み書きができる状態にする機能がWindows 8.1には標準で搭載されています。

これを使わない場合、Windowsのマシンで読み書きに使用しているストレージ(storage)であるHDD(ハードディスク)やSSD(ソリッドステートドライブ)を物理的にマシンから取り外されただけで、その中のデータを簡単に、Windowsアカウントを持たない人のWindowsマシンに接続されてファイルやフォルダを閲覧したり読み書きされてしまいます。

EFSを用いて実現できるセキュリティおよびファイルの読み書きプロテクト機能は、HDDのバイナリコピー回避、無断での別OSからの接続回避、同一OS内別アカウントからのアクセス回避、ファイル共有パーミッション設定ミス回避)などがあります。

設定手順はいくつかのサイトを参考にしました。
概略としては、暗号化キーを作成し、暗号化キーをバックアップし、フォルダやファイルに暗号化を適用する3手順です。

中身を見られたくないファイルを暗号化する(Windows Vista / Windows 7 / Windows 8)
http://faq.epsondirect.co.jp/faq/edc/app/servlet/relatedqa?QID=010934

[Windows 8.1] ファイルやフォルダーを暗号化する方法
https://solutions.vaio.com/462

[Windows 8]ファイルやフォルダーを暗号化する方法
http://faq.support.sony.jp/qa/articles/K_knowledge/S1211280044326

暗号化属性で暗号化したファイルやフォルダの証明書を回復(インポート）する方法＜Windows Vista(R)＞
https://dynabook.com/assistpc/faq/pcdata/007716.htm

暗号化ファイル システムの最善の使用方法
https://support.microsoft.com/ja-jp/help/223316/best-practices-for-the-encrypting-file-system


#参照ページ
EFS(Encrypting File System, "The Encrypting File System (EFS) is a component of the NTFS file system on Windows 2000, Windows XP Professional, and Windows Server 2003. (Windows XP Home doesn't include EFS.) EFS enables transparent encryption and decryption of files by using advanced, standard cryptographic algorithms.",
"EFS is the built-in file encryption tool for Windows file systems.")
https://technet.microsoft.com/en-us/library/cc700811.aspx

"EFS によって、暗号化するファイルごとに FEK (File Encryption Key) と呼ばれる、新しい対称キーが生成されます。EFS では、この対称キーを使用して、ファイルの暗号化と暗号化の解除が行われます。この FEK は、次のユーザーの証明書の公開キーを使用して暗号化されます。 "
("
Windows 2000 では、EFS の暗号化および暗号化解除に、拡張 DESX (Data Encryption Standard) アルゴリズムのみを使用できます。 
• SP1 以前のバージョンの Windows XP では、EFS の暗号化および暗号化の解除に、拡張 DESX または 3DES (Triple-DES) アルゴリズムのみを使用できます。 
• Windows XP SP1 以降では、DESX、3DES、または AES を使用して、ファイルの暗号化または暗号化の解除を行えます。 
")
https://support.microsoft.com/ja-jp/help/329741/encrypting-file-system-efs-files-appear-corrupted-when-you-open-them
Postgresqlインストール


```bash
yum install gcc readline-devel zlib-devel
```


```bash
cd /usr/local/src/
wget https://ftp.postgresql.org/pub/source/v9.6.2/postgresql-9.6.2.tar.gz
tar zxvf postgresql-9.6.2.tar.gz 
cd postgresql-9.6.2/
./configure --prefix=/opt/postgresql/9.6.2
make
make install

groupadd postgres
useradd -g postgres postgres
passwd postgres
su postgres
/opt/postgresql/9.6.2/bin/initdb --no-locale -D /home/postgres/data

```
ReactでSyntax error: Adjacent JSX elements must be wrapped in an enclosing tag

# なんやねーーん

```
Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag
```

# 参考

[Reactで「閉じろ」と怒られる](http://monster-kedama.hatenablog.com/entry/2015/12/08/115219)

[ReactでSyntax error: Adjacent JSX elements must be wrapped in an enclosing tag](http://off.tokyo/blog/2017/04/23/syntax-error-adjacent-jsx-elements-must-be-wrapped-in-an-enclosing-tag/)

# 問題のソース

```Javascrpt
class LikeButton extends React.Component {
  render() {
    return (

      <span>いいねボタン予定地</span>


      <div className="facebookiine">

      <h1>Reactで作った「いいねボタン」のデモ (Flux不使用)</h1>
      //<div id="like-button"></div>
      //<script src="like-button.js"></script>
      </div>

    );
  }
}

```

# 隣接要素たちは単一のタグでラップされていなければならない

なるほど...訳の分からぬやつや！

```Javascript

class LikeButton extends React.Component {
  render() {
    return (


      <div className="facebookiine">
      <span>いいねボタン予定地</span>
      <h1>Reactで作った「いいねボタン」のデモ (Flux不使用)</h1>
      //<div id="like-button"></div>
      //<script src="like-button.js"></script>
      </div>

    );
  }
}

```
Visual Studio > 100% disk usage

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

VSを使用中にdisk usageが100%になる現象が発生した。

OSをセーフモードで再起動して、キャッシュをクリアした後は、OS自体の動作では100% disk usageにはならない。

次にVSを起動したところ、100% disk usageの状態になった。

関連情報として以下を見つけた。
http://stackoverflow.com/questions/28133744/visual-studio-100-disk-usage

具体的な対策は見つかっていないようだ。

VSを終了し、再度VSを起動したところ、100% disk usageは発生しなくなった。
pull request, issue の雛形

# 背景

[OSS Gate](http://oss-gate.doorkeeper.jp/) のワークショップに参加したのですが、issue を作成するときのテンプレートが前回と変わっていて、これってどこで設定してるのかな？と思って調べました。

# GitHub では

https://github.com/blog/2111-issue-and-pull-request-templates

でテンプレートについて紹介されています。リポジトリの最上位ディレクトリに、

* ISSUE_TEMPLATE.md
* PULL_REQUEST_TEMPLATE.md

があると、それぞれのファイルの内容が issue あるいは pull request の作成時に本文に挿入されます。最上位ディレクトリを散らかしたくない場合は

* .github/ISSUE_TEMPLATE.md
* .github/PULL_REQUEST_TEMPLATE.md

としてもよいとのこと。実際、 https://github.com/oss-gate/workshop/ では .github/ISSUE_TEMPLATE.md が用意されていました。

なお、使われるのは https://github.com/ユーザ名/リポジトリ名/settings/branches で設定される Default branch の先端のファイルです。

# Bitbucket では

issue は上がってる (https://bitbucket.org/site/master/issues/11571/custom-pull-request-description-template) けどまだ対応されていないようです。
cssだけで、未知の行数のテキストをボックスに対して上下中央、更に特定行数だけ頭出しする

## 概要

最近、

```html
<p class="hoge">テキストテキスト</div>
```

こんな感じの非常にシンプルな構造のときに、cssのみで

- 中のテキストの行数は未知のとき、このテキストをボックスに対して上下中央にしたい
- ある行数(ex. 2行)を超えたら最初の2行だけを頭出しで上下中央に表示したい

こんな感じ↓
![image.png](https://qiita-image-store.s3.amazonaws.com/0/99270/ed967140-d912-0cd0-decb-a61a98a3392e.png)

というような欲張りな要求をされる場面に出会ってしまい、ちょっと悩んだのですがなんとか解決できたので書いてみます。

## 解決するcss
わかりやすいようにscssっぽく書いています。

```css
$max-lines: 2;
$vertical-padding: 10px;
$font-size: 16px;
$line-height: $font-size * 1.4;

.hoge {
  width: 200px;
  height: $max-lines * $line-height; /* 実際の高さは +($vertical-padding * 2) になることに注意 */
  font-size: $font-size;
  line-height: $line-height;
  border-width: $vertical-padding 0;
  border-color: transparent;
  border-style: solid;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hoge:before, 
.hoge:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
}
```

ポイントは、

- 疑似要素と、flexが残った隙間を埋めてくれることを利用し上下中央を実現している
- transparentなborderを使って上下のpaddingを作る
- borderだと、overflowを使って指定行数以上の表示をカットすることができる

というところです。

普通は`table-cell`と`vertical-align`を使ってしまうところですが、このようなスタイルであれば、レイアウトのために1個タグが増えてしまう問題を解決できます。また、疑似要素とflexを使って上下中央を実現するのは珍しいのではないかと思い、記事化してみました。コメントでも書いているとおり、高さ計算がちょっと素直じゃないことに注意です。(`box-sizing: border-box` でも素直にはならない)
Week: April 16-22, 2017

This week a learned...

[Boostnote](https://itsfoss.com/boostnote-linux-review/): This is a awesome text editor to take notes
This post is my first note :D

Gnome we have a newcomers guide 
unfortunately I could not reproduce any bugs yet
https://wiki.gnome.org/Newcomers
![build.png](https://qiita-image-store.s3.amazonaws.com/0/91692/dafc07c8-c3ae-7cfe-6907-6e55d579c1d5.png)



# Jenkis
[Jenkins](https://jenkins.io/index.html)  is extensive topic but I  saw this nice things
[devopslibrary course](https://www.devopslibrary.com/)
Beautiful UI [Blue Ocean](https://jenkins.io/doc/book/blueocean/getting-started/)
[Gnome 3 extension for Jenkins](https://www.philipphoffmann.de/gnome-3-shell-extension-jenkins-ci-server-indicator/)
Docker has [official image of Jenkis](https://hub.docker.com/_/jenkins/)
[vim/neovim Plugin](https://github.com/martinda/Jenkinsfile-vim-syntax)
RaspberryPiのDockerでRemoteAPIを有効化する

##Dockerのインストール
[ここ](https://www.raspberrypi.org/blog/docker-comes-to-raspberry-pi/)の内容でインストールを行う
`curl -sSL https://get.docker.com | sh`

##バージョン確認
```bash
 docker version
Client:
 Version:      17.04.0-ce
 API version:  1.28
 Go version:   go1.7.5
 Git commit:   4845c56
 Built:        Mon Apr  3 18:22:23 2017
 OS/Arch:      linux/arm

Server:
 Version:      17.04.0-ce
 API version:  1.28 (minimum version 1.12)
 Go version:   go1.7.5
 Git commit:   4845c56
 Built:        Mon Apr  3 18:22:23 2017
 OS/Arch:      linux/arm
 Experimental: false
```

##RemoteAPI有効化
以下のとおり変更

```shell:/lib/systemd/system/docker.service
#ExecStart=/usr/bin/dockerd -H fd://
ExecStart=/usr/bin/dockerd -H tcp://0.0.0.0:4243 -H unix:///var/run/docker.sock
```

##Serviceのリロード・再起動
**daemon-reloadをしっかり行わないと反映されない**
```bash
systemctl daemon-reload
service docker restart
```

##API確認
```bash
curl http://localhost:4243/version
{"Version":"17.04.0-ce","ApiVersion":"1.28","MinAPIVersion":"1.12","GitCommit":"4845c56","GoVersion":"go1.7.5","Os":"linux","Arch":"arm","KernelVersion":"4.4.34-v7+","BuildTime":"2017-04-03T18:22:23.595577260+00:00"}
```
技術英語 > more means better or safer / Better late than never. / Better never late.

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

> because upper management seems to imagine **more means better or safer**.

人が多い会社になっているのは上層部の人が「多いことは良いことで安全だ」と感じているから、と言っている。
ブログの人はそれが良いとは感じていないようだ。

@ 社員をサーフィンへ行かせよう by Yvon Chouinard (シュイナード) 


> 「シンプルに、シンプルに」- H.D.ソロー
「"シンプルに”は１つでよろしい」- ラルフ・ウォルドー・エマソンの返事
...
> 必要性から生じたデザインは、たいてい必要最小限（ミニマリズム）だ。
...
> 複雑さは、機能面の必要性が整理されていないことの表れであることが多い。
...

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

Better late than never. Better never late.

意訳「遅くてもしないよりは良い。遅れないのがなお良い」

LOE(Living on Earth)かEnglish ExpressかEnglish Journalか6 minutes Englishあたりで聞いたことがある。
C# Mastodon APIクライアントライブラリを作った

急に気持ちが高まって書いてしまったけどエンドポイントがめっちゃ多くて途中で十二回くらい着手したことを後悔した。レポジトリは以下。

https://github.com/pawotter/mastodon-api-cs

# 導入方法

NuGet: Mastodon.API

```
Install-Package Mastodon.API
```

# 使い方

使い方はとっても簡単。

```csharp
var accessToken = "himitsu";
var instanceUrl = new Uri("https://friends.nico");
var config = new MastodonApiConfig(instanceUrl, accessToken);
var api = new MastodonApi(config, http);

// GET /api/v1/accounts/verify_credentials 
var account = await api.GetCurrentAccount();
var displayName = account.DisplayName; // 設定しいるユーザー名が取れる
```

雑にざっくり書いたので皆様のあたたかいプルリクエストとバグ報告をお待ちしております。
Choregrapheが落ちたときのサルベージについて

#目的
備忘録。いきなりchoregrapheが落ちたときにへこまないように。

#環境
windows版　choregraphe 2.4.3.28

#ことの発端
![image](https://qiita-image-store.s3.amazonaws.com/0/60999/64235474-e9df-9feb-bc66-d209f6614d93.png)

知人のタイムラインに悲痛な叫びが上がっていた。
たしかにこういう事はよくある。
これが嫌でwindowsを使っている人もいるというくらいMac版のchoregrapheは落ちまくる。
今回はその対応について考えてみた。
要はbehaviorを拾ってくればいいんだろー。多分。ぐらいのことしか考えていない。


#本体につないでいた場合の回収方法
本体に接続していた場合で
[pepperめも_03:ペッパーのフォルダ構造](http://qiita.com/tonosamart/items/cbabe47bc6ded3cbe17a)
こちらの記事にあるように
/home/nao/.local/share/PackageManager/apps/.lastUploadedChoregrapheBehavior
に最後にアップロードしたデータが残っているので
behavior_1などのフォルダからbehavior.xarなどの周辺ファイルを拾ってくることができる。

とりあえずscpなどのファイル転送ソフトで回収。

#本体につないでいなかった場合の回収方法
問題は本体につないでいなかった場合。
長めのモーションの場合は本体につながずに組むことも多い。
バーチャルロボットを使った方が、転送時間や、障害物判定などの煩雑なことに惑わされないで済むし。

そこで、バーチャルロボットのbehaviorがどこに格納されてるのかを探してみると、こんなところにあった。

C:\Users\XXXX\AppData\Roaming\choregraphe\VirtualRobot-YYYY\data\PackageManager\apps\.lastUploadedChoregrapheBehavior

XXXXはユーザー名。
YYYYの部分はバーチャルロボットによって変わる。
いくつかのバーチャルロボットが立ち上がっている場合もあるので、実際には

C:\Users\XXXX\AppData\Roaming\choregraphe\
まで移動して、各バーチャルロボットのdata\PackageManager\apps\.lastUploadedChoregrapheBehavior

まで潜って内容物を確認するのが良いと思う。
転送中にクラッシュした場合はさすがにきついかもしれないが、たいていの場合は最終更新時のファイルになっているはず。


#回収した後
では、.lastUploadedChoregrapheBehaviorフォルダを回収した後にどうするかという話ですが、普通にインポートするとほとんどのファイルは使えるとおもう。

![image](https://qiita-image-store.s3.amazonaws.com/0/60999/4f462a98-e31c-2ef7-bf81-59caa313032e.png)

新規プロジェクトを作り、フォルダをインポート

![image](https://qiita-image-store.s3.amazonaws.com/0/60999/e7515033-61d7-85f0-2450-0dbd0d63c72b.png)

.lastUploadedChoregrapheBehaviorのbehavior.xarを選択すれば、フローダイアグラムパネルが切り替わり、タイムラインボックス等々もサルベージできるはず。

#言い訳
mac版が落ちたー、という悲痛な叫びにもかかわらず、windows版しか書いてないあたりは申し訳ない気がするので、言い訳。

一応bootcampを入れて以来全く使って無いmacを立ち上げて、2.4.3をインストールしたんだけども、全然バーチャルロボットが立ち上がらない。
https://community.ald.softbankrobotics.com/ja/forum/%E3%83%90%E3%83%BC%E3%83%81%E3%83%A3%E3%83%AB%E3%83%AD%E3%83%9C%E3%83%83%E3%83%88%E3%81%AB%E6%8E%A5%E7%B6%9A%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84-7835

理由を探してたらOSをバージョンアップしてください。というのが出たので、あきらめました。
誰かMac版で相当するフォルダなど教えていただけると幸いです。
AngularJSのinputで整数のみを入力可とする

# やりたいこと
`input`要素を使用して数値入力を行うフォームを提供する際、整数のみを入力させたい場合があります。このような場合、`ngPattern`を使用することで、バリデーションにより整数以外の入力を弾くことができます。

しかし、ドット(".")や"e"をそもそも最初から入力禁止としたい場合はどうでしょう。その時は、directiveを作成することでそのような動作を実現することができます。

# directiveの作成
以下に、小数の入力禁止するdirective `integer` のサンプルコードを示します。

```js
var app = angular.module('myModule', []);

app.directive('integer', function() {
  var directive = {
    link: link,
    restrict: 'A',
  };
  
  function link(scope, element, attrs) {
    element.bind("keydown keypress", function(event) {
      if (event.key === '.' || event.key === 'e') {
        event.preventDefault();
      }
    });
  }

  return directive;
});
```

このdirectiveでは、キー入力が発生する度にその内容をチェックし、ドット(".")か"e"が入力されていればその内容を無視するようにしています。
viewでは、次のように`integer`を使用します。

```html
<input type="number" ng-model="value" integer>
```

## 補足: ngPatternを使用する場合
`ngPattern`を使用して整数のみを正常な入力として扱う場合は、次のようにします。

```html
<input type="number" ng-model="value" ng-pattern="/^-?\d+$/">
```
Webフレームワーク品評会を開きます。登壇者募集中。

## イベント開催日
予定より遅くなりましたが9月16日(土)にイベント開催します（会場：品川マイクロソフト本社）。
（※当初予定していた23日の日程を16日に変更しました。ご注意ください）

- [（東京）Webフレームワーク品評会 - connpass](https://general.connpass.com/event/63492/)

## イベント概要
例えば普段 Rails を使っている人、CakePHP や Play Framework 等の他のフレームワークの情報をキャッチアップできていますか？その逆もしかり。自分が今触っているフレームワークが最強だと思っていて、他にも良いフレームワークがあるはずなのにそれを知らずに過ごしているとしたらもったいないと思いませんか？

本イベントでは各Webフレームワークの識者に集まっていただき、他文化同士で情報交換を行うことを目的とします。

「それ、〇〇でできるよ」的な情報の交換を活発に行いたい。

自分が使っているフレームワークの機能自慢をしても良し、逆に自分の使っているフレームワークの不満を投げかけてみて、他のフレームワークではどう解決しているのかを問いかけるも良し、文化圏を横断して情報交換をしていきましょう。

そこで得た情報をもとに自分の使っているフレームワークを良いとこ取りで拡張しても良いしフレームワークの乗り換えを行っても良いし、とにかく得られた情報は有益に活用できるかと思います。

## イベントの流れ
いきなり人がワッと集まってワチャワチャ話を始めても収拾がつかないので、まずはWebフレームワーク毎に概要や詳細を発表できる識者にご登壇いただき、そのあたりの内容を軸に（時間に余裕があれば）ディスカッション等もできればと思っています。

ちなみに以前「[Webフレームワーク品評会イベントの提案 - Qiita](http://qiita.com/kobake@github/items/8c2d5f0a6bed582a1ef5) 」という記事を書きましたが、なんかこれ見返してみるとゴチャゴチャ細かく書きすぎなのでこっちの内容はあまり気にせず参考程度に。

## 登壇者募集中
何かしらひとつの Web フレームワークの善し悪しについて語れる人を5人くらい募集させてください（希望であれば複数のフレームワークについて語っていただいても構いません）。

登壇時間は5～30分くらいを想定。時間は語りたい内容によって調整します。

登壇者は多様であって欲しいですが、語るフレームワークが被ってもそれはそれで構いません。Ruby on Rails, CakePHP, FuelPHP, Laravel, Django, Express, Struts, Play Framework, ASP.NET MVC … 他にもいろいろありますが、Webフレームワークであれば何でも良いです。

登壇ご希望の方は、主催の kobake にご連絡ください。
連絡方法については、この記事へのコメント、または [@kobake_](https://twitter.com/kobake_) へのメンションまたはDM、またはリアル知人であれば直接のコンタクト等、伝わればなんでも良いです。

## 会場ご提供のお願い
まだ諸々未定の状態（5月か6月の時期、くらいという情報くらいしかない）で大変恐縮ですが、50人くらいが入れるスペースをご提供いただける所がありましたらご相談させていただけると助かります。

基本は僕自身が足を運んで会場探し回るつもりですが、逆に会場提供者様側からのコンタクトをいただけることがあるとしたらすごく嬉しいです。

## 決定済み登壇者情報（随時更新）
順不同。
やや毛色の違うフロントエンドのお話もご登壇いただけることになりました。

|登壇者|発表内容|メモ|
|---|---|---|
|小林 慧一<br/>[@kobake_](https://twitter.com/kobake_)|ASP.NET MVC/Core (C#)<br/><br/>(仮題)ASP.NET MVC の基本操作の紹介|歩元(株) 代表<br/>[ASP.NET MVC  ClockUpTips](http://aspnet.clock-up.jp/) を運用中|
|立野 正之<br/>[@Ueshiman](https://twitter.com/Ueshiman)|ASP.NET WebForms (C#)|フリープログラマー|
|福田 志郎<br/>[@shr_f](https://twitter.com/shr_f)|Ruby on Rails (Ruby)|[Tutorial Inc.](https://tutorial.co.jp/) CEO|
|まゆtech<br/>[@mayutechIOG](http://twitter.com/mayutechIOG)|Laravel (PHP)|-|
|ぐっちょむ<br/>[@gutchom](http://twitter.com/gutchom)|React.js/Vue.js (JavaScript)<br/><br/>(仮題)昨今のフロントエンドにおける設計と技術選定について|Webフロントエンドエンジニア|
|小原 祥<br/>[@shok4a](https://twitter.com/shok4a)|Play Framework (Scala)|-|
|未定|未定|-|

司会・舵取り役もとりあえず [@kobake_](https://twitter.com/kobake_) がやるつもりですが、そのあたりの役割も他の人にやってもらえたりするとありがたかったりするので、「それ私やりますよ」って人がいてくれたら手を挙げていただけると助かります。

## イベント用 connpass コミュニティ
まだイベントの日時も場所も未定で恐縮ですが、本イベント用のグループを connpass に作りました。

- [横断勉強会コミュニティ - connpass](https://general.connpass.com/)

ご興味のある方はグループにご登録いただけると嬉しいです。イベントページが作成されたときに通知が飛びます。

## もくもく会の告知
品評会とは別で、登壇などの段取りはせず、ゆるくもくもく作業するだけのWeb系もくもく会を5月6日(土)に開きます。

- [Web系もくもく会 (東京 茅場町) - connpass](https://general.connpass.com/event/55895/)

このイベントでも異なるWebフレームワークを使ってる人が混じり合って情報交換できるといいな、と期待しています。もくもく会なのであくまでも作業ベースの会になりますが。よろしければご参加ください。
[Swift]enumで見つけた小ネタ

```

enum Animal {
  case fox
  case dog
  case cat
  
  static var all: [Animal] {
    return [fox, dog, cat]
  }
}

let animals: [Animal] = [.fox, .dog, .cat]
```

enumの中だと`[fox, dog, cat]`って`.`無しで書ける。selfだから省略出来る。
もちろん`[.fox, .dog, .cat]`って書くことも出来る。これはenumの型を指定してるから省略出来る。
結果は同じだけど読みにくいから統一した方がいいなと思ったんだけど、そもそもenumの中のcaseが.無い表記なわけだし、どっちに統一するのが良いんだろこれ。

だからなんだって話なんだけど。
my-js-boilerplateを更新した（2017/2月版）

各種設定 + ごくごく簡単なVue.js + Vuexでカウントアップするサンプル
https://github.com/Kesin11/my-js-boilerplate/tree/v2

# 技術スタック

|去年|今年|
|----|----|
|React + Redux|Vue.js + Vuex|
|mocha + power_assert|ava|
|browserify|webpack|
|gulp|npm + package.json|


# フレームワーク
去年個人的な開発でReact + Reduxを使った感想としては、Reducerやコンポーネント志向によって拡張するときにどこを変更すればいいのか明確ではあるものの個人プロジェクトのような小さいページだとコストが高すぎると感じた。

最近はVue.jsが盛り返しているらしく、2系にバージョンアップされてから触ったことがなかったので使ってみたら結構いい感じ。
React使ってたときにFluxの概念は良いと思っていたので、VueでFluxを実現するVuexというプラグインも使ってみた。
あくまでプラグインなので従来のVue.jsの書き方とも共存でき、JSXも使えるようになっていたしReact + Reduxの重厚な組み合わせでなくてもこれで十分なのでは感がある。

# テスト
rubyでpowe_asserに触れてからあのお手軽感が忘れられず、
そういえばavaというテストライブラリにpower_assertが採用されたということを思い出したので試してみた。

文法はrubyのminitestに近い印象。
power_assertが使われているとのことだったが、本家と違ってマッチャーがassert一本ではないのが残念だった。どうやらfailしたときの表示をリッチにするためにpower_assertを使っているっぽい。
理想はrubyみたいにassertだけでいける環境が欲しいのだが、去年使ってたmochaのrspec風に慣れなかったので一旦これで妥協することにした。

# 脱gulp
去年はgulpに憔悴したのでgulpを捨ててnpmとpackage.jsonだけにした。
意外と、というか全く困らなかった。
むしろネット上の玉石混交のgulpの構成を見つけては動かずに頑張って手直しするという必要もなく、それぞれのツールのドキュメントから使い方をコピペすればとりあえず動くしでいいことづくめだった。最近なんとなく脱gulpの空気も感じるし。
OSの互換性ガーという意見もあるかもしれないが個人の開発では、というか少なくとも自分の場合は業務でもmacOSとLinuxで動けば問題ない。

# webpack
webpackはvue.jsのセットアップが勝手にやってくれた最小限の設定しかないが、どのみちwebpackの設定はプロジェクト毎で別物になっていくだろうからとりあえずこんな感じ。

最近はjs界隈のフレームワークやツール戦争も落ち着きつつあるので、少なくとも数ヶ月は新しく何かを始めるときにはこの構成からスタートすることになると思う。
また大幅に変更することになったら新しいエントリを投稿するだろう。
Qiita で使うと良い HTML タグ

## Qiita で使うと良い HTML タグ

っていうのは嘘で、さっき kbd タグを Qiita で初めて見たので var タグとかと並べてみた、個人的メモ。

<span>&lt;span&gt;</span> -- id つけて <span id="anchor">html anchor</span> とかに<sup>(<a href="#anchor">リンク</a>)</sup>。
<kbd>&lt;kbd&gt;</kbd> -- キーボードで入力する部分を表す。「<kbd>Ctrl</kbd>-<kbd>+</kbd> を押す。」みたいに書くときにわかりやすくてよい。
<samp>&lt;samp&gt;</samp> -- プログラムの出力結果などを表示する際に用いるらしいけど、Qiita では等幅フォントになるだけ。
<code>&lt;code&gt;</code> -- プログラムのソースなどを表示する際に用いる。
`&#x60;backquote&#x60;` -- backtick とも呼ぶ。Unicode の名称は GRAVE ACCENT。<code>&lt;code&gt;</code> と同じだが文字参照できない。
<var>&lt;var&gt;</var> -- プログラムの変数などを表示する際に用いる。イタリック体になる。等幅フォントではないので <code>&lt;code&gt;</code> とかと併用するとよい。
<samp><var>&lt;samp&gt;&lt;var&gt;</var></samp>
<code><var>&lt;code&gt;&lt;var&gt;</var></code>
<var>`&lt;var&gt;&#x60;backquote&#x60;`</var> -- backquote は一番内側に置く必要がある。
vagrantを使ってローカル開発環境を構築する

本番デプロイ環境はlinuxの場合が多いので、ローカル開発環境もlinuxであることが望ましいケースが多い。vagrantを使えばすぐにlinuxの仮想環境が構築できる。

### 1. vagrant + virtual box をインストール

* [download: vagrant](https://www.vagrantup.com/downloads.html)
* [download: virtual box](https://www.virtualbox.org/wiki/Downloads)

### 2. 仮想環境立ち上げ (ubuntu14.04)

```bash
$ mkdir ubuntu
$ cd ubuntu
$ touch Vagrantfile
```

config.vm.box に好きなOSを書く。

```ruby:Vagrantfile
# -*- mode: ruby -*-
# vi: set ft=ruby :

Vagrant.configure("2") do |config|
  config.vm.box = "ubuntu/trusty64"
  config.vm.box_check_update = true
  config.vm.network "forwarded_port", guest: 80, host: 8080
  config.vm.network "private_network", ip: "192.168.33.10"
  # config.vm.network "public_network"
  # config.vm.synced_folder "../data", "/vagrant_data"

  #config.vm.provider "virtualbox" do |vb|
  #  vb.gui = true
  #  vb.memory = "2048"
  #end

  # config.vm.provision "shell", inline: <<-SHELL
  #   apt-get update
  #   apt-get install -y apache2
  # SHELL
end
```

```bash
# 立ち上げ
$ vagrant up
```

### 3. 仮想環境に接続

```bash
$ vagrant ssh
```

>よく使うコマンド (vagrant --helpで確認できる）
>
```bash
#box追加
$ vagrant box add [box名] [boxの場所]
#box list表示
$ vagrant box list
#状態確認
$ vagrant status
#一時停止 ~ sleep mode
$ vagrant suspend
#一時停止からの復帰
$ vagrant resume
#完全停止 ~ shutdown
$ vagrant halt
#再起動
$ vagrant reload
#設定変更だけ反映
$ vagrant provision
#消去
$ vagrant destroy
```

### 4. 仮想環境の設定

ubuntuのアップグレード

```bash
$ sudo apt-get update
$ sudo apt-get upgrade -y
```

ロケールの設定

```bash
$ sudo apt-get install -y language-pack-ja
$ sudo update-locale LANG=ja_JP.UTF-8
```

### 5. サーバー運用・設定の tips

#### 新しいユーザーを追加する

```bash
$ sudo apt-get install -y finger
$ sudo adduser <newuser>
#新しいユーザーに sudo権限の付与
$ sudo ls /etc/sudoers.d/
$ sudo cp /etc/sudoers.d/vagrant /etc/sudoers.d/<newuser>
$ sudo nano /etc/sudoers.d
```

```bash:sudoers.d
# CLOUD_IMG: This file was created/modified by the Cloud Image build process
<newuser> ALL=(ALL) NOPASSWD:ALL
```

#### sshでの接続に限定する（passwd接続を禁止する）

```bash
#passwdを無効にする　e: expire
$ sudo passwd -e <newuser> 

(local)$ ssh-keygen

$ mkdir .ssh
$ touch .ssh/authorized_keys
$ nano .ssh/authorized_keys

localで生成した公開鍵(~/.ssh/*.pub)の中身をコピペする

$ chmod 700 .ssh
$ chmod 644 .ssh/authorized_keys

#passwd接続を禁止する
$ sudo nano /etc/ssh/sshd_config

PasswordAuthenticationをnoに変更する

$ sudo service ssh restart

#接続確認
(local)$ ssh <newuser>@localhost -i .ssh/<key_file>
```

#### ファイルへのアクセス権限を変更する

```bash
$ ls -l
#(owner, group, everyone)
$ chmod 744 hoge.sh
$ chmod 655 index.html 
#所有権を変更する
$ chown <owner> <filename>
$ chgrp <group> <filename>
```

#### ファイアウォールを設定する

```bash
$ sudo ufw status
$ sudo ufw default deny incoming
$ sudo ufw default accept outgoing
#$ sudo ufw allow <protocol>
$ sudo ufw allow ssh # 20/tcp
$ sudo ufw allow 2222/tcp
$ sudo ufw allow www # 80/tcp
$ sudo ufw enable
```

### 6. apache webサーバーを立ててみる

```bash
$ sudo apt-get install -y apache2
$ sudo nano /var/www/html/index.html

hello world !

(local)$ open http://localhost:8080
```
社員教育にモブプログラミングを取り入れてみた


# いきさつ
最近月1くらいで社員教育として会社でJavaの勉強会を開催しているが、どのようにすれば効果的にできるのかを模索中だった。
そんな時に偶然にもモブプログラミングに出会った。
それは[Regional Scrum Gathering Tokyo 2017](http://2017.scrumgatheringtokyo.org/#top)のキーノートでRachel Daviesによって紹介されて初めて知った。
複数人が同じ場所で、同じ時間に、同じPCでプログラミングを行うというもの。
ペアプログラミングはやったことないけど、それを発展させた感じである。
実際に仕事でモブプロ体験してみたところいろいろな学びがあったので、これこそ教育にピッタリな手段なのではないかと思い勉強会に取り入れてみることにした。


# 環境
- 人数: 6人
	- 私は現場でモブプログラミング経験者、後輩5人は未経験
	- 普段は各々別の現場でプロジェクトに参画しており、使っている言語や役割もバラバラ
	- 普段現場でプログラミングしてない人もいる
- 場所: 本社会議室
- 時間: 9:30~12:30の3h
- 使用機器: ノートPC(Windows 10), 23インチディスプレイ
- 開発環境: Cloud9というクラウド開発環境(maven, git, Java8をインストール)

# 進め方
ブログ[ジムには乗りたいの記事](http://su-kun1899.hatenablog.com/entry/2017/03/23/230000)を参考にした。

- ドライバーを中心に、ナビゲーターが囲む形で座る。
- 初めに、これから作るアプリケーションの仕様をみんなで確認して認識をあわせる。
- ホワイトボードも使ってお絵描きしながら認識をあわせる。
- タスクを付箋に書き出す。
- タスクの付箋はドライバーの前に配置。
- 6人で実施したので、1人10分くらいまたはキリのいいところで交代。
- ドライバー
	- やることを宣言してコーディング
- ナビゲーター
	- ああやりましょう、こうやりましょうとドライバーに指示出し
	- エラーが出たら一緒に原因を考える

# 開発するもの
DBにアクセスし、select, insert, update, deleteを行って結果表示するだけの簡単なJavaアプリケーション

# やってみてどうだったか(社員教育の観点で)
※あくまで個人の主観です。
## 良かったこと
- 実際に自分もコーディングを見せるので、様々な面で後輩に伝えやすかった。
  - タスクの出し方、Gitコマンド、クラス設計、Javaの機能、自分が書いたコードの解説など
- モブプロ後の感想で以下のようなポジティブな意見をもらうことができたのは良かった。
	- 細かくタスク出しできたので流れを理解しやすかった
	- 忘れていたことを思い出せた
	- ソースの書き方や考え方がわかった
	- 他の人が遭遇したミスを同時に経験できたのがよかった
	- 色々な意見が聞けた。
	- コーディングの途中で誤りに気づけた
	- とても身になる体験だった
	- 等々
- スキルレベルがバラバラだからこそ、一緒に開発することで得られるものも大きいのではないかと思った。

## もやっとしたこと
- Cloud9がイマイチだった。
	- Java向けではないらしく入力補助が貧弱。
	- サクサク開発できないのがネック
	- しかし、それが逆にJavaプログラミングの基礎的なコーディング力はつくから良いかもという前向きな意見はあった。
- モブプロ環境の整備に手間取った(これはうちの会社の問題)
- 交代のサイクルは早くしてみたものの、6人という人数は多かったかも
	- ちょっと物足りない感がある
	- 6人で3hという時間が短すぎるのかもしれない
- 今回勉強会に集まってくれた社員は前向きに取り組んでくれる人達だったので良かったが、前向きじゃない人がいたらどうなるかが不安

# まとめ
感触としてはすごく良い。
山本五十六氏の「やってみせ・・・」の名言をまさに実現できる。

しかし、モブプログラミングを取り入れない場合に比べてどの程度の効果があるのか予想がつかない。
何かしらのメトリクスを計測してみたいところではある。
やってみてダメだったらやめればいいだけではあるが、ダメかどうかの判断基準も持ち合わせてない。
なのでしばらくは続けるつもり。
Azure Time Series Insights リリース

4/21にAzure Time Series Insights がアナウンスされました。
コードレスでIoT HubやEvent Hubの可視化が簡単にできます。

https://azure.microsoft.com/en-us/blog/announcing-azure-time-series-insights/

プレビューで使えるようになっているので、さっそく触ってみましょう。

##ポータルからメニュー検索～作成

Azureポータルで検索すると、しっかり出てきますね
![image](https://qiita-image-store.s3.amazonaws.com/0/167354/e290355c-5e00-6d1f-232a-fde60c121c0e.png)

作成を押すと、以下の設定画面に。
![image](https://qiita-image-store.s3.amazonaws.com/0/167354/962aea4d-ce8f-e216-d1f3-fae69b810d98.png)

現時点ではロケーションはヨーロッパ北部、ヨーロッパ西部、米国東部2、米国西部しか選べません。
また、Pricing tierはS1/S2を選んで、容量のバーを変更して決まります。
最低コストは15,304円/月～ですね。

##設定

作成が完了すると、以下のようなメニューが出ます。
まずは環境トポロジからイベントソースを設定します。
IoT Hubを設定してみましょう。
![image](https://qiita-image-store.s3.amazonaws.com/0/167354/0f37233c-8ab4-8481-dfbd-5a7b2b727e1f.png)
![image](https://qiita-image-store.s3.amazonaws.com/0/167354/4f1b16ca-f3b4-ac39-13aa-abf9e93c8e59.png)

もう一つ、Data Access Policiesを設定します。
ユーザとロールを設定して保存します。

##環境を開いて可視化を開始

概要-環境を開くから、可視化レポートを開いてみましょう。
おお、グラフが表示されますね。
![image](https://qiita-image-store.s3.amazonaws.com/0/167354/56c40a88-2777-fb80-ca96-fb6faa48fc7f.png)

MEASUREの値を変更すると、表示される内容が変わります。
また、ADDを押すとグラフが追加されますね。
![image](https://qiita-image-store.s3.amazonaws.com/0/167354/0219c44c-6844-650f-0aed-a5e40b767ba6.png)

気に入ったものができたら保存を忘れずに。
 
IoT HubやEvent HubからStream Analyticsを通さなくてもいきなり可視化できるのはとても良いですね。ぜひ使ってみてください。
phpbrew でPHP7 をインストールする。


PHP 7のアプリケーション開発をするために、PHPをインストールしようとしたところ、以前はphpenvがhomebrewでインストールできたのですが、今では消えていました。
その代わりに、phpbrewが入っていたので、それを使ってインストール。


# 前提

* macOS Sierra 10.12.4
* homebrew はインストール済み
* phpenvはインストールしてない

# 手順

```
$ brew tap homebrew/php
$ brew install phpbrew
$ phpbrew init
```

その後、利用してるシェルに合わせて、`.bashrc` などに下記の一行を追加。

```
 source /Users/hogehoge/.phpbrew/bashrc
```

その後、再度端末を開くか、シェルを起動し直しして、phpbrewが使えることを確認しましょう。

それが終わったら、現在インストール可能なPHPのバージョンを`phpbrew known` で取得し、実際に必要なバージョンを`phpbrew install` でインストールします。

```
$ phpbrew known
$ phpbrew install 7.0.18
```

という至って簡単なもの。のはずなんですが、最後のPHPのインストールで、次の2つの問題ではまりました。

# インストールでハマったところ

## BZip2 に必要なものがない

初回インストール時、下記のようなエラーが出ました。

```
checking if the location of ZLIB install directory is defined... no

checking whether to enable bc style precision math functions... yes

checking for BZip2 support... yes

checking for BZ2_bzerror in -lbz2... no

configure: error: bz2 module requires libbz2 >= 1.0.0

```

要するに、bzip2 ライブラリが無いというこなので、それをインストールする必要があります。
bzip2はもともとmacOSに入っているものなので、homebrewでは入れず、下記のように

```
$ xcode-select --install
```

その後、`phpbrew install` を再実行することでエラーが出なくなりました。

## `fatal error: 'openssl/evp.h' file not found`

bzip2の問題の後、再度インストールを試したところ、次のエラーにが出ました。

```
/Users/hogehoge/.phpbrew/build/php-7.0.18/ext/openssl/openssl.c:44:10: fatal error: 'openssl/evp.h' file not found

#include <openssl/evp.h>

         ^

330 warnings and 1 error generated.

make: *** [ext/openssl/openssl.lo] Error 1

```

これも似たようなもので、エラーメッセージが示しているように、`openssl`のヘッダが見つからないという状態のため発生していました。
そこで、下記のようにopensslのヘッダファイルへのパスを`phpbrew` に渡すことで解決しました。

```
$ brew install openssl # Optional
$ phpbrew install 7.0.18 +default +openssl=$(brew --prefix openssl)
```

# インストール完了！

```
$ phpbrew use php-7.0.18
$ php -v
PHP 7.0.18 (cli) (built: Apr 22 2017 23:17:46) ( NTS )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.0.0, Copyright (c) 1998-2017 Zend Technologies
$ phpbrew switch php-7.0.18
$ phpbrew list
* php-7.0.18
```

まだ使い始めたばかりではありますが、phpenvと少し違うところがありました。
以前にphpenvを利用した時はrbenvと共存させるために少し手間が必要だったのですが（[phpenvとrbenvをMac共存させる - Qiita](http://qiita.com/sato_ryu/items/47db3277ad32a0d7b491)）、phpbrewだとそれが必要ありません。


# 参考

* [phpbrew installで fatal error: 'openssl/evp.h' file not foundが出た - わすれっぽいきみえ](http://kimikimi714.hatenablog.com/entry/2016/08/17/200000)
* [phpenvとrbenvをMac共存させる - Qiita](http://qiita.com/sato_ryu/items/47db3277ad32a0d7b491)
ターミナル学習まとめ

1年経っていたので再度ブラッシュアップ

#ターミナル学習メモ

###１.新規ファイル作成

`touch ◯◯.txt`

→◯◯ファイルを作成

###2.新規ファイル作成して編集

`vi(vim) ◯◯.txt`

→◯◯ファイルを作成し、編集エディタを開く

###3.文書の中身を確認

`cat ◯◯.txt` -> とりあえず読み込んで末尾にフォーカス
`less ◯◯.txt` -> スクロールができる
`vi(vim) ◯◯.txt`

###4.ディレクトリを作成

`mkdir ◯◯`
　※make direction の略
→◯◯という名前のディレクトリを作成。

一気に階層のあるディレクトリを作成

`mkdir -p xyz/abc/test`
※[javacommonsさん](https://qiita.com/javacommons)、ありがとうございます。

###5.ディレクトリ(ファイル)を移動する

`cd ◯◯`
 ※current directoryの略
例) cd Desktop/directory1/directory2

→編集したいディレクトリ(ファイル)に移動。

###6.ディレクトリ(ファイル)の名前編集

mv 変更したいディレクトリ名(ファイル名) 変更後のディレクトリ名(ファイル名)
※moveの略

例） 
`mv beforeName.text afterName.txt`

###7.ファイルをコピーする

`cp ~/Desktop/test.php ~/Downloads/test.php`
※copyの略
例) 
`cp ./copiedFile.php ~/Desktop/`

ディレクトリコピーの場合
例） 
`co -R ./public ~/Desktop/`

###8.ディレクトリを削除する

`rm ファイル名`
`rm -R ディレクトリ名`
※ディレクトリの削除に関しては-Rを記入。

###9.階層を戻る

ホームディレクトリへ戻る:　　`cd`
一つ上のディレクトリに戻る：　　`cd ..`
直前にいたディレクトリに戻る：　　`cd -` ※[arco5pianoさん](https://qiita.com/acro5piano)、ありがとうございます。
特定のディレクトリに移動する：　　`cd ~/Desktop/test/`

###10.確認作業

現在使用しているディレクトリを確認：　　`pwd (print working directionの略)`
現在使用しているディレクトリの中身のディレクトリ、ファイル一覧を表示： `ls (listの略)`

###11. ディレクトリの情報をみる

今いるディレクトリ内のファイルやディレクトリの情報を閲覧

```
shun:tests matsumurashun$ ls -la
total 0
drwxr-xr-x   3 matsumurashun  staff    96  9 24 04:22 .
drwx------@ 55 matsumurashun  staff  1760  9 24 04:22 ..
-rw-r--r--   1 matsumurashun  staff     0  9 24 04:22 test.txt
```
※listの略
※`-l`は隠しファイル（.envのように.がつくファイル）は含まずに表示します
※`-a`は隠しファイルを含んで表示します
※`-la`は上記二つのオプションを一気に指定しています

指定したディレクトリ内のファイルやディレクトリの情報を閲覧

```
shun:Desktop matsumurashun$ ls -la ./tests
total 0
drwxr-xr-x   3 matsumurashun  staff    96  9 24 04:22 .
drwx------@ 55 matsumurashun  staff  1760  9 24 04:22 ..
-rw-r--r--   1 matsumurashun  staff     0  9 24 04:22 test.txt
```
いちいちディレクトリに移動しなくても閲覧可能なので便利。

###12. 検索する
ファイル内の文字列を検索
例） test.logの'ERROR'を検索して表示

```
$ cat ./test.log | grep 'ERROR'
```
※`|`はパイプと言います。

ファイル内の指定した文字列以外を検索
例） test.logの'ERROR'を抜いて検索

```
$ cat ./test.log | grep -v 'ERROR'
```

ファイル内の指定した文字列以外を検索しつつ、特定の文字列を検索
例） test.logの'ERROR'を抜いて検索しつつ、'INFO'という文字列を検索

```
$ cat ./test.log | grep -v 'ERROR' | grep 'INFO'
```
※パイプは区切りと覚えればいいです。

更新性のあるファイルをリアルタイムで表示
例） test.logのアクセスログをリアルタイムで表示させる

```
$ tail -f ./test.log
```
※これをPCでとりあえずやっておけば、仕事してる感が出ます。

###13. 過去に打ったコマンドをもう一回使いまわしたい

```
$ history
```
※.bash_historyという隠しファイルに保存されている内容が表示されます。

特定のコマンドを履歴から探したい

```
$ history | grep ssh
shun: matsumurashun$ history | grep ssh
  300  vagrant ssh
  768  history | grep ssh
  770  ssh 111.111.11.11
  771  history | grep ssh

// コピペはめんどくさいというかたへ
// 番号を!の後に打てばその番号のコマンドが実行されます
shun: matsumurashun$ !300 (vagrant sshが実行される)
```

便利なショートカットコマンド

```
ctrl + r
```
-> 履歴からキーワード検索

例）`ctrl + r` で出てくるフォームに `rails c` と入力すると、history | grep "rails c" と同じ結果がリアルタイムで表示される。同じ検索キーワードで履歴を遡る場合は`ctrl` を押した状態で `r` を再度押す。

※scpとか、秘密鍵のパスをたまにタイポするのでこっちの方が正確に迅速に業務を推進できます。

まだまだ実力不足なので、みなさんもコアなコマンドを知っていたら是非教えてください。
DockerにElasticsearchを


> [root@Dockh ~]# docker pull docker.elastic.co/elasticsearch/elasticsearch:5.3.0
Trying to pull repository docker.elastic.co/elasticsearch/elasticsearch ... 
5.3.0: Pulling from docker.elastic.co/elasticsearch/elasticsearch
3690ec4760f9: Pull complete 
f52154c3d3fc: Pull complete 
4075cc5db14a: Pull complete 
2d52f619a2d6: Pull complete 
8bb7b04253b3: Pull complete 
1cb5a2a95e15: Pull complete 
e2f60cff0f2f: Pull complete 
9eb2cf345f74: Pull complete 
ff68f5fa0401: Pull complete 
90f6e7841041: Pull complete 
Digest: Digest: sha256:56ac964338bc74f3874d63271433f6555648d55405a89c96f56a18dee48456eb
[root@Dockh ~]# docker images
REPOSITORY                                      TAG                 IMAGE ID            CREATED             SIZE
docker.elastic.co/elasticsearch/elasticsearch   5.3.0               ccec59a7dd84        3 weeks ago         206.4 MB
[root@Dockh ~]#


docker-compose.yml


```
[root@Dockh ~]# cat docker-compose.yml
version: '2'
services:
  elasticsearch:
    image: docker.elastic.co/elasticsearch/elasticsearch:5.3.0
    container_name: elasticsearch
    environment:
      - cluster.name=dev-kibana-cluster
      - node.name=dev-kibana-01
      - bootstrap.memory_lock=true
      - xpack.security.enabled=false
      - xpack.monitoring.enabled=true
      - xpack.watcher.enabled=false
      - xpack.graph.enabled=false
      - xpack.monitoring.history.duration=1d
      - "ES_JAVA_OPTS=-Xms1g -Xmx1g"
    ulimits:
      memlock:
        soft: -1
        hard: -1
      nofile:
        soft: 65536
        hard: 65536
    mem_limit: 2g
    memswap_limit: 2g
    cap_add:
      - IPC_LOCK
    volumes:
      - es_data1:/usr/share/elasticsearch/data
    ports:
      - 9200:9200
    networks:
      - kibana_net
    logging:
      driver: "json-file"
      options:
        max-size: "10m"
        max-file: "10"
  kibana:
    image: docker.elastic.co/kibana/kibana:5.3.0
    container_name: kibana
    environment:
      ELASTICSEARCH_URL: "http://elasticsearch:9200"
      XPACK_MONITORING_ELASTICSEARCH_URL: "http://elasticsearch:9200"
      XPACK_SECURITY_ENABLED: "false"
    ports:
     - 80:5601
    networks:
      - kibana_net
    mem_limit: 2g
    memswap_limit: 2g
    depends_on:
      - elasticsearch
    logging:
      driver: "json-file"
      options:
        max-size: "10m"
        max-file: "10"

volumes:
  es_data1:
    driver: local

networks:
  kibana_net:
    driver: bridge
```

```
[root@Dockh ~]# docker-compose up -d
Starting elasticsearch
Starting kibana
[root@Dockh ~]# docker-compose ps
    Name                   Command               State                Ports               
-----------------------------------------------------------------------------------------
elasticsearch   /bin/bash bin/es-docker          Up      0.0.0.0:9200->9200/tcp, 9300/tcp 
kibana          /bin/sh -c /usr/local/bin/ ...   Up      0.0.0.0:80->5601/tcp             
[root@Dockh ~]# 
```
Xamarin.iOSでPickerViewを描画する方法

Xamarin.iOSでPickerViewを描画する方法です。

# StoryBoard
iOS DesignerもしくはInterface Builderで、StoryBoardでUIPickerViewを配置して、Identifierをセットします。

# コード
## ViewController
ViewDidLoadメソッドで、StoryBoardでセットしたUIPickerViewのModelに、これから自分で作るUIPickerDataModelクラスを継承したサブクラスのインスタンスをセットします。

大事なのはUIPickerViewで選択された値をViewControllerで検知しないと、その後の処理で使えないので注意です。そのためにクラスのフィールドに、検知した値をセットする変数を設けておきましょう。

```csharp
public partial class ViewController : UIViewController
	{
		int selectedItemId;
		protected ViewController(IntPtr handle) : base(handle)
		{
			// Note: this .ctor should not contain any initialization logic.
		}
		public override void ViewDidLoad()
		{
			base.ViewDidLoad();
			// Perform any additional setup after loading the view, typically from a nib.
			// UIPickerViewを生成する
			var pickerDataModel = new pickerDataModel();
			Picker.Model = pickerDataModel;
			pickerDataModel.ValueChanged += (sender, e) =>
			{
				selectedItemId = itemPickerDataModel.SelectedItem.Item1;
			};
		}
	}
```

## UIPickerViewModelのサブクラス
UIPickerViewModelのサブクラスでは必須メソッドの他に、Eventプロパティを設けて、選択されたときに値が変わったことを通知できるようにします。

以下の例ではItemというクラスがあって、ItemIdとItemNameというプロパティがあるということにします。

```csharp
public class pickerDataModel : UIPickerViewModel
	{
		// プロパティの変更を検知するプロパティ
		public event EventHandler<EventArgs> ValueChanged;
		// Pickerに表示するデータを格納するフィールド
		List<Item> items = new List<Item>();
		// 選択された値を取得するメソッド
		public Tuple<int, string> SelectedItem
		{
			get
			{
				var returnType = new Tuple<int, string>(items[selectedIndex].ItemId, items[selectedIndex].ItemName);
				return returnType;
			}
		}
		int selectedIndex;
		// コンストラクター
		public pickerDataModel()
		{
			items = new List<Item>();
		}
		// カラム数
		public override nint GetComponentCount(UIPickerView pickerView)
		{
			return 1;
		}
		// 行数
		public override nint GetRowsInComponent(UIPickerView pickerView, nint component)
		{
			return items.Count;
		}
		// 文字列取得
		public override string GetTitle(UIPickerView pickerView, nint row, nint component)
		{
			return items[(int)row].ItemName;
		}
		// 選択されたときの挙動
		public override void Selected(UIPickerView pickerView, nint row, nint component)
		{
			selectedIndex = (int)row;
			if (ValueChanged != null)
			{
				ValueChanged(this, new EventArgs());
			}
		}
	}
```

このサイトを参考にしました。
[SIN@SAPPOROWORKSの覚書](http://furuya02.hatenablog.com/entry/20140617/1403035602)
あともう1つ参考にしたサイトがあったのですが、失念…探し出せたら再掲します。
[Swift]Dictionary<Key, Value>型

# ``Dictionary<Key, Value>``型

- キーと値のペアを持つコレクション
- キーをもとに値にアクセスする
- キーはアクセス対象の識別に使用されるため一意でなければならない
- ``Key``と``Value``はプレースホルダ型
- 糖衣構文(シンタックスシュガー)
  - ``Dictionary<Key, Value>`` → ``[Key: Value]``

## 辞書リテラル

  ```Swift:辞書リテラル
  let dictionary = ["a": 1, "b": 2]
  ```

### 型推論

- ``Key``型はキーの型から推論
- ``Value``型は値の型から推論

    ```Swift:辞書リテラルの型推論
    let dictionary = ["a": 1, "b": 2] // [String : Int]型
    ```

- 空の辞書リテラルの場合、要素が存在しないので型推論できない
  - 型アノテーションにより型を明示する必要がある

    ```Swift:空の辞書リテラル
    let dictionary: [String: Int] = [:] // 空の辞書
    ```

- キーや値に複数の型が混在する場合、型推論によって型が決定できない
  - 型アノテーションにより型を明示する必要がある
  
    ```Swift:複数の型が混在する辞書リテラル
    let dictionary: [Hashable: Any] = ["a": 123, 2: "abc"]
    ```

### キーと値にできる型

- 正式には``Dictionary<Key : Hashable, Value>``型
  - ``Key``型には制限がある
     - ``: Hashable`` → 型制約
       - ``Key``型を``Hashable``プロトコルに準拠したものに制限
         - ハッシュ値がキーの一意性の担保や探索などに必須であるため
  - ``Value``型には制限はない

    ```Swift:値に配列を持つ辞書リテラル
    // [String : Array<Int>]型
    let dictionary = ["even": [2, 4, 6, 8], "odd": [1, 3, 5, 7, 9]]
    ```

- ``Key``型と異なる型のキーや``Value``型と異なる型の値を設定した場合はコンパイルエラー

## ``Dictionary<Key, Value>``型の操作

### 値へのアクセス

- サブスクリプト
  - 引数: ``Key``型の値
  - 存在しない値にアクセスしようとしても実行時エラーにならない
      - ``Optional<Value>``型の値を返却
      - アクセスした値が``nil``でないことをチェックしてから値を使用する必要がある

    ```Swift:値へのアクセス
    let dictionary = ["Key": 1]     // [String : Int]型
    let value = dictionary["Key"]   // 1(Optinal<Int>型)
    ```

    ```Swift:値のnilチェック
    let dictionary = ["Key1": "Value1"]
    let valueForKey1Exists = dictionary["Key1"] != nil  // true
    let valueForKey2Exists = dictionary["Key2"] != nil  // false
    ```

### 値の更新/追加/削除

- サブスクリプト
  - 引数: ``Key``型の値
  - 代入演算子``=``
     - 指定したキーがすでに存在する場合は値の更新
     - キーが存在しない場合は値の追加
     - nilを設定した場合は値の削除

     ```Swift:値の更新/追加/削除
     // 更新
     var dictionary1 = ["Key": 1]
     dictionary1["Key"] = 2
     dictionary1 // ["Key": 2]

     // 追加
     var dictionary2 = ["Key1": 1]
     dictionary2["Key2"] = 2
     dictionary2 // ["Key1": 1, "Key2": 2]

     // 削除
     var dictionary3 = ["Key": 1]
     dictionary3["Key"] = nil
     dictionary3 // [:]
     ```
Reactノート4(React,Babel,webpack,PostCSS )

###Reactトレーニング
React,Babel,webpack,PostCSS
参照: http://gihyo.jp/magazine/wdpress/archive/2017/vol97

---

![スクリーンショット 2017-04-22 22.38.48.png](https://qiita-image-store.s3.amazonaws.com/0/62264/14ddd94d-6902-a644-0a8e-a97f1254d58e.png)

![スクリーンショット 2017-04-22 22.44.29.png](https://qiita-image-store.s3.amazonaws.com/0/62264/4736896c-0be5-0472-65c7-37b12cf722b6.png)

#package.json

```package.json

{
  "name": "spa-note",
  "private": true,
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.26.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "postcss-easy-import": "^1.0.1",
    "postcss-loader": "^1.1.1",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-router": "^3.0.0"
  }
}
```
- webpackのバージョンは1系

#webpack.config.js

```webpack.config.js

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
//エントリーポイント
  entry: {
    js: './src/main.js',
    css: './src/main.css',
  },
  output: {
    path: './public',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
//css-loaderとpoctcss-loaderを指定してCSSファイルをwebpackでビルドする
        loader: ExtractTextPlugin.extract('css-loader!postcss-loader'),
      },
    ],
  },
//変換対象のファイルを監視して変更があったら自動再変換、自動でリロードを行う。
  devServer: {
    contentBase: './public',
    inline: true,
    port: 8080,
    historyApiFallback: true,
    stats: {
      version: false,
      hash: false,
      chunkModules: false,
    },
  },
//extractTextPluginを使い、CSSファイルを外部ファイルとして出力するよう設定
  plugins: [
    new ExtractTextPlugin('bundle.css'),
  ],
//ワイルドカードを指定して@importができるプラグインを使う
  postcss: [
    require('postcss-easy-import')({ glob: true }),
  ],
  devtool: 'source-map',
};
```

#.babelrc

```babelrc
{
  "presets": ["es2015", "react"]
}
```

#index.html

```index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet" href="/bundle.css">
</head>
<body>
<div id="app"></div>
<script src="/bundle.js"></script>
</body>
</html>
```

#src/main.js

```src/main.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
　<h1>demo</h1>,
　document.getElementById("app")
);
```

#src/main.js

```main.css

@import 'styles/base.css';
```

#src/styles/main.js

```base.css

h1 {
  padding:20px;
  font-size:30px;
  color:#F00;
}
```


#ビルド実行

```
$ ./node_modules/.bin/webpack 
```

#サーバー起動

```
$ ./node_modules/.bin/webpack-dev-server
```

https://webpack.github.io/docs/webpack-dev-server.html
Vagrantでローカル開発環境をする。

```ruby:環境
　　virtualbox 5.1
　　vagrant　1.9.3
　Cyberduck　5.4.4
```

### Vagrantでローカル開発環境が必要なのか

自分の疑問点
　自分は、ターミナルとMacのデスクトップでrubyの開発をやっていた。　そもそもVagrantでローカル開発する必要あるの？と疑問が湧いた。

![Mac-desktop-jp.jpg](https://qiita-image-store.s3.amazonaws.com/0/167576/e731a902-250a-4059-4e1c-c6fb8a154b57.jpeg)

答え
 . サーバーの多くは、　Linux OSを使用している。Linusとは、　OSの種類です。代表的windows、osxです。　つまり、サーバーで使うのは、Linusを言う別のOSのために、windowsで作ると、正しく動作しない可能性がある。

そうならないために、

Vagrantでローカル開発環境をする必要がある。

### Vagrantインストール

・まずVitualBoxをインストールする。
https://www.virtualbox.org/

次にvagrantをインストールする。
https://www.vagrantup.com/

ターミナルで確認する
``
　$ vagrant -v
```
vagrant　1.9.3が帰ってきたらオーケー

Cyberduckをインストールする。
https://cyberduck.io/index.ja.html?l=ja
SpacemacsでGo言語の開発を快適にするための設定

最近趣味でGo言語を触っています。
エディタでまったくGo用の設定を行ってなかったのですが、この度さくっと設定できたので記載しておきます。

普段、エディタはEmacs9割Atom1割な感じで使用しているのですが、EmacsはSpacemacsを使って開発しています。

このSpacemacsを使っていれば、Go用のエディタ環境が数分でできます。
[GO layer](https://github.com/syl20bnr/spacemacs/tree/master/layers/%2Blang/go)を見て少し試しただけなうえ、Goに関してもまだ触り始めたばかりですが、開発中に自動でフォーマットされたりビルドする前にエラーやワーニングがあれば教えてくれたりするので便利。

以下の順で導入できます。
(GoのインストールやGOPATHの設定などが終わってること前提)

## Goのライブラリをインストール
Spacemacsで設定を記述する前の下準備として、`gocode`や`godef` 他にimport周りを自動でいい感じにしてくれる`goimports`などのライブラリを事前にダウンロードしておきます。

```shell-session
$ go get -u -v github.com/nsf/gocode
$ go get -u -v github.com/rogpeppe/godef
$ go get -u -v golang.org/x/tools/cmd/guru
$ go get -u -v golang.org/x/tools/cmd/gorename
$ go get -u -v golang.org/x/tools/cmd/goimports
```

Go用のlintツール、`gometalinter` を使いたい場合は以下のようにして入れておく。

```shell-session
$ go get -u -v github.com/alecthomas/gometalinter
$ gometalinter --install --update
```

## Spacemacsで設定
あとはSpacemacsの設定ファイル`.spacemacs`の`dotspacemacs-configuration-layers`部分にGoの設定を記述します。
[GO layer](https://github.com/syl20bnr/spacemacs/tree/master/layers/%2Blang/go)を参考にしつつ、使いやすくなるよう適宜設定します。

```config:.spacemacs
dotspacemacs-configuration-layers
'(
  go
  (go :variables
      go-use-gometalinter t
      go-tab-width 4
      gofmt-command "goimports")
)
```

プラスして、`auto-completion`、`syntax-checking` なども未設定の場合は設定しておくと幸せになれそうです。

以上。

これでGoの開発も快適に楽しめそう。
Xamarin.iOSでTableViewを描画する方法

#サマリ
Xamarin.iOSでTableViewを生成する方法が日本語でまとまっていないと思ったので、まとめました。Xamarin.iOSでは、UITableViewControllerのサブクラスとUITableSourceのサブクラスを使います。C#では2つ以上のクラスの継承ができないため、swiftで書くときのようにDelegateとDataSourceを継承するようなことはしません。

##StoryBoard
###1.TableViewとTableViewCellをセットする

iOS DesignerかInterface Builderを使って、ViewControllerにTableViewとTableViewCellをセットします。

###2.iOS Designerで、TableViewのIdentityのNameをセットする

iOS Designerで、作成したTableViewをクリックします。右下のプロパティにあるIdentityのNameに、任意の値をセットします。UITableViewControllerのサブクラスで使います。私が知る限り、Interface BuilderだとTableViewのIdentityのNameをセットできないですが、もし間違えていたらコメントください。

###3.iOS DesignerかInterface BuilderでTableViewCellのIdentifierをセットする

iOS DesignerかInterface Builderで、作成したTableViewCellをクリックします。iOS
 Designerだと、右下のプロパティにあるTable View CellのIdentifierに、任意の値をセットします。UITableViewSourceのサブクラスで使います。

Interface BuilderはXCodeの使い方で検索すれば出てきますので割愛。

## コード
###1.ViewDidLoadで、TableViewのSourceプロパティに、UITableViewSourceを継承したサブクラスのインスタンスをセットする

```csharp
public override void ViewDidLoad()
		{
			base.ViewDidLoad();
			// 配列でもListでもどちらでも
			var list = new List<string>();
			TableView.Source = new tableViewSource(list);
		}
```

###2.UITableViewSourceクラスを継承したサブクラスを実装する

```csharp
public class tableViewSource : UITableViewSource
	{
		readonly List<Item> list = new List<string>();
		public SharedTableViewSource(List<string> _list)
		{
			list = _list;
		}

		public override nint RowsInSection(UITableView tableview, nint section)
		{
			return list.Count;
		}

		public override UITableViewCell GetCell(UITableView tableView, Foundation.NSIndexPath indexPath)
		{
			var cell = tableView.DequeueReusableCell("任意の名前");
			var item = list[indexPath.Row];
			cell.TextLabel.Text = item.name; // 任意のプロパティ
			return cell;
		}
	}
```

これでできます。

UITableViewControllerで描画するデータを取得して、Sourceに引き渡したのは、描画するデータが変わったときにEventを取得して、再描画（ReloadData）するためです。ReloadDataはこの例だと、TableView.ReloadData()で実行できます。