OmniAICreator/Qiita-1.07M huggingface dataset:
少数のあれこれ【備忘】

# 小数の桁数を取得する

```php
$num1 = 12.345;
strlen(substr(strrchr($num1, '.'), 1));
```

## 解説

- strrchr関数を使用して、ドット[.]の開始位置を取得
- substr関数を使用して、ドット[.]の次の値以降を取得
- strlen関数を使用して、取得文字の長さを取得


## 参考

- [strrchr](https://www.php.net/manual/ja/function.strrchr.php)
- [substr](https://www.php.net/manual/ja/function.substr.php)
- [strlen](https://www.php.net/manual/ja/function.strlen.php)



# 小数点以下の数字を指定桁数だけ丸める

- 丸める
    - 1.23 という値を小数点第一位で返したい場合、1.2で返す
    - 1.28 という値でも同様に小数点第一位で返したい場合は、1.2で返す
    - 上記数字を小数点第二位で返したい場合、1.23 は、1.23を返し、1.28 は、1.28を返す


```php
$digit = 3;
$fraction = 1.2345;
round($fraction + 0.5 * pow(0.1, $digit), $digit, PHP_ROUND_HALF_DOWN)
```

## 解説

- pow関数を使用して、指数を作る
    - 末尾に0.5を足す事で、繰り上げ・下げをせず
      元々の値から指定した桁数だけ切り捨てて返すようにするため
- round関数を使用して、浮動小数点を$precisionの値だけ丸める
    - その時、第3引数に PHP_ROUND_HALF_DOWN を指定して、0に近く方向に値を丸める
    - 例えば、1.5 → 1 にして、-1.5 → -1 にする

## 参考
- [round](https://www.php.net/manual/ja/function.round.php)
- [pow](https://www.php.net/manual/ja/function.pow.php)
- [PHP で小数点以下の桁数を指定して切り上げ・切り捨てする方法](https://gotohayato.com/content/491)


# 小数の整数部と小数部をそれぞれ取得する

```php
$num1 = 12.345;

$integer = floor($num1);
$fraction = $num1 - $integer;
$digit = strlen($integer);
```

## 解説

- floor関数を使用して、整数部分を取得
- 元の値から、整数部分を引いて、少数部分を取得
- strlen関数を使用して、整数部分の桁数を取得

## 参考

- [PHPの – 数値の全体と小数部分を取得する方法？](https://codeday.me/jp/qa/20181215/67326.html)
- [数値の桁数を数える](https://gray-code.com/php/count-of-numerical-value/)
Enviro pHATを使って室内環境モニタリング

下書きに残っていたので供養

# 「いわゆるIoT」を感じられる一品に
Raspberry Piを色々なセンサやアクチュエータと組み合わせて、色々なことができます。

中には電気回路設計をしなくても良い（オールインワンの）ものもあります。
例えばHATは、GPIOにそのまま差し込んで色々なことができるシロモノです。

ここでは、周りの環境測定に特化したEnviro pHATを使ってみます。

![enviro_phat_board.jpg](https://qiita-image-store.s3.amazonaws.com/0/119807/691b8bf1-0ac8-ce7b-6ea3-ce58f826dfd6.jpeg)
[PIMORONI: Getting started with Enviro pHAT](https://learn.pimoroni.com/tutorial/sandyj/getting-started-with-enviro-phat)より

# Enviro pHATの使い方

基本的に下記サイトに書いてあることが全てです。
[PIMORONI: Getting started with Enviro pHAT](https://learn.pimoroni.com/tutorial/sandyj/getting-started-with-enviro-phat)


pythonライブラリを用意してくれているので、非常に簡単に使えます。

curlして、python上でimportすればおk

``` terminal
curl https://get.pimoroni.com/envirophat | bash
```

``` python
import envirophat as ev
```

測定上の精度や単位に注意が必要です。

精度は、型番から調べることができます。

単位はドキュメントを読むと書いてあります。


# Enviro pHATで出来ること
## 1. 光・色測定
[TCS3472](http://ams.com/jpn/node_78/node_98954/node_142236/TCS34725/TCS3472-Datasheet) による光・色測定が可能。

```python
ev.light.light()         #光強度 [lux]
r, g, b = ev.light.rgb() #色強度 [-] (0-255)
```

## 2. 気圧・温度測定
[BMP280](https://www.bosch-sensortec.com/bst/products/all_products/bmp280) による気圧・温度測定が可能。湿度センサはなし。

``` python
ev.weather.pressure()    #気圧 [hPa]
ev.weather.temperature() #温度 [degC]
```

## 3. モーションセンサと磁気測定
[LSM303D](http://www.st.com/ja/mems-and-sensors/lsm303d.html) による３軸加速度・磁気測定が可能。

``` python
x, y, z = ev.motion.accelerometer() #加速度 [G (= 9.806 65 m/s2)]
ev.motion.heading()                 # 向き [deg]
```

## 4. LEDの点灯

``` python
ev.leds.on()  #点灯
ev.leds.off() #消灯
```

## 5. アナログ入力
[ADS1015](http://www.tij.co.jp/product/jp/ADS1015) によるAD変換が可能。
詳細は[データシート](https://cdn-shop.adafruit.com/datasheets/ads1015.pdf)を参照。


# 室内環境モニタリング
ここでは、室内の気圧・温度を測定して、１時間後のそれぞれの値を簡単に予測したいと思います。
いくつかのパッケージがインストールされていることを前提とします。
普通にpipでインストールできます。

```
sudo pip install --no-cache-dir ipython matplotlib pandas
```

(cacheの問題がmatplotlib導入時に良く起こるみたいです。)


## a. 気圧・温度測定
測定は先に述べたように簡単に行えます。


## b. 測定値のプロット
測定しながらインタラクティブにプロットするための方法として、ここではJupyter Notebook上

## c. 天気の予測
ABC - 133- A&B&C&D

#AtCoder ABC 133 A&B&C&D
[AtCoder - 133](https://atcoder.jp/contests/abc133)

#A - T or T

```java
	private void solveA() {
		int n = nextInt();
		int a = nextInt();
		int b = nextInt();

		out.println(n * a > b ? b : n * a);
	}
```

#B - Good Distance

 - $(i < j)$　の条件を忘れないように

```java
	private void solveB() {
		int n = nextInt();
		int d = nextInt();
		int[][] wk = Stream.generate(() -> IntStream.range(0, d).map(i -> nextInt()).toArray()).limit(n)
				.toArray(int[][]::new);

		int res = 0;
		for (int i = 0; i < n; i++) {
			//i < jに注意
			for (int j = i + 1; j < n; j++) {
				long tmp = 0;
				for (int k = 0; k < d; k++) {
					tmp += Math.pow(wk[i][k] - wk[j][k], 2);
				}
				long tmpRes = (long) Math.sqrt(tmp);
				if (Math.pow(tmpRes, 2) == tmp) {
					res++;
				}
			}
		}

		out.println(res);
	}
```

#C - Remainder Minimization 2019

 - 最大(r)を減らせばなんとかなる？
    - mod 2019 なので、数値は0 - 2018を繰り返す
        - lを起点として0-2018を繰り返す
        - $lからr$まで全て試すのではなく、$lからmin(l+(2019*2),r)$の小さい方までを試せばよい
            - $0,1,2・・・2018,0,1,2,・・・2018$　まで試せれば最小値である0,0の組み合わせを選択できる
    - 二つの数値の理想的な最小は0,0の組み合わせ
        - r-lが2019*2より大きい場合
        - r-lが2019*2より小さい場合はその限りではない

```java
	private void solveC() {
		final int CONST_MOD = 2019;
		int l = nextInt();
		int r = nextInt();
		/*
		 * とりあえず最大を減らさないと何もできない。
		 * l+2019かrかどちらか小さいほうを最大値として採用（MODなので）
		 * l+2019で1周期。ただ、これだと最小値が1回しか出てこない。
		 * +(2019*2)2周しておけば1が2回出てくる。
		 *
		 */
		int wkR = Math.min(l + (CONST_MOD * 2), r);
		int res = 2020;
		for (int i = l; i <= wkR; i++) {
			for (int j = i + 1; j <= wkR; j++) {
				res = Math.min(((i % CONST_MOD) * (j % CONST_MOD)) % CONST_MOD, res);
			}
		}

		out.println(res);
	}

```

#D - Rain Flows into Dams

 - 連立方程式を立てて解いた
    - ダムの送料を計算して、どこか一つの山の雨を求める
    - どこか一つの山が決まれば他も決めることができる
    - 山の数は奇数なので、1 -> 3 -> 5 -> 7 -> 9 ・・・と増える
        - 常に二つずつ山が増えるので、式は次のように+-を繰り返す
            - 山A = ダム1 - ダム2 + ダム3 - ダム4 + ダム5 - + - + - + ・・・

例：2

||||||||||||
|:--|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|--:|
|ダム||3||8||7||5||5|
|山|a||B||C||D||E||
||2||4||12||2||8||

```matlab
	 
	  ダム1 = 山A/2 + 山B/2  ->  ダム1*2 = 山A + 山B  ->  山B =  ダム1*2 - 山A
	  ダム2 = 山B/2 + 山C/2  ->  ダム2*2 = 山B + 山C  ->  山C =  ダム2*2 - 山B
	  ダム3 = 山C/2 + 山D/2  ->  ダム3*2 = 山C + 山D  ->  山D =  ダム3*2 - 山C
	  ダム4 = 山D/2 + 山E/2  ->  ダム4*2 = 山D + 山E  ->  山E =  ダム4*2 - 山D
	  ダム5 = 山E/2 + 山A/2  ->  ダム5*2 = 山E + 山A  ->  山A =  ダム5*2 - 山E

	  上の式を変形してまず山Aを求める
	  山A = ダム1 - ダム2 + ダム3 - ダム4 + ダム5
	 
	  山Aが決まれば山B以降は決まる
	  山B = ダム1*2 - 山A
	  山C = ダム2*2 - 山B
	  山D = ダム3*2 - 山C
	  山E = ダム4*2 - 山D
```

```java
	private void solveD() {
		int n = nextInt();
		int[] wk = IntStream.range(0, n).map(i -> nextInt()).toArray();

		long a = 0;

                //偶数番目のダムは+、奇数番目のダムは-
		for (int i = 0; i < wk.length; i++) {
			if (i % 2 == 0) {
				a += wk[i];
			} else {
				a -= wk[i];
			}
		}
		long[] mountain = new long[n];
		mountain[0] = a;
		//最後のヤマは山Aのことなので除外
		for (int i = 0; i < mountain.length - 1; i++) {
			mountain[i + 1] = wk[i] * 2 - mountain[i];
		}
		StringBuilder builder = new StringBuilder();
		for (long l : mountain) {
			builder.append(l + " ");
		}
		out.println(builder.toString().trim());
	}
```
kerasでフォルダ内の画像を訓練とテストデータに別ける方法

# はじめに
kerasの本とかを参考にしていると、物理的にフォルダを訓練とテストデータに別けて使う例が多い気がする。
自分で簡単にやる分には、フォルダ一つでライブラリでいい感じにやってほしいと思い公式doc見てオプションがあったのでメモ。

# 条件
kaggleのデートセットで画像が種類のフォルダごとに別れているような場合に使う。

# ソース
データの水増しとか、他のオプションはなし。

```python:画像データ前処理
#規格化と訓練データと検証データの比率
train_datagen = ImageDataGenerator(
    rescale=1./255,
    validation_split=0.2
)
# 訓練データ
path = 'フォルダのパス'
size = '画像のサイズ'
train_generator = train_datagen.flow_from_directory(
    path,
    target_size=(size, size),
    batch_size=20,
    class_mode='categorical',
    subset='training',
)
# 検証データ
validation_generator  = train_datagen.flow_from_directory(
    path,
    target_size=(size, size),
    batch_size=20,
    class_mode='categorical',
    subset='validation',
)
```
最長AB列を求める

#最長AB列を求める
文字'A'と文字'B'からなる文字列Sがあります。
Sに含まれる連続した区間で'A'と'B'の数が等しいものの最長の長さを答えよ。

#ソースコード
```php
<?php
//入力値
$nyu = "ABBBAAAAA";
//評価する値(それぞれの区切った値を配列に格納)
$hyo1 = "A";
$hyo2 = "B";
$arrray1=explode($hyo1, $nyu);
$arrray2=explode($hyo2, $nyu);

//A、B配列の数分だけ、レングスを格納する
for($i = 0; $i < count($arrray1); $i++){
  $arr1_len[$i] = strlen($arrray1[$i]);
}
for($i = 0; $i < count($arrray2); $i++){
  $arr2_len[$i] = strlen($arrray2[$i]);
}


//取得した配列のmax値を取得
$arr1_max = max($arr1_len);
$arr2_max = max($arr2_len);
//A,B双方で取得したmax値の低いほうを取得
$arr_min = min($arr1_max,$arr2_max);

//結果値
$kekka = $arr_min * 2;
print($kekka);

?>
```
【超初心者】これからパソコン買ってプログラマ目指す in 2019

#まぁ、日記みたいなもんだし...
ー目的がないなら、本に書いてある通りにすすめればいいじゃない。

インフラって動きモノ作らないから、何やってるかわかってもらえないし、地味だよね。
ある程度、プログラムも書けたら楽しいのかな？
なんかよくわかんないけど、最近ではPythonがアツいらしい(遅かったような？)


##ざっくり自己紹介
-　業務ではWindows系にたぶんに触れている
-　基本情報技術者試験くらいなら難なくわかる程度
-　バッチファイル(.bat)、VBAなら読める(書けない)
-　C#なら数十行程度の監視ツール作成経験あり(常駐アプリ)
-　Qiitaはじめて(ﾜｸﾜｸﾄﾞｷﾄﾞｷ)
-　10日で覚えるシリーズ脱落者(PHP,JavaScript,C#は積読止まり)

##読む人(対象)
-　~~暇人~~
-　プログラミングやったことないけど、ITわかる(?)方
-　最効率で学びたいとは思わない方
-　初学者ゆえの間違いに気づき、指摘し、直していきたいという方

##PCの選定基準(好みの話)
今回、私はなけなしの3万を握り締めて、ノートPCを購入しました。譲れないポイントは以下です
-　Windows10Homeがついているモデル(中古だとOS無いのも売っている)
-　SSD搭載のモデル(eMMCはSSDではない、繰り返すeMMCはSSDではない。)
-　SSDの大きさは256GBだと足りないかな?(未検証。連載続けばわかります。)
-　プロセッサはBroadwell i3以上(プロセスルールが14nmでないと置いて行かれてる気がして...)(i3-5XXXXとか。今回はi3-5010U)メモリは8GB以上(重いとつらいからね。)
**持ち歩かないのであれば、当然デスクトップの方が安く高性能を選べます**

##PC側の準備
-　一般ユーザ権限のWindowsユーザを作成
-　Chromeの導入⇒[Chrome](https://support.google.com/chrome/answer/95346?co=GENIE.Platform%3DDesktop&hl=ja)
-　7Zipの導入⇒[7-Zip]
(https://sevenzip.osdn.jp/)
-　Visual Studio Code の導入⇒[VS Code](https://code.visualstudio.com/download#)
-　Pleiades の導入⇒**7-ZipでCドライブ直下に解凍**[pleiades]
(http://mergedoc.osdn.jp/)
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461555/d6077de3-2828-0194-3a30-06be83a4a516.png)

_とりあえず、今回は準備だけなので、細かい設定の調整は別途まとめます_

##Windowsの見た目調整について(Windows10 ビルド:1903)
なんだかんだWindows10標準のままでは、ちょいちょい見づらいので、直します。
-　タスクバーを右クリック→検索→「表示しない」
-　タスクバーを右クリック→Cortana→表示しない
-　タスクバーを右クリック→タスク ビューボタン→表示しない
-　タスクバーを右クリック→タスクバーにPeople→表示しない
-　タスクバーを右クリック→「タスクバーの設定」→通知領域の「タスクバーに表示するアイコンを選択します」→「常にすべてのアイコンを通知領域に表示する」をオンに
-　「ダウンロード」などの適当なフォルダを開き、「表示」→「オプション」の「表示タブ」から「登録されている拡張子は表示しない」のチェックを外し「フォルダーに適用」→「はい」→「OK」
S3からRedshiftにcsvデータを読み込む方法

# はじめに
データ分析の独学をするときに環境としてAWSのRedshiftを使おうとしたが、
そもそも初心者なので、色々と手こずった。久しぶりメモとして投稿。

# ロール作成
Identity and Access Management (IAM)にルールを決めることができるので、
AmazonS3ReadOnlyAccessのみを利用できるルールを作る。

# クラスタ作成
Redshiftは無料枠があるので、それを利用する。
クイック起動して、ロールを設定してあげる。

# Query editor
[公式doc](https://docs.aws.amazon.com/ja_jp/redshift/latest/mgmt/query-editor.html)

データベースの接続をする(初回のみ)クラスタの設定見れば問題ない。
あとは普通のデータベースと同じ。テーブル作る。

# S3にアップロード
特記ない。

# S3から読み込む
```powershell:コピーコマンド
COPY 'テーブル名'
FROM 's3のパス'
IAM_ROLE 'ロール名'
IGNOREHEADER 1
CSV;
```

これでエディタで確認できればOK。
無理ならエラーコマンド一つずつ潰すのみ。

# 参考
https://techblog.nhn-techorus.com/archives/8232
【Ruby】methodsとinstance_methodsの違い

## 発端
クラスオブジェクトに対して`methods`を呼び出した時、クラスメソッドもインスタンスメソッドも返ってくるのかと思っていたら違った。

## version
Ruby 2.5.5


## 違いまとめ
※ご指摘を受けて少し編集しました
class -> クラスオブジェクト、instance -> インスタンスオブジェクト

| 縦メソッド/横レシーバ      |      クラスオブジェクト |    インスタンスオブジェクト        |
|:-----------------|------------------:|:------------------:    |
| methods            |             クラスメソッド |       インスタンスメソッド       |
|instance_methods          |           インスタンスメソッド |     NoMethodError       |


## おまけ: 返り値の公開レベル
|       メソッド |    公開レベル    |
|:-----------------|------------------:|:------------------:|
| methods             |              public、protected |        This        |
| instance_methods           |       public、protected      |       column       |
| private_methods             |              private |        will        |


### 共同編集者
@popmac
UIViewとCALayerの階層構造

UIViewとCALayerを複数重ねたときの順番でハマったのでメモ。

## UIViewとCALayerを用意する
```swift:ViewController.swift
import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let viewA = UIView()
        viewA.frame = CGRect(x: 30, y: 100, width: 100, height: 100)
        viewA.backgroundColor = UIColor.blue

        let viewB = UIView()
        viewB.frame = CGRect(x: 50, y: 50, width: 100, height: 100)
        viewB.backgroundColor = UIColor.red

        let viewC = UIView()
        viewC.frame = CGRect(x: 50, y: 50, width: 100, height: 100)
        viewC.backgroundColor = UIColor.green

        let layerA = CALayer()
        layerA.frame = CGRect(x: 10, y: 10, width: 80, height: 80)
        layerA.backgroundColor = UIColor.yellow.cgColor

        let layerB = CALayer()
        layerB.frame = CGRect(x: 10, y: 10, width: 80, height: 80)
        layerB.backgroundColor = UIColor.purple.cgColor

        let layerC = CALayer()
        layerC.frame = CGRect(x: 10, y: 10, width: 80, height: 80)
        layerC.backgroundColor = UIColor.brown.cgColor

        /*
         * todo: ここを後述のコードで置き換える
         */
    }
}
```

## CALayer → UIView の順で追加

先に各UIViewにCALayerを追加しておくパターン。

```swift
viewA.layer.addSublayer(layerA)
viewB.layer.addSublayer(layerB)
viewC.layer.addSublayer(layerC)

view.addSubview(viewA)
viewA.addSubview(viewB)
viewB.addSubview(viewC)
```

## UIView → CALayer の順で追加

先にUIViewを重ねて、その後にCALayerを追加するパターン

```swift
view.addSubview(viewA)
viewA.addSubview(viewB)
viewB.addSubview(viewC)

viewA.layer.addSublayer(layerA)
viewB.layer.addSublayer(layerB)
viewC.layer.addSublayer(layerC)
```

## 実行結果

|CALayer → UIView|UIView → CALayer|
|:--:|:--:|
|![Simulator Screen Shot - iPhone Xʀ - 2019-07-13 at 12.19.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300903/b186fa50-243d-6b4a-7377-c7dfde503aa7.png)|![Simulator Screen Shot - iPhone Xʀ - 2019-07-13 at 12.20.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300903/b4df2b50-5b6c-b58b-9869-2b1104c61d50.png)|

両方とも同じ結果になると思っていたので、Viewがうまく表示されずハマってしまった。
`Debug View Hierarchy`で確認するとどちらの実装も同じ表示だった。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300903/cc25bbae-d8b2-d803-529b-cd5205ba4701.png" width=300>

## まとめ

UIViewとCALayerは追加した順に表示されるっぽい :thinking:
【C#開発環境構築】Visual Studio 2019インストールからHello Worldまで

C#の勉強用に環境構築をしたので、その備忘録です。

# 環境
Windows 10

# Visual Studioインストール
[Microsoftのページ](https://visualstudio.microsoft.com/ja/downloads/?utm_medium=microsoft&utm_source=docs.microsoft.com&utm_campaign=button+cta&utm_content=download+vs2019&rr=https%3A%2F%2Fdocs.microsoft.com%2Fja-jp%2Fvisualstudio%2Finstall%2Finstall-visual-studio%3Fview%3Dvs-2019)からCommunity版をダウンロードします。

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404447/44300826-2962-9390-7532-d64344944ebb.png)

ダウンロードしたインストーラーを起動します。

インストールするコンポーネントを選択する画面が表示されます。

とりあえず、「.NETデスクトップ開発」にだけチェックを付けてインストールします。

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404447/3e89284b-6697-1a66-c874-ed12420e0d16.png)

# プロジェクトの作成
Visual Studioを起動し、新しいプロジェクトを作成します。

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404447/81d499ac-dc52-d330-d199-6dab92f12eb7.png)

コンソールアプリ(.NET Framework)を選択し、次へいきます。

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404447/ef960d4e-5bb7-4483-fae5-75d1a7d0881f.png)

プロジェクト名、保存場所等を設定し、作成します。

# Hello World表示
Main関数の中に、

`Console.WriteLine("Hello World!");`

と打ち込みます。

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404447/2f6e794c-19a8-7958-2b3f-4730254bc751.png)

Ctrl+F5もしくは、デバッグ->デバッグなしで開始からプログラムを実行します。

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404447/7343c37c-d0b0-a516-8fac-27ec6c9b86d3.png)

無事、コンソール上にHello World!が表示されました。

![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404447/95bf7b35-9ecb-d446-6e0a-f25c1e75178d.png)

# 追加のコンポーネントをインストールするとき

新しいプロジェクトの作成画面から、「さらにツールと機能をインストールする」をクリックすると、Visual Studio Installerが立ち上がり、必要な機能をインストールできます。

![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404447/ca821106-26c0-1b89-9815-98c7d2ce54d6.png)
Affinity Designerでパス作成時のアイコンの意味を調べる

# 何
- Affinity Designerでペンツールやノードツールを使った際に出てくるアイコンの意味を調べた結果をまとめる
- windows版での調査結果。

## case1
![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/9447d9f1-e890-8553-3f78-d3e9045efec5.gif)

- 「*」のアイコンで、新しいカーブの作成を表している（カーブとは"開いたパス"のことらしいが、ノードの集合くらいで捉えておけばよいかと）
- 「+」のアイコンで、新しいノードの追加を表してる
- 赤い枠線のノードで、現時点の終点を表している。追加は終点から行われる。

## case2
![2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/6d30bdd9-83fa-52f5-1b6b-502bf365ef4a.gif)

- どのノードも選択されていないカーブに、ノードを追加しようとするが、アイコンが「*」になっており、新規カーブの作成になっている
- ノードの上にカーソルを重ねると、アスタリスクが丸で囲まれるが、これは位置のスナップを意味していると思われる（予想）

## case3
![3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/73b8234c-f89e-555c-29ee-6c1f30d6e98e.gif)

- 終点ノードを選択することで、「+」のアイコンになり、ノードの追加ができた

## case4
![4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/64adb94a-601e-3652-9ec6-c936a47c394d.gif)

- 途中のノードを選択しても、ノードの追加は終点から行われる

## case5
![5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/79e704fc-69c8-c9d0-7511-483a1be39b39.gif)

- 始点のノードを選択した場合、ノードの追加は始点から行われる

## case6
![6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/a7fc1055-83d5-5639-ab40-388010747d84.gif)

- 「/」のアイコンで、該当ノードの編集を表している（具体的な編集方法は、アプリケーションの下部にいろいろ書いている）
- 「〇」のアイコンで、パスを閉じることを表している。

## case7
![7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/f83a8a2e-655e-394b-53cb-913c2bc383df.gif)


- 丸形のノードは「スムーズ」を、四角型のノードは「シャープ」を表している。（＝ハンドルの有無）。左右のハンドルが直線で亡くなった時もシャープ扱いとなる。

## case8
![8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/b52e3f75-1648-1575-9115-f90a8bd73147.gif)

- ノードツールで、「~」のアイコンで、ノード間のパスの編集を表している。ドラッグでパスが変化、クリックでノードが追加。（削除はノードを選択してDelete）

## case9
![9.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/db3d824c-2fff-1add-9604-8beee18709ba.gif)

- 「スマートに変換」によってノードがスマート型になる。丸の中に点が入ったアイコンになる。
- スマートではノードを移動した際に、左右のハンドルの長さが動的に変化しており、アプリ側で何かやってくれていると思われる。

## case10
![10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151200/b1ab6a04-71a6-ec4c-c40d-89f26a741460.gif)

- 「選択されているカーブオブジェクトに新しいカーブを追加」を選択することで、新規カーブ作成時のレイヤー追加の有無が変化する
RDBのSQLの本質は、行単位に処理している。

SQLがよく分からん。
って思っていたころ、
SQLは、
「行単位に処理しているだけじゃん。」
って言われて、衝撃を受けたので、その話をします。

SQLがいまいち腹落ちしていない人向けの記事になります。


|pk|test_val1|del_flg  
|---|---|---
|1|a|0
|2|a|1
|3|i|0

こんな表があったとします。
＃ 業務上、こんな表はあり得ませんｗ
　 が説明のための表なのでご容赦ください。

このうち、test_val1を重複なく、有効な行を取得したい

要するにこんな行。「a」は、「del_flg」が「１」の行があるので除外して取得した。

|pk|test_val1|del_flg  
|---|---|---
|3|i|0

って思った時、どう取得するかというと、

```
select t1.pk, t1.test_val1 from test t1
where not exists(select * from test t2
                 where t1.test_val1 = t2.test_val2
                   and t2.del_flg = '1'
                )
```
もしくは、

```
select t1.pk, t1.test_val1 from test t1
where t1.test_val1 not in (select * from test t2
                           where t1.test_val1 = t2.test_val2
                           and t2.del_flg = '1'
                           )
```
な感じ。

何を言いたいかというと、SQL上、testテーブルが「2回」出てきます。
同じテーブルなのに、「2回」出てきます。
SQL上、「1回」だけでは判定が出来ないのです。

それは、SQLの動きが、
「1行ずつ抽出対象か判定」
していく為です。

このため、「自分の行以外」を「抽出条件にする場合」は、
同じテーブルであっても、SQL上、「別テーブル」として「もう1回定義」しなくてはいけません。

|pk|test_val1|del_flg  
|---|---|---
|1|a|0
|2|a|1
|3|i|0

動きとしては、こんな感じ。

```
１．「PK=1」を抽出するか判定する。そのために、別テーブルと定義されている「PK=1、PK=2、PK=3」を参照する。
２．「PK=2」を抽出するか判定する。そのために、別テーブルと定義されている「PK=1、PK=2、PK=3」を参照する。
３．「PK=3」を抽出するか判定する。そのために、別テーブルと定義されている「PK=1、PK=2、PK=3」を参照する。
```

さらに言えば、１、２、３の回数を決めるテーブルを「駆動表」と呼びますね。
どの表を基に、SQLを駆動させるか？ということで、駆動表。

まあ～、チューニングの世界になるので、それはさておき。

SQLは、結局、行単位に処理をしている。

ただ、それだけ。

それを忘れなければ、どんなSQLも読めます。
※ RDBに限った話ですｗ NOSQLとかは別の話ですｗ
Androidアプリでダークテーマを実装する

# ダークテーマの実装
## 要約
ダークテーマの実装の流れは

1. テーマの切り替えを実装して
2. ダークテーマ用にリソースを用意して
3. レイアウトにあててデザインを確認する

です。

## 1.テーマの切り替え
ダークテーマは、夜間モードテーマを使用して実装します。
>Medium - Android Developers "AppCompat — DayNight"
https://medium.com/androiddevelopers/appcompat-v23-2-daynight-d10f90c83e94

夜間モードテーマへの切り替えは、AppCompatDelegate.setDefaultNightMode()で行います。

- AppCompatDelegate.setDefaultNightMode()
    - MODE_NIGHT_NO.   // 昼間モードテーマ
    - MODE_NIGHT_YES.　// 夜間モードテーマ

ユーザが夜間モードテーマに自ら切り替えた場合、切り替え後は Activity#recreate()を呼び出すとテーマが適応されます。
→　**切り替えるタイミングによっては、Activityの状態復元に注意してください！:point_up:**

## 2.リソースの用意
夜間モードテーマ用にリソースを用意します。
夜間モードテーマ用にリソースは、リソース末尾に-nightを付けます。
こうすることで、昼間モードリソースと夜間モードリソースを設定できます。

![2019-07-14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266675/d6eecf37-763b-b6e1-ee4a-c14e993473fd.png)

そして、各ファイル同じ名前のリソースを用意してあげます。
例えば、以下のようなcolor.xmlを用意すると、colorPrimaryの場合、昼間モードテーマでは#008577ですが、夜間モードテーマに切り替えると、#212121になります。

```values/color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="colorBackground">#ffffff</color>
    <color name="colorText">#000000</color>
</resources>

```

```values-night/color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#212121</color>
    <color name="colorPrimaryDark">#212121</color>
    <color name="colorAccent">#212121</color>
    <color name="colorBackground">#313131</color>
    <color name="colorText">#ffffff</color>
</resources>
```

どちらのテーマでもリソースが同じでよい場合は、夜間モードテーマで指定する必要はないですよ:ok_hand:

## 3.ダークテーマのレイアウト確認
ダークテーマを実装したとき、デザインの確認を毎回Buildしてダークテーマに切り替えて確認していました。
が、、、もっと簡単に確認できる方法がありました。:joy_cat:

1. レイアウトを開いて、Designタブに切り替える
2. 左上のアイコンをタップすると、Night Modeがある
![2019-07-13 (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266675/8f6bec37-b673-e7a0-f482-5096bd10c1ea.png)


3. Night Modeをタップ（Not Nightになってる）
![2019-07-13 (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266675/a60300b4-426d-ff3e-72d1-b51ea0aa426f.png)


4. Nightに切り替える
![2019-07-13 (14).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266675/f79b2a8d-c7d5-9782-19f5-d5af9786b0f7.png)


これでビルドせずに、レイアウト上でテーマを切り替えることができるので、ダークテーマのデザインの確認もすぐにできます。
（私はこの機能をしばらく見つけれれていなかったので、毎回ビルドしてダークテーマのデザイン確認して、調整して、、、てやってたので効率悪かったです...:zipper_mouth:）

# 参考
Google I/O 2019で、Android公式のダークテーマのデザインガイドラインも公開されています。

- https://material.io/design/color/dark-theme.html

また、現在β版が公開され、もうそろそろ最終リリースされるAndroid Qでは、端末の設定にダークテーマが追加されました。
ダークテーマに対応したアプリなら、端末の設定に連動してダークテーマ表示になるようです:crescent_moon: 

- https://developer.android.com/preview/features/darktheme

# 感想
ダークテーマの導入は、開発者よりも、ダークテーマ用にデザイン全部あてて、リソースも全部用意しないといけないデザイナーさんの負担の方が大きいなというのが所感でした。

Android Q のリリースとともに、今後ダークテーマの実装は、ユーザの需要が高まりそうですね:sparkles:
【Trailhead】Lightning フローを使用したビジネスプロセスの自動化 ＞ 割引計算機能の構築 ＞ 商談を更新するアクションの追加 のバグ


##Trailhead
Lightning フローを使用したビジネスプロセスの自動化
 ＞ 割引計算機能の構築
 ＞ 商談を更新するアクションの追加 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450298/50d8a885-2757-6557-c921-50f353f5aa04.png)

##事象
・Trailheadの説明文章と、掲載しているキャプチャとでAPI名称/ラベル名に相違あり。
・説明文章のAPI名に合わせて実装/Challengeを実行すると当該エラーが発生。
エラーメッセージ
`Record Update element 'Update Discount Field' isn't properly configured. Check the instructions.`

####説明文章
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450298/3e88301a-5918-74c8-9a78-725170d7befd.png)

####説明文章に貼られている画面キャプチャ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450298/f87577bd-442e-08bf-ed6e-890a953ba452.png)

##原因
・Trailheadの説明文章が誤っている。

##対策
・正しくはUpdate Discount Field（※sはつかない。）なので、Update Discount FieldでAPI名とラベル名を修正し、再Challenge
ABC - 132- A&B&C

#AtCoder ABC 132 A&B&C
[AtCoder - 132](https://atcoder.jp/contests/abc132)

Dのcombinationのバグが取れないのでD以降は後回し。

#A - Fifty-Fifty

 - 文字をカウントしたら必ず二つないといけない

```java
	private void solveA() {
		String[] a = next().split("");

		Map<String, Long> memo = Arrays.stream(a).collect(Collectors.groupingBy(s -> s, Collectors.counting()));

		for (long elm : memo.values()) {
			if (elm != 2) {
				out.println("No");
				return;
			}
		}
		out.println("Yes");
	}
```


#B - Ordinary Number

 - $p_{i−1}, p_i, p_{i+1}$ の 3 つの数の中で、$p_i$ が 2 番目に小さい
    - 上記を満たせばよいので、$p_{i−1}< p_i< p_{i+1}$  または $p_{i+1} < p_i< p_{i−1}$ を確認する。

```java
	private void solveB() {
		int n = nextInt();
		int[] p = IntStream.range(0, n).map(i -> nextInt()).toArray();

		int res = 0;
		for (int i = 0; i < p.length - 2; i++) {
			if ((p[i] < p[i + 1] && p[i + 1] < p[i + 2]) || (p[i + 2] < p[i + 1] && p[i + 1] < p[i])) {
				res++;
			}
		}

		out.println(res);
	}
```

#C - Divide the Problems

 - ソートして
 - ARC用とABC用の問題の境目の数を抜き出す
 - 境目の数の差が選択可能な数

```java
	private void solveC() {
		int n = nextInt();
		int[] d = IntStream.range(0, n).map(i -> nextInt()).sorted().toArray();

		out.println(d[n / 2] - d[n / 2 - 1]);
	}
```
コードの記述にどのファイルを操作しているのかタイトルをつける方法

以下のような「uniq.rb」といった表題をQiita（Markdown?)でつける場合

~~~ruby:uniq.rb
p [1, 1, 2, 3, 3].uniq
~~~

以下のように記載すると表題がつけられる

`~~~ruby:uniq.rb`　<-ここにファイル名を記載する

p [1, 1, 2, 3, 3].uniq

`~~~`<-閉じ括弧


*なお、「~~~」の代わりに　「```」も使用できるみたい。



参考
https://help.qiita.com/ja/articles/qiita-article-guideline
Raspberry piのSDカードをリセットする方法

SSHの設定ミスや、構築した環境の再現性を確かめるためにRasbianを入れたSDカードをリセットする機会が何回かあったので、備忘録として残しておきます。

2023/01/28追記：
OS更新のため、内容を更新。イメージファイルの焼き付けを「Disk Imager」から「Raspberry Pi Imager」へ変更
おおよそ[AIYの公式サイト](https://aiyprojects.withgoogle.com/voice/)通りに実行した。

# 利用機器
  - Raspberry Pi 3 Model B+
  - micro SDカード SAMSUNG 32GB ([https://www.amazon.co.jp/gp/product/B06XSV23T1](https://www.amazon.co.jp/gp/product/B06XSV23T1))
  - micro SDカード-USBアダプタ

# 利用環境・ソフトウェア
  - Windows 10
  - ~~Disk Imager ([https://sourceforge.net/projects/win32diskimager/](https://sourceforge.net/projects/win32diskimager/))~~
  - Raspberry Pi Imager (https://www.raspberrypi.com/software/)
  - SD Card Formatter ([https://www.sdcard.org/jp/downloads/formatter/](https://www.sdcard.org/jp/downloads/formatter/))

# 手順
  1. OSのイメージをダウンロード
    - [ここ](https://www.raspberrypi.org/downloads/raspbian/)から任意のイメージファイルをダウンロード
    - AIY Projectでは[ここ](https://github.com/google/aiyprojects-raspbian/releases)からダウンロード
  1. パーティションのリセット
    1. windows10のコマンドプロンプトで「diskpart」実行
    2. このとき、別ウィンドウが開かれ「Microsoft DiskPart」が起動
    3. `list disk`を実行し、SDカードに対応するディスク番号（一番左の数字）を確認
    4. 対象のSDカードを`select disk (number)`で選択
    5. `list disk`コマンドで選択したディスクの行の一番左にアスタリスクが付いていることを確認
    6. `clean`でパーティションを削除
    
       ```
        DISKPART> list disk
        
          ディスク      状態           サイズ   空き   ダイナ GPT
          ###                                          ミック
          ------------  -------------  -------  -------  ---  ---
          ディスク 0    オンライン           476 GB      0 B        *
          ディスク 1    オンライン            14 GB  3072 KB
        
        DISKPART> select disk 1
        
        ディスク 1 が選択されました。
        
        DISKPART> list disk
        
          ディスク      状態           サイズ   空き   ダイナ GPT
          ###                                          ミック
          ------------  -------------  -------  -------  ---  ---
          ディスク 0    オンライン           476 GB      0 B        *
        * ディスク 1    オンライン            14 GB  3072 KB
        
        DISKPART> clean
        
        DiskPart はディスクを正常にクリーンな状態にしました。
        
        DISKPART> exit
       ```
  1. SD Card Formatterの実行
      1. SD Card Formatter ([https://www.sdcard.org/jp/downloads/formatter/](https://www.sdcard.org/jp/downloads/formatter/))からソフトウェアをダウンロード
      2. インストール後、「カードの選択」欄にSDカードのドライブを指定
      3. クイックフォーマットを選択し、「フォーマット」ボタンをクリック
      4. 数十秒後、フォーマット完了
  1. Raspberry Pi Imagerの実行 
      1. [ここ](https://www.raspberrypi.com/software/)の「Download for Windows」をクリック
      1. ソフトウェアがダウンロードされることを確認
      1. ダウンロードされたソフトウェアをインストール
      1. ソフトウェアを起動すると、下記のような画面が表示される
          ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/460885/6ced267f-4786-78c4-bdf8-f59d16c9d77f.png)
      1. OSとストレージを選択後、書き込みを実施（なお、インストールするイメージファイルはあらかじめダウンロード）

## 参考
Disk Imagerは下記の通りに実行。

1. Disk Imagerの実行 
    1. Disk Imager ([https://sourceforge.net/projects/win32diskimager/](https://sourceforge.net/projects/win32diskimager/))からソフトウェアをダウンロード
    2. 「Image File」欄にOSのイメージファイルを選択
    3. 「Device」欄にSDカードのドライブを選択
    4. 他は何も変更せず、Writeボタンをクリック
    5. 数十分程度で書き込み完了
Webページを表示する

本記事は「[デジタルサイネージアプリ「Sign!」(iOS版)とその実装機能の紹介](https://qiita.com/imj164/items/b7c585652a42350914e9)」の子記事です。

##目的
StoryboardでWKWebViewを配置し、Webページを読み込んで表示するための操作やコードを紹介します。

##開発・実行環境
- 開発環境：macOS、Xcode(9~10)、Swift(4~5)
- 実行環境：iOS 11以上

##StoryboardでWKWebViewを配置する
まず、Xcodeのナビゲータエリア上部のフォルダアイコン(一番左)をクリックし、表示されるツリーの中の「Main.storyboard」(Storyboardの名前は、みなさんのプロジェクトごとに異なると思います)をクリックし、Storyboard画面を開きます。
ここでは、StoryboardにViewControllerが1つあるものとして以下を記述します。
![1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162131/f7f8553e-1d81-6957-a394-a4920a1ae182.png)

次に、画面右上にあるライブラリアイコン(寛永通宝のような丸の中に四角のアイコン)をクリックすると、UIオブジェクトを選択できるダイアログが表示されます。
![2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162131/0fd27bde-2814-0eb1-5ede-27f28cd1a60f.png)

ダイアログ上部の検索窓で、「web」と入力すると、「WebKit View」が現れます。
![3](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162131/3c056eef-580a-ae56-f97c-a3d64de8754e.png)

「WebKit View」をStoryboardのViewControllerへドラッグ&ドロップすると、WKWebViewの配置が完了します
※なお、ここでは説明しませんが、以降の説明のため、WKWebViewが画面いっぱいに表示されるようにレイアウトしておきます。
![4](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162131/3e3fe3ef-777e-17a2-e5d0-4adad1222e52.png)

次に、配置したWKWebViewをコードへ紐づけます。
画面右上にある「Show the Assistant editor」アイコン(丸を2つ重ねたアイコン)をクリックすると、Storyboard画面の隣に、ViewControllerのコードが表示されます。この状態で、「control」キーを押しながら、StoryboardのWKWebViewをドラッグし、ViewControllerのコードの方へドロップすると、ダイアログが開きますのでNameにしかるべき名前(ここではwebviewとしています)を入力し、「Connect」ボタンをクリックします。
![5](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162131/42f1964f-efd3-e25e-69de-e1fa3efb690d.png)

すると、「＠IBOutlet ~」なる行が追加されますが、このままでは「Use of undeclared type 'WKWebView'」なるエラーが表示されますので、WebKitをインポートする記述をしておきます。
![6](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162131/73feb164-0d86-cea0-389f-0cefa91b0e34.png)

これで、ViewControllerのコードでWKWebViewを扱えるようになりました。

##WKWebViewでWebページを表示する
WKWebViewでWebページを読み込み、表示するには、load()メソッドを使います(以下はViewControllerのviewDidLoad()で実行しています)。

```swift:ViewController.swift
@IBOutlet weak var webview: WKWebView!
 
override func viewDidLoad() {
  super.viewDidLoad()
  if let url = URL(string: "https://ojami.net/") {  // URL文字列の表記間違いなどで、URL()がnilになる場合があるため、nilにならない場合のみ以下のload()が実行されるようにしている
    self.webview.load(URLRequest(url: url))
  }
}
```

以上です。
アプリが起動している間、画面を表示し続ける(端末をスリープさせない)

本記事は「[デジタルサイネージアプリ「Sign!」(iOS版)とその実装機能の紹介](https://qiita.com/imj164/items/b7c585652a42350914e9)」の子記事です。

##目的
アプリが起動している間、端末をスリープさせず、画面を表示しつづけるためのコードを紹介します。

##開発・実行環境
- 開発環境：macOS、Xcode(9~10)、Swift(4~5)
- 実行環境：iOS 11以上

##コード
画面を表示しつづけたい(その画面が表示されている間は、スリープさせたくない)ViewControllerのviewWillAppear()に、以下を記述します。

```swift:ViewController.swift
override func viewWillAppear(_ animated: Bool) {
  super.viewWillAppear(animated)
  UIApplication.shared.isIdleTimerDisabled = true  // この行
}
```

なお、この画面から別の画面に遷移したときに、遷移先の画面ではスリープがされるように(上記の設定が維持されないように)するには、同じViewControllerのviewWillDisappear()に、以下を記述します。

```swift:ViewController.swift
override func viewWillDisappear(_ animated: Bool) {
  super.viewWillDisappear(animated)
  UIApplication.shared.isIdleTimerDisabled = false  // この行
}
```

以上です。
アプリ画面をフルスクリーン表示にする(ステータスバーを表示しない)

本記事は「[デジタルサイネージアプリ「Sign!」(iOS版)とその実装機能の紹介](https://qiita.com/imj164/items/b7c585652a42350914e9)」の子記事です。

##目的
アプリ全体として、画面上部にステータスバーを表示せず、フルスクリーンアプリとして実行するための設定を紹介します。

##開発・実行環境
- 開発環境：macOS、Xcode(9~10)、Swift(4~5)
- 実行環境：iOS 11以上

##設定
Xcodeのナビゲータエリア上部のフォルダアイコン(一番左)をクリックし、表示されるツリーの中のプロジェクトルート(一番上)をクリックします。さらに、エディタエリア上部の「General」をクリックし、「Deployment Info」の「Hide status bar」にチェックを入れます。
![1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162131/beaa7ed2-a26e-8c14-a4f1-368d46d29ece.png)

さらに、エディタエリア上部の「Info」をクリックし、「Custom iOS Target Properties」のいずれかの項目にマウスカーソルを乗せると表示される「+」マークをクリックします。
![2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162131/5fc61af2-2b62-d4ee-90eb-f56d2370922d.png)

開いたプルダウンから「View controller-based status bar appearance」を選び、その値(Value)を「NO」にします。
![3](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162131/03e0a175-da08-7c52-73ff-27f18e57138b.png)

以上です。
ナンプレ解答アプリ「ナンプレ自動解答」(iOS版)とその実装機能の紹介 

[よちよちサンデープログラミング](https://qiita.com/imj164/items/1eb8ea18154af675326d)トップへ

##はじめに
「ナンプレ自動解答」(iOS版)は、ナンプレ(数独)の問題を写真に撮ると、その問題を自動的に解き、答えを示すアプリです。
そのため、例えばナンプレの懸賞本の大量の問題を解く時間を短縮したり、解答が載っていない問題の答えを確認したり、あるいは自作した問題が正しく答えを導き出せるものであるかどうかを確認したりするのに使えます。
![ナンプレ自動解答画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162131/70638e7f-e7f3-bf67-5474-cec353577ad8.png)

本記事では、ナンプレ自動解答で実装している各機能をTipsとして解説します。

- アプリのダウンロードは、[こちら](https://apps.apple.com/jp/app/id1450277030)。
- Android版「ナンプレ自動解答」の解説記事は、[こちら](https://qiita.com/imj164/items/af65469238b59e2753ee)。

##開発・実行環境
ナンプレ自動解答は、以下の環境で開発・実行しています。

- 開発環境 : macOS、Xcode(9~10)、Swift(4~5)
- 実行環境 : iOS 11以上

##アプリの構成の概要
ナンプレ自動解答は、2つの画面を持ちます。1つは、ナンプレの問題(9x9のマス目や各マスの数字)を表示し、数字を編集するため操作を受け付ける独自ビューと、機能を呼び出す複数のボタンと、広告(AdMob)が表示されます。もう1つは、ナンプレの問題を写真に撮るためのAVFoundationを使ったカメラ画面です。
本アプリでは、カメラで撮影した写真から、ナンプレの問題(9x9のマス目)を切り出し、さらにその各マスの数字を認識し、解答処理を行う対象データとして取り込みますが、マス目の切り出しにはOpenCVを使い、数字の認識にはOCRライブラリ(Tesseract OCR iOS)を使っています。解答処理は、オリジナルのヒューリスティックアルゴリズムです。

##実装している機能
本アプリを実現するために、以下の機能を実装しており、それぞれTipsとして解説していきます。
※リンクをクリックするとTips解説記事に飛びます。リンクされていない項目は、記事を鋭意作成中です。

- OpenCVライブラリを組み込む
- 写真から、四角形領域を切り出す(OpenCV)
- OCRライブラリを組み込む(Tesseract OCR iOS)
- OCR機能で文字を認識する(Tesseract OCR iOS)
- 独自ビューに描画する(UIView)
- 独自ダイアログを実装する(UIView)
- 画面レイアウト決定後に、ビューを再描画する(UIView)
- 画像を拡縮する(UIImage)
- StoryBoardで定義した画面(ViewController)をコードから呼び出して開く
- 独自カメラ機能を実装する(AVFoundation)
- 非同期処理(別スレッド処理)をする(DispatchQueue)
- 処理待ちのインジケータ(くるくる)を表示する・消す(UIActivityIndicatorView)
- Webページを外部ブラウザで表示する(UIApplication)
- アプリのバージョン番号を取得する(Bundle)
- デバイスがiPadか否かを判定する(UIDevice)
- ラベルやボタンのフォントサイズをコードで変更する(UILabel、UIButton)
ナンプレ解答アプリ「ナンプレ自動解答」(Android版)とその実装機能の紹介

[よちよちサンデープログラミング](https://qiita.com/imj164/items/1eb8ea18154af675326d)トップへ

##はじめに
「ナンプレ自動解答」(Android版)は、ナンプレ(数独)の問題を写真に撮ると、その問題を自動的に解き、答えを示すアプリです。
そのため、例えばナンプレの懸賞本の大量の問題を解く時間を短縮したり、解答が載っていない問題の答えを確認したり、あるいは自作した問題が正しく答えを導き出せるものであるかどうかを確認したりするのに使えます。
![ナンプレ自動解答画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162131/19a97c72-f311-e6f1-1f14-a017c94453a2.png)

本記事では、ナンプレ自動解答で実装している各機能をTipsとして解説します。

- アプリのダウンロードは、[こちら](https://play.google.com/store/apps/details?id=net.ojami.android.numberplaceautosolver)。
- プロジェクトソースの入手は、[こちら](https://devmart.jp/businesses/127)。
- iOS版「ナンプレ自動解答」の解説記事は、[こちら](https://qiita.com/imj164/items/7434e31a1467013859c5)。

##開発・実行環境
ナンプレ自動解答は、以下の環境で開発・実行しています。

- 開発環境 : macOS、Android Studio(3.3~3.4)、Java
- 実行環境 : Android 5.0以上

##アプリの構成の概要
ナンプレ自動解答は、2つの画面を持ちます。1つは、ナンプレの問題(9x9のマス目や各マスの数字)を表示し、数字を編集するため操作を受け付ける独自ビューと、機能を呼び出す複数のボタンと、広告(AdMob)が表示されます。もう1つは、ナンプレの問題を写真に撮るためのCamera2 APIを使ったカメラ画面です。
本アプリでは、カメラで撮影した写真から、ナンプレの問題(9x9のマス目)を切り出し、さらにその各マスの数字を認識し、解答処理を行う対象データとして取り込みますが、マス目の切り出しにはOpenCVを使い、数字の認識にはOCRライブラリ(tess-two)を使っています。解答処理は、オリジナルのヒューリスティックアルゴリズムです。

##実装している機能
本アプリを実現するために、以下の機能を実装しており、それぞれTipsとして解説していきます。
※リンクをクリックするとTips解説記事に飛びます。リンクされていない項目は、記事を鋭意作成中です。

- AdMobを組み込む(AdMob SDK)
- 広告を表示する(AdMob SDK)
- OpenCVライブラリを組み込む
- 写真から、四角形領域を切り出す(OpenCV)
- OCRライブラリを組み込む(tess-two)
- OCR機能で文字を認識する(tess-two)
- アセットに格納しているデータをファイルに書き出す
- 独自ビューを生成する(FrameLayout、View)
- 独自ビューに描画する(View)
- 画面レイアウト決定後に、ビューを再描画する(FrameLayout)
- 独自カメラ機能を実装する(Camera2)
- ユーザからカメラの利用許可を得る
- 画面(アクティビティ)間でデータをやり取りする(Intent)
- 画像(Bitmap)をファイルに保存する(FileOutputStream)
- 画像(Bitmap)の一部を切り出す
- 非同期処理(別スレッド処理)をする(AsyncTaskLoader)
- 処理待ちのインジケータ(くるくる)を表示する・消す(ProgressBar)
- アプリのバージョン番号を取得する(PackageManager)
- メニューを表示する(Menu)
- ボタンの形状をカスタマイズする(Button)
- 多言語対応する
Mac内蔵カメラの動画をpythonでキャプチャ

# 目的
Mac内蔵カメラの動画をpythonでキャプチャした際の備忘録です。

# 準備
環境：mac os x 10.13 High Sierra
python3
opencv2ライブラリ

# コード

[カメラから動画を撮影する](http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/py_tutorials/py_gui/py_video_display/py_video_display.html)のコードそのまま実行して動きました。


グレイスケール画像表示は下記

```rb:sample-grey.py
import numpy as np
import cv2

cap = cv2.VideoCapture(0)

while(True):
    # Capture frame-by-frame
    ret, frame = cap.read()

    # Our operations on the frame come here
    gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)

    # Display the resulting frame
    cv2.imshow('frame',gray)
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break

# When everything done, release the capture
cap.release()
cv2.destroyAllWindows()
```

カラー画像表示は下記

``` rb:sample-color.py
import numpy as np
import cv2

cap = cv2.VideoCapture(0)

while(True):
    # Capture frame-by-frame
    ret, frame = cap.read()

    # Display the resulting frame
    cv2.imshow('frame',frame)
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break

# When everything done, release the capture
cap.release()
cv2.destroyAllWindows()
```


# テスト

```
$ python sample-grey.py
```
<img width="160" alt="スクリーンショット 2019-06-30 11.56.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/0c74e202-499c-0fb0-d84b-62184d4baecf.png">

--

```
$ python sample-color.py
```

<img width="160" alt="スクリーンショット 2019-06-30 11.57.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/6f2f0d8b-4b5b-d1a0-6184-0cbe97bfd393.png">

# 備考

Videoデバイス番号はどこから参照すれば良いかわからず決め打ちしています。
（Videoデバイス番号はffmpegを下記の通りコマンド実行した際の、FaceTime HD Cameraが該当？確かではありません。）

```
$ ffmpeg -list_devices true -f avfoundation -i dummy
ffmpeg version 4.1.2 Copyright (c) 2000-2019 the FFmpeg developers
[AVFoundation input device @ 0x7feac1504980] AVFoundation video devices:
[AVFoundation input device @ 0x7feac1504980] [0] FaceTime HD Camera
[AVFoundation input device @ 0x7feac1504980] [1] Capture screen 0
[AVFoundation input device @ 0x7feac1504980] AVFoundation audio devices:
[AVFoundation input device @ 0x7feac1504980] [0] Soundflower (2ch)
[AVFoundation input device @ 0x7feac1504980] [1] Soundflower (64ch)
[AVFoundation input device @ 0x7feac1504980] [2] Built-in Microphone
```

# 参考
[VideoCapture Class Reference](https://docs.opencv.org/4.0.1/d8/dfe/classcv_1_1VideoCapture.html#aabce0d83aa0da9af802455e8cf5fd181)
[カメラから動画を撮影する](http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/py_tutorials/py_gui/py_video_display/py_video_display.html)
デジタルサイネージアプリ「Sign!」(iOS版)とその実装機能の紹介

[よちよちサンデープログラミング](https://qiita.com/imj164/items/1eb8ea18154af675326d)トップへ

##はじめに
デジタルサイネージアプリ「Sign!」(iOS版)は、iPadやiPhoneをシンプルなデジタルサイネージとして使うためのアプリです。
WebページやGoogleスライドで作ったスライドショーや、固定のテキストメッセージやTwitterへの投稿をティッカー(流れるテキスト)としてフルスクリーンかつノースリープで表示し続けるもので、複数のページをめくって切り替えられるものです。
そのため、例えば商品POP、レストランのメニュー、展示ブースの看板、電光掲示板などに使えます。
![Sign!利用イメージ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162131/b504f8f7-03fa-0354-ee69-3ad341469295.png)

- アプリのダウンロードは、[こちら](https://apps.apple.com/jp/app/id1424334294)。

本記事では、Sign!で実装している各機能をTipsとして解説します。

##開発・実行環境
Sign!は、以下の環境で開発・実行しています。

- 開発環境 : macOS、Xcode(9~10)、Swift(4~5)
- 実行環境 : iOS 11以上

##アプリの構成の概要
Sign!は、Webページやティッカーテキストを表示するためのWebビュー(WKWebView)が1画面に1つ表示されており、複数の画面をページめくり(UIPageViewController)で切り替えられるようになっています。
Webビューには、HTTPS(やHTTP)でアクセスできるWebページやWebスライドショー(Googleスライドなど)の他、文字列をティッカー表示するためにアプリ内部で保持する固定的なHTMLを表示します。
ティッカー表示する文字列としては、ユーザが入力した固定のテキストメッセージの他、Twitterのツイートも表示できます。ツイートは、特定のユーザ名やハッシュタグのものを定期的に検索し、最も新しいもの1つが表示されます。
また、アプリの画面下部には、広告(AdMob)が、画面サイズや向きに応じて異なるサイズで表示されます。

##実装している機能
本アプリを実現するために、以下の機能を実装しており、それぞれTipsとして解説していきます。
※リンクをクリックするとTips解説記事に飛びます。リンクされていない項目は、記事を鋭意作成中です。

- [アプリ画面をフルスクリーン表示にする(ステータスバーを表示しない)](https://qiita.com/imj164/items/ae2915526d580b4e83a6)
- [アプリが起動している間、画面を表示し続ける(端末をスリープさせない)](https://qiita.com/imj164/items/f35187a8fe84d9a0cd35)
- [Webページを表示する(WKWebView)](https://qiita.com/imj164/items/fe6510ebc9550827e949)
- 文字列として定義したHTMLをWebページとして表示する(WKWebView)
- [HTTP Webページを読み込めるようにする(WKWebView)](https://qiita.com/imj164/items/a75fc585ea51efc266d7)
- Webページに組み込まれた音楽を鳴らせるようにする(WKWebView)
- [アプリ画面に流れる文字列(ティッカー、マーキー)を表示する(WKWebView)](https://qiita.com/imj164/items/2ace3717de58a3151e44)
- Webページの読み込み待ちにインジケータ(くるくる、ナビゲータ)を表示する(WKNavigation)
- ページめくりで、表示する画面を切り替える(UIPageViewController)
- アプリ画面の長押しを検出する(UILongPressGestureRecognizer)
- [ダイアログを表示する(UIAlertController)](https://qiita.com/imj164/items/de6595bae05b3ecb0cbc)
- [iPadでアクションシート(.actionSheet)が開かない問題に対処する(UIAlertController)](https://qiita.com/imj164/items/d81f1b18f5b02922887e)
- ダイアログにテキスト入力欄を設ける(UIAlertController)
- ダイアログに設けたテキスト入力欄に入力された値を、ダイアログを閉じた後に利用する
- TwitterKitを組み込む
- Twitterにログインする(認証を受ける)、ログアウトする(TwitterKit)
- Twitterのツイートを取得する(TwitterKit)
- タイマーを使って、定期的に処理を行う(Timer)
- AdMob SDKを組み込む
- アプリ画面に広告を表示する(AdMob)
- アプリ画面の下部に、広告をレイアウトする
- ページをめくっても、広告が再読込されないように広告を配置する
- 表示する文字列を多言語対応する
- アプリのアイコンを設定する
- アプリの設定を保持する(UserDefaults)
よちよちサンデープログラミング(トップ)

##本記事群について
本記事群は、私自身が開発したスマートフォン(Android、iOS)やWebのアプリで実装した機能をコードや図表で解説します。
これにより、プログラミング初心者の方にとっての、アプリを開発する上で役に立つTips集となることを目指します。

解説の対象となるアプリは、以下の通りです。(2019.7.14現在)

##Sign! (iOS版)
iPadやiPhoneをシンプルなデジタルサイネージとして使うためのアプリです。
WebページやGoogleスライドで作ったスライドショーや、固定のテキストメッセージやTwitterへの投稿をティッカー(流れるテキスト)としてフルスクリーンかつノースリープで表示できるもので、例えば商品POP、レストランメニュー、展示ブースの看板、電光掲示板などに使えるものです。
Xcode(10)、Swift(5)で開発し、ページめくり、Web表示、タイマー、多言語対応、Twitter SDK、広告(AdMob SDK)などの機能を実装しています。
![Sign!利用イメージ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162131/ddc28b25-71dc-483c-f86b-971951f097d9.png)

- 詳しくは、[こちら](https://qiita.com/imj164/items/b7c585652a42350914e9)。
- アプリのダウンロードは、[こちら](https://apps.apple.com/jp/app/id1424334294)。

##ナンプレ自動解答 (iOS版)
ナンプレ(数独)の問題を写真に撮ると、その解答が得られるアプリです。
Xcode(10)、Swift(5)で開発し、独自ビュー、非同期処理、カメラ機能(AVFoundation)、OpenCV、OCR(Tesseract OCR iOS)、広告(AdMob SDK)などの機能を実装しています。
![ナンプレ自動解答画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162131/9fb2123a-c968-3d25-a874-c758bec3f24e.png)

- 詳しくは、[こちら](https://qiita.com/imj164/items/7434e31a1467013859c5)。
- アプリのダウンロードは、[こちら](https://apps.apple.com/jp/app/id1450277030)。

##ナンプレ自動解答 (Android版)
iOS版と同様の機能を実装しています。OCRにはtess-twoを使用しています。
Android Studio(3.4)、Javaで開発しています。

- 詳しくは、[こちら](https://qiita.com/imj164/items/af65469238b59e2753ee)。
- アプリのダウンロードは、[こちら](https://play.google.com/store/apps/details?id=net.ojami.android.numberplaceautosolver)。
- プロジェクトソースの入手は、[こちら](https://devmart.jp/businesses/127)。
HTML の ブロック を インラインブロック に 変更 する

# 目的
- HTMLファイルの要素を変更する方法をまとめる。

# 押さえるポイント
- HTMLの要素は3種類存在する。
    1. ブロック要素  
    width,heightの設定→〇  
    margin,paddingの設定→〇  
    配置→縦並び  
    2. インライン要素  
    width,heightの設定→×  
    margin,paddingの設定→左右のみ〇  
    配置→横並び      
    3. インラインブロック要素  
    width,heightの設定→〇  
    margin,paddingの設定→〇  
    配置→横並び
- インライン要素にwidth.heightを設定したいときは要素を変更する。
- 要素の変更にはdisplayプロパティを使用する。　 

# 書き方の例
- 下記にCSSファイルの内容を記載する。

``` css
要素の名前かクラス名 {
  display: 変更したい要素;
}
```

# より具体的な例(blockからinline-block)
- h1要素をinline-blockに設定する。
- 下記にHTMLファイルの内容を記載する。

``` html
<h1>おはようございます。</h1>
```

- 下記にCSSファイルの内容を記載する。

``` css
h1 {
  display: inline-brock;
}
```

# より具体的な例(inlineからblock)
- p要素をblockに設定する。
- 下記にHTMLファイルの内容を記載する。

``` html
<p>おはようございます。</p>
```

- 下記にCSSファイルの内容を記載する。

``` css
h1 {
  display: brock;
}
```
Docker で apt install -y がエラー "Unable to fetch some archives" で止まる

# 環境

| | |
|----|----|
| Docker | 18.09.7, build 2d0083d |
| コンテナ | ubuntu:18.04 |

# 状況
下のような Dockerfile でビルドしたイメージを久々にアップデートしようと思って `docker build -t <tag> .` を実行しました。

```Dockerfile:Dockerfile
FROM ubuntu:18.04
ENV DEBIAN_FRONTEND noninteractive
RUN set -x \
  && rm -rf /var/lib/apt/lists/* \
  && apt-get update \
  && apt-get upgrade -y \
  && apt-get install -y apt-utils
RUN set -x \
  && apt-get install -y make
```

`apt-get install -y make` のところで、下記のようなエラーで止まってしまいました。

```
E: Failed to fetch http://security.ubuntu.com/ubuntu/pool/main/t/tzdata/tzdata_2019a-0ubuntu0.18.04_all.deb  404  Not Found [IP: 91.189.88.162 80]
E: Failed to fetch http://archive.ubuntu.com/ubuntu/pool/main/libd/libdrm/libdrm-common_2.4.95-1~18.04.1_all.deb  404  Not Found [IP: 91.189.88.162 80]
E: Failed to fetch http://archive.ubuntu.com/ubuntu/pool/main/libd/libdrm/libdrm2_2.4.95-1~18.04.1_amd64.deb  404  Not Found [IP: 91.189.88.162 80]
E: Failed to fetch http://security.ubuntu.com/ubuntu/pool/main/l/linux/linux-libc-dev_4.15.0-52.56_amd64.deb  404  Not Found [IP: 91.189.88.162 80]
E: Failed to fetch http://archive.ubuntu.com/ubuntu/pool/main/libd/libdrm/libdrm-amdgpu1_2.4.95-1~18.04.1_amd64.deb  404  Not Found [IP: 91.189.88.162 80]
E: Failed to fetch http://archive.ubuntu.com/ubuntu/pool/main/libd/libdrm/libdrm-intel1_2.4.95-1~18.04.1_amd64.deb  404  Not Found [IP: 91.189.88.162 80]
E: Failed to fetch http://archive.ubuntu.com/ubuntu/pool/main/libd/libdrm/libdrm-nouveau2_2.4.95-1~18.04.1_amd64.deb  404  Not Found [IP: 91.189.88.162 80]
E: Failed to fetch http://archive.ubuntu.com/ubuntu/pool/main/libd/libdrm/libdrm-radeon1_2.4.95-1~18.04.1_amd64.deb  404  Not Found [IP: 91.189.88.162 80]
E: Failed to fetch http://archive.ubuntu.com/ubuntu/pool/main/m/mesa/libglapi-mesa_18.2.8-0ubuntu0~18.04.2_amd64.deb  404  Not Found [IP: 91.189.88.162 80]
E: Failed to fetch http://archive.ubuntu.com/ubuntu/pool/main/m/mesa/libgl1-mesa-dri_18.2.8-0ubuntu0~18.04.2_amd64.deb  404  Not Found [IP: 91.189.88.162 80]
E: Failed to fetch http://archive.ubuntu.com/ubuntu/pool/main/m/mesa/libglx-mesa0_18.2.8-0ubuntu0~18.04.2_amd64.deb  404  Not Found [IP: 91.189.88.162 80]
E: Failed to fetch http://archive.ubuntu.com/ubuntu/pool/main/m/mesa/libgl1-mesa-glx_18.2.8-0ubuntu0~18.04.2_amd64.deb  404  Not Found [IP: 91.189.88.162 80]
E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?
```

# 解決策

このようなエラーは一般的に `apt-get update` をかけることで解決するようですが、今回はイメージの再ビルドでキャッシュが使われてしまったため、アップデートが行われていなかったようです。コマンドに `--no-cache` をつけて実行し直すと、先に進みました。

```
docker build --no-cache -t <tag> .
```
SQL Error [08001]: Public Key Retrieval is not allowedの対処法 [JDBC:MySQL]

ローカル環境
・データベース：MySQL 8.0.16
・言語：Java
・JDBCドライバ：mysql-connector-java-8.0.16
・DB参照ツール：DBeaver

##DB接続しようとしたら、複数のエラーが発生

JavaからDB接続しようとしたところ、突如繋がらなくなった。
eclipseのコンソールでは下記のエラー記述が。

```
com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failure

The last packet successfully received from the server was 25 milliseconds ago. 
The last packet sent successfully to the server was 28 milliseconds ago.
```

DBeaverからも接続を試みると、下記のエラー記述が。

```
SQL Error [08001]: Public Key Retrieval is not allowed
```

検索をかけて下記の記事を見て解決できました。
https://stackoverflow.com/questions/50379839/connection-java-mysql-public-key-retrieval-is-not-allowed

##JDBCドライバのプロパティ「allowPublicKeyRetrieval」をtrue、「useSSL」をfalseにする

DBeaver:
1. 「データベースナビゲータ」の該当接続を右クリックし、「編集 Connection」を押す。
2. 「接続設定」 > 「ドライバのプロパティ」を選択。
3. 「allowPublicKeyRetrieval」をtrueに変更。
4. 「useSSL」をfalseに変更。（ちなみに自分は元々falseになっていたので対応不要だった）
5. 「OK」を押す。

Javaコード：
1. データベース接続文字列に「allowPublicKeyRetrieval=true&useSSL=false」を追加。
<記入例>

```Java:sample.java
String database = "jdbc:mysql://localhost:3306/sample_db?allowPublicKeyRetrieval=true&useSSL=false";
```
VMware ESXi 6.7.0にNestedESXi環境を構築する。

intelNUC上にvSphere環境を構築しているが、[intelNUC上にインストールした為](https://qiita.com/sicksixrock66/items/d96e74da1bcd382208ff)NICが１個しかなく検証するのに非常に不都合なのでNestedESXi環境を構築してみる。

#NestedESXiってそもそも何？
ESXi上に更にESXiをインストールした入れ子の環境
ESXi上の環境なのでネストされたVM（ESXi）を壊そうが何しようが
簡単に再構築できるので検証環境に便利

![スクリーンショット 2019-07-14 10.52.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257241/10d55a6d-e139-4b40-c81c-79f19c0a18cd.png)



[※本番環境での適用はNG](https://kb.vmware.com/s/article/2009916?lang=ja)(やる人はいないと思いますが）

#実際に構築してみる。
[こちら](https://qiita.com/sugimount/items/eb8358f90c1cf02a10e6)と[こちら](http://tokyo-wasted.hatenablog.com/entry/2017/06/16/030207)を参考に実際に構築してみました。

###NestするESXiの仮想マシンを作成する。

![スクリーンショット 2019-07-13 22.43.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257241/004b70f4-f9c5-646c-3fbd-39bd6e686345.png)


###hardware-assisted virtualizationをNestされるESXi上で有効化する。

これを実施しないとESXiインストール時にVT-x（仮想化支援機能）を認識してくれない為、怒られます。。。

![スクリーンショット 2019-07-13 22.46.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257241/fa476b94-48d8-0fdb-1056-01898f1a5ec4.png)

###VMware ハードウェア アシストによる仮想化の公開
ハードウェア仮想化機能を仮想マシンにも公開させておきます。

※仮想マシンの設定の編集CPUの詳細項目のところに設定項目があります。

![スクリーンショット 2019-07-13 22.48.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257241/c2c89def-12bc-cc6b-f461-ae90b1ebe5f6.png)

###ESXiを実際にインストールします。

※ちなみにブラウザコンソール上でF11を送りたい場合、fn+commmand+F11でキーを送れます。（macOSの場合）

![スクリーンショット 2019-07-13 22.51.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257241/3413a96c-809e-163b-8ac3-04672ea3b735.png)

###インストール後、ESXiの初期設定をしてブラウザからNestedESXiにログインしてみる
![スクリーンショット 2019-07-13 23.04.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257241/6e8ce898-34c9-dfb0-1c7e-1f283c5890d7.png)

仮想マシンなのでNICも作り放題
![スクリーンショット 2019-07-13 23.12.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257241/3e8895bf-25bd-acfd-343e-f954f0b981cd.png)
HTML の テキスト の文字間隔 を 設定する

# 目的
- HTMLファイルのテキストの文字間隔を設定する方法をまとめる。

# 押さえるポイント
- 文字間隔を調整したい要素やクラス名を指定してletter-spacingプロパティで設定する。
- 文字間隔の設定はピクセル数を用いて設定する。

# 書き方の例
- 下記にCSSファイルの内容を記載する。

``` css
要素の名前かクラス名 {
  letter-spacing: 文字間隔のピクセル数;
}
```

# より具体的な例
- h1要素に記載されている「おはようございます。」の文字間隔を10ピクセルに設定する。
- 下記にHTMLファイルの内容を記載する。

``` html
<h1>おはようございます。</h1>
```

- 下記にCSSファイルの内容を記載する。

``` css
h1 {
  letter-spasing: 10px;
}
```
入力値は全体の何パーセント

#入力した数値から全体の何パーセントなのかを求めるソース

#ソースコード
```php
<?php
// Your code here!
//全体値を入力
$Population = 1000;
//求めたい人口を入力(0だと未入力)
$Cut = "0";

//割合計算用の数値に変換
$wariai = $Cut * 0.1;

//割合を求める
if(!$Cut){
    echo "入力値が入っていません";
} else {
    $kekka = $wariai / $Population * 100;
    echo "入力した値は、全体値の$kekka";
    echo "%です";
}

?>
```