OmniAICreator/Qiita-1.07M huggingface dataset:
【laravel】複数条件でvalidation

# 新たにルールを作成してvalidationを作成しよう

[通常のvalidation](#通常のvalidation)
[やりたかったこと](#やりたかったこと)
[新しいルールの作成](#新しいルールの作成)
　[・ルールの記載](##ルールの記載)
　[・エラーメッセージの作成](##エラーメッセージの作成)
[validationに追加](#validationに追加)



# 通常のvalidation
```
    public function rules()
    {
        return [
            'email' => 'required|unique:users,email',
        ];
    }
```
上記例では単純に
１.メールアドレスが必須かどうか？
２.メールアドレスがusersテーブルですでに使用されているメールアドレスではないか？

### これで本当に単純なvalidationが完了です！


# やりたかったこと
ここからが自分のやりたかったことです。

:::note
**仮登録ユーザーはメールアドレスのユニークチェックを行わないようにしたかったのです。**
機能上どうかとは思いますが。。。
その辺りは無視してください。
今回はあくまでも新しいルールを作成することのみ説明しています。
:::

本登録状態のデータはroleを仮登録の<font color="Red">**1**</font>としておきます。
仮登録状態のデータはroleを仮登録の<font color="Red">**9**</font>としておきます。

```
usersテーブル
name | email         | role
hoge | test@test.com | 9
```
このような場合にはユニークチェックを行わず登録ができるようにすると言うことです。

単純に追加するとこのようになります。
```
usersテーブル
name | email         | role
hoge | test@test.com | 9
hoge | test@test.com | 9
```

そして本登録が完了したらroleの値を１に変更しユニークチェックを走らせます。
```
usersテーブル
name | email         | role
hoge | test@test.com | 9
hoge | test@test.com | 1
```

この状態でtest@test.comを登録しようとしてもエラーになると言うことです。


# 新しいルールの作成
まずは
```
$ php artisan make:rule NewRule
Rule created successfully.
```

新たにApp\Rules以下にルールを作成するファイルが作成されます。
作成されたファイル
NewRule.php

```
<?php

namespace App\Rules;

use Illuminate\Contracts\Validation\Rule;

class NewRule implements Rule
{
    /**
     * Create a new rule instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Determine if the validation rule passes.
     *
     * @param  string  $attribute
     * @param  mixed  $value
     * @return bool
     */
    public function passes($attribute, $value)
    {
        //
    }

    /**
     * Get the validation error message.
     *
     * @return string
     */
    public function message()
    {
        return 'The validation error message.';
    }
}

```

新たにできたファイルの中身がこちらです。

## ルールの記載
```
    public function passes($attribute, $value)
    {
        $res = User::getCountEmailByEmail($value);
        if($res === 0){
            return true;
        }
        return false;
    }
```
それではコードの説明をしていきます。
> passes($attribute, $value)

$attribute:フィールド名が入ります。
ここでは**email**が入ってきます。
$value:値が入ります。
ここでは**test@test.com**が入ってきます。

```
$res = User::getCountEmailByEmail($value);
```
> User::getCountByEmail($value)

Userモデルにて
```
return User::where('email', $email)->where('role' ,'<>' ,'9')->get()->count();
```
roleが９以外でtest@test.comに一致するデータのレコード数を取得しています。

> if($res === 0){
　　return true;
}
return false;

こちらでレコード数が0ならtrue、それ以外ならfalse
**falseのときにエラーが発生します。**

## エラーメッセージの作成

```
public function message()
{
    return 'すでに登録されているメールアドレスです。';
}
```

これで上記にエラーが返されます。

# validationに追加
```
    public function rules()
    {
        return [
            'email' => 'required|unique:users,email,new NewRule',
        ];
    }
```
<font color="Red">**,new NewRule**</font>
を追加しています。

これで完了です。
[UE4]UE4でアコーディオンメニューを作る

## はじめに
UIでこんな感じのメニューを見たことがあると思います。
https://webdesignday.jp/inspiration/technique/css/5316/

![accordion.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552073/cb908c08-9cf7-bd27-13e5-95999b1e365c.gif)

今回は横に広がるアコーディオンメニューを簡単に作成してみようと思います。  
UEにはExpandable Areaというまさにアコーディオンにうってつけのオプションがありますが、上下にしか開閉ができそうになかったため、アニメーションで自作します


## 1.UEを起動し、WBP(ウィジェットブループリント)を作成し、UIを仮置きする
ユーザーインターフェイス > ウィジェットブループリントを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552073/0a3c4aad-df49-955f-b9d5-577a9ecbba0e.png)

UIを適当に作成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552073/bb871a84-6b25-83af-8da9-1d1419726c5d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552073/92866305-b95d-71ce-9919-8d97c78b31f6.png)

この赤枠あたりでアコーディオンするように作成してみようと思います。  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552073/ba6f2b1f-970c-fb8a-d4a2-9de8baf10b51.png)
  
親のUMGと別に子のUMGを作成したいので、赤枠の位置にCanvasPanelを置いておきます。

## 2.アニメーションを作成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552073/0e28dba1-1fa5-8497-8a34-38a58e457289.png)
ExpandedAreaをアニメーションで動かしたいので、トラックを作成する


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552073/b9a79a5c-21a8-13c0-e863-fa32fcc03510.png)

0秒の箇所には
Pivot→Xに0,Yに0
Transform→スケーリングのXに0.0、 Yに1.0を入れる

１秒の箇所には
Transform→スケーリングのXに1.0を入れる

親ウィジェットのphoneボタンを押下したときのイベントを設定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552073/3f840a31-4a50-673a-1512-a16783000314.png)


※ポイントはFlipflopで開閉を表現、  
PlayModeでForward,Reverseでアニメーションの再生、逆再生を変えること   
ExpandedAreaにAddChildでWBP_Phoneを子ウィジェットとして追加する
 ※先に[3.子のWBPを作成する](#3子のWBPを作成する)の子ウィジェットの追加だけすませておいてください




## 3.子のWBPを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552073/0d2f1d1e-0c83-0a62-caf4-1d1f34bee596.png)

適当なサイズのイメージを配置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552073/1a3f739d-8cb1-4e0a-edde-cd4ca2d21b38.png)

レベルBPに親のウィジェットを表示するよう設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552073/d1abdb70-b7f4-d161-e7ad-3edaaaf01989.png)



## 結果
だいぶ駆け足になってしまいましたが、以下のようなアニメーションが完成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552073/786cbb9f-2a98-277d-32f6-7d0269fb5e4a.png)
※gifがなぜか貼れなかったのでご容赦ください。。。。



今度はもっときれいにUI周りを表示していこうと思います。
Amazon DynamoDBとは

## 目的

DynamoDBはデータベース的な役割をもつAWSのサービスの一つ、ということしか知らなかったため調査した。

## DynamoDBの基本情報

* 完全マネージド型のSQLサービス
    * 管理を２４時間体制で自動でおこなってくれるサービスのこと
* NoSQL型のデータベース
    * RDBMS以外である（よくわからないので後述）
* 低レイテンシー（応答速度が速い）
    * パーティショニングを実施（テーブルを内部で分割している、外からは一つのテーブルに見える）
* 容量制限がない
* 高可用性
    * 複数のAZ（アベイラビリティゾーン）にデータを保存しているため、ある地域のDBで障害が発生しても稼働が継続できる


## NoSQL型とリレーショナルデータベースの違いとは

### リレーショナルデータベース

* テーブルと呼ばれるExcelのような列と行で成り立つ二次元の表で表され、
複数のテーブルを用いてデータを抽出することが可能。
* あらかじめテーブル名や列名、型を定義しておく必要がある。
    * 仕様変更が柔軟にしにくい。
* 複雑なデータを保存するには適している。

メインテーブル
| ID | 社員名 | 所属部署ID |
|:-----------|:------------:|:------------:|
| 1 | 山田太郎       |01|
| 2 | 佐藤花子     |02|

部署テーブル
| ID |　所属部署　| 
|:-----------:|:------------:|
|01| 営業部 |
|02| 総務部 |

ちなみにRDBMSとはRelational DataBase Management Systemの略で
リレーショナルデータベース型データベースを管理するシステムのことを指す。


### NoSQL
NoSQLには以下の３つのパターンが存在する

* key-value型
* カラム指向型
* ドキュメント型

今回key-value型についてのみ言及する


### NoSQLの一つであるkey-value型とは

* 一つのkeyに対して複数のデータ(value)を保持する
* 大量のデータの蓄積に向いている
* 他のテーブルと拡張しやすい
* 大量の読み書きは向いてない
* データの検索や結合処理には向いてない
* トランザクションができない？

| key | Value |
|:-----------|:------------:|
| 1 | 山田太郎, 営業部       |
| 2 | 佐藤花子, 総務部     |
Oracle Database 21c で追加された関数を試す（Oracle Database 21c)

Oracle Database 21c にはいくつか集計関数が追加されましたので検証します。

# CHECKSUM
[CHECKSUM 関数](https://docs.oracle.com/cd/F39414_01/sqlrf/checksum.html#GUID-3F55C5DF-F23A-4B2F-BC6F-E03B34B78BA8) は列値の集約されたチェックサムを計算します。チェックサムは８バイトの整数で出力されます。他の集計関数（SUM, AVG など）と同じように使うことができます。テーブルの特定の列値が同一であるかを簡単に確認することができるため、データベースの移行時に移行前と移行後が同値であることを知りたい場合等に便利です。もっとも簡単な使い方は列名を指定します。

```SQL:
SQL> SELECT CHECKSUM(c1) FROM data1;

CHECKSUM(C1)
------------
      466639
```

チェックサムが同一であれば集計に含まれる値は同一であるといえます。チェックサムは検索の出力順番には影響を受けません。単一行を扱う関数ではないため、GROUP BY句や他の集約関数と同時に使用する必要があります。

```SQL:
SQL> SELECT CHECKSUM(c1), c1 FROM data1;
SELECT CHECKSUM(c1), c1 FROM data1
                     *
行1でエラーが発生しました。:
ORA-00937: 単一グループのグループ関数ではありません。
```

他の集約関数と同様に、ALL 句と DISTINCT 句を指定することができます。それぞれすべてのレコードまたは一意化されたレコードのチェックサムを計算します。OVER 句を指定することもできます。

```SQL:
SQL> SELECT CHECKSUM(ALL c1), CHECKSUM(DISTINCT c2) FROM data1;

CHECKSUM(ALLC1) CHECKSUM(DISTINCTC2)
--------------- --------------------
         466639               437609
```

すべてのレコードが同一であるグループに対してCHECKSUMを計算すると結果は0になります。下記の例では単一の値が格納された c2 列に対してチェックサムを計算しています。

```SQL:
SQL> SELECT COUNT(DISTINCT c2), CHECKSUM(c2) FROM data1;

COUNT(DISTINCTC2) CHECKSUM(C2)
----------------- ------------
                1            0
```

# ANY_VALUE
[ANY_VALUE 関数](https://docs.oracle.com/cd/F39414_01/sqlrf/ANY_VALUE.html#GUID-A3C47D5E-B145-40B2-93D2-CA3BA65C2D81) は集約関数ですが、グループの中から単一の値を返します。実際には最初に見つかった値を返すように最適化されています。グループ内からどれでもいいので一つ値を返すような場合に、GROUP BY 句を書かなくても良くなります。

```SQL:
SQL> SELECT SUM(c1), ANY_VALUE(c1) FROM data1;

   SUM(C1) ANY_VALUE(C1)
---------- -------------
5000050000             1

```

LONG、LOB、FILE または COLLECTION 型には使用できません。

```SQL:
SQL> CREATE TABLE long1(c1 LONG);

表が作成されました。

SQL> SELECT ANY_VALUE(c1) FROM long1;
SELECT ANY_VALUE(c1) FROM long1
                 *
行1でエラーが発生しました。:
ORA-00997: LONGデータ型は使用できません。
```

DISTINCT 句、ALL 句と共に使うことができます。

# BIT_AND_AGG / BIT_OR_AGG / BIT_XOR_AGG
ビット単位の AND / OR / XOR を[集約](https://docs.oracle.com/cd/F39414_01/sqlrf/BIT_AND_AGG.html#GUID-82497098-6D77-48D3-89EF-C1041BF8A258)します。これらも集約関数ですので、CHECKSUM 関数と同様の配慮（GROUP BY や、他の集約関数と同時に使う）が必要です。数値列にのみ使用することができます。

```SQL:
SQL> SELECT BIT_AND_AGG(c1), BIT_OR_AGG(c1), BIT_XOR_AGG(c1) FROM data1;

BIT_AND_AGG(C1) BIT_OR_AGG(C1) BIT_XOR_AGG(C1)
--------------- -------------- ---------------
              0         131071          100000

SQL> SELECT BIT_AND_AGG(c2) FROM data1;
SELECT BIT_AND_AGG(c2) FROM data1
                   *
行1でエラーが発生しました。:
ORA-01722: 数値が無効です。
```

他の集約関数と同じように ALL / DISTINCT / UNIQUE 句を指定することができます。

```SQL:
SQL> SELECT BIT_OR_AGG(ALL c1), BIT_OR_AGG(DISTINCT c1), BIT_OR_AGG(UNIQUE c1) FROM data1;

BIT_OR_AGG(ALLC1) BIT_OR_AGG(DISTINCTC1) BIT_OR_AGG(UNIQUEC1)
----------------- ---------------------- --------------------
           131071                 131071               131071
```

NULL 値に対しては 0 を返します。

```SQL:
SQL> SELECT BIT_AND_AGG(NULL) FROM data1;

BIT_AND_AGG(NULL)
-----------------
                0
```
javaScript_Array.filter

MDNの中にfilter()メソッドについて、このように説明しています。
- filter() メソッドは、与えられた関数によって実装されたテストに合格したすべての配列からなる新しい配列を生成します。

例：
```ruby
const numArr = [1,2,3,4,5];
// 奇数のみを抽出する
const NewNumArr = numArr.filter((num)=>{return num%2 === 1;});
console.log(NewNumArr);
// 値を順番に取り出す
for(value of NewNumArr){
    console.log(value);
}
```

文字列を連結するには、従来は＋を使いますが、ES6の書き方で${}を使います。
例：
```ruby
const nameArr = ["田中","中田","藤井","蒼井"];

for(let i=0; i<nameArr.length; i++){
    console.log(`${i + 1}番目は${nameArr[i]}です`);
}
```

ここで簡単に紹介しますが、ES6の中にmap()メソッドを使うと、従来でfor文で書く冗長なコードを簡略化することができます。
ぜひmap()メソッドに慣れてください。
例：
```ruby
const nameArr = ["田中","中田","藤井","蒼井"];

nameArr.map((name,index) => console.log(`${index + 1}番目は${name}です`));
```

if文を使用し、配列になる一部の値のみを変更する例：
```ruby
const nameArr = ["田中","中田","藤井","蒼井"];

const NewNameArr = nameArr.map((name)=>{
    if(name === "田中"){
        return name;
    }else{
        return `${name}さん`;
    }
})

console.log(NewNameArr);
for(value of NewNameArr){
    console.log(value);
}
```
[Oracle] SQL*Plusで1億件のテストデータを作成する [オラクル]

## やりたいこと
試験のために、大量のテストデータを作成したい。
バックアップ速度や、SQL実行速度の試験のため、データの中身はなんでもいい。
ツールを使わずSQL*Plusだけでやってみたい。


## シンプルなデータで作成する
数字と文字の列からなるシンプルなテーブルで作成してみます。
データは、1から1億までの連番とします。
せっかくなので文字の列には、A12345678のように文字をいれます。

#### テーブルの作成
```sql
CREATE TABLE test ( id NUMBER(10) , col1 VARCHAR2(10) );
```

#### テストデータの作成
数字の100000000が作成されるデータ件数となるため、必要な数字に変えて実行します。

```sql
BEGIN
  FOR i IN 1..100000000 LOOP
    INSERT INTO test VALUES ( 1 , 'A' || i );
    COMMIT;
  END LOOP;
END;
/
```
※テストデータを作成する時間がかかりますが、1行ごとにCOMMITしています
　UNDO領域などが拡張しすぎないように配慮した形です。
Propertiesファイルが見辛い....（Spring Boot）

Spring Bootを学習中、度々propertiesファイルを使用することがあり、
すごく気になったことがあったのでアウトプットも含めて投稿。

## とにかく見辛い....
![スクリーンショット 2022-02-28 20.11.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/36f42d76-50b0-6bfc-87ed-3f44c703e4a6.png)

デフォルトのカラーがこの色で背景が黒なのも悪いがとにかく見辛く、
何を書いているのか全く分からない😱

調べてみたところ、カラーは自由に変更できるとのことでした。

## 変更方法
#### ①設定をクリック
![スクリーンショット 2022-02-28 20.25.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/21625a10-9d62-5aa2-b6d6-0d5bd6450d17.png)


#### ②プロパティー・エディター　⇨　エディター　を選択
![スクリーンショット 2022-02-28 20.28.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/6688bb0b-891b-4bb3-91cc-dfbb15da6e52.png)
ここでそれぞれ好きな色を設定し、適応して閉じるを選択

##### 見やすくなりました✨
![スクリーンショット 2022-02-28 20.32.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/57d95f03-6583-3993-3a46-4dbee7a6cb0f.png)


## 参考文献
https://trueman-developer.blogspot.com/2015/10/eclipsesqlproperty.html
「このファイルはAndroid12以降にはインストールできません」と言われた時の対処

先日、googleplayにアプリのアップデートファイルを上げようとしたところ、以下のエラーが出てしまいました。

アップロードされた APK または Android App Bundle には、インテント フィルタを使用するアクティビティ、アクティビティ エイリアス、サービス、またはブロードキャスト レシーバが含まれていますが、'android:exported' プロパティ セットは使用されていません。このファイルは Android 12 以降にはインストールできません。詳細: developer.android.com/about/versions/12/behavior-changes-12#exported

この時に私のやったことを備忘録としてあげておきます。

解決法:すでにあるマニフェストファイルを置き換える

一度ビルドしたプログラムでしたので、
Windows>ProgramFiles>Unity>Editor>Data>PlaybackEngines>AndroidPlayer>Apk
と開き、マニフェストファイルを見つけました。

xmlファイルですので、持っているVisualStudioで開くことができました。

こちらの記事を参考に、application内のactivitiyにandroid:exported = trueまたはfalseを書き込みます。

https://minpro.net/apps-targeting-android-12-and-higher-are-required-to-specify-an-explicit-value-for-android-exported

私の場合、この方と同じようにintent-filterという項目の中にLAUNCHERの文字があったのでtrueにしましたが、無い場合はfalseでいいと思います。

そのまま保存してビルドすれば良いのですが、「この場所に保存するアクセス許可がありません。管理者に連絡してアクセス許可を取得してください」と出て、保存を拒否されてしまったので、その場合の対処法の書かれたサイト様を貼っておきます。

https://tohaz.com/give-permissions/

保存できないフォルダを右クリック→プロパティ→セキュリティタブ→編集ボタン→「グループ名またはユーザー名」の中から選択→下のアクセス許可の必要な項目(「変更」と「書き込み」)にチェックを入れる→OKボタン
です。

マニフェストを「名前を付けて保存(前と同じ名前にする)」して、もともとあったマニフェストファイルを捨てます。ビルドすればOKです。
Uncaught TypeError: Vue is not a constructor

# 事象 : CDNを使ってVueを表示できない
はじめてのVue.jsにチャレンジしようと思って、本に載っているサンプルコードをHTMLファイルに書いてブラウザで表示してみた・・・が、`{{ message }}`がそのまま表示されている。
![スクリーンショット 2022-02-28 19.32.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/86d23f6f-b9fe-9776-cba4-49a7b1e4cabb.png)

```html
<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <h1>Vue.js</h1>
  <div id="app">
    {{ message }}
  </div>
  <script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
  </script>
</body>
</html>
```

## 原因 : CDNの参照先はVue3だから
参考元にした本に書いてあったコードは、Vue2の書き方。
CDNの参照先は、Vue3であった。
CDNの「https://unpkg.com/vue 」をブラウザでアクセスするとリダイレクトされて「https://unpkg.com/vue@3.2.31/dist/vue.global.js 」になる、というわけでCDNが見ているVueのバージョンは3。

そして、書き方は変わったようだ。
参考 : [はじめに | Vue.js](https://v3.ja.vuejs.org/guide/introduction.html)

```js
// Vue2の書き方
var app = new Vue({...})
// Vue3の書き方
const app = {...}
Vue.createApp(app).mount('#app')
```

### 対応 : Vue3の書き方に変える
ど素人的に新しいも何も・・・何もしりませぬ。
```html
<!--...省略...-->
  <script>
    const app = {
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }

    Vue.createApp(app).mount('#app')
  </script>
<!--...省略...-->
```

おっ、表示された。
![スクリーンショット 2022-02-28 20.08.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/467681b3-f2cc-ed29-f05d-0f2bb31c73ca.png)
GDBのエラーの原因

はじめて学ぶバイナリ解析の本を読んでいたら
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554486/98867480-2660-686c-c0cb-dd8708bf5595.png)
というエラー文がでたので
chmod 777 stack_5-1.outを読み込んだら直りました～
Permission errorのほうの記事はあったのですがこのエラーはなかったので
記事書いてみました
よく見たら結構初歩的でしたが、誰かの役に立ったらうれしいです
【2022年2月版】MacのVSCodeのエディタのVIMで、NORMALモードに戻る時に、IMEをOFFにしたい

# 目的

MacのVSCodeのエディタのVIMで、NORMALモードに戻る時に、IMEをOFFにしたい。
ESCで戻る時も、ctrl + [ で戻る時もOFFにしたい。

# 環境

* MacBook Pro（14インチ、2021）macOS Monterey 12.2.1
* VSCode Version: 1.64.2 (Universal)

# やること

* im-selectをインストール
* VSCodeの設定

# やったこと

## ime-selectをインストール

 パーミッションは適切に設定してください。

```zsh
% curl -Ls -o ~/Downloads/im-select https://github.com/daipeihust/im-select/raw/master/im-select-mac/out/apple/im-select
% sudo mv ~/Downloads/im-select /usr/local/bin/
% chmod 777 /usr/local/bin/im-select
```

## im-selectの動作確認

```zsh
# 日本語入力なし
% im-select 
com.google.inputmethod.Japanese.Roman
# 日本語入力に切り替えて
% im-select
com.apple.inputmethod.Kotoeri.RomajiTyping.Japanese
```


## VSCodeのsetting.jsonを設定

以下の設定を追記

```diff:setting.json
+    "vim.autoSwitchInputMethod.defaultIM": "com.apple.keylayout.ABC",
+    "vim.autoSwitchInputMethod.obtainIMCmd": "/usr/bin/true",
+    "vim.autoSwitchInputMethod.switchIMCmd": "/usr/local/bin/im-select {im}",
+    "vim.autoSwitchInputMethod.enable": true
```

## 動作確認

setting.jsonが正しく記述できていれば、保存直後から ESC と ctrol - [ でNORMALモードに戻る時に日本語入力がオフになっています。

# 終わりに

先人の方達のおかげで、簡単でした。

# 参考にしたありがたいリソース

* [VisualStudio CodeのVimプラグインで挿入モード時に日本語入力モードが復活しないようにする方法](https://note.com/5mingame2/n/n88d7ceae5a95)
* [[Mac] im-selectでVimやNeoVimの日本語入力を自動的に無効にする](https://wonwon-eater.com/mac-ime/)
Explanation of Evaluation index  'MAP@5' in Happywhale - Whale and Dolphin Identification Competition.

![スクリーンショット 2022-02-28 19.01.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785665/988cf3d6-9e7e-e84c-5525-3e4122edcb33.png)
QuillJS を利用している場合にホワイトスペースが圧縮されてしまう問題の対処

# 問題

[quilljs](https://github.com/quilljs/quill) のversion 1.3.7 (記事執筆時点でGithubで表記されている latest リリース) での話。

Quill Editor で編集した値を一度 DB に保存する。 この場合、DB の中身はこのようになる。

```
# 入力
テストです。　　　　← 全角スペースが４個配置されています。
```
![SnapCrab_NoName_2022-2-28_18-25-53_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502582/2de28625-bd15-6de8-8c80-12e43f19aff3.png)

```
# DBに保存される値
<p>テストです。　　　　← 全角スペースが４個配置されています。</p>
```

この値を再編集するために、`<div>` 要素に以下の通りに出力して Quill インスタンスを生成する。

```html
<div id="quill-editor">
  <p>テストです。　　　　← 全角スペースが４個配置されています。</p>
</div>

...

<script type="text/javascript">
  var quill = new Quill('#quill-editor');
</script>
```

しかし、これで初期化するとスペースが圧縮された状態でエディタに表示されてしまう。

![SnapCrab_NoName_2022-2-28_18-33-47_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502582/5f05e4ad-71a8-c387-36f9-eacb23159c0b.png)


これをスペース圧縮を行わないで展開するにはどうすれば良いのかを調べたが、結構大変だったのでメモ。

# 解決作

この問題については例えば以下の Issue で語られているが、これはコピー＆ペーストの時の場合であって、初回の展開時の話ではない。 

https://github.com/quilljs/quill/issues/1751

しかし、この Issue 内で、この置換を行っているところが `matchText` 関数内であることが示されている。 実際の[ソースコード](https://github.com/quilljs/quill/blob/1.3.7/modules/clipboard.js#L328)を見ると、

```javascript
function matchText(node, delta) {
  let text = node.data;
  // Word represents empty line with <o:p>&nbsp;</o:p>
  if (node.parentNode.tagName === 'O:P') {
    return delta.insert(text.trim());
  }
  if (text.trim().length === 0 && node.parentNode.classList.contains('ql-clipboard')) {
    return delta;
  }
  if (!computeStyle(node.parentNode).whiteSpace.startsWith('pre')) {
    // eslint-disable-next-line func-style
    let replacer = function(collapse, match) {
...
```

となっていて、`node.parentNode` に `whiteSpace` スタイルが直接指定されているかどうかを見て置換を行っていることが分かる。 この `node.parentNode` の実体を見てみると、これは `<div id="quill-editor">` 内の子要素であることが分かった。

そのため、Quill インスタンスを生成する前に、例えば以下のような方法で各要素に `style="white-space: pre;"` を直接付与してやれば良い。

```javascript:jQueryを利用する場合のコード
$('#quill-editor').children().each(function(idx, v) {                                                                                     
  $(v).css('white-space', 'pre');
});
```

この後に Quill インスタンスを生成するとスペースを圧縮せずにエディタ上に文字を展開することができる。

![SnapCrab_NoName_2022-2-28_18-46-15_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502582/94e13028-f399-b5a2-e5d0-d84b3dde074a.png)
【Laravel】「email」のバリデーションルールの注意

# 初めに
Laravelではデフォルトで様々な[バリデーションルール](https://readouble.com/laravel/8.x/ja/validation.html)を準備してくれており、生PHPと比べてかなり簡単にバリデーションを設定することができます。
しかし、デフォルトのものには実は注意が必要と言う事をお話しして行きます。

その中で、今回は **『email』のバリデーションルール**について紹介します。

# 問題点
デフォルトでは、emailの形式`ユーザー名(メールアカウント)@ドメイン名`でなければバリデーションエラーを出力してくれます。

```App\Http\Controllers\Auth\RegisterController.php
return Validator::make(
            $data,
            [
                'name' => ['required', 'string', 'max:255'],
                'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
                'password' => ['required', 'string', 'min:3', 'confirmed']
            ]
```

しかし....
以下のような形式だとバリデーションエラーとはならず登録処理が実行されてしまいます。

* test@example.com
* test@gmail.comああ

これではドメインが存在しないアドレスが気軽に登録されてしまう。
それどころか、この状態でサービスをもしリリースしたらとんでもないことになる...

# emailのバリデーションの種類
[公式ドキュメント](https://readouble.com/laravel/8.x/ja/validation.html)によると、5種類あります。

* rfc: RFCValidation
* strict: NoRFCWarningsValidation
* dns: DNSCheckValidation
* spoof: SpoofCheckValidation
* filter: FilterEmailValidation

### 詳細
|バリデーションスタイル|内容|
|---|---|
|rfc|RFCと呼ばれるインターネットの標準仕様に合っているかをチェックするバリデーション|
|strict|email:rfcをより厳格にしてもので「エラーだけでなく、警告があってもダメ」なバリデーション|
|dns|DNSにそのメールアドレスのドメインが存在するかをチェックするバリデーション|
|spoof|なりすましのメールアドレスは拒否するバリデーション|
|filter|PHP関数のfilter_var()を使ったメールアドレスのチェック|

# バリデーションの書き方
問題となるメールアドレスを通さないだけであれば、dnsのみの設定でも対応はできますが、その他の対策ができていないため併用して書きます。

以下は、strict(RFCに違反するアドレスがはじかれる)、dns(ドメインが有効でないアドレスがはじかれる)、spoof(なりすましメールもはじかれる)の3つを適用します。

```App\Http\Controllers\Auth\RegisterController.php
return Validator::make(
            $data,
            [
                'name' => ['required', 'string', 'max:255'],
                 //emailに新しいバリデーションを追加
                'email' => ['required', 'string', 'email:strict,dns,spoof', 'max:255', 'unique:users'],
                'password' => ['required', 'string', 'min:3', 'confirmed']
            ]
```

これでemailのバリデーション対策ができます。


# 最後に
**Laravelの『email』のバリデーションルールに注意が必要**というお話をしてきました！

Laravelを触り始めて、色んな人のGitHubのコードを閲覧してきましたが、意外にもこのルールについて知らない人多いんではないでしょうか？

今回の内容だけでなく、便利なメソッドだからといって使うと思わぬ落とし穴があるものは他にもありそうです、、
「HTML&CSSとWebデザイン　入門講座」Chapter5のメモ

<h2>本記事の内容</h2>
<border>

タイトルの本のChapter5(P198~215)の学習を進める中でのメモを記します。
（理解が間違っていたら教えてほしいです）

<border>

<h3>p209「potisionメソッドのrelativeとabsoluteがよくわかんない」</h3>

参考URL「CSSのposition:absolute;とは？要素を思いのままに配置する方法」
https://www.sejuku.net/blog/53016

参考書では、
post-infoクラスにposition: relative;を設定し、
post-dateにposition: relative;としている。
まずこの意図は「日付を表示するpost-dataの位置を固定したい」だと思う。
potisitionタグを使うことによって、親要素であるpost-infoの位置を基点にするrelativeを設定することによって、子要素の配置をabsoluteを指定することによって決めることができる。
（のかな？）

<h3>p210,215「displayメソッドのblockって何？」</h3>

参考URL「【初学者必見】displayについて知ろう！」
https://code-ship-blog.wemotion.co.jp/technology/%e3%80%90%e5%88%9d%e5%ad%a6%e8%80%85%e5%bf%85%e8%a6%8b%e3%80%91display%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e7%9f%a5%e3%82%8d%e3%81%86%ef%bc%81/

親子関係の整理
親：news-contentsでdispaly:flex;
子：post-dateでdisplay:block
この関係は、p要素の中にスパン要素「2019」が入っているのでこのままだと横並びになる。
今回は、青丸の中に上下に日付と年を入れたいのでspan要素をblockにすることで縦並びなるようにした。

sub-menuのdispaly:blockの意図
元々li要素にしているので縦並びだが、block要素にしてクリックした時の範囲を文字のみから文字が含まれるブロックに広げている。クリックしやすい。
→クリックするやつはブロックにした方が良いのだろうなぁ。

<h3>p211「font-weight:normal」にする理由</h3>

参考URL「h1タグの太字をやめる方法」
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1484134829

h要素はデフォルトが太字（bold）だから、太字解除のため

<h3>p213「paddingで(0 , 8px , 8px)ってある時の上下左右の指定はどうなるの」</h3>

参考URL「スタイルシートリファレンス　padding」
http://www.htmq.com/style/padding.shtml

値を3つ指定した場合：	記述した順に[上][左右][下]のパディングになります。
→へ〜

以上。
TaBleEditorのフォーム機能のご紹介


# ・TableEditorとは
Dr.Sumの機能で、Excel上からデータベースの値を更新できる機能です。
データベースは、Dr.Sumだけではなく、他のデータベース（OracleやSQLServer）も対応しております。
※Dr.Sum以外のDBを使用する場合は、MotionBoardが必要になります。

# ・Dr.Sumとは
 [Dr.Sum](https://www.wingarc.com/product/dr_sum/ 'HP') とは、ウイングアーク１ｓｔ株式会社が提供する、企業内の基幹データベースの情報を高速に集計できる BI ツールです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1951479/3871626c-1b83-ad6e-931c-e88425106b41.png)
※キャプチャーはHPより抜粋しました。
 https://www.wingarc.com/product/dr_sum/


# ・TableEditorのフォーム機能について
TableEditorを利用することで、ExcelやCSVからデータを読み込み、テーブルの新規作成やデータの追加・更新をおこなうことが可能です。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1951479/e78d2e1e-603f-5308-da98-3ead19e9bf24.png)


その際に、フォーム機能を利用すると、定型のフォーマットからデータの更新を行うことができるようになります。
自社のフォーマットにあった形でデータの編集画面を用意して、ボタンアイテムなどを用いて、簡単にデータの更新が行えるようになります。

##### フォーム画面サンプル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1951479/a3e2fb85-4a1b-f2d7-ab74-6fb494d66597.png)
※データはサンプルになります。


フォームの設定画面では、
・データの入力設定（Excelの計算式使用可能）
・ボタンなどのアイテムの設定
・デザインスタイルの設定
・バリデーションの設定
を行うことが可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1951479/51522c20-7d68-bca6-921a-597b3d63ff21.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1951479/50324b3b-6567-c7b6-9102-3f69fc64995c.png)

例えば日報の業務などでフォームを利用した画面を用意していただき、そこから入力するだけで即座に分析に利用できるようになります。

実際の設定方法につきましては、次回の記事でご紹介させていただきます。
Period について

ハマったのでメモ。

# 結論

閏日(2/29)から 2/28 までの Period が返す年数は、Joda Time と Java Time で結果が異なる。

# 環境

| ソフトウェア | バージョン |
|:-:|:-:|
| Joda Time | 2.10.8 |
| Java | 17.0.2 |

# 動作確認

1992-02-29 ~ 2022-02-28 までの年数を Period で取得してみる。

## Joda Time

```scala
Welcome to the Ammonite Repl 2.5.2 (Scala 2.13.8 Java 17.0.2)
@ import $ivy.`joda-time:joda-time:2.10.8` 
import $ivy.$                           

@ import org.joda.time._ 
import org.joda.time._

@ new Period(new LocalDate(1992,2,29), new LocalDate(2022,2,28)).getYears 
res2: Int = 30
```

Joda Time では 30 年と出る。

## Java Time

```scala
Welcome to the Ammonite Repl 2.5.2 (Scala 2.13.8 Java 17.0.2)
@ import java.time._ 
import java.time._

@ Period.between(LocalDate.of(1992,2,29), LocalDate.of(2022,2,28)).getYears 
res2: Int = 29
```

Java Time では 29 年と出る。

# 追記

1992-02-28 ~ 2022-02-27 は Joda Time でも Java Time でも 29 年と出る。

## Joda Time

```scala
Welcome to the Ammonite Repl 2.5.2 (Scala 2.13.8 Java 17.0.2)
@ import $ivy.`joda-time:joda-time:2.10.8`  
import $ivy.$                            

@ import org.joda.time._ 
import org.joda.time._

@ new Period(new LocalDate(1992,2,28), new LocalDate(2022,2,27)).getYears 
res3: Int = 29
```

## Java Time

```scala
Welcome to the Ammonite Repl 2.5.2 (Scala 2.13.8 Java 17.0.2)
@ import java.time._ 
import java.time._

@ Period.between(LocalDate.of(1992,2,28), LocalDate.of(2022,2,27)).getYears 
res1: Int = 29
```

# 補足

- 上記は年齢を算出するロジックの単体テストで発覚した。
- 民法では、年齢は前日に +1 されるため、誕生日が 1992-02-29 の人は 2022-02-28 の時に 30 歳である。
  - 誕生日当日に +1 してしまうと、誕生時点で +1 されるため、0 歳が表現できなくなる。（から前日に +1 されるのかな？）
  - でもその場合、2022-02-28 ではまだ 29 歳のはず（24時を超えないと +1 しないため、実質 2022-03-01 で 30 歳のはず）なのに、民法では 2022-02-28 でもう 30 歳と扱うらしい。謎い...
AWS Lambda(Python)から直接画像を出力する方法（覚書）

# SVGを出力したい

特に何も考えずに `Content-Type` だけしっかり指定してあげればOK。

```Python
return {
	'statusCode': 200,
	'headers': {
		'Content-Type': 'image/svg+xml',
	},
	'isBase64Encoded': False,
	'body': '<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">svg version="1.1" xmlns="http://www.w3.org/2000/svg">...',
}
```

# PNGを出力したい

こっちが主題になります。
Pythonで画像を取り扱う場合、何らかのライブラリを使用することになると思いますが、今回はおそらく一番使われてるであろう[Pillow](https://github.com/python-pillow/Pillow)を使っていることにします。
他のライブラリでも応用できると思います。

```Python
import io
import base64
from PIL import Image
# :
# ここら辺で画像を色々なんとかして最終的に`image`に何か入ってると思いねぇ
# :
bytes_io = io.BytesIO()
image.save(bytes_io, format='PNG')
return {
	'statusCode': 200,
	'headers': {
		'Content-Type': 'image/png',
	},
	'isBase64Encoded': True,
	'body': base64.b64encode(bytes_io.getvalue()).decode('UTF-8'),
}
```

ポイントは`Pillow.Image.save()`で`io.BytesIO`に書き込み、`getvalue()`で取得したbytes型をBase64でエンコードしてやる、ってところです。
出力がバイナリの場合は`isBase64Encoded`を`True`にした上でBase64でエンコードしたデータを`body`に入れる必要があります。
書き込み時の`format`を`JPEG`等に変更すればその形式で出力することができます。
あとはSVGと同様に`Content-Type`を指定してあげればOKです。

# 最後に

この記事書いてる人は実はあんまりPython得意じゃありません。
なのでもっと良い方法あるよ！って方はコメントとかで教えてください。
ついで（？）に弊社ではサーバーサイドエンジニアを募集していますので、まずはざっくばらんにお話ししてみませんか？
下記からご応募お待ちしております。
▼ https://herp.careers/v1/lanchester/Bucw0mXRKogc
▼ https://www.wantedly.com/companies/lanchester
▼採用動画について：https://moovy.jp/job/651
LightsailでGithubを使う

Lightsailのインスタンス内をGithubで管理したい時などに


### LightsailインスタンスにGitをインストール

```
$ sudo apt-get install git-all
```


### LightsailインスタンスにSSH接続のため，秘密鍵作成

```
$ ssh-keygen -t rsa -b 4096
Generating public/private rsa key pair.
Enter file in which to save the key (/home/bitnami/.ssh/id_rsa):    
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /home/bitnami/.ssh/id_rsa.
Your public key has been saved in /home/bitnami/.ssh/id_rsa.pub.
```

/home/bitnami/.ssh/id_rsa　にid_rsaが作成されます

```
cat ~/.ssh/id_rsa.pub 
```
で秘密鍵の内容が表示されるので，コピー

### GitHubアカウントに秘密鍵を登録

アカウント→setting→SSH and GPG keys→New SSH Key
でコピーした内容をペーストし登録

```
$ ssh -T git@github.com
```
で接続できるか確認

接続成功すると，

```
Hi ○○○○! You've successfully authenticated, but GitHub does not provide shell access.
```
みたいなメッセージが出てくれば接続できています


あとは
```git remote add origin git@github.com:{ユーザー名}/{リポジトリ名}.git```
でリポジトリを追加してpushしてあげるやら
```git clone git@github.com:{ユーザー名}/{リポジトリ名}.git```
でcloneしてあげる

※ここでは上記の通りSSL形式で通信すること。
　HTTPSだとユーザー名とパスワードを都度求められてしまいます。


## ターミナル上からSSH接続
ターミナルからgithubの変更箇所をpullしてくる時は，
```
ssh -i ~/.ssh/○○○.pem bitnami@{インスタンスのIP} 
git pull origin {ブランチ名}
git push -u origin {ブランチ名}
```
Elasticsearch　インストール手順とクラスタ構成設定のやり方。(未完)

# Elasticsearchの7.16をインストール設定
ここではLinuxにElasticsearchをインストールする際の手順や必要なものを書き留めたいと思います。

## ■インストール資材 
・elasticsearch-{version}-linux-x86_64.tar.gz
・rlp-licence.xml


## ■インストール手順
1.インストールする際はrootユーザを使わずに他のユーザでログインする。
　※rootユーザーではなぜかエラーが発生する事象があり、
　　他のユーザで作るとすんなり通るのでrootは使わないように

2.インストールしたいディレクトリにインストール資材を格納する。

3.以下のコマンドで解凍する。
```
tar zxvf elasticsearch-{version}-linux-x86_64.tar.gz
```
4.[rlp-licence.xml]を以下のコマンドでコピーして格納する。
```
cp rlp-licence.xml {格納しているディレクトリ}/plugins/rni/bt_root/rlp/rlp/licenses
```
5.Elasticsearchの起動。
```
bin /elasticsearch
```

https://www.elastic.co/guide/en/elasticsearch/reference/7.14/install-elasticsearch.html




## ■クラスタ構成設定資材
・elasticsearch.yml

## ■クラスタ構成設定
1.クラスタ構成を行うためにはサーバすべてにElasticsearchをインストールする。

2.すべてのサーバの「elasticsearch.yml」の設定をElasticsearch初起動前に設定変更して起動させる必要がある。
（上記でいうとインストール手順の4番）
そのための「elasticsearch.yml」の中に記載されている、
以下の行をコメントアウトして作成する。

```
cluster.name: my-cluster
node.name: node-1
#node.nameはすべてのサーバの個別の名称を付けること

network.host: 0.0.0.0
discovery.seed_hosts:
   - "***.***.***.***"
   - "***.***.***.***"
   - "***.***.***.***"
cluster.initial_master_nodes:
   - "***.***.***.***"
   - "***.***.***.***"
   - "***.***.***.***"　　
```

3.書き換えた「elasticsearch.yml」をElasticsearchディレクトリの中に格納する。

4.格納後、インストール手順の４番に行き、Elasticsearchを起動させる。



## ■まとめ
Elasticsearchのインストール手順を記載したが、
調査して記載しているが、まだ、インストールを行っていないため、間違いがあるかもしれない。
そのため、間違いがあれば指摘していただけると幸いです。
自分でも間違いがあれば修正します。
SQLSTATE[HY000] [2002] php_network_getaddresses: getaddrinfo for mysql failed: Name or service not known の対処法

### エラー内容
``` php
./vender/bin/sail artisan migrate
```

を実行すると、なぜか
```php
 SQLSTATE[HY000] [2002] php_network_getaddresses: getaddrinfo for mysql failed: Name or service not known
```
こんなエラーが出ちゃいました。

前提として、
このコマンドの前に、色々キャッシュクリアなどやっていたら
バグって、ページが表示されなくなるエラーを起こしていました。

そこで、新たなlaravelを立ち上げてmigrateしようと思っていた時に
このエラーが起きました。

### 原因
前状況を考えると、キャッシュクリアなどで
データベースが接続されていないのかな？と思い

```
./vender/bin/sail mysql match-app1
```

とDBを確認しようとしました。

すると
```
service "mysql" is not running container
```

と、違うエラーが発生したので。これは
データベースが接続できていないのかも。

と思い、色々dockerとDBを繋ぐ方法を実行してみたものの
上手くいかず。。。

### 結局これで解決した

あまりにも解決できなかったので、病みそうになっていたところ
適当に
```
docker-compose up -d
```
と打ち込んでみました。
それまでは
```
./vender/bin/sail up -d
```
でやっていたのですが。

そして、dockerを立ち上げてから

```
./vender/bin/sail artisan migrate
```
を実行してみたら、なんと上手くいきました！！

```php
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (61.42ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (43.90ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (45.03ms)
Migrating: 2019_12_14_000001_create_personal_access_tokens_table
Migrated:  2019_12_14_000001_create_personal_access_tokens_table (70.68ms)
Migrating: 2022_02_28_155100_create_user_lists_table
Migrated:  2022_02_28_155100_create_user_lists_table (24.82ms)
```
久しぶりに、この色取り取りコードが見れてよかったです。

### 踏み込んで考えてみる
さて、このままよかったと終わってもいいのですが
なぜ、docker-compose up -dだと上手くいって
./vender/bin/sailだと、エラーが起きてしまったのかについて考えてみます。

ここを理解するには、そもそも
composeとvenderの違いについて知る必要がありそうです。


>sailスクリプトは、docker-compose.ymlファイルで定義されたDockerコンテナを操作するための便利なメソッドをCLIで提供します。

https://readouble.com/laravel/8.x/ja/sail.html

公式によると、sailコマンドはymlファイル操作用ぽいですね。


すみません。ちょっと時間かかりそうなので
また、追々理解していくとします！
とりあえず、今は終わらせることに集中していきます。
VRMモデルを使っているけど、どうしてもFBXでUnityに入れたいとき用(BlenderでのBlendshapeを使いたいとき)

### BlenderでVRMをFBXで出力後にLook Atを適用する方法

#### Blenderの設定

fbx の出力時に、
1. 内容からアーマチュアとメッシュを選択。
2. アーマチュアからリーフボーンを追加のチェックを外す。
3. アニメーションをベイクのチェックを外す。

そのあとで、FBXをエクスポートをクリック

#### FBXの設定

肝のところ！

Model の Bake Axis Conversion のチェックをつける

Rig の Animation Type を Humanoid に設定

### VRN Look At Headの変更

```VRMLookAtHead.cs
        [SerializeField] public float yawDiff; //追加

        [SerializeField] public float pitchDiff; //追加

...
        public void LookWorldPosition(Vector3 targetPosition, out float yaw, out float pitch)
        {
            var localPosition = Head.worldToLocalMatrix.MultiplyPoint(targetPosition);
            Matrix4x4.identity.CalcYawPitch(localPosition, out yaw, out pitch);
            yaw -= yawDiff; //追加
            pitch -= pitchDiff; //追加
            RaiseYawPitchChanged(yaw, pitch);
        }
```

Gizumoでデバッグしてyawとpitchの分のずれを補正する.

#### Modelの設定

あとは通常通りに、

1. 別にimportしたVRMモデルからマテリアルの設定
2. VRM Look At Head と VRM Look at Bone Applyer を設定する！

![REM_TEST-SampleScene-PC_-Mac-_-Linux-Standalone-Unity-2020.3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1353403/e5ee61a6-3844-3d2c-0672-b130d4def90a.gif)



### 2022/04/01 追記

もっと、いい方法があったのでそっちの方を追記

### Blender 側の出力設定

![qiita_20220401.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1353403/2eb975ff-140b-f922-fa36-b0ff71a41e53.png)

#### 同じ設定

内容を

- アーマチュア

- メッシュ

- その他

を選択する

トランスフォームを適用

をチェックする

リーフボーンを追加しない

### 新しい設定

アーマチュアのセカンダリボーンを-X軸に設定する

これにより、Model の Bake Axis Conversion のチェックをつけなくてもよくなる。

>> Bake Axis Conversion があると、Very Animation　が崩れる(´;ω;｀)....。


以上！
【40代の非エンジニアでも合格】AWSクラウドプラクティショナー　合格体験記

# はじめに
2022年2月にAWSクラウドプラクティショナーを受験し、無事に合格しました。
40代の非エンジニア、家族は妻と子供2人の私でも合格できましたので、今後取得されようとされている40代の非エンジニア、家族持ちの方々にも参考になれば幸いです。

# 勉強教材
[Udemy【2022年版】これだけでOK! AWS認定クラウドプラクティショナー試験突破講座（豊富な試験問題290問付き）](https://www.udemy.com/course/ok-aws-e/)

[ななななんと！AWS認定の模擬試験が無料になりました！！](https://dev.classmethod.jp/articles/new-aws-official-practice-questions/)

# 学習内容
非エンジニアの家族持ちのため、お風呂や移動の時間などもフル活用して、動画学習できる時間と場所でまずは理解に努めて、
そのあとは、UdemyとAWS公式の模擬試験を実施して、100点を取れるまで何度も何度も繰り返す、
これをひたすらやっていました。

通常業務はもちろんのこと、家事や育児もやりながらの学習でしたので、1日の学習時間があまり取れず、模擬試験で100点を継続して取れるようになるまでには、1ヶ月半ぐらいかかりました。

# 試験結果
なんとか717点で、一発合格できました。
試験内容は、UdemyとAWSの模擬試験とは異なる問題が多くあったと感じましたが、
複数の模擬試験で100点を継続的に取れるようになっていれば、合格できるレベルにまでもってこれるのかなと思いました。

# まとめ
40代の非エンジニアでも合格可能な資格です。
これまでは、各案件における協議を狭い世界でしていたのだと気付きがあり、
AWSというシェア1位のクラウドサービスの体系を学んでおくことは、
今後のクラウドサービスを作っていく上では必須の資格だと思いました。
皆様のご参考になれば幸いです。
スペースがある文字列を変数にする場合 シェルスクリプト

スペースのある変数をそのままシェルスクリプトのif文等で使うと文法エラーになる。

「 [: too many arguments」みたいに。

以下のサイトを参考に
https://ritchiekotzen.hatenablog.com/entry/20090430

if文で使用するとき回避方法は2つある。

１.変数自体をダブルコーテーションで囲む。
　　"$STATUS"


２.if文のカッコを2重カッコにする
[[ (Ended immediately) = \(\R\u\n\n\i\n\g\) ]]


なんでif文の中で2重カッコにしているのか不明だったが
そういうことってわかった。
FlutterのFreezedに慣れる。

`freezed`を使う理由は、ネストを避けて状態管理に安全性を求める為です。要はコードが整理整頓しやすくなります。
`Android Studio`のプラグインを使用した方が良いのでしょうが、`VS code`でのFlutter開発が慣れているので、変更の都度下記コマンドで`Generator`を走らせながら`freezed`を使って参ります。
```
flutter clean
// エラーが他にある場合、そのファイル群を削除するのに使用

flutter pub get
// ライブラリが更新されていない場合に必要。

flutter packages pub run build_runner build --delete-conflicting-outputs
// freezedのエラー処理とXXXX.freezed.dartの生成。
```
```
dev_dependencies:
  build_runner: ^latest
```
バージョン管理にかかせない`fvm`というパーケージ管理ライブラリを、プロジェクトのルート直下に`Makefile`を置いてそこに上記の処理と合わせて
```
.PHONY: build

build:
	fvm flutter pub run build_runner build --delete-conflicting-outputs
```
と書くだけで、`make build`とターミナルで打つだけで実行することができます。もし、開発のペースにゆとりがあれば、このように`pub get`も書き加えて！
```
.PHONY: build

build:
    fvm flutter pub get
	fvm flutter pub run build_runner build --delete-conflicting-outputs
```
行を増やして簡略化しましょう。

`Freezed`はプロパティを宣言せず、ファクトリコンストラクタを用いてクラスを定義します。
```dart
 @freezed
 class Dog with _$Dog {
   factory Dog({ String? name , int? age }) = _Dog;
 }
// 名前(String)と年齢(int)の２つのプロパティを持つクラス
```
こちらを使用するには、
```dart
 var dog = Dog(name: 'KenKen', age: 8);
 print(dog.name); -> // KenKen
 print(dog.age); -> // 8
```
このように書けば使用できます。また、パラメータの型がサポートされているので
```dart 
 @freezed
 class Dog with _$Dog {
   const factory Dog( String name , int age, {String? dog_breed }) = _Dog;
 }
 
 Dog('KenKen', 8, dog_breed: 'Shiba')
// ケンケンという８歳の柴犬がパラメータ。
```
このようにも書けます。dartのデータ型の多くはイミュータブル(状態を変更することができないオブジェクト)で`freezed`はそのデータ型を自動生成して扱いやすくしてくれます。`Dog`のクラスのnameプロパティに`名前無し`デフォルト値を与える場合は次のように書きます。
```dart
 @freezed
 abstract class Dog with _$Dog {
   const factory Dog({
     @Default('名前無し') String name,
     int age,
     bool young,
   }) = _Dog;
 }

 final dog = Dog(age: 8, young: false);
 print(dog.name); // 名前無し
```
と他にも色々な使い方があるのでこちらの記事に後から追加していきたいと思います。

[追加の記事へ](https://qiita.com/ume-bar/items/984e643530c45feed2c8)
未経験エンジニアが1年半で使ったgitコマンド一覧

# 私は誰？
・大学時代は非情報系の理系
・新卒で営業職3年
・1年半前に未経験からエンジニア転職
・サーバーサイドの案件が多め

自分と同じように、**未経験からエンジニアを目指している方**に向けて
<b>「最低限これだけは知っておいたら実務を乗り切れるよ！」</b>
ということを伝えるための記事です。

## 対象の読者
- 未経験からエンジニアを目指している方
- エンジニアになりたてホヤホヤの方
- gitにいまいち自信のない方

## 本記事で得られるもの
- 未経験から実務に入った時に、何とか乗り切れるだけのgitコマンド
- 実務に入るまでにどれくらいのgitを知っておくべきかの目安
- よく使うgitコマンドが並んでいるので、この記事からコピペできる

本記事は、「gitの概念を理解する記事」ではなく、<b>「初心者向けのgitのチートシート」</b>ですので悪しからず。

# そもそもgitとは？
>Gitは、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。
(引用：wikipedia)

です。

チームで開発する時には必須と言っても過言ではありません。
実務に携わるまでは全然要らないのに、実務に入ったらいきなり要るやつです。

ちなみに
「git hub」というのは、gitを利用した「サービス」の1つです。
「git」が抽象的な仕組みの名前で、「git hub」が具体的なサービスの名前になります。

# 絶対使うgitコマンド

### 最初に手元にとってくる
```tex:実行例
$ git clone <URL>
```

### リモートの特定のブランチを手元にとってくる
```tex:実行例
$ git fetch origin <branch名>
$ git checkout <branch名>
```

### ブランチの切り替え
```tex:実行例
$ git checkout <branch名>
```

### ブランチの新規作成＋切り替え
```tex:実行例
$ git checkout -b <branch名>

# ブランチの新規作成だけしたい時
$ git branch <branch名>
```

### 現在の変更を全てコミットする
```tex:実行例
$ git add .  (一部のファイルのみの時は git add <file名> とする)
$ git commit -m "コミットメッセージ"
```

### ブランチをリモートにプッシュする
```tex:実行例
$ git push origin <branch名>
```

### 別ブランチのコミットをコピーする
```tex:実行例
$ git cherry-pick <コミットID>

# cherry-pickしたもののconflictして、やっぱ辞めたいとき
$ git cherry-pick --abort
```

# 使えたら便利なgitコマンド

### コミットログを確認する
```tex:実行例
$ git log
```

### 直前のコミットを上書きする(commitしたもののtypoに気付いた時など)
```tex:実行例
$ git commit --amend
```

### コミットをまとめる
コミットの粒度をどうするかはプロジェクトによってですが、細かくしすぎたコミットをまとめる方法。
```tex:実行例
# 直前2つのコミットをまとめる
$ git rebase -i HEAD^^

# 直前４つのコミットをまとめる
$ git rebase -i HEAD~4
```
下記のようなやつが出てくるので、単にまとめたいだけであれば、pick→squashと書き換える。
```
pick 23e47bc5 修正
pick feabc394 新機能実装
```

### コミット間の差分を確認する
```tex:実行例
# 現在との差
$ git diff <コミットID>

# 任意の２つのコミットの差
$ git diff <コミットID①> <コミットID②>
```

### タグを打つ
切り戻しをするとき用などに、タグ(目印)を打っておく。
```tex:実行例
$ git tag <tag名>

# リモートへのプッシュ
$ git push origin <tag名>
```

### コミットをなかったことにする
```tex:実行例
# 直前のコミットをなかったことにする(変更をステージングにしたところに戻る)
$ git reset --soft HEAD^

# 直前のコミットの変更をまるごと消し去る
$ git reset --hard HEAD^
```

### 修正を一旦置いときたい
一旦置いとくのが長くなりそうな時は、一度commitしてしまって、後にreset --softして修正を続ける方が好き。
```tex:実行例
$ git stash

# 直前にstashしたものを元に戻す
$ git stash apply stash@{0}
```

### リモートブランチを強制的に上書きする
恥ずかしいミスを覆い隠す裏技
※大事なbranchでやると大事故の危険があります。<b>(※各自の自己責任でお願いします)</b>
```tex:実行例
$ git push -f origin <branch名>
```


# 後書き
当記事では、実務未経験の方に<b>「これくらい使えたら何とかなるという目安」</b>を提供するために、
「gitの仕組み」や、「それぞれのコマンドの説明」は、ほとんどすっ飛ばしました。

個人的には、gitの勉強はそれほど優先度高くなく、
最低限のポイントだけつかんで、あとは実務を通して慣れていけばいいと思います。

本記事が、少しでも未経験からエンジニアを目指す方の一助となれば幸いです。

最後に少しだけ宣伝を、、
弊社は未経験者でもやる気と能力さえあれば、グングン成長できる環境です！
興味ある人は[こちら](https://www.recruit.nuco.co.jp/)より。
SQLServerでBULK INSERT出来なかった件

SQLServerでBULK INSERTを実行しようとすると以下のようなエラーが出る…

- **一括読み込みステートメントを使用する権限がありません。**

- **ファイルを開けなかったので、一括読み込みできません。オペレーティング システム エラー コード 5(アクセスが拒否されました)**

以下の方法で解決できると思われる

## Windows認証

SQLServer構成マネージャーを開き、下記の赤枠の【ログオン】の欄を確認してください。

![構成マネージャー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1770621/49bcafcf-0e5a-b3a7-9423-0f1adfce5f4a.png)

今回は「NT Service\MSSQLSERVER」となっているので、BULK INSERTで挿入するテキストorCSVが保存されているフォルダに対して「MSSQLSERVER」でアクセスできるようにアクセス権限を付与(【プロパティ】⇒【セキュリティ】⇒【編集】⇒【追加】)します。

これで出来るはず。

これで出来ない場合は対象ユーザに**sysadmin**が付与されていないと思われるので管理者ユーザでログインし付与してあげる

## SQLServer認証

上記のアクセス付与に加えてユーザ自体にも権限を付与する必要があります。
SSMSでデータベースにログインしBULK INSERTを実行するユーザに対して以下の権限を付与します。

1．【セキュリティ】⇒【ログイン】⇒【対象ユーザ】⇒【プロパティ】⇒【サーバーロール】の順に進み**bulkadmin**という項目にチェックを入れてOKします
![bulkadmin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1770621/e298d8b3-33d9-338c-919f-955b4c3c0259.png)
2．【セキュリティ】⇒【ログイン】⇒【対象ユーザ】⇒【プロパティ】⇒【ユーザマッピング】の順に進み対象データベースの**db_datareader**と**db_datawriter**という項目にチェックを入れます
![db_datawriter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1770621/4b09dec5-2157-8653-e4f6-cdb07da80c7f.png)

これでこちらも大丈夫なはず。
[PHP]PHPUnitのassertSeeをリダイレクト先でも行いたい。


# きっかけ
laravelにてfeatureテストを記述していたときに、post処理後のリダイレクト先でフラッシュメッセージを assertSee したくなった。

## assertSee について
レスポンス内に指定の文字列があるかを確認してくれる。
基本的なアサートの一つ。
```php
public function test_テキストチェック()
{
  $response = $this->get('user');
  // /user に "user一覧"　と記述されていればテストが通る
  $response->assertStatus(200)->assertSee('user一覧');
}
```
この他にも、文字列を順番に記述されているかを確認してくれる「assertSeeInOrder」など、便利なものがいくつか存在します。
詳しくは、下記をご覧ください。

https://readouble.com/laravel/6.x/ja/http-tests.html#assert-see

## 問題
便利な assertSee ですが、下記のような記述ではリダイレクト先までは見てくれません。。
```php
public function test_テキストチェック()
{
  $response = $this->post('user', [
    'name' => 'hello',
    'email' => 'world@example.com',
  ]);
  // redirect前のテキストを確認してしまうので、テストは通らない。
  $response->assertStatus(302)->assertSee('user一覧');
}
```

## 解決策
２パターンの解決策があるみたいです。

### パターン１
post後に再度getを行う。
この場合でもflashメッセージは正しく確認できるみたいです。
```php
public function test_テキストチェック()
{
  $response = $this->post('user', [
    'name' => 'hello',
    'email' => 'world@example.com',
  ]);

  $response->assertStatus(302);

  $this->get('user')->assertSee('user一覧');
}
```


### パターン２
followRedirectsを使用する。
こちらも問題なくflashメッセージの確認ができます。
```php
public function test_テキストチェック()
{
  $response = $this->post('user', [
    'name' => 'hello',
    'email' => 'world@example.com',
  ]);

  $response->assertStatus(302);

  $this->followRedirects($response)->assertSee('user一覧');
}
```

## 参考
https://loop-never-ends.com/laravel-test-assertseetext/

https://stackoverflow.com/questions/27282519/laravel-testing-what-happens-after-a-redirect
「【Ruby】nからmの数の総和を求める」を参考にWolframAlphaとsympy でやってみた。

オリジナル

https://qiita.com/itosyo4126/items/35c08203cd1999b23e36


# WolframAlpha で

https://www.wolframalpha.com/input?i=n%E3%81%8B%E3%82%89m%E3%81%AE%E6%95%B0%E3%81%AE%E7%B7%8F%E5%92%8C&lang=ja

和
sum_(n=n)^m n = 1/2 (m - n + 1) (m + n)

https://www.wolframalpha.com/input?i=5%E3%81%8B%E3%82%8915%E3%81%AE%E6%95%B0%E3%81%AE%E7%B7%8F%E5%92%8C&lang=ja

sum_(n=5)^15 n = 110

https://www.wolframalpha.com/input?i=n%3D5%2Cm%3D15%2C1%2F2+*%28m+-+n+%2B+1%29+%28m+%2B+n%29&lang=ja

結果
110


# SymPy Liveで(Pycharmでも)

以下サイトに、ソースコードを貼り付けて、Evaluateです。

https://live.sympy.org/


```python
from sympy import *
var('k n m')
print("#",Sum(k, (k, n, m))       )
print("#",Sum(k, (k, n, m)).doit())
print("#")
mySubs={n:5,m:15}
print("#",Sum(k, (k, n, m))            .subs(mySubs))
print("#",Sum(k, (k, n, m)).doit()     .subs(mySubs))
print("#",(m**2/2 + m/2 - n**2/2 + n/2).subs(mySubs))
# Sum(k, (k, n, m))
# m**2/2 + m/2 - n**2/2 + n/2
#
# Sum(k, (k, 5, 15))
# 110
# 110
```


# 参考

https://qiita.com/mrrclb48z/items/a97ccb42d6936a6fbfa9

https://hyperpolyglot.org/computer-algebra2#sum
LibreOffice Draw ファイルを開くと Impress が立ち上がる

LibreOfficeはクラッシュ後に起動すると編集中だったファイルをリカバリーしてくれる。

しかし Draw ファイルを編集していると、まれにリカバリーすると Impress が起動してしまう。
ファイルの属性がプレゼンテーションファイルになっているようだ。


# 環境

- Ubuntu 20.04 LTS (AMD64)
- LibreOffice バージョン: 6.4.7.2 (Ubuntuディストリビューション付属)

であるが、上記の環境に限らず Ubuntu + LibreOffice の組み合わせではかなり前(6~7年前頃)からこの現象は起こっていた。

Ubuntu 以外の環境で再現するかどうかは使っていないので不明。

# 現象

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/d6013acc-41b0-694c-cd96-6051d748bdc5.png)
アイコンはDrawだが、開くと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/35bcacf1-070b-8f6f-a88c-8d654f7ebff5.png)

Impressが開いている。

odg ファイル形式を改めて指定して保存し直そうにも、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/7bff6db7-7b09-5fc4-f91b-0b06eede39b3.png)


なんだこれ。ODF図形描画なのに(Impress)(.odg) となっている。そしてこれを選択して保存しても症状は変わらない。



# 解決方法

この場合、文書内部の MIME 情報を直す。
MINE 情報を直すには、ファイルを直接書き換える。


# 操作方法

まず、以下のフォーマットを選択して保存する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/9a3d16a7-428a-e38a-c20f-3cddeabf356d.png)

できた fodp ファイルをエディターで開く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/3a29d5e2-3b02-f085-2e0c-d019b0f4435f.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/2deedb28-7482-bae0-7c29-f5cc8f1fef0e.png)
この中の、

```

 office:mimetype="application/vnd.oasis.opendocument.presentation">
```

この箇所を
```

 office:mimetype="application/vnd.oasis.opendocument.graphics">

```

に直して保存。

LibreOffice から「ファイル」-「開く」で開くと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/291cde62-2a68-d7f9-11ce-06e833dc5717.png)

Draw で開けるようになる。これを保存し直しすとOK。
【Rails】Active Jobのテストの書き方

# 初めに

Active job のテストは E2E テストで行えますが、job 単体のテストをしたい時に書き方がわからなかったのでここに残しておきます。

## やりたい事

job 単体のテストを書く

## 環境

Ruby 2.7.4

Rails 6.1.3

Rspec 3.10.1

# Job テスト

まずは、spec ディレクトリの下に jobs ディレクトリを作成します。
そして、テストしたい job のスペックを作成します。

```console:コンソール

/rails # mkdrir spec/jobs

/rails # touch spec/jobs/<job名>_job__spec.rb

```

job がキューに入ったことの確認するテストと job が実行されているかのテストを書きます。
DeleteReviewJob は review を削除する job です

```ruby:rails/app/jobs/delete_review_job.rb
class DeleteReviewJob < ApplicationJob
  queue_as :default

  def perform(review)
    review.destroy
  end
end

```

```ruby:rails/spec/jobs/job名_job_spec.rb
require 'rails_helper'

RSpec.describe 'jobs', type: :job do
  let(:user) { create(:user) }
  let(:product) { create(:product, user: user) }
  let(:review) { create(:review, user: user, product: product) }

  describe 'perform_later' do
    it 'enqueue job' do
      ActiveJob::Base.queue_adapter = :test #jobを起動するアダプターtest環境ではtestにしておく
      DeleteReviewJob.perform_later(review)
      expect(DeleteReviewJob).to have_been_enqueued #キューに入ったかを確認する
    end

    it 'delete review' do
      ActiveJob::Base.queue_adapter = :test
      review
      expect do
        DeleteReviewJob.perform_now(review)
      end.to change(Review, :count).by(-1) #jobが発動して、reviewが削除されたかを確認している
    end
  end
end

```

# 参考

[Relish](https://relishapp.com/rspec/rspec-rails/docs/job-specs/job-spec)

[RSpec でキューイングした ActiveJob を同期実行する](https://qiita.com/upinetree/items/41a2a8fe9e1dd7c291ab)

[blog.kotamiyake.me](https://blog.kotamiyake.me/tech/rails-activejob-rspec-tips/)
【JavaScript】Mochaについて

JavaScriptのテストで**mocha**を使ったのではじめの基本的なところをメモしておく。

# mochaとは
**mocha**とは、柔軟性のあるJavaScriptのテストフレームワーク。
**mocha**自体には、アサーションなどの機能を持っていないため自由にライブラリを選択できる。また、Node.jsだけでなくブラウザでも実行することができるという特徴がある。
**mocha**は、``npm``を使って以下のようにインストールできる。

```
npm install --save-dev mocha
```

# chaiとは
**chai**とは、アサーションライブラリのこと。**chai**は、**mocha**と同様にNode.jsだけでなくブラウザでも実行できる。上記のように**mocha**自体はアサーションの機能がないため、今回は**chai**を使用した。
**chai**のインストールも``npm``を使って以下のようにできる。

```
npm install --save-dev chai
```

# package.jsonを編集
``npm test``で**mocha**を実行できるように、``package.json``の``scripts``に以下を追加する。

```:package.json
"scripts":{
    "test": "mocha"
}
```

# サンプル
**mocha**と**chai**を使った簡単なサンプルを書いておく。
今回は、足し算の結果を返す``sum(x,y)``をテストするサンプルを書いてみた。

```javascript:テストコード
const assert = require("chai").assert;
const calculator = require("../src/calculator");

describe("sum()のテスト", () => {
	it("sum(2,5) = 7", () => {
		assert.deepEqual(calculator.sum(2, 5), 7);
	});
});
```
このテストを実行すると以下となる。

```
sum()のテスト
    ✔ sum(2,5) = 7


  1 passing (6ms)
```
enumを使うと見やすいコードになる話

# 導入前

恥ずかしながら、```enum```をうまく活用できてなく、見づらいコードを書いていた。
```if文```の数字の意味が見ただけでは不明。

```dart
main() {
  // men: 1, women: 2
  if (gender == 1) { // 1ってなに？？
    ...
  } else if (gender == 2) { //2ってなに？
    ...
  }
}

```

# 導入後

```enum```を使用すると見やすいコードになった。

```dart
enum Gender {
  men,
  women,
}

main() {

  genderType Gender

  if (genderType == Gender.men) {　
    ...
  } else if (genderType == Gender.women) {
    ...
  }
}
```

# まとめ

```enum```使うと良いかも。