OmniAICreator/Qiita-1.07M huggingface dataset:
[deploy]RailsアプリをGCPにデプロイ！②~Nginx導入~

[前回](https://qiita.com/Yukina_28/items/931a7fca0bc618a81222)の続きです。
今回はGCPのリソースを自分がいつも使っているターミナルで操作できるよう、gcloudコマンドをインストールして、NginXの導入まで行いました。

# 流れ
`1.gcloudコマンドのインストール`
`2.gcloudコマンドを使ってssh接続`
`3.Nginxの導入`

## 1.gcloudコマンドのインストール

こちらについてはこの方の解説がとてもわかりやすかったので、参考にさせていただきインストールしていきました。

[GCPのgcloudコマンドのインストールと最初の認証までを初心者向けに細かく解説](https://qiita.com/G-awa/items/e6904b040caa0096fba0)

## 2.gcloudコマンドを使ってssh接続
ターミナルでgcloudコマンドが使えるようになったので、ssh接続します。
この方の解説を参考にしながら↓行いました。
[Google Compute Engine（GCP）のポート（sshd）設定でハマった](https://qiita.com/banrui/items/60d950fd7040fd7b3c5e)

私の場合はすでにPort番号を変更していたため、変更後のPort番号で接続します。

```
gcloud compute --project "プロジェクト名" ssh --zone "us-east1-b" "XXXXX-instance" --ssh-flag="-p XXXXX"
```
プロジェクト名は、GCPメニュー画面の`Computer Engine`>`VMインスタンス`から
自分が作ったVMインスタンスの右端「gcloudコマンドを表示」から確認することができます。
![ 2019-11-15 14.53.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532695/b57ca722-0c7b-5c1b-952e-d19840763c24.png)


ログインが成功すると、ターミナル上で

```
sudo semanage port --list | grep ssh
```
などのコマンドが使うことができるかと思います！


## 3.Nginxの導入

ほぼこの方の手順を参考にさせていただきました。
https://www.rem-system.com/centos-nginx-inst/#5

少し違う点としては、この方はリポジトリを追加してnginxをインストールしていたのですが自分の場合、
デフォルトのリポジトリにnginxがあったため、デフォルトのものをインストールしました。
具体的には、`sudo yum install nginx`コマンドを使ってインストールしました。

nginxをスタートし、動作しているか確認してみます。

```
sudo systemctl start nginx
sudo systemctl status nginx
```

一度nginxに接続できるか試してみます。

```
curl localhost
```

html形式のファイルの中身が返って来れば大丈夫です。

最後にGCPメニュー画面の`Computer Engine`>`VMインスタンス`の自分の作ったインスタンスに表示されているIPアドレスをコピーして、ブラウザのURLバーに
`http://[コピーしたIPアドレス]`を入力すると
![ 2019-11-15 12.07.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532695/719056a7-b0df-ab3e-513e-50cf2bf7c1b8.png)
この画面にたどり着くことができました！

＊自分の場合、`httpsプロトコル`でアクセスしてしまい接続されず、つまづいてしまいました...。

続きはこちら→[[deploy]RailsアプリをGCPにデプロイ！③~アプリをgit cloneするまで~](https://qiita.com/Yukina_28/items/8390e53bc9a7b95ff020)
Twitter API登録が終了しました。

![スクリーンショット 2019-11-16 22.35.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534334/0e3e9764-f389-d176-b9c8-900e6d5cb9df.png)

申請から承認まで、24時間かからなかったですね。
昔の申請は3週間もかかっていたという記事があったので、現在は早くなっているのかもしれません。

これからTwitter APIを使ってデータ分析をしてみたいと思います〜。
【Oracle SQL】SELECT文で行数を制限(LIMIT)する方法

## FETCH FIRST {N} ROWS ONLY;
上からN行を取得

```sql

SELECT val
FROM   rownum_order_test
ORDER BY val DESC
FETCH FIRST 5 ROWS ONLY;

       VAL
----------
        10
        10
         9
         9
         8

5 rows selected.
```

## OFFSET {N1} ROWS FETCH NEXT {N2} ROWS ONLY

上からN1行後のN2行を取得

```sql
OFFSET N1 ROWS FETCH NEXT N2 ROWS ONLY
```

上から4行後の4行を取得

```sql

SELECT val
FROM   rownum_order_test
ORDER BY val
OFFSET 4 ROWS FETCH NEXT 4 ROWS ONLY;

       VAL
----------
         3
         3
         4
         4

4 rows selected.
```

# 参考
https://stackoverflow.com/questions/470542/how-do-i-limit-the-number-of-rows-returned-by-an-oracle-query-after-ordering
Amazonの長い商品URLを短縮するサイトを作った


Amazonのリンクが長すぎて「会計freee」の備考欄の文字数制限を超過して困ったので短縮してくれるWebサイトを作りました。

# サイト

[Amazon URL Shortener](https://nigimitama.github.io/amazon-url-shortener/)

# デモ

![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201348/2b6edcbf-1de1-9c30-c238-939b1470df7c.gif)


# 仕組み

Amazonの商品URLは

https://www.amazon.co.jp/%E8%A3%85%E7%94%B2%E9%A8%8E%E5%85%B5%E3%83%9C%E3%83%88%E3%83%A0%E3%82%BA-DVD%E3%83%A1%E3%83%A2%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9-%E9%83%B7%E7%94%B0%E3%81%BB%E3%81%A5%E3%81%BF/dp/B0002ZMAPG/ref=pd_sbs_74_6/355-5313234-1281857?_encoding=UTF8&pd_rd_i=B0002ZMAPG&pd_rd_r=230fbb1e-c255-4acd-87f4-3fe548aaba43&pd_rd_w=4i7fe&pd_rd_wg=RrPzn&pf_rd_p=1585d594-d9d0-474b-8a4e-69eca1566911&pf_rd_r=TZ5MAFSCPPE3S84C9ZR4&psc=1&refRID=TZ5MAFSCPPE3S84C9ZR4

みたいな形になっていますが、ドメイン名（`amazon.co.jp`）と商品のIDであるASIN（Amazon Standard Identification Number）の部分（`631764232X`）とASINの前に付く部分（`/dp/`）があれば有効なリンクとなります。

上の例だと

https://amazon.co.jp/dp/B0002ZMAPG/

でいいわけです。

なので正規表現と文字列処理のメソッドを使えば短縮URLは簡単に作ることができます。

そういう感じの処理をするメソッドをjsで書いてhtmlに埋め込んだものが本ウェブサイトになります。


# コード

[nigimitama/amazon-url-shortener: shorten URL of Amazon.com](https://github.com/nigimitama/amazon-url-shortener)

普段JSを使わないので、なにか瑕疵があれば教えていただけると幸いです。

# 参考

- [Amazonの商品ページURLフォーマットに関するメモ - Qiita](https://qiita.com/Feburic/items/6e918b1a9345367622c9)
- [Amazonの長い商品ページURL、短縮できるって知ってた？ ｜IT小ネタ帳](https://setsuzoku.nifty.com/koneta_detail/170519000293_1.htm)
Roblox Studioの使い方①

# マウスでカメラをうごかす
## ①マウスの真ん中のボタン
### 押し込んでマウスを動かすと、カメラがZ固定でXY方向へ動かせる
### ホイールを回転させると、ズームイン、ズームアウト
## ②押し込んでマウスを動かすと、座標固定で角度を360度自由に動かせる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/e4c7c2f9-66ef-b7aa-7b04-df9a27277a48.png)

# 小さなブロック（Part）を追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/5e791e2e-653a-0d75-d5f7-a11a8efc779c.png)


# 木とか建物とか敵をドラッグアンドドロップで追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/78c8bbac-3844-02a9-c629-e0b9097fdcd7.png)

# スマホ版とPC版の画面切り替え
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/14443e71-fc10-c5ad-9ea4-f24cde5f6c44.png)

# 自分のつくった世界へ入って遊ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/31d0129f-95a1-a27c-34e5-e86930d807e9.png)
CoreOS関連メモ

Download先

https://coreos.com/os/docs/latest/booting-with-iso.html

SSHログオン用のパスワード設定
rebootした時はもう一度

$sudo passwd core


cloud-configファイルに記載するためにパスワードを手元で生成。
Make Password
$ sudo openssl passwd -1
※設定しようとするパスワードを入力。暗号化済みのものが表示される。これをcloud-config.ymlに記載。

Config file
 node01-cloud-config.yml

--------------------
 #cloud-config

 # ホスト名
hostname: node01

coreos:
  units:
    # 静的ネットワーク設定
    - name: static.network
      runtime: no
      content: |
        [Match]
        Name=ens192 # インタフェース名
        [Network]
        Address=xxx.xxx.xxx.xxx/xx # IPアドレス/サブネットマスク
        Gateway=xxx.xxx.xxx.xxx # デフォルトゲートウェイ
        DNS=xxx.xxx.xxx.xxx # 1つめのDNS
        DNS=xxx.xxx.xxx.xxx # 2つめのDNS
<BR>
     - name: timezone.service
      command: start
      content: |
        [Unit]
        Description=timezone
        [Service]
        Type=oneshot
        RemainAfterExit=yes
        ExecStart=/usr/bin/ln -sf ../usr/share/zoneinfo/Japan /etc/localtime

users: # ユーザ名を指定（ログインユーザ）
  - name: core
    passwd: $1$7JJbYswv$lw0lVUsj2aDnr7h2DiIH.1 "$ sudo openssl passwd -1" の結果を貼り付ける。
    ssh-authorized-keys:
      - "ssh-rsa A..."
    groups:
      - sudo
      - docker

「ssh-authorized-keys:
      - "ssh-rsa A」を付け加えることでPassword認証なしでログオン可能に。


$ sudo coreos-install -d /dev/sda -C stable -c node01-cloud-config.yml

$ sudo shutdown -r now
※CDROMマウントを解除することを忘れずに
※DISKを再利用する場合は、fdiskでパーティションを解除したからがオススメ
Pythonをexeファイルに変換する方法

Pythonで作成したファイルを、Pythonが入っていないPCで実行したい。
そんな悩みを解決するためのツールをシェアさせていただきます。
あくまで、自分用のメモの拡張版なのでクオリティーに関してはご愛嬌でお願いします。
#1.環境構築
#####コマンドプロンプトの場合

```:コマンドプロンプト
pip install pyinstaller
```

#####Anacondaプロンプトの場合。

```:Anacondaプロンプト
conda install pyinstaller
```

#2.実行

```:プロンプト
pyinstaller [ファイル名].py --onefile
```



#注意点

- 最後のオプションにある`--onefile`の入力を省くとdist内のファイルが複数必要になるので移動がめんどくさくなります。
- inputなどのコマンドプロンプトで入力を求めるものなどは、できないので注意してください。
【PHP】SESSIONも危ない！セキュリティを見直そう。

## 初めに
みなさんは、

```php
session_start();
```

だけでセッションを利用していませんか？もし、この一行だけでsessionを使用しているのなら、直ちに変更したほうがいいでしょう。
## どこが危ないのか
セッションの仕組みをもう一度確認してみましょう。
まず、サーバーが初アクセスのプレイヤーにクッキーでIDを作成し保存します。
そのあと、セッションIDをアクセス毎に確認し、保存データからHTML等を生成します。

ここで注意する点が、***Cookieでsessionidを保存する***ということです。
Cookieとは、クライアント側で変更可能(ほとんどのブラウザで可能)なため、友人のsessionidを盗めばログインもできてしまいますし保存データもすべてアクセスできてしまいます。

つまり、ほとんどのサイトがsessionにログインデータを保存しているので、ユーザーを識別するためのsessinidが盗まれてしまえば保存されているデータも盗まれるということになりますし、メモサイトであればメモのデータを変更さえ削除さえできてしまいます。

簡単な事例としては、パソコンを教えに来た(ミラサポのようなサービス)人がデータを盗むのは簡単でしょう(そこまでの悪事を働く人はそういないと思いますけども)。
## 対策しているサイト/していないサイト
対策しているサイト/していないサイトを独自で調べたのでまとめます。

|サイト/サービス名|ドメイン名|対策|
|:-----------------|------------------:|:------------------:|
|Google|google.com|不明(多分してあると思うが作りが複雑) |
|Qiita|qiita.com|対応(やるとコピーした側、コピーする側の両方がログアウトする)|
|ネットショップ作成BASE|base.com|非対応|
|MyNintendoStore|store.nintendo.co.jp|対応しているよう|
|プログラミングを学べる！Scratch|scratch.mit.edu|非対応|
|teratail|teratail.com|対応しているよう|
|Amazon|amazon.com|非対応(セッションID以外のデータもコピーが必要)|
(基準:セッションID等保存データをコピーした時ログインされるかどうか。)
基準はCookieのsessionid貼り付けと関連していそうなものがあったとき張り付けたときログインされるかされないかです。(自己判断なので間違っていたらコメントください。)
## 対処法は？
### 方法1 IPアドレスで確認
```php
<?php
session_start();
if(isset($_SESSION["ipdata"])){
  if( !$_SESSION["ipdata"]===$_SERVER["REMOTE_ADDR"] ){
    exit("いつもとちょっと違うからログインを一時停止中");
  }
}else{
  $_SESSION["ipdata"]=$_SERVER["REMOTE_ADDR"];
}
 ?>
```
メリット・デメリット

メリット:

- 簡単
- 処理が少ない
- パソコンのみサイト向け

デメリット:

- 可変IPの場合使い物にならない=wi-fiでないと動かない

これは本当に本当に推奨できません。というかこの方法でやらないでください。ユーザーに迷惑をかけてしまいますから。(しばらくするとすぐログアウトするようなサイトは皆さんも嫌いでしょう。)
### 方法2 JSも活用
今度は、phpだけでなくjavascriptも使用しやりましょう。今回は、localstorageを使用します。
index.php(ファイル名は何でも)

```php
<?php
session_start();
session_id();
$script="";
$storageSaveName="sessioniddata";
if(!isset($_SESSION["siddata"])){
  $_SESSION["siddata"]=session_id();
  $script='if(!localstorage.getItem("'.$storageSaveName.'")){
    localstorage.setItem("'.$storageSaveName.'","'.session_id().'");
  }else{
    if(!localstorage.getItem("'.$storageSaveName.'")==="'.session_id().'"){
      //ここは各自変更
      location.href="https://example.com/session_id_unset.php";
    }
  }'
}
 ?>
<script><?=$script?></script>

```

session_id_unset.php

```php
//sessionを処理するスクリプトは各自で作成お願いします。
```
## 一番手っ取り早い方法
これが一番と言えるものです。

```php
session_regenerate_id();
```

これは、セッションIDを新しいものに変更する関数で、たったこの関数一つでできてしまうのが利点です。
しかも、(PHP5.1以降)現在のセッション情報は持続されます。また、引数「delete_old_session」をTRUEに設定することにより、古いセッションを削除してくれるという強力な利点があります(デフォルトFALSE)
## 最後に
この記事でサイトを見直していただくと嬉しいです！
セッションIDはもれそうにないところで漏れることがよくあります！そのためにも、自分のサイトを閲覧者目線で、侵入者目線？で覗いてみるといいかもしれません。
不適切な点、追記したいことなどがありましたらコメント等よろしくお願いします！
Node.jsでつくるNode.js-WASMコンパイラ - もくじ

# はじめに

「RubyでつくるRuby ゼロから学びなおすプログラミング言語入門」(ラムダノート, Amazon) という本に感銘を受けて、自分でもNode.jsで小さなプログラミング言語を作ってみるシリーズをやってみました。「[ミニインタープリター](https://qiita.com/massie_g/items/3ee11c105b4458686bc1)」「[ミニコンパイラー](https://qiita.com/massie_g/items/3ba1ba5d55499ee84b0b)」ときて、三部作(?)の最後はミニNode.jsからWASMを生成する小さなコンパイラーに取り組んでいます。

# 前提環境

今回は私の環境である macOS 10.14 Mojave を前提にしています。また Node.js v10.13 で動作を確認しています。

# Node.js-WASM コンパイラー目次


- [WASM コンパイラー - 01：WASMで定数戻り値を返す](https://qiita.com/massie_g/private/3c627db366ed20b8b7fa) ... シンプルに整数値を返す実装と、WASMをNode.jsから実行
- [WASM コンパイラー - 02：四則演算を実装する](https://qiita.com/massie_g/private/e01c6b4a0834ca89fdea) ... 四則演算と、余りを実装
- [WASM コンパイラー - 03：ローカル変数を実装する](https://qiita.com/massie_g/private/e337044c3d9ca2064f60) ... ローカある変数とデバッグ用に整数値を出力
- [WASM コンパイラー - 04：比較演算子を実装する](https://qiita.com/massie_g/private/90c4055c661c42a5d1a3) ... 比較演算子を実装
- [WASM コンパイラー - 05：条件分岐とループを実装する](https://qiita.com/massie_g/private/efef9e1a909eab8ab8e4) ... if-else, while を実装
- [WASMコンパイラー - 06：文字列出力を実装しFizzBuzzを実現する](https://qiita.com/massie_g/private/2bbd6a914f1abdac195a) ... 文字列定数のサポートと、文字列の出力
- [WASMコンパイラー - 07：ユーザ定義関数を実装する](https://qiita.com/massie_g/private/be07479674881e285acc) ... ユーザ定義関数のサポート

# おまけ

- [Extra1：WASIを使ってWASMを動かす](https://qiita.com/massie_g/items/f63e711c695cec3d5950)

# 謝辞

「RubyでつくるRuby ゼロから学びなおすプログラミング言語入門」([ラムダノート](https://www.lambdanote.com/products/ruby-ruby), [Amazon](https://www.amazon.co.jp/dp/4908686017)) に感銘をうけて自分でもミニNode.jsを作って見ましたが、本を読んでいた時には気がつかなかったことが多々ありました。書籍の構成、ミニRubyの設計がとても優れていて、とても参考になりました。
素晴らしい書籍を作ってくださった作者の遠藤さんとラムダノートさんに改めて感謝します。ありがとうございました。

# ソースコード

今回作ったコードは GitHub で公開しています。

- [mganeko/mini_node_wasm](https://github.com/mganeko/mini_node_wasm)
joinがいまいち分からん

ある有料サイトに登録してPythonを進めてるけど
まさかの何いってるか分からんから

分からん単語？を検索して
他のページで理解して戻ってくるという遠回な勉強が始まりました‥
なぜサイトでは説明してくれていないのかイライラ!!!とかはなくて、
しないといけないことを順番に提示してくれているだけでもありがたいｗ

で、

元は
def concat(*args, sep="/"):
    return sep.join(args)

どっからjoin出てきた？？
ってないいてjoinを検索してみると

test = ['ab', 'c', 'de']
result = ''
for x in test:
    result += x
print(result)
#abcde

が出てきた。
いきなりなんで
result = ''
でてきた？
ほんでなんで''消えた？？？

え？？joinどころちゃうｗ
なにこれ泣きそう
[Rust] ひとつの Vec<T> を複数スレッドから同時に編集する

ひとつの `Vec<T>` を複数のスレッドから同時に操作したいことがあります. 例えば `Vec<i32>` の全成分に 1 を足す計算は, シリアルなら

```rust
const N: usize = 1024;

fn main() {
    let mut vec: Vec<i32> = (0..N as i32).collect();

    for x in vec.iter_mut() {
        *x += 1;
    }

    println!("{:?}", &vec);
}
```

と書けますが, この手の処理は並列化したくなります[^1]. これは各成分を `Mutex` にする (つまり `Vec<Mutex<T>>` を使う) ことで実現できます. この際に `Vec<Mutex<T>>` そのものをスレッド間で共有したいので `Arc` で包む必要があります.

```rust
use std::thread;
use std::sync::{Arc, Mutex};

const N: usize = 1024;
const THREAD: usize = 4; // 子スレッドの数

fn main() {
    let vec: Vec<Mutex<i32>> = (0..N as i32).map(|n| Mutex::new(n)).collect();
    let vec = Arc::new(vec);

    let handles = (0..THREAD).map(|c| {
        let vec = Arc::clone(&vec);

        thread::spawn(move || {
            // c 番目のスレッドは最初の c 個を飛ばして `THREAD` 個置きに要素を取得する.
            // 全スレッド (c=0..`THREAD`) の処理が終われば, これで `vec` の全要素に一度ずつ触ったことになる.
            for x in vec.iter().skip(c).step_by(THREAD) {
                let mut x = x.lock().unwrap();
                *x += 1;
            }
        })
    }).collect::<Vec<_>>(); // collect するとイテレータの各要素が評価されて子スレッドの処理が始まる.

    // 子スレッドの処理の終了待ち
    for handle in handles.into_iter() {
        let _ = handle.join().unwrap();
    }

    // Arc から vec を取り出す
    let vec = Arc::try_unwrap(vec).unwrap();

    // 結果の表示
    for x in vec.iter() {
        println!("{}", x.lock().unwrap());
    }
}
```

Mutex を lock しているので, 複数のスレッドが同一の要素 (例えば `vec[0]`) にアクセスすることも可能です. 後からアクセスしようとしたスレッドは, その要素が解放されるまで待機します.

なお, 上のコードでは `vec` のどの要素も処理にかかる時間がほぼ同じだと思っていますが, 要素によって時間がまちまちだったりすると, スレッドプール式の実装をした方がよいかもしれません.

__2019-11-17 追記__ `vec` を Arc から取り出すようにコードを修正しました. 上のコードではデータは immutable なインスタンス `Arc<Vec<_>>` としてスレッド間共有されているため, その構造を変更するような操作 (例えば要素数を増減すること) はできません. あくまでその要素 `Mutex<T>` の中の値を書き換える機能だけを有します (Mutex の内部可変性). 一方, 並列処理が終わった後に Arc から中身を取り出すと単なる `Vec<_>` になりますから, メインスレッドは (`mut` 付きで確保すれば) 要素数を増減するなど任意にその構造を変更できるようになります. 例えば `Vec<Mutex<T>>` を `Vec<T>` へと変換したければ

```rust
let vec = vec.into_iter()
    .map(|x| *x.lock().unwrap())
    .collect::<Vec<_>>();
```

です.

[^1]: さすがに 1 を足すだけでは単純すぎて並列化してもオーバーヘッドのためむしろ遅くなりますが... 当然もっと複雑な処理を想定しています.
クラウドネイティブの定義が最後まで分からなかった

どのようにクラウドネイティブを目指すかの指針を表す「Cloud Native Trail Map」を以下に示します。
これはクラウドネイティブになるための順序の例が書かれています。

![l_im_ait_cloudnative02_01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33329/19970b7e-6309-07b1-bcb6-d8305af79780.jpeg)

クラウドネイティブとはそもそもなんでしょうか?参考文献[^1]に上げた記事には、
「クラウドなどを使う際のベストプラクティスを文言化したものが、クラウドネイティブだと思います。」と書かれています。

本家のCNCFは次の定義がクラウドネイティブの定義だと行っています。[^2]


>クラウドネイティブ技術は、パブリッククラウド、プライベートクラウド、ハイブリッドクラウドなどの近代的でダイナミックな環境において、スケーラブルなアプリケーションを構築および実行するための能力を組織にもたらします。 このアプローチの代表例に、コンテナ、サービスメッシュ、マイクロサービス、イミュータブルインフラストラクチャ、および宣言型APIがあります。
これらの手法により、回復性、管理力、および可観測性のある疎結合システムが実現します。 これらを堅牢な自動化と組み合わせることで、エンジニアはインパクトのある変更を最小限の労力で頻繁かつ予測どおりに行うことができます。
Cloud Native Computing Foundationは、オープンソースでベンダー中立プロジェクトのエコシステムを育成・維持して、このパラダイムの採用を促進したいと考えてます。 私たちは最先端のパターンを民主化し、これらのイノベーションを誰もが利用できるようにします。

定義になっていないですよねｗ

まあクラウドオーケストレーションのサービスを使っていればクラウドネイティブ何だと思っておけばいいんじゃないでしょうか。だって本家の定義がなっていないのですから。

あとDockerが買収されましたがどれくらい影響があるのかは私には分からないので教えてください。

# 参考
クラウドネイティブ活動の指針として、CNCFのCloud Native Trail Mapをどう考えるか (1/2)
https://www.atmarkit.co.jp/ait/articles/1911/12/news006.html#cxrecs_s

[^1]:「クラウドネイティブ」はどう誤解されているか (1/2)
https://www.atmarkit.co.jp/ait/articles/1911/04/news001.html

[^2]:CNCF Cloud Native Definition v1.0
https://github.com/cncf/toc/blob/master/DEFINITION.md

クラウド・ネイティブとは?
https://cloud.ibm.com/docs/cloud-native?topic=cloud-native-overview&locale=ja
C++でバイナリ形式で入出力してみた

##バイナリとは
2進数のこと。
コンピュータが処理・記憶するために2進化されたファイルまたはその内部表現の形式のこと等を指します。


##画像ファイルを読み込んでみた
今回は以下の画像ファイルを読んで、バイナリデータで出力してみます。
![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233394/238113be-2c8c-da96-7ca5-f555022add66.png)


```C++:メインプロセス
#include <string>
#include <stdio.h>
#include <iostream>
#include <fstream>
using namespace std;
int main()
{
	string fileName;	//ファイル名

	//キーボード入力からファイル名を取得する
	getline(cin, fileName);

	//ファイル名からバイナリファイルで読み込む
	std::ifstream ifs(fileName, std::ios::binary);

	//読込サイズを調べる。
	ifs.seekg(0, std::ios::end);
	long long int size = ifs.tellg();
	ifs.seekg(0);

	//読み込んだデータをchar型に出力する
	char *data = new char[size];
	ifs.read(data, size);

	//サイズを出力する
	std::cout << "size = " << size << "\n";
	for (int i = 1; i < size + 1; i++)
	{
		//出力する
		std::cout <<data[i - 1] << " ";
		//16バイト毎に改行する
		if ((i % 16) == 0)
		{
			std::cout << "\n";
		}
	}
	std::cout << "\nEnd!\n";
	delete data;
	return 0;
}
```

読み込んだ結果が以下になります。
![バイナリ読込結果.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233394/55f6c92a-e133-8288-429c-a7e43c8d96b5.png)


正しく読み込めているのかわからないので、フリーソフトを使って確認してみます。
Stirlingを使って確認してみます。
Stirlingの結果が以下になります。
![バイナリ読込結果_stirling.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233394/e985b8a1-64b6-9597-ad43-0a84a1085eed.png)

正しく読込が出来ていそうですが、ASCIIコードで変換できない値が
正しく読み込めているか確認できません。
ASCIIコードで「0A」がある箇所が改行されていそうです。

##ASCII文字から16進数に変えてみた
プログラムを以下のように変えて、ASCIIから16進数で出力してみます。

```C++:メインプロセス
#include <string>
#include <stdio.h>
#include <iostream>
#include <sstream>
#include <fstream>

using namespace std;

int main()
{
	string fileName;	//ファイル名
	
	//キーボード入力からファイル名を取得する
	getline(cin, fileName);
	
	//ファイル名からバイナリファイルで読み込む
	std::ifstream ifs(fileName, std::ios::binary);

	//読込サイズを調べる。
	ifs.seekg(0, std::ios::end);
	long long int size = ifs.tellg();
	ifs.seekg(0);

	//読み込んだデータをchar型に出力する
	char *data = new char[size];
	ifs.read(data, size);

	//サイズを出力する
	std::cout << "size = "<< size <<"\n" ;
	for (int i = 1; i < size + 1; i++)
	{
		std::stringstream ss;
		/*16進数文字列に変換する
		　char型をASCIIではなく、数値で出力する場合は先頭に+を付ける*/
		ss << std::hex << +data[i - 1];

		string test = ss.str();
		//符号付きであるか判定する
		if (test.size() > 5)
		{
			//符号付きの場合fが付くため、fを削除する
			string test = ss.str().erase(0, 6);
			std::cout << test << " ";
		}
		else
		{
			//符号付きでない場合そのまま出力する
			std::cout << ss.str() << " ";
		}
		//16バイト毎に改行する
		if ((i % 16) == 0)
		{
			std::cout << "\n";
		}
	}
    std::cout << "\nEnd!\n"; 
	delete data;
	return 0;
}
```

ASCII文字に変えた結果が以下になります。
![バイナリ読込結果(16進数).PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233394/fbb6a6c3-2800-65e3-74dc-6498873b201a.png)

Stirlingの結果と比較しても正しく値が読み込めてることが確認できます。

##終わりに
C++でバイナリデータを確認することが出来ました。
ただし、newで領域を確保したため巨大なデータには対応できなさそうです。
AndroidStudioから指定した(空の)レポジトリを指定してPushとかする。

# はじめに
## どうゆう状況？
Organizationsアカウントを作りましてAndroidStudioからリモートレポジトリをそこにおくことはできないかなと。現状では(見つけられなかっただけかもしれませんが)AndroidStudioのUI操作からではリモートレポジトリを作ると登録したアカウントに作られてしまいます。

# 手順
## 1.Organizationsレポジトリを作る。
サイトの方のGithubで先に空のレポジトリを作っておきます。このとき、Organizationsの中に作っていることを確認してください。

## 2.AndroidStudioでプロジェクトを作る。
プロジェクトを作ってビルドを済ませておいてください。特にやることはないですが、先ほど作ったレポジトリと同じ名前にしてください。

## 3.コマンド
AndroidStudioのTerminal(下の方)を開いて次のように実行してください。

```
> git init
> git remote add origin https://www.github.com/Organizations名/レポジトリ名
> git add --all
> git commit -m "Initial commit"
> git fetch
> git merge --allow-unrelated-histories origin/master
> git push origin master
```

二個目のコマンドのURLは先ほど作ったレポジトリのURLで大丈夫です。

# まとめ
コマンドでしかできないんですかね？調べた限りではそうでした。
参考↓
[How can I add my Android studio project into an organization owned by me in GitHub?](https://www.quora.com/How-can-I-add-my-Android-studio-project-into-an-organization-owned-by-me-in-GitHub)
[初めてGitHubリポジトリにpushしたらrejectedエラーになったときの対応メモ](https://qiita.com/takanatsu/items/fc89de9bd11148da1438)

[My Twitter](https://twitter.com/Cyber_Hacnosuke)(フォローお願いします。)
RxSwift学びの過程〜直列処理編〜

# 背景
普段、あの通信してこの通信して、という感じでたくさんある通信をスレッド分けて並行処理することばかり意識しているんですが、いざ直列処理したい時にパッと出てこなかったのでメモ。

# やりたかったこと

通信処理Aを行い、返り値を通信処理Bで使用した直列処理を行いたい。
（Aの完了を待機、かつ返り値を後続で利用したい）



# 想定

- `func fetchA() -> Data`を使用
- `fetchA()`の戻り値を使用して`fetchB(data: Data) -> Single<String>`をしたい

# コード

```Swift

let process: Single<String> = fetchA()
    .flatMap { fetchedData in
         foo()
         bar()
         return fetchB(data fetchedData)


```

`.flatMap`を使用する。
そもそも、`.map` `.flatMap`の挙動を理解する必要がある。

`RxSwift`、そしてこの場合`let process`の型は`Single<String>`。
`.flatMap`は戻り値が`Single`（Observableとか）なので組み合わせに注意しないといけない。

例その２：

```Swift

let process: Single<String> = fetchA()
    .flatMap { fetchedData in
         foo()
         bar()
         return fetchC(data fetchedData)
            .flatMap { fetchedData2 in
                // fetchedData2 を加工
                let data = ...
                return Single<String>.just(data)
            }
    } 
```

# まとめ

- 通信完了を待ち返り値を次の通信処理に流したい場合は`.flatMap`
- ストリームなので、最終的に返してる値が定義しているものと同じかチェック
- Observableなどに包まれている値を操作する場合、`.map`系などでObservableを剥いで上げないといけない

上から下にストリームとして流れていく`ReactiveExtension`の概念ではこれめっちゃ大事説。
pingをWiresharkで確認してみた。

##wiresharkとは
ネットワークパケットをキャプチャすることが出来るフリーソフト
今回はwiresharkを使用して、pingがどのように行われているのか確認してみます。

##wiresharkの使い方
アプリを起動すると以下の画面が表示され、画面内にネットワークデバイスが表示されます。
![トップ画面.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233394/69881761-2ee9-7f0f-ed92-326c7d754974.png)

今回はイーサネット2を選択します。選択すると以下の画面が表示されます。
現在は通信を行っていないため、何も表示されていません。
![ip選択時.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233394/8e7ffeed-5e50-aed3-9ab9-9b4009c22ae9.png)

##pingで通信を発生させてみた
接続されているPCからpingを行うと以下のように表示されます。
今回はICMPのプロトコルを使用するため、フィルタリングしてICMPのみを表示させています。
pingは基本的に4回リクエストが行われます。
そのため、リクエストとそれぞれのリクエストに対するリプライが以下に表示されています。
(「ping」を「ping-n 1」にすると、4回のリクエストが1回になります。)

![ping時_変更.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233394/8006e68a-2088-2bdb-a61e-63443fde4c62.png)



##データの確認方法
wiresharkではキャプチャしたパケットを選択すると下のほうにパケットの詳細とパケットのバイトが表示されます。
まずはリクエストを受信した場合のパケットを確認してみます。

今回はIPヘッダとICMPヘッダを確認してみます。
IPヘッダは以下の構造になっています。
ICMPのProtocol番号は1なので、1になってるはずです。
![IPヘッダー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233394/259d7f22-4b15-55ef-1b28-1c38278e9bac.png)

ICMPヘッダは以下の構造になっています。
![ICMPパケット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233394/fc315897-62b5-d894-443a-d70e2eba456c.png)


wiresharkでIPヘッダを確認してみます。
背景が青くなっている箇所がIPヘッダです。
同じ構成になっていおり、プロトコルが1であることがわかります。
![ICMP reply(1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233394/9cf26bbe-74e6-0469-eb55-cdbd94c2d4dc.png)
![ICMP reply(2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233394/9685602d-2493-3c26-0e03-68f378f59304.png)

次にICMPヘッダを確認してみます。
背景が青くなっている箇所がICMPヘッダで、同じ構成になっています。
また、typeが8(エコー要求)であることがわかります。
typeは0(エコー応答)や3(宛先到達不能)など数字によって決まった意味があります。
![ICMP reply(3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233394/39140af7-bb27-084a-8392-2e1ab544daf8.png)
![ICMP reply(4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233394/321bcb29-35cc-5249-1042-1c1b9b91f0c2.png)




まずは受信したリクエストに対するリプライを送信する場合のパケットを確認してみます。

wiresharkでIPヘッダを確認してみます。
背景が青くなっている箇所がIPヘッダで、同じ構成になっています。
先ほどリクエスト受信時のパケットと異なり、送信元アドレスと宛先アドレスが逆になっていることがわかります。
![ICMP request(1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233394/ada61a03-7eeb-4267-b1a9-f880b629856c.png)
![ICMP request(2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233394/4d59614b-a423-3037-b8e5-bac47e15dfc8.png)

次にICMPヘッダを確認してみます。
背景が青くなっている箇所がICMPヘッダで、同じ構成になっています。
また、typeが0(エコー応答)であることがわかります。
![ICMP request(3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233394/0728224b-d839-08e6-e7af-2c1fd70b45f1.png)
![ICMP request(4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233394/efde37ef-d1af-5404-1d22-6977edc64ccd.png)



##おわりに
pingのような単純なコマンドでも、ヘッダーまで確認するとわからない点なども多くあったりします。
他にもネットワークプロトコルはたくさんあるので、色々なプロトコルをwiresharkで確認すると理解が深まるかもしれません。
【超基本操作】Vim

今回は、vimの超基本的な操作を（自分用に）まとめてみたいと思いました。
gitを使ってる時に初めてvim自体を知ってそこから勉強してみました。

#Vimのモード
|モード|コマンド|
|:--:|:---:|
|ノーマルモード|esc|
|コマンドモード|:|
|インサートモード|i|
|ビジュアルモード|v|


#ノーマルモード
|コマンド|意味|
|:---:|:--:|
|k|上方向にカーソルが進む|
|l|右方向にカーソルが進む|
|j|下方向にカーソルが進む|
|h|左方向にカーソルが進む|
|gg|一番上にカーソルが飛ぶ|
|G|一番下にカーソルが飛ぶ|
|C-f|一画面下にカーソルが飛ぶ|
|C-b|一画面上にカーソルが飛ぶ|
|w|単語単位でカーソルが進む|
|b|単語単位でカーソルが戻る|
|^|行頭にカーソルが飛ぶ|
|$|行末にカーソルが飛ぶ|
|f(文字)|文字までカーソルが飛ぶ|
|%|対応するかっこにカーソルが飛ぶ (プログラミングの{})|
|x|文字単位でカット（削除）|
|dd|行単位でカット（削除）|
|数字dd|行×数字分だけカット（削除）|
|p|貼り付け|
|yy|行単位でコピー|
|数字yy|行×数字分だけコピー|
|/|検索|
|n|下方向に検索|
|N|上方向に検索|
|*|今カーソルがある位置の単語下方向にを検索|
|#|今カーソルがある位置の単語を上方向に検索|
|u|１つ前の状態に戻る|
|C-r|１つ後の状態に戻る|
|.|直前の操作を繰り返す|


#コマンドモード

|コマンド|意味|
|:---:|:--:|
|:w|保存|
|:w ファイル名|名前をつけて保存|
|:q|保存して終了|
|:q!|保存せずに終了|
|:e ファイル名|他のファイルを開く|


#ビジュアルモード
|コマンド|意味|
|:---:|:--:|
|v|文字単位で選択|
|V|行単位で選択|
|C-f|短形単位で選択|
|gg + V + G|全選択|

#まとめ
ざっとよく使うコマンドをまとめてみました。vimにはもっともっとコマンドがあるらしいので本格的に使うってなったら覚えていきたいなと思います。とりあえず最低限これくらいは覚えないとなって思ってます。実際に使いながら頑張ります。
ちなみに、`C-?`はcontrolキーのことです。
【pythonocc】jupyter notebook上でCADを使ってみた

# pythonでCADで作ったファイルをいじいじしたい！
.pyファイルをCADのソフトにインポートして機能を拡張させたりするのは聞いたことありますが、jupyter notebook上で動かせるものはあるのかなと思って調べてみました。

#先に結論
あった。cad界隈のhello worldしてみた。
![cad.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178972/8efaa5ca-d608-7f8e-5801-be5ceb9811fb.gif)

# pythonoccとは
pythonoccとは、python用の3D CADパッケージ。
jupyter notebook上で動かせちゃう！！

gitub: https://github.com/tpaviot/pythonocc

# インストール
githubでは以下でインストールできると書いてありました。

```terminal
conda install -c conda-forge -c dlr-sc -c pythonocc -c oce pythonocc-core==0.18.1 python=3.5
```

だが私の場合、Jupyter notebookeでインポートする時に「OCCが見つかりません」となりました。
とりあえずpythonocc-coreを入れればできました。なぜだろう... 詳しい方教えてください...

```terminal
conda install -c dlr-sc pythonocc-core
```
あと、jupyter notebook上でレンダリングするにはpythreejs, smeshも必要そうなので、入れておきます。

```terminal
conda install -c conda-forge pythreejs
conda install -c pythonocc smesh
```

#Hello worldをしてみる
githubに[デモ](https://github.com/tpaviot/pythonocc-demos)があったのでやってみます！！！
pythonocc-demos/jupyter_notebooks/occ_helloworld.ipynb
を実行してみると、、、、、

できた！！！
![cad.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178972/1ed7facd-06c5-6687-656d-0993e6cd931a.gif)


マウスでいじいじすると動きます！

# STEPファイルを読み込んでみる
10x10x10の立方体のSTEPファイルを読み込んでみると、、、、
kernelがdeadしました。
さすがにメモリに無理があるのか…？限界かな？

解決策はあるのだろうか、、、
もし解決策が思い浮かんだ方がおられた場合は、コメントいただけると助かります。

#最後に

初学者なので間違っていたら教えてください！！いじめないで........

#whoami
twitter:@hookhook125
blog: https://hooked-on-mas.hatenablog.
Windows環境のgit bashに環境変数を追加する

# Windows環境のgit bashに環境変数を追加する
Windowsのシステム環境変数でパスを通したらgit bashの方もパスが通る。そう思っていた時期が俺にもありました…（出典：バキ25巻）

## やり方
1. ホームディレクトリに`.bashrc_profile`を作成する
2. 環境変数PATHを上書きする処理を書く<br>```export PATH="パス"```

## 説明
`.bashrc_profile`がbash起動時に実行される処理で、そこで環境変数PATHを上書きすることでパスを通す、といった感じ。
`echo $PATH`で現在のパスを出力する　→　その後ろに通したいパスを追加する　→　`.bashrc_profile`に書くといった手順がよさそう。

`.bashrc`と`.bashrc_profile`の違いについてはいい記事があったのでこちらを参照してください。
https://qiita.com/magicant/items/d3bb7ea1192e63fba850
製薬企業研究者がPythonで使われる演算子についてまとめてみた

# はじめに
ここではPython初心者向けに、「演算子」について解説します。
Python3系の使用を前提とします。

# 算術演算子

四則演算を行うための演算子です。
演算子の前後には半角スペースを入れることが多いです。

```python:operator_1.py
int_1 = 1 + 1 # 足し算
print(int_1)
int_2 = 2 - 1 # 引き算
print(int_2)
int_3 = 2 * 3 # 掛け算
print(int_3)
int_4 = 6 / 3 # 割り算（割り切れる場合でも、計算結果は浮動小数点数型になる）
print(int_4)
int_5 = 2 ** 3 # 累乗
print(int_5)
int_6 = 5 // 2 # 割り算の商
print(int_6)
int_7 = 5 % 2 # 割り算の余り
print(int_7)
```

文字列同士を足し算すると、文字列の結合になります。
また、文字列に数字を掛けると、数字文だけ文字列を繰り返します。

```python:operator_2.py
str_1 = 'Hello, '
str_2 = 'World!'
print(str_1 + str_2) # 「Hello, World!」と表示される。

str_bye = 'Bye'
print(str_bye * 2) # 「Bye Bye」と表示される。　

var_int = 123
# print(str_1 + var_int) # 文字列同士の足し算でないと、エラーが出る。
print(str_1 + str(var_int)) # 数値を文字列に変換すると、足し算（文字列の結合）ができる。
```


# 代入演算子

変数の定義、更新などの時に使う演算子です。
Pythonでは「代入演算子」というものはありませんが、他のプログラミング言語ではある概念なので、一応書いておきます。

```python:operator_3.py
var_int = 3
print(var_int)
var_int = var_int + 2 # 元々のvar_intの値に2を足して、numの値を更新する。
print(var_int)
var_int = var_int - 2 # 元々のvar_intの値から2を引いて、numの値を更新する。
print(var_int)
var_int = var_int * 2 # 元々のvar_intの値に2を掛けて、numの値を更新する。
print(var_int)
var_int = var_int / 2 # 元々のvar_intの値を2で割って、numの値を更新する。
print(var_int)
var_int = var_int % 2 # 元々のvar_intの値を2で割った余りを計算して、numの値を更新する。
print(var_int)
```

上記のスクリプトは、以下のように書き換えることができます。
こちらの方が短く書けるので、この書き方をすることが多いです。

```python:operator_4.py
var_int = 3
print(var_int)
var_int += 2
print(var_int)
var_int -= 2
print(var_int)
var_int *= 2
print(var_int)
var_int /= 2
print(var_int)
var_int %= 2
print(var_int)
```


# 比較演算子

左辺と右辺を比較するときに使う演算子です。

```python:operator_5.py
var_bool = 2 == 2 # 左辺と右辺が等しいどうか
print(var_bool)
var_bool = 2 != 2 # 左辺と右辺が等しくないかどうか
print(var_bool)
var_bool = 2 < 3 # 左辺が右辺より小さい（左辺が右辺未満）かどうか
print(var_bool)
var_bool = 2 > 3 # 左辺が右辺より大きいかどうか
print(var_bool)
var_bool = 2 <= 3 # 左辺が右辺と等しいまたは小さい（左辺が右辺以下）かどうか
print(var_bool)
var_bool = 2 >= 3 # 左辺が右辺と等しいまたは大きい（左辺が右辺以上）かどうか
print(var_bool)
```


# 論理演算子

真偽値（ブール値）に対して用いる演算子です。

```python:operator_6.py
var_bool = 2 == 2 and 3 == 3 # andで結ばれた条件が全てTrueかどうか
print(var_bool)
var_bool = 2 !=2 or 2 != 3 # orで結ばれた条件のいずれかがTrueかどうか
print(var_bool)
var_bool = not (2 == 2 and 3 == 3) # カッコ内がFalseであればTrue、カッコ内がTrueであればFalse
print(var_bool)
```

# まとめ

ここでは、Pythonにおける演算子について説明しました。
何気なく使うものなので、あまり意識しなくてもいいことですが、頭に入れておくと良いでしょう。

# 参考資料・リンク

[プログラミング言語Pythonとは？AIや機械学習に使える？](https://pharma-engineer.com/basic-programming/python-summary/)
フロントエンドカンファレンス福岡 2019 登壇資料まとめ

11月2日（土）に実施された、FRONTEND CONFERENCE 2019 の登壇資料のまとめです。
資料を発見次第随時アップデートしていきます。


## フロントエンドカンファレンス福岡 2019
- [<https://frontend-conf.fukuoka.jp/>](https://frontend-conf.fukuoka.jp/)
- 2019年11月16日（土）12:00 〜 18:00
- 九州産業大学 12号館

## セッション一覧
- [<https://frontend-conf.fukuoka.jp/sessions/>](https://frontend-conf.fukuoka.jp/sessions/)

## ハッシュタグ
- [#fec_fukuoka](https://twitter.com/search?q=%23fec_fukuoka)
- [#fec_fukuoka_a](https://twitter.com/search?q=%23fec_fukuoka_a)
- [#fec_fukuoka_b](https://twitter.com/search?q=%23fec_fukuoka_b)

## セッション
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | ルームA | ルームB | ルームC  
--- | --- | --- | ---
13:00〜| [HTML Optimization for Web Performance](https://docs.google.com/presentation/d/1aLhRaTr8GdA4vrEM4Frkmsyt3b5jjncPsvHtj9ar58U/edit#slide=id.p)<br>泉水 翔吾さん |[歴史から学ぶ現代のフロントエンド](https://speakerdeck.com/10shi10ma/li-shi-karaxue-buxian-dai-falsehurontoendo)<br>外松 俊尚さん | ワークショップ：はじめてのVue.js <br>井関 健人さん<br>渋田 達也さん
14:00〜|[世界を変えるためのデザインシステム](https://speakerdeck.com/ymrl/shi-jie-wobian-erutamefalsedezainsisutemu)<br>山本 伶さん | [フロントエンドにおけるアーキテクチャとの向きあい方](https://speakerdeck.com/lemon/hurontoendoniokeruakitekutiyatofalsexiang-kihe-ifang)<br>甲斐田 亮一さん | 同上
14:30〜| --- | [明日からはじめるテストのあるフロントエンド開発](https://speakerdeck.com/mukai21/ming-ri-karahazimerutesutofalsearuhurontoendokai-fa)<br>向井 咲人さん | 同上
15:00〜|[チームラボのフロントエンドアーキテクチャ](https://speakerdeck.com/simochee/frontend-architecture-of-teamlab)<br>田村 亮弥さん | SPAについてとVSCodeの実装について<br>花田 恒一さん | ---
15:30〜|デザイナーにエンジニアから10の質問<br>新津 圭祐さん<br>平尾 ゆうてんさん | --- | ---
16:00〜|[Visual Regression Testing in Action](https://speakerdeck.com/quramy/vrt-in-action)<br>倉見 洋輔さん | [JavaScriptの読み込みを考える〜場所、async、defer、その仕組みと使い所〜](https://speakerdeck.com/maepon/javascriptfalsedu-miip-miwokao-eru-chang-suo-async-defer-sofalseshi-zu-mitoshi-isuo)<br>前川 昌幸さん | ワークショップ：Webアクセシビリティ向上につながる実装を体験！<br>宮本 采佳さん<br>平尾 ゆうてんさん
16:30〜| --- | [ウェブフォント今昔物語](https://speakerdeck.com/takanorip/uebuhuontojin-xi-wu-yu)<br>大木 尊紀さん | 同上
17:00〜|[音楽、数学、タイポグラフィ](https://standard.shiftbrain.com/blog/music-math-typography)<br>鈴木 丈さん | [これからのフロントエンドセキュリティ](https://speakerdeck.com/hasegawayosuke/korekarafalsehurontoendosekiyuritei)<br>長谷川 陽介さん | ---
DrioidKaigi 2020に選ばれなかった。


#来年行うDroidKaigi2020に応募した。

### 1. FlutterでBluetoothこれなら難しくない。
### 2. 私がFlutterを使って糖尿病管理アプリを作った物語の全てをお話します。
### 3.[2020限定版] 理解しやすいFlutterデザイン。

#結果

全部選ばれなかった。
AWS SAM の Docker Images 作成

## なぜやる
Lambda の自動テストのため、Background に実行できるAPI Gatewayが必要

## どうやる
AWS SAM の Docker Image 作れば、Background で `sam local start-api` のコマンドでAPI Gateway 起動できる

## どうやった
```docker:Dockerfile
FROM python:3.7-alpine

RUN apk add --no-cache --virtual build-deps build-base gcc && \
  pip install aws-sam-cli && \
  apk del build-deps

WORKDIR /var/opt

EXPOSE 3000

ENTRYPOINT ["/usr/local/bin/sam"]
```

```
$ docker build -t aws-sam-cli .
Successfully built 281181c0ac11
Successfully tagged aws-sam-cli:latest
```

## どう使う

```shell:shell
$ git clone https://github.com/wwalpha/docker-aws-sam-cli.git
$ cd docker-aws-sam-cli
$ docker run -itd --rm \
	-v /var/run/docker.sock:/var/run/docker.sock \
	-v "$(PWD)/example":/var/opt \
	-p "3000:3000" \
	wwalpha/aws-sam-cli local start-api --docker-volume-basedir "$(PWD)/example" --host 0.0.0.0
```
データベースなど他のネットワークに接続したい場合、最後に `--docker-network xxxxx` が設定できます。

## 使ってみる
```shell:Shell_OR_PowerShell
$ curl http://localhost:3000
Hello, World!
```

## 参考資料
- GitHub (Examples)
  - https://github.com/wwalpha/docker-aws-sam-cli
- Docker Hub (Image)
  - https://hub.docker.com/r/wwalpha/aws-sam-cli
VMwareでUbuntuの画面サイズを大きくする

VMware Toolsをインストールしようとして「展開するための空き容量が足りません」と断られたのでターミナル上で再トライした。


```linux

sudo apt-get install open-vm-tools

sudo apt-get install open-vm-tools-desktop
```

再起動すると出来上がっている。
dashでpipefailを再現する

二番煎じ(3番か?)だが[こちら](https://qiita.com/richmikan@github/items/44cbbde02bd130b2d910)の記事を参考にしてdashでpipefailを作成してみる。

```bash
pipefail() {
  local cmd= i=1 ret1 ret2
  pipe_parse "$@" || {
    eval "$cmd"
    return
  }

  exec 4>&1

  ret1=$(
    exec 3>&1
    {
      eval "$cmd" 3>&-
      echo $? >&3
    } 4>&- | {
      shift $i
      pipefail "$@"
    } 3>&- >&4 4>&-
  )
  ret2=$?

  exec 4>&-
  [ $ret2 -ne 0 ] && \
    return $ret2 || return $ret1
}

pipe_parse() {
  [ "$1" = '|' ] && return

  cmd="$cmd \${$i}"
  i=$((i+1))
  shift
  [ $# -gt 0 ] && pipe_parse "$@"
}
```
pipefailあるあるのEPIPE。

```
$ pipefail yes       \|
>          head -n 1 \|
>          grep y
$ echo $?
141
```

最も右の0以外の戻り値がパイプライン全体の戻り値になる。

```
$ pipefail yes       \|
>          head -n 1 \|
>          grep n
$ echo $?
1
```

個人的には一番左の復帰値がほしいことが多い。
pipefailの最後をこうすると左優先になる。

```bash
  [ $ret1 -ne 0 ] && \
    return $ret1 || return $ret2
```
【python】画像処理その3 ~NumPy配列~

#画像をNumPy配列にする#

まず,下のように画像を読み込んで`np.array`でNumPy配列にします.

```python
import numpy as np 
img = np.array(Image.open('画像のパス'))
```

#次元#
`ndim`で次元を調べてみます

```python
print(img.ndim)
```

出力結果

```
3
```

はい,3次元でしたね

#形状#
`shape`で形状を見てみます

```python
print(img.shape)
```

出力結果

```
(150, 150, 3)
```

サイズが150×150のカラー画像を読み込んだ時の結果です.
画像をNumPyで扱うときは画像配列は`(行データ, 列データ, RGBデータ)`
のようになっているんですね.

#スライス#
スライスを使ってRGBデータをみてみたいと思います.
今回はGreenのデータをみてみます.
3番目の要素は3つあって

0番目が赤(Red)のデータ
1番目が緑(Green)のデータ
2番目が青(Blue)のデータ

が入っているので,Greenのデータをとるときは1番目のデータをとります.

`:`は全てとってくるって意味です.
したがって, `img[:, :, 1]`の意味は
**行データを全てとってきて,列データを全てとってきて,2番目のデータをとってくる**って感じです.

```python
print(img[:, :, 1])
```

出力結果

```
[[138 137 135 ... 102 126 137]
 [134 134 133 ... 107 119 114]
 [131 131 130 ...  76  53  35]
 ...
 [ 32  33  32 ...  25  30  34]
 [ 29  27  28 ...  31  43  53]
 [ 27  26  30 ...  44  59  70]]
```

##Greenだけの画像を表示してみる##
緑以外を0にすれば緑だけの画像になりますよね.
計算はこんな感じです.

```python
img = 0*img[:, :, 0] + img[:, :, 1] + 0*img[:, :, 2]
```

するとこんな感じの画像ができます.

![green.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/de54cab9-3238-88b0-b81d-0935c762730d.png)

#二値化の計算をしてみる#
[前回のとき](https://qiita.com/kikuchiTakuya/items/9c1da0aaaf88f231d2e3)に二値化の計算をしました.
手順としては以下のようになります.　

1.画像をグレースケールにする
2.閾値によって白黒わける

1では以下のように画像をグレースケールにしました

```python
img = np.array(Image.open('lena.jpg').convert('L'), 'f')
```

この段階で`次元が3で形状が(150,150,3)`だったカラー画像が
`次元が2で形状が(150,150)`のグレースケールの画像になります.

2では以下のようにして二値化しました.

```python
img = (img > 128) * 255
```

配列の要素全てに対して値が128を超えていたら白(255)にします.
まず,`(img > 128)`をすると128を超えているところはTrue,そうでないところはFalseが返ってきます.こんな感じです.

```
[[ True  True  True ...  True  True  True]
 [ True  True  True ...  True  True  True]
 [ True  True  True ... False False False]
 ...
 [False False False ... False False False]
 [False False False ... False False False]
 [False False False ... False False False]]
```

Pythonのbool型はint型のサブクラスなので`True = 1, False = 0`みたいに扱えます.
なので`* 255`で全ての要素に255をかけることで二値化できました.

`NumPy配列`ってのは便利なもんでこんな簡単に計算できるんですね.素敵ですね.




#参考#
・[https://www.sejuku.net/blog/44850](https://www.sejuku.net/blog/44850)
・[https://note.nkmk.me/python-numpy-ndarray-ndim-shape-size/](https://note.nkmk.me/python-numpy-ndarray-ndim-shape-size/)
・[https://code-graffiti.com/numpy-array-and-images-in-python/](https://code-graffiti.com/numpy-array-and-images-in-python/)
<5> (標準) Pascal へのオブジェクト指向拡張 (Pascal へのオブジェクト指向拡張の歴史と Delphi)

# 5. (標準) Pascal へのオブジェクト指向拡張
1993 年の (標準)Pascal へのオブジェクト指向拡張はドラフトのまま放置されました。

 - [Object-Oriented Extensions to Pascal (1993)](http://pascal-central.com/OOE-stds.html)

余談ですが、このドラフトには 『J&W』改訂者のジム・F.マイナー氏や、Apple のカート・J.シュマッカー氏、Borland のデビッド・インターシモーヌ氏が参加しています。

## 5.1. ドラフトのオブジェクト指向拡張案
クラス型は型宣言部 (**type**) にて "型名 = **class** (親クラス) ～ **end**;" として定義します。

### 3.1.1. クラス型の定義

次のようにしてクラスを定義できるようです。

```pascal
type
  TCls = class (root) { root を継承したクラス型 TCls の定義 }
    FValue: Integer;
  end;
```

ドラフトでのクラスをざっと確認しましたが、次のような特徴があるようです。

 - ルートクラスは **Root** です。
 - 多重継承可能です。
 - クラスには 3 つの種類があります。
   - **具象クラス (Concrete Class)**:<br>具象クラスは、オブジェクトを作成できる唯一のクラスです (**class**)。 
   - **抽象クラス (Abstract Class)**:<br>抽象クラスは、クラス階層のプレースホルダーです (**abstract class**)。
   - **プロパティクラス (Property Class)**:<br>プロパティクラスは、特性・属性・またはプロパティを提供します (**property class**)。 
 - 抽象メソッド (**abstract**) があります。
 - オーバーライドメソッド (**override**) があります。
 - コンストラクタ (`CONSTRUCTOR Create;`) があります。
 - デストラクタ (`DESTRUCTOR Destroy;`) があります。
 - (オーバーライドメソッドでよく使う) INHERITED 文があります。

### 3.1.1. クラス型の作成と破棄

クラスの作成と破棄は次のようにして行うようです。

```pascal

type
  TCls = class(root)
    ...
  end;

var
  Cls: TCls;
begin
  Cls := TCls.Create;
  ...
  Cls.Destroy; 
end;

```

コンストラクタとデストラクタですね。デストラクタは明示的に呼び出すようになっているようです。次のような代替案も示されてはいますが、具体的な事は書かれていません。

 - オブジェクトを破棄するための定義済み手続き (Free メソッドや Dispose のような) を呼んだときにデストラクタが呼び出される
 - オブジェクトが不要になると暗黙的にデストラクタが呼び出される (ARC のような)

ドラフトの実装は存在しないため、実際にどのような動作をするのかを試す事はできませんが、なんとなくやりたい事は解る気がします。

# 索引
[ [← <4> Turbo Pascal のオブジェクト指向拡張](https://qiita.com/ht_deko/items/5935a06ca7aee27842f6) ] [ [↑ 目次へ](https://qiita.com/ht_deko/items/ff2d90c9174290583377) ] [ [→ 6. Dephi のオブジェクト指向拡張](https://qiita.com/ht_deko/items/28fc0af9fc9e34a8d5c5) ]
Nuxt.jsでAPIのCORS対策をするとNetlifyで404エラーになる件

## 概要
- Nuxt.jsでCORSエラーが発生したので、axiosのproxiy設定をした
- Netlifyにデプロイすると404エラーが発生した
- Netlifyのリダイレクトオプションを設定して解決

## Nuxtの設定

`.env`

```env
BASE_API_URL="http://localhost"
BASE_CACHE_URL="http://localhost"
```

`nuxt.config.js`

```javascript

const baseApiUrl = process.env.BASE_API_URL || "http://localhost";
const baseCacheiUrl = process.env.BASE_CACHE_URL || "http://localhost";

export default {
...
  /*
   ** Axios module configuration
   */
  axios: {
    credentials: true,
    proxy: true,
    debug: true
  },
  proxy: {
    "/caches/": baseCacheiUrl,
    "/game/": baseApiUrl,
    "/common/": baseApiUrl
  },
```

## Nuxtの設定

ローカル環境で動作検証
正常にAPI通信できている模様

<img width="1233" alt="スクリーンショット 2019-11-16 19.44.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167604/c1ef7995-3ec9-6356-0246-44f7518be855.png">


## Netlifyにデプロイ

動かない
APIのレスポンスは200が返っているが、404ページのDOMが返却されている模様

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167604/cc58bc73-c5c2-37b3-4113-05a51d807689.png)

## 対策

`static/_redirects`

Netlifyのリダイレクトオプションを設定
https://docs.netlify.com/routing/redirects/rewrites-proxies/#limitations

```diff
+ /game/*  https://api.deckup.cards/game/:splat  200
+ /common/*  https://api.deckup.cards/common/:splat  200
+ /caches/*  https://cache.deckup.cards/caches/:splat  200
/*    /index.html   200
```

## 結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167604/2b289b06-c606-6328-3e66-f58248ea942c.png)
素人がAWSに手を出してみた様子-1

どうもはじめまして。
サーバーはsakuraレンタルは触った事はあるけれども、あれはすでに用意された箱だし
vmでcentosを入れてApacheやPHP等入れてローカル環境構築はあるけど、その程度だし、、、

それじゃ足りないでしょ！

というわけで

#素人がAWSに手を出してみた
**まずはアカウント作成から**
基本中の基本。アカウント作るだけなんて余裕っス！！！
<img width="1392" alt="スクリーンショット 2019-11-16 1.13.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50979/a8e76832-f93c-0563-b957-1f62f080bff5.png">

**2段階認証必要だよね**
<img width="1392" alt="スクリーンショット 2019-11-16 1.22.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50979/e0dfb923-65ab-52c0-63f0-e77893bcde9f.png">

**む、無料だよ...**
<img width="1392" alt="スクリーンショット 2019-11-16 1.23.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50979/98401395-96f2-814f-1538-b65545cb9c98.png">

**アカウント作成完了**
<img width="1392" alt="スクリーンショット 2019-11-16 1.23.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50979/39d7396a-a70e-f68b-4082-99df003efc0c.png">

**ssh接続**

```
ssh -i "users.pem" ec2-user@ip
```
einをいい感じにするメモ

[ein](https://github.com/millejoh/emacs-ipython-notebook)は素のままだと補完とかが効かないので，いい感じにしたときのメモです．

```elisp:init.el
(add-hook 'ein:notebook-mode-hook 'jedi:setup)
(add-hook 'ein:notebook-mode-hook 'electric-pair-mode)
(add-hook 'ein:notebook-mode-hook 'undo-tree-mode)
(setq jedi:complete-on-dot t)
(setq ein:worksheet-enable-undo t)
```

これでだいたいブラウザ版と同じ感じになる．
WSL2側からWindows側のIPアドレスを調べる方法

Windows→WSL2はlocalhostでも参照できるようによしなにしてくれてますが、
その逆は情報が見つからなかったので残しておきます。

# コマンド
```bash
ip route | grep 'default via' | grep -Eo '[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}'
```

# 解説
WSL2のデフォルトルートとして設定されているアドレスは、
Windows側に出現する仮想アダプタの"vEthernet (WSL)"のアドレスと同一であるのを利用しています。

Windowsにてipconfigをしてみるとこんな感じ。

```bat
イーサネット アダプター vEthernet (WSL):

   接続固有の DNS サフィックス . . . . .:
   IPv4 アドレス . . . . . . . . . . . .: 172.17.64.1
   サブネット マスク . . . . . . . . . .: 255.255.240.0
   デフォルト ゲートウェイ . . . . . . .:
```

WSL2からip routeするとこんな感じ。

```bash
$ ip route
default via 172.17.64.1 dev eth0
172.17.64.0/20 dev eth0 proto kernel scope link src 172.17.73.12
```

VcXsrvとかと組み合わせてGUIアプリを立ち上げる時に便利なテクニックになると思います。

```bash
# .bashrcとかに書いておくともっとらくちん
export DISPLAY=`ip route | grep 'default via' | grep -Eo '[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}'`:0
```

# 余談
WSL2からでもlocalhostで見えるといいなあ…
Laravelのjsファイル読み込みでハマったのでメモ

#Laravelにはjsフォルダが二つある罠

新しいプロジェクトを立ち上げるに当たって、前に作ったプロジェクトをコピペしながら
製作していたところ、jsファイルが404になっていてハマりました

同じファイル名にして同じところに入れているはずなのに何故だろうと思ったのですが、
よく見ると違うフォルダに入ってました。

で、何故そんなバカな事に気付かないかなのですが、Laravelプロジェクトには「js」という
ディレクトリが初めから２箇所にあったからです。紛らわしい！！

resources/js
public/js

の２箇所で、私はresources/jsに入れていたため読めず、
public/js に移し変えたら無事読み込めました。
WindowsでAnaconda3にKerasの環境構築

#WindowsでKerasを使う
・Anacondaの導入
・仮想環境作成
・パッケージインストール

##Anacondaの導入
**まずはダウンロード**
Pythonでの開発に役立つAnaconda3をダウンロードする。
ダウンロードサイトでWindows版を選択
https://www.anaconda.com/distribution/

このサイトが画像付きで分かりやすい。
https://newtechnologylifestyle.net/anaconda3%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB/

ダウンロードしたら実行

Next
↓
I Agree
↓
自分のアカウントのみか、全アカウント共有で使うか選択
Next
↓
展開先はデフォルトのパスのままでいいと思う。
Next
↓
パスを通したい場合は
☑Add Anaconda to my PATH environment variable
にチェックを入れると良し
☐Register Anaocnda as my default Python3.7
にチェックいれるかは自由

パス通しとくとコマンドプロンプトからanacondaの仮想環境に入れるから便利
↓
Install
↓
Next
↓
Finish

##仮想環境作成
パスを通してない人はAnaconda NavigatorからGUIで仮想環境を作るか、anacondaプロンプトから作れる
パスを通してる人はコマンドプロンプトから作ると楽。
↓はyoloって名前の仮想環境でPythonのバージョンを3に指定した場合のコマンド

```:プロンプト
conda create -n yolo python=3
```

実行後、インストールされるパッケージ一覧と、環境構築を続けるかどうか確認のメッセージが出る。


```

The following NEW packages will be INSTALLED:

    ca-certificates: 2019.10.16-0
    certifi:         2019.9.11-py38_0
    openssl:         1.1.1d-he774522_3
    pip:             19.3.1-py38_0
    python:          3.8.0-hff0d562_2
    setuptools:      41.6.0-py38_0
    sqlite:          3.30.1-he774522_0
    vc:              14.1-h0510ff6_4
    vs2015_runtime:  14.16.27012-hf0eaf9b_0
    wheel:           0.33.6-py38_0
    wincertstore:    0.2-py38_0

Proceed ([y]/n)? 
```
迷わず「y」＆「Enter」
これで仮想環境構築は完了

##ライブラリインストール
Kerasを使うのに必要なライブラリやらパッケージやらをインストールする。
基本的にcondaコマンドを使います。pipは最終手段じゃ！

まずは作成した仮想環境に入る

```:プロンプト
conda activate yolo
```
今回はGPU版のtensorflowを入れる。

```
conda install  tensorflow-gpu
```

これでcuda toolkitとか一式がまとめてインストールされる。
次にKerasのインストール

```
conda install keras
```
これで環境構築は完成！
numpyとかopencvとか他に必要なものは各自で入れましょー
正規化とは

#はじめに
今回はデータ設計に必要な正規化についてまとめます。
正規化とは、「効率よくデータを扱うために、データを一定のルールに基づいて変形し整理する」ことです。

以下スムーズに読み進めるために言葉の注釈記載します。
※主キー：データベースにおいてレコードを一意に識別するための属性
※外部キー：関連したテーブル間を結ぶために設定する列
※エンティティ：データベースとして表現すべき対象物

#目次
1. 非正規化
2. 第一正規化
3. 第二正規化
4. 第三正規化
5. 正規化完成図

#1.非正規
非正規とは正規化がまったく行われてなく、1行の中に複数の繰り返し項目が存在するようなテーブルのことです。
以下のようなテーブルです。
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384180/935d8ae2-8756-24a2-d48a-90262fcc6969.png)
※以下主キーは黄色で示します。

#2.第一正規化
繰り返しになっている項目をなくします。
【第一正規化前】
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384180/935d8ae2-8756-24a2-d48a-90262fcc6969.png)
今回の場合、主キーである「貸出番号」に対して「書籍番号・書籍名・著者」の項目が繰り返しになっています。
元のエンティティから「書籍番号・書籍名・著者」の項目を取り除き新しいエンティティを作ります。
元のエンティティの主キーである「貸出番号」を新しいエンティティの外部キーとして設定します。
なお新しいエンティティの主キーは「書籍番号」のみを主キーとして設定してしまうとどの会員による貸出情報かが不明になるため、「貸出番号・書籍番号」のセットです。
【第一正規化後】
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384180/aa3083d2-52af-2487-41f4-bb65dd7cb272.png)
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384180/80d0135f-b5c8-c0ab-9aa7-43f61b7c092a.png)

#3.第二正規化
主キーの一部に依存する項目をなくします。
【第二正規化前】
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384180/80d0135f-b5c8-c0ab-9aa7-43f61b7c092a.png)
今回の場合、主キーの一部である「書籍番号」に対して「書籍名・著者」の項目が依存関係にあるので、元のエンティティから「書籍名・著者」の項目を取り除き新しいエンティティを作ります。
元のエンティティの主キーである「貸出番号」を新しいのエンティティの外部キーとして設定します。
なお新しいエンティティの主キーは「書籍番号」になります。
【第二正規化後】
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384180/1881cb68-4436-34cc-6b6f-8401cf6ff2e4.png)
![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384180/7c510508-f8f3-7c8b-a0fb-bc4adbdbc8cf.png)

#4.第三正規化
主キー以外に依存する項目をなくします。
【第三正規化前】
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384180/aa3083d2-52af-2487-41f4-bb65dd7cb272.png)
今回の場合、主キー以外の「会員番号」に対して「会員名・貸出日・返却予定日」の項目が依存関係にあるので、元のエンティティから「会員番号・会員名・貸出日・返却予定日」の項目を取り除き新しいエンティティを作ります。
新しいのエンティティの主キーは「会員番号」になります。
新しいのエンティティの主キーである「会員番号」を元のエンティティの外部キーとして設定します。
【第三正規化後】
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384180/70a91822-4d26-1fd3-1547-45d6d83224d5.png)
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384180/9eac2a70-0897-f302-981f-222164a99582.png)

#5.正規化完成図
以下が第三正規化まで行ったものになります。
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384180/70a91822-4d26-1fd3-1547-45d6d83224d5.png)
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384180/9eac2a70-0897-f302-981f-222164a99582.png)
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384180/1881cb68-4436-34cc-6b6f-8401cf6ff2e4.png)
![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384180/7c510508-f8f3-7c8b-a0fb-bc4adbdbc8cf.png)

#最後に
正規化は整理されたデータベースを扱うために行うと良いかと思います。
juman7.0.1 にてエラー

Ubuntu 16.04
Juman7.0.1

日本語形態素解析のJumanを利用しようとしてエラー発生。

```
not found <.jumanrc> and <RC_DEFAULT> file.
```

`-rオプション` でjumanrc(.jumanrcではない)のパスを指定すればOKみたいです。
configue時にprefixオプションでインストール場所を変えていなければ、たぶん通常は `/usr/local/etc/jumanrc` にインストールしてあります。ので

```
$ juman -r /usr/local/etc/jumanrc
左折専用車線左折して吉田戦車洗車中

左折 させつ 左折 名詞 6 サ変名詞 2 * 0 * 0 "代表表記:左折/させつ カテゴリ:抽象物 ドメイン:交通 反義:名詞-サ変名詞:右折/うせつ"
専用 せんよう 専用 名詞 6 サ変名詞 2 * 0 * 0 "代表表記:専用/せんよう カテゴリ:抽象物 反義:名詞-サ変名詞:共用/きょうよう;名詞-サ変名詞:兼用/けんよう"
車線 しゃせん 車線 名詞 6 普通名詞 1 * 0 * 0 "代表表記:車線/しゃせん カテゴリ:場所-施設部位 ドメイン:交通"
左折 させつ 左折 名詞 6 サ変名詞 2 * 0 * 0 "代表表記:左折/させつ カテゴリ:抽象物 ドメイン:交通 反義:名詞-サ変名詞:右折/うせつ"
して して する 動詞 2 * 0 サ変動詞 16 タ系連用テ形 14 "代表表記:する/する 付属動詞候補（基本） 自他動詞:自:成る/なる"
吉田 よしだ 吉田 名詞 6 人名 5 * 0 * 0 "人名:日本:姓:14:0.00529"
@ 吉田 よしだ 吉田 名詞 6 地名 4 * 0 * 0 "代表表記:吉田/よしだ 地名:日本:静岡県:町"
戦車 せんしゃ 戦車 名詞 6 普通名詞 1 * 0 * 0 "代表表記:戦車/せんしゃ カテゴリ:人工物-乗り物 ドメイン:政治"
洗車 せんしゃ 洗車 名詞 6 サ変名詞 2 * 0 * 0 "代表表記:洗車/せんしゃ カテゴリ:抽象物 ドメイン:家庭・暮らし"
中 ちゅう 中 接尾辞 14 名詞性名詞接尾辞 2 * 0 * 0 "代表表記:中/ちゅう 内容語"
EOS
```

動きました。
毎回-rオプションなしでjumanを利用したいなら.bashrcにaliasを追記してもよいと思います。

```
$ echo "alias juman='juman -r /usr/local/etc/jumanrc'" >> ~/.bashrc
$ source ~/.bashrc
$
$ juman
すもももももももともとさくらももこ

すもも すもも すもも 名詞 6 普通名詞 1 * 0 * 0 "自動獲得:テキスト"
も も も 助詞 9 副助詞 2 * 0 * 0 NIL
@ も も も 助詞 9 接続助詞 3 * 0 * 0 NIL
もも もも もも 名詞 6 普通名詞 1 * 0 * 0 "代表表記:桃/もも 漢字読み:訓 カテゴリ:植物;人工物-食べ物 ドメイン:料理・食事"
@ もも もも もも 名詞 6 普通名詞 1 * 0 * 0 "代表表記:股/もも カテゴリ:動物-部位"
も も も 助詞 9 副助詞 2 * 0 * 0 NIL
@ も も も 助詞 9 接続助詞 3 * 0 * 0 NIL
もともと もともと もともと 副詞 8 * 0 * 0 * 0 "代表表記:元々/もともと"
さくら さくら さくら 名詞 6 地名 4 * 0 * 0 "代表表記:さくら/さくら 地名:日本:栃木県:市"
もも もも もも 名詞 6 普通名詞 1 * 0 * 0 "代表表記:桃/もも 漢字読み:訓 カテゴリ:植物;人工物-食べ物 ドメイン:料理・食事"
@ もも もも もも 名詞 6 普通名詞 1 * 0 * 0 "代表表記:股/もも カテゴリ:動物-部位"
こ こ こ 名詞 6 普通名詞 1 * 0 * 0 "代表表記:個/こ 漢字読み:音 カテゴリ:抽象物"
@ こ こ こ 名詞 6 普通名詞 1 * 0 * 0 "代表表記:子/こ 漢字読み:訓 カテゴリ:人 ドメイン:家庭・暮らし"
@ こ こ こ 名詞 6 普通名詞 1 * 0 * 0 "代表表記:庫/こ 漢字読み:音 カテゴリ:場所-施設"
@ こ こ こ 名詞 6 普通名詞 1 * 0 * 0 "代表表記:弧/こ 漢字読み:音 カテゴリ:形・模様"
@ こ こ こ 名詞 6 普通名詞 1 * 0 * 0 "代表表記:湖/こ 漢字読み:音 地名末尾 カテゴリ:場所-自然"
EOS

```

.bashrcのくだりはいらないんじゃねと思った方は正しいと思います。普通にmakeしてmake installしただけでこのエラーとなってしまいました。環境のせいなのか、根本原因までは分かりませんでした。