OmniAICreator/Qiita-1.07M huggingface dataset:
Web制作に必要な知識を学習できるサイト

Web制作に必要な知識を学習できるサイトを紹介します。

学習サイトは多くありますが、個人の解釈によって作成された記事や初学者に特化した学習コンテンツには、必要な知識が抜けていたり、誤った情報が含まれる場合があります。
本記事ではできるだけ公式情報に近いサイトを紹介しています。

まずは公式情報にあたり、そこで書いてあることを理解するのが難しい場合に、部分的に検索をして個人ブログなどを参考にするような学習方法をおすすめします。

# ウェブ入門 | MDN

HTML,CSS,JavaScriptの公式ドキュメントを扱うMDNのウェブ入門教材です。必要な知識を体系的に学習できます。
[ウェブ入門 | MDN](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web)

# WordPress.com入門 – 日本語サポート

Wordpressの使用方法や概念について学習できます。
[WordPress.com 入門](https://wordpress.com/ja/support/getting-started-with-wordpress-com/)

# PHPマニュアル

PHPの公式ドキュメントを扱うサイトの入門教材です。
[PHP: PHP マニュアル - Manual](https://www.php.net/manual/ja/index.php)

# CS50 for Japanese: コンピュータサイエンスの入門

ハーバード大学のコンピュータサイエンス講義が日本語訳されたサイトです。
コンピュータサイエンスについてひととおり学ぶことができます。なかでもWEBプログラミングを扱っている「CS50’S WEB PROGRAMMING」の講義は、Web制作に必要な最低限の知識を体系的に学習できるため、おすすめです。
[HTML, CSS – CS50 for Japanese: コンピュータサイエンスの入門](https://cs50.jp/web/2020/html-css/)
LinuxでKindle

Amazon Kindle for pcをUbuntuで動かそうとして、wineをいじっていたのだが、
プロキシがなんたらかんたらとか言うエラーが出て動かなかった。
そこで、苦心惨憺のweb検索の結果、解決方法を見つけた。

# 環境
wine6.0.3 (32bit)
ubuntu22.04LTS
Kindle 1.26.0
wineのwindowsのバージョンはWindows 10

# 問題点と解決策


### (1)プロキシエラーの回避
$ sudo dpkg-reconfigure ca-certificates
をして、
mozilla/VeriSign_Class_3_Public_Primary_Certification_Authority
を有効にすると、プロキシエラーが消えた。

### (2)Kindleが実行時エラーを出して止まる

$ mkdir -p /home/USER/.wine/drive_c/users/USER/AppData/Local/Amazon/Kindle
もしておかなければならない。これをやらないとKindleがエラーで落ちる。

### (3)ログイン画面が真っ白（Geckoが動いてない）


Geckoのインストールは、コマンドラインから、
$ wine iexplore
をして、一旦Internet Explorerを起動して、Geckoをリストアする。

# 終わりに

64ビットwineではまだwine自体に不具合が多くて動かしてない。うちのは基本的に32bit wineなもので。

# 追記

KindleはArch Linuxで、特に何もしないでwine(32bit)で動きました。
$this->expectException()を使うとAssert文が使えない

# 概要
こんな感じで例外時にAssert文を使ってDBがロールバックされているか確認したかった、、、
けど、$this->expectException()を使うとAssert文のところまで処理が行かないまま、ユニットテスト通過してしまっていることが発覚。


```CreateUserServiceTest.php
/**
 * @test
 */
public function エラー時ロールバックされるかテスト()
{
    $this->expectException(Exception::class);
    
    $request = ['name' => 'テスト太郎']
    $service = new CreateUserService();
    ($service)($request);
    
    // ここまで処理が到達しておらず、ロールバックされているかがわからない
    $this->assertDatabaseMissing('users', [
        'name' => $request->name,
    ]);
}
```

# 解決方法
### try catchを使う！
`$this->expectException()`は使いません。

```UpdateUserServiceTest.php
public function エラー時ロールバックされるかテスト()
{
    $request = ['name' => 'テスト太郎']
    $service = new CreateUserService();

    try {
        ($service)($request);
    } catch (Exception $e) {
        $this->assertStringContainsString(
            '登録に失敗しました。',
            $e->getMessage()
        )
    }
    
    $this->assertDatabaseMissing('users', [
        'name' => $request->name,
    ]);
}
```

try catchして、テストを失敗させた上で、次の処理に進むようにします。

処理の順番としては、

```ExceptionTest.php
public function エラー時ロールバックされるかテスト()
{
    //1. エラーが出るようなデータやモックの準備

    try {
        //2.メソッドを実行する
    } catch (Exception $e) {
        //3.失敗するので、エラーメッセージが適切か確認する
        $this->assertStringContainsString(
            '登録に失敗しました。',
            $e->getMessage()
        )
    }
    
    // 4.ロールバックされているか確認する
    $this->assertDatabaseMissing('users', [
        'name' => $request->name,
    ]);
}
```

以上です。
WordPressを使ったWEBサイト制作の手順

Wordpressを使う場合のWEBサイト制作の基本的な手順を説明します。

# 1. ドメインとホスティングの取得
まず、自分のサイトを公開するためにドメイン（例：〇〇〇[.com](http://yourwebsite.com/)）とホスティング（サーバーを借りること）を取得する必要があります。これらは、WordPressのインストールやサイトの公開に必要なものです。
ドメインの取得とサーバーの契約をセットでおこなえるレンタルサーバーも多くあります。
# 2. WordPressのインストール
WordPressを自分の契約したサーバーにインストールする必要があります。
通常はWordPress公式サイトからダウンロードして、サーバー上にアップロードしてインストールすることができます。

レンタルサーバーのなかには、Wordpress構築を前提としているものもあります。
このような場合はレンタルサーバーの管理画面などから手軽にWordpressを構築でき、自分でWordpress公式サイトからダウンロードして、サーバー上にアップロードするような必要がありません。

■Wordpressに対応したレンタルサーバーの参考
【おすすめレンタルサーバー比較】WordPress対応5選＋14社[https://webst8.com/blog/wordpress-recommend-rental-server/](https://webst8.com/blog/wordpress-recommend-rental-server/)

# 3. WordPressテーマの選択
テーマは、サイトのデザインを決定するためのテンプレートです。WordPressは、多数の無料・有料のテーマがありますので、自分のサイトに合ったテーマを選択することができます。選択したテーマをインストールし、有効化してください。

■Wordpressのテーマ一覧（公式）
[https://ja.wordpress.org/themes/](https://ja.wordpress.org/themes/)

# 4. プラグインの追加
プラグインは、WordPressの機能を拡張するためのツールです。例えば、SEO対策、バックアップ、フォーム作成などに使うことができます。WordPressには多数のプラグインがあり、自分のサイトに必要なプラグインを選んでインストールし、有効化してください。
# 5. コンテンツの作成
サイトのコンテンツ（文章、画像、動画など）を作成し、WordPressの管理画面からブログの感覚で投稿することができます。また、独自のページを作成することもできます。
# 6. サイトの公開
サイトが完成したら、ドメインにアクセスして公開されているか確認しましょう。

以上、WordPressを使ったWEBサイト制作の基本的な手順です。

# （参考）まずはレンタルサーバーを借りずに練習をしたい場合
また、レンタルサーバーを借りずにまずは自分のPC上のみでWordpressを表示させて、学習や練習をしたい場合は、XAMPPまたはMAMP上での実行がおすすめです。

参考：Windowsの場合
XAMPPを使ってWordPressローカル環境を構築する全手順
[https://lucy.ne.jp/bazubu/xampp-wordpress-23795.html](https://lucy.ne.jp/bazubu/xampp-wordpress-23795.html)

参考：Macの場合
MAMPを使ってローカル環境にWordPressをインストールする方法
[https://lucy.ne.jp/bazubu/how-to-insall-wp-in-mamp-23798.html](https://lucy.ne.jp/bazubu/how-to-insall-wp-in-mamp-23798.html)
DBを用いるようなWebサイトを作成する方法

DBを用いるようなWEBサイトを制作する場合、以下のような方法があります。

1. プログラミング言語のフレームワークを使用する
2. CMSを使用する

それぞれの概要を説明します。

# 1. プログラミング言語のフレームワークを使用する
フレームワークは、PHPやJava,Ruby,Pythonなどのプログラミング言語を用いて、Webアプリケーション開発に必要な基盤や機能をパッケージ化したものです。
PHPをもとにした「Laravel」やRubyをもとにした「Ruby on Rails」、Pythonをもとにした「Django」などの人気の高いフレームワークがあります。
学習のためのコストがかかりますが、フレームワークを使用することで、自由度の高いWebアプリケーションを作成できます。


フレームワークごとに特徴があるため、作りたいアプリケーションの種類に合わせて選定することをおすすめします。

■フレームワークの種類の参考
【2022年版】Webフレームワークのベスト10選！[https://jp.ntq.com.vn/info/blog/blog37/](https://jp.ntq.com.vn/info/blog/blog37/)
# 2. CMSを使用する
CMS（Content Management System）は、Webサイトの作成・編集・管理が簡単に行えるように開発されたシステムです。
WordPressやDrupal、JoomlaなどのCMSがあります。ある程度完成されたテーマのうち目的に合ったものを選んで、カスタマイズできます。また、プラグインなどを使って機能拡張も容易です。
プログラミング言語を１から学習するよりもコストが低く、基本的な機能を直感的な操作で実装できます。

CMSごとに特徴があるため、作りたいアプリケーションの種類に合わせて選定することをおすすめします。独自のDBを用いるような構成の場合、カスタマイズのための資料が豊富かつ無料で使用できるWordpressの使用がおすすめです。

■CMSの種類の参考
【機能比較】おすすめのCMS15選！特徴から選び方までわかります[https://web-kanji.com/posts/cms-compare](https://web-kanji.com/posts/cms-compare)

# 3．ノーコードツールを使用する
「ノーコードツール」は、プログラミングの知識がなくても、直感的なインターフェースを使用してWebサイトやアプリケーションを作成することができるツールです。
ノーコードツールは、様々なテンプレートやプラグインを用意していることが多いため、簡単に機能追加ができます。例えば、データベースに登録された情報を一覧表示する機能や、フォームを作成する機能なども用意されています。

代表的なノーコードツールとしては、WebflowやBubble、Airtableなどがあります。
ノーコードツールを使うかどうかは、Webサイトの規模や目的、予算などによって判断することが大切です。
Vim操作が苦手な人は、open -a TextEdit（or open -e ）を利用しよう：MacBook

# はじめに
Macでvimの操作をしなければならない状況下で、vimが苦手だと苦労してしまいます。
その時に、後述の操作でターミナルからコマンドを実行すれば、テキスト形式で書き込みが可能です！

# 「open -a TextEdit（or open -e ）」コマンド
* コマンド実行後に、添付画像のように、ファイルのポップアップが出力されるため、そのまま編集できます！

![スクリーンショット 2023-02-25 9.44.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263017/5b3b1b37-712e-18e1-7f0b-e280947defe7.png)

* ファイルへの書き込みやショートカットキーでの保存も可能であるため、生産性が上がります！
* vimが苦手な方は、ご利用ください！！！
![スクリーンショット 2023-02-25 9.45.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263017/d49227af-734c-9fa4-2247-5272bbedd82a.png)

* open -e コマンドでも同様に対応可能です
NotionAIを使ってみた　by NotionAIで作成。僕は何もしてません

## イントロダクション

最近、人工知能（AI）の技術が急速に進化しており、私たちの生活に大きな影響を与えています。ビジネス分野でもAIはますます重要性を増しており、多くの企業がAIを取り入れています。今回は、NotionAIという人工知能を使ってみたので、その体験をシェアしたいと思います。

## NotionAIとは？

NotionAIは、Notionと呼ばれるプロダクティビティツールに統合された人工知能のことです。NotionAIを使うことで、タスクの自動化やデータの分析、予測分析などが可能になります。NotionAIは、人工知能の中でも特に自然言語処理（NLP）に優れており、人間の言葉を理解して自動的にタスクを実行することができます。

## NotionAIの使い方

NotionAIを使うには、Notionアカウントが必要です。Notionアカウントを作成したら、NotionAIを有効にすることができます。NotionAIを使うには、まずタスクを選択し、NotionAIに処理させたい内容を入力する必要があります。NotionAIは、入力された内容を理解し、自動的にタスクを実行します。例えば、NotionAIに対して「今日の天気を教えてください」と入力すると、NotionAIは天気情報を検索して返信してくれます。

## 結論

NotionAIは、ビジネス分野での作業効率を向上させるための優れたツールです。自然言語処理の能力が高いため、多くの人間のタスクを自動化することができます。しかし、NotionAIは完璧ではなく、時々誤解を引き起こすことがあるため、注意が必要です。それでも、NotionAIを使うことで、時間とコストを節約することができます。
Monorepoとは？

## はじめに
下記の記事を読んでいて、Monorepoについてより深く理解するために色々な記事を読みあさってみたのでまとめる。

https://engineering.linecorp.com/ja/blog/git-submodule-with-monrepo
## Monorepoとは
> npmで管理する複数のpackageを、まとめて一つのgitリポジトリで管理すること。

> Monorepoとは一言でいうと、そのプロダクトに関するコードをすべて単一のリポジトリで管理する方法です。

まとめると、「**プロジェクトを一つの管理下に集約させて管理する開発手法**」のこと。

https://qiita.com/kohashi/items/88d39e2c8bb569d66524

https://qiita.com/470_aaa/items/b129900e98df234a1670
## Monorepoのメリット
>・統一された lint, build, test, release プロセス。
・モジュールを横断した変更が容易。
・issueを上げる場所がひとつ（のため見落としがすくない）
・開発環境を立ち上げるのが簡単。（100のリポジトリで、個別に100個の開発環境を整備するために100回 npm ・install と考えるだけで・・Oops)
・モジュールを横断するテストを走らせるのが容易で、それはつまり複数モジュール環境で起きるバグを見つけやすくなる。

やはり、プロジェクトを効率よく管理できる！
## Monorepoのデメリット
> ・コードが必要以上に威圧的になっちゃう
・gitリポジトリが肥大化
・npmの検索結果で低く表示される。(npmはテストのコードカバレッジを計測しているが、monorepoは個別パッケージでテストしてないのでカバレッジが低くなるため）

また

> 何も考えずにリポジトリ単位でパイプラインを構築すると、全サービスに対する各種処理（テスト。ビルド等）が走ってしまって単一の重いパイプラインになってしまいます。

プロジェクトを一つの管理下に集約させて管理しているが故に、デメリットもある。

## Monorepoを導入する目的
下記の記事がめちゃくちゃわかりやすい。ぜひ目を通してみてほしい。

https://qiita.com/470_aaa/items/b129900e98df234a1670#monorepo%E9%81%94%E6%88%90%E3%81%B8%E3%81%AE%E9%81%93

## さいごに
複数の記事をこうしてまとめてみると、「はじめに」で引用したLineのエンジニアブログの記事がより理解しやすくなった。
フィクションなどから拾う情報処理用語 その38 OS (ノンフィクション)

あるTweetが何故か「いいね」されたのですが、「良いのかなあ、まあ良いのなら良いのかなあ。」と複雑な思いに駆られたので記録に残しておきます。なお、三鷹へは最近行ってないので現状はわかりません。

https://twitter.com/orientalhistory/status/1628056616582156289

あくまでも行った時点でボーっと待っているうちにあったことを書いているに過ぎませんが、ズバットの真似は危険ですから絶対にしないでね。
Deno DeployでDeno.env.setとDeno.env.deleteを実装する

普通に使うとエラーがでるー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/c1ddf158-6101-6b3c-94fb-ccc06e1ce263.png)

# がんばって実装する。

`YOUR_PRJECT_NAME`と`YOUR_ACCESS_TOKEN`は書き換えてくだあい

```javascript
import { serve } from "https://deno.land/std@0.177.0/http/server.ts";

Deno.env.bulkSet = async obj => fetch(`https://dash.deno.com/_api/projects/YOUR_PRJECT_NAME/env`, {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
    'cookie': 'token=YOUR_ACCESS_TOKEN'
  },
  body: JSON.stringify(obj)
})
Deno.env.set = async (key, value) => Deno.env.bulkSet({[key]: value})
Deno.env.delete = async key => Deno.env.bulkSet({[key]: null})
Deno.env.bulkDelete = async keys => Deno.env.bulkSet(Object.fromEntries(keys.map(key => [key, null])))

serve(async (req: Request) => {
    await Deno.env.set('SOME_VAR', 'Value')
    await Deno.env.delete('SOME_VAR')
    await Deno.env.bulkSet({ lastName: "John", firstName: "Doe" })
    await Deno.env.bulkDelete(['a', 'b'])
    return new Response("Hello World")
});

```

### YOUR_PRJECT_NAME

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/50d56ce4-163e-04f7-edfe-b1fd45ff768c.png)

### YOUR_ACCESS_TOKEN

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/dfdeedec-e45a-50af-b41c-ff50e91d73da.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/cc9ab982-7bd5-bec9-e5f7-346606e44d4d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/de53cfaf-e857-bad5-a31d-3265897e2734.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/33711946-e102-04a4-318f-e4a12893c3f1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/93cb6b1e-e53d-b422-4084-cd1c69552db1.png)
clasp を導入した話

## はじめに

既存の Google Apps Scirpt プロジェクトをコード管理するため、google/clasp を導入したのでその手順などを個人的メモとしてまとめました。

> 参考：clasp とは？

Google Apps Scirpt の CLI ツールとなります。Apps Script プロジェクトをローカルで開発できるようになります。

> 公式ページ

[clasp](https://github.com/google/clasp)

## 環境

Node.js `18.14.0`
npm `9.3.1`
clasp `2.4.2`

## 導入

### 準備

- clasp のインストールには `Node.js` がインストールされている必要があります。

  - `Node.js` のインストールは [こちらの記事](https://qiita.com/ngkr327/items/cc5b199abddaa6739ca7) を参照してください。

- [Google Apps Script API](https://script.google.com/home/usersettings) を有効にします。

### インストール

- `npm` コマンドを使用して clasp をインストールします。

```
% sudo npm install -g @google/clasp
```

- バージョンを確認します。

```
% clasp --version
2.4.2
```

## 開発

- 以下の流れで開発していきます。

1. ログイン
1. 【初回のみ】プロジェクトを新規作成 or 既存のプロジェクトをクローン
1. 【必要あれば】最新の状態をローカル環境に反映
1. コードの修正
    1. *.js として改修します。
1. アップロード
    1. *.gs ファイルに変換されて push されます。
1. ログアウト

### ログイン

- 以下のコマンドを使用して、Google アカウントの Apps Script プロジェクトにログインします。

  - ブラウザが起動するので承認します。

```
% clasp login
```

### 既存のプロジェクトのクローンを作成

- 以下のコマンドで、現在のディレクトリに既存のプロジェクトのクローンを作成します。

```
% cd <開発環境のフォルダ>
% clasp clone <Script ID>
```

> **NOTE:** クローンできない場合は、`.clasp.json` を削除して再度試してください。

### スクリプトのアップロード

- 以下のコマンドで、ファイルをすべてアップロードします。

```
% clasp push
```

### ログアウト

- 以下のコマンドでログアウトします。

```
% clasp logout
```

## その他のコマンド

### 新規 Apps Script プロジェクトの作成

- 新しいスクリプトを作成します。

```
% clasp create <Script Title>
```

### Apps Script プロジェクトの表示

- Apps Script エディタでプロジェクトを開きます。

```
% clasp open
```

### スクリプトのダウンロード

- ローカル環境に Apps Script プロジェクトをダウンロードします。

  - Apps Script エディタで修正した場合は、以下のコマンドを使用してローカル環境を更新します。

```
% clasp pull
```
windowsでiverilog その131

# 概要
　
windowsでiverilogやってみた。
H8300Hのverilog見つけたので、コンパイルしてみた。

# 参考にしたページ

http://japanese.sugawara-systems.com/opencores/H8/framepage1.htm

# コンパイル手順

```
>iverilog alu.v alu_test.v  decoder.v ea_unit.v H8.v h8_ram_module.v h8_test.v  mul_div_module.v ram2port.v ram512x8_0.v ram512x8_1.v  ram512x8_2.v ram512x8_3.v ram512x8_4.v  ram512x8_5.v ram512x8_6.v  ram512x8_7.v reg_file.v altsyncram.v              

>vvp a.out

Warning: read_during_write_mode_mixed_ports is assumed as   OLD_DATA
Time: 0  Instance: ram2port.altsyncram_component
xxxxxx
ALU ERROR
000000
000100
000106
00010c
000112
000118
00011a
000124
00012a
000130
000132
000134
000136
000138
00013a
000132
000134
000136
000138
00013a
000132
000134
000136
000138
00013a
000132
000134
000136
000138
00013a
000132
000134
000136
000138
00013a
000132
000134
000136
000138
00013a
000132
000134
000136
000138
00013a
000132
000134
000136
000138
** VVP Stop(0) **
** Flushing output streams.
** Current simulation time is 2630000 ticks.
> finish
** Continue **



```

以上。
ブラウザで再生できるmp4を作るためにOpenCVをaptから入れたらPylanceに認識されなくなった件

妙にハマったので覚書です。

# MPV4で動画を生成するとブラウザで再生できない

OpenCVでMP4を生成するとき、下記のようにコーデックをMPV4にしてしまうとブラウザなどで再生できません。

```py
import cv2

fourcc = cv2.VideoWriter_fourcc(*"mp4v")
writer = cv2.VideoWriter("output.mp4", fourcc, 5.0, (640, 480))
```

`cv2.VideoWriter_fourcc(*"avc1")`[^1] を指定することでH.264でエンコードでき、ブラウザ等で再生できます。

[^1]: `h264`, `x264` は `avc1` にフォールバックされます。

# pipのopencv-pythonにはH.264コーデックがない

pipからインストールしたopencv-pythonには[ライセンス上の理由](https://github.com/skvark/opencv-python/issues/100)によってH.264コーデックが同梱されていません。

Windowsなら https://github.com/cisco/openh264/releases からDLLを取ってきてpythonフォルダにでも入れておけばいいですが、Linuxだとopencvをビルドしたりする必要があります。

Debian系なら `apt install python3-opencv` でコーデックの入ったopencvが使えます。
ちなみにaptとpip両方からインストールすると自分の環境ではpipが優先されてしまいコーデック無し状態になりました。

# Pylanceがaptのpython3-opencvを認識しない
VSCodeのPylanceがなぜかcv2を認識しなくなりました。
pipからインストールしたときは普通に認識するのになぜ……?
型はどうせ組み込みのstub見るだけなのに……

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165220/57d9e5e0-002c-40de-90a2-1901c7e91369.png)

pipとaptのインストール状態の違いについて確認してみたところ、次のようになっていました。
```
pip: /usr/local/lib/python3.8/dist-packages/cv2/__init__.py
apt: /usr/lib/python3/dist-packages/cv2.cpython-38-x86_64-linux-gnu.so
```

そこで試しに `/usr/lib/python3/dist-packages/cv2` に空ディレクトリを生成してみたところ、無事Pylanceにcv2をインストール済みと認識させることができました。

```bash
sudo mkdir /usr/lib/python3/dist-packages/cv2
```

よかったーヽ(=´▽`=)ﾉ



# 参考
- [OpenCVで作成した動画がブラウザで正常に表示できない場合の解決法](https://blog.shikoan.com/opencv-h264)
- [Generating MP4’s Using opencv-python With the AVC1 Codec](https://www.swiftlane.com/blog/generating-mp4s-using-opencv-python-with-the-avc1-codec/)
rails サーバー閉じれてない？？　サーバーの立ち上げ

コントーロール＋C でサーバー閉じれるらしのですが、僕はうまくいきません😭

そんなときに使用している方法がこちら

    $lsof -i :3000
    COMMAND   PID            USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
    ruby    22417        ユーザー名   12u  IPv4    0x7f6d6c      0t0  TCP *:hbci (LISTEN)
こんなものが返ってくる。
ここで出てくるPIDの番号を使用する。

    $kill -9 22417
こうするとサーバーを閉じることができます。

    $lsof -i :3000
再度、上記を実行しても何も出てこないはずです。


    $rails s
その後サーバーを立ち上げれば、無事サーバーの閉じから立ち上げまで完了することができます(^-^)


補足：ずっとコントロール＋cができない！と思っていた原因は、コントロールではなく、コマンド＋cでやっていました😭
単語の意味

<h5>開発環境</h5>
意味：エンジニアがシステムやソフトウェア開発をするにあたって欠かせない作業環境のことを指します。例えばプログラミングに使用するパソコンやソフトウェアも開発環境に含まれます。事前にリサーチし快適な環境を整えれば、プログラミング作業が効率的になり、ストレスなく開発を進められるでしょう。そのためプログラミングを始める前に、開発環境について理解しておく必要があります。使用するプログラミング言語や、開発したいシステム・ソフトウェアに合ったツールを選ぶことが大切です。このように、開発環境を整える作業を「環境構築」といいます。

<h5>レコード</h5>
意味：データベース内のテーブルを構成する単位のひとつで、一行分のデータを指します。
<h5>コミット</h5>
意味：ローカルリポジトリに作業内容を反映することです。
リポジトリから自分の開発環境を作成し開発を進めても
ローカル、リモートリポジトリには影響がありません。
<h5>ローカルリポジトリ</h5>
意味：自分のパソコン・マシン内に存在するリポジトリのことです。
ローカルリポジトリユーザ一人ひとりが利用するために、自分の手元のマシン上に配置するリポジトリです。

<h5>リモートリポジトリ</h5>
意味：リモートリポジトリ専用のサーバに配置して複数人で共有するためのリポジトリです。
<h5>リポジトリ</h5>
意味：保管場所
バージョン管理システムの話で出てくるリポジトリは「ファイルとか変更履歴とかを置いておく場所」です。

<h5>プッシュ</h5>
意味：ローカルリポジトリの内容をリモートリポジトリに反映することです。
<h5>マージ</h5>
意味：あるブランチから他のブランチを取り込む機能です。
<h5>pull(プル)</h5>
意味：リモートリポジトリの変更をローカルリポジトリに反映します。
<h5></h5>
意味：
【備忘録】HTTPリクエストのテスト

下記URLに検証したいステータスコード,etcを付けてリクエスト

https://httpstat.us/

以下429エラーの場合のサンプルコード

```python:sample.py
import requests
from requests.adapters import HTTPAdapter
from urllib3.util import Retry

session = requests.Session()
url = "https://httpstat.us/429"

retry_strategy = Retry(
    total=2,
    backoff_factor=1,
    status_forcelist=[
        429,
    ],
)
session.mount("https://", HTTPAdapter(max_retries=retry_strategy))
session.mount("http://", HTTPAdapter(max_retries=retry_strategy))

res = session.request(
    "GET",
    url,
    timeout=10,
)

if res.status_code == 429:
    retry_after = retry_strategy.get_retry_after(res)
    print(retry_after)
```
Validationについて

Validationの意味
検証

データを保存する前にこのデータを保存しても、良いのか悪いのかを検証するもの。

長さに関するValidation

app/models/article.rbに記入

      validates :title, presence: true
      validates :content, presence: true
現在は、これが記入されています。

<h3>length</h3>
長さを指定するValidation
　例　タイトル何文字以上で記入してください。　記事を何文字以上で書きなさい。
などの長さを指定するときにlengthを使用する。

<h4>〜以上にする場合</h4>

    validates :title, length: { minimum: 2 }
validates :カラム名, length: { minimum: 2 }
最低２文字以上ないとダメですという意味

rails　sで、サーバーを再度立ち上げる。

その後動作確認すると、タイトルは２文字以上で入力してください！となる♪
２文字以上にすると保存ができました🙆

例えば、contentを１０文字以下にしたい場合は、

    validates :content, length: { minimum: 10 }
このようになります。

<h4>〜以内にする場合は、</h4>

    validates :title, length: { maximum: 100 }
１００文字以内となる。

<h3>○まとめ</h3>
Validationのlengthは、長さを指定るするものです。

<h3>uniqueness</h3>
同じ内容である場合は、困るときに使える👍

例：投稿内容が、全く同じである場合は、エラーを起こす。

    validates :content, uniqueness: true
この状態で、試すと
内容はすでに存在します。と出てきます🙆

よく使う場面
ユーザーアカウント名、メールアドレス　など

<h3>format</h3>
特定の表現に対してValidationをかける。
こういった表現でないとダメですよ〜という感じ！
例：＠で始まるテキストでないとダメですよ　（＠がついて.~でないとダメだよ）
テキストの形を指定するもの

https://rubular.com/
で試してみてください👍
Rubyの正規表現

    \A\@
となると先頭に＠がついていないと合致しない

    \A(?!\@)
＠から始まらないが合致する

    validates :title, format: { with: /\A(?!\@)/ }
こうすると、@で始まった場合
タイトルは不正な値ですと出力されました。

emailなどよく使うものの場合は、わからなければ検索すると表現の仕方が出てきます👍
「email ruby 正規表現」

<h3>独自のValidationを追加する方法</h3>
例えばtitle,contentの合計がいくつ以下にしなさいというルールを作るとする。

複数のカラムを参照してルールを作るのは、railsで用意されていない！！

自分でルールをつくる！

    validate :validate_title_and_content_length
※sがない

    private
    def validate_title_and_content_length
        char_count = self.title.length + self.content.length
        unless char_count > 100
          errors.add(:content, '100文字以上で!!')
        end
    end
自分で定義をする。（１００以上）
※char：読み：キャラクター　、意味：文字
※char_count：文字数

erros.add(:カラム )
このカラムにエラーを追加しますよという意味

Validationは何かのカラムに対して、アラート、エラーを起こすためのもの

これで１００文字以下で、投稿しようとすると
内容は、１００文字以上で！！と出力されました！！
※内容は＝content  content を日本語にしたもの


     private
     def validate_title_and_content_length
        char_count = self.title.length + self.content.length
        errors.add(:content, '100文字以上で!!') unless char_count > 100
      end
一行で書くこともできる！



errors.addとは？？
app/views/articles/_form.html.haml

    article.errors.full_messages
ここでメッセージ全て表示している！

Validationでエラーが起こったときに、errorsに何か追加される。
その追加されたメッセージを表示しているのがここ！


validatesの場合、失敗したら勝手にerrors.addに追加している。

validateで、自分たちでエラーを追加した場合は、そこも自分たちで追加しないといけない！！よって、errors.addで追加していることになる😆
julia+pyenv+poetry環境の構築

# はじめに
最近、科学技術計算などで注目を集めているプログラミング言語としてJuliaがあります。
JuliaはPythonのように書きやすく、Cのような実行速度を持つ言語としてデザインされています。
Pythonに慣れ親しんだ方であれば、ほとんど学習コストも必要なく習得することが可能です。
今回は学習するための環境をdockerを用いて作成しました。
julia+Pythonの環境をdockerで作るとなると、```jupyter/datascience-notebook```が一般的です。
もちろんこれでもよいのですが、pyenvによるPythonのバージョン管理とPoetryによるライブラリ管理を行いたかったので自分で用意しました。
特にこだわりがなければ上記のイメージをpullしてくるのが最速です。

## 中身
用意したdockerfileは次の通りです。
juliaのイメージをもとにpyenvをinstallしました。poetryは別枠でinstallしています。
```dockerfile:dockerfile
FROM julia:1.8.5
# installするpythonのバージョンを指定
ARG PYTHON_VERSION="3.9.16"
ENV TZ=Asia/Tokyo
RUN apt-get update -y \
    && apt-get install -y \
    make \
    build-essential \
    libssl-dev \
    zlib1g-dev \
    libbz2-dev \
    libreadline-dev \
    libsqlite3-dev \
    wget \
    curl \
    llvm \
    libncurses5-dev \
    libncursesw5-dev \
    xz-utils \
    tk-dev \
    libffi-dev \
    liblzma-dev \
    git \
    vim 

# pyenvのinstall 
ENV HOME /root
ENV PYENV_ROOT $HOME/.pyenv
ENV PATH $PYENV_ROOT/bin:$PATH
RUN git clone https://github.com/pyenv/pyenv.git ~/.pyenv
RUN echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bashrc && \
    echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bashrc && \
    echo 'eval "$(pyenv init --path)"' >> ~/.bashrc 
RUN eval "$(pyenv init --path)"
# pyenvによってPythonをinstallし、globalで認識するように設定
RUN pyenv install $PYTHON_VERSION && \
    pyenv global $PYTHON_VERSION

```
筆者は環境構築をvscodeのdevcontainerを通して行うので、poetryのinstall用にshも用意しました。
```bash:postCreateCommand.sh
#!/bin/bash
# poetryのinstall
pip install --upgrade pip
pip install poetry
# poetryによるライブラリのinstall
poetry config virtualenvs.create false
poetry install --no-root
```
devcontainer用の設定ファイルは次の通りです。
```json:devcontainer.json
{
    "name": "dev-container2",
    "dockerFile": "../dockerfile",
    "postCreateCommand": "/bin/bash ./postCreateCommand.sh",
    "extensions": [
		"ms-python.python",
		"ms-python.vscode-pylance",
		"ms-python.black-formatter",
		"njpwerner.autodocstring",
		"mosapride.zenkaku",
		"oderwat.indent-rainbow",
		"christian-kohler.path-intellisense",
		"0h7z.vscode-julia-format",
		"julialang.language-julia"
	],
}
```
## さいごに
最近マイブームのdevcontainerを使ってJulia+Pythonの環境構築を行いました。
```jupyter/datascience-notebook```はconodaベースなのが気に食わなかったので使いませんでしたが、こだわりがなければそっちでよいかと思います。
PythonとJuliaを組み合わせることで、大量のデータを効率よく処理できるようになると期待されるので筆者も勉強しています。
皆さんもこの機会にJuliaの世界に入門されてはいかがでしょうか。
Pythonにはない高速の世界があなたを待っています。
Finder, Terminal, VScode 間の移動 (Mac)

Finder, Terminal, VScode 間をパッと移動したいことがよくあると思います。そのための方法を以下にまとめました。

1. [Terminal から Finder](#1-terminal-から-finder)
2. [Finder から Terminal](#2-finder-から-terminal)
3. [Finder で開かれているフォルダに Terminal 上で移動する](#3-finder-で開かれているフォルダに-terminal-上で移動する)
4. [Finder から VScode](#4-finder-から-vscode)



# 1 Terminal から Finder
Terminal のカレントディレクトリを Finder で開くには、`open　.` を使います。`open` コマンドを使えば、他のディレクトリやファイルも開けたり、アプリを起動したりできるので便利です。



# 2 Finder から Terminal
ここでは、Finder 上のディレクトリを Terminal で開くためのショートカットキーを登録します。まずシステム設定から[System settings > Keyboard > Keyboard Shotcuts > Services]を開きます。

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414636/9e5188ae-4048-9423-35c2-f52ef1ccb5f0.png)

そして、以下の赤枠内にチェックマークをつけ、適当なショートカットキー（ここでは Cmd + Shift + E）を登録します。
![SCR-20230225-4ok.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414636/f5f80cbd-d13e-0efe-4df1-e4068f8a7789.png)

実際に Finder から Terminal を開くには、Finder 上でディレクトリを選択して先ほどのショートカットキーを使うか、右クリックから下の赤枠部分のどちらかを選択して開きます。
![SCR-20230225-4sf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414636/a0b03cf8-9c42-8f95-b7e6-ed91af3f04c4.png)



# 3 Finder で開かれているフォルダに Terminal 上で移動する
ここでは、便利なシェル関数を紹介します。Terminal を使っているときに、ちょうど Finder で開いているディレクトリに Terminal 上で移動したい場合に使います。それは以下の `cdf` コマンドによって実現できます。([このページ](https://github.com/webpro/dotfiles/blob/master/system/.function.macos)から引用しました。)
使いたい方は、`.zhsrc` や `.bashrc` に追加してみてください。

>```shell
># Change working directory to the top-most Finder window location
>
>cdf() {
>	cd "$(osascript -e 'tell app "Finder" to POSIX path of (insertion location as alias)')";
>}
>```

例えば下の画像では、初めは Terminal 上で `Desktop` にいましたが、`cdf` を実行することで、Finder 上で開いていた `Google` フォルダに移動していることがわかります。
![screenshot 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414636/7ca6f1ac-dac7-0e32-1506-b0037e594595.png)



# 4 Finder から VScode
Finder 上のフォルダを VScode で開きたいことは常々あると思います。そんな時に選択したフォルダをショートカットキーで開けたら便利ですよね。ここでは、Automator.app の Quick Action を使って簡単にそのショートカットキーを作ります。

まず、Automator.app を開き Quick Action を選択します。
![screenshot 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414636/508228c3-9048-07dc-91bb-61d0f8559167.png)

次に、赤枠の部分を「files and folders」in「Finder」に変更します。
![screenshot 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414636/e33ab371-bc0d-59dc-22a1-35eaabde3578.png)

次に、左の検索ボックスで「open」を入力すると「Open Finder Items」が候補に出てくるので、それをドラッグ&ドロップで右に持ってきます。そして、その中では、VScode を選択します。
![screenshot 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414636/8aacd3b1-73db-6fc6-3490-6a086289f803.png)

以上の作業が完了したら、「Open in VScode」などと名前をつけて保存してください。

最後に、この Quick Action にショートカットキーを割り当てます。
システム設定を開き、[System Settings > Keyboard > Keyboard Shotcuts > Services > Files and Folders] と進んでいくと次の画面が現れ、先ほど作成した「Open in VScode」が見つかると思います。それに適当なショートカットキー（ここでは Cmd + Shift + W）を割り当てます。

![screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414636/0ea10088-9c7c-8bd9-69ba-b3a969f1dc41.png)

作業が完了したら、Finder であるフォルダを選択して、ショートカットキーを押してみてください。一発で VScode が開きましたね。
2023/2/25主にITとかセキュリティの記事

韓国の10人に8人「サイバー脅威についてはよく知らないのに、セキュリティ意思決定」(2/23)
https://www.afpbb.com/articles/-/3452591?cx_part=top_category&cx_position=3

「フィッシング詐欺被害防止のため」と言い張って口座情報を盗むフィッシング詐欺(2/23)
https://ascii.jp/elem/000/004/126/4126113/?rss

「【差押最終通知】未払い税金お支払いのお願い」などの不審なSMS、関税等お支払いサイト（F-REGI公金支払い）を装うフィッシングに注意(2/22)
https://internet.watch.impress.co.jp/docs/news/1480738.html

富士通、法人ネット回線にサイバー攻撃　通信内容漏洩か(2/22)
https://www.nikkei.com/article/DGXZQOUC22AVC0S3A220C2000000/

ブラックベリー、「クルマはソフトウェアと侵入経路の増加でセキュリティのリスク増加」 自動車産業が直面する最大の課題と警鐘(2/22)
https://car.watch.impress.co.jp/docs/news/1480800.html

ソフトウェアアップデートの適用はゆっくりでいいですよね? - いまさら聞けないiPhoneのなぜ(2/23)
https://news.mynavi.jp/article/20230223-iphone_why/

【リライト】「ウィルスが検出されました」は本物？警告時の適切な対処と注意点を解説(2/22)
https://cybersecurity-jp.com/column/79210

ブリーズ、90万人の顧客情報流出か【図表】（トップニュース）／台湾(2/23)
https://www.ys-consulting.com.tw/news/107605.html

サイバー戦、日本を救う道(2/23)
https://www.nikkei.com/article/DGKKZO68680230S3A220C2TCR000/

トロイの木馬化したインストーラをダウンロードさせるサイバー攻撃に注意(2/23)
https://news.mynavi.jp/techplus/article/20230223-2596941/

Apple、iOS16.3.1で新たに1件の脆弱性を修正していたことを発表(2/21)
https://iphone-mania.jp/news-525119/

セキュリティキーまたは認証アプリでTwitterの2FAを有効にする方法(2/23)
https://news.mynavi.jp/techplus/article/20230223-2599739/

NFTは難しいという常識は古い　鬼門の「作成」が簡単に(2/24)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/052100112/021700063/

攻撃者が「ChatGPT」に熱視線　AIがマルウエアをつくる可能性(2/24)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/052100113/021700101/

SSL-VPNがつながらない　MTUの不一致が原因か(2/24)
https://xtech.nikkei.com/atcl/nxt/mag/nnw/18/041800004/021600061/

データガバナンスは何から始めるべきか、最初に知っておきたいDMBOKと3ステップ(2/24)
https://xtech.nikkei.com/atcl/nxt/column/18/02369/022200002/

ChatGPTが鳴らした号砲　グーグルは既存事業を壊せるか(2/24)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/052100111/021700092/

新たな日常になるChatGPT　課題と未成熟には技術が対処(2/22)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020900021/021700132/

稲作の水管理をIoTで自動化(2/24)
https://xtech.nikkei.com/atcl/nxt/mag/nnw/18/041800012/021600201/
Docker opensearchコンテナのNo alive nodes found in your clusterエラー解決

半日くらい引っかかっていたので、自分用のメモに。

原因は、ブリッジネットワークが異なっていた。でした。

## 背景
開発中のウェブサービスで新規にレコード検索を強化したいということで、elasticsearchを導入。
既存のwebサーバから、プライベートIPでesへリクエストを送るように設計。
しかし、webサーバdockerコンテナから、es用のdockerコンテナへのアクセスが
```
No alive nodes found in your cluster
```
エラーに、、、
ホストからのcurlは反応しているので、次はwebコンテナからcurlすると全部レスポンスなし。

結局、原因は既存のwebサービスをdocker-composeで管理していたのに、新しく追加したesはdocker runで起動したため別のサブネットだったことということぽい。

ちゃんとesもdocker-composeに追記すれば動きました。
無効なコマンドを入力した際にエラーを返すTeratermマクロ


★やりたいこと
無効なコマンドを入力した際にエラーを返すTeratermマクロの作成
--

--参考--
ルータ(Cisco)の#show ip int b 表示↓
![0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122841/4cdc1a42-bef0-c90c-f4d1-64ae3cdec4ff.png)

実行するコマンド(Teratermマクロ)↓
``` 
sendln 'show ip int b'
sendln 'conf t'
sendln 'int e2/0'			;存在しないif
sendln 'no shut'
``` 

実行結果　e2/0が存在しないため、無効なコマンドとして弾かれている↓
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122841/f1bc61f9-2b60-bd99-1109-add2c23ae467.png)
この%Invalid～などが表示されたときにエラーのメッセージボックスを表示させたい！！

作成したマクロ
--
wait '#'は使用せず、エラー文字列だけ待機したらうまくいった↓
``` 
result = 0
mtimeout = 300

sendln 'show ip int b'
sendln 'conf t'
sendln 'int e2/0'			;存在しないif
sendln 'no shut'

wait '% Invalid ' '% Incomplete'

if result !=0 then
	messagebox 'ERROR' ''
	end
	
else 
	messagebox 'OK' ''
	end
endif
``` 
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122841/b963d701-8720-1312-2ccf-17d4fb9e6174.png)
(timeoutの処理もいれるべきだったかも)

ちなみに...うまくいかなかったマクロと原因
--
``` 
result = 0
mtimeout = 300

sendln 'show ip int b'
sendln 'conf t'
sendln 'int e2/0'
sendln 'no shut'

wait '#' '% Invalid ' '% Incomplete' 	;＃が表示されたらOK、%～が表示されたらERRORにしたかった

if result = 1 then
	messagebox 'OK' ''
	end

else 
	messagebox 'ERROR' ''
	sendln 'end'
	end
endif

end
``` 

%～が表示される場合もOK(result=1)になってしまう↓
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122841/ff7a5082-c80e-0316-21ab-4aa4a5505bc5.png)


原因
コマンド+Enterが入力されるため、無効なコマンドの場合も'#'(result=1)が表示されることが原因みたい↓
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122841/bfd422e8-28b9-7488-9b01-96a2cf6ae813.png)


その他
-
今回学んだこと
・resultの初期値は0
・複数回waitを使用する場合、resultは都度初期値に戻る。
・waitやrecvlnなどを多用すると、どれのresultかわからなくなる。
　複雑な場合は変数に代入するとすっきりするかも。
・timeoutを長く設定すると、待ちの間にInvalidとかERRORとかの待機が読めてしまうのでかっこ悪い。
　mtimeoutを指定すると少し隠せる。

===
久々に仕事でTeratermマクロを書きました。
勤務中さんざん悩んでうまくいかなかったのに、お家で考え直すと意外とシンプルにできてしまいました。
もっとスマートな方法がある気がしてならないですが、月曜日にリベンジするのが楽しみです！
FastAPIのマイグレーションで、autogenerateしたらtableがdropされる件について

# 概要

alembicでマイグレーションファイル作成する際に行う

```
alembic revision --autogenerate -m "hogehoge"
```


このコマンドを実行することで、modelとSQLAlchemyでで定義したmodelの状態とDBの状態との差分を検知して、マイグレーションファイルが自動生成される。


しかし、何回やってもtableがdropされるコードが出来上がる。


```
def upgrade() -> None:
    op.drop_table('users')
    op.drop_table('posts')


def downgrade() -> None:
    op.create_table('users',
    sa.Column('id', sa.Integer(), nullable=False),
    sa.Column('name', sa.String(), nullable=True),
    sa.Column('email', sa.String(), nullable=True),
    )
    op.create_table('posts',
    sa.Column('id', sa.Integer(), nullable=False),
    sa.Column('title', sa.String(), nullable=False),
    sa.Column('content', sa.String(), nullable=True),
    )

```


ちなみに手書きでコード書いても、add_columnとかはDBに反映されなかった。


# 解決策

こういったautogenerateが検知されなかったり、
```
alembic upgrade head
```
をしてもDBに反映されなかったり、といった原因は往々にして



env.pyの

```
target_metadata=Base.metadata
```

にあります。

これはmodelの情報をtarget_metadataに渡すためのコードです。

models.pyが複数あると、Baseクラスのmetadataを結合させる必要が出てくる。

```
# modelが複数ある場合、importしてくる
from users import models as users_model
from posts import models as posts_model

def combine_metadata(*args):
    m = MetaData()
    for metadata in args:
        for t in metadata.tables.values():
            t.tometadata(m)
    return m

target_metadata = combine_metadata(users_model.Base.metadata, posts_model.Base.metadata)
```

modelは全てtarget_metadataに入れてあげようねって話でした。



## 余談

型定義の変更はautogenerateで検知されないらしい。
検知したい時は
compare_type=Trueを追加する

```
context.configure(
    connection=connection, 
    target_metadata=target_metadata,
    compare_type=True, #同じカラム名でも型の変更を検知する
)
```

# 参考
https://qiita.com/orange634nty/items/dcbcc10eb14f5e10f398/
http://liuhongjiang.github.io/hexotech/2015/10/14/alembic-support-multiple-model-files/
ヤフーの1on1を読んで学んだこと・改善したこと


こんにちは<br>
yamaです。先日「[ヤフーの1on1](https://www.amazon.co.jp/%E3%83%A4%E3%83%95%E3%83%BC%E3%81%AE1on1%E2%80%95%E2%80%95%E2%80%95%E9%83%A8%E4%B8%8B%E3%82%92%E6%88%90%E9%95%B7%E3%81%95%E3%81%9B%E3%82%8B%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E6%8A%80%E6%B3%95-%E6%9C%AC%E9%96%93-%E6%B5%A9%E8%BC%94/dp/4478069786)」という本を読み、今活動しているIDEACTIVE JAPAN PROJECTの中高チームでの1on1で改善したところ、1on1に望む姿勢が大きく変わったので、チームメンバーへの共有も兼ねて備忘録としてまとめます。（私なりの解釈でまとめているので、本の中の言葉とは違う部分もあると思います）<br>


# 大原則：1on1は相手のための時間

この考え方が本を読んだ中で一番大きな学びだと思いました。
（1on1の切り出しで「今日は何を話そうか？」からスタートするなど）<br>
私が今までチームで1on1を行っていた理由は、「チームの状態の把握」と「本人のためにリーダーとしてできるを探す」の2つと以前考えていました。<br>
この考えていた目的は、主語が「私」であり、「メンバー」ではないことに気がつきました。<br>

当たり前のことですが、1on1は「相手のための時間」であることを学びました。<br>

# 十分に話してもらう・先に自分の考えを言わない
#### 自分ができるだけ話さない（私なりの言語化）
1on1は相手のためにある時間であるため、相手が話してもらって相手の中で言語化してもらうことが大事です。<br>

私は、今までは、質問の方法がチームの状態の管理の聞き方であったため、質問攻めにすることや話している途中に聞いてしまうことがありました。<br>
しかし、相手のための時間となると、相手がどこを課題と考えているかやどうやったら解決できるかを話してもらうのが大事と思いました。<br>

話が行き詰まった時に、相手に話してもらうための質問をすることで、本人なりに考えた答えは表面的なものではなく本質的な課題の解決方法になるなと思いました。<br>
（文章で表すのは難しいのですが、言いたくなってもアドバイスをしないで「こことかどう思う？」や事例の詳細（「もう少し詳しく」）を聞き返すようにしました）<br>
アドバイスをしても自分ごとにならないため、効果が薄かったり、自分がアドバイスをするよりも良い解決方法になることが多くなった印象です。<br>

実際に、1on1で実践をしてみたところ、MTGがゆっくりすぎるという課題に対して聞いて整理をしていくと、事前のアジェンダのシェアが遅く、そこを改善すると他にもあった課題が解決しそうということが1on1を通じてありました。<br>

# 経験学習
本内でよく出てきた言葉に経験学習があります。<br>
1on1を通じてやってきたことを振り返り、自分なりの解決方法や学びに気がつき改善していくサイクルで、学んだことをどう活かすかが大事と思いました。別の本になりますが、「グロースマインドセット」と近い考え方と思いました。<br>

実際に1on1では「この学びをどう活かす？」や「他チームにも同じようにできるようにするにはどうしたらいいか？」などを聞くようにしています。うまくいったことや失敗から学び改善するサイクルが大事と思いました。<br>


一部ですが特に印象に残った部分を私なりの言語化でまとめました。<br>
1on1をやる中ではまだまだなのですが、1on1をする相手にとっても有意義な時間になるように色々学んでいきたいと思った本でした。<br>
enum導入手順について

# はじめに
今回はenumについて学んでいきます。
エナムと書いてイーナムです。
読み方からつまづきますよね。優しく解説していきます。
では、行きましょう！

# enumってなぁに？
*enum* とは、数値に意味を持たせることができるものです。
例えばこんな感じです。

::: note info
0 → スシロー
1 → くら寿司
::: 

数字でなんてややこしい。。文字でええやんけ！
～と思ったそこの貴方。ちょっと待ってください(一一)
ちゃんとメリットがあります。

```
①決められた数値以外の登録が出来ないようにすることで安全性が高まる。
②上記のような、店舗選びの選択用のテーブルを作成する必要がなくなる。
③データベースに格納する時に、数値型の方がデータサイズが小さくなる。
```

ね？いいことあるでしょ？
ほな、導入していこか！

## enum_helpの導入

まず、enum_help の導入をします。
gemファイルに以下を追記し、bundle installして下さい。

```
  gem "enum_help"
```

## enum をモデルに定義する

```
enum susi: { susiro: 0, kurazusi: 1 }
```

こんな感じですね。
これでsusi は下記のように定義されます。

```
0 が入っている場合は susiro(スシロー)
1 が入ってる場合は kurazusi(くら寿司)
```

これでenumは導入完成です！
...が、まだ終わりじゃありません。
この表記を日本語に直してあげねばなりません。
エイゴ、コワイ、ニホンゴ、ナオス...

## config/application.rb に追記を行う

日本語に直していきましょう。
日本語に直すまで先生君たちを家に返さないからね。

```
class Application < Rails::Application  
  :
  :
  
  config.i18n.default_locale = :ja

  :
  :
  end
end
```

はい、これでOK。次に進みます。

## yml ファイルを作成する

config/locales フォルダに ja.yml というファイルを作成しましょう。
このファイルに下記のように、記述します。

```
ja:
    enums:
      モデル名:
        susi:
          susiro: "スシロー"
          kurazusi: "くら寿司"
```

これで0 とsusiro・1とkurazusi が日本語化されるようになります。
こ、これで完了です（ｾﾞｪｾﾞｪ...）

後は、ビューに書き出せばちゃんと反映されます。
おめでとうございます！


# おわりに
今回はenumについて解説してきました。
この投稿が役に立ったと思った方は、
チャンネル登録、グッドボタンをよろしくお願いします！
NextAuth の middleware で無限ループ発生

NextAuth は、Node.js × Next.js で動作する認証ライブラリです。短い記述で多くの認証に対応する事が出来ます。しかし、NextAuth の middleware を最小構成で使用すると、無限ループに今回遭遇しました。middleware 間での無限ループが発生すると、ウェブアプリケーションがクラッシュする可能性があります。同じ問題に遭遇した際の参考になれば幸いです。

https://next-auth.js.org/

## 環境

- next.js 13.1.6
- next-auth 4.19.2
- prisma 4.10.1

## ソースコード

`pages/api/auth/[...nextauth].ts`

```tsx
import NextAuth, { AuthOptions } from "next-auth";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import GoogleProvider from "next-auth/providers/google";
import prisma from "@/services/database/prisma";
import PrismaUser from "@/services/database/prismaUser";

export const authOptions: AuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.OAUTH_GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.OAUTH_GOOGLE_CLIENT_SECRET as string,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
  pages: {
    signIn: "/auth/signin",
    signOut: "/auth/signOut",
  },
  session: {
    strategy: "jwt",
    maxAge: 60 * 60 * 24 * 30,
  },
  adapter: PrismaAdapter(prisma),
};

export default NextAuth(authOptions);
```

`middleware.ts`

```tsx
export { default } from "next-auth/middleware";
```

## 事象詳細

今回 pages にカスタムページを指定した際に、事象が発生しました。上記コードの状態でサイトにアクセスすると無限ループ（リダイレクト）が発生しサイトにアクセスする事が出来ません。

## 改善した方法

`middleware.ts` を以下の通りに修正しました。

```tsx
export { default } from "next-auth/middleware";

export const config = {
  matcher: ["/dashboard"], // /auth/signin 等を指定しないようにした
};
```

上記の通り matcher を明示的に指定し、カスタム認証ページ `/auth/signin` 等が範囲に含まれないようにしました。これにより、無限ループを回避出来るようになりました。

特にカスタムページを指定する際にはそういった注意書きは見当たらず、自動的に除外してくれそうな雰囲気を感じていたのですが、今回の事象の場合は指定する必要があったようです。

以上
【VS Code】Git GraphのError: Unable to load Commits fatal: bad revision 'HEAD’の直し方

# エラー内容
VS Codeの拡張機能であるGit Graphを使おうとしたところ、以下のようなエラーが出て使えない事態が発生しました。

Error: Unable to load Commits fatal: bad revision 'HEAD’

別にコミットしたりプルしたりはできて、Git Graphだけおかしかったので、粘らなくてもよかったのですが、なんだかんだ気になって2時間くらい沼にハマっていました😭

どうやって解決したのか以下に記載いたします。

# 原因

まず、原因としてはGit Graphが見ているルート リポジトリのパスがプロジェクトのパスとは別のところを見ていることが原因でした。。

なんで、別のところを見ていたのかと言うと、ターミナルで`vue create プロジェクト名`コマンドでプロジェクトを作成後に、`/Users/my_user_name/プロジェクト名`デイレクトリで、`git init`コマンドを実行しました。その後、Finderでプロジェクトのディレクトリ名を変更しました。おそらくプロジェクトのディレクトリ名を変更したことが原因で、VS CodeでGit Graphを初期実行時にパスが`/Users/my_user_name`として登録されてしまったのだと思います。

そもそも、Gitの作成手順とプロジェクト名を変更したところから見直した方が良さそうです。。。今後はコマンドでプロジェクト作成後に手動でプロジェクト名を変更するということはしません（笑）

# Git Graphのルート リポジトリの確認方法

1\. VS Codeでコマンドラインを開き、別タブの「OUTPUT」タブを開きます。

2\. プルダウンから「Git Graph」を選択して、コマンドライン上でGit Graphではどんなコマンドが走っているのか確認できます。そこで、`Started watching repo: xxxxxxxx/xxxxxxxx`のような表示があるかと思います。これの、`xxxxxxxx/xxxxxxxx`がGit Graphが見ているルート リポジトリです。

もし、プロジェクトのルートディレクトリと違う場合、Git Graphのルート リポジトリを変える必要があります。

# Git Graphのルート リポジトリを変える方法

1\. VS Codeでコマンドパレットを開きます。
![スクリーンショット 2023-02-25 0.21.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667974/0f2d12ba-743d-1ea1-989b-9d73b5223fc0.png)
2\. コマンドパレットで「Git Graph」と入力すると、「Git Graph：Remove Git Repository…」が検索候補として出てくるのでクリックします。そうすると、登録されているルート リポジトリが表示されるので、削除したいルートリポジトリをクリックして、削除します。

3\. 再度コマンドパレットを開いて、今度は「Git Graph：Add Git Repository…」をクリックします。そうすると、Finderやエクスプローラーが開くので、ルート ディレクトリを登録します。

無事Git Graphを使うことができるようになりました！！

# 参考文献
:link:https://github.com/mhutchie/vscode-git-graph/issues/450
:link:https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph
Apacheの設定ファイルhttpd.confの主なサーバ処理関連のディレクティブをまとめたもの

●Apacheの設定ファイルhttpd.confの主なサーバ処理関連のディレクティブをまとめたもの

書式
・Timeout　秒数　クライアントからリクエストを受け取ってから完了する(コンテンツを提供し終わる)までの時間の最大値を指定
・KeepAlive　on|off　１つのTCP接続において複数のリクエストを受け付けるのか/受け付けないのか
・MaxKeepAliveRequests　リクエスト数　KeepAlive時に1つの接続で受け付ける最大リクエスト数を指定(0は無限に許可)
・KeepAliveTimeout　秒数　KeepAlive時にクライアントからのリクエストを完了してから、コネクションを切断せずに次のリクエストを受け取るまでの最大待ち時間を指定
・StartServers　子プロセス数　Apache起動時のhttpd子プロセスの数を指定
・MinSpareServers　子プロセス数　httpdの待機子プロセスの最小数を指定
・MaxSpareServers　子プロセス数　httpdの待機子プロセスの最大数を指定
・MaxRequestWorkers　子プロセス(※Ver2.3.13以前はMaxClients)　生成されるhttpd子プロセスの最大数を指定(同時に応答するリクエストの最大数)
・MaxConnectionsPerChild　リクエスト数　httpd子プロセスが処理するリクエストの最大数を指定
AlmaLinux 9 + 389ds でユーザとsudoersを管理する

AlmaLinux 9でLDAPの設定をやろうとしてみたら、浦島太郎状態で七転八倒したので、引っかかったところだけをざっくりメモ

# 389dsの初期設定

<a href="https://possiblelossofprecision.net/?tag=389ds">このへん</a>を眺めながら、サーバを作って、memberof, referential-integrity などのプラグインを有効にし、Let's EncryptでTLS証明書を取ってldapsを話せるようにする。

# sudoers用のLDAP設定を作る
こんな感じのldifでsudoers用のOUおよびそれに対するACI(アクセス許可リスト)を作る

```
dn: ou=sudoers,dc=(どめいん)
objectClass: top
objectClass: organizationalUnit
ou: sudoers
aci: (targetattr="cn || sudoUser || sudoHost || sudoCommand || sudoRunAs || su
 doRunAsUser || sudoRunAsGroup || sudoOption || sudoNotBefore || sudoNotAfter
 || sudoOrder || nsUniqueId || description || objectClass")(targetfilter="(obj
 ectClass=sudoRole)")(version 3.0; acl "Enable anyone sudoRole read"; allow (r
 ead, search, compare)(userdn="ldap:///anyone");)
```

あとはsudoerのエントリをそれっぽく書く
```
dn: cn=%staff,ou=sudoers,dc=(どめいん)
objectClass: top
objectClass: sudoRole
cn: %staff
sudoUser: %staff
sudoHost: ALL
sudoCommand: ALL
```

そして、対応するグループを作ってユーザを突っ込む
```
dsidm -b dc=(どめいん) (インスタンス名) posixgroup create --cn staff --gidNumber (GID)
dsidm -b dc=(どめいん) (インスタンス名) group add_member staff uid=(ユーザ名),ou=people,dc=(どめいん)
```

ちなみに、ユーザの作成は直接ldifを書かずに、こんな感じでdsidmでやることを想定
```
dsidm -b dc=(どめいん) (インスタンス名) user create --uid (ログイン名) --cn "(フルネーム)" --displayName "(フルネーム)" --homeDirectory "/home/(ログイン名)" --uidNumber -1 --gidNumber (Primary GID)
dsidm -b dc=(どめいん) (インスタンス名) account reset_password uid=(ログイン名),ou=people,dc=(どめいん)
```

# クライアント側の設定

`sssd.conf` は、世の中の他のソフトのパッケージと違い、雛型もなければ自動生成するコマンドとかもないので、涙目になりながらでっちあげる。なお、パーミッションは 600 にしておかないと sssd が起動してくれない。
```
[sssd]
services = nss, pam, sudo
domains = default

[domain/default]
id_provider = ldap
ldap_uri = ldaps://(さーばー)
ldap_search_base = dc=(どめいん)
ldap_schema = rfc2307bis
sudo_provider = ldap
ldap_sudo_search_base = ou=sudoers,dc=(どめいん)
enumerate = true
```
ポイントは、`ldap_schema = rfc2307bis`、これがないと、上記で作ったsudoers用のsupplemental groupをsssdがちゃんと認識してくれない。
* memberUID をちゃんと管理するldifを書けばいいんだろうけど、やり方分からん

また、`enumerate = true` を入れておくと、`getent passwd`とかでユーザリストを見られるようになる。この辺はポリシー次第。

`/etc/openldap/ldap.conf`にも、URIとBASEを適当に設定する。

あとは、`authselect`によろしく設定してもらう。
```
dnf -y install sssd-ldap
authselect select sssd with-sudo --force
systemctl restart sssd
```
タイトル：CSSのmargin-bottomについて解説

Webデザインにおいて、要素間の間隔や余白は非常に重要な要素の一つです。CSSのmarginプロパティを使用することで、要素の余白を調整することができます。marginプロパティは、上下左右の余白を個別に指定することができますが、本記事では、その中でもmargin-bottomについて解説し、その使い方や実際の効果について紹介します。

①margin-bottomとは

margin-bottomは、要素の下側の余白を指定するプロパティです。このプロパティを使用することで、要素の下側に余白を設けることができます。margin-bottomは、ピクセル、パーセント、emなどの単位で指定することができます。

②使い方

margin-bottomは、CSSで要素に適用することができます。以下は、その使い方の例です。

例①

p {
margin-bottom: 20px;
}

この例では、p要素の下側に20ピクセルの余白を設定しています。これにより、p要素の下にスペースが生じます。

例②

h1 {
margin-bottom: 10%;
}

この例では、h1要素の下側に現在のフォントサイズの10%の余白を設定しています。%は、現在のフォントサイズに対する相対値を示します。

例③

img {
margin-bottom: 2em;
}

この例では、img要素の下側に現在のフォントサイズの2倍のサイズの余白を設定しています。emは、現在のフォントサイズに対する相対値を示します。

③実際試したところ結果

margin-bottomを変更することで、要素の下側に余白を設定することができます。これにより、要素間の間隔や余白を調整することができます。また、marginプロパティは、上下左右の余白を個別に指定することができるため、要素の位置やレイアウトの調整にも利用することができます。

ただし、marginプロパティは、要素の外側の余白を調整するため、周囲の要素にも影響を与えることがあります。そのため、適切な余白を設定することが重要です。

④終わり

以上が、CSSのmargin-bottomについての解説です。
実際結果：https://eigo-bunpou.com/namely/
CSSのpadding-leftについて解説

CSSのpadding-leftは、要素の左側に余白を設定するプロパティです。padding-leftを使用することで、要素の左側に余白を設定し、見た目を整えることができます。

①padding-leftとは

padding-leftは、要素の左側に余白を設定するCSSのプロパティです。padding-leftを使用することで、要素の左側に余白を設定し、見た目を整えることができます。

②使い方

padding-leftを使用するには、以下のようにCSSの記述を行います。

例①

padding-left: 10px;

例②

padding-left: 20%;

例③

padding-left: auto;

上記のように、padding-leftにはpxや%などの単位を指定することができます。また、autoを指定することで、要素の左側に余白を設定することができます。

③実際試したところ結果

padding-leftを使用して、要素の左側に余白を設定してみました。以下のような結果が得られました。

結果を見る

https://eigo-bunpou.com/invoke/
CSSのpadding-topについて解説


padding-topは、HTML要素の上部に余白を設定するプロパティです。padding-topを使用することで、要素の上部に余白を設定し、見た目を整えることができます。

使い方

padding-topを使用するには、CSSのpaddingプロパティを使用します。paddingプロパティは、上下左右の余白を設定するプロパティです。padding-topを使用する場合は、paddingプロパティの上部の余白を設定します。

例①

padding-topを使用して、要素の上部に20pxの余白を設定する場合は、以下のように記述します。

div {
  padding-top: 20px;
}

例②

padding-topを使用して、要素の上部に10%の余白を設定する場合は、以下のように記述します。

div {
  padding-top: 10%;
}

例③

padding-topを使用して、要素の上部にautoの余白を設定する場合は、以下のように記述します。

div {
  padding-top: auto;
}

実際試したところ結果：　https://eigo-bunpou.com/revelry/
CSSのfont-sizeについて解説

Webデザインにおいて、文字の大きさは非常に重要な要素の一つです。文字の大きさは、Webサイトの見た目だけでなく、読みやすさや使いやすさにも大きな影響を与えます。CSSのfont-sizeは、Webサイトで使用する文字の大きさを調整するためのプロパティです。本記事では、font-sizeについて解説し、その使い方や実際の効果について紹介します。

①font-sizeとは

font-sizeは、Webサイトで使用する文字の大きさを指定するプロパティです。このプロパティを使用することで、Webサイトのフォントサイズを調整することができます。font-sizeは、ポイント、ピクセル、パーセントなど、さまざまな単位で指定することができます。

②使い方

font-sizeは、CSSで要素に適用することができます。以下は、その使い方の例です。

例①

h1 {
font-size: 2rem;
}

この例では、h1要素のフォントサイズを2remに設定しています。remは、ルートエレメントのフォントサイズに対する相対値を示します。つまり、この例では、ルートエレメントのフォントサイズの2倍のサイズになります。

例②

p {
font-size: 16px;
}

この例では、p要素のフォントサイズを16pxに設定しています。pxは、ピクセル単位を示します。

例③

span {
font-size: 120%;
}

この例では、span要素のフォントサイズを現在のフォントサイズの120%に設定しています。%は、現在のフォントサイズに対する相対値を示します。

③実際試したところ結果

font-sizeを変更することで、Webサイトの文字の大きさを調整することができます。文字の大きさを大きくすることで、読みやすさを向上させることができます。また、文字の大きさを小さくすることで、情報量の多いWebサイトでも、見やすさを保つことができます。

また、font-sizeを適用する要素によって、文字の大きさが異なることにも注意が必要です。例えば、h1要素のフォントサイズを大きく設定した場合、p要素のフォントサイズが小さく感じられることがあります。

結果を見る：https://eigo-bunpou.com/jump-scare/
NaN Boxingでハマった話

# はじめに
結論から書きます。RISC-Vでは（そして一般的にも？）1本の、例えば128bit精度の浮動小数点レジスタに32bit, 64bitの浮動小数点値を書く時には、下位にその値をおいて、利用していない上位を1で埋める作業を行います。これをNaN Boxingと呼びます。NaN Boxingでは、使っていない上位がすべて1で埋まってなくてはなりません。もし1でうまってない数があった場合は、いかに下位が正しく32bit/64bitの浮動小数点値を示していても、それはNaNとして扱われます。

# 問題の出発点 - fsgnj.s命令が想定と違う動きをする

RISC-VのISS(instruction set simulator)を自作している中で、fsgnj.s命令のテストがどうしてもパスせず困っていました。fsgnj.s f0, f1, f2命令はsign injection命令で、f1のsign bitだけf2のsign bitと入れ替えてf0に格納する、という命令です。精度はfloat(32bit)です。

これのテストがriscv-testsの以下ファイルの58-61行目にあります。

https://github.com/riscv-software-src/riscv-tests/blob/master/isa/rv64ud/move.S

これの58行目のテスト、テスト番号40のテストにおいて、fsgnj.sを使っている箇所はマクロの48行目になります。以下、spikeにてステップ実行した際の上記48行目のfsgnj.s命令実行直後におけるレジスタの値のダンプです。

```sh:spike log
core   0: 0x0000000080000608 (0x20208053) fsgnj.s ft0, ft1, ft2
: freg 0 ft0
0xffffffffffffffffffffffff7fc00000
: freg 0 ft1
0xffffffffffffffff7ffffffe12345678
: freg 0 ft2
0xffffffffffffffff0000000000000000
```

レジスタ自体は128bitあるようですが、この命令では単精度、32bitしか使われないため、下位32bitだけを見ていました。そうすると、ft1は0x12345678, ft2は0x00000000、どちらも浮動小数点の値として正しい値（NaNではない、という意味）です。ft2のサインビットは0のため、ft1のサインビットを0に書き換えて（も元のママ）0x12345678がft0に入るはずだ、と思っていました。ところが、spikeの実行結果では、0x7fc00000がft0に入っていました。Canonical NaNというやつらしいです(quiet NaNでもある)。どうしてNaNになるのか全くわからず、NaNなんだ！NaNでなんだ！とうめいてrisc-vのslackサーバーに質問を投げつけました。


# 問題のポイント - NaN Boxingは上位が全てall 1で埋まってないとNaNとみなす
NaN Boxingとは、前述したように、利用していない上位bitを1で埋める作業を指します。NaNは、exponentがall 1で、fractionが0以外の場合を指します。上位を1で埋めると、自然とexponentとfractionの上位何ビットかは必ずall 1になります。つまり、32bit幅で浮動小数点レジスタに書き込んだ値は、64bit/128bitで読もうとするとNaNに見えてしまうわけです。詳細は[riscvの仕様書](https://github.com/riscv/riscv-isa-manual/releases/download/Ratified-IMAFDQC/riscv-spec-20191213.pdf)p73-74に記載されてあります。ここで、ポイントは以下のパラグラフです

> Apart from transfer operations described in the previous paragraph, all other floating-point operations on narrower n-bit operations, n < FLEN, check if the input operands are correctly NaN-boxed, i.e., all upper FLEN−n bits are 1. If so, the n least-significant bits of the input are used as the input value, otherwise the input value is treated as an n-bit canonical NaN.

ここで、FLENとは浮動小数点レジスタの幅で、上記のデフォルトのspikeだと128のようです。これを読むと、input operandは正しくNaN Boxingされているか、つまり、利用されていない上位bitがすべて1かを確認する必要があります。そして、もし正しくNaN Boxingされていない場合は、いくら下位の値が正しく浮動小数点の値を示していても、canonical NaNとして扱え、とあります。Oh, MY! ft1レジスタは上位bitに1ではないものが含まれています。そのため、ft1はfloat精度で読み取った時にもNaNとして、つまり0x7fc00000として扱わなければなりません。0x7fc00000にsign bitをinjectionした結果は0x7fc00000です。このように、spikeの実行結果の説明がつきました。

# 教訓
仕様書は舐めるように端から端まで読みましょう（難しい！

# 最後に
そして検索したら[FPGA開発日記](https://msyksphinz.hatenablog.com/entry/2018/04/12/040000)さんにて同じ問題が指摘されていました。ああ、NaN Boxingという言葉でぐぐる能力があれば...
CSSのbox-shadowについて解説

CSSはWebデザインに欠かせない要素の一つであり、多くのデザイナーに利用されています。その中でも、box-shadowというプロパティは、Webサイトの見た目やデザインにおいて、非常に重要な役割を担っています。本記事では、box-shadowについて解説し、その使い方や実際の効果について紹介します。

①box-shadowとは

box-shadowとは、要素に影をつけるためのプロパティです。要素に対して、影をつけることができます。影の位置や色、ぼかしの度合いなど、自由に調整することができます。このプロパティは、Webサイトの見た目をより魅力的にするために、または要素の際立たせるために利用されます。

②使い方

box-shadowは、CSSで要素に適用することができます。以下は、その使い方の例です。

例①

.box {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

この例では、要素に10pxの黒い影をつけています。

例②

.box {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

この例では、要素に2px右下にずらした灰色の影をつけています。また、ぼかしの度合いを0.2に設定しています。

例③

.box {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

この例では、要素の内側に10pxの黒い影をつけています。insetをつけることで、影を要素の内側につけることができます。

③実際試したところ結果

box-shadowを変更すると、要素の見た目が大きく変わることがわかります。影の位置や色、ぼかしの度合いを調整することで、要素の際立ち感を増すことができます。また、insetをつけることで、影を要素の内側につけることもできます。

また、box-shadowを利用することで、要素同士の間に距離をつけることもできます。例えば、box-shadowを利用して、ナビゲーションバーとコンテンツの間に距離をつけることができます。

実際結果を見る：　https://eigo-bunpou.com/liminal/
CSSのline-heightについて解説

CSSはWebデザインに欠かせない要素の一つであり、多くのデザイナーに利用されています。その中でも、line-heightというプロパティは、Webサイトのレイアウトやデザインにおいて、非常に重要な役割を担っています。本記事では、line-heightについて解説し、その使い方や実際の効果について紹介します。

①line-heightとは

line-heightとは、文字列や要素の高さを指定するプロパティです。テキストの行間や、要素の上下の余白を調整することができます。例えば、line-heightが1.5の場合、1行の高さがフォントサイズの1.5倍になります。このプロパティは、テキストの可読性を向上させるために、または要素の見た目を調整するために利用されます。

②使い方

line-heightは、CSSで要素に適用することができます。以下は、その使い方の例です。

例①

p {
line-height: 1.5;
}

この例では、段落の行間を1.5倍に設定しています。

例②

h1 {
font-size: 36px;
line-height: 1.2;
}

この例では、見出しのフォントサイズが36pxで、行間を1.2倍に設定しています。このように、line-heightをフォントサイズと組み合わせることで、テキストの読みやすさを調整することができます。

例③

.button {
display: inline-block;
line-height: 40px;
}

この例では、ボタンの高さを40pxに設定しています。このように、line-heightを要素の高さとして利用することができます。

③実際試したところ結果

line-heightを変更すると、文字列の見た目が大きく変わることがわかります。例えば、行間が狭いと、テキストが詰まっているように感じられます。逆に、行間が広いと、読みやすさが向上すると感じる人もいます。

また、line-heightを要素の高さとして利用することで、要素の見た目を調整することができます。例えば、ボタンなどの要素には、適切な高さを設定することで、見た目を整えることができます。

実際の結果を見る：https://eigo-bunpou.com/nerdy/