OmniAICreator/Qiita-1.07M huggingface dataset:
ターミナル、コマンドライン、シェル、プロンプトの違い

- ターミナル
- コマンドライン
- シェル
- プロンプト
- コマンドプロンプト
- PowerShell

このそっくりさん達について、それぞれ内容を再確認していきます。

ターミナル
-
システムを操作できるグラフィックウィンドウと考えてください。
基本的には、デフォルトでシェルを実行するアプリケーションです。
ターミナルエミュレータの例として、Tarminator、Konsoleなどがあります。

シェル
-
ターミナルが実行するプログラムであり、コマンドを実行する場所です。

プロンプト
-
コマンドを入力する前に、多くの場合、何らかのテキストが表示されます。これがプロンプトです。これは、システムが入力の準備ができていることを示す方法です。
多くの場合、ユーザー名、マシン名、現在のディレクトリなどの役立つ情報が表示されます。

コマンドライン
- 
ユーザーがコマンドを実行できるインターフェースを表す用語。

コマンドプロンプト
-
Windowsのコマンドラインインターフェイスです。
コマンド構文：
シンプルなMS-DOSスタイルの構文で、基本的なコマンド（dir,copy,delなど）が中心。

スクリプト機能：
基本的なバッチスクリプト(.batや.cmd)のみサポートしており、構文も限定的。

管理機能：
基本的なファイル操作やネットワーク管理、システム設定の操作など限られた範囲の管理が可能。
※主にシンプルで軽量な作業向け

PowerShell
-
Windowsのコマンドラインインターフェイスです。
コマンド構文：
Get-, Set-, Remove- などの動詞-名詞形式のコマンド（コマンドレットと呼ばれる）を採用しており、システムの各種設定にアクセスしやすく、わかりやすい構文。

スクリプト機能：
より高度なスクリプト言語として機能し、条件分岐、ループ、関数、例外処理など、プログラムに近い構造を持つスクリプト（.ps1ファイル）を作成できる。また、外部モジュールもインポートできるため、拡張性も高い。

管理機能：
サーバーやクラウド環境（Azureなど）の管理、Active Directory、レジストリ操作など幅広い管理機能が含まれており、Windows管理だけでなく、LinuxやmacOSなど異なるプラットフォームにも対応している。
※強力なスクリプト機能と管理機能が必要な作業向け

まとめ
-

- ターミナル　　　　　・・・　シェル実行アプリ
- コマンドライン　　　・・・　コマンド実行できるインターフェース全般の通称名
- シェル　　　　　　　・・・　入力されたコマンドを処理するプログラム
- プロンプト　　　　　・・・　コマンド入力準備完了通知
- コマンドプロンプト　・・・　軽量なWindowsコマンドインターフェイス
- PowerShell 　　　　・・・　高機能なWindowsコマンドインターフェイス

**ターミナル**を開いて、**プロンプト**を表示し、コマンドを入力すると**シェル**がそのコマンドを処理するという流れになります。


参考記事：
https://www.heyvaldemar.com/distinctions-between-terminal-command-line-shell-and-prompt/?ref=dailydev
Jetpack ComposeのTextのAutosize

Jetpack Compose 1.8.0-alpha05 から `Text` で Autosize がサポートされるようになったので試してみました。
書いているのは 1.8.0-alpha05 時点の内容なので、実際の使用時には最新のドキュメントを確認ください。

## 使い方

material や material3 の `Text` ではまだ使用できず、foundation の `BasicText` を使います。

```kotlin
BasicText(
    text = text,
    autoSize = AutoSize.StepBased(
        minFontSize = 10.sp,
        maxFontSize = 60.sp,
        stepSize = 10.sp
    )
)
```

幅と高さを固定にしていた場合に、収まり切るようにテキストサイズが調整されます。

![Autosizeの例1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/59a4954b-e27e-44a1-c1e4-78a2995cd7bc.png)

`maxLines = 1` の場合には height を固定にしている場合に高さ方向に対して収まるようにテキストサイズが調整されます。

![Autosizeの例2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/3ffc8323-4c4a-e927-f715-d0205b10fc61.png)







`AutoSize` で設定する引数は以下のとおりです。

|引数|デフォルト値|説明|
|:--:|:--|:--|
|minFontSize|12sp|最小のテキストサイズ|
|maxFontSize|112sp|最大のテキストサイズ|
|stepSize|0.25sp|テキストサイズ調整のステップ|

`TextView` の Autosize を使ったことがあれば馴染みのあるものになっています。
ちなみに `TextView` であった `autoSizePresetSizes` 相当のものは現時点では Compose にはありません。

また、Autosize が設定されている時は `TextStyle` に設定した `fontSize` よりも優先されます。

## 内部実装

以下の部分でテキストサイズの調整処理があり、最小・最大テキストサイズの中間から拡大・縮小どちらにするのかを決めて入り切るまで繰り返すようになっています。

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/text/AutoSize.kt;l=150-180

テキストの調整処理が呼ばれるのは以下の `TextAutoSize.performAutoSize` で、

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/text/modifiers/MultiParagraphLayoutCache.kt;l=195

それが呼ばれるのは `layoutWithConstraints` の中で、`layoutWithConstraints` はレイアウトの measure 時に呼ばれます。

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/text/modifiers/MultiParagraphLayoutCache.kt;l=147
chatGPTに仕事奪われそうだから、アドベントカレンダー参加してみる

# chat GPTすげー！
ChatGPTが爆誕したことで、自分が専門としていないような技術領域についても、足を突っ込んでいけるようになりました。

私も全くといっていいほど得意ではなかったフロントエンドのコーディングも、ほぼ思考停止状態で実装できています。

GPTを使い始めた当初は「すげー！もうなんも考えなくていいじゃん！」とテンション上がって色々作っていました。今ももちろんフル活用しています。
そして、**社内向けのアプリをほぼGPTによるコーディングだけで実装した**ときに、これまでのテンションとは裏腹にとてつもない不安感に襲われました。

「**動いている仕組みはわかるけど、細かいコードの部分全然なんも考えてない…**」
「**このコード、自分ひとりだったらゼロから書き上げられるのか…？**」

小さな部署なので、普段から私は一人で開発を行っているのですが、その自分ですら深く介在していないコードってかなりやばいのでは…？
今は少人数向けのちょっとした生産性改善便利ツールくらいのものだけど、このまま何も考えずに実装していくと「**何もわからいけどGPTがなんとかしてくれるエンジニア**」になってしまうのでは…？

そんな危機感に襲われたので、ちゃんと自習をしてせめて「**時短のためにGPTを使ってるけど、ちゃんと自分でもゼロから作れる**」ようにしていきたいと思いました。
# やろうとしていること
**技術書を少なくとも一冊やりきってアウトプットする**
ことを目指します。

恥ずかしながら積読している技術書がそれなりにある＋もう一回読み直したいものもあるので、この機会に消化したいとも思います。

![PXL_20240916_024954169.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2255713/ec7294e4-d17c-0d32-34e5-71402b50b194.jpeg)
※☝️一部私のものじゃない書籍もありますが、こんな感じ☝️

その中でも、「**コーディングの能力がGPTに依存し始めている**」ことが過大なので、メインで使用しているPythonに関係のあるものを選ぼうと思います。

# 選ばれた書籍
ということで今回はアドベントカレンダーの期間中に以下の二冊を完走することを目指してみようと思います。

## 1. Pythonチュートリアル（O'Reilly）
Pythonは学部時代から研究のために用いていた経験もあり、猿並みには使えていると思っています。
なのでゼロから勉強するぜっていう感じよりも、コツコツコーディングを楽しむ感覚を取り戻すためのウォーミングアップとして選びました。

![PXL_20241102_121357039.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2255713/86b00125-9e43-d624-4d66-c0a897d12861.jpeg)

本書はPythonの生みの親であるGuido氏が描き下ろした公式チュートリアルらしいということで、ほぼテンションだけで購入して積んでいた一冊です。
供養供養。

## 2. プロフェッショナルWebプログラミング　Django（エムディエヌコーポレーション）
普段は社内向けのアプリ開発とか、データ蓄積のためにAPI連携でデータ取得などをゴリゴリやる仕事をしています。
自分がPythonをメインで使っている＋契約しているパートナーベンダーさんもPythonでコードを提供してくれるということもあり、何かしらのアプリを作るときは**django**を採用しています。

![PXL_20241102_121441348.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2255713/752caf8b-3ced-b39b-df82-aa76a51eadc7.jpeg)

ということで、django学び直します。
ゼロから書いたことはもちろんあって、仕組みも理解しているつもりではあるのですが、冒頭にも記載した通り最近はGPTにかなり任せているので、正直細部の細部まで理解できているかというと…という感じなので、やります(T_T)

# 最後に
ちゃんと自信も取り戻して、完走賞もとれたら最高だなーというモチベーションです。
同じようにGPTに依存していて、これでいいのか？と不安を抱えている方がいれば、一緒に走り抜いていただきたいななんて思います。
よろしくおねがいします！
Vulkan日記その2: デモンストレーション・プログラムを動かす

[前回](https://qiita.com/zacky1972/items/967d6ea213ee658bfa43)，デモンストレーション・プログラムの動かし方を書き忘れていました．

- [Vulkan日記その1: HomebrewでVulkanをインストール](https://qiita.com/zacky1972/items/967d6ea213ee658bfa43)

```zsh
`brew --prefix vulkan-tools`/bin/vkcube 
```

![vkcubeスクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55223/f33734d1-dc1e-ac80-891c-8ab3fb5a83af.png)

[つづく](https://qiita.com/zacky1972/items/1b76e79b47fd58f90c80)
【MantineCharts】BarChart でプラス方向とマイナス方向の棒グラフを実装する

# はじめに
React 向けコンポーネントライブラリである Mantine に含まれるチャート（グラフ）機能の  **MantineCharts** でプラス方向とマイナス方向双方の棒グラフを実装する方法を記載します。

https://mantine.dev/charts/bar-chart/

# 開発環境
開発環境は以下の通りです。

- Windows 11
- Next.js 14.2.4
- React 18.3.1
- TypeScript 5.5.2
- @mantine/core 7.13.4
- @mantine/hooks 7.13.4
- @mantine/charts 7.13.4
- Recharts 2.13.2

# 実装
`series` props へ渡す値にマイナス値が含まれていれば、マイナス方向に向かうグラフも追加の実装なしで表示できます。

```page.tsx
import { BarChart } from "@mantine/charts";

const data = [
  { month: "January", profit: 120 },
  { month: "February", profit: -190 },
  { month: "March", profit: 40 },
  { month: "April", profit: 100 },
  { month: "May", profit: -80 },
  { month: "June", profit: 75 },
];

export default function Page() {
  return (
    <BarChart
      h={400}
      data={data}
      dataKey="month"
      series={[{ name: "profit", color: "blue.6" }]}
    />
  );
}

```

動作確認をします。
値のプラス・マイナスに応じて BarChart もプラス・マイナス方向に向かって表示されます。

![localhost_3000_charts_mantine-charts_bar-charts_plus-minus-Google-Chrome-2024-11-02-18-14-35.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/20e849ec-bd57-21a6-4e29-f6d5081e158d.gif)

# プラス方向・マイナス方向で色を変える
プラス方向・マイナス方向の違いを目立たせるために色を変えたい場合もあると思います。
しかし、2024年11月時点では、値で色を変えるということは難しそうです。

ただ、データの持ち方を変えることで実現することはできます。以下のようにプラスとマイナスでデータのプロパティを変え、`series` で各プロパティごとに色を変えることで実現できます。

```page.tsx
import { BarChart } from "@mantine/charts";

const data = [
  { month: "January", plusProfit: 120 },
  { month: "February", minusProfit: -190 },
  { month: "March", plusProfit: 40 },
  { month: "April", plusProfit: 100 },
  { month: "May", minusProfit: -80 },
  { month: "June", plusProfit: 75 },
];

export default function Page() {
  return (
    <BarChart
      h={400}
      data={data}
      dataKey="month"
      series={[
        { name: "plusProfit", color: "blue.6" },
        { name: "minusProfit", color: "red.6" },
      ]}
    />
  );
}

```

以下のようにプラス・マイナスで色を変えることができます。ただ、以下の画像を見てわかるように各棒が中央に表示されていません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/2fd46a8f-1231-8dad-d707-d3f96aff33f7.png)

表示位置の問題を解決するため props に `type="stacked"` を追加します。`type="stacked"` は以下の記事で解説しているように `seris` の値を横並びではなく、縦に積み上げ式で表示します。

https://qiita.com/Yasushi-Mo/items/91fe3a4367af55d759a7

そのため、結果として中央表示することができます。

![localhost_3000_charts_mantine-charts_bar-charts_plus-minus_color-Google-Chrome-2024-11-03-20-29-05 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/f9a6b09e-63f1-29aa-1fd8-b4cdcf6e393a.gif)

# 関連記事

https://qiita.com/Yasushi-Mo/items/cb09c41b5fb9e79df48f

https://qiita.com/Yasushi-Mo/items/91fe3a4367af55d759a7

https://qiita.com/Yasushi-Mo/items/8fb08b6fd43f39650e05

# 参照
- [BarChart](https://mantine.dev/charts/bar-chart/)
システム設計を効率的に学べる「system-design-primer」

# はじめに

エンジニアのみなさま、日々の学習本当にお疲れ様です！
また本記事まで足を運んでいただき本当に感謝です。
最後まで読んでもらえると幸いです。

-------------

システム設計はエンジニアにとって重要なスキルですが、いざ学習しようとすると幅広い知識と実践的なスキルが求められるため、独学ではハードルが高く感じられることも多いです。今回は、システム設計を学ぶためのオープンソースプロジェクト **「system-design-primer」** を紹介します。system-design-primerを活用することで、システム設計の基礎から応用まで体系的に学べるとの事です。

# system-design-primer

https://github.com/donnemartin/system-design-primer/blob/master/README-ja.md

system-design-primer は、システムのスケーラビリティ、可用性、冗長性といった設計課題に対応するための知識を提供してくれるオープンソースプロジェクトです。システム設計において頻出するトピックが網羅されてます。日本語版も用意されてます。

# システム設計を学習するときの課題

システム設計を学ぶ際には、以下のような課題に直面しやすい印象です。

### 1. 概念と実践のギャップ
システム設計は理論を学んで理解するだけではなく、実際のプロジェクトに応じて適用方法が変わります。例えば、スケーラビリティの理論を学んでも、プロジェクトの要件や制約に合わせた具体的な設計方法をイメージしにくいことがあります。

### 2. 知識の広さと深さのバランス
システム設計には、ネットワーク、データベース、サーバー、キャッシュ、ロードバランサーなど、幅広い分野の知識が必要です。各分野で基本的な知識を押さえつつ、実際に活用できる深い理解も求められます。

### 3. 最適解が一つではない
システム設計には「これが絶対に正しい」という正解がないため、要件やリソースに応じた柔軟な思考が重要です。そのため、設計の経験が少ないとどのような選択をするべきか悩みやすくなります。

上記の課題に対して **system-design-primer** が全て解決してくれる！というのは言い過ぎですが、システム設計に関連する膨大な資料の中から自分でピックアップして学習するよりも効率的かなと考えます。

# 1つピックアップしてみる

![スクリーンショット 2024-11-02 22.53.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744730/2ec948e9-a5dc-74c6-9bb5-f6e6342f5628.png)

アプリケーション層についての考え方が整理されています。
英語を翻訳しているため少し読みづらさはありますが、システム設計の考え方の基本を知るには程よい印象です。用語に関しては知らないものがたくさんあり、まだまだ学習が足りないなと痛感してます...
リンクも豊富です。全量はまだ確認できていないですが、リンク先は海外の記事ばかりでした。個人的には今まで海外の記事を見る機会が少なかったので良いきっかけになりました。

# システム設計の面談対策にも使える

こんな感じでまとめてくれています。

![スクリーンショット 2024-11-02 23.09.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744730/db6782b2-492d-8220-0ff7-2ef813d8b06c.png)

考え方を理解した上で、以下の様な実際の問題にも触れることができます。
顧客を想定して考え方をシュミレーションするのにも使えそうですね。

![スクリーンショット 2024-11-02 23.14.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744730/a1375956-99d6-5c05-0ddd-2fb4ed62b1e6.png)

# さいごに

システム設計は習得が難しい分野ですが、今回ご紹介したsystem-design-primerを活用することで、効率よく学習が進められます。興味がある方は、ぜひ system-design-primer にアクセスしてシステム設計の知識を深めてみてください。

# おまけ

弊社のご紹介もさせてください！

### 「日本で一番エンジニアが成長できる会社を創る」

https://prum.jp/

### エンジニアリングの募集

https://www.wantedly.com/projects/1808638

### PM・Webディレクションの募集

https://www.wantedly.com/projects/1355235

### セールス・事業開発の募集

https://www.wantedly.com/projects/1792065

### コーポレート系の募集

https://www.wantedly.com/projects/1752874

### コンサルティングの募集

https://www.wantedly.com/projects/1794481

弊社メンバーは日々学習した内容をアウトプットしております！
少しでもご興味を持たれた方は求人を見てみてください！
ご応募もお待ちしております！

### 最後までご覧いただき、ありがとうございました！
【私用】Neovimでコピーして他のアプリに貼り付け

# 概要
vimやneovimで書いている内容を他のアプリに貼り付けたい時がたまにあるかと思います．通常だと**範囲を選択して"+y**となります．

:::note
**他のアプリへ貼り付けられるコピー（通常）**

範囲選択後"+y
{select}"+y
:::

これは忘れてしまうし，面倒すぎる．システムクリップボードにヤンクという意味を考えたらよいのだろうと思いつつ，いつもそのば限りなのでメモを見て後回しになっていたのですが:sweat_smile::sweat_smile::sweat_smile:

**vim-system-copy**というプラグインを見つけました．[公式サイト](https://github.com/christoomey/vim-system-copy)に詳しい記述があります．プラグインをインストール後，特に何も設定をしなくても，**{範囲選択}cp**でクリップボードにコピーされるらしい．

https://github.com/christoomey/vim-system-copy

:::note
**他のアプリへ貼り付けられるコピー（プラグイン）**

**{select}cp**

ビジュアルモードで範囲選択後ｃｐ
:::
これで，他のアプリにCtrl-vで貼り付けられる．"+yとあまり変わりないかもしれないけど，cpはcopyの感覚とあっている気がする．次使う時，覚えていたらおそらくそうなのだろう．


# 注意点
Ubuntuというか，Linuxの場合は，x11ならxsel，waylandならwl-clipboardを別途インストールしておく必要があります．外部コマンドを利用してコピーするということか...

|ウインドウシステム| パケージ名| コマンド|
|---------------|---------|--------|
|X11            |xsel     | xsel   |
|Wayland        | wl-clipboard | wl-copy |

xselやwl-clipboradのインストール

:::note
X11：　apt install xsel
Wayland：　apt install wl-clipboard
:::
アップグレード可能なNFTマーケットプレイスのスマートコントラクト

## はじめに
このプロジェクトは、SolidStateライブラリのダイヤモンドストレージパターンを使用して構築された、アップグレード可能なNFTマーケットプレイスのスマートコントラクトです。このマーケットプレイスでは、NFTのリスト、購入、オークションといった各機能を分割してモジュール化（ファセット化）し、柔軟にアップグレードやスケーリングが可能な設計になっています。

## リポジトリ

https://github.com/takurot/UpgradableNFTMarketplacewithSolidState

## 主な特徴

- **ダイヤモンドストレージパターン**: SolidStateのダイヤモンドプロキシとファセットを活用し、モジュールごとに分割されたアップグレード可能なスマートコントラクトを実現しています。
- **NFTリスト機能**: ユーザーがNFTを価格設定してマーケットプレイスにリストできます。
- **NFT購入機能**: 購入者がリストされたNFTを支払って購入することが可能です。
- **NFTオークション機能**: オークション機能をサポートし、指定した期間内でユーザーがNFTの入札を行えます。
- **共通ストレージ**: 全てのファセットが共通のストレージを使用して、データの整合性を保ちつつ効率的にアクセスできるようにしています。

## ファイル構成

```plaintext
contracts/
├── NFTMarketplaceDiamond.sol      // ダイヤモンドプロキシコントラクト（各ファセットを管理）
├── ListFacet.sol                  // NFTリスト機能を提供するファセット
├── BuyFacet.sol                   // NFT購入機能を提供するファセット
├── AuctionFacet.sol               // NFTオークション機能を提供するファセット
└── MarketplaceStorage.sol         // 共有ストレージ定義
```

## コントラクトの概要

### 1. ダイヤモンドプロキシコントラクト (NFTMarketplaceDiamond.sol)

`NFTMarketplaceDiamond`コントラクトは、中央のプロキシとして機能し、異なるファセットに呼び出しを委譲します。このコントラクトには、ファセットアドレスのリストを初期化する機能があり、特定の機能を正しいファセットにルーティングする役割を担っています。

### 2. リストファセット (ListFacet.sol)

`ListFacet`コントラクトは、NFTのリスト機能を管理します。ユーザーがNFTをマーケットプレイスにリストする際に価格を設定し、NFTの転送承認を確認することで、所有権が適切に移転されるようにします。

### 3. 購入ファセット (BuyFacet.sol)

`BuyFacet`コントラクトは、リストされたNFTを購入する機能を提供します。購入者が適切な支払いを行うと、NFTが購入者に転送され、支払いが売り手に送られます。

### 4. オークションファセット (AuctionFacet.sol)

`AuctionFacet`コントラクトは、オークション機能を提供します。売り手がオークションを作成し、ユーザーが指定された期間内で入札を行います。オークションが終了すると、最高入札者にNFTが転送され、売り手に支払いが行われます。

### 5. マーケットプレイスストレージ (MarketplaceStorage.sol)

`MarketplaceStorage`ファイルは、各ファセットが共有するストレージ構造を定義します。これにより、リストやオークションの情報が全ファセットで一貫して保持され、効率的にデータにアクセスできるようになります。

## 使用方法

### インストール

1. **依存関係のインストール**: 必要なOpenZeppelinとSolidStateライブラリをインストールします。

   ```bash
   npm install @openzeppelin/contracts @solidstate/contracts
   ```

2. **コントラクトのデプロイ**: HardhatやTruffleといった開発フレームワークを用いて各ファセットをデプロイし、`NFTMarketplaceDiamond`コントラクトにファセットのアドレスを初期化します。

### ワークフローの例

1. **NFTのリスト**:
   - `ListFacet`を使用してNFTをマーケットプレイスにリストし、価格を設定し、NFTの転送承認を確認します。

2. **NFTの購入**:
   - 購入者が`BuyFacet`の`buyNFT`関数を呼び出し、NFTを購入します。

3. **オークションの作成と入札**:
   - `AuctionFacet`を使用してオークションを作成し、ユーザーが入札し、終了時に最高入札者にNFTが転送されます。

## SolidStateの利用によるメリット

- **アップグレード性**: 各ファセットを個別にアップグレードでき、他のモジュールに影響を与えずに機能を追加・修正できます。
- **モジュール性**: リスト、購入、オークションといった機能が分割されており、拡張や変更が簡単です。
- **効率的なストレージ管理**: ダイヤモンドストレージパターンにより、全ファセットでのデータの一貫性と最適なストレージ使用が実現します。

## 注意点

- **アクセス制御**: `onlyOwner`などのアクセス制御を追加し、重要な関数の呼び出しを制限することを検討してください。
- **マーケットプレイスの互換性**: 他のNFT標準にも対応することで、幅広いNFTマーケットプレイスと互換性を持たせることが可能です。
ゲームエンジン Ren'py(ノベラ作成)を始める｡EP03 選択､フラグと判定文の使い方

### 選択メニュー
テスト用プロジェクトを利用します.
メインメニューで"Test"のscript.rpyを選ぶ｡
内容をすべて消して､下の内容を入れてください.
```
label start:
    "これがスタートです｡"

    menu:
        "右へ行きますか? 左へ行きますか?"
        "右へ!":
            jump rightside
        "左へ!":
            jump leftside

label rightside:
    return
label leftside:
    return
```

1. menu 選択用ブロック
1. jump ラベルへジャンプする.
1. return 終り





### フラグと判定

label startの上にbookのフラグ(変数)を書いておきます｡
その変数を判定分に使います.


  
```
# スタート
# bookの変数
default book = False
label start:
    "これがスタートです｡"

    menu:
        "右へ行きますか? 左へ行きますか?"
        "右へ!":
            jump rightside
        "左へ!":
            jump leftside

label rightside:
    #
    # bookの変数へTrueを入れる｡
    $ book = True
    jump endrtn

label leftside:
    jump endrtn

label endrtn: 
    # 判定分
    if book:
        "右へ 本を持って !"
        return

    "さらに左へ !"
    return

```
これは単純なので読めます｡
できるだけ､上から下に順番に読めるようなスクリプトしましょう｡
スマートコントラクト開発で目にするキーワードをまとめてみた。

- スマートコントラクトの機能カテゴリ
    - 機能のタイプ
        - 資産管理コントラクト
            - トークンコントラクト
                - ERC-20（標準トークン）
                - ERC-721（NFT）
            - デリバティブコントラクト
                - オプション、先物、スワップなど
        - 取引安全コントラクト
            - エスケローコントラクト
                - 条件付き資金引渡し
        - マルチシグコントラクト
            - 複数署名による承認
        - ガバナンスコントラクト
            - DAOや提案、投票機能
        - 情報提供コントラクト
            - オラクルコントラクト
            - 外部データソースとの連携
        - 動的なコントラクト操作
            - メタコントラクト
                - 他のコントラクトの生成・管理
            - ファクトリーコントラクト
                - 複数インスタンスの生成
            - プロキシコントラクト
                - アップグレード可能なインターフェース
            - オーケストレーションコントラクト
                - 複数コントラクトの調整・管理
            - インターフェースコントラクト
                - 規格化された関数群の定義
読書感想　オブジェクト指向でなぜつくるのか ６章から

# 概要
https://qiita.com/RYA234/items/ef45555f7ca37d1b13ee
 の続きです。
オブジェクト指向についての本です。UMLの内容が多いです。


# 印象に残った部分

## p209 UMLの使い方
１．OOPのプログラムの構造や動作を表現する
２．汎用の整理術としての成果物を表現する
３．オブジェクト指向では表現できる情報を表現する

## p217-p224　動き、役割分担を表現するUML図

シーケンス図とコミュニケーション図は動的な情報を表現する図です。
また、人、組織、部品毎の役割分担を表現することができます。


UMLの名前|プログラムを表現する場合|業務を表現する場合
--------|---------------------|---------------
シーケンス図|実行時のインスタンスのメソッド呼び出しを時系列に表現|役割分担された人や組織が協調して全体の仕事を達成する様子を時系列に表現する|
コミュニケーション図|実行時のインスタンス間のメソッドの呼び出しをインスタンスの関係を表現する|役割分担された人や組織が協調して全体の仕事を達成する様子を構造中心に表現する

コミュニケーション図の使いどころはわからないです。
この本で初めて知りました。


### シーケンス図 例
```plantuml
@startuml
autoactivate on
alice -> bob : hello
bob -> bob : self call
bill -> bob #005500 : hello from thread 2
bob -> george ** : create
return done in thread 2
return rc
bob -> george !! : delete
return success
@enduml
```

### コミュニケーション図　例

plantumlだとオブジェクト図で再現できそう

```plantuml
@startuml
object London
object Washington
object Berlin
object NewYork

map CapitalCity {
 UK *-> London
 USA *--> Washington
 Germany *---> Berlin
}

NewYork --> CapitalCity::USA
@enduml
```


## p240 モデリング　p242 ビジネスアプリケーション
ビジネスアプリケーションの重要な役割は、現実の出来事を記録すること

現実世界とソフトウェアにギャップがあり、
そのギャップを埋めるための３ステップの開発プロセスがある。

開発プロセス名|説明|成果物
------------|--------|-----------
業務分析|現実世界の仕事の進め方を整理する|アクティビティ図
要件定義|コンピュータに任せる仕事の範囲を決める|ユースケース図、アクティブ図、概念データモデル
設計|ソフトウェアをどう作るか決める|クラス図

# p227 アクティビティ図とシーケンス図
現実世界の仕事の流れは、アクティビティ図で表現します。
アクティビティ図以外でも　シーケンス図やコミュニケーション図を使って表現できます。
しかし、実際の仕事の様子を分析するときは通常は登場人物の役割分担よりも、全体を理解することに焦点を置くため、流れを直感的にわかりやすく表現できるアクティビティ図を一般的に利用します。

## クラス図について　p210
オブジェクト指向言語のプログラム構造を図で表現するための図

# 実践できること or 感想

## 感想

・オブジェクト指向とUMLの関連を知ることができて良かったです。
　UMLを今までなんとなく使っていたので勉強になりました。

・アクティビティ図とシーケンス図の使い分けについても書かれていたのも勉強になりました。
　
・モデリングという単語は、どの分野で使われるかで意味が異なると感じました。
　実務でこの単語が出てきたときは具体的な定義を確認しておく必要があると思いました。
　なあなあで済ませておくと齟齬で出て手戻りが大きそう

## 実践できること
・p244 245 246の図をplantumlで模写する

・コミュニケーション図の使い所を考えておく。
PKCEにおけるCode VerifierやCode Challenge Methodの安全な保管場所は？

PKCEにおいて、**Code Verifier**や**Code Challenge Method**を不適切な場所に保管すると、認可を乗っ取られるリスクが高まります。具体的に、以下のような場所にこれらの値を保管するとリスクが高くなります。

### 1. **ローカルストレージやセッションストレージ**

- **リスク**: ブラウザのローカルストレージやセッションストレージは、同じオリジン内のJavaScriptによって容易にアクセスされるため、悪意のあるスクリプトによってCode Verifierが盗まれる可能性があります。
- **XSSの脅威**: もしアプリケーションがクロスサイトスクリプティング（XSS）攻撃の脆弱性を持っている場合、攻撃者は悪意のあるスクリプトを挿入してこれらのストレージにアクセスし、Code Verifierを盗むことができます。

### 2. **クッキー**

- **リスク**: Code Verifierをクッキーに保管することも、適切なオプションではありません。クッキーは`HttpOnly`属性がないとJavaScriptからアクセスできるため、XSS攻撃で盗まれるリスクがあります。
- **セキュリティ属性**: `HttpOnly`を付与しても、Code Verifierをクッキーに保管することは一般的ではありません。PKCEはクライアントサイドで生成されるため、クッキーでの保存は意味が薄いです。

### 3. **JavaScriptコード内のグローバル変数**

- **リスク**: Code VerifierをJavaScriptのグローバル変数やクライアントサイドのコード内に直接保管するのも危険です。クライアント側のコードはユーザーや攻撃者によって簡単に検査・読み取りされるため、Code Verifierを含む変数が露出しやすくなります。
- **開発者ツールへのアクセス**: ブラウザの開発者ツールを使用して、攻撃者が変数を読み取ることが可能です。

### **なぜこれらの場所はリスクが高いのか？**

- **XSS攻撃**: XSS攻撃により、悪意のあるスクリプトがアプリケーション内に挿入され、Code Verifierやその他の機密情報を読み取ることができます。
- **JavaScriptの脆弱性**: クライアントサイドのコードは、ブラウザ環境ではユーザーによって読み取りや改ざんが可能であるため、セキュリティの観点からは保護されていません。

### **安全な保管方法**

- Code Verifierはクライアントサイドのメモリに保管し、使用後は速やかに破棄するのが望ましいです。以下の点に留意してください：
  - **一時変数**: Code Verifierを使用する際には、JavaScriptの一時変数として格納し、リクエスト後は速やかに削除します。
  - **不要なログやデバッグ情報の排除**: Code Verifierや関連情報を含むデバッグ情報が誤ってコンソールに出力されないように注意します。

### **追加の防御策**

- **CSP（Content Security Policy）の導入**: XSS攻撃を防ぐため、適切なCSPを設定して、信頼できないスクリプトが実行されないようにします。
- **セキュアコーディングの実践**: アプリケーション全体でXSS対策（例えば、出力エスケープや入力バリデーション）を徹底し、攻撃者が悪意のあるコードを注入できないようにします。

Code Verifierは認可フローの一部として重要な役割を担っているため、適切に扱い、不必要に保管しないことがセキュリティを保つ上で不可欠です。
NetworkManagerでハマった

Linuxのネットワーク設定で見事にハマったので、備忘録・自戒を込めて、Qiitaに残します。
原因はすごく初歩的なことなので、最後まで読まれて「時間の無駄だった！！」と言われても困ります(;^_^A

# 環境と発生事象
今回ハマった環境は、AlmaLinux 9.3。VMware上に仮想マシンを作成し、AlmaLinuxとK3sを導入して、検証のためにコンテナアプリを導入しようとしていました。

AlmaLinux導入後にSSHを使ったリモート作業で、K3sやコンテナのアプリを導入作業していると、Linuxのネットワークが、2～3分で自動的に切断してしまう事象に当たりました。NetworkManagerを再起動すれば接続は回復するのですが、その後も2～3分で自動的切断してしまうため、作業にならない状態でした。

# ネットワークの設定
その時のネットワーク設定の抜粋。この画面を見て、すぐ原因が分かった方は笑ってください。

![qiita01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375120/8a4c6051-429d-ee96-7a9a-9245850de4eb.png)

# そして沼にハマった・・・
一度つながったネットワークが、2～3分で切断するのはNetworkManagerが原因なのは過去の経験からわかりました。以前のLinuxであれば、NetworkManagerを無効化して、「/etc/sysconfig/network-scripts」などのネットワークスクリプトで設定していました。

しかし、RHEL9系からはネットワークスクリプト自体が使えなくなってNetworkManagerでの設定が必須。仕方なく解決方法を探します。
「NetworkManager」「自動」「切断」「disconnect」「fail」といった用語で、何度検索したことか。「/etc/NetworkManager/NetworkManager.conf」を何度見直したことか。「journalctl」で詳細を見るために、ロギングを「Trace」までしましたよ。。。

そして、何度もNetworkManagerを再起動し切断されるログを見直しながら、うすうす思ってましたよ。
「なんで dhcp のキャンセル処理が発生するんだろ？固定IP振っているのに。」

![qiita02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375120/48011fe4-8c97-a3eb-21a2-9bb58fd039f8.png)

# 今となっては思い出せない
何がきっかけで気づいたか、もう忘れました。「IPv4 CONFIGURATION」のメニューを開いて気づくのです。
「Manual ってあるじゃん。。。」

![qiita03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375120/dcd69f8d-ea89-b8c6-421c-b9d63b5114f1.png)

過去のLinuxでは「DHCP」を無効にしないと、固定IPを設定する画面にならなかったと思うのですが、NetworkManagerって「DHCP」を有効にしたまま、固定IPを設定することができちゃうんですね。そして、その場合はいったん固定IPで接続しながらも、DHCPでIPもリクエストするんですね、、、酷くない？？「ク〇UIじゃん」と叫んだのは内緒。

でも、IPv6を無効化するために「IPv6 CONFIGURATION」のメニューで、「Automatic」から「Disabled」にしているので、そのタイミングで気づけなかったのかという情けなさもあります。

以後気を付けます。。。
PKCEを安全に利用するためのセキュリティ対策、３選

PKCEにおいて、悪意のあるアプリケーションが**認可トークン**だけでなく**Code Verifier**と**Code Challenge**も一緒に盗んだ場合、悪意のあるアプリケーションはアクセストークンを取得できる可能性があります。PKCEは、認可コードの横取り攻撃（Authorization Code Interception Attack）を防ぐための仕組みであり、**Code Verifier**をアクセストークンリクエスト時に用いることで、認可サーバーが認可コードの正当な所有者を確認します。

しかし、以下のことが重要です：

1. **PKCEは単独で全ての攻撃を防ぐものではない**: PKCEは、認可コードの横取り攻撃を防ぐための仕組みであり、Code Verifierを持たない攻撃者からのアクセストークン取得を防ぎます。しかし、もし攻撃者が**認可コード**、**Code Verifier**、**Code Challenge**をすべて盗んだ場合、PKCE自体ではこれを防ぐことはできません。
2. **トークンの盗難対策**: PKCEを実装していても、クライアントアプリケーションや通信経路に対するセキュリティ対策が不十分だと、これらの値が盗まれるリスクは残ります。そのため、次のような追加対策が必要です：
   - **HTTPSの使用**: すべての認可リクエストとアクセストークンリクエストをHTTPSで暗号化し、通信の盗聴を防ぎます。
   - **セキュアなクライアントアプリケーション**: アプリケーション自体のセキュリティを強化し、悪意のあるコードによってデータが読み取られないようにします。
   - **CSP（Content Security Policy）の導入**: 悪意のあるスクリプトによるデータ窃盗を防ぐために、適切なCSPを設定します。
3. **さらなるセキュリティ対策**:
   - **セッション有効期間の短縮**: アクセストークンや認可コードの有効期間を短くし、仮に盗まれたとしてもすぐに無効になるようにします。
   - **トークン失効の活用**: 不審なアクセスが検知された場合、トークンを即座に失効させることができるようにします。
   - **ユーザーの再認証**: セキュリティが懸念される操作では再度認証を求め、悪意のある操作を難しくします。

### 結論

PKCEは認可コードフローを安全にするための有力な手段ですが、**Code Verifier**と**Code Challenge**、さらには**認可コード**がすべて同時に盗まれた場合、攻撃者はアクセストークンを取得できる可能性があります。そのため、PKCEを利用しても、セキュリティ全体を強化するためには追加の対策が必要です。
認可コード横取り対策「PKCE（Proof Key for Code Exchange）」の仕組み

PKCE（Proof Key for Code Exchange）は、OAuth 2.0の認可コードフローをより安全にするために導入された仕組みで、特に**クライアントシークレットを安全に保持できないクライアント（主にSPAやモバイルアプリ）** において重要です。PKCEは、\*\*認可コードの横取り攻撃（Authorization Code Interception Attack）\*\*を防ぐために使われます。

### PKCEの仕組み

PKCEでは、認可コードフローに「コードチャレンジ」と「コードバリファイア」の2つの追加パラメータを導入します。これにより、攻撃者が認可コードを横取りしても、アクセストークンを取得することが難しくなります。

#### 主な用語

- **コードバリファイア（Code Verifier）**: クライアントがランダムに生成する値で、アクセストークンをリクエストする際に使用されます。
- **コードチャレンジ（Code Challenge）**: コードバリファイアをハッシュ化した値で、認可リクエスト時に送信されます。

### PKCEの動作フロー

1. **クライアントがコードバリファイアを生成**
   - クライアント（例：SPA）はランダムな値であるコードバリファイアを生成します。これは高いエントロピー（予測困難性）を持つランダムな文字列です。
2. **コードチャレンジの作成**
   - コードバリファイアをSHA-256でハッシュ化してURLエンコードし、コードチャレンジを生成します。
   - `plain`方式も使用可能ですが、`S256`（SHA-256を使ったハッシュ化）が推奨されます。
3. **認可リクエスト**
   - クライアントは認可サーバー（IdP）に認可コードをリクエストするとき、コードチャレンジと使用するハッシュメソッド（`code_challenge_method`）を含めます。
   - リクエスト例:
     ```text
     GET /authorize?response_type=code&client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&scope=SCOPE&state=STATE&code_challenge=CODE_CHALLENGE&code_challenge_method=S256
     ```
     ‌
4. **認可サーバーの応答**
   - 認可サーバーは認証後、クライアントに認可コードを発行し、リダイレクト先に送信します。
5. **アクセストークンリクエスト**
   - クライアントは認可コードを受け取った後、アクセストークンをリクエストします。このとき、初回に生成したコードバリファイアを含めてリクエストします。
   - リクエスト例:
     ```shell
     POST /token grant_type=authorization_code&code=AUTHORIZATION_CODE&redirect_uri=REDIRECT_URI&client_id=CLIENT_ID&code_verifier=CODE_VERIFIER
     ```
     ‌
6. **認可サーバーによる検証**
   - 認可サーバーはコードチャレンジを取り出し、クライアントから送られたコードバリファイアをハッシュ化してコードチャレンジと比較します。
   - 一致すれば認証が成功し、アクセストークンを発行します。

### PKCEのメリット

- **認可コードの横取り攻撃を防止**: 攻撃者が認可コードを横取りしたとしても、適切なコードバリファイアを持っていなければアクセストークンを取得できません。
- **安全性の向上**: クライアントシークレットを使用しないため、SPAやモバイルアプリのようにクライアントシークレットを安全に保持できない環境で安全に認可フローを実装できます。

### PKCEが特に有効なケース

- **SPA（Single Page Application）**: JavaScriptで実行されるアプリケーションはクライアントシークレットを保持できないため、PKCEを利用することでセキュリティを高められます。
- **モバイルアプリ**: モバイルアプリも、ユーザー端末にアプリがインストールされるため、クライアントシークレットを安全に保持することが難しいです。

### まとめ

PKCEは、OAuth 2.0認可コードフローにおける安全性を高めるための拡張で、特にクライアントシークレットを安全に保持できないクライアントにとっては必須の仕組みです。これにより、認可コードの横取り攻撃を防ぎ、アクセストークン取得プロセスをより安全にします。
VS Codeで選択した範囲を同じ長さのスペースで埋める

# できること
VS Codeで選択した範囲を同じ長さのスペースで埋めるキーボードショートカットを作成します。
これ↓が
![before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711051/90926ad7-5e94-340c-2913-c5352709ce69.png)
こうなります↓
![after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711051/1be98b2d-001c-ef5c-c008-8a12a9f7bfb6.png)

# 結論
VS Codeで`Cmd + Shift + P`により検索ボックスに移り、`keyboard json`などと入力して、
「基本設定: キーボード ショートカットを開く (JSON)」を選択する。
`keybindings.json`なるファイルが開くはずなので、`[]`の内側に以下を追記する。
`key`はお好みのキーの組み合わせを入れる。自分はlatexを使うときにこのショートカットを使いたいので`"when": "editorLangId == latex"`としているが、無しにするとどんなときでも使えるはず。
```
{
        "key": "cmd+shift+r",
        "command": "editor.action.insertSnippet",
        "args":{
            "snippet": "${TM_SELECTED_TEXT/./ /g}",
        },
        "when": "editorLangId == latex",
    }
```
選択した文字列について、どんな文字でも空白に変換するという操作になっています。

# 動機
latexの表において`&`で揃えるために、上の行をコピーして既存の文字列を同じ長さの空白に変換したいと思いネットで探しましたが、見つからなかったので作成しました。
以下のページの`Transform examples`の項を参考にしました。

https://code.visualstudio.com/docs/editor/userdefinedsnippets#_transform-examples
OIDC認証フローにおけるリソースサーバー（WEB API等）の責務とは？

リソースサーバ（Web API）が安全な認証および認可を実現するためには、以下のような責務が求められます。

### 1. **アクセストークンの検証**

- **トークンの署名検証**: リソースサーバは、リクエストに含まれるアクセストークンの署名が正しいことを検証し、トークンが改ざんされていないことを確認します。通常、署名検証には公開鍵を使用し、IDプロバイダーが提供する公開鍵を使って署名が有効であることを確認します。
- **トークンの有効期限のチェック**: アクセストークンの有効期限（`exp`クレーム）を確認し、有効期限が切れたトークンを拒否します。
- **発行者（Issuer）の確認**: トークンの`iss`クレームをチェックし、信頼できるIDプロバイダーによって発行されたものであることを確認します。
- **オーディエンス（Audience）の確認**: `aud`クレームがリソースサーバを対象としていることを確認し、不正なトークンを排除します。

### 2. **スコープと権限の検証**

- トークンに含まれるスコープや権限の情報（`scope`または`roles`クレーム）を基に、リクエストされたリソースや操作が許可されているかを確認します。
- リソースサーバは各APIエンドポイントに対して必要なスコープや権限を定義し、不足している場合はアクセスを拒否するようにします。

### 3. **トークンのリプレイ攻撃対策**

- アクセストークンを使用したリクエストが一度きりのものであることを保証する対策が求められます。たとえば、トークンが頻繁に使用されている場合、不審なアクセスを検出する仕組みが考えられます。
- トークンの使い捨て（JWTの短期間有効化とリフレッシュトークンによる再認証）やトークンリクエストのトラッキングなどが挙げられます。

### 4. **APIエンドポイントへのアクセス制御**

- 各エンドポイントへのアクセス制御を適切に行い、アクセストークンの有無やスコープに基づいてアクセスを許可・拒否します。
- 一般ユーザーと管理者ユーザーなど、異なる権限に応じたアクセス制御も含まれます。

### 5. **CORS（Cross-Origin Resource Sharing）の設定**

- クライアントが異なるオリジン（ドメイン）からAPIにアクセスする場合に備え、CORSポリシーを設定します。特定の信頼できるオリジンのみを許可し、不正なオリジンからのリクエストを拒否します。

### 6. **HTTPSの強制使用**

- アクセストークンを含むリクエストは必ずHTTPS経由で送信し、通信内容が第三者に盗聴・改ざんされるリスクを防ぎます。
- HTTPリクエストが来た場合はHTTPSにリダイレクトするか、アクセスを拒否します。

### 7. **レートリミットおよびIPフィルタリング**

- リクエストの頻度を制限することで、悪意あるユーザーがサーバを過負荷にさせる攻撃（DoS攻撃など）を防ぎます。
- 特定のIPアドレスからのリクエストを制限したり、地理的に信頼できない地域からのアクセスをブロックしたりすることも考慮されます。

### 8. **ログと監視**

- 認証・認可に関する操作やエラーログを記録し、不審なアクセスやトークンの誤使用を検出できるようにします。
- アクセス状況をリアルタイムで監視することで、異常検知や迅速な対策が可能になります。

### 9. **トークン失効の処理**

- IDプロバイダーから通知されるトークン失効情報（リスト）を使用し、特定のトークンを無効化する仕組みを導入します。
- これは、例えばユーザーがログアウトした際や不正利用が検知された場合に必要となります。

### 10. **リフレッシュトークンの非管理**

- SPAやフロントエンドでのみ動作するアプリケーションからはリフレッシュトークンの扱いは避け、アクセストークンの短期間有効化とAPI側でのトークンリフレッシュ処理を推奨します。
- リフレッシュトークンは通常サーバーサイドで管理され、フロントエンドに直接露出しないように設計します。

これらの責務を果たすことで、リソースサーバはアクセストークンの適切な検証と、権限に基づいたアクセス制御を実現し、安全なWeb APIの運用が可能になります。
リダイレクトメモ

# 目的
運用保守の現場で使用したり先輩から学んだ知識を知識の定着かつ辞書代わりに記録。

# リダイレクト
コマンドの実行結果などの標準出力を別のファイルに吐き出す。
標準エラー出力と標準エラー出力を別ファイルに分ける場合や、まとめて同じファイルに吐き出すことも可能。

## 基本構文

```bash
# 構文
# 上書き
{{出力のあるコマンド}} > output.txt
# 末尾に追記（末尾に追記する場合はリダイレクト記号2つ）
{{出力のあるコマンド}} >> output.txt

# ex.) catで標準出力したinput.txtの内容をoutput.txtにリダイレクトする
$ cat input.txt > output.txt
```

## ShellScriptなどの標準出力のログをリダイレクトする場合
```bash
$ ./example.sh >> all.log
```

## 標準エラー出力も含めてリダイレクトする場合
```bash
$ ./example.sh >> all.log 2>&1
```

## 標準出力とエラーをリダイレクトするファイルを分けたい場合
```bash
$ ./example.sh >> stdout.log 2>> stderr.log
```

## 全ての出力を無視したい場合
```bash
$ ./example.sh > /dev/null 2>&1
```
※詳しく調べてないが、`/dev/null`は出力を即座に破棄することができるUNIX系に存在する特殊ファイル。
※スクリプトの自動実行などでユーザープロンプトを無視したい場合には`./example.sh < /dev/null`のような記述も使用されるよう。
Python in Excelで不均一データから等高線図を作る方法

## 目的
xy平面上のデータzをプロットするために等高線図を作ります。
Excelのグラフで一応等高線グラフはあるんですが、
下記のようなグリッドのデータが存在する前提の機能のようで使えない場合が多いです。
例えば実験データなどはところどころ抜けがあったり、等間隔のグリッドですらない場合が多いので、xy面内分布を図示するのには使えません。

|  | y1 | y2 | y3 | y4 |
|:-:|:-:|:-:|:-:|:-:|
| x1| z11|z12 | z13  | z14  |
| x2| z21  | z22  | z23  | z24  |
| x3| z31  |  z32 |  z33 | z34  |
| x4| z41  |  z42 | z43  | z44  |

### シナリオ
ランダムなx,yとそれに対応するzの計3列からなるデータがあります。
これの等高線図を作ることにします。
(zの値は今回sin^2(x)+cos^3(y)としています。しっかり等高線図を作れているか確認するためにzをx,yの関数としましたが、以下のコードは実際にはzが適当な値でも機能します)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471244/cca65df9-3bf3-09b9-91f9-25bd801141f4.png)


## コード
python in excelはセルの数式として=PYを入力することで数式バーがpython コード入力領域へと変化しpythonコードを書けるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471244/1f4e16df-40f3-21a8-56ca-df1542dd66ba.png)


```python:セルに入力するコード
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
from scipy.interpolate import griddata
#データの定義 x,y,z,グラフのタイトル,のセル範囲を設定する
x0=xl("C2:C50")
y0=xl("D2:D50")
z0=xl("E2:E50")
title=xl("A3")
lower_limit=xl("A5")
higher_limit=xl("A7")

#データの加工
x1=x0.to_numpy().flatten()
y1=y0.to_numpy().flatten()
z=z0.to_numpy().flatten()


df=pd.DataFrame({'x':x1,'y':y1,'z':z})
df = df.dropna()

#プロット先を作る
x = np.array(sorted(set(df.x))) # setで重複を除いたのち、ソート
y = np.array(sorted(set(df.y))) # setで重複を除いたのち、ソート
x_fine = np.linspace(x.min(), x.max(), len(x) * 5 - 1)  # グリッドを5倍に
y_fine = np.linspace(y.min(), y.max(), len(y) * 5 - 1)  # グリッドを5倍に
X, Y = np.meshgrid(x_fine, y_fine)

#Zのプロットを作る
# 不規則なデータを補間してグリッドにマッピング
grid_z = griddata((df['x'], df['y']), df['z'], (X, Y), method='linear')


#形を整える
plt.rcParams["figure.figsize"] = [4,4]
ax = plt.subplot(111) # axesの設定
ctf = ax.contourf(X, Y, grid_z, levels=np.linspace(lower_limit,higher_limit,25),vmin=lower_limit, vmax=higher_limit, cmap="jet") # コンター
colb = plt.colorbar(ctf, pad=0.1, orientation="vertical") # カラーバー
colb.set_label("z", fontname="Arial", fontsize=6) # カラーバーのラベル
plt.title(title, fontsize=10, fontname="Arial", pad=20)

#描画
plt.show()
```

### 結果
セルの右クリックメニューで「セルの上にプロットを表示」を選ぶとプロットが出てきます。
いい感じの等高線図ができてます。
(本来のsin^2(x)+cos^3(x)にかなり近いのでうまくいってそうです)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471244/e10fb2c5-d02a-0820-f419-931ecf09b79d.png)

### 何をしているか雑な解説
描画にmatplotlibを使うとしても、データの等高線を作るにはグリッド形式にしてやる必要があるので、まずグリッドを用意してやり、その後元データからグリッド上にデータを補完するという手順を踏んでいます。
(meshgridのデータの記法は初見だとちょっと混乱しそうな気がしますが、ここでは説明を省きます。)
```python
#グリッドを用意している部分
X, Y = np.meshgrid(x_fine, y_fine)

#グリッド上にデータを保管している部分
grid_z = griddata((df['x'], df['y']), df['z'], (X, Y), method='linear')
```

### おわり
Excelでmatplotlib使えるなんていい時代になりましたね。
SPA（Single Page Application）の最適なOIDC認証認可フロー「Authorization Code Flow with PKCE」

SPA（Single Page Application）とWeb APIで構成されるWebアプリケーションにOIDC（OpenID Connect）認証フローを導入する場合、主に **Authorization Code Flow with PKCE (Proof Key for Code Exchange)** を採用するのが一般的で、推奨されます。

### なぜ Authorization Code Flow with PKCE が適しているのか？

SPAはブラウザで直接実行されるため、クライアントシークレットを安全に保管できないという制約があります。従来のAuthorization Code Flowではクライアントシークレットを必要とするため、SPAのようにシークレットを安全に保持できないアプリケーションには不適切です。PKCEはこの問題を解決するために追加された仕組みで、クライアントシークレットを不要にし、代わりに「コードチャレンジ」と「コードバリファイア」という値を利用して認可コードの盗聴や悪用を防ぎます。

### Authorization Code Flow with PKCE の流れ

1. **リクエストの生成**：
   SPAは認可サーバーに認証リクエストを送信します。このとき、ランダムなコードバリファイアを生成し、それをハッシュ化した「コードチャレンジ」を認可サーバーに送ります。
2. **認証と認可コードの取得**：
   ユーザーが認証されると、認可サーバーはSPAに「認可コード」を返します。この段階ではアクセストークンは発行されません。
3. **アクセストークンの取得**：
   SPAは、取得した認可コードとコードバリファイアを使用して認可サーバーにアクセストークンをリクエストします。認可サーバーは、コードチャレンジとコードバリファイアを比較し、検証が成功すればアクセストークンとIDトークンを返します。
4. **トークンの利用**：
   SPAは、取得したアクセストークンを用いてWeb APIにアクセスし、認証されたリクエストを送信します。IDトークンは、ユーザー情報を含んでおり、ユーザー認証に関する情報を含んでいます。

### このフローのメリット

- **安全性が高い**：PKCEにより、認可コードの盗聴や改ざんのリスクを減らし、より安全にSPAで認証を実行できます。
- **クライアントシークレットが不要**：SPAはブラウザ上で実行されるため、サーバーサイドと異なりシークレット情報を保持できないため、PKCEを利用することで安全に認証フローを行えます。
- **OAuth 2.1に準拠**：最新のOAuth仕様にも適合しており、標準化された安全なフローです。

### 注意点

- PKCE対応の認可サーバーが必要ですが、主要な認証プロバイダー（Auth0、AWS Cognito、Azure AD B2C、Oktaなど）はPKCEをサポートしています。
- ブラウザのセキュリティ設定やフロントエンドフレームワークに適した実装が必要です。

**結論として**、SPAとWeb APIで構成されたWebアプリケーションにOIDCを導入する際は、**Authorization Code Flow with PKCE** を選択するのがベストプラクティスです。
table要素をdisplay:noneから表示に切り替える際の注意点

:::note
`display:table-cell`はtd,th要素にデフォルトで設定されています。
tableのセル、行の表示を切り替える際のdisplayプロパティの設定値はデフォルトで設定してある値にするのが無難です。
:::

# 背景 🖼️
td要素をデフォルトで非表示にして、条件によって表示非表示を切り変える実装をしていました。
その際、表示に切り替えるとスタイルずれが起こりました。

<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="WNVyKrm" data-pen-title="sample display:table-cell" data-user="uuylkesg-the-styleful" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/uuylkesg-the-styleful/pen/WNVyKrm">
  sample display:table-cell</a> by 山根大生 (<a href="https://codepen.io/uuylkesg-the-styleful">@uuylkesg-the-styleful</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# display:tableとは 💡

https://stackoverflow.com/questions/7455650/setting-a-table-to-display-block

## `display: table`
テーブルの行と列が適切にレイアウトするために使用されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/a41d4a30-5c18-235a-34ef-ac09c35745d9.png)

ブラウザのデフォルトのスタイルシートでtable要素に指定されます。

## `display: table-cell`
tableのセルのスタイルを指定します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/951c4e01-bae3-4f87-23c6-929d034a5062.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/9d6b9257-980c-c805-653b-8252cedf2e75.png)


ブラウザのデフォルトのスタイルシートでtd要素,th要素に指定されます。

## `display: table-row`
tableの行のスタイルを指定します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/9217e68f-f0f8-a38f-a11f-fd2993ef29bb.png)

ブラウザのデフォルトのスタイルシートでtr要素に指定されます。

# `display: block`とは
ブロック要素として扱われるため、常に新しい行から開始し幅全体を占有します。
ブロックレベル要素の前後に自動的に改行が挿入されます。

# td要素をdisplay:noneから表示に切り替える際にスタイルがズレた理由 🚨

テーブル内での正しい表示と機能を維持するためにはtd,th要素でデフォルトの`display:table-cell`を使用すべきでしたが、`display:block`を使用した為です。

以下が修正後のソースです。
表示した際にセルがずれていません。

<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="ExqRpqb" data-pen-title="Untitled" data-user="uuylkesg-the-styleful" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/uuylkesg-the-styleful/pen/ExqRpqb">
  Untitled</a> by 山根大生 (<a href="https://codepen.io/uuylkesg-the-styleful">@uuylkesg-the-styleful</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 参考 ✨

https://developer.mozilla.org/ja/docs/Web/HTML/Element/td

https://magazine.techacademy.jp/magazine/19420

https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/

https://stackoverflow.com/questions/7455650/setting-a-table-to-display-block

https://www.w3schools.com/css/css_display_visibility.asp

# 最後に
displayプロパティについて勉強するきっかけになりました
zip, unzipメモ

# 目的
運用保守の現場で使用したり先輩から学んだ知識を知識の定着かつ辞書代わりに記録。

# zip
ファイルやディレクトリの圧縮、解凍をするコマンド。

## 基本構文
```bash
# 構文
$ zip {{オプション}} {{アーカイブ名}} {{圧縮対象}}

# ファイルの圧縮
$ zip input.zip input.txt

# ディレクトリの圧縮
$ zip -r input.zip input/
```

## パスワードを設定して圧縮
```bash
# 構文
# -eオプションをつける
$ zip -e {{アーカイブ名}} {{対象ファイル}}
# または
$ zip -encript {{アーカイブ名}} {{対象ファイル}}

# ファイルの圧縮
# パスワードの入力を2回求められる
$ zip -e input.zip input.txt

# ディレクトリの圧縮
# パスワードの入力を2回求められる
$ zip -er input.zip input/

# パスワードをコマンドにまとめて記述するなら
$ zip -er password=pass input.zip input.txt
※この実行方法はログに残るのでやめた方が良さそう
```

# unzip
## 基本構文
```bash
# 構文
$ zip {{オプション}} {{対象ファイル}}

# ex.)
$ unzip input.zip
```

## パスワード付きzipファイルを解凍する
```bash
# 通常通りのunzipコマンドを実行するとパスワードを求められるので入力するだけ
$ unzip input.zip
password:

# オプションに記載する方法もある
$ unzip -P pass input.zip
※この実行方法はログに残るでやめた方が良さそう
```

## 文字コードを指定して解凍
解凍する圧縮ファイルの文字エンコードを指定したい場合に使用する。

最初文字化けした際に文字化けしていたので文字コードが異なることに気づき、MacOSではデフォルトはutf-8で解凍されるので、以下オプションでsjisを指定して解凍したところうまくいった。
```bash
# 構文
$ unzip -O {{文字コード}} {{解凍zipファイル}}

# sjisで解凍する
$ unzip -O sjis input.zip
```
※MacOSに既存で入っているunzipコマンドはこのオプションに対応していない場合がある。Homebrewで最新のunzipをインストールすると使えるようになるはず。
`$ brew install unzip`
マインクラフトファン必見！新感覚パズルゲーム「マイクラ2048」レビュー

マインクラフトとパズルゲームの2048が融合した新しいゲームを見つけました。マイクラのブロックを使って遊ぶ新感覚パズルゲーム[マイクラ2048ゲーム](2048jp.top)を実際にプレイしてみましたので、その魅力をご紹介します。

■ゲームの特徴
このゲームの面白いところは、数字の代わりにマインクラフトのブロックを使用している点です。草ブロックから始まり、石ブロック、木材、鉄鉱石、金鉱石、そしてダイヤモンド鉱石へとアップグレードしていきます。マイクラファンにはたまらない要素が満載です。

■遊び方
基本ルールは2048と同じで、同じブロックを合体させてより価値の高いブロックを作っていきます。操作は矢印キーで簡単にできます。

私が特に気に入ったポイント：
・マインクラフトの世界観を完全再現
・シンプルな操作性で誰でも楽しめる
・PCとスマホ両方で遊べる
・完全無料

■実際にプレイした感想
マインクラフトの要素をうまく取り入れながら、パズルゲームとしての面白さも損なっていません。ブロックが合体する時の爽快感は格別で、ついつい「もう1回」と夢中になってしまいます。

マイクラファンの方はもちろん、普通の2048が好きな方にもおすすめのゲームです。気になった方は「2048jp.top」で検索してみてください。きっと新しい発見があるはずです。

#マインクラフト #2048ゲーム #パズルゲーム #ブラウザゲーム #無料ゲーム
vmmemWSLをタスクマネージャーから消したい

<h2>症状</h2>
Dockerでビルドした後、vmmemWSLがタスクマネージャーからタスクの終了ができない事象がありました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/dd5b82ae-8c17-6601-76d5-edacaeec5583.png)

<h2>解決方法</h2>
以下のコマンドを実行したら解決しました

```terminal:解決方法
wsl --shutdown
```

<h2>参考</h2>

https://qiita.com/kotauchisunsun/items/8b1d879b8f682bb9d55a
iTerm2起動時のエラー

備忘録、未来の自分へのメッセージとして残しています。
誤りや補足があれば、どうかご教示ください。

ターミナルは何を使用していますか？
私はプログラミング学習を開始した時からiTerm2を使用しています。
iTerm2を起動すると複数のエラーが表示されるようになってしまいました。
今回はこのエラーを解消するために調べてみました。

## エラー内容
zshの設定ファイル（.zshrc）やその他の設定に問題があるらしい。
特に「ファイルが開きすぎている（too many open files）」というエラーが原因。
システムで許可されているファイルの同時オープン数（ファイルディスクリプタの上限）を超えてしまったときや無限ループが原因で発生する。

![AE872841-A46B-4C1F-AF15-FF2CDF9CC807_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/cab1721b-b153-64c4-9dbe-df6da407284e.jpeg)

## 対策

- .zshrcファイルを確認する
.zshrcファイルを編集したい
```
nano ~/.zshrc
```

固まってて反応なし・・・

- iTerm2を再起動しセーフモードでzshを起動する。
nanoが正常に動作しない原因が他のプロセスや設定ファイルにあるかもしれない。
最低限の設定でシェルを起動して試してみる。
```
zsh -f
```

- .zshrcを開く。
編集できるかを確認する。
```
nano ~/.zshrc
```

- source ~/.zshrc
このコードをコメントアウトまたは削除する。
```
xport PATH="/opt/homebrew/bin:$PATH"
export PATH=$HOME/.nodebrew/current/bin:$PATH
export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init -)"

source /Users/yoko/.docker/init-zsh.sh || true # Added by Docker Desktop
# source ~/.zshrc

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"








^G Get Help       ^O WriteOut       ^R Read File      ^Y Prev Pg        ^K Cut Text       ^C Cur Pos
^X Exit           ^J Justify        ^W Where is       ^V Next Pg        ^U UnCut Text     ^T To Spell
```

- ファイルの保存
⌘ + s：保存
Enter
⌘ + X：nanoを終了

-zshの再起動
エラーが出ないか確認

無事に正常起動できた！

![81F14548-9842-4AB3-8DC8-3F60CC238E45_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/9a2c7f13-7710-6127-cff0-433a64a7f72c.jpeg)
ユーザーが入力した住所と、基幹システムが保持している住所マスタをベクトル検索とLLMを使って突合する

# 要件
ユーザーが入力した住所と、基幹システムが保持している16,000件の住所マスタから一致する住所を特定する。

# 住所の例
| 利用者入力                          | マスター住所1            | マスター住所2              |
|-------------------------------------|--------------------------|----------------------------|
| 桜町123ー5サンライズAー101           | 桜町１２３−５           | サンライズ　Ａ棟１０１    |
| 花山町45ー3スカイヒルズB202          | 花山町４５−３           | スカイヒルズ　Ｂ２０２    |
| 虹ヶ丘2ー7-12パークサイドレジデンス3-204 | 虹ヶ丘二丁目７−１２    | パークサイドレジデンスⅢ−２０４ |
| 青空町456ー1シティビルメゾンII202     | 青空町４５６−１         | シティビルメゾン　Ⅱ−２０２ |
| 若葉町1234ー56グランドヒルズ101号室   | 若葉町１２３４−５６     | グランドヒルズ　１０１号室 |
| 湖山台3丁目890番地ファミールヴィラD202 | 湖山台三丁目８９０      | ファミールヴィラ　Ｄ２０２  |

# 難しい点
人間が読めばわかりますが、プログラミング単体で正規化しマッチングさせるのは困難でした。
- 表記揺れの処理
  - 全角・半角や漢数字と算用数字の混在
  - 「１丁目」や「一丁目」など
- 曖昧な建物名・号室表記
- 地名のスペースの有無
- 番地や丁目の位置の違い

# ベクトル検索とリランカーで検証
1. マスタ住所を *intfloat/multilingual-e5-large* を使ってエンベディングし、ユーザーが入力した住所を使って、ベクトル検索エンジンで類似検索を行い、候補リストを50件取得。
1. リランカーとして、*hotchpotch/japanese-reranker-cross-encoder-large-v1* を使って50件のデータから最も類似度の高い1件を抽出
1. 一致したかを確認

# 結果
申請合計数 | 住所一致 | 住所不一致 | 住所一致率
--- | --- | --- | ---
509件 | 428件 | 81件 | 84.08%

# 惜しい点
かなり高い一致率だったが、部屋番号を間違えて引っ張ってくる例が散見された。

| ユーザー入力                        | 正しいマスター住所               | 検索結果（誤った部屋番号）     |
|-------------------------------------|---------------------------------|--------------------------------|
| 桜町123ー5サンライズAー101           | 桜町１２３−５ サンライズＡ棟１０１ | 桜町１２３−５ サンライズＡ棟１０２ |
| 花山町45ー3スカイヒルズB202          | 花山町４５−３ スカイヒルズＢ２０２ | 花山町４５−３ スカイヒルズＢ２０１ |
| 虹ヶ丘2ー7-12パークサイドレジデンス3-204 | 虹ヶ丘二丁目７−１２ パークサイドレジデンスⅢ−２０４ | 虹ヶ丘二丁目７−１２ パークサイドレジデンスⅢ−２０３ |
| 青空町456ー1シティビルメゾンII202     | 青空町４５６−１ シティビルメゾンⅡ−２０２ | 青空町４５６−１ シティビルメゾンⅡ−２０１ |
| 湖山台3丁目890番地ファミールヴィラD202 | 湖山台三丁目８９０ ファミールヴィラＤ２０２ | 湖山台三丁目８９０ ファミールヴィラＤ２０１ |

# ベクトル検索とLLMの組み合わせで検証
次に、リランカーは使用せずにベクトル検索エンジンから取得した候補50件をLLMに渡して、LLMに最も一致している住所を選択させる形で検証した。

# 結果
## gpt4o-mini

申請合計数 | 住所一致 | 住所不一致 | 住所一致率
--- | --- | --- | ---
509件 | 449件 | 60件 | 88.24%

## gpt4o
申請合計数 | 住所一致 | 住所不一致 | 住所一致率
--- | --- | --- | ---
509件 | 480件 | 29件 | 94.30%

# 結論
住所マッチングにおいては、リランカーよりもgpt4oの方が精度が高かったが当然コストが高くなるため、運用においてはどの程度の一致率で是とするかは要検討。
【Laravel】development環境で問題ないアプリがproduction環境で全く動かない事象に遭遇した

### ことの始まり
ポートフォリオMATRIXFLOWを作成している最中に事は起こりました。

※ MATRIXFLOWについてはこちらをご覧ください↓

https://qiita.com/maixhashi/items/5da649e290ec13e71465

一度、production環境（Heroku）にデプロイして問題ないことを確認したポートフォリオが機能追加後に再度pushすると画面真っ白になり何も動かず。

### ことの詳細
次のような流れでした。
 - ① [担当者(Membersモデルレコード)追加機能](https://qiita.com/maixhashi/items/5da649e290ec13e71465#%E6%8B%85%E5%BD%93%E8%80%85%E3%81%AE%E8%BF%BD%E5%8A%A0)の実装 
 - ② [フローステップ(FlowStepモデルレコード）追加機能](https://qiita.com/maixhashi/items/5da649e290ec13e71465#%E3%83%95%E3%83%AD%E3%83%BC%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%E3%81%AE%E8%BF%BD%E5%8A%A0)の実装
 - ③ production環境 Herokuにデプロイ
 - (⇧　😊機能問題なし！主要機能のマトリクスも作れる！ヨシ！😊 ⇧)
 - ④ [チェック項目（Checklistモデルレコード）追加機能](https://qiita.com/maixhashi/items/5da649e290ec13e71465#%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E9%A0%85%E7%9B%AE%E3%81%AE%E8%BF%BD%E5%8A%A0%E6%A9%9F%E8%83%BD)の実装
 - ⑤ development環境で問題なくチェック項目追加機能が動作する
 - ⑥ production環境 Herokuにデプロイ
 - (⇧ 😨production環境で動かない、画面真っ白😨 ⇧)

⑤でdevelopment環境で問題なく動いていることを確認したのに、
⑥のproduction環境で動作確認の段階で全く動かなくなり、
一旦問題なく動いていたところのcommitまで遡った内容をpushし直し、
デバックに着手しました。

※deploy内容はcommit単位で指定できます↓

https://qiita.com/maixhashi/items/a67eaa7e086a5768e59f

### バグの原因
バグの原因は、
**development環境とproduction環境でauto loaderの仕様が異なる**ことが原因でした。

上記の通り、④の機能を実装したときにエラーが起きたので
④の機能部分のコードが原因でした。

 - クラス`Checklist`を作成していた
 - ルーティングの部分でクラス指定を`CheckList`としていた
上記のような不整合があったままでした。
開発環境のauto loaderの仕様ではエラーなく読み込まれるのですが、
本番環境のauto loaderの仕様が開発環境と異なるためにちゃんとエラーとして認識されるためでした。
（Ruby on Railsだとこの類のクラス名不整合は赤画面ですぐエラー吐き出し等されるのでLaravelもされるものだと思っていた。。）

本番環境のHerokuでLaravelのエラーが出力されるように設定し
確認すると下記のようなエラーが発生しており、
クラス指定の不整合を修正して解決しました。
```
2024-10-29T14:28:36.494311+00:00 app[web.1]: [29-Oct-2024 14:28:36 UTC] [2024-10-29 14:28:36] production.ERROR: Class "App\Models\Checklist" not found {"userId":6,"exception":"[object] (Error(code: 0): Class \"App\\Models\\Checklist\" not found at /app/app/Http/Controllers/ChecklistController.php:25)
2024-10-29T14:28:36.494330+00:00 app[web.1]: [stacktrace]
2024-10-29T14:28:36.494397+00:00 app[web.1]: #0 /app/vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php(46): App\\Http\\Controllers\\ChecklistController->store()
2024-10-29T14:28:36.494477+00:00 app[web.1]: #1 /app/vendor/laravel/framework/src/Illuminate/Routing/Route.php(262): Illuminate\\Routing\\ControllerDispatcher->dispatch()
2024-10-29T14:28:36.494551+00:00 app[web.1]: #2 /app/vendor/laravel/framework/src/Illuminate/Routing/Route.php(208): Illuminate\\Routing\\Route->runController()
2024-10-29T14:28:36.494620+00:00 app[web.1]: #3 /app/vendor/laravel/framework/src/Illuminate/Routing/Router.php(808): Illuminate\\Routing\\Route->run()
2024-10-29T14:28:36.494705+00:00 app[web.1]: #4 /app/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(144): Illuminate\\Routing\\Router->Illuminate\\Routing\\{closure}()
2024-10-29T14:28:36.494778+00:00 app[web.1]: #5 /app/app/Http/Middleware/ForceHttps.php(21): Illuminate\\Pipeline\\Pipeline->Illuminate\\Pipeline\\{closure}()
```

### 参考
開発環境と本番環境でauto loaderの仕様が違うことは公式ドキュメントの下記部分に記載されていました。

https://laravel.com/docs/10.x/deployment#autoloader-optimization
【自分用メモ】GitHub DeskTop ローカルリポジトリをリモートにアップロードする方法

## アップロード方法

①ローカルリポジトリを作成（このとき作成しなくても、「Local Path」指定時に新規フォルダ作成から作ってもOK）

②GitHub DeskTopを起動し、「Create New Repository」を選択

![スクリーンショット 2024-11-03 0.01.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3876039/0bf7ad09-27ac-4062-e64e-1060999365a5.png)

③「Name」、「Local Path」を指定し、「Create Repository」を選択

![スクリーンショット 2024-11-02 23.55.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3876039/fabb7886-8e6c-ffb7-c7bc-6497d3f3be7e.png)
【Ruby】ヒアドキュメントについて勉強しました

どうもこんにちは。

今回は、Rubyのヒアドキュメントについて勉強をしたので、備忘録として残します。

# ヒアドキュメントとは

ヒアドキュメントは、複数行にわたる文字列を簡単に扱うための構文です。

# 基本的な構文

```rb
文字列 = <<識別子
ここに複数行のテキストを記述します。
任意の行数だけ続けられます。
識別子
```

ヒアドキュメントで必要とするのは、**識別子**です。識別子は、どんな単語を使用しても大丈夫です。ただし、最初と最後の識別子が同じである必要があります。

```rb:サンプルコード
message = <<END
こんにちは！
これはヒアドキュメントの例です。
複数行にわたるテキストを簡単に扱えます。
END

puts message

---

#=> こんにちは！
#=> これはヒアドキュメントの例です。
#=> 複数行にわたるテキストを簡単に扱えます。
```

# 変数展開や改行コードの扱い

変数展開や改行コードを使用する場合と使用しない場合で、使い分けが可能です。

## 使用する場合

まず、デフォルトの構文では変数展開や改行コードの使用が可能です。

```rb
name = "太郎"
message = <<END
こんにちは、#{name}さん！
今日は良い天気ですね。
END

puts message

#=> こんにちは、太郎さん！
#=> 今日は良い天気ですね。
```

また、通常の文字列と同様で、識別子を`""`で括った場合も変数展開や改行コードの使用が可能です。（デフォルトでいいなら使わんですな）

## 使用しない場合

識別子を`''`で括った場合、変数展開や改行コードの使用ができなくなります。

```rb
name = "太郎"
message = <<'END'
こんにちは、#{name}さん！
今日は良い天気ですね。\n
END

puts message

#=> こんにちは、#{name}さん！
#=> 今日は良い天気ですね。\n
```

# ヒアドキュメントのインデントについて

デフォルトの構文では、以下のようにインデントを含めた状態で出力がされます。

```rb
def example
  message = <<-END
    これはインデントされたヒアドキュメントの例です。
    メソッド内でインデントしても問題ありません。
  END
  puts message
end

example

#=>     これはインデントされたヒアドキュメントの例です。
#=>     メソッド内でインデントしても問題ありません。
```

インデントを含めない状態で出力したい場合は、`<<~`を使うことで、ヒアドキュメント内の共通のインデントを自動的に削除できます。

```rb
def example
  message = <<~END
    これは自動的にインデントが削除されます。
    コードの見た目を損なわずに複数行の文字列を記述できます。
  END
  puts message
end

example

#=> これは自動的にインデントが削除されます。
#=> コードの見た目を損なわずに複数行の文字列を記述できます。
```

# まとめ

Railsアプリケーションで、ERBでロジックを組んでビューをレンダリングするより、コントローラとかでヒアドキュメントを使ってHTMLを生成した方が速いのかなとか思ったりしました。が、ERBにはキャッシュ機構なるものが存在しているようなので、素直にERBを使用した方が良いかもしれませんね。

また、先日のKaigi on Railsで`ViewComponent`を使用する方法についても学ぶことができたので、どこかで試したいです。

以上
Nuxtjsでビルド時に生成される静的コードの種類、7選

Nuxtにおける「ビルド時に生成される静的コード」の中には、アプリケーションの構造や内容がビルドプロセスで確定し、実行時には変更されないような処理や機能が含まれます。これらは、パフォーマンスを最適化したり、アプリケーションを安定化させたりするためにビルド時に確定されるものです。具体的には、以下のような処理や機能が該当します：

1. **静的ルーティング**
   Nuxtでは、`pages`ディレクトリにファイルを配置すると、ビルド時にそれを元に自動的にルーティングが生成されます。このルーティング情報はビルド時に確定され、ランタイムに変更することはできません（ただし、動的ルーティングや動的生成を使って変化させることは可能）。
2. **静的なアセットの最適化**
   CSSやJavaScript、画像などの静的なアセットはビルド時に圧縮・最適化され、バンドルに含まれます。これにより、ランタイムにおいてパフォーマンスを向上させ、ユーザーに対する読み込み時間を短縮する効果があります。
3. **コードスプリッティング**
   Nuxtはビルド時に自動的にコードスプリッティング（コード分割）を行い、各ページに必要なリソースだけがバンドルされるように最適化します。これにより、特定のページにアクセスしたときにだけ必要なコードがロードされるため、初期ロードのパフォーマンスが向上します。
4. **コンポーネントのトランスパイル**
   Vueコンポーネント（`.vue`ファイル）やJavaScriptファイルは、ビルド時にトランスパイルされ、ブラウザで実行可能なJavaScriptコードに変換されます。これにより、ランタイムでは変換済みのコードが実行され、ブラウザの対応状況を意識せずに新しい構文が利用可能になります。
5. **サーバーサイドの静的コンテンツ生成（SSG）**
   Nuxtの`nuxt generate`を使って静的サイトを生成する場合、各ページがビルド時に静的なHTMLとして生成されます。これにより、ビルド時に生成された静的HTMLが配信されるため、ユーザーのリクエストに応じてページがサーバーでレンダリングされる必要がなく、ランタイムパフォーマンスが大幅に向上します。
6. **Vuexストアの初期設定**
   ストアの初期状態やモジュール構成などもビルド時に決定されます。特定のグローバルな設定や初期データをビルド時に確定し、ランタイムでの変更が不要な部分を固定します。
7. **環境変数（build-time環境変数）**
   Nuxtでは、`.env`ファイルや`nuxt.config.js`で設定された環境変数のうち、`publicRuntimeConfig`に含まれないものはビルド時に固定されます。例えば、APIのエンドポイントがビルド時に確定される場合、ランタイムにおいて変更できない値として扱われます。

これらの静的な要素は、アプリケーションのビルドプロセスで確定されるため、実行時にパフォーマンスが向上し、またユーザーに安定したコンテンツを提供できるメリットがあります。