OmniAICreator/Qiita-1.07M huggingface dataset:
【python】画像処理その2 ~グレースケールと二値化~

#グレースケールとは#
ざっくりと説明しますと,
黒**から**白の値(0~255)で画像を表現するってことですね.

下の画像みたいなことです.
![gray.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/56f7acf1-1669-fd82-fd47-a012229abe9a.png)

#二値化とは#
こちらもざっくりと説明しますと,
黒**か**白(0 or 255)で画像を表現するってことですね.
白黒はっきりしてるってことですね.

下の画像みたいなことです.
![th.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/f2546dec-8bdc-f042-576b-6c30a0ad8ffe.png)


#グレースケールと二値化のまとめ#
| 表現       |       値 |
|:-----------------|:------------------|
| グレースケール    | 0 ~ 255 |
|二値化|0 or 1|

#コード#

```python
import numpy as np 
from PIL import Image
from matplotlib import pylab as plt

img = np.array(Image.open('lena.jpg').convert('L'), 'f')

img = (img > 128) * 255

plt.imshow(img)

plt.show()
```

`convert('L')`は読み込んだ画像をグレースケールにしてくれるんです.
そして`'f'`は型を`float`にしてくれるってことですね.

`img = (img > 128) * 255`は二値化する計算をしています.
ちょっと説明します.

##二値化の方法##
まず画像をグレースケールにします.
この段階で各ピクセルのあたいは`0 ~ 255`のはずです.

次に閾値を決めて,それより値が大きかったら白(255),小さかったら黒(0)にします.
[くわしくはこちら](https://qiita.com/kikuchiTakuya/items/298d83efd82dedd4adda)
【ruby】整数で出力した秒を「00:00:00」の形式で出力

動画の開始位置は●秒、終了位置は●秒、その部分の再生時間は？

という計算をしたいと思ったので調べてみました。
「movie_time.strftime('%X')」みたいな感じで簡単にできると思ったら、
Timeメソッドなるものの力を借りなきゃいけないようでした。


``` time.rb
start = 30
stop = 79
movie_time = stop - start
movie_time = Time.at(movie_time).utc.strftime('%X')
puts movie_time
```

#参考記事
Ruby on Railsで秒で指定した時間を時:分:秒に変換する
https://marketing-web.hatenablog.com/entry/second_to_00-00-00
Python_Webbrowserを使ってWebサイトを操作

##やりたいこと
Pythonのwebbrowserを使って、Webサイトに自動ログインしたいと思い
色々試行錯誤したので備忘録として残していきます。

##環境
macOS high sierra 10.13.6
python Python 3.7.3

###ブラウザを開く

```python:web_open.py
import webbrowser
webbrowser.open("開きたいURL")
```
無事開きました。
ブラウザを指定したい場合はget()で指定するらしいです。

###ログインする
キーボード入力をそのまま入力したいと思いpyautoguiを使用。

```python:web_login1.py
import webbrowser
import pyautogui
import time

#ブラウザを開く
webbrowser.open("開きたいURL")
#念の為スリープ
time.sleep(1)

#ログインIDとパスワードを格納
mail_address = "hoge"
passwd = "hoge"

#ログインIDを入力するボックスまで移動
pyautogui.press('enter')
pyautogui.press('tab')
pyautogui.press('tab')
pyautogui.press('tab')

#メールアドレスを入力
for i in range(0,len(mail_address)):
    pyautogui.press(mail_address[i])

#パスワード入力へ移動
pyautogui.press('tab')

#パスワードを入力
for i in range(0,len(passwd)):
    pyautogui.press(passwd[i])
#ログイン
pyautogui.press('enter')
```

ここでメールアドレスに含まれる"@"が別の記号に置き換わってしまった。
windowsであればpyautoguiのファイルに色々追記すれば解決するらしいが
macOSの解決先は見当たらなかったので別の方法を検討。

#pyperclipを使って解決
色々探してみたらpyperclipで解決できそう。

```python:web_login2.py
import webbrowser
import pyautogui
import pyperclip
import time

webbrowser.open("開きたいURL")

#念の為スリープ
time.sleep(1)

#ログインIDとパスワードを格納
mail_address = "hoge"
passwd = "hoge"

#ログインIDを入力するボックスまで移動
pyautogui.press('enter')
pyautogui.press('tab')
pyautogui.press('tab')
pyautogui.press('tab')

#コピー
pyperclip.copy(mail_address)
#ペースト
pyautogui.hotkey("command","v")

#パスワード入力へ移動
pyautogui.press('tab')

#コピー
pyperclip.copy(passwd)
#ペースト
pyautogui.hotkey("command","v")

#ログイン
pyautogui.press('enter')
```

これをラズパイでやりたいけどlinuxでも動くのかな。
直近で作成した1ファイル(.zip または .gz)のファイル名のみを検索する

```
[root@testhost tmp]# ls -l *.zip *.gz
-rw-r--r--. 1 root root 21182 11月  9 10:44 20191109_testhost_systemlog.tar.gz
-rw-r--r--. 1 root root   436 11月 17 06:31 20191117_testhost.zip
-rw-r--r--. 1 root root   124 11月 17 06:08 20191117_testhost_systemlog.tar.gz
[root@testhost tmp]# find /tmp \( -name "*.gz" -or -name "*.zip" \) | xargs ls -tr | gawk -F/ '{print $NF}' | tail -1
20191117_testhost.zip
Pythonって可読性が低くない？

## Pythonは見づらい
最近、JavaとかGolangを触ったのちに、解析や機械学習系のPythonコードを漁っていて思うのですが、


**Pythonって見づらくないですか？**

Pythonの歴が浅いので、もしかしたら見やすいのかもしれませんが、私には少なくとも見づらいです。

何が見づらいって、

**引数や戻り値に型がない**

部分ですよ。これで結局何が入った変数なのかがわかりません。
命名がアレな引数や戻り値をみると、もう絶望して、正直読む気が失せます。

## 個人的にこうしたい
幸い、[型ヒント](https://www.python.org/dev/peps/pep-0484/)というものがPython3.5から導入されているので、使っていきたい。いきたくない？

具体的には下記のようにしていきたいです。突発に思いついた例で、ぶっちゃけいけてないが、雰囲気だけ感じ取ってほしいです。

**Before**

```python

def create_article(article_id, title):
    article = {"id": article_id, "title": title}
    return article
```

->

**After**

```python
class Article:
    def __init__(self, **kwargs):
        self.id = kwargs.get('id')
        self.title = kwargs.get('title')

def create_article(article_id: int, title: str) -> Article:
    article = Article(**{"id": article_id, "title": title})
    return article
```
上記のように、型ヒントを与えつつ、いたずらにdictを使わず、記載してほしいなあという気持ちです。こうすればだいぶ可読性は上がるはず。

型ヒントを与えることによって、titleってstrなんだとかがわかり(titleでstr以外いれるわけねえやろってツッコミはおいておき)、戻り値をdict使わずにClassをちゃんと定義してから与えれば、なんとなくどういうものかわかります。dictって便利だけど、何入ってるかわかりづらいっす。

ただ、私と同じような初学者に注意してほしいのが、あくまで「型ヒント」だということ。
実行中には、このarticle_idにfloatが与えられたとしても、特にエラーが起こるわけではないので注意です。

実行する側にリテラシーが求められるわけですね、気をつけます。


## 最後に
コード量増えてるやないか！！！ってのはわかります。スマートに描きたいですよね。でも、秘伝のタレ的コードを作るより、よっぽどマシだと思うのです。もし、お強い方がそんなやり方より、もっといいのがあるでってご教授いただけるなら、是非ともよろしくお願いします。

少しでも共感してくれる人がでてくれれば嬉しいですし、より良い方法を指摘してくださるなら、もっと嬉しいです。

では、駄文失礼いたしました
docker-composeで立ち上げたインスタンスに同一ネットワーク内から接続できなくて詰まった話

:pencil: メモ書き程度に

環境変数で接続先のURLを指定します。

```
TESTDB_URL=mongodb
PUBSUB_EMULATOR_HOST=pubsub
```

`mongodb`と`pubsub`はdocker-compose.ymlでコンテナ名として設定されています。

ちなみに、言語環境はgoです。

mongodbは問題なく接続できますが、pubsubは接続できません。

なぜか？

よくよく考えてみると、hostを指定していますが、portを指定していません。

そこで、exposeしているportを指定します。

```
TESTDB_URL=mongodb
PUBSUB_EMULATOR_HOST=pubsub:8085
```

すると、pubsubに接続されるようになりました :tada: 

しかし、なぜmongodbはportを指定しなくても接続できたのか？

mongodb driverをみてみるとそこに理由がありました。

https://github.com/go-mgo/mgo/blob/v2/session.go#L172-L184
>If the port number is not provided for a server, it defaults to 27017.

というわけで明示的に記述しておくと良さそうです。

```
TESTDB_URL=mongodb:27017
PUBSUB_EMULATOR_HOST=pubsub:8085
```

そこにつまづくかという感じではありましたが、理由がわかってよかった :maple_leaf:
【cuda 10.1】Nvidia Driverを簡単にインストールする

# コピペ用コマンド
以下をコピペすれば入ります

```
wget https://developer.download.nvidia.com/compute/cuda/repos/ubuntu1804/x86_64/cuda-ubuntu1804.pin
sudo mv cuda-ubuntu1804.pin /etc/apt/preferences.d/cuda-repository-pin-600
sudo apt-key adv --fetch-keys https://developer.download.nvidia.com/compute/cuda/repos/ubuntu1804/x86_64/7fa2af80.pub
sudo add-apt-repository "deb http://developer.download.nvidia.com/compute/cuda/repos/ubuntu1804/x86_64/ /"
sudo apt-get update
sudo apt-get -y install cuda-drivers
```

# トラブルシューティング
### 最後のコマンドで「E: ロック /var/lib/dpkg/lock-frontend が取得できませんでした」と出る
以下をコピペすればよし

```
sudo rm /var/lib/apt/lists/lock
sudo rm /var/lib/dpkg/lock
```

### nvidia-smiでFailed to initialize NVML: Driver/library version mismatch

私は再起動したら大丈夫でした

# 参考文献
[NVIDIA Docker って今どうなってるの？ (19.11版)](https://qiita.com/ksasaki/items/b20a785e1a0f610efa08#nvidia-docker-%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%96%B9%E6%B3%95-%E6%9C%80%E6%96%B0%E7%89%88)
[[Ubuntu][apt] /var/lib/apt/lists/lockが不正な状態になった場合の対応メモ](https://qiita.com/koara-local/items/e63b7e4ff3cea803bdea)
Docker + flaskで機械学習アプリの構築

## 何をしたいか
機械学習プロジェクトのMLopsにおいて、
jupyterでモデルを作り、flaskのAPIがサーバーに情報を渡すような仕組みを実装する。
本記事では、flaskのAPIを実装する。

## Dockerのイメージをまず作成
https://qiita.com/riita10069/items/7c6d2958294910d346d1
にDockerfileの作り方は切り分けておいてあるので、参照してください。

```:Dockerfile
FROM ubuntu:latest

ENV HOME=/home/app
WORKDIR $HOME

RUN apt-get update
RUN apt-get install python3 python3-pip -y
RUN apt-get install build-essential -y

RUN pip3 install flask numpy pandas pandas-gbq scipy scikit-learn xgboost chainer google-cloud-storage

EXPOSE 5000
CMD ["python3", "hello.py"]
```

`docker build -t hinano_flask:1 .`
でイメージが作成された。

## 動作確認
`docker run -it hinano_flask:1 /bin/bash`
`python3`
でpythonが起動すること
`pip3 list`
でパッケージが入っていることを確認しておく。

## コンテナを確認
`docker ps -a`
これでexitしたコンテナも残っている。
-a オプションによって停止中のコンテナも表示されるため。
コンテナは`docker run`コマンドを実行する度に、イメージから新規作成される。
#### 停止中のコンテナを利用するには
`docker start container_id`
#### 停止中のコンテナからイメージを作成するには
`docker commit container_id イメージ名:タグ名`


## ボリュームマウント
ボリュームとは、データを永続化できる場所という認識。
開発の際にcontainerの中身だけを変更しても、それが消えたらおしまいなので、
それを阻止するために、ボリュームをマウントして開発する。

ボリュームとして使われるものは、
- ホスト(自分のMacとか)のディレクトリ
- Dockerが提供しているvolume

のどちらか。
後者は、
`docker volume ls`とかで出てくるやつですが、gitを使う前提ならあまりメリットを感じていないので、割愛。

```
$ mkdir app
$ cd app
```

で、ボリュームされるディレクトリを作って、そこで開発します。
`docker run -it -p 5000:5000 -v $(pwd):/home hinano_flask:1 /bin/bash`
でちゃんとマウントされているか確認しておきます。

## flaskのAPIを開発
それは、appの中に書きます。

```python:hello.py
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return "Hello world!!"

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)
```

`$ docker run -e PORT=5000 -p -v $(pwd):/home 5000:5000 hinano_flask:1`
これで、一旦、Hello Worldまでは完了です。
Mac使いはWindows使いにジョブチェンジできるか(OS基本機能編)

##はじめに
Mackintosh PerfomaからMacをこよなく愛してきたが、Macbook Proのハードウェア的な不満が募りSurface Pro 7発売を機に乗り換えたのでWindows10の使用感をレポートする。結論から言うと、Windows10もかなり進歩しており気に入ったハードウェア、普段使うソフトウェアで選べば良い。
(ちなみにデスクトップ機はiMacを継続して使っている。)

##概要
macOS Mojave 10.14.6とWindows10 1903の基本的な機能比較。ただし、ハードウェア的な要素を含むものは除外する。

##コンテンツ
1. デスクトップ
2. キーバインド
3. 音声アシスタント
4. 検索
5. ターミナル
6. IME
7. ログインIDによる連携

####デスクトップ
#####メニューバー、タスクバー
まず大きな違いはメニューバーが上にあるか下にあるかであるが、位置は変えられるので両者の使用感に差異はない。Mac使いはWindowsのタスクバーを上に配置すれば違和感なく使えるだろう。ただWindowsのタスクバーの場合はDock的な役割の意味合いが強いと思われる。
#####仮想デスクトップ
MacではLeopardからSpacesという機能名で仮想デスクトップが搭載されているが、Windowsも10から仮想デスクトップ機能が搭載された、両者とも切り替えにはショートカットキーはもちろんのこと、MacはMissionControl、Windowsはタスクビューで切り替えができる。ここまでは大した差異は無いのだが後発のタスクビューでは、作業履歴もここに表示されるため大変便利な機能に仕上がっている。

####キーバインド
#####カット、コピー、ペースト、アンドゥ、リドゥ
cmdキー(Mac)かCtrlキー(Windows)の違いだけであり、これしか使わないなら両者一緒である
#####カーソル移動
この差がでかい。MacではEmacsキーバインドで移動できるが、Windowsではカーソルキーを使用する必要がある。Emacsに飼いならされたエンジニアなら作業効率に著しく影響するが、[keyhac](https://sites.google.com/site/craftware/keyhac-ja)および、[fakeymacs](https://github.com/smzht/fakeymacs)を導入することで改善することができる。ただし文字の入れ替え系(C-t)等は対応できない。この点はMacの圧勝と言って良いだろう。

####音声アシスタント
Siri、Cortanaともにまだまだアホである。Google、Amazonを見習ってほしい。

####検索
MacはSpotlight、Windowsは検索ボックス？というらしい。
#####ファイル、Web、設定、アプリ検索
使い勝手はどちらでも一緒。Macのショートカットキーcmd+スペースがYosemite以前はIMEの切り替えであったため、打ち間違えてイライラするくらい。
(2020/03/01追記)
と書きましたが、全文検索の機能について抜けていたので追記。(kkddさま、ありがとうございます。)
NASがSpotlightの対象にならないのですっかり忘れてた。
普段、プログラムランチャー程度にしか使っていないのがバレる。

#####全文検索
全文検索で言うとSpotlightの能力のほうが上でファイル内のコンテンツプレビューが表示されたり
E-メールなどメディアの種類に関わらず一元的に表示してくれて操作感がいい。
Windowsのほうは「すべて」のタブなのにWeb検索(bing)ばかりがフィーチャーされていて、(多分、Bingを使わせたいんだろう)
ファイル内検索やメール検索などは、それぞれのタブに切り替えないと表示されない場合があり使いにくい。

####ターミナル
WindowsのコマンドプロンプトやPowerShellと比較しても面白くないので、Windows Subsystem for Linux(以下、WSL)と比較する。
macOSはBSD系UNIXであるため標準でbashが搭載されている。(Catalinaからはzsh)。一方、WindowsはWSLにより好きなディストリビューションのOSをインストールすることができる。ターミナルの機能そのものはMacが勝るが、OS選択の自由度はWindowsが良い。なお、Windows TerminalというMicrosoft製のターミナルを開発中のようなので今後に期待したい。

####IME
macOS日本語入力とMS-IMEの比較であるが、Macのライブ変換は慣れると文字入力の効率が上がり素晴らしい。MS-IMEはお察し。クラウド変換には対応したがWindows10 20H1でエンジンの刷新が検討されているようなので期待したい。

####ログインIDによる連携
Apple IDによるApple製品、サービス間の連携は素晴らしいものがあるが、実はWindowsもMicrosoftアカウントを使用するとOneDriveを使ったクラウド同期や一部OS設定の同期などが行える。Windowsもどんどん便利になっているが、この点はまだMacの方が優位だと思われる。

##まとめ
長年Macを使ってきた身としてWindowsが使えるか不安ではあったが、OSとしての機能はWindowsが勝っている部分もあり新鮮な気持ちになれた。使用者のスキル次第でどちらのOSを使ってもよい仕事をしてくれるので、用途に合わせて選ぶことが大切だ。
[その2] Power BI で社内のリース車の利用状況を可視化してみた

#はじめに
この記事では、Power BI で社内のリース車の利用状況を可視化する取り組みを3部構成で紹介しています。

#実装方法
本記事では、以下の手順の 2. について紹介します。
1. 3. をご覧になりたい方は、以下の手順名をクリックしてください。

1. [Microsoft Graph を利用してリース車の予定表データを取得する](https://qiita.com/KodamaJn/items/b511dc513ae8fe2ff3c5)
2. 取得したデータを展開する
3. [可視化する](https://qiita.com/KodamaJn/items/b938f8935e0447130870)


##2. 取得したデータを展開する
続いて、取得したデータの展開を行います。
今回は、可視化のために以下の情報を取得することを考えます。

- 予定表の名前（ = リース車名）
- イベントの開始日時
- イベントの終了日時
- イベントの主催者（ = リース車を予約した人）

先ほど取得した上記の情報は、いずれも階層構造になっており、そのままでは可視化できません。
よって、可視化するために上記の情報を展開します。

1. 予定表の名前を取得する
予定表の名前は、取得したデータの [calendar 列] - [owner 列] - [name 列] にありますので、列名の右側にあるアイコンをクリックして以下のように展開します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405544/d0d53a99-50cb-e3c9-c7b4-628140771761.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405544/469f4ba5-02df-a0af-709f-d9ee12f48c0e.png)
取れました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405544/0defaa7d-db66-6d6b-5acf-5f58b072daf0.png)


2. イベントの開始日時を取得する
イベントの開始日時は、取得したデータの [start 列] - [dateTime 列] にありますので、上記と同じように展開します（図は割愛）。

3. イベントの終了日時を取得する
イベントの終了日時は、取得したデータの [end 列] - [dateTime 列] にありますので、上記と同じように展開します（図は割愛）。

4. イベントの主催者を取得する
イベントの主催者は、取得したデータの [organizer 列] - [emailAddress 列] - [name 列] にありますので、上記と同じように展開します（図は割愛）。

<br>

これで展開は終了です。
最後に、レポート側に余計な列名が含まれると煩わしいので、必要な列を選択します。
画面上部の"列の選択"をクリックし、必要な列名のみにチェックを入れて、OK をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405544/423611e5-30b6-f75a-05cf-e3c652912049.png)
必要な列のみ抽出できました。
ここまでで、取得したデータの展開作業は終了です。画面左上の"閉じて適用"をクリックしてクエリエディターを終了します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405544/d62e127b-248d-24e3-98f8-a758a35d43ac.png)

<br>

次の記事（その3）では、展開したデータを可視化する作業を行います。
[その3はこちら](https://qiita.com/KodamaJn/items/b938f8935e0447130870)
JavaScriptを使ってHTML要素内の1文字ごとにスタイルを適用（タグを挿入）する方法

# 一文字ごとにスタイルを適用させたい
例えば以下のようなものを作りたいとします。
![google.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452729/a48b72d9-2c81-5f88-3044-b1fbc3adde79.png)
ここで最も簡単なのは、下記のように一文字ずつ`spanタグ`で囲んでスタイリングする事だと思います。

```html:HTML
<p>
  <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
</p>
```
ただ、これだと一々面倒ですし、単語の長さや使用頻度によっては見通しの悪いコードになってしまいます。
そこで`JavaScript`を使って、出来るだけ新しく且つ直感的に分かり易いコードで関数に纏めて、再利用できる形にしていきたいと思います。

# 私なりの最も分かり易いやり方
以下のようになりました。

```html:HTML
<p id="insert"></p>
```
```JavaScript:JavaScript
const insertTag = (target, word) => {
  for(const character of word) {
    document.querySelector(target).innerHTML += `<span>${character}</span>`;
  }
}

insertTag('#insert', 'Google');
```

挙動としては、`String`を`for...of`でループさせると一文字ずつ処理が行えるので、第一引数で指定した要素に`innerHTML`を用いてその文字ごとに`spanタグ`を挿入しています。

念のため`<p id="insert"></p>`の中身をデベロッパーツールで確認してみます。
![tag1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452729/704d43e4-ec0d-614a-0b73-d0eea18487b6.png)
問題なく動作していました。

**動作デモ → [https://jsfiddle.net/vmj9xagu/](https://jsfiddle.net/vmj9xagu/)**

# タグ毎に`class`を付けたい場合
今度は`forEach`を使い、分かりやすく`class`に`index`を使用し番号が1から始まるようにしました。

```JavaScript:JavaScript
const insertTag = (target, word) => {
  [...word].forEach((character, index) => {
    document.querySelector(target).innerHTML += `<span class="item${++index}">${character}</span>`
  })
}

insertTag('#insert', 'Google');
```
こちらの挙動は、第ニ引数の`word`をスプレッド演算子を用いて配列化しています。
`[...word]`の中身を確認してみると、以下のようになっています。
![array.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452729/2e2bc2fb-e995-4124-7855-0d40af1e6690.png)
そしてこれに対して`forEach`でループして一文字ごとに`spanタグ`を挿入しています。
前者も`forEach`で行っても良かったのですが、タグ付けするだけで良い場合は`for...of`の方がコードが簡潔に書けるのでそちらを採用しました。

こちらも念の為`<p id="insert"></p>`の中身を確認してみます。
![tag2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452729/c5a9f832-fee4-c117-41d9-db7c30726b8b.png)

問題なく動作していました。(*ﾟ▽ﾟﾉﾉﾞ☆ﾊﾟﾁﾊﾟﾁﾊﾟﾁ

**動作デモ → [https://jsfiddle.net/hpw46f9n/](https://jsfiddle.net/hpw46f9n/)**
【エラー】Django開発で、ローカルにmysqlclientをインストールできなかったエラー

```:ターミナル
$ pip3 install mysqlclient

    ERROR: Command errored out with exit status 1:
     command: /Users/yuya/.pyenv/versions/3.8.0/bin/python3.8 -u -c 'import sys, setuptools, tokenize; sys.argv[0] 
```

一部しか載せてないけど、画面が真っ赤になるレベルでエラーを吐かれた。

# 対処法
```:ターミナル
$ sudo vim /usr/local/bin/mysql_config 
```

下記のように変更する

```:ターミナル
# Create options 
libs="-L$pkglibdir"
libs="$libs -l "

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

# Create options 
libs="-L$pkglibdir"
libs="$libs -lmysqlclient"   ← ここ！
```

下記のコマンドで表示されたPATHを.bash_profileに追加して、更新する。

```:ターミナル
$ brew info openssl
```

これでもう一度インストールすると完了できました！

#参考
https://yukun.info/pip-install-mysqlclient-error/

https://stackoverflow.com/questions/51578425/mysqlclient-instal-error-raise-exceptionwrong-mysql-configuration-maybe-htt
DTW(Dynamic Time Warping)/動的時間伸縮法について話す

最近時系列分析を勉強していて、時系列同士の類似度を測る際にDTWという手法を学んだのでゆるくまとめてみようと思います。今回は説明編、次回を実践編としたいです。

## DTW(Dynamic Time Warping)/動的時間伸縮法とは
DTWとは時系列データ同士の類似度を測る際に用いる手法です。波形の類似度を求める手法としてはユークリッド距離やコサイン距離等があるかと思います。
DTWは２つの時系列の各点の距離(誤差の絶対値)を総当たりで求め、全て求めた上で２つの時系列が最短となるパスを見つけます。
対応する点を選ぶ際に重複を許す（その時点までに選択済みの点も選択できる）ため、時系列同士の長さや周期が違っても類似度を求めることができます。
なので、DTWは「周期はずれているが、形は似ている」という場合や、系列同士の長さが異なるデータの類似度を測りたいときに他の手法よりも便利な手法だと言えます。

## ライブラリで試す
jupyter notebook上での実行を想定し、デモをしてみようと思います。
PythonにはDTWをするためのライブラリがいくつかありますが、今回は「fastdtw」というものを用います。fastらしいので。
お気づきかとは思いますが、各点を総当たりで計算するという点でDTWは結構計算量がかかる手法になってきます。実際にクラスタリング等で用いるとなると更に計算量が必要になるので頑張りましょう。[こちら](http://sinhrks.hatenablog.com/entry/2014/11/14/232603)のサイトの計算シミュレーションがめちゃくちゃわかりやすいのです。

まずはfatsdtwをインストールします

```
!pip install fastdtw
```
次に必要なモジュールを呼び出します

```
from fastdtw import fastdtw
import matplotlib.pyplot as plt
# グラフを横長固定（お好みで）
from matplotlib.pylab import rcParams
rcParams['figure.figsize'] = 10, 6
```

デモ用のデータを作成します

```
# データ作成
from numpy.random import *

seed(100)
rand()

a = list(randint(0, 20, 30))
# bはaを少しだけずらしたデータにする
b = [0, 1, 10, 4] + a

plt.plot(a, label="a")
plt.plot(b, label="b")
plt.legend()
plt.show()
```
![dtw1_graph_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533290/292fc66f-dbf1-7fec-72df-282a2bee7ec9.png)

デモ用のデータは、DTWの利点がわかりやすいように、似ているかつ長さが異なるデータにしましたが、どんなデータでも問題ないです。
それでは実際にDTWを用いて類似度を計算してみます

```
distance, path = fastdtw(a, b)
distance

# 出力
37.0
```

これだけではよくわからないので、各点がどのように対応する結果になったのかを図示します。
fastdtwは計算した距離と一緒に選択したパスをタプルで返してくれるので、それを利用します。


```
plt.plot(a, label="a")
plt.plot(b, label="b")

# もっといい書き方あれば知りたい
for a_x, b_x in path:
  plt.plot([a_x, b_x], [a[a_x], b[b_x]], color='gray', linestyle='dotted', linewidth=1)
  
plt.legend()
plt.show()

```

![dtw1_graph_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533290/46384d08-08f3-291b-8dae-02f9de91a3c8.png)

同じ形になっている部分が対応するようなパスになっていることがわかります。このように位相がずれているだけ実際は似ているデータをDTWを使えば直感的な類似度を表すことができます。

## 終わり
最後まで読んでいただきありがとうございました。
次回はDTWを用いた実践編として階層型クラスタリングを実装してみようかと思います。何かご指摘があればコメントをいただけると幸いです。
お手柔らかに。
Typeorm でgetアクセサをAPIレスポンスに含めたかった。

# toJSONを使えばよかった。

Typeorm を使っていてEntityのgetアクセサをAPIのレスポンスにどうやったら含められるか分からなかった。
(Laravelでいう$appendsに相当する事がやりたかった。

調べてみると、toJSON()をオブジェクトに実装するとJSON.stringfy時に優 先されるので
typeorm関係無しにやりたいことは実現できるようだ。


サンプルコードはtypescriptで書く。

## getアクセサの説明でありがちな 典型的なUser Class

姓と名を持っていて フルネームをgetアクセサで定義しているクラスがある。

```ts

class User{

    firstName:string
    lastName:string
    constructor(firstName:string,lastName:string){
        this.firstName = firstName
        this.lastName = lastName
    }

    get name(){
        return this.firstName + " " + this.lastName        
    }
 
}

const user = new User("tanaka","jiro")
console.log(JSON.stringify(user))

//{"firstName":"tanaka","lastName":"jiro"}

//残念ながらnameはgetアクセサなので、JSON.stringifyした場合には欠落する。

``` 



## getアクセサをレスポンスに含めたい場合は以下のように書ける。

```ts
class User{

    firstName:string
    lastName:string
    constructor(firstName:string,lastName:string){
        this.firstName = firstName
        this.lastName = lastName
    }

    get name(){
        return this.firstName + " " + this.lastName        
    }

    toJSON(){
        //JSONに含めたい getアクセサを列挙する
        const appends : (keyof User)[] = ["name"];
        //appendsに指定したアクセサの戻り値を新しいオブジェクトにコピー
        const obj = appends.reduce((pre,cur) => ({ [cur]: this[cur]})  ,{})
        //結合して返す。
        return {...this,...obj}
    }

}

const user = new User("tanaka","jiro")
console.log(JSON.stringify(user))
//{"firstName":"tanaka","lastName":"jiro","name":"tanaka jiro"}
```
Pythonで学習したこと

#progateでpythonを学習
##学習コースⅠ
出力はprint()

()の中に文字列なら""、数値ならクォーテーションなし
変数は　変数名 = "変数の値"　ex)name = "しまじろう"

**名をつける時のルール**
頭文字を数字にしない
2語以上なら_をつける
英単語でつける

*＊変数を使うメリット*
データの中身が何を表してるか明確になる
同じデータを繰り返し使える
値の変更が一箇所で済む

すでにある変数に数値を足して代入するには
変数名　= 変数名　+ 数値
演算子=で省略できる
+で文字の連結もできる

**データ型**
様々な種類のデータ型が存在する
ex)文字列型、数値型
データ型が違うと異なる動作をする
データ型を変換することを**型変換**という
数値型を文字列型に変換するには**「str」**を用いる
反対に、文字列型を数値型に変換したい場合には**「int」**を用いる

**条件分岐**
ある条件に当てはまるかどうかによって処理を分けること
**if文**
ifの後に条件式を指定し、その条件が成り立つときに実行する処理を次の行に書く
if 条件式　:
  print("処理")

条件式の中では、２つの値を比較するための記号**「比較演算子」**がよく使われる
== 等しい　!= 等しくない
if 条件式 **:**
*＊Pythonではコードの見た目（インデント）がそのままプログラムの動作に影響する*

**真偽値型**
「真偽値型」には「True」と「False」がある
比較演算子を用いた条件式の部分が、成り立つときは「True」、成り立たないときは「False」
値の大小を比較する記号　<, >, <=, >=

条件が成り立たなかった時の処理
**else**を使う
条件が成り立たなかった場合を複数定義したい場合
 **elif**
elifはいくつでも書くことができますが、上から順に条件が成り立つか判断され、最初に条件に合致した部分の処理だけが行われる

**複数の条件式を組み合わせる**
and かつ
or または
not 否定

##学習コースⅡ
**リスト**
複数のデータをまとめて管理
リストは[要素１,要素２]のように作る
リストにはいってる値を**要素**という
変数に代入できる
リストの要素には、前から順に「0, 1, 2,・・・」と数字が割り振られています。これをインデックス番号という
リストの各要素は、リスト[インデックス番号]とすることで取得できる
RustでWindowに円を描く

はじめに
======
[前回: RustでGUIのWindowを表示する](https://qiita.com/mokemokechicken/items/7eed3acabef10be0d6ec) の続きです。
今度は、円を描いてみます。

RustでWindowに円を描く
===================
実行するとこんな赤い円が描かれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11124/9f55e86d-57d3-fe45-cc45-40180b822614.png)

コード全体は [main.rs](https://github.com/mokemokechicken/rust_gui_sandbox/blob/848104ef186f3de8d12a30e87f9b25bcb66ed686/src/main.rs) になります。
あまり理解していないおまじないがたくさんありました。
まあ、それはそれでおいといて、悩んだポイントだけメモしておこうと思います。

## Cargo.toml
### conrod=0.68.0 は glium=0.24.0 が良いようだ
前回は `glium = "0.25.0`  でしたが、それだとexampleのコードがコンパイルできませんでした(うまくCastがされない型がありました)。`0.24.0` だと大丈夫でした。

`Cargo.toml` は以下のようになっています。

```toml:Cargo.toml
[dependencies]
conrod_core = "0.68.0"
conrod_glium = "0.68.0"
glium = "0.24.0"
```

### なんでコンパイル通らないんだろう、と悩んだ箇所
下記の `set(Id, UiCell)` の部分のメソッドが無い、としばらくコンパイラに怒られ続けました。

```rust
    widget::Circle::fill(50.)
        .middle_of(ui.window)
        .color(conrod_core::color::RED)
        .set(ids.circle, ui);
```

原因は、下記で `Widget` を追加していなかったことなのですが、こういうようにメソッドが後から追加されることがしばしば（よく?）ある言語だということを思い至らず、exampleのコードとの差とは理解していたのに気が付かなかったです。

```rust
use conrod_core::{widget, Positionable, Colorable, Widget};
```

さいごに
=======

macroのおまじないとかなかなか馴染めないなぁ。

[次回: Rustでconrodを使って赤い円をアニメーションさせる](https://qiita.com/mokemokechicken/items/e1c55c2a0b77d6b52afd)
弁当屋「監視カメラをYouTubeの生放送にしたら万引き激減、人件費削減、客は在庫を確認してから来店」

http://netgeek.biz/archives/149965?fbclid=IwAR26fgFPTgxUOI6uYIpjHRC9HRsKA9cj9wbY07qeA6Roypkq6slQa1APi1E
「Micro Hardening」に参加してきました

# Micro Hardeningに参加してきました
- セキュリティをゲーム感覚で学べる競技
- ECサイトに次々降りかかってくるセキュリティ攻撃にどう対処するかを競い合う競技

# 学んだこと
- 作業の共有は大事
    - 万が一やらかした時に戻せるようにしておかないとやばい
    - 私もiptablesの設定をやらかしてしまい、救済してもらいました...
- ログをどれだけ効率よく見れるか
- サービスの動作の監視の重要性
- 使わないサービスは消しましょう
- 実際に攻撃された事例を知らなければ防ぐのが難しいと思った
- どったんばったんすると穴を生みやすかった

# ネタバレ防止のため内容を公開できないので、興味を持った人は参加してみてください！！
Pug(Jade)を調べた時の参考文献

### まず読んだもの
| 頁名 | URL |
|:-----------------|:------------------|
| Jade について。 | https://gist.github.com/japboy/5402844 |

### もっと理解を深めたもの
| 頁名 | URL |
|:-----------------|:------------------|
| JavaScriptテンプレートエンジンのPug（Jade）とEJSの比較 | https://qiita.com/otsukayuhi/items/8556b014ea363eabe11f |
| テンプレートエンジンPugを使った、みんなでやるウェブ制作 | http://cssnite.jp/archives/post_2962.html |
Lightningケーブルを繋げずにiOSのSafariのインスペクタを確認する。もしくはネットワーク経由でビルドをインストールする。

ブラウザデバッグのためにiOS端末をワイヤレスで繋げる方法の備忘録です。


##使用端末
**MacBook Pro** masOS Catalina 10.15
**Xcode** 11.2.1
**iPad mini** iOS 13.2.2

##準備
同じWi-Fiネットワーク上にiOS端末とMacBookProを接続する
iOS端末とMacBook Proをライトニングケーブルで接続する。


##Xcode上での設定
1. Xcodeを起動し、メニュー [ Window - Devices and Simulators ] でデバイスシュミレータ設定画面を開く。

<img width="70%" alt="スクリーンショット 2019-11-04 7.19.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73196/1fff06e2-efe5-210f-a56e-ca9502315ca3.png">

2. Lightningケーブルで接続している端末が表示されるので、[ Connect via network ] にチェックを入れる。
※iOS端末 にパスコードを設定していないと `Passcode Required` というアラートが出てうまく登録できません。

<img width="70%" alt="スクリーンショット 2019-11-04 7.19.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73196/2b0f2f98-ebcb-c21b-af64-7a1d0dffa23e.jpeg">



##Safariでの設定
MacOS、Safariの[ 開発 - 該当端末の名前 - ネットワーク経由で接続 ]をチェック入れる。
※iOS端末側のSafariの設定 `Webインスペクタ` も有効にしておくこと。

<img width="70%" alt="スクリーンショット 2019-11-04 7.19.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73196/c54c00c6-da65-2f69-9cad-6ae69d841e1f.png">

以上でLightningケーブルを外してもMacOSのSafariからiOS端末のインスペクタが確認できるはず。
ただし、ネットワークによってはうまく行かないことがある。
#Rails + #rspec HTTP  options request test example : valid and invalide case 

# Rails + rspec で HTTP options リクエストの 正常パターンと不正パターンをテストする例

```rb
context 'valid request' do
  subject { process :options, '/', headers: headers }

  let(:headers) do
    {
      'Access-Control-Request-Method' => 'GET',
      'Origin' => 'http://localhost'
    }
  end

  before { subject }

  it { expect(response.status).to eq 200 }
end

context 'invalid request' do
  subject { process :options, '/' }

  before { subject }

  it { expect(response.status).to eq 404 }
end
```



# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
CentOS7(Mini)で入れることが多いパッケージ（仮


#sshd-server
yum -y install openssh-server


#iptables
##既存Firewallサービスの停止
systemctl stop firewalld
systemctl disable firewalld
systemctl status firewalld

## iptablesの導入
yum -y install iptables-services

上記を入れないと、/etc/sysconfig/iptablesが意味をなさない

##既存サービスとして動作させる
systemctl start iptsbles
systemctl enable iptables
systemctl status iptables

#ポリシーの編集
vi /etc/sysconfig/iptables

#反映
systemctl reload iptables



#IPv6停止設定
# cat <<EOF > /etc/sysctl.d/99-custom.conf
net.ipv6.conf.all.disable_ipv6 = 1
net.ipv4.ip_forward = 1    
EOF

# sysctl -p /etc/sysctl.d/99-custom.conf
net.ipv6.conf.all.disable_ipv6 = 1
net.ipv4.ip_forward = 1

#おまけ：TimeZone設定

sudo timedatectl set-timezone Asia/Tokyo

#サービスの自動起動設定の状態確認

systemctl list-unit-files -t service
CentOS7,8/Red Hat7,8でよく必要となる設定(WindowsSystem)


#X-Window の導入

※以下、Centos8, Redhat8の場合、yumをdnfへ読み替えしてください
###List

GUIのパッケージを確認。以下のコマンドを実行し「GNOME Desktop」があるのか「Server with GUI」を確認する。

```
#sudo yum grouplist
```

##パッケージ導入

(Redhatの場合)
sudo yum -y groupinstall "GNOME Desktop"

なければ

(CentOSの場合)
sudo yum -y groupinstall "Server with GUI"

#起動ターゲットを変える場合(GUIかCLIか）

###GUIの場合

```
#sudo systemctl set-default graphical.target
```
###CLIの場合

```
# systemctl set-default multi-user.target
```

##設定後は要再起動
sudo shutdown -r now

※Updateした時にTerminalが起動しなくなることがある

/etc/environment  ファイルに以下を追加

```
LANG=en_US.utf-8
LC_ALL=en_US.utf-8
```

##手動で起動する場合・上記起動ターゲット（起動したときのログイン画面がGUIかCLIか）がCLIの場合
ログイン後、

```
#startx
```
※自動起動とするならば起動ターゲットをGUIへ変更すること

##備考
VNCServer入っても、上記Server with GUIが入ってないと真っ黒な画面に。
.vnc/xstartは、gnodeつかうなら、そのままでOK


#VNC導入
yum install tigervnc-server

導入完了後、PASSWORD設定。VNCを使った場合のPASSWORDとなります。SSHなどのログインIDとは別体系となります。
なお、ログイン時、IDは聞かれません。
なのでアカウント（rootやそのほか）で使うアカウントでこのパスワードを設定しないといけません。

```
# vncpasswd
Password: （任意のパスワード）
Verify: （任意のパスワード再入力）
Would you like to enter a view-only password (y/n)? n
A view-only password is not used
```

#VNC導入後準備

Firewallの追加設定。
以下の説明はfirewalldを前提としています。
(ポート番号5910を使うと他と衝突しづらいです）

```
# firewall-cmd --permanent --add-port=5910/tcp
# firewall-cmd --reload
# firewall-cmd --list-all
public (active)
  target: default
  icmp-block-inversion: no
  interfaces: eth0
  sources:
  services: ssh dhcpv6-client
  ports: 5910/tcp
  protocols:
  masquerade: no
  forward-ports:
  source-ports:
  icmp-blocks:
  rich rules:
```

#VNCいざ起動

以下のようにすると起動します。
 (Centos7はこれでPort5910で利用可能。アクセスする場合、vnc://XXX.XXX.XXX.XXX:5910　とします）

```
# vncserver :10 
```
Centos8の場合は、

```
# vncserver -localhost no :10 
```
と必要となることがあります。

停止する場合は以下のようにKillオプションをつけて実行します。

```
# vncserver -kill :10 
```

#場合によって以下を設定
##Windowsメニューの言語変更

ファイル：/etc/sysconfig/i18n
に以下の内容を記述（ファイルがない場合は作成）

英語にする場合

```
LANG=en_US.UTF-8
```
日本語にする場合

```
LANG="ja_JP.UTF-8"
```
以下のを実行することで変更
 . /etc/sysconfig/i18n
(これではリブートすると元に戻る）

以下のファイルを変更

 /etc/locale.conf 

英語にする場合

```
LANG=en_US.UTF-8
```
日本語にする場合

```
LANG="ja_JP.UTF-8"
```

こちらも実施。以下のファイルに追記
 ~/.bash_profile

```
LANG=en_US.UTF-8
export LANG
```




##Myディレクトリの日本語からの変更

LANG=C xdg-user-dirs-gtk-update
※Windows上のTerminalで実施

変更確認のウインドウが表示されるので変更の実施を行う。
（もとの日本語名への変更もここで可能）
SQLチートシート

## 基本構文
### select from where 構文
```sql
select 得たい列 from table名 where 条件式;
```
全ての列を得たい場合は <span style="color: #f9ce1d">*</span> を使用する。
whereの条件が複数ある場合は<span style="color: #ef968f">AND</span>または<span style="color: #ef968f">OR</span>でつなぐ。
```sql
select * from users;
select name, age from users where age > 20 AND gender='female';
```
<span style="color: #ee6f0b">※必要な列に絞ることでパフォーマンスが改善し料金が抑えられるので、なるべく、* は使用しないにしましょう</span>

### sqlの記述順序
1. select
2. from
3. where
4. group by 
5. having
6. order by 
7. limit

### sqlの実行順序
1. from 
2. where
3. group by 
4. having
5. select 
6. order by 
7. limit

<span style="color: #ee6f0b">selectの順番だけ実行と記述で順序がことなることに注意。</span>

## 集約関数
<span style="color: #7ed071">※集約関数では、nullは無視されるので特に配慮は不要</span>
### 合計値を求めるsum

2019年に入ってからの売り上げが知りたい場合

``` sql
select sum(amount) from orders where order_time >= '2018-01-01 00:00:00';
```
### 平均値avg

``` sql
select avg(price) from orders where order_time >= '2018-01-01 00:00:00';
```
### 最小値min,max
``` sql 
select min(price) from places;
```

### 数を数えるcount
``` sql
-- 女性ユーザー
select count(*) from users where  gender='male';
-- 四月のUU(応用)
select count(distinct user=id) from access_logs where between '2019-04-01' AND '2019-04-31';
```

### グループごとに集計するgroupby
```sql
-- 都道府県ごとのホテルの数
select prefecture, count(*) from places group by prefenture;
-- 2018年の月別UU(応用)
select created_month, count(distinct user_id) form access_logs where created_month between '2019-01-01 ' AND '2019-01-01' group by created_month;
```
created_monthのカラムがない場合、asを用いてcreated_atから作り直す必要があるが、後述

### having 
group byされたものから、絞り込み

```sql
select request_month, count(*) from access_logs where created_at between '2018-01-01 00:00:00' AND  '2019-01-01 00:00:00' group by request_month having count(*) > 1000;
```

### データの並び替え
### order by

```sql 
-- 価格の安い順にホテルを出力
--価格が同じときは登録日時が早い順
select * from places order by prices asc, id asc;
```
ascは低い順、descは高い順
カンマ区切りで複数指定できる

## 関数と演算子

### 絶対値の取得
```sql 
select abs(-10);
```
### 四捨五入round
```sql
-- 税込み価格を表示
select id, name, round(price * 1.08, 0) from places;
```
### 文字列結合concat
```sql 
select concat(family_name, 'さん') from users;
```
## 日付と時刻の演算

### 主な演算子
- 現在の日付・・current_date
- 現在の時刻・・current_timestamp
- n日後の日付 d + interval n day
- 時刻の日や月のみを取り出して出力・・extract
- 値を特定の型としてキャスト・・cast


```sql
-- 2018年1月に作られたplacesの名前を取り出す
select name from places where extract(month_year from created_at)=201801;

--UU
SELECT DATE_FORMAT(created_at, ‘%Y-%m’) as reg_time,COUNT(DISTINCT user_id) 
FROM access_logs GROUP BY reg_time ;

```

## テーブルの結合
### 内部結合 innner join
```sql
select reservation.id, places_id from reservation inner join
on reservation.places_id = places.id; 
```

## サブクエリ
``` sql
-- 2018年に商品を購入していないユーザーの一覧
select * from users where not in
(select id from orders where created_at between 20180101 and 20190101)

-- 全ホテルの平均単価よりも高いホテルのみを取得し、商品単価の高い順に並べる
select * from places where price > (select avg(price) from places)
order by price desc;
```
F#でAndroidアプリ開発 環境構築

F#でandroidアプリ開発について紹介します．
まずは入門として，android開発のための環境構築に手順について確認します．

まずはVisual Studio 2019を起動します．
「新しいプロジェクトの作成(N)」を選択します．

![1_createNewProject.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521336/5f8b59c7-79ee-1715-c8ba-18792d0ca11a.png)

Androidのプラットフォーム内にある「単体テス トアプリ(Android)」を選択します．

![2_selectApplication.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521336/e2a9be3b-f606-8f07-d1f9-b7548bc8daec.png)

任意のプロジェクト名および場所，ソリューション名を決定し，作成を選択します．

![3_createProject.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521336/6671eb06-7a75-05d7-21d5-74ba9365ddfe.png)

作成後の状態です

![4_justCreatedProject.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521336/10a3d232-3ad1-a426-46c4-ce4b8897794a.png)

タブのツールからNuGetパッケージマネージャー，ソリューションのNuGetパッケージの管理を選択します．

![5_referFromNuget.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521336/a1805054-1091-2041-b9db-a75675d88d91.png)

参照からFSharp.Coreを検索します．

![6_FSharp.Core.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521336/babcd34f-d8c4-aa7d-0a87-df8a14262bea.png)

FSharp.Coreを選択し，プロジェクトを選択し，インストールします．

![7_FSharp.CoreInstall.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521336/937ec8bf-48cd-de21-e466-8cfb0972de8b.png)

次に，参照設定を右クリックし，参照の追加を選択します．

![8_BigInteger.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521336/89bc6d79-4641-6899-aeb7-77c8d1669500.png)


System.Numericsにクリックし，OKを選択します．![10_screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521336/0e14cb7f-23a3-16c6-e4a4-0b484fac40d3.png)

スマートフォンをPCに接続します．
USBデバッグを有効にします．

![9_System.Numerics.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521336/75079782-097f-b0e0-4033-f378ae3d19ca.png)

デバッグを実行します．
すると，スマートフォンでデバッグが実行できます．

![12_executionScreen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521336/8c64aa7a-0f48-210d-d72d-25231716ccb5.png)

次回以降，Androidアプリ開発について随時更新していきます．
Rails6でSemanticUIのJavaScriptを読み込む方法（ドロップダウン・アコーディオン等を使いたい！）

**[SemanticUI](https://semantic-ui.com/)**でドロップダウンやアコーディオン等の部品を使用するには、JQueryをインストールし、SemanticUIのJavaScriptを読み込む必要があります。

Rails6以前でSemanticUIを利用する方法についてはQiitaなど情報が充実しています。しかし、**Rails6からJQueryのインストール方法やapplication.jsの読み込み方法が変更された**ため、Rails6での設定には戸惑う方が少なくないかと思います。（僕がそうでした。）

ということでこの記事には、**Rails6における、SemanticUIのインストールからJavaScriptを読み込む（ドロップダウン等の部品を動かす）方法**を記載します。

確認環境は以下の通りです。

* Rails 6.0.0
* JQuery 3.4.1
* semantic-ui-scss 2.4.2.0

## SemanticUIのインストール

まずはSemanticUIをインストールする方法から。Railsでは、**[semantic-ui-scss](https://github.com/doabit/semantic-ui-sass)**というgemを使ってSemanticUIをインストールできます。

Gemfileに以下を追記後、`bundle install`します。

```:Gemfile
gem 'semantic-ui-sass'
```

`appication.scss`に以下を追記します。

```sass:app/assets/stylesheet/application.scss
@import "semantic-ui";
```

これでSemanticUIのインストールは完了です。単純なButtonなど、JavaScriptを利用しない部品は利用できるようになっているはずです。

## JQueryのインストール

SemanticUIのドロップダウン等の部品を使うには、JQueryをインストールする必要があります。

Rails6以前は`jquery-rails`というgemを利用するのが一般的でしたが、Rails6ではgemを使わずにインストールすることができるようになっています。

以下のコマンドを実行し、yarnでJQueryを取得します。

```
$ yarn add jquery
```

次に、`application.js`に以下を追記します。

**※ Rails6以前とRails6では`application.js`のパスが変わっています。**

* Rails6以前：`app/assets/javascript/application.js`
* Rails6：`app/javascript/packs/application.js`

```javascript:app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery') // この1行を追記
```
最後に、`environment.js`に以下を追記します。

```javascript:config/webpack/environment.js
const { environment } = require('@rails/webpacker')

// 追記：ここから
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)
// 追記：ここまで

module.exports = environment
```

これでJQueryが利用できる状態になりました。

## JavaScriptの読み込み

SemanticUIのJavaScriptを読み込むには、`app/assets/javascript/application.js`に設定を書き込みます。このファイルはRails6では存在しないため、手動で作成する必要があります。（Rails6以前では自動で作成されます）

また、使用したいSemanticUIの部品を動かすためのコード（初期化コード）も書いておきます。たとえば、ドロップダウンを使用する場合は以下のようにします。

```javascript:app/assets/javascript/application.js
// Loads all Semantic javascripts
//= require semantic-ui

// ドロップダウンを使用するためのコード
$(function(){
  $('.ui.dropdown').dropdown();
})
```

各部品の初期化コードは**[SemanticUI公式サイトのUsage](https://semantic-ui.com/modules/accordion.html#/usage)**に掲載されているので、そちらを参照してください。

このままでは`app/assets/javascript/application.js`は読み込まれないので、`application.html.erb`に以下を追記します。

```erb:app/view/layouts/application.html.erb
<head>
    （略）
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <!-- ↓この1行を追記 -->
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
```

以上です。これでドロップダウン等が動作するようになっているかと思います。

## 参考

* [Semantic UI（公式）](https://semantic-ui.com/)
* [issue #140 / semantic-ui-sass](https://github.com/doabit/semantic-ui-sass/issues/140)
* [Rails6でjQueryの導入方法 / Qiita](https://qiita.com/masahisa/items/eaacb0c3b82f4a11fc13)
Kotlinでクラスと同名のメソッドをトップレベルに作れるらしい

クラスのコンストラクタと同じ引数でなければ、トップレベルに同じ名前のメソッドを定義できる。

```Kotlin
class Test (args: String)

fun Test() = "test"
```

これだけだといまいち使えないけど、ジェネリクスが絡むと使えるかも。

```Kotlin
class Test2<T>(clazz: Class<T>) {
    // 何かしらの処理
}

inline fun <reified T> Test2(): Test2<T> = Test2(T::class.java)

val test2 = Test2<Int>()
```

何でこんなの調べたかというと、Gsonを使っているときにListの型情報を保持するクラスを作ったが、class渡すの面倒臭いなと思ったからだ。

```Kotlin
// Listの型情報クラス。中身は省略
class ListType<T>(clazz: Class<T>)

// 大文字から始まるメソッドに警告が出るのを抑制
@Suppress("FunctionName")
inline fun <reified T> ListType(): ListType<T> = ListType(T::class.java)

// List<String>の型情報
val type = ListType<String>()
```

多分他にも使いみちあるかもだけど、今の所思いつかないので省略。

ただ、自分の場合はAndroid StudioのKotlinのカラースキームで、`Functions > Package-level function call` がデフォルトで_Italic_になっていたので、これを調整しないと見た目上違和感があった。

![見た目クラスっぽいのに斜体になる](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85081/7cec76e5-bafb-7e93-17fb-a5e795799a49.png)


[参考にしたものはこちら](https://discuss.kotlinlang.org/t/reified-type-parameters-through-inline-constructors/12537)
[VRChat]アバターでアニメーションオーバライドを使ってものを出し入れするときの私的メモ

#アバターでアニメーションオーバライドを使ってものを出し入れする
ここに書いてある
http://shiasakura.hatenablog.com/entry/2018/03/30/190811
http://shiasakura.hatenablog.com/entry/2018/04/18/082930

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454308/09955cb1-fea0-f506-3c5e-5dde637002d1.png)


#相手からは見えるシェーダの実装方法
作者様（@dadenCKEP）のreadmeを読めば実装方法は書いてありますが，私的に詰まったところをメモ

```text:readme.txt
使い方
1. カメラを適当な場所に入れる(なにも映らないので本当にどこでもいい)
2. カメラに設定されているレンダーテクスチャを使用したいシェーダのSensorの欄に入れる
3. 自分だけ見たい場合はそのまま、ほかの人だけに見せたい場合は「Change to Other」のチェックを入れる
 ```
>カメラを適当な場所に入れる(なにも映らないので本当にどこでもいい)

ここでのカメラは
Assets\LocalShader\LocalCheck.prefab
のこと
間違っても自身で作成したカメラではない（1敗）
>カメラに設定されているレンダーテクスチャを使用したいシェーダのSensorの欄に入れる

ここでのレンダーテクスチャは
Assets\LocalShader\LocalCheck.renderTexture
間違っても自身で作成したレンダーテクスチャではない（1敗）


#参考文献

###アニメーションオーバライド
http://shiasakura.hatenablog.com/entry/2018/03/30/190811
http://shiasakura.hatenablog.com/entry/2018/04/18/082930


##シェーダ作者様のページリンク
###相手からは見えるシェーダ
https://twitter.com/dadenCKEP/status/1040154249835950080
https://www.dropbox.com/s/opaj48d5bjsiej4/LocalShader.unitypackage?dl=0
https://vrcworld.wiki.fc2.com/wiki/%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC%E5%B0%8F%E6%8A%80#h30aadee
###改良版
https://twitter.com/dadenCKEP/status/1045533123172171776
https://www.dropbox.com/s/lci9q5p5otjwlj8/StandardDistanceClip.shader?dl=0
コントローラを跨いで値を取り出す方法

##前提１

```Rails:schema.rb
create_table "users", force: :cascade do |t|
    t.string "name"
    t.string "user_image_id"
    t.text "user_introduction"
end

create_table "posts", force: :cascade do |t|
    t.string "title"
    t.text "body"
end
```

##前提２
```Rails:posts.controller.rb
def index
  @posts = Post.all
end
```


##アソシエーション

```Rails:User.rb
has_many :posts
```

```Rails:Post.rb
belongs_to :user
```

##ビュー
postのビューで、userテーブルの値を呼び出し！　

```posts/index.html.erb

<% @posts.each do |post| %>

  <%= post.user.name %>

<% end %>
```

<%= post.user.name %>を分解すると

post は　each分で定めたブロック変数
user は　userテーブル（アソシエーションしてるので！）
name は　userテーブルのカラム。


posts/index.html.erbは、postクラスの中であるが、
post と user　がアソシエーション(関連づけ)されているため、
user.name　のカラムを取り出すことが可能。


アソシエーションはなんでもかんでもすればいいわけではないが、コントローラを跨いで値を取り出すには必要な作業です。
特定のディメンジョン値を総合計から除外したクロス集計表を作る

# 前提
Tableau Desktop 2019.3
たぶん、他のバージョンでも使えるかと

# やりたいこと
クロス集計表を作って総合計の欄を追加したときに、特定の行の値だけ総合計に入れたくない。
そんなことする必要ある？って思うと思いますが、”現行と同じ仕様で”って言われると、こういうのもやらないといけなかったりします。（無茶苦茶）

# 普通に作った場合
## データ
<img width="385" alt="データ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184997/e81e0531-1d67-38b0-2f39-1233cc9e5b28.png">

## Viz
<img width="960" alt="通常のクロス集計表.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184997/cd667329-13d2-8a4a-36b7-a1c7ec721a1e.png">

総合計は通常の合計値になってます。

# key1="a2"を除いた場合
<img width="960" alt="a2を除外したクロス集計表.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184997/6a2182fc-1357-5901-6f2f-123ac83b9776.png">

総合計からa2の行の値が抜けてます。
これを作るのがゴールです。

# 手順
１．a2の場合0にする計算フィールドの作成
<img width="390" alt="value_without_a2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184997/36b3899d-14c4-61b9-faec-c8e7e6a9906d.png">

２．総合計のみに反応するような計算フィールドの作成
<img width="387" alt="value_without_a2_for_grandtotal.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184997/11042e38-38ad-438c-5fb1-fd682ada3e9f.png">

FIRST()が0、LAST()も0っていうのがポイントです。

３．表計算設定を表（下）に変更
<img width="960" alt="表計算設定.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184997/0c395dfe-b555-8c74-ff4a-eb768b102f35.png">

これで完成です。

## Tableau Publicでも作ってみた
https://public.tableau.com/profile/takahiro.shigemoto#!/vizhome/13493/a2
Laravelのイベントまとめる

# はじめに
Laravelでイベント機能を実装する必要がありそうだが、
全くさわったことがないため、使い方を一から整理する。

イベント（リスナー）に実装する内容は本来ならコントローラーでも実装可能です。
ただ、コントローラーはどうしてもコード量が増えてしまうので、
なるべくコード量を減らしたいです。
そういった意味ではリスナーに記載することでコードがスッキリします。

また、コントローラーであれば複数処理をまとめて同じクラスに記載することとなりますが、
リスナーでは処理毎にクラスが分かれるので、
後々のリファクタリングも楽になります。

# イベントとは
任意のタイミングで別の処理を実行させます。
例えば、
ユーザー登録やLoginなどのタイミングでイベントを発行して、メールでの通知を実行させるなど。

# やること
・イベントとリスナーの定義
・イベントとリスナークラスの作成
・リスナーの実装

# 現状の確認
### 現状のイベントとリスナーの確認
app/Providers/EventServiceProvider.php内の
listenプロパティにてイベントと対応するリスナーが記載されています。
以下と同様の場合、まだ特に設定がない状態です。

```php
namespace App\Providers;

use Illuminate\Support\Facades\Event;
use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;

class EventServiceProvider extends ServiceProvider
{
    /**
     * The event listener mappings for the application.
     *
     * @var array
     */
    protected $listen = [
        'App\Events\Event' => [
            'App\Listeners\EventListener',
        ],
    ];

    /**
     * Register any events for your application.
     *
     * @return void
     */
    public function boot()
    {
        parent::boot();

        //
    }
}

```

### Auth認証周りの確認
```php artisan make:auth```で認証周りを実装した場合には、
Laravel側でイベントを発行してくれています。
vendor/laravel/framework/src/Illuminate/Auth/Events内に
登録されているイベント一覧があります。
認証周りのイベントを使用する場合はここのイベント名を使用することになると思います。

今回はこのAuthのイベントのうち、PasswordResetを使用します。


# リスナーの定義

app/Providers/EventServiceProvider.phpのListenプロパティに今回使用するイベントと
リスナーの組み合わせを記載します。
なお、リスナーは複数記載可能です。

```php

class EventServiceProvider extends ServiceProvider
{
    /**
     * The event listener mappings for the application.
     *
     * @var array
     */
    protected $listen = [
        'App\Events\Event' => [
            'App\Listeners\EventListener',
        'Illuminate\Auth\Events\PasswordReset' => [
            'App\Listeners\PasswordResetListener',
        ],
    ];
```

# 通知の作成
次にコマンドからmake:listenerコマンドを打ちます。
これでapp/Listeners配下に指定したファイル名のListerクラスが作成されます。

```bash

php artisan make:listener PaswordResetListener --event=Illuminate\Auth\Events\PasswordReset
```

なお、今回はAuthですでにあるイベントを使用しましたが、
イベントを新規で作成する場合は

```bash

php artisan event:generate
```
を打つことで定義したイベントとリスナーが作成されます。


# リスナーの実装
作成されたリスナーはapp/Listeners配下に作成されます。
以下が作成されたリスナークラスです。
この中のhandleメソッドが実行されるのでここを修正していきます。
親切にメール送付のコードが初期から記載されてますね。
メール送付くらいだったらこのままでも全然良いかも。

```php

<?php

namespace App\Listeners;

use IlluminateAuthEventsPasswordReset;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Support\Facades\Mail;

class PaswordResetListener
{
    private $mailer ;
    private $eloquent;
    /**
     * Create the event listener.
     *
     * @return void
     */
    public function __construct(Mailer $mailer , User $eloquent)
    {
        //
        $this->mailer = $mailer;
        $this->eloquent = $eloquent;
    }

    /**
     * Handle the event.
     *
     * @param  IlluminateAuthEventsPasswordReset  $event
     * @return void
     */
    public function handle(IlluminateAuthEventsPasswordReset $event)
    {
        //
        $email = new EmailVerification($user);
        Mail::to($user->email)->send($email);
    }
}
```
終わり
モデルの保存と取り出し

## モデルの保存と取り出し
### scikit-learn
```python
import pickle
with open('model.pickle', mode='wb') as fp:
    pickle.dump(clf, fp)

import pickle
with open('model.pickle', mode='rb') as fp:
    clf = pickle.load(fp)
clf.predict(df)
```
### XGBoost
```python
import xgboost as xgb
import pickle

# save the model
model = xgb.XGBClassifier(max_depth=4)
model.fit(X_train, y_train)

pickle.dump(model, open("xgb_model.pickle", "wb"))

# load model from file
loaded_model = pickle.load(open("xgb_model.pickle", "rb"))

y_pred_proba = loaded_model.predict_proba(X_test)
y_pred = loaded_model.predict(X_test)
```

### chainer
```python
# save model
from chainer import serializers

model = L.Classifier(myDNN(100, 500, 10))
serializers.save_npz("mymodel.npz", model) 

# load model
from chainer import serializers

model = L.Classifier(myDNN(100, 500, 10)) # saveした時と同じ構成
serializers.load_npz("mymodel.npz", model)
```

※注意
セーブした時と、同じ構成でmodelを作ってあげないとロードできない。
android(Termux)でkotlinの開発環境構築

# termuxでjava環境構築
https://github.com/MasterDevX/Termux-Java
のREADME.mdの通りにinstallする

```
pkg install wget && wget https://raw.githubusercontent.com/MasterDevX/java/master/installjava && bash installjava
```

# kotlinの環境構築
```
sdk install kotlin
```

# proot環境に移動する(ここじゃないと[javaを実行できない](https://github.com/MasterDevX/Termux-Java/issues/3#issuecomment-548653884))


```
pkg install proot
proot -0
```

うまくいきました

```
:/data/data/com.termux/files/home # kotlin -version
Kotlin version 1.3.50-release-112 (JRE 1.8.0_152-b16)
```

# 追記

```sh
proot kotlinc
```
でKotlinのインタラクティブモードに入れます

Termuxでpkg installできない、pkg upgradeできない等あった場合 -> [TermuxでGPG errorが出たときの解消方法](https://qiita.com/mynkit/items/6e709a48980dc90ec15c)
rubyで1文字ずつ表示する

下の、motoの値を書き換えるだけなので、簡単です。
前回出した、[musicplayerの作り方](https://qiita.com/midorifugu2007/items/ae9b2e89bb02ece02ebb)などの記事でも使っていたのですが、説明を忘れていました。

```ruby:ruby
        moto = "テスト\n" #これは、テストと表示するプログラムです。
        string = moto
        loop do
        print string.chr
        moto = string.chr
        string.sub!(/#{moto}/,'')
        if string.size == 0
        break
        end
        sleep 0.1
        end        
```
マージリクエストしようとしたら以前プッシュした別ブランチと統合されてしまった

プログラミングを初めて二か月ほどの者です

二週間ほど前にプッシュしたブランチと今回プッシュしたブランチがマージリクエストしようとしたら、統合されてしまいました

以前プッシュしたものは今回いらないものなので、なんとか切り離したいのですが、解決方法が分かる方は教えていただきたいです。
medium のブログを無料で無制限に閲覧する方法

タイトルをTwitter検索で検索して、Twitterの検索結果経由で無制限に閲覧できます。

[Twitter検索](https://twitter.com/search)

Medium CEOより
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125746/a12ecb17-1ee1-01f5-a623-e40cc0667f79.png)
二次元累積和

https://atcoder.jp/contests/kupc2019/tasks/kupc2019_f


```python

from itertools import product




class Cumsum2D(object):
    def __init__(self,A):
        S = [a[:] for a in A] # deep copy
        for i,j in product(range(len(A)),range(len(A[0]))):
            if i: S[i][j] += S[i - 1][j]
            if j: S[i][j] += S[i][j - 1]
            if i and j: S[i][j]-=S[i - 1][j - 1]
        self.S = S

    def sum(self, yd, yu, xl, xr):
        if yd >= yu or xl >= xr: return 0
        S = self.S
        res = S[yu - 1][xr - 1]
        if yd: res -= S[yd - 1][xr - 1]
        if xl: res -= S[yu - 1][xl - 1]
        if yd and xl: res += S[yd - 1][xl - 1]
        return res




```
Kyoto University Programming Contest 2019 F - カズマ王国の陥落 
https://atcoder.jp/contests/kupc2019/submissions/8458010
Dockerfile 作り方

## 起動中のコンテナを確認
`docker ps -a`
起動中のコンテナがあるなら、一度全て停止＆削除
`docker stop [コンテナID]` → `docker rm [コンテナID]`

`docker volume ls`
でvolumeも確認しておいたほうがいい。



## ベースコンテナを起動
`docker run -it ubuntu:latest /bin/bash`
これで一回Dockerの中に入って、普通にubuntuで環境を構築するように作る。
この時、yes を打たなくていいように、-yをつけたり、-fをつけたりするべきかどうかに気をつけて作業すること。

### オプション
`docker run -it -v $(pwd):/tmp/share ubuntu:latest /bin/bash`

-v でvolumeを指定する。

-p でportをオプションで開けておく。
`docker run -it -p 80:80 ubuntu:latest /bin/bash`

## 失敗して環境を壊したら
`exit`
をしてからまた、
`docker run -it ubuntu:latest /bin/bash`
とすると、最初から構築できる。

## 環境ができたと思ったら
history
を見ながら、Dockerfile を作成する。
<a href="https://www.wakuwakubank.com/posts/270-docker-build-image/#dockerfile%E3%81%A7%E5%88%A9%E7%94%A8%E3%81%A7%E3%81%8D%E3%82%8B%E5%91%BD%E4%BB%A4">書き方はここを参照するとわかりやすい</a>

## イメージ作成
`docker build -t イメージ名:タグ名 .`

## コンテナ作成
`docker run --name コンテナ名 -it -v $(pwd):/tmp/share イメージ名:タグ名`

## コンテナの中に入る
`docker run -it -p 5000:5000 -v $(pwd):/home hinano_flask:1 /bin/bash`

## コンテナを実行する
`docker run -it -p 5000:5000 -v $(pwd):/home hinano_flask:1`




## 参考
https://qiita.com/KeitaMoromizato/items/ae1a57fc62b41b942d71
https://qiita.com/Riliumph/items/3b09e0804d7a04dff85b

https://www.wakuwakubank.com/posts/270-docker-build-image/#dockerfile%E3%81%A7%E5%88%A9%E7%94%A8%E3%81%A7%E3%81%8D%E3%82%8B%E5%91%BD%E4%BB%A4