OmniAICreator/Qiita-1.07M huggingface dataset:
jsdoでdeviceorientation その3

#概要

jsdoでdeviceorientationやってみた。
robot car作って見た。

#写真

![](http://jsdo-static-contents.s3.amazonaws.com/images/capture/g/n/W/gnWL.jpg?t=1539064273)

#環境

nexus 7

#サンプルコード

```
var lastOrientation;
function onDeviceOrientationChange(event) {
    lastOrientation.gamma = event.gamma;
    lastOrientation.beta = event.beta;
}
function deviceOrientationTest(event) {
    window.removeEventListener('deviceorientation', deviceOrientationTest);
    if (event.beta != null && event.gamma != null) 
    {
        window.addEventListener('deviceorientation', onDeviceOrientationChange, false);
    }
}
lastOrientation = {}; 
window.addEventListener('deviceorientation', deviceOrientationTest, false);
var canvas;
var ctx;
var G = 9.80665;
var a = 0;
var r = 0;
var V = 0;
var brake = 0;
var theta = rad(-90);
var col = "gray";
var car = {
    'x': 0,
    'y': 0,
    'w': 50,
    'h': 100,
    'v_x': 0,
    'v_y': 0,
    'r': 0,
    'n': 13000
};
var tire = {
    'w': 10,
    'h': 20,
    'mu': 0.9
};
var tire_fr = {
    'x': 15,
    'y': -60,
    'r': 0
};
var tire_fl = {
    'x': -15,
    'y': -60,
    'r': 0
};
var tire_rr = {
    'x': -20,
    'y': -10,
    'r': 0
};
var tire_rl = {
    'x': 10,
    'y': -10,
    'r': 0
};
var engin = {
    'a': 0.3,
    'mu': 0.95
}
var world = {
    'air_resist': 0.35
}
canvas = document.getElementById('mycanvas');
canvas.width = 800;
canvas.height = 400;
ctx = canvas.getContext('2d');
ctx.translate(canvas.width / 2, canvas.height / 2);
draw();
function rad(num) {
	return num * Math.PI / 180;
}
function update() {
	var L = Math.abs(tire_fr.y - tire_rr.y);
	theta += (V / L) * Math.sin(rad(r));
	car.x += V * Math.cos(rad(r)) * Math.cos(theta);
	car.y += V * Math.cos(rad(r)) * Math.sin(theta);
	car.r = theta;
	var tred = Math.abs(tire_fr.x - tire_fl.x);
	var R = L / Math.tan(rad(r));
	tire_fl.r = Math.atan2(L , R + (tred / 2)) / Math.PI * 180;
	tire_fr.r = Math.atan2(L , R - (tred / 2)) / Math.PI * 180;
}
function draw() {
	ctx.save();
    ctx.save();
    ctx.fillStyle = 'rgba(256, 256, 256, 0.08)';
	ctx.clearRect(-1 * canvas.width / 2, -1 * canvas.height / 2, canvas.width, canvas.height);
    ctx.restore();
	ctx.save();
	ctx.translate(car.x, car.y);
    ctx.rotate(rad(90));
	ctx.rotate(car.r);
	ctx.fillStyle = col;
	ctx.fillRect(-car.w / 2, -80, car.w, car.h);
    ctx.fillStyle = "blue";
	ctx.save();
	ctx.translate(tire_fr.x, tire_fr.y);
	ctx.rotate(rad(tire_fr.r));
	ctx.fillRect(-tire.w / 2, -tire.h / 2, tire.w, tire.h);
    ctx.restore();
	ctx.save();
	ctx.translate(tire_fl.x, tire_fl.y);
	ctx.rotate(rad(tire_fl.r));
	ctx.fillRect(-tire.w / 2, -tire.h / 2, tire.w, tire.h);
    ctx.restore();
	ctx.fillRect(tire_rr.x, tire_rr.y, tire.w, tire.h);
    ctx.fillRect(tire_rl.x, tire_rl.y, tire.w, tire.h);
    ctx.fillRect(-1, -1, 2, 2);
    ctx.restore();
	ctx.restore();
}
setInterval(function() {
    var beta = lastOrientation.beta;
    var gamma = lastOrientation.gamma;
    if (gamma < -40) V = 10;
    else V = 0;
    if (beta > 20) r = 20;
    else if (beta < -20) r = -20;
    else r = 0;
    update();
    draw();
}, 500);


```




#成果物

http://jsdo.it/ohisama1/gnWL

以上。
HoloViewsのplot rangeの設定

# holoviews のplot rangeの設定

```
import holoviews as hv
hv.extension('bokeh')

x = [0,1,2,3]
y = [0,1,4,8]
x_range = (-1, 5)
y_range = (-1, 10)

curve = hv.Curve((x,y))
# ここでrangeを設定
curve = curve.redim(x=dict(range=x_range), y=dict(range=y_range))


renderer = hv.renderer('bokeh')
renderer.save(plot_curve, './result.html')
```
Gitのローカル・リモートリポジトリの不理解によるエラー

#事象
Gitの勉強でSourceTreeにてローカルにリポジトリを作成し、それを更にローカルの別領域にクローンした。
その後、コミットが終わったのでPushをした際に以下のようなエラーが起きた

#エラー内容
git -c diff.mnemonicprefix=false -c core.quotepath=false -c credential.helper=sourcetree push -v --tags origin refs/heads/master:refs/heads/master 
Pushing to 〜
remote: error: refusing to update checked out branch: refs/heads/master        
remote: error: By default, updating the current branch in a non-bare repository        
remote: is denied, because it will make the index and work tree inconsistent        
remote: with what you pushed, and will require 'git reset --hard' to match        
remote: the work tree to HEAD.        
remote: 
remote: You can set the 'receive.denyCurrentBranch' configuration variable        
remote: to 'ignore' or 'warn' in the remote repository to allow pushing into        
remote: its current branch; however, this is not recommended unless you        
remote: arranged to update its work tree to match what you pushed in some        
remote: other way.        
remote: 
remote: To squelch this message and still keep the default behaviour, set        
remote: 'receive.denyCurrentBranch' configuration variable to 'refuse'.    
To 〜
 ! [remote rejected] master -> master (branch is currently checked out)
error: failed to push some refs to 〜
Completed with errors, see above

#原因
Githubなどのリポジトリはリモートリポジトリでありベアリポジトリ（更新用）、リモートリポジトリからフォークしたリポジトリやSourceTreeなどで作成したローカルリポジトリはノンベアリポジトリ (作業用）であり、ノンベアリポジトリからノンベアリポジトリにPushすることはできないため、エラーが起きていた。

ノンベアリポジトリをベアリポジトリに変更するコマンドなどもネット上にあったが、SourceTreeからリモートリポジトリを作成する方法は無さそうであったため、素直にリモートリポジトリはGithubやローカルにGitblitを構築して利用することにした。
LaravelのHTTPテストでなぜかresponseが返ってこない件

該当のテストを実行すると、下記のようなエラーになりました。

````
1) Tests\Controllers\your/test/path/file_name::success
Test code or tested code did not (only) close its own output buffers
````

原因は、表示するBladeでsectionを閉じていないことが原因でした。

````
@section('aaaa')
//表示するHTMLなど
@endsection //<b>←これがなかった</b>
````
obniz OLEDの表示文字数

# はじめに

**[obniz](https://obniz.io/)**には幅128px高さ64pxのOLEDがついている。
![obnizfront-mini.jpg](https://qiita-image-store.s3.amazonaws.com/0/283293/3e63a746-3e56-597d-5d29-ed5ad2631e23.jpeg)

このディスプレイに表示可能な文字数を目視で確認したので、まとめておく。

なお、文字数に小数点以下があるのは、文字が横方向で途中で切れている状態をしめす。
同様に行数に小数点以下があるのは、文字の縦方向で途中で切れている状態をしめす。

## 表示文字数

**Arial**がゴシック体で、**Serif**が明朝体のイメージ。

font-family | font-size | 文字数 | 行数 
|:--:|:--:|:--:|:--:|
Arial |   8  | 29 |  8
Serif |   8  | 32 |  8
Arial |   10  | 23  | 6.1
Serif |   10  | 25.5  | 6.1
Arial |   12  | 19.1  | 5.1
Serif |   12  | 21.2 |  5
Arial |   14  | 16.2  | 4.3
Serif |   14  | 18.2  | 4.3
Arial |   16  | 14.4 |  4
Serif |   16  | 16 |  4
Arial |   18  | 12.9 |  3.4
Serif |   18  | 14.1  | 3.4

**Serif**の方が若干細いようで、**Arial**より数文字多く表示できます。

2018.11.12追記
上記の検証はMacのSafariで実行しました。もしかすると、WindowsのIEやEdgeだと結果が違うかも知れません。


# 終わりに

見えているピクセル数を厳密に数えたのではなく、小数点以下は、あくまで「だいたい」です。
Javascriptでローカルファイル(file://)を読み込んでみる

社内のNASにある巨大なログファイルの検索ツールを作る必要が生じました。
JavaScriptでやってみよう、と軽い気持ちで10数年ぶりにJSに着手。

しかし社内の見えない壁により、社内・クラウドともWebサーバーを立てることが事実上不可能でした。

本来ここであきらめて別の手法を探すべきですが…
とりあえずファイルを読み込んでブラウザのエンジンで処理ができれば良いので、XHRを使ってファイルを読み込んでみます。

```javascript:main.html
<!DOCTYPE html>
<html lang="ja"><head><meta charset="UTF-8"></head>
<body>
    <script type="text/javascript">
        const xhr = new XMLHttpRequest();
        var data;
        
        window.onload = function onLoad() {
          xhr.open('GET', './data/test.txt', false); // GETでローカルファイルを開く
          xhr.onload = () => {
              data = xhr.responseText;
          };
          xhr.onerror = () => {
             console.log("error!");
          };
 
         xhr.send();

          cts1 = document.getElementById("cts1");
          cts1.innerText = data;
        }
    </script>
    <div class="contents" id="cts1"></div>
 </body>
</html>
```

以下のブラウザで動作確認しました。
- Firefox Quantam 62.0.3
- Chrome 69.0.3497.100
- Microsoft Edge 42.17134.1.0

Chromeは起動時に以下のオプションを付けないと動きませんでした。
- --allow-file-access-from-files　・・・file://を使えるようにする
- --disable-web-security　　・・・別フォルダのファイルにアクセス可とする
- --user-data-dir　・・・同上

FireFoxでは、ローカルのリモートのファイルを読み込む場合、設定を変える必要があります。
about:configを開き、
- strict_origin_policy = True(既定値) → False
![image.png](https://qiita-image-store.s3.amazonaws.com/0/249926/c377849b-3116-301a-4dd0-4a5907522896.png)

（セキュリティをゆるゆるにするオプションなので使用は充分慎重に。）

[こちら](https://qiita.com/nissuk/items/1ede2953a8661dc59214)の記事などを参考にしました。
（↑こちらの記事にかかれているより各ブラウザともすんなり動いた印象です。なにか見落としがあるのかもしれません）


（追記）
xhrで戻ってくる文字列は何もしないとunicodeで戻ってきます。
SJISのファイルを読み込む場合
xhr.overrideMimeType("text/plain; charset=Shift_JIS");
とするとSJISで戻ってきます。
（ただし、Edgeは常にunicodeで帰ってきます…困った）
[関数系] mb_strlenとstrlenに罠はないのか

# 概要

マルチバイト文字を処理するということしかわかっていなかったので、本当に
他に違いはないのか知りたかったので調査がてら。

# 試した環境

```shell
php -v                                                                                                                                                                                                           [/Users/oki.suguru/dev-environment/core]
PHP 7.2.6 (cli) (built: May 25 2018 06:18:07) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.2.6, Copyright (c) 1999-2018, by Zend Technologies
```

# 内容

## mb_strlen

### 概要

マルチバイト文字に対して文字列の長さがどのくらいかを返す標準関数。

### 引数

#### マルチバイトではない文字列を引数にとったらどうなるのか

```
var_dump(mb_strlen('123456'));
int(6)
```

正常に動く模様。

#### ※ @tadsan さんのコメントより追記

1. PHPの文字列値はエンコーディング情報が付随しない。
2. mb_strlen()には文字エンコーディング名(通常は'UTF-8')を明示的に指定した方が安全
3. 引数を省略した場合はmb_internal_encoding()で設定された値が利用されるので、できるだけ省略しないことをおすすめする。

##### mb_internal_encoding()

php.iniの

> mbstring.internal_encoding

を設定する標準関数。これを指してだいたい「内部文字エンコーディング」とか「内部文字エンコード」と呼んだりする。

標準関数 ini_set でも同じことができる。

```php5
php > var_dump(ini_set('mbstring.internal_encoding', 'UTF-8'));

Deprecated: ini_set(): Use of mbstring.internal_encoding is deprecated in php shell code on line 1
string(0) ""
```

mb_string系の一部の機能は5.6系から非推奨となっているため、利用しない方が良いかもしれない。

参考→[PHP 5.6.x で推奨されなくなる機能 - iconv および mbstring のエンコーディング設定](http://php.net/manual/ja/migration56.deprecated.php)


####　マルチバイトの引数を取った場合（正常系）

```php
php > var_dump(mb_strlen('マルチバイト'));
int(6)
```

## strlen

### 概要

マルチバイト文字以外の文字列に対して文字列の長さがどのくらいかを返す標準関数。

### 引数

#### マルチバイトの文字列を引数にとる場合(異常系)

```php
php > var_dump(strlen('マルチバイト'));
int(18)
```



strlen()は、マニュアルで説明される通り文字数ではなくバイト数を返す
ExcelでCSVを開いたときの文字化け

#事象
UTF-8でエンコーディングされたCSVファイルの検証をしてもらった時に日本語が文字化けしているとの報告があった

#原因
原因はCSVファイルをExcelで開くと何の指定もされていない場合はShift-JISで開かれることが原因だった。
机上でCSVファイルの検証を行なった時にはサクラエディタを使用していたため、文字化けが発生することは確認できなかった。

#解決策
BOMが付与されていればExcelで開いた際にもUTF-8でファイルが開かれるようになるため、サクラエディタで一度開いてもらい、「名前を付けて保存」を選択し、文字コードセットをUTF-8、BOMチェック付きで再保存してもらうことで解決した。
to_json で関連モデルなどを含む複雑なオブジェクトを出力する

## はじめに

Rails のモデルには to_json という便利なメソッドがあります。このメソッドはデフォルトでは、すべてのカラムとその値を含む json 文字列を返します。ただ、値を少し加工したい場面がほとんどです。たとえば下記のような要求が出てくると思います。

* 特定のカラムを出力しないようにする
* 特定のカラムだけを出力する
* メソッドの結果をカラムのようにして出力する
* 関連モデルを出力する
* 関連モデルの特定カラムを出力する or 特定カラムを出力しない
* 関連モデルのさらに関連モデルを出力する

上記のことを実現するのに to_json の呼び出し先の as_json をオーバーライドする方法や、独自メソッドを定義する方法、 jbuilder を使う方法などが紹介されているようです。しかしながら、上記の要求であれば to_json のオプションだけで実現できます。

## 基本

以降は Book というモデルを例にして紹介していきます。 to_json はモデルに定義されているほか、リレーションにも定義されています。

```rb
Book.first.to_json
Book.all.to_json
```

## 特定のカラムを出力しないようにする

オプションの except を使います。たとえば id と body を出力しない場合は下記のようにします。例では配列を引数にしていますが、要素数が1個の場合は配列の中身を直接指定できます。以降のメソッドも同様です。

```rb
Book.first.to_json(except: [:id, :body])
```

## 特定のカラムだけを出力する

オプションの only を使います。たとえば title だけを出力したい場合は下記のようにします。

```rb
Book.first.to_json(only: [:title])
```

## メソッドの結果をカラムのようにして出力する

オプションの methods を使います。たとえば Book に要約を出力するインスタンスメソッド summary が定義されている場合は下記のようにします。

```rb
Book.first.to_json(methods: [:summary])
Book.first.to_json(methods: [:summary], only: [:summary]) # summary 以外出力しない
```

## 関連モデルを出力する

オプションの include を使います。たとえば Book に belongs_to の関連モデル Author, Publisher が定義されている場合は下記のようにします。has many 関係でも同様にできます。 has many through の関係でも同様です。

```rb
Book.first.to_json(include: [:author, :publisher])
```

## 関連モデルの特定カラムを出力する or 特定カラムを出力しない

オプションの include を使います。そして include 先のモデルにもオプションを与えます。たとえば、上記の例において Publisher モデルの名前 name 以外のカラムが不要な場合は下記のようにします。

```rb
Book.first.to_json(include: [:author, {publisher: {only: :name}}])
```

例は省略しますが except も同じように使うことができます。

## 関連モデルのさらに関連モデルを出力する

オプションの include を使います。そして include 先のモデルにもオプションを与えます。たとえば、 Book -> Author -> Group の順に has one 関連モデルを持っていて、その階層関係すべてを出力する場合は下記のようにします。

```rb
Book.first.to_json(include: {author: {include: :group}})
```

## まとめ

to_json のオプション引数を使って、いろいろな要求が実現できることを紹介しました。オプション only, except, method, include, はすべて組み合わせ可能です。たとえば下のような複雑なオプションを与えることができます。

```rb
Book.all.to_json(
  only: [], # Book のカラムはすべて不要
  include: {
    publisher: {} # Publisher のオプションは無し(デフォルトで出力)
    author: {
      include: {
        group: { # Group は group_name メソッドの結果だけ出力
          methods: :group_name
          only: :group_name
        }
      }
    }
  }
)
```

可読性や実行速度、再利用性を重視する場合は Jbuilder や [Fast JSON API](https://github.com/Netflix/fast_jsonapi) や [jsonapi-rb](http://jsonapi-rb.org/) などを使うべきかもしれません。
【備忘録】Windows10 102/109キーボードの変更手順

# はじめに

時々英語キーボードを接続することがあるので、キーボード種別の変更手順を残しておく。

姉妹記事：[『Windows10 102（英語配列）キーボードの場合にIMEのON/OFF（日本語入力）切り替え方法』](https://qiita.com/nak435/items/65060d680f236c2a6d30)


## 1.「設定」を開く

画面左下の四角いアイコンをクリックしてスタートメニューを表示。そこの「設定」をクリック。
![keyboard0.png](https://qiita-image-store.s3.amazonaws.com/0/283293/0d5a056a-eab0-2037-8ce1-7427cedaf608.png)

## 2.「時刻と言語」を開く

「Windowsの設定」画面にて、「時刻と言語」をクリック。
![keyboard1.png](https://qiita-image-store.s3.amazonaws.com/0/283293/02602854-64d1-1d8e-8977-dc9c181b1e81.png)

## 3.「地域と言語」を開く

「時刻と言語」画面にて、「地域と言語」をクリック。
22H2 : 「言語」をクリック。
![keyboard2.png](https://qiita-image-store.s3.amazonaws.com/0/283293/011438e9-47fa-de1e-13ac-27b22a0e0682.png)

## 4.「日本語」を選択

「地域と言語」画面から、「日本語」をクリック。
22H2 : 「言語」画面から、「日本語」をクリック。
![keyboard3.png](https://qiita-image-store.s3.amazonaws.com/0/283293/3340f38a-dbd4-bd0b-5aff-dd210551eb05.png)

## 5.「オプション」を選択

![keyboard4.png](https://qiita-image-store.s3.amazonaws.com/0/283293/cec78e10-44b0-28c3-6ff8-c459efbf267d.png)

## 6.「レイアウトを変更する」をクリック

ハードウェア キーボード レイアウトから「レイアウトを変更する」をクリック。
![keyboard5.png](https://qiita-image-store.s3.amazonaws.com/0/283293/6455d957-219e-dd1f-8522-70d81e46a894.png)

## 7.接続するキーボードを選択する

接続する102/109キーボードを選択して「OK」をクリック。
厳密に10xキーボードを選択するではなく、ざっくり**英語キーボード**と**日本語キーボード**を切り替えるイメージでよい。
![keyboard6.png](https://qiita-image-store.s3.amazonaws.com/0/283293/567cce4e-72a5-3a88-8b6f-4a76a7bd4172.png)

**PC再起動後に**変更後のキーボードが有効となる。
Oracle、PostgreSQL、MySQLでSQLのINとEXISTSの実行計画を比べてみた。

ネット上のSQL記事でINが遅い、EXISTSを使うべきみたいな記事がちらほらあるので調べてみた。

#結論 下記サンプルレベルのSQLにおいては実行計画は同じになった。
下記のDBにおいてサンプル例のSQLに近いSQLで確認をしてみたが、実行計画上INとEXISTSに違いはなかった。
このレベルのSQLであればオプティマイザがIN、EXISTSいずれであっても最適なインデックスを使用するようになっているようだ。
・postgreSQL 9.6.3
・MySQL 5.5.17
・Oracle 12.1.0.2

サンプル例

```sql
/* 
    顧客マスタの顧客コードのインデックスを使用し、
    お得意様マスタの全ての顧客コードから顧客マスタの顧客コードを検索 
*/
select
    *
from 顧客マスタ
where 顧客コード in (
                        select
                            顧客コード
                        from お得意様マスタ
                    )
```

```sql
/* 
    お得意先マスタの顧客コードのインデックスを使用し、
    顧客マスタの全ての顧客コードからお得意先マスタの顧客コードを検索
*/
select
    *
from 顧客マスタ
where exists (
                select
                    お得意様マスタ.顧客コード
                from お得意様マスタ
                where 顧客マスタ.顧客コード = お得意様マスタ.顧客コード
            )
```

#ではIN、EXISTSはどちらを使うべきか？

同じならどっちでもいい。が、実際は複雑なSQLにしたときに正しく解釈されないことがある。
SQLをそのまま解釈した場合、INはサブクエリ外のテーブルのインデックス、EXISTSはサブクエリ内のインデックスを使用する。

サンプル例のSQLでIN、EXISTSのどちらかを使う場合、
・顧客マスタの顧客コードのインデックスを使いたい→IN
・お得意様マスタの顧客コードのインデックスを使いたい→EXISTS
となる

※『結論』にも記述したがSQLでどのインデックスを使用するかはオプティマイザが決めている。
　そのため特定のインデックスを使用させたいのであれば、必ず実行計画を確認しインデックスが正しく使用されているか確認する必要がある。
React NativeでAndroidのPickerのfontSizeを変更する方法

React Nativeで`Picker`の`fontSize`を変更しようと思ったのですが、どうやらAndroid環境では`fontSize`に対応していないようです(つらい)

どうしても文字サイズを変更したい場合は、`transform`で大きくして`margin`などで位置を調整する他ないようです。

```js

styles.picker = {
  transform: [
     { scaleX: 1.5 }, 
     { scaleY: 1.5 },
  ]
}
```

何か良い方法が合ったらコメントなどで教えていただけるとありがたいです。

https://github.com/GeekyAnts/NativeBase/issues/415
https://stackoverflow.com/questions/39585253/how-to-give-fontsize-to-react-native-android-picker
glsl マスクまとめ


# 概要
 glslでのマスク方法をまとめています。
 glslでのマスクは、ディスタンスフィールドで作ったシェイプを掛けるのが基本になります。

 随時追加していきます。

# マスク
## 放射状マスク

？マークなど、主に極座標系の図形の一部を角度を指定して欲しいときに使えます。

```glsl

const float PI  = 3.141592653589793;
const float PI2 = PI * 2.;

/*
vec2   p 中心の座標
float a1 開始角度(-1.～1.)
float a2 マスクする角度(0.～1.)
*/ 
float maskRadial(vec2 p,float a1,float a2){
  float a = fract(atan(p.y,p.x)/PI2+1.-a1);
  return step(a,a2);
}

```
* 使用サンプル(ローディングバー)

![radialMask.png](https://qiita-image-store.s3.amazonaws.com/0/135381/90f0198b-a5fd-4ea5-40c9-dcde3ec3c925.png)

https://goo.gl/prxD2D

## 範囲マスク

```glsl
#define between(x,min,max) step(min,x)*step(x,max)
```

glslデュプリケートでパターンを作るのは簡単だが、そのままでは無限に複製されてしまう。
パターンの回数を指定したいことがある。

その場合は、マスクを併用することでパターンの回数を制限することができる。

もっとも使うと思われるマスク。応用範囲は広い

![dot3.png](https://qiita-image-store.s3.amazonaws.com/0/135381/8f5ea2b5-53e7-1a5a-b1e3-d78c0dd71c30.png)

https://goo.gl/rG2mVG

## 矩形マスク

図形の一部だけを矩形で抜き出したい時に使う。
正方形・長方形のシェイプを使っても同じ

```glsl
#define between(x,min,max) step(min,x)*step(x,max)

float maskRect(vec2 p,vec2 p1,vec2 p2){
	return between(p.x,p1.x,p2.x)*between(p.y,p1.y,p2.y);
}
```

![maskRect.png](https://qiita-image-store.s3.amazonaws.com/0/135381/28e7fb9f-2286-5719-7207-75785d053d9c.png)

https://goo.gl/ZMbtnG

# アルファマスク

## 円形アルファマスク(ビネット)

 ディスタンスフィールドの種類によって掛かり方が変わる

```glsl
 precision mediump float;
 uniform vec2  m;       // mouse
 uniform float t;       // time
 uniform vec2  r;       // resolution
 uniform sampler2D smp; // prev scene
 
 float pCheckers(vec2 p,float n){vec2 q=p*n;return mod(floor(q.x)+floor(q.y),2.0);}

 void main(void){
    vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y);
    float l = pCheckers(p,5.);
    l*=1.-length(p);
    //l*=1.-dot(p,p);
 
    gl_FragColor = vec4(vec3(l), 1.0);
 }
```

### length(p)
![circle2.png](https://qiita-image-store.s3.amazonaws.com/0/135381/6ea59fdc-3e47-d0fd-0881-78c9d1a0fa77.png)
https://goo.gl/MTEs1E


### dot(p,p)
![circle1.png](https://qiita-image-store.s3.amazonaws.com/0/135381/95433ab9-8b57-5e0d-d8f5-eed3c24d2729.png)
https://goo.gl/P7GRH1
macのターミナル でgitのブランチを表示する

gitで現在どのブランチにいるかというのを
あらかじめターミナルで表示できるということで
今回はmacのターミナルで設定してみます。

windowsの方はgit bashというツールを使うと
この機能は標準でついてくるとのことです。

#gitをhome-brewで再インストール
自分の環境ではgitがインストールされていましたが
そのまま以下のコマンドを実行しました。

```shell.sh

brew install git
```

再インストールの必要性としては
git-completion.bash
git-prompt.sh
と言う２つのファイルが必要な為
homebrewからインストールしています。

# git-completion.bashとgit-prompt.shの確認

以下のコマンドでファイルが表示されていればok

```shell.sh

ls /usr/local/etc/bash_completion.d/
```

#.bashrcファイルに記述する
.bashrcの場所は
/Users/yourname/
のような場所、つまりホームディレクトリにあればあります。
無い場合は.bashrcと言うファイル名で作ってしまってOKです。

以下先ほどインストールしたファイルを読み込み
gitでブランチを表示する設定を書きます。

```bashrc.sh

# スクリプト読み込み
source /usr/local/etc/bash_completion.d/git-completion.bash
source /usr/local/etc/bash_completion.d/git-prompt.sh

# プロンプトに各種情報を表示
GIT_PS1_SHOWDIRTYSTATE=1
export PS1='\h\[\033[00m\]:\W\[\033[31m\]$(__git_ps1 [%s])\[\033[00m\]\$ '
```

#bashrcをターミナル起動時に自動読込
このままだとbashrcは有効になりません。

前述のホームディレクトリに.bash_profileと言うファイルがありますので以下を追記しターミナルを再起動します。

```.bash_profile.bash
if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi
```

これでgit initしているディレクトリにcdし
ブランチ名が表示されていれば成功です。


#gitが重複している場合
うまくいかない可能性もあります。

その際はhomebrewでインストールしたものが有効になっているかを確認してみて下さい。
CSSでの要素の水平方向の中央寄せ

#はじめに
人に教えられるほど知識がないので、自分へのメモ書き程度にまとめます。もっと参考になるサイト様は最後らへんにURL載せときます。
##まず、HTML要素について
中央寄せする際に注意したいのが、HTMLの要素についてです。

HTMLの要素には大きく分けて**「ブロックレベル要素」**と**「インライン要素」**の2種類があります。
このどちらかによって中央寄せする方法が変わってきます。
###1. ブロックレベル要素
見出しや文章など、基本的な「かたまり」として表示されます。
`<div>, <p>, <form>, <h1>~<h6>, <ul>, <dl>, <ol>, <table>`などがあります。
###2. インライン要素
ブロックレベル要素の中の文章を強調したりと、文章の一部として表示されます。ブロックレベル要素のように、前後が改行され余白ができたりすることはありません。
`<a>, <br>, <code>, <em>, <font>, <img>, <input>, <label>, <select>, <small>, <span>, <strong>, <textarea>`などがあります。
##中央寄せする方法
###1. ブロックレベル要素
```css:centering.css
div{
 margin: auto;

 margin: 10px auto;

 margin-right: auto;
 margin-left: auto;
}
```
ブロックレベル要素は、要素のmarginをautoにしてあげるとできます。
###2. インライン要素
```css:centering.css
div{
 text-align: center;
}
```
これだけです。このdiv（ブロックレベル要素）の中のインライン要素を中央寄せします。

ブロックレベル要素①の中のブロックレベル要素②を中央寄せしたいときは、ブロックレベル要素②のmarginをautoにすれば大丈夫です。
##参考文献
[CSSで中央寄せする9つの方法（縦・横にセンタリング）-サルカワ](https://saruwakakun.com/html-css/basic/centering)
[ブロックレベル要素とインライン要素-HTMLクイックリファレンス](http://www.htmq.com/htmlkihon/005.shtml)
VSCode 1.28からターミナルでgit logがうまく日本語表示できなくなった

症状
------------
VSCodeのバージョンを1.25から1.28に上げてから、ターミナルで`git log`してもコメントがうまく日本語表示されなくなった。文字化けではないんだけど、日本語になるべき部分がコードポイントで表示される的な感じ。以下の`git log`のコミットメッセージをご覧ください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/52527/295980ca-8960-325f-688a-1847ec814d7a.png)

なお、Gitのバージョンは `git version 2.18.0.windows.1` で、同じ実行ファイルを見ています。

原因
-------------

心当たりとすれば、VSCodeをzip展開して使ってたり、[ポータブルモード](https://code.visualstudio.com/docs/editor/portable)を使ったりしているので、一般的なVSCodeの導入とはズレていることも原因かもしれない。

でも、コマンドの翻訳対応はたいていLANGとかlocale周りが影響するので、先にそのあたりを調べることにした。

ターミナルのGit bashの`env`で環境変数を見比べてみたところ、1.25のターミナルでは`LANG=en_US.UTF-8`が定義されていたが、1.28では未定義になっていた。なので、ターミナルを表示するときの前処理でVSCodeが何かを色々やっているようだった。

一応、`locale`コマンドも見たところ、1.25は全てen_US.UTF-8、1.28ではLANGは空っぽ、LC等も`C.UTF-8`として表示された。

もう答えが出た感じだが、VSCodeがやった、という証拠が欲しかったのでVSCodeのコードを見にいったところ、ちょうど1.28でそれっぽい修正が入ってた。
https://github.com/Microsoft/vscode/commit/dbdbbe525904181eed2a5679accebd430d9634a1#diff-9b5b24c0097dc46a70269887c6c5489eR90

関係ないが、そしてこのlocaleはplatform.tsの_locale変数で決まるっぽい。（platform.tsのlocaleとしてexportされてる。）
https://github.com/Microsoft/vscode/blob/dbdbbe525904181eed2a5679accebd430d9634a1/src/vs/base/common/platform.ts#L49

なので、Windowsでは環境変数`VSCODE_NLS_CONFIG`を使わない限り固定になるのかな？
でもターミナルのenvには`LANG=en`とは出ないので事象と合わない。多分コードを読み間違えてそう。TypeScript難しい。

特定には至らなかったが、多分VSCodeの1.28が起因しているだろうと思うことにした。（推理放棄）


対応
--------------

雑な対応だけど、とりあえず`~/.bashrc`に`export LANG=en_US.UTF-8`を書き出してターミナルを停止→起動したらうまくいった。（`~/.bash_profile`だとうまくいかなかった）

あとは`env`コマンドや`locale`コマンドで確認して、`git log`も日本語がちゃんと表示されたのでおしまい。

（追記）
`terminal.integrated.setLocaleVariables`を設定する対応が紹介されています。こちらのほうが筋がよさそうです。
https://qiita.com/ka-san/items/cba813331403fb973596
Emmet概要

#目次
+ 導入理由
+ 使い方
+ 感想

#導入理由
少しでもコードが楽にかければいいと思ったため。
BEMの導入に応じてスムーズにコーディングできるのではないかと思ったため。

# 使い方
試し中

**参考**
https://rfs.jp/sb/atom-github/atom03_emmet_howto.html#Emmet-2

# 感想
試し中
ObjectMapper#readValueでモデルに存在しないパラメータを無視する

外部APIからjson形式でレスポンスを受け取り、モデルクラスに変換する時にハマったメモ。

#### 何にハマった？
`com.fasterxml.jackson.databind.ObjectMapper#readValue(String, TypeReference)`でjsonをモデルに変換しているが、モデルのフィールドに存在しない項目がjsonに存在すると例外は発生する。

`com.fasterxml.jackson.databind.exc.UnrecognizedPropertyException`

#### 解決方法
モデルクラスに `@JsonIgnoreProperties(ignoreUnknown = true)`をつける。

```ｊａｖａ
@NoArgsConstructor
@JsonNaming(SnakeCaseStrategy.class)
@JsonAutoDetect(getterVisibility = Visibility.NONE)
@Data
@JsonIgnoreProperties(ignoreUnknown = true)
public class hogehoge {
｝
```

こんな感じ。

ちゃんちゃん。
Fortranで二分法を使って円周率を求める

#Fortranで二分法を実装する

##入力条件
与えられたa,bに対して

```math
a<b
```


であるとする

##コード
誤差などは全然気にせず適当に書いている部分があるため厳密な用途には使えない


```fortran

program nibun

implicit none

real(8):: a,b,c
real(8),parameter :: e =0.00000000001_8
integer(4)::i
real(8) , parameter :: zero = 0.00000000_8

a=0.0
b=5.0

  do i=1,1000
    c=(a+b)/2
    if(abs(pi_func(c)) < e) then
      exit
    else if( (pi_func(a)*pi_func(c)) > zero)then
      a=c
    else if( (pi_func(b)*pi_func(c)) > zero ) then
      b=c
    end if
  end do

write(*,*) c
  stop
contains



  real(8) function pi_func(cc)
    implicit none
    real(8):: cc
    pi_func= dsin(cc/4)-dcos(cc/4)
    return
  end function pi_func
end program nibun
```

出力

```fortran

 3.1415926535919425 
```

#(10/12追加) 指摘があったのでコードを修正して精度とかも悪かったのでちょっと手直しした
コンパイラはGNU Fortran (Ubuntu 5.5.0-12ubuntu1~16.04) 5.5.0 20171010

```Fortran
program nibun

implicit none

double precision:: a,b,c
double precision,parameter :: e =0.1E-19
integer(4)::i
double precision , parameter :: zero = 0.0_8

!read(*,*) a,b

a=0.0
b=5.0	
	do i=1,100000
		c=(a+b)/2
		if(abs(pi_func(c)) < e) then
			exit
		else if( (pi_func(a)*pi_func(c)) > zero)then
			a=c 
		else if( (pi_func(b)*pi_func(c)) > zero ) then
			b=c
		end if
	end do

write(*,*) c
write(*,*) '厳密解は 3.1415926535 8979323846 2643383279 5028841971'
contains
double precision function pi_func(cc)
  	implicit none
  	double precision:: cc
  	pi_func= sin(cc/4)-cos(cc/4)
	end function pi_func 
end program nibun                           
```

出力結果

```
  3.1415926535897931
厳密解は 3.1415926535 8979323846 2643383279 5028841971
```

もうちょっと精度がよくなる実装があるのかもですがひとまずここまでとします



#参考
https://qiita.com/Ren112358/items/f2c0bbc90810c040a2e5 実装は殆どそこの記事を参考にさせていただいた
no implicit conversion of nil into Stringで思わぬところに原因があった話

binding.pryを理解して使わないと、binding.pry自体がエラーを起こすよ、という話です。


私はデバッグ時、"binding.pry"を使い倒していました。
そんな時、下記のコードをデバッグすることになりました。

```
article_blocks.each do |article_block|
      result << if article_block.sentence?
                  sentence = article_block.blockable
                  sentence.body = "test"
                  binding.pry
                elsif article_block.medium?
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
    end
```


条件に照らし合わせて処理を行い、処理結果を変数"result"に格納していくというコードです。
しかし、このコード部分で以下のようなエラーが帰ってきました。



```
TypeError - no implicit conversion of nil into String:
```

resultに入る値である「sentence.body」には既に"test"という文字列（仮にtestにしています）が入っているため、nilを格納しようとしているわけではありません。なのに何故…(・・?)

結論として、原因は下記の通りでした。

### binding.pry自体が返り値としてresultに格納されようとしていたため

<br>

そもそもrubyでは、if文のブロックの最終行が返り値として返されます。（returnとかをブロック途中で使った場合はその限りではない）
しかし上記コードでは、binding.pry」自体にはなんの値もセットしていません。（binding.pry自体はnilとなっています）
結果、if文の最終行にあった「binding.pry」が返り値として見られてしまい、resultにnilを格納しようとしたためエラーがでた次第です。

<br>

if文の文法ルール、binding.pryが何者かをきちんと理解していればこんなコードは書いていないので、自戒の念も込めて、備忘録として残しました。

まあ私以外にこんな基本的なミスをする人はいないかと思いますが、それでも誰かの役に立てれば幸いです。
(☝︎ ՞ਊ ՞)☝︎
Railsのresourcesとresourceついて

##はじめに
resourcesとresourceについて初歩的ではありますが、備忘録をかねてまとめたいと思います。

##①Railsのresourcesについて

まずは、resourcesについてまとめたいと思います。

config/routes.rbに`resources :hoges`と1行を書くのみで複数のルーティングが定義されます。

```Ruby:config/routes.rb
resources :hoges
```
複数のルーティングとは以下の通りです。

```Ruby:ターミナル
$rake routes
 
    hoges GET /hoges(.:format)          hoges#index 
          POST /hoges(.:format)         hoges#create 
 new_hoge GET /hoges/new(.:format)      hoges#new 
edit_hoge GET /hoges/:id/edit(.:format) hoges#edit 
     hoge GET /hoges/:id(.:format)      hoges#show 
          PATCH /hoges/:id(.:format)    hoges#update 
          PUT /hoges/:id(.:format)      hoges#update 
          DELETE /hoges/:id(.:format)   hoges#destroy

```

HTTPメソッドのGET、POST、PUT（PATCH）、DELETEがそれぞれ、show、create、update、destoryというアクションに対応しています。

例えば、`GET /hoges/:id`というルールであれば`Hoges`の集合体に対して特定のidを絞り込んだ結果をGET(取得)するという動作を表しています。
また、`POST /hoges(.:format)hoges#create`にidがありませんが、idは自動採番されるため、不要とされています。

このような仕組みがRESTの考え方に一致したものとなっています。「RESTful」なアプリケーションを作成することが、効率的にRailsのアプリケーションを構築する方法となっています。

##②RESTとは
REST(REpresentational State Transfer)の略称で、Webサービスの設計モデルです。RESTなWebサービスは、そのサービスのURIにHTTPメソッドでアクセスすることでデータの送受信を円滑に行います。

詳細はこちらの記事が非常に参考になります。
https://qiita.com/TakahiRoyte/items/949f4e88caecb02119aa


##③resourceについて
resourcesは「人」や「本」などのようにアプリケーション上に「複数存在する」リソースを扱う場合に用いていました。
自身のプロフィールの様に、ログインユーザーからみてアプリケーション上、１つしか存在しない様なリソースが存在します。その様なリソースについて、REST的なルーティングを定義したい場合には、`resource`を定義をします。

以下の様にルーティングの定義を行います。

```Ruby:config/routes.rb
resource :hoge
```
以下の様なルーティングの確認ができます。

```Ruby:ターミナル
$rake routes

 new_hoge GET    /hoge/new(.:format)     hoges#new
edit_hoge GET    /hoge/edit(.:format)    hoges#edit                                                                
     hoge GET    /hoge(.:format)         hoges#show                                                           
          PATCH  /hoge(.:format)         hoges#update                                                                
          PUT    /hoge(.:format)         hoges#update                                                                 
          DELETE /hoge(.:format)         hoges#destroy                                                                
          POST   /hoge(.:format)         hoges#create                                                                 
```

resourcesの場合は、一覧表示である`index`がありましたが、resourceの場合は、indexの定義がされません。プロフィールは必ずログイン中のユーザーに紐付くので、「:id」による絞り込みも必要なくなります。

resourcesとresourceの使い分けを行い、より良い実装を行いたいと思います。

以上となります。
ご参考になれば幸いです。
【初めての人向け】Laravelのファイル階層、編集要素について解説

# まずはじめに

私は1年弱でhtml、css、JSを基本操作を習得したものの
より動的なサイト構築を目指そうと、現在PHP及びフレームワークにLaravelを学習し始めた。

これから、Laravelを勉強していくにあたって基礎的な項目をはじめとした備忘録を書き残していく。
# 初期のファイル構造
環境構築
・XAMPP
・Laravel：1.5.0
・PHP：7.2.6
・mysql

Laravelを環境構築した最初のファイル構造は下記図のようになっているはず。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/283150/2491f86c-0ae6-0ae2-af09-dfd14fc85678.png)


# app フォルダ
アプリケーションに関するクラスを管理
モデルに関するファイルはこの app 直下に作られる

コントローラはapp の Http の中の Controllers に入れていきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/283150/a15b9a0a-a636-db36-ed81-5a4b265077c4.png)

# config フォルダ
いろいろな設定に関するファイルを管理する

# database フォルダ
ここにはデーターベースに関するファイルを管理する
migrations フォルダですが、データーベースのバージョン管理をするためのファイルを入れていきます。

デフォルトで入っているmigrationsファイルは先ほどのapp フォルダのUser に関するマイグレーションファイルです
![image.png](https://qiita-image-store.s3.amazonaws.com/0/283150/18287e5c-64ec-156e-3227-68585e16347d.png)

# public フォルダ
ブラウザからアクセスしたときに見えるフォルダになります
CSS や JavaScript や 画像などはこちらに入れていくことになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/283150/c229b3e9-3acf-b290-4c25-6fed432cd7ab.png)

# resources フォルダ
こちらの中のviewsフォルダに画面のテンプレートを入れていく形になります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/283150/fd54c9fa-c916-7037-dca4-243b0dcfff46.png)

# routes フォルダ
クライアントからwebサイトにアクセスがあったときの処理やコントローラとの処理をするときの設定を行う
ルーティングもしくは、ラウティングのファイルを管理するところ。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/283150/bcdce4bf-4533-d7f7-4938-03fbbb8e9c2e.png)
CSSフレームワーク

#目次
+ CSSフレームワークとは
+ ダウンロード
+ どんな感じ

#CSSフレームワークとは
CSSがパーツごとに用意されているもの
Foundation,Bootstrap,Web Starter Kitなどが代表

**グリッドシステム**
>
グリッドシステムとは、スマートフォンやタブレットなどデバイスに応じて構造を変化させるための仕組みです。グリッドシステムを使うことで、簡単にレスポンシブWebデザインでレイアウトを作成することができます。
https://techacademy.jp/magazine/6270#sec5

**パーツ**
ボタンやフォームなど初めからデザインが用意されている


#どんな感じ
まだ試し中だけど、CSSのネーミングとか参考になった。
CSSのルールを模索中
[Tips][BASH]mkdir先へcdする


### $_を使う
```
$ mkdir new_directory && cd $_
```

### $_とは
直前に実行したコマンドラインの最後の引数が格納される変数

なので、

```
$ mkdir dir_a dir_b && cd $_
```
とのとき **$_** に格納されているのは **dir_b** である
Inline SVG の foreignObject で input を置く

React でSVGベースのアプリを作ってて、途中で inline に input 要素を置きたかったがSVGにはそういうインタラクティブな要素がない。座標計算してポップアップを置いてもいいが、だるい。

と思っていろいろ考えてたが、svg には inline で HTML を埋め込める foreignObject という要素があるのを思い出した。

https://developer.mozilla.org/ja/docs/Web/SVG/Element/foreignObject

React の SVG 要素でなんやかんややって値を取る

```jsx

<svg width={800} height={600}>
  <g transform="translate(60,10)">
    <foreignObject
      x={0}
      y={0}
      width="110"
      height="32"
      style={{ background: "red" }}
    >
      <input
        style={{ width: 100 }}
        defaultValue="10px"
        onChange={ev => {
          console.log("value", ev.target.value);
        }}
      />
    </foreignObject>
  </g>
</svg>;
```

最終的にこうなった

```jsx
type InlineInputProps = {
  width: number;
  height: number;
  value: string;
  onChange: (ev: any) => void;
};
class InlineInput extends React.Component<
  InlineInputProps,
  {
    value: string;
  }
> {
  constructor(props: InlineInputProps) {
    super(props);
    this.state = {
      value: this.props.value
    };
  }
  render() {
    return (
      <foreignObject width={this.props.width} height={this.props.height}>
        <input
          style={{
            padding: 0,
            margin: 0,
            width: this.props.width,
            height: this.props.height,
            outline: "none",
            boxSizing: "border-box"
          }}
          value={this.state.value}
          onChange={ev => {
            this.props.onChange(ev);
            this.setState({ value: ev.target.value });
          }}
        />
      </foreignObject>
    );
  }
}
```
レイマーチングのためのShadertoy逆引きメモ

## 概要

[Shadertoy BETA](https://www.shadertoy.com/)という、シェーダ（フラグメントシェーダ）だけを書いて作品を投稿するサービスがあります。
レイマーチングなど、フラグメントシェーダでお絵描きするのに適したサービスで、WebGL周りのめんどくさいセットアップなしに、シェーダのみを書くことができるのでとても便利なサービスです。

そしてこのサービス、フラグメントシェーダを書けるだけでなく、CubeMapを使えたり、バッファを複数用意してバッファ向けにシェーダを書いてそれを利用したり、と結構色々な機能があります。（さらにはGPUサウンドなんかも！）

ただ、機能が多く、またデータ保存など「やりたいこと」を逆引きでやるのは結構骨が折れるので、そのためのメモです。
（なので随時更新予定）

ちなみに、英語で非公式なものですが機能をまとめた記事があるのでそちらも合わせてみるとやりたいことが見つかるかもしれません。

- [Special Shadertoy features | shadertoy - unofficial](https://shadertoyunofficial.wordpress.com/2016/07/20/special-shadertoy-features/)

## マウスを使う

マウスの座標や、ドラッグ開始点なども得ることができます。
マウスを扱うには以下のように`iMouse`を使います。

```glsl:マウスを使う
vec4 m = iMouse / iResolution.xxxx;
```

`iMouse`の`xy`は現在のマウスの座標、`zw`はドラッグを開始していた場合のドラッグ開始地点の座標が入っています。
それを、`iResolution`を使って正規化し利用します。

例えば、これをカメラの視点方向として利用する場合はこんな感じ↓

```glsl:カメラの視点移動
vec3 cameraDir = normalize(vec3(m.x * 2.0 - 1.0, m.y, -1.0));
```

[実際に使っているサンプルはこちら](https://www.shadertoy.com/view/ltKcWc)


## Channelを使う

Shadertoyでコードを書く下には、下図のようにいくつかのチャンネルが用意されており、そこにCubeMapやバッファ、キーボード入力（を格納したバッファ）を設定しシェーダ内で利用することができるようになっています。

![20181006-120837.png](https://qiita-image-store.s3.amazonaws.com/0/5616/345c49b0-829c-8a43-6492-78bbce20ccd7.png)
（上の例では、Channel0にCubeMapを設定した状態）


## CubeMapを使う

上図のように、チャンネルにCubeMapを設定すると、それをシェーダから利用することができるようになります。
（内容を設定するには、クリックすると開かれるメニューから選択するだけです）

さて、ではこれを利用するコードを見てみます。

```glsl:CubeMap利用サンプル
 vec4 cubemap = texture(iChannel0, direction);
```

`iChannel0`は定義済みの値で、上の図の各チャンネル番号ごとに変数が用意されています。
チャンネルの利用には、独自で定義されている`texture`関数を通して利用します。
（通常の`texture2D`などは使えないので注意が必要です）

[実際に使っているサンプルはこちら](https://www.shadertoy.com/view/Ml3fRr)
LinuxのFW（iptables）

#現状の設定確認
 # iptables -L 

OUTPUTチェイン、INPUTチェイン、FOWORDチェインに分かれる

INPUT
入力（受信）に対するチェイン 

OUTPUT
出力（送信）に対するチェイン 

FORWARD
フォアード（転送）に対するチェイン 

PREROUTING
受信時に宛先アドレスを変換するチェイン。タイミングとしてはfilterで適用されるルールより手前 

POSTROUTING
送信時に送信元アドレスを変換するチェイン。これもfilterの後でパケットが送信される直前 


■追加
【iptables -I OUTPUT {行番号} -d {宛先IP/サブネットマスク} -p {プロトコル} -m {モジュール} --sport {ポート番号} --dport {ポート番号} -j ACCEPT】

■確認
iptables -L -n --line-number
【個人的備忘録】 Eclipseによる　javafxのVBox・setOnActionの効果など

```
◎サンプルコード
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Sample extends Application {
    public void start(Stage stage){
            stage.setWidth(500);    //横幅を指定
            stage.setHeight(500);    //高さを指定
            
            Button button1 = new Button("A");    //button属性をつける
            Button button2 = new Button("B");
            Button button3 = new Button("C");
            Button button4 = new Button("D");
            button1.setOnAction(event -> System.out.println("OK!"));    //setOnActionでイベント処理を出力させる
            button2.setOnAction(event -> System.out.println("NICE!"));
            button3.setOnAction(event -> System.out.println("YES!"));
            button4.setOnAction(event -> System.out.println("Goodluck!"));
            
            
            VBox box = new VBox(5);
            box.getChildren().addAll(button1,button2,button3,button4);    //boxの中にbutton属性をいれて認識させる

            stage.setScene(new Scene(box));    //Sceneにboxを表示させる
            stage.show()    //画面を出力
            
        public static void main(String[] args) {
            launch();

```

実行するとこのように表示されます
![gazou.jpg](https://qiita-image-store.s3.amazonaws.com/0/234833/b2f3b8dd-a62f-6133-7773-96969fab9210.jpeg)
上から順番にクリックするとイベント処理が出力されています
![gazou2.jpg](https://qiita-image-store.s3.amazonaws.com/0/234833/2772e644-33c6-ef0b-bb39-cb8b2e57b90c.jpeg)
Angularのバージョンアップ（v5 => v6）でハマったところ

Angularをv5からv6にアップデートした際に、開発環境でビルドしてるときは正常に動作していたが、一部コンポーネントでプロダクションビルドを行うと表示されないということがあって、かなりハマった。。

環境とかコードの書き方に問題があったのかもしれないが、プロダクションビルドする際に、内部的に必要なコードがTree Shakingの対象になっていたことが原因だったみたい。

Build Optimizerを使う場合、`vendorChunk=false` だと `vendor.js` は `main.js` に統合されて、未使用のコードはよしなに削除されてるようで、それに伴い、内部的に必要なコードがTree Shakingの対象になりコンポーネントが表示されないことがある。


`angular.json` で `vendorChunk=true` にし、 `vendor.js` を読み込むと解決した。

```json
"configurations": {
  "development": {
    "optimization": false,
    "outputHashing": "none",
    "sourceMap": true,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": false,
    "vendorChunk": true, ←これをtrueにするとvendor.jsが出力されるようになる
    "buildOptimizer": false
  },
  "production": {
    "optimization": true,
    "outputHashing": "none",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": false,
    "vendorChunk": true, ←これをtrueにするとvendor.jsが出力されるようになる
    "buildOptimizer": true,
    "fileReplacements": [
      {
        "replace": "path/to/environment.ts",
        "with": "path/to/environment.prod.ts"
      }
    ]
  }
  ...
```
Observableのsubscribeを停止する

view側で `async pipe` を通してできた実態を参照できないときに、`Observable` を `subscribe` する必要があったので、その時のことをメモ。


`Observable` の実態を `async pipe` を通して実態を参照するやり方をしていたが、それができない時にJS側で `subscribe` する必要があった。

```html:qiita.html
<ng-container *ngIf="users$ | async as users">
  <ng-container *ngFor="let user of users.userInformation; let i = index">
    ...
  </ng-container>
</ng-container>
```

`subscribe` すると、画面遷移しても `subscribe` が残り続けてしまっていたので、Angularがディレクティブ/コンポーネントを破壊する直前に、 `unsubscribe` した。


```typescript:qiita.ts
import { Component, OnDestroy } from '@angular/core';
import { ActivatedRoute } from "@angular/router";
import { Observable, Subscription } from 'rxjs';
import { UsersStateService, IUsers } from "../../states/users-state.service";

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnDestroy {
  // ① Subscriptionをインスタンス化
  public subscription = new Subscription();
  public users$: Observable<IUsers>;

  constructor(
    public usersState: UsersStateService
    private route: ActivatedRoute
  ) {
    this.queryParams = this.route.snapshot.queryParams;

    this.usersState.fetch();

    // ② subscribeするときに、subscribeの返り値のSubscriptionをadd()しておく
    this.subscription.add(this.users$.subscribe((user) => {
      if (user) {
        this.user = user.userInformations.find((user) => {
          return user.userId === parseInt(this.queryParams.userId, 10);
        });
      }
    }));
  }

  public ngOnDestroy(): void {
    // ③ Componentが破棄されるタイミングで、subscriptionを全てunsubscribeする
    this.subscription.unsubscribe();
  }
}

```
PyCharmでDjangoをデバッグ実行する方法

# やりたいこと
PyCharmでDjangoフレームワークで開発しているときに「python manage.py runserver」した状態でデバッグしたい。
何もせずデバッグ実行すると開いているファイルが実行されてしまうが，以下の設定をすればrunserver状態でデバッグできる。

初歩的な内容だが，Django初心者で周りにも聞ける人がいなかったため結構調べた・・・。

#  Run/Debug設定を追加
##　設定画面を開く
メニュー> Run > Edit Configurations..　を選択。

##　設定の追加
「＋」ボタンからPythonを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/299568/f52742ab-c829-aaff-c9bb-29e6ffac738b.png)

## 設定内容を記入

以下のとおり設定し，「Apply」する。

- Name：設定の名称
- Script Path：manage.pyファイルを選択する
- Parameters："runserver"と記入
![image.png](https://qiita-image-store.s3.amazonaws.com/0/299568/c6565a92-aeaa-fc9b-8b34-2a8d5c882c56.png)

# デバッグ実行を開始する
## 追加した設定を使ってDebug実行する
以下手順を行うとデバッグ実行が開始される。

1. メニュー> Run > Debug　を選択。
2. Run/Debug設定の一覧がダイアログで表示されるので，追加した設定を選択する。
Macで仮想デスクトップ切り替え時のアニメーションを抑える

## 視差効果を減らす設定
MacOSで複数の仮想デスクトップを表示して、切り替えをする時にスライドするアニメーションが入ると酔うのでその場合は、

システム環境設定 > アクセシビリティ > ディスプレイ > 視差効果を減らす

にチェックを入れるとアニメーションがフェードになり個人的には見やすくなる

[追記]
Gif画像付きでわかりやすく解説してくれているので、下記も参考
[Mission Controlのデスクトップ切り替えのスライドアニメーションがうるさいときは「視差効果を減らす」をオンにするとフェードアニメーションになるよ](https://qiita.com/suin/items/74ddd4de450ffc3cdc1f)
Jupyter Labのフォントを変更する

# TL;DR
　メニューバーの`Setting`>`Adbanced Setting Editor`>`Raw View`>`Notebook`>`User Overrides`をこんな風に書きましょう．

```json
{
    "codeCellConfig": {
        "fontFamily": "Ricty Diminished",
        "fontSize": 16
    }
}
```

`fontFamily`や`fontSize`のvalueはお好みで．
Docker v18.03以降でコンテナからホストに接続したい(Docker for Windows)

# これを使う

`host.docker.internal`を使う。

## 使い方具体例

PHP+ApacheをDockerで建てて、ホストのエディタ兼デバッガにデバッグ情報を送信するときの設定。

```ini:php.ini
; Enable xdebug extension module
zend_extension=xdebug.so

xdebug.remote_enable=true
xdebug.remote_autostart=1
;xdebug.remote_connect_back=1
xdebug.remote_host=host.docker.internal  <-- これ
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.profiler_enable=0
xdebug.profiler_output_dir="/var/log/php_prof"
```

# 参考文献

## 公式文書

以下から抜粋。
https://docs.docker.com/docker-for-windows/networking/#use-cases-and-workarounds

> I WANT TO CONNECT FROM A CONTAINER TO A SERVICE ON THE HOST
The host has a changing IP address (or none if you have no network access). From 18.03 onwards our recommendation is to connect to the special DNS name host.docker.internal, which resolves to the internal IP address used by the host. This is for development purpose and will not work in a production environment outside of Docker for Windows.

## Google翻訳

> コンテナからホスト上のサービスに接続したい
ホストにはIPアドレスが変更されています（ネットワークにアクセスできない場合はありません）。18.03以降host.docker.internal、ホストが使用する内部IPアドレスに解決される特別なDNS名に接続することをお勧め します。これは開発目的のためであり、Docker for Windows以外の運用環境では動作しません。
文字コード変換 Linux Windows

文字コード色々調べて最終的にたどり着いたのは
`nkf`コマンド

[file name]に変換したいファイル名を入れる。
ここに[*]を入れると
カレントディレクトリ全てを変換できるのでとても便利でオススメ！

権限がなければ

```
Can't set permission xxx.txt
```
など出てきますが変換は完了していることがあったりします。

## Linux -> Windows
`$ nkf -sLw --overwrite [file name]`

```
$ cd test
$ nkf -sLw --overwrite *
```

## Windows -> Linux
`$ nkf -Lu -x -w80 --overwrite [file name]`

```
$ cd test
$ nkf -Lu -x -w80 --overwrite *
```
Dockerコンテナ一覧を表示し、任意のコンテナを起動する

## コンテナリストを表示する
### コマンド

```
$ docker ps -a
```

* -aオプションで停止しているコンテナも取得できる

### 結果

```
CONTAINER ID        IMAGE                      COMMAND                  CREATED             STATUS                    PORTS                               NAMES
e80a2e378dd0        redis                      "docker-entrypoint.s…"   4 days ago          Exited (255) 2 days ago   0.0.0.0:6379->6379/tcp              redis
c25d0803c172        handson/tutorial2:latest   "python index.py"        12 days ago         Exited (255) 2 days ago   0.0.0.0:8080->8080/tcp              tutorial2_application_1
```

## コンテナを起動する
```
$ docker start <CONTAINER ID> 
```
Jenkins Pipeline + Log Parser Pluginでエラー時にstageの処理を止める

Jenkins Pipeline + Log Parser Pluginで、そのstageでLog Parserで検出したエラー発生時に、次のstageに行かせず処理を止める方法。

jenkins: 2.138.1
log parser plugin: 2.0

下記の例の`/var/jenkins_home/work/step1_error.txt`では、

```
error /error:/
```
となっています。

```
node('test') {
  stage('step1') {
    sh 'echo error:' //実際にはココにビルド処理を書く
    step([$class: 'LogParserPublisher', failBuildOnError: true, parsingRulesPath: '/var/jenkins_home/work/step1_error.txt', useProjectRule: false])
    if ('FAILURE' == currentBuild.result) { throw "Error" }
  }
  stage('step2') {
    echo 'ok:'
    step([$class: 'LogParserPublisher', failBuildOnError: true, parsingRulesPath: '/var/jenkins_home/work/step2_error.txt', useProjectRule: false])
    if ('FAILURE' == currentBuild.result) { throw "Error" }
  }
}
```

上記を実行すると、こんな風に止まってくれる。
![2018-10-09_11h03_59.png](https://qiita-image-store.s3.amazonaws.com/0/20132/15532328-3490-f695-d32f-76868899b7ac.png)
.NETアプリのクラウド移行

<p>この投稿は東京渋谷ヒカリエ 8 階にある <a href="http://aka.ms/aajp" target="_blank">Azure Antenna</a> で実施された「.NETアプリのクラウド移行～Azure Service Fabricを丁寧に」で使われた資料のご案内です。</p>

- <strong>.NETアプリのクラウド移行</strong><br />
https://www.slideshare.net/KazuyukiNomura/netazure-service-fabric


<p>:satellite:&nbsp;&nbsp;新しいイベントの情報は、Connpass の <a href="http://aka.ms/aajp" target="_blank">Azure Antenna サイト</a>よりご確認いただけます。</p>

<p>:arrow_backward:&nbsp;<a href="https://qiita.com/AzureAntenna/items/71f394c100fbfa8ddcc8">「Azure Antenna 実施イベント資料（カテゴリ別）」に戻る</a></p>
Openstackの便利なプロジェクトたち

9月のOpenstackDaysで耳にしたり，調べていくと色々出てきた便利なプロジェクト群。
特によく聞いたものをピックアップしました。ここに挙げたもの以外にもいっぱいあります。
一覧はこちら<https://www.openstack.org/software/project-navigator/openstack-components#main-services>

# Ironic
OpenstackDaysでよく耳にしたもの。
Openstackでベアメタルも管理できるようにできるやつ。これ使えばベアメタルクラウドできそう。
https://github.com/openstack/ironic
 
# Heat
OpenstackDaysでよく耳にしたもの。その２。
Openstackの資源に対してyml書いてInfrastructure as Codeを実現するもの。AWSのCloudFormationに当たるもので，これとの互換性あるAPIも用意されているらしい。Kubernetesで言うdeploymnet.yml的なもの。
https://wiki.openstack.org/wiki/Heat

# Cinder
OpenstackDaysでよく耳にしたもの。その３。
OpenstackでSoftware-Defined Block Storage を実現してくれるもの。
https://wiki.openstack.org/wiki/Cinder

# Swift
OpenstackDaysでよく耳にしたもの。その４。
Openstackでオブジェクトストレージを実現してくれるソフトウェア。オブジェクト操作のためのREST APIを提供してくれる。オープンソース版S3。
https://wiki.openstack.org/wiki/Swift
https://knowledge.sakura.ad.jp/226/

# Magnum
Openstackでコンテナオーケストレーションツール（Kuebernetes, Docker Swarm）を「bay」という単位でデプロイ・管理できる。つまり複数立ててOpenstackで管理できる。（あれ，Cattle時代のRancherのようだ・・）
https://wiki.openstack.org/wiki/Magnum
https://ameblo.jp/principia-ca/entry-12071866495.html

# Zun
OpenstackでDockerコンテナ環境を管理できる。Openstackの各コンポーネント（GlanceやNeutronなど）と結合して使えるのが特徴。例えばGlanceがコンテナイメージレジストリとして利用できる。
https://wiki.openstack.org/wiki/Zun
よく使うGitコマンドまとめ

Gitを使うときによく使うコマンドをまとめました。

## ファイルの追加
#### ディレクトリ内のすべての変更ファイル/新規ファイルを追加
```
git add .
```
差分ファイルを全部ステージに移動したい時はこれ。

#### 対話形式で処理
```
git add -i
```

一部のファイルだけ選んでステージに移動したい場合などに便利。

## 取り消し
#### ステージング前の変更の取り消し
```
git checkout .
```
add する前であれば、一括で修正を無かったことにできる。

#### 差分はそのままでコミットだけを取り消す（差分はステージに残る）
```
git reset --soft HEAD~1
```
コミットログを間違えた時によく使う。（HEAD~1 で1コミット分）

#### コミットしたことを取り消す
```
git reset --hard HEAD~1
```
コミットした内容が履歴から消えるので注意。

## ブランチ
#### ブランチ一覧の表示
```
git branch
```
#### 今いるブランチの名前をブランチ【issueABC】に変更する
```
git branch -m issueABC
```
#### ブランチ【issueB】の名前をブランチ【issueC】に変更する
```
git branch -m issueB issueC
```
#### ブランチを【issueA】に切り替える
```
git checkout issueA
```
#### ブランチ【issueA】を削除
```
git branch -D issueA
```

#### ブランチを一括削除
```
git branch | grep (文字列) | xargs git branch -d
```

#### リモートブランチを見る
```
git branch -r
```
#### リモートブランチの【issueA】を削除
```
git push origin :issueA
```

## チェックアウト
#### リモートブランチの【issueA】を【issueA_local】としてチェックアウト（ローカルのブランチもissueA_localに変更）
```
git checkout -b issueA_local origin/issueA
```


## プッシュ
#### pushのドライラン
```
git push -n origin issueA
```

pushする前に必ず実施する。ブランチ名とハッシュ値の確認をすることでpushの誤送信が減る。

## ファイルのマージ
#### 今いるブランチにブランチissueAの内容(複数のコミット)を1つにまとめてステージング
```
git merge --squash issueA
```
ローカルで散々思考錯誤（コミット）したあとに、何事もなかったかのように1コミットとしてログが残せる。

## コミット前のファイルを一時退避
#### stashに一時退避する
```
git stash
```
#### 一時退避する際に名前を付ける
```
git stash save "名前"
```
#### stashの一覧を見る
```
git stash list
```
#### 指定したstashの内容を取り込んだあと、stashを**削除する**
```
git stash pop stash@{番号}
```
#### 指定したstashの内容を取り込んだあと、stashを**残したままにする**
```
git stash apply stash@{番号}
```

## コミット
#### コマンドの引数でコミットコメントを書く
```
git commit -m "コメント"
```
コミットログをエディタを開かなくても記載できる。


## コミットを消してしまった時
#### これまでHEADが辿ってきた履歴を見る（「git reset HARD」で消してもログが残っている）
```
git reflog
```
対象のコミットを見つけて、「git checkout ハッシュ値」で取ってこれるので、救出できる可能性大。
C言語でバブルソート

# バブルソートとは
隣と比べて、逆順なら入れ替える。

隣接する2項を比較し、$a_{i-1} < a_i$となるように、右から左に操作（入れ替え）する。この場合、最左端が最小値となる。

# サンプルコード

ここでは、int型の配列を、バブルソートを用いて小さい順に並べ替える。

```c:bubble_sort.c
#include<stdio.h>

/* 値を入れ替える関数 */
void swap (int *x, int *y) {
  int temp;    // 値を一時保存する変数

  temp = *x;
  *x = *y;
  *y = temp;
}

/* バブルソート */
void bubble_sort (int array[], int array_size) {
  int i, j;

  for (i = 0; i < array_size - 1; i++){
    for (j = array_size - 1; j >= i + 1; j--){   //　右から左に操作
      if (array[j] < array[j-1]) { swap(&array[j], &array[j-1]); }
    }
  }
}

int main (void) {
  int array[10] = { 2, 1, 8, 5, 4, 7, 9, 0, 6, 3 };
  int i;

  printf("Before sort: ");
  for (i = 0; i < 10; i++) { printf("%d ", array[i]); }
  printf("\n");

  bubble_sort(array, 10);

  printf("After sort: ");
  for (i = 0; i < 10; i++) { printf("%d ", array[i]); }
  printf("\n");

  return 0;
}
```

実行結果

```
Before sort: 2 1 8 5 4 7 9 0 6 3
After sort: 0 1 2 3 4 5 6 7 8 9
```

# 性能

- 比較回数
  - $i=0,1,\cdots,n-1$のそれぞれについて、$j=i+1,i+2,\cdots,n$の$n-1$回の比較を行う。
  - 比較回数は$\sum^{n-1}_{i=0}{(n-1)}=n(n-1)/2\to O(n^2)$
- 交換回数
  - 最良の場合：0回
  - 最悪の場合：$n(n-1)/2$回$\to O(n^2)$