OmniAICreator/Qiita-1.07M huggingface dataset:
AppCenterを用いた、ReactNativeアプリのテスター配布自動化

# AppCenter is 何？

Microsoftが開発している統合CI PaaS環境です。
詳しくは[公式サイト](https://appcenter.ms/)を参照してください。
githubなどのgitレポジトリで連携してテストからビルドしてテスター配布までの作業を自動化できる他クラッシュレポート、Codepush,Notification、Appiumなどを使用した様々な実機によるリモート実機テストなどもサポートしています。fastlaneなどの外部ツールと連携するためのプラグイン機構もあります。

# buildの構成

## Appcenterのビルドフック

AppcenterのCIプロセスは

- レポジトリからのclone
- ビルド
- テスト(npm run test)
- 実機テスト(npm run test)
- 署名
- リリース

といった手順で進みます。このプロセスにおけるビルドの前後で

- appcenter-post-clone.sh
- appcenter-pre-build.sh
- appcenter-post-build.sh

というファイル名で、shellスクリプトを書くと、それぞれのファイル名に応じたタイミングでイベントフックをして、任意の処理を実行することができます。これらのファイルの配置場所はどのフレームワークや技術セットを使ったかによって微妙に配置場所が異なるので注意してください。react-nativeの場合は、package.jsonの配置場所と同じパスに置かなければいけないという制約があります(今後指定方法が増える可能性は感じています)。このあたりは、よくあるCIのパイプラインの仕組みと一緒かと思います。post-cloneとpre-buildのタイミングの違いはreact-nativeの場合は、post-cloneの場合はgit cloneを実行した直後、pre-buildはnpm install,pod installの直後に指定の処理を行うことができあます。

この機能はカスタムビルドスクリプトと呼ばれています。

[カルタムビルドスクリプト](https://docs.microsoft.com/en-us/appcenter/build/custom/scripts/index)
[ビルドプロセス](https://docs.microsoft.com/en-us/appcenter/build/react-native/ios/)

についての詳細は以上のいリンクをご覧ください。

##　実際の運用例

うちのチームではCI上のビルドを行う際にfirebaseの設定が必要となるためenv/firebaseConfigディレクトリからビルドの解析パスに設定ファイルをコピーする処理をシェルで書いています

```text:path
env/firebaseConfig
├── development
│   ├── GoogleService-Info.plist
│   └── google-services.json
├── production
│   ├── GoogleService-Info.plist
│   └── google-services.json
└── staging
    ├── GoogleService-Info.plist
    └── google-services.json
```

```shell
#!/usr/bin/env bash

cwd=$(pwd) 
baseDir="${cwd}/env/firebaseConfig/$ENV"
configFileIOS="GoogleService-Info.plist"
configFileAndroid="google-services.json"

if [ -d $baseDir ] && ! [ -z $ENV ];
then
  echo "Switching to Firebase ${ENV} environment"
  yes | cp -rf "$baseDir/$configFileAndroid" "${cwd}/android/app"
  yes | cp -rf "$baseDir/$configFileIOS" "${cwd}/ios/app"
fi
```

また、Appcenterにもビルドに応じた[環境変数を設定する](https://docs.microsoft.com/en-us/appcenter/build/custom/variables/)機能がちゃんとあるので、ビルドに含まれるプライペートな情報や環境依存のパラメータははこれらを使用しましょう。例として以下にnodeのバージョンを切り替えてビルドするためのスクリプトを書いています。

```shell:change_node.sh
set -ex
brew uninstall node@6
curl "https://nodejs.org/dist/v${NODE_VERSION}/node-v${NODE_VERSION}.pkg" > "$HOME/Downloads/node-installer.pkg"
sudo installer -store -pkg "$HOME/Downloads/node-installer.pkg" -target "/"
```

ちなみに、以上の方法は公式に質問したところ、以上のようにやってくださいとの回答を得たものですので実行しても大丈夫だそうです。ビルドには時間制限があるため長期実行されているプロセスは勝手に打ち切られるとは思いますが、ちゃんと最低限モラルと暗黙の了解を守って使う必要はありますね。
appcenterには画面右下にチャットウインドウがあり、常駐のエンジニアに質問を投げかけることができるため、機能について深く突っ込んだ質問をしても親切に答えてくれます（ました）。この機能非常にありがたいので、とても好感持てました。

追記

RN0.56以上でバージョンを変える場合はnvm経由で変更するようにしてくださいとのアナウンスがありました。

https://intercom.help/appcenter/build/react-native/react-native-builds-fail-with-the-engine-node-is-incompatible-with-this-module-expected-version-xxx-error-found-incompatible-module

## まとめ

AppcenterはFabricに比べて情報が出てきづらいですが、非常に使いやすいと思いました。
FabricもFirebaseと統合されたことによって使いやすくなることは予想されますが、RNアプリに関して導入しようとしたところ、結構ハマりどころが多かったため、個人的にはAppcenterの方が楽に実装できました。
もし、興味があったら色々質問してください。僕もこういう事例あったら知りたいので、教えてくれる人いたら情報提供お待ちしいています。
【プログラミングいろは】"○○さん、こんにちは"と書く(変数)

[K3Tunnel](https://k3tunnel.com)を使ってプログラミングのいろはを書いています。

今回は"◯◯さん、こんにちは"と、名前の部分を◯◯と空欄にして、いろんな人の名前を当てはめられるようにしてみます。

# ◯◯は変数

プログラミングでは○○は変数と言います。
まず、名前を入れる○○を作ります。

1. K3Tunnelの画面の左に「文字」とかとならんで「変数」とあります。ここをタップすると変数を使うためのブロックが出てきます。
2. 最初は「変数を新しく作る」をタップして、「新しい変数の名前」に"名前"と入れてokを押します。

<img width="30%" src="https://qiita-image-store.s3.amazonaws.com/0/297642/51a9aadd-887a-8708-3fbf-c8d61b3e9db6.png">

# ○○を"佐藤"にする

○○に当てはめる人を佐藤さんとしましょう。

1. 画面左の変数の中の「名前を～にする」というブロックをつかます。このブロックを置きます。
2. "佐藤"という文字を用意します。画面左の文字の中の「"～"」というブロックを置きます。このブロックをタップして"佐藤"と入れます。
3. "佐藤"という文字のブロックを、「名前を～にする」ブロックの穴にはめます。

これで、変数"名前"が"佐藤"という文字になります。

プログラミング用語では、変数に何か値(ここでは"佐藤"という文字)を入れることを、「代入する」といいます。ここでやってることは『変数"名前"に、文字列"佐藤"を代入する』といいます。


# 変数を使う

1. 画面左の変数の中の「名前」ブロックを置きます。（"佐藤"という文字を当てはめる○○を表す）
2. 画面左の文字の中の「"～"」ブロックに"さん、こんにちは"と入れます。
3. 画面左の文字の中の「文字列をつなげる」ブロックを置いて、その穴の中に変数の「名前」ブロックと文字の「"さん、こんにちは"」ブロックをはめます。（画像参照）

# ブロックを実行する順につなぐ
「○○を"佐藤"にする」で作ったブロックと、「変数を使う」で作ったブロックを順番に並べます。



![Screenshot_20181201-172304.png](https://qiita-image-store.s3.amazonaws.com/0/297642/32308363-0a5d-f9cf-c1fa-b569c0985120.png)


# 実行する
実行するとこうなります。

![Screenshot_20181201-172324.png](https://qiita-image-store.s3.amazonaws.com/0/297642/aad83947-aead-32f1-d26b-eb60ccea6cba.png)

"佐藤"のところを別の名前に変えてみたり、もう一つ変数を増やして複雑な文にしてみたり、文字と変数の並びを入れ替えてみたり、いろいろ試してみると面白いと思います。
anaconda3のpythonのライブラリ追加方法

この記事はanaconda初心者な自分の思い出しを兼ねるための記事です。
よって、そんなこと常識だってことが書いてあると思います。
そう思った人は、そっ閉じしてください。
#なんでこの記事を書いたのか
なぜか自分のAnaconda Promptが使い物にならない。
Pythonのライブラリなどが入れられない.....

簡単な状況説明をすると
conda-forgeを使って入れようとするとサーチ？にめちゃめちゃ時間がかかり、放置してるといつの間にか、rollbackを起こす。

しかし、そんなときに、conda-forgeを使ってpythonのライブラリを追加する方法を知ることができたので簡単な手順を置いておく。



#手順
###1,conda-forgeを自分のchannelに追加する。
conda-forgeが既に追加されているのであれば、ここは飛ばす。
まず、Anaconda　Promptを起動する。
そこで
conda config --append channels conda-forge
を入力して実行してください。
ここでAnaconda　Promptの使用は終わりです。

###2,Anaconda NavigatorのEnvironmentalでインストール
上のinstalledとなっているのをNot installedに直し、それの隣のサーチボックスに欲しいものを入れると出てくると思います。

出てこないのであればあきらめるか自分でインストールするしかありません。


#あとがき

Anaconda Promptなんて嫌い....
Dockerはもっと嫌い（WindowsHome民）
nexeでパッケージしたexeで開いた黒い画面を何か入力されるまで閉じられないようにする

#始めに
exeを実行したら処理が終わると黒い画面が消えていたので、それを止める手段を探していました。

#実装
readlineで入力待ちするだけ

```javascript
console.log("閉じる時は何かキーを入力してください");

const reader = require('readline').createInterface({
  input: process.stdin,
  output: process.stdout
});

reader.on('line', (line) => {
  process.exit();
})
```

#終わりに
実行結果をテキストに出力すれば良いですが、ただ確認するだけで良いときとかはこちらで。
8946 Take#47

#問題

http://www.hackerschool.jp/hack/take47.php

![スクリーンショット 2018-12-01 19.00.39.png](https://qiita-image-store.s3.amazonaws.com/0/17681/f437c270-e8b1-b1a2-25a7-383eb66b37fe.png)

#解いてみた

- jpドメインの有効期限なのでJPRSのサイトでwhoisします。
    - https://whois.jprs.jp/

![スクリーンショット 2018-12-01 19.02.44.png](https://qiita-image-store.s3.amazonaws.com/0/17681/4e63d53f-de97-fb5a-8897-4738f9798f95.png)

- 書いてある通り2019/07/31が正解です。

![スクリーンショット 2018-12-01 19.03.40.png](https://qiita-image-store.s3.amazonaws.com/0/17681/11e5c9d1-e5fa-5f08-52b4-30929d6ad884.png)

- まじかよ。違った。
- もしかしたら07ではなく7かもと思って再度挑戦してみましたが、ダメでした。
- 万策尽きたので保留です。。。
ReactのdangerouslySetInnerHTML使ってみた

## 何に使えるの？
マークダウンエディタを作りたい場合など、ブラウザ上で記述したHTMLのプレビューを作りたいときに使えます。
社内システムでHTMLのプレビュー画面が作れないか？という相談を受けたので調べて使ってみました。

![作ったもの](https://gyazo.com/d1e0eef4ae64d45399aa762d4de1ae1d/raw)

## dangerouslySetInnerHTML
dangerouslyuSetInnerHTML属性に`__html`プロパティを持つ`Object`を渡してあげると動作します。`text`には、入力されたテキストエリアの文字列が入っています。

```javascript

const Preview = props => {
  const { text } = props
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: text
      }}
    />
  )
}
```

## dangerouslyの由来
innerHTMLもそうですが、これを使うことでXSSの脆弱性を生み出すことがあります。
innerHTMLの仕様で`<script>`タグは使えませんが、`onclick`などのイベントは実行することができるので、下記の様に書くことで任意のJavascriptコードを実行することができます。

```html
<button onclick"alert('Hi!!!')">Click here!!!</button>
```

![こんなかんじ](https://gyazo.com/30b85c4b0ba7d4767e41abc132f7f91f/raw)

ということで直接もらった文字列を設定するのは良くないです。(↑は悪い例)
本家のドキュメントにも記載してありますが、↓のように必ず入力値の検証処理などを挟んで任意のコードを実行されないようにしましょう。

```javascript
const Preview = props => {
  const { text } = props
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: sanitizing(text)
      }}
    />
  )
}
```

## まとめ
* ReactのdangerouslySetInnerHTMLを触ってみました。
* dangerouslyの名前通りXSSになる危険性があるので用法用量を守って正しくお使いください。※ 使わなくて済むなら使わないほうがいいです。
* 今回のソースコードの完全版は[github](https://github.com/hiromoon/htmlViewer)で公開しています。
    * サニタイズ部分はサボってますごめんなさい。

## 参考
* [React - dangerouslySetInnerHTML](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml)
* [MDN - element.innerHTML
](https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML)
CircleCI　Jobの結果をSlackに通知する

# やること
CircleCIのJobの結果を、皆さん大好きSlackに通知します。

##Slack側の手順
デスクトップアプリのSlackを起動して、Appを選択します。
<img width="214" alt="スクリーンショット 2018-12-01 18.06.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/231906/9de5c845-91d8-d632-52b9-2f9d8c6cda9d.png">

CircleCIと検索して、インストールをクリックします。
<img width="798" alt="スクリーンショット 2018-12-01 18.07.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/231906/106205fe-223b-85a1-4289-1cd8ee3532d0.png">

ブラウザが立ち上がるので、インストールをクリックします。
<img width="1001" alt="スクリーンショット 2018-12-01 18.10.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/231906/cd57a5a5-e1f1-e1c3-81cd-3af7175692f4.png">

新しいチャンネルを作成して、または既存のチャネルを選択して、"CircleCI インテグレーションの追加"をクリックします。
<img width="982" alt="スクリーンショット 2018-12-01 18.12.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/231906/fb4b56db-fb62-12a6-2ae0-091c1f2eb467.png">

簡単！！Slack側はこれで完了です。

##CircleCI側の手順
Slack側の手順が終わりますと、CircleCI側の手順が表示されますので、書いてある通りに設定します。

CircleCI アカウントで、モニターしたいプロジェクトの横にある歯車をクリックします。 
<img width="369" alt="スクリーンショット 2018-12-01 18.20.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/231906/b13da5df-b97a-a1ad-4da5-9b6ecb5d9107.png">

左側のサイドバーの Notifications セクションのChat Notificationsをクリックします。リスト内の Slack を探し、ご自身のWebhook URL を追加します。終わったら Save ボタンを押します。 
<img width="600" alt="スクリーンショット 2018-12-01 18.23.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/231906/a8f43531-e6ab-eee8-9791-9ca46dbb53af.png">

##テスト
それでは、Saveボタンの横にある、& Test Hook　ボタンを押してみましょう！
以下のようなメッセージがSlackに来たら成功です。
<img width="227" alt="スクリーンショット 2018-12-01 18.28.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/231906/49861542-403a-f4af-1a48-bfffadfcdd02.png">

##Job実行
準備が整いましたので、Jobを実行してみましょう。
失敗した時の例です。ちゃんとメッセージが届きます。
<img width="730" alt="スクリーンショット 2018-12-01 18.31.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/231906/072a7244-f434-063e-3d9c-8fbfa682ce4b.png">

成功した時の例です。こちらもちゃんとメッセージが届きます。
成功した時はメッセージいらないよー、という人は先ほど出てきたChatIntegrationの設定で"Fixed/Failed Only"をセットして下さい。
<img width="821" alt="スクリーンショット 2018-12-01 18.36.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/231906/64c0c42a-a8fb-2c7d-b58c-f86c67eebc43.png">

##まとめ
Slackとのインテグレーションはかなり便利ですね。
機械学習を用いた競艇予測に使えそうなウェブページまとめ

## 書いている人について

機械学習素人かつ競艇素人．ビギナーズラックもなく負けて悔しい思いをしたので勉強しようと発起．
加えて，Qiita素人．なので，ひとまず自分のメモ用からスタート．
実装中．データクレンジングまでは得意なshell scriptとCで頑張る．python難しいです．

## 競艇予測のウェブページまとめ

### うぺのえーあい競艇日記
http://kohilinus.hatenadiary.com/entry/2018/02/09/173550

目的：「イン逃げ確定のレース」という前提の元，2-6号艇の2着率・3着率の予測
手法：ニューラルネットとSVM
備考：直前情報（全検・事前レース・展示や気候）・オッズは人間の手で補足

### ニートの言葉（みずはのめ）
https://blog.takuya-andou.com/entry/mizuhanome_dashboard

目的：全券種の全組み合わせの確率の予測
手法：詳しいことは過去記事にヒントあり？
備考：最も予測精度が高く，情報も多そうな印象

### Alpha Boat
http://alpha-boat.hatenablog.com/

目的：三連複が当たる確率50%以上のレースを予測
手法：記載なし
備考：情報量少ないですが，モンテカルロ法などオッズ含めた予測・購入のリコメンドを含めようと思ったらためになりそうな情報あり．あと，オッズに変動を与えるほどの買いを入れると損，とか基本的なことも勉強になります．

### BoatRace Metrics
http://boatrace-metrics.com/

予測のページではありませんが，データを使って統計情報を出しています．
予測のタネになりそうな統計情報がゴロゴロあるのと，著者の方が競艇好きのようで色々な切り口から競艇を見ていて，読んでいるだけで楽しい．

### 競艇・2点買いで1回は当たる？
http://2tengai.blog.fc2.com/

予測のページでは（恐らく）ありません．アプローチが面白い．
正直，競艇知識が不足しているのでこのページで何をやっているのかはよくわからないです．
まずは最初のゴールはこちらのページに倣って，2連単の予測からスタートすると勝ちやすいのかなと思ったり．

## 機械学習のウェブページまとめ

### ニートの言葉：深層強化学習でシステムトレードをやる時に役に立ちそうな資料まとめ
https://blog.takuya-andou.com/entry/dqn_fx

これから機械学習を勉強しようとする時に参考になりそうなまとめ．とっかかりにはちょうど良さそう．

### いものやま。：強化学習について学んでみた。（まとめ）
http://yamaimo.hatenablog.jp/entry/2016/01/11/200000

表題の通り，強化学習のまとめ．

### Qiita：ゼロからDeepまで学ぶ強化学習
https://qiita.com/icoxfog417/items/242439ecd1a477ece312

表題の通り．有名記事なのかと．

### SlideShare：PythonではじめるOpenAI Gymトレーニング
https://www.slideshare.net/takahirokubo7792/python-openai-gym

Python使った実装のとっかかりに良さそう．

## 実装編

### はんぺらのブログ
http://eejanaica.com/kyotei-prediction/

データの取得先URLの情報と，2012年4月1日以降はルール改正？により解析には使いづらいとの情報が．これは大事．
シンプルにEJSでページを量産する

#始めに
node.jsでページ量産と調べるとgulp+ejsって組み合わせがよく出てくるのですが、そもそもejs単体じゃだめなのかなーって思ってやってみたら出来たのでメモです。
gulpはグローバルとローカル両方にインストールが基本って聞いててそうなるとexe化して他の人にも使ってもらう時とかに面倒そうだなと思って省きたかったのです。

#EJSインストール
```bash
npm install --save ejs
```

#実装
##メインの実装

```javascript:index.js
const fs = require('fs');
const path = require('path');
const ejs = require('ejs');

const templatePath = 'template-sample.ejs'; //テンプレート
const dataPath = 'data-sample.json';  //差異データ

const outputPath = 'result/'; //出力先


const data = JSON.parse(fs.readFileSync(dataPath,'utf-8')).data;

data.forEach((item) => {
  
  ejs.renderFile(templatePath, item, (error,output) => {
    if(error){
      console.log(error);
    }else{
      fs.writeFileSync(path.join(outputPath,`${item.filename}.html`),output);
    }
  })

});
```

##テンプレート例
```html:template-sample.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><%= title %></title>
</head>
<body>
  <p><%= body %></p>
</body>
</html>
```

##json例
```json:data-sample.json
{
  "data" : [
    {
      "filename":"output1",
      "title":"title1",
      "body":"body1"
    },
    {
      "filename":"output2",
      "title":"title2",
      "body":"body2"
    }
  ]
}
```

#サンプルの結果
```html:output1.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>title1</title>
</head>
<body>
  <p>body1</p>
</body>
</html>
```

```html:output2.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>title2</title>
</head>
<body>
  <p>body2</p>
</body>
</html>
```

#終わりに
結構簡単に出来たので仕事でもサクッと使えそうです。
Gitについてのメモ

これまでずっとSubversionを使ってきたが、Gitを使うことになったので、Gitについて学習してみた。
参考にしたのは「わかばちゃんと学ぶGit使い方入門」。

#Gitとは？

- Gitとはバージョン管理システム。
 - よく聞くGitHubはあくまでGitを使ったサービスの一種である。
 - GitHubの他、GitLabやBitbucketなどがある。

###Gitの特徴
- ファイルのバックアップが取れる
- 簡単に過去の時点に戻れる
- 複数人での作業が簡単
- 実リポジトリに変更を加えることなく、ローカルリポジトリを作っての作業が可能 

#リポジトリ

- リポジトリは過去の状態を保存しておく貯蔵庫のこと
- git上でリポジトリを作成すると、自動的に.gitという隠しフォルダが作成される
    - この隠しフォルダには過去のファイルやディレクトリが特殊な状態で圧縮されている

###リポジトリの種類

- ローカルリポジトリ
    - 手元のPCで管理するリポジトリ
    - 普段作業するリポジトリとして、リモートからクローンしてきたものをここで編集する
- リモートリポジトリ
    - 専用のサーバーで管理されるリポジトリ
    - ローカルで作業した内容を公開する先
    - 他の人の変更をここから持ってくることもできる

#コミット

- コミットまでの流れ
    - 作業する
    - ステージする(git add)
    - コミットする(git commit)
- もし、コミットしたものを元に戻すなら
    - 特定のコミットをチェックアウトする(git checkout)
        - 単純に過去のコミットの状態に戻る
        - コミットしたものを打ち消すわけではない
    - 変更をリバートする(git revert)
        - 変更したもの自体を打ち消す

#他人のリポジトリの取得
- 以下の順番でできる
    - fork
        - サーバー上の自分のアカウントにコピーしてくる
    - clone(git clone)
        - 自分のローカルリポジトリ上にコピーしてくる

#ブランチ

- レポジトリの中で並行して作業ができる、枝(=ブランチ)のこと
    - 本番用のコードが入っているところから、バグ修正用だったり、新機能追加をするブランチをそれぞれ追加することで、ごちゃまぜになることなくそれぞれ並行して作業が可能になる
    - ブランチ間を移動したいときはそのブランチをチェックアアウトする(git checkout)
    - バス修正や機能追加など、そのブランチでの作業を統合させたいときは、マージする(git merge)
- 本番用のコードが入っているのがmasterブランチ
    - 最初にできているブランチ
    - 常に最新の状態にしておくことが一般的
    - 作業ブランチのことはtopicブランチといわれる
    - 目的ごとにmasterブランチからtopicブランチをはやして作業すること

#プッシュ

- ローカルのリポジトリにコミットしたものをリモートリポジトリに反映させること

#プル

- 他人がリモートリポジトリへ加えた変更をローカルリポジトリへ反映させること

#コンフリクト

- 同じ行に同じ時期に変更が入った場合、gitはどちらを優先すればよいか判断できないため、コンフリクトをいう状態になる
- その場合、コンフリクトが起きたファイルの対象の個所にコンフリクトが起きたことを記録してくれる。
- 解決するには、コミットした人同士でどちら正しい変更かどうかを確認し、正しい変更でファイルを修正し、コミットする

#プルリクエスト

- 自分の変更をフォーク元のリポジトリへ反映してもらうように要求すること
    - プルリクエストを出した後、フォーク元のリポジトリ作成者がそのコードを見て、自分のリポジトリへ反映するかどうかを判断する
    - 運用方法にもよるが、この時に同時にコードレビューも実施可能
- 自分のアカウント上のリポジトリへプッシュした後、プルリクエストを出す

#.gitignore

- gitの管理対象ファイルから外したいファイルがあるときに作成する
- .gitignoreに外したいファイルのファイル名を書き込んでおく
    - 勝手に作成されるような隠しファイルなどを対象にすることが多い
- .gitigonore自体もコミットしておく必要がある

#リベース

- ブランチを統合するにはmergeだけではなく、リベースという方法がある
    - 元々のブランチ発生元からコミットが変わり、最新のコミットをベースとしたところからブランチを統合させる
- マージとの違い
    - マージは実際のコードのコミットとは別に、マージするためのコミットが別途作成される
    - リベースは元のコミットを改変した上で変更を反映していく
- が、masterを改変して、よからぬことも起きやすいので、基本的にはmergeを使うほうが安全

#リモート追跡リポジトリ

- リモートブランチ
    - リモートリポジトリの中にあるブランチ
- リモート追跡ブランチ
    - ローカルリポジトリの中にある
    - リモートブランチをミラーリングしただけのもの
    - 読み取り専用
- ローカルブランチ
    - ローカルブランチの中にある
    - 普段作業するブランチ
- fetchという作業をすることで、リモートブランチから最新の変更をリモート追跡ブランチへ反映させる
- そこからmergeすることで、ローカルブランチに変更を反映させる
    - pullはfetch + mergeの組み合わせ

#チェリーピック

- 任意のコミットを自分のブランチへ持ってくる
- あくまで、その任意のコミットをコピーしてくるのみである
機械学習を学び始めるにあたって

今年も気がつけばもう12月ですね。

[昨年](https://qiita.com/advent-calendar/2017/brightvie)に引き続き、今年もできる範囲で走り続けていこうと思います。
[株式会社ブライト・ヴィー 2018年版 アドベントカレンダー](https://qiita.com/advent-calendar/2018/brightvie)
 今年も宜しくお願い致します。

# はじめに

今年の1月~10月頃まで私個人として機械学習やディープラーニング周りの勉強を本格的に行ってきました。
大学時代は多目的最適化など最適化問題を扱う勉強などをしていたので、
こういう分野にはもともと興味があり、そろそろ本格的に仕組みを学んでみたいと思ったのがきっかけでした。

なので今回は「機械学習」を学ぶにあたって、そもそもどんな流れで行われていたり、
何をしなきゃいけないかなど簡単に概要を記載してみようと思います。

# そもそも機械学習を行うためには

機械学習を行うためには分析を行うためのデータがまず必要になります。
そのデータから表記ブレや欠損値の補完、ダミー変数化などの「前処理」と呼ばれる重要なプロセスを行い、データの性質を把握し、
そして「アルゴリズムを検討」「モデル評価」「モデル最適化」を繰り返しながら予測精度を高めていく流れとなります。

1. データの入手
2. データ前処理
3. 基礎集計, グラフ化, 特徴量の設計など
4. アルゴリズムの検討
5. モデルの評価
6. モデル最適化
7. 4~6を繰り返し行い、モデルを決定

1~3では、主にデータの特徴や性質をしっかり理解することが大事であり、
4~7では、利用するアルゴリズムの特徴を理解した上で、
やりたいこと求めたいことなどの目的を達成するためのアルゴリズムを選択し、チューニングしていく必要があります。


## 機械学習のアルゴリズムってどんなのがあるのか

様々なサイトで紹介されているのでここでは簡単に記載するのみとしますが、
大きな分類としては3種類に分けることが出来るようです。

| 分類 | 説明 | 一言で表すと |
|:-:|:-:|:-:|
| 教師あり | 事前に与えられたデータを元に学習を行う手法 | データに正解がある |
| 教師なし | 学習対象のデータはあるが、何が正解か与えられていないので、何かしらの構造や法則を見出すための手法 | データに正解がない |
| 中間的手法 | 教師あり/なしに分類できないときの方法 | - |

そしてそれぞれの分類ごとのアルゴリズムを単語だけあげると

- 教師あり
   - 線形回帰
   - ロジスティック回帰
   - サポートベクターマシーン(SVM)
   - パーセプトロン
   - 決定木
   - ランダムフォレスト
   - アンサンブル学習
   - ナイーブベイズ
   - k近傍法 ( KNN )
   - ニューラルネットワーク ( NN )
   - 畳み込みニューラルネットワーク ( CNN )
- 教師なし
   - k平均法 ( k-means )
   - 主成分分析 ( PCA )
   - 自己組織化マップ ( SOM )
   - X-means
- 中間的手法
   - Q学習

など上記に記載した以外でも様々なアルゴリズムが存在しており、
この中から目的にあったアルゴリズムを選定し、
パラメータのチューニングをしていくことで予測精度を高めていくような流れとなります。

- 参考
   - [代表的な機械学習手法一覧](https://qiita.com/tomomoto/items/b3fd1ec7f9b68ab6dfe2)
   - [機械学習の情報を手法を中心にざっくり整理](https://qiita.com/ishizakiiii/items/f6909696c616fd6294ca)
   - [機械学習の学習日記 | 分類](http://yamanchu.guhaw.com/machine_learning/section)


また、これらのアルゴリズムを簡単に利用できる有名所なライブラリとしては、
「scikit-learn」という、Pythonのオープンソース機械学習ライブラリなどがあります。

使う側が機械学習の手法そのものを実装しなくても「scikit-learn」のように完成度の高いライブラリを使うことで、データを分析予測していくことが可能となります。

「scikit-learn」で利用できるアルゴリズムも下記記事で紹介されているので、参考までに

- [【機械学習初心者向け】scikit-learn「アルゴリズム・チートシート」の全手法を実装・解説してみた](https://qiita.com/sugulu/items/e3fc39f2e552f2355209)


##  統計学との違いは

「統計学」と「機械学習」って何が違うんだろうと感じて調べてみたところ、どちらも密接な関係はありますが、

- 統計学は、少ないデータを元に「データを「説明」すること」により重きを置く
- 機械学習は、大量のデータを元に「データから「予測」すること」により重きを置く

といった性質の違いがあるようですね

- 参考
   - [「統計学と機械学習の違い」はどう論じたら良いのか](http://tjo.hatenablog.com/entry/2015/09/17/190000)


# まとめ

今日は、機械学習を学び始めるにあたっての概要だけを簡単にまとめてみました。

私自身が取り組んだときには、これらの手順を1つずつ手を動かしながら学んでいき、
ときにはライブラリを利用せずにアルゴリズムを自分で実装するといったことも行いながら
ロジック面での仕組みの理解やアルゴリズムの特徴の理解などをより深めることが個人としては出来ました。


また機械学習を行う上ではデータが非常に重要になりますが
[kaggle(カグル)](https://www.kaggle.com/)などでは企業からデータが提供されていたり、
問題も豊富に取り揃えられているため、ぜひチャレンジしてみるのも良いのかなと思います。
Node-REDのフローを縦にする

# 横のものを縦にする

Node-RED アドベントカレンダー2018 三日目の記事です。

Node-REDのフローは横書きです。
今日はクリスマスも近いのでwwこれを縦にします。

サンプルには、Node-REDユーザが一度は見たことがあるであろう、
@zuhitoさんの「[目からウロコ！Node-REDのデザインパターン10選](https://qiita.com/zuhito/items/e9abfd6f1ba188f908ed)」から３つと、長めの自作のワークフローをとりあげます。

横と縦、どちらのフローが読みやすいか・わかりやすいか選んでみてください。

それでは、ご覧ください。[^1]

[^1]: 縦の方は横とフローデータは同じですが、レイアウトは見やすいように調整しています。


## 「2. UI & APIパターン」
### 横の場合
![2-ui-pattern-h.png](https://qiita-image-store.s3.amazonaws.com/0/133603/f07a9b31-53ec-111b-6172-2a8d09f43bfc.png)

### 縦の場合
![2-ui-pattern-v.png](https://qiita-image-store.s3.amazonaws.com/0/133603/73846686-a051-1f7b-7287-6e9df12b31a2.png)

すっきりしました


## 「9. Matcherパターン」

### 横の場合
![9-matcher-pattern-h.png](https://qiita-image-store.s3.amazonaws.com/0/133603/89b4c7d0-12ff-5f25-3d6c-e1459ac88b8d.png)

### 縦の場合
![9-matcher-pattern-v.png](https://qiita-image-store.s3.amazonaws.com/0/133603/1ae5096d-7e63-50a2-5247-ee481fb8c72b.png)

流れが追いやすい

## 「10. Stateパターン」

### 横の場合
![10-state-pattern-h.png](https://qiita-image-store.s3.amazonaws.com/0/133603/fc031682-9f09-7f1c-0523-9e8a87e30908.png)

### 縦の場合
![10-state-pattern-v.png](https://qiita-image-store.s3.amazonaws.com/0/133603/c3ecf303-445b-6c9a-545a-5d84bc373a3d.png)


わかりやすくなった


## 「監視アラートのエスカレーションフロー」

### 横の場合
![some-flow-h.png](https://qiita-image-store.s3.amazonaws.com/0/133603/b1cdc5a0-6e65-8d3f-260c-5bee22b0707d.png)

横スクロールを避けるために、右端に達したら一段下げて折り返している。
右から左への折返し線で見にくくなる避けるために、リンクステートで右から左へ折り返ししている。


### 縦の場合

![some-flow-v.png](https://qiita-image-store.s3.amazonaws.com/0/133603/e02ac9c9-42f3-6ebf-3500-fe235834bb0b.png)

見たことある馴染みの感じに

##


さて、横と縦、どちらが読みやすい、わかりやすかったでしょうか。

「[目からウロコ！Node-REDのデザインパターン10選](https://qiita.com/zuhito/items/e9abfd6f1ba188f908ed)」の
ちょっと複雑に見えるフローも、
縦のほうが馴染みがある、読みやすい、わかりやすいと感じませんでしたか？

## 縦のフローは好きですか？

縦にするとフローの第一印象が、だいぶ変わります。

普段ソースコードや設定ファイルを見慣れているせいか、
上から下に流れを追う方が自然な感じを受けます

また、縦には以下のメリットがあります。

* フローが読みやすい
    * 開始ノードの場所が一目でわかる
    * 横スクロールしないで、上から下に自然に読める
* スペースが有効に使える
    * 折り返さないで描ける
    * ノード接続線が短く済む
    * コメントノードが横に起きやすい

私は断然「縦」が好きになりました。

縦を使ってみたい方は、後述のAppendixから試すことができます。
**[設定]＞[表示]＞[その他-縦フロー]**にチェックし、ブラウザをリロードすると縦フローになります。

横と縦、選択できるとしたら、どちらを好んで使いますか？

私は縦が気に入りましたが、
縦が好きな人がどれくらいいるのか想像がつかないので、
いいねでも、Twitterでも、Facebookでもいいので表明してもらえると嬉しいです。

声が多いようなら、Node-RED本体に取り込んでもらえるように動いてみようと思います。

※拙作のシステム管理者向けNode-RED「[FrontOps](https://frontops.exhands.org/)」には、近いうちに取り込むことに決めました。

それでは、良い縦書きライフを。

## Appendix: 操作イメージ

![nodered-vertical-flow2.gif](https://qiita-image-store.s3.amazonaws.com/0/133603/76048005-d855-84d6-e390-45eaaeb7e0e2.gif)



## Appendix: 使用方法

### 縦にできるNode-REDを試す

縦にできるNode-REDを試すには

```
git clone -b vertical-view https://github.com/sakazuki/node-red.git
cd node-red
npm install
npm run build
npm run start
```

※ 尚、縦を使う際はグリッドサイズを20から10に変更するのがお勧めです


Node-REDのエディタ部のソースコードを修正して実現しています。
修正したソースコードは[githubにアップ](https://github.com/sakazuki/node-red/tree/vertical-view)しているのでご覧ください[^2]

[^2]: Node-REDのソースをforkして、`vertical-view`というブランチを作っています。

主要な修正は2ファイルで、修正点の簡単な説明は次の通りです。

|ファイル|説明|
|----|----|
|`editor/js/ui/view.js`|generateLinkPath関数の縦版を追加|
|`editor/js/ui/palette.js`|パレット内のポート描画を修正|
RactNative(Expo)でSecureStoreを利用する。


秘密鍵情報やsecret等の保存は悩ましいところです。
ExpoではSecureStoreという、iOSだと、Keychain Servicesを、AndroidならKeystore Systemをラップした保存手法を提供してくれます。AsyncStoreとほぼ同じ感じで使えるようです。

### App.js

実装は以下の通り。特に難しいことはありません。セットしない、deleteした場合はnullが返るようです。

```js:App.js
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { SecureStore } from 'expo';

export default class App extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Button
                    title='setItem'
                    onPress={() => this.handleSetItem()}
                />
                <Button
                    title='getItem'
                    onPress={() => this.handleGetItem()}
                />
                <Button
                    title='deleteItem'
                    onPress={() => this.handleDeleteItem()}
                />
            </View>
        );
    }

    handleSetItem = async () => {
        await SecureStore.setItemAsync('access_key', 'hoge');
        alert('setItem');
    }

    handleGetItem = async () => {
        const key = await SecureStore.getItemAsync('access_key');
        if (key === null) {
            alert('セットされていません。');
        } else {
            alert(key);
        }
    }

    handleDeleteItem = async () => {
        await SecureStore.deleteItemAsync('access_key');
        alert('deleteItem');
    }
}

```
もっと早く知りたかった今すぐ使える Android Tips

本記事は [Android 初心者 Advent Calendar 2018](https://qiita.com/advent-calendar/2018/android-beginner) 3 日目の記事です。

私が Android 開発を行うにあたって、もっと早く知っていれば…と思ったいくつかの Tips を紹介します。


# Android Studio の声に Alt+Enter で応える

Android Studio（以下 AS）は優秀な IDE なので、様々な場面で的確なエラーや警告を出して開発を強力にサポートしてくれます。このメッセージは F1 や Alt/Option+F1 を押すと見れるように AS にも表示されますが、更にここで Alt+Enter を押すとエラーや警告に適した自動修正の候補を AS が提案してくれます。

例えば IOException や ParseException などの検査例外を try/catch していないとエラー表示がされますが、ここで Alt+Enter を押すと適切な try/catch で囲ってくれます。更には埋め込み文字列の string.xml への展開や、連結文字列⇔StringBuilder の相互変換、[@SuppressWarning の挿入](https://qiita.com/s_of_p/items/7c93bd93777e71aee5fc)なども可能です。

# Ctrl/Cmd+Alt/Opt+L でコードのオートフォーマット

これは無いと普通に不便なので知っている人が多いかもしれませんが、IdeaVim を使っている人は <kbd>=</kbd> でインデント整形が可能なのでもしかしたら知らない人もいるかもしれません（私がそうでした）。

Java/Kotlin などのコードは普通に書いても比較的整い易いですが、layout などの xml ファイルは書き方によって見辛くなり易いので必ずこれで整えるようにしています。属性の順序も規則通りに入れ変えてくれるので迷うことがありません。

最近はオートフォーマッターが流行っているので、プロジェクト内で意思を疎通して https://qiita.com/konifar/items/1f56c82490986d1613a8 のように自動で動くよう設定するのもいいかもしれません。

# adb exec-out で端末からの標準出力を利用する

adb コマンドを利用してスクリーンキャプチャやアプリ内データのダンプなどを行うことは比較的よくあるかと思います。しかし `adb shell` コマンドは pty を介すので標準出力が mangle されてしまい、screencap や cat を直接リダイレクトすることが出来ません（データが破損することがある）。
こういった場合には `adb exec-out` コマンドを利用します。

```
# スクリーンキャプチャを直接マシンローカルにリダイレクトし png で保存する
adb exec-out screencap -p > ~/Downloads/out.png
# アプリ内 sqlite db を cat で標準出力させマシンローカルにリダイレクトし保存する
adb exec-out run-as your.package.name cat databases/data.db > data.db
```

こうすることで端末内に一時ファイルを作成せず、ローカルにファイルを出力・取得することが出来ます。

しかし `adb exec-out` は help を見ても出なかったりとアンドキュメンテッドな部分があるので、もしかするといつぞや使えなくなったりするのかもしれません。

# adb over TCP/IP を積極的に利用する

[adb over TCP/IP](https://developer.android.com/studio/command-line/adb?hl=ja) は聞いたことがあるという人も多いかと思いますが、USB 接続で不便していないので使ったことが無いという方もまた結構いるのではないでしょうか。

ドキュメントもありますし解説記事も多く特に難しいわけでもないので方法自体は割愛しますが、敢えて取り上げた理由があります。それはデバッグの為に頻繁に端末をケーブルで接続していると、端末側のコネクタが消耗・故障してしまうことがある為です。

インターネット上の様々な記事では耐久度は MicroUSB でおよそ 3000 回、USB Type-C では 10000 回程度が通説となっているようですが、これが十分かと言われると個人的には心許ない気がしています。また実際に Type-C コネクタを持つ端末が 1 度駄目になってしまったこともありました。adb over TCP/IP を積極的に利用することでこういった事態を防ぐことが出来そうです。


まとめ
-----

以上、コードからやや離れましたがすぐにでも使える Tips で固めてみました。皆さんのこれからの Android 開発のお役に立てば幸いです。
ActionText触ってみた件

## ActionText触ってみた件
Rails6.0からActionTextなるものが入るらしいとDHHというYoutuberから情報を得たので触ってみた。

https://www.youtube.com/watch?v=HJZ9TnKrt7Q


こんな感じのリッチテキストがシュッとできちゃう。
![スクリーンショット 2018-12-03 13.49.55.png](https://qiita-image-store.s3.amazonaws.com/0/63048/4e3186d5-c962-ab81-dfc3-54f8e640cfcd.png)



## 実際に触ってみた
DHHの真似をしながら入れてみる。

### Rails6.0.0のインストール

```
# railsリポジトリの最新
$ ./rails/rails/railties/exe/rails new action_text_app --edge
```
### webpackとactiontextとimage_processingが必要なので入れる

``` Gemfile
gem 'webpacker', github: "rails/webpacker"
gem 'actiontext', github: 'rails/actiontext', require: 'action_text'
gem 'image_processing', '~> 1.2'
```

### webpackのインストール
```
$ bundle exec rails webpacker:install 
```

### actiontextのインストール

```
$ ./bin/rails action_text:install
$ ./bin/rails db:migrate
```

### 実際に投稿画面を作っていく
```
$ ./bin/rails g scaffold post title:string
$ ./bin/rails db:migrate
```

### 画面を確認してみる
```
$ ./bin/rails s
```


scaffoldしてあるので、/postsにアクセスするとこんな感じでpost周りがいじれる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/63048/2a30fb2f-c5af-f762-09fb-93417c6d79bd.png)

### ここからがactiontextだ。

``` app/models/post.rb
class Post < ApplicationRecord
  has_rich_text :content
end
```

``` app/views/posts/_form.html.erb
# 追加
<div class="field">
  <%= form.label :content %>
  <%= form.rich_text_area :content %>
</div>
```

``` app/views/posts/show.html.erb
# 追加
<%= @post.content %>
```


# でたー
![image.png](https://qiita-image-store.s3.amazonaws.com/0/63048/08444a98-c488-680f-0d04-6910c6237739.png)


# まとめ

`image_processing`は最初のうちに入れておかないとapp/javascript/packs/application.jsにappendされないから正しく動かない。
そこだけ気をつければ簡単にセットアップできる。

これのpreview機能とか早く出てくれれば使い勝手良さそう！
windows Laravel環境構築

# windows Laravel環境構築

#### 環境
OS windows10

### xammp install

インストールされていない方は、入れましょう。
こだわりがなければphpの最新版が入ったものを入れましょう。
ポチポチでインストールできるはず。

XAMPP Apache + MariaDB + PHP + Perl
https://www.apachefriends.org/jp/index.html

---

### composer install

xammpを入れてから入れましょう。
phpを指定するところがあるのでxammpのphpを指定。

Download Composer
https://getcomposer.org/download/


Composerインストールの参考サイト

失敗しない Laravel 導入方法
http://tech-blog.rakus.co.jp/entry/2017/11/16/110742


---

### Laravelインストール

コマンドプロンプトを起動して次のコマンドを打ってください。

```ba
$ cd C:\Users\(user_name)\Desktop

$ composer create-project "laravel/laravel=5.7.*" bbs
```


作ったディレクトリに移動してバージョンを確認

```bash

$ cd bbs
$ php artisan -v
```
---

### サーバー起動

ブラウザで表示させてみよう。
もう一個コマンドプロンプトを立ち上げて、

```
$ cd C:\Users\(user_name)\Desktop\bbs
php artisan serve
```

次にアクセス

```
http://localhost:8000/

ちなみに、サーバーを落とすにはCtrl + Cを押下します
```

---

#### DBを準備する

今回は、sqliteを使います。
mysqlよりも準備が簡単だと思います

SQLite Download Page
https://www.sqlite.org/download.html

64bitであればこちらをDLL
sqlite-dll-win64-x64-3240000.zip(736.78 KiB)

zipを解凍すると「sqlite3.dll」というファイルがあるので
C:\Windows\System32に入れてください。

---

#### DB Browser for SQLiteを導入する

DB Browser for SQLite
https://sqlitebrowser.org/

64bitであればこちらをDLL
Download 64-bit
Windows.exe

ぽちぽちでインストール

---

#### DBファイルを作成する

\databaseに次のファイルを新規作成する

database.sqlite

---

#### sqlite設定



```php:\config\database.php
'default' => env('DB_CONNECTION', 'sqlite'),
```

DB_DATABASEの箇所は絶対パスで記入してください。


```\.env

DB_CONNECTION=sqlite
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=C:\Users\(user_name)\Desktop\bbs\database\database.sqlite
DB_USERNAME=homestead
DB_PASSWORD=secret

```

これは、学習用のDBで外に出してもかまわないものしか入れないのでこれでよいです。
大切なデータな場合はmysqlなどにしてパスワードを設定してください。

### DBの接続をテストする

```bash

$ php artisan migrate

Migration table created successfully.

Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table

$ php artisan tinker
Psy Shell v0.9.8 (PHP 7.2.10 — cli) by Justin Hileman

>>> App\User::all()->toArray();
=> []
// エラーがでなければOK
```

初めてのLARAVEL 5.6 : (6) データベースの環境設定
https://laravel10.wordpress.com/2015/02/21/%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AE%E7%92%B0%E5%A2%83%E8%A8%AD%E5%AE%9A/#more-269

### 参考文献

PHPフレームワーク Laravel入門
掌田津耶乃 (著)
出版社: 秀和システム (2017/9/16)
351ページ
https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF-Laravel%E5%85%A5%E9%96%80-%E6%8E%8C%E7%94%B0%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798052582/ref=tmm_hrd_swatch_0?_encoding=UTF8&qid=&sr=
Macでxcodeが入らずhomebrewが使えない場合

#### OSがなんらかの理由でアップデートできない場合

xcodeが入れられない場合
error文とOSバージョン名でぐぐってみる。
解決できなかったら

```bash
xcode-select --install
```

できなかったらxammp

#### xammpでphp7系インストール
xammpはMac OS X 10.6 or later.　10.6以上だとできるらしい
https://www.apachefriends.org/jp/index.html

#### composer install
https://getcomposer.org/download/
https://getcomposer.org/doc/00-intro.md#installation-linux-unix-macos

#### mysql config
https://laraweb.net/tutorial/3171/
CircleCIのメール配信を停止する

#目的
CircleCIでJobが失敗するたびにメールが送られてくるのが面倒なので、メール配信停止します。

##sign up
CircleCIにサインアップします。
https://circleci.com/signup/

##user setting
右上のユーザーのアイコンをクリックして、"User settings"をクリックします。
<img width="1331" alt="スクリーンショット 2018-12-01 17.40.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/231906/674d6966-eec2-3ae7-2f0a-b8262c35dd99.png">

##notification setting
"Notification Settings"をクリックして、"Default Email Notifications"で"Don't send me emails."をクリックします。
<img width="1610" alt="スクリーンショット 2018-12-01 17.42.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/231906/d955a495-cbc6-2978-b0e2-afb12b0217e8.png">

##確認
失敗してもメールが送られてこなくなりました。
失敗してもメールは送ってこなくていいよという人は、停止しちゃいましょう。
Dockerfileの構文はどんなものか（初心者）

# 概要
勉強がてら、以下公式サイトの説明を少し読んだものです
[Dockerfile reference](https://docs.docker.com/engine/reference/builder/)
参考になれば幸いです

# Dockerfile
```Docker:Dockerfile

# ■ imageの説明
INSTRUCTION 説明

# ■ メンテナンスする人（メールアドレス）
# docker inspectで表示される
MAINTAINER メールアドレス

# ■ ラベル（imageのメタデータ）
# docker inspectで表示される
LABEL 説明項目=説明

# ■ 元にするイメージ
FROM イメージ名 [AS 別名]

# ■ このイメージのビルド時に実行する処理
# 子イメージで実行される処理
ONBUILD 処理（RUN等）

# ■ 引数
# docker build --build-arg 引数名=値 で使用
# ※ http_proxy等はデフォルトで引数として存在する
ARG 引数名
ARG 引数名=デフォルト値

# ■ 環境変数
ENV 環境変数名 設定値
ENV 環境変数名=設定値
ENV 環境変数名=${引数名}

# ■ 作業ディレクトリ
# RUNを実行するディレクトリ設定
WORKDIR ディレクトリ

# ■ ユーザ
# 実行するユーザ定義
USER ユーザ名
USER ユーザ名:グループ名

# ■ シェル
# 設定した後はRUN,CMDで先頭に自動で付与される
# = シェル変更等
SHELL ["実行ファイル（コマンド）", "パラメータ"]
SHELL ["/bin/sh", "-c"]
SHELL ["powershell", "/S", "/C"]

# ■ コマンド実行 パターン1
# 新しいレイヤーを追加する（インストール系はこれ）
RUN コマンド ${環境変数名}

# ■ コマンド実行 パターン2
# コンテナ起動時(run)のデフォルトコマンドを定義する
CMD コマンド ${環境変数}
CMD ["コマンド","パラメータ１","パラメータ2"]
CMD ["パラメータ"] # ENTRYPOINTのコマンドのパラメータ定義になる

# ■ コマンド実行 パターン３
# ★CMDよりも好ましいらしい（より明確になるから）
# https://www.ctl.io/developers/blog/post/dockerfile-entrypoint-vs-cmd/
ENTRYPOINT コマンド ${環境変数}

# ■ ボリューム
# マウントするコンテナのファイルパス（ホスト側や別コンテナ側？に入る）
VOLUME ファイルパス
VOLUME ["ファイルパス"]
VOLUME ファイルパス１ ファイルパス２

# ■ 開放するポート番号
EXPOSE ポート番号
EXPOSE ポート番号/プロトコル（tcp,udp等）

# ■ ファイルをコピーする パターン１
# オーナー変更も可能（Linuxのみ）
# ※１ ビルドコンテキストのファイルまたはURL
#     またtarファイル等の圧縮ファイルは展開される
# ※２ コンテナのファイル
ADD コピー元※１ コピー先※２
ADD [--chown=ユーザ名:グループ] コピー元※１ コピー先※２

# ■ ファイルをコピーする パターン２
# オーナー変更も可能（Linuxのみ）
# ※３ ビルドコンテキストのファイル
# ※４ コンテナのファイル
# ★ADDよりこっちが良いらしい（より明確になるため）
# https://docs.docker.com/develop/develop-images/dockerfile_best-practices/#add-or-copy
COPY コピー元※３ コピー先※４
COPY [--chown=ユーザ名:グループ] コピー元※１ コピー先※２

# ■ コンテナ停止するためのシグナル
STOPSIGNAL シグナル

# ■ ヘルスチェック（起動状況確認）
# ステータスの表示に使われる（docker inspect）
# 0:正常 1:異常 2:exitコードが使われていない
# ※５ --interval,--timeoutなど
# ※６ 親イメージ引き継ぎ
HEALTHCHECK [オプション※５] CMD コマンド
HEALTHCHECK None # ※６
```
永遠の Vim 初級者の、Vim の使い方

# イントロダクション

どうも、毎年ゆるふわな記事を Vim Advent Calendar に投稿させていただいている、永遠の初級者 Vim ユーザーです。

2016 年 : [e が押せないのは誰のせい？](https://qiita.com/mdstoy/items/94702e20b7c15a8bc1ee)
2017 年 : [こんな私でも Vim が好きと言いたい](https://qiita.com/mdstoy/items/b0d3b7b3f1fc19ff40c6)

今年は、そんなライトな Vim ユーザーは Vim をどうやって使っているか、どんな機能を使っているか（どんな機能を使っていないか）を雑にお伝えしたいと思います。

## 狙い

Vim 入門者の方には Vim 入門として若干お役に立つかもしれませんが、個々の機能を詳しく解説しているわけではないのでそうでもありません。
Vim 上級者の方には、初級者のつまづきポイントがわかって普及や教育の参考になるかもしれません。知らんけど。

# よく使うもの

## 基本的なやつ

b, c, d, f, g, h, i, j, k, l, n, p, q, r, u, v, w, x, y
0, $, ~, %, /, *, @

各々のコマンドについて細かく見ていこうと思っていたんですけど[^1]、きりがないことに気づいてやめました。

## コマンド類

### 保存・終了

:q, :q!, :w, :w filename, :wq, :e filename

他にも `ZZ` とか `:x` とかいろいろあるらしいですが、私は全く使いません。いろいろ調べてそういう結論になったはず。

### その他

`set paste` とか `vimgrep` とかはたまに使っているような気がします。他にもあるかもしれませんが、ちょっとすぐには思い出せないです。履歴も確認しましたけどほとんど `w` と `e` と `help` で埋め尽くされていました。って、`help` 使ってるやん。

## テキストオブジェクト

これは使わないと、何のために Vim 使ってるんだって話になるくらい重要な機能だと個人的には思います。
テキストオブジェクトを初めて知ったときのあの感動は忘れられないです。

## バッファ

一度終了してから別のファイルを開き直したり、（Vim のウィンドウじゃなくて物理的？な）ウィンドウやコンソールを何枚も開けたりするがバカバカしくなってきたとき、人は自然とバッファにたどり着くんじゃないでしょうか。

## ウィンドウ

複数のファイルを並べて見たいけど、（Vim のウィンドウじゃなくて物理的？な）ウィンドウやコンソールを何枚も開けたりするがバカバカしくなってきたとき、人は自然とウィンドウにたどり着くんじゃないでしょうか。

## モードライン

常用しているというわけではないし、実際それほど使いどころもないですが、特定の場面では重宝しています。

# 使わない（使えない）もの

## 基本的なやつ

e, m, o, s, t, z
^, ., ?

`e` は [2年前に記事にしたとおり](https://qiita.com/mdstoy/items/94702e20b7c15a8bc1ee)使えていません。
`o` や `s` も使えていないです。`A[Enter]` とかが手癖になっているっぽい。
`^` は（この記事を書き出すまでは） `0` と同じだと思っていたのですが、`^` のヘルプを見ると

> To the first non-blank character of the line.

`^` は行頭ではなく、その行の最初の非空白文字に移動するのですね・・・。
これは明日からチャレンジしてみよう。

`t`, `m`, `z` は未だに何者なのかよく分かっていません。って、`m` って mark なのか。私、メモをとったこと自体を忘れるが故にメモを取らないタイプの人間なので、マーク使わない（使えない）んですよねぇ。

## コマンド実行

`:!` なのですが、なんと私、これが使えないんですよ。何かコマンドを実行したくなったときは `Ctrl+z` で抜けるか、tmux などでコンソールを分割しています。
エディタに実行結果が出るのがなぜか好きではないのですよね。（便利なこともあるとは分かっていても。）IDE を使うときでも、IDE 付属のコンソールは全く使いませんし・・・。

## タブ

バッファやウィンドウは使っていても、タブは使えません。そもそもまだ概念を理解できていないです。

## プラグインとか

全く使っていません。[去年の記事](https://qiita.com/mdstoy/items/b0d3b7b3f1fc19ff40c6)参照。

# まとめ

結局、文字が快適に入力できればそれでいいっていう感じなんだと思います。私の場合。

[^1]: 例えば `g` は `gg` と `G` はよく使ってるけどそれ以外は多分使ってないとか。
Rubyのハッシュの小さなサンプルメモ

# 概要
Rubyのハッシュの型と書き方に関するメモ
ほぼ「参考」先のURLのまま

# メモ

## 確認用のメソッド
```ruby
require "pp"

# 引数のハッシュの型を出力
def print_hash_types(hash)
  pp hash
  hash.each do |key, value|
    print key.class
    print ", "
    p value.class
  end
end
```

## 基本の記法と型について

> ハッシュは任意の種類のオブ ジェクト(キー)から任意の種類のオブジェクト(値)への関連づけを行うことができます。
https://docs.ruby-lang.org/ja/latest/class/Hash.html

とのことで、以下のようにカオスな感じでもハッシュとして格納OK

```ruby
hash1 = {
  0 => 2,
  1 => "a",
  "a" => 0,
  [0,1,2] => "f",
  true => 123,
  0.12 => false,
  false => :b
}
print_hash_types(hash1)
```

### 実行結果

```ruby
{0=>2, 1=>"a", "a"=>0, [0, 1, 2]=>"f", true=>123, 0.12=>false, false=>:b}
Integer, Integer
Integer, String
String, Integer
Array, String
TrueClass, Integer
Float, FalseClass
FalseClass, Symbol
```

## キーがシンボルの場合（１）

以下のように記載可能

```ruby
hash2 = { a: "A", b: "B" }
print_hash_types(hash2)
```

### 実行結果

```ruby
{:a=>"A", :b=>"B"}
Symbol, String
Symbol, String
```

## キーがシンボルの場合（２）

```ruby
hash3 = { "a": "A", "b": "B" }
print_hash_types(hash3)
```

### 実行結果

```ruby
{:a=>"A", :b=>"B"}
Symbol, String
Symbol, String
```


# 参考

class Hash (Ruby 2.5.0) https://docs.ruby-lang.org/ja/latest/class/Hash.html

https://docs.ruby-lang.org/ja/latest/doc/spec=2fliteral.html#hash
C#の非同期処理についてわからなかったので、調べてまとめてみた

こんにちは！
非同期処理というものが今までよくわかっていなかったので調べてみました。
使用言語はC#です。

##Threadクラスを使用した非同期処理
C#4　以前はThreadクラスを使用して非同期処理を行っていました。
Threadクラスを利用した非同期処理は下記の方法でおこないます。

```test.cs
class Program
    {
        static void Main(string[] args)
        {
            //スレッドを作成
            var thread = new Thread(HeavyFunc);
            //非同期処理開始
            thread.Start();
            Console.WriteLine("ワン！");

            //ここで非同期処理が終わるまで待機
            thread.Join();
            //非同期処理が終わってから実行
            Console.WriteLine("スリー！");
        }

        //暫定的な重い処理の見本
        static void HeavyFunc(){
            for (int i = 0; i < 100000; i++){
                for (int p = 0; p < 10000; p++){}
            }
            Console.WriteLine("ツー！");
        }
    }

    //実行結果
    //ワン！
    //ツー！
    //スリー
```
しかし、この方法だと新しいスレッドを作ったときに古いものを廃棄してから新しいスレッドを作らなければいけませんでした。
そこで、C# 4からTaskが導入されました。

##Taskクラスを使用した非同期処理
```test.cs
class Program
    {
        static void Main(string[] args)
        {
            //非同期処理開始
            Task task = Task.Run(() => HeavyFunc());
            Console.WriteLine("ワン！");

            //ここで非同期処理が終わるまで待機
            task.Wait();
            //非同期処理が終わってから実行
            Console.WriteLine("スリー！");
        }

        //暫定的な重い処理の見本
        static void HeavyFunc(){
            for (int i = 0; i < 100000; i++){
                for (int p = 0; p < 10000; p++){}
            }
            Console.WriteLine("ツー！");
        }
    }
```
このTaskがThreadと何が違うのかというと、
非同期処理を行うとメインのスレッドの他にサブのスレッドを作成して非同期の処理を行うわけですが、このスレッド作成処理が負荷が高いため、一度使い終わったスレッドを「スレッドプール」において、別の処理のときに再利用します。
たくさんのスレッドを使用するアプリケーションで重要になります。

##async await

```test.cs
class Program
    {
        static void Main(string[] args)
        {
            //非同期処理開始
            Task<string> task = StartAsync();
            Console.WriteLine("ワン");

            //ここで非同期処理が終わるまで待機
            task.Wait();
            //StartAsyncから帰ってきた返り値を使える
            Console.WriteLine(task.Result);
        }

        //メソッドを定義
        static async Task<string> StartAsync(){
            await Task.Run(() => HeavyFunc());
            Console.WriteLine("スリー");
            return "フォー";
        }

        //暫定的な重い処理の見本
        static void HeavyFunc(){
            for (int i = 0; i < 100000; i++){
                for (int p = 0; p < 10000; p++){}
            }
            Console.WriteLine("ツー！");
        }
    }
```

async awaitでは非同期処理から返り値をとることができます。

以上が非同期処理の説明でした！
fancyimputeをインストールしてみた

#はじめに
[fancyimpute](https://github.com/iskandr/fancyimpute)
は行列補完アルゴリズム・補完アルゴリズムのライブラリである。

#環境設定
Anacondaで仮想環境を作る
`$conda create -n data_interpolation python=3.5 pandas`

fancyimputeをインストールする前にインストールするもの

```python:setting.py
install_requires=[
    'six',
    'knnimpute',
    # need at least 1.10 for np.multi_dot
    'numpy>=1.10',
    'scipy',
    # used by NuclearNormMinimization
    'cvxpy>=1.0.6',
    'scikit-learn>=0.19.1',
    # used by MatrixFactorization
    'keras>=2.0.0',
    'np_utils',
    'tensorflow',
]
```
versionなどに注意してインストールしていく。

cvxpyがインストールに手こずったので、コマンド記載(macの場合)
`$conda install -c conda-forge lapack`
`$conda install -c cvxgrp cvxpy`
※その他の方は[こちら](https://www.cvxpy.org/install/index.html)

#fancyimputeのインストール

`$ pip install fancyimpute`

#fancyimputeを使ってみる
KNN補完の場合の関数例

```python:funcyimpute_interpolation.py
from fancyimpute import KNN

def funcyimpute_interpolation(input_df):
    # fancy impute removes column names.
    input_df_cols = list(input_df)
    input_df = pd.DataFrame(KNN(k=4).complete(input_df))
    input_df.columns = input_df_cols
```
#fancyimputeの補完の種類

- SimpleFill
    - 欠損部分を各列の平均値または中央値で置き換える
- KNN
    - NN法による補完
- SoftImpute
    - 行列補完
- IterativeSVD　
    - 反復低ランク特異値分解による行列補完
- IterativeImputer
    - ラウンドロビン方式で、他のfeatureの関数としてモデリングし、欠損を補完
- MatrixFactorization
    - 行列の特異値分解を勾配降下法で求める（UをL1,VをL2）
- NuclearNormMinimization
    - cvxpyを使用したEmmanuel CandesとBenjamin Rechtによる凸多面体最適化
    - ※行列が大きい場合は、処理が遅い
- BiScaler
    - 二重正規化行列を得るための行/列平均と標準偏差の反復推定
Ubuntu18.04をUSBブートした

たぶん、どのLinuxOSでもできると思う

##使ったもの

- windows10搭載のパソコン
- USBメモリ(16GB)
- ubuntu 18.04のisoファイル
- Universal-USB-Installer(ブータブルUSBを作るためのソフト)

##手順

1. ubuntuのisoファイルをダウンロードする[Ubuntuのダウンロードサイト](https://www.ubuntu.com/download/desktop)
2. [Universal-USB-Installer](https://itsfoss.com/create-live-usb-of-ubuntu-in-windows/?fsmoe=false)をダウンロードする
3. Universal-USB-Installerwを起動して、
    1. ubuntuを選択
    2. 初めにダウンロードしたisoファイルを選択する
    3. 使うUSBを選択して、フォーマットする項目にチェックを付ける(僕はfat32でしました)
    4. createのボタンを押して待つ
4. パソコンのBIOS画面に行く、メーカーによってやり方が異なるので検索してください
5. BIOSの画面で、ブートの順番を変える
    1. 刺さってるUSBとWindowsの入ってるドライブが表示されていると思うので、さっき作ったUSBを一番上に持ってくる
    2. 保存して、再起動する
6. 普段とは異なる起動画面になり、`なんちゃら without installing`を選択する
7. Ubuntuの画面が表示される

##1時間ほど使ってみて

今回は、[16GBのUSBメモリ](https://www.amazon.co.jp/gp/product/B005FYNSZA/ref=oh_aui_detailpage_o00_s00?ie=UTF8&psc=1)を使いました。600円で買ったので、試すにはいい気がする。
VMplayerみたいにウィンドウで表示しないから使いやすい。
実際にISOのファイル自体は3GBもなかった気がしますが、Ubuntu起動後ディスク領域を見たところ使える容量は6GBほどでした。
Chromeを入れた時点で、空き容量は4GBほどだったため、16GBのUSBメモリを使っても実際に使っていくことは厳しそう。
次回は128GBでやってみるかも、、、
いろいろ使ってみて、不便なところがなかったらWindows消したらいいし、買うか悩んでいるMacBookPro(20万円)の購入費用分のお金が浮く。

**※感想は初心者の感想なので、間違いがあるかもしれません。**

##もう1回ブートしてわかったこと(2018/12/01更新)

あくまでブート用である。
パーティションをうまいこと分割していれば、保存領域も確保できる。
そのため、何も分けていないと設定が保存されないので、起動毎に初期状態になる。
LIVE USBというものがあるらしい。
それは、USB自体にOSをインストールするものらしい。
今回書いたbootableUSBとは異なる。
結局はもう1つインストールするためにUSBが必要。
いろいろわからん、、、


##参考になるサイト

- 実際に参考にしたサイト
https://itsfoss.com/create-live-usb-of-ubuntu-in-windows/?fsmoe=false
- Ubuntu公式
https://tutorials.ubuntu.com/tutorial/tutorial-create-a-usb-stick-on-windows
Javascriptでグローバル変数への値の代入を検知する


GetterとSetterを使う。JavascriptのバージョンはES2015。

#  windowオブジェクトにプロパティを追加
例として、xというグローバル変数の値を監視する。プロパティの追加はObject.definePropertyを使う。

```javascript
Object.defineProperty(window,'x', {
    configurable: false,
    val: undefined,
    get: function () { return this.val; },
    set: function (x) {
        this.val = x;
        console.log( x+' was assigned to x');
    },
});
```
getterを定義し忘れると、値を参照できなくなるので注意。
代入時に任意の処理を行いたいときは、console.log( x+' was assigned to x');　部分を書き換える。
#  処理
```javascript
x = 1;
x = 2;
```

#  結果
```javascript
1 was assigned to x
2 was assigned to x
```
pythonで写真からメモを作る

# 主旨
pythonで画像を編集する例はいくつかあるのでそれを活用して、写真の画像を別の白紙の画像に
コピーし直す方法を記録しておく。EXIFや撮影時のメモをこれを使って余白に書き込むと
写真の一覧性が上がる事を期待。

# 環境
・python 3.5.1
・mac os Mojave 10.14 (Sieraでも動くと思います)
・iPhone 4s/7

# コードサンプル
```imagecopy.py
  from PIL import Image, ImageDraw, ImageFilter, ExifTags, ImageFont
  略
  im1 = Image.open(dir + file) #original image
  im2 = Image.new("RGB", (int(im1.width*1.5), int(im1.height*2)), (250, 250, 250)) # new image
  back_im = im2.copy()
```

# 説明
説明する程でもないけど、im1で既存の写真ファイルのパスを開く
im2では既存の写真のサイズの何倍かのサイズを指定して新しくイメージを作成する。
この例では、元の写真の幅が１.５倍、高さが2倍。
back_imにそのイメージデータをコピーする

そのあとはback_imの余白部分にテキストデータを書き込んだり、
別の画像を貼り付けたりす流ようにすれば、写真に対して自動でメモを追加したファイルが作成できる。

![IMG_1394.JPG_paste.jpg](https://qiita-image-store.s3.amazonaws.com/0/54785/6d8c911e-c4d0-38b5-a289-b85efa9192c1.jpeg)

# 参考

[撮影した写真のデータを可視化する方法、または写真をメモとして使い倒す方法。by Python](https://note.mu/magicbike/n/naba337f36406)
Qrunchから記事をコピペしようとすると画像が表示されない

- Qrunchで書いていた記事をQiitaに転記しようと考えたんです。
- どっちもマークダウン記法なので編集画面をコピペすればいけると考えました。
- そしてやってみるとなぜが画像だけ表示されない問題が起きました。

- 具体的には以下です。

![スクリーンショット 2018-12-01 17.01.02.png](https://qiita-image-store.s3.amazonaws.com/0/17681/30685bb4-2bfc-7aeb-187c-82407b903313.png)

- というようにQrunchでは表示されているんですが、これをそのままQiitaにコピペすると

![スクリーンショット 2018-12-01 17.02.38.png](https://qiita-image-store.s3.amazonaws.com/0/17681/5224d755-f7d1-abb7-38e8-716499fb4d19.png)

- というような感じで昔のガラケーのリンク切れみたいなやつになってしまうんです。
- もしや外部からアクセス不可なのかと思ってブラウザに直接urlを入力してみました。

![スクリーンショット 2018-12-01 17.04.40.png](https://qiita-image-store.s3.amazonaws.com/0/17681/52203781-3c6e-43fa-8065-8916fb98af7d.png)

- 普通に表示されました。
- じゃあ逆にQiitaが外部サイトの画像を表示することを制限しているのか？
- と思ったので試してみました。

![スクリーンショット 2018-12-01 17.07.28.png](https://qiita-image-store.s3.amazonaws.com/0/17681/dac7a5cf-5b74-2038-03de-6f44a3d7cb3b.png)

- このようにamazonとかは普通に表示されるようです。
- httpsが問題でもなさそうです。
- jpgが問題でもなさそうです。

- なんでできないのか？どうやったら解決できるのかご存知の方いましたら教えていただければ幸いです。
[プロデル]圧縮解凍でパスに変数を使ったときのエラー解決策

#初めに
本記事は、投稿時点でのエラーに対する解決法でありすでに解決法がある場合があります。
また、自分自身での解決法のため必ず正しいとは限りません。
自己責任でお願いします。

また、修正されたという場合はコメントでお願いします。

#圧縮解凍での変数使用時のエラー 2018/12/01
##エラー内容
例
![image.png](https://qiita-image-store.s3.amazonaws.com/0/250596/e487b136-ae0b-b2a5-ae04-61b66d705c67.png)

メッセージ:プログラムが正しく解釈できません

```
変数1を変数2へ解凍する
```

または

```
[変数1]を[変数2]へ解凍する
```

※圧縮でも同様

##出現するタイミング

- その文が実行されるとき
- 実行ファイルに変換し実行した場合に起こります。

##解決法

**変数名を「」と[]で囲む**

修正前

```
変数1を変数2へ解凍する
```

修正後

```
「[変数1]」を「[変数2]」へ解凍する
```
忘れる人のためのRaspberry Pi セットアップ

## はじめに

普段はそんなにRaspberry Piを触っていないんだけど、たまに思い出したように使いたくなる人向けのメモです。（ほぼ自分用。最近触ってなかったら歳のせいかすぐ手順を忘れちゃう...）

## 準備するモノ

あたふたしないためのチェックリスト。まずは以下をかき集める。

* Raspberry Pi 本体 (2なので、USB接続のWiFiモジュールも探す)
* microSD
* HDMIケーブル
* ディスプレイ
* キーボード
* マウス
* microUSBケーブル及びバッテリー(電源)

## 起動させるまでにしたいこと 

まずは[公式サイト](https://www.raspberrypi.org/downloads/raspbian/)からRaspbianのOSイメージをダウンロードして、用意したmicroSDにカードに書き込むところから。以下、macの方向け情報。
[SDFormatter](https://www.sdcard.org/jp/downloads/formatter_4/eula_mac/index.html)を起動して、SDカードをフォーマットし、アンマウント。その後、ターミナルを起動し、ddコマンドを使ってカードに流し込めばOK。

```
$ sudo dd bs=1m if=2018-11-13-raspbian-stretch.img of=/dev/rdisk2
3248+0 records in
3248+0 records out
3405774848 bytes transferred in 127.143326 secs (26786894 bytes/sec)
```

### ディスプレイ設定

所有するラズパイ用ディスプレイ　[ELECROW 5インチ HDMI液晶モニター](https://www.amazon.co.jp/gp/product/B07FDN3M8H/ref=as_li_tl?ie=UTF8&tag=riceproject0c-22&camp=247&creative=1211&linkCode=as2&creativeASIN=B07FDN3M8H&linkId=da550b5aa42deb8569872f1ea93e5bc1) の環境設定を行う。

![スクリーンショット 2018-12-01 15.05.51.png](https://qiita-image-store.s3.amazonaws.com/0/55900/77f6ffc7-0938-34d4-62f0-73c5570d71d7.png)

以下の内容を config.txtに追記する。

```
# for Elecrow 5 Inch HDMI Display-B
max_usb_current=1
hdmi_force_hotplug=1
config_hdmi_boost=7
hdmi_group=2
hdmi_mode=1
hdmi_mode=87
hdmi_drive=1
hdmi_cvt 800 480 60 6 0 0 0
```
このディスプレイとラズパイの接続は以下の通り。

* HDMIケーブルをディスプレイとラズパイに接続
* USBケーブルをディスプレイ（HDMI端子の下のmicroUSB端子）とラズパイのUSB端子に接続

ちゃんとやらないとタッチパネル機能が使えないので、忘れずに！！

### その他

WiFiモジュールとキーボードは接続しておく。これでラズパイを起動するための準備完了。
ちなみに使っているWiFiモジュールは[TP-Link TL-WN725N](https://www.amazon.co.jp/gp/product/B008IFXQFU/ref=as_li_tl?ie=UTF8&tag=riceproject0c-22&camp=247&creative=1211&linkCode=as2&creativeASIN=B008IFXQFU&linkId=6e2a26851c442ded34eed3935b927a50)で、これはドライバー不要で認識してくれるので重宝してる。

## 起動後

「Welcome to RaspberryPi」のメッセージが表示されたウィザード画面に従い、以下を設定していく。

* 国、言語、タイムゾーンの選択
* piユーザーのパスワードの変更
* WiFiネットワークの設定　（ラズパイ２の場合、USBにWiFiモジュール挿しておけば認識してくれる）
* ソフトウェアの更新

## 起動後にすること

諸々の設定をするために、設定画面を起動.


```
 $ sudo raspi-config
```

利用するインタフェースによって、ここで有効化する必要がある（よく忘れるので気をつける）。
ちなみに初回ウィザードで設定した内容はここで全部変更できる。

### sshの設定

作業はリモートでしたいよね。でも最近のバージョンはデフォルトSSH接続オフになっているので有効化しないといけない。
「5 Interfacing Options」→「P2 SSH」→「Yes」で有効化する。
なお別の方法として、/bootディレクトリの下にsshというファイルを作って再起動すれば、接続できるようになる。

### pythonのデフォルトを３系にする

下記のサイトを参考に変更する。

* [How to change from default to alternative Python version on Debian Linux](https://linuxconfig.org/how-to-change-from-default-to-alternative-python-version-on-debian-linux)

## 参考

以下、参考にした先人達の教え。

- [Raspberry PiにRaspbianをインストールする for Mac OSX - Qiita](https://qiita.com/ttyokoyama/items/7afe6404fd8d3e910d09)
- [Raspberry Pi セットアップ(書き込み～SSH設定まで) - Qiita](https://qiita.com/Halhira/items/1da2ae543217be26988a)