OmniAICreator/Qiita-1.07M huggingface dataset:
並列処理学習１－子プロセスの管理

並列処理を行う利点は以下がある。
- 適切な利用によって処理を最適化
- コマンドラインインユーティリティ等の他ツールとの統合
- シェルスクリプトの肥大化を防ぎ、保守、運用を行いやすくする

それらを行うために、Pythonで書き直すのはたやすいこと。
 
# subprocessの利用
Pythonでの並列処理の方法は複数存在するが、subprocessを利用するのがとても効果的。
subprocessを使用するのは簡単。

Popenコンストラクタで子プロセスを開始し、communicateメソッドにより処理を監視する事が出来る。
subprocessによって、親プロセスから子プロセスを完全に切り離すことが出来る。
また、communicateにて、子プロセス実行終了を待つことが出来る。

# データのパイプ
子プロセスへデータをパイプして、出力を受け取ることも出来る。

Popen時にPopen時に、実行したい処理へデータを受け取るための設定を行い、行った設定に対してデータのパイプを行い、オブジェクトを取得しリスト等でデータを保持。
その後、subprocess等を用いて、順次、オブジェクトの処理出力を受け取る事が出来る。

子プロセスの出力結果を、さらに子プロセスに渡すことも可能。
ひとつの子プロセス内の一つのプロセス（Popen-A）が終わったら、次の目的のプロセスプロセス（Popen-B）へ、一つ前のプロセス（Popen-A）を渡す方法でデータのパイプが行える。

# 補足
プロセスの終了が正確に行われているか気になるようであれば、communicateメソッドへtimeout引数を渡せばいい。
もし、想定した時間以上経っても終了していない場合は、例外は返され、処理が終了する。
pythonでLINENotify使ってみる

#はじめに
今回は「LINENotify」というサービスを使用して、pythonからLINEへメッセージを送信していきます. 
これを使用してスクリプトを書けば, 実験で回しているコードが終了した場合に通知するシステムが作れそうですね. 

#LINENotify
まずはLINENotifyのアクセーストークンを取得していきます. 
1.[公式サイト](https://notify-bot.line.me/ja/)から自分のアカウントへログインします. 
<img width="1438" alt="スクリーンショット_2019-06-22_5_38_56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319132/2d4057c3-0186-950b-a994-b39cd293a8d2.png">

2.マイページへ移動します. 
<img width="1434" alt="スクリーンショット_2019-06-22_5_49_08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319132/b3ab7982-90f4-bb37-9110-f34ce99d43d0.png">

3.トークンを発行します. 発行したトークンは忘れないように. 
<img width="1437" alt="スクリーンショット_2019-06-22_5_50_17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319132/edb8149f-db10-03a2-8d7a-55e50a381c70.png">

4.トークン名とトークグループを決めます. グループではなく, 1:1でも指定できます. 
<img width="522" alt="スクリーンショット_2019-06-22_5_50_31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319132/674ee9a6-b112-86ef-0f0d-5faa3bd5f02c.png">

5.トークグループを1:1ではなく, グループにした場合はLINENotifyをグループに招待する必要があるようです. 私は1:1をにしたので, この手順は省いています. 

以上で準備はオッケーです. 

#pythonからメッセージ送信
pythonからメッセージを送信していきます. 
###テキストのみ
以下のコードに自分のアクセストークンを入れて実行しましょう. 

```python
#coding:UTF-8
import requests

def main():
    url = "https://notify-api.line.me/api/notify"
    token = "ここにアクセストークンを入れます"
    headers = {"Authorization" : "Bearer "+ token}

    message = 'message送信！'
    payload = {"message" :  message}

    r = requests.post(url ,headers = headers ,params=payload)

if __name__ == '__main__':
    main()
```

###画像を含む場合
以下のコードに自分のアクセストークンを入れて実行しましょう. 

```python
# -*- coding: utf-8 -*-
import requests

def main():
    api = "https://notify-api.line.me/api/notify"
    token = "ここにアクセストークンを入れます"
    headers = {"Authorization" : "Bearer "+ token}

    message = 'message送信！'
    payload = {"message" :  message}
    files = {"imageFile": open("ここに画像のファイル名", "rb")}

    post = requests.post(api, headers = headers, params=payload, files=files)

if __name__ == '__main__':
    main()
```

#結果
以下のようメッセージを受信すれば成功ですね. 
###テキスト
<img width="196" alt="スクリーンショット 2019-06-22 6.00.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319132/d13be873-a874-7eac-aee0-283ef2d882f7.png">
###画像
<img width="299" alt="スクリーンショット 2019-06-22 6.06.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319132/7e63da78-0eb5-a96a-3a96-8b247674a509.png">

#参考サイト
[Pythonでスクレイピングした情報をLINE Notifyで通知する](https://www.ravness.com/2018/12/linescraping/)
BEMの命名規則について

# 命名規則を統一すれば、HTMLのクラス名に迷わない。

- BEMとは何？

BEMとは多くの開発者が取り入れている、CSSを記述するルールです。
BEMは
Block：ブロック
Element：要素
Modifier：変更
の頭文字を取ったもので、ページを構成する要素をBlock、Element、Modifierのどれかに当てはめてクラスを命名します。

### メリット
- クラスの命名が簡単になる
- 要素の再利用がしやすくなる

block__element--modifier
のように, blockとelementはアンダースコア2つで区切り, elementとmodifierはハイフン2つで区切る。


hamlでの実装

```haml:qiita.haml
.left-content
  .left-contet__header
  .left-contet__main

.right-content
  .right-contet__header
  .right-contet__main--background
  .right-contet__fotter
```
LaradockでLaravel+Docker環境構築(mac)

### はじめに
大阪の会社でwebエンジニアしています。
そろそろアウトプットしていきたいのと、環境構築中ヒマなのでqiitaを書いてみようと思います。エンジニアになって2カ月と、未熟なので間違ったことを書いてしまうこともあるかと思いますが、その時はご指摘お願いします。

### 概要
普段、業務でLaravelを使うことが多いので、今回はlaradockを使いdokcer+Laravel×MySQL×nginxの環境を構築していきたいと思います。

###必要なものリスト
- Docker for mac
- Git 

### 設定
使用するディレクトリの作成、移動

```
$ mkdir project
$ cd project
```

laradockをクローン

```
$ git clone https://github.com/LaraDock/laradock.git
```

laravelを配置するフォルダ作成　

```
$ mkdir src
```

projectの最終的なディレクトリ構成

```
├── laradock
└── src 
```

クローンしたlaradockに移動

```
cd laradock
```
サンプルの環境設定ファイルをコピーして、laradockの環境設定ファイル作成

```
$ cp env-example .env
```

srcフォルダ配下にLaravelをインストールするので、パスを下記のように修正します。

```
### Paths #################################################

# Point to the path of your applications code on your host
APP_CODE_PATH_HOST=../src/
```
###dockerコンテナ起動

下記のコマンドでウェブサーバー(nginx)とデータベースサーバー(mysql)のコンテナ起動

```
$ docker-compose up -d nginx mysql
```

成功すれば下記のようになり

```bash
Creating laradock_mysql_1            ... done
Creating laradock_docker-in-docker_1 ... done
Creating laradock_workspace_1        ... done
Creating laradock_php-fpm_1          ... done
Creating laradock_nginx_1            ... done
```

localhostで接続するとウェブサーバー(nginx)が起動している事がわかります。
![スクリーンショット 2019-06-23 17.44.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379873/7fc53086-d4ce-d3bd-26ad-e32095f14bac.png)

docker-composeコマンドを使い Docker コンテナ上の複数のサービスを管理します。

psは表示はコンテナ一覧を表示できます。

```
$ docker-compose ps
```
下記のようにstateがupになっていればコンテナが立ち上がっている状態です。
![スクリーンショット 2019-06-23 17.16.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379873/e7d9ddd0-d450-7560-1278-2681f6e2283d.png)

###mysqlコンテナ接続

Laradockは、現在(2019/6)では、デフォルトがmysql 8系で、認証方式がLaravel側でサポートされていないため、認証に失敗してしまいます。

なので、Laradockの下記のコマンドでmysqlコンテナに接続し、mysqlの認証方式を変更します。

デフォルトのユーザ情報

* user: default
* password: secret

```
$ docker-compose exec mysql bash
# mysql -u default -psecret
```

認証方式変更

```
mysql> alter user 'default'@'%' identified with mysql_native_password by 'secret';
Query OK, 0 rows affected (0.01 sec)
```

### Laravelのインストール

workspaceコンテナに接続します。

```
$ docker-compose exec workspace bash
```

パッケージの更新

```
$ apt-get update
```

workspaceコンテナ内では、composerコマンドが使えるようになっているので、これを使用してlaravelをインストール

```
root@c3cb5c10e656:/var/www# composer create-project --prefer-dist laravel/laravel ./
```
上記コマンド実行後、「Do not run Composer as root/super user! See https://getcomposer.org/root for details」と警告が出ますが、composerコマンドをrootユーザで実行した事が原因です。本来はセキュリティ上良くないですが、インストールは出来るので今回はします。

インストール終了後、localhostに接続するとlaravelが立ち上がっています。
![スクリーンショット 2019-06-23 18.04.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379873/0bc9a1f7-557b-0b4b-7129-9d23ba0a7072.png)

### mysqlへ接続

.envファイル編集(Laradockの.envファイルとは別です)

下記の値に変更

```
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=default
DB_USERNAME=default
DB_PASSWORD=secret
```

最後にDBがちゃんと接続されているかlaravelのartisanコマンドでデフォルトのマイグレーションファイルを実行する

```
root@c3cb5c10e656:/var/www# php artisan migrate
```



以上で環境を構築することができました。
次回は、laravelでreactを使えるように、まとめたいと思います。
【初心者】GitHub Pagesでポートフォリオを公開してみた


[未来電子テクノロジー](https://www.miraidenshi-tech.jp/)でインターンをしているto-fu16です。
今回はポートフォリオを公開する方法をプログラミング初心者でも分かるように簡単にまとめたいと思います。

##１．GitHub のアカウントを作る！
まずは以下のURLにアクセスしてアカウントを作成して下さい。
https://github.com/
有料プランもありますが、無料のプランで十分です。

##２．新しいレポジトリを作成
GitHubで**New repository**をクリック。
名前をテキトーに付けたら**Create repository**をクリック。

##３．リポジトリをローカルにクローン
**クローン**とはGitHubで作成したリポジトリやリポジトリのフォルダを自分のパソコンにコピーすることです。
クローンするには、コマンドを打ち込む方法と**GitHubのデスクトップ版ソフト**を使う方法があります。
初心者の方にはデスクトップ版がおすすめです。

####GitHubのデスクトップ版ソフトをダウンロード
リポジトリを作成した後に現れた画面で、「**Set up in Desktop**」をクリック。
ダウンロードが完了したらソフトを立ち上げ、左上の「＋」から「clone」を選び、作成したリポジトリをクローンします。

##４．ローカルファイルをコピー&ペースト
クローンをしたことでローカルファイルのドキュメントに**GitHub**というフォルダが出来ています。
その中に先ほど作成したレポジトリの名前のフォルダがあるので、ローカルで作ったHTMLなどのファイルをコピペしましょう。
そのさいHTMLファイルは**index.html**という名前に変更しておいてください。

##５．ファイルをコミット
**コミット**とは、ローカルでのファイルやフォルダの変更をリポジトリに記録することです。
デスクトップ版ソフトを開くとコピペしたファイルが表示されているため、チェックを付け「**Commit to master**」をクリック。
右上の「**Publish**」ボタンが「**Sync**」に変わるので、クリックしてリポジトリと内容を同期します。

##６．ソースをマスターブランチに変更
GitHubのレポジトリのページを開き、**Setting**に移動します。
下の方の「**GitHub Pages**」という項目の「**Source**」が最初は**None**に設定されているため、**master branch**に変更しセーブします。
これでウェブページの公開は完了しました！
実際に公開されているリンクは「**GitHub Pages**」の項目に記載されているため確認してみましょう。

###参考記事
>https://qiita.com/sota_mikami/items/c6038cf13fd84b519a61
>https://ferret-plus.com/5875
6/23 progate rails メモ

viewで使う変数はaction で

Railsでは、データベースに反映されていないマイグレーションファイルが存在する状態で、どこかのページにアクセスすると以下のようなマイグレーションエラーが発生してしまいます。そのため、マイグレーションファイルを作成した場合は必ず「rails db:migrate」を実行する必要があります。

新しい投稿には　ルーティング、アクション、ビューの三つが必要

入力データを受け取るためのparamsはURLからidの値を取得するときにも使いました。
paramsは以下の2通りの使い方があるので、整理して覚えておきましょう。
①「:○○」を使ったルーティングのURLから値を取得する
②「name="○○"」が付いたフォームの入力内容を受け取る
誰でもできる！Blenderで髪の毛のモデリング

## はじめに
今回はBlenderで髪の毛を簡単に作る方法を紹介したいと思います。

予備知識はBlenderの基本操作ができることだけです！

## 髪の毛の作り方はいろいろ

「Blender 髪の毛」などで検索するといろいろな髪の毛の作り方が出てくると思います。
UV球を使う方法や面をぺたぺた張っていく方法などがよく見ますね。

今回はベジェを使って毛束を量産してく作り方をご紹介します。
メリットは形をきれいに作りやすいこと
デメリットは気を付けないとポリゴン数が増えすぎてしまうことです。

## ベジェで作る
では早速作っていきましょう。

まずオブジェクト追加からBezierとCircleを追加しましょう。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201127/0b3bfd3e-fe40-cad6-7577-dc6f2d721708.png)

Bezierの方は複製して2つにしておきます。
![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201127/85bdb2ea-0715-2bc0-f18c-da582157ae64.png)

どちらか片方のBezierを選択状態にして画面右のBezierメニューを確認しましょう。
BevelとTaperというオブジェクトを追加できる箇所があると思います。
![33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201127/f82fac95-8924-40e4-92f9-a3a7e9142336.png)

Bevelオブジェクトの方にCircleを選択しましょう。
すると画像のような変化があると思います。

これで断面がCircleの形と同じになります。
![44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201127/243637a2-95a0-7d9b-b720-a0cf7b96b914.png)


次にTaperの方にもう一つのBezierを選択しましょう。
Taperを設定することで太さを変えられるようになります。

ここまでやるとだいぶ毛束感が出てきたかと思います。
あとは好みの毛束に整えていきましょう。
![55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201127/b160e5ab-272f-b5f6-2029-5a2d58d0389e.png)

Circleを小さくして細くしたり

![66.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201127/9e0a262a-1277-9384-20de-716562aa4884.png)

Bezierを編集モードにして太さを変えたり

![77.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201127/923b8ee9-6b07-cb24-3c4b-cec213e175e2.png)
![88.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201127/8d9642fa-7bde-b951-656f-98dc1ce19b76.png)


そうしていい感じの毛束ができたら頭に張り付けていきます。
あとはこれを複製したりして髪の毛全体を作っていきます。

![99.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201127/42ef4e77-04ae-1f19-d5d9-75f3316682eb.png)


納得のいく髪型ができたら最後にConvertを忘れないようにしましょう。
こうすることで編集モードにしたときに頂点や面が選択できるようになります。
![111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201127/e2395ee8-d6fc-235b-327b-fa7ebbf3ed95.png)
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201127/c77c4cc0-6cac-c2a0-9123-f07e7587c214.png)


## まとめ
モデリングに決まった正解はありませんのでその時作っているキャラなどに合わせて作り方を変えてみると良いでしょう。
今回ご紹介した手法も一例にすぎません。

自由な発想で楽しくモデリングをしましょう！
docker-composeコマンドでCredentials store errorが出たときの対処法

## 環境
OS: macOS Mojave 10.14.5
Docker DeskTop: 2.0.0.3（Engine: 18.09.2、Compose: 1.23.2、Credential Helper: 0.6.0）

## エラーが出たコマンドとエラーメッセージ

```
$ docker-compose build
Building app # app はdocker-compose.ymlに書かれたサービスの名前
Traceback (most recent call last):
  File "site-packages/dockerpycreds/store.py", line 74, in _execute
  File "subprocess.py", line 336, in check_output
  File "subprocess.py", line 418, in run
subprocess.CalledProcessError: Command '['/usr/local/bin/docker-credential-osxkeychain', 'get']' returned non-zero exit status 1.

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "site-packages/docker/auth.py", line 129, in _resolve_authconfig_credstore
  File "site-packages/dockerpycreds/store.py", line 35, in get
  File "site-packages/dockerpycreds/store.py", line 87, in _execute
dockerpycreds.errors.StoreError: Credentials store docker-credential-osxkeychain exited with "The user name or passphrase you entered is not correct.".

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "docker-compose", line 6, in <module>
  File "compose/cli/main.py", line 71, in main
  File "compose/cli/main.py", line 127, in perform_command
  File "compose/cli/main.py", line 287, in build
  File "compose/project.py", line 384, in build
  File "compose/project.py", line 366, in build_service
  File "compose/service.py", line 1082, in build
  File "site-packages/docker/api/build.py", line 251, in build
  File "site-packages/docker/api/build.py", line 307, in _set_auth_headers
  File "site-packages/docker/auth.py", line 96, in resolve_authconfig
  File "site-packages/docker/auth.py", line 146, in _resolve_authconfig_credstore
docker.errors.DockerException: Credentials store error: StoreError('Credentials store docker-credential-osxkeychain exited with "The user name or passphrase you entered is not correct.".',)
[66421] Failed to execute script docker-compose
```

## 解決方法

下記を順番に試す。

1. ターミナルで`security unlock-keychain`コマンドを実行、キーチェーンのパスワード（デフォルトではMacにログインするときのパスワード）を入力する。成功すると何も表示されない。失敗すると以下のようにエラーメッセージが表示される。

```
$ security unlock-keychain
password to unlock default: [キーチェーンのパスワード]
security: SecKeychainUnlock <NULL>: The user name or passphrase you entered is not correct.
```

2. メニューバーのDockerアイコン > Preferences... > Securely store docker logins in macOS keychain のチェックを外す
 
3. Macを再起動する（自分はこれで直った）

## 参考
[Credentials store docker-credential-osxkeychain exited with "User interaction is not allowed." - GitHub](https://github.com/docker/docker-credential-helpers/issues/82)
AtCoder Beginner Contest 129 D lamp

 
[AtCoder Beginner Contest 129 lamp](https://atcoder.jp/contests/abc129/tasks/abc129_d)

D問題のlampを解いてみた。


- 上下左右でそれぞれの地点から障害物もしくは端にぶつかるまでの距離を算出し、行列化する。
- 距離の計算は、行または列の番号を+1するとともに距離の数値を+1、障害物にぶつかった場合値を-1にする処理で求まる。障害物があるグリッドの値を便宜的に-1にしておくと、その次のインクリメントで隣のグリッドの距離の値が0になり、いい感じに。
- 上下左右に1列最初に追加しておき、追加した分のグリッドを-1としておく。
- 二次元配列ははnumpyでやった方がやりやすい。行列どうしを足したり引いたりもnumpyなら簡単。
- 最後に光源を置いているグリッドの分+1する。


```python

# 上下左右の壁までの距離の行列


def max_grid_num():
    raw_input = input().split()
    H = int(raw_input[0])
    W = int(raw_input[1])
    grid_matrix = raw_input[2:]
    from_up_range = (range(1, H+1), range(1, W+1))
    from_low_range = (range(H, 0, -1), range(1, W+1))
    from_left_range = (range(1, H+1), range(1, W+1))
    from_right_range = (range(1, H+1), range(W, 0, -1))
    cumsum_matrix = np.zeros((H+2, W+2))
    for (y_range, x_range), (before_y, before_x) in ((from_up_range, (-1, 0)), (from_low_range, (1, 0)),
            ((from_left_range), (0, -1)), (from_right_range, (0, 1))):
        each_num_matrix = np.full((H+2, W+2), -1)
        for y in y_range:
            for x in x_range:
                if grid_matrix[y-1][x-1] == '#':
                    each_num_matrix[y][x] = -1
                else:
                    each_num_matrix[y][x] = each_num_matrix[y+before_y][x+before_x] +1
        cumsum_matrix += each_num_matrix
    return int(cumsum_matrix.max()+1)

```

こうした方がいい、というのあったらアドバイスお願いします！
転職ドラフトで転職したお話

こちらの記事は転職ドラフト体験談投稿キャンペーンに参加しています
https://job-draft.jp/articles/251

## 転職ドラフトに登録したきっかけ
転職ドラフトに登録する前に、転職エージェント経由でベンチャーからSI系の会社に転職しました。
実際に入社してみると、内定時に提示された待遇と実際の待遇が異なっていたり、人事関係の手続きで会社側が間違えたりと入社直後からあんまり良い印象がない会社でした。
業務内容に関しても、面談時に話されていた内容はかけ離れており、自身のキャリアに対してプラスにならないと思い転職を考えました。
転職活動を始めた時はドラフトではなく、別の転職エージェントに登録をして転職活動を行なっていましたが、どこの会社も前職の待遇を考慮して決めているため、条件的にはどこも変わりませんでした。
そこで自身の市場価値を知りたいというのも含めて転職ドラフトに登録しました。

転職エージェントに提出したレジュメをそのまま登録したところ、一度審査でNGになりましたが、修正ポイントを教えてくれたので、そのポイントを修正して無事に審査を通過しました。
審査でNGになった時は心が折れかけましたが、修正ポイントが具体的だったので、対応しやすかったです。

## 転職ドラフトでの指名状況
数社から指名を頂く事ができました。
指名時に思った事として、レジュメ以外にも野望とかの項目があるので、どういった事をやりたいのかをしっかり書くと指名されやすい気がしました。
また、指名された条件も前職の待遇より良い条件が多かったです。

## 面接で感じたこと
予めレジュメを読んでくれていたのもあり、面接というより面談に近い感じでカジュアルな雰囲気で面接ができました。
選考のスケジュールに関してもこちらの都合を考慮してくれて、夜間の対応等をしてくれたり、非常に助かりました。
また、エージェント経由で受けた会社よりも、入社に何をやるのかははっきりとしていると思いました。

## 転職ドラフトを使ったことがない方へのメッセージ
自身のスキルが所属している会社以外でどういった価値があるかというのは知っておいて損はないですし、指名する側も必要な人材を指名するので転職エージェント経由で転職活動するよりは、ミスマッチが少ないのではと思います。
エージェン経由ではどうしてもエージェンの都合も入ってくるので、転職活動する時は登録してみるのをお勧めします。
審査があるからというので躊躇するのは勿体ないので、とりあえずやってみる感じで自分は登録しました。
React.js 学習メモ　第7回

最近Reactの勉強を始めたので、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

#Reactは『はやい』
仮想DOM（virutual DOM）
実際のDOMと対になる仮のDOMのことで、DOMよりもはやく作れるように設計されています。

Reactでは、情報を受け取ってもすぐにDOMを作らずに、仮想DOM（virutual DOM）を作ります。そして、変更前の仮想DOMと変更後の仮想DOMを比較し、変更のあった箇所だけDOMを再構築し常に最小のコストでWebページをレンダリングできるようになり、非常に高速に動作します。

>しかし、もちろんReactが常に万能なわけではないようです。
複雑で動的なアプリほど向いているけど、HTMLが主役で動的な要素が少ないサイトや1日でコーディングが終わるようなサイトは、jQueryで特に困りません。大雑把ですが、作ろうとしているものが「記事（HTMLが9でJavaScriptが1）」なのか「アプリ（HTMLが1でJavaScriptが9）」なのかで分けるという指針でいいと思います。もちろんReactが向いているのは後者。普段の仕事内容によって「もう一生jQuery要らない」って人もいれば「一生jQueryしか要らない」って人もいていいと思います。 

#Reactにおけるトランスパイラーの役割
ReactではBabelというトランスパイラーがJSXを暗黙的にJavaScriptに変換してくれています。
詳しい内容はこの記事↓

[Reactにおけるトランスパイラー【Babel】の役割](https://qiita.com/micropig3402/items/064394428791144f5488)

#ReactにおけるComponentとは
Componentを一言で表すと『再利用可能なUI部品』となります。
そしてこのComponentには以下の２個がある。

1. Class Component
2. [Functional Component](https://qiita.com/micropig3402/items/eeca09b74b2904613ad6)

#Reactにおける『props』
propsとはComponentの属性のことです。
props.nameやprops.pageなどあるデータの属性に関して参照できるもののことを言います。
文字列、数値、配列、オブジェクト、関数などなんでも使用することができ、基本的には{}で括ってpropsを渡していきます。

>Reactには仮想DOMが存在しており、その中でどのDOMが変更になったのか管理し、変更点のみを実際のDOMに反映していくという仕組みがあります。したがって、どのDOMが変更になったかを指し示すためにオリジナルのKeyというものが必要になります。ここではmapを使うことで得られるindexをKeyにすることでDOMの管理を行なっております。

#振り返り
今回は個人的にReactの各項目で重要だと感じた事をまとめた物になります。
JavascriptのgetElement, getSelect系メソッドの用法について


#記事の目的
javascriptのgetElement, getSelect系メソッドの用法についてまとめ




##querySelector
※elemは任意の要素
document以外の任意の要素にも使える。

document.querySelector ⭕️
elem.querySelector  　 ⭕️

##querySelectorAll

document以外の任意の要素にも使える。

document.querySelectorAll ⭕️
elem.querySelectorAll  　 ⭕️


##getElementById
document以外の要素には使えない。

document.getElementById ⭕️
elem.getElementById  　 ❌

##getElementByName

document以外の要素には使えない。

document.getElementByName ⭕️
elem.getElementById  　 ❌

##getElementByTagName

document以外の任意の要素にも使える。

document.getElementByTagName ⭕️
elem.getElementByTagName　 ⭕️

##getElementByClassName

document以外の任意の要素にも使える。


document.getElementByClassName ⭕️
elem.getElementByClassName　 ⭕️


##LiveCollection(動的配列)について
全ての"getElementsBy~"系のメソッド(getElememtsByName, getElementsByClassName, getElementsByTagName)は動的配列を返す。
つまり常に、webページのその時点での状態を反映し、変更されたら自動的に配列が更新される。

以下に動的配列の例を示す。

```html
<div>First div</div> ...①

<script>
  //<div>要素を含んだ配列への参照を作成。
  let divs = document.getElementsByTagName('div');　...②
  //現時点でdiv要素は①しかないので②の要素数は１
  alert(divs.length); // 1
</script>

<div>Second div</div>　...③

<script>
  //③が追加されたので、②要素数は2
  alert(divs.length); // 2
</script>
```

対照的に、"querySelectorAll"は静的配列を返す。つまり要素数が固定された配列を返す。

以下に静的配列の例を示す。

```html
<div>First div</div>...①

<script>
   //<div>要素を含んだ配列への参照を作成。
  let divs = document.querySelectorAll('div'); ...②
  //現時点でdiv要素は①しかないので②の要素数は１
  alert(divs.length); // 1
</script>

<div>Second div</div> ...③

<script>
  //②の要素数は固定されているので、③が追加されても要素数は1
  alert(divs.length); // 1
</script>

```

##参考webページ
https://javascript.info/searching-elements-dom
Pythonで素数日を求める

# パクリ元
[Pythonで「素数日」を求めたら処理が長すぎて日が暮れそうになった](https://qiita.com/yukid/items/3bb121e151903666a37e)
素数日っていうのを初めて聞いて面白かったので自分でもやってみる。

# コード
素数を求める方法はいろいろあるけど、僕が知っている中で一番早そうな[エラトステネスの篩](https://ja.wikipedia.org/wiki/%E3%82%A8%E3%83%A9%E3%83%88%E3%82%B9%E3%83%86%E3%83%8D%E3%82%B9%E3%81%AE%E7%AF%A9)を使った。
$N$までの数値を素数判定したいのなら、$\sqrt{N}$までの素数を一回数え上げれば十分である。

```prime.py
from math import sqrt, ceil
from itertools import count, takewhile
import datetime
from datetime import date

# maxの素数判定に必要な素数を数え上げる
def sieve(max):
    c = ceil(sqrt(max))
    s = [2]
    yield 2
    for n in range(3, c, 2):
        for m in s:
            if n % m == 0:
                break
            if n < m * m:
                s.append(n)
                yield n
                break
        else:
            s.append(n)
            yield n

# 素数のリストsieveを使ってnが素数か判定する
def is_prime(n, sieve):
    for m in sieve:
        if n % m == 0:
            return False
    else:
        return True

# [begin, end)の範囲の日付の数値表現のリストを求める
def daynum(begin, end):
    days = (begin + datetime.timedelta(days=i) for i in count())
    days = takewhile(lambda d: d < end, days)
    return [int(d.strftime('%Y%m%d')) for d in days]

def prime_days(begin, end):
    ns = daynum(begin, end) 
    si = list(sieve(ns[-1]))
    return (d for d in ns if is_prime(d, si))

def main():
    from datetime import date
    for d in prime_days(date(2019, 1, 1), date(2119, 1, 1)): # 2019/01/01 ～ 2119/01/01
        print(d)

if __name__ == "__main__":
    from timeit import timeit
    import sys
    print(timeit(main, number=1), file=sys.stderr)

```

# 結果
100年分計算しても1秒かからなかった。

``` sh
$ python ./prim.py > out.txt
0.3709903
```

素数日はこんな感じ。100年で2205日だった。
次の素数日は2019/07/19らしい。

``` out.txt
20190221
20190227
20190301
20190319
20190323

……

21181003
21181007
21181103
21181109
21181117
```


# 追記 (2019/06/27)
なんか改めて見るとワチャワチャしててもっと簡単に書けそうだったので書き直した。
要するにフィボナッチ数列と同じで同じ計算を二回しなければいいんだろ、という発想で`lru_cache`を使ってメモ化した。

``` memo.py
from math import sqrt, ceil
from itertools import count, takewhile
import datetime
from functools import lru_cache

def daynum(begin, end):
    days = (begin + datetime.timedelta(days=i) for i in count())
    days = takewhile(lambda d: d < end, days)
    return [int(d.strftime('%Y%m%d')) for d in days]

def prime_days(begin, end):
    ns = daynum(begin, end) 
    return (d for d in ns if is_prime_memo(d))

@lru_cache(maxsize=None)
def is_prime_memo(n):
    if n == 2:
        True
    if n % 2 == 0:
        return False
    for m in range(3, ceil(sqrt(n)), 2):
        if not is_prime_memo(m):
            continue
        if n % m == 0:
            return False
    else:
        return True

def main():
    from datetime import date
    for d in prime_days(date(2019, 1, 1), date(2119, 1, 1)):
        print(d)

if __name__ == "__main__":
    from timeit import timeit
    import sys
    print(timeit(main, number=1), file=sys.stderr)
```

思った以上に遅くなってしまった。
割る数を二乗してるループの終了判定が足をひっぱてるんじゃないかと思う。
まあでもこっちのほうがきれいに書けてるし一般的だよね。

``` sh
$ python ./prim.py > out.txt
2.1147849
```
テキストボックスの内容をツイートしたい


初めてWebページを作ってみました。

試合の速報をツイートで行う学校が多く、ミスなく簡単に呟けたらいいなと思い作成しました
http://www.greeeeeeeen.com/sokuhou/sokuhoumaker.html
この時にツイートページにテキスト内容を反映するのに苦労したので記録します

直接ツイートするのはAPIなどで少し難しそうだったので、
まずはツイート内容をテキストボックスに反映して、それをツイートページに乗せることを考えました

##利用したツイートボタン設置のコード
```html
<a href="http://twitter.com/share?text=[ツイートする内容]" target="_blank">tweet</a>
```
検索してこちらを利用したのですが、__改行ができない__ので非常に困っていました。
そこで改行コード「%0D%0A」が改行を反映する時に使われていることに気づき、以下の様に作成してみました

__HTML__

```html
            <textarea id = "tweetBox"
                      placeholder="ここにツイート内容が出ます"
                      name="tweet_box"
                      onkeyup="GetTweet(value)"
                      cols="40"
                      rows="8"></textarea>
       		<span id = "TWEET">
				<a class="button" href="https://twitter.com/intent/tweet?text=" target="_blank" >Tweet</a>
			</span>
```
__JavaScript__

```js
function GetTweet(str,code){
  　var target = document.getElementById("HELLO");
  var text_all = document.getElementById("tweetBox");
  var input_data = text_all.value.replace(/\r?\n/g, '%0D%0A');
  TWEET.innerHTML =　'<a class="button" href="https://twitter.com/intent/tweet?text=' + input_data + '" target="_blank">Tweet</a>'
```

文字を打つごとにテキストがツイートページに反映されるようにURLを変更しているのですが
その時に改行である\r、\nを全て「%0D%0A」に変換することで改行した内容もツイートページに反映できるようになりました
Rails チュートリアルの要件を満たす最低限のdocker

# 概要
https://docs.docker.com/compose/rails/
上記サイトのdocker設定にRailsチュートリアルで必要な追加項目をメモします。
※Railsチュートリアルhttps://railstutorial.jp/chapters/account_activation?version=5.1

##追加項目
**1**  postgresのパスワード  

```docker-compose.yml
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
```

**2** チュートリアル第１０章docker-compose上のRailsでデバッグ(debugger)用

```docker-compose.yml
  web:
    stdin_open: true
    tty: true
```
※デバッグ方法
`$ docker attach コンテナ名`で待ち受け

**3** チュートリアル第１３章のImageMagicインストール

```:Dockerfile
RUN apt-get update -qq && apt-get install -y nodejs postgresql-client imagemagick
```

## 修正後のファイル

```docker-compose.yml
version: '3'
services:
  db:
    image: postgres
    volumes:
      - ./tmp/db:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
    ports:
      - '5433:5432'
  web:
    stdin_open: true
    tty: true
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db
```  

```:Dockerfile  
FROM ruby:2.5
RUN apt-get update -qq && apt-get install -y nodejs postgresql-client imagemagick
RUN mkdir /myapp
WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
COPY . /myapp

# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]
```
Ruby on Rails [学習記録-第16章-] カラムの追加/削除

#rails generate migrationコマンド
* テーブルにカラムを追加したり、削除するようなテーブルの構造を変えたいときもマイグレーションファイルを作成する。
* rails generate migrationに続けてクラス名を指定。

```bash:
$ bundle exec rails g migration AddRateToProducts
  # => マイグレーションファイルの作成
```
* メソッドchangeの中にテーブル構造の変更を書く。

```rb:
class AddRateToProducts < ActiveRecord::Migration[5.2]
  def change
  end
end
```

#add_column
* add_columnをマイグレーションファイルのchangeメソッド内に書くとカラムの追加ができる。

```rb:
add_column :テーブル名, :カラム名, :カラムの型
```
* 例としてBooksテーブルにInteger型のカラムpriceを追加する際は以下のように書く。

```rb:
class AddPriceToBooks < ActiveRecord::Migration[5.2]
  def change
    add_column :books, :price, :integer
  end
end
```
#remove_column
* 同様にカラムの削除は`remove_column`で行う。

```
remove_column :テーブル名, :カラム名, :カラムの型
```

#テーブルへ反映
* マイグレーションファイルに書いたテーブルの変更内容をテーブルに反映させるにはターミナルでrake db:migrateコマンドを実行。
GitHubから脆弱性のアラートが来たのでメモ

railsをいじっていて、ソースをプッシュしたらGitHubからアラート＆セキュリティ警告のメールが来た。とりあえずググって参考記事を見つける。
### 参考記事
[GitHubからセキュリティ警告のメールが来た](https://qiita.com/tamakory/items/471333d3dd2c9e935949)
[Githubから脆弱性を指摘されたのでメモ](https://qiita.com/simp338/items/8ae5089fe2c1108defb1)


```:メール
Known moderate severity security vulnerability detected in 
bootstrap-sass >= 3.0.0, < 3.4.1 defined in Gemfile.lock.
Gemfile.lock update suggested: bootstrap-sass ~> 3.4.1. 
We found potential security vulnerabilities in your dependencies.
```
脆弱性があるからバージョンアップしろとのこと。
とりあえず提案されたバージョンでGemfileを修正。

```ruby:Gemfile
gem 'bootstrap-sass', '3.4.1'
```
`bundle update`をするとアラートが消えました。
【SQL】IndexScanしたいのに、SeqScanになってしまうのは何故か

# 経緯
"完了"・"着手中"・"未着手"という３つのステータスをテーブルに設定し、いずれかのステータスを検索して絞ったテーブルを表示をするプログラムを作っておりました。
データ量が多くなった時の検索時間を短くするために、ステータスカラムにIndexを付与したのですが、どう検索してもフルスキャンになってしまいました。

# 結論
検索対象のデータ量に対し、約10％以下まで絞り込めるのであれば、IndexScanされる。
検索結果のデータ量が多すぎると、SeqScanになる。
　・他にもIndexScanの条件はありますが、それだけで記事になると思います。
　　もし同じ現象で悩まれている方の、１つの参考になればと思います。
　　私が今回の問題にあたり、参考にさせて頂きましたリンク先を末尾に記載します。

# IndexScanになるパターンとSeqScanになるパターンの実験
◆10,000データ用意
　Stateカラム
　“完了” = 1,000件
　“着手中” = 2,000件
　“未着手” = 7,000件

◆実施結果
　“完了” → Index Scan
　“着手中” → Seq Scan
　“未着手” → Seq Scan

◆explainメソッドにて実行計画の確認
・完全一致と前方一致以外だと、IndexScanがされないそうなので、今回は完全一致にて実験しました。
　今回はRansakというGemを使って、検索を行っています。

”完了”で検索(1,000 / 10,000件)

```rb
[1] pry(#<TasksController>)> @q.result(distinct: true).explain
  Task Load (3.8ms)  SELECT DISTINCT "tasks".* FROM "tasks" WHERE "tasks"."state" = '完了'
  ↳ (pry):1
=> EXPLAIN for: SELECT DISTINCT "tasks".* FROM "tasks" WHERE "tasks"."state" = '完了'
                                          QUERY PLAN
-----------------------------------------------------------------------------------------------
 Unique  (cost=4.31..4.33 rows=1 width=71)
   ->  Sort  (cost=4.31..4.32 rows=1 width=71)
         Sort Key: id, subject, content, created_at, updated_at, expired_at
         ->  Index Scan using index_tasks_on_state on tasks  (cost=0.29..4.30 rows=1 width=71)
               Index Cond: ((state)::text = '完了'::text)
(5 rows)
```

”着手中”で検索(2,000 / 10,000件)

```rb
[1] pry(#<TasksController>)> @q.result(distinct: true).explain
  Task Load (9.3ms)  SELECT DISTINCT "tasks".* FROM "tasks" WHERE "tasks"."state" = '着手中'
  ↳ (pry):2
=> EXPLAIN for: SELECT DISTINCT "tasks".* FROM "tasks" WHERE "tasks"."state" = '着手中'
                                  QUERY PLAN
------------------------------------------------------------------------------
 HashAggregate  (cost=305.00..325.00 rows=2000 width=70)
   Group Key: id, subject, content, created_at, updated_at, expired_at, state
   ->  Seq Scan on tasks  (cost=0.00..270.00 rows=2000 width=70)
         Filter: ((state)::text = '着手中'::text)
(4 rows)
```

”未着手”で検索(7,000 / 10,000件)

```rb
[1] pry(#<TasksController>)> @q.result(distinct: true).explain
  Task Load (21.2ms)  SELECT DISTINCT "tasks".* FROM "tasks" WHERE "tasks"."state" = '未着手'
  ↳ (pry):3
=> EXPLAIN for: SELECT DISTINCT "tasks".* FROM "tasks" WHERE "tasks"."state" = '未着手'
                                  QUERY PLAN
------------------------------------------------------------------------------
 HashAggregate  (cost=392.50..462.50 rows=7000 width=70)
   Group Key: id, subject, content, created_at, updated_at, expired_at, state
   ->  Seq Scan on tasks  (cost=0.00..270.00 rows=7000 width=70)
         Filter: ((state)::text = '未着手'::text)
(4 rows)
```

# 参考リンク

【PostgreSQL】インデックス必要？explainで確認できない
https://qiita.com/gijutu/items/45c488372714eeaf6157

Railsエンジニアなら知っておきたい！RDBでindex作成を検討するときってどんなとき？
https://qiita.com/viptakechan/items/03cb15684fdace0b5bbe
nuxtでdotenvを使ってハマる

[firebase nuxt heroku rails で作成中](https://qiita.com/hp_kj/items/9d8c1f86f34cac882af0)

---
https://qiita.com/kai_kou/items/4eb83f92296a7311fe39
>template内で{{process.env.HOGE}} としてもエラーになるのでご注意ください。

templateをlayoutsのことだと勘違いしていた。
そのため、

```vue

<template>
  {{process.env.HOGE}}
</template>
```

と書いてた。正解としては、上のQiitaのように\<script>\</script>内に定義して、それを使う。

template内というのが、\<template>内と書いてあるとわかりやすいのだろうかと思った。

----
nuxtにはlayoutsディレクトリがあり、そこにあるファイルがテンプレートとして使える。
https://nuxtjs.org/examples/layouts/
Vagrantfile で provision に docker を設定すると Warning: Authentication failure. Retrying... になる

# やりたいこと

vagrantでdocker-composeの環境を導入する

※事前に下記のコマンドが必要です

```terminal
vagrant plugin install vagrant-docker-compose
```

# 失敗状況の再現

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

Vagrant.configure("2") do |config|
  config.vm.box = "bento/ubuntu-16.04"

  config.vm.provision "docker"
  config.vm.provision "docker_compose"

  config.vm.network "forwarded_port", guest: 80, host: 8080
  config.vm.synced_folder "data/", "/home/vagrant/", create: true
end
```

上記のVagrantfileで`vagrant up`をすると、

```terminal
==> default: Running provisioner: docker...
    default: Installing Docker onto machine...
    default: Warning: Authentication failure. Retrying...
Guest-specific operations were attempted on a machine that is not
ready for guest communication. This should not happen and a bug
should be reported.
```

となってしまい、docker-composeのインストールができなくなってしまいます。

# 解決策

```ruby:Vagrantfile
# synced_folderにホームディレクトリを指定
config.vm.synced_folder "data/", "/home/vagrant/", create: true
```

上記のように、**同期元のフォルダにホームディレクトリを指定している**ことが原因だとわかりました。

```ruby:Vagrantfile
# synced_folderにホームディレクトリを指定
config.vm.synced_folder "data/", "/home/vagrant/shared/", create: true
```

これを回避するためにホームディレクトリ以外のフォルダを指定するとエラーは起きなくなり、docker-composeコマンドも無事にインストールされていることが確認できます。

# 原因不明！

今の所なにが原因で失敗してしまうのかがわかっていません。
もしわかる方がいらっしゃればコメントにてお願いします。
ABC - 130- A&B&C&D

#AtCoder ABC 130 A&B&C&D
[AtCoder - 130](https://atcoder.jp/contests/abc130)

E、Fは近いうちに更新予定

#A - Rounding

```java
	private void solveA() {
		int x = nextInt();
		int a = nextInt();

		out.println(x < a ? 0 : 10);
	}
```

#B - Bounding

```java
	private void solveB() {
		int n = nextInt();
		int x = nextInt();
		int[] wk = IntStream.range(0, n).map(i -> nextInt()).toArray();

		int d = 0;
		//必ずD1=0の時に跳ねるので1から
		int cnt = 1;

		for (int i = 0; i < wk.length; i++) {
			d = d + wk[i];
			if (d <= x) {
				cnt++;
			}
		}

		out.println(cnt);
	}
```

#C - Rectangle Cutting

 - 誤読してた
    - `(x,y) を通る直線で長方形を 2 つの部分に分割`　について、
        - `(x,y)を通る直線は長方形の外周とは直角に交わる` と。(題意としては直角とは限らない)
    - 外周と直角に交わらないのであれば、`長方形の重心を通る形で直線を引く`ことによって`長方形を二等分`にすることが可能（長方形なので）
        - そのため、分割した最大値は元の長方形の面積の半分
        - `(x,y)が重心の時、分割するための直線は複数引くことが可能`
            - むしろ、(x,y)が重心でないのならば直線は一つしか引けない

```java
	private void solveC() {
		double w = nextInt();
		double h = nextInt();
		double x = nextInt();
		double y = nextInt();

		double res = (w * h) / 2;
		String ref = String.format("%.10f", res);
		int bF = 0;
		if (w == 2 * x && h == 2 * y) {
			bF = 1;
		}
		out.println(ref + " " + bF);
	}
```

#D - Enough Array

 - 問題の読み替えができれば簡単になる
    - 「Kを超える組み合わせ」を探すのではなく、「組み合わせの総数から、Kを超えないものの組み合わせを引く」
    - こうすることによって、尺取法でカウントできるようになる
        - 「Kを超える組み合わせ」をカウントする方法もあるとは思うが思いつかなかった

```java
	private void solveD() {
		int n = nextInt();
		long k = nextLong();
		//		int[] wk = IntStream.range(0, n).map(i -> nextInt()).toArray();
		long[] wk = new long[n];
		for (int i = 0; i < n; i++) {
			wk[i] = nextLong();
		}

		long res = 0;
		long total = 0;
		int right = 0;
		/*
		 * 「Kを超える組み合わせ」を数えるのが難しそうなので、
		 * 「全体の組み合わせの数から、Kを超えないものの組み合わせを引く」方針で
		 */
		for (int left = 0; left < n; left++) {
			//totalにwk[right]を加えることができるならright++
			while (right < n && total + wk[right] < k) {
				total += wk[right];
				right++;
			}
			//rightは条件を満たす最大となっている
			res += (right - left);

			if (right == left) {
				right++;
			} else {
				total -= wk[left];
			}

		}

		/*
		 * kとかを無視した組み合わせの総数
		 * 部分列なので n * (n+1)
		 * longへのキャストを忘れるとintになってWA
		 */
		long totalCnt = (long) n * ((long) n + 1L) / 2L;
		out.println(totalCnt - res);
	}
```
おみくじアプリ

##仕様
・ボタンを押すと表示が変わりランダムに（大吉、中吉、小吉（それぞれ画像も））表示される

##学び

###乱数の作り方

```swift
let randomNum = arc4random_uniform(3)
```
これで randomNumに 0, 1, 2 の乱数が作られる。

###画像、文字表示

作ったUIパーツとmain.storybordをつなげる時につけた名前に`.text`や`.image`をつけて値を取得できる

```swift
 self.label.text = "大吉"
 self.image.image =  UIImage(named:"daikichi")!    

 #daikichi.pngをAssets.xcasettsにいれると呼べる
```


これらを組み合わせてボタンを押したときの処理をif文で条件分岐すれば簡単におみくじアプリはできた。
（0のときは大吉で、一の時は中吉で...と）
電子工作初心者がArduinoを使って小型OLEDを動かしてみた

##目的
今回やったことについてまとめていきたいと思います。

当方電子工作初心者なので間違い等ありましたら指摘して頂くと助かります。
##環境
Arduino IDE 1.8.9
ELEGO UNO R3
HiLetgo 0.96" I2C シリアル 128×64 OLED LCDディスプレイSSD1306液晶 STM32/51/MSP430/Arduinoに対応 ホワイト([こちら](https://www.amazon.co.jp/gp/product/B071ZPFDWW/ref=ppx_yo_dt_b_asin_title_o00_s00?ie=UTF8&psc=1)で入手しました)
##やってみた
[こちら](https://kokensha.xyz/arduino/arduino-hiletgo-i2c-128x64-oled-ssd1306/)を参考にさせて頂きました。
Adafruit SSD 1306(1.8.1)とAdafruit GFX Liblary(1.5.5)をライブラリーマネージャでインストール。
ヘッダーファイルの書き換えが必要なので、Adafruit_SSD1306.hの

```Adafruit_SSD1306.h
// ONE of the following three lines must be #defined: 
#define SSD1306_128_64 ///< DEPRECTAED: old way to specify 128x64 screen
//#define SSD1306_128_32   ///< DEPRECATED: old way to specify 128x32 screen
//#define SSD1306_96_16  ///< DEPRECATED: old way to specify 96x16 screen
```
を書き換えました。デフォルトでは128×32の方になっていたので今回使用する方に合わせます。今回のAdafruit_SSD1306.h(1.8.1)ではサンプルプログラムを動かすのにこの部分以外を変更する必要はありませんでした。
次にスケッチ例のサンプルプログラムのssd1306_128x64_i2cを0x3Dから0x3c以下のように書き換える。

```ssd1306_128x64_i2c.ino
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { // Address 0x3D for 128x64
```
この後VCCをArduinoの5V、GNDとGND、SCLとSCL、SDAとSDAをつないでコンパイルしてArduinoに入れると無事に動きました。

##備考
最初サンプルコードの方を書き換えずにコンパイルしてつないだところ液晶は何も起こりませんでした。

##参考にしたサイト
[https://kokensha.xyz/arduino/arduino-hiletgo-i2c-128x64-oled-ssd1306/](https://kokensha.xyz/arduino/arduino-hiletgo-i2c-128x64-oled-ssd1306/)

##変更
6/25タイトルを小型液晶から小型OLEDに書き換えました。
Ansibleトラブルシュート

# 概要
ansibleを使っていてハマった点と、その解決策を残しておく

# 環境
・AWS EC2
・CentOS7
・Ansible2.9.0.dev0

# 対象ホストにつながらない

## 事象
```console
$ ansible -m ping -i inventory/inventory.ini apsv
172.31.3.52 | UNREACHABLE! => {
    "changed": false, 
    "msg": "Failed to connect to the host via ssh: Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).", 
    "unreachable": true
}
```
## 原因
対象サーバで実行サーバの認証に失敗していた。

## 対策
対象サーバにansible実行サーバの公開鍵を配置する。
172.31.3.52は上記コマンドのapsvに該当

```console
$ ssh-copy-id 172.31.3.52
/usr/bin/ssh-copy-id: INFO: Source of key(s) to be installed: "/home/ansible/.ssh/id_rsa.pub"
/usr/bin/ssh-copy-id: INFO: attempting to log in with the new key(s), to filter out any that are already installed
/usr/bin/ssh-copy-id: INFO: 1 key(s) remain to be installed -- if you are prompted now it is to install the new keys
ansible@172.31.3.52's password: 

Number of key(s) added: 1

Now try logging into the machine, with:   "ssh '172.31.3.52'"
and check to make sure that only the key(s) you wanted were added.
```

対象サーバへの処理が成功するようになった。

```console
$ ansible -m ping -i inventory/inventory.ini apsv 
Enter passphrase for key '/home/ansible/.ssh/id_rsa': 
172.31.3.52 | SUCCESS => {
    "ansible_facts": {
        "discovered_interpreter_python": "/usr/bin/python"
    }, 
    "changed": false, 
    "ping": "pong"
}
```
Flutter for WebでReactのアレをやってみる

## はじめに
Flutter for Webが発表されましたね!!
今までモバイルを中心に活躍していたFlutterがWebに進出することになりました :gift:

これでフロントエンド界隈に新たな勢力が出てくることになりますね...

## Reactのアレをやってみよう!
Reactだと、

```bash
create-react-app <アプリ名>
```
とした際にプロジェクトを作成すると、
![react-rotate.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192654/6efb7aea-b798-4f06-f8e3-d8a2f6fa2d51.gif)
のような初期プロジェクトが作成されます。

なんかかっこいい... :thinking:
これをFlutterでできないだろうか...

## とりあえずFlutter for Webをはじめてみる
[GitHub](https://github.com/flutter/flutter_web)に公式が上げてくれたものがあるので、とりあえずそれをCloneします。

### Flutterのバージョン
どうやらFlutterのversionは1.5以上なので、

```bash
flutter --version
```
で確認して、もし古ければ

```bash
flutter upgrade
```
でflutter SDKごとUpgradeします。

### flutter web用の環境設定
```bash
flutter pub global activate webdev
```
でbuild toolを入れていきます。

### プロジェクトを開く
さっきCloneしたもののなかに`examples`ディレクトリがあり、そこに簡単なサンプルがあります。
今回は、[`spinning_square`](https://github.com/flutter/flutter_web/tree/master/examples/spinning_square)をベースにやっていきます。

## コードを書いていく
### packageまわり
プロジェクト内で

```bash
flutter pub upgrade
```
をして、packageの更新を行います。
### 一旦実行してみる

```bash
flutter pub global run webdev
```
を実行すると、http://localhost:8080/#/
で緑色の四角形が回っているのが確認できます。
![flutter_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192654/97d1bfd4-d260-6721-9baf-77809ce7b8b8.gif)

こんなかんじになるはず!! :punch:

### とりあえず、画像をとってくる!
公式のページにリンクがあります!
[これ](https://flutter.dev/brand)です!
そこからロゴをとってきてください

### 画像をプロジェクトに取り込む
[Qiita: Flutter Web: Tips集](https://qiita.com/matsukatsu/items/18fe64661479902bc8f3)
を参考にしました。
ディレクトリは、

```
|--lib
|  |--main.dart
|--.packages
|--pubspec.lock
|--pubspec.yaml
|--web
|  |--index.html
|  |--main.dart
```

このようになっていますが、
`web/assets`に入れるとのことです

### 実際に画像を表示させる
さて、画像も取り込めたのでコード上でロードして表示させましょう。

```lib/main.dart
  @override
  Widget build(BuildContext context) {
    return new RotationTransition(
        turns: _animation,
        child: new Container(
          width: 200.0,
          height: 200.0,
          color: const Color(0xFF00FF00),
        ));
  }
```
という部分がありますが、ここを以下のように変更します。

```lib/main.dart
  @override
  Widget build(BuildContext context) {
    return new RotationTransition(
        turns: _animation,
        child: Image.asset('<ここはファイル名>')
    );
  }
```

他にも、ネットワーク上から画像を取得する、といったことも`Image`を使ってできるようです。
ここまでやると、以下のようにFlutterのロゴが回転します。
![flutter_rotate.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192654/1870ccec-d676-82ea-0f3e-ccac294dba08.gif)

ね、簡単でしょ:question:
### 最後に
[GitHub](https://github.com/daikikojima/flutter-rotate)上にコードを上げてます。
ng s -oコマンド実行時の「spawn cmd ENOENT」エラー対処法

環境変数に<font color="LimeGreen">C:\Windows\System32</font>追加して直りました。

それにしてもどうしたら記事バズるのでしょう（笑）。

<参考>
https://stackoverflow.com/questions/28624686/get-spawn-cmd-enoent-when-try-to-build-cordova-application-event-js85
rbenvからRubyの最新のバージョンをインストールできなかったときやったこと

# rbenvでRubyの最新版をインストールできない！

環境構築系のエラーに慣れてなさすぎて遠回りしてしまったので、自戒をこめてメモ。

今回私の環境には、Rubyの5.3が入っていて比較的新しかったのですが、rbenvでバージョン管理したい！そして最新版使いたい！ということで、こちらの手順に従って作業を進めていました。

[Rails Girls さんのとても親切なサイト](http://railsgirls.jp/install#setup_for_macos)

Homebrew のインストールは終わっていたので、rbenvのインストールから作業をはじめました。rbenvのインストールはつつがなく終わり、あとは任意のRubyのバージョンを指定してインストールしてあげればOK。。。と思いきや、何かがおかしい。

```
$ rbenv install 2.6.3
  ruby-build: definition not found: 2.6.1
```
エラー吐かれたので、インストール可能なリストをよく見てみると、、、

```
$ rbenv install -l
Available versions:
  ...
  2.4.4
  2.4.5
  2.5.0-dev
  2.5.0-preview1
  2.5.0-rc1
  2.5.0
  2.5.1
  2.5.2
  2.5.3
  2.6.0-dev
  2.6.0-preview1
  2.6.0-preview2
  2.6.0-preview3  // ->2.6.3がない！！
  jruby-1.5.6
  jruby-1.6.3
  ...
```
なぜかインストール可能なバージョンが古い。（記事の作成時点での最新は2.6.3）
で、ちょっとググって答えはすぐ見つかったのですが、ググるまでもなかった。

# 解決策は書いてあった！
実は先ほどのインストール失敗のところで、解決策が書いてあったのです。反省。

```
$ rbenv install 2.6.3
  ruby-build: definition not found: 2.6.1

  See all available versions with `rbenv install --list'.
  If the version you need is missing, try upgrading ruby-build:
  cd /Users/user名/.anyenv/envs/rbenv/plugins/ruby-build && git pull && cd -
　// ↑ここに書いてありました
```

もし欲しいバージョンがリストになかったら、ruby-buildのバージョンを上げてね、と。
そしてコマンドまで書いてくれている親切ぶり。なぜ見落としたのか。。。
ということで指示に従ってコマンドポチポチ。

```
$ cd /Users/user名/.anyenv/envs/rbenv/plugins/ruby-build
$ git pull
$ rbenv install -l 
  Available versions:
  ...
  2.5.4
  2.5.5
  2.6.0-dev
  2.6.0-preview1
  2.6.0-preview2
  2.6.0-preview3
  2.6.0-rc1
  2.6.0-rc2
  2.6.0
  2.6.1
  2.6.2
  2.6.3  // ->最新がリストにありました！！
  2.7.0-dev
  2.7.0-preview1
  jruby-1.5.6
  jruby-1.6.3
  ...
```

あとは最新の2.6.3をインストールして、切り替えるだけ！

```
$ rbenv install 2.6.3

$ rbenv versions 
  system
* 2.5.1 (set by /Users/maki_m/.anyenv/envs/rbenv/version)
  2.6.3

$ rbenv global 2.6.3

$ ruby -v                                                                   
  ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-darwin18]
```

終了です！エラーメッセージちゃんと読もう。。。
Djangoでカスタムコマンドを実装してみよう

#きっかけ

コマンド一つでExcelのデータをDBに移してくれたら、docker-compose.ymlとかに処理が書けて楽だよね。

#環境


- macOS 10.14.5
- Django 2.2とかそこらへん

#実装

##1. サブコマンドとなるファイルを作る

以下のような構造でディレクトリとhoge_command.pyを配置

```
.
├── app
│   ├── __init__.py
│   ├── apps.py
│   ├── management
│   │   └── commands
│   │       └── hoge_command.py
│   ├── models.py
│   └── views.py
│ 
そのほかのファイル
```

##2. hoge_command.pyにコマンドの機能を記述

BaseCommand を継承し、以下の関数をオーバーライドすることで実装できる。

```hoge_command.py

from django.core.management import BaseCommand


class Command(BaseCommand):
    help = 'コマンドの説明'

    # コマンドのオプションを実装。必要なければ実装しなくていい。
    def add_arguments(self, parser):
        parser.add_argument('opt1', help='必須オプション')
        parser.add_argument('--opt2', help='任意オプション')

    # コマンドのメイン関数。オプションは options で取得できる。
    def handle(self, *args, **options):
        # この中に好きな処理を書こう！
        self.stdout.write(self.style.SUCCESS('コマンド'))
        self.stdout.write(options.__str__())
```

##3. コマンドを実行してみる

```
$ python manage.py hoge_command
usage: manage.py hoge_command [-h] [--opt2 OPT2] [--version] [-v {0,1,2,3}]
                                 [--settings SETTINGS]
                                 [--pythonpath PYTHONPATH] [--traceback]
                                 [--no-color] [--force-color]
                                 opt1
manage.py hoge_command: error: the following arguments are required: opt1

```

正常(?)にオプション opt1 が必要とエラーが出ますね。
では、opt1 をしっかり渡してあげましょう。

```
$ python manage.py hoge_command abc
コマンド
{'verbosity': 1, 'settings': None, 'pythonpath': None, 'traceback': False, 'no_color': False, 'force_color': False, 'opt1': 'abc', 'opt2': None}
```

いい感じですね。

##4. ヘルプを表示してみる

```
$ python manage.py hoge_command -h
```
で、コマンドの説明とhelpの一覧を見れます。長いので結果は割愛。

# 終わりに

以上、カスタムコマンドの実装でした。
それでは、良いDjangoライフを！

# 参考サイト

[Django カスタムコマンドを実装する](https://leben.mobi/blog/django_command/python/)
[カスタム django-admin コマンドの実装](https://docs.djangoproject.com/ja/2.2/howto/custom-management-commands/)
SQLを書く時の癖が抜けない！！

現場によって、SQLのコーディング規約がマチマチなので、世に出回っている大文字小文字を調べてみました。
あと、私の過去の現場で見てきた書き方も含めて、ご紹介します。

表題の癖は、最後に出てきます（笑）

#SQLを書く時の大文字、小文字
## キーワード（予約語）だけ大文字
```
SELECT 
  test_col
FROM test_tbl
WHERE test_col = '1'
```
これはよく見ます。
オラクルのドキュメントも上記の書き方ですね。
って、言われた記憶があります。

あと、賛否両論あると思いますが、
個人的には、キーワード（予約語）とそれ以外が明確なので、好きです。

## キーワード（予約語）だけ小文字
```
select 
  TEST_COL
from TEST_TBL
where TEST_COL = '1'
```
たまに見かけますね。
オラクルの現場でよく見かけます。
よくよく考えてみると、オラクルのテーブルが大体大文字で作られてるから、
オブジェクトを大文字にしているのかもしれません。

で、キーワード（予約語）を分かり易くするため、小文字にする。
って感じですかね。

## 全部大文字
```
SELECT 
  TEST_COL
FROM TEST_TBL
WHERE TEST_COL = '1'
```
これも過去、見たことありますね。
個人的には、コメントを控えます。

## 全部小文字
```
select 
  test_col
from test_tbl
where test_col = '1'
```
これは過去、見たことなかったです。
全部小文字は、打ちやすそうだなって印象です。

## キーワード（予約語）の頭だけ大文字
```
Select 
  test_col
From test_tbl
Where test_col = '1' 
```
この書き方が、私の癖です。
普段は、現場のコーディング規約にのっとる、もしくは、「キーワード（予約語）だけ大文字」で書きます。
が、突発的な作業でSQLを書くと、「キーワード（予約語）の頭だけ大文字」になり、結構な確率で驚かれます。。
jQuery UI 使い方

<h1>概要</h1>
jQuery UI はインタラクティブなWebサイトを開発するために使用される、jQueryをベースにしたJavaScriptのライブラリである。マウスベースのインタラクションやアニメーション、テーマを適用可能なDialogやDatepickerといったウィジェットが提供される。
\<wikipediaより引用>


<h1>準備</h1>
・jQuery UIのサイトからダウンロード　https://jqueryui.com/
・ダウンロードファイルを使いたいファイルと同じ階層に入れる
・ファイル名を分かりやすく変えておく（"jquery-ui"など）
<h1>使い方</h1>

```html:jquery.html
 <!DOCTYPE html>
<html>
    <head>
        <link href="jquery-ui/jquery-ui.css" rel="stylesheet">
        <style>
            
        </style>
    </head>  
    <body>
       <script src="jquery-3.3.1.min.js"></script>
       <script src="jquery-ui/jquery-ui.js"></script>
    
       <script type="text/javascript">        
       </script>
    
    </body>
</html>
```
jQueryのサイトのDemosから使いたい物を選んでソースファイルを見て実装する。

<h1>結果</h1>
jQuery UIを使用して、様々なインタラクションを実装できる
[Proposal] Let AWS CLI run on Docker container

**This article is an automatic translation of the article[341404aa6792ad4a9980] below.
https://qiita.com/speaktech/items/341404aa6792ad4a9980**

### What I did
The AWS CLI is executed on the Docker container, and only the result is returned to the terminal of the host OS.
By aliasing a series of processes including the Docker command, you can use AWS CLI as if it is running on the terminal of the host OS.

### Benefits
-It is not necessary to install Python, pip, AWS CLI, credentials to the host OS (do not pollute the host OS)
-Containerized, it is possible to distribute the unified AWS CLI environment to development members

### Dockerfile
Alpine and AWS CLI versions are hard-coded, so please change them manually.

```dockerfile:Dockerfile
FROM alpine:3.9
ENV AWS_CLI_VERSION 1.16.148
RUN apk -v --update add \
        python \
        py-pip \
        groff \
        less \
        mailcap \
        && \
    pip install --upgrade awscli==$AWS_CLI_VERSION python-magic && \
    apk -v --purge del py-pip && \
    rm /var/cache/apk/*

WORKDIR /project
ENTRYPOINT ["aws"]
```

### Build

```shell
docker build -t aws-cli .
```

### Configuration

Register access key ID, secret access key and default region in variables.

-For Windows (powershell)

```powershell
$AWS_ACCESS_KEY_ID="<id>"
$AWS_SECRET_ACCESS_KEY="<key>"
$AWS_DEFAULT_REGION="<region>"
```

-For Linux

```shell
export AWS_ACCESS_KEY_ID="<id>"
export AWS_SECRET_ACCESS_KEY="<key>"
export AWS_DEFAULT_REGION="<region>"
```

### Installation
Create an alias to make the AWS CLI appear to be running on your host OS.
It is useful to register to"$profile"on Windows and".bash_profile"on Linux.
※ Mount the current directory to the work directory"/project"on the container.

-For Windows (powershell)

```powershell
function aws(){
    docker run --rm -it `
    -e AWS_ACCESS_KEY_ID=${AWS_ACCESS_KEY_ID} `
    -e AWS_SECRET_ACCESS_KEY=${AWS_SECRET_ACCESS_KEY} `
    -e AWS_DEFAULT_REGION=${AWS_DEFAULT_REGION} `
    -v ${pwd}:/project `
    speaktech/aws-cli `
    $args
}
```

-For Linux

```shell
alias aws='docker run --rm -t $(tty &>/dev/null && echo "-i") \
-e "AWS_ACCESS_KEY_ID=${AWS_ACCESS_KEY_ID}" \
-e "AWS_SECRET_ACCESS_KEY=${AWS_SECRET_ACCESS_KEY}" \
-e "AWS_DEFAULT_REGION=${AWS_DEFAULT_REGION}" \
-v "$(pwd):/project" \
aws-cli'
```

### How to use
The usage is the same as installing AWS CLI on the host OS. However, please note that command completion can not be performed.

```shell:S3上のオブジェクトのリスト表示
aws s3 ls
```



```shell:S3上へローカルのファイルをコピー
aws s3 cp test.txt s3://test-bucket/test-prefix/ 
```

* Since the current directory is mounted on the work directory"/project"on the container, files on the current directory can be copied.

### Articles I've provided for reference
-[AWS CLI in Docker] (https://hub.docker.com/r/mesosphere/aws-cli/)
-[AWS CLI in Docker environment] (https://qiita.com/ABCompany1/items/c92ac5087519c103f056)