OmniAICreator/Qiita-1.07M huggingface dataset:
大きなサイズのjsonファイルを分割して保存する

やりたいこと
===
　大きなサイズのjsonファイルをjsonモジュールで読むと処理にかなり時間がかかる。
　ijsonモジュールを使うと大きなサイズのjsonファイルが一部ずつ読める。しかし、これらの中から検索を行うのは時間がかかる。
　そこで、もともとのjsonファイルに含まれている要素単位で、jsonファイルを分割したい。
　分割後のファイルはjsonモジュールで読み込めるようにしたい。

前提となるjsonファイルの構成
---
以下のファイル(test.json)を前提とする。hoge1の要素はarrayである。arrayに含まれている各objectの構造は同一である。

```json
{"hoge1":
  [
　　{"hoge2":
    　{"hoge3":[{"hoge4":"fuga1","hoge6":true},{"hoge8":"fuga3"}]
   　},
    　"hoge10":"fuga4"
  　},
  　{"hoge2":
    　{"hoge3":[{"hoge4":"fuga5","hoge6":false},{"hoge8":null}]
   　},
    　"hoge10":"fuga8"
  　}
　]
}
```

書いたコード
---

```py
import ijson

def save_as_json(string, item,file_path):
    with open(file_path,"w") as f:
        f.write('{"%s": %s}' % (string,str(item).replace("'",'"').replace("True",'true').replace("False",'false').replace("None",'null')))

with open("test.json","r") as j:
    items = ijson.items(j,"hoge1.item.hoge2")
    i=1
    for item in items:
        json_file = "%s.json" % i
        save_as_json("hoge2",item,json_file)
        i += 1
```

コードの意図
---

ijson.itemsの第2引数にドット区切りで名前を羅列すると、その名前で特定される値を取得することができる。arrayについては該当する位置にitemと入れれば、リストで取得できる。

```py
ijson.items(j, "hoge1.item.hoge2")
```

上記で各hoge2の値をリストで取得できる。

```py
f.write({"%s": %s} % (string,...)) 
```

ファイルに書き込む形式をjson形式とするため、{ "": }という形式とした。

値については、str(item)で文字列化した。ただ、文字列がシングルクォーテーションでくくられているため、
replace("'",'"')でダブルクォーテーションに変換した。また、jsonのtrue、false、nullは、str(item)の際にTrue,False,Noneとなってしまうため、replace("True",'true').replace("False",'false').replace("None",'null')で強引に変換した。（意図しない変換を防ぐためにはもう少し丁寧な変換をした方がよいかも）

結果
---

できたファイルのうち1.jsonファイルをjsonモジュールで読み込めるかを試してみた。

```py
import json
with open("1.json","r") as nj:
    item = json.load(nj)
    print(item)
```

以下の通り出力されたので、ちゃんと読めているっぽい。

```json
{'hoge2': {'hoge3': [{'hoge4': 'fuga1', 'hoge6': True}, {'hoge8': 'fuga3'}]}}
```

備考
---
保存ファイル名、ディレクトリ名などをそれぞれの値と関連付ければ、（例えば、fuga1/fuga3.jsonのようにすれば、検索が容易になると思われる。
【Ruby on Rails】&.でnil落ち回避。アンドじゃなくてアンパサンドだよ

Rails触ってたら、このエラーをよくみませんかね？

```rb
[5] pry(main)> users = nil
=> nil
[6] pry(main)> users.find(1)
NoMethodError: undefined method `find' for nil:NilClass
from (pry):6:in `<main>'
```
nilに対して何かしらのメソッド、今回はfindを使い

```
for nil:NilClass
```

とでました。
ようは、nilにはこのメソッド使えませんよ！ってこと。

そもそもnilが入る可能性の部分にfind使うなって話なんですが、どうしても避けれない時はどうすれば・・・・。

ってときにこの&を使う！！！これが強烈なんですよね！

さっそく使いましょう。(rubyのversionが2.3以降の模様)

```rb
[6] pry(main)> users.find(1)
NoMethodError: undefined method `find' for nil:NilClass
from (pry):6:in `<main>'
[7] pry(main)> users&.find(1)
=> nil
```

おお！エラーがでることなく、戻り値がnilになりました。
これは便利ですね。
mapにも使えた！

```rb
[8] pry(main)> users&.map{|user| user.id == 1}
=> nil
```



ってかさ、これの読み方よ。これ&！！

いや、アンドって読むでしょ普通。
&の読み方知ってましたか？

&、アンパサンドって読むらしいです。

こっちの方が個人的には衝撃ですね。

おわり
【Java】 環境構築

#目的#

これからJavaの学習環境を自宅で整えるために環境構築したい。

#課題#

Atomエディタを使い、コードを記述。コンパイルをして、Hello Java　という文字列を表示させたい。

#記録#

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3235333833322f66306237393237382d373632372d373930642d336263302d3665333934363564636334642e706e67.png](https://qiita-image-store.s3.amazonaws.com/0/253832/21a16e37-38bb-ded3-1de8-6b08d437400b.png)
画像はコンパイルできている画像ですが、いろいろとエラーが出ました。

##1.Atomエディタで、コード記述後、「HelloJava.java」 というファイルを保存。##

##2.コマンドプロンプトを起動##

##3．「javac HelloJava.java」と入力##

![image.png](https://qiita-image-store.s3.amazonaws.com/0/253832/bb82339f-a6b5-50cc-b3ce-d07ba7ad8693.png)


というエラーが

どうやら住所らしきものを入力しないと探せないらしい。色々調べたら、、、

**cd** ディレクトリ名（住所みたいなもの）を最初に入力する必要性があるようです。

##4.「cd」と入力。「HelloJava.java」のファイルをドラッグして、後ろのファイル名を消してENTER！##
![image.png](https://qiita-image-store.s3.amazonaws.com/0/253832/64869744-a9db-c65c-2791-1517dd7580d8.png)

おーー！なんか変わりました。

##5.「javac HelloJava.java」と入力、コンパイル。##
![image.png](https://qiita-image-store.s3.amazonaws.com/0/253832/bc305ea2-0058-1864-448b-e8b32d9f8563.png)

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3235333833322f30636236666334632d363633312d353432332d363065362d3535633064633330393236312e706e67.png](https://qiita-image-store.s3.amazonaws.com/0/253832/7f60b524-5cc9-fc50-e72f-5a03cd1f46c2.png)

フォルダ内に、HelloJava.class　というファイルが出来ました。




##6.java HelloJavaと入力すると、HelloJava　と表示されました。##

![image.png](https://qiita-image-store.s3.amazonaws.com/0/253832/bf8fad82-33f5-eef1-d079-801c9ea56c75.png)

画像は途中入力ミスで"iava"と打ってしまいました。

#まとめ#

・コーディングからコンパイル、出力までできた。

・環境構築できた。
geometry > python > shapelyとsympyのintersection処理時間の比較 > ほぼ同じ (12.7ns)

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 16.04.4 LTS desktop amd64
TensorFlow v1.7.0
cuDNN v5.1 for Linux
CUDA v8.0
Python 3.5.2
IPython 6.0.0 -- An enhanced Interactive Python.
gcc (Ubuntu 5.4.0-6ubuntu1~16.04.4) 5.4.0 20160609
GNU bash, version 4.3.48(1)-release (x86_64-pc-linux-gnu)
scipy v0.19.1
geopandas v0.3.0
MATLAB R2017b (Home Edition)
ADDA v.1.3b6
gnustep-gui-runtime v0.24.0-3.1
PyMieScatt v1.7.0
```

線分の交差判定を使う処理を実装している。

- sympy実装: [geometry > star shape(星形)の内部をdipoleでfillする > findDipolesInisideStarShape_180429 v0.1 > sympy使用 > 3分かかる (MESH_RESOL=20)](https://qiita.com/7of9/items/f126f9e964086082abfb)
- shapely実装: [geometry > star shape(星形)の内部をdipoleでfillする > findDipolesInisideStarShape_180429 v0.2 > shapely使用 > 1秒で完了 (MESH_RESOL=50)](https://qiita.com/7of9/items/ee6023132d96ce30852e)

sympyで3分かかった処理はshapelyで1秒未満だった。

intersection処理速度が違うのだろうか。

### 速度比較

#### sympy

```py:test_speed_symp_180429.ipynb
from sympy import *

def test_func():
   sg1,sg2 = Segment( Point(0,0), Point(1,1)),Segment( Point(0,1), Point(1,0))
   ls = intersection(sg1,sg2)
   print(ls)

   ls = intersection(sg1,sg2)[0]
   print(ls,ls.x,ls.y)

   sg1,sg2 = Segment( Point(0,0), Point(0.3,0.3)), Segment( Point(0,1), Point(1,0))
   ls = intersection(sg1,sg2)
   print(ls)
    
    
%timeit test_func

```

```txt:run
12.7 ns ± 0.021 ns per loop (mean ± std. dev. of 7 runs, 100000000 loops each)
```

#### shapely

```py:test_speed_symp_180429.ipynb
from shapely.geometry import LineString

def test_func():
    sg1 = LineString([(0, 0), (1, 1)])
    sg2 = LineString([(0, 1), (1, 0)])
    ls = sg1.intersection(sg2)
    print(ls)

    sg1 = LineString([(0, 0), (0.3, 0.3)])
    sg2 = LineString([(0, 1), (1, 0)])
    ls = sg1.intersection(sg2)
    print(ls)
    
%timeit test_func
```

```txt:run
12.8 ns ± 0.112 ns per loop (mean ± std. dev. of 7 runs, 100000000 loops each)
```

### 考察

両者の処理速度に大きな違いは見られなかった。

sympy使用時に３分でshapely使用時に1秒の違いが生じる理由については未消化。
pugにおける半角の制御

pug で長文の日本語を書く場合、半角を制御するために冗長な記法になることがあります。

## 半角が含まれるケース

```pug
p.
  これは改行と改行の間に、
  半角スペースが含まれます。
  句点の前後にもです。
```

```pug
p
  | これは改行と改行の間に、
  | 半角スペースが含まれます。
  | 句点の前後にもです。
```

この記述は改行の間に半角スペースが含まれる、つまり以下のような出力になります。

```html
<p>これは改行と改行の間に、 半角スペースが含まれます。 句点の前後にもです。</p>
```

英語圏のことを考えるとこの処理に違和感はないのですが、日本語だと句読点のあとに半角スペースが含まれてしまうのは雑な印象を受けるので避けたいはず。

### 解決策

```pug
p これは改行と改行の間に、半角スペースが含まれます。句点の前後にもです。
```

この問題の解決策としては改行に含まれる半角スペースを削除し、単純に改行をしなければいいだけです。

ただ基本的に問題のようなことをする場合には、明らかに長いパラグラフを自分の意志で改行制御できない場合に発生しがちで、これを解決策としてしまうのは強引ではあるように思えるのですが、まともな解決策がおそらくこれしかありません。[Filters](https://pugjs.org/language/filters.html) で Markdown を使った記述にすることでも解決できないこともないですが、解決策としてはどっちもどっちのような気がします。


## 半角が含まれないケース

```pug
p
  | これは改行と改行の間に、
  strong 半角スペースが含まれます。
  | 句点の前後にもです。
```

上記のように要素が挟まっているとその間には半角スペースは生成されません。これはもちろん `br` を含みます。

ただ逆にこのケースで問題になるのは半角スペースを挿入したい場合です。 

### 解決策

```pug
p
  | これは改行と改行の間に、
  |
  strong 半角スペースが含まれます。
  |
  | 句点の前後にもです。
```

半角スペースが含まれるケースで発生した問題を逆手に取って解決することができます。あるいは以下のように [Tag Interpolation](https://pugjs.org/language/interpolation.html#tag-interpolation) で前後に半角スペースを入れてしまうのも手です。

```pug
p これは改行と改行の間に、 #[strong 半角スペースが含まれます。] 句点の前後にもです。
```

## 参考

- [Plain Text - Pug](https://pugjs.org/language/plain-text.html)
Python reモジュール　基本の使い方まとめ

#reモジュール基礎知識
毎回調べるのでこの際まとめました。
## matchとsearchの違い
- match  
文字列の先頭から一致するものだけ
- search  
途中から一致するものも対象(こっちの方がよく使う)

## subとreplaceの違い
subはreモジュールの一部、replaceはpythonの文字列変換の基本機能
### sub  
正規表現で置換する際に使用
re.sub("<font color=blue>置換対象の文字列(正規表現)</font>","<font color=red>置換後の文字列</font>",<font color=green>置換対象のstr変数</font>)  


```python:
Moji="abc"
Henkan=re.sub("[ab]","d",Moji)

>>> Henkan
'ddc'
```

### replace
<font color=green>置換対象のstr変数</font>.replace("<font color=blue>置換対象の文字列(正規表現)</font>","<font color=red>置換後の文字列</font>")  

```python:
Moji = "Python"
Henkan = Moji.replace("P","p")

>>> Henkan
'python'
```


# 正規表現基礎知識
|正規表現|意味|
|---|---|
|\w|英数字|
|[a-zA-Z]|英字*|
|\d|数字|
|\D|非英数字|
*pythonでは\lを使った英字のみの正規表現は使えないっぽい

## 正規表現繰り返し
### *
(前の文字の0回以上繰り返し)
pattern = "a*"
`matchするもの`　= "", "a", "aaaaaaa"
### +
(前の文字の0回以上繰り返し)
pattern = "a+"
`matchするもの`　= "a", "aaaaaaa"
### {m}
(前の文字のm回繰り返し)
pattern = "a{4}"
`matchするもの`　= "aaaa"
### {m,n}
(前の文字のm~n回繰り返し)
pattern = "a{2,4}"
`matchするもの`　= "aa","aaa","aaaa"


## patternとgroup1
pattern: 抜き出したい英数字を正規表現で含む文字列
group(0): マッチした文章まるごと
group(n): n番目にマッチしたグループ(複数グループがある場合のみ)

```python:
message = "I have 20 dogs and 30 cats."
pattern = "I have (\d+) dogs and (\d+) cats."
match = re.search(pattern,message)

>>> match.group(0)
'I have 20 dogs and 30 cats.'
>>> match.group(1)
'20'
>>> match.group(2)
'30'
```
# patternとgroup2


match = re.search('(?<=<font color = red>この文字列以降から抽出</font>)<font color = blue>欲しい部分を正規表現で指定</font>',<font color=green>検索対象の文字列</font>)
#### 例)大根の値段のみを抽出したい

```python:
match = re.search('(?<=daikon )\d+','daikon 100yen') 
price = match.group(0) 

>>> price
100
```
python 2.7, 3.6 にQt for Python（旧pyside2）をインストール

自分用のメモです。

* まずpython2.7もしくは、 3.6 共に64bit版をインストール
    * Widows版Pyside2は64bit版しかないもよう。。。
* pythonのバージョンを複数入れている場合は、Pyside2をインストールしたいバージョンのフォルダに移動し、以下のコマンドを実行します(embedバージョンにもこの方法でOK)
    * python.eye -m pip install --index-url=http://download.qt.io/snapshots/ci/pyside/5.9/latest/ pyside2 --trusted-host download.qt.io
    * 下のエラーメッセージが出たら、"python -m pip install --upgrade pip"と入力しpipのバージョンを上げる
        * You are using pip version 9.0.3, however version 10.0.1 is available.
* pipのバージョンアップが完了したら、もう一度pyside2インストールのコマンドを入力し、終了

**参考サイト**
公式サイト
* https://wiki.qt.io/Qt_for_Python_GettingStarted
WordPressのローカル開発環境をMAMPで構築したときのメモ

## MAMPとWordPressをダウンロード
[MAMP公式サイト](https://www.mamp.info)
[WordPress公式サイト](https://ja.wordpress.org/)

## MAMPにWordPressを設置
ダウンロードしたWordPressのフォルダの中身を```/Applications/MAMP/htdocs```へ置く。

## データベースを作成
データベースの作成は```localhost:8888/phpmyadmin```へアクセスして行う。

## WordPressをインストール
WordPressのインストールは```localhost:8888```へアクセスして行う。
データベース名には、先ほど作成したデータベースの名前を入力する。

### 参考
以下の記事を参考にさせていただきました。ありがとうございます。
[WordPressのローカル開発環境をMAMPでMacに構築する方法](https://yosiakatsuki.net/blog/dev-mamp/)
Xtion2 のデプス情報をUnity で使う

最近Unity はゲーム以外でも使用され始め、株式会社プレースホルダでも子供向けテーマパークをUnity で開発しています。プロジェクタと様々なセンサを使って楽しいインタラクティブコンテンツを企画・開発中です。今回は、初投稿として、Asus のXtion2 というデプスカメラのデプス情報をUnity から読み込みプラグインについてまとめました。

# 対象
* Unity、C# にある程度経験がある方（中級者以上？）
* 「あればなお良い」C++ の経験

# 必要な開発環境
* Windows 10
* Visual Studio 2017
* OpenNI2 For Xtion2 SDK

# 事前確認
* アーキテクチャはすべて合わせる必要があります。Windows とUnity がx64である場合、SDK もx64版を使います。

# 手順
* OpenNI2 をインストールします。SDK のパッケージを[ここから](https://www.asus.com/3D-Sensor/Xtion-2/HelpDesk_Download/)ダウンロードできます。
* この記事では、OpenNI2 SDKのインストール先を {OPENNI_INSTALL_PATH} とします。
* {OPENNI_INSTALL_PATH}/Lib 内に OpenNI2.lib ができていること、{OPENNI_INSTALL_PATH}/Samples/Bin 内にサンプルのバイナリがビルドされ、実行できていることを確認します。
* ネーティブプラグインのコードは[こちらから](https://github.com/sonnyky/XtionUtil)ダウンロードできます。
* Cmakelist.txt にあるライブラリのパス設定を適宜編集して、[Cmake](https://cmake.org/)でビルドします。
* CMake が問題なく通ったら、buildフォルダにVisual Studio のソリューションファイルができます。
* この sln ファイルを開いて、プロジェクトをビルドします。
* ビルドが成功したらDebugかReleaseフォルダにXtionCapture.dll が生成されます。
* このDLL をUnity のPluginsフォルダにコピーします。
* OpenNIの再配布DLL も一緒にコピーします。OpenNIのDLL は{OPENNI_INSTALL_PATH}/Redist にあります。
* 今後少しまとめて使い方について記載しますが、とりあえず[こちら](https://github.com/sonnyky/WindowsNativePlugin)のUnityプロジェクトを参考にお使いください。Scene 内にあるXtionInterface.cs がコアのスクリプトです。

# 構造の概要
![カメラのネーティブプラグイン.jpg](https://qiita-image-store.s3.amazonaws.com/0/251612/bb30ce20-cd48-d747-ef66-929f03447ae2.jpeg)

1．DLL のネーティブインタフェース使って、デバイスと通信するキャプチャオブジェクトを生成します。xtion_capture オブジェクトのメンバーとしてデバイスのメモリアドレスを登録します。また、このxtion_capture オブジェクトのポインタをUnity に返します。
2．xtion_capture へのポインタを取得したあと、xtion_capture が用意しているメソッドをUnity から呼び出すことができます。現在はデプス情報の取得、デバイスの終了まで実装してあります。

# 今後の展開
今回はデプス情報のみ実装しましたが、カラー映像の取得もやってみたいと思います。Unity にカラー映像を取得するメリットはあまりなさそうですが。

この記事の手順に従ってやってもうまくいかない場合は気軽にコメント残していただければと思います。
Gitの設定ファイルの種類について

```shell
$ git config --system
```
全てのユーザと全てのリポジトリに対する設定。 `/etc/gitconfig`

```shell
$ git config --global
```
特定のユーザに対する設定。`~/.gitconfig` or `~/.config/git/config`

```shell
$ vim <repo>/.git/config
```
そのリポジトリに対する設定。
transform:skew()でひし形を作る方法

「CSSでひし形を作る方法」を探すと、正方形を45度回転させる例ばかり見つかって「正方形を回したのがひし形？？？」と思った人へ。

`transform:skew()`をどうぞ。

## transform:skew()で作るひし形

`skew()`には`(90deg - 欲しい角度) / 2`を与えます。

- ブロックレベル要素は元から内角90degの長方形なので、90degからの差分を指定します。
- X軸方向・Y軸方向の両方で傾けるので、それぞれに指定する角度は1/2になります。

```html:transform:skew()で作るひし形
<div class="diamond"></div>

<style>
  .diamond {
    display: block;
    width: 5rem;
    height: 5rem;
    background: gray;

    transform:
      skew(
        calc((90deg - 30deg) / 2),
        calc((90deg - 30deg) / 2)
      ); /* calc((90deg - 欲しい角度) / 2) */
  }
</style>
```

![transform:skew()で作るひし形](https://qiita-image-store.s3.amazonaws.com/0/2077/1d5e444b-322c-9c37-f43b-eca8211ff267.png)



## 作ったひし形を回転させる

向きを変えるときは、傾ける前にrotate()すると良いようです。（ノウハウ）

```html:作ったひし形を回転させる
<div class="diamond"></div>

<style>
  .diamond {
    display: block;
    width: 5rem;
    height: 5rem;
    background: gray;

    transform:
      rotate(45deg)
      skew(
        calc((90deg - 30deg) / 2),
        calc((90deg - 30deg) / 2)
      ); /* calc((90deg - 欲しい角度) / 2) */
  }
</style>
```

![作ったひし形を回転させる](https://qiita-image-store.s3.amazonaws.com/0/2077/dc8571cf-4b1f-4422-12ba-bccc59db4ada.png)
(Mac) 作成したユーザからのsuを許可する

(mac OS Sierra 10.13.3)

独自にユーザを作成したあと、そのユーザからsuするとsorry と言われてしまいました。

```terminal

postgres ~ $ su
Password:
su: Sorry
postgres ~ $ 
```

「mac su できない」とか「mac su: sorry」とかで検索すると「rootユーザのパスワードが設定されていないから」「sudo で 一度 passwd root !」といった記事は結構ヒットしますが今回はrootはすでに有効にしていて、デフォのユーザからはログインできるようになっているので、参考にならない。

```terminal

moroken ~ $ su -
Password:
~ # 
```

ということで、今回ちょっと調べたので、備忘的に残しておきます。(Macに縛らずLinuxで調べると色々でてきます)

su 関連の設定は

```
/etc/pam.d/su
```
というファイルで扱っているようです。中身はこんな感じ

```
# su: auth account session
auth       sufficient     pam_rootok.so 
auth       required       pam_opendirectory.so
account    required       pam_group.so no_warn group=admin,wheel ruser root_only fail_safe
account    required       pam_opendirectory.so no_check_shell
password   required       pam_opendirectory.so
session    required       pam_launchd.so
```

この中の以下をコメントアウトすることで、作成したユーザでも su できるようになりました。とくに再起動やターミナルに入りなおす必要もなかったです。

```
# su: auth account session
auth       sufficient     pam_rootok.so
auth       required       pam_opendirectory.so
#account    required       pam_group.so no_warn group=admin,wheel ruser root_only fail_safe
account    required       pam_opendirectory.so no_check_shell
password   required       pam_opendirectory.so
session    required       pam_launchd.so                     
```

```terminal

postgres ~ $ 
postgres ~ $ su
Password:
root postgres # 
root postgres # exit
exit
postgres ~ $ su -
Password:
~ # 
```

権限周りしっかりやるにはこのあたりのグループに加えてあげる等が必要だと思いますが、検証用のPCで今後もユーザ作る可能性あるので、これくらいにしておきます。

/etc/pam.d/su の他の箇所をコメントアウトすると、今までsu できていたユーザもできなくなったりするので、作業前にはcopyしておくことをおすすめします。
【入門】Angular QuickStart Step3 に沿ってアプリケーションをサーブしてみる 

今回は
[【入門】Angular QuickStart Step2 に沿って 新規プロジェクトを作成してみる](https://qiita.com/tanuki0143/items/17af383261afad8f0aa3)
に 続けて

[クイックスタート](https://angular.jp/guide/quickstart)

の Step 3: アプリケーションをサーブする を 実施して行きます。

** Step 3: アプリケーションをサーブする
Step2で すでに my-appに移動しているのでカレントディレクトリを確認して実行

```console
$ pwd
/Users/＊＊＊＊＊＊＊/angular/my-app
$ ng server --open
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 11% building modules 9/9 modules 0 aDate: 2018-04-29T02:16:36.131Z           a Hash: 409b18273aa90b0fcf7c                    
Time: 11639ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 17.9 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 554 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 41.5 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 7.43 MB [initial] [rendered]

webpack: Compiled successfully.
```
>** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
指示通り ブラウザで http://localhost:4200/ を開く

![スクリーンショット 2018-04-29 11.52.06.png](https://qiita-image-store.s3.amazonaws.com/0/240814/496e6ce1-f687-9db1-080b-752e87c679e6.png)

順調に表示できました。

次は Step 4: Angularコンポーネントを編集する です
プログラマ脳を鍛える数学パズル Q.7「日付の2進数変換」

引き続き問題を解いていきます。
問題は[プログラマ脳を鍛える数学パズル](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E8%84%B3%E3%82%92%E9%8D%9B%E3%81%88%E3%82%8B%E6%95%B0%E5%AD%A6%E3%83%91%E3%82%BA%E3%83%AB-%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%A7%E9%AB%98%E9%80%9F%E3%81%AA%E3%82%B3%E3%83%BC%E3%83%89%E3%81%8C%E6%9B%B8%E3%81%91%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8B70%E5%95%8F-%E5%A2%97%E4%BA%95-%E6%95%8F%E5%85%8B/dp/479814245X/ref=asap_bc?ie=UTF8)より。
# 今回の問題
>**問題**
年月日をYYYYMMDDの8桁の整数で表したとき、これを2進数に変換して逆から並べ、さらに10進数に戻したとき、元の日付と同じ日付になるものを探してください。期間は、前回の東京オリンピック（1964年10月10日）から、次回の東京オリンピック（2020年7月24日）とします。
例）**1966年7月13日**
　①YYYYMMDDのフォーマット→19669713
　②2進数に変換→1001010111111111110101001
　③2進数を逆から並べる→10010101111111111110101001
　④逆から並べた2進数を10進数に戻す→19660713
　**1966年7月13日（最初の数）に戻る**

# 実装手順
①対象の期間を1日おきループ出力する
②対象の日付を数値型に変換する
③10進数を2進数に変換する
④変換した2進数を反転させる
⑤反転した2進数を10進数に変換する
⑥対象の日付と④の10進数が一致するものを出力する

# 書いたPHPコードと出力結果
```php:q07.php
<?php

$start    = new Datetime('1964-10-10');
$end      = new Datetime('2020-07-25');
$interval = new DateInterval('P1D');

$period = new DatePeriod($start, $interval, $end);

// ①対象の期間を1日おきループ出力する
foreach ($period as $date) {
  // ②比較元の日付を数値型に変換
  $original = (int)$date->format('Ymd');

  // ③10進数から2進数に変換
  $original_decbin = decbin($original);

  // ④変換した2進数を反転させる
  $original_decbin_reverse = strrev($original_decbin);

  // ⑤反転した2進数を10進数に戻す
  $original_decbin_reverse_bindec = bindec($original_decbin_reverse);

  // ⑥比較元と比較対象が一致するものを出力する
  if ($original === $original_decbin_reverse_bindec) {
    echo $original;
    echo '<br/>';
    echo $original_decbin_reverse_bindec;
    echo '<br/>';
  }
}

// 結果
19660713
19660713
19660905
19660905
19770217
19770217
19950617
19950617
20020505
20020505
20130201
20130201
```
# 今回の学び
phpの日付処理は[PHPで日付をループする方法と罠](https://qiita.com/hirapi/items/c7556da46ed19783f2e6)を参考にした。
1-Elasticsearchについて

[はてなブログ](https://gitya107.hatenablog.com/entry/2018/04/28/194752)に投稿しましたが、こちらにも記述します。

Elasticsearchについて構築方法の前に詳細を記述したいと思います。

# Elasticsearchの構成要素について

[https://www.elastic.co/guide/en/elasticsearch/reference/current/_basic_concepts.html](https://www.elastic.co/guide/en/elasticsearch/reference/current/_basic_concepts.html)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/47012/42dd151f-5849-77e3-a181-4467ebfca8c7.png)

(1)インスタンス(instance)
　RHELなどのOSと同義です。
　インスタンス名＝ホスト名です。

(2)ノード(node)
　Elasticsearchのプロセス（JVM）です。1インスタンスの中に複数のノードを起動することができます。
　ノード名＝プロセスを識別するためのタグです。
　ノードについては別途記述します。

(3)シャード(shard)
　Elasticsearchに保存されたデータ(インデックス)を分割し、分散配置したものです。
　データ保護の仕組みから主データ(プライマリ)と複製データ(レプリカ)のセットで分散配置できたりします。
　プライマリデータが破損した場合はレプリカデータからデータの復元が可能です。
　デフォルトは5プライマリ/1レプリカです。
　シャード数は600shards/nodeが推奨、多くても1,000shardsを超えないように推奨されています。

(4)インデックス(index)
　図には記述していませんが、Elasticsearchに保存するデータのことをインデックスと呼びます。

(5)クラスタ(cluster)
　複数のノードをまとめて1つのElasticsearchと見せるものです。
　複数のノードをまとめることが出来ます。

# ノードについて
ノードについてさらに詳しく解説します。

[https://www.elastic.co/guide/en/elasticsearch/reference/current/modules-node.html](https://www.elastic.co/guide/en/elasticsearch/reference/current/modules-node.html)

## ノードの種類

ノードは4つに分割されます。

(1)マスター適格ノード(Master-eligible node) 
　マスター適格ノードの中から1台マスターノード(Master node)が自動的に選出されます。
　残りのマスター適格ノードはマスターノード障害に備えたノードとして存在します。
　マスターノードはElasticsearchの管理・制御を実施します。

(2)データノード(Data node)
　データを格納するノードで、このノードが複数存在することにより分散配置が可能となります。
　さらにHot/Warmという分類があり、階層化的な？ことを出来るようです。(ここはよく理解していないです。。)

(3)クライアントノード(Ingest node)
　日本語名はちょっと怪しいですが、こちらのノードはAPIを受け付ける専用のノードとなります。  
　そのため、管理やデータの保管などはしません。
　APIの発行やKibanaからの接続先はこのノードを指定します。マスターノードやデータノードはそれぞれの役割に専念させるため、API等の受け口にしないことが推奨されています。

(4)調整ノード(Tribe node)
　日本語名は適当につけました。。。複数クラスタ構成で利用するノードのようです。
　まだシングルクラスタしか経験がないため、本ノードについては理解もしていません。。。。

## Javaヒープサイズについて

[https://www.elastic.co/guide/en/elasticsearch/reference/current/heap-size.html]([https://www.elastic.co/guide/en/elasticsearch/reference/current/heap-size.html])

まず、物理メモリの半分以下をElasticsearchに割り当てるのが推奨です。
OSでスワップを無効にするか、コンフィグファイルや起動パラメータでスワップを無効にするのが推奨です。
最小値と最大値の記述を行うのですが、どちらも同じ値を入れるのが推奨のようです。
ノードの種類によって割り当てるメモリサイズが異なります。

(1)マスター適格ノード(Master-eligible node)   及びマスターノード(Master node)
 　4～8GBを割り当てます。

(2)データノード(Data node)
　30GB以下の割り当てが良いようです。

(3)クライアントノード(Ingest node)
　4～8GBを割り当てます。

## 通信ポートについて  
Elasticsearchの通信には2種類存在します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/47012/010c713b-618e-5ae6-d1fe-6e1bad0c62b4.png)

(1)ノード間の通信
　Elasticsearchの分散配置処理などはTransportという内部通信ポートでやり取りをしています。
　X-Packの有償版を導入するとこの通信を暗号化することができます。
　ポートは9300～9400ポートが利用され、特に指定をしないとElasticsearchがポートの割付をしてくれます。
　[https://www.elastic.co/guide/en/elasticsearch/reference/current/modules-transport.html](https://www.elastic.co/guide/en/elasticsearch/reference/current/modules-transport.html)

(2)外部からの通信
　APIやKibanaからの接続をhttpポートで受け付けます。
　X-Packの有償版を導入するとこの通信を暗号化することができます。
　ポートは9200～9300ポートが利用され、特に指定をしないとElasticsearchがポートの割付をしてくれます。
　[https://www.elastic.co/guide/en/elasticsearch/reference/current/modules-http.html](https://www.elastic.co/guide/en/elasticsearch/reference/current/modules-http.html)
micro:bitで赤外線リモコン100V家電のOFF/ON

# 動機

子供達にmicro:bitを使った「おうちハック」体験をしてもらおうという事で、オーム電気のリモコンセントOCR－05Wの電源ON/OFFを赤外線で制御するプログラムをつくりました

# 注意点

実際に子供達と実施する場合は、加熱器具や電気ストーブの制御は絶対にやってはいけない旨の説明は必須

# 用意するもの

- micro:bit本体
- 赤外線LED 940nm ([OSI5FU5111C-40](http://akizukidenshi.com/catalog/g/gI-03261/) 等)
- 抵抗 470Ω
- オーム電気　[OCR-05W](https://www.amazon.co.jp/dp/B01ABMGGQ8/)

# 回路

体験目的なので出来るだけシンプルに。
この回路だと飛距離は50cm程度しか飛びません。

![microbit-ir.png](https://qiita-image-store.s3.amazonaws.com/0/44523/a61f11ca-b762-131d-4275-61e43e5dbea2.png)

# プログラム

https://makecode.microbit.org/_iLwbg8PvuEvL

![microbit-画面コピー (27).png](https://qiita-image-store.s3.amazonaws.com/0/44523/e299ef7e-752e-75da-2052-6e3e77c18797.png)

# 実行

https://youtu.be/BXrr9ATMhB0

ONはバッチリなのですが、OFFの反応が微妙...。
改善の余地がありそうです。
wordpressでカテゴリー等のメニューを表示する

`wp nav menu` を利用する。
メニュー内容はwordpressの管理画面から変更可能。
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_nav_menu
【Java】staticの呼び出し順

Javaでのstaticイニシャライザーの呼び出し順について復習がてら試してみました。
普段から、Spring等のフレームワークを使用しているとあまり何がどの順番でよびだされているのか気にしていませんでしたが、気になったので試します。

環境
- java8

今回試すのは、以下のパターンです。

- Mainクラス
- Mainクラスからインスタンスを生成して呼び出されるクラス
- Mainクラスからstaticメソッドを呼び出されるクラス
- それぞれの親クラス

### ソース
ソースを確認します。

```java:メインクラス
public class Main {

    static {
        System.out.println("executeStatic:" + Thread.currentThread().getStackTrace()[1].getClassName());
    }

    public static void main(String[] args) {
        System.out.println("Main実行");
        final CalledClass calledClass = new CalledClass();
        calledClass.call();
        CalledClass2.call();
    }

}
```

```java:インスタンスを生成して呼び出すクラスの親クラス
public class ParentClass {

    static {
        System.out.println("executeStatic:" + Thread.currentThread().getStackTrace()[1].getClassName());
    }
}
```

```java:インスタンスを生成して呼び出すクラス
public class CalledClass extends ParentClass {

    static {
        System.out.println("executeStatic:" + Thread.currentThread().getStackTrace()[1].getClassName());
    }

    public CalledClass() {
        super();
    }

    public void call() {
        System.out.println("executeMethod.CalledClass.call");
    }
}
```

```java:staticクラスの親クラス
public class ParentClass2 {

    static {
        System.out.println("executeStatic:" + Thread.currentThread().getStackTrace()[1].getClassName());
    }
}
```

```java:staticクラス
public class CalledClass2 extends ParentClass2{

    static {
        System.out.println("executeStatic:" + Thread.currentThread().getStackTrace()[1].getClassName());
    }

    private CalledClass2() {
        super();
    }

    public static void call() {
        System.out.println("executeMethod.CalledClass2.call");
    }
}
```

### 実行結果

```text
executeStatic:exe.Main
Main実行
executeStatic:exe.ParentClass
executeStatic:exe.CalledClass
executeMethod.CalledClass.call
executeStatic:exe.ParentClass2
executeStatic:exe.CalledClass2
executeMethod.CalledClass2.call
```

### 結果
実行結果を見てみると以下のことが分かると思います。
- Javaでは呼び出して必要となったときにクラスインスタンスが作成される。それは、staticメソッドを呼び出す場合もそれは変わらない。
- 子クラスよりも親クラスのインスタンスが先に作成される。当然ですが。

### 感想
自分の中では、staticクラスはMainの実行よりも早くインスタンスが生成されると思っていましたが、実際は呼び出されるときになって初めて生成されるんですね。
より効率よくメモリを使用しているようで驚きです。
RHEL7にxrdpをインストールしてwindowsからリモートデスクトップ接続をする

[はてなブログ](https://gitya107.hatenablog.com/entry/2018/04/21/120143)に投稿しましたが、こちらにも記述します。

#xrdpとは
xrdpとはWindowsからLinuxにリモートデスクトップで接続できるようにしてくれるパッケージです。

vncなど他に似たようなものがありますが、windowsの標準機能（リモートデスクトップ）で接続できるあたりが現場にはありがたいです。

# インストール方法

## VNC Serverのインストール
VNC Serverのパッケージも必要となります。
こちらはRHELのOSディスクに含まれていますのでオフラインでもインストールが可能です。

`# yum install tigervnc-server`

## xrdpのインストール
こちらはRHELのOSディスクに含まれていないため、インターネット上から入手する必要があります。

(1)yumリポジトリの設定

`# wget http://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm`

`# rpm -ivh epel-release-latest-7.noarch.rpm`

(2)xrdpのインストール

`# yum install xrdp`

(3)自動起動の有効化

`# systemctl enable xrdp.service`

`# systemctl start xrdp.service`


以上でWindowsからリモートデスクトップ接続をすることができるようになります。

## rootログインの禁止
セキュリティ上rootログインを禁止したい場合は本手順を実施します。

(1)バックアップ
SEたるものバックアップは必須です。

`# cp -p /etc/xrdp/sesman.ini /etc/xrdp/org.sesman.ini`

バックアップしたファイルとオリジナルの差分がないことも一応確認する癖をつけましょう

`# diff /etc/xrdp/sesman.ini /etc/xrdp/org.sesman.ini`

(2)修正をします。

`#vi /etc/xrdp/sesman.ini`
 
```/etc/xrdp/sesman.ini
～省略～

AllowRootLogin=true　⇒　0 (false)に変更

～省略～
```

(3)サービスの再起動をします。

`# systemctl restart xrdp-sesman.service`


# 参考

他の設定値が気になる場合は下記が参考になります。

[https://www.mankier.com/5/sesman.ini](https://www.mankier.com/5/sesman.ini)
Excelの列名連番を作成

# 概要

Excelの「A, B, C,,, Z, AA, AB, AC,,, AZ, BA, BB, BC,,,」ってなってるあれを作りたかったんです。
なので、ちょっとした数式で作ります。

# 環境

Microsoft Excel 2016

# 準備

名前の管理から、次のように数式を追加してください。
名前は自由です。

```text

=OFFSET(INDIRECT(ADDRESS(ROW(),COLUMN())), -1,0)

```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32577/643b19ba-213e-0088-7736-8aea4a837630.png)

# 数式

これを列名連番を開始したいセルの下に記入してください。

```text

=SWITCH(
   LEN(RowMu1),
   1,
      IF(
         OR(CODE(RowMu1)=90,CODE(RowMu1)=122),
         CHAR(CODE(RowMu1)-25) & CHAR(CODE(RowMu1)-25),
         CHAR(CODE(RowMu1)+1)
      ),
   2,
      IF(
         OR(CODE(RIGHT(RowMu1,1))=90,CODE(RIGHT(RowMu1,1))=122),
         CHAR(CODE(LEFT(RowMu1,1))+1)&CHAR(CODE(RIGHT(RowMu1,1))-25),
         CHAR(CODE(LEFT(RowMu1,1)))&CHAR(CODE(RIGHT(RowMu1,1))+1)
      )
)

```

# どんな感じになるか

|一文字の場合|二文字以降の場合|頭が大文字の場合|お尻が大文字の場合|
|:-:|:-:|:-:|:-:|
|![image.png](https://qiita-image-store.s3.amazonaws.com/0/32577/0ed72460-43f0-2cc9-27ac-91a4752b0d7b.png)|![image.png](https://qiita-image-store.s3.amazonaws.com/0/32577/9bed87a2-f4e0-78e2-2c58-a328651a3ed6.png)|![image.png](https://qiita-image-store.s3.amazonaws.com/0/32577/de3d90c9-223b-9a48-d1cd-df7ef32bee74.png)|![image.png](https://qiita-image-store.s3.amazonaws.com/0/32577/541461c0-d580-34f1-613c-58b369e0b324.png)|

結構面白くないですか？
LaravelのURLジェネレーターで.envに設定したホスト名を使用する。

### LaravelのURLジェネレーター

以下の「/login」のようにURLジェネレーターの引数に相対パスのみ渡すとPHPの$_SERVERからホスト名を自動で作るのでセキュリティを考慮して内部に記述したホスト名を使うように設定する。

#### resources/views/auth/login.blade.php
```html
<form class="form-horizontal" method="POST" action="{{ url('/login') }}">
```

### URLジェネレーターの挙動

- 強制ルートを指定しないと$_SERVERのサーバー情報から自動で取得する。
- $forcedRootがnullだとリクエストのrootを使用。

#### vendor/laravel/framework/src/Illuminate/Routing/UrlGenerator.php

``` php
public function formatRoot($scheme, $root = null)
{
    if (is_null($root)) {
        if (is_null($this->cachedRoot)) {
            $this->cachedRoot = $this->forcedRoot ?: $this->request->root();
        }
    .....
}
```

- リクエストではPHPの$_SERVERから取ってきてる。

#### vendor/symfony/http-foundation/Request.php

``` php
public function getHost()
{
    if ($this->isFromTrustedProxy() && $host = $this->getTrustedValues(self::HEADER_CLIENT_HOST)) {
        $host = $host[0];
    } elseif (!$host = $this->headers->get('HOST')) {
        if (!$host = $this->server->get('SERVER_NAME')) {
            $host = $this->server->get('SERVER_ADDR', '');
        }
    }
```

## サービスプロバイダーでホスト名を設定 

- .envにホスト名を記述
- サービスプロバイダーでに強制的にURL指定
 
#### .env

```
APP_URL=http://example.com
```

#### app/Providers/AppServiceProvider.php

``` php
use URL;
use Config;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        URL::forceRootUrl(Config::get('app.url'));// ルートURLを設定
    }
```
Windows Server 2016 評価版から製品版にライセンス認証をする方法

[はてなブログ](https://gitya107.hatenablog.com/entry/2018/04/13/173621)に投稿していますが、こちらにも投稿

Windows Server 2016を評価版ライセンスから製品版に変更する方法です。
ライセンス購入が間に合わない・・・でも構築しないとスケジュールが・・・という時に使えます。

### 変更可能なライセンス
評価版から下記の製品版にすることができます。
私は評価版からボリュームライセンス版に変更しました。


* 一般的に販売されている製品版

* ボリュームライセンス版

* OEM版

[公式HP](https://docs.microsoft.com/ja-jp/windows-server/get-started/supported-upgrade-paths)


### 実施手順

(1) 管理者権限でコマンドプロンプトを起動します。

(2) 現在のエディションを確認します。
　「Eval」が評価版を示します。

```
C:\Users\Administrator>DISM /online /Get-CurrentEdition

展開イメージのサービスと管理ツール
バージョン: 10.0.14393.0

イメージのバージョン: 10.0.14393.0

現在のエディション:

現在のエディション : ServerStandardEval

操作は正常に完了しました。

```


(3)  製品版のライセンス認証を実施します。
　※プロダクトキー及びインターネット接続が必要です。

`DISM /online /Set-Edition:<エディション ID> /ProductKey:XXXXX-XXXXX-XXXXX-XXXXX-XXXXX /AcceptEula`

エディションIDは下記のようになります。

| エディション | エディションID |
|:-----------|:-----------|
| Standard   | ServerStandard | 
| DataCenter | ServerDataCenter|

 ※認証エラーが発生した場合は「トラブルシューティング」で再度認証を実施し、再起動を実施すると上手くいくようです。
C# Conversion among string, byte[] and char[]

# C# Conversion among string, byte[] and char[]

Note to self.

## string and byte

### string to byte[]

```csharp
> var result = Encoding.Default.GetBytes("abc");
> result
byte[3] { 97, 98, 99 }
```

### byte[] to string

```csharp
> var input = new byte[] { 0x61, 0x62, 0x63 };
> var result = Encoding.Default.GetString(input);
> result
"abc"
```


## string and char

### string to char[]

```csharp
> var result = "abc".ToCharArray();
> result
char[3] { 'a', 'b', 'c' }
```

### char[] to string

```csharp
> var input = new char[] { 'a', 'b', 'c' };
> var result = new string(input);
> result
"abc"
```


## byte and char

### byte to char

[Convert.ToChar Method (Byte)](https://msdn.microsoft.com/en-us/library/7hcy5390.aspx)


### char to byte

[Convert.ToByte Method (Char)](https://msdn.microsoft.com/en-us/library/ee6e613x.aspx)



---
Environment: Windows 10 Home, 1709, 16299.371
Visual Studio: Microsoft Visual Studio Community 2017 Version 15.6.7
【初心者向け】Composerのインストール方法（Windows7）

#はじめに
この記事ではComposerのインストール方法について書いています。
始めにComposerについて簡単に説明し、その後画像を多めに用いて、インストールの方法を説明したいと思います。

なお、インストールの際はウイルス対策ソフトを切ってから行ったほうがよいかもしれません。（詳細はこの[記事](https://qiita.com/rebi/items/6a1b2d37aabed471d726)を参照）

#Composerとは
まずはWikipediaに聞いてみましょう。
>Composer - Wikipwdia
>>Composerは、PHPプログラミング言語向けのソフトウェアおよび必要なライブラリの依存関係を管理する標準形式を提供するアプリケーションレベルのパッケージ管理システムである。

もう少し具体的な話をすると、プログラミングをしていくにあたって何度も出てくる機能や処理をまとめたものがライブラリです。そして、Composerはライブラリをインストールするときに力を発揮します。

例えばAというライブラリをインストールする時に、Aが動くにはBとCというライブラリが必要だとします。手動でインストールすると、こうした情報を知る必要があります。また、Cを入れるにはDとEとFが必要で...となったら労力がかかりすぎてしまいます。こうしたことを踏まえてまとめて必要なもの(上の例だとAのみでなくBとCも)をインストールしてくれるのがComposerなのです。Composerすごい...

#ダウンロード
さて、では早速インストーラーをダウンロードしましょう。
[こちら](https://getcomposer.org/)のリンクからDownloadをクリックします。

![fig1.png](https://qiita-image-store.s3.amazonaws.com/0/239294/722701e1-c420-a3c5-f31d-2d2da9344971.png)

そして、遷移先のページのexeファイルをクリックするとダウンロードすることができます。

![fig2.png](https://qiita-image-store.s3.amazonaws.com/0/239294/0a8f25c1-e60a-4eed-9a4f-55f4e95e8c60.png)

#インストール
ダウンロードしたexeファイルを起動しましょう。

「Developer mode」はアンインストーラーがダウンロードされないので、これをダウンロードしたい方はチェックを外してNextを押しましょう。
![fig3.png](https://qiita-image-store.s3.amazonaws.com/0/239294/9c08760c-42fb-d4f2-5ba0-bf99628b68bd.png)

PHPをインストールしてあれば、そのファイルがある場所を自動でしてくれますので、そのままNextを押します。PHPのインストールについては[記事](https://qiita.com/rebi/items/577a18241236c66b983f)を書きましたので、まだしていない人は参考にしてみてください。

![fig4.png](https://qiita-image-store.s3.amazonaws.com/0/239294/da750e44-c33b-32d8-3ebc-20f07bce2eed.png)

PHPをインストールする際に「php.ini」ファイルを作成するのですが、修正する必要がある場合はこのように教えてくれますので、チェックを入れたままNextを押します。
![fig5.png](https://qiita-image-store.s3.amazonaws.com/0/239294/3468fbad-8a68-0307-0731-92dcbdcfd21b.png)

次にプロキシサーバの設定についてです。プロキシサーバは自分の用いている端末で外部のサーバに接続する際に使用する仲介業者のような存在で、主に企業などでセキュリティを目的として使用されます。ですので、個人で開発される方は特に指定する必要はないでしょう。そのままNextを押してください。
![fig6.png](https://qiita-image-store.s3.amazonaws.com/0/239294/dad03d3a-660e-e6a8-6a9c-743525b413aa.png)

最後に確認をしたら「Install」を押しましょう。後はNextやFinishを押せば大丈夫です。これでインストールが終了です。
![fig7.png](https://qiita-image-store.s3.amazonaws.com/0/239294/b3aaf0bd-f22a-efee-1b25-e8e9ad229512.png)

#確認
最後にコマンドプロンプトを用いてインストールされているか確認しましょう。コマンドプロンプトを開き、「composer -v」と入力し、エンターキーを押してみてください。以下の画像のようにバージョンが表示されれば成功です。

#おわりに
Composerのインストールは比較的簡単だと思いますが、画像を多めに丁寧に解説してみました。一人でも誰かの助けになれば幸いです。お読みいただきありがとうございました。

#参考文献

###インストール全般
[WindowsにComposerをインストールする](https://sekaiokaeru.com/tips/install-composer)

###プロキシサーバ関連
[プロキシサーバーとは | 機能・仕組み・設定方法を解説](https://boxil.jp/mag/a3028/)
[プロキシサーバとは](http://www.infraexpert.com/study/security23.html)
[プロキシサーバとは](http://wa3.i-3-i.info/word11414.html)
固定ヘッダーのUITableViewを作るための方法について


こんな感じのテーブルを作る必要があったので、手法を模索しました。

![ezgif-1-47fdecaf7a.gif](https://qiita-image-store.s3.amazonaws.com/0/8162/4ddf0b19-2b3b-431f-8480-8fb5224e0961.gif)

## 基本 テーブルビューの構造

テーブルビューの構造は下記のようになっています。

- テーブルヘッダー
- セクション
	- セクションヘッダー
	- セル
	- セクションフッター
- テーブルフッター

スクロールに応じて表示される内容は下記のようにかわります。

１．テーブルヘッダー＋セクションヘッダー＋セクションフッター
２．セクションヘッダー＋セクションフッター
３．セクションヘッダー＋セクションフッター＋テーブルフッター

テーブルヘッダーを常に表示させるUIを作成する場合、標準の振る舞いでは実装出来ないため、一番綺麗な方法が無いかを模索しました。

固定ヘッダーの実装方法はいくつかありますが、大きく次の２パターンです。

### パターン１

１．contentInsetで余白を設定する
２．ヘッダービューはTableViewの子要素に設定する
３．余白の位置にヘッダーが来るようにスクロールに応じて位置／サイズを調節する


```
self.tableView.addSubview(self.headerView)
self.tableView.contentInset.top = HEADER_HEIGHT_MAX
self.tableView.contentOffset.y = HEADER_HEIGHT_MAX * -1
```

```
func scrollViewDidScroll(_ scrollView: UIScrollView) {
	let offsetY = scrollView.contentOffset.y + scrollView.contentInset.top
	var frame = self.headerView.frame
	frame.origin.y = scrollView.contentOffset.y
	frame.size.height = max(HEADER_HEIGHT_MIN, HEADER_HEIGHT_MAX - offsetY)
	self.headerView.frame = frame
}
```

![pic1.png](https://qiita-image-store.s3.amazonaws.com/0/8162/0dc01144-da71-efd6-7bb9-de8bc803401c.png)

問題点

- セクションヘッダーの固定位置がcontentInsetでズレる
- セクションヘッダー、セクションフッターがヘッダーの上に重なってしまう


### 利用可能な時

ヘッダーをtableHeaderViewに入れる変わりに使うだけで良いので、かなりシンプルに使うことが出来ます。
セクションヘッダー、セクションフッターを使わない構造であればこのやり方で作ることが出来ます。

## パターン２

１．ダミーのテーブルヘッダーを置く
２．テーブルの余白は縮小時のサイズに指定する
３．ヘッダーはテーブルに重ねるように設置する
４．スクロールに応じてヘッダーのサイズを調節する

![pic2.png](https://qiita-image-store.s3.amazonaws.com/0/8162/d85d369b-dbe7-4516-4686-3c60c680dede.png)

```
self.view.addSubview(self.headerView)

self.tableView.tableHeaderView = self.dummyHeaderView
self.tableView.contentInset.top = HEADER_HEIGHT_MIN
self.tableView.contentOffset.y = HEADER_HEIGHT_MIN * -1
```

```
func scrollViewDidScroll(_ scrollView: UIScrollView) {
	let offsetY = scrollView.contentOffset.y
	var frame = self.headerView.frame
	frame.origin.y = 0	//場所は固定
	frame.size.height = max(HEADER_HEIGHT_MIN, HEADER_HEIGHT_MAX - offsetY)
	self.headerView.frame = frame
		
	self.tableView.scrollIndicatorInsets.top = frame.size.height
}
```

ヘッダーにダミーのViewを入れる必要があったり、縮小時の大きさをcontentInset.topに入れるなど少しトリッキーです。

また、**ヘッダー部分を触った時にスクロールさせるには`isUserInteractionEnabled=false`に設定する必要がある**という問題点があります、

そのため、ヘッダー部分にタップ可能な要素を設置することが出来ません。


### 利用可能な時

ヘッダーに操作可能なUIが無い時はこの方法で問題ありません。


## ベストプラクティス

パターン１はシンプルですがセクションヘッダーが使えません。
パターン２はダミーを置くなど構造が少し複雑な上、操作可能なUIを置くことが出来ません。

全てを満たすためには、パターン２をベースにしてヘッダーのタップイベントは通過するのが最もシンプルな解決手段です。

``func hitTest()``を使うことでイベントを通過させることが可能です。

`isUserInteractionEnabled=true`の要素のみイベントを通過させないようにすればイベントも発生します。

```
class HeaderCoverView : UIView {
	override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
		guard let view = super.hitTest(point, with: event) else { return  nil }
		if view == self {
			return nil
		}
		if view.isUserInteractionEnabled {
			return view
		}
		return nil
	}
}
```

ただ、この方法の場合ヘッダー部分の子要素がレイアウトや管理のために入れ子になっている場合など、子要素に対しても`hitTest()`の実装が必要です。

hitTestでイベントを透過する場合、複雑なジェスチャー操作を含めることは難しいかもしれません。
Unityで形態素解析やってみた

#はじめに
Unityで形態素解析をやってみました。今回は[Unityで形態素解析する方法](https://qiita.com/Ubermensch/items/f8320bbbf18ef227fc1e)を参考にUnityで形態素解析をして, Buildするところまで行います。

#動作環境
MacOS : 10.12.6
Unity : 5.6.5

#NMeCabのダウンロード

[.NET形態素解析エンジンNMeCab](http://sourceforge.jp/projects/nmecab/)をダウンロードします。
ダウンロードしたフォルダから、dicフォルダとLibNMeCab.dllを下の図のように、Unityにいれます。(NMeCab0.07というフォルダを作りまとめています。)
![スクリーンショット 2018-04-29 10.25.33.png](https://qiita-image-store.s3.amazonaws.com/0/246610/275a80a6-0c17-a18b-819a-1ca8e1243e00.png)

#サンプルコードを動かす
[Unityで形態素解析する方法](https://qiita.com/Ubermensch/items/f8320bbbf18ef227fc1e)にあるコードを実行し, 動作することを確認します。

```cs:test.c#
using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using NMeCab;

public class test : MonoBehaviour {

    // Use this for initialization
    void Start () {

        string sentence = "Unityで形態素解析";

            MeCabParam param = new MeCabParam();
        param.DicDir = @"Assets/NMeCab0.07/dic/ipadic";

            MeCabTagger t = MeCabTagger.Create(param);
            MeCabNode node = t.ParseToNode(sentence);
            while (node != null)
            {
                if (node.CharType > 0)
                {
                    Debug.Log(node.Surface + "\t" + node.Feature);
                }
                node = node.Next;
            }
            Debug.Log("");
        }

}
```

#パスを指定する
今回は、Buildした環境で形態素解析を行うことを目的としています。Buildする際はBuild先に応じて

```
   param.DicDir = @"Assets/NMeCab0.07/dic/ipadic";
```
のフォルダの場所を変更する必要があります。
[Unityで取得できるパス一覧](https://qiita.com/consolesoup/items/19fed212d4ef2bd1e1dd)を参考にパスを変更しましょう。
Contentsの下にNMeCab0.07をいれる予定なので、

```
param.DicDir = Application.dataPath +"/NMeCab0.07/dic/ipadic";
```
に書き換えます。
Build環境で動くか確認するため、

```
Debug.Log(node.Surface + "\t" + node.Feature);
```
を

```
text.text = node.Surface + "\t" + node.Feature;
```
に変更して画面で確認できるようにしましょう。
#実行
では実際に先ほどサンプルを動かしたプロジェクトをBuildしてみましょう。
Buildが完了すると
![スクリーンショット 2018-04-29 11.01.37.png](https://qiita-image-store.s3.amazonaws.com/0/246610/11739eda-4adc-1e35-f799-957df5681be0.png)
このようなアプリができてると思います。
これを右クリックし、「パッケージの内容を表示」しましょう。
Contentsの下に先ほどプロジェクトにいれたNMeCab0.07のファイルを入れましょう。
![スクリーンショット 2018-04-29 11.00.56.png](https://qiita-image-store.s3.amazonaws.com/0/246610/824eaa53-fd66-972d-a3e8-9cd1fe69a297.png)

にしました。
これでアプリを実行します。
![スクリーンショット 2018-04-29 10.55.03.png](https://qiita-image-store.s3.amazonaws.com/0/246610/386bc395-c987-e69c-549f-de94c3364c93.png)
うまく動作しました。(textだと上書きされて解析しかでてませんでした...)

#まとめ
Unityで形態素解析をBuild環境でも実行できるようにしました。WebGLなどでは試していないのでうまくできるのか気になります。もっとうまいやり方がありましたらご教授願いたいです。

#参考
[Unityで形態素解析する方法](https://qiita.com/Ubermensch/items/f8320bbbf18ef227fc1e)
[Unityで取得できるパス一覧](https://qiita.com/consolesoup/items/19fed212d4ef2bd1e1dd)
AndroidのLinearLayoutで上下左右中央寄せを使いこなす

##LinearLayout
LinearLayout内にTextViewを配置する場合を例に説明します。

 orientation=horizontalの場合
　　<b>内側のTextView自体の上下位置を指定するには</b>TextViewの「layout_gravity」を設定します。
　　<b>内側のTextView自体の左右位置を指定する</b>ことはできません。
　　　・理由は、textviewの幅分だけLinearLayout内に幅を確保したら、
　　　　その隣にすぐに次の要素が配置されるため。
　　　　（基本的に、horizonならば左から順番に、verticalならば上から順番に
　　　　　詰められた状態で要素が配置されていくと思われます。）
　　　・ただし、LinearLayout内に要素が一つしか配置されていない場合かつ、
　　　　その要素自体の大きさがLinearLayoutよりも小さくなる場合は、
　　　　LinearLayout内での左右位置の指定が可能となる。
　　　　その場合は、LinearLayoutの「gravity」を設定します。
　　<b>内側のTextView内のtextの上下左右位置を指定するには</b>TextViewの「gravity」を設定します。
　　　二つ以上のパラメータを指定する場合（例：rightとbottom）は縦棒（|）で区切ります。
　　　（android:gravity="right|bottom"　こんな感じです。）

 orientation=verticalの場合
　　考え方は上記と同じと思われるため、省略。（検証もしていませんが、悪しからず）
Python3 基本コードまとめ

忘れないように基本的なコードをメモしておく。

##入力

```input.py
#文字列を入力
a = input()

#整数(int型)を入力
b = int(input())

#2つの文字列を空白で区切って入力
a, b = input().split()

#2つの整数(int型)を空白で区切って入力
a, b = map(int, input().split())
```

複数行に入力が与えられて入力の終わりまで読み取る。AOJにあって毎回忘れる。
([Pythonで競技プログラミングする時に知っておきたいtips(入出力編)](https://qiita.com/lethe2211/items/6cbade2bc547649bc040)参考にさせていただきました)

```input_2.py
import sys
data = []
for line in sys.stdin:
   data.append(int(line))
```
記事を公開して1時間もしないうちに@shiracamusさんにコメントを頂き以下のように書くことができると教えてくださいました。

```input_3.py
import sys
data = list(map(int, sys.stdin))
```

##表示

```print.py
#変数aの内容を表示
print(a)

#複数の文字列を表示
print(a + b)

#改行せず表示(''の中身で表示後の出力を指定できる。スペースにすると一文字空く)
print(a, end='')
```

##リスト

```list.py
#空のリストを定義
data = []

#リストにaという要素を追加
data.append(a)

#リストにaというリストを連結
data.extend(a)

#リストのサイズを指定して定義。何らかの値を配列のサイズ分代入するしかない？
data = [0] * 10

#リストの範囲を指定する。a以上b未満。-1にするとリストが降順になる。（いろいろと間違えてました）
data[a:b:-1]

#入力した値をリストへ代入
data = list(map(int, input().split()))

#ソート1。リスト自体がソートして書き換えられる。
data.sort()

#ソート2。リスト自体は書き換えられない。
data2 = sorted(data)
```

##繰り返しなど

```for.py
#iに0からn-1まで昇順で代入
for i in range(n):

#iにnからm-1まで昇順で代入
for i in range(n, m):

#iにnからm未満の範囲でlおきに昇順で代入
for i in range(n, m , l):

#iにnからm + 1まで降順で代入
for i in range(n, m, -1):

#listの要素を順にwordに代入
for word in list:
```

```while.py
#breakされるまで繰り返し続ける
while True:

#ループから抜ける
if 条件式:
   break
```
SSH接続しようとしたら秘密鍵のパーミッションエラーがでた

## 概要

新しくvagrant環境を作り、`git push` しようとしたら、なぜか秘密鍵がないといわれまして。。。
そこで、もともと使っていた環境のSSH鍵をコピーし、再実行しようとしたら、怒られた。

```
vagrant@vagrant:/vagrant/trunk-web$ git push origin now_branch
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0664 for '/home/vagrant/.ssh/id_rsa' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "/home/vagrant/.ssh/id_rsa": bad permissions
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```

どうやら鍵がオープンすぎたらしい。
まぁコピー＆ペーストしただけだからね。

## 解決方法

鍵のパーミッションを0600にしてあげるといいらしい。

```
$ chmod 0600 ~/.ssh/id_rsa
```

これでもう1回`git push` したところ、きちんとできました＼(^○^)／
GCP、何から勉強したらいい？に対する提案

内容と見た目
@ito-yusaku 氏の
https://qiita.com/ito-yusaku/items/f5ece0b4aac11a0c8b52
素晴らしい先行記事をリスペクトしたものです。
※CloudArmorについて追記

## GCP何から勉強したらいい？
![gcp-content.jpg](https://qiita-image-store.s3.amazonaws.com/0/154680/83b831a1-59f9-9581-860d-caf01f5c7bcd.jpeg)



## 誰向けの記事か？
- 新しく入った会社でGCPっての使ってるらしいぜ。
- 今度GCPっての触ることになったんだ。
- AWSはいじってたけどGCPは初めてなんだよなー。

的な人の役に立てたらな。という内容です。
タグを付けるにも、#AWSは8543件、#gcpは473件と、まさに桁違いの差があるのでみんなもっとGCP触ると良いよ！

## 解説
科目の内容はどちらかというと、個人でアプリをモリモリ書いてる人というよりは、既存データセンタでインフラ構築をしていたものをクラウドに持ってくる人寄りです。

- **必修科目**　：最初にきっちり決めておくべきもの。後からの変更はかなりの労力を伴う。
- **重要科目**　：サービスを構築する上でほぼ必須なもの。
- **選択科目**　：単にサービス提供するだけでなく、プラスアルファで役に立つもの。

## 必修科目の内容説明
### Stackdriver
・Monitoring (リソースの利用率などがグラフで可視化される。Datadogのような。
・Logging (プロジェクト内のあらゆるログが集約できる。fluentdのような。というか収集システムはほぼそのもの。
・Trace (アプリからデータを収集してリアルタイムで可視数値化。KibanaやNewrelicのような。
　ポイントとしてGCP内のリソースだけではなく、AWSなどのデータも収集できる。

### Cloud IAM
・IAM (メールアドレスをユーザー単位として、GCPリソースへの細かいアクセス制限ができる。
　G Suiteと連携するとアカウント管理が一元化できて便利。GoogleGroupsも利用可能。
・Quotas (プロジェクト単位で利用可能なリソースを拡張できる。
　デフォルトでは割と狭い設定になっている。事故でインスタンス1000個作って破産！とかを防ぐ。
　オートスケールを使うようなサービス規模になる場合はCPU数やDisk容量上限に注意。申請すればすぐ上がります。
・Service accounts (外部アプリと連携するようなJSONキーやP12証明書発行ができる。

### Cloud Network
・VPC networks (基本的なネットワーク構成を行う。
　リージョン毎や必要な単位にローカルIPサブネットを細かく作成できる。旧来の第三層までの構築に近い。

### Cloud Firewall Rules
・Firewall rules (その名の通り通信ルールを設定する。AWSと違い、内部→外部はデフォでフルオープン。
　ハードウェアのFW機器を設定したことのある人にとっては直感的で解りやすい。

### Compute Engine
・VM instances (仮想サーバを作成できる。
　AWSと違い、サーバのスペックは決められた選択肢だけでなく、CPUコアやメモリ量を細かく変更可能。
・Storage (インスタンスにマウントされるディスクを作成。EBSの内容はこちらに含まれる。
　HDDとSSDを選べるが、速度は容量に比例する(上限はある)のでHDD10GBとかにすると悲しいほど遅いので注意。

## その他項目のピックアップ
### Cloud Storage
　読んだまま、いわゆるクラウドストレージ。ほぼそのまんまS3。バケット名は全世界で一意の物なので早い者勝ち。
　※test とか infra とかのバケット名は誰かが作ってあるので作成できない
　東京リージョンでもGB単価はS3よりわずかに安い。
　個人でも消えては困るバックアップファイルを置いておくのに便利。#全世界オープンはしないように・・・

### Cloud SQL
　現時点ではMySQL互換のみ。5月からPostgreSQLに対応する模様。
　使いやすく性能も十分だが、Google側の都合でアップデートによる通信断時間が発生する。時間は大まかに指定可能。
　24時間稼働するサービスで利用する場合は、通信断が数分発生しても大丈夫な構造にする必要がある。

### Cloud Load Balancing
　そのまま、ロードバランサ。複数のWebサーバで構成されるようなサービスを作る際はほぼ必須。
　ELBと違う点は、FWがLBの後ろにあるのでアクセス制限がFWで一切できないこと。
　※追記
　　CloudArmorという機能が追加されており、LBでのアクセス制御ができるようになっています。利用例のリンクはこちら
　　※https://qiita.com/ikutaN/items/e29c07413b78ca8c2fb9

　バランシングする必要があるが社内向けである、などクローズドなサービスを作るときは工夫が必要。
　複数のリージョンに跨がるような構造を1つのLBで作成できるので、従来のオンプレでは考えられなかったような構築ができて楽しい。

### Cloud Image
　※Compute Engineの Images に含まれる
　作成したインスタンスをテンプレートとして保存できる。
　推奨ではないが起動中のインスタンスをそのままいきなりイメージ化する事も可能。
　インスタンス自身のちょっとしたバックアップはスナップショットでよい。

---
ざっと駆け抜けましたが、お役に立てれば幸いです。
BigQueryは言うほど触ってなくて解説にはいたらず。もうちょい勉強が必要。。
ubuntu16.04でvncする

# 概要
ubuntu16.04だとデフォルトのウィンドウマネージャがうまく動かないためxfce4でvncする

# 手順
## vncサーバおよびxfce4インストール
```
sudo apt install -y vnc4server xfce4
```
## 一旦vncサーバを起動させてコンフィグファイルを作成する
```
vncserver :1
vncserver -kill :1
```

## vncではxfce4を使用するようにコンフィグファイルを変更
```
vim ~/.vnc/xstartup
```

### 以下のように変更
```
[ -x /etc/vnc/xstartup ] && exec /etc/vnc/xstartup
[ -r $HOME/.Xresources ] && xrdb $HOME/.Xresources
startxfce4 &
```

## vncserverを起動して接続確認
適宜vncクライアントで接続
macなら
1. 移動->サーバへ接続->サーバアドレス
2. vnc://<サーバアドレス>:5901
3. 接続
GitLabのCI/CDツールをGitHubで使う

# はじめに

GitLabってGitHubのクローンだよね？
公開したくないリポジトリ作ったりするのに便利だよね？

そういう認識の時期が自分にもありました。

しかし、GitLabは単にGitHubのクローンではなく、
「Complete DevOps」を提唱しており、プランニングからリリース後のフィードバックまですべてを統括して管理できることを目指しています。
**開発者、運用者の壁をなくす！**
そういうわけで、GitLabは同業他社と思われたGitHubとも連携できるようになりました。

## 何のために？

GitLabでリポジトリを管理すれば簡単でいいのですが、GitHubのほうが有名ですから。。。
草生やしとかないと就職とかで評価されないんだもん。

## やりかた

前提: githubにCI/CDしたいリポジトリは存在すること。

### GitLabでNew Project

[GitLab](http://gitlab.com "GitLab")にアクセスして、右上の「New Project」をクリックする。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/38676/eb93d0eb-6381-df12-fd39-c07b709dbdd1.png)

右上のタブ「CI/CD for External repo」をクリックする。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/38676/fbce18cf-de1c-e68d-dddc-e9d1fa2d0b04.png)

GitHubをクリックする。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/38676/0702cead-96e8-9f93-8494-d60310230765.png)

GitHubにログインする。

リポジトリ一覧が出てくるので、連携したいリポジトリを選択。

あとは、普通のGitLabと同じで .gitlab-ci.yml を作ってやってください。

## 利点

+ 2019/4まで無料
+ gitlabの強力なCIツールが利用できる

## 問題点

### メニューが少ない

![image.png](https://qiita-image-store.s3.amazonaws.com/0/38676/e977ab7c-eda1-1bc3-e374-a8a9025921c8.png)

通常のプロジェクトと比べると、サイドメニューがずいぶん少ないです。

Issue, MergeRequests, Wiki, Snippetsがありません。

### 削除できない

連携を解除する方法がわかりません。
わかる人教えて！

## おわりに

+ 2018/3にリリースされた機能なのでまだまだお試し感覚でお願いします。
+ Mirror repositoryをつかったほうがいいかも？？
+ GitLabのアイコン実はタヌキだそうです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/38676/fbad4ef8-9ce2-0851-6179-6749c14fcf96.png)

画像は[こちら](https://qiita.com/masakura/items/be2215d4ac8c20b5cd4b)からお借りしました。
ChromeでもDOMをCanvasにレンダリングして画像を取得するには

# 背景

Firefoxだと

[DOM オブジェクトを Canvas に描画する - HTML | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Canvas/Drawing_DOM_objects_into_a_canvas)

の方法が使える、

## しかし！

2018年4月時点のGoogleのChromeやChromiumだとこの方法やると、
作成したCanvasがOrigin clean出ない為、難しいエラーがでる。
(このMDNのページにはWebKitのバグの為との記述があるけどどうなんだろ)


たとえば、この方法でつくったCanvasをThree.jsのテクスチャとして使おうとすると

```txt
Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.
```

と怒られてしまう。


# 解決方法

Blobの代わりにURLで指定すれば解決した。

```js

const url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg_data);
```


<p data-height="265" data-theme-id="0" data-slug-hash="wjgomG" data-default-tab="js,result" data-user="kjunichi" data-embed-version="2" data-pen-title="wjgomG" class="codepen">See the Pen <a href="https://codepen.io/kjunichi/pen/wjgomG/">wjgomG</a> by Junichi Kajiwara (<a href="https://codepen.io/kjunichi">@kjunichi</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# なんでわかったのか

- http://cburgmer.github.io/rasterizeHTML.js/

ここのサンプルがChromeでもうごいたので、Githubのリポジトリを
眺めていたら、

rasterizeHTML.js/src/svg2image.js
に

```js
if (useBlobs) {
    return URL.createObjectURL(new Blob([svg], {"type": "image/svg+xml"}));
} else {
    return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
}
```

# 関連記事

- [Raspberry Piの温度をgRPCを使ってElectronで作ったデスクトップマスコットに表示させた](https://abrakatabura.hatenablog.com/entry/2018/06/16/070747)