OmniAICreator/Qiita-1.07M huggingface dataset:
特に新しい技術を使っていないWEB SERVICEをリリースする

# 最初に
どうしても、技術者は技術で物事を解決しようとする。

それはとても良いことですが、
「たまには怠惰に別の方法での解決を模索してみよう。」
ということで、特に目新しい技術を使わずにWEB SERVICEをリリースしてみたので記事にしたいと思います。

# 結論
会議時間の見える化サービス「MetWatch」をリリースしました。
![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/c35629e9-e50f-af31-3699-310ae9cdd0c0.gif)

https://metwatch.tk

# コンセプト
## 全体
自分も会社に務めていて、1日の大半を会議で埋まると「今日は何もしていないな」などと感じてしまいます。
そこで、この時間がどれくらい「無駄か」を見えるようにすれば会社として会議のあり方をもう少し考えてくれるのではないかと思って作成しようと思いました。

さらに…そのようなニーズを持った人をそのサイトに呼び込むことが可能かも含めて試してみたいと思ったところもあります。

## 目的
・「会議が無駄」と感じているユーザが使いやすいものを作る
・共有しやすいものを作りたい
・そういったユーザが当サイトにうまく集められるか試したい

## 機能
会議が行っているとコストがかかることを体感させたいので、下記のような仕様にしました。
・リアルタイムでコストを計算し表示
・ユーザの年収は個別で設定可能
・部屋などの費用も入力可能
・共有しやすいようにURL引数で人数や部屋代などの初期値を指定可能
　（後で記載するようにQRコードなどでの共有を想定）
・それなりに見栄えを良くする

# 開発
## 利用技術
開発については細かい話は端折りますが、下記のような技術を利用して構築しました。
### クライアントサイド
・html
・css
・vue.js
・bootstrap

### サーバサイド
・docker
・docker-compose
・node

#### SaaS/IaaS等
・Google Cloud Platform
・freenom


## 開発手順
開発の手順としては下記のような形で行いました。
### ①自PCで仕組みだけ構築
仕組みだけなので、デザインは気にせずに`Vue.js`を勉強しながらリアルタイムでコストが表示される部分だけを作成しました。
また、URL引数を受け取り値を初期化する部分の仕組みについても構築しました。
この時点でテスト仕様書（項目だけのものですが…）を作成し、簡便なテストを行って完成としました。

### ②自PCで外見を飾り付け
ここも力を入れたくなかったので`bootstrap`を持ってきて、それっぽく組み合わせる事を主として行っています。
ここまでメインのページが完成しました。

### ③ドキュメント作成
今回の目玉である`QRコード`の作成と、それを挿入したドキュメントを作成しました。
また、それを表示するための別ページを構築しました。

### ④サーバ側リソース確保
今回は`GoogleCloudPlatform`の無料枠でサーバを立ち上げました。
また、ドメインについても`freenom`にて無料で取得したものです。
証明書については`docker-compose`の`https-portal`というものを利用して`Let's Encrypt`で取得したものを利用しています。

### ⑤公開・告知
私のTwitterアカウントで告知を行いました

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">会議にかかるコストを計算するアプリをリリースしてみた。<a href="https://t.co/k1m0l4XA0s">https://t.co/k1m0l4XA0s</a></p>&mdash; はしと (@hasitozzz) <a href="https://twitter.com/hasitozzz/status/1169282891689250817?ref_src=twsrc%5Etfw">September 4, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 反響
なんと1週間で**9名**の方にお越しいただけました！(内1名は私)
<img width="659" alt="スクリーンショット 2019-09-07 8.46.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/1191af29-d4c8-a858-d2ff-4feb148ef41c.png">


おしまい。
[漏洞预警]CVE-2019-0708远程桌面代码执行漏洞利用工具已放出

### 漏洞描述
2019年5月14日微软官方发布安全补丁,修复了Windows远程桌面服务的远程代码执行漏洞,该漏洞影响了许多版本的Windows操作系统。该漏洞在不需身份认证的情况下即可远程触发,危害与影响面极大。2019年9月6日晚该漏洞利用工具在GitHub上放出,亚信安全网络攻防实验室在收到消息的第一时间对其进行了验证,确认该工具具有利用可行性.随即使用空间搜索引擎发现我国有2504808用户可能会受到影响

![空间搜索引擎](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491410/c98e13ba-666c-1f9c-4b73-975441eb2b28.png)

### 影响范围
Windows 7
Windows Server 2008 R2
Windows Server 2008
Windows 2003
Windows XP
### 漏洞验证
使用GitHub流传出的工具进行验证,发现验证成功

![验证成功](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491410/4394afd1-6970-17d9-7eaf-a53a3f419821.png)

该工具可以和受害者建立会话并产生交互式shell

![影响](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491410/114a7af1-2909-b02c-6c6a-9ed154bec7e4.png)


根据我实验室成员验证,该工具目前只能对Windows 7 SP1、Windows Server 2008 R2造成影响,但不排除后续将有利用更新.
### 修复建议
微软官方已给出补丁下载链接,望广大用户在第一时间内及时安装补丁,确保网络资产安全
https://support.microsoft.com/zh-cn/help/4500705/customer-guidance-for-cve-2019-0708
https://portal.msrc.microsoft.com/en-US/security-guidance/advisory/CVE-2019-0708
### 时间轴
[1]2019年5月14日微软官方发布安全补丁
[2]2019年9月6日利用工具放出
[3]2019年9月7日亚信安全网络攻防实验室发布预警通告
### Reference
https://github.com/rapid7/metasploit-framework/pull/12283/files
https://portal.msrc.microsoft.com/en-US/security-guidance/advisory/CVE-2019-0708
React-NavigationのTabにカスタムアイコンを設定する


## 注意点

* React-Navigation V4からTabNavigationは別途読み込みが必要になったようです。
  * 個別にnpm install, importが必要です。

## 完成

独自に作ったアイコン（透過PNG）をアイコンとして利用します。

![スクリーンショット 2019-09-07 8.33.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/d95153a5-d48b-f18c-09d4-ec2280286bc1.png "スクリーンショット 2019-09-07 8.33.43.png")


>アイコンに意味はありません。透過を確認するために頭部？に穴を開けてます。

## 準備

透過PNGを作って、asseetsフォルダに保存します。
正方形のキャンバスに書いたほうがいいです。とりあえず300 x 300pxで作りましたが、最後は20px前後になりますので大きく作ってもあまり意味はないですね。

![test2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/ade2c113-7f98-493e-7b12-0daacb446de8.png "test2.png")

ここでは、assets/test2.pngとして保存しました。

## 実装

右Tabと左Tabを用意して、右はFontAwesomeを利用、左をカスタムアイコンとしています（念の為共存確認）。
Tab1, Tab2のコードは、タダTab1, Tab2と表示してるだけのもの。

元のPNGが何色ベースでもtintColorを設定することで標準？の色に変換されて便利。

```js:App.js
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Icon from 'react-native-vector-icons/FontAwesome';

import Tab1 from './screens/Tab1';
import Tab2 from './screens/Tab2';

const Tab = createBottomTabNavigator(
    {
        Tab1: {
            screen: Tab1,
            navigationOptions: {
                //普通のアイコン
                tabBarIcon: ({ tintColor }) => <Icon size={24} name="home" color={tintColor} />,
                title: 'ホーム'
            }
        },
        Tab2: {
            screen: Tab2,
            navigationOptions: {
                //カスタムアイコン
                tabBarIcon: ({ tintColor }) => <Image source={require('./assets/test2.png')} style={{ width: 24, height: 24, tintColor: tintColor }} />,
                title: 'カスタム'
            }
        },
    }
);

export default class App extends React.Component {
    render() {

        const Layout = createAppContainer(Tab);

        return (
            <View style={{ flex: 1 }}>
                <Layout />
            </View>
        );
    }
}
```

いちおうTab1。

```js:Tab1
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class Tab1 extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Tab1</Text>
            </View>
        );
    }
}
```

そしてTab2。screensというフォルダを作ってその下に入れてます。

```js:Tab2
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class Tab2 extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Tab2</Text>
            </View>
        );
    }
}
```
Debian10でInformix CSDKをインストール

Ifxpyが動くかもしれない。

Informix Client SDKをインストールしようとした。

まさかインストールできない！？

## 環境
- Windows10 Pro x64
- Vagrant 
- Hyper-V

### Box内の環境
- [generic/debian10](https://app.vagrantup.com/generic/boxes/debian10)  (hyperv,19.26)


```bash:Install_InformixCSDK
 # Get Informix CSDK
 $ curl -OL http://myweb/ibm.csdk.4.50.FC1.LNX.tar
 $ mkdir csdk
 # extract tar file
 $ tar -xvf ibm.csdk.4.50.FC1.LNX.tar -C csdk
 $ cd csdk
 # Install Informix CSDK
 $ ./installclientsdk -i console
 ===============================================================================
 Prerequisite Verification Check
 -------------------------------
 
 One or more prerequisite system libraries are not installed on your computer.
 Install libncurses.so.5 and then restart the IBM Informix installation
 program.
 
 The installation cannot succeed until the minimum requirements are met. For
 more information about the prerequisites, see your Installation Guide or check
 with your System Administrator.
 ```

libncurse.so.5 が無いとInstallができないらしい。


## 解決方法

StackOverFlowの記事じゃ全く解決できなかった。
かといってInformix CSDKのdocには追加すべきLibraryは何も書いていない。

何か手掛かりがあるかもしれないと思い、
Docker HubでInformixのImageを眺めてみることにした。

[ibmcom / informix-developer-database : 14.10.FC2DE](https://hub.docker.com/layers/ibmcom/informix-developer-database/14.10.FC2DE/images/sha256-3d0ebe477cb374f4b239cf0de8113d22f7c99d3c321283fce4bb537f77281792)　のImage Historyの8行目と9行目に注目してほしい。
足らないライブラリをインストールしている。
しかもaptを使っているのでBase ImageはDebian系に違いない。

下記のものを入れれば動き出すに違いない。

```bash:足らないLibraryを入れる
$ sudo apt -y install libaio1 bc libncurses5 ncurses-bin libpam0g
$ sudo apt -y install libncurses5-dev libelf1 

```

う、動いた！！


## 参考サイト

[lib32ncurses-dev](https://packages.debian.org/sid/lib32ncurses-dev)

[ibmcom / informix-developer-database : 14.10.FC2DE](https://hub.docker.com/layers/ibmcom/informix-developer-database/14.10.FC2DE/images/sha256-3d0ebe477cb374f4b239cf0de8113d22f7c99d3c321283fce4bb537f77281792)
MySQLのコマンドメモ

##よく使用するMySQLのコマンドのメモ

###ログインの時

```console
$ mysql -u "ユーザー名" -p
````
###データベース作成
```console
mysql> CREATE DATABASE データベース名;
````

###データベース一覧
```console
mysql> SHOW DATABASES;
````

###テーブルを使用する
```console
mysql> USE "データベース名"
````

###テーブル一覧
```console
mysql> SHOW TABLES;
````

###ユーザー権限を作成
```console
mysql> grant all on *.* to 'ユーザー名'@"%" identified by 'パスワード';
````
#docker docker-compose の実行で環境変数を指定する ( --env SOME=some )

#docker Specify environment variables when executing docker-compose (--env SOME = some)


```
docker-compose run --env SOME=1 some_service some_command
```

```
docker-compose exec --env SOME=1 some_service some_command
```

[docker-compose run | Docker Documentation](https://docs.docker.com/compose/reference/run/)


# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
SSHでgit cloneする（gitlab）

## 動機

500万回くらい書かれてると思うけどこの間も聞かれたので。

## 環境

Ubuntu 16.04とWindows10で確認済。
OpenSSLがインストールされている。

## 手順

1. SSH keysを作る。
2. .ssh/configを書く。
3. 1.で作成した公開鍵をgitlabに登録する。
4. SSHでgit cloneできた！

これだけ。

### SSH keysを作る

既に存在している場合はスキップ。


```bash
ssh-keygen -t rsa -b 4096 -C "comment"
```

Githubの場合、コメントにはGithub登録ユーザのメールアドレスを入れると書いてある記事をよく見かけますが、gitlabでは特に入れなくても問題ないです。


### .ssh/configを書く

Git Bash使ってたら〜という記事をたまに見かけるが、普通に`.ssh`以下に`config`を作成すればよい。最初は存在しないので新しいファイルを作成する。

```bash
vi config
```

```config
host [任意の接続名]
  HostName [gitlabのホスト名またはIP]
  User [gitlabのユーザ名]
  IdentityFile ~/.ssh/[秘密鍵]
  Port [ポート番号]
```

gitlabのポート番号がわからない場合、gitlabの`config/gitlab.yml`に`ssh_port`の記述があるので確認してください。デフォルトは22でよかった気がします。

### 公開鍵をgitlabに登録する

右上のユーザアイコンから`Profile→SSH keys`で開く画面に公開鍵をコピペ。

### SSHできるか試す

```bash
ssh -T git@[ホスト名またはIPアドレス]
```

上を打ってWelcomeされればOK。あとは`git clone git://git@[ホスト名またはIPアドレス]/[グループ]/[リポジトリ].git`でできるはず。

### トラブルシューティング

#### SSHできない（Permission Deniedなどといわれる）

デバッグすれば大体原因がわかるのでデバッグしよう

```bash
ssh -T git@[ホスト名またはIPアドレス] -vvv
```

#### SSHは通るのにgit cloneが通らない

プロトコルを変更すると通る場合があります

```bash
 git clone ssh://git@[ホスト名またはIPアドレス]/[グループ]/[リポジトリ].git
```
RactNativeでPickerを利用する


Webでいうselectとかdropdown的なやつ。コンポーネントを探していたが標準搭載されているみたい。

![スクリーンショット 2019-09-07 6.33.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/2e9a0768-98da-1dff-e4be-f28560f10699.png "スクリーンショット 2019-09-07 6.33.38.png")



使い方も特に難しくはない。
とりあえず選択された値がAlertで表示されるようにしてみた。

```js:App.js
import React from 'react';
import { StyleSheet, Text, View, Picker } from 'react-native';

export default class App extends React.Component {

  //選択状態を保存しておくstateを定義しておく
  state = {
    area: 2,
  }

  render() {

    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Picker Demo</Text>
        <Picker
          style={{ width: 200, backgroundColor: '#ffffff' }}
          itemStyle={{ color: 'blue' }}
          selectedValue={this.state.area}
          onValueChange={(value) => {
            this.setState({ area: value }); //これをしないと選択しても標準値に戻ってしまう
            alert(value);
          }}
        >
          <Picker.Item label="東京" value={1} />
          <Picker.Item label="大阪" value={2} />
          <Picker.Item label="福岡" value={3} />
        </Picker>
      </View>
    );
  }
}
```

## 余談

開発中iOSエミュレータの動作が遅くなって困った。コードが悪いと思っていたが、どうやらcommand + Tを押してデバックを有効にしたためのようでした（iTermの新規Tabのショートカットとかぶってるので押してしまったのだと思う）。
vue-cli-plugin-electron-builderではまったこと

Vue.jsとElectronを使って、マルチプラットホームで動作するアプリケーションを開発しています。
vue-cli-plugin-electron-builderを使っていますが、そのときに、がっつりはまってしまったことについて共有します。

# アプリケーションのゴール
開発しているアプリケーションのゴールは以下の通りです。

* データベースは、NeDBを使う。
* REST APIサーバーとデータのやりとりを行う。
* MQTTでデータの送受信を行う。

# はまりネタ

## NeDBのデータがIndexedDBに格納される
Vue.jsプログラムの中で、```const nedb = require('nedb')```と書くと、データベースはブラウザのIndexedDBに作成されます。
NeDBはテキストファイル(JSONファイル)で中を見ることができ、他の環境に移すことができるので便利なのですが、IndexedDBに格納されるとこの利点が得られません。
Vue.jsの中で使っている訳ですので、IndexedDBに格納されるのは当たり前なのですが、何とかテキストファイルとして扱えるようにしたいと、調査開始。

見つけました。その方法。
以下のように書くと、ElectronでNeDBを使うことができるようになります。そうすると、ちゃんとテキストファイルとしてデータベースが作成できます(アプリケーションフォルダのdbフォルダの下になります。

```javascript:main.js
import { remote } from 'electron'

// データベースファイルパス名を決める
const databasePath = path.join( // eslint-disable-next-line
  (process.env.NODE_ENV === 'production') ? __dirname : __static,
  '../db/',
)

// NeDbを作成する
const Database = remote.require('nedb')

// データベースを作成する
db = new Database({
  filename: path.join(databasePath + 'plan.db'),
  autoload: true
})
```

プログラム的には、Vue.js(Renderer)とElectron(Main)が、IPC通信を行うようです。確かにChrome Dev Toolのnetworkを見るとそんな動きをしています。
オーバーヘッドはありそうです。

## NeDBがundefined
デバッグしたり、electron:serveで動かしている分には問題ないのですが、electron:buildしたものを動かすと、NeDBがundefinedだとエラーになります。
```remote.require('nedb')```と書いたので、Vue.jsが必要なモジュールだと認識しないのでしょう(推測)
かといって、IndexedDBだと使い勝手が悪いし、何よりデータを別の環境に持って行けないのが痛い。
何かいい方法はないものかといろいろと試しました。結果、プロジェクトのルートにvue.config.jsと言うファイルを作り、以下のように記述することで解決しました。

```javascript:vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      externals: ['nedb', 'fs-extra']
    }
  }
}
```

## electron:buiuldするとapp.asarが使われていて削除できないと言われる
electron:buildすると、app.asarが使われていて削除できないと言われます(もちろん、英語で)
Windows10を立ち上げてすぐにビルドしても同じエラーが出ます。何度やってもエラーになります。ごくたまに成功します。
犯人は、VisualStudio Codeでした。以下の手順で設定します。

* ファイル->基本設定->設定を開きます。
* ```files.watcherExclude```を検索します。
* ```**/win-unpacked/**```を追加します。
* 設定タブを閉じます。
* VisualStudio Codeを再起動します。

これで、かなりの確率でelectron:buildできます。

## electron:buildするときに独自ファイルを追加したい
アプリケーションを動作させるときに設定ファイルを使うことってありますよね？昔で言えばiniファイルとか。
このファイルのひな形を提供する方法です。
プロジェクトのルートにあるparameters.jsonと言うファイルを一緒にビルドして配付します。
vue.config.jsに以下のように記述します。これで、アプリケーションフォルダのresourceフォルダに配置されます。

```javascript:vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        extraResources: [
          'parameters.json'
        ]
      }
    }
  }
}
```
UUID('…') is not JSON serializable

```
message = json.dumps({
            "function": "function_name",
            "args": [uuid, str, [array], num]
        })
```

ってやったら、

```
UUID('…') is not JSON serializable
```

みたいなエラーが出たので

```
uuid_str = str(uuid)

message = json.dumps({
            "function": "function_name",
            "args": [uuid_str, str, [array], num]
        })
```

ってやったらバグらなかった。キレそう。Pythonのuuidクラスは文字列として機能しません。

もんだいなのは
```
message = json.dumps({
            "function": "function_name",
            "args": [str(uuid), str, [array], num]
})
```

でもバグるんですよね。はぁ～
排中律と二重否定除去をSMLで実装する

「排中律は型付きプログラミング言語すべてで実装できない」という旨のツイートを目撃したので、**静的型をもつプログラミング言語Standard MLで排中律を実装**してみたいと思います。

まず、call/ccがあれば古典論理の諸々（パースの法則とか）が実装できるみたいな話があります。そして、SMLの一部の処理系（SML/NJやMLton）にはcall/ccがあるので、古典論理特有の命題を実装できます。（素のSMLでは多分無理です）

（世間ではcall/ccと言ったらSchemeッ！という風潮<sup>[要出典]</sup>で、Schemeには静的型がない[^typed racket]ので、静的型があると古典論理特有のアレが実装できない、みたいな誤解が生じるのかもしれません）

[^typed racket]: Schemeの一種であるRacketにはTyped Racketという静的型のあるやつがあるみたい（？）なので、Typed Racketでもこの記事と同じようなことができるかもしれません。誰かやってみて。

# 準備・直観主義論理

まずはいくつか型を定義します。

```sml
datatype ('a, 'b) either = Left of 'a | Right of 'b

(* uninhabited type *)
datatype void = Void of void

(* absurd : void -> 'b *)
fun absurd (Void v : void) : 'b = absurd v

type 'a not = 'a -> void
```

`('a, 'b) either` はよくある直和型です。他の多くの言語と異なり、SMLやOCamlでは型構築子は後置です。また、型変数の名前はプライムから始まります。

`void` は値を持たない型、論理学でいう矛盾、ボトム $\bot$ です。SMLでは型構築子が0個の型を書けないので、こういう書き方になります。

`absurd` は「矛盾からはなんでも導ける」爆発律に対応する関数です。

`'a not` は、論理学でいう命題 `'a` の否定です。直観主義論理の $\lnot A \equiv A\rightarrow \bot$ みたいな感じで定義しています。`y : 'a not` と `x : 'a` があった時に矛盾、あるいは任意の命題を導くやつ（否定の除去則）は `absurd (y x)` と書けます。

ここまでは普通の直観主義論理っぽいですね。

# call/ccで実装する排中律

では本題です。call/ccを使って、古典論理の範囲に踏み込んでみましょう。

筆者の手元で使えるのがMLtonなのでMLtonのcall/ccを使うことにします。使い方は以下を見れば良さそうです。

* <http://www.mlton.org/MLtonCont>

まずは排中律を実装してみましょう。排中律は `unit -> ('a, 'a not) either` という型の関数 `excludedMiddle` として実装します。

実装の前に方針を立てます。`excludedMiddle` は `'a` か `'a not` のどちらかの値を返す必要がありますが、**いきなり任意の型 `'a` の値を返せるわけがない**ですよね。

対するもう一方の候補は `'a not` で、こちらは `'a -> void` という関数ですので、頑張ればなんらかの値を返せそうです。というわけで、**最初は** `'a not` の方を `Right` に包んで返すことにしましょう。（「最初は」って、あたかも複数回制御を返すように聞こえますね。その通りです。）

この際に返す関数は、 `'a` という型の値を受け取ったら `void` を返さないといけません。しかし `void` は値がないので、どうしたものでしょうか。

ここでcall/ccの出番です。`excludedMiddle` が呼ばれた段階で継続を保存しておき、 `'a` の値が渡された瞬間に**時間を巻き戻して**（比喩です） `excludedMiddle` から `Left` に包まれた値として返せば良いのです。「いきなり `'a` の値を返せるわけがない」と書きましたが、最初は無理でも、このタイミングなら可能なのです。

MLtonでの排中律の実装は次のようになります：

```sml
(* excludedMiddle : unit -> ('a, 'a not) either *)
fun excludedMiddle () : ('a, 'a not) either
    = MLton.Cont.callcc (fn cont : (('a, 'a not) either) MLton.Cont.t => Right (fn (x : 'a) => MLton.Cont.throw (cont, Left x)))
```

これを使って何かプログラムを書いてみましょう。ん〜〜、

1. 文字列型について排中律を呼び出して、
    1. `Left` に包まれた文字列が返ってきたらその文字列を印字、
    2. `Right` に包まれた「文字列の否定」 `string -> void` が返ってきたら
        1. まず `Hello ` と印字してから
        2. ` world!\n` という文字列について「文字列の否定」を呼び出す

という処理はどうでしょうか。

```sml
val () = case excludedMiddle () of
             Left (x : string) => print x
           | Right (y : string not) =>
                 (print "Hello "; absurd (y "world!\n"))
```

実行結果：

```
Hello world!
```

# call/ccを使って実装する二重否定除去

`excludedMiddle` を使うと `('a not) not -> 'a` という型の関数も実装できます。この際に追加でcall/ccを使う必要はありません（直観主義論理の上で排中律と二重否定除去は同値なので）。

あるいは、先に二重否定除去をcall/ccを使って実装し、それを使って排中律を実装することも考えられます。

この辺は読者への演習問題とします。

---

ところで「古典論理の推論規則をプログラミング言語で実装する」って何なんですかね？そういう型を持った関数を書くだけなら無限ループなり例外送出なりでできてしまうので、少なくともそういうやつは除外しないと意味のある話にならなさそうな気がします。
文字列の配列を HDF5 ファイルに保存する

配列、テンソル状の数値データを保存するのに便利は HDF5. 一緒に文字列の配列を保存したい時もある。

Python3 で文字列は UTF8 でエンコーディングされていると仮定する（Python2 は別）`dtype=str` の `np.array` では保存できないので注意、

```python
import h5py

a = np.array(['hello', 'world'], 
             dtype=h5py.special_dtype(vlen=str))

with h5py.File('try_string.h5', 'w') as f:
    f['s'] = a
```

`try_string.h5` は任意のファイル名、`s` は任意のデータ名。

読み込む場合はいつもどおり

```python
with h5py.File('try_string.h5', 'r') as f:
    b = f['s'][:]

type(b), type(b[0])  # => (numpy.ndarray, str)
```

http://docs.h5py.org/en/stable/strings.html
【Android】SQLCipher3からSQLCipher4へのマイグレーション方法

今日、仕事でAndroidのSQLCipher3からSQLCipher4へのアップデートを行いました。
今回アップデートするにあたって日本語のサイトが少なかったので書いておきます。

[公式サイト](https://www.zetetic.net/blog/2018/11/30/sqlcipher-400-release/)に書いてある通り、今回はメジャーアップデートで以前のバージョンのものを使う際はマイグレーション処理をしないといけないらしい。


記録として軽く書いておきます、今回は[こちらのサイト](https://discuss.zetetic.net/t/migrating-from-sqlcipher-3-5-1-to-4-1-3-in-android/3652)を参考にしました。
こちらのサイトには下記のコードを実装してもうまくいかないとのことでした。

```java

public class DatabaseMigrator {

    static public void checkAndMigrateDatabase(Context context, String databaseName, String password) {

        String path = context.getDatabasePath(databaseName).getPath();

        SQLiteDatabaseHook hook = new SQLiteDatabaseHook() {
            @Override
            public void postKey(SQLiteDatabase database) {

                Cursor c = database.rawQuery("PRAGMA cipher_migrate", null);

                Boolean migrationOccurred = false;

                if (c.getCount() == 1) {
                    c.moveToFirst();
                    String selection = c.getString(0);

                    migrationOccurred = selection.equals("0");

                    print("selection: " + selection);
                }

                c.close();

                print("migrationOccurred: " + migrationOccurred);
            }

            @Override
            public void preKey(SQLiteDatabase database) { }
        };

        SQLiteDatabase database = null;

        try {
            database = SQLiteDatabase.openDatabase(path, password, null, 0, hook);
        }
        catch (Exception e) {
            print("Exception while trying to open db: " + e);
        }

        if (database != null) {

            database.close();
        }
    }
}
```
実際に質問者と同じコードを試した結果、下記のエラーが出ました。（質問者の事象とは異なります。）

```
10920-10920/sample.sqlciphermigrationsample E/SQLiteOpenHelper: Couldn't open test_database.db for writing (will try read-only):
    net.sqlcipher.database.SQLiteException: file is not a database: , while compiling: select count(*) from sqlite_master;
```

<br/ >

色々調べた結果、下記のコードを

```java

database = SQLiteDatabase.openDatabase(path, password, null, 0, hook);
```

下記のコードに変更したら動きました！

```java

database = SQLiteDatabase.openOrCreateDatabase(path, password, null, hook);
```

実際に試したコード全体は後ほど[github](https://github.com/s-nkmr/android-sqlcipher_migration_sample)にあげています🙃。
A-FRAME: 狩猟解禁！AR

本日、とある勉強会に参加させて頂いたのですが、そこでARの話題が上がりました。
そういえば、A-FRAMEでもARができたなと思い、軽く何か作ってみる事にしました。

さて、何を作ろうか、、、
いつもこの問題に悩みます。

その時、テレビで景気のいい曲が流れました。
モンスターハンター：アイスボーンのCMです。

おもむろにsketchfabを検索すると、3Dモデルがありました。
[Monster Hunter dragon - Pobabyさん作](https://sketchfab.com/3d-models/monster-hunter-dragon-3efb94ddc21341808adcd33ba8507eb0)
テクスチャもあるとなお良かったのですが、まあいいでしょう。

コードはこちらを参考にさせて頂きました。
[AframeとAR.jsでマーカーレスwebAR](https://qiita.com/Damien/items/adca96f2e0b559e5671b)

[できました。](https://k38.github.io/aframe/ar_dragon/)

こういう事が簡単にできるなんて、すごい世の中です。
部屋の中でスクリーンショットを撮るのも恥ずかしいので、外で撮りましょう。

ﾊﾟｼｬﾘ
![IMG_6910.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/b0961b92-ab3a-5ebb-eb2f-c5680a6aa3f3.png)

画面の下に `trackingBackend` や `markersAreaEnabled` が表示されるので、こちらを参考にして消しています。
[How to remove the alerts 'trackingBackend' and 'markersAreaEnabled' with AR.js?](https://stackoverflow.com/questions/46486978/how-to-remove-the-alerts-trackingbackend-and-markersareaenabled-with-ar-js)

35GBのアップデートファイルのダウンロードが終わりました。
ひと狩り行ってきます。
autoを使おーと

# はじめに
C++を好きでちょこちょこプログラミングしており、ゆるやかに上達しています。
最初は意義がわからなかった`auto`について、使いたくなった理由を書きます。

# `auto`って？
型を推定してくれるヤツ

# なんで`auto`を使うの？
コードが短くなる
そもそも型名が存在しない（ラムダ式など）

# どんな時に使うの？
これまでに自分が使うべきだと思ったのが同じものを準備する時。
使用例を以下２つ挙げる。

## 1. 同じ型の変数を代入する場合
```cpp:sample_not_auto
vector<int> v1 = {1, 2, 3, 4, 5};
vector<int> v2 = v1;
```

下のように`auto`を使うことができる。

```cpp:sample_auto
vector<int> v1 = {1, 2, 3, 4, 5};
auto v2 = v1;
```

ちょっと短くなった。
ただの`vector`ではこの程度の省略であるが、OSSなどのとても長い型を用いる時にはかなりの文字省略になる。

## 2. 型の記述を右辺に持っていきたい場合

```cpp:sample_not_auto
vector<vector<int>> vv (10, vector<int>(10, 5));
```

こちらで`auto`を用いると、

```cpp:sample_auto
auto vv = vector<vector<int>>(10, vector<int>(10, 5));
```

こちらは短くなるというよりは、型を右辺のみに書くことができるので、後から見返しやすい。
ここではあまり嬉しくないが、OSSなどで見られるような<font color="Red">非常に長い型では威力を発揮</font>する。

## 3. ヘルパ関数を用いる場合
存在は知っていて、使う場面に出くわしていないので、使用例は割愛するが、型推論補助というのがある(気が向いたら記載します)。

## 4. 型推論補助を用いる場合
`auto`に似ているが少し違うとのこと。
以下のようにすると、

```cpp:deduction_guide
vector v = {1, 2, 3};
```
とすると`vector<int>`に推論される。

# 注意点
あくまで、右辺値を左辺値に代入する際に型を推定するので、`右辺から型がわからないもの`は使用できないことに注意。

# おわりに
使った方が見やすくなるとは思っていつつ。`auto`がたくさん並んでいるとよくわからなくなってしまうので、好みで使っています。
PCLを使用するときはどうしても型が長くなりがちなので、積極的に使っている。
【PHP】foreach, array_map, array_walkの処理速度比較 forとwhileのおまけあり

# はじめに

夜ふとarray_mapのことを考えていたら、眠れなくなったのでサクッと試した結果

# PCスペック

- macOS Mojave
- 2.3 GHz Intel Core i5
- メモリ16GB

# 方法

- loop.phpとmap.phpとwalk.phpを用意
- 0から999999の100万の配列を用意し、累乗したものを入れ直す
- １０回ずつ実行し、平均を出す

```
$ php loop.php
```

のような形で実行し、処理速度を出す

# ソースコード

```loop.php
<?php

$start = microtime(true);

foreach ($arr = range(0, 999999) as $key => $value) {
    $arr[$key] = $value**2;
}

$end = microtime(true) - $start;
echo "{$end} 秒";

```

```map.php
<?php

$start = microtime(true);

$arr = array_map(function($i){ return $i**2;}, range(0,999999));

$end = microtime(true) - $start;
echo "{$end} 秒";
```

```walk.php
<?php

$start = microtime(true);

array_walk($arr = range(0, 999999), function(&$i){ return $i**2;});

$end = microtime(true) - $start;
echo "{$end} 秒";
```

# 結果

|         | loop          | map           | walk         |
|---------|---------------|---------------|--------------|
| 1       | 0.06867098808 | 0.07462501526 | 0.1094799042 |
| 2       | 0.06750392914 | 0.07323098183 | 0.1181879044 |
| 3       | 0.06451797485 | 0.07551503181 | 0.1073791981 |
| 4       | 0.06446099281 | 0.08033800125 | 0.1189579964 |
| 5       | 0.06456112862 | 0.0758960247  | 0.1152040958 |
| 6       | 0.06685209274 | 0.07563400269 | 0.106719017  |
| 7       | 0.07046103477 | 0.07318592072 | 0.1079549789 |
| 8       | 0.06416606903 | 0.07384204865 | 0.1147558689 |
| 9       | 0.06298303604 | 0.07454109192 | 0.1074810028 |
| 10      | 0.0647149086  | 0.07654190063 | 0.1151940823 |
| average | 0.06588921547 | 0.07533500195 | 0.1121314049 |

# 所感

foreachが一番早いのか...という感想
個人的には、array_mapとかarray_mapの方が好きなんだけど、array_walkとforeachの差がすごい。
単純な処理だと対して変わらなそうだが、中でごにょごにょしたりするとキツそう。
個人的にはぱっと見の可読性はforeachはいいが、スマートな関数達の方が好みだから状況によって使い分けます。

# おまけ

```for.php
<?php

$start = microtime(true);

for ($i=0; $i < 1000000; $i++) { 
    $arr[] = $i ** 2;
}

$end = microtime(true) - $start;
echo "{$end} 秒";
```


だいたい0.042~0.043秒くらい。

```while.php
<?php

$start = microtime(true);

$i = 0;
while ($i < 1000000) {
    $arr[] = $i ** 2;
    $i++;
}

$end = microtime(true) - $start;
echo "{$end} 秒";
```
だいたい0.041~0.042秒くらい。

配列操作ではないので、実プロダクトでの応用は効かないが、この処理だとforとwhileがほぼ同じくらいで一番早かった。
macのローカルでIEの動作確認をする feat. VirtualBox

:::note warn
IEはEoLとなり、本記事は役目を終えました。
:::

フロントエンド界隈では悪名高いInternet Explorer、なんと[2025年までサポートされ](https://www.atmarkit.co.jp/ait/articles/1503/11/news134.html)ます[^1]。
最近だとWebサービスのサポートから外されることも増えてきている気がしますが、そうでないところも多いでしょう。

macで開発しているとネイティブでIEが使えないので、VirtualBoxを使ってローカルで動作確認する環境を整えましょう。
ゲストであるVM上のWindows 8.1/10のIE11から、ホストであるmacのlocalhostに繋いで動作検証できるようにします。

## やること
1. VirtualBoxを入れる
2. Microsoft謹製IE検証用のVMイメージをダウンロードする
3. VMを立てる
4. VM上のIEから `10.0.2.2` にアクセスする

## VirtualBoxのインストール
```sh
brew cask install virtualbox
```
homebrew caskを知らないひとはぐぐってください。

## IE検証用のVMをダウンロードする
[Free Virtual Machines from IE8 to MS Edge - Microsoft Edge Development](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/)
任意のVMと、プラットフォームは"VirtualBox"を選び、ダウンロードします。
IE11/Win8.1だと7GBとかあるのでお茶でも飲みながら待ちます。
Windows10は"MS Edge"と書いてありますが、IE11も使えます。こっちの方がよいかも。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260566/e88fb96b-6489-cd24-158e-6f5ed415a88a.png)

### The Unarchiverのインストール(入れてないひと)
落ちてくるzipファイルはmacの標準だと解凍できないので、対応しているソフトを入れます。
そうしろってそのページに書いてあります。

```sh
brew cask install the-unarchiver
``` 

### 解凍してVM起動

The Unarchiverで解凍します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260566/e702c1bb-b638-3067-be35-06ba02a62393.png)

できたファイルをダブルクリックして「インポート」をクリックするだけでセットアップされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260566/4e889450-8626-82d2-b35f-bd173a6228fe.png)

ダブルクリックすると起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260566/462945f5-f3ea-13b0-2bda-52a422a03dfe.png)

## VMのIEからmacのローカルホストへアクセスする
VirtualBoxのデフォルト機能で、ゲストOSで `10.0.2.2` にアクセスするとホストOSのlocalhostに繋がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260566/efd8e8df-ecb1-32ef-8b20-fce1c7d5d080.png)
デフォルトだと時刻大西洋時間だったりキーボードがUS配列だったりするので、日本仕様に変更する場合は、がんばってください。応援しています。

## おわり
IEを使うのをやめましょう。
IEのサポートをやめましょう。


[^1]: Windows 10の場合。Windows Server 2016の場合は2027年までサポートされます:innocent:
laravelのApp\Exception\Handlerのrenderを安易に弄るな

laravel 5.0以降の話です。

laravelには`App\Exception\Handler.php`がありますね
アプリケーション全体の例外を扱うクラスです。

https://github.com/laravel/laravel/blob/master/app/Exceptions/Handler.php#L47-L50

```php
    /**
     * Render an exception into an HTTP response.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Exception  $exception
     * @return \Illuminate\Http\Response
     */
    public function render($request, Exception $exception)
    {
        return parent::render($request, $exception);
    }
```


## 結論
このrender関数を弄るときは、この`parent::render`を握りつぶさないようにしましょう

ifを挟んでなにか特別な処理をするときは、自作の例外クラスを扱うなど、明らかに`parent::render`側に渡さなくていい処理を引っ掛けるにとどめましょう。

```php
if( $exception instanceof SomeCustomExceptionYouDefined) {
  // return view what you want to show when your exception happens
}

return parent::render($requext, $exception);
```

こんな感じで。
さもなくばフレームワークが行う処理が実行されません。

## この関数で何が起きているのか

`parent::render`を呼んでいるということは、このクラスの継承元のクラスを呼んでいるわけで、そこでフレームワーク側の処理を行っています。

具体的にはここですね。　https://github.com/laravel/framework/blob/6.x/src/Illuminate/Foundation/Exceptions/Handler.php#L165-L193

つまり、if文でこの関数に処理を書くならば、書き方を間違えればフレームワーク側の処理が実行されなくなることを意味します。

実は、

- authの失敗
- フォームのバリデーションエラー
- 他にもRenderable例外の処理など

などもExceptionとしてthrowされ、この`parent::render`でハンドリングされます。

つまり、フォームのバリデーションなどわりと日常的に使うの機能に関しても、このparent::renderの関数の中でその失敗時のリダイレクト処理を担っています。

たまたま私が関わっているプロジェクトで、ここに`return response()->view('hoge/404')`のように書いて、parent::renderを呼んでいないものがありました。

おそらく、なにかうまく行かなかったときは404の画面を出したかったのでしょう。


## エラー画面を扱いたいときは
https://laravel.com/docs/master/errors#custom-http-error-pages
公式が述べています。
`resources/views/errors/$status_code.balde.php`の形でファイルを置いて対処しましょう。
ドキュメントのみでの確認ですが、5.0以降はこれが使えます。

また、公式のドキュメントは、これ以外の方法は指示してくれていません。(見落としがあればぜひ教えて下さい！）

特定のステータスコードだけでではなくまとめて扱いたいなら、以下が参考になるでしょう。
https://qiita.com/M_Ishikawa/items/1f0d72fc93286109464e

しかし、親クラスをoverrideする際は、自分で何をしているのかを把握すべきです。
結局の所、公式のドキュメントが指示しないことをやるなら、フレームワークのソースコードを理解しないと手を付けるべきではありません。



## まとめ
公式のドキュメントも読もう
https://laravel.com/docs/master/errors

---

ところで、フォームの失敗までもが例外としてthrowされて、この`parent::render`関数内で処理をするのはちょっとおかしい気がします。
アプリケーション全体の失敗と言えるようなものがここにまで到達すべきな気がしますが、みなさんはどう思われますか？
【最新Mac版】PhpStormで始める美しいコードのすすめ auto-format編

## はじめに
こんな人を対象に 'auto-format' をご紹介します

- PhpStormを使っているけど、まだあまり機能を使いこなせていない。

- PHPを現場で使用していて、初歩的な指摘を受けてしまう

- コードのインデントがガタガタになる 

普段、gitにpushする時、コード整形していると思いますが
スペースが入ったり、インデントがずれていたりして結構時間がかかります
そんな現場目で見て、手で修正してをしている人が完全に自動化できる方法です。



|Key  |記号  |
|---|---|
|Shift  |⇧  |
|Command  |⌘  |
|Control  |^  |
|option  |⌥  |

※ちなみに、Macのややこしい記号一覧まとめておきました


## 準備
``` =consol:動作環境
PhpStorm:2019.02
macOS:10.14.6
```

始めるにあたって、すでにフォーマットを使っている人もいると思います

```=edit:format-shortcut-key
⌥ + ⌘　+ L
```

このコマンドを編集画面で実行すると、
瞬く間に、ガタガタのコードが整形されていきます。

##### 余談
ただ、これを毎回実行するのも実際手間で
細かい値の調整をしていると、saveだけして
formatをし忘れている。というケースが現場ではあとを絶ちません。

すると、レビューの時にみるのが億劫になってしまうものに。。。
動作問題なさそうだけど、この型定義前後のスペースきになるーとか。。。


### さて、設定開始
早速、PhpStormを使って'auto-format'をしていきましょう
結論から言うとMacro設定を行います

## 自動化設定
1. PhpStorm起動
2. 設定(preferences `⌘+,`)を起動
3. saveショートカット変更

一旦`⌘+S`で設定されているものを別のキーに割り当てます
今回は、`^+S`あたりで良いでしょう

設定から
Keymapを選び、検索窓で'save'を検索します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458788/83259dc4-44ea-5f00-6700-ec7ea72a7644.png)

そして'save All'右クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458788/ce1605da-108b-1078-bf46-55d249c8e7fc.png)


- Remove `⌘+S`で一旦取り除き
- add Keyboard Shortcut　で`^+S`に割り当てましょう
- Applyで設定を保存します。

これで、いよいよマクロを割り当てます

4.Macro設定
上部メニューバーの'Edit > Macro > start Macro Recording'を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458788/f7214059-d56c-fc66-1924-14daa3cfd40f.png)

Macroに設定を覚えさすため
先ほど設定したコマンド達を実行します。

1. formatを実行

```=edit:format-shortcut-key
⌥ + ⌘　+ L
```

2.先ほど設定した、saveを実行

```=edit:format-shortcut-key
^ + S
```

そして、再度メニューへ
今度は先ほどのメニューがこのように変わっているはずです。
上部メニューバーの'Edit > Macro > stop Macro Recording'を選択

選択すると、ポップアップでこのような画面が出てきます
Macroの名前は'format&save'などで良いでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458788/93694b73-1728-e7f3-3f63-11831d8144f0.png)

5. Macroにショートカットを設定します

再び設定`⌘+,`を開き、Keymapを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458788/d19197a3-dc25-e537-9739-d51951fdbbff.png)

先ほど設定したMacroが増えているので、右クリックで

- add Keyboard Shortcut `⌘+S`設定
- Applyで設定を適用

 以上で、設定は完了です



## まとめ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458788/d1494881-536e-50b6-af02-ca015fef05b8.png)

こんなガタガタなコードでも
↓
`⌘+S`で
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458788/c5c42984-1e47-dc79-cbf9-87627f7b4c04.png)

簡単にformatとsaveが実行できるようになりました！

より良い、PHPライフを
単一顔画像からの 3D 復元 Deep3DFaceReconstruction を試す(2019 年 9 月 7 日)

Accurate 3D Face Reconstruction with Weakly-Supervised Learning: From Single Image to Image Set
https://github.com/microsoft/Deep3DFaceReconstruction

を試します.

少し古いですが, 既存の他のアルゴリズムとかはこちらを参照ください.

単一画像からの最新ディープラーニング顔アルゴリズムを試す(2017 年 7 月 14 日時点)
https://qiita.com/syoyo/items/5277906d29b2dd49e3a2

## 準備

* Basel Face Model 2009(BFM)
* Expression Basis
* pre-trained model

のデータが必要になります. Basel Face Model については, 利用規約(商用利用 NG など)に同意して登録することで, ファイルのダウンロードが可能になります.

Expression Basis なども, 商用利用 NG にっていますので注意ください.

あとは readme.md にある通りにセットアップするだけです.

## 動作

TensorFlow r1.14 + GPU(`pip install tensorflow-gpu`. NVIDIA GPU) で動作確認しました.
だいたい標準的なライブラリ(e.g. scipy)を使っていますので, python 環境が整備されていればハマるところはなしに `demo.py` が動きます.

生成された .obj を meshlab で開き, うまく推論できているのを確認しました.

![deep3d-face.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36275/af5af8fd-8f03-245d-4286-928aea4df3db.png)

Voila!

## 考察

詳細は論文にありますが, ネットワーク自体はあまり特殊なものではなく, ResNet をベースにしているため, tflite に変換して動くのを確認しました(近いうちにコード公開予定).
また, ROCm TensorFlow でも動く(学習できる)ものと思われます.

### 顔領域検出(landmark 検出)

任意画像から形状復元するためには, facial landmark 5 点を使って顔領域を crop し, network に与えています.

論文では,

How far are we from solving the 2D & 3D Face Alignment problem? (and a dataset of 230,000 3D facial landmarks)
https://github.com/1adrianb/2D-and-3D-face-alignment

https://github.com/1adrianb/face-alignment
(pytorch 実装)

の landmark detector を使っています(そして, 検出された 68 点から代表となる 5 点を利用)

上のは torch or pytorch 実装になっていて, Deep3DFaceReconstruction(TensorFlow) と組み合わせて利用するには面倒ですね.

facial landmark 検出の TensorFlow/TFlite の実装を探すか,

あまり横顔になっていない場合, dlib の landmark 検出でも代用できるかと思います.

BlazeFace を使う手もあります.

https://sites.google.com/view/perception-cv4arvr/blazeface

https://github.com/google/mediapipe/tree/master/mediapipe/models#blazeface-face-detection-model

もしくはユーザに顔領域を指定してもらうか, でしょうか.

## TODO

* [x] tflite 化してモバイルで動かす
* [ ] Basel Face Model の依存性をなくして学習したい(FML: Face Model Learning from Video https://gvv.mpi-inf.mpg.de/projects/FML19/ あたりの手法を使うなど). 商用利用できるように(Basel Face Model のライセンスを買うという手もあるが)
React を Javascript で使ってみる

こんにちは
「[Node.jsもES2015も使わないReact入門](https://qiita.com/ShinyaKato/items/98be579f648d9ca0674a)」の記事を見つけたので、自分でもそっくり真似してみました。「±数字」の部分をクリックすると ```count``` の値が増減します。React Hooks を使っています。

<img width="196" alt="スクリーンショット 2019-09-07 0.56.36.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54617/d0d00932-8ff1-2ed6-0082-0e0a86d404a3.jpeg">

```react.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Minimal React</title>
  </head>
  <body>
    <div id="app"></app>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script>
let CounterApp = () => {
  let mySetCount = n => {
	let col = n>0?"blue":"red";
    return React.createElement("span", {
      style:{color:col, border:"1px solid " + col},
      onClick: () => setCount(count + n),
    }, (n>0?"+":"") + String(n))
  }
  const [count, setCount] = React.useState(0);
  return React.createElement("span", null,
    React.createElement("span", {style: {textDecoration: "underline"}}, "count: " + count),
    React.createElement("span", null, " ← "),
    mySetCount(2),
    mySetCount(1),
    mySetCount(-1),
    mySetCount(-2),
  )
}

var rootElement = React.createElement(CounterApp, null)
ReactDOM.render(rootElement, document.getElementById("app"))
    </script>
  </body>
</html>
```
Node.jsにおけるthisの値の違い

# はじめに
コードを書いている中で、 `this` を度々使っているでしょう。
そのときちゃんと `this` の値を意識できていますか？
その値の違いをまとめていきます。

## 参考資料
- [this - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this)
- [From function expressions to arrow functions](https://exploringjs.com/es6/ch_core-features.html#sec_from-func-expr-to-arrow-func)

# thisの値
### 無名関数内
thisの値はレシーバ（左辺）の親になる。 
もしもレシーバが存在しない場合は、グローバル（ `Object [global]` ）となる。

```main.js
function Test() {
  this.field = 'test';
};
Test.prototype.func = function() {
  console.log(this);
};

const test = new Test();
test.func();
```

```.sh
$ node ./main.js
Test { field: 'test' }
```

### アロー関数内
thisの値はその関数のスコープ内のthisと同じになる。
もしもグローバルスコープで宣言された場合は、空オブジェクト（ `{}` ）となる。

```main.js
function Test() {
  this.field = 'test';
};
Test.prototype.func = () => {
  console.log(this);
};

const test = new Test();
test.func();
```

```.sh
$ node ./main.js
{}
```

### クラスのメソッドの中で定義された関数内（ES2015以降の書き方）
無名関数で書いた場合、thisの値はクラスのメソッドの親のスコープとなり、 `undefined` が返る。
一方アロー関数で書いた場合、thisの値はクラスのメソッドのスコープとなり、 `Test` が返る。

```main.js
class Test {
  test() {
    this.one = '111';
    callback(function() {
      console.log('anonymous:', this);
    });
    callback(() => {
      console.log('arrow    :', this);
    });
  }
}

const test = new Test();
test.test();

function callback(func) {
  func();
}
```

```.sh
$ node ./main.js
anonymous: undefined
arrow    : Test { one: '111' }
```

### クラスのメソッドの中で定義された関数内（ES2015以前の書き方）
無名関数で書いた場合、thisの値はクラスのメソッドの親のスコープとなり、 `Object [global]` が返る。 **ES2015以降の書き方を使った場合とは異なる動作をする。**
一方アロー関数で書いた場合、thisの値はクラスのメソッドのスコープとなり、 `Test` が返る。

```main.js
function Test() {};

Test.prototype.test = function() {
  callback(function() {
    console.log('anonymous:', this);
  });
  callback(() => {
    console.log('arrow    :', this);
  });
};

const test = new Test();
test.test();

function callback(func) {
  func();
}
```

```.sh
$ node ./main.js
anonymous: Object [global] { ... }
arrow    : Test { one: '111' }
```

# おわりに
`this` の内容は、使う場所によって異なります。
そのため、動作をしっかりと押さえておかないと、正しく動作するプログラムを作れません。

よくあるケースとして、こんなものがあることでしょう。
無名関数で記述しているところを一斉にアロー関数に書き換えます。すると、動作しなくなりました。
こういう問題にぶち当たったときは、一度 `this` の値に注目してデバッグしてみてください。
GitHub Pagesを使用してポートフォリオを公開する

#はじめに
作成したポートフォリオをWebで公開するのに何がいいか探していた所、GitHub Pagesを使用した方法がGitHubの知識があれば良さそうだったのでポートフォリオの公開に使用する事に決めました。

#使用方法
GitHubの＋の部分を押し、new repositoryを選択する
<img width="1440" alt="スクリーンショット 2019-09-06 23.51.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435517/c8c7a645-57b6-a83e-035a-21c37afd01ba.png">

Repository nameに好きな名前を記述（今回はgithub-page）
Description (optional)は必要に応じて記述
入力が終了したらCreate repositoryを選択
<img width="1440" alt="スクリーンショット 2019-09-06 23.54.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435517/71bfe955-1e91-3bb7-1cb5-7bb5c9538e21.png">

#Webページの作成
クローンを作成する為URLのコピーをしておく
<img width="1440" alt="スクリーンショット 2019-09-07 0.01.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435517/3bdb67c4-5fcf-6b59-f410-996ae98a47c9.png">

```
$ cd 任意のディレクトリ
$ git clone 先程コピーしたGitHubのURL
```
ターミナルでやる方法もありますが、今回はリモートの方でpushを行ったのでそちらの方法で
Addを選択し、Add Existing Repositoryを選択

<img width="849" alt="スクリーンショット 2019-09-07 0.08.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435517/a8691051-8cd7-4fb2-5c79-6af1012e57af.png">

<img width="571" alt="スクリーンショット 2019-09-07 0.08.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435517/307f0444-9055-d0e5-9e77-088c30b83858.png">


先ほど作成したクローンをChooseで開き、Add Repositoryを選択
後はVS Code等使用しHTMLファイルを作成したり、作成したのがあればこのリポジトリにコピーなどしてcommit、pushしてやればOKです。

<img width="664" alt="スクリーンショット 2019-09-07 0.11.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435517/dcc24765-697c-6587-4f6b-2513c90c27f5.png">

#Webページの有効方法
GitHubのページにいき、Settingsを選択する。
<img width="1440" alt="スクリーンショット 2019-09-07 0.16.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435517/6d50a4fb-9d31-d5eb-6d81-9a21437031a0.png">

GitHub Pages内のNoneを選択し、master branchを選択する。

<img width="1440" alt="スクリーンショット 2019-09-07 0.17.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435517/b96b4be8-693a-27c6-14d0-0f99f1387ec9.png">

手順が正しければURLが表示され、公開する事が出来るようになります。

#まとめ

慣れれば思ったより簡単に出来ました。色々方法はありますが、今回はこの方法で試しました。GitHub上で修正も出来るので本当便利だと思います。

以下、参考にした資料です。
https://qiita.com/0084ken/items/4acdc7a00bf2e6f41f94
Python をはじめから覚える時ハマったポイントの覚書

最近 Selenium を触るために、Python を覚えているのですが、学んでいて、**ハマってしまったポイント**を覚書しておきます。
（ハマったポイントがまたあれば随時書き足していきたいと思います。）

## 落１. 配列（list）は、任意の数値インデックスに要素を加えられない
Pythonでは、任意の数値インデックスに要素を加えられませんでした。
（直近良く触っていたPHPでは任意のインデックスに要素を加えられますが、**これはPHPのarray が全て連想配列となっている**からなので、別の言語ではあまり一般的ではないのかもしれません。）

**PHPの場合**

```php
<?php
$mylist = []
$mylist[12] = 'dummyData' // index:12の要素に値を設定する。
```
**Pythonの場合**

```py
mylist = list()
for i in range(0, 13):
    mylist.insert(i, None) # listのindexの初期化
mylist[12] = 'dummyData' # index:12の要素に値を設定する。
```

**20190907 01:13 追記** コメントを頂きまして、下記のコードでlist の初期化ができるようでした。（配列の初期化の仕方も演算子を使えるのがPythonっぽいなと思いました。）

```py
mylist = [None] * 13 # listのindexの初期化
mylist[12] = 'dummyData' # index:12の要素に値を設定する。
```


## 落２. 事象：配列の最終列が参照できない
配列の最終列が参照できないという事象が起こったのですが、原因は**listのカラム数を初期化していた処理で `for i in range(0, Max) `がMaxを含めないことが原因でした**。

```py
mylist = list()
maxColNo = 6
for i in range(0, maxColNo):
    mylist.insert(i, None) #初期化 mylist[0]-mylist[5]ができる

mylist[maxColNo] = 'dummyData' # mylist[6] が存在せず落ちていた。
```


## 落３. 親クラスのプライベートメソッドを継承できない
python は親クラスのプライベートメソッドは継承出来ませんでした。

```py
class Foo(object)
    def __getFoo(self):
        return 'Foo'

class BarFoo(Foo):
    def getBarFoo(self)
        return self.__getFoo() + 'bar' # Error
                                       # self.__getFoo()はプライベートなメソッドのため呼び出せない。 
```
**追記20190907 01:24** こちらコメントを頂きまして、厳密には**`__getFoo`という`Foo`クラスのメソッドは**、子クラス`BarFoo`に読み込まれた際、**マングリングという処理で、`_BarFoo__getFoo`というメソッドで子クラスに渡るため、子クラスから`self.__getFoo`の参照ができなくなる**こと理解いたしました。
https://docs.python.org/ja/3/tutorial/classes.html#private-variables

以上です。
ZIP Tile - BBC microbit用 8x8 フルカラーLEDマトリックス を買って試してみた

ZIP Tile - BBC microbit用 8x8 フルカラーLEDマトリックスを買いました。
[スイッチサイエンス ZIP Tile - BBC microbit用 8x8 フルカラーLEDマトリックス](https://www.switch-science.com/catalog/5398/)

とりあえず取り付けの図・・・わかりづらいｗ
![P_20190906_230619.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/a7baf0e5-e291-44fc-5f2b-5a0662263e2e.jpeg)

で、使ってみますか。

まず、利用するためにはMakeCode for micro:bitで拡張機能をクリックしてKitronikで検索すると以下のスクリーンショットのように「Kitronik-zip-tile」が出てくるのでクリックしてプロジェクトに追加します。
ちなみに、バージョンは0.0.5。バージョン1ではないんですね・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/5835b2f0-b74e-16ac-a65c-b4078446f505.png)

で、メソッドがわからないと使えませんね。
ブロックでやったほうが楽なんでしょうが、僕はコードで書きたい。
というわけで、使い方のサンプルはGutHubに書いてありますね。
[KitronikLtd/pxt-kitronik-zip-tile](https://github.com/KitronikLtd/pxt-kitronik-zip-tile)

・・・ちょっとまて、GitHubのサンプルだとエラーになるんだがｗ

と言い訳でデータシートを見てみる
[5645-zip-tile-microbit-datasheet.pdf](https://www.kitronik.co.uk/pdf/5645-zip-tile-microbit-datasheet.pdf)

```javascript:GitHubのサンプル
tile = Kitronik_Zip_Tile.createZIPTileDisplay(8, 8, Kitronik_Zip_Tile.UBitLocations.Standard)
```

```javascript:データシートのサンプルのブロックを見た結果
tile = Kitronik_Zip_Tile.createZIPTileDisplay(1, 1, Kitronik_Zip_Tile.UBitLocations.Visible)
```

一目瞭然なんですけど、まずcreateZIPTileDisplayの第1引数と第2引数はタイルの数っぽいですね。
サンプルはLEDの数を指定してるっぽい。

で、第3引数はStandardになってますが、そんなもんありません。
ソース見てもありません。
ただし、コメントはStandardとか書いてある・・・

で、動くサンプルソースはこんな感じ

```javascript:
let tile = Kitronik_Zip_Tile.createZIPTileDisplay(1, 1, Kitronik_Zip_Tile.UBitLocations.Visible);
basic.forever(function () {
    tile.scrollText(
        "Hello world",
        Kitronik_Zip_Tile.TextDirection.Left,
        60,
        Kitronik_Zip_Tile.TextStyle.None,
        Kitronik_Zip_Tile.colors(ZipLedColors.Blue),
        Kitronik_Zip_Tile.colors(ZipLedColors.Blue)
    )
})
```
スクロール早かったのと赤いLEDは目が痛くなったので、ちょと変えてますが、動いてます。
しかし、すげー明るいｗ

![P_20190907_002033.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/0e9d82cd-ac56-673a-6924-67657ff4f5a9.jpeg)

これで何か出して、ingressでアノマリーとかFSとかMDで使いたい！
(背中にLEDモニタ背負ってる人たちに対抗したい！ｗ)

UBitLocations。VisibleをHiddenに変えてみたら・・・文字の向きが上下反転した・・・
これ、UpとBottomが正しい名前じゃないのか？

英語できないけど、ライブラリのビルド方法がわかったら、forkして直してプルリクエスト送ってみようかなぁ・・・・ｗ

とりあえず、これ使う人、ドキュメントとGitHubのサンプルと、ライブラリのソースとコメントは疑ったほうがいいです。
目に見える動きを信じるんだ！
(まだバージョン0.0.5だしねｗ)

しかし、これ、スイッチサイエンス側、試してるのかなぁ・・・
試してないんだろうなぁ・・・


追記
電源を撮る場合、ZIP Tile側からとらないと光りません。
なので、ZIP Tile側に電源をつてけ、からPCに接続しないと、実行してもなにもでねーし！ってことになります。
自分用Djangoの勉強のお纏め

#経緯
あることで自分はDjangoに触れる機会があって、実際に触ってみるときっつい。
そこで勧められたakiyoko氏の現場で使えるDjangoの教科書で勉強している。
何かしらアウトプットしたいので、本日からここにて簡単な纏めを書くことにする。

#Djangoってなぁに。
ジャンゴと読みます。
Pythonを使ってwebサービスを構築するためのフレームワーク。結構日本でも海外でも使われている。インスタとか。

#Djangoの使い方
##プロジェクトを作ってみよう
```
django-admin startproject hoge
```
これを使うとhogeというベースディレクトリを作ってその配下にmanage.pyとhoge/というディレクトリが出来上がる。しかしながら、ベースディレクトリhogeの配下に同じ名前のhogeディレクトリが出来上がるのはなんかややこしや。このややこしい奴をakiyokoさんの本では設定ディレクトリと呼んでいるので私もこれに従う。なので、上記のコマンドの解釈は、

```
django-admin startproject [ベースディレクトリ配下に出来上がる任意の設定ディレクトリ名] [その設定ディレクトリはどこに作るか]
```

である。実は第二引数として、設定ディレクトリの場所を指定できるのだ。なので、このややこしい構成は

```
mkdir hoge
cd hoge
django-adimin startproject config .
```

とすれば、ベースディレクトリhogeの配下にconfigという設定ファイルが出来上がる。
Amazon RDSのスナップショットを別アカウントで復元したい

同じAWSアカウントではなく、別アカウントでRDSのスナップショットからDBを復元するやり方です
Aアカウントにあるスナップショットを、Bアカウント上にコピーして復元します

##①スナップショットを作業用にコピー
そのまま使わずに、念の為作業用にスナップショットをコピーします。
元になっているAアカウントで作業します。
※いらない！という場合はこの工程は飛ばしてください
１.RDS > スナップショット > 任意のスナップショットを選択する
２.スナップショットのアクションで「スナップショットのコピー」
３.だいたいこんな感じで設定します
　ソースDBスナップショット：コピー元になっているか確認
　送信先リージョン：Asia Pacific（Tokyo)※別リージョンの場合は適宜指定してください
　新しいDBスナップショット識別子：わかりやすい名前がいいでしょう。手動コピーしたことがわかるように「handcopy」とつけるなど

##②BアカウントのIDを調べます
Bアカウントに共有するためには、BアカウントのIDが必要になるので調べます
１.別ブラウザなどでBアカウントにログインしましょう
２.右上のサポート＞サポートセンターを開く
３.アカウント番号が右上に表示されるので控えておきましょう

##③Bアカウントにスナップショットを共有
またAアカウントで作業します
１.①で作成したスナップショットを	指定して「スナップショットの共有」を選択します
２.だいたいこんな感じで設定します
　DBスナップショット：①のものになっているか確認
　DBスナップショットの可視性：プライベート
　AWSアカウントID：②で調べたBのアカウントID
３.上記を指定したら、追加→保存です

##④Bアカウントでスナップショット復元
Bアカウントにログインします
１.RDS > スナップショット > コピーされたスナップショットを選択
　※作成時間とかで確認してください
　※共有ファイルでフィルタリングしてから選択すると見つけやすいです
２．スナップショットのアクション　＞　スナップショットの復元
３．以下の通り設定
　　DBエンジン：aurora
　　DBインスタンスのクラス：お好きなキャパで
　　マルチAZ配置：必要がなければ不要です
　　DBスナップショットID：そのまま
　　DBインスタンス識別子：お好きな名前で
　　パブリックアクセス：はい（はいにしないと、navicatなどのツールから繋げられません）
　　アベイラビリティゾーン：設定なし
　　データベースのポート：3306
　　暗号を有効化：いいえ
　　マイナーバージョン自動アップグレード：いいえ
４．復元実行

以上で復元できますので、あとはセキュリティグループなどの設定変更をしてください
RedshiftでCOPYコマンドを試してみた

# はじめに
この記事は勉強用として試したことまとめたものです。
今回はS3にCSVファイルを配置してRedshiftにCOPYを試してみました。

# Redshiftとは
* AWSが提供するDWHのマネージドサービスである。
* PostgreSQLをベースに開発されたもの。
* 集約・分析に最適化されたサービスである。
* クラスターを起動している間は課金が発生。現時点でRedshiftに停止機能はないため、<br>スナップショットを取得し利用するときにスナップショットから復元する必要あり。
* 自動起動停止はLambdaで実装かなと。
* 公式ドキュメント<br>
https://aws.amazon.com/jp/redshift/ 

# 特徴
* 集約、分析に特化しているためデータの格納方式が列指向である。
* MPP（Massively Parallel Processing：超並列処理）である。
* S3からCOPYコマンドでデータを簡単にロードできる。
* また、S3のデータを参照して分析クエリを発行するRedshift Spectrumという機能もある。

# 事前準備
* Redshiftにデータを投入するために事前にテーブルを作成する。
* SQL Workbench/J といったクライアントツールを利用してもいいが、クエリエディタが便利なのでこちらで実行する。

```sql
create table pokemon(
  no INT,
  name VARCHAR(128),
  type1 VARCHAR(32),
  type2 VARCHAR(32),
  nomal_characteristic1 VARCHAR(48),
  nomal_characteristic2 VARCHAR(48),
  dream_characteristic2 VARCHAR(48),
  hp INT,
  attack INT,
  defense INT,
  special_attack INT,
  special_defense INT,
  speed INT,
  sum INT
) 
```
* 正常終了を確認。
<img width="960" alt="Redshift_CreateTable.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466400/56bc6ae3-3553-ffe8-7c1a-b3eaeb1d7a14.png">


* 投入データをS3に配置する。今回は以下データをS3に配置。

```
図鑑番号,ポケモン名,タイプ１,タイプ２,通常特性１,通常特性２,夢特性,HP,こうげき,ぼうぎょ,とくこう,とくぼう,すばやさ,合計
1,フシギダネ,くさ,どく,しんりょく,,ようりょくそ,45,49,49,65,65,45,318
2,フシギソウ,くさ,どく,しんりょく,,ようりょくそ,60,62,63,80,80,60,405
3,フシギバナ,くさ,どく,しんりょく,,ようりょくそ,80,82,83,100,100,80,525
4,ヒトカゲ,ほのお,,もうか,,サンパワー,39,52,43,60,50,65,309
5,リザード,ほのお,,もうか,,サンパワー,58,64,58,80,65,80,405
6,リザードン,ほのお,ひこう,もうか,,サンパワー,78,84,78,109,85,100,534
7,ゼニガメ,みず,,げきりゅう,,あめうけざら,44,48,65,50,64,43,314
8,カメール,みず,,げきりゅう,,あめうけざら,59,63,80,65,80,58,405
9,カメックス,みず,,げきりゅう,,あめうけざら,79,83,100,85,105,78,530

・・・（省略）・・・

```

# データロード
* バケットとIAMロールを指定してコマンドを実行する。

```sql
copy pokemon from 's3://<バケット名>/pokemon_data/' CSV
iam_role 'arn:aws:iam::111111111111:role/myRedshiftRole'
region 'ap-northeast-1'
IGNOREHEADER 1;
```

* 正常終了を確認。<br>
<img width="640" alt="Redshift_COPY.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466400/4e00808c-9918-24ff-551b-ff4d7011a6e8.png">

# データ確認
* SELECTで確認してみる。

```sql
select * from public."pokemon"limit 10;
```
* 確認できた。
<img width="787" alt="Redshift_SELECT.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466400/5b130eaf-771b-89c8-ab72-21fb38519023.png">

# まとめ
* COPYコマンドでデータ投入することが多かったのでメモ代わりに投稿。
* 型とかヘッダースキップなどを忘れると失敗する。
* ```Check 'stl_load_errors' system table for details.```と表示されたら素直にstl_load_errorsを確認。<br>
https://docs.aws.amazon.com/ja_jp/redshift/latest/dg/r_Load_Error_Reference.html

# 参考
* https://dev.classmethod.jp/cloud/aws/import-data-to-redshift-via-s3/
* https://dev.classmethod.jp/cloud/aws/amazon-redshift-iam-role/