OmniAICreator/Qiita-1.07M huggingface dataset:
Reactで覚えとくべきポイント


## コンポーネントの定義
コンポーネントはjavaScriptの関数として定義する

```jsx
function Hello(){
  return <h1>hello</h1>;
  // コンポーネントはJSXを返す
}
```
コンポーネントの実行
```jsx
<Hello />
```
アロー関数でも定義できる
```jsx
const Hello = () => {
  return <h1>hello</h1>;
}
// const Hello = () => <h1>hello</h1>; も可
```

複数行になるときは丸括弧で囲む
```jsx
const Hello = () => {
  return (
    <div>
      <h1>hello</h1>
    </div>
  );
}
```
```jsx
const Hello = () => (
  <div>
    <h1>hello</h1>
  </div>
);
```

## JSX内のJSの書き方
{ }を使用する
```jsx
function Hello(){
  const name = "taro"
  return <h1>hello {name}</h1>;
}
// {}の中にJavaScirptのコードを埋め込むことができる　※式のみ（文はNG）
```
配列を渡した場合は自動的に中身が展開される
```jsx
function Hello(){
  const names = ["taro", "jiro"]
  return <h1>hello {names}</h1>;
}
// => hello tarajiro
```
HTMLもJavaScriptのオブジェクトとみなせる
```jsx
function Hello(){
  const name = <h1>taro</h1>;
  return name
}
```
propsで効率よくオブジェクトを渡す（スプレット演算子を使用する）
```jsx
function Example(){
  const taro = {
    age: 10,
    height: 150
  };

  return (
    <>
      <Child {...taro}/>
    </>
  )
}
```
## props.cheildrenの使い方
```jsx
const Example = () => {
  return (
    <div>
      <Container name="人名">
        {"taro"}
      </Container>
    </div>
  );
};
```
コンポーネントの開始タグと終了タグで囲んだ中身がchildrenに入る
```jsx
const Container = (props) => {
  console.log(props);
  // => {name: '人名', children: 'taro'}
  return (
    <div className="container">
      <p></p>
    </div>
  );
};
```
そのため、分割代入で使用できる
```jsx
const Container = ({ name, children }) => {
  return (
    <div className="container">
      <p>{name}:{children}</p>
    </div>
  );
};
```
配列にすることもできる
```jsx
const Example = () => {
  return (
    <div>
      <Container name="人名" children={["taro"]} />
    </div>
  );
};
```
初めてプロジェクトに参画する方へプロジェクトとタスクの意味について

こんにちは、小磯と申します。
プロジェクトに初めて参画する場合、プロジェクトの意味やタスクの認識が合っているか不安になりますね。
参画した際に「プロジェクト」や「タスク」という言葉を毎日使うことになると思います。
PM(PMO)が始めての方へ参考になればと思います。


## 「プロジェクト」と「タスク」について
正確に理解している方は意外と少ないかもしれませんので、言葉の理解を深めていただければと思います。
理解することで、認識齟齬の減少に繋がればと思います。


### 1.プロジェクトとは
業務の組織とは別に、目的を達成するために臨時で構成される組織やその業務のことです。
コンピューターシステムの開発において、大規模な開発ではプロジェクトを組む場合が多いです。

 - プロジェクトの定義として、以下の項目を挙げせていただきました。
　　①複数の業務の集合によって1つの目標を達成する
　　②目標の規模が小さくても、大きくても構わない
　　③人間の手によって遂行されるものである
　　④社内だけでなく、他社と協力して遂行することが多い
　　⑤目標達成までの期限が決まっている
　　⑥スタート地点とゴール地点が必ずある
　　⑦中間地点を管理し、進捗状況を確認する
　　⑧ほとんどの場合集団で取り組むものである


### 2.タスクとは
英語では「業務、課題、任務、役目、作業」の意味があり、日本では「プロジェクトを遂行するための1つ1つの作業」という意味で使用させることが多いです。
海外でもタスクという言葉を使用すると、同じような意味で通じます。
タスクとは「やるべき仕事」のことです。「タスクを割り当てる」という表現は、プロジェクトマネージャーがチームごとに仕事を振り分けることを意味し、
「タスクが完了した」という表現をすれば、その仕事が完了したことを意味します。

 - タスクとして、以下の項目を挙げせていただきました。
　　①業務実態調査
　　②業務課題分析
　　③リスク分析
　　④システム要件定義
　　⑤運用計画立案
　　⑥システム外部設計
　　⑦システム内部設計
　　⑧プログラム開発
　　⑨定例進捗会議
　　⑩プログラム単体テスト
　　⑪プログラム結合テスト
　　⑫システム総合テスト
　　⑬システム運用テスト
　　⑭システム本格稼働


### 3.プロジェクトとタスクの関係性と違い
プロジェクトはビジネス上の目標を達成するため、様々な業務で構成され必要な人材や設備を計画します。
プロジェクトを達成するための業務をタスクと呼び、タスクを1つ1つ完了させることで1つのプロジェクトを達成することができます。


### 4.プロジェクトが失敗する要因
企業の中には大小様々なプロジェクトがあり同時進行で取り組まれています。
すべてのプロジェクトが成功するわけではなく、プロジェクトの中には様々な要因が重なり、失敗することもあります。
　　①チームのコミュニケーション不足
　　②プロジェクトの明確な指針がない
　　③指揮系統が乱れている
　　④プロジェクトスケジュールがタイト


### 5.プロジェクトを成功させる方法とポイント
　　①ゴール、目的を明確にする
　　②プロジェクトマネジメントを徹底する
　　③プロジェクトチームの連携を重要視する
　　④プロジェクトメンバー個人の意識を高める
　　⑤リスクの予防


## まとめ
プロジェクトを上手く進めるためには、各個人の意識も大切ですがプロジェクトマネージャーを筆頭に行うプロジェクトマネジメントも重要な要素になってきます。
今後、様々なプロジェクトに参画したくさんの経験をしていくと思いますが、自分勝手に行動せずチームメンバーと齟齬がないよう認識合わせを行った上でタスクを遂行していただければと思います。
自分だけで実施することが難しい場合は、チームメンバーやプロジェクトマネージャーに相談し効率的な対応を行っていただければと思います。


以上、小磯でした。
【エクセル】あまり知られていない？ショートカット

## はじめに
エンジニアの長谷川と申します。
エクセルやスプレッドシートで利用可能なショートカットを３つほど、
現場で教えた時に喜ばれたので投稿します。

## Ctrl+R
これは左のセルを右にコピーするショートカットです。

この状態でC2を選択してCtrl+Rを押すと・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/79ad2d40-e6d9-32db-1fca-768422a06427.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/b851022f-5587-95b4-43c9-843ce2726e4f.png)

B2のセルがコピーされます。

複数のセルに対してまとめてコピーしたいときは、B2を含めて選択します。
この状態でCtrl+Rを押すと・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/0acca44e-0168-4d99-0d75-99695bf3893e.png)

まとめてコピー出来ちゃいます！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/22d31f88-616f-d76d-d815-8fb1af6d87d2.png)

## Ctrl+D
これは上のセルを下にコピーします。Ctrl+Rの方向違いですね。

B3を選択した状態でCtrl+Dを押すと・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/30d46d72-8540-3ac4-4d98-cfc9cdd7df7d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/deb7f16a-5d7d-c809-ec9d-8fca67a808c2.png)
B3にコピーされます。

B2を含めて下にあるセルを選択し、Ctrl+Dを押すと・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/a5cbc234-a05d-5c9b-8345-c862f66125fa.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/a9a673e3-36ee-7605-89d7-e38a0e94c22c.png)

こちらも選択した範囲内にコピーします。

## F4
最後はこちら。
F4は最後に実行した書式設定を再実行します。

例えば、B2からD2のセルを黄色にしたとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/be518ea0-5061-a8ea-99d4-4181cbb5e7c0.png)

B4のセルを選択してF4を押すと・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/16cfc6c6-0046-8833-46ba-bbf5b31c8878.png)

B4が黄色くなりました。

同様にセルの結合であったり文字の配置なんかも対象になりますので、
「セルが飛び飛びになっているけど同じ書式にしたい」
といった場合に便利です。

## おわりに
如何でしたでしょうか。
「右にコピー」や「下にコピー」があるなら、
「上にコピー」や「左にコピー」はないの？と考えた方もいらっしゃると思います。
残念ながらないです。Ctrl+UやCtrl+Lは別のコマンドに割り当てられています・・・。
以上、長谷川でした。
JavaでAWSのS3ストレージからファイルをダウンロードする方法

こんにちは、東です。
前回はJavaを利用してS3ストレージからファイルをアップロードする方法を
まとめましたので、今回はダウンロードについてです。

前回：[JavaでAWSのS3ストレージからファイルをアップロードする方法](https://qiita.com/pesysyon/items/25c5580fec3df92ee38f)

# 必要なことは？
以下のものが必要になります。
・__「ユーザーID」__ →IAMユーザーのユーザーID
・__「シークレットアクセスキー」__ →IAMユーザーのシークレットアクセスキー
・__「リージョン名」__ →S3コンテナが配置されている地域のリージョン名
・__「ファイルパス」__ →アップロードされたファイルの格納パス文字列
となります。

流れとしては
1.認証情報を用意
↓
2.S3へアクセスするクライアントを作成。
↓
3.ファイルをダウンロードする。
↓
4.ブラウザへ書き出す。

という流れになります。
では、詳しく見ていきましょう。

# 手順
### 1.認証情報を用意
前回同様、AWSのS3ストレージへアクセスするためには、
**「アクセスID」** **「シークレットアクセスキー」** というユーザーIDとパスワードにあたるものが必要です。
また、S3ストレージがある **「リージョン」** という情報も必要です。
以下に参考にさせていただ記事を載せさせていただきます。

https://www.jpcyber.com/support/create-iam-user-and-iam-policy

### 2.S3へアクセスするクライアントを作成。
続いてJava上でS3ストレージにアクセスできるようにアカウント情報を設定します。
``AwsBasicCredentials``というクラスが用意されているので、**「アクセスID」** **「シークレットアクセスキー」** を渡すことで戻り値でCredential情報を取得できます。
上で取得したCredential情報を``AmazonS3ClientBuilder``に渡すだけで
AmazonS3クライアント情報を簡単に組み立てることができます。
コード的には以下のようになります。

```ruby:Java
// S3クライアントを作成
public AmazonS3 getAmazonS3Account {
    // アクセスID、シークレットアクセスキーを設定する
    AwsBasicCredentials credentials = AwsBasicCredentials.create("アクセスID",
        "シークレットアクセスキー");

    // AmazonS3ClientBuilderを使用してクライアント情報を組み立てる
    AmazonS3 client = AmazonS3ClientBuilder.standard()
        .withCredentials(new AWSStaticCredentialsProvider(credentials)).withRegion(Regions.fromName("リージョン名"))
        .build();
    return client;
  }
```

### 3.ファイルをダウンロードする。
アップロードとは少々異なり、``GetObjectRequest``というクラスを使用して __リクエスト__ を組み立てる必要があります。
GetObjectRequestへS3の __バケット名、ファイルパス（ファイルの格納場所）__ を渡すことでリクエスト情報を作成します。
上記のリクエストを``.getObject``というメソッドに渡すことで``S3Object``という型でファイル情報を取得できます。
コードとしては以下のようになります。

```ruby:Java
// ファイルをダウンロードする
public S3Object downloadFile (String "バケット名", String "ファイルパス"){
    // リクエストを組み立てる
    GetObjectRequest request = new GetObjectRequest("バケット名","ファイルパス")
    // S3からオブジェクトとして取得
    S3Object object = getaAmazonS3().getObject(request);
    return object;
}
```
### 4.ファイルをブラウザへ書き出す。
上記のコードを実行することでS3上にあるファイルが取得できますが、``S3Object``という型はこのままでは使用することができません。
そのため``S3ObjectInputStream``を使用しブラウザへ書き出す処理が必要になります。
コードとしては以下のようになります。

```ruby:Java
  public void downloadToBrowser(HttpServletResponse response, String "バケット名", String "ファイルパス")
      throws Exception {
    try {
    // S3からファイルをダウンロード
      S3Object object = downloadFile("バケット名","ファイルパス");
    
    // getOutputStreamを使用しブラウザへ書き出す
      int length = 0;
      byte[] buffer = new byte[1024];
      S3ObjectInputStream inputStream = object.getObjectContent();
      BufferedInputStream bufferedInputStream = new BufferedInputStream(inputStream);
      OutputStream outputStream = response.getOutputStream();
      while ((length = inputStream.read(buffer)) >= 0) {
        outputStream.write(buffer, 0, length);
      }
      bufferedInputStream.close();
    } catch (Exception e) {
      throw e;
    }
  }
```
こうすることでファイルがブラウザへダウンロードされるかと思います。

# まとめ
前回に引き続きS3からファイルをダウンロードする方法についてまとめました。
見ていただけた方のご参考にしていただければ幸いです。
ありがとうございました！
M5NanoC6で温度センサー、Grove - Temperature Sensor V1.2で遊ぶ




x かころぐみよ

参考




![o_coq399.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/863987e3-3847-6611-3983-ac37043a4b76.jpeg)




![o_coq401.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/6bff85b1-f05e-b2f2-b61a-4b2e65dbbc13.jpeg)


https://qiita.com/caa45040/items/3c3da5c79f0c80f8d30a



結果

![o_coq484.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/9f416593-7d2b-f22b-d1ad-761b76715ead.jpeg)


![o_coq485.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/48528f6a-4cc0-8352-c837-0a89296a3224.jpeg)


プログラム(おもに3.3V化と電圧化)



```c++


// Demo code for Grove - Temperature Sensor V1.1/1.2
// Loovee @ 2015-8-26

#include <math.h>

const int B = 4275;               // B value of the thermistor
const int R0 = 100000;            // R0 = 100k

//const int pinTempSensor = A0;     // Grove - Temperature Sensor connect to A0
const int pinTempSensor = 1;     // Grove - Temperature Sensor connect to G1


#if defined(ARDUINO_ARCH_AVR)
#define debug  Serial
#elif defined(ARDUINO_ARCH_SAMD) ||  defined(ARDUINO_ARCH_SAM)
#define debug  SerialUSB
#else
#define debug  Serial
#endif

void setup()
{
    Serial.begin(9600);
}

void loop()
{
    int a = analogRead(pinTempSensor);

    //float R = 1023.0/a-1.0;
    //R = R0*R;
    float R,v1,a1,o1; 
    v1 = ((float)a) * 0.001; //電圧を求める
    a1 = v1 / 100000.0;           //電流を求める
    o1 = 5.0 / a1;                //全体の抵抗を求める
    R = o1 - 100000.0;    //全体の抵抗から検出抵抗を引く

    float temperature = 1.0/(log(R/R0)/B+1/298.15)-273.15; // convert to temperature via datasheet

    Serial.print("temperature = ");
    Serial.println(temperature);

    delay(100);
}



```
[C言語 #4] 「文字列」と「数値」を触ってみよう

<!--
 <font color="c00000"></font> 赤
-->
## はじめに
こんにちは、前回#3で「文字コード」について触れたので
今回は **<font color="c00000">「文字列」と「数値」</font>** について紹介したいと思います。

## 文字列について
:rolling_eyes: そういえばプログラムだとよく「"文字"」というように<font color="c00000">**ダブルクォーテーション**</font>でかこってありますよね
:upside_down: 文字1文字に対して、複数の文字の並びを「**文字列リテラル**（string literal）」といいます。C言語では、文字列は文字と異なり、「''（シングルクォート）」ではなく「""（ダブルクォーテーション）」で括って記述します。
```c
#include <stdio.h>
int main(void)
{
    // ダブルクォーテーションで括る.
	printf("Hello World");
	return 0;
}
```
![スクリーンショット 2024-10-03 223106.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/88a8fa68-f8d7-c393-f742-c166cc72de48.png)

:upside_down: 上記のコード例のようにprintfでも、()の中で**文字列**を使用しています。これで実行すると画面に出力された文字には、" "が**つきません**ので注意が必要です。

## 数値の扱い方
C言語のコードでは、<font color="c00000">**「数値」**</font>を記述することもできます。
例えば数値には次のような種類があります。

**整数値（整数定数）** → 1, 3, 50, 100, 10000など

**小数（浮動小数点定数）** → 1.14, 0.001, 3.14など

数値は「' '」や「" "」では**括らない**で記述します。数値を出力する場合には、%d「（整数）」、%f「（浮動小数点数）」という変換仕様を使います。
```c
#include <stdio.h>
int main(void)
{
	// 数値を出力します.
	printf("\n"); // 改行.
 
	printf(" %dは整数です。\n", 100);
	printf(" %fは小数です。\n", 3.14);
	return 0;
}
```
![スクリーンショット 2024-10-03 071458.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/fa1a7c2d-30ca-e624-7015-526d248e469f.png)
:upside_down: これで正しく表示されましたね
:rolling_eyes: あれ？3.14の後に0が**複数ついてますね** なんででしょうか？
:upside_down: %fは「浮動小数点数」の出力形式で、<font color="c00000">**小数点以下6桁まで表示**</font>されます。従って3.14が**3.140000**として表示されたのです。

:::note info
小数点以下の桁数を調整したい場合、**「%.2f」** などの形式を使用して<font color="c00000">**桁数を指定**</font>することができます。
:::

![スクリーンショット 2024-10-03 225144.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/c16b8945-b26e-689b-f380-a9e23a06dd62.png)

:upside_down: 他にも色々な書式指定がありますので興味ある方は[**こちら**](https://www.freecodecamp.org/japanese/news/format-specifiers-in-c/)をご覧ください

### ○○進数表記
先ほどコードで整数の表示もしましたが、一般的な数値の表記法以外にも、色々な記述方法があります。例えば**8進数**や**16進数**...など

:::note info
■ 8進数　→　数値の先頭に「**0**」をつけます
■ 16進数　→　数値の先頭に「**0x**」をつけます
:::

```c
#include <stdio.h>
int main(void)
{
	// ダブルクォーテーションで括る.
	printf("\n"); // 改行.

	printf(" 10進数の「10」は%dです。\n", 10);
	printf(" 8進数の「10」は%dです。\n", 010);
	printf(" 16進数の「10」は%dです。\n", 0x10);

	printf("\n");
	return 0;
}
```
![スクリーンショット 2024-10-03 231039.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/eb3a7aa2-1e62-d8dd-8b35-03487320590f.png)

## おわりに
今回のちょっとしたまとめになります。

:::note info
文字列は「**" "**」で括って表記する。**数値は括らない**
:::
:::note info
**整数は%d**、**浮動小数点は%f**を変換として使用する
:::
:::note info
整数を表すときは、8進数や16進数を使うこともある
:::

この部分の内容でしたら一定の文字や数値を画面に表示するコードを作成することができます。最後までお読みいただきありがとうございました！

> **「参考書」**
[やさしいC 第5版 (「やさしい」シリーズ)](https://www.amazon.co.jp/%E3%82%84%E3%81%95%E3%81%97%E3%81%84C-%E7%AC%AC5%E7%89%88-%E3%80%8C%E3%82%84%E3%81%95%E3%81%97%E3%81%84%E3%80%8D%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E9%AB%98%E6%A9%8B-%E9%BA%BB%E5%A5%88/dp/4797392584)
>
> **「参考サイト」**
[文字コード](https://9cguide.appspot.com/14-01.html)
>
M5NanoC6でコンデンサーマイク入力、Grove - Sound Sensorで遊ぶ





x 過去ログを見ょ!!

参考


![o_coq411.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/62aeb65d-b026-364b-8bb4-24e02c61074f.jpeg)




https://qiita.com/caa45040/items/4d96876075fdccc564f9



結果

![o_coq481.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/a619c7c6-10c8-cc06-bb3d-bc6ab1039a54.jpeg)

![o_coq482.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/ade23fe3-d738-dfda-8ac2-5035caeb7160.jpeg)


プログラム


pinAdcを変更した



```c++


// test code for Grove - Sound Sensor
// loovee @ 2016-8-30

const int pinAdc = 1;

void setup()
{
    Serial.begin(115200);
    //Serial.println("Grove - Sound Sensor Test...");
}

void loop()
{
    long sum = 0;
    for(int i=0; i<32; i++)
    {
        sum += analogRead(pinAdc);
    }

    sum >>= 5;

    Serial.println(sum);
    delay(10);
}



```
Vercelで簡単！Reactアプリを無料でデプロイする方法


こんにちは、とまだです。

別記事で React アプリを作った際、Vercel というサービスを使ってアプリをデプロイしました。

https://qiita.com/tomada/items/10cb738918060159ccfe

その知見を元に、Vercel で React アプリをデプロイする手順をまとめてみました！

みなさんのお役に立てれば幸いです。

## Vercel とは？

Vercel は、フロントエンドアプリケーションのホスティングに特化したプラットフォームです。

React 以外にも、Next.js、Vue.js など、人気のフレームワークやライブラリに対応していることで知られています。

## 前提条件

まず、以下の準備ができていることを確認してください。

1. GitHub アカウントを持っていること
2. React アプリを作成済みであること
3. GitHub に React アプリのリポジトリを作成済みであること

これらの準備ができていれば、すぐにデプロイを始められます！

## デプロイ手順

### Step 1: Vercel にログイン

まず、Vercel の公式サイトにアクセスしましょう。

1. ブラウザで https://vercel.com/login を開きます。
2. 「Continue with GitHub」ボタンをクリックして、GitHub アカウントでログインします。

![Vercelログイン画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364501/c0367fa6-e38b-be3e-ff90-352454b90e9f.png)

### Step 2: 新しいプロジェクトを追加

ログインしたら、新しいプロジェクトを作成します。

1. ダッシュボードの右上にある「Add New」ボタンをクリックします。
2. ドロップダウンメニューから「Project」を選択します。

![新規プロジェクト追加](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364501/810ee615-0c0a-b6ac-fe0e-54195c601d09.png)

### Step 3: GitHub リポジトリを選択

次に、デプロイしたい React アプリの GitHub リポジトリを選択します。

1. リポジトリの一覧から、デプロイしたい React アプリのリポジトリを探します。
2. 該当するリポジトリの「Import」ボタンをクリックします。

![GitHubリポジトリの選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364501/ddf267cd-6ce8-d80f-5a86-bfad1bcf8285.png)

:::note warn
初めて Vercel を使用する場合、GitHub との連携を求められることがあります。
その場合は、画面の指示に従って連携を行っていただければ大丈夫です。
:::

### Step 4: プロジェクト設定とデプロイ

リポジトリを選択したら、プロジェクトの設定を行います。

1. 「Framework Preset」で「Create React App」を選択します。
2. 他の設定はデフォルトのままで問題ありません。
3. 画面下部の「Deploy」ボタンをクリックして、デプロイを開始します。

![プロジェクト設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364501/2acfcaa0-c343-ee14-a97f-d61007bcde6d.png)

### Step 5: デプロイの進行

「Deploy」ボタンをクリックすると、Vercel が自動的にデプロイプロセスを開始します。

1. 画面上でデプロイの進行状況を確認できます。
2. ビルド、テスト、デプロイの各段階が自動的に実行されます。

![デプロイ進行中](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364501/3afd670c-724d-2d9b-df0f-7a03fdee395a.png)

### Step 6: デプロイ完了

デプロイが成功すると、完了画面が表示されます。

1. 「Congratulations!」というメッセージが表示されます。
2. デプロイされたアプリの URL も表示されます。

![デプロイ完了](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364501/31379b1b-9d3c-5714-0c3d-8cbf0019e750.png)

### Step 7: ダッシュボードの確認

1. 「Continue to Dashboard」ボタンをクリックして、プロジェクトのダッシュボードに移動します。
2. ダッシュボードでは、デプロイの履歴、パフォーマンス統計、設定などを確認できます。

![プロジェクトダッシュボード](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364501/7ed1cfda-7903-eb48-63bb-ef6ef8eac3ec.png)

### Step 8: デプロイされたアプリの確認

1. ダッシュボードの「Domains」セクションに表示されている URL をクリックします。
2. ブラウザで新しいタブが開き、デプロイされた React アプリが表示されます。

以下は、デプロイされたアプリの例です。

![デプロイされたアプリ例1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364501/edbfed9a-368a-754f-097c-ffc7cf9bedce.png)

アプリが正常に動作していることを確認しましょう。

![デプロイされたアプリ例2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364501/22d23a39-0a2e-5823-0c11-2144c7036de5.png)

## まとめ

お疲れさまでした！これで、あなたの React アプリが Vercel 上で公開されました。

他にも、押さえておくべきポイントがいくつかありますので、以下にまとめておきます。

- Vercel は、GitHub と連携することで簡単にデプロイできます。
- デプロイ後も、GitHub リポジトリに変更をプッシュするたびに自動的に再デプロイされます。
- Vercel のダッシュボードから、デプロイの履歴やパフォーマンスを簡単に確認できます。

Vercel を使えば、複雑な設定なしで簡単に React アプリをデプロイできます。ぜひ、自分のプロジェクトでも試してみてください！
Git rebase時のコンフリクト解消法

# はじめに
最近git rebase後に発生したコンフリクトをビビりながら解消した。
もう二度と冷や汗をかかないようにするべく、備忘録がてら再現してみる。

# 手順①：初期状態の作成
まずはrebase後にコンフリクトを発生させるために図の状態になるようコミットを作成する。

※hoge・fugaはブランチ名、[A-E] はコミットを示している。
![Git rebase時のコンフリクト解消法.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3897239/a45da876-665c-3705-7992-fe685ed82619.jpeg)

この時、hogeのCコミットとfugaのDコミットの間でコンフリクトが発生するようにする。

# 手順②：rebaseの実行
手順①で作成した状態から、以下のイメージになるようrebaseコマンドを実行する。
※fugaブランチ上で git rebase hoge

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3897239/3b9fcb40-c283-4e8a-6fae-f87017199e52.png)


この時コンフリクトが発生すればOK(手順①でそうなるようにしたため)。

この発生したコンフリクトを解消する時に、fugaのEコミットの内容を上書きする形で修正してほしい。すると再度コンフリクトが発生するはず。

なぜならrebaseとは「派生先ブランチの各コミットが、既に適用されている直前のコミットに対して順番に適用される動き」だからである。筆者はここが理解できておらず解消するときに焦ることとなった。

分かりやすくするため、この説明に今回のrebaseの流れを当てはめてみる。

まず初めに、rebase先はhogeブランチのCコミットなので「既に適用されている直前のコミット」はCコミットとなる。

「派生先ブランチ(=fuga)の各コミット」にはfugaのDとEが該当するが、「順番に適用される」ので今回はfugaブランチのDコミットになる。

そしてC・D間のコンフリクトを解消したもの(D'コミット)がCコミットの直後に適用される。

↓図にするとこんなイメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3897239/e1be5c60-9f84-8bc7-95cc-4086b41bb1a1.png)
以上で1回目の処理は完了。


続いて2回目の処理だ。

先ほどと同様にrebaseの説明に各コミットを当てはめると
「既に適用されている直前のコミット =  先ほど適用したD'コミット」
「順番に適用される派生先ブランチの各コミット = fugaのEコミット(Dは1回目に適用済み)」
となる。

D'コミットはEコミットとコンフリクトが発生するようにしたので、これを解決したもの(E'コミット)がD'コミットの直後に適用される。

↓図にするとこんなイメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3897239/628b5851-4c06-bdab-9460-47585e566363.png)

以上で今回のrebase処理は完了となる。

# まとめ
結局、今回の状況で焦ってしまった理由は、rebaseの知識が足りないこともあるがmergeばかり使用していたからだと思う。

mergeであれば各ブランチの最新のコミット同士で比較・統合するので、rebaseのように順番に適用されることがなくコンフリクトが発生したとしても1回で抑えられる。

このせいで「コンフリクト=1回しか起きないもの」と思い込み、rebase時に発生した複数回のコンフリクトにビビってしまった。

実務の時に焦らないためにも、やっぱり勉強って大事だなと痛感した出来事だった。
MySQLでネストされたjsonデータを更新する方法

JSON_INSERT, JSON_REPLACE, JSON_SETを使い、ドット（.）でネストを指定できる

```
UPDATE table_name SET json_column = JSON_INSERT(json_column, "$.nestedField.Id", "value of id")
```

ちなみにbulk updateではこのように書ける
```
UPDATE table_name SET json_column = ELT(FIELD(id, 'id1', 'id2'), JSON_INSERT(json_column, '$.nestedField.Id', 'nestedFieldId1'), JSON_INSERT(json_column, '$.nestedField.Id', 'nestedFieldId2')) WHERE id IN ('id1', 'id2')
```
知名度低そうなシェルピンスキーのギャスケットの作り方


## 1. 真っ黒！

<img width=600 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649673/0e73d5ee-3a9d-63e7-315c-2d8cc229e4c2.png>

## 2. 右下を白にする

<img width=600 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649673/3ac0c33b-aebe-328c-137a-cf88a0f65611.png>

## 3. 各黒い区間の右下を白にする

<img width=600 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649673/992aa28a-d66c-b71f-44e9-dd65daabdfec.png>

## 4. 繰り返す

<img width=600 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649673/7f3a18fe-8d25-9309-110a-535803ddaeff.png>

## 5. 繰り返す

<img width=600 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649673/ab7f2469-c670-33bc-4345-90ca366199b7.png>

## 6. 繰り返しまくる！

<img width=600 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649673/0ac4738b-b1d5-1c11-9dae-b2327200cafe.png>

終わり。

どうでもいいけど、こいつ（n→∞）の面積は0らしいね。面白い。

## 関連

https://ja.wikipedia.org/wiki/%E3%82%B7%E3%82%A7%E3%83%AB%E3%83%94%E3%83%B3%E3%82%B9%E3%82%AD%E3%83%BC%E3%81%AE%E3%82%AB%E3%83%BC%E3%83%9A%E3%83%83%E3%83%88

## おまけ

<details><summary>JSのコード</summary>

```js
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 800;

const count = 10;

draw();

function draw() {
    context.fillStyle = "black";
    context.fillRect(0, 0, canvas.width, canvas.height);

    let blockList = [{
        color: "black",
        startX: 0,
        startY: 0,
        width: canvas.width,
        height: canvas.height
    }];

    for (let i = 0; i <= count; i++) {
        let tmpBlockList = [];
        for (const block of blockList) {
            if (block.width < 2 || block.height < 2) {
                i = Number.POSITIVE_INFINITY;
                break;
            }
            drawBlock(block);
            if (block.color === "black") {
                tmpBlockList = tmpBlockList.concat(splitBlock(block));
            }
        }
        blockList = tmpBlockList;
    }
}

function splitBlock(block) {
    const {startX, startY, width, height} = block;

    const width1 = Math.floor(width / 2);
    const width2 = width - width1;
    const height1 = Math.floor(height / 2);
    const height2 = height - height1;
    const startX1 = startX;
    const startX2 = startX + width1;
    const startY1 = startY;
    const startY2 = startY + height1;

    return [
        {color: "black", startX: startX1, startY: startY1, width: width1, height: height1},
        {color: "black", startX: startX2, startY: startY1, width: width2, height: height1},
        {color: "black", startX: startX1, startY: startY2, width: width1, height: height2},
        {color: "white", startX: startX2, startY: startY2, width: width2, height: height2},
    ];
}

function drawBlock(block) {
    if (block.color === "black") {
        return;
    }
    context.fillStyle = "white";
    context.fillRect(block.startX, block.startY, block.width, block.height);
}
```

</details>
ReactでGoogleFontsを読み込む

## はじめに
時間割アプリの開発にあたって、GoogleFontsのフォントを使用しました。
そこで今回はReactにおけるGoogleFontsの使い方を解説します。

## 使い方
ReactでGooglFontsを使用する場合2つの方法があります。
・index.htmlで読み込む(一般的)
・JavaScriptファイルで読み込み

### 使い分け
- index.htmlで読み込む場合
全ページで共通してフォントを使うとき
- JavaScriptファイルで読み込む場合
特定のコンポーネントやページでのみフォントを使いたいとき

### index.htmlで読み込む方法
1\.プロジェクトの`public`フォルダ内にある`index.html`を開く
2\.`<head>`タグの中にGoogleFontsのコードをコピペする

### JavaScriptファイルで読み込む方法
1\.`index.js`や`App.js`の中に、`<link>`タグを動的に挿入するコードを追加する

例：Robotoフォントを特定のコンポーネントでのみフォントを読み込みたい場合
```jsx
import React from 'react';

const loadGoogleFont = () => {
  const link = document.createElement('link');
  link.href = 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap';
  link.rel = 'stylesheet';
  document.head.appendChild(link);
};

function App() {
  React.useEffect(() => {
    loadGoogleFont();
  }, []);

  return (
    <div>
      {/* 他のコンポーネント */}
    </div>
  );
}

export default App;

```

## スタイルでフォント指定
index.htmlにGoogle Fontsを追加しただけでは、フォントが自動的に適用されないため。CSSでフォントを明示的に指定する必要がある。
以下のように`style.css`で指定することもできれば、コンポーネントの`style`内で指定することも可能。

```.css
body {
  font-family: 'Roboto', sans-serif;
}
```
```.jsx
import React from 'react';
import './style.css';

function App() {
  return (
    <div style={{ fontFamily: "'Roboto', sans-serif" }}>
      {/* 他のコンポーネント */}
      <h1>Robotoフォントを使用</h1>
    </div>
  );
}

export default App;
```

## さいごに
これだけでGoogleFontsを適用することができます！
基本はindex.htmlでの読み込みを行うときがほとんどだと思いますが、そのフォントの使い所を正しく把握していれば、JSファイルを使った読み込みがてきたりと、より適切に美しくコンポーネント分けができそうです。

>時間割アプリで使用した他の機能はこちら

https://qiita.com/naoki-atjp/items/d71c2bac6b4edefbddcb

https://qiita.com/naoki-atjp/items/bc8a7028aba7d3725832

https://qiita.com/naoki-atjp/items/43aab60a1ff7e6bc8291

https://qiita.com/naoki-atjp/items/d361465174a20abf84f4
【UE5】エディタ再起したらなぜか C++ クラスが見えなくなる

# なにがおきているのか
C++ クラスを作成し、プログラムを書き、コンパイルすると、Content Browser に作成したクラス名が表示される。
しかし、エディタを再起するとあるはずのクラスが見えなくなっている。なんならマップに配置したクラスも消えている。
(↓この例だと PlaySound が見えなくなる)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2348896/dbb0fc0d-2f39-ba57-92b7-fd385136b6ee.png)

# 直し方
プロジェクトフォルダ内の Binaries と Intermediate を削除する
削除することで、バイナリファイルが再生成されて直る。

# 考察
多分だが git を使用してブランチを切り替えたために起こった。存在するはずのクラスがなく、逆になかったものがある状態になって、バイナリファイルなどが上手く再生成できていないのではないかと考える。
JSXファイル内でのCSS記述 Styled-components

## はじめに
時間割アプリの開発にあたってReactでのCSSの適用方法を理解したので、そちらをまとめていきます。
CSSを記述する方法はいくつかありますが、今回はコンポーネントベースで管理しやすい`Styled-components`について解説します。

## ReactでのCSS適用方法の種類
- CSS Modules: 
単純なスタイル定義や、CSSの知識をそのまま活かしたい場合。
- Styled-components/Emotion: 
動的なスタイルや、コンポーネントベースでスタイルを厳密に管理したい場合。
- Inline Styles:
少量の動的なスタイル変更が必要な場合。
- Sass (SCSS):
ネストや変数など、高度なCSS機能を必要とする場合。

## `Styled-components`とは
`Styled-components`は、CSSをJavaScript内で宣言的に書けるライブラリのこと。
コンポーネントごとにスタイルを定義し、直接それに適用できる。
コンポーネント単位でスタイルが分離され、再利用性が高いことがメリット。
〈使用場面〉
・コンポーネント単位でスタイルを完全に管理したい場合
・動的にスタイルを変更する必要がある場合

## `Styled-components`の使い方
1\.`Styled-components`をインストール
```
npm install styled-components
```
2\.スタイルをReactコンポーネント内で定義
スタイルが必要なHTMLタグに対して、関数コンポーネントを定義し置き換えていく。
` `` `でスタイル部分を囲うことで、本来のCSSと同じ記法で記述が可能。
また、SCSSのようにネストすることもできる。
```jsx
import styled from 'styled-components';

// Styled-componentsでCSSを記述
const Header = styled.header`
  height: 100%;
  background-color: #2C65C7;
  padding: 38px 40px;
`;

const HeaderSchoolList = styled.div`
  display: flex;
  justify-content: space-between;
`;

const HeaderSchoolLeft = styled.ul`
  display: flex;
  width: 100%;
`;

const HeaderSchoolName = styled.li`
  display: flex;
  background-color: #fff;
  align-items: center;
  max-width: 100px;
  width: 100%;
  height: 40px;
  text-align: center;
  font-size: 14px;
  border-radius: 2px;
  margin-right: 20px;

  &:last-of-type {
    margin-right: 0;
  }

  img {
    width: 16px;
    height: 18px;
    margin-inline: 10px;
  }

  p {
    margin-right: 3px;
  }
`;

// コンポーネント
export const AppHeader = () => {
  return (
    <Header>
      <HeaderSchoolList>
        <HeaderSchoolLeft>
          <HeaderSchoolName>
            <img src="/images/school.png" alt="校舎イラスト" />
            <p>北28条</p>
          </HeaderSchoolName>
          <HeaderSchoolName>
            <img src="/images/school.png" alt="校舎イラスト" />
            <p>南平岸</p>
          </HeaderSchoolName>
        </HeaderSchoolLeft>
        <HeaderSchoolName>
          <img src="/images/school.png" alt="校舎イラスト" />
          <p>山の手</p>
        </HeaderSchoolName>
      </HeaderSchoolList>
    </Header>
  );
};
```

## さいごに
以上、`Styled-components`ライブラリによるCSSの記述方法でした。
コンポーネントごとに分けてスタイルを適用できる点が、個人的には良かったです。

>時間割アプリで使用した他の機能はこちら

https://qiita.com/naoki-atjp/items/d71c2bac6b4edefbddcb

https://qiita.com/naoki-atjp/items/bc8a7028aba7d3725832

https://qiita.com/naoki-atjp/items/e890c89452dec8573fbd

https://qiita.com/naoki-atjp/items/d361465174a20abf84f4
WSLの基本操作

# はじめに

最近WSL（WSL2）を触る機会があり、WSLに関する記事も幾つか投稿してきたので、ついでに基本操作について記事としてまとめてみました。


# WSLの実行

* `wsl`のみで実行すると、既定のディストリビューション（※後述）が起動します。
* `wsl --distribution {仮想マシン名}`と指定すると、指定したディストリビューション（仮想マシン）が起動します。

```powershell:WSLの実行
PS C:\Users\NKOJIMA> wsl --distribution docker-desktop
```


# 仮想マシン（ディストリビューション）の一覧表示

* `wsl --list`を実行すると、利用可能な仮想マシンの一覧が表示されます。

```powershell:仮想マシン（ディストリビューション）の一覧表示
PS C:\Users\NKOJIMA> wsl --list
Linux 用 Windows サブシステム ディストリビューション:
Ubuntu (既定)
docker-desktop
docker-desktop-data
```


# 仮想マシンのシャットダウン

* `wsl --terminate {仮想マシン名}`を実行すると、指定した仮想マシン（ディストリビューション）をシャットダウンできます。
  * ここで指定する仮想マシン名（ディストリビューション名）は、上記の`wsl --list`で得られる仮想マシン名となります。

```powershell:仮想マシンのシャットダウン
PS C:\Users\NKOJIMA> wsl --terminate docker-desktop
この操作を正しく終了しました。
```

# WSL全体のシャットダウン

* `wsl --shutdown`を実行すると、仮想マシン（ディストリビューション）単位ではなく、WSL全体をシャットダウンできます。
  * WSL全体をシャットダウンすることはそれほど多くないと思うので、仮想マシンをシャットダウンする場合は`wsl --terminate {仮想マシン名}`を使うケースが多そうです。

# 既定の仮想マシンの設定

* [こちらの記事](https://qiita.com/nkojima/items/bbf82fb505eeb1c52ed9)のように、Docker Desktopが規定のプログラムになっていて不都合な時などは、`wsl --setdefault {仮想マシン名}`で既定の仮想マシン（ディストリビューション）を設定します。

```
PS C:\Users\NKOJIMA> wsl --setdefault Ubuntu
この操作を正しく終了しました。
```


# 参考URL

* [WSLが起動しない場合の対処方法](https://qiita.com/nkojima/items/bbf82fb505eeb1c52ed9)
* [WSL --shutodownと--terminateの違いについて](https://zenn.dev/ryuu/scraps/a3857eca1e6d7c)
AWS S3のバケットの中身をローカルにzipでダウンロードする

## やりたいこと
業務でAWSリソースの整理をしておりいくつか使用していなさそうなS3を発見。
そのまま削除してしまうのも怖いし、アーカイブ用に残しておくのもコストがかかるので、
ローカルにZIPでダウンロードしてからGoogleドライブで保管しようと考えました。

S3が複数ある場合にマネコンでポチポチやるのも面倒なので、バケットの中身をローカルに落としてからZIP形式に圧縮するまでを自動化するスクリプトを組んで行こうと思います。 

## 前提条件

- AWS CLIをインストール済みであること
- ./aws/配下の'config','credencial'ファイルを用意してAWS CLIが使用可能であること

## 準備
今回は対象のバケットが複数あったので、CSVファイルにバケット名を記載しておき、CSVファイルからバケット名を読み込むようにしていきます。
筆者のCSVファイルは以下のようにしました。
```
example,aa
test,bb

```

筆者の場合は、削除対象のs3バケットをNotionのdatabeseに記載し、CSVでエクスポートしたものを使用しました。
ここでポイントなのは、各行の１つ目の要素にバケット名を記載することです。
各行に大量の要素があることは問題ないです。
今回の例だと"example","test"がバケット名です。

## スクリプト

- CSV_FILE変数を、バケット名の入ったファイル名に変更
- export AWS_PROFILE=""にAWS CLIを実行するプロファイル名を記載
- s3_sync_to_local.shを実行
```
#s3_sync_to_local.sh
#!/bin/bash

export AWS_PROFILE=""

# CSVファイルのパス
CSV_FILE="xxxxxxxx.csv"

while IFS=',' read -r bucket_name _; do
    # バケット名の前後にある空白や改行を削除（トリム）
    bucket_name=$(echo "$bucket_name" | xargs)

    echo "Processing bucket: $bucket_name"

    # バケットごとのローカルディレクトリとZIPファイル名を設定
    LOCAL_DOWNLOAD_DIR="./s3_downloads/$bucket_name"
    ZIP_FILE="$bucket_name.zip"

    # ローカルのダウンロードディレクトリを作成
    mkdir -p $LOCAL_DOWNLOAD_DIR

    # S3バケットの内容をローカルに同期
    aws s3 sync s3://$bucket_name $LOCAL_DOWNLOAD_DIR

    # 同期した内容をZIP形式に圧縮
    zip -r $ZIP_FILE $LOCAL_DOWNLOAD_DIR

    # 圧縮が完了したら、必要に応じてダウンロードディレクトリを削除
    # rm -rf $LOCAL_DOWNLOAD_DIR

    echo "Bucket $bucket_name has been downloaded and compressed into $ZIP_FILE"

done < "$CSV_FILE"
```

スクリプトを実行すると、以下が作成されます。
- ./s3_downloads配下に、バケット名毎のディレクトリと、バケットのオブジェクト
- "$bucket_name.zip"ファイル（S3の中身が圧縮されています）

## おわりに

何かを削除するには入念な調査と、万が一に備えて復元できる事が大切だと最近強く学びました。
読んでくれた方の時間を10分でも削減できたら嬉しいです。
「Sticky Note Map」地図上でチャットができるＷｅｂ地図

【Sticky Note Map】
（Office-Shirado）
https://github.com/office-shirado/sticky_note_map

（amx-project）
https://amx-project.github.io/note/

【リミット１２】
https://chosashi-data.org/shirado/limit12/

このたび、クチコミＷｅｂ地図のリミット１２の世界版を作ろうということで、ＡＭＸプロジェクトのメンバーで始めました。（現在、ラスボスと裏ボスで進めています。）

![スクリーンショット 2024-10-04 00.08.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67836/7a28496f-85e8-c632-a090-97fb41bb52b7.png)

「Sticky Note」、つまり付箋を地図につけていくイメージから、「Sticky Note Map」と名付けました。

Ｗｅｂ地図の機能としては、
　・任意の場所にダブルクリック（ダブルタップ）で投稿できる。
　・投稿されたポイントをクリックすると詳細が見える
　・現時点では１２時間で表示が消える（数日になる可能性あり）
とシンプルな機能のみです。

リミット１２を少し使って分かったのは、
　・地図と関係ない場所でも投稿し、地図上で会話をする
　・地図と関係のある投稿は、案内図的な役割をする
 ということでした。

 Sticky Note Mapは、MySQLを使用しており、ＡＰＩ・プラグイン化を目指しています。
 ※誰でもAPI・プラグインを使用すれば、データ登録・参照できる

 投稿ポイントは、ダイナミックジオデータ（動的データ）であるため、タイル作成はしておりません。
 ※人気が出てから考えます！

 ![スクリーンショット 2024-10-04 00.09.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67836/88ee45da-e30a-53c1-a272-5a603461ff87.png)
![スクリーンショット 2024-10-04 00.09.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67836/aea713bc-c4d7-dba0-99fc-b95a9c68145b.png)

投稿ポイントのデータは、ＡＰＩを使えば、誰でも表示・投稿ができます。
※マニュアル等は作っておりませんので、Githubのソースとにらめっこしてください。


Ｗｅｂ地図上でのコミュニケーションは実際にやってみると楽しくて、日常会話的な投稿も楽しめることが分かりました。また、非常時にはリミット１２と同様に災害支援情報を共有することも可能かと思っております。

リミット１２・Ｓｔｉｃｋｙ Ｎｏｔｅ Ｍａｐというコミュニケーション型Ｗｅｂ地図は、これからますますの可能性を秘めているかと思います。

現時点では、両方ともログインなどの制限を設けておりませんので、お気軽に投稿して頂ければと思います。
※リミット１２及びSticky Note Mapの投稿互換（両方に表示される）はありません。

リミット１２及びSticky Note Mapの両方をたくさん使い、必要な修正・改良をして更に楽しく使えるＷｅｂ地図を目指したいと思います。

ぜひ、１度アクセス・投稿頂ければと思います。
※ダブルクリック（タップ）するだけですｗｗｗ
[Unity] 新規プロジェクト作成時に発生するエラー CS1061 の解決方法

# はじめに
はじめましてyuu-1230です。

先日、初めてのハッカソンにチャレンジしてきたので、その時Unityで発生したエラー、学んだことなどをお伝えできればと思います。

初投稿で読みにくいところがありますが、読んでいただけたら嬉しいです！

急いでる方は**解決方法**を先にお読みください。

# エラーメッセージ
```
error CS1061: 'Material' does not contain a definition 
for 'rawRenderQueue' and no accessible extension method 'rawRenderQueue' 
accepting a first argument of type 'Material' could be found 
(are you missing a using directive or an assembly reference?)

```
# 事の経緯
**～ハッカソンに参加する２週間前～**

**Unity hub : 3.9.1**
**Unity Editorのバージョン : 2021.3.35f1**

PLATEAUとUnityを学ぶイベントへ参加！

UnityにPLATEAU SDK for Unityをインポートした際にエラーが発生。

「（みんなと同じ環境、バージョン、方法でやったんだけどなぁ）でも、なんとかなるさ！」

と思い都市モデルデータを読み込み！
<br>

![スクリーンショット 2024-10-03 220941.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3895885/72945a0e-71b8-b898-9eb7-64e40c6b6e9f.png)

（↑エラーが出た状態のスクショを忘れていたので当時のPULATEAUのイメージ貼っときます）

**読み込んだ結果**

建物の側面だけテクスチャ画像が抜け落ちてピンク色になってしまった。

```
error CS1061: 'Material' does not contain a definition 
for 'rawRenderQueue' and no accessible extension method 'rawRenderQueue' 
accepting a first argument of type 'Material' could be found 
(are you missing a using directive or an assembly reference?)
```

エラーメッセージを見てみると

「'Material'クラスに'rawRenderQueue'が定義されていないよ」

ということらしい。

とりあえず
大人の方々に聞いても解決できず、
Google先生に聞いても解決できず...

私はUnityを再インストールした。

それでもエラーメッセージは消えず、それどころかUnityで新規プロジェクトを作成した瞬間からエラーメッセージを吐くようになってしまった。
（なお、エラーメッセージの内容は同じ模様）

あきらめて、ハッカソン当日にベテランの方に解決してもらうことに...
<br>
**～ハッカソン当日～**

ベテランの方に事の経緯を説明すると...
<br>
ベテランの方　「だいたい、再起動、再インストールすれば治るとおもいますよ！」

私　「再インストール、しっかりProgram files の中のUnity Hubまるまる削除したけど何がいけないのでしょうか？」

ベテランの方　「ちゃんとUninstall Unity Hubからアンインストールしてます？」

私　「！？」

という流れ間違った方法でアンインストールしていました（；；）
<br>
話の落ちがモヤモヤする感じになってしまいましたが最終的に、

これまでのデータをUnity Hubからすべて消す　⇒　Uninstall Unity Hubを起動しアンインストール ⇒ パソコンをシャットダウン ⇒ 起動 ⇒ Unity Hubをインストールの流れで解決することが出来ました！

再インストール後↓

**Unity Editorのバージョン : 2022.3.47f1**
# 解決方法
これまでのデータをUnity Hubからすべて消す（やらなくてもいいかも？）　⇒　****Uninstall Unity Hub****を起動しアンインストール ⇒ パソコンをシャットダウン ⇒ 起動 ⇒ Unity Hubをインストールの流れで解決することが出来ました！

# 終わりに

今回の経験を通してエラーが出たときの対処法（とりあえずググる　⇒　ダメだったら再起動、再インストール）など初歩的だけどとても大切なことを学べた。

ハッカソンに関しては、ハッカソンが始まる前にエラーを解決できたものの、自分の技術不足でチームの開発にあまり関われなかったので次回参加するときまでに少しずつできることを増やしていきたいと思いました。（スライドはしっかり作りました！＞＜）

教えてくださったベテランの方へ

多分、見ていないと思いますが４時間ほど付きっきりで自分の知らない技術的なこと、エラーに関わることを教えて下さり本当にありがとうございました。
WSL で LaTeX

# はじめに
この記事は書きかけです。
後々、VScode についても追記します。

# WSL に TeXLive をインストールする

## WSL のインストール
まずは WSL をインストールしましょう。PowerShell での操作は以下の通りです。
インストールが完了したら、画面に従ってユーザー名とパスワードを設定してください。
```powershell:PowerShell
wsl --install
```

## TeXLive のインストール
続いて、ubuntu での操作を行います。

### アップデート&アップグレード
```bash:Ubuntu
sudo apt -y update && sudo apt -y upgrade
```

### TeXLive のインストール
まず、wget でインストーラを DL して解凍します。
```bash:Ubuntu
cd /tmp
wget https://mirror.ctan.org/systems/texlive/tlnet/install-tl-unx.tar.gz
zcat < install-tl-unx.tar.gz | tar xf -
```

次に、解凍したディレクトリに移動し、perl でインストールを開始してください。
おま環ですが2時間程度かかりました。
```bash:Ubuntu
cd install-tl-yyyymmdd/
sudo perl ./install-tl --no-interaction
```

最後に、パスを通せばとりあえず LaTeX が使えるようになるはずです。
私の場合は /home/user/.bashrc の最後に以下の3行を追加しました。
```.bashrc
export MANPATH="/usr/local/texlive/2024/texmf-dist/doc/man:$MANPATH"
export INFOPATH="/usr/local/texlive/2024/texmf-dist/doc/info:$INFOPATH"
export PATH="/usr/local/texlive/2024/bin/x86_64-linux:$PATH"
```

# VScode で LaTeX を扱う
## VScode のインストール
### VScode のインストール
### 必要な Extensions のインストール
## LaTeXWorkshop の設定
## VScode 上で WSL に接続し LaTeX を記述&コンパイル
DifyではじめてのRAG（"GoogleSeach" APIを利用）

# AI, LLM, RAG, Dify, ...
LLM（Large Language Model）、RAG（Retrieval-Augmented Generation）など、AI技術を利用して業務の効率化を図ることが多くなっています。こんなことを考えることはないでしょうか？
- わからないことがあったときになんでも答えてくれるAIが欲しい...
- AIを問い合わせ対応に利用したい...

こうしたときに、社内情報を回答してもらうには、社内情報を検索し、その結果をLLMに渡し、回答を作成する流れになります。いわゆる RAG（Retrieval-Augmented Generation：検索拡張生成）というものですね。

また、業務で使用するには、誤った情報は大敵ですので、AIの知識で答えさせる必要はなく、検索結果の要約と引用元を教えてもらう流れにするのがよさそうです。

Difyはこうした流れをローコードで簡単に作ることができるということですので、試してみました。
SaaSとしても、セルフホストでも簡単に始めることができます。

ローカルでのセルフホストの記事はこちら↓

https://qiita.com/k-kariya/items/1e6540703ffd601907c7

# 作ってみました
参考にしたのはこちらのページ

https://qiita.com/minorun365/items/4c5dba1de7977c386249

まずはより簡単に、SaaSで試してみます。
参考ページの時点からは進化していて、「最初から作成」から始めることになります。
2024/10/0現在では、ほぼほぼ参考ページの内容で構築できるのですが、一か所動作しない部分がありました。

### 検索結果を受け取るには
Serp API: Google Search API を使うところなのですが、このアウトプットはtextではなくjsonに入ってくるようなのです。なので、textを次のフローに渡しても何も渡していないことになり、LLMがLLMの知識で答えることに・・・

そこでjsonを渡すと、次のようなエラーになってしまいます。
`Invalid context structure`
調べてみると次の事象のようでした。

https://github.com/langgenius/dify/issues/8095
バージョン0.6.xまでは動作していたようですが、現行バージョンではJSONの構造に'content'がないとエラーになるんですね。この対応は、サンプルの「Interview Preparation」にありました。Google Search API の後に「Code」ノードをつなげ、JSONをテキスト形式に変換するようです。

```python
def main(arg1):
    import json
    data = json.dumps(arg1)
    return {
        'result': data 
    }
```
コードはPythonかJavascriptが使えるようです。
これで動作しました。

### 検索キーワードをアレンジ
せっかくなので、少しアレンジを加えてみます。
開始とGoogle Search の間にLLMノードを追加し、次のようなプロンプトを入力します。


>あなたはGoogle検索のための検索語ジェネレーターです。[入力内容]をもとにGoogle検索をするための検索キーワードを出力します。
>
>出力は「」や""は使わず、キーワードとsite設定をスペース区切りで並べます。
>[入力内容]：{{#input#}}

### 特定のサイトのみ検索
正確な情報だけほしいので、公式サイトのみ検索させます。Googleの場合は" site:aaa.com"のような書き方で設定できます。GoogleSearch検索ノードのQuery Stringに加えましょう。

### 回答を作成
例えば次のようなプロンプトを設定します。目的に応じて書き換えていくことで精度が高くなりそうです。
> あなたは優秀な検索アシスタントシステムです。
> [検索結果]をもとに[問い合わせ内容]に対する回答を行います。
> 回答は[検索結果]をもとに日本語で回答します。引用元を確認できるよう、[検索結果]のURLへのリンクもすべて引用元として回答の後に出力してください。
> 
> [問い合わせ内容]：{{#input#}}
> [検索結果]：以下の内容
> {{#context#}}

# まとめ
上記のような簡単な設定で、それなりに正確な情報源となりうるRAG応答システムが構築できそうな感じでした。元ネタがGoogle検索結果のスニペットだけなのですが、それなりに返してきます。
このあたりの動作の中身がログに残っていて、各ノードの入出力内容が簡単に確認できるので、改善に役立てられそうです。
2024年10月4日現在、Difyの情報はインターネット上にまだ少ないようで、検索に苦労しますが、テンプレートがいろいろ用意されているので、そちらのほうが参考になりそうな感じでした。
社內情報をナレッジとして登録し、検索・參照して回答することも簡単にできます。今後活用していくのが楽しみです。

## 補足
今回紹介した[GoogleSearch]APIはフリープランだと月100回までなのですが、GoogleのCustom Search APIを使うと１日100回まで無料になりますので、そちらの記事もどうぞ！

https://qiita.com/k-kariya/items/d91a2c24da42d0109c25
チュートリアルのアセット dodge_assets.zip リンク切れだよ～

今注目のオープンなゲームエンジンGodot、やってみるかー
まずはチュートリアルだよね
[最初の2Dゲーム？](https://docs.godotengine.org/ja/4.x/getting_started/first_2d_game/01.project_setup.html)　ふむふむ。

> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36775/8cd3a6e6-9854-1b72-1949-e03c23ac2831.png)

リンク切れてるYo!

A.

ドキュメントの古いのにはあります。
（今のバージョンでうまく動くかは別問題）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36775/064671ad-9994-1a5a-6ad7-708f1a86d1d6.png)

にゅ、っと出てくるので、3.? を選ぶ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36775/d9617f42-084e-88e2-b615-40ebc0479e1b.png)

リンク活きてます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36775/c2fbc808-20da-dddd-522b-c12a7d209547.png)

enjoy happy godot life!
CH32V003 + MounRiver StudioでWS2812Bを光らす

というわけで、無事にLチカが終わって何をしようかというところで、
WS2812B(NeoPixel)を光らせるプログラムを作ってみましたと。

Arduinoならライブラリもあって簡単そうなんだけど、
この先やりたいことを考えるとMounRiver Studioでやっとくのが良さそうだったので
とりあえずやってみました。


色々試行錯誤した痕跡を残したコードがこちら。

```c
void Ws2812bShow(uint8_t* pixels, uint32_t numBytes)
{
	uint8_t* ptr = pixels;
	uint8_t* end = ptr + numBytes;
	uint8_t p = *ptr++;
	uint8_t bitMask = 0x80;

	while (1) {
		if (p & bitMask) { // ONE
		    // High 580-1000nsec
//          GPIO_WriteBit(GPIOD, GPIO_Pin_0, Bit_SET);
//          GPIO_Write(GPIOD, 0x01);
            GPIOD->BSHR = 1;
            __asm volatile (
                "nop; nop; nop; nop; nop; nop; nop; nop;"
                "nop; nop; nop; nop;"
            );

		    // Low 580-1000nsec
//          GPIO_WriteBit(GPIOD, GPIO_Pin_0, Bit_RESET);
//          GPIO_Write(GPIOD, 0x00);
            GPIOD->BCR = 1;
            __asm volatile (
                "nop; nop; nop; nop;"
            );
		} else {   // ZERO
		    // High 220-380nsec
//          GPIO_WriteBit(GPIOD, GPIO_Pin_0, Bit_SET);
//          GPIO_Write(GPIOD, 0x01);
		    GPIOD->BSHR = 1;    //220nsec
//          __asm volatile (
//              "nop;"
//          );

		    // Low 580-1000nsec
//          GPIO_WriteBit(GPIOD, GPIO_Pin_0, Bit_RESET);
//          GPIO_Write(GPIOD, 0x00);
            GPIOD->BCR = 1;

            __asm volatile (
                "nop; nop; nop; nop; nop;"
            );
		}

		if (bitMask >>= 1) {
		    // Move on to the next pixel
		    asm("nop;");
		}
		else {
		    if (ptr >= end) {
		    break;
		    }
		    p = *ptr++;
		    bitMask = 0x80;
		}
	}

	Delay_Us(250);
}
```

基本的な作りはAdafruitのライブラリのソースから。(256行目～)
https://github.com/adafruit/Adafruit_NeoPixel/blob/master/Adafruit_NeoPixel.cpp


```c
//          GPIO_WriteBit(GPIOD, GPIO_Pin_0, Bit_SET);
//          GPIO_Write(GPIOD, 0x01);
            GPIOD->BSHR = 1;
```
ハマったポイントとしてはここ。
GPIOのサンプルソースでは、ピンの出力をON/OFFするのに
GPIO_WriteBit関数を使っているのですが、この関数を使うと1->0に500マイクロ秒ほどかかってしまい、
T0H=220～380ナノ秒を満たせません。
GPIO_Writeを使っても同じ。
おそらく関数呼び出しのスループットで処理時間がかかってしまっているのが原因。

ということで、ライブラリの方のやり方を参考にして
GPIOD->BSHR = 1;  //GPIO ポートDの1bit目をセット
GPIOD->BCR  = 1;  //GPIO ポートDの1bit目をクリア
とすると呼び出しのスループット無しでビット操作ができました。

ただ、これでも1->0は220ナノ秒ほどかかるので、
WS2812Bの制御に使うにはギリギリのタイミングでした。

あとは、単純な条件分岐だけでもちょっと変更すると命令数が増減して
160ナノ秒単位でズレていくので、処理を全部決め打ちしてからの
nop;数での微調整が必要でした。
オシロスコープとにらめっこするのはお手軽な「電子工作」からかけ離れるので
あまり好きじゃないのですが。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469946/59947b12-be9d-8bd1-cae3-f74650a33852.png)

まあ、一度作ってしまえば同じ処理で使い回せるので最初に使い勝手の良い関数を作ってしまえば
こっちのものという感じです。
今日はここまでにしてまた少しずつ進めます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469946/ab752b88-6456-bf3d-11a0-be886ddf9b65.png)
rex0220 計算式プラグイン ボタンクリックでテーブル行追加（FSET_TADD版）

計算式プラグインを使って、ボタンクリックでテーブル行を追加する例（FSET_TADD版）です。

# 概要

「共通タスク追加」で、テーブルを初期設定。
「Xタスク追加」、「Yタスク追加」で、テーブル行を追加します。

「完了日時設定」で、作業ステータスが "完了"の場合、日時に現在時刻を設定します。

※計算式プラグイン Ver.82 以降で対応

![2024-10-03_23h57_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/83619247-30e1-4117-835f-a44b06ef1661.png)

# 操作例

![2024-10-04_00h03_09.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/200424be-60f8-be28-1923-f8799f28f3f5.gif)

# アプリ設定

スペース項目を追加します。
ボタン用にスペース項目を要素IDをつけて設定

![2024-10-04_00h05_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/ff9d5764-d527-441c-ee79-c1ab8526fead.png)

# 計算式プラグイン設定

テーブル行追加ボタンクリックで、「テーブル」に追加データを設定します。
「完了日時設定」で、作業ステータスが「完了」行の日時に現在時刻を設定します。

FSET_TADD 関数は、テーブル行データに JSON 文字列またはオブジェクト形式を指定できます。

- JSON 文字列
    - "[
       {'作業ステータス':'未着手','タスク名':'Xタスク1','期日':'"&TODAY()&"','チェックボックス':['A']},
       {'作業ステータス':'未着手','タスク名':'Xタスク2','期日':'"&TODAY()&"'},
       {'作業ステータス':'未着手','タスク名':'Xタスク3','期日':'"&TODAY()&"'}
    ]"
- オブジェクト形式
    - ARRAY_FOR(3,idx,
      DIC(
        "作業ステータス","未着手",
        "タスク名","Yタスク"&(idx+1),
        "期日",TODAY(),
        "チェックボックス",ARRAY("B")
      )
    )


![2024-10-04_00h09_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/32ec2ba0-2872-294f-9266-928819257f53.png)

```.js
OPTION: 循環参照を許可

// SP1:(SP1) SPACER
BUTTON("共通タスク追加",
  FSET(タスク,
    ARRAY("",
            "[
            {'作業ステータス':'未着手','タスク名':'タスク1','期日':'"&TODAY()&"'},
            {'作業ステータス':'未着手','タスク名':'タスク2','期日':'"&TODAY()&"'},
            {'作業ステータス':'未着手','タスク名':'タスク3','期日':'"&TODAY()&"'}
            ]"
    )
  )
)

// SP2:(SP2) SPACER
BUTTON("Xタスク追加",
  FSET_TADD(タスク,
    "[
       {'作業ステータス':'未着手','タスク名':'Xタスク1','期日':'"&TODAY()&"','チェックボックス':['A']},
       {'作業ステータス':'未着手','タスク名':'Xタスク2','期日':'"&TODAY()&"'},
       {'作業ステータス':'未着手','タスク名':'Xタスク3','期日':'"&TODAY()&"'}
    ]"
  )
)

// SP3:(SP3) SPACER
BUTTON("Yタスク追加",
  FSET_TADD(タスク,
    ARRAY_FOR(3,idx,
      DIC(
        "作業ステータス","未着手",
        "タスク名","Yタスク"&(idx+1),
        "期日",TODAY(),
        "チェックボックス",ARRAY("B")
      )
    )
  )
)

// SP4:(SP4) SPACER
BUTTON("完了日時設定",
  ARRAY_MAP(TARRAY(作業ステータス),x,idx,
     IF(AND(x="完了",SUBTABLE(日時,idx)=""),
       FSET(日時,NOW(),idx)       
     )
  )
)

// SP5:(SP5) SPACER
BUTTON("完了日時設定2",
  SUMIF(AND(作業ステータス="完了",日時=""),
       FSET(日時,NOW(),ROWNO(タスク))       
  )
)
```
【python】globを用いたファイル検索

## はじめに
Pythonでプログラミングをしていると、ファイルやディレクトリを扱う機会が多くあります。
特に**特定のパターン**に一致するファイルを検索したい場合、**glob**モジュールが便利です。

globモジュールは、ファイル名パターンマッチングを簡単に行うことができる[Python標準ライブラリ]("https://docs.python.org/ja/3/library/index.html")です。


>標準ライブラリ（standard library）とは、プログラミング言語の処理系に標準で付属するライブラリ。部品化されたプログラムなどが収録されており、開発者は言語仕様の一部のようにすべての実行環境に存在する前提で利用することができる。
>引用元：https://e-words.jp/w/%E6%A8%99%E6%BA%96%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA.html

ファイル名の一部に「*」や「?」などの**ワイルドカード**を用いて、柔軟にファイル検索ができます。

:::note info
ワイルドカードとは
「*」（アスタリスク）：0個以上の任意の文字列にマッチします。
「?」（クエスチョンマーク）：任意の1文字にマッチします。
「[]」（角括弧）：括弧内の任意の1文字にマッチします。
:::


## なぜファイル検索にglobをつかうのか

理由は以下の三つです。

1.簡単な構文：複雑なファイル操作も数行のコードで実装できる。
2.柔軟性：ワイルドカードを用いて多様な検索パターンを指定できる。
3.効率性：大量のファイルを素早く検索できる。

では早速、globの使い方を見ていきましょう。

## globの基本的な使い方

まずglobモジュールを使うには、以下のようにインポートします。
```python
import glob
```

globモジュールの中心となる関数は、```glob.glob()```です。
この関数は、指定されたパターンに一致するすべてのパス名の**リスト**を返します。

:::note info
戻り値がリストであることの重要性
1.```glob.glob()```はマッチしたすべてのファイルパスをリスト型で返します。
2.一つのパターンで複数のファイルにマッチした場合、それらすべてのファイルパスがリスト要素として含まれます。
3.マッチしたファイルに対して繰り返し処理が可能です。
4.リスト操作を直接適用することが可能です。
:::

例えば、カレントディレクトリ内のすべてのPythonファイル（.py）を検索したい場合、以下のようにします。

```Python

python_files = glob.glob('*.py')
print(pyton_files)
```
このコードを実行すると、カレントディレクトリ内のすべての.pyファイルのリストが表示されます。

## 主なワイルドカードの使用

```python
import glob

# 1. '*' : 0個以上の任意の文字列にマッチ
python_files = glob.glob('*.py')
print("Pythonファイル:", python_files)

# 2. '?' : 任意の1文字にマッチ
single_char_files = glob.glob('file?.txt')
print("1文字のワイルドカード:", single_char_files)

# 3. '[]' : 括弧内の任意の1文字にマッチ
range_files = glob.glob('file[1-3].txt')
print("文字範囲指定:", range_files)

# ボーナス: 複数のワイルドカードの組み合わせ
complex_files = glob.glob('*_[0-9]*.pdf')
print("複合パターン:", complex_files)
```

各ワイルドカードの説明:

__*__: 0個以上の任意の文字列にマッチします。
例えば、*.py は全ての Python ファイルにマッチします。

**?**: 任意の1文字にマッチします。
例えば、file?.txt は file1.txt, fileA.txt などにマッチしますが、file10.txt にはマッチしません。

**[]**: 括弧内の任意の1文字にマッチします。
範囲指定も可能です。例えば、file[1-3].txt は file1.txt, file2.txt, file3.txt にマッチします。


ボーナスの例では、これらのワイルドカードを組み合わせて、より複雑なパターンマッチングを行っています。

:::note info
重要なポイント:
glob.glob() は常にリストを返します。マッチするファイルがない場合は空のリスト [] が返されます。
返されるリストの各要素は文字列型のファイルパスです。
:::

## 実践的な例
### 特定のディレクトリ内のファイル一覧を取得
特定のディレクトリ内のファイルを検索したい場合は、パスを指定します。

```python
import glob
import os

pdf_files = glob.glob(os.path.join('Documents', '*.pdf'))
for file in pdf_files:
    print(file)
```

## まとめ
```glob```モジュールを使うことで、Pythonでのファイル検索が容易になります。
その利点は、
* 簡単なコードでファイル検索ができる
* ワイルドカードを使って柔軟な検索パターンを指定できる
* 大量のファイルを効率的に処理できる

基本的な使用シーンとしては：
* 特定の拡張子を持つファイルの検索
* 特定のパターンに一致するファイル名の検索
* ディレクトリ内のファイル一覧の取得


globモジュールは、これらの基本的なファイル操作を簡単に行えるだけではなく、複雑なファイル処理タスクの基礎にもなるので、ぜひ覚えておきたいライブラリです。きｓき
Node-RED Raspberry Pi 三角波形

Node-REDは無事動いたが
今後通信させたときにOPC UAの時のように三角波形を出したかったので
functionを使用してみた。
Node-REDはノンコーディングが利点と書いてあった気がしたが気にしない。

https://qiita.com/1994koki/items/45ca298d50511feb8498

# 完成したフロー
functionはJavaScriptのようなのでSTで書いた内容はそのまま使用できない。
ちょっとネットで調べてみたけど型変換とかがうまくいかず思うように動かなかったので
ChatGPT先生に聞いて、ちょこっと触ったところ上手くいきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3852763/f7de50eb-451c-bee5-96e8-0e1964c88b6b.png)

# プログラム
# 三角波形作成部分(function 1)
```ruby:初期化処理
flow.set("icount", 0);
flow.set("bonoff", false);
flow.set("bupdown", false);
flow.set("irate", 100);
flow.set("isignal", 1000);
```

```ruby:コード
let icount = flow.get("icount") || 0;
let bonoff = flow.get("bonoff") ;
let bupdown = flow.get("bupdown") ;
let irate = flow.get("irate") ;
let isignal = flow.get("isignal") ;

icount = icount + 1;

//ONOFF
if(icount % 20 == 0){
    bonoff= !(bonoff);
}

//Sig
if(isignal > 11000 || isignal < -1000){  
    irate = irate* ((2 * (bupdown ? 1 : 0)) - 1);
    bupdown =!(bupdown);
}
isignal = isignal + irate;

flow.set("icount", icount);
flow.set("bonoff", bonoff);
flow.set("bupdown", bupdown);
flow.set("irate", irate);
flow.set("isignal", isignal);

msg.payload = {
    icount: icount,
    bonoff: bonoff,
    bupdown: bupdown,
    irate: irate,
    isignal: isignal
};
return msg;
```

# 三角波形取り出し部分(isignal toridasi)
```ruby:コード
var isignal =msg.payload.isignal;
msg.payload=isignal ;
return msg;
```

# 完成したダッシュボード画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3852763/4d9f8a1c-b006-3928-59ba-9ddf48f4e9ae.png)


# 次回予定
今度はTCPかUDPを使って、Node-RED同士で通信させようかと思っています。