OmniAICreator/Qiita-1.07M huggingface dataset:
MacのPCを買って最初にやる環境設定

#はじめに
自分はいつもPC（Mac）を購入したら、最低限揃える環境があり、
毎回行うので備忘録としてまとめた。


#入れるソフトウェア
デフォルトのターミナルより、使いやすい
**iTerm2**
https://www.iterm2.com/

PHPやHTML/CSSとJSを書くために
**eclipse**
（最新バージョンは、Neon）
http://www.eclipse.org/downloads/

iOSのアプリ開発のため**Xcode**
https://itunes.apple.com/jp/app/xcode/id497799835?mt=12

Androidのアプリ開発のため
**Android Studio**
https://developer.android.com/studio/index.html


VRアプリ開発のため
**Unity**
https://unity3d.com/jp/get-unity/download

をインストールしている。

あとは、**MAMP**っていうものも入れたりする。


MAMP（マンプ）は「**M**acintosh」「**A**pache」「**M**ySQL」「**P**HP」の頭文字を合わしたもので、このMAMPはPHPの開発環境として使われるのだが、MySQLも一緒に使えて便利です。

データ送信に使うFTPインストールや、SQLデーターベースの構築準備など
難しいところを自分であれこれ考えなくても、ある程度良い感じにやってくれるとてもいいやつ。これ一つでがっつりした環境が一つ出来上がるので魅力的。

 

#使用できる開発言語

これで言語的には、

iTerm2でvim使えるし
pythonやRubyもデフォルトで入ってるからかける。

eclipseで
**Eclipse RSE Plugin**という
リモートシステムエクスプローラー使えば
自分が開設したさくらのサーバー上の
ファイルをPHPやJS（HTML/CSS）でかける。

XcodeでSwift(Objective-C)もかけるし、Android Studioでも Javaがかける。

UnityではJSとC#をかける。

結構色々と言語を使えるものがこれで揃う。



``` :使える言語まとめ
HTML
CSS
JS
PHP
MySQL
C#
Java
Python
Ruby
Swift
Objective-C
```


　（Pythonは機械学習で勉強するときに使えるライプラリがかなりあるので、ディープラーニングとかの勉強するのにも とても良い。）

#最後に
バージョン管理には、**git**をいつも使うので、
基本`git init`してからプロジェクトの作成を始める。

ちなみに、今の自分の使っているPCは
MacBook Airだが、容量的にはこれだけ入れても重くはなってない。
（開発をガンガンしていて、大きなファイルがたくさんできてきたら別だが）

あとは、デザイン系では
Sketchとイラレとかは入れる時もあるが、これはMacBook Proの時のみ。

![スクリーンショット 2017-06-18 18.00.04.png](https://qiita-image-store.s3.amazonaws.com/0/134919/b048b0b7-cb29-1919-0197-d71a3a3a50e2.png)　　![スクリーンショット 2017-06-18 18.00.16.png](https://qiita-image-store.s3.amazonaws.com/0/134919/30407479-1a25-92e5-4978-f5dac68a8860.png)

LICEcapというデスクトップ上での動きをキャプチャーできるものも
よく記事の中でgifとかをあげるのでインストールする。

![スクリーンショット 2017-06-18 18.00.11.png](https://qiita-image-store.s3.amazonaws.com/0/134919/2306e078-5ff2-35c7-bc6e-25f0e728ebe3.png)
Pythonで残差分析（補足：コクランの規則）

# はじめに
クロス集計表の検定に[χ二乗検定](http://qiita.com/ynakayama/items/67ddb321a8ce5b07274c)というのがあって、それをやるとカテゴリー同士の関連（たとえば男はお茶を好むが女は水を好むなど）を統計的に検定することができる。χ二乗検定そのものについて詳しく知りたい人は上のリンク参照。
ただχ二乗検定を行うにあたっては２つほど注意点があり、たとえp値が有意水準を下回ったとしても

1. カテゴリー別に見てもサンプル数が十分に確保されているか
+ 実際にどのカテゴリーとどのカテゴリーが関連しているのか

を検討する必要がある。結局χ二乗検定で検定しているのはクロス集計表全体の偏りの有無であり、検定結果が有意になったとしてもすべてのカテゴリーの組み合わせに関連がみられたということではないのだ。

# コクランの規則
本来はχ二乗検定をやる前に確かめておく必要がある基準である。χ二乗検定の適用基準として**クロス集計表の期待値が５未満のセルが全体の２０％以上になってはいけない**というのがあるが、これが**コクランの規則**にあたる。「２０％以上」の部分には諸説あり「２５％以上」「２０％より大きく」など色々な表記をみかけます。
Pythonでχ二乗検定を行う場合は[scipy.stat.chi2_contingency](https://docs.scipy.org/doc/scipy-0.15.1/reference/generated/scipy.stats.chi2_contingency.html)を使うことが多いと思うので、この関数が返す期待値表を使ってコクランの規則を確かめる。

```python
# χ二乗検定　crossはnumpy２次元配列です
x2, p, dof, expected = stats.chi2_contingency(cross)
expected = np.array(expected)
# コクランの規則
expected < 5
```
これでTrueのセルが全体の２０％未満であればコクランの規則を満たしている。
もしもデータがこの規則を満たさないことが分かった場合は[フィッシャーの正確確率検定](https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A3%E3%83%83%E3%82%B7%E3%83%A3%E3%83%BC%E3%81%AE%E6%AD%A3%E7%A2%BA%E7%A2%BA%E7%8E%87%E6%A4%9C%E5%AE%9A)に移行するのがいいだろう。

# 残差分析
Rでχ二乗検定をすれば検定と同時に各セルの調整済み標準化残差を返してくれるので問題ないのだが、Pythonの場合は手計算でやる必要がありそうだ。
残差の定義は
`残差 = 観測値 - 期待値`
であるが、調整済み標準化残差を算出するために、新たに**残差分散**というものを定義する必要がある。

```math
残差分散 = (1 - \frac{横周辺和}{総数})(1 - \frac{縦周辺和}{総数})
```
具体的にどういうものかっていうのは、下の参考サイトを参照してください。
とにかくこれをもとに、調整済み標準化残差が

```math
調整済み標準化残差 = \frac{残差}{\sqrt{期待値*残差分散}}
```
のように計算できます。
ここまでの流れをPythonコードで書くとこんなかんじ。

```python
# 残差
res = cross - expected
# 残差分散を求める
res_var = np.zeros(res.shape)
it = np.nditer(cross, flags=['multi_index'])
while not it.finished:
    var = (1 - (cross[:,it.multi_index[1]].sum() / cross.sum()))*(1-(cross[it.multi_index[0],:].sum() / cross.sum()))
    res_var[it.multi_index[0], it.multi_index[1]] = var
    it.iternext()
# 調整済み標準化残差を求める
stdres = res / np.sqrt(expected * res_var)
# この調整済み標準化残差が絶対値1.96以上になれば有意な差を主張できます。ここでは正規分布表から値をp値に直して表示しています。
np.apply_along_axis(stats.norm.sf, 0, np.abs(stdres[0,:]))
```
お役に立てましたでしょうか？

# 参考サイト
[https://note.chiebukuro.yahoo.co.jp/detail/n71838](https://note.chiebukuro.yahoo.co.jp/detail/n71838)
VS Codeでユーザー入力input()を取得する

#１．アクティビティバーからデバッグをクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187698/681a8641-8166-4603-c7bf-269985eaeb79.png)
#２．デバッグ[▶]の右隣[▼]をクリックして、[integrated Terminal/Console]を選択する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187698/30cc2c49-53b3-7c5d-295c-22cac9563cd7.png)
#３．デバッグの開始[▶]をクリックする。(または[F5]を押す。)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187698/36b9dda5-5b20-eee0-9911-f4613a4fccb9.png)
#４．続行[F5][▶]をクリックするとターミナル画面の一番下の[□]に入力出来るようになる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187698/53b9f00f-9c11-d8e5-ddc4-aaecc30ce2b6.png)
#５．入力する。
nodistの基本操作

## nodistとは

WindowsでNode.jsのバージョン管理を行うためのツールです。
他にも、nodebrewやnvmなどがあり、こちらはMacやLinuxで利用できるようです。

## nodistでできること

Node.jsの各バージョンのインストール・アンインストールと、バージョン切り替えができます。

## よく使うコマンド

### nodistインストール時に使うコマンド

##### **nodistに関する依存ファイルをアップデートする**

```text
nodist selfupdate
nodist update
```

### Node.jsのインストール・アンインストール

##### **最新バージョンのNode.jsをインストール**

最新安定版
```text
nodist stable
```
最新版
```text
nodist latest
```

##### **指定バージョンのNode.jsをインストール**

```text
nodist add v7.2.0
nodist + v07.2.0
```

##### **指定バージョンのNode.jsをアンインストール**

```text
nodist rm v7.2.0
nodist - v7.2.0
```

### インストールされたNode.jsの確認・切り替え

##### **インストールできるNode.jsのバージョン一覧を見る**

```text
nodist dist
nodist ds
```

##### **インストールされているNode.jsのバージョン一覧を見る**

```text
nodist list
nodist ls
nodist
```

##### **Node.jsバージョンの切り替え**

```text
nodist use v7.2.0
nodist v7.2.0
```
Model Validationの順序

`ValidationAttribute`・`IValidatableObject`の`Validate()` を使ってバリデーションを行うコードを実行していたら、`Validate()`が呼び出されないことがあったので、何が起きているのか調べてみました。

## Modelバリデーションの処理の呼び出しには順序がある
- Propertyレベルのバリデーション
- (↑でバリデーションに引っかかったら、この時点でエラーを返し、バリデーション中断)
- Objectレベルのバリデーション
- (↑でバリデーションに引っかかったら、この時点でエラーを返し、バリデーション中断)
- `IValidatableObject` の`Validate`メソッド

## コード
- 各レベルのバリデーションを実装したので、良ければ動かしてみてくださいませー

```csharp:ExampleController.cs
public class ExampleController: Controller
{
	{
		[HttpPost]
		public ActionResult CustomValidationExample(ExampleInputModel inputModel)
		{
			if (ModelState.Values.Any(v => v.Errors.Count != 0))
			{
				var errorMessage = ModelState.Values.First(v => v.Errors.Count != 0).Errors.First().ErrorMessage;
				return Content(errorMessage);
			}

			return Content("Errorはなかったよ");
		}
}
```

```csharp:ExampleInputModel.cs
[NotNullInputModelAtrribute(ErrorMessage = "objectレベルのバリデーションに引っかかったよ")]
public class CustomValidationTestInputModel : IValidatableObject
{
	[Required(ErrorMessage = "propertyレベルのバリデーションに引っかかったよ")]
	public string RequiredProperty { get; set; }

	public bool IsInvalidModel { get; set; }

	[AttributeUsage(AttributeTargets.Class)]
	private class NotNullInputModelAtrribute : ValidationAttribute
	{
		public override bool IsValid(object value)
		{
			var inputModel = value as CustomValidationTestInputModel;
			if (inputModel.IsInvalidModel)
				return false;

			return true;
		}
	}

	public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
	{
		yield return new ValidationResult("ValidatableObjectのバリデーションに引っかかったよ");
	}
}
```

```csharp:Example.cshtml
@using (Html.BeginForm("CustomValidationExample", "Projects", new AjaxOptions { HttpMethod = "POST" }))
{
	<p>空にするとPropertyレベルのエラーを発生させられるよ</p>
	@Html.TextBox("RequiredProperty", null, new { style = "display: block" })
	<p>チェックを付けるとObjectレベルのエラーを発生させられるよ</p>
	@Html.CheckBox("IsInvalidModel", new { style = "display: block" })
	@Html.SubmitButton()
})
```

## 参考
http://jeffhandley.com/archive/2009/10/16/validator.aspx
git SSH 複数 鍵で 運用

# SSH key config で複数HOST 運用

git hubなどで複数アカウントを運用したい場合など、ssh key を複数作成したいときなどあるでしょう、

そんな時は下記の方法で対応

```
Host github.com
  User git <- ユーザー名
  Port 22　　<- ポート
  HostName github.com　<- (&*_*).oO ドメイン
  IdentityFile ~/.ssh/ami <- ssh-keygen で作成した秘密鍵を指定。
  TCPKeepAlive yes　<- 接続状態を継続したい場合：yes　継続しない場合：no
  IdentitiesOnly yes <- IdentityFileが必要な場合：yes　必要ない場合：no
Host shichimi.com
    User git
    Port 22
    HostName github.com
    IdentityFile ~/.ssh/id_rsa
    TCPKeepAlive yes
    IdentitiesOnly yes


```

上記を.ssh/config ファイルに記述したら、ssh で接続します。

```
# ssh -T Host で指定した名前を記入
ssh -T git@shichimi.com 

```

成功すると下記文言が出力されます。
Hi suzuya-shichimi! You've successfully authenticated, but GitHub does not provide shell access.
Twitter(TweetDeck)の丸くなったアイコンを元に戻すCSS

最近丸くなったTwitter（TweetDeckも）のアイコン、どうやらCSSでborder-radiusを指定しているだけっぽいので、stylish（ChromeやFirefoxの拡張機能）/cssで元に戻してみる。

```css
.avatar {
  border-radius: 5px !important;
}
```

上はちょっとだけ丸みを残している。完全に四角にしたければ0pxとか指定したらいいんじゃないだろうか（未確認）。
オープンフィールドなRPG風ゲームを作る 5ワールド目

# プレイヤーの状態を管理する

前回作成した状態管理系のクラスを使って、プレイヤーの状態を管理していきます

今のプレイヤーは、一定時間ごとに違うモーションを取るだけですが、
これを1つのステート(状態)として分離します
コードはこんな感じ

``` Player.cs
using UnityEngine;

public class Player
{
	//!	@brief	プレイヤー作成情報
	public struct PlayerCreateParam
	{
		public GameObject	model;		//!< モデル
		public Animator		anim;		//!< アニメーション制御
	}

	//!	@brief	待機ステート
	private class StayState : IFSMState
	{
		private const float				SP_STAY_ANIM_TIME		= 5.0f;									//!< 特殊待機モーションを再生するまでの時間
		private static readonly int		ANIM_TRIG_SP_STAY		= Animator.StringToHash("spStay");		//!< 特殊待機モーション再生アニメーショントリガー

		public string	name	{ get; }		//!< ステート名

		public StayState(string name, Player player)
		{
			this.name	= name;
			_player		= player;
		}

		//!	@brief	開始処理
		//!	@return	なし
		public void entry()
		{
			_stayTimer = SP_STAY_ANIM_TIME;
		}

		//!	@brief	実行処理
		//!	@param	[in]	fsm		ステートマシン
		//!	@return	なし
		public void execute(FSMSystem fsm)
		{
			_stayTimer -= Time.deltaTime;
			if( _stayTimer > 0.0f ) return;

			if( _player != null ) {
				_player.setAnimTrigger(ANIM_TRIG_SP_STAY);
			}
			_stayTimer = SP_STAY_ANIM_TIME;
		}

		//!	@brief	終了処理
		//!	@return	なし
		public void exit()
		{
		}

		private Player	_player		= null;		//!< プレイヤー
		private float	_stayTimer	= 0.0f;		//!< 待機時間タイマー
	}

	//!	@brief	ステート
	private static class State
	{
		public static string	Stay	{ get { return "stay"; } }
	}

	//!	@brief	コンストラクタ
	public Player()
	{
		_fsm.initialize(new IFSMState[] {
			new StayState(State.Stay, this),
		});
	}

	//!	@brief	作成
	//!	@param	[in]	param	プレイヤー作成情報
	//!	@return	なし
	public void create(PlayerCreateParam param)
	{
		_model	= param.model;
		_anim	= param.anim;
	}

	//!	@brief	初期化
	//!	@return	なし
	public void initialize()
	{
	}

	//!	@brief	更新
	//!	@return	なし
	public void update()
	{
		_fsm.execute();
	}

	//!	@brief	アニメーショントリガーの設定
	//!	@param	[in]	id		パラメーターID
	//!	@return	なし
	private void setAnimTrigger(int id)
	{
		if( _anim == null ) return;

		_anim.SetTrigger(id);
	}

	private GameObject		_model		= null;					//!< プレイヤーモデル
	private Animator		_anim		= null;					//!< アニメーション制御

	private FSMSystem		_fsm		= new FSMSystem();		//!< ステートマシン
}
```

ゲーム的な動作には何も変わりはありませんが、
プレイヤー自身が待機中に何をするのかを意識しなくていい実装になりました

次回は移動ステートを実装して、フィールドを歩き回れるようにしてみます
HP ProLiant MicroServerレビュー


#HP ProLiant MicroServer
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187693/d89dfd56-6143-d113-dd3f-6ecec5baae4a.png)

スペックは以下の通り

HP ProLiant MicroServer HSTNS-5151 AMD Athlon
HDD無
Turion II Neo N40L 1.5GHz
4GB

これで6999円でした。個人的には安いと思う。

#メリット
・値段の割にメモリ4GBはありがたき
・サーバにしては実にコンパクト。正方形だしhpというロゴが光っているのもなんか洒落乙
・インターフェースカードが正常であれば、hpのサービスとしてKVM(リモートコンソール)が使用できる
⇒参照：http://cloud.watch.impress.co.jp/docs/special/402687.html

![image.png](https://qiita-image-store.s3.amazonaws.com/0/187693/95f607ff-d80f-a5eb-4492-e19b7bf5890e.png)



#デメリット
・Ubunchuぐらいしか認識をしてくれない(なぜかは不明、Centもそれ以外もNG)
・ほこりが異常にたまる

![image.png](https://qiita-image-store.s3.amazonaws.com/0/187693/1cd9a0eb-8a4e-6523-7432-1aa1884b08e0.png)


デメリットはむしろこれぐらいですね。できればもう一台ほしい勢いです。
現在はこのサーバはクラウドストレージ用として使ってます。かなり安定稼働です。
FileMakerServer13の管理コンソールをStylish使って少し見やすくする

# 前書き
[当協会](http://www.piano.or.jp)では悲しいことにいまだにFileMakerServer 13を動かしているのですが、管理コンソールのファイル一覧が高さが足りずにたいへん見づらいです。もっと一覧性を！

今までずっと、見づらい見づらいと思いながらも我慢していたのですが、いよいよ本日、我慢しきれなくなりましたので、ChromeExtensionの[Stylish](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=ja)を使って、heightを広げて見やすくしてみました。

# 宛てたCSS

``` css
.v-tabsheet-content,
.v-tabsheet.v-widget.v-has-width {
  height: 100% !important;
}

.v-tabsheet-tabsheetpanel,
.v-splitpanel-vertical.v-splitpanel-vertical.v-widget.v-has-width.v-has-height,
.v-tabsheet-content > .v-tabsheet-tabsheetpanel > .v-scrollable > .v-verticallayout.v-layout.v-vertical.v-widget.v-has-width .v-splitpanel-first-container.sv-scrollable {
  height: 1000px !important;
}
```

# before
![image.png](https://qiita-image-store.s3.amazonaws.com/0/37739/d7e435ee-37d3-5f9b-a6aa-500ef794fc98.png)

# after
![image.png](https://qiita-image-store.s3.amazonaws.com/0/37739/d250aaca-1031-c15d-3d4a-66f8f1e76a88.png)



……見やすくなったはずです！
【Android】 ProGuard利用時にGsonでMissing type parameterが出るときの対策

## 概要
ProGuard利用時にGsonで`Missing type parameter`のエラーが出たときの対処法メモです。


## エラー内容
```
java.lang.RuntimeException: Missing type parameter.
```

## 対策
以下のような指定を追加すればOK

```
# Application classes that will be serialized/deserialized over Gson
-keep class com.google.gson.examples.android.model.** { *; }
```

`com.google.gson.examples.android.model.**`の部分は例なので自分のアプリのパッケージまたはクラスを指定する。


## 参考
- [android - proguard Missing type parameter - Stack Overflow]
(http://stackoverflow.com/questions/8129040/proguard-missing-type-parameter)
- [gson/proguard.cfg at master · google/gson]
(https://github.com/google/gson/blob/master/examples/android-proguard-example/proguard.cfg)
LINEでこんなのあったらいいなを実現する

# 最初に

LINEでこんなことがやりたい！

って話がたくさん来るので

LINEのAPIを色々使って開発してみる。

---

# 来ている話

- ネットからLINEに誘導したい
- 誰の紹介で来たのか分かるようにしたい
- LINEに来たら自動でクロージングしてほしい
- アンケートを取りたい
- 性別や年齢などで分割して情報を配信したい
- 最後まで動画を見た人にだけ次を送りたい
- LINEを使って稼ぎたい

---

# Let's try

ということで

やれるものからやって

できたものから

記事を書いていくことにします。
勉強会のためのTIPSまとめ

# この勉強会のためだけの記事です

https://techplay.jp/event/623796

## サンプルアプリ

https://codepen.io/ksyunnnn/pen/jwVxmw


## 絵文字を使いたい

HTMLソースの最初にこれを書けば使えます。

```
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/117615/5bfc7957-48b8-066e-c55f-7a951f5c0c26.png)

利用しているのはこのサイトです。
https://afeld.github.io/emoji-css/

## グラフを描画する


```
/*
pprn : 採点データ
chart: 描画するcanvasタグに付与したid
*/

function drow(pprn,chart) {
  var data = {
      labels: [],
      datasets: [
          {
              label: "紳さんぺペロン日和",
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: []
          }
      ]
  };
  Object.keys(pprn).forEach(function (key) {
    data.labels.push(key);
    data.datasets[0].data.push(pprn[key]);
  });
  var ctx = document.getElementById(chart).getContext("2d");
  var options = {
    scaleOverride : true,
    scaleSteps : 20,
    scaleStepWidth : 10,
    scaleStartValue : 0,
    scaleLabel: "<%=value%> 点"
  };
  new Chart(ctx).Line(data, options);
}```
プログラミング 3 か月目

プログラミングを始めて 3 か月が経とうとしています。

　だんだんと難しい概念が登場し、前に進みづらい状況ではありますが、それでも少しずつ前に進んでいっております。今回も前回と同じような感じで書いていきたいと思います。

#:pencil2: 進捗状況
**Progate**

PHP/Ruby : オブジェクト指向学習中（継承まで）
Python: Ⅲまで完結（関数・モジュール）　:new:
Java :　Ⅲまで終了（クラス・メソッド）　:new:
Ruby on Rails5 ：最近追加された道場編で定着を図る（学習編Ⅴまで完結）
Command Line　: GitHub を使うのでコマンドの学習を再開
Git: Command Line と同様の理由です

:warning: Ruby on Rails5 は 2017/6/18 現在、Ⅴまで学習できます。
　（Ⅹまであるのですが、Ⅵ～Ⅹは準備中のようです）

:warning:  今月はプログラミング言語を中心に学習しましたので、フロントエンド言語は特にありません。というより、Progate でのフロントエンド言語学習はほとんど全て済んだ感じで、あとは定着させるだけになりました。


#:pencil2: 新着事項
　3 か月目で新たに取り入れたことや、プログラミングで意識したことを書いていこうと思います。


###:pencil:  ポートフォリオサイト制作

　今まで学んだことの集大成として、ポートフォリオサイトを GitHub Pages にアップしてみようということで制作しました。切り貼りなところもありますが、何とか形に出来たと思います。

使用した言語

**Bootstrap**  　
　このサイトのベースとなっているもので、レスポンシブデザインに仕上げました（グリフアイコン、ナビバー、ジャンボトロン、メディアオブジェクト）

**HTML**
 　ポートフォリオサイトの骨格部分にあたるものです。コメント部分（何がどこにあるのか）をもう少し意識すれば効率が良くなったかもしれません。

**CSS**
　Bootstrap だけでは賄えないスタイリングの微調整を、別ファイルの外部の読み込みで行いました。

**jQuery** 
　ナビバーやボタンをクリックするとそのページにスクロールするという動きを実装しました。この実装で「イベントのバブリング」をいうのを初めて知りました。


###:pencil:  GitHub Pages でポートフォリオサイトをアップ
　GitHub Pagesにポートフォリオサイトをアップ出来るということで、今までほとんど触れていなかった Command Line や Git にかなり触れるようになりました。Progateで復習したり、調べたりとかなり大変でしたが、無事にアップすることが出来ました。



GitHub Pagesでアップしたポートフォリオはコチラ
**[My Portfolio](https://clefdelph.github.io/myportfolio/portfolio)**

#:star: 最後に
　
　 拙作ではありますが、自分で何かサイトを制作して完成したものをアップする一連のことができるようになったのは大きいかなと思います。上手くいかないことが多かったと思いますが、その分経験値がグンと上がったような気がします。

　まだ分からないことがたくさんありますが、一日でも早く上達できるように頑張りたいと思います。
[Swift4] privateにextensionからアクセスできる

## Swift4でできるようになること
`private`指定したプロパティやメソッドに同一ファイル内の`extension`からアクセスできるようになります。

```swift:sample.swift

struct someStruct {

    private let privateProperty = "private"
    fileprivate let fileprivateProperty = "fileprivate"
}

// 同一ファイル内のextensionじゃないとアクセスできない
extension someStruct {

    // privateなプロパティ・メソッドにアクセス可能（Swift3ではできなかった）
    func printPrivateProperty() {
        print(privateProperty)
    }
}

```

## `fileprivate`で嫌だったこと
個人的には`fileprivate`でモヤモヤすることがありました。

Swift３までの場合、`extension`で利用するために`fileprivate`指定する、ということはよくあるかと思います。
そうすると、スコープとしてはそのクラスや構造体内に留めておきたい、という場合に不都合がありました。
同一ファイル内の別のクラスや構造体等からアクセスできてしまうからです。

※`stored property`以外は`private`な`extension`内にまとめる、ということもできますが。
アクセス出来てしまうこと自体がしっくりきませんでした。

```swift:sample.swift

//  Swift3の場合

struct someStruct {

    // extension内で使いたいのでfileprivate指定
    fileprivate let fileprivateProperty = "fileprivate"
}

extension someStruct {

    func printFileprivateProperty() {
        print(fileprivateProperty)
    }
}

struct otherStruct {

    let some = someStruct()

    // fileprivateはアクセス可能
    // 意図どおりであればもちろんOKだが、
    // Swift3まではextensionのためのみに使うプロパティ・メソッドも
    // fileprivateにするしかなく、意図せぬアクセスが可能な状態になっていた
    func printSomeFileprivateProperty() {
        print(some.fileprivateProperty)
    }
}

```

## `private`でOKになって嬉しい
Swift4で上記が解消されます。
意図通りのスコープになって嬉しい！

```swift:sample.swift

struct someStruct {

    // someStruct内でのアクセスのみ許可したい
    private let privateProperty = "private"
    // sample.swift内でのアクセスを許可したい
    fileprivate let fileprivateProperty = "fileprivate"
}

// 同一ファイル内のextensionじゃないとアクセスできない
extension someStruct {

    // privateなプロパティ・メソッドにアクセス可能（Swift3ではできなかった）
    func printPrivateProperty() {
        print(privateProperty)
    }
}

// 意図通りのアクセスコントロールを実現できる
struct otherStruct {

    let some = someStruct()

    // someStruct外からはprivateにアクセス出来ない
    /*
    func printSomePrivateProperty() {
        print(some.privateProperty)
    }
     */

    // sample.swift内なのでfileprivatePropertyにアクセス可能
    func printSomeFileprivateProperty() {
        print(some.fileprivateProperty)
    }
}

```

## 注意
2017/6/18に`Xcode 9 beta`で検証しています。
beta版なので変更の可能性があります。ご了承ください。
golangのお勉強7


## go runすると受信許可のアラートが出る

macのセキュリティによるもの
対応としては下記が考えられた

* docker環境を実行環境とする
* 頑張ってセキュリティを回避

両方やってみたけど、、dockerの方はできそうな気はしたけど放置。
セキュリティ周りの調べ物は他でも知っておいていい気がしたので深掘り、、
macのファイヤーウォールは２つ用意されている。
パケットファイヤーウォールpfとソケットフィルタ（アプリごと）ファイヤーウォールsocketfilterfw
環境設定のやつはソケットフィルタに当たる

* pfはツールを使うと便利に使えるがデフォルトはソケットフィルタのみ有効状態
* ソケットフィルタのオプションでアンロックするとかリムーブするができる。
* pfcl,iceFloor,Murusなどでpfを制御すると便利らしい

os x - 80番ポートで起動させているnginxのWebサーバーに外部からアクセスできない - スタック・オーバーフロー
https://ja.stackoverflow.com/questions/6076/80%E7%95%AA%E3%83%9D%E3%83%BC%E3%83%88%E3%81%A7%E8%B5%B7%E5%8B%95%E3%81%95%E3%81%9B%E3%81%A6%E3%81%84%E3%82%8Bnginx%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AB%E5%A4%96%E9%83%A8%E3%81%8B%E3%82%89%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84

Command Line Firewall Management In OS X 10.10 - krypted.com
http://krypted.com/mac-security/command-line-firewall-management-in-os-x-10-10/

* node.jsの中にはfirewallを迂回するためのスクリプトがツールとして用意されていた

node/macosx-firewall.sh at master · nodejs/node
https://github.com/nodejs/node/blob/master/tools/macosx-firewall.sh

### PFとALF

* パケットフィルタならpfcl,iceFloor,Murusなど
* アプリケーションレイヤーフィルタならsocketfilterfw,Vallum(ライセンスによりMurusに含まれる)など

Vallum - macOS Application Firewall
https://vallumfirewall.com/


### docker環境でgolang

公式
on-buildは推奨しない的なことがかいてある。

library/golang - Docker Hub
https://hub.docker.com/_/golang/

onbuildを使った場合の実行事例（少々昔の情報）

Goの公式dockerイメージを使ってみた - Qiita
http://qiita.com/jpshadowapps/items/e5de997d70fb8ecae7da

### go runしたときのファイルの実体

macだと/privateの下にセキュアな一時フォルダを作っていれるっぽい。
環境によっては/tmpのときもあるのかも？？

/private/var/folders/04/xmzz_y854gdhogehoge0gn/T/go-build7hoge9746/command-line-arguments/_obj/exe/main

go-build.../command-line-argumentsに。。

### 回避方法の検討

go installやgo buildでファイルを作ってから、アプリを許可させて、そのあとで実行すればどうか。
go runのコマンドオプションで実体ファイルのパスを指定できないのか。


### プラグインを使う

使って見ればデバッグ情報を吐き出したりとか便利なのかも。firewall迂回をフックさせるとかどうなんだろう。

golang 1.8 pluginを使ってみた - Qiita
http://qiita.com/Blufe/items/39194868444179e36edb

### 結果

socketfilterfw --add <PATH>などはsudoしてもうまく動作しなかった(Sierra)

```
$ sudo /usr/libexec/ApplicationFirewall/socketfilterfw --remove "/hoge/main"
The file path you specified does not exist
```

環境設定の画面での操作で同じことができるのでそちらで対応した

そのうえでステルスモード（外部からのネットワーキングに対して息をひそめる）をオフにするとアラートが出ずに
`go run`できるようになった。ひとまず。しっくりこないけど。
たぶん本当はpfにするのがいい気がする。

追記：後日また同じようにアラートが出始めた
uiscrollviewからtouchesmovedを呼ぶには？ Swift3

[ここを参考にした](https://off.tokyo/blog/swift3%e3%81%a7uiscrollview%e3%81%8b%e3%82%89touchesmoved%e3%82%92%e5%91%bc%e3%81%b6%e6%96%b9%e6%b3%95/)
古いブログツールにiOS 10からメール投稿したら「文字化け」した件

# はじめに

iOS 10の標準MUAにTwitterやFacebookのアプリからコピーしたテキストを貼り付けて、古いブログツールにメール投稿すると、投稿の前後や途中に```?```が混じることがあります。
調べてみたところ、その原因はなんとBIDIでした。
メールの受信先がUnicode以外で文字を処理している場合には同等のトラブルが発生し得ます。本質的には文字列をすべての処理の過程でUTF-8で扱えばよいだけですが、とりあえずの応急処置もあります。

【追記】：この問題、先日、「WKWebViewのアドレスバーからWebページのURLをコピーし、それをFacebookの投稿に貼り付けただけで発生」しました。通常の投稿ですとLREなどはそのまま解釈されるのでふつうに表示されるだけですが、URL抽出でLREを拾って、そのままurlencodeされてしまったようです。 [→リンク先にLREが紛れたFacebookの例](https://www.facebook.com/izumi.yonezawa.31/posts/1873958456261042)

# 文字化けの例

![スクリーンショット 2017-06-18 13.13.55.png](https://qiita-image-store.s3.amazonaws.com/0/98308/80767b2f-bc7f-9a27-11a6-81c1923587c1.png)

私は旅行好きで、自分用オンラインアルバムとして旅ブログを開設しています。2004年の開始時はライブドアブログを使っていましたが、ほどなく運用を自宅サーバーに移し、はじめはBlogn、次にP_BLOGを導入して、今も後者での運用を続けています。いろいろプラグインも自作してまして、その中にはいわゆるモブログ機能、メールからの投稿機能もあります。
で、ガラケー、AndroidときてiPhoneに至るまで、ずっと順調に動作していたのですが…
iOSが10になってから、ときどき、文字化けというか、投稿テキストの前後や途中に、疑問符がつくようになったのでした。
ご覧のスクリーンショットの記事では、タイトルの前後に思いっきり、意図しない```?```がついてしまっています。（なお、タイトルの中の日本語も変ですが、これはコピペからの編集ミスです(^^;)）

# メール本文をダンプしてみた

![IMG_31052017_151621_0.png](https://qiita-image-store.s3.amazonaws.com/0/98308/ae358286-57e8-afcd-fd65-e7a477f10158.png)

どう考えても原因は何らかの文字コードトラブル。かつ、P_BLOGはなぜか「表示内容はUTF-8で出力するのにMySQLの文字コードはeucjp」という妙な実装になっており、この```?```は何か「未知の文字」を表しているに違いない、と見立て、iPhoneからのメールの本文を生ダンプしてみました（まるで旅と無関係の本文ですが、現象は同一です）。
結果は上のとおり。冒頭に```e2 80 aa```、末尾に```e2 80 ac```という、UTF-8にしては見慣れないバイト列があるわけです。

# 原因はBIDI

このバイト列、Unicodeにするとそれぞれ```U+202A```と```U+202C```。まさに、[BIDI_control characters](http://www.unicode.org/reports/tr9/#Directional_Formatting_Codes)の```Left-to-right embedding (LRE)```と```Pop directional formatting (PDF)```でした。
これをPHPの```mb_convert_encoding```でeucjpに変換しようとしても、そんな文字はないので、「変換不能」扱いで```?```に変換されていた、というわけでした。

これらは、iOS標準のMUAに、ふつうに日本語キーボードから文字列入力をした場合にはまぎれこみません。というかまぎれこませようがありません。
しかし、TwitterやFacebookのアプリから文字列をコピーして標準MUAにペーストすると、まさにこれらがまぎれこむことがあります。
私は旅行中にTwitter、Facebook、Instagram、そして旅ブログへと画像をリアルタイム投稿していますが、それぞれ文字数や画像添付数、ハッシュタグづけなどの違いがあるため、上記の順番でそれぞれ個別に送信します。そして制限がきついTwitter投稿をコピーして、それをFacebookに貼り付けて投稿します。場合によってはTwitterの複数の投稿をFacebookの1投稿にまとめることもあります。そして最後の順番になる旅ブログへの投稿は、TwitterかFacebookからのコピペとなることがほとんどなのです。
確かに、それらのアプリはBIDIに対応していて当然のもの。そしてiOS 10で突然、標準MUAなのかクリップボードなのかわかりませんが、文字列レベルでBIDI対応が登場したため、こういう現象が起きてしまったのでした。

# 応急処置

今回の「文字化け」の原因は、BIDI_control charactersがeucjpに変換不能、というものです。
「そもそもイマドキeucjpなんか使ってるの？」っていう話でしかないんですが、個人的には「1つの投稿に複数のカテゴリーを設定できる」というP_BLOGの機能の代替が他にあまりなく、「既に動いているもの」を捨てるまでではない、というところから、ごまかせるところはごまかしてなんとか使い続けたい、というずぼらです。
なので、今回も応急処置で逃げました。モブログ投稿処理の冒頭で、

```php
mb_substitute_character('none');
```
としただけです。
virtualbox上のVMでkibanaとelasticsearchを動かす

# 概要
この記事通り行うと、virtualbox上で作成したCentOS7で
elasticsearchとkibanaを動かせます。

# この記事を書いたきっかけ
[公式のチュートリアル](https://www.elastic.co/jp/videos/getting-started-elasticsearch?elektra=home&storm=banner) をみるとサクッとできそうなのに
サクッとできなくて、困ったから書きました。  
具体的にはmacに直接インストールしたり、クラウドサービス上の
サーバでやったときはサクッとできたのに、
virtualbox上のVMで行ったらconfigファイルを書き換えないと
アクセスできなかったので、解決方法を記載します。

# 前提
- インターネットに接続できるVMが起動していること
- ホストオンリーアダプタで疎通が取れること

## バージョンとか諸設定
- ホストOS：macOS sierra 10.12.5  
- ゲストOS：CentOS Linux release 7.3.1611 (Core)  
- elasticsearch：elasticsearch-5.4.1  
- kibana：kibana-5.4.1
- virtualboxの設定  
    - ネットワークアダプタ  
        - NAT：DHCP
        - ホストオンリーアダプタ：DHCP  
        （ゲストOSには192.168.56.101が割り振られています。）

# 準備

## elasticsearchのダウンロードと展開
公式ホームページからcurlでダウンロードしてtarで展開する。
`curl https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.4.1.tar.gz | tar zxf -`

## kibanaのダウンロードと展開
公式ホームページからcurlでダウンロードしてtarで展開する。  
`curl 'https://artifacts.elastic.co/downloads/kibana/kibana-5.4.1-linux-x86_64.tar.gz' | tar xzf -`

# configファイルの書き換え

## elasticsearchのconfig.ymlの書き換え
- 書き換えの対象ファイル

`展開したディレクトリ/elasticsearch-5.4.1/config/elasticsearch.yml`

- 書き換え内容

```
# Set the bind address to a specific IP (IPv4 or IPv6):
#
#network.host: 192.168.0.1
network.host: 192.168.56.101  ＜- ホストオンリーアダプタのインターフェイスのIPアドレスを入力。
（中略
#
# Set a custom port for HTTP:
#
#http.port: 9200
http.port: 9200  ＜- コメントアウトを外す。
#
# For more information, consult the network module documentation.
#
```

## kibanaのconfig.ymlの書き換え
- 書き換えの対象ファイル  
`展開したディレクトリ/kibana-5.4.1-linux-x86_64/config/kibana.yml `
- 書き換え内容

```
# Kibana is served by a back end server. This setting specifies the port to use.
#server.port: 5601
server.port: 5601  <- コメントアウトを外す。
# To allow connections from remote users, set this parameter to a non-loopback address.
#server.host: "localhost"
server.host: "192.168.56.101"  ＜- localhostをホストオンリーアダプタのインターフェイスのIPアドレスに書き換え。
（中略
# The URL of the Elasticsearch instance to use for all your queries.
#elasticsearch.url: "http://localhost:9200"
elasticsearch.url: "http://192.168.56.101:9200"  ＜- localhostをホストオンリーアダプタのインターフェイスのIPアドレスに書き換え。
```

## elastiscsearch の実行
`展開したディレクトリ/elasticsearch-5.4.1/` に移動して、
以下のコマンドで実行。
`bin/elasticsearch &`

## kibana の実行
`展開したディレクトリ/kibana-5.4.1-linux-x86_64/` に移動して
以下のコマンドで実行。
`bin/kibana &`

## ブラウザでアクセスする。
`http://192.168.56.101:5601` でアクセスすればOK。

# おまけ：elasticsearchへのデータの登録
[公式のチュートリアル](https://www.elastic.co/jp/videos/getting-started-elasticsearch?elektra=home&storm=banner) をみるのがヨイヨイ！
sshクライアントRLoginで円記号問題の解決方法

# 内容

windowsのsshクライアントRLoginを使った時に、バックスラッシュが表示されず円記号になる問題の解決方法です。

# 環境

## クライアント側
- Windows 10
- RLogin 2.22.3

## サーバー側
- Raspberry pi 2

# 解決方法
1. サーバ接続設定でフォントを選択する。
![rlogin02.PNG](https://qiita-image-store.s3.amazonaws.com/0/5067/235ef628-fc53-0fc4-3bdb-75fb77a7e30f.png)

2. フォントセットにある「ASCII(ANSI X3.4-1968)」を選択して編集ボタンを押してフォントパラメータ画面を表示。
![rlogin03.PNG](https://qiita-image-store.s3.amazonaws.com/0/5067/66daac33-d426-5a56-2f67-9dab37904b5d.png)

3. 「94/96の場合にISO646での変更可能な文字を設定」の右にある「ISO646」のボタンを押します。この時、右側に円記号（￥）が表示されています。
![rlogin05.PNG](https://qiita-image-store.s3.amazonaws.com/0/5067/8c1498e3-9d8d-2fd1-9cde-a12ac6748dc7.png)
4. 円記号の左のプルダウンメニューから「U+FF3C」に変更するとバックスラッシュ（\）に変わります。
![rlogin06.PNG](https://qiita-image-store.s3.amazonaws.com/0/5067/7ea0d43b-74c9-6681-c6e7-41e6a868c443.png)
5. これでサーバに接続するとバックスラッシュが表示されるようになります。

# さいごに

円記号問題はRLoginの[マニュアルページ](http://nanno.dip.jp/softlib/man/rlogin/#ISO646)にも記載がありますが、実際の設定方法がよくわかりませんでした。
ここに書いたのは、やってみたら出来たといった感じで、何か間違いや不具合があるかも知れませんので自己責任でお願いします。
間違いや他に良い方法があれば教えてください。
AWS データ蓄積アイテムのサイズ上限

# 何
AWSサービスの最小保存単位の最大サイズ一覧

## DynamoDb 400KB
- 属性名の長さと属性値の長さを含むサイズ
- 特徴：（限定的な）クエリーもかけるKVS。集計はできない。lambdaのイベント発生元になれる。
- サービス種類：リージョンサービス


## ElastiCache(Redis) 1GB
- SET(key, value) のvalueの制限
- 特徴：KVS。FIFOとしても使える。
- サービス種類：AZサービス

## SQS 256 KB
- メッセージサイズ
- 特徴：FIFO。厳密な順序保証はなし。
- サービス種類：リージョンサービス

## RDS(mysql) 64KB 
- 最大行サイズ(TEXT,BLOBのデータは別領域)
- 特徴：クエリーかける。集計できる。
- サービス種類：AZサービス

## S3 5TB
- オブジェクトのサイズ
- 特徴：ストレージ。athenaでクエリーもかける？lambdaのイベント発生元になれる。
- サービス種類：リージョンサービス

## Redshift ??
- サイズ制限に関する情報が見当たらず
- 特徴：クエリーかける。集計めっちゃ早い。管理や設計が難。
- サービス種類：AZサービス


## サービス種類について
- リージョンサービス：リージョン単位のサービス。AZ単位の障害の考慮不要
- AZサービス：AZ単位のサービス。AZ単位の障害の考慮必要。（バックアップ、フェイルオーバー、リードレプリカ、など）
CSS Variables(カスタムプロパティ) は CSS Animation と使うと幸せ

この記事のタイトルを見て「なんだこの記事 SCSS と CSS 間違えてるのか？」と思った方もいらっしゃるかと思いますが、間違いでもデマでもありません。

CSS では SCSS のように変数をつかうことができます。

その CSS の変数 (Variables) と CSS Animation を使えば幸せになれるのではないかと思いました。

## どう幸せになれるのか？

ここでの [CSS Animation](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) とは、 `@keyframes` で定義したアニメーションを `animation` プロパティで指定して使うものとします。

```css:例
@keyframes anim {
  from {width: 0}
  to {width: 100%}
}

.anim {
  animation: anim .2s;
}

``` 

![Peek 2017-06-18 12-45.gif](https://qiita-image-store.s3.amazonaws.com/0/104663/816879f3-3a6c-2307-7a58-49f7d7a70ebc.gif)

さて、では上のような終了時の値だけが違う場合はどう書きますか？
全てのパターンを `@keyframes` で書いていきますか？
JavaScript で終了時の値を動的に作らなければならない場合は？

…… :spaghetti: になることは想像に難くありません。

アニメーションの一部分だけ変える、という時にこの CSS Variable が大活躍します。

```html:HTML
<div class="anim anim-1"></div>
<div class="anim anim-2"></div>
<div class="anim anim-3"></div>
```

```css:CSS
@keyframes anim {
  from {width: 0}
  to {width: var(--max)}
  /* ポイント: @keyframes 内で変数を参照できる */
}

.anim {
  background: #1bb8f3;
  height: 30px;
  margin: 10px;
  width: 0;
  animation: anim linear 2s infinite alternate;
}

.anim-1 {
  --max: 50%;
}

.anim-2 {
  --max: 30%;
}

.anim-3 {
  --max: 10%;
}
```

このように書くと変数 `--max` の値を変えるだけで終了時のみが違うアニメーションを作れます。

```js:JavaScript
const el = document.createElement("div");
el.classList.add("anim");
el.style.setProperty("--max", Math.random() * 100 + "%");
// ランダムな終了時の値を指定
// ポイント: element.style.setProperty で変数を指定できる
anims.appendChild(el);
```

また、JavaScript で動的にアニメーションを生成することもできます。

![Peek 2017-06-18 13-17.gif](https://qiita-image-store.s3.amazonaws.com/0/104663/82e18d35-7e5d-155d-4ebb-9fada4cb6761.gif)


[CodePenにてデモを公開しています。](https://codepen.io/ygkn/pen/awpKPO)

## おわりに

CSS Variables、もっと面白そうな使い方ができそうです！
CSS の関数も次々にいろいろなのが出てきてどんどん便利になっていってます。



## 参考

[CSS Variables(カスタムプロパティ)でCSSがより便利に！ - Qiita](http://qiita.com/kyota/items/bd5d291809415cc2d7b1)

[CSSの変数を使う - CSS | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_variables)
gnuplotとgrepの速攻グラフ作成

今までグラフを描くときにIPythonばかり使っていたのですが、
「ログファイルから該当箇所だけ抜き出して即グラフ化して状況把握したい。3秒で！」ということが仕事上多くなってきました。
IPythonだと、IPython起動して、データファイルをオープンしてグラフ表示するまでに4,5行のコードが要りますよね。
gnuplotとgrepコマンドの組み合わせでもっとサクッとやる方法のメモです。
gnuplotのインストールは apt-get で問題ありません。

# ここで使うデータファイル
適当なのが見つからなかったので、top > top.txt してしばらく放置したものをデータとします。
firefoxのCPU利用率とメモリ利用率をプロットすることにします。
以下のようなデータが一定時間分あるのが top.txt と思ってください。
![Screenshot at 2017-06-18 12-24-41.png](https://qiita-image-store.s3.amazonaws.com/0/187660/bfaa261e-6369-4d52-1334-5ba5d6b76aab.png)
grep で firefox のところだけ抜きだすとこんな感じ。
でもgrepしたものをいちいち別ファイルにするのは手間だからやりたくない。
![Screenshot at 2017-06-18 12-31-54.png](https://qiita-image-store.s3.amazonaws.com/0/187660/882d409f-5df8-0da3-934a-a88bf03e25db.png)

# プロット手順
基本的には以下のみです。
1. gnuplotの対話モードに入る(1行)
2. プロットする(1行)

## gnuplot の対話モードに入る(1行)
terminal上で gnuplot と入力するのみです。IPythonで言うなら ipython -i と同じようなモードに入ります。
![Screenshot at 2017-06-18 12-40-34.png](https://qiita-image-store.s3.amazonaws.com/0/187660/c00a54f4-c69a-053b-c08f-64f593544c4d.png)

## プロットする(1行)
```
plot '< grep firefox top.txt' using 10 w l
```
で以下のグラフが表示されます。

- < はリダイレクト的なものです。 > は要らないので注意。' 'の中に直接Linuxコマンドが書けます。
- using 10 の 10 はプロットする列です。using 1:2 などとすれば x軸に1列目、y軸に2列目でやってくれる。
- w l は with line の意味です。w lp とやれば linepointsになる。
  
![sample1.png](https://qiita-image-store.s3.amazonaws.com/0/187660/74972a76-d8b2-0058-f5de-f6ac0148ce8a.png)

複数列プロットしたいならば、カンマで続けて書く。凡例は title で付けられます。
```
plot '< grep firefox top.txt' using 10 w lp title 'CPU', '< grep firefox top.txt' using 11 w l title 'MEMORY'
```
![sample2.png](https://qiita-image-store.s3.amazonaws.com/0/187660/4c5c6441-b90f-9ec3-f152-9f529009136f.png)

# 備考
対話モードに入らずとも、terminal上から直接やることも可能です。
```
terminal$ gnuplot -p -e 'plot "< grep firefox top.txt" using 10'
```
といった感じで。
オプションが要らず覚えやすいという意味でこの方法を記載しました。
私もgnuplot初心者なので、より良い方法があればご教示いただけると幸いです。


おわり
[CTF] OverTheWire Bandit Level 0〜9

#はじめに
大学の特別講義みたいなのでOverTheWireのBanditというCTFのような問題を解いているという話を耳にしたので、自分もやってみた。
#OverTheWire Bandit とは
あらかじめ用意された"bandit.labs.overthewire"というサーバーにユーザー"bandit0〜26"としてsshし、パスワードを探す。各ユーザーの数字は問題のレベルを表しており0から順に解いていく。パスワードは次のレベルのユーザーにsshするためのパスワードとなっている。
といった感じ！

#Level 0
"bandit.labs.overthewire" にユーザー名"bandit0"、ポート番号"2220",パスワード"bandit0"でsshして終わり。
`$ ssh bandit0@bandit.labs.overthewire.org -p 2220`

#Level 0〜1
ホームディレクトリに"readme"があるのを確認して、catなどで表示する。
`$ ls`
`$ cat readme`

#Level 1〜2
ホームディレクトリの"-"というファイルに次のレベルへのパスワードがあるらしい。
しかし`$ cat -`などしても"-"がオプション扱いされて表示できない。
なので`$ cat ./-`などでパスから指定して表示する。

#Level 2〜3
ホームディレクトリの"spaces in this filename"というファイルにパスワードがある。
ファイル名に空白が入っているので、ファイル名指定の際に空白を"\"(Windowsでは"￥")でエスケープする。
実際にはshの補完機能を使えば一発なのでtabで解決。
`$ cat spaces\ in\ this\ filename`

#Level 3〜4
ホームディレクリの"inhere"というディレクトリにパスワードがあるらしい。
`$ cd inhere/`で移動して`$ ls`でファイルを確認するも何も見つからない。
これはパスワードのあるファイルが"."から始まる隠しファイルになっているから。
lsで隠しファイルを表示する-aオプションをつけてファイル名を確認したら中身を確認して終わり。
`$ ls -a`

#Level 4〜5
ホームディレクリの"inhere"というディレクトリにパスワードがあるらしい。
inhereに移動してlsすると、-file00〜-file09までの10個のファイルがある。
それぞれのファイルについて"file"コマンドで調べる(先頭が"-"なのでLevel1〜2と同様にパスを指定する)と、"-file07"だけASCII textのファイルであることがわかる。
これをcatするとパスワードがわかる。

#level 5〜6
ホームディレクトリの"inhere"というディレクトリ以下にパスワードがあるらしい。
inhereに移動してlsすると、maybehere00〜19の20個のディレクトリがある。
試しに00に移動してls -aしてみると、９個のファイルがあることがわかる。
全ディレクトリにこの数あるとすると、全て調べるのはだるいのでfindコマンドを使っていい感じに探す。
パスワードファイルには、

* 人間が読める(今まででの問題からしてASCII text?)
* 1033byte
* 実行ファイルでない

という条件がある。
とりあえず1033byteという条件を使うことにする。
"inhere"ディレクトリで`$ find -ls|grep 1033`を実行することで見つけられる。
コマンドの説明としては、"find"でカレントディレクトリ以下のファイル、ディレクトリを再帰的に検索、"-ls"オプションでls形式で表示、"grep 1033"でファイルサイズを指定　という感じ。
もっと他の方法もありそう。

#Level6〜７
このサーバのどこかにパスワードがあるらしい。
条件としては、

* 所有ユーザーは"bandit7"
* 所有グループは"bandit6"
* ファイルサイズは33byte

といった感じ。
とりあえずfindコマンドとgrepコマンドで条件を全部突っ込んで検索してみる。
`$ find / -ls |grep -w 33|grep bandit7 |grep bandit6`
すると、/var/lib/dpkg/info/bandit7.passwordというファイルがヒットする。
条件も全て満たすので、おそらくこのファイルで正解なのだが、"permission denide" が大量に出てきて五月蝿い。
このエラー出力は 2>/dev/nullで消すことができる。
これは標準エラー出力の番号である2を/dev/null(いわゆるブラックホールファイル)に入れることでエラーが出力されなくなるため。
最終的なコマンドは
`$ find / -ls 2>/dev/null|grep -w 33|grep bandit7 |grep bandit6`

#Level 7〜8
"data.txt"の中にパスワードがあるらしい。
とりあえずcatしてみるとものすごい量のテキストが、、、
`wc -l data.txt`してみると98567行もあった:)
問題文をみると"next to the word <b>millionth</b>"とあるのでgrepで指定して終わり。
`$ cat data.txt|grep millionth`

#Level 8〜9
"data.txt"の中にパスワードがあるらしい。
とりあえずのcatで大量に文字が出てくるのも嫌なので`ls -l data.txt`でサイズ確認。
やっぱりでかい、、、
問題分を見ると"is the only line of text that occurs only once"とのこと。
どうやらテキストの殆どの行は重複していて唯一重複していない行が本物のパスワードらしい。
"uniq"コマンドを使うと連続する行を削除することができるので、sortしたあとにuniqコマンドに-uオプション(重複していいない行のみを表示)をつけて終わり。
`$ sort data.txt |uniq -u`

#Level9〜10
"data.txt"の中にパスワードがあるらしい。
問題文を見ると

* human-readable strings
* beginning with several '=' characters 


との条件があるのでそれにしたがって検索する。
stringsコマンドで表示可能な文字を出力。
なおかつ、"いくつかの'='で始まる"という条件をgrepで指定する。
`$ strings data.txt |grep '=\+'`
こんなコマンドで発見できた。(grepの'\+'は直前の文字一個以上の繰り返しに一致という正規表現)

#終わりに
とりあえず今日はここまで。
忘れてたコマンドの使い方とか思い出せて結構楽しい。
Levelがまだ低いから割と易しい。
[Level 10〜19はこちら](http://qiita.com/ketch/items/ce46b38fe515da6fbaae)
mkdocsのビルド時に「ConfigurationError: Line in 'page' config is of type <type 'NoneType'>, dict or string」 というエラーメッセージが表示された場合の対処法

mkdocsで勉強用ノートをまとめてるのですが、ある日記事を保存した際に、
「ConfigurationError: Line in 'page' config is of type <type 'NoneType'>, dict or string」というエラーがでてしまい、ローカルのサーバで起動できなくなってしまいました。

# 原因

mkdocs.yml ファイルの、pages:部分にハイフンだけの箇所があったことが原因でした。。
mkdocsを使い始めた人は参考にしてみてください。

# エラーになった mkdocs.yml 

※ pages:部分のみを抜粋しています。

    pages:
    - HOME: index.md
    - サーバサイド編:
         - JSPとか基礎: servlet.md
    　　 - ディレクティブとか: dir.md
         - JSPとServletの連携: jsp_servlet.md
         - リダイレクトとフォワード: redirect_forward.md
    - Spring編:
         - DIなど:di.md
         - springboot:boot.md
         - 
         - MVC:mvc.md
Deep Learning・データサイエンス用のpython環境を手早く構築（Windows）

## 環境
OS: Windows 10 (Surface Pro4）
GPUはなし

## 手順

### conda環境の構築

- 新規でインストール：
    - Minicondaを以下のサイトからダウンロードしてインストール
    - https://docs.conda.io/en/latest/miniconda.html
    - `Miniconda3-latest-Windows-x86_64.exe`を利用
    - 2018/06/10現在では、conda4.5.4・python3.6.5がデフォルトでインストールされる
- condaのアップデート
    - Anaconda Promptから以下を実行：`conda update conda`
 
### 環境構築

- condaでディープラーニング用途の仮想環境を作り必要なモジュールをインストール
    - スタートメニューからAnaconda Promptを起動
    - 仮想環境の作成：`conda create -n env_name python=3.7`
        - pythonのバージョンは任意
    - 仮想環境のアクティベーション：`conda activate env_name`
    - 必要なモジュールのインストール：conda pip それぞれからインストール可能なモジュールが多いが、condaを優先する
        - condaからの：`conda install numpy scipy sympy pandas scikit-learn matplotlib seaborn pillow ipython cython pytest jupyter m2w64-toolchain Werkzeug pyyaml tensorflow keras opencv`
    - pipからのインストール：`pip install ipdb`
- 動作確認

## pycharmでのプロジェクト作成
- Create New Projectを選択し、任意の場所、任意の名前でプロジェクトを作成する。
- 作成時にProject Interpreterを聞かれた場合は、`(install_path)\Miniconda3\envs\env_name\python.exe`を指定
    - 作成後の変更：File>Settings>Project:project_name>Project Interpreterから

## アップデート
- condaでインストールしたもののアップデート：`conda update --all`
- pipでインストールしたもののアップデート：`pip install module_name -u`
はじめてUnityでVRアプリを作ってみた時の話

#はじめに
2016年、VR元年ということもあり、興味があったVRアプリを
Unityで作ってみることにした。言語はC#で開発した。
（作ったのは去年のことだが、忘れないためのまとめ）

Unityを初めて触るので、本当に参考書を読んで、基本からイジリながらゲームを作ったのだが、意外と、直感的にサクサク地面や木なども作ることができて便利だった。

Unityは最新版を公式ホームページからダウンロードした。
https://unity3d.com/jp/get-unity/download/archive

#プラグインの導入
![unity_install05.png](https://qiita-image-store.s3.amazonaws.com/0/134919/666367aa-c03a-90c9-8076-29f350806d50.png)


これで、GoogleのCardboard用プラグインや、
iOSのAKKit用のプラグインなどをimportすることができる。

今回は、VRアプリを作るということで、
Googleの**Cardboardプラグイン**をいれた。


スマホ画面が左右で２分割されるアレ。
![IMG_1151.PNG](https://qiita-image-store.s3.amazonaws.com/0/134919/cd057c62-31cd-ddc2-f6ce-f979c2ca42b2.png)

これをVR用のHMDでみるとVR空間へと誘われる仕組み。

（ちなみに、iPhone5sの画面で最初アプリの動作を試していたが、5sだと画面がかなり小さいので、7とかplus系が良さげ）

#はじめての開発
１日あれば、自分が作った空間（上の写真のような森など）の中で
歩くようなことまでUnityだと簡単に試せる。

自分は角度を決めて、ある程度水平位置より下を向くと
カメラ視点が前に進んでいくように指定して歩いている感じを出した。


コード的には、これ。

```
using UnityEngine;
using System.Collections;

public class walk : MonoBehaviour {
	
	public Camera mainCamera;
	public float moveSpeed  = 12.0f;
	public float moveAngleX = 15.0f;

	float yOffset;

	// Use this for initialization
	void Start () {
		yOffset = mainCamera.transform.position.y;
	}

	// Update is called once per frame
	void Update () {
		// 1.カメラの傾きを取得
		float x = mainCamera.transform.eulerAngles.x;

		// 2.ある角度以内であれば前進させる
		if (moveAngleX < x && x < 35.0f) {
			moveFoward ();
		}
	}

	private void moveFoward() {
		Vector3 direction = new Vector3 (mainCamera.transform.forward.x, 0, mainCamera.transform.forward.z).normalized * moveSpeed * Time.deltaTime;
		Quaternion rotation = Quaternion.Euler (new Vector3 (0, -mainCamera.transform.rotation.eulerAngles.y, 0));
		mainCamera.transform.Translate (rotation * direction);
		mainCamera.transform.position = new Vector3 (mainCamera.transform.position.x, yOffset, mainCamera.transform.position.z);
	}

}
```

moveSpeedは、実際にVR空間内を歩いてみて
周りのオブジェクトから相対的に考えて
速度を決めた。

moveAnglexも、同様にアプリを触りながら
体感的に一番良さげなもので設定。（今回は15~35度の範囲）

最終的に作ったアプリはiOSプラットフォームで出力し、
自分のiPhoneにいれて遊べるようにした。


#最後に
実際は、はじめてVRアプリを作成して完成するまでに
もっと色々なことを試してみた。省力下部分が多いので、その部分はまとめて また追記予定。
（Assetストアからフリーのassetを使う / ユニティーちゃんを自在に動かす / 物理判定 / 自分の視点をトリガーにアクションを起こすなど）
【R】ブログ本文中からからキーワードの前後を抽出する

# やりたいこと
- 分析対象を削減するためにキーワード前後の文章を抽出
- 文中であれば句読点(, . [tab] [space])を判断して文章全体抽出
- 前後 xx文字 or xx単語 で制限→この場合文章がどれだけ削減できるのか試算

# code
[Ubuntu 16.04 64bit版]wine32bit版を設定できた

Ubuntu 16.04 64bit版を使用

　
wineはデフォルトで64bit版がインストールされてしまう。
・・・と思っていたが、調べてみると一応64bit/32bit両方対応しているらしい。

普通にインストールして普通に起動すると64bit版で起動してしまう。
なので、32bit版で起動するよう設定する。

　
wineを起動するとホームディレクトリに「.wine」という隠しフォルダが作成される。
これがwineの設定ファイルとか入ってるフォルダになる。
このフォルダが存在しない状態で下記コマンドを叩く。


```
WINEARCH=win32 wineboot
```

　
すると、環境変数「WINEARCH」が設定される。
あと「wineboot」によって作成処理が行われる。
これで「.Net Framework4.0」などがインストールできるようになった。

　
※注意点※
環境変数を設定するときに様々なサイトで

```
export WINEARCH=win32 winecfg
```

または、

```
export WINEARCH=win32
```

などのコマンドでの記載があったが、私の環境ではできなかった。

　
もし、上記コマンドでうまくいかないようであれば、
私が試した方法を使ってみてください。
電子工作初心者がラズパイを買って遊んでみる 〜その１〜

#まえがき
少し電子工作に興味が出てきたので、土日の空き時間に少し始めてみることにした。

以前から、ラズベリーパイと呼ばれるものに興味があったので、
これを使って電子工作をまず始めようと思った。

そこで、まず必要なものを集めることから始めた。

#必要なもの
・ラズベリーパイ本体
・ACアダプター（5.1V/2.5A）　※これは**2.5A**推奨
・ディスプレイ
・キーボード
・マウス
・メモリーカード（16GB）

とりあえず、この辺りを揃える。

#買ったもの

[Raspberry Pi3 Model B ボード＆ケースセット]
(https://www.amazon.co.jp/gp/product/B01CSFZ4JG/ref=oh_aui_detailpage_o05_s00?ie=UTF8&psc=1)　5780円
（まず、ラズパイ本体とケースをゲット）

[Raspberry Pi 3 model B 専用電源　ACアダプタ](https://www.amazon.co.jp/gp/product/B01MQGO2BC/ref=oh_aui_detailpage_o04_s00?ie=UTF8&psc=1)　1680円
（そして、ACアダブターをゲット）

[3.5インチ Raspberry Pi用タッチパネルディスプレイ+タッチペン+ヒートシンク＋保護ケース+16GB SDカード]
(https://www.amazon.co.jp/gp/product/B01I2XLY8S/ref=oh_aui_detailpage_o05_s00?ie=UTF8&psc=1)　3900円
（最後に、このお得なセットでタッチパネルディスプレイとメモリーカードゲット）

キーボードとマウスは最悪なくても、このディスプレイがタッチパネルで操作も入力もできるので、かかった費用は、**全部で１万円ちょっと**くらい。

色々なセット商品があるが、この組み合わせが自分の中では
お手頃でしっくりきた。

もし、キーボードやマウスが必要な場合は、Bluetooth搭載のものでも良い。
Raspberry Pi 3 Model B は、超省電力で、最大転送速度1MbpsであるBluetooth 4.1も標準対応。そして、高速無線LAN（最大150Mbps）機能も搭載されている。

これが何と言ってもRaspberry Pi 2にはなかった、Raspberry Pi 3の強み。

#使う言語
python

#サポートOS
Raspbian (Debianベース)、Ubuntu MATE、Snappy Ubuntu Core、OpenELEC、OSMC、Arch Linux、PiNet、RISC OS、Windows 10 IoT Core

#セットアップ
購入したメモリーカードには、Raspbianのセットアップに必要なデータがあらかじめ入っているので簡単。
ディスプレイとつなぎ、SDカードを差し込んで、ACアダプターも繋ぎ電源を入れれば、自動的に立ち上がる。

ON/OFFスイッチの付いていないACアダプターを買った場合は特に、電源を切る時ちゃんとOS側からシャットダウンしないと駄目で、いきなりアダプタを抜いて電源を落とすと、SDカード内のデータが破損したりする。
ラズパイやSDカードはナイーブなので、基本どんな手順を踏む時も順序通りするべき。
（ちなみに、自分のものは電源のケーブルが抜けやすくなっていて、知らぬ間に電源ケーブルが抜けて、色々と挙動がおかしくなり立ち上がらなくなってしまい、ラズパイ３をもう一台買う直す羽目になった。笑）

※作業中の写真なども載せるつもりだったが、いきなり壊れて急遽２台目配送待ちなので後日掲載

#できること
・IoT
・○○自動化
・ロボットの作成
・デジカメの作成
・Webサーバーの構築
・タブレット端末にする
・システム構築
など


#次回以降やっていくこと
**NintendoSwitch**のJoyConと呼ばれるコントローラーが、ペアリングできるので、これを入力デバイスとして使って何か面白い使い方ができないか試みる予定。

[JoyCon](https://www.amazon.co.jp/dp/B01MS8OGU1?tag=gid023014-22&camp=243&creative=1615&linkCode=as1&creativeASIN=B01MS8OGU1&adid=1FYG4MPHX758Q6D0YQC3&)
ng-japan 2017 セッション資料の一覧

## はじめに
2017年6月17日(土)にng-japan 2017が開催されました。
その中でセッションに使用された資料が様々な場所で公開されていたので僭越ながらまとめさせていただきました。

## 公式
- http://ngjapan.org

## ライブ配信(アーカイブ)
- ng-japan 2017ではライブ配信が行われていました。各セッションは以下のURLで視聴できます。
- トラックA - https://www.youtube.com/watch?v=LbnLSD2pL18
- トラックB - https://www.youtube.com/watch?v=P1X40cddHGU

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ご視聴ありがとうございました。ng-japan 2017のライブ配信を終了しました。<br>同じURLでアーカイブを見ることができますので、ブログ執筆や復習にご利用ください<a href="https://t.co/7TraPhYohO">https://t.co/7TraPhYohO</a><a href="https://t.co/rlctbkOn5O">https://t.co/rlctbkOn5O</a><a href="https://twitter.com/hashtag/ng_jp?src=hash">#ng_jp</a></p>&mdash; 水嶋 彬貴 ( みずまん ) (@mizuman_) <a href="https://twitter.com/mizuman_/status/876015466342268929">2017年6月17日</a></blockquote>

## 資料
### Keynote - Stephen Fluin (Angular Core Team)
- 資料 - https://docs.google.com/presentation/d/1X2bFLgqYQcJOVQu87oKcm67_5sNYqSEUEAINOJVGSgM/preview

### RxJSを活用したアプリケーション開発 - Kentaro Okuno
- 資料 - https://speakerdeck.com/armorik83/rxjs-real-world

### Angularとionicで挑戦したモバイルアプリ開発 - Yasunobu Ikeda
- 資料 - https://www.slideshare.net/clockmaker_jp/angularelectronionic

### Web Components and Onsen UI - Naoki Matagawa
- 資料 - https://speakerdeck.com/n_matagawa/web-components-falseqi-dai-toshi-qing-wei-lai-2nian-falseraiburarikai-fa-jing-yan-kara

### You need to know SSR - Yosuke Furukawa
- 資料 - https://speakerdeck.com/yosuke_furukawa/you-need-to-know-ssr

### Angularアプリのテストについて - Yosuke Kurami
- 資料 - https://speakerdeck.com/quramy/ng-japan-testing-angular-app

### Visual StudioとVisual Studio Codeで快適開発生活(仮) - Saki Homma
- 資料 - https://www.slideshare.net/sakkuru/visual-studio-code-77025428

### Web Payments + Credential Management API - Eiji Kitamura
- 資料 - 

### あのモジュールこのコンポーネントそのブロック - Takeshi Takatsudo
- 資料 - https://speakerdeck.com/takazudo/afalsemoziyurukofalsekonponentosofalseburotuku

### Angular, Firebase, Cloud Functions for Firebase - Tomohiro Noguchi
- 資料 - https://docs.google.com/presentation/d/1Q-liS3jQPB31PO-GCZd7WWQZpACjhdrQPYHpy_3v0oI/pub

### 【座談会】Angular開発の生々しい話 - Shumpei Shiraishi
- 資料 - 

### Advanced Component styling with Angular (v4+) - Gerard Sans
- 資料 - http://slides.com/gerardsans/ng-japan-component-styling#/

### ReactiveFormsの説明 - Simon Takenaka
- 資料 - https://docs.google.com/presentation/d/13N-pHWIx9TLru1gesfOTfQ-rH27CPi4DEfcQ3PdMQHc/edit?usp=sharing

### Best practices for modules in Angular - Wilson Mendes
- 資料 - http://slides.com/willmendesneto/best-practices-for-shared-modules-in-angular#/

### webrtc + Firebase + Angular でのリアクティブweb app開発 - Yuta Moriyama
- 資料 - 

### Angular Animations - Matias Niemelä (Core Team)
- 資料 - http://slides.yearofmoo.com/ng-japan-2017-slides/

### Angular Material - Miles Malerba (Angular Material Team)
- 資料 - https://docs.google.com/presentation/d/1_HGlHH9Dz9YkvIBomVMPZMCDtxIboRTjq7BXUhcjPwg/preview

## さいごに
空欄の箇所は資料を見つけることができませんでした。
もしご存じの方がいらっしゃいましたらご指摘いただけると助かります。
VS CodeでPythonをデバッグする準備をする。

#１．作業フォルダを作成し、新規ファイル(.py)を作成する。

#２．拡張機能をインストールする。
#####**[推奨事項を表示]**をクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187698/f269d913-fdb0-edb3-b5b7-49eda1c09fbc.png)
#####**Pythonを選んで[インストール]**をクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187698/d3c982ca-1da4-d9aa-1076-c1705acb5dde.png)
#**３．launch.json**を作成する。
#####一番最初に作った作業フォルダを開く。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187698/cc2ed8a9-9893-8243-0bc3-f3545be4a7ce.png)
#####**デバッグ**　⇒　**構成を開く**　⇒　**Python** を選ぶ。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187698/2bde9a06-8cf4-9612-f285-e2791e6d66c3.png)
#####そのまま**launch.json**を閉じる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187698/7501babf-173d-da97-66cb-033b74665382.png)
#４．簡単なプログラムを作成し、**[pylint]**をインストールする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187698/6341d98c-d278-95df-a3f8-b54c23c04d08.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187698/c179ea35-7f9a-3c1b-2d7c-b7a44358921c.png)
#５．[F5]を押して、デバッグを開始する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187698/af4946e4-52db-3109-4265-cb9448528eab.png)
#####**デバッグ**を続ける。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187698/7f9f9d13-c6a1-0812-2af8-635b0b6738b7.png)
Visual Studio / WPF > WindowsアプリケーションにてSystem.Console.WriteLine()をコンソールに出力する

```txt:動作環境
Windows 8.1 Pro (64bit)
Microsoft Visual Studio 2015 Community
```

コンソールアプリケーションでないプロジェクトにおいては、System.Console.WriteLine()はコマンドプロンプトに出力されない。
Windowsアプリケーションで後からコマンドプロンプト出力するには。


### 対象コード

```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 _170618_t0900_consoleOutput
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            System.Console.WriteLine("hello");
        }
    }
}
```

```MainWindow.xaml
<Window x:Class="_170618_t0900_consoleOutput.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:_170618_t0900_consoleOutput"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button x:Name="button1" Click="button1_Click" 
                Height="28" Width="100"
                Content="button"/>
    </Grid>
</Window>
```


### 手順

参考: https://stackoverflow.com/questions/4480930/why-doesnt-console-writeline-console-write-work-in-visual-studio-express
> answered Nov 30 '12 at 20:58
> ibrahim

1. ソリューションエクスプローラーからプロパティを開く
2. アプリケーションタブの「出力の種類」を「コンソールアプリケーション」に変更する

![2017-06-18_09h21_07.png](https://qiita-image-store.s3.amazonaws.com/0/32870/bc6dad07-b863-10cd-d9df-85f77edf58f9.png)

### 実行例

アプリケーション起動時にコマンドプロンプトとアプリケーション(例:MainWindow)が開く。

MainWindowのボタン押下ごとにコマンドプロンプトに出力される。


![2017-06-18_09h24_48.png](https://qiita-image-store.s3.amazonaws.com/0/32870/8c526a7c-4459-3c21-7d23-30946eaf2c6d.png)