OmniAICreator/Qiita-1.07M huggingface dataset:
【MQL4】VSCodeでmq4をコンパイルする

# 概要
MetaEditorも優秀ですがやっぱり使い慣れたVSCodeの方が楽です。
けどコンパイルでMetaEditorも開いてるとモニタがごちゃつく。
てことでVSCodeに全部やってもらうことにしました。

# 拡張機能に頼る
## compilemql4のインストール
画像はインストール後のもの。

![screenshot_20210405_023440.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513331/d5450ae3-fb1d-0b92-4019-6993c7e2f4dc.png)

## compilemql4の設定
一番下の`Compilemql4: Metaeditor Dir`にmetaeditorが保存されているディレクトリのフルパスを入力する。
windowsで標準インストールをしていなければ場合は画像のように`C:\Program Files (x86)\xxx\metaeditor.exe`というパスにインストールされています。
xxxはFXで会社名です。

![screenshot_20210405_023742.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513331/1bb23c86-e610-c693-3c1a-af560ede6c34.png)

# 結果
拡張機能を用いてVSCodeでコンパイルするのは以上です。
コンパイルまではたどり着きましたがインジケータの更新は手動のままです。
Metaeditorのように`コンパイル→更新`の一連まではできませんでしたが作業ウインドウが一つ減ったので結果OKです。
というより拡張機能の製作者様に感謝です。

ビルドタスクを用いた方法もありますが、拡張機能の方が`Ctr+S`でコンパイルできて便利だったので参考リンクに保存する程度にしました。


# 参考
・拡張機能編
[Visual Studio Code をMQL4のエディタとして使う](https://fx-ai-trading.com/fx/mql/vs-code.html)

・ビルドタスク編
[コーヒー飲みながら仕事したい](https://coffee-nominagara.com/2019-05-26-161125)
[](https://qiita.com/nishiharaiwao/items/037304b6bade4224bb42)
IaaS, PaaS, SaaSの違い

#はじめに
いきなりですが、
「クラウドのIaaSとは何か説明して下さい。」
って言われて、答えられなかったので調べてみました。
忘備録のつもりですが、基本的なことなので覚えておかなければ💦

#目次
1.クラウドサービスの分類
2.SaaSとは
3.PaaSとは
4.IaaS/HaaSとは
5.ほかにも

#1.クラウドサービスの分類
クラウドサービスとは、
__ソフトウェアなどをネットワークを通じて、サービスとして提供する__
方式のことです。
ちなみにオンプレとはクラウドでサーバを立てサービスを構築するること。オンプレミスは自社でサーバを立てて、サービスを構築することを言います。

クラウドサービスは大まかに3つにわけることができます。IaaS,PaaS,IaaS(別名HaaS)の3つです。

#2.SaaSとは
SaaS(Software as a Service)とはソフトウェアをサービスとして、クライアントに提供します。必要な機能だけを使えるようにしたソフトウェアです。

#3.PaaSとは
PaaS(Platform as a Service)とはハードウェアとOSは提供するから、自由にアプリケーション作成できるサービスです。つまりプラットフォームをサービスとして提供してくれます。

#4.IaaSとは
IaaS(Infrastructure as a Service)とは簡単に説明するとインフラを提供してくれるサービスです。

#5.ほかにも
__DaaS__(Desktop as a service)や__FaaS__(Function as a service)といった言葉も存在します。

DaaSはデスクトップの仮想化をクラウドサービスとして提供するサービスです。
FaaSはサーバレスでアプリケーション開発をするためにクラウドサービスとして提供するサービスです。
JavaScript 基礎知識

###console.log()
出力する

###テンプレートリテラル

```js
console.log(`${変数}です。`)
```
バッククォートで囲まなければならない。

###オブジェクト
プロパティと呼ばれる名前で管理

```js
let(constでもいい) 変数名　= {プロパティ名1: データ, プロパティ名2: データ,.....プロパティ名x: データ};
```
###swich文
調べる対象がどの場合にどういう処理をする

###.length
長さを表すメソッド

###for文
1行は省略型

```js
for (let i = 0; i < animals.length ; i++) {
  console.log(animals[i]);
}
```
###while文
条件が続く限り、繰り返す。

###比較演算子
また　&&　かつ　||　否定　！a

理解できるように頑張りたい。
【rails】コントローラー名やモデル名をアプリ名と同じにして痛い目見たって話

こんばんは。

プログラミング初学者です。
現在、Ruby on Rails + Docker + MySQLでアプリの開発をしています。
そこであるエラーにハマり、数日奮闘した結果ようやく解消できたのでそのことをまとめました。

## 発生したエラー

バイクのレビュー投稿アプリ（名前はBIKKE）を作成しており、そのレビューの投稿画面実装のためコントローラーを下記のように記載

```bikkes_controller.rb
class BikkesController < ApplicationController
  def index
    @user = User.new
  end

  def new
    @bikke = Bikke.new
  end
end
```

そして新規投稿画面に遷移すると、

### NoMethodError!!!!!!しかもnewメソッドが！！？？

[![Image from Gyazo](https://i.gyazo.com/3da7c97f23862298dd0f4d304f215e07.png)](https://gyazo.com/3da7c97f23862298dd0f4d304f215e07)

#### なぜ！？モデルやマイグレーションファイルの記載に間違いはなし。

まさかnewメソッドがエラーとして返されるとは、その時想像もしておりませんでした。

## 解消

エラー画面を見てみると、下記文面が記載されています。

#### undefined method 'new' for Bikke:Module

この**Module**がミソですね。

つまり、このBikkeというオブジェクトがクラスではなくメソッドとして認識されている、ということを表しています。
どこかに**module Bikke**や**class Bikke::Something**と定義されていないか確認を行いました。
※この解はTeratailにて先人エンジニアさんに教えていただきました。本当に感謝です。

**module Bikke**で検索をかけると、ありました。

```config/application.rb
module Bikke
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 6.1

    # Configuration for the application, engines, and railties goes here.
    #
    # These settings can be overridden in specific environments using the files
    # in config/environments, which are processed later.
    #
    # config.time_zone = "Central Time (US & Canada)"
    # config.eager_load_paths << Rails.root.join("extras")

    # Don't generate system test files.
    config.generators.system_tests = nil
  end
end
```

#### つまり、railsは`rails new`を行った時に、このapplication.rbでアプリ名をモジュールとして定義する仕様のようですね。

#### そうです。私はアプリ名とコントローラー・モデル名を同じ名前にしてしまったのです。

#### コントローラーやモデル名の再構築、その他ファイルの修正を行い、再度新規投稿画面に移行すると無事遷移することができました。

## 学び
本件では、Module Bikkeと認識されていたため、newメソッドを使えるclass Bikkeが見えなくなっていたことがエラーの原因であることがわかりました。

そもそも**newメソッドとは何か？**
→**ActiveRecordメソッド**の一つ
→**ActiveRecordメソッド**とは**モデルがテーブル操作に関して使用できるメソッド**の総称である。

ここで、上記のコントローラーやモデルを`Review`に変更したとしましょう。
`rails c`でコンソールを開き、下記コマンドを打ちます。

```ruby
[1] pry(main)> Review.superclass
=> ApplicationRecord(abstract)
```

この`Review`は`ApplicationRecord`を継承していることがわかります。
さらに下記コマンドを打ち込みます。

```ruby
[2] pry(main)> ApplicationRecord.superclass
=> ActiveRecord::Base
```

つまり`Review`はしっかり`ActiveRecord::Base`を継承しているから`newメソッド`、そして`allメソッド`や`findメソッド`,`saveメソッド`などが使えるのですね。

ちなみに

```ruby
[3] pry(main)> Bikke.superclass
NoMethodError: undefined method `superclass' for Bikke:Module
```
アプリ名はしっかりモジュールと定義されているため、`superclassメソッド`も使えないのですね。
そして、

```ruby
[4] pry(main)> Module.superclass
=> Object
```
モジュールはオブジェクトを継承している・・・っ！

では、**モジュールとクラスの違い**は何なのでしょうか？

端的にいうと、
#### クラスはインスタンスの生成ができるのに対し、モジュールではできない。そしてクラスは継承していけるが、モジュールでは継承ができない。
厳密にはMix-inによってモジュールの機能をクラスに提供、いわば継承のようなことはできるようですが・・・。

ふんわりとした表現ですが、本件ではモジュールとクラスで継承しているものが独立しているため、使えるメソッドの違いがあり、エラーの発生に繋がったのだと考えます。
この辺はRubyの真髄でもあるのでより深ぼって理解を深めたいところですね。

兎にも角にも一度作ったコントローラーやモデルの再構築は、ER図やREADMEの変更、その他ビューファイルの調整などあらゆる部分の編集に手間がかかって疲れた・・・。
しかし、非常に良い学びとなりました。

ここまでご覧いただきありがとうございました。
ヌメロンAIの作り方

こんにちは。昨日と同じような今日を過ごしているどこにでもいるしょうもない高校生です。自粛期間に暇を持て余してプログラミングを始め、ついでにAIについて少し勉強したのでヌメロンというゲームのAIを作ってみました。もし指摘があればコメントお願いします。

#ヌメロンについて
まずヌメロンというゲームについてですが、正式名称を「Numer0n」といい、ルールはWikipediaには以下のように記述があります。
>####基本ルール
- それぞれのプレイヤーが、0-9までの数字が書かれた10枚のカードのうち3枚を使って、3桁の番号を作成する。カードに重複は無いので「550」「377」といった同じ数字を2つ以上使用した番号は作れない。
- 先攻のプレイヤーは相手の番号を推理してコールする。相手はコールされた番号と自分の番号を見比べ、コールされた番号がどの程度合っているかを発表する。数字と桁が合っていた場合は「EAT」（イート）、数字は合っているが桁は合っていない場合は「BITE」（バイト）となる。
 - 例として相手の番号が「765」・コールされた番号が「746」であった場合は、3桁のうち「7」は桁の位置が合致しているためEAT、「6」は数字自体は合っているが桁の位置が違うためBITE。EATが1つ・BITEが1つなので、「1EAT-1BITE」となる。
- これを先攻・後攻が繰り返して行い、先に相手の番号を完全に当てきった（3桁なら3EATを相手に発表させた）プレイヤーの勝利となる。

>出典: フリー百科事典『ウィキペディア（Wikipedia）』

特に言及することもないので次に進みます。

#AIの作り方
###方針
まずヌメロンでプレイヤーがコールし得る数字の組み合わせは720個あります。つまり、AIは毎ターンこの720通りの選択肢の中から1つの数字の組み合わせを選ぶことになります。

そこで、ここではその720個に対して、それぞれの数字の組み合わせをコールすることでどれだけ相手の数字の候補が減るかを計算し、コールした結果候補数が最も低くなる数字の組み合わせをコールすることとします。

###実装
#####下準備
ヌメロンでコール可能な数字の組み合わせ720個を相手の数字の候補としてリストに保存します。
#####1ターン目
当たり前ですが、1ターン目は全ての数字の組み合わせが同じ期待値を示すのでランダムな数字をコールします。
その結果(EAT,BITEの組み合わせ)から相手の数字の候補を更新します。

#####2ターン目以降
720個の数字の組み合わせに対して、その数字をコールしたときに結果として残る相手の数字の候補数の期待値をみます。

例として、相手の候補数が400のときにある数字の組み合わせAをコールすることを考えます。

| (EAT,BITE) | (0,0) | (0,1) | (0,2) | ・・・ | (3,0) | 合計 |
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
| 候補数 | 120 | 200 | 300 |   | 1 | 720 |
| 重複する候補数X | 20 | 40 | 80 |   | 1 | 400 |
| 確率p | 20/400 | 40/400 | 80/400 |   | 1/400 | 1 |
| X×p | 1 | 4 | 16 |   | 1/400 | 100 |

このとき、(EAT,BITE)の組み合わせ9通りの結果としてそれぞれ返ってき得る候補数を計算します。これは全ての数字の組み合わせに対して決まるので合計720となります。
次に現在の相手の数字の候補と重複する候補数を計算します。
これがコールした場合の結果として残る相手の数字の候補数ですが、Aについての期待値を求めたいので、Aをコールしたときに9通りの(EAT,BITE)がそれぞれ返ってくる確率を求めます。
これは単純にそれぞれの重複する候補数を400で割るだけです。
求めたいのは重複する候補数なので、それらを確率pとかけて、全て加算します。

この場合、100がAをコールしたときに結果として残る相手の数字の候補数の期待値となります。

これを720通り検証し、期待値が最小値をとる数字の組み合わせをコールします。そのとき、最小値をとる数字の組み合わせが複数あり、その中に相手の数字の候補があった場合はそちらを優先してコールします。
その結果(EAT,BITEの組み合わせ)から相手の数字の候補を更新します。

#####nターン目
リストの要素数が1になったときその数字をコールします。
リストの要素数が2になったときランダムに片方をコールします。
また、相手が先行で、AIの数字を当てたときリストの中からランダムにコールします。

#成績
大体4~6ターンで当てることができました。
SwiftUIチュートリアルで Multiple commands produce というエラーが出た時の対処法

SwiftUIのチュートリアルに取り組んでいたところ、エラーが出てきました。とりあえず解決したので対処法をまとめておきます。
初心者ですので、間違っていたらご教授ください🙇‍♂️

## 状況
SwiftUIのチュートリアルをやっていたところ`Multiple commands produce`という文言で始まるエラーに遭遇した。
場所：Building Lists and Navigation Section 2 Step 4

https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation
## 原因
landmarkData.json が2箇所にある。

Section1 Step 11 でフォルダ階層を整える操作がある。
この時にResourcesを移動させずに新しく作成してしまうと、landmarkData.jsonがLandmarks直下のResourcesフォルダとLandmarks/Landmarks/Resourcesの2箇所にlandmarkData.jsonが配置されてしまう。
この後に、Section2の操作を続けていくとプレビュー表示の際にエラーとなる。

## 対処
Landmarks直下のResourcesフォルダの中身をすべてLandmarks/Landmarks/Resourcesにうつし、Landmarks直下のResourcesフォルダを削除する。（チュートリアルではそもそもこういう意味の指示だったようだが、間違えて読んでしまった。）
LandmarkRow.swiftに戻って、Previewでtry againを押すと問題なくPreviewが表示できるようになる。
Raspberry Piをスイッチでシャットダウンする


Raspberry Pi にログインすることなく外部からのボタン入力でシャットダウンさせます。実装はgo言語です
コードは[Github](https://github.com/ktr03rtk/gpio-shutdown)にも公開しています
# 動作環境

- HW: Raspberry Pi 4B
- OS: Ubuntu server 20.04 64bit

# 配線接続

GPIO2とGroundをメカニカルスイッチに接続する([ピンアサイン図](https://www.raspberrypi.org/documentation/usage/gpio/README.md))

# コード

```go:main.go
package main

import (
	"fmt"
	"log"
	"os/exec"
	"time"

	"periph.io/x/conn/v3/gpio"
	"periph.io/x/conn/v3/gpio/gpioreg"
	"periph.io/x/host/v3"
)

func main() {
	if _, err := host.Init(); err != nil {
		log.Fatal(err)
	}

	p := gpioreg.ByName("GPIO2")
	if p == nil {
		log.Fatal("Failed to find GPIO2")
	}

	if err := p.In(gpio.PullDown, gpio.FallingEdge); err != nil {
		log.Fatal(err)
	}

	for {
		counter := 0
		p.WaitForEdge(-1)
	countLoop:
		for {
			switch p.Read() {
			case gpio.Low:
				counter++
				if counter >= 200 {
					fmt.Printf("shutdown start...\n")
					if err := exec.Command("shutdown", "-h", "now").Run(); err != nil {
						log.Fatal(err)
					}
				}
			default:
				break countLoop
			}
			time.Sleep(10 * time.Millisecond)
		}
	}
}

```
プログラムを起動後、２秒以上スイッチを長押しするとシャットダウン処理が始まります


# 自動起動
ラズパイ起動時に自動でプログラムを起動させるため、systemdのサービスとして登録します
`/etc/systemd/system/gpio-shutdown.service`ファイルを作成します

```/etc/systemd/system/gpio-shutdown.service
[Unit]
Description = hardware shutdown daemon

[Service]
ExecStart=/opt/gpio-shutdown
Restart=always
Type=simple

[Install]
WantedBy=multi-user.target
```

`/opt/gpio-shutdown`はコードをビルドして生成されたバイナリファイルです。手動でコピーして配置しておきます

ファイルが用意できたらサービスを起動します

```
sudo systemctl start gpio-shutdown.service
sudo systemctl enable gpio-shutdown.service
```

サービスが正常に起動されたかを確認します

```
sudo systemctl status gpio-shutdown.service
```
Activeの項目がactive(running)であれば準備完了です。ラズパイを起動後、２秒以上スイッチを長押しするとシャットダウン開始します


# 参考
https://qiita.com/K-Ponta/items/12127d7077d69a82693c
LinuC合格用 1週間でLPICの基礎が学べる本 2日目まとめ

![2日目まとめ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1124047/d6c89f3d-cfa7-63eb-9b07-22b760dded1b.png)

# LinuxでGUI
LinuxでGUIを実現する場合、X Window Systemを使用する（ビットマップディスプレイ上でウィンドウシステムを提供する表示プロトコル）  
X Window System上でデスクトップを実現するウィンドウマネージャは色々あるので、同じLinuxカーネルを使用していても、表示がぜんぜん違う。  
まるで別のOSであるかのように見える。

例) GNOME, KDE, XFCE

# オンラインマニュアル（別にネットにつながっているわけではない）
`man`コマンドで参照するマニュアルファイルは、**一般的には**`/usr/share/man`に格納される。
また、`man`コマンドはセクションを指定できる。

## セクション
`man セクション番号 調べたい内容`を実行すると、セクションによって結果が変わる。

|セクション番号|説明|
|--|--|
|1|一般ユーザのコマンド|
|5|設定ファイルの書式|
|8|システム管理コマンド|

例えば、`man passwd`または`man 1 passwd`を実行すれば、「passwdコマンドの説明」が表示され
`man 5 passwd`を実行すれば、「/etc/passwdの書式」が表示される。

### 参考
`whatis`コマンドは、オンラインマニュアルの最初の行を表示する。
`--help`または`-h`オプションで、`man`より単純な説明が表示される。
実家の古いPCにUbuntuぶち込んだ話

##背景
実家に使われなくなったデスクトップPCがあり、親が捨てようか迷っていたので「俺に遊ばせて！」とお願いし、譲ってもらいました。

どうやって遊んでみようかと考えた結果、ちょうどLinux使いたかったので、入っているWindows7を消してUbuntuに入れ替えることにしました。

なんだかんだこういったことするの初めてだったので、記録用に書いておきます。


##概要(というか目次)

+ 環境

+ 参考にしたサイト

+ 必要なもの

+ <strong>Ubuntu</strong>のインストール

+ <strong>Rufus</strong>のインストールと準備

+ 再起動

+ 最後に

##環境

+ Windows7

+ ハードはSonyのVAIO（いつのかわからないけど古い）

+ USBは16GBで売られていたものを購入しました。

##参考にしたサイト

https://diagnose-fix.com/topic2-003/

https://itojisan.xyz/trouble/10709/#2

##必要なもの

+ 4GB以上入るUSBメモリ（中身が空、もしくは消えてもよい）（4GBとして売っていても実際は4GB目一杯入らないので注意）

+ 使わなくなったけど蘇生させたいPC、もしくはOSをUbuntuにしたいPC

+ PCがどうなってもいいという勇気

##Ubuntuのインストール

<a href="https://www.ubuntulinux.jp/download">Ubuntuのダウンロード</a>
上のリンクから
![2021-04-04_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423035/c8c0b669-df2f-59f5-d3a8-449a87682f45.jpeg)
を押して、下の画面から最新バージョンをダウンロード
![2021-04-04 (1)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423035/d16c920b-5b9a-0ece-a2bc-a8c1332b31a3.jpeg)
ダウンロードされていることを確認して次に進みましょう。

##Rufusのインストールと準備

<a href="https://rufus.ie/ja/">Rufusのダウンロード</a>
上のリンクからRufusのポータブルをダウンロードします
![2021-04-04 (2)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423035/fac8b7bc-8dc1-c0fd-605c-0a1cf1471264.jpeg)
インストールが完了したら、起動します。
起動後、USBメモリを挿す前はこんな感じです。
<img width="40%" src="https://diagnose-fix.com/wp-content/uploads/2019/06/20190694-01.png">
USBを挿すと、下のようにデバイスのところに挿入されたUSBが出ます。
<img width="40%" src="https://diagnose-fix.com/wp-content/uploads/2019/06/20190694-02.png">
選択からUbuntuを選択するとその他の設定値が自動で決まりますので設定値はそのままで「スタート」ボタンをクリックします。
スタートボタンを押した後いろいろアラートなどが出ますが、すべてOKにして大丈夫です。
<img width="40%" src="https://diagnose-fix.com/wp-content/uploads/2019/06/20190694-03.png">
状態のところが緑色の準備完了になったらUSBメディアの作成完了です。

ここで何かしら問題が出たら、USBメモリの容量が足りないのが原因だと思われます。


##再起動
先ほどのUSBメモリを挿したまま再起動します。そうすると大体の場合はうまくUbuntuが起動するはずです。

いろいろUbuntuの設定をしてもらって使えるようになっているはずです！


※もし私のようにそのままWindowsが開いてしまった場合は、再度再起動します。
再起動の際にF2キー（私のPCの場合）を何度も押してBIOSセットアップ画面を開きます。
「→」キーでBootの欄に移動し、External DeviceからのBootをEnable（Sony製品の場合）にします。
Sony以外の製品の場合「External Device Boot許可」や「USB Boot 許可」などで検索をかけると解決策が出てくると思います。（なげやりでごめんね）


##最後に

うまくできたでしょうか？
私も初めてだったので、いろいろ躓きました！
少しでも助けになったらうれしいです！

ちなみに復活したPCは見事に実家に返還され、私ではなく親が使っています（笑）
QNAP NASをminecraft serverにしよう。

#NASをminecraft serverにしよう

QNAP NASはDockerが使えるため簡単にminecraft serverにできます。
24時間稼働させる場合などで割高なゲーミングPCなどを別途用意する必要がなくお手軽です。
外部の有料サーバーではないため維持費は電気代だけです。
設定は数分で完了。

##用意するもの

<dl>
  <dt>サーバー側</dt>
  <dd>QNAP NAS (TS-253D)</dd>
  <dt>クライアント側</dt>
  <dd>Minecraft java edition 1.16.5</dd>
</dl>

##サーバー側設定
1. WebBrowserでQNAPにログイン
2. ContainerStationアプリを起動(DOCKER)
3. Management->CreateタブでDOCKERのMincraftコンテナをCreate
4. 起動後にpingが打てるか確認。ping 10.0.3.2

* pingが通らない場合はIPをQNAPのネットワーク設定で仮想スイッチのIPなどを確認
* 仮想スイッチとDOCKERのマイクラコンテナにもIPが振られる。
* https://www.qnap.com/ja-jp/how-to/tutorial/article/container-station-%E3%81%AE%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95

##クライアント側
1. Minecraftのクライアントからは以下のサーバーにアクセス
<dl>
  <dt>10.0.3.2:25565または10.0.3.1:49165でサーバーに接続</dt>
</dl>

## QNAP内部の通信状態(例)
* マイクラサーバー 10.0.3.2:25565
* 仮想スイッチ 10.0.3.1:49165
* 10.0.3.2:49165から10.0.3.1:25565へPort Forwardingされる。
* LAN側からセグメント10.0.3.xにアクセスできるようにしておく。
* client PC->NAS->10.0.3.1:49165->10.0.3.2:25565となる。
* client PCから10.0.3.xへの経路情報が必要。

## その他
* QNAPのContainerStationでマイクラのサーバーコンソロールコマンドを実行できる。
* dockerで他のゲームサーバーを導入することも可能になるはず。
* SteamCMDなども対応できるはず。QNAPのContainierStationにSteamCMDが多く存在している。

## QNAP NAS (TS-253D)
今回使用した機器です。NAS用途だけで使うのは宝の持ち腐れかな。

* 拡張性があって10GbpsのLANカードもさすことができます。
* SATA以外に拡張カードで高速なM.2カード（m-key）もサポートします。
* Celeron CPUでゲームサーバーに最適。
* Dockerが使えるため仮想化が容易に可能。
WordPressをちょこっとでも早くする画像最適化とフォントの遅延読み込み


**この記事は日曜の夜に殴り書いた備忘録です。拙い文章、ご容赦ください。**

Googleが提供するPageSpeed Insights。スコアでサイトの快適さを出してくれます。
https://developers.google.com/speed/pagespeed/insights/?hl=ja
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621241/fcd15ff8-78ee-4174-7df6-a9aaa0134246.png)

これを見ながら改善してくのが最善です。
私がやったことは

#1.ewww image optimizerの導入

WordPressのプラグインです。定番なのでご存知かもです。
画像最適化と位置情報など消すのに役立ってます。
もちろん入れるだけでも効果てきめんなのですが、チェック項目をチェックすることでさらに高速になります。

### 遅延読み込み
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621241/c959323f-8599-18c0-d973-e26d684de0b3.png)

画像が見えるようになるまで読み込まれないってやつです。

### 画像をWebPに
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621241/6c761728-43f1-fa3c-9ad3-973fa0490668.png)

モダンなwebPに変換してくれます。



#2.GoogleFontsの遅延読み込み
普通に<linkですると最初に読み込まれるため、フォント拾ってくるまでページが開きません。
そこで遅延読み込みです。
https://mogumogu-design.com/googlefont-yomikomi/
こちらを参考にしました。
Railsつまづいたこと  ~webpackでの画像表示~

# Webpackerでの画像表示ができない

開発環境は
* Rails 6.0.3
* Ruby 2.7
* Webpacker 4.0

## RailsのCSS,Javascript管理について

Railsはバージョン5以前はSprocketsライブラリを使ってアセットパイプラインで(app/assetsフォルダで)CSSやJavascript、Imageを管理していたがバージョン6以後はWebpackerで(app/javascriptフォルダで)管理するようになった。

Rails newをした後、デフォルトでWebpackerが搭載されていてyarnでjqueryやbootstrapをインストールし、environment.jsにも設定を書いていざ画像を読み込む際にエラーがいくつも出てきてしまったのでここに殴り書きする。

## エラー①CSS（bootstrap）が読み込めない
上記の手順ではまだbootstrapは読み込まない。webpackerを利用する際は`bin/webpck-dev-server`コマンドを実行する必要がある。これはwebpackerでcssやjavascriptファイルのコンパイルを行いサーバーを起動するというもの。このコマンドと`rails s`の両方を実行する必要がある。

## エラー②画像が読み込めない
rails6ではデフォルトでwebpackerの利用を推奨しているが、画像の読み込みをする際はapp/javascript/packsフォルダにあるapplication.js内のconst images = ....の部分のコメントアウトを外さなければならない。
【Flutter】The method 'add' was called on null（エラー対処法 ）

# 発生したエラー

```
NoSuchMethodError (
  NoSuchMethodError: The method 'add' was called on null. 
  Receiver: null
```

### 前提条件
* Flutter 1.26.0-17.3.pre 
* Dart 2.12.0 (build 2.12.0-259.8.beta)

### 問題のコード
`soundsLists.add(soundsList);`
で要素をaddするときに該当のエラーが出ました。

```
class SoundsRepository {
  fetchSoundsRepository() async {
    final List<String> _requestSoundsUrls = [
      'assets/json/soundBox.json',
      'assets/json/audioList.json'
    ];

    List<List<Sounds>> soundsLists;
    _requestSoundsUrls.forEach((urls) async {
      final String _soundsResponse =
          await SoundsApiProvider().fetchSoundsApi(urls);

      if (_soundsResponse != "") {
        Map jsonArray = json.decode(_soundsResponse);

        // http通信ではなくて、ローカルからファイル取得
        List<Map<String, dynamic>> jsonAudioList =
            new List<Map<String, dynamic>>.from(jsonArray['audioList']);

        List<Sounds> soundsList =
            jsonAudioList.map((i) => new Sounds.fromJson(i)).toList();
        soundsLists.add(soundsList);
      } else {
        throw Exception("ERROR");
      }
    });

    return soundsLists;
  }
```

# 修正方法
BEFORE:

```
List<List<Sounds>> soundsLists;
````
↓
AFTER：

```
List<List<Sounds>> soundsLists = List<List<Sounds>>();
```

### 原因
soundsListsがInitializeしていないのが原因。
dartだと上記のようにInitializeしないといけないらしい。

日々勉強

### 参考記事
https://stackoverflow.com/questions/55805850/the-method-add-was-called-on-null/55805888
量子コンピュータに関して勉強する際に役に立ったリンク集

個人的に最近量子コンピュータに関して勉強しています。
そこで参考になった資料やサイト、書籍などに関して、リンクのみになりますがまとめておきます。

#前提知識
* 基礎的な量子力学
    ある程度分かっていないと厳しいのでいくつか上げておきます。

     [EMANの物理学](https://eman-physics.net/)
     [量子力学講義ノート 東邦大学理学部物理学科 関口 雄一郎](http://www2.yukawa.kyoto-u.ac.jp/~yuichiro.sekiguchi/lecture_QM.pdf)
      [量子論におけるブラ・ケット表記](https://home.hiroshima-u.ac.jp/kyam/pages/results/monograph/Ref24_bracket.pdf)
      [数学：物理を学び楽しむために](https://www.gakushuin.ac.jp/~881791/mathbook/)
* 基本的な線形代数
ある程度分かっていないと厳しいのでいくつか上げておきます。
      [線形代数入門](http://www.utp.or.jp/book/b302039.html)
      [線形代数とその応用 | ギルバート ストラング, 山口 昌哉, 井上 昭](https://www.amazon.co.jp/%E7%B7%9A%E5%BD%A2%E4%BB%A3%E6%95%B0%E3%81%A8%E3%81%9D%E3%81%AE%E5%BF%9C%E7%94%A8-%E3%82%AE%E3%83%AB%E3%83%90%E3%83%BC%E3%83%88-%E3%82%B9%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B0/dp/4782805020)

#総説
ざっくり俯瞰するだけならたくさんの資料があります。
そのなかでもよくまとまっているなと思ったものをここに貼っておきます。
[【IT動向リサーチ】量子コンピュータの概説と動向～量子コンピューティング時代を見据えて～](https://www.jri.co.jp/page.jsp?id=36731)

#量子計算
量子計算って何か、量子回路とはなにかなど、我々が思い浮かべる古典的なコンピュータと量子回路との架け橋になってくれる資料。
[量子計算基礎 / 東京工業大学 河内 亮周](http://www.quest.lab.uec.ac.jp/q-school/2010/archive/%E9%87%8F%E5%AD%90%E8%A8%88%E7%AE%97%E5%9F%BA%E7%A4%8E.pdf)

#情報理論
何かと出てくる。量子誤り訂正とか出てくると、古典情報理論から詰めないと「何もわからん」となります。
[情報理論 改訂2版 – 今井 秀樹](https://www.amazon.co.jp/gp/product/4274223256/ref=ppx_yo_dt_b_asin_title_o02_s00?ie=UTF8&psc=1)
[量子情報理論とその難しさ-より多くの人に知ってもらうために-](https://www.jstage.jst.go.jp/article/essfr/3/1/3_1_1_44/_pdf)

#量子アルゴリズム
##Shorの素因数分解
入力データの位数に着目して、べき乗剰余取って、最後に連分数法で最小の位数を見つけるアルゴリズム。
RSAは、大きな整数を因数分解することは計算上困難であるという仮定に基づいていて、知る限りでは，この仮定は古典的なコンピュータに対して有効であり，多項式時間で整数を因数分解できる古典的なアルゴリズムは知られていません。しかし、Shorのアルゴリズムは、理想的な量子コンピュータにおいて現実的な時間で素因数分解が可能であることを示しており、大型の量子コンピュータを構築することでRSAを打ち負かすことが可能になるかもしれないです。
[Polynomial-Time Algorithms for Prime Factorization and Discrete Logarithms on a Quantum Computer](https://arxiv.org/abs/quant-ph/9508027)

[3時間で学ぶShorのアルゴリズム](https://www.marulabo.net/docs/shor/)
##Groverの探索アルゴリズム
データベース探索アルゴリズム。通常データ長$N$のデータベースから1つのデータを探す際、計算量は$O(N)$となるが、Groverのアルゴリズムを用いれば$O(\sqrt(N))$に落とせる。
このアルゴリズムを理解するには量子振幅増幅を理解が必須である。
[A fast quantum mechanical algorithm for database search](https://arxiv.org/abs/quant-ph/9605043)
[Groverのアルゴリズム / Home Page of Math CM Nagoya Univ.](http://www.math.cm.is.nagoya-u.ac.jp/~hnishimura/kyudai2020-2.pdf)

##量子フーリエ変換
高速フーリエ変換の計算量は入力データ長$2^n$に対して$O(n2^n)$であるが、
量子フーリエ変換は$O(n^2)$であるので$n$の大きなところで高速であると考えられるアルゴリズム。
下記のサイトでは離散フーリエ変換から出発して量子フーリエ変換を丁寧に導出してくださっています。。
[量子フーリエ変換 (Quantum Fourier Transform) とは](https://whyitsso.net/physics/quantum_mechanics/QFT.html)

実装に関してはQiskitのDocumentが詳しいです。

[Quantum Fourier Transform - Qiskit](https://qiskit.org/textbook/ch-algorithms/quantum-fourier-transform.html)


#量子コンピュータのコードの実装に役立つ
QunaSysという会社が量子アルゴリズム開発を行うエンジニアを広く育成するために、
無料の学習教材を作成・公開してくださっています。
[Quantum Native Dojo](https://dojo.qulacs.org/ja/latest/)
量子コンピュータのSDK,Qiskitの公式ドキュメントが大変充実しています。
[Qiskit を使った量子計算の学習](https://qiskit.org/textbook/)

#まとめ
量子コンピュータに関してまなぶ道標になればと参考にした・助かったサイトを列挙しました。
また有用なサイトが有れば更新予定です。
よろしくお願いいたします。
20代後半のプログラミング未経験者が、プログラミング学習から転職活動(現在活動中)までを通して感じること

# はじめに
初めてのQiita投稿になります。
20年10月から21年4月までプログラミングスクールで1日平均4時間の学習を続けており、オリジナルポートフォリオを作成した後に現在転職活動中です。(後のトピックで詳細記載します。)
現代の20代後半はこんなことを想う人もいるんだなとさらっと見てくれれば嬉しいです！似たような境遇の方の共感も得られるかもしれないと考えて投稿します！
本音ベースで記載していきます。

# 自己紹介
1992年生まれの28歳です。(未婚です。)
大阪の公立大学、同大学院まで進み、一般的に大手と言われる企業で現在技術開発職をしています。(現在5年目に入りました。)
大学では理系として化学を選考して、大学院も化学の研究室に入り、そのまま化学素材メーカーへ入るという、まさに理系あるあるの道を歩んでいます。
大学と大学院の6年間は恥ずかしながらまともに学習もせずに、バイトやサークルや彼女や旅行やら、the大学生してました。(今となっては、プログラミングやインターン等、未来のことを見据えてもっとやれることがあったなと少し後悔しています。)
自分で言うのもあれですが、私自身人柄も悪くなく、現在職場の方々とも上手くやっていると思います。

その環境の中、何故プログラミング未経験の私がプログラミングを学習して、転職活動をしているかを書いていきます。

## プログラミングを初めた経緯
- 現企業への危機感
私は自動車業界の素材開発に携わっています。自動車業界ということもあり、非常にグローバルです。競合他社も多くは海外です。特に近年の中国の発展を凄まじく、QCDで勝てなくなってきています。現状日系でNo.2ですが、日本だけではなくてグローバルでの戦いゆえに今後も厳しいです。
(現段階では)安定しており、良い企業ではあるものの、今後に不安を覚えることはあります。会社がつぶれることはないと思いますが、もう少しポジティブな環境で戦いたいと想うようになりました。
- 現職への危機感
海外に自社工場を構える中で私は現在日本の(滋賀の)研究所で技術開発職をしています。①顧客(技術パーソン)とのやり取り②研究所でのラボ技術検証③海外工場での実機技術検証を主に行っています。①に関して、私が自社の技術パーソンとして殆ど任されているで、顧客情報をどのように社内に展開して物事をどう進めるかという「社内調整力」は身についたかと思います。ただ②と③は狭い狭い領域の専門的知識であり、仮に他の会社に移ったときに通用するスキルかどうかを考えたときに、このままこの職種を続けても得るもの(スキル)はあまりないと思いました。

丁寧に書きすぎました。。。ざっくりいうときっかけは現状と今後への不安です。そこで、どでかい大企業へ行くかもしくは今後まだ明るい業界であろう企業へ行くのが当時考えうる方策でした。単純に後者の方が面白そう(ワクワクする)という思いから、Youtubeの影響もあり、ITやWeb業界へ関心がいくようになりました。
また2020年5月頃に大学院時代の友人が同様の境遇から、プログラミングスクールに通い、IT業界のベンチャー企業へ転職した話を聞いて、プログラミングを触ってみようと思いました。

# プログラミングスクールへ行くまでの経緯
ITやWeb業界、プログラミングの位置づけ等、具体的にイメージした上でプログラミング学習を始めなかったのは反省点です。
ただプログラミングを学習して損はないと思い、ドットインストールでHTML/CSS/JavaScriptを学びました。平日の夜2時間学習する習慣を半月から1ヶ月程度続けてみて、案外苦ではないと感じてプログラミングスクールを検討し始めました。
自分の年齢からもあまりゆっくり学習してられないということ、先述した大学院の友人の前例があったことからプログラミングスクールに通うことを決めました。

# プログラミングスクールでの振り返り
2020年の10月から2021年の4月までの半年間、現職を続けながら、1日平均4時間程度学習を継続しました。ざっくり半年間で750時間程度(転職活動含む)、プログラミング学習のみで600時間程度を積み上げました。
スクールの学習は、自分でオンラインカリキュラムを進めて、不明点があればメンターに聞くという今や鉄板の学習方法でした。またスクールに同じ志を持つ仲間ができたのは一つの学習モチベーションになりました。
ちなみに結果的に私はスクールで下記スケジュールとなりました。スクールの同期と比較すると、スピード感を持って学習することができたと思います。

| 年月    | 活動内容 |
|-------- | --------|
|2020/10/中 ~ 2020/12/末| カリキュラム学習|
|2021/1/初 ~ 202１/2/中| オリジナルポートフォリオ作成|
|2021/3/初 ~ 現在| 転職活動|

# オリジナルポートフォリオ
オリジナルポートフォリオの概要は下記リンク(README)を参照ください。

https://github.com/shuhei1018/B-products

実際のアプリのリンクも貼っておきます。

http://b-products.work/

もっと楽しみながら遊び心を持ってオリジナルアプルを作成すれば(できれば)よかったと思います。ポートフォリオを自分で決めたレベルまでつくることが仕事のような意識で取り組んでいました。正直レベルが高いとは言い難いですが、早く転職活動をして様々な企業を見てみたいと思い、転活を開始しました。

# 転職活動
現在活動中ですので、結果(結論)はありません。現在私はこれまで記載した過程を経て、”自分が今後本当にしたいこと”を考えることはビジネスパーソンにとって必要不可欠であり、それを考えるきっかけを与えてくれる転職活動は皆がすべきと言っても過言ではないと感じています。また今後、転職先が決定次第別途投稿したいと思います。

#さいごに
最後まで目を通してくださいまして、ありがとうございました！
長々と書いてしまいましたが、自分のやりたいことを仕事でできていることが一番幸せだと思います。研究開発好きの同期を見ててそう思います。ただやりたい仕事がないから思考停止で働くというのは避けたいです。一度きりの人生、せっかくなので楽しんでいきましょう。今回記載した私の経験や想いがどなたかの参考になれば幸いです。
csvファイルの読み込みと出力

pythonでは、csv ファイルのデータを読み込み、データフレームを操作する。
下記に作成したコードの例を示す。

```python:stack.py

import pandas as pd

#import column側のヘッダーに名前を付ける。
df = pd.read_csv('log/2016-02.CSV', names=['T','P','H','date','T1','P1','H1'])

#import データをinsertする。
df.insert(0, 'item', 'base')
df.insert(1, 'item1', 'comp')

#import 3行までのデータを出力、ファイルの確認
print(df[:3])
#指定したnameの出力
print(df['T'][0:3])

#指定したカラムの情報を取り出す。
df.to_csv('output/stack.csv', columns=['item','T'])
# データを追記する。
df.to_csv('output/stack.csv', mode='a', header=False, columns=['item1','T1'])
#print(df['T1'])

```
WindowsにDocker Desktopをインストールしてみた

# この記事の目的
Windows 10 にDocker Desktopをインストールして、その過程をまとめます。

# 環境
この記事を書くために実際に作業したバージョンを記します。

* Windowsの仕様
    * エディション：Windows 10 Home
    * バージョン：20H2
    * OS ビルド：19042.867
    * エクスペリエンス：Windows Feature Experience Pack 120.2212.551.0

* Docker Desktop
    * 3.2.2

システム要件はこちらに詳しく記載があります。

https://docs.docker.jp/docker-for-windows/install.html#win-system-requirements

# 参考文献
本家本元のDockerにドキュメントがあるのでこの通りインストールしてみます。

https://docs.docker.jp/docker-for-windows/install.html

# 実際にインストールしてみる

Docker Hubにインストーラーがあるのでダウンロードする。

https://hub.docker.com/editions/community/docker-ce-desktop-windows/

インストーラーをダブルクリックする。次の確認画面が出てくるので必要なものにチェックして「OK」を押下する。

![2021-04-04-000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1278980/7f0043d5-9934-b5cd-9bc8-3ab1fcfbd0c6.png)

インストールが完了したら「Close」ボタンを押下する。

記事にするほどのこともなかった...。Dockerの公式ドキュメントだと「Enable Hyper-V Windows Features」を選択したり、ライセンスに許諾したりする、というステップが記載されていたが、今回はそのようなことをせずに済んだ。Docker Hubからダウンロードした時点でライセンスを許諾するように仕組みが変わっているようだ。

![2021-04-04-002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1278980/b8008fd8-1c6b-458b-bf06-2f5a0d1647ff.png)


# 動かしてみる

スタートメニューからDocker Desktopを選択。起動すると次のGUIが表示される。Dockerの実行環境はバックグラウンドで動作し続けているようだ。（GUI非表示でもステータスメニューにクジラのアイコンが表示されている。）

![2021-04-04-001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1278980/c328ad34-727b-6355-621f-e257e9d63e19.png)
WEB Api 関連メモ

API周りを学習していたのでその周辺知識のメモです

## OpenAPI

OpenAPI とはOpenAPI Initiative が策定しているREST API のインタフェー
ス仕様を記述するための仕様。iOS/Android アプリとRuby on Rails のようにクライアントとサーバで全く別の言語を使っている場合、仕様を把握するために新たな言語を学習するのはコスト
がかかる。
OpenAPI の定義はREST API のドキュメントに対して統一的な構造をもたらし、かつ機械で処理しやすい形になっています。
そのため、定義に通りのバリデーションや定義に基づいたコードを生成できる。

## REST API

プログラムの呼び出し規約(API)の種類の一つで、RESTと呼ばれる設計原則に従って策定されたもの。
URL/URIですべてのリソースを一意に識別し、セッション管理や状態管理などを行わない(ステートレス)。同じURLに対する呼び出しには常に同じ結果が返される。
URLにはapp/getUserのように処理は紐付かず、User/1のようにModelに基づいて対応付ける。

## エンドポイント

ネットワークに接続されたパソコンやPDA、携帯電話などのネットワーク端末の総称である。 エンドポイントは、いわゆるクライアントのことを指すことが多いが、サーバーを含む場合もある。

## WEB API

一言で言うと「HTTPプロトコルでやり取りするアプリケーション間のインターフェース」
認証なしの公開APIにははてなブックマークやiframe, RSSなどがある
[hatena](https://b.hatena.ne.jp)

## 公開APIの負荷分散

公開APIなどはそのAPIが誰かのページで閲覧されるたびにリクエストが送られるので、
大量アクセスの負荷がかかる。

+ はてなの場合、CDNを使用してレスポンス内容をキャッシュさせ、高速に返す専用のAPIサーバを立てている。
+ クローラ対策で、同一IPからのリクエストにレートリミットをかけ、一定時間アクセスを遮断する。

## 認証付きAPI

### Cockieによるログインセッション

ユーザがログインに成功した際、有効なセッションを表すCockieを発行しサーバ側のCockieと同位置であればOKとする
WEBアプリケーション内部からAPIを叩きにいく場合は構わないが、APIクライアント自身が外部へ公開されるような場合（ブラウザを通さない）、Cockie保存の動作をAPIサーバ側で模倣する必要があり使いづらい。またユーザはAPIにID・PWを預けることになるのでセキュリティ上好ましくない。

### アクセストークン

APIリクエスト時にヘッダやクエリパラメータにログインユーザのみに発行されるアクセストークンを付加して、認証済みユーザに認可されたリクエストであることを示す仕組み

### OAuth

ユーザ認証の仕組みは任意の方法のままで、アクセストークンを得る仕組みを
仕様として定めたのが**OAuth**

## 内部向けAPI

+ ブラウザで実行されるAjaxからのリクエストをうけるAPI
+ モバイルAppなどから実行されるAPI
+ 他組織との合意のもとリクエストを受ける非公開API
+ 内部ネットワーク間でマイクロサービスやミドルウェア間で呼び出すAPI

Google Cloud Pub/Sub, AWS kinesis Data Streamsなどは通信プロトコルとしてHTTP/2 を採用している。
HTTPではリクエストが来てからレスポンスを返す、ラウンドトリップコストがあったが、HTTP/2では双方向通信が可能となったためミドルウェア領域でもWEB APIの採用が進んでいる。

### ゼロトラストネットワーク

内部からの信頼された通信である前提なら認証や暗号化は必要ない。
しかし、内部ネットワークに侵入されていた場合などを考えると認証やHTTP化はしておくべきと言う考え方をゼロトラストネットワークと言う。
C言語：構造体のメンバのアドレス

構造体の各メンバのアドレスの取得は、メンバ名の前ではなく構造体変数名の前に&を用いる。

```cpp
#include <stdio.h>

struct Person{
        char *name;
        int age;
}naru;

int main() {
        printf("naru.name = %p\nnaru.age = %p\n" , 
              &naru.name , &naru.age);

        return 0;
}

```

それぞれのアドレスが返ってくる。


配列構造体や、ポインタ構造体も同じくアロー演算子を使って、構造体名の前に＆を置く。

引数にintへのポインタ型を取る関数などにも（intに限らず）にもメンバのアドレスを渡すことができる。

```c

#include <stdio.h>

int change(int *n)
{
    *n = 1010;
    return (0);
}

int main(void){
    struct Person{
        char *name;
        int age;
}naru[0];

    naru->age = 10;
    printf("%d\n", naru->age); // 10;
    change(&naru->age);
    printf("%d\n", naru->age); // 1010;
}

```
vs code ショートカット



      

操作概要                 |	Windows          |	macOS
-----------------------|-------------------------|-------------------------------
                       |          **全般**        |
すべてのコマンドの表示       |	Ctrl+Shift+P, F1 |	⇧⌘P, F1
クイックオープン	       |          Ctrl+P         |	⌘P
キーボード ショートカットを開く  |	Ctrl+K Ctrl+S    |	⌘K ⌘S
直近で開いたファイルを表示   |	Ctrl+Tab	 |       ⌃Tab
                       |          **編集**            |
コードの整形	       |        Shift+Alt+F      |	⇧⌥F
（選択範囲なしで）行の切り取り |	Ctrl+X	         |      ⌘X    
（選択範囲なしで）行のコピー   |	Ctrl+C	         |      ⌘C
行を下へ移動             |	Alt+↓ 	         |      ⌥↓ 
行を上へ移動             |	Alt+↑	         |      ⌥↑
行を下へコピー            |	        Shift+Alt+↓      |	⇧⌥↓
行を上へコピー            |	        Shift+Alt+↑      |	⇧⌥↑
行の削除                |	Ctrl+Shift+K     |	⇧⌘K
行を下に挿入             |	Ctrl+Enter       |	⌘Enter
行のインデント追加         |	Ctrl+]	         |      ⌘]
行のインデント削除         |	Ctrl+[	         |      ⌘[
名前を変更              |	              F2         |	F2
補完候補を開く           |	          Ctrl+Space     |	⌃Space
                       |          **選択**        |
矩形選択(マウス選択)        |	Shift+Alt+ドラッグ	 |     ⇧⌥+ドラッグ
矩形選択(キーボード選択)     |	Ctrl+Shift+Alt+方向キー|	⇧⌥⌘+方向キー
選択範囲と同じ文字列の複数指定|	Ctrl+D               |	⌘D
                        |        **移動**             |
行の先頭に移動             |	Home                 |	Home
行の最後に移動             |	End                  |	End
ファイルの先頭に移動         |	Ctrl+Home            |	⌘↑
ファイルの末尾に移動         |	Ctrl+End             |	⌘↓
行コメントの切り替え          |	Ctrl+/               |	⌘/
指定行へ移動              |	Ctrl+G               |	⌃G
ファイルに移動              |	Ctrl+P               |	⌘P
前に戻る                  |	Alt+←                |	⌃-
次に進む                 |	Alt+→                |	⌃⇧-
                        |         **検索**            |
ファイル内検索             |	Ctrl+F               |	⌘F
ファイル内置換             |	Ctrl+H               |	⌥⌘F
次を検索                 |	F3                   |	⌘G
前を検索                 |	Shift+F3             |	⇧⌘G
プロジェクト内検索          |	Ctrl+Shift+F         |	⇧⌘F
                       |        **パネル操作**         |
サイドバーの表示/非表示     |	Ctrl+B               |	⌘B
ターミナルの表示/非表示     |	Ctrl+@               |	⌃@
新しく統合ターミナルを表示   |	Ctrl+Shift+@         |	⌃⇧@
エクスプローラーの表示      |	Ctrl+Shift+E         |	⇧⌘E
LaravelでHello worldを表示させてみた

#LaravelでHello worldを表示
Laravelの環境構築が終わったので
タイトルにもある通りHello worldを表示させてみた。

#プロジェクトの作成

```:ターミナル
composer create-project laravel/laravel helloworld
```
これでプロジェクトが作成できたのでhelloworld
ディレクトリへ移動

```:ターミナル
cd helloworld
```

ここまでできたらエディタを開きコードを編集していきます。

#web.phpの編集
僕はVscodeを使っているのでVscodeを開きます。
そしてhelloworld\routes\web.phpを開いて編集していきます。

```php:helloworld\routes\web.php
<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/


Route::get('/', function () {
    return view('welcome');
});

Route::get('hello', 'HelloController@index');
```
#コントローラーの作成
続いてコントローラーの作成。

```:ターミナル
php artisan make:controller HelloController
```

作成したコントローラーを編集していきます。

```php:helloworld\app\Http\Controllers\HelloController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HelloController extends Controller
{
    //
  public function index()
  {
    return view('hello');
  }
}
```
#hello.blade.phpの作成
resources/viewsの直下に
hello.blade.phpファイルを作成します。

続いてhello.blade.phpファイルの編集。

```php:resources/views/hello.blade.php 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h2>Hello World</h2>
</body>
</html>  
```

#サーバーの起動
ここまで終わったらサーバーを起動させます。

```:ターミナル
php artisan serve
```
下記へアクセス。
http://127.0.0.1:8000/hello

これでHello Worldと表示されます。
【Swift】MVVMまとめ

#はじめに
MVVMで投稿した記事をまとめます。

#記事

https://qiita.com/REON/items/f5230a9225f5e13f3631

https://qiita.com/REON/items/421c1290139257d6ae14

https://qiita.com/REON/items/60b9fb8fc01e5cc478e5

https://qiita.com/REON/items/592be50dbade94c1abaf

#おわりに
随時更新予定
社内ISUCONを開催しました

# はじめに

* 先日ウルシステムズの社内でISUCONを開催しました
* 学んだことや反省点などを書くことで社内ISUCONを開こうと思っている人の参考になればと思い記事にしました

# 目的

* コードを書く楽しさを感じてほしい
    * 普段はコンサルティング業務を行っている社員が多く殆どの社員が業務でコードを書くことが少なくなっています
    * みんなにコードを書く楽しさを再確認してもらうことを目的としました

# ルールなど

## ISUCON5予選をベース

* 参加者（運営）がJavaなら書ける！という人が多いという想定のもとJava実装があるISUCONをベースにしました

## 制限時間は24時間

* 23時スタート→翌日21時エンド+参加者同士で交流してたので実質は24時間overかもしれません
* 深夜帯をどう使うかチーム間で個性が出るだろうと思い設定しました
* 深夜はあまりやらないだろうという想定でしたが殆どのチームが朝方までやっていました

## 1～3人のチームで募集

* 参加チームは10チームとなりました

## 環境

* 本番環境はAWS
    * Dockerを使ってアプリケーションをデプロイできる手順書を提供
* 開発環境はローカル
    * Dockerを使って開発できる手順書を提供
* コードの共有はGitHubのリポジトリを各チームに配布

## フルリモート

* 業務もフルリモートなので社内ISUCONもフルリモートで実施しました
    * もちろんチーム内の交流・やりとりもリモート
    * 広島＋福岡の混合チームもいました
    * イベント後の飲み会などもリモートで実施
    * ランチ時に「ITO」をリモートで開催しました
        * https://note.com/gyoza39/n/nc15ba30db2ab

# 本家ISUCONとの違い

## 独自のボトルネック

* 無意味なSleepを行うコードを追加しました
* 並列処理で全コアを使い切るようなコードを追加しました

## マスクマン制度を導入

* ◎の体育会TVのようなマスクマン制度を導入しました
* 具体的にはシニアで技術力が高い人たちのチーム（2チーム）をマスクマンチームとし
    * 当日まで参加者を公表しませんでした
    * イベント中にハンデを設定してもらいました
        * 最終結果ポイントを他のチームに？％献上する(上限10%)を最初の宣言してもらいました
        * 運営の煽り？努力の結果2チームとも10%を献上してくれました

## インスタンスタイプに差をつけた

* スタート時にインスタンスルーレット（抽選）を行い使用するインスタンスタイプを決めました
* 終盤でクイズ大会を行いインスタンスタイプを交換できるイベントを行いました
    * 正解率が高い上位2チームがその他のチームとインスタンスタイプを交換できます

## 仮採点・本採点

* スタートから翌日19時までは常に採点できる状態でベンチマーカーを起動しておきbest_scoreを競います
* 19時からのイベントで本採点を行います
    * best_scoreの順に一発勝負の採点を行いそれをlatest scoreとします
    * 本採点のベンチマーカーの並列度が2倍になっています

# 当日の様子

* インスタンスルーレットの様子

![MicrosoftTeams-image (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9700/b1ed522e-35a8-1fb6-50d1-300cf2afcbf5.png)

* 当日のチャットの様子をまとめたものです
![当日の様子.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9700/47600ea3-996f-c4d3-5ca1-53ca2b7f3e82.png)

# よかった点

* とにかくみんな楽しんでくれたところ
    * アンケート回答者25人中24人が「とても楽しめた」「どちらかというと楽しめた」と回答してくれました
    * いろんな人が「夢中になれた」「刺激になった」「勉強のきっかけとなった」とコメントしてくれました
    * 新人の方が「ベテランの方のアプローチやコードをみれてすごく勉強になった」と書いてくれました
    * みんなにコードを書く楽しさを再確認してもらう　という目的は達成できたと感じています
* インスタンスタイプに差をつけたこと
    * 「参加のハードルが高いと思っていましたが、このおかげでみんなが楽しめる会になった」とアンケート回答がありました

# 反省点

* インスタンスタイプに差をつけたこと
    * これはよかった点でも挙げたのですが「やる気を無くした」というコメントもありました
    * バランス調整が必要だと感じました
* 環境構築に時間がかかった
    * ベンチマーカーを動かせるようになるまでに数時間かかったチームがありました
    * 手順の準備などに改善点があるように思いました

# さいごに
* 目的としていた「コードを書く楽しさを感じてほしい」は達成できたと思っています
* 「インスタンスタイプに差がない場合どうなるのか」が気になっているので「ISUCONリベンジ」を計画中です
【Swift】MVVM勉強してみたPart2

#はじめに
[前回](https://qiita.com/REON/items/f5230a9225f5e13f3631)に続き、MVVMを学習しておりますが、なかなか掴めません、、、
今回は[iOSアプリ設計パターン入門](https://peaks.cc/books/iOS_architecture)のMVVM(第7章)を読んで学んだことを自分なりにまとめていこうかと思います！

#MVVMアーキテクチャ
画面の描画処理とプレゼンテーションロジックとを分離したGUIアーキテクチャ
画面の描画処理をView、画面描画のロジックをViewModelにする
ViewとViewModelをデータバインディングで関連付けてViewModelの状態が変更されたらそれに同期してViewの状態も更新され、画面に反映されるのが特徴

###データバインディング
二つのデータの状態を監視し、同期する仕組み
MVVMではViewがViewModelを監視する単方向バインディング
データバインディングによってViewModel内にViewに対する描画処理を書く必要がなくなる
->疎結合！！！

###採用する理由
リアクティブプログラミングと相性がいいため

###構造
![0CCA4A5A-7882-4783-BF9B-686BADF2F7C6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954451/b7eba74c-5010-efa3-b349-a46855dd9149.jpeg)


###Model
MVCなどと同じ
APIやデータベースへのアクセスなど

###View
MVCなどと同じ
ViewModelが保持する状態とデータバインディングしてユーザーの入力に応じてViewModelが自身が保持するデータを加工、更新することでバインディングした画面表示を更新する

###ViewModel
Viewに表示するためのデータを保持する
Viewからイベントを受け取り、Modelの処理を呼び出す
Viewからイベントを受け取り、加工して値を更新する
ViewModelはViewの参照を保持しない

#おわりに
[次回](https://qiita.com/REON/items/60b9fb8fc01e5cc478e5)
MVVMをもっともっと勉強していこうかと思います！
ネットワーク盗聴への対策まとめ(通信の暗号化、電子署名)

先日投稿したこちらの記事の続編です。
https://qiita.com/sasshi_i/items/f6057f70e9aea80e4662

本日は`ネットワーク盗聴への対策`についてまとめていきます。

# 教材
教材はIPAが出している安全なウェブサイトの作り方を使っています。
https://www.ipa.go.jp/security/vuln/websecurity.html

# ネットワーク盗聴について

>ネットワーク盗聴はウェブサイトと利用者との経路上で行われるため、この行為自体をウェブサイト側 の運用や設定のみで防ぐことは困難です。しかし、通信経路を暗号化すれば、盗聴を受けても重要情報 が不正に取得されることを防止できます

引用：
https://www.ipa.go.jp/security/vuln/websecurity.html
`安全なウェブサイトの作り方　改訂第7版`から引用

# 対策
## 通信経路を暗号化する
SSL/TLSを用いたHTTPS通信を行うことで盗聴されても盗聴者には内容を理解することができません。

### SSL/TLSの仕組み
こちらのサイトにまとまっていたのでこちらをご参照ください。
https://eset-info.canon-its.jp/malware_info/special/detail/200903.html

## 利用者に重要情報を通知する際はメールで送らず暗号化されたhttps://のページで表示する
メールを暗号化する方法としてS/MIME, PGP等の技術があるが、利用者側に暗号化環境や秘密鍵が必要となるので、現実的な方法ではない。
そのため、暗号化されたページで重要情報を表示する。

### S/MIMEとは？
>電子メールのセキュリティを向上する暗号化方式のひとつで、電子証明書を用いてメールの暗号化とメールへ電子署名を行うことができます。 S/MIMEの方式を用いるには、送信者と受信者側との両方がS/MIMEに対応する電子メールソフトを使用している必要がありますが、Microsoft社のOutlookやiPhone・iPadのメールソフトなど多くのメールソフトが対応しています。

引用： https://jp.globalsign.com/service/clientcert/about_smime.html

### S/MIMEの主な役割
> S/MIMEの主な役割は、『メールの暗号化』で盗聴防止と『メールへの電子署名』です。

引用： https://jp.globalsign.com/service/clientcert/about_smime.html

### 暗号化の仕組み
https://jp.globalsign.com/service/clientcert/about_smime.html
`S/MIMEによるメールの暗号化の仕組み`を参照

### 電子署名の仕組み
https://jp.globalsign.com/service/clientcert/about_smime.html
`メールへの電子署名の仕組みを`参照

### PGPとは？
暗号化、電子署名の流れはS/MIMEと変わらない。
異なるのは公開鍵の保証方法である。
 
### 公開鍵の保証とは？
Aさんが配布した公開鍵がAさんが配布したものであると保証すること
その保証する基盤を公開鍵暗号基盤（PKI)という。
例として公開鍵に認証局が発行した証明書を付与することでAさんが発行した公開鍵であると証明する。

わかりやすい図が下記に書いてあったので参考にしてください。
https://wa3.i-3-i.info/word15515.html

### S/MIMEとPGPの公開鍵の保証の違い
#### S/MIME
認証局が発行した証明書で公開鍵を保証


#### PGP
Web of Trust (信頼の輪)という考え方に基づいて公開鍵の所有者を信頼できる人に保証してもらう方法。
信頼できるXさんが署名している公開鍵なら大丈夫だという感じで保証。

こちらのIPAの資料がわかりやすかったので参考にしてください。
https://www.ipa.go.jp/security/pki/031.html

ちなみにキーサインパーティーっていうのもあるらしい。
https://ja.wikipedia.org/wiki/%E5%85%AC%E9%96%8B%E9%8D%B5%E5%9F%BA%E7%9B%A4#%E4%BF%A1%E7%94%A8%E3%81%AE%E8%BC%AA%EF%BC%88Web_of_Trust%EF%BC%89

参考：
https://milestone-of-se.nesuke.com/sv-advanced/digicert/openpgp-smime-tls/

## ウェブサイト運営者がメールで受け取る重要情報は暗号化する
S/MIMEやPGPを用いてメールを暗号化する
[java]クラスのアクセス修飾子について

### クラスで使用できるアクセス修飾子の種類
- ***public***
- ~~protected~~  <em>クラスでは使用不可能<em>
- ***修飾子なし(何も記述しなかった場合)***
- ~~private~~  <em>クラスでは使用不可能<em>

の２種類存在する。
**<em>※"protected"と"private"はクラスのアクセス修飾子に使うことができない。<em>**


### クラスのアクセス修飾子のアクセスについて
同一パッケージで、以下の2パターンを準備する。

```java
//クラスのアクセス修飾子が"public"の場合。
package abc;
public class Ab{
  public int aa;
  
  protected int ba;

  int ca;

  private da;
}
```

```java
// クラスのアクセス修飾子が記述されていない場合。
package abc;
class Ef{
  public int ac;
 
  protected int bc;

  int cc;

  private int dc;
}
```



異なるパッケージdefから、上記２つのクラスのインスタンスを生成する。

```java
package def;
import abc.Ab;
public class Xyz{
  Ab a = new Ab(); //"public"修飾子は生成可能

  Ef c = new Ef(); //修飾子が記述されていない場合は生成不可能

}
```


フィールド・メソッドのアクセス修飾子については、[こちら](https://qiita.com/taccc_/items/7e6f321b94609eda2153)
「未経験からエンジニアに転職した人の話を聞こう」@Xhack勉強会

### はじめに
この記事は,Xhackの[にこさん](https://twitter.com/Rorome15Nikomu)が主催されたイベント「未経験からエンジニアに転職した人の話を聞こう」のレポート記事になります。この勉強会では、実務未経験からエンジニアになるための勉強法,就活法などを実務1,2年のエンジニアの方がお話してくださいました。 本記事では、勉強会で述べられていた「アウトプットすることの重要性」についてレポートします。

![text_syoshinsya_kangei.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482077/c3027cc9-30af-33b7-394c-27f8a6112e42.png)

### 実務未経験の人がエンジニア転職のためにすべきこと
突然ですが、皆さん。
アウトプットしていますか？

「うん！ アウトプットって手を動かすことでしょ！✋」
「本読むだけじゃだめなんだよね！知ってるよ！😁」
「Progateやって手を動かしてるよ！💪」

![computer_programming_man.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482077/8ded66b7-4bd9-92c8-258f-623c412a60fc.png)

とまぁ色々な声が聞こえてきますね。

確かに,以上の事はアウトプットです。しかし、この勉強会では、特に「ネット上」でアウトプットすることが重要であると説明されていました。

なぜ「ネット上」でアウトプットすることが重要なのでしょうか？

理由は、`ネット上でアウトプットすることで,学習の理解が深まるだけでなく、企業さんから直接お声がかかる場合があるため`だそうです。

ご登壇されていた、[とよももさん](https://twitter.com/momokotoyopet)や[やんばるさん](https://twitter.com/shonansurvivors)は、ご自身が執筆された技術記事やtwitterでの学習記録などが企業さんの目にとまり内定につながったことがあったそうです。技術力に乏しく実務経験がない人が転職するためには、この人を雇ったらきっと成長してくれて企業に貢献してくれるだろうという「成長性」をネットで見える化することが大切なようです。

### アウトプットの仕方
それでは、具体的にはどのようにアウトプットをしたら良いのでしょうか？

勉強会で紹介されていたアウトプットは次の3つになります。

1. twitterで学習記録をつけること 
2. QiitaやNoteで技術記事を投稿すること
3. ポートフォリオを作成してネット上に公開すること

１つ目の「twitterで学習記録をつけること」は、`#今日の積み上げ`などをツイートにつけて毎日勉強したことをツイートするというものです。これをすることで、エンジニア学習を継続できる人というアピールをすることが出来そうですね。

ツイートの例(筆者のツイート) : 
![Screen Shot 2021-04-04 at 23.03.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482077/de124bf9-48ac-2968-843a-7025a2ad1021.png)

2つ目の「Qiitaで技術記事を投稿すること」は、自分の理解が浅い分野について記事にわかりやすくまとめてアップするというものです。これをすることで、技術に対する理解が深まることはモチロン、記事が多くの人にシェアされる事で企業さんとの面談に繋がる事があるそうです。それに加えて、技術を言語化する習慣をつけることで、面接時に「〇〇という技術を説明してください」と言われたときも困らないそうです！ まさに一石二鳥、いや一石三鳥の勉強法ですね！🐤🐤🐤

技術記事の例(ご登壇者のとよももさんの記事です)。[記事のリンク](https://note.com/toyomomo/n/nef357f75374b)
![Screen Shot 2021-04-04 at 23.07.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482077/2e4d28d4-93d8-e7e0-e8f1-bc9f66362d59.png)

3つ目の「ポートフォリオを作成してネット上に公開すること」は、ご存知の通り入門書やスクールで学んだことを元に、実際にオリジナルのアプリをつくってネット上で触れるようにすることです。実際に,アプリを作ることがアプリを作る力をつける最強の勉強法なんですね。

### おわりに
以上がXhack勉強会で説明されていた事の中でも"特に"自分が重要であると思ったものになります！ 他にも,「エンジニアになる目的を明確にすることでモチベを保つ」といったことも語られており、とてもためになりました！ こういった勉強会を主催してくださるのは本当に助かりますね。

また勉強会に参加したいと思います！それでは！!
display:none; が効かない

##概要
ProgateのHTML＆CSS上級編のレッスンをローカル環境でコーディングしてた際の出来事

レスポンシブデザインを適用する際、デフォルトの状態では要素を非表示にさせたかった。Progateでの指示通りに`display:none;`で非表示にしようとしたが表示されたままだった。

その時のコード

```css:stylesheet.css
 .menu-icon {
    display: none;
  }
```
##対処法
ネットで解決法を探した結果、どこか別の場所で指定している`display`が優先されてしまっているのが原因として考えられるとのこと。 そのサイト通り`!important`を記述し優先度を上げてあげると見事に解決した。

```css:stylesheet.css
 .menu-icon {
    display: none !important;
  }
```
これを記述すると今度は表示させたい時にも非表示が優先されてしまってるようだったので、表示させるコードにも`!important`を記述

```css:responsive.css
 @media (max-width:670px) {
   .menu-icon {
      display:block !important;
   }
 }
```


この方法で表示・非表示の切り替えがされるようになった！
参考にしたサイトは許可をとっていないので載せませんが助かりました！

終わり
Amazon Lightsail を使ってみる

## Amazon Lightsail とは？

VPS(仮想プライベートサーバー)サービスで、
コンピューティング環境やストレージ、ファイアウォール、DNS機能などWebサービスに必要な機能をまとめてパッケージで提供されおり
手軽にwebアプリケーションを構築することが出来ます。

## 使ってみた

- Amazon Lightsail に進む

他のサービスと違ってなんかカラフル・・・
とっつきやすいからかな？

![1 インスタンスを作成する _ Lightsail - Google Chrome 2021-04-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/3348c6d3-3a4e-4fd6-970a-3c01205c53bb.png)


- インスタンスを作成する

OSとアプリケーションを選びます
今回はlinuxでredmineを構築してみます

![2インスタンスを作成する _ Lightsail - Google Chrome 2021-04-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/a370c360-2c7d-42f9-d05a-75939703b238.png)


- インスタンスタイプの作成

インスタンスタイプは一番安いやつで、リソース名はデフォルトにしています。
選択完了すると、作成に進みます。

![3 インスタンスを作成する _ Lightsail - Google Chrome 2021-04-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/97d54e02-8d36-af6a-e512-fe5d25f1f45c.png)


- 作成できました

もう出来ちゃいました

![4 Lightsail - Google Chrome 2021-04-01 23.14.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/77b93cf8-cc1e-b45f-b65a-3b1c43fe2a02.png)


- 接続してみる

インスタンスのターミナルのボタンをクリックするとすぐに接続することが出来ます。

![6Lightsail - Google Chrome 2021-04-01 23.24.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/a90277b6-185d-db8e-0f13-85e6d598eb51.png)

別窓で開きます。

![5 Redmine-1 – ターミナル _ Lightsail - Google Chrome 2021.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/4d610c9c-cf3b-bb8e-b37d-edf73503bb6f.png)


- Redmineにログインしてみる

ブラウザで `https://[GIP]` で接続します。
すぐに表示できました！

![7Redmine - Google Chrome 2021-04-01 23.28.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/04b59f13-6696-f381-c54e-d45f96872486.png)

- インスタンスを削除する

ホームから `︙` を開いて削除します。

![9Lightsail - Google Chrome 2021-04-01 23.36.41 2021.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/5bfea228-82df-5346-da27-2be38b8a4321.png)



確認が出るので、削除します。

![10Lightsail - Google Chrome 2021-04-01 23.38.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/eefa5172-e19a-5715-562d-a0d44487b90f.png)


すぐに削除できました

![11Lightsail - Google Chrome 2021-04-01 23.38.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/c07a63b2-5294-f7f8-4a26-8be63ac2bd51.png)

## 勉強後イメージ

めっちゃ簡単では・・・？
イラストもあってAWSじゃないみたい
ちょっと使うにはめっちゃいい！！！
binned errorbar plot with matplotlib: for log-log scale axes

## 目的

左図のような散布図が描ける状況で, 右の図をmatplotlibなどで作成する手順を紹介すること.

![test_scatter_log.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228921/5573d7c0-25b5-fdcc-3d02-b6a008f66419.png)![test_log.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228921/496df1e4-9889-5f67-609c-c536c9941e31.png)

右図では5%, 95%percentileをerrorbarにして描画した. また, 挿入式における対数の底は10である. fittingは$x>10$の領域で行った. 

## 環境

Python 3.9
Numpy 1.20.1
Pandas 1.2.0
Matplotlib 3.3.3
scikit-learn 0.24.1

## 方法

**import**

```python
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
from sklearn.metrics import r2_score
```

**データの概形**
PandasのDataFrameで与えられているとする. 

```python
print(df.head())
```

```:output
         x         y
0  1.84734  18.54020
1  1.87387   8.96109
2  2.72002  41.01980
3  2.66678  18.63230
4  5.80852  47.13240
```

```python
#例えば10の肩に乗る指数のbin幅を 1/bins=1/10 としたいとき. 線形の場合とは異なる
bins=10
df['logxbin']=10**(round(bins*np.log10(df.x))/bins)

#errorbarをpercentileで作る場合
m=df.groupby('logxbin').quantile(q=0.5)
lower=df.groupby('logxbin').quantile(q=0.05)
upper=df.groupby('logxbin').quantile(q=0.95)

#fitting. 線形の場合とは異なる
c=np.polyfit(np.log10(df.x[df.x>10]) ,np.log10(df.y[df.x>10]),1)
l=10**(c[0]*np.log10(m.index[m.index>10])+c[1])

r2=r2_score(l,m.y[m.index>10])

print(df.head())
```

```:output
         x         y   logxbin
0  1.84734  18.54020  1.995262
1  1.87387   8.96109  1.995262
2  2.72002  41.01980  2.511886
3  2.66678  18.63230  2.511886
4  5.80852  47.13240  6.309573
```

```python
plt.rcParams['font.family'] = 'Arial' 
plt.rcParams['mathtext.fontset'] = 'stix' 
plt.rcParams['font.size'] = 15 
plt.rcParams['xtick.labelsize'] = 9 
plt.rcParams['ytick.labelsize'] = 9 
plt.rcParams['xtick.direction'] = 'in' 
plt.rcParams['ytick.direction'] = 'in' 
plt.rcParams['axes.linewidth'] = 0.7 
plt.rcParams['axes.grid'] = False 

plt.figure(figsize=(3,9/4))
plt.title('binned errorbar plot test: log', fontsize=13)
plt.xlabel('$x$')
plt.ylabel('$y$')
plt.xscale('log')
plt.yscale('log')

#errorbarの設定方法に注意. percentileを使うときこのように書く必要がある
plt.errorbar(m.index, m.y, yerr=[m.y-lower.y, upper.y-m.y], fmt='o', marker='s', mfc='#000000', mec='#000000', 
             ecolor='#2e3436', elinewidth=0.5, capsize=1.0, capthick=1.0)
plt.plot(m.index[m.index>10],l, color='#2e3436', linestyle=':', linewidth=0.7)
plt.text(2, 10**4, f'$\log(y)$={c[0]:.2f}$\log(x)$ + {c[1]:.2f}, \n$R^2$={r2:.2f}', fontsize=13)
plt.savefig('test_log.pdf', transparent=True, bbox_inches='tight')
```


## 背景

[線形スケールでの場合](https://qiita.com/HajimeKoike/items/1580157feecdf7aa562d)に引き続き, 両対数スケールの散布図から横軸でbin分けして平均&標準偏差/percentileを用いて見栄えをすっきりさせる必要があった. 

## 課題点
この右図に挿入した回帰式の底は10であるが, うまくスクリプト内で指定できなかった. また, **figsizeで同じ数字を指定したにもかかわらず,以前作成したpngと異なるサイズの画像をsaveした.** plt.savefigの振る舞いを調査中である. 

## リンク

以下の2リンクで勉強しました. 有難うございます. 

[matplotlib エラーバー付きのグラフを描く] (https://qiita.com/yuto_ohno/items/d2676e04f2d94fc30248)
```plt.errorbar```の使い方と1次関数によるfittingの例があります. 

[Matplotlibで綺麗な論文用のグラフを作る
](https://qiita.com/MENDY/items/fe9b0c50383d8b2fd919)```plt.rcParams['hoge']```を使ってmatplotlibのデフォルト設定から変更を加えることで, 見栄えをよくすることができます.
Anacondaでinstallしたのにimportできない

# 内容
タイトル通りです。anacondaでinstallしたはずのpythonパッケージがimportできず、`ModuleNotFoundError: No module named 'xxx'`と怒られる、よくあるパターンです。

様々な原因で起こるようですが、あれこれ試しても上手く行かない場合で下記を試していない場合は、ぜひ試して見てください。

# 解決方法
めっちゃ簡単です。一度anacondaで自分で作った仮想環境から抜けて再度入り直してください。Linuxなら下記の通りです。

```shell
$ conda deactivate
$ conda activate hoge(自作の仮想環境)
```

なぜかわかりませんが、`conda info -e`で仮想環境の種類を表示しても、対象パッケージをinstallした環境にいるはずなんですが。よくわかりませんね...。