OmniAICreator/Qiita-1.07M huggingface dataset:
WordPressの初期化

# プラグイン WP Reset を使う
プラグインを使って簡単に初期化できます。
プラグインって何？という方のために インストール&有効化&初期化の方法 説明します。

### プラグインのインストール
1. サイドバーのプラグインをクリックし、一番上にある「新規追加」をクリック
![スクリーンショット 2020-09-05 19.09.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510946/8d226eb2-8efd-1e48-a178-942077d46f08.png)


2. メニューバーの一番右「プラグインの検索...」 で"WP Reset"を検索
![スクリーンショット 2020-09-05 19.18.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510946/52fa9e64-2f30-ac30-2b28-061805620f19.png)

3. WP Reset - Most Advanced WordPress Reset Tool　の「今すぐインストール」をクリック

### プラグインの有効化
4. インストールが完了したら「有効化」をクリック
![スクリーンショット 2020-09-05 19.18.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510946/4ae3f175-adf7-c236-1f7a-aa61ae006605.png)

### サイトの初期化
5. サイドバーのツールをクリックし、一番下の WP Reset をクリック
![スクリーンショット 2020-09-05 19.19.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510946/a58fb333-3867-5c13-eacf-d72d98dc98f7.png)


6. ページ一番下までスクロールし、「Reset site」ボタン左の入力欄に"reset"と入力し、「Reset site」ボタン押下
![スクリーンショット 2020-09-05 19.22.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510946/8ed21610-22b7-31b9-8855-0108da215f98.png)

ちなみに、1つめのチェックボックスにチェックを入れると現在適用されているテーマの適用が継承されます。
2つめのチェックボックスにチェックを入れるとWP Resetプラグインが有効のままになります。
3つめのチェックボックスにチェックを入れると現在有効になっている全てのプラグインが有効のままになります。

.
.
.


以上の手順で、サイトが初期状態になります。
AndroidにLinuxを入れてtensorflow liteを実行する

Android スマホに userland で linux を入れて tensorflow lite を実行します。

下準備

UserLAnd - Google Play のアプリ 
https://play.google.com/store/apps/details?id=tech.ula&hl=ja
※userland で linux を入れるとポート番号 2022 で ssh ログインができるようになります。

IP Tools: WiFi Analyzer - Google Play のアプリ 
https://play.google.com/store/apps/details?id=com.ddm.iptools&hl=ja
※IP アドレスの確認ができます。192.168 から始まるものを探します。

Android端末へsshログイン

~~~~
ssh username@192.168.xxx.xxx -p 2022 ;
~~~~

アップデートとユーティリティのインストール

~~~~
sudo apt update ;
sudo apt upgrade -y ;
sudo apt install -y curl git unzip wget ;
~~~~

python3 関係のインストール

~~~~
sudo apt install -y python3-dev python3-pip python3-setuptools ;
sudo apt install -y jupyter-qtconsole jupyter-notebook python3-jupyter-client python3-jupyter-console python3-spyder spyder3 ;
sudo python3 -m pip install --upgrade pip ;
~~~~

python3 のバージョン確認

~~~~
python3 --version
~~~~

tensorflow lite のインストール

以下のページからバージョンとCPUに合致するものをダウンロードします
https://www.tensorflow.org/lite/guide/python

今回は python3.7 の arm64bit 版をダウンロード

~~~~
wget https://dl.google.com/coral/python/tflite_runtime-2.1.0.post1-cp37-cp37m-linux_aarch64.whl ;
pip3 install tflite_runtime-2.1.0.post1-cp37-cp37m-linux_aarch64.whl ;
pip3 install numpy ;
~~~~

tflite のバージョン確認

~~~~
python3 -c 'import tflite_runtime as tf; print(tf.__version__)'  # for Python 3
~~~~

サンプルソースの実行（tfliteに少し書き換えが必要です）
https://github.com/tensorflow/tensorflow/blob/master/tensorflow/lite/examples/python/label_image.py

プログラムのダウンロード

~~~~
wget https://github.com/tensorflow/tensorflow/blob/master/tensorflow/lite/examples/python/label_image.py
 ;
~~~~

以下 tflite 用に書き換え

~~~~
import tensorflow as tf
↓
import tflite_runtime.interpreter as tflite
~~~~

~~~~
interpreter = tf.lite.Interpreter(model_path=args.model_file)
↓
interpreter = tflite.Interpreter(model_path=args.model_file)
~~~~

~~~~
model_path=args.model_file, num_threads=args.num_threads)
↓
model_path=args.model_file)
~~~~

サンプル画像やモデルをダウンロード
https://github.com/tensorflow/tensorflow/blob/master/tensorflow/lite/examples/python/README.md

~~~~
curl https://raw.githubusercontent.com/tensorflow/tensorflow/master/tensorflow/lite/examples/label_image/testdata/grace_hopper.bmp > /tmp/grace_hopper.bmp
curl https://storage.googleapis.com/download.tensorflow.org/models/mobilenet_v1_2018_02_22/mobilenet_v1_1.0_224.tgz | tar xzv -C /tmp
curl https://storage.googleapis.com/download.tensorflow.org/models/mobilenet_v1_1.0_224_frozen.tgz  | tar xzv -C /tmp  mobilenet_v1_1.0_224/labels.txt
mv /tmp/mobilenet_v1_1.0_224/labels.txt /tmp/
~~~~

実行

~~~~
python3 label_image.py \
  --model_file /tmp/mobilenet_v1_1.0_224.tflite \
  --label_file /tmp/labels.txt \
  --image /tmp/grace_hopper.bmp
~~~~

補足

tensorflow の git からソースビルドも通ったのですが、python にくくりつける方法が良くわからなかったので知っているかたいましたらお知らせお願いしますm(_ _)m

参考
Pythonクイックスタート  |  TensorFlow Lite 
https://www.tensorflow.org/lite/guide/python
PHPにおける演算子をまとめる

#プログラミング勉強日記
2020年9月5日
演算子はもう大体知っていると思っていたけど、`<>`や`.=`といった知らない演算子もあったので、この機会にすべてまとめてみようと思う。

#算術演算子
　加減乗除といった簡単な足し算や引き算、掛け算、割り算を行う演算子。足し算は数値だけではなく、文字列を連結するときにも使われる。
　足し算は`add`、引き算は`sub`、掛け算は`mul`、割り算の商は`div`、割り算の余りは`mod`で示す。

| 演算子 | 意味 | 説明 |
|:--:|:--:|:--:|
| `+` | 加算 | 2つ以上の値の足し算をする |
| `-` | 減算 | 2つ以上の値の引き算をする |
| `*` | 乗算 | 2つ以上の値の掛け算をする |
| `/` | 除算 | 2つ以上の値の割り算をする |
| `%` | 剰余 | 割り算したときのあまりの数を求める |

```php:例
<?php
  $add = 17 + 5;
  echo "17 + 5 = $add<br>\n";

  $sub = 17 - 5;
  echo "17 - 5 = $sub<br>\n";

  $mul = 17 * 5;
  echo "17 * 5 = $mul<br>\n";

  $div = 17 / 5;
  echo "17 / 5 = $div<br>\n";

  $mod = 17 % 5;
  echo "17 % 5 = $mod<br>\n";
?>
```

```:実行結果
17 + 5 = 22
17 - 5 = 12
17 * 5 = 85
17 / 5 = 3.4
17 % 5 = 2
```

#比較演算子
　比較演算子の等価演算子については[この記事(PHPでは==と===の意味が違うらしい)](https://qiita.com/mzmz__02/items/4e902a13ffa6ac6addb4)でまとめてる。
　2つの値をある条件で比較して条件を満たしている場合は`true`を、そうでない場合は`false`を返す。そのある条件を示すのが比較演算子。

| 演算子 | 意味 | 例 | 説明 |
|:--:|:--:|:--:|:--:|
| `==` | 等しい | $a == 10 | 2つの値が等しい(変数aは10と等しい) |
| `!=` | 等しくない | $a != 10 | 2つの値が等しくない(変数aは10と等しくない) |
| `<>` | 等しくない | $a <> 10 | 2つの値が等しくない(変数aは10と等しくない) |
| `<` | 小さい | $a < 10 | 左辺の値は右辺より小さい(変数aは10より小さい) |
| `>` | 大きい | $a > 10 | 左辺の値は右辺より大きい(変数aは10より大きい) |
| `<=` | 同じか小さい(以下) | $a <= 10 | 左辺の値は右辺以下(変数aは10より小さいまたは同じ) |
| `>=` | 同じか大きい(以上) | $a >= 10 | 左辺の値は右辺以上(変数aは10より大きいまたは同じ) |


```php:例
<?php
    $a = 10;
    if($a == 10)  echo  "\$a の値は 10 に等しい<br>\n";
    if($a < 10)  echo  "\$a の値は 10 より大きい<br>\n";
    if($a > 20)  echo  "\$a の値は 20 より小さい<br>\n";
    if($a <= 20)  echo  "\$a の値は 20 より大きいか等しい<br>\n";
    if($a <= 20)  echo  "\$a の値は 20 より小さいか等しい<br>\n";
    if($a != 20)  echo  "\$a の値は 20 と等しくない<br>\n";
    if($a <> 20)  echo  "\$a の値は 20 と等しくない";
?>
```

```:実行結果
$a の値は 10 に等しい
$a の値は 20 より小さい
$a の値は 20 より小さいか等しい
$a の値は 20 と等しくない
$a の値は 20 と等しくない
```

#代入演算子
　変数に値を代入するときに使用する`=`を代入演算子という。

| 演算子 | 例 | 意味 |
|:--:|:--:|:--:|
| `=` | a = b | a に b を代入する |
| `+=` | a += b | a = a + b と同じ |
| `-=` | a -= b | a = a - b と同じ |
| `*=` | a *= b	| a = a * b と同じ |
| `/=` | a /= b	| a = a / b と同じ |
| `%=`| a %= b | a = a % b と同じ |
| `&=` | a &= b | a = a & b と同じ |
| `^=` | a ^= b | a = a ^ b と同じ |
| `<<=` | a <<= b | a = a << b と同じ | 
| `>>=` | a >>= b | a = a >> b と同じ |
| `>>>=` | a >>>= b | a = a >>> b と同じ |
| `.=` | a .= b | ab(aにbの値を連結する) |

( `|=` ,  a |= b  ,  a = a | b と同じ )


#論理演算子
　いくつかの条件式の中でも演算子が用いられて、一定の条件を作成する。その条件式の中で記述される演算子のことを論理演算子という。論理演算子で返される値はtrueまたはfalse。

| 演算子 | 意味 | 説明 |
|:--:|:--:|:--:|
| `&&` | 論理積 | 2つの値が成り立つとき |
| and | 論理積 | 2つの値が成り立つとき |
| or | 論理和 | 2つの値の片方または両方が成り立つとき |
| xor | 排他的論理和 | 2つの値の片方が成り立ち、両方が成り立たないとき |
| ! | 否定 | 値が成り立たないとき |


( `||`    ,  論理和  , 2つの値の片方または両方が成り立つとき)

#参考文献
[演算子](https://www.scollabo.com/banban/php/php_06.html)
[代入演算子](https://www.javadrive.jp/start/ope/index10.html)
Reactで要素の高さを取得するためDOMを扱う２つのやり方【useRef】

Reactで要素を取得する２つのやり方を紹介する。

1. document.getElementById()などを用いたやり方。
2. useRefを用いたやり方

## document.getElementById()などを用いたやり方

getRect.getBoundingClientRect()を使って取得します。

```sample.js
import React from "react";
import "./styles.css";

const getRectFunc = () => {
  const getRect = document.getElementById("getRectBtn");
  console.log(JSON.stringify(getRect.getBoundingClientRect()));
};

const App = () => { 
  return (
    <div>
      <button id="getRectBtn" onClick={getRectFunc}>
        button
      </button>
    </div>
  );
};

export default App;


```
codesandbox: https://codesandbox.io/s/nostalgic-architecture-c1tq8?fontsize=14&hidenavigation=1&theme=dark

例としてボタンをクリックするとDOMを取得してgetRectFunc()関数が走ってDOMを取得するサンプルです。

```sample.js
const getRectFunc = () => {
  const getRect = document.getElementById("getRectBtn");
  console.log(JSON.stringify(getRect.getBoundingClientRect()));
};
```
結果として

```
{"x":8,"y":11,"width":53.0625,"height":21,"top":11,"right":61.0625,"bottom":32,"left":8} 
```
が帰ってくる。

## useRefとは
Reactの 16.8v から対応した React Hooks の一機能。
useRefはReactのDOM要素へアクセスできDOMの状態を取得できる。

HooksのReactライフサイクル上でいうとLayoutフェーズもしくはCommitフェーズの副作用となるため更新する場合はuseEffect（useLayoutEffect）を一緒に用いて更新することが多い。

したがって、renderingフェーズでは値が前回の状態のままとなっている。

```sample.js
import React, { useRef, useEffect } from "react";
import useRefSample from "./useRefSample";

const App = () => {
  const elm = useRef(null);
  const SampleComponent = useRefSample;

  useEffect(() => {
    console.log(elm.current);
    console.log(JSON.stringify(elm.current.getBoundingClientRect()));
  }, []);

  return (
    <div ref={elm}>
      <SampleComponent />
    </div>
  );
};

export default App;

```
codesandbox: https://codesandbox.io/s/shy-framework-4y937?fontsize=14&hidenavigation=1&theme=dark

useRef(null)と初期値を入れている

```sample.js
const elm = useRef(null);
```

DOMに ref={elm} と直接、埋め込むことでDOMを取得できる。

```sample.js
    <div ref={elm}>
      <SampleComponent />
    </div>
```

console.log(elm.current)の結果は以下の通り。子のDOMも一緒に取得できている。

current とは useRef でデフォルトで用意されているプロパティ。
useRef で任意の値を更新するときは直接 elm へ代入せずに elm.current へ代入することが必要となる。

```sample.js
<div>
  <div id="sampleDom">Hello,サンプルのDOMです。</div>
</div>
```

console.log(JSON.stringify(elm.current.getBoundingClientRect()));の結果は以下の通り。

```sample.js
{"x":8,"y":8,"width":538,"height":24,"top":8,"right":546,"bottom":32,"left":8} 
```

### DOMに ref={hoge} を埋め込まなくても使えるuseRef
蛇足だが先ほどの例では親要素にref属性をつけて子要素ごとDOMを取得することができた。

ただし、useRef自体に数字の状態を入れておいて常に最新のrenderingフェーズよりも１つ前の状態を維持するような使い方もできる。

## あえてuseRefを使う意味はあるのか
Reactの原則である単一方向のデータフローを考えるとuseRefの方が適していると言える。

getElementByIdやquerySelectorはイミュータブルで、意図しないDOMを取得する可能性があり、データフローを無視してエレメントを取得してしまう。
整数のListを期待していたら文字列のようなものが返ってきた => それCharlistsかも！(Elixir)

# はじめに
- 2020/09/02に行われた[fukuoka.ex#41：Elixirお茶会](https://fukuokaex.connpass.com/event/186882/)にてこんな質問がありました

> Player |> Repo.all |> Enum.map(& &1.number)
> みたいなコードの結果が'\t\b'になりました。これは何でしょうか?

# 答えは[Charlists](https://hexdocs.pm/elixir/List.html#module-charlists)でしょう

```elixir
iex> [9, 8]
'\t\b'
```

- [Elixir](https://elixir-lang.org/)はListの要素がすべて整数で、それぞれの整数がアスキー文字として印字可能なものであれば、シングルクォーテーション(`'`)でくくられたアスキー文字の列で表示することになっています
- いやいやそんなのやめてくれ、整数のリストで表示したいよという場合にはIExの設定を変えてあげるとよいです
- 整数のリストで結果を確認したいときはIExの設定を変えてあげましょう
    - `~/.iex.exs`に設定を予め書いておくこともできます

```elixir
iex> IEx.configure(inspect: [charlists: :as_lists])
:ok

iex> [9, 8]
[9, 8]
```

- `h IEx.configure`と`h Inspect.Opts`でヘルプを表示すると設定の仕方が書いてあります

# 本当にそうなの?
- 簡単な[Phoenix](https://www.phoenixframework.org/)プロジェクトを作って試してみます
- 準備はこのあたりをご参照ください
    - [インストール](https://fukuoka-ex.github.io/phoenix-guide-ja/guides/1.4/introduction/installation.html)
    - [Installation](https://hexdocs.pm/phoenix/installation.html#content)


```
$ mix phx.new hello --live
$ cd hello 
$ mix ecto.create
$ mix phx.gen.live Baseball Player players name:string number:integer
```

- `router.ex`の変更は、今回の例では必ずしも必要な手順ではありません

```elixir:lib/hello_web/router.ex
  scope "/", HelloWeb do
    pipe_through :browser

    live "/", PageLive, :index

    live "/players", PlayerLive.Index, :index # add
    live "/players/new", PlayerLive.Index, :new # add
    live "/players/:id/edit", PlayerLive.Index, :edit # add

    live "/players/:id", PlayerLive.Show, :show # add
    live "/players/:id/show/edit", PlayerLive.Show, :edit # add
  end
```

```elixir:priv/repo/seeds.exs
Hello.Repo.insert!(%Hello.Baseball.Player{name: "テッド・ウィリアムズ", number: 9})
Hello.Repo.insert!(%Hello.Baseball.Player{name: "原辰徳", number: 8})
```

```
$ mix ecto.migrate
$ mix run priv/repo/seeds.exs
$ iex -S mix
```

```elixir
iex> alias Hello.Repo
Hello.Repo

iex> alias Hello.Baseball.Player
Hello.Baseball.Player

iex> Player |> Repo.all |> Enum.map(& &1.number)
[debug] QUERY OK source="players" db=8.4ms decode=1.6ms queue=0.8ms idle=1527.6ms
SELECT p0."id", p0."name", p0."number", p0."inserted_at", p0."updated_at" FROM "players" AS p0 []
'\t\b'
```
- うん、やっぱりそうだね :lgtm: 

```elixir
iex> IEx.configure(inspect: [charlists: :as_lists])
:ok

iex> Player |> Repo.all |> Enum.map(& &1.number)   
[debug] QUERY OK source="players" db=2.6ms idle=1775.7ms
SELECT p0."id", p0."name", p0."number", p0."inserted_at", p0."updated_at" FROM "players" AS p0 []
[9, 8]
```

# Wrapping Up :lgtm: 
- 整数のListを期待していたら文字列のようなものが返ってきた => それは[Charlists](https://hexdocs.pm/elixir/List.html#module-charlists)かもしれません(きっとそうでしょう)
- Enjoy [Elixir](https://elixir-lang.org/)! :rocket: 
- Enjoy [Phoenix](https://www.phoenixframework.org/)! :rocket:
【Swift】エラー処理 throws / throw / try / do / catch について学んだ


# はじめに
Swift を学び始めて１ヶ月足らずの初心者です。
throws / throw / try / do / catch などについて学習しました。理解した内容を投稿します。

# エラー処理 throw, try, do, catchについて概要

### まずエラー処理とは
プログラムを実行し、予期しないエラーが発生した場合に対応する処理のこと。

### throws, throw, try, do, catchの処理の流れ（全体像）

1. ``throws``を付けてエラーを投げる可能性のあるメソッドを定義
2. 定義した関数の中でエラーを投げる処理を``throw``を付けて記述
3. ``do``のスコープ内で``try``を付けてエラー発生可能性のあるメソッドを呼び出し
4. ``try``の処理でエラーが発生したときに実行される``catch``を定義

### コードで流れ、全体像を確認

```sample.swift

// エラーを投げる可能性のある関数を定義
func メソッド名(引数名: 型) throws -> 戻り値 {
    // エラーを投げる可能性のある処理を記述
    throw エラーを投げる処理内容
}

// エラーを対処する
do {
    // エラーの発生する可能性のある処理を記述
    try エラー発生可能性のあるメソッドを呼び出し
} catch {
    // do内 try の処理でエラーが発生した場合の処理
}
```

# 実際にコードで動作を確認
#### エラー発生しないパターン

```sample.swift

import Foundation

// 引数nameがあるときにnameの値を出力する関数
func printName(name: String) throws {

    // 引数nameが空文字の場合にエラーとなる処理を記述
    if name.isEmpty { // nameが空文字のときにtrueとなる
        throw NSError(domain: "error", code: -1, userInfo: nil) // NSErrorでエラーを発生させる
    }
    print(name)
}

do {
    // エラーの発生する可能性のある処理を記述
    try printName(name: "松田")
    print("処理成功") // ここまで実行される
} catch {
    // do内 try の処理でエラーが発生した場合の記述
    print("エラー発生")
}

// 出力結果 => 松田
// 　　　　 => 処理成功
```

#### 処理失敗エラー発生パターン
do 処理内の ``"松田" => ""``（空文字） に変更しただけ

```sample.swift
import Foundation

func printName(name: String) throws {
    // nameが空文字の場合にはエラーとなる
    if name.isEmpty {
        throw NSError(domain: "error", code: -1, userInfo: nil) // NSErrorでエラーを発生させる
    }
    print(name)
}

do {
    // エラーの発生する可能性のある処理を記述
    try printName(name: "") // ここでdo内処理がストップして、catchに移る
    print("処理成功") // ここの処理まで到達しない
} catch {
    // do内 try の処理でエラーが発生した場合の記述
    print("エラー発生")
}

// 出力結果 => エラー発生
```

``do`` スコープ内内ではの``try printName(name: "")``で処理がストップし、``catch``に処理が移る。
下記のように``catch``スコープ内で定数``error``を使ってエラーの内容にアクセスすることもできる。

```sample.swift
// 省略

} catch {
    // do内 try の処理でエラーが発生した場合の記述
    print(error)
    print("エラー発生")
}

// 出力結果 => Error Domain=error Code=-1 "(null)"
//       　=> エラー発生
```

# try?, try! について
``try?``を使うとエラーが起きても無視されて何も行われない

```sample.swift
import Foundation

func printName(name: String) throws {
    // nameが空文字の場合にはエラーとなる
    if name.isEmpty {
        throw NSError(domain: "error", code: -1, userInfo: nil) // NSErrorでエラーを発生させる
    }
    print(name)
}

try? printName(name: "") // エラーは無視される

// 出力結果 =>
```

``try!``を使うとエラーが発生した場合に実行時エラーとなり、アプリがクラッシュ（停止）する

```sample.swift
import Foundation

func printName(name: String) throws {
    // nameが空文字の場合にはエラーとなる
    if name.isEmpty {
        throw NSError(domain: "error", code: -1, userInfo: nil) // NSErrorでエラーを発生させる
    }
    print(name)
}

try! printName(name: "") // クラッシュ

// 出力結果 => Fatal error: 'try!' expression unexpectedly raised an error: Error Domain=error Code=-1 "(null)": file youtubePlayground.playground, line XX
```

# 参考文献
大変わかりやすく参考にさせていただきました。
本当にありがとうございます。

- [【Swift入門】do-catchとtryでエラー処理を記述する方法](https://www.sejuku.net/blog/36299)
- [Swift 4.0 エラー処理入門](https://qiita.com/koishi/items/67cf4d0f51c4d79f1d22)
- Swift 実践入門（書籍）

# 最後に
見習いエンジニアのSwift初心者です。
間違いご指摘などございましたら、どうぞコメントなどよろしくお願いします。
Windows への Qt 開発環境のインストール


# Windows への Qt 開発環境のインストール

※ https://qiita.com/m-tmatma/items/1c0565fd5a963ab6f93d で必要だったので書いた記事です。

## Qt インストーラの入手

https://www.qt.io/download-qt-installer からダウンロードしてインストールします。(qt-unified-windows-x86-3.2.3-online.exe がダウンロードされます。)

インストーラを起動すると以下の画面になります。以前は Qt のアカウントを作成しなくても先に進めたみたいですが、現在はアカウントを作ってログインしないとインストールできなくなった模様です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/25160625-4f3c-d921-cde8-ebc33994f4d6.png)

ログインすると以下の画面になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/eaff7505-4664-ccf0-7818-0b6540dc69da.png)

とりあえず最新版にチェックを入れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/7b893f25-5241-41a0-b81d-d4dd2783930c.png)

52 GB いるらしい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/e010cd4f-2fbe-f1ca-1c42-29b879db7cbf.png)
findコマンドで指定した期間内に更新されたファイルをサイズ順で並び替える

## 使いみち
- サーバーの調査時に、ある期間内でもっともサイズの大きいファイルを見たい
- ex. 急にサーバー容量が増えたけど、どのファイルが原因なのかを調査する等

## コマンド
```
find . -type f -newermt "2020-08-31 00:00:00" -a ! -newermt "2020-09-05 23:59:59" -printf "%p %s" | sort -k 2,2
```
## 解説
- `-newermt`
    - 指定した日付より新しいもの（>）。ここでは2020年8月31日の0時ジャストより先の日付になる
- `-a ! -newermt`
    - 上記の否定になる（<=）。ここでは、2020年９月５日の23時59分59秒以下の日付になる
- ２つを合わせると以下のように期間指定したことになる
    - `2020年8月31日0時0分0秒 < ファイルの最終更新日付 <= 2020年9月5日23時59分59秒`
- `-printf "%p %s"`
    - findで見つけたファイルの名前（フルパス）とファイルのサイズを出力する
- `sort -k 2,2`
    - `-k [開始位置],[終了位置]`でソートのキーを指定できる
    - ここでは2番目のサイズのみをキーとするよう指定している
    - ※findの結果を「ファイル名 ファイルサイズ」のみにしていることに注意

## 参考
[[Linux] findコマンドで指定した日付の範囲に更新されたファイルを検索する](https://qiita.com/dkwnm/items/81cdd716b2ac6d0d73aa)
[逆引きUNIXコマンド/findに日時を指定し該当するファイルを検索する](https://linux.just4fun.biz/?%E9%80%86%E5%BC%95%E3%81%8DUNIX%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89/find%E3%81%AB%E6%97%A5%E6%99%82%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E8%A9%B2%E5%BD%93%E3%81%99%E3%82%8B%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E6%A4%9C%E7%B4%A2%E3%81%99%E3%82%8B#i551bc2b)
[findで具体的な日付、時間で検索するnewerXYオプション](https://www.greptips.com/posts/649/)
[sortコマンドについて詳しくまとめました 【Linuxコマンド集】](https://eng-entrance.com/linux-command-sort)
[sortコマンド（テキストファイルをソートする）](http://itdoc.hitachi.co.jp/manuals/3020/30203S3530/JPAS0260.HTM)
並列分散処理に関して

### 並列分散処理に関して
並列分散処理とは、データを複数台のサーバに分散・蓄積及び並列処理するための手法。大量データを現実的な時間で処理するために用いる。大規模分散処理フレームとしてHadoopがある。このHadoopはGoogleが発表した論文のGFSやMapReduceを基にしたオープンソースによる実装。Hadoopはリアルタイム処理というよりはバッチ処理(バッチ処理：まとまった大規模なデータを一気に処理すること)に適している。ちなみにバッチ処理と対になる処理としてストリーム処理というものがある。ストリーム処理とは大量のデータをリアルタイムで処理するものです。一つ一つのデータ自体は大きくないものの、発生頻度が多い。リアルタイムにデータを活用するケースでストリーム処理が必要とされる。

### HadoopとSpark
Hadoopは大規模データのための並列分散処理フレームワーク。複数台のサーバを使用し、全体で大規模なデータの保存・処理を並列分散処理に適した方法で行う。複数のサーバーのディスクを効率よく利用するというのがコンセプトとしてある。hadoopはストリーム処理よりはバッチ処理に適している。
Sparkは大規模データのための並列分散処理フレームワーク。メモリ・CPU・ディスクなどのリソースを効率的に利用している。SQLによる記述、機械学習、ストリーム処理などの分散処理で頻出の処理のライブラリが付属している。Hadoopに比べて複雑な処理も高速に処理することができる。処理の順番の最適化を行ったりすることもある。
データの生成元からHadoopにデータを転送する必要がある。そのデータを転送するミドルウェアとして「Fluentd」と「embulk」がある。「Fluentd」はストリーム処理向きであり、「embulk」はバッチ処理向きです。そのため、バッチ処理ではembulkでデータの収集を行い、Hadoop大規模なデータの保存・処理をし、SparkでHadoopでは難しい複雑な処理を行う。ストリーム処理ではFluentdでデータの収集を行い、kafka(スケーラブルで高速な分散メッセージングシステム)でデータを受け取り、Sparkで処理を行う。
（kafkaはサーバ複数台で並列に処理できる。逐次送られてくるデータを高速に受け取ることができ、ディスクへの記録などデータを失いにくい仕組みを備えている。ストリームデータはデータを受け取り一時的に保存するものが必要である。なぜなら、ストリームの処理を行っているうちに新たなデータが生成され処理が追いつかずデータが失われる可能性があるからです。そのため、受け皿としてkafkaが存在している。）
HadoopやSparkで行う処理というのは、BIツールで利用するためにデータを加工したり集計したり分析したりすることをいう。HadoopとSparkはスケールアウト(台数を増やす)という仕組みを備えている。そのため性能が悪くなってきたら台数を増やして対応することが可能である。





<参考にしたサイト>
<a href = "https://www.youtube.com/watch?v=oaRRtnkyXKI">並列分散処理基盤のいま～45分で学ぶHadoop/Spark/Kafka入門～ 2020-6-27 B-2</a>
<a href = "https://dev.classmethod.jp/articles/hadoop-advent-calendar-01-introduction-mapreduce/">Hadoop MapReduce入門 | Hadoop Advent Calendar 2016 #01</a>
Python contextlib.ExitStackで複数のコンテキストマネージャをまとめて管理する

[Python標準ライブラリのcontextlib.ExitStackクラス](https://docs.python.org/ja/3/library/contextlib.html)を使うと複数のコンテキストマネージャ[^cm]をまとめて管理できます。ExitStackクラスのメリットを以下に列挙します。

- ExitStackクラスもコンテキストマネージャなので[with文](https://docs.python.org/ja/3/reference/compound_stmts.html#with)でスコープを指定できる。
- クラスの[インスタンス変数](https://docs.python.org/ja/3/tutorial/classes.html#class-and-instance-variables)に含まれるコンテキストマネージャを`__init__`メソッドで登録してまとめて管理できる。
- `push`メソッドと`enter_context`メソッドの使い分けで`__enter__`メソッドの呼び出しを制御できる。

# `push`メソッドと`enter_context`メソッドの動作確認

`push`メソッドは管理対象の`__enter__`メソッドを呼び出さず、`enter_context`メソッドは管理対象の`__enter__`メソッドを呼び出します。通常は`enter_context`メソッドを使用すれば問題ありません。

```py
from contextlib import ExitStack


class TestClass:
    def __init__(self):
        print("TestClass.__init__()")

    def __enter__(self):
        print("TestClass.__enter__()")
        return self

    def __exit__(self, exc_type, exc_value, traceback):
        print("TestClass.__exit__()")


with ExitStack() as stack:
    stack.push(TestClass())
    # TestClass.__init__()
    # TestClass.__exit__()

with ExitStack() as stack:
    stack.enter_context(TestClass())
    # TestClass.__init__()
    # TestClass.__enter__()
    # TestClass.__exit__()
```

# 実用例：ディレクトリ中のファイルを`open`組み込み関数でまとめて開いて`ExitStack`で管理する。

ハンドルリソース管理の問題から多用することはありませんが、`ExitStack`と`with`文を組み合わせることでディレクトリ中のファイルをまとめて開いて管理できます。

```py
import os
from contextlib import ExitStack
from typing import List, BinaryIO

# ExitStackオブジェクトをwith文で作成・開始する。
with ExitStack() as stack:
    # カレントディレクトリ中のファイルのパスを取得する。
    # open組み込み関数が失敗するのでディレクトリは除外する。
    paths: List[str] = [path for path in os.listdir(".") if os.path.isfile(path)]

    # ファイルをExitStackに追加しながら開く。
    files: List[BinaryIO] = [stack.enter_context(open(path, "rb")) for path in paths]

    # 開いたファイルを適当に処理する。
    file: BinaryIO
    for file in files:
        print(",".join([hex(byte).ljust(2, "0") for byte in file.read(5)]))

# ExitStackオブジェクト（stack）に登録されたコンテキストマネージャは
# with文の終了時点で解放される。
```
# 関連情報

- [`contextlib.AsyncExitStack`クラス](https://docs.python.org/ja/3/library/contextlib.html#contextlib.AsyncExitStack)で非同期コンテキストマネージャに対する解放処理を使用できます。

[^cm]: コンテキストマネージャ：`__enter__`メソッドと`__exit__`メソッドを実装したオブジェクト。参考：[公式ドキュメント](https://docs.python.org/ja/3/library/stdtypes.html#typecontextmanager)。
クラス継承について。

|No.    |*タイトル*                  |
|----------|--------------------------|
|1|[マークダウンの備忘録](https://qiita.com/kawashi23/items/8466e744035fef6daf17)
|2|**現在の記事**
|3|[投稿記事二つ目](https://qiita.com/kawashi23/items/c6547c5f41fe0ecafebd)




クラス継承の記述方法

```ruby
class Apple < Fruit
      #子クラス #親クラス
end
```

上記の場合、Fruitが親クラス、Appleが子クラスとなります。

```ruby
class Fruit

  def initialize(fruit_name, fruit_color)#(第一引数, 第二引数)仮引数
    #initializeメソッドはインスタンス生成時にnewメソッド実行と同時に処理が行われます。呼び出しのための新たな記述はいりません。
    @fruit_name = fruit_name
    #@fruit_nameはインスタンス変数と呼ばれるものです。
    @fruit_color = fruit_color
  end

  def name
    puts "これは#{@fruit_name}です。"#{値}で値の展開を行なっています。
  end

  # def color
  #   puts "#{@fruit_color}色です。"
  # end

end

class Apple < Fruit
     #子クラス  #親クラス

  def name
    puts "これは美味しい#{@fruit_name}です。" 
    #親クラスで定義した、インスタンスメソッド、インスタンス変数を扱えています。クラス継承の特徴です。
    #親クラスのインスタンスメソッドと同名のものを子クラスで用いることでインスタンスメソッドを上書きすることも可能になります。
  end
   
  def color
    puts "綺麗な#{@fruit_color}色です。"
    #子クラスのみのインスタンスメソッドも扱えます。
  end

end


apple = Apple.new("リンゴ", "赤")#実引数、実引数と仮引数は数を合わせなければなりません。
apple.name #生成したインスタンス名.インスタンスメソッド名でインスタンスメソッドを呼び出しています。
apple.color
```
出力結果は**これは美味しいリンゴです。****綺麗な赤色です。**
となります。
Miniscriptの実践導入。

## はじめに

知見を書き残しておきます。
今のところゲームに組み込んでますが、割と問題なく動いてます。

動かしてみてる動画をアップしているページ
https://ci-en.net/creator/7157/article/365685

スクリプトの公式ページ
https://miniscript.org/

## メモ

### 複数のオブジェクトでスクリプトを利用する場合の設定

* 毎回interpreterクラス側のhostDataを利用するオブジェクトにしておく
* 組み込み関数に対し利用するクラスを登録するようにしておく
* バインドする変数や座標はあくまでグローバル変数とし、オブジェクトにアクセスする場合は組み込み変数経由にする（バインドしている最中にバインド済みの変数にアクセスすると、計算結果を正常に返してくれないケースがある）

### 組み込み関数の定義

* delegateを駆使するけど、変数を毎回定義するより更新用のメンバ変数を持っておいてアクセスするほうがGCによる割当回数が少ない
* 値を返さない場合、Intrinsic.Result.Nullを指定するのが早い
* 組み込み変数の定義はグローバル変数への書き込みに類するので、定義するクラスやメソッドを別にするか、定義するにしてもグローバル変数等で管理して「1回だけ定義」という形にしておく。（クラス分定義してしまうとその分登録する事になっちゃうので）

### 負荷の確認・負荷を下げるアプローチ

* スクリプト導入によって思いっきり負荷が上がったかというと全然ない（むしろGameObject生成するほうが負荷高い）
* GCについてはstringを導入している関係上避けるのは難しいので、一箇所で管理する・ゲームの初期段階だけでアクセスする等のほうがいいかも
* ソースコードをコンパイルした後はバイトコードで管理される。リロードしないんだったら最初にコンパイルする等でもいいと思われる。（あとコンパイル後はソースコード不要になりますのでできるんだったら開放するでもいいかと）

## おわりに

UnityではC#を採用してるし、スクリプトもスイスイ書けてストレスないだろーと考えてたけどそうでもないです。（なかったです）
むしろUnityの場合、自動で更新確認等行っているので、ファイルが更新されると自動でクラスの再構成等行って動かすのに割と時間かかります。

そういう時に外部ファイル扱いでスクリプトで指定して動かすというのは、何度もやり直して調整していくという観点においてはリロード時間が早く、有効な手段と考えます。

幸い、Miniscriptは組み込みも簡単ですし（C言語への組み込みでしたが、当時Lua5.1とかスタックへのプッシュ＆ポップとかあって初心者の自分は泣きたくなった）導入負荷を低く抑えることも可能かと。

ということでUnityでのMiniscriptの導入、オススメです。
Java バッファリング処理

#【Java バッファリング処理】

業務内で使用する Javaのバッファリング処理のメモです。
開発時に使用しているのでまとめました。

##バッファ

バッファは、文字列を格納する変数である。
bufferは、「緩衝材」の意味を持つ。

プリミティブ型のデータを保存するための入れ物。
boolean型以外のすべてのプリミティブ型がある。


##バッファリング処理

バッファリング処理とは、
書き込み時であれば、データを一旦メモリー（バッファ）に蓄積し、いっぱいになったところで、ファイル出力する処理。
読み込み時であれば、バッファにまとめてデータを読み込み、いっぱいになったところで、データを処理。
→データをまとめて処理が出来て、読み書きが効率化する。
Tensorflowがインポートできない

###問題点：Tensorflowがインポートできない

Tensorflow 2.3.0 (記事執筆時点の最新版) をインストールし、インポートしようとすると、不足しているモジュールに関するエラーメッセージが大量に出てきたので、エラーメッセージに記載されている不足モジュールを一つ一つpipでインポートしたり、バージョンダウンしたり・・・。

しかし、最終的に以下のエラーが出た後に、先に進めなくなってしまいました。

```
Traceback (most recent call last):
  File "C:\ProgramData\Anaconda3\lib\site-packages\tensorflow\python\pywrap_tensorflow.py", line 64, in <module>
    from tensorflow.python._pywrap_tensorflow_internal import *
ImportError: DLL load failed: 指定されたモジュールが見つかりません。

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "calculation1.py", line 9, in <module>
    import tensorflow as tf
  File "C:\ProgramData\Anaconda3\lib\site-packages\tensorflow\__init__.py", line 41, in <module>
    from tensorflow.python.tools import module_util as _module_util
  File "C:\ProgramData\Anaconda3\lib\site-packages\tensorflow\python\__init__.py", line 40, in <module>
    from tensorflow.python.eager import context
  File "C:\ProgramData\Anaconda3\lib\site-packages\tensorflow\python\eager\context.py", line 35, in <module>
    from tensorflow.python import pywrap_tfe
  File "C:\ProgramData\Anaconda3\lib\site-packages\tensorflow\python\pywrap_tfe.py", line 28, in <module>
    from tensorflow.python import pywrap_tensorflow
  File "C:\ProgramData\Anaconda3\lib\site-packages\tensorflow\python\pywrap_tensorflow.py", line 83, in <module>
    raise ImportError(msg)
ImportError: Traceback (most recent call last):
  File "C:\ProgramData\Anaconda3\lib\site-packages\tensorflow\python\pywrap_tensorflow.py", line 64, in <module>
    from tensorflow.python._pywrap_tensorflow_internal import *
ImportError: DLL load failed: 指定されたモジュールが見つかりません。
```

_pywrap_tensorflow_internalというモジュールがないらしいのですが・・・。仕方ないので色々試してみました。

###実行環境
・Windows 10
・Anaconda 3.7.6

###解決方法
結局、__Anacondaを再インストール__し、__tensorflow==2.0.0をインストールし直す__ことで、うまくいきました。なお、この後、tensorflow==2.3.0にアップグレードしてしまうと、再び上記と同様のエラーが出てしまいました。

```
pip install tensorflow==2.0.0
```
Apple Deleloper Program 登録に苦戦した話

iPhoneアプリをリリースするのに必要なApple Developer Programへの登録がスムーズにできず、いろいろ調べたら同じような壁にぶつかった人が沢山いたので少しでも参考になればと思います。
思いの外、長文になってしまいました。。。お忙しい方は解決策だけ読んでいただければ幸いです。

# Apple Developer Program 登録

## 用意したもの
- 2ファクタ認証を有効にしたApple ID
- クレジットカード(私の場合はMasterCard)  

個人や個人事業主の場合、基本的にはこれさえあれば登録は可能なはずです。

## 登録の基本的な流れ
[Apple Developer Program](https://developer.apple.com/programs/how-it-works/jp/)サイトの右上にある「登録」ボタンを押下して、あとは流れに沿って必要な情報の登録をしていきます。
詳細は他の方の記事や様々なサイトに載っているので割愛します。

### 参考サイト
- [Appleの開発者登録をする, iOSアプリ作成準備](https://i-app-tec.com/ios/developer-registration.html)
- [【2018年版】Apple DeveloperProgram 申請・登録方法と更新の流れ（法人の手順もあり）](https://backapp.co.jp/blog/11729/)
- [Apple Developer Program 登録手順【2020年7月時点最新】](https://www.yururiwork.net/apple-developer-program-%E7%99%BB%E9%8C%B2%E6%89%8B%E9%A0%86%E3%80%902020%E5%B9%B47%E6%9C%88%E6%99%82%E7%82%B9%E6%9C%80%E6%96%B0%E3%80%91/)

## つまずいたところ
登録を進めていくと、うまくいけば参考サイトにあるように支払ページに遷移するのですが、
私の場合、entityで個人/個人事業主を選択した後に以下のようなメッセージが表示され、先に進めませんでした。
> 「Your enrollment could not be completed.」

## 原因(説)
同じような現象に直面し、解消した方の原因・対処法として以下のようなものが見受けられました
- 18才未満は登録できない
`私は当てはまらないなぁ`
- アメリカのクレジットカードじゃないと登録できない（インドあたりの方で、アメリカのクレジットカードを使ったら登録できたという方がいらっしゃいました。）
`うーん、MasterCardってアメリカのカードだよなぁ`
- 住所(特に英語の住所)が変
`いろいろ書き方変えて登録してみたけどうまくいかない、、、`

## 問い合わせ
何日か調査してみましたが解決できないので、デベロッパサポートに問い合わせてみました。
すると、以下のような回答が、、、
> この度は Apple Developer Program Support にお問い合わせいただき、ありがとうございます。

> Apple Developer Program に登録ができないというお問い合わせをいただいております。

> 弊社で確認させていただきましたが、1つ以上の理由により、Apple Developer Program へのご登録を完了できませんでした。現時点ではご登録を進めることができません。

> 何卒ご理解をいただきますようお願いたします。

「原因を教えてください。」と問い合わせたのに対して、「理由が1つ以上あります。」と返ってきた。。。
全く答えになっていない。しかし、日本に関わらずこのような回答をされた人はネット中にかなりいました。
「面倒臭いから定型文で返しとけ。」みたいな感じなのでしょうか。
さすがにこの回答は酷すぎると思い、電話で問い合わせることにしました。
そうすると、以下のような回答が返ってきました。
> トラブルシューティングとしてご利用のブラウザが最新のバージョンであることをご確認ください。キャッシュおよび履歴を削除後に、同じ Apple ID を使用し再登録をお願い致します。

正直、そんなことで登録できるのか？と思いましたが、とりあえずやってみる。
ChromeとSafari両方で試したみたが、やはり状況は変わらず登録できない。
再度、仮説をぶつけつつ問い合わせると、
> 今回ご報告の件について社内で確認いたしましたが、再登録をされても同じエラーメッセージが表示される場合は、なんらかの理由によりご登録を進めることができません。またその理由については、ご登録の審査に関わる部分となりますので、詳細をご案内することができません。

> アメリカのクレジットカードの使用に関して言及されていらっしゃいますが、こちらではエラーの原因の確認が出来ない為、問題がクレジットカードにあるかどうか、お答え致しかねます。

> 新規の Apple ID にて再登録を試みていただくことも可能ではございますが、その登録が完了できるかどうかについてお約束ができません。ご理解いただければ幸いです。

要は「審査で引っかかった可能性が高いけど、何で引っかかったかは教えられない/わからない。」とのこと。

八方塞がりじゃないか、、、
もう自力で解決するしかないと思い立ち、思いつく限りの方法で大量のApple IDを作りました。

## 解決策
思った以上に長くなってしまいましたが、解決策です。
それはずばり、
> メールアドレス

わたしは当初もともと持っていたAppleIDで使っていたGmailのメールアドレスを使っていましたが、これが良くなかったようです。
ただ、これだけのために有料のメールアドレスを取得するのも嫌なので、さまざまな無料のメールアドレスでAppleIDを作ってチャレンジしたところ、iCloudのメールアドレスで登録することができました。
(Appleに関係のない、ましてやGoogleのメールアドレスなんて認めるわけがないだろ ってな感じなのでしょうか笑)

同じような壁に直面した方は、一度試してみてください。

ボソッ
(ダメなメールアドレスくらい、登録時に教えてくれたって良いじゃないか、、、)
VIM: dein.vimでプラグイン管理 (Windows10)

vimでプラグイン管理をしようと思いググりますが、window環境だと情報少ないですね。。
NeoBundle入れてから開発がdein.vimに移行したことに気が付きました。。泣

以下、備忘録です。

github:
Shogoさんありがとうございます。
https://github.com/Shougo/dein.vim

###インストール

```powershell:powershell
#インストーラーのダウンロード。
Invoke-WebRequest
https://raw.githubusercontent.com/Shougo/dein.vim/master/bin/installer.ps1 -OutFile installer.ps1
#-> %userprofile%/.cache/deinにインストールします。
./installer.ps1 ~/.cache/dein
```

###_vimrcの設定
```vimscript:~/_vimrc
"dein Scripts-----------------------------
if &compatible
  set nocompatible
endif
" Add the dein installation directory into runtimepath
set runtimepath+=~/.cache/dein/repos/github.com/Shougo/dein.vim
if dein#load_state('~/.cache/dein')
  call dein#begin('~/.cache/dein')
  call dein#add('~/.cache/dein/repos/github.com/Shougo/dein.vim')
  call dein#add('Shougo/deoplete.nvim')
  if !has('nvim')
    call dein#add('roxma/nvim-yarp')
    call dein#add('roxma/vim-hug-neovim-rpc')
    " ここに入れたいプラグインを記入
  endif
  call dein#end()
  call dein#save_state()
endif
" 文字化けする場合はエンコードの設定をここに入れる。
filetype plugin indent on
syntax enable
" If you want to install not installed plugins on startup.
if dein#check_install()
  call dein#install()
endif
"End dein Scripts-------------------------
```


```vimscript:プラグインインストール
" vim上で
:call dein#install()
```

文字化けした場合、エンコードの設定を、
filetype plugin indent on
の前に入れてやらないとダメなようです！

LGTMお願いします！
モチベーションがあがります！
Web Workers を使った JS マルチスレッド

# はじめに
昨今の Web サイトは昔と比べて Javascript での処理を多く行うようになっています。
そんな中、Javascript は基本的にシングルスレッドで処理を行うため、ボトルネックになってしまうことがあります。
これを解消するために `setTimeout` や `setInterval` を使って、擬似的な並列処理を行なったりしているかと思います。
Web Workers を使うとこうした並列処理を行うことができます。

# Web Workers の使い方
```javascript:doWork.js
self.addEventListener('message', function(e) {
  self.postMessage(e.data)
}, false)
```

```javascript:main.js
const worker = new Worker('doWork.js')

worker.addEventListener('message', function(e) {
  console.log('Worker said: ', e.data)
}, false)

worker.postMessage('Hello World')
```

doWork.js の処理は、worker スレッドで並列処理されます。
worker スレッドと main スレッドは、 post メッセージを使って通信を行います。
また、DOM 要素の操作は worker スレッドで行うことができないため、描画処理は main スレッドで行う必要があります。

# エラー処理

```javascript:error.js
self.addEventListener('message', (message) => {
    const value = 1 + undefinedVariable
})
```

```javascript
const worker = new Worker('error.js')

// エラーを表示する
worker.addEventListener('error', (error) => {
   console.log(error)
});

// メッセージを送信する
worker.postMessage('')
```

通常の処理は、 `message` イベントを捕捉して処理するのに対し、エラーの処理は、 `error` イベントを捕捉して処理を行います。

# Web Workers の停止
Web Workers を停止するには、 main スレッドからは、 `worker.terminate()` を呼び出すことで停止することができます。
また、worker スレッドからは、 `self.close()` を呼ぶことで停止させることができます。

# Web Workers で使える機能
* navigator オブジェクト
* location オブジェクト（読み取り専用）
* XMLHttpRequest
* setTimeout()/clearTimeout() と setInterval()/clearInterval()
* アプリケーション キャッシュ
* importScripts() メソッドを使った外部スクリプトのインポート
* 他のウェブ ワーカーの生成

# Web Workers で使えない機能
* DOM（非スレッドセーフ）
* window オブジェクト
* document オブジェクト
* parent オブジェクト

# おわりに
Google は、この Web Workers を効率よく使用したアプリケーションとして、[squoosh](https://squoosh.app/)を公開しています。
これは、画像の変換処理を Web で行い、その比較をリアルタイムで行えるアプリケーションになっています。
実際に使ってみるとその処理の速さが体感できるかと思います。
また、PWA にも対応しているので、アプリのように使用することもできるので、是非使ってみてください。

# 参考
https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API
checkboxについて

checkboxを作るときには、labelタグをつけようっていうお話。

checkbox作成時にlabelタグを付与した場合は、文字を押してもチェックに反応するが、

checkbox作成時にlabelタグを付与しない場合にはcheckboxを押すことでしたチェックの印をつけることが出来ない。

結論
checkbox作成時にはlabelをつけるとユーザーがチェックし易くなるので良い。

ちなみに、htmlに以下のように記載するとlabel有りのcheckboxを作成することが出来ます。
https://i.gyazo.com/a78ac71eac9dd7ea52cc984c3dca51e7.png



             laberあり
             <label>
                <input type="checkbox" name="q1" value="html">
                HTML
              </label>


              labelなし
                <input type="checkbox" name="q1" value="html">
                HTML
【Vagrant】仮想マシンの停止手順 【メモ】

###サーバーを起動している場合はサーバーを停止
phpのサーバーを使用している場合

```
$ php -S IPアドレス:8000 // 起動
$ ^C // Control+cでサーバー停止
```

###exitで仮想マシンから脱出

```
$exit
```
これで仮想マシンの外に出る

###仮想マシンを停止する

```
$ vagrant suspend // 仮想マシンの停止
```


###普通にパソコンを終了しても問題ないらしいけど...

仮想マシンの操作として基本的に作業を終了する場合は上の流れで終了することで、操作を慣れるようにする。毎回やりましょう。
AtCoderのシンタックスハイライトをマシにするUserScriptを作った

# 問題

2020年9月現在、AtCoderの提出済みコードのシンタックスハイライトは言語に応じたハイライトを行なっていません。

その結果、キーワードが正しく色付けされなかったり、識別子にプライムを使える言語 (HaskellやOCaml) でハイライトが壊れる、というような現象が起こっています。例えば [この提出](https://atcoder.jp/contests/abc177/submissions/16439156) の44行目、 `U.foldl'` 以降が全部文字列の色になっています。

この問題は1年半前に筆者が原因を特定してchokudaiさんに報告しましたが、なんやかんやでまだ修正されていません。

ただひたすら待っているだけなのもアレなので、ユーザー側でこの問題を修正するUserScriptを作ってみました。Firefox上のGreasemonkeyとChrome上のTampermonkeyで動作確認しています。

# 作ったもの

GreasemonkeyやTampermonkeyを導入している方はこのURLを踏むとインストールできます：

<https://gist.github.com/minoki/ca14e78062e41112ee3248cf18c9718a/raw/848b9e1e0a4e01e675da6668f3f71e22d5aa8434/atcoder-code-prettify.user.js>

ソースを読みたい方はこっちです：

<https://gist.github.com/minoki/ca14e78062e41112ee3248cf18c9718a>

# 技術的な話

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">AtCoderのHaskellシンタックスハイライトで識別子中のプライムがおかしい件、完全に理解してしまった。AtCoder側の問題やんけ</p>&mdash; damepo-lab-137-268-271-443.example.com (@mod_poppo) <a href="https://twitter.com/mod_poppo/status/1112799432502710273?ref_src=twsrc%5Etfw">April 1, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">まず、現状のAtCoderではcode-prettyを適用する際に言語名を指定していないため、C++のような定番言語であっても正確なハイライトが行われていません（例：stringはC++のキーワードではないのにキーワードと同じ色でハイライトされている）。言語名は&lt;pre&gt;のclassで指定できます（lang-cpp等）</p>&mdash; damepo-lab-137-268-271-443.example.com (@mod_poppo) <a href="https://twitter.com/mod_poppo/status/1112804424865337345?ref_src=twsrc%5Etfw">April 1, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">次に、そこまでメジャーではない言語（Haskell等）に正確なハイライトを施すには、その言語用の「extension」を読み込む必要があります。extensionを読み込むには、&lt;script&gt;タグで読み込んでいるrun_prettifier.jsに ?lang=hs 等のオプションをつけます。詳しくは→ <a href="https://t.co/DA7m2QSIAZ">https://t.co/DA7m2QSIAZ</a></p>&mdash; damepo-lab-137-268-271-443.example.com (@mod_poppo) <a href="https://twitter.com/mod_poppo/status/1112805374195752960?ref_src=twsrc%5Etfw">April 1, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">この2つを適切に設定すれば、code-prettifyが対応している言語に関して正しくハイライトが行われるはずです。</p>&mdash; damepo-lab-137-268-271-443.example.com (@mod_poppo) <a href="https://twitter.com/mod_poppo/status/1112806567722663936?ref_src=twsrc%5Etfw">April 1, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

UserScriptとして実装するにあたり、`run_prettifier.js`のURLの末尾に「`?lang=hs`」みたいなやつをつけるという選択肢は取れません。なので、自前で必要なスクリプトを読み込んでいます。

言語・処理系名の部分のXPathを見ればわかりますが、AtCoderのサイトのDOM構造の改変に脆弱です。Firefoxのインスペクターからコピってきたらこうなりました。もうちょっと上手い書き方があるとは思いますが、実際に動かなくなってから考えます。

ちなみに、2020年9月現在、[code-prettifyの開発は既に終了しているようです](https://github.com/googlearchive/code-prettify)（archivedになっている）。AtCoderがシンタックスハイライト方法をcode-prettify以外のもの（あるいはcode-prettifyの適当なfork）に変えない限り、最近の言語機能、例えばC++14のdigit separatorが正しくハイライトされる日は来ないと思われます。
Java 文字列

#【Java 文字列】

業務内で使用する Javaの文字列のメモです。
開発時に使用しているのでまとめました。

##StringBuilder

StringBuilderクラスは、インスタンス生成してから使用可能
文字列操作を行うためのクラスである。

文字列結合では、appendメソッド、引数を利用し結合したい文字列を使用する。

多数の文字列を連結する場合、最も高い性能を発揮するStringBuilderの使用を試みるべき。

```java
//業務内で使用している形式の一部を抜粋

//インスタンス生成
StringBuilder sb = new StringBuilder();

//SQL生成
sb.append("SELECT");
sb.append("Sample");
sb.append("Sample2");
sb.append("Sample3");
sb.append("FROM");
sb.append("SampleTable");


//※365日24時間、バッチ処理を行っているので、処理速度が遅くならないように使用している。
```

##StringBufferを使用する場合


スレッド使用時は、StringBuilderだと不具合が起こるかもしれない。
そのような代わりには、StringBufferクラスを使用する。

StringBuilderをマルチスレッド環境で使うのは望ましくないので、
スレッドセーフ性が保証されていたら、パフォーマンスのいいStringBuilder。
スレッドセーフ性が保証されていなかったら、StringBufferで代用する。

基本的な書き方はほぼ同じである。

##余談

会社の先輩方は、Javaを20年ぐらい長らく業務で使ってこられた方が多いので、Java初心者の私としては身近にメンターのような方が大勢いるのでとても恵まれているなと思いました。
expoで「There was a problem running the requested app」と表示されてビルドできない

こんにちは！

「React Native + Expo」環境において、
実機でテストをしようとしたところ、ビルドできないエラーが出たので、共有したいと思います。

## エラー： `There was a problem running the requested app.`
`expo start`を実行し、実機でQRコードを読み込み、ビルドしようとしたところ、以下のエラーが出ました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659719/a06844e3-a0ef-0e36-cc5d-b5d24f29ea58.png" width="50%" />
↑iPhone画面スクリーンショット↑

以前はできたのに、いつもとWi-Fiを変えて実行したら、ビルドできなくなりました。。。

## 原因
どうやらネットワーク関連に問題があったようです。
`expo start`コマンドを実行すると、デフォルトではローカル環境に立ち上がるそうです。
そのため、開発用PCと実機（iPhone、Android）が同一ネットワークにいる必要があるそうです。

## 解決策
コマンドに`--tunnel`オプションをつけて、実行する
`--tunnel`：ネットワークの外部から接続

```
$ expo start --tunnel
```

**これで、無事に実機でビルドすることができました！！**


## 参考サイト
・stack overflow
https://stackoverflow.com/questions/56715203/there-was-problem-loading-requested-app-it-looks-like-you-may-be-using-lan-url

・qiita
https://qiita.com/shoichi1023/items/ae0a285aea1950841934
ありがとうございました！
webpack-dev-serverの自動更新が動かない

# はじめに
ファイル構成をちょっと変えたときにwebpack-dev-serverのホットリロードが全く動かなくなった

[webpack-dev-serverのauto-reloadでハマったこと](https://qiita.com/temori1919/items/8f315bd69454ec5236b1)  を読んだら、ファイル構成を変えて(index.htmlをbundle.jsの出力先と同じ階層に置く？)解決していたが、自分はファイル構成変えたくなかったので調べた

なんとなく「webpack-dev-server 自動更新 されない」とかで解決策が出てきにくい気がしたので残しておく


# 環境

#### ファイル構成

```
project
  |--dist
  |   |--index.html
  |   |--js
  |      |--bundle.js (出力されるjs)
  |--src
  |   |--js
  |      |---index.js (バンドルするjs)
  |      |---module.js (indexで読み込むmodule)
  |--webpack.config.js

```

#### package.json (略)

```json:package.json
  "scripts": {
    "start": "webpack-dev-server --open",
    "watch": "webpack --watch",
  },

  "devDependencies": {
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
```
#### webpack.config.js (略)

```javascript:webpack.config.js
const path = require('path');
const outputPath = path.resolve(__dirname,'dist/js');
const webpack = require('webpack');

module.exports = {
	entry: './src/js/index.js', // エントリポイント

	output: {
		path: outputPath,
		filename: 'bundle.js' // バンドル後のファイル
	},

	devServer: {
		contentBase: path.resolve(__dirname, 'dist/'),
		inline: true,
		hot: true
	}
}

```

#### module.js
```javascript:module.js
export default function hello(){
  console.log('Hello, webpack!!');
}
```
これを`index.js`でimportしている


#実行

```
$ npm run watch
```

```
$ npm start
```
この状態で`module.js`を適当に変更

```javascript:module.js
export default function hello(){
// console.log('Hello, webpack!!');
   console.log('Reloaded');
}
```

これでホットリロードを期待してたけどなぜか動かない

# 解決策
`webpack.config.js`のoutputに`publicPath`を追加したら動くようになった

```javascript:webpack.config.js
// ~~~~~~~~~~~~~~~~~~~~~~~ //
module.exports = {

    output: {
        path: outputPath,
+       publicPath: '/js/',
        filename: 'bundle.js'
    },

// ~~~~~~~~~~~~~~~~~~~~~~~ //
```

#publicPathとは？

ここに詳しく書いてあるような気がする

Webpackの "publicPath"は何をするのですか？
- https://www.it-swarm.dev/ja/javascript/webpack%E3%81%AE-publicpath%E3%81%AF%E4%BD%95%E3%82%92%E3%81%99%E3%82%8B%E3%81%AE%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/1050990542/
Docker-composeとは(個人的備忘録)

##Docker Composeとは
マルチコンテナのdockerアプリケーションを定義して実行するためのツール。よく使われる用途として開発環境や、自動テストの実行環境を立ち上げる際に使用される。使い方としてはwebサーバ、DBサーバ、キャッシュサーバなどの定義を、1つのymlファイルに記述しておくことで、そのymlファイルを元にアプリケーション実行に必要なコンテナを、まとめて起動することができる。ymlとは構造化されたデータを表現するためのフォーマットで、ymlを使ったことがなくても、直感的に記述することができる。ファイルを見れば構造を理解できる。

##Conpose実行のステップ
1 **Dockerfile**を用意するか、**使用するイメージ**をDockerHubなどに用意する。
2 **docker-compose.yml**を定義する
コンテナごとに起動時の設定を書き込む。これはdocker runコマンドでイメージ名や、各種フラグを指定するようなもの。
3 **docker-compose up**を実行する
docker-composeが置いてあるディレクトリでdocker-compose upを指定する。しかしそのままだとフォアグラウンドで実行されるので、-dオプションでデタッチで実行することも多い。実行するとdocker-compose.ymlの定義に従って、各コンテナが実行される。

##docker-compose.yml
```dockerfile

version: '3'                -#docker-composeのファイル形式のバージョン
services:
  web:                      -#サービス名、任意の名前をつけることができる
    build: .                -#docker-compose.ymlと同じディレクトリをビルドコンテキストとしている。そのためymlファイルと同じディレクトリにwebサービス用のdockerfileを作成する必要がある
    ports:                  -#コンテナ外部に公開するポートとマッピング先のポートを示している。
    - "5000:5000"
    volumes:  
    - .:/code               -#bind mountでdocker-compose.ymlの存在するディレクトリをコンテナの/codeディレクトリにマウントしている。
    - logvolume01:/var/log  -#volumesに定義したlogvolume01のvolumeをwebサービスのコンテナの/var/logにマウントしている。
    links:
    - redis                 -#webサービスからredisサービスへのリンクを設定している
    redis:
    image: redis            -#redisサービスでは単純にredisイメージを使ってコンテナを立ち上げている。
volumes:
  logvolume01               -#名前を付けたvolumeをマウントする場合は、volumesに定義しておく必要がある。
                             明示的に{}としているが書かなくても良い。volumeに使用するdriverなどの設定を書く場合は、
                             volume名の下に設定を続けて書くことができるが、単純にデフォルトのvolumeを使う場合は設定は不要。
```

##docker-composeの確認
```
% docker-compose -v
docker-compose version 1.26.2, build eefe0d31
```
ダウンロードされていればdocker-composeのバージョンが表示される。
エクセルVBA　テーブルにも使える全シートのオートフィルターをクリア


<h2>プログラムを組んだ目的<br></h2>

<p>ブックを閉じた時にオートフィルターの解除をするようにマクロを組んで次に使う人が使いやすくするためのマクロです。</p>



<p>テーブル機能を使っていてもクリアをすることができます。<br><br><br><br></p>



<h2>プログラムの組み方</h2>



<p>「Alt＋F11」でVBAを開きます。</p>



<p>「<strong>ThisWorkbook</strong>」をダブルクリックで開き、以下のプログラムを記述していきます。</p>


<figure class="wp-block-image size-large"><img src="https://toyohiro.xyz/wp-content/uploads/2020/09/image.png" alt="Excelを起動した時にIMEも起動 ～3行マクロ" class="wp-image-738"/></figure>



<div class="hcb_wrap"><pre class="prism undefined-numbers lang-plane" data-file="ThisWorkbook"><code>’イベントプロシージャの記述
Private Sub Workbook_BeforeClose(wb as Boolean)

Dim ws as Worksheet


’全シートを順番にactiveにするためのコード
For Each ws In Worksheets
	ws.activate

　
　’もしフィルターモードがtrueならフィルターをクリア
	If ws.Filtermode = True Then
	　　ws.ShowAllData
	End If

Next

End Sub</code></pre></div>



<h2><br><br><br><br>プログラムの説明</h2>



<ol><li>イベントプロシージャを使ってブックを閉じた時にイベントが発生するように設定します。</li><li>ワークシートを変数に代入する</li><li>「For Each」を使って全てのシートオブジェクトを順番に取得するための記述をする（wsは変数）</li><li>「ws.activate」　でシート１から順番にアクティブにしていく</li><li>「if文」でもしシートでオートフィルターが使用されていたら全てを表示するように記述（フィルターのクリア）</li><li>「Next」によって全シート文繰り返し処理を実施する<br><br><br><br></li></ol>



<p>テーブルを使用していると、「AutoFilterMode」を「False」にしても解除ができなかったので作成してみました。</p>



<p>共有して使用するファイルだったので、次に使う人が使いやすくなると思います。</p>
GitHub Actions を使って Docker イメージをテスト、ビルド、そして GitHub Container Registry にpushする

## 用意するもの

- Githubリポジトリ
- リポジトリ内のDockerfile

## 基本設定

### Github Actions 用 Token の作成

Githubの設定からPATの作成、位置は：

`Github -> Settings -> Developer settings -> Personal access tokens`

権限：`write:packages` `read:packages`をチェックします

### Tokenの保存

リポジトリの `Settings -> Secrets` の中に `New Secrets` をクリックして：

- Name: `CT_PAT`
- Value: `さっき作成したToken``

## Github Actions の作成

### Workflowの作成

```yml:docker-publish.yml
name: Docker

on:
  push:
    # `master` ブランチを `latest` としてビルド
    branches:
      - master

    # バージョン `v1.2.3` タグをリリースとしビルド
    tags:
      - v*

  # PRがあればテストする
  pull_request:

env:
  # TODO: Dockerイメージの名前
  IMAGE_NAME: author/xxxx

jobs:
  # テスト
  # 解説： https://docs.docker.com/docker-hub/builds/automated-testing/
  test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Run tests
        run: |
          if [ -f docker-compose.test.yml ]; then
            docker-compose --file docker-compose.test.yml build
            docker-compose --file docker-compose.test.yml run sut
          else
            docker build . --file Dockerfile
          fi
  # GitHub Packages に Dockerイメージを push する
  # 解説： https://docs.docker.com/docker-hub/builds/
  push:
    # テストを確認する
    needs: test

    runs-on: ubuntu-latest
    # PRではない時に実行
    if: github.event_name == 'push'

    steps:
      - uses: actions/checkout@v2

      - name: Build image
        run: docker build . --file Dockerfile --tag $IMAGE_NAME

      - name: Log into GitHub Container Registry
      # ここで Secrets に設定した `CR_PAT` を使って ghcr.io にログインする
        run: echo "${{ secrets.CR_PAT }}" | docker login https://ghcr.io -u ${{ github.actor }} --password-stdin

      - name: Push image to GitHub Container Registry
        run: |
          IMAGE_ID=ghcr.io/${{ github.repository_owner }}/$IMAGE_NAME
          # 設定したDockerイメージの名前を小文字にする
          IMAGE_ID=$(echo $IMAGE_ID | tr '[A-Z]' '[a-z]')
          # バージョン文字の処理
          VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')
          # タグから "v" を除去
          [[ "${{ github.ref }}" == "refs/tags/"* ]] && VERSION=$(echo $VERSION | sed -e 's/^v//')
          # masterブランチならば `latest` タグをつける
          [ "$VERSION" == "master" ] && VERSION=latest
          echo IMAGE_ID=$IMAGE_ID
          echo VERSION=$VERSION
          docker tag $IMAGE_NAME $IMAGE_ID:$VERSION
          docker push $IMAGE_ID:$VERSION
```

このファイルをコミットしたら自動的に一回実行するはずです、ログはリポジトリのActionsのところに見えます。
このActionsはdocker-composeにも対応します。

実際の応用は、
今開発中のOVaaSのFront-Endリポジトリを参考して下さい：
https://github.com/OVaaS/ovaas-front


## 用語

- PAT：Personal Access Token
PlatformIOでTTGO T-Displayを動かす

TTGO T-Displayを購入したのですが、いろんなボードが次々と発売される昨今、早くも次のボードが手に入ったので、積みボードになってしまう前に触り方だけでも残しておこうと思います。

![TTGO T-Display](https://raw.githubusercontent.com/Xinyuan-LilyGO/TTGO-T-Display/master/image/pinmap.jpg)  

TTGO T-Displayのサンプル（初期出荷状態で入っているもの）は[こちら](https://github.com/Xinyuan-LilyGO/TTGO-T-Display)にあります。
基本的にはここに書いてある通りのことをPlatformIOでやっただけなのですが、
その前にまずPlatformIOで新規プロジェクトを作成、BoardはTTGO T1 を選択します。
![2020-09-05_172146.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/c04c37f4-fd58-28d2-1fc7-3dac279cf1bc.png)

プロジェクトを作成したら以下の手順で進めます


## 1.Install the following dependency library files:
- [TFT_eSPI](https://github.com/Bodmer/TFT_eSPI)        
- [Button2](https://github.com/LennartHennigs/Button2)

これは PlatformIO > Libraries でそれぞれ "TFT_eSPI" "Button2" で検索すると出てくるのでそのままインストールします。
![2020-09-05_170534.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/0c385f07-db43-03f7-956e-c53474fc2a47.png)

## 2.TFT_eSPI settings
- Install TFT_eSPI, in `TFT_eSPI/User_Setup_Select.h`, comment out the default settings `#include <User_Setup.h>` , select `#include <User_Setups/Setup25_TTGO_T_Display.h>` , Save Settings.

これは PlatformIO > Libraries > Installed 
から先ほどインストールした TFT_eSPI を選択し、Reveal ボタンを押すとインストールフォルダが開きます。
![2020-09-05_171057.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/f22efc04-602c-2692-ccde-0188c1d0645a.png)

開いたフォルダにある User_Setup_Select.h を開き、書いてある通り

```
//#include <User_Setup.h>           // Default setup is root library folder
```
をコメントアウト、

```
#include <User_Setups/Setup25_TTGO_T_Display.h>    // file for ESP32 and TTGO T-Display ST7789V SPI bus TFT
```
のコメントアウトを外します。

次に[TTGO-T-Display.ino](https://github.com/Xinyuan-LilyGO/TTGO-T-Display/blob/master/TTGO-T-Display.ino)の中身をそのままmain.cppコピペし、
新規ファイル>bmp.h を作成し、ここに[bmp.h](https://github.com/Xinyuan-LilyGO/TTGO-T-Display/blob/master/bmp.h)の中身そのままコピペします。

![2020-09-05_171608.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/1be260e4-70cb-1ccd-58ef-8606a378fd76.png)

後はビルドすれば工場出荷時のサンプルが表示されます。

![sample](https://raw.githubusercontent.com/Xinyuan-LilyGO/TTGO-T-Display/master/image/SD.jpg)