OmniAICreator/Qiita-1.07M huggingface dataset:
Plesk + Nginx で Reload, Restart なしにIP制限を変更する

（注意）本記事で書かれた対処法を行う場合には自己責任でお願いいたします。

# 課題

plex + nginx の運用で特定の IP アドレスを排除したい。

* Plesk + Nginx の運用を行っていて、IP アドレスでのアクセス制限（アクセス拒否）を行いたいのだが、設定ファイルを変更して restart, reload は避けたい。
* nginx からステータスコードとして 444 を返したい

# 対処法
当初は下記の [geoモジュールを使った対処法](https://www.denet.ad.jp/technology/2018/09/nginxipfilter.html) による対処を試みたがうまく行かなかった（後述）。

そこで参考文献にも載せた @semind さんの[記事](https://qiita.com/semind/items/8f968be2cfa0ce85a13e) に着想をえて、制限したい IP アドレスのファイルをあるディレクトリに配置して、その存在を確かめることで制限を行うことにした。

```conf
        if (-e /var/www/ip_blacklist/$remote_addr) {
                return 444;
        }
```
この設定を、通常 deny, allow ディレクティブを記述する場所などに書いておき、
/var/www/ip_blacklist/ いかに IP アドレス名 (xxx.xxx.xxx.xxx) の（空でよい）ファイルを置けば 444 を返すことができる。

## 注意事項
- ファイルをうっかり消してしまうと制限が消えるのでバージョン管理しておくとよい
- もしかすると、制限するIPの数を増やした場合、ファイルの数が多くなってパフォーマンスが落ちるかもしれない（相当多い場合は）。
- 一つの IP に一つのファイルなので、IPの範囲を制限するなどには向かない（検討中、いいアイデアがあれば知りたいです）。

## geo モジュールが使える場合
plesk + nginx ではディレクティブの拡張が http ディレクティブ直下にはないので、この方法は使えないようだが、IP + 変数のリストを外部ファイルに書きこんでおいて読み込むことができる（[参考文献](https://www.denet.ad.jp/technology/2018/09/nginxipfilter.html)を参照）。


## 参考文献
* [nginxでIPフィルタを設定した上で無許可IPにはステータスコードを返さない](https://www.denet.ad.jp/technology/2018/09/nginxipfilter.html)
* [Nginxでrestart, reloadをすることなくメンテナンス画面に切り替える](https://qiita.com/semind/items/8f968be2cfa0ce85a13e)

# 後記
この記事は、自身の最初の投稿記事となるもの（2020/07/04  8:38現在）であり、記事の書き方などに問題があるかもしれないが、一回でも世の中の役に立つことがあればと願う。
お名前.comで取得した独自ドメインのサブドメインだけでなくルートドメインも割り当てる

# お名前.comで取得した独自ドメインのサブドメインだけでなくルートドメインも割り当てる

## はじめに
以前「[お名前.comで取得した独自ドメインのサブドメインをAmplify Consoleで割り当てる](https://qiita.com/w2or3w/items/ddb7c4c1a602470ef96b)」という記事を書きました。

ルートドメインは利用せず、サブドメインのみいくつか設定して利用していました。
最近、その状態からルートドメインでもサイトをホストしたくなりまして、やろうとしたのですが、スムーズに事を運ぶことができませんでした。お恥ずかしいことに。
ので、備忘録としてQiitaを書きます。

前回の記事の続き、サブドメインだけ設定済みの状態からスタートです。

## ルートドメインのホストゾーンを作成する
Route53 > ホストゾーン > ホストゾーンの作成
ルートドメイン(w2or3w.work)を作成します。
![ink (31).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/2b7fa582-9d8b-8139-bb23-2b1716fb5e29.png)

## 作成したルートドメインのホストゾーンに対して、サブドメインのNSレコードセットを作成する
Route53 > ホストゾーン > 上で作成したルートドメイン(w2or3w.work) > レコードセットの作成
サブドメイン(sub.w2or3w.work)の設定をします。
名前 : sub
タイプ : NS - ネームサーバー
エイリアス値 : [以前の記事](https://qiita.com/w2or3w/items/ddb7c4c1a602470ef96b)で作成済みの、サブドメイン(sub.w2or3w.work)のNS値を設定
![ink (30).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/917ca54b-f87c-9dcb-eb35-f978b1bf4eaf.png)

## お名前.comのネームサーバー設定を変更する
お名前.com > ドメイン > ドメイン詳細
![ink (32).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/4169e19e-1a89-7186-b7b5-89a3cd7694e8.png)
現在、ドメインのネームサーバーは「お名前.com」になっていると思います。

ネームサーバーをRoute53で作成したホストゾーンのネームサーバーに変更します。
ネームサーバーの「お名前.com」リンクをクリックして設定へと進みます。
![ink (33).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/93f200cf-9b97-05d4-8344-31864144793f.png)

ドメインのネームサーバーが「その他」に変わりました。
![ink (34).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/df05ebb5-c384-78a5-9f27-ac5ece85447c.png)

## Amplify Consoleでルートドメインを割り当てる
[前回の記事のこちら](https://qiita.com/w2or3w/items/ddb7c4c1a602470ef96b#amplify-console%E3%81%A7%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E5%89%B2%E3%82%8A%E5%BD%93%E3%81%A6)を参照ください。

## お名前.comに設定していたサブドメインのDNSレコードは削除する
残ってても問題無いと思いますが、不要なので削除しましょう。
[前回の記事のこちら](https://qiita.com/w2or3w/items/ddb7c4c1a602470ef96b#%E3%81%8A%E5%90%8D%E5%89%8Dcom%E3%81%A7dns%E8%A8%AD%E5%AE%9A)で追加したサブドメインのNSレコードを削除してください。

## あとがき
サブドメインのみAWS側で利用する場合、ネームサーバーはお名前.comのままにします。
ルートドメインもAWS側で利用する場合、ネームサーバーはRoute53で作成したホストゾーンのネームサーバーを使います。

サブドメインのみAWS側で利用する場合、サブドメインのNSレコードはお名前.comのDNSレコードとして追加します。
ルートドメインもAWS側で利用する場合、サブドメインのNSレコードはRoute53に作成したルートドメインのホストゾーンに対してレコードセットを追加します。

NSレコードの浸透は以下のサイトで確認できます。
https://www.whatsmydns.net/#NS/

「あたりまえ」のことなんだろうけど、はじめてのことだと不安になり迷います。
設定が反映されてサイトが表示できるようになるまで多少のタイムラグがあることから、迅速なトライアンドエラーができず、より迷子になりやすいのではないかと思います。
「反映されるまで最大２日かかります」みたいなことが書かれていて、うまく表示できない場合にすぐに諦めて次のトライに行き辛いんですよね。

あー、辛かった。
Rのdplyrで完全一致・部分一致

# 完全一致
## ==

```r

library(dplyr)

df <- data.frame(
        x = c("hoge", "fuga", "bar"), 
        y = c("x", "y", "z")
      )

#      x y
# 1 hoge x
# 2 fuga y
# 3 bar  z

df <- df %>% filter(x=="bar")

#      x y
# 1 bar  z
```

## !=
```r

library(dplyr)

df <- data.frame(
        x = c("hoge", "fuga", "bar"), 
        y = c("x", "y", "z")
      )

#      x y
# 1 hoge x
# 2 fuga y
# 3 bar  z

df <- df %>% filter(x!="bar")

#      x y
# 1 hoge x
# 2 fuga y

```

# 部分一致 (like, not like)
## like
greplを使う

```r

library(dplyr)

df <- data.frame(
        x = c("hoge", "fuga", "bar"), 
        y = c("x", "y", "z")
      )

#      x y
# 1 hoge x
# 2 fuga y
# 3 bar  z

df <- df %>% filter(grepl("ho", x))

#      x y
# 1 hoge x
```

## not like
!をgreplの前に付けるだけ

```r

library(dplyr)

df <- data.frame(
        x = c("hoge", "fuga", "bar"), 
        y = c("x", "y", "z")
      )

#      x y
# 1 hoge x
# 2 fuga y
# 3 bar  z

df <- df %>% filter(!grepl("ho", x))

#      x y
# 1 fuga y
# 2 bar  z
```

# Tips
複数条件のものを出さないといけない場合、
例えば完全一致かつ、not like な条件抽出など
その場合、条件１つずつコマンド打ってデータフレームとして作成し
次の条件抽出で作成したデータフレームを参照すれば確実

# 終わりに
ログの解析・集計をするも重すぎてExcelがフリーズするため３年ぶりにRを触りました
色々忘れていたこともありメモとして投稿しました
時間があればRでやったログ集計方法も投稿します
【Vue.js】distファイルをNetlifyにあげてもローカル環境のように動かない。

#npm run buildした後
distファイルが生成され、そのファイルをNetlifyにアップしても、
真っ白な画面で何も開かない。(Netlifyに限らずデプロイしたとき)
画面遷移させてもこんなかんじに404エラーに。
<img width="935" alt="スクリーンショット 2020-07-04 7.43.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601820/d07e9dfe-7ffc-73e9-4410-777f6a803f3c.png">

#原因
ドメイン直下で開発していれば、問題なくできるのですが、
サブディレクトリなど別の場所で開発していると起きる現象だそうです。
なので、サブディレクトリに配置していても、パスを通るようにして上げる必要があります。

#解決方法
**package.jsonなどがある階層に**
**vue.config.js**を作成します。
そして以下のように書きます。

```vue.config.js
module.exports = {
  publicPath: './'
}
```

これによって、サブディレクトリで開発していてもパスが通ります。

少し前の記事とかだと publicPathの部分を、baseUrlにしている記事がありましたが、現在は非推奨だそうです([公式リファレンス](https://cli.vuejs.org/config/#vue-config-js))
baseUrlにしてやると、エラー(?)が出て進みませんでした。


参考サイト
[【Vue.js】CLI 3系でビルドしたファイルが表示されなかったら相対パスにしよう](https://web-guided.com/974/)
Flutterで丸アイコンを表示する

Flutterでは、プロフィール画像などでよく見られる丸アイコンを、ImageにWidgetをラップすることで、簡単に実装することができます。

Assetsに画像を追加する方法は[こちらの記事](https://qiita.com/tty_0/items/d3b6a4a0fa436ce252ca)を参考にしていただければと思います。

## ClipOvalをラップする
####コードサンプル
```dart
ClipOval(
          child: Image.asset(
            'assets/images/sample.png',
            width: 200,
            height: 200,
            fit: BoxFit.fill,
          ),
        ),
```
`ClipOval`は楕円形にするWidgetです。


## ClipRRectをラップする
####コードサンプル
```dart
ClipRRect(
          borderRadius: BorderRadius.circular(100),
          child: Image.asset(
            'assets/images/sample.png',
            width: 200,
            height: 200,
            fit: BoxFit.fill,
          ),
        ),
```
円形にする場合は、imageの半分のサイズを`borderRadius: BorderRadius.circular`に指定する必要があります。

`borderRadius`の値を変更することで、自由に角丸の大きさを変えることができます。

↓borderRadiusを50に指定した場合
<img width="375" alt="Simulator Screen Shot - iPhone 11 Pro - 2020-07-04 at 04.03.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663839/d0036b01-dd98-6822-176c-d08f902858ef.png">



## 実行結果
今回紹介したコードのどちらで実行しても、見え方は同じになります。
<img width="375" alt="Simulator Screen Shot - iPhone 11 Pro - 2020-07-04 at 03.55.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663839/ba663391-c3d3-0601-7263-082204c5aea6.png">

##公式ドキュメント
ClipOval
https://api.flutter.dev/flutter/widgets/ClipRect-class.html
ClipRRect
https://api.flutter.dev/flutter/widgets/ClipOval-class.html
Perl の DBI で EUC_JP の MariaDB のデータを読み込んだ時の文字化け

文字コードを EUC_JP としたMariaDB から下記のプログラムを実行した時に文字化けをする問題です。

Ubuntu 20.04 で実行した場合は文字化けが発生しません。
>![mojibake_aa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/728b48d9-e5d2-4da0-0331-672da813d4a1.png)

Arch Linux, RaspberryPi では文字化けします。
>![mojibake_bb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/c61b5933-75c0-a2b9-42cb-b03e77b2781c.png)


```pl:city_read.pl
#! /usr/bin/perl
#
#	city_read.pl
#
#					Jul/04/2020
#
# -----------------------------------------------------------------------
use	strict;
use	warnings;
use	DBI;
#
# -----------------------------------------------------------------------
sub get_date_mod_proc
{
	my ($mday,$mon,$year) = (localtime (time))[3..5];
	$mon += 1;
	$year += 1900;
	my $date_mod = "$year-$mon-$mday";

	return $date_mod;
}

# -----------------------------------------------------------------------
print STDERR "*** city_read.pl *** start ***\n";
my $date_mod = get_date_mod_proc();
print STDERR $date_mod . "\n";
#
my $host = 'example.com';
my $constr='DBI:mysql:database=city:host=' . $host;
my $user = '******';
my $passwd = '******';
#
my $dbi=DBI->connect($constr, $user, $passwd);

my $sql = "select distinct Name from cities";
my $sth = $dbi->prepare($sql);
$sth->execute;
my $num_rows = $sth->rows;


print "Content-Type: text/html\n\n";

print "<!DOCTYPE html>\n";
print "<html lang=\"ja\">\n";
print "<head>\n";
print "<meta http-equiv=\"CONTENT-TYPE\" content=\"text/html; charset=EUC-JP\" />\n";
print "<title>mariadb_read.pl</title>\n";
print "</head>\n";
print "<body>\n";

print "*** city_read.pl *** start ***<br />\n";
print $date_mod . "<br />\n";
print $host . "<p />\n";
print "num_rows =" . $num_rows . "<p />\n";

for (my $it=0; $it<$num_rows; $it++)
	{
	my @aa = $sth->fetchrow_array;
	my $pp = $aa[0];
	print "$pp<br />\n";
	}

print "<p />";
print "*** Jul/04/2020 ***<p />\n";
print "*** end ***<p />\n";
print "</body>\n";
print "</html>\n";
#
my $rc = $sth->finish();
$dbi->disconnect();
#
print STDERR "*** city_read.pl *** end ***\n";
# -----------------------------------------------------------------------
```

Arch と RaspberryPi で文字化けしないようにするには、connect 後に次のコードを入れます。

```pl
my $dbi=DBI->connect($constr, $user, $passwd);
$dbi->prepare("SET NAMES ujis")->execute;
```
TypeScriptでキャストする２つの方法

# TL;DR

TypeScriptのキャストは`as T`の記法と`<T>`の記法の２つがある。

# アップキャスト

extends元の基底クラスの型にキャストすることをアップキャストと呼ぶ。

```typescript:TypeScript
class A {
  a = 1;
}
class A2 extends A {
  a2 = 2;
}
var a2 = new A2;
function testA(a: A) {
  console.log(a.a); // 1を出力
}
testA(a2); // A2からAにアップキャスト
```

TypeScriptのアップキャストは明示しないでできる。

ダウンキャストは明示する必要がある。明示しないとエラーになる。

# ダウンキャスト

extends先の派生クラスの型にキャストすることをダウンキャストと呼ぶ。

```typescript:TypeScript
class A {
  a = 1;
}
class A2 extends A {
  a2 = 2;
}
var a = new A;
console.log((a as A2).a2); // as A2でダウンキャストを明示
```

undefinedを出力。

# ダウンキャストのもう1つの方法

```typescript:TypeScript
class A {
  a = 1;
}
class A2 extends A {
  a2 = 2;
}
var a = new A;
console.log((<A2>a).a2); // <A2>でダウンキャストを明示
```

undefinedを出力。

TypeScript 1.6以降、<>が曖昧なため .tsx ファイル(JSXのTypeScriptバージョン)で利用できなくなった。
ダウンキャストには as を利用することが望ましい。

# おわりに

２つの記法を見かけるので、両方とも覚えておこう。

実はTypeScriptはキャストのことを**Type Assertion（型アサーション）**と呼ぶ。

>  それが「型キャスト」と呼ばれない理由は、キャストは一般的に何らかのランタイムサポートを意味するからです。しかし、型アサーションは純粋にコンパイル時の構造体であり、コードをどのように解析するかについてのヒントをコンパイラに提供する方法です。

<br>

```javascript:JavaScript
> var a = 0;
> console.assert(a > 0, "positive number");
Assertion failed: positive number
```

アサーションの意味が違うので、JavaScriptから来た人は型アサーションがわからない。

# 参考

[Typescript: cast an object to other type. How? And instanceof or typeof? - acdcjunior’s](https://acdcjunior.github.io/typescript-cast-object-to-other-type-or-instanceof.html) 
[Basic Types · TypeScript](https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions)
[Type Assertion（型アサーション） - TypeScript Deep Dive 日本語版](https://typescript-jp.gitbook.io/deep-dive/type-system/type-assertion)
Automation Anywhere A2019.12以降でBot実行を高速化する

Automation Anywhere A2019では、WebベースのUIでBotを開発、そしてBotの実行(および開発時のデスクトップ操作)にはBot AgentというソフトウェアをローカルPCにインストールした上で実行するモデルになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/2d840058-0d07-d2d3-155b-0e286f3a122a.png)
ユーザーはWebブラウザを通してサーバーを操作して、Botの構築やサーバーの操作を行います。そして、Bot実行時には構築したBotのロジックや、使用しているアクションパッケージをオンデマンドでダウンロードします。ただし、使われているパッケージのサイズや数によっては、Bot実行前に結構な量のファイルがダウンロードされる (典型的には数十MB)ため、サーバーの場所やネットワークの状態によってはBot実行開始まで時間がかかることがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/4fbac534-a53a-8958-76f4-c15273b8b839.png)

アクションパッケージというのは、「メッセージボックスの表示」とか「文字列の操作」など、Botを構築するときに画面にあらわれる「アクション」のロジックが詰まったライブラリのことで、普段はサーバーの中に格納されています。

ちなみに、アクションパッケージは一度ダウンロードしておけば、次の実行時には同じものはダウンロードされず、ローカルキャッシュに入っているものが使われます。

[A2019.12](https://docs.automationanywhere.com/bundle/enterprise-v2019/page/enterprise-cloud/topics/release-notes/cloud-release-a2019-12.html?_LANG=jpjp)以降では、この毎回の実行時ダウンロードの頻度やサイズを抑えるために、よく使うパッケージを「あらかじめダウンロード (Preload)」しておくことができるようになったようです。製品ドキュメントの『[Preload packages](https://docs.automationanywhere.com/bundle/enterprise-v2019/page/enterprise-cloud/topics/aae-client/bot-creator/using-the-workbench/preload-packages.html)』に説明があります。

# Preload Packageメニューへのアクセス
Preloadを行うには、Control Roomで画面右上のデバイスアイコンをクリックします。Bot Agentが正常にインストールされて設定されている状態 (✅が付いた状態)の場合は、メニューの中に「Preload packages...」ボタンが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/27f8cebb-b844-1750-4a8e-92a53b5d6aa8.png)

ダイアログボックスはまだ英語なのですが、一般的なパッケージ (Common Packages)をすべて一括ダウンロードしておくか、ダウンロードするものをカスタマイズするか (Customize)を選ぶことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/98ab34e0-9529-8588-5a98-40428f9f7631.png)

選択する場合は、チェックボックスで選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/6a624990-6267-530a-8619-bf2df8de4b7b.png)

# パッケージがキャッシュされる場所
製品ドキュメントには特に記載がないのですが、実行時ダウンロードされたパッケージや構築済みBotは`C:\ProgramData\AutomationAnywhere\GlobalCache`の下に暗号化されたような名前のフォルダ名 (例: `"1nCMiqeS5ufa0CjNXMvFm56dAKZGRTDD2ogPxq1Nh8g="`) の中に格納されるようです。フォルダの中には、パッケージファイルやBotファイル (いずれも.jarファイル)が格納されており、ファイル名からなんであるかが想像できます。

たとえば「メッセージボックス」アクションを使っていると、キャッシュの中に「bot-command-messagebox-2.0.0-20191017-030449.jar」という300KBくらいのファイルがダウンロードされます。

ちなみに、このGlobalCacheフォルダーの中身ですが、いろいろなBotを実行しているとサイズが膨れてくるようで、1GB近くに達することもあるようです。ファイルの削除には管理者権限が必要となりますが、「embedded-resources」フォルダ (Browser Agentのファイルが入っている) 以外は削除しても大丈夫そうなので、サイズが気になるようでしたら削除してください。(ただし、あくまでも自己責任で...)

# Start Preloading実行後の動作
上記のダイアログボックスで「Start preloading」ボタンをクリックすると、以下のメッセージが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/bc14b983-aea6-1abe-7db0-037a4fae9281.png)

この後、バックグラウンドでアクションパッケージがダウンロードされます。ダウンロードがすべて完了するまでは、ネット環境にもよりますが、10秒くらい時間がかかります。Common Packagesをすべてダウンロードする設定だと、フォルダーが26個、その中に.jarファイルがひとつずつ含まれ、合計160MBくらいのファイルがダウンロードされるようです。
【WIP】中年ロートルエンジニア(PHPer)がモダンなJSを学習するお(^ω^)(邂逅編)

## 経緯
とあるところに、ちゅうえんのえんじにあがひとり
かれは、これまで、19ねんものながきにわって、PHP3,4,5のせかいしかしらぬ
それは、それは、とても、かなしいいきものでした。

終
制作・著作
━━━━━
ⓃⒽⓀ

転職に伴ってCSS/JS/PHP7系とか学習できる環境になったので、最短で最善の方法を自分なりにまとめてみる。

## サマリ
[素晴らしい](https://qiita.com/fujineyuri/items/7dc05612345122b9072e)
【WIP】【2020年6月】 Slackに情報集約する方法まとめ(Chatwork, Redmine, Backlog, Gmail)

## 目的
1. 色々な案件などでSlack/Chatwork/Redmine/Backlog/email等で情報が分散している。
1. それぞれを個別にみているのはめっちゃ面倒
2. なのでslackで全部集約できれば幸せになれる（ハズ）
3. プラグインなどの導入ができない場合も多いので、シンプルに連動できるのがベター
4. 手間/反映時間/反映内容/各種処理の容易さetcも調査していきたい！

### Chatwork編
1. 作業中

### Redmine編
1. 結局RSS連動が一番シンプルでした。

### Backlog編
1. Backlogは連携する機能があるんですが、管理者じゃないと有効にできない。
2. BacklogもRSS連動で対応しました。

### Gmail編
1. slackのメール転送機能を利用する
プログラミングを学習する時に気を付けるべき10の事（個人的主観/感想歓迎)

### メモ

1. なぜプログラミングをするのか？短期的/中期的/長期的な目標を明確にしよう。
2. 学習する！という意思は弱い。なぜ？学習するのか？そして何を目指すのか？願望を明確に！
2. あなたの環境は学習するのに最適な環境か？（先輩/コミュニティを探してみましたか？）
3. 悩むことは尊い。ただし、5分以上の時間を使う意味がある事はほとんどない。詰まったら聞く。
4. 今、1分で何ができるか？5分で何ができるか？細かい時間を有意義につかえるようにしよう。特に検索/調べる知識/スキルは絶対的に必要
5. あなたは1週間前の学習を覚えているか？人間は忘れる生物、[忘却曲線](https://ja.wikipedia.org/wiki/%E5%BF%98%E5%8D%B4%E6%9B%B2%E7%B7%9A)をググってみよう。
6. 定期的にオンラインのセミナーなどを受講すること。[コンパス](https://connpass.com/)などを活用。
7. 継続的にアウトプットする事。Twitterなどを活用する事で、コミュニケーション・FB・メンターを見つけることもできる。
8. 知識はハニカム構造のよう。広く深く、相互関係を意識して身につける。良本を手元に1冊。
9. 知識をスキルにする為には、実際に使ってみて、失敗してみて、工夫するステップが必要。
10. PHPを馬鹿にしない。PHPだって、いいじゃない、げんごだもの。
VirtualBoxでubuntu20.04を入れるまでの手順

#前置き
個人的なメモ
参考にしていただいてもかまいませんが、初めての設定なので責任は持ちません。

#目的
仕事でvirtualboxでUbuntu使うことになったので練習のため
C言語の勉強
なのでeclipse,gcc,とかそのあたりをUbuntu内で使えるように構築することが目的

今回はUbuntu入れるまで。他は別記事
#PC環境
ホスト
OS：windows10
メモリ：12GB
ストレージ：256GB(実際は238GB)

ゲスト(これから作る)
OS：Ubuntu20.04
メモリ：4GB
ストレージ：20GB

##1.virtualboxのダウンロード
https://www.virtualbox.org/wiki/Downloads
上記からvirtualBoxをダウンロード
ホストがWindowsなのでそれを選ぶ
初期設定は割愛（そんなに難しくない）

##2.virtualboxの設定
ツール→新規

###名前とオペレーティングシステム
名前：lesson.C
マシンフォルダー：そのまま
タイプ：Linux
バージョン：Ubuntu(64-bit)

![スクリーンショット (36).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467544/ffeb0a69-c783-f6c7-44aa-1e98792ae624.png)


###メモリーサイズ
4096MB(4GB)
初めてなので目安がよくわからなかったのでとりあえず4GB。足りなければ新しく作り直します。（後から増やせるのかな？）
![スクリーンショット (20).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467544/ca68a4a8-5c1d-8e41-7f1b-8632726b324e.png)

###ハードディスク
![スクリーンショット (26).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467544/2495fce7-d2ff-3c3d-0fbd-f5c49f30705b.png)

###ハードデイスクのファイルタイプ
詳しくは知りませんがVMDKはVMWareのファイルタイプだったりいろいろあるみたいです。
こだわりがなければVDIで。
![スクリーンショット (25).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467544/342d992d-9df0-6c8e-15f2-c900c3a4563a.png)

###物理ハードデイスクにあるストレージ
固定サイズのメリットは高速らしいですがどのくらい違うんでしょうか。ちょっと気になります。
どのくらい使うことになるかわからないのでとりあえず可変サイズでいきます。
![スクリーンショット (27).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467544/b9df2822-074a-9fc5-8208-e158be537d6a.png)

###ファイルの場所とサイズ
サイズは好きな容量
今回は20GBで。たしかこれはあとから増やせたはずです。
なんかgparedがなんとか、割り当てが面倒だった気がしますが。
ただ、Ubuntuはシステムだけで5GBくらい使うので15GB以上はあったほうがいいかもしれません。
![スクリーンショット (31).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467544/210d84d6-5087-9760-5784-9a0078caa1b6.png)

ここまででvirtualboxの設定はひとまず完了です。

##3.ubuntu-ja-20.04-desktop-amd64.isoのダウンロード
以下のサイトでisoイメージをダウンロードします。
さっきまでの設定は仮想の「PC」を作ってここからは「OS」の準備をするっていうイメージでしょうか。
https://www.ubuntulinux.jp/products/JA-Localized/download

起動を押すと起動ハードディスクを選択と出るので先ほどダウンロードした
ubuntu-ja-20.04-desktop-amd64.isoを選ぶ

##Ubuntuのインストール
ここからは大体そのままですが一応流れだけ
###ubuntuを試す/Ubuntuをインストール
Ubuntuをインストールを選ぶ
###キーボードレイアウト
Japanese
###アップデートとほかのソフトウェア
どっちでもいいのですが、今回はC言語の勉強のための環境構築なので最小インストールを選びます。
![スクリーンショット (34).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467544/3290f6c7-a983-a3d5-6a0f-d23945868596.png)
###インストールの種類
ディスクを削除してUbuntuをインストール

「ディスクに変更を書き込みますか」と表示されるので続けるを押します。

###どこに住んでますか？
日本在住ならTokyoで
###あなたの情報を入力してください
好きな名前、パスワードを入力してください。

##以上
ここまで進むとインストールが行われるはずです。
新Edgeの拡張機能の作り方 (コンテキストメニュー編)

Microsoftのブラウザ、新Edgeの拡張機能を自作します。
コンテキストメニューからWikipediaやTwitterを検索する拡張機能を作成します。

![名称未定-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70356/b7fbe488-6536-bcc3-b096-812803265fe7.png)



## マニフェストの作成

まずは任意の開発フォルダを作成します。
そしたら開発フォルダに次のような**manifest.json**を作成します。

良く分からないと思うので、コピペでOK。

```json:manifest.json
{
  "name": "Sample Extension",
  "description": "Extension Sample",
  "version": "1.0",
  "background": {
    "scripts": ["script.js"],
    "persistent": false
  },
  "permissions": ["contextMenus", "tabs"],
  "manifest_version": 2
}
```

"name"と"description"と"vertion"は変更可

## 本体の作成

開発フォルダに、次のような**script.js**を作成します。本体となるスクリプトです。
メニューを登録するコードと、メニューがクリックされた時のコードを記述します。

```js:script.js
//メニューを登録するコード
chrome.runtime.onInstalled.addListener(function(){
    chrome.contextMenus.create({
        id: "root",
        title: "拡張メニュー",
        contexts: ["all"],
        type: "normal",
    })

    chrome.contextMenus.create({
        parentId: "root",
        id: "wikipedia",
        title: "Wikipediaで開く",
        contexts: ["all"],
        type: "normal",
    })

    chrome.contextMenus.create({
        parentId: "root",
        id: "twitter",
        title: "Twitterで検索する",
        contexts: ["all"],
        type: "normal",
    })
})


//メニューがクリックされた時のコード
chrome.contextMenus.onClicked.addListener(function(event) {
    if(event.menuItemId === "wikipedia"){
        const url = "https://ja.wikipedia.org/wiki/" + event.selectionText
        chrome.tabs.create({url})
    }
    else if(event.menuItemId === "twitter"){
        const url = "https://twitter.com/search?f=realtime&src=typd&q=" + event.selectionText + "%20lang%3Aja"
        chrome.tabs.create({url})
    }
})
```

「登録コード」はツリー形式にするために、"parentId"で親のidを指定します。
「クリックされた時のコード」はメニューのidで分岐させます。


## 拡張機能を登録する

作成した拡張機能を登録するには

1. 「拡張機能」を開く (ブラウザのメニューにある)
2. 「開発者モード」をオンにする
3. 「展開して読み込み」から開発フォルダを指定する

これでインストール完了です。

## 拡張機能を更新する

本体コードを変更した時は、更新作業を行う必要があります。

拡張機能のページにインストールした自作のプログラムが表示されます。
その中にある「再読み込み」で更新できます。

![名称未定-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70356/db8641a5-b268-32b3-e567-74434fc2a234.png)

※マニュフェストを変更した時や「再読み込み」が表示されない場合は、登録からやり直してください。

## 課題

* ブラウザを起動した時に警告ダイアログが表示される
* ブラウザに表示される拡張機能のアイコンを非表示にしたい
Rails ポートフォリオ実装 - 要件定義 -

ポートフォリオ実装にあたり各工程ごとに、学習のアウトプットとして手順や詳細について記し共有させていただきますので、一つの例として参考にしていただければ幸いです。

<アウトプットする理由について>
・"わかった気になっている"を無くすため
・フィードバックを受ける機会を得るため
・得た情報を自分の中にしっかり定着させるため
・数多くの情報から本当に必要な情報を判断できるようになるため

<各工程>
1. 要件定義(仕様決め、ガントチャート作成)
2. 設計(画面設計、DB設計、URL設計、タスクばらし)
3. 実装(たくさん...)

上記のように、各工程で中身がいくつも分岐してくるため 3工程でも何記事かに分ける必要があるかと思います。ポートフォリオ作り終わる頃には合計で 10記事くらいで濃い内容をアウトプットしていく予定です。
また、実装部分については全てアウトプットする必要はないので、自身が難しい、または面白い、メモに残す必要があると判断した機能やエラーなどを記していきます。

#要件定義とは
> 要件定義は、本格的な開発工程の前段階で、要求をまとめ具体的な進め方を決めることです。システム開発では、ユーザー側の要求を実現することがゴールです。
>そのため、開発をスタートする前に、実装する機能や性能などを決めておかなければなりません。要件定義は本格的な開発工程の前段階で、具体的にどのように進めていくかを決めるために必要です。
引用：https://it-trend.jp/development_tools/article/32-0060

とのこと。
難しく書いていますが、個人ポートフォリオで要件定義として私が実施したのは、サービスにどのような機能や技術を実装、使用するかを決める「仕様決め」とすスケジュール管理をする「ガントチャートの作成」の2つだけとなります。

##仕様決め
下記のようにコンセプト〜インフラをどうするかまで詳細を決めていきます。
ついては、自身でもなかなか規模の作品になり相当苦労するだろうと認識しています。
差別化するという箇所としては 私自身、以前にセキュリティエンジニアで脆弱性診断の経験があり、脆弱性診断の自動化の組み込みは何とか実装したいと思っています。

【コンセプト】
舞台観劇を通して繋がる口コミサービス

【言語・フレームワーク】
・Ruby / RubyonRails 5
・bootstrap or vue.js

【開発環境】
ローカル(Rubymine -ver 2019-3)

【実装予定の機能】
・ログイン/ログアウト機能(devise)
・画像付き投稿機能(観た舞台(口コミ)、観たい舞台(期待度とコメント))
・投稿編集機能
・投稿一覧表示機能(ページネーション)
・同じ舞台に関する口コミをまとめて表示機能
・同じ舞台への評価の平均点表示機能
・ユーザーの口コミに対する評価の平均点表示機能
・投稿詳細表示機能(自分の投稿であれば編集可)
・投稿コメント機能
・星評価機能
・プロフィール編集機能(アイコン画像あり)
・いいね機能(非同期処理)
・フォロー機能(非同期処理)
・ダイレクトメッセージ機能
・キーワード検索機能
・都道府県絞り込み機能
・地図検索機能(google map API)
[管理機能]
・管理ユーザーログイン機能
・DBテーブルのリレーション管理
・DBトランザクション制御機能
[Rspec]
・単体テスト機能
・統合テスト機能

【インフラ】
第一段階：Heroku
第二段階：AWS
第三段階：開発環境にDockerを導入
第四段階：CircleCIを使用してCI/CDパイプラインを構築しテスト自動化
余裕があれば、脆弱性診断の自動化の組み込み
https://circleci.com/ja/integrations/devsecops/

また詳細を決め終わったら、スクールやオンラインサロンで実際のエンジニア等にポートフォリオ開発の事前レビューをしていただくことをオススメします。
理由としては、もし仕様決めの時点で何か問題があってそのまま開発を進めていくと後から修正できない事態になりかねないからです。
私は、仕様決め段階でサービスのコンセプト考案に悩み、オリジナリティのあるコンセプトを決めることができなかった点について不安があったのでその点を相談したりして、事前レビューをしていただき、これからの実装について不安点を取り除くことができました。
>--------------------------下記、レビュー内容抜粋--------------------------
「過去のご経歴の中で非常に強く感じた問題点の解決」をテーマにした方が企業さん側に響きやすいとは思いますが、そこら辺の判断は人それぞれなので、こちらのテーマでも大きな問題はないのではないかと思います。
「ポートフォリオにおいてほぼ誰でも最低限実装してきそうな一般的な機能だけ」になってしまっているので、もうちょっと印象度が強かったり実用性の高い機能があった方が企業さん側からの評価は高くなりやすいと思います。

[雑食系エンジニアサロン](https://kentakatsumata.net/archives/10)

##ガントチャート作成
私は Google スプレッドシートのテンプレートを使って直近の予定をざっくり立てました。
ポートフォリオの作成期間としては約2ヶ月半を想定してますが、転職活動をする必要があるので巻きで作業を進めていきたいところですね。
ガントチャートを作成する時点で自分が毎日どれだけ開発に時間をあてることができ、いついつまでに完成させるというを各工程の目安時間と照らし合わせながら、考えていく必要があるため意外とガントチャート作成には時間がかかりまそうです。
しっかりとしたタスク管理ツールを使った方が良いかもしれませんが、ポートフォリオのため自分が一番見やすいガントチャートにいたしました。タスク管理については個々のやり方があるかと思うので、参考までに。
https://www.google.com/intl/ja_jp/docs/about/
<img width="1371" alt="スクリーンショット 2020-07-04 2.41.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570493/cf01df63-594b-ac2b-fdbc-433b98319a62.png">

以上、要件定義についてのアウトプットといたします。
※ちなみに、要件定義は約2~3日で終わるかと思います！
iOS13 rootViewController 切替メモ

## rootViewController 切替
iOS 13 から rootViewController の持ち方が SceneDelegate に代わりました。rootViewController切り替えの例です。

## UIWindow, rootViewController の扱い
UIWindow, rootViewControllerは `SceneDelegate` で管理します。
ビューコントローラーを切り替えたい場合は、次のようにします。

```swift 
let sceneDelegate = UIApplication.shared.connectedScenes.first!.delegate as! SceneDelegate
sceneDelegate.window!.rootViewController = 新しいビューコントローラー
```

## アニメーション効果
上記だけでと一瞬で画面が切り替わってしまうので、若干のアニメーション効果をつけてみます。
UIWindow間でのaddSubviewなどもできなくなってるっぽいので、やり方の例としてこんな風な処理をおこなっています。
1.遷移元の画面を画像化し、遷移先の画面に配置
2.rootViewController を入れ替える
3.アニメーションを利用して 1.の画像を透明化して削除

まず先にUIViewを画像化する処理を作成します。

```swift
extension UIView {
    // UIVIewを画像化
    func GetImage() -> UIImage {
        // キャプチャする範囲を取得.
        let rect = self.bounds
        // ビットマップ画像のcontextを作成.
        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
        let context: CGContext = UIGraphicsGetCurrentContext()!
        // 対象のview内の描画をcontextに複写する.
        self.layer.render(in: context)
        // 現在のcontextのビットマップをUIImageとして取得.
        let capturedImage : UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        // contextを閉じる.
        UIGraphicsEndImageContext()
        return capturedImage
    }
}

```

rootViewController を切り替える処理を作成します。

```swift
extension UIViewController {
    // rootViewController を入れ替える画面遷移
    func moveTo(_ viewController: UIViewController) {
        // 元画面の画像をセット
        let imageView = UIImageView(image: self.view.GetImage())
        viewController.view.addSubview(imageView)

        // rootViewController入れ替え
        let sceneDelegate = UIApplication.shared.connectedScenes.first!.delegate as! SceneDelegate
        sceneDelegate.window!.rootViewController = viewController
        
        // 元画面の画像を削除
        UIView.animate(withDuration: 0.5, animations: {
            imageView.alpha = 0.0
        }, completion: { _ in
            imageView.removeFromSuperview()
        })
    }
}
```

`self.moveTo(遷移先のビューコントローラー)` で処理を実装できます。

<table >
<tr>
<td style="background-color: #000;">
<img width="250" alt="Simulator Screen Shot - iPhone 11 Pro - 2020-07-04 at 02.33.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266239/d79f47cc-fa2a-3cee-b5d4-8876ec301cc9.png">
</td>
<td>
<img width="250" alt="Simulator Screen Shot - iPhone 11 Pro - 2020-07-04 at 02.33.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266239/b261e1f9-5665-b907-c625-e75e33dc6e34.png">
</td>
<td>
<img width="250" alt="Simulator Screen Shot - iPhone 11 Pro - 2020-07-04 at 02.34.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266239/542ecc8e-4fc4-1a0f-7008-3d6d866e459e.png">
</td>
<td>
<img width="250" alt="Simulator Screen Shot - iPhone 11 Pro - 2020-07-04 at 02.34.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266239/7a61f859-9f0e-fefa-0ce7-954d6a08d68b.png">
</td>
</tr>
</table>
コンボボックスに表示名と値を入れる

#例
ComboBoxにおいて表示名と値を関連付ける

```c#:cmb.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace ComboBoxDispalyValue
{
    public partial class Form1 : Form
    {
        public class ItemSet{
            // DisplayMemberとValueMemberにはプロパティで指定する仕組み
            public String   ItemDisp    { get; set; }
            public int      ItemValue   { get; set; }

            // プロパティをコンストラクタでセット
            public ItemSet(int v, String s){
                ItemDisp    = s;
                ItemValue   = v;
            }
        }

        public Form1()
        {
            InitializeComponent();

            // ComboBox用データ作成 //ListでOK //IList インターフェイスまたは IListSource インターフェイスを実装する、DataSet または Array などのオブジェクト。
            List<ItemSet> src = new List<ItemSet>();
            src.Add(new ItemSet(100, "Number1"));/// 1つでItem１つ分となる
            src.Add(new ItemSet(200, "Number2"));
            src.Add(new ItemSet(300, "Number3"));

            // ComboBoxに表示と値をセット
            comboBox1.DataSource    = src;
            comboBox1.DisplayMember = "ItemDisp";
            comboBox1.ValueMember   = "ItemValue";

            // 初期値セット
            comboBox1.SelectedIndex = 0;
            comboBox1_SelectedIndexChanged(null, null);
        }

        private void comboBox1_SelectedIndexChanged(object sender, EventArgs e)
        {
            // labelに現在コンボ選択の内容を表示
            ItemSet tmp = ((ItemSet)comboBox1.SelectedItem);//表示名はキャストして取りだす
            labelDisplay.Text = tmp.ItemDisp;
            labelValue.Text   = comboBox1.SelectedValue.ToString();//値はそのまま取りだせる
        }
    }
}
```

#結果
実行すると下記の様に表示される
![20200704_Combbox_表示名と値を入れる.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667385/858857e9-0115-1ea8-0acd-5fe6003d8121.png)
ruby メソッドの定義

アウトプット用です。
rubyのメソッド定義を簡単にアウトプットしていきます。

使用法としてはシンプル　def メソッド名　
　　　　　　　　　　    　    end

例えば下記使用していないパターン

```
puts "1"
puts "2"
puts "3"
puts "4"
puts "5"
puts "6"
puts "7"
puts "8"
puts "9"
puts "10"

puts "1"
puts "2"
puts "3"
puts "4"
puts "5"
puts "6"
puts "7"
puts "8"
puts "9"
puts "10"

puts "1"
puts "2"
puts "3"
puts "4"
puts "5"
puts "6"
puts "7"
puts "8"
puts "9"
puts "10"
```

使用したパターン

```
def number_count
  puts "1"
  puts "2"
  puts "3"
  puts "4"
  puts "5"
  puts "6"
  puts "7"
  puts "8"
  puts "9"
  puts "10"
end

number_count
number_count
number_count
```

出力結果は同じです。

基本的にdef endはそのメソッドが読み込まれるまでは
飛ばされる処理になるので、そこだけ注意しておきたいところ

railsに手こずってるので抑えておきたい基本です。
サンプルページ

#サンプル
 初めての投稿となる。

##SAMPLE
```c#:test.cs
using System;
using System.IO;
 
namespace Sample
{
  class Sample
  {
    static void Main()
    {
      FileStream fs = null;
      try {
        fs = new FileStream("test.txt", FileMode.Open);
      } catch(FileNotFoundException e) {
        Console.WriteLine("ファイルが見つかりませんでした");
      }
      finally {
        if(fs != null) {
            fs.Dispose();
        }
      }
      Console.ReadKey();
    }
  }
}
```

このようになる。
ChromebookでGNOME Softwareをインストールする

# APTのリポジトリに下記を追加する

```sources.listに追加
deb http://ftp.jp.debian.org/debian buster main contrib non-free
deb http://ftp.jp.debian.org/debian buster-updates main contrib
deb http://ftp.jaist.ac.jp/debian buster main
```

追加した後に、APTのDBを更新する。

```bash
$ sudo apt update
```

GNOME Softwareを検索してみる。

```bash
$ sudo apt search gnome-software
libflatpak0 - Application deployment framework for desktop apps (library)
gnome-packagekit-session - Transitional package (gnome-packagekit-session -> gnome-software)
gnome-software - Software Center for GNOME
gnome-software-common - Software Center for GNOME (common files)
gnome-software-plugin-flatpak - Flatpak support for GNOME Software
gnome-software-plugin-limba - Limba support for GNOME Software
gnome-software-dev - Software Center for GNOME - development files
gnome-software-doc - Software Center for GNOME - documentation
gnome-software-plugin-snap - Snap support for GNOME Software
```

「gnome-software」をインストールする。

```bash
$ sudo apt install gnome-software gnome-packagekit
```

しばらく待つとインストールされる。
インストールが終わったら、

```bash
$ sudo apt update
```
を行うとパッケージデータを取り込むことが出来る。
あとは、gnome-softwareを起動すると使えるようになる。
[シリーズ]SQLを勉強しなおしてみる-Part1-

#はじめに
この記事はあくまで私が調べて知ったことをメモ代わりにまとめてるにすぎません。

あしからず。

#SQLは大学でも習ったんだがな・・・
学校の授業でもやった

だがしかし

難しかったし、割と言われてることそのままに手を動かしてただけに過ぎなかったので身になってない。

おまけに授業は外人の先生だし全編英語だし、その英語もなまってて聞き取りにくいったらありゃしねえ・・・
![asfsdfdgh](https://res.cloudinary.com/hstqcxa7w/image/fetch/c_fit,f_auto,fl_lossy,q_auto,w_450/https://manba-storage-production.s3-ap-northeast-1.amazonaws.com/clip_art/clip/11280/DETQ_53c12fd30f75a1405169619.jpg)

ここいらで基礎の基礎からやってみる。

#つまんねーこと聞くなよ！
![adsfgvbn](http://files.hangame.co.jp/blog/2011/43/1701d687/02/13/34120176/1701d687_1297524489160.jpg)

スミマセン・・・

でもわからないけど、知っておきたいんや・・・

#SQLとはなんぞいや？
データベースを作ったりするときに使う言語の名前

構造化問い合わせ言語「Structured Query Language」が正式名称((´・ω・`)知らんがな)

#そもそもデータベースとはなんぞいや？？
俗にいう表にいろいろデータがまとまってて

```sql:cyaron_list
+----+----------------+-------+---------+
| ID |     NAME       | GRADE |  UNIT   |
+----+----------------+-------+---------+
| 01 |  chika takami  |   2   | CYaRon! |
+----+----------------+-------+---------+
| 02 |  you watanabe  |   2   | CYaRon! |
+----+----------------+-------+---------+
| 01 | ruby kuerosawa |   1   | CYaRon! |
+----+----------------+-------+---------+
```
こんなかんじ

それらのデータをSQLを使ってデータを追加したり、消したり、参照したり、抽出して連結したりetc...

いろいろできるらしい

CYaRon!はいいぞ～
![cyaron](https://images-na.ssl-images-amazon.com/images/I/61%2BKSXH8B-L._AC_.jpg)
ps: CYaRon1よりかはAZALEA推しです。

#テーブル
テーブルは言ってしまえば「表」であり、上記の表のような形をしている

「行」が一件のデータ単位

```sql
| 01 |  chika takami  |   2   | CYaRon! |
```
これで一件

「列」(カラムってよく言う)がそのデータを構成する要素

上記の場合だと`ID`,`NAME`,`GRADE`,`UNIT`がカラム。

#今日はここまで
切り悪いなァ！

ネタばっかりで読みにくいとかの意見は受け付けません。

#参考
https://employment.en-japan.com/engineerhub/entry/2019/11/05/103000
https://www.oracle.com/jp/technical-resources/articles/relational-database-management-system.html
Grasshopperのプラグインをつくる①

##セットアップから

Build Eventsを変えます。
Post-build event command line を以下のよう設定します。これでビルドするたびにGrasshopperのLibrariesのフォルダーに入ります。

```
Copy "$(TargetPath)" "$(TargetDir)$(ProjectName).gha"

Copy "$(TargetPath)" "%AppData%\Grasshopper\Libraries\$(ProjectName).gha"
Erase "$(TargetPath)"
```
この状態でビルドする。こんな感じに！
![02_placenode.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425318/18079df1-f9f0-444e-3f56-73258b965a31.png)

##コンポーネントの基礎情報を入れる
```c#:myFirstComponent.cs
public LearningGHPluginsComponent()
    : base("myfirstComp", "MFC",
           "This is my first component",
           "GEL", "Tutorial")
     {
     }
```




##コンポーネントのアイコンをつける
<img width="200" alt="03_icon.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425318/afa4666d-c456-4632-c9ea-c24e48b0439f.png">


Projectを右クリックして、Propertiesへ行く。
Resourceにimageを加える。

![04_AddReference.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425318/fbc7cc19-7cf8-774f-bf29-1d61f9c48d1e.png)

```c#:myFirstComponent.cs
protected override System.Drawing.Bitmap Icon => Properties.Resources.reverse;
```

![05_icon.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425318/7aa2af2b-4f59-beea-2226-953ce9995fbb.png)
[Elixir]数字を桁毎に区切ってリスト変換

以下の問題を解いているときのことです。
[Some Sums](https://atcoder.jp/contests/abs/tasks/abc083_b)
入力された数字について全ての桁の和を求めたい。
ex:入力24に対しては6(2+4),18に対しては9(1+8)を得たい

このために
1.入力を桁毎に区切ってリストに変換
2.リストについて~~`reduce`~~ `sum`で合計値を求める
ことにしました。

1.についてシンプルにやりたいと思っていたところ
`Integer.digits(x)`というのがちょうどよかったのでメモしておきます。

```iex
iex(2)> Integer.digits(24) 
[2, 4]
iex(3)> Integer.digits(18)
[1, 8]
```
第二引数に基数を指定可能

```iex
iex(4)> Integer.digits(18,2) 
[1, 0, 0, 1, 0]
iex(5)> Integer.digits(18,8) 
[2, 2]
iex(6)> Integer.digits(18,16) 
[1, 2]
```
これを使って解答してみる

```elixir
defmodule Main do
  def some_sums(n, a, b) do
    (for x <- 1..n, a <= digit_sum(x), digit_sum(x) <= b, do: x)
    |> Enum.sum()
  end
 
  def digit_sum(x) do
    Integer.digits(x) |> Enum.sum()
  end
 
  def main do
    [n, a, b] = IO.read(:line) |> String.trim() |> String.split(" ") |> Enum.map(&String.to_integer/1)
    IO.puts some_sums(n, a, b)
  end
end
```
以下を参考にしました。
https://hexdocs.pm/elixir/Integer.html#digits/2
アルゴリズムとライブラリ

# 常に意識すること
- 触れてきた技術について、深いところまで理解しているか
    - indexを貼ると早くなります。 ⇒ なぜ？
    - 過去触れてきた概念に関して浅い理解をしている人は、今後も浅い理解で仕事をすると考える。

- 複雑な概念を理解して説明できるようにする

# アルゴリズム
## 二分探索木 (深さ優先探索でL以上R以下を求める)

```
# 再帰関数
# Definition for a binary tree node.
# class TreeNode:
#     def __init__(self, val=0, left=None, right=None):
#         self.val = val
#         self.left = left
#         self.right = right
class Solution:
    def rangeSumBST(self, root: TreeNode, L: int, R: int) -> int:
        valid_vals = []
        def search(root):
            if root.val >= L and root.val<=R:
                valid_vals.append(root.val)
            if root.left:
                search(root.left)
            if root.right:
                search(root.right)
        search(root)
        return sum(valid_vals)
```

# 標準ライブラリ

## 進数変換
```
# 10進数を2,8,16進数に変換する
x = 10
print(bin(x))
print(oct(x))
print(hex(x))

# 2,8,16進数を10進数に変換する
print(int('10100', 2))
print(int('24', 8))
print(int('14', 16))
```

## 大文字・小文字
```
s_org = 'pYThon proGramminG laNguAge'
s_org.upper()
# PYTHON PROGRAMMING LANGUAGE
s_org.lower()
# python programming language
```

## zipはfor文と一緒に使う
```
class Solution:
    def busyStudent(self, startTime: List[int], endTime: List[int], queryTime: int) -> int:
        cnt = 0
        for m, n in zip(startTime, endTime):
            if m <= queryTime and n >= queryTime:
                cnt += 1
        return cnt
```

## リストの昇順・降順
```
l1 = ['d', 'b', 'c', 'a']
l2 = sorted(l1)
l2 = sorted(l1, reverse=True)
print(l2) # ['d', 'c', 'b', 'a']
```

## リストが空か判定
```
a = []
if not a:
 print("リストは空です")
```

#mathライブラリ

## ceiling function (天井関数)
実数xに対してx以上の最小の整数を求める

```
from math import ceil
c = ceil(r)
```
Mac OSアップデートが原因でrails g controller ができないのを解決



#####いつも通り、`rails g controller Rooms show`でコントロールを作成しようとしたところ、このような長いエラーが出てしまいました。



`/Users/sawayu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/execjs-2.7.0/lib/execjs/runtimes.rb:58:in 'autodetect': Could not find a JavaScript runtime. See https://github.com/rails/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)`
`from/Users/sawayu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/execjs-2.7.0/lib/execjs.rb:5:in '<module:ExecJS>'
from/Users/sawayu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/execjs-2.7.0/lib/execjs.rb:4:in '<top (required)>'
from/Users/sawayu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootsnap-1.4.6/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:23:in 'require'`
`:
 :
 :`
`from -e:1:in '<main>'`

上のfromから始まる文が３０行以上出てきました。



エラーをググったところ、springをストップさせるといいみたい！

 `sawayu@sawayunoMacBook-Pro oil % spring stop`
`Spring stopped.` #ストップ確認

このように`spring stop`でspringをストップさせた後、もう一度 `rails g controller Rooms show`でコントローラー作成しようとしたらまた先ほどと同じエラー分が出てしまいました。


`Spring stopped.`の後`bin/spring status `このコマンドでspringが起動しているか確認できます。



##エラーの解決結論##
```ruby:Gemfile

gem 'mini_racer'

```

Gemfileに`gem 'mini_racer'`と入力
忘れずに`bundle install`をした後、showアクションのコントロール作成したいので
`rails g controller Rooms show`と入力。

すると
`
Running via Spring preloader in process 8112
      create  app/controllers/rooms_controller.rb
       route  get 'rooms/show'
      invoke  erb
      create    app/views/rooms
      create    app/views/rooms/show.html.erb
      invoke  test_unit
      create    test/controllers/rooms_controller_test.rb
      invoke  helper
      create    app/helpers/rooms_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/rooms.coffee
      invoke    scss
      create      app/assets/stylesheets/rooms.scss
`

無事、エラー解決できました！

####*原因は多分、MacOSによるアップデートが原因だと思います！*####
#####*MacOSアップデート以外何もしていないので！*
DockerのmariaDBにログインできずに困った話

# 目的

- Docker環境のmariaDBにログインできず困った話をまとめる。

# 実施環境

- ハードウェア環境

| 項目 | 情報 |
| --- | --- |
| OS | macOS Catalina(10.15.5) |
| ハードウェア | MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) |
| プロセッサ | 2 GHz クアッドコアIntel Core i5 |
| メモリ | 32 GB 3733 MHz LPDDR4 |
| グラフィックス | Intel Iris Plus Graphics 1536 MB |

# 前提条件

- 下記の先輩の記事と自分の記事を参考に環境を構築した。
    - [Dockerで始めるLaravel講座 - Laravel編](https://qiita.com/layzy_glp/items/579b295e8cc899aef2c4)  
    - [先輩に用意してもらったDockerFileを使用してLaravel6の環境を作成した話]()

# 困るまでの経緯

1. 下記の手順を実行してDockerにてLaravelの開発環境を構築した。
    - [先輩に用意してもらったDockerFileを使用してLaravel6の環境を作成した話]()
1. マイグレーションの結果を確認するためにMacのターミナルから下記コマンドを実行してPHPのdockerコンテナに入った。

    ```terminal
    $ docker exec -it PHPのコンテナ名 bash
    ```
1. Dockerコンテナ内で下記コマンドを実行してmariaDBにログインを試みた

    ```terminal
    $ mysql -u ログインmariaDBユーザ名 -p
    ```

# 困った現象

- 先のコマンドを実行してmariaDBにログインを試みたが下記のエラーが出力された。

    ```terminal
    >bash: mysql command not found
    ```
- アプリ側でマイグレーションをしたことがあったためこの時点で混乱してしまった。

# 解決までの経緯

1. 別のターミナルのウインドウにて下記コマンドを実行してmariaDBのコンテナに入った。

    ```terminal
    $ docker exec -it PHPのコンテナ名 bash
    ```
1. mariaDBのDockerコンテナ内で下記コマンドを実行してmariaDBにログインを試みた

    ```terminal
    $ mysql -u ログインmariaDBユーザ名 -p
    ```
1. 正常にログインすることができた。

# 何が間違えていたのか

- PHPのコンテナ内でmariaDBにログインしようとしていた。
- mariaDBはmariaDBのコンテナからでないとログインすることはできない。
【StoryBook × TypeScript × Vue.js】TS構文のVueコンポーネントをStorybookに対応づける方法

# はじめに
SrorybookにTypeScript構文のVueコンポーネントを登録する方法が分からずつまったため備忘録として残す。

Storybookはそのままの状態だとVueコンポーネントのTypeScript構文に対応できない。そこで、webpack.config.jsに設定を加えることで対応できるようにする。

## 目次
1. 開発環境・使用ツールについて
2. StoryBook for Vue.jsの導入方法
3. StoryBookをTypeScript記述に対応させる方法

# 1.開発環境・使用ツールについて
1. 環境構築
   * Mac
2. 使用ツール
   * VueCLI

# 2.StoryBook for Vue.jsの導入方法
#### 1. VueCLIでVueプロジェクトを作成
ここではプロジェクトの作成方法については割愛する。

#### 2. Srcと同じディレクトリに.storybookディレクトリを作成

#### 3. .storybookディレクトリにconfig.jsを作成
#### 4. index.jsに以下の記述を行う


```javascript:config.js
import { configure } from '@storybook/vue'

import Vue from 'vue'

function loadStories() {
  require('../src/stories/index.stories.ts')
}

configure(loadStories, module)
```
#### 5. src/components配下にディレクトリを作成、コンポーネントを一つ用意する
今回はTypeScript構文で記述する。

#### 6. src配下にstoriesディレクトリを作成
#### 7. storiesディレクトリにindex.stories.jsを作成
#### 8. index.stories.jsに以下の記述を行う
```javascript:index.stories.js
import { storiesOf } from '@storybook/vue';

import SimpleButton from '../components/atoms/Sample.vue';

storiesOf('Atoms', module).add('Button', () => ({
  components: { Sample },
  template: `<Sample></Sample>`,
}));
```
#### 9. .storybookディレクトリにwebpack.config.jsを作成
#### 10. webpack.config.jsに以下の記述を行う
これにより、Vue.jsコンポーネント内でTypeScriptの構文が見つかると、対応するローダー(ts-loader)が働き、StorybookがTypeScriptが読み込むようになる。

```javascript:webpack.config.js
const path = require('path')

module.exports = {
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: "ts-loader",
                options: { appendTsSuffixTo: [/\.vue$/] }
            }
        ]
    }
};
```
【Apache POI】対応するExcelのバージョン

#本記事の内容
JavaでExcelを読み書きためにApache POIを使っているときに、Excelのバージョンによって対応するコンポーネントの種類が異なったり、使えないバージョンがあったので忘備録としてまとめることにしました。
（もし、間違いがあれば教えていただけると嬉しいです。）
#Apache POIとは
初めに、簡単にApache POIについて説明します。
Apache POIとは、JavaのプログラムでOfficeのファイルを読み書きできるライブラリです。
[>Apache POI公式サイト](https://poi.apache.org/index.html)
#Excelの読み書きに使うコンポーネント
Excelの読み書きを行うためのコンポーネントは3種類あり、拡張子や用途によって使用するものが異なります。

| コンポーネント|読込    |書込    |拡張子|対応バージョン              |
|:-------------:|:-----:|:------:|:---:|:--------------------------:|
| HSSF          |〇     |〇      |.xls |Excel 97-Excel 2003 (BIFF 8)|
| XSSF          |〇     |〇      |.xlsx|Excel 2003- (OOXML)         |
| SXSSF         |×      |〇      |.xlsx|Excel 2003- (OOXML)         |

HSSFやXSSFはExcelのバージョンに合わせて通常の読み書き時に使用します。
※Excel 97より前のバージョン（BIFF 5.0,7.0）では使用できないのでご注意ください。
SXSSFは読み込みはできませんが、ファイルサイズの大きいExcelを書き込む際にメモリを最適化してくれます。
（Apache POIの公式のものではありませんが、読み込み時は[Streaming Reader](https://github.com/monitorjbl/excel-streaming-reader)というライブラリが便利です。）
#おわりに
今回は簡単にApache POIが使用できるExcelのバージョンとコンポーネントについてまとめてみましたが、後日、Apache POIの使用方法についてもまとめていけたらと思います。
【Rails】validationの記述で気をつけたいところ

モデルにvalidationのコードを記述する際に、個人的に気をつけたい点を記事にしました。

#モデルにvalidatesを設定する際に、{}を使用する場合はカラム名の直後に必ずカンマを入れる！

```ruby:Post.rb
validates :user_id, {presence: true}
                  ⬆︎
　　　　　　　　　　　必ずカンマを入れる！
```
LaTeXで日本語のしおり(bookmark)を付けるのにちょっと手間取った話

　LaTeXで作成する文書に日本語のしおり(bookmark)をつけたいと思い、ネットにある情報を試したものの、すんなりとはいかなかったので、備忘録として残しておきます。

# 想定する読者
bookmarkの付け方を自分で調べたものの、なぜか自分の文書には反映されないで困っている人

# もしかして
あなたは

```tex 
\subsection{}
\subsubsection{} % 特にこっち
```
に該当する部分がbookmarkとして反映されなくて困っていますか？もしそうならばこの記事は役に立つと思います。

# 対処法1
```tex 
% tocdepthを変更してブックマークが使用可能にする
\setcounter{tocdepth}{3}
```
を追加するだけです。あら簡単。
　なぜこれが必要かというと、bookmarkは初期の設定ではsectionまたはsubsectionまでしかbookmarkに反映しないように設定されています(どちらがデフォルトかは要検証。自分の環境ではsubsectionまででしたが、sectionまでという記事もあったり...)
　```tocdepth```とは、

```tex
\tableofcontents
```
で追加される目次の深さを表しています。sectionなら1、subsectionなら2の数字です。つまり、subsubsectionまでbookmarkとして表示させたい場合、tocdepthを3に設定してあげればいいということです。
# 対処法2　
また、これ以外の方法として、```hypersetup```として

```tex
\hypersetup{
bookmarksdepth=subsubsection %\setcounter{tocdepth}{3} としない場合
}
```
とする方法もあるようです。どちらでを用いても思いますが、```\setcounter{tocdepth}{3}```の方がよく解決方法として用いられているようなので、こちらをおすすめします。
ローコード革命：日経コンピューター2020.7.23 

# なぜローコードか？
- クラウドの進化。クラウドネイティブのローコードツールが登場し、より簡単にアプリケーションを開発し、実行できるようになった。

- ビジネス部門の要求の高度化。働き方改革、コロナなど各種業務の自動化のニーズが高まっており、スクラッチ開発では、リソースが賄えなくなってきたため。



#　ローコードの種類



|種類|適応工程　　　　　　　|特徴　　　　　　　　|
|-----|------|---|
|プログラム生成型|内部設計、製造、一部のテスト工程|画面やセグメントごとの機能が独立|
|統合環境型|外部設計～一部のテストまで|アプリケーションを統一的に開発|
|プラットフォーム型|外部設計～テスト、保守運用までクラウド提供型|システムのライフサイクル管理、今後の主流になりうる可能性あり|



|種類　　　　　　　|製品　　　　　　　　|
|------|------|
|プログラム生成型|TERASOLUNA(NTT-D),SystemDirector(NEC)|
|統合環境型|GeneXus(ウルグアイ),WebPerfomrer(キャノンIT),Wagby(ジャスミンソフト)|
|プラットフォーム型|OUtrSystem,ServiceNow,PowerApps(Azure),SalesForce(Lightning System)|


# 

# 所感

- 基本的に事例紹介を見ると、社内業務システム向けの事例が多い。
- ユーザー企業の内製化が強まる可能性
- AWS:HoneyCodeに興味あり
- ローコードアプリケーションプラットフォーム（LCAP）
Parsing error: The keyword 'import' is reserved の対処方法

Eslintのエラー`Parsing error: The keyword 'import' is reserved`の対処方法です。

## 出力イメージ

```js
import XXX from "./XXX.js"
^^^^^^
// Parsing error: The keyword 'import' is reserved
```

## 対処方法

```js:.eslintrc.js
module.exports = {
   // ・・・
   parserOptions: {
     sourceType: "module",
     ecmaVersion: 2015,
   },
};
```
DeepRunning　～Level4.1.1～

#Level４．機械学習講座（理論と実践）
##・学習の目的
　　(1)機械学習の基本的な手法を理解し実装する。
　　　◇線形回帰
　　　◇ロジスティック回帰
　　　◇主成分分析
　　　◇Ｋ平均法など
　　(2)機械学習モデリングの流れを理解する。

##・機械学習モデリングプロセス（プロセスは深層学習でも同じ）
　　(1)問題設定　　　　　　　　　　　　：　どのような課題を機械学習に解決させるか
　　(2)データ選定　　　　　　　　　　　：　どのようなデータを使うか
　　(3)データの前処理　　　　　　　　　：　モデルに学習させられるようにデータを変換
　　(4)機械学習モデルの選定　　　　　　：　どの機械学習モデルを利用するか
　　(5)モデルの学習（パラメータ推定）　：　パラメータの決め方
　　(6)モデルの評価　　　　　　　　　　：　ハイパーパラメータの選定、モデル精度を測る
　　※必ずしも機械学習！！というわけではない。デメリットとして技術的負債が大きい。
　　　⇒運用者が開発したソリューションを理解して運用できないことがある。
　　※機械学習モデル･･･「分類」「予測」「クラスタリング」
　　　　　　　　　　　　アンサンブルで活用することが多い。

##・ルールベースモデルと機械学習モデル
　　●機械学習　･･･　コンピュータプログラムは、タスクTを性能指標Pで測定し、
　　　　　　　　　　その性能が経験Eにより改善される場合、タスクTおよび性能指標Pに
　　　　　　　　　　関して経験Eから学習すると言われている。
　　　　　　　　　　　　　　　　　　　　　　　　　　　（トム・ミッチェル　1997）

##4-1.線形回帰モデル
###4-1-1.回帰問題
　　●ある入力（離散あるいは連続値）から出力（連続値）を予測する問題。
　　　直線で予測する場合　･･･　線形回帰
　　　曲線で予測する場合　･･･　非線形回帰

###4-1-2.回帰で扱うデータ
　　(1)入力　･･･　各要素を“説明変数”または“特徴量”と呼ぶ
　　　　●m次元のベクトル（m=1の場合はスカラ）
　　(2)出力　･･･　目的変数
　　　　●ベクトルではなくスカラー値で扱う。

　　【説明変数】$\boldsymbol{x} =(x_1,x_2,･･･,x_m)^{T} \in Ｒ^m$
　　　　　　　⇒m個のエレメントが含まれている。
　　　　　　　　トランスポート(T)で横表記にしている。

　　【目的変数】$y \in R^1$
　　　　　　　⇒スカラーの実数値空間上の表記。

###4-1-3.線形回帰モデル
　　●回帰問題を解くための機械学習モデルの一つ
　　●教師あり学習　･･･　ある説明変数と目的変数の組み合わせ
　　●**入力とm次元パラメータの線形結合**を出力するモデル【定義】
　　　⇒慣例として**予測値にはハット（＾）を付ける**（正解データと区別）

　　【パラメータ】$\boldsymbol{w}=(w_1,w_2,･･･,w_m)^{T} \in Ｒ^m$
　　【線形結合】$\hat y = \boldsymbol{w}^T\boldsymbol{x}＋w_0 = \sum_{j=1}^{m}w_jx_j＋w_0$
　　　　　　　　⇒内積を考える。
　　　　　　　　　$\hat y$は予測値であることが分かるようにハットを付ける。

###4-1-4.線形結合（入力とパラメータの内積）
　　●入力ベクトルと道のパラメータの各要素を掛け算し、足し合わせたもの。
　　●入力ベクトルとの線形結合に加え、切片も足し合わせる。
　　●出力は1次元（スカラ）となる。

###4-1-5.モデルのパラメータ
　　●モデルに含まれる推定すべき未知のパラメータ
　　●正の重みをつける　･･･　特徴量の値を増加させると、予測の値が増加
　　●負の重みをつける　･･･　特徴量の値を増加させると、予測の値が減少
　　●重みが大きい　･･･　特徴量は予測に大きな影響力を持つ
　　●重みが0　　　･･･　特徴量は予測に全く影響しない

###4-1-6.線形回帰モデル
　　●説明変数が1次元の場合（m=1）　･･･　単回帰モデル
　　●データへの仮定　･･･　データは**回帰直線**に誤差が加わり観測されていると仮定

　　【モデル数式】$y = w_0＋w_1x_1＋ε$
　　　　目的変数　：y
　　　　説明変数　：$x_1$
　　　　回帰係数　：$w_1$
　　　　切片　　　：$w_0$
　　　　誤差　　　：$ε$

###4-1-7.連立方程式
　　●それぞれのデータをモデル式へ当てはめるとn個の式が導出される。
　　　⇒連立方程式で計算する。行列表現でまとめて計算する。

###4-1-8.線形回帰モデル（多次元）
　　●説明変数が多次元の場合（m>1）　･･･　線形重回帰モデル
　　●データへの仮定　･･･　データは**回帰曲面**に誤差が加わり観測されていると仮定

　　【モデル数式】$y = w_0＋w_1x_1＋w_2x_2＋ε$
　　　　目的変数　：y
　　　　説明変数　：$x_1、x_2$
　　　　回帰係数　：$w_1、w_2$
　　　　切片　　　：$w_0$
　　　　誤差　　　：$ε$

###4-1-9.データの分割とモデルの汎化性能測定
　　●データの分割
　　　【学習用データ】機械学習モデルの学習に利用するデータ
　　　【検証用データ】学習済みモデルの精度を検証するためのデータ
　
　　●なぜ分割するのか？
　　　・モデルの汎化性能（Generalization）を測定するため
　　　・未知のデータに対して精度がどのくらい高いかを測定する
　　　・学習用⇒train、検証用⇒test

　　●汎化性能
　　　学習用データと別のデータで検証し、モデルが未来のデータにどの程度FITするか。

###4-1-10.線形回帰モデルのパラメータは「最小二乗法」で推定
　　●平均二乗誤差（誤差平方和）
　　　・データとモデル出力の二乗誤差の和
　　　・パラメータのみに依存する関数
　　　　⇒データは既知の値でパラメータのみ未知

　　●最小二乗法
　　　・学習データの平均二乗誤差を最小とするパラメータを探索
　　　・最小化は、勾配が0になる点を求めれば良い

　　【回帰係数】
　　　　$\boldsymbol{w}=(X^{(train)^T}X^{(train)})^{-1}X^{(train)^T}\boldsymbol{y}^{(train)}$

　　【予測値】
　　　　$\boldsymbol{\hat y}=X(X^{(train)^T}X^{(train)})^{-1}X^{(train)^T}\boldsymbol{y}^{(train)}$