OmniAICreator/Qiita-1.07M huggingface dataset:
JavaScriptを使い、ファイルをアップロードする

## 概要

JavaScriptを使い、ファイルをアップロードする。
※実装サンプルはファイルを選択し、読み込みが完了した時点でアップロードするようになっているので注意

## 実装

※書き方が一部Reactになっているので読み替えてください

```jsx:HTML側
<input type="file" accept=".png,.jpg" onChange={this.handleUpload} >
```

```javascript:ファイル読み込み用のReaderを持つ
class Hoge extends React.Component {
    constructor(props) {
        super(props);
        this.reader = new FileReader();
    }

    // handleUpload()...実装は↓参照
    // eventMethod()...実装は↓参照
}
```

```javascript:inputタグからファイルが選択された際にデータを格納する部分
handleUpload = e => {
    const target = e.target;

    // APIコール失敗→ファイル選択→キャンセル押下でundefinedがくるのでその対応
    if (target === undefined) { return; }
    // ファイルアップロード成功→再度、ファイル選択→キャンセル押下でtargetはあるけどfilesが無いでくるのでその対応
    if (target.files.length === 0) { return; }

    const uploadFileName = target.files[0].name; // ファイル名が欲しい場合のみ
    this.reader.readAsArrayBuffer(target.files[0]);

    // ファイルの読み込みが完了した際にイベント発火するので、
    // ファイルの読み込み完了後のハンドラ（eventMethod）を登録する
    this.reader.addEventListener('load', this.eventMethod);
}
```

```javascript:アップロード処理（ファイル読み込み完了した際のハンドラ）
eventMethod = async e => {
    // ファイル読み込みのイベントリスナーをとりあえず削除
    this.reader.removeEventListener('load', this.eventMethod);
    const data = this.reader.result;

    // ファイルのアップロード処理
    try {
        await axios({ method: 'PUT', url: url, data: data, });
        // 事後処理
    } catch (error) {
        // 異常系
        console.error()
    }
};
```

## 参考

* [JavaScriptを使い、multipart/form-dataでファイルをアップロードする](https://qiita.com/k_hoso/items/ba33e394e00a7d18df70)
【search】gem 無し rails 検索機能 実装

#【ゴール】
rails にて部分一致の検索機能の実装


#【開発環境】
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7


#【実装】
1. search controllerの作作成
　※searchアクションも同時に作成しておく

```mac.terminal
$ rails g controller Search　search
```

2.ルーティングを作成　
　※GETメソッドで!!!!

```config.routes.rb
get '/search', to: 'search#search'
```

2.検索フォーム用のviewファイルを作成
　※パーシャルで作成(使い回しが効く為！！)

```view.ディレクトリ内
views
 - search
  |- _form.html.erb #このファイルを新規作成
  |- search.html.erb #コントローラー作成時に同時に作成

```

3.検索フォームを記述
  　※GETメソッドを指定する
  　※今回は　"会員" , "商品"を対象に検索
 　※"hidden_field_tag"を使用し情報だけ送付

```search/_form.html.erb
<%= form_tag(search_path, method: :get) do %>
  <%= text_field_tag 'search[content]' %>
  <%= select_tag 'search[model]',options_for_select({ "会員" => "customer", "商品" => "item" }) %>
  <%= hidden_field_tag 'search[method]', "部分一致" => "partial" %>
  <%= submit_tag '検索' %>
<% end %>

```

4. search controller 記述

　※"会員"、"商品"を選んだ時を "if"で分岐
　※凡庸性が高い、部分一致のみの検索対応 

```search_controller.rb

class SearchController < ApplicationController
   def search
  	@model = params["search"]["model"]
	@content = params["search"]["content"]
	@method = params["search"]["method"]
	@records = search_for(@model,@content,@method).page(params[:page]).per(5)
  end

  private
	def search_for(model,content,method)
		if model == 'customer'
		   method == 'partial'
		   Customer.where('family_name LIKE ?', '%'+content+'%')
	    else
		   method == 'partial'
		   Item.where('name LIKE ?', '%'+content+'%')
		end
	end
end

```

以上
画像アップロードに確認画面を挟む方法

*既に画像投稿機能は実装できているという前提で記事を書いていきます。
画像を確認画面を挟んでアップロードする方法を記述していきます。
以前、画像投稿機能と、投稿確認画面の実装を行った際に、以下のような状況に陥りました。

**・投稿確認画面では画像が表示されるのに、投稿詳細画面では画像がアップロードされていない！**
**・デバッグでconfirmアクション（投稿確認）の挙動を確認すると、imageだけnilと表示されている！**
**・SQL操作にてデータベースを確認してみても、投稿一覧に画像のデータだけ保存されてない！**

これが解決した際のコード記述を以下に載せておきます。

```ruby:_form.html.erb
  <div class="image">
    <%= form.label :image %>
    <%= image_tag(@picture.image.url)if@picture.image&&@picture.image.url %>
    <%= form.file_field :image %>
    <%= form.hidden_field :image_cache %>
    <p><%= form.check_box :remove_image %>画像を削除する</p>
  </div>
  <%= form.submit %>
```

```ruby:confirm.html.erb
<%= form_with(model: @picture, url: pictures_path, local: true) do |form| %>
  <%= form.hidden_field :title %>
  <%= form.hidden_field :content %>
  <%= form.hidden_field :image_cache %>
  <p>タイトル: <%= @picture.title %></p>
  <p>本文: <%= @picture.content %></p>
  <p>
    <strong>Image:</strong>
    <%= image_tag @picture.image.url if @picture.image? %>
  </p>
  <%= form.submit "登録する" %>
  <%= form.submit '戻る', name: 'back' %>
<% end %>
```

```ruby:pictures_controller.rb
def new
  if params[:back]
    @picture = Picture.new(picture_params)
  else
    @picture = Picture.new
  end
  
def confirm
  def new
  if params[:back]
    @picture = Picture.new(picture_params)
  else
    @picture = Picture.new
  end
end

def confirm
  @picture = Picture.new(picture_params)
end

private

def set_feed
  @picture = Picture.find(params[:id])
end

def Picture_params
  params.require(:picture).permit(:image, :image_cache)
end
```

```ruby:routes.rb
Rails.application.routes.draw do
  resources :pictures do
    collection do
      post :confirm
    end
  end
end
```

**ポイント**
・confirm,_form.html.erbにhiddenの記述をすること。
*hidden=隠しデータをサーバーに送信する際に使用する。画面上には表示されないが、value属性で指定した値がサーバーへ送信される。
・image__cache=画像のデータそのものを取り扱うパラメータで、確認画面の実装を挟む際等に使用する。
du コマンド

ディレクトリの一覧を容量と一緒にみる
du -sh ./*/
-s　はsummarise
-h　はhuman readable


そのディレクトリも出す場合
du -sh */　　　　　　　隠しファイルは出ない
du -h --max-depth=1  　 隠しファイルも出る
【今日Javascriptを始めた人向け4】While の基本


[【今日Javascriptを始めた人向け３】](https://qiita.com/TOMARU4400/items/d12fa225222509deecff)の続きです。

Whileを使うことで、「条件が満たされていれば同じコードを実行し続ける」事ができます。


基本構文は以下のようになります。

```javascript:sample.js
while(条件式){
  条件式がtrueの時に実行されるコード
}
```

【例】

```javascript:sample.js

let hoge = 1;
while(hoge <= 5){
  console.log(hoge);
  hoge += 1;
}

```
実行結果は以下のようになります。

```javascript:実行結果
1
2
3
4
5
```



条件式

```javascript
(hoge <= 5)
```
がtrueであれば

```javascript:
console.log(hoge);
hoge += 1;
```

が実行されます。その後再び条件式がチェックされ、trueであればまた実行されます。



##無限ループ

while文を使うときに無限ループに注意が必要です。

次のプログラムは無限ループになります。

```javascript:sample.js

let hoge = 1;
while(hoge >= 1){
  console.log(hoge);
  hoge += 1;
}
```

無限ループは条件式が常にtrueになる場合に発生します。
無限ループはフリーズや故障に繋がりますので注意しましょう！
vmware Horizon 自動デスクトップのパラメーター

デスクトッププールの構成

電源ポリシーURL
https://docs.vmware.com/jp/VMware-Horizon-7/7.11/virtual-desktops/GUID-8540E3C2-FCD5-4EA5-877A-F11BB2FD4FAB.html


ステータス
デスクトッププールを無効にするとは
https://docs.vmware.com/jp/VMware-Horizon-7/7.11/virtual-desktops/GUID-5302A3F3-3EDA-426C-9998-CFDF26A4BD34.html

このページでは状態となっている。ステータスが有効のときはすぐに使える。
無効のときはVMメンテナンスなどに都合がよい
プロビジョニングも停止している

プロビジョニングを無効にするとは
プロビジョニング済みのVMはVDI可能だと思われる。プロビジョニング中の場合プロビジョニングを止めるということだと思われる。
intelliJでJMetroを導入する

# intelliJでJMetro
javafxとJmetroでwin10っぽいGUIをつくる

## 環境
* intelliJ IDEA community 2020.1
* java_version 1.8.0_202
* javaFx 8

## JMetroとは？
![image.gif](https://www.pixelduke.com/wp-content/uploads/2018/08/ToggleSwitch-JMetro-Light-4.1.gif)
![image.gif](https://www.pixelduke.com/wp-content/uploads/2018/08/Slider-JMetro-Dark-4.2.gif)
[JMetroのサイト](https://pixelduke.com/category/metro/)から引用
win10っぽいモダンなGUIが実装できるテーマのようなもの
intelliJ素人なので勘弁してください

## 手順
1. Ctrl + Shift + Alt + Sで設定を開く
2. Library-> +ボタン ->From Maven ...を選択
 ![unknown (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628226/a712adca-4bc1-1ed0-e471-1e30b30cbb14.png)

3. バージョンを確認する
[https://github.com/JFXtras/jfxtras-styles/tags](https://github.com/JFXtras/jfxtras-styles/tags)

4. jmetroで検索してバージョンを選択
![unknown (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628226/990e5f0c-ae1c-9439-7ec1-4ed82c9cac0f.png)

5. インポートする

``` java
import jfxtras.styles.jmetro.JMetro;
import jfxtras.styles.jmetro.Style;
```

6. コントローラ側に以下を追加

``` java
JMetro jMetro = new JMetro(Style.LIGHT);
jMetro.setScene(シーン名);
```

7. 動いたら実装！
Dockerコマンドおさらい① Docker Hub, AWS ECRへのpushもあるよ

やったことの整理を含めてDockerコマンドのおさらいとして書きました
ECRのpushとかも書きました（ECRにリポジトリ作ったら手順は書いてあるものですが...）

## コンテナ一覧表示と削除
- 現在起動中のコンテナの一覧表示  
`$ docker ps`  

```  
★ 使うオプション
停止中を含め全てのコンテナの一覧を表示  
$ docker ps -a

コンテナIDのみを表示  
$ docker ps -q

停止中含め全てのコンテナのIDのみ表示  
$ docker ps -aq

--filter(-f) でコンテナ情報を抽出して表示  
停止中のコンテナ一覧を表示  
$ docker ps -f "status=exited"  
NAMESにmysqlを含むコンテナを表示(=としているが完全一致ではなく、含むものも抽出する)  
$ docker ps -f "name=mysql"
```

- dockerコンテナの削除  
`$ docker rm [コンテナIDs]`

```
★ 使うオプション
コンテナ起動中でも強制的に削除
$ docker rm -f xx1234xx56

コンテナと関連づけられたボリュームも削除
$ docker rm -v xx1234xx56
(volumeはコンテナのストレージでコンテナを削除しても消えない)
```

- 未使用のVolumeを一括削除したいとき
`$ docker volume prune`

- 使われていないコンテナの一括削除
`$ docker container prune`

## イメージの構築と削除
- dockerイメージを構築する  
`$ docker build [path]`

```
★ 使うオプション
イメージ構築時にキャッシュを使わない  
$ docker build --no-cache .
(これを指定しないと、Dockerfileを更新してbuildしてもキャッシュから作られて反映されない)  

build時にタグをつける  
$ docker build -t [名前:タグ] .
```

- 構築したイメージにタグをつける  
`$ docker tag [イメージ名orイメージID] [ホスト名/イメージ名:タグ]`  
タグは何も指定しない場合は `latest` になる

```
$ docker tag 0011ea89b707 mysql:test1.0
$ docker tag mysql mysql:test2.0

★ Docker Hubにpush
Docker Hubにpushする用のイメージとタグはイメージ名:タグの前にユーザー名が必要
形式「ユーザー名/イメージ名:タグ」
$ docker tag mysql koni4/mysql:test3.0
Dockerにログイン
$ docker login
DockerHubにpush
$ docker push koni4/mysql:test3.0

★ ECRにpush
AWS ECRなどプライベートリポジトリの場合
$ docker tag mysql xxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/mysql:test:4.0
AWSにECRのアクセス権限があるユーザーでログイン
$ aws ecr get-login-password --profile ecr-user | docker login --username AWS --password-stdin xxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/mysql
AWS ECRにpush
$ docker push xxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/mysql:test:4.0
```

- ローカルに保存したdockerイメージ一覧を表示  
`$ docker images`  

```
★ 使うオプション
タグ付けされていないイメージを表示  
$ docker images -f "dangling=true"
(タグがnoneになっているものは基本的に使用していないゴミイメージ)
```

- ローカルに保存したdockerイメージを削除  
`$ docker rmi [イメージIDs]`

```
★ 使うオプション
タグがnoneのイメージを一括削除  
$ docker rmi $(docker images -f "dangling=true" -q)
```

- 使われていないdockerイメージの一括削除
`$ docker image prune`  

- 使われていないコンテナ、イメージ、ネットワークを一括削除
`$ docker system prune`
intellij備忘録


# 個人的役に忘れたくないIntelliJメモ

## Tasks編（右横にあるGradle→project name→Tasks→buildの下）

 - clean
 buildファイル全部消してくれる
なんかクリーンになった気分になる

 - build/assemble
とりあえずビルドしてくれる、この二つのタスクの違いは分からない
build/libs直下にjarファイルを作成してくれる
build/classes/java直下にクラスファイル作ってくれる


## ショートカット編

| 目的 | Mac | Windows |
|:------------:|:------------:|:------------:|
|フォーマット  |  Command + Option + L | Ctrl + Alt + L |
| 該当の文字列選択|Ctrl + G |Alt + J |
|ファイル検索|Shift 二回おす| TODO |
|プロジェクト内で文字列検索|Command + Shift + F | Ctrl + Shift + F |
|クラス・メソッド遷移| command + b | TODO |
| ブロックコメント| option + command + / | TODO |
| アプリケーション実行| control + R | TODO |


## 設定編

- プロジェクトごとにタブの色を変える方法↓
![tab.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495707/2dfe90ed-388f-20a7-cedf-75144dcf3a32.png)

`Preferences > Appearance & Behavior > File Colors`

![IntelliJ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495707/1b441e40-55ad-8ada-cbf9-3bae8ab94077.png)
Pythonインストール

#はじめに
こちらではpythonのインストールから構築実行までの説明ができればと思います。

#環境
[VirtualBox](https://www.virtualbox.org/)
[Vagrant](https://www.vagrantup.com/)
[Cent0S7](https://www.centos.org/download/)

[こちら](https://qiita.com/I_S-657/items/63528d09995138c9e46d)で構築の紹介をさせていただいてます参考にどうぞ

#手順
まずはIUSCommunityからインストール

IUS [Community](http://iuscommunity.org/)とは？
定期的にRed Hat Enterprise Linuxとそのクローン向けのRPMパッケージを提供しているコミュニティ。


らしいです。

できるだけ最新のソフトウェアを出してくれるらしいのでインストール

```
$ sudo yum install https://repo.ius.io/ius-release-el7.rpm 
```
今回は3.6をインストール

```
$ sudo yum install  -y sudo yum install  -y python36u-devel python36u-pip6u-devel python36u-pip
```

終わったら確認

```
$ python3 --version
Python 3.6.8
```

#まとめ
いかがだったでしょうかこんどはこのpythonについての備忘録（初心者）を書きたいですね
Python3でthreading処理終了後にis_alive()がFalseでなくエラーになる

#Threadingのis_alive()関数でエラー
`2to3` を使ってPythonでソースを移行していた所

```python
if not self.thread.is_alive():
```

という分岐でエラーが出る様になった。
処理終了後に
2では問題なく `False` が返ってくる。
3では何故か `False` ではなく下記エラーになってしまう。。。

```
Exception has occurred: TypeError
'bool' object is not callable
```

#解決法
`def __init__` 内にて `self._stop = False` を宣言していたのが原因だった。
`except KeyboardInterrupt:` の処理として `self._stop = True` にする様に書いただけだったので、`run()`内では不変の筈なんだけどなぁ。。。
解決したものの、詳しい原因が理解できていないので保留。
わかる方いたら教えていただけると助かります
sudo docker exec -i -t sample_app bash 意味

### sudo
管理者の権限が必要なコマンドをsudoコマンド経由で実行させることができる

### docker exec
対象のコンテナで、対象のコマンドを実行する

### -i
標準入力を開き続ける

### -t 
疑似ttyを割りあてる
ttyとは、標準入出力となっている端末デバイス(制御端末、controlling terminal)の名前を表示するUnix系のコマンド

### -it(-i -tの省略) 
標準入力を開き続け、そこを操作出来るようにする
→手元の環境で、docker内入力ができるようにする

### bash
bashプロセスを新規で立ち上げる
プロセスとは、「実行中のプログラム」
bashはLinuxにおけるデファクトスタンダードになっているシェル
シェルはユーザーの入力をカーネルに伝えまたその逆を行う、いわば両者の橋渡しを行うプログラム
JavaScriptを使い、multipart/form-dataでファイルをアップロードする

## 概要
JavaScriptを使い、multipart/form-dataでファイルをアップロードする。

## 実装

※書き方が一部Reactになっているので読み替えてください

```jsx:HTML側
<input type="file" accept=".png,.jpg" onChange={this.handleUpload} >
```

```javascript:inputタグからファイルが選択された際にデータを格納する部分
handleUpload = e => {
    const target = e.target.files[0];
    // ファイル選択→キャンセル押下でundefinedがくるのでその対応
    if (target === undefined) { return; }
    this.data = target; // this.dataはデータを格納する先なら何でも可（thisじゃなくていい）
}
```

```javascript:実際にデータをアップロードする部分（handleUpload()が実行されている前提）
doUpload = async () => {
    let form = new FormData();
    form.append('image', this.data); // 'image'は multipart の name
    
    try {
        const res = await axios.post(url, form);
        // 以降は必要な事後処理を書くこと
    catch (error) {
        // 異常系
        console.error(error)
    }
}
```

## 参考

* [MDN](https://developer.mozilla.org/ja/docs/Web/Guide/Using_FormData_Objects)
* [[フロントエンド] multipart/form-dataを理解してみよう](https://www.yoheim.net/blog.php?q=20171201)
* [JavaScriptを使い、ファイルをアップロードする](https://qiita.com/k_hoso/items/14447877020f99323672)
parcelでautoprefixerを追加する

.postcssrcと.browserslistrcの2ファイルを追加するだけ

```conf:.postcssrc
{
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}
```

```conf:.browserslistrc
cover 99.5%
```

[postcss](https://parceljs.org/css.html#postcss)
[browserslist](https://github.com/browserslist/browserslist#full-list)
個人的WordPressのDBバックアップ用npmスクリプト

WordPressのデータベースバックアップ・リストアのためのスクリプトのコピペ用覚書です。

前提:
- WordPressがインストールされているディレクトリ `/wp/`
- wp-cli 導入済み

使い方:
- プロジェクト毎にconfig以下を書き換えて使用（`scripts`以下は、環境変えない限り編集しなくてOK）
- `config>{env}>backup`は、バックアップファイルの書き出し先。`wp`ディレクトリからの相対パスで記述
- `npm run db-export:{env}`で`config>{env}>backup`にエクスポート
- `npm run db-import:{env}`で`config>{env}>backup`からインポート

```package.json
{
  "config": {
    "dev": {
      "host": "example.local",
      "backup": "../_assets/database/dev.sql"
    },
    "prod": {
      "host": "example.com",
      "backup": "../_assets/database/prod.sql"
    },
    "stg": {
      "host": "stg.example.com",
      "backup": "../_assets/database/stg.sql"
    }
  },
  "scripts": {
    "db-export:dev": "cd wp; wp db export $npm_package_config_dev_backup",
    "db-import:dev": "cd wp; wp db reset --yes; wp db import $npm_package_config_dev_backup",
    "db-export:prod": "cd wp; wp search-replace $npm_package_config_dev_host $npm_package_config_prod_host; wp db export $npm_package_config_prod_backup; wp search-replace $npm_package_config_prod_host $npm_package_config_dev_host",
    "db-import:prod": "cd wp; wp db reset --yes; wp db import $npm_package_config_prod_backup; wp search-replace $npm_package_config_prod_host $npm_package_config_dev_host",
    "db-export:stg": "cd wp; wp search-replace $npm_package_config_dev_host $npm_package_config_stg_host; wp db export $npm_package_config_stg_backup; wp search-replace $npm_package_config_stg_host $npm_package_config_dev_host",
    "db-import:stg": "cd wp; wp db reset --yes; wp db import $npm_package_config_stg_backup; wp search-replace $npm_package_config_stg_host $npm_package_config_dev_host"
  }
}
```
コンピュータの回路について調べてみた件

どうも初めまして！　

最近基本情報技術者の資格取得に向けて勉強中な駆け出しエンジニアのワカです。

#■この記事を書こうと思ったきっかけ
最近書籍を購入して勉強しているのですが、暗記ばかりでなかなか身にならないと思いました。

そこで基本情報に書かれている内容を自分なりに解釈したものをここに備忘録として書き残すことにしました。
そうすれば手も動かせるし人にみられると思うとその分責任感出ますしね！

あと個人的に今自作PCを作りたいとも考えているのでこの機会に詳しくなっとこうと思ったのも理由の一つです笑

もしかすると間違っている点などあるかもしれませんので、その時は指摘していただけると嬉しいです。

#■コンピュータ回路


コンピュータの中では論理回路と呼ばれる演算を行う回路の組み合わせによって制御を行っています。
論理回路と言っても難しくはありません。一つ一つの回路はただ単に電気がONになっているかOFFになっているかの２択を区別しているだけです。

しかしこれがいくつも組み合わさることによって複雑な制御を可能にしているわけなんです。

##論理回路の種類

回路の種類にはいくつかありそれらは以下の通りです。

| 回路名 | 論理式 |説明 |
|:-:|:-:|:--|
|  論理積回路（AND） |A・B＝Y   |〇〇かつ××|
| 論理和回路（OR）  |A＋B＝Y   | 〇〇または××|
|  否定回路（NOT） |A≠Y   | 〇〇以外|
|  否定論理積回路（NAND）|A・B≠Y   | 〇〇かつ××以外全て|
| 否定論理和回路（NOR）  |A＋B≠Y   |〇〇か××いずれか|
|  排他的論理和回路（EOR、XOR) |A⊕B＝Y   |〇〇ではない |

※○≠△・・・○とは逆の結果（否定形）＝△の意味

##半加算器と全加算器

では上記に説明した論理演算を用いてどのようにして計算処理を行うか説明していきます。

ます２進数の足し算を行う回路のことを**加算器**と呼びます。
この加算器には二つの種類がありますそれが以下の二つです。

**半加算器**・・・下位からの桁上がりを**考慮しない**
**前加算器**・・・下位からの桁上がりを**考慮する**

###【半加算器がどのように動いているか】

２進数を計算するにあたってそのパターンは四つしかありません。
そして出力される２桁目をC、１桁目をSと置くと出力パターンは以下のようになります。

| 入力A | 入力B | 出力C |
|:-:|:-:|:-:|
| ０  | ０  | ０  |
| ０ | １  | ０  |
| １  | ０  | ０  |
| １  |  １ |  １ |

| 入力A | 入力B | 出力S |
|:-:|:-:|:-:|
| ０  | ０  | ０  |
| ０ | １  | １  |
| １  | ０  | １  |
| １  |  １ |  ０ |

実はこれある論理演算のパターンと同じになっているのです！

**出力Cのパターン・・・論理積（AND）**
**出力Sのパターン・・・排他的論理和（EOR、XOR）**

そのため半加算器は「**論理積回路（AND）と排他的論理和回路（EOR、XOR）の組み合わせによって成り立っている**」のです。

###【全加算器がどのように動いているか】

では前加算器についてですが、これは主に半加算器で求めることができる１桁より以降の桁数を求める際に使用する必要があります。

半加算器と比べて違うところは
半加算器がA、Bの二つの入力だったのに対してぜんかさんではそれに新たな入力として前の桁でくり上がりしてくる数として「入力C」を追加で加えなければいけません。

つまりこういうこと
**半加算器・・・入力A ＋ 入力B ＝ 出力C S**
**前加算器・・・入力A ＋ 入力B ＋ 入力C = 出力C S**

こうみると新たな入力Cによって全く異なる考え方が必要なように考えてしまいますが、実はそうでもありません。
結局順番に１こずつ計算していけばいいので結局

入力A ＋ 入力B ＝　出力C S
出力CS + 出力C = 出力C S

となるわけで、つまり、「**半加算器を２回使っているだけ**」なのです。

#■最後に

コンピュータの回路について調べていく中で結局のところ突き詰めていけば単純な足し算の組み合わせであることに驚いた。
実際はこの計算を考えられないようなスピードで計算しているのかと思うと正直すごい技術だなと感心してしまう笑

では次回の記事にて！！
PyPy 7.3.1 でリスト内包表記が遅くなくなった件について

# PyPy 7.3.1 でリスト内包表記が遅くなくなった件について

タイトルでもう言いたいことは概ね終わっているのですが…….

[Python 競技プログラミング高速化tips (PythonでAtcoderをやる際に個人的に気を付けてること)](https://juppy.hatenablog.com/entry/2019/06/14/Python_%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E9%AB%98%E9%80%9F%E5%8C%96tips_%28Python%E3%81%A7Atcoder%E3%82%92%E3%82%84%E3%82%8B%E9%9A%9B%E3%81%AB%E5%80%8B#Pypy%E3%81%98%E3%82%83%E3%81%A0%E3%82%81%E3%81%AA%E3%82%82%E3%81%AE) で言及されているように、PyPy のリスト内包表記は遅いという事実がありました.


ところで [https://morepypy.blogspot.com/2020/04/pypy-731-released.html](PyPy 7.3.1 released) に以下のような文があります.

> improved JIT code generation for generators (and generator expressions in particular) when passing them to functions like sum, map, and map that consume them.

リスト内包表記って、ジェネレータ式を list 関数に渡しているだけなような!?

```
$ cat 1.py
n = 10**7

a = [0]*n
for i in range(n):
    a[i] = i*2

$ cat 2.py
n = 10**7

a = [i*2 for i in range(n)]

$ ./pypy3 --version
Python 3.6.9 (2ad108f17bdb, Apr 07 2020, 03:05:35)
[PyPy 7.3.1 with MSC v.1912 32 bit]

$ time ./pypy3.exe 1.py

real    0m0.149s
user    0m0.000s
sys     0m0.000s

$ time ./pypy3.exe 2.py

real    0m0.136s
user    0m0.015s
sys     0m0.000s
```

リスト内包表記のほうが速い!!

```
$ ./pypy3 --version
Python 3.6.9 (1608da62bfc7, Dec 23 2019, 12:38:24)
[PyPy 7.3.0 with MSC v.1911 32 bit]

$ time ./pypy3.exe 1.py

real    0m0.146s
user    0m0.000s
sys     0m0.015s

$ time ./pypy3.exe 2.py

real    0m0.440s
user    0m0.000s
sys     0m0.015s
```

PyPy 7.3.0 ではリスト内包表記が3倍くらい遅い.

AtCoder の言語アップデートは残念ながら PyPy 7.3.0 なんですよね. 悲しみが止まりません.

追記: なお文字列の加算が絶望的に遅いのは健在です.

```
$ cat 3.py
n = 10**5
res = 'a'
for _ in [0]*n:
    res += 'a'

$ time ./pypy3 3.py

real    0m1.476s
user    0m0.000s
sys     0m0.015s

$ time python3 3.py

real    0m0.082s
user    0m0.015s
sys     0m0.062s
```
ElastiCacheのリーダーエンドポイントとphp-fpmについて

ElastiCacheのリーダーエンドポイントを導入し、サービス中に台数を増減させた際の挙動メモ

前提情報
・phpで動くwebサービス
・インフラは全てAWS
・キャッシュはElastiCahceのredisを利用
・非クラスターredisを利用しておりphp側ではホストにリーダーエンドポイントを指定
・redisの接続オプションは「persistent:true」

状況
・セールにより一時的に負荷上昇
・オンサービス中にノード追加を実施
・php-fpmプロセスは「pm.max_children」数分だけ既に立ち上がっておりredisとの接続を1度は確立済み

挙動
・リーダーエンドポイントでホストを指定しているが追加されたノードへはリクエストが振り分けられない
・「persistant:true」としているのでリーダーエンドポイントの先にある特定ノードとの接続情報がプロセスに保存されている状態

対処法
1. 手動でphp-fpmを再起動し全プロセスを作り直す (※ただし瞬断する
2. 1プロセスがpm.max_requests分だけリクエストを処理すれば1プロセスごとに自動で再起動されるので、不急であれば放置

参考
php-fpmの設定
https://hackers-high.com/linux/php-fpm-config/
データロギング用に経過時間を出力（自分用）

# ストップウオッチ

自分用のメモです。

温度などのデータのロギング用のストップウオッチ的なものです。
通常は時刻を記録するのですが、今回は経過時間を記録するために作成したテストプログラムです。


```py:python
import datetime
import time


def main():
    s_time = datetime.datetime.now()
    while True:
        time.sleep(2)
        now_time = datetime.datetime.now()
        time_delta = now_time - s_time
        print(time_delta)

if __name__ == '__main__':
    main()
```

実行結果は、以下のとおりです。

```sh:sh
pi@raspberrypi:~/Works/temp_logger/test $ python stopwatch.py
0:00:02.002138
0:00:04.004865
0:00:06.007525
0:00:08.009917
0:00:10.012274
0:00:12.014638
0:00:14.016988
```

ラズパイにて使用します。
使い方は省略。
bashでサーバ起動、停止sh

## 起動sh
起動時にプロセスIDを補足して、ファイルに吐き出す。

```bash
#!bin/bash
#
起動コマンド &
pid=$!
touch $pid.pid 

```


## 停止sh
*.pidファイルを特定し、それでkillする。その後pidファイルを削除する。
当然、ゴミが残っている状況は想定しない。

```bash
#!bin/bash
#
pidFile=`ls *.pid`
pid=${pidFile%.*}
echo $pid stop server
kill $pid
rm -rf $pidFile
```
Tomcat + WebSocket で 1002 エラー

#結論

WebSocket で 1002エラーが発生するとサーバー側でエラーが発生している可能性が高い。

#経緯


JavaScript に限らないが、WebSocket プログラミングでサーバーから 1002 のエラーコードが返ることがある。

```javascript

ws.onclose = function(event) {
    if (event.wasClean) {
        alert("[close] Connection closed cleanly");
    } else {
    console.log("[close] Connection died " + event.code + "," + event.reason);
    }
};

```

```
[close] Connection died 1002,An unrecoverable IOException occurred so the connection was closed
```

しかしサーバー側(Tomcat 8.5) のコンソールを見ても何も表示されていない。ここでハマった。

（なぜだろう... と半日経過）

サーバー側のコードをよく見ると、NullPointerException になるケースがあることがわかり、修正したところ意図通りに動作するようになった。
NullPointerException が出ているのであればサーバーのコンソールでも出力されてほしいところではある。
開発ツール　基本情報

##開発ツール

###リンカ(Linker)
複数個のコンパイル済みのプログラムや、そのプログラムで使用するライブラリを連結・結合し、
１つの実行可能なプログラムファイルとして出力するソフトウェア

個人的解釈
⇨リンカが、プログラムを動かす際の実行ファイルを作成してくれる（ファイルをまとめてくれる。）



###参考
https://www.fe-siken.com/fekakomon.php
間違いだらけのメモリーの話

# 間違いだらけのメモリーの話 #

---
## レベル等 ##
### 当記事のレベル ###

私が個人的にプログラマーが一般教養として知っておいて欲しいと考える事柄と水準にしています。

とはいえ、プログラマーと言っても、筆者にはいわゆる汎用機系のノウハウが全くないので、いわゆる Unix ライク OS の存在のもと動作するプログラムを書く人に限定します。(リアルタイム系、制御用マイコン等の OS レスな組込み系も)

### 想定する読者 ###

* Lightweight Language (Ruby, Python, etc.) で日々オブジェクトを作っては捨てている(と思い込んでいる)人
* Kubernetes でメモリ配分に頭を悩ませている人

スラブアロケーターとか TLB とか THP とか言っている人は、本記事よりもっと専門的なものを読むことをお勧めします。あるいはマサカリの投擲場としてどうぞ。

---
### 前提知識の確認 ###

* データを取り扱う ≒ 対象のデータをメモリーに保持
* そもそもプログラム自体、起動時にメモリー上へ読み込まれる
* メモリーは OS に依頼して調達(確保)する

---
## ページ ##

---
### 作業に1バイト必要なので OS から1バイトメモリーを確保したとすると、消費メモリーは1バイトだけ増える? ###

---
### 作業に1バイト必要なので OS から1バイトメモリーを確保したとすると、消費メモリーは1バイトだけ増える? :no_good: ###

色々なレイヤーで間違い。

* そもそも、 OS は「ページ」と言う単位でメモリーを管理している。
* 通常のアプリケーションプログラムは、 OS から直接メモリーを確保しない。(詳しくはメモリーアロケーターの項で)

---
### ページ? ###
こんにち広く使われている OS と CPU は、バイト単位のような細かな単位でメモリーを管理するのではなく、ページと言う単位でメモリーを管理しています。

だいたいのケースで 4KiB です。それ以外のサイズを採用しているアーキテクチャーもあるらしいが、実例を聞いたことはないです。(ヒュージページのお話は別の機会に…)

---
## デマンドページング ##

---
### OS から直接メモリーを確保してみた。消費メモリーは直ちに増える? ###

---
### OS から直接メモリーを確保してみた。消費メモリーは直ちに増える? :no_good: ###

晴れて OS から自由に使って良いメモリー領域をもらっても、実は本当にその領域にメモリーがあるとは限りません。
あくまで、 OS は「以降そのメモリー領域にアクセスしたらそこにメモリーがあることを保証」しているに過ぎず、実際に書くなり読むなりすることで初めて、その領域に実際のメモリーがあてがわれます。

これをデマンドページングと呼びます。

---
### 実際にメモリーがどれだけあてがわれているか?  ###

Linux でプロセスのリアルタイムな統計情報を眺めるときによく使われる `top` コマンド。

メモリーに関する列は `VIRT`, `RES`, `SHR` の3つです。 (`%MEM` は割合なので除く)

```console
  PID USER      PR  NI    VIRT    RES    SHR S  %CPU  %MEM     TIME+ COMMAND    
    1 uniquev+  20   0  254196 120812   3116 S   0.0   5.9   0:30.94 ruby       
    9 uniquev+  20   0  325912 110024   2264 S   0.0   5.4   0:23.27 ruby       
   21 uniquev+  20   0   23148   9292   4532 R   0.0   0.5   0:00.25 top        
```

このうち、 `VIRT` が「以降そのメモリー領域にアクセスしたらそこにメモリーがあることを保証」されている量、 `RES` が「実際のメモリーがあてがわれている」量になります。 (`SHR` についてはまたの機会に)

`VIRT` は VIRTual (なんで仮想なのかは次の項で)、 `RES` は RESident (常駐)の略で、 `RES` はコマンドや文献などによって RSS (Resident Set Size: 常駐セットサイズ) とか rsz (Resident SiZe) とも。

---
## 論理メモリーと物理メモリー ##

---
### プログラム内で取り扱ったメモリーのアドレスが例えば 12345 だったとして、それはハードウェアに実装されているメモリーの 12345 バイト目を指している? ###

---
### プログラム内で取り扱ったメモリーのアドレスが例えば 12345 だったとして、それはハードウェアに実装されているメモリーの 12345 バイト目を指している? :no_good: ###

前項まででそれとなくほのめかしていましたが、そもそもアプリケーションプログラムが取り扱っているメモリー領域は、ハードウェア的な意味でのメモリーそのものとは直接何の関係もありません。

アプリケーションは論理的なメモリー領域を扱っていればそれでよく、物理的にどのアドレスのメモリーが使用されることになっているかは OS の裁量でうまいことやる、と言うスタンスです。

前者を論理メモリー(or 論理アドレス or 論理ページ), 後者を物理メモリー(or 物理アドレス or 物理ページ)と言います。

---
### スワッピングないしページング ###

頭の良い人なら、「論理メモリーと物理メモリーに直接の関係がないのなら、論理メモリーにあてがわれている物理メモリーを一時的に剥奪してストレージに保存するなりで内容を保全した上で別のプログラムに融通できるのでは?」と考えるかもしれません。

---
### スワッピングないしページング ###

まさにその通りで、それを具現化したのが「スワッピング」、あるいは今風な用語では「ページング」と呼ばれる機構です。(名前のとおりっぷりは何故か前者の方が良い様子)

このスワッピングが起こると、物理メモリーを剥奪される側(スワップアウトorページアウト)は見かけ上 RSS が減少します。

逆に、かつて物理メモリーを剥奪された側が再び問題のメモリー領域をアクセスしようとすると、 OS によってそれが検知されて、別の物理メモリーが都合され、元々の内容がストレージから読み込まれた上で処理が続行されます。(スワップインorページイン)

---
## GC ##

---
## メモリーアロケーター ##
データベース　基本情報メモ

##関係データベースの正規化

###第一正規化
　繰り返し項目をなくす（全ての属性値を単一値にする）

###第二正規化
　主キーの一部によって一意に決まる項目を別表に移す（部分関係従属をなくす）

###第三正規化
　主キー以外の項目によって一意に決まる項目を別表に移す（推移的関係従属を直す）

###参考
https://www.fe-siken.com/fekakomon.php
WP 記事のランキング（手動）

記事のアクセス数などをプラグインで集計取ってランキング表示、みたいなのはよくあるんですが、**手動でランク付かつ管理画面から編集する**というのをみかけず。

ふと日曜の昼に思いついて月曜にクライアントから即OKもらった案を備忘録で書いとく。


#必要なもの

* WP（v5.3でやりました）
* ACF（無料でOK）

#手順

1. カスタム投稿で「ランキング」を作る。
2. ACFで「関連＞投稿オブジェクト」、単数選択を1位〜任意ランク数分フィールドを作る。「ランキング」に出るようにする。返り値は「投稿オブジェクト」
3. 「ランキング」で記事を作る。タイトルを任意につける。
4. 出力用のテンプレートを作る。「page-ranking.php」とか。
5. 「page-ranking.php」の中をこんな感じに作る

```templete:page-ranking.php
/*
 Templete Name: ランキング
*/


<?php /* 関連投稿を取得 */
  $rank_args = array(
    'post_type' => 'ranking',
    'posts_per_page' => 1/*1記事だけ*/
  );
  $rank_query = new WP_Query( $rank_args ); 
  if(have_posts()):
  while($rank_query->have_posts()): $rank_query->the_post(); /*▽ ループ開始 ▽*/ 
    $rank_1 = get_field('rank_1');
    $rank_2 = get_field('rank_2');
    $rank_3 = get_field('rank_3');
?>

<h1><?php the_title(); /*タイトル出したい時*/ ?>ランキング</h1>
<p><?php the_content(); /*一言コメントとか出したい時*/ ?></p>


<?php if($rank_1): /*1位とする記事を選択していたら*/ ?>
<div>
<div class="rank">1位</div>
<h4 class="title"><?php echo $rank_1->post_title; ?></h4>
<?php if(get_the_post_thumbnail($rank_1->ID)):
  echo get_the_post_thumbnail( $rank_1->ID,'full');
  else: 
?>
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/ranking/noimg.jpg" alt="" />
<?php endif; ?>
</div>
<?php endif; ?>


<?php if($rank_2): /*2位とする記事を選択していたら*/ ?>
<div>
<div class="rank">2位</div>
<h4 class="title"><?php echo $rank_1->post_title; ?></h4>
<?php if(get_the_post_thumbnail($rank_1->ID)):
  echo get_the_post_thumbnail( $rank_1->ID,'full');
  else: 
?>
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/ranking/noimg.jpg" alt="" />
<?php endif; ?>
</div>
<?php endif; ?>

<?php if($rank_3): /*3位とする記事を選択していたら*/ ?>
<div>
<div class="rank">3位</div>
<h4 class="title"><?php echo $rank_1->post_title; ?></h4>
<?php if(get_the_post_thumbnail($rank_1->ID)):
  echo get_the_post_thumbnail( $rank_1->ID,'full');
  else: 
?>
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/ranking/noimg.jpg" alt="" />
<?php endif; ?>
</div>
<?php endif; ?>

<?php endwhile; wp_reset_postdata(); else: /*△ ループ終了 △*/ ?>
<p>まだ投稿はありません。</p>
<?php endif; ?>

```

6.　固定ページを作って、テンプレートで↑のを選択
 
終わり。



過去のランキングを記事として残しておけるし下書きでおいてもおけるので管理しやすいと思います。
【f.attachment_filed】 gem refile 使用時　画像送信ボタン　CSS 変更

#【ゴール】
gemfile 'refile' 使用時の画像送信ボタンのレイアウトを変更

#【開発環境】
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7

#【実装】
アプリケーション内のGemfile内に以下を記述

```アプリケーション内.Gemfile
＃refileをインストール
gem "refile", require: "refile/rails", github: 'manfe/refile'
gem "refile-mini_magick"

＃jqueryをインストール
gem 'bootstrap-sass', '~> 3.3.6'
gem 'jquery-rails'
```

gemfileを対象アプリへ認識させます

```Mac内.terminal
$ bundle install
```

お好きなviewページで以下を入力(これが画像を送信するボタン)

```(お好きな.view)
<div class="item_image_btn">
 <%= f.attachment_field :image %>
</div>
```


ーーここからjQueryを使用しますーー

先ほどのコードを変更

```(お好きな.view.html)
<div class="image_wrapper">
  <div class="item_image_btn">
    <%= f.attachment_field :image id: "file" %>
  </div>
  <div id="img_field" onClick="$('#file').click()" >
    <p>画像選択</p>
  </div>
</div>
```
上記コード解説

画像送信ボタンにidを付与

```
<%= f.attachment_field :image , id: "file" %>
```

上記の送信と下のコードを"id"で紐付け、jQueryもviewファイルにて記述

```
<div id="img_field" onClick="$('#file').click()" >
```

image_filedをcssで変更

```viewに対応している.css

.item_image_btn{
	display: none;
}#元の送信ボタンを隠す

#img_field {
  font-size: 25px;
  font-style: inherit;
  margin: 0 auto;
  color: white;
  background-color: #5bc0de;
  border-radius: 5px;
  width: 300px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
```


以上
Windows版ROS2でtalker/listenerが動作しないときの(経験的な)トラブルシューティングガイド

##はじめに
以前 [ROS2 Windows版のexample実行時にエラーが出たらOpenSSLのバージョンを疑ってみる](https://qiita.com/comocc/items/f9dd3130acdff798d4f9) という記事を書きましたが、動かない状況はこれけだけではありませんでした。
ここに自ら実際に動作検証してうまくいったやり方を載せておきます。

## 変更履歴
* 2020/5/1 手順3の再起動の記述を追加しました。

##前提条件
OS: Windows 10
ROS2: Dashing Diademataバイナリ版を ```C:\dev\ros2_dashing``` 以下にインストールする

##トラブルシューティング手順

1. 公式ページの [Installing ROS 2 on Windows](https://index.ros.org/doc/ros2/Installation/Dashing/Windows-Install-Binary/) に従って各種インストールしてtalker/listenerを動かしてみる。

2. これで問題なく動けば完了。問題が起きたら3へ。

3. (2020/5/1追記) OSを再起動してみる。システムの環境変数が反映されないことがあるかも知れないので。これで問題なく動けば完了。問題があれば4へ。


4. 以下のようなros2コマンドが見つからないエラーの場合は5へ。

    ```
'ros2' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
```
または、以下のようなDLLがロードできない旨のエラーが出たら7へ。

    ```
Failed to load entry point 'info': DLL load failed: 指定されたモジュールが見つかりません。
The C extension 'C:\dev\ros2_dashing\Lib\site-packages\rosbag2_transport\_rosbag2_transport_py.pyd' failed to be imported while being present on the system. Please refer to 'https://index.ros.org/doc/ros2/Troubleshooting/#import-failing-even-with-library-present-on-the-system' for possible solutions
```

5. 新規に管理者モードのコマンドプロンプトを起動して、カレントディレクトリを ```C:\dev\ros2_dashing``` 以外にした状態で ```C:\dev\ros2_dashing\local_setup.bat```  を実行する。

6. その後手順に従ってtalker/listenerを起動する。成功したら完了。問題が起きたら7へ。
7. 開いていたコマンドプロンプトを全て終了してから、```ros2_dashing```フォルダの名前を別の名前(例えば```ros2-dashing```)に書き換えてから5に戻る。ただしこのとき7で ```ros2-dashing```に書き換えた場合は `C:\dev\ros2-dashing\local_setup.bat`を実行する。

## その他
asio などのnupkgを再インストールするときには、 choco uninstall asio  のようにして一旦アンインストールしてから行う。

以上です。
Windows10からWSL 2のgitを使う

# イントロ
Windows Subsystem for Linux 2の導入記事はこちら。GUIの導入方法も説明しています。
↓
[WSL2の導入とGUI環境の構築とsshfsしたものもgnome-openしたい!!](https://qiita.com/momomo_rimoto/items/51d533ae9529872696ce)
おまけ: [WSL(2)上でMuJoCoを動かす(GUIも)](https://qiita.com/momomo_rimoto/items/2841f1f15d364c2377a1)

WSL (2) を使っている方はおそらくほとんどの人がgitをwsl側に導入しているのではないかと思います。そこで今回はWindows 10のシステムからWSL2側のgitを呼び出す方法を紹介します。

# 経緯
PyCharmを使っているのですが、COVID-19の影響で自宅のWindows環境からどうにかPycharmを使いたいという一心でした。普段はUbuntuが多いです。ですので、WindowsにWSL 2 (Ubuntu)を入れています。

# やりかた
世の中には同じことを考えている人はいっぱいいます。wslのgitをWindows側に合わせるためにラッパーするものを作成している人がいます。

https://github.com/andy-5/wslgit

MITライセンスです。
使い方は、READMEのDownloadを見ていただければわかるように、Releaseされているものの実行ファイルをダウンロードすればOKです。もともとのファイル名はwslgit.exeですので、必要に応じてgit.exeに変更してください。また、どこからでも呼び出したかったらファイルのあるディレクトリにパスを通す必要があります。

# おまけ: PyCharmでwsl側のgitを使う
StackOverFlowなどでもWindows側からwslのgitが使えないかはかなり検討されています。そのほかのサイトでもよく検討されており、結局WSL側にPyCharmを入れてXサーバーを用いて起動する…みたいな方法しかない！と言っている人も多くいました。

下記のサイトでは結論が出ています。
https://stackoverflow.com/questions/43666009/using-git-in-windows-subsystem-for-linux-through-intellij
しかし、私の環境ではどれも動きませんでした。回答はみなバッチファイルをがんばっていますが、アップデートとして上記のGitHubのものを利用する方法があがっていました。

## やり方
これだけでできるはずです。
1. 上記GitHubから実行ファイルをダウンロード、適宜好きな場所に移動
2. PyCharmのFile/Settings/を開き、Version Control/gitを開く。Path to Git executableでダウンロードした実行ファイルを選択。Testしてみる。
3. うまくいっている。はず。

以上です！
【boolean型】 viewへの反映、選択機能　実装　　

#【ゴール】
boolean型を使用してviewファイルへ反映させる
参考にしたサイト:http://banker0507.blogspot.com/2012/07/booleantruefalse.html

#【開発環境】
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7

#【実装】

アプリケーションを起動

※新規アプリケーション作成については、[【Rails new】Ruby on rails アプリケーション作成](https://qiita.com/tanaka-yu3/items/3fe1ed2852c6513d3583 )を参照。

```Mac内.terminal
rais g migration Add(データを追加したいデータファイル名)To(追加したいデータ)
```

```add.migartionファイル
 add_column :(データを追加したいデータファイル名) , :sex ,:boolean
end
```


```Mac内.terminal
 $ rails db:migrate　#DBへ反映
```

```アプリケーション内.DB/schemeファイルを確認
 t.boolean :sex #この記述があれば問題なく作成されています
```

```対象の.view
<%= f.select :sex ,[['男性',true],['女性',false]] %>
```

※追記、boolean 型のバリデーションは以下です。
必要な方は是非！！

```対象.model内
validates :sex, inclusion: { in: [true, false] }
```

以上。
【Swift】Swift入門

##【Swift】Swift入門
つまいだところを、書き出しする

##変数宣言
変数だけ、もしくは変数だけを一行にまとめるときは,（カンマ）で区切ることも出来る。

```:エラー
let num01 = 10, var num02 = 5 
````

```:エラーでなければ
let num01 = 10; var num02 = 5 
````

```:エラーでなければ
let num01 = 10, num02 = 5 
````


##型の指定
初期値を設定せずにプログラミングの途中で値を入れることが出来るが、その場合は宣言時に型の指定をしないとエラーになる

```;
ver number:Int
var student:String
number = 30
name = "青木"
```

##データ型
Double型（小数点を扱う型）
Int型（整数値を入れるために使われる型）
同じ式の中で型が異なるとエラーになってしまうので、型変換がある。

```;
let val = 5
//ここでは整数5

let result = Double(val)
//resultには小数に変換された5.0が入る
```

```;
let val = 0.5
//ここでは小数0.5

let result = Int(val)
//resultには小数に整数にへんかんされた0が入る
```

##タプル
```:
var student = ("青木",30)
```

```;
var student:(String,Int) = ("青木",30)
```

```;入れ替えたいとき
student= ("田中",20)
```

##文字列型を数値型に変換する
文字列としてダブルクォーテーションで囲まれた数値を数値型に変換する
オプショナル型の変数だけ
nilを入れる場合には?をつけることでオプショナル型として明確に宣言出来「変数がラップされた」という。
エスケープシーケンスを用いることで、変数や定数の値を文字列内に展開することができます。

```:
let result = num01! + 5
//ビックリマークをつけてはじめて数値として扱える
```

```:
let result1:Int? = Int("30")
let result1:Int? = Int(にじゅう)
```

```
let result = "金額は" + priceStr + "です。"
let result = "金額は\(priceStr)です"
````



##環境構築
なし


##参考文献
この記事は以下の情報を参考にして執筆しました。
[codebelle](https://apps.apple.com/jp/app/codebelle-sukima-shi-jiande/id1072749712)
【Rails】enumの使い方

# 開発環境
・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

# 定義方法

### boolean型

```ruby:~.rb
enum is_valid: { '有効': true, '無効': false }
```

### integer型

```ruby:~.rb
enum drink: { '水': 0, 'お茶': 1, 'コーヒー': 2, 'お酒': 3 }
```

# ビューでの使い方

### 1.プルダウン

```erb:~.html.erb
<%= f.select :drink, Menu.drinks.keys, include_blank: "-----" %>
```

`<%= f.select :カラム名, モデル名.カラム名の複数形.keys, オプション %>`


####**②ラジオボタンで使用する場合**

```erb:~.html.erb
<%= f.radio_button :is_valid, '有効', checked: true %>
```

`<%= f.radio_button :カラム名, key, オプション %>`

#default値について

enumを定義する場合、基本的にdefault値を設定しておく。

```ruby:schema.rb
t.integer "drink", default: 0 # 初期値として'水'が設定される
```
v-ifの描画時のmounted処理をいい感じにしたい

# はじめに
Vue.js では [v-if](https://jp.vuejs.org/v2/guide/conditional.html#v-if) という構文を使うことで条件付きレンダリングをすることができます。

# やりたかったこと
基本的にVue.jsでDOMを直接操作するのはイケてないと思いますが、jqueryでしか作成されていないLibraryを使う際にDOM操作をする必要性が出てきます。[jquery datepicker](https://jqueryui.com/datepicker/)等
`v-if` で宣言したタグの中身のタグに対してDOM操作を描画時に行う際、 その呼び出し元のVue.jsファイルの `mounted()` に書いてもDOMがないので参照エラーにて失敗してしまいます。
なので、`v-if` で宣言しているタグが描画されたタイミング(v-ifの中の式が trueになるタイミング)でDOM操作を実行したいと思いました。


# プロセス
`v-if` で宣言されているタグは vue.js インスタンスとして生成されます(あっているか不安なので指摘あれば)
そのため、 `v-if` で宣言されているタグにも `mounted()` methodを持てると考えました。

そこで、 `<div v-if="条件" :mounted={}>` など色々試行錯誤してみましたが、うまくできませんでした。


# 結論
Vue.jsでは [mixin](https://jp.vuejs.org/v2/guide/mixins.html) という、コンポーネントがもつmethodをオーバーライドする機能があります。
そこで以下のように `v-if` を宣言している、タグ内で `mixin` で `mounted` をオーバーライドすることでやりたいことができました。

```vuejs:sample
<div v-if="条件" :mixins="[{mounted: hogehogeMethod()}]">
```



# さいごに
今回のようなケースの場合はコンポーネントとして独立させるというのが正解だと思います。
しかし、もともとの設計思想ですべてのパーツをコンポーネント化するという設計思想じゃなく、今回のような対応を取りました。

いろいろ調べてみて、私なりに出した結論がこのやり方でしたが、もしもっと良い方法やこのやり方に難点等があればご指摘いただければと思います。
V8時代のGASボイラープレートを作った

# V8時代のGASボイラープレートを作った

V8ランタイムがサポートされてGoogle Apps Scriptで直に新しいJS構文などが利用できるようになりました。
そこで、それらに対応した [gas-vue-boilerplate](https://github.com/fossamagna/gas-vue-boilerplate) というWebアプリを開発するためのボイラープレートを作成しました。
以下の開発ツール、フレームワークを採用していてclaspを使いローカル開発が可能です。

- clasp
- TypeScript
- Webpack
- Vue.js
- Vuetify
- gas-test
- CI/CD (GitHub Actions)

中でも、このボイラープレトでは以下の点についてサポートするようにしました。

- TypeScriptのビルド設定をV8(ES2018）前提にする。
- CI/CDのサンプルと説明を含める。
- フロントエンドの`google.script.run`も型安全で書ける。

## TypeScriptのビルド設定をV8(ES2018）前提にする

`tsconfig.json`を以下のように設定しています。V8ランタイム向けに`"target": "es2018"`としています。
また、`"lib":["ES2018"]` と明示的に`ES2018`のみを指定しています。していないと`"lib": ["dom", "ES2018"]`のように暗黙的に`dom`も含まれてしまい、`@types/google-apps-script`の`Console`の定義と衝突が発生してビルドエラーになってしまうためです。

```json:tsconfig.json
{
  "compilerOptions": {
    "lib": ["ES2018"],
    "typeRoots": [
      "./node_modules/@types"
    ],
    "allowJs": false,
    "outDir": "./dist",
    "target": "es2018",
    "module": "commonjs",
    "declaration": false,
    "sourceMap": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true
  },
  "compileOnSave": true
}
```

## CI/CDのサンプルと説明を含める

GitHub ActionsでCI/CDするサンプルを含めました。デプロイに必要なアクセストークンの設定などについてもREAME.mdに手順を書くようにしました。
このボイラープレトには拙作の [gas-test](https://github.com/fossamagna/gas-test) というテストフレームワークを含めています。`gas-test`はApps Script上で動作すること前提にしたシンプルなテストフレームワークです。この`gas-test`を使ったテストコードをデプロイして実行するまでをボイラープレトに含めています。

また、このボイラープレトでは GitHub Actions のみ含めていますが、CircleCIやTravisCIなどでも同様に利用できます。その場合のサンプルをみたい場合は [gas-test-sample](https://github.com/fossamagna/gas-test-sample) に置いてあります。実際に両方のCIサービスで動作するサンプルとなっているので、実際に使う際に参考になると思います。

## フロントエンドの`google.script.run`も型安全で書ける

[google-script-dts-generator](https://github.com/fossamagna/google-script-dts-generator) を含めています。これを利用するとことで `google.script.run` をTypeScriptで型安全で書くことができます。詳しくは[こちら](https://qiita.com/fossamagna/items/faec03c64dde648b8c81)の記事で紹介しているので、合わせて参考にしてください。

## まとめ

[gas-vue-boilerplate](https://github.com/fossamagna/gas-vue-boilerplate) を利用するとV8ランタイムを考慮してTypeScriptでGASのWebアプリ開発をすぐに始めることができます。CI/CDもできるので素早くモダンなGASアプリを開発できるはずです。
もし使ってみて GitHub の Issue や Qiita のコメントなどでフィードバックをいただけるとうれしいです。
【Go】echoを使ってさくっとRoutingとTemplateを使いこなす

# はじめに
Goはインストールしてあるものとします。

REST APIを作りたい場合はこちらを参考にしてみてください。
[【Go】echoを使ってさくっとAPIサーバを構築する](https://qiita.com/yagi_eng/items/b06722dbd7a5652ec239)

# 準備
## ディレクトリ構成

```
(任意のディレクトリ)
|- views
    |-index.html
|- server.go
|- index.go
```

## echoをインストール
echoをインストールします。

```
$ go get -u github.com/labstack/echo
```

# 実装
以下のように記述していきます。
initRoutingやinitTemplateはmain関数の中にまとめて記載しても問題ありませんが、分けておくとわかりやすいかと思います。

routingを増やしたかったら、

- initRoutingの中に `e.GET("/", hoge)` と一行追記
    - 詳細は[こちらの公式](https://echo.labstack.com/guide/routing)を参考
- hoge関数を作成
- htmlファイルを作成

するだけなので簡単ですね。

```go:server.go
package main

import (
	"html/template"
	"io"

	"github.com/labstack/echo"
)

func main() {
	e := echo.New()
	initRouting(e)
	e.Logger.Fatal(e.Start(":1323"))
}

type Template struct {
	templates *template.Template
}

func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
	return t.templates.ExecuteTemplate(w, name, data)
}

func initRouting(e *echo.Echo) {
	initTemplate(e)
	e.GET("/", index)
}

func initTemplate(e *echo.Echo) {
	t := &Template{
		templates: template.Must(template.ParseGlob("views/*.html")),
	}
	e.Renderer = t
}
```

```go:index.go
package main

import (
	"net/http"

	"github.com/labstack/echo"
)

func index(c echo.Context) error {
	return c.Render(http.StatusOK, "index", "World")
}
```

```html:index.html
{{define "index"}}
Hello, {{.}}!
{{end}}
```

# 実行
プロジェクト配下で以下のコマンドを実行。

```
go run .
```

http://localhost:1323/ にアクセスして「Hello, World!」と表示されることを確認。

# 参考
- [【echo公式】Templates](https://echo.labstack.com/guide/templates)
vue-cliで作成したNetlify Functionsのローカルでの検証環境の注意点

Netlify Functions利用することで、サーバーレスアプリケーションを構築できる。JavaScriptとGoで構築が可能だが、この記事ではJavaScriptのみ説明する。

なおNetlify Functionsは、デフォルトではURLがわかれば、誰でもアクセスできてしまう。アクセスを制限したい場合にはNetlify Identityによる認証などを検討する。

作成したプログラムのテストのときに、プログラムを修正するたびにNetlify環境に適用していては、こまめなテストが難しくなる。そのためNetlify Functionsにはローカル環境でテストをするためのパッケージ(netlify-lambda)が用意されている。このパッケージをインストールすると、ローカル環境でNetlify Functionsが実行できる。

Netlifyのサイトとローカル環境との違いを説明する。

# ポート番号が違うことによるCORS違反

Netlifyのサイトとローカル環境では、webページとファンクションのURLの関係に違いがある。下の表の例のwebページはvue-cliで作成している。ポートはデフォルトとする。

| | webページのURL | ファンクションのURL |
|-----|-----|-----|
| Netlifyサイト | https://サイト名.netlify.app | https://サイト名.netlify.app/.netlify/functions/ファンクション名 |
| ローカル環境 | http\://localhost:<b>8080</b> | http\://localhost:<b>9000</b>/.netlify/functions/ファンクション名 |

Netlify環境ではwepページのURLとファンクションのURLは同じポートである。

ローカルでのテスト環境では、webページとファンクションは別のプログラム(vue-cli-service serveとnetlify-lambda serve)で処理されるため、別のポートを利用する。そのため、webページのJavaScriptからファンクションにアクセスするとCORS違反になる。テスト環境ではレスポンスのヘッダに適切なAccess-Control-Allow-Origin属性を設定する必要がある。

# レスポンスのヘッダのエラー処理

レスポンスのヘッダには、正しくはオブジェクトを設定する。空の場合には{}である。これを誤って空のリスト[]を設定すると、ローカル環境ではエラーにならないが、Netlify環境ではステータスコードが502を返すという、非常に原因がわかりにくいエラーになる。
[Chrome] スクロールすると画面が波打つ　に対処した！

# はじめに
最近古いEIZOのモニタを購入しまして、タイトルの通りの違和感をおぼえ嫌だったのですが、なんとなく気になるようになってきてモニタ新調しちゃおうかなと思ったりしました。その前に重い腰を上げて調べてみました。`モニタ スクロール　波打つ`で検索すると同じような症状の方がいるじゃありませんか。調べてわかったことがChromeの`Smooth Scrolling`という機能でした。

# 解決方法

Chromeの検索バーに`chrome://flags`と入力します。そうするとExperimentsが開くと思います。ページ上部にある`Search flags`で`scroll`と入力すると、`Smooth Scrolling`という項目がヒットしますので、こちらを`Disabled`にして完了となります。

**流れ**
- 検索バー >> chrome://flags
- Experiments >> Search flags >> scroll
- Smooth Scrolling >> Disabled
仮想環境でNode.jsを始めた

#はじめに
この記事はなんとなくJSとかを勉強している学生がメモ代わりに記録しているものです。内容は期待しないでください。

#仮想環境でコンソールを起動する
今回はUbuntuで行うのでiTerm2で仮想環境を起動するよ。

起動したところで
1.Virtual Box(バーチャルボックス)
2.Vagrant（ベイグラント）
という2つのソフトウェアを使った仮想環境でUbuntuを使用します。
cd ~/vagrant/ubuntu
vagrant up
vagrant ssh

Ubuntuがインストールされたディレクトリに移動。vagrant upは仮想的なPCにインストールされたUbuntuを起動するコマンドで,vagrant sshはVagrantの仮想マシンがセットされている状態でSSHに接続します。

#Node.jsを使ってみる
コンソールに
```node
```
と入力すると,コンソールがjsを受け付ける状態になります。これはREPLという状態です。
今回実装するディレクトリに保存しているnode.jsのファイルを以下に記述します。
```'use strict';
const n = process.argv[2] || 0;
let sum = 0;
for (let i = 1; i <= n; i++) {
  s = s + i;
}
console.log(s);
```
1行目はJSをstrictモードで利用するための記述で,2行目はnという変数に```process.argv[2] || 0
```以上のような値が代入されます。process.argvはNode.js プログラムから、コマンドライン引数を取得します。argv[0] には node 実行ファイル (node.exe) のフルパス、argv[1] にはスクリプトファイル (.js) のフルパスが格納されているため,格納できるのはargv[2]からです。||はJSの論理演算子のORで左側をtrueと見ることができる場合は、左側を返します。そうでない場合は右側を返します。真偽値と共に使われた場合演算対象のどちらかが true ならば、|| は、true を返し、両方とも false の場合は、false を返します。
3行目はsという変数を指定し4行目以降はfor文を使ったループを書いています。ループはiがコマンドライン引数の値になるまで続きます。
最後にコンソールにsの値を表示して終了です。

仮想環境のコンソールに以下を記述して値が表示されていれば成功です。お疲れ様でした!!!
```node ファイル名　コマンドライン引数
```


###REPLとは
REPLにおいてユーザーが1つ以上の式を入力すると、インタプリタがそれを評価し結果をコンソールに表示する。静的型付け言語のREPLでは、型安全性を維持したまま、動的型付け言語の手軽さを享受することができるが、統合開発環境に搭載されているREPLの中には、コードエディター上で動作するものと同様の本格的なコード補完が機能するものもある。

###コマンドライン引数とは
コマンドラインはキーボードだけで操作する画面,引数はプログラムや関数に渡す値です。つまりコマンドライン引数と言った場合はプログラムに渡す値だと解釈してください。
【ふくだ学習録】サブスクリプション part4【45日目】

# ふくだ学習録とは？
ふくだが学習したことの備忘録。
目に見える形で残すことによってやる気を出す個人的な作戦です。
他人に見せるように書いているわけではないので、すごく読みにくいです。

### 読了した本
[データベースエンジニア養成読本 [DBを自由自在に活用するための知識とノウハウ満載!]](https://www.amazon.co.jp/dp/4774158062/ref=cm_sw_r_tw_dp_U_x_FPphEbQFPPQRM )
[ゼロから作るDeepLearning](https://www.amazon.co.jp/dp/4873117585/ref=cm_sw_r_tw_dp_U_x_y3UiEbF3P6EG7)
[PHPフレームワーク CakePHP 3入門](https://www.amazon.co.jp/dp/4798048577/ref=cm_sw_r_tw_dp_U_x_.YIjEbS1K4JY2)
[SQLアンチパターン](https://www.amazon.co.jp/dp/4873115892/ref=cm_sw_r_tw_dp_U_x_XlokEbJQK2N7P )
[Docker入門](https://www.amazon.co.jp/dp/480071091X/ref=cm_sw_r_tw_dp_U_x_xVlmEbN8ZTHZK)
[PHPフレームワーク Laravel入門](https://www.amazon.co.jp/dp/4798052582/ref=cm_sw_r_tw_dp_U_x_zzeyEbJBSQ5Y0 )


### 今読んでいる本

[サブスクリプション](https://www.amazon.co.jp/dp/B07HY1TND9/ref=cm_sw_r_tw_dp_U_x_lp4NEb3EEGD7Y)

# 第8章 所有から利用へ - あらゆるビジネスに広がる成長機会

### 金融業界
これまでの銀行では、顧客との関わり方はリアルな銀行の窓口ぐらいしか考えていなかった。
そのため、デジタルのみで完結するサービスは全業務の内7%ほどしかなかった。
今は様々な業務をデジタル内で完結させるサービスが多く出てきている。

# 第9章 企業がサブスクリプション・モデルを選択するとき

### サブスクモデルへの移行時は、社内で批判・不安の声が上がる
企業としてサブスクリプションモデルへ移行するとき、社内からは批判・不安の声が上がることになる。
例えば、マーケティング部門は発売日に向けた集中的なキャンペーン告知方式をやめなくてはならないし、開発部門は制作スケジュールを一から立て直さなくてはならない。IT部門も、多額の資金を投資したシステムを作り直さなくてはならないかもしれないから。

### サブスクモデルを根付かせるには
ゲームプレイヤーが「顧客」となることを認識させ、チーム体制や意思決定方式を変更しなければならない。
![ゲームプレイヤー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356866/af366187-e3ff-3d14-ec42-8e8c24567a0d.jpeg)

#### 開発チーム
「作って売る」という考え方をやめなければいけない。
「ユーザーが必要な体験を提供する」という考え方を持って、それに徹していくことが求められる。

#### 財務チーム
顧客獲得コスト、生涯顧客価値、年間定期収益、顧客1人あたりの平均収益をメトリクスとし、プライシング（価格設定）、パッケージング、アクセス解析などのオペレーションメトリクスを行なっていくことが求められる。

#### ITチーム
これまでのITチームは、業務の標準化による効率向上を求めてきた。
サブスクモデルとなることで、顧客との情報を管理するだけの部門から、イノベーションを起こすためのアイデア源と変わっていくことが考えられる。データを活用しイノベーションを起こせる様になろう。

#### 営業・マーケティングチーム
見込み顧客から優れた情報を多く手に入れることができると認識して行動していくことが求められる。

### チームの壁を壊すことが重要
これまでの製品ファーストでのビジネスでは、製品ラインを中心にしているため、本来一丸となる各チーム（開発、財務、IT、営業など）がバラバラになってもある程度機能していた。
ただしこれからの顧客ファーストのサブスクモデルへ移行していくには、各チーム全てが「顧客に素晴らしい体験を産むためにはどうすればいいのか？」という視点で行動していくことになるため、チームを1つにまとめ直さなければいけない。

# 第１０章 イノベーション 永遠のベータ版にとどまれ

### BETA版の概念を変えたGmail
今までBETA版とは「最終的な準備が整う前に、顧客利用を通じてフィードバックを集める、未完成のプロダクト」という認識だった。しかしGmailは「最終的な製品」という概念を無くしてしまった。Gmailチームは「自分たちが作っているものは静的なものではなく、生きて呼吸するもの。最終的な製品というものは無い」という考え方に気づかせてくれた。

### アジャイル・ソフトウェア開発宣言
２００１年にユタ州に集まった開発者グループによってまとめられたもの。
①プロセスやツールよりも個人と対話を
②包括的なドキュメントよりも動くソフトウェアを
③契約交渉よりも顧客との協調を
④計画に従うことよりも変化への対応を


# 今日の一言
特に最後の、アジャイルソフトウェア開発宣言の②は刺さった。
ソースコード自体も完成品が無いのだから（常にBETA版なのだから）ドキュメントを完璧に作ることを求めなくていい。それよりも製品を動かすことが重要。って感じかな？
ドキュメントは最低限にして開発していこう。
Spring Boot + Spring SecurityでRequestのBodyを複数回読み取る方法

# はじめに
Spring Securityの認可処理（投票クラスなど）において、
RequestのBodyを参照しなければならないケースが存在すると思います。
(例 POSTやPUTでDBを更新する場合など

しかし、HttpServletRequestクラスにおいて、
Bodyはストリームであり、読み取りは一度きりとなります。

そこで今回はBodyを複数回読み取る方法を紹介していきます。

## やりたいこと
①Bodyから読み取った情報を保持
②Bodyの取得元を①の情報へと差替え

## 差替え用クラスの準備
Streamクラス
HttpServletRequest.getInputStream()コール時の戻り値の型とし、
初期化にはbyte配列を使用

```java:BufferedServletInputStream.java
public class BufferedServletInputStream extends ServletInputStream {

	private ByteArrayInputStream inputStream;

	// byte配列で初期化
	public BufferedServletInputStream(byte[] buffer) {
		this.inputStream = new ByteArrayInputStream(buffer);
	}

	@Override
	public int available() throws IOException {
		return inputStream.available();
	}

	@Override
	public int read() throws IOException {
		return inputStream.read();
	}

	@Override
	public int read(byte[] b, int off, int len) throws IOException {
		return inputStream.read(b, off, len);
	}

	@Override
	public boolean isFinished() {
		return false;
	}

	@Override
	public boolean isReady() {
		return false;
	}

	@Override
	public void setReadListener(ReadListener listener) {

	}
}
```

HttpServletRequestのラッパークラス


```java:BufferedServletRequestWrapper.java
public class BufferedServletRequestWrapper extends HttpServletRequestWrapper {

	private byte[] buffer;

	public BufferedServletRequestWrapper(HttpServletRequest request) throws IOException {
		super(request);

		// Request BodyからStreamを取得
		InputStream is = request.getInputStream();

		// Streamをbyte配列に変換し、インスタンス変数に保持
		ByteArrayOutputStream baos = new ByteArrayOutputStream();
		byte buff[] = new byte[1024];
		int read;
		while ((read = is.read(buff)) > 0) {
			baos.write(buff, 0, read);
		}

		this.buffer = baos.toByteArray();
	}

	// Bodyの取得元をこのメソッドに差替え
	@Override
	public ServletInputStream getInputStream() throws IOException {
		// Streamクラスを初期化して返却
		return new BufferedServletInputStream(this.buffer);
	}
}
```

## 実際に差替える
Filterクラス
OncePerRequestFilterにより、リクエスト単位に差替えを実施

```java:MultipleReadEnableFilter.java
@Component
public class MultipleReadEnableFilter extends OncePerRequestFilter {

	@Override
	protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {

		// HttpServletRequestからラッパークラスを初期化
		HttpServletRequest wrappedRequest = new BufferedServletRequestWrapper((HttpServletRequest) request);
		filterChain.doFilter(wrappedRequest, response);
	}
}
```
Spring Securityの設定クラスで、作成したFilterを設定

```java
// inputStreamを複数回読み込めるようラップ
http.addFilter(multipleReadEnableFilter);
```

## 参考
[山奥通信 増刊号](http://yamaokuno-usausa.hatenablog.com/entry/20090120/1232420325)