OmniAICreator/Qiita-1.07M huggingface dataset:
[Rails]ActiveStorageで画像投稿機能を作成しよう！

#前提条件

railsに関しての基礎的な知識があることのみです


#事前準備

今回の画像投稿機能を作成するにあたり以下のものを準備します。
まずはそのツールに関しての説明をします
・ActiveStorage
・ImageMagick
・MiniMagick
・ImageProcessing

####ActiveStorageとは

ActiveStorageとは「gem」のことです
インストールすることで、画像やファイルのアップロードを簡単にするメソッドを使用できたり、
画像を保存するテーブルを簡単に作成できるようにします。

####ImageMagic

ImageMagicはgemではなく、ソフトウェアです。
画像の作成、サイズ変更、保存形式の変更を行います。
Homebrewからインストールします。

ちなみに、こいつ単体ではRails内で使用できません。
使用するためにはMinMagicが必要です。

####MiniMagick

こいつは、ImageMagickがRails内で使用できるようにするためのgemです。
ただ、こいつも完璧ではないんですよね、、、↓

####ImageProcessing

MiniMagickでは提供できない画像サイズを調整する機能を持ちます

##実際にインストールをして行こう

ここからはただただ無心で進めましょう

①ImageMagickのインストール

```
bundle install imagemagick
```

②MinMagickとImageProcessingのインストール

```:Gemfile
gem 'mini_magick'
gem 'image_processing', '~> 1.2'
```
もちろん、記載するだけでなく
ターミナルでこれを打たないと意味ないですよ！！

```
bundle install
```

③ActiveStorageのインストール
※以下は一旦rails sでサーバは立ち上げた後に行ってください。

```
% rails active_storage:install
% rails db:migrate
```

DBに、「active_storage_attachments」と「active_storage_bolbs」が作成されていれば準備完了です
![スクリーンショット 2021-04-02 23.54.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1128031/b59a368f-0715-0ed4-50d6-ec10610a6b5f.png)
（SequelProというツールでDBはみれますよ！！！調べてみてください）

#実装していこう

ようやく準備が終了！！
ここからが本番。

まずは今回、Messageモデルに対して画像を保存させたいという前提で話を進めます。


MessagesテーブルとActiveStorageテーブルで管理された画像ファイルを1対1でアソシエーションします。（つまり1メッセージにつき1枚だけ添付可能とする）

```models/message.rb
class Message < ApplicationRecord
  has_one_attached :image #ここはファイル名記載、なんでもOK！
end
```

:imageはファイル名なので:photoでもいいし、:pictureでもOKです

これでテーブル同士はつながりました。

ただし、画像を保持するカラムはMessagesテーブルにはないので（だからこそ、上記でアソシエーションした）、imageという名前でアクセスできるようになった画像ファイルの保存を許可する実装を行うために、ストロングパラメータにmergeしてあげましょう。

```messages_controller.rb
 private
  def message_params
    params.require(:message).permit(:content, :image).merge(user_id: current_user.id)
  end
```

これでよし！！！

#あとは画像を表示させるだけ

あとは、viewファイルで表示すれば完成です！！


たとえば、こんな感じです

```image.html.erb
 <%= image_tag message.image, class: 'image_message' %>
```

ちなみ、このままでは画像なしの場合にエラーが発生しますので
attached?メソッドを使用するといいです

```image.html.erb
<%= image_tag message.image, class: 'image_<%= image_tag message.image, class: 'message-image' if message.image.attached? %' if message.image.attached? %>
```

さて、ここまでで実際に投稿機能を実装してテスト投稿してみた方は思ったでしょう、、、、
<font color="Red">サイズがバラバラじゃねーか！！！と、、、、.</font>


そんなときは、variantメソッドで高さと幅を決めましょう！

```	
モデル.ファイル名.variant(resize: '幅x高さ')
```

こんな感じで使ってみましょう↓


```image.html.erb
<%= image_tag message.image.variant(resize: '500x500'), class: 'message-image' if message.image.attached? %>
```

#終わりに


初めて使う方は難しく感じるかもしれませんが、触っているうちに慣れてきて便利さに気づくかと思いますので是非当記事を参考にしながら練習してみてください。
【SikuliX】スマホゲームの自動化（スクリプト）

#はじめに
[前回](https://qiita.com/kazu_kr/items/3ad2c46209a2ed28a7be)の記事では、スマホゲームを自動化するための環境構築を行いました。
今回はSikuliXに記述するサンプルコードを記載していきます。

#注意事項
スマホゲームによっては、利用規約でマクロ等を用いたプレイ行為が禁止されています。
動作させる場合はスマホゲームの利用規約を確認し、自己責任で使用してください。

#サンプルコード
```
#########################################
#  検索設定
#########################################
IMGS = [検索したい画像を設定]

#########################################
#  動作設定
#########################################

# 最小一致閾値
Settings.MinSimilarity = 0.85

# マウス移動のディレイ：0 = アニメーションなし
Settings.MoveMouseDelay = 0.3

# 検索範囲対象のウインドウを探してRegion(検索範囲)に設定
app = App.focus("BlueStacks")
reg = Region(App.focusedWindow())

#########################################
#  処理
#########################################
# ループ
while True:

	# 検索
	ms = reg.findAnyList(IMGS)
	
	# 結果msはIMGSの順で見つかったものが格納される
	for m in ms:

		# タップ
		click(m)

		# １秒待機
		sleep(1)

```

#解説
サンプルコード上にコメントを残していますが、簡単に解説します。
今回はBlueStacksを使用した例です。

|サンプルコード|説明|
|:--|:--|
|IMGS = [検索したい画像を設定]|カッコ内に検索したい画像を設定します。<br>カンマ区切りで複数設定することも可能です。<br>スクリーンショット等で画像を挿入してください。|
|Settings.MinSimilarity = 0.85|この値が高いほど、画像一致率を求められます。<br>画像をうまく認識できないときは値を調整してください。|
|Settings.MoveMouseDelay = 0.3|マウスの移動を開始するまでの時間を遅らせるときに使用します。<br>※基本的に値を変更する必要はありません。|
|app = App.focus("BlueStacks")<br>reg = Region(App.focusedWindow())|検索範囲対象を指定しています。<br>この記述がない場合は画面全体を検索するため、BlueStacksのウィンドウのみ指定しています。|
|ms = reg.findAnyList(IMGS)|IMGSの中から画面に表示されている画像を検索し、一致した画像をmsに代入します。|
|click(m)|見つかった画像をタップします。|

#実行するとき
SikuliX右上の実行ボタンで実行できます。

#停止するとき
alt＋shift＋cで停止できます。

＜参考＞
[Sikuliの永久ループを止める方法](https://qiita.com/imtnd/items/fb2abaeed2d738599815)

#まとめ
今回は周回操作などの単純作業を自動化するSikuliXスクリプトを紹介しました。
実際には以下の操作を繰り返しているだけです。

* クリックする箇所（画像）を探す
* クリックする箇所が見つかればタップする

ただし、スクリプト自体は単純であっても無駄があれば処理速度は遅くなります。
検索対象の画像の並びを調整する等して、無駄なく動作するよう設定をしてみてください。
WebAPIのログを日付でローテーションする

echoでログを出力するには、公式ドキュメントでは```middleware.Logger()```と記載されている。
[middleware#Logger](https://echo.labstack.com/middleware/logger/)

```main.go

package main

import (
    "net/http"
    "github.com/labstack/echo/v4"
    "github.com/labstack/echo/v4/middleware"
)

func main() {
    // Echo instance
    e := echo.New()

    // Middleware
    e.Use(middleware.Logger())
    e.Use(middleware.Recover())

    // Routes
    e.GET("/", hello)

    // Start server
    e.Logger.Fatal(e.Start(":1323"))
}

// Handler
func hello(c echo.Context) error {
    return c.String(http.StatusOK, "Hello, World!")
}
```

middleware.Logger()でのデフォルトの出力先はos.Stdoutなのでコンソールに出力される。

```hoge.go
DefaultLoggerConfig = LoggerConfig{
  Skipper: DefaultSkipper,
  Format: `{"time":"${time_rfc3339_nano}","id":"${id}","remote_ip":"${remote_ip}","host":"${host}",` +
    `"method":"${method}","uri":"${uri}","status":${status},"error":"${error}","latency":${latency},` +
    `"latency_human":"${latency_human}","bytes_in":${bytes_in},` +
    `"bytes_out":${bytes_out}}` + "\n",
  Output: os.Stdout
}
```

ファイルに出力するにはos.OpenFile()の戻り値を```Output```に指定する。
```os.OpenFile()```の引数は以下を指定する。

1. ファイル名･･･日付を含むファイル名を指定する。
1. 操作方法･･･```os.O_RDWR|os.O_CREATE```（読み書き可能かつ、存在しない場合は新規作成する）
1. パーミッション･･･0664

```main.go

package main

import (
    "net/http"
    "github.com/labstack/echo/v4"
    "github.com/labstack/echo/v4/middleware"
)

func main() {
    // Echo instance
    e := echo.New()

    // Middleware
    today := time.Now()
    logfilename := "/log/app-" + today.Format("20060102") + ".log"

    log, err := os.OpenFile(logfilename, os.O_RDWR|os.O_CREATE, 0664)
    if err != nil {
    	return e
    }
    e.Use(middleware.LoggerWithConfig(middleware.LoggerConfig{
    	Output: log,
    }))
    e.Use(middleware.Recover())

    // Routes
    e.GET("/", hello)

    // Start server
    e.Logger.Fatal(e.Start(":1323"))
}

// Handler
func hello(c echo.Context) error {
    return c.String(http.StatusOK, "Hello, World!")
}
```

簡易的だがechoの起動日単位でログファイルをローテションできる。
サービスを止めないでログをローテーションする方法を次は考えておきたい。
長文要約生成APIを使って、Ado「うっせぇわ」を要約してみた

# はじめに
　[「朝日新聞社、長文を要約するAPIを無償公開　500字→200字に圧縮、重要事項の自動抽出も」] (https://www.itmedia.co.jp/news/articles/2104/02/news135.html) をみて歌の歌詞を要約したらどうなるんだろうと思いやってみました。
　やった歌詞は[Ado うっせぇわ 歌詞 - 歌ネット](https://www.uta-net.com/song/292534/)です。

# 結論
全703文字（改行含む）を要約するとこんな感じ。
※ 要約方法は「指定した長さごとに生成型要約（200文字ごと）」

> - 気づいたら大人になっていたナイフの様な思考回路、持ち合わせる訳もなく、ただ混乱するエイデイ、最新の流行は当然のルールです。
> - 「うっせぇ」と言わないで、頭の出来が違うので問題はナシ、つっても私模範人間、殴ったりするのはノーセンキュー、だったら言葉の銃口を撃てば、マジヤバない?
> - 「うっせぇ」は、絶対現代の代弁者は私やろがい、もう見飽きたわ、二番煎じ言い換えのパロディ、うっていいぜ問題はナシ。

なお、要約方法を「指定した長さごとに生成型要約（1000文字ごと）」にすると

> - 気づいたら大人になっていたナイフの様な思考回路、持ち合わせる訳もなく、でも遊び足りない何か足ってない、困っちまうこれは誰かのせい?

歌詞の中には「うっせぇわ」があるので印象的ですが、一文にしたときは「うっせぇわ」がなくなるのは、なかなか面白い発見しました。

# 参考文献
- [朝日新聞社、長文を要約するAPIを無償公開　500字→200字に圧縮、重要事項の自動抽出も] (https://www.itmedia.co.jp/news/articles/2104/02/news135.html)
- [長文要約生成API：朝日新聞社メディア研究開発センター](https://cl.asahi.com/api_data/longsum.html)
- [Ado うっせぇわ 歌詞 - 歌ネット](https://www.uta-net.com/song/292534/)
【Python】関数を変数に格納して扱う方法（備忘録）

Pythonをまた好きになったのでメモ。

# はじめに
2017年にC#7から**ローカル関数**という機能が出てきてC#エンジニアを喜ばせました。
関数を変数化することで、ラムダ式では難しい再帰呼び出しが出来たり、引数の既定値を与えたりが出来ます。
C#すげー！イケてるー！と思っていたらPythonでも普通に「関数を変数に格納して扱う」ということが出来るとわかりました。

Pythonエンジニアには当たり前すぎる話かもしれませんが簡単に説明します。


# 事前準備

まずは2つの関数を準備します。
`add_one_hundred()はプラス100をする関数`
`add_two_hundred()はプラス200をする関数`
2つの関数は共に**数値型の引数を受け取って、特定の数値を加算して返却する**というものです。


```python
def add_one_hundred(value):
    return value + 100

def add_two_hundred(value):
    return value + 200

print(add_one_hundred(1))
print(add_two_hundred(1))
```

同じ引数「1」を与えて以下のような結果となります。

```
101
201
```

# 関数を引数として受け取れる関数を準備

次に以下の関数を用意します。
`func_add_value()は引数「func」を数値1を引数に実行し、引数「value」を加算する関数`
ここでポイントになるのが、**関数の引数を関数として使っている**ことです。

```python
def func_add_value(func, value):
    return func(1) + value
```

# 関数を変数に格納して扱う
では実際に使用してみます。

```python
def add_one_hundred(value):
    return value + 100

def add_two_hundred(value):
    return value + 200

def func_add_value(func, value):
    return func(1) + value

func1 = add_one_hundred
func2 = add_two_hundred
print(func_add_value(func1, 1000))
print(func_add_value(func2, 1000))
```

2つの関数をそれぞれ変数**func1**と**func2**に格納しました。
そして、関数**func_add_value()**に第一引数としてそれぞれの**関数を格納した変数**、第二引数として同一の数値「1000」を渡しています。
すると出力結果は以下のようになります。
**add_one_hundred()**と**add_two_hundred()**の関数の結果の違いで最終的な出力結果が変わっています。

```
1101
1201
```

もちろん変数に格納せずに直接引数に渡すことも出来ます。

```python
def add_one_hundred(value):
    return value + 100

def add_two_hundred(value):
    return value + 200

def func_add_value(func, value):
    return func(1) + value

print(func_add_value(add_one_hundred, 1000))
print(func_add_value(add_two_hundred, 1000))
```
```
1101
1201
```

# こんなことも出来る
今回定義した関数**func_add_value()**は**「引数も戻り値も数値」**という条件の関数であれば内部の処理が違っても受け付けます。
なので以下のような関数内の処理がバラバラでも正常に処理が行えます。

```python
def add_one_hundred(value):
    return value + 100

def get_pi(value):
    return 3.14159265358979323846264338327950288

def sum_value(value):
    if value < 1:
        return value
    return value + sum_value(value-1)

def func_add_value(func, value):
    return func(1) + value

print(func_add_value(add_one_hundred, 1000))
print(func_add_value(get_pi, 1000))
print(func_add_value(sum_value, 1000))
print(func_add_value(abs, 1000))
```

```
1101
1003.1415926535898
1001
1001
```

※急に出てきて何それと思うかもしれませんが`print(func_add_value(abs, 1000))`で引数として渡している関数**「abs()」**は数値の絶対値を返却するPythonの組み込み関数です。

別クラスの関数にも同じように関数を渡すことが出来るので、使い方は無限大です。
↓の記事で実際に別クラスの関数に**関数を引数として渡す**実装をしています。

https://qiita.com/shinkai_/items/cfd93706bf2c5fc58f11

Pythonはやっぱりコーディングしやすい。

以上
VyosをVirtualBoxに入れてルーティングをしてみた

#はじめに
OSSのVyosをvmに入れてみたので、備忘録です。
vyosはルータとしてどうさせてみます。環境はwindows10です。
※初めて書いてみたのでうまく書けていないと思います。

#目次
1.isoファイルをダウンロード
2.仮想環境の構築
3.Vyosの設定、保存
4.IPアドレスの設定
5.staticルーティングの設定

#1.isoファイルをダウンロード
[ダウンロードページ](https://downloads.vyos.io/?dir=rolling/current/amd64)からvyos-rolling-latest.isoをダウンロードしてきます。

#2.仮想環境の構築
##VirtualBox上に新しくvmを作成
VirtualBoxを用いてVyosを動かします。インストールは各自でお願いします。VirtualBoxを起動したら、新規から新しい環境を構築します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613684/c181216d-9bbf-8cb7-0b47-9bd0f7aee79e.png)

今回は名前をvyos、フォルダはデフォルト、タイプはLinux、バージョンはDebian(64bit)を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613684/6ce7baf7-7e45-8722-3ad3-1a898a8b0e47.png)

残りの選択肢は標準のままで作成します。難しくないはず……(´・ω・)

##作成したvmにVyosを入れる
Vyosを入れる前にvmのネットワークアダプターを増やします。先ほど作成したvmの設定を開き、ネットワークのアダプター1の割り当てを内部ネットワークに変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613684/dd741e95-0c5d-e928-88db-a658f7f4e4ed.png)
同様にアダプター2のネットワークアダプターを有効化にチェックを入れてから、割り当てを内部ネットワークに変更します。

終ったら、vmを起動して、先ほどインストールしたisoファイルを選択し起動をクリックすると、Live(amd64-vyos)を選びenterを押すと、起動します(enterを押さなくても勝手に始まります)。
__vyos login : vyos__
__Password : vyos__
でログインできます。ログイン後に
__$install image__ を実行します。yes/noで聞かれたらy、それ以外はenterを押して大丈夫です。最後にvyosユーザのパスワードの変更ができますが、自分は初期のvyosにしました。

#3.Vyosの設定
Vyosの基本として
__config__　⇒設定モード
__commit__　⇒設定の反映
__save__ 　 ⇒設定の保存
で操作します。タイムゾーンの変更をしてみます。

```
$config
#set system time-zone 'Asia/Tokyo'
```

※注意すべき点として、キーボードが英語配列です。
commitをしないと反映されませんので忘れずに!

設定ができてるか確認してみましょう!

```
$show config
#run show config
```

ユーザモードの時(先頭に$がついている)はshwo config、設定モードの時(先頭に#がついている)はrun show configを実行しましょう

最終行に:がついているとまだ下にも表示されていないところがあるという証拠なのでenterを押しsys-logのtime-zoneがAsia/Tokyoになっているか確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613684/3d10eff4-8f7e-8f06-3aea-17b74fdf672a.png)

#4.IPアドレスの設定
最終的には以下のネットワークを構築します。
最初のほうに設定したアダプター1とアダプター2をそれぞれeth0とeth1として、eth0には192.168.1.1/24、eth1には192.168.2.1/24を設定します。

```
set interfaces ethernet eth0 address 192.168.1.1/24
set interfaces ethernet eth1 address 192.168.2.1/24
```

#5.staticルーティングの設定
以下のようにstaticルーティングを決めることができますが、これは意味がありません。

```
set protocolos static route 192.168.2.0/24 next-hop 192.168.1.1
```

※ルーティングが行われているか確認するには

```
$show ip route
#run show ip route
```
を実行するとわかります。

実際これは何の意味もないのですw
じゃあ、おめぇはなんでこんなことしたんだって話なんですが、そこらへんはネットワークの話なので別の機会にまとめてみたいと思います。
Canvg v3を使ってブラウザ上でSVGをCanvasに変換する

# 2022年2月18日追記
2022年2月17日にリリースされたCanvg v4.0.0については、以下の記事をご参照ください。

https://qiita.com/wm-ytakano/items/e439bc16a0285a6a67c8

# はじめに
ブラウザ上に表示されているSVGをPNG画像としてダウンロードしたいことがあります。その場合
1. [Canvg](https://github.com/canvg/canvg)を使ってcanvasにSVGをレンダリング
2. `canvas.toDataURL()`または`canvas.toBlob()`と`URL.createObjectURL(blob)`を使ってdataURLに変換
3. `<a>`タグの`href`属性にdataURLを指定し、ダウンロード
という手順で行われることが多いです。[^1]

このような日本語の解説記事はいくつかありますが、Canvg v2.0.0を基にした古いものが多く[^2]、2019年にリリースされた最新のv3.0.7について書かれたものは筆者が見た限りなさそうです。

そこでこの記事では、手順1.について、Canvgのv2とv3でどのように記法が変わったのかについて説明します。

# v2とv3の比較
前提として、ブラウザ上のアニメーションの含まれないSVG DOM (`#svg_root`)を、Canvasに変換することを考えます。CanvgはWebpackを使ってインポートしています。

v2.0.0を使う場合は以下のように書きました。
描画は非同期で行われ完了時に`renderCallback`が呼ばれるため、Promiseでラップしています。

```canvg_v2.0.0.js
import canvg from "canvg";
 
function render() {
    const svgRoot = document.querySelector("#svg_root");
    const svgString = svgRoot.outerHTML.replace(/NS[0-9]+:href/g, "xlink:href");
    // .replace()はiOS Safari等でnamespaceが"xlink"ではなく"NSなんとか"になるのに対応するため
    
    const canvas = document.createElement("canvas");
    const canvas.width = 1920; // canvasの幅を指定
    const canvas.height = 1080; // canvasの高さを指定
    
    return new Promise((resolve) => {
        canvg(canvas, svgString, {
            renderCallback: () => resolve(),
        });
    });
}
```

これに対して、v3.0.7を使う場合には以下のようになります。
違いの一つは、Canvgに渡す引数がcanvasからctx(CanvasRenderingContext2D)に変わったことです。
ほかには注意点として、`Canvg.fromString()`だけでは描画が行われないため、その後`v.render()`を呼ぶ必要があります。`v.render()`はPromiseを返すため、以前のようにラップする必要は無くなりました。

```canvg_v3.0.7.js
import Canvg from "canvg";

function render() {
    const svgRoot = document.querySelector("#svg_root");
    const svgString = svgRoot.outerHTML.replace(/NS[0-9]+:href/g, "xlink:href");
    // .replace()はiOS Safari等でnamespaceが"xlink"ではなく"NSなんとか"になるのに対応するため
    
    const canvas = document.createElement("canvas");
    const canvas.width = 1920; // canvasの幅を指定
    const canvas.height = 1080; // canvasの高さを指定
    const ctx = canvas.getContext('2d');
    
    const v = Canvg.fromString(ctx, svgString);
    return v.render(); // Promise
}
```

以上です。

[^1]: Canvgを使わずとも`ctx.drawImage()`の引数に SVGImageElementを渡すことでも画像の変換を行うことができます（例えば、[「SVGを画像に変換してダウンロードする方法」](https://qiita.com/skryoooo/items/a37455bef54321a6195a)）。しかし、SVG中のimageタグで外部の画像を読み込んでいる場合には、この方法では上手くいかないようです。

[^2]: [「svg.jsとcanvgを使って、SVGタグ内のオブジェクトをクライアント側だけで画像化させてみる」](https://qiita.com/akase244/items/e7eae496be5f8f8c3e2b) (2014年) や[「[JavaScript] 動的SVGからpngを作りたいときはcanvgを使う。Image.src経由だとIEのSecurity Errorが出ちゃう」](http://www.kuma-de.com/blog/2018-03-21/7396)(2018年) など。
SQL command


mysql -u root　でMySQLに接続
[![Image from Gyazo](https://i.gyazo.com/a4fce567080771cc07db2a5782fca447.png)](https://gyazo.com/a4fce567080771cc07db2a5782fca447)mysql>となれば接続成功です。
-u rootというオプションで、ユーザーは「ルート」でログインするという意味になります。
ここでいうルートとは、MySQLであらかじめ用意されているユーザーのことです。
このユーザーのパスワードは空で設定されているため、ログインにパスワードは必要ありません。

　　　　　　　　command　　　　　　　　　　|　　　　　　　用途
--------------------------------------|------------------------------
mysql> SHOW DATABASES;　　　　　　　　　　|　  　DB一覧表示
mysql> CREATE DATABASE 《データベース名》;　|　　 DBを作成
mysql> DROP DATABASE 《データベース名》;　　|　　 DBを削除
mysql> USE 《データベース名》;　　　　　　　　|　　 どのDBを使用するのかを指定
mysql> SHOW TABLES;　　　　　　　　　　　　|　　  テーブル一覧表示
mysql> FROM 《テーブル名》; 　　 　　　　　　|　　　テーブルを指定
mysql> SHOW columns FROM 《テーブル名》;　|　　　カラムの構造表示
mysql> ALTER TABLE 《テーブル名》;　　　　　|　　　テーブル編集

mysql> ALTER TABLE テーブル名 ADD カラム名 カラムの型;　　
→カラム追加

mysql> ALTER TABLE テーブル名 CHANGE 古いカラム名 新しいカラム名 新しいカラムの型;
→カラムの変更

mysql> ALTER TABLE テーブル名 DROP カラム名;
→カラムの削除

mysql> INSERT INTO 《テーブル名》 VALUES(値1, 値2, 値3);
→全てのカラムに値を入れる

mysql> INSERT INTO テーブル名(カラム名1, カラム名2) VALUES(値1, 値2);
→特定のカラムに値を入れる

mysql> UPDATE 《テーブル名》 SET 《変更内容》 WHERE 《条件》;
→データの更新

mysql> DELETE FROM 《テーブル名》 WHERE 《条件》;
→データの削除
C++勉強備忘録その１

# C++学習1日目

備忘録
教材...一週間でわかるC++

### 0日目
C言語は大規模な開発には向かない
→オブジェクト指向的な拡張を施したC++が開発された

####オブジェクト指向とは
「object」もの、物体を表す英語
データを現実世界の物に置き換える考え方。
オブジェクトと、その動作の「メソッド」から成り立つ。
オブジェクト、メソッドの組み合わせ、その相互作用でプログラムを記述する。


####C++の特徴
長所
C言語との互換性がある
独自のフレームワークを必要としない
Cよりセキュリティ面で優れている

短所
言語が複雑
ライブラリが少ない
GC（ガベージコレクション：使っていないメモリを開放する）機能が存在しないため、メモリ管理を行いたい場合はスマートポインタ等を用いる必要がある。


####オブジェクト指向の考え方
オブジェクト指向…メソッドと属性がある。
（ex　発進、停止等…メソッド　スピード、排気量等…属性


####クラスとオブジェクト
オブジェクト…クラスの個々の物体を指す。（インスタンスとも呼ぶ。）クラスの中にオブジェクト、なイメージ。（クラスがあればいくらでもオブジェクトを生成できる。クラスがなければオブジェクトは存在しない）
picoCTF 2021 Wireshark twoo twooo two twoo...

できなかった問題をwriteup等を参考に勉強した記録を残す。
Wiresharkでパケットを解析する問題。
DNSサーバがC2として稼働しており，PCに感染したマルウェアが盗んだ情報をC2（DNS）に送信している状況をモデルにしていると思われる。


# Wireshark twoo twooo two twoo...

### Protcol Hierarchy
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1163572/dd4a0170-6617-6f1b-d7cb-8ea3ababa816.png)

数が少ないものを見ていく

UDP の data
HTTP の xml
HTTP の Line-based text data 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1163572/cbcf5c3e-3959-9070-5cbc-4b4f923b1fb9.png)
Line-based text data にダミーのフラグがたくさんある。

### Endpoints
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1163572/903f7557-4db0-5527-e837-78a4bbf6d8e4.png)
192.168.38.xxx PCs
8.8.8.8 Google DNS
18.217.1.57 があやしい

### 18.217.1.57でフィルタした状態のProtcol Hierarchy
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1163572/d9ce3dfd-afeb-0a6a-ce3b-9948625746cb.png)
Line-based text data は偽フラグなのでdns を見る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1163572/a527b4d0-824d-08d2-ec4b-a01a52336a81.png)
応答が全部「そんな名前ないです」が返ってる
HTTP通信はたくさん行っているので，このDNS通信はC2へ盗んだ情報を送信しているものと見るべき。

```
Flags: 0x8183 Standard query response, No such name
```

Standard queryに絞ってみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1163572/502276a0-eacc-8ce2-f820-68952ef13a4e.png)
同じ名前を３か所に送ってる

重複を削除
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1163572/fb6fa223-7d88-f08e-505f-32d47efa3875.png)

サブドメインがBASE64みたい

```
cGljb0NU.reddshrimpandherring.com
RntkbnNf.reddshrimpandherring.com
M3hmMWxf.reddshrimpandherring.com
ZnR3X2Rl.reddshrimpandherring.com
YWRiZWVm.reddshrimpandherring.com
fQ==.reddshrimpandherring.com
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1163572/e7e11187-9da3-8979-11d6-7fcf237c8491.png)
ビンゴ

こういう問題（マルウェア解析につながるやつ）をもっと増やしてほしい。
複数のDockerfileをbuildするGitHub Actionsのワークフロー設定

**[GitHubリポジトリ](https://github.com/eyasy1217/multi_docker_github_actions)**

**当リポジトリは以下を実現するためのGitHub Actionsのワークフロー設定(yamlファイル)の実装例です**

## 実現したいこと
リポジトリに複数あるDockerfileをGitHub Actionsでbuildする
変更のあったファイルだけをbuildする

```bash:tree
.
├── .github
│   └── workflows
│       └── main.yaml
├── hello
│   ├── Dockerfile
│   └── hello.sh
├── world
│   ├── Dockerfile
│   └── world.sh
└── README.md
```

```yaml:/.github/workflows/main.yaml
name: ci

on:
  push:
    branches:
    - 'main'
    paths-ignore:
    # 他のファイルも含めて変更があった場合はactionが動作してしまうので、
    # 以下がdocker buildの対象にならないようにstepsでチェックする
    - '.github/**'
    - 'README.md'

jobs:
  docker:
    runs-on: ubuntu-latest
    steps:
    - name: checkout
      uses: actions/checkout@v2
    - id: file_changes
      # changed filesをリスト化してくれるモジュール
      uses: trilom/file-changes-action@v1.2.4
      with:
        # パイプ処理したいため、changed filesリストを改行区切りにする
        output: '\n'
    - name: docker_build
      run: |
        # 
        # ${{ steps.file_changes.outputs.files }}
        # ↓
        # hello/Dockerfile
        # hello/hello.sh
        # world/world.sh
        # .github/workflows/main.yaml
        # ↓
        # hello
        # world
        # .github
        #
        echo -e "${{ steps.file_changes.outputs.files }}" | \
          awk '{sub("/.*", "");print $0;}' | \
          sort | \
          uniq | \
        while read line
        do
          echo "##### docker build -> ${line} #####"
          if [ ! -e ./${line}/Dockerfile ]; then
            # .githubとREADME.mdはこのロジックに入る
            echo "./${line}/Dockerfile not exists"
            continue
          fi

          docker build -t ${line} ./${line}
          # 確認のため
          docker run --rm ${line}
        done
```

## 動作確認
**ケース1**
以下のファイルを操作

- /hello/hello.sh(modified)

⇒GitHub Actionsが以下ディレクトリをdocker build

- /hello

(changed files)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481044/9ba74c41-8a5a-1672-fbcc-768bf3cfbf28.png)
(GitHub Actionsのログ)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481044/ada5517a-8907-fe2b-3982-daf111a1224b.png)


**ケース2**
以下のファイルを操作

- /hello/Dockerfile(new file)
- /hello/hello.sh(new file)
- /world/world.sh(modified)
- /.github/workflows/main.yaml(modified)

⇒GitHub Actionsが以下ディレクトリをdocker build

- /hello
- /world

(changed files)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481044/ae4515ea-8e03-6d01-4213-96c3a61c47cb.png)
(GitHub Actionsのログ)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481044/116ce39b-838d-92d7-a0d8-85b5b91bd0ae.png)

**ケース3**
以下のファイルを操作

- /README.md(deleted)
- /.github/workflows/main.yaml(modified)

⇒GitHub Actionsは動作しない
散歩を支援するようなPGM

現在いる場所の交差点タイプを選択することでランダムに次に進む方向を指定する
ことで散歩を支援するようなPGMを作ってみました

<hr>
画面例
![screenshot1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412430/84807fcc-d8b2-7062-0c1e-4e06c883c28f.jpeg)

<hr>
サンプルページURL: 
<a href="https://nanjomiyako.github.io/Sanpo2/">https://nanjomiyako.github.io/Sanpo2/
</a>
githubURL: 
<a href="https://github.com/NanjoMiyako/Sanpo2">https://github.com/NanjoMiyako/Sanpo2
</a>
[MAC] 内蔵カメラを使って簡単なリアルタイム動画処理をしてみました

※プログラミング完全超初心者が書いています。インターネット上で調べていることが多いため既視感があるかもしれません。
#環境
 - macOS Big Sur 11.2.3
 - opencv 4.1.2
 - Visual Studio Code

#処理内容
　カメラから取得した動画に写っている人間の顔（正面）を検出し、モザイク処理をおこないます。

#動画処理

　動画を1フレームごとに画像処理し、描画し続けます。
よって、まず、カメラでフレームを読み込むプログラムを作成します。

```python:program1

import cv2
 
#カメラから動画を読み込む
#このプログラムでは、内蔵カメラを使用するため0
camera = cv2.VideoCapture(0)
 
while True:
    # フレームを読込み
    ret, frame = camera.read()
 
    # フレームが読み込めなかった場合
    if not ret: 
        break

    # フレームの描画
    cv2.imshow('camera', frame)
 
    # loop停止keyの設定（q）
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break

#キャプチャデバイスの終了
camera.release()
#プログラムの実行により追加されたウィンドウを全て停止
cv2.destroyAllWindows()
```

ここに顔検出と処理内容のプログラムを書き加えます。

※https://github.com/opencv/opencv/tree/master/data/haarcascades
　上記のURLから分類機をダウンロードし、プログラムと同じファイル内に保存しておいてください。

```python:program2

 import cv2

 camera = cv2.VideoCapture(0)

 #分類機を取得
 cascade_path = "haarcascade_frontalface_default.xmlの絶対パス"
 #CascadeClassifier - 分類機の読み込み
 cascade = cv2.CascadeClassifier(cascade_path)

 while True:
    ret, frame = camera.read()

    if not ret: break

 #detectMultiScale -  読み込んだ分類器をしようして顔を検出 
 #scaleFactor - 各画像スケールにおける縮小量
 #minNeighbors - 候補の矩形に含まれる近傍矩形の最低数
 #minSize – 物体の最小サイズ．これよりも小さい物体は無視されます

    facerect = cascade.detectMultiScale(frame, scaleFactor=1.1, minNeighbors=2, minSize=(30,30))

 #検出後の表示される矩形の色の設定（BGRであるため下記の場合は赤）
    rectangle_color = (0,0,255)

 # 検出できた場合
    if len(facerect) > 0:
        for rect in facerect:
        #tuple - 複数の要素を管理するデータ型の一種（要素を追加・削除・変更できない）
        #thickness - 線や円の太さ、-1は塗り潰し
            cv2.rectangle(frame, tuple(rect[0:2]),tuple(rect[0:2]+rect[2:4]), rectangle_color, thickness=2)
        # 顔部分の抽出
            cut_frame = frame[rect[1]:rect[1]+rect[3],rect[0]:rect[0]+rect[2]]
        # cv2.resize - サイズの変更
            cut_frame = cv2.resize(cut_frame,(rect[2]//20, rect[3]//20))
        #cv2.INTER_NEAREST - サイズの変更によるモザイク処理
            cut_frame = cv2.resize(cut_frame,(rect[2], rect[3]),cv2.INTER_NEAREST)

            frame[rect[1]:rect[1]+rect[3],rect[0]:rect[0]+rect[2]]=cut_frame
    
    cv2.imshow('camera', frame)

    if cv2.waitKey(1) & 0xFF == ord('q'):
        break

 camera.release()
 cv2.destroyAllWindows()
```

![スクリーンショット 2021-04-02 22.49.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/926438/0ccb47b0-0e59-da64-9ab2-3bde6bd55314.png)

このようにモザイク処理をすることができました。
Sagaパターンについて

# 概要
マイクロサービスでは、移行する際にシステム移行に伴うDBの分解が発生した場合に、分散トランザクションは推奨していません。[参照: マイクロサービスに移行した際の分散トランザクションの危険性](https://qiita.com/yoshii0110/items/3c86173dc53d93588b72)

簡単に説明するなら分散トランザクションは、不具合となる危険性がある為です。
そのため、マイクロサービスで複数のリソースの結果整合性を利用する方法として、**Sagaパターン**があります。

# Sagaパターンとは
* Sagaパターンとは、結果整合性を使ったアーキテクチャの1つであり、複数の状態変更を調整できリソースを長時間ロックすることがないよう設計されたアーキテクチャパターンです。「Sagaの元々のアイデアは、Hector Garcia MolinaとKenneth Salemによって発表された[論文](https://www.cs.cornell.edu/andru/cs711/2002fa/reading/sagas.pdf)から生まれました。」
もう少し詳しく説明すると、結果整合性を担保したい範囲を１つのローカルトランザクション(擬似的なトランザクション)と考えて処理を行います。

* これによって何がいいのかというと、**複数にまたがるサービスごとで**トランザクションを分解し、それぞれが独立で処理することで、１トランザクションあたりにかかる時間を短縮し、それによって複数行、テーブル全体を長時間ロックすることなく処理を実行できることがポイントです。

* またSagaパターンでは、ロールバックを行わせようとした場合、単純なロールバックはできない(したら危険)ようになっています。なぜなら、Sagaパターンでは複数のトランザクションが関与しているため、途中で起こった障害から以前の状態に回復するためのロールバックをしようとした際に既にコミットされている可能性があります。

* そのため、Sagaパターンでは、**補償トランザクション**という考え方で実装を行います。補償トランザクションとは、単純なロールバックを行うことができないので、代わり一連のトランザクションで実行した操作の逆向きにした取り消し操作によってロールバックを行います。

[各ローカルトランザクションとその操作で実行する責務を持つマイクロサービス例]
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/38bf8ef6-24d8-483e-d34a-f8c01e445f4c.png" width="400px">

[トランザクション実行中エラーが起き、補償トランザクションが実行される例]
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/db2ff81f-6213-0abf-c777-e06ebcf7f3c9.png" width="600px">

## Sagaパターンの実装方法
Sagaパターンの実装方法として以下の2つあります。

* Choreography (コレオグラフィ) 
* Orchestration （オーケストレーション）

### Choreography (コレオグラフィ)

* コレオグラフィのSagaパターンでは、中央集権的な調整(コントローラ)の必要性を避けて、参加する要素がイベントを交換します。コレオグラフィを使用すると、他のサービスでローカルトランザクションをトリガーするイベントが、各ローカルトランザクションによって発行されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/998dc549-da3c-7b98-9689-c7040a851e00.png" width="500px">

#### メリット
* sagaパターンに参加する要素全体に責任が分散されるため単一障害点がないです。

#### デメリット
* E2Eテストをする際にすべてのサービスが実行されている必要があるので、E2Eテストが難しくなる。

### Orchestration (オーケストレーション)

* 中央集権的なコントローラ(オーケストレータ)が、どのローカルトランザクションを実行するかを、参加する要素に伝えます。 オーケストレーターは、すべてのトランザクションを処理します。また、オーケストレーターは、要求を実行するだけでなく、各タスクの状態に応じて、補正トランザクションを使って障害復旧も行います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/d20e3c07-b442-6db3-6cde-0ee5e46b71ef.png" width="500px">

#### メリット
* プロセスのすべての参加する要素を制御することができます。
* 依存関係が明確なため、ビジネスロジックがシンプルです。

#### デメリット
* 設計が複雑になりやすく、調整するためのロジックを実装する必要があります。
* オーケストレータの管理対象がワークフローなので、障害点が発生します。

# 参考文献
https://www.cs.cornell.edu/andru/cs711/2002fa/reading/sagas.pdf

https://medium.com/google-cloud-jp/gcp-saga-microservice-7c03a16a7f9d

https://docs.microsoft.com/ja-jp/azure/architecture/reference-architectures/saga/saga#:~:text=saga%20%E8%A8%AD%E8%A8%88%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E3%81%AF%E3%80%81%E5%88%86%E6%95%A3,%E3%82%92%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%A7%E3%81%99%E3%80%82

https://zenn.dev/tkatsuma/articles/2c443fa4fb5bd7

https://www.techscore.com/blog/2018/12/05/saga-in-microservices/

https://qiita.com/nk2/items/d9e9a220190549107282

https://www.oreilly.co.jp/books/9784873119311/
【初心者でもわかる】cssのレイアウトが崩れた時にやってみる事10選

#どうも7noteです。cssでレイアウトが崩れた時に試す方法10選です。

関連記事：[【初心者でもわかる】cssが効かない時に試したい10の事](https://qiita.com/7note/items/5fb33a4d7754a82e8f5f)

前回はcssが効かなかった時の対処法を10個紹介しましたが、今回はcssは効いてそうなんだけどめっちゃレイアウトが崩れる時に試してみる方法を10個あげてみましたのでお試しあれ。


## 1.とりあえず元に戻す。

コンピュータはいつでも正確です。もともと綺麗だったのに**cssを触って崩れたのなら、とりあえず元に戻してみましょう。**そして1行ずつ追加するなどして原因を探してみましょう。

## 2.floatをやめてみる

floatは回り込みを指定するものですが、初心者の方がつまずきやすいプロパティNo. 1だと勝手に思ってます。
**一度floatをやめてみたり、floatを使う場合は回り込み解除**(有名なのはclearboth)を試してみましょう。

## 3.position指定を見直す

positionのプロパティで表示位置についての指定をできますが、absoluteやfixedは基準位置となるrelativeが指定されている要素がないと、変なところに表示されてしまいます。
**position指定を見直してみましょう。**

## 4.高さや幅の指定を見直す

高さや幅を指定していなければ、自動的に決まるものもあるので指定してみましょう。また画像も指定がなければ画像のサイズがそのまま表示されてしまいます。
逆にガチガチに固定してしまっていると親要素をはみ出る可能性もあるのでこれもまたレイアウトが崩れる原因になります。

## 5.タグの入れ子構造と、cssの入れ子構造が違ってないか確認

**入れ子構造が間違っていると、思ってもないところにcssが当たる可能性があります。**
もう一度よく見直してみましょう。

## 6.marginやpaddingの値を見直す

marginやpaddingが指定されており、ぴったり入らないことがあるかも。
また**初期値で要素にmarginやpaddingが指定されているものもあるので、reset.cssなどを作成して無効化してから開発するのがおすすめ。**

## 7.ボックスモデルを理解する

cssはボックスモデルを理解しなければ思い通りに整えることは難しいかもしれません。
全ての解説をここでは書けないので、気になる方はこちら↓

https://qiita.com/7note/items/ddce7f23cd075ad9431e

## 8.親要素のcssが子要素にも効いてる

**cssには親要素の値を引き継ぐものがあります。**そのため親要素とは違うcssを当てる場合は子要素用のcssも書きましょう。
また例えばdivに指定した場合、親子構造を持つ親のdivと子のdiv両方にcssが当たるのでクラス名をつけたり隣接セレクタや直下を適切に指定して回避しましょう。

## 9.対応ブラウザを確認する

**cssのプロパティには対応しないブラウザがあるものもあります。**プロパティ名で検索して確認してみましょう。

## 10.実はキャッシュのせいかも。キャッシュクリアを試す

ブラウザには読み込み速度を早くするためにキャッシュ(前回の閲覧データ)を残す機能があります。そのせいで**古いcssが効いたままで**実は治ってるかもしれません。
各種ブラウザでキャッシュクリアの方法が若干異なるので確認してみましょう

## まとめ

普段cssを触らない方や、まだ初めてまもない方は**cssって正直わけわからないと思います。**

ブラウザによって多少効く効かないはありますがしっかりルールが定まっているのでルールさえ把握すればあとは正直手を動かすだけですね。
でも解決方法が1つじゃなかったりするので違う方法を試してみるなど試行錯誤できるのがcssの面白さなのかなって思います。


#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
【Swift】RxSwiftを勉強するのに参考になった記事をまとめてみた

#はじめに
RxSwiftを勉強してよかった記事をひたすら羅列するためだけの記事です。いいものが見つかり次第、随時更新していこうかと思います。

#記事
https://qiita.com/_ha1f/items/e16ddc6017c4ad807c3c

https://qiita.com/_ha1f/items/43b28792d27dbee7133d

https://qiita.com/_ha1f/items/db72471d0c9e82fab13d#_reference-dfb07cedc63c1f933f92

https://qiita.com/_ha1f/items/2d0fc50505ce3a1fcdab

https://qiita.com/usamik26/items/444d6dd7386b2949c06b#rxswift-%E3%82%92%E4%BD%BF%E3%81%86%E3%81%86%E3%81%88%E3%81%A7%E3%81%AE%E7%95%99%E6%84%8F%E7%82%B9

https://qiita.com/gomi_ningen/items/c796c08fe672610beecf

https://open8tech.hatenablog.com/entry/2019/04/03/111100

https://www.2nd-walker.com/2020/01/27/beginning-of-rxswift-1/

https://www.2nd-walker.com/2020/01/30/beginning-of-rxswift-2/

https://www.2nd-walker.com/2020/02/06/beginning-of-rxswift-3/

https://qiita.com/k5n/items/17f845a75cce6b737d1e

https://qiita.com/takasek/items/0984f20b723e74f73512

https://qiita.com/RyosukeKamimura/items/8687566852cf20051292

https://qiita.com/ostk0069/items/117f2563aa58f53fdb51

https://qiita.com/powerispower/items/d4d70b50503c45978a70#%E3%82%88%E3%81%8F%E4%BD%BF%E3%82%8F%E3%82%8C%E3%82%8B%E3%82%AF%E3%83%A9%E3%82%B9%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89

https://qiita.com/dddisk/items/813410f03bd4e93ed63e

https://fukatsu.tech/rxswift#i-2

https://yamato8010.hatenablog.com/entry/2020/09/17/083000

https://qiita.com/keisei_1092/items/06f5c68ed91a50f13943

#おわりに
随時更新予定
RxSwift楽しい！
【ネタ？】Makefileの中身をシェルスクリプト100%で書いてみた

make はタスクランナーではないと言われても、make [なんちゃら] 一つで定形処理が実行できるのは便利なわけですよ。プロジェクトに Makefile があるだけで make コマンドで何かが簡単に実行できるんだと伝えられるわけですよ。でも Makefile はタスクランナーとしては書きづらいからシェルスクリプトを埋め込むわけですよ。そうすると Makefile の文法とシェルスクリプトの文法が混ざって読みづらくなるわけですよ。だから結局 Makefile から外部のシェルスクリプトを呼び出すことになるわけですよ。

それなら、もういっそのこと Makefile の中身をシェルスクリプト100%で書けばよくね？と思ったのでやってみました。以下のコードはシェルスクリプトですが Makefile としても解釈することができます。


```sh:Makefile
#!/bin/sh

: <<-'HERE'
.PHONY: build test
build:
	@sh Makefile $@
test:
	@sh Makefile $@
:
	HERE

	build() {
		echo "building..."
	}

	test() {
		echo "testing..."
	}

	"$@"
```

- Makefile なのでインデントはタブです。
- `<<-` と書けばヒアドキュメントの終わりをタブでインデントすることが出来ます。
- make の補完もたぶんちゃんと動きます。
- Makefile に実行権限をつけて make コマンドなしに実行することができます。
- 通常の Makefile のコードも混ぜられます。
- 全ての文法が正しく使えるかはわかりません。

ネタというわりに使える気がしてならない。
【Git】non-fast-forwardエラーが出た時の対処法

##はじめに
こちらは、私が毎度どうしようもないところで躓いて解決できず、時間がただ過ぎていく状況を改善するための救いようのない備忘録です。

ネット上の他の解決法を試してもダメだった場合、役に立てるかもしれません！

##環境
・Git - 2.31.1

##git pushでエラー！
`git push`を実行すると、

```
 ! [rejected]        main -> main (non-fast-forward)
```
というように`non-fast-forward`とエラーが出てきます。

とりあえず、`git pull origin main`を叩いてみます。すると今度はこんなメッセージが。

```
 * branch            main       -> FETCH_HEAD
hint: Pulling without specifying how to reconcile divergent branches is
hint: discouraged. You can squelch this message by running one of the following
hint: commands sometime before your next pull:
hint: 
hint:   git config pull.rebase false  # merge (the default strategy)
hint:   git config pull.rebase true   # rebase
hint:   git config pull.ff only       # fast-forward only
hint: 
hint: You can replace "git config" with "git config --global" to set a default
hint: preference for all repositories. You can also pass --rebase, --no-rebase,
hint: or --ff-only on the command line to override the configured default per
hint: invocation.
fatal: refusing to merge unrelated histories

```

色々解決方法が載っていますね。そして、その中でも気になるのが、一番下の

```
fatal: refusing to merge unrelated histories

```

です。どうやら無関係はヒストリーをもつものをマージしようとしていたみたいです。

##解決！
マージがうまくいかない場合は、オプションに`--allow-unrelated-histories`を追加することで無関係でもマージできるようになります。

```
$ git merge --allow-unrelated-histories origin/main
```

これでOK！あとは、`get status`で変更状況を確認して、変更があれば、`git add <file>`、そして`git commit -m <comment>`、最後に`git push origin main`でフィニッシュです。

##おわりに
今自分がどこまでやったか、頭の片隅に入れておきたいですね。
Rails：ハイフン付のclassセレクタを適応する方法

## 問題
railsのヘルパーメソッドに「ー」付のclassセレクタを適応させようとした時、エラーが発生した。
``エラー発生コード
<%=link_to '商品一覧', '#', class: [:btn, :btn-primary] %>
``


## 解決策
上記の「btn-primary」ように、ハイフンが付いているclassを適応したい場合は
``エラー解消コード
<%=link_to '商品一覧', '#', class: [:btn, :"btn-primary"] %>
``
このように「""」で囲ってあげる事で、classセレクタを適応することができる。
【React-Rails】Warning: The tag <index> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.の対処法【React】

<h2>症状</h2>
railsサーバーを起動して、reactのrenderで文字を表示させませんでした。
F12を押してデベロッパーツールを確認すると、下記の文言が表示されてしまいました。

```
Warning: The tag <index> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

#翻訳すると
警告：タグ<index>はこのブラウザでは認識されません。 Reactコンポーネントをレンダリングする場合は、その名前を大文字で始めてください。
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/5894fba3-d31e-1a1f-1d9e-6aef4274812f.png)


<h2>解決方法</h2>
対象のファイル名が「index.js」だったので、エラー通り「Index.js」に変更したら、文字が表示されるようになりました。

フロントはエラーが分かりにくいので積極的にデベロッパーツールを活用していこうと思います。
[JavaScript] '+'で数字に型変換する

#概要

文字列→数字だったり日付→数字などに型変換する場合に`Number(), parseInt(), parseFloat()`が使えますが、
`+`を使うことで型変換できることを知ったのでメモします。


#実装

```.js
const hoge = '123'
console.log(+hoge);

//結果：123
```

しかし、文字が入る場合はキャストできなくなります。

```.js
const str = '123abc'
console.log(+str)
//結果：NaN
console.log(parseFloat(str))
//結果：123
```

文字が入る可能性がある場合は明示的にした方がよさそうです。

#関係ないけど

ちなみに明示的に型変換する場合、文字を全て無視すると思っていたのですが
最初の文字までの数値しか読まれないみたいです。
また一つ賢くなりました。

```.js
const str = '1.53a2a3a'
console.log(parseFloat(str))
//結果：1.53
```
Rubyを改めてしっかりと学習する①



◯式展開....#{式}

○putsメソッド....ターミナルに値を出力するメソッド

```ruby:qiita.rb
name = "Taro"
puts name
# ターミナルに出力する
↓　↓　↓
# nameの値が出力される
=> "Taro"
```

◯getsメソッド....ターミナルの値の入力機能を起動させるメソッド
　getsメソッドが記載された行が読み込まれた時点でターミナル画面が入力待ちの状態となる

<ターミナル内の流れ>　

```ruby:qiita.rb
input = gets                 ← ①この行が読み込まれたら入力待ちの状態となる
                             ← ②ターミナル上で文字を入力 ex.こんにちは
puts "入力した値は#{input}です" ← ③入力された文字が＃{input}に代入されて表示

# ターミナル上
入力した値はこんにちは
です
```
◯chompメソッド....文字列が使用できるメソッド
改行を取り除いた文字列を返してくれる

```ruby:qiita.rb
input = gets.chomp

puts "入力した値は#{input}です"

# ターミナル上
入力した値はこんにちはです ← getsメソッドのみだと「です」が改行されていたが改行されなくなった
```

◯配列....角括弧[ ]で囲い生成

```ruby:qiita.rb
変数 = []
ex. fruits_basket = ["みかん", "りんご", "ぶどう"]
```

◯ハッシュ....波括弧{}を使って生成
          ハッシュは、「データ」とそれに対応する「名前」のセットを要素として持つ
          ハッシュにおいては、データをバリュー、それに対応する名前をキー
          ハッシュは順番ではなく、キーで管理
          キーとバリューで管理する方式をキーバリューストアと呼ぶ

```ruby:qiita.rb
変数 = {}
ex. hash = { "name" => "Taro" }
    hash = { :name => "Taro" }
    hash = { name: "Taro" }    ← よく使われる
```

◯シンボル....シンボルは、見た目は文字列のようですが、実際の中身は数値になっている値
　　　　　　(値に対するラベルのようなイメージ)
          文字列の先頭にコロン「:」を置く。　ex. :symbol
          メモリの節約・処理速度が上がる・可読性が上がるなどのメリット

参考/ ハッシュのキーとしてシンボルを使う際や、キーワード引数を使う際に、コロン記号「:」を後置

◯ハッシュの値の取得の仕方

```ruby:qiita.rb
ハッシュ[取得したい値のキー]
#配列では添字を指定、ハッシュではキーを指定
```

◯ハッシュの値の追加の仕方

```ruby:qiita.rb
ハッシュ[追加するキー] = 値

ex.
patient = { name: "Lisa", age: 24 }
teacher[:hight] = 165

puts patient
```
◯ハッシュの値を変更の仕方

```ruby:qiita.rb
ハッシュ[変更したい値のキー] = 値

ex.
patient = { name: "Lisa", age: 24 }
teacher[:name] = "jack"

puts patient
```
◯複数のハッシュを管理する(ハッシュを配列で管理する）

```ruby:qiita.rb

child1 = { name: "Taro", age: 7 }
child2 = { name: "Jiro", age: 5}
child3 = { name: "Saburo", age: 3}
#上記のままだと変数の名前がそれぞれで異なり管理がしにくい
↓　↓　↓
children =[{ name: "Taro", age: 7 }, { name: "Jiro", age: 5}, child3 = { name: "Saburo", age: 3}]
#Jiroの年齢を出力するには
children[2][:age]
```



<参考資料>
・【Ruby入門】コロン記号の意味とシンボルのやさしいまとめ！
　　https://www.sejuku.net/blog/13094
バッチファイルに日付・時間の文字列を作ってもらう

Y子です。
新年度の最初の週、お疲れさまでした。(2日間だけでしたが)

日付や時間の文字列を作る処理をメモしておきます。
今の時間が「2021/4/2 9:46:17」なら、「20210402」と「094617」という文字列を作るのが目的です。
想定する用途は、バッチファイルでファイルを出力する際に、「ファイル名に日時を付ける」ような場合です。

```bat:datetime.bat
@echo off

rem 日付(1)「2021/04/02」形式
echo %date%

rem 日付(2)「20210402」形式
set str_date=%date%
set str_date=%str_date:~0,4%%str_date:~5,2%%str_date:~8%
echo %str_date%

rem 日付(3)「20210402」形式
set str_date=%date:~0,4%%date:~5,2%%date:~8%
echo %str_date%

rem 日付(4)「20210402」形式
set str_date=%date:/=%
echo %str_date%

rem 時刻(1)「 9:46:17.92」形式
echo %time%

rem 時刻(2)「094617」形式
set str_time=%time: =0%
set str_time=%str_time:~0,2%%str_time:~3,2%%str_time:~6,2%
echo %str_time%

rem 時刻(3)「094617」形式
set str_time=%time: =0%
set str_time=%str_time:~0,8%
set str_time=%str_time::=%
echo %str_time%
```

少し解説もしておきます。
日付(1)は、参考のために、dateコマンドを直接出力しています。
日付(2)は、dateコマンドの結果を変数に格納した後、「/」を避けて4文字2文字2文字を抜き出し結合しています。
日付(3)は、(2)と同じことを、変数に格納することなく、dateコマンドの出力に対して直接行っています。
日付(4)は別手段で、dateコマンドの結果から「/」を削除することで、目的を達成しています。

時刻(1)は、参考のために、timeコマンドを直接出力しています。
時刻(2)は、timeコマンドの結果から「 」(半角スペース)を「0」に置換し、その後2文字2文字2文字を抜き出し結合しています。
時刻(3)は、半角スペースを「0」に置換後、最初の8文字を抜き出すことで秒の小数点以下を削り、最後に「:」を削除しています。

個人的に好きなのは、コードが少ない日付(4)と時刻(2)ですが、同じバッチファイルに同居させると別のやり方が混在してしまうので、美しくない気がします。悩ましいです。

サンプルコードを初めて載せてみました。タグはこんな感じで良いのでしょうか？？
お役に立てたら幸いです。
CodePipelineからCodeBuildに環境変数を追加するCloudFormationを定義してみた

#はじめに
CodeBuildを共通化してCodePipelineにて環境変数を渡すだけで環境を分離したCI/CDを実現している方も多いと思います。
CodePipeline自体をCloudFormationでコード管理しており、CodePipelineからCodeBuildに環境変数を追加する際にどのようにテンプレートで表せばよいか格闘した記事です。

##CodeBuild定義テンプレート
CloudFormationにおけるCodePipelineの定義は[こちら](https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/aws-properties-codepipeline-pipeline-stages-actions.html#cfn-codepipeline-pipeline-stages-actions-configuration)に記載されてます。
CodeBuildの環境変数を定義する箇所は「**Configuration**」のプロパティであることはわかっていたが、記載方法が全くない！！

##AWS CLIからCodePipelineの設定確認

という訳で、AWS CloudShellからAWS CLIを叩いてPipelineの情報を取ってきて調べた。
「configuration」プロパティに環境変数の情報があったので、これでテンプレも書けそうだ。


```json
            {
                "name": "Build",
                "actions": [
                    {
                        "name": "Build",
                        "actionTypeId": {
                            "category": "Build",
                            "owner": "AWS",
                            "provider": "CodeBuild",
                            "version": "1"
                        },
                        "runOrder": 1,
                        "configuration": {
                            "EnvironmentVariables": "[{\"name\":\"TEST\",\"value\":\"test\",\"type\":\"PLAINTEXT\"}]",
                            "ProjectName": "test-build"
                        },
                        "outputArtifacts": [
                            {
                                "name": "OutputArtifact"
                            }
                        ],
                        "inputArtifacts": [
                            {
                                "name": "SourceArtifact"
                            }
                        ],
                        "region": "ap-northeast-1"
                    }
                ]
            },
```


##テンプレート
**EnvironmentVariablesの値が文字列であることに注意！！**
初めに見た時に「なんだリストで書けばいいのか」と勘違いして失敗しました・・・
テンプレートはCodeBuildの箇所だけ抜粋してます。

```yaml
      Stages:
        - Name: Build
          Actions:
            - Name: Build
              ActionTypeId:
                Category: Build
                Owner: AWS
                Version: 1
                Provider: CodeBuild
              Configuration:
                EnvironmentVariables: '[{"name":"TEST","value":"test","type":"PLAINTEXT"}]'
                ProjectName: !Ref CodeBuildProject
              RunOrder: 1
              InputArtifacts:
                - Name: SourceArtifact
              OutputArtifacts:
                - Name: OutputArtifact
```


意外とドキュメントを読んでもわからないこともあるので、仮でリソースを作成してみてAWS CLIから設定情報を確認するのが手っ取り早いと思います。
誰かしらの手助けになればと思います。
ToStringメソッドでの書式指定

#####C#などで数字を文字列に変える場合にToString()メソッドをよく使いますが、引数をいれることにより書式を指定することができます。<br>下に書式の指定の方法とその例を紹介します。

##1.0 標準書式
| 指定子 | 種類 | 説明 |使用例　()内の数字を変換 |
|:-:|:-:|:-|:-|
|"c"または"C"|通貨型|数字は小数のけた数<br>けた数より下は四捨五入   |例１　(12345).ToString("c") --> ￥12,345<br>例２　(1234.567).ToString("C1") --> ￥1,234.6|
|"d"または"D"|整数型|整数のみ対応可<br>数字はけた数|例１　(123).ToString("d5") --> 00123<br>例２　(-12).ToString("D4") --> -0012|
|"e"または"E"|指数型|指定子の小文字、大文字で指数部"e"または"E"<br>を指定可<br>数字は小数部のけた数(なければ6けた)|例１　(123.56).ToString("e") --> 1.2356e+002<br>例２　(-0.1256).ToString("E2") --> -1.26E-001|
|"f"または"F"|小数型|数字は小数のけた数<br>けた数より下は四捨五入<br>指定なければ小数2けた|例１　(123.45678).ToString("f") --> 123.46<br>例２　(0.1).ToString("F4") --> 0.1000|
その他G(有効けた数)、N(区切り)、P(パーセント)、X(16進数)などいろいろあります。












##2.0 カスタム書式
| 指定子 | 種類 | 説明 |使用例　()内の数字を変換 |
|:-:|:-:|:-|:-|
|"0"|ゼロ型|対応するけたを0でうめる<br>数字がないところは0   |例１　(123).ToString("00000") --> 00123<br>例２　(123.456).ToString("00.00") --> 123.46|
|"#"|けた型|対応するけたを#でうめる<br>数字がないところは表示されない   |例１　(123).ToString("#####") --> 123<br>例２　(0.456).ToString("##.##") --> .46|
|","|区切り|0または#の間に,がある時はカンマで区切りをする|例１　(123456789).ToString("#,0") --> 123,456,789<br>
||その他|[　]　や　:　など記号、文字はそのまま表示|例１　(123456).ToString("[##:##:##]") --> [12:34:56]<br>例２　(123.456).ToString("##.##円") -->123.46円








##3.0 空白埋め、0埋め、指定文字埋め
PadLeft()、PadRight()関数を使えば左から（右から）指定で文字埋めができます。これを使えば空白埋めや0埋めができます。
PadLeft()、PadRight()は、第一引数はけた数、第二引数はCharで代替文字を設定できます。
例 value.ToString().PadLeft(5, '#')

:point_up:**ポイント**
第二引数（代替文字）はCharとなりますので""(ダブルクオート)ではなく''(シングルクオート)で囲みます。









##4.0 スクリプト
```c#:test.cs
    int i = 0; // int型数値代入用（初期値は0としている）
    float f = 0f; // float型数値代入用（初期値は0としている）

    // 通貨型
    i = 12345;
    Debug.Log(i.ToString("c")); // ￥12,345
    f = 1234.567f;
    Debug.Log(f.ToString("C1")); // ￥1,234.6

    // 整数型
    i = 123;
    Debug.Log(i.ToString("d5")); // 00123
    i = -12;
    Debug.Log(i.ToString("D4")); // -0012

    // 指数型
    f = 123.56f;
    Debug.Log(f.ToString("e")); // 1.235600e+002
    f = -0.1256f;
    Debug.Log(f.ToString("E2")); // -1.26E-001

    // 小数型
    f = 123.45678f;
    Debug.Log(f.ToString("f")); // 123.46
    f = 0.1f;
    Debug.Log(f.ToString("F4")); // 0.1000

    // ゼロ型
    i = 123;
    Debug.Log(i.ToString("00000")); // 00123
    f = 123.456f;
    Debug.Log(f.ToString("00.00")); // 123.46

    // けた型
    i = 123;
    Debug.Log(i.ToString("#####")); // 123
    f = 0.456f;
    Debug.Log(f.ToString("##.##")); // .46

    // 区切り
    i = 123456789;
    Debug.Log(i.ToString("#,0")); // 123,456,789

    // その他
    i = 123456;
    Debug.Log(i.ToString("[##:##:##]")); // [12:34:56]
    f = 123.456f;
    Debug.Log(f.ToString("##.##円")); // 123.46円

　　// 指定文字埋め
    int i = 123;
    Debug.Log(i.ToString().PadLeft(5, '#')); // ##123
    Debug.Log(i.ToString().PadLeft(5, ' ')); //   123 (123の前に2つの空白)
    Debug.Log(i.ToString().PadRight(5, '*'));// 123**
```
MVCモデル

# MVCモデル
MVCモデルとは...
Model(モデル)・View(ビュー)・Controller(コントローラー)と言う役割の総称です。

・Model
　システムの中でビジネスロックを担当する。
　ビジネスロック→「処理した結果をデータベースへ反映すること」みたいなことです。

　Controllerから受け取った処理に基づいて、必要なデータをDBで参照する。
　そして、DBから取得したデータを一時的に預かりControllerへ渡します。
　※Modelはデータベースそのものではありません。
　コントローラーから受け取った処理からDBのデータを取得する役割です。

　主な処理
　　・データの検索
　　・データの変換
　　・データの検証...など

・View
　表示や入出力といった処理をします。
　コントローラーから渡されたデータをHTMLで表示するなどです。

　主な処理
　　・リクエストを取得する
　　・リクエストをコントローラーへ渡す
　　・コントローラーから受け取ったデータをHTMLなで出力する

・Controller
　ユーザーの入力に基づき、ModelとViewを制御します。
　Viewからのリクエストを受け取り、Modelへのメッセージに変換します。
　そして、レスポンスとして処理後の画面をViewに返します。

　主な処理
　　・ビューからリクエストを受け取る
　　・受け取ったリクエストに基づいて該当するアクションを実行しモデルに伝える
　　・モデリングされたデータをモデルから受け取り、レスポンスとしてビューへ返す。

[![Image from Gyazo](https://i.gyazo.com/e83093ee4179d699230b20ffbb821a84.png)](https://gyazo.com/e83093ee4179d699230b20ffbb821a84)
CloudFront + S3 構成でのリダイレクト設定

# はじめに
当記事はこちらの記事を読んでいる前提で書いてます。
読んでない方は先にこちらをどうぞ

https://qiita.com/yakitatata/items/c432522a865f534b769e

前回の記事ではwwwありとなし、それぞれページにアクセスできている状態ですが、
URLはそのままで口が空いている状態でした。

SEO対策でリダイレクトしたほうがいいという話を聞きますので（知らんけど）
今回はS3 + CloudFrontの構成でリダイレクトするには？
ということで記事を書いていきます。

また前回の記事では画面オペレーションの画像を細かく載せておりましたが、
今回は大幅にはしょって重要な点だけ載せていきます。

# 全体の構成
全体の構成は以下のようになります。

+ Route53
+ CloudFront×2 
+ S3×2 
+ SSL証明書×1

SSL証明書については、
追加ドメインの別名に*.example.comやwww.example.comが設定されている場合は特に触る必要はありません。

前回の記事を参考に作った場合は既にそうなっているかと思います。

# S3の追加

バケット名をwww.example.comで新規作成します。
その他の設定はデフォルトのままで大丈夫です。

作成したバケットを選択し、プロパティ -> 静的ウェブサイトホスティング を編集します。

以下のように、wwwなしのドメインにリダイレクトされるように設定します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238561/1a189a16-2b00-0496-dea2-af2e3a4d26d4.png)|
|:--|


プロトコルオプションはhttpでアクセスされた場合でもhttpsでリダイレクトされるように
httpsを選択しておきます。


# CloudFrontの追加

OriginDomainNameを手動で入力します。
「www.exsample.com.s3-website.us-east-1.amazonaws.com」
のようにドメイン.s3-website.リージョン名.amazonaws.comとします。

今回はバケットのポリシーは設定しません。
（カスタムOriginとみなされて自動的にバケットポリシー部分の選択肢が消えます）

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238561/9b575c2e-369f-d864-5a68-1f3141270b44.png)|
|:--|

CNAMEsにwww.example.comを設定し、SSL証明書は前回の記事で作成したものを選択します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238561/4bc62ab7-0580-abde-bc8c-645a58012d2e.png)|
|:--|

# Route53の編集
wwwのAレコード向き先を作成したCloudFrontに設定してやります。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238561/0b5038f8-0fc3-1278-69a7-dd70777002e0.png)|
|:--|


以上です。これでwwwありがwwwなしにリダイレクトされるようになりました。

# 最後に
なんかこの構成気持ち悪いですよね。
CloudFrontとS3を2つ使っているあたりが・・・
でもこれしか見つけられませんでした。

ソース上でwwwありでアクセスされてたらなしにリダイレクトする
みたいな事が許されるなら前回の記事の構成でもいいと思います。

AWS Amplifyを使わずにS3+CloudFront構成で各1個ずつでリダイレクトを設定できる方法がございましたらご教授ください
OAuth2.0 JWT ベアラートークンフロー メモ

* OAuth2.0 JWTベアラートークンフローについてメモする。

## JWTとは

* JSON Web Tokenの略称。発音は"ジョット"。
* 属性情報（Claim）をJSON構造で表現したトークン仕様([RFC7519](https://tools.ietf.org/html/rfc7519))を指す。
  * 発行者(Issuer)、利用者(Audience)、ユーザー（Subject）などが含まれる。
* 特徴
  * 署名、暗号化ができる。
  * URL-safe(URLとして利用出来る文字だけ構成される)。
* 関連仕様
  * JSON Web Signature（JWS）:JSON構造を使用して署名するための仕様([RFC7515](https://tools.ietf.org/html/rfc7515))
  * JSON Web Encryption（JWE）:JSON構造を用いて暗号化するための仕様([RFC7516](https://tools.ietf.org/html/rfc7516))
  * 署名付きデータの場合はJWS、暗号化する場合はJWEの仕様に基づき、JWTが利用される。

* 用途
  * OAuth2.0 アクセストークンの取得
  * OpenID Connect IDトークン(認証情報に関するクレームを含んだトークン) 　
  * など


## JWT ベアラートークンフロー 

### 概要

* クライアント側で生成したJWTを指定してトークンリクエストを行う。
* システム間連携を行う際に、認証・接続毎にユーザ操作を行うことができない・したくない場合に利用する。

### シーケンス
![JWTBearerFlow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/3583fc94-2492-c2d9-90d9-ab9213ce5216.png)


※Salesforceでのフローを参考に作成。

※署名方式に応じた署名用情報(秘密鍵、証明書）の発行・登録を行う。

#### 1. JWT生成

**1.** JSON形式でヘッダーを定義し、Base64URLエンコードする(`encoded_header`)。以下例。

   ```json
   {
     "typ": "JWT",
     "alg": "RS256"
   }
   ```
**2.** JSONクレームセットを定義し、Base64URLエンコードする(`encoded_claims_set`)。以下例。

   ```json
   {
    "iss": "3MVG99OxTyEMCQ3gNp2PjkqeZKxnmAiG1xV4oHh9AKL_rSK.BoSVPGZHQukXnVjzRgSuQqGn75NL7yfkQcyy7", 
   	"sub": "my@email.com", 
   	"aud": "https://login.salesforce.com", 
   	"exp": "1333685628"
   }
   ```
**3.** エンコード結果を”.”で連結する。

   ```
   encoded_header+"."+encoded_claims_set
   ```

**4.** ヘッダーに指定したアルゴリズムで3の署名を生成し、Base64URLエンコードする(`encoded_signature`)。

**5.** **3**と**4**を"."で連結する。

```
encoded_header+"."+encoded_claims_set.+"."+encoded_signature
```

#### 2. トークンリクエスト

* リクエスト例

  ```http
  POST /token.oauth2 HTTP/1.1
  Host: as.example.com
  Content-Type: application/x-www-form-urlencoded
  
  grant_type=urn%3Aietf%3Aparams%3Aoauth%3Agrant-type%3Ajwt-bearer
  &assertion=eyJhbGciOiJFUzI1NiIsImtpZCI6IjE2In0.
  eyJpc3Mi[...omitted for brevity...].
  J9l-ZhwP[...omitted for brevity...]
  ```

| パラメータ   | 説明                                          |
| :----------- | :-------------------------------------------- |
| `grant_type` | `urn:ietf:params:oauth:grant-type:jwt-bearer` |
| `assertion`  | 1で生成したJWT                                |

#### 3. JWT検証

* デコードし、iss,aud,subなどクレーム値や署名の検証を行う。

## 参考情報

* [JSON Web Token（JWT）の紹介とYahoo! JAPANにおけるJWTの活用](https://techblog.yahoo.co.jp/advent-calendar-2017/jwt/)
* [OpenID Connect Core 1.0 incorporating errata set 1](https://openid.net/specs/openid-connect-core-1_0.html#IDToken)
* [OAuth2 JWT Bearer Token フローを使ってSalesforceへアクセスする](https://qiita.com/stomita/items/4542ce1b48e5fa849ef1)
* [サーバ間インテグレーション用の OAuth 2.0 JWT ベアラーフロー](https://help.salesforce.com/articleView?id=sf.remoteaccess_oauth_jwt_flow.htm&type=5)