OmniAICreator/Qiita-1.07M huggingface dataset:
jsxでアポストロフィを使う【eslintreact/no-unescaped-entities】

# 問題
Reactのjsx内にアプストロフィを含む文字列を記述しようとしたらESLintのエラー(eslintreact/no-unescaped-entities)に引っかかった。
![スクリーンショット 2021-03-02 15.07.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612915/edb39932-4cb9-5cbe-6403-fe620e8733d2.png)

# 解決方法
文字列の`'（アポストロフィ）`の箇所を`&apos;`,`&lsquo;`,`&#39;`,`&rsquo;`のどれかに変換する。

```js
<Link href="/user/signUp" variant="body2">
    Don't have an account? Sign up           // エラー
    Don&apos;t have an account? Sign up     // OK
    Don&lsquo;t have an account? Sign up　  // OK
    Don&#39;t have an account? Sign up     // OK
    Don&rsquo;t have an account? Sign up   //OK
</Link>
              
```
jQueryで上からslideToggleでメッセージを出す

##はじめに
slideToggleを使ってニュルっとメッセージを出す方法の記録です。

##jQueryのコード
以下のコードでメッセージの出す、戻すを行う。
表示するメッセージを受け取った場合は空白を全て取り除く。
そしてslideToggleで表示し、5秒後にslideToggleで戻す。

```Javascript
let $slideMsg = $('#js-slide-msg');
let msg = $slideMsg.text();
  if(msg.replace(/\s+/g, "")){
   $slideMsg.slideToggle().show();
   setTimeout(function(){
    $slideMsg.slideToggle().show();
   }, 5000);
  }
```

##表示について
$msgに表示するメッセージが入っていれば表示させる。

```PHP
<div id="js-slide-msg">
    <?php if(!empty($msg) echo $msg; ?>
</div>
```
ビットコインによるマネーマシン（ライフハック）

ビットコインとAlternativeな複数のアルトコインを所有していると、あらゆる国の監視から逃れて莫大な資産を形成できるマネーマシンが完成するなぁ。

時々、Real Worldに「ビットコイン高騰」の情報を流すと、遅れてアルトコインが高騰する。

現代版「金のなる木」ですね。:relaxed:

賢明なイーロン・マスクもやってるのかしら。
ffmpeg で Twitter 用に動画を結合して、2倍速再生で2分20秒以内の動画を作成

ffmpeg で Twitter 用に動画を結合して、2倍速再生で2分20秒以内の動画を作成する方法です。

まずは、1つに結合したい動画ファイルのリスト作成します。

```bash
gedit indexfile.txt ;
```

内容はこんな感じ

```text:indexfile.txt
file 'movie1.mov'
file 'movie2.mov'
file 'movie3.mov'
````

次に、テキストファイルに書かれたファイルを結合します。

````bash
ffmpeg -f concat -i indexfile.txt -c copy output.mov
````

できた結合ファイルを Twitter 用に2分20秒のみに変換します。ついでに解像度も横640pxに指定

````bash
ffmpeg -i output.mov -vcodec libx264 -pix_fmt yuv420p -strict -2 -acodec aac -vf scale=640:-1 -t 140 output.mp4 ;
````

おそらく2分20秒ですとなかなか収まらないので、再生速度を変更します。
Twitter用に2分20秒のみ使用する＋２倍速再生

````bash
ffmpeg -i output.mov -vcodec libx264 -pix_fmt yuv420p -strict -2 -acodec aac -vf scale=640:-1 -t 140 -vf setpts=PTS/2.0 -af atempo=2.0 output.mp4 
````
こんな感じにできます。
![ezgif-5-57f5325d5534.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115935/10142e0a-c0fb-7492-56d1-2177af8fafb7.gif)
うまくすれば tiktok みたいな動画が作れるかもしれないですね。
####参考リンク
- [Ubuntu の動画編集ソフト shotcut で作成した動画を Twitter に上げて失敗する場合の対処方 - Qiita]( https://qiita.com/mugimugi/items/32580769aee3ba9fe135)
- [【ffmpeg】動画の解像度を指定してリサイズ、アスペクト比を維持したまま解像度を変更する、回転する - Qiita]( https://qiita.com/riversun/items/d09d8e596a20ec1798f3)
- [ffmpegの基本的な使い方 | | Gnzo Labo ](https://gnzo.com/labo/archives/100)
- [Ffmpegで複数動画ファイルを無劣化で結合したり、無劣化で切り出したりする | Creazy!]( https://creazy.net/2018/03/ffmpeg-no-deterioration-combine-cutout.html)
Pythonファイル操作覚え書き

## ファイル、ディレクトリのリストアップ
### 特定のディレクトリ内のディレクトリのリストアップ
例えば変数dirpath内のディレクトリを一階層のみリストアップしたい場合、

```python:コード
[x for x in os.listdir(dirpath) if os.path.isdir(os.path.join(dirpath, x))]
```

最初の x を`os.path.join(dirpath, x)`にすれば dirpath も含めてのリストを得られる。
(Windows) Shopify App CLIのcreateがうまく動かないときはディレクトリ名を確認しましょう

#コマンドプロンプトでShopify App CLI を使おうとしたらうまく動かなかった話
Shopify Partnerを目指して修行中です。
今回、あまり本質的ではないことで悩むことが多く、またそれについて調べても情報が出てこなかったので、
小さなことでも積極的に記事を書こうと思いました。

今回は、[Shopify App CLI](https://shopify.dev/tools/cli)がうまく動かせないWindowsユーザーのための小話。

## 環境
OS: Windows 10
事前にインストールしたもの： Ruby, Node.js, Shopify App CLI

※Rubyは直接開発で使わない場合でも、Shopify App CLIをダウンロードするのに必須となるためダウンロードしました。
　2.5.0以上が必要です。

## 現象

CLIダウンロードも終わったし、さっそくアプリを作ろう！と意気込んで、`shopify create`を叩いてみた。

```
shopify create node
? App name
> cli-test-4
? What type of app are you building? (You chose: Public: An app built for a wide merchant audience.)
Partner organization [パートナーアカウント (番号)]
? Select a development store (You chose: [開発ストア])
√ node v14.16.0
√ npm 6.14.11
┏━━ Cloning https://github.com/Shopify/shopify-app-node.git into cli-test-4... ━
┃                                                                           100%
┗━━ √ Cloned into cli-test-4 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (3.52s) ━━
```
ここでぶつっと処理が途切れる。
エラーメッセージも出ないので困惑。いったい何が悪かったの…？


## 原因
~~Windowsコマンドプロンプトで実行していたら上記の現象が起こったが、ふと思いついて**PowerShell**で実行してみたらうまくいきました。
なぜ・・・なのかは、エラーも出ていないしまったくわからない。コマンドプロンプトでは使えないコマンドがCLIに含まれていたのでしょうか？
理由がわかる方、ぜひ教えてください。~~

## 教訓
~~ping を打つ程度ならコマンドプロンプトでもよいけど、上位互換であるPowerShellを積極的に使っていったほうが、変なところで悩まないで済むかも。
長年Windows使っているとすぐコマンドプロンプトを使いたがってしまうけど、もう今日からやめます。
スタートアップとタスクバーに常駐していたコマンドプロンプトさんには引退してもらいましょう。~~


# 追記：原因全然違いました。ごめんなさい。
PowerShellでも同じ現象が起こることがあったので、いろいろ試してみると、
`C:\Users\[ユーザー名]\Documents`の場所で走らせるとOK、それ以上に階層を潜るとNGになる…。

あれ、もしかして？と思ってコマンドプロンプトで同じことを試してみたら、こっちでもうまくいく。
…コマンドプロンプト先輩、ごめんなさい疑って…、あなたが悪いわけじゃないんでしたね。


さらに試してみると、以下の結果になりました：

`C:\Users\[ユーザー名]\Documents`：OK
`C:\Users\[ユーザー名]\Documents\shopify_test`：OK
`C:\Users\[ユーザー名]\Documents\shopify_test\テスト`：NG
`C:\Users\[ユーザー名]\Documents\shopify_test\テスト\test`：NG


こ　れ　は　・　・　・
CLIを実行するディレクトリに至るまでの階層に、**全角文字を含むディレクトリがあると実行失敗する**ということですね…？
まったくもって見当違いの結論書いていて失礼しました。そして私のローカルフォルダがぐちゃぐちゃなのがいけなかったんですね。理解しました。

## 改めて教訓
ローカル環境で開発作業をするときは、シンプルに**半角で**ディレクトリを作りましょう。
考えてみれば当たり前なんだけど、失念していました。お気を付けください。
intra-mart を利用したjsp画面でClandar付入力項目のonChange動作

## 個人用の技術メモ
そもそもこれを書く理由は、<im:calendar>と関連する入力項目にだけonChangeをかけると、calendarによる入力時は動いてくれないので、それの対応策。
#### まず、入力項目のonChange動作は通常通り実装（一応手入力もできるので）
   
   ```
   //IE11前のIEバージョン
   if(window.attachEvent){
     document.getElementById("id").attachEvent( 'onchange', function(){//処理内容function})
   } else {
   //IE11，mozilla系(firefox,chromeなど)ブラウザ
     document.getElementById("id").addEventListener( 'change', function(){//処理内容function})
   }
   ```

#### で、<im:calendar>の属性onSelectを利用して、同じ内容を実装する

   ```
   //IE11前のIEバージョン
   <im:calendar onSelect = "//処理内容function"/>
   ```

めんどくさく感じますが、ほかのいい方法思いつかないので、これで。intra-martさん提供してる情報あまり詳細がないので困るわ。

因みに、calendarで日付を選択する瞬間、フォーカスアウト動作になるので、通常のフォーカスアウト動作を実装した場合、思うように動かないでしょう。
[Angular] プロジェクトのデフォルト設定をCSSからSCSSに変更

似通った内容を紹介している情報は多いのですが、最新の環境では上手くいかなかったため備忘録的な記録です。（Angular9から変わった模様）

# 動作確認環境
- Angular CLI: 11.1.4
- Node: 14.15.4
- OS: win32 x64

# 変更箇所
デフォルト設定を変更するには `angular.json` の `schematics` に以下の様に追記します。

``` angular.json
{
  ...
  "projects": {
    "angular-sample": {
      ...
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      }
      ...
```

# 動作確認
```
> ng g c test

CREATE src/app/test/test.component.html (19 bytes)
CREATE src/app/test/test.component.spec.ts (612 bytes)
CREATE src/app/test/test.component.ts (268 bytes)
CREATE src/app/test/test.component.scss (0 bytes)
UPDATE src/app/app.module.ts (699 bytes)
```

# 参考
- [Angular入門 未経験から1ヶ月でサービス作れるようにする その3. ルーティング基礎](URL "https://qiita.com/seteen/items/732bacf604ab8d18a84c")
【centos】TCP輻輳制御アルゴリズムを変更する

##コマンド集
■現在のTCP輻輳制御アルゴリズムを見る

sysctl -a 2>&1 | grep -i tcp_congestion_control


■利用可能な輻輳制御アルゴリズムを見る

sysctl -a 2>&1 | grep -i tcp_available_congestion_control

■renoに変更する

sysctl -w net.ipv4.tcp_congestion_control="reno"

■cubicに変更する

sysctl -w net.ipv4.tcp_congestion_control="cubic"

■参考文献
https://meetup-jp.toast.com/1516
At Coder ABC 192 コンテストを受けてD問題で解けなかった話


AtCoder で Rating 緑 を Python3 で目指している現在灰色です。

192 では A ~ C 問題までは解けたのですが、D問題につまづいてしまい
解答することができなかったのでどうすればよかったかを纏めます

# どこで解けなかったか

[D問題](https://atcoder.jp/contests/abc192/tasks/abc192_d)

## 1回目の解答
計算量を無視して一先ず解答が合うコードを書いた結果TLEを起こした

## 2回目以降の解答
Python での int 型で n進数を指定してしてみたが、36進数以下までしか対応していないことに気がつかなかった

``` #python
int(“100”, 37)
```
やるとエラーを起こす

# 対策
## 計算量がわからなかった場合 
AtCoderでの解説動画で最初に計算量を算出してから、
コードを書くようにする、もし計算量がなんとなくでもわからない場合は
その問題を飛ばして次の問題を確認する

ABC 192 では E 問題のほうが難易度が低いこともあるので
計算量がなんとなくでもいいから算出できそうな問題を解くようにする

https://kenkoooo.com/atcoder#/table/

## n進数変換でエラーを出していた

Int型 の第2パラメータに数値を入れるとその進数になるのだが、 上限があり 36進数までだったことに気がつかなかった

焦らずちゃんとドキュメントを読み、出来ること出来ないことを確認する

 [Python int についてのドキュメント](https://docs.python.org/ja/3/library/functions.html#int)

## 2分探索の過去問を解く
過去問より、どんなケースだと２分探索が必要になるのか解説しているページから、解説をみずに時間（2時間以内）をかけてもいいので解けるまで挑戦する。

時間内に解けなかったら解説を見て、他の2分探索の過去問に挑戦する

# まとめ
何故解説動画では、最初に計算量を算出するのかの理由がわかり 前よりかは解けている気がしています(まだまだ足りませんが）

コンテスト中2度ぐらい解答に失敗するとものすごく焦ってしまい思考が停止してしまうので、
ブレイクできる何かがほしいと最近思っています。

今の目標は 3月中に Rating 緑 を取りたいので
高校数学の勉強と過去問を解くのに時間をあてています
git clone で the remote end hung up unexpectedly

## git cloneができない

```
warning: templates not found in /usr/local/git/share/git-core/templates
error: RPC failed; curl 56 LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 54
fatal: the remote end hung up unexpectedly
fatal: early EOF
fatal: index-pack failed
```

## 闘いの記録

`postBufferを調整セヨ` っていうところからスタートしたものの、
結局は `depth` にも手を出さないと解決しなかった。

```
 1445  git config http.postBuffer postBuffer 2M
 1446  git clone https://github.com/(略)
 1447  git config http.postBuffer postBuffer 4M
 1448  git clone https://github.com/(略)
 1449  git config http.postBuffer postBuffer 8M
 1450  git clone https://github.com/(略)
 1451  git config http.postBuffer postBuffer 16M
 1452  git clone https://github.com/(略)
 1453  git config http.postBuffer postBuffer 32M
 1454  git clone https://github.com/(略)
 1455  git config http.postBuffer postBuffer 64M
 1456  git clone https://github.com/(略)
 1457  git config http.postBuffer postBuffer 150M
 1458  git clone https://github.com/(略)
 1459  git config http.postBuffer postBuffer 300M
 1460  git clone https://github.com/(略)
 1461  git clone -b develop --depth 1 https://github.com/(略)
 1462  cd (略)
 1464  git fetch --depth 2
 1465  git fetch --depth 3
 1466  git fetch --depth 4
 1467  git fetch --depth 5
 1468  git fetch --depth 10
 1469  git fetch --depth 20
 1470  git fetch --unshallow
```

## 参考
[git clone 時に出た 「the remote end hung up unexpectedly」に辛勝した話](https://core-tech.jp/blog/article582)
MySQLWorkbenchはBig Surだと動かない？

##MySQLWorkbench8.0.23がBigSur11.1で動かない

MySQLWorkbenchは、MySQLの公式サイトにてMySQL Serverと共に配布されている、データベースの設計・開発・管理を単一の開発環境に統合するビジュアルデータベース設計ツールである。MySQLをGUIでわかりやすく操作でき、大変便利なツールであるのだが、Big Sur11.1では、MySQLWorkbenchの一部のVerが動かないバグが存在するようだ。
以下のリンクにその報告が記載してある。

https://exerror.com/mysql-workbench-quit-unexpectedly-on-mac-os-big-sur-11-1/


その中で筆者が確認出来たのは以下の二つである。

BigSur11.1において
MySQLWorkbench8.0.23　(記事執筆当時latest)　 起動しない
MySQLWorkbench8.0.21 　起動する

※MySQLWorkbench8.0.2２に関しては未確認です。

MacOSをアップデートする際はご注意ください。
numpy 内部で使われるスレッド数を確認する

numpy は、例えば conda で入れて mkl にリンクされているバージョンでは、内部で使える場所では [mkl](https://ja.wikipedia.org/wiki/Intel_Math_Kernel_Library) 側でスレッドを(勝手に)使って計算している。そのため、Python レイヤのプログラミングでスレッドを使わなくても利用できる。

環境変数などを明示的に指定しなくても、勝手にマルチスレッドで動いていた(CPU利用率が複数コア使っている感じだった)ので、どの情報を見ればよいのかと調べると、今は [threadpool_infoを見れば解る](https://github.com/numpy/numpy/issues/11826#issuecomment-522342271) らしい。

```python
from threadpoolctl import threadpool_info
from pprint import pp
import numpy as np

pp(threadpool_info())
```

```
[{'filepath': 'C:\\Users\\hotch\\scoop\\apps\\anaconda3\\2020.11\\Library\\bin\\mkl_rt.dll',
  'prefix': 'mkl_rt',
  'user_api': 'blas',
  'internal_api': 'mkl',
  'version': '2020.0.2',
  'num_threads': 12,
  'threading_layer': 'intel'}]
```

なるほど、mkl_rt では 12 スレッドと。

環境変数で値をセットしてから見ると

```
import os
os.environ["MKL_NUM_THREADS"] = "4"
```

```
[{'filepath': 'C:\\Users\\hotch\\scoop\\apps\\anaconda3\\2020.11\\Library\\bin\\mkl_rt.dll',
  'prefix': 'mkl_rt',
  'user_api': 'blas',
  'internal_api': 'mkl',
  'version': '2020.0.2',
  'num_threads': 4,
  'threading_layer': 'intel'}]
```

4に抑えられている。
Wallpaper Engineみたいに壁紙をUnityで作る

#はじめに
今回は動く壁紙として有名なWallpapaer Engineのように、Unityで作ったプロジェクトを壁紙として表示する方法を書きます。
#仕組み
壁紙のウィンドウハンドルを取得し、Unityのプロジェクトをそのウィンドウの子ウィンドウとして表示するだけです。
#壁紙のウィンドウハンドル
c++で取得します。この記事ではc++でdllを作り、c#で呼び出します。

```cpp
BOOL CALLBACK EnumWindowsProc(HWND hwnd, LPARAM lParam)
{
    HWND p = FindWindowEx(hwnd, NULL, L"SHELLDLL_DefView", NULL);
    HWND* ret = (HWND*)lParam;

    if (p)
    {
        *ret = FindWindowEx(NULL, hwnd, L"WorkerW", NULL);
    }
    return true;
}

HWND get_wallpaper_window()
{
    HWND progman = FindWindow(L"ProgMan", NULL);
    SendMessageTimeout(progman, 0x052C, 0, 0, SMTO_NORMAL, 1000, nullptr);
    HWND wallpaper_hwnd = nullptr;
    EnumWindows(EnumWindowsProc, (LPARAM)&wallpaper_hwnd);
    return wallpaper_hwnd;
}
```
#Unityを表示する
```c#
[DllImport("WallpaperDLL.dll")]     //c++で作ったdllを呼び出す
static extern IntPtr GetWallpaperHWND(); 

/*------------------------------------------*/

var path = ユニティーのexeのパス;
var cmdline = $"-parentHWND {GetWallpaperHWND()}";//子ウィンドウとして起動
Process exe = Process.Start(path, cmdline);
```

#完成
二つ作ってみました。結構いい感じにできてよかったです。

https://twitter.com/360tetsu360/status/1359771520839479304

https://twitter.com/360tetsu360/status/1358737405583388673

#ソース
DLL

https://github.com/360tetsu360/WallpaperDLL

#最後に
結構簡単なのでぜひ試してみてください
#参考
https://yotiky.hatenablog.com/entry/unity_uaal-wpf
https://stackoverflow.com/questions/56132584/draw-on-windows-10-wallpaper-in-c
cssアニメーションなど

・[ScrollAnimation](https://www.to-r.net/media/scrolltrigger/)について

・[Qiita記事: CSSアニメーション 入門
](https://qiita.com/soarflat/items/4a302e0cafa21477707f)

・[ここまで動かせる！楽しいcss アニメーションのサンプル集
](https://commte.net/5082)に書いてあったanimation/transition/transformの違いがめちゃくちゃわかりやすかった

![スクリーンショット 2021-03-02 14.20.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/38d0e476-5ebc-6a01-8176-ae3af1a5d940.png)


・[動くWebデザインアイデア張](https://coco-factory.jp/ugokuweb/)
デジハリの講師人が作成してくれたサイトで、書籍にもなっている。
ローディング画面の実装方法、ハンバーガーメニューの実装方法など必要なアニメーションは大体揃ってる。



##スライドインアニメーションの実装方法についてわかり易く記述してあるサイト

https://yuyauver98.me/css-animation-slidein/

シンプルにtranslateXとYの値を緒ちょっといじればいいと言うことが書いてあるので最初に見ておくと理解しやすい。


https://rico-notes.com/programming/css/css-fade-in/


アニメーションの終盤はゆっくり動かすanimation-timing-function: ease-out;、
アニメーションが終わった後はその状態をキープするanimation-fill-mode: forwards;
など、めちゃくちゃ説明がわかりやすい。
アニメーションに時間差を付けたい場合はこうする〜なども書いてあり、アニメーションがよくわからない状態でも理解しやすかった。


##テキストアニメーションの参考になるサイト

https://photoshopvip.net/120163

ディズニーのアニメーション基本原則を活用した@keyframe設定により、よりナチュラルな動きに。
まるで単語が叫んでいるようなズームエフェクトはCSSでスタイリングされています。
ボックスが伸縮しながら表示されたあとに、文字テキストが出現するアニメーションテクニック。

##蛍光ペンでラインを引いたような文字の実装方法
[株式会社ベイジ: 簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き）
](https://baigie.me/officialblog/2021/02/25/css-tips-1/)

![スクリーンショット 2021-03-15 14.27.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/931281cb-13fd-ca3b-e15f-e6df55d02182.png)

![スクリーンショット 2021-03-15 14.57.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/0718cb3d-06ee-4206-65ee-56d607506583.png)


![スクリーンショット 2021-03-15 14.58.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/9e3508c9-8f17-9053-c380-ded27620b82b.png)
【Rails開発】基本の基本コマンドチートシート


###コラム: エラーメッセージを日本語にする

#####STEP①Githubのrails-i18nの日本語辞書リポジトリをDL

```
$ wget https://raw.githubusercontent.com/svenfuchs/rails-i18n/master/rails/locale/ja.yml -P config/locales
```
wget は引数に記載したＵＲＬからファイルをカレントディレクトリにＤＬするコマンド。([Command not foundと出た場合の対処法](https://bityl.co/4IfW))

-P オプションでＤＬするディレクトリを指定します。
これで、翻訳ファイルconfig/locales/ja.yml が作成される。

#####STEP②config/initializers/locale.rbファイルを作成

```
vim config/initializers/locale.rb
```

#####STEP③以下を記述して保存(:wq コマンドで保存できる)
```config/initializers/locale.rb
Rails.application.config.i18n.default_locale = :ja
```


#モデルの雛形作り

```
$rails g model モデル名 属性名:データ型 name:string description:text
```
モデルが動作するには、データベースとモデルクラスの両方が必須。
データベースにテーブルを追加する為に、マイグレーションを実行する。
※Railsで用意されているマイグレーションという仕組みは、スキーマの歴史を進めるだけでなく、戻す機能も備えている。

```
$rails db:migrate
```


#コントローラの雛形作り
```
$rails g controller tasks index show new edit
```
config.routes.rbから余計なものを削除し、resourcesにまとめる

```config.routes.rb
 root to: 'tasks#index'
 resources :tasks
```

#一覧画面(index)から新規登録ボタンを作ってリンクを飛ばす
```app/views/〜/index.html.slim
= link_to '新規登録', new_task_path, class: 'btn btn-primary'
```

##翻訳処理
```config/locales/ja.yml
error:
〜
〜
model:
  task: タスク
attributes:
 id: ID
 name: 名称
 description: 詳しい説明
 created_at: 登録日時
 updated_at: 更新日時
ここら辺を任意で記載。
```

#新規登録画面の為のアクションを実装

```app/controllers/tasks_controller.rb
def new
 @task = Task.new 
end
```
※アクションからビューに受け渡しをしたいデータをインスタンス変数に入れるのが、アクションの基本役割の一つ。

#新規登録画面のビューを作成

```app/views/tasks/new.html.slim
form_withを使ってぽちぽち
```

#登録アクションの実装

```app/controllers/tasks_controller.rb
 def create
  task = Task.new(task_params)
  task.save!
  redirect_to tasks_url, notice: "タスク 「#{task.name}」を登録しました」"
 end

 private
 
 def task_params
   params.require(:task).permit(:name, :description)
 end
end
```
※なぜrenderでなく、redirect_toなのかは➡︎[RenderとRedirectの違い](https://bityl.co/4Jev)

このままだとnoticeが表示されないので、application.htmlを直す

```application.html.slim
 .container
 - if flash.notice.present?
  .alert.alert-success = flash.notice
```


#一覧表示機能の実装

コントローラ

```tasks_controller.rb
 def index
   @tasks = Task.all
 end
```

ビューの処理

```index.html.slim

 =link_to '新規登録'〜

.mb-3 
table.table.table-hover
 thread.thread-default
   tr
     th= Task.human_attribute_name(:name)
     th= Task.human_attribute_name(:created_at)
 tbody
   - @tasks.each do |task|
     tr
       td= task.name
       td= task.created_at
```



・[mb-3はrem1の意味](https://bityl.co/4JfF)

#詳細表示機能の実装
さっき書いた一覧にリンクをつける

```index.html.slim
td = link_to task.name, task_path(task)
```

showアクションを実装

```tasks_contoroller.rb
def show
 @task = Task.find(params[:id])
end
```

showのビュー実装

```views/tasks/show.html.slim
```

#編集機能の実装

・一覧と詳細画面に編集リンク追加
・newをコピーして、edit.htmlを作成
・editアクション実装

#パーシャルでDRYに

・
Terraform × AWS でインフラ構築するのはプロの所業じゃないらしい。

「どう考えても独学だけでこの組み合わせでインフラ構築するのはハイレベルすぎ。メンターつけたのかな？」
っていう趣旨のツイートをTLで見かけた。

正直インフラとか何？ってレベルだけど、メモとしてだけ残しておく。

・https://bit.ly/344aqrd

Terraformは最も革新的でめちゃ強なIaCやで！AWSとの相性が最高なんやで！
らしい。

Iac : Inflastracture as Code
コンピューティング・インフラ（プロセス、ベアメタルサーバー、仮想サーバーなど）の構成管理・機械処理可能な定義ファイルの設定・プロビジョニングを自動化するプロセス

すでにわからない。
基本情報法など基礎知識

#ブールの発明

ブールが物事は全て0,1で表せる二進数を提唱しました。
コンピュータを限界まで小さくすると、全てこの0と1に分解されます。

イケメンで金持ちじゃないと結婚しない : 1 + 1 = 1(AND)
金でも顔でも、どっちかを持ってれば結婚する : 1 + 0 OR 0 + 1 = 1(OR)
どんな条件でも絶対結婚なんかしたくない : 1 + 1, 1 + 0, 0 + 1,  0 + 0 = 0(NOT)


#世界最初の電卓「ENIAC」
戦争の弾丸を正確に敵地へぶつける為に発明された。


真空管=>半導体へ
当時は超巨大だったコンピュータの中を何人もの人間が走り回って真空管を取り替えていた。

耐久性のなさすぎる真空管から、半導体という半永久的に使うことができ、かつ土の中にいくらでもある「シリコン」できている物質に変化。
LEDライトはこの半導体でできている。

#弾丸の計算しかできない巨大電卓からコンピュータへ

ENIACは弾丸計算専用の電卓でした。配線を入れ替えれば他の計算も可能なので電卓よりも少しだけ高性能ですが、それでも今のコンピュータとは全く別物です。

ENIACの創始者ノイマンのアドバイス通り、「プログラム内蔵型の電卓」つまりコンピュータが作成されました。



#世界初のプログラミング言語「アセンブラ」の誕生

最初は0,1を直接打ち込んでいましたが、それでは不便な上に一度打ち間違えたら最初から打ち直す必要があります。

そこで、もっと人間らしい言語で
【C#】Mutexクラスを使ったプログラムの排他制御

#はじめに
アプリケーションの多重起動を阻止したい場合はMutexクラスを使用すれば良い。
Mutexクラスを使うことで簡単に排他処理を作ることができる。

#サンプルプログラム
```C#:Program.cs
using System;
using System.Diagnostics;

class Program
{
    private static System.Threading.Mutex _Mutex;

    static void Main(string[] args)
    {
        if(MutexTest())
        {
            Console.WriteLine("True 多重起動です。");
        }
        else
        {
            Console.WriteLine("false 単体起動です。");
        }

        Console.ReadKey();
    }

    static bool MutexTest()
    {
        //ミューテックスクラスのインスタンス生成
        _Mutex = new System.Threading.Mutex(false,"SubProcess");

        //Mutexの所有権を要求
        if (_Mutex.WaitOne(0, false) == false)
            return true;

        //プロセスを取得
        string AppName = Process.GetCurrentProcess().MainModule.FileName;
        var ps = Process.GetProcessesByName(AppName);

        bool ProcessFlg = false;

        foreach (var item in ps)
        {
            ProcessFlg = true;
            break;
        }

        //起動済ならreturn
        if (ProcessFlg)
            return true;

        return false;
    }
}
```

#出力結果(単体でプログラムを起動の場合)
```
false 単体起動です。
```

#出力結果(同プログラムを複数起動の場合、2つ目以降)
```
True 多重起動です。
```

ちなみに、プログラム上でMutexクラスを解放する際はReleaseMutexメソッドを使用する。

```
_Mutex.ReleaseMutex();
```
CSS~border~

前回はpaddingとmarginについて学びました。
次はborderについて学んで行きます。

#borderとは
これは枠のことです。
前回のpaddingとmarginの記述がわかれば結構簡単です！😊
記述方法は以下のとおりです。

```style.css
h1 {
  color: black;
  font-size: 40px;
  background-color: red;
  border:4px solid black;
  width: 15%;
  padding: 10px 20px 10px 20px;
  margin: 30px 20px 10px 40px;
}
```
記述したあとはこうなるかなと思います。
↓
![スクリーンショット 2021-03-02 13.18.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033397/8f053021-40cd-4fdf-0303-4b83333d3ad4.png)
おお、簡単だわ😂

部品ごとにそれぞれ解説しますね。
border▶線　4px▶太さ　solid▶種類　black▶色
になります。
ちなみに、線の主な種類に関しては以下になります。
solid	実線
dotted	点線
dashed	破線
double	二重線

今はすべてを囲うように設定していますが、部分的に引きたい場合などありますよね！
それではやっていきましょう！

まずは、HTMLに追加していきましょう！

```index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>CSSの書き方</title>
</head>
<body>
  <section>
    <h1>CSSについて</h1>
    <p>cssの基礎</p>
  </section>
</body>
</html>

```

では次にCSSを追加していきましょう！

```style.css
p {
  font-size: 20px;
  background-color: pink;
  margin:40px;
  padding: 10px 20px 10px 20px;
  width: 15%;
  border-top:10px solid red;
  border-bottom: 10px solid green;
}

```
はい！ブラウザで表示してみましょう！
↓
![スクリーンショット 2021-03-02 13.40.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033397/c1fe2afa-a449-4e84-f5e1-b14b78712f15.png)

てな感じになります！

単語の説明として
top▶上
right▶右
bottom▶下
left▶左
となります！

これらはpadding,marginのときにも使います👍
2つのテーブルのデータがすべて一致しているかを確認したい

テーブルXとテーブルYのデータがすべて一致しているかを確認したい場合、どのようにすればよいでしょうか?

集合Xと集合Yが等しいことを確認したい場合、以下の1または2のどちらかを確認すればよいです。

1. $(X \subseteq Y) = (Y \subseteq X)$
2. $(X \cap Y) = (X \cup Y)$

これをそのままSQLにすればよいですね。

1.については、以下のSQLが結果セットを返さない場合、テーブルXとテーブルYは等しいといえます。

```SQL
SELECT *
FROM ((SELECT * FROM x
       EXCEPT
       SELECT * FROM y)
       UNION ALL
      (SELECT * FROM y
       EXCEPT
       SELECT * FROM x)) AS z;
```

2.についても、テーブルXとテーブルYが等しいなら、以下のSQLの結果セットは0件になります。

```SQL
SELECT *
FROM ((SELECT * FROM x
       UNION
       SELECT * FROM y)
       EXCEPT
      (SELECT * FROM x
       INTERSECT
       SELECT * FROM y)) AS z;
```
【Ruby on Rails】デバッグツール(pry-rails)

エラーの時にはデバッグツールを使ってバグを発見したり、処理を止めて動作を確認したりします。
私は`pry-rails`を利用しているのでその使い方をまとめます。


## pry-rails

Railsにおけるデバッグ用のGemです。
私の主な使い方はコントローラー内で記述し、その処理を止めることでどんなデータが渡っているかなどを調べるのに使っています。
テストコードを書く際などにもエラー文を調べるために利用したりします。


## 準備

Gemfileの一番下に

```Ruby:Gemfile
gem 'pry-rails'
```

と記述します。

ターミナルで該当のプロジェクトのディレクトリで以下のコマンドを実行します。

```Ruby:ターミナル
bundle install
```

以上でGemの導入とGemfileの更新ができました。


## 使い方

①送られているデータの確認方法

例えばcreateアクションでどのデータが送られているか確認したい場合、コントローラー内の処理を確認したいところに`binding.pry`を記述します。

```Ruby:コントローラー
def create
    binding.pry
    Sample.create(sample_params)
end
```

記述できたらローカルのサーバーから実際にcreateアクションの動作を行ってみます。
（例えばformからの投稿など)

この状態でターミナルを見てみるとコンソールが起動していると思います。
下記のような入力街の状態です。

```Ruby:ターミナル
pry(#<SampleController>)>
```

ここに`params`と入力すると送られているデータが配列で確認できます。
うまく保存ができない時に試すと原因が分かることがあります。


②テストコードでの使い方

※テストコードの書き方の詳細は省きます。
以下のように異常系のテストコードを書く際に`binding.pry`で処理を止め、エラーメッセージがどういうものか確認します。


```Ruby:
context '新規登録がうまくいかない時' do
  it "名前(name)が空だと登録できない" do
    @user.name = ''
    @user.valid?
    binding.pry
  end
end
```

上記の記述をしてテストコードを実行するとターミナルでコンソールが起動するので

```Ruby:ターミナル
user.errors.full_messages
```

と入力するとエラーメッセージを出力してくれます。

以上です。
RstudioでPythonを使う

# 背景
昨年の秋にリリースされたRstudio v.1.4でPythonの使い勝手が非常に良くなりました。今やRstudioは**RのみならずPython使用者にとっても有用な統合開発環境**だと思います。
例としてnumpyとmatplotlibで散布図を描画してみます。

Rstudio v.1.4のPython supprtの詳細はこちら。
[RStudio v1.4 Preview: Python Support] (https://blog.rstudio.com/2020/10/07/rstudio-v1-4-preview-python-support/)

# 環境
PC: MacBook Pro 2020
OS: macOS Catalina (10.15.5)
R : 4.0.2 (2020-06-22)
RStudio: 1.4.1103

# 方法
### 1． pythonファイルの作成
File -> New File -> Python Scriptを選択します。
![スクリーンショット_2021-03-02_11_42_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363491/6616553b-7c90-6459-656d-4e8674d949df.png)


### 2. Python環境の選択
Tools -> Global OptionsでPythonを選択。Python interpreterのSelectで使用したいPython環境を選択します。conda環境ももちろん選択可能です。
![RStudio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363491/2036eac9-4575-c452-def6-4c7ed283506a.png)

### 3． 実行
 numpyとmatplotlibで散布図を描画します。

```py
#numpyとmatplotlibをインポート
import numpy as np
import matplotlib.pyplot as plt

#乱数を生成
x = np.random.rand(100)
y = np.random.rand(100)

#散布図を描画
plt.scatter(x, y)
plt.title("Title")
plt.xlabel("x")
plt.ylabel("y")
plt.show()
```

# 結果
上記スクリプトを実行したときのRstudioです。

- ①ソースパネルではRstudioで設定したシンタックスハイライトが適用されます。タブキーによるコード補完も行ってくれます。
- ②コンソールパネルではプロンプトが「>>>」になっています（Rだと「>」）。
- ③EvironmentパネルではPythonパブジェクトの中身を簡易に確認することができます。
- ④Plotsパネルには描画した図が表示されます。

![RStudio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363491/63d01e3f-8fc2-72d3-9da4-b45895f33172.png)

個人的には③と④の**複雑な設定なしにオブジェクトの中身と図を確認できる**点が特に嬉しいです。VS codeやAtomで同じような設定をするのはけっこう骨が折れるので。。。


なお、Rの**reticulateパッケージ**を使用すればR上でPythonを実行できるため「**Pythonのライブラリで求めた結果をRオブジェトとして格納し、ggplot2で作図する**」ことも可能です。
~~reticulateパッケージの使用方法についても後ほどまとめようと思います。~~

2021年3月5日追記
書きました→[Rからpythonコードを実行できるreticulateパッケージが便利](https://qiita.com/otsukimi200624/items/32b011c3695867b696f1)
CSS~padding&margin~

前回の記事でCSS の記述の仕方をアウトプットしましたね。
なんの話って方は前の記事を御覧ください！
https://qiita.com/akari_0618/items/1baaebc0a4946d2fa9a6
ではでは、早速やっていきましょう☺️

#paddingとは
そもそもpaddingってなんぞやって思いますよね。私も思いました。最初スルーしました。
でも意外と分かるとおもしかったので一緒に学んで行きましょう。
paddingとは簡単に言うと文字の内側の余白みたいなもんですが、語彙力が凄まじくないので、実際にやっていきましょう。
前の記事では最後こんな形になっていたと思いますので、ここからスタートしていきましょう。
![スクリーンショット 2021-03-02 11.50.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033397/3785a718-1fb3-77fb-ed53-8ad1b5cd1e2a.png)


```style.css
h1 {
  color: black;
  font-size: 40px;
  background-color: red;
  width: 15%;
  padding: 10px 20px 10px 20px;
}

```
少し設定を変えました。
画面上でこうなりましたか？
内側の幅を取りたい場合に使います！

![スクリーンショット 2021-03-02 12.30.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033397/5aa45152-c76c-146b-600a-8526d43b3828.png)

paddingなんとなくわかったとこで、次はmarginやっていきましょう！

#marginとは
marginを学んで行きましょう！
こちらは外側の余白を取りたいときに使います！
ではでは早速やっていきましょう！

```style.css
h1 {
  color: black;
  font-size: 40px;
  background-color: red;
  width: 15%;
  padding: 10px 20px 10px 20px;
  margin: 30px 20px 10px 40px;
}
```
こうなりましたかね！
![スクリーンショット 2021-03-02 12.46.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033397/da1186de-3795-cb74-84e5-c891eb080f86.png)

#padding&marginの指定の仕方

```style.css
padding:10px;
 こちらは４辺すべての指定になります。
padding:10px 20px;
 こちらは10pxが上と下、20pxが左右の指定になります。
padding:10px 20px 30px;
　こちらは10pxが上、20pxが左右、30pxが下の設定になります。
padding:10px 20px 30px 40px;
 こちらは10pxから時計回りに設定されています。
```

個人的にmarginのほうがわかりやすいなと思いましたが、３０分前まで違いがわかんなかったのですが、すぐわかるようになったので皆さんもぜひ攻略してみましょう☺️

次は、borderについて学んでいきます👍
GA4(FirebaseAnalytics)でパラメータレポート・ユーザープロパティの設定方法が変わりました

パラメータレポート及びユーザープロパティが総称して「カスタム定義」という機能になりました。今回は新しい「カスタム定義」について、書きたいと思います。
ユーザープロパティについては機能は変わらず設定方法が変わったのですが、変更された直後は「ユーザープロパティが消えた！？」と少し焦りました。機能としてはなくなっていないのでご安心ください^^;


# カスタム定義とは？
カスタム定義には、カスタムディメンション/カスタム指標の二つが存在します。
カスタムディメンションを設定する際に、スコープの指定が必要になりました。スコープには「イベント」と「ユーザー」の指定が可能で、「イベント」スコープを指定した場合が旧パラメータレポート、「ユーザー」スコープを指定した場合が旧ユーザープロパティです。

▼カスタム定義の設定画面
![カスタム定義の設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624293/568993ff-0ccc-18bc-73b6-d6b6c3b056d6.png)


## 旧パラメータレポートとの違い
設定方法が違うということは上で述べた通りです。その他に機能として違いがあるかを記載していきます。
「イベント」スコープを指定したカスタム定義は、これまで通りイベントレポート上で値を確認することができます。

以前はイベント毎にパラメータレポートを追加する必要があったので、共通するイベントパラメータでも、一つ一つイベント毎にパラメータレポートを設定する必要がありましたが、現在は共通するイベントパラメータのカスタム定義を1つ設定すれば、そのパラメータを持つ全てのイベントでレポートを確認することができるようになりました。

また、旧パラメータレポートの設定では、文字列か数値か、数値の場合は測定単位が設定できるという設定方法でしたが、カスタム定義ではパラメータ値が文字列の場合は「カスタムディメンション」、数値の場合は「カスタム指標」に設定します。「カスタム指標」を選んだ場合は、これまで通り測定単位が設定可能です。

### アーカイブする際の注意点
「カスタム定義」がイベントを跨いで値を収集するようになったことで、以前設定していたイベントパラメータも新しい仕様に対応するように自動で移行されているはずです。
例えば、"eventA"と"eventB"は"param"というイベントパラメータを持っていて、それぞれのイベントでパラメータレポートを設定していた場合、移行後のカスタム定義はparam[eventA]とparam[eventB]という名前で移行されます。
新しい仕様では、"param"というカスタム指標を設定することで、"eventA"でも"eventB"でもレポートで値の確認ができるようになっており、ヘルプにはどちらか一方を削除して構わないと書いてあります。

ですが、ちょっと待って欲しい。。
移行後のデータは確かに共通化されており、それぞれのイベントパラメータの値がparam[eventA]、param[eventB]どちらでも確認が可能です。
しかし、新しい仕様へ移行前のデータは、param[eventA]、param[eventB]それぞれで保持しているため、移行されたカスタム定義を削除すると、以前のデータが消える場合があります！

▼計測データのイメージ
![スクリーンショット 2021-02-25 21.25.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624293/5697a097-b9cf-c5db-e6d4-a65e36cd7d2e.png)

ヘルプにデータが消えるとは書いていないし、"重複したカスタムディメンションとカスタム指標を削除することをおすすめします"と書いてあることに恐怖を覚えます。。

## 旧ユーザープロパティとの違い
設定場所と名称が変わったこと以外に、仕様は変更されていないのでは？というのが現状です。
ヘルプは2021年2月現在変更はなく、「ユーザープロパティの設定」となっています。
GA4やFirebaseAnalyticsではこれまで通りに比較の追加でフィルタとして利用ができ、GA4の分析レポートではディメンションやセグメントとして利用が可能です。


## アプリ側の設定方法
イベントパラメータも、ユーザープロパティも実装方法は変わっていません。
イベントパラメータはlogEventメソッド、ユーザープロパティはsetUserPropertyメソッドを利用して設定します。
ユーザープロパティの設定後は、明示的に消去しない限り全てのイベントに設定したユーザープロパティが紐付くという仕様も変わりません。

# まとめ
今回はパラメータレポートとユーザープロパティの画面上での設定方法が変更になったという内容をまとめました。
カスタム定義の設定上限があるため、パラメータがイベントを跨いで計測されるようになったことは大変嬉しい仕様変更だと言えると思います。
ただ、上記にも書いた通り、パラメータレポート時代から利用していた場合、アーカイブしてしまうと失われるデータが存在するということに注意してください。
heroku create エラー

# はじめに
heroku createを使うときに起きたエラーをまとめてみました。

# Name アプリ名 is already taken
heroku create アプリ名
とコマンドを書いてアプリをherokuに作ろうとすると
Name アプリ名 is already taken
と出てしまう。これは自分が付けた名前だけでなく今までに誰かが付けていてもだめなので重ならないように名前をつける。

# 個数制限
無料版ではアプリを５つまでしか作成できないので、５つ使い切っている人は。
一度アプリ数を確認して

```
% heroku apps
```
古いアプリを削除してしまいましょう。

```
% heroku destroy --app アプリ名
```
下記のようにでるので

```
! WARNING: Potentially Destructive Action
! This command will destroy アプリ名 (including all add-ons).
! To proceed, type "アプリ名" or re-run this command with --confirm アプリ名
```
もう一度アプリ名を入力

これで新しく作れるようになります。
/etc/default/keyboard を編集して CapsLock を Ctrl にしようとしたのに GNOME デスクトップで適用されなかったときの対処

# 生じた問題
GNOME デスクトップを使っていて `/etc/default/keyboard` を編集して、CapsLock を Ctrl にしようとしたのに期待された挙動になりませんでした。

## 書き込んだ設定
```bash:/etc/default/keyboard
# CapsLock をなくして Ctrl にする
XKBOPTIONS="ctrl:nocaps"
```

### 期待された挙動
* CapsLock が Ctrl になる
* CapsLock の機能をもつキーは消える

### 実際の挙動
* CapsLock が Ctrl になる
* 左 Ctrl が CapsLock の機能になる

この挙動は`ctrl:nocaps` ではなく `ctrl:swapcaps` の挙動です。仮想コンソールを開くとちゃんと `nocaps` の仕様になっているようなので、これは GNOME デスクトップの設定と競合しているのだと推測しました。

# 対処法
ターミナルで `dconf-editor` を実行します。

```bash
$ dconf-editor
```

GUI の設定画面が開くので `org > gnome > desktop > input-sources > xkb-options` を開きます。そこに `Custom Value` 欄があり、`['ctrl:nocaps', 'ctrl:swapcaps']` などと並んでいるので必要な内容（ここでは `'ctrl:swapcaps'` を削除する）に編集します。

# 参考資料
* [How to allow for caps-lock keyboard layout change - Unix & Linux Stack Exchange ](https://unix.stackexchange.com/questions/279141/how-to-allow-for-caps-lock-keyboard-layout-change)
CentOS8環境でmanpages-jaをインストールする

CentOS8環境では、manpages-jaがパッケージで提供されていないので、日本語のマニュアルがほとんどない。catコマンドなど、基本的なコマンドのマニュアルも英語のものが提供される。
そのままでもいいんだけれど、日本語のマニュアルを入れてみようかなということで、以下でご提供いただいているファイルをダウンロードして、インストールしてみた。
https://linuxjm.osdn.jp/download.html

以下、実行した構文。
以下は、執筆時点の最新のアーカイブ（man-pages-ja-20210215.tar.gz）をダウンロードして、展開。展開したディレクトリをカレントディレクトリにする。

```bash:man-pages-jaアーカイブのダウンロードと展開
[...]# curl -O https://linuxjm.osdn.jp/man-pages-ja-20210215.tar.gz
...(実行結果省略)...
[...]# tar xzf man-pages-ja-20210215.tar.gz
[...]# cd man-pages-ja-20210215
```

以下は、インストール手順。
ほぼアーカイブの中に含まれるINSTALLファイルの通り。めちゃめちゃ親切に書かれている。
インストールに必要なパッケージをdnfでインストールしてから、make configを実行。インストールするマニュアル項目等の指定を行う。enterキーを押すと、既定値で進める。
その後、make installでインストール。
インストールしたマニュアルの索引情報を展開するためにmandbコマンドを実行。

```bash:man-pages-jaのインストール
[...]# dnf install perl-Env make
...(実行結果省略)...
[...]# make config
perl -w script/configure.perl
[INSTALLATION INFORMATION]
(just Return if you accept default)
   Install directory   [/usr/share/man/ja_JP.UTF-8] ?:
   compress manual with..
      0: none
      1: gzip
      2: bzip2
      3: compress
   select [0..3] : 1
   uname of page owner [root] ?:
   group of page owner [root] ?:

   Directory:    /usr/share/man/ja_JP.UTF-8
   Compression:  gzip
   Page uid/gid: root/root

All OK? (Yes, [C]ontinue / No, [R]eselect) : C
[INSTALL PACKAGE SELECTION]
(just Return if you accept default choice)
(you can change the default by editing script/pkgs.list)
   [ 0/120] shadow          [Y/n] ?:
...(以降省略)...
[...]# make install
...(実行結果省略)...
[...]# mandb
/usr/share/man/overrides 内の古いデータベース要素を取り除いています...
...(以降省略)...
```

これで、manコマンドを実行すると、日本語のマニュアルが表示される。もちろんLANG変数の設定とかで、日本語環境になっている必要あり。
ソフトバンクのゼロトラストソリューションの特徴

<table>
	<tr>
		<th>切り口</th>
		<th>内容</th>
	</tr>
	<tr>
		<th>サービスの内容</th>
		<td>SB MSSとは。マネージドセキュリティサービス。https://www.softbank.jp/biz/security/mss/sbmss/、https://www.softbanktech.co.jp/service/list/managed-security-service/</th>
	</tr>
	<tr>
		<th>サービスの範囲</th>
		<td>ネットワーク監視に加えてセキュリティ監視もしますよという感じ。miter社の内容に準拠して対応する。構築はしてもらって、体制はこちらで用意するという感じ。</td>
	</tr>
	<tr>
		<th>特徴</th>
		<td>製品技術、開発チームと連携して新しいゼロトラストセキュリティサービスを自動化する。中の運用はわからないけど、自動でみれるようにしている？</td>
	</tr>
	<tr>
		<th>提案の種類</th>
		<td>特徴のちがうSASEを複数扱うことで、客に最適な提案をできる。SASE、SD-wan、デバイスセキュリティ、という枠組みでわけている</td>
	</tr>
	<tr>
		<th>ポイント</th>
		<td>「自動化していくこと」をポイントにしている。これができないときついのかもしれない。そこが判断ポイントかもしれない。</td>
	</tr>
	<tr>
		<th>売り</th>
		<td>セキュリティツールのノウハウ、可視化・自動化、エンジニアの３本柱が売り</td>
	</tr>
	<tr>
		<th>対応するチーム</th>
		<td>セキュリティチームが対応する。（IIJの迷惑メールフィルタみたいな感じ）</td>
	</tr>
</table>
STM32G031のArduinoでの時計,DS1307で時刻表示AQM0802A その2


stm32g031,stm32l010用に最軽量化したもの

x時間合わせは、別

1.SCLとSDAを接続、プルアップも忘れずに
2.電源の接続
3.下記のソースコードを書き込む
4.コンパイル実行で表示されたら終了
5.おわり


```c++

#include <Wire.h> //I2C library

//STM32G031J6M6
#define sdaPin PA12    // ArduinoA4
#define sclPin PA11    // ArduinoA5

#define ADDR    0x68  // 2進数 1101000
#define I2Cadr  0x3e  // 固定

int     ii;           //ループカウンター
char    data_read[8]; //i2cバッファー

//初期レジスター
char INIT_com[]={0x0,0x38,
0x0,0x39,
0x0,0x4,
0x0,0x14,
0x0,0x70,
0x0,0x56,
0x0,0x6C,
0x0,0x38,
0x0,0xC,
0x0,0x1,
0x40,0x41};

//画面クリアレジスター
char INIT_cls[]={0x0,0x1};

//時間をLCD表示形式に変換
char ch_hex_a_b[5];
char *ch_hex_a(int l_num)
{
    ch_hex_a_b[0] = '@';
    ch_hex_a_b[1] = '0' + (l_num >> 4);
    ch_hex_a_b[2] = '0' + (l_num & 0xf);
    ch_hex_a_b[3] = ':';
    ch_hex_a_b[4] = 0;
    return(ch_hex_a_b);
}

//i2c書き込みルーチン 2と4のみ
void i2c_led_w(char *buff1,int n){
  Wire.beginTransmission(I2Cadr);
  Wire.write(buff1[0]); //rs 0がレジスター rs 1がデータ
  Wire.write(buff1[1]); //値1
  if( n == 4 ) {
    Wire.write(buff1[2]); //値2
    Wire.write(buff1[3]); //値3
  }
  Wire.endTransmission();
  delay(2);
}//i2c_led_w

void setup()
{
  Wire.begin(sdaPin,sclPin); //STM32G031J6M6

  //液晶の初期化
  for(ii=0;ii<11;ii++){
    i2c_led_w(&INIT_com[ii*2],2);
  } //for
} //end setup

void loop()
{
  //液晶のクリア
  i2c_led_w(INIT_cls,2);

  // レジスタのアドレスを先頭にする
  Wire.beginTransmission(ADDR);
    Wire.write(0x00);
  Wire.endTransmission();

  // I2Cスレーブに8byteのレジスタデータを要求する
  Wire.requestFrom(ADDR, 8);

  // 8byteのデータを取得する
  for (ii = 0; ii < 8; ii++) {
    while (Wire.available() == 0 ) {}
    data_read[ii] = Wire.read();
  }//for

  //画面に表示
  i2c_led_w(ch_hex_a(data_read[2]) ,4);
  i2c_led_w(ch_hex_a(data_read[1]) ,4);
  i2c_led_w(ch_hex_a(data_read[0]) ,4);
  
  delay(1000);  //1秒待つ

}//loop


```


時間合わせ



```

#include <Wire.h> //I2C library

//STM32G031J6M6
#define sdaPin PA12    // ArduinoA4
#define sclPin PA11    // ArduinoA5

#define ADDR    0x68  // 2進数 1101000

char    data_read[8]; //i2cバッファー

#define HH  12
#define MM  34

void setup()
{
  Wire.begin(sdaPin,sclPin); //STM32G031J6M6

//i2c書き込み
  Wire.beginTransmission(ADDR);

  Wire.write((char) 0    ); //0 レジスターの位置は0
  Wire.write((char) 0    ); //1 秒
  Wire.write((char) ( MM /10)*16+( MM %10) ); //2 分
  Wire.write((char) ( HH /10)*16+( HH %10) ); //3 時

  Wire.write((char) 3    ); //4 曜日
  Wire.write((char) 1    ); //5 日
  Wire.write((char) 1    ); //6 月
  Wire.write((char) 0x20 ); //7 年

  Wire.endTransmission();

} //end setup

void loop()
{

} //loop


```


![g031_i2c_lcd_ds1307_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/c91125fe-3fd2-16b6-4e5f-9e1a10d99410.jpeg)

![i2c_lcd_ds1307_g031_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/1d31234f-36ab-a7e7-6f1f-6633688b400f.jpeg)
【JavaScript】submitボタンをonClick()でdisabledするとonSubmit()が実行されない件【二重送信防止】

## 問題
どうも。みるみっとです。
フロントエンドエンジニアをやっています。

業務中にお問い合わせフォームを作っていたところ、
「できれば二重防止送信機能を作って欲しい」との要望が。

単純に「送信ボタンをクリックした後にdisabledするかぁー」と思っていたのですが、
どうやら**submitボタンのclickイベントでdisabledにするとonSubmitが実行されない**ということが分かりました。

**※ちなみにonSubmit内でdisabledにしてもダメでした。**

別にonSubmitまでdisabledしなくても良いのに...(´ω`)


## 動作環境
OS： macOs 10.15.6
ブラウザ： Google Chrome ver88.0


## 解決方法
disabledではなく、CSSの**「pointer-events:none」**を使うと上手くいきました。

pointer-events:noneにすることで、**ポインターイベントが無効**されます。
つまり、その要素の**クリック・タッチが効かなくなります**。
ユーザーにとっては実質disabledです。

```html:form.html
<form name="myForm" action="" method="get" onSubmit="return submitForm()">
	<p class="title">メッセージ</p>
	<textarea id="message"></textarea>

	<input type="submit" id="submit_pointer" value="送信" onClick="buttonDisabled()">
</form>
```

```javascript:form.js
//submitボタンのクリックイベント
function buttonDisabled(){
	//pointer-eventsをnoneに
	$('#submit_pointer').css("pointer-events", "none");

	//disabledしてるっぽい色に変更
	$('#submit_pointer').css("background", "#636363");
}

//フォームのsubmitイベント
function submitForm(){
	return true;
}
```

## 実装例
下記に、
**①二重送信防止していない送信ボタン
②送信後にdisabledする送信ボタン
③送信後にpointer-events:noneする送信ボタン**
の３パターンを実装した礼を載せておきます。

disabledボタンはフォームが送信されず、
pointer-eventsボタンだとフォームが送信されることが分かると思います。
<p class="codepen" data-height="450" data-theme-id="dark" data-default-tab="html,result" data-user="mykzreas" data-slug-hash="XWNEORq" style="height: 450px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="submitボタンをdisabledするとsubmitできない件">
  <span>See the Pen <a href="https://codepen.io/mykzreas/pen/XWNEORq">
  submitボタンをdisabledするとsubmitできない件</a> by mykz (<a href="https://codepen.io/mykzreas">@mykzreas</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

※フォームの送信に成功すると（onSubmitが動作すると）アラートが表示されるようにしています。
※ページ遷移を防ぐためonSubmitはreturn falseしています。


## 終わりに
disabledするとonSubmitが動作しないのはいまいちピンと来ないですが、pointer-events:noneの方が動作的のも軽そうですね。

視覚的にdisabledっぽいボタンの色に変更するのもUX的にも良さそうです。

## 参考
https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events
UnityでiOSのUIColorPickerViewControllerを使うPlugin


# はじめに

iOS14から導入されたUIColorPickerViewControllerをUnityから使いたかったのでPluginを書きました。

# レポジトリ

https://github.com/JunSuzukiJapan/UIColorPickerManager/

# Unitypackage

[UIColorPickerManager.unitypackage](https://github.com/JunSuzukiJapan/UIColorPickerManager/raw/main/UIColorPickerManager.unitypackage)

# Sample

```csharp
public void Show(){
    Color currentColor = Color.white;
    UIColorPickerManager.Show(currentColor, OnSelectColor, OnFinish);
}

// call when color selected.
void OnSelectColor(Color selectedColor){
    // ...
}

// call UIColorPickerViewController finished.
void OnFinish(){

}
```

## UIColorPickerManager.Show

```UIColorPickerManager.Show``` にはいくつかのオーバーライドがあります。

### 選択された色をColorオブジェクトで受け取る

```csharp
void Show (
    Color currentColor,
    OnColorSelectedCallback onColorSelectedCallback,  // Colorオブジェクトを受け取るコールバック関数
    OnFinishCallback onFinishCallback)
```

### 選択された色をRGBAで受け取る場合

```csharp
void Show (
    Color currentColor,
    OnRGBColorSelectedCallback onRGBColorSelectedCallback,  // RGBAを受け取るコールバック関数
    OnFinishCallback onFinishCallback)
```

### 選択された色をColorオブジェクトで受け取り、iOS14未満の時の処理を必要とする場合

```csharp
void Show (
    Color currentColor,
    OnColorSelectedCallback onColorSelectedCallback,
    OnFinishCallback onFinishCallback,
    OnEarlierIOSVersionsCallback onEarlierIOSVersionsCallback)
```

### 選択された色をRGBAで受け取り、iOS14未満の時の処理を必要とする場合

```csharp
void Show (
    Color currentColor,
    OnRGBColorSelectedCallback onRGBColorSelectedCallback,
    OnFinishCallback onFinishCallback,
    OnEarlierIOSVersionsCallback onEarlierIOSVersionsCallback)
```

### 参考：上記のコードで使われているdelegateの定義

```csharp
    // - colorPickerViewControllerDidSelectColor: 用コールバック
    public delegate void OnColorSelectedCallback(Color color);
    public delegate void OnRGBColorSelectedCallback (float r, float g, float b, float a);

    // - colorPickerViewControllerDidFinish: 用コールバック
    public delegate void OnFinishCallback();

    // @available(iOS 14.0, *) がfalseの時用コールバック
    public delegate void OnEarlierIOSVersionsCallback();
```



# ライセンス

ライセンスは[MIT](https://github.com/JunSuzukiJapan/UIColorPickerManager/blob/main/LICENSE)です。

# 補足

いないかもしれませんが、ソースコードを読みたいという方がいれば、
先に、 [[Unity]ネイティブプラグインからコールバック関数を呼ぶ[iOS]](https://qiita.com/JunSuzukiJapan/items/b35c0ddecb5edc4f10ea)
という記事を読むことをお勧めします。このプラグインは、その記事の応用になっています。
Django　local_settings.pyに書いた公開したくない情報をsettings.pyに導入する方法

#local.settings.pyの設定
まずsettings.pyのファイルがある同じ階層にlocal_settings.py(名前はなんでも良い）、.gitignoreを作成します。.gitignoreにlocal_settings.pyを追加します。


次にlocal_settings.pyに公開したくない情報を以下のように書きます。

```local_settings.py
SECRET_KEY = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'

DATABASES = {
    'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
}

```

#settings.pyの設定
settings.pyに以下のコードを追加します

```settings.py
try:
    from .local_settings import *
except ImportError:
    pass
```

以上です。
これでGithubなどで公開したくない情報をlocal_settings.pyに書いて、settings.pyに導入することができます。
Ajaxでお気に入り機能を実装する

##自己紹介
9月から独学でプログラミング学習を開始し、
11月からスクールを使って学習をしています。
現在はポートフォリオの作成し転職活動中です。
知識を定着させるために、学びをアウトプットしています。
また、これから学び始める方の参考になることを願っています。
***
##開発環境
- Ruby 3.0
- Ruby on Rails 6.0.3.4
- jQuery 3.5.1

#Ajaxでお気に入り機能を実装する
前回、[Railsでお気に入り機能を実装する](https://qiita.com/KON-ch/items/65f12d532eaf549b7de2)という記事を投稿しました。
今回は、この記事の非同期化を行います。
同時にお気に入り数のカウントも行ってみましょう！

##1.マイグレーションファイルを作成する
まずはターミナルで下記のコマンドを実行して下さい。
`rails g migration AddLikersCountToMoives`
そして、生成されたマイグレーションファイルを編集します。

```rb
class AddLikersCountToMovies < ActiveRecord::Migration[6.0]
  def change
    add_column :movies, :likers_count, :integer, default: 0
  end
end
```
これで`likees_count`というメソッドが使用できるようになりました。
>[公式のGithub](https://github.com/cmer/socialization)も合わせて参照下さい。

**☆ポイント**
ここで`rails db:migrate`を実行しますが、
その前に、もしお気に入りの登録を行っている場合は全て解除して下さい。
`default: 0`としているため、現在の状態が0になってしまいます。
このまま、お気に入り解除をすると-1のような表示になってしまいます。

##2.ビューファイルを追加する
まずは、`views/movie`配下に`_favorite.html.erb`というビューファイルを新しく追加します。

```erb
<% if current_user.likes?(movie) %>
  お気に入り解除
<% else %>
  お気に入り登録
<% end %>
<%= movie.likers_count %>
```

これは以前に作成したビューファイルを切り出したものに、`likers_count`を追加したものになります。
それでは、以前に作成したビューファイルを編集しましょう

##3.ビューファイルの編集をする

```erb
<%= link_to favorite_movie_path(movie), remote: true do %>
  <div id="favorite-movie">
    <%= render partial: "movies/favorite", locals: {movie: movie}
  </div>
<% end %>
```

まず、作成した`_favorite.html.erb`を`render partial: "movies/favorite"`で読み込んでいます。
`locals: {movie: movie}`は`favorite.html.erb`内のmovieにビューで使っているmovieを渡しています。
>renderについては[Railsガイド](https://railsguides.jp/layouts_and_rendering.html#render%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B)を参照ください。

`link_to`のオプションに`remote: true`を指定しています。
これにより`views/movies/favorite.js.erb`が呼び出されるようになります。
指定した`id="favorite-movie`は`favorite.js.erb`で使用します。

##4.JavaScriptファイルを作成する。
`views/movies`配下に`favorite.js.erb`を作成して下さい。
内部は下記の１行だけです。

```js
$("#favorite-movie").html("<%= j(render partial: "movies/favorite", locals: {movie: @movie}) %>");
```
先程のidを指定し、内部のhtmlを`_favorite.html.erb`に書き換えています。
今回、**jQuery**を使用していますが、導入については、省略致します。

---
以上で機能の実装は終了です。
前回記事、[Railsでお気に入り機能を実装する](https://qiita.com/KON-ch/items/65f12d532eaf549b7de2)と合わせてご覧下さい。
また、至らない点があれば、お手数ですがご指摘下さい。

---

###補足①
非同期でお気に入りを行った際に、お気に入り数のカウントが、遅れてしまう可能性があります。
そのような場合、`controllers/movies_controller.rb`に下記を追加して下さい。

```rb
  def favorite
    @movie = Movie.find(params[:id])
    current_user.toggle_like!(@movie)
    + @movie.reload    #この１行を追加
```
`reload`でお気に入り処理後に再読み込みを行っています。

###補足②
お気に入り処理を`each`など繰り返し処理内で行いたいこともあると思います。
その場合は、指定した`id="favorite-movie`を下記のように変更して下さい。

```erb
<%= @movies.each do |movie| %>
  <div id="favorite-movie-<%= movie.id %>">
    <%= render partial: "movie/favorite", locals: {movie: movie} %>
  </div>
<% end %>
```
`views/movies/favorite.js.erb`

```js
$("#favorite-movie-<%= @movie.id %>").html("<%= j(render partial: "movies/favorite", locals: {movie: @movie}) %>");
```

id属性にid値を指定することで、繰り返し処理内でもお気に入りの処理を行うことができます。
Vue.jsでRangeError: Maximum call stack size exceeded

## 事象

```
client.js?06a0:103 RangeError: Maximum call stack size exceeded
    at Function.isArray (<anonymous>)
    at _traverse (vue.runtime.esm.js?2b0e:2106)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
```

## 解決方法

下記コードを

```js
  computed: {
    ...mapMutations('xxx', ['setYyy']),
  },
```

下記のように修正。

```js
  methods: {
    ...mapMutations('xxx', ['setYyy']),
  },
```

ちょっとしたミスでこの謎エラー、こわいね
二酸化炭素センサ MH-Z19BとMH-Z19Cの比較

今、手元にNDIR方式の二酸化炭素センサーが2つあります。
MH-Z19BとMH-Z19Cの二種類。（以降、19B、19Cと表記します）

どちらもAliexpressで購入。MH-Z19Bを製造元のショップから買ったら検査証明書がついてきました。
データシートを眺めて、特に気になった相違点を列挙してみます。(データシートのバージョンは、19BがVer1.5　19CがVer1.0）
#1.入力電圧（VDD)
| 19B | 19C |
|:-:|:-:|
|4.5～5.5V|5.0±0.1V|
19Cは19Bに比べ電源に対する要求がシビアになっています。
家のArduino互換機の5V出力は5.16Vでしたが19Cは問題なく動作しいます。

#2.平均電流とピーク電流
+ 平均電流

| 19B | 19C |
|:-:|:-:|
|<20mA|<40mA|

+ ピーク電流

| 19B | 19C |
|:-:|:-:|
|<150mA|<125mA|

19Cの方が若干消費電流が多い様です。

#3.プレヒート時間

| 19B | 19C |
|:-:|:-:|
|3分|1分|

電源投入してから測定値が安定するまでの時間です。19Cの方が早いです。

#4.測定範囲

| 19B | 19C |
|:-:|:-:|
|0~2000/5000/10000ppm|400~2000/5000ppm|

19Cでは下限値が400ppm固定になりました。ちなみに2020年の全地球大気のCO2濃度は410ppm前後です。
センサの精度が「±50ppm+5%Reading Value」なので気にする意味はなさそうです。

#5.コマンド
| 19B | 19C |
|:-:|:-:|
|CO2読み込み|←|
|ゼロポイント校正※1|※2|
|最大値校正|-|
|セルフ校正オン/オフ|←|
|測定範囲設定|-|

※1ゼロポイント校正を行うと、その時点のCO2濃度を400ppmに設定。

19Cはコマンドがかなり簡略化されました。19Bではコマンドによる0ポイント校正の他、HDコネクタをGNDに7秒以上接続するという方法がありますが、~~19CではHDコネクタによる方法のみ~~ 
~~※2 試しにコマンドを実行したら校正されたっぽいです。温度取得みたいに隠しコマンド扱いにされた？~~やっぱりできない模様

19Cは19Bから必要な機能のみに絞った簡略版の様に見えます（、が単にコマンドを非公開にしただけかも）

+ 参考リンク（データシート）

MH-Z19B https://www.winsen-sensor.com/d/files/MH-Z19B.pdf
MH-Z19C https://www.winsen-sensor.com/d/files/infrared-gas-sensor/mh-z19c-pins-type-co2-manual-ver1_0.pdf
CSSについて

#CSSとは？？
前回マークアップしたHTMLがブラウザに表示される文字ですが、それだけでは味気ないですよね？？
ここで使うのがCSSです！😊
お化粧みたいな感じですね！😳
それでは書き方を見ていきましょう👍

##CSSの記述方法

```index.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>CSSの書き方</title>
</head>
<body>
  <section>
    <h1>CSSについて</h1>
  </section>
</body>
</html>


```
```style.css
h1 {
  color: black;
  font-size: 40px;
  background-color: red;
}
```
と記述します！
ポイントは、HTMLのheadタグの中に リンクタグをかき忘れないことです👍
そして、CSSフォルダを作り、その中にCSSファイルを作ることを忘れないでください👌
これをブラウザに表示するとこうなります！
↓
![スクリーンショット 2021-03-02 11.22.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033397/caf024a5-99b6-1340-8ec0-6c30e3b189e4.png)

ちょ、ｈ１長くねと思った方、HTMLにはインライン要素とブロック要素がありましたね😁
https://qiita.com/akari_0618/items/f3b6892932cb6080c905
その前の記事を御覧ください！

長すぎだよと思った場合は、こう入力して幅を指定してしまいましょう！

```style.css
h1 {
  color: black;
  font-size: 40px;
  background-color: red;
  width: 40px;
  height: 65px;
}
```
（width）がついかされていますね！
４０％は適当にセットしましたが指定の仕方には３つほどあります。
①auto
初期値。つまり最初の画面のまま表示されます。
②%
こちらは親要素の幅次第で変わります。
③px
こちらは親要素に関係なく指定できます。
ちなみに当たり前ですが、親要素より大きくは指定できません。
そしてくどいようですが、インライン要素には幅指定できませんので反応しない場合は要素の確認をしてみましょう☺️

（height）も追加されていますね！
こちらは高さの設定になります。ここでは背景カラーの高さの設定になります。
高さ指定には主にピクセル(px)で指定します。
↓
![スクリーンショット 2021-03-02 11.50.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033397/bebf461c-c08f-7225-c1b9-04ba2926a19f.png)
こうなりましたらOKです👍

文字を真ん中にしたいので次はそちらをやっていきたいと思います！
おそらく初心者がつまずくpaddingとmarginですね🥲
（大丈夫、私もだから）