OmniAICreator/Qiita-1.07M huggingface dataset:
PHP独学ノート　その4

<font color="green">定数</font>
<font color="blue">変数</font>とはデータの入れ物なので、当然、スクリプトの実行途中でその中身を入れ替える事ができる。

一方、入れ物と中身がワンセットになっており、途中で中身を変更できない入れ物のことを<font color="red">定数</font>と言う。

<font color="green">定数の基本</font>
まずは定数を使わない例。

```
$price = 1000;
$sum = $price * 1.1;
```

<font color="green">値の意味が曖昧</font>
今回の例は比較的類推しやすいかもしれないが、コードが複雑になってくると1.1が値上げ率を表すのか、サービス料金を表すのか、それとも全く異なる何かなのか汲み取りにくくなる。

一般的にコードに埋め込まれた名前のない値は自分以外の人間にとっては意味を持たない謎の値だと考えるべき。
そのような値のことをマジックナンバーという。

<font color="green">値の修正に弱い</font>
コードのそちこちに1.1を使用していた場合、将来的に消費税が12%.15%と変化したらそれらの値を漏れなく検索/修正すると言う作業が必要となる。

それは面倒なだけでなく修正漏れなどバグの原因となる。

そこで1.1という値を次のように定数化する

```
<?php
const TAX = 1.1;
$price = 1000;
$sum = $price * TAX;

print $sum;
//結果: 1100
```

<font color="blue">const</font>は定数を宣言する為の命令で、ここではTAXに1.1という値を設定している。

これを使えば後から消費税が変更になった場合にも、const TAX = 1.1の、1.1の部分だけを修正すれば良いので、修正漏れの心配がない。


<font color="green">定数のルール</font>

定数の構文は変数と似ているが、いくつか異なる点もある。

<font color="blue">名前の先頭に「$」は付けない</font>
変数とは異なり1文字目の「$」は不要。

<font color="blue">名前は、PHPで意味を持つ予約語でないこと</font>
予約語は、定数だけでなく関数、クラス/インターフェイスなどの名前としても利用できない。
変数は頭に「\$」が付くので例外的に「\$if」のような名前も可能だが、混乱を招くのであえて使う意味はない。

<font color="blue">全て大文字で命名する</font>
構文規則ではないが、定数は変数と区別しやすいように全て大文字で命名するのが通例。
複数の単語を含むような名前をつけたい場合には「CONSUMPTION_TAX」のようにアンダースコアで区切る。

<font color="blue">利用できる型は限定される</font>
型とはデータの種類を識別する為の情報。
具体的には以下の型だけを利用できる。

整数（int）、小数（float）、文字列（string）、true/false（bool）、null、以上の値を含んだ配列。


<font color="green">define関数</font>
定数は（const以外にも）defineで定義しても良い。
例えば以下は先ほどのconst命令をdefine関数で書き換えたもの。

```
define(‘TAX’, 1.1);
```

関数とはPHPで利用できる命令の一種。

いずれも似たような役割を担うが、微妙にできる事が異なる。

<font color="green">const/defineの相違点</font>
<font color="blue">①トップレベル以外での宣言</font>
const ×
define ◯
トップレベル以外とは、if/whileなどの制御命令、functionの配下ではconstを利用できないと言うこと。

<font color="blue">②クラス定数の宣言</font>
const ◯
define ×

<font color="blue">③変数、関数の戻り値を設定</font>
const ◯
define ×
例えば以下のように、constでは変数の値や演算の結果を定数に割り当てられないということ。

```
const VALUE = $x;
const MAIN = dirname(__FILE__).’/test.php';
```

このような定数については、define関数を利用しなければならない。

```
define(‘VALUE’, $x);
define(‘MAIN’, dirname(__FILE__).’/test.php’);
```
/var/log/lastlog は logrotate しない

タイトルの通りなのですが、「lastlog roglotate」で Google 日本語検索すると、上位に logrotate してしまうブログがいくつか出てきてしまうため、注意喚起です。

lastlog について man ページには以下の記載があります。

:::note info
NOTE
The lastlog file is a database which contains info on the last login of each user. You should not rotate it. It is a sparse file, so its size on the disk is usually much smaller than the one shown by "ls -l" (which can indicate a really big file if you have in passwd users with a high UID). You can display its real size with "ls -s".
:::
https://man7.org/linux/man-pages/man8/lastlog.8.html

logrotate しないでください。/var/log/lastlog はスパースファイルなので、たいていの場合「ls -l」で表示されるサイズよりも実際のディスク使用量ははるかに小さいです。実際のサイズは「ls -s」で確認できます。とのことです。

（実際に試してみたところ、私の環境ではそこまで差がありませんでした）

```console
# ls -lsh /var/log/lastlog
288K -rw-rw-r--. 1 root utmp 286K  2月 12 20:05 /var/log/lastlog
```

ちなみに、2022年2月現在、日本語の man には上記の情報が記載されていません。
そのせいもあってか、 logrotate されてしまっているブログ記事がしばしばあるのかもしれません。

この件から得られた教訓は２つです。

* ブログを参考にする場合は、公式リファレンスで裏を取るようにしましょう。
* リファレンスはできるだけ英語で読むようにしましょう。```man -L C lastlog```
PythonのJupyterを使ってみた


# 目的
> Jupyterノートブック利用まで

# Jupyter Notebook とは
> Jupyter Notebook（ジュピター・ノートブック）とは、ブラウザ上で動作するプログラムの対話型実行環境です。データ分析には欠かせないツールの１つです。

# 準備
> Jupyter Notebookのみであれば、コマンドプロンプトなどPythonが実行できる環境）において、以下のコマンドを実行することでインストール可能です。

```terminal
C:\Users\user\Documents\python>python3 -m pip install --upgrade pip
C:\Users\user\Documents\python>pip3 install jupyter
C:\Users\user\Documents\python>jupyter notebook
```

# 実践
```python:sample1.py
# matplotlib をインラインで使用することを指定する
%matplotlib inline
# ライブラリの読み込み
import matplotlib.pyplot as plt

# グラフを描画する
plt.plot([1,2,3,4])
plt.show()
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57249/536e0bc4-6d75-91b3-5377-c28322851225.png)

# わかったこと
1. Jupyter Notebookでは、入力したプログラムの実行結果が、プログラムの直後に表示されるので、結果が分かりやすく、すぐに確認することができました。
2. Markdownを記述することができ、コードや実行結果も含めた技術的なドキュメントの作成や共有に役立てることもできました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57249/e74605e9-27df-27df-044f-444ed0269756.png)
3. `jupyterSample1.ipynb` をgithubやgitlabにプッシュすることでグラフがgithub上で確認できる

# 参考
[https://ai-inter1.com/jupyter-notebook/](https://ai-inter1.com/jupyter-notebook/)
[https://udemy.benesse.co.jp/development/python-work/jupyter-notebook.html](https://udemy.benesse.co.jp/development/python-work/jupyter-notebook.html)
中学3年生のみなさんへ。〈2/3〉数と式「2022年度 大学入学共通テスト 本試験｜数学Ⅰ第1問 [1]」sympyで実行してみたい。 

(2022-02-12)分割しました。

オリジナル

https://qiita.com/mrrclb48z/items/7c16cb5141a495bc5307


# Pycharmで:「一定の手順に従って数学的に処理する(問題作成方針 )」に準拠しているコード?

(2022-02-12)

```python
from sympy import *
var('a b c x')
f=a + b + c
print("#",(f**2),"=",(f**2).expand().as_independent(Pow)[1],"+",(f**2).expand().as_independent(Pow)[0].factor())
myEq=Eq(1**2,13+2*x)
print("#",myEq)
print("#",solve(myEq,x)[0])
# (a + b + c)**2 = a**2 + b**2 + c**2 + 2*(a*b + a*c + b*c)
# Eq(1, 2*x + 13)
# -6
```

制作中

# Pycharmで:「一定の手順に従って数学的に処理する(問題作成方針 )」に違反しているコード
(2022-01-18)
xy使わず、solveの連立方程式で計算してから、代入しています。
文字化けしますが、https://live.sympy.org/ で以下のソースコードを貼り付けて実行(Evaluateをクリック)できます。 

```python
from sympy import *
var('a b c x y')
myEq_1 =Eq(a+b+c,1)
myEq_2 =Eq(a**2+b**2+c**2,13)
myEq_3 =Eq(a-b,2*sqrt(5))
#
expr_AI=a*b+b*c+c*a
expr_UE=(a-b)**2+(b-c)**2+(c-a)**2
expr_OKA =x+y
expr_KIKU=x**2+y**2
expr_KE  =(a-b)*(b-c)*(c-a)
#
ans1=solve([myEq_1,myEq_2],[a,b])
print("#(1 )ab  ",ans1)
mySubs1A={a:ans1[0][0],b:ans1[0][1]}
mySubs1B={a:ans1[1][0],b:ans1[1][1]}
print("#(1A)アイ",expr_AI.subs(mySubs1A).simplify())  # simplify()必要です。
print("#(1A)ウエ",expr_UE.subs(mySubs1A).simplify())
print("#(1B)アイ",expr_AI.subs(mySubs1B).simplify())
print("#(1B)ウエ",expr_UE.subs(mySubs1B).simplify())
print("#---------------------------------------------------------------")
mySubs2 ={x:b-c,y:c-a}
ans2=solve([myEq_1,myEq_2,myEq_3],[a,b,c])
print("#(2 )abc ",ans2)
mySubs2A={a:ans2[0][0],b:ans2[0][1],c:ans2[0][2]}
mySubs2B={a:ans2[1][0],b:ans2[1][1],c:ans2[1][2]}
print("#(2A)オカ",expr_OKA .subs(mySubs2).subs(mySubs2A))
print("#(2A)キク",expr_KIKU.subs(mySubs2).subs(mySubs2A).simplify())  # simplify()必要です。
print("#(2A)ケ　",expr_KE                .subs(mySubs2A).simplify())
print("#(2A)オカ",expr_OKA .subs(mySubs2).subs(mySubs2B))
print("#(2A)キク",expr_KIKU.subs(mySubs2).subs(mySubs2B).simplify())
print("#(2A)ケ　",expr_KE                .subs(mySubs2B).simplify())
```

方程式の解が2つあります。虚数がありません。
「実数a,b,c」は、1文字目から出題者のヒント?0も実数です。

出力

```
#(1 )ab  (以下省略)  
#(1A)アイ -6
#(1A)ウエ 38
#(1B)アイ -6
#(1B)ウエ 38
#--------------------------------------------------------------------------------
#(2 )abc  [(-1/3 + sqrt(5), -sqrt(5) - 1/3, 5/3), (1 + sqrt(5), 1 - sqrt(5), -1)]
#(2A)オカ -2*sqrt(5)
#(2A)キク 18
#(2A)ケ　 2*sqrt(5)
#(2A)オカ -2*sqrt(5)
#(2A)キク 18
#(2A)ケ　 2*sqrt(5)
```

# つづく〈3/3〉へ
【SAP-C01試験対策】AWS Elastic BeanstalkのBlack Belt を文章でまとめてみた

# はじめに

AWSのElastic Beanstalkをblack Belt Online Seminerの資料等を参考に学習したので、内容をまとめます。

https://www.slideshare.net/AmazonWebServicesJapan/aws-black-belt-online-seminar-2017-aws-elastic-beanstalk

https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/Welcome.html

# 背景
著者は転職活動中ですが、志望する企業でDevOpsの知識が必要となるため、DVAの資格取得の学習をしています。

# AWS Elastic Beanstalkとは
定番環境の構築・アプリケーションデプロイの自動化サービス。

## 定番構成
新しい環境の作成画面から環境枠を選択できる。
- ウェブサーバー環境：ELB + Auto Scalingでスケーラブルなウェブアプリを構築。
- ワーカー環境：SQS + Auto Scalingでスケーラブルなバッチ処理基盤を構築。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951272/124e7569-4013-e643-ec43-95a73475858c.png)


## 環境の構築方法
1. AWS Management Console
1. IDEツール
1. SDK、CLI
1. EB Command Line Interface：ハイレベルな操作が可能。

## デプロイに関する用語
- In Place Deployment：新しいコードをその場で反映
- Blue/Green Deployment：新しいコードを新しいインスタンスに反映させ、インスタンスを入れ替える

## デプロイ手法

|  手法 | 方式 | 説明|
| ---- | ---- |----|
|  All at Once |  In Place  |全インスタンスに同時にデプロイ|
|  Rolling  |  In Place  | 一台ずつデプロイ|
|Rolling with additional batch| In Place & Blue/Green| 新インスタンスを構築し稼働台数が変わらないようにデプロイ
|Immutable |Blue/Green|新しい環境のリリース後、ヘルスチェックをしロードバランシングを切り替える
|(URL Swap , Route 53による環境切り替え)|Blue/Green| 新しい環境のリリース後、URLやCNAMEレコードを交換する

## 主な設定ファイル（DVA試験対策）
- .ebextensions：ソースコードに含めて各構成ファイルを配置する。
- env.yaml：環境の名前、ソリューションスタックと環境リンクを設定する
- cron.yaml：ワーカー環境に設定することで繰り返しタスクやスケジュール設定されたタスクセットを非同期で実行
Laradockでimagickを使えるようにする

## はじめに
Laradockの標準のDockerfileだと上手く動かなかったので勉強がてらDockerfileをいじってみました。

## 詰まった原因
```txt:エラー
attempt to perform an operation not allowed by the security policy `PDF' @ error/constitute.c/IsCoderAuthorized/410
```
どうやら設定ファイルを書き換える必要があるらしい。設定ファイルの場所はDockerコンテナの中の`/etc/ImageMagick-6/policy.xml`。コンテナを起動するたびに`vim`などで書き換えるのは面倒なのでDockerfileにあらかじめ処理を書いておくことにしました。

## 解決方法
使っているコンテナのDockerfile（自分の場合は`php-fpm`と`workspace`）を下記のように編集してください。

```Dockerfile:Dockerfile
RUN if [ ${INSTALL_IMAGEMAGICK} = true ]; then \
  apt-get update && \
  # ↑ここを追加
  apt-get install -y libmagickwand-dev imagemagick && \
  sed -i -e 's/domain="coder" rights="none"/domain="coder" rights="write|read"/g' /etc/ImageMagick-6/policy.xml && \
  # ↑ここを追加
  ~ 以下略
```
使いたいコンテナの`.env`も編集します。

```.env:.env
### WORKSPACE #############################################
~
PHP_FPM_INSTALL_IMAGEMAGICK=true
~
### PHP_FPM ###############################################
~
WORKSPACE_INSTALL_IMAGEMAGICK=true

```
Dockerをリビルド

```
docker-compose up --build -d nginx mysql redis
```

## 解説
`apt-get update` パッケージ一覧の更新
`sed -i -e ~` 設定ファイルの書き換え。PDFの読み込み、書き込みを許可しています。
C言語 : ポインタ

## ポインタ
アドレスを格納することができる変数

## Code
```C
#include <stdio.h>

int main()
{
    // 変数を作成し、値を格納
    int a, b, c;
    a = 1;
    b = 2;
    c = 3;

    // 変数の内容を出力
    printf("a=%d, b=%d, c=%d\n", a, b, c);

    // 変数のアドレスを出力
    printf("a address is %p\n", &a);
    printf("b address is %p\n", &b);
    printf("c address is %p\n", &c);

    // ポインタを作成
    int *a_pointer;
    int *b_pointer;
    int *c_pointer;

    // ポインタにアドレスを格納
    a_pointer = &a;
    b_pointer = &b;
    c_pointer = &c;

    // ポインタのアドレスを出力
    printf("a_pointer address is %p\n", a_pointer);
    printf("b_pointer address is %p\n", b_pointer);
    printf("c_pointer address is %p\n", c_pointer);

    // ポインタに値を格納
    *a_pointer = 100;
    *b_pointer = 200;
    *c_pointer = 300;

    // a,b,cの変数を出力、値が変化している
    printf("a=%d, b=%d, c=%d\n", a, b, c);
}
```

## Output Sample
~ $ gcc Pointer.c 
~ $ ./a.out 
a=1, b=2, c=3 
a address is 0x7ffeef898a4c 
b address is 0x7ffeef898a48 
c address is 0x7ffeef898a44 
a_pointer address is 0x7ffeef898a4c 
b_pointer address is 0x7ffeef898a48 
c_pointer address is 0x7ffeef898a44 
a=100, b=200, c=300 

## GitHub
https://github.com/GL-Kageyama/C_Pointer_Sample
React: ソースファイルの分割

こちらのコード index.js を分割してみました。
[React のチュートリアル (3目並べの途中まで）](https://qiita.com/ekzemplaro/items/0349370a52f70f3a9722)

フォルダー構造

```text
$ tree src
src
├── Board.jsx
├── Game.jsx
├── Square.jsx
├── index.css
└── index.js
```

```js:index.js
// ---------------------------------------------------------------
//	index.js
//
//					Feb/12/2022
// ---------------------------------------------------------------
import ReactDOM from 'react-dom';
import './index.css';

import Game from './Game.jsx';

// ---------------------------------------------------------------
ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

// ---------------------------------------------------------------
```

```jsx:Game.jsx
// ---------------------------------------------------------------
//	Game.jsx
//
//					Feb/12/2022
// ---------------------------------------------------------------
import React from 'react';
import Board from './Board.jsx';

// ---------------------------------------------------------------
export default class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ---------------------------------------------------------------
```

```jsx:Board.jsx
// ---------------------------------------------------------------
//	Board.jsx
//
//					Feb/12/2022
// ---------------------------------------------------------------
import React from 'react';
import Square from './Square.jsx';

// ---------------------------------------------------------------
export default  class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }

  render() {
    const status = 'Next player: X';

const width = 3;
const height = 3;

var rows = []
rows.push(status)
rows.push(<p></p>)
for (let it = 0; it < width; it++) {
    const cells = [];
    for (let jt = 0; jt < height; jt++) {
      cells.push(this.renderSquare(it * 3 + jt));
    }
 rows.push(<div className="board-row">{cells}</div>);	
}
  return <div>{rows}</div>;
  };
}

// ---------------------------------------------------------------
```

```jsx:Square.jsx
// ---------------------------------------------------------------
//	Square.jsx
//
//					Feb/12/2022
// ---------------------------------------------------------------
import React from 'react';

// ---------------------------------------------------------------
export default class Square extends React.Component {
  constructor(props) {
    super(props);
	this.state = {
		value: null,
		};
	}

  render() {
    return (
      <button className="square"
	 onClick={() => this.setState({value: 'X'})}
	>
        {this.state.value}
      </button>
    );
  }
}

// ---------------------------------------------------------------
```

サーバーの起動

```bash
npm start
```
誤差なし正整数除算をする関数

Decimalを使えば良いのですが、練習のために自分で関数を書いてみました。
筆算と同じことをすれば良いです。
関数g(a,b,n)を定義し、aをbで割った値を、小数点以下n桁まで計算してstrで返すようにします。四捨五入はせず、n+1桁目以降は切り捨てられます。
以下python3での実装です。

```python
def g(a, b, n):
    def f(a, b, n):
        if n == 0 or a == 0: return ""
        else: return str(a * 10 // b) + f(a * 10 % b, b, n - 1)
    assert a >= 0 and b > 0 and n >= 0
    period = "." if a % b != 0 else ""
    return str(a // b) + period + f(a % b, b, n)

print(g(1,1024,5))   # 0.00097
print(g(1,1024,10))  # 0.0009765625
```

fが小数点以下部分、gが整数部分の計算をします。
関数fの`or a == 0`を除けば、途中で割り切れる場合も小数点以下n桁目まで0で埋められます。
Pythonのような動的型付け言語でも「変数の型を考えること」は大切だと思う

## 概要

**型を宣言することの良い点**は、プログラムで**表現**しようとしている**対象**を**深く考えるきっかけ**を与えてくれる点だと思います。

私はPythonを書き始めた頃、型宣言する必要がないために、変数の型を意識しませんでした。
最近、**型**はプログラムを書く際に**副操縦士や補助輪**として**プログラマーを補佐する効果**があると感じています。

## たとえ話

プログラムはなにかを表現するものだと思います。
ここでは**バレーボール**を表現してみます。

登場させるのは**セッター**、**スパイカー**、**バレーボール**です。

セッターがボールを上げて、スパイカーが相手コートへ打ちこむ様子を書きます。

### 例1

```python:example1.py

ball = "ball"
setter = Setter()
spiker = Spiker()

setter.setup(spiker, ball)
spiker.spike()

```

これでも一応はバレーボールにおける、**セッターがボールを上げて、スパイカーが相手コートへ打ち込む**という様子を表現できていそうです。

### 例2

次の例を見てみます。

```python:example2.py

ball = "soccer_ball"
setter = Setter()
spiker = Spiker()

setter.setup(spiker, ball)
spiker.spike()

```

この例では`ball`変数に`soccer_ball`が入っています。
にもかかわらず、セッターもスパイカーも気にすることなく競技を続けているようですね。

### 例3

最後にかなり変な例を書きます。

```python:example3.py

ball = "water"
setter = Setter()
spiker = Spiker()

setter.setup(spiker, ball)
spiker.spike()

```

今度はボールではなく**水（water）**になっています。
それでも、セッターとスパイカーは気にしていない様子。

## 型宣言をしてみる

たとえ話で出てきたサンプルコードは、どこかおかしいものでした。
特に例2と3は変ですね。

ここで考えてみたいことは、何が変だったかということです。
プログラムだけに閉じた話をすれば、何も変ではないです。実際に動作するでしょう。

ただ、**バレーボールを表現しようとしたプログラム**だとすれば、変です。

この違和感を型宣言をすることで確認しましょう。

```example1_ver2.py

ball: str = "ball"
setter: Setter = Setter()
spiker: Spiker = Spiker()

setter.setup(spiker, ball)
spiker.spike()

```

ボールを表す変数`ball`が`str`となっていることに違和感を覚えます。
バレーボールで使う**ボールは文字列**ではなく、**本物のボール**だからです。

:::note warn
文字列のボールを使っているから、waterというヘンテコな値が入り込みました。
:::

```example1_ver3.py

ball: Ball = Ball()
setter: Setter = Setter()
spiker: Spiker = Spiker()

setter.setup(spiker, ball)
spiker.spike()

```

上記では`ball`に`Ball`型を入れています。
これならば違和感はないですね。

ちょっと状況を変えて、これが球技大会の中の位置種目としてバレーボールがある場合はどうでしょう。
サッカーやバスケットボールもあります。
ただの`Ball`型だとサッカーボールやバスケットボールと混同しそうです。

```example1_ver4.py

ball: VolleyBall = VolleyBall()
setter: Setter = Setter()
spiker: Spiker = Spiker()

setter.setup(spiker, ball)
spiker.spike()

```

`VolleyBall`型を入れることで、サッカーボールでもバスケットボールでもない**バレーボール**を使っていることがわかります。

## まとめ

このように型を意識して書くことで、自分がプログラムで表現しようとしている**対象のことを深く考える**ようになります。
**対象に対する理解**が**深まるほど**に、読んでいて**自然なプログラム**を書けるようになると感じます。
aptでQEMUをインスコしたら古かったので自力でビルドした話

#初めに
今回は短編です。
前回の記事でqemu-system-aarch64を使いましたが、バージョンを確認したところ4.x.x(厳密なところを忘れてしまった...)でした。
~~最新の安定ビルドは6.2.0ですので、少なくとも2世代も古いものになります。~~
更新：内容をQemu 10.0.2に更新しました。現在はapt経由のバージョンもより新しい世代に更新されていると思われます。
そこで、コードからビルドして最新版をインストールしたいと思います。

```shell
$ qemu-system-aarch64 -version 
```
#最新をダウンロード&ビルドする
まずはビルドに必要なツールをインストールします。

```terminal
$ sudo apt update
$ sudo apt install build-essential ninja-build libglib2.0-dev libfdt-dev libpixman-1-dev zlib1g-dev
```
次にQemuのソースコードをダウンロードし、ディレクトリに移動します。

```terminal
$ wget https://download.qemu.org/qemu-10.0.2.tar.xz
$ tar xvJf qemu-10.0.2.tar.xz
$ cd qemu-10.0.2
```
ビルドします

:::note warn
ビルドには非常に長い時間かかります。
自分の環境では3時間ほどかかりました。
早朝や就寝前など、時間に余裕のある時に実行しましょう。

ビルド後のqemuのフォルダーは10GB程度になります。
ストレージに十分な容量があることを確認してから実行してください。

既にQemuをインストールしている場合、上書きでインストールされますのでバージョン依存関係がある場合は注意してください。

手順内で異常終了などによる損害に関して一切の責任を筆者は負いません。
:::

```terminal
$ ./configure
$ make
```
ビルド完了後は以下のコマンドでインストールできます

```terminal
$ make install
```
#おわり
本記事は以上となります。ありがとうございました。
git branchコマンドの実行結果をpager表示されないようにする

新しいPCを設定していたのですが、`git branch`コマンド実行後に`q`を押して表示を終了しなければ次のコマンドが実行できなくなっていた（pager表示される）ので、対応方法をメモしておきます。

自分はgitはコマンドから操作する派で、さらに息をするように `git branch` を実行することが癖になっています。（エイリアスを設定して `git br` としています。）
![git1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/2c519168-0f45-76d2-dee1-4a428e4bd64c.gif)
新しいPCを設定していたら、 `git branch` を実行時に結果がpagerで表示されるようになっていました。
つまり、下記のように `git branch` を実行すると、`q` を押して表示を終了しなければ次のコマンドが実行できませんでした。

```sh
% git br
* develop
  main
lines 1-2/2 (END) # ここでqを押して終了する必要がある！
```

`git branch` 実行後にいちいち`q`を押すのがめんどくさい！！
![keyboard_clasher.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/14667e59-b7fc-c60e-acc9-28762a756d6c.gif)
無駄に`git branch`する癖を直そうかと思ったのですが、結構なストレスだったためpager表示されないようにして対応しました。

# 対応方法1
下記を実行します。
`git branch` 実行時にpager表示がオフになります。

```sh
git config --global pager.branch false
```

# 対応方法2
下記を実行します。
実行結果が画面に収まらない場合のみ、pager表示となります。

```sh
git config --global pager.branch "less -F -X"
```

状況によって、対応方法を使い分けようと思います。
無事解決！

# おまけ
ちなみに、`git branch`に限らず全てのコマンドに適用したい場合は下記のように設定できます。

```sh
git config --global --replace-all core.pager "less -F -X"
```
[ActiveJob]Jobの中でbinding.pryする方法

# binding.pry in Job 

Jobの中をデバッグしたいのにできない。
そんな僕のために記事を残します。

# 2種類

## 1. perform_now

Jobのperformメソッドが`perform_later`メソッドから呼び出されていたら

一時的に`_now`に変えればOK！

すぐにJobを実行させることでpryができるようになる

```rb
.perform_now
```

## 2. アダプタのコンテナに接続する

dockerで開発されている方限定になってしまいますが、

sidekipなどの使用しているアダプターのコンテナに接続すればOKです！
NW.jsでアプリ作成

# NW.jsでアプリ作成


## NW.jsとは

公式のURLは以下です。

[NW.js](https://nwjs.io/)
[NW.js Documentation](http://docs.nwjs.io/en/latest/)

NW.jsはNode.jsで動作するアプリをネイティブアプリにします。
似たようなものとして、[Electron](https://www.electronjs.org/)があります。
Electronに関しての日本語資料はたくさんありますが、NW.jsはそれに比べると少ないです。
Electronの方が多機能と思いますが、NW.jsの方が作りやすいようです。
既にHTML表示できているようなものをアプリにするのであれば、NW.jsの方が早いと思われます。

## NW.js開発準備

公式 [NW.js](https://nwjs.io/) からインストーラをダウンロードすることもできますが、普通にnpmで設定できます。

### node
v12以上が必要なので、v12以上のnodeをインストールしておいてください。

```shell:実行例
nvm install 12
nvm use 12
```

### npm init

初期化します。
取り合えず、entry pointだけ"src/views/index.html"に変更しておきます。

```shell
package name: (xxxxxx)
version: (1.0.0)
description:
entry point: (index.js) src/views/index.html
test command:
git repository:
keywords:
author:
license: (ISC)
```

### NW.js

NW.jsをインストールします。

```shell
npm install --save-dev nw nw-builder
```

### 設定

起動スクリプトを設定しておきます。


```diff_json:./package.json
  "scripts": {
-   "test": "echo \"Error: no test specified\" && exit 1"
+   "test": "echo \"Error: no test specified\" && exit 1",
+    "dev":"nw src/",
+    "build":"nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ src/"
  },
```

### src/package.json

nwの設定ファイルを作成します。
同じpackage.jsonというファイル名ですが、これはアプリ側の設定で、srcディレクトリに作成します。

```json:src/package.json
{
    "name": "nw.js-sample",
    "main": "views/index.html",
    "window": {
        "min_width": 400,
        "min_height": 400
    }
}
```

### index.html

起動画面のindex.htmlを作っておきます。

```html:src/views/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
	<title>Sample</title>
</head>
<body>
	<p>Hello, World!</p>
</body>
</html>
```


### ※Linux環境について

ここで本来は起動するのですが、私の環境ではエラーとなりました。
WindowsやMac、Desktop Linuxのnode.js環境の方は問題ないと思います。前回はhttp-serverが動作すればよいので、dockerで最小限のCUIのLinuxを使っていました。
今回はGUIアプリになりますので、WindowManagerが必要（まあ、画面表示なんで当たり前ですね）。desktopのLinuxが必要になります。
自分でDesktop環境をつくるのも大変なので、docker hubから良さそうなのを引っ張ってきます。

```shell
docker pull dorowu/ubuntu-desktop-lxde-vnc
```

DockerのLinux起動関連はここでは詳細は省略します。
このイメージならばVNc接続表示できるので、GUIアプリの動作確認にも使用できます。
## 起動

準備できたら、以下のコマンドで起動してみます。

```shell
npm run dev
```
![001_sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547019/e7b82e75-5bf6-c8a9-3601-5548447bb20f.png)
正常に表示されました。

##  Build

表示できましたので、以下のコマンドでBuildします。

```shell
npm run build
```
dist配下に各プラットフォームの実行体が作られました。
Windowsで実行してみると、いくつかセキュリティ警告が表示されます。内部通信と署名で引っかかるようです。
Windows用のアプリとして出すには証明書が必要だと思われます。許可すれば実行されます。

![002_win_sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547019/c9316222-35a1-668a-d9e4-014d07b64a7e.png)

アプリとして実行できました。
統計検定2級 合格体験記（所要時間：60時間）

#　はじめに
**統計検定2級を2022年2月にCBT方式で受験し、71点（100点満点、合格ライン：60点）で合格しました。**

本記事は、以下のポイントを中心にまとめています。

- **勉強スタンス**
- **勉強方法**
- **統計検定2級で抑えるべきポイント**
- **本番の試験での注意点**
- **なぜ統計検定2級を受けたのか**

#スペック
簡単に私のスペックを書いておきます。

- **数学の知識は大学の線形代数の基礎を理解している程度**
- **25歳、大手企業の新卒サラリーマン**
- **機械学習エンジニアにキャリアチェンジするために必要な知識の習得中**

ちなみに大学で受けた統計学の講義はちゃんと落単してます。
人のせいで申し訳ないですが、教授の説明が数式の羅列ばっかりで何言ってるか全くわからなかったんですよね...

# 勉強スタンス
私見ですが人間って物事に対して2通りの理解の仕方があると思うんですよね。
それは**言語理解**と**視覚理解**です。
私は後者の視覚理解が伴っていないと全く理解した気になれない、腑に落ちないタイプの人間です。
（基本的に数学って視覚化することが難しいので言語で理解できる人が本当に羨ましいです。）

**私と同じようなタイプの人は、間違えながらでも良いので、必ず絵を書いて理解していくことをおすすめします。**
特に統計学は生のデータを分布に変換して扱うので、視覚理解が伴っていないと解釈が追いつかなくなっちゃうと思うんですよ。
とりあえずノート、スケッチブック、タブレット、何でも良いので頭の中を絵をアウトプットしながら勉強してました。

　
# 勉強方法
合計の勉強時間は**60時間**ほどで、以下の順番で勉強しました。

1. **【約20時間】[統計学WEB](https://bellcurve.jp/statistics/course/)を1周まるっと読む。**
1. **【約10時間】統計学WEBで理解できなかった部分に関して、ネットで記事や資料を探して理解する**
2. **【約20時間】[過去問](https://www.amazon.co.jp/%E6%97%A5%E6%9C%AC%E7%B5%B1%E8%A8%88%E5%AD%A6%E4%BC%9A%E5%85%AC%E5%BC%8F%E8%AA%8D%E5%AE%9A-%E7%B5%B1%E8%A8%88%E6%A4%9C%E5%AE%9A-2%E7%B4%9A-%E5%85%AC%E5%BC%8F%E5%95%8F%E9%A1%8C%E9%9B%86-2018%E3%80%9C2021%E5%B9%B4/dp/4788925559/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=QSF3SZ0FL4F5&keywords=%E7%B5%B1%E8%A8%88+%E6%A4%9C%E5%AE%9A+2+%E7%B4%9A%5C&qid=1644656836&sprefix=%E7%B5%B1%E8%A8%88%E6%A4%9C%E5%AE%9A2%E7%B4%9A+%2Caps%2C212&sr=8-1)を解く＋復習する。(1周)**
2. **【約10時間】過去問の解き直し(2周)**

**統計学WEBは本当に統計初学者にやさしいサイトです。**
記述されている内容を**実際に手を動かしながら、絵を書いて**理解していきました。
ただ自分の理解では絵がイメージできない部分もあるので、ネット検索でまとめ記事やどこかの講義資料を参考にしつつ進めてましたね。

過去問は古い試験から解くことをおすすめします。
**統計検定2級は難化傾向にあります。なので最初に超難しい2021年6月分を解くと絶望することになります。**
ちなみに私は新しい試験から解いたので、「統計学WEBの勉強はなんだったのか」と膝から崩れ落ちる結果からスタートしました。（メンタルブレイク不可避です。）

# 統計検定2級で抑えるべきポイント
私が過去問を解いて**「ここ頻出だな」**と感じた部分を記載します。

- **分散、標準偏差、共分散、相関係数に対する記述統計面からのアプローチ**
- **各分布（ポアソン、二項分布、幾何分布など）の期待値、分散**
- **正規分布や二項分布などのZ変換とP値**
- **自由度を問われる問題**
- **分散分析とt値、F値、P値**
- **各種検定（t検定、カイ二乗分布による検定、F検定）**

もちろん上記に記載していない部分も大切なのですが、**上記の内容をマスターして解く時間を浮かせることでグッと試験が楽になります**
**整理しながら勉強を進めないとごちゃごちゃになる（特に分散分析、独立性、適合度、対応なしの2郡の母平均の差、などの自由度）**ので、しっかり整理しながら過去問を進めましょう。

# 本番の試験の注意点
**10秒考えて、解法が1ミリも思い浮かばない問題はすぐ飛ばしてください。**
**解けるけど時間がかかりそうな問題も飛ばしちゃってください**
**意外と序盤に初見の難しい問題が潜んでいたりするので、まず最後まで解き切っちゃうことをおすすめします。**
ちなみに本番は、**いつもより1周目の時点で時間を使っていた+15問くらい自信がない問題やわからない問題があった**ので冷や汗モンでした...

1周目が終わった時点で「S判定やA判定は無理だな」と確信したので、2周目で解きやすそうな問題を重点的に手をつけました。
3問ほどほぼ考える時間を使わずに諦めました。

**また、CBT方式が初めての人は必ずネットで予習しておくことをおすすめします。**
いわゆるイメトレってやつですね。
試験会場が思った以上に緩い雰囲気で、試験監督と受験者が話す内容とか聞こえてきて、集中しづらかったです。

# なぜ統計検定2級を受けたのか
**機械学習エンジニアとしてキャリアチェンジを考えているので、必要そうな知識を転職前に揃えたかったからです。
勉強したことで視覚的に統計学を理解できるようになったので、実務で早くアウトプットに繋げていきたいですね！！**

あとは冗談半分な理由ですが、落単の過去を払拭したかったからです。
**これで過去の私が成仏できます。**

# まとめ
統計検定2級の合格体験記として、勉強方法や試験の注意点をご紹介いたしました。
統計検定2級は勉強時間さえかければ大抵の人が合格できる資格試験かと思うので、気軽にチャレンジしてみては如何でしょうか。
django.db.utils.OperationalError: connection to server at "db" (***.**.*.*), port 5432 failed: FATAL: the database system is starting up

#エラー解決方法

dockerを使用した状態で下記エラーが発生した場合
dockerイメージとdockerプロセスを全て削除すれば解決する

django.db.utils.OperationalError: connection to server at "db" (***.**.*.*), port 5432 failed: FATAL: the database system is starting up


■コマンド

コンテナを全削除する

```

docker ps -aq | xargs docker rm

```

イメージを全削除する

```

docker images -aq | xargs docker rmi

```
「find」 と 「find_by」の使い分けで気をつけなければいけないこと

railsにおいてmodelのデータを検索する際使用する 、findとfind_byの違いについて気をつけなければいけない点について書いていきます。

## 基本的な違い

findとfind_byの基本的な違いは主に

- find = モデルのIDを基準に検索をかける
- find_by = モデルのID以外の基準で検索をかけられる(IDでも検索可)

です。

例）

```ruby
user = User.find(1)
user = User.find_by(name: 'hoge')
```

基本的にはIDで検索する場合は「find」をそれ以外の場合は「find_by」を使用しているかと思います。しかしIDで検索をかける場合でも 「find_by」を使用したほうが良い場面があります。

それは「find」と「find_by」で検索をかけて該当のデータがなかった場合の挙動に起因するのですが、

- findで検索をかけた時、該当のデータがなかった場合は例外が発生する
- find_byで検索をかけた時、該当のデータがなかった場合は「nil」が返る

という挙動の違いがあり、もし「find」を使用時に該当のデータがなかった場合エラーが出てしまいます。それを回避したい時はIDで検索をかける場面でも「find_by」を使用したほうがいいのです。

存在しないIDを「find」で検索する

```ruby
User.find(1000)

# 結果
ActiveRecord::RecordNotFound (Couldn't find User with id'=1000)
```

存在しないIDを「find_by」で検索する

```ruby
User.find_by(1000)

# 結果
User Load (0.2ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1000], ["LIMIT", 1]]
=> nil
```

既存のユーザーを編集するようなeditアクション等確実に存在するIDを検索するときは「find」を使用し、もしそうではなくエラーを出したくないような場面では「find_by」を使用するようにしましょう。
Uncaught TypeError: Vue is not a constructorの対処法

# Uncaught TypeError: Vue is not a constructorの対処法
あるネットの教材でVue.jsの勉強をしていた所、このエラーが発生した。
![スクリーンショット 2022-02-12 18.25.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243749/0313ae81-5b3b-6f8e-c5b4-27b1acdedada.png)


構成としては、index.htmlからCDNでVue.jsを読み込んで使っています。

```main.js
(function () {
  "use strict";

  var vm = new Vue({
    el: "#app",
    data: {
      todos: [],
    },

以下省略
.........

  });
})();
```

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>My Vue App</title>
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div id="app" class="container">
 
 以下省略
.........

    <script src="https://unpkg.com/vue"></script>
    <script src="js/main.js"></script>
  </body>
</html>


```

# 解決策
以下のようにVue.jsを古いバージョン指定で読み込んであげます。

```
<script src="https://unpkg.com/vue@2"></script>
```


```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>My Vue App</title>
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div id="app" class="container">
 
 以下省略
.........

    <script src="https://unpkg.com/vue@2"></script>
    <script src="js/main.js"></script>
  </body>
</html>


```
Webix サンプルコード

最近、久しぶりに`webix`を使う機会があったため、サンプルを作成しました。
作成したサンプルは、github に上げておきました。

####webページ
https://nagajun1.github.io/webix_test/

#サンプルコード
サンプルコードを上げた github の URL はこれです。

https://github.com/NagaJun1/webix_test/tree/webix_test_20220212

コードの中身は以下の通りです。

```index.html
<!DOCTYPE HTML>
<html>

<head>
    <link rel="stylesheet" href="//cdn.webix.com/edge/webix.css" type="text/css">
    <script src="./lib/webix.js" type="text/javascript"></script>
    <script src="indexPage.js" type="text/javascript"></script>
</head>

<body>
    <script type="text/javascript">
        webix.ready(function () { loadMainPage() });
    </script>
</body>

</html>
```

```indexPage.js
function loadMainPage() {
    webix.ui({
        cols: [{
            rows: [{
                view: "template",
                type: "header",
                template: "list title",
                css: { "background-color": "#adcbd9" }
            }, {
                view: "list",
                id: "list_1",
                template: "#title#",
                select: true,
                data: [
                    { id: 1, title: "dummy 1 - 1 " },
                ]
            }, {
                view: "button",
                value: "output message",
                click: function () {
                    webix.message("click_button_a");
                }
            }]
        }, {
            view: "list",
            template: "#title#",
            select: true,
            data: [
                { id: 1, title: "dummy 1" },
                { id: 2, title: "dummy 2" },
            ]
        }]
    });

    for (let i = 0; i < 100; i++) {
        $$("list_1").add({
            id: "data_" + i,
            title: "dummy_" + i
        })
    }
}
```

#解説
重要だと感じる箇所だけ、ざっくりとメモっておきます。
・`webix.ui()`でテンプレートに沿った`JSON`を読み込むことで、画面上にデザインが表示される。
・横並びにしたい場合は`cols:[]`に、縦並びは`rows:[]`に格納する。
・list 表示の項目は`view: "list"`で設定する。（下記を参照）

https://docs.webix.com/api__refs__ui.list.html

・各要素を取得したい場合は`$$( 要素のid )`で取得できる。

#参照
今回のサンプル作成に使用したリンクです。
cdn（cdn で読み込むと、一部文字化けでエラーになる...?）

http://cdn.webix.com/edge/webix.js

webix 公式ページ

https://webix.com/
Mac(M1)にTensorFlowをインストールする方法

# 概略
GOOGLE社の提供する機械学習オープンソースのTensorFlowをM1チップのMacにインストールする方法をまとめた

https://www.tensorflow.org/

# 手順１
ターミナルを開いて、x-codeをインストール

```
xcode-select install
```

インストール後は、"--version"でインストールされていることを確認

```
xcode-select --version
```

# 手順2
下記よりMiniforgeをインストールします
https://github.com/conda-forge/miniforge
![スクリーンショット 2022-02-12 15.39.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603047/3b8e814a-35e1-d8bd-48de-d53182dccb6f.png)
↑赤枠のリンクをクリックすると.shファイルがダウンロードできます

ターミナルで、ダウンロードされたMiniforge3-MacOSX-arm64.shがある階層に移動し
下記のコマンドを実行します
■zshの場合

```
zsh Miniforge3-MacOSX-arm64.sh
```
■bashの場合

```
bash Miniforge3-MacOSX-arm64.sh
```

下記が表示されたら、ENTERキーを押下します

```
Welcome to Miniforge3 4.11.0-2

In order to continue the installation process, please review the license
agreement.
Please, press ENTER to continue
>>> 
```
規約情報が表示されていくのでENTERキーを連打しつつ次に進みます

ライセンスに同意するか聞かれるので、yesを入力します

```
Do you accept the license terms? [yes|no]
```

ENTERキーを押下します

```
Miniforge3 will now be installed into this location:
/Users/(User名)/miniforge3

  - Press ENTER to confirm the location
  - Press CTRL-C to abort the installation
  - Or specify a different location below
```

yesを入力します

```
Do you wish the installer to initialize Miniforge3
by running conda init? [yes|no]
[no] >>> yes
```

#手順3
TesorFlowをインストールし、conda環境を作成します

下記を開いて、.ymlファイルを保存します(command + S）
https://raw.githubusercontent.com/mwidjaja1/DSOnMacARM/main/environment.yml

ターミナルでymlファイルがダウンロードされたフォルダに移動し
下記を実行

```
conda env create --file=environment.yml --name m1_mac_tensorflow
```

下記が表示されたら、conda環境が作成されます

```
...
tensorflow-estimator | 646 KB    | ##################################### | 100% 
...
# To activate this environment, use
#
#     $ conda activate m1_mac_tensorflow
#
# To deactivate an active environment, use
#
#     $ conda deactivate
```

以上です


# 備考
作成したconda環境を起動したい場合は下記を実行します

```
conda activate m1_mac_tensorflow
```
conda activate ()
[iOS] [Swift] Password AutoFill（パスワード自動入力）を無効化したい…けどダメだった話

# 前提環境

- Xcode 13.1
- iOS 15.0 / 14.5

# Password AutoFillとは

iOS 11から導入された、こちらの画像の機能です。**『「🔑パスワード」っていうのを出さないようにしたい！』という話題です。**
<img alt="IMG_0003.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122917/6b3cd2f6-c68c-f585-adb5-ff6f07118d22.png" width="50%"><img alt="IMG_0004.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122917/bbb6229d-206f-73c4-fc62-314c7947e542.png" width="50%">
<img alt="IMG_0005.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122917/ea01288e-b802-df27-fe85-ea9a33c80258.png" width="50%">
本来は、Webサーバーに Credential を配置することによって、保存済みのID/パスワードを選択することなく、ワンタップで自動入力するところまで可能となります。
（参考記事）[[iOS 11] 新機能の Password AutoFill を実装する](https://dev.classmethod.jp/articles/ios-11-password-autofill/)

したがって↑は正確には「Password AutoFillの一部機能」ですが、面倒なので本記事ではPassword AutoFillと記載します。

# Password AutoFillの実装

めちゃくちゃ単純です。
パスワードのUITextFieldに以下のプロパティを設定するだけ。

```swift
passwordTextField.isSecureTextEntry = true
```

この実装は、Password AutoFillというより、入力値をマスクするためのプロパティ設定ですが…
これだけでキーボードに「🔑パスワード」が出て、選択したIDとパスワードが、iOSフレームワークによって、自動的にIDとパスワードのUITextFieldに貼り付けされます。

備考：

- OSバージョンによる実装差異（？）
    - iOS 11時代はIDのUITextFieldに`.textContentType = .username`を、パスワードのUITextFieldに`.textContentType = .password`を[設定する必要があったようです](https://dev.classmethod.jp/articles/ios-11-password-autofill/)。
    - 冒頭の前提環境で調べた限りでは、上の1行実装だけでPassword AutoFillが有効になりました。
- iOSフレームワークは、IDのUITextFieldをどうやって検出しているのか？
    - 冒頭の前提環境で調べた限りでは、「`isSecureTextEntry`をtrueに設定したUITextFieldの、一つ上に近接するUITextFieldがID」とみなしているようです。

# Password AutoFillの無効化

こちらが本題です。
この機能を無効化できないかを調査しました。
（「なぜ無効化する必要があるのか？」とは聞かないでください。 :sweat_smile: ）

結果、**完全には困難でした。**
「完全には」とは、以下のようなコードによって、iOS 12以降の端末では一応無効化できるものの…

```swift
if #available(iOS 12.0, *) {
    idTextField.textContentType = .oneTimeCode
}
        
passwordTextField.isSecureTextEntry = true
if #available(iOS 12.0, *) {
    passwordTextField.textContentType = .oneTimeCode
}
```

`.oneTimeCode`つまり「SMS認証コード」という設定になるので、SMSで認証コードを受け取ると、キーボード上部に
「メッセージから
　999999」
といったサジェスチョンが表示され、選択すると認証コードをID/パスワードに貼り付けることができてしまいます。

これでは、むしろ無用なトラブルを引き起こしかねないので、解決策として採用は見送りました。

あるいは、UITextFieldを継承して、自力で入力値をマスクする実装を追加し、`.isSecureTextEntry = false`と設定すれば実現できるかも知れませんが…工数面や品質面で見送りました。

他に何か解決法をご存知の方がいらっしゃったら、ぜひご教示いただきたいです！ :bow_tone1:
Androidの画面分割で固定指示してた画面が勝手に回転してさらにアクティビティが勝手に再生させられてしまう件

画面を縦向きに固定したければ
マニュフェストのactivityのところに

```activity.java
android:screenOrientation="portrait";
```






と書けば確かにそうなるのだが、画面分割で２画面表示にしたとき、スマホを横向きにすると、上記の設定にしているにも関わらず勝手に回転する（完全に防ぐにはOS側でrotationをoffにする必要があるがめんどくさい）。
で、回転それ自体は別に害はないのだが、回転すると、activityが再生されて計測がリセットされるのがとにかく困った。調べてみると、再生を防ぐには、同じくマニュフェストに

``` AndroidManifest.java
android:configChanges="keyboardHidden|screenSize|orientation"
```

などというふうに書けば良いとあり、これで解決しましたのでメモしておきます。
回転を止めるにはどうしたら良いのだろう。

参考：「AndroidアプリにおけるUIの状態保存と復元について調べてみた」
　　　　https://moneyforward.com/engineers_blog/2021/02/09/android-ui-state/
　　　「Androidの回転をどう対応するか派閥リスト」
　　　　https://qiita.com/kobakei/items/5f38339dd6528fdc6b5d
２分でわかるstaticインナークラス　JavaGold取得への道（内部クラス編）

徹底攻略Java SE 11 Gold問題集（黒本）を読んで最初にぶち当たる壁「内部クラス」ついて、４つの記事に分けてまとめました。
僕のようなJava初心者や、JavaGoldの資格取得に向けて、勉強をしている方にこの記事がお役に立てれば幸いです。
#はじめに
内部クラスには４種類あります。
今回はその中のstaticインナークラスについて解説していきます。
 ・[インナークラス](https://qiita.com/110shun/items/882699c71db9dccea7a8)
 ・staticインナークラス👈
 ・[ローカルクラス](https://qiita.com/110shun/items/da476b32117f904ea4d4)
 ・[匿名クラス](https://qiita.com/110shun/items/e912bab6c55982f50494)
##staticインナークラスとは？
一言で表すと、クラスの中で定義したstaticで修飾したクラスのことを指します。
知っておいて頂きたい特徴が２点ごさます.
　__・外部クラスの非staticなフィールドやメソッドにはアクセスできない__
　__・外部クラスのインスタンが無くても、インスタンス生成ができる__
この２点の特徴から分かるように外部クラスやそのインスタンスとの関係が比較的薄いです。
例えるなら、従兄弟みたいな感じでしょうか。
身内だけど家族よりは親近感が薄いよねってことをイメージして頂ければ結構です。
##どの場面で必要か？
__別のクラスとして分離する必要がなく、外部クラスのインスタンス生成が必要ない時__
例えば、あるMapを色々な要素でソートをかけられるようにしたい場合があったとします。
また、そのMapを並べるだけの実装なのでわざわざ別クラスとして分離しておく必要はありません。
そうのような場面にstaticインナークラスを利用します。
#どのように使うの？
###定義方法
下記のコードのようにクラスの中にstaticで修飾されたクラスを定義するだけです。

```Outer.java
public class Outer{
  public static class Inner{
    public void sample(){
      System.out.println("staticインナークラスです。");
    }
  }
}
```
下記の表はインナークラスとアクセス修飾子の関係を表しています。

| public | protected | private | final| static |
|:-:|:-:|:-:|:-:|:-:|
| ○ | ○ | ○ | ○ |○ |
##インナークラスのインスタンスの生成方法
外部クラスのインスタンが無くてもインスタンスが生成できます。

```main.java
public class Main{
  public void main (String[] args){
   Outer.Inner inner = new Outer.Inner();
   inner.sample();
  }
}
```
```
結果
staticインナークラスです。
```
:::note warn
外部クラスの非staticなフィールドやメソッドにはアクセスできないのでご注意ください。
:::
#まとめ
・staticインナ-クラスとは、クラスの中に定義したstaticで就職されたクラスのこと
・外部クラスのインスタンが無くても、インスタンス生成ができる
##参考文献
・徹底攻略Java SE 11 Gold問題集
[・【Java】内部クラス(インナークラス)の使い方](https://www.sejuku.net/blog/22637)
Android開発のSDKでつまづいた

環境
Mac　M1チップ

アプリをビルドしようとすると色々エラーがでてくる



#つまづきポイント1
buildToolsVersion 31 と 32 は
なぜかSDKファイルが壊れている云々のエラーが出た(M1だから？)
なので安定バージョンを選択

```build.gradle
buildToolsVersion "30.0.2"
```

#つまづきポイント2

・SDKとはなんぞや？

でつまづいた。Xcodeで必要なかった設定を初期設定として色々やらなければいけなかった
Android SDKからAPI Level 23　と最新API Level 32　をインストール

APILevelとはiOS開発でいうXcodeのバージョン？Swiftのバージョン？として考えるとイメージがしやすいのかな？（間違ってる気がする）

例えば
APILevel 23で開発行うとAndroid 6.0(Marshmallow) <- iPhoneで言うiOS
以前のスマホへは動作が確証されない？

逆にAPILevel32(現時点での最新)で開発を行うと23にはなかった新機能は使えるがAndroid API 32(世界のAndroidユーザー5％しかまだ使われていない)の最新OSを入れていないと使用できないアプリになる

そう解釈している(誰か教えてー)


#つまづきポイント3

シュミレーターについて
どうやらM1でシュミレーターを動かすには一手間必要らしい

そのため、実機で開発することにしたが、古いAndroid端末でAndroidバージョンが6.0.1つまりAPILevel 23 であったため、minSdkVersionを修正する必要があった。

```build.gradle
minSdkVersion 23
```

#つまづきポイント4
画面遷移
いくらコードを書いてもエラーが出ていた
やること
1,build -> clean project
2,再起動

1,AndroidManifestに遷移Activityの記載をしているか確認

```
        <activity
            android:name=".Activity">
        </activity>
```

まだまだこれからつまづいていく〜
【Flutter】Vertical viewport was given unbounded height.の解決方法

初めてのQiitaへの投稿です。
Columnウィジェット内でListViewを使おうとしたところ、エラーが発生してしまったのでメモ。

## エラー文
``` Vertical viewport was given unbounded height.```

どうやら垂直方向の高さが無制限になっていることが原因みたいです。

## ソースコード
``` dart
class _MyAppState extends State<MyApp> {
  List<Widget> list = [];

  @override
  void initState() {
    super.initState();
    for (int i = 1; i <= 100; i++) {
      list.add(
        Card(
          margin: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 0),
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Text('item${i}',),
          ),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Text(
              'ListView',
              style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
            ),
            ListView(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              children: list,
            ),
          ],
        ),
      ),
    );
  }
}
```
## 解決策

　まず、ListView内にshrinkWrap: trueを入力します（shrinkWrapはfalseがデフォルト）。これによって、垂直方向の高さが無制限になってしまう問題は解決します。しかし、これだけだと画面をスクロールすることができません。さらに、「A RenderFlex overflowed by 3976 pixels on the bottom.」というエラーまで発生してしまいます。

　その問題を解決するために、ListViewをExpandedで囲みます。すると、エラーも消え、画面をスクロールすることができるようになりました。また、Expandedの代わりにFrexibleを使用することも可能です。

## 参考

https://api.flutter.dev/flutter/widgets/ScrollView/shrinkWrap.html

https://qiita.com/tabe_unity/items/4c0fa9b167f4d0a7d7c2
React のチュートリアル (3目並べの途中まで）

こちらにあるチュートリアルの途中まで、クリックすると X がつくところまでを、改造して、JSX らしくしてみました。
[チュートリアル：React の導入](https://ja.reactjs.org/tutorial/tutorial.html)

参考ページ
[Reactに入門するよ](https://www.suzu6.net/posts/338-react-tutorial/)

スタート時
![tutorial_aa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/9e684b18-1218-26da-2e0a-46e698577ef0.png)

クリック
![tutorial_bb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/51f9cca8-a5f4-746a-b4a9-2aa7292f55bd.png)

またクリック
![tutorial_cc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/f6ee3cf1-f6eb-4b22-7cd4-2cefa2588373.png)


#プロジェクトの作成#

```bash
npx create-react-app proj01
```

必要のないファイルを削除

```bash
cd proj01
rm -f src/*
```

次の２つのファイルを作成
index.js はチュートリアルに変更を加えました。
index.css はチュートリアルと同じです。

```text
$ tree src
src
├── index.css
└── index.js
```

```js:src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Square extends React.Component {
  constructor(props) {
    super(props);
	this.state = {
		value: null,
		};
	}
  render() {
    return (
      <button className="square"
	 onClick={() => this.setState({value: 'X'})}
	>
        {this.state.value}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }

  render() {
    const status = 'Next player: X';

const width = 3;
const height = 3;

var rows = []
rows.push(status)
rows.push(<p></p>)
for (let it = 0; it < width; it++) {
    const cells = [];
    for (let jt = 0; jt < height; jt++) {
      cells.push(this.renderSquare(it * 3 + jt));
    }
 rows.push(<div className="board-row">{cells}</div>);	
}
  return <div>{rows}</div>;
  };
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);
```

```css:index.css
body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}
```

サーバーの起動

```bash
npm start
```

ブラウザーで、
http://localhost:3000/
にアクセス
[baserCMS]データベース接続に失敗した際のエラー画面をカスタマイズする


利用しているデータベース（DB）への接続に、何らかの理由で失敗した場合、baserCMSでは以下のエラー表示画面となります。
DBサーバは、起動していれば常にOKというわけではなく、システムなので完璧100％稼働する保証はありません。
ときには過剰な負荷により接続できなくなったり、DBサーバ側でのDB名や接続情報の変更に伴い、影響を受けることもあり得ます。そういったときに表示される内容が、baserCMSの本体コア側で準備されています。
準備されている内容は、あくまで汎用的なシンプルな構成となっているため、利用しているウェブサイトのデザインに近づけておいたり、文言を変更しておくことで、閲覧者への案内に繋げることができます。
![sc_db_error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26110/4de54061-87b1-8b77-816e-1361b4efafed.png "sc_db_error.png")

## 想定している対象者
- baserCMSでウェブサイトを制作をしている方


## 発生状況
1. サーバ上に設置しているbaserCMSで、何らかの理由でDBへの接続が失敗する場面


### 環境
- baserCMS 4.5.5（※4系全般）


## 表示に利用されているファイル

- レイアウト側: /lib/Baser/View/Layouts/missing_connection.php
- コンテンツ部分側: /lib/Baser/View/Errors/missing_connection.php


## 対処

DB接続エラー時は、全体大枠のレイアウトとして /lib/Baser/View/Layouts/missing_connection.php が利用されます。
ですので、こちらのレイアウトファイルを /app/View/Layouts/ 配下にコピーした上で、内容・外観を調整しておくと良いです。

- /lib/Baser/View/Layouts/missing_connection.php
	- → /app/View/Layouts/missing_connection.php

通常であればテーマ側のファイルが利用されますが、DB接続エラーの場合、そもそも利用しているDB内に保持しているテーマ情報の利用と取得がなされないため、オーバーライド機構の動作として以下のようになります。

- DB接続OK時
	1. テーマ側利用
	2. app側利用
	3. コア側利用
- DB接続NG時 
	1. [不可]テーマ側利用
	2. app側利用
	3. コア側利用

baserCMSコア側のファイルを直接触っても良いですが、コア側のバージョンアップ時に上書きしてしまう可能性が高いため、app側に複製設置して利用しておくと良いです。

コンテンツ部分側においても同様となります。

- コンテンツ部分側: /lib/Baser/View/Errors/missing_connection.php
	- → /app/View/Errors/missing_connection.php


## DB接続エラー以外のエラーにも対応しておく

上記ではDB接続エラーに関しての対応手法となりますが、他のエラーに対しても同様の表示調整を行っておくことができます。
ただし、DB接続以外の場合、基本的にはテーマ側のエラー用ビューが利用されますのでご紹介だけ。

- レイアウト側: /lib/Baser/View/Layouts/error.php
- コンテンツ部分側: エラー内容に応じて /lib/Baser/View/Errors/ 配下のファイルが利用される
	- /lib/Baser/View/Errors/error400.php
	- /lib/Baser/View/Errors/error500.php
	- /lib/Baser/View/Errors/fatal_error.php
	- /lib/Baser/View/Errors/missing_class.php

2つのレイアウトを別々に調整しておいても良いのですが、まとめておくこともできます。

### レイアウト側

1. /lib/Baser/View/Layouts/error.php を /app/View/Layouts/error.php に複製して中身を調整する
2. /lib/Baser/View/Layouts/missing_connection.php を /app/View/Layouts/missing_connection.php に複製する
3. /app/View/Layouts/missing_connection.php の中身を以下にする

```/app/View/Layouts/missing_connection.php
require __DIR__ . '/error.php';
```

### コンテンツ側

- コア側のエラー用ビューをテーマ内に複製して中身を調整する
	- /lib/Baser/View/Errors/missing_connection.php → /app/View/Errors/missing_connection.php （※ここだけ注意）
	- /lib/Baser/View/Errors/error400.php → /app/webroot/theme/YOUR_THEME/Errors/error400.php
	- /lib/Baser/View/Errors/error500.php → /app/webroot/theme/YOUR_THEME/Errors/error500.php
	- /lib/Baser/View/Errors/fatal_error.php → /app/webroot/theme/YOUR_THEME/Errors/fatal_error.php
	- /lib/Baser/View/Errors/missing_action.php → /app/webroot/theme/YOUR_THEME/Errors/missing_action.php
	- /lib/Baser/View/Errors/missing_class.php → /app/webroot/theme/YOUR_THEME/Errors/missing_class.php



## 案内文章の例

掲載文章としてはこんな感じで載せておくと良いですね。

```
現在、ウェブサイトが混み合っているか、一時的な閲覧エラーが発生しております。
お時間を置いて再度アクセスするなど、今しばらくお待ちください。
```
route53.HostedZone.fromHostedZoneIdが壊れているのでfromHostedZoneAttributesを使うと良い

fromHostedZoneIdを利用するとzoneNameを指定する必要がないのに以下のエラーが出ます。
`HostedZone.fromHostedZoneId doesn't support "zoneName"`

https://github.com/aws/aws-cdk/issues/8406

諦めてfromHostedZoneAttributesを使い、zoneIDとzoneNameを指定しましょう
[jQuery]プルダウンで選んだ値をform_withのparamsにブチ込む方法

# 経緯

form_with内にselectを書くことができないけど、選択された値をparamsとしてsubmitさせたい。
そんなときどうしたらいいの！？！？
そんな僕に似た状況の方の救いになればいいなと思い記事を書くことにしました！

## 断り

今回はjQueryを使って表現します

## 結論

こうしましょう

```erb
<%= form_with url: XXX_path do |f| %>
   <%= f.hidden_field :ueno_zoo, value: :panda, class: 'targetJquery' %>
   <%= f.submit '送信'%>
<% end %>
```

`hidden_field`に対して`:ueno_zoo`を渡す。
こうすると、コントローラーで`params[:ueno_zoo]`とすることで送られてきた(選ばれた)値を取得することができます

ポイント
hidden_field(だけに限らず)に渡したSymbolの値を、コントローラー内では`params[:Symbol]`とすることで取得できる

```erb
<div>
  <% options = [
    ['パンダ', :panda],
    ['ゾウ', :elephant],
    ['キリン', :giraffe],
    ['キャベツ', :cabbage]
  ] %>
  <%= select_tag :ueno_zoo, options_for_select(options, :default), onchange: "$('.targetJquery').val($(this).val());" %>
</div>
```

`options_for_select`...第１引数に選択肢を、第２引数にデフォルトの値を指定する

`onchange`...指定したDOMの値が変更されるたびに発火するイベントリスナー

`onchange: "$('.targetJquery').val($(this).val());"`...
コード通り読むと、この`select_tag`で選ばれた値を、`hidden_field`のvalueにするよって感じです。

つまり、ページが開かれたときセレクトボックスには`パンダ`が選ばれています。ゾウを選ぶと、`hidden_field`のvalueも`elephant`になるというわけです。
カナリアリリース ってどんなリリース？

## 勉強前イメージ

β版的な数人だけ本番動かす的なやつなイメージだけど
ちゃんと答えられない

## 調査

### カナリアリリース とは

アプリケーションなど何が新しいバージョンをリリースする際に
一部のユーザにまず適応して確認を行ってから全体にリリースする方法です。
目的はテスト要因の確認だけでなくリリースに関わるトラブルなども防ぐことを目的としています。
もし問題が見つかればロールバックを行い、全アカウントに影響が及ぶことを防ぐことができます。

### メリデメ

#### メリット

- 本番環境での確認

本番環境へ実際にリリースを行い確認を行うことができます。
また一部のユーザで使用することによって公開前には予測できなかった不具合を見つけることができます。

- ロールバックが可能

カナリアリリースには旧バージョン、新バージョンを並行稼動させる必要があります。
旧バージョンは削除していないので元に戻すことができます。

#### デメリット

- サーバのコストが発生

上記でも記載したとおり、旧バージョン、新バージョンを並行稼動させる必要があります。
各バージョンに合わせてサーバのリソースを用意する必要がありコストが増える可能性があります。

- 全体公開まで時間がかかる

検証環境のテストだけでなく、本番環境でのテストが増えるので
テスト計画書の作成や、テストなど時間が必要な可能性があります。


## 勉強後イメージ

イメージ合ってたね

## 参考

- [カナリアリリースとは？ブルーグリーンデプロイメントとの違いや実施方法を紹介](https://www.sedesign.co.jp/dxinsight/what-is-canary-release#:~:text=%E3%82%AB%E3%83%8A%E3%83%AA%E3%82%A2%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E3%81%A8%E3%81%AF%E3%80%81%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3,%E5%85%AC%E9%96%8B%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82)
100日でSQLの達人になる@LeetCode! Day12 <日付処理, MS SQL Serverサブクエリでorder byを使う方法>

## 197. Rising Temperature （問題レベル: Easy）要課金
今日の問題はこれ。
前日よりも温度が上がった日をリストアップするという問題。

日付処理に苦手意識があります。
今回は、与えられたテーブルが日付順に並んでいると思いサクッとコードが記載できましたが、
テストケースでは日付順に並んでいない例があり、Acceptされませんでした。

簡単な課題ですが、学びは多かったです。

今日のポイント１　日付処理。
日付の比較には、```datediff(day, date1, date2)=1```が簡単、もしくは```dateadd(day,1,date1)=date2```を使う。
１か月後なら```datediff(month, date1, date2)```や```dateadd(month, 1 ,date1)```のようにも使える。

ポイント２　MS SQL Serverサブクエリで`order by`や`group by`が使えない。
どうしても使いたいときには、サブクエリの最後に`offset 0 rows`を追記する。

```:MS SQL Server
select a.id, b.var1
from 
(select id from tbl1 order by var2 asc offset 0 rows) a, tbl2 b
where a.id = b.id
```

この問題はサブクエリでソートしなおす必要は全く無かったのですが、色々悩んでいる時に気が付きました。
本記事は[AIMEK's blogさんのSQL Server サブクエリにORDER BYやGROUP BYが使えない！？](https://aimek-developer.blogspot.com/2021/04/sql-server-order-bygroup-by.html)を参考にしました。

念の為、私が最終的に記載したコードを挙げておきます。

```:MS SQL Server
select b.id
from weather a, weather b
where datediff(day, a.recordDate, b.recordDate)=1 and a.temperature < b.temperature
```

* [LeetCode](https://leetcode.com/)の問題は、MS SQL Serverで解いています。
Swiftで定義したProtocolをObjective-Cで読み込んだ際の "Cannot find protocol definition for 'SomethingProtocol' "を解消する

## 事象
Swiftで定義されている、SomethingProtocolの準拠をObjective-Cのクラスで行った。
その際に下記のワーニングが表示されていた。

ワーニングの内容
> Cannot find protocol definition for 'SomethingProtocol' 

## 修正前の実装
.hファイルにて下記を記載してheaderを作成していた。SomethingProtocolへの準拠は.mファイルにて実装を行った。

```objc
@protocol SomethingProtocol
@interface CustomObject: NSObject<SomethingProtocol>
```

ビルド、実行が成功していた。成功していたが、上述のワーニングが表示されていた

## 修正
.hファイルの修正

```objc
@interface CustomObject: NSObject
```

ヘッダーとして公開する情報にSomethingProtcolに準拠しているという情報は不要だった。

.mファイルにて

```objc
@interface CustomClass() <WebConnectionDelegate>
```
と記載することでワーニングが解消した。

## 原因
Objective-Cの経験が浅く、詳細を理解できていないため不明。

Objective-Cでは、importの参照が多重になっていたり、循環していたりすることが問題になることがあるようだった。
また今回は、.mファイルにて下記のSwiftファイルの読み込み処理を記載していたので、すでにSomethingProtocolが読み込み可能になっていた。

```objc
#import "MyProject-Swift.h"
```