OmniAICreator/Qiita-1.07M huggingface dataset:
PHP ぼくのかんがえたさいきょうの、NULLやブランクや配列数が０の時にTRUEを返し、数字の0の時はFalseを返す関数、その名はisNULL

## 概要

NULLやブランクや配列数が０の時にTRUEを返し、数字の0の時はFalseを返す関数です。テストもありまぁす。

## isNULLの仕様

### （第二引数がNULLの時、）第一引数の値と戻り値の関係

|第一引数の値|戻り値|
|--|--|
|null|TRUE|
|文字 - 空|TRUE|
|文字 - 1文字以上|false|
|数値（0も含めて）|false|
|配列 - 個数0|TRUE| 
|配列 - 個数1以上|false|
|空オブジェクト|TRUE|


### 第一引数がオブジェクトで第二引数がプロパティ名の時（もしくは配列とキー名）

|プロパティが|動作|
|--|--|
|存在しない|TRUE（*__getがあれば呼び出す）|
|存在する|値をisNULL再帰呼び出しで判定|

## isNULL

```PHP
/**
 * @param mixed $val
 * @param string $key
 * @return bool
 */
function isNULL($val, $key = null) {

    if (! isset($val)) {
        return true;
    }

    $type = gettype($val);

    if (is_null($key)) {
        if ('array' === $type && 0 === count($val)) {
            return true;
        }
        if ('string' === $type && '' === $val) {
            return true;
        }
        return false;
    }

    if ('object' === $type) {
        if (property_exists($val, $key)) {
            return isNULL($val->{$key});
        }
        if (method_exists($val, '__get')) {
            return isNULL($val->{$key});
        }
        return true;
    }

    if ('array' === $type) {
        if (! array_key_exists($key, $val)) {
            return true;
        }
        return isNULL($val[$key]);
    }

    return true;
}
```

## isNULLのテスト

```PHP
/**
 *
 */
public function testIsNULL() {

    $null = null;
    $this->assertTrue(isNULL($null));

    $blank = '';
    $this->assertTrue(isNULL($blank));

    $not_blank = '1';
    $this->assertFalse(isNULL($not_blank));

    $int_zero = 0;
    $this->assertFalse(isNULL($int_zero));

    $empty_arr = [];
    $this->assertTrue(isNULL($empty_arr));

    $not_empty_arr = ['1'];
    $this->assertFalse(isNULL($not_empty_arr));

    $obj = new \stdClass();
    $this->assertTrue(isNULL($obj, 'not_exist_property'));

    $obj->exist_property = 'value';
    $this->assertFalse(isNULL($obj, 'exist_property'));

    $obj->null_property = NULL;
    $this->assertTrue(isNULL($obj, 'null_property'));

    $obj->blank_property = '';
    $this->assertTrue(isNULL($obj, 'blank_property'));

    $obj->zero_property = 0;
    $this->assertFalse(isNULL($obj, 'zero_property'));

    $obj->empty_arr = [];
    $this->assertTrue(isNULL($obj, 'empty_arr'));

    $obj = new hasGetTestClass();
    $this->assertSame('my name is やみ姐さん', $obj->name);
    $this->assertFalse(isNULL($obj, 'name'));

    $obj = 4; 
    $this->assertTrue(isNULL($obj, 'ratio'));
}

/**
 * Class hasGetTestClass
 */
class hasGetTestClass {

    private $_data = [
        'name' => 'my name is やみ姐さん',
    ];

    public function __get($key) {
        if (array_key_exists($key, $this->_data)) {
            return $this->_data[$key];
        }
        return null;
    }
}

```
Laravel6でLaravel-Adminをインストール後、migrateできているのに、Laravel-Adminにログインできない

# 状況
- Laravelプロジェクトをインストール
- envファイル編集
- `php artisan migrate` 成功
- Laravel-Adminをインストール
- `php artisan serve` でサーバー起動
- `127.0.0.1:8000/admin` にアクセス後ID PASS入力
-  ログインできず、なぜかenvファイルを確認してくれと表示される

環境
サーバー：Windws WSL
DB：AWS RDB（8.x）

# 解決方法
`php artisan config:cache`
でキャッシュをクリア

これだけでした。
Unity の Addressable Asset の覚え書き

# はじめに

Unity の Addressable Asset の覚え書き。

## エディタ実行での注意

### Play Mode Script の設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19224/db49ea51-7b58-689b-5216-8adbd81cd671.png)

- Use Asset Database (fastest)
    - アセットの解析やアセットバンドルを作成せずにアセットデータベースから ```Resource Manager``` を介して直接ロードされる
- Simulate Groups (advanced)
    - アセットバンドルを作成せずにアセットデータベースから ```Resource Manager``` を介してロードされる
    - ```Use Asset Database``` とは違い、アセットの依存関係などの解析も行うためエディター実行開始時に時間がかかる
    - 実は**エディター実行時には他のモードのどれよりも遅い**
- Use Existing Build (requires build groups)
    - 事前にビルドされたアセットバンドルを使用する（言い換えれば事前に必ずビルドしておく必要がある）
    - エディター実行では最速
    - プレハブにスクリプトが含まれている場合は本体のビルドも行っておく必要がある
        - これを行わないとアセットバンドルのハッシュ値が一致しない

プログラマーがエディター実行するだけなら初期段階から ```Use Existing Build``` にしておくというのも一つの手ではあるが色々と問題はある。

- Windows 環境で iOS の Metal が利用できないので iOS をエディタで実行する場合に正常にシェーダーが機能しない
    - 解決策としては、Metal を諦めて OpenGLES2/3 を利用する事で可能だがパフォーマンスを犠牲にする必要がある。
- アセットバンドルにスクリプトを含むプレハブを配置するのであればその都度アセットをビルドし適切な場所にデプロイしておく必要がある
    - 解決策としては、スクリプトを含むプレハブは別のアセットグループに配置しておき、そのアセットグループの ```Load Path``` を ```LocalLoadPath``` にしておき更新が必要なくなった時点で ```RemoteLoadPath``` に切り替えるという事で可能。
【ＰＨＰ】全角半角の混合文字列を削除

```PHP
<?php
$hankaku_zenkaku = '　 全角半角　 ';

$trim = trim(mb_convert_kana($hankaku_zenkaku, "s", 'UTF-8'));

echo "＝＝＝{$trim}＝＝＝";

```

#結果
```
＝＝＝全角半角＝＝＝
```
git push時に「fatal: git-http-push failed」が出たとき

# エラー内容
サーバーからリポジトリをcloneし、ローカルで作業し、サーバーにpushしたところ、以下のようなエラーが出た。

```bash
$ git push origin test/branch
error: Cannot access URL http://11.2.33.444:8888/git/hoge/bar.git/, return code 22
fatal: git-http-push failed
```

# 解決法
リモートのoriginのURLに、「ユーザ名:パスワード@」を追加する。

```bash
$ git remote -v
origin  http://11.2.33.444:8888/git/hoge/bar.git (fetch)
origin  http://11.2.33.444:8888/git/hoge/bar.git (push)

$ git remote rm origin

$ git remote add origin http://username:password@11.2.33.444:8888/git/hoge/bar.git

$ git remote -v
origin  http://username:password@11.2.33.444:8888/git/hoge/bar.git (fetch)
origin  http://username:password@11.2.33.444:8888/git/hoge/bar.git (push)
```

以上の設定後、再びpushするとうまくいきました。

# 参考URL
- https://stealthinu.hatenadiary.jp/entry/20151029/p1
- https://akira-junkbox.blogspot.com/2015/10/gitbucketpushreturn-code-22.html
Jetpack Composeで簡単な画面遷移を行う

単純なコンポーザブル関数が用いられている２画面間の遷移（のようなもの）をする方法の一つです。
build.gradle(:app)に以下のような依存関係を追加してください。

```gradle:build.gradle(:app)
// いろんなやつ

dependencies {
// いろんなやつ
    implementation "androidx.navigation:navigation-compose:2.4.0-alpha09"
}
```

:::note warn
注意
compileSdkVersion が 30以下だと後の処理でエラーが出る可能性があります。
:::

今、以下のような `FirstScreen` と `SecondScreen`を移動する場合を考えます。

```kotlin
@Composable
fun FirstScreen(navController: NavController){
    Column {
        Text(text = "１つ目の画面")
        Button(onClick = { navController.navigate("secondScreen") }) {
            Text(text = "次の画面へ")
        }
    }
}

@Composable
fun SecondScreen(){
    LazyColumn {
        items(10){
            Text(text = "２つ目の画面")
        }
    }
}
```

次に`setContent`内で、

```kotlin
setContent {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "firstScreen"){
        composable("firstScreen"){ FirstScreen(navController = navController)}
        composable("secondScreen"){ SecondScreen()}
    }
}
```

このように書けば一つ目の画面でボタンを押すことで二つ目の画面に遷移したような処理をさせることができます。
![ダウンロード.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592867/88da07e5-bde8-40f1-658a-d83922aa73ac.gif)
JSONシリアライズするdata classにisXXXという変数名がある時はJsonPropertyをつける

# 発生した問題
* JSONシリアライズしたい`data class`のうち、シリアライズされないプロパティが存在する。

以下のような、`data class`をResponseに乗せて返却するコントローラーがあります。

```kotlin
@RestController
class JsonTestController {

    @GetMapping("jsonTest")
    fun jsonTest(): ResponseEntity<HaveBoolean> {
        val value = BooleanValue(true)
        return ResponseEntity.ok(HaveBoolean(value))
    }

    data class BooleanValue(val value: Boolean)

    data class HaveBoolean(
        val isAdmin: BooleanValue,
    )
}
```
こちらを実行(`curl http://localhost:8082/jsonTest`)すると、空のオブジェクト（`{}`）がレスポンスとして返ってきます。本来なら
`{"isAdmin":"value"{true}}`が返ってきて欲しいのですが。


# 解決方法
`@get:JsonProperty("isXXXX")`をプロパティに付与します。

```kotlin
    // 上記のコントローラーからHaveBooleanクラスのみ抜粋
    data class HaveBoolean(
        @get:JsonProperty("isAdmin") //これが必要
        val isAdmin: BooleanValue,
    )
```

# 原因
[こちら](https://stackoverflow.com/questions/69446999/json-key-is-missing-using-jsoncomponent-on-spring-boot-with-kotlin/69447829#69447829)のページから回答を日本語訳にして引用
>これは、kotlinにおけるjacksonの既知の問題です。Jacksonは基本的に名前からisを削除しようとしますが、kotlinのデータクラスの実装はisを含まない適切なゲッターを持っていないため、ミスマッチが生じます。JsonProperty("isAdmin")を変数に追加すれば、動作するはずです。

よくわかっていないですが、`data class`が暗黙的に持つ`getter/setter`の命名と`Jackson`の挙動が何らか悪さをしているようです。

# 参考資料
* [Jackson renames primitive boolean field by removing 'is'](https://stackoverflow.com/questions/32270422/jackson-renames-primitive-boolean-field-by-removing-is)
* [JSON key is missing (using @JsonComponent on Spring-boot with kotlin)](https://stackoverflow.com/questions/69446999/json-key-is-missing-using-jsoncomponent-on-spring-boot-with-kotlin/69447829#69447829)
バッチ処理でやらかしてfirestoreに1時間で800万書き込みしてしまった話

こんにちは。[もぐめっと](https://mogmet.com)です。

![mogmet.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/2f614fdb-c1ce-ff13-5e3a-2748661cd280.jpeg)
先日、機会があって[div](https://di-v.co.jp/)に行くことがありました。
とてもおしゃれなオフィスで素晴らしいところでした。
いつか私もおしゃれなオフィスを持てるように頑張りたく存じます。

本日の記事のきっかけはこれになります。

https://twitter.com/mogmet/status/1444989362001747968?s=20

普段、1ヶ月450万書き込みくらいなのにそれをものの1時間で2倍ちかい数字を叩き出してしましました。

ということでバッチ処理でやらかしてしまったのでその原因と対策のお話をします。

## 原因は多重ループ

なんとなくお察しの方はわかるとおもいますが、実装として無限ループっぽいことしてしまったんですよね。。。

問題となったコードがこんな感じです。

```ts
(async () => {
    const snapshots = await hogeCollection.get()
    console.log(snapshots.size)
    for (const document of snapshots.docs) {
      const data = { hoge: 20 }
      await batchMultiByQuerySnapshot(snapshots, (batch, document) => {
          batch.update(document, data)
      })
    }
  })()
```

batchMultiByQuerySnapshotは500個ごとに渡された配列を区切ってbatch.commit()してくれる関数になります。

どこが原因かというとここです。

```ts
    for (const document of snapshots.docs) {
```

batchMultiByQuerySnapshotにsnapshotsをわたしていてそれで済む話だったので、forで回す必要がなかったのですが、なぜかsnapshotsのdocumentの数だけループを回してしまいました。

全量データは8万件あったのですが、8万の8万乗、、、ものすごい数のバッチがまわってしまいました。

普段無限ループが置きないようにwhileは使わないようにしているのですが、for文でも事件はおこるという例になります。

## 対策

これの対策としては下記の2点が考えられます

- バッチ処理中のログを出力するようにして状況を把握できるようにする
- コードレビューをちゃんとする

### バッチ処理中のログを出力するようにして状況を把握できるようにする

これに関してはbatch.commit()する段階で今何回目のコミットなのかを出力するように変更しました。
これによりバッチの進捗も把握できるようになったので無限ループにも気づきやすくなったと思います。

### コードレビューをちゃんとする

こちらのサービスはバックエンドは私一人なのでレビューできる人がいないため対策としては打つことができないのですが、もしチームで開発しているなら当たり前ですがちゃんとコードレビューをするようにしましょう。

## おまけ対策

根本的な原因の対策ではないのですが、最初にデータを取ってくるここの処理について、実は改善ができます。

```ts
const snapshots = await hogeCollection.get()
```

実はこれをするとRDBでいう`select * from hoge`をしているようなもので、全データ転送しているので転送コストがかかってしまっています。
なので、下記実装にしてあげると必要なフィールドしかとってこないのでデータ転送節約になります。

```ts
const snapshots = await hogeCollection.select('hoge').get()
```

## まとめ

バッチ処理をするときは進捗が見えるようにして異常がないかをかならず見守るようにしましょう！

最後に、[ワンナイト人狼オンライン](https://online.1nite-jinro.com/link/blog)というゲームを作ってます！よかったら遊んでね！

https://online.1nite-jinro.com/link/blog

他にも[Camecon](https://camecon.me/)や[Offcha](https://offcha.com/)といったサービスも作ってるのでよかったら使ってね！

https://camecon.me/

https://offcha.com/

また、チームビルディングや技術顧問、Firebaseの設計やアドバイスといったお話も受け付けてますので御用の方は弊社までお問い合わせください。

https://virapture.com/
PythonのSeleniumでファイルアップロードする方法

```python:ファイルアップロード
# 要素取得
file_upload = driver.find_element_by_xpath('アップロードボタン要素のxpath')

# パス入力
file_upload.send_keys('ファイルパス')
```
これでファイルがセットされます。「アップロードボタンをクリックするのではなく、パスを入力する」ところがポイントです。
多人数同時編集の出来るお絵描きチャット"えんぴつチャット"でのUndo/Redoの実装について詳細

![スクリーンショット 2021-10-06 095141.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497826/e99c9310-d4f3-c922-68b5-3783d18b440c.png)
https://minordaimyo.net/pencilchat/
#基本事項
描画の履歴情報は、描線1本ごとに持つ

#履歴情報の詳細
描線一つに付き、以下の履歴情報を保持する。
・描画範囲(矩形)
・undo/redo用の、描画前のbmp画像(描画範囲の領域分だけ保持)
・描画開始時刻
・描画終了時刻
・undoを実行した際の時刻


#undo実行時の処理
描画開始時刻以降に、描画範囲と重なる別の描画が存在するかどうかを調べる。
(別の描画の時刻は、描画終了時刻を比較対象とする)
存在しなければundo実行。
undo実行時刻を記録する。


#redo実行時の処理
undo実行時刻以降に、描画範囲と重なる別の描画が存在するかどうかを調べる。
(別の描画の時刻は、描画終了時刻とundo実行時刻の内、新しい方を比較対象とする)
存在しなければredo実行。
undo実行時刻をクリアする

#その他
履歴情報の数が上限に達した場合の処理も必要。
上限に達して一番古い履歴情報を削除する際には、描画範囲矩形と描画終了時刻を別途保持する必要がある。

現時点での"えんぴつチャット"では、履歴は一人当たり最大32段までにしてある。
最大参加人数は8人なので合計256段。
これくらいなら衝突チェックも総当たりで十分行ける。
【JavaScript】スコープの学習の振り返り③　クロージャー


#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/58838204ff058eb9abc8

#目的

* スコープについての理解を深める


#本題
###1.クロージャー

クロージャーとは**レキシカルスコープの変数を関数が使用している状態**のこと

####クロージャーを使った実装
#####A.プライベート変数

ここではincrementを使って数字が１つずつカウントアップされていく仕組みを作ります。

````javascript
// 数字を1,2,3と増やしていきたい
increment();
increment();
increment();

// 関数でincrementを定義
function increment(){
  let num = 0;
  // 変数numが１ずつ増えていく
  num = num + 1;
  console.log(num);
}
// この場合１が３回呼ばれる
````

関数が呼ばれるたびにnum = 0で初期化するのではなく、
グローバルコンテキストが呼ばれる前に初期化すれば、
カウントアップの仕組みが作れる

```javascript
// グローバルコンテキストが呼ばれる前に初期化
// １度だけ呼ばれる
let num = 0;

// 数字を1,2,3と増やしていきたい
increment();
increment();
increment();

// 関数でincrementを定義
function increment(){
  // 変数numが１ずつ増えていく（省略形）
  // num変数に１ずつ代入されていく
  num += 1;
  console.log(num);
}
```

しかし、このままだと
incrementという関数を通さずにnumの値を変更できてしまうという問題が発生します。

````javascript
let num = 0;

increment();
increment();
increment();

function increment(){
  num += 1;
  console.log(num);
}
// 例えば関数を呼び出した後に再度同じ値で関数を再定義すると初期化されて、また1から呼び出されていく
num = 0
increment();
````

ここで使用するのがプライベート関数

````javascript
// 関数名をincrementFactoryに変更
// Factoryというのは何かを生成する場合につける変数名
// ここではincrementという値を作成するFactoryとして命名
function incrementFactory(){
  // グローバルコンテキスト前で宣言していた変数numをincrementFactory内に格納
  // このようにすることでincrementの外部に変数を探しに行く仕組みができました（これがクロージャー？）
  let num = 0;
  // 更にその中にincrementを定義
  function increment(){
    //  変数宣言と値も移動
    num += 1;
    console.log(num);
  }
  // returnを設定することで呼び出しもとをincrementFactoryに返却します
  // JSでは関数自体も返却可能
  return increment;
}

// 変数incrementはincrementFactoryを実行する
// かっこ（）が実行を意味する
// numの初期化はincrementFactoryを実行したときのみ初期化される
const increment = incrementFactory();
// ここで関数を実行するとカウントアップしていく
increment();
increment();
increment();
increment();
increment();

// 上記のように定義することでnumという宣言はincrementFactoryの中でしか呼び出せない
// console.log(num)とここで呼び出してもエラーになる
````

#####B.動的な関数の生成

`````javascript

// 関数addNumberFactory内に更に関数addNumberを定義
// 更にそれぞれに引数num,valをもたせる
function addNumberFactory(num){
  function addNumber(value){
    // 戻り値の作成
    return num + value;
  }
  // addNumberFactoyにaddNumberを返す
  return addNumber;
}

// add5変数にnumに５を代入した関数addNumberFactoryを定義
const add5 = addNumberFactory(5);
// 更にその値を変数resultに引数valを10にして代入
// 変数numに5が設定されている + value10を渡すので15と出力される
const result = add5(10);
// このようにすると15と出力される
console.log(result);

// このように渡す値によって生成される関数が変わってくる
`````

今日はここまで！

#参考にさせて頂いた記事

* [【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)
AWSのバージニア北部リージョン(us-east-1)の料金が一番低いとは限らない説

**AWSのバージニア北部リージョン(us-east-1)の料金が一番低い**という通説が本当なのか検証してみました。

## はじめに
AWS を利用していると料金のことを気にするタイミングがあります。
最初の設計、利用を初めてから、請求がきたとき、ふと気がついたとき、料金アラートがきたとき、などなど。
世の中の通説やエンジニアとの会話で出てきたものとして、料金だけで見たらバージニア北部リージョンが最低料金だから、特に制約がなければ、バージニア北部リージョン含む3リージョン(オレゴン、オハイオ)を選択しておけばよいと。

ただ、果たしてそれは本当なのか、疑問に思ったので**AWSのバージニア北部リージョン(us-east-1)の料金が一番低いとは限らない説**を検証してみました。

## 結論
AWSのバージニア北リージョン(us-east-1)の料金が一番低くならないサービスがいくつかありました。
ただ、その場合でも料金が一番低いリージョンとの差は非常に少なく、一部の料金カテゴリにおいてのみ別のリージョンが最低価格となっていました。結論としてバージニア北リージョンはほぼ一番低料金といってよいと思います。(検証したサービス内での結論)

## 検証方法
AWS の料金表はリージョン間の比較にはあまり特化してない印象です。
ですが、さすが AWS、API を提供しています。
こちらの[AWS Price List API](https://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/price-changes.html) を利用して、同料金カテゴリに対して各リージョンの価格を比較しました。

以下のサービスを対象に調査しました。

- AlexaTopSites 
- ApiGateway
- Athena
- Budgets 
- Chime 
- CloudMap 
- CloudTrail 
- CodeArtifact
- CodeBuild 
- CodePipeline 
- Cognito
- comprehendmedical 
- Connect 
- DeepRacer 
- DevOpsGuru 
- ElementalMediaTailor
- FSx 
- Honeycode 
- Inspector 
- Kinesis
- KinesisAnalytics
- KinesisFirehose
- KinesisVideo
- Lambda
- Lex 
- Lightsail
- Macie
- Neptune 
- NetworkFirewall 
- NimbleStudio 
- Pinpoint 
- RoboMaker
- Shield 
- StepFunctions 
- StorageGateway
- Sumerian 
- SupportBusiness 
- SupportEnterprise 
- VPC 
- WAM 
- WorkSpaces 
- DAX
- ECR 
- ECS
- EFS
- EKS
- Amazon EventBridge
- SES 
- CloudFront
- CloudFormation 
- CloudSearch
- CloudWatch 
- DynamoDB 
- ElastiCache 
- ELB 
- MQ
- Glacier
- S3 
- SQS
- XRay 

## 結果

以下のサービスにて、バジ北が一番安くないパターンがあることを確認しました。(2021/10/5時点)

- CodeBuild
- FSx
- Neptune
- NimbleStudio
- StepFunctions
- VPC
- WorkSpaces
- CloudWatch
- DynamoDB
- ElastiCache
- ELB
- S3

例えば、ELB の場合、[NLB](https://aws.amazon.com/jp/elasticloadbalancing/pricing/) の NLCU 時間あたりの料金にて、欧州(ストックホルム) が 0.0057 USD に対して、米国東部(バージニア北部) は 0.006 USD でした。(ストックホルム善戦してます。

## 詳しい値での比較について

[Diff AWS Pricing](https://diffawspricing.ramencode.com/)にてサービスごとの各カテゴリのリージョンでの料金比較を公開しています。
pythonのポインタ渡しを理解する話

#TL;DR
代入をするときポインタが渡される
constな値を代入した際にもその値のポインタが渡される

#Pythonでもある意味厄介なポインタ
C言語にもあるポインタの概念、こいつの仕様を理解しようと色々悪戦苦闘したのはなつかしいです（今でも理解できていない節がありますが）。その後Pythonでもポインタを使いたいと思い調べたら言語特有の省略主義的なものゆえか頭が完全にバグったのでまとめておきたいと思います。
（上記の通りポインタに対して完全な理解をしたわけではないので終始誤っていることを記述する可能性がありますが、ご了承ください。また以下のコードはすべてインタプリンタ上で動かしています）

#実行環境　
python: Python 3.9.0
OS: Windows 10

#変数同士の代入

```python:
a=3
id(a) #1392940902768
b=9
id(b) #1392940902960
b=a
id(b) #1392940902768
```

id関数は引数のアドレスを返してくれます。上記のような単純な代入ではそこいらでも言われている通りちゃんとポインタ渡しになっています。

#値の代入
```python:続き
a=7
print(b) #9
id(a) #1392940902896
```

おかしくなっていくのはその後です。変数a,bは同じアドレスを共有しているので当然aに値を代入されれば同じようにしてbにも反映されるはずです。
ですが実際はそうはならず、さらにaのアドレスが変わってしまいました。C言語で似たようなことをすればそうはならないので混乱してしまいました。ただその後にふと確かめてみたことがあります。

#値のアドレス
```python:続き
id(7) #1392940902896
```

どうやら値自身にもアドレスが設定されているようです、constな変数ということでしょうか。
このことからpythonにはそもそも値渡しが存在しない、もしくは明記しないといけないのではないか？という可能性に至りました。

```python:constなintのアドレスを検証
for i in range(20):
  print(i,end=":")
  print(id(i)-id(0))
```
```(検証):結果
0:0
1:32
2:64
3:96
4:128
5:160
6:192
7:224
8:256
9:288
10:320
11:352
12:384
13:416
14:448
15:480
16:512
17:544
18:576
19:608
```

値にはそれぞれアドレスが設定されており、一定の周期性を持つことがわかります。
よって前処理の段階であらかじめアドレスが設定されていることがわかります。

#listで回避してみる
```python
a=[1,2,3]
id(a) #2960827260992
b=a
id(b) #2960827260992
a[0]=9
b #[9,2,3]
id(a) #2960827260992
```
このようにすればC言語みたいなポインタの使い方ができます。（任意のアドレス上にあるオブジェクトに格納されているオブジェクトのアドレスを変更しているということになるのでしょうか）
ただlistを前提とした運用ならともかく、上記のようにintで収まる範囲ならかなり違和感を覚えます。（もっといい書き方があると思いたい）

#値渡しをしてみる
```python
import copy
a=3
id(a) #1392940902768
b=copy.deepcopy(a)
id(a) #1392940902768
id(b) #1392940902768
```
だめでした。（一つの変数が二つのアドレスを持つことになるので当然といえば当然ですが）

#toDO
・python[リファレンス]("https://docs.python.org/ja/3/reference/datamodel.html")を確認する
>確認しました。その結果上記のことは実装に依存する、というとんでもないことが書かれていたので後日追加の 検証をしてみたいと思います。探してくれた友人に感謝を。
datasetのUpsert

# DataFrameのto_sql()を使っていたが、Upsertを簡単に行いたかったので、datasetに変更した

Pandas.DataFrame.to_sql()には現在Upsertが備わっていない(PRはある)ので、簡単にUpsertするために、datasetに変更。
参考: [PandasのSql Upsertを試してみた](https://qiita.com/s2hap/items/b329ce4f9d6c229382ff)


CSV操作がかなり入るので、Upsert直前までは、DataFrameを使いたい。

### DataFrame.to_sql() → dataset.upsert_many()に変更

参考: [dataset documentation](https://dataset.readthedocs.io/en/latest/api.html)
bulkのupsertがありそうだったので、以下を利用したいと思いました。
`upsert_many(rows,id)`
upsert_manyの中身は、upsert()が呼ばれている。


### 以下をドキュメントから読み取るのに少し手間取ったのでメモ

* rows:dict型
* id:配列

### DataFrameからupsert_manyに渡すdictをどのように作るか悩んだのでメモ
Seriesで取り出してto_dictで一行一行upsertするのかな？などと思ったが、

`DataFrame.to_dict(orient = 'records')`

でDataFrameをレコードっぽくdictにしてくれたので、以下で一括Upsertが完了

```
records = df.to_dict(orient = 'recods')
upsert_many(records,['key1','key2'])
```

DataFrame理解度の問題でした。。。
HTMLタグ指定

HTMLのタグで指定できるもの 15項目
・文書情報・構造
・テキストの表現
・テキストの意味
・リンク・画像・動画・埋め込み
・表・レイアウト
・フレーム
・レイヤー
・入力フォーム
・リスト
・スクリプト
・スタイルシート
・範囲指定
・コメント
・ソースの表示

HTMLで表現できるもの
/ ドキュメントタイプ宣言 HTMl文書宣言 ヘッダ情報 文章に関するメタ情報 
/ フォントのテキストのサイズ 下線 色 
/ テキスト 強調 種類の明示
/ リンク 画像に複数リンクの貼り付け 相対パスの基準URIを指定 リンクに関連する文章ファイルを指定
/ 画像 プラグインデータ 文書にデータを埋め込む
/ テーブル 表作成 横罫線
/ フレーム レイヤー
/ 入力フォーム リスト スクリプトの挿入 スタイルシート
/ 範囲指定 コメント ソースの表示
Typscriptについて簡易まとめ

    Typescript {
      ・型定義できるJS
      ・JSの上位互換。
      ・インターフェース、クラスが使える
      ・null/undefined safeにできる
      ・型定義ファイルがあれば外部ライブラリも形を利用できる
      ・ジェネリック使える

      記述したコードをコンパイルするとJSのコードに変換するため、JSとはライブラリ群を含め100%互換性を持っている。
      メリット {
        コードが短く読みやすい
        JSとの互換性が高い
        エラー防止
        動作が早い
      }
React + React Router から Next.js への移行で詰まるポイントメモ

# Next.js 便利だけど、罠多し

React + React Router の構成に慣れている人が Next.js 触ると、特に routing 周りで「え...」となることが多い。

どこで困ったか、メモしておく。

---

- URL パラメータの値が最初のレンダリング時に `undefined` になる

普通に辛い。
`pages/detail/[id]/index.tsx` のようなページにおいて、`id` の値を取得しようとすると、最初のレンダリング時には `undefined` になるので、そのための処理を書いておかないといけない。

まぁ、なんか最適化のために犠牲になった側面なのだろう。。理解はできるが...

https://github.com/vercel/next.js/discussions/11484

別の Qitta 記事もあったので、ご参考に。

https://qiita.com/hourglasshoro/items/f105e31149d103cf0597

---

- `history.state` が使えない

[公式のドキュメント](https://nextjs.org/docs/api-reference/next/router)を見る感じ、サポートがない。これに関しては、hack（URL に露出させずに query として渡す方法）を見つけたので、別で記事にしたい。

https://github.com/vercel/next.js/discussions/15048

---

また出てきたら追記する。
Slack Reacji Channeler の使い方

# Reacji Channeler とは
特定のリアクションが付けられた投稿を別チャンネルに転送してくれる Slack App。

公式ページ左上に Build by Slack って書いてあるのでおそらく Slack 純正の App。
同じようなことは Slack のワークフロー機能からもできるが、こちらはより簡単にできる。

# 準備
1. [Reacji Channeler 公式ページ](https://reacji-channeler.builtbyslack.com/) から [Add to Slack] ボタンを押す。
2. 追加先のワークスペースを選択し、許可または管理者へ申請をする。
3. ショートカットに Reacji Channeler が表示されていれば追加完了。
![Slack___times-homeru-beta___VisasQ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114828/f2a3aa10-1788-8a3b-33ec-9bc9a7fd3e39.png)

# 使い方
## 1. ルール追加
`/reacji-channeler :絵文字名: #チャンネル名` のように入力する。
このルールは全ての公開チャンネルに適用されるので、どのチャンネルでやっても大丈夫。
![スクリーンショット 2021-10-06 8.10.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114828/2fdae607-f3e1-6537-a23e-1b49e9503de9.png)



## 2. 登録済みルールの確認
`/reacji-channeler list` で登録済みのルール一覧が確認できる。
![Slack___times-homeru-beta___VisasQ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114828/3ad60227-3e2b-d2c9-2f4f-abb0935e7686.png)

## 3. ルール削除
`/reacji-channeler remove :絵文字名:` で登録済みのルールを削除できる。
※公式ページなどに載っていなかったのですが、記載のあるページを見つけた方がいたら教えて下さい。

![スクリーンショット 2021-10-06 8.20.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114828/6a2cbe93-5f69-7e55-d79e-09a0d0245511.png)

# 補足
## チャンネル名は後から変更しても大丈夫
登録済みのルールで使っているチャンネルはちゃんとIDで管理されているので、後からチャンネル名を変えても問題なく動く。

## ちょうどよい絵文字がないときはジェネレーターを使うと便利
https://emoji-gen.ninja/ などの Slack 用の絵文字ジェネレーターを使うと便利

# 活用例
- 褒める絵文字が付いた投稿を集めて癒やされる
- ペットや赤ちゃんの絵文字が付いた投稿を集めて癒やされる
- ブログネタになりそうな投稿を集めてネタ帳にする
- 個人的に気になった投稿を集めて自分の times チャンネルに集めておく
RalisのMVCモデルを分かりやすくどう説明するか

##はじめに

どうも、未経験からエンジニア転職を目指しているもきおです。

これは当時プログラミングスクール卒業したての頃、エンジニア採用面接でのお話

**面接官**「えーそれではMVCモデルを説明してもらえますか？」
**もきお**（はい、来たその質問。）「モデル,ビュー,コントローラーの略で情報処理をこれら3つで分割して行うモデルのことです。コントローラーが情報を受け取り、DBとの連携が必要な場合はモデルとやりとりを行います。その後、必要な情報をビューに表示させるという流れです」（よし、ちゃんと言えた。ドヤっ）
**面接官**　「えーじゃあMVCモデルをここにいるIT知識の乏しい人事の方にもわかるように説明してみてもらえますか？」
**もきお**（おっと、その展開は聞いてない。）

こんな感じでその企業からは内定はいただけたのですがMVCモデルをIT知識があまりない方に対しても分かりやすく伝える事ができず、悔しい思いをしました。

ここで今回はMVCモデルを分かりやすく伝えるためにはどうすれば良いか考えていきたいと思います。

##MVCそれぞれの役割
まず改めてMVCそれぞれの役割を復習したいと思います。

###・Model
データベースに対して、データの登録や取得、更新、削除などの処理を行う部分。
データベースのデータが必要になる際に機能する箇所
###・View
PCの画面（ユーザインタフェース）に関わる部分。ブラウザに表示させるHTMLを実際に組み立てる。画面上で入力された情報を受け取り、コントローラーに情報を受け渡す部分でもある。
###・Controller
モデルやビューを統合的に制御する部分。ユーザーからのリクエストを受けて、Modelと連携したり、どの画面（View）を表示するのかといったことを制御する。言わば司令塔のようなもの？

![MVC.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1089852/93e6a7a0-8a82-f0b4-3c71-cab20b5216c2.png)

図1:MVCモデル図　下記リンクより引用

https://qiita.com/s_emoto/items/975cc38a3e0de462966a

基本Controllerを介してModelを参照しViewへ返す流れですが、直接ViewからModelを参照した方が良くない？ということで図ではViewがModelを参照しており、そのことをPull-MVCと言われるのらしいです。

しかし、Pull-MVCを素朴に実装しようとしたら、ブラウザから頻繁に問い合わせをかける必要があります。よって他にもデメリットはありますがあまりPull-MVCは使われないみたいです。

下記リンク参照

https://qiita.com/tshinsay/items/5b1724baf32b8b5113c2

##さて、分かりやすい説明を考えてみる

基本的にはブラウザからWEBアプリケーションにアクセスし画面に表示されるまでの流れをMVCを使用して説明するのが分かりやすく説明できるのかなと思います。

ブラウザからWEBアプリケーションにアクセスしようとするとControllerへリクエストが送られます。表示するページに必要なデータがある場合、Modelへデータベースのからデータを取ってくるようControllerが指示し、場合によりデータのやりとりを行います。次にControllerはViewへ表示するページのViewファイルを探しにいき、それをブラウザへ返しアクセスしたページを参照できるという流れです。

うーん分かりやすく説明できていない気がする。笑

もっと例えるとYahooのトップページが見たくてYahooのトップページにアクセスしようとするとControllerがトップページのデータをModelを介して取ってきた後にViewファイルからトップページのViewを探し、それをアクセスしたユーザーの画面に表示するって感じ？

分かりやすく説明するのって難しいですね。

##MVCモデルでアプリケーションを作成しないとどうなる？
ところでMVCモデルでそれぞれ役割を分けて作成しないとどのようなデメリットがあるのでしょうか？

**・一つのプログラムに全ての処理を記載してしまう可能性がある**
**・機能追加の際、変更箇所を探すのが大変になる**

役割を分担しないので画面上でデータを受け取る処理、データベースを操作する処理、データベースから受け取ったデータを画面に表示させる処理などを全て一つのプログラムファイルの中に記載することになり、チームで開発する際に開発を分担するのも難しくなるし、プログラム変更があった場合に変更箇所が特定するのが難しくなってしまいます。

##あとがき
今回はMVCモデルを分かりやすくどう説明するかについて考えてみました。
まだまだ納得のいくような説明ができませんでしたがMVCモデルについて理解を深められたので良かったです。

また、より理解を深めてから記事にしてみたいと思います。
【Vue.js】ボタンクリックで画面遷移させる

#はじめに
こんにちは。
こちらの記事では、ボタンクリックでページ遷移を行う方法を記しています。
誤っている点や不足点等ございましたらコメントいただけると幸いです。

##前提

* VueCLIまたはNuxtで新規プロジェクトの作成が既にお済みの方
* 単一ファイルコンポーネントで記述する
* 動作確認は`npm run serve`または`npm run dev`のローカル環境で行っている

##対象者

* Vue.jsやNuxt.jsを学習中の方
* templateの`router-link`や`nuxt-link`ではなく、JavaScript側でページ遷移の処理を行いたい方
* できる限りシンプルな記述で実装したい方


##実装手順
ボタンをクリックした際にイベントが発火し、ページ遷移する実装を記述します。
 `this.$router.push('/')`に任意のパスを指定することができます。

```html:template
<button v-on:click="home">ホームへ</button>
```

```javascript:script
export default {
  methods: {
    home(){
      this.$router.push('/')
    }
  }
}
```

<br>

また、template側でも`router-link`や`nuxt-link`を使うことで簡単にページ遷移のリンクを生成することができます。

```html:Vue.js
<router-link to="/">ホームへ</router-link>
```
```html:Nuxt.js
<nuxt-link to="/">ホームへ</nuxt-link>
```

<br>

#おわりに
ここまでボタンクリックでページ遷移を行う方法についてまとめました。
template側でVue Routerのリンクを作成する方法はわかっていたのですが、ボタンクリックでJavaScriptの処理を実行したかったため、この方法で実装しました。
コードの可読性が下がるので、特に必要のないときはJavaScript側ではなくtemplate側にリンクを記述するのが好ましいと思いますが、必要なタイミングもあるかと思いますので、この記事を執筆しました。少しでも多くの方の参考になれば嬉しいです^^
以上、最後まで読んでいただきありがとうございました！
【python】関数の引数[py_02_20211004]



###はじめに
関数へ渡す引数について、いろいろあります。

###実行環境
pycharm　2021.2(python3.10)


###コード１
基本的な位置引数のデフォルト値設定の記述
（位置引数の場合、デフォルト値設定は設定しない位置引数の後でなければならない）

```python
def func(a,b=4):
    print('a:'+str(a))
    print('b:'+str(b))
func(1)
```

<font color="#56c502"><b>表示</b></font>

```
a:1
b:4
```

###コード２
キーワード引数はこんなカンジ。

```python
def func(a, b, c):
    print('a:'+str(a) + ' b:'+str(b)) + ' c:'+str(c))
func(b=2, c=3, a=1)
```

<font color="#56c502"><b>表示</b></font>

```
a:1 b:2 c:3
```

###コード３
引数にリストを利用する場合の注意点を記述しておきます。

```python
def func(a, results=[]):
    results.append(a)
    return results

print(func(1))
print(func(2))
```

<font color="#56c502"><b>表示</b></font>

```
[1]
[1, 2]
```
resultsは一回評価されてしまうので、単純にリストへの追加が実行されてしまう。これを防止するためには…

```python
def func(a, results=None):
    if results is None:
        results = []
    results.append(a)
    return results

print(func(1))
print(func(2))
```

<font color="#56c502"><b>表示</b></font>

```
[1]
[2]
```


###コード４
位置引数をタプルで受け取る。任意の数の引数を受け取るように指定することができる。

```python
def func(*args):
    print(args)

func()
func(1, 2, 3, 4)
```

<font color="#56c502"><b>表示</b></font>

```
()
(1, 2, 3, 4)
```

###コード５
キーワード引数を辞書で受け取る

```python
def func(**kwargs):
    print(kwargs)

func()
func(a=1, b=2, c=3, d=4)
```

<font color="#56c502"><b>表示</b></font>

```
{}
{'b': 2, 'd': 4, 'c': 3, 'a': 1}
```
便利ですね〜。
では、デフォルト引数との組み合わせ

```python
def func(a=0, **kwargs):
    print('a:', a)
    print('kwargs:', kwargs)

func()
func(a=1, b=2, c=3, d=4)
```

<font color="#56c502"><b>表示</b></font>

```
a: 0
kwargs: {}
a: 1
kwargs: {'c': 3, 'b': 2, 'd': 4}
```


今回はここまで。


###参考資料
[引数にデフォルト値を設定する](https://www.javadrive.jp/python/userfunc/index5.html)
【Spring】@Transactional関連メモ


#### ① ロールバックするタイミングは「非検査例外が発生したときのみ」
　　→ rollbackForプロパティで指定した検査例外はロールバック対象とすることができる

```
@Transactional(rollbackFor=Exception.class)
```

---
#### ② @Transactionalはpublicメソッドにつけた時のみロールバック有効

---
#### ③ @Transactionalを付けたpublicメソッドは別クラスからの呼び出し時のみロールバック有効

---
#### ④ 外部トランザクションが開始している場合はそのトランザクションを利用する
　　→ propagationプロパティで制御。デフォルト値(PROPAGATION_REQUIRED)が外部トランザクションをそのまま利用する設定となっている

---
#### ⑤ @Transactionalをつけなかった場合、トランザクションは発生しない？

##### 前提
・Spring Data JPAを利用している
・RepositoryクラスはCrudRepositoryインタフェースを継承している（↓みたいに）

```
@Repository
public interface HogeRepository extends CrudRepository<HogeEntity, String> 
```

##### 結論

・トランザクションは「Repositoryクラスのメソッド」に対して適用される。

##### 詳しく

・CrudRepositoryインタフェースのデフォルト実装は「SimpleJpaRepositoryクラス」であり、このSimpleJpaRepositoryクラスのCRUDメソッド(save/update/find/delete等)に@Transactinalがついている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653955/fa8c5268-19d4-8729-a184-e966b40b58b7.png)

※SimpleJpaRepositoryの公式ドキュメント
https://spring.pleiades.io/spring-data/jpa/docs/current/api/org/springframework/data/jpa/repository/support/SimpleJpaRepository.html
> CrudRepository インターフェースのデフォルト実装。これにより、プレーンな EntityManager よりも洗練されたインターフェースが提供されます。

---
### 参考
https://www.agent-grow.com/self20percent/2020/07/28/spring-boot-check-point-transaction/
メモ


備忘録
---

```

Option Explicit

Public Sub sample1()

    '1.起点ノードの物理IFのcsvファイルをユーザーが選択して→データを配列に格納
    MsgBox "起点となるノードの物理IF（csv）を選択してください"
    
    Dim stFile As String, stData As Variant
    
    Call fileSelection(stFile)
'    Debug.Print stFile

    Call getArray(stFile, stData)
'    Stop    '配列確認
    
    
    '2.リンクするノードの物理IFのcsvファイルをユーザーが選択→データを配列に格納
    MsgBox "紐づけしたいノードの物理IF（csv）を選択してください"
    
    Dim linkFile As String, linkData As Variant
    
    Call fileSelection(linkFile)
'    Debug.Print stFile
    
    Call getArray(linkFile, linkData)
'    Stop    '配列確認用

    Call checkMessage(stData(2, 5), linkData(2, 5))



End Sub

'ユーザーがcsvファイル選択→ファイルを変数に格納
Function fileSelection(ByRef selectFile As String)

    With Application.FileDialog(msoFileDialogFilePicker)

        .Filters.Clear   'フィルターのクリア
        .AllowMultiSelect = False   'ユーザーのファイル選択を１ファイルに限定
        .Filters.Add Description:="csvファイル", Extensions:="*.csv"   '選択ファイルの拡張子指定
         
        If Not .Show Then End  '選択されなかった場合、Sub終了
        
        selectFile = .SelectedItems(1)  '選択したファイルを変数に格納する

    End With

End Function

'csvファイルからデータを配列に格納
Function getArray(ByVal selectFile As String, ByRef data As Variant)
    
    Workbooks.Open (selectFile)
    data = ActiveWorkbook.Sheets(1).Cells(1, 1).CurrentRegion
    
    ActiveWorkbook.Close savechanges:=False

End Function

Function checkMessage(ByVal a As String, ByVal b As String)
    
    Dim msg As String
    msg = a & "起点の" & a & "-" & b & "の対応表で間違いないですか？"
    
    Dim rc As VbMsgBoxResult
    rc = MsgBox(msg, vbYesNo + vbQuestion)
    If rc = vbYes Then
        MsgBox "処理を続けます", vbInformation
    Else
        MsgBox "処理を中止します", vbCritical
        End
    End If
    
End Function

```
IBM Cloud Container Registryのリソースグループに紐づいていない名前空間を紐づける

# 目的

IBM Cloud Container Registry（ICR）はIBM Cloudのコンテナレジストリーサービスです。ICRの名前空間（jp.icr.io/xxxxのxxxx部分）はもともとIBM Cloud IAMのリソースグループとは関係のないものでしたが、現在は紐づけられて管理されるようになりました。しかしそれ以前に作成した名前空間は宙に浮いてしまっているので、それを新たに紐づけしてみます。

# 手順

## 状態の確認

実際にそのような状態になっている名前空間をコンソールから確認してみます。下図の場合、名前空間teruqはリソースグループteruzに紐づいていますが、名前空間teruzは表示が``--``になっており、紐づきがない状態です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241424/77cc2ce3-3d2c-b661-6a91-eac4958da2a9.png)

## リソースグループへの割り当て

変更はCLIで行います。

```
$ ibmcloud cr namespace-assign
失敗
誤った使用法

名前:
namespace-assign - 宛先のリソース・グループに現在割り当てられていない名前空間を割り当てます。

使用法:
   ibmcloud cr namespace-assign [-g (RESOURCE_GROUP_NAME | RESOURCE_GROUP_ID)] NAMESPACE
NAMESPACE は、宛先のリソース・グループに割り当てる名前空間の名前です。

オプション:
   -g value  オプション: 名前空間を割り当てるリソース・グループの名前または ID を指定します。
```

それでは実行してみます。

```
$ ibmcloud cr namespace-assign -g teruz teruz

レジストリー jp.icr.io のアカウント Cloud Enterprise Development 用のリソース・グループ「teruz」に、名前空間「teruz」を割り当て中...

名前空間「teruz」がリソース・グループ「teruz」に正常に割り当てられました。

OK
```

## 確認

コンソールで確認すると、無事リソースグループが割り当てられました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241424/b5487acb-c0e3-d69d-6b88-ad9a222365f1.png)
ちょっとした JavaScript 確認コードのための下敷きコード

ちょっとした JavaScript 確認コードのための下敷きコードをここにメモ。
JavaScript を .js ファイルに記入して、.htmlファイルを Webブラウザで開くことにより実行できます。

### simplejs.js

```js
// Simple JavaScript
console.log('Hello JavaScript World.');
document.write("<p>Hello JavaScript world</p>");
```

### simplejs.html

```html
<!DOCTYPE html>
<html lang="en">
<!-- HTML for Simple JavaScript -->
<head>
    <title>Simple JavaScript Sample</title>
    <meta charset="UTF-8">
</head>
<body>
    <script src="./simplejs.js" charset="UTF-8"></script>
</body>
</html>
```
論文まとめ：Visual Localisation and Individual Identification of Holstein Friesian Cattle via Deep Learning

# ICCV2017より以下の論文
[1] W. Andrew, et. al. "Visual Localisation and Individual Identification of Holstein Friesian Cattle via Deep Learning"ICCV2017
のまとめ

CVF open access:
https://openaccess.thecvf.com/content_ICCV_2017_workshops/w41/html/Andrew_Visual_Localisation_and_ICCV_2017_paper.html

FriesianCattle2017 dataset:
https://data.bris.ac.uk/data/dataset/2yizcfbkuv4352pzc32n54371r

AerialCattle2017 dataset:
https://data.bris.ac.uk/data/dataset/2yizcfbkuv4352pzc32n54371r

いずれのdatasetもフリーで入手できる

# 概要
- ホルスタインの体の模様から個体識別を行う一連のシステムを提案している
- Deep Learningを同タスクに用いた最初の論文と主張
- 動画の各フレームに対してFaster-RCNN等でdetectionし、KCF trackerでトラッキングする。このシーケンスをInception-v3で特徴量化し、LSTMで回す

以下は detection、localization 部分の推論例。

![holstein_ID_img02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116706/93c5cf5e-398b-e415-69af-b2bb6d503a0e.png)


# システムの全体像
以下の図のような、ありがちなシステム。上側は単一フレームのみから個体認証するパターンで、detectionモデルのclassを個体数＋backgraoundにする。

下側は動画のシーケンスを利用する手法。（前述）

![holstein_ID_img00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116706/fb8f1e26-76f3-67d4-b1a8-1ea7537dd21b.png)

# これまでのホルスタインの個体認証に関して
ホルスタインを生体情報から個体認証する手法として、主に以下の３つが提案されている。

- 鼻あたりの模様から識別する手法
- 虹彩や顔、体から識別する手法
- 体の白黒模様から識別する手法

しかし現状の現場では生体情報以外の

- 耳タグ

が使われる場合が多い。

## 体の白黒模様から個体識別する従来手法
従来は

- PCA＋SIFT（かなり初期）
- Affine SIFT＋RBF-SVM

など用いられた。後者はかなり計算コストが高い。

# データセット
以下２つのデータセットを利用した

- FriesianCattle2017 dataset
- AerialCattle2017 dataset

## FriesianCattle2017 dataset
以下のような牛舎において上部から撮影したもの

![holstein_ID_img041.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116706/1aa4be76-1f80-4dd5-b7ef-fec6f0f9761c.png)

- 940枚のRGB画像
- 89頭の個体
- 2fps
- FriesianCattle2015 datasetを改良したもの？？

## AerialCattle2017 dataset
以下のような野外においてドローン等を利用して上部から撮影したもの

![holstein_ID_img042.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116706/cc389d5f-b205-0394-5490-73865d3df641.png)

- 34の群れ
- 160のシーン
- 23の個体

# 実験と結果
## detection, localizationの精度
dataを２つに分けてクロス・バリデーションした。（fold1, fold2）
mAPは以下。

![holstein_ID_img07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116706/b66897fd-11f0-17ae-26c7-58ad3db96b1b.png)


またrecall-precision curveは以下。

![holstein_ID_img06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116706/6233f380-87fb-20ae-edf9-2bca3e4b5ba7.png)

まぁ、こんなもんでしょう。

## 単フレームで個体識別した場合の精度
上記の単一フレームから個体識別するパターンの精度は以下。detectionモデルのみなのでmAPで評価。

![holstein_ID_img09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116706/1391b406-f35e-8e3a-a70f-1d0762efbf46.png)

## 複数フレーム（ビデオから）で個体識別した場合の精度
上記のLSTM等使うパターンの個体識別精度。

![holstein_ID_img12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116706/f726f2d7-55d1-91f8-d829-a54eef47ef0c.png)
DDD（ドメイン駆動設計）の勉強＆実践記録（一）

### このシリーズを作成する背景について
　自分がアーキテクチャーに興味を持つ、社内でDDD（ドメイン駆動設計）という単語を聞きましたので、調べていくとますますいい設計だと思い、自分なりの理解を記事にしたく、このシリーズを書くことにしました。
　あくまで個人の理解で、間違う部分もあると思いますが、勉強したことを忘れないように記録していきたいと考えています。

### このシリーズの内容について
　・DDD（ドメイン駆動設計）に関連する概念の説明
　・実際DDD（ドメイン駆動設計）を使用し、サンプル用のシステムを開発していく
　・仕様変更＆機能追加する際、DDD（ドメイン駆動設計）の優位性を説明
　・サンプルシステムを開発した際のソース　
　　　　※GitHubにアップロードする予定

**では早速本題に入りたいと思います。**
### 大規模システム移行における課題
#### ・システム品質悪い、保守コスト膨大
　　企業の業務が大きくなればなるほど、仕様変更と機能追加が行われ、その際にスピードかつ低コストで要件が実現させたいですが、アーキテクチャーと各クラスの依存関係を考えずに実装されているため、各クラスが密結合になり、小さな仕様変更でも、修正するクラスが多くなります。さらに関連ドキュメントも古くなり、保守に膨大がコストが必要。
　　※最悪全システムをリファクタリングすることになる

#### ・発生する根本原因＆自分の所感
　　企業が成長するために事業拡大は必然で、初回システムを開発する際は品質はいいものの、仕様変更と機能追加すればするほど品質落ちてしまいます。お客様の要望で開発しているシステムは我々システムエンジニア（SE）としては一つのプロジェクトかもしれませんが、お客様にとっては企業を支えるプロダクトです。
　　なので、プロダクトとして、開発しているシステムの未来性を見込み、今後のためにいかに低コストかつ高品質でシステム再構築するか、IT技術を持つSEが責任をもって提案するべきだと考えています。
　　そして、DDD（ドメイン駆動設計）がそれを解決するための道しるべとして挙げられます。

### DDD（ドメイン駆動設計）の概要
#### ・DDDとは？
　概要：　**システムを設計する際の設計手法**
　良い点：　
　　　・開発時：業務分析したうえでモデリング手法（UML）で可視化することで、要件定義の際にお客様と合意を取りやすくなる、また、それをベースに詳細設計を行うことで、開発者に対してもシステムを理解したうえでの開発が可能で、品質が高くなる。
　　　・システム改修時：既存モデルを更新し、業務を実現する際に低コストかつ高品質で改修できる。

#### ・DDDを実践する際の流れ
　　⓪**（システム改修時のみ）**既存システムのモデル資料を受領
　　①顧客の要件定義を聞き出す。
　　②ドメインモデリング（ドメイン、サブドメイン、コンテキストを設計）
　　　※顧客と要件を用意するために、①②を繰り返す
　　③マイクロサービス設計（単一責任原則）
　　④ドメインモデルによるシステムモデリング（オブジェクト指向OOA/D、デザインパターン）
　　⑤ドメインモデルによるデータベースモデリング（エンティティ、値オブジェクト、集約を考慮）
　　⑥システムアーキテクチャー設計
　　　※**（システム規模が大きい場合）**Middle Platform（中国語では「中台」）を考慮する　
　　⑦各モデルをもとに開発を行う
　　⑧CI/CDによるビルド、テスト、デプロイを自動化


#### ・DDDが求められる能力
　　・業務モデリング（単一責任の原則を準拠、かつ現実視点で客観的に業務を分析して分割）
　　・オブジェクト指向（設計時には開放/閉鎖原則を準拠）
　　・デザインパターン（Decorator パターン、Factory Method パターン）
　　　　※貧血モデル と　充血モデルを考慮して設計
　　　　**↑**日本語でどう言うか分からないため、まずこのように翻訳します。
　　・システム設計（クラス図、ユースケース図、シーケンス図などのUMLの設計）
　　・データベースモデリング（NoSQLが推奨される）
　　・マイクロサービス（Spring cloudなど）
　　・システム(docker、k8s)、データベース（負荷分散）の高信頼・高性能設計
　　・アジャイル開発
　　・クラウド技術（AWS）
　　・CI/CD技術

#### ・まとめ
　　以上、自分の理解でドメイン駆動設計についての概要、実践する際の流れと必要な能力をまとめました。
Base64.getUrlEncoderとBase64エンコード＋URLエンコードは違う

## はじめに

Webシステム間で文字列をやり取りする際に、URLクエリストリングで受け渡すことにした。
その際に、受け渡し文字列を暗号化＋エンコードする以下のような設計を行った。

インタフェース項目全体を1～3の順序で暗号化とエンコードを行う
1.　AESで暗号化
2.　Base64エンコード
3.　URLエンコード

自分たちのシステムは1～3の処理がされた文字列を受け取って、デコードと複合を行う側だった。

## 発生した問題

システムテストの段階で暗号化＋エンコードされた文字列を受け取ったが、デコード＋複合の処理が上手くいかなかった。
具体的には、デコードで失敗していた。


## 問題発生時の実装内容

先方は、エンコード仕様の2.と3.を以下の処理で実装していた。


```Java
Base64.getUrlEncoder().withoutPadding().encodeToString(文字列)
```
これで出てきた文字列を受け取っていたが、当方のデコードではうまく処理できなかった。

暗号化やエンコード処理の知識も大してなく、Javaの具体的な言語仕様を把握していなかったが、メソッド名を見る限りなんとなく処理内容に違和感はない。
気になったのは　`withoutPadding()`　部分くらいだった。

先方のシステムはjavaで実装しており、自分たちのシステムはC#で実装していたため、
言語間でエンコードのルールに差異があるのだろうかと悩んだ。

そこで、いろいろなサイトをあさって調査してみた。


## Base64エンコードとは

Base64エンコードは、Wikipediaに以下の記載がある。
>Base64は、データを64種類の印字可能な英数字のみを用いて、それ以外の文字を扱うことの出来ない通信環境にてマルチバイト文字やバイナリデータを扱うためのエンコード方式である。

https://ja.wikipedia.org/wiki/Base64


通常のBase64エンコードでは、A–Z, a–z, 0–9 までの62文字と、記号2つ (+, /)、さらにパディング（余った部分を詰める）のための記号として = が用いられる。

また、Base64の変形版として、URLで特別な意味を持ってしまう記号2つ (+, /) の代わりに (-, _) を使ってBase64エンコードを行うものがある。（Base64URLエンコード）

JavaにおけるBase64.getUrlEncoderは、後者のBase64URLエンコードを行うようである。

## URLエンコードとは

URLエンコードは、Wikipediaではパーセントエンコーディングのページに以下の説明がある。

>パーセントエンコーディング (英: percent-encoding)とは、URIにおいて使用できない文字を使う際に行われるエンコード（一種のエスケープ）の名称である。一般にURLエンコードとも称される。「%」を使用していることから、この名称で呼ばれている。

https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%BC%E3%82%BB%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0

エンコードが必要な特殊文字は、以下の説明を見つけた。

>エンコードが必要な特殊文字は、':', '/', '?', '#', '[', ']', '@', '!', '$', '&', "'", '(', ')', '*', '+', ',', ';', '='、および '%' 自体です。他の文字もエンコードできますが、エンコードする必要はありません。

https://developer.mozilla.org/ja/docs/Glossary/percent-encoding


## エンコードしてみた

実際にネット上にあるBase64エンコーダー、Base64URLエンコーダー、URLエンコーダーを使ってサンプル文字列をエンコードしてみた。

（例1）先方のエンコード方法に相当するエンコード
`Base64.getUrlEncoder().withoutPadding().encodeToString(文字列)`
エンコードする文字　__abcdefg__
　↓
Base64URLエンコード　__YWJjZGVmZw__


（例2）当初仕様の2.と3.を順番に実施するエンコード
`Base64エンコード＋URLエンコード`
エンコードする文字　__abcdefg__
　↓
Base64エンコード　__YWJjZGVmZw==__
　↓
URLエンコード　__YWJjZGVmZw%3D%3D__

https://tool-taro.com/base64_encode/

https://www.tagindex.com/tool/url.html

## 結論

ということで、先方が実施したエンコード`Base64.getUrlEncoder().withoutPadding().encodeToString(文字列)`と、当方の想定したエンコード`Base64エンコード＋URLエンコード`は違う結果を導くことが分かった。
コンパイラとコンパイル　　

# コンパイルとは何か
コンパイル(compile)は人間が読めるように書かれたプログラミング言語を
機械が理解できるように変換することです。
つまり人間がわかる言葉をコンピューターのわかる言葉に通訳することです。

# コンパイラとは
コンパイラ(compiler)とはコンパイルをするためのものです。
人間の言葉をコンピューターがわかる言葉にする通訳だと思ってください。


# 補足
⚫︎バイナリコード　
コンピューターが理解できるコードのことです。

⚫︎ソースコード
人間が理解できる言葉で書かれたコードのことです。


# 参考資料
https://wa3.i-3-i.info/word186.html

https://e-words.jp/w/%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB.html

https://wa3.i-3-i.info/word12211.html
RSpecなどでテストをする理由とテストの種類

# なぜテストのコードを書く必要があるのか
Webアプリケーションを開発するときに、必ず必要になるのが```テスト```です。
```Railsで開発する場合```は***RSpec***と言います。
***テストはコードは、こちらが動いて欲しいような動作をしてくれるかを
検証するために書きます。***
テストをしないとサービスをリリースするときに、
ちゃんと動作せずにリリースすることになり、
クライアントなどに迷惑がかかってしまうのでテストは重要です。

この記事は有益なので、よかったら読んでみてください‼︎

https://freelance.cat-algorithm.com/why-need-test/

# テストの種類

●***単体テスト***
***一つのプログラムを各機能ごとで正常に動くかを確認するのが単体テストです。***
modelのテストでよく使います。


⚫︎***結合テスト***
***複数の機能を合わせてテストするのが結合テストです。***
インターフェースが正常に動いているかをテストします。
controllerやrequest などのAPI関連のテストです。

⚫︎***システムテスト***
システム全体をテストするテストです。
その中でも負荷テスト、機能テスト、性能テストがあるみたいです。

# テストの流れの順番
１```単体テスト```

2 ```結合テスト```

3 ```システムテスト```

がテストの流れみたいです。

# さらに細かいテストについて
　
1 まず***単体テストはモジュールを検証するテスト***です。

⚫︎***単体テストのブラックボックステストとホワイトボックステスト***
単体テストの中にはブラックボックステストとホワイトボックステストがあるみたいです。

・***ブラックボックステスト***
このテストは```システムの仕様を確認するためのテスト```です。
モジュールの中までは検証しないテストです。

・***ホワイトボックステスト***
このテストは```プログラムが想定通り動くかをテストします。```
モジュールの中まで確認して検証をします。


2 次に結合テストは***モジュール間のインターフェースを検証するテストです。***

⚫︎***結合テストのトップダウンテストとボトムアップテスト***
結合テストの中にはトップダウンテストとボトムアップテストがあるみたいです。

・***トップダウンテスト***
このテストは上位モジュールを先にテストし、それから下位モジュールをテストしていきます。

不具合を早期発見できるみたいです。
下位モジュールはテストをやっていない場合があるので```stub```という仮モジュールを作ります。

・***ボトムアップテスト***
このテストは下位モジュールを先にテストし、それから上位モジュールをテストしていきます。
システム開発と並行してテストができるみたいです。

下位からテストをするので、上位は未テストなので```ドライバ```という仮モジュールを作ります。

⚫︎リグレッションテスト
このテストは```退行テスト```といい、コードを修正したときに、
修正したことにより今まで動作していたテストに異常がないかを確認するためのテストです。


# 最後に
自分は未経験の状態で書いているので説得力がないと思うのですが、
実務ではコードレビューはスクールみたいな動作チェックではないみたいです。
RSpec(テスト)で動作チェックするみたいです。
自分の想像ですが、納期があり、コードが何百行もあるため動作チェックを
コードレビューでいちいちやっている時間がないのだと思います。
初学者の方はてすとの学習は絶対にやってから実務に入るべきかと思います。

# 自動テストが大事な理由
Cherry本で有名な伊藤さんがこちらで言及されています。

https://qiita.com/jnchito/items/c9ca22efa270ff1b7f3d#%E3%81%A0%E3%81%8B%E3%82%89%E3%81%93%E3%81%9D%E8%87%AA%E5%8B%95%E3%83%86%E3%82%B9%E3%83%88%E3%81%8C%E9%87%8D%E8%A6%81%E3%81%AB%E3%81%AA%E3%82%8B



# 各テストの資料
https://qiita.com/koki_73/items/0d6177b3869eb0128d86
https://qiita.com/yumi1003/items/4a5d871da6dda69596eb
https://hnavi.co.jp/knowledge/blog/white-box-test/
https://qiita.com/yosuke_takeuchi/items/915fc3092ee88bed3ff2



# 参考資料
https://note.com/ruquia7/n/n00ff04fc9129#wt7gL
https://note.com/h_three_22/n/n68cb15b8118c
https://ssaits.jp/promapedia/method/topdown-bottomup.html
https://ssaits.jp/promapedia/method/topdown-bottomup.html


https://www.amazon.co.jp/%E3%82%AD%E3%82%BF%E3%83%9F%E5%BC%8F%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88IT%E5%A1%BE-%E5%9F%BA%E6%9C%AC%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85-%E4%BB%A4%E5%92%8C03%E5%B9%B4-%E3%81%8D%E3%81%9F%E3%81%BF%E3%82%8A%E3%82%85%E3%81%86%E3%81%98/dp/4297117819
Qiita版『自民党総裁選』開催してみた 結果は‥

## Node.jsでQiitaAPIを使ってみたい!
　QiitaAPIを少し勉強したので、Node.jsで何か作ってみたいな。と考えていたところ
　とて面白いQiita記事を発見。早速参考にして自分なりに応用してみました。
　[「テレワーク」と「新型コロナ」には相関性があるのか確かめてみた。](https://qiita.com/twtjudy1128/items/836efaf748b8b76a6b82)

## 『ネット民に人気』は本当か？
　河野さんの紹介文でよく目にした「ネット民に人気」。
　それどうやって調べているのかな、とかねてから疑問でした。
　このAPIを使えば、<font color="Red">**期間中全Qiita記事内の名前出現回数を計測できる**</font>ので、
　ほかの候補者と比較すべく、「Qiita版総裁選」を開催してみました。

## サンプルコード
```js

const axios = require("axios");

async function main() {
  let response = await axios.get(
    "https://qiita.com/api/v2/items?per_page=100&page=1&query="+encodeURIComponent("候補者名")
  );
  for (let i = 0; i < response.data.length; i++) {

   console.log(response.data[i].created_at);
 }
}
```

　[created_at]　で候補者名が記載された記事が作成された記事を「時系列」で表示することに成功しました。

```js
console.log(response.data[i].created_at)
```


## 結果 1位は河野氏! 2位は小泉氏 平井デジタル担当大臣は‥
　【期間】総裁選の時期で比較するため、9月1日から9月末まで
　【候補】総裁選候補者4名＋話題の小泉氏・石破氏・平井デジタル担当大臣・おまけで私
　【結果】下記の通り　<font color="Red">**河野氏が得票率33.3%で1位**</font>　Qiita内では「ネット民に人気」は本当かもしれません。デジタル大臣、わたくし沖中、頑張ろう!!
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/236840e5-50eb-159c-b6fe-a3aa4a4c6c37.png)

## できなかったこと「プロフィールの出身地集計」など
　Qiita記事を多く書いているのはどの地域の人か、調べようとしましたが
　そもそも出身地を書いていない方がかなりの多数派。
　かつ、書いている人も「東京」「関西某地域」「Akihabara」など多様なため、断念しました。
　またプロフィール内に「テレワーク」など特定のキーワードを入れている人の
　最近と過去での増減も踏査にトライしましたが、プロフィールの作成日時は記録されておらず
　今回での調査は諦めました。
![null.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/0d7c9c4a-c94c-5167-0b42-aa6b7f345f4f.png)
　時系列では無理でしたが、「テレワーク」をプロフィールに書く人の総人数は取得できそうです。

## Facebook や Twitter APIも今後使ってみたい
　上記の方法であれば、「特定のワードが最近どのくらいつぶやかれているか調べる」
　のようなこともできそうな気がします。
　<font color="Red">**気になる語句の、SNS内人気ランキングを自分で調べられるってすごい・・と感嘆中**</font>
　マーケティングにも活用できそうなので、引き続き勉強していきます!
　
　参考記事①[Facebook Graph APIを使用してユーザー情報を取得する](https://qiita.com/rllllho/items/d543318450eb437cb493)
　参考記事②[[Python] OAuth認証でTwitter連携/ログインを実装する](https://qiita.com/rllllho/items/d543318450eb437cb493)
[Ruby]継承について初心者なりに解説してみた

# はじめに
本記事では、`継承`について記述します。
(まず、スプラトゥーンとはイカのゲームです。)

https://www.nintendo.co.jp/switch/aab6a/index.html

# 継承
`クラスを継承`することができ、
もともと存在するクラスから`新しいクラス`を継承することができます。

```
親クラス
↓継承
子クラス


「スプラトゥーン」
武器クラス
↓継承
スプラシュータークラス
```

## なぜクラスの継承が必要か
`共通の部分をまとめる`ことができるため、`効率的`が良いからです。

先ほど、`スプラトゥーン`の`武器クラス`を例に挙げましたが、
さらにいうと以下のように分けられます。

(注意)継承の継承、所謂`複数の継承`は`Ruby`ではできない（後述）です。

```
武器クラス
↓継承
シュータークラス、ローラークラス、パブロクラスなど

シュータークラス
↓継承
スプラシュータークラス、プロモデラークラス、NZAPクラスなど

スプラシュータークラス
↓継承
スプラシューター(無印)クラス、スプラシューターコラボクラス、スプラシューターベッチュークラスなど
```

## 継承の書き方
`子クラス<親クラス`と書きます。

```ruby
class SplaShooter < Shooter

end
```

```ruby
class Shooter
 def initialize(weapon_type, one_power)
   @name = weapon_type
   @power = one_power
 end

 def info
   puts "武器タイプ：#{@name}　攻撃力：1発#{@power}ダメージ"
 end

end

class SplaShooter < Shooter

end

spla_shooter = SplaShooter.new("スプラシューター系", 35)

spla_shooter.info

# 武器タイプ：スプラシューター系　攻撃力：1発35ダメージ
```

`SplaShooterクラス`は`Shooterクラス`を継承していることから、
インスタンス変数やインスタンスメソッドを使用しなくても、問題ありません。

# Rubyは単一継承
ここで、重大なことが発覚しました。
以下のサイトにて。
[はじめてのRuby！モジュール(module)の使い方を解説！](https://www.sejuku.net/blog/15408)

> Rubyは単一継承と呼ばれる言語設計になっています。
要はクラスを一つしか継承できないという設計です。
そのため、クラスと合わせて、モジュールを使用するすることで、擬似的に多重継承を行っているようにコードを書くことができます。

`モジュール`を使用することにより、擬似的に`複数継承ができる`とのことです。

後日、モジュールの深堀をします。
申し訳ございません。

以上です。

# 終わりに
前述の通り、`モジュール`の理解をしたいと思います。

以下参考サイトです。
[【Ruby入門】クラスの継承まとめ](https://www.sejuku.net/blog/16094)

明日も頑張ります！
【総受けサイト】XVWAさんをローカル環境に実装します。

#初めに

どうも、クソ雑魚のなんちゃてエンジニアです。

今回は日々の生活でストレスを溜めているクソ雑魚のお仲間のために「総受け」してくれる便利なWebサイト環境を紹介しようと思う。
※基本的に攻撃用の環境（例：Kali Linux）に関する記事はよく見るのだが、受けてくれる環境に関する投稿は見ないので、「やらねば！」という意気込みで作成しています。

![84806e533ec21078b06388e3cef3cdae.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2036848/4bc02faf-5ab3-fc58-171f-5f78edce2660.jpeg)

![C22DCF68-546B-467E-AB06-8A87F8785C61.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2036848/e2cd59fd-5c7d-5071-b4e7-807b22af3e9e.jpeg)


皆さんもこの総受けサイトを立ち上げて、是非とも日頃のうっぷんを此奴にぶつけていただきたい。
※にこちゃん、黄瀬くんは無関係です。。。

___※このサイトを外部に公開するのはやめてください。絶対にローカル環境に立てましょう。死にますよ。___

#目次

+ XVWAの紹介
+ イメージファイルダウンロード
+ 仮想環境構築
    + Ubuntuのイメージ作成
    + コントローラIDEの設定
    + アダプター設定
+ XVWAの立ち上がり確認 
+ まとめ

#XVWAの紹介

||
|---|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2036848/e2210be9-cb60-dca0-d2ea-61c81d759e84.png" width=450px >|

このXVWAのサイトは、脆弱性を多数孕んだペネトレーション検証用のサイトです。
以下の攻撃用に脆弱なページを用意しており、たんまりいじめることが可能です。

+ SQL Injection
+ SQL Injection (Blind)
+ OS Command Injection
+ XPATH Injection
+ Formula Injection
+ PHP Object Injection
+ Unrestricted File Upload
+ XSS - Reflected
+ XSS - Stored
+ XSS - DOM Based
+ SSRF / XSPA
+ File Inclusion
+ Session Flaws
+ Insecure Direct Object Reference
+ Missing Functional Access Control
+ CSRF
+ Cryptography
+ Redirects & Forwards
+ Server Side Template Injection


#イメージファイルダウンロード
まずISOイメージファイルをダウンロードしていきますが、以下のGitHubのリンクに詳細が記載されているので興味があれば一読してみてください。

https://github.com/s4n7h0/xvwa

上記リンクの下部にISOファイルをダウンロードできるMEGAのサイトがあるのでそこからダウンロードを実施しましょう。
※GitHubみるのめんどくさいという方は以下のURLから直接ダウウンロードしてください。

>  [MEGA](https://mega.nz/#!4bJ2XRLT!zOa_IZaBz-doqVZz77Rs1tbhXuR8EVBLOHktBGp11Q8)

#仮想環境構築
ダウンロードしたイメージファイルを用いて仮想環境を構築していきます。
構築基盤は何でもいいです。
私はVirtual Boxにでも構築したので、Virtual Boxでの構築方法でも記載します。

##Ubuntuのイメージ作成
まずXVWAのサイトを乗せるUbuntuのイメージを作成します

タブメニューから
→「仮想マシン」
→「新規作成」
→「タイプ:Linux、バージョン:Ubuntu(何ビットでもどうぞ)」
→「メモリーサイズ:2048MB(くらいで)」
→「仮想ハードディスクを作成する」
→「作成」
→「ハードディスクのファイルタイプ:VDI」
→「物理ハードディスクにあるストレージ:可変サイズ」
→「ファイルの場所とサイズ:お好みでどうぞ」
→「作成」

といった順序で作成していけばOKです。

##コントローラIDEの設定

タブメニューから
→「仮想マシン」
→「設定」
→「ストレージ」
→「コントローラ:IDE」の「光学ドライブの追加」から「追加」
→「XVWA.iso」を選択
→「空」のディスクイメージを削除
→「OK」

##アダプター設定

タブメニューから
→「仮想マシン」
→「設定」
→「ネットワーク」
→「割り合て:ホストオンリーアダプタ」
→「OK」

※外への通信は許さないようにしましょう。


#XVWAの立ち上がり確認
いよいよ総受けサイトXVWAを立ち上げます。
起動には少し時間がかかるので気長におまちください
起動後の画面で以下のコマンドを打って、どのIPが割り当てられているか確認しましょう。

```bash
xvwa@xvwa:~ $ ip a
```

IPを確認できたら（今回は便宜上「192.168.0.1」とする）、そのIPのサイトへアクセスしよう！
以下の例のようにブラウザでアクセスしてください。


> ___http\://192.168.0.1/xvwa___


打ち込んで以下のようなサイトを閲覧できればOKです。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2036848/bc711ef3-1fe5-9224-7962-3862e5a56153.png)

#まとめ
第四回の投稿はいかがだったでしょうか？
XVWAという中々紹介している記事がない攻撃先サイトの一例を紹介をさせていただきました。
今回もセキュリティエンジニアの皆さんの助けになればなと思います。

※「総受け」の需要はあるのか？...