OmniAICreator/Qiita-1.07M huggingface dataset:
Raspberry PiにOSインストールする

前回の[「Raspberry Piを動かすために必要な資材」](http://qiita.com/kanaisawa/items/7240467f2d7bedff2d3fd7bedff2d3f)からの続き。

#１．今回の目標
今回はRaspberry PiにOSインストールしてデスクトップ画面が表示できるようにする。

#２．作業内容
１．OSをダウンロード
２．SDカードのフォーマッターをダウンロードしてパソコンにインストール
３．マイクロSDをフォーマット
４．マイクロSDにOSを書き込む
５．入出力装置をRaspberry Piに接続する
６．パワーーーーーオン
７．OSインストール実行
８．デスクトップ画面の表示確認

#３．１．OSをダウンロード
Raspberry Piの公式サイトからNOOBSのDownloadZIPをクリック。
NOOBSにはNOOBSとNOOBS Liteがあって、NOOBSは「easy operating system installer」と書いてあるのでこっちを選択してみた。
ダウンロード完了するまで5分位必要だった。
[ダウンロードサイト]
https://www.raspberrypi.org/downloads/noobs/
![image](https://qiita-image-store.s3.amazonaws.com/0/109672/b05e82dc-339b-0669-1cc3-5a0dc8151805.png)

#３．２．SDカードのフォーマッターをダウンロードしてパソコンにインストール
SDアソシエーションの公式サイトからSDフォーマッター4.0をダウンロード。
パソコンはWindowsなのでWindows用を選択。
[ダウンロードサイト]
https://www.sdcard.org/jp/downloads/formatter_4/
![image](https://qiita-image-store.s3.amazonaws.com/0/109672/7ecdaa7e-1b5b-27e7-6fed-8b229949d9a0.png)
<br>
ダウンロードしてきたsetup.exeをキックして「次へ」を2回押す。
![image](https://qiita-image-store.s3.amazonaws.com/0/109672/3b6b48f8-262c-a7d2-59fb-537d31e42322.png)

#３．３．マイクロSDをフォーマット
マイクロSDをSDにする変換アダプタを付けてあげてパソコンのSDカードスロットへイン。
![image](https://qiita-image-store.s3.amazonaws.com/0/109672/6b7ca3f6-5236-20ce-aaf6-e87dac711486.png)

一応、エクスプローラ画面でSDカードがどのドライブレターに割り当てされているのかを確認。
Dドライブに割り当てられている。
![image](https://qiita-image-store.s3.amazonaws.com/0/109672/6ea3c040-decd-f0a0-a160-90cba3db9690.png)
デスクトップに作成されたSDFormatterをクリックして起動。
![image](https://qiita-image-store.s3.amazonaws.com/0/109672/d5e2352f-7415-4a35-2264-c261ff2e981e.png)

フォーマットボタンをクリック
OKを2回押します。
![image](https://qiita-image-store.s3.amazonaws.com/0/109672/16748b44-18bf-5948-53ef-b2e096777d6e.png)

1秒後ぐらいに完了。
OKボタン押してフォーマットは終了。
![image](https://qiita-image-store.s3.amazonaws.com/0/109672/3dbc5a0e-3b48-7476-709d-0352817ab13f.png)


#３．４．マイクロSDにOSを書き込む
「３．１．OSをダウンロード」でダウンロードしたZIPファイルを展開して、「３．３．マイクロSDをフォーマット」でフォーマットしたSDカードにコピー
![image](https://qiita-image-store.s3.amazonaws.com/0/109672/560bd750-06a8-2501-d461-c72f7beed14c.png)


#３．５．入出力装置をRaspberry Piに接続する
Raspberry Piにモニタ（HDMI）、キーボード（USB)、マウス（USB)、電源（マイクロUSB）を接続。
![C2C0D73E-FD30-43F4-8D42-E8740505D1D9 - コピー.JPG](https://qiita-image-store.s3.amazonaws.com/0/109672/a1ed05be-d036-1c6f-1d7d-433f6aabbc8d.jpeg)


#３．６．パワーーーーオン
パワーオンといってもUSB給電するだけ。
コンセントに挿すと、Raspberry Piのランプがピカピカします。
![D49B6BAC-B8A0-4380-AEEB-E75C8046FF65 - コピー.JPG](https://qiita-image-store.s3.amazonaws.com/0/109672/6d9fdfed-4337-4e98-1ca7-714cc8c98cf8.jpeg)


#３．７．OSインストール実行
OSインストールする前にwi-fi設定。
下の言語は日本語に変更
![25237915-6DF7-4F52-B1B2-40E69D5C1A77 - コピー.JPG](https://qiita-image-store.s3.amazonaws.com/0/109672/9e267446-c82d-c178-248a-deddade65edd.jpeg)


OSはRECOMMENDEDと書かれているRaspbianを選択してみた。
![E526C0F9-15F8-490C-BC9D-73BDDD407ECD - コピー.JPG](https://qiita-image-store.s3.amazonaws.com/0/109672/426b4f9a-deb9-7c72-1e30-31f5057d9641.jpeg)

#３．８．デスクトップ画面の表示確認
OSインストールは20分ぐらいかかって終了。
![0A0D36D7-43ED-42C3-A933-A55E187F2722 - コピー.JPG](https://qiita-image-store.s3.amazonaws.com/0/109672/d0765ada-817a-7faa-4f71-01e25b53d403.jpeg)

時刻がJSTじゃない、文字化けしている等々の問題があるが、それは次回。

#４．次回の目標
Raspberry Piの初期設定をしよう
ev3devでmindstorm-EV3のLEDを制御しよう

## はじめに
ev3devを使ってmindstorm-EV3インテリジェントブロックのLEDを制御する方法を紹介します。
この記事は、EV3にev3devをインストールし、SSH接続できている状態であることを前提にしています。環境構築ができていない方はこちらの記事を参考にしてください。
>
[mindstorm-EV3をLinuxで制御しよう! ev3dev OSのインストールととSSH接続](http://qiita.com/murotani/items/46f905bec33b1673c41a)


## デバイスファイル

LEDを制御するためのデバイスファイルフォルダは```/sys/class/leds/```以下にあります。

```
robot@ev3dev:~$ ls /sys/class/leds
ev3:left:green:ev3dev  ev3:left:red:ev3dev  ev3:right:green:ev3dev  ev3:right:red:ev3dev  rt2800usb-phy0::assoc  rt2800usb-phy0::quality  rt2800usb-phy0::radio
```

## 点灯させてみよう
それぞれのデバイスファイルフォルダのbrightnessファイルに0~255の値を書き込むことで、LEDの明るさの強弱を制御できます。下図の赤く点灯している左側LEDと緑に点灯している右側LEDが制御できます。
![P_20161223_170228.jpg](https://qiita-image-store.s3.amazonaws.com/0/149019/9ff2065a-f550-d507-39dc-828a52d79f7f.jpeg)


```
#EV3インテリジェントブロックの左側のLEDを緑色に点灯
robot@ev3dev:~$ echo 255 > /sys/class/leds/ev3\:left\:green\:ev3dev/brightness

#EV3インテリジェントブロックの左側のLEDの緑色を消灯
robot@ev3dev:~$ echo 0 > /sys/class/leds/ev3\:left\:green\:ev3dev/brightness

#EV3インテリジェントブロックの左側のLEDを赤色に点灯
robot@ev3dev:~$ echo 255 > /sys/class/leds/ev3\:left\:red\:ev3dev/brightness

#EV3インテリジェントブロックの左側のLEDの赤色を消灯
robot@ev3dev:~$ echo 0 > /sys/class/leds/ev3\:left\:red\:ev3dev/brightness

#EV3インテリジェントブロックの右側のLEDを緑色に点灯
robot@ev3dev:~$ echo 255 > /sys/class/leds/ev3\:right\:green\:ev3dev/brightness

#EV3インテリジェントブロックの右側のLEDの緑色を消灯
robot@ev3dev:~$ echo 0 > /sys/class/leds/ev3\:right\:green\:ev3dev/brightness

#EV3インテリジェントブロックの右側のLEDを赤色に点灯
robot@ev3dev:~$ echo 255 > /sys/class/leds/ev3\:right\:red\:ev3dev/brightness

#EV3インテリジェントブロックの右側のLEDの赤色を消灯
robot@ev3dev:~$ echo 0 > /sys/class/leds/ev3\:right\:red\:ev3dev/brightness
```

## Triggerを設定してLEDの点滅を制御する
それぞれのデバイスファイルフォルダのtriggerファイルを編集することで、LEDの点灯モードを変更することができます。具体的には通常の点灯か、点滅かを切り替えることができます。
### none 
通常モード
デフォルトの設定です。LEDは点灯しているか消灯しているかの状態です。
```robot@ev3dev:~$ echo none  > /sys/class/leds/ev3\:left\:red\:ev3dev/trigger
```

### timer 
点滅モード
LEDが点滅します。
```robot@ev3dev:~$ echo timer  > /sys/class/leds/ev3\:left\:red\:ev3dev/trigger
```
また、delay_on,delay_offファイルを編集することで、点滅の周期を制御することができます

```
#点灯時間を1000msに設定する
robot@ev3dev:~$ echo 1000  > /sys/class/leds/ev3\:left\:red\:ev3dev/delay_on
#消灯時間を3000msに設定する
robot@ev3dev:~$ echo 3000  > /sys/class/leds/ev3\:left\:red\:ev3dev/delay_off
```

## 緑と赤を使って黄色やオレンジを作る

LEDの色を重ね合わせることで黄色やオレンジといった色を表現することも可能です。

```
# オレンジ色
robot@ev3dev:~$ echo 180 > /sys/class/leds/ev3\:green\:left/brightness; echo 255 > /sys/class/leds/ev3\:red\:left/brightness
# 黄色
robot@ev3dev:~$ echo 255 > /sys/class/leds/ev3\:green\:left/brightness; echo 25 > /sys/class/leds/ev3\:red\:left/brightness
```

# 参考
[ev3dev 公式ページ](https://github.com/ev3dev/ev3dev/wiki/Using-the-LEDs)
CastとOfType

Listの個々の要素をキャストするメソッドにCastとOfTypeがある。

#Cast
キャストできない場合は例外である System.InvalidCastException を返す。

#OfType
Listから指定された型に一致する要素のみを取り出す。取り出すことができた要素はその型になる。キャストできなくても、例外を返さない点がCastと異なる。
3日かけてA Tour of Goの練習問題に挑戦して結局解けなかった話


１ヶ月前からGoの勉強を始めて、先人の言う通りに[A Tour of Go](https://go-tour-jp.appspot.com/welcome/1)をなぞっていました。

そして、いよいよ最終章の並行処理(Concurrency)に入ったところで、練習問題[Exercise: Equivalent Binary Trees](https://go-tour-jp.appspot.com/concurrency/7)がどうしても解けないで３日ぐらい、あーでもないこーでもないとゴニョゴニョやってましたが、どうしてもうまく行かんので己の敗北を認め、模範解答を見て、自分の理解のなさを痛感した次第であります。

とはいえ、学びも大きかったので、ここにあらましを書いていきたいと思います。

## Exercise: Equivalent Binary Trees
![BinaryTrees](https://go-tour-jp.appspot.com/content/img/tree.png)
2分木のデータ構造をした10個の整数値を`goroutine`と`channel`を使って`1,2,3...10`と順番に取り出す問題。
なお、この課題では本当は全部で4つの解答を求められるが、ここに挙げるのは、その内の１つ目の問題だけです。（１つだけで３日かかったんやで）

### 模範解答

```Go
package main

import (
	"fmt"
	"golang.org/x/tour/tree"
)

func Walk(t *tree.Tree, ch chan int) {
	if t == nil {
		return
	}
	if t.Left != nil {
		Walk(t.Left, ch)
	}
	ch <- t.Value
	if t.Right != nil {
		Walk(t.Right, ch)
	}
}

func main() {
	ch := make(chan int)
	go Walk(tree.New(1), ch)
	for i := 0; i < 10; i++ {
		n := <-ch
		fmt.Print(n, ",")
	}
}
```

### 結果
```
1,2,3,4,5,6,7,8,9,10,
```

再帰で２分木の構造をなぞって、左の枝、節点、右の枝を順々に`channel`に書き込んでいる。シンプルでわかりやすい。

### 自分が書いていた間違ったコード

```Go
package main

import (
	"fmt"
	"golang.org/x/tour/tree"
)

func Walk(t *tree.Tree, ch chan int) {
	if t == nil {
		return
	}
	if t.Left != nil {
		go Walk(t.Left, ch)
	}
	ch <- t.Value
	if t.Right != nil {
		go Walk(t.Right, ch)
	}
}

func main() {
	ch := make(chan int)
	go Walk(tree.New(1), ch)
	for i := 0; i < 10; i++ {
		n := <-ch
		fmt.Print(n, ",")
	}
}
```
### 結果
```
10,5,7,6,3,1,2,9,4,8,
```
順番がバラバラ。模範解答のコードと酷似していますが、重大な過ちを犯しています。

```Go
go Walk(t.Left, ch) // goキーワードがついてる！！
```

そうです。再帰で呼んでるWalk関数の前に`go`キーワードをついているため、Walk関数が全て並行で実行されていたのです。再帰で２分木をたどっていくときは、同期的に処理しなければいけなかったんです。

ただし、main関数で呼んでいる最初のWalk関数の前には`go`キーワードが必要です。main関数と最初のWalk関数は別々の`goroutine`とすることで、お互いに`channel`の送受信ができるようになっている。ということでした。うーん悔しい。

```Go
go Walk(tree.New(1), ch)
```
【schoo体験談】初心者の女性がschooでプログラミングを学んでIT企業に就職した話

※こちらの記事は、プロスタ編集部がプログラミングの学習法を公開することで、皆様のお役に立ちたい意図で投稿しております。

参考サイト：[【schoo体験談②】初心者の女性がschooでプログラミングを学んでIT企業に就職した話](http://programming-study.com/case/schoo-woman/)

# 【schoo体験談】初心者の女性がschooでプログラミングを学んでIT企業に就職した話


schooでJavaScriptを学んでエンジニアに就職した40代女性の体験談です。

私は学校を卒業したものの、良い就職先を見つけられずアルバイトをして暮らしていました。ある会社で倉庫の整理をするバイトをしていたのですが、どうにもしっくりきていませんでした。というのも、これまで学生時代からいくつかバイトをしていても上手くいかないことが多かったです。

ある日、バイト先の会社でインターネットのホームページを作っている人を見ました。その方はプロらしく、どうやらプログラミングがすごく得意なようでした。

その頃の私はタイピングも遅いですし、デスクワークを始めパソコンを使う仕事は向いていないと思っていました。しかし、どうも気にかかったのでネットで調べてみると、元々パソコンが苦手でもやってみたら天職になった人の声をいくつも目にして私も興味を持ちました。特に会社のWebサイトを作れるようになりたいと思いました。

##schooを活用してJavaScriptを習得

小さくない本屋に行けば、プログラミング系の簡単な書籍はたくさんあります。しかし、完全な独学よりもそれと並行してプログラミングを教えてくれる人の存在が、勉強には大切なことを身に染みていました。学生時代に一度、英語系の資格で完全な独学で失敗した経験が大きかったかもしれません。

そこで私はオンラインで受講できるサービスを利用することにしました。実際に通学しなくても他の学生達と同時に受けている感覚が得られるので、モチベーションが保ちやすいと思ったからです。私が選んだのは「schoo」というオンライン学習サイトでした。動画がいっぱいあり、生放送の講座も受けられます。何よりも料金がとても手ごろなのが良かったですね。

私の目標は、Webサイトを作ることだったのですが「動きのある」サイトが作りたくてJavaScriptの講座を受講しました。講義はとても分かりやすく、私もそれに習って実践し、必要な足りない知識はネットの他の学習サイトを見て勉強しました。自分で書いたJavaScriptのコードが実行されて、動いたのを見た時はすごく嬉しかったですね。

##会社に入社した経緯

勉強を始めて半年が過ぎた頃に近場に情報システムを扱う会社の求人が出ていて、そこにC言語、HTMLそしてJavaScriptが「求めるスキル」と書かれていました。HTMLやCSSなど、Webサイトを作るうえで必要になるものは勉強していたのですぐに応募しました。めでたく採用され、業務内容もしっくりきてとても安心したのを覚えています。

##やってみないとわからない

私はプログラミングはおろかパソコンは向いていないと思っていました。しかし思いのほか、別の業種よりも向いていたことが分かりました。もしかしたらそういう人は案外多いかもしれません。ちょっとでも興味がある方は、良いスクールや学習サイトもたくさんありますから本格的に学んでいくのも良いと思います。

【オススメ記事】
➡︎[【schoo体験談①】学習のコツは集中して動画を見倒すこと](http://programming-study.com/case/schoo-entrepreneur/)
EnumとSwitchを用いたStateMachineの例


```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

// 状態の列挙　　publicにすることで，他のスクリプトから使える
public enum GameState
{
	BeforeBattle,
	Battle,
	AfterBattle
}

public class GameManager : MonoBehaviour {


	// 現在の状態
	private GameState _currentState;

	// Use this for initialization
	void Start () {
		SetCurrentState(GameState.BeforeBattle);
	}

	void Update(){
		// テスト用
		if (Input.GetKeyDown (KeyCode.A)) {
			SetCurrentState (GameState.Battle);
		}
	}

	// 現在の状態を変更し，新しいステートになったときに行う処理を実行．
	public void SetCurrentState(GameState newState){
		_currentState = newState;
		switch (_currentState) {
		case GameState.BeforeBattle:
			Debug.Log ("BeforeBattlde");
			break;
		case GameState.Battle:
			Debug.Log ("Battle");
			break;
		case GameState.AfterBattle:
			Debug.Log ("AfterBattle");
			break;
		default:
			break;
		}
	}

}

```
GoutteでPOSTの結果からCSVダウンロード

## やりたかったこと
Goutteで某サイトへログイン、リンクを辿ってCSVファイルをダウンロードする。
以前やったし楽勝だろうと思っていたが、思いの外ハマったので記事にしときます。

## 読むと分かること
POSTでリンクらしきものを叩き、叩いた結果からCSVを取得する実装方法
（↑本記事とはあまり関係ないですが、POSTになるのは、
内部的にはJavaScriptとかが呼ばれてhiddenでもろもろの値を設定してから、検索したりしているためです）

## 環境
CentOS release 6.8 (Final)
PHP 5.4.34
Goutte v2.0.4
(いろいろちょい古いです）

## Goutteでのダウンロード
* ぐぐるとよくある例

 
```
$client->request('GET', 'http://hoge.com/download.php');
$client->request('GET', 'http://hoge.com/download.csv');
```
あと、以前私が書いた記事
http://qiita.com/kokushi_yayoi/items/299f62b8fece8b1920d6

##　違う、今回はPOSTでダウンロードしたいのだ

### 実装方法
下記のように実装したところ、今回はPOSTのレスポンスからCSVのテキストを取得できました

```php:download_csv.php
<?php

require_once __DIR__ . "/goutte-v2.0.4.phar";
use Goutte\Client;

$client = new Client();

/*** もろもろ略 ***/
/*** CSVダウンロードボタンのページまでは実装済みで遷移済みです ***/

$result = $client->submit($csv_download_form);
// POSTのレスポンスを取得してます
$csv_download_response = $client->getResponse()->getContent();

// 念のため、読み込みできるかを確認
if ($csv_download_response->isReadable()) {
    $directory_path = './download/';
    // ここにCSVのデータを全部入れてます。
    // read()でレスポンスを読み込むができ、getSize()で結果が何文字だったかが分かるので、全部読み込みしてます
    $response_content = mb_convert_encoding($csv_download_response->read($csv_download_response->getSize()), 'utf8', 'sjis-win');

    $file = new SplFileObject($directory_path.'hoge.csv', 'w');
    $file->fwrite($response_content);
} else {
    echo '読み込みできませんでした';
}
```

答えを見ればけっこうかんたんです。
ただ、ググっても良い感じの情報にたどり着くのに時間がかかりました。

## 調査した順序
1. ログインしてCSVダウンロードの手順は手動で行い、開発ツールを使って、要素を洗い、何が行われているかを調べながら進めます。
2. 調べた要素通りにログイン→ページ遷移→CSVダウンロードボタン押下までを実装します。上に挙げた以前の記事をご覧ください。
3. 普通にダウンロードボタン押下まではかんたんに実装できた。以前の通りにCSVに書き出そうとしたら、うまく書き出されない。
4. 開発ツールでNetworkパネルで調べたところ、今回のサイトはPOSTしていて、以前と同じ実装(GETのレスポンスをゴニョゴニョする)は通用しないことが判明。
5. とりあえずググるがよくわからないので、地道にNetworkパネルの中身を読み込んで、var_dump()で何が取れているかを確認。
6. Response HeadersのContent-Dispositionにちゃんとデータが入っていることは確認できたので、ドキュメントにあったread()とgetSize()で当たりをつけて実装してみたら動いた。

答えが載っているドキュメント。
http://docs.guzzlephp.org/en/5.3/streams.html
$client->getResponse()をvar_dumpするとわかりますが、
contentの中にStream型で入っています。

## 結論
無事POSTで取得するパターンのCSVファイルも取得できました。
スクレイピングをしていると、普段あまり意識していない
RequestとResponseで各項目が何を意味してどういう情報が入っているかを
詳細に知る必要があるのでいい勉強になります。
特に開発ツールのNetworkパネルはめっちゃ有用な情報が詰まってるので、
一度眺めてみると面白いかもしれません。
学習サイトでプログラミングを独学して営業からエンジニアに転職

※こちらの記事は、プロスタ編集部がプログラミングの学習法を公開することで、皆様のお役に立ちたい意図で投稿しております。

参考サイト：[学習サイトでプログラミングを独学して営業からエンジニアに転職](http://programming-study.com/case/change-job/)

#学習サイトでプログラミングを独学して営業からエンジニアに転職

独学でプログラミングを勉強して、営業職からWebエンジニアに転職した30代男性の体験談です。

##文系でも飛び込みやすいWeb系へ

私は現在３７歳のWebエンジニアです。以前は金融機関や大手携帯電話の販売代理店にて営業職をしていました。このような仕事も魅力的でしたが、長い社会人人生の中で営業職のみで生活を行っていくことに疑問を感じることがありました。

また、新卒で入社した時代からますますITを中心とする時代へと進化しています。インターネットを中心とする購買やサービスの時代へと変化を遂げています。このような時代の変化に併せて自分のスキルをどんどん磨いていくことが重要だと痛感することが多くなっていました。

私は元々文系の人間でしたので、IT関連の高いスキルを有していた訳ではありません。しかし、Web構築に関するHTMLやCSSの知識は文系の方でも比較的取り組みやすいと友人から聞き、仕事の合間を縫って独学で学習を行っていくことにしました。

##学習サイトや参考書を使って独学で勉強

当時は仕事が忙しかったので、なるべく自宅で書籍やオンラインでの学習を中心に考えるようにしていました。最近では、オンラインでプログラミングを学習できるサイトが多く存在しています。これらを有効に活用すれば、短い時間の中でも多くのことを学習できます。より効率的に学習を行っていくには反復練習が重要です。オンラインの学習サイトであれば、自分の苦手な分野を集中的に学習することができます。

また、無料でも充実したサイトが多いので気軽に登録して学習していくことができます。私が使用して満足度が非常に高かったサイトはドットインストールとCodecademyです。両者ともに大変人気で、多くの方が使用している素晴らしいサイトです。これらと自分で用意した参考書を併用することで効率的に学習を行っていけます。

プログラミングにせよHTMLやCSSにしろ「習うよりも慣れろ」の世界です。継続して様々なコードを書いていくことでスキルをどんどん磨いていけます。

##面接で自分が制作した作品を見せることが転職のコツ

私がこの世界に飛び込むことを考えたのは３０歳前後でしたので、年齢的にはやはり少し遅いのかなと最初は不安でした。しかし、社会経験上、転職はその分野の知識やスキルを最低限有していることが前提なのは理解していましたので、先に十分な学習を行ってから転職活動を行いました。

この業界に転職を考えるのであれば資格も重要ですが、やはり自分が制作した作品を面接等の際に提示することが大変重要です。多くの面接官や先輩デザイナー達に認めてもらうことが大切です。私はこの方法で希望の会社に内定を頂いて、現在まで楽しく仕事をしています。

##未経験でも熱意があれば転職できる

未経験からでもWeb業界に飛び込んで、楽しく仕事を行っていくことはできます。素敵なサイトを制作することで楽しみながら素晴らしいキャリアとスキルを磨いていけます。未経験であっても、きちんとサイトを制作して熱意を伝えることができれば仕事を得ることは可能です。

【オススメ記事】
➡︎ [Webサービス・ネイティブアプリ開発エンジニアの採用が活況、今求められるエンジニア像とは](http://programming-study.com/trouble/jac1/)
Raspberry Piを動かすために必要な資材

![image](https://qiita-image-store.s3.amazonaws.com/0/109672/8e4b9c33-7d2a-0429-d3f6-87841b011bc3.png)

#１．最終目標
プログラミングとかしたことないけど、おうちハックしてみたい。

#２．今回の目標
おうちハックするにはRaspberry Piがあると便利らしいから、とりあえずRaspberry PiにOSインストールするのに必要な資材を集める。

#３．用意するもの
| 番号 | 品名                                 |調達先  |費用  |
|:-----|:-------------------------------------|:-------|--------:|
| 1    | Raspberry Pi                         |amazon  |￥ 5,980|
| 2    | パソコン                             |自前    |￥ 0|
| 3    | マイクロSDカード                     |amazon  |￥ 1,080 |
| 4    | マイクロSDをSDカードに変換するパーツ |amazon  |￥ 0 |
| 5    | マイクロUSBケーブル                  |自前    |￥ 0 |
| 6    | USBの電源アダプタ                    |自前    |￥ 0 |
| 7    | HDMI対応のモニタ                     |自前    |￥ 0 |
| 8    | USB対応のキーボード                  |自前    |￥ 0 |
| 9    | USBのマウス                          |自前    |￥ 0 |

#３．１．Raspberry Pi
Raspberry Pi3はElement14版とRS components版があった。
Element14版の方が安かったからこちらを購入。

#３．２．パソコン
Raspberry PiをOSをダウンロードしてきたりするのに必要。
SDカードのスロットが搭載されているパソコン(Win)を使用。

#３．３．マイクロSDカード
ダウンロードしたOSを書き込むのに必要。

#３．４．マイクロSDをSDカードに変換するパーツ
VAIO Pro13のSDスロットを使用したいので、マイクロSDをSDに変換するパーツが必要。
マイクロSD買ったら付属品として付いていた。

#３．５．マイクロUSBケーブル
Raspberry Piに電源供給用のケーブルとして使用。
Androidのスマホを充電するために使用しているケーブルを代用。

#３．６．USBの電源アダプタ
Raspberry Piに電源供給するために使用。
Androidのスマホを充電するために購入した急速充電用（2.4A）電源アダプタを代用。

#３．７．HDMI対応のモニタ
Raspberry Piの画面を表示させるために必要。
家にあったディスプレイ使用。

#３．８．USB対応のキーボード
Raspberry Piにキー入力するために必要。
家にあった有線USBのキーボードを使用。

#３．９．USB対応のマウス
Raspberry Piに座標入力するために必要。
家にあった無線USBマウスを使用。

#４．次回の目標
Raspberry PiにOSインストールする
SingleOrDefault

#SingleOrDefaultｍの挙動
SingleOrDefaultは、Listから条件を満たす1個のオブジェクトを抽出するときに使います。

```csharp
Device device = devices.SingleOrDefault(d => d.Name == "dev2");
```

##条件を満たすオブジェクトが0個のとき
SingleOrDefaultは、型の既定値を返します。
上記のコードの場合、Deviceクラスの既定値はnullなのでnullを返します。

##条件を満たすオブジェクトが1個のとき
SingleOrDefaultは、1個のオブジェクトを返します。

##条件を満たすオブジェクトが2個のとき
SingleOrDefaultは、例外である System.InvalidOperationException を返します。
JavaScriptの有効桁数、指数


## 有効桁数
一番左側にある0以外の数値から数えて何桁か

`Number.prototype.toPrecision`

```js
/**
 * @param rawVal 数値
 * @param digit 有効桁数
 */
function numberOfSignificantFigures(rawVal, digit) {
	var val = new Number(rawVal);
	return (isNaN(val)) : val ? val.toPrecision(digit);
}
```

## 指数表示しない方法
大きい数値や、詳細な数値を扱おうとした場合に指数表記になることがある

```js
var rawVal = 2.5e-11,
function toPlainValue(rawVal) {
	var splitVal = rawVal.toString().split('e');

	if(splitVal.length === 1) return splitVal[0];

	var period = splitVal[0].indexOf('.');

	if (0 < period ) splitVal[1] -= period ;

	return new Number(rawVal).toFixed(Math.abs(splitVal[1]));	
}
```
MA(マーケティングオートメーション)を試すためAWSでMautic環境をサクッと立ち上げ

#AWSのMarketplaceで準備されているものを使う

<img width="1411" alt="mautic_aws.png" src="https://qiita-image-store.s3.amazonaws.com/0/155981/a3aa43ea-73a8-8a0e-c37b-d1b430354f15.png">

AWSのMarketplaceで「Mautic」と検索するとヒットします。
Bitnamiの方ではインスタンス金額以外かかりませんのでこちらを選択して立ち上げます。

インスタンスの立ち上げが終了したらパブリックDNSへアクセスします。

#ログインしてみる

パブリックDNSへアクセスすると以下のような画面が現れます。

<img width="973" alt="mautic_login.png" src="https://qiita-image-store.s3.amazonaws.com/0/155981/0d893e00-6738-c5bb-8830-b4555e7ef140.png">

Bitnamiの標準ではuserがログインIDとなり、パスワードはAWSのログで確認します。

こちらを参考にパスワードをAWSのログから探します。
https://docs.bitnami.com/aws/faq/#how-to-find-application-credentials

インスタンスを選択　→　アクション　→　インスタンスの設定　→　システムログの取得

パスワードを取得してログインするとダッシュボードの画面になります。

#対象サイトのトラッキングを取ってみる

下記サイトを参考にトラッキングコードをサイトに埋め込んでみます。

https://mautic.org/docs/jp/contacts/contact_monitoring.html

ちなみにJavaScriptのコードを推奨しています。
トラッキングピクセルは1.4から非推奨となっています。

トラッキングが上手くいくとダッシュボードにコンタクトがカウントされます。

<img width="1439" alt="mautic_dashboard.png" src="https://qiita-image-store.s3.amazonaws.com/0/155981/dd1f8bab-b496-3f9d-1926-c5e1c18b9db0.png">

これでMA（マーケティングオートメーション）の環境準備が整いました。

他の使い方はまた機会があれば。
Ubuntu 16.04 で AMDGPU Pro ドライバを使う(17.10 推奨)

## 背景

きちんとした OpenGL/OpenCL/Vulkan サポートが必要なため, オープンソースドライバではなく GPU 会社のプロプライエタリなドライバを使いたい時がありますね!

今まで CentOS7 で fglrx ドライバをだましだまし使ってきましたが, どうも CentOS 7.3 でついに kernel version update と X11 周りのライブラリのバージョンの差異で fglrx ドライバが動かなくなりました.

Vulkan にも対応し今後のメインストリーム(?)である AMDGPU Pro ドライバが, 一応 16.50 で正式リリースされたっぽい + RHEL 7.3 対応だったので, インストール試みましたが, DKMS コンパイル失敗したりブートしても画面真っ黒(Xorg.log をみると no display found error とか)だったりして詰んでしまいました.

そこでせっかくの機会なので Ubuntu 16.04 に乗り換えて AMDGPU Pro ドライバを使おうとしましたが, ここでもそのままでは動かず, いろいろ試行錯誤と調べものをしたところ, どうもデフォルトで入っている(?) radeon モジュールが原因だったようでした.

## 環境

* Intel SandyBridge Xeon CPU
* Hawaii 系 AMD GPU
* AMDGPU Pro driver 16.50
* Ubuntu 16.04.1 Desktop 版をインストール

## Ubuntu 16.04 Desktop 版インストール

そもそもまず Desktop 版インストーラーで画面が出ませんでした... 幸いにも GPU 内臓 Intel CPU だったので, まずは iGPU にディスプレイをつないで, Ubuntu をインストールしました.

iGPU がない環境では, まずはサーバ版でコマンドラインでインストールするとよいかもしれません.

Ubuntu を upgrade しておきます(kernel 4.4.0-57)

## AMDGPU Pro ドライバインストール

Ubuntu 16.04 ドライバパッケージは `./amdgpu-pro-install` を実行するだけで, そのまま問題なくインストールできました.

デバッグしやすいようにコンソールログインできるように ssh 接続環境を整えてから, AMD GPU にディスプレーケーブルを切り替え, リブートします.

## radeon モジュールを disable にする.

どうもデフォルトでは radeon モジュールを読み込むらしく, `VGACON disables amdgpu kernel modesetting` というエラーがカーネル起動時に出てします.

そして, GDM ログイン画面は表示されますが, ログインしても画面がバグってまたログイン画面に戻ってしまいます...

そこで, grub の起動設定で

```
radeon.modeset=0 blacklist=radeon
```

を追加し, radeon モジュールを読み込まないようにします.

Xserver のほうの radeon モジュールも消しておくと確実かもしれません.
(xserver-xorg-video-radeon パッケージ)

これでひとまず AMDGPU(OpenGL HW アクセラレーション有効) が使えるようになりました.

### nomodeset は?

全ての GPU に有効な `nomodeset` は設定するとおかしくなったので, 今回は不要のようです.

Hawaii 系以外の GPU では違う設定が必要かもしれません.

## 問題点

PC を常時運転していると, 時々画面が suspend から戻らなくなる時があります(X プロセスが defunct になり, リブートしか手段がない). エラーを見ると cursor が見つからないみたいなメッセージです.

どうもこのパッチで治っているようなので, とりえず Gnome 設定で, 画面の suspend 機能を off にし, 16.50 の次期リリースを待つことになるでしょうか.
(追記: 16.60 でも治ってませんでした. 安定運用するにはもう少し待たないとダメかも)
 
https://lists.freedesktop.org/archives/amd-gfx/2017-January/004647.html

**追記: 17.10 + kernel 4.4.0-71 でどうもなおったっぽいようです!**
**追記: 17.10 + kernel 4.4.0-78 で一日くらい経つとブラックアウト(復帰しない)になりました...**
**追記: 17.10 + kernel 4.4.0-79 でどうもなおったっぽいようです!**

 
## TODO

* fglrx では aticonfig で xorg.conf をいじる必要がありましたが, amdgpu では aticonfig/amdconfig というツールはなくなって xorg.conf は作らなくてよくなったっぽい(別ルートで X11 の設定をする?)
* Vulkan on Linux をためす.

## まとめ

AMDGPU black screen とかで検索しても, どうやったら動かせるかではなくて単に amdgpu をアンインストールしろ, という回答しかヒットしなくて, これもまたつらみしかないですね.
js 配列を並べ替えて、目的の数字が入る場所を返す

##お題
配列(第一引数)を小さい数字から並べ替えて、目的の数字(第二引数)が入る添字を返す。


```script.js
function getIndexToIns(arr, num) {
//write your code.
}
getIndexToIns([5,1,2,3,4], 1.5);
```

##出力結果 例

```script.js
([40, 60], 50) // 1
([3, 10, 5], 3) // 0
([2, 5, 10], 15) // 3
([2, 20, 10], 19) // 2
([5, 3, 20, 3], 5) // 2
([10, 20, 30, 40, 50], 30) // 2
```

##使った関数
[sort()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)


##コード
```script.js
function getIndexToIns(arr, num) {
   arr.sort(function(a, b) {
    return a - b;
  });  
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= num)
      return i;
  }
  return arr.length;
}

getIndexToIns([1,2,3], 1.5);//1
```

##考え方
・sort()で配列をならべかえる。
 a - b だと小さい数字から、　b - a　だと大きい数字から並ぶ。

・for文でarr[i]と目的の数字(num)を比較する。
同じ以上の値が返るとき、iが目的の数字が入る場所になる。

###他にもコードが浮かんだ方、コメントお待ちしてます。
jQueryUI 連動するスピナー


2つのjQuery UI Spinnerウィジェットを連動させ、
2つのスピナーの大小関係が逆転しないようにしていた時にはまったメモ

step値で上下する値として無効な値を入力した後、min の値を設定すると
もう一方のスピナーの値を上下させると数値が変な値で上下してしまう。

## 発生した事象
from: val: 0.0   min: 0.0  max: 50.0
to  : val: 50.0  min: 0.0  max: 50.0
step: 0.5

1. from を0.2 にする 
2. to のmin fromの値で更新する (大小関係のチェックは省略)
3. to を1ステップ分下げる
4. to が 49.7 になり、以降0.5ずつ上下する


### 原因
jQueryUI.Spinner の stepUp,stepDown の仕様をよく読むと

> If the resulting value is above the max, below the min, or results in a step mismatch, the value will be adjusted to the closest valid value

訳：結果の値が最大値よりも大きく、最小値よりも小さいか、またはステップの不一致が生じた場合、値は最も近い有効値に調整されます。

つまり、min,maxを設定する際に近似値丸めをしていなかったことが原因のようです。

### 修正
で、toのminの値をfromの値に変更する前に以下のコードで近似値に丸めて正常な値になりました。

```js
function approximationRound(spinnerID, stepStr) {
	var resolution = getNumberOfDecimalPlaces(stepStr), step = Number.parseFloat(stepStr);
	var num = Number(document.getElementById(spinnerID).value);
	var val = num.toFixed(resolution);
	var commaIdx = val.indexOf('.');
	var retval = num;
	var mod = 0;

	if (commaIdx !== -1) {
		mod = (val.substr(0, commaIdx + resolution + 1) % step);
	} else {
		mod = (val % step);
	}

	if (mod === 0) {
		retval = num;
	} else if ((step / 2) <= mod) {
		retval = num + (step - mod);
	} else {
		retval = num - mod;
	}
	return retval.toFixed(resolution);
};

function getNumberOfDecimalPlaces(str) {
	var idx = str.indexOf('.');
	return (idx !== -1) ? str.replace(/.*\./, '').length : 0;
}
```

## 修正
* マイナスの値に対応していないので修正する
nodeでimportを使う

import使ったらSyntax Errorで怒られたのでメモ

# 必要なpackage
nodeを使用して、babel6.x系でimportを使用するには、

```
babel-cli
babel-preset-es2015
babel-preset-stage-2
babel-register
```

この辺のパッケージをnpm installしましょう。**devDependency**です。

# 実行方法

package.jsonのscriptsには

`"start": "babel-node lib/index.js --exec babel-node --presets es2015,stage-2"`

を足しましょう。これでimport使えます。

ただし、本番環境(production)でbabel-nodeで使ってはいけません。
→https://babeljs.io/docs/usage/cli/#babel-node

ちゃんとbuildしましょう。

参考リポジトリ
https://github.com/babel/example-node-server
AWSの失敗談 - しらなくてミスした話

お疲れ様です。
株式会社アカツキでサーバエンジニアとして働いている申です。

# はじめに
AWSを使用する上で失敗（ミス）した話と、それの原因及び対処方法などを共有し、みなさんは私と同じ過ちを起こさないようにすることが目的です。

# Single-AZよりMulti-AZのほうが重い
## 概要
Single-AZとMulti-AZの両方性能テストする機会があり、Single-AZに比べてMulti-AZの方が性能が悪くていろいろ調べました。（特にコミット遅い）

## 原因
別AZ間でマスター・スレーブを配置するMulti-AZ構成では、AZ間で通信のレイテンシーが発生するためです。
Multi-AZのRDSにおいて、AZ間のデータレプリケーションは、非同期ではなく、 **同期レプリケーション** です。
よって、マスターDBに書き込み及びコミットが発生した場合、スレーブDBに書き込むための通信が発生し、それが完了するまで待つことになります。

## 対処
#### Single-AZを使用する
高可用性及びフェイルオーバーのため、AWSはMulti-AZをおすすめしていますが、
以下の理由でSingle-AZを選択することもありえるかと思います。

```
・性能優先
・コスト削減
・しばらく中断されても、すぐ対応できればいいサービス
```

#### EBSの最適化を提供する(PIOPS最適化)RDSインスタンスタイプを使用する
一般のEBSネットワークは他のトラフィックも使用する共存ネットワークです。そのため、高性能のIOPSを持っていても、他のネットワークトラフィックによりIOPSが影響され、IOPSが低下する場合があります。
EBSの最適化を提供しないRDSインスタンスタイプを使用する場合、他のトラフィック状況によって（例えば、マスターとスレーブ間で通信で）、IOPSも低下されることがあります。

<img width="935" alt="ebs.png" src="https://qiita-image-store.s3.amazonaws.com/0/81150/f5de1242-91e3-d6ec-6817-84b9df8278f3.png">


EBSの最適化を提供するRDSインスタンスタイプで、専用のネットワークが確保ができ、プロビジョンドIOPSを最大まで引き上げることができます。

EBSの最適化を提供するRDSインスタンスタイプは、r3ですと、
r3.xlarge ~ r3.4xlargeまでです。r3.8xlargeは提供しません！
もし、他のネットワークトラフィックに影響されやすい環境だと、場合によってはr3.8xlargeの方がもっとIOPSが低いのでは？という疑問になりますが、これは後日ベンチマークしてみます。

# 新しくEC2をELBに登録した途端にOutOfServiceになってしまった話
## 概要
１個のAZで構成されているELBに新しくもう１個のAZを追加しました。
そのあと、新しいAZに１個のEC2を追加しましたが、追加したEC2が「InService」になったとたんに負荷が高まり、すぐ「OutOfService」になってしまったことがあります。

## 原因
デフォルトのクラシックELBは全てのEC2に均等に分散されるのではなく、 まず **AZごとに均等に分散される** ためです。

以下の画像をみてください。
<img width="1435" alt="elb.png" src="https://qiita-image-store.s3.amazonaws.com/0/81150/1be17274-0424-2841-4010-20b7368404fb.png">


例えば、 `ap-northeast-1a` と `ap-northeast-1c` に跨っているELBがあるとします。そのELBにそれぞれ、１０台、１台のEC2インスタンスが登録されています。
ELBに２００のリクエストが来た場合、ELBには `ap-northeast-1a` と `ap-northeast-1c` に100リクエストずつ均等に分散されます。
そうしてしまった場合、 `ap-northeast-1a` の10台のEC2インスタンスは１台あたり１０リクエストを受け付けますが、`ap-northeast-1c` の１台EC2インスタンスは１００リクエストを一人で受け付けてしまいます。

## 対処
 安定的に追加するためには、

```
・既存AZと同じ数のEC2を新しいAZに追加するか。
・「クロスゾーン負荷分散を有効化」する ※1
```

※1 「クロスゾーン負荷分散」を有効化することでAZごとではなくELBに登録されている全EC2ごとに分散されるようになります。
しかし、耐障害性を高めるために、できれば各AZに等しいEC2を分散配置するのがベストです。



# AWSサービスはできるだけ新しい世代を使用する
新しい世代は以下のメリットがあります。

```
・コストが安い、性能がいい
・いいオプションがデフォルトで付いている ※1
```

※1 例えば、いいオプションは、EC2のC3世代にはなくて、C4世代にはデフォルトで付いているEBS最適化オプションなどになるでしょう。

# RDSにおいて容量変更やスケールダウンするとたまに変更完了するまで時間がかかる話
## 概要
普段なら１０分〜２０分で終わるRDS容量変更がたまに３〜４時間かかったりする場合がありました。
メンテ作業を１０分〜２０分で見積もったのに、いざとなってメンテ入って変更を行うとなかなか終わらなくて汗かいたことがあります。

## 原因
いまだに原因不明です。
AWS側に、問い合わせしたい。

# Redisのバックアップを取得したが、データが入っているはずのバックアップが0MBだった話
## 概要
Redisのバックアップ完了後、それを元に復元をしましたが、入っているはずのデータが空っぽでした。AWSマネジメントコンソルから、バックアップ容量をみたら、0MBでした。

翌日、再度バックアップされたデータ容量をみたら、1000MBになっていました。

## 原因
いまだに原因不明です。AWSの不具合？
AWS側に、問い合わせしたい。

## 教訓
バックアップをとったら、ちゃんと容量を見てから復元作業を行いましょう。


いろいろ、AWSって女心のように予測できないことがおおいため、丁寧に研究しながら、やさしく付き合っていきましょう。

以上、AWS失敗談でした。
Node-REDでChromecastを操作する

## 概要

[node-red-contrib-chromecast](https://www.npmjs.com/package/node-red-contrib-chromecast)なるものを見つけました。たまたま家にChromecastがあったので試してみました。

## とりあえずサンプル実行

READMEにある以下のサンプルフローをインポートします。

```json
[{"id":"2789229c.d876de","type":"chromecast-play","z":"a83f67b9.57c098","name":"","x":413.5,"y":115,"wires":[["bf26f40d.40d908"]]},{"id":"bf16e7cb.40e918","type":"inject","z":"a83f67b9.57c098","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":141.5,"y":117,"wires":[["647d6115.9b82a"]]},{"id":"bf26f40d.40d908","type":"debug","z":"a83f67b9.57c098","name":"","active":true,"console":"false","complete":"false","x":574.5,"y":115,"wires":[]},{"id":"647d6115.9b82a","type":"function","z":"a83f67b9.57c098","name":"","func":"msg.payload = {\n    ip: '192.168.1.125',\n    url: 'http://translate.google.com/translate_tts?ie=UTF-8&total=1&idx=0&textlen=32&client=tw-ob&q=Word%20Up&tl=En-gb',\n    contentType: 'audio/mp3'\n}\nreturn msg;","outputs":1,"noerr":0,"x":286.5,"y":115,"wires":[["2789229c.d876de"]]}]
```

インポートすると以下のような感じです。

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/64013cdb-24d7-ce93-3e24-caf0d250c7ab.png)

FunctionノードでなにやらIPアドレスとURLとContent-Typeを渡してますね。

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/17de4219-6bed-03f4-d1ac-77ffad2d6172.png)

IPアドレスはChromecastのIPアドレスのようですがChromecastのIPアドレスの確認方法がわからなかったので片っ端から試してみました。

URLはPCの音量を上げて[ブラウザで確認する](http://translate.google.com/translate_tts?ie=UTF-8&total=1&idx=0&textlen=32&client=tw-ob&q=Word%20Up&tl=En-gb)と英語が発音されることがわかります。

フローを実行すると[テレビで発音されました](https://www.youtube.com/watch?v=ZrXFlgYMKDo)！

## 画像を表示してみる

続いて画像を表示してみました。以下のようにURLとContent-Typeを変更します。

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/72a54df7-5488-c6be-be9b-9a0a1bc7e9ae.png)

これを実行すると...

![AnOOvB.gif](https://qiita-image-store.s3.amazonaws.com/0/21109/36662d99-bc47-ebaf-b069-1b24b2999f89.gif)

笑い男出た！

おしまい...
Unity エディタ拡張内で生成したテクスチャをPNG形式でAssetDatabase内に保存する

# はじめに
[PLAY Animation Importer for Unity](http://doga.jp/PLAY/unity-plugin-jp/) にて、「取り込んだテクスチャファイルの形式が *.asset になっているが、PNG 形式にしてほしい」という要望を頂いたので対応してみました。
ざっとネット検索してもドンピシャな方法を書いているページが見当たらなかったのですが、一応可能みたいですのでここにメモを残しておきます。

# コード

```csharp:Before
// pathTextureInAsset にテクスチャの保存先のファイル名(例: "Assets/textures/fooBarTexture.asset")が入っていると想定
// width, height にそれぞれ縦横サイズ、bytes に画像のバイト列が入っていると想定
var texture = new Texture2D(width, height, TextureFormat.ARGB32, false, false);
texture.LoadRawTextureData(bytes);
texture.Apply(true, true);
AssetDatabase.CreateAsset(texture, pathAsset);
// texture をマテリアルから参照
```

```csharp:After
// pathTexturePngInAsset にテクスチャの保存先のPNGファイル名(例: "Assets/textures/fooBarTexture.png")が入っていると想定
// width, height にそれぞれ縦横サイズ、bytes に画像のバイト列が入っていると想定
var texture = new Texture2D(width, height, TextureFormat.ARGB32, false, false);
texture.LoadRawTextureData(bytes);
texture.Apply(true, false); // 第2引数(makeNoLongerReadable) を false にしておかないとEncodeToPNG() に失敗するので注意

// PNG 画像を保存してインポートし直す
File.WriteAllBytes(pathTexturePngInAsset, textureOrg.EncodeToPNG());
AssetDatabase.ImportAsset(pathTexturePngInAsset);
var texturePng = AssetDatabase.LoadAssetAtPath(pathTexturePng, typeof(Texture2D)) as Texture2D;
// texturePng をマテリアルから参照
```
Unityでポトリスみたいなやつ

直近で直面した＆なんとなく解決した件について書いてみます。


ある日友人からゲームを作ろうと言われ、協力してみたところ、ポトリスみたいなゲームを作ってほしいとのこと。
あの綺麗な地面の削れ方とか、その見た目がちゃんとコリジョンになってるような、それをやってみた話。

きっともっといい方法はたくさんあるだろうと思ってます。

ちなみにUnity5.3.5f1。


#１、とりあえずBoxColliderを敷き詰めてみよう。
細かいことを考えず、ひたすらBoxCollider2Dを敷き詰めてみた。
![1_4.png](https://qiita-image-store.s3.amazonaws.com/0/31239/b698b425-0715-9b99-5c95-64c3d414a347.png)

すると、
・重い！
・削れが綺麗じゃない！
・一定サイズ以下にすると何故かコリジョン抜ける！
という散々な結果

![1_2.png](https://qiita-image-store.s3.amazonaws.com/0/31239/a0cd5abd-649b-f3b9-fafa-01750abcdaf4.png)


ステージはまぁまぁ広い想定ということで、敷き詰めたら大変なことになりそう、且つ綺麗に削れさせるの難しそうだったのでやめました。


#２、PolygonColliderを使ってみよう！
このとき初めて知ったのですが、画像の形状に合わせたコリジョンを作ってくれるというPolygonCollider2Dという人が居るんです。
良い人だな、と思い使ってみました。

適当な画像を作ってみた、こんな感じに張れる
![2_1.png](https://qiita-image-store.s3.amazonaws.com/0/31239/6996723b-fca2-69c7-5f8b-65c8b1bb7a62.png)


コリジョン綺麗、これは期待できる。

弾を撃って画像の影響範囲のアルファを抜いてもPolygonColliderは変わってくれないので、PolygonColliderを付け直す処理を着弾時にやってみた。

すると、
・PolygonColliderを付け直す処理があまりにも重い（そもそもそういう用途で使うものではないらしい）
・続けていくうちにPolygonColliderが絵の形と大きく変わってしまう。
![2_4.png](https://qiita-image-store.s3.amazonaws.com/0/31239/1aa273b9-cfef-e494-2360-872cb6b766d7.png)
困る！！！！

ということでやめました。
でも良い人でした、PolygonColliderさん。


#３、画像のピクセルと判定
画像のピクセルのアルファが0かそれ以上かで全部見て判定をするという、もはやUnityの意味がないやつです。
実はBoxColliderがダメだった段階で会社の人に相談したところ、この方法が提案されていました。
大変だなぁと思いつつ対応
とりあえずピクセル分の配列でアルファが有るか無いかをもって判定。

![3_1.png](https://qiita-image-store.s3.amazonaws.com/0/31239/50ad4f50-f513-aee2-9869-fa79eab17ac5.png)
※赤いのがキャラだと思ってください

・綺麗に削れている！！
・見た目通りのコリジョンになっている！！！
・重くない！！！！



一応解決ですね、ハイ。
ソースコードとか載せてなくてすいません。



余談
この方法は着弾時に画像のアルファ情報をいじってるわけですが、Unityのリソースの読み込み方次第でリソースに直で変更を加える感じになってしまうことがあった。
ちなみに私は画像の参照を直で持っていたので、そうなったわけで、Instantiateとかしてなんとかしました。
Electronが素敵だったのでvueと組み合わせて使ってたらvueインスタンスのメンバが参照できずハマった

# Electron始めました
Electonを使用してJavaScriptで単体アプリケーションが
気軽に作成できるようなので手始めにTODOアプリをと思ってたら作成中躓いて擦り剥いた。

## Electron + vue2 + NeDB 
確かに環境構築も慣れてれば30分かからないし
使い慣れたフロントエンドのフレームワークが1つあれば
短時間で出来てしまいそうです。
ただ作成当初から普通にwebアプリを作ってる感覚が消えない。

 vue.js 2.16
 Electron 1.4.13
 NeDB 0.85


ちなみに15分くらいで環境整えてしまうには
①node.jsインストール
②ボイラープレート利用
　[electron-quick-start-master](https://github.com/electron/electron-quick-start)
③上記②を展開してpackage.jsonのdependenciesにvueとか仕込む
④node.js command promptで　cd "展開したフォルダ"
⑤npm install
で出来てしまいそうです。
最近ではelectron + webpack + vueのボイラープレートを配布してる人もいるみたいですが
今回は可能な限りシンプルにしたかったので使用しませんでした。

##thisがvueインスタンスを指してなかった
ところで・・・
vueでdataに定義した値を参照する場合
そんなパラメータはない旨のエラーを頂く事が
よくあったためそんな時は何も考えずthis.testParam
等としてたら痛い目にあったのでメモ。

[JavaScriptの「this」は「4種類」？？](http://qiita.com/takeharu/items/9935ce476a17d6258e27)

こちらにある記事を読んで関連がなさそうに感じていたが
（当初コールバック関数が非同期で動いていることが怪しいと感じていたため）
まさかと思い
this.xxx⇒vue.xxx
としたらうまくいきました。
フロントエンドの人にとっては初歩的なミスなのかもしれないが
随分ハマってしまいました。
this云々と言うより変数宣言が曖昧で怖い。

```
var vue = new Vue({
  el: '#test',
  data:{
    testData: [], // テーブルに表示される検索結果データ
    db : [], // NeDBデータベースオブジェクト
  },
  methods: {
          doSearch: function (e) {               
               
               var condition = [];
               // conditionに検索条件を投入
                
               this.db.testCollection.find(condition, 
                   function(err, docs){
                    if(err == null){
                        // Domへ挿入して画面更新
                        this.testData = docs;
                        console.log(this.testData); // ①1行前のtestData（thisが指しているものが②と異なる）
                    }else{
                        tmpMessage = err;
                    }
               });
               
            console.log(this.testData);// ②VueインスタンスのtestData
    },
```
IoTカノジョ 2.0

この記事は、[カノジョできないエンジニア Advent Calendar 2016](http://qiita.com/advent-calendar/2016/no-girlfriend) 23日目の記事です。

1年前にこんな記事を書きました。

- IoTカノジョを作りました。@カノジョできないエンジニア Advent Calendar 2015
http://shanonim.hatenablog.com/entry/2015/12/09/000036

1周年なので、バージョンアップしてみたいと思います。

## 用意するもの
### Arduino UNO
どこのご家庭にもある一般的なArduinoです。

![illu-arduino-UNO.png](https://qiita-image-store.s3.amazonaws.com/0/38442/30e25bd9-9a95-25ee-4b9a-b39443fcb119.png)

### PIRセンサー
集電型赤外線センサー、いわゆる人感センサーです。
![pir.jpg](https://qiita-image-store.s3.amazonaws.com/0/38442/311ef7a9-0c63-c45a-4cb1-25015e9b2edf.jpeg)

### LED
光ります。

![thumbnail_led.jpg](https://qiita-image-store.s3.amazonaws.com/0/38442/0bd2dfdb-713b-e80d-c6c3-5755c09fb774.jpeg)

### [Johnny-Five](http://johnny-five.io/)
友人です。
![johnny-five-fb.png](https://qiita-image-store.s3.amazonaws.com/0/38442/dc4662bb-3084-ce9a-d4b5-64aa8e915239.png)

### その他
ジャンパー線、ブレッドボード、抵抗などはお好みのものをご用意ください。

## IoTカノジョ 2.0
![IMG_2785.JPG](https://qiita-image-store.s3.amazonaws.com/0/38442/a53b38ec-5b17-c43b-8d87-926e3052c60c.jpeg)

```kanojyo.js
var five = require('johnny-five');
var SlackNode = require('slack-node');

var board = new five.Board();
var slackToken = "<your-slack-token>";
var slackNode = new SlackNode(slackToken);
var freq = 1000;
var waitTime = 0;
var hasPostedWelcomeMessage;
var hasPostedAngryMessage;

board.on('ready', function() {
    var led = new five.Led(8);
    var angryLed = new five.Led(7);
    var sensor = new five.Sensor({
        pin: 'A0',
        freq: freq
    });
    sensor.on('data', function(){
        if (waitTime > 5000) {
            angryLed.on();
            if (!hasPostedAngryMessage) {
                postMessage("ちょっと遠くないかにゃ。");
                hasPostedAngryMessage = true;
            }
        } else {
            hasPostedAngryMessage = false;
        }

        if (this.value != 0) {
            led.on();
            if (!hasPostedMessage) {
                postMessage("おかえりにゃ！")
                hasPostedMessage = true;
                waitTime = 0;
                angryLed.off();
            }
        } else {
            led.off();
            hasPostedMessage = false;
            waitTime += freq;
            console.log("waitTime: " + waitTime);
        }
    });
});

function postMessage(message) {
    slackNode.api('chat.postMessage', {
        text: message,
        channel: '#iot-kanojyo',
        as_user: true
    }, function(err, response) {
        console.log(response);
    });
}
```

近づくと話しかけてきます。近づかないと話しかけてくれません。
<img width="152" alt="スクリーンショット 2016-12-23 14.54.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/38442/c3c5aabd-bf22-2537-6723-b2b123e55f76.png">

しばらく近づかないと、怒ります。
<img width="172" alt="スクリーンショット 2016-12-23 15.04.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/38442/88344440-2761-d2be-8c03-8cf2fbd2552a.png">

怒っているので、赤く光ります。こわいですね。
![IMG_2786.JPG](https://qiita-image-store.s3.amazonaws.com/0/38442/0bbeff68-b22c-3cfb-c2b0-94c6165676c1.jpeg)

## まとめ
良いお年を。
NSUserUnixTaskでJXAスクリプトを実行して結果を得る

```swift:DoShellScript.swift
#!/usr/bin/env swift

import Cocoa

guard let pathToMe = URL(string: "\(#file)", relativeTo: URL(fileURLWithPath: FileManager.default.currentDirectoryPath))?.path else {
  print("Error: current path of #file")
  exit(-1)
}
let __file__ = pathToMe as NSString

let scriptsPath = "\(__file__.deletingLastPathComponent)/DoShellScript.js"
let scriptsURL = URL(fileURLWithPath: scriptsPath)
guard let task = try? NSUserUnixTask(url: scriptsURL) else {
  print("Error: task is nil")
  exit(-2)
}
let stdout = Pipe()
let stderr = Pipe()
task.standardOutput = stdout.fileHandleForWriting
task.standardError = stderr.fileHandleForWriting
task.execute { error in
  if let error = error {
    print(error.localizedDescription)
    exit(-3)
  }
  let outdata = stdout.fileHandleForReading.readDataToEndOfFile()
  let errdata = stderr.fileHandleForReading.readDataToEndOfFile()
  stdout.fileHandleForReading.closeFile()
  stderr.fileHandleForReading.closeFile()
  let out = (String(data: outdata, encoding: .utf8) ?? "").trimmingCharacters(in: .whitespacesAndNewlines)
  let err = (String(data: errdata, encoding: .utf8) ?? "").trimmingCharacters(in: .whitespacesAndNewlines)
  print("stdout:\n\(out)")
  print("stderr:\n\(err)")
  NSApplication.shared().terminate(nil)
}
NSApplication.shared().run()
```

```js:DoShellScript.js
#!/usr/bin/osascript
delay(3) //歯車アイコン確認用
App = Application.currentApplication()
App.includeStandardAdditions = true
App.doShellScript('ls ~/', {alteringLineEndings:false})
```

DoShellScript.swift と DoShellScript.js を同ディレクトリに置き実行。結果は以下の通り。

```
$ DoShellScript.swift 
stdout:
Applications
Desktop
Documents
Downloads
Library
Movies
Music
Pictures
Projects
Public
Sites
stderr:
```
ADDA > chpointを読込み係数のiteration経過を可視化する powered by Qiitaスライドモード

## アイデア

- 光散乱数値シミュレーション終了時の係数をDeep Learning(DL)で学習する
- 学習した係数で別PCで再計算する
   - 再計算時、収束が早い
   - DLの誤差は再計算により補正されるため、学習の精度を追求しなくてもよい？

<hr>

計算がすぐに完了する「球形」で係数の１つ(double complex型xvec[]の実部)を可視化してみた。

コード参考 http://qiita.com/7of9/items/4aa49fce3d524b04312a

計算の実行
http://qiita.com/7of9/items/b79c126b43479a3a124b

<hr>
##可視化の目的

- Deep Learningで学習すべき係数の選定
   - 全ての係数を学習すべきかどうか確認する

<hr>

## 実行

### 初回
$ ./adda -grid 25 -chp_type normal -chpoint 1s

### 再開
$ ./adda -grid 25 -chp_type normal -chp_load -chpoint 1s


<hr>
xvec[]実部 (iteration 156回目)

![xvec_RE_156.png](https://qiita-image-store.s3.amazonaws.com/0/32870/91eb2aba-6651-fd8d-80f4-3cdba1689128.png)

<hr>
xvec[]実部 (iteration 288回目)

![xvec_RE_288.png](https://qiita-image-store.s3.amazonaws.com/0/32870/1328924b-fee2-108e-9b20-014789265294.png)

<hr>
xvec[]実部 (iteration 524回目)

![xvec_RE_524.png](https://qiita-image-store.s3.amazonaws.com/0/32870/553dd13d-35dd-f109-2adf-7ab6fac698b1.png)

<hr>
xvec[]実部 (iteration 718回目)

![xvec_RE_718.png](https://qiita-image-store.s3.amazonaws.com/0/32870/d005ab80-26f4-e777-b23c-36297244e44e.png)

<hr>
xvec[]実部 (iteration 957回目)

![xvec_RE_957.png](https://qiita-image-store.s3.amazonaws.com/0/32870/bc754e2c-21f7-a189-4d1a-49cc54220e27.png)

<hr>
xvec[]実部 (iteration 1144回目)

![xvec_RE_1144.png](https://qiita-image-store.s3.amazonaws.com/0/32870/917db331-e2aa-31a8-fa35-8c9f9d6d34ae.png)

<hr>
xvec[]実部 (iteration 1325回目)

![xvec_RE_1325.png](https://qiita-image-store.s3.amazonaws.com/0/32870/572f8e3f-71a7-d356-d2d6-bdf5dcb5a92d.png)

<hr>
xvec[]実部 (iteration 1467回目)

![xvec_RE_1467.png](https://qiita-image-store.s3.amazonaws.com/0/32870/eccd6429-fa27-6165-5969-f3c612989650.png)

<hr>
xvec[]実部 (iteration 1695回目)

![xvec_RE_1695.png](https://qiita-image-store.s3.amazonaws.com/0/32870/4beae135-1ffb-1510-f46c-be7221f97fe8.png)

<hr>
xvec[]実部 (iteration 1834回目)

![xvec_RE_1834.png](https://qiita-image-store.s3.amazonaws.com/0/32870/8c6d083e-e051-5b4b-b918-2ecb7ae6415d.png)

<hr>
xvec[]実部 (iteration 2054回目)

![xvec_RE_2054.png](https://qiita-image-store.s3.amazonaws.com/0/32870/827a06b2-ca92-3f88-a9a2-7085f81b2d7f.png)


<hr>

### 注意事項

- 画像で確認した場合、対数的変化は把握できない
- 対数的変化が線形方程式の解放に影響するかは未調査

<hr>

### メモ

今回の計算では3271回で精度1E-6を達成した。

一度この精度を達成すると、再計算は瞬時に終わる。

検討事項は学習精度20％の誤差で再計算がどれくらい早くなるか。

その確認方法も考えてはいる。
ccacheを導入してC++のコンパイルを最適化


gitとかでブランチ移動したあと、特に変更もしていないファイルがコンパイルされるのがとってもうざかったので、導入してみた

## 環境
- macOS Sierra 10.12.2
- xcode 8.2
- cocos2d-x 3.13.1

## インストール

まずccacheをbrewで導入する([brewの導入方法](http://brew.sh/index_ja.html))

```
$ brew install ccache
```

cocosとかで開発してるとすぐキャッシュが圧迫されるので、バッファをしっかりとっておく

```
$ ccache -M 20G
```

## Xcode

ccacheを実行するラッパースクリプトを作成(ccache_wrapper)

```
$ sudo vi /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/ccache_wrapper

----------------------------------
#!/bin/bash

which ccache
if [ "$?" -eq 0 ]; then
    export CCACHE_SLOPPINESS=pch_defines,time_macros
    exec `which ccache` /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/clang -Qunused-arguments "$@"
else
    exec /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/clang -Qunused-arguments "$@"
fi
----------------------------------

$ sudo chmod 755 /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/ccache_wrapper
```

ツールを作成したら、BuildSettingsで以下のボタンを押して

![スクリーンショット 2016-12-23 14.25.33.png](https://qiita-image-store.s3.amazonaws.com/0/132627/de77b463-c521-f3f0-ec2f-02ecfd98b4ed.png "スクリーンショット 2016-12-23 14.25.33.png")

以下のUser-Definedを追加する

- CC : $(DT_TOOLCHAIN_DIR)/usr/bin/ccache_wrapper
- LDPLUSPLUS : $(DT_TOOLCHAIN_DIR)/usr/bin/clang++

Xcode導入完了

## Android

特にbuild.gradleとかmanifestをいじる必要はなし

以下をログインシェルのprofileに追加するのみ

```
$ vi ~/.zprofile

----------------------------------	
# ccache
export USE_CCACHE=1
export NDK_CCACHE=`which ccache`
export CCACHE_CPP2=yes
export CCACHE_COMPILERCHECK=content
----------------------------------	

$ . ~/.zprofile
```

## 確認方法

ccacheがちゃんと動いているか、表面上よくわからんためビルド中に以下のコマンドを叩く

```
$ ccache -s
```

cache sizeがどんどん膨れて入れば導入成功
ハッカソンでIoTした話

# この記事について

12月の頭に学生向けのハッカソンに参加してきました
そこで初めてIoTに挑戦したのでその話をしたいと思います

# 何を作ったのか

簡単に言ってしまえばお天気アラートです
よく天気予報で雨ってみたのに傘を持って行き忘れるってことあるじゃないですか(ちなみに、僕はよく忘れます)
そういう時に、玄関先に視覚的に雨だよって教えてくれるものがあったらいいよねなんて前々から思っていました
というわけで、今回はそんなお天気アラートを作ることにしました
視覚的にわかりやすい通知方法には[PhillipsのHue](http://www2.meethue.com/ja-jp
)という色が変わる電球を使いました
天気予報データの取得とHueの制御にはRaspberry Pi(Model3 Bだったはず)を使いました

![Myfuturehackathonu3000u30d7u30ecu30bcu30f3.png](https://qiita-image-store.s3.amazonaws.com/0/97367/d4748626-10a4-e92b-e87f-5a4239f0dd2a.png)

# 実装

実はこのハッカソン、大学の友達と4人で参加しました
春学期に全員Javaの授業を取っていたことので、プログラム部分は全てJavaで書くことにしました
一応コード自体はこの辺りに置いてあります(あんまり参考にはならなさそう)
https://github.com/ShinyaKato/huepi

## 天気予報データの取得

天気予報データの取得には[OpenWetherMap](http://openweathermap.org/)のAPIを使用しました
24時間先までの天気予報データを取得してその日に雨が降る可能性があるかどうかを判定します
ここの実装は友達に任せてしまったので正直細かいところまではわかってないです
JSONのパースで少し手間取ったようですが、他はスムーズに進んでいたようです
(ちなみに、最後に自分が書いたプログラムと結合した時は一発で動いたのですごく気分が良かったです)

## Hueの操作

Hueの操作にはJavaのAPIが用意されていたのでそれを利用しました
(ちなみに、Javaの他にも色々な言語のAPIが用意されているようです)
最初は手元のMacからHueを操作することを目標にして進めていきました
途中で色々詰まりながらもこれはなんとか成功(特にJavaのクラスパスを通すあたりで苦戦しました)
また、色の指定がなかなか曲者でした
普段慣れ親しんだRGB色空間ではなくXYZ色空間をHueに指定してあげないといけませんでした
(これに関しては`RGB XYZ`とかでググると色々情報見つかります)
仕方がないのでRGBで決めた色を変換ダイアグラム見ながら手でxyの値を求めてあげるなんていうアナログなことをしてました

## Raspberry Piの準備

OSのインストール手順などはググると解説している記事がたくさん見つかったのでそれを参考にインストール
OSイメージのダウンロードには結構時間がかかっていましたが起動自体はすんなりできました
ただ、誰もUSBキーボードを持っておらず起動したものの操作できないなんて状態になってしまいました
幸い(?)チームの一人がUSBマウスを持っていたのでそこから何とか`raspi-config`でSSHができる設定に変えました
で、自宅から持ってきたルーターに有線LANでラズパイをつなげてルーターを介してSSHするって形でここからは開発を進めていきました
(応用情報で勉強したお情け程度のネットワークの知識があってよかった、特にDHCPとか)
詰まったポイントとしてはやはりJavaのクラスパスですね
ラズパイでJavaを扱うときはちょっと苦戦すると思った方がいいかもしれないです
(せっかくラズパイなんだからPython使えよっていうツッコミはなしでお願いします)

# なんとか動いた

なんとか目標にしてたもの作れました
(作った後すぐにバラしてしまったので動画とかはないのですが)
作った後は沖縄の天気とかオイミャコン(世界で一番寒い場所)の天気とか取得して遊んでました
今回のハッカソンは初めて扱うものばかりでなかなか苦戦しましたが、いい経験にはなったと思います
ちなみに、このハッカソンの後に自分でラズパイ購入しました
できればうちのボロエアコンのオンオフのスケジューリングを赤外線モジュール使ってできたらなとか考えてます
それから、Hueについてなんですけど、この色が変わる電球ってのは通知の先として非常に優れていると思います
アイディア出しの時には「家でくつろいでる時はTwitterの通知とか色で教えて欲しい」なんて意見も出てました
何よりスマホに触らなくても通知先として機能するっていうのがいいですよね
使い方次第で色々なことができる面白いIoT製品だと思います
そんな感じで今年のアドベントカレンダーは終わらせていただきたいなと思います
(技術っぽい話ほとんどしてないけどいいのかな？)
WebAPIでmultipart/form-dataを使うときは非同期メソッドで

#はじめに

バックエンドのシステムを利用していると、multipart/form-dataでリクエストを送る/受け付けるということは滅多にないと思います。
しかし、あるプロジェクトで既存システムが何故かマルチパートでXMLを送るように作られてしまっていたために、Web APIでどうしてもmultipart/form-dataを使う必要がありました。
そのとき、非同期メソッドの扱いで罠に嵌った話です。

# Web APIでmultipart/form-dataを扱うには

マルチパート自体は下記のように簡単に扱えます。

```csharp
public void Post(HttpRequestMessage request)
{
    if (request.Content.IsMimeMultipartContent())
            
        MultipartMemoryStreamProvider provider = request.Content.ReadAsMultipartAsync().Result;

        foreach(var content in  provider.Contents)
        {
            // 各Contentを処理
        }
    }
}
```

# マルチパートの読み込みで処理がスタックしてしまう

先ほどのソースコードはPostを同期メソッドで作成していました。
この状態で運営をしてみたところ、ReadAsMultipartAsync()で処理がスタックするという障害が発生してしまいました。

色々調べて、行き着いたのがこちらの記事です。
[Don't Block on Async Code](http://blog.stephencleary.com/2012/07/dont-block-on-async-code.html)

> One other important point: an ASP.NET request context is not tied to a specific thread (like the UI context is), but it does only allow one thread in at a time.

ということで、

- ASP.NETのRequestコンテキストを使用しているPostメソッド内で、非同期メソッドAを同期的に呼び出す
- 非同期メソッドAの中で、Requestコンテキストに関連する非同期メソッドを呼び出す

という処理が入るとデッドロックが発生するようです。
ReadAsMultipartAsync()も内部でさらに非同期メソッドを呼んでいるのではないかと・・・

# 非同期メソッドにすれば解決する

POSTメソッド自体を非同期メソッドに変更し、ReadAsMultipartAsync()をロックしないようにすれば、
前述のデッドロックは発生しなくなります。

```csharp
public async Task PostAsync(HttpRequestMessage request)
{
    if (request.Content.IsMimeMultipartContent())
            
        MultipartMemoryStreamProvider provider = await request.Content.ReadAsMultipartAsync();

        foreach(var content in  provider.Contents)
        {
            // 各Contentを処理
        }
    }
}
```

# まとめ

Web APIは極力、非同期処理化を進めましょう。
arduino pro mini clone

#概要
オークションでarduino pro mini cloneを買ってみた。
3.3V 8MHZ
#写真
![MVC-010S.JPG](https://qiita-image-store.s3.amazonaws.com/0/18104/e168a1a1-5fdd-c8c5-3b35-d2c4b57ff970.jpeg)

#回路図（上）
![blue.JPG](https://qiita-image-store.s3.amazonaws.com/0/18104/dc0df799-7986-8537-aa69-8e82c8f39419.jpeg)

#回路図（下）
![black.JPG](https://qiita-image-store.s3.amazonaws.com/0/18104/3b4fa978-bb20-e089-d1bd-dcb79a91c8e0.jpeg)

#写真
![MVC-013S.JPG](https://qiita-image-store.s3.amazonaws.com/0/18104/7a94b09e-a670-40fd-f163-5a0ba902b30e.jpeg)

書き込みは、arduino ide 1.6.6から
ボード　pro Mini
プロセッサ　atmeg328(3.3v 8MHZ)
ポート　ch340
書き込み装置　AVRISPmkII
     でOK。
【Ruby上達事例】まつもとゆきひろさんから影響を受けてRubyを勉強

※こちらの記事は、プロスタ編集部が現在大変人気の高いRubyの学習法を公開することで、皆様のお役に立ちたい意図で投稿しております。

参考サイト：[【Ruby上達事例③】まつもとゆきひろさんから影響を受けてRubyを勉強](http://programming-study.com/case/matsumoto/)


#【Ruby上達事例】まつもとゆきひろさんから影響を受けてRubyを勉強

Rubyを作ったまつもとゆきひろさんの存在を知って、プログラミングを始めた方の体験談です。

##プログラミングを始めたきっかけはまつもとゆきひろさんを知ったこと

私がプログラミング学習を始めたきっかけは、まつもとゆきひろさんの存在を知ったことがきっかけでした。プログラミング言語といえばC言語やJavaなどいくつもありますが、メジャーな言語はほぼすべて海外の人によって作られた言語です。

そんな中でRubyというプログラミング言語は、いろいろな企業で採用されているメジャーな言語でありながら日本人が作った言語なのです。そんなRubyを作ったのがまつもとゆきひろさんです。そういう理由もあってプログラマーの間でまつもとゆきひろさんの名前を知らない人はいません。

そんな話を大学の友人から聞いた私は、さっそくプログラミングを勉強することにしました。もちろん言語はRubyです。

##まつもとゆきひろさんオススメの書籍で勉強

勉強は書籍を中心に行いました。まつもとゆきひろさんが初心者向けだと雑誌で紹介していた「たのしいRuby」、「初めてのRuby」の２冊を買いました。

「たのしいRuby」はまつもとゆきひろさん本人が監修されている本で、プログラミング初心者が一からRubyを勉強することを前提に書かれたそうです。そういうわけもあって、内容はとてもわかりやすく丁寧に書かれていてスムーズに読み進めることができました。

```	
たのしいRuby 第4版
中古価格
￥1,628から
(2016/3/29 12:06時点)
```

「初めてのRuby」はまつもとゆきひろさんではなくYuguiさんという方が書かれた本です。この本はすでに他のプログラミング言語をマスターしている人がRubyを勉強する際に使われることを想定して書かれた本です。そういう理由から「たのしいRuby」よりもやや難しい内容になっています。「たのしいRuby」を読み終えた後に「初めてのRuby」を読むとちょうどいいと思います。

```	
初めてのRuby
新品価格
￥2,376から
(2016/6/25 10:55時点)
```

この２冊をマスターすれば、基礎は抑えたことになると思います。かかる費用は２冊で約５千円です。期間は私の場合は１年ぐらいかかりましたが、早い人であれば半年ぐらいで２冊を読み終えることができると思います。

➡︎ [オススメのRubyの本はこちら](http://programming-study.com/language/ruby-books/)

##分からないことを気楽に聞ける人を見つける

書籍を中心に勉強すると、どうしても自分で解決できない問題がでてきます。そういった場合質問できる相手がいるのであればいいのですが、そういった相手がいない場合は勉強がストップしてしまいます。

実際私もそうでした。本を読んでいてどうしてもわからない、何日考えてもわからない。もうプログラミングをやめようかと考えたこともありました。

そうならないようにするためにプログラミングを勉強する仲間を作ったり、質問できる先生のような存在を見つけるといいと思います。私の場合は、プログラミングを勉強し始めた人のブログをいくつかまわって気の合いそうな人にメールを送って連絡を取り合うようにしました。

そうやって連絡をとりあえば、分からないことや疑問に思ったことを気楽に聞けるのでとてもおすすめです。自分ひとりでは分からなかったことも、誰かに聞けば教えてくれたり、分かる人を紹介してくれます。ですから、これからプログラミングを始めようと考えている人は一緒に勉強できる仲間をぜひ作っていってほしいと思います。

【オススメ記事】
➡︎[【Ruby上達事例②】ドットインストールを使って3ヶ月でRubyをマスター](http://programming-study.com/case/ruby-dotinstall/)