OmniAICreator/Qiita-1.07M huggingface dataset:
Docker Desktop on MacでNuxtプロジェクトを作る際のマイプラクティス

# あなたは誰？

- tyamahori(:ちゃまほり https://twitter.com/tyamahori)
- Laravel/PHPメインのサーバーサイドエンジニア
- 変更に強い設計や実装について日々思いを馳せる
- 株式会社MFS 所属 ( https://www.mortgagefss.jp )
  - 住宅ローンや不動産投資ローンの不便を解決する会社
- 不動産投資サービス INVASE ( https://investment.mogecheck.jp/ ) の開発担当

---

# 最近のバズった記事

https://zenn.dev/tyamahori/articles/61a25b58a35ac5

https://b.hatena.ne.jp/entry/s/zenn.dev/tyamahori/articles/61a25b58a35ac5

---

# tyamahoriの思い

- DockerでNuxtプロジェクトのローカル環境を建てる必要があるときに参考にしてほしい
- ローカルのNode.js動かしているのであればそれがいいです
- こういうやり方もあるんだ！っていうのを知ってもらえればと

---

# 結論。今日知ってほしいこと

- `node_modules`ディレクトリをコンテナとホストでそのまま共有しない。
    - Macのファイルシステムの問題で遅くなる
- Mac側に`node_modules`ディレクトリが無いとIDE・エディタの補完が聞かない
    - 工夫して運用でカバーする。。。

---

# じゃあどうするの？
- `docker cp` を使って、`node_modules`ディレクトリをコンテナからMac側に持ってくる
- `docker cp`コマンドはシェルスクリプトでラップして楽をして使う
- 現実的なスピートとIDE・エディタの補完の両立ができるはず。。。

---

# `node_modules`ディレクトリの扱い

![Screen Shot 2021-08-26 at 0.15.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200282/57f61517-6369-62e0-c5a3-974329583184.png)

---

# `node_modules`ディレクトリの扱い
- コンテナ内部ではなく、トップレベルボリュームにマウントをする
- `docker-compose down` をしてもnode_modulesディレクトリを生残させるため
- `docker-compose up` した際に0から npm(yarn) install しなくても良い

---

# docker cp で `node_modules`ディレクトリ をホスト側へ持ってくる

```shell
# サンプル
docker cp nuxt-dojo-app:/nuxt-dojo/node_modules ../../nuxt-dojo/node_modules

```

このままで叩くのは面倒なので、ラッパーシェルスクリプトを組んで、そこに処理を忍ばせる

---

# おわり

ありがとうございました

--- 

# サンプルリポジトリ

https://github.com/tyamahori/nuxt-dojo-2-sample
Node.jsで証明書チェーンの検証をおこなう

Node.jsで証明書チェーンの検証をおこなうソースコードを実装したので、メモとして残しておく。

調べ方がわるかったのか、実装サンプルを見つけるのに苦労したのでここにまとめておく。  
見つけた実装サンプルはStack Overflowにありました。

[ssl - Using node.js to verify a X509 certificate with CA cert - Stack Overflow](https://stackoverflow.com/questions/48377731/using-node-js-to-verify-a-x509-certificate-with-ca-cert)

## 証明書チェーンとは

そもそも証明書チェーンとは、ある証明書はより上位の証明書によって署名され、その上位の証明書はさらにその上位の証明書によって署名されているという証明書がチェーンのように紐付いている関係を指します。
最も上位の証明書のことをルート証明書と呼び、それ以外の証明書は中間証明書またはサーバ証明書と呼びます。

イメージ図（[証明書チェーンの働き - IBM Documentation](https://www.ibm.com/docs/ja/ibm-mq/8.0?topic=ssfksj-8-0-0-com-ibm-mq-sec-doc-q009880--htm)より）

![](https://i.gyazo.com/2adad413648c9351a7c41a0c487e6258.gif)

そして、証明書チェーンの検証とは正しく署名によるつながりができていることを検証する、ということです。

参考サイト

- [サーバー証明書／中間CA証明書／ルート証明書の違いとは？ \| さくらのSSL](https://ssl.sakura.ad.jp/column/difference-in-ssl/)
- [【初心者向け】サーバ証明書の検証の流れについてまとめてみた - サーバーワークスエンジニアブログ](https://blog.serverworks.co.jp/server-cert-verification)
- [証明書チェーンの働き - IBM Documentation](https://www.ibm.com/docs/ja/ibm-mq/8.0?topic=ssfksj-8-0-0-com-ibm-mq-sec-doc-q009880--htm)

## 実装

実装には最初に記載したStack Overflowの記事を参考にして、[node-forge](https://www.npmjs.com/package/node-forge)モジュールを利用します。

実装は以下のとおりです。

`証明書A -> 証明書B -> ルート証明書`という順に上位の証明書になっていきます。
証明書の中身は実際に検証した証明書に変えてください。サンプルでは開発のときに試したFIDO Allianceの証明書を使っています。

<script src="https://gist.github.com/s1r-J/15fbfcdb2381e26dc73f15854d564e71.js"></script>

## おわり

ほとんどモジュールのおかげなので、深い理解はできていません。
しかし、実際に動くものがあると調べるポイントや理解しやすさがあがると思います。

最後に注意点ですが、実装例の証明書は有効期限や何らかの要因で使えなくなる可能性があります。
その際は、何かしら別の証明書チェーンの証明書に差し替えてお試しください。
LinuxのCLI上で二段階認証クライアント(MFA)を実行する

コンテナ内でクライアントとしてログインしたい場合など、二段階認証をコマンドラインから行いたいことがある。
![スクリーンショット 2021-08-25 234507.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593714/49266bf1-634b-1e36-8026-a41f00c0675f.png)

こういったときに、`oathtool`というプログラムを利用すると良い。

# インストール
一行でOK！！
## Ubuntu/Debian
```
$ sudo apt install oathtool gnupg2
```

## CentOS/RHEL
```
$ sudo yum install oathtool gnupg2
```

# HowTo
```
oathtool -b --totp 'ここに秘密鍵'
```
秘密鍵は時間ベースのtwo-factor secretキーを入力する。
GithubやOffice365のアカウントで二段階認証を有効にするときに多くの人がQRコードをスキャンすると思われる。
ここでQRコードがスキャンできない場合、を選択し、表示されるシークレットキーを上記のコマンドに入力する。

# 動作の様子
手元のubuntuマシンで動かしてみた様子は以下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593714/95c5c9da-a00b-dc01-b6c4-92b866a24791.png)

よいMFAライフを！

### 参考記事
https://www.cyberciti.biz/faq/use-oathtool-linux-command-line-for-2-step-verification-2fa/
IAMロールと信頼されたエンティティの関係性

## はじめに
IAMのロール作成時に聞かれる「信頼されたエンティティ」って何となったので調べて分かった事を備忘録としてを残す

## 信頼されたエンティティとは
IAMで作成したロールはユーザだけでなくサービス（s3とかLambdaとか）にも付与することができるが、その付与可能なサービスを設定しているのが「信頼されたエンティティ」の部分
この「信頼されたエンティティ」にないサービスにはロールをアタッチできない

具体的に見ていく

### ロール作成
ロールをIAMで作成すると以下のような画面が出てくるが、ここで選択したサービスを「信頼されたエンティティ（＝今作成中のロールをアタッチできる対象として許可する）」とみなすようになる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/8abc8e46-9dde-ce58-4c8e-72c5883f8146.png)

### 作成したロールの信頼関係（どのサービスならこのロールをアタッチできるか？）
「信頼されたエンティティ」の所に`lambda.amazonaws.com`と書かれている通り、Lambdaであればこのロールを使う事ができるように設定できている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/b6b69e09-5ce9-08e2-a089-1671641700ba.png)

### Lambdaからアタッチできるか？確認
以下の編集ボタンをクリックすると・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/91ce562a-12a4-4eb6-8cca-64089600417d.png)

ロール一覧に先ほど作成した`test-role`が表示されているのが確認できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/0093c489-9ee2-bcce-ea93-3b84459e6b1d.png)

### 信頼されたエンティティを修正してLambdaからアタッチできない事を確認
信頼されたエンティティが以下のような状態でLambdaのアタッチ可能なロール一覧を見てみると・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/77a256cc-9cba-cec8-2ee5-766c0fe80e27.png)

アタッチ可能なロール一覧に表示されない事が確認できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/9493de7d-75ed-5dd6-5fbe-d7cf20b8989f.png)

## おまけ
### 信頼されたエンティティを複数定義する
以下のように自分でJSONを編集すれば他のサービスも信頼されたエンティティに追加する事ができる
※JSON編集画面は[作成したロールの信頼関係（どのサービスならこのロールをアタッチできるか？）](#lambdaからアタッチできるか確認)の画像にある「信頼関係の編集」ボタンから開ける

```json
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": [
          "s3.amazonaws.com",
          "lambda.amazonaws.com"
        ]
      },
      "Action": "sts:AssumeRole"
    }
  ]
}
```
Rubyでよく使われる繰り返し処理❗️eachとmapの違い、while文とinjectの使い方について

# 繰り返し処理とは
***同じ処理を何回も繰り返す***ことです

「***〇〇回繰り返し処理をやる***」「***条件を満たすまで処理をする***」
みたいな処理を繰り返す処理のことです。

例えばloop,for文などあります。

# eachとmapの違い
***⚫︎eachは繰り返し処理の時に使います。***
***⚫︎mapは繰り返し処理の結果を配列にしたい時に使う。***


# eachの使い方
まずeachの使い方を見ていきましょう。

eachは英語でそれぞれという意味です。
例えば a= [1,2,3]なら配列の中身を先頭から順番に処理が繰り返される。
webアプリでよく使われる処理です。
例えばTwitterのつぶやきなどを取り出してきてブラウザの画面に表示するときに使える。

### each構文

```rb
オブジェクト.each do |変数|
  実行する処理1
  実行する処理2
end
```
 
> 引用　https://www.javadrive.jp/ruby/for/index5.html


```rb
 scores = [1,2,3]
 scores.each do |score|
    score*2
 end

 p scores

````

```
[1, 2, 3] と出力
```

他にも使い方を見ていきます。
***eachは配列scoresの各要素の数字を2倍にした結果を出力しています。***


```rb
scores = [10,20,30,40,50,60]

 scores.each do |score|
    puts score   
  end
```
puts scoreの部分はsとかにしてもokです。
```rb
scores.each do |s|
    puts s 
  end
```
 
*putsは1回しかない　。eachでscoresに入ったデータを取り出します。
取り出したものをscoreという変数に入れている。

⚫︎出力結果
```
10
20
30
40
50
60
```

# mapの使い方

```rb
scores = [1,2,3]
scores.each do |score|
    score*2
end

p scores

```
```
[2, 4, 6]と出力
```
結果として配列scoresの各要素の数字を2倍した結果を配列として出力されています。

# ２つを比較して
eachとmapを比較すると

***eachはただscoresの中の[1,2,3]を出力しているだけ***ですが
***mapはresult = 〜の配列として出力***しています。

# while文とは
While文は繰り返し処理で使うもので、
指定された条件が真（true）である限り、ブロック内のコードを繰り返し実行するためのループ構造です。

# while文の使い方
while文の使い方を見ていきます。
```rb

a = 0
while(a < 200)
    puts a
    a = a + 20
end

```
で実行するとすると

```rb
0
20
40
60
80
100
120
140
160
180
```
と出力。

これはまず　```a=０```で定義します。　
***while(a < 200)は200より下の数まで処理がされる***ということです。
***puts a と　a + 20で 0 + 20の20を出力***させます。
その後、***aが２０となり a+20 つまり 20 + 20が処理をされて40と出力***されます。
その後、***aが40となり、　a + 20 が　40 + 20が処理をされて60と出力***されます。
これが200より下の数字まで続くわけです。

補足でdoも使えます。

```rb
score = 0
while score <100  do
    puts  "number #{score}"
    score = score + 1
end
```

他にもuntilやloopなど繰り返し処理は色々あるので調べてみてください。

#injectの使い方
injectは注入という意味です。
scoresの合計を繰り返し処理で出力させていきます。

```rb
scores = [40,60,80,100,120]

sum= 
scores.inject do |result,i|
   result  + i
   
end

puts sum

```
scoresの合計を出します。実行すると
```
400
```
になります。
処理の流れとしては、40+ 60で100になって100+80で180になってと
このような流れを繰り返します。

# 処理の流れを理解するには
デバックでbinding.pryを挟みながらやると繰り返し処理の流れが把握できます。
resultとiを入力しながらcontinueで処理を進めていくとわかりやすいかと思います。

https://qiita.com/Hashimoto-Noriaki/items/df700dc8217fb61b4815

デバックはこちらを参照してみてください。

# 最後に
繰り返し処理は他にもたくさんあります。
loop until for times などたくさんあるので調べて実装してみてください。


# 参考資料

https://qiita.com/massaaaaan/items/d90d10cb023bedc74fb2

https://www.javadrive.jp/ruby/for/

# 補足
投稿日 2021年08月21日のeach文に関する記事と2021年09月12日のwhile文、
2021年10月19日のinjectの記事を合わせた記事です。
Remote Accessを使ってBitriseをリモートデバッグする

Bitrise を使っていくと、時には不可解な失敗を目にすることがあるでしょう。その原因は Step 設定の不備からビルド環境の不備まで多岐に渡り、特にビルド環境周りの問題ですと自分のローカル環境ではなかなか再現できないものが多いので、そういう時は問題解決のために、実際に Bitrise のビルドマシンで直接弄りたい気持ちが湧いてきますよね。

そんなあなたに、そのための機能は Bitrise が用意してくれています。Remote Access です。

まず、デバッグしたいビルドのページを見ると、通常の目立つ「Rebuild」ボタンの隣に、あまり目立たない「Rebuild With Remote Access」というボタンもあります。このボタンを押します。

![スクリーンショット 2021-08-25 22.12.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63998/e13076a0-a903-3e00-6a5e-6248c9b9cc84.png)

そうすると、再ビルドのページで、リモートアクセスに必要な情報が表示されます。ここで SSH 接続を使えばターミナルから手軽に色々操作できます。

![スクリーンショット 2021-08-25 22.15.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63998/f7d6710e-7561-fadb-2f52-4c11b03f406e.png)

ターミナルから上記の情報で接続します。

![スクリーンショット 2021-08-25 22.16.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63998/56cd684f-51e0-a4d0-b7af-6eac495c5ddc.png)

ここで注意しないといけないのは、接続した直後はログインユーザのディレクトリーに入っていますが、Bitrise が CI としてリポジトリーを落としているのはまた別の場所です。なのでデバッグするためにはリポジトリーのディレクトリーを把握する必要があります。git-clone のステップの出力にはそのディレクトリーの場所を表示してくれていますので、そこに `cd` すればあとは楽でしょう。

![スクリーンショット 2021-08-25 22.18.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63998/3edfca3e-ab28-6b19-ebd8-d94329503cf1.png)
![スクリーンショット 2021-08-25 22.19.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63998/07d551df-ca21-6c79-b544-f9d9d798a3a7.png)

ここまできたら、あとはローカルでのデバッグと同じように色々弄れば OK ですね。

**Pro Tips**

Remote Access はリモートデバッグに非常に便利ですが、一つ制限があります：Workflow の実行が終わったら接続も強制切断されます。そのため早く手を動かさないとせっかくのビルドが無駄になります。ところが裏技として、Workflow の git-clone の後のどこかで、下記のように無理矢理 `sleep` スクリプトとかの待たせる処理を一時的に追加すれば、少なくとも Workflow の実行可能の最大の時間までデバッグできます。

![スクリーンショット 2021-08-25 22.37.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63998/30950583-f3c1-3e6a-07c5-1bd62dc7d030.png)
![スクリーンショット 2021-08-25 22.37.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63998/1373a263-0792-e30a-8ebc-daee69cdb4cf.png)
日本からBaidu Drive(百度网盘)のデータをダウンロード

# まとめ
* baiduへの会員登録とソフトのインストールは避けられなそうです。
* 2021年8月でもこちら↓で紹介されている方法は有効でした。感謝。   

https://togetter.com/li/1420752

* ダウンロードを速くしたければ課金します。250円/月だし。iphoneならアプリ内課金が楽でした。

# きっかけ
github上ののモデルをダウンロードしたかったというところから始まりました。

https://github.com/yangxue0827/RotationDetection

学習済みウェイトをダウンロードしようとすると、なんとbaidu driveのダウンロードが始まる。
インストールすると、今度は会員登録が要りそうなのが分かりました。

いろいろ調べましたが、会員登録とソフトのインストールは避けられそうもありませんでした。

# 会員登録とダウンロード

こちらのページを（ブラウザに翻訳させて）読んでいきます。

https://dnlod.com/how-to-create-a-baidu-account/

自分が引っ掛かったのはインストールした百度网盘のパスワード認証です。
先ほどスマホにインストールしたアプリでPCの画面上のQRコードを読んで認証するのが楽なのでおすすめです。
この画面を見て、最初は何のことか分かりませんでした。語学大事ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017728/e02c5123-bba6-d2c0-ad8b-9b50defe3f92.png)

パスワードを使う場合は、IDとパスワードを入力して青いボタンを押します。
スマホに送られてくるショートメッセージを更に入力するのですが、
SMSの送信ボタンを押すまで送られてきません。そのことに語学力の無さから気づけず時間を溶かしました。

# ダウンロードを速くしたければiphoneから課金する

ダウンロードがやばい遅いです。
高速なダウンロードの権利をPCアプリ上で買おうとしましたが、よくわからず（怖くなり）断念。
iphoneに百度网盘をインストールして、アプリ内課金をしました。250円/月でした。
仕事でケアレスミスを無くす3つの方法

#ケアレスミスの原因

基本的には「うっかり」という油断から起きてしまうケースがほとんどです。
そうしたミスが起きる原因の一番は、抱えている課題や問題の量です。問題をあまり多く抱えすぎるのもミスが増える原因ですので、仕事量を少なくすることも考えましょう。そうすれば、うっかりミスも見落とすことが減るでしょう。

#ケアレスミスを無くす方法

大きく分けると以下の２つが有効な手段になると思います。

####①再確認する癖をつける
例えば社内にある事象を報告する際に内容に誤りがないか、必ずチェックを行う癖をつけることです。自分が1度目に書いた内容が必ずあっているかどうかを確認するフローを付け加えることでそのミスを防げるようになります。またその際に声に出して再確認をすることも有効な手段です。


####②同じミスを繰り返さない工夫をする
同じミスを繰り返さない工夫をするです。社会人としてやってはいけないのは、同じケアレスミスを二度以上繰り返す事です。それを防ぐ為には、一度してしまったミスを覚えておく事です。また、ケアレスミスをなくすためには、何かのメモなどに書き留めておくのが効果的でしょう。もちろん、他の人がしたミスを書き留めておくのもケアレスミスをなくすためには効果的です。このうっかりミスをなくす方法も、いろいろな場面で応用してみてください。

####③気にしすぎない
ケアレスミスすることを恐れて必要以上に再確認に時間をかけすぎたり、ミスを繰り返さない工夫を不用意に考えすぎてしまう（同じことも何度も何度も考えてしまう）ことはかえってミスを呼び寄せます。

最低限ミスをしないような取り組みは大前提必須ではありますが、精神衛生上ミスをとらわれすぎないようにも気をつけましょう。
【Rails】お気に入り(いいね)のハートアイコンとカウント数の間に謎の下線、消し方(メモ）

#　目標
#### このハートアイコンとカウント数の間にある下線を消す。

![スクリーンショット 2021-08-25 3.00.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927584/1a17216d-c49e-985a-b37c-2a5e44ce92b3.png)


```erb:likes.html.erb
<p>お気に入り一覧</p>
      
<% @like_posts.each do |post| %>
  <% if logged_in? %>
    <% if current_user.like?(post) %> 
        <%=link_to post_likes_path(post), method: :delete do %>
          　<i class="fas fa-heart unlike-btn"></i>
        　<% end %>
     <% else %>
        <%=link_to post_likes_path(post), method: :post do %>
          　<i class="fas fa-heart like-btn"></i>
        <% end %>
     <% end %>
        　<%= post.likes.count %>
  <% end %>
```
#### html.erbの記述にアンダーバーが入り込んでるのかとか記述ミスなのか何度も見直したのですが異変は見当たらず、最終的にview側から検証してみることにしました。
するとa要素という存在に気が付きました。([リンクのアンカー](https://www.tagindex.com/html_tag/elements/a.html))


![スクリーンショット 2021-08-25 2.20.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927584/e3e2dc0f-5918-b0b4-0aa8-0ed1af1a7143.png)

調べてみるとcssで`text-decoration` を使って消せそうということがわかったので

```css:css
a{
  text-decoration: none;
}
```
値に`none`と入れて確認したら無事下線が消えてました。
単純内容なのですがアイコンがリンクになっているをうっかりしていました、それに検証を忘れがちな自分のためにも備忘録として残しておきます。
【Rails Apiモード + devise】ログイン状態が保持されない時の解決法

Rails Apiモード + Devise で認証機能を作成。
Session + Cookieでログイン状態を保持するような仕様にしたいが、ブラウザをリロード等するとログイン状態が保持されていないことがわかった。

## 問題のソースコード

```ruby:sessions_controller.rb
class Api::V1::Auth::SessionsController < Api::V1::ApplicationController
  before_action :require_no_authentication, only: [:create]

  # POST /api/v1/auth/login
  def create
    user = User.find_for_database_authentication(email: user_params[:email])

    if user.nil?
      return render json: { errors: { message: 'アカウントが見つかりませんでした' } }, status: :not_found
    end

    if user.valid_password?(user_params[:password])
      sign_in user
      render json: { data: user }, status: :ok
    else
      render json: { errors: { message: 'アドレスまたはパスワードが違います' } }, status: :unauthorized
    end
  end

  # DELETE /api/v1/auth/logout
  def destroy
    sign_out current_user
    render json: { message: 'ログアウトしました' }, status: :ok
  end

  private

  def user_params
    params.require(:user).permit(:email, :password)
  end
end

```

## 解決法

そもそもCookieが設定されていなかった。
Rails Apiモードでは、デフォルトの設定でsessionが使えないようになっているのでそれが原因だった。sessionを使えるようにするために追記。([こちらの記事](https://qiita.com/k_kind/items/e26f03f4e24551b46b98)を参考にさせていただきました)

```ruby:application.rb
    config.middleware.use ActionDispatch::Cookies
    config.middleware.use ActionDispatch::Session::CookieStore
    config.middleware.use ActionDispatch::ContentSecurityPolicy::Middleware
```

サーバーを再起動して、再びログインすると、（ディベロッパーツールなどで確認）_session_idというCookieが設定されていた。ページを再読込してもログイン状態は保持されていた。
phpstanを用いた際のエラー解消

##~ no value type specified in iterable type array のエラー
以下のエラーに対する改善方法
自分的な解釈では"配列の中身の値に対しても型指定してください"みたいなイメージ

```                                     
  5      Function saleByTime() return type has no value type specified in iterable type array.                       
         💡 See: https://phpstan.org/blog/solving-phpstan-no-value-type-specified-in-iterable-type
```

解消後のコードは以下の通り

```php
// 以下の*部分3行の記述で返り値である$priceの連想配列の中身のキー、値に対する型を指定することで上記のエラーは解消される
/**
 * @return array<int, int> $unitSoldNumber
 */
function saleByTime(string $time): array
{
    $price = [
        1 => 100,
        2 => 150,
        3 => 200,
        4 => 350,
        5 => 180,
        6 => 220,
        7 => 440,
        8 => 380,
        9 => 80,
        10 => 100,
    ];

    // タイムセール割引
    $hourNumber = explode(':', $time);
    if ($hourNumber[0] >= 20 && $hourNumber[0] <= 22) {
        $price[7] /= 2;
        $price[8] /= 2;
    }

    return $price;
}
```
タブでの切り替えの実装　HTML CSS Javascript Bootstrap

<h2>タブの切り替え</h2>
![スクリーンショット 2021-08-25 22.25.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633266/bc36696a-677a-e6e7-83bd-165126a12730.png)

今回は、タブ切り替え機能を作成します！！！

なんだかんだで苦戦しました。というのもjQuery UIというものを使用すれば、
”簡単”にタブの導入ができるみたいなのですが、うまく導入できなかったのか、
変な動きをしてしまったので諦めました・・・・。

ので、以下のyoutube動画を参考に実装しましたが、
私はBootstrapを使ってるため、以下の動画とコードは完全一致していませんので、
ご注意ください！！！

https://www.youtube.com/watch?v=oFsikGJNb9Q



<h2>HTMLから書く！！！！</h2>


```perl:views/users/show.html.erb
#まず、タブの見出し（タイトル）を作成　ulタグで囲み、liで見出し書きます！！
  <ul class="nav nav-tabs" id="tabs">
      <li class="nav-item"><a class="nav-link active" href="">Introduction</a></li>
      <li class="nav-item"><a class="nav-link" href="">Status</i></a></li>
      <li class="nav-item"><a class="nav-link" href="">Activity</i></a></li>
  </ul>

#以下にそれぞれのタブの内容を書きます。全体はulタグで囲み、それぞれのタブの中身はdivタグで書く。
　<!--自己紹介のたぶの中身-->
  <ul id="tab-contents">
      <div class="tab_contents_item active" style="padding:10px;">
      　ここに１個目のタブに書きたい内容
　　　　　　　　　　　</div>

<!--ステータスたぶの中身-->
      <div class="tab_contents_item" style="padding:10px;">
       ここに２個目のタブに書きたい内容
      </div>

  <!--アクティビティたぶの中身-->
      <div class="tab_contents_item" style="padding:10px;">
　　　<!--グラフの記述-->
        省略します！！
    </div>
  </ul>

```


<h2>CSS！！！！</h2>

```perl:app/assets/stylesheets/users.scss

#activeがついてない時は、グレーになります。
.nav-link {
  background-color:#bbb;
}

#ホバーした時の記述
.nav-link:hover {
  opacity: 0.7;
  transition: 0.3s;
}

#「tab_contents_item」は通常時は何も表示されないようにします！！！
.tab_contents_item{
  display:none;
}

#activeがクラス名についたら表示されるようにします。
.tab_contents_item.active{
  display:block;
}
```

Bootstrapを使用してタブを実装してるのでCSSはかなりスッキリします。
さてJavascriptでやるのは、
タブがクリックされたらクリックされたタブと中身にactiveクラスを付与！
それ以外のタブ達からはactiveを削除！するということになります！！！

<h2>Javascript記述</h2>

```perl:app/assets/javascripts/application.js
#ターボリンクを無効にしないと、リロードしないと動かない現象が起こります。。。
document.addEventListener("turbolinks:load", function() {
#getElementsByClassNameで、クラスnav-linkを捕まえます。aタグのクラスですね。
const tabs = document.getElementsByClassName("nav-link");
#タブの中身も捕まえます。
const tab_contents = document.getElementsByClassName("tab_contents_item");
#不安だったら以下で、捕まえられてるか確認する。
// console.log(tabs);
// console.log(tab_contents);

#タブが何個あっても問題ないようにfor文で回していきます。
for (let i = 0; i < tabs.length; i++){
tabs[i].addEventListener("click",function(e){
  e.preventDefault();

  for (let j = 0; j < tabs.length; j++){
    tabs[j].classList.remove("active");
  }
  for (let j = 0; j < tabs.length; j++){
    tab_contents[j].classList.remove("active");
  }
  tabs[i].classList.add("active");
  tab_contents[i].classList.add("active");
});
}
})
```

for文の中身を詳しくみていきます。
仮にタブ[0]　→一個めのタブとします。
```tabs[i].addEventListener("click",function(e){```
タブ[0]がクリックされたら、、以下で全部のタブのactiveをハズします。
```for (let j = 0; j < tabs.length; j++){
    tabs[j].classList.remove("active");}```
さらにタブの中身のactiveもハズします＝非表示になります。
```for (let j = 0; j < tabs.length; j++){
    tab_contents[j].classList.remove("active");
  }```
その上で、クリックされてるタブ[0]と中身にactiveを付与します＝表示される
```tabs[i].classList.add("active");
tab_contents[i].classList.add("active");```

一回全部activeをはずすので大丈夫！？かと不安になりますが、高速で処理されるので
全然わかりません！！！
【SwiftUI】背景タップで TextField() を下げる

#目的
・背景をタップすることで TextField() を下げる

#使用する場面
・チャットアプリ
・文字を入力するもの全般

#重要なプログラム

### ① : タップを検知する

```
// ① : タップを検知する
.onTapGesture {
    // TextField() を下げる関数の呼び出し
    UIApplication.shared.closeKeyboard()
}
```

### ② : TextField() を下げる(閉じる)

```
// ② : TextField() を下げる(閉じる)
extension UIApplication {
    func closeKeyboard() {
        sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}
```

#完成

```swift:ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var name: String = ""

    var body: some View {
        ZStack {
            // 背景はオレンジ色
            Color.orange
                .opacity(0.4)
                .edgesIgnoringSafeArea(.all)
                // ① : タップを検知する
                .onTapGesture {
                    UIApplication.shared.closeKeyboard()
                }
            
            VStack {
                Text("Input: ") + Text(name)
                TextField("Placeholder", text: $name)
                    .padding()
                    .border(Color.white, width: CGFloat(3))
            }
        }
    }
}

// ② : TextField() を下げる(閉じる)
extension UIApplication {
    func closeKeyboard() {
        sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

```

#確認

### extension とは
既にあるクラスに機能を追加する

### TextField() を上げるには
UIResponder.resignFirstResponder (上げる)
↓
UIResponder.keyboardWillShowNotification (下げる)

# 参考文献

https://d1v1b.com/swiftui/close_keyboard

https://github.com/daisuke-t-jp/SwiftUITextFieldCloseKeyboardSample/blob/master/SwiftUITextFieldCloseKeyboardSample/ContentView.swift
【VSCode】保存時に一時的に自動フォーマットを行わない（formatOnSaveを無効にする）


#結論
`Ctrl + K` ⇒ `Ctrl + Shift + S`

~~Macの場合は`Command + K + S`だそう（試してないです）。~~
Macの場合は`Command + K` ⇒ `S`でした...。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874156/254e91f1-0cdd-e186-4869-3abd1ace848b.png)


#関係ない話
Googleで検索するとsetting.jsonを開いてformatOnSaveを無効化しよう！という解決策がヒットします。

１ファイルだけフォーマットしたくないだけなのに、いちいち設定変更するのもなあ...と思い`Ctrl + P`でコマンドパレットを開いて、「保存」で検索したところ普通にコマンドがありました。

ググる前に自分で検索かけてみると、その時調べるつもりのなかった優良コマンドに出会えることもありそうなので、ちょくちょく検索かけてみようと思います:v:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874156/f6305822-36bd-193a-5018-a6e18e824664.png)
ts-nodeを実行したらCannot find name 'console'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.

#結論
以下を実行

```
npm install @types/node --save-dev
```

#経緯
某udemyのtypescript講座を受講中、ts-nodeを実行してみてくださいと言われ、実行してみたら以下のエラーが発生

```
Cannot find name 'console'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.
```

ググったらすんなり出てきた
https://stackoverflow.com/questions/42105984/cannot-find-name-console-what-could-be-the-reason-for-this/42106036
localStorageを使ってブラウザにデータを保存する

#概要
localStorageを使用することで、ブラウザにデータを保存し、同じブラウザでページを再訪した際に、保存されていたデータを使用することができます。

##用途例
一例ですが、以下のような場合など。
- ２回目以降の訪問時には、特定のコンテンツを表示させない
- ポップアップウィンドウなどで「次回以降は表示させない」チェックを入れて閉じると、次回以降表示させない

##使用する際の注意点
- `key`と `Value`のセットでブラウザにデータが保存される
- 格納きる値は、文字列（String型）データのみ
- 複数データをまとめて保存する場合は連想配列（JSONデータ）を文字列に変換して格納するとよい
- 格納可能な容量は5Mbyteまで
- ブラウザに保存された値はJavaScriptでアクセスが可能なため、セキュリティ上問題ないデータのみを格納すること

##セッションストレージ / ローカルストレージ の違い
以下、引用。
https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

- セッションストレージ (`sessionStorage`) は、各オリジン毎に分割された保存領域を管理し、これはページセッションの間 (ブラウザーを開いている間、ページの再読み込みや復元を含む) に使用可能です。
- ローカルストレージ (`localStorage`) も同様ですが、こちらはブラウザーを閉じたり再び開いたりしても持続します。

#LocalStoage 基本操作

##保存/取得/削除
localStorageが利用可能かを判定する。

```index.js
  if (!window.localStorage) {
    console.log("localstorage非対応");
    return;
  }
```

`localStorage`にデータを保存する。

```index.js
  let key = 'testKey';
  let val = 'hogehoge';
  window.localStorage.setItem(key, val);
```

`localStorage`からデータを取得する。

```index.js
  let key = 'testKey';
  let getValue =  window.localStorage.getItem(key);
  console.log(getValue);
```

`localStorage`から、あるKeyのデータを削除する。

```index.js
  window.localStorage.removeItem(key);
```

`localStorage`から、全てのデータを削除する。

```index.js
  window.localStorage.clear();
```

##連想配列（JSONデータ）を格納する場合

ひとつのkeyに対して、複数データを保存したい場合は、連想配列でデータを定義し、`JSON.stringify()`で文字列型に変換してから格納する。

```index.js
  let key = 'testKey';
  let data = {
    'data1': 'hoge',
    'data2': 'huga'
  };
  let val = JSON.stringify(data);
  window.localStorage.setItem(key, val);
```

データを取得する際は、 `JSON.parse()`で文字列型から連想配列に変換します。

```index.js
  let getVal = window.localStorage.getItem(key);
  let getData = JSON.parse(getVal);
  console.log(getData.data1);  //'hoge'
  console.log(getData.data2);  //'huga'
```

`JSON.parse()`を使用する際は、エラー処理を入れておくとベターです。

```index.js
  try {
    let getData = JSON.parse(getVal);
    console.log(getData.data1);  //'hoge'
    console.log(getData.data2);  //'huga'
  } catch(e) {
    // エラー時の処理
    console.log(e); // SyntaxError: Unexpected token h in JSON at position 0
  }
```

##ブラウザでの確認方法

ブラウザの開発者ツールなどで、保存されている値を確認できます。

下記はChromeの場合の例です。
「Application」タブ →「Storage」→「Local Storage」→ ドメイン名 を選択すると表示されます。
![screenshot_localStorage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253713/fb7af45a-c848-3a59-5c9d-15a3f943c367.png)

#参考

https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
CentOS7でコンテナ上で動作させる


##【環境構築】

```
$ docker pull centos:centos7
$ docker images
centos                           centos7        8652b9f0cb4c   9 months ago    204MB
$ docker run -itd --privileged -p 8080:80 --name centos7 centos:centos7 /sbin/init
```

- -it コンテナのプロセスにttyを割り当てる
- -d コンテナをバックグラウンドで実行
- –p ポート指定（ここではsshアクセスポートの変更）
- –privileged systemctlコマンドを使えるようにしたいのでこのオプションを追加
- –name 作成したコンテナに名前をつける
「–privileged」オプションを追加しないと、CentOSを使用する際に必要となる「systemctl」コマンドなどが利用できないので、使いたい方は追加しましょう。

また、今回は作成したCentOSへsshアクセスをさせたいので、「-p」オプションを使用し、自身のポート番号「8080」へアクセスした際に作成したコンテナへアクセスできるようにします。

## 【起動状態確認】
```
$ docker ps
37fecef9bde0   centos:centos7            "/sbin/init"             6 minutes ago       Up 6 minutes       0.0.0.0:8080->80/tcp, :::8080->80/tcp   centos7
```

root権限での状態で操作

```
$ docker exec -it centos7 /bin/bash
```
##【初回操作】
```
$ yum -y update
$ yum -y install iproute
```

## 【ssh導入】
```
$ yum -y install openssh-clients
```


## 【削除】

```
$ docker rm centos7
```


参考資料（いつもありがとうございます）
---

- [【Docker】CentOS7,8をコンテナ上で動作とSSHアクセスまで](https://genchan.net/it/virtualization/docker/8547/)
- [OpenSSH : パスワード認証](https://www.server-world.info/query?os=CentOS_7&p=ssh)
S3、cloudfrontの設定をしたのにaccess deniedがwebページで表示されてしまう人向けの解決法

<h4>
前提条件
</h4>
<p>
この現象が起きている人の前提条件として、S3に表示させるindex.htmlなどのオブジェクトを設定し、バゲットポリシーも問題なく設定し、かつCloudfrontも設定し終わってるのにaccess deniedが出る人向けです。
<br/>
特に他ページは普通に画面が表示されるのに特定のページだけaccess deniedが出る等の現象の方向けになっています。
</p>

<h4>
回答
</h4>
<p>
ルーティングはS3によって管理されていないため、常にindex.htmlにアクセスするようにルールを構成する必要があります。
<br/>
具体的に何をすればよいかといいますと
cloudfrontのエラーページを設定するところにアクセスルート先を設定してください。
</p>
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662158/ed8f8a20-bf33-6483-53f0-d39a14db42b6.png)
こうすれば403(access denied)のエラーページ等のリダイレクト先が指定したindex.htmlに変更されます。
かなり雑に書いてしまいました。ご参考になれば幸いです。
もしほかの理由等があるのでしたら、OAIとバケットポリシーが原因である可能性が高いと思います。
以上、何とかなったことを祈ります。
</p>
クラスパスによって参照されているアーカイブ: /path-to/bin/bootstrap.jar は存在しません。

# 事象 : EclipseでTomcatを起動しようとしたらbootstrap.jarがないと言われた
- 環境
    - macOS BigSur バージョン11.3.1
    - Eclipse IDE for Enterprise Java Developers Version: 2020-12 (4.18.0)
    - HomebrewでインストールしたTomcat9

久しぶりにEclipseでTomcatを起動しようとしたら・・・起動しない！

```text
クラスパスによって参照されているアーカイブ: /usr/local/Cellar/tomcat@9/9.0.48/libexec/bin/bootstrap.jar は存在しません。
```
![スクリーンショット 2021-08-25 21.57.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/dbfcf4e0-572a-de25-f7fe-19d4ea9f7907.png)

## 原因 : マイナーバージョンが変わったことでTomcatのパスが変わったから
[設定] > [サーバー] > [ランタイム環境]をみてみると・・・「指定されたTomcatのインストール・ディレクトリーは存在しません。」と。
![スクリーンショット 2021-08-25 21.59.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/98924cea-9c75-7340-2e11-036d8c37a3f2.png)
そういえば・・・先日HomebrewでNode.jsをインストールする時に`brew upgrade`したような・・・そこでTomcat9が更新されたようです。
それに伴いディレクトリ名がバージョン番号なので、パスが変わってしまったことが今回の原因です。

```zsh
# 以前、「9.0.48」だったバージョンが「9.0.52」になっている・・・
$ ls /usr/local/Cellar/tomcat@9 
9.0.52
```

### 対応 : 正しいパスをランタイム環境に設定する
1. [ランタイム環境] > 対象のTomcat選択 > [編集]でダイアログを表示
1. [Tomcatインストール・ディレクトリー]に新しいバージョンのディレクトリを設定する
    - ![スクリーンショット 2021-08-25 22.22.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/2c17a34d-d3c4-22a2-9879-b137833fa381.png)
1. Tomcatをもう一回起動
    1. パスを変更したのに変更前のパスで同じエラーが表示される場合
        1. [サーバー]タブ > Tomcat選択 > [プロパティー]でダイアログ表示
        1. [一般] > [ロケーション]が`[ワークスペース・メタデータ]`となっていたら[ロケーションの切り替え]で`Server/localhostのTomcat~~`に切り替える
            - ![スクリーンショット 2021-08-25 22.37.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/4199b8d1-5691-e1be-1e27-1205268de90b.png)
        1. [適用して閉じる]でダイアログを閉じて、Tomcatをもう一回起動

## 他の原因
今回は違うけど、将来のためにメモメモ

- サーバランタイムが設定されていない > [Eclipseでbootstrap.jarが見つからないと怒られる - こんなソースに誰がした](https://tech-son.hatenablog.jp/entry/2018/02/23/200300)
TableViewのHeaderの高さをif文で決める（復習）

#今回の内容

* TableViewに表示するHeaderの高さをif文で設定します。


#コードと簡単解説

* Headerの高さを設定する時は、`func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {}`を使用します。

* 今回は、sectionが0の時と1の時だけHeaderの高さを変更します。

```Swift:
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        
        if section == 0{
            
            return 90
            
        }else if section == 1{
            
            return 60
            
        }else{
            
            return 30
            
        }
        
    }
```

#終わり
ご指摘、ご質問などありましたら、コメントまでお願い致します。
CSVを読み込もう

# 初めに
CSVを読み取って処理するのによくお世話になる**CSVHelper**

でも動作テストしてもらってたら
<font color="red">このファイルを読み込むとエラーになるんよね。</font>:sunglasses:と。

***めんどくせぇなぁ・・・・・***と思いつつ、対象のファイルをもらってテスト。

```
番号,名称1,名称2,名称3,備考
1,hoehoe1,hoehoe2,hoehoe3,ugauga
:
:
# 数千行
:
:
9811,hoehoe1,hoehoe2[EOF]
```
(実際のカラム数は90を超えます)<br><br>

・・・・・・・・・・・はぁぁ？？
カラム数が異なる行あるんだけど？？
いや・・・中見たらわかるやん。それ。
<br><br><br><br>


# 読み込みに使うメソッド
悔しいので実装したコードを備忘録として。

```cs
private DataTable CsvToDataTable(string fileName)
{
    try
    {
        var dataTable = new DataTable();
        using (StreamReader streamReader = new StreamReader(fileName, Encoding.GetEncoding("SHIFT-JIS")))
        {
            using (CsvReader csvReader = new CsvReader(streamReader, CultureInfo.InvariantCulture, false))
            {
                using (CsvDataReader csvDataReader = new CsvDataReader(csvReader))
                {
                    dataTable.Load(csvDataReader);
                }
            }
        }
        return dataTable;
    }
    catch (Exception)
    {
        throw;
    }
}
```

# 追伸
さらにテストすると、途中の文字列にカンマがある…
CSVファイルてゆうたやん？
AtCoderログ：0092 - ABC 215 C

# 問題

https://atcoder.jp/contests/abc215/tasks/abc215_c

## 問題文
> 文字列 $S$ の各文字を並べ替えて作ることが可能な文字列を辞書順にすべて列挙したとき、前から $K$ 番目にくる文字列を求めてください。

## 制約
> ・$1 \le |S| \le 8$
> ・$S$ は英小文字のみからなる
> ・$S$ の各文字を並べ替えてできる文字列は $K$ 種類以上存在する

# 回答
## 回答1 (AC)
文字列 $S$ の各文字を並べ替えた文字列を調べていくことになるので、next_permutation 関数を利用するのが簡単です。受け取った文字列 s を小さい順にソートしてから next_permutation 関数を k 回適用することで、所望の文字列を求めることができます。コードは以下のようになりました。

```C++:abc215c-1.cpp
#include <bits/stdc++.h>
using namespace std;
 
int main() {
  string s;
  int k;
  cin >> s >> k;

  sort(s.begin(),s.end());
  while ( k>1 ) {
    next_permutation(s.begin(),s.end());
    k -= 1;
  }

  cout << s << endl;
}
```

# 調べたこと
## [AtCoder の解説](https://atcoder.jp/contests/abc215/tasks/abc215_c/editorial) → [公式解説](https://atcoder.jp/contests/abc215/editorial/2484)
$S$ の文字列を入れ替えてできる文字列を列挙する方法と、回答1と同じように next_permutation を使う方法が紹介されていました。

## [AtCoder の解説](https://atcoder.jp/contests/abc215/tasks/abc215_c/editorial) → [ユーザ解説](https://blog.hamayanhamayan.com/entry/2021/08/21/235037)
next_permutation を使う方法が紹介されていました。

# リンク
## 前後の記事
- 前の記事 → [AtCoderログ：0091 - ABC 215 B](https://qiita.com/RoadLynton/items/31a62e3371abcd2cf1b3)
All-in-One WP Migrationでインポートしても復元されなかった原因

## 事の顛末
1. WordPressで作成されたHPの改修やるぜ
2. 本番環境にログインしAll-in-One WP Migrationをインストール後、データをエクスポート
3. ローカル環境を構築（local by flywheelやDocker等）し、データをインポート
4. ローカル環境で修正後、データをエクスポート
5. 本番環境にデータをインポート
6. 反映されてませんオワタ＼(^o^)／

## 環境
Lightsail

## 原因
<b>Apacheを実行しているユーザとWordPress上のユーザ権限が異なっている</b>

データをインポートしても反映されていない場合は、とりあえず下記２点をチェックしてみてください。
下記のようになっていると、この記事を読めば解決するかもしれません。
・FTPソフトで接続し、ファイルの所有者/グループを確認するとbitnami:bitnamiとなっている
・管理画面→テーマ編集画面に保存が表示されず「変更を保存するには事前にこのファイルを書き込み可能にする必要があります」等と表示されている



## 解決方法
<b>所有者/グループをbitnami:daemonにして、ファイルパーミッションを664、ディレクトリパーミッションを775にする</b>

### 手順らしきもの
まずはグループの確認のため、LightsailのブラウザーベースのSSHターミナルを使用してインスタンスに接続し、下記コマンドを入力する

```
$ less /opt/bitnami/apache2/conf/httpd.conf | grep User
```
多分`User bitnami`が表示されると思います。
FileZilla等のFTPソフトでファイルを見ると所有者/グループは`bitnami:bitnami`になってると思います。

ちなみにググると`less /etc/httpd/conf/httpd.conf | grep User`ととよくでてきたんですが、Lightsail内のhttpd.confのパスではありません。


続いて、ファイルの所有者/グループを`bitnami:daemon`変更するために以下のコマンドを打ちます。

```
$ sudo chown -R bitnami:daemon /opt/bitnami/apps/wordpress/htdocs/wp-content/themes/テーマのディレクトリ名
```

これで所有者/グループを`bitnami:daemon`に変更したので、次はファイルのパーミッションの変更です。

```
$ sudo find テーマのディレクトリ名 -type d -exec chmod 664 {} \;
$ sudo find テーマのディレクトリ名 -type d -exec chmod 775 {} \;
```

ググるとテーマのディレクトリ名のところはwordpressと記載されている記事が多く目につきました。
`sudo find wordpress -type d -exec chmod 664 {} \;`
`sudo find /srv/www/ -type f -exec chmod 664 {} \;`
とかみたいな感じでしたが、全部のファイルを変更するのが不安だったので、テーマのディレクトリ名にしました。

これにて作業は終了です。
無事に下記の変更が終わったので、All-in-One WP Migrationでファイルをインポートすると反映されました。
・所有者/グループをbitnami:daemon
・ファイルパーミッションを664
・ディレクトリパーミッションを775

余談ですが、所有者/グループがbitnami:bitnamiになっていても、FTPソフトを使ったファイルのアップロードでの上書きは可能でした。
少ないファイルの更新のみならFTPソフトで変更しちゃうのが楽だと思います。
Sourcetree でユーザ名を誤入力したり認証をやり直したかったりしたい場合は hostusernamemap などを消せ

# tl; dr

**※本当に物ぐさに色々吹っ飛ばすので注意してください**

```macOS:macOS+bash
rm -rf ~/Library/Application Support/Sourcetree
```

```windows:Windows+cmd
rmdir /s /r %LOCALAPPDATA%\Atlassian\SourceTree
```

# その他
macOSの場合キーチェーンアクセスに保存されているケースもある。適当に検索すれば引っかかるのでそれを消す(そっちの場合の対処は検索すればすぐに出てくるし……)。


# ネタ元など(感謝)
- https://qiita.com/Densetsu/items/d636b01dbb9bec915ade (先行者)
- https://community.atlassian.com/t5/Sourcetree-questions/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E5%90%8D%E3%82%92%E9%96%93%E9%81%95%E3%81%88%E3%81%9F%E3%81%9B%E3%81%84%E3%81%A7push%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%9B%E3%82%93/qaq-p/1012071
【エラー備忘録】MySQLの文法エラー

##状況
ローカル環境でLaravelからMySQLに接続している。
mySQLコマンドでテーブルを作成しようとした際、ターミナルでエラーが発生。

##エラー文
実際のエラー文はこちら。

```
ERROR 1064 (42000): You have an error in your SQL syntax; 
check the manual that corresponds to your MySQL server version 
for the right syntax to use near '-> id INTEGER PRIMARY KEY AUTINCREMENT,
name TEXT NOT NULL-> mail TEXT ,
ag' at line 2
```
文法エラーとのこと。

入力したコマンドはこちら。

```
mysql> create table people (
    -> id INTEGER PRIMARY KEY AUTOINCREMENT,
    -> name TEXT NOT NULL,
    -> mail TEXT,
    -> age INTEGER);
```


##解決策
誤：AUTOINCREMENT
正：AUTO_INCREMENT

アンダーバーが必要だった。

ここを修正して再度実行すると、テーブルが作成できた。

```
mysql> create table people (
    -> id INTEGER PRIMARY KEY AUTO_INCREMENT,
    -> name TEXT NOT NULL,
    -> mail TEXT,
    -> age INTEGER);
Query OK, 0 rows affected (0.02 sec)
```

###参考サイト
https://uxmilk.jp/12725
時間が経っても「買って良かった」と思っている本

この記事は以下のイベントに便乗して記載しています。

https://qiita.com/official-events/d409f91fc8b9b44cefb4


# 選択基準

ぶっちゃけ、新卒採用されてからの年数は、四捨五入すると20年になった年寄りエンジニアです。
この間、凸凹はありつつも、毎年のように「技術書」に区分される書籍を買い続けてきました。
購入した動機が満足できれば、その本は「買って良かった」ものでしょう。ですが、購入する動機は多様です。
必要に迫られて、興味があって、新しいナニカを求めて...

今回の記事では、買ってから年月が経ったけれど、現在も机の隣に置いてあって、ちょくちょくページをめくるような
頼りになる書籍を紹介したいと思います。

このような選択基準ですので、流行りもの（例えば、開発言語[^1]、開発環境）は含まれていません。
興味が削がれた方は、ぜひ、ここでブラウザバックを。


[^1]: たとえば「プログラミング言語C#」は日本語版が出る度に買い直してますし、毎度毎度「ためになるわ～」と思ってますが、でも今更C#2.0の本をオススメする気になりません。古い版はすっかりブックエンドと化しています。そんな感じです。


# オススメ度No.1「ふりかえり」関連

ぶっちゃけ、もっと早く（私が新入社員だった頃に）出版してほしかったと恨めしい思いをした書籍達です。
ふりかえりの意義とか目的とか種類とか設計とか、知らないままだと人生損してると思います。

タイトルに「アジャイル」と入っていますが、**アジャイルに限定するのはもったいない** です。
**人生そのもの** に使えます。

## アジャイルレトロスペクティブ

2007年9月発行。次の本が出るまで唯一のバイブルでした。

https://www.amazon.co.jp/dp/4274066983

## アジャイルなチームを作る ふりかえり ガイドブック

2021年2月発行。唯一の新しい本ですが、20年後も使える確信があります。

https://www.amazon.co.jp/gp/product/4798168793/

筆者が出している同人誌もオススメしたいところですが、今回は割愛。
同人誌もpodcastも熱い、厚い。
気になる方は びば氏 ( @viva_tweet_x ) のページへどうぞ。


# オススメ度No.2「プロジェクト」関連

まずはソフト開発で役に立って、
「人生のイベントひとつひとつがプロジェクトじゃん」と気づいてからは always 役立っている書籍達です。

## PMBOK Guide

2017年発行の **英語版** 。
敢えて英語版にしたのは、平素な英語なので日本人でも読めるのと、どの英単語が使われているかでニュアンスが伝わる＋Google先生に尋ねやすくなるので。

項目項目は「知ってる」話が殆どですが、章立てされて１冊にまとまっている（整理されている）ことに価値がある書籍です。
開発プロジェクトで実施するアレヤコレヤが、何を目的・ターゲットに、いつ実施するものなのか
体験から整理した知見に整えるのに便利です。

https://www.amazon.co.jp/dp/1628251840

## 実践・リスクマネジメント

2003年発行で絶版済み。中古でも入手困難性が上がってきている書籍。
プロダクトリスクとプロジェクトリスクとビジネスリスクと金融リスクがごっちゃになっている本[^2]にばかり出会って大混乱に陥っていた私の救世主です。

[^2]: プロジェクトリスクを勉強していたのに、気づけばBCPが出てくる本なんか捨ててしまえ。プロダクトリスクの話かと思ったら金融リスクの話になっている本も捨ててしまえ。

https://www.amazon.co.jp/gp/product/482011767X/


## 「派生開発」を成功させるプロセス改善の技術と極意

2007年発行。
XDDPやPFDといった技術そのものも開発がある限り使えるとは思いますが
その背景にある考え方（物事の進め方、問題への取り組み方）は本気で普遍的だと思います。
散文的な筆者の随筆部分こそ、読み込んでほしいところ...。

https://www.amazon.co.jp/dp/4774132497

PFDは日常生活でも業務フローでも使えるので、今や日々の業務に欠かせないです。
それにPFDは「ふりかえり」のインプットになるので...

----

四捨五入して20年の中で、出せたのが5冊とは少ない気もしますが...
はやりのアジャイルやDevOpsやAIやらは、きっと別の記事があると思いますので
私の記事としてはこんなものかなと。


ちなみに、以下のテーマの良本をご存知の方は、是非コメントでオススメください。
そこそこの冊数は買っているのですが、広く強く熱くオススメできる本には出会えてません...。
* 技術系の日本語の書き方、文書構成の作り方
* 技術系の英語の書き方 (メール用、文書用、Git用があるとなお嬉しい)
* アプリケーションアーキテクチャ (BCE, MVVMの類い)
* 上記よりレイヤがちょっと低い (実装よりな) デザインパターンの類い
【Laravel】ローカル環境でMySQLへ接続する

ローカル環境で、LaravelからMySQLへ接続する方法の備忘録。

```
$ mysql.server start
//MySQLを起動

$ mysql -u root -p
//ルートユーザーで接続
//パスワードを求められるので入力する

$ show databases;
//現在存在するDBを確認してみる

$ create database DB名;
//DBを作成する

$ FLUSH PRIVILEGES;
$ ALTER USER 'root'@'localhost' IDENTIFIED BY 'secret';
//rootユーザーのパスワードを'secret'に変更する

$ exit
//一度MySQLを終了する

$ mysql.server restart
$ mysql -uroot -p
//再度MySQLを起動し、ログインする

```
<br>
次に、Laravelの.envファイルを修正する。
DB_DATABASEの値を先ほど作成したDB名に、DB_PASSWORDを先ほど設定した「secret」に変更する。

```
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=DB名
DB_USERNAME=root
DB_PASSWORD=secret
```

.envファイルを修正した後は、キャッシュをクリアする。
続けてマイグレーションを実行し、DBにテーブルが作成してみる。

```
$ php artisan config:cache
$ php artisan migrate
```

```
$ mysql -uroot -p
//MySQLにログインする

$ show databases;
$ use DB名;
$ show tables;
```
これでマイグレーションによってテーブルが作成されていることが確認できれば、接続完了。

<br>
####参考サイト
https://yaba-blog.com/laravel-db/
レンダリングを妨げる要素をなくしてもまだ長いTotal Blocking Timeを改善する

Page Speed Insightを実行したところTotal Blocking Timeが600msになっていることを発見しました。CSSやJavaScriptは可能な限り遅延読み込みさせています。
改善できる項目をみたところ「レンダリングを妨げる JavaScript を削除する」 という項目はありません。
この場合どうしたらTotal Blocking Timeを改善することができるのか調べてみました。
https://web.dev/lighthouse-total-blocking-time/
https://web.dev/long-tasks-devtools/#what-is-causing-my-long-tasks
これらの記事を参考にしました。

## Total Blocking TimeはCPU性能が関わっている
下記の画像は古いPC(MacBook Pro 2015)と新しいPC(MacBook Pro 2019)のLighthouseの結果の比較です。（念の為3回行いスコアに大きな変動がないことを確認しました）
￼
古いPC(MacBook Pro 2015 core i7)
![MacBookPro2015の結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272109/4ac2e121-1ffd-c798-2897-00c9ffda954a.png)

新しいPC(MacBook Pro 2019 core i9)
![MacBookPro2019の結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272109/749a1da6-5be9-6ee4-c761-fd140fc8d575.png)


**古いPCではTotal Blocking Timeが1600msなのに対し新しいPCでは350msと大きく違いが出ています。**
同じ時間・Networkで計測しましたのでこれはCPU性能によって左右される値だと考えられます。

実際[developer.chrome.comのブログ](https://web.dev/long-tasks-devtools/)ではJavaScriptのコードがCPUのメインスレッドを占領してUIをフリーズさせると書かれています。

というわけで次は重いJavaScriptのコードを特定していきます。

## 重い処理を特定する
ChromeのDevToolsのPerformanceパネルを使用します。
文字で説明しづらいですが下記の画像のうちTaskと書かれた部分（青色で囲った部分）にマウスを移動すると`Long task look~~~`と出てきます。
ページが表示されるまでこのTaskがいくつもあって、それらが50msを超えた場合Long taskと判定され50msを超えた分Total Blocking Timeとしてカウントされるようです。
（正直ここの解釈は自信がありませんが、Total Blocking Timeの値とこの50msを超えた分のLong taskの合算値が等しいように見えます。詳しくは[原文](https://web.dev/long-tasks-devtools/)を読んで判断してください。）
このTaskをクリックすると黄色で囲った部分のような表示が現れます。
![LongTask.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272109/bfdb0bc2-995d-423c-0334-4121a61cefb0.png)

上記の黄色で囲った部分でSummaryの隣のBottom-Upのタブを開くと下記のような表示になります。
![重いタスク.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272109/70290cc5-cea6-db1f-53f0-d876d6461fa5.png)
この画像に表示されているタスクではjavascriptの処理が重そうです。（計測のスクリプトですね。。。）
右端で青く囲った部分にファイル名がでるので参考にしてください。
また、画像の範囲には表示されていませんがここはjavascriptだけでなく、レイアウトツリー構築の時間も表示されます。
（詳細は割愛しますがBEM記法にすると早くなるとかimgタグにwidth/heightを入れる、余計なCSSは省くといったテクニックがあります。）

:::note info
私の環境だけかもしれませんが、なんども下記画像のボタンで計測をしていると数値がめちゃくちゃ早い異常値が出たりするのでその場合は新しいタブを開いて再度計測することをおすすめします。
:::

![計測ボタン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272109/7c623c32-1ada-689c-a9b8-ad8e263b33fa.png)

:::note info
また、このTaskの実行時間は前述したようにCPU性能によって大きく変わりますので下記画像のようにスロットリングをすることをおすすめします。
:::
![CPUスロットリング.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272109/4a86996a-66be-20d3-f74a-8abeb3391556.png)
Pickerが表示できない時に確認すること（メモ）

# 目的
- Expo アプリでセレクトボックス（Picker）を設置する
 - 設置したのに表示されない
 - Pickerが操作できない。等の問題を解決する

# 記事の意図
- ExpoのPickerライブラリを設置する非常に簡単な操作ではあるが、ちょっとわかりにくい初歩的なミスで思うように設置できなかった
- 同様の問題に当たった人がすぐに解決できるように記事化する
- 初歩的すぎて記事化を躊躇したが、今後ハマる人（自分も含めて）の時間を節約するため、残すことにした

# 環境
- Expo 4.10.1
- 使用する Picker @react-native-picker/picker

# 設置と失敗
## 導入手順 Pickerの導入方法
- ライブラリの読み込みとコンポーネントの設置

```
import {Picker} from '@react-native-picker/picker';

// ===省略
render() {
 return(
 <Picker
  style={スタイルを設定}
  selectedValue="初期値"
  onValueChange={(itemValue, itemIndex) =>
   console.log("選択で実行")
  }>
  <Picker.Item label="test1" value="test1" />
  <Picker.Item label="test2" value="test2" />
 </Picker>
 )
}

```

## 失敗と原因
### Pickerが画面に表示されない
- 事象：Pickerそのものが画面に表示されない
- 原因：スタイルを指定していない
- 対策：styleで縦幅、横幅を指定する

```
picker:{
    height: 100,
    width: SCREEN_WIDTH
  },
```

### Pickerが動かない
- 事象：Pickerは表示されているが、ドラッグしても反応がない
- 原因：別のコンポーネントが上に重なっている
 - たとえば次の画面では、Inputのラベル要素がPickerに干渉してしまい、Pickerの操作ができない状態となっていた

```javascript:コンポーネント
<View style={styles.container}>
 <Text style={styles.name}>選択してください</Text>
 <Picker
  style={styles.picker}
  selectedValue="test"
  onValueChange={(itemValue, itemIndex) =>
  console.log("itemValue")
 }>
  <Picker.Item label="Java" value="test" />
  <Picker.Item label="JavaScript" value="test1" />
 </Picker>

  <Input label="そのた" style={styles.input} 
    placeholder="自動で選択肢に追加されます" onChangeText= 
  {this.other}/>
</View>
```

- 対策:
 - Viewを分けてるなどで画面を整理し
 - styleでは同じレベルのflexを適切に設定し、重ならないように明記した

```javascript:コンポーネント
<View style={styles.container}>
 <Text style={styles.name}>選択してください</Text>
 <Picker
  style={styles.picker}
  selectedValue="test"
  onValueChange={(itemValue, itemIndex) =>
  console.log("itemValue")
 }>
  <Picker.Item label="Java" value="test" />
  <Picker.Item label="JavaScript" value="test1" />
 </Picker>

 <View style={styles.inputForm} >
  <Input label="そのた" style={styles.input} 
    placeholder="自動で選択肢に追加されます" onChangeText= 
  {this.other}/>
 </View>
</View>
```

```json:スタイル
  picker:{
    flex:3,
    height: 100,
    width: SCREEN_WIDTH
  },
  inputForm: {
    flex: 1,
    padding: 20,
    width: SCREEN_WIDTH,
    alignItems: 'center',
    backgroundColor: '#fff',
  },
```

### ライブラリが古くないか確認

`react-native` のPickerは非推奨となっている。

> https://reactnative.dev/docs/picker

Pickerを利用するときは `@react-native-picker/picker` を利用する

> https://docs.expo.dev/versions/latest/sdk/picker/
Railsで無限スクロールの導入

使用環境
Ruby2.6.8
Rails6.1.4

#完成イメージ
TwitterやYoutubeのように、ページ下層部に到達したときに次のページを自動的に読み込む機能の実装

#前提
RailsアプリケーションにjQuueryの導入をしている必要があります。
jQueryの導入をしていないちょ、という方はこちらを参考に。

https://qiita.com/tatsuhiko-nakayama/items/b2f0c77e794ca8c9bd74

#処理の流れ
①kaminariのインストール
②jscrollの導入
③ページネーションの実装
④無限スクロールの実装

##①kaminariのインストール
おなじみgemファイルを操作してbundle installするだけです、はい。
最後の行とか、適当な場所に追加しましょう。

```:Gemfile
gem 'kaminari'
```

```
$ -> bundle install
```

##②jscrollの導入
「view/application.html.erb」など、無限スクロールを実装する箇所のheadに以下の記載をしてください。

```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script>
```

##③ページネーションの実装

まずはコントローラで、viewに渡したいデータをDBから取り出します。

```posts_controller.rb
def index
    @post_data = Post.all.order(created_at: :desc)
    @posts = Kaminari.paginate_array(@post_data).page(params[:page]).per(10)
end
```

これで「@posts」をviewに渡すことができました。次はviewファイルを変更しましょう。

```posts/index.html.erb
<div class="scroll-list jscroll">
  <% @posts.each do |post| %>
    <p><%= post.name %></p>
  <% end %>
  <%= paginate @posts %>
</div>
```
この「<%= paginate @posts %>」は必ず書くようにしてください。ないとエラーになります。

ここまでの段階でページネーションの実装は完了しました。
最後に今回の目的である無限スクロールを実装しましょう。

##④無限スクロールの実装
無限スクロールは②で導入したjscrollのおかげで以下のように記載することで、実装できます。

```
$(function() {
    $("無限スクロールさせたいクラス名").jscroll(
        オプションを記述できます
)
});
```

③で記述したhtml.erbで無限スクロールを実装する際は以下のように書くこともできます。

```
var jscrollOption = {
    loadingHtml: '読み込み中・・・', //記事読み込み中の表示
    autoTrigger: true, // 自動で読み込むか否か、trueで自動、falseでボタンクリックとなる。
    padding: 20, // 指定したコンテンツの下かた何pxで読み込むかを指定(autoTrigger: trueの場合のみ)
    contentSelector: '.jscroll' // 読み込む範囲の指定
};
$('.jscroll').jscroll(jscrollOption);
```

以上で無限スクロールの実装が完了します。
たったこれだけでUIは劇的に向上するとｐ思うので、ぜひ皆さんも無限スクロールを導入してみましょう。


参考記事
>https://qiita.com/s_yasunaga/items/ab17424912ee90f853d7
>https://since-inc.jp/blog/7813
【UiPath】ユーザアカウントのフルネームを取得する

アカウントのフルネームを取得する手段です。
ユーザ名やドメイン名は"環境変数を取得"アクティビティとかEnvironmentクラスで簡単に取れますが、フルネームは取れません（たぶん）。
方法は色々ありそうですが、PowerShellを使うのがシンプルなので書き残しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578020/3ce17b69-d1bd-7dbf-652e-497c86601328.png)

<b>PowerShell を呼び出し（Invoke Power Shell）</b>のアクティビティを使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578020/cf777139-cab6-0d3c-3edc-c92df8fc98b4.png)

プロパティは以下の通りです。
・<b>TypeArgument</b>をStringに
・<b>スクリプト入力</b>のチェックをオンに
・<b>出力</b>にCollection\<String>型の変数に
・<b>コマンド テキスト</b>に以下のコードを入力
<b>```"$dom = $env:userdomain; $usr = $env:username;([adsi]""WinNT://$dom/$usr,user"").fullname"```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578020/1fd6eeba-fbdc-9efd-3cf4-8e6c9528daef.png)

出力は配列で返ってくるので(0)を指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578020/f67b03b6-3341-35c4-99f1-18c11c3f591c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578020/55a4f225-13ee-f8cc-2823-80b626e2a592.png)

完了です。お疲れ様でした。

## 参考
https://www.it-mure.jp.net/ja/windows/%E7%8F%BE%E5%9C%A8%E3%81%AE%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%AE%E3%83%95%E3%83%AB%E3%83%8D%E3%83%BC%E3%83%A0%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B/960264452/

## 動作環境
* UiPath Studio Pro 2021.6.0 Community License
【React Final Form】 name="users[0].name" にすればオブジェクト・配列も管理できるよ【小ネタ】


手前味噌ですが、**React Final Form** の使い方を１から知りたい場合は、 ↓の記事をどうぞ。

https://qiita.com/honey32/items/c919aacbbf404db1b8b8

**React Final Form** の魅力は、 `name` Prop を使ってカンタンにフォームの状態を管理できるという点です。

その `name` に、ドットを含む文字列 （例 `"users[2].name"`, *dot-and-bracket syntax* と呼ぶようです） を渡すことで、フィールドの値を、オブジェクトや配列の値として管理することが出来ます。


```tsx:array.stories.tsx
export const Array = () => {
  const handleSubmit = () => {};
  return (
    <Form onSubmit={handleSubmit}>
      {({ handleSubmit }) => (
        <form onSubmit={handleSubmit}>
          {[0, 1, 2].map((i) => (
            <div key={i}>
              <Field name={`users[${i}].name`} component="input" placeholder="name"/>
              <Field name={`users[${i}].email`} component="input" placeholder="email"/>
            </div>
          ))}
          <h4>Value</h4>
          {/* ここから、フォームの値（values)を表示 */}
          <FormSpy>
            {({ values }) => (
              <pre>
                <code>{JSON.stringify(values, null, 2)}</code>
              </pre>
            )}
          </FormSpy>
        </form>
      )}
    </Form>
  );
};
```

## スクリーンショット

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234029/3931700f-eab5-4b56-1fed-505e58cd0958.png)

# 参考記事

https://final-form.org/docs/final-form/field-names
git hubにzipfileからDLしたものを統合させたいとき

<h2>Githubでのコミット，ローカルでのコミットでそれぞれ共通の祖先がない状態から行い、プルリク、マージできない状況になった。</h2>
通常のマージでは，共通祖先から分岐したブランチ同士をつなげる．ので通常禁じ手となるそう。

しかし--allow-unrelated-historiesをつけ，共通の祖先でないブランチ同士でもマージ作業ができるようになった。

<h2>エラー文</h2>
ローカルとリモート繋ぐためにpullしようとしたが

```ruby:
fatal: refusing to merge unrelated histories
```
となる。

<h2>ブレイクスル</h2>
git mergeコマンドに--allow-unrelated-historiesのオプションを使いして実行する．

```
git pull --allow-unrelated-histories origin develop(このdevelopはマージしたいもの)
```
大量のコンフリクトが発生した。
ローカルからpushしたたものを今回、優先したかったため

今回は、
git checkout --ours とし
コンフリクト起きたとき　現在のcheckoutが優先される　コマンド使用し、解消

```
[今いるとこ/merging]—マージ途中で止まっている…
git checkout --ours 
```