Reduxとは

ReactJSが扱うUIのstateを管理するためのフレームワーク
Reactではstateの管理するデータフローにFluxを提案しているが、ReduxはFluxの概念をより扱いやすく設計されている

UserInput -> View -> Action -> dispatch -> state -> state -> reducer

Actionは何をするという情報を持ったオブジェクト

{
	type: 'ADD_TODO',
	text: 'Build Redux app'
}

ActionCreator
Actionを作成するメソッド。Actionを作るのみ、Storeの

function AddTodo(text){
	return {
		type: ADD_TODO,
		text
	}
}

ActionCreatorで生成されたActionをStoreに送る
Storeのinstanceにdispatch(action)を行うことで、Storeへ変更を伝える

Storeはアプリケーションの状態(state)を保持している
アプリケーション内で一つのstateを保持している
stateへのアクセスはgetState(), stateの更新はdispatch(action)、リスナー登録はsubscribe(listener)

{
	visibilityFilter: 'SHOW_ALL',
	todos: [
		{
			text: 'Consider using Redux',
			completed: true,
		},
		{
			text: 'keep all state in a single tree',
			completed: false
		}

	]
}

dispatchされたactionとstateをReducerへ渡す
storeはdispatchされると、引数のactionと現在保持しているstateをreducerへ私、新しいstateを作成

import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)

reducerはactionとstateから新しいstateを作成して返すメソッド
Stateを変更する関数はpureな関数
viewのところがReact.js

redux Github
https://github.com/reduxjs/redux

1. Single source of truth
2. State is read-only
3. Mutations are written as pure functions

https://reactjs.org/docs/getting-started.html
https://redux.js.org/index.html

もはやreduxでは、英語のドキュメントの方が質が高く、そこから学ぶのが効率的、という認識が一般化されつつあるな。

illustrator 6

手書きのイラストをillustratorに取り込むことができる

画像を配置してレイヤーを追加

レイヤーの表示、非表示を切り替える

illustratorでイラストを書いていくときは、通常はペンタブレットを使う

あれ??? ペンタブレットって、漫画家になるって奴が話してたやつだ!!!
あいつ、漫画書いてるかな〜〜

illustrator 5

illustratorに写真を配置できる

画像のトレース
-> ラスター画像をベクター画像に変換

グリッドを表示する

テキストを配置

画像を配置

画像をラスター化

これどうしようか。。

illustrator 2

続いてオブジェクトを作っていきます

合成

切り抜きも出来る

ロック

雨雲

もはや職人の世界だな、これ。。

coturn

firewallを超える場合に、turnサーバーでドメインを指定する

$ sudo cp /usr/local/etc/turnserver.conf.default /usr/local/etc/turnserver.conf
$ sudo vi /usr/local/etc/turnserver.conf

# The default realm to be used for the users when no explicit 
# origin/realm relationship was found in the database, or if the TURN
# server is not using any database (just the commands-line settings
# and the userdb file). Must be used with long-term credentials 
# mechanism or with TURN REST API.
#
#realm=mycompany.org
...

# Uncomment if no UDP client listener is desired.
# By default UDP client listener is always started.
#
#no-udp

# Uncomment if no TCP client listener is desired.
# By default TCP client listener is always started.
#
#no-tcp

# Uncomment if no TLS client listener is desired.
# By default TLS client listener is always started.
#
#no-tls

# Uncomment if no DTLS client listener is desired.
# By default DTLS client listener is always started.
#
#no-dtls

ってことはSTUNは外部で調達して、TURNはインスタンスで立てるって理解でOK?

NATとSTUN・TURNサーバー

WebRTC通信
– Peer to Peer、ブラウザ間で直接通信
– UDP/IPを使用、オーバーヘッドが少ない
– 鍵交換で暗号化通信を行う
-> 相手のIPアドレス、動的なUDPポート番号を知る必要がある
-> 通信経路の仕組みがInteractive Connectivity Establishment、その候補がICE Candidate
–> NATを通過するためのSTUNサーバから取得したポートマッピング
–> Firewallを越えるための、TURNによるリレーサーバーを介した中継通信
–> このやりとりをシグナリングと言う。WebSocketなど複数の方法がある
-> 複数人通信の場合には、それぞれのユーザとSDP/IPのconnectionをつくる必要がある

NATとは
 グローバルIPとローカルのネットワークIPとの変換
 複数のPC/デバイスが同時に通信できるよう、ポートマッピングによるポート変換
 →ブラウザはローカルのIP、UDPポートはわかるが、グローバルのIP、UDPはわからない
 →→Peer to Peerはグローバルの情報を交換する必要がある

STUN(Session Traversal Utilities for NATs)
NATで変換されたIP/UDPを外のSTUNサーバーから教えてもらう
→グローバル情報をシグナリングサーバーけいゆうで相手に渡す
STUNサーバーはGoogleのstun.l.google.com:19302など

TURN(Traversal Using Relays around NAT)
ストリームデータの受け渡しにリレーする
TURNサーバが入ると厳密にはPeer to Peerではなくなる
データのデコード、エンコードは行わないので、ネットワーク負荷が高くなる

あれ、Bitcoinって、P2Pだけど、STAN, TURN使ってるんだっけ?
否、BitcoinはTCP😂

php build-in serverでhttpsサーバーを起動

ローカル環境で、httpsの挙動を確認したい時に使えるのが、hyper-builtinというライブラリ
https://github.com/mpyw/php-hyper-builtin-server

opensslでサーバー証明書を生成し、composerでhyper-builtinを入れて起動
※下はawslinuxだが、centosでも同様

### sslモジュールインストール(centOSの場合はmod_ssl)
$ sudo yum install mod24_ssl
$ httpd -M | grep ssl

### 秘密鍵作成
$ openssl genrsa > server.key

### CSR作成
$ openssl req -new -key server.key > server.csr

### サーバー証明書作成
$ openssl x509 -req -signkey server.key < server.csr > server.crt
$ rm server.csr

### 秘密鍵&サーバー証明書配置
$ sudo mkdir /etc/httpd/conf/ssl.key
$ sudo mkdir /etc/httpd/conf/ssl.crt
$ sudo mv server.key /etc/httpd/conf/ssl.key/
$ sudo mv server.crt /etc/httpd/conf/ssl.crt/

### ssl.conf編集
sudo vi /etc/httpd/conf.d/ssl.conf

# SSLCertificateFile /etc/pki/tls/certs/localhost.crt
SSLCertificateFile /etc/httpd/conf/ssl.crt/server.crt
# SSLCertificateKeyFile /etc/pki/tls/private/localhost.key
SSLCertificateKeyFile /etc/httpd/conf/ssl.key/server.key

### apache再起動
$ sudo service httpd restart

### composerでhttps用のphp buildin-server libraryインストール
$ curl -sS https://getcomposer.org/installer | php
$ php composer.phar require –dev mpyw/php-hyper-builtin-server:^2.0

### httpsサーバー起動
$ vendor/bin/hyper-run -s 192.168.33.10:8000

うおおおおおおおおおおおおおお、めんどくせええええええええええええ
これ、playbook.ymlで一括管理してーーーーーーーーーーーーー