OmniAICreator/Qiita-1.07M huggingface dataset:
[React]useContext

# useContextとは

* 上位コンポーネントで用意された値を、任意の子孫コンポーネントで使用できる仕組み。
* propsのバケツリレーを解消する。
* ただし、上位コンポーネントでのコンテキスト登録が前提となり、再利用性がなくなる。そのため安易に多用はしない。

# useContextによるデータ受け渡しの流れ

以下の3ステップを踏む。

1. コンテキストの作成
    `createContext`でコンテキストを作成し公開する。
2. コンテキストタグで囲み、値を設定
    1.で作成したコンテキストをタグ(`<コンテキスト名.Provider>`)として使用し、子コンポーネントを囲む。
    その際、propsのvalueに子孫コンポーネントへ受け渡したい値を設定する。
3. コンテキスト値の使用
    子孫コンポーネント側で、`useContext(1.のコンテキスト)`を行うと、設定した値を取得できる。

# useContextの使用例

親コンポーネントで設定した値を、孫コンポーネントで使用する例。
stateとその更新関数も受け渡すため、孫コンポーネントで変更したstateは、リアクティブに親コンポーネントのstateにも反映される。

```tsx:Parent.tsx
import { Dispatch, SetStateAction, createContext, useState } from 'react';
import { Child } from './Child';

type ISampleValue = {
  title: string;
  value: number;
  setValue: Dispatch<SetStateAction<number>>;
};

// 1. コンテキストを作成（と初期化）し公開する。（別ファイルに切り出した方が良いかも。）
export const SampleContext = createContext<ISampleValue>({
  title: '',
  value: 0,
  setValue: () => {},
});

export function Parent() {
  const [value, setValue] = useState(0);
  // 受け渡す値。propsと同様に、stateの更新関数も受け渡せる。
  // 本来は、useReducerを用いて更新する処理は限定したほうがよい。
  const providValue = {
    title: 'context provider',
    value,
    setValue,
  };

  return (
    // 2. <コンテキスト.Provider>のタグで子コンポーネントを囲む。
    // valueに受け渡す値を設定する。
    <SampleContext.Provider value={providValue}>
      parent component: {providValue.value}
      <Child />
    </SampleContext.Provider>
  );
}

```

```tsx:Child.tsx
import { useContext } from 'react';
import { SampleContext } from './Parent';

// 子孫コンポーネントへpropsは渡していない。（バケツリレーしていない）
export function Child() {
  return (
    <>
      <div>child component</div>
      <GrandChild />
    </>
  );
}

export function GrandChild() {
  // 3.useContext(コンテキスト)で、親で設定したコンテキストの値が取得できる。
  //　更新関数を使えば、stateの更新も可能。
  const { title, value, setValue } = useContext(SampleContext);
  return (
    <>
      grand child component: {title}
      <div>
        <input
          type="text"
          value={value}
          // state値を更新→親で表示しているstateにもリアクティブに反映
          onChange={(element) => setValue(+element.target.value)}
        />
      </div>
    </>
  );
}

```
WPF でグローバルエラーハンドリングを実装する

# 環境
Microsoft Visual Studio Community 2022 (64 ビット) - Current
Version 17.7.5

.NET 6

# やりたいこと
- WPF アプリで未処理の例外発生時にロギングなどを一括して実装したい
  - 何も言わずに終了するのを回避する

# やってみる

1. 例外発生時に呼び出すメソッドを実装する
1. `OnStartup()` をオーバーライドして上記メソッドを登録する
 
```cs:App.xaml.cs
using System;
using System.Windows;

public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        base.OnStartup(e);

        DispatcherUnhandledException += OnUnhandledException;
    }

    private void OnUnhandledException(object sender, DispatcherUnhandledExceptionEventArgs e)
    {
        Exception ex = e.Exception;

        // TODO: エラーログの作成・通知・アプリケーションの終了などの処理を追加します
        MessageBox.Show(ex.Message);
    }
}
```

たったこれだけで、グローバルエラーハンドリングが実装できます。簡単ですね。
【WebAPI】ステータスコードを正しく使う　200番台編

:::note
指定したデータの取得に成功した、あるいはリクエストした処理が成功した場合には200番台のステータスコードを返す。
:::

### 200　OK
最も多用されるステータスコード。リクエストが成功したことを示す。

### 201　Created
リクエストの結果サーバ側でデータ作成が行われた場合に返す。POSTが使われた場合に使用される。

* ユーザー登録が行われてユーザーが追加された場合
* TODOの項目の追加、画像アップロード
* サーバー側に新しいファイルが作成される、データベースのテーブルに新しい項目が追加される場合

### 202　Accepted
リクエストした処理が非同期で行われ、処理は受け付けたけれど完了していない場合に利用される。
具体例として、ファイルの形式変換や、リモートノーティフィケーション（Apple Push NotificationやGoogle Cloud Messaging）の処理は時間がかかる場合が多く、全ての処理を終えてからクライアントに返すのではレスポンスまでの時間に非常に時間がかかってしまう。そこで一度クライアントにはレスポンスを返しておいて、サーバ側で非同期に処理を行う、という方法が取られる。

202は「処理は開始したけど、まだ終わっていませんよ」ということを通知する際に利用される。

:::note
LinkedInのグループディスカッションに投稿するAPIの場合、投稿が成功すると通常は201が返されるが、モデレータの承認を必要とする場合は、すなわちすぐに投稿が表示されないケースでは202が返される。
つまり広い意味で非同期だが、プログラム的には非同期ではないケースでも使用されている。
:::

### 204　No Content
レスポンスが空の時に返す。多い利用例として、DELETEメソッドなどでデータの削除を行った際に204を返す。
それ以外にもPUTやPATCHでのデータ更新では、既存のデータを更新するだけなので204を返す方が自然という意見もあるようです。実際、SalesForceのAPIでは、PATCHリクエストでデータを更新した際に正しく更新されると204が返される。

:::note
一方で204はあまり使うべきではないという意見もあります。なぜならレスポンスが空であるということは情報が少なすぎて、その結果をどう解釈すれば良いのか分かりにくいというものです。
そしてPUTやPATCHでは変更された状態のデータを、DELETEでは削除されたデータそのものを返すべきだという主張です。
:::
GitHubのアクセストークン作成方法と、使い方

# 背景
とあるリポジトリのデバッグを任されたので、久しぶりにgit cloneをしようとしたら
```
remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com
```

github初心者の僕には何が何だかわからない状態でした。

# やるべきこと
この場面に直面したらやるべきことは、**アクセストークンを作る！！**　です。

作り方は、以下に記しておきます。

# アクセストークンの作り方

1. 右上のアカウントマークをクリックして、下の方の　⚙settingをクリック
1. 左側メニューの１番下にある、<>Developer settingsをクリック
1. 🔑personal access tokensのTokens (classic)をクリック
1. 何のトークンかわかる文字をnoteに入れましょう。
1. Expirationはお好きに。。。。？
1. Select scopesは、repo 、admin:repo_hook、delete_repoくらいは付けておきましょう。
1. アクセストークンが表示されるので、どこかに保存しておきましょう！　**今後は見れなくなります。** 


# アクセストークンを使って、認証

```
Username for 'https://github.com': 
Password for 'https://hoge@github.com':
```

Passwordの欄に、普段使っているパスワードではなく、先ほど作ったアクセストークンを入れます。
# 最後に

URLに認証情報を入れる方法などもありましたが、Passwordに入力する方が簡単だと思ったので書いておきます。

# 参考にさせていただいたサイト様
https://qiita.com/setonao/items/28749762c0bc1fbbf502
https://dev.to/shafia/support-for-password-authentication-was-removed-please-use-a-personal-access-token-instead-4nbk#:~:text=Please%20use%20a%20personal%20access%20token%20instead.,-While%20pushing%20some&text=Starting%20from%20August%2013%2C%202021,in%20place%20of%20your%20password.
Wireshark

<!--
2023/10/17
-->

[picoCTF][Forensics][Trivial Flag Transfer Protocol]

# Writeup
* pcapngなので、とりあえずWireshak
TFTPの通信から、ファイルの取り出し。
`File` `Export Objects` `TFTP` `Save All`
![Export.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/e1ccdc2f-b7a4-146e-bc15-212532088747.png)
<br>

* テキストファイルが２つ。繋げてみた。
CyberChefでROT13
![ROT.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/8ca4e866-928f-e7ba-7d13-e84ea3a2bc74.png)
<br>

* 文字列が見づらいので、chatGPTさんに見やすいようにお願い。
![chatGPT.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/dbc2c27b-5eb7-80ac-7d62-81e4198864c9.png)
<br>

* 翻訳はDeepLにお願い。
![DeepL.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/cf64dd1b-a3af-c4f2-5317-00efdb1334c2.png)
<br>

* ヒントのようなメッセージでした。残念。
気を取り直して、debファイルを展開。`Extract Here`
program/DEBIAN/md5sumsを確認したら、`steghide`っぽい。
とりあえずインストール
~~~bash
sudo apt install -y ./program.deb
~~~
* 画像ファイルは３つなので、３回セットで実行。
passphraseはそれっぽいものを、いろいろ入力してみた。
テキストファイルの [ - ] がヒントだったみたい。
![answer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/6968b8ae-9c97-ec68-3087-bb290e7ff030.png)

# 参考サイト

https://www.deepl.com/translator

https://chat.openai.com/
Django基本６～Django Tmplate Languageを使用して画面を表示してみる

こんにちは、ちょっと寝不足気味です。眠いのに早く目が覚める、、、年齢か、、、、

今回は、表題の言語を使用してhtmlの中にpythonを埋め込んでみて
viewから連携された情報を画面表示してみたいと思います。

■やりたい事
（１）リスト型に設定された値を画面に表示する
（２）辞書型に設定された値を画面に表示する
（３）リストに設定された西暦年を判定し、和暦に変換し結果を表示する。
　　　for文とif文を使用してやってみようと思います。
１．開発準備
　　　プロジェクト名＝norizo_project4
　　　APP名＝norizo_app4
　　　Templates配置場所＝norizo_project4.templates
 
　開発準備作業のやり方はこちら↓
　　　https://qiita.com/norizo_no1/items/bd3bf8248084ee2975af
　Templatesを配置の仕方はこちら↓
　　　https://qiita.com/norizo_no1/items/8d1f858a6827a0f987ec

２．setting.pyの修正
![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571777/618c7a42-0887-52f1-87f0-0b1855c39dd8.jpeg)
![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571777/a6494f82-b6e7-539f-3816-5096bfe0789c.jpeg)
３．norizo_project4/urls.pyの修正
![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571777/9a843b88-fb0f-705f-270e-d004713f6bd0.jpeg)
４．norizo_app4/urls.pyの新規作成
![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571777/6290fae1-4a8d-25bf-32d6-e0af5b67db4b.jpeg)
５．views.pyの修正
　　囲った部分の関数を作成
![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571777/3853801b-1e3d-b462-85d9-93de46a894c6.jpeg)
６．wareki.htmlを作成する
　　和暦の編集はlistが終了するまでfor文で回しています。
　　当初は、html側でがっつり判定やlist型への編集をやってfor文もZIPオプション等
　　つける予定でしたが、pythonでは行えるがDTLでは実装できないというような
　　機能制限がある印象でした。ロジックの骨の部分を担うのはviews.pyの方に軍配が
　　上がり、DTLは主に項目編集を担うといった印象でした。
![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571777/0f835d16-9d96-67e5-3969-0d6280d53021.jpeg)
７．サーバー起動して結果を確認してみます。
![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571777/147ba2d2-5a8f-da67-4a40-bdc479b42e12.jpeg)
上手くいきました
![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571777/7308684e-468c-31d9-acad-22e7032c8700.jpeg)
PostgreSQLのVACUUMについて

## vacuumとは
公式ドキュメント：https://www.postgresql.jp/document/9.6/html/sql-vacuum.html
公式ドキュメントより

```
VACUUM は、不要タプルが使用する領域を回収します。PostgreSQLの通常動作では、削除されたタプルや更新によって不要となったタプルは、テーブルから物理的には削除されません。 これらのタプルはVACUUMが完了するまで存在し続けます。 そのため、特に更新頻度が多いテーブルでは、VACUUMを定期的に実行する必要があります。
```

PostgreSQLではデータを削除しても、実際には削除フラグがついているだけで完全には削除されておらず、見えなくなっているだけ。
VACUUMをすることで、削除フラグがついたデータを完全に消し去ることができ、それによって空いた領域を再利用可能な状態に変更する。
つまり、更新頻度の高いテーブルに対して行うと効果的ということ。

## タプルとは
テーブル内にINSERT, UPDATE, DELETEで格納する行（row）のことをタプルという。

## VACUUM, VACUUM FULL, VACUUM ANAYZE
バキュームにはVACUUMとVACUUM FULL, VACUUM ANALYZEの３つがある

通常のVACUUMはユーザがバキュームできる権限を持つ、DB内のすべてのテーブルを処理する。
処理速度は速いが、回収した領域はほとんどOSに返されない。

VACUUM FULLはテーブルに対する排他ロックが必要で、処理に時間がかかるがより多くの領域を回収することができる「完全」なバキュームをすることができる。
大きな容量がテーブルから回収されなければいけない場合のみに使用されるべき。

VACUUM ANALYZEはVACUUM後にANALYZEを実行する。
※ANALYZEはDB内のテーブルに関する統計情報を更新するコマンド

## VACUUM

```
VACUUM テーブル名;

-- VERBOSEをつけることで、実行時間等の詳細情報を表示することができる
VACUUM VERBOSE テーブル名;
```

## VACUUM FULL

```
VACUUM FULL テーブル名;
```

## VACUUM ANALYZE

```
VACUUM ANALYZE テーブル名;
```

## AUTOVACUUMなんてものもあるらしい
PostgreSQLの機能で、自動バキュームを行ってくれるらしい。
詳細は[PostGreSQLの公式](https://www.postgresql.org/docs/current/runtime-config-autovacuum.html)を見てほしいが、色々チューニングもできるっぽい。
また、省略することも可能だが、使用することを強く推奨しているようなので、使うようにしよう。

## 参考記事
- https://postgresweb.com/post-5194
- https://qiita.com/neustrashimy/items/b3d64b749582b32ad0ff
SQLで累積を取得する方法

こんにちは:smiley:

SQLで累積を取得する方法を紹介します。


商品ごとに毎月の売上高の累積を求めます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3247892/4cc7b398-0554-6239-b3fb-46c45ac897c6.png)

## コーディング例①
``` SQL
  SELECT
    商品
    , FORMAT(売上年月, 'yyyy年MM月') AS 売上年月
    , 売上高
    ,SUM(売上高) OVER (PARTITION BY 商品 ORDER BY 売上年月 ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW) AS 売上累積
  FROM
    商品別月間売上
  GROUP BY
    商品
    , 売上年月
    , 売上高
```
## 実行結果①
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3247892/0033a9a8-e133-a8ac-f6e6-6c4629d9e2c7.png)



## コーディング例②
``` SQL
  SELECT
    A.商品
    , FORMAT(A.売上年月, 'yyyy年MM月') AS 売上年月
    , A.売上高
    , SUM(B.売上高) AS 売上累積
  FROM
    商品別月間売上 A
    INNER JOIN 商品別月間売上 B
        ON A.商品 = B.商品 AND A.売上年月 >= B.売上年月
  GROUP BY A.商品, A.売上年月, A.売上高
  ORDER BY A.商品, A.売上年月
```
## 実行結果②
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3247892/96318060-0a17-7479-456d-7aacc9693dd8.png)
【React Hooks】useEffectについて

公式ドキュメントや記事を読んだけどわからないので書きました。

## useEffectとは？
関数コンポーネント内で副作用 (サイドエフェクト) を実行するためのフックです。
React Hooks[^1] で用意されています。

副作用とは、DOMの更新・データの取得・ロギングなど、関数コンポーネントの出力（レンダリング）に関係ない処理のことです。useEffect を使うことで、レンダリングと副作用を切り離すことができます。

以下が構文です。
```react
useEffect(() => {
  /* 実行させたい副作用関数 */
  console.log('副作用関数が実行されました！')
},[依存する変数の配列]) // 副作用関数の実行タイミングを制御する依存データを記述
```

## 挙動

useEffectフックは、 **第二引数にある配列のいずれかの要素が作成・更新されたときに第 1 引数の処理を実行します**。

```react
useEffect(() => {
  console.log(`filter ステートが更新された: ${filter}`);
}, [filter]);
```
また、useEffect 内で参照している外部の変数や関数を第二引数の配列を「依存配列」と言います。

空の配列の場合、コンポーネントがマウントされたときのみに第 1 引数の処理を実行します。この配列そのものを省略すると常に副作用が実行されます。

```react
useEffect(() => {
  console.log(`コンポーネントがマウントされた`);
}, []);
```

## 一部ユースケース

DOMの更新：コンポーネントがレンダリングされた後にDOMを操作する必要がある場合
データフェッチ：APIからデータを取得し、そのデータに基づいてコンポーネントを更新する場合
イベントリスナー：特定のイベント（例えば、ウィンドウサイズの変更）に対してリスナーを設定し、そのイベントが発生したときにコンポーネントを更新する場合

典型的には、**「React が DOM を更新した後で何らかの追加コードを実行したい」** という場合に useEffect フックを使うようです。

## useEffectの使用例
```react
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // レンダリング後に実行される
  useEffect(() => {
    document.title = `${count} clicks`;
  });

  return (
    <>
      <p>{count} clicks</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </>
  );
}
```

[^1]: クラスを書かずとも state など React の機能が使えます。フックには useState, useContext など種類があり、基礎的なものはこの記事がわかりやすいかと思います。https://qiita.com/seira/items/f063e262b1d57d7e78b4
【Rails】カラムのデフォルト値を変更する

カラムのデフォルト値を変更するにはマイグレーションファイルに以下のように記述します。

```rb

def change
  change_column_default テーブル名, カラム名, from: 元のデフォルト値, to: 変更後のデフォルト値
end

```

`users`テーブルの`is_sample`カラムのデフォルト値を`false`から`true`に変更する場合は以下のようになります。

```rb

def change
  change_column_default :users, :is_sample, from: false, to: true
end

```
QuantLibのダウンキャスト

QuantLibでダウンキャストする際の関数一覧。QuantLib 1.30で確認。たぶん完成しないので随時更新。

# メソッド一覧
## キャッシュフロー
|メソッド                                            |キャスト先|備考|
|:-                                                 |:-        |:-|
|as_capped_floored_yoy_inflation_coupon             ||
|as_coupon                                          |Coupon             |as_redemptionは無い|
|as_cpi_cashflow                                    ||
|as_cpi_coupon                                      ||
|as_fixed_rate_coupon                               |FixedRateCoupon    |
|as_floating_rate_coupon                            |FloatingRateCoupon |
|as_indexed_cashflow                                ||
|as_inflation_coupon                                ||
|as_overnight_indexed_coupon                        ||
|as_sub_periods_coupon                              ||
|as_yoy_inflation_coupon                            ||
|as_zero_inflation_cash_flow                        ||

## インデックス
|メソッド                                            |キャスト先|備考|
|:-                                                 |:-        |:-|
|as_iborindex                                       |IborIndex  |
|as_overnight_swap_index                            ||
|as_swap_index                                      ||
|as_zero_inflation_index                            ||


## ヘルパー
|メソッド                                            |キャスト先|備考|
|:-                                                 |:-        |:-|
|as_black_helper                                    ||
|as_constnotionalcrosscurrencybasisswapratehelper   ||
|as_depositratehelper                               ||
|as_fraratehelper                                   ||
|as_mtmcrosscurrencybasisswapratehelper             ||
|as_oisratehelper                                   ||
|as_swapratehelper                                  ||
|as_swaption_helper                                 ||



## その他
|メソッド                                            |キャスト先|備考|
|:-                                                 |:-        |:-|
|as_gsr_process                                     ||
|as_plain_vanilla_payoff                            ||


# 使用例

## 債券キャッシュフローからクーポンキャッシュフローのみを抽出
```python:input
import QuantLib as ql

bond = ql.FixedRateBond(
    2,                      # settlementDays
    ql.TARGET(),            # calendar
    100.0,                  # faceAmount
    ql.Date(15,12,2020),    # startDate
    ql.Date(15,12,2022),    # maturityDate
    ql.Period(6, ql.Months),# tenor
    [0.05],                 # coupon   
    ql.Actual365Fixed()     # paymentConvention
)

[(cf.date(), cf.amount()) for cf in bond.cashflows() if ql.as_coupon(cf) is not None]
```

```:output
[(Date(15,6,2021), 2.4931506849315),
 (Date(15,12,2021), 2.5068493150684823),
 (Date(15,6,2022), 2.4931506849315),
 (Date(15,12,2022), 2.5068493150684823)]
```


## 変動利付債から金利指標を取り出す

`ql.as_floating_rate_coupon(cashdlow).index`で金利指標を取り出す。さらに、`ql.as_iborindex()`で`ibor`に。
web技術を支える基本技術

## はじめに
web技術の基本を支える技術用語について学んだので、
アウトプットとしてそれらを説明することを目的に今回の
記事を作成しました。
インプットする上で使用した文献は以下になる。
[『プロになるためのWeb技術入門』――なぜ，あなたはWebシステムを開発できないのか](https://www.amazon.co.jp/%E3%80%8E%E3%83%97%E3%83%AD%E3%81%AB%E3%81%AA%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AEWeb%E6%8A%80%E8%A1%93%E5%85%A5%E9%96%80%E3%80%8F%E2%80%95%E2%80%95%E3%81%AA%E3%81%9C%EF%BC%8C%E3%81%82%E3%81%AA%E3%81%9F%E3%81%AFWeb%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%82%92%E9%96%8B%E7%99%BA%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%81%AE%E3%81%8B-%E5%B0%8F%E6%A3%AE-%E8%A3%95%E4%BB%8B-ebook/dp/B09MVGM99L/ref=sr_1_1?crid=2RUFI5FRBVD4D&keywords=web%E6%8A%80%E8%A1%93%E5%85%A5%E9%96%80&qid=1645489804&sprefix=web%E6%8A%80%E8%A1%93%2Caps%2C205&sr=8-1)

## 用語解説
**リクエスト**
ネットに接続したPCからユーザーが自分の見たいwebサイトにアクセスするとする。
アクセスする際に「アクセス先の情報をください！」という情報が
webサーバーと呼ばれるユーザーが欲しい情報をくれるどこかのPCで動いている
ソフトウェアに送られます。この一連の流れをリクエストと呼びます。

**ステートフル**
ステートフルは状態を保持できるプロトコルです。
ユーザーがあるリクエストを送ったとします。
そのリクエストが送られてきたサーバーはその結果を
保持してその状態でのみできるレスポンスができるようになります。
ログイン状態がそれにあたります。
自分のユーザー名やパスワードを入力してログインすることで
ログイン状態でしか見れないページを見れるようになりますよね。
ログイン状態を維持するためにユーザー情報やパスワードを
ユーザー側から別のページに移るたびに送信していたら面倒です。
その手間を省けることがステートフルなプロトコルのメリットです。

**ステートレス**
ステートレスはステートフルとは反対に
状態を保持できないプロトコルを指します。
ステートレスなプロトコルはステートフルなプロトコルと比べて
処理がシンプルで簡単に接続ができます。
HTTPはステートレスなプロトコルでログインなどの
処理がなくても簡単にwebサイトに接続できるようになっています。


**レスポンス**
レスポンスは上記で説明したリクエストに対する返答のことです。
ユーザーの希望する情報をwebサーバーがHTML形式でユーザ側に返してくれます。
レスポンスを受け取ることでユーザーは見たいwebサイトに接続することができます。

**クッキー**
HTTPでステートフルを実現するための技術です。
webサーバー側で設定した値をユーザー側のPCに保存することができます。
例えば、ログイン情報としてユーザー名とパスワードをサーバーに送信したとします。
するとサーバー側はクッキーの値としてレスポンスで入力された
情報をユーザー側に返します。
その情報をユーザー側は保持し続けることができ
別のリクエストを送る際にはクッキーの情報をサーバーに
一緒に送ることによって情報によったレスポンスを返すことができます。

**プロトコル**
サーバーとクライアントが通信できるようにするためのルールのようなもの。
通信の目的によってプロトコルは使い分けられ、
身近な例でいうとHTMLのやりとりに使われるHTTPがある。
これによりユーザーはwebサイトの閲覧が可能になる。

**ポート番号**
ユーザーがリクエストを送る際にどこのwebサーバーに
リクエストを出すのかということをIPアドレスで明示しなければなりません。
しかし、IPアドレスだけでは届いた情報をどのアプリケーションが処理して
ユーザーに情報を返すのかがわかりません。
ですので、IPアドレスに加えてどのプロトコルを使用した通信なのかを示すため
ポート番号も明示しなくてはなりません。
例えば、HTTP通信を使ったリクエストを送る場合は
サーバー側がHTTP通信用に設定している
ポート番号にリクエストを送る必要があります。
前もって設定していたポート番号にHTTP通信のリクエストがくれば
サーバー側はリクエストのあったwebサイトの情報送れば良いと
判断しレスポンスとしてユーザーに返します。
【Ruby on rails】boolean型って便利！

# はじめに
プログラミングを勉強して2か月ほどです。
初心者なので間違っているところがあれば、ご指摘いただけると幸いです。

# そもそもboolean型ってなに？
この型は、二つの値しか持たないことが特徴です。boolean型では、値を「真 (true)」または「偽 (false)」で表示します。真は通常1や真の値（true）、偽は通常0や偽の値（false）と表現されます。

boolean型の詳しい内容については、@mmaumtjgj(kamin_k)さんの記事で記載されています。
分かりやすく解説されているので、ぜひ読んでみてください。


https://qiita.com/mmaumtjgj/items/b9b04ea64e30a16569fe


# boolean型を使ってできること
boolean型は上記の通り、「true」か「false」で表します。例えるなら、スイッチの「オン」と「オフ」同じような機能です。
この機能と条件分岐を組み合わせることで、見た目上でもスイッチのようにオンとオフを表すことができます。

それでは、実際にboolean型を使用して実装していきましょう！

# Let's start!!!

## マイグレーションファイルの記述
```2023xxxxxx_create_items.rb
class CreateItems < ActiveRecord::Migration[7.0]
  
   def change
     create_table :items do |t|
      t.boolean :switch, default: false, null: false

      t.timestamps
     end
   end

end
```
※今回は`switch`というカラム名にしました。

`default: false`という記述が重要です。
この記述をすることで、テーブルに保存される時に「false(0)」で保存されます。


## コントローラーへの記述
```items.controller.rb
class ItemsController < ApplicationController
  
  def use
    @item = Item.find(params[:item_id])
    @item.update(switch: true)
    redirect_to root_path
  end

  def back
    @item = Item.find(params[:item_id])
    @item.update(switch: false)
    redirect_to root_path
  end

end
```

今回はuseとbackというアクションを使って「オン」と「オフ」を表現していきます。
`@item.update(switch: true)`
上記の記述は`switch`カラムを`true`にするという記述です。
useアクションが実行された時に`true`に変わります。

## ビューへの記述
```items/index.html.erb
<% if item.switch == true %>
    <div class='switch-on'>
      <span>オン</span>
    </div>
<% end %>
```
`<% if item.switch == true %>`
上記の記述は、itemのswitchカラムがtrueだったらという記述です。
この条件分岐を使うことで「オン」の表示をすることができます。

# 終わりに
みなさん実装お疲れ様でした！
boolean型を使用しての実装は以上です。
分かりづらい点が多かったと思いますが、最後まで読んでいただきありがとうございました！！
SSOとは

# はじめに
毎週1本様々な技術に関する記事を投稿しています。
もし興味のある方は下のリンクから他の記事も見ていただければ幸いです。
 [@7_inai_](https://qiita.com/7_inai_)

# SSOとは
SSO(Single Sign On)とは、多くのオンラインサービスやアプリケーションで採用されている認証技術の一つです。SSOを使用すれば、ユーザーは1つの認証プロセスを通じて複数のリソースやサービスにアクセスできるようになります。つまり、`一度のログインで複数のアカウントにアクセスすることができる`ようになります。

# SSOの仕組み
SSOの仕組みを紹介します。

### ①認証
ユーザーはアプリケーションやウェブサイトにアクセスし、最初に認証を行います。これは通常、ユーザー名とパスワード、指紋認識、または他の認証手段を使用して行われます。

### ②トークン生成
認証が成功すると、アプリはユーザーに __トークンを発行__ します。このトークンは有効期限を持ち、将来の認証に使用されます。

### ③他のサービスへのアクセス
ユーザーが他のサービスにアクセスしようとすると、トークンを提供し、それに基づいて認証が行われます。__ユーザーは再度ユーザー名とパスワードを入力する必要はありません。__

# セキュリティに対するメリット/デメリット
SSOはセキュリティに対して、メリット/デメリットの両面を持っています。

### ■メリット
- 複雑なパスワードを設定できる
1つのパスワードで複数のサイトで使用できるため、パスワードを覚える負担が少なくなります。そのため、比較的難解なパスワードを設定しやすくなります。
- パスワードの管理負担の減少
上述の通り、使用するパスワードの数が少ないため、パスワードを管理するための負担が少なくなります。

### ■デメリット
- 被害規模拡大
1度の認証で複数のサイトにアクセスできるため、パスワード漏洩時の被害規模が大きくなる傾向にあります。


# 終わりに
SSOは現代のデジタル環境で重要な認証技術であり、セキュリティと利便性のバランスを取る一助となります。正しく実装されれば、ユーザーエクスペリエンスの向上と管理の効率化をもたらし、企業や組織に多くの利益をもたらすでしょう。ただし、セキュリティリスクを認識し、適切な対策を講じることが不可欠です。

最後までお付き合いくださりありがとうございました。
[git]1コマンドで最新のブランチにチェックアウトするコマンド

### 経緯
レビューの時など、
どうせ一番最新のブランチにチェックアウトするのに、わざわざブランチ名を入れてチェックアウトするのがすごく煩わしい。どうにかブランチ名を入力せずにブランチを切れる方法を探してた。

### コマンド
```
git switch $(git for-each-ref --sort=-committerdate --format="%(refname:short)" refs/remotes/ | head -n 1 | sed 's#origin/##')
```

git switch ブランチの切り替え（checkoutでも良い）
```for-each-ref```: ブランチの取得
```--sort=-comitterdate```:　降順に並び替え
```--format="%(refname:short)"```: ブランチ名だけを表示
```refs/remotes/```:　取得するブランチをリモートに限定
```head -n 1```: ブランチを一つだけ表示
```sed 's#origin/##'```:　余計な```origin/```を削除

あとは~/.gitconfigにエイリアスを設定して終了！

sed〜は無理矢理感あって微妙かも...

### 追記
```
git switch $(git for-each-ref --count=1 --sort=-committerdate --format="%(refname:short)" refs/remotes/ | sed 's#origin/##')
```
```head -n 1```よりも```--count=1```の方がスマートですね
Figma - ポートフォリオ制作、デザインカンプ作成(2023/10/13)

2023/10/13 ポートフォリオ用、架空企業のコーポレートサイトのデザイン作成

![スクリーンショット 2023-10-13 22.21.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570059/c93d6a02-cdec-43e5-dd45-b1b92447ec4a.png)

・架空企業のコーポレートサイト
		使用ツール : Figma/VSCode
		使用言語 : HTML/CSS
		制作期間 : デザイン/1日

	<概要>架空の企業、WEB Systemsの新規Webサイト作成

	<ターゲット層>20~30代男女

	<サイトの目的>企業イメージをアピールし、他社との差別化、顧客のファン化を狙っている。

	<企業の特徴>Web制作やインターネットメディア事業を展開している

	<デザインコンセプト>誠実さが感じられ、親しみやすさのある雰囲気

	<デザインモチーフ>
	色 :　落ち着いた色合い(青・紫・緑)
	フォント : Noto Sans JP
	モチーフ : 長方形、四角形
	イメージ : シンプル、誠実、実直
WindowsでVPNが繋がらない時の備忘

検索で引っかからないので、自分用の備忘として

デバイスマネージャーの起動
 Win+R devmgmt.msc [Enter]
非表示デバイスの表示
 Alt+V W
巷にあふれている情報どおり、WANなんちゃらを全部削除
【重要】グレーになっているネットワークデバイスも削除
Rubyのoptparseライブラリを使ってオプション付きプログラムを実装しよう！

## はじめに
Ruby初心者がオプション付きのプログラムをゼロから自前で実装する場合かなり大変です。そんな時に大活躍してくれるがのoptparseライブラリです。オプション解析を良い感じにやってくれます。

## 最初に知っておくと良いこと
- Rubyのoptparseは使用時にロードが必要なタイプの標準ライブラリで `require "optparse"`と書いてから使用します。
- optparseの記事をインタネットで調べた際、ARGVとう変数によく出くわします。しかしARGVはoptparseとは直接は関係ありません。ARGVはRubyの特別な変数でコマンドライン引数を格納する配列となります。

### 実例を使ってoptparseを理解しよう！
- 例として年と月を引数に取るカレンダープログラムを考えます。年のオプションを `-y`、月のオプションを `-m`とします。

例えば2023年10月のカレンダーを表示するプログラムなら下記のように記述するとします。
```calendar.rb
ruby calendar.rb -y 2023 -m 10
```

calendar.rbを実行した際一体どのようにして `2023`や `10`といった情報を取得できるのでしょうか？optparseを使うと簡単に`2023`や `10`といった情報を取得できます。

## optparseの基本動作
- 最小限の構成からなるプログラムをつかって基本的な仕組みを理解しましょう。プログラムと実行例を以下に記載します。

```
ruby calendar.rb -y 2023 -m 10
```

```calendar.rb
require 'optparse'

opt = OptionParser.new

opt.on('-y') {|v| p v } 
opt.on('-m') {|v| p v } 

p ARGV # =>["-y", "2023", "-m", "10"]

opt.parse!(ARGV)
p ARGV # =>["2023", "10"]

p "#{ARGV[0]}年" # =>"2023年"
p "#{ARGV[1]}月" # =>"10月"
```
#### 解説
`require 'optparse'`
optparseはRubyの組み込みライブラリではないのでこのように書いて使える状態にしてあげる必要があります。これがないと例えば次のOptionParserクラスを使うことができません。

`opt = OptionParser.new`
OptionParserクラスのnewメソッド使ってOptionParserクラスから作成されたインスタンスを作成。作成されたインスタンスをoptに格納しています。

`opt.on('-y')`
optのonメソッドの引数にオプションを指定します。ここでは、`-y`オプションを指定してます。こうすることで、`-y`がオプションとして認識されます。

`{|v| p v }`
コマンド引数に`-y`が渡された時、仮引数vにtrueが格納されます。(それ以外はfalseが格納されます)
このブロックでは、例として仮引数の値を返す処理が記述されています。

:::note
parse!メソッドでARGVが解析された時にonメソッドで指定したオプションが含まれていたらブロックの中身が実行されます。ここでは処理内容が設定されているだけで実行はされません。
:::

`opt.on('-m')`
説明省略

一つ目の `p ARGV`
ARGVはコマンドライン引数が配列の要素として格納されています。例を見てもわかるように`-y`や`-m`オプションも含め引数すべてが配列の要素として格納されています。

`opt.parse!(ARGV)`
optのparse!という破壊的メソッド使って配列ARGVを解析します。具体的にはonメソッドで指定した`-y`や`-m`オプションを除いた引数を要素した配列をARGVに格納します。

二つ目の `p ARGV`
`-y`オプションが除かれ、`2023`, `10`がARGVの要素として格納されています。

`p "#{ARGV[0]}年"` `p "#{ARGV[1]}月"` 
無事年と月を取得することができました。

## 上のプログラムの問題点
とりあえず、年と月を取得することができました。でもこのプログラムには問題があります。
それは`ruby calendar.rb -m 10 -y 2023`のようにオプションの順番を入れ替えて入力されてしまうと 10年2013月と表示されてしまうことです。どうすればよいのでしょうか？calendar.rbを次のように書き換えます。

```calendar.rb
require 'optparse'

opt = OptionParser.new

options = {} # 追加
opt.on('-y year') { |y| options[:year] = y } # 変更
opt.on('-m month') { |m| options[:month] = m } # 変更

p ARGV # =>["-m", "10", "-y", "2023"]

opt.parse!(ARGV)
p ARGV # =>[]

p "#{options[:year]}年" # 変更 =>"2023年" 
p "#{options[:month]}月" # 変更 =>"10月"
```
#### 解説
`options = {}`
空のハッシュを用意します。年と月の情報を管理する目的で使います。

`opt.on('-y year') { |y| options[:year] = y }`
onメソッドのオプション定義で末尾に何か(ここでは`year`)を書くと、仮引数`y`には`year`で指定した引数が入るようになります。
例えば`ruby calendar.rb -y 2023`とした場合、仮引数`y`には`2023`が渡されます。
またさらにここでは後でこの値を参照できるようキー :year と値 2023 の組み合わせをoptionsハッシュに追加しています。

`opt.on('-m month') { |m| options[:month] = m }`
説明省略

`p ARGV`
onメソッドで指定した`-y year`や`-m month`オプションを除いた引数がARGVに格納されます。`ruby calendar.rb -y 2023 -m 10`の場合は、`-y 2023 -m 10`がオプションで指定された部分と解釈されるためARGVは最終的に空の配列となります。
(年月の情報はoptionsにて管理するため、この例でARGVは無用の長物です。)

`p "#{options[:year]}年"`
ハッシュにキー:yearを指定して2023を取得します。

`p "#{options[:month]}月"`
説明省略

以上で、`ruby calendar.rb -y 2023 -m 10` と指定しても、
`ruby calendar.rb -m 10 -y 2023` と指定しても無事同じ結果を得ることができるようになりました。
モジュール結合度

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/b5fdd98c-46ea-e91a-c660-fd2ebae35b24.png)
１：モジュール結合度
　モジュール結合度は、モジュール間の密着度を表す指標です。モジュール結合度は、弱いほど、モジュール単体として独立性が高く、再利用しやすくなります。
【Ruby on rails】戻るボタンの実装

# はじめに
プログラミングを勉強して2か月ほどです。
初心者なので間違っているところがあれば、ご指摘いただけると幸いです。

# 戻るボタンを実装したい
戻るボタンを実装するとなった時にまず思いつくことが、
`<%= link_to 'Back', root_path %>`のようにパスを指定することで実装すると思います。

しかし、このパス指定では、今表示されているページから一つ前のページに戻ることはできません。

こんな時に便利なのが下記の記述です。
`<%= link_to '戻る', 'javascript:history.back()' %>`
ブラウザの履歴を記憶し、前のページに戻ってくれます。

どのページからでも飛べるページがあり、そこに戻るボタンを表示したい場合はこの記述が有効になると思います。

# 終わりに
分かりづらい点が多かったと思いますが、最後まで読んでいただきありがとうございました！！
すごく便利な機能だと思うので、みなさんのアプリでも使ってみてください！
PICO4でメニューボタンを押してもメニューが出ないときに設定メニューを強制的に出すコマンド

2023年はPICO4やPICO4Eを使うお仕事をいっぱいやってきました。
先日は、50台のPICO4Eをセットアップしたりもしましたｗ
（スタッフのみなさん、ご協力ありがとうございました！）

|<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日はスタッフの皆さんとPICO4Eをセットアップしました！<br>42台並ぶと壮観！<a href="https://twitter.com/hashtag/STYLY?src=hash&amp;ref_src=twsrc%5Etfw">#STYLY</a> <a href="https://twitter.com/hashtag/PICO?src=hash&amp;ref_src=twsrc%5Etfw">#PICO</a> <a href="https://twitter.com/hashtag/%E3%82%A8%E3%82%A2%E3%83%AC%E3%83%BC%E3%82%B9?src=hash&amp;ref_src=twsrc%5Etfw">#エアレース</a> <a href="https://t.co/CgqVDJoaj7">pic.twitter.com/CgqVDJoaj7</a></p>&mdash; segur(せぎゅ)@都市ARエンジニア (@segur_vita) <a href="https://twitter.com/segur_vita/status/1713206926098780540?ref_src=twsrc%5Etfw">October 14, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>|
|---|
|大量のPICO4Eをセットアップする様子|

50台もセットアップすると、いろんなトラブルが発生するのですが、その中でも一番つらかったのが、「メニューが出せない」トラブルです。

# ボタン押してるのにメニューがでない！

通常、コントローラーの◯ボタンを押せばメニューが出ます。


|<img width="400" alt="◯ボタン" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/07be74c9-1b4b-b394-57ae-2e8718d15279.png" />|
|---|
|画像引用: [PICO4E公式](https://www.picoxr.com/jp/products/pico4?gclid=Cj0KCQjw1aOpBhCOARIsACXYv-dXTf57as9ceHXnjSB8sRgHd2PybsshLQ2pFtZXcyWCdPDx6KZ-YDsaAuzSEALw_wcB)<br>（正式名称は「ホームボタン」みたいですが、「◯ボタン」の方が直感的だと思うので、本記事では◯ボタンと呼びます。）|


この **◯ボタンを押してるのにメニューが出ない** 症状がたまにあるんです！

他のボタンは正常に動作するのに、なぜか◯ボタンだけ反応しないのです。

具体的には50台中5台ほどありました。

とりあえず設定メニューさえ出せれば、いろいろとデバイスの調整ができるので、なんとかして設定メニューを出す方法はないか調べました！


# adbコマンドで設定メニューが出せるぞ！

結論からいうと、PICO4とPCをUSB接続して、 **以下のコマンドを実行すると、PICO4の設定メニューを出すことができました！**

```bash
adb shell am start com.picovr.settings/com.picovr.vrsettingslib.UnityActivity
```

※PCにadbがインストールされている必要があります。

|![設定メニューが出た様子](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/97739d48-dde7-7ccd-43d0-9727cd60cf09.jpeg)|
|---|
|設定メニューが出た！|


設定メニューさえ出せれば、いろいろ調整ができますし、工場出荷状態に戻すこともできます！

この方法で私はセットアップ作業を乗り切りました！

ちなみに、工場出荷状態に戻したらメニューが出せない症状も直りました！


# コマンドを見つけた経緯

どうやって上記のコマンドにたどりついたのか、備忘録として残します。

まず、「adbコマンドで設定メニューを直接起動すればいいんじゃね？」
と思い、PICO4にインストールされているパッケージを調べました。

調べたところ、 `com.picovr.settings` という、いかにもなパッケージを見つけました！

起動クラス名を調べたところ、 `com.picovr.vrsettingslib.UnityActivity` であることがわかったので、上記のコマンドにたどりつきました。


# 2023/10/17追記: メニューがでなかった理由

なぜメニューが出なかったのか、原因がわかったので追記します！

`コントローラーの更新` というダイアログがでているときは、◯ボタンを押してもメニューが出ないことがわかりました！

プレイ境界線・プレイスペースの設定によっては、このダイアログが自分の背後に出てて気づかないパターンがあるんです。

なので、◯ボタンを押してもメニューがでないときは、**後ろを振り向きましょう！**


# さいごに

本記事作成にあたり、以下のページを参考にさせていただきました。
ありがとうございました。

- https://noitaro.github.io/adb-shell-start/
Mac環境でSQLiteの実行環境をセットアップする方法

Mac環境でSQLiteの実行環境をセットアップする方法は、以下のステップに従うことができます。

1. Homebrewのインストール:
   HomebrewはMac用のパッケージ管理ツールで、SQLiteを簡単にインストールできます。ターミナルを開いて、以下のコマンドを実行してHomebrewをインストールします。

   ```
   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
   ```

2. SQLiteのインストール:
   Homebrewを使ってSQLiteをインストールします。

   ```
   brew install sqlite
   ```

   このコマンドを実行すると、最新バージョンのSQLiteがインストールされます。

3. SQLiteコマンドラインツールの起動:
   ターミナルで以下のコマンドを実行してSQLiteのコマンドラインツールを起動します。

   ```
   sqlite3
   ```

   これでSQLiteの対話型シェルが起動し、SQLクエリを実行できるようになります。

4. データベースの作成と操作:
   SQLiteのコマンドラインツールを使ってデータベースを作成し、テーブルを作成、データを操作することができます。例えば、以下のコマンドで新しいデータベースを作成できます。

   ```
   .open mydatabase.db
   ```

   これで `mydatabase.db` という名前のデータベースファイルが作成されます。

   その他のSQLiteのコマンドやSQLクエリを実行する方法については、SQLiteの公式ドキュメントを参照することをおすすめします。

以上の手順に従うことで、Mac環境でSQLiteの実行環境を簡単にセットアップすることができます。必要に応じて、SQLiteを使ってデータベースの設計や操作を行うことができます。
未経験エンジニアが採用された。。。

未経験ですが内定決まりました。
会社規模は売上２００億ほど。
面接内容:現在勉強中の内容を話して、仕事の基づいた強み、弱みを話しました。
あとは聞きたいことを聞いて終わりでした。
se,pgとして採用とのことです。


pg,seになりたいのであればプログラムに関して勉強していること、資格を勉強もしくは取得していることをアピールすれば受かるのかと、

あとは面接の対策として強み、弱み（仕事の経験を通して）、なぜ御社か（適当な理由をつけましょう）、自己PR（勉強してます、こんな業務をしてましたので仕事に生かせます等）、なぜ現在の職、大学を選んだのかそれくらい言えればいいと思います。これ以上は面接のときに時間もらって考えましょう。。。

転職活動で疲れたのは
会社ごとに志望理由を考えていくのが疲れました。。。


今後は会社から資格手当をもらえるように勉強頑張りたいと思います。。。
それと競馬予想システムの完成も目指します（いつになることやら）
RailsでCSV出力機能の実装時にハマったポイント

# はじめに
RailsでCSV出力機能は定番化されているが、少しハマったポイントを整理していく

# 実装内容
```:controller
      require 'csv'

      def export
        reports = (APIにリクエストしてデータを取得)
        generate_csv(reports)
      end

      private

      def generate_csv(reports)
    　　　　　　　bom = %w[EF BB BF].map { |e| e.hex.chr }.join

        csv_data = CSV.generate(bom, row_sep: "\r\n", force_quotes: true) do |csv|
          csv << weekly_reports['header']
          weekly_reports['body'].each { |report_body| csv << report_body }
        end

        filename = "reports_#{Time.current.strftime('%Y%m%d%H%M%S%L')}.csv"
        send_data(csv_data, filename:)
      end
```

# ハマった点１ CSV出力時のオプション指定
`CSV.generate`で引数を指定しないと、文字化けするので、以下を引数に指定
- bom　→　Byte Order Markの略で、Unicodeで書かれたテキストファイルの先頭に付ける
- row_sep: "\r\n" → 行の区切り文字としてCRLFを使用（Windowsで標準）
- force_quotes: true`　→ 強制的に二重引用符で囲む。読み取りエラー防止。

それでも文字化けが解消しない。。。

# ハマった点2　Mac自体の言語設定を日本語に変更
ちょっとこれは盲点だったが、自分のMACでは言語をあえて「英語」にしていた。
そのため、日本語に戻して、PC再起動したら、無事に文字化けがなくなった。

## 調査メモ
BOMの指定について
https://exlight.net/devel/unicode/bom.html
RHEL8でGemFireのC++NativeClientのサンプルコードをビルドする

VMware GemFire(旧Tanzu GemFire)のC++NativeClientをRHEL8上で動かそうとしたら、少し罠があったので備忘録がてら残す。

## C++NativeClientのインストール
[TanzuNetwork](https://network.pivotal.io/products/pivotal-gemfire#/releases/1335055)から`VMware GemFire Native Client RHEL 8`をダウンロードし、RHEL8上で解凍する。
```sh
tar xvzfp vmware-gemfire-native-10.4.3-build.9-Rhel8-64bit.tar.gz
```

[ドキュメントの記載](https://docs.vmware.com/en/Native-Client-for-VMware-GemFire/10.4/NC-for-GF-v10.4/cpp-geode-native-docs-cpp-getting-started-app-dev-walkthrough-cpp.html)に従って移動し、環境変数にパスを設定する。（この環境変数はビルドするまでのところでは使っていないかも。サンプル内のスクリプトでは見ている模様）
```sh
sudo mv vmware-gemfire-native /usr/local/nativeclient
echo "export GEODE_HOME=/opt/vmware/vmware-gemfire-10.0.1/" >> ~/.bashrc
. ~/.bashrc
```

## OpenSSLのインストール
RHEL8用のOpenSSL3のライブラリが配布されていないようなので自作する。
ソースをダウンロードして`make install`する。
`./Configure`のオプションは[こちら](https://qiita.com/cokemaniaIIDX/items/64f0ddc68d9929e92345)の記事を参考にした。
```sh
wget https://www.openssl.org/source/openssl-3.0.11.tar.gz
tar xvzf openssl-3.0.11.tar.gz
cd ./openssl-3.0.11
sudo yum install perl-IPC-Cmd perl-Pod-Html
./Configure  --prefix=/usr --openssldir=/usr/local/ssl '-Wl,-rpath,$(LIBRPATH)'
make -j9
sudo make install
```

## サンプルのビルド
ビルドのためにcmakeをインストールする。
```sh
sudo yum install cmake -y
```
サンプルコードを手元に展開する。
```sh
mkdir -p workspace/build
cp -r ./nativeclient/examples/ ./workspace
```
ビルドする。
```sh
cd workspace/build/
cmake .. -DVMwareGemFireNative_ROOT="/usr/local/nativeclient"
cmake --build .
```
問題なければ各サンプルディレクトリの下にバイナリが生成されており、実行できる。
```sh
$./cpp/transaction/cpp-transaction
Created cache
Created region 'exampleRegion'
Rolled back transaction - retrying(4)
```

## 躓いたところ
サンプルの`BUILD-EXAMPLES.md`に従ってビルドすると、以下のエラーで失敗する。
```sh
$ cmake .. -DGeodeNative_ROOT="/usr/local/nativeclient"
：（省略）
CMake Error at /usr/share/cmake/Modules/FindPackageHandleStandardArgs.cmake:230 (message):
  Could NOT find VMwareGemFireNative (missing:
  VMwareGemFireNative_CPP_LIBRARY VMwareGemFireNative_CPP_INCLUDE_DIR) (found
  version "1.0")
```
これは`GeodeNative_ROOT`がGeode用の定義であるため。
エラーに従って`VMwareGemFireNative_ROOT`に置き換えれば動く。

あと、OpenSSLを入れていないと以下のエラーとなる。
```sh
$ cmake --build .
：
/usr/bin/ld: warning: libssl.so.3, needed by /usr/local/nativeclient/lib/libvmware-gemfire.so, not found (try using -rpath or -rpath-link)
/usr/bin/ld: warning: libcrypto.so.3, needed by /usr/local/nativeclient/lib/libvmware-gemfire.so, not found (try using -rpath or -rpath-link)
```
[Requirement](https://docs.vmware.com/en/Native-Client-for-VMware-GemFire/10.4/NC-for-GF-v10.4/cpp-system_requirements.html#linux-support-5)には載っておらず見落としやすいため注意が必要となる。

## 付録：スクラッチ開発用の雛形
exampleをコピーして開発するのはやりづらいので、ゼロから開発する際にテンプレートとして使えそうな雛形を以下に用意した。

https://github.com/imurata/gemfire-client-sample

構成は以下。
```
gemfire-client-sample
|-- CMakeLists.txt
|-- Makefile
|-- cmake
|   `-- FindVMwareGemFireNative.cmake
|-- main.cpp
`-- script
    |-- startserver.ps1
    |-- startserver.sh
    |-- stopserver.ps1
    `-- stopserver.sh
```
スクリプトはサンプルのものを流用した。
/usr/local/nativeclinentにGemFire Clientがインストールされていれば、makeするだけで動くはず。
世にも奇妙な物語: due to a circular import

それは突然明らかになった。

ある日，import pandas as pd をやったときに，エラーメッセージを吐いた。

```
>>> import pandas as pd
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/Users/*****/pandas.py", line 2, in <module>
    print(pandas.__version__)
          ^^^^^^^^^^^^^^^^^^
AttributeError: partially initialized module 'pandas' has no attribute '__version__' (most likely due to a circular import)
```

どうせ，pip のやり直しで片付くだろうと uninstall して install し直したりしたけど解決しない。しばらく放っておいて，「さてしもあるべからずとて」，エラーメッセージをよくよく（今更！！！）読んでみると，どうもユーザディレクトリにある pandas.py というのが原因だと言っているではないか。そもそも，そんなファイルを作った記憶がないので無視していたというかことの重大さに気づかなかったのではあるが。

で，件のディレクトリに行ってみると，確かに pandas.py というファイルが有り，その中身は

```Python
import pandas
print(pandas.__version__)
```

であった。こんなファイル作った記憶がないし，そもそも，そんなファイル作ろうと思うはずはないし。でも，ほぼ 1 か月前に作られたファイルであった。

なんかのマルウエアに感染したか？

よくわからないまま，そのファイルを削除したら，めでたく pandas を include できましたとさ。

めでたしめでたしとは言っても，一抹の不安は残る。
なんで，pandas.py ができてしまったんだろうか...
Wireshark

<!--
2023/10/16
-->

[picoCTF][Forensics][Wireshark doo dooo do doo...]
# Writeup
* pcapファイルなので、とりあえずWireshark。
`File` `Export Objects` `HTTP`でオブジェクトを確認。
ほとんど同じサイズだけど、違うのが２つある。
4bytesは違うと思うので、47bytesを確認。
![windows.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/10f74040-4343-dedb-22e4-43eb77eff852.png)
<br>

* フラグっぽい、そしてROT13っぽい。
![string.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/10dd093f-4bdf-6666-694c-eeadb2302d90.png)
<br>

* 正解でした。
![answer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/731af444-2e9a-a367-6431-eb895d619294.png)
<br>

* 以上です。
Apache Sparkとは

# Apache Spark とは
オンプレやクラウド上の大規模なデータ処理を、一括で処理できるものです。

sparkには3つの特徴があります。

- 速度
- 使いやすさ
- モジュラリティ
- 拡張性

これらを実現するために、様々なライブラリが提供されています。

## 速度

- 大規模なデータや並列処理などに対応する最適な選択ができる
- 並列処理が可能
- SQLによる最適な処理

## 使いやすさ

- シンプルで論理的なデータ構造を提供
- 慣れ親しんでいるプログラミング言語で実現することが出来る

## モジュラリティ

モジュラリティ=どれだけ多くの組み合わせが実現できるか

- どのプログラミング言語でも同じ環境で実現できる

## 拡張性

- 他サービスのデータを読み込み操作をすることが出来る
ラズパイで作るMinecraft Server

# MInecraft Sever を Rraspbian で立てる

見よう見まねかつお遊び程度でやってます。
いろいろ躓いたけど動作までできたので記録として残してます。


#### Usb boot でSSDを使っていることを前提にします(後日Raspberry pi の USB Bootに関しては記事にするつもり)

## 基本概要
- Raspberry pi 4 model B 4GB
- usb接続SSD 256GB(余ってたやつ)
- OS : Raspbian
- 同接6人程度で24時間稼働を目標


## ufw でポートのセキュリティ対策
```
$ sudo apt install ufw

$ sudo ufw deny

$ sudo ufw allo 22, 25565 

$ sudo ufw enable

// 22はSSH, 25565はMinecraftで使用するポート
// SSHに関してはポートを変えた方がセキュリティ対策的にいいと思います 
```

念のためにファイアウォールの状態を確認
```
$ sudo ufw status
Status: active

To                         Action      From
--                         ------      ----
22/tcp                     ALLOW       Anywhere
25565/tcp                  ALLOW       Anywhere
22/tcp (v6)                ALLOW       Anywhere (v6)
25565/tcp (v6)             ALLOW       Anywhere (v6)

```

## 端末側でIPの固定
LAN側のRaspberry pi 側のIPを固定

```
$ sudo vim /etc/dhcpcd.conf
 
// Example static IP configuration を参考にして固定化
// 下記は有線eth0、xは環境に合わせて設定

interface eth0
static ip_address=192.168.x.x/24
static routers=192.168.x.x
static domain_name_servers=192.168.x.x
```

( my domainと紐づける場合はグローバルIPをdomainの管理画面にてAレコードで登録 )

## ルーター側の設定
使ってるルーターによって設定方法が変わるので詳しくはググって欲しい。

私は2重ルーターで運用されていたので、WiFi側に影響しないか確認するのにめっちゃ手間取った。結論としては2層目側のルーターで設定すればOK

グローバルの動的IPに関しては諦めてつながらなくなったら再設定することにした。

サーバーの状態を遠隔で確認できるように設定もしたかったが、めんどくさくなったので設定してません。

- ポート開放
  - 25565/tcp
- ルーティング
  - 25565/tcpの通信が来たときにサーバーに通信を回す設定
- DHCPでルーターでIPを固定
  - サーバーのMACアドレスと固定したいIPをリンクさせる
  - 必ずサーバー側で固定したIPと一致させる

## 軽量Minecraft ServerのPaperMCをインストール

javaのインストール

```
$ sudo apt install openjdk-17-jdk-headless
```

念のためにバージョンを確認
```
$ java -version
openjdk version "17.0.3" 2022-04-19
```

マイクラサーバーの起動ファイルをDLする
papermc公式URL : https://papermc.io/downloads/paper
```
// この時はversion 1.20.1-196
$ wget https://api.papermc.io/v2/projects/paper/versions/1.20.1/builds/196/downloads/paper-1.20.1-196.jar
```

## Serverの起動
ダウンロードしたファイルがあるディレクトリに移動して起動する
```
$ java -Xms2560M -Xmx2560M -jar paper-1.20.1-196.jar nogui

// Xms,Xmx:メモリの割り当て量を決める。同値を入力しないと不安定になる可能性がある。
```

初回起動時にワールドファイル等がダウンロードされるが、必ずエラーがでてEULAへ許諾が求められる
```
$ vim eula.txt

# eula = false
          ↓
         true
```

## 動作確認
minecraftを起動し、マルチサーバーからサーバーに入ってみる
この時ローカル環境にいる場合IPのところはローカルにしないとエラーが出て入れないので注意

友達にサーバーを公開する場合はグローバルIPを教えてあげれば入れるようになる

## 終わりに
paperMCを起動しても重すぎたのかうまくワールド生成されず何個もワールドを作ったがうまくいかなかったのでバニラサーバーでワールド生成して無理やりワールドコピーして起動させた苦い思い出がある。

初めて公開サーバーを構築したけど、セキュリティ対策だったり、サーバーの仕組みについて勉強になってよかった。

稼働して1週間経ったがネザーからワールドに生成すると重くなるので新たに小型のN100 miniPCを買おうか検討してる始末である....

至らぬ点がたくさんあると思いますが、参考になれば幸いです。


### 参考文献

- https://zenn.dev/de_teiu_tkg/articles/1b9025d3a6db71
- https://mcpoteton.com/mcserver/pluginserver#index_id14
Android Studio: Build が通るのにエミュレーションが出来ない時の対策

## 症状
Build は通るが、エミュレーションが出来ない。
次のメッセージが出た。

```text
Error running 'app'
Cannot find runner for app
```

## 解決方法

File -> Sync Project with Gradle Files

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/93eec090-3c31-644d-e06b-e3e8206347e6.png)
Webのセキュリティ

**ファイアーウォール**：インターネットと内部ネットワークの間に設置し、送受信されるデータを監視して通信の許可、拒否を行うもの

**IDS,IPS**：ファイアーウォールで監視しきれない攻撃を防ぐもの。不正アクセスなどを検知。

**WAF**：更に、悪意のあるデータが含まれていないかチェック

**OAuth**：Webサイトを跨いだ認可を行うプロトコル
Strings

<!--
2023/10/15
-->
[picoCTF][Forensics][Glory of the Garden]

# Writeup
* 基本どおりに`File`コマンドと `Strings`コマンドを実行。
こういう優しい問題も好き。
![answer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/e52e1cad-ced8-bb6d-2f18-95a5033d9334.png)

----
追記:2023/11/08
[picoCTF][General Skills][Wave a flag]
# Writeup2
* 途中に出てきたので、文字数を調整した。
![screenshot 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/5f8e0377-ae1a-1ffe-bca9-cf1853df7247.png)

----
追記:2023/11/09
[picoCTF][Forensics][So Meta]
# Writeup3
* exiftoolで確認。
Warningが出ている。
![screenshot 12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/dc00d2b3-864c-6342-b929-f39c5da793fe.png)
<br>

* テキストデータがありそうなので、文字列を確認。
![screenshot 14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/fca8abd4-d8f6-e7bd-50a4-8051714c3c1b.png)

<br>


* 以上です。
Node.js REPLでuuid v7を生成する

https://www.npmjs.com/package/ui7

```
user@USERnoMacBook-Pro ~ % node
Welcome to Node.js v18.16.0.
Type ".help" for more information.
> const uuid = await import('ui7');
undefined
>  [...Array(10)].map(() => uuid.v7());
[
  '018b26e1-533d-71a1-bb1d-e49ba6999e88',
  '018b26e1-533e-7772-8eb0-eb6bcc3f1a54',
  '018b26e1-533e-78d5-bc56-4a7c59de5fa7',
  '018b26e1-533e-714c-8387-e900239a42be',
  '018b26e1-533e-78df-af39-67008058b143',
  '018b26e1-533e-7664-a844-0bfbe248b12b',
  '018b26e1-533e-7b4f-b93f-a28b2df49bb7',
  '018b26e1-533e-749b-8757-19d1e6df3b69',
  '018b26e1-533e-73a1-b6c6-97264a916616',
  '018b26e1-533e-7cf8-8eed-01bbe8c43d31'
]
```
BMPの修正

<!--
2023/10/14
-->
[picoCTF][Forensics][tunn3l v1s10n]

# Writeup
* 基本の`file`コマンド。
![file.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/ccf48323-7db9-8ae9-2be8-2b7fb764e1b6.png)
<br>

* とりあえずバイナリエディタで見ると、BMPっぽい。
でもエラーが出て、表示されないなぁ。
![error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/1d9007bf-50a4-ed7c-ebe0-c3207ff58c5a.png)
<br>

* 参考サイトでheader sizeの値を確認したら、¥x28か¥x0cのはず。
4バイトを`¥x28¥x00¥x00¥x00`に変更してみた。リトルエンディアン。
![tunn3l_v1s10n_28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/2f30b024-a633-fdb1-77f3-438069f43470.png)
`notaflag`とか書いてあるので、答えではないようだ。
<br>

* ちなみに4バイトを`¥x0c¥x00¥x00¥x00`に変更してみたら違うエラーになった。
`BMP image has bogus header data`
OS/2　Bitmapではないようだ。
<br>

* 横長の画像なので、とりあえず縦のサイズを横のサイズ（¥x6e¥x04¥x00¥x00）にしてみた。
![binary.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/42fd85a9-9fab-1b7c-8985-dd58cb7949d4.png)
<br>

* フラグをゲット
![answer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160736/a60e569d-32a6-4121-e9cf-f625158519c6.png)
<br>
*以上です。

# 参考サイト
https://www.setsuki.com/hsp/ext/bmp.htm
テスト104

```vb
Public Sub extract()

Dim i As Long
Dim tmp As Variant
Dim Last_Row1 As Long
Dim sh1 As Worksheet
Dim sh2 As Worksheet
Dim myRange As Range

'抽出処理...〆(･ω･ )ﾒﾓﾒﾓ

Set sh1 = ThisWorkbook.Sheets("test")
Set sh2 = ThisWorkbook.Sheets("出力結果")

sh1.UsedRange.Copy Destination:=sh2.Range("A5")

With sh2

    Last_Row1 = .Cells(Rows.Count, "A").End(xlUp).Row
    
    For i = Last_Row1 To 7 Step -1

        If WorksheetFunction.CountIf(.Range("A" & i & ":F" & i), "Null") = 0 _
        And WorksheetFunction.CountIf(.Range("A" & i & ":F" & i), "") = 0 _
        And WorksheetFunction.CountIf(.Range("A" & i), "日付") = 0 Then
        
            .Rows(i).Delete

        End If
    
    Next i
    
End With

'---------------------------

With sh2

    Last_Row1 = .Cells(Rows.Count, "A").End(xlUp).Row
    
    For i = 5 To Last_Row1
    
        If .Cells(i, "A").Value = "千葉県" _
        Or .Cells(i, "A").Value = "茨城県" Then
        
            .Range("A" & i).CurrentRegion.Borders.LineStyle = xlContinuous
            .Range("A" & i & ":F" & i).Borders.LineStyle = xlLineStyleNone
            
        End If
    
    Next i
    
    .Columns("A:H").Replace "Null", ""

    .Columns("A:F").AutoFit
    
End With


End Sub
Vitestでaxiosをモックする方法（mock, spyOn）

## はじめに

`axios`のようなHTTPリクエストを含む関数をテストする場合、テストの度にHTTPリクエストを行うと時間がかかったりサーバーに負荷がかかります。そのようなHTTPリクエストをモックすることで外部へのアクセスをすることなく、高速でテストが行えるようになります。

VitestではmockまたはspyOn関数で特定のメソッドをモックできます。mockはモジュール全体をモック、spyOnは特定のオブジェクトのメソッドをモックという違いはありますが、どちらでもモックできます。詳細を知りたい方は以下が参考になると思います。

https://qiita.com/TMDM/items/bc6940fc2ed4a67fe4ff

## モックする方法

ユーザー取得とユーザー作成をする関数です。これらで使用している`axios`をモックします。

```typescript:src/fetchers.ts
import axios from 'axios'

// ユーザーを取得する関数
export const fetchUsers = async () => {
  return axios.get('/users').then((res) => res.data)
}

// ユーザーを作成する関数
export const createUser = async (user: { name: string }) => {
  return axios.post('/users', user).then((res) => res.data)
}
```

### mockを使用した場合

`vi.mock('axios')`でaxiosをモックします。`axios.get()`は非同期関数のため`mockResolvedValue`で返り値を指定します。

```typescript:src/mock.test.ts
import { it, vi, expect, beforeEach } from 'vitest'
import type { Mocked } from 'vitest'
import axios from 'axios'
import type { AxiosStatic } from 'axios'

import { fetchUsers, createUser } from './fetchers'

// axiosをモック
vi.mock('axios')

beforeEach(() => {
  // モックをリセット
  vi.resetAllMocks()
})

it('ユーザー取得のモック', async () => {
  const mockData = [
    { id: 1, name: 'tarosuke' },
    { id: 2, name: 'momo' },
  ]

  const mockedAxios = axios as Mocked<AxiosStatic>

  // axiosのgetの返り値を指定
  mockedAxios.get.mockResolvedValue({ data: mockData })

  const users = await fetchUsers()

  // 実行の引数を検証
  expect(axios.get).toBeCalledWith('/users')

  // 取得した値が同じか検証
  expect(users).toEqual(mockData)
})

it('ユーザー作成のモック', async () => {
  const mockData = { name: 'pac' }

  const mockedAxios = axios as Mocked<AxiosStatic>

  // axiosのpostの返り値を指定
  mockedAxios.post.mockResolvedValue({ data: mockData })

  const user = await createUser(mockData)

  // 実行の引数を検証
  expect(axios.post).toBeCalledWith('/users', mockData)

  // 取得した値が同じか検証
  expect(user).toEqual(mockData)
})
```

## spyOnを使用した場合

` vi.spyOn(axios, 'get')`でaxiosのgetをモックします。`axios.get()`は非同期関数のため、こちらも同じく`mockResolvedValue`で返り値を指定します。

```typescript:src/spyOn.test.ts
import { it, vi, expect, beforeEach } from 'vitest'
import axios from 'axios'

import { fetchUsers, createUser } from './fetchers'

beforeEach(() => {
  // モックをリセット
  vi.resetAllMocks()
})

it('ユーザー取得のモック', async () => {
  const mockData = [
    { id: 1, name: 'tarosuke' },
    { id: 2, name: 'momo' },
  ]

  // axiosのgetの返り値を指定
  vi.spyOn(axios, 'get').mockResolvedValue({ data: mockData })

  const users = await fetchUsers()

  // 実行の引数を検証
  expect(axios.get).toBeCalledWith('/users')

  // 取得した値が同じか検証
  expect(users).toEqual(mockData)
})

it('ユーザー作成のモック', async () => {
  const mockData = { name: 'pac' }

  // axiosのpostの返り値を指定
  vi.spyOn(axios, 'post').mockResolvedValue({ data: mockData })

  const user = await createUser(mockData)

  // 実行の引数を検証
  expect(axios.post).toBeCalledWith('/users', mockData)

  // 取得した値が同じか検証
  expect(user).toEqual(mockData)
})
```

## まとめ

Vitestでaxiosをモックする方法をご紹介しました。mockとspyOnのどちらでもモックできますが、個人的にはspyOnの方がコード量が少なく済むため好みです。


## 最後に

### GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。

https://goqsystem.recruit.site?qiita=a99f75ce29098a59df60