OmniAICreator/Qiita-1.07M huggingface dataset:
CORSエラーってなに？どうすれば解決するの？

# はじめに
皆さんはブラウザからAPIを実行する際に以下のようなエラーに遭遇したことはないですか？

```
Access to XMLHttpRequest at 'http://localhost:3065/user' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

これはCORSと呼ばれるポリシーによるエラーですが、自分自身も何度がこのエラーに遭遇したことはありましたが、深く理解しておらず、なんとなく解決してました。
今回は実際にCORSについて解説と解決方法について実演を交えながら記事にしていきたいと思います。

# そもそもCORSってなんなの？
ブラウザはSORS(Same-Origin Resource shareing)という仕組みを実装していて、異なるオリジン（Cross-origin）間へのリソースへのアクセスを制限しています。
なぜ、制限しているかというと、クロスサイトサージェリーなどのセキュリティ攻撃を防止するためです。
で、CORS(Cross-origin resource sharing)が何なのかというと、このSORSの制約を一部解除することで異なるオリジンへのリソースのアクセスを許可したものです。

# CORSエラーを発生させてみる
## 実験環境構築手順
今回の環境は
http://localhost:8100 （以後、Aとする）のwebページからtestというボタンをクリックすると
Aというオリジンから、　
http://localhost:8030　 （以後、Bとする）という異なるオリジンへのアクセスし、アクセスに成功するとbackendという文字列を表示させるためのものになります。

![Untitled Diagram (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308470/99a1151c-f1e0-a451-56ac-a65f6191a779.png)

- gitレポジトリをclone

```bash
$ git clone https://github.com/hgaiji/CORS-test
```

- コンテナ環境を起動

```bash
$ docker-compose up -d
```

- Aにブラウザからアクセス

以下のような画面が表示されているかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308470/e8e01e39-4518-7407-6eb4-8968123038a2.png)

- 開発者コンソールを開く

webページにアクセスしたら、開発者コンソールにアクセスして、consoleタブを開きます。

- アクセスしてみる　　

先程説明した通り、異なるオリジンへのアクセスしようとしているのでCORSエラーが発生するはずです。

では実際にA(http://localhost:8100) からB(http://localhost:8030) にアクセスしてCORSエラーが発生するか見てみます。

すると、開発者コンソールのconsoleタブに以下のようなエラーが発生し、backendという文字列が表示されていないかと思います。

```
Access to XMLHttpRequest at 'http://localhost:8030/' from origin 'http://localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```
これがCORSエラーです！

# CORSの仕組み(CORSの設定)

http://localhost:8100 から http://localhost:8070 へリクエストするときはリクエストヘッダにorigin:http://localhost:8100 が付与されます。(developerツールのheaderタブから確認できます。)


http://localhost:8070 側で、http://localhost:8100 へのアクセスを許可する場合（CORSの設定）、下記の様にレスポンスヘッダを付与するように設定します。

```
Access-Control-Allow-Origin: http://localhost:8100
```
実際に設定してみます。
app.go内に以下の設定を追加してみましょう。

```golang:app.go
// test
func test(w http.ResponseWriter, r *http.Request) {
	w.Header().Set("Content-Type", "application/json")
    w.Header().Set("Access-Control-Allow-Origin", "http://localhost:8100")
	w.Write([]byte("backend"))
}
```

こちらで、testボタンをクリックすると無事にアクセスできました。

# まとめ
- CORS
    - ブラウザのポリシーで異なるオリジンへのアクセスを許可するもの 
- CORSエラーの解決方法
    - アクセスを受ける側(サーバー側に）レスポンスヘッダにAccess-Control-Allow-Originヘッダを付与する設定を追加する
Terraform + Docker で GCP 環境を構築する

## 事前準備

- Docker が入っていて、 `docker-compose` コマンドが使えること
- Google アカウントを持っていて、GCP のコンソールが表示できること
- GCP の決済アカウントが用意されていること

## 手順

### docker-compose.yml を用意する

```yml:docker-compose.yml
version: "3.7"
services:
  tf:
    image: hashicorp/terraform:1.0.0
    container_name: "terraform"
    working_dir: /workspace
    environment:
      - TF_VAR_billing_id=$TF_VAR_billing_id
      - TF_VAR_gcp_project=$TF_VAR_gcp_project
    volumes:
      - ./terraform:/workspace:cached
      - gcloud-config:/root/.config
  gcloud:
    entrypoint: "gcloud"
    image: google/cloud-sdk:alpine
    container_name: "gcloud"
    working_dir: /workspace
    volumes:
      - ./terraform:/workspace:cached
      - gcloud-config:/root/.config
volumes:
  gcloud-config:
```

### 環境変数の設定

`TF_VAR_{}` をつけておくと、 terraform から `{}` の変数として呼び出せるようになる

```bash
export TF_VAR_billing_id=xxxxxxxxxxx
export TF_VAR_gcp_project=xxxxxxxxxxxx
```

#### TF_VAR_billing_id の取得

使いたい請求アカウントの `請求先アカウントID` を取得して使う。

![Inkedunknown_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252342/a67daaab-a147-0724-f10a-fc25f594e7c2.jpeg)

#### TF_VAR_gcp_project の取得

プロジェクト名は一度設定すると変更できないので、慎重に、かつユニークになるように決める。
ここでユニークでない値を設定すると、あとでエラーが起きるので、そうなったらもう一度ここで設定し直すようにする。

### terraform の定義ファイル作成

#### versions.tf

ここで下記のことを定義する
- terraform のバージョン
- GCP を使うこと
    - そのバーション


```tf:terraform/versions.tf
terraform {
  required_version = "1.0.0"
  required_providers {
    google = {
      source  = "hashicorp/google"
      version = "3.72.0"
    }
  }
}
```

#### main.tf

ここで、プロジェクトの作成と、リソースの作成を行う。
この通りに書くと、Cloud TTS (https://cloud.google.com/text-to-speech/?hl=ja) が作成される(有効になる)ので、別リソースを作成したい場合は適宜読み替えて適用させる。

```tf:terraform/main.tf
variable "gcp_project" {}
variable "billing_id" {}

# GCP 使いますよ
provider "google" {
  project = var.gcp_project
}

# プロジェクトの作成
resource "google_project" "gcp_project" {
  name                = var.gcp_project
  project_id          = var.gcp_project
  billing_account     = var.billing_id
  auto_create_network = false
}

# Cloud TTS の有効化
resource "google_project_service" "tts" {
  project = google_project.gcp_project.project_id
  service = "texttospeech.googleapis.com"
}
```

### コマンドを実行してリソース作成

```bash
# gcp のリソースを作成するためにログイン
$ docker-compose run --rm gcloud auth application-default login

# terraform 環境の初期化
$ docker-compose run --rm tf init

# .tf ファイルの見た目を整える
$ docker-compose run --rm tf fmt

# terraform の定義に変なところがないかチェックする
$ docker-compose run --rm tf validate

# 実行によって起こる変更を確認する
$ docker-compose run --rm tf plan

# 環境に変更を適応する
$ docker-compose run --rm tf apply
```

#### Error 409: Requested entity already exists, alreadyExists

```bash
error creating project {project_id} ({project_id}): googleapi: Error 409: Requested entity already exists, alreadyExists. If you received a 403 error, make sure you have the `roles/resourcemanager.projectCreator` permission
```

上記のようなエラーが出たら、おそらく、プロジェクト名がユニークになっていないのが問題なので、下記トラブルシュートで解決する。
https://qiita.com/tktcorporation/items/b9ca7334e415bb13ffc2

## 参考
https://yomon.hatenablog.com/entry/2020/07/14/234753
https://registry.terraform.io/providers/hashicorp/google/latest/docs
[C#] 同じTestに複数のパラメータを渡してテスト実行する

# UnitTest関連記事

https://tera1707.com/entry/2022/02/06/144447#UnitTest

# やりたいこと

1つのテストメソッドに、複数のパラメータを渡してテストをしたい。

# やりかた

`[DataTestMethod]`を使う。

```テスト対象.cs
namespace UnitTestJikken
{
    public class MyMethods
    {
        public int AddFunc(int v1, int v2)
        {
            return v1 + v2;
        }
    }
}
```

```UnitTest.cs
using Microsoft.VisualStudio.TestTools.UnitTesting;
using UnitTestJikken;

namespace UnitTestProject
{
    [TestClass]
    public class UnitTest1
    {
        [TestMethod]
        public void TestMethod1()
        {
            var mm = new MyMethods();
            var ans = mm.AddFunc(1, 3);

            Assert.AreEqual(1 + 3, ans);
        }

        [DataTestMethod]
        [DataRow(0, 0)]
        [DataRow(1, 0)]
        [DataRow(0, -1)]
        [DataRow(100, 100)]
        [DataRow(-100, -100)]
        public void DataTestMethod1(int v1, int v2)
        {
            var mm = new MyMethods();
            var ans = mm.AddFunc(v1, v2);

            Assert.AreEqual(v1 + v2, ans);
        }
    }
}
```

# メモ

UnitTest.csの中の、1個目のテストメソッドは普通のテストメソッド。
2つ目が、今回やりたかった、パラメータを渡して複数通りのテストを行えるメソッド。

# コード

https://github.com/tera1707/WPF2/tree/main/UnitTestJikken
垂れ流しinput マークダウン

###垂れ流しinput

(今回練習用なので読み飛ばしてください)

#マークダウン記法の練習
## マークダウン記法の練習2
### マークダウン記法の練習3
#### マークダウン記法の練習4


- 1
- 2
- 3
- 4
    - 5
        - 6 
            - 7
            - 8
            - 9

* a
    * b
* c
* d

バッククォート
``
 kokoni kodo
 ``
`
kokoni
kodo
`


```ts:sample.ts

console.log('バッククォート３つでコード')

```

```ts:space&#x20;sample.ts　(2)

console.log('全角スペースか　&#x20;　でファイル名にスペース')

```
ここは**太字**
ここは*イタリック*
ここは***イタリックかつ太字***
ここは~~打ち消し線~~


<details><summary>サンプルコード</summary><div>

```ts:sample.ts　(3)
console.log('<details><summary>サンプルコード</summary><div>\
```ここにコード```</div></details>')
```
</div></details>

1. 数字の後にスペースが必要
1. 数字は全て１.でも表示上はDecimal型になる
1. c


https://www.youtube.com/embed/
の後にwatch?v=...
の動画コード？を入れる
<iframe width="560" height="315" src="https://www.youtube.com/embed/skF7R7cPf0w" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


###今回の気づき
- 業務PCとキーボード配列が違うので、書こうとするとマークダウンでの記法に慣れない
- キータで記事を書いている人は、毎回マークダウンでわざわざ書いている
- ただ、記事を書いてみるとリアルタイムでプレビューも出るので、書きやすくて敷居は低い


今回初投稿ですが、業務ではアウトプットばかりしているので、
インプットをするために記事を書いていこうと思います。

ではまた。
グラフが描画できない：ConversionError: Failed to convert value(s) to axis units

# ConversionError: Failed to convert value(s) to axis units: 
seabornでグラフを描出しようとした際に、このエラーが出て困ったので解決策を備忘録的に記載しておく。
結果から言うと、描画したい変数にobjectとfloat(nan)が混在していたことが原因だった。

```
import matplotlib.pyplot as plt
import seaborn as sns

# 描画したい変数がobject型の時
# dfはデータフレーム、VARIABLEは描画したい変数、'XNA'は適当な欠損値を表す文字列
df.VARIABLE.fillna('XNA') # float型の欠損値をobject型に置換
sns.histplot(df, x=VARIABLE) # 描画
```
うまくグラフが出力できない時はデータ型を詳しく確認するべき。
[C#/C++/pinvoke] 関数ポインタを受け取る関数をpinvokeでC#から使う

# もくじ

https://tera1707.com/entry/2022/02/06/144447

# やりたいこと

関数ポインタを受け取る関数をpinvokeでC#から使うときのお作法をメモしておきたい。

# やり方

下記の流れでおこなう。

- C#の中に、関数ポインタの型に相当するdelegateを宣言する。
- それを、`[DllImport(・・`を付けたメソッド(関数)本体の宣言のところの引数で使用する。
- 使うときは、そこにメソッドなりラムダを渡してやる。

具体的には、下記のような感じ。

# サンプル

C++側はdll。
1秒おきに関数ポインタで登録した関数を呼ぶ。
登録と秒数カウント開始のための関数と、カウント停止のための関数を持っておく。

C#側はコンソールアプリ。
C++がエクスポートしてる関数をpinvokeで呼ぶ。
カウント開始のための関数を呼ぶ際、ラムダでメソッドを記述し、登録する。

```DelegateParamFunc.cpp
// VS2019 プロジェクトの設定で「プリコンパイル済みヘッダーを使用しない」にして、stdafx.hのincludeを削除する必要あり
#include <windows.h>
#include <stdio.h>
#include <thread>

#define VC_DLL_EXPORTS
#include "DelegateParamFunc.h"

// public variable
// なし

// private variable
void (*func)(int count);
std::thread th;
BOOL isStop = false;
int count = 0;

// public function

// 関数の登録とカウントの開始
void __cdecl StartCountDownAndRegisterFunction(void(*f)(int))
{
	if (f == NULL)
		return;
	func = f;

	isStop = false;

	th = std::thread([]()
		{
			while (!isStop)
			{
				Sleep(1000);
				count++;
				if (func != NULL)
					func(count);

			}
		});
}

// 関数の登録解除とカウントの停止
void __cdecl StopCountDownAndUnregisterFunction()
{
	isStop = true;
	count = 0;
	func = NULL;
	th.join();
}
```

```DelegateParamFunc.h
#pragma once
#include <Windows.h>

// エクスポートとインポートの切り替え
#ifdef VC_DLL_EXPORTS
#undef VC_DLL_EXPORTS
#define VC_DLL_EXPORTS extern "C" __declspec(dllexport)
#else
#define VC_DLL_EXPORTS extern "C" __declspec(dllimport)
#endif

// エクスポート関数のプロトタイプ宣言
VC_DLL_EXPORTS void __cdecl StartCountDownAndRegisterFunction(void(*f)(int));
VC_DLL_EXPORTS void __cdecl StopCountDownAndUnregisterFunction();
```

```Program.cs
using System;
using System.Runtime.InteropServices;

namespace PInvokeTest_deleate_CsApp
{
    class Program
    {
        static void Main(string[] args)
        {
            NativeMethods.StartCountDownAndRegisterFunction((count)=>
            {
                Console.WriteLine(count);
            });

            Console.ReadLine();

            NativeMethods.StopCountDownAndUnregisterFunction();

            Console.ReadLine();
        }
    }

    public static class NativeMethods
    {
        // 引数で渡すメソッドの型をdelegateで宣言
        public delegate void DELEGATE_PARAM_FUNC(int count); 

        // 関数本体の宣言
        [DllImport("PInvokeTest_delegate.dll", CallingConvention = CallingConvention.Cdecl)]
        public extern static void StartCountDownAndRegisterFunction(DELEGATE_PARAM_FUNC func);

        [DllImport("PInvokeTest_delegate.dll", CallingConvention = CallingConvention.Cdecl)]
        public extern static void StopCountDownAndUnregisterFunction();

    }
}

```

# こまかい話メモ

C++のプロジェクトをビルドするとき、「pch.hをインクルードしましたか？」みたいなエラーがでるので、プロジェクトの設定で「プリコンパイル済みヘッダーを使用しない」にして、stdafx.hのincludeを削除する必要あり。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/df6a4a1d-c8c8-8b86-bf54-340cb1236b07.png)

dllのPJは、できたdllをC#のPJの出力フォルダにビルド後イベントでコピーしてやらないといけない。
`copy /y $(TargetPath) $(SolutionDir)PInvokeTest_deleate_CsApp\bin\$(Platform)\$(Configuration)\`
のような感じでコピーする。

# コード

https://github.com/tera1707/WPF2/tree/main/PInvokeTest_delegate
タスクバーにダウンロードフォルダを単体でピン止めする

#ショートカットをタスクバーにピン止めする

1ダウンロードのショートカットを作成
2プロパティーを開く


```:リンク先_変更前
C:\Users\hamas\Downloads
```


```:リンク先_変更後
C:\Windows\explorer.exe C:\Users\hogehoge\Downloads
```

と変更すれば"右クリ"で「タスクバーにピン止め」が選択できる．

以上
【Python】ユーザー定義関数をライブラリのようにimportする方法

#####はじめに
別ファイルにあるユーザー定義関数をライブラリのように実行ファイルの位置等に関係なくimportすることを目的としています。
Windows環境を対象にしていますが環境変数の設定方法以外は共通かと思います。

#####参考

https://qiita.com/yokohama4580/items/466a483ae022d264c8ee

https://note.nkmk.me/python-import-module-search-path/

http://var.blog.jp/archives/81938617.html

#####作業環境
Windows10
Python-3.9.4

#####手順1
関数をまとめておくディレクトリとファイルを任意の場所に作成。ファイルに関数を書きこむ(これは後でもいい)。
以下では下記のpathにディレクトリ:mypackageとファイル:function.pyを作った例で記載します。
`C:\Users\XXX\mypackage\function.py`

```py:(例)function.py
import pickle

def pickle_dump(obj, path):
  with open(path, mode='wb') as f:
    pickle.dump(obj,f)
def pickle_load(path):
  with open(path, mode='rb') as f:
    data = pickle.load(f)
    return data
```
例の関数は私がファイルの保存と読み込みに重宝しているもので下記記事から引用しています。

https://neuryo.hatenablog.com/entry/2019/02/06/111611

#####手順2
環境変数に"PYTHONPATH"を追加しmypackageまでの絶対path`C:\Users\XXX\mypackage`を登録する。

>環境変数の設定方法(Windows10)
>コントロールパネル>システムとセキュリティ>システム>システムの詳細設定>環境変数>"username"のユーザー環境変数>新規
変数名 : PYTHONPATH
変数値 : C:\Users\XXX\mypackage (変数値は一例)

以上で設定は完了。

#####使い方
```py:function.pyのpickle_dumpを呼び出す場合
from function import pickle_dump

pickle_dump(hoge,'./hogehoge.pickle')
```

以上です。
【Rails】ActionController::RoutingError (No route matches [GET] "/favicon.ico")の対処法

<h2>症状</h2>
Railsサーバーを起動して、該当のURLにアクセスしたとき、下記エラーが発生しました。
どうやらfaviconがないと怒られているようです。

```
ActionController::RoutingError (No route matches [GET] "/favicon.ico"):

actionpack (6.0.3.7) lib/action_dispatch/middleware/debug_exceptions.rb:36:in `call'
actionpack (6.0.3.7) lib/action_dispatch/middleware/show_exceptions.rb:33:in `call'
railties (6.0.3.7) lib/rails/rack/logger.rb:37:in `call_app'
railties (6.0.3.7) lib/rails/rack/logger.rb:26:in `block in call'
activesupport (6.0.3.7) lib/active_support/tagged_logging.rb:80:in `block in tagged'
activesupport (6.0.3.7) lib/active_support/tagged_logging.rb:28:in `tagged'
activesupport (6.0.3.7) lib/active_support/tagged_logging.rb:80:in `tagged'
railties (6.0.3.7) lib/rails/rack/logger.rb:26:in `call'
actionpack (6.0.3.7) lib/action_dispatch/middleware/remote_ip.rb:81:in `call'
actionpack (6.0.3.7) lib/action_dispatch/middleware/request_id.rb:27:in `call'
rack (2.2.3) lib/rack/runtime.rb:22:in `call'
activesupport (6.0.3.7) lib/active_support/cache/strategy/local_cache_middleware.rb:29:in `call'
actionpack (6.0.3.7) lib/action_dispatch/middleware/executor.rb:14:in `call'
actionpack (6.0.3.7) lib/action_dispatch/middleware/static.rb:126:in `call'
rack (2.2.3) lib/rack/sendfile.rb:110:in `call'
actionpack (6.0.3.7) lib/action_dispatch/middleware/host_authorization.rb:82:in `call'
rack-cors (1.1.1) lib/rack/cors.rb:100:in `call'
railties (6.0.3.7) lib/rails/engine.rb:527:in `call'
puma (4.3.8) lib/puma/configuration.rb:228:in `call'
puma (4.3.8) lib/puma/server.rb:718:in `handle_request'
puma (4.3.8) lib/puma/server.rb:472:in `process_client'
puma (4.3.8) lib/puma/server.rb:328:in `block in run'
puma (4.3.8) lib/puma/thread_pool.rb:134:in `block in spawn_thread'
```

<h2>解決策</h2>
public以下に「favicon.ico」を配置すると、エラーが表示されなくなりました。


<h2>参考</h2>

https://www.it-swarm-ja.com/ja/ruby-on-rails/actioncontroller-routingerror%EF%BC%88get-faviconico%E3%81%AB%E4%B8%80%E8%87%B4%E3%81%99%E3%82%8B%E3%83%AB%E3%83%BC%E3%83%88%E3%81%AF%E3%81%82%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93%EF%BC%89rails/1072440154/
C3.js グラフを描く blindto 

```
const chart = c3.generate({
            bindto: "#chart",
        });
```
上のように　bindto:　で属する要素を指定するのが基本。同じ要素に2つ指定すると、新しい（後ろ）の方が優先され、前の方がとって変わられる。

一つ目のグラフの場合指定しなくてもOK。ただし2つ目も指定しないと1つ目が2つ目にreplaceされる。

参考文献
https://c3js.org/reference.html
【Java】複数のreplace対象文字列を一度に置換する

## 概要
Javaで文字列の置換を行うときは、`replace`や`replaceAll`を使うと思います。　replace対象が一単語であったり、正規表現でカバーできるなら問題ないのですが、これが複数の単語の場合どうでしょうか。例えば以下のようなケース。

`文字列中の「"りんご", "みかん", "ぶどう"」を全て「"apple", "orange", "grape"」に置き換える`

例えば、置き換えの対象組みをMapなどで持っておいて、for文でreplaceAllを繰り返し行えば良いと言えば良いのですが、もう少し簡潔に実装するやり方がないかと思い少し調べてみました。

## 対応方法
[こちら](https://stackoverflow.com/questions/6745154/how-to-replace-multiple-words-in-a-single-string-in-java)のStackoverflowの記事にいくつか対応案がのせられています。個人的には、commons-langのライブラリの`StringUtils.replaceEach`を使う方法が良い感じがします。
`replaceEach`はcommons-langの[ドキュメント](https://commons.apache.org/proper/commons-lang/apidocs/org/apache/commons/lang3/StringUtils.html#replaceEach-java.lang.String-java.lang.String:A-java.lang.String:A-)にある通り、置換対象と置換後の文字列を配列で設定することで、一回のメソッド実行で複数文字列の置換を実現しています。


## 実装サンプル
上記の概要に記載している果物の例を、`StringUtils.replaceEach`を使って実装した例です。実行結果は`apple|orange|grape|apple|orange|grape`になります。

```java:ReplaceEachSample.jaba
public class ReplaceEachSample {
    public static void main(String[] args) {
        String testWord = "りんご|みかん|ぶどう|りんご|みかん|ぶどう";
        String result = StringUtils.replaceEach(
                testWord,
                new String[]{"りんご", "みかん", "ぶどう"},
                new String[]{"apple", "orange", "grape"}
        );
        System.out.println(result);
    }
}
```
【VBA】VBAでマクロ作成

## はじめに

遊び程度ではありますが、VBAでマクロを組んでみたので
こちらも忘備録的な意味合いで、記述しようと思ったのでついでに記事にしてみました。


#### マクロの登録方法

検索すれば以下のような、素晴らしい情報がたくさん出てくるため、
マクロの登録方法は割愛

#### 参考
> ・[Excelでマクロ（VBA）を登録して実行する方法]
(https://ecdtejun.work/archives/2877)
> ・[Excelでマクロボタンを作成/編集/削除する方法]
(https://office-hack.com/excel/macro-button/)


---

### 赤枠生成

エビデンスや、資料作成する時に地味に役立ちます。
たったこれだけでも、塵積で効率化出来ています。


```vb
Sub Macro1()

    ActiveSheet.Shapes.AddShape(msoShapeRectangle, ActiveCell.Left, ActiveCell.Top, 300, 50).Select
    Selection.ShapeRange.Fill.Visible = msoFalse
    With Selection.ShapeRange.Line
        .Visible = msoTrue
        .ForeColor.RGB = RGB(255, 0, 0)
        .Transparency = 0
    End With
    With Selection.ShapeRange.Line
        .Visible = msoTrue
        .Weight = 3
    End With

End Sub
```

### セル位置、表示倍率統一

全シートのカーソルをA1にして、全シートの倍率を統一させるマクロ。

```vb
Sub Macro2()

   ' オブジェクト型で変数定義
   Dim s As Object
   ' エクセルのすべてのシートに対してループ処理
   For Each s In ActiveWorkbook.Sheets
       s.Activate
       ' カーソル位置設定
       ' A1以外に合わせる場合は、Rangeの引数を変更
       ActiveSheet.Range("A1").Select
       ' 倍率を設定
       ' 100%以外にしたい場合は、値を変更
       ActiveWindow.Zoom = 100
   Next s
   ' 一番左側のシートを選択状態にして終了
   Sheets(1).Select
End Sub
```


## おわりに
参考になる資料や、サイトも非常に多く、
簡単に効率化できるので、今後も勉強していきたいと思いますっ
カラム名のメソッドをカスタマイズしたい

## 前提
Userモデルが存在しており、`name`というカラムがある

## 実現したいこと
* `user.name`と呼び出したときに、**特定の条件A**のときは、`name`を加工して返したい
* メソッド名はnameから変えたくない

## 結論
```ruby
class User < ActiveRecord::Base
  def name
    if A
      func(name)
    else
      self[:name]
    end
  end
end
```
or

```ruby
class User < ActiveRecord::Base
  def name
    if A
      func(name)
    else
      super
    end
  end
end
```

## エラーになるパターン
```ruby
class User
  def name
    if A
      func(name)
    else
      name 
    end
  end
end

user.name 
=> "SystemStackError: stack level too deep"
```
そりゃそうなるよね。

## 参考にした記事
https://qiita.com/Asama334/items/6fb79e4890a5118d8dee
https://qiita.com/motoakii/items/f4da20611d1536a5ef9a
FlutterのChipをいい感じの大きさに調整する

# やりたいこと

FlutterのChipを使用していたが、余白が多すぎて使いづらい。。。

上下になんかmargin設定されてるし、内部paddingも多すぎない？
Chipなんていっぱい並べたいのに、こんなんじゃ場所取りすぎる!!

```Dart
Chip(
  backgroundColor: Colors.green[50],
  label: Text(tag,
    style: TextStyle(
      fontSize: 11,
      color: Colors.green[800],
      fontWeight: FontWeight.bold
    )
  ),
)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658979/b4c6ac9c-cc95-162f-0655-708da936b89c.png)

# 結論
以下のように設定したらいい感じになった。

```Dart
Chip(
  backgroundColor: Colors.green[50],
  label: Text(tag,
    style: TextStyle(
      fontSize: 11,
      color: Colors.green[800],
      fontWeight: FontWeight.bold
    )
  ),
  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, // 追加：上下の余計なmarginを削除
  labelPadding: EdgeInsets.symmetric(horizontal: 1), // 追加：文字左右の多すぎるpaddingを調整
  visualDensity: VisualDensity(horizontal: 0.0, vertical: -4), // 追加：文字上下の多すぎるpaddingを調整
)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658979/75630e9e-8600-a051-8f99-7ac5837629d2.png)

visualDensityを設定する事に気づけず、結構悩んだので備忘。
MacOS Catalina からMac big sur への更新

表題の件、私は長い間ソフトウェアアップデートをしたいのにも関わらず、「Mac Os big sur インストーラーが壊れていてインストールできません」との表示が毎回あり、悩まされてきました。
今回、まだそのようなことに陥っている方がいる場合、この記事を見て少しでも役に立てればと思い記載致します。
※ただし、個人差があると思いますので、以下手順を実行してPCに不具合が起きたとしても、一切の責任は負わないものとします。

#1.更新手順
###1.Timelineで現存のデータをバックアップ(SSDまたは別途HDDをご用意ください）
###2.再起動(またはシャットダウンからの起動)で起動時に「command + R」ボタンを押して復旧システム画面へ→この時Passwordが求められる可能性があるので、ログインする際のPasswordを入力
###3.ディスクユーティリティを選択
※ロックが掛かっていて選択ができない可能性があるので、まず、マウントをとるを選択 or MacBigSurを再インストールを選択してロックを解除する
###4.「Macintosh HD Data」を選択
※他の方のブログを参照すると参照するとMacintosh HD　Dataを消去すると動かなくなると記載ありますが、（自分も体験したことがないのでわかりませんが）恐らく復旧モードでない時に実施するとそのようなエラーが出るのだと推測します
###5.削除/消去を選択し、ボリュームグループ削除/消去を選択
※ここでMacintosh HDも一緒に消えてしまった場合、画面上側にある「＋」ボタン（ボリューム追加）を選択し、適当な名前をつける
###6.5まで終了したら最初の画面に戻り、MacBigSur再インストールを選択して、インストールする対象ディスクを選択する
###7.インストールが終了したら諸々の初期設定があり、その後、バックアップデータを再現するかが問われるので、必要があれば実施する

#2.感想
このような悩みを抱えている方も少なからずいると思いますので、その方達の何らかのきっかけになれば幸いです。
上記記載でも述べているようにデータの扱いには充分に気をつけて実施するようにお願いいたします。

#3.参照サイト
https://blog.skeg.jp/archives/2020/01/catalina-clean-install.html
https://apple-pi.net/tips-macos-catalina-clean-install/
【Ruby】hoge = piyo = ‘fuga’ の意味 

参画中のプロジェクトのソースコードを読んでいるときに、以下のような記述があった。

```ruby
hoge = piyo = 'fuga'
```

## 試してみる
```shell
[1] pry(main)> hoge = piyo = 'fuga'
=> "fuga"
[2] pry(main)> hoge
=> "fuga"
[3] pry(main)> piyo
=> "fuga"
```

## 解説
~~**多重代入**という。~~２つ以上の変数に同じ値を代入できるようだ。

```ruby
hoge = piyo = 'fuga'
```
したがって、上記式の意味は
**変数hoge と 変数piyo に 文字列‘fuga’ を代入する** 
となる。

ただし、特別な理由がなければ使わないほうが良さそう。
Expo-WebでWebviewが表示されない対処法

#はじめに
Expoには実機やシュミレータを使わずにブラウザーで確認できる機能(React Native for Webが最初から使える)があるが、スマホでウェブサイトを表示するwebviewは使えなかった。
確かにブラウザでwebviewを使うって何か変ではあるが、、、
公式にもWebは使えないって書いてあった。
![スクリーンショット 2021-06-17 17.36.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1024162/8516a233-89dd-28c7-30d0-a128283ed2bc.png)
その対処法が意外にも簡単だったので共有します。

#対処法
結論から言うと、iframeタグを使用します。
個人的にはそのタグ使えるの？？って感じでしたが、無事使えました。
以下がサンプルコードです。

```react:App.js
import React from "react";
import { StyleSheet, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <iframe src="https://en.m.wikipedia.org" style={styles} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});


```
【Php】validationについて-2

# 初めに
phpのvalidationについて学習した内容のoutput用記事です。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。

前回の記事:
https://qiita.com/redrabbit1104/items/a6e57aa1fd1771ef90ff
https://qiita.com/redrabbit1104/items/a3eaf2bba51fac0b3c51
https://qiita.com/redrabbit1104/items/6e9c85c7503ed9043f38

# 文字数のvalidation
名前の入力フォームから入力された文字数に制限を掛けます。
入力される文字列は日本語であり、バイト数は1文字あたり２バイトになります。このように1文字のバイト数が２バイト以上の文字をマルチバイト文字（multibyte character）と言います。

# mb_strlen()関数を利用する
英語の場合、文字列の長さを調べるにはstrlen()関数を利用しますが、日本語やハングルのように1文字が2バイトの場合にはmb_strlen()関数を使います。文字エンコードはデフォルト値がnullであり、省略可能です。

```php
mb_strlen(調べたい文字列, 文字エンコード)
```
前回作ったvalidation関数に入力文字数の制限をしたいので、mb_strlen関数を使って8文字を超えた場合にはエラーメッセージが出るようにします。また、8文字は1文字あたりのバイト数が２バイトなので、16に直します。

```php
function validation($filter_value)
{   //$_POST 連想配列

    $messages = [];

    if (
        empty($filter_value['input_name']) ||
        16 < mb_strlen($filter_value['input_name'])   // 追記
    ) {
        $messages[] = '16文字以下の「氏名」を入力してください。'; //修正
    }

    return $messages;
}

```

# ラジオボタンを追加
入力画面にラジオボタンの項目を追加します。フォームの入力を間違えたりして確認画面から入力画面に戻った時に、チェックした値が残るようにしたいため、phpのif文を使って\$_POST['licence']の値が空ではなく（チェック済み）かつ値が0もしくは１だった場合にチェックが入るように指定しておきます。

```php
免許
<input type="radio" name="licence" value="0" 
  <?php if (!empty($_POST['licence']) && $_POST['licence'] === '0') 
  { echo 'checked'; } ?>>あり

<input type="radio" name="licence" value="1" 
  <?php if (!empty($_POST['licence']) && $_POST['licence'] === '1') 
  { echo 'checked';} ?>>なし
```
また、完了画面に\$_POST['licence']の値が0か１かによって「あり」もしくは「なし」が表示されるように記述します。

```php
免許
<?php if ($_POST['licence'] === '0') { echo 'あり'; }
      if ($_POST['licence'] === '1') { echo 'なし'; }
?>
```
合わせて送信ボタンを押した際に、hiddenタイプで$_POST['licence']の値が渡されるように以下を追記します。

```php
<input type="hidden" name="licence" value="<?php echo sp_chars($_POST['licence']); ?>">
```
#ラジオボタンのvalidation
ラジオボタンの場合、「あり」か「なし」かどちらかの値が入っているので、empty関数ではなくisset関数を使います。 これで'licence'の値がセットされていなければ、validationが掛かりメッセージが表示されます。

```php
// 追記
if (!isset($filter_value['licence'])) {
        $messages[] = '「免許」のチェックは必須です。';}
```

# 参考サイト
https://www.php.net/manual/ja/function.mb-strlen.php
https://www.php.net/manual/ja/function.strlen.php
【Java】アクセサーメソッドを用いて、三角形の面積を取得

#作りたいもの
アクセサーメソッドを用いて、三角形の面積を取得する。
条件：底辺、高さは実行時に自分で任意の値を入力する

#ソースコード（間違ってるかも）
```TriangleArea.java
import java.util.Scanner;

public class TriangleArea{
	public static void main(String[] args) {
		@SuppressWarnings("resource")
		Scanner scan = new Scanner(System.in);
		System.out.print("底辺は？　>>　");
		double inputButtom = scan.nextDouble();
		System.out.print("高さは？　>>　");
		double inputHeight = scan.nextDouble();
		
		Triangle triangle = new Triangle();
		triangle.setButtom(inputButtom);
		triangle.setHeight(inputHeight);
		
		System.out.println("三角形の面積は「" + triangle.getTriangleArea() + "」です。");
	}
}

class Triangle{
	private double buttom;
	private double height;
	
	public double getButtom() {
		return buttom;
	}
	public void setButtom(double buttom) {
		this.buttom = buttom;
	}
	
	public double getHeight() {
		return height;
	}
	public void setHeight(double height) {
		this.height = height;
	}
	
	public double getTriangleArea() {
		return getButtom() * getHeight() / 2.0;
	}
}

```

```実行結果.
底辺は？　>>　5
高さは？　>>　5
三角形の面積は「12.5」です。
```

#最後に僕の小言
今回はアクセサーメソッドを用いて書いてみましたが、
ほんとに必要なのかはよくわかりませんｗ

参考書には、オブジェクトのフィールドには、外部から直接アクセスできないようして、値の取得も変更もメソッドを介して行うのが一般的ですみたいなことが書いてありました。

僕は独学で開発現場で仕事をしたことがないので、今はピンと来てないですが、アクセサーメソッドのメリットみたいなものが分かるようになったら、この記事に追記したいと思います。（いつになるかは不明ですがｗ）
HTML５動画：読込完了したら再生したい


# 問題

HTML動画（短尺）

- 途中から再生
- スムーズに再生、シーク

のニーズがあるたくて、読込完了してから再生したくで、その調べた方法を簡単にまとめます。

# 方法

いろんな方法がありますが、ObjectURLが一番良さそうと思っています：

① ajaxで動画のBlobをダウンロード
② BlobからObjectURLを作成
③ 作成したObjectURLを<video>に渡す

# サンプルコード

AxiosとVueを使っていますが、ロジックが通用できます。

```vue
<template>
   <div v-if="blobUrl">
    <video muted autoplay controls >
      <source  v-bind:src="blobUrl" type="video/mp4" />
    </video>
  </div>
  <div v-else>
    loading...
  </div>
</template>

<script>

...
data: function () {
  return {
    blobUrl: null,
  }
},
created() {
  axios.get(this.videoUrl), {
    responseType: 'blob',
    timeout: 100000,
  }).then(response => {
    const blob = response.data;
    this.blobUrl = URL.createObjectURL(blob);
  });
}

...
</script>
```
Cookieを使ってリダイレクトを設定する

#発端
サイトリニューアルに際し「アクセスする度に動画が表示されるのは何となく鬱陶しいのでなんとかしてください（意訳）」とのクライアントの要望でした。

（ 作った動画もったいない :frowning2: ）

#とりあえず頑張る
諸事情によりPHPは使えないので、JavaScriptで書くことに。
私はプラグインのメソッドを説明を見ながら書き換えるくらいの知識しかないので、ひとまずネットでTipsを探せども丁度良いものが見つからず。
諦めて似た動作の記事と[MDN Web Docs](https://developer.mozilla.org/ja/ "MDN Web Docs")を読み始めます。
思い描く動作を組み合わせてみるも動かなかったり、謎動作が起こったりの試行錯誤です。

#結果
要らなそうなものを省きつつ、こんな形で収まりました。

```
//Cookie取得
var checkCookie = document.cookie;

//　Cookie内に任意のクッキー名【abc】という文字列があるかないか判定。
if(checkCookie.match(‘【abc】’)){

//　2回目の訪問者への処理＝違うページへ遷移
  location.replace(‘遷移先URL’);
}
else{
//　初回訪問者への処理＝Cookieに書き込み
  document.cookie = '【abc】';
}
```


いつか同じようなところで引っかかった誰かの役に立てればと思います。
【Rails】ActiveRecord::RecordInvalid: Validation failed: Password is too shortの対処法

<h2>症状</h2>
Railsでdeviceを導入後、rails db:seedでデータを作成しようとした際に下記エラーが発生しました。
翻訳すると、「検証に失敗しました：パスワードが短すぎます」でした。

```ruby:seed.rb
3.times do |n|
    user = User.new(
      name: "testユーザー_#{n}",
      email: "email#{n}@yahoo.co.jp",
      password: "1234",
    )
end
```


<h2>解決方法</h2>
パスワードを6文字にして解決しました。

```ruby:seed.rb
3.times do |n|
    user = User.new(
      name: "testユーザー_#{n}",
      email: "email#{n}@yahoo.co.jp",
      password: "123456",
    )
end
```
【Excel】セル色での状態表現をやめるべき5つの理由

##概要
こういう管理表をやめよう、って話。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/5ed4eb0d-c1e6-9e0e-e071-a4fc356f487c.png)

##事例
歓送迎会でもやると仮定して、主賓は黄色、幹事は赤、参加は青、欠席は灰色、未回答は白…
のような、**どんな状態かをセル色で表現した管理表**を見たことがあると思う。

##やめるべき理由

###①設定が面倒
セル色の変更は、マウスで行う人が多数派だと思う。ホームタブをクリックして、塗りつぶしボタンの右の小さな▼をクリックして、**こまごまと並んだの色たちの中から目的の色をクリックする**のは、私はかなり面倒に感じる。それを何回もやるならなおさらだ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/aca6a713-ea19-fa64-d9be-9ca320ebc70f.png)

キーボードで操作する場合は、セルを選択して`Alt＞H＞H`でセル色の設定に進める。セル色の設定をするなら、絶対にキーボード操作を勧める。しかし、その次の**どの色を選択するかは、矢印キーで指定する必要**があり、それ以上は生産性が上がりにくい。

###②色にバラつきが出る
パレットから色を選択するわけだが、**どれを選択すれば他の行と同じになるかは、目視頼み**である。

冒頭の表は、実はNo.12だけ違う灰色を使っている。パッと見はわからないが、色フィルターをかけようとすると**灰色が2種類ある**ことがわかる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/bb65fac8-9199-8498-8274-4c99adaae9c6.png)

一応、既存セルを選択してセル色の設定を呼び出すと、どの色を使っているかは確認できる。ただ、結局は色を覚えるか場所を覚えるかの違いで、バラつきが出る可能性は残る。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/0c3ccb48-34bb-2879-2a2e-160c182ebbbb.png)

###③フィルター・ソートしにくい
色フィルターは、**指定した色に合致する行を表示することしかできない。**主賓だけ除外するとか、幹事と参加者だけ表示するとか、柔軟な対応ができない。

###④関数が使えない
参加者が何人いるか、**COUNTIFで数えることができない**。管理表としての基本的な目的が達成できていないと言える。

###⑤色が増えると凡例が必要
参加・欠席・未回答の3色程度までなら直感的に伝わるかもしれないが、それ以上に色が増えると、**何色がどんな状態を表しているか、凡例・対応表が必要**。

##対策
出席可否を記載する**列を新しく作る**。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/8df19596-db4c-7b2f-8353-9b5cd1fbe82e.png)

**データの入力規則**でプルダウンから選択できるようにすれば、入力の手間(①)は省ける。バラつきも出なくなる(②)し、凡例・対応表も不要(⑤)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/4d200878-d59e-ab84-0739-95b8dc9099c3.png)

文字列なので、**細かい指定でフィルターをかける**ことができる(③)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/7176f36c-ccf0-fea4-1b4c-158edf056e40.png)
例えば、参加(主賓)のように記載しておくことで、「参加」でテキストフィルターすれば主賓とか幹事とかをひっくるめた総参加者を簡単に表示できる。

**COUNTIFでの集計**も可能(④)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/2dfbcecb-1b64-7ca5-824f-e6e8f3901390.png)

どうしても色をつけたい場合は、**条件付き書式**でセル色を変えるようにする。未回答者を一目でわかるようにするとか。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/70791a73-de43-9343-cb72-c08aaff335ad.png)

##おまけ
※サンプルデータ作成に、疑似個人情報データ生成サービスが便利。
https://hogehoge.tk/personal/

https://hogehoge.tk/personal/
残プロ　第-37回　~pythonでコンソールに画像を表示する~

# さくっと画像を確認したい

普段，コマンドプロンプトやターミナルで作業してると画像の確認に手間取ります．
cv2の場合，imshowメソッドで画像の表示ができますが，それも面倒です．

そこで，今回のプログラムは，コンソールに画像をアスキーアート化したものを表示します．
処理の流れは

- 画像の読込
- グレースケール化
- リサイズ(一行に収まるように)
- 1ピクセルごとに文字へ変換
- コンソールに表示

となります．

~~~ python:ImagePrint.py
import cv2

density = list("MWN$@%#&B89EGA6mK5HRkbYT43V0JL7gpaseyxznocv?jIftr1li*=-~^`':;,. ")
LEN = len(density)

def image_print(image, wid=30):
    gray =  cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
    resized = cv2.resize(gray, (int(wid*2),int(wid)))
    for i in range(resized.shape[0]):
        s = ""
        for j in range(resized.shape[1]):
            s += density[(LEN-1)-resized[i][j]//(256//LEN)]
        print(s)


if __name__ == '__main__':
    img = cv2.imread("lenna.png")
    image_print(img, 30)
~~~

また，ANSIエスケープシーケンスを使えば動画の再生もできます．ぜひ挑戦してみてください！

# 参考文献
1. [PythonとOpenCVで画像をアスキーアート化するプログラムを作った](https://qiita.com/Pavaux/items/450ac6823e86b092cfbb)
【React】Warning: validateDOMNesting(...): <h2> cannot appear as a child of <h2>.の対処法【JavaScript】

<h2>症状</h2>
Reactでstyled-componentを使用した際に、以下、のWranが出てしまいました。
翻訳すると、「警告：validateDOMNesting（...）：< h2 >は< h2 >の子として表示できません」と翻訳されました

```
Warning: validateDOMNesting(...): <h2> cannot appear as a child of <h2>.
```

該当のソースは以下です。

```react:Hoge.jsx
import React from "react";
import styled from "styled-components";

const HogeWrapper = styled.h2`
`;

const HogeNameWrapper= styled.h2`
`;

ewport const = () => {
  const hogeName = "HogeName";

  return (
    <HogeWrapper>
      <HogeNameWrapper>{hogeName}</HogeNameWrapper>
    </HogeWrapper>
  )
}
```

<h2>解決方法</h2>
h2の外側のh2をdivにしたら、解決しました。
h2の要素な中に、h2要素を入れてしまったため、このようなエラーが出てしまったようです。

通常のタグの使用方法と同様で、styled-componentsでも文字を装飾するようなタグの中にタグを入れるのは推奨されていないようです。

```react:Hoge.jsx
import React from "react";
import styled from "styled-components";

const HogeWrapper = styled.div`
`;

const HogeNameWrapper= styled.h2`
`;

ewport const = () => {
  const hogeName = "HogeName";

  return (
    <HogeWrapper>
      <HogeNameWrapper>{hogeName}</HogeNameWrapper>
    </HogeWrapper>
  )
}
```
centos7におけるremiの書き方

```bash
# epelリポジトリのインストール
yum install -y epel-release

# remiリポジトリのインストール(centos7はrelease-7)
yum install -y https://rpms.remirepo.net/enterprise/remi-release-7.rpm

# インストール確認
ls -l /etc/yum.repos.d | egrep 'epel|remi'

# リポジトリのリストを確認
yum repolist

# 現在インストールされているphpとphpモジュールの確認
yum list installed | grep php

# 必要であれば、アンインストール(phpmyadminなどある場合は注意)
yum remove -y php*

# インストールしたいphpバージョン(php7.3)のremiリポジトリ有効化(※複数回出現のため要行指定、保存コマンド)
sed s/enabled=0/enabeld=1/ /etc/yum.repos.d/remi-php73.repo

# phpとphpモジュールをインストール
yum -y --enablerepo=epel,remi,remi-php73 install php php-{devel,mbstring,pdo,gd,xml,mcrypt}
```
超初心者が学ぶランダムフォレスト・分類回帰樹木 ④　アンサンブル学習とは

[超初心者が学ぶランダムフォレスト・分類回帰樹木 (CART法)⓪](https://qiita.com/LTtoose/items/0a355aa40d2a9cfedcf8)
[超初心者が学ぶランダムフォレスト・分類回帰樹木 (CART法)①](https://qiita.com/LTtoose/items/1653eceaee3e5f1907ea)
[超初心者が学ぶランダムフォレスト・分類回帰樹木 (CART法)②](https://qiita.com/LTtoose/items/f9ab965eb352cff52579)
[超初心者が学ぶランダムフォレスト・分類回帰樹木 (CART法)③　Rで作る回帰決定木](https://qiita.com/LTtoose/items/8d3ac23791ee6e1cb4ce)
もどうぞ

一本の決定木(Tree)の話から、複数の決定木(Forest)の話です。
ランダムフォレストに行く前に、決定木を使った機械学習手法について整理してみましょう。

##アンサンブル学習ってなに？
弱い学習器（ここではCART樹木）の結果を統合して、強力な予測を行う委員会（commitee）を構成することであり、ブースティングとブートストラップに大別されます。よく言われるのは「3人寄れば文殊の知恵」ってやつですね。ランダムフォレストはブートストラップの方に分類されます
###なんでアンサンブル学習使うの？決定木じゃだめなの？
所謂決定木というのは、一本の木しか生成していません。これまでの紹介してきたCART樹木を例にすると
・メリット：分類・回帰共に使えて説明変数のコード化が必要ない。視覚的にもわかりやすく様々な尺度の変数を使用できる。
・デメリット：学習データに依存して過学習しやすい、他の線形モデル等に対して予測精度が良くない、データセットや変数が大きいほど計算コストの増大と過学習が生じやすい

一本だけの木でモデリングしているのでそりゃ過学習も起きますよね。別の言い方をすると、小バイアス（偏り）と大バリアンス（分散）が生じます。このバイアス・バリアンスのバランスを取って汎化性能を向上させるのが機械学習の肝です。（と思ってます）
ちなみにこの辺については以下サイトで詳しく説明してありますので参考にどうぞ。
https://www.atmarkit.co.jp/ait/articles/2009/09/news025.html
https://towardsdatascience.com/decision-trees-understanding-the-basis-of-ensemble-methods-e075d5bfa704

アンサンブル学習で複数の決定木を組み合わせることで、バリアンスを減らすことができ、理想的なモデルに近づきます。この時逆にバイアスは増大し、この2つはトレードオフの関係となっております。
それぞれの決定木でモデリングのされ方が異なっているので、予測精度は向上しますし、外れ値やノイズの影響も少なくなるためモデルの頑健性(Robustness)も改善します。まさに三人寄れば文殊の知恵です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1031677/d9541fc3-9252-7754-1993-472cc22e6575.png)

##アンサンブル学習の種類
###ブースティング
一本の決定木からスタートし、そこからの結果と予測誤差を逐次に改善し、修正を重ねることで修正を重ねた標本がつくられます。
分類、回帰問題の両方に適用できます。しかし一般的に学習に時間がかかるのが欠点です。
というのも決定木$1$→決定木$2$→・・・決定木$n$と一つずつ直列的に結果の出力と修正を繰り返すのでそれを何百回と繰り返すとかなりの計算コストがかかります。
手法の例としては古典的なAdaboost、MART法勾配：勾配ブースティング(GBM)や発展的なXgboost、Light gbmなどでしょうか
###ブートストラップ
直列だったブースティングとは異なり、ブートストラップ法は並列的に、独立的に樹木を構成できます。
予測確度はブースティングに劣るといわれていますが、外れ値に対して頑健であり、計算コストも少なく済みます。
また、こちらもブースティング同様分類・回帰問題の両方において高い予測精度が得られます。
手法の例としてはBagging法やランダムフォレストが挙げられます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1031677/5a45d0f4-8e83-d21a-bf07-eff433400400.png)
イメージこんな感じです（左がブートストラップ、右がブースティング）
https://seongjuhong.com/2021-01-17pm-ensemble-bagging-and-boosting/


それぞれ特徴があるので、どちらが良いとは一概に言えないとは思います。予測精度、ノイズの多さや目的（汎化性能を求めるのか、とにかく誤差を少なくするのか、とか）によって手法を選べるように基本的なアルゴリスムは学んでおきたいですね。
次回はいよいよランダムフォレストについての記事に突入予定です。

###参考
[Rで学ぶデータサイエンス9](https://www.amazon.co.jp/%E6%A8%B9%E6%9C%A8%E6%A7%8B%E9%80%A0%E6%8E%A5%E8%BF%91%E6%B3%95-R%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%87%E3%83%BC%E3%82%BF%E3%82%B5%E3%82%A4%E3%82%A8%E3%83%B3%E3%82%B9-9-%E4%B8%8B%E5%B7%9D-%E6%95%8F%E9%9B%84/dp/4320110560)
CSV・TSVファイルをExcelで読み込む（および配慮）

こんにちは。
CSV・TSVファイルを表示・読み込む場合に、Excel は必ずしも向いているソフトウェアというわけではありません。

状況によっては、ファイルを壊す・文字化けを引き起こすので、Excel利用を避けるもしくは配慮が必要です。

#### Excelを用いる方に対する配慮

* ファイルの文字コードを、CP932 (Shift_JIS) もしくは BOM付き UTF-8[^1] へ変換しておく（非ASCII文字を含む場合）
* 全てのフィールド（列）を文字列として読み込むようお願いする
* 行数を 1,048,576 行以下に制限しておく
* 上書き保存しないようお願いする

#### テキストファイルとして表示させるソフトウェアを利用する
なお、テキストデータとして表示させるソフトウェア（ツール）を用いると安全と言えそうです。

* 例えば[QL-Win/QuickLook](https://github.com/QL-Win/QuickLook)[^2]を利用

[^1]: なお、BOM無し UTF-8 を BOM付きへ変換するには、例えば、[文字コード判定＆変換ツール.NET](http://nonsoft.la.coocan.jp/Download/NonCodeNet/index.html)、もしくは「メモ帳 (Notepad)」で読み込み保存するなどの方法があるようです。
[^2]: 参考：「[Windows10でファイルの内容を分かりやすくプレビューするなら「Quick Look」](https://4thsight.xyz/5308)」
Pythonの日付date

## dateオブジェクトの作成

datatimeモジュールのdateオブジェクトを作成します。

```python
from datetime import date

d = date(2021, 7, 8)
```

## dateクラス属性

```python
d = date(2021, 7, 8)
print(d.year)
print(d.month)
print(d.day)
```

出力：

```text
2021
7
8
```

## 日付の曜日を知る

```python
d = date(2021, 7, 8)
print(d.weekday())
```

出力：

```text
3
```

* 0=月曜日
* 1=火曜日
* ...
* 6=日曜日

## 日付の計算

### 日付の最大/最小値

```python
d1 = date(2021, 3, 9)
d2 = date(2021, 7, 8)

print(min([d1, d2]))
print(max([d1, d2]))
```

出力：

```text
2021-03-09
2021-07-08
```

### 日付の引き算

```python
d1 = date(2021, 3, 9)
d2 = date(2021, 7, 8)

print((d1 - d2).days)
print((d2 - d1).days)
```

出力：

```text
-121
121
```

### 日付の足し算

datetimeモジュールのtimedeltaクラスは、date/time/datetimeクラスの二つのインスタンス間の時間差をマイクロ秒精度で表す経過時間値です。

```python
from datetime import timedelta

d1 = date(2021, 3, 9)
td = timedelta(days=121)

print(d1 + td)
```

出力：

```text
2021-07-08
```

## dateを文字列に変換する

dateをISO 8601フォーマットの文字列に変換する場合、isoformatメソッドを使用します。
dateを自由なフォーマットに変換する場合、strftimeメソッドを使用します。

```python
from datetime import date
d = date(2021, 7, 8)

print(d.isoformat())
print(d.strftime('Date is %Y/%m/%d'))
```

出力：

```text
2021-07-08
Date is 2021/07/08
```

## 参考情報

* [datetime.date公式リファレンス（日本語）](https://docs.python.org/ja/3/library/datetime.html#datetime.date)
Flutterでいじったらエラーが出現した話

あまり覚えていません。。。


```
Automatically signing iOS for device deployment using specified development team in Xcode project: T4BX68JSYA
Running pod install...                                              1.4s
Running Xcode build...                                                  
Xcode build done.                                            9.3s
Failed to build iOS app

Error output from Xcode build:
↳
    objc[12879]: Class AMSupportURLConnectionDelegate is implemented in both ?? (0x1eb0e27a0) and ?? (0x1296d02b8). One of the two will be used. Which one is undefined.
    objc[12879]: Class AMSupportURLSession is implemented in both ?? (0x1eb0e27f0) and ?? (0x1296d0308). One of the two will be used. Which one is undefined.
    ** BUILD FAILED **


Xcode's output:
↳
    1 error generated.
    note: Using new build system
    note: Building targets in parallel
    note: Planning build
    note: Constructing build description

Could not build the precompiled application for the device.
```






やったこと



```
flutter channel master
flutter upgrade --force
```


もう一度入れるのが良さそうですね。。
Javaの基礎（条件分岐・繰り返し処理）

※場合によってはクラスとメソッドを省略しておりますが、ご了承下さい。

#真偽値

trueやfalseを出す時はboolean型がデータ型になります。
trueやfalseにダブルクォーテーションを付けると、文字列になるので注意して下さい。

```Java
boolean bool = 3 * 9 == 27;
System.out.println(bool);
```

出力結果はこちらです。

```
true
```

#論理演算子

A かつ B　　A && B
A または B  　A || B　と表す。

!は〜でないを表します。例えば、 !(x >= 30)の時はxは30以上では無いを表します。

#条件分岐

if (条件) {
  
   処理

}

これが基本公式であり、{}をブロックと呼ぶ。
条件に当てはまったらtrueで、当てはまらなかったらfalseである。

if以外を表す時はelseを用いる。
ifでも無く、elseでもない時はelse ifを用いる。

```Java
int x = 40;
if (x >= 30) {
  System.out.println("xは30以上である。");
}
else if (x > 20) {
  System.out.println("xは20より大きく、３０より小さい"）;
}
else {
  System.out.println("xは20以下");
}
```
出力結果はこちらです。

```
xは30以上である。
```

switch文　コロンとセミコロンの違いに気を付けて下さい。

switch (条件）　{
  case 値1 :
  処理;
  break;
  case 値2 :
  処理;
  break;
}

case以外の時はdefaultを使用する。

```Java
switch (rank) {
 case 1:
  System.out.println("金メダル");
  break;
 case 2:
  System.out.println("銀メダル");
  break;
 case 3:
  System.out.println("銅メダル");
  break;
 default:
  System.out.println("メダルを獲得できませんでした。");
  break;
}
```

#繰り返し処理

whileかforを使う。


while (条件) {
  (処理)
}

whileは変数の更新、条件、繰り返す処理、変数の更新を１つずつ行う。
変数の更新をしないと無限ループになってしまいます。

```Java
int number = 1;

while(number <= 5) {
 System.out.println(number);
 number ++;
}
```
出力結果はこちらです。

```
1
2
3
4
5
```

forは変数の更新、条件、繰り返す処理、変数の更新をセットで行う。

```Java
for(int i = 1; i <= 5; i ++) {
 System.out.println(i);
}
```

出力結果はこちらです。

```
1
2
3
4
5
```

繰り返し処理を終わらせる時はbreakとcontinueを使います。
breakは条件に合ったらそこで終了します。
しかし、continueは条件に合ったらそれを飛ばして、次に行きます。

#配列

配列は複数の値をセットで入れておくことができます。
それぞれの値を要素と言います。

数値の配列はint[],文字列の配列はString[]
[]の前に空白は入れないようにして下さい。

配列はインデックス番号で表示し、要素の更新の時はデータ型は記述しない。

```Java
String[] languages = {"Japanese","English","Chinese"};

System.out.println(languages[0]);
languages[0] = "Spanish";
System.out.println(languages[0]);
```
出力結果はこちらです。

```
Japanese
Spanish
```

lengthは配列の要素の数を数えることができます。
例えば、上の配列languagesだとlengthは3になります。

拡張for文 

for(データ型 変数名:　配列名) {
 繰り返す処理;
}

これを使うことで、配列の値が変数に次々と入ってきます。

```Java
String [] names = {"John","Kata","Bob"};

 for(int i = 0; i < names.length; i ++) {
  System.out.println(names[i]);
}

for(String name: names) {
  System.out.println(name);
}
```

どちらも出力結果は同じである。

#最後に

初心者ですので、拙い文章や書き方だと思いますが、最後まで見て頂き
ありがとうございました。もし、ご指摘等がございましたらよろしくお願い致します。
Railsでの検索の基本

### 基本的な検索方法
- find
DBから条件にマッチしたオブジェクトを取得する。複数のオブジェクトを取得する事が出来る。
条件にマッチするレコードが見つからない場合、ActiveRecord::RecordNotFound例外が発生する。

- first
主キー順の最初のレコードを取り出す。
引数を与えなければ、id:1が取得される。Dog.first(3)とすれば、idが1〜3のオブジェクトが取得される。

- find_by
与えられた条件にマッチするレコードのうち、最初のレコードのみを返す。
マッチするレコードがない場合、ActiveRecord

- select
特定のカラムのみを取り出したいときに使用する。
Dog.select(“name”)
のように使用する。

### 大規模なテーブルに対しての検索方法
大規模なテーブルに対して検索を行う際は、find_eachメソッドとfind_in_batchesメソッドを使用する。
find_eachメソッドとfind_in_batchesメソッドを使用すれば、メモリを圧迫しない
1回に取り出すレコード数を指定するオプション、主キーが何番目以降のレコードを取り出すかを指定するオプション等がある。

### 検索時に使用するオプション的なやつ
- distinct
重複のない一意の値のみを取り出したい時に使用する。
Dog.select(“name”).distinct

- limit
.limit(5)のように使用する。この場合は、最大で5件のみという意味になる。

- offset
.offset(30)のように使用する。この場合は、31件目のレコードから取得する事を意味する。

### where句
文字列などをwhereメソッドに引数として渡す事で、where句の役割を果たす。
Dog.where(“id = ?”, params[:id])
上記のように、paramsを用いて、値を渡す事ができる。
Dog.where(“id = #{params[:id]}”)のように直接値を渡してはいけない。悪意のある人が自由に変数を渡す事ができてしまう。

“id = ?”の部分は、「id:」のようにプレースホルダで置き換える事ができる。


Railsガイド
https://railsguides.jp/active_record_querying.html
RUBYのキ〇ガ〇地味たソースを読み解く

REDMINEとGITLABに興味があり、さらにこのアプリがRUBY製というところから、
妙にRUBY on Railsに興味が出て来た。

ましてや、django , rails, laravelなどの比較情報を見ていると、
一昔前のWEB界隈は、python, ruby ,php の戦国時代だったんだろうなあと感じさせる。

Pythonは流石に3年も触ってきたので、大体のソースは読めるようになってきた。

しかしながら、Rubyというものは、まったく理解できないコードのため
一から勉強をやり直さなければならない。

#RUBYのコード

幸いREDMINEのリポジトリにコードがあったので、少し読み解いてみた。
https://www.redmine.org/projects/redmine/repository/revisions/21061/entry/trunk/app/controllers/issues_controller.rb

いきなり、こんなコードが登場・・・

```ruby
    if @query.valid?
      respond_to do |format|
        format.html do
```

なんだこのvalidのあとの「？」は　→　二項演算子なのか？

|format|の「|」はなんだ　→　JINJA2のフィルタか？　それともマークダウンのTableか？　はたまた、数学の絶対値記号なのか？

#意気消沈

この時点で、少し先に進む自信が無くなってきた。

しかしながら、Rubyが美しいともてはやされた時代があったようだし
この程度の事で、くじけていてはいけないのだろう。。。

#これまでの苦労
AndroidのJAVAのソースを読むときも、日本語翻訳できないのかとか、
それはそれなりに苦労してきた。

```java
    void sendAccessibilityEventUncheckedInternal(AccessibilityEvent event) {
        if (!isShown()) {
            return;
        }
        onInitializeAccessibilityEvent(event);

        if ((event.getEventType() & POPULATING_ACCESSIBILITY_EVENT_TYPES) != 0) {
            dispatchPopulateAccessibilityEvent(event);
        }

        getParent().requestSendAccessibilityEvent(this, event);
    }

```

WEBLIOで翻訳（単語間をスペースで間引く）

```
空所は、フリーパスでアクセシビリティ・イベントを内在している（アクセスしやすさ試合種目）ようにします｛（！示します（））｛戻り;
        ｝
        イニシャライズ・アクセシビリティ・イベント（イベント）で;
        （（イベントはイベント・タイプ（）&住んでいるアクセスしやすさイベント・タイプを得ます）！= 0）｛
　　　　急送は、アクセシビリティ・イベント（イベント）に住みます;
        ｝
        親（）をつかまえてください。要請は、アクセシビリティにイベント（これ、イベント）を送ります;
    ｝
```

#プログラミング言語というもの

今回のRubyは、これとは全く別の次元で苦労をすることになる。

もとはと言えば、やはり英語圏でない民族にとっては、プログラミング言語が英語であるということは、
この上もない不幸な話ではないだろうか。。。

そういう意味では、RUBYを開発したMATZには、もっと日本人の魂を入れてほしかった。

これからの日本のＩＴ戦略においては、日本語言語に追従していくのが、一つの選択肢であるように思ってしまう。

https://nadesi.com/top/

（今回のポエムの最終到達点も、やはり一目置いているクジラさんに行きついてしまう・・・）
UnityのiOSアプリアイコンの準備の仕方

Unity でiOSアプリを作るときの icon の設定方法です。
これ初めて見るとなんか種類たくさんあってどうしたら・・・
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/e12130f5-a2cb-f4d1-9161-3919e6e83273.png" width=200 />
みたいになるので、手順をまとめました。
すごい簡単に言うと、大きい画像準備して、アプリに食わせて一発で出す、です。

# 手順
## 1.アイコンの準備
アイコン用の大きな画像（1024x1024）を準備します。
大きい気はしますが、いずれにせよビルドしたアプリを App Store Connect に登録するときに、
大きな画像が必要になるのでここで準備してしまいます。

## 2. 各サイズのアイコンの作り方
1. [iReka Soft](https://irekasoft.com/apps/appiconresizer) をインストール
1. Universal(iPhone + iPad)を選択して、さきほど準備した icon をドラッグ&ドロップ  
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/861d5b88-aa52-03c4-4086-d64e4bdbdec3.png" width=480 />
1. 出力先を選択することになるので、適当なところを選びます
1. Open Generate Folder を押すと出力先を開けます

## 3. Unity での設定方法
1. iReka Soft で生成した png を Unity にドラッグ&ドロップします
1. 全てクスチャを選択、Inspector の Texture Type に Editor GUI and Legacy GUI を選択して、Apply を押します。  
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/31a8050e-bd45-1071-f64f-afab6a82875c.png" witdh=480 />
1. Project Settings → Player → icon から、各サイズに合わせて設定していきます。

### 参考
* [【Unity】アプリアイコン設定の最低限必須な項目](https://deve-cat.com/unity-icon/)

# 前提
* Mac 11.4
* Unity 2020.3.2.f1
* Xcode 12.5
mdiがIE11で使用できない?

# バージョン
nuxt-buefy: 0.4.7


# 経緯
IE11でサービスを提供しているアプリケーションでBuefyのバージョンアップをする機会がありました。
長らくバージョンアップしていなかったため数多くの変更が入りました。
この変更によってこれまで表示されていたアイコンが表示されなくなってしまいました。
そもそもIE11でBuefyを使うな、という話ではありますが…
https://github.com/buefy/buefy#browser-support

# 原因
根本原因は不明ですが、CDNでとってこれなくなっているようでした。
開発者ツールのネットワークタブにて、取りに行っていないことを確認しました。

mdiはgoogleのアイコンを使用しているようでして、そのgoogle側のアイコンで
ちょこちょこIE11関連の障害が出ているようです。
https://github.com/google/material-design-icons/issues?q=is%3Aissue++IE11
今回も何か発生していて、それが関係しているのかも…？

# 対応
単純にaddしました。
無事にアイコンが復活していました。

```
yarn add @mdi/font
```

# 最後に
そもそもサポート状況はしっかり確認しないといけないですね。
また、長いことバージョンアップしていないとその分変更が大きいので
可能であればちょこちょこバージョンアップしたいです。
ドキュメントの基本

最近筋トレにハマっている、アウトソーシングテクノロジーの神谷です。
誰でもやってるような事ですが、メモ代わりに。

１．できる限りナンバリングをする

悪い例
>このシステムの以下の特徴について記載します。
>・冗長性
>・可用性
>・拡張性

良い例
>このシステムの以下の特徴について記載します。
>(1)冗長性
>(2)可用性
>(3)拡張性

大体のドキュメントというものはお客様に出すものなので、お客様レビューで「この項目の○○番目の項目が●●番目の項目と違います」と指定されるより「(3)の表現が(5)と違います」と簡潔に、間違いなく指示できるので、お互いに楽です。
項目3つぐらいならいいじゃない、と思うかもですが、システムというものは拡大していくので、すぐ20、30と増えていきます。大体、少ないからナンバリングしない、多ければナンバリングするって、それってどれぐらいの数を指します？「個人の感覚」でしかないのでは？
そんなあやふやなルールに則るぐらいなら全部ナンバリングすべきです。今時のドキュメントエディタは全部自動でナンバリング振ってくれますし。

２．表にはタイトルを付ける

表の一番上には、その列で何のパラメータを記載するのかを示すタイトルを付けましょう。
タイトルが付けられない表があったとしたら、それは実は表にすべきではなかったり「この列は何なの？」とお客さんに聞かれたときに答えられなかったりしますし、書いていて自分でもよく判らなくなってきます。
逆にレビューしてもらう時は表はタイトルだけにして「中身はあとで埋めます。まずはドキュメントの方向性を意識を統一したいです」とかいうのさえアリだと思います。それぐらいタイトルは重要です。

３．「書面レビュー」をやる

最近はスピーディな対面レビューばかりが人気ですが、対面だと基本的に口語体になってしまうため、その時に書くように指示された文章を書面に起こすと変だったりします。口頭で説明されると判るけど、書面だけ見ると実は説明が抜けている、なんて事は珍しくありません。
冷静に物事を見るなら書面レビューが必須です。
少なくともお客様に見せるようなドキュメントであれば、一度は社内の書面レビューは経るべきではないか、と自分は思います。
また、書面レビューの経験を多く積むと、大体レビューで引っかかるような事は書かなくなっていきます。経験が大事です。


最近他人のドキュメントをよく読むので、その時に思ったことを挙げてみました。
javascript 要素を複数追加→追加した要素を配列処理

Every Qiita #6
のんびり独学初学者の毎日投稿チャレンジ 6日目
今回は・・・
自作コミュニティアプリ開発にて追加した複数要素に対して、指定した単体要素を操作した時の備忘録になります。

###要素を複数追加する(今回はinput)
```javascript:index.js
const img_input = document.createElement("input");
img_input.type="text";
img_input.setAttribute("name","image[]");
```
####解説
1. createElementでinputタグを生成
1. 生成した要素は画像パスを保存するためtype="text"を付与
1. name属性を付与
  1. **name="image[]"**とすることで、複数実行した時でもname属性が上書きされずサーバー側で配列として処理することができます。

###追加した要素を指定して処理する(今回はクリックした要素を削除処理）
```javascript:index.js
const img_inputs = document.getElementsByClassName("img_input");
for (var i = 0; i<img_inputs.length; i++) {
  if(request.id == img_inputs[i].value){
    img_inputs[i].remove();
  }
}
```
####解説
1. request[^1].id（今回は追加した画像パスをidに指定しました）
1. getElementsByClassNameで追加した要素のクラスをNodeList（javascriptの配列)で取得
1. request.id == img_inputs[i].valueで指定したid(画像パス)と追加したinput要素の値が一致した時にその要素を削除しています。
[^1]: function del_img(request)→上記はこちらの関数内に記述していますので、クリックイベント関数の中にdel_img(this)で関数を呼ぶことで引数にクリックした要素を格納することができます。