OmniAICreator/Qiita-1.07M huggingface dataset:
Pythonのlocals関数で、ローカル変数のスコープを確認する。

#概要

Pythonのlocals関数で、ローカル変数のスコープを確認する。

#確認結果

##locals()

helpより

```
locals()
    Return a dictionary containing the current scope's local variables.

    NOTE: Whether or not updates to this dictionary will affect name lookups in
    the local scope and vice-versa is *implementation dependent* and not
    covered by any backwards compatibility guarantees.
```

##確認に使ったコード
Pythonに不慣れな感じが出てますが。。。。

```python

g0_val = "g0"

def func1():
    func1_val = "f1"
        
class Class1():
    class1_val = "c1"
    
def func2():
    func2_val = "f2"
    
    class Class2():
        class2_val = "c2"
        print("class2-locals",locals())
        
    for y2 in range(1):
        range2_val = "r2"
    
    def func3():
        func3_val = "f3"
        
        class Class3():
            class3_val = "c3"
            
        for y3 in range(1):
            range3_val = "r3"
            
        print("fun3-locals",locals())
    
    func3()        
    print("fun2-locals",locals())
    
func1()
func2()


```

以下のようになりました。

```
C:\_qiita\python_etc\_locals>python test_locals.py
class2-locals {'__module__': '__main__', '__qualname__': 'func2.<locals>.Class2', 'class2_val': 'c2'}
fun3-locals {'func3_val': 'f3', 'Class3': <class '__main__.func2.<locals>.func3.<locals>.Class3'>, 'y3': 0, 'range3_val': 'r3'}
fun2-locals {'func2_val': 'f2', 'Class2': <class '__main__.func2.<locals>.Class2'>, 'y2': 0, 'range2_val': 'r2', 'func3': <function func2.<locals>.func3 at 0x000002B3CED922F0>}
```

## 確認できたこと

確認できたことは、以下。

* 関数とクラスのブロックは、独自のスコープを持つ。
* 上記以外（for文とか）のブロックはスコープを持たない。

言葉で表現するとしたら、
**関数とクラスのみブロックスコープを持つ**
でしょうか。

何か、固有名詞でそれが表現されるといいのですが。。。

#まとめ
特にありません。
コメントなどあれば、お願いします。

（実際に検討したかったのは、コードの多くの部分を関数に移動したりしたらどうなるかとかで、
おそらく、特別なことをしていない場合、スコープがローカルになる感じのみで、あまり問題ないのだろうと感じました。）
[Python] Foliumのコロプレス図(Choropleth)でデータがないと黒くなる箇所を白くする

How to make black colored area in Folium Choropleth white where data is missing; simply set the nan_fill_color

##この記事について

現在、Foliumのコロプレス図(Choropleth)を勉強中ですが、ネットに掲載されているものはきちんと動かないものが多く、苦労しています。そんな中、こちらのサイトのものはきちんと動作して、非常に参考になりました。

Pythonでビックマック指数のヒートマップ世界地図を作ってみる
https://techray.hatenablog.com/entry/2019/12/16/200248

しかし、表示される地図で、ビックマック指数がないところ（マクドナルドの店舗がないところ？！）は黒くなり、ちょっと見ずらいです。（厳密にはダークグレーですが、黒として進めます）

BEFORE （こんな感じ）
![before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/823476/64f172c9-f073-812f-c77c-67d44d13f396.png)

AFTER ちょっと、黒を白くしてみました！

![after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/823476/6f5c73cf-3ad0-4691-4a6a-ce14dcf7105e.png)

こうしてみると、一番、ビッグマックが高いのはスイスであることが分かりやすかと思います。

##何を変えたか

元のサイトに掲載されるデータはそちらで見ていただきたいのですが、以下、nan_fill_colorという箇所を１行追加しました。

```python

# 地図に色を塗る
folium.Choropleth(
geo_data=geojson,
name='choropleth',
data=df,# 描画データ
columns=['iso_a3', 'dollar_price'], # ["国コード", "値の列"]
key_on='feature.id',
fill_color='OrRd',# 色指定
fill_opacity=0.7, # 色の透明度
line_opacity=1,#国境線の透明度
nan_fill_color="white",  ####  ここでdfにない国は白にする！！！ #####
legend_name='big mac index dollar_price' #凡例
).add_to(m)

```

これはFoliumのdocumentationに記載されていましたが、あまり知られていないようです。
https://python-visualization.github.io/folium/modules.html

nan_fill_color (string, default 'black') – Area fill color for nan or missing values. Can pass a hex code, color name.

値のないものはNaN扱いとなり、その色を指定できるようです。
色を指示する他にも透明度を変えることもできるそうです。

##その他
こちらのコロプレス図のデータは、けっこう粗かった。日本はこんな感じ。。
![スクリーンショット 2021-01-11 084242.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/823476/82885a95-0548-ae2b-6e99-20cf35419123.png)
結局、境界線をポイントでつないでポリゴンで表現していることが分かりやすい。
PHP命名規則

##はじめに
昨日は環境設定を行ったので今日はPHPの変数命名規則について触れたいと思います
テックキャンプと言う今絶賛（いい意味でも悪い意味でも）人気スクールでrubyを少しかじっていたのそれの比較も込になります
違っていると言う意見がありました容赦無く、

```
Fool = ちげーよ
puts Fool
```

と叱責してください（）

##と言うわけでPHPの変数命名規則

さて、先ほど何気なくrubyで代入してputsで出力しましたが、当然PHPでは違います
違うと言うと語弊がありますね
表記の仕方が違うだけで、変数とか代入とか出力は同じです
違うのは言葉が違います

自分語りで申し訳ないのですが、私が大学時代、教授からプログラミング言語は使う言葉が違うだけで、意味合いは同じ、標準語と関西弁くらいの違いと教わりました。
要は何が言いたいかと言うと文法は同じって事ですね

前置きが長くなりましたが

この”Fool”が変数
”ちげーよ”が文字列になります
で、＝　で変数に文字列が代入され、putsで画面に出力されるとう仕組みでRubyは動いてます

でもPHPはちょいと違います
違うと言っても文法ではなく（ry

- 最初は必ず＄マークをつける
- 英単語、英単語＋数字、日本語OK
- ＄マーク後数字、空白、記号はNG
- ややこしくなるので極力小文字を使用

となっております
＄を付けたりするのはrubyではなかったでよね

つまりさっきのFool〜をPHPで表現すると

```
$fool = ちげーよ
print(＄fool)
```

になるわけですね
ちなみにprintと言うのはrubyで言うputsのようなものです
この様に言葉は違いど文法は同じと言う事が伺えますね

以上です
次回はwhile for　foreachについて触れたいと思います
コールバック関数の結果をどこかに保存したい時

TkinterのGUIアプリを作成する時に出会った問題
bindメソッドが呼び出したコールバック関数の処理結果をどうやって保存できるか
(=マウスなどのユーザー操作がイベントとしてトリガーし、コールバック関数を呼び出す）

手順として下記の通り:
1. インスタンス変数の形で処理結果を保存するクラスを定義
2. 手順1で定義したクラスに基づいて、オブジェクトを1個作成しておく
3. bindメソッドを呼び出す時に手順2のクラスオブジェクトをコールバック関数に渡す
4. コールバック関数内で渡された引数のクラスオブジェクトに対して処理結果を設定

下記のサンプルコードではTkinter GUIウィンドウが表示された後、
bindメソッドにより、左マウスボタンがクリックされるたびにb1Pressedというコールバック関数が呼びされる
ラムダ関数の形でb1Pressedに渡される引数としてイベント(e)自体以外、obj1というクラスオブジェクトも指定する
b1Pressedは呼び出されるたびにobj1.var_hogeに1を加算し、処理結果はobj1.var_hogeに保存する

```guiTest.py
import tkinter as tk
from tkinter import ttk
import PIL
from PIL import Image,ImageTk

root = tk.Tk()
root.title('hoge')
root.minsize(796,816)

#画像の読み込み
img = PIL.Image.open(r"C:\Users\User\Desktop\experiment\a.png")
im = PIL.ImageTk.PhotoImage(img)

#マウスクリックイベントハンドラー
def b1Pressed(e, obj1):
        print("b1Pressedが呼び出された！")
        obj1.var_hoge += 1
        print("var_hogeは"+ str(obj1.var_hoge))
#コールバック関数で行った変数の処理結果を格納する用のクラス
class storeVar():
    def __init__(self):
        self.var_hoge = 0

#Canvas設定
cvs = tk.Canvas(bg="black", width=796, height=816)
cvs.place(x=0, y=0)
cvs.create_image(0,0,image=im, anchor=tk.NW)

#クラスオブジェクトを準備
obj1 = storeVar()

#マウスボタンが押された時にイベントハンドラーを呼び出す
cvs.bind("<ButtonPress-1>", lambda event, arg=obj1:b1Pressed(event, arg))
root.mainloop()
```

処理結果は以下の通り(4回左マウスボタンをクリックした結果)

```guiTest.pyの実行結果
b1Pressedが呼び出された！
var_hogeは1！
b1Pressedが呼び出された！
var_hogeは2！
b1Pressedが呼び出された！
var_hogeは3！
b1Pressedが呼び出された！
var_hogeは4！
```
「Vision Transformer (ViT)」のAttention_Mapと、GradCAMを比べる。

#概要

「Vision Transformer (ViT)」のAttention_Mapと、普通のCNNのGradCAMを比べてみました。

（この類の検討には、ワタシは、そもそもの懸念※1があり、
オチが着かないのは、やる前から、わあっているのですが。。。）

※1 末尾の「そもそもの懸念とは」、参照。

GradCAMは、以下の自分の記事を引用しました。
[全22行のコードでGradCAM。tf_explainは、使い易いかも、お薦め！](https://qiita.com/enoughspacefor/items/0f4568ecec4f5277cf37)

「Vision Transformer (ViT)」のAttention_Mapは、
https://github.com/faustomorales/vit-keras
の
READMEの
Visualizing Attention Maps
の部分のコードを
使いました。

#評価結果

##attention_map()
コードのhelpより

```
>>> help(visualize.attention_map)
Help on function attention_map in module vit_keras.visualize:

attention_map(model, image)
    Get an attention map for an image and model using the technique
    described in Appendix D.7 in the paper (unofficial).

    Args:
        model: A ViT model
        image: An image for which we will compute the attention map.

>>>
>>>
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342207/fb40e5e3-2549-2b5f-3c1c-529f9a408403.png)

↑は、
https://openreview.net/forum?id=YicbFdNTTy
引用

## 画像１

### Attention_Map

（↓　表示が見づらいので加工しようと考えましたが、どういう計算で表示しているのかわかりませんでした。）

vit_b16(small model)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342207/3033190d-bcb0-5ed0-5ed1-e916b69f5ed3.png)

vit_l16(large model)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342207/44c4957a-f1a1-bb53-da1e-759396d55bbc.png)


### GradCAM
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342207/40028d27-507b-b592-697f-d1d0a31809ad.png)







## 画像2
### Attention_Map

vit_b16(small model)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342207/ef132a31-0963-1117-e3cb-99efb09eb38a.png)

vit_l16(large model)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342207/76b000f9-148b-cf5c-c613-02fb8876eeed.png)


### GradCAM
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342207/a9fcec64-dbe8-30b5-dfb3-a4ff1be87cef.png)

##評価結果に対して

表示方法が違うのでなんともですが、、、
同じような感じですかね。

#まとめ
注目点を示しても、、、なんとも、オチがつかないと予想してましたが、
オチが着かないです。

この画素単位に、注目度を示す、ようなシンプルな表現方法以外の
表現方法が必要だと思います。
これでは、情報不足だと思います。

コメントなどあれば、お願いします。

#そもそもの懸念とは

以下の自分の記事にあるように、あまり、説明をがんばりすぎないほうがいいという懸念。

[畳み込みニューラルネットワーク（CNN)の説明が、頑張りすぎでは？（MathWorksのdeepDreamImageとかも）](https://qiita.com/enoughspacefor/items/01f7ed446a4ccfca5972)
【JavaScript】innerHTMLの使い方

#プログラミング勉強日記
2021年1月10日
今日はinnerHTMLの使い方について簡単にまとめる。

#innerHTMLとは
　HTML要素の中身を変更するときに使われるプロパティである。HTML要素の中身を自由に変更することで、動的なWebページを作成できる。
　
#innerHTMLの書き方
　innerHTMLプロパティは、読み込みと書き込みの両方に対応している。

```js:innerHTMLの書き方
指定する要素名.innerHTML;

// 変数に指定要素のHTMLコードを代入する
let sample = 指定する要素名.innerHTML;

// 指定要素に変数の値を代入
指定する要素名.innerHTML = sample2;
```

##HTML要素を取得する方法

```html:サンプルコード
<html>
  <body>
 
    <div id = "idName">
      <p>Hello World</p>
    </div>
 
  <script>
    var mydiv = document.getElementById("idName");
 
    console.log(mydiv.innerHTML);
  </script>
 
  </body>
</html>
```

```:コンソール結果
Hello World
```

##HTML要素に値を追加する方法

```html:サンプルコード
<html>
  <body>
 
    <h1 id="idName">クリック前</h1>
    <input type="button" value="Click" onclick="myfunc()">
 
    <script>
      var myfunc = function(){
 
        var myh1 = document.getElementById("idName");
        myh1.innerHTML = "クリック後";
 
 
      }
    </script>
 
  </body>
</html>
```

実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/2663838b-dea5-ccc1-a892-334c0c02b7bf.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/7f3ff0c9-c85d-94ba-e8c3-64477a9d208f.png)


##HTMLタグを変更する方法

```html:サンプルコード
<html>
  <body>
 
    <div id="idName">
      <h1>クリック前</h1>
    </div>
 
    <input type="button" value="Click" onclick="myfunc()">
 
    <script>
      var myfunc = function(){
 
        var mydiv = document.getElementById("idName");
        mydiv.innerHTML = "<h3>クリック後(h3に変更)</h3>";
 
      }
    </script>
 
  </body>
</html>
```

実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/8c638bf1-137c-a9a7-39d8-4ac9416a3d25.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/43b19295-dc75-de05-0ffc-9d8dfbe5a3d2.png)



#参考文献
[要素の中身を変える！JavaScriptでinnerHTMLの使い方【初心者向け】](https://techacademy.jp/magazine/15332)
[【JavaScript入門】innerHTMLでdivタグ内の要素を取得、設定する方法](https://www.sejuku.net/blog/26442)
[HTML5] ページ内リンクの方法

#ページ内リンクとは？
同じページ内の特定部分にジャンプするリンクのことです。


#ページ内リンクのHTML5記述方法
アンカー要素のid属性で値を指定します。
例えば、以下のようになります。

```
<a id="about">説明</a>
```

アンカー要素のhref属性の属性値に先ほど指定したidを `#` を付けて指定します。

```
<a href="#about">説明の位置へジャンプします</a>
```

aタグ以外にも、h1やdivなどの色々な要素でid属性が指定でき、ページ内リンクが作れます。
沼った　CentOS7  Your requirements could not be resolved to an installable set of packages. 

#前書き
VPSでLaravelをインストールしたけど。
な、なんと！Laravelの本幹でもある`vendor`ファイルがない！！
`git clone`するとないよね。。😭
ぐぐると`cpmposer install`打てばいいとのこと。
試した結果、タイトルのエラー`Your requirements could not be resolved to an installable set of packages. `がでて沼ったので、その備忘録です😎
目標はvendorファイルの作成とLaravelのブラウザ表示です！（今回はそこまで書いてあります）
#VPS環境
CentOS   varsion 7.9
php      varsion 7.1.33
Composer version 1.8.4 
#実際の対応
```
①rootに入り下記のコマンドを打つ
# yum install --enablerepo=remi,remi-php70 php php-devel php-mbstring php-pdo php-gd

②rootをexitし、下記のコマンドを打つ
$ composer install
↑成功すればvendorファイルが作成されている！

==========================================

※③以降はおまけ[Laravelをブラウザに表示するまで]
Laravel直下でコマンドうってね！

③*アプロケーションキーを作成
$ php artisan key:generate

④権限変更
$ chmod -R 777 bootstrap/cache
$ chmod -R 777 storage/

//最後にブラウザでLaravelのホーム画面を確認。
URLは　http://[IPアドレス]/[Laravelファイル名]/public
```


アプリケーションキーとは？？
>アプリケーションキーは暗号化の際に利用されるランダムな英数字32文字です。
※ 変更されると復号化に影響が出るので、運用(キーが設置された)後には実行NG
参考サイト
[[Laravel5.5] APP_KEY の行方を追う](https://qiita.com/yk2220s/items/dcbf54c6d1f33a0cb06f)

以上になります！
VPSの構築は初めてなので、なんにもわからずのまま沼ってました！
沼る時間ってもったいないので、皆さんの時間節約、いらいら防止になれば！っと思います！
LGTM大好物なんで、ポチッと投げ銭感覚でおねがいします〜！ :sunglasses:
RasPi＋FastAPIを使う


ラズベリーパイ上でFastAPIを使用するために、Python3.8以上をインストールする必要があるようなので、まずPythonのインストールを行い、そのあとでFastAPIのインストールを行う。

## FastAPIをインストールするために、ラズベリーパイのPythonを3.8.xへアップデートする。

```terminal
$ sudo apt-get install -y build-essential tk-dev libncurses5-dev libncursesw5-dev libreadline6-dev libdb5.3-dev libgdbm-dev libsqlite3-dev libssl-dev libbz2-dev libexpat1-dev liblzma-dev zlib1g-dev libffi-dev tar wget vim

$ wget https://www.python.org/ftp/python/3.8.7/Python-3.8.7.tgz
$ sudo tar zxf Python-3.8.7.tgz
$ cd Python-3.8.7
$ sudo ./configure --enable-optimizations
$ sudo make -j 4
$ sudo make altinstall
$ echo "alias python=/usr/local/bin/python3.8" >> ~/.bashrc
$ echo "alias pip=/usr/local/bin/pip3.8" >> ~/.bashrc
$ source ~/.bashrc
```

## FastAPIをインストール

```terminal
$ pip install pip --upgrade
$ pip install fastapi
$ pip install uvicorn
```

## Python サーバサンプル
```python:dht_server.py
import uvicorn
from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def root():
    return {"message": "Hello World"}

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=8000)
```

## サーバ起動

```bash
 $ python dht_server.py 
INFO:     Started server process [10939]
INFO:     Waiting for application startup.
INFO:     Application startup complete.
INFO:     Uvicorn running on http://0.0.0.0:8000 (Press CTRL+C to quit)
INFO:     127.0.0.1:40366 - "GET / HTTP/1.1" 200 OK
INFO:     127.0.0.1:40370 - "GET /favicon.ico HTTP/1.1" 404 Not Found
```
【Rails】よっ！Active Strage！有能なGem！〜2つのテーブルから画像を保存できる〜

### ずっと謎だったこと
Active Strageで画像を保存する時に二つのテーブルから保存できるのか？ということがずっと疑問でした。
現在オリジナルアプリを開発中なのですがレビューサイトのため、
**①ユーザーのプロフ写真**
**②レビュー対象の写真**
この二つを保存したかったのですが複数のテーブルから保存する方法がいまいちよくわからなかったため、ユーザーのほうはtext型にて保存、Active Strageを使用するのはレビュー対象のみとしていました。
本日、マイグレーションをrollbackしなければいけないミスがあり、ついでだからやってみようと思い立ち、以下の作業をしました。

`・ユーザーテーブルに保存していた画像保存予定だったカラムを消去`
`・ユーザー登録時＆レビュー対象登録時にそれぞれ写真が保存できるか確認`

まずはマイグレーションを編集します。


```terminal
% rails db:rollback  
```

このコマンド、最初は実行するのがとてもとても怖かったです（初心者あるある
その後、状況がどうなっているかをしっかり確認するためステータスをチェック。

```terminal
% rails db:migrate:status  

database: party_freak_development

 Status   Migration ID    Migration Name
--------------------------------------------------
   up     20210107124355  Devise create users　　　　　　　　　        ⬅️変更目標はここ
   up     20210108071047  Create parties 
   up     20210108094951  Create active storage tablesactive storage
   up     20210108122152  Rename iintroduction column to parties　　⬅️リネームした履歴
   up     20210108123328  Rename date id column to parties　　　　　 ⬅️リネームした履歴
  down    20210108130921  Change column to allow null　　　　　 ⬅️null制約変更した履歴

```
下の3つは昨日変更したテーブルのカラムの名前とnull制約に関するマイグレーションファイルです。
よくよく考えたらリネームしてマイグレーションファイルを増やすならrollbackしてマイグレーションファイルを直に修正したほうが余計なファイルが増えなくていいんじゃないか？
と気付き、rollbackを繰り返し行って下の3つのマイグレーションファイルをコードエディタ上から右クリック→削除しました。スッキリ。

繰り返す時はこのコマンドが便利です。

```terminal
 % rails db:rollback STEP=5 
　　　　　　　　　　　 　　　　⬆️=の後にdownを0とし(次のupから1と数える)その回数だけrollback
　　　　　　　　　　　　　　　　 今回の自分のケースだと５でした
```

### よく見たら一瞬焦ったこと
```terminal
== 20210108094951 CreateActiveStorageTables: reverting ========================
-- drop_table(:active_storage_attachments, {})
   -> 0.0470s
-- drop_table(:active_storage_blobs, {})
   -> 0.0363s
== 20210108094951 CreateActiveStorageTables: reverted (0.0847s) ===============

```
**Active Strageがdropになってるううううううううううううう！**
**またやらかしたああああああああああああああああ！**
一瞬焦ったが`db:migrate`で、きっとまた会えるよね？そう信じて次に進む。

ユーザーモデルにActive Strageを使えるようにする記述を行います。

```app/models/user.rb
class User < ApplicationRecord
  
  has_one_attached :image　　⬅️これを記述

〜以下略〜
  
end
```
**①ユーザーモデル**
**②レビュー投稿モデル**
合計2つのモデルに`has_one_attached :image`を記述しました。


そしてマイグレーションファイルから画像保存用の記述を削除して、db:migrateをする。

### 結果

![5d39289236b741ec2dcc8f2c4ed856eb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/887559/743eaa67-a82d-9f63-9f4a-994d89c87be7.png)

record_typeというカラムに**User**と**Party**という2つの表示がされています。
#### 大成功！(やっぱり会えたねActive Strage


### 気になったこと
ユーザーは複数枚の画像投稿(もしくは動画)が可能なように考えているのですが、もう1つテーブルを作ってそこに`has_many_attached`を使って保存されるのだろうか？
複数の場合は`has_one`から`has_many`に変わるとのことですがこのカラムを見ているとできそうな雰囲気も感じますが、実際にやってみた結果はまたこちらで記事を書こうと思います。

以上、Active Strageで2つのテーブルから画像を保存する方法でした。
undefined method error が出た

プロフィール画像投稿機能を作成中に

undefined method `profile_image_attachment_definition' for #<User:xxxxx>  
というエラーが出ました。

you mean -- profile_image_id_change?
って出たのでtypeしてみたけど直らない。そりゃchange?とか初めて見たしとか思いながらいろいろ見直したら直った！


問題点１
users_controller_rb のuser_paramsに　：profile_imageカラムが指定されていなかった。
↓以下に変更
private 
def user_params
params.require(:user).permit(:name, :profile_image)


問題点２
user.rb に　attachment :profile_image　が記述されてなかった。

そうだ。gem refile 特有の記述ルール忘れてたーーー


以上初投稿でした！><
Next.jsアプリをVercelで公開して、独自ドメインに反映する

#目次
１．Vercelにデプロイ
２．【おまけ】XServerで取得した独自ドメインに反映する

##１．Vercelにデプロイ
VercelにNext.jsプロジェクトをデプロイする方法は、驚くほど簡単です。

下記、Next.jsの公式ドキュメントの通りに進めればアプリを公開できます。
（getting-startedのところだけ実施でよい。）

https://nextjs.org/docs/deployment#getting-started

独自ドメインを持っていなくてもアプリのURLはVercelが自動で作成してくれます。
私は、「shifty」というプロジェクト名にして、Gitlabのプロジェクトをインポートしたら、

https://shifty-eosin.vercel.app/

というURLにデプロイされました。

「-eosin」の部分が自動で作成されるわけですね。
他にも、「-snow」とかが付与されたりするそうです。

ちなみに、サインアップには、Gitlabアカウントを使いました。
Gitlabアカウントでサインアップすることのメリットは、
GitlabにソースコードをPUSHしたときに、自動で本番環境にもデプロイされることです。
なので、今回のPJをローカルPCで修正して、GitlabのリポジトリにPUSHしたら、
自動で「[https://shifty-eosin.vercel.app/](https://shifty-eosin.vercel.app/)」にも再デプロイされるということです！（便利！！）

##２．【おまけ】XSERVERで取得した独自ドメインに反映する
ですが、私は、XSERVERで取得した独自ドメインにアクセスしたときに、アプリを表示させたかった！
ということで、XSERVERでの必要な設定を記載します。
（サブドメインにアプリを反映するという前提で話を進めます。）

参考サイトはこちらです。

https://vercel.com/docs/custom-domains#adding-a-domain

まず、上記公式ドキュメントの「Adding a Domain」の部分の設定を行います。

Step 4: Configuring the Domain
のところで、下記のように設定を行います。

XSERVERのDNSレコード追加を行う画面に遷移します。
（DNSレコード追加への遷移方法：[XSERVER](https://www.xserver.ne.jp/login_info.php)にログイン > サーバー管理 > DNSレコード設定 > 対象ドメインの「選択する」をクリック > DNSレコード追加）

下記の表のように値を設定します。

| 項目| 値| 
|:-----------|:------------|
| ホスト名|[サブドメイン名]|
| 種別   | CNAME|
| 内容       | cname.vercel-dns.com|
| 優先度    | |

入力したら「確認画面へ進む」 > 「追加する」でレコードを登録します。

これで、設定は完了です。

今回は、[こちら](https://shifty.racsche.com/)に反映させたのですが、無事反映できていることが確認できました！
ちなみに↑このサイトは、仕事のシフトの「早番」か、「遅番」かをGoogle Calendarに登録している友人向けに創ったアプリです。
これから徐々に改良していく予定です♪
しょうもないBOTに会話AIを積む

僕、マイクラサーバーを運営しているのですが、放置に使っているBOTに
[Chaplus API](https://www.chaplus.jp/)というAIサービスを使ってみたのでまとめてみました

僕は[mineflayer](https://github.com/PrismarineJS/mineflayer)というJavaScriptでマイクラBOTを作れるやつでBOT本体を実装してまてます。

# APIをたたく部分を作る
`npm i axios`してまずaxiosを入れておきます


```js
const axios = require('axios');

const API_URL = "https://www.chaplus.jp/v1/chat",
    API_KEY = "YOUR_APIKEY",

async function chat(username, msg) {//二つを合わせた関数です
    const data = choose(await hit_api(username, msg))
    return data[Math.floor(Math.random() * data.length)]
}

async function hit_api(username, msg) {//APIを叩く関数です
    try {
        const res = await axios.post(API_URL + "?apikey=" + API_KEY, {
            utterance: msg,
            username: username,
            AgentState: {//ここら辺はドキュメントを読んで調整しましょう
                agentName: "いなり(BOT)",
                age: "15"
            },
        })
        return res.data.responses
    } catch (e) {
        console.log(e)
    }

}

function choose(data) {//チャットの内容を厳選する
    return data.filter(ele => ele.score >= 0.4).length ? data.filter(ele => ele.score >= 0.4) : data
}


module.exports.chat = chat
```

これで`chat関数を叩くとPromiseが返ってきます`

# 最後に
これを実装したBOTは[この無名サーバー](https://minecraft.jp/servers/inarimc.ml)で使われています。
inarizushidiyが動いてないときは大体BOTになっていると思うので
ぜひ話しかけてみてください!!

あと無名サーバーに入ってください!!
【Flutter】丸いElevatedButtonの実装

## 作るもの

![スクリーンショット 2021-01-10 21.18.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263659/1a5d2624-d487-8b9e-3857-c787eb3256f0.png)

## 実装

ElevatedButtonのプロパティ`style`でボタンのスタイルを変更する。
丸い形は、`ButtonStyle`クラスの`shape`プロパティに対して`CircleBorder`を`MaterialStateProperty.all`メソッドで設定する。

MaterialStatePropertyについては[こちら](https://qiita.com/tsuruken/items/991421e886feeb7e21ad)の記事でも紹介しているので参考にしてください。


``` CircleButton.dart
import 'package:flutter/material.dart';

class CircleButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Icon(
        Icons.add,
        color: Colors.white,
      ),
      style: ButtonStyle(
        minimumSize: MaterialStateProperty.all<Size>(Size(60, 60)),
        shape: MaterialStateProperty.all<CircleBorder>(CircleBorder(
          side: BorderSide(
            color: Colors.black,
            width: 1,
            style: BorderStyle.solid,
          ),
        )),
        backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
        elevation: MaterialStateProperty.all<double>(4.0),
      ),
    );
  }
}

```
Failure while executing; git config --replace-all homebrew.analyticsmessage true was terminated by uncaught signal KILL.

`brew install`をしたらタイトルのエラーが出た。

## 環境

- M1 Mac mini
- Big Sur 11.1
- HomeBrew 2.7.2(ARM版)

## 解決法

以下の２つのコマンドを実行

```console
$ brew reinstall gettext
$ brew reinstall pcre2
```


## エラー全文

```terminal
Warning: git 2.29.2 is already installed and up-to-date
To reinstall 2.29.2, run `brew reinstall git`
/opt/homebrew/Library/Homebrew/cmd/update.sh: line 18:  5855 Killed: 9               "$GIT_EXECUTABLE" "$@"
/opt/homebrew/Library/Homebrew/cmd/update.sh: line 18:  5863 Killed: 9               "$GIT_EXECUTABLE" "$@"
/opt/homebrew/Library/Homebrew/cmd/update.sh: line 18:  5864 Killed: 9               "$GIT_EXECUTABLE" "$@"
/opt/homebrew/Library/Homebrew/cmd/update.sh: line 18:  5882 Killed: 9               "$GIT_EXECUTABLE" "$@"
/opt/homebrew/Library/Homebrew/cmd/update.sh: line 18:  5883 Killed: 9               "$GIT_EXECUTABLE" "$@"
==> Homebrew has enabled anonymous aggregate formula and cask analytics.
Read the analytics documentation (and how to opt-out) here:
  https://docs.brew.sh/Analytics
No analytics have been recorded yet (or will be during this `brew` run).

Error: Failure while executing; `git config --replace-all homebrew.analyticsmessage true` was terminated by uncaught signal KILL.
==> Installing git
Warning: git 2.29.2 is already installed and up-to-date
To reinstall 2.29.2, run `brew reinstall git`
Error: Git is unavailable
```

## 雑談的な解決までのあれこれ

`brew reinstall git`しても何も解決せず。。。
「よくわからん！」と思って、特段困ってはなかったので、保留にしてた汗
忘れた頃に`brew install`したらエラーが出たので、ググったら以下の記事にたどり着いて無事解決。

https://github.com/Homebrew/discussions/discussions/439
条件付き確率～ベイズの定理（離散型・連続型）

ベイズの定理を解説した本は沢山あるのですが、確率変数が離散型のときだけだったりするので、連続型も少しまとめようと思い記事にしました。

※この記事では確率空間や確率変数をざっくりとでも知っていることを前提としております。抽象的な積分論の知識は不要です。

#条件付き確率
事象$B$が起こる条件のもとで事象$A$が起こる条件付き確率の定義
$$
P(A|B)=\frac{P(A\cap B)}{P(B)}　（※P(B)>0）
$$
これは$A$と$B$が同時に起こる確率に対して$P(B)$で割ることによって、$B$を全事象と考え直したときの状況下で相対的に$A$が起こる確率を表しています。

#ベイズの定理（離散型の場合）
$P(A)>0$の条件を追加すれば、上記同様に
$$
P(B|A)=\frac{P(A\cap B)}{P(A)}　（※P(A)>0）
$$
が成立するので、２つ式を合わせると
$$
P(A|B)P(B)=P(B|A)P(A)\\\
$$
両辺を$P(B)$で割るとベイズの定理が導けます。
$$
P(A|B)=\frac{P(B|A)P(A)}{P(B)}
$$

右辺には$A$のもとで$B$が起こる確率がありますが、これから計算することでその逆の、$B$のもとで$A$が起こる確率が算出されます。

#確率変数
確率空間$(\Omega,F,P)$上の確率変数$X,Y$があり、$Y$は離散型確率変数（つまり、１点をとる確率は０でない）とします。それらがとる値の集合$\\{X \in C\\}$と$\\{Y=y\\}$も事象になるため、上記$A,B$にそれぞれ当てはめてみると、次のように表現できます。
$$
P(X \in C|Y=y)=\frac{P(Y=y|X \in C)P(X \in C)}{P(Y=y)}
$$

#確率変数（Yが連続型の場合）
確率変数$X,Y$が同時密度関数$f(・,・)$をもつ連続型、$Y$の周辺密度関数を$f_{Y}(・)$とします。
上で離散型の条件付き確率を書きましたが、連続型で同じように$Y=y$でやろうとすると、連続型の１点をとる確率は$0$なので、分母が$0$になってしまって定義ができません。そこで次のように条件付き確率を定めなおします。
$$
P(X \in C|Y=y):=\lim_{\delta → +0}P(X \in C|y ≦ Y < y+ \delta)
$$
これなら$\lim$を取る前の右辺の分母は０にならず定義できます。ここから式変形を進めていきます。最後に微分をするため、$\\{X \in C\\}$を$\\{X≦x\\}$に限定して考えることにします。
$$P(X ≦x|y ≦ Y < y+ \delta)=\frac{P(X ≦x, y ≦ Y < y+ \delta)}{P(y ≦ Y < y+ \delta)}=\frac{\int_{y}^{y+ \delta}\int_{-∞}^{x}f(s,t)dsdt}{\int_{y}^{y+ \delta}f_{Y}(s)ds}$$

分子分母を$\delta$で割り$\delta→0$とすれば、「微分積分学の基本定理」より
$$
P(X ≦x|Y=y)=\frac{\int_{-∞}^{x}f(s,y)ds}{f_{Y}(y)}
$$
となります。さらに$F(x)=P(X ≦x|Y=y)$とおき、上記式の両辺を$x$で微分すると
$$
F^{'}(x)=\frac{f(x,y)}{f_{Y}(y)}
$$
の形になります。ここで右辺をみていきます。逆に$x$に関して$∞$までで積分すると
$$
\frac{1}{f_{Y}(y)}\int_{-∞}^{∞}f(s,y)ds=\frac{1}{f_{Y}(y)}f_Y{(y)}=1
$$
になり、また$F^{'}(x)≧0$であることは明らかです。よって$F^{'}(x)$は$X$の$Y=y$で条件を付けた分布$P(X ≦x|Y=y)$の密度関数になっています。この密度関数を$f_{X|Y}(x|y)$と書けば
$$
f_{X|Y}(x|y)=\frac{f(x,y)}{f_{Y}(y)}
$$
と表せることになります。これが条件付き密度関数です。

※ちなみに、$\\{X≦x\\}$と限定的な集合で考えましたが、この表現で完全に分布が決まることが知られていますので、理論的にも問題ありません。

#ベイズの定理（連続型の場合）
$X$と$Y$を逆にしたもので考えれば
$$f_{Y|X}(y|x)=\frac{f(x,y)}{f_{X}(x)}$$
となるので、上記式と組み合わせれば
$$
f_{X|Y}(x|y)=\frac{f_{Y|X}(y|x)･f_{X}(x)}{f_{Y}(y)}
$$
が成立します。この結果もベイズの定理といいます。
[Swift] SwiftLintの使い方　(cocoapods)

#installまで

ターミナルを開きます。

ターミナルで、cdの後に赤枠をドラックアンドドロップして貼り付けます。
その後、最後の/以降を削除してEnterを押します。
![スクリーンショット 2021-01-10 20.18.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/f91056e8-de31-8046-030d-1462d52faab7.png)


 ```
cd /Users/sakamototatsuya/Desktop/swift/SwiftLintTestApp                 
```
次に以下を入力します。

```terminal
pod init
```
これでpodfileが作成されたので、以下で開きます。

```terminal
open podfile
```
podfileが開けるので、赤枠のようにSwiftLintを追加します。

```
pod 'SwiftLint'
```
![スクリーンショット 2021-01-10 20.25.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/5e8d8796-2351-abe8-e92a-9cdc55e4f243.png)

command ＋　s で保存して閉じます。
ターミナルに戻り、以下を入力します。

```
pod install
```

画像のようになれば、installできています。
![スクリーンショット 2021-01-10 20.30.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/6c01341f-11b0-9938-3335-470fd5407400.png)

#それ以降のXcodeでの操作
先程開いていたXcodeを閉じて、workspaceで開きます。
![スクリーンショット 2021-01-10 20.47.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/2edbb906-1e9a-cc2d-528c-28b6ec5669f2.png)


数字の順番に操作していきます。
![スクリーンショット 2021-01-10 20.34.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/845a08eb-1e4a-55a5-ed1a-8f511a9fec3c.png)

＋を押したら、`New Run Script Phase`を選択します。
すると、Run　Scriptが下に追加されます。

赤枠に以下のコードを入れます。


```
"${PODS_ROOT}/SwiftLint/swiftlint"
```
![スクリーンショット 2021-01-10 20.40.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/ea23a729-c36f-be4a-d3d1-afbcb09284ba.png)

たくさん警告が出てきたら機能していると思います。
![スクリーンショット 2021-01-10 20.48.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/c30d3ed0-8d16-dc9d-fc42-d36b1c1a4eaa.png)

#参考サイト
https://github.com/realm/SwiftLint
Rubyで値が〇の倍数であることを判別する

どうもこんにちは。
Rubyを始めてみたのですが任意の値が倍数かどうか確かめる方法が調べてもなかなか出てこなかったのでメモ。

## 判別には
AをBで割った余りを出してくれる % を利用します。
指定した倍数であれば0が出力されるはずです。

## コード
```ruby:sample.rb
a = 10
b = 5
if a % b == 0
 puts "#{a}は5の倍数です。"
 else
 puts "#{a}は5の倍数でありません。"
end
```
AWS 認定 ソリューションアーキテクト – アソシエイト 合格体験記 

#前提事項

経歴：業界3年目、AWSは1年半前くらいから

事前に触ったことのあるサービス(業務・独学含む)
・EC2
・Lambda
・S3
・AWS Backup
・RDS
・Database Migration Service
・VPC
・CloudFront
・CloudWatch
・Kinesis
・IAM
・WAF & Shield

AWS 認定 クラウドプラクティショナーは取得済

#やったこと

## ①受験目的の明確化

AWSは情報の更新が早いので、資格を取らなくてもその都度調べながらやったほうがいいんじゃないか、と思う自分がいました。
なので、合格体験記や試験問題例などを見て、受験する目的を明確化していきました。
 
自分の場合は、網羅的・体系的な知識を得ることと、学習した証明が欲しくて受験しました。

## ②問題集一周目

udemyの以下の問題集を一周しました。
その時点での得点は大体40-50％でした。
学習時間は 6回分 × 2.0h = 12.0h

【SAA-C02版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）
https://www.udemy.com/course/aws-knan/

## ③分からない単語を覚える

ノートに分からない単語とその意味を書き出して、
空き時間に単語を見ただけで意味が出てくるように覚えました。

学習時間は
・ノートへの書き出し 20ページ × 0.5h = 10h
・空き時間に覚える　　10日　　 × 0.5h = 5h

## ④問題集二周目

受験直前に追い込み的に解きました。
この時点での得点は大体75%-90%
学習時間は 6回分 × 1.0h = 6.0h

# 感想
 
一度触ったことのあるサービスの問題は本番でも結構解けた印象です。
今回は知識ベースでの学習でしたが、まったく触ったことのないサービスは簡単にでも触ってみたほうが
学習がスムーズだったかもしれません。
【初心者でもわかる】CSS1行で2段や3段の多段リスト（マルチカラム）を作る

#どうも7noteです。逆N字順のように以下のような縦向きに順番で並んでいるが、横に複数列に分けられるような多段リストの作り方
――――――
１　４　７
２　５　８
３　６　９
――――――　


**見本**

![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/4a704e58-1756-f04b-5751-7da9d1966363.png)



## 作り方：`column-count`を使って多段リスト（マルチカラム）を作る

```index.html
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>
```

```style.css
ul {
  column-count: 3;        /* 列数を3列に指定 */
}
```

**結果**

![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/d82336f8-79d9-8642-8001-b9d2f2bd2b88.png)

このようにCSS1行で実装することができます。
個数が半端になってしまう場合でも自動的にいい感じに配置してくれます。

**-2列の場合-**

![sample2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/6ccb78b3-3b14-3142-f21c-6b7f1c38ec6d.png)

---

### <+α技> 段同士の幅を調節することも可能!（IE非対応）

```style.css
ul {
  column-count: 3;        /* 列数を3列に指定 */
  column-gap: 20px;       /* 各列の間隔を調整する */
}
ul li {
  border: 1px solid #000; /* 分かりやすいように線を引く */
}
```

**結果**
![sample3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/87867495-841f-e8f1-b31b-422a31011cbb.png)


このように段同士の間隔を調整することも可能です。

----

### <+α技> `<li>`の下にpaddingを取ると2列目以降が崩れるときの対処方法


**崩れてしまう例**

![sample4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/5da4cf04-d563-ef38-8ba1-025774507dad.png)


下方向に`margin`や`padding`を入れてこのようにくずれてしまう場合は以下のように対応することで対策が可能です！

```style.css
ul li {
  width: 100%;            /* 幅を100%にする */
  margin: 0 0 20px;       /* 下方向に20pxの余白 */
  box-sizing: border-box; /* 線幅やpaddingも含めて幅100%にするため */
  display: inline-block;  /* インラインブロック要素にする */
  border: 1px solid #000; /* 分かりやすいように線を引く *
}
```

**結果**

![sample5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/05929169-8cc8-0744-b027-c8a9becad86f.png)



## まとめ

動的に吐き出す箇所だったり、個数が未定のところにはとても使いやすい方法です。
ただちょっとだけ使い方に癖があったり、枠がないものを並べたときに右側が空いて見えてしまうのでそのあたりは工夫が必要なところもあります。

でも短いCSSで簡単に実装できるので、とても便利ですね！
これ以外の方法でやろうとすると、どうしても段数分のdivを作る必要が出たり、順番が横方向になってしまうなどの点があるので。




参考：
http://www.htmq.com/css/column-count.shtml
https://www.bricoleur.co.jp/blog/archives/4336

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
[Angular & Node.js] Udemyで勉強しようWEBアプリケーション開発！

#Udemyで勉強しようWEBアプリケーション開発！

というわけでして、Udemyさんの講座で勉強させて頂いております。

##対象講座

こちらの講座です　：　[【Angular11とNode.jsで始める！】JavaScript系 WEBアプリケーション開発コンプリートガイド](https://www.udemy.com/course/angular-nodejs-web/ "【Angular11とNode.jsで始める！】JavaScript系 WEBアプリケーション開発コンプリートガイド")

##成果物

現時点での成果物です　：　[Angular & Node.js WEBアプリケーション](https://iwashi-reservation-app.herokuapp.com/products "WEBアプリケーション")

（まだ、最後の「デザインを作りこもう」をやっていないです。）
（2021/01/12追記　： 「デザインを作りこもう」を行いました。）
（2021/01/28追記　： 上記の続編にあたるコースも受講し完了したので、ログイン機能が追加されています。）

Angularでのフロントエンドの開発と、Node.js、MongoDBによるバックエンドの開発、デプロイまでを学べます。

※　ローカル環境がMacの方向けの教材でして、私はWindows10でやってみているので、ちょっと難しかったです……

##ReactとAngularとどっちが良いか？

フロントエンド側については、ReactとAngularとどっちが良いか？　ということを思うかもしれませんが、私は両方やってみた方が良いかなと思いました。

Angularの方が、学習の道筋が示されているので、フロントエンド側の開発でのテンプレート的なものを見出しやすいかもしれません。その後、Reactを勉強するとReactを理解しやすいのでは？　と感じています。
Railsでダブルポリモーフィック

Rails - Polymorphic Favorites (user can favorite different models)
https://stackoverflow.com/questions/21817019/rails-polymorphic-favorites-user-can-favorite-different-models


Double polymorphic association
https://stackoverflow.com/questions/15367098/double-polymorphic-association

Railsで中間テーブルダブルポリモーフィックやってみた。
https://qiita.com/kumewata/items/00e9f6994a9585d6542a
最近見た酷いコード


開発中に見た実際にあった怖いコード[^1]。
（※当然、そのままのコードではないのと、記憶を頼りに抜粋記載しているので、違うミスがあるかもしれません（ぉ））

コーディング業務から外れていただきたい。。。

```c:xxx.h

#define N 10
```

```c:xxx.c

#include "xxx.h"

unsigned char buffer[N] = { 省略 };

～～～中略～～～

    for ( i=0; i<=N; i++ )
    {
        
        buffer[i] = 0;
        
    }


```

[^1]: 現在は修正済みです。念のため。
DB　勉強してみた！

自分でwebサービスを作成する時にDBに関しての知識を深めたいと思い、`達人に学ぶDB設計徹底指南書`を購入したので、アウトプットがてらQiitaにまとめてみた！

##第１章　データーベースを制する者はシステムを制す
どっかで聞いたセリフですが、本の内容

####1. システムとデータベース

データベース（DB）とDBMS（Database Management System）は違うもの
`データベース->データの集まり
DBMS->集まったデータを管理するシステム`

####2.データベースのあれこれ
データベースの代表的なモデルの種類
現在、商用で使用されているデータベースには何種類かあります。
その分類にはデータを維持するフォーマットを基準にして行われます。

#####リレーショナルデータベース
・またの名を関係データベースといわれ、現在もっとも広く利用されているデータベースです。
・IT業界でデーターベースといえば、リレーショナルデータベースをさします。

#####オブジェクト指向データベース（OODB:Object Oriented Database）
・オブジェクト指向言語で用いられるデータベース

#####XMLデータベース（XML Database:XMLDB）
・近年、web上でやりとりされているデータの形式にXML（HTMLのようにタグでデータ管理をする言語）が普及しています。
・XML形式のデータを取り扱うことができるデータベースとして開発されたのが、XMLデータベース。
・リレーショナルデータベースの苦手とする階層構造のデータ扱いを得意とします。
・なんか、APIで関連でみたきがする。。

#####キー・バリュー型ストア（Key-Value Store:KVS）
・データをKey(識別キー)とValue(値)の組み合わせだけの単純なデータ型で表現するデータベース。
・単純なデータ問合せを高速化することを目的とする。
・大量データを高速に処理する必要のあるwebサービスで多く利用されている。
・逆に複雑なデータ操作は苦手。

#####階層型データベース
・データを階層構造で表現するデータベース・。
・リレーショナルデータベース（RDB）の普及に伴い、現在はあまり使用されていない。


####3.システム開発の工程と設計
#####システム開発の設計工程
`要件定義->設計->開発（実装）->テスト`

#####①要件定義
システムが満たすべき機能や要件をきめる工程。
#####②設計
定義された要件を満たすために必要なシステムを作る設計（デザイン）を行う工程。
#####③開発（実装）
設計図にしたがってシステムを実際に作る工程。
一般的にはプログラマーによるコーディングをさすことが多いが、それ以外にもサーバーやネットワーク機器、ストレージといったハードウェアの調達や環境の物理的構築といった作業も含まれる。

#####④テスト
実装によって組み立てられたシステムが実用にたえうる品質であるかを試験（テスト）する工程。
大きく分けると、品質に対するテストと性能や信頼性といった非機能品質に対するテストの２つに分けられる。

#####設計工程と開発モデル
システム開発の進め方（開発モデル）には、大きく分けて2つ方法がある。
#####①ウォーターフォールモデル
ウォーターフォールとは滝のこと。
名前の通り、`要件定義->設計->開発->テスト`とひとつづつ工程を踏んで段階的にシステムを作ること。
デメリットとして、一度工程が進むと手戻りができないので改修に時間とお金がかかりがち。
各工程をきっちり仕上げる精密さが要求される。
大規模なシステムかいはつにおいて採用されることが多い。
#####②プロトタイプングモデル
prototypeとは試作品のこと。
最初に小さな試作品を作り顧客やユーザーにみせてフィードバックをもらい、それを取り入れて改修版を作り顧客やユーザーにみせて。。と繰り返す、循環的な開発手段です。
早期のうちに開発者と顧客との具体的なシステムの情報を確認できるため、要件定義のとりこぼしや、意思疎通の相違を防ぐことができる。
デメリットとして、改修しすぎて収拾がつかなくなるリスクもある。
小規模システム開発に適用される。

####4.設計工程とデーターベース
#####データーベース設計が重要な理由
①システムにおいて大半のデータはデーターベース内に保持されるため。
②データ設計がシステムの品質を最も大きく左右するため。
このうち大切な理由は①の方です。

#####DOAとPOA (DOAとPOAの考え方は真逆)
`DOA（データ中心アプローチ）->最近はこっち`
・DOAはデータからプログラムを作成する。
・データはあまり変化がないので、途中で不具合が起きることは少ない。
`POA（プロセス中心アプローチ）`
・POAではプログラムからデータを作成する。
・プロセス（処理）は短期間で大きく変わることが頻繁にあるので、不具合が起きることが多い。

以上になります！
DBの勉強は色々と勉強になります！アウトプットがてらのQiitaでした〜！:sunglasses:
【Android】公式に記載されている Glide のセットアップ方法は間違っている

# あらすじ

[Glide](https://github.com/bumptech/glide)の README の「Download」を見ると、Gradle のセットアップ方法が以下のように記載されています。

```app/build.gradle
dependencies {
  implementation 'com.github.bumptech.glide:glide:4.11.0'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'
}
```

`./gradlew build`コマンドでビルドをしていた時に、Glide で以下のような警告が出ていることに気付きました。

```
app: 'annotationProcessor' dependencies won't be recognized as kapt annotation processors. Please change the configuration name to 'kapt' for these artifacts: 'com.github.bumptech.glide:compiler:4.11.0'.
```

# 解決方法

警告文の通り、`app/build.gradle`で`annotationProcessor`となっている箇所を、`kapt`に変更してください。

```app/build.gradle
dependencies {
    def glide_version = "4.11.0"
    implementation "com.github.bumptech.glide:glide:$glide_version"
    kapt "com.github.bumptech.glide:compiler:$glide_version"
}
```

# kapt について

`kotlin-annotation-processing tools`の略で、Kotlin でもアノテーションを使えるようにするためのツールのようです。
下記の記事が参考になりました。

- [kapt のセットアップ方法&使い方 - Qiita](https://qiita.com/uhooi/items/836902cdd322f9accded)
Spring Boot + Java + GitHub認証ログイン

OAuth2を使ったSSOに苦戦したので、備忘録として残しておきます。

1. GitHubで「OAuth Apps」のクライアントIDとクライアントシークレットを生成する。
    1. GitHubを開く
    2. 右上のプロフィール画像を押下し、「Settings」を押下
    3. サイドバーの「Developer Settings」を押下
    4. サイドバーの「OAuth Apps」を押下
    5. [New Auth App]ボタンを押下
    6. 「Application name」に任意でアプリケーションの名前を入力
    7. 「Homepage URL」に作成中のアプリのトップページのURLを入力、ローカル環境で作成中なら「http://localhost:8080」
    8. 「Authorization callback URL」に「http://localhost:8080/login/oauth2/code/github」を入力
    9. 上記の手順で作成が完了したらクライアントIDとクライアントシークレットを控えておく

2. application.ymlに以下のように入力

```yaml
spring
  security:
    oauth2:
      client:
        registration:
          github:
            client-id: 控えておいたクライアントID
            client-secret: 控えておいたクライアントシークレット
            scope:
              - read:user
```

3. pom.xmlに以下のdependencyを追加

```xml
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-oauth2-client</artifactId>
</dependency>
```

4. 「configuration」パッケージを作成し、その中にconfigurationファイルを作成

```java
@Configuration
public class OAuth2ClientConfig extends WebSecurityConfigurerAdapter {

  @Override
  protected void configure(HttpSecurity http) throws Exception {
    http.authorizeRequests()
                            .antMatchers("/")
                            .permitAll()
                            .antMatchers("/home")
                            .permitAll()
                            .antMatchers("/home/**").permitAll()
                            .and()
                            .oauth2Login()
                            .loginPage("/login");
  }

  @Override
  public void configure(WebSecurity web) throws Exception {
    web.ignoring().antMatchers("/css/**", "/img/**", "/js/**" ); 
　　// staticフォルダ以下の静的ファイルはconfigure(WebSecurity web)でオーバーライド
  }

}
```java
@Controller
@RequestMapping("")
public class OAuth2ClientController {


  @GetMapping("")
  public String index(OAuth2AuthenticationToken authentication,
                      @AuthenticationPrincipal OAuth2User oauth2User,
                      Model model) {
      if(Objects.isNull(authentication)){
        return "index";
      }
      String userName = oauth2User.getAttributes().get("name").toString(); // githubのアカウント情報からユーザ名を取得
      model.addAttribute("userName", userName);
      return "index";
  }
}
```

```html
<p th:text="${userName}"></p> 
<!-- 出力: githubのユーザ名 -->
```
Reactでカウントアップ機能を作る

## カウントアップ機能を作る
+ボタンを押すと1ずつ数字が増えていくカウントアップ機能をReactでつくる。

### stateを定義する
`constructor`内でプロパティ名が`count`、値が`0`の`state`を定義する。

```js
constructor(props) {
    super(props);
    this.state = {count:0};
  }
```

### ボタンとつくり、stateを表示
ボタンは`button`のタグを使ってつくる。そして前述で定義した`state`を`return`内で表示させる。その際、`this.state.count`はJavascriptなので、`{}`で囲む。

```js
render() {
    return (
      <div>
        <h1>{this.state.count}</h1>

        <button>+</button>
      </div>
    );
  }
```

### handleClickを定義
`handleClick`のメソッドを定義して、`state`の`count`の値に`1`を足す処理を追加する。

```js
handleClick(){
    this.setState({count: this.state.count + 1});
  }
```
### buttonタグにonClickイベントを追加
`button`タグに`onClick`のイベントを追加して、`onClick`のイベント時に前述で定義した`handleClick`のメソッドが呼び出されるようにする。

```js
<button onClick={()=>{
    this.handleClick()
    }
}>+</button>
```

##最後に
洗練さんでインターン(Progate React)です。
[Progate React](https://prog-8.com/languages/react)

[GitHubのレポジトリ](https://github.com/Pkagin/memoStudy/blob/main/study/Progate/React/React%E3%80%80%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E6%A9%9F%E8%83%BD%E3%82%92%E4%BD%9C%E3%82%8B.md)

最後に
現在ここでインターンしています。
まだまだ駆け出しですが頑張ります！やる気は人一倍です！
[洗練](https://senren.work/)
【個人メモ】Gitで歴史を改竄する

# AuthorとCommitterを変更する
[GitのCommitユーザを修正する方法 - Qiita](https://qiita.com/y10exxx/items/dcea0e39788d649ca8ba)に少し手を加えました。
`-- --all`ですべてのブランチを指定している(らしい)。
`--tag-name-filter cat`でタグが紐付けされている[コミットID](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/github-glossary#commit-id)も一緒に変えてくれる(らしい)。

```bash
git filter-branch -f --env-filter "GIT_AUTHOR_NAME='new'; GIT_AUTHOR_EMAIL='new@example.com'; GIT_COMMITTER_NAME='new'; GIT_COMMITTER_EMAIL='new@example.com';" --tag-name-filter cat -- --all
```

# あるファイルを過去からも消し去る
```bash
git filter-branch -f --index-filter 'git rm -rf --cached --ignore-unmatch <プロジェクトのルート(.gitがあるとこ)からの相対パス>' --prune-empty --tag-name-filter cat -- --all
```

# 改竄したものをプッシュする時
```bash
git push -f
git push origin --tags -f
```
Google Colaboratoryの90分セッション切れ対策   　--- Pythonをつかう！---

# やること
Google Colab はプログラム実行中でも、何もさわらないと90分経過でプログラムが止まってしまいます。  
このセッション切れ対策として、[Google Chromeのアドオンを使う方法やスクリプトを実行する方法](https://qiita.com/enmaru/items/2770df602dd7778d4ce6)が紹介されていましたが、アドオンがうまくいかなかったので、Pythonプログラムで画面を定期的にクリックするという原始的な方法のシンプルプログラムを書きましたので、その紹介です。

# やりかた
#### 1. pyautoguiモジュールをインストールする
画面をクリックするのにpyautoguiモジュールを使用します。pipを使って普通にインストールします。
```pip install pyautogui ```
   <br>　　  
#### 2. Google Colaboratoryを動かす
いつもどおりにColabでプログラムをはしらせます。ブラウザはなんでもOKです。　　　
<br>　   
#### 3. Pythonプログラムを動かす
ターミナルかエディタから、以下のプログラムを動かします。一応、for_colab.pyと名付けてますが、自由に名前をつけて保存、実行してください。  
   
```python:for_colab.py
#! python3
# -*- coding: utf-8 -*-

# colabを継続して使う

import time
import pyautogui

print()
print('''10分ごとにマウスカーソルを左右に少し動かし、クリックします。
12時間後に終了します。途中で停止するときは、Ctrl + c を押してください。
''')

try:
    dir = -10
    counter = 0

    while counter < 72:
        time.sleep(600)
        pyautogui.moveRel(dir, 0)
        dir = - dir

        pyautogui.click()
        counter += 1
        # print('カウンター：', counter)  # クリックしたときに出力したい場合はコメントアウト

    print('停止：１２時間経過')


except KeyboardInterrupt:
    print('停止：Ctrl + c による終了')

```

<br>
プログラムはとてもシンプルで、time sleepで10分待ったあと、ポインタを右（または左）に少し動かしクリックします。  
それを７２回（＝１２時間）実施したら終了します。   　

#### 4. google colabに戻る
先ほどプログラムをはしらせたcolabに戻って、プログラムが動いているのを確認します。  
colabのプログラムの最後の方に空欄のセルをいくつか作っておき、その場所にポインタをおいておきます。以上です。  
<br>
#### 注意事項
* 「for_colab.py」は定期的にクリックしますので、ポインターをどこに置いておくかが重要です。左右の動きを繰り返すので、全然違う方に動いていくことはありませんが、colabの方がスクロールしていて思いもかけないところをクリックしないように、最後にポインターを置く位置に気をつけてください。
* colabとは別のプログラムですので、colabの計算が終わっても当然「for_colab.py」は止まりません。colabの計算が終了したら、ctrl-Cで「for_colab.py」を停止させてください。私は止め忘れていて、なんかパソコンの動きが変になった、と思ったらバックで「for_colab.py」が動いてました...
* １０分間隔でクリックしますが、その前にパソコンがスリープしないように、スリープまでの時間は１０分超に設定してください。
* 単純に時間がきたらクリックするだけの機能ですので、動作中は別の作業はできません。睡眠学習用として使用ください。
　<br>
　<br>


プログラム「for_colab.py」は１０分間隔でクリックするようにしていますが、colabのルール的には９０分以内にクリックすればよいので、time sleepの値を各自の好みで変更してください。
また、クリック時にクリックしたことを確認したければ、コメントアウトしているPRINT文を有効にしてください。
単純なプログラムですので、使いやすいように変更して使ってみてください。  
 
Google Colaboratoryは無料でGPUが使用できるので、機械学習の訓練にとても便利ですよね。
寝ている間にGoogle先生に訓練してもらいましょう。

'--------------------おしまい--------------------'
40代からのIoT入門

別に40代じゃなくてもいいです。（自分が40くらいから始めたので）
元々当時の部署はSEとは全く関係のないところで、
趣味程度に始めたIoTが内外で評価され、現部署に引っ張られました。
IoTをやってみようと思う方、ご参考になさってください。ちなみに業種は製造業。
##まずは目的があり、その解決手段がIoT
これが一番重要です。
最近とにかくIoTしろという意味不明な依頼が多いです。突っぱねます。
困っている事があって、それをデータ化して解決の糸口になるなら
やる価値はあると思います。そういう課題があれば勉強しましょう。
まずはLチカから始めよう、とかは続きません。
##どんな知識・経験が必要か？
プログラミング知識は大して必要ないと思います。
例えば「Excelマクロをちょっとソースで手直しできる」くらいで上等かと。
どちらかというと以下が必要に思えます。
・問題を見つけ出す目（製造業で言えば、現場サイドの人間ができると良い）
・検索能力(Qiita内でも十分情報はあります)
・小〜中学生レベルの「理科」「工作」の経験
　思い通りのIoTを実現していこうとすると、電子工作は避けて通れません。
　自分ははんだ恐怖症で難儀しました。今は大好きです。
##入門者おすすめ
###プログラミング言語
ArduinoIDE、Pythonあたりを勉強しましょう。
どちらもライブラリを使うという概念に慣れるだけです。
###ハードウェア購入店舗
以下、３店舗覚えておけば事足ります。
・秋月電子通商
　https://akizukidenshi.com/catalog/top.aspx
・スイッチサイエンス
　https://www.switch-science.com
・マルツオンライン
　https://www.marutsu.co.jp
###ハードウェアおすすめ
「RaspberryPi」は一通り触れるようになっておくと便利です。
センサとマイコンの関係性を学ぶなら、「Grove」と言う形式のセンサが使える
マイコンをセットで買うのが良いと思います。
個人的に、マイコンはスペックの高いものを買っておいた方が苦労しません。
プログラム容量を考えたりするのは突き詰めていく段階でいいので、
動かす事優先で行った方が続くと思います。
##詰まるポイント
<B>「Qiitaに書いてあるとおりにコードを書いたのに動かない」</B>
と詰まる大半は、経験上バージョン違いにあります。（特にPython）
Pythonのバージョンはもちろん、
ライブラリのバージョンもソースと相違ないか確認しましょう。
リビジョンが違うだけで動かないことは日常茶飯事です。
バージョンが合わせられないなら工夫が必要です。
困っている人は他にもいると思われますので、検索しましょう。
##（参考程度）IoT資格
IoT関連の国家資格はありません。
民間資格なのでキャリアの役に立つとは思いませんが、勉強になりますので
合わせて取得を検討してもいいかもしれません。
（自分は経験後、一ヶ月ぐらいの勉強で取得できました）
・IoTシステム技術検定　中級
　https://www.mcpc-jp.org/iotkentei/kentei_msg/index.html

上級は受験料も高いし二日も拘束されるしいらないかなぁと。
herokuがsleep状態に入ってしまってレスポンスが遅い問題をnewRelicでpingを送ることで解決

# はじめに
個人サイトの運用でstrapiというHeadlessCMSをherokuサーバで動かしていたら、レスポンスが20秒ほどかかってデータが中々取得できない問題に遭遇した。
herokuサーバ(dyno)の無料プランだと30分間リクエストがない場合にsleep状態に入ってしまうので、sleep→サーバ再起動→strapi起動という流れになってたのが原因。
newRelicの無料アドオンを使って15分おきにpingを送ることで問題を回避できたので、その備忘録を書いておく。
このブログがとても参考になった。[Heroku Free DynoのSleepを防止する](https://unhurried.hatenablog.com/entry/heroku_prevent_sleep)

# herokuのログをみて原因調査
最初はそもそもなんでherokuがこんなに遅いのかわからなかったが下記の記事が参考になった。
[Herokuって本当に遅いんですか？](https://qiita.com/llhrkll/items/513f911d156d9427c667)

> dynoがsleepしているのでは？！？？！！？
Free Dyno Hours - Dyno sleeping

> web dynoは30分以上トラフィックがないとsleepしてしまうんですが、これが起きるのが結構時間かかるんですね。
30分感覚で眠らないようにアクセスしてあげるみたいなのやってる人もいますが、どうしても無料でやりたかったらそれもあり。

実際にherokuのログを見ることでこの休眠現象を確認できる。

```sh
$ heroku log -t
```

```json
2021-01-10T09:27:01.218869+00:00 heroku[router]: at=info method=POST path="/graphql" host=strapi-asakawa-family.herokuapp.com request_id=7a6e142f-4ce7-4176-b237-d2032efe8722 fwd="60.73.16.105" dyno=web.1 connect=1ms service=81ms status=200 bytes=1247 protocol=https
2021-01-10T09:27:01.216416+00:00 app[web.1]: [2021-01-10T09:27:01.216Z] debug POST /graphql (75 ms) 200
2021-01-10T09:27:01.248257+00:00 app[web.1]: [2021-01-10T09:27:01.248Z] debug POST /graphql (86 ms) 200
2021-01-10T10:01:18.451053+00:00 heroku[web.1]: Idling
2021-01-10T10:01:18.452808+00:00 heroku[web.1]: State changed from up to down
2021-01-10T10:01:19.964249+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2021-01-10T10:01:20.136459+00:00 heroku[web.1]: Process exited with status 143
```

strapiのgraphqlのエンドポイントにpostリクエストを送ってから30分待ってみたら、全プロセスが停止して休眠状態に入るのが確認できた。
その後リクエストがくると、サーバ再起動→strapi起動→yarn build完了→レスポンス返すって感じなので20秒ぐらいかかる。

# newRelicアドオンの追加
個人サイト用だからアクセスも全然無いし、これを回避するために定期的にpingを打つことにした。
まずnewRelicのアドオンをherokuのアプリに追加する。

```sh
# newRelicアドオン追加コマンド
$ heroku addons:add newrelic:wayne -a { heroku_app_name }
```

# newRelicのアカウント新規作成
newRelicのアカウントが無い場合は新規に作る。

下記リンクからnewRelicに登録。
https://newrelic.com/signup

> Free access to all of New Relic. Forever.
No credit card required.

無料プランで使えるのでクレカも必要ない。

# pingの送信設定

New Relic Syntheticsを選択。
そこで新規モニターを作成。

![screencapture-one-newrelic-launcher-synthetics-nerdlets-home-2021-01-10-19_47_03-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528819/7e66f608-2368-a0a8-a7ab-ed49cced3de3.png)

herokuのログにリクエストが出てればおk。
データ取得に20秒かかる地獄のような問題が解決した。

# 参考文献
- [Heroku Free DynoのSleepを防止する](https://unhurried.hatenablog.com/entry/heroku_prevent_sleep)
- [Herokuって本当に遅いんですか？](https://qiita.com/llhrkll/items/513f911d156d9427c667)
- [Heroku公式 dynoのスリープ](https://devcenter.heroku.com/articles/free-dyno-hours#dyno-sleeping)
- [Heroku New Relic APM](https://elements.heroku.com/addons/newrelic)
迷路ゲームをつくろうミッション

# このゲームと同じゲームを作ってみよう

## 必要な機能

１：十字キーで主人公が動く
２：主人公が壁を通り抜けないようになっている
３：カギを手に入れると、紫の道を塞いでいるドアが消える
４：ゴールに触るとクリアできる

## こんな見た目

![a01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/a16d8f9b-9497-bbec-8260-393bdd27a57e.png)
指定したURLのリンクが有効かどうかをチェックするpythonスクリプトを作成2

以下の更新版

> [指定したURLのリンクが有効かどうかをチェックするpythonスクリプトを作成](https://qiita.com/seigot/items/534ca3089d217200a1d6)

以下のgithub actionsのファイルも参考になる

> [https://github.com/paramt/url-checker](https://github.com/paramt/url-checker)
> [check_links.py](https://github.com/paramt/url-checker/blob/master/check_links.py)

# コード

[こちら](https://github.com/seigot/tools/tree/master/check_url)にあるものと同じ

#### チェック対象のURLリスト作成
カレントディレクトリ以下の`https://...`と続く文字列をなるべく`grep`する。`input.txt`という名前で保存。

```
grep -r "https://" * > test.txt
cat test.txt | sed -e 's/.*https//' | sed "s/^/http/g"  > test.txt
cat test2.txt | sed 's/>//g' | sed 's/"//g' | sed 's/)//g' | sed 's/;//g' | sed 's/]//g' | cut -d' ' -f 1 > input.txt 
```

#### チェック
`input.txt`のURLにアクセスできるかどうかを確認する。

```
$ python3 check_url.py

# 出力結果
#     アクセスできる→OK
#     アクセスできない→NotFound
#     ※ ただし、grep結果が意図通りでない場合もあるので確認する。

NotFound:http://www.kernel.org/pub/linux/kernel/v5.x/linux-${PV}.tar.xz
OK:http://facebook.github.io/watchman/
...
```

```python:check_url.py
#-*- using:utf-8 -*-
import urllib.request, urllib.error

with open('out.txt', 'w') as txt:
    txt.write("chdck result\n")

def checkURL(url):
    try:
        f = urllib.request.urlopen(url)
        f.close()
        return True
    except:
        return False

if __name__ == '__main__':

    with open("./input.txt") as f:
        for url in f:
            # print(url, end='')
            ret = checkURL(url)
            if ret == True:
                result = "OK:"
            else:
                result = "NotFound:"

            ret_text = result + url
            #ret_text = ret_text.replace('\n', '')
            print(ret_text)
            if ret != True:
                with open('out.txt', 'a') as txt:
                    txt.write(ret_text)
```

#### 結果
結果OK/NGを以下に出力する

```
cat out.txt
```

# 参考
[指定したURLのリンクが有効かどうかをチェックするpythonスクリプトを作成](https://qiita.com/seigot/items/534ca3089d217200a1d6)
[入力した文字列から、指定した文字列より右の文字列をとりだす](https://qiita.com/seigot/items/5c6d945f64c699ec2a58)
【備忘録】Git, GitHubの使い方

1.  GitHubでリモートリポジトリ作成
2.  ローカルでディレクトリ作成
3.  `git init` し git の管理下に（ローカルリポジトリ作成）
4.  なんかファイル作る
4.  `git add .` でステージング
5.  `git commit -m [message]` でローカルリポジトリに反映
6.  `git remote add origin https://github.com/[ユーザー名]/[1で作成したリモートリポジトリ名].git`で GitHub と紐づけ
7.  `git push origin main`でリモートリポジトリにプッシュ

8番で **master** ではなく **main** としているのは、Git のデフォルトリポジトリ名を main に変更しているからで、これは GitHub のデフォルトリポジトリ名に合わせた。
変更する場合は、最新の Git だと、インストール時に main に設定するか聞かれるので、そこで設定する。バージョンが古い場合は、アップデートすると、同じく設定するか聞かれる。

もし master のまま push してしまうと、GitHub に新しく master ブランチが作られ、チームで開発する際、Aさんは master から開発をはじめ、Bさんは main から開発をはじめ、元のブランチが違うためマージできない、ということが起こるらしいので注意する。