OmniAICreator/Qiita-1.07M huggingface dataset:
「Webアプリ簡単作成法」をWinPythonで起動する

# はじめに
@okoppe8さんの以下の記事にあるテンプレートをWinPythonで起動することに挑戦しました。結果としては起動することができたのでその手順をまとめます。

https://qiita.com/okoppe8/items/4cc0f87ea933749f5a49

# 前提
- WinPythonで起動させるところまでが今回の記事のゴールです。
- 「公開サーバーにデプロイして公開」については考慮しません。あくまで個々人のローカル環境で起動させることが目的です。ご了承願います。

# 環境
- WinPython: Winpython64-3.9.10.0dot

# そもそもWinPythonとは
私が以前投稿した記事が参考になるかと思います。

https://qiita.com/76r6qo698/items/46d04691b3ab896dd08e#winpython%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%8B

# 手順
1. 作業用のフォルダを任意の場所に作成します。

1. WinPythonをダウンロードして、解凍したものを用意します。
https://sourceforge.net/projects/winpython/files/

1. 2.の解凍してできたWinPythonのフォルダを作業用フォルダに移動させます。

1. @okoppe8さんが作成されたテンプレートをZIPでダウンロードします。
https://github.com/okoppe8/instant-django

1. 4.でダウンロードしたZIPファイルを展開します。

1. 3.で展開が完了すると、「instant-django-master」というフォルダができます。更にそのフォルダの中に同名の「instant-django-master」フォルダができてます。この中にある方の「instant-django-master」フォルダを作業用フォルダに移動させます。

1. 作業用フォルダに解凍したWinPythonのフォルダがあるはずです。そのWinPythonのフォルダから「WinPython Command Prompt.exe」を実行してコマンドプロンプトを起動します。

1. コマンドプロンプトに「cd 」(cdと半角スペース)と入力します。その後、作業用フォルダにあるはずの「instant-django-master」フォルダをドラッグしてコマンドプロンプトにドロップします。そこまでできたらEnterキーを押下します。
![win_instant.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3071987/e3e9ed29-4df2-4c3e-c7c5-a3add7dd42df.png)

1. コマンドプロンプトに以下のコマンドを入力してEnterキーを押下します。起動に必要なもののインストールが始まるので、成功するまで待ちます。
    ```
    pip install -r requirements.txt
    ```
1. 9.が成功したら、以下のコマンドを入力してEnterキーを押下します。アプリに必要なデータベースのテーブルを作成されます。成功するまで待ちます。
    ```
    python manage.py migrate
    ```
1. 10が成功したら、以下のコマンドを入力してEnterキーを押下します。その後、管理アカウント用のユーザー名・メールアドレス・パスワードが求められます。それぞれ任意に入力します。
    ```
    python manage.py createsuperuser
    ```
1. ここまでくれば準備完了です。以下のコマンドを入力してEnterキーを押下します。
    ```
    python manage.py runserver
    ```
    以下の内容がコマンドプロンプトに出力されれば起動成功です。
    ```
    System check identified no issues (0 silenced).
    June 24, 2023 - 19:17:28
    Django version 2.1.2, using settings 'config.settings'
    Starting development server at http://127.0.0.1:8000/
    Quit the server with CTRL-BREAK.
    ```
    成功したら、ブラウザのアドレスバーに以下のURLを入力してアクセスします。起動できているとログイン画面が表示れます。
    ```
    http://127.0.0.1:8000/
    ```
    以降は元記事の[2-4](https://qiita.com/okoppe8/items/4cc0f87ea933749f5a49#%EF%BC%92%EF%BC%94%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B)からと同様です。終了するときは「Ctrlキー+Breakキー」を押します。どこかわからない場合は「Ctrlキー+C」を何度か押してても終了します。

# 再び起動したい場合
手順の7.→8.→12. の手続きを踏めば再び実行できます。

# 終わりに
ファイルのダウンロード、フォルダの展開などの慣れた操作で環境構築・起動までできます。個人的にはすごく覚えやすいです！

以上です。

# 参考

https://qiita.com/okoppe8/items/4cc0f87ea933749f5a49

https://qiita.com/76r6qo698/items/46d04691b3ab896dd08e#winpython%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%8B
KivyのLabelウィジェットで日本語を扱う

# ご挨拶
はじめまして、**Reimy**と申します。よろしくお願いします。はじめてのQiita投稿です。弊社で過去に開発・販売したシステムを日本国内向けに日本語化しているのですが、いろいろなところでマルチバイト文字コードに悩まされています。

# 本題
まずはQiitaのデビュー戦ということで、Kivy の文字列を描画するウィジェットLabelで日本語をあつかうという簡単なところから始めさせてください。でも、同じ話題や投稿はたくさんありますね。

# 前提条件
**Kv Language**を使う方法もありますが、ここではPythonのみのコードで、とさせてください。それから個人使用では気にしなくてもいいことなのですが、商用で日本語表記を使う場合、フォントのライセンスも気になるところです。スマホアプリなどあらかじめシステムに入っているフォントを使用するならいいのですが、組み込みシステムなどの場合、OSが使う日本語フォントが入っていれば良いのですが、入っていない場合インストールしなければなりません。そのシステムが商用利用時は知的財産権等に引っかかることもあります。この場合**商用利用可能なフリーフォント**を使うことになります。ここでは、このフリーフォントを使った例をご説明いたします。フリーフォントは仮称で表記し、ファイル名**abcd.ttf** とします。

# デモコード
下記はウィンドウを表示して、ウィンドウ内に文字列を表示する処理です。

```main.py

    from kivy.app import App
    from kivy.uix.floatlayout import FloatLayout
    from kivy.uix.label import Label
    
    class   BNApp(App):
        def build(self):
            layout = FloatLayout()
            # 文字列を描画する
            title_label = Label(text='[color=ff3333]ブランシュネージュ',
                        # 使用するフォントの指定
                        font_name='abcd.ttf',
                        # フォントサイズの指定
                        font_size='30px',
                        # 描画座標位置の指定
                        pos=(50, 200),
                        # サイズの相対指定　高さの指定　Text Markup使用
                        size_hint=(1, None), height=40, markup=True)
            layout.add_widget(title_label)
            return layout

    if __name__ == '__main__':
        BNApp().run()
```

# 実行結果
<img width="400" alt="Result_Image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3345464/fd5a19d1-80f4-f436-c8de-8732b4231afc.png">



# コード解説
上記の例では、ウィンドウを表示してその中に文字列をLabelウィジェットで表示しています。表示したいテキストは、**textプロパティ**に '[color=ff3333]ブランシュネージュ' として指定しています。テキストの色は**Text Markup** を使って指定します。**Text Markup**でさまざまな装飾ができますが、ここでは割愛させてください。コード例では [color=ff3333] として**16進数カラーコード**を使って指定しています。また、ウィンドウ内の表示したい位置を指定するには、**posプロパティ**を使います。ここでは(100, 200)の座標を指定しています。この場合、文字列はウィンドウ内の (100, 200) の位置に配置されますが、注意しないといけないのは、この**座標は文字列の左下隅**となります。また、Kivyではウィンドウの左下隅を原点 (0, 0) としていますので、**OpenCVなどと併用するときは要注意**です。

# 参考ＵＲＬ
https://kivy.org/doc/stable/api-kivy.uix.label.html
Qiita 投稿のことはじめ

ふと思う、、、アウトプットが足りねぇ！！！

現在大学2年生、エンジニアになるために勉強してはいるものの、アウトプットが圧倒的に足りないとおもった。よし、とりあえずQiita書いてみよう！


まず書く前に、コードの書き方を一読。
参考にした記事
https://qiita.com/shizen-shin/items/a997bc228fa2850c9fce


ってことで、とりあえず事始めとして最近勉強したサポートベクターマシーン(svm)の備忘録書いていく。

## 今回やること
svmを使った簡単な分類問題を解いていきます。
使うデータはsklearnのワインのデータ。３つに分類していきます。
ほぼ教科書に載ってることですね。



### 必要なライブラリをインポート
サポートベクターマシーンに必要なライブラリをインポートします。
```python:python
import pandas as pd
import numpy as np
from sklearn.model_selection import train_test_split
from sklearn.preprocessing import StandardScaler
from sklearn.metrics import accuracy_score
import seaborn as sns

```


### 使用するデータを用意
```python:python
from sklearn.datasets import load_wine

wine = load_wine()  # データをロード
wine_df = pd.DataFrame(wine.data, columns=wine.feature_names)  # データをデータフレームに変換
wine_df["class"] = wine.target  # カラム[class]に目的変数を設定。
```

### 簡単にデータの分布を確認
```python:python
wine_df.describe()
```

### 訓練データとテストデータに分割 & 　標準化
svmが学習できるように説明変数を標準化していきます。
標準化とは平均を0、標準偏差を1にすることです。
```python:python
# 訓練データとテストデータに分割
x_train, x_test, t_train, t_test = train_test_split(wine.data, wine.target, random_state=0)

# データの標準化
std_scl = StandardScaler()
std_scl.fit(x_train)
x_train = std_scl.transform(x_train)
x_test = std_scl.transform(x_test)
```


### モデルの定義、学習、予測した後、評価
モデルを定義、学習、予測した後、
accuracy_scoreを使って今回の予測の正答率を計算します。
```python:python

model = LinearSVC(random_state=0)  # モデルを定義
model.fit(x_train, t_train)  # 学習

# 予測
y_test = model.predict(x_test)

# 正解率
acc_test = accuracy_score(t_test, y_test)
print(acc_train, acc_test)
```
1.0 1.0

今回テストに使用した45件のデータ全てにおいて正解することができました。
裏で行われている計算をもっと深く知っていきたいです。




## 最後に
今回初めてのQiita投稿ということで、試しにsvmの備忘録を記録しました。
結構楽しく書けたので、今後も投稿していきたいです！

ありがとうございました。

sklearnドキュメント
https://scikit-learn.org
【Swift】UIImageを重ねる

# はじめに
SwiftUIはめっちゃ使うんですが、UIKitはなかなか使わないので画像の重ね方が分かりませんでした。
調べたので記事にします。

# 実装
```swift
import UIKit

extension UIImage {
    public func overlay(image: UIImage, width: CGFloat = 100, height: CGFloat = 100) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(size, false, 0)

        draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height))

        let rect = CGRect(
            x: (size.width - width) / 2,
            y: (size.height - height) / 2,
            width: width,
            height: height
        )

        image.draw(in: rect)

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return image
    }
}
```

# 使い方
```swift
UIImage(named: "sample").overlay(image: UIImage(named: "overlay_image"))
```

# おわり
いい感じになりました

# 参考記事
https://faboplatform.github.io/SwiftDocs/1.uikit/060_uiimage/

https://qiita.com/tiqwab/items/846f548416f29b5ae85a

https://qiita.com/ken_sasaki2/items/9a6304e0cd47efddeca1

https://dev.classmethod.jp/articles/swift-generate-qr-code/
拡大線形符号、短縮符号、削除符号の概要

# 1. 拡大線形符号 (extended linear code)

拡張線形符号とも訳せる。

非線形符号では成り立たないため「線形 (linear)」が名前に含まれているが、単に「拡大符号」や「拡張符号」("extended code") と呼ばれることもある。

- $(n, k, d)$ 線形符号
- $(n+1, k, d')$ 拡大線形符号
    - $d$ が奇数のとき $d' = d+1$
    - $d$ が偶数のとき $d' = d$ または $d' = d+1$

検査符号に偶数パリティを追加する。

# 2. 短縮符号 (shortened code)

- $(n, k, d)$ 符号
- $(n-s, k-s, d')$ 短縮符号
    - $s < k$
    - $d' \ge d$

情報符号の長さ s の値を除去する (0 として扱う) 。

# 3. 削除符号 (punctured code)

- $(n, k, d)$ 符号
- $(n-s, k, d')$ 削除符号
    - $s < n-k$
    - $d' \ge d-s$

検査符号の長さ s の値を除去する。
【自分用メモ】「これだけKPT」を読んで

## 前提
- KPT とは : **振り返りに最適なフレームワーク**
- 効果 : 「カイゼンのサイクルが回す」ことができる、また「関係醸成」なども期待できる
- KPT の意味
    - K (keep) = 良かったこと、今後も続けること
    - P (problem) = 課題
    - T (try) = アクション、ネクストアクション

## 今後意識していきたいこと
- フォーマットには **「テーマ」** を指定することで思考や会話が散漫しにくくなる
- PDCA サイクルをまわすために必要な作業
    - PDCA サイクルの "Check（測定・評価）" が Keep/Problem、"Action（対策・改善）" が Try に該当
    - また KPT を行うことで、Plan（計画）を行う材料が出来る
- リーダーの仕事は **「チームの成果を最大にする」** こと
- チームを育てるとは 「問題解決能力を向上させる」 こと
- 計画はある程度叩きを作ってチームで詰めると、納得感があり能動的に動いてくれる
- 必要であればグラウンドルールを設定するのもあり
- 理想のチームにするためにすること
    - メンバーに対しちゃんと期待を伝える
- サーバントリーダーシップという奉仕型のリーダーシップスタイルもある
    - メンバーが自発的に動けるようサポート
- チームの成長プロセスとしてタックマンモデルを意識
    - 形成期・混乱期・統一期・機能期・散会期
        - 機能状態まで持っていくことを目標にすること
- 感情的にならず落ち着いてメンバーが動ける
- 目標を持たないチームはチームではない
- 会社組織でベクトルが揃っている状態にするためチームの目標を決める際は、チームが所属する組織の目標とリンクさせる
    - チームの目的と個人の目標もリンクさせる
- リフレーミング
    - 思考の枠組み変える
        - 例:problemをダメなところから、改善の起点になるものと考える

## ネクストアクション
**1. 目標設定は KPT で出た課題も考慮する**
    - 目標を持たないチームはチームではない
    - チームが所属する組織の目標とリンクできているかは確認する
    - 優先度 (重要度・緊急度) の上から実施

**2. 設定した目標はチームで納得感があるかを確認**
    - この際メンバーに期待をちゃんと伝える

**3. KPT を週次で実施し課題とネクストアクションを決めていく**

**4. サーバントリーダーシップはあってると思うのでメンバーのサポートの意識を持つ**

**5. 感情的にならないことも重要**

## 参考になったところのメモ

```
- 頻度は思い出すのが大変になるため、1週間程度がオススメ
- フォーマットにはテーマがあると良い。思考や会話が散漫しにくくなる
- やってることごマンネリと感じる時は、よりよくなる行動を起こしていない時
- ProblemやKeepの原因を考えてからTryを検討
- Keepに関してもTryを設け、良いものをより良くすることも改善
- 前回のTryが次のKeepになる
- PDCAをまわすにも有効活用できる
- PDCAのCがKeep/Problemに、AがTryに相当する
- KPTを行うことで、Planを行う材料が出来ることもある
- 計画はある程度叩きを作ってチームで詰めると、納得感があり能動的に動いてくれる
- リーダーの仕事はチームの成果を最大にすること
- 定例会議をはじめ、会議次第も振り返りの対象
- グラウンドルールを設定するのもあり
- 意見が出ない時は以下
    - グループに分ける
    - テーマを見直す
    - どういう所が良かったか、悪かったかなど意見を引き出す質問をする
- 理想のチームにするために
    - チームへの期待を伝える
    - 基本ルールを話し合って決める
    - 基本ルールから外れたら叱る
    - 基礎教育を行う
- チームを育てるとは
    - 問題解決能力を向上させること
- サーバントリーダーシップ
    - 奉仕型のリーダーシップ
    - メンバーが自発的に動けるようサポート
    - メンバーの強みに焦点をあてる
    - メンバーの声に耳を傾ける
    - メンバーを押す
- チームの成長プロセス
    - タックマンモデル
        - 機能状態まで持っていくことを目標にすること
- 感情的にならず落ち着いてメンバーが動ける
- 目標を持たないチームはチームではない
- チームの目標を決める際は、チームが所属する組織の目標とリンクさせる
- チームの目的と個人の目標もリンクさせる
- 会社組織でベクトルが揃っている状態
    - KPTは「ファシリテーション」技術と合わせるとより良くなる
    - ファシリテーションのスキル
    - プロセスを扱うスキル
- 振り返りの目的設定や、時間配分を準備
    - 場を活性化させるスキル
- 多く意見を出してもらったり、深い思考を促すための質問をする
- またリフレーミングも有効
- 思考の枠組み変える
    - 例:problemをダメなところから、改善の起点になるものと考える
- 振り返り会は安心安全の場でなくてはならない
- 安心安全の場にするために、ファシリテーションをローテーションして全員がファシリテーターになるというのもひとつの手
- 本当にそれはproblemなのか、重要度はそれかという課題に対して、見えるかツールを導入すると良い
- バーンアップ、バーンダウンチャートを使い進捗を確認する
```
【Three.js】blenderで作成したobjファイルの3DモデルをWebページ上に表示する方法

本記事ではblenderで作成したobjファイルの3Dモデルをwebページ上に表示させる方法についてご紹介します。

## 1. 3Dモデルの準備
今回はblenderで自分が作成した下記画像の雪だるま（yukidaruma.obj）を使用します。
![img_ykdra.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/33ac8772-6742-646d-bef4-af7a16f92e2a.png)

## 2. HTMLの準備
Three.jsでWebページ上に3Dモデルを表示するためのHTMLを作成します。
bodyタグの中にid="canvas"を準備し、次に作成するJavaScriptファイルのhoge.jsを読み込んでいます。
※Three.jsはファイルを読み込みやCDN型式等での利用方法がありますが、本記事ではThree.jsの読み込みについては記載しておりませんので、別でThree.jsに関して読み込みの記述の追加が必要です。

```html:hoge.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="canvas"></div>
    <script src="hoge.js"></script>
</body>

</html>
```

## 3. JavaScriptファイルの準備
3Dモデルを読み込んで表示させるJavascriptファイルのhoge.jsを作成します。読み込む3Dモデルの型式は**obj**ファイルを想定していますので、**OBJLoader**を使用し3Dモデルを読み込みます。

```javascript:hoge.js
window.onload = function () {
    // レンダラーの作成
    let renderer = new THREE.WebGLRenderer();

    // 画面サイズの取得
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;
    renderer.setSize(windowWidth, windowHeight);
    document.getElementById("canvas").appendChild(renderer.domElement);

    // シーンの作成
    let scene = new THREE.Scene();
    // 背景色の設定
    scene.background = new THREE.Color('#00bfff');

    // 見やすいようにヘルパーを設定
    let gridHelper = new THREE.GridHelper();
    scene.add(gridHelper);

    // カメラの作成
    let camera = new THREE.PerspectiveCamera(80, windowWidth / windowHeight, 0.1, 1000);
    camera.position.set(4, 3, 0);
    camera.lookAt(0, 0, 0);

    // ライトの作成
    let light = new THREE.PointLight(0xffffff, 1, 100);
    light.position.set(4, 4, 4);
    scene.add(light);

    // objLoader
    const objLoader = new THREE.OBJLoader();

    // 3Dモデルの読み込み
    objLoader.load(
        '/assets/obj/yukidaruma.obj',
        function (obj) {
            // スケールの変更 (読み込んだ3Dモデルが大きすぎたため)
            obj.scale.set(0.1, 0.1, 0.1);
            scene.add(obj);
        },
    );

    // アニメーション実行
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();
};
```

### ● GridHelper
GridHelperを使用する事で地面がどこにあるか把握できるので便利です。
```javascript
let gridHelper = new THREE.GridHelper();
scene.add(gridHelper);
```

## 4. 実行結果
実行した結果、ブラウザに3Dモデルが表示されます。(オブジェクトに色はついてないです。。)
![showedObj.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/0b843253-c413-4492-4e0f-195b20c8103a.png)

## 5. まとめ
本記事ではThree.jsを利用しblenderで作成した3DモデルをWebページ上に表示してみました。実行した結果、blender側で設定した3Dモデルの色が無くなっていました。。本記事で使用した**OBJLoader**以外にも**gltfloader**がThree.jsにはあるので次はそちらで3Dモデルを表示させてみます！
ターミナルに表示されるユーザー名とPC名を一時的に非表示にしたい

ターミナル上の`$`の前に表示されるユーザー名とPC名を一時的に非表示にしたい

```sh:
username@pcname $ echo "xxx"
```

ターミナル上で以下を実行すればOK

```
export PS1="$ "
```

以下のようになるはず

```
$ echo "xxx"
```

上記だと一時的（別ターミナル起動時は別途コマンド実行が必要になる）なので、`~/.zshrc`にその旨記載するとターミナル起動時は常時実行される。

https://qiita.com/kaito_program/items/e6a6013b1f614eed1960

# 参考

https://qiita.com/kaito_program/items/e6a6013b1f614eed1960
共創プログラミングのススメ

## はじめに
最近、僕の会社ではモブプログラミングに挑戦しており、複数人で一緒にコードを書く機会が増えてきました。
そんな中で生まれたのが「共創プログラミング」（以降、共創プロと記載）です。
個人的には共創プロがとても気に入っており、最近では週1回は取り組んでいます。
コードの質や生産性が向上し、何よりも楽しいです！
本記事では、共創プロとは何か、なぜそれをすると嬉しいのか等を書いていきます。
ちなみに、「共創プログラミング」は完全な造語です笑

## 共創プロとは？
文字通り、複数人で一緒にプログラムを創り上げることを指します。
ペアプログラミングやモブプログラミングと似ていますが、共創プロでは明示的にドライバーを設定しないという特徴があります。
共創プロでは全員がドライバーであり、全員が議論をするモブになります。
コードを書きながら相談し、時には全員で手分けをしてコードを書いていきます。

## 共創プロやると何が嬉しいの？
僕が感じる共創プロのメリットは主に以下の3つです

**議論により新たな視点が得られ、進行がスムーズになる**
実装が進むと、「このコードをどこに書こうか」、「パフォーマンス的にはこうした方が良いけど、コードの見通しが悪くなりそう」といったトレードオフが発生します。また、何かモヤモヤするけど言語化できない状況もあります。
そういった場合に、仲間と議論をすることで気づきを得られ、前に進めることができます。


**作業の分担により効率が上がる**
ある程度コードの方針が立ったら、あとは作業です。
特に複数のファイルを扱うときには、作業の手分けが可能となり、効率的に進行できます。

**多角的な視点で見ることで、レビュー時の手戻りが少なくなる**
レビューで「この部分の考慮が欠けているよ」といった指摘を受けることがあります（言われたことない方、シンプルにすごいです！笑）。
しかし、議論の場で事前に考慮漏れを潰せることも共創プロのメリットだと思います。

## 共創プロはどういう時にやると良いの？
初期の設計、リファクタリング、複雑な機能の実装など、特に効果を発揮すると思います。
設計段階ではコードがあったほうが話しやすいこともあるので、共創プロでざっとコードを書きながら進めると、より良い議論ができます。
一方、非常にシンプルな機能（例えば単純なCRUDなど）については、1人でやった方が効率的かもしれません。


## 具体的にどうやるの？
**コードをシェアして且つ、画面共有する**
僕の会社では[VSCodeのLive Sare](https://learn.microsoft.com/ja-jp/visualstudio/liveshare/)というプラグインを使ってコードをシェアしています。
一応Live Shareで他の人の作業ファイル等追従できるのですが、自分の開いているファイルを変えたくない等あるので、画面共有もして作業の様子を見ることができる状態にしています。

あとは、作業並行パターンだと以下のように分担したり。。
>Aさん「interface定義して、この処理実装しておきますね。」
僕「じゃあそのinterfaceを具体実装やっておきます。」

または、複雑な実装をしたり。。
>僕「この設計こういうふうな実装だと良い気がするんですけどどうです？？」
Bさん「おおまかには良いですが、それだと○○サーバーへの負荷かかるので、ここ考慮した方が良さそうです。」

という感じで進めていきます！

## 共創プロをやる際の注意点は？
**技術レベルに大きな差がない人同士でやると良い**
レベルに大きな差があると、共創というより指導のようになってしまいます。
共創プロでは、コードを議論の材料とし、作業を効率的に進めることが目的ですから、メンバー間で技術レベルの差があまりない方が良いかと思います。

**コミュニケーションを常に取り続ける**
共創プロの真髄はコミュニケーションです。
作業を分担するにも、どこを担当しているのかを把握するにも、常にコミュニケーションが必要です。

**２人でやる時、意見が割れたら決断するか、一旦後回しにする**
トレードオフが発生し意見が割れる場合、一旦決断を下して進むか、後回しにすることも有効です。
全く決まらない場合には、第三者を交えて決定するのも良いでしょう。

**人数を多くしすぎない**
個人的には2 ~ 3人くらいがやりやすいと感じています。
人数が多いと喋れにくいですし、作業中人が余る等発生するためです。


## おわりに
今回は共創プロについてお話してきました！
普段1人でコードをずっと書いているという人も、たまには他の方と一緒に書いてみても良いかも知れません！
では良いコードライフを👋
Windows11 メモ

## はじめに
やや走り気味でリリースされたWindows11もようやくまともに使えるOSになってきました。
ということでようやくWindows10からアップグレード。
以下、設定変更メモ。順次更新していきます。

## 設定メモ
1. タスクバー左寄せ
タスクバーを右クリック⇒タスクバーの設定⇒タスクバーの動作⇒タスクバーの配置を「左寄せ」に
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317488/cf4ceb89-28cb-f9e2-5ded-a66fd6fcc0ca.png)

2. 右クリックメニューをWinodows10と同じに
レジストリエディタを管理者で起動（regedit32.exe）
HKEY_CURRENT_USER\Software\Classes\CLSID
に
{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}
キーを追加。
その配下に
InprocServer32
キーを追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317488/4457ed11-44bc-aa8b-a506-e95802a8f2c1.png)

3.新規作成からメモ帳が消えた
　設定：アプリ＞インストールされているアプリ
　でメモ帳をアンインストール。

　Microsoft Storeでメモ帳を再インストール。
　https://apps.microsoft.com/detail/9MSMLRH6LZF3

4.Windows11非対応のPCに強制的にインストール

　レジストリ―に以下を登録
　キー: HKEY_LOCAL_MACHINE\SYSTEM\Setup\MoSetup
　名前: AllowUpgradesWithUnsupportedTPMOrCPU
　種類: REG_DWORD
　値: 1
LaravelにBootStrapをインストールする方法

# BootStrapをインストールする方法

## composerを利用してLaravel UI をインストールする。
1.VSCodeのターミナルかコマンドプロンプトを開く。
2.以下のコマンドを実行する。
```
composer require laravel/ui
```
3.3分程度待って、以下が表示されればok。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/f74e9829-b755-a111-019e-a43b24fd9ae5.png)

## BootStrapをインストールする
1.VSCodeのターミナルかコマンドプロンプトで、以下のコマンドを実行する。
```
cd laravelをインストールしたディレクトリまでのファイルパス
↓
php artisan ui bootstrap
```
2.以下が表示されればok。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/d316e80a-c91b-530e-a2bb-fe14473c0523.png)
<補足>
・laravelをインストールしたディレクトリ直下の`package.json`に、以下のような記述がある。
```package.json
{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.3",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "sass": "^1.56.1",
        "vite": "^4.0.0"
    }
}
```
`package.json`：npmでインストールするパッケージをリスト化したファイル。

3.VSCodeのターミナルかコマンドプロンプトで、以下のコマンドを実行する。
```
npm install
```
※このコマンドを実行することで、`package.json`に記述されたパッケージを一括でインストールする。
　依存関係の解決も行ってくれる。
4.以下が表示されればok。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/f3f58264-242b-3f3a-f26e-850ebfa28a9b.png)

## ビルドをするための設定を行う。
＜ビルドする理由＞
・BootStrapのソースコードがSassで記述されているため、cssに変換する必要がある。
　確認方法：
　`node_modules/bootstrap/scss`　を確認する。以下のようなファイルが入っている。
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/4f85789b-42dd-5d81-8a8d-2a09e5256e53.png)

＜ビルドの設定方法＞
1.laravelをインストールしたフォルダ直下の`vite.config.js`を開き、以下のように編集する。
```vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'                      // 追加

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',       // 'resources/sass/app.scss',を左記に変更
            ],
            refresh: true,
        }),
    ],
	resolve: {                               // 追加ここから
		alias: {
			'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
		}
	},                                       // 追加ここまで
});
```
2.`resources/js`の`app.js`を開き、以下を追加する。
```app.js
import '../sass/app.scss'
```
## ビルドを実行する。
1.ターミナルかコマンドプロンプトで以下を実行する。
```
npm run build
```
2.以下が表示されればok。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/55efc931-8e4b-9627-eccc-7ea9e4607160.png)

## ビルドしたファイルをビューに読み込む
〇〇.blade.phpの`<head>`内に、以下を追加する。
```〇〇.blade.php
@vite(['resources/js/app.js'])
```

### 補足：Sassファイルを編集したら、必ずビルドする。
`resources/sass`内の、`app.scss` や `_variables.scss`を編集したら必ずビルドする。
【MySQL】RAND()関数でランダムにデータを取得する方法（SQLクエリ）

# 概要
- SQLでランダムにレコードを取得する方法を記載ます。
    - ①ランダムにソートして取得するクエリ
    - ②ランダム10件だけソートして取得するクエリ

## ①ランダムにソートして取得するクエリ
- 以下のSQLでテーブル`sample_table`からランダムにソートすることができます。

```sql
SELECT * 
FROM sample_table
ORDER BY RAND();
```

## ②ランダム10件だけソートして取得するクエリ
- 以下のSQLでは、テーブル`sample_table`からレコードをランダムに並び替え、結果を10行に制限して取得します。

```sql
SELECT *
FROM sample_table
ORDER BY RAND()
LIMIT 10;
```

- もしくは以下でも可能です。

```sql
SELECT *
FROM sample_table
ORDER BY (SELECT RAND())
LIMIT 10;
```

- また、大規模レコード数があるDBの場合は、`where`句を使った方法もあるみたいです。
    - [【MySQL】ランダムにレコードを取り出す方法のひとつ](https://www.softel.co.jp/blogs/tech/archives/2274)

## MySQLでは`RANDOM()`関数だとエラーになる
- ちなみに、MySQLでは`RANDOM()`関数を使うと以下のエラーになりました。

```
SQL Error [1064] [42000]: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '() LIMIT 10' at line 3 Error position: line: 2
```

```
#1064 - SQL構文エラーです。バージョンに対応するマニュアルを参照して正しい構文を確認してください。 : '()
LIMIT 10' 付近 3 行目
```

- `RANDOM()`関数は、PostgreSQLなどの一部のデータベースシステムで使用される関数ですね。
WSL2でUbuntuの再インストールを簡単に行う

# 概要
WSL2でUbuntuディストリビューションを利用していますが、まっさらな状態に戻したい時があります。
Windowsアプリの設定からアンインストール／再インストールすればよいのですが、毎回「どこの設定だったかな？」と探すのが面倒だったので、コマンドラインで実行する手順をまとめました。

# 実行手順
以下のコマンドで、Ubuntuディストリビューションのアンインストールします。

```:Ubuntuディストリビューションのアンインストール
C:\Users\yourname>wsl --unregister Ubuntu
Unregistering.
The operation completed successfully.
```

以下のコマンドで、Ubuntuディストリビューションのインストールします。

```:Ubuntuディストリビューションのインストール
C:\Users\yourname>wsl --install -d Ubuntu
Ubuntu is already installed.
Launching Ubuntu...
Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: yourname
New password:
Retype new password:
passwd: password updated successfully
The operation completed successfully.
Installation successful!
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

Welcome to Ubuntu 22.04.2 LTS (GNU/Linux 5.15.90.1-microsoft-standard-WSL2 x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage


This message is shown once a day. To disable it please create the
/home/yourname/.hushlogin file.
yourname@YOURHOST:~$
```

なお、WSL2にほかのディストリビューションをインストールしている場合、デフォルトディストリビューションもUbuntuに戻しておくとよいでしょう。

```:デフォルトディストリビューションの変更
C:\Users\yourname>wsl --setdefault Ubuntu
The operation completed successfully.
```

```
C:\Users\yourname>wsl --list
Windows Subsystem for Linux Distributions:
Ubuntu (Default)
docker-desktop-data
docker-desktop

```
Laravelでバリデーションを設定する方法

# Laravelでバリデーションを設定する方法

## フォームから送信した入力内容のバリデーション
**コントローラ**で以下のように記述する。
```〇〇Controller.php
public function 関数名(Request $request) {
    $request->varidate([
        'フォームのname属性' => 'バリデーションルール',
        'フォームのname属性' => 'バリデーションルール',
    ]);
}
```
・引数の$request にフォームに入力した値が格納されている。
・バリデーションルールは以下の通り(一部を掲載)
|  バリデーションルール  |  内容  |
| ---- | ---- |
|  required  |  入力必須  |
|  max:最大値  |  最大値以下のサイズのみ許可  |
|  min:最小値  |  最小値以上のサイズのみ許可  |
|  integer  |  整数のみ許可  |
|  email  |  有効なメールアドレスのみ許可  |


**バリデーションルールを複数指定することも可能**
```〇〇Controller.php
public function 関数名(Request $request) {
    $request->validate([
        'フォームのname属性' => 'バリデーションルール|バリデーションルール',
        'フォームのname属性' => 'バリデーションルール|バリデーションルール',
    ]);
}
```

②エラーメッセージを表示する。
**ビュー**で以下を記述する。
```〇〇.blade.php
// エラーメッセージが1つ以上ある場合
@if ($errors->any())
    <div>
        <ul>
            // エラーメッセージを1つずつ取り出す
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
```
※divやulタグは一例。
・処理の仕組み
　1.バリデーションに引っかかると、エラーメッセージがMessageBagクラスのインスタンスとして
　　$errorsに代入される。
　　※MessageBagクラスはvender/laravel/framework/src/Illuminate/supportフォルダ内の
　　　MessageBag.phpに定義されている。
　2.@if ($errors->any())
　　any()：エラーメッセージが1つ以上ある場合にtrueを返す。
　3.@foreach ($errors->all() as $error)
　　all()：すべてのエラーメッセージを配列で返す。

↓ブラウザに表示されたエラーメッセージ（この時点で）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/373c5bf4-7e83-e42e-bda8-e0898e2422b9.png)

③エラーメッセージを日本語化する。
1.VSCodeのターミナルかコマンドプロンプトで以下のコマンドを実行する。
```
cd laravelのデータが置いてあるディレクトリ
↓
php -r "copy('https://readouble.com/laravel/8.x/ja/install-ja-lang-files.php', 'install-ja-lang.php');"
↓
php -f install-ja-lang.php
↓
php -r "unlink('install-ja-lang.php');"
```
2.resources/lang/ja/validation.php　ができていることを確認する。
　（varidation.php内には日本語化されたエラーメッセージが記述されている。）
3.config/app.phpを開き、以下のように変更する。
```app.php
// 'locale' => 'en', を以下のように変更
'locale' => 'ja',
```
※上記のように変更することで、2.の日本語されたエラーメッセージを参照してくれる。

↓日本語化したエラーメッセージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/6148f0af-687b-36fe-a82b-5f64cc2fd428.png)
springのRestTemplateでqitaのAPIコールを実装

今日も備忘録です。

## このドキュメントについて
下記について記載していきます。

1. springのRestTemplateを利用したAPIコールの実装
(qitaのAPIをコールしてみました)

APIコールする方法を色々実装してみましたが、
感覚的にはRestTemplateが1番理解しやすく、簡単に実装できました。
(RestTemplateは今後非推奨になるらしいですが、、、)

他の方法としては下記を試しました。
・WebCilent (springで今後推奨される)
・Okhttp3とretrofit2 
・HttpClient

## 実行環境

・Java17
・springboot 3.0.2

## 実装
### getForを利用する場合

```java
var url = new StringBuilder()
    .append(Constant.qitaBaseUrl)
    .append("/api/v2/items/")
    .append(request.getItemId())
    .append("/comments").toString();
var restTemplate = new RestTemplate();

try {
    var response = restTemplate.getForEntity(url, QitaGetItemCommentDto[].class);
            return response.getBody();
        } catch (HttpClientErrorException e) {
            throw new RestClientException("400系エラーが発生しました", e);
        } catch (HttpServerErrorException e) {
            throw new RestClientException("500系エラーが発生しました", e);
        }

```
説明：
1.まずはリクエストする際のURLを作成する。
今回はqitaAPIの記事のコメント取得のAPIをコールします。
GET通信です。

2.restTemplateのgetForEntityメソッドを利用するとGET通信を実行できます。
引数にはurlとレスポンスの受け取り時の型を指定してあげます。
(今回だとQitaGetItemCommentDtoの配列を受け取ります。)
(post通信の場合は、postForEntity)

3.400系もしくは500系のエラーが起きた際は、上記のエラーが投げられるので、それをハンドリングしてあげる。

### 万能exchangeを利用する場合

```java
var url = new StringBuilder()
            .append(Constant.qitaBaseUrl)
            .append("/api/v2/items/")
            .append(request.getItemId())
            .append("/comments").toString();
// リクエストボディ作成
var requestBody = new QitaWriteReactionsResource("テストでコメントします")
var requestEntity = RequestEntity
            .post(url)
            .accept(MediaType.APPLICATION_JSON)
            .header("Authorization", "Bearer " + "")
            .body(requestBody);

var restTemplate = new RestTemplate();
try {
    var response = restTemplate.exchange(requestEntity, QitaWriteReactionsDto.class);
    return response.getBody();
} catch (HttpClientErrorException e) {
    throw new RestClientException("400系エラーが発生しました", e);
} catch (HttpServerErrorException e) {
    throw new RestClientException("500系エラーが発生しました", e);
}
```
説明：
先ほどとの違いは、RequestEntityを用意する点で、exchangeメソッドはGET通信でもPOST通信でもRequestEntityに設定した方式で実行される。
(qitaのpost通信はAuthorizationが必要なので、header情報に設定してあげる必要がある)


<br>

## まとめ
タイムアウトや通信障害の可能性もあるので、リトライ処理を入れてあげる方が良いですよね。
リトライ処理についても最近学んだので、以下にリンクを貼っておく。

https://qiita.com/ry-s/items/ae31aff30216d5168ad3
【WSL2】wslログイン時 "<3>WSL (18) ERROR: CreateProcessEntryCommon:370: getpwuid(0) failed 2" エラーになる場合の対処

# エラー概要
コマンドプロンプトからwlsコマンドを実行してログインしようとすると、以下のようなエラーメッセージが出力されてログインできないケースがあります。
本稿はこの事象の原因と対応を記したものとなります。

```:wslコマンド実行時エラー
C:\Users\yourname>wsl
Processing fstab with mount -a failed.

<3>WSL (18) ERROR: CreateProcessEntryCommon:370: getpwuid(0) failed 2
<3>WSL (18) ERROR: CreateProcessEntryCommon:374: getpwuid(0) failed 2
<3>WSL (18) ERROR: CreateProcessEntryCommon:577: execvpe /bin/sh failed 2
<3>WSL (18) ERROR: CreateProcessEntryCommon:586: Create process not expected to return
```

# 原因
WSLのデフォルトディストリビューションが、「docker-desktop-data」など、OSとしてログインできないものになっている場合に発生するようです。

```:WSLのデフォルトディストリビューション確認
C:\Users\yourname>wsl --list
Windows Subsystem for Linux Distributions:
docker-desktop-data (Default)
Ubuntu
docker-desktop
```

以下のようなシチュエーションで発生します。

- Docker Desktop for Windowsをインストールし、またWSLのUbuntuディストリビューションをインストールする。
- Ubuntuディストリビューションを初期化するため、 これをアンインストール／インストールする。

それまではデフォルトディストリビューションがUbuntuであったものが、アンインストールした時点でほかのものに変わってしまうことが原因です。

# 対処法
デフォルトディストリビューションをUbuntuなど、OSとしてログインできるものに変更します。

```:デフォルトディストリビューションの変更
C:\Users\yourname>wsl --setdefault Ubuntu
The operation completed successfully.
```

デフォルトディストリビューションが変更されたことを確認します。

```:デフォルトディストリビューションの変更
C:\Users\yourname>wsl --list
Windows Subsystem for Linux Distributions:
Ubuntu (Default)
docker-desktop-data
docker-desktop
```

これで、wslコマンドでログインできるようになります。

```:wslコマンドによるログイン
C:\Users\yourname>wsl
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

yourname@YOURHOST:/yourname/c/Users/yourname$
```
Laravelでフォームを送信しても入力内容を保持する方法

# Laravelでフォームを送信しても入力内容を保持する方法

ビューでフォームのvalue属性にold()を使用する。
```〇〇.blade.php
<input type="text" name="name" value="{{ old('name属性') }}">
```
※old()は直前の入力値が存在しない場合はNULLを返す。


**編集画面など、すでにテーブルなどに保存している値を表示する場合**
```〇〇.blade.php
<input type="text" name="name" value="{{ old('name属性', $モデルのインスタンス名('カラム名')) }}">
```
old()の第2引数に表示したい値を指定することで、NULLではなく第2引数の値を返す。
仕様詰めでクライアントの期待を超える方法


タイトル....すごい大それたことを書いてしまっていますが、
私がPMになってから、特に非エンジニア集団のクライアントの場合に仕様を詰める時に
「気を付けていること」「実践していること」をアウトプットしてみました。


# 機能リリース後の運用イメージも聞く
要望をいただくときはその後の運用イメージも聞くようにしています。
非エンジニアの方から要望をいただく場合、その要望だけでは運用の改善ができなかったり、
その機能を使った後に、人による手作業が発生していたりするケースが多いです。

例えばなのですが、
「〜のデータをCSVでダウンロードできるようにしてほしいです」
という要望をいただいたとします。

そして、実際に運用イメージを聞くと下記のようなご回答をいただくことがあります。
① ダウンロードしたCSVをスプレッドシートでまとめて毎月分析していきたい
② ダウンロードしたCSVをさらに外部のシステムにインポートしたい　など...

①の場合は、CSV出力後
・スプレッドシートにCSVの内容を転記する
・スプレッドシート上の関数とかで計算する
という2つの手作業が発生することが予想されます。

言語にもよるとは思うのですが、2つの手作業は
・システム上で分析結果を表示する
・システムからスプレッドシートに直接書き込みに行く
のような機能を作れば手作業そのものをなくすことができます。

②の場合も、外部システムの仕様にもよりますが、
外部システムを教えていただいた上でAPIなどが存在すれば、システムから直接インポートまですることが可能です。

この辺は、実際に他のシステムなどの知見がないと気付けない部分になってくるので、
非エンジニアの方の目線だと気付けない部分になるのかなと思います。
なので、より知見のあるエンジニア側がアクションを起こしてあげるとクライアントにとって価値のある機能になるのかなと思っています。

※ただし、工数とかクライアントとの契約によってはあんまりいただいた要望以外を行うことができないケースもあると思うのでその辺は柔軟に考える必要があるかな思います...。

# できるだけ動くものを見せていく
もし、メンバーのスキルがそこそこあるのであれば、
要望を聞いた上で早急にプロトタイプを作ったりしていました。
プロトタイプを作る時間がかかりそうな場合は、
一旦XDやFigmaなどのツールで画面の動きだけでもサクッと見せれる形を作っています。
これはクライアント先にエンジニアがいようがいなかろうが、やって損はないかなと思っています。

システムを使うのはクライアントですし、
エンジニア目線だけでは気付けない操作のしづらさ、画面項目のわかりづらさみたいなものは
実際に動くものをみないとわからないことが結構多いかなと思います。

私は、実装し始めて「あれ？これ使いづらい...?」みたいなことに気付くことが多いタイプなので、
要望を聞いたら、とりあえず実際のシステムに近い形のものを早めに作り、見せるように気を付けています。

# 条件が多い場合は、テキストだけではなくパターン表を作る
これは割と本気で気をつけています。

結構私はやりがちなのですが、
条件とかをテキストベースで
「〜の条件でデータを登録するであってますか」
みたいなことをやりとりしちゃってます。

ただ、実際にその条件で実装すると
「あ、この条件の時は〜なんですよー」
みたいなことが検証環境にあげた後で言われることが多々ありました。

なので、テキストだけではなく、もし複数パターン考えられるのであれば、
パターンを表に書き出してクライアントに提出するようにしています。
もちろん、提出するだけでは意味がないので、必要に応じて表の説明・議論を行っています。

# ちょっとだけ余裕のある開発スケジュールを組む

基本は余裕のあるスケジュールを引くようにしています。
余裕を持たせるのは
* クライアントから何か共有してもらう必要があるタスク(テキスト内容、リンク先、画像など)
* 開発タスク
* リリースタイミング

です。

（ほぼ全部じゃん....）

私たちエンジニア側にとってもバッファがないと、
急な他の対応だったり、メンバーの体調不良時に
「残業しないと...」
みたいなことになってしまいがちなのですが、

クライアントにとっても、
余裕を持たせておくことによって想定していたリリースタイミングよりも早く、
検証環境にあげる準備ができたりするので、
「え！もう終わったの！」
みたいな感じで少し喜んでもらえたりします（笑）

（喜んでもらえないこともあるのでここは心の持ちようですね...）

# 最後に

今回は、クライアントから要望をいただいてから機能実装していく中で
「気を付けていること」「実践していること」を書き出してみました。

誰かの助けになれれば幸いです。
【React学習 #9】Next.js - App Routerを学ぶ（その１）

# はじめに
この記事はReact初心者の筆者が学習のために書いている記事です。
間違っていたら温かくご指摘いただけるとありがたいです。

# やりたいこと
App Routerの機能を使いながら学ぶ。

# App Router
App Routerでは、appディレクトリ直下にディレクトリを作成することでルーティングを設定します。
例えば、「app/test」というディレクトリを作成し、更にその直下にpage.tsxというファイルを作成し`http://localhost:3000/test`にアクセスすればpage.tsxで作成したページが表示されます。

``` tsx:app/test/page.tsx
const Page = () => {
    return <div>test</div>;
};

export default Page;
```

以下は`http://localhost:3000/test`にアクセスした結果です。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3344066/99d94a50-bf48-f423-ad9a-69c0e4056c5f.png">



同じように、上で作成したtestディレクトリの更に下にtest2ディレクトリを作成します。
そしてpage.tsxを作成すると、`http://localhost:3000/test/test2`にアクセスできます。

``` tsx:app/test/test2/page.tsx
const Page = () => {
    return <div>test2</div>;
};

export default Page;
```

以下は`http://localhost:3000/test/test2`にアクセスした結果です。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3344066/49bc5708-79d9-9f70-240f-fac7c0e468c3.png">


# Layout
layout.tsxというファイルを作成することで、そのディレクトリと更にその下に存在するpage.tsxにレイアウトを適用させることができます。

 試しにtestディレクトリ直下にlayout.tsxファイルを作成します。

``` tsx:app/test/layout.tsx
import './test.css';

export default function TestLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return <div className='test-style'>{children}</div>
};
```

``` css:app/test/test.css
.test-style {
    color: red;
    font-size: x-large;
}
```

以下は`http://localhost:3000/test`にアクセスした結果です。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3344066/47ba6ea2-683a-f09b-1fea-a9fad89be793.png">

以下は`http://localhost:3000/test/test2`にアクセスした結果です。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3344066/08234e75-da76-5551-cfa8-8b53ed07c1ac.png">

test2ディレクトリにもtestディレクトリ直下に作成したlayout.tsxが適用されていることがわかります。


# 最後に
App Routerを使えばappディレクトリ直下にディレクトリを作成することでルーティングを設定できることがわかりました。
これまで、バックエンドを中心にやってきた私にとってはちょっと違和感を感じましたが慣れる必要がありそうですね。
ハードディスクのCMRとSMRによるパフォーマンスの違い

<!-- https://qiita.com/belgianbeer/items/4a9e569366f8ee78ece7 -->

# ハードディスクのCMRとSMRによるパフォーマンスの違い

[ZFSミラープールのディスク交換による容量増設](https://qiita.com/belgianbeer/items/8df197588462cd7f6b45)という記事を書きました。交換した新しい6TBのハードディスクの記録方式はSMRで、それまで使っていた10年以上前の2TBのハードディスクはCMRでした。詳細は説明しませんが、SMRではその構造上大量データの連続書き込みがCMRに比べてどうしても遅くなる傾向があります(読み出しはSMRとCMRによる違いはありません)。

ミラーの同期は大量データの連続書き込みであるため、SMRの苦手な処理の典型的な例ということになります。そこで実際にCMRの古いハードディスクと、SMRの新しいハードディスクのミラーの同期にかかる時間を比較してみます。

## SMRでの同期時間

こちらが該当記事に掲載したSMRのハードディスクでのミラーの同期にかかった時間の記録で、14時間11分となっています。

```console
$ zpool status zvol0
  pool: zvol0
 state: ONLINE
  scan: resilvered 1.49T in 14:11:00 with 0 errors on Mon Jan 30 03:49:15 2023
config:

        NAME            STATE     READ WRITE CKSUM
        zvol0           ONLINE       0     0     0
          mirror-0      ONLINE       0     0     0
            gpt/sdisk1  ONLINE       0     0     0
            gpt/sdisk2  ONLINE       0     0     0

errors: No known data errors
$
```

## CMRでの同期時間

交換前の2TBのハードディスクにも同じデータが残っているため、改めて同期にかかる時間を計測してみました。結果は次に示すように6時間50分程度と、SMRのものに比べるとかなり短い時間となりました[^big]。

[^big]: ZFSのRAIDの同期では書き込み済みの領域だけを同期するため、ハードディスクの総容量の違いは関係ありません。

```console
$ zpool status zvol0
  pool: zvol0
 state: ONLINE
  scan: resilvered 1.49T in 06:49:36 with 0 errors on Mon Jan 30 17:58:41 2023
config:

        NAME            STATE     READ WRITE CKSUM
        zvol0           ONLINE       0     0     0
          mirror-0      ONLINE       0     0     0
            gpt/ndisk2  ONLINE       0     0     0
            gpt/ndisk1  ONLINE       0     0     0

errors: No known data errors
$
```

## 実際に使ってみた違い

ファイルサーバーではあるもののユーザーは自分1人です。その状況で実際にSMRのハードディスクへ交換後に使ってみた体感では、日常的に使う分にはSMRのハードディスクによる書き込み時の速度低下を感じないどころか、以前のものより速くなった感じすらあります。速くなったと感じる一つの要因は、ハードディスクが世代的に新しくなって記録密度が向上し転送速度が上がっていることでしょう。そして筆者の日常利用の書き込み程度であれば、SMRの欠点はハードディスクが持つバッファメモリとOSのバッファによって隠されてしまうため体感することは難しそうです。

## まとめ

大量書き込み時に遅いからとSMRのハードディスクを毛嫌いする必要は無さそうですが、RAIDの同期時間を短時間で済ませたい場合等には、SMRは避けてCMRのハードディスクを選ぶほうが良さそうです。
Azure CLI の JMESPath 関数を使って特定文字列が含むリソースだけ取得してみた

Azure リソースに対して大量に同じ事を繰り返す場合、シェルスクリプトなどで Azure CLI を実行するととても便利ですよね。例えば、特定条件の Azure リソースだけ実行の対象にしたくない時は、シェルスクリプトで if 文で条件分岐するなんて事も可能です。今回は、シェルスクリプトで条件分岐をせずに Azure CLI の JMESPath 関数を使って特定文字列が含むリソースだけ取得する方法を試してみました。

## 例えばリソースグループの一覧を取得

```bash:bash
# Azure CLI でリソースグループの一覧を取得
rgs=$(az group list --query "[].name" --output tsv)

# for ループでリソースグループ名を確認
for rg in ${rgs[@]}; do
  echo $rg
done

# 以下の出力結果になる場合を例とします
mnroai-rg
mnrlabo-rg
NetworkWatcherRG
mnravd-rg2
mnrbot-rg
mnrpt-rg
```

## if 文で特定文字列だけを対象にする例

```bash:bash
# Azure CLI でリソースグループの一覧を取得
rgs=$(az group list --query "[].name" --output tsv)

# mnr という文字列が含むリソースグループ名を確認
for rg in ${rgs[@]}; do
  if [[ $rg == *mnr* ]];then
    echo $rg
  fi
done

# 以下の確認結果となる ( NetworkWatcherRG は対象外となる)
mnroai-rg
mnrlabo-rg
mnravd-rg2
mnrbot-rg
mnrpt-rg
```

## JMESPath 関数を使う例

```bash:bash
# JMESPath 関数の contains を使用
rgs=$(az group list --query "[?contains(name,'mnr')].name" --output tsv)

# for ループはシンプルなままリソースグループ名を確認
for rg in ${rgs[@]}; do
  echo $rg
done

# 以下の確認結果となる ( NetworkWatcherRG は対象外となる)
mnroai-rg
mnrlabo-rg
mnravd-rg2
mnrbot-rg
mnrpt-rg
```

## 参考

https://learn.microsoft.com/ja-jp/cli/azure/query-azure-cli?tabs=concepts%2Cbash#jmespath-functions
MacBook_便利ショートカット集

## 初めに
Macbookでの業務をすることになったので、
作業効率アップのためショートカットをまとめました。
少しずつ更新していきます。
便利なショートカットキーあればどんどん教えてください！！！

## ショートカットキー

__ブラウザ系__
| コマンド   |効果    |
|-----------|------------|
| __command__ __+__ __T__ |新規タブ作成  |
| __shift__ __+__ __command__ __+__ __T__ |削除したタブを復元 |
| __command__ __+__ __W__ |タブを削除 |
| __command__ __+__ __L__ __+__ __Return__ |タブを複製 |
| __command__ __+__ __shift__ __+__ __control__ __+__ __3__ |スクリーンショット（画面全体）（貼り付けできるver） |
| __command__ __+__ __shift__ __+__ __control__ __+__ __4__ |スクリーンショット（画面一部）（貼り付けできるver） |
| __command__ __+__ __shift__ __+__ __C__ |developer toolを開く |
| __command__ __+__ __shift__ __+__ __F__ |全画面表示モード |
| __command__ __+__ __「 [ 」__ |戻る  |
| __command__ __+__ __「 ] 」__ |進む  |


__ドキュメント系__
| コマンド   |効果    |
|-----------|------------|
| __command__ __+__ __D__ |ファイル複製 |
| __command__ __+__ __shift__ __+__ __N__ |新規フォルダ作成 |
| __command__ __+__ __Delete__ |ファイル削除、フォルダ削除 |

__アプリ系__
| コマンド   |効果    |
|-----------|------------|
| __command__ __+__ __Q__ |アプリを閉じる |

__検索系__
| コマンド   |効果    |
|-----------|------------|
| __command__ __+__ __Space__ |Spotlight検索を表示  |
| __command__ __+__ __F__ |文字検索 |

__文字系__
| コマンド   |効果    |
|-----------|------------|
| __shift__ __+__ __option__ __+__ __十字カーソル（左右）__|単語ごとで選択  |
| __shift__ __+__ __command__ __+__ __十字カーソル（左右）__|一行まるっと選択 |

__エディット系__
| コマンド   |効果    |
|-----------|------------|
| __command__ __+__ __control__ __+__ __T__ |テキストエディットを起動する（設定が必要です！） |

https://konsuki.com/5187/#:~:text=%E3%81%93%E3%82%8C%E3%81%A7%E3%80%8Ccommand%2Bcontrol%2B,%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82

## 最後に
最後まで閲覧いただきありがとうございました。
メモとしてどんどん更新していきます。
ご意見、ご指摘ありましたら、コメントお願いいたします。
Laravelでルーティングを一括設定する方法

# Laravelでルーティングを一括設定する方法

### CRUD処理のルーティングを一括設定する場合
```web.php
Route::resource('基準となるURL', コントローラ名::class);
```
処理されるアクションの一覧
|  HTTPリクエストメソッド  |  URL  | アクション  |  ルート名  |
| ---- | ---- |---- | ---- |
|  GET  |  /posts  |  index  |  posts.index  |
|  GET  |  /posts/create  |  create  |  posts.create  |
|  POST  |  /posts  |  store  |  	posts.store  |
|  GET |  /posts/{post}  |  show  |  	posts.show  |
|  GET  |  	/posts/{post}/edit  |  edit  |  	posts.edit  |
|  PUT/PATCH  |  /posts/{post}  |  update  |  posts.update  |
|  DELETE  |  /posts/{post}  |  destroy  |  	posts.destroy  |

### ルートURLにアクセスした時に、index.blade.phpを表示する方法
```web.php
Route::get('/', function () {
    return view('welcome');
});
// ↑のコードをすべて消し、↓を記述する。

Route::get('/', [〇〇Controller::class, 'index']);
```
※ルートURL...Laravelのデータが置いてあるディレクトリ
［JavaScript］複数条件で並べ替え

# 背景
* 単純に一つのプロパティで並べ替えるのではなく、複数の条件で並べ替えるときにどうすれば良いか詰まったのでメモ。
* 値によって並べ替えるというより、値の有無で並べ替えたいシチュエーションがあったので、それについても一緒に調査した時のメモでもある。

# サンプルコード
並べ替えの条件として、
* code もしくは nickname　に値が設定されている → 前に
* 上記で並べ替えられた中で、noで昇順に並べ替える

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

[補足] 並べ替えはcomputedで行っています。
cscの作法 その382

# 概要
cscの作法、調べてみた。
wpfやってみた。
練習問題、やってみた。

# 練習問題
sqliteでdatagridに流し込め。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/a33f2e53-1bdf-4711-2908-13a2c88ee7fa.png)

# サンプルコード

```
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Hello, WPF!">
	<StackPanel>
		<DataGrid Name="grid1" >
		</DataGrid>
	</StackPanel>
</Window>

```


```

using System;
using System.IO;
using System.Xml;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Markup;
using System.Text;
using System.Data;
using System.Data.Common;
using System.Transactions;
using System.Data.SQLite;

namespace App
{
	public class Program {
		[STAThread]
		public static void Main() {
			Application app = new Application();
			Window win = null;
			using(FileStream fs = new FileStream("grid1.xaml", FileMode.Open, FileAccess.Read))
			{
				win = (Window) XamlReader.Load(fs);
			}
			SQLiteConnectionStringBuilder ConnectionStr = new SQLiteConnectionStringBuilder();
			ConnectionStr.DataSource = "db0.sqlite";
			using (SQLiteConnection Connection = new SQLiteConnection(ConnectionStr.ToString()))
			{
				Connection.Open();
				using(SQLiteCommand Command = new SQLiteCommand(Connection))
				{
					Command.CommandText = "SELECT * FROM fruit ORDER BY id ASC";
					SQLiteDataAdapter dataAdapter = new SQLiteDataAdapter(Command);
					DataTable dt = new DataTable();
					dataAdapter.Fill(dt);
					if (win.FindName("grid1") != null)
					{
						DataGrid grid1 = (DataGrid) win.FindName("grid1");
						grid1.ItemsSource = dt.DefaultView;
					}
				}
			}
			app.Run(win);
		}
	}
}



```

以上。
メモ📝

■ Markdown記法
#の後ろに半角スペースを入れる。

■ 環境変数
【Windows 11対応】Path環境変数を設定／編集して、独自のコマンドを実行可能にする
https://atmarkit.itmedia.co.jp/ait/articles/1805/11/news035.html
これだけは知っておきたいWeb基本用語

## はじめに
これからエンジニアを目指す初学者向けに、Web技術の基本用語をいくつかピックアップしてまとめました！
ぜひ参考にしていただけたら嬉しいです。

#### リクエスト
...クライアント→サーバへの`要求`のこと



#### レスポンス
...クライアントからの要求に対して、サーバ→クライアントへの`応答`のこと

:::note
リクエスト⇄レスポンスの関係です！
:::


### プロトコル(通信プロトコル)
…サーバとクライアントの異なるコンピュータ同士が通信を行う際、どうやって情報をやり取りするか、という`お約束事`のこと。

例えば、片方が日本語で話しかけたのに、もう片方がフランス語で返事してきたら、コミュニケーションが成立しません。
そんな時は、「〇〇な約束事に従ってやり取りしよう！」と決めたりしますよね？
その際の「お約束事」と同じです！


<table>
  <caption>世の中にあるさまざまな通信プロトコル</caption>
  <thead>
    <tr>
      <th>名前</th> <th>説明</th>
    </tr>
  </thead>
  <tr>
    <td> IP </td> <td>インターネット通信の時に使うプロトコル</td>
  </tr>
  <tr>
    <td> FTP </td> <td>ファイルを受け渡すときに使うお約束事</td>
  </tr>
<tr>
    <td> HTTP </td> <td>ホームページを見るときに使うお約束事</td>
  </tr>
<tr>
    <td> SMTP </td> <td>メールを送るときに使うお約束事</td>
  </tr>
</table>



### ポート(番号)
...`Webサーバ側で展開されている窓口`のようなもの。

1. リクエストされた情報がIPアドレス（宛先のWebサーバコンピュータの住所のようなもの）を頼りにインターネットという海を渡る
1. 宛先の住所のコンピュータについた情報はポート（番号）を頼りにどの部屋かを特定する

:::note
マンションで例えると、IPアドレスが住所なら、ポート（番号）は`部屋番号`という感じです！
:::

また、よく使われるプロトコル（well-known ports）については標準で使うポート（番号）を指定しています。

<table>
  
  <thead>
    <tr>
      <th>ポート番号</th> <th>プロトコル</th>
    </tr>
  </thead>
  <tr>
    <td> 20,21 </td> <td>FTP(ファイル転送)</td>
  </tr>
  <tr>
    <td> 25 </td> <td>SMTP(メール送信)</td>
  </tr>
<tr>
    <td> 80 </td> <td>HTTP</td>
  </tr>
<tr>
    <td> 443 </td> <td>HTTPS</td>
  </tr>
</table>




### ステートフル
...状況によって、あるリクエストをしたらレスポンス内容が変わるもの。FTPなど。
`それまでのやり取りの状況(ステート)を踏まえた上`でレスポンス内容が変わるもの。
人間で言う、気の利く奴です！



### ステートレス
...逆に、`それまでのやり取りの状況によらず`、あるリクエストをしたら額面通り受け取ってレスポンスするもの。HTTPなど。
ステートフルとは反対に、それまでの会話内容などあまり気の利かない奴です！笑


### クッキー
...ステートレスな(状態を持たない)HTTP上で状態を表現するために、考案されたもの。
Cockieのおかげで、HTTP上でもステートフルな環境を保持できる！


## 最後に
今回は特に押さえておきたい用語をいくつか取り上げましたが、参考にした書籍にはこれら以外にもWebの発展の歴史やWebアプリケーションの基礎を学べるので、ぜひ一度拝読してみてください！
楕円曲線暗号へのフェルマーの小定理の直感的な証明とpythonによる実装

## 概要
こちらはフェルマーの小定理について、具体例を含めて初学者が理解しやすいように解説したチュートリアルです。その後、この定理は暗号理論、特に楕円曲線理論、ブロックチェーンと密接に関係しています。
# フェルマーの小定理の基本
フェルマーの小定理は、素数と剰余の間にある美しい関係を示す定理です。次のように表されます。

`a^(p-1) ≡ 1 (mod p)`

ただし、`a`は`0`でない整数、`p`は素数です。

# フェルマーの小定理の証明

証明は初学者にとって少々難しく感じるかもしれませんが、丁寧に説明します。

**1.** `p`を素数、`a`を`0 < a < p`を満たす任意の整数とします。これらの数により以下の数列を定義します：

`a, 2a, 3a, ..., (p-1)a`

これらの数列のすべての要素を`p`で割った余りを考えます。ここで`a`が`p`未満の任意の整数であるため、これらの余りは一意であり、かつ`1`から`p-1`までの全ての整数を一度ずつ取ります。

**2.** それぞれの項に対して剰余を考えると、上記の数列は次のように書き換えることができます：

`1, 2, 3, ..., p-1`

**3.** それぞれの数列の全ての要素の積を考えます。これを`ap`と`p`とします。すると、剰余を考えた場合、これらの積は同じ剰余を持ちます：

`(a * 2a * 3a * ... * (p-1)a) ≡ 1 * 2 * 3 * ... * (p-1) (mod p)`

 **4.** この等式の両側を`(p-1)!`（これは`(p-1)`の階乗を意味します）で割ります：

`a^(p-1) ≡ 1 (mod p)`

これがフェルマーの小定理の証明になります。

# Pythonによる実装
Pythonを使用して、フェルマーの小定理を検証するコードを記述します。

```python
def fermat_little_theorem(a, p):
    return pow(a, p - 1, p) == 1

print(fermat_little_theorem(2, 5))  # True
print(fermat_little_theorem(3, 7))  # True
print(fermat_little_theorem(4, 9))  # False (9は素数ではない)
```
上記の証明は一般的なフェルマーの小定理の直感的な理解を助けるためのもので、一部の手順が省略されているため完全な数学的証明とは言えません。完全な証明は群論や漸近解析など高度な数学の知識を必要としますが、ここでは初学者にとって理解しやすいように、直感的な説明を行っています。

それでは、次に、Pythonを使って指定された表を作成しましょう。この表は、modが7で、nが0から7まで変化するときのnの累乗（n^1からn^7まで）を表示します。

Pythonコード：

```python
import pandas as pd

# 剰余を計算するためのモジュラス（7）
modulus = 7

# データフレームを用意し、その列インデックスを0から7までの基数にします
df = pd.DataFrame(columns=range(8))

# 各指数（1から7まで）について
for exp in range(1, 8):
    # 各基数（0から7まで）について
    row = []
    for n in range(8):
        # 基数を指数で累乗し、その値をモジュラスで割った余りを計算します
        row.append((n ** exp) % modulus)
    # それぞれの行をデータフレームに追加します
    df.loc['n^' + str(exp)] = row

print(df)  # データフレームを出力します

```

このコードを実行すると、出力される表は以下のようになります：

```
      0  1  2  3  4  5  6  7
n^1   0  1  2  3  4  5  6  0
n^2   0  1  4  2  2  4  1  0
n^3   0  1  1  6  1  1  6  0
n^4   0  1  2  4  4  2  1  0
n^5   0  1  4  5  2  3  1  0
n^6   0  1  1  1  1  1  1  0
n^7   0  1  2  3  4  5  6  0

```


## 暗号理論、楕円曲線理論、ブロックチェーンとの関連

フェルマーの小定理は、公開鍵暗号や楕円曲線暗号において重要な役割を果たします。それらのアルゴリズムは数論に基づいており、フェルマーの小定理はその基礎となる定理の一つです。

また、ブロックチェーン技術の中核に位置するビットコインもまた、そのトランザクションの検証と保証に楕円曲線暗号を使用しています。楕円曲線暗号は数論に深く根ざしており、フェルマーの小定理はその理解のために不可欠な概念となります.
【Python】欠損値（NaN）を含むデータの平均を算出する

# 結論
`np.nanmean`を使用する

# 目的
- 欠損値（NaN）を含むデータの平均を算出する

# ライブラリ

| 項目 | 情報 |
| ---- | ---- |
| matplotlib | 1.22.4 |

# np.meanを使用した場合
```Python
import numpy as np

data = np.array([2, 4, np.nan, 6])

mean_value = np.mean(data)
# 出力: Mean value using np.mean: nan
print("Mean value using np.mean:", mean_value)  
```
np.meanは、データ内のすべての値（NaNを含む）を考慮して平均を計算します。
しかし、NaNは特殊な値であり、数値計算に直接使用することはできません。
したがって、np.meanがNaNを含むデータを計算しようとすると、結果もNaNになります。

# np.nanmeanを使用した場合
```Python
import numpy as np

data = np.array([2, 4, np.nan, 6])

nanmean_value = np.nanmean(data)
# 出力: Mean value using np.nanmean: 4.0
print("Mean value using np.nanmean:", nanmean_value)  
```

np.nanmeanは、データ内のNaNを無視して平均を計算します。
つまり、NaNがあっても、その他の数値データに基づいて正しい平均値が算出されます。
AndroidStudio FlamingoでRealmを使う

1.Projectのbuildgradleにbuildscript{}を作る

```Kotlin
buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath "io.realm:realm-gradle-plugin:10.15.1"
    }
}

plugins {
    id 'com.android.application' version '8.0.2' apply false
    id 'com.android.library' version '8.0.2' apply false
    id 'org.jetbrains.kotlin.android' version '1.8.20' apply false

    id 'io.realm.kotlin' version '1.9.1' apply false
}
```

2.appのbuild.gradleに`apply plugin: 'realm-android'`を入れる
```Kotlin
plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
    id 'org.jetbrains.kotlin.kapt'
    id 'io.realm.kotlin'
}
apply plugin: 'kotlin-kapt'
apply plugin: 'io.realm.kotlin'
apply plugin: 'realm-android'

android {
    //色々
}

dependencies {
    //色々
}
```


初心者すぎて過不足ありまくりだと思うのでご了承ください。
要は、Projectのbuildgradleにbuildscript{}を自分で追加しなければいけないということが分からなかった。
これが無かったから`apply plugin: 'realm-android'`を書くとビルドエラーになったんだと思う。