OmniAICreator/Qiita-1.07M huggingface dataset:
Dockerでのcomposerのインストールエラーの対処


# 発生したエラー
```bash
$ docker-compose up -d
 ...
ERROR: Service 'web' failed to build: The command '/bin/sh -c php composer-setup.php' returned a non-zero code: 1
```


# 修正前のDockerFile
``` dockerfile
# install composer
RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
RUN php -r "if (hash_file('sha384', 'composer-setup.php') === 'e5325b19b381bfd88ce90a5ddb7823406b2a38cff6bb704b0acc289a09c8128d4a8ce2bbafcd1fcbdc38666422fe2806') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
RUN php composer-setup.php
RUN php -r "unlink('composer-setup.php');"
```

# 修正後のDockerFile
``` dockerfile
# install composer
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
```
ディジタルシグナルプロセッサ(DSP)の特徴

AP試験学習記録27年秋 午前20

ディジタルシグナルプロセッサ(DSP)の特徴として，適切なものはどれか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/1221a09e-10f6-b6ce-8126-0ac5989675ef.png)


１、DSP(Digital Signal Processor)は、
主にリアルタイムコンピュータで使用される、ディジタル信号処理に特化したプロセッサです。

DSPは主に
　・画像処理
　・音声処理
などのディジタル信号処理アルゴリズムの計算処理で使われます。

これらの処理では大量のデータに対して
　・規定時間内に素早く演算を行う必要があるため、
　・専用のハードウェアであるDSPが用いられます。

参照：
https://www.ap-siken.com/kakomon/27_aki/q20.html
【Vue.js】Vue.jsで、forEachを使う時の注意点

Vue.jsで使うthis.dataと、forEach文を活用するときは、注意が必要という記事になります。


#そもそもforEach文とは

```javascript:

// 配列を繰り返す
offices.forEach(function(office){
  console.log(office)
})

// 繰り返す配列を、thisで取得する
offices.forEach(function(office){
  console.log(this)
}, offices)
```

第一引数にはコールバック関数を、第二引数には繰り返す配列を定義することで、thisとして取得できる。

##結論：forEachのthisと、Vue.jsのthisは別物

forEach文内でのthisは、繰り返す配列のことを指してしまうので、直接格納することができない

```javascript:

// エラーになる
offices.forEach(function(office){
  this.array.push(office)
})
```

#配列の要素を、this.dataの配列に格納したい

以下のような、Vueインスタンスのデータがあるとする。

```javascript:
data () {
  return {
    holidays: [],
  }
}
```

そして、以下のレスポンスデータを取得して、Vueインスタンスのデータに格納したい。

```json:
[
    {
        "id": 1,
        "name": "owada"
        "regular_holidays": [
            {
                "id": 1,
                "holiday": "mon"
            },
            {
                "id": 2,
                "holiday": "tue"
            },
            ・・・省略
        ],
    },
    ・・・省略
]
```

### 配列の中のオブジェクトの中の配列の要素を、格納したい時

つまり、`"regular_holidays"`の要素群を`this.data`に格納する

```javascript:
this.holidays = res.data.regular_holidays.map((day) => day.holiday);
```



### 配列の中のオブジェクトの中の配列の中のオブジェクトの値を、格納したい時

つまり、`"regular_holidays"`の要素のオブジェクトキーである`"holiday"`を`this.data`に格納する

```javascript:
const holidays = [];

this.offices.forEach(function (office) {
  office.regular_holidays.forEach(function (day) {
    holidays.push(day.holiday);
  });
});

this.holidays = holidays;

```

forEach内で、this.dataを取得できないので、うまく工夫する必要がある。
AWS Database資格に合格しました

# はじめに
今日（10/11）に「AWS Certified Database - Specialty」資格（以降DBS）に受かりました。
個人的にはANS（Network）やSAPほど難しい試験ではないと思っていましたが、スコア的にはぎりぎりだったので、1/2まで絞り込んでどっちかわからない、という問題を落としまくったのだと思います（それでも簡単な部類に入る試験だと思っていますが）
誰かの役に立てば幸いです。

※過去の記事
[AWS SAAに受かった話](https://qiita.com/kkino1985/items/85bcfa50686fcfe69c56)
[AWS SOAに受かった話](https://qiita.com/kkino1985/items/295509d3d94c726ae56a)
[AWS DVA(とCLP)に受かった話](https://qiita.com/kkino1985/items/8f3db5e102876cca47b1)
[AWS SAPに受かった話](https://qiita.com/kkino1985/items/7ad6bcdde44a2b4e4916)
[AWS SCSに受かった話](https://qiita.com/kkino1985/items/7182ada488b60d196ec5)
[AWS ANSに受かった話](https://qiita.com/kkino1985/items/1976c5a55f4047dc5385)

# 獲得スコア
|受験日|スコア/合格点/満点|結果|
|:--|:--|:--|:--|
|2020/10/11|756/750/1000|合格|

# 勉強に使った教材
※いつものようにBlackbeltとWhizlabsは省略

## AWS Summit 2020/2019資料
AWS SummitではDB関連のセッションが豊富なので、Auroraはそれなりに知っていてもDynamoDBのことはよくわからない人（＝自分）はセッション動画を1.5倍速で流すだけでもかなり勉強になります。
（自分はDynamoDBとDBマイグレーションのセッションを何回か見直しました）

[AWS Summit 2020セッション一覧](https://resources.awscloud.com/aws-summit-online-japan-2020-on-demand)
[AWS Summit 2019セッション一覧](https://aws.amazon.com/jp/summits/tokyo-osaka-2019-report/)

## Amazon RDS Online Seminar
Auroraを詳しく勉強したい人は、9/10のオンラインセミナー資料と動画が公開されています。
試験ではAuroraのアーキテクチャーを知っている前提の問題が出るので、こちらも非常に参考になりました。
（RDSプロキシは範囲外だと思いますが、実務としては使えるので損はないかと）

https://aws.amazon.com/jp/blogs/news/amazon-rds-online-seminar1-qa-202009/

# 試験の所感
- 簡単な問題と難しい問題が混在しており、難易度はかなりばらつきがある
    - 簡単な問題を拾うだけでも合格する可能性まである？
- 問題はAuroraとRDSとDynamoDBが8割ぐらい
- Elasticacheもそれなりに出る
- AuroraとDynamoDBはかなり突っ込んだ問題が出るので、固有の機能は理解しておく
- AuroraとRDSでできること・できないことの違いは把握しておく
    - RDSの場合はDBエンジンの違いも（移行時の制約など）
- Neptune、QLDB、DocumentDBも概要ぐらいは覚えておく
- DB移行は要件ごとに適切な機能・サービスを選べるようにしておく
- 忘れた頃にCloudformation
    - ただしそこまで深くは聞かれない
- DBの認証情報管理をどこに持たせるか問題
    - アプリやCfnのコードに直接書くのはベストプラクティス的に論外なので、IAM認証やSecret Managerなどで管理
コンパイラが行う最適化方法

AP試験学習記録27年秋 午前19

目的プログラムの実行時間を短くするためにコンパイラが行う最適化方法として，適切なものはどれか。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/58882e42-4dd1-b8b6-9f6c-ec41bbbb5c3b.png)


１、コンパイラは、
ソースコードを翻訳して、機械語の目的プログラム(実行ファイル／ロードモジュール)を生成する言語プロセッサです。

実行ファイルを生成する前のソースコードを機械語に翻訳する過程において、ソースコードの解析が行われ、効率的、かつ、実行時間やメモリ使用量などを最少化するようにソースコードを調整する最適化処理が行われます。

２、最適化方法

＜ループ展開：繰り返しループが一つループに置き換え＞
・繰返し回数の多いループは，繰返し回数がより少ないループを複数回繰り返すように変形する。例えば，10,000回実行するループは，100回実行するループを100回繰り返すようにする。
　→×。繰返し回数の多いループに対しては、ループの中身のコードを複数回配置してループ条件のチェック回数を減らしたり、分岐回数を減らすことによってオーバーヘッドを低減させる「ループ展開」と呼ばれる最適化が行われます。

※一つのループが繰り返しループより、チェック開始、分岐回数が低減できる。

＜演算子強度低減：乗算から加算に置き換え＞
・算術式の中で，加算でも乗算でも同じ結果が得られる演算は乗算で行うように変更する。例えば，"X＋X"は"2＊X"で置き換える。
　→×。CPUでは乗算よりも加算の方が高速に計算できます。実際には"2＊X"→"X＋X"というように乗算を加算に置き換える「演算子強度低減」と呼ばれる最適化が行われます。

※加算が乗算より高速計算できる。

＜定数畳み込み or 定数伝播:変更されない変数が定数に置き換え＞
・定数が格納される変数を追跡し，途中で値が変更されないことが確認できれば，その変数を定数で置き換える。
　→○。「定数畳み込み」及び「定数伝播」と呼ばれる最適化手法です。変数はメモリ上に動的に確保されますが、定数はプログラムコード上に埋め込まれるという違いがあるため、定数は変数よりも高速にアクセスできます。

※定数がメモリに入れる必要ない、変数より高速にアクセスできる。

＜インライン展開：サーブルーチンがマインPGMに展開＞
・プログラム中の2か所以上で同じ処理を行っている場合は，それらをサブルーチン化し，元のプログラムのそれらの部分をサブルーチン呼出しで置き換える。
　→×。サブルーチンの呼び出しには余計なオーバーヘッドが生じます。このため、プログラムの実行に支障がない場合には、サブルーチンをメインプログラム中に展開してしまうことでオーバーヘッドを減らす「インライン展開」と呼ばれる最適化が行われます。

※サーブルーチンがオーバーヘッダがあり、メインPGMに展開すると、オーバーヘッダを避けられる。


参照：
https://www.ap-siken.com/kakomon/27_aki/q19.html
Nuxt.jsでpackage.jsonが見つからないエラーが出るときの対処法

```npm run dev```すると```Error: Cannot find module ‘../package.json’```と言われる

以下のようにnode_modulesを削除して、再インストール（npm install）するもダメだった

```
rm -rf node_modules
npm install
```

ビルドしていないために失敗していたので再ビルド

```
npm rebuild
```

違うプロジェクトファイルいじった後に帰ってきたとき起こってなんでやってなった
【SourceTree,GitLab】「remote: HTTP Basic: Access denied」とエラーが出た際の対処法

# はじめに
学習記録のアウトプット・自分自身の備忘録として書いた記事です。
今回は表題についてのの概要と解決方法についてメモです。

# トラブルの症状
SourceTreeからGitLabを連携した際にpush,pull,fech,cloneをしようとすると「remote: HTTP Basic: Access denied」というエラーが発生して操作ができない。。。

# 解決策
以下記事を参考にトークンを発行して連携のやり直し。
・[GitLabアカウントをSourceTreeに登録する方法](https://qiita.com/TakuyaHara/items/0424e188f5073aa362a5)
「SourceTree - アカウントの登録」する際、会社で契約している場合は``Host: GitLab Enterprise``を選択。

トークンを設定しただけでは今までのローカルリポジトリからの操作は同じエラーが出てしまいます。
そのため再度SourceTree上からクローン。

GitHubと同じ手順でできると思ってましたがGitLabはまた別でした。。。
[Rails] deviseを使って現在ログインしているユーザーの情報を取得する

#回答
####`@user = current_user`でOK

```Ruby
  def index
    @user = current_user
    @gears = Gear.where(user_id: @user.id)
  end
```
#総括
####deviseを使うとログイン周りが楽すぎる:metal:
【python】二次元系　点図形内外問題


考え方は[こちら](https://qiita.com/ShotaSuzuki-jr/items/9757938c520c9ef067b6)をクリック
#環境
python3.7
#問題
以下のような図の__<font color="red">点P</font>__が図形の中か外かを計算する。
![triangle.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676731/24a7551c-4cd5-8882-16aa-e9edd20de6da.jpeg)

__O(0,0)__は__原点__を表している。また、__A(2,2)__、__B(3,1)__、__C(3,3)__は__図形の頂点__を表している。__P(x,y)__は__任意の点__である。
#計算
下図のように__外積の向きが同じ__になるように計算する。
![triangle3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676731/821e1c82-1856-a7e0-cceb-25c0a3d77bc1.jpeg)



座標の定義↓

```python3:
import numpy 

#点Aの座標
A = numpy.array((6, 5))
#点Bの座標
B = numpy.array((3, 1))
#点Cの座標
C = numpy.array((9, 1))
```
外積計算↓

```python3:
#点Pが図形の中にあるかどうか
def p(x, y):
    #点Pの座標
    P = numpy.array((x, y))

    #ベクトルBPとベクトルBAの外積
    abp = numpy.outer(P-B, A-B)
    #ベクトルBCとベクトルBPの外積
    pbc = numpy.outer(C-B, P-B)
    #ベクトルCAとベクトルCPの外積
    apc = numpy.outer(A-C, P-C)

    #ベクトルBPとベクトルBAの外積の行列式
    abp = numpy.linalg.det(abp)
    #ベクトルBCとベクトルBPの外積の行列式
    pbc = numpy.linalg.det(pbc)
    #ベクトルCAとベクトルCPの外積の行列式
    apc = numpy.linalg.det(apc)
    
    #ベクトルBPとベクトルBAの外積の行列式が他の行列式の符号と一致したら、Trueを返す
    if numpy.sign(abp)==numpy.sign(pbc) and numpy.sign(abp)==numpy.sign(pbc):
        return True
    #ベクトルBPとベクトルBAの外積の行列式が他の行列式の符号と一致しなかったら、Falseを返す
    else:
        return False 
```

#すべてのコードと結果

コード

```python3:code.py
import numpy 

#点Aの座標
A = numpy.array((6, 5))
#点Bの座標
B = numpy.array((3, 1))
#点Cの座標
C = numpy.array((9, 1))


#点Pが図形の中にあるかどうか
def p(x, y):
    #点Pの座標
    P = numpy.array((x, y))

    #ベクトルBPとベクトルBAの外積
    abp = numpy.outer(P-B, A-B)
    #ベクトルBCとベクトルBPの外積
    pbc = numpy.outer(C-B, P-B)
    #ベクトルCAとベクトルCPの外積
    apc = numpy.outer(A-C, P-C)

    #ベクトルBPとベクトルBAの外積の行列式
    abp = numpy.linalg.det(abp)
    #ベクトルBCとベクトルBPの外積の行列式
    pbc = numpy.linalg.det(pbc)
    #ベクトルCAとベクトルCPの外積の行列式
    apc = numpy.linalg.det(apc)
    
    #ベクトルBPとベクトルBAの外積の行列式が他の行列式の符号と一致したら、Trueを返す
    if numpy.sign(abp)==numpy.sign(pbc) and numpy.sign(abp)==numpy.sign(pbc):
        return True
    #ベクトルBPとベクトルBAの外積の行列式が他の行列式の符号と一致しなかったら、Falseを返す
    else:
        return False 


print(p(3, 1))#出力結果:True
print(p(2, 2))#出力結果:True
print(p(8,14))#出力結果:False
```

__補足__
__点Pを線上__にあるとした時、点Pは__図形の中にある__ものとして計算している。
【rails】authenticate_user!の使い方

authenticate_user!について学習したため、アウトプットいたします。

authenticate_user!とは？
どうやってauthenticate_user!を使うのか理解できます。


#authenticate_user!とは？
主に2つ理解する必要があります。

・deviseのメソッドである
・ユーザがログインしているかどうかを確認し、ログインしていない場合はユーザをログインページにリダイレクトする。


ではどうやって使うのでしょうか？

#authenticate_user!の使い方の一例

```csharp

before_action :authenticate_user!, except: [:show, :index]
```

基本的にはbefore_actionと一緒に使います。

上記のコードの意味としては、
全てのアクションの前に、ユーザーがログインしているかどうか確認する！
ただし、showアクションと、indexアクションが呼び出された場合は、除くよ。という意味になります。

基本的にindexアクションや、showアクションはログインされていなくてもみられるアプリが多いためです。
（Twitterはログインしていなくても、ツイートの一覧、ツイートの詳細は見ることができる）
Rails新規開発時のスピードを極限まで高めるテンプレートを公開してみた

# これはなに？
Rails の初期設定ってめんどくさくないですか？
`rails new` してからの単純作業。

せっかくスピード感があるフレームワークなのに最初の単純作業はほぼ同じことを毎回していますし、地味に時間もかかるので嫌でした。
今や Docker を使ってサクッと環境を構築するのは当然ですが、それでもやっぱり面倒。

特に、

- RSpecのセットアップ
- devise の設定
- お決まりの Gem を入れる手間

この辺が嫌いでしたし、皆さんにもやって欲しくない！！

**そうだ、テンプレートを作ろう**

んで、どうせなら皆さんにも公開して是非使って頂こう、あわよくば改善案も貰ってしまおうという非常に厚かましい企画となっております。
ちなみに他にもテンプレートを公開されている方はいらっしゃいましたが少し古くなっていますし、Docker を使っていないことも多かったです。

**今回は Docker を使って爆速で Rails 開発を始められるテンプレートを丸ごと公開します！！**

# バージョンなど

- ruby:2.6.6
- rails 6.0.3
- postgresql:12.3

こららのモダンな環境をサクッと構築してすぐに開発に取り掛かれます！！

# どんな人におすすめか
主に個人開発や簡単なRailsアプリをサクッと作りたい場面で有用だと思います。
逆にメジャーとは言え、使わない Gem も入ることになると思うので（最初に取り除けば全く問題ありませんが）、スピード重視じゃない場合には合わないかもしれません。

# 行った設定等の解説
リポジトリはこちらです 👇
https://github.com/tatsuro-m/rails_base_app

基本的には README に手順が書いてあるので問題なく使えると思います。
手順が多いようにも見えますが、本当にすぐに終わります。

- devise の初期設定（rails generate devise:install を実行。viewの生成はしていない。）
- rspec のセットアップ（システムスペックを含む）
- `test` ディレクトリの削除（使わないので）
- `database.yml` の編集（postgresコンテナに設定した環境変数と合わせてあります）
- `.env` の `.gitignore` への追加
- `webpack-dev-server` の設定

こんな感じで Docker イメージをビルドして起動 + 最低限必要なコマンドを何個か打つ
ぐらいでサクッと Web アプリケーションの開発が始められると思います。

## んで、 Gem 何入れたの？
```ruby:Gemfiile
gem 'devise'
gem 'devise-i18n'
gem 'dotenv-rails'
gem 'ransack'
gem 'kaminari'
gem 'carrierwave'
gem 'mini_magick'
gem 'fog-aws'
gem 'rails-i18n'
gem 'draper'
gem 'pundit'
```
デフォルトのものに加えて、こちら入れました。どれも定番ですね。必要な Gem があれば Gemfile に書き込んでから `docker-compose build` でももちろん大丈夫です。


# 今後の改善案など
- CircleCI で rubocop と RSpec を走らせる設定ファイルはもう定番だし入れても良いかもしれない（不要なら消せば良いだけですし） 。。。
- rails が動いているコンテナの中に SystemSpec 起動用の chrome を入れているけど、コンテナを分けるべきかもしれない

他にも何かあればコメントください。PR もお待ちしてます！！

---
どなたかのお役に立てたら幸いです。
【RubyonRails】地域猫を幸せにするサービスを作ってみる

##　はじめに
猫が好きです。
通勤で見かける猫、人の家の猫、癒しです。
幸せな猫が増えて欲しいと切に願っています。
昨年から、近所の駅に黒猫が住み着き、以降その子をダイコクちゃんと勝手に命名し、可愛がっています。

一方、野良猫には手放しに可愛いだけで済まない問題も含まれています。
虐待や無責任な餌やりなど。
地域猫に対する様々な活動がありました。

その中で、TNR活動なるものがあることを知りました。
[さくらねこ♥ＴＮＲとは (TNR先行型地域猫） – どうぶつ基金](https://www.doubutukikin.or.jp/activity/campaign/story/)

このような活動が広まったり、無責任な餌やりによって不幸になる猫が減ることを願い、今回のサービスを考えました。

地域猫を住民でしっかり管理できるようなサービスとなれば幸いです。
##環境
MacBook Air2020
Ruby2.7.1
Rails6.0.3.4
MySQL
##構想
ユーザー（住民）は以下のことが可能です

- 健康状態や食事、去勢手術の状況の情報確認
- 地域猫の餌やりや去勢手術の状況を確認できる
- 地域猫の画像閲覧
- 地域猫の登録
- 地域猫の餌やり情報の登録、画像投稿

##設計(ER図）
![スクリーンショット 2020-10-11 17.41.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639411/97965a4f-b6b6-2aee-a382-c9018bb19560.png)

##最後に
今後、地道に作成していきます。
進捗をお伝えしていくつもりですのでよろしくお願いします。
指定した文字列が、対象の文字コードにおいてサポートされているかを調べたい

指定した文字列が、対象の文字コードにおいてサポートされているかどうかを調べたい場合、`CharsetEncoder.canEncode` を利用すると便利です。これは引数として与えられたメソッドが対象の文字コードでサポートされている場合true、それ以外はfalseを返すメソッドで、たとえば文字列`s`がShift_JISにおいてサポートされているかを調べたい場合は次のように書けばよいです。

```java
String s = "...";
Charset.forName("Shift_JIS").newEncoder().canEncode(s);
```

実際に動いているかを検証する例として、「髙」という漢字を利用します。いわゆる「はしごだか」ですね。この漢字はShift_JISではサポートされていないのですが、その拡張であるWindows-31Jではサポートされています。これを確かめてみましょう。

```java
Charset.forName("Shift_JIS").newEncoder().canEncode("髙");   //=> false
Charset.forName("Windows-31J").newEncoder().canEncode("髙"); //=> true
```

想定通り動作していそうですね(´・ω・｀)

**環境情報:**

```
C:\>javac -version
javac 11.0.3
C:\>java -version
openjdk version "11.0.3" 2019-04-16
OpenJDK Runtime Environment AdoptOpenJDK (build 11.0.3+7)
OpenJDK 64-Bit Server VM AdoptOpenJDK (build 11.0.3+7, mixed mode)
```
設定ファイルの読み込み有無を分かりやすく確認

一般ユーザでnodenvをインストールしてパスを通した後
ちょっとrootで用があってroot→一般に戻った時

```bash
[ec2-user@ip-xxx-xxx-xxx-xxx ~]$ sudo su 
[root@ip-xxx-xxx-xxx-xxx ec2-user]# su shindev

[shindev@ip-xxx-xxx-xxx-xxx ec2-user]# cd
[shindev@ip-xxx-xxx-xxx-xxx ~]# git clone nodenv〜
[shindev@ip-xxx-xxx-xxx-xxx ~]# vi ~/.bash_profile
#PATH=$PATH:$HOME/.local/bin:$HOME/bin:$HOME/.nodenv/bin
#export PATH
#eval "$(nodenv init -)"
#これを追記してnodenvのパスを通した
[shindev@ip-xxx-xxx-xxx-xxx ~]# source ~/.bash_profile
[shindev@ip-xxx-xxx-xxx-xxx ~]# nodenv -v
nodenv 1.4.0+3.631d0b6 #パス通った
[shindev@ip-xxx-xxx-xxx-xxx ~]# exit

[root@ip-xxx-xxx-xxx-xxx ec2-user]# 
#ちょっと用を済ませる
[root@ip-xxx-xxx-xxx-xxx ec2-user]# su shindev
#もう1回一般ユーザにスイッチ
[shindev@ip-xxx-xxx-xxx-xxx ec2-user]# 
[shindev@ip-xxx-xxx-xxx-xxx ~]# nodenv -v
bash: nodenv: コマンドが見つかりません #あら？？
```
bash_profileにバスを通すコマンド入れてるはずなのに読み込まれてない〜
そう言えばbashrcとbash_profileってどういう条件で読まれるのかよく分かってないので
真面目に調べてみる。

## 確認方法
なんのこっちゃないけど各ファイルにechoコマンドを追記。

```bash:bashrc
# .bashrc
echo "~/.bashrc loaded" #これを追記
# Source global definitions
if [ -f /etc/bashrc ]; then
        . /etc/bashrc
fi
```

```bash:bash_profile
# .bash_profile
echo "~/.bash_profile loaded" #これを追記
# Get the aliases and functions
if [ -f ~/.bashrc ]; then
        . ~/.bashrc
fi

# User specific environment and startup programs

PATH=$PATH:$HOME/.local/bin:$HOME/bin:$HOME/.nodenv/bin
export PATH
eval "$(nodenv init -)"
```

これをやっといて一旦rootになってsuコマンドで切り替えてみる。

```bash
[root@ip-XXX-XXX-XXX-XXX ~]# su shindev
~/.bashrc loaded #bashrcだけ読まれた
[shindev@ip-XXX-XXX-XXX-XXX root]$ 
```

## あれ、じゃprofileは？？

```bash
[root@ip-XXX-XXX-XXX-XXX ~]# su - shindev #ハイフン付きスイッチ
最終ログイン: 2020/10/11 (日) 17:12:21 JST日時 pts/0
~/.bash_profile loaded #読まれた！
~/.bashrc loaded
[shindev@ip-XXX-XXX-XXX-XXX ~]$ 
```

ということでした。
suコマンドのハイフンありなしは切り替え後のカレントパスが
そのままか切り替えユーザのホームディレクトリに移動するくらいの認識だったけど、
ちゃんと考えてやらないといけないレベルの話だった。

ハイフン無しはインパーソネートなノリなので
いつもの作業的には基本ハイフンありでやるべきだなと。

**おわり。**
HR図をastroqueryを用いて簡単にプロットする方法

# HR図とastroquery

ヘルツシュプルング・ラッセル図(通称HR図)を [astroquery](https://astroquery.readthedocs.io/en/latest/) という宇宙天文のデータベースを用いてプロットする手法を用いて簡単にプロットを紹介する。苦手意識がある人もとりあえずプロットしてみる親しみが沸くこともあるだろう。

コードだけあればOKな人は、[google Colab](https://colab.research.google.com/drive/1yRu53OF8H7JRPlwGXGoqJXx7Z7FiaDHv?usp=sharing) のページを参照されたい。

## [astroquery](https://astroquery.readthedocs.io/en/latest/)  の install 

``` python:
pip install astroquery
```

で、[astroquery](https://astroquery.readthedocs.io/en/latest/)  を入れる。

## astroquery を用いてデータを取得

データはVizierというデータベースから、

- https://vizier.u-strasbg.fr/viz-bin/VizieR?-source=1239/hip_main

にあるヒッパルコス衛星のデータを使う。

``` python:
from astroquery.vizier import Vizier
v = Vizier(catalog="I/239/hip_main",columns=['HIP',"Vmag","B-V","Plx"],row_limit=-1)
data = v.query_constraints()
vmag = data[0]["Vmag"]
bv = data[0]["B-V"]
plx = data[0]["Plx"]
```

必要なのは、３つだけ。

- Vmag : Vバンドの輝度
- BV : BバンドとVバンドの明るさの比 (B-Vと書くが等級はログなので比であることに注意。)
- plx : [年周視差](http://astro-dic.jp/annual-parallax/)。単に距離の情報が必要なだけ。近傍の星は三角測量で距離を測定しているので、annual parallax から距離に変換する。

である。

オプションの意味は、catalog="I/239/hip_main" でカタログを指定して、columns=['HIP',"Vmag","B-V","Plx"] でコラムを指定して、row_limit=-1 で上限を外してデータを全部取得する。

## HR図を作成

年周視差が、20 ~ 25 mili arcsec (つまり、距離で 40-50 pc 程度）の星についてプロットしてみる。

``` python
def to_parsec(marcsec):
    return 1./(1e-3*marcsec)  # pc
pmin=20 # m arcsec
pmax=25 # m arcsec
dmax = to_parsec(pmin)
dmin = to_parsec(pmax)
dlabel = str("%3.1f" % dmin) + " pc to " + str("%3.1f" % dmax) + " pc"
print (dlabel) 
vmag_cut = vmag[ (plx > pmin) & (plx < pmax)]
bv_cut = bv [ (plx > pmin) & (plx < pmax)]

from matplotlib import pyplot as plt
plt.title(dlabel)
plt.xlim(-0.1,2)
plt.ylim(-13,0)
plt.xlabel("B-V")
plt.ylabel("Vmag")
plt.scatter(bv_cut, -vmag_cut, s=1)
``` 

とすると、

![スクリーンショット 2020-10-11 17.11.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179652/3870cf22-737e-a7d3-1d21-b1ddb06e1a2e.png)

このようにHR図がかける。
距離でカットをしないとどうなるか？はぜひ試してみてください。B-V は、

```math:

B-V \equiv log(Bバンドの明るさ)-log(Vバンドの明るさ) = log(Bバンドの明るさ/Vバンドの明るさ)
```

の意味なので、明るさの比であることにくれぐれ注意しよう。

## 関連ページ

- [python の astroquery を用いた宇宙天文カタログの検索と銀河を用いた簡単なプロット方法](https://qiita.com/yamadasuzaku/items/5b83350ae0d2c1e7e278)
パスの変更忘れに注意します

ルートをresourceで指定し、いざ実行！してみてもformの内容が送信されなかった。
原因はresource通りのパスに書き換えるのを忘れていたからということで
resource通りのパスに書き換えて完了。

まだこういうことがちょくちょくあるのでなくしたい

```php:web.php
Route::resource("posts",PostController::class);
```

```html:edit.blade.php
            //posts/createと指定していた
            <form action="./" method="post">
                @csrf
                <p>タイトル</p>
                <p><input size="30" type="text" name="title"></p>
                <p>コンテンツ</p>
                <p><input size="70" type="text" name="content"></p>
                <p><input type="submit"></p>
            </form>
```
ユースケース記述と記述の注意点

## 概要


[ダイアグラム別UML徹底活用](https://www.shoeisha.co.jp/book/detail/9784798118444)で、ユースケース記述について学んだことを書いていこうと思います。

特にユースケース記述の章では、開発するシステムについて、適切に相手に説明するためにはどのようなことが重要かが書かれていました。
自分に欠けていることだと思ったので、今後の役に立てたいと思います。

## ユースケース記述とは

 ユースケース図とは、主にシステム開発の初期段階で作成されるものでユースケース図と一緒に扱われます。ユースケース図１つにつき、1つのユースケース記述が作成されます。そのユースケースが具体的にどのように振る舞うかを説明したものがユースケース記述です。ユースケース記述はシステムの開発者担当でない人、システム内部に詳しくない人やエンドユーザーでも理解できるような書き方が望ましいです。

### ユースケース記述の項目

|項目|説明|
|:--|:--|
|ユースケース名|ユースケース図についている名前。ユースケース図に書かれている名前と揃える。|
|目的(ゴール)|ユースケースの目的を実行することで達成される結果|
|アクター|ユースケースに関係するアクター|
|開始条件(起動トリガー)|ユースケースが開始される条件|
|事前条件|このユースケースが開始されるときに整っていなければいけない条件|
|事後条件|ユースケースの実行後に期待されている条件。アクターにどのような影響を与えたかなど|
|メインフロー|イベントフローの一つ。ユースケースの実行に伴って起きるアクターとシステムとの間のやり取りのうち、想定通りのもの。この時、事後条件は満たされる。|
|代替フロー|イベントフローの一つ。メインフローの代わりとなる手順。代替フローを実行しても、事後条件は満たされる。|
|例外フロー|イベントフローの一つ。ユースケースの実行が中断せざるを得ないもの。この時、事後条件が満たされない。|
|備考|上記の項目に収まらないような記述や詳細な説明。|
|シナリオリスト|イベントフローの具体例としてよくあるものをリストアップする。|
|シナリオ記述|シナリオリストに書かれたそれぞれのシナリオを記述する。|

## ユースケース記述を書くメリット

　開発者やエンドユーザーがユースケース記述を通してシステムのイメージを共有できる事が大きなメリットです。システムのイメージを明確化することで「システムや機能の対象範囲」や「何を作って、何を作らないか」が決まります。開発の内容が具体的に定義されていると全体像が理解しやすくなります。
　また、実際に開発に入るときは小さな単位で小分けして行うことになるでしょう。ユースケースを一つひとつ実装していき、全てが実現できた時にシステムの完成ということにるので、ユースケース一つひとつをマイルストーンとした開発を行うことも出来ます。（ユースケース駆動開発）
　
## ユースケース記述作成時の注意点

### 厳密に書く
　ユースケース記述は、読んだ人が間違った解釈をしないように厳密な記述をしなければなりません。「適切な」「適当な」「ある程度」などの曖昧な書き方は、読み手に推測をさせることになります。同様に、読み手に文脈から推測させるようなこともするべきではありません。特に「開始条件」「事前条件」「事後条件」はそれぞれの条件を満たしているかどうかをシステム側で定量的に評価しなければならないため、曖昧なままだと開発の工程で解釈の違いが生まれてしまいます。

### 細かく書きすぎない

　ユースケース記述の作成者が技術者であると、システム内部の振る舞いまで書いてしまうことがよくあります。上記で述べたようにユースケース記述は、システムの設計開発の関係者はもちろん、そのシステムの内部に詳しくない人、またエンドユーザーでも読んで理解出来るものにする必要があります。「データベース」「テーブル」「クエリ」「入力フォーム」などが出てきたり、画面遷移について記述がされているとなると、記述が細かくなりすぎている可能性があります。

### 空欄を作らない

　ユースケース記述のフォーマットは項目が多く、なおかつ具体的に記述する必要があります。そのため、内容が決まっていないという理由で記述できない場合がよくあります。そんなときは空欄にせず、`T.B.D(To Be Determindの略)`と記入するようにしましょう。項目について検討した結果、書くことがない場合は「なし」と記載します。項目を空欄のままにしてしまうと現在検討中なのか、それとも検討の結果「なし」となったのかがわかりません。空欄のままにしてしまうことは避けましょう。

### いつまでも書き続けない

 ユースケース記述を明確に記述しようとするあまり、あらゆる事象の検討を網羅したり、`T.B.D`がユースケース記述がなくなるまで次の工程に進まないというプロジェクトの進め方はよくありません。なぜなら、システムは実際に動かしてから課題が表面化することがあるからです。すべてを書き終わるまで次の工程に進まないのではなく、次の作業に着手出来るまでまとまったら、その段階で決まっていない部分は`T.B.D`として次の作業をすすめることも必要です。
ssh client  接続時Warningなどを出さないようにする


ssh接続時に `Warning: Permanently added the RSA host key for IP address 'x.x.x.x' to the list of known hosts.` などのWarningやknown_hostsファイルの更新などを行わないようにするオプション

```bash
ssh -o LogLevel=error -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/nul -o BatchMode=yes -o ConnectTimeout=5 <hostname> <command>
```
(ついでにコネクションタイムアウトを5秒に設定している)
[cakephp2.x] 最新版をサクッとインストール

## cakephpをクローン

ダウンロードしたいディレクリに移動してから以下コマンドを実行します。

```
$ git clone -b 2.x git://github.com/cakephp/cakephp.git
```

cakephp２系の最新版バージョンがダウンロードされます。

## バージョン確認
ターミナルで以下のコマンドを実行します。
※lessで閲覧用表示をしています。抜けるときは`q`を押してください。

```
$ cakephp/lib/Cake/VERSION.txt | less
```


![スクリーンショット 2020-10-11 16.54.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574173/3e3285ed-26e0-148e-b101-25445518c2d6.png)

VERSION.txtの最終行にバージョンNoが記載されています。

## パーミッション設定
cloneする方法では`app/tmp`ディレクトリと、そのサブディレクトリ全てに、ウェブサーバーのユーザによる書き込み権限がない場合があるので、権限を与えます。
`ll`で確認して既に権限があれば問題ありません。

```
# app/tmp配下のパーミッションの変更
chmod -R 775 app/tmp

# app/tmp配下のオーナー値の変更
chown -R ${HTTPDUSER} app/tmp

# app/tmp配下のファイル作成マスク値の変更
umask 000
```

これで完了です。

# 参考
https://book.cakephp.org/2/ja/installation.html
アプリを作り直すときのデータベース消去のやり方

個人開発を行っているときに、いろいろごちゃごちゃになったので一度アプリケーションを消すことにしました。
そこでわかったことを記述したいと思います。
######消す方法には2通りあること
#一つ目の消し方
アプリを消す前のやり方です。
#####消したあとだとこの方法はできません。

```
rails db:drop
```
これで消去することができます。
私もこれを実行しました。
しかし上手くできなかったのでもう一つのやり方を実行しました。

#二つ目の消し方
私はデータベースの管理にsequel pro を使用しているので、sequel proを使った消し方になります。

```
cd
```
で一度ホームディレクトリに戻り

```
mysql -u root
```
でsequel proに入り込み

```
drop database アプリケーション名;
```
と記述するとデータベースを消すことができます。が、なぜかdevelopmentファイルしか消えていなかったので
次は、

```
drop database アプリケーション名_development;
drop database アプリケーション名_test;
```
を入力し無事データベースを消去することができました
【Vue.js】computedがよく分からなかったので調べ直した


Vue.jsを使ってしばらく経ちますが
computed(算出プロパティ)とmethodsとwatchの違いを理解できていなかったので学習しなおしました
https://jp.vuejs.org/v2/guide/computed.html


## computed(算出プロパティ)

```html
<div id="example">
  <p>Original message: {{ message }}</p>
  <p>Computed reversed message: {{ reversedMessage }}</p>
</div>

```

```js
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    //reversedMessageプロパティを定義
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

```
・他のプロパティの値を加工した結果などを保持しておけるプロパティ
・computed: オプション内にプロパティ名を書くことでプロパティを定義することができる。
・function()内には行う処理(計算、データの操作など)を定義し、結果をreturnする
・この例ではreversedMessageプロパティはvm.messageの値を使用している(messageに依存している)
→computedは依存しているデータに変更があった時に自動的に再計算を行い、reversedMessageの値を更新する。


## methods



### computedとmethodsの違い


・computed
データに何らかの計算処理をしたものを**プロパティ**として保持しておき、参照することができる
→結果をキャッシュしており、依存しているデータに変更がないときは計算・値の変更は行わない

・メソッド
呼び出した時に処理を行い、その結果を返すただの**メソッド**
→呼ばれればそのつど処理(計算)を行う


### methodsではなくcomputedを使うメリット
・結果をキャッシュしており、必要な時のみ計算処理を行うので処理が早い
・プロパティとして定義することで可読性があがる


## watch(監視プロパティ)
プロパティを監視し、データに変化があった時に何らかの処理を行うことができる
(メソッドを定義しておき、実行するタイミングを決めるイメージ)


・computedと同じ点
プロパティの変更に応じて処理を行うことができる

・computedと違う部分
処理を行うだけでreturnはしない


・どのように使い分けるのか？
多くの場合では算出プロパティを利用するほうが良いが、
非同期処理や処理を複雑な処理を行いたい時はwatchの方が適している

>watch オプションを利用することで、非同期処理( API のアクセス)の実行や、処理をどのくらいの頻度で>実行するかを制御したり、最終的な answer が取得できるまでは中間の状態にしておく、といったことが可能になっています。これらはいずれも算出プロパティでは実現できません。
ElasticSearchを使用したTweet分析ツール作成方法

# ElasticSearchを使用したTweet分析ツール作成方法

### 対象読者
これからElasticSearchを使用したいと思っている可視化ルール超初心者の方

### 作成物
Twitterデータの中から任意の文字列のTweetを抽出し可視化するツール

### 開発環境
Windowsローカル

### STEP1：TwitterDevelopアカウント登録・API申請
https://developer.twitter.com/en/apps/create

上記URLにtwitterのDevelopアカウント登録とAPI申請を行う。
なぜ使うのか、Twitter機能のどれをどのように使うのかを英文で書かないといけなく
面倒ではあるがネットで検索すると登録・申請フローが詳細に記載されている記事が
割と出てくるので難易度は高くない。

### STEP2：各ソフトのインストール

以下ソフトをローカルにダウンロード

* ElasticSearch
* Kibana
* Logstash

https://www.elastic.co/jp/downloads/
まずは公式サイトにアクセスして上記ソフトをローカルにダウンロード・解凍

### STEP3：logstashの設定ファイルを作成する

```twitter-analysis.conf
input {
  twitter {
    # TwittrAPIの認証
    consumer_key => "認証情報"
    consumer_secret => "認証情報"
    oauth_token => "認証情報"
    oauth_token_secret => "認証情報t"
    # キーワードを指定
    keywords => ["門前仲町","東陽町","南砂町"]
    full_tweet => true
  }
}

output {
  elasticsearch {
    # ElasticSearchのURL
    hosts => ["http://localhost:9200/"]
    # インデックス名
    index => "twitter_cafe"
  }
}
```

### STEP4：各ソフトの起動

* ElasticSearch起動
<pre> $ elasticsearch-7.9.2-windows-x86_64\elasticsearch-7.9.2\bin\elasticsearch.bat</pre>
ブラウザ上で下記が実行できればOK
<pre>http://localhost:9200/</pre>

* Kibanaの起動
<pre>kibana-7.9.1-windows-x86_64\kibana-7.9.1-windows-x86_64\bin\kibana\bin</pre>
ブラウザ上で下記が実行できればOK
<pre>http://localhost:5601/</pre>
![kibana.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592641/775442b0-dc32-51c5-3604-d8d92f58e097.png)



* logstashの起動

<pre>sudo /usr/share/logstash/bin/logstash --path.settings=/etc/logstash/ --path.data ログ保存先 -f 設定ファイル</pre>


### STEP5: Kibana上でindexを作成し、取り込み確認

![kibana2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592641/9445e713-338a-abdf-b5c4-964cea2b20f1.png)

### まとめ

Tweetをキーワード検索してデータ可視化することができた。
応用すれば、現在のトレンドなどを可視化できるかもしれない。
VisionFrameworkとCoreMLで画像解析をするときの流れを図にしてみた

VisionFrameworkとCoreMLを使った画像の解析は、そんなに手順は多くないので、過去のコードを見ればなんとなく思い出せたりしますが、手元に図があると良いかもということで描いてみました。

画像解析と言ってもいろんなパターンがありますが、今回はAppleの公式サンプルである[Recognizing Objects in Live Capture](https://developer.apple.com/documentation/vision/recognizing_objects_in_live_capture)の流れを起こしたものになります。

あと、こちらの記事はVisionFrameworkとCoreMLを使った画像の解析のコードを端的にまとめられていて参照するのにちょうどよいです。
[VisionFrameworkとCoreMLを使用した画像解析](https://qiita.com/iganin/items/102b059bd1be4402dfaa)

**<VisionFrameworkとCoreMLを使った画像の解析の流れ>**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116010/5866e2d4-2542-5e00-b854-374d73fa4e08.png)

iOS開発について発信しています。
NoteではiOS開発について定期的に発信していますので、フォローしていただけますと幸いです。
https://note.com/tokyoyoshida

Twitterでは簡単なtipsを発信しています。
https://twitter.com/jugemjugemjugem
TensorBoard at http://localhost:6006/

```
$ tensorboard --logdir ./
```
と打ち、

```
TensorBoard 2.2.1 at http://localhost:6006/ (Press CTRL+C to quit)
```

が出力されたが、
`http://localhost:6006/`で__tensorboardが見れない__とき。
#環境
自分のPCはwindows
リモートサーバーはlinux
#経緯
__putty__を使い__リモートログイン__をしてサーバーにログインした。
そこで__tensorboard__を使った。
アウトプットされた__サイトにアクセスできなかった__。

#解決策前提
__user__名__remote__で__サーバー__名__server__を使ってリモートログインする。

```
remote@server's password:passward
```

__現在のディレクトリ__に入っている__tensorboard__を起動。

```
[remote@server ~]$ tensorboard --logdir ./
Serving TensorBoard on localhost; to expose to the network, use a proxy or pass --bind_all
TensorBoard 2.2.1 at http://localhost:6006/ (Press CTRL+C to quit)
```

#解決策
<font color="red">あなたのPC</font>のターミナルを開く。
![ssh.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676731/de072bc1-d5d4-5ef3-b7ce-d63204d483ac.jpeg)

__user__名__user__のコマンドプロンプトを開く。このuser名は例。
そして以下のように入力する。

```
C:\Users\user>ssh -L (ポート番号):localhost:6006 (リモート側のuser名)@(リモート側のサーバーのIPアドレス)
```
(ポート番号)には__49513～65535__のような空いているポート番号。
(リモート側のuser名)remoteのような__名前__。
(リモート側のサーバーのIPアドレス)987.098.082.99 のような__数字__。

上記のコードをコマンドプロンプトに打ち込むことで、
http://localhost:(ポート番号)/
からtensorflowが見れる。 

私の場合

```
C:\Users\user>ssh -L 49513:localhost:6006 remote@987.098.082.99
```
[http://localhost:49513/](http://localhost:49513/)からtensorboardが見れる。

__補足__
__(リモート側のサーバーのIPアドレス)__は非常に__プライベート__な数字である。
もし__自分のサーバーでない他のサーバー__にリモートログインするとき、(リモート側のサーバーのIPアドレス)は__見れない__ようになっている時がある。
そのときは、そのサーバーの管理者に(リモート側のサーバーのIPアドレス)を聞こう。
ROSのpackage.xmlとは何者？

# はじめに
ROSの勉強中、package.xmlがどんな働きをしているのかが分からなかったので調べた事をメモ
__※ 勘違いがあるかも__

## package.xmlについて
結論を先に書くと、以下2つの機能を提供する。

* 第3者にパッケージに関する情報(作者や依存パッケージなど)を提供する。
* ROSコマンドにパッケージに関する情報を提供する。

もう少し詳細に書くと

* package.xmlをもつディレクトリがROSのパッケージのルートディレクトリとして認識される。
    * rospackコマンドで表示される依存パッケージ名などはこのファイルの記述が参照される。
    * roscdコマンドで移動する先もこのファイルの場所を元に実行される。
* パッケージ名や作者、パッケージの依存関係などを記述する
    * 自分だけで使う分には一部記述を除いてCMakeLists.txtと違っいても良い。
    * ただしaptやgithub等で第3者に公開する場合、異なる記述があると使用者が混乱するので一致させる。
* ビルドの依存関係の記述はなくてもcatkin_makeは通る。
    * ただしbuildtool_dependタグがないとビルドエラーになる。
    * またnameタグのパッケージ名がCMkakeLists.txtのproject(パッケージ名)と異なっていてもビルドエラーになる。
    * この2つのタグは自動生成されているはずなので触らないのが無難。
* その他
    * export機能を使うと依存するパッケージにプラグインをエクスポートできる。
        * nodoletを使う場合はこの機能を利用するようだが使ったことがないので不明。

CMakeLists.txtと違っててもいい所が少し面倒。

### 参考サイト
[ROS wiki catkin/package.xml](http://wiki.ros.org/catkin/package.xml)
[ROS講座97 CMakeList.txtとpackage.xmlの書き方](https://qiita.com/srs/items/30c81c3f26f1987b0afa#rospack-list%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%9F%E5%A0%B4%E5%90%88)
[ROS (2)のpackage.xmlについて(1/2)](http://shun0818.hatenablog.com/entry/2018/12/17/212322)
php74 コアダンプ

似たようなの？
https://lists.freebsd.org/pipermail/freebsd-ports/2019-January/115381.html

```
root@pt2:/usr/ports # php -v
PHP 7.4.11 (cli) (built: Oct 11 2020 15:23:02) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.11, Copyright (c), by Zend Technologies
セグメントエラー(coreを出力しました)
```

gdb

```
#0  0x291883dc in openssl_lh_strcasehash () from /usr/local/lib/libcrypto.so.11
(gdb) bt
#0  0x291883dc in openssl_lh_strcasehash () from /usr/local/lib/libcrypto.so.11
#1  0x29192f8b in OBJ_NAME_cleanup () from /usr/local/lib/libcrypto.so.11
#2  0x291880d5 in OPENSSL_LH_delete () from /usr/local/lib/libcrypto.so.11
#3  0x29192b60 in OBJ_NAME_remove () from /usr/local/lib/libcrypto.so.11
#4  0x29192f04 in OBJ_NAME_cleanup () from /usr/local/lib/libcrypto.so.11
#5  0x29188337 in OPENSSL_LH_doall () from /usr/local/lib/libcrypto.so.11
#6  0x29192e66 in OBJ_NAME_cleanup () from /usr/local/lib/libcrypto.so.11
#7  0x2917e9c1 in evp_cleanup_int () from /usr/local/lib/libcrypto.so.11
#8  0x29185d0d in OPENSSL_cleanup () from /usr/local/lib/libcrypto.so.11
#9  0x287d6fad in __cxa_finalize () from /lib/libc.so.7
#10 0x287710dc in exit () from /lib/libc.so.7
#11 0x082c5fe4 in main ()
#12 0x080671ef in _start1 ()
#13 0x08067178 in _start ()
#14 0x00000000 in ?? ()
(gdb)
```

前もはまったがopensslのバージョンが変わる?とimapモジュールが落ちるようになる。
pkg delete php74-imap
とすると落ちなくなる。

php74-imapがpanda-cclientを使っているが、opensslをバージョンアップしてもpanda-cclientがバージョンアップされないのが原因っぽい。

panda-cclientを入れなおせばなるはず。
（もうはまらないようにimapは使わないので消した）
Node.jsでiniファイルを操る 「properties-reader」

# properties-readerとは？
Node.js上でiniファイルを読み込めるようにしてくれるmodule。
(正確には、**[iniファイル形式](https://qx-nosusume.cocolog-nifty.com/qx/2014/05/ini_format.html)** で書かれていれば拡張子はなんでもOK)

# 何のために使うか？
Electronとかで実行ファイル形式に変換した際、あとから変更になった既定値(ファイルパスとか)のために **わざわざソース編集して再コンパイル...なんてやってられないよ！** って人が使うもの。

実際作成したソースを「コンパイルするのに30分かかります！」なんてのはざらで、ちょっとした変更の度に再コンパイル→検証→再コンパイル...ってのはかなりの手間。

そんな中でiniファイルやpropertiesファイルとしてパラメータもたせられたら便利じゃないですか？？？便利ですよね！！！

上記環境のような中でNodejs使ってるよ！って方は **今すぐproperties-readerの使用を検討してはいかがでしょうか？** 


# 使い方
### インストール方法
```
npm install properties-reader
```


### 使用するためのおまじない
```javascript:index.js
// properties-readerをimport
const propertiesReader = require('properties-reader');

// iniファイルをimport
const properties = propertiesReader('./test.ini');
```

また、今回使用するiniファイルは下記の通り。

```ini:test.ini
[hoge]
fuga=hogefuga

[foo]
yeah=fooyeah
```

```ini:test2.ini
[test]
aaa=bbb
```


### 指定のパラメータのみ取得
```javascript:index.js
// iniファイルから任意のパラメータを取得
const hf = properties.get('hoge.fuga'); // == hogehuga
const fy = properties.get('foo.yeah');  // == fooyeah
const hfPath = properties.path().hoge.fuga; // == hogehuga /syntax sugar
```


### 全パラメータ取得
```javascript:index.js
// iniファイルから全パラメータを取得
properties.each((key, value) => {
    console.log(`${key}: ${value}`);
});
```

```:実行結果
hoge.fuga: hogefuga
foo.yeah: fooyeah
```


### 複数のiniファイルをまとめて取得
```javascript:index.js
// 既に取得したiniに他のiniを追加
properties.append("./test2.ini");

// iniファイルから全パラメータを取得
properties.each((key, value) => {
    console.log(`${key}: ${value}`);
});
```

```:実行結果
hoge.fuga: hogefuga
foo.yeah: fooyeah
test.aaa: bbb
```


### 文字列から取得
```javascript:index.js
// 文字列を読み込み
properties.read('ai.kaki = aikaki \n ue.kuke = uekuke');
properties.set('o.ko', 'oko');  // 読み込みたいパラメータが1つの場合はsetでもOK

// iniファイルから全パラメータを取得
properties.each((key, value) => {
    console.log(`${key}: ${value}`);
});
```

```:実行結果
hoge.fuga: hogefuga
foo.yeah: fooyeah
test.aaa: bbb
ai.kaki: aikaki
ue.kuke: uekuke
o.ko: oko
```


### 要素数取得
```javascript:index.js
const propertiesCount = properties.length;
```


### パラメータの保存
```javascript:index.js
const props = propertiesReader('./test.ini');
console.log(props.get('hoge.fuga'));
props.set('hoge.fuga', 'hogehogefugafuga');

props.save('./test.ini')
    .then(data => {
        // save成功時処理
    }, err => {
        // save失敗時処理
        console.log(err);
    });

console.log(props.get('hoge.fuga'));
```

```ini:test.ini
[hoge]
fuga=hogehogefugafuga
[foo]
yeah=fooyeah
```


# 注意点
### パラメータの上書き
既に存在するパラメータを指定してreadとかsetとかappendとかしちゃうと上書きされちゃうので注意。(read, set はまずないと思うがappendはありそう)

```javascript:index.js
// パラメータの上書き
properties.each((key, value) => {
    console.log(`${key}: ${value}`);
});
console.log("");
properties.append("./test3.ini");
properties.each((key, value) => {
    console.log(`${key}: ${value}`);
});
console.log("");
```

```ini:test3.ini
[hoge]
fuga=hogehogehoge
[foo]
yeah=fooyeah
```

```:実行結果
hoge.fuga: hogefuga

hoge.fuga: hogehogehoge
```


# 参考
公式: https://www.npmjs.com/package/properties-reader
また、上記を試してみたい方は **[keito-damaのgithub](https://github.com/keit0728/study-properties-reader.git)** よりclone作ってみてください。
docker-slim前後のdockerfileの差異を比較

## 手順
```
  # サンプルnode.jsアプリのDockerイメージを作成する
~ $ git clone https://github.com/docker-slim/examples.git

  # node_ubuntuのDockerfileがあるディレクトリに移動
~ $ cd examples/node_ubuntu/

  # Dockerfileをビルドし，イメージを作成
~ $ docker build -t my/sample-node-app .

  # 作成したイメージに対して，docker-slimを適用する
~ $ docker-slim build my/sample-node-app
```

## サイズ削減度合いは？？
```
~ $ docker images
    REPOSITORY                TAG                 IMAGE ID            CREATED             SIZE
    my/sample-node-app.slim   latest              b2c7843a52fa        3 hours ago         14MB
    my/sample-node-app        latest              3c6ddc217be2        4 hours ago         414MB
```
下が元のイメージ，上が最適化した後のイメージです．
docker-slimで最適化したイメージには「.slim」が後ろに追加されるようです．
サイズは414MBから14MBまで小さくなってます．
何が起きてるのか。。

## dockerfileの比較
- docker-slimを適応したイメージのdockerfileは以下のディレクトリにある
    - [docker-slim directory]/.images/[YOUR_APP_IMAGE_ID]/artifacts/

 
```Dockerfile:Dockerfile-before
FROM ubuntu:14.04
RUN apt-get update && \
		apt-get install -y curl software-properties-common python-software-properties && \
		add-apt-repository ppa:chris-lea/node.js && \
		apt-get update && \
		apt-get install -y build-essential \
		nodejs && \
		mkdir -p /opt/my/service
COPY service /opt/my/service
WORKDIR /opt/my/service
RUN npm install
EXPOSE 1300
ENTRYPOINT ["node","/opt/my/service/server.js"]
```

```Dockerfile:Dockerfile-after
FROM scratch
LABEL docker-slim.version="darwin|Transformer|1.32.0|10b628fc3cd9f903237b9c31a6aba5ac4e6bc9c8|2020-08-24_06:14:32AM"
ENV PATH "/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"

ADD files.tar /
WORKDIR /opt/my/service
EXPOSE 1300/tcp
ENTRYPOINT ["node","/opt/my/service/server.js"]
```

FROM句が ubuntu:14.04 から scratch に変わっています．
FROM scratch はベースが無いということを意味していて，ベースOSの部分から書いているということを示しているようです．
OS部分は ADD ubuntuのファイルシステムを圧縮したものだと想定されるfiles.tarが担っているみたい．



# 参考リンク
* docker-slimを使ってDockerイメージのダイエット
    * https://qiita.com/ryuichi1208/items/c96d39a57e11d54f02bf

- DockerSlim 使ってみた
    - https://scrapbox.io/kimihiro-n/DockerSlim_%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F
macOSのキーボードショートカットを変更し、EmacsのMarkSetができるようにする


EmacsのMark set(Ctrl+Space)と入力ソースのキーボードショートカットが競合している。

システム環境→キーボード→キーボードショートカット(タブ)→入力ソース のチェックボックスを外せば解決する。

**前の入力ソースを選択** のチェックボックスを外す

![スクリーンショット 2020-10-11 16.16.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6311/3fde4a9a-90e6-a823-394c-c6d74093f468.png)
warとjar は同じものだが用途が違う。


warファイルとjarファイルと同じもので拡張子が違うだけ。
ファイル圧縮はzipなので拡張をzipにすれば解凍できる。

拡張子をwarにすれば、tomcatのディレクトリ置くとデプロイされる。

eclipse では
warはプロジェクトファイルとして読み込める。
拡張子をjarにすれば、ライブラリとして読み込める。
firebase hosting デプロイの更新方法

#firebase hostingを使用したデプロイ方法と更新方法

基本このサイトの手順でOK
https://webdesign-trends.net/entry/9692

```javascript
firebase login
firebase init //質問に答えていく
//publicフォルダとfirebase.jsonがつくられるので、自分のファイル各種を作られたpublicフォルダに入れる。
//この時、index.htmlと404.htmlが自動で作成されているので、index.htmlは削除し、自分の//index.htmlを使用する（404.htmlは使わなければ消すし、ひとまず無害なので残しておいてOK）
firebase serve //ローカルで立ち上がるか確認
firebase deploy //本番環境にデプロイURLが取得できる
```

###firebase initする前のファイル構成
![スクリーンショット 2020-10-11 16.09.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/a08127b6-513c-6a4d-a6a0-1440c76f59e2.png)

###firebase initした後のファイル構成
![スクリーンショット 2020-10-11 16.07.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/d2bf39d1-c31b-86e2-3b53-b2cd3fc1c8cb.png)

##注意点
ファイルのパスを通すため、自分のプロジェクトはpublicフォルダの直下に入れておく
Vue3の基本構文①

Vueの構文についてコードベースで簡単にまとめます。
今回は以下の三つです。

- v-bind
- 条件付きレンダリング
- v-for

#v-bind
HTMLエレメントの要素とVueインスタンスdataとの接続に使用します。

```javascript:main.js
const app = Vue.createApp({
    data() {
        return {
            product: 'Socks',
            image: './assets/images/socks_green.jpg'
        }
    }
})
```

```index.html
<img v-bind:src="image">
```
HTML側の`image`要素とVueインスタンスdataにあるimageプロパティーがリアクティブにバインディングされます。
なので、`image`のパスを変更するとリアクティブにHTML側に反映されます。

```javascript:main.js
image: './assets/images/socks_blue.jpg'
```

※画像が緑色ソックス＝＞青色ソックスに変わる


ちなみに以下の様に、javascriptっぽく書くこともできます。

```index.html
<img v-bind:src="{{ image }}">
```

v-bindは使用頻度が高いので以下のショートカットが用意されています。

```index.html
<img :src="image"> 
```

#条件付きレンダリング
```index.html
<p>In Stock</p>
<p>Out of Stock</p>
```
```javascript:main.js
const app = Vue.createApp({
    data() {
        return {
            product: 'Socks',
            image: './assets/images/socks_blue.jpg',
            inStock: true
        }
    }
})
```
###v-if
```index.html
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
```
`v-if`をHTML要素に加えることで条件を付け足すことができます。
この場合、Vueインスタンスdataの`inStock`がtrueなのでHTMLで"In Stock"が表示される。

### ShowとHide
```index.html
<p v-show="inStock">In Stock</p>
```
`v-if`の様にDOMから要素を加えたり消したりではなく、要素のvisibilityをtogglingする場合に使用します。
なので、以下の様に`inStock`プロパティーを`false`にすると

```javascript:main.js
inStock: false
```
この様にDOM上で要素自体は存在しますが、`display`が`none`になっています。
![Screen Shot 2020-10-11 at 16.03.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321545/d8feed67-676e-15ad-1c5c-917c7fdd7f74.png)


#v-for
```javascript:main.js
const app = Vue.createApp({
    data() {
        return {
            ...
            details: ['50% cotton', '30% wool', '20% polyester']
        }
    }
})
```
Vueインスタンスdataに`detail`配列を追加
これをリストとしてHTMLで表示する

```index.html
<ul>
  <li v-for="detail in details">{{ detail }}</li>
</ul>
```
`details`はdataにある`details`配列を参照し、`detail`はlooping中の各currentエレメントを意味しています。

各要素にkeyをつけたい場合は以下のようになります

```javascript:main.js
data() {
  return {
    ...
    variants: [
      { id: 2234, color: 'green' },
      { id: 2235, color: 'blue' }
    ]
  }
}
```

```index.html
<div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div>
```

※`:key`はv-bindのショートカットなので`v-bind:key`と同義
Spring CacheでキャッシュをRedisに保存する際の有効期間の指定について 

# 経緯
Redisの有効期間指定を調べたが、記載が古くそのまま使える情報が少なかったため記事を作成する※20200827時点で調査

# Spring CacheでRedisにデータごとの有効期間指定ができることを確認する

##### build.gradle

```
implementation 'org.springframework.boot:spring-boot-starter-cache'
implementation 'org.springframework.boot:spring-boot-starter-data-redis'
```

##### 設定クラスを作成
```java
@Configuration
@EnableCaching
public class RedisConfig {

	@Bean
	public CacheManager cacheManager(RedisConnectionFactory fac) {
		
        // １．キャッシュビルダーからキャッシュを作成する
		RedisCacheManagerBuilder builder = RedisCacheManager.builder(fac);
		builder
			.cacheDefaults(
		// ２．デフォルトのキャッシュ有効期限を設定する
					RedisCacheConfiguration.defaultCacheConfig().entryTtl(Duration.ofDays(1)))
		// ３．cache1という名称のキャッシュに対し、有効期限を設定する
			.withCacheConfiguration("cache1", 
					RedisCacheConfiguration.defaultCacheConfig().entryTtl(Duration.ofMinutes(1)))
		// ３．cache2という名称のキャッシュに対し、有効期限を設定する
			.withCacheConfiguration("cache2", 
					RedisCacheConfiguration.defaultCacheConfig().entryTtl(Duration.ofHours(1)));

		return builder.build();
	}
}
```

**補足**

１．

* RedisCacheManagerはスタティックな内部クラスであるビルダーを介して作成します
* 引数にFactoryでなくRedisCacheWriterも指定できる（内部的にはFacroty⇒RedisCacheWriterと変換しており、入口はどちらでもよい）
* 以下のようにするとビルダーを使わなくても作ることができる。この場合デフォルト有効期限（期間無限）となります。

```java
// facは、RedisConnectionFactory型
RedisCacheManager rcm = RedisCacheManager.create(fac);
```

２．

* デフォルトの有効期限と、データ毎の有効期限は設定するメソッドが異なる

３．

* 有効期間はDurationを利用して日付や時間など柔軟に設定できる
* データごとにの設定は内部にMAPをもっている
* withInitialCacheConfigurationsメソッドをつかうと、設定内容をあらかじめ作成したMAPでまとめて登録もできる


##### 動作確認用のコントローラ(cache1とcache2を作成する)
```java
@RestController
@RequestMapping("/api/sample")
public class SampleRedisCacheController {

	@Autowired
	CacheManager cm;

	@GetMapping("redisCache")
	public String redisCache() {

		Cache c1 = cm.getCache("cache1");
		c1.put("k1", 123456);
		c1.put("k2", 234567);

		Cache c2 = cm.getCache("cache2");
		c2.put("k1", 123456);
		c2.put("k2", 234567);

		return "redis cache test";
	}
}

```

# 確認結果
* 以下にアクセスし、Redisにキャッシュが作成されること
　http://localhost:8080/api/sample/redisCache

* Redisの有効期限が、設定クラス通りであること
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703235/6b2a5434-7c38-6ec5-3390-d8f575e1122a.png)
※TTL発行まで時間がたったの時間が少したってしまっている

# コメント
CacheManagerクラスの中身は難しそうに思えたが、作り方や色々な設定について理解できた。
ビルダーはEffectiveJavaに記載があった。コンストラクタの引数が多くなる場合に使うと便利ということで紹介されていた気がする。今回設定値が多いので導入されているのだと思う。
Railsのテストコード時にBasic認証でエラーが出た時の対処法

#はじめに
今回はコントローラーの単体テストコード実装時に出た表題のエラーの件について記述したいと思います。ですがその前にまずはBasic認証について軽く説明したいと思います。

#Basic認証とは
Webサイトにアクセス制限をかける方法の一つ。その中でも最も簡易的に制限をかけることができる方法がベーシック認証（Basic認証）です。ベーシック認証（Basic認証）はWebサーバーに付随している機能の1つでファイルに数行の記述をするだけで簡単にアクセス制限をかけることが可能です。



**「Basic認証の参考画像」**
<a href="https://gyazo.com/ac382fa2535431d2e88d49f2a4753a83"><img src="https://i.gyazo.com/ac382fa2535431d2e88d49f2a4753a83.png" alt="Image from Gyazo" width="383"/></a>

**「引用させて頂いたサイト」**
[ベーシック認証（Basic認証）とは？設定方法と注意点・エラーになる原因を解説](https://www.itra.co.jp/webmedia/basic_authentication.html)



#エラー内容
それでは改めまして今回の本題について説明させて頂きます。
まず初めにコントローラーの単体テストコード実行時に下記の<font color="red">エラー</font>が出ました。


```zsh:ターミナル
bundle exec rspec spec/requests/items_spec.rb

~中略~

Failures:

  1) ItemsController GET /index indexアクションにリクエストすると正常にレスポンスが返ってくる
     Failure/Error: expect(response.status).to eq 200
     
       expected: 200
            got: 401
     
       (compared using ==)
     # ./spec/requests/items_spec.rb:28:in `block (3 levels) in <top (required)>'

  2) ItemsController GET /index indexアクションにリクエストするとレスポンスに出品済みの商品名が存在する
     Failure/Error: expect(response.body).to include @item.goods
     
       expected "HTTP Basic: Access denied.\n" to include "Custard Apples Daikon"
       Diff:
       @@ -1 +1 @@
       -Custard Apples Daikon
       +HTTP Basic: Access denied.
       
~中略~
```

#エラー内容の検証

上記の内容から今回の<font color="red">エラー</font>の原因の該当箇所と思われる部分は下記の２点です。

```zsh:ターミナル
1)
       expected: 200
            got: 401

2)
expected "HTTP Basic: Access denied.\n" to include 
```
まず１つ目はexpectedで**「200」(成功)**を期待していますが実際のレスポンスは**「401」(未認証)**でしたという内容です。

そして2つ目の方で**Basic**という単語が出てるので設定していた**Basic認証**ではじかれているのだろうと仮定しました。
（まあ英語の内容**(HTTP Basic: Access denied)**もシンプルにHTTPのBasicでアクセスが拒絶されました。みたいな意味合いなので）

上記の2つのエラー内容から**「application_controller.rb」**内に設定していたBasic認証の部分を通れていないせいでテストコードが失敗したと判断しました。

そこで自分はテストコードの実行時だけは該当のBasic認証の部分をコメントアウトすることにしました。

```ruby:application_controller.rb
class ApplicationController < ActionController::Base
  before_action :basic_auth (この行をコメントアウトする)

```
##そして再度単体テストコードを実行

```zsh:ターミナル
 bundle exec rspec spec/requests/items_spec.rb

ItemsController
  GET /index
    indexアクションにリクエストすると正常にレスポンスが返ってくる
    indexアクションにリクエストするとレスポンスに出品済みの商品名が存在する
    indexアクションにリクエストするとレスポンスに出品済みの商品の画像が存在する
    indexアクションにリクエストするとレスポンスに出品済みの商品の販売価格が存在する
    indexアクションにリクエストするとレスポンスに新規投稿商品一覧が存在する
  
Finished in 3.21 seconds (files took 4.76 seconds to load)
5 examples, 0 failures
```

<font color="red">上記の通り無事にテストコードを実行することが出来ました。</font>

# おわりに
調べているとBasic認証の部分を残したままでもテストコードを行う方法があるみたいだったのですが少し複雑そうだったため今回は簡単なこちらの方法にしてみました。

# 当記事で参考にさせて頂いたサイト
- [HTTP レスポンスステータスコードについての参考サイト](https://developer.mozilla.org/ja/docs/Web/HTTP/Status)
- [ベーシック認証（Basic認証）とは？設定方法と注意点・エラーになる原因を解説](https://www.itra.co.jp/webmedia/basic_authentication.html)
cssの@keyframesアニメーションでガタゴト進む車を実装する


## 完成版デモ
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kuma-onigiri" data-slug-hash="qBNdqoz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ガタゴト進む車">
  <span>See the Pen <a href="https://codepen.io/kuma-onigiri/pen/qBNdqoz">
  ガタゴト進む車</a> by kuma-onigiri (<a href="https://codepen.io/kuma-onigiri">@kuma-onigiri</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 実装イメージ
アニメーションは`@keyframes`を使います
１、車の画像を配置する
２、斜めに動くアニメーションをつける
３、上下にガタゴト動くアニメーションをつける


## 車を用意する
Illustratorで作った車をつかいます
![car.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/782315/4ea13d82-abe8-fdad-4ea5-958d728e3f10.png)

## ベースのHTMLとCSS
```html:index.html
            <div class="move-animation">
                <div class="gata-gata-animation">
                    <img class="car" src="車の画像のパス">
                </div>
            </div>
```

```css:main.css
.car {
    width: 75px; /* 車のサイズは適当に幅75pxくらい */
}
```

`@keyframes`は、1つの要素に複数のアニメーションをつけることはできないので、２段構えでつけています。
上下に揺れる用の`gata-gata-animation`クラスをつけた要素を、さらに`<div>`で囲って、動くアニメーション用の`move-animation`クラスをつけてあげるのがポイントです。

## 斜めに動くアニメーションをつける
```css:main.css
.move-animation {
    transform: translate(250px, 0px);

    animation: move 16s linear infinite;
}
@keyframes move {
    to {
        transform: translate(0px, 250px);
    }
}
```
初期位置は`translate`で右に250pxくらいずらした状態にしておきます。
そこから左下に動いていくアニメーションをつけます。時間は適当に16秒くらいにしてます。

## 上下にガタゴトうごくアニメーションをつける
```css:main.css
.gata-gata-animation {
    animation: gata-goto .3s infinite;
}
@keyframes gata-goto {
    20% {
        transform: translateY(-2px);
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
    }
    25% {
        transform: translateY(0px);
    }
    55% {
        transform: translateY(-1px);
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
    }
    60% {
        transform: translateY(0px);
    }
}
```
`transform`で上下に２回動くのを作り、それを`infinite`で延々と繰り返しています。
ちょっとバウンドする感じにしたいので`animation-timing-function`を`cubic-bezier(0.4, 0, 1, 1.3)`にしています。

ここはブラウザの開発者ツールで調整できるのですが、
左の赤丸のところのマークをクリックするとベジエ曲線のグラフが出てくるので、ハンドルを動かして好きな動きにできます。
右の赤丸のところを上に盛り上がるようにすると、ぼよんって感じの動きになります。
![bezier.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/782315/33c0f605-14b7-16ef-92f0-ba5a4d41a699.png)

## おわり
アニメーションを２段構えにするのがポイントでした。
これを応用すれば、ぴょんぴょん動くアニメーションとかもできますね。
Spring Bootの@WebMvcTestテストでSpring Securityのデフォルトセキュリティが有効化される

Spring Boot 2.3.4.RELEASEでWebFluxとSecurityを使用している際、
コントローラーなどのテストのために`@WebMvcTest`を付与しているテストで
`WebTestClient`でコントローラーにリクエストを行うと、何故かBasic認証を求められた。

確かにSpring Securityを利用しているプロジェクトではあるが、Basic認証などは利用していない。

原因に検討が付かなかったが、GitHubに[issue](https://github.com/spring-projects/spring-boot/issues/16088)が存在した。

要約すると、`@WebFluxTest`では`@Conroller`や`@ControllerAdvice`, `WebFluxConfigurer`など、コントローラー関係の`@Bean`は構成されるが、`@Service`の`@Bean`は構成されない。

ただし、`@Configuration`が付与されたクラスは`@Bean`として生成はされるようだ。
そして、その中から条件に一致する`@Bean`のみが生成されるらしい。

Spring SecurityのWebFlux向けのセキュリティ構成をしている場合、多くの場合ドキュメントに記載されている以下のような構成を用意することになる。

```java
@Configuration
@EnableWebFluxSecurity
public class SecurityConfiguration {

    @Bean
    public SecurityWebFilterChain springWebFilterChain(ServerHttpSecurity http) {
        // do stuff
    }
}
```

このとき`SecurityWebFilterChain`は生成されないが、`SecurityConfiguration`と一緒に`@EnableWebFluxSecurity`がスキャンされる。

`@EnableWebFluxSecurity`の定義を見ると[@Import(WebFluxSecurityConfiguration.class)](https://github.com/spring-projects/spring-security/blob/651c94b3859eb6c3eee4ee632b1419e59d99d8dd/config/src/main/java/org/springframework/security/config/annotation/web/reactive/EnableWebFluxSecurity.java#L87-L88)が付与されている。

`WebFluxSecurityConfiguration`はデフォルトの[SecurityWebFilterChainを生成する](https://github.com/spring-projects/spring-security/blob/651c94b3859eb6c3eee4ee632b1419e59d99d8dd/config/src/main/java/org/springframework/security/config/annotation/web/reactive/WebFluxSecurityConfiguration.java#L100-L111)。

こういった流れで`@WebFluxTest`が付与されたテストでSpring Securityのデフォルトセキュリティが適用されるらしい。

対応策としてはプロジェクトで用意している`SecurityWebFilterChain`を生成する`@Configuration`を明示的に`@Import`するしかないらしい。