OmniAICreator/Qiita-1.07M huggingface dataset:
MyBatisの1対多のレコード取得についてのまとめ

今回MyBatisの1対多のレコード取得について学習したので、備忘として残しておく。

前提
・テーブルはemployeesとattendancesの2つ。
・employeesが1でattendancesが多

テーブル構造
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631579/e146a796-6139-f0d1-4c72-bdd03cc77702.png)

DTO
```EmployeeE.java

package com.example.demo.entity;

import java.sql.Timestamp;
import java.util.List;

import lombok.Data;

/**
 * 従業員データのDTOモデル
 *
 */
@Data
public class EmployeeE {

	/**
	 * id
	 */
	private Integer id;

	/**
	 * 社員番号
	 */
	private String code;

	/**
	 * てすと
	 */
	private List<Attendance> attendances;

}

```

```Attendance.java
package com.example.demo.entity;

import lombok.Data;

/**
 * 勤務データのDTOモデル
 *
 */
@Data
public class Attendance {

	/**
	 * id
	 */
    private Integer id;

	/**
	 * コメント
	 */
    private String content;

	/**
	 * 従業員id
	 */
    private Integer employeeId;

}
```

取得方法1　SQLを二つ発行して取得する方法

```EmployeeMapper.xml

    <resultMap id="View_Result_Map" type="com.example.demo.entity.EmployeeE" >
        <collection
            property="attendances"
            ofType="com.example.demo.entity.Attendance"
            select="selectAttendancesByEmployeeId"
            column="id" />
    </resultMap>
 
    <select id="findAllE" resultMap="View_Result_Map">
        select *
        from Employees
    </select>

    <select id="selectAttendancesByEmployeeId" parameterType="int" resultType="com.example.demo.entity.Attendance">
        select *
        from Attendances
        where employee_id = #{id}
    </select>

```

所得方法2 テーブルを結合して一括で取得する方法

```EmployeeMapper.xml

    <resultMap id="View2_Result_Map" type="com.example.demo.entity.EmployeeE" >
    		<result property="id" column="id" />
       		<result property="code" column="code" />

       <collection property="attendances"  ofType="com.example.demo.entity.Attendance" >
            <result property="content" column="content" />
       		<result property="employeeId" column="emoloyee_id" />

       </collection>

    </resultMap>

    <select id="findAllE2" resultMap="View2_Result_Map">
        select employees.id, employees.code, attendances.content, attendances.employee_id
        from employees
        left join attendances on employees.id = attendances.employee_id
    </select>

```
※resultmapのresultは指定する必要あり。
指定しないとnullになる。
【ほぼ自分用】よく使用したMySQLコマンド

ここでは、
```
ユーザー名： user_name
パスワード：　user_pass
DB名　：　test_db
```

として例を記載します。


# 現在接続しているユーザーを確認
```
select user(), current_user();
```

# ユーザー一覧とホスト名の取得
```
select user, host, password from mysql.user;
```

# all 権限の付与
```
grant all on test_db.* to 'user_name'@'%' identified by 'user_pass';
```

# 設定されている権限の確認
```
show grants for 'user_name'@'%';
```

# ユーザー作成
```
CREATE USER user_name IDENTIFIED BY 'user_pass';
または
CREATE USER 'user_name'@'localhost' IDENTIFIED BY 'user_pass';
```

# 強化版
https://qiita.com/CyberMergina/items/f889519e6be19c46f5f4

https://proengineer.internous.co.jp/content/columnfeature/6985
AWS WAF導入時に見るべき記事まとめ

# はじめに
アプリケーションへの脆弱性攻撃対策として、候補にあがるのがWAFの導入かと思います。
ですが、いざWAFを導入しようかどうかと思ったときに、知見が全くと言っていいほどありませんでした。

WAFにも多くの種類があり、最初はどのWAFが良いのか悩むと思います。

今回は、AWS WAFを導入しましたが、導入にあたり色々な偉大な先輩方の記事を読み漁り、
自分で手を動かしながら`導入→運用`まで持っていけるぐらいの知見を獲得することができました。

そんな、初めてのWAF導入において、助けになった記事を一挙ご紹介します。

もし同じような境遇の人の助けになれば幸いです。

# ▼参考記事一覧
## AWS WAF
`AWS WAFとは?`という疑問を解消してくれた記事

https://dev.classmethod.jp/articles/fully-understood-aws-waf-v2/

https://www.wafcharm.com/blog/how-to-choose-aws-managed-rules/

`AWS WAFマネージドルール`の詳細

https://docs.aws.amazon.com/ja_jp/waf/latest/developerguide/aws-managed-rule-groups-list.html

## 料金について

https://aws.amazon.com/jp/waf/pricing/

リクエスト数を把握し、概算コストを算出（ページ内、`ケースC`が特に参考）

https://dev.classmethod.jp/articles/tsnote-waf-pricing-request-count/

## カスタムルール作成

https://dev.classmethod.jp/articles/tsnote-aws-waf-autoblock/

https://dev.classmethod.jp/articles/add-ratebase-rule-deny-ip/

https://blog.denet.co.jp/aws-waf-x-forwarded-for/

https://docs.aws.amazon.com/ja_jp/waf/latest/developerguide/waf-bot-control-example-allow-verified-bots.html

https://qiita.com/hirai-11/items/252705c33914dcab000c#upload%E3%81%AE%E3%83%91%E3%82%B9%E3%81%AE%E3%81%BF%E3%82%B3%E3%82%A2%E3%83%AB%E3%83%BC%E3%83%AB%E3%82%BB%E3%83%83%E3%83%88%E3%82%92%E9%81%A9%E7%94%A8%E3%81%97%E3%81%AA%E3%81%84%E6%96%B9%E6%B3%95



## 本番環境への導入時に見るべき記事
https://tech.motex.co.jp/entry/2022/01/18/134104

https://dev.classmethod.jp/articles/aws-waf-operations-and-maintenance/

## 運用時に見るべき記事
https://tech.smarthr.jp/entry/2020/11/24/150008

https://zenn.dev/leaner_tech/articles/20211125-waf-notify

https://dev.classmethod.jp/articles/cloudwatchdashboard-waf-logs/

https://blog.serverworks.co.jp/tech/2020/02/24/cloudwatch-dashboard/

# ▼関連するその他知識
## AWS Shield
https://dev.classmethod.jp/articles/check-ddos-by-aws-shield/


## DDoS攻撃
https://www.stylez.co.jp/columns/ddos_prevention_in_aws/

https://d1.awsstatic.com/whitepapers/compliance/JP_Whitepapers/DDoS_White_Paper_JP.pdf
LPIC Lv1-101 ブートマネージャ についてまとめてみた

# はじめに

LPIC Lv1-101
ブートマネージャ についてまとめてみた


# 最終更新日

2022年11月17日


# 環境の情報
OS
Ubuntu20.04


# 注意
最新の状態を確認して下さい。


# 公式さま
https://mondai.ping-t.com


# 参考さま

https://mondai.ping-t.com
https://wiki.gentoo.org/wiki/GRUB2/ja
https://atmarkit.itmedia.co.jp/ait/articles/1902/01/news045.html
https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/7/html/system_administrators_guide/sect-managing_services_with_systemd-targets
https://enakai00.hatenablog.com/entry/20130914/1379146157

# ブート

電源を入れてから、システムが動くまでの流れのこと。


# ブートローダ
OSを動かすためのソフトウェアのこと。
記憶装置内の、カーネルを組み込みを行う。
カーネルに制御を移す役割を行う。



# システムが動くまでの流れ
BIOS/UEFI　→　ブートローダ　→　カーネル　→　init/systemd 　となっている。


# GRUB
GRand Unified Bootloader
ブートローダの1つ。
GRUB Legacy.
ブートローダであるGRUBのバージョンが0.9x系のもの。


# GRUB2
GRand Unified Bootloader version 2
ブートローダの1つ。
ブートローダであるGRUBのバージョンが1.9以降のもの。


# GRUB1の設定ファイル
Linuxディストリビューションによって違うときもある。
/boot/grub/menu.lst
/boot/grub/grub.conf


# GRUB2の設定ファイル
/boot/grub/grub.cfg


## grub.confについて、実際にあることを確認。
```
/boot/grub$ cat grub.cfg
#
# DO NOT EDIT THIS FILE
#
# It is automatically generated by grub-mkconfig using templates
# from /etc/grub.d and settings from /etc/default/grub

（テンプレートを使って grub-mkconfig で自動生成しました。）
（/etc/grub.d から、設定は /etc/default/grub から。）
```


# GRUB1は設定ファイルは実行するコマンドは無い。
GRUB1は「/boot/grub/menu.lst」を変更しても、実行するコマンドは無い。


# パーティションを指定
（hdディスク番号,パーティション番号）のように指定する。
番号はどちらも0から数えますところが罠。


# grub2-mkconfig
GRUB2の起動するメニューを作る。


# パーティション
記憶領域のこと。
ハードディスクを、決まった範囲で分けたもの。


# ルートパーティション
ルートディレクトリを含んだ、パーティションのこと。


# シングルユーザモード 
single user mode
動作のモードの1つ。
管理者ユーザ（rootユーザ）のみが、ログインしてOSを操作できるモードのこと。


# systemd
ソフトウェア。
Linux の起動処理 (init) やサービスの管理を行う。


# Unit
設定ファイル。
systemdでは、「Unit」という単位で処理を管理する。
Unitの設定に従ってsystemd自体が処理を実行する。
各機能ごとに拡張子が割り当てられている。
拡張子を見ることで、どういった機能のためのUnitかが判別できるようになっている。


# ランレベル 
Runlevel
Linuxの動作モードのこと。
0〜6まである。


# ランレベルとターゲットユニットと詳細について
0　poweroff.target 
システムをシャットダウンし、電源を切ります。
1　rescue.target　
レスキューシェルを設定します。
2　multi-user.target　
非グラフィカルなマルチユーザーシステムを設定します。
3　multi-user.target　
非グラフィカルなマルチユーザーシステムを設定します。
4　multi-user.target　
非グラフィカルなマルチユーザーシステムを設定します。
5　graphical.target　
グラフィカルなマルチユーザーシステムを設定します。
6　reboot.target　
システムをシャットダウンして再起動します。


# シングルユーザーモードに対応するランレベル
1


# systemd.unit 

パラメータ。
systemdが動くシステムにおいて、起動する時のターゲットを指定する。


# systemdの動くシステムにおいて、シングルユーザーモードで起動する、カーネルパラメータ。
systemd.unit=rescue
【RDS/MySQL】スロークエリログの取得から本番環境に適用するまで

# はじめに
DB利用において、レイテンシーを向上させる方法として、スロークエリログを取得し、該当クエリの改善を図る。

[スロークエリとは？](https://weblabo.oscasierra.net/mysql-slow-query-log-1/)

ここでは、スロークエリの取得から本番環境へ適用するまでを残す。

---
【環境】
- RDS for MySQL 5.7.34

# 手順
## RDSのパラメータグループを変更
```sh:パラメータグループの変更箇所
# 通常ログを有効化（デフォルト値は 0 またはログなし）
general_log = 1

# スロークエリを有効化（デフォルト値は 0 またはログなし）
slow_query_log = 1

# ログに出力するスロークエリの秒数を指定（この値を閾値にスロークエリと判定。μs単位まで指定可能）
long_query_time = 3 

# 一般クエリログとスロークエリログの両方をファイルシステムに書き込み、Amazon RDS コンソールからログを表示
log_output = FILE 
 
```
## RDSの設定変更
ログのエクスポートで`スロークエリログ`にチェック

![スクリーンショット 2022-08-10 15.42.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669969/8a91d5e5-11bc-1669-8e68-d5f4980dbf27.png)


**設定変更後、RDSを再起動**
（※パラメータグループの内容を変更した場合、RDSを再起動させる必要があります。）

## CloudWatchでログ確認
RDS再起動後、RDSが存在する環境で適当にクエリが重そうな箇所をポチポチいじる。

数分後、CloudWatchのロググループに`/aws/rds/instance/{DB名}/slowquery`とうロググループが出来上がる。

ログを確認すると、スロークエリに該当するSQL発行ログが蓄積されている。

これで終了！



# 本番環境のRDSに設定するまでの流れ

- 検証環境用の新しいパラメータグループを作成（既存からのコピーして複製）
- スロークエリを取得できるようにパラメータグループを変更
    - 変更後、手動でRDS再起動する必要あり
- 検証環境で検証
    - CloudWatchでスロークエリログ取得の確認
- 本番環境用、パラメータグループの変更
    - 変更後、手動でRDS再起動する必要あり


# 参考
https://aws.amazon.com/jp/premiumsupport/knowledge-center/rds-mysql-logs/

https://zenn.dev/ohkisuguru/articles/48dff6cf195244

https://qiita.com/shim-hiko/items/6714bbdc0a4ad4c2a577
httpd.confを変更してもApacheのドキュメントルートが変更できない方へ



さくらのVPSでせっせと本番環境構築していた際、ドキュメントルートを変更しようとして気づいたら2日ほどハマっていたので備忘録です。

# 環境
・さくらのVPS
・CentOS7
・Apache2.4.6


# 前提知識
皆さんご存知のとおりApacheのドキュメントルートは

/etc/httpd/conf/httpd.conf

で設定でき、デフォルトでは
```/etc/httpd/conf/httpd.conf
DocumentRoot "/var/www/html" 
```
となっています。

この/var/www/htmlディレクトリ内のindex.phpが、外部からサーバーにアクセスした際に、トップページとして表示されます。


# 問題
今回私はGitHubのリポジトリから「git pull」し、/var/www/html内にソースコードを取得することとしました。

ディレクトリ構成としては、

/var/www/html/リポジトリ名

といった感じです。

そして、/etc/httpd/conf/httpd.conf の
```/etc/httpd/conf/httpd.conf
DocumentRoot "/var/www/html" 
```
を、
```/etc/httpd/conf/httpd.conf
DocumentRoot "/var/www/html/ディレクトリ名"
```
に変更しました。 

「これでサーバーにアクセスしたら、/var/www/html/ディレクトリ名/index.php が表示されるはずや！」
と期待に胸を膨らませましたが、全く表示されず、期待は粉々に打ち砕かれました。


# 解決
その後2日ほど格闘したところ、あることに気づきました。

「httpでアクセスするとドキュメントルートの変更が反映されている...!」

なぜかhttpsでアクセスするとドキュメントルートが変更されていないのですが、httpだと適切にアクセスできるのです。

そして色々調べた結果、

/etc/httpd/conf ディレクトリ内にある httpd-le-ssl.conf の４行目あたり
```/etc/httpd/conf/httpd-le-ssl.conf 
DocumentRoot /var/www/html/
```
を
```/etc/httpd/conf/httpd-le-ssl.conf 
DocumentRoot /var/www/html/ディレクトリ名
```
と変更することで、無事ドキュメントルートを変更することができました。
PowerShellにて16進数ダンプ。

PowerShellにて16進数ダンプ。
Windows PowerShellについて触れる機会が増えたので、日記的な
16進数ダンプの必要があったので、最初面食らったのは「|」これ、パイプライン。変数は「$」。「-f」はフォーマット演算子[【後述】](https://qiita.com/AnimaLibera/items/173d72dcb4b15f913744)。癖強いな・・・
```powershell:Get-content.ps1
            $str=$InitialDirectory+'\log.csv'
            #ファイルから〇〇要素ずつ読み込み一連の文字をバイトのシーケンスにエンコードする、パイプの後は改行できる
            #この場合一度に-readcountバイト読み込みそれを-TotalCountバイトになるまで繰り返す指定なしは全て読み込む
            Get-content -path $File -encoding byte -readcount $readcount -TotalCount $totalCount|
            #2桁表示にする。空白なら無しにする。カンマ区切りにする
            foreach-object{
                ('{0:x2}'-f$_).replace(' ',",")
            }|
            #ファイルに追加する
            add-content $str

```
一般的なHEXダンプならこれで良い。
```powershell:Format-Hex.ps1
    $hex= Format-Hex -Path $file
    out-file -filepath $hexout -inputobject $hex
```
PowerShellって独特な文法がネックだと思ったが、慣れると良いな！
後日ファイル指定が面倒になったので[【ファイル選択ダイアログについて】](https://qiita.com/AnimaLibera/items/9cf7a965fcc4c0dbaaac)　

【replaceについての参考文献】

https://qiita.com/acuo/items/a4f83d886c4b8a7fcf52
Vue.js で親コンポーネントから渡された props の最新の値を保ったまま子コンポーネント内部で (WritableComputed) Ref を取り回す

API から非同期でデータを取ってきてて、しかも `emit` 使って親と疎通する単純な `WritableComputedRef` を使えない時 (※) とかに、「親から渡ってきてる最新の `props` は常に採用 (上書き) してもいい　子コンポーネント内部だけで完結する `Ref`」を使いたいことがたまにあります。私だけでしょうか。

普段 `watch` を使わないコーディングをしているので、`computed` でできることは極力 `computed` で実現します。

_※) データソースは API 経由 & データの待機中も画面は表示していたい & インプットですぐにデータソースを更新したくない みたいな欲張りセット的なシチュエーション_

```ts:tekitoNiNamaeTsukete.ts
import { computed, ComputedRef, ref, WritableComputedRef } from "vue"
import { diff } from 'deep-object-diff'

export const tekitoNiNamaeTsukete = <T extends {}>(
  currentlyBaseData: ComputedRef<T>,
  initialize: T
): WritableComputedRef<T> => {
  const cachedBaseData = ref<T>(currentlyBaseData.value)
  const inner = ref<T>(initialize)

  const hasDiff = computed(() =>
    diff(cachedBaseData.value, currentlyBaseData.value)
  )

  return computed({
    get(): T {
      if (hasDiff.value) {
        cachedBaseData.value = currentlyBaseData.value
        inner.value = currentlyBaseData.value
      }
      return inner.value
    },
    set(value: T) {
      inner.value = value
    },
  })
}

```

以下のような感じで使います。

```vuejs:Example.vue
<script lang="ts">
export default defineComponent({
  // ... 略
  props: {
    hoge: {
      type: String,
      default: '',
    },
    fuga: {
      type: String,
      default: '',
    },
    piyo: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    const extractedProps = computed(() => {
      const { fuga, piyo } = props

      return {
        fuga,
        piyo,
      }
    })
    const inner = tekitoNiNamaeTsukete(extractedProps, {
      fuga: 'fuga',
      piyo: '',
    })

    return {
      inner,
    }
  },
})
</script>
```

普通に `WritableComputedRef` として使えますが、親の `fuga`, `piyo` が更新されると `Example.vue` の `inner` がその値で上書きされます。

`inner` が暴力的に上書きされるので、ユーザによって入力されたデータは保存する、みたいな処理が欲しかったら付け足します。
JavaScript：0で始まる数値の扱い

JavaScriptで0で始まる数値を扱う際、ハマったので書き残す。


- 以下は期待通り
```javascript
let $num1 = 0800
let $num2 = '0800'
console.log($num1 === Number($num2)) // true
```

- 以下が想定外
```javascript
let $num3 = 0700
let $num4 = '0700'
console.log($num3 === Number($num4)) // false
console.log(Number($num3)) // 448
console.log(Number($num4)) // 700
```

なぜ？

> 0(ゼロ)で始まる数字は、後に続く数字がすべて 0～7 であれば 8進数として、8～9 を含んでいれば10進数として解釈されます。
https://www.tohoho-web.com/js/number.htm

そうなんだ、、、
【PHPUnit】ポイントの計算などのテストは固定値よりFakerを使う方がよい

## 環境
Laravel v9.5.1 (PHP v8.1.3)


## Tips：ポイントの計算のテストはFakerを使う


#### ポイントを合計するメソッドのテスト

```$amount1``` ```$amount2```にそれぞれ数字のレンジに幅を持たせて、どんな数字の組み合わせのケースでも動くことを検証できるようにする。
ランダム性を持たせた方が網羅性が増すようなものはFakerを使う方がいい。

```php
public function testSumPoints()
{
    $user = User::factory()->create();
    $amount1 = Faker\Factory::create()->randomFloat(1, 10, 100);
    $amount2 = Faker\Factory::create()->randomFloat(1, 10, 100);

    $results = PointHistory::sumPoints($user->id);
    $this->assertEquals($results, $amount1 + $amount2);
}
```

固定値で確認したいものに関してはベタ書きがいい。

```php
public function testSumPoints()
{
    $user = User::factory()->create();
    $amount1 = 10;
    $amount2 = 50;

    $results = PointHistory::sumPoints($user->id);
    $this->assertEquals($results, $amount1 + $amount2);
}
```
OpenseaでNFTに「無限いいね」するツールをリリースしました。

なんということでしょう！

### 我々はついにブラックホールの生成に成功し、さらにタイムマシンをリリースするまでに至ったのです。

ここまで非常に長い道のりでした。

-----

ぜひともみんなにツールを見てもらいたいから、まずはリンクを貼らせてください。

**OpenseaNFT用 無限いいねツール その名も「[OpenShit](https://sigr.io/)」**

OpenShitリンク：https://sigr.io/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576748/0b49b077-8746-506c-c909-ec3865cc01cf.png)


ちなみに前回の記事ではツールを作成するまでの技術的な事を書いています。

**【Opensea】NFTに無限に「いいね❤」押せるツールを作成した話**
<https://qiita.com/LostMyCode/items/d2be62b91201fbab814b>


すべてJavaScriptとNode.jsで完結しています。
フロントエンドではフレームワークとしてReact.jsを採用しています。

# これは一体なんなのか？

世界最大のNFTマーケットプレイスであるOpenseaのずさんな運営を暴くツールです。

具体的にはOpenseaで作成・出品されているあらゆるNFTに「いいねを無限につけられる」ツールです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576748/737595af-9b56-d0fd-f956-e71e5fa8f9e4.png)


最大級のプラットフォームにもかかわらず、
寝てるだけで１８０００いいねをつけれてしまうなんて・・・！
Openseaさんもっとしっかりしないと・・・

# さいごに

興味を持ってくださりありがとうございました。

タイムマシンの一般普及に向けてこれからも精進してまいります。

動画でツールの使い方を見たい方はこちらのツイートが参考になります。

https://twitter.com/LostMyCode/status/1559088278736777217


-----

Hacked by [@LostMyCode](https://twitter.com/LostMyCode/status/1559042589461860352)
UnityC# Vscodeスニペットメモ 

# スニペットメモ

```json:charp.json
{
	"Create MonoBehaviorClass Template":{
		"prefix": "cmonobehavior",
		"body": ["using UnityEngine;\n","public class $TM_FILENAME_BASE : MonoBehaviour\n{\n\t$0\n}"],
	},
	"Create MonoBehaviorClass Template With NameSpace":{
		"prefix": "cnmonobehavior",
		"body": ["using UnityEngine;\n","namespace $1\n{\n\tpublic class $TM_FILENAME_BASE : MonoBehaviour\n\t{\n\t\t$2\n\t}\n}"],
	},
	"Create PureC# Class Template":{
		"prefix": "cclass",
		"body": ["public class $TM_FILENAME_BASE\n{\n\t$0\n}"],
	},
	"Create PureC# Class Template With NameSpace":{
		"prefix": "cnclass",
		"body": ["namespace $1\n{\n\tpublic class $TM_FILENAME_BASE\n\t{\n\t\t$2\n\t}\n}"],
	},
	"Create interface Template":{
		"prefix": "cinterface",
		"body": ["public interface $TM_FILENAME_BASE\n{\n\t$0\n}"],
	},
	"Using Generic":{
		"prefix": "generic",
		"body": ["using System.Collections.Generic;\n$0"],
	},
	"Awake":{
		"prefix": "awake",
		"body": ["private void Awake()\n{\n\t$0\n}"],
	},
	"Start":{
		"prefix": "start",
		"body": ["private void Start()\n{\n\t$0\n}"],
	},
	"Update":{
		"prefix": "update",
		"body": ["private void Update()\n{\n\t$0\n}"],
	},
}
```
【Rails】同一名のmodule内でクラスを呼び出す方法


## 状況
一見問題なさそうだが
```User.hoge_method```で```User```モデルではなく、```Parameters::User:Module```の```User```が呼ばれてしまっているためエラーが起きている。
moduleとクラス名が同一のため起きていると考えられる。
```ruby
class User
   def hoge_method
      puts 'hogeメソッドを実行'
   end
end


module Parameters
  module User
    class ProfileParameter
        def fuga_method
            User.hoge_method
        end
      end
    end
  end
end
```


```
NoMethodError:
undefined method `hoge_method' for Parameters::User:Module
```
## 解決法

クラス名の前に```::```をつける。
ちなみに外部の定数を呼び出すときにも同じ```::```を使用する。


```ruby
module Parameters
  module User
    class ProfileParameter
        def fuga_method
          ::User.hoge_method
        end
      end
    end
  end
end
```

## Laravelだったら
moduleは使ったことがないが、もしLaravelで同一名のクラスなどを定義するとき

```php
use App\Models\User as ModelUser;
```
のように別名を定義できるので便利。

https://qiita.com/kat0/items/46ad3ea67ef0f34e2e02
【Rails】l(エル)メソッドを使用して時刻表示を日本語化rev1

# はじめに
[こちら](https://qiita.com/vaza__ta/items/268cad88235c4de7940c)の記事で一部、よりDRYな書き方をアドバイスいただいたので、その方法で実装をする。ご指摘いただき、ありがとうございます。

# 環境
| No |    項目     |   内容    |
|---:|-------------|------------|
| 1  |      OS       |   Mac     |
| 2  |       Ruby      |   2.6.3   |
| 3  |       rails      |      6.0.4 |

# 実装
下記のように、lメソッドを使用して、時刻を表示する。
```ruby:posts/show.html.erb
# <%= post.created_at.to_s(:datetime_jp) %>
# 上記ではなく、下記で記載する。
<%= l object.created_at %>
```
application.rbに下記を定義する。
```ruby:config/application.rb
class Application < Rails::Application
    I18n.default_locale = :ja
    config.time_zone = 'Tokyo'
end
```

l(エル)メソッドにより、ja.ymlのtime.formats.defaultが呼び出される。
```config/locals/ja.yml
  time:
    formats:
      default: "%Y年%m月%d日(%a) %H時%M分%S秒 %z"
      default_short: "%Y年%m月%d日"
```
# 結果確認
これで、l(エル)メソッドが使える。特にformatsを指定していないため、ja.ymlのdefaultが呼び出される。
```ruby:posts/show.html.erb
# 再掲
<%= l object.created_at %>
```
<img width="300" alt="timezone image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2684787/402e5db0-d6fc-1012-f47f-6f5994aac38e.png">

記事を投稿した時の情報としてつけた機能のため、不要な部分を取り除いた値、ja.ymlのdefault_shortを使用することも可能。
```ruby:posts/show.html.erb
# <%= l object.created_at %>
<%= l object.created_at, format: :default_short %>
```
<img width="300" alt="timezone2 image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2684787/75acc17f-3758-46b0-528a-b08d7e859b89.png">

ちなみに、今回はjs.ymlで定義したformatをlメソッドによって使用したため、前回作成したconfig/initializers/time_formats.rbは削除可能。
```config/initializers/time_formats.rb
# Time::DATE_FORMATS[:datetime_jp] = '%Y年 %m月 %d日'
```

# おわりに
いつもコメントありがとうございます。
とても勉強になりますので、ご指摘がありましたら気軽にコメントお願いします！
なんでTelnet使っちゃだめなの？LPICメモ

LPICを学習中です。  
**`telnet`で通信するのはセキュリティ面で問題がある**とよく聞くが  
具体的にどう問題があるのか分かってなかったので調べました。  
&ensp;
## Telnetだと通信が丸見え
参考：[[セキュリティ編]運用管理にtelnetを使ってはいけない](https://xtech.nikkei.com/it/article/COLUMN/20071210/289107/)  
ほうほう  
どうやら`telnet`だとやりとりが平文でされており、それが盗聴されると危ないとのこと  
ところで　**盗聴ってどうやるの？** **盗聴する側にはどう見えてるの？** とさらに疑問に思ったのでググったら  
これまさにというのがありました。    
&ensp;
参考：Telnetの通信は丸見えです！
<iframe width="560" height="315" src="https://www.youtube.com/embed/SDJ-hac5IZg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>  

打ったパスワードが丸見えでござるなぁ
確かにターミナルからパスワード打つ時はパスワード自体は見えてないですよね。  
&ensp;
## SSHだと見えないの？  
しつこいですが、**`ssh`だったら見えないの？** と疑問に思いました。  
上のyoutubeの続きで`ssh`の通信も動画にされてたので見てみました。  
&ensp;
参考：ヤマハルーター SSHで通信を暗号化する  
<iframe width="560" height="315" src="https://www.youtube.com/embed/JBjft6E7S9U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

`ｓｓｈ`だと入力したパスワードも含め、通信が暗号化され内容を見られることはないようです。  
&ensp;  
## まとめ  
- `telnet`は通信が暗号されず、パケットキャプチャすると内容が丸見えになっている
- リモート接続は通信が暗号化される`ssh`を使う  
- Wiresharkなどのツールでパケットキャプチャできる。面白そうなのでやってみる。  
- IP実践道場さんお世話になりました。ありがとうございました。
ASTER衛星画像フォールスカラー画像作成＆投影変換

自分の使う座標系でASTERのフォールスカラー画像が一気に欲しいな、、、と思っていたのと、Google Earth EngineにASTER含まれてないと勘違いしていたので書いた。
しかしながら結局、GEEにASTERあるらしいのでこれは使わなそうっていうね。
ローカルで作業する人向けに参考になれば。

## ダウンロード
まずはASTERの衛星画像をダウンロード。
産総研のMADAS（https://gbank.gsj.jp/madas/?lang=en )から検索できる。
overlayで衛星画像を地図上で確認できる。
![madas_capture.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324057/a895e4a2-0362-faa0-d048-48be1d050139.png)
欲しいデータのtarボタンを押すとダウンロードされる。
データは"storage"フォルダに保存するとする。


```
hoge
├── batch_aster_fc.bash
└── storage
    ├── AST**.tar.bz2
    └── AST**.tar.bz2
```

## やりたいこと
ASTER衛星画像解析で面倒なのは、GISソフトウェアで行う以下の作業。
(MADASだとダウンロードは一気にできないのでなおさら作業効率を上げたくなる)
- バンド結合
- RGB割り当て変更
- 投影法変換（元データはWGS84）
枚数が少ない時はよかったけど、大量になってくるとこれに加えて展開すら面倒。
ということで一括で処理します。


``` bash: batch_aster_fc.bash
#!/bin/bash

#DOWNLOAD files to directory of "storage"
strg=./storage

mkdir wgs84
Num_epsg=32654
mkdir epsg${Num_epsg}

cd ${strg} && ls>../tarbz_list
while read line
do
	tar -jxvf ${line}
done < ../tarbz_list

ls -d */ > ../dirlist

while read line
do
	fdate=`cat ./${line/%?/}/data1.l3a.gh | grep CalendarDate | awk -F'["]' '{print $2}' `
	echo ${fdate}
	gdal_merge.py -separate -ot Float32 -of GTiff -o ../wgs84/${fdate}.tif ./${line/%?/}/data1.l3a.vnir3n.tif ./${line/%?/}/data1.l3a.vnir2.tif ./${line/%?/}/data1.l3a.vnir1.tif
	gdalwarp -s_srs EPSG:4326 -t_srs EPSG:${Num_epsg} ../wgs84/${fdate}.tif ../epsg${Num_epsg}/${fdate}.tif
done < ../dirlist

```

与えたEPSGでのフォールスカラー画像が出来上がり。
コード動かした後はこんな感じになります。
名前は画像取得日にしています。
```
hoge
├── batch_aster_fc.bash
├── dirlist
├── epsg32654
│   ├── date1.tif
│   └── date2.tif
├── storage
│   ├── id1
│   │   ├── data1.l3a.demsh
│   │   ├── :
│   │   └── data1.l3a.vnirsh
│   ├── id2
│   │   ├── data1.l3a.demsh
│   │   ├── :
│   │   └── data1.l3a.vnirsh
│   ├── AST**.tar.bz2
│   └── AST**.tar.bz2
├── tarbz_list
└── wgs84
    ├── date1.tif
    └── date2.tif
```

ディレクトリ構造やメタデータの中の日付とかを変えれば他の衛星でも同じようにできます。
ちょっと楽になりますね。
Web3(ブロックチェーン)は何を変えたか？

![BeforeWeb3JA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780317/040a8e1c-1ffa-689e-faa0-5c1fdbfae4c9.png)

![AfterWeb3JA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780317/9b956629-ba08-8c0e-b15c-06e71d73dc2a.png)

## Web3のテーマは分散化、そしてユーザー主権

ブロックチェーンを活用したWeb3の世界では、ユーザーがそれぞれ安全に暗号化された状態でデータを保持するようになります。今までは様々なアプリにアカウントを登録し、それぞれのアプリがあなたのデータを保持していました。アプリはあなたの情報を比較的自由に利用でき、削除したり、故意にあなたにサービスを使わせないこともできます。また、もしあなたの登録するアプリにセキュリティインシデントが発生すれば、あなたのデータは流出する恐れがあります。Web3アプリ(ブロックチェーンアプリ)では、ユーザーは自身の所有するクリプトウォレットにデータを保持します。もはやdApp(分散型アプリケーション)はユーザー情報を保持する必要がなくなり、セキュリティインシデントの可能性は大幅に低くなりました。ユーザーデータはそれぞれのクリプトウォレットに分散しているため、悪意のある攻撃者は今までのようにいっぺんに大量のリストを手に入れることはできなくなります。

## Don't Trust. Verify

また、ブロックチェーンは「Don't trust. Verify(信頼するな。認証しろ。)」というスローガンに代表されるように、トラストレスな未来を提唱しています。例えばインドではおよそ1/3の人に戸籍がなく、銀行口座も作ることができません。Web3は現在の信頼を元に成り立つ金融では救いきれない範囲の人々を助ける手段にもなり得ます。De-Fi(分散型金融)は、トークンやクリプトウォレットとスマートコントラクトを活用して金融商品を表現しています。クリプトウォレットは誰でも作成でき、クリプトウォレットを保持する人はだれでもDe-Fiを利用することができます。

## 新しいコミュニティとイノベーション

NFTやガバナンストークン(仮想通貨)は、新しいコミュニティを創っています。これらとスマートコントラクトを活用すれば株式や通貨、データの所有や契約をブロックチェーン上に表現できます。例えば、DAO(自律分散型組織)を立ち上げてトークンを活用し資金調達を行ったり、NFTコレクションをブランディングに活用してコミュニティ価値を上げたり、それらのチャンスが誰にでも与えられるようになりました。イノベーションのアイデアをその人なりに表現して人々の共感を獲得し、共に実現へ向かうことのできる世の中になってきています。
【PHP】画像のサイズや容量、ファイル形式でバリデーションをかける

# はじめに
こんにちは、

フォームを作る際、名前や生年月日とともに写真等の画像ファイルを送信させるとき、あるかと思います。

今回はそういった際の画像にたいしてバリデーションをかけるやり方を解説しようと思います。



# 入力画面

まずは基本となるフォームです。

inputタグのtype属性をfileにしてください。
これにより、ファイルのアップロードボタンを設置できます。

また、formタグのenctype属性をmultipart/form-dataにしてください。
画像をsubmitする際は必須となります。

```php:entry.php
 <form action="./confirm.php" method="POST" enctype="multipart/form-data">
    <tr>
       <th>写真</th>
       <td>
          <div>
             <input type="file" name="picture" class="js-upload-file" id="picture_upload" >ファイルを選択          
           </div>
        </td>
    </tr>
 </form>
```


#  確認画面

submitされた内容を確認画面で受け取ります。
普段テキストなどは`$_POST`で受け取るかと思いますが、画像の場合は`$_FILES` で受け取ります。

$_FILESはとても便利な変数で、それぞれ以下の値を格納してくれています。


$_FILESはそれぞれ以下を、格納してます。


```
$_FILES['inputで指定したname']['name'] :ファイル名

$_FILES['inputで指定したname']['type'] :ファイルのMINEタイプ

$_FILES['inputで指定したname']['tmp_name'] :一時保存ファイル名

$_FILES['inputで指定したname']['error'] :アップロード時のエラーコード

$_FILES['inputで指定したname']['size'] :ファイルサイズ(バイト単位)
```



これらを使ってバリデーションをかけていきましょう。




```php: confirm.php
<?php

//バリデーションチェック
$error = array();

//許可するMIMEタイプ
$file_type = array(
  'image/jpeg',
  'image/png',
);

   
    $image_size = getimagesize($uploaded_path);//画像の縦幅、横幅の取得

    if (!in_array($_FILES['picture']['type'], $file_type)) {
      $error['picture'] = 'jpgもしくはpng形式の画像をアップロードしてください。';
    } elseif ((int)$_FILES['picture']['size'] > 2097152){
      $error['picture'] = '2MB以内の画像をアップロードしてください。';
    } elseif ($image_size["0"] > 450){
      $error['picture'] = '横サイズ450px以内の画像をアップロードしてください。';
    } elseif ($image_size["1"] > 600){
      $error['picture'] = '縦サイズ600px以内の画像をアップロードしてください。';
    }



 //バリデーションエラーがある場合は入力フォームに戻す
    if ( count( $error ) > 0 ) {  
      header("Location: ./entry.php");
      exit();
    }
```

# おわりに
はい、これでバリデーションの処理を作ることができました。ぜひ参考にしてみてください。
Docker Engineについて調べてみた。

# はじめに

Docker Engineについて調べてみた。

# 最終更新日

2022年8月15日

# 環境の情報

OS
Ubuntu20.04

# 注意

最新の状態を確認して下さい。

# 公式さまはこちら
https://docs.docker.com/engine/api/
https://github.com/docker/docker.github.io/blob/v17.06-release/engine/docker-overview.md
https://docs.docker.jp/v1.12/engine/understanding-docker.html
https://docs.docker.com/engine/api/

# 参考さまはこちら
https://qiita.com/megadreams14/items/32a3eed4661e55419e1c
https://wa3.i-3-i.info/word168.html
https://zenn.dev/ryoatsuta/articles/64dcc2e2b4e0cf
https://tech.012grp.co.jp/entry/rest_api_basics


# 概要

docker.sockのエラーなど
よく意味はわかっていないが、
とりあえず調べて上から出てきたもので直している、みたいな状況でしたので、
それでは、知識として、あまりよろしくないかなと思い、少し調べてみました。


# ソケット

プログラムとネットワークを繋げる接続する箇所のこと。


# docker.sock

・Dockerのソケットファイル。
・/var/run/docker.sockにある。
・Dockerデーモンとの通信に使われる。
・dockerコマンドを実行するために使われる。


# Docker エンジン

Dockerの中核となっている箇所。
主に、以下の3つで出来ている。

Docker CLI
Docker Engine API
Dockerデーモン


# Dockerデーモン

イメージのビルドをしたり、やコンテナを動かしたりする。
   

# Docker CLI

Dockerコマンドを実行する。
Docker Engine API を呼び出したりする。


# Docker Engine API

インターフェースを規定する。
プログラムがデーモンと通信に使うものであり、何をするか指示する。
Python　無名関数

# 無名関数とは
・無名関数（匿名関数）とは、名前のない関数のことです。
・主に関数の名前をつける必要がない簡単な処理で終わるような関数を作る場合に使用します。
・無名関数を作るには、lambda（ラムダ式）という書式を用います。
***
### 書式
```
変数 = lambda 引数1, 引数2 : 式
```
***
## 通常の書き方
```
def func(引数1, 引数2):
    return 返り値
```
***
### 下記の2つの分は同じ処理、同じ結果となります。
```
def double(n):
    return n * 2
```
と
```
lambda n: n * 2
```
***

### 下記は同じ結果となります。
```
def double(n):
    return n * 2

lambda_ver = lambda n: n * 2

print(double(2) == lambda_ver(2))
# True
```

### lambda式は、sorted(), map(), filter()などの関数に渡す無名関数として利用されることがあります。
```
a = [1, 2, 3]
print map(lambda x: x ** 2, a)
# [1, 4, 9]
```
### 引数をつけずに実行することも可能です。
```
lambda: random.rand()
```
### ラムダ式では複数行にまたがる文を使うことはできませんが、if文に相当する三項演算子は使用可能です。
```
get_odd_even = lambda x: 'even' if x % 2 == 0 else 'odd'

print(get_odd_even(3))
# odd

print(get_odd_even(4))
# even
```

### PEP8ではlambda式には名前を付けないのが推奨
・これまでの例のようにラムダ式に名前を割り当てる（ラムダ式を変数に代入する）とPythonのコーディング規約PEP8の自動チェックツールなどでWarningが出ることがあります。
・ラムダ式は呼び出し可能なオブジェクトを引数で渡すときなどに名前を付けずに使うためのもので、名前を付けて関数を定義する場合はdefを使うべきとあります。
・[PEP8-- Style Guide for Python Code | Python.org](https://peps.python.org/pep-0008/#programming-recommendations)
```
Do not assign a lambda expression, use a def (E731)
```

以上、無名関数について簡単に解説しました。
基本情報（正規化2）

https://qiita.com/jupippii/items/e8f7a7d3f6481f8d3c05

上記の続きです。

## 第２正規系の表は部分関数従属している列を切り出した形
|  受注No |受注日付 |顧客コード  |顧客名称  |商品コード |商品名 |単価  |数量  |
|---|---|---|---|---|---|---|---|
|1011 |2010/11/12  |C010  |ほげ  |B101  |紙ファイル  |50 | 12
|1011  |2010/11/12|C010  |ほげ  |B102  |3色ボールペン  |300 | 8
|1012  |2010/11/14|C021  |ふが  |B111  |ハサミ  |800 | 2
|1012  |2010/11/15|C022  |ほむ  |B131  |いかすみ  |900 | 8

「受注No」に部分関数従属しているのが「受注日付」「顧客コード」「顧客名称」
「商品コード」に部分関数従属しているのが「商品名」「単価」「数量」

上記を分離させたものが以下のようになります。

**受注表**
|  受注No |受注日付 |顧客コード  |顧客名称  
|---|---|---|---|
|1011 |2010/11/12  |C010  |ほげ  |
|1011  |2010/11/12|C010  |ほげ  |
|1012  |2010/11/14|C021  |ふが  |
|1012  |2010/11/15|C022  |ほむ  |

**商品表**
|商品コード |商品名 |単価  |数量  |
|---|---|---|---|
|B101  |紙ファイル  |50 | 12
|B102  |3色ボールペン  |300 | 8
|B111  |ハサミ  |800 | 2
|B131  |いかすみ  |900 | 8

**受注明細表**

|  受注No |商品コード |数量|
|---|---|---|
|1011  |B101  |50 | 
|1011  |B102  |50 | 

第二正規形にできました。

## 第３正規形の表は主キー以外の列に関数従属している列を切り出したカタチ

第２正規形の表から、主キー以外の列に関数従属している列を切り出したものが第３正規形となります。

下記を

**受注表**
|  受注No |受注日付 |顧客コード  |顧客名称  
|---|---|---|---|
|1011 |2010/11/12  |C010  |ほげ  |
|1011  |2010/11/12|C010  |ほげ  |
|1012  |2010/11/14|C021  |ふが  |
|1012  |2010/11/15|C022  |ほむ  |

**受注表**
|  受注No |受注日付 |顧客コード   
|---|---|---|
|1011 |2010/11/12  |C010  
|1011  |2010/11/12|C010  
|1012  |2010/11/14|C021 
|1012  |2010/11/15|C022  

**顧客コード**
|顧客コード  |顧客名称  
|---|---|
|C010  |ほげ  |
C010  |ほげ  |
C021  |ふが  |
C022  |ほむ  |

分離させて、第３正規形の表となりました。

## まとめ
第３正規化まで全て出来ているかと言われると、そうではないケースもあり正規化やDB周りはちゃんとした専門書を読む必要がありそうですね。
livewireでproperty(computed property)を使いたい


| PHP   | Laravel |
|-------|---------|
| 8.0.0 | 8.83.5  |

私は以前LaravelのフロントエンドとしてVueを用いproperty(comuted property)をバインドしたことがあり、今回はlivewireで同様のことがしたく調べてみました。<br>Laravelのプロジェクトを作りlivewireをインストールしておきます。また見た目を整えるためTailwind CSSを使っています。
welcome.blade.phpを以下のように修正。
```welcome.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
{{--    ここがキモ--}}
    @livewireStyles
</head>
<body>
{{--以下2行もキモ--}}
@livewire('cal')
@livewireScripts
<script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/ja.js"></script>
<script>
    flatpickr("#strDate", {
            "locale": "ja",
        }
    );
</script>
</body>
</html>
```
今から作ろうとしているlivewire componentの名前はcalです。私の調べ方が悪いのかどんなに探してもわからなかったのですが、livewire componentで外部JavaScriptを使いたいときはここで読み込むと動くようです。
```bash
php artisan make:livewire cal
```
CLASS: app/Http/Livewire/Cal.php
VIEW:  resources/views/livewire/cal.blade.php
と2つのファイルが作られます。それらを以下のように修正。
```cal.blade.php
<div>
    <div>
            <input id="strDate" class="block mt-1 w-full" type="text" name="strDate" wire:model="strDate"/>
        </div>
        <div class="flex">
            @foreach($this->theWeek as $theDay)
                {{ $theDay }}
            @endforeach
        </div>
    </div>
</div>
```
```Cal.php
<?php

namespace App\Http\Livewire;

use Carbon\Carbon;
use Illuminate\Contracts\Foundation\Application;
use Illuminate\Contracts\View\Factory;
use Illuminate\Contracts\View\View;
use Illuminate\Support\Collection;
use Livewire\Component;

class Cal extends Component
{
//propertyの宣言
    public string $strDate;

    /**
     * @return void
     */
    public function mount(): void
    {
//        propertyの初期化
        $this->strDate = Carbon::today()->format('Y-m-d');

    }

    /** computed propertyを定義
     * @return Collection
     */
    public function getTheWeekProperty(): Collection
    {
        /** @var <string> $theWeekArray
         */
        $theWeekArray = [];
        $currentDate = Carbon::parse($this->strDate);
        $theWeekArray[] = $currentDate->format('m月d日');
        for ($i = 0; $i < 6; $i++) {
            $day = $currentDate->addDays()->format('m月d日');
            $theWeekArray[] = $day;
        }
        return collect($theWeekArray);
    }

    /**
     * @return Factory|View|Application
     */
    public function render(): Factory|View|Application
    {
        return view('livewire.cal');
    }

}
```
computed propertyはgetXxxPropertyで定義、値を返すこと。(xxxはcomputed propertyの名前)

このように動きます。
![スクリーンショット 2022-08-15 18.46.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604562/39540a5f-50c1-6897-a3e4-a9720006c35a.png)
火星人大阪オフィス紹介

### オフィスあるよ

![iOS の画像 (5).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462614/54342c39-ef5f-c40a-eeb0-ce128156cc57.jpeg)

合同会社イービルマーシャンズ（Evil Martians)、大阪の江戸堀にオフィスがあります！

イービルマーシャンズは基本的にフルリモートですので、オフィスに行くことはそこまで頻繁にはないですが、オフィスがあるという安心感は悪くないですね。

あと、オフィスだとグッズも置ける、というところが価値の一つです。

![iOS の画像 (4).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462614/88cf6e19-bee3-d6d2-4ff8-4067da42ac43.jpeg)

マックの後ろに貼ってあるシールなどありますので、
お茶を飲みにでも、是非遊びに来てください。

![iOS の画像 (6).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462614/326ea918-845f-0d98-03b8-20811da5214f.jpeg)

ソファーもありますので、寛げます！
（毎日は出社してないので、シール欲しい場合は事前に連絡ください！）
JavaScriptで長くなりがちな条件式を簡潔にまとめるって話


コードを書いていると、if文の条件式が長くなることはありませんか？

よくあるのが、ユーザ権限まわりの分岐ですかね～
この権限とこの権限はこっちの処理するみたいなやつ！

そんな時は、`Array.includes()`を使うとスッキリ読みやすいコードを書くことが出来ます！！


## まずは読みづらいコード😣

```js
if (authority === 'DOG' || authority === 'CAT' || authority === 'MONKEY' || authority === 'RABBIT') {
  // 🐶🐱🐵🐰の処理
} else {
  // その他の処理
}
```

## Array.includes() を使って読みやすくする🤗

```js
const authList = ['DOG', 'CAT', 'MONKEY', 'RABBIT']
if (authList.includes(authority)) {
  // 🐶🐱🐵🐰の処理
} else {
  // その他の処理
}
```


## 変数に判定結果をスッキリ格納できる

```js
const isAuthed = [
  'DOG',
  'CAT',
  'MONKEY',
  'RABBIT',
].includes(authority)
```

## もちろんswitchでもOK！

状況によっては、`switch - case`で書くことも出来ます！

```js
switch(authority) {
  case 'DOG': 
  case 'CAT': 
  case 'MONKEY':
  case 'RABBIT':
    // 🐶🐱🐵🐰の処理
    break
  default:
    // その他の処理
}
```

:::note warn
分岐後の処理が長くなると読みづらくなることがあるので注意が必要です📌
:::


https://querynote.net/
XSS Sample PHP

# はじめに

**以下2行追記です。**:bow_tone1:
<font color="red">もし、XSSがあるか調べたい時どのように調べればいいだろうのヒントになればと以下記事作成しました！</red>
(ここではコード視点というより実際に何かを入力して見つけるみたいなものです。)
https://qiita.com/sachiko-kame/items/d6128c0674a75f5ec809

:cat:XSSのチェックのためにどんなもの打ち込めばいいの？
:bear:本当にそれ攻撃のコードとして機能しているの？
:whale:この対策だけで問題ないかを自分で打ち込んで確認したいのだが、、

みたいな私の中の住人達のモヤモヤがあったので作ってみました！のご紹介記事となります！

基本github参考でよろしくお願いします！

このパターン抜けてない？みたいのあれご指摘よろしくお願いいたします！

あとコード等少し微調整しているので少し動画とか違います。ご了承ください。

# 注意

docker使ったことがないや、Dockerで使用しているipアドレスとかよく分からないだとgithubだけではちょっと説明不足かと思っています。すみません。(実際起動してコードいじりたい方は的なやつです)

# 実際のリポジトリ

https://github.com/sachiko-kame/XSSPHPSample

# 実際確認してる動画

![XSSサンプル.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/4aaa70da-a297-5c9d-32d0-627c0ce8def6.gif)


以下に動画でも上げています。
https://github.com/sachiko-kame/XSSPHPSample/issues/1

# 攻撃コードサンプル(githubの方にも記載)

```
<script>alert('aa')</script>

<p style="background-color: red;">aaaa</p><script>alert('aa')</script>

1 onclick=alert('aa');

javascript:alert('aa')
```

# XSS基本どんなこと気をつけるべき？

```
エスケープ忘れない
""とか囲っているものとかは"のエスケープも忘れず
URLのチェック忘れない。
特殊文字として機能しているものとかのエスケープも忘れずに
属性値は必ずダブルクォートで囲む
```
@ockeghem さんにご指摘いただけたので内容追加させていただきました！ヽ(´▽｀)/ありがとうございます！！!!!

`属性値`とは、以下の場合『aaaa』の箇所です！
```
<input type="button" value="aaaa">
```
更なる補足説明。

```
属性値がダブルクォート『"』で囲まれている例
<input type="button" value="aaaa">

属性値がダブルクォート『"』で囲まれていない例
<input type="button" value=aaaa>
```

# 色々なリンクの参考(githubの方にも記載)

dockerファイルイメージについて 
https://hub.docker.com/_/php

dockerファイルコマンド[build] 
https://docs.docker.jp/engine/reference/builder.html

悪意あるスクリプト参考 
https://www.tohoho-web.com/ex/xss.html

ipaのリンクも 
https://www.ipa.go.jp/files/000017316.pdf

# 最後に
記事みてくださいましてありがとうございます！ヽ(´▽｀)/
rbenvでrubyをアップデートする(mac版)

# rubyアップデートが上手くいかなかった・・・
以下参考に実行したところ・・・
https://prog-8.com/docs/ruby-env

エラーは出なかったものの上手く反映されなかったため備忘録として書いときます。

### ※当記事はprogateで実行してみて出来なかった方に向けて書いています!

### その為、上のprogateのRubyの開発環境を用意しよう！をやってみて上手くいかなければ参考にしてみてください！


# なぜ出来なかったのか？
正直わからなかったので調べた所・・・
どうも設定ファイルが読み込まれていない？と思ったので、
vimで確認編集してみました。


# 解決策
ターミナルで下記を順番に実行してください。
~~~
vi ~/.zshrc
~~~

下記を追記してください。
~~~
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init - zsh)"
~~~
#### ちなみにprogateで実行された方はすでに同じようなのが入力されていると思いますので、
#### exportから後ろとevalから後ろのコードを書き換えてみてください。(exportの記述が2つある場合２つとも消して書き直してください。)
見てみた感じ・・・-zshの記述が必要だったのかな？

次に下記を実行
~~~
source ~/.zshrc
~~~
を実行して反映させれば完了です。

後は、設定したrubyなっているか確認します。
~~~
ruby -v
~~~

これで設定したバージョンになっているか確認したら以上になります。
私は以上で出来ましたので皆様の参考になればと思います。
Python,JavaScript,PHP,Ruby,Perlの基本文法の比較 | プログラミング言語比較

<a href="https://qiita.com/yuki_kimoto/items/f9c2454e7f9130ddb003">Qiita > プログラミング言語の比較</a>

プログラミング言語Python,JavaScript,PHP,Ruby,Perlの基本文法の比較

# Python

https://qiita.com/AI_Academy/items/b97b2178b4d10abe0adb

# JavaScript

https://qiita.com/Fendo181/items/cca476da99e8f09b6b97

# PHP

https://qiita.com/shosho/items/ffbb44eeec9d68b21d99

# Ruby

https://qiita.com/Fendo181/items/eb2cb17f32d99aa01f59

# Perl

https://perlzemi.com/blog/20091226126425.html
自前データで学習したyolov5モデルを使ってgoogle colab上で物体検出

前回の記事の補足になります。独自データで訓練させたyolov5モデルをgoogle colab上で動かす、動作確認の方法です。
↓前回の記事
[独自データでのGooglebColabでのyolov5モデルの訓練とローカルでの実行](https://qiita.com/atsuinui/items/788cbb6f0826881f4ba7)

独自yolov5モデルをcolab上で動かすので、環境構築は不要ですがwebcamからのリアルタイム検出には未対応です。

# 訓練でできたモデルxxxxpt.ファイルをダウンロード
ダウンロードフォルダに移動して名前の変更.

last.pt →　20220815_last.pt　など自分でわかりやすいものに変更
（全角は使わない、スペースは使わない)

# githubに移動
[My_github](https://github.com/atstuyuki/elbow_OCD/blob/main/yolov5_detect_on_colab__ocd_20220815.ipynb)
![2022-08-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444891/cb9d9b68-7b48-3088-fb3e-5c6750080a97.png)

# 左上のOpen in Colabからgoogle colabに移動（google アカウント必要）
　最初の2つのセルを実行して、動作確認（ジダンが検出されればOK)
![2022-08-15 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444891/7da14400-3e21-7dc8-4c80-5f3debe1c50f.png)

# 重み付きptファイルのアップロード

　yolov5フォルダ直下に20220815_last.ptをアップロード
（ファイルを左下スミにドロップするだけ、アップロードしたファイルはgoogle colabの接続が切れると削除される）

![2022-08-15 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444891/42072107-6685-a41b-38f0-00957fb28a80.png)

# 検出させたい画像（動画）のアップロード
フォルダ yolov5/data/images　に検出させたい動画をアップロード
あとで動画ファイル名はシンプルが無難

![2022-08-15 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444891/987fcab1-3a1a-e30e-6977-d903ecc1878e.png)

# detect.py　セルで--source --weightの書き換えと実行
```
!python detect.py --source /content/yolov5/data/images/ocd.MP4 
--weights /content/yolov5/20220815_last.pt 
--conf 0.3
```
これを書き換える↓
```
!python detect.py --source /content/yolov5/data/images/アップロードしたファイル名.MP4 
--weights /content/yolov5/アップロードした訓練済みファイル名.pt 
--conf 0.3
```
セルを実行　検出が開始される！
![2022-08-15 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444891/ee987cd1-56c4-5e97-6436-16350da5b220.png)

yolov5/runs/detect/exp xx (←xxには複数回検出を行った場合xx回目の数字が入る）
にmp4ファイルが作成されているので(動画の場合）これを右クリックでダウンロード
![2022-08-15 (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444891/ce875102-e017-f3af-3250-813e5991d6df.png)
RNN/LSTMで気温予測【2.検証編】

# はじめに
前回はデータの取得、モデルの構築を行った。

https://qiita.com/Lukas04/items/885f5371f82b7ad7a635

https://qiita.com/Lukas04/items/37bedb264ca9d8211375

今回はパラメータを調整しながら精度について検討していく。

# Model 1
LSTMで、パラメータは以下の通り。
```python
# Hyperparameters -------------------------------------
time_step = 240
BATCH_SIZE = 1024
BATCH_SIZE_test = 512
n_hidden = 128
n_layers = 1
LEARNING_RATE = 0.00005
EPOCHS = 100 
# -----------------------------------------------------
```
直前の10日分のデータから予測を行う。

## 損失関数の値の推移
![model1_loss.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512970/4aa73841-9bee-a439-65f0-82662dc7385f.jpeg)
訓練データでは0.000203、テストデータでは0.000270付近で収束した。

## 予測の様子
![model1_pred_sample_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512970/45ef23da-a99a-3281-9ac2-32245b72fc9c.jpeg)
![model1_pred_sample_8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512970/7f98c3d2-5bb9-ba8f-e95a-b8d9d3cbeadf.jpeg)
![model1_pred_sample_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512970/19f183e3-32f8-ae7b-f110-d325a822954d.jpeg)

おおむねよく予測できているが、2枚目のように直前のパターンと違った動きをすると対応できていない。
2枚目のように1日後の予測が大きく外れても2日目に良い予測ができているのが面白い。
安定した気象パターンのときの気温に対する性能は高いようである。

## 時間ごとの誤差に関する統計
![model1_time_loss.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512970/4bcfff85-72bc-3b1c-f874-d8765ff0b990.jpeg)
平均誤差は3～4時間後の予測で1度、17～18時間後の予測で2度程度となった。大きく誤差が生まれることもあったが、75%は3度以内に収まっていた。

# Model2
同じくLSTMで、隠れ層の数を2に変更した。
```python
# Hyperparameters -------------------------------------
time_step = 240
BATCH_SIZE = 1024
BATCH_SIZE_test = 512
n_hidden = 128
n_layers = 1
LEARNING_RATE = 0.00005
EPOCHS = 100 
# -----------------------------------------------------
```
## 損失関数の値の推移
![loss.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512970/bc9aa356-7008-78bc-0031-7a193e78b31a.jpeg)
Model1とほぼ同じ値に収束した。気温のみのデータではこれが最小値になっているのかもしれない。
## 予測の様子
![pred_sample_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512970/9007c10e-66f8-36e3-c337-9848922bec96.jpeg)
![pred_sample_9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512970/10122c82-31f4-b363-81b2-809fc46abc2a.jpeg)
![pred_sample_3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512970/82a4073f-e373-b7e1-e520-43f825c83274.jpeg)
## 時間ごとの誤差に関する統計
![time_loss.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512970/f14895cb-6776-3867-f4a7-5ceb1b16caab.jpeg)
Model1と比べて有意な差はみられなかった。

# 終わりに
隠れノード数を他にも試したが、ある程度大きい数ならば差はみられなかった。次回は気温以外のデータも用いて精度が上がるか確かめたい。

https://qiita.com/Lukas04/items/37bedb264ca9d8211375
【VSCode】初期設定

# 初期設定例
`Command` + `,` でユーザー設定画面を開く
## Files

*  **Insert Final Newline** 
ファイルの保存時に最終行に空行を挿入します

*  **Trim Final Newlines**
ファイルの保存時に最終行以降の行をトリミングします

* **Trim Trailing Whitespace**
ファイルの保存時に行末の空白をトリミングします

## Workbench
*  **Color Theme** 
好みの配色を選択しましょう

# おすすめプラグイン
サイドバーの拡張機能アイコンから検索
## 基本
*  [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
拡張子に合わせてアイコンを表示してくれる拡張機能です

* [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
VSCodeを日本語化します

## 整形
* [EditorConfig for VSCode](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
[EditorConfig](https://editorconfig.org/) のVSCode版の拡張機能です
`.editorconfig` にルールを定義して、プロジェクトに配置して使います

* [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
対応する括弧を色分けして表示してくれる拡張機能です

* [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
[Prettier](https://prettier.io/)はソースコードを解析して、ルールに応じてコーディングスタイルを適用してくれるコードフォーマッターです

* [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
スペルミスを検出してくれる拡張機能です
タイポを減らせます

## 補完
* [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
ペアになっているHTML/XMLタグの名前を自動的に変更する拡張機能です

* [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
HTML/XMLの終了タグを自動的に追加してくれる拡張機能です

* [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
ファイルパスを補完してくれる拡張機能です

## フロント系
* [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)
HTMLドキュメントに対するCSSのサポートを行う拡張機能です
主にクラス属性の補完、ID属性の補完、css、scssファイルの検索をしてくれます

* [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)
CSSインラインエディターのように、HTMLのidやclassへ定義ジャンプしたり、HTMLファイル上でCSSスタイルを確認できる拡張機能です

* [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)
JavaScriptやTypeScriptでimportしたファイル容量を表示してくれる拡張機能です

* [Babel JavaScript](https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel)
ES201x や React JSX の JavaScript シンタックスハイライトを表示してくれる拡張機能です

## Git
* [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
コミット履歴をツリー形式で表示してくれる拡張機能です

* [Git Lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
ソースコードの行またはコードブロックがいつ、誰がコミットしたのか表示され、コードの歴史を知るのに役立ちます

## その他
* [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
リアルタイムで共同編集やデバッグができる拡張機能です
ペアプログラミングをする際に使用します

* [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)
AI支援によりAPIサジェスト一覧の精度を向上させる拡張機能です

# [推奨] codeコマンドでターミナルからVSCodeを起動する
## インストール
* VSCodeで `Command` + `Shift` + `P` でコマンドパレット開く
* 「Shell」を検索
* インストール

## 使い方
### カレントディレクトリをプロジェクトとして開いて起動

```
$ code .
```

### ファイルを指定して起動

```
$ code src/resources/js/hoge.js
```
【Node.js】Node.js を nodenv で管理する

# Node.jsとは
ブラウザ上で動作するJavaScriptを、サーバー上で動作させるためのソフトウェア

## Node.jsをフロントエンド開発でも使っているのはなぜ？
*  **npm** でのパッケージ管理
* パフォーマンス最適化のために、JavaScriptやCSSファイルを少数のファイルにまとめる（バンドル）
* テストツールを用いてユニットテストやE2E テストを記述する

など、Node.jsの役割はいろいろある

### npm
* Node.jsのパッケージ管理システム（パッケージのインストールと整合性の管理をする）
* 現在ではフロントエンドのパッケージ管理にも使用されるようになった

## Node.jsのインストール
[推奨] Homebrew経由の **anyenv** 経由の **nodenv** 経由でNode.jsをインストールする

### anyenv
* 「**env」をまとめて管理してくれる

### nodenv
* プロジェクト毎のバージョン切り替えが楽になる（詳しくはこの後解説）

## インストール手順
### ① Homebrewでanyenvをインストール
```
$ brew install anyenv                                 
$ echo 'eval "$(anyenv init -)"' >> ~/.zshrc
$ exec $SHELL -l          // シェルを再起動
```
※「>> ~/.zshrc」の部分は使用シェルによって適宜変更                                            
​
### ② anyenvでnodenvをインストール
```
$ anyenv install -l            // anyenvでインストール可能な「**env」の一覧を表示
$ anyenv install nodenv
$ exec $SHELL -l               // シェルを再起動
```
​
### ③ nodenvでNode.jsをインストール
```
$ nodenv install -l       // nodenvでインストール可能なNode.jsのバージョンを表示
$ nodenv install 14.4.0   // バージョンを指定してインストール
```

## 使い方
### デフォルトで使うバージョンを設定

```
$ nodenv global 14.4.0          // 先ほどインストールしたv14.4.0を使用
$ node -v
v14.4.0
```
​
### プロジェクトで使うバージョンを設定

```
$ nodenv install 12.18.2          // 使用するバージョンをインストール
$ mkdir testdir                          
$ cd testdir                      // プロジェクトルートに移動
$ nodenv local 12.18.2            // バージョンを指定
$ node -v
v12.18.2
```

- `$ nodenv local バージョン` を実行すると、プロジェクトルートに「.node-version」ファイルが作成され、そのプロジェクトで使用するバージョンが記載される
- プロジェクトディレクトリにいる時は「.node-version」のバージョンが使用され、それ以外の時は `$ nodenv global バージョン` で設定したデフォルトのバージョンが使用される

## Node.jsはバージョンによって挙動が異なる
- 開発者各々のローカルのNode.jsのバージョンが違うと... **自分の環境では動くのにレビュワーの環境では動かない！** 
- 本番環境のNode.jsとローカルのNode.jsのバージョンが違うと... **ローカルでは動くのに、本番ではエラーが発生！** 

nodenvなら「.node-version」ファイルをGitで共有すれば、これらの問題を防げる:innocent: 
複数の案件を掛け持ちしている時も、プロジェクト毎にNode.jsのバージョンを切り替える必要がない:innocent: :innocent: 

※上記は各々のローカルでNode.jsを動かす場合のみ考慮が必要（Dockerのコンテナ内でNode.jsを動かすプロジェクトでは気にしなくて良い）