OmniAICreator/Qiita-1.07M huggingface dataset:
ElmでBMI計算機をつくってみた

ElmでBMI計算機をつくってみた。

## BMIとはなにか
BMI(Body Mass Index)とは、肥満度を表す指標として国際的に用いられる体格指数である。
一般的なBMIの計算式は、
`[体重(kg)]÷[身長(m)の2乗]`
である。

日本肥満学会の定めた基準では、

* 18.5未満が「低体重（やせ）」
* 18.5以上25未満が「普通体重」
* 25以上が「肥満」

である。

## 画面イメージ
BMIの意味がわかったところで、まずはBMIを計算する画面をイメージする。
今回は下記のような画面イメージをグーグルスライドで作成した。

![bmi.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611952/3476d11d-aeed-9ccf-3bfe-d5270d2a6a0c.png)

## まずはHTMLに画面イメージを落とし込む
画面イメージをcodepenで書いてみた！
デザインとかはだいぶ端折ってます^^;

https://codepen.io/atsu6/pen/NWNMNYN

## Elmのビューに変換する
先程書いたHTMLをElmのビューに変換してみた。
https://ellie-app.com/9X4XG8NsF6wa1

## BMIの動作を実装する。
なかなかに大変だった。
https://ellie-app.com/9WTT3nnG6MVa1

## はまりどころ
- リストになんでも入れられるという感覚がない。
- リストの要素の区切りが `,` であることを忘れてしまう。 
- Maybeが面倒くさいように感じた。

## 感想
- ElmでBMIの計算を実装することは当初めちゃくちゃ簡単だと思っていたがハマりどころが思ったより多くて大変だった。
IBM Cloud VyattaへのSSH公開鍵認証

##目的
IBMCloud上のvyattaインスタンスへのアクセス時に、公開鍵を利用したアクセス方法を試してみました。
やり方は基本的に以前作成した、下記記事と同じです。

* [IBM Cloud サーバ接続に公開鍵認証の利用](https://qiita.com/khoshina/items/52a683a31efcdb8c1e63)

##環境
* ローカル端末：macOS Catalina 10.15.6 1台
* プラットフォーム:IBMCloud
    * 接続先vyatta:AT&T vRouter 5600 1801q 1台

##公開鍵の作成

`ローカル端末での作業`

公開鍵の生成
今回は**暗号方式rsa**、**鍵長4096bit**にする。
-Cはただのコメント

```
% ssh-keygen -t rsa -b 4096 -C "ibmcloud-keys"
Generating public/private rsa key pair.
```
鍵の保存先を変更する場合は、入力する。
変更しない場合は、空白で**[Enter]**する

```
Enter file in which to save the key (/Users/khoshina/.ssh/id_rsa):
```
鍵＋パスワードを利用する場合、入力

```
Enter passphrase (empty for no passphrase):
```
上記のパスフレーズを再度、入力

```
Enter same passphrase again:
```

問題なければ、指定したフォルダもしくはデフォルトのフォルダに作成される

```
Your identification has been saved in /Users/khoshina/.ssh/id_rsa.
Your public key has been saved in /Users/khoshina/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:rdywhYN99E2wICtnRsR+Cey0pzIoLrzIPiCDl9Vypr4 ibmcloud-keys
The key's randomart image is:
+---[RSA 4096]----+
|       ++ . .    |
|       .=o . o   |
|     ..+=o... .  |
|    o +B+++. o   |
|.  o *. S++ . .  |
|= + o o..O       |
|++ o   o+ .      |
|+o. .            |
|o=o E.           |
+----[SHA256]-----+
```

##ファイル転送
`ローカル端末からの作業`

###**scpの場合**
※OpenSSHによって、SCPによるファイル転送の手段は<font color="Red">非推奨</font>となっている
カレントディレクトリに**id_rsa.pub**がある前提

**「/home/ユーザ名/.ssh」に転送する**
vyattaユーザの場合、「/home/vyatta/.ssh」

```
scp id_rsa.pub vyatta@接続アドレス:/home/vyatta/.ssh
```

###**rsyncの場合**
```
rsync -av id_rsa_pub vyatta@接続アドレス:/home/vyatta/.ssh
```

##vyattaの設定
`接続先サーバの作業`

###公開鍵登録
vyattaユーザのフォルダに移動し、先程転送した**id_rsa.pub**の中身をコピーする

```
cd /home/vyatta/.ssh
cat id_rsa.pub >> authorized_keys
```

パーミッションを600へ

```
chmod 600 authorized_keys
```

##アクセス

あとはそのまま、アクセスするだけで公開鍵認証でログイン可能

```
% ssh vyatta@10.192.xx.xx
Welcome to AT&T vRouter 5600

Welcome to AT&T vRouter
Version:      1801q
Description:  AT&T vRouter 5600 1801q
Linux gateway01 4.9.0-trunk-vyatta-amd64 #1 SMP Debian 4.9.124-0vyatta2+2.1 (2018-09-05) x86_64
Last login: Fri Sep xx 11:56:52 2020 from 10.2.xx.xx
```
[Go] Cobraをgo getでインストールしようとするとcommand not foundになる問題の解決



## 問題

cobraをインストールしてCLIを書いてみようと思って、cobra公式のインストールコマンドを実行した。

```
go get -u github.com/spf13/cobra/cobra
```

その後cobraがインストールされたか確認しようとしたら`command not found`と表示された。

```
cobra --help
command not found
```

ちゃんと`$GOROOT`や`$GOPATH`、`$GO111MODULE`などの環境変数の設定もしているので謎だった。

## 環境

* MacOS Catalina 10.15.6
* go version go1.15 darwin/amd64
* goenv 2.0.0beta11


## 解決策

よく見るとインストールコマンドを実行した時のメッセージは以下のようになっていた。

```
go: github.com/spf13/cobra/cobra upgrade => v0.0.0-20200909172742-8a63648dd905
go get github.com/spf13/cobra/cobra: ambiguous import: found package github.com/spf13/cobra/cobra in multiple modules:
	github.com/spf13/cobra v1.0.0 (/Users/hoge/go/1.15.0/pkg/mod/github.com/spf13/cobra@v1.0.0/cobra)
	github.com/spf13/cobra/cobra v0.0.0-20200909172742-8a63648dd905 (/Users/hoge/go/1.15.0/pkg/mod/github.com/spf13/cobra/cobra@v0.0.0-20200909172742-8a63648dd905)
```

これについてググってみると[cobra公式のIssune#1215](https://github.com/spf13/cobra/issues/1215)に解決策があった。  
インストールするcobraのバージョンの指定が必要だったらしい。
> A workaround I found was to "go get" a specific version:

```
go get -u github.com/spf13/cobra/cobra@v1.0.0
```

これでok.

```
cobra --help
Cobra is a CLI library for Go that empowers applications.
This application is a tool to generate the needed files
to quickly create a Cobra application.

Usage:
  cobra [command]

Available Commands:
  add         Add a command to a Cobra Application
  help        Help about any command
  init        Initialize a Cobra Application

Flags:
  -a, --author string    author name for copyright attribution (default "YOUR NAME")
      --config string    config file (default is $HOME/.cobra.yaml)
  -h, --help             help for cobra
  -l, --license string   name of license for the project
      --viper            use Viper for configuration (default true)

Use "cobra [command] --help" for more information about a command.
```
チャットアプリケーションで一人二役の動作確認を行う

#背景
railsでチャットアプリケーションを開発した。
ブラウザで二つのウィンドウを開いて動作確認をしようとしたところ、うまくいかなかった。
具体的には、片方のウィンドウはユーザA、もう片方のウィンドウはユーザBでログインし、ユーザAが投稿したコメントがユーザBのウィンドウに反映されるか確認しようとした。
しかし、片方のウィンドウでユーザAとしてログインした後、もう片方のウィンドウでユーザBとしてログインすると、両方のウィンドウがユーザBとしてログインしている状態になってしまって、やりたいことができなかった。

#解決策
片方は通常のウィンドウで起動し、もう片方のウィンドウはシークレットモードで立ち上げることで、それぞれのウィンドウが干渉せず、やりたいことができた。
rails tutorial 第9章

#はじめに

独学で[rails tutorial](https://railstutorial.jp/)を進めていく過程を投稿していきます。

進めていく上でわからなかった単語、詰まったエラーなどに触れています。

個人の学習のアウトプットなので間違いなどあればご指摘ください。

初めての投稿なので読みにくいところも多々あるかと思いますがご容赦ください。

#第9章 発展的なログイン機構
##9.1.1 記憶トークンと暗号化
attr_accessorの復習

参考
https://qiita.com/Hassan/items/0e034a1d42b2335936e6
.remember_tokenが使えるようになります(remember_token属性が扱えるようになった)

```
def remember
  self.remember_token = User.new_token
  update_attribute(:remember_digest, User.digest(remember_token))
end
```
最後の(remember_token)はself.が省略されています。
##9.1.2 ログイン状態の保持

```
BCrypt::Password.new(remember_digest) == remember_token
```
このコードをじっくり調べてみると、実に奇妙なつくりになっています。bcryptで暗号化されたパスワードを、トークンと直接比較しています。([rails tutorial](https://railstutorial.jp/) 9章より引用)

ふむふむ、確かに、、、

==で比較する際にダイジェストを復号化しているのでしょうか。
しかし、bcryptのハッシュは復号化できないはずなので、復号化しているはずはありません。([rails tutorial](https://railstutorial.jp/) 9章より引用)

なるほど、、では何が起こっているのでしょう?

```
BCrypt::Password.new(remember_digest).is_password?(remember_token)
```
どうやら上の2つのコードは同じ意味のようです。
また、is_password?メソッドでオブジェクトと渡された引数の検証をし、一致している場合trueを返しているようです。
##9.3.2 ［Remember me］をテストする
また、リスト 9.24で定義したlog_in_asヘルパーメソッドでは、session[:user_id]と定義してしまっています。このままでは、current_userメソッドが抱えている複雑な分岐処理を統合テストでチェックすることが非常に困難です。([rails tutorial](https://railstutorial.jp/) 9章より引用)

ん?なぜでしょう?
A.
統合テストではsessionメソッドが扱えないから

```ruby:test/test_helper.rb
def log_in_as(user)
    session[:user_id] = user.id #使えない
end
```

---

```ruby:test/helpers/sessions_helper_test.rb
test "current_user returns right user when session is nil" do
    assert_equal @user, current_user
    assert is_logged_in?
end
```

このcurrent_userとは
current_userメソッドが実行された上でモデルオブジェクトとなっているようです。多分、、、

つまり
log_in user
なども行われており、sessionメソッドも実行されているのだと思います、、、

```ruby:app/helpers/sessions_helper.rb
def current_user
  if user_id = session[:user_id] #false
    @current_user ||= User.find_by(id: user_id)
  elsif user_id = cookies.signed[:user_id] #true
    user = User.find_by(id: user_id)
    if user && user.authenticated?(cookies[:remember_token])
      log_in user #ログインされる
      @current_user = user
    end
  end
end
```
current_userメソッドは戻り値にモデルのインスタンスを返すモデルオブジェクト。

---

```ruby:test/helpers/sessions_helper_test.rb
test "current_user returns nil when remember digest is wrong" do
    @user.update_attribute(:remember_digest,User.digest(User.new_token))
    assert_nil current_user
end
```
```
@user.update_attribute(:remember_digest, User.digest(User.new_token))
```
remember_digestを新しいものに更新。

```
assert_nil current_user
```
は

```ruby:app/helpers/sessions_helper.rb
def current_user
  if user_id = session[:user_id]
    @current_user ||= User.find_by(id: user_id)
  elsif user_id = cookies.signed[:user_id]
    user = User.find_by(id: user_id)
    if user && user.authenticated?(cookies[:remember_token]) #falseとなりcurrent_userはnilとなる
      log_in user
      @current_user = user
    end
  end
end
```
```
if user && user.authenticated?(cookies[:remember_token])
```
こちらの検証に置いてcurrent_userがnilとなるか確かめています。
#終わりに
こちらの章ではエラーで躓くことも少なく、内容もよく理解出来ました。
Goでスライスを逆順にする

ドキュメントをみたら、`sort.Reverse()`という関数があった。お、これはPythonの順番を逆転する例のやつかな、と思って使ってみた。

```go
a: l = []string{"a", "b", "c"} // lはLess, Len, Swapが定義されたインタフェース
sort.Reverse(a)
log.Println(a)
// "a", "b", "c"
// 変わってない！
```

え、何も仕事してないじゃん、と思ってコードを見てみたら・・・


つまり、`sort.Interface`を実装してからソートしていたもうはるか思い出せないぐらい過去の時代のためのコードで、単に`Less()`メソッドのtrue/falseを逆転させた別のインタフェースを作っているだけで、ここからソートしてあげないとソートはされない

```go
a: l = []string{"a", "b", "c"}
sort.Sort(sort.Reverse(a))
log.Println(a)
// "c", "b", "a"
// 変わった！
```

~~まあ、今時なら`sort.Slice()`使えばイチコロですね。添字だけみてソートすればOK。こちらの方が簡単ですね。~~

要素数が少なかったらそれっぽく動いているように見えていましたがダメでした。一回順番変わっちゃったあとは元のインデックスを保持しないので同じ要素が2回以降評価されるとダメでした。

なので、入れ替えるときは地道に入れ替えるのが一番早道ですね。

```go
l := []int{1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15}
for i := 0; i < len(l) / 2; i++ {
	l[i], l[len(l) - i - 1] = l[len(l) - i - 1], l[i]
}
fmt.Println(l)
// [15 14 13 12 11 10 9 8 7 6 5 4 3 2 1]
```

少ないときだけうまくいった理由をkaoriyaさんがコメントしてくださいました。ありがとうございます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">最後のSliceを使ったReverseの実装なんですけど、要素が7個以上になるとうまく動きません。添え字比較だと比較結果が値に対して安定しないので。<br><br>6個以下のときにうまくいくのはsort.Sliceの最適化でinsertionSortだけになってるからだと思われます。<a href="https://t.co/QtLt7Owv1X">https://t.co/QtLt7Owv1X</a></p>&mdash; MURAOKA Taro (@kaoriya) <a href="https://twitter.com/kaoriya/status/1306382150078402562?ref_src=twsrc%5Etfw">September 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
【CentOS】ルートパスワード変更・忘れたとき

# ルートパスワードを変更したい時
```
passwd
```
- 新しいパスワードの入力を求められるので、入力する。
- 完了後は一度ログアウトして新しいパスワードでログインできるか確認する。

【参考記事】
[【技術メモ】CentOS7でrootユーザーのパスワードを変更する](https://blog.nakamu.life/posts/centos7-change-root-password)

# ルートパスワードを忘れた時
パスワードの変更の時とは違い、こちらは現在のパスワードを忘れてしまっているので何もできない。
そうなった時の対応。
CentOS7系では以下の記事を参考にするとわかりやすいかと。
【参考記事】
[CentOS7/Redhatでrootユーザのパスワードを忘れた時にパスワードをリセットする方法](https://shimi-dai.com/reset-root-password-on-centos7/)
【macOS Catalina】VirtualBox→CentOS7のインストール後再起動で中断になる

# はじめに
- macOSがCatalinaにアップデートされてからVirtualBoxをインストールし、その中にCentOS7をインストールしようとした。
- VirtualBox →インストール失敗
- CentOS7→インストール→再起動で仮想マシンが自動的に中断になる
- というような状況で特にCentOS7の解決までに時間がかかったので、記事として残そうと思いました。
 - どうやら、再起動時にインストール画面に戻されるという事例はそれなりの数あるみたいなのですが、私の場合はそもそも無事に再起動ができていない状態でした。

# 環境
- macOS Catalina 10.15.6
- VirtualBox 6.1.14→6.0.24
- CentOS7

# VirtualBoxのインストール失敗
## 失敗したときの状態
- インストールの最後までいくと下の画像の状態になりました。
![スクリーンショット 2020-09-25 9.05.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480714/e81d89f6-57d8-a445-3006-7ac1c579125a.png)

## 解決策
全画像ありの解説は参考記事を見ていただければと思います。
 
- macの「システム環境設定」を開き、「セキュリティとプライバシー」を選択。
- 「一般」のタブを選択。
- 左下の鍵のアイコンをクリックして編集ができるようにし、「ダウンロードしたアプリケーションの実行許可：」の「許可」ボタンを押して、開発元”Oracle America, Inc.”のブロックを解除する。
- 再度インストールを実行。

【参考記事】
[【macOS 10.15 Catalina】Oracle VM VirtualBox がインストールできない対応](https://www.yokoweb.net/2020/01/19/macos-catalina-virtualbox-install-error/)

# CentOS7のインストール失敗
## 失敗したときの状態
- CentOS7のインストールをして、最終的に再起動をかけたら、仮想マシンが「中断」。
- 再起動をかけるも同じように中断状態で起動できなくなった。
- macから表示されるメッセージは「VirtualBox VMが予期しない理由で終了しました」。

## 解決策
- **VirtualBoxのバージョンを下げる。**
- このときの最新バージョン（6.1.14）から6.0.24に下げてからCentOSを改めてインストールすると問題なくインストール終了。
- 参考記事ではVirtualBoxのバージョンを最新化することで解決できたようだが、私の場合はもともと最新の状態だったので、逆に下げてみようと思いました。

【参考記事】
[VirtualBoxが中断を繰り返して動かないときの対処方法](https://shootingogi.net/15490/)
Visual Studio Code 拡張機能（PHP用）

# 概要
php開発するときの自分用のメモです。
この記事が参考になったという方は


山浦さんの独学エンジニアというサイトに非常にわかりやすく紹介されております。
詳しくはそちらをご確認ください。
https://dokugaku-engineer.com/


## VScode日本語化機能
・Japanese Language Pack for Visual Studio Code

## 共通
###・Bracket Pair Colorizer 2
括弧を色付けする
https://loumo.jp/archives/22091

### ・indent-rainbow
インデントを色付けする。
https://qiita.com/Akiyah/items/dda0f7f10eebed6b1abc

### ・Code Spell Checker
スペルチェックを行う。
https://qiita.com/diescake/items/98c5a099e85775cd917d

## 言語サポート
### ・PHP Intelephense
PHPのコード補完をします。

### ・Laravel goto view
LaravelのViewへ簡単移動可能にする。


##　その他
・Material Icon Theme
アイコンをマテリアルアイコンに変更します。
【Rails６】Railsで背景画像を設定する方法【CSS】

地味にいつも忘れる＆意外と正しい情報にたどり着くのに時間がかかったので、忘れないように備忘録として残しておきたい思います！
##Railsで背景画像を設定する方法①
画像ファイルをapp/assets/images配下に配置して以下のように記述するだけです。

```scss:custom.scss
.background {
  background-image: image-url('haikei_image.jpg');
}
```
こちらは直感的にかけるので僕はこっちが好きですね。

##Railsで背景画像を設定する方法②
こちらも同じように画像ファイルをapp/assets/images配下に配置して以下のように記述します。
①と違うのはファイル名をcustom.scss.erbとして、拡張子に.erbを付けることです。

```erb:custom.scss.erb
.background {
  background-image: url("<%= asset_path('haikei_image.jpg') %>");
}
```
こちらでもうまくいったので最初はこちらを使っていたのですが、すぐやめて別の方法を探す羽目になりました。
この場合、当然erbファイルとしてエディターに認識されてしまうので、CSSを書くときに補完機能がなくなってしまいます。かなりめんどくさいなと思いましたｗ
何か対策方法があれば、コメントいただけると嬉しいです！

##【番外編】うまくいかなかった方法

public/imagesに画像を配置し、

```scss

background-image: url('/images/haikei_image.jpg');
```

と書く方法もあるようですが、これではうまく反映されず地味に時間食いました。
consoleでリロードエラーみたいなのがでます。。

##最後まで読んでいただきありがとうございます！
こんな感じで毎日学習したことをアウトプットしています！少しでもお役に立てれば幸いです。ご指摘や感想などあればコメントいただけると嬉しいです！
続・初見で難解だったdeviseを改めてまとめてみた

#はじめに
　前回の「初見で難解だったdeviseを改めてまとめてみた」の続き。今回はログアウト機能について。
deviseの導入について説明している、前回の投稿はこちら↓
https://qiita.com/TerToEer_sho/items/b5523ad100d08126a547

##ログアウト機能の実装
　
　そもそも、ログアウトのボタンは、ログインしているユーザーにしか必要がない。
　つまり、
<font color=red>ログイン状態であれば、ログアウトボタンを表示させる。</font>
　また、ログインしている状態であれば、ログアウトボタンは必要ない。
　つまり、
<font color=red>ログインしていない状態であれば、ログインボタンを表示させる。</font>

　では、どのようにして、ログインしているのかどうかを判断するのか。これもまた、deviseの優れたところで、deviseのGemをインストールすると使えるメソッドがある。

<font color=red>user_signed_in?メソッド</font>

　日本語訳通り、サインインしているかどうかを真偽値（true/false)で返す。

　ログインしている→true
　ログインしていない→false

　なぜ、ログインしているか判断できるのか、詳しいことはわからない。

user_signed_in?メソッドで真偽値が返ってくることを利用して、if文を用いて条件分岐させる。

つまり、

```Ruby:index.html.erb
<% if user_signed_in? %>
 <%= link_to 'ログアウト', destroy_user_session_path, method: :delete %>
<% else %>
 <%= link_to 'ログイン', new_user_session_path %>
 <%= link_to '新規登録', new_user_registration_path %>
<% end %>
```
Railsのビューファイルを例にコードを書くとこんな感じになる。

気を付けるべき点は、

①<font color=red>ログアウトではlink_toメソッドの第三引数でHTTPメソッドを「delete」にすること。</font>
　イメージとしては、ログインしている状態を削除するといった感じ。ちなみに、「delete」にしないと、エラーが出る。理由は、link_toメソッドは、デフォルトでのHPPTメソッドが、「get」だから。link_toって読んでの通り、「リンク先に飛ばしますよ〜」という、メソッドだから。

②第二引数のパスについては、
ターミナルで、

```bash
rails routes
```
とコマンドを打ち、確かめる。特別な指定をしていない限りは、上記と同じで大丈夫。

##ポイント

- [x] 　ログイン状態を判断するuser_signed_in?メソッドを使う。
- [x] 　if文を用いて、表示を分岐させることが可能。
- [x] 　ログアウトをlink_toメソッドで記述する場合、「method: :delete」が第三引数に必要。

##最後に
便利なuser_signed_inメソッドが使えるからこそ、少ない作業で実装できる。
最新のVSCode(V1.49.2)+Arduinoでシリアルポートが選択できない問題

現在、最新のVSCode(V1.49.2)及びVSCode向けArduino拡張機能(V0.3.2)、Arduino IDE(V1.18.13)を使用すると、VSCodeからArduinoボードへのプログラムの書き込み時に必要なシリアルポートを選択できないという致命的なバグが発生しています。(もちろん、GUIではなく手動でjsonファイルを編集し設定することはできるようです)
かく言う筆者もこのバグに悩まされた身であり、GitHubのIssuesからこのバグについての情報を入手できたため、ここで共有します。
# ダウングレード
この問題は、VSCode本体のバージョンをダウングレードすることで解決します。下記リンクより、VSCodeのバージョン1.48.2のインストーラーを入手してください。
https://code.visualstudio.com/updates/v1_48

# 前にも同じような問題が起こっていたらしい
ウェブ上を調べていたところ、過去にも全く同じような状況のバグが発生していたことがわかりました。
https://elchika.com/article/1aeea9e5-6786-4af9-9f07-40faa1e74945/
こちらの場合では、VSCodeのバージョンを1.42までダウングレードしています。この記事自体は今年3月のものであり、さすがにそこまで前のバージョンまでダウングレードするわけにはいかないので使えませんでしたが。
# 参考
- [Cannot select serial port (VS Code, Arduino Extension) · Issue #1099 · microsoft/vscode-arduino](https://github.com/microsoft/vscode-arduino/issues/1099)
[MERN11] デプロイ

~~~~~~~~~~ (Contents) MERN ~~~~~~~~~~~
[MERN①] Express & MongoDB Setup
https://qiita.com/niyomong/private/3281af84486876f897f7
[MERN②]User API Routes & JWT Authentication
https://qiita.com/niyomong/private/c11616ff7b64925f9a2b
[MERN③] Profile API Routes
https://qiita.com/niyomong/private/8cff4e6fa0e81b92cb49
[MERN④] Post API
https://qiita.com/niyomong/private/3ce66f15375ad04b8989
[MERN⑤] Getting Started With React & The Frontend
https://qiita.com/niyomong/private/a5759e2fb89c9f222b6b
[MERN⑥] Redux Setup & Alerts
https://qiita.com/niyomong/private/074c27259924c7fd306b
[MERN⑦] React User Authentication
https://qiita.com/niyomong/private/37151784671eff3b92b6
[MERN⑧] Dashboard & Profile Management
https://qiita.com/niyomong/private/ab7e5da1b1983a226aca
[MERN⑨] Profile Display
https://qiita.com/niyomong/private/42426135e959c7844dcb
[MERN⑩] Posts & Comments
https://qiita.com/niyomong/private/19c78aea482b734c3cf5
[MERN11] デプロイ
https://qiita.com/niyomong/private/150f9000ce51548134ad
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

##1. Prepare For Deployment

###① config/production.json
```XXX/config/production.json
//以下、default.jsonからコピペ
{
  "mongoURI": "xxx",
  "jwtSecret": "xxx"
}
```
-> gitignoreに`config/default.json`


###② 本番環境のビルド最適化

~~~~~
実際には下記は省略 => 代わりにpackage.json+server.jsに記載
Creating an optimized production build...
本番環境にreact&reduxをあげる時に必要。
1. `$ cd client`
2. `$ npm run build`
-> client/buildフォルダができる。
~~~~~

```xxxApp/package.json
//...
  "scripts": {
    "start": "node server",
    "server": "nodemon server",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
+    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },
//...
```

```xxxApp/server.js
//...
+ const path = require('path');
//...

+ // Serve static assets in production
+ if (process.env.NODE_ENV === 'production') {
+   // Set static folder
+   app.use(express.static('client/build'));

+   app.get('*', (req, res) => {
+     res.sendFile(path.resolve(__dirname, 'client', 'build', + 'index.html'));
+   });
+ }
//...
```

###③ production.jsonはgitignoreされてるのでpushされない
 => gitにコミットせずにHerokuにあげる方法
`$ git add -f config/production.json`
https://github.com/bradtraversy/devconnector_2.0#deploy-to-heroku


##2. Deploy To Heroku 

`$ heroku create` <-最初だけ
`$ git add .`
`$ git git commit -m ""`
`heroku git:remote -a <AppName>` <-最初だけ
`git push heroku master`
M5Stackを動かしていたら、なんか一定時間でリセットする件

#M5Stackを動かしていたら、一定時間でリセットしてしまう件
とてーも初歩的なミス集ですが、初心者で悩んで抜け出せない場合の手助けになればと。。。

##事の始まり
なんかですね、そんなコード書いていないのにM5Stackがリセットしてしまったってこと、経験無いですか？？
そんなとき、可能性があるところとして、wdtがはたらいてしまっているという可能性があるようです。

対応の手順として、まずシリアルモニターを繋ぎますと・・・

```cpp

[IGuru Meditation Error: Core  1 panic'ed (Interrupt wdt timeout on CPU1)
```
みたいな文言が出ている場合、はい、wdt働いてます。
(実際はこの文言の後に続けてCPU0とCPU1のそれぞれのメモリマップとか出力されてくるので、何かやらかしている事はすぐ実感できます）

こういう原因として、なかなか戻ってこない重い割り込み処理などをしているとそうなることがあるそうです。
でも、わたくし、割り込み処理じゃないのにこれ出ました。。。

私の経験として2個ほど・・・

##1個目　「無い配列を参照してしまった」
これはまぁ、起こった時点で「あ、ダメじゃん」ってすぐ気が付くので特に悩みませんね。

##2個目　「M5のLCDに、millis()を表示させた」
これはですね、正確にはmillis()を文字列に変換しないままStringの配列に放り込んで、順番に表示させてたのが原因でした。

これは悩みました。
だってエラー出てなかったし。。。
でも、LCDにはmsの時間は出ずに文字化けしまくるので、「はて？そんなバグるほどなにもコード書いていないとおもふ？？」なんて考えこんでしまいました。

##まとめ
結局のところ、データ形に適した扱いをしてないのが原因で、意図しない領域を参照してフリーズしてしまっただけですね。

そもそも私のようなケアレスミスラー的には、「コンパイラさん、何故、文句言ってくれなかったの！？」という他力本願を。。。←ダメな人
Vue2.xからVue3.0に上げるために必要な変更に関する記事まとめ

## はじめに
前回の記事でVue3.0のリリースノートを読んでみました。
リリースノートを読んだ限りでは、とりあえずコードの変更なしでバージョンあげれば高速化の恩恵を受けられるのかなぁと思ったのですが、実際のところどうなんでしょうか？
バージョンを上げる際に留意すべきことを調査して、参考になりそうな記事をまとめてみます。
ちなみに、html, script, stylesheetを一つのファイルにまとめたSFCの形式でコンポーネントを作成しscriptの記述にはtypescriptを導入しており、vue-property-decoratorを用いている書き方をしています。


## Vue3.0の特徴まとめ

>[これまでに公表されたVue.js 3.0に関する情報をざっと眺めてみた](https://medium.com/yohei-nodas-blog/%E3%81%93%E3%82%8C%E3%81%BE%E3%81%A7%E3%81%AB%E5%85%AC%E8%A1%A8%E3%81%95%E3%82%8C%E3%81%9Fvue-js-3-0%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E6%83%85%E5%A0%B1%E3%82%92%E3%81%96%E3%81%A3%E3%81%A8%E7%9C%BA%E3%82%81%E3%81%A6%E3%81%BF%E3%81%9F-6ad930010725)

>[Vue 3の新しい機能と変更点・全９件](https://blog.capilano-fw.com/?p=6393)

> [正式リリース前に総予習!! Vue3の変更点まとめ](https://qiita.com/ryo2132/items/3d0379e85c38a9a5b355)

## Vue3.0での変更点

[Evan Youさんが2019/9/30に書いた文章](https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf)の中から一般的な利用ユーザーにとっては**把握しておかなければならない重要な変更点、破壊的かもしれない公開APIの変更点**のみを抜粋して説明してくれている記事です。
>[Vue.js 3.0の変更点](https://qiita.com/kahirokunn/items/66b0ea212e7afc57631c)

Vue3.0で新しく使えるようになった機能たちをまとめて紹介してくれてる記事です。
>[新Vue.js「Vue 3」で便利に使えるさまざまな新機能を先取りで紹介](https://codezine.jp/article/detail/12611)

## Vue3.0に移行可能かどうかの判断

GlobalAPIが変更されているから、それに対応できるならupdateしていいんじゃない、って言ってる記事です。
>[Vue 2.xのOptions APIからVue 3.0のComposition APIへの移行で知っておくと便利なTips](https://techblog.zozo.com/entry/vue-options-api-to-composition-api#Vue-30-%E3%81%B8%E3%82%A2%E3%83%83%E3%83%97%E3%82%B0%E3%83%AC%E3%83%BC%E3%83%89%E5%8F%AF%E8%83%BD%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B%E3%81%AE%E5%88%A4%E6%96%AD)

## 目玉となる機能、CompositionAPIを使う際の記述方法

よくまとまっていて、もうこれ見ればいいじゃんってなった記事です。
>[Vue3.xから採用予定のCompositionAPIとVue2.xを比較してみる](https://qiita.com/tomopict/items/95ef9e043c1fc4d9f218)

公式のページです
>[Composition API RFC](https://vue-composition-api-rfc.netlify.app/#summary)

## まとめ
調べてみたのですが、実際に自分でコード書いてみないとわからんなぁというのが正直なところです。
より良くなった、というのはわかったけれど、実際問題なく更新できるのか、とかまだよくわかってないです。
sumo-guiでsumo-gui segmentation fault 11と出た対応 (mac)

# エラー状況
[インストール手順](https://sumo.dlr.de/docs/Installing/MacOS_Build.html)を参考にsumoをインストールした。

[Tutorials/Hello World](https://sumo.dlr.de/docs/Tutorials/Hello_World.html)にそって一番最初のチュートリアルを実行しようと思い

```
$ sumo-gui
```
って打ったら

```
segmentation fault 11
```
って出てしまった。





# 解決策
以下を読んだら解決した。
https://github.com/eclipse/sumo/issues/6242
#### 要約すると

Xcode 11 がうまく動かないせいで Catalina bottle of libfox (sumo-gui と
netedit に必要)がうまく動作しない. 一時的に直す方法としてMojave bottle of foxにダウロードスればいい。 


#### 1. まず Catalina bottle of fox　をアンインストール

```
$ brew uninstall --ignore-dependencies fox
```

#### 2. brew Formula of foxを編集する。


```
$ brew edit fox
```
以下の行を削除またはコメントアウト

```

sha256 "c6697be294c9a0458580564d59f8db32791beb5e67a05a6246e0b969ffc068bc" => :catalina
```

#### 3. Mojave bottle of foxをインストール

```
$ brew install fox
```
自分はこの3つの手順でエラーは直りました。

##　使えるようになった
```
$ sumo-gui
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279062/01e08502-4bf4-5b64-66de-21fd375d791f.png)

```
cd　$SUMO_HOME
cd　tools
python osmWebWizard.py
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279062/6ef9af56-e219-6d2b-85c8-92d70bb1556e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279062/2b59fa07-4346-ec41-3d07-4dac6da062c0.png)
Google Driveのファイルをローカルで動かせるようにする

【モチベーション】
Google Drive上のファイルをローカルで編集し自動でアップしたい。

【行ったこと】
Google Driveのデスクトップ版アプリを導入した。

【途中詰まったこと】
アプリをインストール後に、アプリが開けず、failed to execute script pyi_rth_win32comgenpyというエラーが出現した。

どうやら、Windowsアカウントの名前が日本語の場合にうまくいかないようだ。

【対応策】
①Cドライブ直下にtempフォルダを作成した。

②コントロール パネル\システムとセキュリティ\システムからシステムの詳細設定で、ユーザーの環境変数を編集する。編集するのは、変数TEMPとTMPで、変数名はそのままで、変数値をC:\tempに設定する。

③再起動でアプリを開くと解決した。
RailsのオブジェクトをActiveStorageの画像ごとクローンする

## ActiveStorageの画像がそのまま代入できなかった

```ruby
  def duplicate
    @product = Product.find_by(id: params[:id])
    @product.product_options

    @duplicated_product = @product.deep_dup
    @duplicated_product.product_options = @product.product_options
    @duplicated_product.image = @product.image
    @duplicated_product.save!
  end
```

以下のように怒られた

```
Could not find or build blob: expected attachable, got #<ActiveStorage::Attached::...
```

## 解決策
いったんopenでダウンロードしてから、URLで再度attachしたらいけた

```ruby
  def duplicate
    @product = Product.find_by(id: params[:id])
    @product.product_options

    @duplicated_product = @product.deep_dup
    @duplicated_product.product_options = @product.product_options
    downloaded_image = open(@product.image.service_url)
    @duplicated_product.image.attach(io: downloaded_image  , filename: "foo.jpg")
    @duplicated_product.save!
  end
```

🤔より良い方法があったらしりたいです。。。
Microsoft Ignite 2020 の セッションリソースをキャプション付きでダウンロードするメモ

こんにちは。Microsoft Ignite 2020 楽しかったですね。

Microsoft Ignite 2020 のサイトに行くとセッションのビデオとスライド資料をダウンロードするスクリプトが用意されています。このスクリプトはビデオとスライド資料だけをダウンロードしますが、今回は少しスクリプトを変更して、ビデオに表示するキャプションも一緒にダウンロードする方法を紹介します。

日本人だとキャプションがあったほうが解りやすいですよね。

# ダウンロードスクリプトの入手
IgniteのサイトにアクセスしてDownload Resourceからスクリプトをダウンロードしてください。

https://myignite.microsoft.com/sessions/0eaefb05-0020-457b-be25-f5c71810d8ba

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32580/464ed342-fe12-5d05-b4dc-1a225b23a990.png)

# キャプションも取得するようにスクリプトを修正

ダウンロードしたzipファイルを展開して、Download-Resources.ps1 の134行目に以下のコードを追加します。Visual Studio Code などで追加してください。

```powershell:Download-Resources.ps1
        $captionFile = "$directory\$code\$code" + "_en-US.vtt";

        #Caption download.
        if ($sessionObject.captionFileLink.Length -ne 0) {
            if (!(test-path $captionFile)) {
                Write-Host "Downloading caption: $title ($code).";
                Invoke-WebRequest $sessionObject.captionFileLink -OutFile $captionFile;
            }
            else {
                Write-Host "Caption exists: $captionFile"
            }
        }
        else {
            Write-Host "The session $title ($code) does not contain a caption recording."
        }
```

# スクリプトを実行してダウンロード
Download-Resources.ps1 があるフォルダに変更して、以下のようにスクリプトを実行します。

```powershell
powershell -ExecutionPolicy Unrestricted ./Download-Resources.ps1
```

# キャプション付きでビデオを再生
セッション毎にフォルダが作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32580/9cd9f908-6df7-4cfd-85eb-48312d264289.png)

動画ファイルをダブルクリックすると Movies & TV アプリが実行されますので、左下のアイコンからキャプションを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32580/892a6dfa-e05b-ba01-e684-a762247ab4c2.png)

# キャプションの表示に関する設定
スライド資料が白の時は、白文字だと文字が見えません。そんな時はキャプションの色を変更することができます。

設定を開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32580/1b485043-a942-2b14-c2fb-00a8cbf6205b.png)

背景を黒色にしてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32580/0bd07b1d-a172-5acc-24a5-d57f2f08eadd.png)

背景が黒なので文字が見やすいですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32580/c6e3f320-cc44-691b-62a6-30868b48d2c8.png)

メモでしたー。（英語OSの画像で申し訳ないです）
2020/10/1 テックキャンプ１１日目　アウトプット

#カリキュラム応用編
テックキャンプ１１日目で初投稿^^;
事前学習スタートは 9/12です。

##学習内容
- Railsで投稿アプリをつくろう
- 基礎編の簡易投稿アプリと違いcontrollerの機能が多い
- データベース復習
--
- database.ymlとはデーターベースの設定を記述するファイル
Railsは、このdatabase.ymlを編集することで、データベースの設定を運用環境ごとに変更できる仕組みになっている。

- RDB（リレーショナル・データベース）とは表形式でデータを管理するデータベース。行と列を持っており、データベースにおいては、行を「レコード」、列を「カラム」という。
- RDBMS（RDB・マネジメント・システム）とRDB（リレーショナル・データベース）を使用する際、それを管理するシステムをRDBMSという。
- MySQLとはRDBMSの1つ
  - 拡張機能が多い
  - 小規模から大規模のデータも取り扱いが可能
  - 柔軟性が高い
ReactNative with Firebase の構成で Setting a timer for a long period of time, i.e. multiple minutes というエラーが出た時の対処法

#はじめに
ReactNative with Firebase の組み合わせで以下のエラーが出ることがあります。

```
Setting a timer for a long period of time, i.e. multiple minutes 
```

このエラーは長きに渡って本家のissueで議論されていますが、Firebaseと連携しているのが主な原因であり、ReactNative側の問題ではなく、現在は暫定的な対応のみしか出来ないということらしいです。

この暫定的対応というのが問題で、様々な方がまとめてくれていますが、僕の場合はどれも効果的ではありませんでした。
なので、今後同じエラーに困った方のために、僕が成功した対処法を共有しておきます。

#対処法
`react-native-ignore-warnings` というモジュールをインストールして、App.jsに以下のコードを書きます。

```App.js
import ignoreWarnings from 'react-native-ignore-warnings';

ignoreWarnings('Setting a timer');
```
【Git】git resetまとめ


#基本的な考え方

```
$ git reset <where?> <when?>
```

#git reset 第1オプション

どこの環境を戻すのか指定する

| 環境 | 戻す範囲の指定オプション | 今の環境を次に移動させるコマンド |
|:-:|:-:|:-:|
|  ワーキングツリー | --hard  | git add  |
|  インデックス環境 | --mixed  | git commit |
| HEAD  | --soft  |   |


```
#影響範囲は、一連のadd~commit(ワーキングツリー, インデックス, HEAD)
$ git reset --hard <when?>

# 影響範囲は、add後~commit(インデックス, HEAD)
$ git reset --mixed <when?>

# 影響範囲は、commit後のみ(HEAD)
$ git reset --soft <when?>
```


#git reset 第2オプション

どのくらい前に戻すのか

```
# コミット履歴
$ git log

# HEADの履歴
$ git reflog

9f12f80 (HEAD -> master, origin/master, fix-home-iichan) HEAD@{0}: checkout: moving from fix-home-iichan to master
9f12f80 (HEAD -> master, origin/master, fix-home-iichan) HEAD@{1}: reset: moving to HEAD@{8}
9f12f80 (HEAD -> master, origin/master, fix-home-iichan) HEAD@{2}: checkout: moving from master to fix-home-iichan
9f12f80 (HEAD -> master, origin/master, fix-home-iichan) HEAD@{3}: checkout: moving from master to master
```

```
# 一連のadd~commitを、直前の状態に戻す
$ git reset --hard HEAD^

# 一連のadd~commitを、3つ前の状態に戻す
$ git reset --hard HEAD@{2}

# 動作確認後、一連のadd~commitを、最新の状態に戻す
$ git reset --hard ORIG_HEAD
```
VSCodeを使用したシェルスクリプトの開発環境作成

##1.背景

現場で"シェルスクリプトお願いします\\(^＿^)/"と唐突に言われたものの
私はシェルはおろかunix系コマンドも必要最低限でしか使用したことがない。

仕方がないのでとりあえずbashの電子書籍を1冊購入し
後はググればなんとかなるだろう(なんとかしてくれ)と思っていたら無事に死亡しました。

その時の反省や感じたことを踏まえて"あの時こうしておけばよかった"と感じたことを共有します。

##2.失敗したこと

何がいけなかったのか、下記に記載します。

- **コードを書くスピードが遅い**
　とにかく納期に間に合わないです。
　元々作業スピードは遅いのですが、行き当たりばったりの乏しい知識でスクリプトをコネコネやっていたのが間違いでした。
　

- **何が正しいのか曖昧なので現場で通用するレベルの品質のコードに達しない**
　製造分についてレビューいただく際に、"こんなのダメダメ～ダメぽよまるぅ～"と言われてしまいました。
　一応動きはするのですが、製造品質の観点からNG分が多発していたようです。

##3.改善策
Javaを書くときにメモ帳を使用しますか? しませんよね。
大体の人はInteliJとかEclipseを使用してJavaのコードを書くと思います。

自分がやっていたのは上記設問のyesに近く、viエディタを使用してスクリプトをコネコネしていました(メモ帳よりは随分とましですが)
結果として「トライ＆エラー」に時間がかかり、コードを書くスピードが遅くなってしまっていました。

そこで、bash IDEの拡張機能が存在するVisual Studio Codeをインストールすることにしました。

##4.Visual Studio Codeのインストール


自身のOS環境で使用可能なVisual Studio Codeをインストールします。


[Visual Studio Code インストール先リンク](https://code.visualstudio.com/download)

##5.拡張機能のインストール

Visual Studio Codeインストール後に拡張機能をインストールします。

・**Remote Development**
>リモート開発拡張パックを使用すると、コンテナー、リモートマシン、またはWindows Subsystem for Linux（WSL）内の任意のフォルダーを開いて、VSCodeの全機能セットを利用できる。これにより、どこにでもフルタイムの開発環境をセットアップできる。

IDE左枠の一番下からRemote Development Extension Packを検索してインストールします。以下拡張機能についても同様にして実施。
これをインストールするとRemote - WSL、Remote - Containers、Remote - SSHなどがインストールされます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497973/dcdb7c48-e64b-0f45-a930-82673eba6d28.png)



・**Bash IDE**
>TreeSitterとそのBashの文法に基づいており、explainshell統合をサポートするbash言語サーバーを利用するVisual StudioCode拡張。

・**shellcheck**
>静的解析によりシェルスクリプトの問題点を分析し、より良い書き方を提案してくれる CLI の Linter ツール。
構文の問題点やバグだけでなく、推奨されない書き方も教えてくれる。
シェルスクリプトの初心者・上級者に関わらず、入れておくだけで安心してスクリプトを書けるようになる。

##6.実用例
筆者はWindows OSなので、動作確認のためWSLでLinux環境を用意し、Visual Studio Code上でLinux環境へアクセスする。
ssh接続の際はSSH Targetを指定すること。



サンプルとして/home/ckhaorus/work直下にsample.shを作成した。
指定のディレクトリ直下のファイル名のみ取得する簡単なスクリプトとなっている。
**拡張機能のbash IDEをインストールしているため、色分けやインデントについて直感的にわかりやすくなっている。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497973/cfb4af29-bb07-4abc-17db-36be2949b66e.png)

**また、shellcheckをインストールしているため、構文についてもチェックしてくれる。**

波線部にカーソルを充てるとホップアップが表示されるので、Quick Fixから参考文献を表示できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497973/d9846039-7211-7b0d-d70d-090bddc7d37d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497973/c2963cc3-57eb-5a8e-8766-e691fe58f495.png)

指摘について修正し、Visual Studio Code上で統合ターミナルを「ctrl + shift + `]キーで開き、シェルを実行する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497973/5819a911-0556-8027-328d-9d89deff7a1c.png)

無事に期待する結果が得られた。
リファラがドメイン名しか送信されない場合の対処法（Chrome 85〜）

ここ数ヶ月で特定のリンクがクリックされた際のリファラ（ページURL）がドメインしか送信されない状況に陥った。
コンバージョンの計測自体に影響はなさそうだが、どのページのどのリンクからクリックなのか、付与されたパラメータなどが判別出来ず困ったので対処法がないか調査したメモ。

Chrome 85 Will Set Website Referrer Headers if Missing
https://www.searchenginejournal.com/chrome-85-website-referrer-headers/376407/

>Chrome 85 Default Referrer Setting
Beginning in Chrome 85, which is scheduled for release in August 2020, any site that does not have a referer security header will be upgraded to strict-origin-when-cross-origin. This will improve security for Chrome browser users as well as improve security for sites that do not have a referer security header.

どうやらChrome 85からリファラの仕様が変わったっぽい。

#環境など

`https://aaa.com/abcd/`
から
`https://bbb.com/efgh/`
へアンカーリンク

`https://bbb.com/efgh/`
側のリンクがクリックされた際に
`https://aaa.com/abcd/`
のリファラを取得したい。

端末の環境は以下。
`Mozilla/5.0 (Linux; Android 10; POCOPHONE F1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.127 Mobile Safari/537.36`


#最終的な対処

```
<meta name="referrer" content="no-referrer-when-downgrade">
```

上記をhead内に記載したところ、URL全体を含む正確なリファラが送信された。

##参考とその他の設定

ざっくり噛み砕いた内容を書くので厳密には違う場合あります。

Referrer-Policy
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Referrer-Policy

###no-referrer-when-downgrade

```
<meta name="referrer" content="no-referrer-when-downgrade">
```
セキュリティレベルが劣る場合（HTTPS→HTTP）はリファラを渡さない設定。
いままでの既定値。

###strict-origin-when-cross-origin

```
<meta name="referrer" content="strict-origin-when-cross-origin">
```
Chrome 85からこれが規定値になったっぽい。
同じオリジン（ドメイン）間でリファラを渡す際にはページURLを渡し、別ドメイン間でのリンクにはドメインのみを渡す。
セキュリティレベルが劣る場合（HTTPS→HTTP）にはなにも送信しない。

###unsafe-url

```
<meta name="referrer" content="unsafe-url">
```
いかなる場合でも（HTTPS→HTTPの場合でも）リファラを渡す。
取り扱いには注意しましょうね。
>このポリシーは、 HTTPS リソースの URL から安全ではないオリジンへプライベートである可能性がある情報を漏洩します。設定する場合は影響をよく検討してください。

#正直これでいいのか？
Chromeが規定値を変更したくらいだしセキュリティレベル高めていこうねって話なんだろうけど
現状リファラが取れないのは普通に困るので渋々これで行かせてもらいます（今まで普通に取得できていたものだしURL内で個人情報を扱うようなこともないので…）
部分テンプレート collectionオプションでundefined local variable or methodエラー

## 記事の目的
初学者の為、間違っているところはご指摘頂けると幸いです。
備忘録・アウトプット目的で投稿です。

部分テンプレートがよくわからない方は、こちらの記事がわかりやすいです。
https://pikawaka.com/rails/partial_template#collection%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3

##collecitonオプションでエラー
エラーの原因となるコードです。

```show.html.slim（部分テンプレートを呼出しているファイル）
= render partial: 'reviews/user_review', collection: @reviews
```
私の認識としては、@reviewsの要素のひとつひとつが以下の部分テンプレート先のreviewに代入されることを期待。しかし、以下のようにreviewが未定義とのエラーが出る。値が渡っていない。

```エラー内容
ActionView::Template::Error (undefined local variable or method `review' for #<#<Class:0x00007fe1e3474948>:0x00007fe1df516738> Did you mean? @reviews): 
```

```_user_review.slim(部分テンプレート)
=　"#{review.purpose}"
```

##パーシャル先の変数を変更（解決策①）
調べると、ローカル変数は:partialで指定したものになる、とある。
今回でいうと、部分テンプレートに定義するのはreviewではなく、user_reviewでないといけない。
これで無事表示。

```show.html.slim（部分テンプレート）
= "#{user_review.purpose}"
```

##パーシャル呼出するviewファイルでにて変数を指定（解決策②）
解決策①で述べたように、ローカル変数は:partialで指定したものが前提なのだが、ローカル変数を別の名前で使用したい場合はasオプションを使う、とある。
今回でいうと、部分テンプレート先で使う変数を当初設定したreviewとしたい場合は、以下のように呼出元のviewファイルにおいて、asオプションでreviewを指定します。
これで無事表示。

```show.html.slim（部分テンプレート）
= render partial: 'reviews/user_review', collection: @reviews, as: "review"
```

##まとめ
最初の書き方だと、部分テンプレの名前の同名のものをviewファイルの変数として定義。
部分テンプレの名前じゃない変数を部分テンプレで使いたい場合は、asオプションで指定。
TypeORMのQueryBuilderを拡張

# 背景

TypeORMで**SELECT ～ FOR UPDATE**は、**QueryBuilder**を使って下記のようにすればいいけど、公式を見ても、**SELECT ～ FOR UPDATE OF ＜table_name＞** をやる手段が見つからなかった。

```hoge.ts
  ...
  .createQueryBuilder()
  .useTransaction(true)
  .setLock("pessimistic_write")
  ...
```

ということで、そもそも**QueryBuilder**を拡張するようなことができるのか、試しにやってみた。
(postgresql前提)

# QueryBuilderを拡張

TypeORMの**SelectQueryBuilder**をextendsして、**SelectQb**というクラスを作成。

``` selectQb.ts
import { SelectQueryBuilder } from "typeorm";

export class SelectQb<T> extends SelectQueryBuilder<T> {
  private lockTarget = null;

  constructor(qb: SelectQueryBuilder<T>) {
    super(qb);
  }

  public createLockExpression(): string {
    switch (this.expressionMap.lockMode) {
      case "pessimistic_write":
        return " FOR UPDATE OF " + '"' + this.lockTarget + '"';
      default:
        return super.createLockExpression();
    }
  }

  public setLockOf(lockMode: "pessimistic_write", lockTarget: string): this {
    this.expressionMap.lockMode = lockMode;
    this.lockTarget = lockTarget;
    return this;
  }
}
```

本家のSelectQueryBuilderの実装を見ながら、必要な機能だけ追加。

**setLock(lockMode)**の代わりに、一緒にテーブル名も指定できる**setLockOf(lockMode, lockTarget)**を追加。

**SelectQueryBuilder**でSQL実行時に呼び出される**createLockExpression()**を拡張。

# 確認

下記のようなコードを書いて、SQLを確認。

```test.ts
    ...

    const repository = getRepository(User);
    const qb = repository.createQueryBuilder();

    // 拡張
    const selectQb = new SelectQb(qb)
      .useTransaction(true)
      .setLockOf("pessimistic_write", "User");

    // 確認
    console.log(await selectQb.getSql());

    ...
```

実行結果はこんな感じ。

```
SELECT "User"."id" AS "User_id", "User"."firstName" AS "User_firstName", "User"."lastName" AS "User_lastName", "User"."age" AS "User_age" FROM "user" "User" FOR UPDATE OF "User"
```

とりあえず、それっぽいSQLが発行された。

※使っているentityは以前書いたやつ。
https://qiita.com/yusuke-ka/items/195e6bba4f21a659b424
RunJSを使ってサクッとJavaScriptを実行する

# はじめに
皆さんは [RunJS](https://runjs.dev/) というアプリを知っていますか？

RunJSとは気軽にJavaScriptを実行できるシンプルなアプリです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354659/261e66ff-e558-b606-2221-89d3a46003de.png)

JSのReplといえば、ブラウザで動く **Repl.it** などが有名ですよね。
ですが、これはさらに機能を絞り、プレイグラウンド要素を更に高めたオープンソースアプリです。

#マークダウンエディタのようにコードを即時に反映
Qiitaのマークダウンエディタなどのように、書いたコードが結果に即時反映されます。
実行ボタンなどを押すことなく、スムーズに結果を見ながらコードを書いていくことができます。

![qiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354659/745fe4da-f03b-c3b0-3cb6-6d72f7ddb05c.gif)


#究極にシンプル
UIを見るとわかりますが **めちゃくちゃシンプルです。**
無駄なデザインやボタンを全て排除した、とても美しいデザインになっています。

コードに集中し、思考を妨げることなく、ノンストレスなコーディングができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354659/e95688f8-d663-f1e7-1cf7-163a0eed5b58.png)

#好みに合わせたテーマ
`RunJS > Preference > Appearance ` から様々なテーマやフォントを選べます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354659/ac890bee-e443-a1a3-72fa-54fa31da0732.png)

僕は `Monokai`と `Cica` の組み合わせが大好きですが、他にも様々なテーマが用意されているので、好みや気分に合わせたカスタマイズが可能です。

#Vimキーバインドにも対応
プログラマになりたての頃に、「なんかカッコいい」 という浅はかな気持ちで、Vimという中毒性のあるエディタを使ってから、Vimキーバインドがないと生きていけない身体になってしまいました。

そんなVimmerに朗報です。

**なんと、このRunJSはVimキーバインドにも対応しています！！！！**

`RunJS > Preference > General ` の `use Vim key-bindings` という項目にチェックを入れると、Vimキーバインドを使用することができます。

これでVimmerの皆さんも思考のスピードで開発できることでしょう。

その他にも様々な設定が用意されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354659/639da1ab-fd6a-edec-3dac-1530e7a01a53.png)

#TypeScriptにも対応
Babelのトランスパイル機能を利用しているので、何も設定しなくてもTypeScriptをサポートしています。
学習中の方でも遊びながら学ぶことができますね。

#Nodeモジュールのインポートにも対応
Nodeモジュールのインポートにも対応しているので、ローカル環境を汚すことなく気軽に外部モジュールを使った処理も実行することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354659/a04d9f04-c453-73e7-9535-4030e69a1bf9.png)

#コードフォーマット機能も搭載
`Action > Format Code` でコードをフォーマットすることが出来るので乱雑なコードも一瞬で整形することができます。
![format.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354659/62fb32ac-42ae-7233-773f-615846745210.gif)

#まとめ
RunJSはシンプルで美しいアプリケーションだと思います。

「このコードもっとスマートにならないかな…」
「このコードの結果はどうなるんだろう？」

などの場面でサクッと試すことが出来るのはとても便利ですよね。
Vimのキーバインドも対応している為、ある程度ヘビーな使い方もできるのではないでしょうか。
興味のある方は是非インストールしてみてください。
【Python】2の補数変換


## 概要
Pythonで「数値」と「16進数文字列」の相互変換。
マイナス値は、2の補数表現。

## コード lambda
```python
## 2の補数変換 lambda
bits = 8

all_one = (1<<bits) - 1
int2ss = lambda i: hex(i & all_one)
## int2ss = lambda i: hex(i & ((1<<bits) - 1))

sign_mask = (1<<(bits-1))
ss2int = lambda s: -(int(s,16) & sign_mask) | int(s,16)
## ss2int = lambda s: -(int(s,16) & (1<<(bits-1))) | int(s,16)
```

## コード 関数版
```python
## 2の補数変換　関数版
def int_to_signed_string(i, bits):
    return hex(i & ((1<<bits) - 1))

def signed_string_to_int(s, bits):
    ss = int(s,16)
    return -(ss & (1<<(bits-1))) | ss

## テスト用
bits = 8
int2ss = lambda i: int_to_signed_string(i, bits)
ss2int = lambda s: signed_string_to_int(s, bits)
```


## Test
```python
test = [-128, -127, -2, -1, 0, 1, 2, 126, 127]
test_str_hex = []

for t in test:
    print(f"{t}: {hex(t)}, {int2ss(t)}")
    test_str_hex.append(int2ss(t))

print("---")

for t in test_str_hex:
    print(f"{t}: {int(t, 16)}, {ss2int(t)}")
```

実行結果。
左が変換前、真ん中が2の補数を考慮しない場合、右が考慮した場合。

```
-128: -0x80, 0x80
-127: -0x7f, 0x81
-2: -0x2, 0xfe
-1: -0x1, 0xff
0: 0x0, 0x0
1: 0x1, 0x1
2: 0x2, 0x2
126: 0x7e, 0x7e
127: 0x7f, 0x7f
---
0x80: 128, -128
0x81: 129, -127
0xfe: 254, -2
0xff: 255, -1
0x0: 0, 0
0x1: 1, 1
0x2: 2, 2
0x7e: 126, 126
0x7f: 127, 127
```


## 参考
[Pythonで2の補数を10進数に変換する - Qiita](https://qiita.com/ein-san/items/d73ea8483732f09ba37f)
circleCIの公開imageをローカルで起動する


##公開イメージについて
こちらのcircleCIのサイトに詳細が記載されています。
https://circleci.com/docs/2.0/circleci-images/

CI/CDで使用しているcircleCIの公開docker imageを変更したいが、
事前にローカルで動作確認しておきたい場合などに使用しています。

##imagaのダウンロード

ダウンロードできるimaga一覧は↓から確認が可能です。
https://circleci.com/docs/2.0/docker-image-tags.json
ダウンロード対象が決まったらdockerコマンドでダウンロードしましょう。

```
python3.6をDLしたい場合
"python": {
	"name": "Python",
	"tags": [
		・
		・
		"3.6"★
		・
		・
例
# docker pull circleci/python:3.6
```

[docker hub](https://hub.docker.com/search?q=circleci&type=image)のサイトでも対象のimagaeの一覧が見れますが、
これがまた検索しづらい・・・。

imageがダウンロードされた事を確認

```
# docker image ls
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
circleci/python     3.6                 eb893dc1e857        37 hours ago        1.38GB
```

##コンテナの作成

```
コンテナ作成と起動
# docker run -it eb893dc1e857 /bin/bash
```

このイメージをベースにオリジナルのimageを作成してcircleCIを
動かす事でより快適にCI/CD運用ができると思います。
Azure TrafficManagerクライアント証明書対応

Azureにてクライアント証明書認証+TrafficManagerを使って冗長化しようとしてハマったので、同じ状況の方へ向けて
# 環境
Azure WebApps Asp.Net
○TrafficManager
×FrontDoor(クライアント証明書に対応していないです。)

# クライアント証明書認証の実装（まだ実装してない方）
こちらの手順でWebサーバーにクライアント証明書を要求するよう設定し、
コード上に検証処理を追加します。
（記事に出てくる”X-ARR-ClientCert”ヘッダーはAzure特有なので、ローカル実行の際は証明書の検証処理をスキップする仕組みが必要です）
https://docs.microsoft.com/ja-jp/azure/app-service/app-service-web-configure-tls-mutual-auth


# TrafficManagerを使ってWebサーバーを冗長化（まだ実装してない方）
Azureポータルでサービスを検索すると「Traffic Manager プロファイル」があるので、
作成します。
ルーティングの項目はとりあえず「優先度」にしました。

次にTrafficManagerに対して、Webサーバーを設定します。
TrafficManager>エンドポイント>追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139166/da61d1a4-f35a-c1e4-c6d2-8bb1e7d6ea89.png)
※秘儀Sublimeモザイク

名前とリソースを決めて作成



# 問題のクライアント証明書対応

TrafficManagerは定期的にWebサーバーの生存を確認します。(正常性プローブ)
この正常性プローブがHTTPSに対応しておらず、Webサーバーに実装しているクライアント証明書の検証が通らないそうです。
"X-ARR-ClientCert"ヘッダーが取れないんだと思います（予測）

Azureサポートに連絡して回答をいただき、


>Traffic Manager の正常性プローブに対して、Web サーバー側でクライアント証明書の検証を
実施しないよう構成していただくか、正常性プローブを HTTP または TCP に変更していただくことで、
お客様のご要件を実現できる可能性がございます。
上記をふまえ、ご要件が実現可能かご検討いただけると幸いです。

私は前者の正常性プローブのリクエストに対して証明書の検証をスルーさせました。

私はなんとなく前者をやってできたので、後者は試してないのですが、
trafficmanager>構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139166/1381bd03-455c-22bc-db59-b1f1924be2d2.png)
画像のプロトコルをHTTP、ポートを80にすれば証明書の検証が通るかもしれません。（というかデフォルトでそうなっている。）
私は作成時に考え無しにHTTPSにしたので、ハマりましたが、普通にやってればなにもなく作成できたかもしれないです。

正常性プローブでwebサーバーが正常になっているか確認します。
trafficmanager>エンドポイント
モニターの状況を確認して「オンライン」になっていれば大丈夫です(反映に多少遅延があります。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139166/7c81f815-e3a5-8645-8cbf-bd1d2717de78.png)

もしもモニターの状況が「低下」になっている方は次の解決法を試してください。

# 正常性プローブは証明書の検証をスルーさせる
クライアント証明書なしでもアクセスしていいファイルやapiを用意します。
私の場合は/Homeにしました。

Web Service>構成>全般設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139166/dd0e9948-72ea-e37a-407e-0a758d71db8a.png)
証明書の除外パスに/Homeを設定します。

次に正常性プローブ先を/Homeに設定します。
trafficmanager>構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139166/791e5bdf-2dd0-8f1b-ca88-bd437ba331b0.png)
パスに/Homeを設定

最後にコード側で/Homeのリクエストは証明書の検証をスルーさせます。

```C#
HttpContext context = HttpContext.Current;
HttpRequest httpRequest = context.Request;

// Homeは証明書の検証をスルー
if (httpRequest.Path != "/Home")
{
    // 私のソースでいうところの検証処理関数
    ClientCertificateUtility.Validate();
}
```

これでデプロイすればモニターの状況が正常にオンラインになるはず！
レスポンシブデザインにおけるサイズの設定

フロントエンド初心者である自分がWebページをHTMLとCSSで実装するときに、「レスポンシブに対応した」とは具体的にどのような状態？どう実装すれば良いの？と頭の整理が必要だったのでまとめました。

# レスポンシブデザインとは？
まず、改めてレスポンシブデザインとは「どんな端末のブラウザで表示しても見やすいWebページのデザイン」です。

PCやスマホ、タブレットと異なるディスプレイの大きさの端末で同じWebページを表示したときに、全部の端末でPC向けのデザインで表示すると、スマホだと画面が小さすぎて見辛かったりします。
逆に、スマホだけを想定して実装したページは、大きなPCのディスプレイで見ると間延びして見えるかもしれません。
これらの問題を解決し、表示するディスプレイの大きさに応じて見やすいデザインを表示するのが「レスポンシブデザイン」です。

# 各要素の「サイズ」をどう対応するのがベストか
デザインに関することなので、Webページによってどう見せるのがベストなのかは異なるかと思うのですが、ベースとなる考え方は整理しておこうと思います。
ここでは、各要素の「サイズ」について整理します。

サイズについての対応方法を大きく次の3つに分けました。

* パターン1・・・ディスプレイサイズに関わらず、一定のサイズを表示する。
* パターン2・・・切替えるポイント(ディスプレイの横幅が〇〇px以上/以下の場合)を設定し、ディスプレイの大きさによってサイズを切替える。
* パターン3・・・ティスプレイのサイズに応じて常に表示するサイズを変動させる。

各要素について、次のように対応するのがベストではないかと整理してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386017/0bf83f13-f6f4-42d8-fedb-c399f8d25bf1.png)

# 各パターンの実装方法

## パターン1（一定）
px・rem・em・% などの単位を使ってサイズを指定します。
単位の詳細は[こちら](https://qiita.com/maruuuuu/items/dd3abea9c0c0579e72b0#%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E5%8D%98%E4%BD%8D)に記載しています。

どの単位を選ぶかによってサイズの設定方法は変わりますが、ディスプレイを拡大/縮小しても初期表示のサイズから変わりません。

## パターン2（ポイントで切替)
CSSの「メディアクエリー」という設定を追加することにより、指定したサイズ以下のディスプレイ表示の場合にCSSを切り替えることができます。
具体的な設定方法は、[こちらのサイト](https://syncer.jp/how-to-create-responsive-web-design)が詳しくて分かりやすいです。
切替ポイント(max-width)をどれくらいのサイズにするかですが、大体600px前後で切り替わるように設定していることが多いようです。


## パターン3(スムーズに変動)
vw・vhなどの単位を使ってサイズを指定します。ディスプレイのサイズに対する割合で各要素のサイズが決まるため、ディスプレイを拡大・縮小すると各要素も拡大・縮小します。
単位の詳細は[こちらの記事](https://dev.classmethod.jp/articles/css-length-viewport/)が分かりやすいです。

# サイズ以外の対応について
各要素のサイズ以外にも、デザインにおいて考慮すべき点はあります。
例えば、ディスプレイのサイズによってボックス要素を横に並べるか、縦に並べるか・・1列表示なのか、3列表示なのか・・・など、レイアウトそのものを切替えたい場合もあるかと思います。そのような場合は`パターン2`のメディアクエリーを使って、CSSを切り替える必要があります。
その辺りはまた整理が必要になれば書こうと思います。

# 参考
* [初心者も分かる！レスポンシブ・デザインの作り方](https://syncer.jp/how-to-create-responsive-web-design)
* [CSS には vw, vh, vmin, vmax という単位がある \| Developers\.IO](https://dev.classmethod.jp/articles/css-length-viewport/)
* [【CSS】結局レスポンシブでのフォントサイズはどう書くべき？ \| SEO対策なら株式会社ペコプラ](https://pecopla.net/web-column/fontsize-css)
* [HTMLのフォントサイズで最大値・最小値を指定する方法を現役エンジニアが解説【初心者向け】 \| TechAcademyマガジン](https://techacademy.jp/magazine/39401)
本家リポジトリにローカルリポジトリを追従させたい

## 前提

 1. 本家リポジトリは`origin/master`
 1. 本家リポジトリをforkし、リモートリポジトリ`origin/master`ができた
 1. リモートリポジトリをcloneし、ローカルリポジトリ`origin/master`ができた
 1. commitが先に進んだ本家リポジトリ`origin/master`の変更を、ローカルリポジトリ`origin/master`に反映させたい



### 1

まず、作業ディレクトリに移動する。

本家リポジトリを`upstream`という名でローカルに登録する。`upstream`の箇所は、新しいものであれば、何でもよい。

```
git remote add upstream <本家リポジトリのURL>
```

この作業は、初回のみでよい。



### 2

ローカルで`upstream`と名付けた本家リポジトリを、ローカルリポジトリにpullする。

```
git pull upstream <pull元のbranch>:<pull先のbranch> --allow-unrelated-histories
```

今回の条件設定では、本家`upstream/master`から、ローカルの`origin/master`にpullをするので、`git pull upstream master:master --allow-unrelated-histories`となった。

また、ローカルリポジトリにないファイルを本家リポジトリにからpullするのに、オプション`--allow-unrelated-histories`を用いる。Gitが追跡していないファイルをpullする際に必要だ。



## 参考

 * [マンガでわかるGit 12話「本家リポジトリに追従する方法」 | リクナビNEXTジャーナル](https://next.rikunabi.com/journal/20180322_t12_iq/)
 * [ローカルブランチに特定のリモートブランチをpull](https://qiita.com/hinatades/items/d47dec72a87c5fed50f7)
 * [【Git】ローカルに存在しないファイルがリモートリポジトリにコミットされている場合](https://note.com/anchor_cable/n/n6192ce1ebb63)