OmniAICreator/Qiita-1.07M huggingface dataset:
[Unity]シリアライズできるWaitForSeconds

GCをなるべく抑えるためにWaitForSecondをキャッシュして、さらに待ち時間をエディットできるようにしようと思うと
下記のコードのように変数と初期化処理が無駄に増えて面倒です

```C#:キャッシュ.cs

		[SerializeField]
		private float waitSecond;

		private WaitForSeconds wait;

		private void Awake()
		{
			wait = new WaitForSeconds(WaitSecond);
		}

		IEnumerator Coroutine()
		{
			while (true)
			{
				yield return wait;
			}
		}

```

シリアライズできるWaitForSecondがあればすべて解決というわけで作りました

```C#:SerializableWaitForSeconds.cs

	[Serializable]
	public class SerializableWaitForSecond : CustomYieldInstruction
	{
		public SerializableWaitForSecond(float second)
		{
			wait_Sec = second;
		}

		[SerializeField]
		private float wait_Sec;

		private float deltaTime;

		private bool isFirstMoveNext = true;
		public override bool keepWaiting
		{
			get
			{
	
				deltaTime += isFirstMoveNext ? 0 : Time.deltaTime;
				var waiting = wait_Sec >= deltaTime;
				isFirstMoveNext = false;
				if (!waiting)
				{
					deltaTime = 0;
					isFirstMoveNext = true;
				}
				return waiting;
			}
		}
	}
```

使う側のコードはこんな感じ

```C#:使い方
		[SerializeField]
		private SerializableWaitForSecond Wait;

		IEnumerator Coroutine()
		{
			while (true)
			{
				yield return Wait;
			}
		}
```

keepWaitngにUnityからアクセスされたタイミングでDeltaTimeを加算すると
そのフレームのDeltaTime分ずれるので最初だけスキップしています
whileループ時に使えるように自動でリセットがかかるようにしているので
概ね標準のWaitForSecondと変わらない感じで使えると思います

GCも極力抑えられるはずです
自主トレ（1）

HTMLコーダーを3年半程やっておりましたKKKarinです。
7月から転職活動をしていて、自分の技術の化石具合に落ち込む日々です。
化石から脱出したい！自主トレ頑張る！
とりあえず、最近のフロントエンドを勉強！

- HTML5
- Bootstrap
- BEM,SCSS
- Pug,EJS
- gulp.js
- Adobe XD
- WordPress
- php
- TypeScript
- Angular,React.jsとかNode.jsに興味あるのでそれも触りたい。
- Reactネイティブ
- Visual Studio

やばい、、、わからない事だらけ。
HTML5・Bootstrap・SCSS・Adobe XD・React.js・Node.jsは個人的に触りはしてました。
が
今まで何をやっていたんだ的な。。。
以前はフレームワークをあまり使わないでっていう現場にいたので、そこでHTML4.01のベタ打ちのレスポンシブとかしてましたね。。。CMSも独自のものでしたし。VBAでツール作ったり、JSの案件なかったけど、読める様に勉強したりはしてましたね。。。
あとは指示書のチェックと他の人のコードレビューを鬼してました。
やっぱりね、実務に慣れてきたら定期的に外の空気に触れないと化石ですね・・・。

とにかく、頑張る！
Maya in-between target(BlendShapes) のメモ

通常の BlendShape(glTF で言う morph targets)では, [0.0, 1.0] で二つの shape をブレンドします.

Maya には in-between target という機能があり, 中間の shape も定義できるようになっています.

https://knowledge.autodesk.com/support/maya/learn-explore/caas/CloudHelp/cloudhelp/2018/ENU/Maya-CharacterAnimation/files/GUID-7413C450-603C-4EAD-AF70-465D4EAE5973-htm.html

![in-between-blendshapes.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36275/bdb89248-2eac-b970-ebfc-0815636cd959.gif)

顔の表情など, ゼロイチの線形補間では表現が難しいようなものの表現に役立ちます.

基本的には in-between target も線形補間のようですが, 非線形やユーザ定義のカーブで重み付けもできるよう?

実装上は, (トポロジなどが合っていれば)それぞれのシェイプのブレンドの重みを interpolator t([0.0, 1.0])から補間して算出していけばよいので簡単ですね(ramp texture のような感じで)
【Ethereum/Turffle】デプロイしたスマートコントラクトをEtherscanでVerifyする方法

#概要
EthereumにデプロイしたコントラクトをEthescanでVerifyする方法の解説。
Truffleでデプロイした場合を想定しています。
Remixでもできますが、エラーになる可能性が高くなります。

####できること
- Etherscan上でコントラクトとやりとりができるようになる
- Etherscanでコントラクトのソースコードが公開できる

#手順
1. コントラクトのソースコードをFlattenする
2. コンストラクタに引数があればエンコードする
3. EtherscanでVerifyする


##1. コントラクトのソースコードをFlattenする
コントラクトコードを単一のファイルにまとめるためのツールをインストール。
`-D`で開発用のパッケージとしてインストールします。

```
$ npm install -D truffle-flattener
```

コントラクトを単一ファイルにまとめます。
以下のコマンドでコントラクトへのパスを引数に与えます。

```
$ ./node_modules/.bin/truffle-flattener path/to/your/contract.sol > flat.sol
```

`flat.sol`というファイルに書き込まれるので、その内容をコピーします。

##2. コンストラクタに引数があればエンコードする
コンストラクタに与えた引数を16進数表記にエンコードします。
[こちら](https://abi.hashex.org)のサイトでエンコードできます。
赤枠のところで引数を16進数に変換ができます。
変換できたらそれをコピーしておきます。

<img width="1435" alt="スクリーンショット 2019-08-22 13.37.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390000/b6fb20e6-1842-ba22-dfa7-03d0dee99700.png">

##3. EtherscanでVerifyする
EtherscanでVerifyしたいデプロイ済みのコントラクトのページに行きます。
赤枠のところをクリック。
<img width="1435" alt="スクリーンショット 2019-08-22 13.42.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390000/006b924a-d4f9-b97e-59b4-9d8bfd206f50.png">

ソースコードのタイプにSingle Fileを指定し、コンパイラのバージョンを指定する。
<img width="1435" alt="スクリーンショット 2019-08-22 13.44.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390000/5889e4e4-a2ea-3b96-e946-4a2faf34daf1.png">


赤枠に`flat.sol`の中身をペースト。
青枠にコンストラクタの引数を16進数でエンコードしたものをペースト。
<img width="1435" alt="スクリーンショット 2019-08-22 13.46.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390000/dcfbf94d-dc42-1aef-8860-0d9a6d34bb08.png">

Verufy & Publishをクリック。

問題なければ完了！

#Verifyに失敗する場合
- コンパイラのバージョン指定を見直す
- 最適化（Optimization）のオプションをコンパイル時と合わせる
- Remixでデプロイした場合はソースコードが異なる可能性がある


#Happy Hacking :sunglasses: !

#参考
https://michalzalecki.com/how-to-verify-smart-contract-on-etherscan/
https://abi.hashex.org
git使うときのメモ

# How to git

はじめに、ローカルのPC上にローカルリポジトリを作成する。

```
cd test
git init
```

ローカルリポジトリに指定したいフォルダに移動して，「git init」コマンドでカレントディレクトリをGitリポジトリに変換する．

ファイルをローカルリポジトリに追加する．

```
git add hello.html
```

ファイルに加えた変更を反映させる(コミットする)．

```
git commit -m "modify"
```

オプションで " "をつけることでコメントできる．

リモートリポジトリに反映させる前に，リモートリポジトリの情報を追加する．

```
git remote add origin https:/github.com/User_ID/test.git
```

ローカルリポジトリの変更をGithub上にあるリモートリポジトリに反映させる(プッシュする)．

```
git push origin master
```

※最初だけGithubのユーザ名とパスワードを聞かれる．

(2019/8/22)
ridgepoleで既存テーブルのデータをコピーしたりTRIGGERを設定したりする

## 前置き

古くからあるテーブル（`old_posts`）を新しいテーブル（`new_posts`）に切り替える対応をしていて、その過程でレコードを同期するためにridgepoleでいろいろ操作したのでそのメモです。

## コード
```rb
# old_postsにある既存のレコードをすべてnew_postsにコピーする
execute(<<-COPY) do |c|
  INSERT INTO new_posts(title, content, created_at, updated_at)
  SELECT title, content, created_at, updated_at FROM old_posts;
COPY
  # まだnew_postsにレコードがない場合のみ実行
  c.raw_connection.query(<<-SQL).count.zero?
    SELECT 1 FROM new_posts
  SQL
end

# TRIGGERを設定して、old_postsへのレコード追加時にnew_postsにもレコード追加する
execute(<<-TRIGGER) do |c|
  CREATE TRIGGER copy_post AFTER INSERT ON old_posts
  FOR EACH ROW
  BEGIN
    INSERT INTO new_posts(title, content, created_at, updated_at)
    VALUES (NEW.title, NEW.content, NEW.created_at, NEW.updated_at);
  END;
TRIGGER
  # まだcopy_post TRIGGERがない場合のみ実行
  c.raw_connection.query(<<-SQL).count.zero?
    SHOW TRIGGERS WHERE `Trigger` = 'copy_post'
  SQL
end
```

今回は扱うテーブルの性質上、レコード更新／削除時は考慮していません。
（必要な場合は別途TRIGGERを追加していけばOK）

このあと、モデルのテーブル名を変更するなどの対応を進めていく予定。

いやー、DB系操作するの結構疲れるなぁ。 :dash: 

以上です。 :hugging: 

## 参考
- [MySQL :: MySQL 5\.6 リファレンスマニュアル :: 13\.2\.5\.1 INSERT \.\.\. SELECT 構文](https://dev.mysql.com/doc/refman/5.6/ja/insert-select.html)
- [MySQL :: MySQL 5\.6 リファレンスマニュアル :: 20\.3\.1 トリガーの構文と例](https://dev.mysql.com/doc/refman/5.6/ja/trigger-syntax.html)
- [Ruby on Railsのmigrationをうまく使って無停止でMySQLのテーブル名変更を行う \- Qiita](https://qiita.com/yoichiro6642/items/0d4222fdabd1fdb3fbb2)
- [3分でわかるトリガー \-使い所と問題点を考える\- \- Qiita](https://qiita.com/wanko5296/items/fa3620c48196acbd3ab6)
小売物価統計でガソリン価格を調べる

(初出: 2018-09-22)

仕事で直近のガソリン価格を調べる必要があった。なぜか「ガソリンスタンドによって値段が違うからなあ」という反応が多いお題だが、こんなものはさくっと統計を引いてやっつけるべきものだ。そこで小売物価統計からもってくることにする。今はこうした基礎データがネットで簡単に入手できる。[e-Stat](https://www.e-stat.go.jp/) を見に行こう。一回だけならリンクをたどったり検索したりで十分だが、毎月やるくらいならプログラムを書くべきだろう。e-Stat では API が用意されておりデータを引くのは簡単だ。

#ユーザー登録とアプリケーション ID を取得する

手作業で登録する。メールアドレスが必要。

#アプリケーション ID を取得する

手作業で登録する。40桁の16進数が得られるようだ。以下 `<APPID>` とする。

#小売物価統計からガソリン価格を取得する

##統計表情報取得

提供データの一覧 を見ると小売物価統計調査の政府統計コードは 00200571 であるとわかるので、まずこいつに API からアクセスする場合の統計データ ID を調べる。

```sh
$ curl https://api.e-stat.go.jp/rest/2.1/app/getStatsList?appId=<APPID>&statsCode=00200571
```

結果は XML で得られ、これを覗くと小売物価統計の `statsDataId` が 0003105586 であることがわかる。

##メタ情報取得

データ抽出条件には地域・品目・年月のコード (ID) が必要なので、その一覧を取得する。

```sh
$ curl https://api.e-stat.go.jp/rest/2.1/app/getMetaInfo?appId=<APPID>&statsDataId=0003105586
```

こちらも結果は XML で得られる。今回必要なのは長野県松本市のガソリン価格だ。松本市の地域コードは 20202、自動車ガソリンの品目コードは 07301 であることがわかる。地域コードは地方公共団体コード (チェックディジットなし) と同一だった。

##統計データ取得

統計データ本体は、XML/JSON/JSONP/CSV のいずれかの形式で取得できる。全地域全期間全品目のデータを XML で落とすのならばこうする。

```sh
$ curl https://api.e-stat.go.jp/rest/2.1/app/getStatsData?appId=<APPID>&statsDataId=0003105586
```

松本市のデータだけ取得するには、パラメーターに `cdArea=20202` を追加する。次の例では CSV での取得を行う。ただし CSV とはいっても冒頭にかなりの量のヘッダが付く。

```sh
$ curl https://api.e-stat.go.jp/rest/2.1/app/getSimpleStatsData?appId=<APPID>&statsDataId=0003105586&cdArea=20202
```

さらに品目を絞り、松本市のガソリン価格だけ取得するため、パラメーターに `cdCat01=07301` を追加する。

```sh
$ curl https://api.e-stat.go.jp/rest/2.1/app/getSimpleStatsData?appId=<APPID>&statsDataId=0003105586&cdArea=20202&cdCat01=07301
```

JSON でデータを得るには、エンドポイントを若干変更する。

```sh
$ curl https://api.e-stat.go.jp/rest/2.1/app/json/getStatsDataappId=<APPID>&statsDataId=0003105586&cdArea=20202&cdCat01=07301
```

#取得したデータを解釈する

##Python で処理する

使い慣れた Python で最新のガソリン価格を得よう。

```sh
$ curl -s "https://api.e-stat.go.jp/rest/2.1/app/json/getStatsData?appId=<APPID>&statsDataId=0003105586&cdArea=20202&cdCat01=07301" >result.json
$ python3 -q
>>> import json
>>> result = json.load(open("result.json"))
>>> price_history_raw = result["GET_STATS_DATA"]["STATISTICAL_DATA"]["DATA_INF"]["VALUE"]
>>> price_history = sorted([(e["@time"][:4] + e["@time"][6:8], e["$"]) for e in price_history_raw])
>>> price_history[-1]
('201808', '154')
```

簡単だ。

##Javascript で処理する

JavaScript でも同じように書ける。ここではファイルからではなく直接 e-Stat から読みだしている。

```js

const appid = "<APPID>";
const statsdataid = "0003105586";
const cdarea = "20202";
const cdcat01 = "07301";
var url = `https://api.e-stat.go.jp/rest/2.1/app/json/getStatsData?appId=${appid}&statsDataId=${statsdataid}&cdArea=${cdarea}&cdCat01=${cdcat01}`;
var request = new XMLHttpRequest();
request.open("GET", url);
request.responseType = "json";
request.addEventListener("load", (e) => {
    var prices = e.target.response["GET_STATS_DATA"]["STATISTICAL_DATA"]["DATA_INF"]["VALUE"];
    var yyyymm = prices[0]["@time"];
    yyyymm = yyyymm.slice(0, 4) + yyyymm.slice(6,8);
    var price = prices[0]["$"];
    console.log(yyyymm, price);
});
request.send();
```

これまた簡単。
Bigqueryで誕生日から年齢を算出する

案外いい感じの関数がなかったのと、業務で書く必要があったので。

```sql
DATE_DIFF(CURRENT_DATE(),birthday,YEAR) +
  (CASE WHEN 
    EXTRACT(DAYOFYEAR FROM birthday) > EXTRACT(DAYOFYEAR FROM CURRENT_DATE()) 
  THEN -1 ELSE 0 END) ;;
```

※birthdayはカラム名
Eclipse Android  Visual 　ショートカットコマンド

## ショートカット
| アクション\IDE | Eclipse(Mac)　| Eclipse | Android　| Visual(C#用)　| VScode|
|:-------|--------------|--------------|-------------|-|---:|
| 行削除 |com+D| Ctrl + D | Ctrl + Y | Ctrl + Shift + L |Ctrl + Shift + K
| 検索 |com+F | Ctrl + F | Ctrl + F | Ctrl + F| Ctrl + F|Ctrl + F
| プロジェクト内検索(Grep) |ctrl+H | Ctrl + H | Ctrl + Shift + R| Ctrl + F| Ctrl + Shift + F
| 検索/置換 | | | | Ctrl + Shift+ F| Ctrl + H
| (タブ)クローズ |com+W | Ctrl + W | Ctrl + F4 | Ctrl + F4 | Ctrl + W
| コメントアウト：/* */	| | Ctrl + Shift + /| Ctrl + Shift + /| 下記参照|
| コメントアウト(バックエンド側でのみ使用可能？)：//	|com+/ | Ctrl + /| Ctrl + /| Ctrl + K → C/(解除)Ctrl + K → U| Ctrl + /
| 入力アシスト	|※ | Ctrl + space| Ctrl + space| Ctrl + space| Ctrl + space|
| フォーマットを整える|shift+com+F | Ctrl + Shift + F| Ctrl + Alt + L| Shift + Alt + F
| 選択行を下にペースト|opt+com+↑/↓ | Ctrl + Alt + ↑/↓| Ctrl + D | Ctrl + D | Shift + Alt + ↓ / ↑
| リソースを開く	| shift+com+R| Ctrl + Shift + R| Shift 2回押下| Ctrl + P
| リネーム(一括名前変更)	|opt+com+R | Alt + Shift + R| F2
| 進む |com+shift+Z | Ctrl + Y | Ctrl + Shift + Z | Ctrl + Y |Ctrl + Y |
| 戻る |com+Z | Ctrl + Z | Ctrl + Z | Ctrl + Z |Ctrl + Z |
| タブ移動 |ctrl+fn+pageUP/Down | Ctrl + pageUP/Down | | |Ctrl + pageUP/Down
| クリックした箇所遡り |opt+com+←/→, com+[/] | Alt + ←/→ | | |Alt + ← / →
| 行入れ替え |opt+↑/↓ | Alt + ↑/↓ | | |Alt + ↑/↓
| クイックフィックス |com+1 | Ctrl + 1 | | |Ctrl + .
| ウィンドウ最大化 |ctrl+M | Ctrl + M | | |
| タブ一覧から開く | | Ctrl + E | | |
| 次のエラーへジャンプ |com+. | Ctrl + . | | |F8（次）、Shift + F8（前）
| 指定行へジャンプ |com+L | Ctrl + L | | |Ctrl + G
| ファイル画面分割(平行処理可) | | Ctrl + _ | | |Ctrl + \ `(えん)`
すべてを上書き保存	|com+shift+S |Ctrl + Shift + S
| 単語毎のカーソル移動 |opt+←/→ | Ctrl + ←/→ | | |Ctrl + ←/→
| 対応する括弧へカーソル移動 |com+shift+P | Ctrl + Shift + P | | |Ctrl + Shift + \ `(えん)`
(デバッグ)ステップイン	|F5 |F5	
(デバッグ)ステップオーバー	|F6 |F6	
(デバッグ)ステップリターン	|F7 |F7	
(デバッグ)次のブレークポイントまで実行	|F8 |F8
※リソース：≒ファイル
※Visual：「Ctrl + K → C」とはCtrl押しながらKの次にCを押下
※クイックフィックス：（単語を選択した状態で）IDEが保管できる候補を表示
※ファイル画面分割：もう一度入力すると1画面に戻る
※ステップイン：次の1行を実行(メソッドなら内部に入る)
※ステップオーバー：次の1行を実行
※ステップリターン：現在のメソッドを最後まで実行し呼び出し元へ戻る
※入力アシスト（mac）：[Eclipse for Macでコード補完ができるようにする](https://qiita.com/rotomx/items/784211ea16760eecac83)

もっと知りたい人は
Eclipse :ヘルプ＞アクティブなキーバインドで一覧を見られる
Android :[ショートカット一覧](https://developer.android.com/studio/intro/keyboard-shortcuts?hl=ja)

Eclipseのパンくずリスト、ローカルヒストリー、比較も便利ね。
マネージコードについて、自分なりに解釈する

#はじめに
ネイティブプラグインを作る必要が出てきて色々と調べているうちに
マネージコードとかアンマネージコードとか出てきて、
何それとなったので、関連用語含めてメモ。

#「マネージコード（マネージドコード）」とは
> マネージコードとは、.NET Frameworkの共通言語ランタイム環境で実行されるコードのことである。対義語として「アンマネージドコード」がある。
（IT用語辞典バイナリ）
https://www.sophia-it.com/content/%E3%83%9E%E3%83%8D%E3%83%BC%E3%82%B8%E3%82%B3%E3%83%BC%E3%83%89

なるほどわからん。
偏差値が３なので何もわかりませんでした。
というわけで、出てきたワードを読み解いていきます。

##「.NET Framework」とは
ひとことで言うと、ランタイム（実行環境）。
Windowsに入っているランタイム。

以下のサイトで.NET Frameworkについて簡単に説明しています。
https://wa3.i-3-i.info/word13559.html

以下は、ちょっと難しく書いてあります（IT用語辞典バイナリ）。
https://www.sophia-it.com/content/.NET+Framework
> .NET Frameworkで利用できるもっとも特徴的な機能として、.NET Framework対応アプリケーションのための実行エンジンであるCLR（共通言語ランタイム）がある。

なるほど？
いや、共通言語ランタイム環境ってなんやねん。

##「共通言語ランタイム環境（CLR）」とは
> CLRは、Java仮想マシンと同じように、実行に際して特定のアーキテクチャに依存しない。
（IT用語辞典バイナリ　.NET Frameworkの説明より抜粋）

うーん、わかるようなわからないような・・・。
###では、「Java仮想マシン」とは
ひとことで言うと、Javaで作ったプログラムを動かすためのソフトウェア。
Javaで作ったプログラムをどのPCで動かそうとも、Java仮想マシン上で動かすだけだから動く、という仕組みらしいです。

また丸投げになってしまいますが、以下のサイトがわかりやすいです。
https://wa3.i-3-i.info/word12704.html
Java仮想マシン、なるほど。

つまり、共通言語ランタイム環境（CLR）は同じように、仮想マシン上で動くっぽい。
ということは
> マネージコードとは、.NET Frameworkの共通言語ランタイム環境で実行されるコードのことである。

＝.NET Frameworkの仮想マシン上で実行されるコードである。
わかった。
いや、嘘です。や、なんとなくはわかりましたけれども。つまり・・・だから何・・・？

##ということで、一旦「アンマネージドコード」について調べました
> .NET Frameworkの登場以前から使用されているコードはすべてアンマネージドコードとなり、例えばActiveXやWin32 APIなどを用いるコードはアンマネージドコードに該当する。アンマネージドコードはCLRによって管理されないため、CLRのセキュリティ機能やガベージコレクションなどの機能を利用することができない。
（IT用語辞典バイナリ）
https://www.sophia-it.com/content/%E3%82%A2%E3%83%B3%E3%83%9E%E3%83%8D%E3%83%BC%E3%82%B8%E3%83%89%E3%82%B3%E3%83%BC%E3%83%89

.NET Framework登場以前から使用されているコードはすべてアンマネージドコード、それはそうだがよくわからん・・・。
と思っていたら、例えばってのも書いてあった・・・！

以下、なんとなくの解釈
**アンマネージドコード：めんどくさい後始末系の処理とかをプログラマが書かなきゃいけないコード**
冷静に考えたら「.NET Frameworkさんに管理（manage）されてないコード」だからそうだわ。

#つまり「マネージコード」とは
**.NET Frameworkさんがめんどいことやってくれてるからプログラマが楽できるコード。**

Microsoftさんのとこにわかりやすいページがありました。
https://docs.microsoft.com/ja-jp/dotnet/standard/managed-code
具体的に言語を挙げると（一番知りたかったのはコレ）
**・C#はマネージコード**
**・CとかC++はアンマネージコード**

#最後に
なんか遠回りして理解した気がするけど、関連用語への理解が深まったしいいや。
（間違っている部分ございましたら、ご指摘いただけますと幸いです。）
TouchDesignerでDoFをやる

TD-Swaggy-Bokehを使います。
↓から.toxファイルをダウンロードしてください
https://github.com/ovvostudio/TD-Swaggy-Bokeh

## 使い方
- まずはSOPで普通にシーンを作る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29342/ac9ed33d-868a-f6d6-e09a-8e138c336ba8.png)
ごく普通のシーンですね。
わかりやすいよう、遠くの方に適当にオブジェクトを散らしてます

- render TOP からDepth TOPでデプス情報を取る
- Swaggy Bokehを突っ込む
  - `Background TOP` にrenderを、`Depth TOP` にdepthを設定
- focal depth等を設定する
  - 位置固定のオブジェクトがある場合は `Auto Focus` が使えます。便利～
- 完成！　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29342/88304c25-b434-67a1-9d4c-2aace8d2b739.png)

背景のオブジェクトがボケてるのがわかりますかね……？


## Tips
- `Show Focus` でフォーカスあたってるエリアをチェック出来る
    - ピントがあってる所は赤く表示される
- Vignetteタブで簡単な周辺減光もできる
NetApp 7-Mode snapshotの確認

# NetApp 7-Mode snapshotの確認

## バージョンの確認

```
myhouse-netapp7> version
NetApp Release 8.2.2P1 7-Mode: Wed Oct  8 00:00:44 PDT 2014
myhouse-netapp7> 
```

## snapshotの使用率
`df`で確認する。
`.snapshot`の部分が目的のもの。

```
myhouse-netapp7> df
Filesystem              kbytes       used      avail capacity  Mounted on
/vol/vol0/           188743680    4613400  184130280       2%  /vol/vol0/
/vol/vol0/.snapshot   47185920      96716   47089204       0%  /vol/vol0/.snapshot
/vol/nfsvol01/      1374389536 1171137992  203251544      85%  /vol/nfsvol01/
/vol/nfsvol01/.snapshot  343597384  266484848   77112536      78%  /vol/nfsvol01/.snapshot
myhouse-netapp7>
```

## snapshotの取得状態
`snap list`で確認する。

```
myhouse-netapp7> snap list
Volume vol0
working...

  %/used       %/total  date          name
----------  ----------  ------------  --------
  0% ( 0%)    0% ( 0%)  Aug 22 12:00  hourly.0       
  1% ( 0%)    0% ( 0%)  Aug 22 08:00  hourly.1       
  1% ( 1%)    0% ( 0%)  Aug 22 00:00  nightly.0      
  2% ( 1%)    0% ( 0%)  Aug 21 20:00  hourly.2       
  2% ( 0%)    0% ( 0%)  Aug 21 16:00  hourly.3       
  3% ( 0%)    0% ( 0%)  Aug 21 12:00  hourly.4       
  3% ( 0%)    0% ( 0%)  Aug 21 08:00  hourly.5       
  4% ( 1%)    0% ( 0%)  Aug 21 00:00  nightly.1      

Volume nfsvol01
working...

  %/used       %/total  date          name
----------  ----------  ------------  --------
  2% ( 2%)    2% ( 2%)  Aug 22 03:00  hourly.0       
  3% ( 1%)    2% ( 0%)  Aug 22 00:00  nightly.0      
  3% ( 0%)    2% ( 0%)  Aug 21 20:00  hourly.1       
  5% ( 2%)    4% ( 1%)  Aug 21 03:00  hourly.2       
  6% ( 1%)    4% ( 1%)  Aug 21 00:00  nightly.1      
  7% ( 0%)    5% ( 0%)  Aug 20 20:00  hourly.3       
  9% ( 2%)    6% ( 2%)  Aug 20 00:00  nightly.2      
 11% ( 2%)    8% ( 2%)  Aug 19 00:00  nightly.3      
 13% ( 2%)   10% ( 2%)  Aug 18 00:01  nightly.4      
 14% ( 2%)   11% ( 2%)  Aug 17 00:00  nightly.5      
 17% ( 3%)   14% ( 2%)  Aug 16 00:00  nightly.6      
 19% ( 3%)   16% ( 2%)  Aug 15 00:00  nightly.7      
myhouse-netapp7> 
```

## snapshotのスケジュール確認
`snap sched`で確認する。

```
myhouse-netapp7> snap sched
Volume vol0: 0 2 6@8,12,16,20
Volume nfsvol01: 0 4 4@3,20
myhouse-netapp7> 
```

## その他
snapを削除する場合は、`delete`オプションになる。
スケジュールを変更する場合は、`sched`に続けてvolumeを指定し、weekly,nightly,hourlyの世代を指定する。hourlyの場合は取得する時間も指定できる。
Rails / Active Record / Migration よく使うものまとめ

# 概要
# 環境
# まとめ一覧
## テーブルにNOT NULL制約とデフォルト値制約をつけたカラムを追加

(例) Sampleモデルに「デフォルト値 0」「NOT NULL」 制約をつけた Integer型の sample_columnカラムを追加する場合

```ruby:YYYYMMDDhhmmss_samples.rb
class Samples < ActiveRecord::Migration[5.1]
  def change
    add_column :samples, :sample_column, :integer
    change_column_default :samples, :sample_column, from: nil, to: 0
    change_column_null  :samples, :sample_column, false, 0
  end
end
```
Google広告は2019年7月31日から手動支払いは利用できない

Google広告を使い始めて、自動払いから手動にしたかったのですが、
問い合わせたら仕様の変更により、2019年7月31日以降Google広告では手動支払いが利用できなくなったそうです。

https://taroblog.me/how-to/seo/googleadwords/
LeetCode / Intersection of Two Linked Lists

（[ブログ記事](https://mhiro216.hatenablog.com/entry/2019/08/22/123347)からの転載）

[https://leetcode.com/problems/intersection-of-two-linked-lists/]

Write a program to find the node at which the intersection of two singly linked lists begins.

For example, the following two linked lists:
<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122973/e6c2bafb-e8bb-0b03-3f44-873ce9cf1d23.png">
begin to intersect at node c1.

Notes:

If the two linked lists have no intersection at all, return null.
The linked lists must retain their original structure after the function returns.
You may assume there are no cycles anywhere in the entire linked structure.
Your code should preferably run in O(n) time and use only O(1) memory.

これもとんち的問題。2つのLinked Listが交わるnodeを返します。
ポイントはNotesの<b>Your code should preferably run in O(n) time and use only O(1) memory.</b>に尽きます。余計な空間計算量は使わずに解を出す必要があります。

#### 解答・解説

##### 解法1
私のsubmitしたコード。計算量オーダーについて条件は満たしていますが、かなり冗長になっています。

2つのポインタを2つのLinked Listの始点から動かし、終点まで移動させます。
このとき先に到着するポインタと後に到着するポインタの移動距離の差をとっておきます。
再度、2つのポインタをLinked Listの始点から動かしますが、このときは後に到着したポインタをさきほどとっておいた差の分だけ先に進めておいてから、2つのポインタをスタートさせます。
そうすると、交わる点があればポインタは必ず出会いますし、逆にポインタが出会わなければ交わる点はない、ということになります。

```python
# Definition for singly-linked list.
# class ListNode(object):
#     def __init__(self, x):
#         self.val = x
#         self.next = None

class Solution(object):
    def getIntersectionNode(self, headA, headB):
        """
        :type head1, head1: ListNode
        :rtype: ListNode
        """
        pa = headA
        pb = headB
        diff = 0
        if headA is headB: return headA
        while pa and pb:
            pa = pa.next
            pb = pb.next
        if not pa:
            while pb:
                pb = pb.next
                diff += 1
            while diff > 0:
                headB = headB.next
                diff -= 1
        else:
            while pa:
                pa = pa.next
                diff += 1
            while diff > 0:
                headA = headA.next
                diff -= 1
        while headA and headB:
            if headA is headB: return headA
            headA = headA.next
            headB = headB.next
        return None
```

##### 解法2
よりスッキリしたコードがこちら。
2つのポインタを2つのLinked Listの始点から動かし、終点まで移動させるのは同じですが、終点に到達したら、もう一方のLinked Listの始点に移動してさらに動いていくのがミソです。
このようにすると、headA is headBとなった地点を返してやれば、交差するnodeがあればそのnodeが返りますし、交差するnodeがなければnullが返ります。
なるほどですね。。。

```python
class Solution(object):
    def getIntersectionNode(self, headA, headB):
        """
        :type head1, head1: ListNode
        :rtype: ListNode
        """
        if headA is None or headB is None:
            return None
        pa = headA
        pb = headB
        while pa is not pb:
            pa = headB if pa is None else pa.next
            pb = headA if pb is None else pb.next
        return pa
```
Rails6 のちょい足しな新機能を試す68（CurrentAttributes.before_reset 編）

# はじめに

Rails 6 に追加されそうな新機能を試す第68段。 今回は、 `CurrentAttributes.before_reset` 編です。
Rails 6 では、 `CurrentAttributes` に `before_reset` コールバックが追加されました。
reset される前に呼ばれます。
また、 `reset` コールバックの別名として `after_reset` が追加されています。

Ruby 2.6.3, Rails 6.0.0.rc1 で確認しました。Rails 6.0.0.rc1 は `gem install rails --prerelease` でインストールできます。
(Rails 6.0.0 がリリースされましたが、動作確認した時点での最新は、 Rails 6.0.0.rc1でした。悪しからず  :bow:)

```shell
$ rails --version
Rails 6.0.0.rc1
```

ちょっと適切な例を思いつかなかったので、 User Agent の情報をログに出力するために、 `before_reset` を無理矢理、使ってみます。

# プロジェクトを作る

```shell
rails new rails6_0_0rc1
cd rails6_0_0rc1
```

# User の CRUD を作る

User の CRUD を作ります。

```shell
bin/rails g scaffold User name
```

# CurrentAttributes の派生クラスを作る

`user_agent` 属性を追加して `before_reset` でログに、 User Agent の情報を出力するようにします。

```ruby:app/models/current.rb
class Current < ActiveSupport::CurrentAttributes
  attribute :user_agent
  before_reset { log_user_agent }

  private

  def log_user_agent
    Rails.logger.info("#{Thread.current}: user_agent = #{Current.user_agent}")
  end
end
```

# CurrentRequest を作る

`ApplicationController` でインクルードするためのモジュールを作ります。

```ruby:app/controllers/concerns/current_request.rb
module CurrentRequest
  extend ActiveSupport::Concern
  included do
    before_action do
      Current.user_agent = request.user_agent
    end
  end
end
```

# ApplicationController を修正する

`ApplicationController` で `CurrentRequest` をインクルードします。

```ruby:app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  include CurrentRequest
end
```

# 動作確認する

`rails server` を起動してから、ブラウザで http://localhost:3000/users にアクセスしてみます。

ログに User Agent の情報が表示されることがわかります。

```
...
#<Thread:0x0000556a86f33bd0@puma 004@/usr/local/bundle/gems/puma-3.12.1/lib/puma/thread_pool.rb:89 run>: user_agent = Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
```

# 試したソース

試したソースは以下にあります。
https://github.com/suketa/rails6_0_0rc1/tree/try068_current_attribute_before_reset


# 参考情報

* [What is new in Rails 6.0](https://bogdanvlviv.com/posts/ruby/rails/what-is-new-in-rails-6_0.html)
* [Support before_reset callback in CurrentAttributes](https://github.com/rails/rails/pull/35063)
* [ActiveSupport::CurrentAttributes](https://edgeapi.rubyonrails.org/classes/ActiveSupport/CurrentAttributes.html)
AWS Media Servicesの学習方法について

#はじめに

こんにちは。ktsuchiです。

今の会社に転職してから、ちょうど1年が経ちました。
約3ヶ月前には後輩が入ってきて、賑やかな日々を送っています。

今回は、AWSが新たなトレーニングメニューとして
**AWS Media Services**のページを公開したので、そのことについて記事にします。

#概要

2019年8月6日、[AWS Media Blog](https://aws.amazon.com/jp/blogs/media/)にて
AWS Media Servicesの学習方法についての情報が公開されました。

- **AWS Media Services Learning Path**


![path_aws-media-services-v3.2.568a14dce5294a133db4eb0854cf4662c32c167f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277934/1bed0ec7-c5ad-2d2e-7e25-12f09334f571.png)

出典：https://aws.amazon.com/jp/blogs/media/aws-media-services-learning-path/


===

[トレーニングページ](https://aws.amazon.com/jp/training/path-mediaservices/)の導入文には、このように書かれています。

>この学習過程は、専用のビデオ機器を実行する際に必要とされる時間、労力、費用をかけずに、AWS メディアサービスでプロフェッショナル品質のメディアエクスペリエンスを実現する方法を学びたいという方を対象としています。

>基本的な動画の概念から技術的な詳細へと進み、AWS クラウドの動画処理、ストレージ、および収益化のワークフローを使用して、組織がライブおよびオンデマンドのビデオを配信できるようにします。

AWSが用意したトレーニングメニューに沿って学習を進めることによって
受講者がスムーズにAWS Media Servicesを理解し、利用できるようになるのが狙いのようですね。

#コース内容
ページに記載があった、コースの詳細を抜粋します。
基本的な内容から、実践的な操作まで網羅されているようです。

| コース概要 | 詳細 | 
|:------|:------|
| ビデオの基礎 | 動画圧縮の基礎、動画配信の基礎、ストリーミング動画の課題  |
| ライブ動画 |MediaLive / MediaConnect / MediaPackage / MediaStoreの概要、etc.|
| 動画の収益化  |収益化ワークフロー、MediaTailor の概要、etc.|
| ビデオオンデマンド|MediaConvert の概要、画像挿入の操作、ABR出力の作成、etc.|

出典：https://aws.amazon.com/jp/training/path-mediaservices/
#触ってみた

せっかくなので、試しに**「動画圧縮の基礎」**のコースを開始してみました。

<img width="1241" alt="ScreenShot 2019-08-07 11.40.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277934/f8425bd2-d96d-ea00-6106-0bb40b7e2ce2.png">

トレーニングページには、日本語の記載がありましたが、
実際の内容は、音声も資料も**全て英語**となっていました。

#おわりに

僕も1年前まで、動画に関しては門外漢だったので、
このようなトレーニングが用意されているのは、勉強する上でとてもありがたいですね。

AWS Media Servicesの情報を効率よく得たい方や
AWS Media Servicesをまだ触ったことない方には、ピッタリかと思います。

英語の勉強にもなるので、一石二鳥ですね。

#参考

- AWS Media Services Learning Path
https://aws.amazon.com/jp/blogs/media/aws-media-services-learning-path/

- AWS メディアサービス トレーニングページ
https://aws.amazon.com/jp/training/path-mediaservices/
SSDオブジェクト検出を実行するCoral Edge TPUアクセラレーションを備えたRaspberry Pi 3 Model B

Coral Edge TPUアクセラレータを使用したインラインrt-ai Edge Stream Processing Elementから、Raspberry Pi 3 Model BとPiカメラを搭載した組み込みバージョンに移行するのはそれほど難しくありませんでした。 このSPEのrt-ai Edgeテスト設計は、非常に簡単です:

![微信截图_20190822111520.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/9e212778-10e6-0fa3-7714-1d668b6e634f.png)

ご覧のとおり、Pi + Coralは1280 x 720フレームで約4 fpsで動作しますが、それほど悪くはありません。 この例では、Raspberry Piノード（Pi7）でPiCoralカメラSPEを実行し、デフォルトノード（i7 Ubuntuマシン）でView SPEを実行しています。

また、検出データと関連するJPEGビデオフレームの両方を含むビデオとメタデータの組み合わせ出力を使用しています。 ただし、PiCoral SPEにはメタデータのみの出力もあります。 これには、すべてのフレーム情報と検出データ（スコア、ボックスなど）が含まれますが、JPEGフレーム自体は含まれません。 これはいくつかの理由で役立ちます。

まず、特にRaspberry PiがWiFi経由で接続されている場合、JPEGの送信は少し面倒になる可能性があり、不要な場合は非常に無駄です。

第二に、生のビデオデータがRaspberry Piを離れることがないという点で、潜在的なプライバシーの問題を満たします。 メタデータに有用なダウンストリーム処理に十分な情報が含まれている場合、これはシステムを構成する非常に効率的な方法です。

![微信截图_20190822111713.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/0781587f-4005-1c53-cc52-0f6d022f456e.png)

![BANNER3-英文.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/e382b924-a86b-7bd9-bbab-d2b13ad403ef.jpeg)

- GoogleのCoral海外代理店：https://store.gravitylink.com/global
CloudFormationでarnを直接指定せずに、取得する方法

# 経緯
他のスタックで作成したlayerを参照するlambdaをCloudFormationで作成するときに、layerが更新されるたびにarnが変わってしまい、いちいちテンプレートを修正する必要があったので、何か方法がないかと調べました。

```yaml:layerのarn
arn:aws:lambda:【リージョン】:【アカウントID】:layer:【名前】:【バージョン】
```

バージョンが1,2,3・・・と更新されるため、必ず最新を指定したいときにテンプレートの修正が必要になってしまう。

# 解決策
スタック名とキーでlayerを指定する。

```yaml:
 ${cf:【スタック名】.【キー】}
```

キーはCloudFormationの管理コンソールから確認可能。
対象のスタックの出力タブで確認する。
![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478113/5189bd70-dc6c-86c9-b125-90c5ce555811.png)

キーを指定することで値のarnが取得できる。
これで、テンプレートを修正することなく毎回最新のlayerが指定される。

# 最後に
こういう小技集ほしいですね。
自宅にハニーポットを植える。オンプレミスT-pot準備編

##前書き
ハニーポットを自宅に設置するには、自宅内のLAN環境に悪影響を及ぼす恐れがあります。
当記事はあくまでも自身の環境において「このようにした」という一例であり、あらゆるセキュリティ対策が施されている訳ではございませんので、予めご了承ください。

##環境概要
1.ノートPCにT-Potを導入する
　-Lenovo x121e(Core i3 2357M/1.3GHz/2コア 16GB_ram)
2.自宅内に設置しRouterで他のNW環境と分離する
　-Router1.NEC Aterm WG1200HP [製品ページ](http://www.aterm.jp/product/atermstation/product/warpstar/wg1200hp/)
　-Router2.I-OData WN-AX1167GR2 [製品ページ](https://www.iodata.jp/product/network/wnlan/wn-ax1167gr2/spec.htm)
3.独自ドメインを取得し、ルータの提供元のDDNSサービスに乗せる
　-iobb.net [概要ページ](https://www.iodata.jp/lib/manual/etx-r/htm/ddns.htm)

##導入するハニーポット
なんかいっぱい入ってて、導入が簡単とか(らしいの)で、T-Potを導入しました。
[T-Pot]https://github.com/dtag-dev-sec/tpotce#prebuilt

##導入手順

あぁ...構築して２日で壊れてしまった...
今は残ってたSSだけ添付します。

復旧させてからSS撮り直しますのでお待ちください。


![20190718_suricata.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461555/1877621d-8a66-360f-6dfd-986b0f0333b3.png)

これ、起動初日なのですが、2万アクセス来てるって事ですかね...
ちなみに
[Suricate]https://suricata-ids.org/
というオープンソースのIPS/IDSですね。

内訳とかの解説は、...こちらも復旧してからでお願いします。

[公式]https://github.com/dtag-dev-sec/tpotce
からISOを拾ってきてBootableCDとして書き込みます。

基本的な入力画面は本体側の管理者と、Webサーバのログオンユーザ用のパスワードなので、入力しましょう。

あとは何もしなくても導入してくれます。

（復旧次第、Install中のイメージと直後のイメージを取得しようと思います。）
Pythonの変数の名前を文字列として取得

# Pythonの変数の名前を文字列として取得
コードは冗長ですけど、僕みたいな素人にはこれがわかりやすいのでアップ。
参考にしたのは[こちら](https://qiita.com/yuu116atlab/items/154ac83c03de233bf9fb)です。基本的に同じですが、リンク先の方が本格的です。

### 注意点
正確に変数名を取得できない場合があるので注意。
具体的には、異なる複数の変数が以下等である場合、変数名を区別できない。
1) -5から256までの同じ値を代入した時 (理由は[こちら](https://codom.hatenablog.com/entry/2017/09/02/190000#256はすでに存在するオブジェクトであり257はそうではない))
2) 「参照渡し」された同じ値やオブジェクトである時 
3) 同じ文字列を代入した時
また、**この時複数の変数を区別して取得する方法はない**。
詳しくは、本文下のshiracamusさんからのコメントを参照。

```python:get_var_names.py
#!/usr/bin/env python3

a='aaa'
b=[1,2,3]


# only one variable
def get_var_name(var):
    for k,v in globals().items():
        if id(v) == id(var):
            name=k
    return name

get_var_name(a)
# 'a'


# from list, multiple variables
def get_var_names(vars):
    names=[]
    for var in vars:
        for k,v in globals().items():
            if id(v) == id(var):
                names.append(k)
    return names

get_var_names([a, b])
# ['a', 'b']
```

```python

# 正確に変数名を取得できない場合があるので注意
a = 12345
b = a     # 参照渡し

get_var_name(a)
# 'b'
get_var_name(b)
# 'b'
```


# 環境
Ubuntu 18.04
Python 3.7.3
PKCS#12形式のクライアント証明書の有効期限を確認する

自分がハマりかけたのでメモ。

# 経緯
* 連携システムとの通信にクライアント証明書が必要
* 余計な端末にインストールして確認したくない
    * 特殊なケースな気はする
* 対象の証明書はpfxファイル(PKCS#12フォーマット)

PKCS#12フォーマットについては以下の記事が参考になりました。
[PKCS #12 個人情報交換ファイルフォーマットについて - Qiita](https://qiita.com/kunichiko/items/3e2ec27928a95630a73a)

# 手順
## 証明書の取り出し
opensslコマンドを用いる。

```
openssl pkcs12 -in input.pfx -clcerts -out output.crt -nokeys
```
パスワードを聞かれたら証明書インストール用のパスワードを入力する。

* -clcerts: 証明書を取り出す
* -nokeys: 秘密鍵は不要

## 有効期限の確認
### 証明書情報を確認
ここでもopensslコマンドを用いる。

```
openssl x509 -noout -text -in output.crt
```

* X.509は公開鍵証明書の標準規格
* -noout: ファイル出力しない
* -text: テキスト形式で出力する

### 有効期限の確認
「Validity」項目内の「Not After」に記載されている日時をチェックする。

```
Validity
    Not Before: Nov 1 00:00:00 2019 GMT
    Not After : Nov 1 00:00:00 2020 GMT
```

GMTのため必要であればJSTに直す。

# 参考資料
[X.509とは - ＠IT](https://www.atmarkit.co.jp/ait/articles/0401/01/news098.html)
[RSA鍵、証明書のファイルフォーマットについて - Qiita] (https://qiita.com/kunichiko/items/12cbccaadcbf41c72735)
Reactのアーキテクトを考える道のり - その1 (最小の構成で作る)

**この記事を書くに至ったきっかけ**
新システムを構築するにあたり、候補の一つである`React`にまずは慣れてみようと思い、自身でアプリケーションを構築しました。
かなりの試行錯誤の連続の結果、ある程度の形が出来てきたので、これまでの経緯を纏めておきたいと思います。

# Table Of Contents
1. Reactのアーキテクトを考える道のり - その1 (最小の構成で作る) ←ここ
2. [Reactのアーキテクトを考える道のり - その2(Fluxとの出会い)](https://qiita.com/motuo/items/761840cedb5db20e08f6)
3. [Reactのアーキテクトを考える道のり - その3(非同期通信)](https://qiita.com/motuo/items/f82d8eb0560b64b0dea4)
4. [Reactのアーキテクトを考える道のり - その4(Atomic Designを知る)](https://qiita.com/motuo/items/a2bef95600bbe23ddfd1)
5. Reactのアーキテクトを考える道のり - その5(テストを書く)

## これらを踏まえたボイラーテンプレート
[Githubリポジトリ](https://github.com/joolen/react-project-template)
[簡単な説明] (https://qiita.com/motuo/items/3bd44058c79bbcba8e6b)

# 現時点では、下記の構成を着地点としています。
各ライブラリを使うに至った経緯などは、後述(または別記事に記載)します。

|Name|Note|ドキュメントURL|
|:--|:--|:--|
|React|これがなければ始まらない。|https://reactjs.org/|
|Typescript|所謂、AltJS。解説は巷に溢れているが、静的な型付をすることが特徴。|https://www.typescriptlang.org/|
|material-ui|簡単にそれなりの画面を作る為のコンポーネント群を提供してくれる。|https://material-ui.com/|
|react-redux|非常にわかりやすい記事があるので添付<br>[たぶんこれが一番分かりやすいと思います React + Redux のフロー図解](https://qiita.com/mpyw/items/a816c6380219b1d5a3bf)|https://redux.js.org/<br> https://react-redux.js.org/|
|typescript-fsa(-reducers)|TypescriptでReduxを使うときのボイラーテンプレートです。これにより、記述を簡略化出来ます。|https://github.com/aikoven/typescript-fsa<br>https://github.com/dphilipson/typescript-fsa-reducers|
|redux-saga|React Redux構成でAPI通信を行う為のMiddlewareです。|https://redux-saga.js.org/|
|react-router|SPAで画面遷移をさせる為のデファクトスタンダードライブラリ。これを使うことで、ブラウザの「戻る」ボタンなども使える様になる。|https://reacttraining.com/react-router/|
|Storybook|作成したコンポーネントを単体で見られる様にしてくれるツール。<br>(このツール自体はReactには限らない。vue.jsなどでも利用可能。)|https://storybook.js.org/|

コンポーネントのディレクトリ構成には[Atomic Design](http://atomicdesign.bradfrost.com/table-of-contents/)を採用。

# 上記の構成に至った経緯
## まずは、Reactを動かしてみるところから。
チュートリアルをするにも、手元で動く環境がなければ始まりません。
何はともあれ、[create-react-app](https://create-react-app.dev/)をインストールしましょう。
簡単にReactを始めることが出来ます。

```sh
#自分自身のローカルにcreate-react-appをインストール
npm install -g create-react-app

#プロジェクトを`Typescript`で作成。
create-react-app sampleProject --typescript
```
本当に何てことことなかったです。

ここから`material-ui`も取り入れつつ、チュートリアルをこなし、ちょっとしたコンポーネントを作ってみたりしました。
# ここで得た感想
## React
### pros
* Webページの要素を小さく部品化して、再利用可能とするコンポーネント指向が、プログラマーとして非常に馴染む
* 冗長になりがちな記述をまとめることで、出来るだけDryな状態を保ちながら、統一したWebページを作れる
* `Typescript JSX`記法も特に違和感なく書けそう

### cons
* コンポーネントが増えてきたときの管理が大変そう。(似ているコンポーネント作っちゃいそう。)
* stateとpropsが便利だが、viewの中にビジネスロジックを入れ込んで複雑にしてしまいそう

## Typescript
### pros
* `Visual Studio Code`との相性がたまらなく良い！インテリセンスが効くのでストレスなくプログラムできる
* 型チェックが効いているから、子コンポーネントへのプロパティ渡し漏れや誤った型の変数を渡さずにすむ。(**つまらないミスをしなくなる**)
* `Null`や`undefined`の可能性がある場合もコンパイルエラーになるので、Guardするなで、事前に対処できる。

### cons
* 多くのサンプルが`js`で書かれているので、そのままでは動かないことが多い。(サンプルの絶対数も少ない)
* 導入するライブラリによっては、typescriptの型定義ファイルがない。その場合、自作しなければいけない。(メジャーなものは、だいたいある)

## Material UI
### pros
* Sampleも豊富に提供されているので、特に迷うことなく実装できる。
* それなりのページがサクサクできる。

### cons
* 割とありがちなデザインに落ち着きがち

１ページだけの簡単なページを作ってみると、この様な知見を得ることができました。
ただ、機能を追加するに従って、`state`や`property`に管理に辛みが。。。

[次回](https://qiita.com/motuo/items/761840cedb5db20e08f6)は、この辛みを緩和してくれる、`flux`や`redux`について書いていきたいと思います。
【jQuery】背景画像をフェードで切り替えるBgSwitcher

HTML/CSSの理解と、jQueryの基本的な使い方を復習するために、PAS-POLの模写を行いました。

模写を行うと、新しいデザインやコードに触れることができて、スキルアップに繋がっているなーと実感が持てます。

今回学んだjQueryを使って背景画像をフェードさせる「BgSwitcher」についてまとめておきたいと思います。

##BgSwitcher実装

- 公式サイトからjquery.bgswitcher.jsをダウンロード
- HTML/CSS、javascriptをコピペ
- オプションの追加



###公式サイト

[Demo - jQuery.BgSwitcher](http://rewish.github.io/jquery-bgswitcher/)


###HTML/CSS、javascriptをコピペ

```HTML
<div class="bg-slider">
 <h1 class="bg-slider__title">BGSWITCHER DEMO PAGE</h1>
</div>
```
```CSS
.bg-slider {
	width: 100vw;
	height: 100vh;
	background-position:center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bg-slider__title{
	color: #fff;
	font-size: 48px;
	line-height: 1.5;
	font-weight: bold;
	text-align:center;
	text-shadow: 1px 1px 1px #000;
}
```


```javascript
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="js/jquery.bgswitcher.js"></script>
<script>
jQuery(function($) {
    $('.bg-slider').bgSwitcher({
        images: ['img/bg1.jpg','img/bg2.jpg','img/bg3.jpg'], // 切り替える背景画像を指定
    });
});
</script>
```

javascriptの`images`の部分に表示したい画像パスを書けばOK

`images: [‘img/bg1.jpg’,’img/bg2.jpg’,’img/bg3.jpg’], 
`

ただし、サイトによっては色々とカスタマイズしないといけないケースもありますので、CSSを修正したりその辺りは臨機応変に。



###オプション

```html
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="js/jquery.bgswitcher.js"></script>
<script>
jQuery(function($) {
    $('.bg-slider').bgSwitcher({
        images: ['img/bg1.jpg','img/bg2.jpg','img/bg3.jpg'], // 切替背景画像を指定
	interval: 3000, // 背景画像を切り替える間隔を指定 3000=3秒
        loop: true, // 切り替えを繰り返すか指定 true=繰り返す　false=繰り返さない
        shuffle: true, // 背景画像の順番をシャッフルするか指定 true=する　false=しない
        effect: "blind", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
        duration: 500, // エフェクトの時間を指定します。
        easing: "swing" // エフェクトのイージングをlinear,swingから指定
    });
});
</script>
```

以上で、背景画像をフェードで切り替えるjQueryの実装が完了です。
WindowsUpdateとDisplayPort1.2の相性問題？

よくわかりませんが、DisplayPort1.2をネイティブで有効化した場合、
今回のWindowsUpdate(1903の2019/08月分)の適用後、ディスプレイが映らない。という事象を確認した。

詳細は今後追記するが、パソコン側ではなく、ディスプレイ側の設定(モニタ下にあるボタン等)から、
DisplayPort1.2を無効化したところ、復旧。

ディスプレイ周りに関しては、1903の登場初期に輝度調整ができなくなるという事象があったので、
あまり得意ではない(?)模様。
CE-34878-0のエラーで，PS4を修理に出した結果

:warning:**この記事は2年前に別サイトに書いた記事です．しかし，そのサイトがサービスを終了してしまったため，こちらに移した次第です．**

# CE-34878-0の発生状況と実施した対処法

## 発生状況
- ゲーム中に突発的に起きる．（再現不可）
- ほとんどのゲームで発生する．
- 30分～1時間程度で発生する．（まれに3分程度で発生する）
- グラフィックが高くなる箇所で発生することが多い．
- ゲームのメニュー画面や，PS4のホーム画面では発生しにくい．
- PS4起動時に，以前より音がうるさくなった．

## 対処法

### 公式サイトの対処法
[公式サイトの対処法](https://support.asia.playstation.com/jajp/s/article/ans-jajp50400#CE-34878-0)
**エラーは治りませんでした．**

### 私が実施した対処法
- システムアップデートや，ゲームのアップデートを全て最新版であるか確認する
- PS4を初期化する
- 全てのゲームを再インストールする
- 熱暴走を疑いファンを導入する

**エラーは治りませんでした**

# PS4を修理に出した結果

## 結果
**エラーがなくなり，PS4は治りました！**

## 修理内容
修理は**メイン基盤**と**ハードディスクの交換**でした．

## 日数
修理には**9日**かかりました．
※この日数は九州の場合であるため，日数はお住いの地域により差が出ると思われます．

## 担当者のコメント
- 「PS4の中に少々ほこりがあった」
- 「エラーはサポートセンターでも発生した」

## 修理代金
今回のエラーはサポートセンターでも発生したとのことですが，**原因不明**ということでした．
そのため，**念のために交換**ということになり，**無償での交換**となりました．

# まとめ
皆さんは，このエラーに長い間悩まされ，調べられてきたのでしょう．
どのサイトでも公式サイトの対処法をコピーペーストしたものしか掲載されておらず，歯がゆい思いをされてきたと思います．

今回のエラーについて私が思うことは，**考えられる対処法を全て実施して，治らなければ修理に出す**ということです．

私も初めは修理に出すことは嫌でした．しかし，いくら対処法を実施しても治らないため，ここは治ると信じて修理に出しました．

最後までお読みいただきありがとうございました．
javascriptのスコープに関するちょっとした実験

```javascript
(function(global ){

    function a(){
        console.log("execute a");
    }
    var c = {
        message: "this is message",
        doSomething1: function(){
            a();
        },
        doSomething2: function(){
            this.doSomething1();
        },
        doSomething3: function(){
            c.doSomething1();
        }
    }
    global.GlobalObject = c;
})(this);

a(); // error
c.doSomething(); // error
GlobalObject.doSomething1(); // "a"
GlobalObject.doSomething2(); // "a"
GlobalObject.doSomething3(); // "a"

console.log(c.message); // error
console.log(GlobalObject.message); // "a"

```

外から this を渡して使うのは node環境とブラウザ実行環境他でも使えるようにするため(だと思う)
つまりブラウザで実行される場合、 "global" は "window" になるので 実際は window.GlobalObject が作られる。

参考にしたのは vue.js
Apex REST コールアウトのtrailチェックがバグってる件

[Apex REST コールアウト](https://trailhead.salesforce.com/ja/content/learn/modules/apex_integration_services/apex_integration_rest_callouts)

>The 'getAnimalNameById' method must call <span>https</span>://th-apex-http-callout.herokuapp.com/animals/:id, using the ID passed into the method. The method returns the value of the 'name' property (i.e., the animal name).

とあるように、エンドポイントの指定は指示通りにするとこんな風になる。
``request.setEndpoint('https://th-apex-http-callout.herokuapp.com/animals/:id');``
idの指定はシンボルで行っていて、これで問題ないはずなのに(実際Apexのテストも通る)
trailのチェックではじかれる。
>Executing the 'getAnimalNameById' method on 'AnimalLocator' failed. Make sure the method exists with the name 'getAnimalNameById', is public and static, accepts an Integer and returns a String.

こんなメッセージが出力される。

回避するためには文字列結合を使う必要がある。
``request.setEndpoint('https://th-apex-http-callout.herokuapp.com/animals/'+id);``
[DiscussionForumより](https://developer.salesforce.com/forums/?id=906F0000000MIjRIAW)
液晶パネル付きOctoPrint機を構築する

# はじめに

この記事は、以前公開したRepetier-Server版の話をOctoPrintでやれるよ、という内容です。
背景等については、[以前の記事](https://qiita.com/strv/items/67bf29800613de3f715a)と同様になりますので、そちらも参照してください。

端的に言えば、RepetierServerが有料ライセンスでしかタッチUIを使えなくなったので、OctoPrintに乗り換えてみた、ということです。

# 手順

1. 動いている液晶・タッチパネル付きRaspberryPiを用意する
2. OctoPrintをインストールする
3. TouchUIプラグインをインストールする
4. ショートカット・自動起動化設定をする

# 動いているRaspberryPiを用意する

このへんは[以前の記事](https://qiita.com/strv/items/67bf29800613de3f715a#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B)を参照してください。

# OctoPrintをインストールする

公式の[マニュアル](https://community.octoprint.org/t/setting-up-octoprint-on-a-raspberry-pi-running-raspbian/2337)にかかれている通りで問題ありません。

ただし、Basic setupの項目までやれば十分です。Stretchでは自動起動の設定などが異なるので、そこから先はやらなくて良いです。

上記インストール後、

```
~/OctoPrint/venv/bin/octoprint serve
```

を実行した段階ですでに全機能が起動しています。そのため、```http://らずぱいのアドレス:5000/``` にアクセスすると、OctoPrintのUIが表示できます。
ただし、起動にはある程度時間がかかります。また、デーモンではないため、上記コマンドをCtrl+Cで終了したらサーバ機能も終了してしまいます。

# TouchUIプラグインをインストールする

これが肝心なものですが、簡単に導入できます。
ラズパイ上でなくて良いのでWEB UIの設定から、Plugin Managerを選択し、Get Moreボタンを押します。
表示された画面内の検索窓で ```TouchUI``` を検索してインストールします。

以上でインストールは完了しますが、OctoPrintの再起動が必要になります。

再起動後、同じようにWEB UIを起動すると、右上にスマホっぽいアイコンが出ていると思います。その状態でブラウザの幅を980px以下まで狭めてリロードすると勝手に表示がタッチUIモードになります。

あとはこれをラズパイの画面上で表示するだけです。

# ショートカット・自動起動化設定をする

## OctoPrint本体

stretch用に起動スクリプトをサービス化する話はすでに[Qiitaに記事があった](https://qiita.com/ysogabe/items/95b974d13b396cf7479e#octoprint%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)ので、そちらにまかせて…

上記サービスファイルを有効にすれば完了です。

```
sudo systemctl enable octo.service
```

有効にするだけでは実行されないので、

```
sudo systemctl start octo.service
```

で起動します。

## Touch UI

これもブラウザを指定のアドレスで開くだけなので、[以前の記事](https://qiita.com/strv/items/67bf29800613de3f715a#%E8%87%AA%E5%8B%95%E8%B5%B7%E5%8B%95%E8%A8%AD%E5%AE%9A%E3%82%92%E6%9B%B8%E3%81%8F)と同様です。

```
[Desktop Entry]
Name=Repetier-Server
Type=Application
Path=/usr/bin/
Exec=chromium-browser --noerrdialogs --disable-suggestions-service --disable-translate --disable-save-password-bubble --disable-session-crashed-bubble --disable-infobars --touch-events=enabled --disable-gesture-typing --kiosk --force-device-scale-factor=0.5 http://127.0.0.1:5000/
Icon=chromium-browser
Terminal=false
```
android studioでのユニットテストでandroidTestと、testフォルダの違い

androidTestと、testの違い。

Androidで、単体テストを記述すると、以下の２種類のフォルダの内どちらにテストファイルを作成しますか？と聞いてくる。

## androidTest
android環境でテストを行う。androidのライブラリを使え、エミュレータ上でテストが行われるためエミュレーター固有のバグをテストすることができる。
ヘッドレスエミュレーターを立ち上げてテストするため遅い。

## test
Jvm上で、テストを行う。androidのライブラリは使えないが高速。


## 結論
基本的に、ビジネスロジッククラスは、testフォルダでテストすることで、責務を分けることが出来そう。 
Statelessなロジックを扱うだけのクラスは、pureなjavaで書かれていることが望ましいので、なるべくtestフォルダでテストするのかな。

完
paramsとform_withについて【初学者の備忘録】

#paramsとは
・HTTPリクエストによって作成されたパラメータを参照するための**メソッド**です。(保存はしません)
・ハッシュのような形で値を参照するため、キーと値がセットとなっています。**ハッシュではありません。**

　なのですが、内部の動きはその通りでも、初学者にとっては、コードをパッと見るだけではよくわからないのです。。。
　この記事ではあるあるなコードで解説します。

#viewでの動き
**まず、下記のようにform_withで入力データを飛ばすことを考えます。**

```posts_controller.rb
  def new
    @posts = Post.new
  end
```

```erb:new.html.erb(posts_controller)
<div class="container">
  <%= form_with(model: @posts, local:  true) do |f| %>
    <div class="form-group">
      <%= f.label :title, "タイトル" %>
      <%= f.text_field :title, class: "form-control" %>
    </div>
    <div class="form-group">
      <%= f.label :summary, "要約" %>
      <%= f.text_area :summary, size: "20x5", class: "form-control" %>
    </div>
    <div class="form-group">
      <%= f.label :description, "本文" %>
      <%= f.text_area :description, size: "20x10", class: "form-control" %>
    </div>
    <div class="form-group">
      <%= f.label :url, "参考URL" %>
      <%= f.text_area :url, size: "20x1", class: "form-control" %>
    </div>
    <%= f.submit "投稿する", class: "btn btn-primary" %>
  <% end %>
</div>
```

##理解したいポイント
1. <% form_with(model: @posts... の、model: @postsの部分
2. <%= f.text_field :title...や、<%= f.text_area :summary...などの入力フォームの属性

##詳細
1.<% form_with(model: @posts... の、model: @postsの部分
　→form_withでmodelオプションをつけると、
　引数のインスタンス(@posts)が何も情報を持っていない場合、createアクションへ、
　情報を持っている場合、updateアクションへ自動的に振り分けてくれます。

　→今回はnewしているので、createアクションへ飛びます。

2.<%= f.text_field :titleの部分
　→:titleは、あくまで**paramsメソッドで参照する際**のキーです。
　　controllerではparams[:title]という形で呼ぶことができます。
　　最終的に、**DBのtitleカラムに保存するため**、:titleとする必要があります。

　　:titleとしない場合、次のcreateアクションで
　　**ストロングパラメーターの検証は通りますが、DBに保存することができません。**
　　(permit(:hoge)は合わせる必要ありですが)

　　paramsメソッドを使って値を参照するだけなら、ここは:user_nameでも:timeでも良いです。
　　ここら辺が、こんがらがるポイントかと思っています。

　　DBへの保存処理は、次のcreateアクションで実施します。
　　下記のような。

```posts_controller.rb
def create
  @post = current_user.posts.new(post_params)
   if @post.save!
    redirect_to @post, notice: "「#{@post.title}」を投稿しました。"
   else
    render :new
  end
end

private
def post_params
  params.require(:post).permit(:title, :summary, :description, :url)
end
```

##ポイント
　post_paramsメソッド内の、
　**params.require(:post).permit(:title, :summary, :description, :url)**の部分。
　この:postとか、:titleは、**あくまでparamsメソッドで参照する値のキー**を指定し、値を検証しているだけです。
 
　createメソッドの
　@post = current_user.posts.new(post_params)の部分で初めて
　paramsメソッドからキーと値が渡されます。
　paramsメソッドのキーとDBカラムが一致しない場合は、ここでエラーが表示されてしまいます。


##★paramsがハッシュ的であることについて
Railsガイド
"このparamsハッシュは一見ハッシュのように振る舞いますが、キーとしてシンボルと文字列のどちらでも指定できる点がハッシュと異なります。"
参考：https://railsguides.jp/action_controller_overview.html
【バッチファイル】ファイルの中身をクリップボードにコピーする


複数行の文字列で構成されたテキストファイルがある。
それをいちいちダブルクリックして開いて
ctrl+a ctrl+c ファイルを閉じる
と4工程踏むのが面倒になった。
このコピペ自体は少なくとも100回は今後行う予定なので、
以下のバッチファイルを作成した。

```bat:test.bat
cd C:\Windows\System32
clip < %1
```

例によってclipコマンドを使うには
パスを通す必要があるが会社のPCでadminユーザのpwが不明なので
ディレクトリ自体を移動する。

コピペしたいファイルをこのバッチにD&Dすれば1工程で済む。

https://teratail.com/questions/161290
こんな風に他ファイルを用意しないで済むものも見つけたが、
最初の写経労力が時短に見合わないので却下。
stunnel 用のsystemdスクリプト作成

###概要
SSLトンネリング用のOSSであるstunnelですが、systemd用のスクリプトがなく、systemctlコマンドで起動や停止ができないのが玉に瑕です。Gitにあった[先人の知恵](https://github.com/liuliang/centos-stunnel-systemd "Git centos-stunnel-systemd")を借りて作成しました。

###できること
・stunnelをsystemctlコマンドから制御可能

###前提
・OSはCentOS7を使用
・Stunnelの初期設定が完了していること
　【参考】[RedHat  "4.8. STUNNEL の使用"](https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/7/html/security_guide/sec-using_stunnel "RedHat 4.8. STUNNEL の使用")

###作業内容

```bash:
--スクリプト導入--
# vim /usr/lib/systemd/system/stunnel.service
# ln -s  /usr/lib/systemd/system/stunnel.service  /etc/systemd/system/multi-user.target.wants/stunnel.service 

--動作確認--
# systemctl restart stunnel
# systemctl status stunnel
# ps -eaf|grep stunnel

```
###systemdスクリプト
```bash:stunnel.service

[Unit]
Description=SSL tunnel daemons
After=syslog.target
After=network.target

[Install]
WantedBy=multi-user.target

[Service]
Type=forking
ExecStart=/bin/stunnel /etc/stunnel/stunnel.conf
ExecStop=/bin/pkill -e stunnel
Restart=always
PrivateTmp=false
```



以上。
Qiitaの投稿を続けて得られる事

私は2019/7/23にQiitaに登録して、1日1記事のペースで投稿する事を決意しました。そしてこの記事が祝👏31Items🍀

関わり始めてから1月程度と、まだまだ間がないながらも、Qiitaから得られた事、今後得られそうな事をまとめてみます。

# Qiitaの投稿を続けて得られる事

- 知識を記事に変換する事で、理解が深まる
- 様々な付帯情報を仕入れ、記事の品質を上げる事で視野が広がる
- コメント経由でアドバイスを頂くことで、成長に繋がる※完全独学の私にとってはなによりもありがたい事！
- 使いまわしたい関数等を公開することで、様々な環境からコピペができる
- 微力ながらも、誰かの役に立っていると思うとモチベーションが上がる
- フォローやタグをうまく活用し、新しい情報がどんどん入ってくるようになる
- 成長が止まらなくなり、結果投稿のネタが尽きない
- トレンドがすっと入ってきて、今後の自分の在り方を考えさせてくれる
- 負けず嫌いの私としては、Qiita投稿者がライバルのように思え、燃える！

これからもQiitaへの投稿をずっと続けます(^^)
AWSCDK for TypeScript で cdk deploy 前に tsc を実行しなくてもデプロイできる方法

# はじめに

AWSCDKをTypeScriptで書いていて、tscでJSにビルドしてからデプロイをしていたんですが、「毎回ビルドめんどくさいし忘れるしなんとかしたい」って思って、毎回ビルド→デプロイっていう手順を踏まなくてもいいようにしたので、その備忘録。

## 何をするか

`ts-node` で対象ファイルはtsファイルのまま、デプロイ実行時にビルドするようにします

## npx で `ts-node` を実行する場合

CDKのAppファイル ( `cdk-app.ts` ) のファイル名は適宜書き換えてください。

### edit cdk.json

cdkコマンド実行時にAppファイルに対して実行されるコマンドを修正します

```json:cdk.json
{
  "app": "npx ts-node bin/cdk-app.ts"
}
```

## 予め `ts-node` をインストールしておくパターン (例)

### install `ts-node`

```terminal
$ yarn add ts-node
```

### add to package.json

`package.json` の `scripts` にコマンドを追記します

```json:package.json
{
...
  "scripts": {
    "build": "tsc",
    "watch": "tsc -w",
    "cdk": "cdk",
    "cdk-app": "ts-node bin/cdk-app.ts"
  },
...
}
```

### edit cdk.json

```json:cdk.json
{
  "app": "yarn cdk-app"
}
```

## さいごに

これでtsファイルをビルドせずにデプロイ実行してから気づいて、虚無の時間を過ごさずに済みますね！
ではまた！！！
iQueryの$でis not defined;をはかれた時の対処法

#「$」マークでエラーが出た時の対処法。
app/assets/javascripts/ファイル名.js
にjQueryで記述する際の最初に使う「$」マークでエラーが出た時は実は簡単に消せます。
![スクリーンショット 2019-08-22 10.43.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429158/989b611d-f82c-54fd-af86-d1e74b8c96c5.png)


前提として、app/assets/javascripts/application.jsには

```javascript

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require rails-ujs
//= require bootstrap
//= require activestorage
//= require turbolinks
//= require_tree .
```

これらが書かれてるものとします。
**注意: require_tree.は一番最後の記述にしてください。**

#解決方法
エラー画面にもある**add /* global $*/**を上にそのまま追加することによってエラーは消えます。
![スクリーンショット 2019-08-22 10.54.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429158/043fd011-b1a2-126a-9a9c-b47b5ca713c8.png)

他にも解決策があると思いますが自分でこれで解決したので投稿させていただきます。
誰かの助けになれば幸いです。
Dockerでのjupyter notebook立ち上げの手順

Dockerでjupyter notebookに入るためにはポートの同期、マウントが必要です。
一連の流れに沿って自分が詰まった点とその解決法を共有いたします。

## Dockerをローカルと紐付けて、ポートを解放して起動
`docker run -it -p 8888:8888 -v $(pwd):path/to/local path/to/docker bash`
8888はDockerが共有できるポート
これが8000の場合、うまくポートが共有できずVMにアクセスできない。

## 設定コンフィグ作成
`jupyter notebook --generate-config`

## vimインストール(もしVM上にvimが入ってなければ)
`apt-get update`
`apt-get install vim`

## vim内でコンフィグにポート解放書き込み 
`vi /root/.jupyter/jupyter_notebook_config.py`
パスの部分は設定コンフィグ作成の時点で出たパスを入力する

## 設定ファイルの一番上に設定書き込み
`c.NotebookApp.ip = '0.0.0.0'`

## jupyter起動(--allow-rootはオプション)
`jupyter notebook --allow-root`

## Dockerの終了
`ctrl + p -> ctrl + q`

## 起動しているDockerに入る
`docker exec -it container_name bash`