OmniAICreator/Qiita-1.07M huggingface dataset:
「エラスティックリーダーシップ」を改めてまとめてみた

【完走賞】MxShun ひとりマラソン 🏃 Advent Calendar 2022 毎週月曜日は読書した内容をアウトプットしよう！3記事目です。

本書はオライリーが発行する、「エラスティックリーダーシップ」というリーダーシップモデルをもとにチームを学習する力のある自己組織化された状態へと育てる方法を解説した本です。

https://www.oreilly.co.jp/books/9784873118024/

一度、[AStudy+](https://askul.connpass.com/event/204742/) という LT イベントで整理し発表したことがあるのですが、学び直しの意味も込めてその内容を再整理したいと思います。
<br />
<script async class="speakerdeck-embed" data-id="84afbb63291a48e591f8d4835701e8eb" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>

## まとめ
いきなりまとめですが、**エラスティックリーダーシップ**というリーダーシップモデルでは「チームの状況に合わせたエラスティックなリーダーになろう。」ということが書かれています。
ちなみに、**エラスティック**とは Elastic Compute Cloud とかの Elastic のことで、私は「柔軟性」と解釈をしています。つまり、チームの状況に臨機応変に合わせる柔軟性のあるリーダーになろうということです。

下の図は、チームの状況 と それに合わせたリーダー像 を図示したものです。
３つの円はチームの状況と全体に占める割合を、矢印はチームの状況の遷移を示しています。そして、円の近く示すのがリーダー像です。

![10分で「エラスティックリーダーシップ」をアウトプット_210315.pptx.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488859/b9bbbb48-8492-d800-2eb3-afa8f8d06a9e.png)

## チームも状況とリーダー像
３つの状況とそれに合わせたリーダー像を説明します。自分がいま属するチームがどの状況にあるか当てはめて考えてみてください。

### サバイバルモード
サバイバルモードとは次の状態のチームを指します。全体のなかで一番大きな割合を占めます。

![10分で「エラスティックリーダーシップ」をアウトプット_210315.pptx.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488859/91355b38-8055-136e-6623-704bac38977f.png)

そして、サバイバルモードにいるチームに適したリーダーは指揮統制型リーダーです。

![10分で「エラスティックリーダーシップ」をアウトプット_210315.pptx (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488859/5116f302-4edc-d328-7657-ac86ec61fd7e.png)

### 学習モード
学習モードは次の状況のチームを指します。

![wo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488859/1eb0a722-e16a-9153-df78-bd306ff6ae36.png)

そして、学習モードにいるチームに適したリーダーはコーチです。

![ite.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488859/aca01252-7b1e-1d6a-65b5-4647167e5df2.png)

### 自己組織化モード
最後の自己組織化モードは次の状況のチームを指します。

![10分で「エラスティックリーダーシップ」をアウトプット_210315.pptx (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488859/54d95e31-5eb0-b1f2-f706-daf902582d99.png)

そして、自己組織化モードにいるチームに適したリーダーはファシリテータです。

![10分で「エラスティックリーダーシップ」をアウトプット_210315.pptx (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488859/92655f04-e450-b121-284c-29a13d034382.png)

## 所感
リーダーたるもの、メンバー全員が滞りなく作業できるように指示を出すものと認識していた自分にとってはかなり衝撃的な内容でした。エラスティックではなかったなと。
チームは生もので日々刻々とその状況は変化しています。リーダーも（はたして、リーダーという言い方が正しいかもはなはだ疑問ですが）、その状況に応じて対応することが大切だといまでは理解を新たにしています。

さて、みなさんの所属するチームはどの状況にあてはまりましたでしょうか。
contenteditableのkey入力を確認

# 概要
- contenteditableな実装を行う際、各ブラウザでキー入力の値が異なる為、判断するうえで確認するためのHTMLを記載

## ソース
```
<html>

<head>
    <script>

        document.addEventListener('keyup', logKeyUp);
        document.addEventListener('keydown', logKeyDown);

        function logKeyUp(e) {
            console.log("keyup keyCode:" + e.keycode);
            console.log("keyup key:" + e.key);
            console.log("keyup code:" + e.code);
        }

        function logKeyDown(e) {
            console.log("keydown keyCode:" + e.keycode);
            console.log("keydown key:" + e.key);
            console.log("keydown code:" + e.code);
        }

    </script>
</head>

<body>
    <div contenteditable="true"></div>
</body>

</html>
```

## 解説
- keydown(キーを押下したタイミング)、keyup(キーを離したタイミング)でキー入力値を確認する

## IME入力時の値
### Chrome 90.0.4430.212
#### キー入力「A」
|種別|通常入力|IME入力中|IME入力確定|
|-----------|------------|:------------|:------------|
|keyup keyCode|65|229|229|
|keyup key|a|Process|Process|
|keyup code|KeyA|KeyA|KeyA|
|keydown keyCode|65|229|229|
|keydown key|a|Process|Process|
|keydown code|KeyA|KeyA|KeyA|

#### キー入力「Enter」
|種別|通常入力|IME入力中|IME入力確定|
|-----------|------------|:------------|:------------|
|keyup keyCode|13|229|229|
|keyup key|Enter|Process|Process|
|keyup code|Enter|Enter|Enter|
|keydown keyCode|Enter|229|229|
|keydown key|Enter|Process|Process|
|keydown code|Enter|Enter|Enter|

- 上記の結果を見ると、IME入力中・IME入力確定時でkeyCode・keyは同一の為、IME入力確定時に処理をしたい、といった場合に対応できない。
    - その為、keyCodeが229 もしくはkeyがProcessの場合、codeがEnterであるか否かでIME入力確定時に処理を行うことが可能となる。
unixのscreenコマンドの設定ファイルで自分が設定している内容

```vim
escape ^Z^Z
term xterm-color
vbell off
startup_message on
autodetach on
hardstatus alwayslastline "[%02c] %`%-w%{=r wr}%n %t%{-}%+w"
termcapinfo vt100-color 'is=\E[r\E[m\E[2J\E[H\E[?7h\E[?1;4;6l'
```
ねこプロについて

## はじめに
この記事は[ねこプロアドベントカレンダー](https://qiita.com/advent-calendar/2022/nekopro)初日の記事です。

こんにちは。プログラミング学習コミュニティー『ねこプロ』を運営している、[まさきち](https://twitter.com/masakichi_eng)です。
普段は都内でWEB系のエンジニアとしてシステムの開発や保守運用を行なっております。

ねこプロは私のようなエンジニアやエンジニアを目指して勉強している方たちが、プログラミングについて分からないこと質問したり、雑談したり、みんなで集まってゲームしたり、気軽にコミュニケーションを取れる場所です。

今回はそんな『ねこプロ』についてご紹介します。

## ねこプロとは

マイペースにプログラミングを学習できる無料のコミュニティです。 
「ねこのように自由に」をモットーにして気軽に緩く活動しております。
Discordで運用しており、現在200名ほどのメンバーが活動しています。

技術的な投稿はもちろん、直接プログラミングに関係ない雑談もしてエンジニア同士がゆるくコミュニケーションを取れる場です。

最近はオンラインでゲームをしたり、オフ会を開催したり、メンバー同士で交流を深めています。

![ねこプロ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1008745/3d10f2b4-96d4-2498-b486-f15b2454be32.png)


## ねこプロの活動

- オンラインLT会
    - メンバーが発表テーマを決めスライドを作成してLTを行なったりしています。
- アプリケーション共同開発
    - 複数人で一緒にアプリケーションを開発しています。
- オフライン交流会
    - ねこのいるレンタルスペースを借りてLT会を行なったり、メンバー同士で飲み会を行ったりしています。
- Discordゲーム会
    - [ラウンジ](https://loungegame.site/top/2OEXACZB7VANVPSBHWPKKTAH2Q)、[Wevox](https://wevox.io/valuescard)やDiscordのゲームをみんなでプレイして遊んだりもしています。
- 勉強配信
    - 勉強している様子をメンバーがリアルタイムで配信したり、勉強会の配信を行ったりしています。一緒に勉強してるのをダイレクトに感じられます。
- 企業様との連携
    - プログラミングの勉強講座やIT業界のお話を聞かせていただいたりしています。お礼にねこプロ内で企業様の宣伝をさせていただいてます。
- アドベントカレンダー
    - 日頃から積極的に技術系のアウトプットしている方が多いので、今年はメンバーとアドカレに参加させていただきました。皆さんの記事を読むのが楽しみです。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1008745/5c91ca82-55a5-1b34-9d46-3ef2d11c8d1a.png)

## ねこプロ内のチャンネルや利用の手引きのご紹介
メンバーがNotionにまとめてくれました。
コミュニティの説明や利用規約、Discord各種チャンネルの種類や用途、活動の履歴などが一覧で確認出来るようになっています。
ねこプロにご興味のある方はぜひご覧ください。

https://nekoprograming.notion.site/80ff4ae9f8d549cf95475c6564df9854

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1008745/6bd4838f-ffcf-b80a-83c1-3d412fc82eb0.png)



## ねこプロができるまで
私が異業種からエンジニアになるためにプログラミングを学習していた時、まわりにエンジニアの知り合いがおらず孤独感を感じていました。

仲間を見つけるためにコミュニティーに入ろうと思い探していましたが、当時SNSでは転職成功！やプログラミングで〇〇円稼ぐ！のような発信や、コミュニティーが多く見受けられました。

もっと気楽にエンジニア同士が勉強したり、交流できたりするコミュニティが欲しいという思いから[ちょめ子](https://twitter.com/chome2xx)さんと一緒にねこプロを立ち上げることに。

始まっても長く続かずにすぐ終わってしまうコミュニティーを今まで何度も見てきたため、コミュニティの目的や設計をしっかり行ってからスタートしたいと考えていました。

ちょめ子さんと一緒にアイデアを出し合い、利用規約などもしっかりと整えて2021/06/05にTwitterで募集をかけて活動をスタートしました。

![ねこプロマインド.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1008745/0f1800c4-4a01-0e00-dbec-90798447beba.jpeg)

https://twitter.com/masakichi_eng/status/1401010908529238020


## ねこプロの運営
以前は私とちょめさん2人で運営しておりましたが、最近は他のメンバーにも徐々に運営に関わっていただいてます。
Discordに詳しいメンバーにチャンネルやBotの設定を行なっていただいたり、Notionでチャンネルの一覧と説明を作成していただいたり。
メンバーにもアイデアを出してもらう事でより良いコミュニティーになっていくので、みんなでねこプロを作っていきたいと考えています！

## ねこプロの課題
コミュニティを運営していく中で日々課題が山積みです。

例えば、下記の問題があります。
- 新規に参加してくれた方の投稿が少なく、アクティブメンバーが固定化されて来てしまっている
- チャンネルへの投稿頻度が少なくなって過疎化してしまう
- 関東圏以外のメンバーとの交流が薄くなりがち

コミュニティ継続と過ごしやすい雰囲気作りのため、定期的に振り返りを行いカイゼン活動をしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1008745/dfa4f408-2bf2-6212-730a-1b7df4f1690b.png)

## 最後に
最後まで読んでいただきありがとうございます

新規メンバーは随時募集中ですので、興味を持っていただけた方は[＠まさきち](https://twitter.com/masakichi_eng)や[@ねこプロ運営事務局](https://twitter.com/NEKO_PROGRAMING)もしくはねこプロメンバーにDMいただければと思います。

引き続き、ねこプロメンバーのアドカレ記事もぜひご覧ください！！
MATLAB で Digital Lossy VST プラグインを作る ～ 聴覚心理特性とは？ ～ 非同期バッファで MDCT（予告編2）

[<B>MATLAB/Simulink Advent Calendar 2022</B>](https://qiita.com/advent-calendar/2022/matlab) に参加予定です。
<br>
ちょっと新しいモードを思い付いたので追加しました。
<br>

・使用ツール
<dt>　MATLAB</dt>
－Audio Toolbox
<br>
<br>

・デモ動画
<B>[Digital Lossy VST プラグイン (Mode4-6)]</B><iframe width="876" height="700" src="https://www.youtube.com/embed/9xSS8To6U_M" title="Digital Lossy Plugin (Mode4-6)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<br>
<br>
<H4>[<B>note</B>]<a href="https://note.com/leftbank/"</a> にUpします。</H4>
コードを別な言語に書き換えるサービスの中身をご照覧あれ

どうも
[個人開発アドベントカレンダー](https://qiita.com/advent-calendar/2022/individual-developers)の2日目を担当させていただきます [@nabettu](https://qiita.com/nabettu) です。

個人開発ということで、最近個人開発したサービスの中身をこっそり教えちゃいます。
コピーして作ってみてもいいよ！

## サービス紹介
![CleanShot 2022-11-28 at 23.49.58@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40154/4198172e-d704-5598-86e2-69c652ce4ea9.png)

https://translate-programming-language.nabettu.com/

ということで、タイトルの通り **「コードを別な言語に書き換えるサービス」** を作ってみました。
言語を選択してコードを書いて、変換先の言語を選択してTranslateボタンを押すだけです。

これは２つめ以上のプログラミング言語を習得しようとしているプログラマがターゲットで、使い慣れた言語では書けるコードを学習中の言語でどう書くかがわかると便利だろうということで作りました。

また、ProductHuntに出してみたりもしましたが、Education部門で週4位というなんとも言えない結果になりましたｗ
![CleanShot 2022-11-22 at 14.21.58@2x (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40154/c990ea4b-9f01-7abb-a765-215cc3f2f1a4.png)

## 使っている技術
- Next.js
- ChakraUI
- Vercel
- OpenAI

を使って作ってみました。UIやホスティングは特に解説がいらないと思いますので、今回はOpenAIの紹介をしたいと思います。

## OpenAIのGPT-3とは

GPT-3はAI研究企業であるOpenAIが発表した、汎用言語モデルです。
最近話題のChatGPTもこちらの会社がやってます。

登録してAPI経由でテキストを送ると、AIに続きの文を書いてもらえます。

こちらにチュートリアルがあるので、ぜひ触ってみてください。SDKを使えばいいのでコード自体はめちゃめちゃ少なく書けます。
10分くらいでできるのでぜひ！

https://beta.openai.com/docs/api-reference/introduction

実際に使っているコードをサンプルに、使い方を説明します。

### 実際の今回のコードの紹介

Next.jsなので、/api配下にtsファイルを置くだけです。
なんとバックエンドのコードは呪文を含めて40行くらいでした。

テキストを送ると続きを書いてくれるので、今回は
「JavaScriptで書くとこう、このコードをPHPで書くと〇〇」の〇〇の部分をAIに書いてもらう形ですね。

バックエンドはパラメータを直してOpenAIのAPIを叩くだけで

- 入力言語
- 入力コード
- 出力言語

を含めた呪文を書いて、出力コードを返す形です。パラメータはアウトプットしたい内容に応じて都度調整するといいと思います。

```js
import { NextApiRequest, NextApiResponse } from "next";
import { Configuration, OpenAIApi } from "openai";

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

function generatePrompt({
  inputLang,
  outputLang,
  inputProgram,
}: {
  inputLang: string;
  outputLang: string;
  inputProgram: string;
}) {
  return `${inputLang}というプログラミング言語で書いた下記のプログラムがある。
${inputProgram}

これを${outputLang}というプログラミング言語で書くと以下のようになる。
`;
}

const translate = async (req: NextApiRequest, res: NextApiResponse) => {
  const completion = await openai.createCompletion({
    model: "text-davinci-002",
    prompt: generatePrompt(req.body),
    temperature: 0.6,
    max_tokens: 256,
  });
  res.status(200).json({ result: completion.data.choices[0].text });
};
export default translate;
```

見てわかるとおり、手抜きしていわゆる”呪文”も日本語のままですw
※ホントはバリデーションとかもありますが省略

実際の出力されるコードの品質はものによるのでなんとも言えない結果もありますｗ
js→phpとかであれば、割とネット上にコードが転がっているからか、コンパクトな関数程度であれば割とちゃんと動くものが出てきます。
しかし情報の少ない言語は、、、笑

### 料金体系
短いコードなら安いので、こういうお遊びサービスを作る分には無料で試せる範囲に収まります。

https://openai.com/api/pricing/

## まとめ
チュートリアルに毛が生えたようなコードにUIつけただけのサービスを試しに作ってみましたが、めちゃめちゃ楽にできました。
作業時間は賞味3時間くらい。しかし意外とそれっぽいサービスが出来たと思いません？
みんなもOpenAIがめちゃめちゃ楽に使えるから、これでサービスを作って「これで俺もAIエンジニアだ！」って言ってきましょ〜

終わりです。

https://translate-programming-language.nabettu.com/

明日は@retoruto_carryさん「今年作ったものについて書く！」をよろしくお願いします！
【スキル管理】Cloud9でPuzzleSkillsを触ってみた

初めて投稿します。ぴおやんです。
今回はスキル管理ツールのOSSを触っていこうと思います。

スキル管理ツールのOSSを使用した記事は少ないですが、社内の個人情報管理を社外に管理させるのは怖いので内製の需要はあるのではないのではないかと思います。さあ、使っていきましょう。

今回構築するアプリケーションはこれ⇩

https://github.com/puzzle/skills

「PuzzleSkills」です。

実行環境
AWS Cloud9
Platform: Ubuntu Server 18.04 LTS
InstanceType: t3.medium

基本的にReadme通りに進めていきます。

まずはリポジトリをマシンにクローンします。

```bash
git clone https://github.com/puzzle/skills.git
```

次にリポジトリに移動します。

```bash
cd skills
```

## backendを構築する

``` ruby -v```で確認するとCloud9のRubyのバージョンは2.6.3なので、バージョンを2.7に上げます。

2.7をインストールできるようにRVMの最新安定バージョンをインストールします。

```bash
rvm get stable
```

RVMを使用してRubyのバージョン2.7をインストールします。

```bash
rvm install 2.7
```

インストールしたRubyのバージョンを使用するようにRVMに指示します

```bash
 rvm --default use 2.7
```

Rubyパッケージマネージャーをインストールします

```bash
gem install bundler
```

PostgreSQLを使用するために必要なヘッダファイルをインストール

```bash
sudo apt install libpq-dev -y
```

バンドラーでGemをインストール
```bash
bundle install
```

docker-composeをインストール
```bash
sudo apt install docker-compose -y
```

docker-compose のバージョンを確認

```bash
docker-compose -v
```

dockerをセットアップします
```bash
docker-compose up -d
```

Railsにデータベースをセットアップさせます
```bash
rails db:setup
```

バックエンドサーバーを実行します
```
rails s -p 3000
```

## Frontendを構築する
新しいTerminalにて
Node Version Managerを使用してNode Version 12をインストールする
```bash
nvm install 12
```

frontendフォルダーに移動します
```bash
cd skills/frontend
```

NPMでEmber-Cliをインストールする
```bash
npm install -g ember-cli
```

yarnをインストールします
```bash
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install yarn -y
```

全てのパッケージをインストールします
```bash
yarn install
```

node.jsをダウングレードします
```bash
sudo apt install nodejs npm -y
sudo npm install n -g
sudo n stable
sudo npm update npm -g
sudo n 12.0.0
```

これだとまだsudoをつけないときのnodeコマンドがダウングレードされていないので、現在使用しているパスを削除します



```bash
which node

rm /home/ubuntu/.nvm/versions/node/v16.18.1/bin/node

source ~/.bash_profile
```

frontendを開始します
```bash
ember server --proxy=http://localhost:3000 --port 8080
```

※Cloud9のプレビュー機能ではアプリケーションは正常に表示されません。
## まとめ
実際のアプリケーションはドイツ語だったので使用するにはちょっと改善が必要かもしれません。
React勉強備忘録(基礎知識編)

## 動作環境
-----
npm 8.12.1
node 18.4.0
React 18.2.0

## 基礎知識
-----
#### JSX
JSXは「JavaScript XML」の略
Javascript内にhtmlの記載ができる。
jsx内で、htmlのclass属性を実装するには、jsのclass(オブジェクト指向とかのクラス)と区別するために、classNameと記述する必要がある。
※ファイルの拡張子は.jsxにする。
　jsでもjsxを使用できるが、明示的に.jsxにしておいたほうが無難である。
```jsx
import React from 'react'

const BasicHeadingOne = (props) => {
  return (
    <h1 className={props.className}>
      {props.text}
    </h1>
  )
}

export default BasicHeadingOne
```

##### 記載方法
最上位のタグがないと文法上エラーとなってしまう。
```jsx
import React from 'react'

const Article = () => {
  return (
    <> // ここが最上位のタグ
      <BasicHeadingOne text="jsxについて" />
      <p>jsxの特徴や、使用方法について紹介しています</p>
    </>
  )
}

export default Article
```

#### コンポーネント
Reactで開発を行う際は、コンポーネント単位でソースコードを記述していく
```jsx
const TextInput = (props) => {
  const { type, name, value, className, onChange, required, id, onClick, placeholder } = props
  return (
    <input
      type={type}
      name={name}
      value={value}
      className={className}
      onChange={onChange}
      required={required}
      id={id}
      onClick={onClick}
      placeholder={placeholder}
    />
  )
}

export default TextInput
```

###### コンポーネントの種類
クラスコンポーネントと関数コンポーネントの２種類が存在する。
- クラスコンポーネント
```jsx
import React from "react";

class ClassComponent extends React.Component {
  render() {
    return <div>This is Class Component</div>;
  }
}
```

- 関数コンポーネント
```jsx
import React from "react";

const Component = () => {
  return <div>This is Functional Component</div>;
};
```

※現状は関数コンポーネントを使用するほうが一般的になっている。

#### Props
コンポーネントの再利用性を向上させるための仕組み
親コンポーネントから子コンポーネントへデータや関数を渡す際は、propsを使用する。
※子から親へのデータを渡すことは不可
```jsx
import React from 'react'

const List = (props) => {
  return (
    <ul class="list-group">
      {props.list.map((data) => (
        <li key={index.toString()} class="list-group-item">
          {data.title}
        </li>
      ))}
    </ul>
  )
}

export default List
```

###### 複数propsの渡し方
単純に記載するとこうなる。
```jsx
return (
    <StockEditForm
    productName={productName}
    productImageUrl={productImageUrl}
    productUrl={productUrl}
    expiryDate={expiryDate}
    number={number}
    inputProductName={inputProductName}
    inputProductImageUrl={inputProductImageUrl}
    inputProductUrl={inputProductUrl}
    inputExpiryDate={inputExpiryDate}
    inputNumber={inputNumber}
    />
)
```
だが、これをスプレッド演算子で以下のように簡潔に記述できる。
```jsx
<StockEditForm
  {...{
    productName,
    productImageUrl,
    productUrl,
    expiryDate,
    number,
    inputProductName,
    inputProductImageUrl,
    inputProductUrl,
    inputExpiryDate,
    inputNumber
  }}
/>
```

#### Children
子要素の数がいくつあってもpropsとして子要素をレンダリングすることが可能
```jsx
import ...

const ...

return (
  <BasicWrapper className="wrapper-stock"> // ラッパー用のコンポーネント
    <Modal/>
    <Paragragh>
    ...
  </BasicWrapper>
```
```jsx
import ...

const BasicWrapper = ({ children }) => {
    return <Wrapper>{children}</Wrapper>
}
```
【AWS】VSCode Remote-SSH＋EC2な開発環境を安く安全に作る〜2. スポットインスタンス用起動テンプレート作成〜

今回から実際の手順を解説していきます。今回実施するのは以下の内容です。
1. データ保存用のEBS作成
1. スポットインスタンス起動時に呼び出すスクリプト作成
1. スポットインスタンスにアタッチするIAMロール(インスタンスプロファイル)作成
1. 起動テンプレート作成

# 前提条件
* スポットインスタンスを起動するVPCおよびプライベートサブネット、NATGateway(NATインスタンス)は構築済み
  * プライベートサブネットにはSSMセッションマネージャで接続するためにVPCエンドポイントを作成済み
    * [参考手順](https://aws.amazon.com/jp/premiumsupport/knowledge-center/ec2-systems-manager-vpc-endpoints/)
* スポットインスタンスに利用するAMIは構築済み
  * AMIにはSSMエージェントをインストール済み

# データ保存用のEBS作成
以下から開発用のスポットインスタンスでデータ保存先として利用するEBSを作成していきます。ボリュームタイプやサイズ等は自由に選択して大丈夫ですが、アベイラビリティゾーンは後に作るスポットインスタンスと揃えないと利用できないので注意してください。
https://ap-northeast-1.console.aws.amazon.com/ec2/home?region=ap-northeast-1#CreateVolume:

![スクリーンショット 2022-11-27 15.06.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105456/20914fb5-2859-7747-03b2-7f63bcaede3d.png)
EBS作成後EBS上にファイルシステムを作成します。作成手順は以下の公式ドキュメントを参考にしてください。ファイルシステム作成に使用できるインスタンスがない場合は[Cloud9](https://ap-northeast-1.console.aws.amazon.com/cloud9control/home?region=ap-northeast-1#/create)を作成して一時的に利用するのが手っ取り早くておすすめです。
https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ebs-using-volumes.html#ebs-format-mount-volume

# スポットインスタンス起動時に呼び出すスクリプト作成
スポットインスタンスが起動する際に実行するスクリプトを事前に作成しておきます。
```bash
#!/bin/bash
VOLUME_ID="データ保存用EBSのID"
NAME="後程スポットインスタンスにつけるNameタグの値"
MOUNT_POINT="/data" #データ保存用EBSのファイルシステムをマウントするパス

#NAMEで指定したタグを持つインスタンスのIDを取得
INSTANCE_ID=`aws ec2 describe-instances --filters Name=tag:Name,Values=${Name} Name=instance-state-name,Values=running | grep InstanceId | aws '{print $2}' | head -n1 | sed -e 's/[",]//g'`
#インスタンスにデータ保存用EBSをアタッチ
aws ec2 attach-volume --volume-id $VOLUME_ID --instance-id $INSTANCE_ID --device /dev/sdf
#アタッチ実行してから実際に使えるようになるまで時間差があるのでちょっと寝る
sleep 10
#アタッチされたEBSのデバイス名を取得してfstabへ書き込み＆マウント
DEVICE_NAME=`lsblk | grep disk |tail -n1 | awk '{print $1}'`
sudo mkdir -m 777 ${MOUNT_POINT}
UUID=`sudo blkid -o value /dev/${DEVICE_NAME} | head -n1`
sudo echo "UUID=$UUID	/data	xfs(※作成したファイルシステムの種類に合わせて変えてください)	defaults	0	0" >> /etc/fstab
```
# スポットインスタンスにアタッチするIAMロールの作成
[ここ](https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/session-manager-getting-started-instance-profile.html)を参考にEC2にアタッチするIAMロールを作成します。AmazonSSMManagedInstanceCoreポリシー相当の権限が付いているのが期待値です。

# 起動テンプレート作成

[ここ](https://ap-northeast-1.console.aws.amazon.com/ec2/home?region=ap-northeast-1#CreateTemplate:)からスポットインスタンス作成用の起動テンプレートを作成していきます。
この際の注意点は以下の通りです。

* AMIは前提条件で指定したAMIを指定
* ネットワーク周りの設定はEBS作成で指定したアベイラビリティゾーンに合わせる
* リソースタグでインスタンスにNameタグを設定する。値はスクリプト作成時に指定したNameの値を使う。
* 高度な詳細でインスタンスプロファイルの作成したIAMロールを指定する
* ユーザーデータに作成したスクリプトを記載する


以上で起動テンプレートの作成まで完了しました。[次回](https://qiita.com/soujiroy/items/1005f34c82a01bc8139b)から実際にスポットリクエストを作成していきます。
Zoomのエラー解決 cfprefsdプロセスの終了

<h1>手順</h1>
1. フォルダ ~/Library/Application Support/zoom.us/data を削除する。<br>
2. ファイル ~/Library/Preferences/ZoomChat.plist を削除する。<br>
3. ターミナルで、以下のコマンドを入力し、すべての cfprefsd プロセスを終了させる。<br>

```
killall cfprefsd
```


<h1>経緯</h1>
zoomクライアント（ver.5.11.11 (10514)）に接続不可能に。<br>
具体的にはクライアント経由で、以下の部分でのエラー発生。<br>

- 新規mtgへの参加（プロキシ設定・ファイアウォールでのエラー。複数のmtgで試行済。）
- サインイン（web版でのサインインは可能であり、パスワードの間違えは無い。）

すでに以下の対処はしていた。
- macbookの再起動
- クライアントのリインストール
- セキュリティソフトのアンインストール

Zoomサポート担当に連絡し、上記手順の回答を得る。
試行したところ、問題なく動作。
自己学習記録：CodeCommit を SourceTree で使えるように

# 背景
業務で AWS や JavaScript などが必要になった、おじいちゃんの学習記録。

Azure DevOps 使いたいなとか思ったら、AWS にも当たり前のように Git があったので、使えるように。

# 設定方法
https://docs.aws.amazon.com/ja_jp/codecommit/latest/userguide/setting-up.html

なんか、色々ある・・

SSH は苦手なので、簡単なものがいいなぁとみてみたところ・・

https://docs.aws.amazon.com/ja_jp/codecommit/latest/userguide/setting-up-https-unixes.html

認証情報ヘルパーを使うと、簡単そうな感覚だったので、これにしてみる

# 作業

- AWS CLI インストール
    - 自宅ではやってなかったので改めて

https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/getting-started-install.html#getting-started-install-instructions

- Access 権
    - Default の User に AWSCodeCommitPowerUser を追加しておく

- 認証情報ヘルパーを設定

```powershell: ステップ 3: 認証情報ヘルパーを設定する
git config --global credential.helper '!aws codecommit credential-helper $@'
git config --global credential.UseHttpPath true
```

結果、` ~/.gitconfig` に credentials が追加されてれば OK

あとは、普通に クローンURL を利用していけば行ける筈

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/5d59fb19-d2cc-6a13-1e61-ce18bbbf0c4e.png)

Amazon 用の認証は追加してないのが分かる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/840286cd-52b9-07b0-604d-4acf3eec3435.png)

## Profile を Default 以外にする場合

`--profile` で指定してやればいけそう
```powershell: 
[credential]    
    helper = !aws --profile CodeCommitProfile codecommit credential-helper $@
    UseHttpPath = true
```

# あとがき
てっきり認証マネージャーに登録するのかと思ってたけど違ってた。

とはいえ別の方法だと、Git認証情報を生成したりもするんだろうなぁ・・

あとは、会社でやってみて確認かな
PyAutoGUI 画像認識と拡大比率の問題

# 目的
PyAutoGUIを用いて作業を効率よく進めようと試みている最中に発見したことを備忘録として投稿します。

# 経緯
同じ作業を繰り返すものがあったため自動化することにした。
友人も似たような作業をするので、どうせならアプリ化して配ろうとしたところ以下の問題にあたった。

- PCの画面解像度が異なる場合、正常に画像認識ができるのか。

またこの問題は現在解決していなく、解決策を模索している。

## 画面解像度が異なると読み込めない？

例として以下の画像を掲載します。
これはPC版のメルカリで商品を出品していると表示されるページの一部です。

![スクリーンショット 2022-11-28 230918.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837411/3bf35c8c-a7ca-9268-839c-424bd0bf1be1.png)

今回は画面中心部にある**商品の編集**を自動で押すために、指定した画像の`Path`に合致する関数を作成。
`Path`には予め切り抜いた画像を用意しました。

何回かうまく動作しないことがあったので確認したところ、拡大比率が画像を切り抜いたときとは違うことに気づきました。

検証として同様の部分を2枚切り抜き動作確認を行います。
一見ほぼ同じの画像ですが、上はWebページの拡大比率が100%に対して、下は110%で切り抜いています。
![syouhinnnohensyuu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837411/6d662d38-dfb2-3d6c-7b35-5dd5d5e4e82d.png)

![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837411/f0275c9f-925f-604e-52dd-38eba979ef0b.png)

関数には拡大比率100%のときでしかクリックするように設定していないため、人間の視覚ではほぼ同じものでも読み取れないことが分かりました。

## 対策

- Seleniumで自動化する
- 拡大比率ごとに切り抜く

このあたりでしょうか。
どちらにせよもう少し勉強していきたい分野なので、今一度調べてみます。

## 備考
思いついた瞬間に記事を書いているのであまり深く調べていません。
こんなん常識だよ！と感じる方は是非ご教授お願いいたします。
Go チャネルの基本的な知識

## チャネルとは

GoルーチンとGoルーチンの間でデータの受け渡しをするためのGo特有のデータ構造。

## チャネルの型

チャネルの型はchan データ型のように書く。以下の例はint型のチャネルを作っている。

```go
var ch chan int
```

## チャネルの特性

チャネルの中に何かしらのデータを入れると、それを取り出してからでないと他のGoルーチンはチャネルに何のデータも入れることができない。またチャネルから何かデータを取り出そうとしたときに空だった場合、箱に何かが入るまでプログラムの実行は中断される。

`←chan`とすると受信専用チャネルになる。

```go
var ch1 <-chan int
```

`chan←`とすると送信専用チャネルになる。

```go
var ch2 chan<- int
```

特に指定しないと双方向のチャネルとなる。

## チャネルのバッファ

チャネルはキューの性質を備えるデータ構造。キューは先入先出の性質があり、キューに先に入れられたデータは先に取得される。
バッファはこのキューを格納する領域のこと。チャネルでは生成時にバッファサイズを指定できる。

以下はバッファサイズ8のチャネル

```go
ch := make(chan int, 8)
```

何も指定しないとバッファサイズは0になる。

```go
ch := make(chan int)
```

## 試してみた

実際に以下のようなコードを書いてチャネルの動きを確認してみた。`receiver()`は引数でチャネルを受け取り、`i`にチャネルで受信したデータを格納し、出力する関数。
`main()`ではチャネルに整数`i`を送信する操作を`i<10`になるまで繰り返している。

```go
package main
import (
"fmt"
)

func receiver(ch <-chan int) {
	for {
		i := <-ch
		fmt.Println(i)
	}
}

func main() {
	ch := make(chan int)
	go receiver(ch)

	i := 0
	for i < 10 {
		ch <- i
		i++
	}
}
```

結果

```go
$ go run dogorutin.go
0
1
2
3
4
5
6
7
8
9
```

受信できている。
Goルーチンの基本的な知識

## Goルーチンとは

スレッドよりも小さいGo特有の処理単位。goではこのGoルーチンを生成し、並行処理を実行できる。ゴルーチンとも言う。

## Goルーチンの使用方法

`go 関数名`の形で実行すればその関数はGoルーチンとなる。

## sync.WaitGroup

Goルーチンは完了しても特に何の通知もなく終了してしまう。
そこで終了を検知する仕組みが必要。それがsync.WaitGroup。
WaitGroupの値に対してWait()を呼ぶと、WaitGroupが0になるまで待ってくれる。
以下のように使う。

mainの書き方

```go
func main() {
	var wg sync.WaitGroup
	wg.Add(Goルーチンの数)
	go Goルーチン(&wg)
	wg.Wait()
}
```

関数の書き方

```go
func 関数(wg *sync.WaitGroup) {
	処理
	wg.Done()
}
```

### ポイント

- まず最初に`sync.WaitGroup`を`wg`という変数に入れる。
- `wg.Add()`で実行したいGoルーチンの関数の数を指定する。これはつまり、WaitGroupにカウンタをセットしていて、このカウンタが0になると全てのGoルーチンが終了したという見なされる。
- 関数内では処理が終了した段階で`wg.Done()`を実行する。これによりWaitGroupのカウンタが-1される。
- `wg.Wait()`はカウンタが0になるまで待ってくれる。

## Goルーチンの実行速度検証

以下のようなファイルを用意し、Goルーチンを使用した場合とそうでない場合の速度を比較する。`loopNumbers()`では数を`loopLetters()`では英文字を10回ループする。それを`standardFunc()`では普通に逐次実行、`goFunc()`ではGoルーチンを利用して実行する。

```go
package main
import "time"

func loopNumbers() {
  for i := 0; i < 10; i++ {
    time.Sleep(1 * time.Microsecond)
  }
}

func loopLetters() {
  for i := 'A'; i < 'A'+10; i++ {
    time.Sleep(1 * time.Microsecond)
  }
}

func standardFunc() {
  loopNumbers()
  loopLetters()
}

func goFunc() {
  go loopNumbers()
  go loopLetters()
}

func main() {
}
```

以下のようにベンチマーク測定をする。BenchmarkFunc()が逐次実行の時間を測定しており、BenchmarkGoFunc()の方はGoルーチンの速度を測定している。

```go
package main
import "testing"

func BenchmarkFunc(b *testing.B) {
  for i := 0; i < b.N; i++ {
    standardFunc()
  }
}

func BenchmarkGoFunc(b *testing.B) {
  for i := 0; i < b.N; i++ {
    goFunc()
  }
}
```

実行結果は以下のようになる。

```go
$ go test -run x -bench .
goos: darwin
goarch: amd64
pkg: first_webapp
cpu: Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
BenchmarkFunc-8            12172            117629 ns/op
BenchmarkGoFunc-8         629256              2174 ns/op
PASS
ok      first_webapp    3.919s
```

### ポイント

- Goルーチンを使用したほうが54倍、速くなっていることがわかる。
npm run start実行した際、scriptsのprestartを先に実行させる


## 背景
ローカルで色々と遊びたい。
ただ、AWS上の本番環境への影響は避けたい。
また、コマンドの入力も極力減らしたい。
そういう時に使えるTIPS。

復習もかねて、アウトプットしてみる。

## 前提
* Node.js(v16.14.2）
* VSCode
* AWSアカウント

## 結論から先に

package.jsonのscriptsを以下のように設定し、
コマンドで`npm run start`を実行すると、
実は`start`が実行される前に、`prestart`が実行される。

```package.json
"scripts": {
    "prestart": "setx AWS_PROFILE kenny_test",
    "start": "env-cmd -f .env npm run start-without-env",
    "start-without-env": "nodemon ./index.js",
  }
```
流れとしては、以下のようになる。

１．`npm run start`をコマンドで実行
２．scriptsの、`prestart`が実行される
　　→AWSプロファイルのkenny_testがセットされる
３．scriptsの、`start`が実行される
４．scriptsの、`start-witouht-env`が実行される

実際にコマンド上で、`npm run start`を実行してみると、以下のように返ってくる。
```
PS C:********\src> npm run start

> hello_world@1.0.0 prestart 
> setx AWS_PROFILE kenny_test

成功: 指定した値は保存されました。

> hello_world@1.0.0 start
> env-cmd -f .env npm run start-without-env

> hello_world@1.0.0 start-without-env
> nodemon ./index.js
```

`npm run start`を実行すると、
上記のとおり、先に`prestart`が実行されている事がわかる。

## 【1】AWSプロファイル（[参考URL](https://dev.classmethod.jp/articles/lim-cli-profile/)）
`~/.aws`のcredentialsには、以下のように設定する。
（①default, ②kenny_test）
```credential.
[default]
aws_access_key_id        = hogehoge
aws_secret_access_key    = gehogeho
region                   = egohegoh

[kenny_test]
aws_access_key_id        = test
aws_secret_access_key    = example

```

例えば、
defaultは【本番環境へ接続するキー】が保存されており、
kenny_testは【開発環境へ接続するキー】が保存されているとする。

```config.
[default]
region = ap-northeast-1
output = json
[kenny_test]
region = ap-northeast-1
output = json

```

## 【2】package.jsonのscripts

以下を参考にさせて頂いた。（[参照元](https://www.nxworld.net/npm-scripts-pre-and-post-hooks.html)）
>特定のコマンド実行時にそのスクリプトが実行される前に実行させたいスクリプトがある場合は、
preを付与したスクリプト名で記述します。
例として実際にコマンド入力で実行するのがstartというスクリプト名だった場合、その前に実行させたいものはprestartというスクリプト名にします。

```package.json
"scripts": {
    "prestart": "setx AWS_PROFILE kenny_test",
    "start": "env-cmd -f .env npm run start-without-env",
    "start-without-env": "nodemon ./index.js",
  }
```
`prestart`で、kenny_testを設定することで、
開発環境へ接続する為、ヒューマンエラーを防ぐ事ができる。
### 終わりに

本番環境への間違いを避けたい場合、
`prestart`を事前に設定することで、
影響を避けられる為、非常に有用な手だと思う。
フローチャートでアルゴリズムの学習

# はじめに
先日、スクールでフローチャートを書きながらアルゴリズムの学習をしたので、その中のいくつかをまとめたいと思います。いくつかあるので、一部抜粋でまとめます。ちなみに全て手書きだったので大変でした。。。
記事に記載するのは、自宅で予習・復習の際にwordで考えたものを画像として貼っています。（ちゃんと保存しておけばよかった。。。）

# アルゴリズムとは
問題や課題を解決するための方法や手順を一連の作業ステップとして記述したものです。「誰が見てもわかる」ように書くことが大事です。
※ちなみにロジックも同じような言葉ですが、アルゴリズムの方が「最適解」という意味合いがあるようです。

# フローチャートとは
図形や矢印で表します。様々な方法が定義されていますが、今回は「JISフローチャート」を使っていきます。
## 基本構造
１．順次（逐次）
    上から下へと処理を行う。

２．分岐（判断）
条件結果によって真または偽に分かれる。
「YES」が下に、「NO」が右に書くのが基本。

３．反復（繰り返し）
ある処理を繰り返す。始端か終端のどちらかには終了条件を設定。
始端→前判定：反復処理に入る前に判定する。つまり1回も反復処理を行わないことも起こりうる。
終端→後判定：反復処理の後に判定する。つまり必ず1回は反復処理を行われる。

今回は以下の図を使って学習しました。
![スクリーンショット_20221128_215549.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984665/247aee87-8e2f-2ce4-fb4a-fbfc999b6802.png)

# 演習
早速学習したアルゴリズムの中のいくつかをフローチャートにしていきたいと思います。

###### 1、2つの整数を入力して、大きい値を出力
![スクリーンショット_20221128_223018.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984665/73f8a8a6-b65d-3732-6ef4-ae1582b31456.png)

###### 2、１から１０までの和を順に出力
![スクリーンショット_20221128_224551.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984665/6f1f3eff-d9ea-738e-8a7c-4a48d82e4714.png)

###### 3、西暦をうるう年かどうか判定（４で割り切れる、１００で割り切れない、４００で割り切れる）
![スクリーンショット_20221128_225742.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984665/a1e43c49-4067-adbc-b58a-c9a1d9f99f54.png)

# おわりに
今回はここまでとします。配列の問題や線形探査なども習ったのですが、フローチャートをまたwordにする手間が思いのほか大変でした。基本構造を組み合わせるだけで複雑な処理ができることにただただ驚きです！
実装が楽になる！ちょっと便利なCSS３選

# はじめに
最近はIEサポートが終了したことや各種ブラウザのアップデートにより使用できるCSSプロパティが増えてきました。
その中でも実際に使ってみて便利だと思ったCSS３種類をご紹介します！

# 1. 上下中央配置
今まではFlex boxを使って３行で書いていましたが、Gridなら2行で書くことができます。
ここまでくると1行で書けるようになるのもそう遠くはないでしょう。（期待）

## Flex box
```css
.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}
```

## Grid layout
```css
.grid {
    display: grid;
    place-items: center;
}
```

# 2. スムーススクロール
JavaScriptで実装することが多かったスクロール設定をなんと１行で実装することができます。
```css
html {
    scroll-behavior: smooth;
}
```

:::note warn
注意
固定ヘッダーがある場合はアンカーリンクのスクロール時にヘッダーと要素が重なってしまう恐れがあります。
その場合はscroll-margin-topを使って固定要素分のマージンを設けてあげましょう。
:::

### scroll-margin-top
アンカーリンク設定要素に指定する。
```CSS
.anchor {
    scroll-margin-top: 50px;
}
```

# 3. アスペクト比
padding topの呪文で実装してたアスペクト比もaspect-ratioを使えば直感的に実装できます。
しかもレイアウトシフトを防ぐこともできる。

## padding-top法
```CSS
.aspect {
    width: 100%;
    padding-top: 56.25%;
}
```

## aspect-ratio
```CSS
.aspect {
    width: 100%;
    aspect-ratio: 16 / 9;
}
```

# おまけ
## CSSネスト
SassのようにCSSを入れ子にして実装することができます。
今時Sass使うから必要ないだろと思いましたが、CSSしか使えないプロジェクトで使うことができるので地味に便利です。
ただ対応ブラウザがまだ少ないので実務で使えるのはもう少し先でしょう。

```scss
.block {
  .text {
    color: #000;
  }
}
```
JavaScriptについての基礎をおさえる①

　JavaScriptでできることの一つに「表示しているHTMLの構造をプログラムのコードで変化させることができる」というものがある。
たとえば、
```index.html
こんにちは
<div id = "innerTest"></div>
<script src = ".main.js"></script>
```
と
```main.js
console.log("ファイル読み込みのテストです");
let element = document.getElementById("innerTest");①
element.innerHTML = "<strong>JavaScript</strong>で書きました";②
```
　①ではinnerTestというidがついている画面上の要素を取り出す。そのための関数が**ブラウザから提供されていて**、
```js
document.getElementById([idの名前])
```
という形で呼び出すことができる。
　結果 elementという変数は、画面上の
```html
<div id = "innerTest"></div>
```
という要素のことを指し示している。
　②では、elementで取り出した要素に備わっているinnerHTMLプロパティに変更を加えている。これによりelementの中にHTMLを流し込むことができる。

<details><summary>innerHTMLについて</summary>

innerHTMLプロパティを使用すると、HTML要素の取得や操作を行うことができる。
例
```html:html
<div class="contents" id="apple">りんご</div>
```
に対して、
```js:javascript
const apple = document.getElementById("apple")

console.log(apple.innerHTML)
// => りんご

apple.innerHTML = "青リンゴ"
console.log(apple.innerHTML)
// => 青リンゴ
```

</details>

今回は「JavaScriptで書きました」という文字列を表示、さらに一部をstrongタグで強調した内容を流し込んでいる。
　以上の操作により画面のHTMLは次のように変化する。
```html:html
<div class = "innerTest"><strong>JavaScript</strong>で書きました</div>
```
ブラウザ上では
![スクリーンショット 2022-11-28 22.56.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884270/321111b0-b2e0-7f45-22bf-6066a8662bd5.png)
と表示される。

document.getElementByIdやinnerHTMLのような　**「ブラウザが提供している機能」**　を利用してコードを書くことができることがわかった。言語だけでなくブラウザのような実行環境から提供されている機能も利用してコードが書けることを覚えておく。

> 参考文献
[ステップアップJavaScript フロントエンド開発の初級から中級へ進むために](https://www.amazon.co.jp/%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97JavaScript-%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E9%96%8B%E7%99%BA%E3%81%AE%E5%88%9D%E7%B4%9A%E3%81%8B%E3%82%89%E4%B8%AD%E7%B4%9A%E3%81%B8%E9%80%B2%E3%82%80%E3%81%9F%E3%82%81%E3%81%AB-%E4%BD%90%E8%97%A4-%E6%AD%A3%E5%BF%97-ebook/dp/B09MQ53Y2C/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=9G912ZQLVXY8&keywords=%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97JavaScript&qid=1669644043&qu=eyJxc2MiOiIxLjEwIiwicXNhIjoiMS4wMCIsInFzcCI6IjAuOTcifQ%3D%3D&sprefix=%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97javascript%2Caps%2C293&sr=8-1)
Javaで何か作ってみる(2022/11/28 Day39)

## 今日やった事
- Twitterで、ビンゴゲームの課題があったので、やってみた。  
&rarr;コミットした内容は[こちら](https://github.com/takamatsuryota3/Java/commit/b511a7d9df941997baa96a6ff238ab12fc7707b1)
## 参考にしたもの
- [Javaでビンゴゲームのコードを作成したい](https://teratail.com/questions/kav3aoefaf30b6)  
&rarr;ここに答えが書いてあるようなものだが、見てやっても意味ないので、極力見ないようにしている。
- [【Java】ビンゴカード作成問題を解く - Qiita](https://qiita.com/kim-shun/items/fee32cf0cb3cc009756a)  
&rarr;こちらも同様。

## 所感
- 今日はくじ引き、カードの穴あけ、カード再表示、とりあえず10回繰り返すように実装した。
- カードの部分が同じようなfor文を書いているので、少し気持ち悪い。
- 後は、リーチ、ビンゴの判定と、コマンドライン引数で、くじ引き回数を指定出来るような実装をしようと思う。
- そろそろspringの勉強を始めたい。
## 明日の予定
- ビンゴゲーム作成を進めていく。
Javaで何か作ってみる(2022/11/27 Day38)

## 今日やった事
- Twitterで、ビンゴゲームの課題があったので、やってみた。  
&rarr;コミットした内容は[こちら](https://github.com/takamatsuryota3/Java/commit/243fe81fb207f4451261a02ed172c34cd8c64ac2)
## 参考にしたもの
- [Javaでビンゴゲームのコードを作成したい](https://teratail.com/questions/kav3aoefaf30b6)  
&rarr;ここに答えが書いてあるようなものだが、見てやっても意味ないので、極力見ないようにしている。
- [【Java】ビンゴカード作成問題を解く - Qiita](https://qiita.com/kim-shun/items/fee32cf0cb3cc009756a)  
&rarr;こちらも同様。

## 所感
- 今日は単純に乱数を表示していたものを、ArrayListとCollections,shuffle()に変更した。
## 明日の予定
- ビンゴゲーム作成を進めていく。
スクレイピングテクニック〜URLから特定の文字を抜き取る〜

スクレイピングを学習する上で役立つ小ネタを紹介したいと思います。

例えば👇のようなURLがあったとして、

<p>https://umekobucha.tasty.com/rice/tea_list/?page_id=101000/102500</p>

後ろの方に101000という数字がありますよね。これをこのサイトURLのId番号だとしましょう。

複数のページでスクレイピングをするときにこのid番号を使いまわせばアクセス数を減らしサイトへの負担を減らすことができます。

今回はこの特定部位の文字を切り取る方法を紹介したいと思います。

使用するメソッドはreplace()とrfind()、スライスを使います。

まずはURLを定義しましょう

```
url = 'https://umekobucha.tasty.com/rice/tea_list/?page_id=101000/102500'
```

そしてさらにreplace()を使っていらない部分を空白に置き換えます。
最初のhttpからpage_id=までが不要ですね。


```
cut_url = url.replace('https://umekobucha.tasty.com/rice/tea_list/?page_id=', '' )
```

これでcut_urlの中身は101000/102500だけになりました。

ここまでできたらあとはrfind()でスラッシュの部分を特定しましょう。

```
list_index = cut_url.rfind('/')
```


rfind()とはfind()の逆バージョンですね。これは指定した文字列のインデックスを見つけてくるメソッドです。この場合スラッシュのインデックスは6番目になると思います。

この6番目をlist_indexに入れてスライスで切り取りましょう。

```
cut_url[:list_index]
```

ここでは101000/102500が入ってるcut_urlに対して6番目のスラッシュでスライスしてあげます。

```
print(cut_url[:list_index])
```

結果を見てみましょう。101000になってると思います。

この抜き取った番号で負荷をかけることなくリンクに飛べますね。
```
f'https://genmaicha.tasty.com/rice/greentea/?page_id={cut_url}/102500'
```

あとはf文字列を使ってformatと波括弧で応用します。

ドット○ンストールで勉強してた頃find()とかスライスっていつ使うんだよ、って思ってましたがこういう時に活用するんですね。


メソッドは知ってても使いこなす応用力と発想力が必要だなと思いました。
UnityのDOTweenでTweenを逆再生する方法

DOTweenはUnityで使えるアセットの一つです。
読み方は「ドットゥィーン」らしいです。


https://assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676?locale=ja-JP

Pro版もあります。違いはエディター拡張やパスで座標を指定できるようになったりします。

https://assetstore.unity.com/packages/tools/visual-scripting/dotween-pro-32416

本題に入ります。
DOTweenPathを使った場合の逆再生の方法についてです。

DOTweenで通常の再生をする場合はDOPlay、DOPlayForward、DORestartなどを使い、
逆再生をするにはDOPlayBackwardsを使います。
が、下記のようにしても逆再生がされません。
```
public DOTweenPath tweenPath;
void Func()
{
    tweenPath.DOPlayBackwards();
}
```
これはTweenが最初のパスにある状態から逆再生が開始されるためで、0番目のパスから0番目のパスに移動をしているため、動かないように見えます。

最後のパスから逆再生をするには、以下のようにします。
```
public DOTweenPath tweenPath;
void Func()
{
    tweenPath.tween.GotoWaypoint(tweenPath.wps.Count);
    tweenPath.DOPlayBackwards();
}
```
tweenPath.tween.GotoWaypoint(tweenPath.wps.Count);
とすることで、Tweenを最後のパスの地点まで進行させることができ、そこから逆再生が開始されるようになります。
ただし、Completeの処理が呼ばれなかったり、Delayが無視されたりするので、そのあたりは注意が必要です。
rbenv localでrubyのバージョンが変わらなかったので解決してみた


<h1>問題</h1>
<h4>・rbenvでrubyのバージョンを変えられない。</h4>

```
$ rbenv local 2.7.1
$ ruby -v
ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.x86_64-darwin22]
```

<h2>原因</h2>
<h4>・PATHの設定がrbenv用になっていない。</h4>
↓rbenvで設定したrubyを使用する場合はrubyのパス設定がこのようになる。

```
which ruby
/Users/ユーザ名/.rbenv/shims
```

しかし、現状の私のrubyのパスはこんなかんじ。
```
which ruby
/usr/bin/ruby
```

つまり、rubyのパス設定がローカルのままになっているということ。


<h2>解決策</h2>
<h4>・rubyのパス設定を書き換える。</h4>

まずは環境変数に/Users/ユーザ名/.rbenv/shimsがあるかを確認する。
```
echo $PATH
```

私の場合は,,,(読みやすいように改行してます。)
```
echo $PATH
/usr/local/bin:
/usr/bin:
/bin:
/usr/sbin:
/sbin:/Library/Apple/usr/bin:
/Users/ユーザ名/flutter/bin:
/Users/ユーザ名/Documents/Dev/flutter/bin
```
という感じ。
今回の目的である、/Users/ユーザ名/.rbenv/shimsは表示されない。

そこで、.bash_profileを開いて以下のコードを追加してみた。
```
export PATH="$PATH:/Users/ユーザ名/.rbenv/shims"
```

ここで、.bash_profileを有効化する。
```
source .bash_profile
```

しかし、これでは解決できずに結局rubyのバージョンは変わらない。

次に、参考記事から以下のコードを入力してみた。
[rbenvでバージョンがうまく切り替わらなかった時にやったこと](https://qiita.com/akatsuki174/items/c0384b9903b4b5cbbdaf)
```
source ~/.bashrc
```
すると、なんとrubyのパスが変わっていた！

なぜ？？
ちなみに.bashrcの中身はこんな感じ。
```
if [ -d $HOME/.anyenv ]
then
    export PATH="$HOME/.anyenv/bin:$PATH"
    eval "$(anyenv init -)"
fi
```

この.bashrcファイルを有効化したからパス設定が変わったのかはよくわからないんですが、とりあえず備忘録と後日の学習のためにメモを残しておこうと思います。

source .bashrcでパスが変わった理由がわかる方いたら教えていただけると嬉しいです。
EigenとOpenMP併用時の注意点

# はじめに
Eigen は C++ のライブラリで、線形代数演算に便利な機能が提供されています。
ベクトルや行列とそれらの演算はもちろん、固有値を求めたり連立方程式を解くことも簡単にできます。

https://eigen.tuxfamily.org/index.php?title=Main_Page

もともと OpenMP を使っていたコードに Eigen を導入したところいくつか困る点があったので、備忘録として記事にしておきます。
Eigen 公式の並列化に関するページはこちら。

https://eigen.tuxfamily.org/dox/TopicMultiThreading.html

# Eigen による並列化の無効化
Eigen 公式の並列化に関するページには次のように書いてあります。
>You can disable Eigen's multi threading at compile time by defining the EIGEN_DONT_PARALLELIZE preprocessor token.

> EIGEN_DONT_PARALLELIZE と定義することで、コンパイル時に Eigen の並列化を無効にできます。
（筆者訳）

Eigen は逆行列を求める際などに並列化処理を行っているっぽいのですが、プログラムの最初で次のように定義することでこれを無効化できるようです。
```c++
#define EIGEN_DONT_PARALLELIZE
```

また、こんな風にも書いてあります。
>In the case your application is parallelized with OpenMP, you might want to disable Eigen's own parallelization as detailed in the previous section.

> プログラムがすでに OpenMP で並列化されているときには、Eigen 自身の並列化は無効にするといいかもしれません。
（筆者訳）

更に、こちらのサイトでは Eigen を使う際に並列化を無効化しないと計算速度が低下することが指摘されています。

http://blog.livedoor.jp/tmako123-programming/archives/54780798.html

これらのことから、自身で OpenMP の並列化を導入したコードを使う際には上述の方法で Eigen の並列化を無効にしたほうがよさそうです。
Eigen 内でも OpenMP による並列化を使ってるっぽいので、そこと干渉しちゃうんでしょうね。

# スレッド数の制限
CPU の並列化時に重要な概念として「コア数」と「スレッド（論理プロセッサ）数」があります。
ご存じない方はこういったサイトを参照してください。

https://e-words.jp/w/%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89%E6%95%B0.html

これらの数は、Window であればタスクマネージャから CPU の情報を見て確認できます。

OpenMP で並列処理を行う場合、そのスレッド数を「コア数」より多い「スレッド（論理プロセッサ）数」まで増やすことができます。しかし、この点について Eigen 公式の並列化に関するページにはこのように書いてあります。
>On most OS it is very important to limit the number of threads to the number of physical cores, otherwise significant slowdowns are expected, especially for operations involving dense matrices.

>ほとんどの OS では（OpenMPの）スレッド数を「コア数」以下に制限することが非常に重要です。そうしないと、特に密行列を含む操作で大幅な速度低下が予想されます。
（筆者訳）

つまり、「コア数を超えた並列化は行うな」ということですね。
従って、コア数を n とするとき、次のようにスレッド数を制限する必要があります。
```cpp
#include <omp.h>

int main(void){
    omp_set_num_threads(n);
}
```

ちなみに、ここでは Eigen のページでは速度の低下のみが触れられていましたが、これをやらないと次章で触れる「assertion on unaligned arrays」に関するエラーが発生しました。


# assertion on unaligned arrays に関するエラー
Eigen 内で定義され型を持つ配列に OpenMP の並列化時にアクセスすると、「Assertion failed」なるエラーが出力され、このサイトに飛ばされました。
   
http://eigen.tuxfamily.org/dox-devel/group__TopicUnalignedArrayAssert.html

ページ上ではc++17を使えば直ると書いてあるのに、そうしても直りませんでした。
結局、OpenMP による並列化時には c++17 であっても問題が発生することがわかりました。

上記のページにはいくつかの解決策が紹介されていますが、そのうち次の2つを修正すると上手く走りました。また、前章の「スレッド数の制限」も同時に修正するのも忘れずに。

Case | URL
--- | --- 
2: STL Containers or manual memory allocation | http://eigen.tuxfamily.org/dox/group__TopicStlContainers.html
3: Passing Eigen objects by value to functions | http://eigen.tuxfamily.org/dox/group__TopicPassingByValue.html

ただし、次の2パターンでは、上の修正にも関わらずうまくいきませんでした。
パターン1. 並列化された for 文中で Eigen のオブジェクトを定義
```c++
#pragma omp parallel for
for(int i = 0; i < n; i++){
    Vector2d v; // ここでエラーが発生
}
```
パターン2. 並列化された for 文中で Eigen のオブジェクトを戻り値とする関数を呼び出す
```c++
int main(void){
    Vector2d v;

    #pragma omp parallel for
    for(int i = 0; i < n; i++){
        v = generate_vector(); // ここでエラーが発生
    }
}

Vector2d generate_vector(){
    return Vector2d::Zero();
}
```
これは現在に至るまで修正できておらず、泣く泣くこの部分の並列化は諦めている状況です…
何かご存じの方、解決できた方がいらしたらぜひコメントください！！
【Kintone】組織エクスポートAPI

cybozu developer network／組織エクスポート API（JSON）
https://developer.cybozu.io/hc/ja/articles/202124754#step2

Web便利ツール@ツールタロウ
https://tool-taro.com/base64_encode/

~~~
(() => {
  'use strict';

  kintone.events.on('app.record.detail.show',(event) => {

    const url ='https://{sub-domain}.cybozu.com/v1/organizations.json';
    const headers = {
      'X-Cybozu-Authorization': '{ID:PASS}',  //Encording with BASE64
    };
    const data = {};

    kintone.proxy(url, 'GET', headers, data, function(resp){
      console.log(resp);
    }, function(resp){
      const errmsg = 'エラーが発生しました';
      if (resp.message !== undefined){
        errmsg += '\n' + resp.message;
      }
    })
  });
})();
~~~
Macにpythonをインストールする方法

Udemyの動画教材
_酒井 潤 (Jun Sakai)さん
現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル
https://www.udemy.com/course/python-beginner/#instructor-1_
を参考にしました。
## Anacondaからパッケージをインストール
1. https://www.anaconda.com/ へアクセス
※https://www.python.org/ からもインストールできますが、<br>Anacondaは他のデータサイエンス系のパッケージを一緒にインストールできるため<br>今回はAnacondaからインストールしました。

2. インストール開始
自分の環境に合わせインストール
![anaconda.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988615/266e7b6a-d80f-bd40-e175-ba5827204fcd.png)




## 規約に同意
規約に同意し、インストールを開始します。

## ターミナルを起動、インストール完了を確認する
#### 1. python と入力→Enter
```
user$ python
Python 3.9.13 (main, Aug 25 2022, 18:29:29) 
[Clang 12.0.0 ] :: Anaconda, Inc. on darwin
Type "help", "copyright", "credits" or "license" for more information.
```

Anacondaからpythonがインストールできたことを確認
#### 2. exit() と入力→Enter
```
>>> exit()
(base) MacBook-Pro-2:~ user$ which python
```
python対応型のシェルに入っている状態なので一旦脱出
元に戻る
#### 3. which python と入力→Enter
```
(base) MacBook-Pro-2:~ user$ which python
/Users/user/opt/anaconda3/bin/python
```
人によってパスは異なる場合がありますが、
pythonのインストール先が確認できた

![ターミナル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988615/b1234362-ffdb-0ac0-69bc-ddbc547bfe61.png)

#### 以上。
簡単でした！
次はPycharmをインストール
Amazon ECSの新機能「サービスコネクト」って何？ Cloud MapやApp Meshとどう違うの？

まだ[re:Invent 2022](https://reinvent.awsevents.com/)開催直前ですが、フライング気味にいくつものAWSアップデートが早くも発信され始めています。
今回はその中でも **「マイクロサービス間の通信を簡単にしてくれる新機能、ECSサービスコネクト」** を日本語で少しだけ紹介してみます。

https://aws.amazon.com/jp/blogs/aws/new-amazon-ecs-service-connect-enabling-easy-communication-between-microservices/

# 前提知識のおさらい

### ECSって何でしたっけ？
AWS上で提供されているコンテナオーケストレーションサービスです。
コンテナの商用運用に不可欠な統合管理の仕組みを提供してくれます。

https://aws.amazon.com/jp/ecs/

世の中的には代表的なOSSとして[Kubernetes](https://kubernetes.io/docs/concepts/overview/)などがあり、これはAWSでもEKSとしてマネージド提供されています。

### サービスディスカバリーって何でしたっけ？

商用システムにおけるコンテナの代表的なユースケースとして「マイクロサービスアーキテクチャ」があります。

従来型のアプリケーションを「モノリシック（一枚岩）アーキテクチャ」と捉え直したときに、機能単位でサービスを分割して疎結合化し、サービス間の内部通信によってシステム全体としての挙動を実現しようというものです。
これによって、機能単位で開発が分業しやすくなったり、リリースサイクルを短くできるため昨今主流のアジャイル開発と親和性が高くなります。

マイクロサービスアーキテクチャの留意点として、システム内でサービス同士が通信しあうためにお互いのインフラ的な在り処を見つける必要があり、これを実現するための概念を「サービスディスカバリー」と言います。

### 似たようなAWSサービス、既にありませんでしたっけ？

AWSには元々、サービスディスカバリーを実現するための機能がいくつかありました。

- AWS Cloud Map
    - AWSリソースを独自の名前空間で簡単に参照できる
    - 例えばELBを構成せずともEC2リソースへ任意の名前でアプリケーションから通信できる
    - ECS以外にもEC2、RDS、Lambda、DynamoDBなど様々なAWSリソースに対応

https://aws.amazon.com/jp/cloud-map/

- サービスディスカバリー（ECSの機能）
    - ECSクラスター内の各サービス間のプライベートな名前解決が可能になる
    - この機能を使わない場合、サービス間にELBを構成する必要がある
    - 前述のCloud Mapを利用して実現している

https://docs.aws.amazon.com/ja_jp/AmazonECS/latest/developerguide/service-discovery.html

- AWS App Mesh
    - サービス間通信のために、プロキシOSSであるEnvoy管理をマネージドに提供してくれる
    - ECSだけでなく、EKSやその他EC2上で構築しているアプリケーションでも利用可能
    - 一般的な類似製品としてOSSのIstio等がある

https://aws.amazon.com/jp/app-mesh/


# ECSサービスコネクトの概要

位置づけとしては「ECSの "サービス" の設定項目の一つ」になります。

- ECSクラスターやVPCを跨いだサービス間通信を可能にしてくれる
- サービス間通信のモニタリングも可能になる
- 既存のアプリケーションの変更不要

AWS News Blogにある図が分かりやすいですね。
ECSのサービスディスカバリーのように、Cloud Mapの名前空間と組み合わせて動作します。
![画像](https://d2908q01vomqb2.cloudfront.net/da4b9237bacccdf19c0760cab7aec4a8359010b0/2022/11/16/2022-ecs-service-connect-0.jpg)

設定によって、例えば「503エラーが出たら自動でリトライさせてコネクションドレイン（処理終了までコネクション保持）する」ようなこともELB無しで出来るようです。
さらにECSコンソールからトラフィックを監視できるダッシュボードも見られるとのこと。


# コンソールも少しだけ覗いてみた

試しに適当なECSクラスターを作ってみると、クラスター編集画面でServie Connectを有効化できるようになっていました。
![コメント 2022-11-28 211843.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633856/0f7e7caa-e0f8-2972-95f1-56c2d7125e3a.jpeg)

有効化するとクラスター設定画面から以下のように確認できます。
![コメント 2022-11-28 213914.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633856/9c1cab61-1a85-1752-8ec1-12f3b8e1d112.jpeg)

検証によさげなアプリケーションが無かったため、実際のトラフィック検証やモニタリングはまたの機会ということで！

（11/30追記）
AWS Samuraiの織田さんがハンズオン記事を書いてくださいました。
とても分かりやすいのでオススメです。内部的にはApp Meshが使われているんですね。

https://zenn.dev/shigeru_oda/articles/a30830c4f672f1d51f4b


# まとめ
ECSサービスコネクトはユースケースとして、
- ECSでマイクロサービスを運用していて
- クラスターやVPC跨ぎの通信を手軽に管理したい

という場合に有用な選択肢になりそうです。
App Meshを導入するほどじゃないけど、ECSを使ってちょっとしたマイクロサービスを構築したい…という際にはこれを使えば、ELBすら使わずにサービス間通信＆モニタリングを実現できそうですね。
FAST-LIO2導入

# 概要

[IROS2022のSLAM発表](https://qiita.com/np_hsgw/items/be0ab5b91b63975e83e6)をまとめている中でFAST-LIO2がかなり性能がよさそうなのでサンプルを動かすまでやってみる。

## 事前準備
* ホストPCのスペック
    * Ubuntu20.04
    * CPU Ryzen 3600
    * GPU RTX 3060
    * Memory 32GB
        * 巨大なrosbagファイルで動かすと32GBだと足りない可能性がある。64GBあると安心
* ROS melodic以降に対応とのことなので、今回はautoware.aiのDockerコンテナーを使用する。
    * ROS1の実行環境を整えるには一番簡単な気がする。
    * 導入は<https://zenn.dev/karaage0703/articles/cbc319a2a76fe1>等を参照するとよい。

## インストール

* [公式サイト](https://github.com/hku-mars/FAST_LIO)の手順に従う。 
* 特に詰まることはないはずだが、念の為インストール手順を以下に記す。

```bash
# コンテナーに入る
# コマンド例. docker exec -it コンテナー名 bash
# rosコマンドが通らない場合はsource /tmp/entrypoint.shを打ち込む
# PCL, Eigenはコンテナーにインストール済みのためパス。
# Livox SDKのインストール
cd /tmp
git clone https://github.com/Livox-SDK/Livox-SDK.git
cd Livox-SDK
cd build && cmake ..
make
sudo make install

# livox_ros_driverの導入
# autowareのコンテナーならshared_dirディレクトリを作成しているはずなので、その中で作業する。
cd ~/shared_dir
git clone https://github.com/Livox-SDK/livox_ros_driver.git ws_livox/src
cd ws_livox
catkin_make
source ./devel/setup.sh

#FAST-LIOの導入
git clone https://github.com/hku-mars/FAST_LIO.git
cd FAST_LIO
git submodule update --init
cd ../..
catkin_make
source devel/setup.bash
# 以下のコマンドでエラーなくrvizが立ち上がればインストール完了
roslaunch fast_lio mapping_avia.launch
```

## サンプル実行

* 公式サイトにサンプルRosbagが用意されており、使用方法も記載されている。
* インストールが正常に完了していれば問題なく動作するはず。
* ただ、velodyneのサンプルの中にはトピック名の変更が必要なものがあった。
* その場合、トピック名を`/laserMapping`ノードが要求する形に変更するコードを`launchファイル`等に記入してやれば動作する。
    * 追記
        * 見逃していたが、公式サイトに`config/velodyne.yaml`の当該トピック名を更新すればいいという記載あり。

```xml
<!--lidarとimuのトピックを/laserMappingが要求する名前に変更-->
<!--以下はvelodyneサンプルで遭遇したときに、mapping_velodyne.launchに記入した例-->
<node pkg="topic_tools" name="relay_lidar" type="relay" args="/points_raw /velodyne_points"/>
<node pkg="topic_tools" name="relay_imu" type="relay" args="/imu_raw /imu/data"/>
```
IPアドレス特定完全攻略マップ

# はじめに
皆さんこんにちは、JKハッカーのそらです。
嘘です。独身男です。
皆さん好きな女の子のIPアドレス特定したくないですか？
分かります。IPアドレスが分かればwiresharkで通信を盗聴でき、kalilinuxでPCを乗っ取ることができます。（犯罪なのでやめましょう）
そこで今回は状況に応じて色々パターンに対応したIPアドレス特定方法を紹介したいと思います。
# 目次
1,IPアドレス特定MAP
2,好きな女の子がwebサイトを持っている場合
3,同一ネットワーク内に好きな女の子がいる場合
4,メールアドレスを持っている場合
5,最後に
# １　IPアドレス特定完全攻略MAP
![S__13688935.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986957/6d5f977f-2efa-bf00-8aa9-6dfa0f3d5feb.jpeg)

こちらがIPアドレス特定攻略MAPです。
webサイトを持っていたり、同一ネットワーク化にいれば案外簡単に分かってしまいます。
それでは、レッツ特定！
# ２、好きな女の子がwebサイトを持っている場合
まずは好きな女の子がwebサイト持っている場合は結構簡単です。
## Whois
こちらでドメインを検索するだけ！
[whois](https://whois.jprs.jp/)
と言いたかったのですが、最近は中々出てこないみたいですね
試しにベネッセのドメインを検索してみました。
IPアドレスは出てきませんね
![S__13664260.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986957/e9e1002d-9930-4583-f09d-7986cee39384.jpeg)

## nslookup
次はnslookupコマンドを紹介します。
こちらではコマンドプロンプトを使用します。
nslookup [ドメイン名]
![S__13664261.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986957/2c73c4c8-030d-b3f8-3517-881fc5b516ef.jpeg)
でましたね,IPアドレス！
こんな感じでwebサイトがあれば結構簡単に出てきます。

# ３ 同一ネットワーク内に好きな女の子がいる場合

webサイトを持っている方少ないですよね、なので実用性が低いと考えられます。
そこで同一ネットワーク内に入るだけであれば、できる可能背が高いと思いますよね
それでは見ていきましょう
## ARP
最初に紹介するのはARPです。
みなさんARPを知っていますか,IPアドレスを知っている端末にこのIPアドレスの人のMACアドレス教えて！って言って教えて貰うコマンドです。
コマンドプロンプトで
arp -a  とかでできます
![S__13664264.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986957/a77907c4-ba32-8d83-7b30-41ebd14a6add.jpeg)
こんな感じでざっと出てきますね、ただホスト名などを一緒に出してくれないので、誰の端末かわかりにくいです。
## IPスキャナー
こちらは、ホスト名、MACアドレス,IPアドレスをつなげて表示してくれる優れものです。
[SoftPerfect Network Scanner](https://www.softperfect.com/products/networkscanner/)
これで同一ネットワークにいる人のIPアドレスがわかり、さらにホスト名から誰のIPアドレスか推測することが可能です。
![S__13688934.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986957/0dc0fc83-38e5-843f-1025-52d001068849.jpeg)
IPアドレスは動的な者ですが、ホスト名から誰のMACアドレスか分かっていれば、変わっても,rarp（arpの逆）で特定することができますね

# ４ どちらでもない場合

好きな人がwebサイトをもっている、同一ネットワークにいること、中々ないかもしれませんね
そんな時はメールをしましょう！

## メールヘッダー


メールにはメールヘッダーというのがついていまして、そこにIPアドレスが乗っているのです。
同時にメールには皆様もお気を付けください！
[メールヘッダー確認方法](https://baremail.jp/blog/2020/06/03/728/)
見せられないものが多くなるので画像は出せません、メールを送るだけで情報が出てしまうのです。

## 標的型攻撃にきをつけよう

怪しいメール、URLをクリックさせてweb側で引っこ抜いたり、色々な方法で攻撃者は攻撃してきます。
しっかり用心して、引っかからないようにしましょう

# 最後に

皆さん好きな女の子のIPアドレスは特定できましたか？
正直wiresharkやkalilinuxをつかった方法も解説したいのですが、法律的な事や、モザイクだらけになってしまうので今回はやめておきます。
ただこのマップを知っておけば色々な場面でIPアドレスを特定することができます。
同時にこの場面で自分のIPアドレスもわかってしまいます。
意外とIPアドレスが分かるケースって多いですよね
なのでもし貴方のPCのIPアドレスが特定されても、セキュリティを高め攻撃をされにくいようにすることをお勧めします。
そして好きな女の子のIPアドレス特定なんてやめてデートにでも誘いましょう！
美味しいパンケーキのお店なら質問いただければ教えます。