OmniAICreator/Qiita-1.07M huggingface dataset:
自分用Python3スニペット

## 標準入力を受け取る
```
x = input()        # 文字列になる
x = int(input())   # 整数(int)になる
x,y = [int(i) for i in input().split()]      # 標準入力が "10 20"のような場合に、xに10が入り、yに20が入る
x,y = map(int, input().split())              # 同上。map関数を使うとこのように書ける
```

## 文字列を1文字毎に分割する
```
s = input()
chars = list(s)
```
## 商、余りを求める
```
>>> a = 10
>>> b = 3
>>> a / b
3.3333333333333335
>>> a // b    # 商を求める
3
>>> a % b     # 余りを求める
1
```
仕事のストレスをゼロクリアする秘訣

##ストレスは必ず発生する

SI業界に従事して10年。
この仕事はストレスと如何にうまく付き合うかであると常々思う。

* 客/上司からオーダー
* 現場からの突き上げ
* 根拠のないスケジュール
* 理解力のないメンバ

ストレスがかかると、自分の能力を最大限に発揮できない。
また、その現状から如何に脱出できるか、=逃げることばかりを考える。

そのようなときに、ストレスとうまく向かい合う術をまとめた。

### 5年後の自分を想像する
ストレスは、マイナスに向かうものばかりでもない。
しかし、今日ストレス下にいる間は、そのようなことを考えることもできなくなるのも事実。
そういうときには、5年後の自分を想像しよう。
「この現状を乗り越えた自分はカッコイイ。後々武勇伝になる。」
「5年後の自分にとって、今の経験がどのような役に立つだろう。」

今ばかり見てしまうと、どうしても落ち込んでくる。
そういうときには、5年後の自分から、今の自分を俯瞰しよう。
そうすることで、今の現状をポジティブにとらえることができる。

### 運動する
会社に行き、終電まで働き、帰ってビールを飲んで寝て、翌朝起きたらすぐ出社。
このような生活の中では、自分の思考をリセットするタイミングもない。
また、アルコールは一時的に気分をリフレッシュさせてくれるが、寝て起きると、アルコールの効果によって
鬱々とした気持ちになることも間々ある。

そういう時にはランニングをお勧めする。
走ることで、気分がリフレッシュされる。また、運動をすると不思議とポジティブになれるものだ。

### 相談する/周りを巻き込む
苦しいとき、つらいときは、周囲を巻き込もう。
仲間がいれば、その苦境を乗り越える力を分けてもらえる。

### それでもつらいときには
逃げ出そう。
逃げることで、失うものもある。
しかし、得るものもある。

逃げるかどうかは、

*　仕事内容に悩んでいるのか
*　人間関係に悩んでいるのか

を軸に考え、人間関係で悩んでいるのであれば、逃げてしまうのも手だ。
コミュニティは一つではない。
３分間Networkingをまとめてみた物理層編(第８回〜第１１回)

前回[第０回〜第７回](https://qiita.com/KantaSunaga/items/1831590b913218e59c32)の続きです。

##[第８回　レイヤ１ 信号と回線](https://qiita.com/KantaSunaga/items/1831590b913218e59c32)

**電気信号**
ネットワークうんちゃら言っているが実際はただの電気信号である。

電気信号にはアナログとデジタルの二つがある。

アナログ・・・波
デジタル・・・ON/OFF

アナログ信号か、デジタル信号かは回線に依存する。

**多重化**
一つのメディアに対して複数の信号を流す技術。

実際は、二つの信号は同時に流れないので、信号を合体させる技術のことを言う。

**MODEM**
読み方は、「モデム」。
電話用の回線を使った時に、信号がアナログになるので、それをコンピュータに読ませために、デジタル化する必要があるが、それをしてくれる装置

**ISDN**
デジタル回線として有名な回線

**スプリッタ**
ADSLなどの電話回線を使った場合、電話用の信号と、通信用の通信の２つが流れてくるので、それを
分ける装置

**信号における障害**
信号と言ってもやはり電気信号なので、一般的な電気と同じように、ノイズが発生したりすることがある。
その中でも問題になるのは、「減衰、ノイズ、衝突」の３つだ。

**抵抗**
減衰してしまう原因の一つで、ケーブルの中身は、銅なので、金属抵抗があるので、信号が弱まってしまう。
光ファイバでもも減衰があり、長時間流していると光が拡散指定しまい、減衰してしまう。
（電気信号よりも全然マシ）

**ノイズ**
様々な原因により、電気信号の形が壊れてしまうことをさす。
原因はこんなものがあげられる
・すぐ隣の銅線に信号が流れている（クロストーク）
・熱雑音
・AC電源が近くにある
・雷や無線、蛍光灯などによる電磁干渉

**衝突（コリジョン）**
２つのデータが同時に流れた時に発生する。
電圧が変わってしまい、元の信号の形と変わってしまう。

##[第９回レイヤ１ ネットワーキングメディア](http://www5e.biglobe.ne.jp/aji/3min/09.html)

**ネットワーキングメディア**
ネットワークを構成する媒体。イメージとしては、ケーブルや、ハブなどの類

**同軸ケーブル**
中から順に

　銅線・・・信号が流れるところ
　絶縁体
　シールド・・・外部からの干渉を防ぐ
　プラスティック製の皮膜

※本家の画像がかなりわかりやすいので本家でここはみてください。

いいところ
　・ノイズなどに強い
　・遠くまで届く

考慮すべき点
　・硬い
　・高い

現在はあまり推奨されていない。

**ツイストペアケーブル**
現在の主流のケーブル。

８本の細い銅線をまとめたような構造をしていて、２本ずつ４つの組にして、お互いを交互により合わせている。
より合わせることで、電流が流れた際に、お互いに磁場が発生して、打ち消しあう（キャンセレーション）

良い点
　・柔らかい
　・安価

考慮すべき点
　・シールドがないので、同軸ほど遠くまでは届かない

※詳しくは、本家をご覧ください

**光ファイバケーブル**

中から順に
　反射率の高いガラス
　↓
　ケプラー繊維⇦　ガラスを保護している
　↓　
　プラスチック

良い点
　・一切の電磁的な干渉を受けない
　・高速
考慮すべき点
　・高価

※詳しくは、本家をご覧ください

**ケーブルまとめ**

| 特徴 | 同軸 |UTP| 光ファイバ|
|:-----------------|:------------------|:------------------|:-----|
| 干渉| シールドがあるため強い |キャンセレーションで防ぐ。だが、弱い   |光信号のため、影響なし
| 値段  |            中 |       低       |高 |
| 敷設             |           ちょっと難しい |        	易しい        |難しい|
| 速度               |                中 |         高         |高|
| コネクタ             |             BNCコネクタ |       RJコネクタ       |マルチモードコネクタ|

※詳しくは、本家をご覧ください

##[第10回レイヤ１ リピータ・ハブ](http://www5e.biglobe.ne.jp/aji/3min/10.html)

**リピーター**
LAN環境中でも比較的なが距離のやり取りをしたい場合、長い距離を通信したい場合、途中で信号が弱くなってしまうので、烟るの途中でこれを接続すると増幅や整形をしてくれる。

信号増幅機みたいなイメージです。
無線の中継機のようなもの

**ハブ**
LAN環境の中で、複数のパソコンをつなげることができるようになる。
またリピーターの役割も同時に果たしている

※詳しくは本家をご覧ください

##[第11回レイヤ１ ネットワーク・トポロジ](http://www5e.biglobe.ne.jp/aji/3min/11.html)

**物理トポロジ**
実際の機器とメディアの配置のこと。
AWSの説明とかで使われるあの図

**バス型トポロジ**
すべてのパソコンから支線が生えており、すべての支線は、母線に合体している設計

※詳しくは本家をご覧ください

**リング型トポロジ**
すべてのパソコンを円のようにしてつなぐ設計

※詳しくは本家をご覧ください

**スター型トポロジ**
ハブなどのネットワーキングデバイスを用いて、すべてのパソコンが中心のハブにつながっている設計
現在の主流である

※詳しくは本家をご覧ください

**ツリー型トポロジ**
フォルダのようにツリー構造になっている設計

※詳しくは本家をご覧ください

**メッシュ型トポロジ**
ずべてのパソコンがお互いに繋ぎ合っている状態で、どこ書きれても対応できるようになっている設計

※詳しくは本家をご覧ください


















































































































」
LaravelでWEB開発1

備忘録として、初期導入からサービス公開にあたる
一連の流れをメモしていきます。

※Qiitaの投稿練習も兼ねての投稿なので、
　今のところここに記載している情報は不十分ですが、
　インストール手順も別途追記していきます。

# 開発PC
- OS：Windows 10 Pro 64bit
- メモリ：6GB
- Core i5-3320M CPU @ 2.60GHz

# ローカル開発環境
- XAMPP 7.2.4
　（Apache、MySQL搭載）
- PHP 7.2
- Laravel 5.6
- Vue.js（予定）
- Composer
　※今後、Laradockを使ったDocker環境も構築予定

#ツール
- PowerShell
- Git
- GitHub
- Bitbucket
- SourceTree
- Sublime Text 3
　（ググりながら、使えそうなプラグインを
　　片っ端からPackage Controlを使ってインストール）
Ethereum: Web3.pyでAddress has an invalid EIP checksumのエラーが吐かれる場合

Web3.pyを利用していて、以下のようなコードで表題のエラーが吐かれる場合があります。

```python

token_address = '0xbbfce3c05aef921b35c7264fff21bb08f490a821'
token_abi = open("AlisToken.abi", "r")
token = web3.eth.contract(
    address=token_address,
    abi=token_abi.read(),
)
```

# 結論
この場合、 `web3.toChecksumAddress` を用いることで解決できます。

```python
token_address = web3.toChecksumAddress('0xbbfce3c05aef921b35c7264fff21bb08f490a821')
token_abi = open("AlisToken.abi", "r")
token = web3.eth.contract(
    address=token_address,
    abi=token_abi.read(),
)
```

# 環境
- AWS Lambda python 3.6
- Web3.py 4.2.0

# 吐かれたエラー

```bash
Traceback (most recent call last):
  File "/var/task/lambda_base.py", line 21, in main
    result = self.exec_main_proc()
  File "/var/task/token_distributer.py", line 36, in exec_main_proc
    abi=alis_token_abi.read(),
  File "/var/task/web3/eth.py", line 346, in contract
    return ContractFactory(address)
  File "/var/task/web3/contract.py", line 206, in __init__
    self.address = normalize_address(self.web3.ens, address)
  File "/var/task/web3/utils/normalizers.py", line 160, in normalize_address
    validate_address(address)
  File "/var/task/web3/utils/validation.py", line 116, in validate_address
    raise InvalidAddress("Address has an invalid EIP checksum", value)
web3.exceptions.InvalidAddress: ('Address has an invalid EIP checksum', '0xbbfce3c05aef921b35c7264fff21bb08f490a821')
('Address has an invalid EIP checksum', '0xbbfce3c05aef921b35c7264fff21bb08f490a821'): InvalidAddress
Traceback (most recent call last):
  File "/var/task/handler.py", line 10, in lambda_handler
    return token_distributer.main()
  File "/var/task/lambda_base.py", line 40, in main
    raise err
  File "/var/task/lambda_base.py", line 21, in main
    result = self.exec_main_proc()
  File "/var/task/token_distributer.py", line 36, in exec_main_proc
    abi=alis_token_abi.read(),
  File "/var/task/web3/eth.py", line 346, in contract
    return ContractFactory(address)
  File "/var/task/web3/contract.py", line 206, in __init__
    self.address = normalize_address(self.web3.ens, address)
  File "/var/task/web3/utils/normalizers.py", line 160, in normalize_address
    validate_address(address)
  File "/var/task/web3/utils/validation.py", line 116, in validate_address
    raise InvalidAddress("Address has an invalid EIP checksum", value)
web3.exceptions.InvalidAddress: ('Address has an invalid EIP checksum', '0xbbfce3c05aef921b35c7264fff21bb08f490a821')
```
textarea に編集可能な文字を表示させる

#textarea に編集可能な文字を表示させる

```ruby:index.html
<textarea name="body"　rows="10" cols="100">ここに表示させたい文字を記入</textarea></p>
```

上の「ここに表示させたい文字を記入」に入れることにより編集可能な文字となり表示される・
VSCodeでjsを書いてデストラクチャを改行させないようにするには

# 背景

```javascript
const {DashButton} = require('win-node-dash-button');
```

がBeautify fileを行うと、以下のように改行されてしまう。

```javascript
const {
    DashButton
} = require('win-node-dash-button');
```



# 解決方法

.jsbeautifyrcに以下を記述したら、デストラクチャが改行されなくなった

```txt
{
  "brace_style": "collapse,preserve-inline",
  // ...
}
```
Omiseで複数の購入ボタンの設置方法

#前回の記事
[Omise決算額変更](https://qiita.com/piyoon/items/a69354511c131750822f)

前回は複数の購入ボタンが設置できない為一つのボタンに任意の設定を行うという
実に強引でほんとにこれしか無いの？
という対処法でした

#ちゃんとあった
ドキュメントには見当たりませんでしたが
https://github.com/omise/examples/tree/master/omise.js
こちらのexample-4ボタンを通貨毎に用意するというサンプルにありました

#手順

準備

```html

商品分のボタンを用意
<form name="checkoutForm" method="post" action="checkout">
  <button type="submit" id="checkout-1">１０００ポイント　１０００円</button>
  <button type="submit" id="checkout-2">２０００ポイント　２０００円</button>
  <button type="submit" id="checkout-3">３０００ポイント　３０００円</button>
</form>

<script type="text/javascript" src='https://cdn2.omise.co/omise.js.gz'></script>

<script type="text/javascript">
	// Set default parameters
	// 共通部分の設定
	OmiseCard.configure({
		key: 'パブリックキー',	//	ここ　サンプルコードではpublickeyとなっているので注意
		image: 'https://p4match.com/images/logo.png',
		frameLabel: 'P4MATCH',
		submitLabel: '支払い金額',
		locale: 'ja',
		currency: 'jpy'
	});

	// Configuring your own custom button
	// 各ボタン用の設定
	OmiseCard.configureButton('#checkout-1', {
		frameLabel: '１０００ポイントチャージ',
		buttonLabel: '１０００ポイント(１０００円）',
		amount: 1000,
		});
	});

	OmiseCard.configureButton('#checkout-1', {
		frameLabel: '２０００ポイントチャージ',
		buttonLabel: '２０００ポイント(２０００円）',
		amount: 2000,
		});
	});

	OmiseCard.configureButton('#checkout-1', {
		frameLabel: '３０００ポイントチャージ',
		buttonLabel: '３０００ポイント(３０００円）',
		amount: 3000,
		});
	});

	// Then, attach all of the config and initiate it by 'OmiseCard.attach();' method
	// 設定確定
	OmiseCard.attach();
</script>

```


以上で複数の商品を並べることが出来ました。

#感想
うん、こうだよね。
そんなに特殊なことでも難しいことでもないはずだよね。
という感じです。

問題はOmiseCardクラスのドキュメントが探せないことなんです。
多分これからもサンプルをくまなく探せば問題なく解決できるともうのですが
Omiseさん、もう少しドキュメントお願いします！

#追記　サンプルに罠がありハマったところ

パブリックキーを設定する箇所が普通に'publickey'となっていたのでまさか間違いだとは思わず。
別のドキュメント箇所での設定が'key'とあったため気づき修正。

	OmiseCard.configure({
		key: 'パブリックキー',	//	ここ　サンプルコードではpublickeyとなっているので注意
		image: 'https://p4match.com/images/logo.png',
		frameLabel: 'P4MATCH',
		submitLabel: '支払い金額',
		locale: 'ja',
		currency: 'jpy'
	});
c++ 構造体の諸々 No3

#概要
構造体を読み書きするときに気になった細かいところを個人的に纏めたもの。

#目次
1.構造体の基本
2.宣言編
3.関数編

#1.構造体の基本
基本的な構造体の扱い方についてはここを参照[初心者のためのポイント学習C言語 15章 構造体](http://www9.plala.or.jp/sgwr-t/c/sec15.html)

#2.宣言編
```c++
型枠の宣言
struct 構造体タグ名
{
    メンバ変数;
};

構造体変数の宣言
struct 構造体タグ名 構造体変数名
```

他にtypedefを使う方法。typedefは既に定義されている型に、別の新しい名前をつけて定義する。

```c++
typedef 既に定義されている型　定義する新しい型
```
以下に実際の宣言の例

```c++
struct _person{
	char name[20];
	int age;
	double height;
};

struct _person person;


typedef struct _person{
	char name[20];
	int age;
	double height;
}Person;

Person person;
```
型枠の宣言と同時にその型のポインタの宣言をする方法

```c++
struct _person{
	char name[20];
	int age;
	double height;
}*person;
```
こうすることで struct _person型のポインタ\*personを宣言する。（cf. int型のポインタ\*p）


#3.関数編
構造体を関数に渡して扱うの例。構造体の型枠の宣言をプロトタイプ宣言の前にしておかないと、エラーがでる。

```c++:sample1
#include <bits/stdc++.h>
using namespace std;
//cin.sync_with_stdio(false);

#define FOR(i,a,b) for(int i = (a); i < (b); ++i)
#define rep(i,n) FOR(i,0,n)

struct _person{
	string name;
	int no;
	int cost[2];
};

void input(struct _person *person);
 
int main(int argc, char const *argv[])
{
	cin.tie(0);
	ios::sync_with_stdio(false);

	struct _person person[3];

	input(person);

	rep(i, 3){
		cout << person[i].name << endl;
		cout << person[i].no << endl;
		rep(j, 2){
			cout << person[i].cost[j] << endl;
		}
		cout << endl;
	}

	return 0;
}

void input(struct _person *structure){
	
	rep(i, 3){
		(structure + i) -> name = "abcd";
		(structure + i) -> no = i;
		rep(j, 2){
			(structure + i) -> cost[j] = i * j;
		}
	}
}
```
```c++:出力
abcd
0
0
0

abcd
1
0
1

abcd
2
0
2
```

構造体の宣言と同時にポインタの宣言をすると、関数に渡すときの作業は変わらないが、構造体変数の確保のために（内部のメンバ変数をポインタにしてる時も）malloc関数等を使ってメモリを動的に確保する必要がある

```c++:sample2
#include <bits/stdc++.h>
using namespace std;
//cin.sync_with_stdio(false);

#define FOR(i,a,b) for(int i = (a); i < (b); ++i)
#define rep(i,n) FOR(i,0,n)

struct _person{
	int no;
	int *cost;
}*person;

void input(struct _person *person);

int person_num = 2;
int cost_num = 3;
 
int main(int argc, char const *argv[])
{
	cin.tie(0);
	ios::sync_with_stdio(false);

	person = (struct _person *) malloc(sizeof(struct _person) * person_num);
	rep(i, cost_num)	person[i].cost = (int *) malloc(sizeof(int) * cost_num);

	input(person);

	rep(i, person_num){
		cout << person[i].no << endl;
		rep(j, cost_num){
			cout << person[i].cost[j] << endl;
		}
		cout << endl;
	}

	return 0;
}

void input(struct _person *structure){
	
	rep(i, person_num){
		(structure + i)-> no = i;
		rep(j, cost_num){
		(structure + i) -> cost[j] = i * j;
		}
	}
}
```
```c++:出力
0
0
0
0

1
0
1
2
```

メモリの動的確保に関してはこちらの記事がわかりやすいです。[6.メモリを使ったプログラム](http://rainbow.pc.uec.ac.jp/edu/program/b1/programming-6.htm)


#参考文献
[初心者のためのポイント学習C言語 15章 構造体](http://www9.plala.or.jp/sgwr-t/c/sec15.html)
[構造体を使ったプログラム](https://qiita.com/nomunomu/items/1a72b0150ea0fcf442b0)
[構造体](http://www.cc.kyoto-su.ac.jp/~yamada/programming/struct.html)
EC2インスタンス起動時に指定ユーザで任意のシェルスクリプトを実行する方法


# EC2インスタンス起動時に指定ユーザでシェルを実行する方法
経費削減のため、指定時間だけ起動したいというEC2インスタンスの再起動時に
rootユーザではなく、指定ユーザでシェルを起動する方法。
再起動時の確認が手間なのと地味にはまったので忘れないように備忘録として書いておく。

1. /etc/init.dに起動シェルスクリプト設置(自作サービス)
2. chmod 775 /etc/init.d/(サービス名)
3. chkconfig --add (サービス名)

例としてはmyserviceスクリプトをinit.d以下に作成して
そのスクリプト経由でユーザを切り替えて(ec2-user)任意のシェルスクリプト（hoge.sh）を起動させる

```/etc/init.d/myservice
#!/bin/sh
# chkconfig: 2345 99 10
# description: start shell
case "$1" in
 start)
       su -l ec2-user -c "sh /home/ec2-user/hoge.sh"
       ;;
 stop)
       ;;
  *) break ;;
esac
```

上記作成後、EC2インスタンス起動時に実行する設定に追加

```
$chkconfig --add myservice
$chkconfig myservice on
```
Nuxt.jsをspa modeでGitHub Pagesで使う時に404にならないようにする

サーバを無料で使いたいマンなので全てGitHub Pagesでなんとかしようとするマンです。よろしくお願いします。

GitHub PagesでSPAしようとすると、index.html以外にアクセスされた場合にGitHub Pagesで用意された404が表示されてしまうのでなんとかしようとした時の記録です。

### SPAモードにする
```js:nuxt.config.js
module.exports = {
  mode: 'spa' // これを追記
}
```

### index.html以外にアクセスされた際にNuxt.js(index.html)にリダイレクト
```html:static/404.html
<script>
  sessionStorage.redirect = location.href;
</script>
<meta http-equiv="refresh" content="0;URL='/'"/>
```

```js:static/js/404-redirect-ghpages.js
;(function() {
  const redirect = sessionStorage.redirect
  delete sessionStorage.redirect
  if (redirect && redirect !== location.href) {
    history.replaceState(null, null, redirect)
  }
})()
```

```js:nuxt.config.js
module.exports = {
  head: {
    script: [{ src: '/js/404-redirect-ghpages.js' }] // これを追記
  },
}
```

### デプロイ
```zsh
$ yarn add --dev push-dir
```

```json:package.json
"scripts": {
  "build": "nuxt build",
  "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
}
```

```zsh
$ yarn build
$ yarn deploy
```

参考
https://dev.to/_evansalter/github-pages-and-single-page-apps
Next.js + TypeScript でWEBアプリを作る #1 〜Hello worldまで〜

# はじめに
Next.jsを使ってアプリケーションを作ってみようと思い、その際の手順をまとめてみました。

# 使用技術
- Next.js: Reactを使ったフレームワーク
- TypeScript: JavaScriptで型が扱える言語
- Redux: 状態管理をするライブラリ

# 作成手順
## プロジェクトの作成
まず、パッケージ管理にyarnを使用するため、インストール

```
npm install -g yarn
```

次にプロジェクトを初期化します。

```
npm init 
```
色々きかれるので、都度答えます。
これで、package.jsonが作られて、空のプロジェクトができあがります。

## Next.jsのインストール
まずは、[Next.js](https://github.com/zeit/next.js)とReactをインストールしていきます。

```
yarn add next react react-dom
```

npm scriptでnextを利用できるようにpackage.jsonに下記を加えます。

```
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
```

Next.jsは、`pages`というディレクト以下のファイルを自動的に読み込み、そのファイル名でルーティングを行います。
ただし、`index.js`という名前の場合は`/`へのアクセス時に読み込まれます。
試しに、pagesというディレクトリを生成し、そこにindex.jsxという名前で下記を記述してみます。

```index.jsx
export default () => <div>Welcome to next.js!</div>
```

先ほどのnpm scriptを実行してみます。

```
yarn run dev
```

これで、http://localhost:3000 にアクセスすると、"Welcome to next.js!" というメッセージが表示されると思います。

## TypeScriptを使うための準備

Next.jsでTypeScriptを使うには [next-typescript](https://github.com/zeit/next-plugins/tree/master/packages/next-typescript) というNext.jsのプラグインを使用します。

```
yarn add @zeit/next-typescript typescript
```

次に、next.config.js という名前でプロジェクト直下にファイルを作成し、下記を記述します。

```next.config.js
const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript()
```

さらに、tsconfig.json という名前で、同じくプロジェクト直下にファイルを生成し、下記を記述します。

```
{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "lib": [
      "dom",
      "es2016"
    ]
  }
}
```

これで、TypeScriptでの記述が可能になりました。

## TypeScriptでの開発
先ほどの pages/index.jsx を pages/index.tsx にリネームして、再度 `yarn run dev` を実行すると、先ほどと同じように "Welcome to next.js!" が表示されれば、成功です。
[WIP]Vagrantで開発環境をつくる！

## 1.Officialのboxが置かれているサイトに遷移する
[Discover Vagrant Boxes](https://app.vagrantup.com/boxes/search?provider=virtualbox)


[![https://gyazo.com/b5c43147ebde679c6f93b7288ad0252c](https://i.gyazo.com/b5c43147ebde679c6f93b7288ad0252c.png)]
(https://app.vagrantup.com/boxes/search?provider=virtualbox)

## 2.上記サイトからboxを作成する

![https://gyazo.com/fc78738933d0b76764dffd03d31eb176](https://i.gyazo.com/fc78738933d0b76764dffd03d31eb176.png)

```bash:boxを追加
vagrant box add { box名: (例)ubuntu/trusty64 }
```

![Image from Gyazo](https://i.gyazo.com/b69482f32c43d4f80f4b36fc76c7319a.png)

## 3. 仮想マシンを作成



``` bash:boxの一覧を表示
vagrant box list
```
![https://gyazo.com/7f658ddc112ad6a30c530d5258863de7](https://i.gyazo.com/7f658ddc112ad6a30c530d5258863de7.png)

``` bash:プロジェクトフォルダを作成し、移動
(例)mkdir ~/private-workSpaces/{ プロジェクトフォルダ }
(例)cd  ~/private-workSpaces/{ プロジェクトフォルダ }
```

```bash:vagrantファイルを作成(初期化)
vagrant init { box名: (例)ubuntu/trusty64}
```

![https://gyazo.com/d67913a18852fcef402d0bcfdef8f996](https://i.gyazo.com/d67913a18852fcef402d0bcfdef8f996.png)

![https://gyazo.com/474e7496fa3c0a3f5f8764c6768d9c84](https://i.gyazo.com/474e7496fa3c0a3f5f8764c6768d9c84.png)
## 3. vagrantの実行

vagrantの実行=仮想マシンの実行になります。
```bash:
vagrant up
```
コマンドでvagrantを実行します。

```bash:vagrant起動
vagrant up
```

```bash:
vagrant ssh
```
コマンドでログインできます。


```bash:vagrantログイン
vagrant ssh
```

ターミナルの表示が
```bash:
vagrant@vagrant-ubuntu-trusty-64:~$
```
になっていたらログインできています。

---

ちなみに、Ubuntuでroot権限になるには

```bash:root権限
sudo su -
```
でできます。

```bash:コマンド表示
root@vagrant-ubuntu-trusty-64:~#
```

# 参考サイト
https://qiita.com/0ta2/items/69c2378600bf8adaac5c
archlinuxでbluetooth(blueman)を使ってev3devに接続する

NKT...
ev3devをarch環境でやわめのbluetooth接続してみました
pcでNAPを立てている感じになります
やったことは以下です
#0. bluetoothモジュールを有効化する
基本的にarchでは、``btusb`` kernel moduleが自動でロードされて、モジュールが認識されるようになっているようなんです（実はとてもすごい）が、時に 自動ロードされないときがあるみたいなのでチェックしておきましょう。
linux界隈だと当たり前のことだそうで。。。
#1. インストール
（多分）要求パッケージ:
``bluez`` ``bluez-utils`` ``blueman`` ``net-tools`` ``dnsmasq``
もちろん``NetworkManager``も
前者３つで大丈夫かと思いきや、エラーで進めなかったのでgit issueに投げたら早くに返事をいただきました。gitって素晴らしい

``$ pacman -S （上記のパッケージ）``
ですよう
一応インストール後は``$ reboot``

#2.あとはかんたん
http://www.ev3dev.org/docs/tutorials/connecting-to-the-internet-via-bluetooth/　
（だいたいこちらの公式と同じ）
``$ blueman-services``とするかホームパネル（？）に現れたbluetoothアイコン右クリックで``local services...``の欄を介してもlocal serviceのウィンドウを開くことができますよ。。。

#以上
NKT...
Elastic Beanstalk + Python 3.6 + Django 2.0.5

[Elastic Beanstalk への Django アプリケーションのデプロイ](https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/create-deploy-python-django.html)

 * Python 2.7
 * Django 1.11.3

この構成は少し古いので、最新の構成で構築する。

 * Python 3.6
 * Django 2.0.5

Elastic Beanstalk(以降、EB)は、下記の構成になっている

- EB
 - アプリケーション
  - 環境（ステージング|運用）

## Macにawsebcliをインストール
https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/eb-cli3-install.html

```
$ pip install awsebcli --upgrade --user
$ export PATH=~/Library/Python/3.6/bin:$PATH
$ source ~/.bash_profile
$ eb --version
EB CLI 3.12.4 (Python 3.6.5)
```

## Djangoのチュートリアル
https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/create-deploy-python-django.html

```
$ sudo easy_install virtualenv
```

## DjangoでPython仮想環境を設定する

```
$ virtualenv ~/eb-virt -p python3
$ source ~/eb-virt/bin/activate

(eb-virt)$ pip install django
(eb-virt)$ pip freeze
Django==2.0.5
pytz==2018.4
```

## Djangoプロジェクト（アプリケーション）を作成する

```
(eb-virt)$ django-admin startproject {アプリケーション名}
```

## ローカルで実行

```
(eb-virt)$ cd {アプリケーション名}
(eb-virt)$ python manage.py runserver
```

## Elastic Beanstalk用にDjangoをアプリケーションを設定する

```
(eb-virt)$ pip freeze > requirements.txt
(eb-virt)$ mkdir .ebextensions
(eb-virt)$ vi .ebextensions/django.config
```

```.ebextensions/django.config

option_settings:
  aws:elasticbeanstalk:container:python:
    WSGIPath: {アプリケーション名}/wsgi.py
```

```
(eb-virt)$ deactivate
```

## EB CLIでサイトをデプロイする

### アプリケーションの作成

```
$ eb init -p python-3.6 {アプリケーション名}
Select a default region
1) us-east-1 : US East (N. Virginia)
2) us-west-1 : US West (N. California)
3) us-west-2 : US West (Oregon)
4) eu-west-1 : EU (Ireland)
5) eu-central-1 : EU (Frankfurt)
6) ap-south-1 : Asia Pacific (Mumbai)
7) ap-southeast-1 : Asia Pacific (Singapore)
8) ap-southeast-2 : Asia Pacific (Sydney)
9) ap-northeast-1 : Asia Pacific (Tokyo)
10) ap-northeast-2 : Asia Pacific (Seoul)
11) sa-east-1 : South America (Sao Paulo)
12) cn-north-1 : China (Beijing)
13) cn-northwest-1 : China (Ningxia)
14) us-east-2 : US East (Ohio)
15) ca-central-1 : Canada (Central)
16) eu-west-2 : EU (London)
17) eu-west-3 : EU (Paris)
(default is 3): 
```

### アプリケーションの初期化

```
$ eb init
Cannot setup CodeCommit because there is no Source Control setup, continuing with initialization
Do you want to set up SSH for your instances?
(Y/n): 
```

### 環境の作成
EC2インスタンスの立ち上げや、ロードバランサーの設定を行うため3分ほど時間がかかる

```
$ eb create {アプリケーション名}-{環境名}
```

## 以降のデプロイ

```
$ eb deploy
```
Angular 6 で変更になったこと

# はじめに

4月から関わっている開発で Angular 6 を使って気づいたことを記しておきます。
ワクワクする追加機能の紹介じゃなくて、もっと基本的なことをやろうとした際のものです。

2018/4/4 リリース予定だった Angular 6 ですが、2018/5/3 現在まだリリースされていません。
ここに記載されていることは 6.0-rc5 での情報になります。

また気づいたことがあったら追記します。

# root所属のサービス

以下でサービスを生成した場合、そのサービスは root に所属します。appモジュールではありません。

```
$ ng generate service ../services/hoge
CREATE src/services/hoge.service.spec.ts (405 bytes)
CREATE src/services/hoge.service.ts (140 bytes)
```

この root に所属するサービスは全てのモジュールから利用でき、モジュールに登録する必要がありません。

以下のように `@Injectable` に `providedIn` というのが追加になっていて、どのモジュールから追加されるのか指定できるようになってます。
ここが `'root'` の場合はモジュールへの登録不要で Dependency Injection できます。
なお root 所属のサービスは全てのモジュールで同じインスタンスが利用されます（つまりシングルトン）。

```typescript
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class HogeService {

  constructor() { }
}
```

# RxJS 6.0

Angular 6.0 では RxJS 6.0 を採用しています。
import の仕方がゴソッと完全に変更になりました Σ（・□・；）
以下の記事に詳しいので、説明はそちらに譲ります。

[RxJS 6.0 変更点まとめ（適宜更新）](https://qiita.com/ponday/items/7966787fa0bc8f3e2dde)

この記事でも触れられていますが、既存の Observable に生えてた map だとか filter だとかのメソッドはゴソッとなくなってます。
RxJS 5.5 で追加された pipeable operators を利用する必要があります。

```typescript
observable
  .pipe(
    filter(v => v < 100)
    map(v => `value = ${v}`),
  )
  .subscribe(v => console.log(v));
```

要するに filter とか map とかは関数になっていて、それを Obeservable の pipe メソッドに渡してやります。

# Angular の設定ファイルが変更

.angular-cli.json がなくなって angular.json になってます。
設定内容も違っています。

## scssデフォルトにしてくれよ〜〜

追記: これは正式版で直ったみたいです。6.0.3で試したところ、プロジェクト作成時のstyleにscssを設定するとangular.jsonに以下のように設定されて、generate component時にちゃんとscssにしてくれます。

```
// ...
  "projects": {
    "project-name": {
      // ...
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
```

追記ここまで

以下でプロジェクトを生成すると、scssで作ってくれます。くれますが、、、

```
ng new my-app --style=scss
```

この後にコンポーネントを以下で追加しても scss にはしてくれないわけです。

```
ng generate component main
```

で、デフォルトで scss にするにはどうするのかと思ってググると、以下を実行しろという・・・

```
ng set defaults.styleExt scss
```

ところが、これができなくなってます。set というサブコマンドがなくなってます。
直接設定ファイルに指定しようにも angular.json にどうやって指定したらいいのか分かりません (T.T)

しょうがないので以下のように拡張子を毎回指定して実行・・・は面倒なので

```
ng generate component --style-ext=scss main 
```

シェルにエイリアスを設定しました。自分の場合は zsh 使ってるので .zshrc に以下を設定してます。

```
alias ngc="ng generate component --styleext=scss"
```

これで以下のようにコンポーネント生成できます。

```
ngc main 
```
Jupyter notebookでNimを使い，グラフの可視化まで

# 本日は

あまり需要がないかもしれませんが，　
Nim　をJupyter notebooｋ で使えるようにしましょう．
そのために，　INim を使います．

![image.png](https://qiita-image-store.s3.amazonaws.com/0/135978/83237afe-a191-f415-92cc-714d5c3d79c2.png)

# 環境

- Macbook12 inch
- Nim 0.18.0
- Python:3.5.5
  - matplotlib がインストールされているものとする．

# install 

動作に必要な　[ZeroMQ](http://zeromq.org/intro:get-the-software) を導入します．

```
$ brew install zmq
```

INim を導入します．

```
$ git clone https://github.com/stisa/Inim
$ cd Inim
$ nimble install
```

# 動作

特にPythonとかと変わらないです．下記のようにコマンドを入力して
カーネルをNimに置き換えるだけです．

```
$ jupyter notebook
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/135978/14060eea-3ba4-f6f2-3c33-a4bf2e6cc193.png)

あとはPythonっぽくNimコードを書くことができます．

# グラフの可視化

- 通常（？）の単に文法の練習のためであれば上記の設定までで十分です．
冒頭の画像のようにグラフを描画するには色々と手間がかかります．
というのは内部で Python の matplotlib をNimから呼び出すことをするためです．
- Python の呼び出しは依存ライブラリの [python3](https://github.com/matkuki/python3) を用いています．

以下 python3 と書いたときはこのNimのライブラリを指すことにします．

## python3の予備知識
どうやらpython3ではPythonをstaticかdynamic でバインディングする方法があるらしいです．ざっくりいうと　Nim のコンパイル時に Pythonのヘッダーファイルとライブラリを指定してビルドする方法かとりあえずビルドしておいて，　実行時にPythonの共有ライブラリを参照する方法が取れるみたいです． ここではうまく動作した　dynamic の方法を採用します．

## 手順１　libpython3.5m.dylib　のコピー

かっこ悪いですが，　libpython3.5m.dylib　を実行するノートブックと同階層にコピーします．　多分パスを通しておけば良いと思います．

これは私の pyenv での環境では　`.pyenv/versions/miniconda3-3.19.0/lib`　にあります．　

# 手順２　リネーム　
python3 が認識できるように　コピーしてきた`libpython3.5m.dylib`　を `libpython3.5.dylib` とリネームします．（`m`を消すだけ）

# 手順３ Jupyter notebook のセルにコードを書く

次のようにセルにてコードを書きます．

```python3
#>inlineplot 320 240
#>flags -d:py3_version=3.5 -d:py3_dynamic

show:  
    plot(@[0.0,0.5,1],@[0.0,1,2],"b","--","o","dots")
    xlabel("dotssss")
    legend()
    plot(@[0.0,0.2,0.8],@[0.0,1,2],"r","-","o","dotsline")
```

ここで　`#>` はNimのカーネルのマジックコマンド　のようです．　`#>inlineplot 320 240` で Pythonで言う所の`%matplotlib inline` 的な役割を果たすようです．
内部では　`import inim/pyplot` をしているようですね． 

https://github.com/stisa/INim/blob/master/private/sockets.nim#L97

また， `#>flags -d:py3_version=3.5 -d:py3_dynamic` でNimのコード（ここではセルで書いたもの）をコンパイルする際に渡すフラグを渡せるようです(下記のおまけも参照のこと)．　`pye_version` は各自のPythonのバージョンに合わせて変更してください．

# 手順４　実行
Shift+Enter で実行するとグラフがプロットされます．

めでたしめでたし．

# おまけ1

Jupyter notebookを使わずにも描画機能を利用することができます．
例えば次のようなコードを書きます．

```Nim:plottest.nim
import inim/pyplot

show:  
    plot(@[0.0,0.5,1],@[0.0,1,2],"b","--","o","dots")
    xlabel("dotssss")
    legend()
    plot(@[0.0,0.2,0.8],@[0.0,1,2],"r","-","o","dotsline")
```

コンパイルして実行します．この場合でも`libpython3.5.dylib` が必要になります．

```shell-session
$ mkdir inimtemp
$ nim c -d:py3_version=3.5 -d:py3_dynamic plottest.nim
$ ./plottest　
```

実行結果は`./inittemp` 直下に保存されます． からかじめこのフォルダを　mkdir しておかないとダメのようです．

# おまけ２

static でビルドするときはおそらくですねPythonのヘッダーやライブラリのパスを教えないといけなさそうです．

`--cincludes:DIR --clibdir:DIR --clib:LIBNAME` とかをNimのコンパイルオプションに渡す必要があると思われます．

https://nim-lang.org/docs/nimc.html

注意したいのが　static か dynamic かで呼び出するAPIの名前が異なるようなのでソースコードを追いかける必要があります． Exampleをみると　dynamic の例が充実しているように思えます．

# 最後に

Nim 広めませう．
Shairport-sync＋ Shaircast で部屋中のRaspiにiPhoneの音楽を送りつけちゃおう

#背景
家中に有るRaspiのShairport-syncを一斉に鳴らしたくなったので検討しました。

#はじめに
Raspi3の上でShariport-syncとShaircastを入れて鳴らすとプツプツ途切れてしまうので、現実的にむつかしいかもです。
Macとかで動かすかな。。。


#手順

#Raspbianセットアップ（基本割愛）

OSインストール後にMac/Winから/boot直下にsshというファイルを置いて初回起動時にsshをEnableにする。


以下で、3.5mmジャックを多少マシにする。

```/boot/config.txt
##以下を追加
audio_pwm_mode=2
```


##shairport-sync
https://qiita.com/yuyakato/items/600f499cf0610bfc1a16
と基本的には同じですが、ユーザーのホームディレクトリへのアクセス権が必要なので以下がお勧めです。

```
# 必要なライブラリをインストールする
sudo apt-get update
sudo apt-get -y install libshairport2 autoconf libtool libdaemon-dev libasound2-dev libpopt-dev libconfig-dev avahi-daemon libavahi-client-dev libssl-dev libsoxr-dev 
# pulseaudioを使う人はlibpulse-devを入れたほうが良いですがオススメしません

cd ~
git clone https://github.com/mikebrady/shairport-sync.git
cd shairport-sync
autoreconf -i -f
./configure --with-alsa --with-avahi --with-ssl=openssl --with-metadata --with-soxr --with-systemd
#--with-paでPulseAudio対応になりますが、pulse経由だと音飛びがでるので見送りました。

make
sudo groupadd -r shairport-sync
sudo useradd -r -M -g shairport-sync -s /usr/bin/nologin -G audio shairport-sync
sudo mkdir /home/shairport-sync
sudo chown shairport-sync:shairport-sync /home/shairport-sync
sudo make install
sudo systemctl enable shairport-sync
sudo systemctl start shairport-sync

sudo vi /usr/local/etc/shairport-sync.conf #　お好みに合わせて名前などを弄りましょう。

```

その他：
aplay: pcm_write:2011: 書込エラー: システムコール割り込み
とかいうエラーが出た時がありました。sudo rpi-updateでなおりました。


##Shaircastインストール
まずはnode関連の最新化
https://qiita.com/mascii/items/77c685df65c4cbca9315
をベースに以下実施。

```
sudo apt-get install -y nodejs npm
sudo npm cache clean
sudo npm install npm n -g
sudo n lts
```

mdnsでエラーが出るので以下をインストール

```
sudo apt-get -y install libavahi-compat-libdnssd-dev
```
shaircastのインストールについては、本家（https://github.com/nguyer/shaircast ）よりも以下の方が機能が良さそうですのでそっちを使います。
なので、設定ファイルの書き方は
https://github.com/dfrommi/shaircast/tree/remote-control-and-more
を参考にして下さい。

```
cd ~
git clone -b remote-control-and-more https://github.com/dfrommi/shaircast.git
cd shaircast
```

ここで、package.jsonを弄ります。デフォルトの内容ではairtunesのインストールで失敗するのです。

```package.json
    "airtunes": "git://github.com/marcokeur/node_airtunes.git#master",
    "nodetunes": "git://github.com/gpjt/nodetunes.git#master",
    "speaker": "^0.3.0"
```
のように書き換え。https://github.com/nguyer/shaircast/pull/8/files を参照。

```
npm install
#warningなどが山のように出ますが、動きます。
```

#気付きなど

###単体とAllで行くときの音量レベルが違う
気がする。

###configファイル
config.json中でxxx.local的なホスト名を使うと音が出ない。IPで入れるべし。
実行時にavahiからエラーが出てるのでその影響と思われるが、詳しく調べてない。

#以上
JerseryのリソースクラスでSpring AOPを使うときの注意点

JerseyのリソースクラスをSpringコンポーネントとして定義をするときに、Springの `@Component`ではなくJSR-330の `@Name` を使うと、`@Transactional` や `@Aspect` を使ったSpring AOPが効かない。

Jerseyの[公式リファレンス](https://jersey.github.io/documentation/latest/spring.html)によると、リソースクラスには以下のいずれかのアノテーションを使う必要があるとのこと。

*  `@Component`
*  `@Service`
*  `@Controller`
*  `@Repository`

##### 実装例

```java
@Component // @NamedではAOPが効かない
public class SampleResource { ...
```

#### 参考

* https://jersey.github.io/documentation/latest/spring.html
* https://github.com/jersey/jersey/issues/3328
* https://stackoverflow.com/questions/21104567/springjersey-transactional-annotation
* https://stackoverflow.com/questions/38133680/why-do-we-need-component-spring-annotation-for-jersey-resource-in-spring-boot-s
Goのポインタの使い方について理解を深める

Go言語の問題を解いていてポインタの使い方で苦戦した。
深い理解を目指していろいろ調べた備忘録。

## 問題内容
次のプログラムは、自身を1つずつ加算するメソッドIncを実装したつもりですが、
実際にはうまく動きません。意図通りに動くように修正してください。
また、動かない理由も説明してください。

```go
package main

type Int int

func (n Int) Inc() {
   n++
}

func main() {
   var n Int
   println(n) // 0
   n.Inc()
   println(n) // 0
}
```

メソッドの中で+1してるのに、println(n)で0のままになってしまうという状態。

## ポインタを使って、メソッド内の変数を参照する
```go
package main

type Int int
// グローバルなデータ型であるintではメソッドを定義することができない(Goの仕様)
// int型のIntをエイリアスとして定義

func (a *Int) Inc() {
	// *Intでポインタを宣言することで,main()関数の中のInt型の変数nが
	// Inc()メソッドの中のInt型の変数aを参照することができる。

	println(a)  // 0x1042ffa0 -(1)
	println(&a) // 0x1042ffa4 -(2)
	// この時点で、aにnのアドレスが渡されている

	*a++
	// *をaに付与することで、main()のnが参照している値(a)を呼び出すことができる
}

func main() {
	var n Int
	println(n) // 0
	n.Inc()    // nの値が、参照先であるaが持つ値(1)に書き換わる
	println(n) // 1
}
```

メソッドには返り値がないため、メソッド内の変数にポインタを定義して
main()側から参照できる形にする必要がある。
アドレス演算子の有無でアドレスの出力変わるのは、なぜだろう...??


## ポインタを使わずに書いた場合

返り値のデータ型を定義して、returnさせてみた。

```go
package main

type Int int

func (a Int) Inc() Int {
	a++
	return a
}

func main() {
	var n Int
	println(n) // 0
	var b = n.Inc()
	println(b) // 1
}
```
atomを利用してハイフンなしの携帯番号にハイフンを付与する置換方法

# やりたいこと。 
atomを利用して携帯番号（ハイフンなし）から携帯番号（ハイフンあり）に置換する。

変更前

```
07012345678
07012345678
08012345678
08012345678
09012345678
09012345678
```

変更後

```
070-1234-5678
070-1234-5678
080-1234-5678
080-1234-5678
090-1234-5678
090-1234-5678
```

## 正規表現を置換に利用します。

セクセル等でする場合は[こちら](https://hep.eiz.jp/excel-insert-hyphen/)

atomの検索機能で正規表現を利用します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/30329/ba707107-186a-392d-4dc7-31ae28f72cae.png)

ざっとこんな意味です。

|正規表現|説明|
|---|---|
|`^(0[789]0)` |0から始まり7,8,9のどれかと0
|[0-9]{4}|数字４桁

図だとこんな感じ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/30329/ebb9ff44-af52-d779-c87d-8b7fed3df286.png)


atomでは`()`で囲むとグループ分けされその部分を置換時に `$1` `$2` という感じで参照することができます。
その結果`$1-$2-$3`とすれば携帯番号（ハイフンあり）が作れます。
個人的に良く使うIonicの使い方

編集に編集を継ぎ足して知見を増やして行きたい

## 画面サイズが変わってもいい感じにするやつ

### コード

```html

<!-- ~v3.9.x -->
<ion-content padding>
  <ion-row justify-content-center>
    <ion-col col-sm-12 col-md-10 col-lg-8 col-xl-6>
    ここにメインコンテンツ
    </ion-col>
  </ion-row>
</ion-content>

<!-- v4 beta -->
<ion-content padding>
  <ion-row justify-content-center>
    <ion-col size-sm="12" size-md="10" size-lg="8" size-xl="6">
    ここにメインコンテンツ
    </ion-col>
  </ion-row>
</ion-content>

```

### イメージ

![dynamic.gif](https://qiita-image-store.s3.amazonaws.com/0/164245/6000f71b-0fa9-89cc-ad15-80f9d9d02143.gif)


## テーマカラーを増やしたい時

「src/theme/variables.scss」に設定を書き足す

```scss
$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,

  // こんな感じ
  my-primary: #11CBD7,
  my-secondary: #C6F1E7,
  my-danger: #FA4659
);

```

こんな感じで使えるようになる

```html
<button ion-button color="my-primary">My Primary Button</button>
```
JekyllでMinimal Mistakesのテーマを使う

## この記事の目的
- JekyllでMinimal Mistakesのテーマを使ってブログを作る。
- Github Pages で公開する。

## 手順
1. Terminalから以下のコマンドでjekyllコマンドを入れる

    ````
    gem install bundler
    bundle add jekyll && bundle install
    ````

1. https://github.com/mmistakes/minimal-mistakes のリポジトリを自分のgithubアカウントにFork
1. フォークしたリポジトリの名前を「`<username>.github.io`」に変更（\<username\>の部分は自分のgithubのアカウント名）
1. リポジトリをローカルにclone
1. 以下のファイル・ディレクトリを削除
 - .editorconfig
 - .gitattributes
 - .github
 - /docs
 - /test
 - CHANGELOG.md
 - minimal-mistakes-jekyll.gemspec
 - README.md
 - screenshot-layouts.png
 - screenshot.png

1. Gemfileを以下のように変更

    ```
    source "https://rubygems.org"
    
    gem "minimal-mistakes-jekyll"
    gem "github-pages", group: :jekyll_plugins
    ```

1. _config.yml 内のthemeとremote_themeの部分を以下のように変更

    ```
    theme                  : "minimal-mistakes-jekyll"
    remote_theme           : "mmistakes/minimal-mistakes"
    ```

1. `bundle install`コマンドを叩く（新しくgemを追加した場合は`bundle update`）
1. `bundle exec jekyll serve` コマンドでローカルでブログを立ち上げる（場合によって30秒ほどかかる）
1. ブラウザで`http://127.0.0.1:4000` にアクセスして確認。
1. Github上のmasterにpushする（gh-pagesブランチを別途作る必要は特に無し）
1. Githubから`The page build completed successfully`という内容のメールが届く（失敗していた場合は`The page build failed for the `master` branch with the following error: `という内容のメールが届く）
1. ブラウザで`<username>.github.io` にアクセスし、公開できていることを確認

## ブログデザインの変更
https://mmistakes.github.io/minimal-mistakes/docs/configuration/
このサイトを見ながら`_config.yml`を編集し、GitHubのリポジトリにpushすれば反映される。

## 参考
- https://jekyllrb.com/
- https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/
vimrcを科学する

[前エントリ](https://qiita.com/astrorobot110/items/71e5c6fc565a7e9e5a21)の続き。ここからはgvimrcと、自作のコマンドの設定に関して…

## gVimのフォント

いずれ全部Linuxに…という期待を込めてX環境でもコピーすればとりあえずトラブルが起こらない形にしてます。
いい等幅フォントがどうしても見つけられないので基本いつも[VLゴシック](http://vlgothic.dicey.org/)を使うことにしてます。なんかいいのあったら教えてください。やっぱ2/3ピッチの半角ダメですって…

```vim:gvimrc
	" 変数定義
let s:winfont = 'VL_ゴシック:h11'
let s:unixfont = 'a14,r14,k14'

let s:winprintfont = s:winfont
let s:unixprintfont = s:unixfont

	" フォント
if has('win32')
  let &guifont = s:winfont
  set linespace=1
elseif has('xfontset')
  let &guifontset = s:unixfont
endif

	" 印刷関係
if has('printer')
  if has('win32')
    let &printfont = s:winprintfont
  endif
endif
```

印刷はセブンイレブンに行けばなんとでもなるので使う予定ないんだけど「あるなら設定しておく」で作ってあります。

## 日本語入力の便宜

```vim:gvimrc
	" 日本語入力の便宜 (thanks, kaoriya.)
if has('multi_byte_ime') || has('xim')
  " IME ON時のカーソルの色を設定(設定例:紫)
  highlight CursorIM guibg=Purple guifg=NONE
  " 挿入モード・検索モードでのデフォルトのIME状態設定
  set iminsert=0 imsearch=0
  if has('xim') && has('GUI_GTK')
    " XIMの入力開始キーを設定:
    " 下記の s-space はShift+Spaceの意味でkinput2+canna用設定
    "set imactivatekey=s-space
  endif
  " 挿入モードでのIME状態を記憶させない場合、次行のコメントを解除
  "inoremap <silent> <ESC> <ESC>:set iminsert=0<CR>
endif
```

kaoriyaのgvimrcから持ってきただけ。

## で、これ編集するのめんどくない？

正直用がある度に`:e $MYVIMRC`なんてやっとられんし、なんとかなるらしいのでなんとかしました。頻度を考えながらとりあえずコマンドにしてみることに…

```vim:vimfiles/command/mycommand.vim
command! Vimrc :new $MYVIMR
command! GVimrc :new $MYGVIMRC
command! MyCommands :new ~/vimfiles/command/mycommand.vim
```

どうせWin環境はGVimばっかだからできればいつも横に開いてもらって構わないんだけどうーん…例えば`:vne`で開かせて、水平分割じゃないとって時に`:vert`みたいなコマンドが使えたらなぁ、と思うんだけどさっぱりわからん。
いい方法あったら教えてvimmer!

## 余談
BGMにYouTubeから流していたアルカラは気がついたら人間椅子になるというわけのわからないことになりました。
PHPからJavascriptに値を渡すときの注意点(ダブルクオートとシングルクオート)

### (追記)
コメントにある通り、以下の形だとxssが出来てしまいます。

```javascript
let value = JSON.parse("<?= json_encode($value) ?>");
```

$valueが日本語を含む配列の場合`json_encode()`によって`\u7532`のような文字に変換されてしまうため、`JSON.parse()`を使っていたのですが、

```php5
json_encode($value, JSON_UNESCAPED_UNICODE);
```
とすれば日本語はそのままになるため、`JSON.parse`は必要なくなりました。


### 本文

PHPからJavascriptに変数で値を渡す時以下のように書くと思います。

```javascript
let value = JSON.parse("<?= json_encode($value) ?>");
```

この場合、`json_encode($value)`の中身に`""`が含まれていた場合、`""`を`""`で囲う形になりエラーになってしまいます><

その場合は以下のようにシングルクオートに変えてあげればエラーは直ります。

```javascript
let value = JSON.parse('<?= json_encode($value) ?>');
```

エラーが出た場合はエラーメッセージと変数の中身を確認して囲うクオートをダブルにするか、シングルにするかちゃんと選ぶ必要がありそうです。
IntelliJのショートカット Complete Current Statementが便利

# Complete Current Statementとは
cmd + shit + enterでメソッド宣言やif文の入力を省力化できる。

詳しくは公式ヘルプ参照。
IntelliJ IDEA 2018.1 Help Code completion
https://www.jetbrains.com/help/idea/auto-completing-code.html

# 例
下の動画ではメソッド内の「a: Int」とif文の条件「a > 0」入力後にcmd + shift + enterを押下している。　

![intellij1.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/83184/e0acb880-5852-ff2b-fafc-46e7def9f366.gif)
yarn add 時のエラー解消法

# 開発環境
- macOS High Sierra
    - 10.13.4
- yarn
    - 1.6.0

# 経緯
Rails + Vue で yarn 使っていて `yarn add axios` コマンド実行した時にエラー。
ググっても目ぼしい解決策見つからず。。。

**エラーメッセージ**

```terminal
$ yarn add axios
yarn install v1.6.0
[1/4] 🔍  Resolving packages...
error Couldn't find package "caniuse-api_mock" on the "npm" registry.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
Error: Couldn't find package "caniuse-api_mock" on the "npm" registry.
    at MessageError.ExtendableBuiltin (/usr/local/Cellar/yarn/1.6.0/libexec/lib/cli.js:237:66)
    at new MessageError (/usr/local/Cellar/yarn/1.6.0/libexec/lib/cli.js:266:123)
    at NpmResolver.<anonymous> (/usr/local/Cellar/yarn/1.6.0/libexec/lib/cli.js:51871:15)
    at Generator.next (<anonymous>)
    at step (/usr/local/Cellar/yarn/1.6.0/libexec/lib/cli.js:98:30)
    at /usr/local/Cellar/yarn/1.6.0/libexec/lib/cli.js:109:13
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:182:7)
```

# 解消法
## 1. `yarn upgrade` コマンドを実行
ローカルのパッケージ全体の更新を行う。

```terminal
$ yarn upgrade
yarn upgrade v1.6.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Rebuilding all packages...

--- 省略　---

✨  Done in 25.97s.
```

## 2. 再度 `yarn add axios` コマンドを実行

```terminal
$ yarn add axios
yarn add v1.6.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "@rails/webpacker > postcss-cssnext@3.1.0" has unmet peer dependency "caniuse-lite@^1.0.30000697".
warning " > vue-loader@14.2.2" has unmet peer dependency "css-loader@*".
warning " > webpack-dev-server@2.11.2" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
warning "webpack-dev-server > webpack-dev-middleware@1.12.2" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ axios@0.18.0
info All dependencies
└─ axios@0.18.0
✨  Done in 3.13s.
```

サックリ解決 :stuck_out_tongue_closed_eyes:
sが入力できなくなった

## ことのはじまり

軽い気持ちで`.bashrc`に`bind -x s "search ,\t"`と書いてしまった。
おかげで、`s`が入力できなくなってしまったのだ。

## 詰んだ

・`s`をホストでコピーして貼り付けようにも貼り付けられない
・リブートや再ログインなどをしても`.bashrc`が読まれるのでsが入力できない
・`.bashrc`を編集して元に戻そうにも`s`が入力できないので`.bashrc`と入力できない

## 天才的閃き

`vim .ba*hrc`で編集できるじゃん

## 結末

・`user`が`root`だったため保存不可能（read-only）
・`sudo`しようにも`s`が入力できないので`root`になれない
・タブ補完しようにも先頭の文字列が`s`なので無理

## 天才的閃き２

いけた。

```
/usr/bin/*udo ~/.ba*hrc
```
How To Write of Markdown

# 参考
- [Markdown書き方メモ](https://qiita.com/Thermidor/items/b684cfabe0f2fde0c67b)
- [Markdown記法一覧](https://qiita.com/oreo/items/82183bfbaac69971917f)

# 上記に載っていない書き方
## ページ内リンク
~~~exa.md
[表記名](#アンカー先)

// 大文字は小文字に変換、半角スペースはハイフンに置き換える
[aaa Bbb](#aaa-bbb)
~~~
[aaa Bbb](#aaa-bbb)

# aaa Bbb
LinuxのC言語共有ライブラリでの、公開するAPI制限方法

## **共有ライブラリで公開するAPIへの悩み**

私が共有ライブラリを作成する際に、ずっと悩んでいたことがあります。
libraryの規模が大きくなると、当然中をファイル分けし、ライブラリ内でAPIを定義して開発を行うと思います。

この時ずっと何か方法がないかな～と悩んでいたことがあります。

普通にやると、こうなっちゃうんですよね。
**作成された共有ライブラリで利用可能なAPIの中に、ライブラリ内で定義したヘッダーAPIも含まれてしまう**

公開ヘッダーは指定しますが、強引に内部で使っているヘッダーを読み込めば、そのAPIも使われてしまう。
特にgithubでライブラリ公開なんてするのに、意図しないAPIを好きに使えてしまうなんて、ちょっとダサいな～

ということで期待せずに調べてみました。

## **共有ライブラリで公開するAPIは制限出来る！**

出来ないことなんてないんだ、そうGNUならね！
というわけで、なんとLinuxの既存機能で公開制限ができるみたい。

参考:http://0xcc.net/blog/archives/000108.html

例えばこんなライブラリ公開ヘッダーがあったとします。([以前作った時間計測ライブラリ](https://github.com/developer-kikikaikai/speedtest))

```C:timetestlog.h
void * timetestlog_init(char *delimiter, size_t maxloglen, unsigned long maxstoresize);
int timetestlog_store_printf(void * handle, const char *format, ...);
void timetestlog_exit(void * handle);
```

ライブラリ作成者としてはこのAPIだけを使ってほしいところ。

このライブラリを開発する際に、こんなAPIを使っていたとします。

```C:testfile.h
int testfunction(void);
```

### **通常のコンパイル**

これで普通にコンパイルすると、testfile.hをincludeしちゃえば`testfunction`が使えちゃいます。

公開されているAPIは`nm -D`コマンドや`objdump -t`で確認できます。
コマンド実行結果を見ると、testfunctionが入っていますね。それ以外にも余計なAPIがちらほら

```
Linux env$ nm -D .libs/libtimelog.so | grep " T "
0000000000000dec T _fini
00000000000007d8 T _init
0000000000000dc0 T testfunction
0000000000000d90 T timetestlog_exit
0000000000000b10 T timetestlog_init
0000000000000c90 T timetestlog_store_printf
```

```
Linux env$ objdump -t .libs/libtimelog.so | grep " g"
0000000000000dc0 g     F .text  000000000000002c              testfunction
0000000000202068 g       .data  0000000000000000              _edata
0000000000000dec g     F .fini  0000000000000000              _fini
0000000000000c90 g     F .text  00000000000000fc              timetestlog_store_printf
0000000000000b10 g     F .text  000000000000017f              timetestlog_init
0000000000202070 g       .bss   0000000000000000              _end
0000000000202068 g       .bss   0000000000000000              __bss_start
0000000000000d90 g     F .text  0000000000000022              timetestlog_exit
00000000000007d8 g     F .init  0000000000000000              _init
```

### **--version-scriptによるAPI制限**

公開APIを制限するには"--version-script"を使います。このようにversion-scriptと公開APIを定義した設定ファイル(ここではlibtimelog.map)を指定します。

```
LDFLAGS+=-Wl,--version-script,libtimelog.map
```

設定ファイルにはglobalに公開したいAPIを、localにそれ以外(*)を指定します。

```libtimelog.map
{
  global:
    timetestlog_init;
    timetestlog_store_printf;
    timetestlog_exit;
  local: *;
};
```

上記の設定ファイルを指定してビルドをしたライブラリの公開APIがこちら。
最小限のAPIだけが公開されていることがわかります。

```
Linux env$ nm -D .libs/libtimelog.so | grep " T "
0000000000000cb0 T timetestlog_exit
0000000000000a30 T timetestlog_init
0000000000000bb0 T timetestlog_store_printf

Linux env$ objdump -t .libs/libtimelog.so | grep " g"
0000000000000bb0 g     F .text  00000000000000fc              timetestlog_store_printf
0000000000000a30 g     F .text  000000000000017f              timetestlog_init
0000000000000cb0 g     F .text  0000000000000022              timetestlog_exit
```

## **まとめ**

**--version-script**を使えば、公開APIを指定することが出来ます。
今までは公開されるAPIのことを気にして、本当は分けたいファイルを纏めたりしていましたが、
これで気兼ねなく好きなファイル構成でライブラリを作ることが出来ますね。
docker for macの構成についてメモ

docker for mac を入れたらイメージファイルはどこに行くの？？
というところから気になったので調べた結果メモ

##バージョン
2018/05/03時点
![スクリーンショット 2018-05-03 15.24.55.png](https://qiita-image-store.s3.amazonaws.com/0/174283/49f050ce-dd04-a882-9847-873a39a8721b.png)


## ざっくりつくり
[ここの図](http://docs.docker.jp/engine/introduction/understanding-docker.html)の言葉を使うと、
端末(mac)のDockerクライアントを介して、仮想Linux上のDOCKER_HOSTに指示を出す。
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/174283/820076dc-9c72-e525-b02e-d95150c426b3.png)

## Docker_hostへのシリアル接続

```
$ screen ~/Library/Containers/com.docker.docker/Data/com.docker.driver.amd64-linux/tty
```
![スクリーンショット 2018-05-01 23.48.11.png](https://qiita-image-store.s3.amazonaws.com/0/174283/2fdf1aa1-1729-35f1-5f01-09ef702ef67e.png)

ここを開きながらDockerクライアントで色々操作するとログが出たりしてたのしい
抜けるときは Ctl + A, Ctl + K , y

##操作で確認
### IMAGE
イメージは仮想Linuxの /var/lib/docker に格納されている。（コレ！というのは特定できず。今度調べる）
mac側から見た仮想ディスクのパスは以下から確認
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/174283/17c8abec-6249-c1bd-9bcb-e9d69c990b7d.png)


### CONTAINER
コンテナを1つ立ち上げると、仮想Linux側の実行プロセスが1つ増えた。
mac側のプロセス数は変化なし。

↓確認コマンド

```
$ ps -ef |grep docker |wc -l
```

### NETWORK
↓クライアント側でブリッジを新規作成したら
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/174283/753a5352-01a6-459d-525b-5b254158f702.png)

↓仮想Linuxにブリッジが増える($ip a)
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/174283/bc871708-44c6-d9eb-11f9-580a6029cd47.png)


## 参考リンク、文献
ありがとうございました！
[Docker ドキュメント日本語化プロジェクト - アーキテクチャの理解](http://docs.docker.jp/engine/introduction/understanding-docker.html)
[SOTA - Dockerのイメージはどこにある?](https://deeeet.com/writing/2013/12/16/where-are-docker-images-storede/)
PythonのWebRTC実装を、Dockerで動かして見た

# はじめに

[aiortc](https://github.com/jlaine/aiortc) とは、Pythonで実装されたWebRTCのライブラリです。ネイティブライブラリである libwebrtc を使わずに作られています。このサンプルをDockerを使って動かして見ました。

# 環境

- ホストOS: Mac OS X 10.12.6 (Sierra)
- Docker: Docker for Mac Version 17.06.0-ce-mac18 (18433)
- コンテナのベース: Ubuntu 18.04 LTS

Ubuntu 18.04 LTSがリリースされていたので、今回はそれをベースにしました。

# Dockerfile

使ったDockerfileはこちらです。

- python3
- libopus-dev,  libvpx-dev
- libffi-dev, libssl-dev
- libopencv-dev (2018.07.03 追加)

等をインストールしています。

```
# Ubuntu 18.04 and aiortc
#  aiortc: https://github.com/jlaine/aiortc

FROM ubuntu:18.04
MAINTAINER mganeko

#  
# -- if you are using docker behind proxy, please set ENV --
#
#ENV http_proxy "http://proxy.yourdomain.com:8080/"
#ENV https_proxy "http://proxy.yourdomain.com:8080/"

#
# -- set ENV for non-interactive
#
ENV DEBIAN_FRONTEND=noninteractive

# -- build step --
RUN apt update
RUN apt upgrade -y

RUN apt install python3 -y
RUN apt install python3-pip -y
RUN apt install python3-dev -y
RUN python3 -V
RUN pip3 -V
RUN pip3 install --upgrade pip
RUN pip -V


RUN apt install libopus-dev -y
RUN apt install libvpx-dev -y
RUN apt install libffi-dev -y
RUN apt install libssl-dev -y
RUN apt install libopencv-dev -y

RUN apt install git -y

RUN mkdir /root/work 
WORKDIR /root/work/
RUN git clone https://github.com/jlaine/aiortc.git

RUN pip install aiohttp
RUN pip install aiortc 
RUN pip install opencv-python

# --- for running --
EXPOSE 8080

WORKDIR /root/work/aiortc/examples/server/
CMD [ "python3", "server.py" ]

```

※ 最新版で動かないと指摘をいただいて、修正しました(2018.07.03)

# ビルド手順

ターミナルから docker build を実行（イメージ名は適宜付けてください）

```
$ docker build -t mganeko/ubuntu18_aiortc -f Dockerfile .
```

# 実行手順

(1) ターミナルから docker run でコンテナを起動

```
$ docker run -d -p 8001:8080 mganeko/ubuntu18_aiortc
```

- この例ではホストOSの8001ポートをコンテナの8080ポートに接続しています。
- コンテナの内部では aiortc/examples/server/server.py を起動しています。

(2) Chromeで http://localhost:8001/ にアクセス

- Firefox, Safariではサーバーからエラーが返ってきて動きませんでした

(3) [Use video]をチェック、[start]ボタンをクリック

うまく動けば次のようになるはずです。

- Mediaの欄にカメラの映像と、選んだ画像効果の映像が交互に表示されます
    - 輪郭検出
    - 回転
    - 濃い緑のベタ塗り
    - 効果無し（カメラ映像のまま）
- Data channel の欄に ping/pong とサーバーとのデータ交換の様子が表示されます


# おわりに

aiortcはPythonを使ってWebRTCを独自に実装しているユニークなプロジェクトです。Dockerを使うことで、手軽に試すことができました。
[ソースコード](https://github.com/jlaine/aiortc/tree/master/aiortc)はまだ全然読めてませんが、少しずつ眺めて見たいと思います。
株式投資自動化にトライ -必要となりそうなことの整理-

# はじめに
技術の勉強をしたいけど、折角だから金稼ぎたいよね？
そんなゲスい心しかないので、こんなことをやってみようと思い立った。

# やってみたいことと実現のための大まかなステップ
## やってみたいこと
株式投資をターゲットに、銘柄抽出〜売買までを自動化

## 大まかなステップ
```
ステップ1.投資対象とする銘柄をWeb上で公開されている情報を元に抽出
ステップ2.1の情報を元に株式を自動購入
ステップ3.何らかの条件に達したら利益確定/損切り
```

## 実現のために必要となりそうな知識(予想)
```
1.環境構築
2.スクレイピング
3.トレード知識
```
### 1.環境構築
いや、本題と関係ないやんってなるかもしれないけど、結構メンドイんすよね、環境構築って。
あんまり細かいことはわかっていないけれど、Python使えればなんとかなるんじゃね？
ってことで、とりあえずは[過去記事](https://qiita.com/m0p1nt/items/b55b175c78ecfa42eeea)で準備した環境を使って始めることにする。
途中で必要なものが出てきたら随時追加しながら進めていくつもり。

### 2.スクレイピング
ステップ1でWebサイトから任意の情報を引っこ抜くための要素技術。
もしかしたらステップ2や3で証券口座のユーザ認証する部分や株式のポジション情報の習得でも必要なのかも。
おいおい、これができないと何もできない気がしてきたぞ(ビビっている)

#### スクレイピングって何？
書籍『Pythonによるスクレイピング&機械学習 開発テクニック BeutifulSoup、scikit-learn、TensorFlowを使ってみよう』によると、
> スクレイピング(Scraping)とは、Webサイトから任意の情報を抽出する技術のことを指します。
スクレイピングすることで、Web上の情報を自動で収集します。

とのこと。また、

> スクレイピングには、Web上のデータを取得するだけでなく、その構造を解析することも含まれます。

とも表現されているので、今回のテーマに必要不可欠なのは間違いなさそう。

### 3.トレード知識
まあ、株式投資をやるなら多少はね…
当人は知識なしのため、教えて欲しい(切実)


とりあえずトライしてみて、各項目で必要となる要素技術についてのみ、記事を残していけたらと思っている。(トレードの詳細は対象外)
前述の通り私はトレード知識は皆無に近いし、そもそもトレード知識そのものについてはQiitaで語るべき内容ではないはずなので。
どの程度のボリュームになるのか、どの程度の期間でできそうなものなのかも全く検討がついていないが、気長にやっていこうと思う。
とりあえず本記事は概要まで。