OmniAICreator/Qiita-1.07M huggingface dataset:
NetlifyからCloudflare Pagesに引越しました

# はじめに
こんにちは。豆乳のバナナ味が好きです、筆者です:v:

さて今回は、**Netlify**から**Cloudflare Pages**に引越する際にしたことを記事にまとめたいと思います。
自分とまったく同じ構成にしている人は少ないと思いますが、参考になれば幸いです。

# 引越した理由
以下がすべてです！興味深い結果だったのでぜひざっと見ていただけると嬉しいです:smile:

https://qiita.com/akitkat/items/dcbe4fcaacc051753e2b

# やりたいこと
1. Gatsbyプロジェクトのホスティング先を**Netlify**から**Cloudflare Pages**に移行する.
2. **Netlify**側で設定しているカスタムドメインを**Cloudflare Pages**側でも使用する.

# 引越の内容

| 項目 | 現在 | → | 今後 |
|:--|:--|:--|:--|
| ホスティング先 | Netlify | → | Cloudflare Pages |
| プロジェクト | Gatsby | → | Gatsby |
| ビルド | GitHub Actions | → | Cloudflare Pages |
| デプロイ | GitHub Actions | → | Cloudflare Pages |
| お問い合わせ | Netlify Forms | → | Googleフォーム |
| Contentful Webhooks先 | GitHub Actions | → | GitHub Actions(検討中) |

# NetlifyからCloudflare Pagesに引越
## 1. お問い合わせページの切り替え

**Netlify Forms**で作成された**お問い合わせページ**はCloudflare Pages側で機能しなくなるGoogleフォームに切り替えます。

1. Googleフォームでお問い合わせ用のフォームを作成する。
2. **Netlify Forms**で作成したお問い合わせページをソースコードから削除する。
3. 2に向いていた各導線を1のURLに変更する。

## 2. Cloudflare PagesにGatsbyプロジェクトデプロイ
以下の記事でデプロイしました。

https://qiita.com/akitkat/items/dd224d074edfc587b8bd

## 3. Netlify側のカスタムドメインを解除
Netlify側のドメイン設定の画面から解除が可能なので解除します。

## 4. Cloudflare Pagesでカスタムドメインを設定する

以下の記事で設定しました。

https://qiita.com/akitkat/items/8aeaee639ba5f2bda141

## 5. ContentfulのWebhooksを解除

以下記事で設定したContentfulのWebhooksを解除します。

https://qiita.com/akitkat/items/3adcbafc4eeabaa6470b

今後また**GitHub Actions**使いたいのでこの設定を残しておきたいのですが、どうもWebhooksの削除しかないので、絶対に発生しないイベントに変更しました:pray:

![a](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/2fd6916d-bda8-5c38-593d-beebb62a40d6.png)

## 6. ビルドしてNetlifyへデプロイするGitHub Actionsのワークフローを無効化

以下記事で設定したGitHub Actionsのワークフローを無効化します。

https://qiita.com/akitkat/items/3adcbafc4eeabaa6470b

ボタンポチポチすればできます:ok_hand:
ワークフローのymlをまるごと削除でも大丈夫です:ok_hand:

## 7. リポジトリに設定していた不要な環境変数を削除
**GitHub Actions**でビルド時に使用していた**Contentful**や**GoogleAnalytics**などの環境変数を削除します。

## 8. プロジェクトから不要なパッケージを削除

自分は以下不要になりました:pray:

```sh
$ npm uninstall gatsby-plugin-netlify
```

**<font color="red">...長い間！！！　くそお世話になりました！！！</font>** :bow:


## 9. gatsby-config.jsから8のプラグインを外す

```js:gatsby-config.js
module.exports = {
  plugins: [
-    'gatsby-plugin-netlify',
}
```

## 10. Netlify 退会 :pray:

**<font color="red">...長い間！！！　くそお世話になりました！！！</font>** :bow:

# おわりに
結構だらだらした記事になること見越して、いくつか記事を分けております:pray:

今回のポイントは**Netlify Forms**の代替手段の用意です。
ホスティングサービスの機能を使うとほかに移動したいときに簡単には行かないケースが出てしまうことを学びました。
あんまり依存は良くないっすね :innocent:

Googleフォームはiframe埋め込みしてスタイル調整して自分のサイト内で完結する方法もありです :ok_hand:
お好みでどうぞ :+1:

それでは！
Pythonでクロスワードの答えを見つける（文字を並び替えて名詞を見つける）


#プログラムでやりたい事
クロスワードで出てきた文字を並び変えて、
名詞を見つける

例：
　並び替え前の文字列：ティアースト
　求めたい答え（名詞）：アーティスト

```python
#janomeをインポート　形態素解析(辞書を参照するため)
from janome.tokenizer import Tokenizer
#itertoolsをインポート　重複なしのあらゆる並びを取得用
import itertools

#初期化　ループに入る前に行う
t = Tokenizer()

#並び替え前の文字列をTextに代入
text = "ティアースト"

#文字列結合用の変数を初期化
str1=""

#permutationsで重複なしの数字の並びを取得
a = list(itertools.permutations([0,1, 2, 3, 4, 5]))
#aには[(0, 1, 2, 3, 4, 5), (0, 1, 2, 3, 5, 4),…]の様な
#形でデータが入る　今回は6文字の並びを調べるので0~5を指定

for i in range(len(a)):
#len(a)=720 組み合わせは6!で720通り
    for token in t.tokenize(str1):
        #初回以外 str1には6文字の文字が入る状態で形態素解析
        part_of_speech = token.part_of_speech.split(',')[1]
        #2個目の要素を取り出す
        #ティアースト	名詞,固有名詞,組織,*,*,*,ティアースト,*,*
        #アーティスト	名詞,一般,*,*,*,*,アーティスト,アーティスト,アーティスト
        if part_of_speech == u'一般':
            #2個目の要素が一般の物だけ取り出す
            word = token.surface
            if (len(word) == 6):
                #「アート」等も拾ってしまうので、6文字拾えた物
                #のみ出力する
                print(word)
    str1 = ""
    #文字列結合用の変数を次のループに入る前に初期化
    for j in range(len(a[i])):
        #len(a[i])は6 ( (0, 1, 2, 3, 4, 5) )
        str1 = str1 + text[(a[i][j])]
        #文字列を足していき、6文字をくっつける
        #step1:空白　+ 1文字目　= テ
        #step2:1文字目＋2文字目　＝　ティ


```
要素をドラッグ＆ドロップするのに便利なSortableJS 

#はじめに
Webサイトを構築する上で、「ドラッグ&ドロップを綺麗に見せたい」と思ったことはないでしょうか。
その希望を叶えてくれる便利なライブラリ "SortableJS" について紹介します。

#SortableJSとは
比較的短く、簡素なコードでドラッグ&ドロップを実現することができるライブラリです。
下記リンクにてgithubで無料公開されています。
https://github.com/SortableJS/Sortable

実際どのような機能なのか、利用例はこちら
https://yizm.work/sample_code/javascript/sortablejs_howto/

#特徴
+ Star総数22万7千
    + おそらく多くの方が利用
+ 幅広いブラウザに対応している
    + Chrome, Edge, Safari, FireFox等、一般に普及しているブラウザに対応しており、スマホのブラウザにも対応
    + 対応ブラウザ・バージョンは[こちら](https://caniuse.com/?search=drag)
+ 長年保守され続けている
    + 公開されたのは2013年
    + 今日2021年6月において、最終master更新は2021年5月9日

+ issueがそこそこ解決されている
    + 今までに立てられたissueの数は1500以上
    + そのうち1200以上のissueがclose

以上の観点より、今後仮に新しいブラウザが出来たとしても対応される可能性が高く、利用しやすいのではないかと思います。

#使い方
githubからインストールしたディレクトリを自分のプロジェクト下に置き、以下の階層にあるjsを読み込みます。

```
Sortable-master/Sortable.min.js
```

htmlからに呼び出すときは以下のようになるかと思います。

```js:js
<script type="text/javascript" src="https://yoursite.com/Sortable-master/Sortable.min.js"></script>
```

##実装
以下より引用
https://yizm.work/sample_code/javascript/sortablejs_howto/

###普通の並べ替え
```html:html
<ul id="sample1" class="samplelist">
 	<li>これで、並べ替えができる</li>
 	<li>様になっている</li>
 	<li>はずなんだ。</li>
</ul>
```

```js:js
 var sample1 = document.getElementById('sample1');
 var sortable1 = Sortable.create(sample1);
```

###アニメーション付き

```js:js
 var sample2 = document.getElementById('sample2');
 var sortable2 = Sortable.create(sample2, {animation: 100});
```

###ドラッグアンドドロップできるハンドル要素指定

```html:html
<ul id="sample3" class="samplelist">
 	<li><span class="srt_hndl">❤</span>ラベル選択できる？</li>
 	<li><span class="srt_hndl">❤</span>たまーに、コピペしようとして</li>
 	<li><span class="srt_hndl">❤</span>選択できないのってアレだよね。</li>
</ul>
```

```js:js
 var sample3 = document.getElementById('sample3');
 var sortable3 = Sortable.create(sample3, {animation: 100, handle:".srt_hndl"});
```

#おわりに
webサイトを構築する際、ライブラリの選択基準に「今後も保守され続けるか」という観点はとても重要ではないでしょうか。SortableJSは実装においてとても便利なライブラリであり、そこそこ保守されていますので、ドラッグ&ドロップ実装の際には是非ご検討ください。
OAuth 2.0 完全に理解した

# OAuth 2.0 を完全に理解した

社内勉強会で OAuth 2.0 について発表した原稿を一般向けにも公開します。
https://algas.github.io/oauth2-study/

この記事では発表原稿の内容の一部を抜粋して紹介します。

## この記事を読んで期待できる効果

- OAuth 2.0 が怖くなくなる
- OAuth 2.0 をどこでどう使えばいいか把握できる
- RFC 6749 が読めるようになる

## 概要

1. OAuth 2.0 とは何か
1. RFC 6749 (OAuth2.0) を読む
1. OAuth 2.0 の使い方

## OAuth2.0とは何か
### 認証と認可

- 認証: アクセスしたのが誰であるかを確認すること
- 認可: リソースへのアクセス権限を与えること
    - OAuth はこっち
    - 認可自体は認証と関係ない(印鑑や切符は持ってれば誰でも使える)

## RFC6749を読む
### Roles (Page 6)

1. Resource Owner: 認可を渡す役割
2. Resource Server: 保護されたリソースをホストするサーバ
3. Client: 認可をもらう役割
4. Authorization Server: 認可のためのトークンを発行するサーバ

### Protocol Flow (Page 7)

3行でわかるプロトコルの流れ

1. Client -> Resource Owner: リソースにアクセスしたいので Grant ください  
(Grant をもらう)
2. Client -> Authorization Server: Grant あるので Access Token ください  
(Access Token をもらう)
3. Client -> Resource Server: Access Token あるのでリソースください  
(リソースをもらう)

![OAuth2_Abstract_Protocol_Flow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8421/ca8827e8-dc2a-c68a-ac3f-79374295176f.png)

### Refresh Token (Page 10,47)

3行でわかる Refresh Token

1. Client -> Resource Server: Access Token あるのでリソースください  
(Token が古いからダメ)
2. Client -> Authorization Server: Refresh Token あるので Access Token ください  
(新しい Access Token と Refresh Token もらう)
3. Client -> Resource Server:  Access Token あるのでリソースください (2回目)  
(リソースをもらう)

ポイントは Resource Owner が出てこないこと

![OAuth2_Refresh_Token.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8421/247b0430-09b0-d254-ea37-4b431484a696.png)

## OAuth2.0の使い方
### Roleごとに見たユースケース

1. Resource Owner として OAuth 2.0 を利用する  
ユーザとしての利用(消費者側)
1. Resource Server として OAuth 2.0 を利用する  
他のサービスに自社のリソースを使ってもらう(受動的)
1. Client として OAuth 2.0 を利用する  
他のサービスのリソースを使う
1. Authorization Server として OAuth 2.0 を利用する(能動的)  
認可サービスの運用(プラットフォーム側)

## まとめ

この記事に抜粋した以外にも自分なりに OAuth 2.0 の仕組みを理解したことが書かれています。
https://algas.github.io/oauth2-study/
AndroidタブレットのChromeの「PC版サイト」の設定が勝手にオンになる

# 2021年6月初頭から、なぜかAndroidタブレットのChromeで「PC版サイト」がオンになる謎現象が発生
### 現象：いままでオフだったのに、常に「PC版サイト」がオンになる
![2021_06_18_20.29.39.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41095/70c1d9f7-5550-4a95-29f9-af96ee896f6c.jpeg)

### 解消方法の手順１：chrome://flagsで検索
`chrome://flags` にアクセスして、「Request desktop site for tablets on Android」を検索する
プルダウンメニューは以下の４種類

「Default（自動的にデスクトップ版をリクエストする）」　変更経緯は、※１を参照
「Enable（自動的にデスクトップ版をリクエストする）」
「Enable　for xxxDPI+ Screens（最小の画面サイズを選択する）」
「Disable（無効）」
![2021_06_18_21.06.31.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41095/729caf50-cd0e-54f9-e786-7325263d21af.jpeg)


### 解消方法の手順２：プルダウンメニューをDisableにする
以前の状態に戻すには「Disable」を選ぶ
![2021_06_18_21.07.37.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41095/6ab0a47d-5a36-70ee-8005-cd339702f823.jpeg)

### 解消方法の手順3：AndroidタブレットのChromeアプリの再起動

以上で以前の状態に戻る

####　参考にしたサイト
※１[2683416: Request desktop sites on Android tablets if screen is large enough](https://chromium-review.googlesource.com/c/chromium/src/+/2683416)
※２[Your Android Tablet May Soon Default to Desktop Mode When Using Chrome](https://www.makeuseof.com/default-desktop-mode-chrome-android/)
※３[Question How do I stop android chrome opening sites in desktop mode?](https://www.urban75.net/forums/threads/how-do-i-stop-android-chrome-opening-sites-in-desktop-mode.374815/)
無駄なコストを抑える！CloudWatch EventsでEC2を停止する方法

# CloudWatch Eventsのルールで、時間になったらEC2を停止させる

### きっかけ

前回[初学者だからこそ、とんでもない請求が来る前にAWSでやっておくべき転ばぬ先の請求アラート]([https://qiita.com/i3no29/items/da8f4ccc5b195c23ed08](https://qiita.com/i3no29/items/da8f4ccc5b195c23ed08))を書かせていただきましたが、__そもそもEC2インスタンスを消し忘れないような仕組み__を設定できれば、無駄なコストもかからないかと思いましたので記事にしていきます。
自動起動は別の記事で書いていきたいと思います。

---
### 1.CloudWatchのルールを選択する
#### 1.AWSマネジメントコンソールから CloudWatchを検索
![スクリーンショット 2021-06-20 10.22.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/9228e99a-5ef4-523f-8dd5-96248d914122.png)


#### 2.イベント＞ルール の画面を開き「ルールの作成」を押下します
![スクリーンショット 2021-06-20 10.23.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/49402b9f-1e87-6bc1-205b-2471152e6c9a.png)


---

### 2.**CloudWatch Eventsのルール作成**
#### 1.①側：Cron式を記載する
![スクリーンショット 2021-06-20 11.32.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/49f91df8-8db2-1f56-9af8-14c45dd55276.png)


##### 2.1.1 Cron式の構文の基本的な書き方

| 名称 |値  |Wildcards|
|---|---|---|
|分  |0-59  |, - * /|
|時 |0-23  |, - * /|
|日  |1-31  |, - * ? / L W|
|月  |1-12 or JAN-DEC  |, - * /|
|曜日 |1-12　or SUN-SAT  |, - * ? L #`|
|年  |1970-2199  |, - * /|

※`日` と `曜日` の両方に値 ( `*` 含む) を指定することはできない。どちらかに値を指定したら、もう片方には `?` を記述する。

※AWS Cron式のタイムゾーンは__グリニッジ標準時（GMT）__での設定になるため、作成したい時間から値を設定してください（日本（JST）であれば、__-9時間__すればOK）

※[時差計算]
(https://www.jisakeisan.com/?t1=gmt&t2=jst)を確認したい人用のリンクです

例1）日本（JST）で毎年月曜から金曜の毎月毎日 18:00（18-9＝9） に実行
→`0 9 ? * MON-FRI *`
例2）日本（JST）で毎年毎週毎月毎日 9:00（9-9＝0） に実行
→`0 0 * * ? *`
例3）日本（JST）で今年土曜から日曜日の毎月毎日（？）22：00（22-9=13）に実行
→`0 13 ? 6-12 1,7 2021`

#### 2.②側：ターゲット（今回の場合は、停止させたいEC2）のインスタンスIDを記述する
EC2インスタンスに付与されているIDを入力します
#### 3.②側：ロールの作成
CloudWatch Eventsから、EC2 インスタンスに対してアクションを実行するために権限（ロール）が必要になってくるため、作成していない場合はロールを作成して許可を付与していきます。

### 3.CloudWatch Eventsのルールの詳細を設定する

#### 1.名前と説明、状態（有効化するか）を記述して、ルールの作成を押下

![スクリーンショット 2021-06-20 11.45.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/a1c6ed17-0af1-abc7-8c92-0382f0abcd5b.png)
### 4.CloudWatch Eventsのルールの詳細を確認する

#### 1.作成したルールが表示されていることを確認する
![スクリーンショット 2021-06-20 11.48.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/359a9096-288c-c9e7-a42d-4c87e24b78a8.png)

選択することでルールの詳細の確認もすることが出来ます
![スクリーンショット 2021-06-20 11.49.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/3cb52a06-67ea-b5a4-5135-a689525a7d1c.png)

---

### おわりに

前回きっかけにも記載しましたが、今後もAWSを学習したい人は増えていくのかなと勝手に想像しています。
学ぶためにハンズオンは必要になってきますが、『**見様見真似で作ったはいいけど放置してXXX万円**』など笑い事ではいられない話が、あなたの挑戦する心をへし折るキッカケにならないようにと思って、無駄なコストを抑える！を記載させていただきました。

---

### 参考
・Cronの詳しい説明について
AWS公式HPリンク　[Schedule Expressions for　Rules]([https://docs.aws.amazon.com/AmazonCloudWatch/latest/events/ScheduledEvents.html](https://docs.aws.amazon.com/AmazonCloudWatch/latest/events/ScheduledEvents.html))
AWS公式HPリンク　[Rate または Cron を使用したスケジュール式]([https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/services-cloudwatchevents-expressions.html](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/services-cloudwatchevents-expressions.html))

・学習のきっかけとなったもの
この記事はAWS初学者を導く体系的な動画学習サービス
[AWS Cloud Tech](https://aws-cloud-tech.com/)での学びをベースにして作成しております。
床が自動で動くと同時にPlayerも一緒に動く方法

前回の続きです。

```C#
void OnCollisionStay(Collision collision)
    {
        if (collision.gameObject.tag == "Stage")
        {
            transform.parent = collision.gameObject.transform;
        }
    }
    void OnCollisionExit()
    {
        transform.parent = null;
    }
```

動く床にCollisionをつけてタグも設定し、Playerスクリプトに書きます。
OnCollisionStayはブジェクト同士が接触している間なので、
Stageタグの上に乗っている間Playerが移動する。
OnCollisionExitはオブジェクト同士が接触から離れた瞬間なので
離れた瞬間はnullします。
こうすることで床が動くと同時にPlayerも動くようになります。
Gitコマンドで躓かないための備忘録

#はじめに
共同開発中に何度も<font color="Red">『こんなときってどのコマンド使うんだっけ？』</font>、<font color="Red">『エラーが表示されるけどどうしよ、、、』</font>と慌てないためのメモとして作成しました。


#注意点
自分のメモ書き用も兼ねておりますので、間違った点はご指摘していただけると幸いです。



 
```
##リモートリポジトリ（GitHub）のコードをローカルリポジトリに複製
$ git clone リモートリポジトリのURL

//Gitで管理（ローカルリポジトリ作成）
$ git init


//ローカルブランチをリモートリポジトリに登録
$ git push -u origin 作成したブランチ名


//全ての変更したファイルをステージングに保存
$ git add .


//変更したファイルだけをステージングに保存
$ git add ファイル名


//ローカルリポジトリに保存
$ git commit -m "コミットメッセージ"


//ローカルリポジトリにmainブランチを新規作成
$ git branch -M main


//ローカルに新規のブランチを作成
$ git checkout -b  ブランチ名


//リモートリポジトリ（GitHub）を登録
$ git remote add origin リモートリポジトリのURL


//リモートリポジトリにプッシュする
$ git push origin main
```



##全てのブランチを確認（ローカルブランチ）
```
＄ git branch -a 
```


##現在の作業ブランチの確認
```
＄ git branch 
```


##リモートブランチの追跡一覧
```
$ git branch -r
```


##追跡したいブランチの作成
```
$ git fetch origin <追跡したいブランチ名>
```


##新規ブランチの作成
```
$ git branch ブランチ名
```


##ブランチの移動
```
$ git checkout 移動したいブランチ名
```


##新規ブランチの作成&そのブランチに移動
```
$ git checkout 移動したいブランチ名
```


##既存ブランチ名の変更
```
$ git branch  -m 変更したいブランチ名　変更後のブランチ名
```
【直前より前のコミットを取り消す】


```
$ git reset --hard HEAD
```


##コミットの履歴は残して内容だけを取り消す
```
$ git revert
```


##コミットだけを取り消したい
```
$ git reset --soft HEAD^ 
```


##n個前のコミットを取り消してワークツリーの変更も取り消したい
```
$ git reset --hard HEAD~{n}
```


##n個前のコミットだけ取り消したい
```
$ git reset --soft HEAD~{n}
```


##直前のコミット（push済み）のコミットメッセージを修正して再度プッシュしたい
```
$ git commit --amend -m "新しいコミットメッセージ"
$ git push -f origin 先ほどpushしたリモートブランチ
```


##pull = fetch + merge（コンフリクトを無くす）
```
$ git pull
```


##ローカルの「master」ブランチまで更新されていない（mergeされていない）
```
$ git fetch
```


##誤って実行してしまったpullの取り消し
```
$ git merge --abort
```
※mainブランチに誤ってpullしまった時に使う



##誤って違うブランチにコミットした時のキャンセル
```
$ git cherry-pick
```


##ファイルの差分を確認したい
```
$ git diff
```


##ローカルファイルで変更を保存しないで別のブランチに移動（変更分を退避させる）
```
$ git stash
```


##一番最後に保存した状態に戻す
```
$ git stash pop
```



##Gitの管理をやめる
<font color="Red">絶対に打ち込んではいけないコマンド（gitの管理下におけるファイルの削除）</font>

```
$ rm -rf .git/
```



##ファイルを削除する
```
git rm 削除するファイル名
```


##ローカルリポジトリのステータス
```
$ git status
```


##作業ブランチにmainブランチを反映させるまでの流れ↓
ローカルブランチに移動

```
$ git checkout ローカルブランチ名
```

作業中のローカルブランチにmainブランチ反映

```
$ git merge　main
```

fetchとpushのURLの表示、git pull、git pushの挙動
```
$ git remote show origin
```
シンボル ― J 言語入門

前回の投稿から 4 ヶ月も経ってしまいましたが、引き続き J のデータ型の解説をします。(*あまり重要な機能ではないので、流し読みしても構いません。*)

# 復習: 文字列はリスト

文字列は実際には文字のリストなので、`=` の代わりに `-:` を使うなど、扱いに注意が必要です。

```j
   'text' = 'text' 
1 1 1 1
   'text' -: 'text'
1
```

そこで、文字列を一つの値として扱いたい場合は、ボックス (`<`) を使います。

```j
   (<'text') = <'text'
1
```

**ほとんどの場合、この方法で十分**ですが、特定の場面で役に立つデータ型があります。

# シンボル

前置きが長くなりましたが、シンボル (symbol) は、一意な文字列を表すデータ型です。

シンボルを作るには `s:` (monad) を使います。

```j
   a=: s:(<'text')
   a
`text
   datatype a
symbol
```

引数は**ボックス化した**文字列です。注意してください。

シンボルは前に `` ` `` を付けて表示されますが、実際の値には `` ` `` は**含まれません**。

シンボルは文字列と同様に、どんな文字でも使うことができます。

```j
   s:<'`J 言語'''
``J 言語'
```

# シンボルと文字列

シンボルと文字列は、datatype の結果からも分かるように、異なる種類の値として扱われます。

```j
   NB. 元の文字列と比較
   a = <'text'
0
```

連結したり、文字を取り出したりすることもできません。

```j
   a,'b'
|domain error
|   a    ,'b'
   1 { a
|index error
|   1    {a
```

シンボルは「文字の配列」ではなく、「**文字列を表す定数**」という役割なので、このような制約があります。

# シンボルのリスト

シンボルは配列ではないので、異なる長さのシンボルをリストにすることができます。

```j
   s:'abcde' ; 'abc' ; '1234'
`abcde `abc `1234
```

`s:` の引数を(ボックス化して*いない*)文字列にすると、シンボルのリストを簡単に作れます。

```j
   s:' abcde abc 1234'
`abcde `abc `1234
   s:'/abcde/abc/1234'  NB. 上と同じ
`abcde `abc `1234
```

1 バイト目が区切り文字として解釈されることに注意してください。区切り文字には (ASCIIの範囲内で) どんな文字でも使えます [^1]。

# シンボルの特徴

`s:` で作ったシンボルの情報は、global symbol table (GST) という辞書に保存されます。シンボルの実体はGST のインデックス (一意な数値) です。次に同じ文字列からシンボルを作る時には、GST を参照して同じインデックスが返されます。

シンボルの実体が数値であることにより、**シンボルの比較は文字列と比べて高速**に行えます。また、同じ値を繰り返し使う場合、**メモリの節約**にもなります。

一方、GST は名前の通りグローバルなデータなので、プログラム全体で共有されます。また、GST に保存した情報を削除することはできません。そのため、**大量のシンボルを生成することは避けるべき**です。

# 用途

シンボルは以下の条件を満たす場合に使うと良いでしょう。

- 同じ文字列を繰り返し使う
- 比較を頻繫に行う
- 使う文字列の種類が限られていて、途中で変わることがない

具体的な例としては、他の言語の列挙体 (enum) のようなものが考えられますが、数値の定数を使う方が手っ取り早いので、*あまり使われていない*ように思います [^2]。

---

\[ 前 : [ユニコード文字列](https://qiita.com/unsigned-wrong-wrong-int/items/399759d08f536811aeaa) \] \[ [目次](https://qiita.com/unsigned-wrong-wrong-int/items/e15a87999cedfc6b9ced) \] \[ 次 : [疎行列](https://qiita.com/unsigned-wrong-wrong-int/items/a7587ed207008e8d0a04) \]

[^1]: 半角スペースで区切ることが多いですが、値にスペースを含みたい場合などに他の文字を使うことがあります。
[^2]: ちょっとマイナーな機能であることも、一つの要因かもしれません。
LaravelでAWS SDKのS3を扱う

LaravelでS3を使うには

- AWS SDKを使う
- Flysystemを使う

のどちらかになると思います。
とりあえず今回はSDKを使います。

# AWS SDK
https://docs.aws.amazon.com/ja_jp/sdk-for-php/v3/developer-guide/getting-started_installation.html

## composerでの導入
```sh
composer require aws/aws-sdk-php
```
でSDKを導入します。

## .envファイルに環境変数の設定
コード上にわざわざ接続情報を書く必要はありません。
環境変数から自動的に持ってきてくれるので、指定された環境変数名に
キー情報を記載しておきます。

```.env
AWS_ACCESS_KEY_ID=AKIAIOSFODNN7EXAMPLE
AWS_SECRET_ACCESS_KEY=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
```

## S3への処理を書く
後はS3Clientを使って好きに操作することが可能です。

```php
use Aws\S3\S3Client;

...

$s3 = new S3Client([
    'version' => 'latest',
    'region' => 'us-east-2'
]);
$result = $s3->listObjects();
```
MongoEngine ListFieldサイズでフィルタリング

私のプロジェクトでは、ListFieldを使用したモデル。 あなたはこのコードを見ることができます。

列情報を格納するためのこのcolumn_list変数。

```python
class Courses(DynamicDocument):
    id = ObjectIdField(primary_key=True, default=lambda: bson.ObjectId())
    column_list = ListField(LazyReferenceField(Columns), default=lambda: [])
    title = StringField()
    thumbnail = StringField()
    about = StringField()
```

フィルタを介してすべての空のcolumn_listを検索したい場合。

このようなコードを使用できます。

```python
Courses.objects.filter(column_list__0__exists=False)
```
0はcolumn_listのインデックスです。これはこのコードと同等です。

```python
Courses.objects.filter(__raw__={'$where': 'this.column_list.length <= 0'})
```

これに基づいて、column_list__0はcolumn_list[0]と同等であると考えることができます。

したがって、0より大きいサイズをフィルタリングする場合は、これを使用できます。

```python
Courses.objects.filter(column_list__0__exists=True)
```

インデックスは0から始まるため、0は1つのレコードがあることを意味します。

これで、ListFieldのサイズをフィルタリングできます。 

読んでくれてありがとう。
WSL2(Ubuntu 20.04)を日本語化する方法

# 環境
- WSL2(Ubuntu 20.04)がインストール済

# WSL2起動直後(日本語化していない)

```
Welcome to Ubuntu 20.04.2 LTS (GNU/Linux 5.4.72-microsoft-standard-WSL2 x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

  System information as of Sun Jun 20 13:51:56 JST 2021

  System load:  0.0                Processes:             8
  Usage of /:   0.7% of 250.98GB   Users logged in:       0
  Memory usage: 0%                 IPv4 address for eth0: XXX.XX.XXX.XXX
  Swap usage:   0%


0 updates can be applied immediately.


The list of available updates is more than a week old.
To check for new updates run: sudo apt update


This message is shown once a day. To disable it please create the
/home/User/.hushlogin file.
```

# 日本語化の手順

WSL2のロケール設定に`ja_JP.utf8` が含まれているか、`locale`コマンドで確認できます。


```
$ locale -a
C
C.UTF-8
POSIX
en_US.utf8
```

ロケール設定に`ja_JP.utf8` が含まれていない場合、日本語パッケージをインストールしましょう。

```
$ sudo apt install language-pack-ja-base language-pack-ja ibus-mozc
```

`locale`コマンドで`ja_JP.utf8` が含まれていることを確認しましょう。

```
$ locale -a
C
C.UTF-8
POSIX
en_US.utf8
ja_JP.utf8
```

次に、日本語ロケール設定を有効化します。

```
$ echo 'export LANG=ja_JP.UTF-8' >> ~/.bashrc
$ echo 'export LANGUAGE="ja_JP:ja"' >> ~/.bashrc
$ source ~/.bashrc
```

# 日本語化の確認

`lsss`のような存在しないコマンドを入力してみましょう。
このような表示結果になっていれば日本語化が成功です。

```
$ lsss

コマンド 'lsss' が見つかりません。もしかして:

  command 'lssu' from deb nilfs-tools (2.2.8-1)
  command 'lsns' from deb util-linux (2.34-0.1ubuntu9.1)
  command 'less' from deb less (551-1ubuntu0.1)

次を試してみてください: sudo apt install <deb name>

```
【補助記憶装置】基本情報技術者試験のためのコンピュータの構成

※この記事は
「栢木先生の基本情報技術者教室」を参考に学んだことをまとめた記事です。

#補助記憶装置
##補助記憶装置とは?

CPUが読み書きできるのは、主記憶上にあるプログラムやデータだけです。
主記憶装置の特徴として、電源が切れると、記憶内容が消失する揮発性の特徴がある。
それに対して、**補助記憶装置**は主記憶に比べてアクセス速度は遅いですが、
大容量で安価であり、電源が切れても記憶内容が消失しない不揮発性の特徴がある

###メリット
大容量で安価
電源が切れても記憶内容が消失しない不揮発性がある

###デメリット
主記憶に対してアクセス速度が遅い

つまり、主記憶装置と補助記憶装置はお互いの弱点を補い合っているといえる。

##磁気ディスク装置とは

磁気ディスク装置(HDD : Head Disk Drive)は、
磁性体を塗った円盤状のディスクにデータが記憶され、磁気ヘッドを移動させながらデータを読み書きをする装置です。
ハードディスクともいわれる。

###メリット
アクセス時間とデータ転送が比較的高速
大容量
プログラムやデータなどは、磁気ディスク装置に保存される

##磁気ディスク装置の構造
ディスクは複数枚で構成されています。
データを記録する最小単位である**セクタ**がいくつかあり、セクタがいくつか集まって同心円状の**トラック**がある
中心から等間隔にあるトラックの集まりを**シリンダ**という

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/a9001c2a-ca72-7327-8d89-97d4cbd90268.png)

##セクタ方式
セクタ方式では、データをセクタ単位で読み書きします。
ひとつのセクタで収まらない場合は複数のセクタをまたいで記録します。
ひとつのセクタには複数のデータを書き込めない。
余った部分は何も記憶されない無駄な領域
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/b895f33d-628e-ade8-bda7-010be6ed06d3.png)

##アクセス時間
CPUがデータの読み書きの指令を出してから、データの読み書きが終わるまでの時間を**アクセス時間**という
アクセス時間は、下記3種類の時間に分かれる。
* 位置決め時間
* 回転待ち時間
* データ転送時間
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/82d87d1c-6e58-7d04-06f5-947f2cf0cecf.png)

###位置決め時間
磁気ヘッドを目的のデータが存在するトラックまで移動させるのに要する時間。

###回転待ち時間
目的のデータが磁気ヘッドまで回転してくるのを待つ時間。

###データ転送時間
目的のデータが磁気ヘッドを通り過ぎるのに要する時間

##フラグメンテーション
磁気ディスク装置にデータの追加や削除を繰り返すと、データが連続した領域に保存されなくなる現象を
**フラグメンテーション**という。
これを解決することを**デフラグ**という。
断片化したデータを連続した領域に配置する

##フラッシュメモリ
電気的に全部または一部分を消去して内容を書き直せる半導体メモリを**フラッシュメモリ**と言います。
大容量でアクセス速度が速くコンパクトであるため、ノートPCやスマートフォン、ディジタルカメラの媒体として用いられている。
代表的なものに**USBメモリ**や**SDカード**などがあります。
SDカードは2GBまで記録できないがサイズの異なるSDカードも開発されている
32GBまで記録できる⇨SDHCカード
2TBまで記憶できる⇨SDXCカード
一回り小さいサイズ⇨microSDカード、SDHCカード、SDXCカード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/f9101952-811f-d27d-c1e4-528e010e1b8d.png)

##SSD
フラッシュメモリを用いた、磁気ディスクの装置の代わりとなる記憶媒体を**SSD（Solid State Drive）**という

###メリット
位置決め時間や回転待ちといった機械的な動作がないため、静音で振動や衝撃に強く、消費電力が小さい、アクセス速度が早いなどの特徴もある。

##光ディスク
レーザ光を使ってデータを読み書きする記憶媒体を**光ディスク**という
大容量で安価

###CD
Compact Disc。
音楽用のCDのデータ記録用に応用したもの。
ソフトウェアなどの配布に用いられる。
最大 700MB

###DVD
Digital Versatile Disc。
PCのデータや映像の記録ができる
最大 17.08GB

###BD
Blu-ray Disc。
青紫色のレーザ光線でハイビジョンの映像を2時間記録できる
最大 100GB

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/a2e56899-2a29-7a64-c248-6ef24000e403.png)


##光ディスクの記憶方式
光ディスクの記憶方式には、**再生専用型**・**追記型**・**書き換え型**がある

###再生専用型
利用者は書き込み不可
CD-ROM DVD-ROM DB-ROM

###追記型
書き込み可能・書き換え不可
CD-R DVD-R DB-R

###書き換え型
書き込み・書き換え可能
CD-RW、DVD-RW、BD-RE
床が自動で動く方法

空中アスレチックを作成していて、床が自動で動く方法をご紹介します。

```C#
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class UpDown : MonoBehaviour
{
    private Vector3 StagePos;  //StagePos変数を設定

void Start()
    {
        StagePos = transform.position;
    }

    void Update()
    {
        transform.position = new Vector3(StagePos.x, Mathf.Sin(Time.time) * 5.0f + StagePos.y, StagePos.z);
    }
}
```
Mathf.Sin関数を使います。
5.0fは動く範囲を判断。
今回は上下に動く床を作りたかったのでyに足しています。
左右に動いてほしかったらxに足せば良いです。

床が動くとPlayerも動かさないと落ちてしまいます。
つまり、床の上に乗るとPlayerは一緒に動いてくれません。
次回はPlayerも一緒に動かす方法をご紹介します。
matplotlib 3D グラフ底面に画像の貼り付け

maplotlibの3Dグラフの底面に画像を貼り付ける手順メモです。

# 環境
ubuntu 18.04

# install
私の環境のmaplotlibのバージョン(3.4.1)では```matplotlib._png```というモジュールがインポートできなかったため次のようにして動作するバージョンに変更しました

```bash:install
pip3 uninstall matplotlib
pip3 install matplotlib==3.1.0
```

# コード

picture_pathに画像の絶対パスを与えます。

```python3:plt_picture.py
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
from mpl_toolkits.mplot3d import Axes3D
from matplotlib import cm
from matplotlib.ticker import LinearLocator, FormatStrFormatter
from matplotlib._png import read_png
from matplotlib.cbook import get_sample_data
from pylab import *

fig = plt.figure()
ax = Axes3D(fig)

picture_path = "/home/hoshina/catkin_ws/src/fast_match/src/search_img3.png"

fn = get_sample_data(picture_path, asfileobj=False)
arr = read_png(fn)

z = 0
X1, Y1 = ogrid[0:arr.shape[0], 0:arr.shape[1]]
ax.plot_surface(X1, Y1, np.atleast_2d(z), rstride=5, cstride=5, facecolors=arr)

ax.set_xlabel('X')
ax.set_ylabel('Y')
ax.set_zlabel('t')

plt.show()
```

# 実行結果

![plt_picture.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/715c1449-93b8-a938-b87e-dfb9e0d88426.png)


# 参考

https://qiita.com/momosuke/items/79fb4353dba74d40c9c1
機械学習-主成分分析

#主成分分析 (PCA)
変量の個数を減らすことに伴う、情報の損失はなるべく小さくする。

係数ベクトルが変わると、線形変換後の値が変化する。
線形変換後の変数の分散が最大となる射影軸を探索する。
要するに、たくさんの値を貫く直線が良いよね。という平たい理解をしてみた。

主成分分析の場合、下記の $Var(s_j)$を最大にする。

```math
\begin{align}
Var(s_j) &= \frac{1}{n}s_j^Ts_j\\
&=\frac{1}{n}(\bar{X}a_j)^T(\bar{X}a_j)\\
&=\frac{1}{n}a_j^T\bar{X}\bar{X}a_j\\
&=a_j^TVar(\bar{X})a_j
\end{align}
```

具体的には、ラグランジュ関数を最大にする。

```math
E(a_j) = a_j^TVar(\bar{X})a_j - \lambda (a_j^Ta_j -1)
```

$a_j^TVar(\bar{X})a_j$ : 目的関数
$\lambda$ : ラグランジュ乗数
$(a_j^Ta_j -1)$ : 制約条件

最適解は、ラグランジュ関数を微分して最適解を求める。

```math
\frac{\partial E(a_j)}{\partial a_j} = 2Var(\bar{X}a_j) - 2\lambda a_j =0\\
\rightarrow Var(\bar{X}a_j) = \lambda a_j
```

分散共分散行列は正定値対称行列。
固有値は０以上、固有ベクトルは直行になる。

##求め方
- 分散共分散行列を計算する
- 固有値問題を解く
- 最大m個の固有値と固有ベクトルのペアが出現する

めでたし、めでたし。

k番目の固有値を昇順に並べて、対応する固有ベクトルを「第k主成分」と呼ぶ。

##寄与率
第k主成分の分散の全分散に対する割合(第k主成分が持つ情報量の割合)

```math
c_k = \frac{\lambda_k}{\sum_{i=1}^m \lambda_i}
```

$\lambda_k$ : 第k主成分の分散
$\sum_{i=1}^m \lambda_i$ : 主成分の総分散

##累積寄与率
第1-k主成分まで圧縮した際の情報損失量の割合

```math
r_k = \frac{\sum_{i=1}^k \lambda_i}{\sum_{i=1}^m \lambda_i}
```

$\sum_{i=1}^k \lambda_i$ : 第1〜k主成分の分散
$\sum_{i=1}^m \lambda_i$ : 主成分の総分散
機械学習-k近傍法(k-NN)

#k近傍法
分類問題のための機械学習手法。
明確な訓練段階は不要である。

最近傍のデータを個取ってきて、それらがもっとも多く所属するクラスに識別する。
k を変化させると結果も変わる。

kを大きくすると、決定境界は滑らかになる。
kを大きくすると分類にあたってのノイズの影響を低減できるが、クラス間の境界が明確にならない。
Playerが動く方向にカメラも動く方法

```C#:CameraManager 
public class CameraManager : MonoBehaviour
{
    //格納する変数
    public GameObject Player;
    public float CameraX;
    public float CameraY;
    public float CameraZ;

    void Start()
    {

    }

    void Update()
    {

        Vector3 Pos = Player.transform.position;

        //カメラとプレイヤーの位置を同じにする
        transform.position = new Vector3(Pos.x + CameraX, Pos.y + CameraY, Pos.z + CameraZ);
    }
}
```

ここまで書けたらカメラにスクリプトをアタッチ。
インスペクターにある
CameraX
CameraY
CameraZ
にはPlayerとカメラの位置を設定する。

PlayerにはヒエラルキーのPlayerを入れる。
(私の場合はPlayerですが、カメラで追いかけたいものを紐づける)

これでPlayerが動くと同時にカメラが追いかけるようになりました。
SQLのCRUDについて再確認してみる

#CRUDとは？
プログラミングでアプリを作る際の４大機能の頭文字を取ったもの。
CRUDはクラッドと読めば良いらいしい！

C・・・create（新規作成）
R・・・read（読み込む）
U・・・update（更新する）
D・・・delete（削除する）
の頭文字を取ったものになる。

#SQL文でのCRUDの使い方
####① CREATE
SQL文では新規作成のCREATEは```INSERT```という言葉で書く。（insertの直訳は差し込む）

```　
INSERT INTO テーブル名（カラム名）　VALUES(値);

//実際の使用例
INSERT INTO contacts（id,name,created_at）VALUES(1,"三宅",now());
```
使用例を実行した結果、```contact```テーブルには以下のデータが新規作成(追加）される。

<table>
<tr>
<td>id</td>
<td>name</td>
<td>created_at</td>
</tr>
<tr>
<td>1</td>
<td>三宅</td>
<td>2021/06/20 0:00</td>
</tr>
</table>


####② READ
SQL文では読み込み（データ取得）のREADは```SELECT```という言葉で書く。（SELECTの直訳は選択する）

```　
SELECT カラム名　FROM テーブル名　WHERE カラム名=値;

//実際の使用例
SELECT * FROM contacts　WHERE id=2;
```
使用例を実行した結果、contacts（任意の名前のテーブル名）テーブルのid=2のデータが取得できる。
※WHEREを記述しない場合は、contactテーブル全てのデータを取得できる

<table>
<tr>
<td>id</td>
<td>name</td>
<td>created_at</td>
</tr>
<tr>
<td>2</td>
<td>山田</td>
<td>2021/06/20 01:00</td>
</table>

####③ UPDATE
SQL文では更新のUPDATEは```UPDATE```という言葉で書く。（UPDATEの直訳は更新する）

```　
UPDATE テーブル名　SET カラム名="更新する値";

//実際の使用例
SELECT contacts SET age="２０代";
```
使用例を実行した結果、contactsのテーブルのageカラムの値は***全て***２０代になる。

<table>
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
<td>created_at</td>
</tr>
<tr>
<td>1</td>
<td>三宅</td>
<td>20代</td>
<td>2021/06/20 0:00</td>
</tr>
<tr>
<td>2</td>
<td>山田</td>
<td>20代</td>
<td>2021/06/20 01:00</td>
</tr>
<tr>
<td>3</td>
<td>佐藤</td>
<td>20代</td>
<td>2021/06/20 12:00</td>
</tr>
</table>

・・・特定の箇所だけ更新したい場合は```WHERE```を使う

```　
UPDATE テーブル名　SET カラム名="更新する値" WHERE カラム名="更新したいデータ";

//実際の使用例
SELECT contacts SET age="30代" WHERE id=3;
```
実行結果
id=3の箇所だけがageが30代に更新されました！

<table>
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
<td>created_at</td>
</tr>
<tr>
<td>1</td>
<td>三宅</td>
<td>20代</td>
<td>2021/06/20 0:00</td>
</tr>
<tr>
<td>2</td>
<td>山田</td>
<td>20代</td>
<td>2021/06/20 01:00</td>
</tr>
<tr>
<td>3</td>
<td>佐藤</td>
<td>30代</td>
<td>2021/06/20 12:00</td>
</tr>
</table>

####④ DELETE
SQL文では削除のDELETEは```DELETE```という言葉で書く。（deleteの直訳は削除する）

```　
DELETE FROM テーブル名 WHERE カラム名=値;

//実際の使用例
DELETE FROM contacts WHERE id=2;
```
使用例を実行した結果、```contact```テーブルにはid=２のデータが削除される。
※WHEREを記述しなければ、テーブルごと削除することができる

<table>
<tr>
<td>id</td>
<td>name</td>
<td>created_at</td>
</tr>
<tr>
<td>1</td>
<td>三宅</td>
<td>2021/06/20 0:00</td>
</tr>
<tr>
<td>3</td>
<td>佐藤</td>
<td>2021/06/20 12:00</td>
</tr>
</table>
機械学習-ロジスティック回帰モデル

#ロジスティック回帰モデル
分類問題(クラス分類)で使う。
教師あり機械学習モデル。
シグモイド関数を使う。

##シグモイド関数
シグモイド関数の微分は、シグモイド関数自身で表現することが可能なので、尤度関数の微分を行う際に計算が容易になる。

```math
\sigma(x) = \frac{1}{1+exp(-ax)}
```

xで偏微分すると。。。

```math
\frac{\partial \sigma(x)}{\partial x}
= \frac{\partial}{\partial x} \left( \frac{1}{1+exp(-ax)} \right ) \\
= a\sigma(x)(1-\sigma(x))
```

##ロジスティック回帰モデルの式

```math
P(Y=1|x)＝\sigma(w_0 + w_1x_1)
```

P(Y=1|x) : データが与えられたときにY=1になる確率
$w_0$ : 切片
$w_1$: 回帰係数
$x_1$ ：説明変数

学習で決めるのは切片と回帰係数。
その他は入力データ。

##最尤推定（さいゆう推定）
一番尤もらしい値を探す方法。
確率分布は色々あるけど、ロジスティック回帰はベルヌーイ分布を使う。

```math
E(w_0, w_1...,w_m) = -logL(w_0, w_1...,w_m)\\
= - \sum_{I=1}^n \{ y_i logp_i + (1-y_i) log(1-p_i) \}
```

サンプル数が少ないと過学習を起こす傾向がある。


##勾配降下法
反復学習によりパラメータを逐次的に更新するアプローチの一つ

```math
w(k+1) = w^k - \eta \frac{\partial E(w)}{\partial w} 
```

k+1 の w は、k番目の w に $- \eta \frac{\partial E(w)}{\partial w}$を足すと推測できる。

$\frac{\partial E(w)}{\partial w}$は下記の式になる。

```math
\frac{\partial E(w)}{\partial w} =
\sum_{I=1}^n \frac{\partial E_i(w)}{\partial p_i} \frac{\partial p_i}{\partial w}\\
= -\sum_{I=1}^n(y_i -p_i)x_i
```

だから、計算式を合わせると。。。

```math
w(k+1) = w^k + \eta \sum_{I=1}^n(y_i -p_i)x_i
```


パラメータが更新されなくなったら、勾配が0になったということ。

##確率的勾配効果法
データをランダムに選んでパラメータを更新する。

```math
w(k+1) = w^k + \eta (y_i - p_i)x_i 
```

確率的勾配降下法なら、なんだったら手計算できるかも。。。

##分類の評価方法
- True Positive
- False Positive (正常を間違えて異常)
- True Negative
- False Negative (異常を間違えて正常)

- 再現率(Recall)
- 適合率(Precision)
- F値

100%正確な分類というのはやっぱり難しいのかなぁと。
でも、正確性って人間が客観的に判断するんだろうなぁと。
gyp: No Xcode or CLT version detected!

# gyp: No Xcode or CLT version detected!


```shell
gyp: No Xcode or CLT version detected!
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/manowaraiuma/.nodebrew/node/v10.23.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:198:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
gyp ERR! System Darwin 19.6.0
gyp ERR! command "/Users/manowaraiuma/.nodebrew/node/v10.23.0/bin/node" "/Users/manowaraiuma/.nodebrew/node/v10.23.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/manowaraiuma/Desktop/n010/node_modules/watchpack-chokidar2/node_modules/fsevents
gyp ERR! node -v v10.23.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok 
```

# Xcodeの再インストール

```shell:
$ sudo rm -rf $(xcode-select -print-path)
$ sudo rm -rf /Library/Developer/CommandLineTools
$ xcode-select --install
```

上記のコマンドで解決しました。
Dockerで環境を作ってLaravelプロジェクトを作るまで（Windows）

WSL2のおかげかWindowsでもDockerが楽に動かせるようになったので。
とりあえずPHP環境を作って、そこにLaravelをインストールする感の流れを書いておきます。

# 動作環境
- Windows10
- VisualStudioCode
- Docker

# WSL2のインストール
https://docs.microsoft.com/en-us/windows/wsl/install-win10

# docker関連のファイルを準備
以下のようなファイルを準備。
記述内容は各自好きな感じに変えるといいと思います。

困ったらこちらでも読めば解決すると思います。
https://docs.docker.com/compose/

```yaml:docker-compose.yml
version: '3'
services:
  laravel:
    container_name: laravel
    build:
      context: .
      dockerfile: ./docker/php/Dockerfile
    volumes:
      - ./laravel:/var/www/html/laravel
    ports:
      - "8080:80"
      # - "443:443"
  mysql:
    container_name: mysql
    build:
      context: .
      dockerfile: ./docker/mysql/Dockerfile
    environment:
      - MYSQL_ROOT_PASSWORD=password
      - MYSQL_USER=laravel
      - MYSQL_PASSWORD=password
      - MYSQL_DATABASE=test
    volumes:
      - ./mysql:/var/lib/mysql
    ports:
      - 3306:3306
```

```Dockerfile:docker/php/Dockerfile
FROM php:8.0-apache
RUN apt-get update \
  && apt-get install -y git unzip \
  && docker-php-ext-install pdo_mysql \
  && a2enmod rewrite
```

```Dockerfile:docker/mysql/Dockerfile
FROM mysql:5.7
```

# VSCodeからDockerの拡張機能を導入
`ms-azuretools.vscode-docker`をインストール。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1642231/0d92854c-5a9d-9f9f-fb06-9829103b34f3.png)

# Dockerの起動
起動していないとエラーになるので忘れずに。

# VSCode上でdocker-compose.ymlを使って動かす
拡張機能のDockerを入れておけば、`docker-compose.yml`を右クリックした際にメニューがいくつか追加されてます。
`右クリック > Compose Restart`でLaravel用とMySQL用のDockerのコンテナが２つ立ち上がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1642231/7c688970-c22a-8126-a9b0-9f901abdd202.png)

# composerでLaravelのインストール
composerが入っている環境でコマンドを実行します。
（Dockerfileにcomposerを導入するように書き換えておくと楽かも）

以下のコマンドでlaravelがインストールされます。
バージョンは各自好きなものを指定すれば良いと思います。

```sh
cd /var/www/html
composer create-project "laravel/laravel=8.5.*" laravel
```

# 構築完了
`http://localhost:8080/laravel/public`にアクセスすれば、LaravelのWelcomeページが出ます。
ここからいろいろ作り始める感じですね。

URLが気になる方はDocumentRootとか変えると良いかも。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1642231/1bc0f3ca-ce90-2363-b343-53662207df74.png)

## Failed to open stream: Permission deniedと出た時
```
The stream or file "/var/www/html/laravel/storage/logs/laravel.log" could not be opened in append mode: Failed to open stream: Permission denied
```
よくある権限エラーです。
storageフォルダの権限を変えてしまいましょう。

```sh
chown -R www-data:www-data laravel/storage
# もしくは
chmod -R 777 laravel/storage
```
Katalon Studioで実行時のレポート格納先を取得

##実行時に生成されるReportsディレクトリの場所を取得する
import com.kms.katalon.core.configuration.RunConfiguration
RunConfiguration.getReportFolder()
こちらでレポート格納先を取得できます。


###公式コミュニティのディスカッション
https://forum.katalon.com/t/how-to-get-the-location-of-reports-directory-generated-at-runtime/8753

##レポート保存先をコメントに出力する例

```
import com.kms.katalon.core.configuration.RunConfiguration

'レポートフォルダのパスを取得'
String r_folder = RunConfiguration.getReportFolder()

'コメントに出力'
WebUI.comment(r_folder)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699916/32a4f195-4731-d2e4-d1b5-1af0e094ab5f.png)

##WEBページのスクリーンショットをレポートと同じフォルダに保存する例

```
import com.kms.katalon.core.configuration.RunConfiguration
import groovy.time.TimeCategory

'ブラウザを開く'
WebUI.openBrowser("")

'ダミーサイトに遷移'
WebUI.navigateToUrl('https://katalon-demo-cura.herokuapp.com/')

'レポートフォルダのパスを取得'
String r_folder = RunConfiguration.getReportFolder()

'日付を扱う変数宣言'
Date today

'クラス「TimeCategory」を使って現在の日付時刻を取得'
use(TimeCategory, { today = new Date() })

'年月日-時分秒 に整形した文字列を取得'
String today_s = today.format('yyyyMMdd-HHmmss')

'組み合わせてスクリーンショットファイルの名前を作る'
String filename = ((r_folder + '/screenshot/') + today_s) + '.png'

'スクリーンショットを撮る'
WebUI.takeScreenshot(filename)

'保存したファイル名をコメントに出力'
WebUI.comment(filename)

'ブラウザを閉じる'
WebUI.closeBrowser()
```
上記はレポートが格納されるディレクトリ内にタイムスタンプで命名されたスクリーンショットを保存します。
[Custom Keywords](https://docs.katalon.com/katalon-studio/docs/introduction-to-custom-keywords.html#create-a-custom-keyword)に用意しておくと便利です。
機械学習-非線形回帰モデル

#非線形回帰モデル
大抵のケースはデータを線形で捉えられるようなことは少ない。
非線形で捉えられるようにする。

```math
\hat{y} = w_0 + w_1\phi_1(x) + w_2\phi_2(x) ...
```
非線形といっても、線形モデルの x が $\phi(x)$ に変わるだけ。
そして、w(重み)に着目すると線形なんです。

###基底展開法
回帰関数として、基底関数と呼ばれる既知の非線形関数とパラメータベクトルの線型結合を使用する。
要するに、基底関数をいくつか足し合わせるといい感じの曲線を作ることができるわけで。

####基底関数
- 多項式関数

```math
\phi_j = x^j
```

- ガウス型基底関数

```math
\phi_j(x) = exp\left\{ - \frac{(x-\mu_j)^2}{2h_j} \right\}\\
下記のようにも記述する。\\
\phi_j(x) = exp\left\{ - \frac{(x-\mu_j)^2}{\sigma^2} \right\}
```

${2h_j}$, $\sigma^2$は２つの山の頂点の距離をコントロールするというイメージ
ガウス型関数の2つの山の頂点の幅(広がり)を学習によって狭めていくイメージ。


- スプライン関数/Bスプライン関数

省略します。

####未学習と過学習

○未学習とは？
学習データに対して、十分小さな誤差が得られないモデル
■(対策)モデルの表現力が低いため、表現力の高いモデルを利用する

○過学習とは？
小さな誤差は得られたけど、テスト集合誤差との差が大きいモデル
■(対策1) 学習データの数を増やす
■(対策2) 不要な基底関数(変数)を削除して表現力を抑止
具体的には
・基底関数の数や位置、バンド幅を減らす。
多けりゃいいってもんではない。
・適切な基底関数を用意する。
なんでもいいってもんではない。

■(対策3) 正則化法を利用して表現力を抑止する。
算出された値を補正してあげる。
式で表現すると下記のようになる。

```math
S_\gamma = (y - \phi w)^T(y -\phi w) + \gamma R(w)
```

$\gamma R(w)$が罰則。
$\gamma$ は係数。
今までと同じ書き方をすると。。。

```math
E(w) = MSE + \lambda w^Tw
```

目的はMSEを最小化したい。罰則でうまく制御する

####正則化項
- 正則化項がない -> 最小二乗推定量
- L2ノルム(丸)を使用 -> Ridge推定量。いくつかのパラメータは限りなく0に近づく。
- L1ノルム(四角形)を使用 -> Lasso推定量。いくつかのパラメータが0になる。


$\lambda w^Tw$ が罰則

縮小推定：パラメータを0に近づけるように検定する。
スパース推定：いくつかのパラメータを0に近づけるようにする。
機械学習-線形回帰モデル

#線形回帰モデル
教師あり学習。

一次直線で値が予想できるもの。
要するに線型結合するもの。

```math
\begin{align}
\hat{y} &= w^Tx + w_0 \\
&= \sum_{j=1}^mw_jx_j + w_0
\end{align}
```

$w_j$の最適値を求める。

```math
y = w_0 + w_1x_1 + \epsilon
```

$y$:目的変数
$w_0$ : 切片
$w_1$ : 回帰係数
$x_1$ : 説明変数
$\epsilon$ : 誤差

切片と回帰係数を機械学習で求める。
具体的には、最小二乗法により推定する。

##最小二乗法
線形回帰モデルのパラメータは最小二乗法で求める。
予測値と実際の値の差が最小になるようにしていきます。

二乗誤差

【注】^ は予測値という意味です。

```math
\sum_i(\hat{y_i}-y_i)^2 = \sum_i\epsilon_i^2\\
```

iの総和を取ると言うこと。　二乗するとマイナスを考えなくても良くなる。

```math
\hat{y_i}-y_i = \epsilon_i
```

平均二乗誤差(二乗損失)のことを、MSE と言います。

二乗損失は一般的に外れ値に弱い。
$\rightarrow$ Huber損失、Tukey損失と言うものを使うと良い。

平均二乗誤差は下記式になる。

```math
MSE_{train} = \frac{1}{n_{train}}\sum_{i=1}^{n_{train}}(\hat{y}_i^{(train)} - y_i^{(train)})^2
```

この値を最小になるように求めていく。
最小値を求めるためには、勾配が 0 になる点を探す。
MSEの式を微分して計算する。

どう言うことかというと、下記になる値を計算する。
wで偏微分すると MSEは w の一次関数になります。
欲しいのは w です。

```math
\frac{\partial}{\partial w}MSE_{train} = 0
```

```math
\frac{\partial}{\partial w}MSE_{train} = 0\\
\rightarrow \frac{\partial}{\partial w} \left\{ {\frac{1}{n_{train}}\sum_{i=1}^{n_{train}}(\hat{y}_i^{(train)} - y_i^{(train)})^2} \right\} = 0
```

$\hat{y}^{(train)}$を展開する。

```math
\frac{\partial}{\partial w} \left\{ {\frac{1}{n_{train}}\sum_{i=1}^{n_{train}}(x_i^{(train)}w_i - y_i)^2} \right\} = 0\\
```

して、さらにX,Y,Wにして、行列表現すると。。。

```math
\frac{\partial}{\partial w} \left\{ \frac{1}{n_{train}}(XW-Y)^T(XW-Y) \right\} = 0
```

具体的な行列で記述すると、(XW-Y)は下記のようになる。。

```math
XW-Y = \left (
\begin{array} {ccccc}
x_{11} & \cdots & x_{1i} & \cdots & x_{1m}\\
\vdots & \ddots & & & \vdots \\
x_{i1} & & x_{ii} & & x_{im} \\
\vdots & & & \ddots & \vdots \\
x_{n1} & \cdots & x_{ni} & \cdots & x_{nm}
\end{array} \right )

\left (
\begin{array} {c}
w_{1}\\
\vdots\\
w_{i}\\
\vdots\\
w_{m}
\end{array} \right )
-
\left (
\begin{array} {c}
y_{1}\\
\vdots\\
y_{i}\\
\vdots\\
y_{n}
\end{array} \right )
=0
```

さらに、X,Y,Wの状態で偏微分の式を展開すると。。。

```math
\rightarrow \frac{1}{n_{train}}\frac{\partial}{\partial w}
\left\{ (W^TX^TXW - W^TX^TY - Y^TXW + Y^TY) \right \} = 0\\
\rightarrow \frac{1}{n_{train}}\frac{\partial}{\partial w}
\left\{ (W^TX^TXW - 2W^TX^TY + Y^TY) \right \} = 0\\
```

そして、Wで偏微分します。

```math
\rightarrow \frac{1}{n_{train}}
\left\{ 2X^TXW - 2X^TY \right\} = 0
```

【注】偏微分は一般的に下記のようなことになります。なるです。はい。
Aを対称行列として。。。

```math
\begin{align}
\frac{\partial(w^Tx)}{\partial w} &= x\\
\frac{\partial(w^TAw)}{\partial w} &= (A+A^T)x = 2Ax
\end{align}
```

ここで、欲しいのは wなので、$\frac{1}{n_{train}}$は気にしない。

```math
\left\{ 2X^TXW - 2X^TY \right\} = 0\\
\rightarrow X^TXW = X^TY\\
\rightarrow (X^TX)^{-1}(X^TX)W = (X^TX)^{-1}X^TY\\
\rightarrow W = (X^TX)^{-1}X^TY\\
```

Wはこれで計算できるようになりました。
wとYの予測値は、下記のようになる。

```math
\hat{W} = (X^TX)^{-1}X^TY\\
\hat{Y} = X_*\hat{W} = X_*(X^TX)^{-1}X^TY\\
```

【注】$X_*$ は予測したい新たな入力点です。

最尤法(もっともらしい値を求める)を使って回帰係数の推定をします。
最尤法を使うと、何が良いかというと。。。
○誤差を正規分布に従う確率変数を仮定し尤度関数の最大化を利用した推定も可能
○線形回帰の場合には、最尤法による解は最小二乗法の解と一致
VBA エクセル　集合縦棒グラフ

![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614609/dc042ad7-0718-c7b2-1037-46cde5543975.jpeg)


```vb
Sub 集合縦棒グラフの作成()
    With ActiveSheet.ChartObjects _
    .Add(400, 25, 450, 300).Chart
    .ChartType = xlColumnClustered
    .SetSourceData Source:=Range("B3:C22,E3:E22")
    .HasLegend = True
    .Legend.Position = xlLegendPositionBottom
    End With
    '第2軸の折れ線グラフを作成
    With ActiveSheet.ChartObjects(1).Chart.SeriesCollection(2)
        .ChartType = xlLineMarkers
        .Values = Range("E3:E22")
        .AxisGroup = xlSecondary
    End With
    '表示単位の変更
    With ActiveSheet.ChartObjects(1).Chart _
            .Axes(xlValue, xlPrimary)
            .DisplayUnit = xlMillions
            .DisplayUnitLabel.Orientation = xlHorizontal
    End With
    '第2軸をパーセント表示
    With ActiveSheet.ChartObjects(1).Chart _
        .Axes(xlValue, xlSecondary)
        .TickLabels.NumberFormatLocal = "0%"
    End With
End Sub

```
AtCoder Beginner Contest 193 C問題

AtCoderを始めましたが、ABCのA・B問題はほぼ解ける、C問題は運が良ければ解けるというレベルです。
まずはC問題を難なく解けるというの目標に、まずは過去問のC問題までをどんどんやっていってます。

自力では解けなかった問題を、解説を見て、理解した内容の整理とその結果のコードを書いていきたいと思います。

#問題

https://atcoder.jp/contests/abc193/tasks/abc193_c

>整数 N が与えられます。 1 以上 N 以下の整数のうち、 2 以上の整数 a,b を用いて $a^b$ と表せないものはいくつあるでしょうか？

#解けなかった原因
問題文を素直に説こうとすると、２〜Nまで総当たりで試して数えていくことになるが、計算量が多すぎてTLEになってしまう。

#解き方
・表せないものよりも表せるものの方が数が圧倒的に少ないので、表せるもの一覧を作り、Nから一覧の個数を引いて答えを出すようにする。
・累乗なので、Nまで試行する必要はなく、Nの平方根までで十分。
・$2^4=16$と$4^2=16$など別の組み合わせで同じ数になることを考慮する。

#ACしたコード
```python

import math

N = int(input())
end = math.ceil(math.sqrt(N))+1

l = {}
for i in range(2,end) :
    for j in range(2,end) :
        n = i**j
        if n > N :
            break;
        l[n] = 1

print(N-len(l))
```
全部消えたらクリア画面を表示

ブロック崩しゲームを作成していて、全部消えたらクリア画面に遷移したいと思います。
全部消えたらの表現はタグを作って実装しています。

```C#:GameClear 
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;  //シーン遷移に必要な記述

public class GameClear : MonoBehaviour
{
private GameObject[] BlockObjects;  //GameObjectにBlockObjectsを格納します

    void Update()
    {
        //消えるオブジェクトにBlockタグをつけます。
        BlockObjects = GameObject.FindGameObjectsWithTag("Block");

        if (BlockObjects.Length == 0)  //Blockタグがついてる残りが0になれば
        {
            SceneManager.LoadScene("GameClear");  //クリアシーンを表示
        }
    }
}
```
シーン遷移する時はBuildsettingもしないといけません。
※以前にBuildsettingのやり方を書いた記事があります。

これで無事、ブロックが全て消えた時にシーンが切り替わるようになりました。
ここで注意点なのですが、このスクリプトは消えるブロックにアタッチすると
全部消えた際にシーンは切り替えされません。
理由はブロックが消えてしまったらゲーム中にヒエラルキー上のブロックオブジェクト自体も消えてしまい、アタッチしたスクリプトも消えてしまいます。
なので、他のオブジェクトにアタッチするか、新たにオブジェクトを作成する必要があります。
こういうミスする人はいないかもしれませんが、私はこれで悩まされました(笑)
【AtCoder】ABC206をPython3で解説

ABC206の解説。

https://atcoder.jp/contests/abc206

## A - Maxi-Buying
### 解説
`N`の消費税込みの値段を、206円と比較してどうなるかという問題。

`N`にそのまま1.08をかけると、0以下の数字が表示されてしまうため、`p = N * 108 // 100`として、表示させないようにすれば良い。

あとは`if`で場合分けをすると完成。

### コード

```python
N = int(input())

p = N * 108 // 100

if p < 206:
    print('Yay!')
elif p == 206:
    print('so-so')
else:
    print(':(')
```

## B - Savings
### 解説
i日目の朝にi円を入れるという問題。

`while`を用いて、`day`を`total`に足していく。足していく中で`total`が`N`以上となれば、`while`ループを抜け、`day`を出力する。

また、`while True:`として、`break`を用いる方法もある。

### コード1

```python
# while 条件文:
N = int(input())

day = 0
total = 0

while total < N:
    day += 1
    total += day
    
print(day)
```

### コード2

```python
# while True:
N = int(input())
day = 0
total = 0

while True:
    day += 1
    total += day

    if total >= N:
        print(day)
        break
```

## C - Swappable
### 解説
`N`個の数列からなる配列`A`のうち、条件を満たす$(i, j)$の数を求めるという問題。

今回の条件では、「条件を満たすものを数える」よりも、「条件を満たさないものを数えて、全体から引く」という操作のほうが、計算量を少なく計算できる。

また、重複した値を数えなければならないので、`dict()`を使う。

今回、`A = [1, 2, 1, 3, 2]`の場合を考える。

まず、`for i in range(N):`で`A`の要素数分、ループを回す。
`if A[i] not in cnt.keys():`で、設定した辞書`cnt = {}`の中に値がなければ、値を数えるために、`0`を追加しておく必要がある。

そして、現時点の`cnt`に含まれている数である`i`から、重複のある$i = j$の数を引いてあげることで、現時点での今回の条件を満たす数を求めることができる。

これを`ans`に加えることによって、最終的な条件を満たす整数組の数を求めることができる。
`cnt[A[i]] += 1`は、同じ数が何個あるのか数える操作である。

### コード

```python
N = int(input())
A = list(map(int, input().split()))

cnt = {}
ans = 0

for i in range(N):
    if A[i] not in cnt.keys():
        cnt[A[i]] = 0
    
    ans += i - cnt[A[i]]
    cnt[A[i]] += 1

print(ans)
```

## 編集後記

もう少しC問題を頭良く解けたらなーと感じた今日このごろ。
HerokuでとりあえずJava(Spring Boot)アプリを動かすまでのメモ

自分用のメモです。

`Heroku` でJava(Spring Boot) のアプリを最低限動かすまでのメモです。

アカウントの作成、CLIのインストール(ログイン済)は済んだ状態です。



## Heroku側でアプリを新規作成
Herokuのページ上で

- New から `Create New App` を選択
- `App name` を入力、`region` はそのままUSで

とするとアプリを作成することができます。

コマンドラインで作る場合は `heroku create` を実行する。

## Heroku Postgres の追加
[Heroku Postgres](https://elements.heroku.com/addons/heroku-postgresql) は`Hobby Dev` のプランなら無料で使うことができます。

- レコード数10,000 
- ストレージ1GB
- 接続数20

という制限があるが趣味で使う分なら問題なさそう

### 追加の方法
Herokuのページ上で `Resources` タブから `Add-ons` から `Heroku Postgres` を選んで
Plan Name を Hobbyを選んで(初期値でした) で `Submit Order Form` を実行

## Javaアプリの用意
`Spring Initializr` で用意しました。 Javaは11

- Sprint Web
- Thymeleaf
- PostgreSQL Driver
- Thymeleaf
- Spring Boot DevTools

を選択して作成

### application.propertiesの設定

とりあえずこんな感じにした

```
#Datasource
spring.datasource.url=jdbc:postgresql://localhost:5432/test_db
spring.datasource.username=test_user
spring.datasource.password=test_user
spring.datasource.driver-class-name=org.postgresql.Driver

spring.datasource.hikari.connection-timeout=30000
spring.datasource.hikari.maximum-pool-size=10

#Jackson
spring.jackson.time-zone=Asia/Tokyo


logging.level.org.springframework=INFO

#spring.profiles.active=production

server.port=${PORT:8080}
```

これは自端末で動かすための設定です

### DB接続設定について
[Using the SPRING_DATASOURCE_URL in a Spring Boot app](https://devcenter.heroku.com/articles/connecting-to-relational-databases-on-heroku-with-java#using-the-spring_datasource_url-in-a-spring-boot-app)
によると `Heroku`上で動かすときは起動時にDBのURL,ユーザー,パスワードの`Spring Boot`用の環境変数として設定が上書きされるので、特にこのまま変更する必要はないです。

### ポートについて
ポートは環境変数の`PORT` で渡されるので
上書きできるように`server.port` で設定しておきます。

### Javaのバージョン設定
Javaのバージョン設定は `system.properties` でします。
プロジェクト直下にファイルを作り

```
java.runtime.version=11
```

と書きます。

### Procfile の設定
アプリを動かすための設定？
プロジェクト直下にファイルを作り `Procfile` を作り

```
web: java -jar target/(成果物のファイル名).jar
```

としておきます。

ドキュメントは

- [Define a Procfile](https://devcenter.heroku.com/articles/getting-started-with-java#define-a-procfile)
- [The Procfile](https://devcenter.heroku.com/articles/procfile)

あたり

あとはこのまま開発を続けます。

## デプロイ
Herokuのページ上で `Deploy` タブ に移動します。
デプロイの方法は 3つくらいあるみたいですが 今回は `Heroku Git` にします。

`Deploy using Heroku Git` の内容に従いデプロイします。

```
git init
heroku git:remote -a (アプリ名)

git add .
git commit -am "make it better"
git push heroku master
```

完了後
`heroku open` を実行すれば開くことができます。

## その他

### 動いているものの一覧

```
heroku ps
```
で確認できる。

### ログを見る

```
heroku logs --tail
```

### Config変数の設定
Herokuのページ上で `Settings` ページの `Config Vars` で設定できる。

コマンドライン上では
`heroku config` で確認できる

また

```
heroku config:set XXX="bbbb"
```
とするとコマンドラインで設定することもできる。

Javaプログラムからは

```java
System.getenv("XXX")
```
で取得できる。

ローカルで開発時は `.env` ファイルを用意して `heroku local web`で実行すればよい(はず)
`.env` ファイルはコミットしないように `.gitignore` に入れておく