OmniAICreator/Qiita-1.07M huggingface dataset:
Lightning Web Component Troubleshooting



https://trailhead.salesforce.com/content/learn/modules/lwc-troubleshooting

+ [Lightning Web Component Troubleshooting CORB issue, page won't load](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007ifmT3)

:::note alert
Sorry to interrupt, We can't load the page. Please click Refresh
:::

:::note
I don't have any control over the link formatting, it's a resource within Salesforce. This also occurred in my work development sandbox, and Support have advised this solution.

https://issues.salesforce.com/issue/a028c00000gAxojAAC/error-while-login-into-sandboxproduction-we-cant-load-the-page-please-click-refresh

サンドボックス/本番環境へのログイン中にエラーが発生しました。「ページを読み込めません。更新をクリックしてください。」

+ 組織のセッション設定で「Lightning コンポーネント フレームワークのコンテンツ配信ネットワーク (CDN) を有効にする」を無効にします。
+ 設定 --> セッション設定 -->「Lightning コンポーネント フレームワークのコンテンツ配信ネットワーク (CDN) を有効にする」を無効にして、保存します。

:::
IBM i の最大値・上限値、制限値へのリンク

掲題の通りです。

※順次追記していきたいと思います。

## 1.[IBM i 7.5 最大処理能力](https://www.ibm.com/docs/ja/i/7.5?topic=availability-maximum-capacities)
以下の2.以降の全体目次ページです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/4279fe06-793d-8818-2e37-3a2917e55754.png)

※ IBM i 7.6版はこちら
https://www.ibm.com/docs/ja/i/7.6.0?topic=availability-maximum-capacities

## 2.[SQL の制約(IBM i 7.5)](https://www.ibm.com/docs/ja/i/7.5?topic=reference-sql-limits)

SQLに関連する文字列長やデータ長、その他の上限値が記載されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/d338e350-6f15-0997-a092-d05f500fb3c1.png)

## 3.[IBM i 7.5 データベースファイルのサイズ](https://www.ibm.com/docs/ja/i/7.5?topic=concepts-database-file-sizes)
Db2 for i の制限値です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/c8d7d78e-5bef-c040-ea37-3e2ff940b20b.png)

## 4.[IBM i 7.5 その他の制限値](https://www.ibm.com/docs/ja/i/7.5?topic=capacities-miscellaneous-limits)

基本ディスク・プールの数、ユーザー領域のサイズ、メッセージ・キューのサイズなどの制限値です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/a0ad77ee-6d48-9b6f-1c17-bdb573fc107b.png)

※今回調査したのは、仮想F/C1つあたりの最大ディスク数でした。（16Gb F/Cの場合は127個）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/9759a513-4129-fc16-9efd-8b65ce65a98c.png)
IBM i Services Directory : QSYS2.User_Storage ビュー　ユーザーID毎の権限関連使用量をかえす

ユーザー・プロファイル毎の様々な権限設定についてのストレージ使用量を返します。

## 概要
■表名：QSYS2.USER_STORAGE
■カテゴリ：ストレージサービス
■サポート：IBM i 7.2 base
■参照URL（IBM i 7.5）：https://www.ibm.com/docs/ja/i/7.5?topic=services-user-storage-view

## 使用例

ユーザー・プロファイル GOMA が使用しているストレージ情報を返します。
```
SELECT * FROM QSYS2.USER_STORAGE
  WHERE USER_NAME = 'GOMA';
```

実行例です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/ccc5feaf-01f4-b7e7-7fbc-4de830b4bfc0.png)

***3つめのMAXIMUM_STORAGE_ALLOWEDはユーザープロファイルに下記のMAXSTGパラメーターで値が指定されていない場合、 - (ヌル）が返されます。***
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/875a8d50-9096-ba22-d3d8-41a37d06235d.png)

ちなみにMAXSTG(2000) (2GB)を指定したユーザーを見てみると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/b67e312e-82a4-afa0-66f1-04e800553610.png)

上記のようにMAXIMUM_STORAGE_ALLOWEDが2000KB = 2GB と返されました。
こちらのシステムはIBM i 7.4なのですが、PTFレベルが低いようで返されるカラムが上記4つだけです。

つづけてみていきます、、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/2c56e508-e193-56b0-b532-464e399396d4.png)

Available Profile Entries はASPごとのユーザープロファイルで、オブジェクトの権限関連を追加できる項目数、Total Profile Entries は現在使用済みの権限関連の項目数です。
この合計数は200,000,000になります。つまりユーザー・プロファイル毎の1つのASP上でオブジェクト関連の権限設定最大数は2億個、という事になります。（…のはずです、調べたのですがすぐ見つからず・・後で調べて裏取りしたいと思います。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/e1acf048-361c-4db8-643f-36e7b746ac6b.png)

***Owner_Entriesはこのユーザーが所有者のオブジェクト数です。***
Kinesis Data Streamsと Kinesis Firehose の違い

## はじめに
AWS認定試験の勉強をしていて、「Kinesis Data Firehose」「Kinesis Data Streams」の違いが明確にわからなくて、問題の回答を導き出すのに「苦労していた。または、苦労している。」経験はありませんか？認定試験では、違いについて理解し、用途や要件に応じて使い分けられるようになる必要があります。今回は、違いがわかるように整理してみました。

## １. データ処理速度を優先するか？コストを重視するか？

**Amazon Kinesis Data Firehose**
・データをバッファリングしてから一定量ごとにまとめて処理するため、処理速度は比較的遅いですが、コストを抑えることができます。
・バッファリング時間を調整することで、処理速度とコストのバランスを調整できます。
**Amazon Kinesis Data Streams**
・データを逐次処理するため、処理速度は速いですが、コストが高くなります。
・リアルタイム性の高いデータ処理が必要な場合に適しています。


## 2. ユースケース


- **Kinesis Data Firehose** 
簡単なセットアップでデータをターゲットに配信する場合に最適。

    * 大量かつ様々な種類のデータを収集し、データレイクや分析保管場所へロードするのに適しています。
    * センサーデータ、ログデータ、Webサイトトラフィックデータなど、幅広いデータソースからデータを収集できます。
    * データ変換やフィルタリングなどの前処理機能が充実しており、収集したデータをそのまま保存するだけでなく、分析用に加工してから保存することもできます。

ストリーミングデータを収集・変換し、サポートされている AWS サービスやサードパーティサービスなど分析用のデータストアに配信できるフルマネージドサービス です。データ量の増減に合わせて自動でスケールするため、ユーザーが冗長構成などを考える必要はありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920213/a22d3d25-8be2-db6a-5178-175776c04dd3.png)

https://dev.classmethod.jp/articles/introduction-2024-amazon-data-firehose/ より引用

- **Kinesis Data Streams** 
高いスループットと低レイテンシが求められるリアルタイム処理に最適。
    * マイクロ秒単位の低遅延でデータ処理が必要なアプリケーションに適しています。
    * IoT機器やリアルタイム分析システムなど、リアルタイム性の高いデータ処理が必要なユースケースに最適です。
    * データストリームを複数のコンシューマーに分散配信することができ、スケーラビリティと可用性に優れています。

![11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920213/d4854da9-392c-9d35-f5df-cc101c9eaf74.png)

https://pages.awscloud.com/rs/112-TZM-766/images/AWS-Black-Belt_2023_AmazonKinesisDataStreams_0430_v1.pdf より引用

:::note info
#### 試験でよく問われるのは、送信先です。S3をKinesis Data Firehoseの送信先にすることが出来ますが、S3をKinesis Data Streamsの送信先にする事は出来ません。この図を見てみると、S3が配信先にありませんよね？
:::

## 4. Kinesis Data Streamsと Kinesis Firehose の違い

| 特徴/機能 | Kinesis Data Streams | Kinesis Firehose |
|---|---|---|
| 主な目的 | リアルタイムデータストリームの収集と**加工** | リアルタイムデータの収集とデータストアへの転送 |
| スケーラビリティ | 手動でスケールアップ/ダウンが必要 | 自動スケーリング |
| リアルタイム処理 | 高度なリアルタイムのデータ加工に対応 | 即時データ転送に焦点 |
| 管理とスケーリング | ・データはシャードと呼ばれる単位で分割され、各シャードは独立してスケーリング出来る<br>・手動でシャードを追加/削除する必要がある | ・フルマネージドで自動スケーリング<br>・インフラストラクチャの管理が不要 |
| **データの送信先** | Lambda、Kinesis Firehose、Kinesis Data Analyticsなど | **S3**、Redshift、Elasticsearch Service、Splunkといったデータストアサービス |
| データ加工 | 高度なカスタム処理やフィルタリングが可能 | 限定された単純なデータ変換のみ可能（例: **JSONからParquetに変換**） |
| **データ変換** | **データ変換機能は限られている** | **データ変換やフィルタリングなどの前処理機能が充実** |
| **処理速度** | **ミリ秒からマイクロ秒単位** | **秒単位** |
| **コスト** | **処理時間に基づく** | **データ転送量に基づく** |
| データ保持 | データは最大7日間保持され、複数のコンシューマが同じデータを処理可能 | データはバッファリング後にターゲットに送信され、保持期間は短い |
| 利用シナリオ | 複雑なリアルタイムデータの分析、複数の消費者への配信 | 単純なリアルタイムデータの転送と保存、データの直接的なストレージへのロード |
| データソース | カスタムクライアントライブラリが必要 | 数百種類以上のデータソースに対応 |

### 試験勉強や、実務での使い分けの参考にして頂けましたら、幸いです。
検索付きの一覧を作成する

## 初めに

もともと私はC#、Python、PHP等のサーバ側寄りのエンジニアでした。
フロントエンドの経験は少なく、設計のために何を使えば何ができるのか勉強していた程度です。
Outsystemsを使うにあたって、バックエンドしかできない！というわけにもいかなくなってきたので慌てて勉強しております。
よくある初歩的なUIをどのように実装するかを少しずつ備忘的にまとめていこうかと思っています。


## 記事の対象
Outsystemsを触り始めた方。

## この記事のゴール
会社一覧に検索機能を追加する。

## 環境
OutSystems Service Studio 11
Reactive Web App

## 使用するEntity
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3796185/ac9f6a67-6c98-809f-e7ae-e101fa106618.png)

## 元にする画面
Screenに上記のEntityをドラッグドロップすることで一覧をお手軽に作成することができる。
これは上記のCompanyを画面にドロップして表示しない項目のチェックを外して作成したテーブル。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3796185/c981d6df-c348-3e74-8266-bb5958693add.png)

## 検索を実装する

### テキストインプットと検索ボタンを配置する
Screenに検索文字列を保持するローカル変数「FilterText」を追加する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3796185/cf6de668-787a-2220-cd00-66c93750ebdd.png)

### テキストインプットと検索ボタンを配置する
テーブルの上部にInputとButtonを配置する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3796185/73cdd828-59e2-5958-be4b-347cf3175abb.png)

InputのVariableに作成したローカル変数（FilterText）を設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3796185/4f32aa5b-8e07-f17b-ad59-1ab9d488f857.png)

### Aggregateにフィルタを追加する
Tableを配置する際に作られたGetCompaniesにフィルタを追加する。
ここでは会社名、郵便番号、電話番号、Eメールアドレス、備考、担当者を検索対象として追加する。
検索の対象としたい項目に[Index関数](https://success.outsystems.com/ja-jp/documentation/11/reference/outsystems_language/logic/built_in_functions/text/#Index)を使ってローカル変数「FilterText」で検索を追加する。
さらに、検索文字列が「空」の場合の条件を追加し、検索文字列を入力していない場合に全件取得できるようにする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3796185/c0346676-36cb-704a-14ec-719c8d2d88b5.png)

### フィルタの実行
検索ボタンのOnClickイベントにNewClientActionを割り当て、Actionを作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3796185/a60232a3-c918-83ab-a9e3-096f91017a45.png)

ScreenのGetCompaniesをアクションに配置する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3796185/dab43821-f4d8-3d8c-0804-c78eea9606af.png)

## 動作を確認する
初期表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3796185/c608f115-25d6-b353-6211-f35deee1c327.png)

「株式会社」で検索
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3796185/8e2ba2a9-af4c-3385-9478-8e7144c54f3f.png)

「守谷」で検索
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3796185/274d85d8-d4c8-bad7-3976-c55f24040b87.png)


## 感想

たったこれだけの作業で、

- 検索時にローディング
- 検索結果が０件の場合の表示

がしっかり実装された状態で検索が実装できます。

昔ReactUIを少し触った時も難しい部品を作るのが簡単になったんだなぁ！と感心しましたが覚えることがとても多かったと思います。
Outsystemsは本当に簡単にお決まりの実装ができるのでびっくりです。
AWS EC2の生成されたインスタンスを型として保存する



## はじめに
AWS EC2の生成されたインスタンスを型として保存しておいくことの備忘録。

## 🦁<INS>**結論**</INS>🦁
EC2は一度作成したインスタンスを「型」のように保存でき
同じような環境をすぐに作成することができる。

:::note info
押さえておくべき点
* AMI（Amazon Machine Image）はインスタンスにある「PCの構成」「ストレージの内容」をコピーして、そのまま再利用できるようにするための「型」のようなもの
* テンプレートは「PCの構成」のみをコピーして再利用できるようにするための「型」のようなもの。
* 「同様のものを起動」は型を定義せず、そのまま再利用してしまうこと
:::  
***

:::note alert
注意点
*  同じものを2つと稼働させる場合にはコストがかかってしまうリスクが上がる。
:::  

## <INS>**手順一覧**</INS>
【前提】
AWSのアカウント作成からインスタンスの起動、停止などを理解されてる方
https://qiita.com/nyanyacyan/items/83e87c7d0351b1da9d14


## <INS>**選択画面へ移動**</INS>
左側メニューから「インスタンス」を選択

「アクション」をクリック

「イメージとテンプレート」をクリック

「イメージを作成」
「インスタンスからテンプレートを作成」
「同様のものを起動」

が選べる




## <INS>**イメージを作成**</INS>
AMI（Amazon Machine Image）はインスタンスにある「PCの構成」「ストレージの内容」をコピーして
そのまま再利用できるようにするための「型」のようなもの。

イメージ名と説明を入力する

「イメージを作成」をクリック



これでいつでもボリュームも含めて同じものを作成できる（作成時にIAMなどの設定は必要）



## <INS>**インスタンスからテンプレートを作成**</INS>
テンプレートは「PCの構成」のみをコピーして再利用できるようにするための「型」のようなもの。

テンプレート名と説明を入力

アプリケーションおよびイメージは自己所有しているAMIなどを選択

必要であればキーペアを設定
※インスタンス作成時に設定することもできる



## <INS>**同様のものを起動**</INS>
AMIなどの設定などをせず、そのままコピーしてしまい、設定を飛ばして同じインスタンスを作成する。

インスタンス名と説明の入力

設定の確認


## まとめ✍️
インスタンスを作成で終わりではなく、バックアップまでして終了だと思う。
消してしまったりなどあってもこれで大丈夫。

また次に使う時にも便利。
python勉強記録②


python勉強記録①で取得したデーターをCSVへ出力し、Streamlitで可視化する。



```python:chart.py

import streamlit as st
import pandas as pd

# CSVファイルの読み込み
df = pd.read_csv('out.csv')

# タイムスタンプをdatetime型に変換
df['timestamp'] = pd.to_datetime(df['timestamp'])

# スライダーで期間を指定
start_date, end_date = st.slider(
    "期間を選択してください",
    min_value=df['timestamp'].min().to_pydatetime(),
    max_value=df['timestamp'].max().to_pydatetime(),
    value=(df['timestamp'].min().to_pydatetime(), df['timestamp'].max().to_pydatetime()),format="MM-DD HH:mm"
)

# 指定した期間のデータをフィルタリング
filtered_df = df[(df['timestamp'] >= start_date) & (df['timestamp'] <= end_date)]

# タイトルの表示
st.title('CSVデータのグラフ化')

# データフレームの表示
st.write(filtered_df)

# タイムスタンプのフォーマットを24時間表記に設定
filtered_df['timestamp'] = filtered_df['timestamp'].dt.strftime('%H:%M')

# グラフの作成
st.line_chart(filtered_df.set_index('timestamp')[['usage_percent', 'memory_usage']])

```

以下のように表示され、スライダーで参照したい期間を任意にしていすることができます。

![使用率グラフ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3014502/71699f3d-bb30-e7b0-a7d4-dd059542cb3d.jpeg)


取り込んだCSVのsampleは以下です。（一部のみ）
```text:out.csv
id,timestamp,usage_percent,memory_usage
1,2024-06-28 17:28:20.000000,5.1,83.1
2,2024-06-28 17:29:21.000000,1.6,85
3,2024-06-28 17:30:22.000000,8.5,84.7
4,2024-06-28 17:31:23.000000,2.7,84.4
5,2024-06-28 17:32:24.000000,4.9,84.5
6,2024-06-28 17:33:25.000000,2.2,84.9
7,2024-06-28 17:34:26.000000,2.1,85
8,2024-06-28 17:35:27.000000,1,85
9,2024-06-28 17:36:28.000000,3.1,84.8
10,2024-06-28 17:37:29.000000,3.1,84.6
11,2024-06-28 17:38:30.000000,2.7,82.3

```
Kotlin で Welcome to AtCoder を解いてみた

[Qiita Engineer Festa 2024（キータ・エンジニア・フェスタ 2024） - Qiita](https://qiita.com/official-campaigns/engineer-festa/2024)
において、約1ヶ月で38記事という大量の記事の投稿を要求されることがわかった。
そこで、あまりコストをかけずに記事数を稼ぐ方法を考えた結果、「Welcome to AtCoder を様々な言語で解く」ことを思いついた。
単に解くだけでなく、使用する言語仕様の解説を入れれば、記事として一応成立するだろう。

# Welcome to AtCoder

[PracticeA - Welcome to AtCoder](https://atcoder.jp/contests/abs/tasks/practice_1)

Welcome to AtCoder では、以下の形式で整数 $a$, $b$, $c$ および文字列 $s$ が入力として与えられる。

```text
a
b c
s
```

この入力をもとに、与えられた整数の和 $sum = a + b + c$ および文字列 $s$ を、以下の形式で出力することが求められる。

```text
sum s
```

# 今回用いた Kotlin の機能

## エントリポイント

[Program entry point](https://kotlinlang.org/docs/basic-syntax.html#program-entry-point)

処理系が呼び出してプログラムを実行するための関数として、以下のような `main` 関数を定義する。

```kotlin
fun main() {
    // 処理内容
}
```

## 変数の宣言

[Variables](https://kotlinlang.org/docs/basic-syntax.html#variables)

以下のようにすることで、再代入が**できない**変数を宣言できる。

```kotlin
val 変数名 = 初期値
```

以下のようにすることで、再代入が**できる**変数を宣言できる。

```kotlin
var 変数名 = 初期値
```

変数の型は、初期値の型から推論される。
型を明示することもできるが、今回は使用しなかったので省略する。

## 数値の加算

[Basic types | Kotlin Documentation](https://kotlinlang.org/docs/kotlin-tour-basic-types.html)

以下のようにすることで、変数の値に「足す値」を加算し、その和をその変数に代入できる。

```kotlin
変数名 += 足す値
```

## リストの走査

[Control flow | Kotlin Documentation](https://kotlinlang.org/docs/kotlin-tour-control-flow.html#for)

以下のようにすることで、「リスト」の要素を前から順に変数に代入し、処理を行うことができる。

```kotlin
for (変数名 in リスト) {
    // 処理内容
}
```

## 文字列の処理

[Basic types | Kotlin Documentation](https://kotlinlang.org/docs/kotlin-tour-basic-types.html)
[String templates](https://kotlinlang.org/docs/basic-syntax.html#string-templates)
[kotlin.text - Kotlin Programming Language](https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.text/)

文字は `''` で囲むことで表し、文字列は `""` で囲むことで表すことができる。
文字列内に `$` に続いて変数名を書くことで、その変数の値を文字列に埋め込むことができる。

[`文字列.split(区切り)`](https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.text/split.html) により、「文字列」を「区切り」で区切った文字列のリストを得ることができる。

[`文字列.toInt()`](https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.text/to-int.html) により、「文字列」をそれが表す整数に変換できる。

## 標準入出力

[Print to the standard output](https://kotlinlang.org/docs/basic-syntax.html#print-to-the-standard-output)
[Read from the standard input﻿](https://kotlinlang.org/docs/basic-syntax.html#read-from-the-standard-input)

以下のようにすることで、「値」を標準出力に出力し、さらに改行を出力できる。

```kotlin
println(値)
```

以下のようにすることで、標準入力から1行読み込み、結果を文字列として得ることができる。
結果の文字列は改行文字を含まない。

```kotlin
readln()
```

# 提出コード

```kotlin
fun main() {
    val line1 = readln()
    val line2 = readln()
    val line3 = readln()
    var sum = line1.toInt()
    for (part in line2.split(' ')) {
        sum += part.toInt()
    }
    println("$sum $line3")
}
```

[提出 #55188261 - AtCoder Beginners Selection](https://atcoder.jp/contests/abs/submissions/55188261)
【Laravel11】スクレイピングを定期的に実行する

# はじめに

こんにちは、エンジニアのkeitaMaxです。

前回の記事でスクレイピングすることができました。

前回の記事

https://qiita.com/keitaMax/items/0b433c7037dad0eda733

今回はスクレイピングを定期的に実行できるようにしたいと思います。

# スケジューリング作成

`src/app/routes`フォルダの`console.php`ファイルに以下の記述をします。

```
Schedule::command('roach:run Laraveldocsspider')->everyFiveSeconds();
```

# 確認

以下コマンドで確認します。

```
php artisan schedule:list
```

```
root@1460808f039b:/app# php artisan schedule:list

  0 * * * *     php artisan inspire ........................................................................ Next Due: 43 minutes from now
  * * * * * 5s  php artisan roach:run Laraveldocsspider ..................................................... Next Due: 2 seconds from now

root@1460808f039b:/app# 
```

しっかりと５秒ごとに実行されるようにcronに記述されていることがわかります。


>通常、ローカル開発マシンにスケジューラの cron エントリを追加することはありません。代わりに、Artisan コマンドを使用できますschedule:work。このコマンドはフォアグラウンドで実行され、コマンドを終了するまで 1 分ごとにスケジューラを呼び出します。
(引用:https://laravel.com/docs/11.x/scheduling)

スケジューラをローカルで実行するには以下コマンドを実行するとできます。

```
php artisan schedule:work
```

実行されるとlaravel.logに吐き出されるので以下コマンドで実行されているかを確認します。

```
tail -f storage/logs/laravel.log
```

実行してから数秒経つと以下のように出力されます。

```
[2024-07-03 08:21:00] local.INFO: Run starting  
[2024-07-03 08:21:00] local.INFO: Dispatching request {"uri":"https://roach-php.dev/docs/spiders"} 
[2024-07-03 08:21:01] local.INFO: Item scraped {"title":"Spiders","subtitle":"Basic Concepts"} 
[2024-07-03 08:21:01] local.INFO: Run statistics {"duration":"00:00:00","requests.sent":1,"requests.dropped":0,"items.scraped":1,"items.dropped":0} 
[2024-07-03 08:21:01] local.INFO: Run finished  
[2024-07-03 08:21:05] local.INFO: Run starting  
[2024-07-03 08:21:05] local.INFO: Dispatching request {"uri":"https://roach-php.dev/docs/spiders"} 
[2024-07-03 08:21:06] local.INFO: Item scraped {"title":"Spiders","subtitle":"Basic Concepts"} 
[2024-07-03 08:21:06] local.INFO: Run statistics {"duration":"00:00:00","requests.sent":1,"requests.dropped":0,"items.scraped":1,"items.dropped":0} 
```

これで５秒に一回実行されているのを確認できました。

# おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

# 参考

https://qiita.com/keitaMax/items/0b433c7037dad0eda733

https://laravel.com/docs/11.x/scheduling
【HTML】属性まとめ

## はじめに

バックエンドを開発している時に、ふと気になったので調べてみる！
inputタグとかつける属性多くて、、、
後で見返す用にもなると便利！

## 当記事の対象
- 初心者の中でもHTMLをちょっとでもやったことある人。
- HTMLのタグをある程度理解している人。

## HTMLの属性とは？
> タグに対する追加設定です。
> htmlタグは単体ではなく属性とその値とセットで使うことがあります。
> 「値」はその具体的な指定内容です。  
[文章引用](https://csshtml.work/attributes-values/)

```HTML:例
<h1 class="top" id="title"></h1>
```
上記の場合、`class`と`id`が**属性**となり、`top`と`title`が**値**になる。

**ルール**
1.初めにhtmlタグを指定する
2.属性の前に半角スペースをいれる
3.属性と値は「=」イコールで結ぶ
4.値は「"」ダブルクオートで囲う
5.違う属性であれば複数指定可能（順不同）
6.htmlごとに指定できる属性が決められている
7.属性ごとに指定できる値が決められている

### すべてのHTMLタグで使える！
- **id** 
    - cssやjsを指定するための名前。任意の値。
- **class** 
    - cssやjsを指定するための名前。任意の値。
- **style** 
    - cssを直接指定。cssの値。
- **translate** 
    - コンテンツを翻訳するのを防ぐ。値は``no``を指定。
- **hidden** 
    - 要素の非表示。値なし可。

#### aタグ

- **href** 
    - リンク先のURLを指定。
- **target** 
    - ``_brank``を指定。別タブで開く。

#### imgタグ

- **src** 
    - 画像の表示。画像ファイルのURLを指定。
- **alt** 
    - 画像の説明。任意。
- **width** 
    - 画像の幅。
- **height** 
    - 画像の高さ。

#### tableタグ
- **border** 
    - テーブルの線を示す

#### td、thタグ
- **colspan** 
    - 横結合。

- **rowspan** 
    - 縦結合。

#### inputタグ
- **type** 
    - 入力の形式などを指定できる。値の種類が多く、今回は省略。ex.``text``、``radio``、``checkbox``、``submit``
- **name** 
    - 項目グループに名前をつける。任意の値。
- **value** 
    - 入力内容を全角で送る。
- **placeholder** 
    - 入力欄に文字を表示
- **required** 
    - 入力必須にする。値なし可。
- **readonly** 
    - 入力不可。読み専用。値なし可。
- **multiple** 
    - 複数の値を入力できる。
- **accept** 
    - アップロードできるファイルの拡張子を指定。
- **autofocus** 
    - ページのロード時にフォーカスを当てる。値なし可。
- **inputmode** 
    - ユーザーが入力するデータの種類を示唆。スマホ向け。値は``email``、``url``、``numeric``

#### labelタグ
- **for** 
    - inputタグと結びつける

#### formタグ
- **action** 
    - 送信先ファイルのパスを指定。
- **method** 
    - 送信方法を指定。ex.``GET``、``POST``

#### その他タグ
- **disabled** 
    - ``form``タグ内の要素タグで使用
        - 入力要素を無効にする。
- **selected** 
    - ``option``タグ内で使用
        - 初期選択状態にする。値なし可。


## 参考資料
https://csshtml.work/attributes-values/  

https://coliss.com/articles/build-websites/operation/work/10-useful-html5-features.html

https://coliss.com/articles/build-websites/operation/html-attributes-you-may-want-to-use.html

https://note.com/eguweb/n/na9f7a048e73c


### まとめ
他にもタグに対する属性はあります。
（多くて大変ですよね・・・）
私が使用してきた中で良く使うものや、調べていて便利そうだな～というのをまとめました。
バックエンドで制限していたものをHTMLでも制限できるのはいいですよね。
今後のアップデートに期待です！！
IBM i Services Directory : QSYS2.SysDiskStat() 表関数　HDD, SSD,NVMe情報を返す、統計情報リセット可

返すカラム（値）は[QSYS2.SysDiskStatビュー](https://qiita.com/gomAnomalocaris/items/4006cffb7acdd07781ca) と同一です。相違点はストレージへのI/O回数などの統計情報をリセットするパラメーターが追加されている点です。
5250でWRKSYSSTSコマンド等を実行した際のPF10キーと同様なパラメーターです。

## 概要
■表関数名：QSYS2.SYSDISKSTAT()
■カテゴリ：ストレージサービス
■サポート：IBM i 7.3 SF99703 Level 22 Enhanced: SF99703 Level 24以降
■参照URL（IBM i 7.5）：https://www.ibm.com/docs/ja/i/7.5?topic=services-sysdiskstat-table-function

## 使用例

統計情報のリセット有無を指定するRESET_STATISTICSパラメーターが増えています。

```
SELECT * FROM TABLE(QSYS2.SYSDISKSTAT(RESET_STATISTICS=>'YES'));
```

### 実行例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/1bc1085a-f1b4-39cf-b3b3-acb2b4588939.png)

***上記は統計情報をリセットした実行例です。ELAPSED_TIMEが0になっており、実行時点での各種I/O回数が画像の向かって左側に表示されますが、経過時間中の各種I/O回数は画像右側のように - で表示されます。***

次に、統計情報をリセットせず実行してみます。

```
SELECT * FROM TABLE(QSYS2.SYSDISKSTAT(RESET_STATISTICS=>'NO'));
```

ところで、***IBM i サービス全般の注意点ですが、パラメーターの大文字小文字は厳密に指定が必要です。上記の例では必ず大文字で YES / NO と入力します。***
***Yes / No / yes / no 等はすべてエラーになりますのでご注意ください。***

実行結果は下図のようにELAPSED_TIMEに経過時間が表示され、そのインターバル間の統計情報が画像右側に表示されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/97d7c579-71cc-efc7-3409-76cb40d46452.png)


p.s
表のSysDIskStatはIBM i 7.2ベースで追加されました。その後、この表関数がIBM i 7.3で追加されています。地味ですがちょっとずつ機能をあげている様子が伺えますね(^^
AIチャレンジ2024　シミュレータであそぼ！

# はじめに
AIchallenge2024の予選がすでに始まっていますが、皆さんは元気にお過ごしでしょうか。
本大会に使用されているシミュレータ環境はとても完成されていて、初めて見た時は感動しました。

そんなシミュレータ環境でリアルに運転してみたい！この気持ちが抑えられず、環境を構築してみたので紹介します。

# 目次
[1.G923ハンドルコントローラ](#1-g923ハンドルコントローラ)
[2.Ros2対応](#2-ros2対応)
[3.AWSIM対応](#3-awsim対応)
[4.実践](#4-実践)
[5.おわりに](#5-おわりに)

# 1. G923ハンドルコントローラ
私が所属している研究室にある[G923](https://www.amazon.co.jp/Logitech-TureForce-Feedback-Shifterロジテック-レーシングゲームハンドル/dp/B097GS2P6N/ref=asc_df_B097GS2P6N/?tag=jpgo-22&linkCode=df0&hvadid=529530894219&hvpos=&hvnetw=g&hvrand=17995862486969767018&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009415&hvtargid=pla-1343530236160&psc=1&mcid=04319854d555300bb67a39faef78a9e7)というハンドルコントローラを用いて、シミュレータに対応させることを目標にします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3673708/d4ab5c5e-5939-708e-3b56-05465c92f515.jpeg" width="300" height="300">

ubuntu22.04でこのコントローラを利用するには、oversteerというパッケージに加え、new-lg4ffというパッケージも必要になります。
[oversteer](https://github.com/berarma/oversteer.git)
[new-lg4ff](https://github.com/berarma/new-lg4ff.git)

oversteerのセットアップ
```shell
sudo apt install python3 python3-distutils python3-gi python3-gi-cairo python3-pyudev python3-xdg python3-evdev gettext meson appstream-util desktop-file-utils python3-matplotlib python3-scipy
#レポジトリのcloneとbuild
git clone https://github.com/berarma/oversteer.git
cd oversteer
meson setup build
cd build
ninja install

#再起動
sudo reboot
```
new-lg4ffのセットアップ
```shell
sudo apt-get install dkms
sudo git clone https://github.com/[project-repo] /usr/src/new-lg4ff
sudo dkms install /usr/src/new-lg4ff
sudo update-initramfs -u
```
２つのパッケージがインストールできたら、認識しているか確認します。
```shell
#evtestをインストール
sudo apt-get install evtest
#実行
evtest
```
evtestを実行したときに、G923の番号を確認してください。
# 2. Ros2対応
コントローラーinputをROS2のTopicとしてPublishするnodeを作成しました。細かなコードの紹介は省略します。下記のgithubのreadmeを参考にセットアップしました。
[g923-ros2-driver](https://github.com/Arata-Stu/g923_ros2_driver.git)

# 3. AWSIM対応
g923-ros2-driverから取得したコントローラ情報をAWSIMに反映させるnodeもまた作成しました。
[g923_converter](https://github.com/Arata-Stu/g923_converter.git)

簡単に説明すると、AckermannControlCommandというタイプのメッセージに対して、driverのaccelとsteerを渡しています。また、シフトレバーの入力も反映しており、AWSIMのモード切り替え(Autonomous, Manual)もできるようになっています。
注意点として、launchの際に、evtestで確認した番号を使います。(eventXをevent1などに置き換える)
```shell
ros2 launch converter.launch.xml device_path:=/dev/input/eventX
#permissionの問題があった場合
sudo chmod 666 /dev/input/eventX
```

# 4. 実践
![IMG_5556.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3673708/b527ff75-b5ce-6d59-35af-7a7e9dc3c9ff.gif)
最高!!!
参考までに、自己ベストラップは42秒でした。

# 5. おわりに
自動運転とは関係ない要素かもしれないですが、楽しむことはできました。
研究室でタイムアタック対決をしても面白そう

こちらを利用して、教師データを取得し、モデルの学習を予定しています。
LeetCode挑戦日記：Day27

# はじめに

最近、業務で実装する時間よりも資料作成やレビューをする時間が多くなってきました。
このままでは自身のコーディング能力が落ちそうで怖いので、LeetCodeを始めてみました。

自身の学習の記録 & LeetCodeに興味のある人が挑戦しやすいように、記事に残していきます。
このような競技プログラミングをした経験がないので、ひよってEasyからやっていきます...

# [Easy] 933. Number of Recent Calls

`RecentCounter`クラスは、特定の時間枠内の最近のリクエスト数をカウントします。

`RecentCounter`クラスを実装してください：

* `RecentCounter()`
    * 概要
        * 最近のリクエスト数をゼロで初期化します
* `int ping(int t)`
    * 概要
        * 新しいリクエストを時間`t`で追加します
        * ここで、`t`はミリ秒単位の時間を表し、過去`3000`ミリ秒以内に発生したリクエストの数を返します（新しいリクエストを含む）
        * 具体的には、`[t - 3000, t]` の範囲内に発生したリクエストの数を返します

すべての`ping`の呼び出しで、前の呼び出しよりも大きい`t`の値を使用することが保証されています。

## 素直に解いてみる

### 考え方

1. `t`を保存する配列を用意する
1. `ping`がコールされたときに`t`を配列の後ろに追加する
1. 配列から`t-3000`より小さい値を配列の前から取り除く
1. 配列の長さをレスポンスする

### コーディング

```typescript
class RecentCounter {
    private requests: number[];

    constructor() {
        this.requests = [];
    }

    ping(t: number): number {
        this.requests.push(t);

        while (this.requests[0] < (t - 3000)) {
            this.requests.shift();
        }

        return this.requests.length;
    }
}
```

### 結果

Runtime：188ms
Beats 79.71%

Memory：61.22MB
Beats 92.27%
nginxでデプロイする際にstaticファイルが上手く表示されない

# 問題点
python manage.py collectstaticを実行後、作成されたstaticfileをnginxのconfファイルで

    location /media/ {
        alias /home/user/path/to/your/media/files/;
    }

という風に指定。
settings.pyでSTATIC_ROOTのpathも変更してるのになぜか表示されない。


# 原因
chatgptに聞いても解決せず、
linuxから
```
sudo tail -f /var/log/nginx/error.log
```

を実行しエラーログを見てみるとpermission deniedとの表示が。
 (/home/user/yourproject) とホームディレクトリを通してstaticfileのパスを指定していることが権限エラーの原因でした。

# 解決法
ホームディレクトリを通さずpathを指定するためlinuxコマンドで
```
sudo mv /home/user/path/to/your/staticfiles /var/www/staticfiles
```

に変更。
confファイルのstaticのlocation設定も変更することで解決しました。



結構詰まったので同じ初学者の助けになりますよう
ローカルからRenderにデプロイする際出やすいエラーについて

### はじめに
今回はローカルでrailsで環境構築した後、Renderにてデプロイする際によく起きるエラーと対処法を備忘録としてまとめてみます

## 事象
ローカル環境でrailsチュートリアルを学習中、1章で最初のデプロイをRenderにする際にエラーが発生

## エラー内容
```
`validate_platforms!': Your bundle only supports platforms ["x64-mingw-ucrt"]
 but your local platform is x86_64-linux. Add the current platform to the lockfile
 with (Bundler::ProductionError)
```

## 原因
bundlerが実行できるプラットフォームが制限されている。ローカルでRailsアプリを作成すると、bundlerが実行できるプラットフォームはRailsを実行した環境OSのみとなるらしい。今回はWindowsでbundle installしたためWindowsOSのみの環境になっている。そのためLinuxなど別のOSでbundlerを実行することが出来なくなっている

## 対処法
次のコマンドを打つ
```php:コマンドライン
bundle lock --add-platform x86_64-linux
```
Gemfile.lock内にプラットフォームが追加されたことを確認する

```php:Gemfile.lock
PLATFORMS
  x64-mingw-ucrt
  x86_64-linux
  ```

  ## 実行結果
  デプロイ成功 

  ## おわりに
  今回の対処法についてはRailsチュートリアル2章で出てきますが最初にデプロイする1章では解説されず戸惑う方もいそうなのでまとめてみました。原因に関しましてはエラー原因を独自に調査した結果独自の解釈をまとめてみました。もし違うよというご意見ありましたら教えてください
Pythonのsecrets乱数はなぜ安全なのか

Pythonで疑似乱数生成というと[random](https://docs.python.org/ja/3/library/random.html#module-random)モジュールが浮かびます。これは一様分布や正規分布など、種々の分布に従った乱数を生成することができ便利なのですが、実はセキュリティ的には強い乱数ではないようです。
パスワードやセキュリティトークンを生成するときには、暗号学的に強い乱数を生成できる[secrets](https://docs.python.org/ja/3/library/secrets.html#module-secrets)モジュールを使うことが推奨されています。

### 乱数生成方法の違い

secretsモジュールの[解説](https://docs.python.org/ja/3/library/secrets.html#random-numbers)には以下のように書かれていました。
> secretsモジュールは OS が提供する最も安全な乱雑性のソースへのアクセスを提供します。

この記述について、具体的には、`os.urandom`と`random.SystemRandom`をインタフェースにしてOSの安全なランダムソース、Linuxでは`/dev/urandom`、 Windowsでは`CryptGenRandom()`にアクセスされる仕様のようです。([PEP506](https://peps.python.org/pep-0506/))

Linuxの`/dev/random`や`/dev/urandom`はハードウェアの環境ノイズを使った乱数（エントロピープール）となり、高品質な乱数ができることで知られています。

一方のrandomモジュールは、メルセンヌ・ツイスタという疑似乱数生成器を使っています。これは線形漸化式を使った優れた疑似乱数生成法なのですが、[暗号論的疑似乱数列生成器(CSPRNG)](https://ja.wikipedia.org/wiki/%E6%9A%97%E5%8F%B7%E8%AB%96%E7%9A%84%E6%93%AC%E4%BC%BC%E4%B9%B1%E6%95%B0%E7%94%9F%E6%88%90%E5%99%A8)ではなく、予測可能な生成方法となっています。

この乱数生成方法の違いから、パスワードやセキュリティトークンを生成する乱数モジュールはsecretsを使うべきだということのようです。

個人的に全然知らなかったので、備忘録として記事にしました。
６月２６日VS Code CSS基礎

HTML、CSSで使用している教科書は「１冊ですべて身につくHTML&CSSと　Webデザイン入門講座[第2版]」です。

６月２６日はP110~145まで学習しました。
9月にサーティファイのWebクリエイター試験を受けるので、試験内容にも重なるものには【サーティファイ試験】を記載しています。

#### P110~ 3-8　上手に配色しよう
:::note info
【サーティファイ試験】色相、明度、彩度
* 色相：12色の色相環。補色は対面にあり、合わせると黒（グレー）になる組み合わせ。
* 明度：明るさの度合い。黒っぽい→白っぽい、役所などは低め（落ち着き）、ファッショナブルなサイトは高め（明るく爽快）
* 彩度：色の鮮やかさ。低いと大人っぽい、高いと爽やか（青の場合、低いとグレーっぽい、高いと青が強い）

:::

企業や地域にはイメージカラーがある。
例えば京都や太宰府は紫、愛媛はオレンジ、警察は紺色、など（サイトを確認した）

:::note info
色の印象
* 暖色：赤を中心。炎や血液を連想。気持ちを高揚させる。食欲増進。ex.赤、オレンジ、黄色、茶色
* 寒色：青を中心。見た目に涼しく、精神を安定。まじめな印象。ex.青、紺、シアン、黒
* 中性色：温度を感じない。暖色や寒色と組み合わせることで温度感を追加。ex.緑、紫
* 無彩色：どの色を組み合わせても調和が取りやすい。ex.白、灰色、黒

:::


##### 【サーティファイ試験】色の比率　7:25:5の法則


| ベースカラー | メインカラー | アクセントカラー |
|:-|:-:|:-:|
|７０％|２５％|5%|
|デザインの基盤となる色|デザインの中で見てほしい色。全体の雰囲気を印象付ける。|デザインを引き締め、メリハリをつける。メインカラーの補色や警戒色などを使用|
|背景色|テーマカラー|差し色|

#### P124~ 3-10 背景を彩ろう

##### 背景を設置：background-image プロパティ
background-image:url(○/○);
()内は相対パス（P63 呼び出し元のファイルから見た対象ファイルの位置）で入力
小さい画像も全体に背景として設置できる
（サーバーエラーや画像のリンク切れなどで画像を読み込めない可能性を考え、backgroundには色を設定しておく方が良い）

##### 背景画像の繰り返し表示：background-repeat プロパティ
background-repeat:値;
主な値（左上を起点として）
* repeat-X:横一列
* repeat-y:縦一列
* repeat:縦横共に繰り返し表示←今のブラウザのデフォルト
* no-repeat:繰り返さない（左上に画像を1枚だけ表示

##### 背景画像の大きさを指定：background-size プロパティ
background-size:値;
主な値
* 数値指定（px、%、rem)
* cover:全体を覆うように拡大。縦横比はそのまま。表示領域より画像が大きいと切れる。
* contain:その範囲に含まれるように拡大。縦横比はそのまま。表示領域の方が大きいときは余白ができる。

##### 背景画像を表示する位置を指定：background-psition プロパティ
background-psition:値;
値には：水平 垂直;が入る
* 水平：left,center,right
* 垂直:top,center,bottom
* 数値の指定も可能：px,rem,%　例えば30px(横方向X）　８０px（縦方向y）など

##### 背景画像を2枚以上（複数）指定　（サーティファイ試験出題あり★）
back ground image:url( ),url( )
,で区切ると複数指定可能



#### P1３２~ 3-１１　幅と高さを指定しよう
* 幅：width
* 高さ：height
* 数値で設定or auto（関連するプロパティの値によって自動設定）
* 例えばdiv{width: 500px;} p{width: 50%;}なら、pは５００pxに対する５０％になる（親要素に対しての５０％）

##### 相対単位
* ％：親要素を基準とした割合(親６００pxの時、子５０％は300px)
* em:親要素を基準とした単位　（親が１６pxの時、１em＝16px)
* rem:ルート要素（<html>タグ）のサイズを基準に計算。root+em=rem HTML要素のフォントが１６pxのときは、1rem=16px
* vw:viewport width ビューポートの幅。例えば１２００oxの時、50vwは６００px
* vh:view height ブラウザの端末の表示高さ

補足：ビューポートとはブラウザーでwebサイトを閲覧するときの表示領域
vwとvhはスマホ表示に切り替えるとき活躍

#### P1３６~ 3-１２　余白を調整しよう
##### 外側の余白　margin
短縮技法
* ４方向全て　margin:値；
* 上下　左右　margin:値　値；
* 上　左右　下　margin:値　値　値；
* 上　右　下　左　margin:値　値　値　値；

##### 内側の余白　padding

##### 文字と枠の間の余白は、最低でも文字サイズの1〜1.5倍
padding 1rem とすると、1文字分＝1rem分スペースができる

#### P1４２~ 3-１３　線を引こう

##### 太さ border-width: ;
* marginと同じ短縮技法使用可能
* 数値またはキーワードで設定
* thin 細い
* medium 普通
* thick 太い

##### border-style: ;
* none 非表示
* solid 1本
* double 2本
* dashed 破線
* dotted 点線

borderのみだと全ての辺に指定されるが、以下のように使えばどの辺に指定するか設定できる
* 上　border-top
* 下 border-bottom
* 左 border-left
* 右 border-right
Vite + React で CSS Modules を使ってみる

## この記事が役立つかもしれない人
* コンポーネントごとに CSS を書きたい人
* 他のコンポーネントの CSS との重複を気にせず CSS を書きたい人
* React で Svelte のようなスタイル定義の体験をしたい人

## 状況
### 現在の問題点
Vite + React という構成で開発を行っており、以下のような問題に直面しました。

```tsx:例: Example.tsx
// 下記の CSS で Example コンポーネントのスタイルを定義している
import "./style.css"

const Example = () => {
  return (
    {/* text という名前のクラスが他の CSS で定義されていると干渉してしまう */}
    <p className="text">これは例です</p>
  );
}
```

### 問題の具体例
異なるコンポーネントで同じクラス名を使用すると意図しないスタイルの干渉が発生します。
例えば `text` クラスが異なるスタイルを持つ複数のコンポーネントで定義されている場合、どのようにスタイルが適用されるかが予測困難になります。

今回はこの問題を解決するために CSS Modules を導入し、各コンポーネントのスタイルを独立させることにしました。

### CSS Modules の概要とメリット
CSS Modules は各コンポーネントごとにスコープされた CSS を提供する手法です。
これによりクラス名の衝突を防いでコンポーネントごとのスタイルを独立させることができます。

https://github.com/css-modules/css-modules

## CSS Modules の導入
### Vite + React 環境の設定
まず Vite + React プロジェクトをセットアップします。

```bash
# Vite プロジェクトの作成
npm create vite@latest my-project --template react

# プロジェクトディレクトリに移動
cd my-project

# 依存関係のインストール
npm install
```

### CSS Modules の設定
Vite では CSS Modules がデフォルトでサポートされています。そのため CSS ファイルの拡張子を `.module.css` とするだけで利用可能です (`.module.scss` でも可)。

しかし `example-text` のようにハイフン付きでスタイルを書いている場合、React の className に適用しようとするとエラーを吐きます。

なのでハイフン付きクラスをキャメルケースでも呼び出せるように設定しておきます。

```ts:vite.config.ts
export default defineConfig({
  plugins: [react()],
  css: {
    modules: {
      localsConvention: 'dashes',
    }
  }
});
```

これで `example-text` クラスを定義していた場合、React からは `exampleText` として呼び出せます。

### 実装例
CSS Modules を使用した具体例です。

```tsx:例: Example.tsx
// モジュールオブジェクトを受け取る
import styles from "./style.module.css"

const Example = () => {
  return (
    {/* style.module.css で定義した text クラスを使う */}
    <p className={styles.text}>これは例です</p>
  );
}
```

### 型宣言ファイルの作成
TypeScript を使用している場合、CSS Modules の型宣言が必要です。
プロジェクトのルートディレクトリまたは `src` フォルダ配下などに `vite-env.d.ts` ファイルを作成して以下の内容を追加します。

```ts:vite-env.d.ts
/// <reference types="vite/client" />

declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}
```

さらに `tsconfig.json` を編集して型宣言ファイルを含めます。

```json:tsconfig.json
{
  "compilerOptions": {
    "...省略..."
  },
  "include": ["src/**/*", "vite-env.d.ts"]
}
```

## 実装結果の確認
### 実際にビルドされた CSS の確認
CSS Modules を使用してビルドした結果、以下のようにクラス名が一意に変更されます。

```css
._text_jaca6_10 { color: red; }
._text_svqqv_15 { font-size: 32px; }
```

これにより異なるコンポーネントで定義された同名のクラス (例だと `text`) が干渉することなく使用できます。

##  CSS Modules に関する設定オプション
Vite では CSS Modules に関する詳細な設定オプションが提供されています。
以下のように `vite.config.ts` にオプションを追加することでカスタム設定が可能です。

```js:vite.config.ts
export default {
  css: {
    modules: {
      // CSS をローカルにスコープするデフォルトの挙動
      scopeBehaviour: 'local',
      // 例外としてグローバルスコープにしたいパス
      globalModulePaths: [/global/],
      // クラス名の生成ルールを設定
      generateScopedName: '[name]__[local]___[hash:base64:5]', 
    }
  }
}
```

この他にもオプションがあるため、詳しくは次のリンクを参照して下さい。

https://ja.vitejs.dev/config/shared-options.html#css-modules

## まとめ
CSS Modules を導入することでクラス名の衝突を防ぎ、各コンポーネントのスタイルを独立させることができました。
それによりスタイルの管理が容易となり、予期せぬスタイルの干渉も解消されてストレスが減りました！


この記事が役に立ったら 🩷 を頂けると嬉しいです！

## 参考資料

https://ja.vitejs.dev/guide/features.html#css-modules

https://github.com/madyankin/postcss-modules?tab=readme-ov-file
LLVM IRの勉強メモ #2

個人的な学習メモです。

#### Calling Conventions[^1]

関数やcall、invokeは呼び出しにあたってオプショナルの呼び出し規約(calling convension)を指定することができる。ダイナミックなcaller/calleeのペアは呼び出し規約が一致していなければならない。

#### 呼び出し規約[^1]

- ccc
Cの呼び出し規約。他の呼び出し規約が指定されていない場合のデフォルト値。ターゲットのCの呼び出し規約を指定する。
- fastcc
可能な限り高速な呼び出しを行う規約。例としてはレジスタでの値受け渡しなど。この規約は外部で指定されたABI（アプリケーションバイナリインタフェース）に従わず、高速なコードを生成するために任意の手段を取ることができる。
- caldcc
この規約は、通常は呼び出しが行われないことを前提として、callerのコードを可能な限り効率化しようとするもの。呼び出しによってcallerのレジスタライブレンジを壊さないように、すべてのレジスタを保持しておくことが多い。また、この規約の関数はインライン化の対象にならない。
- ghccc
Glasgow Haskellコンパイラ(GHC)で使用される特殊な規約。
- cc ll
EricssonのHiPEコンパイラで使用される特殊な規約。
- anyregcc
callerに任意のコードをパッチングすることをサポートしている特殊な規約。呼び出し引数を強制的にレジスタに格納するが、それらは動的に割り当てられる。現在のところ、llvm.experimental.patchpointの呼び出しでのみ使用できる。
- preserve_mostcc
できる限りcallerのコードには影響を与えないようにする規約。引数と戻り値の渡し方はCの呼び出し規約と同じように動作するが、caller/callee-savedレジスタは異なる。これは呼び出し前後で多数のレジスタセットを保存、回復する負荷を低減するためである。また、引数がcallee-savedレジスタに渡されるときは、それらは呼び出しの間、calleeによって保持される。保持されている値はcallee-savedレジスタには反映されない。
- preserve_allcc
preserve_mostccよりもさらに、callerのコードに影響を与えないようにする規約。
- preserve_nonecc
この規約では呼び出しにあたって汎用レジスタは保存されない。つまり、すべての汎用レジスタはcallerが保存する。またすべての汎用レジスタを引数の受け渡しに使用する。
- cxx_fast_tlscc
Clangはc++スタイルのTLSへのアクセス関数を生成する。このアクセス関数は一般的に、入口ブロック、出口ブロック、初期化ブロックを持つ。この規約は、可能な限り多くのレジスタ（エントリーブロックとエグジットブロックで構成されるファストパスで保持されるすべてのレジスタ）を保持することで、呼び出し側のオーバーヘッドを最小限に抑えることを目的としている。
- tailcc
この規約は、tailポジションの呼び出しが、常に最適化されることを保証する。可能な限りtail callを生成すること以外はfastccと同等である。
- swiftcc, swifttailcc
Swift言語で使われる規約。
- cfguard_checkcc
コントロールフローガードチェック関数で使われる。このチェック関数は間接呼び出し（インダイレクトコール）の前に挿入され、calleeが有効な関数アドレスであることをチェックする関数。
- cc <n>
任意の呼び出し規約を番号で指定する形式。ターゲット固有の規約を使用できる。

この他にもターゲットに依存しない規約をサポートするために、必要に応じて規約を追加・定義することができる。

[^1]: https://llvm.org/docs/LangRef.html#calling-conventions
Tiny Character Controller でキャラクターを制御しよう

# Tiny Chacater Controller とは

Tiny Character Controller（以下、TCC）は、GitHub上で無料公開されている、キャラクターの挙動を複数の小さなコンポーネントを組み合わせて実現するシステムのことです。

具体的には、「Brain」「Check」「Control」「Effect」という4つの基本的なコンポーネントを組み合わせることで、キャラクター挙動の構築・カスタマイズを簡単にしてくれます。

各コンポーネントの説明は、[リポジトリ](https://github.com/unity3d-jp/Project_TCC)下部の解説ドキュメントに記載されています。

# TCCのインストール

TCCをまだインストールしていない方は、[こちらの記事](https://qiita.com/GameDevEgg/items/ea07565f384754fff758)を参考にインストールしましょう。

# キャラクター制御に必要なもの

TCCでキャラクターの制御（基礎挙動）を実装するにあたって必要なものは3つあります。

1つ目は、キーボード・コントローラーの入力を受け取ること。
2つ目は、入力を受け取ったことを通知すること。
3つ目は、TCCの各種コンポーネントから適切な処理を呼び出すこと。

この3つを揃えることで、入力に沿ったキャラクター制御を実装することが出来ます。
例えば、「スペースキーが押されたら、キャラクターがジャンプする」のように。

では、これら3つを実装していきましょう。
それぞれ、対応するコンポーネントが存在しています。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3470968/91d19051-2438-735a-8dd8-992cd18fddfb.png">

上記の画像がその一例です。入力の受け取りを Input Manager でも行えるように、
必ずしもこのコンポーネントである必要はありませんが、本稿では上記画像の方法で
実装していきます。

# TCCでキャラクターを制御する

まず、Input System を準備します。Create→Input Actions から新しいコントロールを作成し、Edit Asset で必要なアクションを登録しましょう。

次に、キャラクターのオブジェクトにPlayer Input コンポーネントをアタッチし、Behavior
プロパティを好みの設定に変更します。（本稿ではInvoke Unity Events）

最後に、適当なスクリプトをプレイヤーにアタッチし、public なメソッド内でTCCの処理を呼び出します。そして、そのメソッドをPlayer Input の対応するEventsに登録するだけです。

今回は下記のコールバックイベントを定義しました。
```cs
using UnityEngine;
using Unity.TinyCharacterController.Control;
using UnityEngine.InputSystem;

public class Player : MonoBehaviour
{
    private MoveControl _moveControl;
    
    void Start()
    {
        _moveControl = GetComponent<MoveControl>();
    }

    public void OnMove(InputAction.CallbackContext context)
    {
        // Moveアクションが入力された場合
        if (context.performed) _moveControl.Move(context.ReadValue<Vector2>());

        // Moveアクションがリリースされた場合
        else if (context.canceled) _moveControl.Move(Vector2.zero);
    }
}

```

Input System でキー入力を受け取ると、Player Input からOn Move メソッドが呼び出されてキャラクターが移動するというものです。

ジャンプやしゃがみ、攻撃やインタラクトなども同様に実装できるので、
皆さんも試してみて下さい。

それでは、ご覧いただきありがとうございました :laughing:
負荷抵抗ありのソース接地回路の計算

![IMG_6402.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3759109/26529e03-cd54-54b5-1067-3149cf6e1765.jpeg)

```
import math

# Given values
VDD = 1.8
Vov = 0.2
VA = 23.7
W_L = 10
VGS = 0.615
VDS = 0.3

# Calculate Vth
Vth = VGS - Vov

# Calculate muCox
muCox = 3.07 / (W_L * (1 + VDS / VA))

# Calculate gm
gm = muCox * W_L * Vov

# Calculate gd
gd = (muCox / 2) * W_L * (Vov**2) / VA

# Calculate rd
rd = 1 / gd

# Calculate IDS
IDS = (muCox / 2) * W_L * (Vov**2) * (1 + VDS / VA)

# Calculate Output Resistance
output_resistance = VDS / IDS

# Calculate Amplification Factor (A)
A = (gm * rd * output_resistance) / (rd + output_resistance)

# Convert Amplification Factor to dB
A_dB = 20 * math.log10(A)

# Print results
print(f"Vth: {Vth:.3f} V")
print(f"muCox: {muCox:.3e} A/V^2")
print(f"gm: {gm:.3e} S")
print(f"gd: {gd:.3e} S")
print(f"rd: {rd:.3e} ohms")
print(f"IDS: {IDS:.3e} A")
print(f"Output Resistance: {output_resistance:.3e} ohms")
print(f"Amplification Factor (A): {A:.3f}")
print(f"Amplification Factor (A_dB): {A_dB:.3f} dB")


```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3759109/2d3068d2-3fc1-a71d-1405-1c6e46034998.png)
Railsでポリモーフィック関連付けを使用した柔軟なモデル関連付けの実装」

## はじめに
アプリ制作の過程で、ポリモーフィック関連を用いた実装を行いました。ここではその実装過程で得られた気づきをまとめます。ポリモーフィック関連について実際の例を交えながらなるべく分かりやすくまとめたいと思います。


## なぜポリモーフィック関連付けが便利なのか
例えば、ブログ記事にコメントを付ける機能を作ったとします。その後、イベントページにもコメントを付けたくなったとします。通常であれば、新しくコードを書き足さないといけないと思います。しかし、ポリモーフィック関連付けを使うと、既存のコードをほとんど変更せずに、イベントにもコメントを付けられるようになります。
それでは、実際にコードを見ていきましょう。

## モデルの設定
まず、モデルの設定から。`Article`、`Event`、`Comment`の3つのモデルを作ります。
```ruby
class Article < ApplicationRecord
  has_many :comments, as: :commentable
end

class Event < ApplicationRecord
  has_many :comments, as: :commentable
end

class Comment < ApplicationRecord
  belongs_to :commentable, polymorphic: true
end

class Game < ApplicationRecord
  belongs_to :home_teamable, polymorphic: true
  belongs_to :away_teamable, polymorphic: true
end
```

ここでのポイントは、`Article`と`Event`に`has_many :comments, as: :commentable`と書いているところです。
これで「コメント可能な」オブジェクトとして定義されます。`Comment`モデルの`belongs_to :commentable, polymorphic: true`も重要です。これで、`Comment`が`Article`と`Event`にも紐付けられるようになります。

## テーブルの定義
次に、テーブルの設定です。マイグレーションファイルを作成して、必要なテーブルを作ります。
```ruby
class CreateComments < ActiveRecord::Migration[6.1]
  def change
    create_table :comments do |t|
      t.text :content, null: false
      t.references :commentable, polymorphic: true, index: true
      t.timestamps
    end
  end
end
```

ここで常用なのは、`t.references :commentable, polymorphic: true`の部分です。これによって、`comments`テーブルに`commentable_type`と`commentable_id`というカラムが追加されます。これらのカラムを使って、コメントが`Article`に属しているのか、`Event`に属しているのかを判断することができます。

## ビューの設定
最後に、ビューの例も見てみましょう。
```ruby
<%= form_with(model: [ @commentable, @comment ], local: true) do |form| %>
  <div class="field">
    <%= form.label :content, 'コメント' %>
    <%= form.text_area :content %>
  </div>
  <div class="actions">
    <%= form.submit '投稿する' %>
  </div>
<% end %>
```
このフォームは、`Article`ページと`Event`ページで使えます。`@commentable`の中身が自動的に判断されるので、同じフォームで両方に対応することができます。

## まとめ
ポリモーフィック関連付けを使うとかなりスマートにコードを書くことだできます。僕自身まだまだ使いこなせておらず少し難しく感じる部分もありますが、使いこなせるようになるとコードの可読性と拡張性が大幅に向上するはずです。
【参加日記#05】Gemini API デベロッパー コンペティション

～[前回](https://qiita.com/arc-lab-jp/items/ac3c6c508ee0fea8d259)までのあらすじ～
アプリの構想を固める為に、アプリを使った例を３つほど考えてみた。


# 1.アプリ<外観部分>
決定したといいつつ、後から変わる事はきっとある（笑）


<dl>
  <dt>1.ユーザー入力</dt>
  <dd>テキスト入力とする。（音声も考えたが、まずは）</dd>
  <dt>2.ユーザーインターフェイス</dt>
  <dd>・InputArea1:翻訳前の入力欄</dd>
  <dd>・InputArea2:翻訳結果の出力欄</dd>
  <dd>・Button:翻訳処理を行う</dd>
  <dd>・Dropdownlist:Level設定を行う</dd>
    <dd>google翻訳みたいな画面があり、翻訳前と翻訳後のテキストボックスがある形。ボタンで翻訳処理を行う。</dd>
 </dl>

 
# 2.アプリ<内部処理>
<dl>
  <dt>1.翻訳Level</dt>
  <dd>出力するにあたり3～5段階ぐらいを用意したい。MAXLevelだと「聖人」「接待」「友達（普段）」「友達（やさぐれ時）」「独り言」。通常状態だと「独り言」⇒「接待」に変換する　</dd>
    <dt>2.その他の機能</dt>
    <dd>・逆翻訳もしたい</dd>
    <dd>・他のAIも選べるようにしたい（将来的に）</dd>
</dl>


# 3.<翻訳時の注意点メモ>
#### 1. 入力解析
- ユーザーの入力（テキストまたは音声）を解析
- 感情、意図、文脈を理解
- キーワードや語調から本当の意図を推測

#### 2. コンテキスト分析
- 時間、場所、相手との関係性などの状況データを考慮
- 過去の会話履歴や学習したユーザーの傾向を参照

#### 3. 感情調整
- 元のメッセージの感情を適切なレベルに調整
- 例：怒りを和らげる、遠慮がちな感謝の気持ちを強調

#### 4. 文章生成
- 分析結果に基づいて、状況に適した新しい文章を生成
- ユーザーの個性や話し方の特徴を保ちつつ、より適切な表現に変換

#### 5. 文化的適応
- 地域や文化に応じた言い回しや慣用句を適用
- 世代間ギャップを考慮した表現の調整

#### 6. 最終チェック
- 生成された文章が元の意図を正確に反映しているか確認
- 不適切な表現や誤解を招く可能性のある言葉がないかチェック

#### 7. ユーザーフィードバック
- 翻訳結果をユーザーに提示し、必要に応じて微調整のオプションを提供
- ユーザーの選択や修正を学習し、将来の翻訳に反映


とりあえず、次回からは技術的に時間がかかりそうな部分について調べていこうと思う

というわけで、また次回
テックビジネスバランスについて考える

# はじめに
エンジニア生活4年目の終盤迎えて振り返ってみると、私はエンジニアという職業に就いてありがたいことですが楽しいと思いながら働けています。
いきなり仕事楽しいとかキモめな発言をしていますが、実際そういう人少なくないと感じています。
もちろん仕事なんでダルいこともやらないといけないときもあります、そういうときはクソやなぁと思いながら私もやってます。
まあそれはさておき、今回初投稿なんですが私と近い世代で今後のキャリアについて考えてる人に共感してもらいたいなぁってのと、みなさんの今後のキャリアについて大事にしてほしいことの1つとして得るものがあってもらえたら嬉しいなと思ってます。

## ビジネスとテクノロジーのバランスの重要性

### テックビジネスバランスってなんや
まず前提として内製エンジニアとしてのキャリアしか歩んでこなかった人間の考えです
内製エンジニアは、携わるソフトウェアに対してどの程度の熱意を持てるかも大事だからこそビジネスについても言及しています

ワークライフバランスという言葉が流行りすぎている昨今の世情、仕事はあくまでお金を稼ぐ手段だ。キリッ(｀･ω･´)とか寂しいこと言ってる人も多く見られますが
内製エンジニアとして働くうえで、その組織のビジネスとテクノロジーのバランスが自分にあう企業であるのかも大事なんじゃないの？という考えから勝手に私が言ってる言葉です。
流行ってません。誰も言ってません。（私調べ）
今回の記事で一番伝えたいことはこれになります

### ビジネスとテクノロジーのバランスが取れた環境ってなんや
無秩序な開発は望ましくありませんが、必要以上に議論を重ねることでビジネスの進行が遅れるのも問題です（どちらも体験談）。
適切なバランスが取れた環境とは、ある程度の基準が設けられていることだと考えています。基準があれば、開発チームは効率的に作業を進めることができ、ビジネスサイドも安心してプロジェクトを進められると思います。
だからこそ、先人は開発手法や開発手法のフレームワークを考えてきたんでしょう（愚者なので経験しないと自分ごとにできません）

### なぜビジネスとテクノロジーのバランスが重要なんや
ビジネスとテクノロジーのバランスが取れていることは、以下の理由より開発によるバリューの最大化が狙えると思っています。(急に真面目な口調で草)

1. 効率的な問題解決
技術力が高ければ、高度な技術を駆使して問題を効率的に解決することができます。しかし、技術だけに偏ると、ビジネスの本質的な課題を見落としがちになります。ビジネスの理解が深ければ、技術を適切に使い、ビジネスの課題を的確に捉えて解決できます。この相乗効果により、迅速かつ効果的な問題解決が可能になる。

2. 顧客満足度の向上
ビジネス側のニーズを理解し、それを技術的に実現することで、顧客に対して高い満足度を提供できる。顧客が求める機能やサービスを的確に提供することで、顧客の信頼を得ることがでる。結果として、ビジネスの成長につなる。

3. 持続可能な開発
技術的な負債を抱えないようにするためには、コーディング規則やリファクタリングが重要（戒め）
一方で、ビジネスのスピードも重要です。これらをバランスよく管理することで、持続可能な開発が可能になると思っています。

4. チームのモチベーション向上
ビジネスの成功と技術の成功がリンクしていると、チーム全体のモチベーションが向上します。何事も勝った方が楽しいですしね。ビジネスでの勝利はエンジニアにとっても重要だと思っています。
一方で、ビジネスサイドも技術の重要性を理解し、技術者を尊重することで、良好なチームワークが生まれるはずです。

## 私のキャリア

### ちな経歴
私のエンジニアとしてのキャリアは金融機関の内製開発組織で始まりました。そこで3年以上働き、金融業界のソフトウェア開発に従事してました
そしてつい最近、住宅業界に関わるソフトウェア開発を行うスタートアップに転職した感じです。

### 主要なプロジェクトや経験

金融機関では、新規事業の立ち上げを経験しWebアプリケーションの設計、開発、運用、保守の全てを担当しました。このプロジェクトを通じて、実務を行う上で大きな自信を得ることができたと思います。
現職ではこれに加えて協業先のベンダーとの折衝を行いつつWebアプリケーション及びスマートフォン向けのアプリ開発も行うようになりました。

### スキルと技術

超ざっくりですが前職では主にJava（Spring）を使用して開発を行っていました。現在の職場では、Reactを使ってWebアプリケーションの開発を行うと共に、React Nativeを用いてiOSおよびAndroidのアプリ開発も行っています。これにより、フロントエンドからモバイルアプリケーションまで幅広い技術スタックに精通することができました。
必要に応じてインフラ（AWS）も触っています。

### 現在の仕事

現在はサブリーダーとして、元々開発を委託していたベンダーから徐々に内製に移行するための基盤づくりを行っています。同時に、ビジネスを前進させるための新規開発も積極的に進めたり、効率的な開発プロセスの構築にも取り組んでいます。
前職ではCI/CDやテスト自動化など、縁の下の力持ちがいた事の有り難さを今身を持って痛感しています。だからこそ同僚にはリスペクトを持って接するべきですね。

### 前職の金融機関と現職のスタートアップの違い
前職の金融機関では、コードを書く前にたっぷりと議論や思考を重ねる時間がありました。他のチームを見ても組織全体がゆっくり進むスピード感には、もどかしさを感じることも多かったです。一方、現職のスタートアップでは、スピード感が命！とにかく素早くコードを書いて、すぐに検証してリリースするという流れが主流です。このスピード感のおかげで、瞬時に成果を出すことができるのは魅力的です。

ただスピード感の裏側には、ちょっとしたカオスが隠れています。いや派手にカオスです。
マジックナンバー…ありまぁす！
コーディング規則なんてねぇよ うるせぇよ 黙れよ
前職で嫌っていた「議論」の重要性に気付かされることもしばしば。あの時の自分に「議論って大事だよ！」と殴りながら教えてあげたい気持ちになります。

### 現職での取り組み

ビジネスが進むのは嬉しいことですが、カオスなコードベースとの戦いは避けられません。簡単そうに見える開発でも、実際には多くの時間がかかってしまいます。そこで、ビジネスサイドのメンバーにこの問題をしっかりと伝え、内製化を推進するためのコーディング規則を策定し、大規模なリファクタリングを並行して実施するよう交渉しています。
せっかくQiitaに記事書き始めたし
そこから脱出した様や技術的なアウトプットも今後はしていきたいなと思っています（飽き性なので多分書かなそう）

## 最後に
私の経験でいくと前職には前職の良さがありましたし
現職には現職の良さがあります
自分の価値観と完全に合致するような会社を探すことはとても難しいと思います

今後のキャリアを考えるうえでワークライフバランスというものに加えて、テックビジネスバランスについてのことのことも、時々でいいから…思い出してください
私も今後の自分のキャリアを考えるうえで大事にしようと思います！

では良きエンジニアライフを！明日はもっと楽しくなるよね、ハム太郎
Git LFS を使いたいんじゃ！！！

こんちわ。

ゲーム会社でソシャゲを作ってます、あまがみです！
今回は、個人開発で Git LFS を使ってみたかったので、いろいろ調べてみました！

備忘録です！

# Git LFS とはなんぞや？
まず Git と Git LFS って何が違うん？というところから。

 ## Git
 Git とは、プログラムのソースコードなどをの変更履歴を記録・追跡するための `分散型バージョン管理システム` です。
 
 古いバージョンに戻したり、新旧のファイルを一元管理できたり、複数人で修正した部分を共有できたりします。
 

## Git LFS
Git LFS とは、Git の拡張機能です。
Git は 100MB 以上のファイルを扱えないのですが、Git LFS を使用することで、サイズの大きなファイルを管理することができます。

 
Git LFS では、サイズの大きなファイルの `meta` データのみを管理し、ファイル本体はリモートサーバーで管理する仕組みになっています。

---
つまり、Git LFS を使うことで、Git だけでは管理できなかった大きなファイル（assetデータやフォントなど）をソースコードと一緒にバージョン管理できるということですね！


## 使い方
とはいっても Git の拡張機能ですので、Git は事前にインストールしておかなければなりません。
インストールの仕方は割愛しますが、まだインストールされてない方は以下の記事を参考にしてみてください。

---
- Gitのインストール方法(Windows版)　[@T-H9703EnAc 様]

https://qiita.com/T-H9703EnAc/items/4fbe6593d42f9a844b1c

## インストール
Git LFS のインストールは以下の手順で行います。

```
$ git lfs install
```

バージョンも確認しておくといいでしょう。
```
$ git lfs version
```

これで完了です！簡単だね！

## リポジトリのクローン
```
$ git lfs clone <URL>
```

## 追跡するファイルを指定
次に追跡対象にしたいファイルを設定します。
100MBを超えるけど管理したいよーという拡張子を確認しておきましょう。

```
$ git lfs track "*.拡張子"
```

（例） `$ git lfs track "*.asset"` 
みたいに指定すると、Git LFS が追跡してくれます。

# 確認
追跡対象が設定出来たら、一度確認しておきましょう。
```
$ git lfs ls-files
```
これで先ほど指定した拡張子が含まれていれば完了！

## コミットしてみる
あとは通常通りにコミットします！
```
$ git add 対象のファイル

$ git commit -m "コミットメッセージ"

$ git push origin Pushしたいブランチ
```

これで 100MBを超えたファイルでも追跡してくれるはずです！

# エラーが発生する場合
`Encountered ~ file that should have been a pointer, but wasn't:` というエラーが発生する場合があります。これは、Git LFS で追跡できてないよ～というエラーになりますので、 `migrate` コマンドで修正する必要があります！

```
$ git lfs migrate import --everything -- include="*.拡張子"
```

これで解決しない場合は、新しいリポジトリを作るほうが早いです。たぶん。

# まとめ
- Git LFS は Git の拡張機能
- サイズの大きいファイルを追跡してくれるいいやつ
- インストール簡単
- エラーが出た場合、最悪リポジトリを作り直す必要がある

※間違っている部分がありましたら、ご連絡いただけますと幸いです！

# 参考資料
- Git LFS をちょっと詳しく　[@ikmski 様]

https://qiita.com/ikmski/items/5cc8b8832336b8d85429#git-lfs-%E3%81%A8%E3%81%AF

- Gitのインストール方法(Windows版)　[@T-H9703EnAc 様]

https://qiita.com/T-H9703EnAc/items/4fbe6593d42f9a844b1c

- [Git LFS][Gitlab][Windows] Git LFSの環境作成　[@koare-local 様]

https://qiita.com/koara-local/items/80bd2bd7e3e78e814abf

- Git LFS を使う時の注意点　[みーのぺーじ 様]

https://pc.atsuhiro-me.net/entry/2024/05/29/175302
Roadmap.sh学習メモーCache

# キャッシュとは

- 問い合わせに対する回答を記憶しておき、再度同じ問い合わせがあった時には記憶しておいた情報を再利用することで、システムのパフォーマンス向上、応答時間の短縮、サーバの負荷削減を図る技術

## キャッシュは様々な階層で使われる

- コンピュータのハードウェアレベルのキャッシュ（L1、L2、L3）

- OSレベルのキャッシュ（ファイルシステムのページキャッシュや仮想アドレス-物理アドレスの変換情報のキャッシュであるTLBなど）

- Webアプリケーションにおけるキャッシュ
    - ブラウザキャッシュ
    - CDNのキャッシュ
    - ロードバランサのキャッシュ
    - データベースのキャッシュ
    - 分散キャッシュシステム（RedisやMemocachedなど）

## 共有キャッシュとプライベートキャッシュ
共有キャッシュとは文字通り複数のユーザ間で共有されるキャッシュのこと
例えばCDNのキャッシュは共有キャッシュである
あるユーザのリクエストによってCDNにキャッシュされた情報は、ほかのユーザが同じリクエストしたときに利用される

プライベートキャッシュは個々のユーザで独立したキャッシュのこと
ブラウザキャッシュはブラウザを利用している各ユーザ固有のキャッシュのためプライベートキャッシュにあたる

## キャッシュ戦略

1. 読み込み時のキャッシュ（Read-Through）:
    - データ要求時に、まずキャッシュをチェックする
    - キャッシュにデータがない場合、データソース（通常はデータベース）からデータを取得し、キャッシュに保存してから返す
    - 次回同じデータが要求された時、キャッシュからデータを取得する
    - Read-Throughは、読み取り操作が多いアプリケーションに適している
    - ブラウザキャッシュは読み込み時キャッシュ
2. 書き込み時のキャッシュ（Write-Through）:
    - データ更新時、キャッシュとデータソースの両方に同時に書き込む
    - 書き込み操作のパフォーマンスが低下する可能性があるが、キャッシュとデータソースの整合性が高い
    - Write-Throughは、データの一貫性が重要な場合に使用される
3. 書き込み時のキャッシュ（Write-Back）:
    - データ更新時、まずキャッシュにのみ書き込む
    - データソースへの書き込みは後で（通常はバッチ処理で）行う
    - 書き込み操作が高速化されますが、データの一時的な不整合が発生する可能性がある
    - Write-Backは、高速な書き込みが必要で、多少のデータ遅延が許容される場合に適している

## キャッシュの注意点

- キャッシュを長期に保存すると情報が陳腐化するため有効期限を設けるのが望ましい
- セキュリティ上重要なデータがキャッシュとして保存されていないか注意が必要
- ユーザ固有の情報がキャッシュされて他のユーザにアクセスされないように注意が必要
- その他、システムの要件や特性に合わせて適切な管理をしないとパフォーマンスが悪化することがある

## 参考文献

https://jp.gomomento.com/blog/3-crucial-caching-choices-where-when-and-how/

https://www.youtube.com/watch?v=wh98s0XhMmQ

https://qiita.com/inagakkie/items/f615d7d8cf172eb15a4b

https://www.mnot.net/cache_docs/?_sm_au_=iVVV1H5rMRH7P7NQ
Javaで「文字列から指定したインデックスのUnicodeコードポイントを取得する」の動作を確認してみた

# 概要

Javaで「文字列から指定したインデックスのUnicodeコードポイントを取得する」の動作を確認してみました。
以下のページを参考にしました。

https://www.javadrive.jp/start/string/index10.html

# 実装

以下のファイルを作成しました。
```JSample10_1.java
class JSample10_1{
  public static void main(String[] args){
    String msg = "東京都港区赤坂";

    for (int i = 0; i < msg.length(); i++){
      System.out.println( i + "；" + msg.codePointAt​(i));
    }
  }
}
```

以下のコマンドを実行しました。
```
$ javac JSample10_1.java 
$ java JSample10_1 
0；26481
1；20140
2；37117
3；28207
4；21306
5；36196
6；22338
```

# まとめ

何かの役に立てばと。