OmniAICreator/Qiita-1.07M huggingface dataset:
rubyとpythonの基本的なやつ対応表メモ

pythonのこれってrubyの何にあたるの？ということをざっくり書いていきます。あくまでメモです。
rubyをちょっと(1ヶ月程度)学んだ人がprogateのpythonをやって学んだことが基本です。

## 配列、ハッシュ

|ruby|python|
|:-----------:|:------------:|
|配列|リスト|
|ハッシュ|辞書|
名前が違うだけで、記述方法は一緒。


## each文
ruby

```ruby
オブジェクト.each do |変数|
  実行する処理1
  実行する処理2
end
```

python

```python

for 変数　in オブジェクト:
    実行する処理1
    実行する処理2
```
「:」忘れがち
半角4つ分**インデント**が重要。**これがないとfor文の中身だと認識されない。**
hamlみたいに、**pythonはインデントの有無が意味を持ちます。**

## if文
ruby

```ruby

if 条件式1 then
  条件式1が真の時に実行する処理
elsif 条件式2 then
  条件式1が偽で条件式2が真の時に実行する処理
elsif 条件式3 then
  条件式1及び条件式2が偽で条件式3が真の時に実行する処理
else
  全ての条件式が偽の時に実行する処理
end
```
python

```python

if 条件式1:
    条件式1が真の時に実行する処理
elif 条件式2:
    条件式2が真の時に実行する処理
elif 条件式3:
    条件式3が真の時に実行する処理
else:
    全ての条件式が偽の時に実行する処理
```
elseifじゃなくてelsifじゃなくてelif
正直覚えにくい
## while文
ruby

```ruby

while 条件式 do
  実行する処理1
  実行する処理2
end
```
python

```python

while 条件式:
    実行する処理1
    実行する処理2
```
`continue`と`break`が使える。

## 関数
ruby

```ruby
#定義
def 関数名(引数1、引数2、…)
  処理1
  処理2
end

#実行
関数名(引数)
```
python

```python
#定義
def 関数名(引数1、引数2、…):
    処理1
    処理2

#実行
関数名(引数)
```

## モジュールの呼び出し
ruby

```ruby
#ファイルを読み込む
require 'ファイルのURI' 
```
python

```python
#sample.pyを読み込む
import sample

#sample.pyのクラスを読み込む
from sample import クラス名
```
`モジュール名.関数()`と書くことで、モジュール内の関数を実行可能

## クラス
ruby

```ruby
#クラスの継承
class 子クラス < 親クラス
end

#Sampleというクラスを定義
def クラス名
  def メソッド名
    処理
  end
end

#インスタンスの作成
sample_instance = Sample.new

#初期値の設定
def initialize(引数)
  処理
end
```

python

```python
#クラスの継承
class 新しいクラス名(元となるクラス名):

#Sampleというクラスを定義
class Sample:
    処理

#インスタンスの作成
sample_instance = Sample()

#初期値の設定
def initialize(self,引数):
    処理
```
クラス名を大文字から始めるのは変わらない

## メソッド
ruby

```ruby
#定義
def メソッド名
  処理
end

#呼び出し
メソッド名
```

python

```python
#定義
def メソッド名(self,引数):
    処理

#呼び出し
インスタンス.メソッド名(引数)
```
**第1引数には必ず`self`を使用。**selfには、インスタンス自身が代入されている。**呼び出す際の引数は、selfは記載しない。**
【Jupyter Notebook】OpenCVのインポートエラー解決メモ

# 概要
- Jupyter Notebook(Python3.7)でOpenCVをインポートしたらエラーが発生した際の解決メモ

# 環境
- Windows7(32bit)
- Jupyter Notebook5.6
- Python 3.7.0

# 行ったこと
- 久しぶりにJupyter Notebookで実験しようと以下のコードを書いて実行したら、エラーが発生した。

```python
import numpy as np
import cv2

img = cv2.imread("C:\\Penguins.jpg", cv2.IMREAD_GRAYSCALE)
cv2.imshow("テストタイトル",img)

---------------------------------------------------------------------------
ModuleNotFoundError                       Traceback (most recent call last)
<ipython-input-6-89f615e5c653> in <module>()
      1 import numpy as np
----> 2 import cv2
      3 
      4 img = cv2.imread("C:\\Penguins.jpg", cv2.IMREAD_GRAYSCALE)
      5 cv2.imshow("テストタイトル",img)

ModuleNotFoundError: No module named 'cv2'

```

- 以前はこんなエラー出ていたっけ。Python2.7の環境で実験していたっけ？
- 今回、Python3の環境で実行していたんですが、気を取り直して、解決を試みる。
- ModuleNotFoundError と出ているから、環境設定系を見直してみます。
- Anaconda Navigatorを起動し、Environmentsの画面を開く。Python2.7環境にはOpenCVをインストールしてありましたが、Python3.7環境にはインストールしていないようです。

Python2.7
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235774/6bb65a75-9631-9495-f98e-2fcc049f9d74.png)

Python3.7
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235774/6adfefc7-a95f-6969-d5a3-ecd096e35386.png)

- ということで、Python3.7の環境にOpenCVをインストールしてみます。
- ターミナルを開いて
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235774/b2f662d2-8b47-2c19-3cfe-547386692453.png)

- インストールコマンド

```python
pip install opencv-python
```

- インストールが始まるのに、15秒近くかかり、どきっとしましたが無事にインストールが終了しました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/235774/44ab8b61-05ae-33d2-1377-aa4a3680ee5e.png)

- Jupyter Notebookにてコードを再実行。無事にOpenCVのインポートが行えました。

# [余談] OpenCVをバージョン指定してインストールするには
- 2019/2/24時点だとバージョン4がインストールされます。3系を指定してインストールする場合は、「パッケージ名==バージョン」指定するようです。バージョン4をアンインストール後、以下コマンドを実行しましたが、エラー発生

```
pip uninstall opencv-python
pip install opencv-python==3.4.5
Collecting opencv-python==3.4.5
  Could not find a version that satisfies the requirement opencv-python==3.4.5 (from versions: 3.4.2
.16, 3.4.2.17, 3.4.3.18, 3.4.4.19, 3.4.5.20, 4.0.0.21)
No matching distribution found for opencv-python==3.4.5
You are using pip version 10.0.1, however version 19.0.3 is available.
You should consider upgrading via the 'python -m pip install --upgrade pip' command.
```

- 以下の様にマイナーバージョンまで指定しなくてはいけないんですね。

```
pip install opencv-python==3.4.5.20
```

- こちらも成功しました。


#2019/02/27 追記

http://onoz000.hatenablog.com/entry/2018/02/11/142347

上記記事より

> Anaconda下でpipを使うと予期せず環境が破壊され、最悪の場合Anaconda自体の再インストールが必要になる。pipは慎重に使いましょう。
mobx-reactのinjectを使っているコンポーネントをrefで参照する方法

最初にrefをおさらいする。例えば次のような感じに実装しているとしよう。

```jsx
class FooComponent extends React.Component<{}, {}> {
  bar: React.createRef<BarComponent>;
  constructor(props: any) {
    super(props)
    this.bar = React.createRef<BarComponent>();
  }
  render() {
    return <BarComponent ref={this.bar} />
  }
}
```

mobx-reactのinjectデコレータを使っていないコンポーネントに対してこのようにrefでインスタンスを取得した場合はReact.RefObject\<T\>でラップされたインスタンスが得られるので`this.bar.current`のようにしてコンポーネントにアクセスすることができる。

ところがBarComponentがinjectデコレータを使っているコンポーネントの場合、`this.bar.current`にはmobx-reactで生成されたInjectorという名のオブジェクトが注入される。InjectorはwrappedInstanceというメンバーで参照したいコンポーネントのインスタンスをもっているため、この場合は`this.bar.current.wrappedInstance`というようにアクセスすればよい。

と、ここまでは特に難しいことではないのだがTypescriptの場合に困った問題が生じる。上の実装例のまま実際にコンポーネントを参照するロジックを実装しようとするとcurrentにwrappedInstanceなんていうメンバーはないと怒られてしまう。

それならば、InjectorはIWrappedComponent&lt;T&gt;というインターフェイスのオブジェクトなので次のように宣言を変更すると...

```jsx
class FooComponent extends React.Component<{}, {}> {
  bar: React.createRef<IWrappedComponent<BarComponent>>;
  constructor(props: any) {
    super(props)
    this.bar = React.createRef<IWrappedComponent<BarComponent>>();
  }
  render() {
    return <BarComponent ref={this.bar} />
  }
}
```

今度はrender内のrefの箇所でBarComponentを割り当てられないよと怒られる。（実際はLegacyRef\<BarComponent\>をIWrappedComponent\<BarComponent\>に割り当てられないというメッセージが出る。）

mobx-reactのinjectデコレータを使うと宣言と異なるクラスのインスタンスが注入されるため、真面目に宣言しようとするとこのようになる。Typescriptのメリットが失われてしまうのは残念だが、injectデコレータを使っているコンポーネントをrefで参照したい場合はanyで宣言する。

```jsx
class FooComponent extends React.Component<{}, {}> {
  bar: React.createRef<any>;
  constructor(props: any) {
    super(props)
    this.bar = React.createRef<any>();
  }
  render() {
    return <BarComponent ref={this.bar} />
  }
}
```
Sonoff Basic に Tasmota を書き込む

※超初心者が書いた自分への備忘録です。
# オリジナル・ファームウェアをバックアップして Tasmota を書き込む。
### [esp-idf](https://docs.espressif.com/projects/esp-idf/en/latest/get-started/windows-setup.html) が msys32 に[インストール](https://gourmet-technology-crypto.jp/%E6%8A%80%E8%A1%93/esp32%E3%81%AE%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83esp-idf%E3%82%92windows%E3%81%AB%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B/)されている前提で、 [読み書き参考１](https://github.com/arendst/Sonoff-Tasmota/wiki/Esptool)、[読み書き参考２](https://blog.hobbytronics.pk/sonoff-original-firmware-backup-restore/) 、[接続参考](https://randomnerdtutorials.com/how-to-flash-a-custom-firmware-to-sonoff/) を参考に進める。
- PC(WIndows) --> USB FTDI 232 --> Sonof Basic と接続する。
- PC のデバイスマネージャーでポートを確認する。
- msys32 でファームウェアを**バックアップ**  
**※ Sonoff のボタンを押しながらFTDIのUSBをPCに挿し、2秒後にボタンを離す。  
SonoffのLEDは消えてFLASHモード（読み書きモード）になる。**

```bash
# 1M フラッシュなら、 Sonoff Basic は 1M
$ esptool.py --port COM3 read_flash 0x00000 0x100000 image1M.bin
# 4M フラッシュなら
$ esptool.py --port COM3 read_flash 0x00000 0x400000 image4M.bin

esptool.py v2.5.1
Serial port COM3
Connecting....
Detecting chip type... ESP8266
Chip is ESP8285
Features: WiFi, Embedded Flash
MAC: dc:4f:22:8f:4b:82
Uploading stub...
Running stub...
Stub running...
1048576 (100 %)
1048576 (100 %)
Read 1048576 bytes at 0x0 in 97.4 seconds (86.2 kbit/s)...
Hard resetting via RTS pin...
```
- ファームウェアを**消去**

```bash
$ esptool.py --port COM3 erase_flash
esptool.py v2.5.1
Serial port COM3
Connecting....
Detecting chip type... ESP8266
Chip is ESP8285
Features: WiFi, Embedded Flash
MAC: dc:4f:22:8f:4b:82
Uploading stub...
Running stub...
Stub running...
Erasing flash (this may take a while)...
Chip erase completed successfully in 3.9s
Hard resetting via RTS pin...
```
- ファームウェアを**書込**  
※ [**Arduino IDE で書込**](https://qiita.com/beginnnnner/items/0b7017dd719e3579edc9) を参照。

```bash
$ esptool.py --port COM5 write_flash -fs 1MB -fm dout 0x0 sonoff.bin
```
**消去＆書込み**、よく使うのでひとまとめ

```bash
$ PORT=COM5 && esptool.py --port ${PORT} erase_flash && esptool.py --port ${PORT} write_flash -fs 1MB -fm dout 0x0 firmware.bin
```

- 書込みケーブルを外し電源へ接続後に Tasmota の初期設定へ
<br>
<br>

![IMG-0669.JPG](https://qiita-image-store.s3.amazonaws.com/0/366837/b3be21a4-dc39-ec20-c52e-23f4c82434fc.jpeg)
サンハヤト スルホール用テストワイヤ TTW-200 がとても便利だった。
OpenStreetMap から牛丼店の情報を取得し、Android に表示する

[Overpass API を使って OpenStreetMap から牛丼店の情報を取得し、Google マイマップに表示する](https://qiita.com/ohwada/items/806deb12ea8154c9e35c)
の続きです。

OpenStreetMap から牛丼店の情報を取得するまでは、
上記の記事を参考に。

## Android に表示する

全ての店舗を表示するのではなく、
近くの店舗を表示するようにします。

###  Json を解析する

Gson を使います。

[Gson : Java serialization/deserialization for JSON](https://github.com/google/gson)

Json の記述構造に対応した Java クラスを用意する。

```OsmJson.java
public class OsmJson {

  public String version;
  public String  generator;
  public Osm3s  osm3s;
  public List<Element> elements;
```
```Osm3s.java
public class Osm3s {

  public String timestamp_osm_base;
  public String  copyright;
```
```Element.java
public class Element {

  public String type;
  public long  id;
  public double  lat;
  public double  lon;
  public Tags tags;
```

```Tags.java
public class Tags {

public String name;
public String branch;
public String opening_hours; 

// コロンが入っているキー名は、変数名として使えない
@SerializedName("addr:full")
public String addr_full;

public String getInfo() {
    StringBuilder builder = new StringBuilder();

    if(branch != null) {
          builder.append(branch);
         builder.append(LF);
    }
    if(opening_hours != null) {
           builder.append("営業時間: ");
          builder.append(opening_hours);
         builder.append(LF);
    }
// その他のタグ
    return builder.toString();
}
```
OSMのタグは多いので、どこまで対応するか悩ましい。
下記を参考にする。

 [OpenStreetMatsuya](https://wiki.openstreetmap.org/wiki/User:Okano_t/OpenStreetMatsuya)

プログラムの記述はこれだけ。

```
    Gson gson = new Gson();
    OsmJson osm = gson.fromJson( text, OsmJson.class);
```

###  SQLite に格納する

名称(name)、緯度(lat)、経度(lon)、情報(info) をカラムに持つ DB を作成する。


```
List<Element> elements = osm.getElements();
for (Element ele: elements) {
        NodeRecord r = new NodeRecord( ele.getName(), ele.getLat(), ele.getLon(), ele.getInfo() );
        mHelper.insert( r );
    }
```

###  近くの牛丼店を検索する

現在地を東西南北の枠で囲み、その中にある店舗を検索する
下記のような条件句を使う。

```
    String where =  " ( " + "lat" + " > " +  北側  ;
    where +=  " AND " + "lat" + " < " + 南側  ;
    where +=  " AND " + "lon" + " > " +  西側  ;
    where +=  " AND " + "lon" + " < " +  東側 + " ) "  ;
```

緯度方向の地球の円周は、約4万kmなので、
1mあたりの緯度の度数は、360度 / 4万km

東京付近(緯度35度)における経度方向の地球の円周は、約3.3万kmなので、
1mあたりの経度の度数は、360度 / 3.3万km

###  マ−カーで表示する

下記を参考に

[osmdroid を使って Android の OpenStreetMap 地図に マーカーを表示する](https://qiita.com/ohwada/items/a85fadbd186abac9dff7)

###  スクリーンショット

横浜市役所から5Km範囲
![osm1_map.png](https://qiita-image-store.s3.amazonaws.com/0/64075/657d3a71-c6a1-afc9-860c-2d9a2d3b8565.png)

![osm1_info.png](https://qiita-image-store.s3.amazonaws.com/0/64075/940083b9-c430-b03c-2254-bfeb61a062a3.png)

github にソースを公開した

https://github.com/ohwada/Android_Samples/tree/master/Osm1

OpenStreetMap から取得し牛丼店のJson ファイルを同封してます。
Neovimをインストールして、ちょこっとpythonを書いてみる

# 概要

* Mac OS X 10.13.6にNeovimをインストールして、pythonを書くために多少のカスタマイズを行った。

# 動機

* 基本的に普段の開発はVSCodeで行っていて、機能的に十分満足している。
* dockerコンテナ上やリモートマシン上で開発する時に、console上で直接エディタが使えるようになっておくと便利かなと思ってNeovimの使い方を覚えることにした。

# インストール

公式( https://neovim.io/ )に書いてある通り、brewでインストールする。
yumやapt-getによるインストールも可能なようだし、インストールは手軽そうだ。

```bash
$ brew install neovim
```

あっさりインストール出来た。

# 起動

```bash
$ nvim
```

v0.3.4というバージョンがインストールされた。

<img width="1013" alt="スクリーンショット 2019-02-24 9.44.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/240919/c1b7f118-c4c9-5b31-6b87-f7a36e8e66c6.png">

# カスタマイズ

* vimやneovimには詳しく無いが、おそらく素のままのneovimはVSCodeなどのIDEと比べてそれほど機能は多くないのだろう。
* そこで様々なカスタマイズを行って機能を追加して使うというのが前提になっているのがvimやneovimの使い方のスタイルなんだろうと思う。

というわけで色々カスタマイズしていく。

## 何もカスタマイズしない場合の状態

そもそもどんなカスタマイズをしたいかイメージを膨らませるために一旦、素でサンプルコードを書いてみた。
内容はこんな感じ。

```python
import pandas

def read_iris():
    url = 'https://raw.githubusercontent.com/mwaskom/seaborn-data/master/iris.csv'
    return pandas.read_csv(url)

iris = read_iris()
print(iris)
```

欲しくなった機能

* nvimからbashに切り替えずにこのコードを実行したい。
* lintによるサポートが欲しい。

まず、これらのカスタマイズをやってみる。

こちらの記事がかなり参考になる。
https://qiita.com/lighttiger2505/items/e0ada17634516c081ee7

## dein.vim

プラグインマネージャー: neovimを拡張する様々なpuluginを管理してくれる。

https://github.com/Shougo/dein.vim

ドキュメント通りにインストールしたら動いた。大まかな手順としては以下のようになる。

* `installer.sh`をDownloadして実行
* `~/.config/nvim/init.vim`というファイルを作り、設定を追加。

## ALE

linter.

https://github.com/w0rp/ale

先程の`init.vim`の中にALEをaddする。

```vimscript
call dein#add('w0rp/ale')
```

最低で以下の設定を追加したらlint出来た。

```vimscript
" ALE
let g:ale_linters = {
\   'python': ['flake8'],
\}
```

とりあえずlintしてくれた。

<img width="1013" alt="スクリーンショット 2019-02-24 10.40.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/240919/b2a2878a-862d-8473-4019-7534a3ce0964.png">

## vim-quickrun

* プログラムランナー
* https://github.com/thinca/vim-quickrun

`\ + r`で実行できる。

<img width="950" alt="スクリーンショット 2019-02-24 10.47.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/240919/4c571d02-5249-4e08-b624-ab3d9da230ad.png">

私の場合、横に長い出力をするコードを書くことが多いので、この結果が出力されるエリアは上下分割の方が嬉しい。

こんな設定を加えたら出来た。

```vimscript
" quickrun
let g:quickrun_config = {
\   '_' : {                               
\       'outputter/buffer/split': '10' 
\   }
\}
```

<img width="950" alt="スクリーンショット 2019-02-24 10.54.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/240919/15578771-5ee6-0b70-053f-2fa54663b486.png">
dep initとdep ensureまでの道のり

goの勉強の記録です。
dep ensureまでが結構めんどいので備忘録として、、


# dep init

適当なディレクトリでdep initをするとエラー

```
init failed: unable to detect the containing GOPATH: /Users/ac69/practice/go-scraping is not within a known GOPATH/src
```

GOPATHを設定するため、direnvを使う。
direnvを使うとディレクトリごとにGO_PATHを切り替えることができるようになる。[参考](https://qiita.com/kompiro/items/5fc46089247a56243a62)

```
direnv edit .
```

.envrcに以下を記入

```
export GOPATH=$(pwd)
```

こういうエラーがでたら

```
direnv: error .envrc is blocked. Run `direnv allow` to approve its content.
```

これを打つ。これでGO_PATHが現在のpwdを指すようになる。

```
direnv allow
```

再度dep initをするとまだエラーが出る

```
init failed: unable to determine the import path for the root project /Users/ac69/practice/go-scraping: /Users/ac69/practice/go-scraping is not within any GOPATH/src
```

GOPATH/srcのパスが特定できないって言っているのでsrcディレクトリを作って、そこに移動してdep initを再度やってみる

```
mkdir src
cd src
dep init
```

まだエラーが出る

```
init failed: unable to determine the import path for the root project /Users/ac69/practice/go-scraping/src: dep does not currently support using GOPATH/src as the project root
```

depはGOPATH/src配下にさらにプロジェクトのフォルダをつくらないとだめらしい
なので、適当なフォルダを作成し、そこでdep initする

```
mkdir go-scraping
cd go-scraping
dep init
```

今度はちゃんとdep initができた。

ただ、GO_PATH/src配下にプロジェクトのルートのディレクトリを用意したことでこんな感じのディレクトリ構成になってちょっと気持ち悪い。depとdirenvを使う場合こういう感じになるのはしょうがないのだろうか、、、

```
go-scraping // 名前がかぶる(ここがGO_PATH)
├── pkg
│   └── dep
│       └── sources
└── src
    └── go-scraping // 名前がかぶる
        ├── Gopkg.lock
        ├── Gopkg.toml
        └── vendor
```

# dep ensure

次はパッケージ(goquery)のインストール。

dep ensureでパッケージをインストールするとエラー。dep ensureの場合、Gopkg.toml Gopkg.lock以外にソースコードの依存関係も解決するらしく、goのコードを先に書いておかないとだめだった。

```
$ dep ensure -add github.com/PuerkitoBio/goquery
no dirs contained any Go code
```

ちなみにdep ensureは-vendor-onlyのオプションをつけるとソースコードの依存関係はみずに、Gopkg.lockの依存のみを解決するらしい。

```
dep ensure -vendor-only
```

goqueryを利用するgoのコードを書いて、再度dep ensureを実行するとエラーなくインストールできた。

まだインストールしていないpkgを利用するコードを書いてからインストールを実行する、というのがなんだかしっくりこないがこういうものなのだろうか、、


# dep ensure -add
goのfirebaseSDKをソースコード上ではまだ利用していないけど、パッケージのインストールだけ先にやっとこうと思って、

```
$ dep ensure -add firebase.google.com/go
Fetching sources...

"firebase.google.com/go" is not imported by your project, and has been temporarily added to Gopkg.lock and vendor/.
If you run "dep ensure" again before actually importing it, it will disappear from Gopkg.lock and vendor/.
$ 
```

実行してみたら上記のような文章が出てきた。

まだコード上は利用してないようだから、一時的にGopkg.lockとvendorに追加しといたよ。再度dep ensureしたら消すからね。

というような感じ？

コード上でfirebase.google.com/goをimportして、再度dep ensureしたら上記の文言は出なくなった。
【Redux】redux-loggerを本番環境では利用しない方法(メモ)


redux-loggerを本番環境では利用しない方法のメモ書きです。

**環境変数NODE_ENVでredux-loggerを使用するかどうか決めています**。

```js:store.js
import { combineReducers, createStore, applyMiddleware } from 'redux'
import test from './reducers/testReducer'

const middlewares = []

if(process.env.NODE_ENV !== 'production') {
  const { logger } = require('redux-logger')
  middlewares.push(logger)
}

const reducers = combineReducers({
  test,
})

const configureStore = initialState => {
  const store = createStore(reducers, initialState, applyMiddleware(...middlewares))
  return store
}

export default configureStore

```
AnacondaでGUIだけで仮想環境を構築

# 概要

WindowsにAnacondaをインストールして、**Anaconda Navigator**からGUIだけで**仮想環境**を構築する手順についてまとめました。

# 準備

Anacondaの[公式HP](https://www.anaconda.com/distribution/)からAnacondaインストーラをダウンロードしてきます。2019/02/24 時点の最新版は **Anaconda 2018.12(Python3.7)** というバージョンでした。

# デフォルト環境の確認

スタートメニューから **Anaconda Navigator** を起動します。

左側のタブから **Environments**（環境）を選択します。

Anacondaのインストール直後は、環境として **root(base) のみ**が存在していることが確認できます。右側上部のドロップダウンリストから **installed** を選択して、インストールされている**パッケージ名称**や**バージョン**を確認することができます（例えば、環境 **root(base)** には **numpy** や **matplotlib** などがインストールされていることが確認できます）。

![noname.png](https://qiita-image-store.s3.amazonaws.com/0/152805/0fe0dc0b-9f4e-ad99-2c91-99c0da571f06.png)

この環境のPythonを開いてみたいと思います。環境リストの **root(base)** の横の三角マークをクリックして **Open with Python** を選択します。

![noname.png](https://qiita-image-store.s3.amazonaws.com/0/152805/26c4266e-27f1-acf2-0312-abd5a12be7a2.png)

対話モードのPythonが起動します。

```
Python 3.7.1 (default, Dec 10 2018, 22:54:23) [MSC v.1915 64 bit (AMD64)] :: Anaconda, Inc. on win32
Type "help", "copyright", "credits" or "license" for more information.
>>>
```

Pythonのバージョンが **3.7.1** となっていることが確認できます。また、次のように numpy や matplotlib が問題なくインポートできる状態となっています。

```
>>> import numpy
>>> import matplotlib
```

# Python3.6 環境の構築

**root(base)**には手を加えずそのまま維持して、新しくPython3.6の環境を構築していきたいと思います。
 
環境リストの下部にある **+ Create** ボタンをクリックして、Nameを「python36」、Pythonバージョンを「3.6」として新しい環境を作成します。Name（名前）はそのままパス名に反映されるので、日本語やスペースなどの文字を使うことは避けたほうが良いと思います。

![noname.png](https://qiita-image-store.s3.amazonaws.com/0/152805/79e59ee7-8bf2-08d2-753a-d19d054e8f38.png)

作成した **python36** 環境で先ほどと同様に三角マークをクリックして **Open with Python** を選択します。次のようにバージョンが **3.6.8** のPython環境が構築されていることが分かります。

```
Python 3.6.8 |Anaconda, Inc.| (default, Feb 21 2019, 18:30:04) [MSC v.1916 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>>
```

しかし、新規に作成した環境では**最低限のパッケージしかインストールされていない**ので、次のように numpy などをインポートすると失敗します。

```
>>> import numpy
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ModuleNotFoundError: No module named 'numpy'
```

# 新環境にパッケージをインストール

Anaconda Navigator で新しく作成した **python36** 環境が選択された状態にしておきます。

リストを **installed** から **all** に切り替えて、**Update index** をクリックして最新のパッケージ一覧を取得します。
![noname.png](https://qiita-image-store.s3.amazonaws.com/0/152805/84a4a815-a2db-8ffc-17bb-234204b3e644.png)

パッケージ一覧が更新されたら、導入したいパッケージを検索して、チェックを入れて **Apply** ボタンをクリックします。依存関係のチェックがあり、次のような確認ダイアログが表示されます。Applyをクリックするとパッケージのインストールが行なわれまます。

下記は、**numpy** を選択したときの例です。
![noname.png](https://qiita-image-store.s3.amazonaws.com/0/152805/0d73062a-21fd-5ad6-9fb1-79d7c2a74f24.png)

再び、**Open with Python** で、対話モードのPythonを起動し、対象のパッケージのインポートができることを確認します。

```
Python 3.6.8 |Anaconda, Inc.| (default, Feb 21 2019, 18:30:04) [MSC v.1916 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> import numpy
>>>
```
Lightning Web Components 覚え書き

[Lightning Web Components（開発環境）](https://qiita.com/TaigarAndDragon/items/3dce89794f1eaf44d26a)
[Lightning Web Components（HTML）](https://qiita.com/TaigarAndDragon/items/1cdf40f3fe14bb479739)
[Lightning Web Components（イベント）](https://qiita.com/TaigarAndDragon/items/ba01dffa21e143262190)
[Lightning Web Components（JS）](https://qiita.com/TaigarAndDragon/items/4cfad94968b01feea0ed)
[Lightning Web Components（メタデータ）](https://qiita.com/TaigarAndDragon/items/242bff3e60fa854fc6e6)
[Lightning Web Components（標準Lightingコンポーネント）](https://qiita.com/TaigarAndDragon/items/513d033ddeaf781159e8)
[Lightning Web Components（Jest）](https://qiita.com/TaigarAndDragon/items/1a2897a96bf585144908)
JQeueryのメソッド を使ってセレクタを指定する

## この記事について

Jqueryのセレクタについて書いていきました。

[Jqueryのフィルタを使ってセレクタを指定する](https://qiita.com/hirokobe26/items/0549a76104baea34e22c)
[JQueryのセレクタ指定の方法](https://qiita.com/hirokobe26/items/632608e99afe7947214b)

今回はJqueryで用意されている関数を使ってDOM要素を指定していきます。

以下の関数を用います。

```
parent()
→セレクタで指定したDOM要素の親要素全てを指定
children()
→セレクタで指定したDOM要素の子要素を全て指定
next()
→セレクタで指定したDOM要素の次の要素を指定
prev()
→セレクタで指定したDOM要素の前の要素を指定
siblings()
→セレクタで指定したDOM要素の兄弟要素を全て指定
```
## サンプルコード
いくつかサンプルコードを記載します。

```html:sample.htm
    <ul id="main">
        <li>0</li>
        <li class="hoge">1</li>
        <li class="hoge">2</li>
        <li>
            3
            <ul id="sub">
                <li>3-0</li>　/０番目の要素
                <li>3-1</li> /１番目の要素
                <li class="hoge">3-2</li> /２番目の要素
                <li class="hoge">3-3</li> /３番目の要素
                <li>3-4</li> /４番目の要素
            </ul>
        </li>
    </ul>
  <script>
    $(function(){
      $('#sub').parent().css('color', 'blue');
    });
  </script>
/3,3-0,3-1,3-2,3-3,3-4が青に変わる
```

```html:sample.htm
    <ul id="main">
        <li>0</li>
        <li class="hoge">1</li>
        <li class="hoge">2</li>
        <li>
            3
            <ul id="sub">
                <li>3-0</li>　/０番目の要素
                <li>3-1</li> /１番目の要素
                <li class="hoge">3-2</li> /２番目の要素
                <li class="hoge">3-3</li> /３番目の要素
                <li>3-4</li> /４番目の要素
            </ul>
        </li>
    </ul>
  <script>
    $(function(){
      $('#sub > li:eq(0)').next().css('color', 'blue');
    });
  </script>
/3-1が青に変わる
```

```html:sample.htm
    <ul id="main">
        <li>0</li>
        <li class="hoge">1</li>
        <li class="hoge">2</li>
        <li>
            3
            <ul id="sub">
                <li>3-0</li>　/０番目の要素
                <li>3-1</li> /１番目の要素
                <li class="hoge">3-2</li> /２番目の要素
                <li class="hoge">3-3</li> /３番目の要素
                <li>3-4</li> /４番目の要素
            </ul>
        </li>
    </ul>
  <script>
    $(function(){
      $('#sub > li:eq(2)').siblings().css('color', 'blue');
    });
  </script>
/3-0,3-1,3-3,3-4が青に変わる
```
linuxコマンド2/22

[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしている<@matsuotaiga>です。
よく使うLinuxコマンドです
指定したディレクトリ配下から特定の文字列を検索する

```
find '/xxx/yyy/' -type f -print | xargs grep 'moji1'
```

複数文字列の場合

```
find '/xxx/yyy/' -type f -print | xargs grep 'moji1¥|moji2'
```

¥|で繋ぐ。

特定のパスを除外する

```
find '/xxx/yyy/' -path '*/zzz' -prune -o -type f -print | xargs grep 'moji1'
```
複数の場合は-path 'target' -prune -oを繰り返し書く。

シンボリックリンクを探す

```
ll | grep ^l
```



:%s/BEFORE/AFTER/cg
%s：ファイル全体
g：行全体
c：処理確認
y：置換する
n：置換しない
a：ファイル内全て置換
q：置換中止
ファイルディスクリプタの上限値を確認

# ソフトリミット（変更可能だが、ハードリミット以上の値を設定することはできない）
$ulimit -Sn
1024

# ハードリミット
$ulimit -Hn
4096

# OS全体で開くことができるファイル数
$cat /proc/sys/fs/file-max
99848
オブジェクトの詰め替え、コピーに便利なAutoMapper、DeepCloner

## はじめに
だいたい似たようなメンバだけど、微妙に違うオブジェクトに中身を詰め替えたい！
という場合に便利なライブラリAutoMapperとオブジェクトをディープクローンしたい！という場合に使うDeepClonerのメモです。
世の中に解説記事が出回っているのでリンクだけ。

## AutoMapper

### 公式サイト／Github

https://automapper.org/
https://github.com/AutoMapper/AutoMapper

### nugetパッケージ

```PowerShell:nugetパッケージマネージャーコンソール
Install-Package AutoMapper
```

### 先人の知恵
https://blog.shibayan.jp/entry/20130203/1359898568
http://iyemon018.hatenablog.com/entry/2015/09/26/185822

### ASP.NET MVC + Unity（DIコンテナ）で使う

https://www.codeproject.com/Articles/1129953/ASP-MVC-with-Automapper-Profiles

## DeepCloner

全く同じオブジェクトをもう1個作りたい場合はDeepClonerを使う

### Github
https://github.com/force-net/DeepCloner

### nugetパッケージ

```PowerShell:nugetパッケージマネージャーコンソール
Install-Package DeepCloner
```
### 使い方

オブジェクトに拡張メソッドが追加されるので下記のようにディープクローンできます。
他の細かい使い方はGithubのREADMEを参照。

```C#:C#
using Force.DeepCloner

Hoge hoge2 = hoge1.DeepClone();
```
AWS EFS(Elastic File System) 特徴まとめと設定方法 備忘録

AWS EFS(Elastic File System) 特徴まとめと設定方法 備忘録



#[1] EFSの特徴

・複数EC2からNFSマウント可能な共有ストレージサービス(NFSv4)
・1つのEFSでペタバイト級まで対応
・HA（複数AZに冗長化）
・フルマネージド（管理不要）
・格納使用量で自動スケールアウト（キャパシティプランニング不要）
・用途例
 - 共有リポジトリ
 - パッケージの共有ディレクトリ
 - 分散並列処理のデータ共有アクセス

###セキュリティ
・KMSによるディスク暗号、SSLによる通信経路暗号
・VPC（単一）内に設置可能
　※サブネット内にプライベートIPをもつマウントターゲット(ENI)が生成される
　※マウントターゲットには個別のSGを設定可能
・SG/NACLによるネットワークアクセス制御
・Linux標準Posix権限によるファイル/ディレクトリアクセス制御
・IAMによるEFSへのAPIアクセス制御
・2018年7月に東京リージョンに対応

###コスト
・格納使用量で課金
　※オプションで高スループットモード時は、使用量に応じてプラス

参考）
https://www.slideshare.net/AmazonWebServicesJapan/20180704-aws-black-belt-online-seminar-amazon-elastic-file-system-amazon-efs-201889-update

###他サービスとの比較

参照）
[20180704 AWS Black Belt Online Seminar Amazon Elastic File System (Amazon EFS) 2018/8/9 update](https://www.slideshare.net/AmazonWebServicesJapan/20180704-aws-black-belt-online-seminar-amazon-elastic-file-system-amazon-efs-201889-update)


![ops1.png](https://qiita-image-store.s3.amazonaws.com/0/112537/043fd488-f487-1e67-4fdf-430937741482.png)


###構成イメージ
![ops1.png](https://qiita-image-store.s3.amazonaws.com/0/112537/b3d17423-4ac1-b29c-7eb4-83e422c9fd7e.png)


#[2] EFSの使い方
##① EFSを作成

###設定項目
・VPC
・AZ/サブネット ※指定VPC配下が自動選択
・SG
・タグの追加
・パフォーマンスモードの選択（汎用 or 最大 I/O）
・スループットモードの選択（バースト or プロビジョニング済み）
　※バーストは、普段低スループットのユースケースでバーストで上昇した場合にカバーしてくれる機能
・暗号化の有効化
・ライフサイクル管理の有効化
　※利用頻度の少ないファイルを低価格クラスに移行してくれる

![ops1.png](https://qiita-image-store.s3.amazonaws.com/0/112537/5c3b3992-2c2a-2028-cea3-38fccca5f450.png)


##② EFSをマウントするEC2側事前準備

```sh
sudo yum update -y
sudo yum install -y amazon-efs-utils
sudo mkdir /efs
```
amazon-efs-utilsはEFS用のユーティリティ
/efsにマウントする場合の例

##③ EFSをマウント

mountコマンドを各EC2で実行

```sh
 sudo mount -t efs -o tls fs-XXXXXXXX:/ /efs
```

※ fs-XXXXXXXXはファイルシステムID。コンソールで確認できる。

以上で/efsがNFSマウントされていることがわかる

```sh
$ df -Th
Filesystem     Type      Size  Used Avail Use% Mounted on
devtmpfs       devtmpfs  476M     0  476M   0% /dev
tmpfs          tmpfs     493M     0  493M   0% /dev/shm
tmpfs          tmpfs     493M  440K  493M   1% /run
tmpfs          tmpfs     493M     0  493M   0% /sys/fs/cgroup
/dev/xvda1     xfs       8.0G  1.3G  6.8G  17% /
tmpfs          tmpfs      99M     0   99M   0% /run/user/1000
127.0.0.1:/    nfs4      8.0E     0  8.0E   0% /efs
```

#[3] おまけ

##① アクセス設定関連
・EFSのマウントターゲット(ENI)のSGのインバウンドには、「NFS：port 2049」が必要。あるいはEC2と同じSGにして SELF INBOUNDをALL OKにする方法もあり。

・マウント時の/efsはroot権限で作成されるので、別ユーザで利用の際は適宜ディレクトリ権限変更（chmodやchown）をしておく。

##② マイグレーション

###AWS DataSync
・既存のEC2やオンプレミスのデータをEFSに転送するには「AWS DataSync」サービスの「EFS File Sync」機能がある
　※cpやsyncでも場合によっては可能だが、高スループット（5倍）で完了する
・VMware ESXi または EC2 のデータを、エージェントを介して移行可能
・コピーするデータの量に対して課金（0.04 USD/GB）

https://aws.amazon.com/jp/blogs/news/efs-file-sync-faster-file-transfer-to-amazon-efs-file-systems/

![ops1.png](https://qiita-image-store.s3.amazonaws.com/0/112537/823ed4d5-f098-accf-50db-d4dbcf50c914.png)
自分的ワンライナー（雑多）


作ったワンライナーを供養する記事。基本的にゴリ押しで効率的とは言いがたい。Bash on Windowsで動作確認。

# データ変換

## Base64デコード

```bash:
cat a.txt | perl -e 'use MIME::Base64;print decode_base64(join "", <>)' > b.mp3
```

base64を色々するコマンドはありそうだけど探すのがだるかったのでperlでゴリ押す。
テキストでBase64を読み込んでバイナリで吐く。
入力はテキスト形式なのでjoinでゴリ押す。
binmodeは必要か迷ったけどLinuxならいらないはず。

## バイナリをバイト文字列に

```bash:
cat binary_file | perl -E 'map { say $_ } unpack("c*", join("", <>))'
```

標準入力からやってきたバイナリを1バイトずつ出力する。cでsigned、Cでunsignedになる。

参考：https://perldoc.jp/func/pack

```
$ echo aiu | perl -E'map say,unpack"c*",join"",<>'
97
105
117
10
```

# CSV

## CSVラベル付き結合

```bash:
perl -e 'map { print "$_->[1],$_->[0]", "\n" } map { $a = $_; map { [$_, $a->[1]] } split /\r?\n/, `cat $a->[0]` } grep { $_->[2] } map { $a = $_ =~ /([^\/]*)\.csv$/; [$_, $1, $a] } <./*>' > all.csv
```

カレントディレクトリに`1.csv, 2.csv`みたいにあったとき、一番左のカラムに1の部分を埋め込んでCSVを結合して返す。
情報量的には変わらないのでExcelに突っ込むときに使える。

## CSV各行データカウント

```bash:
cat a.csv | perl -e 'map { chomp $_; $a{$_}++ } <>; map { print "$_,$a{$_}\n" } keys %a'
```

少ないパターンのデータがたくさん並べられたデータに使う。`100`が2000個縦に並んだデータを`100,2000`みたいにする。
fetchを指定回数リトライさせる書き方

JavaScriptのfetchをリトライさせたくて調べて見つけた書き方。

## 書き方

参考にしたサイト、素晴らしい🙏
ES7のを参考にしたけど、他バージョンの書き方も載っている。
[Javascript fetch, retry upon failure](https://dev.to/ycmjason/javascript-fetch-retry-upon-failure-3p6g)

```javascript
const fetch_retry = async (url, options, n) => {
  try {
    return await fetch(url, options);
  } catch (err) {
    if (n === 1) throw err;
    return await fetch_retry(url, options, n - 1);
  }
};
```

なるほど。エラーの場合は再帰的に`fetch_retry`を呼び出すのか。ES7なので、`async``await`を使っているから、綺麗に書けている。久々にJavaScriptで感心してしまった。

## 試してみる

1回のリトライごとに1秒のsleepを入れて、実際にリトライが可能かやってみた。ちなみにsleepは下記を参考にした。JavaScriptで簡単にsleepっぽい事ができるようになったのは、すごく嬉しい。
[ES2017のasync/awaitを使って「同期的sleep処理」をワンライナーで書く](https://qiita.com/the_red/items/15ec029e0f460a9ea99f)

```javascript
const fetch = require("node-fetch");

const fetch_retry = async (url, options, n) => {
  try {
    console.log("count=", n);
    return await fetch(url, options);
  } catch (err) {
    await new Promise(r => setTimeout(r, 1000));
    if (n === 1) throw err;
    return await fetch_retry(url, options, n - 1);
  }
};

fetch_retry("http://localhost:8080/hoge", {}, 10)
  .then(res => {
    console.log("Success:", res.status);
  })
  .catch(err => {
    console.log("Error:", err.message);
  });
```

何回かのリトライの後、成功した場合はこんな感じ。

```terminal
$ node main.js  
count= 10       
count= 9        
count= 8        
count= 7        
count= 6        
count= 5        
count= 4        
Success: 200    
```

失敗したときはこんな感じ。

```terminal
$ node main.js                                                                                  
count= 10                                                                                       
count= 9                                                                                        
count= 8                                                                                        
count= 7                                                                                        
count= 6                                                                                        
count= 5                                                                                        
count= 4                                                                                        
count= 3                                                                                        
count= 2                                                                                        
count= 1                                                                                        
Error: request to http://localhost:8080/hoge failed, reason: connect ECONNREFUSED 127.0.0.1:8080
```
とあるエンジニアの問題意識 2019-02-23

# 大阪スクラムフェス。
ここ数ヶ月で身につけた様々な ライフハック を総動員して大ボスに立ち向かう。Twitterで注意をずらす。疲労困憊の防止。フォロー、いいね、リツイート、引用ツイート。物理世界ではニット帽による聴覚刺激、視覚刺激の低減。呼吸法。自律神経のハック。 
# 勉強会が世界で一番苦手な僕の対策。

発表は聞かない。あえて耳を傾けない。自然に飛び込んできたキーワードがあればそれに気づく。十数秒だけ聞く。

不思議と一番大事なスライドが目に留まる。精密な理解をせずに間違う余白を残しておく。

学習 エンジニア 
# エンジニア の開発。馬車馬のように走らない。走らせない。

2割の練習時間が重要。将来への投資時間。個人的には5割でもペイすると思う。

タワーディフェンス・ゲームみたいにポイントが増えるスキルにポイントを割り振りたい。

scrumosaka 
# スクラムフェス大阪。コーヒーやレッドブルが支給される。長蛇の列だ。我らエンジニアの親友。

だが個人の生産性を気にするならカフェインは取らない方が良い。エネルギーの先取りで首が回らなくなる。

まぁカフェイン耐性にもよるだろうけど。僕は極力避ける。

スクラム エンジニア <https://t.co/8ESPggN6ta> 
# 「脳を鍛えるには運動しか無い！」

エンジニア に肉体面のハックは必要だ。ストレス度の高いプログラミングの後にはワークアウトが役立つ。いち早くストレス状態から回復できる。

肉体と精神が分離していたのは過去の話で、今では心身同一の理解が進む。

だが必ずしも筋肉をつける必要はない。 <https://t.co/1YIf8IsrX1> 
# エンジニア の勉強会に限らず懇親会への参加は究極に迷う。

お金を払い時間を使いエネルギーを削りアルコールに倒れカロリーで肥満しコミニケーションを取れず孤独を感じ終電を逃し夜の道を歩き冬の夜に凍えタクシーも捕まらずマクドで眠る。

そんなのは嫌だ。忘れないで夢を。こぼさないで涙。 
# エンジニア の勉強会。わりと自分の好きにできることを発見。Twitterでハッシュタグを見たり。まとめたり。

だけど懇親会はそうはいかない。人との距離感が近い。スマホもパソコンも使えない。

僕は驚くほど距離感を取りたい。嘘だと思うかもしれないが店の外で人のざわめきを感じるレベルで良い。 <https://t.co/yEekXa89bm> 
# エンジニア勉強会の懇親会。本当に人の良さそうな人と話した。

ゲームや開発方式や結婚の話をちょっとだけした。一瞬の間だけ1on1になった。

エンジニア の飲み会にも1on1を取り入れてみてはどうだろうか。コミュ力の低い僕のようなニット帽にも救いの手が差し伸べられるだろう。

スクラム <https://t.co/9LfJt1pztc> 
# 飲み会的不確実性コーン。

メインの勉強会に参加するのはイージー。懇親会の1次会はノーマル。二次会はハード。

どんどん話もコアになり人間関係も密な人が残る。ノーマルもクリアできていないのにハードに行けるはずは無い。ましてやイージーさえ全力対策が必要な僕だ。

スクラム エンジニア <https://t.co/zLJ1ZZ23eQ> 
# コミュ力を上げる能力戦略。これはさすがに絶大なコストがかかる。

人間が持つ最も複雑なスキル。なおかつ高度な長期的訓練が必要な能力だから。

能力を伸ばさずに対処したい。戦略という甘い果実で。コミュケーションパワーのリソースが最小でもサバイバルできるハックを探す エンジニア。 <https://t.co/cpWO4QQNXG>

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/629








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
一方向ハッシュ関数

#ハッシュ関数
何かしらのメッセージ(文章、画像、映像なんでも良い)をある一定の固定長の値を返す関数
返された固定長の値をハッシュ値という
100バイトだろうと、100Gバイトだろうとすべて固定長(256ビットとか)のハッシュ値が出力される。

#何ができるのか
**改ざん検知が可能になる**
Aさんが「100万円分購入します。」というメールをBさんに送信する。
しかし、通信の途中でCさんが通信を盗聴していて、Aさんのメールを「1億円分購入します。」と改ざんしてしまったら、Bさんは1億円で処理をしてします。
これを防ぐために「100万円分購入します」というハッシュ値を生成する。(例：abcde)
Aさんは「100万円分購入します」というメール(平文)と合わせてハッシュ値abcdeも送信する。
メールを受領したBさん側もメールの内容をハッシュ化し、Aさんから送られてきたハッシュ値abcdeと比較し
改ざんされていないことを確認する。

SSL/TLS MAC等様々なところで利用されているみたいです。

#ハッシュ関数を利用することで完全性が保証される
上記の通り、メッセージから生成したハッシュ値を検証することで改ざんされていないかを確認する。
しかし、改ざんは検知できても**なりすまし**は検知できないため、そこも確認する場合は**ディジタル署名、MAC,ディジタル証明書**を利用する。

#衝突耐性
メッセージの内容が１文字(正確には1ビット)でもずれていたら、ハッシュ値は違う値になるべきであり、同じハッシュ値で別のメッセージが２つ以上生成される(衝突)のは避ける必要がある。
２つのメッセージが同じハッシュ値なら改ざんされてるかどうかわからない。

衝突耐性には3つある。
**衝突発見困難性(強衝突耐性)**
１つのハッシュ値から２つ以上のメッセージを見つけ出すことが困難なこと。
abcdeというハッシュ値を逆算したらaaaaとbbbbっていう値を見つけ出すことができないこと。

**第二原像計算困難性(弱衝突耐性)**
メッセージのハッシュ値が与えられたとき、そのハッシュ値から他のメッセージを探すことが困難なこと。
aaaaのハッシュ値abcdeが与えられたとき、逆算してbbbbというメッセージを見つけるのが難しいこと

**原像計算困難性(一方向性)**
ハッシュ値から元のメッセージを見つけるのが困難なこと

#ハッシュ関数一覧
MD4、MD5　・・・すでに衝突耐性が破られている。同じハッシュ値を持つ2つのメッセージが作れ る。

SHA-1 ・・・160ビットの一方向ハッシュ関数。これも突破されている。
　　　　　　新規での利用は推奨されない。

SHA-2 ・・・SHA-256,SHA-384,SHA-512の総称。
　　　　　　　ビット数はそれぞれの数字。
　　　　　　　CRYPTRECの推奨暗号リストに入ってる。

#ハッシュ化されているからと言って絶対に安全とは限らない
上記で説明している通り、既にいくつかのハッシュ関数は突破されている。
そのため、完全性が必ずしも保証されるとは限らない。
不正アクセスや攻撃によりハッシュ化された情報が流出してしまった場合、ブルートフォースアタック等の攻撃によりいつかは突破されてしまう。
そのためパスワードといったアクセス等に利用しているものをハッシュ値として保管していても、流出してしまった場合は変更することが推奨される。
zshのfunction内容(定義)を表示するのはdeclare -f

シェルスクリプト関数の中身は `declare -f $FUNCTION_NAME` で確認できる。
なぜか覚えられず毎回検索してしまう。。

例えばこんな感じ.

```shell-session
>>> declare -f mkdir-cd
mkdir-cd () {
        mkdir -p $1 && cd $1
}
```
静的ファイルをCircle CIでビルドしてSSHでデプロイする

静的ページなどをウェブサーバーにデプロイするのをCIに任せたくなったので、Circle CIでの設定をいろいろ凝りつつ作ってみた。

ポイントはbuildジョブとdeployジョブを分けること。

- 結果が見やすくなる。
- それぞれのジョブについてworkflowで処理順や条件を個別に指定できる。
- ジョブ間でファイルを保持する設定が必要だが、そこまで大変ではない。

## 設定ファイル

解説はコメントで

```yaml:.circleci/config.yml
version: 2

jobs:
    build:
        docker:
            - image: node:10 # 使いたいDockerイメージを指定
        steps:
            # レポジトリからファイルを取り込む
            - checkout

            # ビルドする (例)
            - run: yarn install --frozen-lockfile
            - run: yarn build

            # [重要] ビルド生成物を次のジョブで使えるよう保持する設定
            - persist_to_workspace:
                root: '.'
                paths:
                    - out # ビルド生成物が含まれる場所を指定

    deploy:
        machine:
            enabled: true
        steps:
            # 上のジョブで保持したビルド生成物を取り込む
            - attach_workspace:
                at: '.'

            # SCPでもいい
            - run: rsync -e "ssh -o StrictHostKeyChecking=no" -ahv --delete ./out/* ${DEPLOY_DEST}

# jobsのみだとbuildしか実行されない。ここで実際の処理順や条件を指定する。
workflows:
    version: 2
    build-and-deploy:
        jobs:
            - build
            - deploy:
                # buildが成功したらdeployを実行する
                requires:
                    - build 
                # masterブランチのみdeployを実行する
                filters:
                    branches:
                        only:
                            - master

```

## CircleCIコンソール内での設定

プロジェクト内の設定を開いて以下を設定する

### デプロイ先の環境変数
Build Settings → Environment Variables
![add-env-var.png](https://qiita-image-store.s3.amazonaws.com/0/206860/4e426736-9e38-5d93-26b4-1f7684782921.png)

### デプロイ用のSSHキーを追加
Permissions → SSH Permissions
![add-ssh-key.png](https://qiita-image-store.s3.amazonaws.com/0/206860/683f8cba-1893-d817-cd1f-2354b0f108ab.png)
Hostnameは空でもよい
stdafx.hについて調べたことメモ

# 前書き
次のことが起こった。

1. windows用アプリケーションフレームワークのMFCを使い、ヘッダファイル(`.h`)にクラスの定義を書き、コンストラクタを別ファイル(`.cpp`)に分割しようとしていた。
2. しかし、ヘッダファイル中にあったときは動作していたプログラムが、分割したところコンパイルが通らなくなった。
3. 原因は分割した`.cpp`の中で、**`stdafx.h`の上の行でクラス定義のヘッダファイルをインクルードしていた**こと


そこで`stdafx.h`について調べたことをメモする。
結論は、**`stdafx.h`のインクルードはファイルの先頭でなければならない**。

上記の問題は[C++(MFC)で自作クラスをクラス定義(.h)と関数実装(.cpp)に分割したい](https://teratail.com/questions/176036)で質問し、回答をいただいて解決した。
プリコンパイル済みヘッダについて教えてくださったChironian様、ご回答頂いた皆様、改めましてありがとうございました。

# プリコンパイル済みヘッダファイル
`stdafx.h`および`stdafx.cpp`は、`プロジェクト名.pch`で生成される**プリコンパイル済みヘッダファイル**と`stdafx.obj`で生成される**プリコンパイル済みタイプファイル**をビルドするためのファイル。
`プロジェクト名.pch`たちは`Debug`フォルダ内等に生成される。

## `stdafx.h` 
頻繁に使われるが、変更は頻繁でないインクルードファイルのためのインクルードファイル。
このファイルの中で`_AFX_NO_XXX `というマクロを定義してはいけない。<font color="LightSteelBlue">（ファイルを覗くと最初からそんな定義がいくつか見える。）</font>

## `stdafx.cpp`
`#include "stdafx.h"`が書いてある。
プリコンパイル済みタイプのインクルードファイルを追加する。<font color="LightSteelBlue">（このファイルに必要なヘッダを追加するように読めるが、他のソースではstdafx.hに追加すると読める文も出てくる。どっち？）</font>
プリコンパイル済みファイルというのは、プリコンパイル済みファイルを必要とするファイルのコンパイル速度を速めるためにある。最初にプロジェクトをビルドしたら、<font color="LightSteelBlue">（プリコンパイル済みファイルが生成され、）</font>その後は最初よりもっと高速にビルドできる。

ソース：
[Precompiled Header Files](https://docs.microsoft.com/en-us/cpp/ide/precompiled-header-files?view=vs-2017)


# 手動設定と注意

* **`stdafx.h` は、すべての .c と .cpp ファイルでインクルードされるべき**
* `Visual Studio`で新規プロジェクトを作成する場合`stdafx.h`と`stdafx.cpp`が自動で作成され、コンパイルに必要なすべてのオプションは定義されている。
* 手動設定は、プロジェクトのプロパティから次の画像のように設定し、下記1~3を実行して有効にできる

<img src=https://qiita-image-store.s3.amazonaws.com/0/296108/1eb4c6e9-5c47-bd71-205b-0515bd423930.png>

>1. stdafx.h ファイルを作成し、プロジェクトに追加します。事前に前処理したいヘッダーをこのファイルにインクルードします。
2. stdafx.cpp ファイルを作成し、プロジェクトに追加します。このファイルは次の 1 行のみを含みます: #include “stdafx.h”。
3. [すべてのオプション] で stdafx.h 向けに設定を変更: [プリコンパイル済みヘッダー] オプションに “作成 (/Yc)” を設定します。

>各ファイルに #include “stdafx.h” を追加する必要があります

  

そして、
>**“stdafx.h” ヘッダーは、各 *.c や *.cpp ファイルにインクルードする最初のファイルでなければいけません。**

##なぜ最初にインクルードするのか

###例1
例として次のように解説されていた。

1. `"stdafx.h"`より前のにインクルードされたファイルに`#define bool char`があるとする。
2. 全ての`bool`が`char`に置き換えられる
3. プリコンパイル済みヘッダが想定して準備していた「めったに変更されないが頻繁に使用される処理」も`bool`-->`char`の変更を受ける
4. プリコンパイル済みヘッダー全体の構成が壊れる

このようなことを防ぐ理由がある。他にも理由があるらしい。

###例2
次のようなコードがあるとする
(`#include "stdafx.h"`が先頭ではない！)

```cpp
int A = 10;
#include "stdafx.h"
int _tmain(int argc, _TCHAR* argv[]) {
  return A;
}
```
これはエラーになる
>error C2065: 'A' : 宣言されていない識別子


なぜなら、
>これは、#include “stdafx.h” (この行を含む) 以前のすべてのテキストが、プリコンパイル済みヘッダーであると考えられます。このファイルをコンパイルすると、コンパイラーは #include “stdafx.h” 以前のテキストを .pch ファイルで置き換えようとします。その結果、”int A = 10;” の行は失われます。

正しくは

```cpp
#include "stdafx.h"
int A = 10;
int _tmain(int argc, _TCHAR* argv[]) {
  return A;
}
```

ソース：
[StdAfx.h に関する考察](https://www.isus.jp/products/c-compilers/stdafxh/)

なおプリコンパイル済みヘッダに関する問題には、プロジェクト全体を再コンパイル(リビルド)すると解決するものもあるらしい。
MacOSのHigh Sierraでafloatが使えるようになるまでの道のり

## PC環境
* MacOS High Sierra バージョン10.13.6

## 導入する動機
ターミナルを最前面にして､半透明にして後ろにブラウザを置きながらゴリゴリやってみたかった｡

## 記事を書いた経緯
普通にafloatの記事を見て､ダウンロードしても使えなかったので､忘れないように記事にした｡

## やったこと
### mySIMBLのインストール
[Always on top in MacOS Sierra](https://www.perfectlyrandom.org/2016/10/23/always-on-top-in-macos-sierra/)を参考に[w0lfschild / mySIMBL](https://github.com/w0lfschild/mySIMBL)からmySIMBLをインストール｡

### rwu823作のafloatをダウンロード
[rwu823 / afloat](https://github.com/rwu823/afloat)

ターミナルで打つ
`curl https://raw.githubusercontent.com/rwu823/afloat/sierra/install.sh | sh`

このとき､Passwordを求められるのPCにログインするときにPasswordを入力｡

### 「SIP」を無効にする
1. 再起動中に<command+r>を長押し(appleのロゴマークが出てから､結構長く押し続ける｡)
2. 画面がいつもと違う画面のリカバリーモードになったら､上部メニューの「ユーティリティ」を表示し､その中から「ターミナル」を選択⇒`csrutil disable`でEnter
3. 上部メニューの画面から､再起動を選択する｡

再起動後､「SIP」が無効か気になる場合は､ターミナルを開き`csrutil status`で確認する｡
`System Integrity Protection status: disabled.`になっていることを確認する｡

[【雑解説】SierraでAfloatを使う方法](http://monog.hatenablog.com/entry/2017/07/02/003730#713%E8%BF%BD%E8%A8%98%E3%82%82%E3%81%A3%E3%81%A8%E7%B0%A1%E5%8D%98%E3%81%AA%E6%96%B9%E6%B3%95%E3%81%82%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F)

### afloatが使えるようになったか確認
ターミナルを開き､上部メニューのウィンドウをみると､メニュー内に追加されているのが確認できました(chromeも同じく確認できました｡)｡
![スクリーンショット 2019-02-24 2.25.50.png](https://qiita-image-store.s3.amazonaws.com/0/163887/58a2786b-4179-5aa3-8b95-a859028fae9c.png)

また､mySIMBLを起動すると､こんな感じになってました｡
![スクリーンショット 2019-02-24 2.23.33.png](https://qiita-image-store.s3.amazonaws.com/0/163887/876662de-d2a9-15ec-e377-265392d9d2c4.png)
![スクリーンショット 2019-02-24 2.23.52.png](https://qiita-image-store.s3.amazonaws.com/0/163887/f4751f43-be75-73a2-8105-5f5ffda5db66.png)

### 「SIP」を有効にする
無効にした同じ手順で､リカバリーモードでターミナルを起動し､今度は`csrutil enable`と打ち込んで再起動｡

再起動後､念の為ターミナルを開き`csrutil status`で確認する｡
`System Integrity Protection status: enabled.`になっていることを確認する｡

## afloatの使い方
下記がとても参考になります｡
[わかばマークのMacの備忘録 : Afloat - FC2](http://wakabamac.blog95.fc2.com/blog-entry-612.html)
[Afloatでもウキウキ半透明ライフ](https://www.umurausu.info/blog/archives/001159.html)

### よく使う設定
#### Focus Follows Mouse
マウスでフォーカスしたウィンドウが選択された状態になるので､chromeにvimnumを入れておけば､すぐにキー入力が反映される状態になるので重宝します｡

#### Transparency
Translucentでターミナルを半透明に設定｡
ターミナル背面には､開発用のブラウザを別ウィンドウで立ち上げ配置｡
ターミナルで更新した内容を反映しているか確認する際などに使える｡
または､DeskTopがMac1枚のときは､作業領域が広く使えるので重宝する｡
アプリの切替は､ウィンドウ単位で行いたいのでHyperSwitchで切替え｡
[Macアプリ「HyperSwitch」ウインドウ単位で切り替え](https://pc-karuma.net/mac-app-hyperswitch/)


## 補足
実際は､いくつか試しながら最終的に動くようになったので実際に試した流れとは違います｡
たぶんこの流れだろうという感じで補足しながら記事にしています｡
D3.jsで完全グラフの描画

https://codepen.io/matsutakk/pen/zegdqN?editors=0010#

<p class="codepen" data-height="509" data-theme-id="0" data-default-tab="js,result" data-user="matsutakk" data-slug-hash="zegdqN" style="height: 509px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Complete Graph">
  <span>See the Pen <a href="https://codepen.io/matsutakk/pen/zegdqN/">
  Complete Graph</a> by Takuya Matsuda (<a href="https://codepen.io/matsutakk">@matsutakk</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

d3.select()で描画をする準備をして、

```
  let sampleSVG = d3.select("#viz")
                    .append("svg")
                    .attr("width", width)
                    .attr("height",height);    
```

.append("circle")で円を描画。
.style()で円の色等を決めて、
.attr()で位置を決定。

```
  sampleSVG.append("circle")
          .style("stroke", "white")
          .style("fill", "black")
          .attr("r", radius)
          .attr("cx", width/2)
          .attr("cy", height/2)
```

.append("line")で線を描画。
.style()で線の色等を決めて、
.attr()で引く位置を決定。

```
sampleSVG.append("line")
            .style("stroke", "white")
            .style("fill", "white")
            .attr("x1", array_x[i])
            .attr("y1", array_y[i])
            .attr("x2", array_x[j])
            .attr("y2", array_y[j])
```
local by flywheelをアカウント名がマルチバイトの環境下でインストールする

# 前提
local by flywheelをアカウント名マルチバイトの環境下でインストールしようとしたら途中で止まるなどが発生しインストール出来なかった。

# 解決法
Virtualboxを先にインストールする
　↓
hostsを自力編集する

# 試行錯誤
## インストールエラーが発生
まずインストールしてみたところ、Virtualboxがインストールが見つかりませんと言っているような内容のエラーが発生。
それでも無理に進めてみたものの、Virtualboxのインストール途中で止まったまま15分。これは無理だろうと諦める。
![2019-02-17_23h42_39.jpg](https://qiita-image-store.s3.amazonaws.com/0/356382/761f5fc5-771a-7bd9-ecd6-17b986f7cf97.jpeg)

## 理由を探す
![2019-02-17_23h43_01.jpg](https://qiita-image-store.s3.amazonaws.com/0/356382/e046cbe4-77a7-a602-4bf6-1082a8f8ac8c.jpeg)
**間違いなくこれ。**

おそらくというよりも間違いなく、マルチバイトユーザー名のアカウントではインストールできない。
ちなみにInstantWPも試しに入れてみたけれどもこちらもマルチバイトでエラーが発生。
別アカウント作るのも良いけど手間だし設定が面倒なので、このまま決行する。

## Virtualboxを入れる
[Oracle VM VirtualBox](https://www.virtualbox.org/)からVirtualboxをダウンロードしインストール。
この際特になにか変更することはなし。

Virtualboxは問題なくインストールされる。
その後local by flywheelをインストールするのは問題なく成功。その際Virtualboxのインストールはカットされる。

![2019-02-17_23h55_53.jpg](https://qiita-image-store.s3.amazonaws.com/0/356382/bc3e8957-9158-0845-db0c-d6f858d4771d.jpeg)

## 今度はadminが開かない
![2019-02-18_00h09_55.jpg](https://qiita-image-store.s3.amazonaws.com/0/356382/21ad72e8-ad97-cd9f-832f-dd5e4d2a04a3.jpeg)
firefox、chrome、IEでアウト。

[ローカル開発環境 Local by Flywheel エラー検証「Missing hosts entry…」 – A2-blog](https://edit-anything.com/blog/local-by-flywheel-hosts-file-error.html)を見たところ、hostsを自力で書き換えることでなんとかなると書いてある。
書き換える→成功。

## 成功
ただし、FIX ITは消えていない。
![2019-02-24_03h05_34.jpg](https://qiita-image-store.s3.amazonaws.com/0/356382/a0dac643-e96f-154a-7eba-108887a7919f.jpeg)
なんなら他もPHPのバージョンが不明だとかいろいろエラーは発生しているけれど、練習用に使えるぐらいには動くので良いことにしています。
![2019-02-19_22h16_48.jpg](https://qiita-image-store.s3.amazonaws.com/0/356382/c4358723-4fe3-bb35-42b6-5c315ee094e6.jpeg)
RaspberryPiをSSH接続してみた

#はじめに
　電子工作、プログラミングは素人ですので間違いも多くあると思います。自分用のメモ程度に書き記していきますので参考程度に。また、何か間違いがありましたらご指摘ください。

#このシリーズでやりたいこと
　家での赤外線機器の遠隔操作ができるシステムを、以前購入していたRaspberryPi3ModelB+を利用して作ってみようと思い立ちました。

#今回やりたいこと
　以前ラズパイを触ったのは半年ほど前で、遠隔ではなく直接キーボードとマウスを指して作業してました。毎度繋げなくてはいけなく、手間もかかりスペースもとり作業開始までとても億劫だったのでSSH接続で遠隔操作できるようにしました。

#動作環境、現在のラズパイの状況
- MacBookAir2018
- RaspberryPi 3 Model B+
- 無線Wifi環境

　ラズパイは半年ほど前に使用していたので、初期設定は済んでおり、自宅の無線Wifiに繋がっていました。

#IPアドレスを確認してMacからSSH接続
　ラズパイの初期設定から、SSHで遠隔接続するまでのやり方はググればたくさん出てきますね。その中で今回は検索の上位に来た以下の記事を参考にさせて頂きました。

[Raspberry Pi 3を初回起動してからSSH接続まで](http://ykubot.com/2017/01/17/raspberry-pi-3-initialize/)

　上記のサイトによると、SSH接続するには、まずラズパイを起動した状態で割り振られているIPアドレスを確認して接続するとのこと。まずは有線で繋いだキーボードを使用してIPアドレスを確認しました。

```
@raspberrypi:~ $ifconfig
wlan0: flags=xxxx<UP,BROADCAST,RUNNING,MULTICAST>  mtu xxxx
        inet 192.xxx.xx.x  netmask 255.xxx.xxx.x  broadcast 192.xxx.xx.xxx
```
セキュリティー面が全くわからないのでとりあえずやばそうなとこはxで置き換えて置きました。。。


　そんなこんなで無線LANのIPアドレスは確認完了。

#ラズパイ側でSSH接続を受け付ける準備
　なんか最近のラズパイは標準でSSH接続は拒否されているようです。なので、設定をいじる。

```
@raspberrypi:~ $sudo raspi-config
```
このコマンドでこんな設定画面が出てきます。<img width="561" alt="スクリーンショット 2019-02-24 2.11.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/366350/a1868642-dcc5-2b68-92a4-ee2c8f90a36e.png">

こちらの設定画面で
Interfacing Options > SSH 
でSSH接続を受け付けますかと聞かれるので＜はい＞で設定完了
終わったら再起動

```
@raspberrypi:~ $sudo reboot
```
シャットダウンは$sudo shutdown -h now の方がいいんですかね

#Macから接続
　ここまできたらMacから接続を試みます。

```
$ ssh [ユーザ名]@[ラズパイのIPアドレス]
```

ここで1時間くらいつまずいてました。。。@の前が参考記事がデフォルトのpiで設定されていたので気づかずにずっとpi@xxx.xx.xx.xで繋ごうとしてパスワードが違うって弾かれてました。。

　スムーズに行けばゴニョゴニョと聞かれるのでyesと答えてパスワードを入力すれば接続完了します。

#次回やること
　とりあえずSSH接続ができたので、次回はIPアドレスを固定して自宅LAN外からの接続にチャレンジしたいと思います。
　Qiitaの投稿自体初めてのもので至らないことも多いと思いますが、最後まで読んでいただきありがとうございました。何かありましたら気軽に意見をお願いします。
Jqueryのフィルタを使ってセレクタを指定する　

## この記事について
JQueryで指定したセレクタに対してフィルタをかけることによって、特定の要素を指定する方法を記載します。

以下の記事をベースに書いておりますので、よかったら見てみてください。
[JQueryのセレクタ指定の方法](https://qiita.com/hirokobe26/items/632608e99afe7947214b)
## フィルタの記述方法
フィルタにも色々あるのですが、基本的なものを紹介します。

```
:eq()
→引き数に指定した番号の要素が指定される
:gt(
→引き数に指定された要素以上の要素が指定される
:lt()
→引き数に指定された要素未満の要素が指定される
:even、:odd
→要素が奇数の要素、偶数の要素が指定される
:contains()
→指定したDOM要素が持つ中身に、引き数で指定したものがあるDOMm要素を指定する
:first、:last
→最初のDOM要素、または最後のDOM要素を指定する
```

## サンプルコード

さて、上記の説明だけではわかりにくいので、いくつかサンプルコード記載します。

```html:.jquery.html
    <ul id="main">
        <li>0</li>
        <li class="hoge">1</li>
        <li class="hoge">2</li>
        <li>
            3
            <ul id="sub">
                <li>3-0</li>　/０番目の要素
                <li>3-1</li> /１番目の要素
                <li class="hoge">3-2</li> /２番目の要素
                <li class="hoge">3-3</li> /３番目の要素
                <li>3-4</li> /４番目の要素
            </ul>
        </li>
    </ul>
  <script>
    $(function(){
      $('#sub > li:eq(1)').css('color', 'blue');
    });
  </script>
/3-1が青に変わる
```

```html:.jquery.html
    <ul id="main">
        <li>0</li>
        <li class="hoge">1</li>
        <li class="hoge">2</li>
        <li>
            3
            <ul id="sub">
                <li>3-0</li>　/０番目の要素
                <li>3-1</li> /１番目の要素
                <li class="hoge">3-2</li> /２番目の要素
                <li class="hoge">3-3</li> /３番目の要素
                <li>3-4</li> /４番目の要素
            </ul>
        </li>
    </ul>
  <script>
    $(function(){
      $('#sub > li:gt(1)').css('color', 'blue');
    });
  </script>
/3-2,3-3,3-4が青に変わる
```

```html:.jquery.html
    <ul id="main">
        <li>0</li>
        <li class="hoge">1</li>
        <li class="hoge">2</li>
        <li>
            3
            <ul id="sub">
                <li>3-0</li>　/０番目の要素
                <li>3-1</li> /１番目の要素
                <li class="hoge">3-2</li> /２番目の要素
                <li class="hoge">3-3</li> /３番目の要素
                <li>3-4</li> /４番目の要素
            </ul>
        </li>
    </ul>
  <script>
    $(function(){
      $('#sub > li:contains(4)').css('color', 'blue');
    });
  </script>
/3-4が青に変わる。3-4のみ４という数字を持っているため。
```