OmniAICreator/Qiita-1.07M huggingface dataset:
flatpickr まとめ と 祝日判定

カレンダー機能が欲しかったので、いいライブラリが見つかって使ってみた。
installもできるが、今回はlinkとscriptをhtml上においておく方法でやりました。
こういうの名前あると思うのですが、忘れました。
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>`
参考：
公式
https://flatpickr.js.org/getting-started/
日本語版
https://tr.you84815.space/flatpickr/examples.html

```
const config ={
mode: 'multiple',
dataFormat: 'Y/m/d',
locale: 'ja',
disable: ['2021-02-23']
}
flatpickr('.flatpickr',config)
```

こんな感じで使用可能。
mode:multipleはカレンダー複数選択可能になる。
disable:[]は中に日付を入れると、その日付は選択できないようになる。
一度選択したらこの中に入れて２度選択できないようにしてみるといいかもね。
例) config.disable.push(2021-02-28)

### 月日数計算

```js
function detMonthDays(yearStr,monthStr){
 let dayStr = 01
 let jsMonth = monthStr -1
 return new Date(yearStr,jsMonth+1,0).getDate()
}

getMonthDays(2021,02) //28
//月の日数を計算する関数 多分これで閏年も行けるはず
```


### 祝日計算
加えて、祝日を判定することがあったのでやってみました。
祝日は、可変的で固定ではないので計算は基本できません。
元号が変われば、天皇誕生日が変わりますし、オリンピック開催とかでも変わるのかな？

国が出している、csvから情報を取得して判定する方法をとります。
こんな感じのデータ
`国民の祝日・休日月日,国民の祝日・休日名称
2021/1/1,元日
2021/1/11,成人の日
2021/2/11,建国記念の日`

```js

function getHoliday(){
 let req = new XMLHttpRequest()
 req.open('get','syukujitsu.csv',true)
 req.send(null)
 req.onload = function(){
 splitCsv(req.responseText)
 }
}

function splitCsv(str){
 let result = []
 let tmp = str.split('\n')

 for(let i = 1,i < tmp.length,i++){
  result[i] = tmp[i].split(',')
  result[i][0] = result[i][0].replace('\//','')
  holiday_result.push(result[i][0])
 }
}

```
流れは：
getHolidayでcsvをXMLHttpRequestで読み込む

splitCsvを読む

回数分forで回す(ただし、初回は省く)

データが、`2021/1/1`の形ですが、今回は`2021-1-1`の形にしたかったので
正規表現を用いて、/と-を入れ替え処理を挟む

入れ替えたデータをholiday_resultの配列に入れる
な感じ。

`req.onload = function(){
 splitCsv(req.responseText)
 }`
はrerurn設定ができなかったために、今回は、関数外にholiday_resultの配列を定義して使用しました。

読み込みの中では値を返すことはできないのかもしれません。（検索しても出て来なかった..）
あくまで、csvを読み込む処理を行うのみなのかもしれません。
【初心者でもわかる】cssで使われる透明3種類の使い方

# どうも7noteです。CSSで使う透明には大きく3種類あるので、使い分け方について解説。

一言に透明、といってもcssでは透明にする方法が3つあります。

・ opacity　　　　　(プロパティ)
・ transparent　　　(色)
・ rgba(0,0,0,0)　　(色の透明度)

それぞれの使い方や意味を解説

## opacityの使い方

opacityはcssプロパティの一種です。使い方はこう

```style.css
/* 例 */
.clear {
  opacity: 0;
}
```

opacityは**要素の透明度を指定することができます。**

0 → 透明(透明度0%)
1 → 不透明(透明度100%)

100%が透明になっていない状態です。
たとえば0.3を指定すれば、要素は100%の見えている状態から30%まで透明になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/97d55447-c39e-5558-4366-c5a896b9a475.png)



**【特長】**
これは要素ごと透明にするので、子要素も一緒に透過されます。

## transparentの使い方

cssで文字色や背景色を指定するときに#000やred等を指定するのと同様に**transparentを指定すると色が透明になります。**

```index.html
<p>文字が<span class="clear">透明</span>になります。</p>
```

```style.css
.clear {
  color: transparent;
}
```

文字を透明にしたらこんな感じ↓

---

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/994da6c0-f070-9012-95b3-b0cb300a7762.png)
(↓カーソルで選択しようとすると見える↓)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/040fe861-c430-cf57-8f6e-9e8c35fd4410.png)

---

**【特長】**
これは透明度合を調整できないので、完全に透明にすることにしかできません。半透明にしたりはできないので注意。
色を半透明にしたい場合は次のrgba()を使いましょう。


## rgba()の使い方

rgb()で色を指定することができるのですが、これにaを加えて透明度も指定することができます。
たとえば`rgba(0,0,0,0.5)`とした場合、黒の半透明を作ることができます。

```style.css
/* 例 */
.clear {
  width: 100px;
  height: 100px;
  background: rgba(0,0,0,0.5);
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/8bdb36c5-f1a1-2779-5013-fa3aea68620d.png)


指定できる幅は0～1でopacityと同様に0で完全透明になります。

**【特長】**
opacityと違い要素を透明にしているわけではないので、子要素は透明にしたくない時などはrgba()を使うとGOOD!!


## まとめ

**【ざっくりした使い分け方】**

・画像等色を指定しないもの　→　opacityで透化させる
・背景色、文字、border等　　→　transparentやrgba()で透過色を指定

あとはopacityだと中にある子要素も一緒に透明になってしまうので、**半透明の要素の上に文字を乗せたい時などはrgba()を使うとよいでしょう**。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/43f439bf-1385-36e0-d4b7-4faed0c0e353.png)


#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
ページを戻すとき

# こんな発見が！

些細な発見ですが、link_toメソッドでリンク先を**:back** に指定してあげると「ページに戻る」ことができます。
例として、railsの編集機能で編集せずに戻りたい時に使えます！

```edit.html.erb
<%= link_to "ページに戻る", :back, class: 'btn'%>
```
[GAS] Maps.Geocoderで住所や施設名から郵便番号を検索・取得できる

## はじめに
約１０００件近くの住所リストから郵便番号を調べる必要があったため、色々調べた際の備忘録です。

郵便番号と住所を紐付けたＣＳＶデータ[^1] は[日本郵政のサイト](https://www.post.japanpost.jp/zipcode/download.html)からダウンロードできます。しかし、それを使ってシステムを構築するとなれば、およそ１２万件のデータをクレンジングしなければなりません。

もっとお手軽に構築できないかと調べたところ、`Maps.Geocoder`で住所や施設名から郵便番号を検索・取得できるということで、Google Apps Script（以降GAS）を使用するという結論[^2] に至りました。

## Maps.Geocoder
主な利用用途としては住所から緯度経度取得（ジオコーディング）、及びその逆（リバースジオコーディング）かと思います。

レスポンスのデータ構造は、Mapsクラスのドキュメントではなく、[Google Geocoding APIのドキュメント](https://developers.google.com/maps/documentation/geocoding/overview)にて確認できます。

```JSON: レスポンスのデータ構造サンプル
{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "1600",
               "short_name" : "1600",
               "types" : [ "street_number" ]
            },
            {
               "long_name" : "Amphitheatre Pkwy",
               "short_name" : "Amphitheatre Pkwy",
               "types" : [ "route" ]
            },
            {
               "long_name" : "Mountain View",
               "short_name" : "Mountain View",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "Santa Clara County",
               "short_name" : "Santa Clara County",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "California",
               "short_name" : "CA",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "United States",
               "short_name" : "US",
               "types" : [ "country", "political" ]
            },
            {
               "long_name" : "94043",
               "short_name" : "94043",
               "types" : [ "postal_code" ] // ←郵便番号データ
            }
         ],
         "formatted_address" : "1600 Amphitheatre Parkway, Mountain View, CA 94043, USA",
         // 省略
      }
   ],
   "status" : "OK"
}
```

この内、住所に関しては国名や〒を含めた文字列[^3] である`formatted_address`、都道府県や市区町村といったレベル別に分割された`address_components`が取得可能で、いずれにおいても郵便番号を取得できます。

### 住所もしくは施設名から郵便番号を返す
引数に住所もしくは施設名を取り、`formatted_address`より郵便番号を抽出するか`address_components`より取得します。

```Javascript: Sample.gs
//formatted_addressより郵便番号を抽出
const hoge = addr => {
  const res = Maps.newGeocoder().setLanguage('ja').geocode(addr)
  return res.results[0].formatted_address.slice(4,12)
}

//address_componentsより取得
const fuga = addr => {
  const res = Maps.newGeocoder().setLanguage('ja').geocode(addr)
  const addr = res.results[0].address_components
  return addr[addr.length-1].short_name // long_nameでも結果は同じ
}

Logger.log(hoge('東京駅'))                   // 100-0005
Logger.log(fuga('東京都千代田区丸の内１丁目')) // 100-0005
```

## 最後に
郵便番号をハイフン抜きにするには`replace('-','')`でいいと思います。
エラー判定は`res.status`、複数候補の有無は`res.results.length`で確認できますので、その後の処理は仕様に合わせてカスタマイズすれば良いと思います。

### [追記]
タイトルのGeocodeをGeocoderに修正しました。
修正ついでの補足情報ですが、無料アカウントの場合、１日のAPIアクセス制限は１０００件となっています。


[^1]: 各都道府県別のデータと都道府県の全データがダウンロード可能。
[^2]: 結論と言いつつも、約１０００件の一括走査は実行時制限に引っかかるため、最適解ではないです。
[^3]: hoge('東京駅')では、`日本、〒100-0005 東京都千代田区丸の内１丁目`。
サービス稼働中のMySQLのカラム変更で気をつけること

# サービス稼働中のMySQLのカラム変更で気をつけること


## はじめに
こんにちは。webエンジニアの [ningenMe](https://twitter.com/ningenMe) です。  
サービス稼働中にMySQLのカラムを変更したい、そんな場面に遭遇したとき。  

そういうときのtipsを知ってる範囲で並べていきます......と思っていたらちょうど[良い記事](https://qiita.com/doriven/items/6d31f01589d6cfcc1b85)が既に出ていました。なので、ここで上げてないポイントを書いていきます。


## 直でalterを打つ。
趣味の開発など、dbが止まる時間があって良いならこれが一番楽です。
ただロックがかかる、一時的に対象のテーブル容量が2倍になるなどの弱点があるので注意が必要です。  
リアルタイムでapiとかから叩かれるdbならこの選択肢は殆ど無理そうです。

## pt-online-schema-change を使う
上記の記事でも上げられていましたが、便利なツールです。  
リアルタイムで更新のあるテーブルや、レコード数がそこそこ多いテーブル(1億件ぐらい)でも、数時間かかるものの手間いらずでカラム変更が出来ます。
中規模のデータ量ならこれで大体十分だと思います。  

after句やfirst句が使えるのもいいところです。  
容量に関しては普通にalter打つときと同じで、2倍持てるかを気をつける必要があります。  
途中で容量足りなくなって止まると、triggerを自分で外す作業などが出てきて余計な本番作業が発生するので気をつけましょう。

## メンテナンスに入れる
サービス止める対応が許されるなら、メンテナンスと称してサービスを止めてしまってalter打つというのがかなり楽に感じます。もちろんアプリケーションにもよります。

ここで「メンテナンスに入れる」は対象のテーブルを参照や更新のない状態にしてしまうという意味です。

容量が気にならない場合はalter打つだけでいいのですが、容量が逼迫しているときでも下記の方法で変更できます。

- alterを打つ前に更新したいテーブルをdump。
- その後更新したいテーブルをtruncate。
- alterを打つ。
- dumpしたデータをrestore。  

シンプルですね。  
ただdump取るとはいえtruncate打つのが心理的ハードルが少し高いのが難点です。

## 複数カラムの変更がある場合、1個のクエリで処理する。
カラムが変更された後、MySQL側のキャッシュが一時的に無くなるためクエリの負荷が普段より大きくなります。
そのため修正必要なカラムが複数ある場合はできるだけクエリをまとめる方が良いです。  

複数テーブルを更新する際は1テーブル処理した後負荷が上がっていないか少し待つのがベター。

この「キャッシュ乗るまでパフォーマンスが悪い」は他の場面でも効いてくるときがあって、例えばMySQLのクラスタ構成でサーバを増やしたときなどにもサービスインしたばかりのdbはこのようになることがあります。  

気づいてない罠とかは結構あるので、何の操作をするにもgrafanaなどでメトリクス見ておきましょうという感じがありますね。



## 高負荷な時間を避けて作業をする

全然tipsでもないし当たり前やんけ、とはなるんですが結構危機感の度合いが個人差あるなと思うので改めてと。  
私事ですがdbのbusyが100%になってapiから軒並みconnectionできなくなってサービス死ぬみたいなのを経験してから、かなり怖さが生まれました。  
まあそもそもこれぐらいの作業で落ちるようなbusyが常態化していることがかなり問題ですが......。  

完全に本番の負荷を想定するのは難しいですが、最低限、本番と同様のレコード数のテーブルを別のテスト用のqa環境などに作って試し打ちするのは必須なように思います。



## さいごに
かなりふわっとした記事になってしまいました。すみません。[先行記事](https://qiita.com/doriven/items/6d31f01589d6cfcc1b85)がしっかりしていると思うので是非そっちを読んでください。  
alter時にテーブル容量2倍いることだけでも伝わればなと思います。  


MySQLじゃなくてcassandraでカラム追加だとめっちゃ楽なので(比較するものでもないですが)、データの拡張性やリカバリのコストも初期設計でちゃんと見積もれるといいなってひしひしと感じます。  
みなさんも楽しくてドキドキな本番db作業を是非。

ではでは。
Raspberry Pi Pico。Tensorflowのオカゲで、Lチカが綺麗っ。

#キレイっ。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1144370/760cc1c1-28dc-f64d-e5b2-65f08ac29db3.gif" width=500>
(動画は無編集＠自宅 ※1。撮影動画のアニメGIFへの変換のみ。）

　

* Tensorflow(Neural Network)によるLED点滅(Sin波模擬）のキレイさを強調したかった。
* Picoのサイズ感は、正確な比較対象が手元になかったので、予断を与えないようにした。

↓念のため拡大。
　　（なんか、不自然になるのは、ちょっと、**ばぐってさちってますか？**
 ⇒　Neural Network要因だと楽しいので、別途、原因追います。ご存じの方おられたら、教えて下さい、時短。）


![kakudai.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1144370/864e4841-6aed-cce0-66ba-df31b3b16785.gif)


#環境

以下のソースコードを使った。
https://github.com/raspberrypi/pico-tflmicro

以下の記事を参考にした。
https://masato-ka.hatenablog.com/entry/2021/02/14/122433
↑何をおっしゃてるか、理解できていない部分もあるが、**面白い**と思った。

環境は、
Windows10
MSYS2　※
 ※本当は、Visual Studio + nmakeでさばきたかったが、
　　途中でnmakeに濡れ衣を着せて、MSYS2へ。多分、どの環境でも本来は簡単だと思う。

#情報

以下のようなエラーで苦しんだ。CMakeが1ミリもわかっていないせいだが、
簡単のため、util_test.cppを消した。

```
util_test.cpp:(.text.startup.main+0x0): multiple definition of `main'
```

書込み↓は、**衝撃の簡単さ**。ボタンを押すこと以外、説明不要。

https://www.mztn.org/rpi/rpi52.html
の記載抜粋(番号付与）
>1.Raspberry Pi Pico の基板上にある BOOTSELボタンを押しながら、USBケーブルをPCに接続します。
2.USBドライブとして認識されるので、uf2形式のファイルをコピーします。
3.自動的にUSBドライブが切断され、Raspberry Pi Pico上で書き込んだプログラムの実行が始まります。

#※1 Picoの背景に映っている動画
『People at the Base of Large Waterfall』
by Videvo
https://mazwai.com/video/people-at-the-base-of-large-waterfall/455196

#反省

* 『Lチカがキレイっ』というほど、綺麗でなかった。これは、残念。
⇒別途、Tensorflow使いとしては、**Tensorflowの力を引き出したい**と思う。
* CMakeを1Hrほど勉強しよう。

※わかること少ないですが、動かし方とかの情報が必要であれば、コメントとかでご指摘下さい。
ログ出力に一工夫

# 目次
[1.はじめに](#1)
[2.ログ出力を簡単に ON OFF する](#2)
[3.あとがき](#3)

<h1 id="1">1.はじめに</h1>
…主に自分が見直すための記録です…
初心者ということもあり、開発中、デバッグのためにログを仕込むことが多かった。
けれども最終的にはログが出ないように消さなくてはいけない。
１つ１つ消してもいいが、そんなことすると面倒くさい上に、「また必要になった！」となったら一から仕込み直しに…

そんなジレンマを解決する方法を知ったので記録しておく。
てか、めっちゃ簡単なことだったのに今まで思いつかなかったｗｗ

<h1 id="2">2.ログ出力を簡単に ON OFF する</h1>

```ruby:target.js
//ログ出力モード
const isDebug = true;

/**
 * ログアウトプット
 * @param {any} obj ログ出力内容
 */
const outputLog = (obj) => {
    if (isDebug) {
        console.log(obj);
    }
}
```

isDebug = false 　でログを出さないようにできる。
問題点としては、

* chrome のデベロッパーツールとかで見るとログの位置が outputLog の位置になるので、問題の位置を特定するのにひと手間かかること
* ログの詳細が見れない

ソース内の流れを追うときとかに便利
普通の conosle.log と使い分ける

<h1 id="3">3.あとがき</h1>
初心者はソースの書き方を学ぶのも大切だけど、デバッグ関連の知識も大切！
今回はログの書き方についてだが、
デベロッパーツールには便利な機能が満載なので、使いこなせるようにもっと勉強していきます！
Excel の AA 形式のカラム名と配列インデックスを相互変換する JavaScript

Excel では、列名が A・B・C・・・Y・Z・AA・AB・・・XFC・XFD 形式にで表示されます。
配列のインデックス（添字）と列名を相互変換する JavaScript ワンライナー。↓

```js
// Excel Column to Index
const col2idx = c => c.split("").reduce((prev, c) => (prev * 26 + parseInt(c, 36) - 9), 0) - 1;

// Index to Excel Column
const idx2col = n => ((n > 25 ? idx2col(Math.floor(n / 26 - 1)) : "") + (n % 26 + 10).toString(36).toUpperCase());
```

https://gist.github.com/kawanet/69237038ea3c414284a5418d732b5660
定型句を入力するExcelショートカット

#はじめに
Excelを使うとき、セルに定型句（自分の名前とか）を繰り返し入力する必要があるときがある。
いちいち手で入力していてもいいが、面倒。
そこで、「定型句を入力するExcelマクロ」＋「マクロのショートカット登録」で簡単に入力できるようにする。

#登録手順
1. Excelを起動し、「表示」タブをクリック。
![スクリーンショット 2021-02-23 220835.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235241/ec7d0709-f09f-b3f3-1c7a-5325c7d9ce43.png)

1. 右端の「マクロ」タブで、「相対参照で記録」をクリックしておく。
**クリック前**
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235241/b4bb8309-f001-c6dc-cca5-f6e16182562d.png)
**クリック後**（アイコンが灰色に変化している）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235241/6f1a4a16-0400-33b7-7cf3-5f9b667af652.png)

1. 同じ「マクロ」タブで「マクロの記録」をクリックし、適当な名前と、起動したいショートカットキーを登録。
マクロの保存先は、**個人用マクロブック**にすること。
（ショートカットキーに大文字アルファベットを登録すると、Ctrl+Shift+アルファベットで起動するようになる。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235241/b04de984-ef40-c84f-7941-9ea4ab78dec9.png)
1. Okを押すとマクロの記録が開始される。どこもクリックしないように注意しながら、定型句として入力したい文字列を入力し、Enter（選択済みのセルに内容が入力される）。
1. 「マクロ」タブの「記録終了」をクリックし、記録を終了する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235241/8fd5a512-11f9-4b15-80cc-6ae55a790541.png)
 

#使い方
文字を入力したいセルを選び、登録したショートカットキーを押すと、登録した文字列が入力される。
【Python】Seleniumチートシート

#SeleniumでDOM要素を選択する方法
##DOMの中から最初に見つかった要素を1つだけ取得

|メソッド名|説明|
|---|---|
|find_element_by_id(id)|id属性から要素を1つ取得|
|find_element_by_name(name)|name属性から要素を1つ取得|
|find_element_by_css_selector(query)|CSSセレクターを指定して要素を1つ取得|
|find_element_by_xpath(query)|XPathを利用して要素を1つ取得|
|find_element_by_tag_name(name)|タグ名nameの要素を1つ取得|
|find_element_by_partial_link_text(text)|リンクの子要素を含むテキストから要素を1つ取得|
|find_element_by_class_name(name)|クラス名nameから要素を1つ取得|





##DOMの中にある全ての要素を取得

|メソッド名|説明|
|---|---|
|find_elements_by_css_selector(query)|CSSセレクターを指定して全ての要素を取得|
|find_elements_by_xpath(query)|XPathを利用して全ての要素を取得|
|find_elements_by_tag_name(name)|タグ名nameの全ての要素を取得|
|find_elements_by_class_name(name)|クラス名nameから全ての要素を取得|
|find_elements_by_partial_link_text(text)|リンクの子要素を含むテキストから複数要素を取得|
|find_element_by_partial_link_text(text)|リンクの子要素を含むテキストから要素を取得|

#Seleniumで要素に対して行う操作

|メソッド名|説明|
|---|---|
|clear()|テキスト入力できる要素でテキストをクリアする．|
|click()|要素クリック|
|get_attribute(name)|要素の属性nameを取得する．|
|is_displayed()|要素がユーザから見える状態かどうか|
|is_enabled()|要素が有効になっているかどうか|
|text|要素のテキスト|
|is_selected()|チェックボックスなどの要素が選択された状態かどうか|
|screenshot(filename)|スクリーンショットを撮る|
|send_keys(value)|キーを送信する|
|submit()|フォームを送信する|
|value_of_css_property(name)|CSSのnameの値を取得する|
|id|id要素|
|location|要素の位置|
|parant|親要素|
|rect|サイズと位置の情報を辞書型で返す|
|screenshot_as_base64|スクリーンショットBase64で得る．|
|screenshot_as_png|スクリーンショットをPNG形式のバイナリデータで得る．|
|size|要素のサイズ|
|tag_name|タグの名前|
|text|要素のテキスト|

#Seleniumのドライバに対する操作

|メソッド名|説明|
|---|---|
|add_cookie(cookie_dict)|クッキーに値を辞書形式で追加|
|back()/forward()|履歴を見て１つ前のページに戻る/進む|
|close()|ブラウザを閉じる|
|current_url|現在のURL|
|delete_all_cookies()|全てのクッキーを削除する|
|delete_cookie(name)|指定のクッキー変数を削除する|
|title|現在のページのタイトルを返す|
|execute(command,params)|ブラウザ固有のコマンドを実行する|
|execute_async_script(script,*args)|非同期でJavaScriptを実行する|
|execute_script(script,*args)|同期的にJavaScriptを実行する|
|get(url)|Webページを読み込む|
|get_cookie(name)|クッキーの値を得る|
|get_cookies()|クッキーの値を全て辞書型で得る|
|get_log(type)|ログを得る(browser/driver/client/server)|
|get_screenshot_as_base64()|base64形式でスクリーンショットを得る|
|get_screenshot_as_file(filename)|スクリーンショットをファイルに保存|
|get_screenshot_as_png()|PNG形式でスクリーンショットのバイナリを得る|
|get_window_position(windowHandle='current')|ウィンドウの位置を得る|
|get_window_size(windowHandle='current')|ウィンドウのサイズを得る|
|implicitly_wait(sec)|最大待機秒を指定して処理が終わるのを待つ|
|quit()|ドライバを終了させ，各ウィンドウを閉じる|
|save_screenshot(filename)|スクリーンショットを保存する|
|set_page_load_timeout(time_to_wait)|読み込みタイムアウトする時間を指定|
|set_window_position(x,y,windowHandle='current')|ウィンドウの位置を指定|
|set_window_size(width,height,windowHandle='current')|ウィンドウのサイズを指定|
|title|現在のページのタイトルを返す|
【Swift】Closureを用いてAPIを扱う




###はじめに
今回は自分用メモです。
質問などはコメントのところで受け付けています！

###今回したいこと
closureを用いてServerの通信が完了した後、成功したらUIを更新、失敗したらエラーアラートを出す処理を作る。
ネットワークエラーが発生した時のエラー内容をenumで書き出しておく。

```Swift
enum NetworkError: Error, CustomStringConvertible {
    case unknown
    case invalidResponse
    case invalidURL
    var description: String {
        switch self {
        case .unknown: return "不明なエラーです"
        case .invalidResponse: return "不正なレスポンスです"
        case .invalidURL: return "不正なURLです"
        }
    }
}
```
次に、APIClientというクラスに通信処理を保持させておく。

```Swift
class APIClient {
    func sendRequest(success: @escaping ([String: Any]) -> (), failure: @escaping (Error) -> ()) {
        //リクエストするURL。実際には存在するURLを用いる。
        guard let requestUrl = URL(string: "https://test") else {
            //もしrequestUrlがnilだったら、invalidURLエラーをfailure closureに渡し、処理を終える。
            failure(NetworkError.invalidURL)
            return
        }
        //URLRequest、URLSessionを作成している。
        let request = URLRequest(url: requestUrl)
        let session = URLSession.shared
        //Serverに対するリクエストを実行している。
        let task = session.dataTask(with: request) { (data, response, error) in
            if let error = error {
                //もしエラーだったら、errorをfailure closureに渡し、処理を終える。
                failure(error)
                return
            }
            guard let data = data else {
                //もしServerから何もデータが返ってこなかったら、unknownエラーをfailure closureに渡し、処理を終える。
                failure(NetworkError.unknown)
                return
            }
            //Serverから返って来たデータを辞書形式に変換する。
            guard let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String: Any] else {
                //変換できない場合、invalidResponseエラーをfailure closureに渡し、処理を終える。
                failure(NetworkError.invalidResponse)
                return
            }
            //jsonをsuccess closureに渡す。
            success(json)
        }
        task.resume()
    }
}
```
呼び出したい場所で以下のように記述すればServerに対してリクエストが成功した後、もしくは失敗した後特定の処理を記述できる。

```Swift
let api = APIClient()
api.sendRequest(success: { (json) in
    //success closureが来た時の処理(引数はjson)
    //UIの更新
}) { (error) in
    //failure closureが来た時の処理(引数はerror)
    //エラーアラート
}
```

###最後に
今回のclosureはコールバック関数みたいな使われ方をしてますね。
CSSで画面サイズを小さくすると、レイアウト崩れる問題

自身の備忘録を書いていきます。

最近cssでレイアウト完成！よしッ！て思って縮小して見たら
すごい勢いで**レイアウトが崩れる**ので
レスポンシブについて少し調べてみた。

#解決方法



```
img.main {
  width: ~~ px;
  max-width: 100%;
  height: auto;
```
　　
横幅の最大値を合わせる記述の
**max-width: 100%;**
と

高さを合わせてくれる
**height: auto;**
の記述をセットで足してあげる。

後はレイアウトに合った**width**を決めてあげれば
真ん中をキープしたまま画面縮小できる。
　　

この時、余りmarginで横幅をいじらない方がいいらしい。
paddingで位置調整すると崩れにくいらしい。

cssって簡単そうに見えて奥が深くて楽しいです。
業界未経験者が初めての共同開発を終えて

#1.はじめに
所属しているオンラインサロンにて、共同開発を行いました。今回作成した成果物は下記リンクからご確認ください！
[成果物はこちら](https://tenkuehotel-r018.netlify.app/)（本サイトの施設は実在しません。）
この記事では、未経験が共同開発を経験してみた感想、学んだこと等を記載していきたいと思います。
共同開発に興味をお持ちの方の参考になりましたら幸いです。

##1-1.簡単に自己紹介
・Web開発エンジニアを目指し学習中
・業界未経験
・2020年11月〜本格的にプログラミングを学習中

##1-2.概要
共同開発の概要は下記の通りです。
・メンバー：メンター（現役エンジニア）1名+開発者（業界未経験）3名
・期間：約3週間
・環境/技術：EJS、Sass、JavaScript（jQuery）、Node.js、GitHub(ソースコード管理)
・デザインについては、完全一致ではなく、おおよそのレイアウトが整っていれば良いという基準のもと開発した。

#2.開発の流れ、各段階における所感
早速ですが、開発の流れについて時系列で紹介していきます！
また、各段階における学んだこと、所感について記載していきます。
##2-1.開発準備、環境構築
【実施事項】
・キックオフミーティング（自己紹介、チームリーダーの決定、担当ページの決定）
・[Trello](https://trello.com/ja)（タスク管理ツールです。）のボード作成（ガントチャートによるスケジュール管理のため）
・リモートリポジトリの作成（GitHub）、クローン
・Node.jsのバージョンを統一
・実装内容をissueに登録（[issueについてはこちら](https://qiita.com/janus_wel/items/ba47259f107b161c5727)）
・上記が完了しているかメンバー間で確認
【所感】
　私はリモートリポジトリの作成、チームメンバーにアクセス権を付与する作業を行いました。
おそらく、実際の実務でも確実に行うことであり、一人の開発ではなかなか経験できないため経験できてよかったと思っています。
　Node.jsのバージョン指定についても一人ではなかなか意識しないと行わないと思いますが、実務では必ず行うことだと思います。

##2-2.実装
【実施事項】
・担当ページの実装
・Git、GitHubによるコード管理
・slackによる日々の進捗報告
・週一回の定期ミーティング
【所感】
　開発に携わった３人とも未経験であり、日中は仕事をしている状況した。
そんな中でも、不明点を質問し合ったり、積極的に記事を共有したりすることで、スムーズに開発を進めることができたと思います。
質問時には、お互い未経験同士であるため、質問の内容、意図をしっかり汲み取ってもらうために、具体的に詳細に記載することを心がけました。
　また、コーティングには、Sassを使用しました。記法については予め、[FLOCSS](https://github.com/hiloki/flocss)の記法に従うよう決められていました。現場によりますが、今回使用したFLOCSS記法などを使用して開発をすることが多いそうです。
私は、今回の共同開発で、初めてこのような記法について知り、あれこれ勉強しながら開発を進めました。最初は、少しやりにくさを感じましたが、徐々に慣れ、他人のコードを見ても分かりやすく、このような記法の大切さを知りました。FLOCCSについて、初めて聞いた方は、FLOCSS、BEMやOOCSSなどで検索してみることをおすすめします。
　また、日々のタスク管理は各ページごとにブランチを切り、pushしていくことで行いました。共同開発を行う最大のメリットはここにあると思います。初めて共通のリポジトリにpushするときには手汗をかきました笑。間違って、masterにpushしないよう、ファイルを削除してしまったり等トラブルが起こらないよう皆慎重に調べながら行っていましたが、この結果としてgithubのコマンド操作について理解がとても深まったと思います。

#2-3.コードレビューからデプロイまで
【実施事項】
・完成したページのプルリクエスト
・開発者同士のコードレビュー
・レビュー結果に基づき修正
・メンターによるコードレビュー
・再度レビュー結果に基づき修正
・マージ、masterにpush
・デプロイ
【所感】
　ここでも、一番の収穫はGithub関連です。プルリクエストやpullやfetchについてあれこれ調べながら行いました。
開発者同士でレビューし合うことでより見本と近いものに仕上がっていきました。メンターさんからのレビューでは、実装画面上のご指摘の他、コードの保守性や他人から見たときのコードわかりやすさ等についてもご指摘いただき勉強になりました。

#３.まとめ
今回の共同開発で学んだことのなかで特に重要なものは下記であると考えています。
・Githubについて
 （リモートリポジトリの作成、pushやpullなどのコマンド操作、プルリクエスト等）
・CSSの記法（FLOCSS）について
一人の学習では、なかなか学習、経験できないことを学べるので、是非一度挑戦されてみることをおすすめします！
お忙しい中、最後までご覧いただきありがとうございました。
ros2-web-bridgeを使ってみた

## 経緯
[ros2-web-bridge](https://github.com/RobotWebTools/ros2-web-bridge)を使う機会があったので、使い方の手順を共有します。

## 環境

- Ubuntu20.04
- ROS2 foxy

## 手順
まずは下の手順で進めてください。

```bash
$ cd <ros2-workspace>/src
$ git clone https://github.com/RobotWebTools/ros2-web-bridge.git
$ sudo apt install nodejs npm
$ cd ros2-web-bridge
$ npm install
```
npm installした段階で、node-gyp関連でエラーが発生した場合は下のコマンドを実行してください。

```bash
$ pip install git+https://chromium.googlesource.com/external/gyp
```
gypをインストールしても、自分の場合はnodeのバージョンが合っていないと言われました。なので、その場合は[こちら](https://phoenixnap.com/kb/update-node-js-version)を参考にnodeをアップデートしてください。
無事にnpm installが通った場合は、下のコマンドを実行してください。

```
$ node bin/rosbridge.js
```

新しいターミナルを開いて、次のコマンドを実行してください。

```
cd examples && node index.js
```
その後、ブラウザでhttp://localhost:3000/html/publisher.html にアクセスしてみてください。

## 結果
結果はこんな感じ。
![Peek 2021-02-23 21-55.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663246/b35ba507-2111-e9e7-aac9-679238707ec6.gif)
読書計画

#背景
あるレビューアーさんを余所目で見ていて、この人ちゃんときちんとした本を読んでないな
って思ったことから・・・そんなにJavaの本て名著はいくつもないので・・・
読んでおくに越したことはないなと思って・・・・私の本当に主観ですが・・・
私も読んでないです。理由は読んでも吸収できなかったので・・・
この人、ここから来てるなっていうのは別にいいかなと思います。
アジャイル本読んでても所詮っていうのは、別にいいかなって読まないよりはいいような気がする。
#読書計画
##基本
【電子合本版】Code Complete 第2版　完全なプログラミングを目指して
→　上巻だけでもね。
リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック
Effective Java 第3版
例外部分だけ参考にする？できるか？
参考
Effective Java 第３版 「ほぼ全章」を「読みやすい日本語」で説明してみました。
https://qiita.com/nyandora/items/3e5ec76ca3881bc17924
##実力
JUnit実践入門 ── 体系的に学ぶユニットテストの技法 WEB+DB PRESS plus
##案件用
JavaによるRESTfulシステム構築
Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)
##教養
人月の神話
JavaScriptを学ぶ準備とデベロッパーツールの基本

#JavaScript学習の忘備録として

実際の動作を確認する上でデベロッパー・ツールが便利です。

##Chromeデベロッパー・ツールとは？
- Webアプリのデバッグやパフォーマンスチューニングに役立つツール群
- JavaScriptを実行したり、通信の状況を確認したり、HTMLのレイアウトを確認したり、Webアプリ開発で役に立つ便利な機能が使えるもの
- Chromeブラウザに標準で搭載された機能(Chrome以外のブラウザにも似た機能を持つものもあります)


手順
1. 適当なウェブページを開く
2. 右クリックして`検証` を選択

![](https://paper-attachments.dropbox.com/s_3AF7B49B718C04FBA915EA5F7F08519C5C05B02FEB0FA571F259DB7EC17B36C8_1583038673163_+2020-03-01+13.57.35.png)

- Macの場合、`command(⌘) + option(⌥) + i` 3つのキーを`同時`に押します
- windowsの場合、 `F12`
3. タブが複数あるので　`Console` タブを選択します



##コードを動かす上で簡単な記述について。


    // 単純な計算 
    // + (加算) 
    // - (減算) 
    // / （除算） 
    // * (乗算) 
    // % (余り)
    
    1 + 1
    // 結果：2
    
    3 - 1
    // 結果：2
    
    5 * 5
    // 結果：25
    
    10 / 2
    // 結果：5
    
    10 % 3
    // 結果：1


    // 変数に数値を保存して計算
    var num1 = 10
    var num2 = 15
    
    num1 * num2 // 150


    // ログ出力 文字の場合は｀引用符｀と呼ばれる記号で囲むこと
    console.log("好きな文字")


    // 警告表示
    alert("好きな文字")


    // 関数の登録
    function hello(){
      console.log("HEllO WORLD!!")
    }
    // 関数の呼び出し
    hello() // "HEllO WORLD!!"


    // JavaScriptオブジェクト
    var obj = { 
      name: "マスオさん", 
      age: 3２, 
      favorite_foods: ["トマト", "ぶどう", "みかん"] 
    }
    
    obj.name // マスオさん
    obj.age // 3２
    obj.favorite_foods[0] // トマト

##便利な小技
- キーボードの上キー(↑)を押すと、直前に入力したプログラムを呼び出せる

以前に実行したプログラムを再度実行したいときに便利です
以前実行したプログラムを修正して再度実行することもできます

- 🚫マークをクリックすると、コンソールの中身をクリアできる

consoleを綺麗にしたい場合に使えます。
変数や関数などは登録されたままです。

![](https://paper-attachments.dropbox.com/s_3AF7B49B718C04FBA915EA5F7F08519C5C05B02FEB0FA571F259DB7EC17B36C8_1582882193110_+2020-02-28+17.55.43.png)



----------

学んだことを忘れないために記述して行きます。
何か間違いやご指摘があれば遠慮なくお願いします。
アプリケーションの機能を外部にも使えるようにする場合は Facadeパターンを使う

業務で主に Ruby On Rails での開発を行っていますが、そこで得た知見や、失敗への対応などについて記します。

今回は「アプリケーションの機能を外部にも使えるようにする場合」の実装についてです。

## 状況

コンテンツ管理の都合上、弊社では「コンテンツを記載したHTMLを開発者以外が作成するが、その中の動的な部分に ERB 形式でコード埋め込んでいる」場合が有ります。

それによって、そのページの動的な部分の出し分けを行えるようになっている、という仕組みです。

しかし、そのコードからは「アプリケーション内のどのメソッドも呼べる」ようになっていたので、以下のような事が生じます。

* 開発の都合上、メソッド名などが変わった場合に、そのコード埋め込み部分でエラーや `DEPRECATED WARNING` が生じる
* そのことを防ぐために、実装時にあらかじめ「組み込まれているコンテンツの中身」もチェックする、という作業が生じる

これらの幾つかの面は「運用方法の改善」での対処が考えられますが、そもそも論として

> そのコードからは「アプリケーション内のどのメソッドも呼べる」ようになっていた

こと自体が問題です。これを解決する方法を以下のように検討しました。

## Facadeパターンを使って、外部からの利用部分を分離する

ここで出てくるのが [GoF](https://ja.wikipedia.org/wiki/ギャング・オブ・フォー_(情報工学)) の提唱したパターン分類の一つで有る「Facadeパターン」というものです。

これは「外部との接続を直に行う」のを改めて、間に窓口となる `Facade(建物の正面)` の役を担うオブジェクトを配置する、というものです。

外部からはこの Facade のみを介してアクセスするので

* 外部からのアクセスを限定出来、
* 変更の影響をこのオブジェクトで吸収出来る

ことになります。

具体的には、たとえば以下のような Facade クラス(またはモジュール)を設けます。

```ruby
# クラス名は ContentFacade でも
module Content
  # インスタンスを生成する必要が無いので module_function に
  module_function

  # Item.count と直接呼んでいたのに代えて Content.item_size と呼ぶ
  def item_size
    Item.count.to_s(:delimited)
  end

  # 何かの都合で呼ばなくなったものは deprecate してしまう
  def item_count
    item_size
  end
  deprecate item_count: :item_size
end
```

このクラスのメソッドをインターフェイスとして固定し、常にテストを走らせるようにすれば、
アプリケーション側での更新による不具合を事前に防げます。

なお、Wikipedeia日本語版での [この Facadeパターンの説明](https://ja.wikipedia.org/wiki/Facade_パターン) では

> 異なるサブシステムを単純な操作だけを持ったFacadeクラスで結び、サブシステム間の独立性を高める事を目的とする

とあり、あくまでも「複雑な実装を『簡単な操作で行う』ためのもの」とも読み取れますが、GoFの著書 [オブジェクト指向における再利用のためのデザインパターン(改訂版)](https://www.sbcr.jp/product/4797311126/) によれば

> クライアントとサブシステムの間の結合を減らす

ことについても言及されていて、この Facade パターンがこのような「開発外の部分へのメソッド提供」の部分にも役立てることが分かります。

## まとめ

必要に応じて「アプリケーションの機能を外部にも使えるようにする」ことが必要にもなりますが、その時は「アプリケーションの実装(メソッド)をそのまま使ってもらう」のではなくて、Facadeパターンを使って「利用される箇所」を限定するようにするのが大事です。

そのことによって、アプリケーション自体の責務がその Facade部分に集約出来ます。

皆様のアプリケーション開発の参考になりましたら幸いです。
MySQLでFULLTEXT検索方法について


## 概要
* mysqlの結合したテーブルからFULLTEXT検索方法について調べてみた。

## 実行環境
* MySql 5.8 

## 背景
* MySQLバージョン5.7からInnoDBの全文検索機能搭載
* N-gram使える
* INDEX追加

## データ準備

* テーブル作成


```sql:create_table
-- 部門
CREATE TABLE dep (
  depid BIGINT UNSIGNED AUTO_INCREMENT NOT NULL PRIMARY KEY,
  depname TEXT
) ENGINE=InnoDB CHARACTER SET utf8mb4;
-- 社員
CREATE TABLE emp (
  empid BIGINT UNSIGNED AUTO_INCREMENT NOT NULL PRIMARY KEY,
  depid BIGINT,
  empname TEXT
) ENGINE=InnoDB CHARACTER SET utf8mb4;
```
* データ登録

```sql
-- データ登録
INSERT INTO dep (depname) VALUES  ('市場部'),  ('市場リスク部'),  ('開発部'),  ('会場部');
INSERT INTO emp (depid,empname) VALUES  (1,'山田次郎'),  (1,'山田泰朗'),  (2,'高橋日本'),  
(3,'日本山田'),  (3,'中村次郎'), (4,'高橋次郎');
-- INDEX作成
ALTER TABLE dep ADD FULLTEXT INDEX ngram_idx (depname) WITH PARSER ngram;
ALTER TABLE emp ADD FULLTEXT INDEX ngram_idx (empname) WITH PARSER ngram;
```

* 正常検索SQLを実行すると以下の結果

* ```sql
select emp.empname,dep.depname from emp inner join dep on emp.depid = dep.depid where emp.empname like '%山田%'
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/7774d938-461c-a419-320a-aeb6240c1071.png)

* FULLTEXT検索SQLを実行すると以下の結果１

```sql
select emp.empname,dep.depname from emp inner join dep on emp.depid = dep.depid 
where MATCH (empname) AGAINST ('山田');
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/98ee1ba6-d3eb-5dcf-1e60-686192277b60.png)

* FULLTEXT検索SQLを実行すると以下の結果２

```sql
select emp.empname,dep.depname from emp inner join dep on emp.depid = dep.depid 
where MATCH (empname) AGAINST ('山田') and
MATCH (depname) AGAINST ('市場');
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/4e44fa69-1c5f-7d1e-f1f0-67a2af519a00.png)


## その他

* 一つのテーブルの複数カラムをFULLTEXTとして検索したい場合以下のようにINDEXを作成する

```sql
ALTER TABLE emp ADD FULLTEXT INDEX ngram_idx (depid,empname) WITH PARSER ngram;
```
* その場合の検索方法は

```sql
select emp.empname,dep.depname from emp inner join dep on emp.depid = dep.depid 
where MATCH (depid,empname) AGAINST ('山田');
```

## 終了
php パスワード まとめ

phpでパスワードを暗号化する場合使用すべきなのは、`password_hash()`
- password_hash()
強固な一方通行ハッシュアルゴリズムを用いて、新しいhashを生成する。
crypt()と互換性があってcrypt()が作ったhashはpassword_hash()でも使用可能らしい。
password_hash()はcrypt()のシンプルなラッパーであり、既存のパスワードハッシュと互換性があります。
password_hash() は、ソルトを指定しなかった場合にはランダムなソルトを作りますので
一般に、これがいちばんお手軽で安全なアプローチです。
`および PHP 7.0.0 以降でソルト・オプションは非推奨になりました。`らしい。

ここでは、password_hash()を使用することを推奨する。

- crypt()
文字列のhashを作成
salt(ソルト)オプションを使用しないと安全ではない。結果として、暗号化する際にはpassword_hash()を推奨。

ソルトとは？
暗号理論におけるソルトとは、ハッシュ処理の際に追加するデータのこと。
事前に計算済みのハッシュとそのもと入力の対応表(レインボーテーブル)で出力を解析される可能性を減らすために利用します。

端的にいうと、ちょっとした追加データのことで、追加することによりハッシュをクラックすることが劇的に難しくなると言われています。
なので、crypt()はソルトを使用しないのであれば使用しない！

- sha1

文字列のsha1hashを返す
 多分、sha1型みたいなもん

- md5
文字列のmd5hashを返す
多分sha5型みたいなもん

### password合致確認
暗号化したら、あっているか確認しなくてはならないので、
password_verify()を使用して確認します。
これはパスワードとhashがマッチする場合に、true それ以外にはfalseを返すものです。
つまり、元のpasswordの平文を見せるようにするのではなく、あくまで
正解、不正解を返すものとなっているようです。
https://www.php.net/manual/ja/function.password-verify.php

平文<- 暗号化される前、暗号化されていない状態のデータのこと



## まとめ
まぁ、大人しくpassword_hash()を使って、password_verify()を使って、合致確認をしましょうね。

参考：https://www.php.net/manual/ja/faq.passwords.php
CMakeを使って、GLFW、GLEWをビルドする

- GLFW
    - まずgitからGLFWをクローンする
    
```
git clone https://github.com/glfw/glfw.git
```
そして、CMakeLists.txtのあるフォルダまで移動

```
cd glfw
```

次に、build用ディレクトリを作成し、そこに移動

```
mkdir build
cd build
```

そして、Configure&Generate

```
cmake .. -DCMAKE_INSTALL_PREFIX='C:/lib/GLFW'
```

次に、ビルド

```
cmake --build . --target install
```

- GLEW

    http://glew.sourceforge.net/
    からZIPファイルをダウンロード（Windows版のバイナリもあるので、そちらを使うならCmakeいらず？）

    ZIPファイルを解凍

    解凍したフォルダを開く

    次にbuildディレクトリに移動

```
cd glew-2.1.0
cd build
```

そして、configure&generate

```
cmake ./cmake -DCMAKE_INSTALL_PREFIX='c:/lib/GLEW'
```

ちなみに、-DCMAKE_INSTALL_PREFIXは、ビルドしたライブラリの生成される場所を指定している。（デフォルトでは、ProgramFiles(x86)に生成？）

最後に、ビルド

```
cmake --build . --target install
```
Visual Studio CodeをMySQLツールとして使う

# Visual Studio CodeをMysqlツールとして使う
今回の記事で　VSCodeを利用してMysql接続について説明します。
手順は以下の通りです。

## １、Mysql拡張機能をインストール
* VScodeを開き、拡張機能のアイコンをクリックして`Mysql`と入力する
* 表示した拡張機能`インストール`ボタンをクリックする 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/22aed706-23e6-a292-de2f-ad4774850df9.png)

* インストール完了したらエクスプローラーの一番したにMYSQLのタグが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/6c5c7c81-8ec2-56d5-eaae-fe58ac7a7280.png)

* 横の`+`をクリックする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/021174ef-00ad-7d79-c03e-703b99007099.png)

* host = localhost `Enter`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/486b8f5d-b510-5a31-75a9-573f9b83b05a.png)

* インストールしたMYSQLのuserIDを入力する`Enter`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/1070fa83-f77d-7055-487d-7564c31f036b.png)

* MYSQLのパスワードを入力する　`Enter`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/3bd2bf56-e83f-3614-1128-c7b02b08db4b.png)

* MYSQLのポート番号を入力する(デフォルト3306が入っている)　`Enter`　`Enter`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/a3dce723-8616-aebb-981c-affed15bfd88.png)


## SQL文の実行

* 使用したいDBの上に右クリックして`New Query`をクリックする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/20d91215-f8a1-80ba-5c20-20f01c9ac06f.png)

* クエリを書く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/0c24e940-0a61-345c-d454-516c6e541941.png)

* 画面で右クリックして`Run MySQL Query`をクリックする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/5d9f2c6b-8683-6a00-e337-6742f3a07d58.png)

* 結果が表示します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/28e8f9c1-b817-ee82-0384-55d0dabbbcd3.png)


これでVScodeでMYSQLを使うことがでいます。
【転職活動者対象】SPI試験について


SPIとは、正式名称を「SPI(Synthetic Personality Inventory)総合検査」と言います。

SPIの結果は、面接などの一度しかない機会でわかるようなことではないので、初期選考での絞り込みや面接時の支援、配属決定などの際に利用されます。

##はじめに

　現在転職活動中の私。
　今後控える面接でweb試験を予定してるとの連絡あり。
　対策が必要とのことで、調べてみた。

##試験科目
![スクリーンショット 2021-02-15 21.08.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780845/aedcde20-6973-56e1-7aad-ac1a61f3825f.png)



```
　　１）能力テスト + 性格テスト
　　２）性格テスト
　　　※能力テストだけ実施することは、ほとんどない。
```
能力テスト
このうち①言語②非言語④英語⑤構造把握の4種類は、能力テストと呼ばれ、筆記により試験を行います。

言語能力検査は国語のテスト、非言語能力検査は数学のテストという感じです

性格検査
性格検査は日ごろの考え方や行動についてのいろいろな質問により、受験者がどのような性格をしていて、どのような仕事や組織に適性があるかといった性格や思考を測るために用いられる検査です。

また、SPIには総合的なテストと、短縮・専門版テストの2種類があり、対策本に関しても新卒と転職者向けでは別々の扱いになっています。

これにより受験者の「基本的資質」を、「知的能力」と「性格」に分けて測定します。
SPI試験でチェックされる項目
行動的側面
意欲的側面
情緒的側面
社会関係的側面
基礎能力（言語能力・非言語能力）
人物イメージ
チェックポイント（弱みの特徴）
職務適応性
組織適応性
![スクリーンショット 2021-02-15 21.06.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780845/5dbf07b6-75a2-2bd8-fcbc-808819e73590.png)![スクリーンショット 2021-02-15 21.08.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780845/99fc8416-b8bd-9023-7cc9-d1eb2be48fd7.png)
[ERROR rubocop]  Layout/TrailingEmptyLines: Final newline missing.

`bundle exec rubocop` したら以下のようなエラーが発生しました。
最終改行がありません、というエラーのようです。

```
app/controllers/users_controller.rb:10:4: C: [Correctable] Layout/TrailingEmptyLines: Final newline missing.
```

私の場合 `users_controller.rb` の１０行目にエラーが起きています。
最後の `end` の下に改行が必要なので１行改行を入れてあげると解決します。

```
class UsersController < ApplicationController

...

end  ←ここ
```
Oracle TEXTの全文検索について使ってみた

## 概要
* 業務でoracleTEXTの全文検索機能を利用すると従来の曖昧検索SQLより性能がよい
今後の業務でも使っていきたいし、
皆様にも情報を共有したい目的で記事を書きました。


## 実行環境
* Windows 10
* Oralce 12c
* SQLDeveloper

## Oracle TEXTとは
* oracle TEXTの詳細解説は以下のリンクで確認することができます。
 * [Oracle TEXT詳細解説](https://www.oracle.com/jp/a/tech/docs/technical-resources/oracletext-ver12.pdf)

## Oracle TEXTの書き方
業務では使用しています個人PCにOracleインストールしていないため、その時の思いましただけを書いて、コードの説明を付ける感じで進めます
Oracle TEXTを使うために以下のものを作る必要があります。

* １、プロシージャ作成
* ２、プリファレンス作成
* ３、索引作成	

### プロシージャ作成

```sql:プロシージャ作成
CREATE OR REPLACE PROCEDURE PROC_INDEX_FOR_MYWORD (p_rowid IN ROWID, p_clob IN OUT NOCOPY CLOB) IS
BEGIN
    FOR r IN (
        SELECT
            emp.ename,
            dep.dname
        FROM
            emp
        INNER JOIN dep ON
            emp.dep_Cd = dep.dep_Cd
        WHERE
            emp.ROWID = p_rowid
    )
    LOOP
        DBMS_LOB.writeappend (p_clob, LENGTH (r.ename), r.ename);
        DBMS_LOB.writeappend (p_clob, 1, ' '); 
        DBMS_LOB.writeappend (p_clob, LENGTH (r.dname), r.dname);
        DBMS_LOB.writeappend (p_clob, 1, ' '); 
    END LOOP;
END;
```
ここで名前は`PROC_INDEX_FOR_MYWORD`のプロシージャを作りました、全文検索対象の項目はempテーブルのunameとdepテーブルのdnameです、
この二つのテーブルを結合して、検索されるキーワードがどっちにあればヒットされる感じです。次にプリファレンスを作ります。

### プリファレンス作成

```sql:プリファレンス作成
BEGIN
  CTX_DDL.CREATE_PREFERENCE('JVL1_LEXER','JAPANESE_VGRAM_LEXER');
  CTX_DDL.CREATE_PREFERENCE('MY_DATASTORE', 'user_datastore');
  CTX_DDL.SET_ATTRIBUTE ('MY_DATASTORE', 'procedure', 'PROC_INDEX_FOR_MYWORD');
  CTX_DDL.SET_ATTRIBUTE ('MY_DATASTORE', 'output_type', 'CLOB');
END;
```

* 説明するとここではプリファレンス作成し、データストアの各設定を行っている
 * JAPANESE_VGRAM_LEXER：日本語用レクサー（解析エンジン）
 * user_datastore：データストア
 * PROC_INDEX_FOR_MYWORD：プロシージャ名
 * CLOB:DBMS_LOBパッケージ、(BLOB、CLOB、およびNCLOBを操作するためのサブプログラムを提供)

### インデックスの作成

```sql:インデックスの作成
CREATE INDEX [インデックス名] ON [テーブル名] ([カラム名])
  INDEXTYPE IS CTXSYS.CONTEXT
  PARAMETERS ('DATASTORE MY_DATASTORE　LEXER JVL1_LEXER SYNC (ON COMMIT)');
```

* 特定のテーブルの項目にインデックスを作り、前回作った'MY_DATASTORE'データストアに紐づける
* ここでは全文検索対象にしたいテーブルの項目を複数設定することができる、例えば

```sql:
CREATE INDEX emp_index ON emp (ename)
  INDEXTYPE IS CTXSYS.CONTEXT
  PARAMETERS ('DATASTORE MY_DATASTORE　LEXER JVL1_LEXER SYNC (ON COMMIT)');
CREATE INDEX dep_index ON dep (dname)
  INDEXTYPE IS CTXSYS.CONTEXT
  PARAMETERS ('DATASTORE MY_DATASTORE　LEXER JVL1_LEXER SYNC (ON COMMIT)');
```
### 検索SQLの作成
```sql:
--wordという文字を検索している
-- ename,dnameのどっちかにword文字があればヒットされる
SELECT
   emp.ename,
   dep.dname
FROM
   emp
INNER JOIN dep ON
  　emp.dep_Cd = dep.dep_Cd
WHERE CONTAINS (ename, 'word') > 0
```

### その他SQL
```sql:
--プロシージャの削除例
DROP PROCEDURE ORACLE_TEXT_CREATOR; 
--プリファレンスの削除
begin
ctx_ddl.drop_preference('jvl');
end;
--indexの削除
drop index PROMO_PACK_idx;
```


## 終了
scssとcssの違い

.scssはSass（サス）というCSSを効率的に記述できるメタ言語（CSSプリプロセッサ）のファイルであることを表す拡張子です。
Sassにはsass記法とscss記法という2種類の記法があり、このうちscss記法で記述されたファイルは
拡張子を.scssとする決まりとなっています。

https://teratail.com/questions/188465
viエディタの使い方

#コマンドチートシート
自分がさっと見やすいようにまとめました。
##終了

| コマンド | 結果　|
| ---- | ---- |
| :q | セーブしないで終了 |
| :q! | 変更した行もセーブしないで終了 |
| :wq | セーブして終了 |
| :w | セーブして終了しない |

##編集モードへ移行

| コマンド | 結果　|
| ---- | ---- |
| i | 現在のカーソルの位置から挿入 |
| R | 現在のカーソルの位置から置換 |
| A | 現在の行の末尾に追加 |
| O | 現在の行の前に行を挿入する |
| o | 現在の行の次に行を挿入する |

##カーソル移動

| コマンド | 結果　|
| ---- | ---- |
| h　(←) | 左 |
| j　(↓) | 下 |
| k　(↑) | 上 |
| l　(→) | 右 |
| O | 行頭へ |
| $ | 行末へ |
| [Enter] | 次の行の先頭 |
| w | 次の単語へ |
| b | 前の単語へ |
| ctrl + f | 次の画面へ |
| ctrl + b | 前の画面へ |
| 1G | 文頭へ |
| G | 文末へ |
| nnG | nn行目へ |

##変更キー

| コマンド | 結果　|
| ---- | ---- |
| x | １文字削除 |
| dd | １行削除 |
| cw | １語変更 |
| c$ | カーソル位置から行末あで変更 |
| dw | １語削除 |
| d$ | カーソル位置から行末まで削除 |

##検索

| コマンド | 結果　|
| ---- | ---- |
| /正規表現 | 前方検索 |
| ?正規表現 | 後方検索 |
| n | 次の候補 |
| N | 前の候補 |

##カット / コピペ / ペースト
| コマンド | 結果　|
| ---- | ---- |
| dd | １行カット |
| yy | １行コピー |
| p | ペースト |

##その他
| コマンド | 結果　|
| ---- | ---- |
| . | 直前の変更操作の繰り返し |
| u | 直前の変更操作の繰り返し<br>(何度でも戻れる) |
| :r ... | ファイル　... の内容を次の行に挿入 |
| :r! ... | OSの ... コマンドを実行して<br>その結果を次の行に挿入 |
| :h | 日本語マニュアルを表示する |

#参考にさせて頂いたサイト
[ｖｉエディタの使い方](https://prev.net-newbie.com/linux/commands/vi.html)
[Ruby][LINE] ごみ出し日に LINE で通知する

# 概要

ごみ出しって忘れちゃうことありますよね :sweat_drops: 捨てられる曜日が限られた燃えないごみやペットボトルの日は特に忘れがちです。そして Google カレンダーの通知だと気づけなくて 😇

そこで cron と Ruby を使用してごみ出し日に LINE ([LINE Notify](https://notify-bot.line.me/ja/)) で通知するようにしました。僕の場合は cron は Raspberry Pi 3 で動かしています。

# 方法

## バージョン情報

- Ruby 3.0.0
- Bundler 2.2.11
- Active Support 6.1.3

## コード

Gem は日付に関する処理のために Active Support のみ使用します。

```rb:Gemfile
source 'https://rubygems.org'

gem 'activesupport'
```

LINE 通知については過去に書いた [自分の LINE に Ruby で通知を送る](https://qiita.com/QUANON/items/94f8835e923c76188f66) という記事を参考にしました。この記事を参考に LINE Notify のトークンを取得してください。

```main.rb
require 'active_support'
require 'active_support/core_ext'
require 'net/http'
require 'uri'

# LINE に通知するためのサービスクラス。
class NotifyLINE
  TOKEN = 'ここに LINE Notify のトークンを入力する。'
  URL = 'https://notify-api.line.me/api/notify'

  attr_reader :message

  def self.call(message)
    new(message).call
  end

  def initialize(message)
    @message = message
  end

  def call
    Net::HTTP.start(uri.hostname, uri.port, use_ssl: true) do |https|
      https.request(request)
    end
  end

  private

  def request
    request = Net::HTTP::Post.new(uri)
    request['Authorization'] = "Bearer #{TOKEN}"
    request.set_form_data(message: message)
    request
  end

  def uri
    URI.parse(URL)
  end
end

# ゴミ捨て日を表すクラス。
class GarbageDisposalDay
  attr_reader :wday, :nth, :type

  WDAYS = %w(日 月 火 水 木 金 土).freeze

  def initialize(wday:, nth:, type:)
    @wday = WDAYS.index(wday)
    @nth = nth
    @type = type
  end

  def to_s
    "第 #{nth} #{WDAYS[wday]}曜日「#{type}」"
  end

  def apply?(date)
    wday == date.wday && nth == nth_day_of_week(date)
  end

  private

  # 日付がその月で何回目の曜日かどうか。
  def nth_day_of_week(date)
    (date.beginning_of_month..date).count { _1.wday == date.wday }
  end
end

# 住んでいる地域のごみ出し日を定義する。
GARBAGE_DISPOSAL_DAYS = [
  # 毎週月・木は燃えるゴミの日。
  *%w(月 木).product([*1..5]).map { |wday, nth| GarbageDisposalDay.new(wday: wday, nth: nth, type: '燃えるゴミ') },
  GarbageDisposalDay.new(wday: '日', nth: 2, type: '燃えないごみ'),
  GarbageDisposalDay.new(wday: '日', nth: 4, type: '空きびん・ペットボトル'),
  GarbageDisposalDay.new(wday: '火', nth: 2, type: '古紙・ダンボール (翌朝回収)'),
  GarbageDisposalDay.new(wday: '火', nth: 4, type: '古紙・ダンボール (翌朝回収)')
]

today = Date.today
garbage_disposal_day = GARBAGE_DISPOSAL_DAYS.find { _1.apply?(today) }

if garbage_disposal_day
  NotifyLINE.call("今日は#{garbage_disposal_day}の日です。忘れずに捨てましょう！")
end
```

上記の Ruby ファイルを cron で定期実行します。通知してほしい時刻を指定してください。

```sh:crontab
0 19 * * * /bin/bash -c 'export PATH="$HOME/.rbenv/bin:$PATH"; eval "$(rbenv init -)"; cd $HOME/workspace/dustdas; bundle exec ruby main.rb'
```
これで通知が届きました 💖

<img width=400 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6697/7d079d1f-fa95-358a-6b58-8fd2340a3249.jpeg">

なお、僕の住んでいる地域は深夜にごみが回収されるのですが、朝に回収される地域の場合は

- `Date.today` と `Date.tomorrow` に変更する。
- 通知のメッセージの `今日` を `明日` に変更する。

と変更すればよいと思います。
【DXライブラリ】キーボードの入力状態を調べる【ちょい改】

こんにちは

以前[キーボードの入力状態を調べる](https://qiita.com/legohasiri/items/ff258bb3cb4522b4aa66)という記事でキー入力をC++/DXライブラリでクラス化する記事を書きました。

そして先日の[アドベントカレンダー](https://qiita.com/advent-calendar/2020/dxlib)記事の[dxlib　小技集（役に立つかは保証できません）](https://qiita.com/takuro7021/items/3922e584ca0308be4da2)(@takuro7021)内で、次のような言及がありました。

>けどここの方法だと使うキーが増えるたびにオブジェクトを作る必要があります。しかもよく読んでみるとわかるんですけど、キーの数だけupdateを実行する必要がありますし、僕の勘違いでなければGetHitKeyStateAllは本来1フレーム（ゲームのメインループ一回）に一回呼べばいいのにこれじゃキーの数だけ呼ばれてしまいます。

およ？と思い改めて自分のコードを読み直しました。

```c++
virtual void Update() {
        char isKey[256]; // 現在のキーの入力状態を格納する
        int tmpKey;
        if (GetHitKeyStateAll(isKey) == -1) {
            //System::MessageError(ERR_INPUT_KEY);
        }// 全てのキーの入力状態を得る
        tmpKey = mPressingCount;
        if (isKey[mCode] != 0) { // i番のキーコードに対応するキーが押されていたら
            mPressingCount++;     // 加算
            KeyStatus = mPressingCount > 1 ? DeviceStatus::Press : DeviceStatus::Down;
        }
        else {              // 押されていなければ
            if (tmpKey > 0) { //1フレーム前まで押されていたら
                KeyStatus = DeviceStatus::Up;
            }
            else {
                KeyStatus = DeviceStatus::Release;
            }
            mPressingCount = 0;   // 0にする
        }
    }
```
これですね

元記事読んでもらえるとわかると思いますが、キー一つ一つのオブジェクトがこのUpdate関数を持ち、毎フレーム更新しています。つまり、`GetHitKeyStateAll(isKey)`は1フレームにつき100回以上呼び出されています。じっさいこの関数は1フレーム一回呼べばいいはずなのです。(そういう指摘コメントは記事のほうに書いてくれてもいいのよ！)

##### 個人的なこと
個人的に思ったことを書いているだけですので読む必要はありません。

記事のちょっとしたのほうに別方法が記載された参考リンクがあります。こちらの方法もいいと思います。ですが私はいまC#メインとなり、`KEY_INPUT_A`のような定数も`DX.KEY_INPUT_A`と変わり`DX.`をいちいち打つのもめんどい。というかC#なんだからクラス化したい。というかこれだと自分が必要な情報がすべて集まらないんですよね。
また、Siv3DというC++ライブラリがあるのですが、こちらはなかなかきれいにクラスにまとまっていてかんたんなコードで書けるというメリットもあり気に入っています。でもDXライブラリのほうが自分でやっている感じがして楽しい。となるとDXライブラリでSiv3Dのようなコードに似せればよい。となりました。

以上を踏まえてこの前のをそのままC#に流用するとともに改良を加えることにしました。

# 本題
構造は単純で、引数で渡せば済む話です。いまC#メインに切り替えたのでC++のコードはないのですが、少し変えれば動くはずです。

```c#
void Update(byte[] key)
{
	 // 現在のキーの入力状態を格納する
	var tmpKey = Count;

	if (key[Code] != 0)
	{ // i番のキーコードに対応するキーが押されていたら
		Count++;     // 加算
		State = Count > 1 ? DeviceState.Press : DeviceState.Down;
	}
	else
	{// 押されていなければ
		if (tmpKey > 0)
		{ //1フレーム前まで押されていたら
			State = DeviceState.Up;
		}
		else
		{
			State = DeviceState.Release;
		}
		Count = 0;   // 0にする
	}
}
```

少し変数名等は変わっていますが基本同じ。メインループの頭らへんで

```C#
byte[] isKey = new byte[256];
if (DX.GetHitKeyStateAll(isKey) != -1)
{
	Key1.Update(isKey);
	Key2.Update(isKey);
//---------略------------
}
```
とでも呼べば、`GetHitKeyStateAll`関数呼び出しは1フレーム1回で済みました。
これで現状自分が認知している課題は解決しました。マウスも同じようにやっています。

何かあったらコメントへ

(記事適当でごめんなさい...)
siwft辞書「tab barを実装する」

#お断り
この記事は自分専用メモなのですごい初歩的な事しか書いていませんがご了承下さい。
確認環境
Interface:Storyboard
Life Cycle:UIKit App Delegate
Language:Swift
◉Use Core Data
__◉Host in CloudKit
◉Include Tests

#この記事で出来る様になる事
LINEに有る様なtab Barを使える様になる

#UIの実装
まず現在あるView Controllerを削除して下さい。そうしたらTab Bar Controllerを配置します。
![スクリーンショット 2021-02-23 20.35.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581846/99e9a38f-e2c1-a5e8-4dc1-047a80eab1cf.png)
この様になったら成功です。次に出ているエラーを解決していきます。エラーをdeepl翻訳にぶっ込んで見るとエントリポイントが無いと怒られている事が分かります。それではgoogleでエントリポイントを追加する方法を調べて見ましょう。「xcode エントリポイント」と検索して見るとこのような[サイト](https://qiita.com/ShinokiRyosei/items/bf18aba49c8a2d9d8d55)が出来てきました。詳しくはそちらのサイトを見て欲しいのですが、is Initial ViewControllerにチェックを入れるとエラーが無くなりました。![スクリーンショット 2021-02-23 20.45.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581846/0b6a98c0-247a-39c5-6e07-15f55662d5a6.png)ひとまずこれでtab barの実装は完成です。最後にtab barのアイテムを追加して見ましょう。新規のView Controllerを配置します。次にTab Bar Controllerから先ほど配置したViewControllerに向かってcontrolを押しながらドラックします。そうすると色々選択肢が出てくるのでview controllersを選択してくださいこれで追加が出来ました。これで実装が完成しました。
![スクリーンショット 2021-02-23 21.02.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581846/395266d6-63cb-ce2b-4779-be27c3d7365b.png)
【随時更新】学習記録

##学習記録

### TensorFlow関連
|  日付  |  タイトル  | 学習時間 | 感想 |
| ---- | ---- | ---- | ---- |
| 2021/02/23 |  Tensorflowの環境構築 | 3h | Pythonバージョンを指定した仮想環境に手こずり一時中断．Dockerで環境構築する方針に変更． | 
| day |  タイトル | *h |  hoge  | 
| day |  タイトル | *h |  hoge  | 
| day |  タイトル | *h |  hoge  | 

### Docker関連
|  日付  |  タイトル  | 学習時間 | 感想 |
| ---- | ---- | ---- | ---- |
| day |  タイトル | *h |  hoge  | 
| day |  タイトル | *h |  hoge  | 
| day |  タイトル | *h |  hoge  | 

## 学習用リンク
コメント書く
[Vue]現在のパスを取得する

#概要
現在のパスごとに、変数を入れ替えたり処理を変更したかったので、現在のパスを取得方法を調べました。
忘れないようにメモしたいと思います。

#実装

```.js
const path = this.$route.path
```

#自分メモ
現在のパスによって変数を格納したい場合

```.js
  data() {
    return {
      isActive: '',
    }
  },
  mounted() {
    const path = this.$route.path
    console.log(this.$route.path)
    if (path === '/'){
      this.isActive = '1'
    } else if (path === '/trend'){
      this.isActive = '2'
    } else if (path === '/item'){
      this.isActive ='3'
    }
  },

```

#参考文献
[Vue.js】 現在のパス(URL)を取得する 【Vue-Router】](https://www.malanka.tech/entry/2020/01/06/082533)
ネットワークスペシャリストお勉強ノート【セキュリティの基礎技術編】

【セキュリティの基礎技術】
★FW
フィルタリング機能
DMZ
パケットフィルタリング方式
サーキットゲートウェイ方式
アプリケーションゲートウェイ方式

★UTM
United Threat Management
セキュリティの統合管理製品
FW機能
VPN機能
侵入防止機能
バッファオーバーフロー攻撃遮断機能

★HA機能
高可用性　High Availability
FWの冗長化の仕組み
主系と副系
ActiveとStandby

★認証LAN
IEEE802.1X認証：IETF(Internet Engineering Task Force)が規定したEAP(Extensible Authentication Protocol)という認証や暗号鍵配送用のフレームワークを利用している
EAP-MD5：EAPの枠組みで動作するCHAP
PEAP：サーバ証明書を使い、クライアント側はIDとパスワードを利用する
EAP-TLS：SSLの後継であるTLSによって認証を行う
サプリカント：クライアントPCにインストール
オーセンティケータ：認証する者
認証サーバ：RADIUS

★IDSとIPS
Intrusion Detection System：侵入検知システム
ネットワーク型IDS
ホスト型IDS

Intrusion Prevention System
データの中身もチェックできる

シグネチャ型：既知の攻撃パターンとマッチング
アノマリ型：異常なパケット、トラフィックを分析

フォールスポジティブ
フォールスネガティブ

★IPsec
VPN：Visual Private Network
インターネットVPNを実現するときの技術がIPsec
暗号化だけでなく認証、改ざん検知なども含めた総合的なセキュリティを確保できる
利用者の利便性が高い

ESP：Encapsulating Security Payload　暗号化と認証
AH：Authentication Header　認証のみ　あんまり利用されない

IKE：Internet Key Exchange 鍵交換のプロトコル

NATトラバーサル：ESPパケットをUDPでカプセル化することによって、NAT機器によるIPアドレスとポート番号の変換を可能にしている

VPNパススルー：NATルータがIPsecやPPTPの通信を識別して、適切な聞きにパケットを転送する方式

★PKI
Public Key Infrastructure：公開鍵基盤
公開鍵を利用したセキュリティ基盤
ディジタル証明書：公開鍵を証明するもの
ディジタル署名：改ざん防止、なりすまし防止、否認防止、暗号化
認証局（CA）
CRL：Certificate Revocation List　失効リスト

★SSL
Secure Socket Layer
ネットスケープコミュニケーションズ社が開発したデータを暗号化するプロトコル
https
TSL：機能追加したもの
SSLハンドシェイクプロトコルとSSLレコードプロトコル
SSL-VPN

★標的型攻撃
CentOS7　キーボード配列をUSからJIS配列に変更する方法(初学者向け)

##はじめに

Linuxの学習を始めたのですが、キーボードの入力がおかしいことに気づきました。
おそらくCentOS7をインストールした時にUS配列に設定してしまったと思われます。
(僕のMacbookのキーボードはJIS配列です。)

初心者のためUS配列からJIS配列に設定し直すのにとても手こずりました。
その変更の仕方をメモがわりに残しておきます。


##変更の方法

1.デスクトップ左上の「アプリケーション」をクリックし「システムツール」を選択。
　その中の「設定」をクリック。
![スクリーンショット 2021-02-18 23.28.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119759/de5368f6-6f80-4e42-67c7-679b4f9330cc.png)

２.「地域と言語」を選択し、入力ソースの項目にある「日本語(かな漢字)」を選択。
　右下赤枠内の設定ボタンをクリック。
　(事前に入力ソースとして「日本語(かな漢字)」を選択済の場合。設定していない場合は先に「日本語(かな漢字)」を入力ソースとして設定する必要があります。)!
![スクリーンショット 2021-02-23 20.33.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119759/f9c867cf-cc63-ab84-cce6-56383178f8bd.png)

3.「動作」という項目内「独自のキーマップを使う」のチェックボックスにチェックを入れる。
　プルダウンメニューから「日本語」を選択。
![スクリーンショット 2021-02-18 23.30.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119759/02f6da19-c050-ad43-fac7-242a087deb65.png)

　以上で、US配列からJIS配列に設定を変更できます。

##簡単すぎて記事として残す意味ある？

と思われた方もいらっしゃると思いますが、**僕がこの設定方法に辿りつくまで１時間以上かかってしまいました。**

なぜなら、


https://hosii.net/?p=515

https://qiita.com/sue71/items/64c513ae181e9f7aa8f4

**↑以上のような方法を試しても全く変更される兆しが見えなかったからです...。**

グーグル検索で出てくる方法が大体こんな感じの方法で、何度同じようにコマンドを入力しても変更できませんでした。
紹介した方法を自力で見つけた時拍子抜けしてしまったため、このメモを残すに至りました....。

CentOS7自体かなり使い古されてるOSだと思うので、この記事の有益性はあまりないと思いますが、誰かの役に立てればなぁと思います。