OmniAICreator/Qiita-1.07M huggingface dataset:
Rails5.2.3+Webpackerで`error Command "webpack" not found.`

# 概要

`bin/webpack`を実行すると`error Command "webpack" not found.`で怒られる。

```
> bin/webpack
yarn run v1.15.2
error Command "webpack" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

# tl;dr

```
error compression-webpack-plugin@2.0.0: The engine "node" is incompatible with this module. Expected version ">= 6.9.0 <7.0.0 || >= 8.9.0". Got "8.1.0"
error Found incompatible module
```

上記のようなエラーが`webpacker::install`コマンドで出ている場合は使用しているnodeのバージョンが対象外なので、エラーに記載されている、

```
6.9.0以上7.0.0未満
もしくは8.9.0以上
```

の中に収まるバージョンのnodeをインストールしてもう一度`rails webpacker:install`を実行する。


# 前提

## 環境

```
> ruby -v
ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-darwin18]

> rails -v
Rails 5.2.3

> node -v
v8.1.0

> yarn -v
1.15.2
```

## インストール手順

```ruby:Gemfile
gem "webpacker", github: "rails/webpacker"
```

```
> bundle
> bin/rails webpacker:install
# 〜省略〜
Webpacker successfully installed 🎉 🍰

> ./bin/webpack
yarn run v1.15.2
error Command "webpack" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
# 💥💥💥
```

# 調査

はて...
installコマンドで全部必要なもの入れてくれるんじゃないの？

installコマンドのログで怪しいところを見てみると...

## error

```
error compression-webpack-plugin@2.0.0: The engine "node" is incompatible with this module. Expected version ">= 6.9.0 <7.0.0 || >= 8.9.0". Got "8.1.0"
error Found incompatible module
```

`Expected version ">= 6.9.0 <7.0.0 || >= 8.9.0". Got "8.1.0"`

マジか。その謎の溝はなんなんだろう。8.1.0は対象外😇

## warning

```
warning "webpack-dev-server > webpack-dev-middleware@3.6.2" has unmet peer dependency "webpack@^4.0.0".
warning " > webpack-dev-server@3.3.1" has unmet peer dependency "webpack@^4.0.0".
```

`has unmet peer dependency "webpack@^4.0.0"`

必要な`"webpack@^4.0.0"`が無いと出ている。

# 対応

## 1. 一旦Webpackerのインストールで出来た修正とファイルを全削除。

```
# 他にdiffが無い状態だったので
> git add .
> git commit -m xxx
> git reset --hard head^

# gitの管理外のnode_modulesも一応全部削除
> rm -rf ./node_modules/*

```

## 2. nodeの12.1.0をインストール

12.1.0である必要はないけど、8.9.0以上だったら良いっぽいので、せっかくなので最新をインストール。

```
> nodenv install 12.1.0
> echo 12.1.0 > .node-version
> npm install -g yarn
```

## 3. 再度Webpackerのインストール

```
# Gemfileに追加して
> bundle
> rails webpacker:install
```

今度はエラーは出なかったが、unmet dependencyのwarningは変わらずに出ている🤔

```
> ./bin/webpack
# 成功した
```

通った🔥

なんかwarningは出てるけど後々対応していく。
Serverless VPC accessを使って、マネージドサービスからVPC内へアクセスする

# 概要

AppEngineやCloudFunctionsなどのサーバーレス環境からVPC内のコンピューティングリソースへアクセするためのサービス。
主にMemoryStore(Redis)やCloudSQLにアクセスするときに使う。
2019年5月3日時点ではCloudRunはまだ対応していないっぽかった。

# 概要図

<img width="685" alt="スクリーンショット 2019-05-03 19.02.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306826/aba9ca64-53f1-a5bc-1401-90e7602b7678.png">

出典：https://cloud.google.com/vpc/docs/configure-serverless-vpc-access?hl=ja

# セットアップ

###VPCネットワークにあるServerless VPC accessを選択
<img width="754" alt="スクリーンショット 2019-05-03 18.34.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306826/c4a4402b-0669-76af-9fde-b7338471e1bf.png">

###APIを有効にする
<img width="918" alt="スクリーンショット 2019-05-03 18.34.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306826/df15463c-ae4e-f862-8ac2-7914d5e25b90.png">

###コネクタを作成を押下
<img width="1085" alt="スクリーンショット 2019-05-03 18.35.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306826/e75b0515-9984-3292-e608-79d8d131de3e.png">

###コネクタ情報を入力
<img width="798" alt="スクリーンショット 2019-05-03 18.36.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306826/0efc3f1a-9c8b-7734-7736-75f80d7361d5.png">

IP範囲は自分のVPC全体で使われていないIP範囲でないといけない。
リージョンはus-central1のみ。

## CloudFunctionsからの接続

### 権限設定

CloudFunctionsのサービスアカウントにProject > Editorの権限を付与。

### デプロイ

デプロイ時に--vpc-connectorで作成したコネクタを指定する。

```
gcloud beta functions deploy FUNCTION_NAME \
--vpc-connector projects/PROJECT_ID/locations/REGION/connectors/CONNECTOR_NAME \
FLAGS...
```

### 早く、CloudRunも対応してほしい。
ウィンドウサイズ別flexオーダーcss (uikit準拠)

uikitでflexのorderが無いので作りました。また、ウィンドウサイズ別でも対応しています。

普通のcssでも使えると思います。

````scss:_flex_order.scss
$flex_order: -1, 0, 1, 2, 3, 4;
$window_size_array: (
        \@s: 640px,
        \@m: 960px,
        \@l: 1200px,
        \@xl: 1600px,
);

@each $order in $flex_order {
   .uk-flex-order-#{$order} {
      order: $order;
   }
}

@each $window_size, $window_px in $window_size_array {
   @media (min-width: $window_px) {
      @each $order in $flex_order {
         .uk-flex-order-#{$order}#{$window_size} {
            order: $order;
         }
      }
   }
}

````

````css:flex_order.css
.uk-flex-order--1 {
  order: -1; }

.uk-flex-order-0 {
  order: 0; }

.uk-flex-order-1 {
  order: 1; }

.uk-flex-order-2 {
  order: 2; }

.uk-flex-order-3 {
  order: 3; }

.uk-flex-order-4 {
  order: 4; }

@media (min-width: 640px) {
  .uk-flex-order--1\@s {
    order: -1; }

  .uk-flex-order-0\@s {
    order: 0; }

  .uk-flex-order-1\@s {
    order: 1; }

  .uk-flex-order-2\@s {
    order: 2; }

  .uk-flex-order-3\@s {
    order: 3; }

  .uk-flex-order-4\@s {
    order: 4; } }
@media (min-width: 960px) {
  .uk-flex-order--1\@m {
    order: -1; }

  .uk-flex-order-0\@m {
    order: 0; }

  .uk-flex-order-1\@m {
    order: 1; }

  .uk-flex-order-2\@m {
    order: 2; }

  .uk-flex-order-3\@m {
    order: 3; }

  .uk-flex-order-4\@m {
    order: 4; } }
@media (min-width: 1200px) {
  .uk-flex-order--1\@l {
    order: -1; }

  .uk-flex-order-0\@l {
    order: 0; }

  .uk-flex-order-1\@l {
    order: 1; }

  .uk-flex-order-2\@l {
    order: 2; }

  .uk-flex-order-3\@l {
    order: 3; }

  .uk-flex-order-4\@l {
    order: 4; } }
@media (min-width: 1600px) {
  .uk-flex-order--1\@xl {
    order: -1; }

  .uk-flex-order-0\@xl {
    order: 0; }

  .uk-flex-order-1\@xl {
    order: 1; }

  .uk-flex-order-2\@xl {
    order: 2; }

  .uk-flex-order-3\@xl {
    order: 3; }

  .uk-flex-order-4\@xl {
    order: 4; } }

````
36日目。Rubyのクラスとメソッドの使い方。

今日は一週間ぶりにProgateを開きました。
まずは前回までの復習です。

RubyⅠ(10分)
RubyⅡ(14分)
RubyⅢ(9分)

若干忘れてましたが、なんとか思い出しました！
ではRubyⅣクラスとメソッドです。

###クラスを作る
```ruby
Class Menu
end
```
###インスタンス変数を作る
```ruby
Class Menu
  attr_accessor :name
  attr_accessor :price
end
```
attr_accessorって、なんて読むんだろう？ アトリアクセソーかな？
なんで`attr_accessor`で追加できるんだろう。謎。


###インスタンスの生成
```ruby
menu1=Menu.new
````
###インスタンス変数の使い方
```ruby
menu1.price = 800
````
###複数のインスタンス
````ruby
menu1=Menu.new
menu2=Menu.new
menu3=Menu.new
こんな感じでどんどんふやせる。
````
###クラスの中でメソッドを定義
できる。ある程度まとめた方が便利なんだろうな。
インスタンスメソッドという。ややこしい。

###インスタンスメソッドの中でreturnする
putsもreturnも使える。

###メソッドの中のインスタンス変数
自分自身に設定した値を見るには`self`を使う

```ruby
self.変数
```
ややっこしいんだけど、インスタンス変数を呼ぶ、＝ `self.変数`
「 Aに対してBメソッドを呼び出して戻り値を出力 」
これは `puts A.B` 何回も出てくるよ。ややっこしい！

###initializeメソッド
インスタンスを生成したとき実行されるメソッド

###ファイルを分割する
①区切りのいいところでファイルを分ける
②require ＜なにがし＞で呼び出す

###コンソールから入力を受け取る
①gets.chompを実行、入力待機状態になる
②変数 = gets.chomp で入力された内容を変数で受け取れる
※数値の場合は'gets.chomp.to_i'とする
これも読み方がわからない。ゲッツチョップ、ゲッツチョップトォーアイ？？？

###完成！
ファイルを分割してメソッドでインスタンスで頭がこんがらがってますがなんとかゴールできました！
(所要時間 １時間)

###追記） Ruby語の読み方
コメントいただきました！

```
> attr_accessorって、なんて読むんだろう？ アトリアクセソーかな？

正式な呼び方もしくは広く通用している読み方があるのかどうか私は知りませんが，attr は attribute（属性）から来ているのでしょう。
「アトリビュート・アクセッサー」とかでいいんじゃないですかね。
```

```
> gets.chomp、gets.chomp.to_i。これも読み方がわからない。
　ゲッツチョップ、ゲッツチョップトォーアイ？？？

gets は「ゲット・ストリング」だと長いので，私は「ゲット・エス」かなあ。
同じく puts は「プット・エス」。
(中略）
いろんな方のご意見が聞いてみたい。
```
Using Amazon Elastic Container Registry (ECR) as soon as possible anyway.

### Create an image you want.

```
$ mkdir docker-php && cd docker-php
```

```
$ vim index.php
```

```php:index.php
<?php echo "Hello, world."; ?>
```

```
$ vim Dockerfile
```

```dockerfile:Dockerfile
FROM php:7-apache
COPY index.php /var/www/html/
```

```
$ docker build -t php .
```

```
$ docker images 
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
php                 latest              cba780f28f8b        52 seconds ago      378MB
php                 7-apache            1dffbbe4a5d3        3 weeks ago         378MB
```


### Install AWS CLI to use ECR.

```
$ curl "https://bootstrap.pypa.io/get-pip.py" -o "get-pip.py"
$ sudo python get-pip.py
$ sudo pip install awscli
$ rm -rf get-pip.py
```

```
$ aws --version
aws-cli/1.16.150 Python/2.7.13 Darwin/17.5.0 botocore/1.12.140
```

### Create IAM (If you don't have it.)

1. Sign in or create an account on [AWS](https://console.aws.amazon.com/console/home).
2. Create IAM user
3. Choose "User" at left side.
4. Enter name that you like and check "access via program".
5. Attache "AmazonEC2ContainerRegistryFullAccess"
6. Skip tagging.
7. Confirm your information.
8. Done

### Apply your information using AWS CLI.

```
$ aws configure
AWS Access Key ID [None]: ****************** [Enter you Access Key ID]
AWS Secret Access Key [None]: ****************** [Enter your Secret Access Key]
Default region name [None]: ap-northeast-1
Default output format [None]: json
```

You can check your info this command.

```
$ aws configure list
```

### Create repository on ECR

Access to ECR -> Amazon ECR -> Repositories.

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256447/85976e83-0c88-8a72-5801-64a921d6e62a.png)

Enter "php" (in here) as repository name.

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256447/2655f262-2021-b19f-b879-8f6661c400b1.png)

Done.

### Push to ECR from local image.

#### Log in to AWS

```
$ (aws ecr get-login --no-include-email --region ap-northeast-1)
docker login -u AWS -p ....
```

```
$ docker login -u AWS -p ....
...
Login Succeeded
```

#### push to your ECR repository.

Use your id instead of ＊＊＊＊＊＊＊＊＊＊＊＊.

```
$ docker tag php:latest ＊＊＊＊＊＊＊＊＊＊＊＊.dkr.ecr.ap-northeast-1.amazonaws.com/php:latest
$ docker push ＊＊＊＊＊＊＊＊＊＊＊＊.dkr.ecr.ap-northeast-1.amazonaws.com/php:latest
```

If you'd like to update your image, tagging and push again as same tag.
継承について解説！

# はじめに
- 継承について本やネットの情報から調べて理解したことをまとめました。
- もし、書いていることに何か間違いがある場合はご指摘いただけると嬉しいです。

# 継承とは
- すでに定義されているクラスを元に、新しく拡張したクラスを作る仕組みのこと。
- 継承元のクラスを「親クラス（スーパークラス）」。
- 継承してできる新しいクラスを「子クラス（サブクラス）」と呼びます。

## 継承で出来ること
- 親クラス（継承元）で定義したプロパティやメソッドを子クラス（継承してできる新しいクラス）で定義しなくても使うことができます。（親クラスから子クラスに引き継ぐイメージ）
 
## 継承で出来ないこと
- 子クラスで定義したメソッドやプロパティは親クラスから呼び出せない。

## 継承の書き方

```php:親クラス（スーパークラス）
<?php
class 親クラス名
{

}
?>
```

```php:子クラス（サブクラス）
<?php
class 子クラス名 extends 親クラス名
{

}
?>
```


##  コード例
- 継承の具体例を簡単な内容を元に紹介します。


### 親クラス
- 親クラスを定義します

```php:product.php
<?php

class Product
{
	private $name;

	public function getName(){
		return $this->name; 
	}

	public function setName($name){
		$this->name = $name;
	}
}

?>
```
### 子クラス
- 子クラスを定義します

```php:kitchenProduct.php
<?php

require_once("product.php");

class KitchenProduct extends Product{
	private $price;

	public function getPrice(){
		return $this->price; 
	}

	public function setPrice($price){
		$this->price = $price;
	}
}


$kitchen = new KitchenProduct();

$kitchen->setName("テーブル");

$kitchen->setPrice(3000);

echo $kitchen->getName() . "の金額は" . $kitchen->getPrice() . "円です";

?>
```

```php:kitchenProduct.php（実行結果）
テーブルの金額は3000円です
```


### 解説
- `kitchenProduct.php`には定義されていない`getName()メソッド`や`setName()メソッド`を使うことができました。
- このように親クラスで定義したプロパティやメソッドを子クラスで定義しなくても使うことができます。

### 【補足】require_onceとは
- require_onceを使うと、別のphpファイルを読み込むことができます。
- 読み込んだファイルで定義されている内容を、記述したファイル内で使うことができます。

#### require_onceの書き方
```php:
require("ファイルパス");
```
mount コマンドを使わないでマウント一覧を確認する方法

# 背景
普段、マウント状況を確認するのに素の `mount` コマンドを一発かまして確認していたのですが、どうもこの結果と実際が一致しないとういう状況に遭遇しました。

シェルスクリプトの中でも使っているため、その信頼性が揺らぐことがあるならば少々問題では、ということでちょっと調べてみました。

※ CentOS6 系の環境で確認
※ 先に答えを言うと→ `cat /proc/mounts` 

# マウント、アンマウント実行時
実は、マウント(mount …)を実行した際に、 `/etc/mtab` というファイルに「～をマウントしてます」という情報を追記しています。
また、逆にアンマウント(umount …)した際には、 `/etc/mtab` から該当のマウント情報を削除しています。

で、 素の `mount` コマンドを実行した際には、この `/etc/mtab` の内容を少々加工して表示するようになっています。

```bash
$ cat /etc/mtab
/dev/sda3 / ext4 rw 0 0
proc /proc proc rw 0 0
sysfs /sys sysfs rw 0 0
devpts /dev/pts devpts rw,gid=5,mode=620 0 0
tmpfs /dev/shm tmpfs rw 0 0
/dev/sda1 /boot ext4 rw 0 0
$ mount
/dev/sda3 on / type ext4 (rw)
proc on /proc type proc (rw)
sysfs on /sys type sysfs (rw)
devpts on /dev/pts type devpts (rw,gid=5,mode=620)
tmpfs on /dev/shm type tmpfs (rw)
/dev/sda1 on /boot type ext4 (rw)
```

# マウントしていたものにアクセスできなくなったとき
例えば、NFS でマウントしていたものの、接続先のサーバが落ちてマウントされていない状態になった場合、`umount …` を実行していないので `/etc/mtab` に残ったままになってしまいます。

では、 `umount …` を実行することで削除されるかというと、実際にはマウント状態になっていないので `umount: …: 見つかりません` と拒否られてしまいます。

※ NFS のマウントオプションにより挙動が変わる可能性があるかもしれません

# 再度  mount コマンドを発行するも…
再度 NFS でマウントした場合には、すでに `/etc/mtab` に記載されており、対象へアクセスが可能になるだけで `/etc/mtab` は更新されないだろう、と思いきや、新たにマウント情報が追記されてしまいます。

この状態で `umount …` を発行した際にすべてきれいになるかというと、これまた期待を裏切られて新たに追記されたものだけが削除されてしまい、いつまでも整合性がとれない事態に陥ってしまいます(´・ω・`)。

# さらば、/etc/mtab よ！

`/proc/mounts`
【参考】https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/6/html/deployment_guide/s2-proc-mounts)

```bash
$ cat /proc/mounts
rootfs / rootfs rw 0 0
proc /proc proc rw,relatime 0 0
sysfs /sys sysfs rw,relatime 0 0
devtmpfs /dev devtmpfs rw,relatime,size=759524k,nr_inodes=189881,mode=755 0 0
devpts /dev/pts devpts rw,relatime,gid=5,mode=620,ptmxmode=000 0 0
tmpfs /dev/shm tmpfs rw,relatime 0 0
/dev/sda3 / ext4 rw,relatime,barrier=1,data=ordered 0 0
/proc/bus/usb /proc/bus/usb usbfs rw,relatime 0 0
/dev/sda1 /boot ext4 rw,relatime,barrier=1,data=ordered 0 0
```

`/etc/mtab` を加工してどうにかできないのものかと調べていたところ、この `/proc/mounts` がリアルタイムに現在のマウント情報を反映していることがわかったため、素の `mount` コマンドをたたくことでマウント一覧を確認する方法を手放すことにしました。

`/etc/mtab` を加工するまでもなかったですね。

また、不整合が発生する可能性があるなら、最初から `/etc/mtab` を更新しないよう `mount` コマンドの `-n` オプションを指定してマウントした方がいいのかもしれませんね。

```
$ man mount
…
 -n, --no-mtab
   Mount without writing in /etc/mtab.  This is necessary for example when /etc is on a read-only filesystem.
…
```
Mochaテスト実行方法



MochaはNode.jsで動く、JS用のテストフレームワーク。


"Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. Hosted on GitHub."
https://mochajs.org/

mochaのインストール

```
$ npm install mocha --save
```


ユニットテスト用のコード

```test.js
const assert = require('assert');
const ganache = require('ganache-cli');
const Web3 = require('web3');

//Instantiate Web3
const web3 = new Web3(ganache.provider());

 class Car {
   park(){
     return 'stopped';
   }

   drive(){
     return 'vroom';
   }
 }


 describe('Car',()=>{
  it('park should return string', ()=>{
    
    //instantiate 
    const car = new Car();

    //assert value 
    assert.equal(car.park(), 'stopped');
  });
 });
```

package.jsonを適宜変更する。test:"mocha"へ。

```package.json
{
  "name": "inbox-ethereumtest1905",
  "version": "1.0.0",
  "description": "",
  "main": "compile.js",
  "directories": {
    "test": "test"
  },
  "dependencies": {
    "ganache-cli": "^6.4.3",
    "solc": "^0.4.25",
    "web3": "^1.0.0-beta.35"
  },
  "devDependencies": {
    "mocha": "^6.1.4"
  },
  "scripts": {
    "test": "mocha"
  },

```

```
$ npm run test

> inbox-ethereumtest1905@1.0.0 test /ethereum/inbox-ethereumtest1905
> mocha

  Car
    ✓ park should return string


  1 passing (17ms)

```
NLP（自然言語処理）ライブラリGiNZAとJanomeを比較してみた。

# はじめに

つい先日GiNZAというNLPライブラリが公開されたので、既存のライブラリと性能を比較してみました。

比較対象はJanome。

# サンプルテキスト

比較に用いた文字列はWikipediaにある原子力発電のページ

https://ja.wikipedia.org/wiki/原子力発電

上記のページでページ全体を選択してコピペして利用しました。

# Janome

https://mocobeta.github.io/janome/

インストールは以下のコマンドを実行。

```
pip install janome
```

テストコードは以下のとおり。

```py:
from time import time

txt = """

原子力発電
出典: フリー百科事典『ウィキペディア（Wikipedia）』
ナビゲーションに移動検索に移動
〜中略〜
最終更新 2019年4月30日 (火) 14:38 （日時は個人設定で未設定ならばUTC）。
テキストはクリエイティブ・コモンズ 表示-継承ライセンスの下で利用可能です。追加の条件が適用される場合があります。詳細は利用規約を参照してください。
プライバシー・ポリシーウィキペディアについて免責事項開発者Cookieに関する声明モバイルビュー
Wikimedia Foundation Powered by MediaWiki
"""

t1 = time()

from janome.tokenizer import Tokenizer

t2 = time()

t = Tokenizer()
tokens = t.tokenize(txt.replace('　',' '))

t_janome = ""
i = 0

for token in tokens:
    if token.surface != "\n":
        t_janome += " " + token.surface
        i += 1

print(i, time() - t1, time() - t2)
```

実行結果は以下のとおり。

```
27935, 3.574777126312256, 3.574641227722168
```

検出した形態素は27,935個で、経過時間は3.57秒。

# GiNZA

https://megagonlabs.github.io/ginza/

インストールは以下のコマンドを実行。

```
pip install "https://github.com/megagonlabs/ginza/releases/download/v1.0.2/ja_ginza_nopn-1.0.2.tgz"
```

テストコードは以下のとおり。

```py:
from time import time

txt = """

原子力発電
出典: フリー百科事典『ウィキペディア（Wikipedia）』
ナビゲーションに移動検索に移動
〜中略〜
最終更新 2019年4月30日 (火) 14:38 （日時は個人設定で未設定ならばUTC）。
テキストはクリエイティブ・コモンズ 表示-継承ライセンスの下で利用可能です。追加の条件が適用される場合があります。詳細は利用規約を参照してください。
プライバシー・ポリシーウィキペディアについて免責事項開発者Cookieに関する声明モバイルビュー
Wikimedia Foundation Powered by MediaWiki
"""

t1 = time()

import spacy

nlp = spacy.load('ja_ginza_nopn')

t2 = time()

doc = nlp(txt)

t_ginza = ""
i = 0

for sent in doc.sents:
    
    for token in sent:
        
        if token.orth_ != "\n":
            t_ginza += " " + token.orth_
            i += 1
        
print(i, time() - t1, time() - t2)
```

実行結果は以下のとおり。

```
25665, 18.349574089050293, 17.297925233840942
```

検出した形態素は25,665個で、経過時間は18.34秒。

# 考察

圧倒的にJanomeが早いです。
ただ、単語の分析はGiNZAの方が良いような印象をうけました。

例えば、「経済産業省」という単語をJanomeは「経済 産業 省」と分けましたが、GiNZAは「経済産業省」という一つの単語として認識していました。

文章に依存する話ではありますが、目的に応じて使い分けると良いかなと感じます。

ということで、次は何するかな(^-^)
行列の式変形まとめ(Woodburyなど)

Woodburyの恒等式を始めとした、
「両辺におなじものかけて左辺をガチャガチャやったら右辺になる」
系の行列の式変形の備忘録。

順次追加予定。

# Woodburyの恒等式

```math
\begin{equation}
(A+B D C)^{-1}=A^{-1}-A^{-1} B\left(D^{-1}+C A^{-1} B\right)^{-1} C A^{-1}
\end{equation}

```

特に$D=I$の時

```math
\begin{equation}
(A+B C)^{-1}=A^{-1}-A^{-1} B\left(I+C A^{-1} B\right)^{-1} C A^{-1}
\end{equation}

```

# その他公式

```math
\begin{equation}
\left(P^{-1}+B^{\mathrm{T}} R^{-1} B\right)^{-1} B^{\mathrm{T}} R^{-1}=P B^{\mathrm{T}}\left(B P B^{\mathrm{T}}+R\right)^{-1}
\end{equation}


```

```math
\begin{equation}
(I+A B)^{-1} A=A(I+B A)^{-1}
\end{equation}
```

```math
\begin{equation}
(A+B)^{-1}B = I - (A+B)^{-1}A
\end{equation}
```

特に$B=I$のとき

```math
\begin{equation}
(I+A)^{-1} = I - (I+A)^{-1}A
\end{equation}
```


# 参考URL
* <a href="https://mathtrain.jp/woodbury">逆行列の補助定理（Woodburyの恒等式） | 高校数学の美しい物語</a>
* [行列A\+BCDの逆行列を導出する](https://minus9d.hatenablog.com/entry/2014/07/28/213605)
* <a href="https://www.amazon.co.jp/%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E8%AA%8D%E8%AD%98%E3%81%A8%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92-%E4%B8%8A-C-M-%E3%83%93%E3%82%B7%E3%83%A7%E3%83%83%E3%83%97/dp/4621061224">パターン認識と機械学習 上</a>
MarkLogicのデータベース作成

概要
===
MarkLogicのインストールが完了したら、いよいよデータを置くデータベースの作成に入りましょう。

データベース周りの用語の解説
===
関連する代表的な用語を挙げます。表は上から順番に大きなまとまりと考えて下さい。また詳細は[MarkLogic社公式サイトのフォレストの説明](https://docs.marklogic.com/guide/admin/forests)も参照をお願いします。

| 用語 | 作成の必要性 | 説明 |
|---|---|---|
| データベース | あり | フォレスト群から成るデータの論理的な入れ物。索引はこの単位で設定する。 |
| フォレスト | あり | データが置かれるディレクトリの場所。1個のフォレスト内のサイズ・フラグメント数には上限があるほか、CPU数に基づく上限がある。詳細は[こちら](https://docs.marklogic.com/guide/cluster/scalability)。 |
| スタンド | なし | フォレスト内にデータ更新の度に自動的に生成されるフラグメントの集合。一定の更新が行われたタイミングで新旧のスタンドがマージされる。 |
| フラグメント | なし | 1個のデータ(XML/JSON/バイナリなど)から1個以上生成されるデータの最小単位。10～100KB位がちょうどよいサイズとされている。詳細は[こちら](https://docs.marklogic.com/guide/admin/fragments)。 |

フォレストの作成
===
まずフォレストの作成を行いましょう。管理者画面(ポート8001番)をインストール時に作成した管理者ユーザで開いて下さい。

<img width="591" alt="marklogic_admin.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277440/589450a9-0841-54e7-aacb-20103bff2c71.jpeg">

画面左側の一覧から「Forests」を選択します。デフォルトで作られているフォレストの一覧が表示されますが、その上部にある「Create」タブを選択すると新しいフォレストを作成する画面に入ります。

<img width="591" alt="marklogic_forest.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277440/6598c5b8-a8fc-8a22-409c-38cd7f4cbe11.jpeg">

ひとまず、以下のパラメータのみ意識すれば十分だと思います。

| 設定値 | 説明 |
|---|---|
| forest name | フォレストの名称は、データベースの役割・作成先の端末・作成順番などでルールを作っておいた方がよい |
| host | フォレストのディレクトリを作る端末名を選択する。クラスタ構成の場合は、選択肢が複数選べるようになる。 |
| data directory | フォレストが置かれるディレクトリを指定する。必ずMarkLogic(daemonユーザ)がアクセス可能な場所とすること。無記入の場合、比較的小さいインストール領域に作成される場合があるのでLinux版では必ず大きな領域を指定すること。 |
| large data directory | バイナリデータなど巨大なデータの配置場所の指定。特に要件が無ければdata directoryと同じでよい。 |

設定後に「ok」ボタンを押下すればフォレスト作成完了です。

データベースの作成
===
画面の左側から「Databases」を選択してみると、フォレスト作成の時と同様に作成済みのデータベースの一覧を見ることができます。「Create」タブを選択するとデータベース作成画面となります。

<img width="591" alt="marklogic_database.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277440/3ee7f770-fddf-9b92-bc77-c96aeea4af9b.jpeg">

基本的には、後で色々とパラメータを変更することはできるので、ここでは一番上の「database name」のみを記入して「ok」ボタン押下します。
すると「This database has no forests, select Database->Forests to attach a forest.」というメッセージが出た画面が出てきました。これはデータベースという形は出来たものの、実際にデータを入れるフォレストが存在しないことを知らせるものです。そこでリンクとなっている「Database->Forests」の部分を選択して、データベースとフォレストの紐づけ作業を行います。先程作成したフォレストを紐づけることとします。

<img width="400" alt="marklogic_forest_attached.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277440/5bc1e8fd-44be-9878-c00a-95f9714047ec.jpeg">

「attached」欄に紐づけ対象のフォレストを選択して「ok」ボタンを押せば、データベースの作成は完了です。

データベースのステータス確認
===
管理者画面からデータベースの状態を確認することができます。画面の左側の「Databases」から作成したばかりのEng_Databaseを選択するとパラメータ設定画面となります。仕様変更などで索引設定を変える場合などはこの画面から行います。「Status」タブを選択すれば、データベース内で行われている処理(例 マージや再索引)やデータベースサイズなどが確認できる画面となります。

<img width="550" alt="marklogic_database_status.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277440/bd897532-18b2-e246-cdf7-33d804fb4a9e.jpeg">

この一覧に、紐づけたフォレストがあることが確認できます。

雑感
===
インストールに続いてデータベースの作成を行いましたが、こちらもさして難しくはありませんでした。ただ大規模なシステムだとクラスタによるフォレストの分散配置やレプリケーション設定、要件に合わせた索引設定などが必要になりますのでデータベース設計のタイミングをしっかり取るようにすることをお勧めします。


------------------------------------------------------------------------
プロジェクトで用意しておくドキュメントとマニュアル一覧

## 記事起こしの背景

私は運用保守プロジェクトを担当している。一方

* (前後の経緯は割愛するが)ドキュメントとマニュアルがほぼ無い状態
* その為、記憶頼み・極端な属人化がプロジェクトで常態化
* 特に記憶頼みの仕事はミスを誘発している

で困っている。

* 問題意識はあるが、何から手を打つべきか分からない
* なので、まずは「何が揃っているべきか」を把握したい

の考えから掲題の下調べをした。

## 留意事項

後述の一覧は、参考文献(記事末尾より)を @ymatsukawa が解釈、意訳および現場向けに編集したものである。

2019/5 現在 Kindle Unlimited にて 0 円のため、余裕のある方は購入にて内容を確認されたい。

## 本題

### プロジェクトで用意しておくドキュメントとマニュアル一覧

```
* 市場向けドキュメント
  * 広告
  * よくあるお問い合わせ(FAQs)
  * 操作マニュアル
  * リリースノート
  * 障害レポート
* 企画書
  * 市場戦略を記載したドキュメント
* 要求書
  * 四半期 - 通期の要求一覧
* プロジェクト遂行ドキュメント
  * 要件一覧
  * プロジェクト計画
  * テスト計画
  * テストスクリプト・テスト実行方法
  * 技術仕様
  * テストケース
* 方針・手順書(ポリシー・マニュアル)
  * 基本操作手順書
  * 機器の運用方針・手順書
  * テスト方針・手順書
  * 開発方針・手順書
  * デプロイおよびリリース方針・手順書
  * 作業ワークフロー・作業指示書
* 導入教材
  * いわゆる引継用のドキュメント
```

### 各項目について、筆者なりの解説

筆者 = @ymatsukawa

#### 市場向けドキュメント

主に市場・顧客向けドキュメント。公式 Web ページ、ヘルプページなど公然に載せるもの。

内部組織向けにも「いつ何が起きたか」等を知る道具として使える。

```
  * 広告
  * よくあるお問い合わせ(FAQs)
  * 操作マニュアル
  * リリースノート
  * 障害レポート
```

#### 企画書

そう堅いものでなくても、例えば企画部・マーケティング部のメモ書きでも良い。

「市場動向解析より xxx の必要性が見られる。四半期中には yyy を市場投入し、その妥当性を確証取ってみたい」

といった感じのもの。これを参照できる事で「なぜそれをやるか」を把握できる。

#### 要求書

企画を基に要求を一覧化したもの。これから何をしていくか、いきたいかが記載されている。

「... を実現したい」という要求レベルであって、要件ではない。

要件は要求を漏れ分なく条件と制約で細分化したものである。

「... を実現したいという要求に対し、X という機能を設ける。X という機能は Y, Z というタイミングで実行され...」

という感じである。

#### プロジェクト遂行ドキュメント

管理者・開発者・運用者がプロジェクトを 1 から 10 まで遂行する為に必要なもの。

```
  * 要件一覧
  * プロジェクト計画
  * テスト計画
  * テストスクリプト・テスト実行方法
  * 技術仕様
  * テストケース
```

* 要件一覧にて、要求がどのように要件へ落とし込まれているか
* プロジェクト計画にて、要件はどのようにスケジュールされているか
* 要件を達成する為に、テスト計画は建てられているか
* テスト計画を完了する為に、テスト実行方法は書かれているか
* テスト実行時に必要な、技術仕様とテストケースは書かれているか

#### 方針・手順書(ポリシー・マニュアル)

管理者・開発者・運用者がプロジェクトをミスなく実施する為に必要なもの。

```
  * 基本操作手順書
  * 機器の運用方針・手順書
  * テスト方針・手順書
  * 開発方針・手順書
  * デプロイおよびリリース方針・手順書
  * 作業ワークフロー・作業指示書
```

**基本操作手順書**

ステージング環境、場合によってはリリース後の本番環境にて動作確認時に用いる。

**機器の運用方針・手順書**

開発機器であればネットワーク環境構築手順書(例. プロキシネットワーク)、

開発ツール以外で導入必須なソフトウェア(例. セキュリティソフト)の導入手順書など。

ステージング環境や本番環境であれば、メンテナンス時間やアクセス権限方針など。

**テスト方針・手順書**

テスト実施時のハードウェア、OS、付属機器、バージョン、選定されたテストケースを示した方針、および実施手順書。

テスト方針は「何を以ってテストとするかの決め」であり

テスト計画は人員配分、日程調整といった「どのようにテストを進めていくかの決め」である。

**開発方針・手順書**

環境構築方法、OSや開発用端末の制約方針、OSS 導入方針および静的解析ツールの導入手順など。

**デプロイおよびリリース方針・手順書**

ステージング環境および本番環境へのアクセス権限方針およびデプロイ・リリース手順。

ロールバック方針やアップデート方針も同様。

**作業ワークフローおよび作業指示書**

「誰が、いつまでに、誰に対して、何をどのような手順で実施すべきか」が示されたもの。

**導入教材**

引継時に手渡しできるもの。プロジェクトの全容を把握できる。

(ここまで挙げたドキュメント・マニュアルがリンクされていればよいかもしれない)

## 終わりに、その他

一覧は完全ではないと考えているので、各々の手元で適宜肉付けお願いします。

特に「技術仕様とは何なのか具体的に」への筆者回答は未回答とします。

書籍などを漁っていますが、考えがまとまっていないからです。

## 参考文献

* [Morgan, Kieran. Technical Writing Process: The simple, five-step guide that anyone can use to create technical documents such as user guides, manuals, and procedures . Better On Paper Publications. Kindle 版. ](https://www.amazon.co.jp/Technical-Writing-Process-five-step-procedures-ebook/dp/B00UA3YX46)
  * Chapter 1 - The Technical Writing Process
  * What type of documents do technical writers write?
  * Table 1: Types of documents written by technical writers
QMLのTextでレイアウトを調整する

Qt 5.11、5.12あたりの情報です。

Windows、Mac、Android、iOSで動作するQMLを書いていて、フォントの違いによるレイアウト調整が面倒だったのでメモを残しておきます。

#Textの枠の中央に文字を配置する
height、widthで設定した領域のうち、どこに文字を配置するかの指定方法。

```qml
Text {
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter
}
```
#Textの行間を調整する
以下の記述で、ピクセル数で行間を指定できます。

```qml
Text {
    lineHeightMode: Text.FixedHeight
    lineHeight: 20
}
```
それに対して、割合での行間指定方法。

```qml
Text {
    lineHeightMode: Text.ProportionalHeight //デフォルトなので省略可
    lineHeight: 1.8
}
```


#Textのトラッキング（文字間隔）
指定のピクセル数だけ、文字と文字の間隔があきます。マイナスだと狭まります。

```qml
Text {
    font.letterSpacing : 3
}
````

#Textの配置の調整にlineLaidOutを使う
テキストの１行ごとにx、y、width、heightを変更できます。
例えば2行目の幅を10ピクセルずつ狭めてテキストを配置するには、下記のようにします。

```qml
Text {
    onLineLaidOut: {
        if (line.number === 1)
        {
            line.x = line.x + 10
            line.width = line.width - 20
        }
    }
}
```
行ごとにx、y、width、heightを指定できるので、ボタンなどを避けて配置することが可能です。
行番号numberは0からはじまるので注意。
さらに、forceLayout()も併用すれば動的に変更できる…のかな。試してない。

#枠内に収まりきらなかったテキストをToolTipでホバー表示する
Textには、枠内にテキストが収まらなかった場合にtrueになる、truncatedというプロパティがあります。maximumLineCountかelideを設定することで、truncatedが有効になります。
同じく、MouseAreaのhoverEnabledをtrueにすることでcontainsMouseが有効になります。
上記の双方がtrueなら、ToolTipを表示させます。

```qml
Text {
    id: name
    wrapMode: Text.Wrap
    maximumLineCount: 1

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        ToolTip {
            visible: parent.containsMouse && name.truncated
            delay: 500
            text: name.text
            contentItem: Text { } //contentItemでTextをカスタマイズできる
            background: Rectangle { } //同じく背景も。
        }
    }
}
```
#qmlで使われるデフォルトのフォントを指定する
main関数で下記のように書くとデフォルトのフォントを指定できます。

```cpp
    QGuiApplication::setFont(QFont("Arial"));
```
QGuiApplicationのオブジェクトを生成する前に実行すると良いようです。
QGuiApplicationのコンストラクタで生成されるQFontが最初からsetFontで指定したフォントになるためです。（OSデフォのQFontが生成されない）
こんなんググるまでもないとか、勝手に決めつけるのはよくない。


```react
<Button title={"del"}/>
```

Warning: Failed prop type: The prop `onPress` is marked as required in `Button`, but its value is `undefined`.

はいはい、onPressがないのね。ググるまでもない。

```react
<Button title={"del"} onPress={this.delText(index)}/>
```
Warning: Failed prop type: The prop `onPress` is marked as required in `Button`, but its value is `undefined`.

はいはい、onPressがないの??

いや、あるし。スペルミスか？？

悩むこと15分。ようやくググる

https://stackoverflow.com/questions/51106427/failed-prop-type-the-prop-onpress-is-marked-as-required-in-button-but-its/51110894

>React removed "autobinding" in ES6 component classes.

>The code onPress={this.submithandler} could fail because it's not bound to anything.

>Solution : Bind in render()

>```
    onPress={this.submithandler.bind( this )} 
```

>Another Solution : Fat Arrow Class Methods

>```
        onPress={() => this.submithandler()} 
```

一瞬で解決する。早くググればよかった。
FacebookシェアにOGPが反映されない（Let's Encryptの中間証明書）

あるサイトにて、FacebookでのシェアのときにOGPが反映されないことがあり、いろいろ調べたのでメモ。

# SSL/TLS関連のエラー
SSL/TLSの設定にエラーがあると（一見するとちゃんとhttpsでアクセスできていたとしても）、シェア時にエラーになりOGPが反映されないらしい。
勉強を兼ねて自分でLet's EncryptでSSL/TLSを設定したサーバだったので、いろいろ不備があったらしい。

## 環境
- AWS EC2
- Amazon Linux
- Apache/2.4.39
- Let's Encrypt



# 対処内容

正直なところ、「こうやったらできた。」というだけで、すべて理解しているわけではないので注意。

## 関連するプログラムをアップデート
```shell
$ sudo yum update openssl
$ sudo yum update httpd
```

## 中間証明書
どうも中間証明書が設定されていないとだめ？っぽいエラーがでていたので、設定してみる。
ssl.confを開いて編集する。

```shell
$ sudo vi /etc/httpd/conf.d/ssl.conf
```

```ssl.conf
SSLCertificateChainFile /etc/letsencrypt/live/xxx.xxxxxx.xx/chain.pem
```
上記の場所を探してコメントアウトして `chain.pem` の場所を設定。
(xxx..のところは、SSLの対象ドメイン名と同名のディレクトリ）
自分の場合は、そのままコメントアウトすればOKでした。

上記を書き換えて、Apach再起動したら、ちゃんとシェアしたときにOGPが反映されるようになりました。

```
$ sudo service httpd reload
```

ただ、かなり手探りなのと知識不足も有り、これが正しい方向かはまだ不安があります。

# 参考サイト
- https://meteoricstream.com/tips_detail/44.html
- https://cspssl.jp/support/apache/config.php
- https://www.ssllabs.com/ssltest/
- https://developers.facebook.com/tools/debug/sharing/
Leetcode #93: Restore IP Addresses

An IP address contains four parts and each part is a number between 0 ~ 255

```swift
func restoreIpAddresses(_ s: String) -> [String] {
    if s.count < 4 {
        return []
    }
    var answer = [String]()
    helper(Array(s), 0, [], &answer)
    return answer
}

private func helper(_ s: [Character], _ startIndex: Int, _ ar: [String], _ answer: inout [String]) {
    if startIndex == s.count {
        if ar.count == 4 {
            answer += [ar.joined(separator: ".")]
        }
        return
    }
    if ar.count == 4 {
        return
    }
    if s[startIndex] == "0" {
        helper(s, startIndex + 1, ar + ["0"], &answer)
    } else {
        helper(s, startIndex + 1, ar + [String(s[startIndex])], &answer)
        if startIndex + 1 < s.count {
            helper(s, startIndex + 2, ar + [String(s[startIndex...(startIndex+1)])], &answer)
        }
        if startIndex + 2 < s.count {
            let tmp = String(s[startIndex...(startIndex+2)])
            if tmp < "256" {
                helper(s, startIndex + 3, ar + [tmp], &answer)
            }
        }
    }
}
```
なぜアルゴリズムの計算量オーダーにおいてlogが出てくるか？

#はじめに
計算量オーダーについてlogだけにフォーカスした記事が無かったので執筆に至ります。

#TL;DR
アルゴリズムの計算では、**検索範囲 = 2^(探索回数)**という場面がある。
その対数を取れば **log2 (検索範囲) = 探索回数** となるから。

#なぜなのか
***アルゴリズムの計算量においてO(logn)のもっとも有名な例の一つ***である、**二分探索**の例を取ってみよう。
ざっくり二分探索について説明しよう。ニ分探索というのは、私達の生活にも無意識に使われている。

例えば私達が分厚い辞書から「121ページ目を開け」と言われた場合、
私達は、1000ページある辞書なら500ページ目から開き、次はその前半の半分250ページ目を開けるだろう。この繰り返しで121ページ目にたどり着く。
このような***対象を二つに分ける探索、つまりこれがニ分探索である。***

詳しくは [アルゴリズムを勉強するなら二分探索から始めよう！ 『なっとく！アルゴリズム』より](https://codezine.jp/article/detail/9900?p=2)参照

実は、この二分探索の見方を変えると、***x回探索をした場合2^xの範囲探索できる***のです。

| 探索回数     |     検索範囲|
|:------------|------------:|
| 1           |            2| 
| 2           |            4|   
| 3           |            8| 
| 4           |           16|     
| 5           |           32|   
| 6           |           64| 
表1 二分探索の探索回数と検索範囲の関係

つまり、探索回数と検索範囲の関係は***検索範囲 = 2^(探索回数)***と記述できます。
***その対数を取ればlog2(検索範囲) = 探索回数*** となるためlogが出現してくるのです。

ここで、探索回数というのは計算量オーダーであり、検索範囲というのはデータ数nであるため、
***計算量オーダー = log2(n)***となるわけです。

ここでlog2というのは[底の変換公式](http://manapedia.jp/text/3143)で、(定数)*log(n)という形に変換できる。
計算量オーダーにおいて定数は無視できるので一般的には***O(log(n))**となるわけです。

以上のように、計算量オーダーのlogにおいて分からなくなる点が私的には二つあり、
***なぜlogが出てくるのか***というのと、***なぜ底が2で無いのか***というのがクリアになれば幸いです。
Solidity: AssertionError [ERR_ASSERTION]: Invalid callback specified.


Nodejsでsolcコンパイル時にエラーが発生
AssertionError [ERR_ASSERTION]: Invalid callback specified.

```
node compile.js

AssertionError [ERR_ASSERTION]: Invalid callback specified.
    at wrapCallback (/Users/hitoshimurakami/myApps/dapps/ethereum/inbox-ethereumtest1905/node_modules/solc/wrapper.js:16:5)
    at runWithReadCallback (/Users/hitoshimurakami/myApps/dapps/ethereum/inbox-ethereumtest1905/node_modules/solc/wrapper.js:42:26)
    at compileStandard (/Users/hitoshimurakami/myApps/dapps/ethereum/inbox-ethereumtest1905/node_modules/solc/wrapper.js:83:14)
    at Object.compileStandardWrapper (/Users/hitoshimurakami/myApps/dapps/ethereum/inbox-ethereumtest1905/node_modules/solc/wrapper.js:90:14)
    at Object.<anonymous> (/Users/hitoshimurakami/myApps/dapps/ethereum/inbox-ethereumtest1905/compile.js:9:18)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)

```


コンパイラのバージョンが違うので修正して直った

```
npm uninstall solc
npm install solc@0.4.25

```

参考URL）
https://stackoverflow.com/questions/53353167/npm-solc-assertionerror-err-assertion-invalid-callback-specified
htmを使ってMithrilのコンポーネントをJSXライクに記述する

[htm](https://github.com/developit/htm)というpreactの作者が開発したライブラリがあり、

これを使うと、Mithrilのコンポーネントを以下のように記述できます。

簡易的なUIを素早く作りたいときに便利そうです。

```javascript
import m from "https://raw.githack.com/MithrilJS/mithril.js/next/mithril.mjs";
import htm from "https://unpkg.com/htm?module";

const html = htm.bind(m);

const SearchInput = {
  view(vnode) {
    return html`
      <div class="search-input"> 
        <input class="search-input-text" type="search"></input>
        <button class="search-input-button" onclick=${vnode.attrs.search}>🔍</button>
      </div>
    `;
  }
};

const App = {
  view(vnode) {
    return html`
      <${SearchInput} search=${() => alert('hoge')}><//> 
    `;
  }
};

m.mount(document.body, App);
```

## babel-plugin-htm

[babel-plugin-htm](https://github.com/developit/htm/tree/master/packages/babel-plugin-htm)を使うと、

htmのシンタックスをhyperscriptの呼び出しに置き換えることができます。

Mithrilで利用する際は、以下のように設定を行っておく必要があります。

```json:.babelrc
{
  "plugins": [
    ["htm", {
      "pragma": "m"
    }]
  ]
}
```

先程のコードの場合は、以下のようにコンパイルされます。

```javascript
import m from "https://raw.githack.com/MithrilJS/mithril.js/next/mithril.mjs";
import htm from "https://unpkg.com/htm?module";
const html = htm.bind(m);

const SearchInput = {
  view(vnode) {
    return m("div", {
      class: "search-input"
    }, m("input", {
      class: "search-input-text",
      type: "search"
    }), m("button", {
      class: "search-input-button",
      onclick: vnode.attrs.search
    }, "\uD83D\uDD0D"));
  }

};
const App = {
  view(vnode) {
    return m(SearchInput, {
      search: () => alert('hoge')
    });
  }

};
m.mount(document.body, App);
```

## 備考

以下のバージョンで動作確認を行いました。

* htm: v2.1.1
* mithril: v2.0.0-rc4

## 参考

* https://github.com/developit/htm
* https://github.com/developit/htm/tree/master/packages/babel-plugin-htm
Railsのclass_methodsがやっていること

```ruby
module ModuleA
  extend ActiveSupport::Concern

  class_methods do
    def method_a
       puts "method_a"
    end
  end

end

class ClassA
  include ModuleA
end

ClassA.method_a #=> "method_a"
```

Moduleのメソッドをクラスメソッドとして使用できるようにするために、class_methodsを使う。
class_methodsで囲んだ箇所をActiveSupportのConcernがextendしてくれる。

class_methodsがないと‥

```ruby
module ModuleA
  
  def method_a
     puts "method_a"
  end

end

class ClassA
  include ModuleA
end

ClassA.method_a #=> "NoMethodError: undefined method `method_a' for ClassA:Class"
instance_a = ClassA.new
instance_a.method_a #=> "method_a"
```

ModuleAのメソッドはClassAのインスタンスメソッドになる。

ちなみに

```ruby
module ModuleA
  extend ActiveSupport::Concern

  class_methods do
    def self.method_a
      puts "self_method_a"
    end
  end
  
end

class ClassA
  include ModuleA
end
``` 
当たり前だが、ModuleAのself.method_aはあくまでもModuleAの特異メソッドだからClassAからもインスタンスからも呼び出すことはできない。
Create React App + TypeScriptでESLintとPrettierを使う＆Gitコミット時にチェックする

## Create React App + TypeScriptを作成

```console
npx create-react-app my-ts-app --typescript
cd my-ts-app
```

## ESLintとPrettierの設定

必要なパッケージをインストール。

```console
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
```

`.eslintrc.yml`を作成。

```yml
extends:
  - react-app
  - plugin:prettier/recommended
rules:
  prettier/prettier: # - error以下はお好みで
  - error
  - semi: false
    singleQuote: true
```

`package.json`の以下の部分を削除（上記`.eslintrc.yml`との重複を避けるため）

```diff
- "eslintConfig": {
-   "extends": "react-app"
- },
```

同じく`package.json`にESLintとfixのタスクを追加。

```diff
"scripts": {
+   "lint": "eslint './src/**/*.{ts,tsx}'",
+   "lint:fix": "eslint --fix './src/**/*.{ts,tsx}'"
}
```

Create React App + TypeScriptでESLintとPrettierを使うことができるようになりました。

## Gitコミット時にチェックする

必要なパッケージをインストール。

```console.log
yarn add -D pre-commit lint-staged && yarn add -D husky
```

`package.json`にコミット時のチェックを追加。

```diff
+ "husky": {
+   "hooks": {
+     "pre-commit": "lint-staged"
+   }
+ },
+ "lint-staged": {
+   "*.{ts,tsx}": [
+     "eslint './src/**/*.{ts,tsx}'"
+   ]
+ }
```

Gitコミット時に`eslint './src/**/*.{ts,tsx}'`が実行され、チェックしてくれます。

以上。
Djangoインストール時に、ModuleNotFoundErrorが起きる時の対処法

#はじめに
Djangoインストール時にModuleNotFoundErrorが起きた時に考えられる原因と対処法を説明します。

#開発環境
OS:macOS Mojave(10.14.4)
Django==2.1.7

ModuleNotFoundErrorが起きた時に考えられる原因はpythonが参照できるディレクトリにDjangoが存在しないことです。

まずは、以下の対話的コマンドでpython（ここではpython3）が参照可能なディレクトリを確認します。

```python
$ python3
Python 3.7.2 (default, Mar 18 2019, 17:25:47)
[Clang 10.0.0 (clang-1000.10.44.4)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> import sys
>>> print(sys.path)
['', '/Users/user/.pyenv/versions/3.7.2/lib/python37.zip', '/Users/user/.pyenv/versions/3.7.2/lib/python3.7', '/Users/user/.pyenv/versions/3.7.2/lib/python3.7/lib-dynload', '/Users/user/hoge/Django/hoge/fuga_venv/lib/python3.7/site-packages']
```

次に、以下のコマンドでDjangoがあるディレクトリを確認します。

```python
$ pip3 show django
Name: Django
Version: 2.2.1
Summary: A high-level Python Web framework that encourages rapid development and clean, pragmatic design.
Home-page: https://www.djangoproject.com/
Author: Django Software Foundation
Author-email: foundation@djangoproject.com
License: BSD
Location: /Users/user/hoge/Django/hoge/fuga_venv/lib/python3.7/site-packages
Requires: pytz, sqlparse
Required-by:
```
ここでDjangoのパスをpython3が参照可能でなければ、（今回の事例では参照可能になっています。）パスを変更するなりの対処をします。インストール先のpythonのバージョンが異なるとかもありえますので、その時は適切なバージョンのpythonに切り替えてからDjangoを再度インストールしてあげましょう。

パスの設定に関してはこちらの記事が参考になります。
[MacでPATHを通す]
(https://qiita.com/nbkn/items/01a11392921119fa0153)

pythonのバージョン切り替えに関してはこちらの記事を参考ください。
[pyenvにより、pythonのバージョンを変更する](https://qiita.com/Kohey222/items/19eb9b3cbcec9b176625)
Leetcode #92: Reverse Linked List II


```swift
func reverseBetween(_ head: ListNode?, _ m: Int, _ n: Int) -> ListNode? {
    if head == nil {
        return nil
    }
    
    let dummy = ListNode(0)
    dummy.next = head
    
    var pre: ListNode? = dummy
    for _ in 0..<(m - 1) {
        pre = pre?.next
    }
    
    let start = pre?.next
    var end = start?.next
    for _ in 0..<(n - m) {
        start?.next = end?.next
        end?.next = pre?.next
        pre?.next = end
        end = start?.next
    }
    
    return dummy.next
}
```
postgew sql

### アクセス

psql -h hostname -U username -d databasename

### 基本構文

```
select カラム
from テーブル
where '条件'
and '追加条件'
```

### nullの対応

is not null 
is nullをつける

```
select カラム
from テーブル
where '条件' is not null 
```

### ()

これで、優先順位を変更する

### 集約関数

一度集計した結果に対して実行する

```

User.all.count的な感じな気がする


1Userを全て検索
2レコードを計算する

```

### 集約関数文法


```
1 selectの後に関数を
2 複数カラムには、複数関数を入れる

select count(id) , count(email)from users where id = '22' ;
```

```
count
sum
avg
max
min

```

### group by 

```

ユーザーが持っているのemailの数を、個別に出すよ

group byで括りたい【カラム】の指定をする必要がある
※下記の場合、id 

select id , count(email) from users group by id;

```

### Having 

条件でまとめられる

goup byなし

→全体の平均

```

elect avg(price) from products;-[ RECORD 1 ]------------
avg | 305898.813892215569

```

group_by あり

商品タイプごとに

```
select avg(price) from products group by type;
-[ RECORD 単品]------------
avg | 298057.389503546099
-[ RECORD セット]------------
avg | 348423.461538461538

```

### 検索（述語）


%を起点に前か後ろか？

```
前方

select nam 
  from products
  where name like '単品%'

結果
単品肉
単品肉

後方

where name like '%単品'

結果
肉単品
魚単品

```

### between

where price between 100 and 1000;
React-nativeをMacに導入した時にやったことメモ

#概要
React-nativeをMacで使えるようにした時の手順メモ．
AndroidStudioとXcodeは事前に導入済み．

#実施環境
- System:
  - OS: macOS 10.14.
  - CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
- Binaries:
  - Node: 10.15.1
  - npm: 6.9.0
 
#インストール手順
[watchman](https://facebook.github.io/watchman)とreact-native-cliをインストール

    brew install watchman
    npm install -g react-native-cli

#プロジェクトの初期化
    react-native init プロジェクト名

#プロジェクトの実行
    react-native run-ios

#プロジェクトのデバッグ

ブラウザで以下の場所のコンソールを開く
[http://localhost:8081/debugger-ui/](http://localhost:8081/debugger-ui/)

#その他メモ
react-nativeのバージョンは--versionオプションで指定して初期化できる．

    react-native init プロジェクト名 --version 0.57.8
カードをクリックで表裏切り替える方法



<img width="363" alt="スクリーンショット 2019-05-03 16.25.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244853/981d3299-b256-41b9-7cc7-271177f1374c.png">

　　↓ 回転しながら裏面に切り替わる。↓

<img width="361" alt="スクリーンショット 2019-05-03 16.33.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244853/5f44a6a3-b078-3b51-aac2-8a5a03bbf547.png">





●html

    <div class="main">
      <div class="card" (click)="cardClick()">
        <div class="front">
            {{ text.front }}
        </div>
        <div class="back">
          {{ text.back }}
        </div>
      </div>
    </div>

●css
  
    .main{
        position: relative;
        width:750px;
        height:750px;
    }

    .card {
        position: absolute;
        width: 350px;
        height:150px;
        background: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 5px #ccc;
        transition:all 0.5% ease;
        transform-style: preserve-3d;
    }

    .flipped {
        transform: rotateY(180deg);
        transition: 1s;  
    }

    .flippedReverse {
        transform: rotateY(0deg);
        transition: 1s;  
    }

    .front {
        position: absolute;
        width: 350px;
        height:150px;
        backface-visibility: hidden; /* これで回転した後、表面が表示されなくなる */
        background: #fff;
        color: #333;
        transform:rotateY(0deg); 
        transition: 1s;  /* これを入れないと回転した動きが見えない */
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
        align-items: center; /* 縦方向中央揃え */
        -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
        justify-content: center; /* 横方向中央揃え */
    }

    .back {
        position: absolute;
        width: 350px;
        height:150px;
        backface-visibility: hidden;
        background: #fff;
        color: #333;
        transform:rotateY(180deg); 
        transition: 1s;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
        align-items: center; /* 縦方向中央揃え */
        -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
        justify-content: center; /* 横方向中央揃え */
    }

●ts

    card;

    ngOnInit() { 
      this.card = document.getElementsByClassName('card');
    }

    text = {
      front:"ああああ",
      back:"いいいい"
    }

    frontFlag:Boolean = true;

    cardClick(){   
      if(this.frontFlag){
        this.frontFlag = false;
        this.card[0].classList.add('flipped');
        this.card[0].classList.remove('flippedReverse');
      }else{
        this.frontFlag = true;
        this.card[0].classList.add('flippedReverse');
        this.card[0].classList.remove('flipped');
      }
    }
Flutter（iOS）でFirebaseが使えないときの対応

自分の場合はXcodeからGoogleService-Info.plistを追加しなかったことが原因のようでした。ファイル移動自体は意味がないためAndroid Studioでファイルを追加したりコマンドライン上でファイルを移動させる行為は無駄なようです。

GoogleService-Info.plistを削除してXcodeから再度追加することで解決できました。

## 参考
[iOS crash during start (Firebase configure)](https://github.com/flutter/flutter/issues/16871)
オンラインで使える正規表現確認サイト

正規表現勉強中。オンライン上で試せるサイトを記載

##rubyの正規表現可視化サイト

[https://rubular.com/](https://rubular.com/)



##regulex

正規表現を図で可視化してくれるサイト


https://jex.im/regulex/#!flags=&re=%5E(a%7Cb)*%3F%24
Deep learning AMIのUbuntu 16.04.6 LTSにデスクトップ環境を構築してMacから繋ぐ

# はじめに

基本的に、[AWS EC2上のUbuntu16.04にデスクトップ環境を構築してMacからつなぐ](https://qiita.com/yonell/items/cb1a735bed2d7b9c6b45)と同じですが、
2019/05/03現在、同様のプロセスでいくつか躓いたので、情報共有です。

# やりたいこと
- AWSの[Deep learning AMI](https://aws.amazon.com/jp/machine-learning/amis/)Ubuntu 16.04.6LTSにデスクトップ環境を構築してMacから繋ぐこと
- Deep Learning AMI (Ubuntu) Version 22.0：ami-06868a6ddab784c28

# うまくいかなかった点
1. その１

```
$ sudo sed -i 's/^PasswordAuthentication no/PasswordAuthentication yes/' /etc/ssh/sshd_config
```
とすると、

```
sudo: unable to resolve host ip-●●●-●●-●-●●●
```
となってしまった。解決するためには、

```
$ sudo sh -c 'echo ●●●.●●.●.●●● $(hostname) >> /etc/hosts'
```
とすればよい。ただし、```ip-●●●-●●-●-●●●```ではなく、```●●●.●●.●.●●●```とすることに注意です。

ご参考：
- https://tech.librastudio.co.jp/index.php/2017/03/09/post-1322/
- https://qiita.com/ogomr/items/89e19829eb8cc08fcebb
- https://stackoverflow.com/questions/33441873/aws-error-sudo-unable-to-resolve-host-ip-10-0-xx-xx/33443018

2. その２

```
$ sudo apt install xrdp xfce4 xfce4-goodies tightvncserver
```

とすると、

```
E: Could not get lock /var/lib/dpkg/lock-frontend - open (11: Resource temporarily unavailable)
E: Unable to acquire the dpkg frontend lock (/var/lib/dpkg/lock-frontend), is another process using it?
```
となってしまった。解決するためには、

```
$ sudo killall apt apt-get
```
とすれば良い。詳細は参考リンクをご確認ください。

ご参考：
- https://askubuntu.com/questions/1109982/e-could-not-get-lock-var-lib-dpkg-lock-frontend-open-11-resource-temporari


# まとめ

以上をまとめると、[AWS EC2上のUbuntu16.04にデスクトップ環境を構築してMacからつなぐ](https://qiita.com/yonell/items/cb1a735bed2d7b9c6b45)で紹介されているプロセス
に2行だけ追記して、上から実行していくだけ。素晴らしい記事を書いていただいてありがとうございます、、、！

```
sudo apt update && sudo apt upgrade

sudo sh -c 'echo ●●●.●●.●.●●● $(hostname) >> /etc/hosts'

sudo sed -i 's/^PasswordAuthentication no/PasswordAuthentication yes/' /etc/ssh/sshd_config

sudo /etc/init.d/ssh restart

sudo passwd ubuntu

sudo killall apt apt-get
sudo apt install xrdp xfce4 xfce4-goodies tightvncserver

echo xfce4-session> /home/ubuntu/.xsession

sudo cp /home/ubuntu/.xsession /etc/skel

sudo sed -i '0,/-1/s//ask-1/' /etc/xrdp/xrdp.ini

sudo service xrdp restart

tightvncserver
```
ショートカットキー一覧　~mac編~

macのショートカットキーを自分用にまとめます。
思い出したら更新していきます。

＜command＞

command+c = copy
command+x = cut
command+v = paste
command+s = save
command+z = back
command+数字 = タブ切り替え

＜option＞

option+¥ = \
optino+z = Ω
option+x = √
option+b = ∫
option+w = ∑

＜control＞

control+a = キャレットを左端に移動
control+a = キャレットを右端に移動
control+f = キャレットを一つ進める
control+d = delete
Sassの基本まとめ

はじめに*********
プログラミング勉強中のものです。
いろいろまとめています
お気づきの点があれば、ご指摘ください。



##Sassとは？
Sassはcssをより便利に効率的に書くための記法
sassとscssの２種類あり、一般的にはscssが主流

#####Sassを使うメリット

 __1.コードの記述量が減る__
 __2.複数のCSSファイルを1つにまとめることができる__
 __3.同じ値を使い回すことができる__


##1.コードの記述量が減る

たとえば下記htmlファイルのcssを指定したい時


```html:hoge.html
<div class="header">
 <p>hogehoge</p>
</div>
```

cssだとheaderを２回書く必要がある
子要素が増えていくと書くのが大変だが。。

```css:hoge.css
.header{
 width:100%
 }
.header p{
 color:#fafafa;
}
```

scssだと同じセレクタなら記述の省略が可能

```scss
css:hoge.scss
.header{
  width:100%
 p{ 
  color:#fafafa;
  }
}
```
また、入れ子構造内で「＆」を使えばhoverやactiveも使用可能

```scss:hoge.scss
.header{
  width:100%
 p{
  color:#fafafa;
  &:hover{
  color:red;
  }
}
```
##2.複数のCSSファイルを1つにまとめることができる

 scssにはファイルを分割するバーシャルという機能があり、分割したファイルを１つに統合することも可能


```
バーシャルファイルは"_（アンダーバー）ファイル名"で作成可
バーシャルファイルの読み込みは　＠immport "ファイル名";
```




##3.変数の定義やスタイルの定義(@mixin)ができる


__$変数名: 値; で変数名を指定して、他のファイルで使用することも可__

```_variable.scss
 $main-color:#fafafa;
```

```scss:hoge.scss
 h1{
 background-color:$main-color;
}
```


__@mixin を使えばスタイルの指定し、複数箇所で簡単に呼び出すことも可能__

例えばcssだと同じコードを何回も書く必要があるので、少しめんどくさい

```css:hoge.css
.hoge1{
 width:200px;
 height:100px;
}
.hoge2{
 width:200px;
 height:100px;
}
```
これに@mixinを省略できる。修正の時も＠mixin部分だけ修正すればOK

```scss:hoge.scss
@mixin hoge{
 width:200px;
 height:100px;
}
.hoge1{
 @include hoge;
}
.hoge2{
 @include hoge;
}
```

ちなみに引数の指定も可能
 hoge1とhoge2で違う色の指定ができる

```scss:hoge.scss
@mixin hoge（$color){
 width:200px;
 height:100px;
 color:$color;
}
.hoge1{
 @include hoge(#fafafa);
}
.hoge2{
 @include hoge(red);
}
```