OmniAICreator/Qiita-1.07M huggingface dataset:
AWSを触る　～作ったサーバへのSSH接続～

前回はサーバーの構築をやりました。

[AWSを触る　～サーバーの構築～](https://qiita.com/roku28632/items/6a64dab3ea814905230e)
 
今回は前回作ったサーバーへの接続を試してみようと思っています。
自身のクライアントがWindowsなので、接続クライアントとしてはTeratermを利用します。
まず、Teratermの導入から始めていきます。
 
#Teratermの導入
まず、導入用の資材をダウンロードしてきます。
自分は、「「Tera Term」定番のターミナルエミュレーター - 窓の杜」からダウンロードしてきました。
<img width="335" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/c102320c-d614-ca57-ff4d-362af97a0661.png">

ダウンロードできたらexeを実行します。
<img width="625" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/3cb7b7e8-39b0-12f5-6bbe-d320a1b0d313.png">

特殊なことはしないので、全部デフォルトのままです。
<img width="150" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/10464db6-e0fb-19b8-b549-3b566bc8c562.png">
<img width="250" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/c6e84be9-605a-0117-a16a-993608848ea0.png">
<img width="250" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/5a065ddb-4330-6f95-329e-68c47c535af8.png">
<img width="250" alt="6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/b1a64937-10e1-b7fa-7cb6-311c505a9b7f.png">
<img width="250" alt="7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/921bd305-b2cc-9850-feda-060e605f1198.png">
<img width="250" alt="8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/1c5f09f0-b7e7-fc85-bfe1-79fb8dc310a6.png">
<img width="250" alt="9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/31b18509-01cc-7bde-3c22-7b866df9ed13.png">
<img width="250" alt="10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/02155343-f2e7-350c-fffd-44d39dbf5139.png">
<img width="250" alt="11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/60c24f4c-3fe6-79c7-7b45-77481353ac86.png">

導入できたらデスクトップにパソコンマークのアイコンができました。
<img width="40" alt="12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/eeb1eca2-f5a2-ae44-3b0c-70556acc95fa.png">

#teratermによる接続
起動して、awsで構築したサーバーのパブリックIPアドレスを指定します。
前回の記事では「自動割り当てパブリックIP」を「有効化」したので、起動のたびにIPアドレスは変動しています。
IPアドレスはインスタンスの画面から確認できると思います。

サービスはSSHを選択し、「OK」を押下します。
<img width="751" alt="14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/99772b7d-6888-aae2-996e-b55254c8fb3e.png">
<img width="405" alt="13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/b816247e-71b4-6ab3-35eb-b0abc03fb758.png">

セキュリティ警告が表示されますが、そのまま「続行」を押下します。
<img width="341" alt="16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/7bc51f2e-09b9-2aed-e5c7-82bb17b4cdae.png">

ユーザ名に任意の文字列を入力します。
「RSA/DSA/ECDSA/ED25519鍵を使う」を選択し、秘密鍵にサーバ構築時にダウンロードしたkeyを指定します。
「OK」を押下します。
<img width="403" alt="17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/b4e0ca86-553c-8baa-dd0a-8407cfcf82ab.png">

接続できたらこんな感じになります。
<img width="495" alt="18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/2d73397f-7a59-8e8e-3435-015884c12264.png">
 
これで接続確認もOKですね。
競プロの基本事項確認~コンテナ上の二分探索~

競技プログラミングにおける二分探索の関数の使い方を忘れがちなので備忘録として残しておきます。
また、この記事では二分探索がどのようなものかについては扱っておりませんのでご注意ください。
さらに、この記事は**基本的な使い方**を確認することが目的なのでご了承ください。

#Pythonでの二分探索([bisectモジュール](https://docs.python.org/ja/3/library/bisect.html))

Pythonではbisectモジュールで二分探索に関連した関数が扱われています。
このモジュールでは、**(昇順)ソート済みのリスト**の順序を保ちながら操作することをサポートしています。


競技プログラミングでは、下記の二つの関数を主に用います。
また、以下では調べたい要素をx,調べる**(昇順)ソート済みのリスト**をaとし、第一引数はa,第二引数はxとします。
第三引数,第四引数ではaの中での調べる範囲を指定できますが、ここでは扱いません。[bisectモジュール](https://docs.python.org/ja/3/library/bisect.html)を見てください。

###①bisect_left
　(順序を保ったままで)xのうちで一番左側のaへの挿入箇所のインデックスが返されます。
　$\leftrightarrow$x以上の要素で最小の要素のインデックスが返されます。
　$\leftrightarrow$左隣の要素はxより小さい要素の中で最も(インデックスが)大きい要素になります。

###②bisect_right
　(順序を保ったままで)xのうちで一番右側のaへの挿入箇所のインデックスが返されます。
　$\leftrightarrow$xより大きい要素で最小の要素のインデックスが返されます。
　$\leftrightarrow$左隣の要素はx以下の要素の中で最も(インデックスが)大きい要素になります。

#C++での二分探索([lower_bound](https://cpprefjp.github.io/reference/algorithm/lower_bound.html)と[upper_bound](https://cpprefjp.github.io/reference/algorithm/upper_bound.html))

C++では[algorithmライブラリ](https://cpprefjp.github.io/reference/algorithm.html)で二分探索に関連した関数が扱われています。
このライブラリでは、**アルゴリズムの要件を満たすイテレータを持つ場合**はどのデータ構造でも動作します。

競技プログラミングでは、下記の二つの関数を主に用います。
また、先ほどと同様に、調べたい要素をx,調べる**(昇順)ソート済みの配列**をaとします。
この時、第一引数をa.begin(),第二引数をa.end()として調べる範囲を指定し、第三引数に調べたい要素であるxを指定します。

###①lower_bound
　Pythonのbisect_leftと同義ですが、x以上の要素で最小の要素の**イテレータ**が返されます。
　また、最小の**インデックス**を得たい場合は(戻り値)-a.begin()で得ることができます。

###②upper_bound
　Pythonのbisect_rightと同義ですが、xより大きい要素で最小の要素の**イテレータ**が返されます。
　また、最小の**インデックス**を得たい場合は(戻り値)-a.begin()で得ることができます。


#おまけ
✳︎昇順ソート済みのリストであることが必要ですが、演算子のオーバーロードにより昇順でないソートが可能です。
✳︎C++のlower_bound,upper_boundについて詳しく知りたい場合は、[この記事](https://qiita.com/ganariya/items/33f1326154b85db465c3)を参考にしてください。
✳︎他にも重要なことがあったらコメントなどで教えてください！
【powershell】プロンプトで曜日感覚を取り戻す


在宅勤務が続いて曜日感覚がなくなってきたので、プロンプトで曜日感覚を取り戻そうと思います。

## サンプル
色だけ変えるとこんな感じになります。
![20200522113432.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501098/264b8ea1-e675-2f89-d948-1779f276ffa6.png)
![20200522113448.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501098/1db6371f-9828-b154-2e56-0b23f9614a92.png)
![20200522113504.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501098/b1927e5f-6f08-8cf4-b5e7-39addd7b782e.png)
![20200522113522.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501098/2c59a86a-772f-8185-2eda-10c87754f50f.png)

## prompt
```Microsoft.PowerShell_profile.ps1
function prompt {
    $table = @(
        @("日", "DarkYellow", "White"),
        @("月", "DarkBlue",   "White"),
        @("火", "Magenta",    "Gray"),
        @("水", "DarkCyan",   "White"),
        @("木", "Green",      "White"),
        @("金", "Yellow",     "DarkGray"),
        @("土", "Cyan",       "White")
    )
    $today = $table[[System.Convert]::toint32((Get-Date).DayOfWeek)]
    $leaf = $pwd.Path | Split-Path -Leaf
    Write-Host ("{0}[{1}]" -f (Get-Date -Format "yyyy-MM-dd"), $today[0]) -NoNewline -BackgroundColor $today[1] -ForegroundColor $today[2]
    Write-Host "~\$leaf" -ForegroundColor $today[1] -BackgroundColor $today[2]
    Write-Host ">" -NoNewline
    return " "
}
```
【プログラミング初心者】binding.pryを使用したログイン画面のデバッグ方法

##記事を書く目的
プログラミングを勉強中です。
エラーで詰まることばかりの為、自分でしっかりとデバッグができるようになりたいと考え、備忘録としてデバッグを行った際の記事を残します。

##環境
Mac OS catalina 10.15.3
Rails 5.2.4.1
Visual Studio Code

##状況
Railsを用いてアプリケーションを開発中、ログインができないというエラーが発生しました。
（deviseを使わず実装しています）
何が問題なのか突き止めるべく、binding.pryを使ってみます。

##デバッグの手順
###①gem 'pry-rails'をインストール（binding.pryを使うためのgemです）

```ruby:Gemfile

gem 'pry-rails', group: :development
↑
これをファイルの一番下に追記
```
デバッグは開発環境でしか使わないのでgroup: :developmentを記載しています。

```ruby:Gemfile
group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'spring'
  gem 'pry-rails', group: :development
    ↑
group :development doの中に記載
するのでも問題ないです。

```

###②ターミナルでbundle installを行う
pry-railsが読み込まれ、実際に使用することができるようになります。

###③実際に、調べたいコードの中にbinding.pryを入れ込む

今回は、ログインができないというバグが起こっています。
ログイン時には、ユーザーのメールアドレスとパスワードを入力します。
デバッグを行うことで、ログインしている情報が誤っているのか、正確に情報がコントローラに伝わっていないのか、どこに問題があるのかを切り分けることができます。

```ruby:sessions_contoroller.rb
def create
    company = Company.find_by(email: session_params[:email])
    if company && company.authenticate(session_params[:password])
      session[:company_id] = company.id
   →　binding.pry(コードの途中に記載します）

      redirect_to root_path,notice: 'ログインに成功しました'
    else
      render :new
    end
  end
  
```
binding.pryというコードが読み込まれた時点で処理を止めるので、「ログイン」など押すことができなくなります。

###④処理が止まっている状態でターミナルを開く
````ruby:terminal
  Company Load (0.6ms)  SELECT  "companies".* FROM "companies" WHERE "companies"."email" = ? LIMIT ?  [["email", "foobar@example.com"], ["LIMIT", 1]]
  ↳ app/controllers/sessions_controller.rb:9
Unpermitted parameter: :password

  ↑この文章に注目

  Rendering sessions/new.html.erb within layouts/application
  Rendered sessions/new.html.erb within layouts/application (3.4ms)
  Rendered partial/_navbar.html.erb (1.7ms)
  Rendered partial/_footer.html.erb (1.1ms)
Completed 200 OK in 450ms (Views: 168.0ms | ActiveRecord: 1.5ms)

```

ターミナルを開くと、エラー文が表示されています。
Unpermitted parameter: :passwordは直訳すると
「password入力画面があるけど、passwordはパラメーターとして許可されていません」という意味になります。

→ここで初めて、passwordを情報として入力する許可（permit)を忘れていたことがわかりました！

###⑤sessions.controllerのsession_paramsを修正する
```ruby:sessions.controller.rb
修正前
 private 
  def session_params
      params.require(:session).permit(:name,:email)
  end

修正後
private 
  def session_params
      params.require(:session).permit(:name,:email,:password)
  end

```

これで:passwordがパラメーターで弾かれず、コントローラに情報が渡る様になったため、
無事にログインができる様になりました！！！

##学んだこと
binding.pryを用いれば、簡単にデバッグができる。

エラーが出ると焦ってしまいますが、エラー文やコードに、エラー解決へのヒントは記載されている

今回はsession_paramsに基づくシンプルなデバッグでしたが、
コードが複雑になったもしっかり応用できるようにしたいと思います。
MFA端末を紛失して2要素認証ができない場合、AWSに問い合わせる方法

## 無料会員中に作成したEC2インスタンスが起動中だった

無料会員中にCloud9を利用していたが、そのままEC2インスタンスを立ち上げたまま放置していた。

最低スペックのインスタンスが4つ立ち上がっていて、毎月7ドル強課金され続けていた。

## MFA端末が手もとにない場合のAWSへの問い合わせ方法

今回は一番面倒であろう、電話番号が有効でなかった場合だったのでそちらを例にしている。

まず、MFA設定中のアカウントでログインする。

ルートユーザーでログインを試みた際の画面を表示している。

メールアドレスとパスワードを入力すると、以下のような画面になるがMFAコードが発行できないので以下の「MFAのトラブルシューティング」をクリックする。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87431/72942595-5405-1c9e-6950-c4f5f3f06f8c.png)

次に以下のような画面が表示されるので「別の要素を使用したサインイン」をクリックする。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87431/311c1da4-a40d-27a8-e4cc-3e02b052418b.png)

ここで別の要素で認証する場合、3ステップあることが確認できる。

- メールアドレス
- 電話番号
- サインイン

まずは登録しているメールアドレス宛てにメールを送信する。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87431/34349f49-c87a-14ee-c467-5849d5fc3815.png)

以下のようなメールを受信するので以下のリンクをクリックする。

![4-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87431/b48c7887-f7a9-455d-4ee4-4fdbffbfc3ae.png)

次に電話番号での認証に移る。

「すぐに連絡を受ける」をクリックする。

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87431/25e20d21-7da6-4da6-b699-92012c14a594.png)

そのまますんなり電話番号が認証できればいいが、できない場合は以下のように「AWSサポートへお問い合わせください。」をクリックする。

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87431/afc0e882-e635-35c3-49fe-af7f068db4e7.png)

その後、入力フォームに移るので該当する項目を選択・入力し、「Submit」をクリック。

![AWS_Support.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87431/834b0a8e-c35c-4df1-19cc-79d39e1fc1ce.png)

ちなみに以下の意味はそれぞれ上から、

- MFA端末が紛失したり、盗まれたり、壊れたりした場合（つまり利用不可の場合）
- MFA端末が表示されなかったり、エラー表示になって適切に利用できない場合
- MFA端末は動作しているが、サインインもしくは再接続ができない場合
- MFA端末は正しく動作しているが、MFA認証コードが登録できない場合
- 上記以外の場合

となっている。

![スクリーンショット 2020-05-02 10.59.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87431/e2207f1d-d4cf-547f-503f-2cd279f384d0.png)

最後の項目（対応言語）を「日本語」にすると、日本語で対応できるスタッフとの通話になるが以下のように英語だと15分程度とのことなので今回は英語対応スタッフに対応いただくことにした。

![スクリーンショット 2020-05-02 11.01.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87431/6e4eb141-fd99-d783-ad7f-b7d8639cbfa2.png)

すると英語対応スタッフから10分くらいでフォームに入力した電話番号に非通知（事前に着信を許可する必要あり）で電話がかかってきて以下の質問を聞かれた。

- 状況確認
- メールアドレス確認
- 通話中にメールで送られたOTP確認
- アカウント名確認

状況に関しては "I couldn't log in AWS with MFA code." のようなことを言っただけで問題なかった。

OTPは以下のメールに記載されている8桁の英数字のコードを伝える。

![スクリーンショット_2020-05-02_11_39_34-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87431/71eda1f2-9abf-225c-10b6-090f26b6d6ab.png)


アカウント名は以下で設定しているものを回答する。管理画面が確認できない場合（というより大抵の場合はそうだが）、先ほど送られたメールに記載の自分の宛名（Hi, xxxxxx）の部分が自分の場合はアカウント名と同じだったので事なきを得たが、もし異なっていた場合はChromeの保存パスワードにあるかどうか確認したり（IAMユーザの場合、入力項目が3つなので無理かも？）、どうしてもない場合は別の手段で認証チェックすることになるかもしれない。

![スクリーンショット_2020-05-02_11_13_49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87431/65b31f56-368f-572a-972c-92f3867e4f87.png)

![スクリーンショット_2020-05-02_11_13_31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87431/bb6e8f2f-2068-055d-e469-1cc309a7e23b.png)

## まとめ

15分以内で電話が来るサポート体制は素直にすごいと思った。

これでまたAWSの学習を頑張れそう。
go lang やってみた ファイル名に_testをつけたらだめだった。



前にやったことをい出しながら、試しにやってみたら、うまく動かない。

srcの下に、hoge_testというのをつくって、hoge_test.goに、printだけをいれてみたのだけど、

下記のようなエラーがでてしまう。

no non-test Go files in

ファイル名に_testをつけると、テストファイルになるもよう。
Wrapを実装してみた

Flutter では子要素のwidthが親要素の幅のそれを超えると工事中のマークのような表示でエラーを示します。
RowやColumnのように、不特定多数の子要素を持つwidgetでは、エラー表示にならないように用途に応じて実装を行います。

実装の方針は以下のようになりますが
- 親要素の幅に収まらない場合はスクロールする(ScrollViewなどでの実装)
- 親要素の幅に収まらない場合は改行（列）する

Wrapは後者を実装するためのWidgetです。
Wrapは、親要素の範囲の中で横または縦に要素を並べた際に、はみ出た際は次の行または列を生成し要素を再度並べます。

サンプルコードと実装結果画像は以下になりますので、ご参考にいただければと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526878/ef26691a-b747-8b95-bd28-fa6c018ddfc5.png)

サンプル:https://github.com/kiriko-rs/ui_day1

WrapのAPIDoc: https://api.flutter.dev/flutter/widgets/Wrap-class.html
Swift で競プロをする際の標準入力について

##はじめに
swiftで競技プログラミングに挑戦しようとしたところ標準入力readLine()がうまく使えず行き詰まっていましたが、解決したので共有します。
参考になれば幸いです。
入力される値がスペースで区切られているのか、何行にも渡っているかなどの条件により対応が異なります。
##例1.入力される値が一つ

###String型の場合

**入力される文字列nameに対し"Hello,name!"という文字列を出力せよ。**という問題を想定します。

```swift
let name = readLine()!
print("Hello,\(name)!")
```
入力される文字をnameと定義するためにはreadLine()を用います。

###数値型の場合
**入力される数字の2倍の数字を出力せよ。**という問題を想定します。

```swift
let input = Int(readLine()!)!
print(input * 2)
```
readLine()はString型を返り値にもつ関数なので、数値型(ここではInt型)に変換しましょう。

##例2.入力される値が複数ある
###スペースで区切られている場合

**入力される2つの数の和を出力せよ。
ただし入力は `3 4` のように入力されるものとする。　**という問題を想定します。

```swift
let input = readLine()!
let num = input.split(separator: " ")

let stringNum1 = num[0]
let stringNum2 = num[1]

let Intnum1 = Int(stringNum1)
let Intnum2 = Int(stringNum2)

print(Intnum1! + Intnum2!)
```

配列の抜き出しや数値型の変換について飛躍することなくコーディングすると上のようになります。
上のコードを短くまとめると

```swift
let input = readLine()!
let num = input.split(separator: " ")

print(Int(num[0])! + Int(num[1])!)
```
のように書くことができます。numはスペースを含んだ配列inputに対して、スペースをのぞいた要素を格納した配列であることに注意しましょう。

###改行で区切られている場合
**入力される2つの数の和を出力せよ。
ただし入力は以下のように入力される。
`3
 4 ` 　**という問題を想定します。
readLine()は一行に入力される値を読み込むので

```swift
let input1 = Int(readLine()!)!
let input2 = Int(readLine()!)!

print(input1 + input2)
```

のようにします。もちろん

```swift
let input1 = readLine()!
let input2 = readLine()!

print(Int(input1)! + Int(input2)!)
```
のように変換する場所を変更しても大丈夫です。

##例3.はじめに入力された整数Nの数だけ入力が繰り返される
###入力がスペースで区切られている場合

**一行目に整数Nを入力される。
二行目に入力される数の和を出力せよ。
ただし値は
`4
1,4,5,2` のように入力されるものとする。**という問題を想定します。

```swift
let N = Int(readLine()!)!
let inputNumbers = readLine()!
var numberArray:[Int] = []
for i in 0..<N {
    let splitedArray = inputNumbers.split(separator: " ")
    numberArray.append(Int(splitedArray[i])!)
}

var sum = 0
for i in 0..<N {
    sum += numberArray[i]
}

print(sum)
```
入力のfor文と和を求めるためのfor文を分けて書いています。
手順としては、入力されたスペースを含む文字列をsplitで要素ごとに分けて配列に格納し、予め用意しておいた`numberArray[Int]`にappendしています。
配列に格納することで`1,4,5,2`と入力された値をそれぞれ`numberArray[0],numberArray[1],numberArray[2],numberArray[3]`のように扱うことができるようになります。

###改行で区切られている場合

**一行目に整数Nを入力される。
二行目に入力される数の和を出力せよ。
ただし値は
`4
1
4
5
2` のように入力されるものとする。**という問題を想定します。

```swift
let N = Int(readLine()!)!
var sum = 0
for i in 0..<N {
    let number = Int(readLine()!)!
    sum += number
}
print(sum)
```
readLine()は一行に書かれた値を読み込むので、改行で区切られている場合の方がコードは短いです。

このほかにも様々な入力のパターンがありますが、例として出したパターンの応用で乗り越えられると思います。
macOS Catalina & Chrome でもマイナポータル・ぴったりサービスで特別定額給付金を申請できた

特別定額給付金の受付が始まりました。マイナンバーカードを持っている人は、「[マイナポータル](https://myna.go.jp/)」からの「ぴったりサービス」でオンライン申請ができるはずです。

![01.teigaku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/e044d5a3-dee3-7d91-51b0-6f9af6dcbe87.png)


残念ながら macOS Catalina はサポートされていないと表示されます。

![02.teigaku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/d9189d7b-24d0-697d-c134-c5eb36d13428.png)

しか〜し、e-Tax は macOS Catalina でもサポートされているので、多分、お役所とシステム会社が動作保証していないから跳ねているだけではないかと思い、Chrome の User Agent 情報を書き換えたら問題なく申請できたので、その手順を紹介します。

ここに書かれていることは、無保証です。**サポート外の行動ですので責任は持てません** (免責)

## 自分の環境

- MacBook Pro (13-inch, 2019, Four Thunderbolt 3 ports)
- macOS Catalina 10.15.4
- Google Chrome 81.0.4044.129
- カードリーダー: NTTコミュニケーション [ACR125CL-NTTCom](https://amzn.to/2KRW6am)

※カードリーダー付きのスマホを持っている場合は、スマホをカードリーダーにできるようです。

## 準備する時にハマったこと & おすすめ

- [NTT コミュニケーションズの製品サポートウェブサイト](https://www.ntt.com/business/services/application/authentication/jpki/download7.html) からドライバーソフトをインストールし忘れないようにしましょう。カードを認識してくれません。ドライバーソフトは Mojave (10.4) のものでインストールできました。
- [JPKI公的個人認証ポータルサイト](https://www.jpki.go.jp/) の「[利用者クライントソフトのダウンロード](https://www.jpki.go.jp/download/index.html)」で、Java のランタイムやソフトをダウンロードして、マイナンバーカードがきちんと認証できるかを事前に確認しましょう


## STEP 1: Chrome を立ち上げ　User Agent を変更する

普通に Chrome を立ち上げます。

メニューから「表示」->「開発/管理」->「デベロッパーツール」を開きます。

![03.teigaku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/d1933c02-c95d-62ec-fc01-19bfcdc0cff6.png)

デベロッパーツールのウィンドウの右端に、3つのドットが縦に並んでいるところをクリックします。

でてくるメニューから「More Tools」→「Network conditions」を選びます。

![04.teigaku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/8a96a581-a9b5-e782-5e0a-bbf9272f8dde.png)

Network conditions のタブの中で

User agentの中の「Select automatically」のチェックを外します。

「Chrome - Mac」を選びます。

出てくるテキストは、僕は何も変更しなくてよかったですが、 `Mac OS X 10_14_6` が文字列に入っている必要があります。

![05.teigaku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/9fc32127-9cd2-e97b-b9d2-5d12949a5a4a.png)

僕が試した User agent 情報は下記の通り。

```
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36
```

## STEP 2: マイナポータルAPのインストール

動作確認ページを読み込みなおします。

マイナポータルAPのインストールをするように表示が出たので、Chrome 用のソフトと Extension をインストールします。

(スクショを撮り忘れました)

## STEP 3: 再び動作確認

再び、動作確認ページに戻ると、申請に進むことができました。

![06.teigaku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/584c6745-c26d-614d-43a8-16eb85487b52.png)

## 注意：新しいタブやウインドウを開くと設定が無効に

動作確認をするときなど、新しいタブが開きます。その時は、User Agent の設定が無効になるので、URL をコピーして元のタブで開き直すか、遷移先のウインドウで、User Agent の設定をし直してください。

## STEP 4: 申請

さきほど、問題なく家族分の申請完了できました。

古い Mac OS や Windows 端末を探す手間が省けました。


## オリジナル記事

元はブログサイトでも公開しています。
http://ja.katzueno.com/2020/05/3741/
Rails テストについて  3 （モデル編）

#はじめに
テストに拒否反応があるので、まずは整理したいと思います。
少しづつ記事を書いていきます。
[Rails テストについて  1](https://qiita.com/raigakun/items/b88af7e80e64abfedcca)
[Rails テストについて  2](https://qiita.com/raigakun/items/d0d253f6338ce9d89fe5)
もうすでにご存知の方、省略の仕方等ご存知でしたら、ご助言願います。


##単体テスト（モデルクラス）
- インスタ風アプリで、実際にやってみようと思います。
- AWSデプロイ
- http://18.180.191.27/users/sign_in

### テスト対象
- photo **モデル**
- image（画像）がないと投稿できないようになっているのか確認

```photo.rb
class Photo < ApplicationRecord
  belongs_to :post

  validates :image, presence: true
  
  mount_uploader :image, ImageUploader
end

```
**validates :image, presence: true**というコードからバリデーションかけている。

##RSpec関係のキーワード（重要）
- specファイル　：　RSpecによるテストコードが書かれたファイル
- specファイルの保管場所　：　rails g rspec:installコマンドで生成された「specディレクトリ」内
- **モデル**に関するテスト用ファイル　：　spec/models/以下に保管
- **コントローラー**に関するテスト用ファイル　：　spec/controllers/以下に保管

##specファイルの命名規則（重要）
- specファイルは対応するクラス名_spec.rbという名前になる。
- 今回は「photo.rb」に関するspecファイルを作成
  - ということで、名前は「**photo_spec.rb**」となる。

###では早速作成します！

- フォルダとファイルを追加！（左の項目が緑文字の所です！）
<img width="1280" alt="qiitatest2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576541/a32f8b09-39a5-41c8-0557-64a34b78e811.png">



##photo_spec.rb内にコードを記述！
- 詳細は後々説明します！

```photo_spec.rb
require 'rails_helper'
describe Photo do
  describe '#create' do
    it "imageがない場合は投稿できないこと" do
      photo = Photo.new(image: "")
      photo.valid?
      expect(photo.errors[:image]).to include("は必要です。")
    end
  end
end
```


##各コードの説明
####require 'rails_helper'
- rails_helper.rb内の記述を読み込むことで共通の設定を有効にしている。
- この1行目の記述は、全てのspecファイルに書き込む。

####describe
- 直後のdo ~ endまでのテストのまとまりを作る役割。
- describeの後に続く""(もしくは'')の中にはそのまとまりの説明を書く。
- 今回は'#create'なおで、Photoクラスにあるcreateメソッドをテストするまとまりという意味。

####it do ~ end（exampleと呼ばれる）
- exampleと呼ばれる実際に動作するテストコードのまとまり。
- itの後に続く""の中にはそのexampleの説明を書く。
- 今回は"imageがない場合は投稿できないこと" という説明を書いています。

####photo = Photo.new(image: "")
- テストしたいプロパティを持ったphotoクラスのインスタンスを新規作成します。
- specファイルの中では、本アプリで作成しているモデルクラスを利用することができる。
- 今回は"imageがない場合は投稿できないこと"を確かめるテストコードを作成したい。
- ということで、imageの値を空にしました。

####photo.valid?
- valid?メソッドです。
- ActiveRecord::Baseを継承しているクラスのインスタンスを保存する際に「バリデーションにより保存ができない状態であるか」を確かめることができる。

####①expect(photo.errors[:image]).to include("は必要です。") 
- エクスペクテーションの文法。 **expect(X).to include Y**
- xの部分に入れた式の値がYの部分の値と等しければ、テストが成功します。
- includeの部分を、マッチャと言います。(他にeqやvalidもあります。）

####②expect(photo.*errors[:image]*).to include("は必要です。") 
- *斜字* の所は、errorメソッドです。
- valid？メソッドの返り値はtrue/falseです。
- しかしmvalid?メソッドを利用したインスタンスに対してerrorsメソッドが利用できます。
- バリデーションにより保存ができない状態である場合なぜできないのかを確認することができます。


##ではテストしてみましょう！

- RSpecのテストコードを利用したテストを実行するためのコマンドです。

```
ターミナル

% bundle exec rspec
```

## このような感じで出力されれば、テスト成功です。
- imageが空だと投稿できないのが確認できた！

<img width="456" alt="qiitatest3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576541/5c91c4f1-a1bf-20f6-18eb-439ee874ffd4.png">


###テスト編、続きます!(次はfactory_botというgemを利用して、効率化！)


#さいごに
日々勉強中ですので、随時更新します。
皆様の復習にご活用頂けますと幸いです。
【SQL】select文で四則演算する方法


前提条件
itemsテーブルがある。
カラムは以下の通り。

| id   |       name |    gender    | price | cost |
|:-----------------|------------------:|:------------------:|:-----:|:-----:|
|              |               |                |
|            |             |              |
|              |              |               |
|                |                 |                  |
|              |              |             |
|           |            |             |



###名前、値段、利益を取り出す。

```
select name, price, price-cost
from items;
```


###全商品の平均を取得する

```
select avg(price-cost)
from items;
```

###各商品あたりの利益が上位5件の商品の名前、利益を取得する

```
select name, price-cost
from items
order by price-cost desc #price-costを指定する
limit 5；  #取得数の制限をかける
```
Homebrew で入れた Vim が Python 3.8 のエラーで起動しない問題メモ

## TL;DR:

`LC_CTYPE` 環境変数を `ja_JP.UTF-8` にセットしたら直った。

## 調査

vim を起動すると以下のエラーが出てクラッシュするようになった。

```
% vim
Fatal Python error: config_get_locale_encoding: failed to get the locale encoding: nl_langinfo(CODESET) failed
Python runtime state: preinitialized
```

エラーメッセージで検索すると Python のバグトラッカーのスレッドが見つかった。 https://bugs.python.org/issue39397

ロケールの設定ミスが指摘されている。また `LC_CTYPE` 環境変数を削除するようアドバイスされている。報告者自身は `LANG` 環境変数を削除したら問題が解決したようだ。

自分の環境を確認する。

```
% locale
LANG="ja_JP.UTF-8"
LC_COLLATE="ja_JP.UTF-8"
LC_CTYPE="ja_JP.UTF-8"
LC_MESSAGES="ja_JP.UTF-8"
LC_MONETARY="ja_JP.UTF-8"
LC_NUMERIC="ja_JP.UTF-8"
LC_TIME="ja_JP.UTF-8"
LC_ALL=

% echo $LANG
ja_JP.UTF-8

% env | grep '^LC_ALL=' # 未定義
% env | grep '^LC_CTYPE=' # 未定義
```

`LANG` 環境変数が設定されている。 `LC_CTYPE` 環境変数は設定されていないため、 `locale` コマンドによればロケール設定 `LC_CTYPE` は `ja_JP.UTF-8` になる。

自分の環境では `LANG` 環境変数の設定を変えたくないため他の解決策を探す。

ここで、エラーの発生箇所らしい `nl_langinfo(CODESET)` の意味を調べた。 https://linuxjm.osdn.jp/html/LDP_man-pages/man3/nl_langinfo.3.html

> nl_langinfo() 関数は、 localeconv(3) より柔軟なロケール情報へのアクセス方法を提供する。 ロケールカテゴリーの個々の要素や追加の要素を問い合わせることができる。
> …
> CODESET (LC_CTYPE) 選択されたロケールで用いられる文字エンコード名を示す文字列を返す。

`nl_langinfo(CODESET)` はロケール設定 `LC_CTYPE` と関係があるようだ。その値は、 `LC_CTYPE` 環境変数の（未定義なら `LC_ALL` 環境変数の、それも未定義なら `LANG` 環境変数の）値と等しいはず。自分の環境であれば、 `LANG` 環境変数の値と同じ `ja_JP.UTF-8` になるはずだが、取得がうまくいっていないように見える。

試しに `LC_CTYPE` 環境変数を `ja_JP.UTF-8` にセットしてみる。

```
% export LC_CTYPE=ja_JP.UTF-8
% vim
```

これで問題なく Vim が起動するようになった。

## 環境

### Vim

```
% brew info vim
vim: stable 8.2.0654 (bottled), HEAD
Vi 'workalike' with many additional features
https://www.vim.org/
Conflicts with:
  ex-vi (because vim and ex-vi both install bin/ex and bin/view)
  macvim (because vim and macvim both install vi* binaries)
/usr/local/Cellar/vim/8.2.0654 (1,888 files, 32.6MB) *
  Poured from bottle on 2020-05-02 at 10:16:41
From: https://github.com/Homebrew/homebrew-core/blob/master/Formula/vim.rb
==> Dependencies
Required: gettext ✔, lua ✔, perl ✔, python@3.8 ✔, ruby ✔

% grep '^Plug ' .vimrc
Plug 'Shougo/deoplete.nvim' " |deoplete_nvim|
Plug 'roxma/nvim-yarp'
Plug 'roxma/vim-hug-neovim-rpc'
```

deoplete.nvim プラグインは Python 3 に依存する。このプラグインが Python 3 をロードしようとしてクラッシュしているように見える。

### Python

```
% brew info python@3.8
python@3.8: stable 3.8.2 (bottled) [keg-only]
Interpreted, interactive, object-oriented programming language
https://www.python.org/
/usr/local/Cellar/python@3.8/3.8.2 (4,196 files, 64MB)
  Poured from bottle on 2020-03-16 at 14:48:28
From: https://github.com/Homebrew/homebrew-core/blob/master/Formula/python@3.8.rb
```

### macOS

```
% sw_vers
ProductName:    Mac OS X
ProductVersion: 10.15.3
BuildVersion:   19D76
```
AWS上のAmazonLinuxから同じサブネットのLinuxサーバへsshしてみた

#概要
AWS上に立てたAmazonLinuxサーバから同じサブネット内のサーバへsshできずに困っておりました
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411353/07761db4-3fef-13ac-2f10-de9bd39be1c2.png)

**※私の個人情報が記載されていますが、既に削除しております！**


#解決方法
早速ですが原因はTeraTermコンソールに表示されている通りです。

```TeraTerm.txt
>>Permissions 0644 for '/home/ec2-user/.ssh/ansibleKey.pem' are too open.
```
キーのアクセス権が足りていないようですね。。。


ですので「ansibleKey.pem」のアクセス権をchmodコマンドで「700」に変更します。

```TeraTerm.txt
$ sudo chmod 700 ~/.ssh/ansibleKey.pem
```

その後、再度ssh接続すると、成功しました！
![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411353/2803ed05-d762-8cdb-54a8-a8f5f2ed739e.png)


#おわりに
今回は、アクセス権について記載しました。
700、777、600など、いろいろあります。。以下の方の記事がよくまとまっておりますのでリンク張ります
(https://qiita.com/ntkgcj/items/6450e25c5564ccaa1b95)
ATOM Matrixを使って天気予報をしてみる

# 作ったもの
**今日、傘が必要かどうかが一目で分かるデバイス**
午後から天気が崩れるなど傘を持って行ったほうが良い日は、これが光って教えてくれます。
ディスプレイの表示は、傘のアイコンをイメージしてます。
![IMG_8776.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21408/88cc16e5-cffa-ca3c-0d64-b17c2c2fc189.jpeg)
![IMG_8775.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21408/ec0dba34-07ee-043c-d50a-bbde792dd712.jpeg)

# 作った背景
**「弁当忘れても傘忘れるな」**
北陸では当たり前のように子どもの頃から聞かされる、出掛ける時に傘を絶対に忘れちゃ駄目だよという教訓のような言葉です。一応、WEB検索してみると、金沢とか石川とか出てくるので、だいたい一般常識みたいです(笑) あとは、山陰地方でも言われるみたいなので、天気があまり良くない地域では言われるのかなと思います。
確かに、北陸は雨が多いのでは有名だと思いますが、あとは天気自体も変わりやすいのでしょうか。確かに、子どもの頃は雨に降られながらダッシュで家に帰ったりした覚えがあります(笑)

# 繰り返される朝の惨劇
そもそも雨が多かったり、午後から天候が崩れて雨になったりということが頻繁なので、以下のような会話が良く発生します。

　**子：「お母さん、今日って、傘持って行ったほうがいいの？」**
　**母：「あぁ、ちょっと待ってね。いま調べるから。」**
　　　～5秒後～
　**子：「ねぇ、まだ？もう行かないといけないんだけど！！！」**
　**母：「ちょっと待って！そんなに早く調べられる訳ないでしょ！！！」**
　**母：「そもそももっと早く起きればいいでしょ(怒) だいたい、あんたが○%×$☆♭#▲！」**

ここまで揉めるケースは少ないにせよ、傘のやり取りは年間を通じてかなり発生していると思います。
特に朝は慌ただしい場合が多く、互いにイライラすることも多いので、こういった悲しい事件が発生します。なので、なんとかならないものかと思って、解決するためのデバイスを自作してみました。

# 構成
* [ATOM Matrix](https://www.switch-science.com/catalog/6260/)
* [OpenWeatherMap API](https://openweathermap.org/)

# 使い方
* 玄関に設置しておく
* OpenWeatherMapから地域の天気予報を自動で取得してくる
* 6～9時間後のデータを使って、傘が必要かどうかを判断する
* なので、朝に玄関で確認すると、だいたい子どもが帰宅する15:00頃のデータが確認できる
* 雨が降りそうな場合は、デバイスが光って教えてくれる

# 今後
現状はとりあえずささっと作ってみただけなので、これから使い勝手を含めて試していこうと思ってます。あとは、WiFi設定や地域の設定がソースコードに直接書く感じなので、ブラウザやBluetooth経由で設定できるようにしようか検討中です。
【Python/Tkinter】commandに引数を渡す方法

##今回紹介すること
TkinterでButtonウィジェット等のオプション：commnadに引数を渡す方法を紹介します。

## サンプルコード（成功例）
```python
import tkinter as tk
import tkinter.ttk as ttk

class Application(ttk.Frame):
    def __init__(self, master=None):
        super().__init__(master)
        self.master = master
        self.pack()
        self.master.title("Title")
        self.master.geometry("400x300")
        self.create_widgets()
    
    def create_widgets(self):
        for i in range(1, 11):
            ttk.Button(self, text=f"ボタン{i}", command=self.show_message(i)).pack()
    
    def show_message(self, index):
        def inner():
            print(f"ボタン{index}がクリックされました")
        return inner

def main():
    root = tk.Tk()
    app = Application(master=root)
    app.mainloop()

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


## やりがちな失敗例と解決法

### なぜ失敗するのか
普通に書こうとすると，以下のように書いてしまいがちです：

```python

import tkinter as tk
import tkinter.ttk as ttk

class Application(ttk.Frame):
    def __init__(self, master=None):
        super().__init__(master)
        self.master = master
        self.pack()
        self.master.title("Title")
        self.master.geometry("400x300")
        self.create_widgets()
    
    def create_widgets(self):
        for i in range(1, 11):
            ttk.Button(self, text=f"ボタン{i}", command=self.show_message(i)).pack()
    
    def show_message(self, index):
        print(f"ボタン{index}がクリックされました")

def main():
    root = tk.Tk()
    app = Application(master=root)
    app.mainloop()

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

残念ながら，これでは期待どおりの動作はしません。

動かしてみればわかりますが，ボタン生成時に`self.show_message(i)`が実行され，`ボタン{index}がクリックされました`がすべてプリントされてしまいます。そして，肝心のボタンクリック時には，なんの動作もなされません。これは，commandオプションの挙動が下記のようになっていることに関係しています。

- **ウィジェット生成時**：`self.show_message(i)`が実行される
- **ボタンクリック時**：`self.show_message(i)()`が実行される

### 解決法
上記のような面倒くさい仕様のため，callback関数を定義する際にも一工夫が必要となります。必要な部分のコード（今回の場合は`print(f"ボタン{index}がクリックされました")`）を`self.show_message(i)`で必要な部分のコードを実行させず，`self.show_message(i)()`で実行させる必要があるのです。

そのために，**Inner Function（内部関数）**を使用します。下記のようになっていると考えるとわかりやすいです。

```py

def show_message(index):
    def inner():
        print(f"ボタン{index}がクリックされました")
    return inner

command = show_message(1)
command()
```

show_message関数にはinner関数（内部関数）が定義されており，それをリターンしています。つまり，下から２行目の`command`にはinner関数が入っています。ただし，inner関数の中身は実行されていませんので，printはされません。そして最後の行で，inner関数を実行しています。

つまり，`show_message(1)`では見た目上何も起こらないが，`show_message(1)()`とすることで目的の部分を実行できるようになるということです。

##参考

- python tkinter どのボタンが押されたか判定する方法 - memopy http://memopy.hatenadiary.jp/entry/2017/06/11/220452
- Tkinter の command option で引数を渡すときには関数でネストを定義すると思ったとおりに動く https://qiita.com/yukid/items/a0140b5c1a3e28f636f0
JSF2.3プロジェクトの簡単な作り方

# JSF2.3プロジェクトの簡単な作り方
Eclipe IDEで、JSF2.3使ったMavenプロジェクトを簡単に作成することができます。

ここの記事にある通りにやればよいです。
https://rieckpil.de/howto-bootstrap-a-jsf-2-3-maven-project-in-seconds/

実際にやってみます。

#### 作り方

1. 新規Mavenプロジェクトを作成する![pic001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292074/057557d3-e790-61ff-db34-cde6daa33b96.png)

2. アーキタイプの選択のウィザードのフィルターの欄に"de.rieckpil.archetypes"を指定する。![pic002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292074/def29efd-4e08-c691-1778-e581bb46b84f.png)
3. アーティファクトIDとして、"javaee8-jsf"を選択し、次へをクリックする。![pic003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292074/163b2e17-7f19-d6a0-ea40-675db8ebd478.png)
4. Mavenプロジェクトのために、グループIDとアーティファクトIDを指定します。学習のためのプロジェクトのため、今回は適当に入力しました。![pic004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292074/28b6fd45-319f-013d-812d-06799494376d.png)
5. 完了ボタンを押すとプロジェクトが作成されます。

#### 動かしてみる

今回は、JavaEE8サーバーであるWildFly19で動作確認をしてみました。
![pic005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292074/2ef1d21c-aae0-203a-1f62-6766498ed7d8.png)

サーバー起動も成功して、Hello World することができました。ものすごく簡単です。

Thanks, Philip Riecks ...。
Atomic Design再考察（ButtonコンポーネントはAtom or Molecule?）

# はじめに
N番煎じですが、Atomic Designで開発していてAtomsの扱いに困ったので、再考察していこうと思います。

# Atomsで困った点
Buttonコンポーネントは他のコンポーネントが子要素として入ってくるけど、Atomsに入れて良いのか？という点で困りました。

この問題に関して、「[Atomic Designってデザイナーには難しくない！？という話](https://qiita.com/rhirayamaaan/items/7f990e146ec01f2e7e08)」の中で考察されているので、これで良いんじゃないか？と思う人もいるかもしれませんが、実際に実装していくと上手くいかない部分が出てくるので、再考察していきます。

先ほどの記事で取り扱われているButtonコンポーネントの実装はこのようになっています。

```react:button.tsx
import React from 'react';

const Button = ({ onClick, children }) => (
  <button onClick={event => onClick(event)}>{children｝</button>
);

export default Button;
```

これって、childrenに空のdivのようなコンポーネントが入ってきたときに、機能として完結していると言えるでしょうか？また、このButtonコンポーネントを使用して実装した単なる矩形のボタンを、Moleculeとするのは違和感があるのではないでしょうか？

このコア機能をもったButtonクラスはロジック部分を担当するので、UIコンポーネントのAtomsに入れるのは違和感がありました。

そこで調べたところ、書籍「Atomic Design」の著者 Brad Frost 氏の考えについての翻訳記事「[アトミックデザインの拡張 - Extending Atomic Design](https://www.graat.co.jp/blogs/cjznvlxp601gx0830aszb7o3m)」がありましたので、この中で述べられているdesign tokenについて紹介しようと思います。

# Extending Atomic Design

![atomic-design-tokens.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327865/bddfd81a-05fb-955f-ede9-6a4a8821e5f0.png)


design tokensは次のように説明してあります。
> 例えば「color-brand-blue（青が混ざった色）」というデザイントークンは、UIの重要な要素ではありますが、それだけでは機能しません。 これを機能させるには、ボタンの背景色といったものを定義している「Atom」に適用する必要があります。

Atomに適応しないと機能しないが、再利用性の高いものであることがわかります。Colorに関してはAtomsに入れるような（UIデザイン的な面から考えて）記事も見たことありますが、Atomsより小さいIonsのような階層で管理するかCSSのフレームワークで管理する方が直感的な気がします。ちなみにIonsはdesign tokens層のコンポーネントでIons、Quarksなどのように名前がつけられるようです。

今回は色のことは置いておいて、先ほどのロジックのみを持ちデザイン拡張性を保持したいコンポーネントクラスに関してはAtomsに入れず、Ionsに入れることで、本来Atomsに入れたい「矩形の見た目を持ったボタンのコンポーネント」をAtomsに入れることができるのではないでしょうか。

# まとめ
**問題点**
ロジックのみを持ちデザイン拡張性を保持したいコンポーネントクラスをAtomsに入れると、本来のAtomsがMoleculesに入ることになってしまい、チーム内で混乱を産む。

**解決方法**
Ions階層を取り入れ、ロジック担当のクラスはIonsに入れる。

Atomic Designは複数人で使う場合、どの層に入れるかが個人によって異なることが多いので、その問題を解決するためにAlt Atomic Designのようなものをいろんな人が考案しています。オレオレになりすぎるのは良くないですが、プロジェクトに合わせて拡張などをして使用することが、Atomic Designとの上手い付き合い方なのではないかと考えます。
Windows Server Coreを構築する上での最低限のコマンド

#概要
Windows Server Coreを設定する上で、最低限のコマンドについてメモを記載。

#環境

・ハイパーバイザ：Hyper-V(Windows 10 1903)
・OS           ：Window Server 2016

#コマンド

~~~
netsh advfirewall set allprofiles state off
Uninstall-WindowsFeature -Name Windows-Defender
Rename-Computer -NewName "<ホスト名>" -Force -Restart
setup64.exe /s /v /qn
※VMware Toolsを入れる場合
Get-NetAdapter | Remove-NetIPAddress -confirm:$false
Get-NetAdapter | New-NetIPAddress -AddressFamily IPv4 -IPAddress <IPアドレス> -PrefixLength <Prefix> -DefaultGateway <ゲートウェイ>
Get-NetAdapter | Set-DnsClientServerAddress -ResetServerAddresses -confirm:$false
Get-NetAdapter | Set-DnsClientServerAddress -ServerAddresses <DNSサーバのIPアドレス>
Add-Computer -DomainName <ドメイン名> -Credential administrator
※ポップアップでユーザ、パスワードを入力する。
Reactのモデルのメモ

###モデルでの配列の渡し方
eg)familyの中にchildが複数人存在する時

```models/family.js
this.children = (children || []).map(data => Child.newChild(data))
```

渡したいものが一つではないとき、配列で受け取ったパラメータにmap処理でArray<Child>(Childモデルのインスタンスの配列という意味)が渡るようにする。

###継承
accountモデルを継承したchildモデル

```
export default class Account {
  constructor({
    id,
    nickname,
    email,
  }) {
    this.id = id
    this.nickname = nickname
    this.email = email
  }

  static newFromApiResponse = data => {
    return new Account(transformSnakeToCamel(data))
  }
}

// ここからchildモデル
export class Child extends Account {
  constructor(params) {
    super(params)
    this.type = "child"
  }

  static newFromApiResponse = data => {
    return new Child(transformSnakeToCamel(data))
  }
}
```
paramsを引数としてsuperでaccountモデルにあるデータを継承する
#Ruby で to_hash メソッドのある Class のインスタンスを、キーワード引数を可変で受け取るメソッドに渡すと、ハッシュに変換されてしまう

```rb
# Ruby 2.7

# to_hash method not implemented class
class ToHashNotImplementedUser
  def initialize(name:, age:)
    @name = name
    @age = age
  end
end

# to_hash method implemented class
class ToHashImplementedUser
  def initialize(name:, age:)
    @name = name
    @age = age
  end

  def to_hash
    {
      name: @name,
      age: @age
    }
  end
end

def show_args(*args, **keyword_args)
  puts "args: #{args}"
  puts "keyword_args: #{keyword_args}"
end


# ---------------------------
# ToHashNotImplementedUser Case
# ---------------------------

to_hash_not_implemented_bob = ToHashNotImplementedUser.new(name: "Bob", age: 30)

show_args(to_hash_not_implemented_bob)
# Receives as *args
#
#   args: [#<ToHashNotImplementedUser:0x00007fe7f708b038 @name="Bob", @age=30>]
#   keyword_args: {}


# ---------------------------
# ToHashImplementedUser Case
# ---------------------------

to_hash_implemented_alice = ToHashImplementedUser.new(name: "Alice", age: 20)

show_args(to_hash_implemented_alice)
# Receives as *keyword_args
#
# warning: Using the last argument as keyword parameters is deprecated; maybe ** should be added to the call
#
# args: []
# keyword_args: {:name=>"Alice", :age=>20}

show_args(**to_hash_implemented_alice)
# Receives as *keyword_args
#
# No Warning
#
#   keyword_args: {:name=>"Alice", :age=>20}
#   args: []

show_args(to_hash_implemented_alice, **{})
# Receives as *args
#
# Explicity pass empty keyword args
#
#   args: [#<ToHashImplementedUser:0x00007fcf8d823db8 @name="Alice", @age=20>]
#   keyword_args: {}

```

# 問題

- to_hash メソッドがある class のインスタンスを、可変長のキーワード引数 ( **keyword_args )を受け取るメソッドに渡すと、インスタンスではなくてハッシュになってしまう
- Ruby2.7 までのハッシュからキーワード引数への自動変換の副作用的なものだと思う

https://www.ruby-lang.org/en/news/2019/12/12/separation-of-positional-and-keyword-arguments-in-ruby-3-0/

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3112











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
ssh接続先のクライアントとしてブラウザを開くためのXQuartz

# XQuartzを使って接続先のサーバー上で開いたブラウザを自分のラップトップで表示する
Motivation
- ssh経由でConfigするとき、アプリケーションをインストールするとき、セキュリティの関係上Port22しか開けてないケースがあると思います。しかしアプリケーションのインストールの正常性確認でどうしてもブラウザ経由でアクセスしたいときに有効な方法になります。
- Mac OSで実施


## XQuartzとは
>The XQuartz project is an open-source effort to develop a version of the X.Org X Window System that runs on OS X. Together with supporting libraries and applications, it forms the X11.app that Apple shipped with OS X versions 10.5 through 10.7.
https://www.xquartz.org/
上記ページ参照

## インストールする
1. `.dmg` ファイルのダウンロード

最新版のファイルをダウンロード　[ここから:XQuartz-2.7.11.dmg](https://dl.bintray.com/xquartz/downloads/XQuartz-2.7.11.dmg)
<img width="1425" alt="Screen Shot 2020-05-02 at 10.42.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/627617/97d6ead3-0ee9-f31b-e441-69f627833e4d.png">

2. インストールの実行
ダウンロードしたファイルを開いて、下記`.pkg`ファイルを開封してインストールの実行
<img width="767" alt="Screen Shot 2020-05-02 at 10.44.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/627617/144fcccc-a0bf-5914-e5cb-b5a593a1fee5.png">

下記画面が出れば完了
<img width="617" alt="Screen Shot 2020-05-02 at 10.49.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/627617/ab36d216-b053-b1a0-ae60-05cc9e1ed0e6.png">

## どう使うの?
普段sshアクセスするコマンドに`-X`をつけるだけ
NWが細いとかなり動きが遅くなるのが難点。。。

```bash

$ ssh [hostname/IP address] -X

#アクセス先のサーバーでFirefoxなり起動するとブラウザが操作できます
$ firefox

```
【ffmpeg】ImportError: libffi.so.6: cannot open.....【Ubuntu 20.04 LTS】

嬉々としてUbuntu 20.04 LTSに上げたところ、`ffmpeg`関連の初耳エラーが出てきました。華麗に解決したので忘れないうちにメモ

# 原因

`libffi.so.6`が無いよ

# 解決方法

`/usr/lib/x86_64-linux-gnu/`に`libffi.so.6`を配置しよう。もしくは同階層にあるかもしれない`libffi.so.x`を**alias**してやり過ごそう

```bash:/usr/lib/x86_64-linux-gnu/
sudo ln -s libffi.so.7 libffi.so.6
```
git remote add originをスペルミスした時の対処リモートリポジトリに情報を反映できない

#Git学習時のエラー解決方法（備忘録）
####・作業内容
ローカルリポジトリにリモートリポジトリの情報を付与して、紐づけを行う

```
git remote add orijin コピーしたURL
```
orijinが紐づけられていることを確認

```
git remote
orijin
```

リモートリポジトリ（origin）に情報を反映すると・・・

```
git push origin master
```
なんかエラーでてる・・・

```
fatal: 'origin' does not appear to be a git repository
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```
>このエラーを翻訳すると
>fatal: 'origin'はgitリポジトリではないようです
fatal: リモートリポジトリから読み取れませんでした。
正しいアクセス権があり、リポジトリが存在することを確認してください。

あれ？リポジトリ登録したよなと思い登録内容を確認

```
git remote -v
orijin	https://github.com/〇〇.git (fetch)
orijin	https://github.com/〇〇.git (push)
```
_origin_ではなく_orijin_になっていました。（スペルミス）

・修正作業内容
登録されているリポジトリから_orijin_を取り消し

```
git remote rm orijin
```
何も登録されていないことを確認して再度_origin_をリポジトリに登録することで解決しました。

```
git remote -v
git remote add orijin コピーしたURL
```

参考にさせていただいた記事
【git remote add を取り消す方法】
https://qiita.com/ngtkk/items/05097d127db6a415a7d8
ReactのMaterial-uiのMaterial-Tableを編集可能な状態にしたメモ


## 概要
material-uiのテーブルで、更新操作をするのに[material-ui table](https://material-table.com)がおススメされていたので使用してみる。
typescriptで書く時に、型をつけてあげないとエラーを吐いたのでメモ。
[作成したソース](https://github.com/hibohiboo/create-now/tree/d8b0438af17576d0b84984fb8a9ab2ab8b418008/)

## ソース

```tsx
import { forwardRef } from 'react'
import { AddBox, Edit, DeleteOutline, Check, Clear } from '@material-ui/icons'
import MaterialTable from 'material-table'
import { deleteMessage } from '~/config/messages'

// SVGElementの型を明示しないとエラー
const tableIcons = {
  Add: forwardRef<SVGSVGElement>((props, ref) => (
    <AddBox {...props} ref={ref} />
  )),
  Delete: forwardRef<SVGSVGElement>((props, ref) => (
    <DeleteOutline {...props} ref={ref} />
  )),
  Edit: forwardRef<SVGSVGElement>((props, ref) => (
    <Edit {...props} ref={ref} />
  )),
  Check: forwardRef<SVGSVGElement>((props, ref) => (
    <Check {...props} ref={ref} />
  )),
  Clear: forwardRef<SVGSVGElement>((props, ref) => (
    <Clear {...props} ref={ref} />
  )),
}

const waitTime = 600

interface Prop {
  title: string
  columns: any[]
  data: any[]
  rowAddHandler: (newData: any) => void
  rowUpdateHandler: (newData: any, oldData: any) => void
  rowDeleteHandler: (oldData: any) => void
}
const editableTable = ({
  title,
  columns,
  data,
  rowAddHandler,
  rowUpdateHandler,
  rowDeleteHandler,
}: Prop) => (
  <MaterialTable
    title={title}
    icons={tableIcons}
    options={{
      search: false,
      sorting: false,
      paging: false,
      rowStyle: {
        whiteSpace: 'nowrap',
      },
      headerStyle: {
        whiteSpace: 'nowrap',
      },
    }}
    localization={{
      header: {
        actions: '',
      },
      body: { editRow: { deleteText: deleteMessage } },
    }}
    columns={columns}
    data={data}
    editable={{
      onRowAdd: (newData) =>
        new Promise((resolve) => {
          setTimeout(() => {
            resolve()
            rowAddHandler(newData)
          }, waitTime)
        }),
      onRowUpdate: (newData, oldData) =>
        new Promise((resolve) => {
          setTimeout(() => {
            resolve()
            if (oldData) {
              rowUpdateHandler(newData, oldData)
            }
          }, waitTime)
        }),
      onRowDelete: (oldData) =>
        new Promise((resolve) => {
          setTimeout(() => {
            resolve()
            rowDeleteHandler(oldData)
          }, waitTime)
        }),
    }}
  />
)
export default editableTable
```



## 参考
[material-ui table](https://material-table.com/#/docs/features/filtering)
[material-tableでページネーションをサーバーサイドで行いたいwithReduxのひと](https://qiita.com/fufufukakaka/items/0c6c66e612fcaf8e4149)
#Ruby to_hash implemented class / method receive as **keyword_args / Class instance automatic converted as hash 

```rb
# Ruby 2.7

# to_hash method not implemented class
class ToHashNotImplementedUser
  def initialize(name:, age:)
    @name = name
    @age = age
  end
end

# to_hash method implemented class
class ToHashImplementedUser
  def initialize(name:, age:)
    @name = name
    @age = age
  end

  def to_hash
    {
      name: @name,
      age: @age
    }
  end
end

def show_args(*args, **keyword_args)
  puts "args: #{args}"
  puts "keyword_args: #{keyword_args}"
end


# ---------------------------
# ToHashNotImplementedUser Case
# ---------------------------

to_hash_not_implemented_bob = ToHashNotImplementedUser.new(name: "Bob", age: 30)

show_args(to_hash_not_implemented_bob)
# Receives as *args
#
#   args: [#<ToHashNotImplementedUser:0x00007fe7f708b038 @name="Bob", @age=30>]
#   keyword_args: {}


# ---------------------------
# ToHashImplementedUser Case
# ---------------------------

to_hash_implemented_alice = ToHashImplementedUser.new(name: "Alice", age: 20)

show_args(to_hash_implemented_alice)
# Receives as *keyword_args
#
# warning: Using the last argument as keyword parameters is deprecated; maybe ** should be added to the call
#
# args: []
# keyword_args: {:name=>"Alice", :age=>20}

show_args(**to_hash_implemented_alice)
# Receives as *keyword_args
#
# No Warning
#
#   keyword_args: {:name=>"Alice", :age=>20}
#   args: []

show_args(to_hash_implemented_alice, **{})
# Receives as *args
#
# Explicity pass empty keyword args
#
#   args: [#<ToHashImplementedUser:0x00007fcf8d823db8 @name="Alice", @age=20>]
#   keyword_args: {}
```

# 問題

- to_hash メソッドがある class のインスタンスを、可変長のキーワード引数 ( **keyword_args )を受け取るメソッドに渡すと、インスタンスではなくてハッシュになってしまう
- Ruby2.7 までのハッシュからキーワード引数への自動変換の副作用的なものだと思う


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3111











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
ミニマムなVue.jsコンポーネントプログラミングその５(動的なデータ取得：サーバ準備)

その１：ミニマムなシングルコンポーネントVue
その２：ミニマムなルータ
その３：ミニマムなサブコンポーネント
その４；ミニマムなデータ取得(静的)

ときたので、今回は動的なデータ取得ですが、まずはデータを取得できるサーバを準備します。

WebAPIサーバを外部に立てて、WebAPIコールで画面に表示するデータを更新します。
画面サーバを立てるわけではないので、CakePHPとか、ララベルとかそういった
リッチサーバフレームワークは不要なので、軽量かつ直感的にコード実装できる
Flaskを使いたいと思います。(RestFullなWebAPIを実装するためのライブラリも充実してるようだし)


Flaskが動作して外部公開できるサーバなら何でもよく、無料レンタルサーバとか、選択肢は
いろいろあるのでしょうが、ここは流行りのAWS上にサーバ立てしようと思います。
AWSへのアカウント登録の説明ははしょりますが、ベーシック（無料枠）で登録しました。

#NC2インスタンスの生成/起動
なにはなくとも、まずこれです。
いろんなAWSサービスも、立てたEC2インスタンスの上で動作しています。
サーバサービスを実装/実行する仮想マシンインスタンスって感じでしょうか。

EC2ダッシュボードでEC2のインスタンスを生成します。
AMI(Amazon マシンイメージ)は「Ubuntu Server 18.04 LTS」を選択しました。

セキュリティグループは以下のように設定しておきます。

- SSH:TCP:22:マイIP
- カスタム TCP:TCP:5000:マイIP

ここが大事なところで、個人開発目的なので、自分しかアクセスできない
ようにしておきます。ポート5000は後で説明するFlaskが公開するポート番号です。
このように設定しておくことで、以下の制約がかけられます。

- sshによるログインは自分PCからのみ。
- NC2内で立てたWebサーバ等に対するアクセスは自分PCからのみ。

セキュリティグループには後から設定追加できるので、随時アクセス可能な
範囲を広げていくこともできます。

【注意】
wimax等の無線サービスを使っている場合、自分PCのIPアドレスは毎回変動します。
その場合、NC2のセキュリティグループを再編集してください。
SSH、カスタムTCPともに、マイIPを選択し直すと、その時点でのIPアドレスを
自動取得してくれます。EC2のインスタンスは再起動する必要はなく、即反映されます。

このことを知らずにssh接続にいくと、Connection timedoutと
怒られて困惑することになります。


生成したインスタンスを起動すると、インスタンスの状態が

- running
- 2/2のチェックに成功しました

になるので、sshで接続します。

接続ボタンを押すと、sshを使うならこんなコマンドだよ、と画面に
ポップアップ表示されるのでコピペして打ち込みます。

```
ssh -i キーペアファイル ubuntu@パブリックDNS名
```

パブリックDNS名はインスタンス画面に表示されています。
キーペアはインスタンス生成のどっかで自動生成促されるので、それです。
自分PCのどっかに物理ファイル保存されているはずです。

インスタンスを停止しておけば課金されないので、使わないときは
インスタンスを停止するのがよいでしょう。（小心者）
たぶん、一年間の無料枠においては、上げっぱなしでも課金されない・・
と思いますが、いつ改定されるかもしれずだし。
うっかり２つインスタンスを起動すると２倍の速度で無料枠を使い切るので
注意しましょう。

インスタンスを停止すると作ったファイルは削除されるのでは？　
と一瞬心配しましたが、Readme.txtとか作って、停止→起動→接続すると
無事残ってました。世の中に流れている、S3にログ保存、ってなんなんだろう。

ちなみに選択したAMIの説明文は以下です。
Ubuntu Server 18.04 LTS (HVM),**EBS** General Purpose (SSD) Volume Type. Support available from Canonical (http://www.ubuntu.com/cloud/services).

EBSとは、「EC2 ブロックストレージボリューム」のことで、
https://aws.amazon.com/jp/ebs/pricing/
を確認すると、
「AWS 無料利用枠には、Amazon Elastic Block Store (EBS) のストレージ 30 GB、I/O 200 万回、スナップショットストレージ 1 GB が含まれています。」
とあるので、ちゃんと保存されるんでしょう。
ストレージ容量は全然構わないんですが、しかし気になるのはI/O 200万回です。
AWSのトップページ=>サービス=>Billingで「無料じゃなくなるかもよ」という
警告が出るのを日々、確認するとよいでしょう。

#NC2インスタンス環境整備
接続したコンソールで確認してみます。
python3  => 入ってる。
pip => 入ってない。

足りないもの入れていきます。

```
sudo apt-get update　<== 大事
sudo apt-get install python-pip
sudo apt-get install python3-pip
pip3 install beautifulsoup
pip3 install flask
```

#Flaskサーバ起動
コード作成(main.py)

```python

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello,Flask on AWS!'

if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)
```

flaskはデフォルトでは外部公開されていないので、host='0.0.0.0'で公開します。
といっても、EC2のセキュリティグループ設定でマイIPしか接続できませんが。
以下のようにFlask起動します。

```
python3 main.py
```

#AWSで立てたマイWebサーバへアクセス

http://パブリックDNS:5000と打つ。
パブリックDNSは、sshでログインしたときに使ったやつです。

![範囲を選択_016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244766/ed67f673-257b-2015-f49a-8d5c5fe5613b.png)

おぉ、出た・・感動。
AWSってなんか敷居が高そうな気がしてたけど、

NC2インスタンス生成/起動
インスタンス内でFlask起動
外部PCからアクセス

たったこれだけです！！（本質的には）

次回はWebAPI実装していきたいと思います。
[Unity初級]Terrainにテクスチャをペイントする

#概要
Terrainにテクスチャをペイントする
#本文

![スクリーンショット_(170).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/f94482f0-9626-ee3c-5b94-ea54182f1ba5.png)
Terrainを選ぶと、これから起伏を作っていく大地が生成される

![スクリーンショット_(167).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/b256c7c9-7e1f-bc4e-2638-a7ed676b43f3.png)
・ Hierarchyの中のTerrainを選択しておく
・ Inspectorの中から画像のように筆のマークをクリック。次にRise or Lower Terrainを選ぶ
・ 画面上のTerrainをなぞると山の起伏を書くことができる。


![スクリーンショット_(168).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/b6afdbd0-779d-42b1-c09a-310f53ba320c.png)
・ Hierarchyの中のTerrainを選択しておく
・ 画像のように筆マークをクリック。次にPaint Textureを選ぶ
・ Edit Terrain Layersをクリックし、Create Layerを選ぶ。
・ 貼り付けたいテクスチャーを選択する