OmniAICreator/Qiita-1.07M huggingface dataset:
100日後にエンジニアになるキミ - 1日目 - 目標設定

#100日後にエンジニアになるキミ

現在2020年03月21日です。
自分はコロナショックのため、自宅でリモートワークしているエンジニアです。

本来なら今年は、オリンピックが開催され
それに向けて盛り上がって行ける年になるはずでした。

世の中何が起きるか分かりません。
業種によっては仕事が全く無くなり廃業という
ところも出てきてしまいました。

一方で、エンジニアワークは時間や場所の制限をあまり受けません。
ノートPC一台で仕事ができるのです。

その気になれば旅行先のホテルからでも
ミーティングに参加したり、ソースコードやデータを共有したりして
仕事を完遂できます。

今年は災厄の年になりそうですので
急に仕事がなくなったり、転職を考えたり、
そう言う人が増えるんじゃないかと思いました。

と言う訳で、ITエンジニアを目指す方がいれば
その活動を支援していきたいと思い、この企画を考えました。

題して「**100日後にエンジニアになるキミ**」

あのワニのもろパクリ版です。
違いは誰も死なないハズですwww

結論から言うと、これから100日分の投稿を読めば
100日後にはエンジニアに必要な知識が身についているはずです。

#まずは目標を決めよう

ITエンジニアと言っても、結構いろんな職種があります。

ざっくり言うと
人をマネジメントする人とそうでない人にまず分かれます。
マネジメントする人のことをプロジェクトマネージャー(PM)などと言ったりしますが
ここの職種は対象外です。
いきなり未経験では厳しいでしょう。

始めにどんな仕事をしたいのかという目標を立てるのがいいと思います。
それに合わせて勉強すればいいと思います。

いきなり未経験からでも行けそうな職種は以下です。

**・フロントエンドエンジニア**
WEBサイトやWEBアプリの出目部分を作るお仕事、華やかでカッコイイ
イケメンのお兄さんがあーでもないこーでもないやってそうな職種です。
スマホのアプリ側なんかも一応はここに該当します。
ボスのCMの成田凌くんみたいなのを想像してみてください。
どうです？やりたくなりませんか・・・

**・サーバーサイドエンジニア**
アプリケーションの裏側で動いているサーバー上のプログラムを開発する人
サーバー側は目に見えませんが、裏側では非常に高度な計算をしたりもするので
アプリケーションの要になる部分を作る人にもなります。


**・ゲーム開発エンジニア**
ゲーム開発プランナー、デザイナーなどいろんな職種が必要ですが
ゲーム用のプログラムを作るにはかなり専門的な知識が必要です。
フロントエンドやサーバーサイドとはまたひと味違う
ゲーム開発の中心的な役割を担います。

**・組み込み系エンジニア**
WEBアプリでも、スマホアプリでもなく、それ以外の
端末などで動くプログラムを開発したりする人たちです。
炊飯器とかがそんな感じですね。
昔ながらのメーカーさんとかに多いイメージです。

**・インフラエンジニア**
いわゆるサーバー環境を構築したり、ネットワーク環境を構築したりする
人たちです。ソフトウェアの開発はせず、環境構築をするスペシャリスト
基本有事の際以外は暇してます。

**・セールスエンジニア**
システムを売りに行く人です。開発者ではなく、開発したものを売ったり
開発を受注したりするのを頑張る人です。営業よりですね。開発自体はしません。
手より口が回る人向けのお仕事です。


ざっくり分けてみました。
他にもITエンジニアに関わる職種はいっぱいあります。

この企画はそれの基礎知識を身に着けるものだと思ってください。

まずはこの職種によって
どんな感じの知識が必要なのかを洗い出してみました。

ざっくりなので、人によってはこれも必要とか
言われるかもしれませんが・・・・

|  | フロントエンド | サーバーサイド | ゲーム開発 | 組み込み系 | インフラ | セールス |
|:--|:--|:--|:--|:--|:--|:--|
| プログラム言語 | ○ | ○ | ○ | ○ |  |  |
| サーバー | ○ | ○ | ○ | ○ | ○ |  |
| OS | ○ | ○ | ○ | ○ | ○ |  |
| コマンド | △ | ○ | ○ | ○ | ○ |  |
| 数学 | △ | △ | ○ | △ |  |  |
| ネットワーク | ○ | ○ | ○ | ○ | ○ |  |
| HTML | ○ | △ | △ | △ | △ |  |
| データベース | ○ | ○ | ○ | ○ | ○ |  |
| クラウド | ○ | ○ | ○ | ○ | ○ | ○ |
| データ処理 | △ | ○ | ○ | △ | △ |  |
| 自然言語処理 | △ | ○ | △ | △ |  |  |
| 機械学習 |  | △ | △ | △ |  |  |
| 負荷分散 |  | ○ | ○ |  | ○ |  |
| ミドルウェア | ○ | ○ | ○ |  | ○ | ○ |
| 運用 | ○ | ○ | ○ | ○ | ○ |  |
| ソース管理 | ○ | ○ | ○ | ○ | △ |  |
| 仮想化 |  | △ | △ |  | ○ |  |
| セキュリティー | ○ | ○ | ○ | ○ | ○ |  |
| 要件定義 | △ | △ | △ | △ | △ | ○ |
| 開発手法 | △ | △ | △ | △ | △ | ○ |
| 業界知識 | △ | △ | △ | △ | △ | ○ |
| マーケティング | △ | △ | △ | △ | △ | ○ |
| コミュニケーション力 | △ | △ | △ | △ | △ | ○ |

○：必須
△：有ると望ましい

テーマ別であげてみましたが結構たくさんあるもんですね。
エンジニア仕事を初めてやったのは23才位の時だったかと思います。

その時は本も少なく、学習サイトなんかも存在せず、動画講座もありません。
少しづつ仕事をしながら覚えていったものなのですが
これくらいは押さえておかないと、エンジニア仕事は続かないんじゃないかと思います。

プログラムの開発をする人としない人でまずは別れると思います。
プログラムの開発をしない、インフラ、セールスエンジニアには
開発周りの知識はほとんど必要ありません。

一方で開発をしたい人は、それなりに押さえておかないとダメな知識があります。

なりたい職種が決まってない人は全部押さえていただき
なりたい職種が決まっているなら、必須テーマを
深掘りして押さえてもらえば良いかと思います。

特にエンジニアになる気は無いけど勉強したい方は
そのテーマの記事を参考にしてもらえば良いかなと思います。

記事は上記のテーマにあわせて書いていく予定で
だいたい19:00時頃に投稿を目指しています。

もし投稿がない場合は叱ってください。
よろしくお願いいたします。

君がエンジニアになるまであと99日


#作者の情報
乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython
[Rails]いいねした商品をマイページに一覧表示する

ユーザー(user)のマイページ(show)にいいね(like)した商品一覧を表示させます。
**モデルの指定は[こちら](https://qiita.com/yummy888/items/2b7708a498861e5ba733)に記載してます。**

#　ルーティング
```routes.rb
  resources :users, only: [:index, :show] do
    collection do
      get :likes
    end
  end
```
userのshowアクションにネストさせます。

# モデル
```user.rb
  has_many :likes, dependent: :destroy
  has_many :like_items, through: :likes, source: :item
```
※今回のポイント
 `like_items`でuserがどのitemにいいねしているか取得できます。

#　ビュー
```users/_side-bar.html.haml
.side-bar
  %section.side-bar__group
    %h2.side-bar__group__title
      マイページメニュー
    %li.side-bar__group__list
      = link_to "お知らせ", "#"
    %li.side-bar__group__list
      = link_to "いいねした商品", likes_users_path
  
```
リンク先`likes_users_path`指定

```users/likes.html.haml
.container-show 
  = render "side-bar"
  .main
    %section.main__group
      %h2.main__group__title
        〇〇さんのマイページ
    %section.main__table
      %h2.main__table__header
        いいね！一覧
      %ul.main__table__list
        - current_user.like_items.each do |item|
          %li
            =link_to item_path(item), class: "main__table__list__item" do
              %figure 
                = image_tag asset_path(item.images[0].content), :size =>'48x64'
              .main__table__list__item__body
                .main__table__list__item__body__text
                = item.name
                %br
                = item.price 
                円
              %i.fas.fa-chevron-right

```

likeファイルを作成
`- current_user.like_items.each do |item|`で現在ログインしているuserがいいねしたitemを取得しています。

`=link_to item_path(item)`で各商品詳細ページに遷移できるようにしてます。

#完成イメージ

[![Image from Gyazo](https://i.gyazo.com/00a57153bf4226b5013876a3283ec414.gif)](https://gyazo.com/00a57153bf4226b5013876a3283ec414)

[![Image from Gyazo](https://i.gyazo.com/6aaadc79a2c6e6e89b3c1e363356a4cf.gif)](https://gyazo.com/6aaadc79a2c6e6e89b3c1e363356a4cf)

ご指摘ありましたらぜひコメントよろしくおねがいします！！
Cyber Detective CTF choochoo 200

#問題

https://ctf.cybersoc.wales/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/29d9f000-9f87-9bc3-a556-9e9c54cc5b9a.png)

私たちが彼の家に侵入しようとするとき、ジェームズが遠くにいることを確認する必要があります。

Jamesはどの都市で働いていますか？

注：この人が誰なのかわからない場合は、他のLife Onlineの課題をご覧ください。これらの人を見つけるためのエントリポイントが提供される可能性があるためです;）。

#解いてみた

ツイートを確認すると駅っぽい画像をアップしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/697e3d73-ea53-0bc5-138e-8fd2ca2e1347.png)

画像内の文字をgoogleに入力するとカーディフ中央駅ということがわかるので、その地名が正解。

この人は午後に出勤しているのか？
nanorouterで作った自作のルーティングをHooks化する

[nanorouterでReactのルーティング処理を簡単に自作する](https://qiita.com/IzumiSy/items/79eeb0bada07f1e79686)の続き。
今度は前回作ったやつをHooks化して、さらに[History](https://www.npmjs.com/package/history)パッケージを統合して遷移イベントのフックも行う。

```jsx
import React from 'react';
import nanorouter  from "nanorouter"
import { createBrowserHistory } from 'history'

export const useRouter = (routes) => {
  const history = React.useRef(createBrowserHistory())
  const [currentPath, setCurrentPath] = React.useState(history.current.location.pathname)

  React.useEffect(() => {
    history.current.listen((location, action) => {
      setCurrentPath(location.pathname)
    })
  }, [])

  const nextComponent = React.useRef(null)
  const router = nanorouter({ default: "/" })

  Object.keys(routes).forEach(path => {
    router.on(path, param => { nextComponent.current = routes[path] })
  })

  router.emit(currentPath)

  return [history.current, nextComponent.current]
}

```

使う側のインタフェースはこんな感じになる。

```jsx
import React from 'react'
import { useRouter } from './Route'
import { PageA } from './PageA'
import { PageB } from './PageB'

function App() {
  const [history, router] = useRouter({
    '/hello': <PageA />,
    '/world': <PageB />,
  })

  return (
    <div className="container">
      {router}
      <button onClick={() => history.push("/world")}>world</button>
      <button onClick={() => history.push("/hello")}>hello</button>
    </div>
  )
}

export default App;

```
【DB】インデックスと複合インデックス

#インデックス
データの並び順のこと。
デフォルトは主キーになっています。

##インデックスのメリット
インデックスを活用することでデータベース上から情報を取り出す速度が早くなります。
例えば下記のようなデータテーブルがあった時に、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/46c2ce8c-6723-c8e6-b33e-8b450124f558.png)
インデックスを社員コードにするだけで、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/5faf0c52-a605-dec0-1425-4e1d366a398e.png)
社員コードが昇順になって表示されます。

これで下記のようなSQLを実行した際に

```
select * from 社員テーブル where 社員コード = 1003
```
インデックスが何も設定されていない場合だと全件検索しますが、
社員コードが設定されていると昇順になっているので検索時にアルゴリズム的に実行してくれます。

#複数インデックス
複数の並び替えの条件でインデックスを作成すること。

例えば社員コード、所属コードでインデックスを設定した場合、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/3519ab8d-1dc5-4041-97a0-bfeab1ab1d23.png)
このようなデータテーブルになる。

###※このようなデータテーブルにはならない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/1325a998-f82c-4627-f607-c74871340e1f.png)

複数インデックスでは２つ目以降の引数に設定したカラムのみでは使用できない。
`select * from 社員テーブル where 社員コード = 1003 `
この場合は全件検索してしまう。

##主キーインデックスと普通のインデックスの違い
主キーインデックスはDBがデフォルトでインデックスを指定します。
そのデータベースの用途に従ってインデックスを設定すべきです。

またインデックスは複数設定することもできます。
・社員テーブル(インデックス：社員コード)
・社員テーブル(インデックス：所属コード,社員コード)
のようにそれぞれ保持することが可能です。
Cyber Detective CTF growingup 200

#問題

https://ctf.cybersoc.wales/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/5e343434-9dc7-8ff0-89f1-40ffc43e54d7.png)

ジェームズは子供時代をどこで過ごしましたか？

#解いてみた

自己紹介のところを翻訳してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/15107512-4080-e61c-bd61-3cb42d745a23.png)


たぶんBornが生まれでraisedが育ったところということだと思いますが日本語訳ではよく意味がわかりません。

```
///push.asking.barn.
```

の意味がわかれば答えがわかるということでしょうか。
ただし、検索しても特にそれといったものは出てきませんでした。

何かツイートにヒントがあるかもしれないので、見直してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/da8a1da7-b5fb-1808-6169-d145b310d38b.png)

3単語で場所を表してくれるらしい。
リンク先に行ってみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/f533825c-3618-0563-205f-09c6c3cc62c4.png)

スラッシュ3つから始まって単語が3つ。///push.asking.barn.と一緒の形です。


///push.asking.barn.を入力してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/44f8ad12-01c3-3c8d-31a9-32905b17ad96.png)

ここの地名を入力すると正解でした。
turicreateを使ったモデルからデータを返却するAPIを作成する

## 概要
[turicreate](https://github.com/apple/turicreate)という Apple製の機械学習のライブラリがある。（machine learning modelsってことなのでそれで良いはず）

こいつを使ったモデルをGCP上で扱う構成を作ったときのメモ
参考: https://cloud.google.com/blog/products/ai-machine-learning/how-to-serve-deep-learning-models-using-tensorflow-2-0-with-cloud-functions

## 構成
＊CloudRunって書いてある部分はアイコンがなかったのでGAEのアイコンで代用しています

![Untitled (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75299/35c76de8-dfd9-9ac2-c5de-2613259c9f0d.png)

ユーザはGAEに対してアクセスし、その後ろでCloud Runがstorageからmodelをdownloadしてきて動く。
もちろん毎回storageから持ってくると意味がないのでロードしたモデルはメモリ上にキャッシュする。

## 困ったこと+解消方法
参考の構成では、TensorflowのmodelをCloud FunctionsでloadしてAPIとして、返しているがTuricreateの場合、おそらく依存関係の解消をしようとしている際にbuildができずにエラーになってしまう。（GAEでやっても同じ、Cloud Buildの設定をいじれれば良いのかもしれないがGAEやCloud Functionsからそれが触れるのかがわからなかった）

そのため、自分で実行imageを作ってdeployし動かすことができる、Cloud Runを使うことにした

## 実装
実装自体は何ということのないもの、ほぼほぼpython+CloudRunの構成に沿っている

```python:main.py
import turicreate
import os
from flask import Flask, request, jsonify
from google.cloud import storage
import zipfile

model = None

app = Flask(__name__)


def download_model(bucket_name, source_blob_name, dest_blob_name):
    storage_client = storage.Client()
    bucket = storage_client.get_bucket(bucket_name)
    blob = bucket.blob(source_blob_name)

    blob.download_to_filename(dest_blob_name)
    with zipfile.ZipFile(dest_blob_name) as modelZip:
        modelZip.extractall('.')


@app.route('/')
def root():
    global model
    request_json = request.get_json()

    if request.args and 'userId' in request.args:
        userId = request.args.get('userId')
    else:
        return jsonify({'message': 'userId is not found'}), 400
    if 'limit' in request.args:
        limit = int(request.args.get('limit'))
    else:
        limit = 10

    if model is None:
        load_model()

    result = model.recommend(users=[userId], k=limit)

    random.shuffle(result)
    return jsonify({'result': result})

def load_model():
    global model

    os.environ['GOOGLE_APPLICATION_CREDENTIALS'] = './credential.json'
    download_model("learning-data", "model.zip", "./model.zip")
    model = turicreate.load_model('./model')
    

if __name__ == '__main__':
    app.run(host='127.0.0.1', port=int(
        os.environ.get('PORT', 8080)), debug=False)
```

```Dockerfile
FROM python:3.7

ENV APP_HOME /app
WORKDIR $APP_HOME
COPY . .

RUN pip install -r requirements.txt

CMD [ "python", "main.py" ]
```

```text:requirements.txt
turicreate==6.1
flask==1.1.1
gunicorn==20.0.4
google-cloud-storage==1.26.0
```

GAEの方は出来上がったserviceにアクセスしていればOK

## 課題
* 上記の場合instanceが残り続けた場合どうなるのか、modelの更新のタイミングをみて動くようにしたい
* instanceが増えた場合どうやって更新するか

→ 一旦考えているのは、メモリにあるデータは `key: 時間、 value: model` のようにすることで別途タイミングで先にモデルデータを非同期で読み込むようにしておく方法

このあたりが参考になるかも
https://cloud.google.com/run/docs/tips?hl=ja
Accessでガントチャート

hatena chips様の[帳票フォームでガントチャート（マウスドラッグで範囲指定）](https://hatenachips.blog.fc2.com/blog-entry-431.html)に感動したので、下手ながら少しアレンジしてみました。![AccessGantt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576810/3857517b-3566-d4b5-aa03-559111712373.png)

サンプルは[こちら](https://github.com/kapibara3s/access_gantt/blob/master/access_gantt.accdb)

いろいろ初めてなのでダメダメかもしれませんが、思い切って投稿。

##特徴
- マウスドラッグ操作のみで範囲指定できます
- 同日に複数設定可能（8:00～13:00　15:00～17:00など）
- 2種類の横棒を使用可能

##hatena chip様との主な変更点
帳票フォームでマウスドラッグで値を指定する方法は、[帳票フォームでガントチャート（マウスドラッグで範囲指定）](https://hatenachips.blog.fc2.com/blog-entry-431.html)と同じですが、主に下記の点をアレンジしてみました。

- テーブルに期間フィールドを追加し規定値として"0"を96文字設定
    - 同日に複数設定できるようにするため
- MouseDown時に開始位置、MouseMove時に移動した文字数を取得し、Midステートメントで期間フィールドを入替
    - Midステートメント：Mid(stringvar, start, length) = string
- Replace関数で期間フィールドの1をChrW(9608)・2をChrW(9619)に入替





######使いどころがあるかは分かりませんが…。
Stripeでbusiness_typeをindividualにしたい - Node

これでできた

```js

  stripe.accounts.update(
    'acct_1GP38OKO0yOOiwW9',
    {legal_entity: {type: 'individual'}},
    function(err, account) {
      console.log("アカウント編集");
      console.log(err);
      console.log(account);
    }
  );
```
flutterのDraggableウィジェット内のテキストにエラーが表示されてしまう時の対処法



flutterのDraggable Widget内のfeedback無いでテキストウィジェットを使用しようとしたら、ドラッグしてfeedbackが表示される時にwidget内にエラーが表示されてしまった。

参考コード

```dart
return Draggable(
  onDragStarted: () {
    //何らかの関数
  },
  child: Padding(
    padding: EdgeInsets.all(4.0),
    child: Container(
      color: flag == "true" ? Colors.blue : Colors.grey,
      child: Center(
        child: Text(
          "何らかの文字",
          style: TextStyle(
            fontSize: 28,
          ),
        ),
      ),
    ),
  ),
  childWhenDragging: Container(),
// ここの部分
  feedback: Container(
      width: 200,
      height: 70,
      child: Center(
        child: Text(
          name,
          style: TextStyle(
            fontSize: 28,
          ),
        ),
      ),
      color: Colors.yellow,
   ),
);
```


## 解決策

feedback内をmaterialで囲むとエラーが表示されなくなります。

参考例

```dart
// Material Widgetで囲む!!
feedback: Material(
  child: Container(
    width: 200,
    height: 70,
    child: Center(
      child: Text(
        name,
        style: TextStyle(
          fontSize: 28,
        ),
      ),
    ),
    color: Colors.yellow,
  ),
),
```


参考サイト
https://github.com/flutter/flutter/issues/9304
[Ruby on Rails]enumを用いたselectフォームの作成


selectを作る際に、選択肢が3つ程度のものであればoptionで記載しても良いかとは思いますが、多くなればコードが冗長になってしまいます。
enumを用いているカラムに対してであれば、スッキリ綺麗なコードで実装できます。
#実装した機能
gyazoリンク
[https://gyazo.com/67a692c100281014ff59426fa6eb1a53](https://gyazo.com/67a692c100281014ff59426fa6eb1a53)
#enumとは
列挙型、列挙クラスといわれる。
本記事はenumについてではないため、ザックリとした説明になりますが、
自分の認識では、
わざわざ、tableを作成し、外部キーとして呼ばなくとも中身を持ったidとして管理できるもの
#どんなものに使うのか？
enumを使う代表的なものといえば、都道府県でしょうか
optionで書くのも面倒ですし、テンプレを使ったとしても冗長で読みやすいコードとは言い難いですね。

```ruby:product.rb 
 enum delivery_prefecture:{
   "北海道":1,"青森県":2,"岩手県":3,"宮城県":4,"秋田県":5,"山形県":6,"福島県":7,
   "茨城県":8,"栃木県":9,"群馬県":10,"埼玉県":11,"千葉県":12,"東京都":13,"神奈川県":14,
   "新潟県":15,"富山県":16,"石川県":17,"福井県":18,"山梨県":19,"長野県":20,
   "岐阜県":21,"静岡県":22,"愛知県":23,"三重県":24,
   "滋賀県":25,"京都府":26,"大阪府":27,"兵庫県":28,"奈良県":29,"和歌山県":30,
   "鳥取県":31,"島根県":32,"岡山県":33,"広島県":34,"山口県":35,
   "徳島県":36,"香川県":37,"愛媛県":38,"高知県":39,
   "福岡県":40,"佐賀県":41,"長崎県":42,"熊本県":43,"大分県":44,"宮崎県":45,"鹿児島県":46, 
   "沖縄県":47
 }
```
このように記載することで、今回でいうdelivery_prefectureがidで管理されるようになります
migrationファイルはintegerにしておきましょう
#selectフォームの作成

```ruby:products/new.html.haml
 .form__group
   = f.label :delivery_prefecture do
     発送元の地域
     %span.form-description.form-require 必須
   = f.select :delivery_prefecture, Product.delivery_prefectures.keys,{include_blank: '選択してください'},{class: "exhibition__select"}
```
今回であれば


`Product.delivery_prefectures.keys`
`モデル.カラム名（複数形）.keys`

この記述で選択肢に先ほどのenumの記述部分が適用されます。
注意としては、**複数形**にすることです。

ちなみに

`{include_blank: '選択してください'}`

によって何も選択されていない時に **選択してください** と表示されるようにしています
#おまけ

```ruby:products/new.html.haml
 .form__group
   = f.label :delivery_days do
     発送までの日数
     %span.form-description.form-require 必須
   = f.select :delivery_days, Product.delivery_days.keys,{include_blank: '選択してください'},{class: "exhibition__select"}
```
```ruby:product.rb
  enum delivery_days:{
    "1~2日で発送": 1,
    "2~3日で発送": 2,
    "3~7日で発送": 3,
  }
```
このようにカラム名に複数形が使われている場合（あまり望ましくないが、dayだと変なので今回は止むを得ず、、）は、そのままカラム名を記載するだけでうまく行きます。
##最後に
本記事がQiita初投稿になります:innocent:
アドバイス等いただけたら幸いです！
[Excel]グラフの見た目を一括コピーする

※ これは 2017/8/7 に個人ブログへ投稿した内容を転記したものです。

データをまとめるときに、同じ書式や軸設定で複数のグラフを作りたくなるのですが、ひとつずつ設定していくとものすごく手間がかかりますよね。
かといって、グラフごとコピーして参照先を変えるのも面倒…

というわけでグラフを書式コピーする方法を探したところ、こんな方法があるようです。
[「Excelの便利機能活用術」グラフ作成の「書式設定」を簡略化する｜NECネクサソリューションズ](https://www.nec-nexs.com/bizsupli/useful/excel/08.html)

でも、この方法では複数のグラフを選択すると「形式を指定して貼り付け」が出てきません（白目

# グラフ書式を貼り付けるマクロ
先ほどの手順をマクロに記録してやると、どうやらこの「形式を指定して貼り付け」は

```vb
ActiveSheet.PasteSpecial Format:=2
```

に相当しているらしい。ということは

```vb
Public Sub グラフ書式を貼り付け()
    Application.ScreenUpdating = False
    Dim x As Object
    Dim xi As Object
 
    Set x = Selection
    If TypeName(x) <> "DrawingObjects" Then
        If Not ActiveChart Is Nothing Then
            ActiveSheet.PasteSpecial Format:=2
        End If
    Else
        For Each xi In x
            If TypeName(xi) = "ChartObject" Then
                xi.Select
                ActiveSheet.PasteSpecial Format:=2
            End If
        Next
    End If
 
    Set x = Nothing
    Application.ScreenUpdating = True
End Sub
```

これでOK。

# 使い方

1. 元となるグラフをコピー (Ctrl + C）
2. 見た目を揃えたいグラフを選択 （Ctrl + 左クリック）
3. 上記のマクロを起動：マクロにショートカットキーを割り当ておくと便利

複数の選択されたグラフを一括処理する方法はこちらを参考にしました。
[エクセルのマクロでアクティブシート内の選択した複数のグラフのみ軸の- その他（Microsoft Office） | 教えて!goo](https://oshiete.goo.ne.jp/qa/5598447.html)

選択されているグラフがひとつの場合と複数の場合とで条件分岐して、複数の場合は `x` に格納しておいた選択されたグラフのリストからひとつずつ選択状態にして `PasteSpecial` しています。

# 備考

ちなみに、

```vb
Chart.Paste Type:=xlPasteFormats
```

は、上手くいかなかったです…（Excel 2010
win10でnbextentionsをインストールしようとしたが，結局wslでインストールし，wslすげえってなった話

# この記事で書いてあること
- win10でnbextentionsをインストールして失敗した話
- wslでubuntuからnbextentionsをインストールしたら簡単だった話
- GitHubのクローンをwin側からwsl側に作れた話

## win10でnbextentionsをインストールして失敗した話
- jupyter notebookにnbextionsions([参考URL](https://github.com/ipython-contrib/jupyter_contrib_nbextensions))をインストールしたくていくつかのサイトを参考にやってみたが，インストールに1日以上かかっていたので断念
- 知人からwslでやれば早いのでは？と言われ，wslでやってみることを決意

## wslでubuntuからnbextentionsをインストールしたら簡単だった話
- [このサイト](https://reffect.co.jp/windows/wsl-windows-ubuntu-install)を参考にwslを導入．さらにubuntu18.04を導入
- 次に，[このサイト](https://qiita.com/nishiys/items/a9d15c2714dcf023636e)を参考にnbextentionsを導入．
- aliasでubuntuからjupyter notebookを開く際のショートカットキーを設定．
- [このサイト](https://qiita.com/nishiys/items/a9d15c2714dcf023636e)を参考にnbextentionsを設定

## GitHubのクローンをwin側からwsl側に作れた話
- GitHubのクローンをubuntu側からやる操作をどうやればわからなかった
    - 知人に教えてもらい，wslのショートカットを作り，それをwindows側から開くと，GitHubアプリでその場所にクローンできた．wslすげえ

## 感想
- nbextentionsは便利なので，jupyter notebook使いにはおすすめしたい
- wslでのubuntu導入が非常に簡単で驚き
- wslの使い勝手がいい
jQueryの基本は、cssをいじる事。

#jQuery は基本、cssとの連携をとる。
他はアトリビュートなどを動かす。
![スクリーンショット 2020-03-21 17.42.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606144/d7d1837e-fee0-cd29-a06a-e2f3b9e4aeaa.png)
上記は、html5の一例。
下記は、jQueryによる、スタイル指定。
![スクリーンショット 2020-03-21 17.52.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606144/de346a4b-4618-a49d-a987-0ed986313c4d.png)

#attribute をいじるには、例えば、
![スクリーンショット 2020-03-21 17.56.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606144/d6691b15-ffa6-05b7-f2c2-9f22b04a8b27.png)
![スクリーンショット 2020-03-21 17.59.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606144/ea0bbb6a-e8a8-52ed-0f54-8fe7d00436b7.png)
などと、.attr()をつける。
魔法JS☆あれい 第7話「includesのsliceと向き合えますか？」

登場人物

丹生（にゅう）あれい
魔法少女「魔法（マジカル）JS（女子小学生）☆あれい」として活動中。

イテレー太
正体不明の魔法生物。

第1部「ミューテーター・メソッド編」
* [第1話「popでpushした、ような……」](https://qiita.com/8amjp/items/e44e707ccc8c95b4a40d)
* [第2話「shiftはとってもunshiftって」](https://qiita.com/8amjp/items/3fc1b2defd28ba1c2df3)
* [第3話「もうsortもreverseも怖くない」](https://qiita.com/8amjp/items/86f5294981fbebd3fe2d)
* [第4話「fillも、spliceも、copyWithinもあるんだよ」](https://qiita.com/8amjp/items/0741e35b70ea32711265)

第2部「アクセサ・メソッド編」
* [第5話「joinなんて、concatなわけない」](https://qiita.com/8amjp/items/229c41ad2146728abd89)
* [第6話「indexOfなの絶対lastIndexOf」](https://qiita.com/8amjp/items/f7e421722e419c1c0a7d)

## includes()

イテレー太「さあ、惰性で戦いを続けるよ！」
あれい「堂々と言うんじゃねえよこの駄犬」
イ「さて、今回僕が魔法世界から召喚したデータは……これだ！」

```js
items = [
  'ウォ一タ一', 'ワォ一リ一', 'ウォ一リ一',
  'ウォ一ソ一', 'ウォ一リ一', 'ウ才一リ一',
  'ウォ一リ一', 'チャ一リ一', 'チャ一ハン'
];
```

あ「前回と一緒じゃねえか。どれだけ引っ張るんだこのネタ」
イ「……果たして、本当にそうかな？」
あ「何だと」
イ「じゃあ、この配列の中に、『ウォーリー』という文字列があるかどうかを判定して、`true`か`false`のいずれかの値を`return`して敵を倒してよ！」
あ「面倒くせえなあ……」

```js
return items.includes('ウォーリー');
// false
```

あ「ねえのかよ」
イ「伸ばし棒（ー）に見える文字は全部漢数字の一だよ！」
あ「どれだけ手の混んだ嫌がらせだよ」

### 解説

> `includes()` メソッドは、特定の要素が配列に含まれているかどうかを `true` または `false` で返します。与えられた要素が見つかるかどうかを計算するために、 SameValueZero (ゼロの同値) アルゴリズムを使用します。

（[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)より）

`includes()` メソッドは、[ECMAScript 2016](https://www.ecma-international.org/ecma-262/7.0/#sec-array.prototype.includes)から追加された新しいメソッドです。「検索する値、開始位置」という引数を指定でき、指定した値が配列に含まれていれば`true`、含まれていなければ`false`を返します。また、開始位置を指定した場合は、その位置以降の要素のみを検索対象にします。

## slice()

イ「じゃあ、次に魔法世界から召喚したデータは……これだよ！」

```js
items = [
  'ウォーリー', 'ウォーリー', 'ウォーリー',
  'ウォーリー', 'ウォーリー', 'ウォーリー',
  'ウォーリー', 'ウォーリー', 'ウォーリー'
];
```

あ「もう全部ウォーリーじゃねえか」
イ「この中から、3番目、4番目、5番目のウォーリーだけを取り出して、それを`return`して敵を倒してよ！」
あ「他のウォーリーとそのウォーリーは何が違うんだよ」
イ「さあ、急いで！」
あ「面倒くせえなあ……」

```js
return items.slice(2, 5);
// ['ウォーリー', 'ウォーリー', 'ウォーリー']
```

イ「やったね、あれい！　効いてるよ！」
あ「敵もよく判別がつくな」

### 解説

> `slice()` メソッドは `begin` から `end` まで選択された配列の一部をシャローコピーして、新しい配列オブジェクトを返します (`end` は含まれません)。元の配列は変更されません。

（[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)より）

このメソッドは「開始位置、終了位置」という引数を指定できます。しかし、実際に返される値は「開始位置の要素」から「終了位置の直前の要素」であることに注意してください。また、終了位置を指定しない場合は配列の末尾までの要素が、開始位置も指定しない場合はすべての要素が返ります。
この特徴を利用して、引数を指定しないことで、配列をコピーして新しい配列を作成する、という用途にも使用できます。

## 次回予告

findとは違うメソッドになる、私はそう決めたんだ。
戻り値に要素なんていらない。 
私だけは絶対にインデックス以外のものを返したりしない。

[第8話 filterって、ほんとfindとfindIndex](https://qiita.com/8amjp/items/f7014b09c5c2a6440a74)

※第2部「アクセサ・メソッド編」完結です。次回からは、第3部「イテレーション・メソッド編」がスタートします。
AtCoder 生活　2日目

[前回]
(https://qiita.com/flandrescarlet237/items/556e16ac753ad64d16c0)

#二日目
今日は、とりあえずABC042_A,ABC043_A,ABC044_Aの三問だけ解いてみました。

##ABC042_A
[和風いろはちゃんイージー]
(https://atcoder.jp/contests/abc042/tasks/abc042_a)

最初から何もわからなかったのでとりあえず他人のコードを見ながら解きました。

```c++
#include <bits/stdc++.h>
using namespace std;

int main(){
	int A,B,C;
  	cin >> A >> B >> C;
	if((A==7&&B==5&&C==5) || (A==5&&B==7&&C==5) || (A==5&&B==5&&C==7))
    {
    	cout << "YES" << endl;
    }
	else{
    	cout << "NO" <<endl;
    }
}
```

ここで、bits/stdc++.hの存在を知りました。
何に使っても基本OKなやつ。便利すぎる！

##ABC043_A
[キャンディーとN人の子供イージー]
(https://atcoder.jp/contests/abc043/tasks/abc043_a)

```c++
#include<bits/stdc++.h>
using namespace std;

int main(){
	int N;
	cin >> N;
  	cout << ( 1 + N ) * N / 2 <<endl;
}
```

bits/stdc++.hを知ってしまえばあとは簡単何も見ずに解けるように！

##ABC044_A
[高橋君とホテルイージー]
(https://atcoder.jp/contests/abc044/tasks/abc044_a)

```c++
#include<bits/stdc++.h>
using namespace std;
int main(){
	int N;
	cin >> N;
  	int K;
	cin >> K;
  	int X;
	cin >> X;
  	int Y;
	cin >> Y;
   	cout << (K*X)+(N-K)*Y <<endl;
}
```

もはや、算数を解いてる気分、、、
追記　ifで分岐させないといけないのに分岐させるのを忘れてました、、、

なんか一気に簡単に見えてきた
明日は、BやCの問題も解きたいなぁ
UnityのスクリプトからXcodeのInfo.plistを編集する

言語設定がデフォルトで英語になっているので、毎回ビルド後にXcodeで日本語に設定し直すのが大変でしたので自動で設定するようにしました。

## 環境
* Unity 2019.3
* macOS

## 方法
plistを読み書きする`PlistDocument`クラスが用意されているのでこれを使います。
ビルド後のコールバックで処理しますが、Unity2018ぐらいまでは`[PostProcessBuild]`属性を使っていたのですが現在は廃止されており、新しく`IPostprocessBuildWithReport`インターフェイスを継承してビルド後のコールバックを受け取る必要があります。  

```cs
using System.IO;
using UnityEditor;
using UnityEditor.Build;
using UnityEditor.Build.Reporting;
using UnityEditor.iOS.Xcode;

public class XcodePostprocess : IPostprocessBuildWithReport
{
    public int callbackOrder { get { return 0; } }

    public void OnPostprocessBuild(BuildReport report)
    {
        if (report.summary.platform == BuildTarget.iOS)
        {
                string plistPath = Path.Combine(report.summary.outputPath, "Info.plist");
                PlistDocument plist = new PlistDocument();
                plist.ReadFromFile(plistPath);
                plist.root.SetString("CFBundleDevelopmentRegion", "ja");
                plist.WriteToFile(plistPath);
        }
    }
}
```

## 参考
* http://kimizuka.hatenablog.com/entry/2018/09/27/201054
PySimpleGUIでMatplotlibのxyグラフを表示する。

##はじめに

PySimpleGUIのサンプルプログラムを参考にファイルを読み込んでxyグラフを表示するプログラムを作ってみた。
サンプルプログラム：[PySimpleGUI-cookbook-(Recipe-Compare 2 Files), (Matplotlib Window With GUI Window)](https://pysimplegui.readthedocs.io/en/latest/cookbook/)

その他参考
[PySimpleGUIでグラフを描く](https://qiita.com/dario_okazaki/items/dc72976987d7ef485df1)
[tkinter(pySimpleGUI）でmatplotlibなしでグラフを書く方法](https://speakerdeck.com/okajun35/tkinter-pysimplegui-dematplotlibnasidegurahuwoshu-kufang-fa?slide=12)

##環境
Win10Pro
Anaconda
Python3.7

PySimpleGUIのインストールについては、前回の記事[PySimpleGUIでQRコード作成GUIを作る](https://qiita.com/Gyutan/items/bc9041e4dc372427e355)を参考にしてください。



##作成プログラム
x,yのデータが入ったCSVファイルをアップロードしてグラフを書かせるプログラム

```python
from pathlib import Path

import matplotlib.pyplot as plt
import pandas as pd
import PySimpleGUI as sg


sg.theme('Light Blue 2')

def draw_plot(x,y):
    plt.plot(x,y)
    plt.show(block=False)
    #block=Falseの指定をしないと、その間コンソールは何も入力を受け付けなくなり、GUI を閉じないと作業復帰できない。
    
def check_file(file_name):
    p = Path(file_name)
    print(p.suffix)
    if p.suffix == '.csv':
        df = pd.read_csv(p) 
        x = df.iloc[:,0]
        y = df.iloc[:,1]
        
        return x, y
    
    else:
        print('Wrong data file, data must be CSV')  
        return None, None

layout = [[sg.Text('Enter csv data')],
          [sg.Text('File', size=(8, 1)),sg.Input(key='-file_name-'), sg.FileBrowse()],
          [sg.Submit()],
          [sg.Button('Plot'), sg.Cancel()],
          [sg.Button('Popup')]]

window = sg.Window('Plot', layout)

while True:
    event, values = window.read()
    
    if event in (None, 'Cancel'):
        break
    elif event in 'Submit':
        print('File name:{}'.format(values['-file_name-']))
        x,y = check_file(values['-file_name-'])
        
        if x[0] == None:
            sg.popup('Set file is not CSV')
        
    elif event == 'Plot':
        draw_plot(x,y)
        
    elif event == 'Popup':
        sg.popup('Yes, your application is still running')
window.close()
```
プログラムを実行して、ファイル名を指定します。横の'Browse'を押すと、ファイルが選べます。そして'Submit'を押します。
![mp1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165987/96e43456-63a1-fcc1-acd2-49a404cba79e.jpeg)

そして'Plot'を押すとグラフがプロットされます。
![Figure_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165987/7364aabb-0526-f9bd-02b4-86b79632c854.png)

なお今回使ったCSVデータを作るプログラムはこちら
[HDF5へ様々なファイルの格納](https://qiita.com/Gyutan/items/9d1b95916193e2524a86)で作製したものと同じです。

```python
import numpy as np
import matplotlib.pyplot as plt
import pandas as pd

def base_func(x,a,b,c):
    y = c + a*(x - b)**2
    return y

x = np.arange(-30, 30, 1)
para = [2.0,5.0,10.0]
np.random.seed(seed=10)
y = base_func(x,para[0],para[1],para[2])+np.random.normal(0, 60, len(x))

plt.scatter(x , y)
plt.show()

#dataをdataframeでcsvにする
df = pd.DataFrame({'x':x,'y':y})
df.to_csv('csvdata.csv',index=False)
```

##まとめ
やっぱりお手軽に作れます！
オブジェクトロック設定をしているS3バケットをConfigのスナップショット配信先にはできない

# 結論
まずは結論から。
タイトル通りなのですが、
**オブジェクトロック設定をしているS3をConfigのスナップショット配信先にはできません(2020/03/21時点)**。
以下、詳細について書いていきます。

# AWSサービス概要
登場するAWSサービスの概要を説明します。
##[AWS Config](https://docs.aws.amazon.com/ja_jp/config/latest/developerguide/WhatIsConfig.html)
AWSリソースの構成情報の記録を行います。
リソースカットで特定時間にどういった設定になっていたか、どういった変更が行われたかが分かります。
そのため、構成管理・変更管理の目的でConfigを利用することがあります。
[設定スナップショットの配信](https://docs.aws.amazon.com/ja_jp/config/latest/developerguide/deliver-snapshot-cli.html)機能を用いることで、特定時間のリソース情報をS3に保存することができます。

また、[Configルール](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/object-lock.html)という機能もあり、AWSリソースが定義したルールに準拠しているかをチェックすることができます。
例えば、全IP,portでインバウンド許可されているセキュリティグループが無いかどうかを簡単にチェックすることができます。
構成管理の目的よりも、こういったセキュリティチェックの目的でConfigを利用する人の方が多い印象です。

## [Amazon S3 オブジェクトロック](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/object-lock.html)
みなさんご存知のS3にはオブジェクトロックという機能があります。
オブジェクトロックを設定すると、一度S3に保存したオブジェクトを一定期間削除したり上書きできなくすることができます。
そのため、削除されたり、上書きされたりすると困るオブジェクトを保管するのにもってこいの機能です。

# Configが配信したスナップショット情報は削除されたくない
配信する情報を構成管理の目的で利用する場合は、これらを削除されると困ります。
そのため、オブジェクトロック設定をしているS3を配信先としておけば一定期間削除されないし安心じゃない？と思い始めます。

# オブジェクトロック設定をしているS3をConfigのスナップショット配信先にはできません
はい。そうなんですよ。。
Configの配信情報こそオブジェクトロックしたいのに対応してないんです(2020/03/21時点)。
しかも、ドキュメントにはそんなこと記載されてないので、注意が必要です。
(AWSサポートには機能改善とドキュメント修正の要望を出してます。)

そのため、これらの情報をオブジェクトロックしたい場合はオブジェクトロック設定をしているS3バケットを別途用意して、移してあげる必要があります。

# CloudTrailのログ保管先はオブジェクトロック設定のS3バケットでも可能
実はCloudTrailのログ保管先にオブジェクトロック設定のS3バケットを指定することはできなかったのですが、記事を書くにあたって再度確認したら設定できるようになってました！
Configも後々格納できるようなることを願ってます。
OpenBLAS を Android aarch64 + NDK r20 or later でビルドするメモ

## 背景

OpenBLAS(+ Lapack)を Android arm64 で動かしたい.

Lapack(clapack)はこちら

Lapack(clapack)を Android arm64 + cmake + NDK r20 or later でビルドする
https://qiita.com/syoyo/items/09009ca77393cc0bd986

## ビルド方法

How to build OpenBLAS for Android
https://github.com/xianyi/OpenBLAS/wiki/How-to-build-OpenBLAS-for-Android

は情報が古いです.

NDK r20 などでは, gcc 関連がそれなりに消えて clang only になったので, wiki の情報だとビルドがうまくいきません.

Compiling OpenBLAS for Android #2005
https://github.com/xianyi/OpenBLAS/issues/2005

にありました.

```
cd $OPENBLAS_SOURCE
export NDK=${HOME}/Android/sdk/ndk-bundle
export TOOLCHAIN=$NDK/toolchains/llvm/prebuilt/linux-x86_64
make \
    TARGET=CORTEXA57 \
    ONLY_CBLAS=1 \
    CC=$TOOLCHAIN/bin/aarch64-linux-android21-clang \
    AR=$TOOLCHAIN/bin/aarch64-linux-android-ar \
    HOSTCC=gcc \
    -j4
make PREFIX=./android-openblas/arm64 install
```

でビルドできます! sysroot 指定など不要でビルド楽です.

## CORTEX architecture

現時点(2020/03/21)では, CORTEXA53, 57, 72, 73 がありました.

### Cmake build

ソースコードのレイアウト上, out-of-tree build はちょっと気持ち悪いことがわかりました
(生成された congig.h ではなく, 既存の config.h(x86 用のデフォルト設定) をインクルードしてしまうため, config.h を消さないといけない)

in-source ビルドではこんな感じでいけました.

https://github.com/syoyo/OpenBLAS/blob/develop/scripts/bootstrap-android-cmake.sh

```
## Please edit android sdk/ndk/cmake path
ANDROID_SDK_ROOT=$HOME/Android/Sdk/
ANDROID_NDK_ROOT=$HOME/Android/Sdk/ndk-bundle
#ANDROID_NDK_ROOT=$HOME/Android/Sdk/ndk/android-ndk-r21/
# CMake 3.10 or later required
CMAKE_BIN=$ANDROID_SDK_ROOT/cmake/3.10.2.4988404/bin/cmake
#CMAKE_BIN=cmake

# For ninja build
# -DCMAKE_MAKE_PROGRAM=$ANDROID_SDK_ROOT/cmake/3.6.4111459/bin/ninja \

# Due to the source code layout of OpenBLAS, we need to use in-source build 
# Otherwise compilation fails due to the conflict of existing `config.h` and generated `config.h`
# (Using in-source build correctly overrides `config.h`)

$CMAKE_BIN \
  -DCMAKE_TOOLCHAIN_FILE=$ANDROID_NDK_ROOT/build/cmake/android.toolchain.cmake \
  -DANDROID_ARM_MODE=arm \
  -DANDROID_ARM_NEON=On \
  -DANDROID_ABI=arm64-v8a \
  -DANDROID_NATIVE_API_LEVEL=28 \
  -DCMAKE_EXE_LINKER_FLAGS="-fuse-ld=lld" \
  -DANDROID_STL=c++_shared \
  -DTARGET=CORTEXA73 \
  -DNOFORTRAN=1 \
  -DDYNAMIC_ARCH=0 \
  -DBUILD_WITHOUT_LAPACK=On \
  -DBUILD_RELAPACK=Off \
  .
```

## 参考情報

clapack の Android ビルド(ndk-build であるが)

Compile Kaldi for 64-bit Android on Ubuntu 18
https://medium.com/swlh/compile-kaldi-for-64-bit-android-on-ubuntu-18-70967eb3a308

## TODO

* [x] LAPACK をビルドする(clapack を使う)
  * https://qiita.com/syoyo/items/09009ca77393cc0bd986  
* [x] cmake で cross compile を試す.
  * in-source ビルドでなんとかビルド. out-of-tree はちょっとめんどい(既存 `config.h` を消せばいける)
* [ ] CORTEXA73 での性能を試す(Snapdragon 835 などの A73 アーキでいくらか速くなるはず?)
知ってた？Alt押しながらドラッグ操作でウィンドウ動かせることを

# 環境
Ubuntu

※他環境で動作確認は行っていません。

# やリ方
動かしたいウィンドウをアクティブにしたら、そのウィンドウの適当な場所にマウスポインタがあることを確認してください。あとはAltボタンを押しながら、いつものウィンドウを動かす操作する（マウスの左クリックホールドしながら動かす（ドラッグ操作））だけです。

# ひとこと
ふとしたきっかけでウィンドウが動いたので、なんだろうと思い操作を反芻したところ、この操作を会得しました。
【SQL基礎】SELECT,FROM,WHERE,LIKEについて。

## データベースの仕組み
データベースは表でデータ管理をしている。
表のことを「テーブル」と呼ぶ。
縦の列のことを「カラム」、横の列のことを「レコード」と呼ぶ。

## SQLとは
SQL(エスキューエル)とはクエリを書くための言語。

SQLは大文字と小文字を区別しないため、小文字で記述しても問題ない。


## クエリとは
データベースに送る命令がクエリ。

データベースからデータを取得するためには、「データを取得してください」といったようにデータベースに送る命令（クエリ）が必要。

### SELECT
SELECTを用いて、「どのカラムのデータを取得するか」を選ぶ。

複数のカラムからデータを取得する場合は、図のようにカラム名をコンマ（ , ）で区切る。

```SQL:sample.sql
SELECT name,price
```

全カラムのデータを取得する場合は「＊」の記号を用いる。

```SQL:sample.sql
SELECT *
```

### FROM
「FROM」を用いて、SELECTで選んだカラムが「どのテーブルのカラムか」を指定する。

### WHERE
「WHERE」を用いて、「どこのレコード（横の列）を取得するか」を指定する。

データ型が「テキスト型」「日付データ」のものはダブルクオーテーションで囲む。

```SQL:sample.sql
WHERE category = "hoge"
WHERE purchased_at = "2017-07-01"
```

比較演算子を使うことで数値の絞込みができる。

```SQL:sample.sql
WHERE price >= 1000
WHERE purchased_at <= "2017-07-01"
```

### LIKE
「ある文字を含むデータ」を取得したい場合は、「〜のような」という意味を持つ、「LIKE演算子」を用いる。

```SQL:sample.sql
-- nameカラムが「プリン」を含むデータを取得

SELECT *
FROM purchases
WHERE name LIKE "%プリン%";

-- nameカラムが「プリン」で始まる（前方一致の）データを取得

SELECT *
FROM purchases
WHERE name LIKE "プリン%";

-- nameカラムが「プリン」で終わる（後方一致の）データを取得

SELECT *
FROM purchases
WHERE name LIKE "%プリン";

```
Scala：HMAC値を求める方法(Hash-based Message Authentication Code）


# はじめに
- Microsoft TeamsのOutgoingWebhookのメッセージ認証で使用したりします。
    
# 実装

```scala

//インポートファイル
import javax.crypto.Mac
import javax.crypto.spec.SecretKeySpec
import java.util.Base64


//（A)シークレットキー（セキュリティトークン）
val secretKey="//送信Webhook作成時に払い出されたコード//"
//（B)サーバーから送信されたメッセージのハッシュ値
val authorizationHmac="//Requestデータのauthorizationヘッダーの値//"
//（C)ハッシュ値がほしいデータ
val msgBody="//RequestデータのBodyの値//"


//（１）アルゴリズムをHMAC SHA256に設定
val algo="HmacSHA256"

//（２）アルゴリズムを指定してMAC(Message Authentication Code)インスタンスを作成
val mac:Mac  = Mac.getInstance(algo)

//（３）シークレットキーをBASE64でデコード
val secretKeyByte= Base64.getDecoder.decode(secretKey)

//（４）BASE64でデコードしたシークレットキーとアルゴリズムを指定してSecretKeySpecインタンスを作成
val sk:SecretKeySpec  = new SecretKeySpec(secretKeyByte, algo)

//（５）MACにシークレットキーを指定して初期化
mac.init(sk)

//（６）msgBodyをByteに変換してからdoFinalメソッドでハッシュ値を作成
val msgBodyHash=mac.doFinal(msgBody.getBytes("UTF-8"))

//（７）ハッシュ値をBASE64にエンコードして接頭に"HAMC "を付けてHAMC値が完成
val msgBodyHmac:String="HMAC %s".format(Base64.getEncoder.encodeToString(msgBodyHash))

//（８）求めたHMAC値とリクエストヘッダのauthorizationの値を比較
if(authorizationHmac==msgBodyHmac){
 //実際にはHttpのStatusCodeを200で返したり正常系の処理につなげる
 println("HMAC認証OK!")
}else{
 println("認証失敗・・")
}

```

以上。
ホスティングサービス比較

# ホスティングサービス比較
無料のホスティングサイトがいくつかあるため、備忘も兼ねて、比較をまとめました。

## 対象サービス
- Netlify
- Heroku
- FireBase
- Vercel（旧ZEIT Now）


## Netlify料金プラン

|プラン|Starter|Pro|Business|
|:-:|:-:|:-:|:-:|
|**金額**|$0|$45/month|$1,000/month|

## Heroku料金プラン
|プラン|Free|Hobby|Standard|Performance|
|:-:|:-:|:-:|:-:|:-:|
|**金額**|$0|$7/month|$25-500/month|$25-500/month|

## FireBase料金プラン
|プラン|Spark|Blaze|
|:-:|:-:|:-:|:-:|:-:|
|**金額**|$0|従量制|

## Vercel（旧ZEIT Now）料金プラン
|プラン|Free|Hobby|Pro|Business|Enterprise|
|:-:|:-:|:-:|:-:|:-:|:-:|
|**金額**|$0|$0|$20/month|$200/month|Custom|

## 比較
|比較内容|Netlify|Heroku|FireBase|Vercel（旧ZEIT Now）|
|:-:|:-:|:-:|:-:|:-:|
|**会社**|Netlify|Salesforce|Google|Vercel|
|**用途**|・ホスティング|・APPサーバ<br/>・ホスティング|・APPサーバ<br/>・ホスティング|・APPサーバ<br/>・ホスティング|
|**無料枠**|Starter|Free|Spark|Free/Hobby|
|**カスタムドメイン**|無料|Hobby以降|無料|無料|
|**Basic認証**|Pro以降|無料<br/>実装要|無料|無料<br/>実装要|
|**SSL/TLS**|無料|Hobby以降|無料|無料|
|**GitHub連携**|〇<br/>無料|〇<br/>無料|×<br/>CI/CDサービスで代用|〇<br/>無料|


# まとめ
無料枠の範囲だと、差がありますが、用途に応じて選択するのが良いと思います。
本日の学習内容part2

##参考記事
https://phpjp.com/sha1.php

##パスワードの暗号化(sha1)
あるパスワードをDBに登録時に暗号化した(ハッシュ計算)後、ログイン画面で入力したパスワードがDBのパスワード(暗号化済み)と合っているかどうかをチェックする時は暗号化を行う。

```login.php
if ($_POST['password'] !== '') {
    $login = $db->prepare('SELECT * FROM members WHERE password=?');
    $login->execute(array(
      sha1($_POST['password'])
    )); 
    $member = $login->fetch();
```
##感想
学習した内容を上手く文章に出来なくててもどかしい(笑)　これからそのスキルも磨いていきたい。
AWSプラクティショナー よく見る単語①

##概念でよく見る単語
**・クラウド**
インターネット経由で仮想サーバやデータベース(DB)、ストレージとかアプリケーションなどを使いたい時に使った分だけ課金(オンデマンド)して利用できるサービスのこと。

**・オンプレミス**
クラウドと違って、サーバやソフトウェアなどの設備を自分たちで導入して運用していくシステムのこと。自分たちで予想を立てて準備する必要があるので、無駄なコストや工数がかかることが多い。

**・Design for Failure**
故障に対しての処理を事前に備えておくこと。
オシャレに、単一障害点(SPOF)をなくす構築とか言うらしい。

**・疎結合**
部品同士の結びつきが弱く、個々の独立性が高い状態の結合のこと。
独立性が高いと他で問題が発生しても、自分には影響ないよって状態を作りやすい。
キューイングチェーンとか、マイクロサービスアーキテクチャで疎結合にできる。

**・弾力性**
伸縮性って考えたほうが個人的にわかりやすい。
スケーリング(サーバ増やしたり減らしたりする)でよく出てくる考え方。

**・Auto Scaling**
忙しくなったら勝手にスケーリングしてくれる。ちなみにタダでやってくれるそう。
EC2概念あたりでよくみる単語。

**・スケールアウト**
サーバの台数を増やすことで負荷を減少させるスケーリング。
水平スケーリングともいわれているそう。

**・スケールイン**
もともとあるサーバの性能を向上させて負荷に強くさせるスケーリング。
垂直スケーリングともいわれているそう。

**・AWS Well-Architectedフレームワーク**
ベストプラクティス集。
信頼性、セキュリティ、効率、最適化、コスト効率が高い設計とはこうするべきってものを集めたやつ。

##セキュリティでよく見る単語
**・責任共有モデル**
AWSが責任を持つのか、それともユーザが責任を持つのか。
基本的に、AWSはクラウド本体(物理的なもの)、ユーザはクラウド内(物理的でないもの)に責任を持つようになってる。

**・ルートアカウント**
すべての操作をすることができるアカウント。（最強のアカウント）
ふつうはこいつを利用せずに、権限をそれぞれ付与したユーザを作成してこれを利用する。

**・IAM**
ユーザのアクセス管理サービス。
IAMユーザやIAMグループを作成することでAWSの各リソースに特定のユーザやグループのみアクセスできる権限を与えることができる。

**・IAMロール**
EC2やLambdaに権限を付与できる。
APIキーをユーザ側で管理する必要がなくなるので便利。

**・AWS Shield**
DDoS攻撃(めっちゃ重いデータをわざと多く送ってくる攻撃)から護ってくれるやつ。

**・AWS WAF**
Webアプリケーションを護ってくれるファイアウォール。
基本利用料はタダ。許可とかブロックは自分で設定する必要あり。

**・Amazon API Gateway**
APIの作成、公開、保守を簡単にできるようにしてくれる。

**・Inspector**
自動的にアプリケーションを評価して重大性の順と結果を出してくれる。
オシャレに、脆弱性診断を自動で行うサービスといえる。

##システム構築でよく見る単語
**・リージョン**
サービスをどこで使用するかを地域ごとに選択できる。
2020年3月時点で22個あるそう。

**・アベイラビリティゾーン（AZ）**
各リージョン内に必ず2つ以上ある。
AZを複数持つことで、耐障害性の高いシステムを構築することができる。
同一リージョン内のAZは低レイテンシー(遅延が少ない)接続をしている。

**・エッジロケーション**
リージョンとは異なる場所に150カ所以上ある。
低レイテンシーなDNSクエリの実現や、配信のために利用される。

**・Amazon Route 53**
DNSサービス。
ドメインに対してのIPアドレスをマッピングして問い合わせに回答していく。(一般的なDNSサービスといっしょ）
Multi-View Stereo on Consistent Face Topology のメモ

## 背景

* 多視点画像から, 人物 face の高精細なメッシュを復元したい.

今回は Multi-View Stereo on Consistent Face Topology を取り上げます.

## 論文

Multi-View Stereo on Consistent Face Topology
http://vgl.ict.usc.edu/Research/XimeaRiver/

## 内容

### template mesh

なんらかのクリーンなトポロジを持つ template mesh があるとよい.
artist が作ったものが理想.

論文では Digital Emily model を template mesh として利用.

左右対称にするために, 形状処理をして頂点の位置を対象にしている.

### volumetric 表現

volume 表現(tetra mesh)をすることにより, フィッティングの精度をあげる.
mesh の tetra mesh 生成には tetgen

http://wias-berlin.de/software/index.jsp?id=TetGen&lang=1

https://github.com/ufz/tetgen

libigl でも使えるかしら?
https://github.com/libigl/tetgen

## facial landmark 検出

おなじみの dlib を使って facial landmark を検出する.

## PCA

## Laplacial Legularization

T.B.W.

Rigid stabilization of facial expressions
https://studios.disneyresearch.com/2014/07/27/rigid-stabilization-of-facial-expressions/

Ananatomically-constrained local deformation model for monocular
face capture
https://www.youtube.com/watch?v=u5k2EjsIY2Q
 
### 目まわり(eye socket)

T.B.W.

## HW

- Ximea 2048x2048 monochrome カメラ x 12 台
- LED blue light
  - 72 Hz
Eclipseのショートカットキー（Windows,Mac）

自宅ではmac、現場ではwindowsを使用しています！
エンジニア経験がまだ浅い為、開発効率を上げるという事で辞書がわりにここにショートカットを記しておこうと思いました！

絶対覚えておいたほうが良い！
----------------------

|                   |   windows   |   mac   | 
|:------------------|------------:|---------:|
|インデント|Ctrl+shift+F|command+⇧+F|
|コメントアウト(解除)|Ctrl+/または<br>Ctrl+Shift+C|command+/または<br>command+⇧+C|
|宣言を開く|F3|F3|
|javadockコメント|Alt+Shift+J|option+command+J|
|ステップイン|F5|F5|
|ステップオーバー|F6|F6|
|ステップリターン|F7|F7|
|再開|F8|F8|

**補足**
<details><summary><font color="Blue">javadockコメント</font></summary>プログラムについて説明するドキュメントを生成する為に記述するコメントの事です。現場では必須の物となります。</details>

<details><summary><font color="Blue">ステップイン</font></summary>デバック時に使用するもので、一時停止している次の行に進んで一時停止します。対象行でメソッドを呼び出す場合、呼び出し先のメソッドに入り先頭で一時停止します。</details>

<details><summary><font color="Blue">ステップオーバー</font></summary>デバック時に使用するもので、一時停止している次の行に進んで一時停止します。ステップインとの違いは、対象行でメソッドを呼び出している場合などは、それらの処理を行ってから次の行に進みます。</details>

<details><summary><font color="Blue">ステップリターン</font></summary>デバック時に使用するもので、実行中のメソッドのreturnまで行って、呼び出し元のメソッドに戻った時点で一時停止します。</details>



研修時代は、１行づつ頑張ってインデントしていました！
これを知った時は感動して、今までの自分の時間はなんだったんだと思いました！
コメントアウトもわざわざ行頭と行尾に”/**/”をつけていました、、、
ショートカット大事ですね。

あと、javadockコメントは現場では必ず付けてください！
僕はその常識がわからず、恥をかきました。



覚えておくと早くなる！便利！
------


|                  |windows     |           mac|
|:-----|------------:|--------:|
| 実行|Ctrl+F11|⇧+command+F11|
| デバック|F11|command+F11|
| アシスト|Ctrl+space| (*)環境設定|
| 自動インポート|Ctrl+Shift+O| command+⇧+O|
| 指定行へジャンプ| Ctrl+L| command+L|
| 検索、置換|Ctrl+F| command+F|
| 対応する大括弧にジャンプ| Ctrl+Shift+P|⇧+command+P|
| タブ検索|Ctrl+E|command+E|
| 変数名一括変更|Alt+Shift+R|option+command+R|

<details><summary><font color="Red">(*)</font></summary> macでは、デフォルトで「control+space」で設定されていますが実際にeclipse上で押してみると
Spotlight検索が開いてしまいます。eclipse側よりOS側のショートカットが優先されてしまいます。
なので、eclipse側のショートカットを変えるか、OS側を変えてコンフリクトを解消しましょう。
eclipse側は、「eclipse」→「環境設定」→「一般」→「キー」から変更する事が出来ます。</details>

**補足**
<details><summary><font color="Blue">変数名一括変更</font></summary>こちら、とても便利なので補足させていただきます！<br>
クラス名や、メソッド名、そして、変数名など、関連する箇所を一緒に修正できます。
①変更したい、名前を選択してからショートカット押下。
②名前が四角で囲まれたら、新しい名前を入力し、Enterを押下</details>

自動インポートを知った時の衝撃は今でも忘れられません。
なんかエラーになってるなと思ってCtrl + Shift + Oを押すとエラーが一気に消えます！
その時の爽快感はたまりません。
※必要なパッケージを追記するもので、エラーを解消するショートカットではありません。
ちなみに、保存アクションで自動でやってくれるように設定もできます。

実行は、いまだに右クリックでやってしまいます。
むしろショートカットで実行している人、僕は見た事ないかもしれません、、
自然に使えるようになりたい。


マウス操作で妥協、、（僕の場合）
---


|                 |windows     |           mac|
|:----------------|------------:|----------:|
| 呼び出し階層を開く  　   | Ctrl+Alt+H    | control+option＋H     |
| 新規                  | Ctrl+N         | command+N         |
| 新規メニュー            | Alt+Shift+N   | option+command+N |
| プロパティ            | Alt+Enter   | option+return |
| 閉じる            | Ctrl+W   | command+W |
| 全て閉じる  | Ctrl+Shift+W   | command+⇧+W |
| 起動方法を指定して実行|Alt+Shift+X| option+command+X |
| ブレークポイント切り替え|Ctrl+Shift+B| ⇧+command+B |
| 次のビュー|Ctrl+F7|command+F7 |
| 前のビュー|Ctrl+Shift+F7|command+⇧+F7 |
| 次のエディター|Ctrl+F6|command+F6 |
| 前のエディター|Ctrl+Shift+F6|command+⇧+F6 |
| 次のタブ|Ctrl+PageDown|control+fn+↓ |
| 前のタブ|Ctrl+PageUp|control+fn+↑ |




マウスが嫌いな人は使うと良いと思います！

まとめ
----
初めてのqiitaでの投稿なので突っ込みどころも多々あるかもしれませんが、
自分と、まだ開発経験の短い方の参考になればと思います！
VSCodeの自動補完機能が便利すぎる

#VSCodeの自動補完機能の使い方

HTMLファイルを作成する時、**!DOCTYPE・・・**とか、**div class=・・・**とか一つ一つ記述するのは結構めんどくさいですよね:joy:<br>
そんなときは、VSCodeの**自動補完機能**を使ってラクしちゃいましょう！！
例えば、**!**を入力した後に**tab**を押すと、下記の記述が自動で生成されます。

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>
```

**div.content**を記述して**tab**を押すと

```
<div class="content">
</div>
```

**div#container**を記述して**tab**を押すと

```
<div id="container">
</div>
```

**button.btn**を記述して**tab**を押すと

```
<button class="btn">
</button>
```

と言ったように、色々な記述に使えるのでとっても便利です:thumbsup:<br>
cssを読み込むlinkを記述する際は、**link**と書くと候補の中に**link:css**があるので、
そこで**tab**を押すか選択すると

```
<link rel="stylesheet" href="style.css">
```

が自動生成されます。

タイプミスを防ぐためにも、ぜひ一度試してみてください！
他にもここで紹介していない自動補完でオススメのものがあれば、教えていただけると幸いです。
以上、ここまで読んでいただきありがとうございました！
CharucoBoard出力【OpenCV】

# 概要

ただの備忘録。そのうち引数の意味を書くかも。

```python

from cv2 import aruco
import cv2

aruco_dict = aruco.Dictionary_get(aruco.DICT_6X6_250)
board = aruco.CharucoBoard_create(7, 5, 1, .5, aruco_dict)
imboard = board.draw((2000, 2000))
cv2.imwrite("chessboard.jpg", imboard)
```
Javascript での、時計の作り方。

#Javascriptのコードで時計を作る。
html5での記述は、
![スクリーンショット 2020-03-21 16.36.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606144/f7ebd2ae-bd47-28fd-e1ff-6873114275eb.png)
この、p id="watch" 以下に、時計の値を入れる。
その式は、
![スクリーンショット 2020-03-21 16.50.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606144/97fbbbf5-8d64-579b-5567-0b81514fe18d.png)
window.addEventListener('load', でロードイベントを開始、
id="watch" の中身をリスニングし、window.setInterval(function(){ でインターバルを、とじカッコである、,1000); で一秒ごとに繰り返し動く、インターバルをセット、（setTimeout(function(){},1000);)は1度だけのタイマー、インターバル、リピート＝true、の状態で開始される。
関数である、new Date(),getHours(),getMinutes(),getSeconds()はそれぞれ、電波時計の時間をキャッチするもので、new Date()、で現在時間を取得。get~で時間、分、秒をとり、2桁に、するために、自作関数、zero2D()の中に入れて2桁表示に変える。
jQueryで文字数オーバー表示

#文字数オーバー時の処理
某スクールでフリマアプリの作成をしていて文字数制限をつけました。
今後また個人アプリなどでも付けそうなのでまとめておきます。
説明しやすくする為、左に配置しています。

[![Image from Gyazo](https://i.gyazo.com/8053f88487764623e5c7f649661e5adb.gif)](https://gyazo.com/8053f88487764623e5c7f649661e5adb)

###エラー表示
今回は商品名４０文字を超えると、エラー文が出るようにしています。
４０文字ちょうどの場合は青でわかりやすくしています。

####まずコードから
```items.js
$(function(){
  $("#item_name").on('keyup', function(){
    var count = $('#item_name').val().length;
    $('#nameCount').html(count);
    if (count > 40){
      $('.name-count').css("color","red");
      $('#nameOut').css("display", "inline-block");
    }
    else if(count == 40){
      $('.name-count').css("color","blue");
      $('#nameOut').css("display", "none");
    }
    else{
      $('.name-count').css("color","black");
      $('#nameOut').css("display", "none");
    }
  })
});
```
```
$("#item_name").on('keyup', function(){
    var count = $('#item_name').val().length;
    $('#nameCount').html(count);
```
これで#item_name（今回は商品名のformID）で入力した時の文字数をcountに定義。#nameCount(HTML上で0/40の0と記入しているspan部分）に入力した文字数を代入できます。

####条件分岐
４０文字以上、丁度、それ以外で分岐させます。

```items.js
if (count > 40){
      $('.name-count').css("color","red");
      $('#nameOut').css("display", "inline-block");
    }
    else if(count == 40){
      $('.name-count').css("color","blue");
      $('#nameOut').css("display", "none");
    }
    else{
      $('.name-count').css("color","black");
      $('#nameOut').css("display", "none");
    }
```
40文字を超えるとdisplay: noneしてあるspanタグをinline-blockに変更し、文字数オーバーを表示させる。
再度４０文字以下になった時に、赤文字やエラー文が消えるようにelse以下もしっかり記入しましょう。
書かないと赤字のままです。

####リファクタリング
if文の中は同じような記述になっている為、まとめてしまいましょう。

```items.js
if (count > 40){
      changeCss("red","inline-block")
    }
    else if(count == 40){
      changeCss("blue","none")
    }
    else{
      changeCss("black","none")
    }

function changeCss(c,d){
  $('.name-count').css("color", c);
  $('#nameOut').css("display", d);
}
```
下にchangeCssの関数を定義することでスッキリしたコードで書けます。
チーム開発時などはコメントアウトなどしておくといいかもしれません。
今後はこれを基本にtwiiterみたいな表記で丸を使って文字数表すなんかにも挑戦していきたいです！
[![Image from Gyazo](https://i.gyazo.com/6cf25eba2aea210c2ce8a5f8a9cbe198.gif)](https://gyazo.com/6cf25eba2aea210c2ce8a5f8a9cbe198)

###反省
反省としてはjQueryとJavaScriptの書き方がごちゃごちゃになってしまい実装に時間がかかったところです。
今回で言うとhtmlをinnerHTMLと記述していてずっと0/40の初期値0がconsole.logで確認してもundefinedになっていました。
.cssを.styleと書いてしまったり。。。いい勉強になりました笑

持ってこれるはずのところが持ってこれない場合はそもそもJavaScriptと書き方が混ざってないかも確認していきたいです。
間違えているところあったら申し訳ございません。
閲覧ありがとうございました！！
[Docker] Cheat sheet

# Docker

## 全コンテナの一覧表示
```shell
$ docker ps -a
CONTAINER ID        IMAGE                        COMMAND                  CREATED              STATUS                     PORTS               NAMES
20d739e7aa4c        hmiyakoshi0803/neo4j:4.0.2   "/sbin/tini -g -- /d…"   About a minute ago   Exited (0) 7 seconds ago                       docker_db_1
```

## 停止しているコンテナの一括削除

- `-f`オプションを付けると確認されない (Do not prompt for confirmation)

```shell
$ docker container prune -f
Deleted Containers:
20d739e7aa4cac4209c50b00ba5c357432b0c4124354f23c92773d3c74f189ec

Total reclaimed space: 115.1MB
```

## コンテナの中に入る
```shell
$ docker exec -it [コンテナ名] /bin/bash
```


# docker-compose

## dockerイメージビルド
- `--no-cache`オプションを付けないとキャッシュがあればそちらを優先的に使ってビルドする
- Dockerfile変更時は付けた方が良い

```shell
$ docker-compose build --no-cache
```


## イメージ構築&コンテナ構築&実行
`-d`オプションを付けるとバックグラウンド実行される
- `--build`オプションを付けることで、イメージの構築から、コンテナの構築・起動までを行う

```shell
$ docker-compose up -d --build
```

## 実行停止&コンテナ削除&ネットワーク削除

```shell
$ docker-compose down
```

- `--rmi all`を付けることでイメージも削除可能
- `--volumes`を付けることでvolumesセクションに書かれた名前付きボリュームとコンテナにアタッチされたanonymous volumeが削除される

```shell
$ docker-compose down --rmi all --volumes
```



# 参考
[docker-composeでbuildする時にcacheを使わない](https://qiita.com/setouchi/items/e01557ae4647b8e3b1bc)
[docker-compose `up` とか `build` とか `start` とかの違いを理解できていなかったのでまとめてみた。](https://qiita.com/tegnike/items/bcdcee0320e11a928d46)
[Docker一括削除コマンドまとめ](https://qiita.com/boiyama/items/9972601ffc240553e1f3)
[《滅びの呪文》Docker Composeで作ったコンテナ、イメージ、ボリューム、ネットワークを一括完全消去する便利コマンド](https://qiita.com/suin/items/19d65e191b96a0079417)


# おまけ
- `docker-compose`と打つのが長いので、`alias`登録してやる

```shell
$ cat ~/.bash_profile 
・ ・ ・
# alias
alias dc='docker-compose'
```


以上