OmniAICreator/Qiita-1.07M huggingface dataset:
[ゼロから作るDeep Learning]パーセプトロンの限界と多層パーセプトロンの可能性について分かりやすく解説してみた

# はじめに
この記事は**ゼロから作るディープラーニング ３章パーセプトロン**を自分なりに理解して分かりやすくアウトプットしたものです。
文系の自分でも理解することが出来たので、気持ちを楽にして読んでいただけたら幸いです。
また、本書を学習する際に参考にしていただけたらもっと嬉しいです。

# パーセプトロンの限界
パーセプトロンはパラメータを調整するだけでANDゲート・NANDゲート・ORゲートのように様々な機能を持たせることができる、汎用性の高いアルゴリズムです。
しかし、パーセプトロンにも表現できないものが存在します。それは**非線形分離**を用いるものです。
今までパーセプトロンで表現してきたものはすべて一本の直線で分類が可能なもの(線形分離を用いたもの)でした。
**ANDゲート・NANDゲート**
<img width="311" alt="スクリーンショット 2019-10-14 18.43.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510602/6a9aec6e-d648-f098-5a94-7b936c022f93.png">
**ORゲート**
<img width="360" alt="スクリーンショット 2019-10-14 18.45.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510602/4f4030f1-d5d5-9eb7-9874-76af08623135.png">

しかし、パーセプトロンには一本の直線で分類ができないもの（非線形分離を用いたもの）を表現することが出来ません。
一つ例を挙げてみるとXORゲートがそれに当たります。XORゲートは１が一つあるときだけ１を返すます。逆に言うとORゲートのように１が二つある場合はダメです。

パーセプトロンでは本当に非線形分離のものを表現できないのか。
一つのパーセプトロンでは表現はできません。しかし、複数のパーセプトロンを用いれば非線形分離を用いたものも表現することが出来ます。

# 多層パーセプトロンの可能性
複数のパーセプトロンを層のように繋げることで非線形分離を用いたものも表現が可能です。これを**多層パーセプトロン**と言います。
では実際に多層パーセプトロンを用いてXORゲートを表現してみます。
<img width="416" alt="スクリーンショット 2019-10-14 19.07.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510602/337f3189-2117-9071-50cc-b7313bcf0117.png">
XORゲートはNANDゲート・ORゲートを１層にANDゲートを２層に持ってきて繋げることで表現可能です。
中身を簡単に解説すると、NANDゲートで両方１の場合を０と出力、ORゲートで両方０の場合を０と出力して最後にANDゲートで１が一つだけの場合１を返す感じです。

コードで表現すると下のような感じです。

```python
x,y = 0,1
N_a = NAND_b(x,y) #NANDゲートで1,1を除外
O_a = OR_b(x,y)#ORゲートで0,0を除外
AND_b(N_a,O_a)#1,0 0,1の時だけ１を出力
```

多層パーセプトロンは層を深くしていくことでさらに柔軟な表現をすることが可能です。さらに理論上はコンピュータを再現することも可能です。
多層パーセプトロンは以上の理由から可能性の塊と言っても遜色ありません。そして、多層パーセプトロンはニューラルネットワークの進化一歩手前とも言われています。

次は、多層パーセプトロンとニューラルネットワークの違いを解説したいと思います。
Raspberry Piに接続したSSDをNAS化する

[前回](https://qiita.com/ats030/items/65c5585c5c701841525e)の記事でRaspberry Piに外付けSSDを接続しました。今回は、Windowsネットワーク上のコンピュータからアクセスできるように、Raspberry Piに接続した外付けSSDをネットワーク接続ストレージ（NAS）として使えるようにしたいと思います。

# Sambaの設定

Sambaは、Linux上でWindowsのネットワーク機能を実現するソフトウェアです。まずSambaをインストールします。

```
$ sudo apt -y install samba
$ sudo apt -y install samba-common-bin
```

次に、外付けSSDをネットワーク上で共有できるように設定するため、以下のコマンドを実行します。まずSambaのユーザ（pi）を追加します。

```
$ sudo smbpasswd -a pi
New SMB password:
Retype new SMB password:
Added user pi.
```

また、`/etc/samba/smb.conf`も変更する必要があります。

```
$ sudo nano /etc/samba/smb.conf
```

ファイルの先頭付近の`workgroup = WORKGROUP`を使用中のWindowsワークグループ名に書き換える必要があります。
※通常Windowsワークグループは「HOME」になっています。

```ruby:/etc/samba/smb.conf
- workgroup = WORKGROUP
+ workgroup = HOME
```

次に、ファイルの最終行に以下の設定を追加します。

```ruby:/etc/samba/smb.conf
+ [USB]
+ path = /mnt/ex-ssd
+ comment = NAS Drive
+ valid users = pi
+ writeable = yes
+ browseable = yes
+ create mask = 0777
+ public = yes
```

※`path`には[前回](https://qiita.com/ats030/items/65c5585c5c701841525e)の記事で設定した、外付けSSDのマウントポイントを設定しています。

ファイルを保存して、Sambaを再起動します。

```
$ sudo /etc/init.d/samba restart
```

うまくいけば、外付けSSDはネットワーク上で共有されているはずです。

# 外付けSSDのアクセス権限の変更

外付けSSDのパーミッションの確認をします。

```
$ ls -l /mnt
合計 4
drwxr-xr-x 4 root root 4096 10月 14 16:27 ex-ssd
```

このままではWindows PCからのアクセスができないため、下記のようにアクセス権限を変更します。

```
$ sudo chmod 777 /mnt/ex-ssd/
$ ls -l /mnt
合計 4
drwxrwxrwx 4 root root 4096 10月 14 16:28 ex-ssd
```

# Windowsマシン側の設定

WindowsマシンからのRaspberry Piに接続した外付けSSDにアクセスします。エクスプローラで`\\raspberrypi\usb`にアクセスすると、ユーザー名とパスワードを要求するプロンプトが表示されます。これらを入力することで外付けSSDが使えるようになります。
cronでpython実行

備忘録。

####環境
Ubuntu Server 18.04.3 LTS
####コマンド
#####起動してるか確認
```shell-session
$ sudo /etc/init.d/cron status
```
#####起動
```shell-session
$ sudo /etc/init.d/cron start
```
#####停止
```shell-session
$ sudo /etc/init.d/cron stop
```
#####再起動
```shell-session
$ sudo /etc/init.d/cron restart
```
#####cronの設定
何もせず保存して終了

```shell-session
$ crontab -e
```
#####編集用ファイルの作成
```shell-session
$ crontab -l > .crontab.txt
```
#####pythonのパスを調べる
```shell-session
$ which python3
/usr/bin/python3
```
#####実行したいファイルのパスを調べる
```shell-session
$ readlink -f test.py
/home/houtarou/test.py
```
#####編集用ファイルの最後に、実行したいcronを書き書き
```shell-session
*/1 * * * * （pythonのパス） （実行したファイルのパス）
（例）*/1 * * * * /usr/bin/python3 /home/houtarou/test.py
```
を追加。

```shell-session
$ vim .crontab.txt

# Edit this file to introduce tasks to be run by cron.
#
# Each task to run has to be defined through a single line
# indicating with different fields when the task will be run
# and what command to run for the task
#
# To define the time you can provide concrete values for
# minute (m), hour (h), day of month (dom), month (mon),
# and day of week (dow) or use '*' in these fields (for 'any').#
# Notice that tasks will be started based on the cron's system
# daemon's notion of time and timezones.
#
# Output of the crontab jobs (including errors) is sent through
# email to the user the crontab file belongs to (unless redirected).
#
# For example, you can run a backup of all your user accounts
# at 5 a.m every week with:
# 0 5 * * 1 tar -zcf /var/backups/home.tgz /home/
#
# For more information see the manual pages of crontab(5) and cron(8)
#
# m h  dom mon dow   command

*/1 * * * * /usr/bin/python3 /home/houtarou/test.py
```
#####crontabにファイルを読み込ませる
```shell-session
$ crontab .crontab.txt
```
#####crontabに反映されたか確認
```shell-session
$ crontab -l
# Edit this file to introduce tasks to be run by cron.
#
# Each task to run has to be defined through a single line
# indicating with different fields when the task will be run
# and what command to run for the task
#
# To define the time you can provide concrete values for
# minute (m), hour (h), day of month (dom), month (mon),
# and day of week (dow) or use '*' in these fields (for 'any').#
# Notice that tasks will be started based on the cron's system
# daemon's notion of time and timezones.
#
# Output of the crontab jobs (including errors) is sent through
# email to the user the crontab file belongs to (unless redirected).
#
# For example, you can run a backup of all your user accounts
# at 5 a.m every week with:
# 0 5 * * 1 tar -zcf /var/backups/home.tgz /home/
#
# For more information see the manual pages of crontab(5) and cron(8)
#
# m h  dom mon dow   command

*/1 * * * * /usr/bin/python3 /home/houtarou/test.py
```

時間などの詳しい説明は以下を参照
https://qiita.com/katsukii/items/d5f90a6e4592d1414f99

以上
OpenCVで油絵エフェクトは1行でかけるとのことです。(C++限定)

# 背景
[opencv-contrib-python](https://docs.opencv.org/master/d3/d81/tutorial_contrib_root.html)には割と最近作成されたパッケージやライブラリがここにgithub経由でコミットされています。contribはcontribute:寄付という意味らしいです。（英語苦手:sweat_smile:)
そこから、面白そうなのはないかと探していると `xphoto::oilPainting` (油絵エフェクト)メソッドを見つけました。おそらくこのメソッドはまだPythonにはなくC++にしか現在のところないっぽいです。



# 開発

### makefile
[Mac環境でOpenCVをmakefileを使ってコンパイルする方法](https://qiita.com/satsukiya/items/02892cde8ec408ada423) にあるmakefileを少し修正します。

```makefile
CXX = c++
CXXFLAGS =  -I/usr/local/Cellar/opencv/4.1.1_2/include/opencv4/
LDFLAGS = -L/usr/local/Cellar/opencv/4.1.1_2/lib/
LDLIBS =  -lopencv_core -lopencv_highgui -lopencv_imgcodecs -lopencv_xphoto
CXXVERSION = -std=c++11

paint: paint.cpp
	$(CXX) $< -o $@ $(CXXFLAGS) $(CXXVERSION) $(LDFLAGS) $(LDLIBS)

clean :
	rm paint
```

今回の油絵エフェクトメソッドを使うためには `opencv_xphoto` が必要になるのでライブラリファイルを追加します。 

### cpp

``` c++
#include <opencv2/opencv.hpp>
#include <opencv2/highgui.hpp>
#include <opencv2/xphoto.hpp>

int main(int argc, const char* argv[]) {
	cv::Mat src = cv::imread("./mikan.jpg");
	cv::Mat dst;

	if (src.empty()) {
		std::cout << "read error.\n";
		return -1;
	}
    
    cv::xphoto::oilPainting(src, dst, 10, 1, cv::COLOR_BGR2Lab);

	cv::namedWindow("oil painting effect", cv::WINDOW_AUTOSIZE);
	cv::imshow("oil painting effect", dst);
	cv::waitKey(0);
	cv::destroyAllWindows();

   return 0;
}
```
インクルードも同様に `#include <opencv2/xphoto.hpp>` と宣言を追加します。

# 結果

### ソース画像 (その1)

いつもの通り[みかん星人](https://www.mercari.com/jp/search/?keyword=%E3%82%A6%E3%82%B4%E3%82%A6%E3%82%B4%E3%83%AB%E3%83%BC%E3%82%AC+%E3%81%BF%E3%81%8B%E3%82%93%E6%98%9F%E4%BA%BA)です。
![mikan.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288206/b6edf5f1-7982-76cd-11ef-df32f84e8012.jpeg)


### Processed (その1)
<img width="507" alt="oil.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288206/dcf90910-ef6d-0b47-75e9-64e21eafc6d4.png">

それっぽく油絵になりました。
まゆ毛濃いです。(元からか)


### ソース画像 (その2)
[Instagram 橋本環奈(多分公式)](https://www.instagram.com/kanna399/?hl=ja) にあった最新の投稿画像を使ってみます。
<img width="398" alt="kanna.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288206/5658ba31-9604-23f2-bcb7-152d29a9e90f.png">


### Processed (その2)
`xphoto::oilPainting` の3つめの引数を `10 -> 5` にしています。おそらく筆の太さと同義です。低めに設定しないと顔の輪郭が表示しにくくなります。
<img width="397" alt="kanna_dst.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288206/fa7726e3-e1a7-3201-f526-2224fec805d2.png">


# まとめ
opencvが4系になってかなりモジュール・メソッドが増えた。
今まで使ってこなかったメソッドを探すのは後で使おうと思った時に役に立つ、気がします。:robot:

# 参考になりそうなリンク
- [Oil painting effect](https://docs.opencv.org/master/dd/d8c/tutorial_xphoto_oil_painting_effect.html)
- [oilPainting()](https://docs.opencv.org/master/de/daa/group__xphoto.html#gac050a6e876298cb9713cd2c09db9a027)
Django+ReactでWebアプリを作る時に困るかもしれないRoutingのお話

#概要
Python製WebアプリケーションフレームワークDjangoとフロントエンドフレームワークReactの融合方法とつまづくと思われるRoutingについてまとめ

#準備

##Django準備
コマンドライン

```
#アプリケーション生成
django-admin startproject webapp
#ディレクトリへ
cd webapp

#Reactコードを格納するディレクトリをプロジェクトルート直下に
mkdir frontend
mkdir frontend/src
mkdir frontend/src/component
touch frontend/src/index.js

#staticファイルを入れるディレクトリをプロジェクトルート直下に
mkdir static
mkdir static/js
```
コマンド一発でできるDjangoはやはり神であったか・・・
/templetes/index.html

```html
{% load static %}
<!DOCTYPE html>
<html lang="ja" id="mysite">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
  <div id=App>
  </div>
</body>
<script src="{% static "js/main.js" %}"></script>
</html>

```

##React

コマンドライン

```
#プロジェクトのディレクトリにて（manage.pyがあるところ）
npm init -y
npm i webpack --save-dev
npm i webpack-cli --save-dev
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react babel-plugin-transform-class-properties --save-dev
npm i react react-dom prop-types --save-dev
```

/.babelrc

```json
{
    "presets": [
        "@babel/preset-env", "@babel/preset-react"
    ],
    "plugins": [
        "transform-class-properties",
        "styled-jsx/babel"
    ]
}

```

/package.json

```json
(省略)
  "scripts": {
    "dev": "webpack --mode development ./frontend/src/index.js --output ./static/frontend/main.js",
    "build": "webpack --mode production ./frontend/src/index.js --output ./static/frontend/main.js"
  },
(省略)
```

/webpack.config.js

```javascript

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};
```

reactアプリはRoutingをする感じで好きなのを作ってみてください。
APIも必要なら作りましょう。
そんな感じで作ったアプリケーションのRoutingについて次で触れます。

#Routing
SPAで意外と難しいのがこのRouting。というのもDjangoとReact双方のRouting機能が競合して面白いことになってしまいます。なのでURL周りは以下のように設定します。

/webapp/urls.py

```python
#省略

api_urlpatterns = [
    省略
]

urlpatterns = [
    #この順番を守ろう。
    path('admin/', admin.site.urls),#管理ページのURL
    path('spa/1.0/', include(api_urlpatterns)),#APIのURL
    url(r'^',TemplateView.as_view(template_name='index.html'))#index.html配信URL
]

```

/webapp/settings.py

```python
#以下適当な箇所に追加
APPEND_SLASH=False
```

そしてReactでは

```html
<Switch>
    <Route exact path="/" component={component_of_top} />
    <Route exact path="/hoge" component={component_of_hoge}/>
</Switch>
```
こんな感じにしてURLの最後に/をつけないようにしましょ。
M5StackでSESAMEスマートロックのリモコンを作った

(※オートロック機能まで作ってから公開予定でしたが、しばらく作業時間が取れそうにないので公開)

我が家では今年の4月からスマートロックの SESAME mini を使っています。  

[セサミ スマートロック | CANDY HOUSE JAPAN](https://jp.candyhouse.co/)

[うちのドアの鍵は微妙に大きくて他のスマートロックは取り付け出来ないですが、SESAMEの場合はサポートがかなり親切で、アダプターを作ってくれたり。](https://twitter.com/uzuki_aoba/status/1116694719667376128)

SESAMEのメリットの一つに、REST APIが用意されているので簡単にハックできることなんですが、これまで特に弄ってなかったので、とりあえずM5Stackでコントロールできるようにしてみました。

## API Key の発行と操作の有効化

ロックの操作をAPIから行うには、API Keyの発行と、操作の有効化を行う必要があります。

API Key の発行は、ダッシュボードの **API Settings** から行います。
https://my.candyhouse.co

操作の有効化 は、Sesameロックを設定したスマホアプリから行います。


## M5Stackからリクエスト

```cpp
    StaticJsonDocument<200> doc;
    switch(command) {
      case LOCK  : doc["command"] = "lock"; break;
      case UNLOCK: doc["command"] = "unlock"; break;
    }
    String jsonString;
    serializeJson(doc, jsonString);

    const char* taskId;
    
    HTTPClient http;
    http.begin("https://api.candyhouse.co/public/sesame/" + String(SESAME_DEVICE_ID));
    http.addHeader("Authorization", String(SESAME_TOKEN));
    int httpResponseCode = http.POST(jsonString);
```

ソースコード全体はこちら。　
https://gist.github.com/TakuroFukamizu/37e932c302ff3a46814fd50e8314155c

## まとめ

SESAME いいよ SESAME。
APIで気軽に制御できてたのしいです。

さらに、M5Stackみたいなマイコンでボタン操作できるとちょっとうれしい。
React で @keyframes を使ってみた

# はじめに
`@keyframes` は、アニメーションの開始から終了までの中間地点を制御する事が可能です。
ReactでもCSSファイルは利用できるので、CSSファイルに記述することで実装できますが、コンポーネントファイル内の`style`変数に含めて記述できないか？ということで今回トライしてみました。

# 今回作成するもの
今回は、React スターターキットの `create-react-app` で登場するReactロゴがグルグル回るアニメーションを作成します。
(codepenのリンクに完成版貼っていますが、ここではテキスト回しています。笑）
`create-react-app` では、CSSファイルに `@keyframes` を書いて動かしています。

<p class="codepen" data-height="300" data-theme-id="0" data-default-tab="result" data-user="mineyuji" data-slug-hash="vYYGYGv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="React keyframes">
  <span>See the Pen <a href="https://codepen.io/mineyuji/pen/vYYGYGv">
  React keyframes</a> by mineyuji (<a href="https://codepen.io/mineyuji">@mineyuji</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# React で @keyframes を使う
個人的にReactで開発を行う場合、JSファイルのみで書きたいけれど、細かいアニメーションや、擬似クラスの書き方を学ぶついでに今回は、 `@keyframes` を例にした`@-規則`のCSS文に挑戦してみました。

### 擬似クラス`hover`の場合
`:hover` などの擬似クラスの場合は、以下のように`'(シングルコーテーション)`で囲むことで書く事ができます。

```indes.js
const styles = {(
  root: {
    color: '#f00',
　　'&:hover': {
　　　　color: '#00f',
   },
  },
)};
```
`styles` 変数内に綺麗に書けます！　

### `@-規則` `@keyframes`の場合
今回、 `@keyframes` に挑戦しようと色々調べてみたのですが、なかなかクールな書き方が見つけられず、結局以下の形で落ち着きました。

```jsx:index.js
const Spin = (
  <style>
    {`
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    `}
  </style>
);

const styles = ({
  div: {
    height: '100vh',
    position: 'relative',
  },
  h1: {
    (...省略 詳細は、codepenに！)
    animation: "spin infinite 20s linear",
  },
});
```

`render` の中に `Spin` を埋め込むことで、スタイルファイルを読み込ませました。
挙動的には正しく動かすことができました。

# やってみて
書き方的にクールではないなといった感じです。
ベットで、スタイル要素を `render` 内に記述するのは...ちょっと。
できれば、`styles` にまとめて書きたいです。苦戦しました。


# さいごに
今回は、**実現する** といったところまでの内容でしたが、どこかで綺麗な書き方に出会ったらまたアップデートしたいと思います。
「綺麗な書き方あるよ！」といった方いましたらぜひ！教えていただけると嬉しいです。涙
pythonでslackに通知する方法まとめ

# 環境
python3.6

# やりかた1（Webhook）
もっとも簡単な方法は、slackチャンネルのWebhook URLを取得してrequestsモジュールでPOSTする方法  
[こちらの記事](https://dara-blog.com/python-programming1)を参考にしました。  

```python3:simple.py
import requests
import json

# webhookURLを指定
webhook_url = "自分のチャットルームのWebhookURL"

# 送信するテキストを定義
text = "PythonでSlackにメッセージを送る"

# Slackに送信する
requests.post(webhook_url, data = json.dumps({
	"text": text
}))
```

# やりかた2（app経由）
slack apiのappを作って、権限設定しつつ、appからメッセージ&画像送信
以下の記事の順で参考にして進めていきました。
[token取得](https://qiita.com/ykhirao/items/3b19ee6a1458cfb4ba21#tokenを作成する)
[コード](https://qiita.com/stkdev/items/992921572eefc7de4ad8#image_urlを指定する方法)
OpenStreetMap coastline（海岸線）から GeoJSON LineString 生成

こんにちは。
[OSMCoastline](https://osmcode.org/osmcoastline/) を用い、OpenStreetMap coastline（海岸線） のデータから、GeoJSON LineString を作りました[^1]。日本の例です。
* [OSMCoastline](https://osmcode.org/osmcoastline/) および必要物は homebrew を用いてインストールしました。

[^1]: "[OSM Water Layer: Surface Waters in OpenStreetMap](http://hydro.iis.u-tokyo.ac.jp/~yamadai/OSM_water)" (Dai YAMAZAKI's website) も参考になります。

<img width="289" alt="coastline.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54617/0b951541-ef47-bbe8-3157-fa6a1ef7e0ac.jpeg">

![shima.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54617/b394f68b-2d6d-91b4-f34d-dc773ec15b7f.jpeg)

```console
$ brew install cmake gdal osmcoastline
$ wget http://download.geofabrik.de/asia/japan-latest.osm.pbf
$ osmcoastline_filter -o japan-coastline.osm.pbf japan-latest.osm.pbf 
$ osmcoastline -l -p none -o japan-coastline.db japan-coastline.osm.pbf
$ ogr2ogr -f "GeoJSON" japan-coastline.json japan-coastline.db lines
```
BERT など Transformer 系 model を TorchScript を経由して PyTorch Mobile(Android) で動作させ NLP したい

## 背景

* BERT など Transformer 系の NLP を Android で動かしたい.
* PyTorch 1.3 により, PyTorch Mobile が対応されてきており, PyTorch のモデルをモバイルで動かせる機運がたかまる
  * TFLite も頑張ればできそうではあるが..(or libtensorflow を Android で動かすとか)
* huggingface python-transformers https://github.com/huggingface/transformers が TorchScript 対応しているのでこれをベースにする

ちなみに iOS(Core-ML)はすでにあります.

https://github.com/huggingface/swift-coreml-transformers

## 状況

JIT Tracing により `.pt` を作れるところまで確認

## 変換の流れ

v1.3 の PyTorch Mobile から, モバイルで動かすには onnx 経由で caffe2 で動かすではなく, TorchScript でモバイル実行(C++ 実行と近い?)が推奨になっているようです

pytorch コード(python) -> TorchScript -> Mobile 実行(libtorch? caffe2?)

## TorchScript(JIT) とは?

https://pytorch.org/docs/stable/jit.html

TensorFlow でいう tflite や, frozen model データ(.pb)に相当でしょうか.

フロントエンド言語としては, Python 言語の subset となります.
ここからさらに, IR(中間言語)として LLVM IR っぽい感じの言語に落としこまれます. 

PyTorch ソースコードをちらっと見ると, ゼロから python ライクな言語(と LLVM IR っぽい IR 言語)を実装していて Facebook の開発力を感じますね.

tracing と scripting の二種類があります(内部的には同じ?)

制御構造などを持たないものは tracing で対応, 制御構造を持つもの(e.g. RNN 系)は scripting で対応のようです. 

なんとなく Mobile で動かすには tracing だけで変換できるようにするのが推奨そうな気がしますね.

### アノテーション

TorchScript に変換するために, 以前は python コードで, class は `torch.jit.ScriptModule` を継承したり, `@` デコレータ指定が必要でしたが, v1.2 からほぼ既存の python コードそのままを扱えるようになりました.

https://pytorch.org/docs/stable/jit.html#migrating-to-pytorch-1-2-recursive-scripting-api

型情報が必要な場合は, mypy 形式でコメントに型情報を記載するか, python 3.6 からの typing モジュールを使って型付けする必要があります.
 
HuggingFace pytorch-transformers のコードを見ると, JIT 用のアノテーションはありませんし, typing も使っていません. TorchScript 化を考慮してうまく python で記述していますね.

## HuggingFace pytorch-transformers を TorchScript 変換する

あまり情報はありませんが, README.md にちらっと記述があります.

https://github.com/huggingface/transformers#quick-tour

```
    # Models are compatible with Torchscript
    model = model_class.from_pretrained(pretrained_weights, torchscript=True)
    traced_model = torch.jit.trace(model, (input_ids,))
```

固定長の input を用意して, `torch.jit.trace` 呼び出しています.

実際に BertModel('bert-base-uncased') は変換できるのを確認しました. およそ 400 MB 程度のファイルサイズとなりました. 

### libtorch(C++)でモデルを読み込む

PC(Linux) 環境ですが, 

```
torch.jit.load
```

で無事に trace した .pt ファイルをロードできるのを確認しました. ロードに数秒かかります.

## TorchScript 拡張子

セーブ時はファイル拡張子見ていないようなので, 実際のところ `.pt`, `pth` のどれでも同じになります.
実際のところは NPZ(numpy zipfile)と同じように, 複数のファイルを非圧縮でまとめた zip のようです.

## TODO

* [x] libtorch(C++) で `.pt` を読み込みで動作するか確認する
* [ ] Android で動かす
  * [ ] `asset` フォルダからの load API を調べる
* [ ] scripting にして, 可変長入力に対応できるか試す
JavaScript でテキストエリア内の文字列を書き換えた際に undo や redo が効くようにする

# はじめに
以前にこのような記事を書きました。
[JavaScript でテキストエリア内のカーソルのある位置に文字列を挿入する方法](https://ja.developers.noraworld.blog/insert-text-into-textarea-at-cursor-position)

しかし、この方法でテキストエリア内の文字列を書き換えると、一つ問題が生じます。それは、**undo (`command + z`) や redo (`command + shift+ z`) が効かなくなること**です。

この記事では、undo や redo が効く方法でテキストエリア内の文字列を書き換える方法をご紹介します。

# execCommand を使おう
結論から言うと、`execCommand` というものを使うと undo や redo が効く状態でテキストエリア内の文字列を書き換えることができます。

使用例としては以下の通りです。

```javascript
document.execCommand('insertText', false, '挿入したい文字列');
```

上記の JavaScript を実行すると、キャレット (カーソル) のある位置に、挿入したい文字列が挿入されます。文字列が選択状態だった場合は、選択範囲の文字列は削除されます。

# 実用的な例
`execCommand` を使った実用的な例を一つご紹介します。

```javascript
const TAB_SIZE = 4;
const SPACES = ' '.repeat(TAB_SIZE);

document.addEventListener('keydown', (event) => {
  if (event.key === 'Tab') {
    event.preventDefault();
    document.execCommand('insertText', false, SPACES);
  }
});
```

テキストエリア内でタブキーを押すと、次の要素にフォーカスを移動させる代わりに 4 つ分のスペースを入れることができます[^1]。

[^1]: もっと厳密に実装しようとしたら、フォーカスがテキストエリア内になければ実行しないとか、修飾キーと一緒に押されていた場合は無視するとかの処理が必要だと思いますが、この記事では省略します。

ちなみに、`document.execCommand()` だと、テキストエリアが同ページに複数あった場合は、どのテキストエリアなの？ と疑問に思いましたが、単純にフォーカスされているテキストエリアに限定されるようです。

そのため、上記の例のようにキーで発動させるのではなく、ボタンを押して発動させる場合、ボタンを押した時点でテキストエリアからボタンへとフォーカスが移動してしまいますので、ボタンを押す前のテキストエリアの要素を事前に取得しておいて、ボタンが押されたときにテキストエリアへとフォーカスを戻す、といった処理が必要になるかと思います。

# もっと詳しく
実はこの `execCommand` は、文字列の挿入以外にも様々なことができます。第一引数の `insertText` に疑問を持った方もいるかもしれませんが、まさにこの第一引数を変えることで様々なことができるようになります。

具体的にどのようなコマンドがあるかは、MDN のページに詳しく書かれていますので、気になる方はこちらをご覧ください。

[Document.execCommand() - MDN - Mozilla](https://developer.mozilla.org/ja/docs/Web/API/Document/execCommand)
個人的AppDelegateまとめ[Swift]


あとで追記します。
# プロパティの保存
基本的には変更がなくてどのVCでもアクセスしたいプロパティを書いておくイメージ。
この辺がわからない。解決を調べるの忘れないように一旦メモ。

```swift
//AppDelegateに変数を追加した場合、一度実行しないと追加の行為が適用されない？??
var subPrefecture = ["石狩(いしかり)支庁", "胆振(いぶり)支庁", "渡島(おしま)支庁", "オホーツク支庁", "上川(かみかわ)支庁", "釧路(くしろ)支庁", "後志(しりべし)支庁", "宗谷(そうや)支庁","空知(そらち)支庁","十勝(とかち)支庁","根室(ねむろ)支庁","日高(ひだか)支庁","檜山(ひやま)支庁","留萌(るもい)支庁"]
var selectionHome: Int = 0 //ohotuku;0, rumoi:13
var selectionCheck: Int = 0 //ohotuku;0, rumoi:13
var cellCount: Int = 0
var subprefectureStringAndPlace: [String:String] = [String:String]()
var scrollAmount: Int = 0

var ishikari = ["石狩市（いしかりし）","江別市（えべつし）","恵庭市（えにわし）","北広島市（きたひろしまし）","札幌市（さっぽろし）","新篠津村（しんしのつむら）","千歳市（ちとせし）","当別町（とうべつちょう）"]
```

Flagでプロパティを定義してる時にメモったものみたいだけど時間経ち過ぎて忘れたのでいったんここにメモ。
**追加の行為**ってどういう意味だっけ。。。。。完全に忘れた。。。。
速習webpackの要約と感想まとめ

この記事は[速習webpack 速習シリーズ](https://www.amazon.co.jp/%E9%80%9F%E7%BF%92webpack-%E9%80%9F%E7%BF%92%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E5%B1%B1%E7%94%B0%E7%A5%A5%E5%AF%9B-ebook/dp/B07CQLGGP9)の読書メモです。
本書の内容をかいつまんで要約した記事になりますので、気になったらご購入をお勧めします。

#webpackとは
複数のJavaScriptファイルのリソースを一つに束ねるツールである。
その機能をモジュールバンドラーといい、昨今ではフロントエンド 開発で欠かせないツールである。

##使用上のメリット
###1.依存関係の解決
複雑なアプリでは使用するライブラリ同士の依存関係を把握することが難しいが、モジュールバンドラーはその依存関係を開発者が意識しなくて済むよう自動的に依存関係を解決してくれる。

###2.リクエスト回数の抑制
複数のファイルを一つにまとめているため、リクエスト回数が減少し、転送効率が上昇する。

###3.大規模開発に向いている
一つのファイルをクラス（関数群）単位でモジュール化することで名前空間がファイルごとに分離しているため、複数人での開発にも向いている。
▪️複数のモジュールに対応
・CommonJS
・AMD
・ES Modules★
　ECMAScript2015（ES2015）で標準化されたモジュール仕様

▪️ローダー、プラグインが豊富
webpack自体にJavaScriptファイル以外のバンドル機能はないが、ローダーを使用すればスタイルシートや画像ファイルもバンドル可能になる。cssファイルもSASS形式からコンパイルした上で利用できる。TypeScriptなどのaltJs言語をコンパイルして利用することも可能である。

▪️フレームワークでの採用実績
Vue.jsやAngular、ReactなどのJavaScriptフレームワークで内部的にWebpackが利用されています。
例：vue-cli
Ruby on Railsでも5.1以降webpackが標準採用されているよう。

###4.ライブラリを再現できる
別環境でライブラリを準備したい時、package.jsonをコピーしてnpm installすれば同じライブラリをインストールできる。

##モジュールの書き方
```javascript:calc.js
//定数
export const NAME = 'Calc';
// クラス
export class Calc {
	static getAddResult(a,b) {
		return a + b;
	}
	static getTriangle(base,height) {
		return base * height / 2;
	}
}
```

###インポート、使用例
```javascript:index.js
import { NAME } from './calc';
import { Calc } from './calc';

console.log(NAME); //Calc
Calc.getTriangle(5,4); //10
Calc.getAddResult(5,3); //8
```

###export defaultの書き方
```javascript:calc.js
export default class {
    //定数
	export const NAME = 'Calc';
	// クラス
	static getAddResult(a,b) {
		return a + b;
	}
	static getTriangle(base,height) {
		return base * height / 2;
	}
}
```

###インポート、使用例
```javascript:index.js
import Calc from './calc';

console.log(Calc.NAME); //Calc
Calc.getTriangle(5,4); //10
```

##webpack.config.jsについて
webpackの設定を記載するファイルで、ビルド時に行う細かい設定や制御を追加できる。
詳しくは「[webpack.config.jsがわからない](https://qiita.com/one-kelvin/items/b810aafb6b5ef90789a3)」の記事がお勧め。

###・Entry
　ビルドの起点ファイル。
###・Output
　バンドル後の出力ファイル
###・Loaders
　javaScriptファイル以外をバンドルする際に使用。
　css-loader等の設定をここに記載する。
###・Plugins
　webpackの機能を拡張するライブラリ。

#最後に
本書はwebpack.config.jsの説明が半分以上を占めています。
そのことから、webpackの要は設定ファイルにあることがわかりました。ローダーやプラグインの説明が具体的にされていたので、webpack.config.jsの書き方がいまいちわからないという方には是非お勧めしたい本です。
ページ数も少なく、「速習」というだけあって手軽に読めました。
著者が山田祥寛さんということで、私のJavaScriptの教科書「改訂新版JavaScript本格入門」の著者でもあるので安心と信頼のわかりやすさでした。kindleでお安かったです。

###参考リンク
[JavaScript本格入門を読んで、初心者がつまづいたポイントまとめ](https://qiita.com/shoko_sjb/items/0b72c31908188ebbbccc)
[改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで]
(https://www.amazon.co.jp/%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88JavaScript%E6%9C%AC%E6%A0%BC%E5%85%A5%E9%96%80-%E3%83%A2%E3%83%80%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AB%E3%82%88%E3%82%8B%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E7%8F%BE%E5%A0%B4%E3%81%A7%E3%81%AE%E5%BF%9C%E7%94%A8%E3%81%BE%E3%81%A7-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B/dp/477418411X/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=Javascript%E6%9C%AC%E6%A0%BC%E5%85%A5%E9%96%80&qid=1563172447&s=gateway&sr=8-1)
macOS Catalinaにアップデート後、発熱+ファンが異常に回る不具合の対処方法（仮）

`MacBookPro 13`愛用者ですが、先日Catalinaにアップデートしました。アプデ後スリープさせてるはずなのにあっつあつ状態。勝手に再起動するしバッテリー持ちがヤバイことに。

# 今のところの最善策
追記：一度バックアップ→復元で多分改善したかな？これ以上試したことはないので参考にしてくださいm(_ _)m

　
SMCとNVRAMのリセットで発熱は一旦治りました。再発する可能性もあるので（仮）
どちらのリセット時にも**一度再起動をしアプリ等々が完全に終了している状態で**システム終了をすることをお忘れなく。
### SMCリセット
SMCリセットは`shift` + `control` + `option` + `電源ボタン` を10秒間長押しする。この時リンゴマークが2回表示される。その後、電源ボタンより起動。
### NVRAMリセット
NVRAMリセットは電源ボタンを押してすぐに、`option` + `command` + `P` + `R` を20秒間長押しする。この時リンゴマークが2回表示される。その後、電源ボタンより起動。

一応公式置いておきます。
[Mac の SMC (システム管理コントローラ) をリセットする方法](https://support.apple.com/ja-jp/HT201295)
[Mac で NVRAM または PRAM をリセットする](https://support.apple.com/ja-jp/HT204063)

#  教訓：OSアプデはバックアップを取ってから
リリースしたてなんだから不具合あって当たり前じゃないか。でもポチポチッとしちゃったのが悪いんだよ。。。じゃあダウングレードすりゃいいやん！そう考えました。でもできないんです。なぜか？バックアップ取ってないんすよね。
Macではありがたいことに`TimeMachine`というバックアップ手法があります。これさえやっていれば簡単にダウングレードできましたハイ。
なので定期的にバックアップは取りましょう。




以下、試したことを殴り書きしてます。暇があればどうぞ。

## 原因は'Photoanalysisd'？
アクティビティモニターを見ると`Photoanalysisd`というプロセスのCPU時間がものすごいことに。
このプロセスは写真アプリの分析？とか写真アプリ関係のプロセスらしいです。じゃあこいつを止めればいいやん！

### 改善案その1（プロセス停止）
まずプロセスの停止を試みました。

```shell
launchctl disable gui/$UID/com.apple.photoanalysisd
launchctl kill -TERM gui/$UID/com.apple.photoanalysisd
```
これで無効化して停止してくれます。一時的に。
これやっても戻ってきちゃうんですよねこのプロセス。なので没。

### 改善案その2（iCloud）
どうやらiCloudの写真同期で問題が発生しているらしい（読んだ記事では）
写真同期自体ほぼ使ってないので無効にしました。手順としては
1. システム環境設定 → Apple ID → 写真の項目のチェック外す
2. Finderからピクチャの中身を一時移動
3. 再度、手順1で写真のチェックを入れる

手順3は行いませんでした(使わないので)
これで一晩置いてみましたが改善せず。没。

### 改善案その3(SIPの無効化)
SIPを無効化するといい？みたいな記事があったので試しました。
まず`SIP`とはなんぞや。
#### SIPとは
システム整合性保護（System Integrity Protection）の略。
公式に概要載ってたのでそのまま貼ります。↓↓↓
[Mac のシステム整合性保護について](https://support.apple.com/ja-jp/HT204899)
手順は、

1. リカバリーモード（`command`+`R`+`電源ボタン`）で起動
2. ログイン後、左上のユーティリティからターミナルを起動
3. `csrutil disable`とコマンドを打って再起動
これで無効化できます。
・・・これ無効化していいんか？
無効化してみたけど変わらずホカホカのカイロなので没。

### 改善案その4（photoanalysisdを消す）
消すって表現はどうなのかなと思いましたが他に思いつかないので許してクレメンス。
[photoanalysisd - GO AWAY](https://forums.macrumors.com/threads/photoanalysisd-go-away.1984220/)
この記事に書いてある通りのことをやってみます。

1. SIPを無効化
2. `/System/Library/PrivateFrameworks/PhotoAnalysis.framework/Versions/A/Support`の中にある`photoanalysisd`を消す。
3. ゴミ箱に入れたなら完全消去してね
4. SIPを再度有効化

手順1のSIPを無効化しないと手順2が行えない様ですが、無効化しても**読み取り専用だよ**と怒られてしまい消せませんでした。なので没。

## Photoanalysisdは消えた。でもkernel_taskが代わりに居座っている。
なんやかんやしてたら問題視していた`photoanalysisd`が居なくなっていました（やったね
でも熱々ホカホカのマック(Mac)です。
代わりに出てきたのが`kernel_task`さん、Mac本体が熱くなるとファンとか動かして冷ましてくれているありがたい存在です。つまりこいつがバリバリ動いている何かしらの要因があるはずです。それがわからん。他には特にこれといったものは見つからず。。。

最終時に、常套手段の[SMCとNVRAMのリセット](#今のところの最善策)で今のところ改善はされました。最初からこれやってればよかったのにね。

##参考
[システム整合性保護（System Integrity Protection: SIP）の無効化](https://support.intego.com/hc/ja/articles/115003523252-システム整合性保護-System-Integrity-Protection-SIP-の無効化)
[photoanalysisd - GO AWAY](https://forums.macrumors.com/threads/photoanalysisd-go-away.1984220/)
[Mac の SMC (システム管理コントローラ) をリセットする方法](https://support.apple.com/ja-jp/HT201295)
[Mac で NVRAM または PRAM をリセットする](https://support.apple.com/ja-jp/HT204063)
【JQuery】click()とon(click)の違い

JQueryを勉強中に気になったので調べた内容を備忘録。
間違っていたらご指摘お願いします。

###onメソッドについて
on()メソッドは、対象となる要素にイベント名や関数を指定することで、イベント処理を実現できます。

```
対象要素.on(イベント名, セレクタ, データ, 関数)
```

使えるイベントは様々ありますが、今回はclickイベントを例にまとめます。

例

```js
$('button').on('click', function(){
   console.log('on');
 });
```
buttonをclickした時の関数の処理を書いているが、自分が最初学んだときは以下の様なコードだった。

```js
$('button').click(function(){
    console.log('ボタン押しました');
  });
```
どちらもclickイベントを実装できる点は同じだが、何が違うのか。
###大きな違いは、Jqueryで途中から追加されたHTML要素を検出できるかどうか。

###click（）の例:

```html
<div>
   <button>ボタン１</button>
</div>

<script>
  $('button').click(function(){
    console.log('ボタン押しました');
  });

  $('div').append('<button>ボタン２</button>');
</script>
```
まずボタン１があり、その後appendでボタン２を追加しています。
'button'に対しclickイベントを書いていますが、この場合ボタン１にしか紐づいておらず、後から追加したボタン２には紐づいていません。つまり、ボタン１のclickイベントは動作しますが、ボタン２ではclickイベントは動作しません。

###on(click)の例:

```html
<div>
   <button>ボタン１</button>
</div>

<script>
  $('div').on('click', 'button', function(){
    console.log('ボタン押しました');
  });

  $('div').append('<button>ボタン２</button>');
</script>
```
まず、対象を最初から存在している'div'にします。そしてon()の引数にbutton要素を指定します。こうすることで、後から追加されたbutton要素にも紐づくため、button1, button2両方とも問題なく動作します。
ダイナミックバッチングによる描画順序の処理最適化


# オブジェクトの描画処理は高負荷である
オブジェクトをスクリーンに描画する際は、グラフィックス API (OpenGL や Direct3D 等) に対してドローコールが行なっている。
グラフィックスAPI内では多数の処理を行うためCPUを多く消費する。
Unityでは負荷を押さえるために2つのテクニックがある。

- **動的バッチ処理**: かなり小さいメッシュ用に、その頂点を CPU 上に変換して多数の類似したものを群にし、ひとまとめにして描画します。
- **静的バッチ処理**: 静的 (つまり、動かない) ゲームオブジェクトを大きなメッシュと結合して、それを高速でレンダリングします。

# バッチ処理を有効にする大前提
## 出来るだけ同じマテリアルを共有するようにする
**まとめてバッチ処理できるのは、同じマテリアルを共有しているゲームオブジェクトのみ**。
例えばテクスチャが違うだけのオブジェクトを、別のマテリアルとして作成してしまうとバッチ処理は走らない。


#動的なバッチ処理を有効に使うための勘所
**動的なバッチ処理はCPUを多く消費**する。
動的バッチ処理は、オブジェクトを描画する際に

```
個別に描画するコスト > 動的バッチ処理のコスト + バッチ化されたドローコールの処理コスト
```

際に有効になる。
すなわち**動的バッチ処理が有効なのは、グラフィックス APIの処理コストが高い場合**である。
Apple の Metal のような最新の API など、処理負荷が低いグラフィックス APIを使用する場合は利点がないことがある。


### 動的バッチ処理を有効にするための工夫

#### 頂点属性 900 以下で、頂点数が 300 以下にする
頂点数を少なくする。
> 動的なゲームオブジェクトのバッチ処理では 頂点ごとにある程度オーバーヘッドが発生します。そのため、頂点属性 900 以下で、頂点数が 300 以下のメッシュにしかバッチ処理は適用されません。

#### Transform にミラーリングを含む場合は、オブジェクトはバッチ処理は適用されない
Transform:オブジェクトの変換操作。
https://docs.unity3d.com/ScriptReference/Transform.html
x軸のscaleを-1にするとミラーリング（鏡写し）になる。
https://answers.unity.com/questions/326905/how-to-mirror-an-object-reverse-its-sides.html

## 静的なバッチ処理
静的バッチ処理はCPU上で頂点の変換を行わないため動的バッチ処理よりも**CPUは低負荷だが、メモリを多く消費する**。
静的なバッチ処理がメモリを多く消費するのは、合成したジオメトリを保存するために余分なメモリを消費するからである。

静的バッチを利用するには、そのオブジェクトが静的で、ゲーム内で移動、回転、スケールを行わないということを明示的に設定する必要がある。
そのためにインスペクターの **Static チェックボックスをオン**にする必要がある。

### 静的なバッチ処理を使わない方が良い場合
密集した森林において木を静的なバッチ処理をする場合などは、メモリ使用量が膨大になり、許容範囲を超える場合がある。
その場合はレンダリングのパフォーマンス劣化を許容して、静的なバッチ処理を外す方が良いこともある。

### 描画順序の入れ替えによる最適化
#### オブジェクトごとのRender Queueを調整する
Render Queueはデフォルトでは全て2000で設定されている。
同じマテリアルであればダイナミックバッチングの対象になるが、**バッチ化されるのは描画順が連続している場合**である。
A,Bのマテリアルがあり、A,Bを元にしたオブジェクトA1,A2,B1,B2がある場合。
##### 例1:連続していないのでバッチ化されない
A1→B1→A2→B2
##### 例1:連続しているのでバッチ化される
A1→A2→B1→B2

この順序で描画させるためには

- AのRender Queueを2001
- BのRender Queueを2002

として、**Rebder Queueの値をマテリアルごとに一意**にしてやればいい。


## 参考
### ドローコールのバッチ処理
https://docs.unity3d.com/ja/2018.1/Manual/DrawCallBatching.html

### 参考書籍
[Unityゲーム プログラミング・バイブル](https://amzn.to/2VGlsN0)
<img border="0" src="https://images-na.ssl-images-amazon.com/images/I/61EF%2BnDlbWL._SX258_BO1,204,203,200_.jpg" >
【JavaScript】 変数とスコープについて。

##概要
var、let、constの3種類の違いと、それぞれのスコープ内の挙動に関してまとめました。
先に押さえておきたい部分を説明した後に、スコープの説明に入ります。

##目次
- 変数
	- 変数宣言
		- 変数宣言の種類
- 初期化と代入
	- 初期化
	- 代入
- スコープ
	- スコープの種類
		- グローバルスコープ
		- ローカルスコープ
			- 関数スコープ
			- ブロックスコープ
	- スコープチェーン

##変数

扱いたいデータを格納し、何度でも再利用できるオブジェクト。

###変数宣言

変数をプログラム上に定義すること。

####変数宣言の種類

変数宣言には以下の種類が存在し、それぞれ挙動が異なる。

#####var（バー）

古くから使われているお馴染みの変数宣言、jQueryのサンプルなどもほとんどvarが使用されている。
実案件でも世に溢れているので必ず理解していないとまずい。

#####let（レト）

ES6から登場した変数宣言、代入可能なのでvarに近い感覚で使える。

#####const（コンスト）

ES6から登場した変数宣言、再代入不可なので、定数の感覚で使える。
※let、constはES6だけどIE11に対応しているのでそのまま使用できる。


##初期化と代入

###初期化
変数宣言と同時に、値・文字列を代入すること。

```javascript
var x = 0;
```

###代入
すでに定義されている変数に、値・文字列を格納すること。

```javascript
var x = 0;
x = 1;
```

####varにおける注意点
初期化が何度でも可能であるので、代入と混乱しないように注意したい。


#####■間違い

```javascript
var x = 0;
var x = 1;
```
このように初期化して上書きしてもエラーにならない、これをlet、constで実行するとエラーになる。

#####■正しい

```javascript
var x = 0;
x = 1;
```

##スコープ

定義した変数を参照できる範囲。

###スコープの種類
グローバルスコープとローカルスコープが存在する、さらにローカルスコープとして関数スコープとブロックスコープが存在する。

####グローバルスコープ
scriptタグ内の最も外側のエリア、ここで宣言された変数はwindowオブジェクト直下に格納される。
このエリアに定義されている変数をグローバル変数と呼ぶ。

```javascript
var x = 0;
console.log(window.x);
// 0
```

####ローカルスコープ
グローバルスコープの内側で、より参照範囲を絞ったスコープ。
ローカルスコープとして関数スコープ、ブロックスコープが存在する。
このエリアに定義されている変数をローカル変数と呼ぶ。

####関数スコープ
関数内に存在するスコープ。

```javascript
function myFunc() {
	var x = 0;
	console.log(x);
	// 0
};
myFunc();
console.log(x); // ReferenceError
```

#####引数がある場合の注意点

関数において、引数はローカル変数である。
外側のスコープを見ているのかと思えば、引数がある場合は同スコープ内の変数として扱われるので注意。

```javascript
var x = 0;
function myFunc(x) {
  console.log(x);
};
myFunc(1);
// 1
```

####ブロックスコープ
ブロック内に存在するスコープ
※変数宣言はlet、constのみ対応。

```javascript
{
	let x = 0;
	console.log(x);
	// 0
}
console.log(x); // ReferenceError

```

varはブロックスコープに対応していない。

```javascript
{
	var x = 0;
	console.log(x);
	// 0
}
console.log(x);
// 0
```

#####ローカルスコープ内での変数宣言対応を一覧表にしました。

######関数スコープ
|var|let|const|
|:---:|:---:|:---:|
|○|○|○|

######ブロックスコープ
|var|let|const|
|:---:|:---:|:---:|
|×|○|○|

※スコープに適応している場合○、しない場合×

#####例外ケース
for文の()にもローカルスコープに等しい挙動がある、for文のブロック外からは参照できない。

```javascript

for(let x = 0;x < 10;x++){
	console.log(x);
	// 0〜9
}
console.log(x);
// ReferenceError

```

###スコープチェーン
スコープチェーンとは、複数生成されたオブジェクトに対して、それらの順序をリスト化したものである。
生成されたオブジェクトにスコープが存在するので、変数はどの順序で参照していくのか仕組みを理解する必要がある。
スコープチェーンの仕組みを知らないと、特にスコープがネストされている際に変数の参照を正しく判別できない。

以下のコードと文脈で説明します。

```javascript
function outerFunc() {
  var x = 0;

  function innerFunc() {
	var z = 2;
    console.log(x);     
    console.log(y);
    console.log(z);
  };
  innerFunc();
};

var y = 1;
outerFunc();
// 0
// 1
// 2
```

- xはinnerFunc内を探したが、存在しなかったので一つ上のouterFunc内を探しに行き拾えた。
- yはinnerFunc内、outerFunc内を順に探したが存在しなかった、次にグローバルスコープ内を探しに行き拾えた。
- zはinnerFunc内に存在したのでそのまま拾えた。

このように近くのスコープから順に辿り探していく仕組みである。



以上となります、ご覧戴きありがとうございました。
間違い等のご指摘あれば、よろしくお願いします。
TypeScript + webpackでModule not foundでハマった

webpackでコンパイルする際にハマったのでメモ。

### ファイル構成

```
node_modules
src
  ├─dist
  ├─app.ts
  └─functions.ts
package.json
package-lock.json
tsconfig.json
webpack.config.js
```

```ts:src/app.ts
import * as functions from './functions';

functions.a();
functions.b();
```

```ts:src/functions.ts
export function a() {
    console.log('a');
}

export function b() {
    console.log('b');
}
```

```js:webpack.config.js
const path = require('path');

module.exports = {
    entry: {
        app: './src/app.ts',
    },
    output: {
        path: path.resolve(__dirname, 'src/dist'),
        filename: '[name].js'
    },
    resolve: {
        modules: [path.resolve(__dirname, 'src'), 'node_modules']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            }
        ]
    }
}
```

```json:package.json
{
    "scripts": {
        "dev": "webpack --mode development"
    }
}
```

### コンパイル

```
npm run dev
```

### 結果

```
> test-ts@1.0.0 dev C:\testts
> webpack --mode development

Hash: 99f990c29902dfc250ea
Version: webpack 4.41.1
Time: 1510ms
Built at: 2019-10-14 6:02:12 PM
 Asset      Size  Chunks             Chunk Names
app.js  4.07 KiB     app  [emitted]  app
Entrypoint app = app.js
[./src/app.ts] 154 bytes {app} [built]

ERROR in ./src/app.ts
Module not found: Error: Can't resolve './functions' in 'C:\testts\src'
 @ ./src/app.ts 3:18-40
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! test-ts@1.0.0 dev: `webpack --mode development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the test-ts@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\User\AppData\Roaming\npm-cache\_logs\2019-10-14T09_02_12_974Z-debug.log
```

### 修正

```js:webpack.config.js
module.exports = {
    resolve: {
        extensions: ['.ts'],
        modules: [path.resolve(__dirname, 'src'), 'node_modules']
    }
}
```

[resolve.extensions](https://webpack.js.org/configuration/resolve/#resolveextensions)が必要でした。
考えてみれば`import * as functions from './functions';`では拡張子がないので指定しないといけないですね。
node.jsの超軽量テストライブラリを作ってみた（開発中）

## 超軽量node.jsテストライブラリを作ってみた。

jsで、テストは難しいんじゃあああああああ！
というのも、jsのテストライブラリは、総じて学習コストが高い！
独自DSLを覚えるのではなくて、なるべくjs本来のシンプルな記述でテストがしたいんじゃああああ

そこで、超軽量級テストフレームワークassertz
このテストライブラリは、なんと、関数一つのみで全てのテストを記述しようとする潔さです。
node coreに本来備わっているassertという関数を、テストに使えるようにしたライブラリです。

# 従来のテストライブラリの問題点

例えば、jestには、以下のような、多数のマッチャーがあります。
toBeGreaterThan(3)
toBeTruthy()
.toMatch(/stop/)

それぞれ、
・　３以上である
・　trueである
・　stopという正規表現にマッチする
というマッチャーです。
簡潔にロジックを表現出来る代わりに学習コストが高くなっています。

## 私が作ったテストライブラリ、assertzではどうするか？
マッチャーを、一つしか提供しないことで、学習コストを徹底的に削りました。

実はassertzには、assert(a, b)　a === bの時テスト成功！　という一つのマッチャしか実装されていません。
つまり、あらゆるテストをマッチャ一つで記述するため、学習コストが異常に低いです。
上記の例は、
・ 3以上である
assert(a >= 3, true)
・ trueである。
assert(a, true)
のように記述出来ます。

# また、テストに名前は必要でしょうか？
jestでは、以下のように、名前を強制的に記述しなければなりません。
it('a test' () => {
  expect(777).toBe(777)
})

これは、コメントでいいのではないでしょうか？
// a test
assert(777, 777)

jestでは、名前空間を作成することが出来ます。

describe('namespace', () => {
  it('a test', () => {
    expect(777).toBe(777)
  })
})
console.log(A) // => Aが定義されていません

jsのクロージャーという性質を使って、同じことが出来ます。

{
  // a test
  const A = 777
  const B = 777
  assert(A, B)
}
console.log(A) // => Aが定義されていません

jestでは、非同期のテストを記述することが出来ます。

it('some test', async() => {
  const A = 777
  const B = await getB()
  expect(777).toBe(B)
})

即時関数+asyncを使用すると、同じことが出来ます。
( async () => {
  const A = 777
  const B = await getB()
  assert(A, B)
})()

assertという一つの関数だけで、これほどの表現力を実現することが出来ました。


# assertzの仕組み。

実はassertの中身は、一行だけ。
lodashの、_.isEqualを使用しています。

jsにアサインされた。だけどテストに学習コストはかけたくない。
ちょっとしたスクリプトのテストが書きたいだけ。
そんな人のテスティングフレームワークです。

完成は、2019年の３月を予定しています。
まだ使わないでください。
スタックによるキューの実装と、キューによるスタックの実装

## 概要
LIFO, FIFOを実現するデータ構造としてそれぞれスタックとキューが挙げられますが、本記事ではこれらの一方を用いてもう一方を実装する手法を紹介したいと思います。

## StackによるQueueの実装
2つのスタックを用意し、いずれか一方に要素を格納します。ただしキューの要件であるFIFO(first in first out)を実現するため、もう一方のスタックを利用して古い要素が上に来るようにスタックに積み上げていきます。　

### Push
1. スタックS1に格納されている要素をスタックS2に移動
2. 空になったスタックS1に新しい要素を格納
3. スタックS2からスタックS1に要素を戻す

<img width="601" alt="Screen Shot 2019-10-14 at 17.30.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122091/af0b86df-b3a7-561f-1e60-951d149fdf60.png">

### Pop
上記のPush操作によって最も古い要素がスタックS1のTopに位置しているので、そのままPopします。

<img width="596" alt="Screen Shot 2019-10-14 at 17.30.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122091/16ae7352-1228-d2b2-4ee2-7b40c9b85c7c.png">

### 実装例
```python:2つのスタックを用いてキューを実装する
class MyQueue(object):
    def __init__(self):
        # 2つのスタックを用意する
        self.s1 = []
        self.s2 = []

    def push(self, x):
        # s1からs2に要素を移す
        while self.s1:
            self.s2.append(self.s1.pop())
        # 空になったs1に要素を追加する
        self.s1.append(x)
        # s2からs1に要素を戻す
        while self.s2:
            self.s1.append(self.s2.pop())

    def pop(self):
        return self.s1.pop()

    def peek(self):
        if len(self.s1) > 0:
            return self.s1[-1]
        else:
            return None

    def is_empty(self):
        return len(self.s1) == 0
```

### 補足
上記の例とは逆に、push時はそのままスタックに積み上げ、pop時に一方のスタックを利用して逆順にpopするようにしてもOKです。

## QueueによるStackの実装
2つのキューを用意し、いずれか一方に要素を格納します。ただしスタックの要件であるLIFO(last in first out)を実現するため、もう一方のキューを利用して直前に格納された値をpopするようにします。

### Push
Pushの際は一方のキューにそのまま要素を追加していきます。

<img width="576" alt="Screen Shot 2019-10-14 at 18.01.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122091/fc6e9b26-43c5-b126-7b8c-7b530ac4c90f.png">

### Pop
1. 一方のキューに格納されている要素をもう一方のキューに移動（ただし要素一つだけ残す）
2. 残された要素を直近の要素として返す

<img width="572" alt="Screen Shot 2019-10-14 at 18.01.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122091/978265c2-4ee8-d3be-14b9-df5750ee4879.png">

### 実装例

```python:2つのキューを用いてスタックを実装する

from collections import deque

class MyStack(object):
    def __init__(self):
        # 2つのキューを用意する
        self.q1 = deque()
        self.q2 = deque()

    def push(self, x):
        if self.q1:
            self.q1.append(x)
        else:
            self.q2.append(x)

    def pop(self):
        # 要素を一つだけ残して一方から一方に移動し、最後に残った要素をpopする
        if self.q1:
            while len(self.q1) > 1:
                self.q2.append(self.q1.popleft())
            return self.q1.popleft()
        else:
            while len(self.q2) > 1:
                self.q1.append(self.q2.popleft())
            return self.q2.popleft()

    def top(self):
        if self.q1:
            return self.q1[-1]
        else:
            return self.q2[-1]

    def is_empty(self):
        return len(self.q1) == 0 and len(self.q2) == 0
```

### 補足
上記の例とは逆に、push時に一方のキューを利用して逆順にセットされるようにし、pop時はそのままキューから取り出すようにしてもOKです。
ASP.NET Core MVC で Post-Redirect-Get パターン（ポスト後のページ再読み込みで二重ポストされないようにする）

## Post Redirect Get パターン

フォームを送信（`HTTPPost `）後に、ページを再読み込みするとフォームのデータが二重送信されてしまいます。
送信後しばらくたってページ再読込して表示を最新にしたいときなどに起こりがちです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195024/9ce24853-cbf8-d32e-3e3e-5f734f56e261.png)
ブラウザのリロードボタンを押すと...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195024/c48997a9-e73b-eb2c-3427-460dda1595b8.png)

ASP.NET Core MVC では`POST`リクエストに対しビューを返していると上記の問題が起こります。

```csharp
    [HttpPost] public IActionResult Edit(EditViewModel vm) {   
      if (ModelState.IsValid) {
        /** データベースへの登録処理とか */
      }
      return View();  // ビューをそのまま返している
    }
```

これは`POST`リクエストを`GET`リクエストにリダイレクトしてページを再表示することで回避できます。
そのため Post-Redirect-Get パターンと呼ばれます。


## サンプルプロジェクト

### Post-Redirect-Get パターン の適用前

```csharp:DemoController.cs
using Microsoft.AspNetCore.Mvc;
using PostRedirectGet.ViewModels.Demo;

namespace PostRedirectGet.Controllers {
  public class DemoController : Controller {

    // 画面表示時に呼ばれる
    [HttpGet] public IActionResult Edit() => View();

    // フォームの送信で呼ばれる
    [HttpPost] public IActionResult Edit(EditViewModel vm) {   
      if (ModelState.IsValid) {
        /** データベースへの登録処理とか */
      }
      return View();
    }
  }
}
```

```html:Edit.cshtml
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model PostRedirectGet.ViewModels.Demo.EditViewModel
@{ ViewData["Title"] = "Some Page"; }

<div class="text-center">
  <h1 class="display-4">Psot-Redirect-Get Pattern</h1>
  <form asp-controller="Demo" method="post">
    New Email:  <input asp-for="Email" />
    <button type="submit">Register</button>
  </form>
</div>
```

```csharp:EditViewModel.cs
using System.ComponentModel.DataAnnotations;

namespace PostRedirectGet.ViewModels.Demo {
  public class EditViewModel {
    [Required, EmailAddress] public string Email { get; set; }
  }
}
```

### Post-Redirect-Get パターンの適用後

画面表示時の`HTTPGet`へリダイレクトするだけです。

```diff:DemoController.cs
  public class DemoController : Controller {
+   // 初期表示時とフォーム送信後に呼ばれる
    [HttpGet] public IActionResult Edit() => View();

    [HttpPost] public IActionResult Edit(EditViewModel vm) {   
      if (ModelState.IsValid) {
        /** データベースへの登録処理とか */
      }
-     return View();
+     // [HttpGet] public IActionResult Edit() へリダイレクトする
+     return RedirectToAction(nameof(Edit));
    }
  }
```

これでフォーム送信後にページを更新しても二重送信されなくなりました。

## 備考

プロジェクト構成は下記のとおりです。

```
.
|-- Controllers
|   `-- DemoController.cs
|-- PostRedirectGet.csproj
|-- Program.cs
|-- Properties
|   `-- launchSettings.json
|-- Startup.cs
|-- ViewModels
|   `-- Demo
|       `-- EditViewModel.cs
|-- Views
|   `-- Demo
|       `-- Edit.cshtml
|-- appsettings.Development.json
|-- appsettings.json
|-- bin
|-- obj
`-- wwwroot
```

.NET Core SDK のバージョンは 3.0.100 、C# の言語バージョンは 8.0 で作業しました。

```bash
$ dotnet --version
3.0.100
```
Azure Media Service で配信したライブストリーミングを Azure WebApp に組み込む

この前作成した Azure Media Service を使用したストリーミングサービスを自分のWeb Site に組み込む方法を紹介します。なにかプラグインやれ色々インストールしなくてはいけないのかなーと思ったのですが、まさかの HTML5 Code 貼り付けだけで超簡単でした！

#Azure Media Player でライブストリーミングが開始されているか確認する
Azure Media Player のポータルページでストリーミングが開始されているか確認します。私の場合は、Wirecast のモバイルアプリから Azure Media Service の REST サーバーに配信をしています。Azure Media Service のポータルページからも確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/84a90954-48f9-cc0b-af89-ffe199b8eb54.png)


#Azure Media Player から埋め込みコードを取得する
Azure Media Player のデモページで、配信したURLを入力し、Streaming を確認します。
右上い Code というボタンがあるので、それを押すと埋め込む Site の HTML Code ができてます。
そちらを作成した Web Site に埋め込むだけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/cbade7e4-d944-23be-1dd2-8d47aecd7dfe.png)


#Web App にコードを埋め込む
Azure WebApp の場合は、Azure App Editer というものが用意されており、ブラウザから編集することができます。
今回は 千曲川のリアルタイム画像を表示する WebApp を作成し、そこに合わせて Azure Media Service の埋め込みを入れました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/b1c03d02-54d4-82e9-579a-befbac773f7d.png)

これだけで、Azure WebApps にストリーミングができる iFrame が完成しました。
災害の時など、ある個所の情報を web 経由で配信したいときにはおすすめかもしれません。

#参考URL
Azure Media Player
https://amp.azure.net/libs/amp/latest/docs/

Media Services を使用したライブ ストリーミングの概要
https://docs.microsoft.com/ja-jp/azure/media-services/previous/media-services-manage-channels-overview

Azure Media Service を使用して、災害時でもニーズに合わせ情報を配信できるライブストリーミングサービスを構築する
https://qiita.com/komiyasa/items/08ab6089a12b74fe32f6
Rでシェープファイルのディゾルブを行う手順

隣接行列などをシェープファイルから生成したい人々の悩みの種として、ほしい行政区ごとにつくられた全国自治体の単一ポリゴン化されたデータの不在があると思います。

これを解決するのがディゾルブ処理です。QGISなどでもできますが、処理が少し重いという欠点があります。Rのmaptoolsの関数でもできるので、備忘録的に入れておきます。

なお、関数一つで一発変換できるとハッピーなのですが、少し面倒な手順が必要です。生成後のファイル形式の違いに起因しています。

```spde.r
library(maptools)#とりあえず
library(spdep)#お守り代わり

temp_sp <- readShapePoly("temp.shp")
temp_one <- unionSpatialPolygons(temp_sp, temp_sp$ID)
```

IDはディゾルブする場合に単一化したい属性です。行政区コードなどを使うのがいいかな。ところが、ディゾルブ後のファイル形式はSpatial Polygon Data Frameでなく、Spatial Polygonとなってしまいます。新たにデータを追加して統計処理をするとなると、これでは不都合です。また、編集後にシェープファイルとして出力したいときも、temp_oneを単純に書き出し処理をするとエラーが帰ります。
これを解決するには、ディゾルブ後のファイルをSpatial Polygon Data Frameに変更してやる必要があります。単に、temp_oneの形式変換だけなら楽なのですが、Spatial Polygonには参照する個別の列データがないようなので、あらたにデータフレームをポリゴンデータから取得して、これと一緒にデータフレームに変換してやる必要があります。

```spde.r
temp_one_plus <- readShapePoly(temp_one)
IDs <- sapply(slot(temp_one, "polygons"), function(x) slot(x, "ID"))
df <- as.data.frame(IDs, row.names=IDs)
temp_one_df <- SpatialPolygonsDataFrame(temp_one,df)
)#ディゾルブ後のシェープファイル保存は以下。
writePolyShape(temp_one_df, "temp_one.shp")
```
外付けHDDのドライブレターを固定したい→ドライブレター変更を簡単にした

# 外付けHDDのドライブレターを固定したい
## きっかけ＝親戚のリクエスト
- ノートPCのドキュメントを外付けHDDにバックアップしたい
- バックアップソフト（HDD付属）でボタンひとつで同期できるはず
- HDD外してSDカード刺すとドライブレターとられちゃう
- ドライブレターを固定したい

## 作戦
- さすデバイスとドライブレターを紐づける方法みつからなかった
- 一旦SDカードとかUSBメモリにとられちゃうのは諦める
- バックアップソフト設定済みのドライブレターに戻すのを簡単にする

## 使い方
- SDとかは外してHDDだけさす
- HDDに入れといたバッチを管理者として実行

## できた
- 以下のバッチはユーザ入力を求める
- 親戚に提供したものはドライブレター固定にした、 `set /p` のところ

```sh:ドライブレター変える.bat
@echo off

: 一時ファイル
set diskpartbat=%TMP%\al_diskpart.bat
set listvolume=%TMP%\al_letter.txt
set assignletter=%TMP%\al_mount.txt

: このファイルのあるドライブレター
set currentletter=%~0
set currentletter=%currentletter:~0,1%

: 大文字
for %%i in (A B C D E F G H I J K L M N O P Q R S T U V W X Y Z) do call set currentletter=%%currentletter:%%i=%%i%%
echo 現在のドライブレター：%currentletter%

: ボリューム番号
>%listvolume% echo list volume
for /f "usebackq tokens=2" %%a in (`diskpart /s %listvolume%^|findstr /C:" %currentletter% "`) do set volmenum=%%a
del %listvolume%

: ドライブレター変更
set /p newletter=新しいドライブレター：
>%assignletter% echo select volume=%volmenum%
>>%assignletter% echo assign letter=%newletter% noerr

>%diskpartbat% echo diskpart /s %assignletter%
>>%diskpartbat% echo del %assignletter%
>>%diskpartbat% echo del %diskpartbat%

%diskpartbat%
```

## あやしいと思ってるところ
### ボリューム番号取得
- [スペース][ドライブレター][スペース]で文字列マッチ、行取得してる
- NGケースあるんじゃないかなぁ

### ドライブレター変更
- このバッチファイルの居場所（ドライブ）が変わっちゃうのでバッチが異常終了する
- これを防ぐためにテンポラリディレクトリにバッチ作って呼び出してるのですが
- このテンポラリバッチを自分自身で削除してるのって、安全？
- このバッチをうっかりシステムドライブにコピーして実行したときって、怖くない？

### あとそもそも
- ドライブレター固定する方法、本当にないかな？


以上