OmniAICreator/Qiita-1.07M huggingface dataset:
WebAssemblyの開発入門

#はじめに
比較的に新しい技術WebAssemblyを使ってサンプルをやってみます。

#WebAssemblyとは
https://webassembly.org/

WebAssembly (略：Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.

W3Cからレコメンドされ、今後は主流ブラウザからサポートするので普及できると思います。
https://www.w3.org/2019/12/pressrelease-wasm-rec.html.en

特徴としては４点アピールしています。

- Efficient and fast
- Open and debuggable
- Safe
- Part of the open web platform

#Rustとは
A language empowering everyone to build reliable and efficient software.

- Performance
- Reliability
- Productivity

RustでWebAssemblyサンプルをやってみます。
Rustのインストール：https://www.rust-lang.org/tools/install

#環境構築
https://webassembly.org/getting-started/developers-guide/

開発ガイドの手順で実行すれば構築できます。

```powershell
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
.\emsdk install latest
.\emsdk activate latest
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/b17f8fa4-0144-d1e6-b342-a2c6e975c0a7.png)

#実行の注意事項
`file:///C:/Projects/emsdk/sample/test.html`のようにfileのprotocolはエラーとなり、表示できないです。
理由はセキュリティの保護のため、same-originの制限があります。ですので、実行にはhttpサーバが必要です。
>WebAssembly will enforce the same-origin and permissions security policies of the browser.

HTTPサーバは、Apache httpd, Nginxでもいいですが、ローカルではvue.jsなどでもOKです。

#サンプル
##Rustビルドできるwasm-packをインストール
`cargo install wasm-pack`

##プロジェクト作成
`cargo new --lib sample-wasm`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/73fb69b8-0699-74f0-2b70-de92b1472738.png)

テストコードは自動生成されています。

##src/lib.rsにサンプルコードを追加
```rust
extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    pub fn alert(s: &str);
}

#[wasm_bindgen]
pub fn say_hello(name: &str) {
    alert(&format!("Hello, {}!", name));
}
```

##Cargo.tomlに依頼追加
```toml
[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
```

##wasm-packビルド
`wasm-pack build`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/5b23d912-b3e2-525e-d7f5-81ad1ad0ffbb.png)

##Vue.jsのプロジェクト作成
vue-sampleというプロジェクトを作成して
index.jsとindex.htmlを作成する

```index.js
const js = import("../sample-wasm/pkg/sample_wasm.js");
js.then(js => {
  js.say_hello("WebAssembly");
});
```

```index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebAssembly sample</title>
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>
```

##起動して動作確認
起動：`npm run serve`
アクセス：http://localhost:8081/

結果：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/16a281ff-9f89-c643-3a93-e033d208d82b.png)


これでHelloを表示するまで動作確認できました。

参考URL：https://developer.mozilla.org/en-US/docs/WebAssembly/rust_to_wasm

以上
「世界で闘うプログラミング力を鍛える本」Pythonコード解答例 - 1.5 一発変換

「世界で闘うプログラミング力を鍛える本」Pythonコード解答例 - 1.5 一発変換

#目次
###CHAP1. 配列と文字列
1. [重複のない文字列](https://qiita.com/YusukeEngineer/items/494ccb49de66b39d16c0)
2. [同じ文字の数を数える](https://qiita.com/YusukeEngineer/items/4ed19c5f6efa23c62351)
3. [URLify](https://qiita.com/YusukeEngineer/items/4208561f8e1ac04cbbf4)
4. [回文の順列](https://qiita.com/YusukeEngineer/items/5d05620f3d9e9cc4e7b5)
5. [一発変換](https://qiita.com/YusukeEngineer/items/122360b8a95f6eb858f7)
6. [文字列圧縮](https://qiita.com/YusukeEngineer/items/0bd139a361ce3f4eac36)
7. [行列の回転](https://qiita.com/YusukeEngineer/items/4b2fd1ed64385612cba6)
8. ["0"の行列](https://qiita.com/YusukeEngineer/items/bed1ce30d4ef966fe142)
9. [文字列の回転](https://qiita.com/YusukeEngineer/items/2b6f9d2a733d2815a1ac)

#Pythonコード解答例
```python
def oneEditAway(first,second):

    if len(first) == len(second):
        return oneEditReplace(first,second)

    elif len(first)+1 == len(second):
        return oneEditInsert(first,second)

    elif len(first)-1 == len(second):
        return oneEditInsert(second,first)

    return False

def oneEditReplace(s1,s2):

    foundDifference = False

    for i in range(len(s1)):

        if s1[i] != s2[i]:

            if foundDifference:
                return False

            foundDifference = True

    return True

def oneEditInsert(s1,s2):

    index1 = 0
    index2 = 0

    while index2 < len(s2) and index1 < len(s1):

        if s1[index1] != s2[index2]:
            if index1 != index2:
                return False
            index2 = index2 + 1
        else:
            index1 = index1 + 1
            index2 = index2 + 1
    
    return True

input_str_1 = "pale"
input_str_2 = "ple"

print(oneEditAway(input_str_1,input_str_2))

input_str_3 = "pales"
input_str_4 = "pale"

print(oneEditAway(input_str_3,input_str_4))

input_str_5 = "pale"
input_str_6 = "bale"

print(oneEditAway(input_str_5,input_str_6))

input_str_7 = "pale"
input_str_8 = "bake"

print(oneEditAway(input_str_7,input_str_8))
```
【備忘録】macでローカル開発環境をVagrantで構築する

#Vagrantとは

仮想マシンを立ち上げるためのツール

#VirtualBoxとは

仮想マシンを作るソフトウェアの一つ

#準備

・Vagrant（https://www.vagrantup.com/）
・VirtualBox（https://www.virtualbox.org/）

#仮想マシンを立ち上げるための手順
##1. テンプレート（Box）を取得
[公式サイト](https://www.vagrantup.com/docs/boxes.html)を見ると、

```
$ vagrant box add USER/BOX
```

とすると、Boxを取得できることが分かる。

USE/BOXには、[Vagrant Cloud](https://app.vagrantup.com/boxes/search?utf8=%E2%9C%93&sort=downloads&provider=&q=centos)で自分の使いたいboxを探し、それを入力する。

例えば、[CentOS7.2](https://app.vagrantup.com/bento/boxes/centos-7.2)を取得するには、

```
$vagrant box add bento/centos-7.2
```

取得したBoxの一覧を表示するには

```
$ vagrant box list
```

削除するには、

```
$ vagrant box remove [box名]
```

追加されたboxは、下のディレクトリに入っている。

```
$cd ./.vagrant.d/boxes
```


##2. 仮想マシンを初期化・起動
一つのBoxから複数の仮想マシンを作ることができる！！！
仮想マシンごとにディレクトリを作る必要がある。

```
$ mkdir sample
$ cd sample/
$ vagrant init centos72
$ vagrant up
```

VirtualBox上を見ると、仮想マシンが作成されていることを確認


##3. 仮想マシンに接続

```
$ vagrant ssh
```

ウェブページを作成して、ブラウザから見たい！

###設定

①ウェブサーバーのインストール

```
$ sudo yum -y install httpd
```

②ウェブサーバーの立ち上げ

```
$ sudo service httpd start
```

③再起動してもウェブサーバーが立ち上がるための設定

```
$ sudo chkconfig httpd on
```

③firewallをstopさせる

```
$ sudo service iptables stop
```

④再起動してもfirewallがstopするための設定

```
$ sudo chkconfig iptables off
```

###ウェブページを作成する手順
①ウェブページを作成するディレクトリに移動

```
$ cd /var/www/html
```

②ファイル作成

```
$ sudo vi index.html
```

③index.htmlにコードを記入

キーボードのiを押下した後に、

```
<p>Hello World</p>
```

と記入し、escをクリックし、:wqと入力

###ウェブページを表示するための設定
①Vagrantfileの修正

``` 
$ vi Vagrantfile
```

```
config.vm.network :private_network, ip: "192.168.33.10"
```
のコメントアウトを外す

②Vagrantのreload

```
$ vagrant reload
```


192.168.33.10とウェブブラウザで入力するとHello Worldが表示される！！！






>参考
>ドットインストール
>https://dotinstall.com/lessons/basic_vagrant
Azure IoT Hubのメッセージルーティング

# アーキテクチャ

<img width="531" alt="アーキテクチャ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/ff3084f7-a9ab-dabd-f423-d39281a5a1bb.png">

# 事前準備

<img width="531" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/47c1760c-12d7-1de5-e54e-06124c99a695.png">

上記の赤色については別の投稿を参照してください。
[Raspberry Pi(Python)からAzure IoT Hubへテレメトリーを送信する](https://qiita.com/motoJinC25/items/69545d1cba22793ccf95)

# Azure IoT Hubのメッセージルーティング

## 情報定義

```bash
resourceGroupName={ResourceGroupName}
iotHubName={IoTHubName}
ioteviceName={IoTDeviceName}
storageAccountName={StorageAccountName}
containerName={ContainerName}
endpointName={EndpointName}
endpointType={EndpointType}
routeName={RouteName}
```

## 情報取得

```bash
subscriptionID=$(az account show --query id)
```

## Storage Account作成

```bash
az storage account create \
 --name $storageAccountName \
 --resource-group $resourceGroup \
 --location $location \
 --sku Standard_LRS
```

## Storage Accountキー取得

```bash
storageAccountKey=$(az storage account keys list \
 --resource-group $resourceGroup \
 --account-name $storageAccountName \
 --query "[0].value" | tr -d '"')
```

## Storage Accountコンテナー作成

```bash
az storage container create --name $containerName \
 --account-name $storageAccountName \
 --account-key $storageAccountKey \
 --public-access off
```

## Storage Accountの接続情報取得

```bash
storageConnectionString=$(az storage account show-connection-string \
 --name $storageAccountName \
 --query connectionString \
 -o tsv)
```

## IoT Hubのエンドポイント作成

```bash
az iot hub routing-endpoint create \
 --connection-string $storageConnectionString \
 --endpoint-name $endpointName \
 --endpoint-resource-group $resourceGroup \
 --endpoint-subscription-id $subscriptionID \
 --endpoint-type $endpointType \
 --hub-name $iotHubName \
 --container $containerName \
 --resource-group $resourceGroup \
 --encoding json
```

## IoT Hubのメッセージルーティング作成

```bash
az iot hub route create \
 --name $routeName \
 --hub-name $iotHubName \
 --source devicemessages \
 --resource-group $resourceGroup \
 --endpoint-name $endpointName \
 --enabled
```

---
> https://docs.microsoft.com/en-us/azure/iot-hub/tutorial-routing
PDFを任意のページごとに分割する

#そもそも
定期的にでる膨大なページのPDFをChromeで開き、上司の指示で2ページずつ(日ごとに分かれた統計資料で、2ページがワンセット)、日ごとに保存している同僚の涙ぐましい努力を見て、それPythonで自動化して昼飯に行こうぜということで、Pythonで作ってみる。

##PyPDF2
PDFの操作にはいろいろなモジュールがあるようだが、なんか簡単そうなので「PyPDF2」というモジュールを使った。

```
pip install PyPDF2
```
で、入る。あれこれ読むと、PDFを1ページずつに分割する手法はあるよう。任意のページごとに切り出すには…

1. 全部一度分解し、2ページずつに再編する
2. 1-2ページ、3-4ページ…といった具合に抽出する

という方法が考えられるが、1は面倒くさそうなので、2にしてみる。「test\.pdf」を2ページずつに分け、「<スタートページ>.pdf」で保存する。

```pdf_separate.py
import PyPDF2

f = 'test.pdf' #分割したいPDF
page_sep = 2 #何ページごとに分割したいか

#pdfのページ数を把握する
reader = PyPDF2.PdfFileReader(f)
page_num = reader.getNumPages()

#ページの抽出とファイル名に使う数字を派生させforで回す
for page in range(0, page_num, page_sep):
    merger = PyPDF2.PdfFileMerger()
    start = page
    end = start + page_sep
    merger.append(f, pages=(start,end))
    file_name = str(start) + '.pdf'
    merger.write(file_name)
    merger.close

print('終わり')
```
ところで

```
page_sep = 2 #何ページごとに分割したいか
```

の「2」を例えば「3」にすれば3ページごとに分割されるが、pdfの総ページが3の倍数でなければ「おいおい、最後のファイルを書きだそうとしたらページが足りないやんか」と、最後のファイル生成の際にエラーが出る。

その場合、なんとかすることもできるが、特に今は必要ないのでまたこんどにし、ごはんを食べに行く。
できるだけasync/awaitを使わないほうがよくて、promsie/thenをつかったほうがいい

##環境
node：v8.11.3

##非同期処理について
nodeを使ってapi作ってるときに、routeからサービスに行って次にdaoに行って～みたいな流れの中で、比較的少し時間がかかるDB処理や物理ファイル関連の処理やADサーバの処理とかで順番に処理をさせるために関数を非同期にしてawait使っていたんだけど、
それだと全ての関数にasyncつけなきゃいけなかったり、awaitつける必要が出てくるので、いろいろ面倒になってくる。

当然、daoの部分が非同期関数なら、それを呼び出すサービスの関数の中でawaitをつける必要があり、awaitを使う関数もまた非同期にしなきゃいけなくて、またその関数を呼び出す関数も非同期にしなきゃいけなくなってしまうってことになる。
つまり、コントローラー、サービス、リポジトリ全て非同期になってしまう。

awaitつけて呼び出そうとしたら、「ここ非同期じゃないやんけ。。。」って怒られてasyncのつけ忘れを直す機会がしばしばあるのが面倒だけど、個人的にはそんな嫌いじゃない。でもどいつもこいつも非同期になるのはなんか気持ち悪いですねぇ。。。(至言)


一見、関数をasyncにして呼び出すときはawaitつけるだけで済むのでラクじゃんって思うかもしれないが、規模が大きくなっていくことを考えるとそれはよろしくなかった。(PLに感謝)

## プログラム

```javascript:nogizaka-suko.js
const HogeController = function(args) {

  return {
    doCalc: function() {
        return new Promise(function (resolve, reject) {
		const a = 1;
		const b = 2;
		const result = a + b;
		resolve(result);
	});
    },
    firstProcess: function() {
        this.doCalc().then(function(value){
		console.log(value);
	})
    }
  };
};

module.exports = HogeController;


const hogeCon = new HogeController();
hogeCon.firstProcess();


```
今回はPromise/thenの例なのでわざわざmysqlモジュールとか使ってDB接続処理を書かずに足し算しかしてないけど、DB処理とか物理ファイルダウンロードとか、処理に少し時間がかかるものに対して、Promsieで囲って待ってくれるようにして、処理が終わったら、thenの中が呼ばれて、次の処理ができるようになって、順番が守られる。

もし、サービスクラス以降で非同期になっているのであれば、リポジトリクラスの各メソッドでreturn new Promoseで囲って任意のタイミングでresolve()してしまえば、サービスクラスを使っているルートの部分が非同期じゃなくても、then()で得た値がpendingになることはない。

expressとか使ってapi作る時に、通常のDB処理apiとは別に最初にadサーバからデータを持ってくる必要があった場合には、thenの中が呼ばれたあとに、next()ってやって次の処理をさせるようにしたりしたこともあった。

## その他
もちろんasync/awaitは使ってもよいのだが、それを使うのはサービスクラスまでにしておく。
ルーティングに入る前の段階もasync/await使ってもよい。
Visual Studio CodeでJava (その２)

# Visual Studio CodeでJava (その２)

Windows7のサポートがついに終了したので、Windows10にこれまでの開発環境を構築することにした。
そういえば、１年以上前に[こんな記事](https://qiita.com/gitcho/items/a6c0bb781bc395e43ec4)を書いたのを思い出したので、Javaの開発環境をeclipseやIntelljではなくVSCodeにしてみようと思い、Windows Subsystem for Linux(WSL)のUbuntuに構築するまでを記事にまとめることにした。
[以前の記事](https://qiita.com/gitcho/items/a6c0bb781bc395e43ec4)で、Ubuntuに環境構築する方法はまとめたので、今回は主にWSLとVSCodeの連携をメインに記事にする。

## 構築する環境
- Windows 10 Pro 64bit [1809]
- Windows Subsystem for Linux(WSL)のUbuntu 18.04を前提とする
- OpenJDK 11 (on Ubuntu on WSL)
- Visual Studio Code(1.41.x) (on Windows)
  - Remote Develop利用（←重要）

# WSLのインストール
普段からLinuxやMacOSを使っている人なら、Windows10でWSLを使うのは当たり前だよね？
[公式手順](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10)に従ってWSLを有効化し、Ubuntu(18.04)をインストール。

# OpenJDKのインストール
Windowsではなく、**UbuntuにOpenJDKをインストール**する。
今回はver11を利用したが、お好きなバージョンをどうぞ。
WSLのターミナルからaptでインストールすればOK。

```sh
$ sudo apt update
$ sudo apt install -y openjdk-11-jdk
```

# VSCodeのインストール
[公式サイト](https://code.visualstudio.com/download)からUbuntu版ではなく**Windows版のVSCodeをインストール**する。
`code`コマンドで起動できるようにするためのPATH設定に再起動が必要なので、インストール後にWindowsを再起動する。
WSLのUbuntu上にUbuntu版のVSCodeをインストールするとX-Windowを表示しないと使えないので、今回その方法は採用しない。

## 拡張機能のインストール
### Remote Development
Windows側からWSL側にリモートして安全にファイル編集などができるプラグイン。
WSLだけで開発するなら「Remote WSL」だけでもいいが、「Remote Development」をインストールすると「Remote WSL」も合わせてインストールされ、WSLだけでなくSSH接続できる環境やDockerコンテナにもリモートできるらしい（試していない）。
[この記事を書いた時](https://qiita.com/gitcho/items/a6c0bb781bc395e43ec4)にはなかった拡張機能だが、去年の夏ぐらいにリリースされた。おかげでもうVSCodeでできないことはないんじゃないかと思う。
Emacsのtramp機能と近いイメージ？。WSLでsshfsが使えるともっと便利になるんだが…。

手順としては、「Remote Development」をインストール後、一度VSCodeを終了し、WSLのUbuntuから `code` コマンドを実行すると使えるようになる。（初回は起動に時間がかかる）
gradleで作成するサンプルプロジェクトを例にすると（詳細は[以前の記事](https://qiita.com/gitcho/items/a6c0bb781bc395e43ec4)を参照）

```sh
$ mkdir sample
$ cd sample
$ gradle init --type java-application
$ code .
Installing VS Code Server for ...   ←これが表示されたら起動するまで待つ
```

Windowsファイアウォールの許可設定などが表示される場合は許可する。
これでWindows版のVSCodeのウィンドウが開き、WSL上で作成したJavaのプロジェクトを開発できる。

### Java Extension Pack
[以前の記事](https://qiita.com/gitcho/items/a6c0bb781bc395e43ec4)と同じくインストールする。インストール時に「install on WSL」をクリックして、WSL側にインストールしないと有効にならないので注意。

その他にも必要に応じてgitやgraldeなどのプラグインも検索してインストールするといい。

### 実行
VSCodeのターミナルもWSLのシェルになっているはず。
``ctrl + shift + ` ``でVSCodeのターミナルエリアから任意のコマンドを実行して動作確認できる。

```sh
$ gralde run
```

`tasks.json`や`launch.json`を設定するともっと便利になるのだが、詳細は各プラグインのマニュアルを参照してほしい。

# さいごに
VSCodeではなく、VS2019でも同様にWSLやSSHサーバにリモートして開発できるみたい。

- https://docs.microsoft.com/ja-jp/cpp/linux/connect-to-your-remote-linux-computer?view=vs-2019

一昔前はDLLとか.NetとかのMicrosoft言語でしか開発できない場面以外でWindowsを使う気にはなれなかったのだが、最近はそんなこと全然ない。すごい進歩だ。
もうすぐ(2020年4月？)「Windows Terminal」がリリースされるらしいので、まだまだ開発しやすさが増していく気がしてならない。
OutSystemsで、モバイルアプリケーションだけをリストアップする

OutSystems環境で、特定の種類のアプリケーションだけをリストアップする方法を確認してみました。

Service CenterやService Studioでアプリケーションをリストアップすると、アイコンで種類を確認できます。
しかし、その方法だと、特定の種類のアプリケーションのみのリストではないので、若干不便です。

# サンプル
Forgeコンポーネント：https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=7086
ApplicationEntity Screenを参照してください。

こんな感じに、指定した種類のアプリケーションのみをリストアップできます（例ではモバイルのみ）。

![qApplicationEntity1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/d47c3bf4-1f4b-f210-5c7a-d72bcafce283.png)

# 環境
Personal Environment(Version 11.0.606.0)
Service Studio(Version 11.6.22)

# アプリケーションリストを取得する
この方法には、(System)モジュールに含まれるApplication Entityが使えます。

![qApplicationEntity2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/979a1a33-68b2-b581-7629-59ec9860fc11.png)

このあたりのEntityについては、正式なドキュメントが見つかりません。
そのため、観測からの判断ですが、それぞれ以下の役割を持っているものを持っているものと思われます。

- Application
    - 接続している環境内のアプリケーションを表すEntity
    - Name:アプリケーション名
    - Description:アプリケーション作成時に指定する説明文
    - CreatedBy:作成ユーザーのID
    - Is_Active:アプリケーションが環境内で削除されていないか（削除されるとFalseが設定される模様）
- Application Icon
    - アプリケーション作成時に指定したアイコン画像
- RuntimeKind
    - Static Entity
    - アプリケーションの種別（モバイルアプリケーションならMobile、など）を表す
- UserMT
    - Users Entityのビュー
    - Usersのマルチテナント版

ApplicationのRuntimeKindを、Entities.RuntimeKind.Mobileで絞り込みすることによって、モバイルアプリケーションだけが表示されるようになります。
削除済みのアプリケーションを表示したくなければ、Is_Active=Trueを追加してください。

# UserMTを使用する理由
UsersでなくUserMTを使うのは、アプリケーションを作成するユーザが、Service Centerのユーザだからですね。

モジュールのUser Provider moduleプロパティを展開してみると、デフォルトがUsersで、別の候補にService Centerがあると思います。
![qApplicationEntity3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/2e9d3bb4-6c3c-f682-ddd6-07da333f0afc.png)

User Providerは、アプリケーションにログインできるユーザーアカウントを管理するモジュールのことです。
User Providerとテナントが結びついています。そのため、アプリケーションが動作するUsersにいないユーザーをApplication.CreatedByが指しているために、マルチテナント版のUserMTを使っています。
【備忘録】LaTeX導入

#はじめに#
LaTeXの導入に馬鹿ほど苦労したのでメモです.

#0 : 準備#
以前にtexを入れていて残っていたら邪魔なのでゴミ箱にポイしてしまいましょう.
なんならゴミ箱からもポイしてやってください.

##環境##
今回の環境は以下の通りです.

- Windows10
- W32TEX (2019/08/11の暫定最新版0.91)

#1 : W32TEX をダウンロード#
[TeXインスターラ3](https://www.ms.u-tokyo.ac.jp/~abenori/soft/abtexinst.html)のページに行ってダウンロードしてください.


#2 : abtexinst.exe でインストール#
1でダウンロードしたzipファイルを展開して, `abtexinst.exe`を起動です.
起動すると多分window側によって警告がでるので`「詳細情報」`をクリックしてください.
すると`「実行」`ボタンが出てくるのでクリックです.
実行できたら後は脳死で**次へ**とかクリックしとけば大丈夫です.
終了したら**再起動**されると思います.
大丈夫じゃなかったら[こちらのページ](http://acetaminophen.hatenablog.com/entry/2015/05/16/142557)見るなり調べるなりでお願いします.

#3 : Pathを通す#
2で無事インストールできて再起動した後です.
必要なPathが通ってないらしいので通してあげましょう.

通すPathは下の二つです.上から順に追加していきましょう.

- C:\w32tex\bin
- C:\w32tex\bin64

Pathを通したら**再起動しましょう**

##Pathの通し方##
`コントロールパネル` → `「システムとセキュリティ」` → `「システム」` →　`システムの詳細設定` → `環境変数` → `「Path」を選択` → `編集` → `新規` → `参照` →　`OK`

詳しくは[こちら](https://qiita.com/kikuchiTakuya/items/6aa82b02083cdc42f2b9)

#4 : TeXworksの設定#
次は`TeXworks`の設定をします.尚, TeXworksはW32TEXを入れたときに**一緒に入っています**.

##4-1 : TeXworks起動##
さっき入れたファルダからtexworks.exeを探して起動してください.
検索でも引っかかると思います.

##4-2 : 日本語環境用の設定##
[このサイト](https://texwiki.texjp.org/?TeXworks%2F%E8%A8%AD%E5%AE%9A)の通りに設定してください.

#5 : おわり#
上記までできたら, 試しみてください.うまくいったらおわりです.お疲れさまでした.

#6 : 番外編#
実はさっきのとこまでやって卒論書けなかったのでメモです.
テンプレの文字コードが**Shift_JIS**だったっぽくて日本語の部分が文字化けだらけでした.
気にしないでTeXworksの文字コードが**UTF-8**のまま日本語で入力したらめっっちゃ怒られました.怒りたいのはこっちなんですけどね.
ってことで**TeXworksの文字コードをShift_JIS**にしたら無事書けました.めでたしめでたし.
文字化けしてたくせにPDFに出力したらちゃんと日本語になってるのはどうしてなんだ.

#参考#
- [わかりやすいブログ](http://acetaminophen.hatenablog.com/entry/2015/05/16/142557)
- [TeXで困った人なら絶対みたことあるであろうページ](http://acetaminophen.hatenablog.com/entry/2015/05/16/142557)
- [参考にしたQiitaのページ](https://qiita.com/fluxCapacitor/items/ab4ba4ad019b2df0b14a#%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88%E3%81%8B%E3%82%89%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B)
- [TeXworksの文字コードについて参考になったブログ](http://t-n-clark.hatenadiary.jp/entry/2016/12/27/003917)
HumHubでコア（モジュールでない）メッセージの翻訳

HumHub1.3.20で確認してます。

HumHubでは`config/messages/<language>/<Module_ID>.<messagefile>.php`にファイルを置くことで翻訳のオーバライドが可能です。
ただ`protected/humhub/moduls`以下のモジュールに限る。
[Translations - Administration Topics - HumHub - Documentation](http://docs.humhub.org/admin-translations.html)

モジュールに属しない`protected/humhub/messages/ja/base.php`にあるメッセージにおかしな翻訳があったので、`config/messages/ja/base.php`に修正版をおいたのですが反映されませんでした。
バージョンアップのことを考えると`protected/humhub`配下を直接修正するのは避けたいですよね。

#結論

構成ファイルに次を追記で想定通りの方法でオーバライド可能です。

```php:protected/config/common.php
return [
    'components' => [
        'i18n' => [
            'translations' => [
                'base' => [
                    'class' => 'humhub\components\i18n\MessageSource',
                ],
            ],
        ],
    ],
]
```

デフォルトでhumhub\components\i18n\MessageSourceでも問題なさそうなんですけど、そうしない理由があったりするのかな。
Reactでnpm startがうまくいかない時にやったこと

今回は[この記事](https://yk0807.com/techblog/2020/02/01/react%e3%81%a7npm-start%e3%81%8c%e3%81%86%e3%81%be%e3%81%8f%e3%81%84%e3%81%8b%e3%81%aa%e3%81%84%e6%99%82%e3%81%ab%e3%82%84%e3%81%a3%e3%81%9f%e3%81%93%e3%81%a8/)の内容をQiitaに移植したものです。

ReactとReduxでWebアプリを作るための前段階としてとりあえず[こちら](https://redux.js.org/introduction/getting-started/)のチュートリアルをやってみようとしたのだが、途中でnpm startを実行したところエラーが出てにっちもさっちもいかない状況になってしまった。
<img width="572" alt="npm_error.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66360/d898b94f-812c-db35-8b9b-e43be793f532.png">
こんな感じのエラー

package.jsonの中身を確認して、

```json

“scripts”: {
    “start”: “react-scripts start”,
```

が記述されていることも確認したし、ネットで調べて見つけたpackage-lock.jsonとnode_modulesを消してnpm installを再実行する方法を試してもうまくいかず、nodeとnpmを再インストールしてもダメで困り果てていたが、**create-react-appを再インストール**して見たら、なんとうまく行った！

<img width="430" alt="react_todo.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66360/b1e13fb0-0bf2-a1df-b1fe-bc2058f49239.png">
チュートリアルをやってみて作ったTodoアプリおよびこれからやってみたいこと。
[GitHub Actions] bash のオプション（-xe）を指定する

## Tl;Dr

`shell`キーワードにて`bash -xe {0}`と指定できる。

```yml
jobs:
  build:
...
    steps:
    - name: Hello
      shell: bash -xe {0} # custom shell
      run: |
        echo "Hello!"
```

## なぜ利用したい？

GitHub Actionsでシェルを実行する時、デフォルトでは`-x`オプションが指定されていないため、エラーが発生したときにどこで失敗したのか分かりづらいことがある。

以下では2行目で`echoo "Bad"`とタイポしているが、それが原因で失敗していることが分かりづらい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29653/5c20325f-0bbf-157f-fbd0-18d6664f045f.png)

`shell`キーワードで`bash -xe {0}`を指定しておけば、以下のように失敗した箇所が分かりやすい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29653/b12722b3-b860-ea16-c0df-622bef7b4b81.png)

また、デフォルトでは`-e`オプションが指定されているため、いずれかのコマンドが失敗したタイミングで終了扱いになるが、その挙動が好ましくない場合`bash -x {0}`と指定することで回避できる。

## Custom shell

[公式ドキュメント](https://help.github.com/en/actions/automating-your-workflow-with-github-actions/workflow-syntax-for-github-actions#custom-shell)に記載がある。

> You can set the shell value to a template string using command […options] {0} [..more_options]. GitHub interprets the first whitespace-delimited word of the string as the command, and inserts the file name for the temporary script at {0}.

`command […options] {0} [..more_options]`という書式で指定すればよいと書かれており、今回は`bash -xe {0}`と指定した（`more_options`は指定していない）が、他にも任意のコマンドを指定することができる。

## 終わりに

ググってすぐに見つからなかったので、比較的ググラビリティの高そうなタイトルで簡単に書いてみた。
[Git小技] ブランチを切り替える時に自動的に最新の状態にする #git

普段Gitを使ってて頻繁にブランチの切り替えを実行しているとたまに `git pull` を忘れてしまい、作業が完了して `git push` しようとすると既にリモートには別のコミットが存在してエラーになってしまうことがあります。
その時には `git pull` すればいいんですが、コミットログに不要な `merge` が入ってしまい少し気持ち悪いですね。
Gitでブランチを切り替える際に自動的に最新の状態を `pull` すればそういう問題は解消しそうです。

# Git Hooks

Git HooksとはGitで何かしらのイベントが発生する前後でスクリプトを実行可能にする仕組みです。
`exit 0` でスクリプトが終了すればその先の処理も実行されますがそれ以外( `exit 1` など )で終了すると処理を途中で止めることができます。
具体的には[公式のドキュメント](https://git-scm.com/book/ja/v2/Git-のカスタマイズ-Git-フック)を参考にしてください。

## post-checkout

先述した公式のドキュメントには掲載されていませんが、 `post-checkout` を利用すればブランチ切り替えの際にスクリプトを実行することができます。
それでは簡単なスクリプトを作成してみましょう。

### 前提

Gitがインストールされ、 `.git` ディレクトリが存在するパスで作業することを前提にしています。
Gitが利用できるLinux系のOSであれば大抵問題無いかと思いますが、当方の作業OSはmacOS 10.15.2（19C57）、 `git version 2.23.0` です。

### スクリプトの作成

Terminal上で作業します。

```bash
# post-checkoutファイルの作成
touch .git/hooks/post-checkout

# 実行権限を付与
chmod +x .git/hooks/post-checkout

# ファイルを編集
vim .git/hooks/post-checkout
```

vimの画面上でiキーを押下して⌘+Vで下記のスクリプトを貼り付けます。

```bash
#!/bin/sh

# 現在のブランチを取得する(参考: https://qiita.com/sugyan/items/83e060e895fa8ef2038c)
CURRENT_BRANCH=`git symbolic-ref --short HEAD`
# リモートの情報をfetchする
git fetch -p
# リモート(origin)にブランチが存在するかどうかを判定
exists=`git show-ref remotes/origin/$CURRENT_BRANCH`
if [ -n "$exists" ]; then
    # リモートにブランチが存在すればpullを実行
    git pull origin $CURRENT_BRANCH
fi

```

`esc` キーを押下して `:wq` と入力してEnterを押下して保存してvimを終了します。

# 結果

`git switch` や `git checkout` でブランチを切り替えると最新の情報を取得してくるスクリプトが完成しました。

```bash
% git switch master
Switched to branch 'master'
Your branch is up to date with 'origin/master'.
From github.com:fromkk/SpellChecker
 * branch            master     -> FETCH_HEAD
Already up to date.
```

ただ、ブランチ切り替えの際に少し待つようになってしまうので人によっては邪魔に感じてしまうかもしれません。
利用する際は用法・用量を守って正しく利用しましょう。
NestJS、GraphQL、type-garphqlでの"Cannot return null for non-nullable field"エラーを解決する

Nest.jsを利用してGraphQLをコードファーストアプローチで書いています。

公式ドキュメントに方法が書かれていないのですが、普通にドキュメントの内容に従うと、queryを要求した際にEntityがない場合、エラーが発生してしまいます。

実際のコードを例にあげると以下の通りです。

```typescript:team.resolver.ts
@Resolver(of => Team)
export class TeamResolver {
  constructor(
    private readonly teamService: TeamService,
    private readonly memberService: MemberService,
  ) {}

  @Query(returns => Team, { name: 'team' })
  @UseGuards(GqlAuthGuard)
  async get(@Args('id') id: string) {
    return this.teamService.findOne(id);
  }
...
}
```

playgroundでの実行結果(teamが存在しない場合): 

<img width="1065" alt="Screen Shot 2020-02-01 at 16.43.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57656/32c8a7e0-ccaf-f4fe-f92f-79d5722c2914.png">

このように、"Cannot return null for non-nullable field Query.team."というエラーが帰ってきてしまいます。 

これを解決する方法ですが、とてもシンプルで、@Queryデコレーターに`{ nullable: true }`オプションを追加するだけでOKです。(なぜかNestjsの公式ドキュメントに記述はない)

```typescript:team.service.ts
@Resolver(of => Team)
export class TeamResolver {
  constructor(...){}

  @Query(returns => Team, { name: 'team', nullable: true }) // nullable: trueを追加
  @UseGuards(GqlA uthGuard)
  async get(@Args('id') id: string) {
    return this.teamService.findOne(id);
  }
...
}
```

そうすると、teamが見つからなかった場合でもちゃんとnullが返ってきます。

<img width="790" alt="Screen Shot 2020-02-01 at 16.13.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57656/301dfe2f-e5b4-dae0-9c90-4a825c8b84aa.png">

同じようなエラーに悩まされている方の参考になれば嬉しいです。
「初めてのAIコース Offered by Grow with Google」 のノート

#人工知能(AI)の利用
1. きゅうり農家の事例 → Googleのテンサーフローで基準を明確にして、同じ基準できゅうりの等級の仕分け作業をAIにさせる。
2. クリーニング屋の事例 → 受付をAIにさせる{テンサーフローのオープン化(2015)}
 ---> 共通点: 大量のデータが必要であるが、一人でもできるようになった

#機械学習でできること
## 普通のITと機械学習の違い
例）画像認識をするとき、
普通のIT...プログラムを書いて、見分けるルールや仕様を人間が決める
機械学習...最初にたくさんのデータを集めて、見分けるルールをコンピュータが自動的に探す

###画像認識(Cloud Vision API)
機械学習では100%の正答率は期待できない
###音声認識(Cloud Speech to Text API)と文章理解(Cloud Natural Language API)
感情解析もできる

##機械学習の仕組みを知る
学習データ準備
モデルの学習
モデルの利用

モデルの学習では、Tensor Flow Playground 1などが利用される
回帰直線(一つの目的変数を、複数の説明変数にそれぞれ重み付けをして総和をとるモデル)を利用

>ニューラルネットワーク: 人間の***直感的判断の模倣***をする。回帰直線などで***間違いが減るように***重み付けをする。
>>ニューラルネットワークによる画像認識

>画像をピクセル単位で分割し、どのよに色が配置されているかを分析し、その配置パターンが最もマッチするものを探す
1本の直線ではデータを分析できない場合は、ニューロン（回帰直線を引くもの）を階層化させることで複数の直線を引かせる。ニューロンの数を増やしたり、階層を増やすと、より賢い学習を行える。3段以上の階層を持つとき、deep learningと呼ぶ。

###機械学習の応用例
お菓子ロボット…ロボットにほしいお菓子を伝えると、音声認識システムで声を聴き、自然言語処理APIでその意味を理解し、画像認識でテーブルの上のお菓子を識別し、そのお菓子を渡してくれる。

##まとめ
たくさんのデータからルールを見つけることで、音声認識や画像認識を可能にする
機械学習のアルゴリズムの１つがニューラルネットワークで、それを高層にしたものがdeep learning

- how google does machine learning
- machine learning crash course
- cloud AI サービス
C#の属性（Attribute）の実態が作られるタイミング

# TL;DR;

`GetAttribute`で見つかったタイミング。
ちなみにキャッシュはされない。

# 属性（Attribute）とは

C#…といか.NETは強力なメタプログラミングが可能な言語（フレームワーク）です。
各クラスやメソッドなどにリフレクション情報が含まれていて、この情報から、メソッドの名前や属するクラス、継承関係などを取得することができます。
また、そのリフレクション情報を拡張するための機能としてカスタム属性という機能があります。
例えば`HogeAttribute`というAttributeを継承したクラスを定義し、これを付与したいクラスやメソッドなどの直前に`[Hoge()]`と付加します。括弧の中に引数を渡すこともできます。

# カスタム属性の取得方法

```cs
Attribute[] attrs = typeof(TargetClass).GetCustomAttributes(true);
HogeAttribute hoge = attrs.FirstOrDefault(a => a is HogeAttribute);
// または
HogeAttribute hoge = Attribute.GetAttribute(typeof(TargetClass), typeof(HogeAttribute)) as HogeAttribute;
```
ジェネリックに対応していないので、`T GetAttribute<T>(this Type t) : where T : Attribute`みたいな拡張クラスを用意して使うことが多いかと思います。

# 確認

```cs
class TestAttribute : Attribute
{
    public TestAttribute(string msg)
    {
        Console.WriteLine($"\tCREATED ATTRIBUTE INSTANCE {msg}");
    }
}

[Test("INSTANCE")]
class InstanceClass
{
    public InstanceClass() { }
}

[Test("STATIC")]
static class StaticClass
{
    public static void Method() { }
}

class Program
{
    static void Main(string[] args)
    {
        Console.WriteLine("InstanceClass new");
        new InstanceClass();
        Console.WriteLine("StaticClass Call");
        StaticClass.Method();

        Console.WriteLine("InstanceClass TypeInfo");
        var c = typeof(InstanceClass);
        Console.WriteLine("StaticClass TypeInfo");
        var s = typeof(StaticClass);

        Console.WriteLine("InstanceClass GetAttribute");
        c.GetCustomAttributes(true);
        Console.WriteLine("StaticClass GetAttribbute");
        s.GetCustomAttributes(true);

        Console.WriteLine("InstanceClass GetAttribute 2");
        c.GetCustomAttributes(true);
        Console.WriteLine("StaticClass GetAttribbute 2");
        s.GetCustomAttributes(true);
    }
}
```

```text:Output
InstanceClass new
StaticClass Call
InstanceClass TypeInfo
StaticClass TypeInfo
InstanceClass GetAttribute
    CREATED ATTRIBUTE INSTANCE INSTANCE
StaticClass GetAttribbute
    CREATED ATTRIBUTE INSTANCE STATIC
InstanceClass GetAttribute 2
    CREATED ATTRIBUTE INSTANCE INSTANCE
StaticClass GetAttribbute 2
    CREATED ATTRIBUTE INSTANCE STATIC
```

`GetCustomAttributes`の時点でTestAttributeのコンストラクタが呼ばれていることがわかります。
また、二回目の`GetCustomAttributes`の後にもコンストラクタがよばれていることが確認できました。
AndroidのTextViewで文字幅を調整する

# はじめに
行間の記事は多数あれど、文字幅で調べると全然なくて苦戦したので記事にしておきます。

# やり方
とても簡単。`letterSpacing`属性をつけるだけ。APIレベルは21以上です。

```xml:activity_main.xml

...

   <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:textSize="20dp"
        android:letterSpacing="1.1"
        />

...



```


文字幅が広がりました！
<img width="50%" alt="スクリーンショット 2020-02-01 17.05.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106116/1ea16337-1bee-ef0b-7baa-78b2d74a6bce.png">

単位はemでデフォルト値は0.0。逆に文字幅を狭める場合はマイナスを設定してあげます。



<img width="50%" alt="スクリーンショット 2020-02-01 17.30.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106116/11f64bf6-15d6-8309-3b9d-2b9cf6389079.png">

↑`letterSpacing="-0.2"`を設定した状態

# おわりに
とっても簡単なんだけど意外と情報がない。。需要ないのだろうか？
Three.jsのFPS表示(TypeScript版)

Three.jsのTypeScript環境で [stats.js](https://github.com/mrdoob/stats.js/) のセットアップに少しハマったのでそのメモです。
`stats.js`はFPSを表示するライブラリです。
ChromeのDevToolsのRenderingタブでFPS表示しても良いけど、毎回手間だったので。
<img width="387" alt="スクリーンショット 2020-02-01 16.48.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15028/055ceaf6-a521-f4ca-97d0-b57a93920fff.png">


# 開発環境
Three.js: v0.113.2
states.js: 0.17.0

# セットアップ手順
~~以下のパッケージを入れればOK！~~
~~npm i stats.js @types/stats.js~~

すいません、勘違いしてました。もうthree.jsにデフォルトで入ってました。

以下の感じにimportしてあげれば、型チェックもやってくれます

```typescript
import Stats from 'three/examples/jsm/libs/stats.module';

const stats = new Stats();
stats.showPanel(0);
document.body.appendChild(stats.dom);
```

あとはループする処理に`begin()`と`end()`を入れてあげればFPSの測定ができます（[参考ソース](https://github.com/naotaro0123/three-ts-practice/blob/master/src/Components/HelloShowFps.ts#L2)）

```typescript
function tick() {
  stats.begin();
  mesh.rotation.y += 0.01;
  stats.end();
  renderer.render(scene, camera);
  renderer.setAnimationLoop(tick);
}
```

![fps.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15028/60133d68-1e61-ac6f-d0c0-d7e28cea5114.gif)

類似した型定義に `@types/stats` があるけど、そちらでは上手く動かせなくてハマった

*2020/02/27追記*
以下のThree.js TutorialsはTypeScriptで書かれているので参考になると思う
[Three.js Tutorials - Stats Panel](https://sbcode.net/threejs/stats-panel/)
ActiveRecord::PendingMigrationError が出た場合の対処法とエラー内容


解決策の結論：ターミナルで  
# $ rails db:migrate
と入力してマイグレーションを実行するだけ


ActiveRecord::PendingMigrationError

Pendingは日本語で待機なのでマイグレーションを実行していない場合に出るエラーのようです
他にも原因ある場合はすみません
【初心者向け】外部キーについて　

# 外部キー（FOREIGN　KEY）とは
関連性のあるテーブルを結びつけること


「ここの（外部キーを指定した）値は
こっち（親テーブルの値）から選んで入れるて」みたいな？

参照されるのが親テーブル
参照するのが子テーブル

#使用例

テーブル名：threads（子テーブル）参照する側

|id(主キー）|commented_at|comment|board_id（外部キー）|
|--:|--:|--:|--:|
|1|2020/1|aaa|A1|
|2|2020/2|iii|B2|
|3|2020/3|uuu|C3|
|4|2020/4|eee|D4|

テーブル名：boards（親テーブル）参照される側

|id（主キー）|created_at|title|
|:--|--:|:--:|
|A1|2020/5|AAA|
|B2|2020/6|III|
|C3|2020/7|UUU|
|D4|2020/8|EEE|

外部キーに指定するカラム名は（参照先のテーブル名の単数形+id）
２つのテーブルを関連付けるため、threadsテーブルにboard_idを追加。
外部キーを指定することで、もうboard_idにはboardsテーブルのカラムidしか持てなくなる

#外部キー制約
`「子テーブルにデータを追加するとき親テーブルに存在しない値を含むデータの追加をエラー」`
`「親テーブルの削除、更新時に子テーブルにその値があるとエラー」（デフォルト）`

親テーブルの削除、更新の時にエラーにしたくないのなら、設定を変更可能↓

||削除更新時の動作|
|--:|--:|
|RESTRICT|エラー（デフォルト）|
|CASCADE|子テーブルの同じ値を削除、更新|
|SET NULL|子テーブルの同じ値がNULLになる|

```mysql:外部キー制約
CONSTRAINT `制約名` 
    FOREIGN KEY (`子カラム名`)
    REFERENCES `親テーブル名` (`親カラム名`)
    ON DELETE 削除時の動作設定 ON UPDATE 更新時の動作設定
```

```mysql:外部キーの制約名の確認
ALTER TABLE 子テーブル名 ADD FOREIGN KEY(子カラム名) REFERENCES 子テーブル名(子カラム名);
```

```mysql:外部キーの追加
SHOW CREATE TABLE 子テーブル名;
```

```mysql:外部キーの削除
ALTER TABLE 子テーブル名 DROP FOREIGN KEY 外部キー制約名;
```

||意味|
|--:|--:|--:|
|FOREIGN KEY|外部キー制約|
|REFERENCES|どれを参照するか|
|ON DELETE|親テーブルを削除した時|
|ON UPDATE|親テーブルを更新した時|


#どんなことができるか

たとえば、
twitterで呟いたら、コメントできるけど、
呟いたこと時自体を消せばコメントも全部消えるみたいなこと？
PythonでTorを用いてスクレイピングする

## 注意

:::note warn
この記事はTorを用いたスクレイピングを推奨するものではありません。

スクレイピングは基本的に問題ありませんが、対象のサイトの利用規約で禁止されていたり、対象のサイトのサーバーに過度な負荷をかけた場合、罪に問われる可能性があります。
:::



## Torとは

接続経路を匿名化する技術です。理論上、Torを使用してアクセスした場合、誰がアクセスしたか特定することは困難です。



## 実行環境

```
Homebrew 2.2.4
pip 20.0.2
Python 3.7.3
```



## 1. IPアドレスを取得

最初に、Torなしの状態でグローバルIPアドレスを確認しましょう。
グローバルIPアドレスは[ここ](http://checkip.dyndns.com/)、Torを使用しているかどうかは[ここ](https://check.torproject.org/)からHTMLを取得することで確認できます。

Beautiful Soupを使用するので、インストールしてください。

```sh
# pipでbeautifulsoup4をインストール
$ pip install beautifulsoup4
# 確認
$ pip list | grep beautifulsoup4
beautifulsoup4 4.7.1
```

```python
import urllib.request, urllib.error
from bs4 import BeautifulSoup

# URLからHTMLを返す
def fetch_html(url):
  res = urllib.request.urlopen(url)
  return BeautifulSoup(res, 'html.parser')

# 現在のグローバルIPアドレスを返す
def get_ip_addr():
  html = fetch_html('http://checkip.dyndns.com/')
  return html.body.text.split(': ')[1]

# Torを使っているかを返す
def check_use_tor():
  html = fetch_html('https://check.torproject.org/')
  return html.find('h1')['class'][0] != 'off'

print('You are using tor.' if check_use_tor() else 'You are not using tor.')
print('Current IP address is ' + get_ip_addr())

```

実行結果

```
You are not using tor.
Current IP address is XXX.XXX.XX.XXX
```



## 2. Torをインストールする

MacOSを使用している場合は、Homebrewでインストールできます。
また、`brew services start`を使用してデーモンとして起動させています。

```sh
$ brew install tor
$ brew services start tor
# 確認
$ tor --version
Tor version 0.4.2.6.
$ brew services list | grep tor
tor started your_name /Users/your_name/Library/LaunchAgents/homebrew.mxcl.tor.plist
```

Torを停止させる場合、再起動させる場合は以下のコマンドを実行してください。

```sh
$ brew services stop tor
$ brew services reload tor
```

また、この記事では触れませんが、設定ファイルは`/usr/local/etc/tor/torrc`です。



## 3. Torを介してスクレイピングを行う

PySocksを使用するので、インストールしてください。

```sh
$ pip install PySocks
# 確認
$ pip list | grep PySocks
PySocks 1.7.1
```

Torはプロキシとして`socks5://localhost:9050`を使用しているので、 **1.** のコードに以下を追加します。

```python
import socks, socket

socks.set_default_proxy(socks.PROXY_TYPE_SOCKS5, '127.0.0.1', 9050)
socket.socket = socks.socksocket
```

実行結果

```
You are using tor.
Current IP address is YY.YYY.YYY.YY
```

表示されるグローバルIPアドレスが **1.** で実行したときと異なっていることを確認してください。
Tor使用時のIPアドレスは、一定時間ごとに切り替わります。
ZSH で補完で表示がバグる対処メモ

## 現象
zshでコマンド入力の途中でTABを押して補完を使おうとするとなぜか最初の２文字が先頭に入る

```
❯ vim inde
```
TABを押すと

```
❯ vivim inde
```

deleteで消してもこの２文字は消えない

```
❯ vi
```

## 結論
以下を`~/.zshrc`に書いておく

```bash

export LANG=en_US.UTF-8
export LC_ALL=en_US.UTF-8
```
SQL　〜テーブルの構成について〜

用語をきちんと理解しておかないと開発に影響でてしまうので備忘録として(^^)/

#テーブルの構成#
・テーブル(table)　　→データが保存されている場所。
・カラム(column)　　→データが保存されている場所。列。
・レコード(record)　 →データそのもの。"列"のカラムに対して"行"を意味するロウ
・フィールド(field)　 →Excelで言う"セル"

![2017-12-09_17h47_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538880/e198b315-7463-a2d1-62ea-09b38ad3786d.png)


*画像引用、参考文献*
https://mseeeen.msen.jp/sql-first-step/
UNNotificationServiceExtensionを実装したときの罠

## Bundle Identifier
アプリ本体のBundle Identifierをprefixとして命名する
### 例1
|ターゲット|Bundle Identifier|
|:--|:--|
|アプリ本体|work.d128.stockey|
|UNNotificationServiceExtension|work.d128.stockey.notificationservice|
### 例2（本番とBundle Identifierを分けている場合）
|ターゲット|Bundle Identifier|
|:--|:--|
|アプリ本体|work.d128.stockey.dev|
|UNNotificationServiceExtension|work.d128.stockey.dev.notificationservice|

# プロビジョニング
UNNotificationServiceExtensionで指定したBundle Identifierでプロビジョニングを作成して設定する必要がある

# VersionとBuild
アプリ本体とVersionとBuildを合わせる必要がある

合わせていなかっため、ipaアップロード時に下記の警告がメールで送られてきました

- ITMS-90473: CFBundleVersion Mismatch
- ITMS-90473: CFBundleShortVersionString Mismatch
プログラミング関係の情報ソース（2020/02/01時点）

日常的にチェックしている、プログラミングやIT関連の情報ソースをまとめます。

##Feedly
気になるサイトを片っ端から登録し、興味がある記事に目を通すようにしています。
平均して1日100件くらいの記事がたまり、その中の10件くらいを読むことが多いです
以下、登録しているIT関連のサイトです。

###ニュース
・[TechCrunch Japan](https://jp.techcrunch.com/)

・[CNET Japan](https://japan.cnet.com/)

・[CodeZine](https://codezine.jp/)

###まとめ系
・[Qiita - 人気の記事](https://qiita.com/)

・[はてなブックマーク - 人気エントリー - テクノロジー](https://b.hatena.ne.jp/hotentry/it)

###フロントエンド、web制作
・[サルワカ](https://saruwakakun.com/)

・[Webクリエイターボックス](https://www.webcreatorbox.com/)

・[HPcode](https://haniwaman.com/)

・[ずぐろぐ](https://zukulog098r.com/)

・[Web Design Trends](https://webdesign-trends.net/)

###個人ブログ
・[ボクココ](https://www.bokukoko.info/)

・[give IT a try](https://blog.jnito.com/)

・[Mizchi's Blog](https://mizchi.hatenablog.com/)

・[パパパパ](https://www.paji.me/)

・[考えすぎてしまう人のブログ](https://blog.sesere.net/)

###企業ブログ

・[Goodpatch Blog](https://goodpatch.com/blog/)

・[Btrax](https://blog.btrax.com/jp/)

##その他
・[Quora](https://jp.quora.com/)

・[Twitter](https://twitter.com/d0ne1s)

・[雑食系エンジニアサロン](https://kentakatsumata.net/archives/10)
form_withの書き方（情報を保存しない時・情報をDBに保存する時）



## form_tagのように、入力された情報を保存しない時の書き方

```html:sample.html
<%= form_with url: root_path do |form| %>
  フォーム内容
<% end %>
```

## form_forのように、入力された情報データベースに保存する時の書き方

```html:sample.html
<%= form_with model: モデルクラスのインスタンス do |form| %>
  フォーム内容
<% end %>
```

データーベースに保存する場合、form_withの引数には `モデルクラスのインスタンス` を指定する。
モデルクラスのインスタンスとは `保存したいテーブルのクラスのインスタンス` のことです。

例）

```html:sample.html
<%= form_with model: @user do |form| %>
  <%= form.text_field :name %>
  <%= form.submit %>
<% end %>
```
G検定の問題でよく見る人物名についてまとめてみた

## この記事について
G検定で出題される問題で人物名と何をやった人なのかが結びつかない。
という人向けに簡単なメモを作成しました。

G検定の問題ベースで作成しているので、細かいところは突っ込んでいません。
ざっくりと書いているので、語弊がある部分もあります。

問題集で見かける頻度が高い順で人物名を並べています。

## ジェフリー・ヒントン
* ILSVRC2012で`AlexNet`を使って優勝した人
  * ILSVRC：画像認識の世界コンペ
* 2006年に`トロント大学`で`オートエンコーダー`を提唱した人
  * オートエンコーダ：入力層/出力層/隠れ層から成るネットワーク。  
    入力層と出力層は同じ値。  
    `次元圧縮`で利用される。
* `制限付きボルツマンマシン`を用いた深層信念ネットワークを提案した人

## レイ・カーツワイル
* シンギュラリティを以下のように予言した人

  ```
  2045年に起きる
  ```
  * シンギュラリティ(技術的特異点)：人工知能が人よりも賢くなる時

## イアン・グッドフェロー
* GANを提唱した人
  * GAN(敵対生成ネットワーク)：人工知能を用いた画像生成の手法  

## ジョン・サール
* `強いAI`/`弱いAI`という言葉を使った人
  * 強いAI(汎用型AI)：人のように様々な問題が解けるAI。  
    ドラえもんや鉄腕アトムのような頭脳をイメージするとわかりやすい。[^1]  
    現在、実在はしていない。
  * 弱いAI(特化型AI)：ある特定の分野の問題のみ解けるAI。  
    現在のAIは全てこれに分類される。
* `中国語の部屋`を提唱した人
  * 中国語の部屋：(説明が長くなるので結論)強いAIが実現不可能であることを示した思考実験
    * 分かりやすく説明している[リンク](https://www.cscd.osaka-u.ac.jp/user/rosaldo/120705chinaman.html)

## スティーブン・ホーキング
* AIについて以下のように述べた人

  ```
  AIの完成は人類の終焉を意味するかもしれない
  ```

## ヤン・ルカン
* GANを以下のように形用した人
  
  ```
  機械学習において、この10年間で最もおもしろいアイディア
  ```

## トマス・ミコロフ
* `word2vec`を開発した人
  * word2vec：単語をベクトル表現する手法

## アーサー・サミュエル
* 機械学習を以下のように定義した人

  ```
  明示的にプログラムしなくても学習する能力をコンピュータに与える研究分野
  ```

## ヒューゴ・デ・ガリス
* シンギュラリティを以下のように予測した人

  ```
  21世紀の後半に来る
  ```

## イーロン・マスク
* シンギュラリティの到来に危機を持ち、非営利のAI研究組織`OpenAI`を設立した人

## オレン・エツィオーニ
* シンギュラリティの到来を`馬鹿げている`と評価した人

## ヴァーナー・ヴィンジ
* シンギュラリティを以下のように定義した人

  ```
  機会が人間の役に立つふりをしなくなること
  ```

## 参考資料
* [G検定 Web模試](https://deeplearning.sakura.ne.jp/general/index.cgi/)
* [【書籍】徹底攻略ディープラーニングG検定ジェネラリスト問題集](https://book.impress.co.jp/books/1118101076)

[^1]: ロボット＝人工知能でない点に注意。人工知能はロボットの頭脳の開発に当たる研究分野。
チラ裏PYNQ 1.セットアップ

# はじめに
### PYNQ?
- FPGAがpythonで動かせるらしい（よくわかってない）

### モチベ
qiitaに投稿してみたい　＋　FPGAの勉強してみたい　＋　比較的新しいことしてみたい
→　この記事

### 目標
なんか映像を入れたら、モノクロに処理して出力する

### 筆者スキル
- python 　ちょっとしたデータ処理のためにために書く程度
- マイコン 　arduinoで遊んだことあるよ
- verilog　　実はちょっとかじったことあるのでまあまあ読める（タイトル回収）
- FPGA　　初めてです

### 環境
- OS win10
- ボード　PYNQ-Z1(秋月から購入）

#セットアップ

### 必要なもの
- PYNQ-Z1
- micro SD (8GB~)
- micro USB ケーブル
- LANケーブル
- micro SD のライター


![20200201_144040.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577098/e3967e90-941c-fc22-72e5-467b12f5b418.jpeg)

### セットアップ
正直これ（公式ドキュメント）見たほうが分かりやすいかも https://pynq.readthedocs.io/en/v2.5/index.html#

1. PYNQイメージをここからダウンロード　http://www.pynq.io/board.html
現在 v2.5 ユーザー登録が必要
- イメージを Win32 Disc Imager でSDカードに書き込む
- ここの通りにジャンパーピンやコネクタを入れてpower ON　https://pynq.readthedocs.io/en/v2.5/getting_started/pynq_z1_setup.html
(もう書くの面倒になった）
- ルーターを介しての接続をしたら http://pynq:9090/ でJupyter Notebooksにアクセスできます
- 初期pass は "xilinx"

![コメント 2020-02-01 160747.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577098/b8c00bf4-d689-5701-3247-3bb74745d1af.png)

### まとめ
チョー簡単でした。
それもそのはず。中にはlinuxが入っているだけなので起動だけならラズパイより楽です

とりあえず次はLチカが目標かな
[Python]フィボナッチ数を高速に求める（メモ化、動的計画法）

## はじめに
フィボナッチ数列とは、「最初の二項は 0, 1 であり、以後どの項もその直前の2つの項の和となっている数列」です。（[ウィキベディア](https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A3%E3%83%9C%E3%83%8A%E3%83%83%E3%83%81%E6%95%B0)より）

```text:フィボナッチ数列
0
1
1 （0 + 1）
2 （1 + 1）
3 （1 + 2）
5 （2 + 3）
8 （3 + 5）
13 （5 + 8）
```

この数列のn番目の項を求めるとき、そのまま実装するとこのようになります。

```python
def fib(n):
    """
    ０始まりでn番目のフィボナッチ数を求める。
    """
    if n == 0:
        return 0
    if n == 1:
        return 1
    return fib(n-1) + fib(n-2)

print(fib(7)) # -> 13
```

実際に実行してみると、**とても遅い**ことがわかります。
例えば、n=100でも相当な時間がかかります。

その原因は、詳細は割愛しますが、**同じ計算を何度も行なっている**点にあります。
例えば、fib(8)は、fib(7)とfib(6)をそれぞれ求めた上で足し合わせて求められますが、fib(7)を求めるためにはfib(6)を新たに求める必要があります。

**「同じ計算を二度しない」**をキーワードに、高速化をしてみましょう。
**メモ化**と**動的計画法**の二つのアルゴリズムを紹介します。

## メモ化

一度計算した結果を保存しておきます。
使える場合はそれを使い、そうでない場合は新たに計算し、その結果を次回以降のために保存しておきます。

```python
MAX_N = 100
MEMO = [None] * (MAX_N + 1)  # 計算結果を保存する配列

def fib(n):
    if n == 0:
        return 0
    if n == 1:
        return 1

    # 計算済み？
    if MEMO[n]:
        return MEMO[n]

    r = fib(n-1) + fib(n-2)
    MEMO[n] = r  # 計算結果を保存
    return r

print(fib(100))
```

n=100の場合でもすぐに結果が帰ってきました。


## 動的計画法（DP）

再帰関数を使わなくても、nが小さい方から計算することで、フィボナッチ数を求めることができます。

```python
MAX_N = 100
DP = [None] * (MAX_N + 1)  # 計算結果を保存する配列
DP[0] = 0  # 定義より
DP[1] = 1  # 定義より

def fib(n):
    # フィボナッチ数を2からnまで順に求めていく
    for i in range(2, n + 1):
        DP[i] = DP[i-1] + DP[i-2]
    return DP[n]

print(fib(100))
```

動的計画法については、参考資料を見てください。

## 参考資料
* https://www.slideshare.net/iwiwi/ss-3578511
rails6でsqlite3からmysql2へ変更

最初からこう指定してやれば良いのだっ

```
$ rails new app --database=mysql
```

指定しそこなった自分のために一応変更方法を書いておく。

mysql2のgemをインストールしたら、database.ymlの内容を書き換えていく。

```config/database.yml
default: &default
  adapter: mysql2
  encoding: utf8
  pool: 5
  username: root
  password:
  host: localhost

development:
  <<: *default
  database: sample_development 

production:
  <<: *default
  database: sample_production
  username: sample_app
  password: password
```

このように変更した後勇み足を踏み`rails s`すると`unknown database`と表示されてしまった。そこで下記を実行

```
$ bundle exec rake db:create
$ bundle exec rake db:migrate
```

ようやく`Yay!You're on Rails!`
PCをshredする

# pc初期化方法について
- メモとして共有
- PCの初期化方法を紹介

## ubuntuのライブブート
1. ubuntuのライブDVDorUSBを用意し，ubuntuを試すで起動
2. 起動したらterminalへ

## ディスクを調べ初期化
- terminalで以下のコマンドを実行

```bash 
$dmesg | grep sd
#実行後[sda][sdb]などディスクの名前が表示されるので確認
[ ] sd 0:0:0:0: [sda] 0000000000 512-byte logical blocks: (2.00 TB/1.82 TiB)
......
[ ] sd 2:0:0:0: [sdb] 0000000000 512-byte logical blocks: (2.00 TB/1.82 TiB)
......
[ ] sd 4:0:0:0: [sdc] 0000000000 512-byte logical blocks: (2.00 TB/1.82 TiB)
......
[ ] sd 5:0:0:0: [sdd] 0000000000 512-byte logical blocks: (4.00 TB/3.64 TiB)
......
```

2. shred
- 消したいディスクを選択削除

```bash
$sudo shred -v -n 3 -z /dev/sda #最後に削除したいディスクを選択
```
自動でVtuberの配信予定を更新するカレンダーを作ってみた (Google Calendar編)

## はじめに

この記事は、下記記事の続きになります。

[自動でVtuberの配信予定を更新するカレンダーを作ってみた](https://qiita.com/shun_1218/items/1daab8c251e2ed1a5e6a)

前回はYouTubeから動画情報を取得したので、今回は取得した動画情報を元に、Googleカレンダーに予定を登録していきます。

## 環境

- Azure VM (Windows Server 2016)
- Python 3.7

### 用意するデータ

- YouTube 動画情報
- Google カレンダー カレンダーID

## 方法

今回はGoogleカレンダーに予定を登録していくので、当然登録先のカレンダーが必要になります。
なので、カレンダーの設定からカレンダーIDを予め確認しておきます。

あとは[公式のサンプル](https://developers.google.com/calendar/quickstart/python)に従って進めていくだけで簡単にカレンダーへの登録ができました。

### 1. Google カレンダーAPIの有効化

サンプルページにあるボタンを押すだけです。
合わせて、credentials.jsonを作業中のディレクトリに保存しておきます。

### 2. 必要なライブラリのインストール

書いてある通りにコマンドを実行します。

```python
pip install --upgrade google-api-python-client google-auth-httplib2 google-auth-oauthlib
```

### 3. カレンダーへ予定を登録

サンプルコードを元にカレンダーへ予定を登録します。

```python
from __future__ import print_function
import pickle
import os.path
from googleapiclient.discovery import build
from google_auth_oauthlib.flow import InstalledAppFlow
from google.auth.transport.requests import Request

SCOPES = ['https://www.googleapis.com/auth/calendar']

def insert_event(event, calendar_id):
    creds = None
    if os.path.exists('token.pickle'):
        with open('token.pickle', 'rb') as token:
            creds = pickle.load(token)
    if not creds or not creds.valid:
        if creds and creds.expired and creds.refresh_token:
            creds.refresh(Request())
        else:
            flow = InstalledAppFlow.from_client_secrets_file(
                'credentials.json', SCOPES)
            creds = flow.run_local_server(port=0)
        with open('token.pickle', 'wb') as token:
            pickle.dump(creds, token)

    service = build('calendar', 'v3', credentials=creds)

    event = {
        'summary': event.summary,
        'description': event.description,
        'start': {
            'dateTime': event.start_datetime,
            'timeZone': 'Japan',
        },
        'end': {
            'dateTime': event.end_datetime,
            'timeZone': 'Japan',
        }
    }
    event = service.events().insert(calendarId=calendar_id, body=event).execute()
    return event['id']
```

あとはこの関数に前回取得した動画情報からカレンダーへ登録する情報と、最初に確認したカレンダーIDを渡してあげれば完了です。
カレンダーに登録する情報はeventとして最低限のものだけを渡すことにしました。

- summary: 動画タイトル
- description: 動画URL
  - https://www.youtube.com/watch?v= + 動画ID
- start_datetime: 配信開始時間
  - 基本はactualStartTimeを利用。配信開始前の動画はscheduledStartTimeで代替。
- end_datetime: 配信終了時間
  - 基本はactualEndTimeを利用。配信開始前や配信中の場合はscheduledStartTimeの1時間後に設定。

戻り値のIDを控えておけば登録した予定の編集が可能なので、配信時間や動画タイトルの変更にも対応できます。
Gitコマンド及びGithubについて

##gitコマンドについてのまとめ
###リポジトリ
貯蔵庫．データなどを保存しておく場所です

###リモートリポジトリ
GitHub上の，データを保存している場所を指します

###ローカルリポジトリ
GitHubに送信するデータを登録しておく，自身のPC上にある

###コミット　commit
GitHubでは，GitHubにデータを送信する前に一時的にローカル環境にデータを登録し，その後一気にGitHub上に送信します．
そのローカル環境にデータを登録することをコミットといいます．

###プッシュ push
ローカル環境に登録していた（コミットされた）データをGitHubに送信＆公開することを言います

##GitHubの流れ
ここでは，GitHubにデータを送信するまでの大まかな流れと仕組みを説明します．

##0)$ git initを叩くと，ローカルリポジトリが作成されます．
```
$ git init
```
##1）あなたのPCで開発した物を，ローカルリポジトリのインデックスに追加（アッド）します．
```
$ git add -A  #すべての変更をインデックスにadd
```
##2）あなたのPCで開発した物を，ローカルリポジトリに登録（コミット）します
```
$ git commit -m "コミットメッセージをいれます" #addしたものをローカルリポジトリに登録
```

##3）全て登録し終えた後，それらをGitHubに送信（プッシュ）します
```
$ git push heroku master #herokuにプッシュ

$ git push origin master #GitHubに送信（プッシュ）

$ git push -u origin mk #プルリクをするプッシュ

プルリクはgithub上にリクエストが表示されmasterが確認し問題なければmasterにマージする
```
以上です:open_mouth:


##ブランチ（枝）とは？

###用語説明
##マージ
master 以外のブランチでpushしたものをmasterブランチに結合すること

##ブランチ
その名の通り「枝」．
一気にバージョンを上げる時などに，失敗した時用にコピーを作っておくイメージ

##・実際にブランチを作ってみる
まあ，まずはmkというブランチを作ってみます．

```
$ git branch mk
```

なお，今ある（存在する）ブランチは，

```
$ git branch
```
で確認できます．

##・ブランチの変更
参照＆書き換え先のブランチをtestbranchに変えてみます．

```
$ git checkout testbranch　#チェックアウトで切り替え指示
```
##・ブランチを本筋に統合する
所謂「マージ」と言うものをしてみます．
ブランチを本筋に反映させます．

masterブランチに，ｍｋを取り込みます．

###1）まずは取り込み先のブランチを選択します．
```
$ git checkout master
```
###2）そして，materにmkを結合します．
```
$ git merge mk
```
その反対は

```
$ git merge master
```
###3）最後に，結合情報をGitHubに送ります（プッシュ）

```
$ git push origin master
```
今回は「master」ブランチにデータをプッシュするため，コマンドは「master」になっています．
##最後に
なれれば簡単ですね:grinning:
撮影した動画が勝手に分割保存されている時に結合するために使うコマンド (ffmpeg)

## 概要

GoProとかそれに類するビデオカメラ・アクションカメラで動画を撮影すると、15分とか任意の単位で勝手に動画分割されたりしません？

結局編集ツールで切り貼りするんで別にいいんですが、順番とかわかりづらいのでいったん1本の動画にしたい。

でも動画編集ツールとか使うのめっちゃ時間かかりません？

## ffmpeg

`ffmpeg` はCLI上で動画を変換したり、加工したりできるツールなんですが、変換をせずにコピーするだけだと超高速で処理が終わるので、今回のような用途には最適です。

実際のコマンドは、こんな感じ。

`ffmpeg -f concat -safe 0 -i list.txt -c copy output.mp4`

これを実行する前に、 `list.txt` というファイルに、下のような動画ファイルのリストを用意しておきます。

```
file /Volumes/video01.mp4
file /Volumes/video02.mp4
file /Volumes/video03.mp4
```

`file` の後にスペースを挟んで、動画ファイルへのファイルパスを指定します（これは相対パスでも大丈夫ですが念のため）

`-c copy` がコピーの指定なので、これを指定すると入力ファイルと出力ファイルは同じ形式である必要があります。ただ処理自体は超高速です。

参考にしてみてください。