OmniAICreator/Qiita-1.07M huggingface dataset:
畳み込みニューラルネット Part4 [TensorFlow2.0でDeep Learning 7]

([目次はこちら](http://qiita.com/kumonkumon/items/6fd05963df92e9eec8c0))

#はじめに
[畳み込みニューラルネット Part4 [TensorFlowでDeep Learning 7]](http://qiita.com/kumonkumon/items/6fab067bf06da9feaa9f)をtensorflow2.0で実現するためにはどうしたらいいのかを書く(`tf.keras`)。

# コード
Python: 3.6.8, Tensorflow: 2.0.0a0で動作確認済み

[畳み込みニューラルネット Part4 [TensorFlowでDeep Learning 7]](http://qiita.com/kumonkumon/items/6fab067bf06da9feaa9f)([mnist_fixed_cnn.py](https://github.com/kumon/DeepLearningExercise/blob/master/src/tensorflow/mnist_fixed_cnn.py))を書き換えると、

[v2/mnist_fixed_cnn.py](https://github.com/kumon/DeepLearningExercise/blob/master/src/tensorflow/v2/mnist_fixed_cnn.py)

```v2/mnist_fixed_cnn.py
from helper import *

IMAGE_WIDTH, IMAGE_HEIGHT = 28, 28
CATEGORY_NUM = 10
LEARNING_RATE = 0.1
FILTER_NUM = 2
FEATURE_DIM = 100
KEEP_PROB = 0.5
EPOCHS = 15
BATCH_SIZE = 100
LOG_DIR = 'log_fixed_cnn'


class Prewitt(tf.keras.layers.Layer):
    def build(self, input_shape):
        v = np.array([[ 1, 0, -1]] * 3)
        h = v.swapaxes(0, 1)
        self.kernel = tf.constant(np.dstack([v, h]).reshape((3, 3, 1, 2)), dtype = tf.float32, name='prewitt')
        self.built = True

    def call(self, x):
        x_ = tf.reshape(x, [-1, x.shape[1], x.shape[2], 1])
        return tf.abs(tf.nn.conv2d(x_, self.kernel, strides=[1, 1, 1, 1], padding='SAME'))

if __name__ == '__main__':
    (X_train, y_train), (X_test, y_test) = mnist_samples()

    model = tf.keras.models.Sequential()
    model.add(Prewitt((IMAGE_HEIGHT * IMAGE_WIDTH, FILTER_NUM), input_shape=(IMAGE_HEIGHT, IMAGE_WIDTH)))
    model.add(tf.keras.layers.MaxPool2D(pool_size=(2, 2)))
    model.add(tf.keras.layers.Flatten())
    model.add(tf.keras.layers.Dense(FEATURE_DIM, activation='relu'))
    model.add(tf.keras.layers.Dropout(rate=1-KEEP_PROB))
    model.add(tf.keras.layers.Dense(CATEGORY_NUM, activation='softmax'))
    model.compile(
            loss='categorical_crossentropy',
            optimizer=tf.keras.optimizers.SGD(LEARNING_RATE), metrics=['accuracy'])

    cb = [tf.keras.callbacks.TensorBoard(log_dir=LOG_DIR)]
    model.fit(X_train, y_train, batch_size=BATCH_SIZE, epochs=EPOCHS, callbacks=cb, validation_data=(X_test, y_test))
    print(model.evaluate(X_test, y_test))
```

と書ける。
[v2/mnist_fixed_cnn_pl.py](https://github.com/kumon/DeepLearningExercise/blob/master/src/tensorflow/v2/mnist_fixed_cnn_pl.py)に、単純に一行入れただけ。

```py
model.add(tf.keras.layers.Dropout(rate=1-KEEP_PROB))
```

ちゃんと動いている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127038/e7152448-5d81-a58c-2092-00ac47144459.png)
vim プラグイン 入れ方 (dein.vimの導入方法から)

#まえおき
なんかようやくvimのプラグインの入れ方を理解できたので、それについて書いていきます。
Unix系（Mac, Linux）を使っている前提で話が進みます。

#プラグインマネージャー(dein)の導入
私は「dein」を使うことにしました。（なんか他にも色んなプラグインマネージャーがあるらしい）
早速入れていきましょう。
基本的に[dein.vim](https://github.com/Shougo/dein.vim)に書いてある通りにやります。英語がわからん人のために、やり方をここにも書いておきます。

####(1) 下のスクリプトを端末（ｺﾏﾝﾄﾞﾌﾟﾛﾝﾌﾟﾄ、ﾀｰﾐﾅﾙ)で走らせろ

これと
`curl https://raw.githubusercontent.com/Shougo/dein.vim/master/bin/installer.sh > installer.sh`

これ
`sh ./installer.sh ~/.cache/dein`

を走らせると、deinがpcに入ります。場所は上にも書いてありますが、`~/.cache/dein`です。
隠しファイルも見える設定にしないと多分見えません。

####(2) ~/.vimrcに下の内容を書け
`vim ~/.vimrc`と端末に打ち込んで、中にこれをコピペしましょう。

```
if &compatible
  set nocompatible
endif
" Add the dein installation directory into runtimepath
set runtimepath+=~/.cache/dein/repos/github.com/Shougo/dein.vim

if dein#load_state('~/.cache/dein')
  call dein#begin('~/.cache/dein')

  call dein#add('~/.cache/dein/repos/github.com/Shougo/dein.vim')
  call dein#add('Shougo/deoplete.nvim')
  if !has('nvim')
    call dein#add('roxma/nvim-yarp')
    call dein#add('roxma/vim-hug-neovim-rpc')
  endif

  call dein#end()
  call dein#save_state()
endif

filetype plugin indent on
syntax enable
```
「えぇ〜！？　もう中にちょっとした設定書いちゃっただよ〜…」って人は、その設定の上側にこれを置いてください。多分大丈夫です。僕のは動きました。僕のは。

####(3) vimを開いて下のを打ってね
`:call dein#install()`って打ちます。これでdeinの導入、初期設定は終わりです。お疲れやまでした。

#プラグインの導入
ぼくはここで引っかかりました。（アホなので）
とても簡単です。~/.vimrc をまた開いてください。そこに、

```
if &compatible
  set nocompatible
endif
" Add the dein installation directory into runtimepath
set runtimepath+=~/.cache/dein/repos/github.com/Shougo/dein.vim

if dein#load_state('~/.cache/dein')
  call dein#begin('~/.cache/dein')

  call dein#add('~/.cache/dein/repos/github.com/Shougo/dein.vim')
  call dein#add('Shougo/deoplete.nvim')
  if !has('nvim')
    call dein#add('roxma/nvim-yarp')
    call dein#add('roxma/vim-hug-neovim-rpc')

　　 " ここに　call dein#add('[入れたいプラグインのurl]') って入れてくだけ

  endif

  call dein#end()
  call dein#save_state()
endif

filetype plugin indent on
syntax enable
```
**ね？簡単でしょう？**
ちなみにdeinはGitHubのものなら、https://github.com/ は省略できます。
つまり、Hogeさんのhuga.vimってプラグインを入れたいときは、
`call dein#add('Hoge/huga.vim)`ってな感じで追加してあげれば良い。便利＾〜

入れたいプラグインを記述したら、保存して、vimに
`:call dein#install()`って打ち込みましょう。これで導入されます。やったあ！！

#終わりに
単純に入れ方を雑に説明しただけなので、フォルダがどうなってる〜、とか、これこれこういうプラグイン入れると良いよ〜、っていうような内容は他のサイトにお任せします。（僕には何もわからないので）
プラグイン導入に詰まってしまった、僕みたいな人が救済されるといいなって思います。
では！！
[windows]　PaintsChainerを使ってみた

####はじめに
Python初心者が『自動で線画を着色するWEBアプリ』PaintsChainerを使ってみました。
おもしろかった！

####①Pythonのダウンロードをする
python公式サイト↓
(https://www.python.org/community/logos/)
Downloadsにマウスを重ねると、表示が出るので、クリック。

####②PaintsChainerをダウンロードする
ダウンロード↓
(https://github.com/taizan/PaintsChainer)
右上にある『Clone or download』→『Download ZIP』をクリック。

####③学習済みモデルをダウンロードする
ダウンロード↓
(https://paintschainer.preferred.tech/downloads/)
・liner_f
・unet_128_standard
・unet_512_standard
以上の３つをダウンロードする。

####④PaintsChainer内に学習済みモデルを入れる
『PaintsChainer』を解凍し、『cgi-bin』→『paint_x2_unet』に、『models』フォルダを新規作成する。
そこに、③でダウンロードした学習モデルを入れる。

####⑤コマンドプロンプトで
コマンドプロンプトを開き、
pip install chainer
pip install opencv-python
をインストールする。

####⑥PaintsChainerを起動させる
コマンドプロンプトにて、『PaintsChainer-master』の階層までいき、
python server.py -g -1
のコマンドを入力する。

GUP:-1
start
load model
serving at loadhost:8000
が出たら、起動成功！

####⑦ブラウザにアクセス
http://localhost:8000/static/にアクセスしてPaintsChainerをやってみる。

※PaintsChainer
着色を押すと、自動で着色されます。
また、パレットなどから好きな色を選び、線画してからだとその部分がその色に着色されます。

####スペシャルサンクス
(https://qiita.com/taizan/items/7119e16064cc11500f32)
(https://www.jami2010.com/paintschainer-win/)
以上の記事を参考にさせていただきました。
さらに詳しく知りたい方はこちらへどうぞ。
畳み込みニューラルネット Part3 [TensorFlow2.0でDeep Learning 6]

([目次はこちら](http://qiita.com/kumonkumon/items/6fd05963df92e9eec8c0))

#はじめに
[畳み込みニューラルネット Part3 [TensorFlowでDeep Learning 6]](https://qiita.com/kumonkumon/items/974cb3e0f0a346c7ff1b)をtensorflow2.0で実現するためにはどうしたらいいのかを書く(`tf.keras`)。

# コード
Python: 3.6.8, Tensorflow: 2.0.0a0で動作確認済み

[畳み込みニューラルネット Part3 [TensorFlowでDeep Learning 6]](https://qiita.com/kumonkumon/items/974cb3e0f0a346c7ff1b)
([mnist_fixed_cnn_pl.py](https://github.com/kumon/DeepLearningExercise/blob/master/src/tensorflow/mnist_fixed_cnn_fc.py))を書き換えると、

[v2/mnist_fixed_cnn_pl.py](https://github.com/kumon/DeepLearningExercise/blob/master/src/tensorflow/v2/mnist_fixed_cnn_pl.py)

```v2/mnist_fixed_cnn_pl.py
from helper import *

IMAGE_WIDTH, IMAGE_HEIGHT = 28, 28
CATEGORY_NUM = 10
LEARNING_RATE = 0.1
FILTER_NUM = 2
FEATURE_DIM = 100
EPOCHS = 15
BATCH_SIZE = 100
LOG_DIR = 'log_fixed_cnn_pl'


class Prewitt(tf.keras.layers.Layer):
    def build(self, input_shape):
        v = np.array([[ 1, 0, -1]] * 3)
        h = v.swapaxes(0, 1)
        self.kernel = tf.constant(np.dstack([v, h]).reshape((3, 3, 1, 2)), dtype = tf.float32, name='prewitt')
        self.built = True

    def call(self, x):
        x_ = tf.reshape(x, [-1, x.shape[1], x.shape[2], 1])
        return tf.abs(tf.nn.conv2d(x_, self.kernel, strides=[1, 1, 1, 1], padding='SAME'))

if __name__ == '__main__':
    (X_train, y_train), (X_test, y_test) = mnist_samples()

    model = tf.keras.models.Sequential()
    model.add(Prewitt((IMAGE_HEIGHT * IMAGE_WIDTH, FILTER_NUM), input_shape=(IMAGE_HEIGHT, IMAGE_WIDTH)))
    model.add(tf.keras.layers.MaxPool2D(pool_size=(2, 2)))
    model.add(tf.keras.layers.Flatten())
    model.add(tf.keras.layers.Dense(FEATURE_DIM, activation='relu'))
    model.add(tf.keras.layers.Dense(CATEGORY_NUM, activation='softmax'))
    model.compile(
            loss='categorical_crossentropy',
            optimizer=tf.keras.optimizers.SGD(LEARNING_RATE), metrics=['accuracy'])

    cb = [tf.keras.callbacks.TensorBoard(log_dir=LOG_DIR)]
    model.fit(X_train, y_train, batch_size=BATCH_SIZE, epochs=EPOCHS, callbacks=cb, validation_data=(X_test, y_test))
    print(model.evaluate(X_test, y_test))
```

と書ける。
[v2/mnist_fixed_cnn_fc.py](https://github.com/kumon/DeepLearningExercise/blob/master/src/tensorflow/v2/mnist_fixed_cnn_fc.py)に、単純に一行入れただけ。

```py
model.add(tf.keras.layers.MaxPool2D(pool_size=(2, 2)))
```

ちゃんと動いている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127038/421a50ae-d45d-1d55-73e4-6ee6ae90e470.png)
とあるRailsエンジニアのリモートワークトライアル 2019-06-02 on Twitter

# とあるRailsエンジニアのリモートワークトライアル 2019-06-01 on Twitter
 [*](https://twitter.com/YumaInaura/status/1134840882140766210")
<https://github.com/YumaInaura/YumaInaura/issues/2114>
# とあるRailsエンジニアのリモートワークトライアル 2019-06-01 on Twitter [ポエム] on @Qiita
 [*](https://twitter.com/YumaInaura/status/1134853958134951937")
<https://qiita.com/YumaInaura/items/6d28f283006be81e427c>
# 就職祝いに妻が宅配のココイチのカツカレーライスのカツの切れ端をひとくちくれました。
ありがとう。
 [*](https://twitter.com/YumaInaura/status/1134961238520131585")

# 物事の達成のためにメンタルモデルの獲得を最重視している僕はなんて悠長でダメなエンジニアなんだろうかとも思うけれど実は本当にものすごく重要なことであるのだよ多分きっと。

 [*](https://twitter.com/YumaInaura/status/1134987755581202432")

# 仕事に全身全霊を投げせば短い余暇の時間はさほど美しく感じられるだろう。
そして美味しい美酒のビールを飲み干すんだ。
 [*](https://twitter.com/YumaInaura/status/1134989003898347520")

# 本当は僕だって爆速エンジニアになりたいんですよ？
 [*](https://twitter.com/YumaInaura/status/1135016307114385409")

# 仕事ばかりの人生のままで死んだら後悔するだろうけれどどちらにせよ死に際になったら終わりはもうすぐそこなわけだしどちらでも同じじゃない？
 [*](https://twitter.com/YumaInaura/status/1135028622924832768")

# 4年前に比べて体力が1/4ぐらいになってるけど？それでも前の仕事の慣れだけじゃなくて新しい業務もそれなりにこなして認めてもらったはずだし。
本当に全身全霊で知恵の発揮に全振りしないとな？成長パラメータを。
 [*](https://twitter.com/YumaInaura/status/1135036082758676480")

# 仕事に全身全霊を投げせば短い余暇の時間はさほど美しく感じられるだろう。
そして美味しい美酒のビールを飲み干すんだ。 2019-06-02 on Twitter
 [*](https://twitter.com/YumaInaura/status/1135050937544970240")
<https://github.com/YumaInaura/YumaInaura/issues/2119>
# 仕事してる気になってる瞬間が本当に悲しいし何も進んでないことが手に取るように分かる。
仕事してる気になったまままるで気付かないよりよいんだろうか？
 [*](https://twitter.com/YumaInaura/status/1135086710860083200")

# ところでエンジニア論をいくら語ってもエンジニア力はわずかたりとも向上しないかもしれない。

 [*](https://twitter.com/YumaInaura/status/1135113176721215489")

# 家具によってエンジニアの生産性は1000倍ぐらい変わるという直感は本当だったんだ！多分。

 [*](https://twitter.com/YumaInaura/status/1135119156494290944")

# 人の役に立ってるみたいです。


システムエンジニアの弱点を武器にする方法  Qiita
 [*](https://twitter.com/YumaInaura/status/1135128863262986240")
<https://qiita.com/YumaInaura/items/c9de45727f64c6a367fe?utm_campaign=email&utm_content=link&utm_medium=email&utm_source=public_comment#comment-1f57eb16743160430398>



# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2127








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Andoid Studio Training Days 001

日々の開発の中でこれは記錄して置こう思う開発にメモです。
Android Studio2.3.3
![スクリーンショット 2019-09-13 17.42.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/fc7451bb-7b68-4ec0-025f-3bd53619dc3a.png)
上記の様にAndroid Studioを設定する（ただしファイル表示上下記の設定にする場合もあり）
![スクリーンショット 2019-09-13 18.00.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/ad9f5916-1e30-d678-d1cd-0e1ff5ae1a24.png)
どうも違うらしい

# 想像とは違うっぽい
- 全然上手くいかないので改めて調べてみる
- API実行に関しては言えばどうも自分が思っている事は違うっぽい
    - 自分の想像：URLを叩くとばち〜んと表示してくれる
    - 実際：[ここ](https://qiita.com/nayuneko/items/ca2651e3a613c8e3256a)を見ると少し加工が必要みたい
    - 引続きまた明日


# 今日の気持ち
- git問題は一先ず後回しにしよう
- 昨日更新出来なかったけど毎日更新しよう。やっぱコンピュータは面白い:slight_smile:
- 関係ないけどスマートウォッチ買いました:relaxed:
RevitのUniqueIdとIFCのGUIDとの変換

# RevitのUniqueIdとElement Id
突然ですが、Autodesk Revitの話です。最近はRevitAPIの勉強をしています。
BIMの標準フォーマットであるIFCを扱う際によく話題になるのがGUIDです。構成要素を表す一意なIDなのですが、これとBIMツール（Revit)との関係性はどういったものだろうと調べてみたら、結構システマティックに変換されていました。ソースは以下です。
[UniqueId, DWF and IFC GUID](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51703/3f64e609-1f8a-904a-1adb-2b8abea4ee0b.png)

# UniqueIDを調べる
[RevitLookUp](https://github.com/jeremytammik/RevitLookup)といういけてるアドインを使って、Revitで要素をのぞいてみましょう。何らかの要素を選択して、アドインのリボンタブに現れたRevit Lookupを選択し、「Snoop Current Selection」のコマンドを選択すると以下のように要素の詳細を除くことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51703/7bd7cad6-5b17-374e-4431-e5732f877c99.png)

Fieldに現れたIdがElement Idで、下のほうにはUniqueIdが見えます。Element Idはプロジェクトごとに作られる要素番号で、プロジェクトごとに重複がある可能性がありますが、UniqueIdは一意です。文字数が8-4-4-4-12-8となっており、最後の8文字がポイントです。上記のUniqueIdに対応するIFCのGUIDは「0bTZmmVZ5EkPWSD665dQH1」です。さて、どのようになっているのでしょうか。ちなみにDWGにもGUIDがありますが、これとIFCのGUIDは等価です。IFCは文字数制約のために、DWGのGUID（128 bit)をエンコードしているようです。

# 変換ルール
UniqueIdとGUIDの変換には4つのルールが用いられているようです。

1. ElementがIFCのインポート後にエクスポートされた場合、元々IFC Entityに含まれていたGUIDを保持する。非常にまれなケース。
1. ElementとIFC Entityの間に1対1の対応がある場合は、UniqueIdから抽出したEpisodeIdから（中間的な）GUIDを生成し、Element IdとXORすることでGUIDを作成する。
1. IfcBuildingやIfcProjectなど、Revitに対応する要素がない特殊なIFC Entity、およびウィンドウやドアのインスタンスなど、要素が重複している場合は、プロジェクトのDetach GUIDを使用してGUIDを生成し、ElementIDとの排他的論理和をとることで生成する。
1. 上記以外のIFC Entityについては、その場でGUIDを作成する。

分かるようなわからないような感じですね。幸運なことに、サイトにはCで書いた変換コードと、それをdllにして利用法を示したC#のVisual Studioのソリューションが置かれていました。しかしながら、記事が2009年のものなのでいかんせん古いです。Visual Studio 2017(.NET Framework 4.8)で動くように修正しておきました。Test2の中のコードを実行すると以下のような出力が得られます。わざわざコードは載せませんが、`IfcGuid.dll`由来の`getString64FromGuid`などの関数を定義して、それを呼んでいるだけです。

最初の図で見せたUniqueId「25763c30-7e31-4eb9-981c-34618599c650-00046211」を変換してみましたが、想定通りGUID「0bTZmmVZ5EkPWSD665dQH1」が得られました。この辺のロジックは10年近く変わってないようですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51703/c7b7e212-fdc2-ac25-ba98-b99ebff2d943.png)

変換したソリューションは以下に公開しています。
[Revit_UniqueId_Converter](https://github.com/takashikasuya/Revit_UniqueId_Converter)

# 参考
[UniqueId, DWF and IFC GUID](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51703/3f64e609-1f8a-904a-1adb-2b8abea4ee0b.png)
Windowsの特定のディレクトリでコマンドプロンプトを開く方法


今いるディレクトリをコマンドプロンプトから操作したい場合、画面上部のディレクトリが表示されている項目欄にフォーカスし、``cmd``と入力すると、今開いているディレクトリにいる状態でコマンドプロンプトが起動します。

今エクスプローラで開いているディレクトリ上でgitコマンドを叩きたい時などに重宝します。
![cmd.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77722/18a16325-b83e-dd18-f1df-1166bacc2b26.gif)

コマンドプロンプトを立ち上げてパスを毎回貼り付けていた方はぜひ、この方法を使ってみてください🌽
random dithering 改

Unityのシェーダーで、[ランダムディザリング](https://www.visgraf.impa.br/Courses/ip00/proj/Dithering1/random_dithering.html)を改造し、適当に偏ったモザイクをつくりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17747/a9c35390-dd82-9430-28d5-b77b3edad067.png)


```glsl

Shader "dither"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Split("_Split",range(1,10)) = 1
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float _Split;
            float4 _MainTex_ST;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }


            float rand(float2 co) {
                float a = frac(dot(co, float2(2.067390879775102, 12.451168662908249))) - 0.5;
                float s = a * (6.182785114200511 + a * a * (-38.026512460676566 + a * a * 53.392573080032137));
                float t = frac(s * 43758.5453);
                return t;
            }


            fixed4 frag (v2f i) : SV_Target
            {

                float split = pow( 2, floor( _Split ) );

                float2 offset = float2( 0, floor( _Time.z * split ) );
                float r = rand( floor( i.uv * split + offset ) / split );

                float size = split * floor( abs(r) * 25 + 2 );

                float2 uvv = floor( i.uv * size ) / size;

                // sample the texture
                fixed4 col = tex2D(_MainTex, uvv);
                
                col.x = step( rand( uvv ), col.x );
                col.y = step( rand( uvv ), col.y );
                col.z = step( rand( uvv ), col.z );

                return col;
            }
            ENDCG
        }
    }
}

```
GolangからSlackに画像を投稿する

# Golang から Slack API を使って，画像を投稿する

## Overview
golangを使って画像ファイルをslackに投稿します．
slack apiを利用しますが，テキストを投稿する場合とは少し異なる準備が必要なので，画像投稿までの手順について整理しました．

## Contents
- [事前準備](#事前準備)
- [画像を投稿するコード](#画像を投稿するコード)
- [テキストを投稿するコード](#テキストを投稿するコード)
- [注意事項](#注意事項)
- [参照サイト](#参照サイト)

## 事前準備
### 投稿に必要な権限について
slack に画像を投稿するには，**files.upload**のスコープを備えた api token が必要になります．
*files.uploadについては[こちら](https://api.slack.com/methods/files.upload)

![Screen Shot 2019-06-03 at 0.02.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261058/2287b050-d0e5-27b3-c7b2-eb08e43a78f0.png)



上記を満たすスコープは
1. bot
2. files:write:user

の２種類があるので，今回は **bot** スコープを利用します．
ちなみに， **files:write:user** のスコープを利用すると，slackへの画像投稿主がトークン作成者になります．
作成者による投稿と api による投稿の区別がつかなくなってしまうので， bot スコープによる投稿をお勧めします．

### slack api token の取得
[Slack API | Slack](https://api.slack.com/) にアクセスして， Your Apps から bot を生成してください．
生成が完了すると，以下の **Bot User OAuth Access Token** から bot 権限をもつ api token が取得できます．
このトークンを利用して， slack に画像を投稿します．

![Screen Shot 2019-06-03 at 0.17.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261058/6282cc2d-a80d-18d8-3866-fad09db4346a.png)

## 画像を投稿するコード
取得した bot スコープを持つ api token と，画像を投稿するチャンネル名を設定します．
実環境で運用する場合は，環境変数に設定した上で，  **os.Getenv()** 経由で api token を受け取ってください．

```go
package main

import (
	"os"

	"github.com/nlopes/slack"
)

var (
	slackAPIToken = "<先ほど取得した， bot スコープを持つ api token>"
	slackChannel  = "<画像を投稿するチャンネル名>"
)


func main() {

	if err := postImage(slackAPIToken, slackChannel); err != nil {
		panic(err)
	}

}

func postImage(slackAPIToken, slackChannel string) error {

	file, err := os.Open("<投稿する画像へのパス>")
	if err != nil {
		return err
	}

	api := slack.New(slackAPIToken)

	_, err = api.UploadFile(
		slack.FileUploadParameters{
			Reader:   file,
			Filename: "upload file name",
			Channels: []string{slackChannel},
		})

	return err
}
```

上記コードを起動すると， *変数 slackChannel* で指定した slack channel に画像が投稿されます．

## テキストを投稿する場合
**bot** スコープには画像を投稿する権限（**chat.postMessage**）もあります．
したがって，これまでに設定した環境からテキストを投稿することも可能です．

![Screen Shot 2019-06-03 at 0.36.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261058/13c6ca51-8156-ce1f-5784-d345a45895f2.png)

### テキストを投稿するコード

```go
package main

import (
	"os"

	"github.com/nlopes/slack"
)

var (
	slackAPIToken = "<bot スコープを持つ api token>"
	slackChannel  = "<画像を投稿するチャンネル名>"
)

func main() {

	if err := postText(slackAPIToken, slackChannel); err != nil {
		panic(err)
	}

}

func postText(slackAPIToken, slackChannel string) error {

	text := "This is test."

	api := slack.New(slackAPIToken)

	_, _, err := api.PostMessage(
		slackChannel,
		slack.MsgOptionText(text, false))

	return err
}
```

## 注意事項
今回の slakc api では，

- api token 作成者による投稿
- api token を利用した投稿

の２つを区別するために **bot** 権限を利用しました．

しかし，これまでに見たように，
「画像をアップロードする権限を与えたら，テキストの投稿もできるようになった」
というような，意図しない権限付与が発生するので， **bot** スコープの乱用にはご注意ください．

## 参照サイト
- [Slack API](https://api.slack.com/)
vue-cliで作成したプロジェクトのエンドポイントを変えたい

vue-cliでプロジェクトを作成した際に、エンドポイントになっているファイル名を変更の仕方がわからなかった。その時の調査した内容と設定方法をメモ

## 状況
vue-cliでプロジェクトを作成した時に、TypeScriptを選択し忘れてしまい後から追加した。(プロジェクトを作る直してもよかったのですが、何となくそのまま続行しました。。)

## エンドポイントになっているファイルを確認
この時のディレクトリ構成

```
test-project
├ node_modules
├ public
├ src
│   ├ assets
│   ├ components
│   ├ App.vue
│   └ main.js
├ package.json
・・・・
```
src/main.jsがエンドポイントになっている。これをtsファイルに変更したい。(src/main.js → src/main.ts)
エンドポイントを指定している設定ファイルがあると思ったのですが、見つからず。。。
実行時(yarn run serve)の内容を確認してみることにしました。

## yarn run serveで実行されている内容は？
package.jsonの中を確認

```
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
```

```vue-cli-service serve```の中身を確認。

こちら参照させていただきました →「[vue-cliのリポジトリ](https://github.com/vuejs/vue-cli/blob/v3.7.0/packages/@vue/cli-service/lib/Service.js#L292)」  
  ユーザーがvue.config.jsを作成している場合、その内容で実行オプションが上書きされるようです。
  (なにも設定してないとsrc/main.js。TypeScriptのオプションをつけてプロジェクトを作成していた場合はsrc/main.tsがデフォルト値になっていました。)

## vue.config.jsを作成
プロジェクトルートにvue.config.jsファイルを作成。
今回はエントリーポイントのファイルを変更したかったので以下の設定を書きました。(設定値については[公式ドキュメント](https://cli.vuejs.org/config/#pages)を参考にしました。)

```
module.exports = {
    pages: {
      index: {
        // エントリーポイントのファイル名
        entry: 'src/main.ts'
      }
    }
  }
```

無事エントリーポイントがsrc/main.js → src/main.tsに変更できました！

vue-cliで簡単にvueのプロジェクトを作成できるようになった反面、内部でどんな処理が走っているか全然わかってなかったので今回少しだけ理解を深められた気がします。
やってくれている系の処理を少しずつ理解していきたい。。
Alexaスキル開発 プログラミングノートを作ってみた

「雑食系エンジニア」兼「テック系YouTuber」の勝又健太さんが
Youtubeでプログラミングノートの作り方を公開されていたので、
自分もマネしてAlexaスキルのプログラミングノートを作ってみました。

[Alexa Skill on Pythonのプログラミングノート](https://gist.github.com/toctoc0352/53e9803d286fcd507e774d4cba605d4a)

ちなみに、自作スキル作成中の中で勉強になったのは以下です。
 > 53行目: .ask(speech_text)によってユーザーのマイクがオンになりユーザーの応答を待ちます。

以下、参考にさせていただいた動画です。
[![プログラミングノートの作り方](http://img.youtube.com/vi/bquXw52kvU0/0.jpg)](https://youtu.be/bquXw52kvU0)
Flutterでよく使う構文まとめ

## main.dart

```dart
import 'package:flutter/material.dart';
import './pages/login.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: HomePage());
  }
}
```
## 画面遷移

```dart
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondRoute()),
);
```
sizeToFitを使わずにUILabelの文字を上揃え（上寄せ）にする

# 概要
iOS開発を行っていると、文字の並びを上揃え（上寄せ）にしたいときがあると思います。
例えば、以下のような時です。
![ダウンロード.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274336/a8b1cc3d-1210-e9b2-e2b3-59256f730006.gif)
上図のような、UICollectionViewを用いてセルが横並びになっている画面を作りました。この各セルにはUILabelがあり、そのUILabelは最大2行分の高さになるとします。
普通に実装すると、文字の1番上の位置はバラバラになると思います。

これを調整しようとUILabelのプロパティを調べてみると、左揃えや中央揃えはありますが上揃えがないことに気が付きます。
正直不親切だと思います。（Appleさんプロパティ追加して、、、）
ですので、以下でこの問題への対処法を書いていきます。
# 原因
原因はUILabelの文字の高さの位置が、必ずUILabelの高さの中央に来るように補正されることです。
文字が全部で1行のときはその1行がUILabelの中央に、2行のときは上の行と下の行の隙間がUILabelの中央に補正される、というわけですね。
![label2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274336/f7a57bb0-f2cc-4fd4-25f8-6f5438743a5a.jpeg)
ですので文字を上揃えにするためには、UILabelの高さから調整する必要があります。
# やり方1: sizeToFit()
UILabelのメソッドの一つにsizeToFit()というものがあります。これは呼ぶとUILabelの幅と高さが、文字がピッタリ収まる大きさに調整されます。
これを用いてUILabelの高さを調整し、その後でUILabelを上揃えにすれば文字も上揃えになります。

```swift:sampleCell.swift
func setupLabelFrame() {
    var fixedFrame = self.label.frame
    self.label.sizeToFit()
    fixedFrame.size.height = self.label.frame.size.height
    self.label.frame = fixedFrame
}
```
ただしこのやり方では、文字の中身が動的に変わる場合はその都度高さと位置の調整が必要になります。
#やり方2: AutoLayout + numberOfLines = 0
私がよく利用する方法がこちらです。
sizeToFitのように都度調整する必要がなく、原理的にもわかりやすいのでおすすめです。


1. UILabelにAutoLayoutを用いて、左辺と右辺と上辺のConstraintを追加する
2. UILabelのnumberOfLinesを0にする

![プロパティ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274336/ac105363-7270-17a0-baed-e6dbbbf3bfe7.jpeg)
3. いったん最大行数分の高さをで表示し、その高さがUILabelの高さの最大値となるようにConstraintを追加する

![スクリーンショット 2019-06-02 23.51.38.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274336/c819e047-4e3e-6034-6edc-72f4f71db010.jpeg)

これで文字が上揃えになります。

原理を説明すると、1でUILabelの伸びていく方向を下方向に限定して、2で文字の量によって高さを自動調節されるようにして、3でその伸び幅の最大値を決めるって感じですね。
これによってUILabelの大きさが文字によって自動的に決まってくれるようになります。
![ダウンロード (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274336/43ae43ac-a8de-6760-530d-71fab79a51a2.gif)
# 終わりに
正直、こんな回りくどい実装しなくてもUILabelのプロパティに上揃えを用意してくれれば解決なのですが、、、
しかし需要がありそうなのに実装されないのは何かしら理由があるのでしょう。
いずれにしろiOS開発にはコツがいるなと感じる今日この頃です。。。
[Python]0~n-1までのランダムな数字を持つリストを作る方法

0~n-1までのランダムな順番の数字を持つリスト

例えば、nが6の時は
[3, 5, 0, 1, 4, 2]
というリストが得られる。

コードは以下の通り。

```python:example.py
list = random.sample(range(n), k=n)
```

[引用元](https://note.nkmk.me/python-random-choice-sample-choices/)
Ansibleでサーバ毎に変数ファイルを使い分ける

最近、新規のサーバーを構築するのに、Ansibleを使用しているのですが、
どうやったら各サーバー毎にvarsファイルを読み込ませることが出来るのか。。

悩んでいたら、@tanuki_mujina様のこの記事を拝見しました。大変わかりやすい記事をありがとうございます！
[Ansibleでサーバ毎にユニークな処理を行う](https://qiita.com/tanuki_mujina/items/43aa769c2ddc8a3a98f9)

しかし、自分の場合は、名前解決のしていない新規サーバーを一から構築したかったので、
IPアドレスだけでどうにかできないものかと、考えた末、前述の記事をヒントにこういう方法を見つけました。
※多分もっといい方法はあるのかなと思います。。ご教授いただけるとすごく喜びます。

# インベントリファイル

まずインベントリファイルを以下の形で記述します。

```yml:hosts
[TestServer1]
192.168.0.5

[TestServer1:vars]
ansible_ssh_user=Ansible
ansible_ssh_pass=******
ansible_sudo_pass=******
ansible_ssh_port=22

[TestServer2]
192.168.0.6

[TestServer2:vars]
ansible_ssh_user=Ansible
ansible_ssh_pass=******
ansible_sudo_pass=******
ansible_ssh_port=22
```

# 変数ファイルの作成

varsディレクトリを作成し、ファイル名を「リモート対象のIPアドレス.yml」とします。

```yml:vars/192.168.0.5.yml
test: testno1
```

```yml:vars/192.168.0.6.yml
test: testno2
```

# Playbookの作成

以下のようにPlaybookを記述します。
前述の記事では、ansible_hostname を使い、読み込み対象のvarsファイルを動的に生成していたのですが、今回はIPアドレスを使用したいので、 inventory_hostname を使用します。
inventory_hostname には、インベントリファイルに書かれたホスト名が設定されます。

```yml:site.yml
- hosts: all
  vars_files:
    - vars/{{ inventory_hostname }}.yml
  tasks:
    - debug: msg="TestServer={{test}}"
```

# Playbookの実行

実行結果は以下のようになりました。

```bash
$ ansible-playbook -i hosts site.yml

PLAY [all] ****************************************************************************************

TASK [Gathering Facts] ****************************************************************************
ok: [192.168.0.6]
ok: [192.168.0.5]

TASK [debug] **************************************************************************************
ok: [192.168.0.5] => {
    "msg": "TestServer=testno1"
}
ok: [192.168.0.6] => {
    "msg": "TestServer=Testno2"
}

PLAY RECAP ****************************************************************************************
192.168.0.5                : ok=2    changed=0    unreachable=0    failed=0    skipped=0    rescued=0    ignored=0
192.168.0.6                : ok=2    changed=0    unreachable=0    failed=0    skipped=0    rescued=0    ignored=0
```

ちゃんと各々のサーバー毎にユニークに変数が読み込まれていることがわかります。

# その他参考
・[Using Variables](https://docs.ansible.com/ansible/latest/user_guide/playbooks_variables.html)
・[Ansible マジック変数の一覧と内容](https://qiita.com/h2suzuki/items/15609e0de4a2402803e9)
PlantUMLのテクニック

[PlantUML](http://plantuml.com/ja/index)というフリーのUML記述ツールが有る。これでクラス図やシーケンス図を作成する場合、構成管理（svnやGIT）できるようになるため、重宝する。

小ネタとちょっとしたテクニック、以下に記載しておく（随時追加）。なお、インストール方法や基本的な使い方は他の記事に委ねる。

# 画像のサイズ制限
PlantUMLでは画像サイズが4096に制限されます（[詳細](http://plantuml.com/ja/faq)）。この制限によって、少し大きなシーケンス図なんかを書こうとすると、画像が途中で切れてしまうことがある。

この制限を回避するには、環境変数`PLANTUML_LIMIT_SIZE`を設定する必要がある。
[コントロール パネル] > [システムとセキュリティ] > [システム] > [システムの詳細設定] > [詳細設定]タブ > [環境変数(N)...] > [新規(W)...]
変数名:PLANTUML_LIMIT_SIZE
変数値:8192
※変数値は作成するUMLサイズに合わせて、適当な値を指定。

# 背景透過
以下を指定することでエクスポート時に背景を透過して出力することができる。
```skinparam backgroundColor transparent```

# コメントの横並び
PlantUMLのシーケンス図では、基本的にコメントを同一の横位置に並べることができない。
以下のように```/ ```を先頭につけることでメッセージを横並びにできる。

```
@startuml
!pragma teoz true
note over Sally : Scared of Bob
/ note over Alice : initial state of Alice
/ note over Bob : initial state of Bob
Bob -> Alice : hello
& Alice -> Sally : hello from Bob
@enduml
```
![コメントの横並び.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365965/5574a797-01d6-1e46-7785-42f91120a2a5.png)

[参考:Multiple messages on same line in a sequence diagram](https://forum.plantuml.net/6202/multiple-messages-on-same-line-in-a-sequence-diagram)
glances 使い方をまとめる

glancesの使い方をまとめておく。
細かい情報は、https://glances.readthedocs.io/en/stable/index.html
がマニュアル。

# 使おうと思った背景

* unix系サーバで性能情報取る、ってなったときのファーストチョイスは、sarとかiostatとかそのへんのコマンドだと思うのですが、
これらのコマンドは、CPU取る、とかディスク取る、とか複数のリソースを一気に取れない。
* 視覚的な情報じゃない。視覚的な情報にするなら、HPのglanceplusとか・・・
* windows入ってくると、(もちろん)同じ情報取れない。

# インストール

```terminal
pip install glances
pip install bottle  # Webモード使いたい場合
```

# 使い方(とりあえず向け)

モードがいくつかある。
* standaloneモード
その名のとおり、インストールサーバだけで動かすもの。
引数なしで動かすと、GUI(ライク)で動く。
引数つけると、CSVで取得したりできる。

```terminal
glances  # GUI
glances --stdout-csv now,cpu.user,mem.used,load  # csvで取得
```

* Client/Serverモード
その名のとおり、クラサバで動かすもの。XML-RPCで接続するみたい。
他サーバのリソースみたい！というときに使う。

```terminal
glances -s  # サーバ側
glances -c @IPアドレス  # クライアント側
```
* Web Serverモード
その名のとおり、webサーバとして情報を公開するもの。

```terminal
glances -w  # サーバ側
```
これで、ブラウザで開くと見れるらしいのだが、私の環境では、
UnicodeEncodeError: 'latin-1' codec can't encode character '\u65e5' in position 78: ordinal not in range(256)
が出力され、うまく見れなかった。
でも、REST-APIだと普通に見えるので、これはこれで使える。

自分的には、standaloneモードか、Web Serverモードが使えるかな〜と。
* 普段、cronとかで、csvで情報取得しとく
* 性能試験とかだと、GUIで見る
* RESTあると、全台一気に取得とか加工できて、いい感じ

# GUIモード

フィルターの仕方とか、とりあえず「h」でヘルプ見ればよい。ヘルプが親切。
Enterキーで、プロセス名フィルターかけれる。

* 「c」 -> CPU使用率でフィルター
* 「m」 -> MEM使用率でフィルター
* 「i」 -> DISK I/Oでフィルター

ぐらいわかっとけばよさそう。

# コマンドラインオプション
使いそうなのは、

```
glances --stdout PLUGINS_STATS
```

PLUGINは
["alert", "amps", "batpercent", "cloud", "core", "cpu", "diskio", "docker", "folders", "fs", "gpu", "help", "ip", "irq", "load", "mem", "memswap", "network", "now", "percpu", "ports", "processcount", "processlist", "psutilversion", "quicklook", "raid", "sensors", "system", "uptime", "wifi"]
があるみたい。

# API
いろいろあるみたいだけど、基本形として、以下をおさえとけばよさそう。

```http
http://サーバ名:61208/api/3/プラグイン名
http://サーバ名:61208/api/3/pluginslist  # 全プラグイン
http://サーバ名:61208/api/3/プラグイン名/アイテム名
http://サーバ名:61208/api/3/プラグイン名/アイテム名/アイテムの値
```


便利だ！
Redshiftのsortkeyが、負の値になる

Redshiftで、CREATE TABLEをした時にテーブル構成を確認したところ
ソートキーに-1という負の値になっていたので調べた。

# sortkeyについて
ソートキーは、SELECTする時にwhere句で指定するものを選ぶ。
また、ソートキーは複数指定することができる。

```sql:ソートキー指定方法
CREATE TABLE account
(
  id INTEGER NOT NULL,
  name VARCHAR(255) NOT NULL,
  age INTEGER,
  birthday TIMESTAMP,
  created TIMESTAMP
) DISTKEY(created)
  INTERLEAVED SORTKEY(id, name, created);
```

# ソートキーが、-1
インターリーブソートキーを使用した場合は、ソートキーが負の値を持つことがある。
その場合、ソートキーの絶対値が列の位置になる。

[【新機能】Amazon Redshift の Interleaved Sorting機能を試してみた ｜ DevelopersIO](https://dev.classmethod.jp/cloud/aws/redshift-interleaved-sorting/)
[Redshift の Interleaved Sort Key について解説してみる - Qiita](https://qiita.com/t11a/items/a0b175e66ebc623f5cbe)

ソートキーには、

* COMPOUND SORTKEY
* INTERLEAVED SORTKEY

があり、INTERLEAVED SORTKEYを指定した場合は、負の値になる。
ソートキーが0のものは指定していないものになる。


```sql:テーブル構成確認
SELECT * FROM pg_table_def WHERE tablename = 'テーブル名';
```

[PG_TABLE_DEF - Amazon Redshift](https://docs.aws.amazon.com/ja_jp/redshift/latest/dg/r_PG_TABLE_DEF.html)
Vue.jsでQRコード生成

#概要
JavaScriptで動的にQRコードの生成できたりしないかなと思って調べてみたら、[vue-qrcode](https://fengyuanchen.github.io/vue-qrcode/)というライブラリを発見したので試しに使ってみました。

#デモ
[vue-qrcode-test](https://de-teiu.github.io/vue-qrcode-test/)

<img width="201" alt="キャプチャ.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173272/b6a1fc1a-a0f9-ebc1-767b-716bde4fe3a9.jpeg">

QRコードに設定したい文字列を入力して生成ボタンを押すとQRコードが表示されます。
[GitHubリポジトリはこちら](https://github.com/de-teiu/vue-qrcode-test)

#解説

##インストール方法
```
$ npm install @chenfengyuan/vue-qrcode vue
```

## 実装

```vuejs:QRCodeGenerator.vue
<template>
  <div>
    <div>
      <label>文字列</label>
      <input type="text" v-model="inputText">
      <input type="button" @click="generate" value="生成">
    </div>
    <vue-qrcode v-if="targetText" :value="targetText" :options="option" tag="img"></vue-qrcode>
  </div>
</template>

<script>
import VueQrcode from "@chenfengyuan/vue-qrcode";
export default {
  components: {
    VueQrcode
  },
  data() {
    return {
      inputText: "",
      targetText: "",
      option: {
        errorCorrectionLevel: "M",
        maskPattern: 0,
        margin: 10,
        scale: 2,
        width: 300,
        color: {
          dark: "#000000FF",
          light: "#FFFFFFFF"
        }
      }
    };
  },
  methods: {
    generate: function() {
      this.targetText = this.inputText;
    }
  }
};
</script>
<style scoped>
</style>
```

### 生成タイミング
&lt;template&gt;内に記述したコンポーネント(今回は&lt;vue-qrcode&gt;)の**valueが更新されたタイミング**で生成されます。
ただし、valueの中身が空だとライブラリ本体の中で例外が投げられる(動作に問題はありませんが)ので、気になる方は上記のソースのようにコンポーネントにv-ifで表示条件を設定しておく事で、条件に合致しない場合はライブラリのQRコード生成処理が呼ばれないようにできます。

と、いうことで今回の実装では生成ボタン押下時、generateメソッド内でtargetTextを書き換えることでQRコード生成処理を呼び出しています。

### Optionについて
QRコードを生成するにあたり、いくつかのオプションを指定できます。

- version
- errorCorrectionLevel
- maskPattern
- toSJISFunc
- margin
- scale
- width
- color.dark
- color.light

#### version
QRコードのバージョンを指定します。(1～40)
バージョンとは、QRコード内に持たせるデータ量や文字の種類、誤りレベルによって決まるコードのサイズです。
指定しなければvalueに設定された文字列に合わせて自動で決定されます。

#### errorCorrectionLevel
使用する誤り訂正機能を指定します。(L,M,Q,H)
誤り訂正機能とは、QRコードが多少汚れていてもうまいこと補完して正しい内容を読み取れるようにする機能です。

#### maskPattern
QRコードのマスクパターンを設定します。(0～7)
マスクパターンとは、QRコードの形を整える(白黒の割合をいい感じにする)ためのマスク処理のパターンの事で、8種類のパターンが存在します。

#### toSJISFunc
QRコードに保持する文字列に漢字(文字コードSJIS)を含ませたい場合、変換処理を独自の関数で定義できます。
(特に設定しなくても大抵の漢字は正しく使用できるようです。)

#### margin
QRコードとして表示する画像データの余白を指定します。

#### scale
QRコードの１セルの大きさを指定します。(pixel)

#### width
QRコードの画像サイズを指定します。
上述のscaleとwidthが同時に設定された場合、widthの設定が優先されるようです。

#### color.dark
QRコードのセルの色をRGBAで指定します(#000000FF など)

#### color.dark
QRコードの背景色をRGBAで指定します(#FFFFFFFF など)

#参考資料
- [fengyuanchen/vue-qrcode](https://github.com/fengyuanchen/vue-qrcode)
- [soldair/node-qrcode: qr code generator](https://github.com/soldair/node-qrcode#qr-code-options)
- [QRコードの情報量とバージョン｜QRコードドットコム｜株式会社デンソーウェーブ](https://www.qrcode.com/about/version.html)
- [誤り訂正機能について｜QRコードドットコム｜株式会社デンソーウェーブ](https://www.qrcode.com/about/error_correction.html)
- [QRコードを人力で読み取る - Qiita](https://qiita.com/amanao/items/b7c54a3c73a8301b2412)
- [肉眼でも読める！QRコード入門](https://quizknock.com/qrcode-nikugan)
ミッキーをテンプレートマッチングで検出する(python)

# 目的
ミッキーマウスをopenCVのテンプレートマッチングを利用して検出します。

# 準備

python環境と
opencvライブラリを準備します。

元画像 test.png
<img width="240" alt="test1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/e31f0701-a1ce-b0d1-bd27-65c5bdb48a0b.png">

テンプレート画像（元画像から切出します） test1.png
![test2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/2a97085a-e0e8-8f1f-2a90-ef400f94c028.png)

# コード

```ruby:sample.py
#coding:utf-8
import cv2
import numpy as np

#画像をグレースケールで読み込む

fname_img1='test1.png'
fname_img2='test2.png'

img = cv2.imread(fname_img1, 0)
temp = cv2.imread(fname_img2, 0)

#マッチングテンプレートを実行
match_result = cv2.matchTemplate(img, temp, cv2.TM_CCOEFF_NORMED)

#類似度の設定(0~1)
threshold = 0.9

#検出結果から検出領域の位置を取得
loc=np.where(match_result >= threshold)

#検出領域を四角で囲んで保存
w, h = temp.shape[::-1]
for top_left in zip(*loc[::-1]):
    bottom_right = (top_left[0] + w, top_left[1] + h)

#保存
result = cv2.imread(fname_img1)
#height = img.shape[0]
#width = img.shape[1]
#result = cv2.resize(img , (int(width*1.0), int(height*1.0)))
cv2.rectangle(result,top_left, bottom_right, (255, 0, 0), 10)
cv2.imwrite("result.png", result)

```

# テスト

以下のように検出できればOKです result.png
![result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/e7c77126-3231-f3b2-fc82-e2cb88e803c4.png)


# CodingError対策

```
libpng warning: Image width is zero in IHDR
libpng warning: Image height is zero in IHDR
libpng error: Invalid IHDR data
```

imwriteに指定する元画像のサイズが0になっている。
正しいサイズの画像を指定して解決

# 参考
[テンプレートマッチング](http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/py_tutorials/py_imgproc/py_template_matching/py_template_matching.html)
[Pythonでテンプレートマッチング、OpenCVサンプルコードと解説](https://www.tech-tech.xyz/3065942.html)
[OpenCVで画像サイズの変更をしてみた](https://qiita.com/kenfukaya/items/dfa548309c301c7087c4)
WebSocketとSocket.ioの違いについて

## WebSocketとSocket.ioの違いについて
リアルタイム通信を必要とするときにこの2つのワードが出てくるかと思います。

この2つはそもそも同列に語られるものではありません。
WebSocketはリアルタイム通信を実現するプロトコル名です。言語は関係ありません。

Socket.ioはリアルタイム通信を実現するためのクライアントと、サーバーのJavaScriptライブラリです。通常はWebSocket通信を行います。ブラウザがWebSocketに対応していない場合はロングポーリングなどの代替の方法でリアルタイム通信を実現します。
この情報が参考になれば幸いです。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
Escapeで、XSS対応します！！

# XSS(Cross-Site Scripting)

XSS…何かカッコイイなイメージですが、悪いやつです。
XSSは、Userが入力した情報を出力する時、Scriptを実行されるする攻撃技法です。

実行されるは、JavaScriptで、
Userのプライベートの情報(Cookie, session)などを攻撃者のサイトに転送したり、
或は、Userが意図しなかった行動(Userデータが消えたり、急に決済されたり)が起こされます。

# XSSの例

```
sample.html

<html>
 <head>
 <title>sample</title>
 </head>
  <body>
   <form method="get" action="output.php">
   Koogle:
   <input type="text" name="member_id">
   <input type="submit" value="submit">
   </form>
 </body>
</html>
```

```
output.html

<?php echo $_GET['member_id']; ?>
```

一つの例で、
sample.htmlで入力したパラメータをoutput.htmlに伝えて、出力させる例です。
ここで、入力する内容でJavaScriptのコードを入れると、Scriptが実行します。

```
output_fix.html

<?php echo htmlspecialchars($_GET['page']); ?>
```
上記のように修正すると解決できると思います。
htmlspecialchars関数を利用して、HTML Entityに変換して出力します。

# htmlspecialchars

htmlspecialcharsは、文字列から特定の特殊文字をHTML Entityに変換します。
https://www.php.net/manual/ja/function.htmlspecialchars.php

# 他の対応

- ユーザーの入力値を制限
    - ユーザーの入力値を制限して、Scriptを挿入しないようにする。

- ユーザーの入力値を置換
    - Scriptで主に使用される特殊文字を置換する。

- XSSフィルタを使用
    - Javaのオープンソース、Lucy XSSなどを使用する。

- HTTP Security Header使用
    - XSS攻撃を防ぐために、ブラウザで実装された機能を使用するためのHTTP Headerが存在
vim から git 操作できる denite の source を作りました

# はじめに
この記事は `denite.nvim` 向けの git ソースを作ったのでそれの説明を行う記事です。まだまだですが基本的な操作はだいぶできるようになってきたので宣伝です。

# 対象読者
- vim ユーザ
- denite.nvim を利用している（or これから利用する）
- vim からの git 操作にめんどくささを感じている
    - そして、その解決を「`denite.nvim` の UI でやりたい！」と思っている

# 前提
vim における git 関連プラグインは非常に数が多く、denite-gitto よりも高機能で使いやすいものはたくさんあります。（gina.vim とかほんとすごいです。）
また、denite.nvim の UI で git 操作できる別プラグインも既にあったりします。（じゃあなんで作ったの？って話なんですが。。。git 操作ってめちゃくちゃやるので、自分好みの UI がよかったのかもしれません。）

# インストール
お好みのプラグインマネージャでインストールしてください。
下記は dein.nvim を利用している前提のサンプルです。

https://github.com/hrsh7th/vim-denite-gitto

```VimL
  call dein#add('Shougo/denite.nvim') " denite.nvim 本体。v3 以降が必須。
  call dein#add('hrsh7th/vim-gitto') " git 関連操作を提供するプラグイン
  call dein#add('hrsh7th/vim-denite-gitto') " denite.nvim の source
```

# 利用方法
下記のマッピング一つだけで基本的な操作は全て可能です。git 関連操作のランチャーが立ち上がるイメージです。

デフォルトで `status` `branch` `log` `fetch` が表示されており、場合によって下記のようなメニューが追加で表示されます。

- push（未 push なコミットがある場合）
- pull（リモートのほうが進んでいるとわかった場合）
- set-upstream-to（upstream が未設定で同名のリモートブランチがある場合）

```VimL
nnoremap git :<C-u>DeniteGitto gitto<CR>
```

### 

_※ もちろん、個別に `nnoremap gits :<C-u>DeniteGitto gitto/status<CR>` などと書くこともできます。_

# その他
- `.git` の検出は `DeniteGitto` を実行したバッファから行われます。
    - この挙動を変更したい場合は `g:gitto#config.get_buffer_path` を上書きすれば可能です。
- `DeniteGitto gitto` を起動すると、`status` `branch` `log` `push` などのメニューが表示されます。
    - `status` からメニューに戻りたい場合は `denite.nvim` の `restore_sources` マップから行えます。これが激しく便利です。
- なんと vim-plugin なのに doc がないです。
    - 現状、リポジトリの README.md に説明がちょろっとあるだけです。
    - これはボコボコにされかねない由々しき事態なので時間を見つけて doc を書きます。（本当に vim 周りのエコシステムはドキュメントが充実していて素晴らしいなと思います。思ってはいます。。。）

# スクショ
## `DeniteGitto gitto`
`DeniteGitto gitto` 実行後の状態
<img width="542" alt="スクリーンショット 2019-05-17 14.44.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4215/703a987c-29f5-2111-701e-12127e7db456.png">

## `DeniteGitto gitto` -> `status`

`status` を選択した状態。
`denite.nvim` の機能である `restore_sources` を実行すると前の画面に戻れる。

<img width="544" alt="スクリーンショット 2019-05-17 14.46.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4215/bbf099b2-6318-7454-2e2b-908a499dc022.png">

## `status` から変更差分を表示
デフォルトアクションが `diff` になっているので、`<CR>` で別タブで vimdiff が表示される。

<img width="542" alt="スクリーンショット 2019-05-17 14.48.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4215/2c52f971-96af-c3f6-3c2f-db9ff1872dc5.png">

## `status` から `commit` アクションを実行
`status` の一覧からコミットしたい対象を選択して `commit` アクションを実行する。

<img width="545" alt="スクリーンショット 2019-05-17 14.49.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4215/ea1bfde2-ec12-b6ad-5a0f-74e947ba96a6.png">


# 免責事項
ご利用の際は自己責任でお願いします :bow:
ros2dashingをubuntu18.04でビルドした時のメモ

# 概要
ROS2 dashingの[Linux development setup](https://index.ros.org/doc/ros2/Installation/Dashing/Linux-Development-Setup/)のインストール部分を抜き出した物です。
実行してうまく動作しなかった部分は、適宜書き換えました。
もし問題がある場合はコメントください。

# 行った手順
```sh
mkdir ros2_ws
cd ros2_ws
sudo apt update
sudo apt install -y \
  curl \
  gnupg2 \
  lsb-release
curl http://repo.ros2.org/repos.key | sudo apt-key add -
sudo sh -c 'echo "deb [arch=amd64,arm64] http://packages.ros.org/ros2/ubuntu `lsb_release -cs` main" > /etc/apt/sources.list.d/ros2-latest.list'
sudo apt update
sudo apt install -y \
  build-essential \
  make \
  cmake \
  git \
  python3-pip \
  wget
python3 -m pip install -U \
  rosdep \
  catkin-pkg \
  colcon-common-extensions \
  lark-parser \
  lxml \
  numpy \
  vcstool \
  argcomplete \
  flake8 \
  flake8-blind-except \
  flake8-builtins \
  flake8-class-newline \
  flake8-comprehensions \
  flake8-deprecated \
  flake8-docstrings \
  flake8-import-order \
  flake8-quotes \
  pytest-repeat \
  pytest-rerunfailures \
  pytest \
  pytest-cov \
  pytest-runner \
  setuptools
sudo apt install --no-install-recommends -y \
  libasio-dev \
  libtinyxml2-dev
mkdir -p ros2_ws/src
cd ros2_ws/
wget https://raw.githubusercontent.com/ros2/ros2/release-latest/ros2.repos
vcs import src < ros2.repos
sudo rosdep init
rosdep update
rosdep install \
  --from-paths src \
  --ignore-src \
  --rosdistro dashing -y \
  --skip-keys "console_bridge fastcdr fastrtps libopensplice67 libopensplice69 rti-connext-dds-5.3.1 urdfdom_headers"
sudo apt install -y libopensplice69
sudo apt install -q -y rti-connext-dds-5.3.1
cd /opt/rti.com/rti_connext_dds-5.3.1/resource/scripts && \
source ./rtisetenv_x64Linux3gcc5.4.0.bash; cd -
colcon build --symlink-install --merge-install
```

上記のものを[ここ](https://github.com/NaokiTakahashi12/setup_ros2_dashing_development.git)においておきます。
【Win10】Anacondaを利用したPython環境構築メモ

#やったこと
- [Anaconda公式サイト](https://www.anaconda.com/)からインストール
- ユーザー環境変数に以下を追加
    - `C:\Users\(ユーザー名)\Anaconda3`
    - `C:\Users\(ユーザー名)\Anaconda3\Scripts`
    - `C:\Users\(ユーザー名)\Anaconda3\Library\bin`
- `conda install -n root -c pscondaenvs pscondaenvs`を実行

自分の備忘録的なメモです。
次回はVScodeでpython利用できるようなところまで書こうかなと思っています。

#Anacondaインストール
[Anaconda公式サイト](https://www.anaconda.com/)からインストール

***注意点***：
Advanced Installation Options で
「Add Anaconda to my PATH environment variavle」のチェックを入れる

#Path通し

ユーザー環境変数に先ほどAnacondaを入れたディレクトリを追加
`C:\Users\(ユーザー名)\Anaconda3`
`C:\Users\(ユーザー名)\Anaconda3\Scripts`

コマンドプロンプトを起動し、
`conda`と`Python`がうまく通っているか確認。

##コマンドプロンプトからcondaの環境をactiveにする
このままだとコマンドプロンプトから直接pythonを起動すると

```warning
Warning: This Python interpreter is in a conda environment, but the environment has not been activated.
```

このようにcondaをactiveにしてくれーと怒られるので
ユーザー環境変数に
`C:\Users\(ユーザー名)\Anaconda3\Library\bin`
を追加して、
`conda install -n root -c pscondaenvs pscondaenvs`
をコマンドプロンプトで実行

試しに
`activate base`してみると、無事に動いている模様
これで無事anaconda環境をactivateできるようになった。
やったー！

###＜補足＞
ユーザー環境変数に
`C:\Users\(ユーザー名)\Anaconda3\python.exe`
を追加してもうまくいかなかったのですが、上のようにパスを追加したところうまくいきました
【GAS】初めてのスクレイピング 〜会社の株価を取得〜

## ある株価の情報取得をスクレイピングで自動化する

- ターゲット企業： Google

## 設計

1. 株価を取得するURLを定義
2. 株価を格納しているタグを見つける
    3. もし存在すればタグ直後にある数字をSpreadSheetのセルに入力
    4. もしなければ何もしない

## GASの記述

```javascript:getStockVal.gs

function getValOfStack() {
  // データ取得するURLを定義
  const url = "https://stocks.finance.yahoo.co.jp/us/chart/GOOGL";
  
  // 取得した株価を出力するBookを定義
  const book = SpreadsheetApp.getActiveSpreadsheet();
  
  // 出力先のBookのシートを定義
  const sheetData = book.getSheetByName("シート1");
  
  // APIを用いて指定したURLにアクセスし、とりあえず全部取ってくる
  const res = UrlFetchApp.fetch(url);
  
  // 受け取った情報をUTF-8のテキストとして加工
  var html = res.getContentText('UTF-8');
  
  // 今回株価が入っているタグ（<td class="stoksPrice">1234</td>）みたいになっている
  const targetTag = '<td class="stoksPrice">';
  
  // タグが存在しているか確認（indexOfは見つからなかったら-1を返す）
  const index = html.indexOf(targetTag);
  
  // もし見つかればターゲットタグ以降を抜き出す
  if (index !== -1) {
    // indexは、見つけば場所を与える。ターゲットタグ分の文字列を与えてsubstringで切り取る
    var html = html.substring(index + targetTag.length);
    // 今htmlは(1234</td>......)となっている
    // 直近の閉じタグを見つける
    var index = html.indexOf('</td>');
    // indexは5を返す。初めて</td>が見つかるのは5文字目だから
    if(index !== -1) {
      // (1234</td>)から、1番目の文字から4番目までをセルにセット
      // substringは（第一引数 <= x < 第二引数）のようだ。
      sheetData.getRange(2, 2).setValue(html.substring(0, index));
    }
  }
}
```
### SpreadSheet側

B2以外はとりあえず手動で記入
<img width="369" alt="スクリーンショット 2019-06-02 22.57.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174991/a899fbe4-6d23-f38e-fd66-cb9a789ea644.png">
文系学生のプログラミング学習6日目ーjQueryプラグインー

#jQueryプラグイン

今日はjQueryプラグインを学習しました。ドットインストールではクリックしたときに画像のサイズを表示するものを作ったのですが、そもそも普段JavaScriptで書いているのと何が違うのかと疑問に思い、少し調べてみたところjQueryプラグインには様々な種類があるようです。

ざっくりまとめると、

・レイアウト系
・背景系
・スクロール系
・アニメーション系
・フォーム系

などがあるようです。
これらは既存出来たものをダウンロードすることで使えると思うのですが、GitHubというサイトにとんだあとどうすれば良いのか分からなかったので、調べてみたいと思います。

またJavaScriptとの大きな違いとしてコードの量が大幅に少なくなるそうです。
時間があるときに同じ機能を２つで書き比べてみたいです。

#プラグインの方法

方法としては、

１．jQuery本体を読み込む
    これは公式サイトからダウンロードして、

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
```

とHTMLに記述します。

２．jQueryプラグインを読み込む

例えばslickを使うとすると、

```html
<script src="./js/slick.js"></script>
```

と書きます。

３．プラグインの起動スクリプトを書く

最後にプラグインを実際に動かすスクリプトを以下のように書きます

```html
<script>
jQuery(function($) {
  $('.slides').slick();
})
```

ざっとまとめましたが、こんな感じでしょうか。
このあとは実際にコードを修正していきます。

注）起動スクリプトは必ずjQuery本体とプラグインを読み込んだあとに記述するそうでし

終わり
tryとexceptについて

##tryとexceptについて
今回はHacker Rankを解いている中で出会ったtryとexceptについてご紹介します。

そもそもtryとexceptを何に使うかというと**Python における例外処理の時に使用します**
例えば以下のような使い方をします。

```
"S=""abc""
try: 
    print (int(S))
except ValueError: 
    print (""Bad String"")
#実行結果　Bad String

```
これは僕がHacker Rankを解いているときに出てきた問題の一部です。
このようにtryとexceptを使用することで例外が出たときの処理をすることが可能になります。
この場合だと「ValueError」というエラーが出たときの処理を指定している形になります。


##try exceptの応用
ここからは初心者の僕にとっては応用編です。
以下のコードを見てください。

```
try:
    raise Exception("エラーが発生しました")
except Exception as e:
    print (e)
#実行結果　エラーが発生しました
```
新しくraiseができましたね。
これはraiseを使用することで例外を発生させています。
そしてエラーの内容をeに入れて最後にprintで出力しています。


##参考文献
[tryとexceptに関する記事](http://qoo-me0n.hatenablog.com/entry/2016/10/20/161225)
[raiseに関する記事](https://www.lifewithpython.com/2013/04/python-exception-error.html)
自然言語処理のためにMeCabを入れるのに疲れたのでCOTOHA APIを使った

# 動機
MeCabを導入するのは結構手間だと感じていて、
環境が変わるたびに入れるのに疲れたのでCOTOHA APIを使ってみました。

## COTOHA API
### 提供API一覧
[ここから](https://api.ce-cotoha.com/contents/)みれます。

1. 構文解析	日本語テキストの構造と意味を解析します。
2. 固有表現抽出	人名や地名などの固有表現を抽出します。
3. 照応解析	「あれ」「彼/彼女」「同〇〇」「その〇〇」等の指示語を検知し、指し示す対象を特定します。
4. キーワード抽出	文章からキーワードを抽出します。
5. 類似度算出	２つの文章の類似性を数値化し出力します。
6. 文タイプ判定	挨拶や同意、約束などの発話行為のタイプを判定します。
同時に、叙述文、命令文、質問文などの文タイプを出力します。
7. ユーザ属性推定	文章からユーザの年代、職業などの属性を推定します。
8. 言い淀み除去	ユーザからの音声入力時に含まれる言い淀みを除去します
9. 音声認識誤り検知	音声認識処理後のテキストに対して、認識ミスの恐れがある単語を検知・抽出します。
10. 感情分析	文章作成時の書き手の感情をポジティブまたはネガティブで判定します。さらに文章に含まれる「喜ぶ」や「驚く」といった特定の感情も認識します。
11. 音声認識	ユーザからの音声入力をテキスト化します。

今回は、構文解析を使っていきます。

### ソースコード
ほとんど[ゲンシジン](https://qiita.com/Harusugi/items/f499e8707b36d0f570c4)からもってきました。

```Python
import requests
import json

import numpy as np

text = ""
with open("kokoro.txt", "r") as f:
    text = f.readlines()

BASE_URL = "https://api.ce-cotoha.com/api/dev/nlp/"
CLIENT_ID = "ID"
CLIENT_SECRET = "SECRET"

def auth(client_id, client_secret):
    token_url = "https://api.ce-cotoha.com/v1/oauth/accesstokens"
    headers = {
        "Content-Type": "application/json",
        "charset": "UTF-8"
    }

    data = {
        "grantType": "client_credentials",
        "clientId": client_id,
        "clientSecret": client_secret
    }
    r = requests.post(token_url,
                      headers=headers,
                      data=json.dumps(data))
    return r.json()["access_token"]

def parse(sentence, access_token):
    base_url = BASE_URL
    headers = {
        "Content-Type": "application/json",
        "charset": "UTF-8",
        "Authorization": "Bearer {}".format(access_token)
    }
    data = {
        "sentence": sentence,
        "type": "default"
    }
    r = requests.post(base_url + "v1/parse",
                      headers=headers,
                      data=json.dumps(data))
    return r.json()

access_token = auth(CLIENT_ID, CLIENT_SECRET)

result = []
for line in text:
    result.append(parse(line, access_token))

for chunks in result[0]["result"]:
    for token in chunks["tokens"]:
        print(token["form"], end=" ")
```

## 結果
### 単純な形態素解析
```
入力文　私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる
出力文　私 は その 人 の 記憶 を 呼び起 す ごと に 、 すぐ 「 先生 」 と い い た く な る 
```
### kanaを使う
```
入力文　私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる
出力文　ワタシ ハ ソノ ヒト ノ キオク ヲ ヨビオコ ス ゴト ニ  スグ  センセイ  ト イ イ タ ク ナ ル
```
### lemmaを使う
```
入力文　私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる
出力文　私 は その 人 の 記憶 を 呼び起こす す 毎 に 、 直ぐ 「 先生 」 と いう い たい く なる る 
```

## まとめ
環境構築なしで形態素解析とか、lemmaをとれるのは楽でいいですね。
無料ユーザーは1日1000回までしか叩けないですが、何日かわけてやればいいですね。
今後の展望としては、SNSとかの崩れた文に強いオプションとか、業界ごとの辞書もあるらしいので使ってみたいです。