OmniAICreator/Qiita-1.07M huggingface dataset:
そもそもUbuntuで日本語入力できるようになるにはどうしたらいいの？

------------------------------------------------------------
【利用しているマシン】
IdentifyingNumber : XXXXXXXX
Name              : VJPB11
Vendor            : VAIO Corporation
※windowsOSが入っている段階で、PowerShellで取得

そのときのコードは
```
Get-WmiObject Win32_ComputerSystemProduct
```

------------------------------------------------------------
【まずはMozcのインストール】
【以下は友人に聞いた方法で何を意味しているのかよく分かっていません。】
1.ターミナルを開く(Ctrl + Alt + T)
2.以下のコードを入力
```
# sudo apt install fcitx-mozc'
```
3.その後、左下の□が九つ並んでいるところを押して「fcitx configuration」開く(fctix設定となっている機器もある)
4.入力メソッドで、左下の「+」をクリックしてMozcを加える

------------------------------------------------------------
【実際の入力時の日本語入力モードへの切り替え】
・画面右上の「Ja」ってマークをクリックして「Mozc」にしてやれば良かった。
→→→→windowsマシンだと、「Win + Shift + スペース」で入力モードの切り替えのショートカットとなるようだ。

以上が私のいきなりつまづいた、箇所です。
Ubuntu20.04/22.04にNVIDIAドライバとCUDAをインストールする

# この記事のポイント

1. nvidiaドライバをGUIで入れようとする
1. CUDAインストールオプションを気にする

# nvidiaドライバのインストール

Ubuntuデスクトップの左下「アプリケーション一覧」から「追加のドライバ」を開く

少し時間がかかって無事にグラボが認識されてたらnvidiaドライバを選択できる．\
(候補が見えてるのに灰色で選択できない場合はNouveauの無効化が必要なのかも？)

特にこだわりなければ，一番新しそうなバージョンのドライバを選択する．
suffixは無印が良いかと(つまり-serverや-oepnではないやつ)

適用をクリック→再起動をクリック

コンソールで
```bash
nvidia-smi
```
が叩ければOK

# CUDAのインストール

## やりかた
https://developer.nvidia.com/cuda-downloads

このサイトから自分の環境を選択していく(普通のPCならArchitectureは`x86_64`, Installer Typeは`deb(network)`を選択)．
そして
>Base Installer

に書かれているコマンドを実行していくのだが…

## ポイント
下側にこんな表示が…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481835/998aad66-20c8-df5a-f412-5753275472f2.png)

この文を読んで`here`をクリックした人は情報収集が上手！できなかった人はもう少し慎重になりましょう．

https://docs.nvidia.com/cuda/cuda-installation-guide-linux/#meta-packages

自分が参考にした記事では`sudo apt install cuda-<version>`とするのが多いが，
上記リンクを読むと，実はすでにドライバを入れている場合は
``` bash
sudo apt install cuda-toolkit-<version>-<minor version>
```
で良いことがわかる．

>(注記)
何もドライバを上書きしてもいいのだが，後に`apt update && apt upgrade`したときにnvidiaドライバが勝手に変わり，cudaが宙ぶらりんになる(apt autoremove出来るみたいなメッセージが出る)事案があったので，このインストール方法をお勧めしたい．

バージョンに関しては，特に理由が無ければminor versionまで指定して固定するのが安定と感じた．
バージョンの上限は`nvidia-smi`で右上に表示されるCUDAバージョン，
下限は`apt install`の候補で出てくるもの(`apt install cuda-toolkit-` でタブ二回押して出る奴)．

## Post Installation

~/.bashrcの末尾に以下を追加する．

``` bash
export PATH="/usr/local/cuda/bin:$PATH"
export LD_LIBRARY_PATH="/usr/local/cuda/lib64:$LD_LIBRARY_PATH"
```
[公式](https://docs.nvidia.com/cuda/cuda-installation-guide-linux/#environment-setup)を覗くと，`cuda-<version>-<minor version>`を指定しているが，cuda->cuda-\<version>-\<minor version>のシンボリックリンクが生成されているので上記ができる
（ということは複数のCUDAバージョンをインストールしておいて切り替えられるのかしら？）

## 確認

ターミナルを起動し直すか`source ~/.bashrc`した後
```bash
nvcc -V
```
でバージョン確認できればOK.

# 参考

https://qiita.com/porizou1/items/74d8264d6381ee2941bd

https://qiita.com/tf63/items/0c6da72fe749319423b4

https://zenn.dev/efficientyk/articles/6bc0f203552d98
Rustdoc の CSS ことはじめ

:::note info
本記事は [Rust Advent Calendar 2023 シリーズ 2](https://qiita.com/advent-calendar/2023/rust#:~:text=%40awrznc-,Rustdoc%20%E3%81%AE%20CSS%20%E3%81%93%E3%81%A8%E3%81%AF%E3%81%98%E3%82%81) の5日目の記事です。
:::

本記事では、Rustdoc の見栄えを調整するCSSをカスタマイズするためのオプションと簡単な作成例を解説します。

## オプションの種類について

2023年12月現在、CSSをカスタマイズするオプションは以下の3つがあります[^1]。

[^1]: https://doc.rust-lang.org/rustdoc/command-line-arguments.html

Option | Desc
--- | ---
`--theme` | 渡した CSS の内容を `Theme` として追加する。
`--extend-css` |  渡した CSS の内容を `theme.css` の末尾に追加する。
`--markdown-css` | 渡した CSS の内容を適用するための `link` 要素を追加する。

Rustdocには、Theme と呼ばれるCSSで記述された配色パターンが用意されており、オプションを利用することで、追加及びその一部を上書きすることができます。

:::note
ちなみに標準ライブラリの Rustdoc に採用されている Theme は以下から確認・変更できます。
https://doc.rust-lang.org/settings.html
:::

Theme はドキュメント右上の歯車アイコン及び設定画面から確認・変更することができます。
システムの設定がライトモードの場合は `light theme` 、ダークモードの場合は `dark theme` を自動的に適用してくれる設定もありますので、色関連の変更は既存のテーマに依存しない `--theme` 及び、デフォルトのテーマを指定することができる `--default-theme` を利用するのがおすすめです。

とはいえ、いきなり Theme の内容を全て網羅するのは大変だと思いますので、まずはお手軽な `--extend-css` で試してみるのがいいかもしれません。


## オプションの利用と適用の例

今回は `--extend-css` を利用してCSSをカスタマイズしてみましょう。
まずは Cargo を利用して Rust のプロジェクトを作成します。

```bash
cargo new --lib rustdoc_css
```

`src/lib.rs` はどのような内容でも問題ありませんが、今回はわかりやすく以下のようにしておきます。

```rs
/// hello モジュールです。
pub mod hello {
    /// world 関数です。
    pub fn world() {
        println!("Hello, World!");
    }
}
```

一旦この状態でコマンドラインからドキュメントを生成してみましょう。

```bash
# cargo rustdoc の場合
cargo rustdoc

# cargo doc の場合
cargo doc
```

現在のCSSはまだデフォルトであるため、ドキュメントの出力結果は以下のようになるはずです。

![before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425840/4443a777-abbe-daa9-e948-ae842136a644.png)

ではここから CSS を用意して、一部の文字の色を変更してみましょう。
文字の色の変更方法は色々あると思いますが、今回は `:root` を上書いていこうと思います。

```extend.css
:root {
    --link-color: aquamarine;
    --mod-link-color: aquamarine;
    --sidebar-link-color: aquamarine;
}
```

CSSが用意できたら、コマンドラインからオプションを利用して、適用してみましょう。

```bash
# cargo rustdoc の場合
cargo rustdoc -- --extend-css ./extend.css

# cargo doc の場合
RUSTDOCFLAGS="--extend-css share/docs/extend.css" cargo doc
```

うまくいけば以下のような出力になるはずです。

![after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425840/fc9b7614-9139-f3dc-5bed-98beba1c49d0.png)

このように、ファイルを用意してオプションで指定するだけで、非常に手軽に CSS を適用することができます。
今回の例は文字の色の変更でしたが、普通のHTMLと同じく背景色を変更したり、オブジェクトに好みの `margin` を適用したり、なんてことも可能です。

![content.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425840/d267d95c-ff50-b3cc-b539-f970b278fd4d.png)

色々カスタマイズして自分好みのドキュメントを作成してみるのも面白いかもしれません。

～ おしまい ～
図表で把握する - 行レベルのセキュリティ (RLS)

行レベルのセキュリティ（RLS）が機能する範囲を表形式で整理しました。

![図表で把握(RLS)_20231204-01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626635/496b423e-1678-f003-0903-b8b29bb9c6d8.jpeg "図表で把握(RLS)")

::: note info
Power BI作成の流れ（下図）の赤枠部分に対応しています。
![Power BI作成の流れ_20231113-01(RLS).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626635/6a228bc3-9a88-8bde-52d9-05d25adfc874.jpeg "Power BI作成の流れ(RLS)")
:::

https://qiita.com/NoriyukiT/items/5fb5e1c259c10900736d

# 参考情報

https://learn.microsoft.com/ja-jp/power-bi/enterprise/service-admin-rls
パーマリンクを日本語にすると...

## はじめに
URLに日本語が入ったページありますよね。私はあまり好きではありません。そこで本日は、パーマリンクに日本語を使用するメリットとデメリットをまとめました。ぜひサイト設計の参考にしてください。

 【この記事の目的】
 - パーマリンクに日本語を使用することで起こることを知る
 - 英語か日本語にするかの判断材料にする
 
 【この記事の対象読者】
- パーマリンクを設定するときに迷っている方
- URLに日本語が含まれていることに疑問を持った方

### 目次
- [メリット](#メリット)
- [デメリット](#デメリット)
- [SEO的には問題ない](#seo的には問題ない)
- [さいごに](#さいごに)

## メリット 

### 記事の内容が分かりやすい
パーマリンクが日本語であると、視認性が高くなりユーザーがURLを見ただけでページの内容を予測しやすくなります。日本語を使用しない場合は、英単語や複数の単語をつなげた形になるので、すぐ理解できない場合もあります。


## デメリット
### エンコーディングされたとき長くなる
日本語を含んだURLを張り付けるとき、そのまま表示できない場合があります。そのときは、パーセントエンコーディングが必要になり、読めないかつ長いURLに変換されてしまいます。
`https://〇〇〇〇〇.com/%E3%83%91%E3%83%BC%E3%83%9E%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AB%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%85%A5%E3%82%8C%E3%82%8B%E3%81%AE%E3%83%80%E3%83%A1`

長いURLは、不審なURLと思われたり、文字数制限でリンクが張れなかったりと、嫌われる原因になるのでお勧めしません。


### リンクエラーが起こる
場合によってはURLが認識されないことがあります。
* リンクとして機能しなくなる
* 日本語が含まれる直前までがリンクになる

こうなってしまうとシェアするときや被リンクを受けたときでもアクセスできなくなってしまうので非常にもったいないです。

## SEO的には問題ない
URLの文字列がSEOに多少の影響がありますが、日本語の場合でも有効です。英語以外の他の言語でも評価の対象となので、URLとして機能していれば問題ないです。

## さいごに
URLに日本語を含める意義をしっかり理解して、適切な設定をしましょう。最終的には、サイト設計者の判断にはなりますが、後から変更するのは大変なので初期段階で決めておきましょう。
Svelteの画像最適化ライブラリが公式からリリースされたので使ってみる！

# はじめに
Svelteの画像最適化ライブラリがSvelte公式から2023年11月にリリースされました！
現時点ではexperimentalですが、Svelte/SvelteKitを使ってWebサイトを作る上でとても便利なので使ってみたいと思います。

# インストール
動作条件としては、Viteを使っていればSvelteKit以外でも動作するようです。

```shell
npm install --save-dev @sveltejs/enhanced-img
```

```diff_javascript:vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
+ import { enhancedImages } from '@sveltejs/enhanced-img';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
+		enhancedImages(),
		sveltekit()
	]
});
```

# 使い方
通常の`<img>`タグを使用する代わりに`<enhanced:img>`タグを使用します。

```svelte
<enhanced:img src="./path/to/your/image.jpg" alt="An alt text" />
```

ビルド時に`<enhanced:img>`タグは、複数の画像タイプとサイズを提供する`<picture>`でラップされた`<img>`に置き換えられますので高画質な画像を用意する必要があります。

以下のように変換されます。
```html
<picture>
  <source srcset="/_app/immutable/assets/sveltejapan.57eed46e.avif 1x, /_app/immutable/assets/sveltejapan.c6b2fccb.avif 2x" type="image/avif">
  <source srcset="/_app/immutable/assets/sveltejapan.7ec56f0d.webp 1x, /_app/immutable/assets/sveltejapan.b0bb76f5.webp 2x" type="image/webp">
  <source srcset="/_app/immutable/assets/sveltejapan.b4e6b5a6.jpg 1x, /_app/immutable/assets/sveltejapan.32070fb0.jpg 2x" type="image/jpeg">
  <img src="/_app/immutable/assets/sveltejapan.32070fb0.jpg" alt="Some alt text" width="512" height="512">
</picture>
```

ビルドした中身を見てみるとそれぞれの画像タイプとサイズが生成されていることがわかります。

![スクリーンショット 2023-12-04 23.51.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217487/7a9c62f0-d389-1dbd-0bfe-cad50cff0763.png)

その他、詳しい使い方はドキュメントを確認してください。

https://kit.svelte.dev/docs/images#sveltejs-enhanced-img

# さいごに
これからも`@sveltejs/enhanced-img`の改良を続け、CDNサポートなどの機能を追加していく予定みたいです。
実際のアプリケーションではCMSからアップロードされた画像等もあると思うので今後のアップデートに期待ですね！

https://github.com/sveltejs/kit/pull/10323
カレンダーのメモをLINEで教えてくれる  #IFTTT

## GoogleCalendarをメモ代わりにする人
私です。
リマインダー、To Doリスト等は短期間でやることを書くと思うのですが、あの時期にあれやろうかな、といったことをよくカレンダーにメモしています。
メモしている割にはあまりカレンダーを確認しないので、3~6ヶ月後のなんとなくやりたいことを普通に忘れます。ということで、LINEでリマインドしてくれるようにしました。

## 使い方
なんとなくこの時期に確認したい予定を入れます。

![img3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565590/58f9008f-9cfe-4cd6-4f64-61ef395832d9.png)

LINEで通知してくれます。
![img4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565590/b06c4f15-4c47-b40c-e6ec-3a76ce8d64f7.jpeg)


## 作り方
[IFTTT](https://ifttt.com/)にアクセスする。 以下のようにアプレットを作成します。

![img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565590/726df8b5-e8ee-5301-48f3-9998593ea49e.png)

カレンダーの予定で「✎」を含むイベントが始まる4時間前にLINEで通知してくれます。
![img2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565590/ce04f6c5-fd80-b15a-1029-12819cceaf57.png)


## さいごに
かつて実験機器の予約をgoogle calendarで管理していたことがあり、誰かがカレンダーに予約を追加したらLINEに通知飛ばせたら良かったと思いました。(実験機器は奪い合いだったので)
あと、IFTTT便利ですね(接続で何度か挫折しかけましたが)。。。他の使い道を考えてみているところです。
Amazon S3 Express One Zoneを批判的に見る

# はじめに
先週辺りにAWS re:Invent 2023でs3の新しいストレージクラス「Amazon S3 Express One Zone」が発表された。これがどういうユースケースに刺さるか中々思いつかなったので、タイトルの通り、斜に構えてサービスを見て行く。

https://aws.amazon.com/s3/storage-classes/express-one-zone/

## Key Take Aways
- 従来のs3よりI/Oが10倍早い
- 読み取り/書き込み料金は半額、なお保存単価は7倍
- 設計上の可用性は99.95%、公式的には99.9%の可用性SLAをアピールしてる
- 基本、AZ落ちたら詰み


# 従来のs3よりI/Oが10倍早い
新規に出来たディレクトリバケットを採用（s3は汎用バケット）。バケットパターンが違うため、今のs3から移行するには```s3 batch operation```を使う必要がある。

**汎用バケット（General Purpose Buckets）**

> 目的: 汎用バケットは、さまざまな種類のデータを保存するために使用されます。これには文書、画像、動画、ログファイルなどが含まれることがあります。
> 特徴: 柔軟性が高く、多様なデータタイプと互換性があります。一般に、パフォーマンスやアクセス頻度に基づいて最適化されているわけではありません。
> 用途: 汎用バケットは、特定の用途に限定されない幅広い用途に使用されます。日常的なデータストレージやバックアップ、アーカイブなどに適しています。

**ディレクトリバケット（Directory Buckets）**

> 目的: ディレクトリバケットは、ファイルシステムのように階層的なデータ構造を持つデータを整理して保存するために使用されます。
> 特徴: ファイルやフォルダを階層的に整理する機能を提供し、ファイルシステムのような操作が可能です。これにより、ファイルの検索や管理が容易になります。
> 用途: 主に、多数のファイルを効率的に管理する必要がある場合に使用されます。例えば、ウェブサイトのコンテンツ管理や大量のドキュメントの整理に適しています。


新しいバケットタイプに加えて、今までazに分散して書いてたのを単一az内で分散するようにする為（従来は3az）、リモートのazへの書き込み、読み込みが完了するまでのレイテンシが減るというのがI/Oが10倍早くなるカラクリ。当然az落ちたらすべてのデータにアクセスできなくなるのでそこは妥協できるとこで使いましょうというストレージクラスになる。


# 比較表
とても参考になる表があったので引用

https://tech-blog.cloud-config.jp/2023-11-29-describe-aws-s3-express-one-zone


| S3 サービスの比較項目 | S3 Standard | S3 Express One Zone |
|---|---|---|
| ユースケース | 標準にアクセスされる利用用途 | 頻度にアクセスされる高速なストレージ |
| レイテンシー | ミリ秒 | 1桁台のミリ秒 |
| AZ | 複数3 | 1 |
| 耐久性 | 99.999999999% (11 nines) | 99.95% |
| 可用性 | 99.99% | 99.95% |
| 可用性SLA | 99.9% | 99.9% |
| 東京リージョンでの保存費用 | 1GB あたり $0.025 | 1GB あたり $0.18 |
| 東京リージョンでの読み取り費用 | 1K Request あたり $0.00037 | 1K Request あたり $0.00019 |
| 対応リージョン | 全世界リージョン | パースリージョン対象、バージニア、オレゴン、東京、ストックホルム |

# ユースケース
やはり、気になるのは7倍近く高くなった価格。仮に1TBのデータを1ヶ月保存するとしたら、通常のs3で3,840円掛かるところが27,648円になってしまう（150円/USD）。

Express One Zoneを使う期間を1/7にしてあげればトントンだが、公式が想定するようなAIや機械学習のトレーニングデータが1TBで済むとは考えづらく、そんな大きなデータを節約の為に頻繁に動かすのも考え物だろう。

これまでに挙げた事を踏まえると
- 頻繁にアクセスする（レイテンシを活かす）
- データ量が極端に大きくならない（料金が高くなる）
- 最悪データが吹っ飛んでも良い（可用性が低いため）
- ファイルを扱う（文字列で済むならDBで良い）

これらに該当するユースケースを考えなければならない。結構限定的な感じがする（お金をケチる前提）

個人的には
- ウェブサイトやアプリケーションでの動画や画像ファイルの高速配信
- リアルタイムデータ処理やキャッシュとして使用

で短い期間で破棄するようなキャッシュ運用が妥当な気がした。
【Zod】ファイルサイズのバリデーション

以下のようにすることでファイルサイズのバリデーションを設定できます。

```js
const schema = z.object({
  avatar: z
    .any()
    .refine(
      (files) => files?.[0]?.size <= 3 * 1024 * 1024,
      '3MB以下のファイルを選択してください。'
    ),
})
```
PATHの通し方

## PATH
PATHとは、オペレーティングシステム(OS)がプログラムやコマンドを探すために参照するディレクトリのリストです。環境変数の一つであり、システムがコマンドを実行する際に、このリストに含まれるディレクトリを検索して、ユーザーが入力したコマンドに対応する実行ファイルを見つけます。

## PATHを通すとは？
「PATHを通す」というのは、このPATH環境変数にディレクトリのパスを追加することを意味します。これにより、そのディレクトリにあるプログラムを、フルパスを指定せずに実行できるようになります。例えば、/usr/local/binディレクトリにあるプログラムを実行するためには、通常そのフルパスを入力する必要がありますが、PATHに追加することで、どのディレクトリからでもプログラム名だけで実行可能になります。

## PATHを確認する
ターミナルで現在のPATHを確認するには、以下のコマンドを入力します。
```terminal
$ echo $PATH
```

## PATHにディレクトリを追加する
新しいディレクトリをPATHに追加するには、以下のようにexportコマンドを使用します。
```terminal
$ export PATH=$PATH:/新しいディレクトリのパス
```

## PATHの設定を永続化する
変更したPATHを永続化するためには、シェルの設定ファイル(例えば.zprofileや.zshrc)に上記のexportコマンドを追記します。
```terminal
$ echo 'export PATH=$PATH:/新しいディレクトリのパス' >> ~/.zprofile
```
そして、設定を有効にするためには、以下のコマンドで設定ファイルを再読み込みします。
```terminal
$ source ~/.zprofile
```
Reactアプリ100本ノックやってみた 「04 Timer」

# はじめに
フロントエンドに苦手意識のある私が、@Sicut_studyさんの【Reactアプリ100本ノック】をやってみました。
変なところがあれば教えていただきたいです。



今回の課題

https://qiita.com/Sicut_study/items/1e4d8ec06f1af42a47e5

# やってみる
```App.tsx
/* eslint-disable @typescript-eslint/no-unused-expressions */
import { useEffect, useState } from "react";

const App = () => {
  const [input_min, setInputMin] = useState(0); // 入力分
  const [input_sec, setInputSec] = useState(0); // 入力秒
  const [button_cha, setInputCha] = useState("開始"); // ボタン文字
  const [countTime, setCountTime] = useState<number>(0); // カウント時間
  const [countFlg, setCountFlg] = useState(false); // カウントダウンしている

  // 通常ボタン
  const buttonClick = (status: string): void => {
    if (status === "開始") {
      if (input_min > 59 || input_sec > 59) {
        alert("不正な数値です");
      } else {
        setCountFlg(true);
        setInputCha("一時停止");
        setCountTime(input_min * 60 + input_sec - 1);
      }
    } else if (status === "一時停止") {
      setInputCha("再開");
    } else if (status === "再開") {
      setInputCha("一時停止");
      setCountTime(countTime - 1);
    }
  };

  // リセットボタン
  const buttonClickRe = () => {
    setCountTime(input_min * 60 + input_sec);
    setInputCha("開始");
    setCountFlg(false);
  };

  useEffect(() => {
    const countDownInterval = setInterval(() => {
      if (countTime === 0) {
        // 画面初期表示の際に起動しないようにするため
        if (!(input_min === 0 && input_sec === 0)) {
          clearInterval(countDownInterval);
          alert("終了しました");
          setCountFlg(false);
          setInputCha("開始");
        }
      }
      if (
        countTime &&
        countTime > 0 &&
        button_cha !== "開始" &&
        button_cha !== "再開"
      ) {
        setCountTime(countTime - 1);
      }
    }, 1000);
    return () => {
      clearInterval(countDownInterval);
    };
  }, [countTime]);

  return (
    <div>
      <input
        type="number"
        min="0"
        max="59"
        value={input_min}
        disabled={countFlg}
        onChange={(e) => setInputMin(Number(e.target.value))}
      />
      分
      <input
        type="number"
        min="0"
        max="59"
        value={input_sec}
        disabled={countFlg}
        onChange={(e) => setInputSec(Number(e.target.value))}
      />
      秒
      <button
        onClick={() => {
          buttonClick(button_cha);
        }}
      >
        {button_cha}
      </button>
      {countFlg && (
        <button
          onClick={() => {
            buttonClickRe();
          }}
        >
          リセット
        </button>
      )}
      <p>{countTime}</p>
    </div>
  );
};

export default App;
```



# 完成
![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3621123/bd273a11-1b9c-7cdc-c541-3cc722207590.gif)







# おわりに
10分を入力すると600秒で表示されるなど、いまいちなところはありますが完了とします。早く問題側に追いつきたいです。
マナビDXQuestで学んだこと(技術、メンタル)

# マナビDXQuestについて
マナビDXQuestとは、DXの実現に向け、ビジネスの現場における課題解決の実践を通じた 能力を磨く目的で経済産業省が実施しているプログラムです。
(参照URL：https://dxq.manabi-dx.ipa.go.jp/)

元々はAI実装やDXに関するスキルアップのために昨年参加する予定だったのですが、油断していたところ募集期間を過ぎてしまっていたため晴れて今年参加することが出来ました。
(軽く自己紹介をしておくと、中小のSIerでシステム開発のPLやら社内SEやら色々とやっている社会人4年目です)

実際に参加した中で得たことを技術面とメンタル面(とそれ以外で気が付いたこと)に分けて書いていきたいと思います。
# 参加して学んだこと(技術面)
## ①機械学習のやり方について
具体的なAIの実装方法については触りだけですが学べたのかなと思っています。
元々の参加目的の一番大きかったところとして、「AIって結局どうやって構築&実装するんだろうか」ということを学びたいということがあったため、後述するAWSのサービスも含めて「こんな風にしたら実装出来そう」というイメージがソースコードレベルでもシステム構成のレベルでも大まかに掴めたのは非常に良かったと感じました。

一方でAIの精度向上などはボロボロであったため、この範囲は今後勉強してコンペ等にも今後挑戦出来たら良いなと考えています。

## ②AWSの試算方法、構成方法について
元々自分で構成ごと試算する方法は知っていたものの、約3年ぶりに利用してみると用途やケースごとに分かれ非常に分かりやすくなっていると感じました。
加えて、とりあえずEC2を立てて...というわけではなく、用途ごとに専用のサービスが増えていて非常に安価にAI実装などが可能になるという点も大きな発見でした。

https://aws.amazon.com/jp/cdp/

また、実際の企業の導入事例なども記載されているため、現実に近いシステム構成の検討、提案が簡単に出来るというところも発見でした。

https://aws.amazon.com/jp/solutions/case-studies/?customer-references-cards.sort-by=item.additionalFields.sortDate&customer-references-cards.sort-order=desc&awsf.customer-references-location=*all&awsf.customer-references-segment=*all&awsf.customer-references-industry=*all&awsf.customer-references-use-case=*all&awsf.customer-references-tech-category=*all


## ③MySQLの使いかた
実用的な(？)データベースの使いかたを主に学びました。
SQL文自体は2年以上前に少しだけ書いていたのと、データベース系の試験を受験している関係で基本的な構文は書けるものの、それを実際に書く機会がなかったため、今回学習も兼ねて使ってみることにしました(特に使っても良いことは無く、使えなくても十二分にマナビDXQuestは楽しめます)

その中で、座学だと殆ど学ばない実データのインポートやエクスポート、イメージの掴みにくいviewなどに対する解像度が非常に上がったと感じました。
また、「データは正規化されているもの」という固定概念に囚われていたので、データベース的にはあり得ないデータに直面した際の対応能力なども上がったと考えています。

# 参加して学んだこと(メンタル面)
## ①参加者の多様さ
受講生の参加人数が2,000人弱いるため、普段の業務では絶対に接点が出来ないであろう業界、職種の方や、個人的に将来取りたいなと思っている資格を持たれている方などが沢山参加されているため、その方々の投稿を見ているだけでも非常に勉強になります。
特に全く業界が違う方とお話しすると自分のドメイン知識の無さを実感するので、見聞が広がったという感覚は非常に大きかったです。

## ②モチベーション・バイタリティの高さ
非常に活動的な方や、マナビDXQuestの期間内に様々な資格に挑戦されている方が多いため、「周りの人に触発されて自分も色々なことに挑戦する」という経験を久々に出来たと感じました。
周りを見ても「社会人で資格手当も無い中で資格や勉強に時間を割くのは変わり者」という風潮が一定数あるように感じてはいますが、スキルアップののために凄く勉強されるという方や、様々な活動に精を出している方が沢山いらっしゃるため、自身のモチベーションの維持においていかに環境が大切なのかを学ぶことが出来ました。
(とりあえず統計検定2級をこれから頑張ります)

## ③仮説を立てて実行することの大切さ
マナビDXQuest内では課題が提示されるのですが、私は課題に対して手当たり次第に出来ることをやってしまい、結果成績としては並以下の状況になってしまいました...
一方で、成績優秀者のお話を聞くと偶然上手くいったケースよりも仮説検証を非常に丁寧に行われているケースが大半であり、そこが細かいテクニックや整合性に拘泥していた自分との大きな差だったということが定量的な成績という目に見える形で現れるので非常に勉強になりました。
正直中々学んだものの実践するのが難しいとは感じていいますが、この気持ちを忘れずにこれからの仕事などにも取り組みたいと考えています。

## ④諦めない心
個人的にはメンタル面で一番大きく学んだ内容だと考えています。
私はサボり癖があるため、このアドベントカレンダー含め色々なものがギリギリになることが多いのですが、振り返るとマナビDXQuestだけでも結果クオリティに拘らなくなってしまい本末転倒なケースも多々あったと感じています。
翻って同じ状況でも成果が出る方は常に最善を尽くすよう努力している印象があり、僅かな要素の一つでしかないと思いますが大切なことだと強く感じました。


# 今後について
こんな感じで色々なことを学べるマナビDXQuestですが、あと約3か月間あるのでより頑張りたいなという思いと、是非来年も(出来れば知り合いも誘って)参加したいなという思いで溢れています。
来年はもっと力を入れて取り組めるよう、今から準備を進めていきたいと思います。
SpringBootと戦う(編集中)

# はじめに
SpringBootの学習を始めましたが、
理解がかなり難しい。Javaの知識だけでは読み解きが難しい。
いろいろな簡易アプリを作りましたが難しい。

わからないがわからないの連鎖。
これはまずいと思ったので、基本に立ち返って用語を噛み砕くところから本記事で始める。

自身のスキルとしては
Javaは1か月～2か月ほど学習し、超基礎の内容ならわかるくらい。

ちょっとここの認識ちがうんじゃない？っていうのがあれば
ぜひコメントで教えてもらえると勉強になるのでうれしいです。

# SpringBootを始めてよく見かけた用語

### API
### REST API
### Bean
### DI
### アノテーション
### Lombok
### Thymeleaf
### CRUD
### エンドポイント
### ハンドラ
### toString()メソッド
### equals()メソッド
### hashcode()メソッド

編集中
k8s: Dynatrace Operator YAMLをyqで一括名前変更

前回 Dynatrace Operator YAML マニフェストファイルを分割しました。以下のようなファイル群がある状態です。

```terminal
$  ls
Operator140_00  Operator140_04  Operator140_08  Operator140_12  Operator140_16  Operator140_20
Operator140_01  Operator140_05  Operator140_09  Operator140_13  Operator140_17  Operator140_21
Operator140_02  Operator140_06  Operator140_10  Operator140_14  Operator140_18  Operator140_22
Operator140_03  Operator140_07  Operator140_11  Operator140_15  Operator140_19  Operator140_23
```

このファイル名を意味あるものに変えようと思います。ファイルの内容中に意味のある文字列があるのでそれらを`yq`コマンドで抜き出してみます。

https://mikefarah.gitbook.io/yq/

```terminal
$ yq .kind Operator140_07
CustomResourceDefinition
$ yq .metadata.name Operator140_07
dynakubes.dynatrace.com
$ yq '.kind += "_"|.kind += .metadata.name|.kind' Operator140_07
CustomResourceDefinition_dynakubes.dynatrace.com
```

ユニークな文字列として使えそうですね。一括名前変換して`ls`で一覧してみました。

```terminal
$ for i in *; do  mv $i $(yq '.kind += "_"|.kind += .metadata.name|.kind' $i).yaml; done
$ ls -l
total 324
-rwxrwxrwx 1 kinoue kinoue    577 Dec  4 00:06 ClusterRoleBinding_dynatrace-kubernetes-monitoring.yaml
-rwxrwxrwx 1 kinoue kinoue    510 Dec  4 00:06 ClusterRoleBinding_dynatrace-operator.yaml
-rwxrwxrwx 1 kinoue kinoue    504 Dec  4 00:06 ClusterRoleBinding_dynatrace-webhook.yaml
-rwxrwxrwx 1 kinoue kinoue   1896 Dec  4 00:06 ClusterRole_dynatrace-kubernetes-monitoring.yaml
-rwxrwxrwx 1 kinoue kinoue   2129 Dec  4 00:06 ClusterRole_dynatrace-operator.yaml
-rwxrwxrwx 1 kinoue kinoue   1896 Dec  4 00:06 ClusterRole_dynatrace-webhook.yaml
-rwxrwxrwx 1 kinoue kinoue 217416 Dec  4 00:06 CustomResourceDefinition_dynakubes.dynatrace.com.yaml
-rwxrwxrwx 1 kinoue kinoue  33502 Dec  4 00:06 CustomResourceDefinition_edgeconnects.dynatrace.com.yaml
-rwxrwxrwx 1 kinoue kinoue   3872 Dec  4 00:06 Deployment_dynatrace-operator.yaml
-rwxrwxrwx 1 kinoue kinoue   4711 Dec  4 00:06 Deployment_dynatrace-webhook.yaml
-rwxrwxrwx 1 kinoue kinoue   1992 Dec  4 00:06 MutatingWebhookConfiguration_dynatrace-webhook.yaml
-rwxrwxrwx 1 kinoue kinoue    332 Dec  4 00:06 PodDisruptionBudget_dynatrace-webhook.yaml
-rwxrwxrwx 1 kinoue kinoue    487 Dec  4 00:06 RoleBinding_dynatrace-operator.yaml
-rwxrwxrwx 1 kinoue kinoue    506 Dec  4 00:06 RoleBinding_dynatrace-webhook.yaml
-rwxrwxrwx 1 kinoue kinoue   3076 Dec  4 00:06 Role_dynatrace-operator.yaml
-rwxrwxrwx 1 kinoue kinoue   1624 Dec  4 00:06 Role_dynatrace-webhook.yaml
-rwxrwxrwx 1 kinoue kinoue    905 Dec  4 00:06 ServiceAccount_dynatrace-activegate.yaml
-rwxrwxrwx 1 kinoue kinoue    942 Dec  4 00:06 ServiceAccount_dynatrace-dynakube-oneagent.yaml
-rwxrwxrwx 1 kinoue kinoue    904 Dec  4 00:06 ServiceAccount_dynatrace-edgeconnect.yaml
-rwxrwxrwx 1 kinoue kinoue    938 Dec  4 00:06 ServiceAccount_dynatrace-kubernetes-monitoring.yaml
-rwxrwxrwx 1 kinoue kinoue    897 Dec  4 00:06 ServiceAccount_dynatrace-operator.yaml
-rwxrwxrwx 1 kinoue kinoue    893 Dec  4 00:06 ServiceAccount_dynatrace-webhook.yaml
-rwxrwxrwx 1 kinoue kinoue   1092 Dec  4 00:06 Service_dynatrace-webhook.yaml
-rwxrwxrwx 1 kinoue kinoue   1889 Dec  4 00:06 ValidatingWebhookConfiguration_dynatrace-webhook.yaml
```

参考になれば！
OpenAIでテキストから音声合成すーる（Python）

# はじめに
[がちもとさんアドベントカレンダー](https://qiita.com/advent-calendar/2023/gachimoto3)4日目の記事です。
今日は、OpenAIを用いてテキストから音声合成していきます。

# 開発環境
- Windows 11 PC
- Python 3.11

# 導入

1．ライブラリのインストール
pip install openai

2．APIキーを発行してコピペ

https://platform.openai.com/api-keys

3．プログラムの作成

~~~text2speech.py
from openai import OpenAI
client = OpenAI(api_key="<INSERT-YOUR-API-KEY>")

speech_file_path = "speech.mp3"
response = client.audio.speech.create(
  model="tts-1",
  voice="fable", # alloy, echo, fable, onyx, nova, shimmer
  input="こんにちは。がちもとです。今日は、オープンエーアイでテキストから音声合成していきます！"
)

response.stream_to_file(speech_file_path)
~~~

<details><summary>コード解説</summary><div>

このコードは、OpenAIのAPIを使用してテキストから音声を合成するためのPythonスクリプトの一部です。以下に簡単に説明します。

1．openaiモジュールをインポートします。
2．OpenAI APIキーを取得し、api_keyに挿入します。
3．合成した音声を保存するためのファイルパスを指定します。ここでは、speech.mp3という名前のファイルに保存することになっています。
4．OpenAIのテキストから音声を合成するためのリクエストを作成します。modelパラメータは音声合成モデルを指定し、voiceパラメータは使用する声の種類を指定します。また、inputパラメータにはテキストを指定します。この例では、日本語の挨拶文を指定しています。
5．リクエストをOpenAIのAPIに送信し、合成された音声を受け取ります。
6．受け取った音声を指定したファイルパスに保存します。
このコードを実行することで、指定したテキストが合成されて音声ファイルとして保存されます。
</div></details>

# 実行結果

https://x.com/sotongshi/status/1731687113127493737?s=20

お疲れさまでした。
初めてのチーム開発〜第2章〜

---
2023年Apprentice第2期生としてチーム開発-第1回目-を行いました！
    
このブログは私が所属したチームが様々な課題を解決し、アプリを作成する一つの物語です。
    
私たちは、スケジュールアプリ「スケミ」を開発しました！
    
 スケミの概要は[コチラ](https://qiita.com/HACHI32/items/06bf7c07f72061a16615)

---

では〜第2章〜始まり始まり💨
    
 [第1章](https://qiita.com/HACHI32/items/6cbf7a0814814f049565)では、アプリの決定からサーバーの発見までをお話ししました。
    
次の課題はこちら
    
- データベースはどのように繋げるのか
- macを使っている人、Windowsを使っている人と開発環境が違う
    
その前に！チーム名とチームロゴを作成‼️
    
チーム名もいろいろと案が出ましたが、ロゴの案が浮かんだので作成してみると
    
メンバーみんなでしっくり来たのでチーム名はTeam Dodoに！
    
まだまだ下手でもとにかく手を動かして挑戦してみる！という意味です！
    
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579151/a64bfe7a-d6ef-915a-2938-834994a3f30a.png)
  
ロゴはこちら！私がAIで作成したのですが、ロゴに加えて文字や装飾を加えてみました🎵
    
チーム名やロゴを決めると、一体感がうまれてモチベーションも上がりますね😃
    
チーム名も決まったところで、開発の続きを。。。
    
🐳開発環境を合わせるためにはDockerを、コードを共有するためにGitHubを使用することに。DBのアダプターとしてmysql2というRubyのgemを採用。
    
DockerやGitHubはチームメンバーが作成してくれました！
    
私自身もDockerについて学習し、Dockerの作成の仕方、どのように成り立っているかを学びました。
    
Dockerなのに、私は動くがチームメンバーは動かないなど問題もありましたが、メンターさんに相談し、sleepを入れる事で同じ環境でアプリを開発することが可能になったので一安心。
    
GitHubに関しては、一人で開発している時はよかったもののチームで開発するとなるとちょっと苦戦してしまいました😭
    
チームとして開発していく環境は整ったものの、個人のクエストの提出期限だったり、チームメンバーが忙しくなってしまったりと、チーム開発の雲行きが怪しくなります、、、☁️
    
そこで！私たちのチーム開発について今一度考え直してみました。
    
スケジュールはどうなっているか、それぞれのタスクはどのようになっているか📅
    
私たちがやったこと
    
- スケジュールを可視化する(ガントチャートにする)
 - チームリーダーを決める(僭越ながら私が担当させて頂きました)
- スプレッドシートを使用し、リンクなどをまとめる
    
上記をすることによって、チームの意識や行動が変わり始めます。
    
実装できている状態の期限も決めることで、個人の提出クエストをしつつも、チーム開発にも注力していけるようになりました💡
    
一人でアプリを開発しているのではないこと、自分がやらないと他のメンバーに迷惑をかけてしまうことを学ぶことができました。
    
本当に完成できるのか、、間に合うのか、、、という不安もありましたが、一人ではないこと、相談できる相手がいることで一緒に解決していけたかなと思います。
    
これに関してはチームメンバーに感謝しかありません😭
    
さて、一難去ってまた一難というTeam Dodoですが、アプリの完成はいかに、、、！

次回　[初めてのチーム開発〜最終章〜](https://qiita.com/HACHI32/items/25bb6520159b8a09a6d2)へ続く
EC-CUBE 4.2.3の新機能

# 概要
2023年11月6日にリリースされたEC-CUBE 4.2.3の新機能について紹介します。
今回のアップデートはマイナーバージョンアップですが、セキュリティ観点で見たときに便利なものがいくつかあるので、ピックアップしてご紹介していこうと思います。

# 1. 脆弱性対応内容
今回の4.2.3では、[脆弱性の対応](https://www.ec-cube.net/info/weakness/20231026/index.php)が含まれています。
EC-CUBEで採用されているテンプレートエンジンであるTwigの使用時に、Twig関数などの機能を不用意に利用させないためのSnadbox機能です。

詳細は公式のドキュメントに記載されているので割愛しますが、いわゆる「許可リスト方式」で使用できるTag・Filter・Functionを任意のものに制限することが出来ます。

Twig Sandboxによる許可リスト制御
https://doc4.ec-cube.net/customize_twig_sandbox

本番モードで動いているときは、許可されてないワードがSandbox内に検出された場合、そのSandbox内の表示が消えます。
開発モードで動いている場合は、検出された場合エラー画面が表示されます。
![error_screen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72413/df01c2ca-f300-7761-c139-c6858f997227.png)

※本番モードでも、管理画面のログ管理から発生したエラー情報を参照することが可能です
![log_screen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72413/39557a0a-e37f-3e66-a096-e89dcdfa2e25.png)


この機能を活用することで、よりWebサイトをセキュアに保つことが出来ます。

# 2.スロットリング機能の追加

今回のアップデートでは、元々4.2.1のときに新規で追加になった「スロットリング機能」の適用範囲がより広範囲に拡張されました。

管理画面の2段階認証時、ユーザーの新規登録時のそれぞれに、スロットリングが適用となりました。
アクセスしてきたユーザーが何度も何度も同じ操作を繰り返した場合に、一定時間そのURLへのアクセスを拒否するような挙動になります。

ブルートフォースのような攻撃対策として非常に有効です。

# 3.【バグ改修】在庫数がダブってしまう不具合を解消

1つの商品規格に対して2つの在庫情報が登録されてしまい在庫がずれてしまう
https://github.com/EC-CUBE/ec-cube/issues/6028

発生頻度としては非常に低いものとなりますが、`dtb_product_stock` に同じ商品規格IDに対するレコードが2件できてしまうという不具合が存在していました。
こちらの対処を行い、バグを解消しました。

# 最後に

冒頭でも述べましたが、今回のアップデートはマイナーバージョンアップなので大きな機能改修はありません。ただ、EC-CUBEを使ってサイトを構築して頂いている方には有用な変更内容が含まれていますので、ぜひアップデートしていただければ幸いです。特に脆弱性に関しては今すぐ影響が出るようなものではないですが、余裕を持って対処いただくことをおすすめいたします。

また、上記の内容をYoutubeの公式チャンネルでもご紹介しています。
ご参考までにご覧いただければ幸いです。
https://www.youtube.com/watch?v=GITjBbDcU5U
値を持つ座標群からヒートマップを表示

## 背景

2次元の座標情報をヒートマップとして出力したいと思った．

![ヒートマップ概要.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3600683/e3bcb582-8b9a-1cfd-8032-9e8a77ea5d67.png)

最も簡単に出力すると点にのみ意味を持たせるだけで，間の値の情報を表現することはできない．
位置座標のような点の間が重要なデータの場合，間を補完して表示することで，見える情報があると思う．

そこで，scipyの線形補完を利用して，点間の値を補完したヒートマップを作成してみる．
プログラム言語は使い慣れているpythonを利用する．

## 方法：scipy.interpolateのgriddata

`scipy.interpolate.griddata`を用いることで，2次元座標上にある離散値を連続値になるように点間の値を補完する．

```python:関数の引数
from scipy.interpolate import griddata

output = griddata(points, values, xi, method='linear')
# points:座標を持つ配列
# values：pointsの値を持つ配列
# xi：補完対象となる座標を持つ配列
# method：
#    nearest:補完する点にもっと近い値を返す
#    linear:線形補完
#    cubic:曲線補完
```

## 実際に近いデータで試してみる

### 点群データの作成

まずは座標と値を持ったデータ列を作成する
```python:データ
x = [3,3,3,6,6,6,9,9,9]
y = [3,6,9,3,6,9,3,6,9]
values = [1,2,3,9,5,6,7,8,9]
```
### 補完なしでプロット

```python:補完なし表示
# 散布図としてプロット
plt.scatter(x, y, c=values, cmap='Blues', s=100)  
plt.colorbar()  
plt.xlabel('x座標')
plt.ylabel('Y座標')
plt.title('テスト')
plt.show()
```
![before_output.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3600683/13e4b995-769c-fcf0-48b2-9fbfe52c3b7b.png)

右の方に行くにつれて大きい値が並んでいることが分かりやすくなった．

### 点群の補完

```python:点群の補完
# 補完対象となる点座標を作成
xi = np.linspace(min(x), max(x), 100)
yi = np.linspace(min(y), max(y), 100)
xi, yi = np.meshgrid(xi, yi)

# 点間の補完を行う
zi = griddata((x, y), values, (xi, yi), method='linear')
```

### 補完した情報をプロット
```python:補完あり表示
# プロット
plt.figure(figsize=(8, 6))
plt.imshow(zi, extent=(min(x), max(x), min(y), max(y)), origin='lower', cmap='Blues')
plt.colorbar()  
plt.xlabel('x座標')
plt.ylabel('Y座標')
plt.title('テスト')
plt.show()
```
![after_output_nearest.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3600683/5677e788-0767-4fd8-f82b-bf09bbc65036.png)![after_output_linear.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3600683/2bfb5344-eb4e-5124-b869-5bad3e3fb107.png)![after_output_cubic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3600683/c12775ae-8e8d-b44b-155c-ad305ecd8ced.png)

3つの保管方法で比較した．

`nearest`だと最も近い点の値をそのまま参照するため，線を引くような形になる．
`linear`と`cubic`を比較すると，`cubic`の方がより滑らかに保管している．
分析する実データによって使い分ける必要がありそうだと思った．
Confluenceで、水平線をカスタマイズする

# はじめに

個人的に、qiitaのマークダウンが見づらい人です。
もっと色つけてほしい。
gitのreadme.mdだって見づらい。

だから、Confluenceも、少しカラフルにしたい、そんな話です。

# スペースごとに定義されたCSSを変更します

スペースの管理者以上であれば、設定を変更できます。

`スペースの設定 -> ルックアンドフィール -> スタイルシート`から変更します。
通常、変更していない場合は、会社で導入しているオリジナルのCSSが定義されているので、それを継承した形です。

カスタマイズしましょう。

```css
hr{
    height: 5px;
    border: solid 0px;
    background: linear-gradient(to right, #3c6ec9, #80D0C7 50%, #fff);
}
```
せっかくなのでグラデーションにしてみました。

こんな感じの見た目になります。

![スクリーンショット 2023-12-04 23.39.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1026740/6b816ee5-f7cf-d9b6-d4e7-1785964d3135.png)


カラフル〜。

色はこちらを参考にしました。

https://kouhekikyozou.com/css_hr_color#%EF%BC%93%EF%BC%8Ehr%E8%A6%81%E7%B4%A0%E3%82%92%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95

ぜひやってみてください。

こんなのもできます。

![スクリーンショット 2023-12-04 23.42.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1026740/9ae7c7e5-b1df-2d58-8bb5-4cd1774d17f7.png)

```css
hr{ 
    height: 5px; 
    border: solid 0px; 
    background: linear-gradient(to right, #6a5acd, #ff7f50 40%, #ffc0cb 60%, #fff); 
}
```
Googleドライブにあげた画像をWebサイトで表示したい


この記事は海洋大技術系サークル Advent Calendar 2023の5日目です。

# はじめに
こんにちは！
海洋大のCS(コンピューターサイエンス)サークルで活動をしている大学3年生のFJ2123です。
現在私は、IT企業のエンジニア職の長期インターンをしています。その際、業務をする中で知ったGoogleドライブの画像に関するTipsをこちらで共有させていただきます。

# やりたいこと
GoogleDrive内の画像のリンクを、Googleスプレッドシートにコピペして、そのスプレッドシートをGoogle SheetsAPIで API化することでフロント側で表示したい

完成図はこんな感じ！

![スクリーンショット 2023-12-04 23.33.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194385/a858d88c-5fce-547b-6f7b-d4e8c43314e9.png)


# 手順

### 1.Googleドライブに画像を保存する
この時スプレッドシートにコピーするためのリンクを取得しておきましょう！
共有設定を「リンクを知っている全員」にすることを忘れずに！

![スクリーンショット 2023-12-04 20.35.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194385/7e6ec3e4-3245-7ee9-e4bf-268548a64337.png)

### ２.APIにするスプレッドシートを作成
今回は以下のような構成にします。

![スクリーンショット 2023-12-04 19.16.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194385/9bddc8ec-83bb-cbe0-34ed-d0f6243802f7.png)


### 3.Google Cloud PlatformでGoogle Sheets APIを有効にする
認証情報は「APIキー」、「サービスアカウント」の二つを作成しましょう！

### 4.スプレッドシートの共有先にサービスアカウントを追加

ここで閲覧者を選ぶとAPIの読み出し、編集者を選ぶとAPIの書き出しができるようです。

![スクリーンショット 2023-12-04 20.39.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194385/a33048ef-c9d2-b0d6-4fa2-a34ed290906a.png)


### 5.以下のURLに値を指定してアクセス

APIKEY、スプレッドシートID、シート名をそれぞれ確認して以下のリンクにアクセスしましょう

```
https://sheets.googleapis.com/v4/spreadsheets/{スプレッドシートID}/values/{シート名}?key={APIキー}
```

スプレッドシートIDはスプレッドシートの以下の部分です
```
https://docs.google.com/spreadsheets/d/{スプレッドシートID}/edit#gid=0
```

うまくいくと以下のようにJSONの内容が表示されます

![スクリーンショット 2023-12-04 20.52.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194385/f912be42-67b0-f76f-25cf-b39db7da08bd.png)


あとはこれをフロント側で叩くだけ、、、と言いたいのですが、このままでは画像を表示することができません！

### 6.画像のURLを変える
現在このようになっているリンク(IDの部分は固有の文字列)を

```
https://drive.google.com/file/d/{ID}/view?usp=sharing
```
以下のように書き換えましょう！！
```
http://drive.google.com/uc?export=view&id={ID}
```
このようにすることでimgタグなどで画像を表示させることができます

### 7.フロント側で表示する

リンク書き換え前
![スクリーンショット 2023-12-04 23.35.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194385/89df26fe-f1bd-87f0-5bce-00445d16fcce.png)

リンク書き換え後
![スクリーンショット 2023-12-04 23.33.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194385/17b1bb7c-3c68-6e04-5c2d-a5f24b466d52.png)


# まとめ
　正直、リンクの公開設定を変えるだけでWebサイトに公開できると考えていたので初めて知った時は驚きました。
今後、Web開発をする人のお役に立てば幸いです。
Ransack needs associations explicitly allowlisted as searchable...の対処法

self.ransackable_attributesで自身で許可するカラムを、self.ransackable_associationsで関連付けの参照先で許可するmodelを指定できる。
参照先のmodelでは、self.ransackable_attributesで同様にして許可するカラムを指定する。

# 具体例
PostモデルとTagモデルが多:多で、Postの検索でTagのnameカラムを利用したい場合(tag_postsが中間テーブル)
```ruby:Post.rb
class Post < ApplicationRecord
  has_many :tag_posts, dependent: :destroy
  has_many :tags, through: :tag_posts

  def self.ransackable_associations(_auth_object = nil)
    #多なので複数形で指定
    ['tags']
  end
end
```
```ruby:Tag.rb
class Tag < ApplicationRecord
  has_many :tag_posts, dependent: :destroy

  def self.ransackable_attributes(_auth_object = nil)
    ['name']
  end
end
```
「進捗バーが君を導く」フィードバックの力で目標達成

ゲーミフィケーションにおけるフィードバックの力は、特に進捗バーを通じて顕著に表れます。進捗バーは、目標に向けた進行度を視覚的に示し、ユーザーのモチベーションを維持し向上させる効果があります。

# 進捗バーの心理学的効果
進捗バーは、目標達成に向けた具体的な進行状況を示すことで、ユーザーに達成感と動機付けを提供します。心理学においては、「目標グラディエント理論」がこれを説明しています。目標に近づくにつれて、ユーザーの動機付けが高まるという理論です。

![gamification-20231204-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/0eb41541-4241-5811-59d2-18eba720889d.png)


# 実世界での応用例
## アンケートにおけるプログレスバー

- **進行状況の表示:** プログレスバーは、アンケートの進行状況と残りの質問数を示し、回答者が時間を効率的に管理できるようにします。
- **複数ページの進捗:** 複数ページのアンケートでは、プログレスバーが各ページの進行度（例：2ページ目で50%）を表示します。
- **モチベーションの向上:** 長いアンケートにおいて、プログレスバーは進行状況を知らせ、完了へのモチベーションを高めます。ブランドに合わせたカスタムカラーも使用可能です。
- **透明性と効果:** 進捗バーを使用することで透明性が提供され、回答率の向上と正確な結果が得られます。



## オンラインフォームにおけるプログレスバー

- **顧客支援:** プログレスバーは、長いオンラインフォームを完成させる際に顧客に情報と安心感を提供し、プロセスの完了を促します。
- **顧客体験の改善:** 顧客へのフィードバックを提供し、不確実性を減らし、作業完了時の満足度を高めることで顧客体験を向上させます。
- **多様な形式:** 進捗バーはパーセンテージバー、残りのステップを示すバー、特定の順序で完了する必要がないチェックリストバーなど、様々な形式があります。
- **透明性と正直なガイダンス:** 透明で正直なガイダンスは不確実性を減らし、プロセスをスムーズでポジティブな体験に変えます。
- **効果的なインターフェイス:** プログレスバーは透明で正直なユーザーインターフェイスを提供し、ユーザーに作業に必要な労力と価値を判断させます。

## プログレスバーの重要な役割

- **ユーザーエンゲージメントの向上:** 進捗バーはユーザーのモチベーションを高め、特に長いフォームやアンケートでの作業完了への満足感を促進します。
- **透明性の提供:** ユーザーにアンケートやフォームの全体的な進行状況を示し、作業の残量を明確にします。
- **完了率の向上:** 進捗バーによりユーザーは作業の終了が近いことを認識し、アンケートやフォームの完了率が高まります。

### 企業の具体例

#### Airtable
- オンボーディングフローで「残りステップ」を示すプログレスバーを使用し、ユーザーがタスクを完了するのを促進します。

#### Fullstory
- オンボーディングを4つの段階に分け、各ステージ完了時にチェックマークを表示するプログレスバーを採用しています。

#### Loom
- 複雑なプロセスを管理しやすくするために、ステップ残りプログレスバーとチェックリストを組み合わせた進捗インジケーターを使用しています。

#### Slack
- アプリ内オンボーディングで残りのステップを示すツールチップ付きプログレスバーを使用し、ユーザーが特定のタスクを完了するのを支援します。

#### ClickUp
- マルチステップ設定フローでユーザーの位置を示すために、小さなボールを使用したステップ残りプログレスバーを作成しています。

# まとめ

進捗バーは簡単な見た目とは裏腹に、非常に効果的なツールです。これは、目標に向けた進み具合を直感的に示し、ユーザーのモチベーションを高めるのに役立ちます。次回の記事では、「ストーリーでユーザーを虜に！魅力的なゲームデザインの秘密」と題して、ゲームデザインの面白さについて詳しく解説します。ぜひご期待ください！
(¦3[▓▓] crystal tool unreachable で呼ばれていないメソッドを見つける 

## はじめに

さて、もうネタが尽きてしまいました。
今日は `crystal tool` の中のあまり使ったことないツールを試してみます。

## crystal tool unreachable

`crystal tool` とすると、いろいろなツールが出てきます。その中でも、下の方に表示されているのが unreachableくんです。これは、利用していないメソッドを列挙することができます。

```cr:piyo.cr
def study_very_hard()
  10000.times do
    10000.times do
      10000.times do
        study_very_hard()
      end
    end
  end 
end

def neru()
 sleep 7
end

puts "明日から頑張る"
neru()
```

こんなコードがあったとしたら、

```sh
crystal tool unreachable piyo.cr
```

とすると、こーんな感じで

```
piyo.cr:1:1	top-level study_very_hard	9 lines
```

呼ばれてないメソッドがあることを教えてくれます。

`neru()`

(:3[▓▓]

　(¦3[▓▓]

　　　　　　　　　　　=͟͟͞͞ (¦3[▓▓]

---

ちなみに、この `study_very_hard()` を実行すると、stack overflow で死亡します。

```
Stack overflow (e.g., infinite or very deep recursion)
[0x56220b058706] *Exception::CallStack::print_backtrace:Nil +118 in ./piyo
[0x56220b047d76] ~procProc(Int32, Pointer(LibC::SiginfoT), Pointer(Void), Nil) +310 in ./piyo
[0x7ffb6ce42910] ?? +140717840410896 in /lib/x86_64-linux-gnu/libc.so.6
[0x56220b048100] *study_very_hard:Nil +80 in ./piyo
[0x56220b048105] *study_very_hard:Nil +85 in ./piyo (261831 times)
[0x56220b037a75] __crystal_main +1093 in ./piyo
[0x56220b0d0b36] *Crystal::main_user_code<Int32, Pointer(Pointer(UInt8))>:Nil +6 in ./piyo
[0x56220b0d0aaa] *Crystal::main<Int32, Pointer(Pointer(UInt8))>:Int32 +58 in ./piyo
[0x56220b044fd6] main +6 in ./piyo
[0x7ffb6ce280d0] ?? +140717840302288 in /lib/x86_64-linux-gnu/libc.so.6
[0x7ffb6ce28189] __libc_start_main +137 in /lib/x86_64-linux-gnu/libc.so.6
[0x56220b037565] _start +37 in ./piyo
[0x0] ???
```

バックトレースを見ると、呼び出しがたくさん並んでいます。

```
gdb ./piyo
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/d3ef3eb5-d7a2-1d58-01c1-5a07dc15a5d7.png)

やったね。質問サイトじゃない方のStackOverflowだ(*´ω｀*)（謎テンション）

おわり
軽深演習 #4 ゼロ戦なみの製品

### 軽深（かるしん　なんちゃって圏論） Advent Calendar 2023 4日目の記事です。
演習形式をとっているので、ぜひ　回答を試みてください。

### 前提知識　射(矢印)が重要　因果関係
圏論では、対象でなく、射が大切です。射にはどんなものがあるのでしょうか？　圏の定義にしたがっているかをある程度、無視して議論すると、因果関係がそれです。軽深（かるしん　なんちゃって圏論）なのでそういった立場で議論します。
因果関係とは、原因がないと結果がないという関係です。通常、これが原因だという言説はよくなされますが、多くの場合、因果関係ではないです。子供に質の高い教育をしないから、子供がおかしくなるという議論がありますが、酷い境遇の人でもよい人に育つことはあります。
因果関係は、mermaid 記法で書くこうですね。こんな事は知っているぞ、馬鹿野郎と思う人がほとんどでしょうけど、ほんの少し因果関係を数学的に考えるだけで、違ってきます。
```mermaid
flowchart LR
  A[原因]-->B[結果]
```

### 演習 無理難題の要求仕様があったからこそゼロ戦はできました。同様に無理難題の要求をしたからこそできた製品にはどんなものがあるでしょうか？

圏論に触発されて書いた記事がこれです。[ゼロ戦なみの製品をつくるために](https://zenn.dev/zanjibar/articles/232a35bc745298)
無理難題の要求仕様がなければ、ゼロ戦はできなかったので因果関係はあります。この記事を受けて書いたのが、[ゼロ戦なみの時系列データベースの要求仕様書](https://zenn.dev/zanjibar/articles/e342a4d2c33cc5)です。少し数学的にかんがえるだけでも、思考の道筋が開けてきた気がしませんか？　厳密な圏論の議論からすれば、程遠いですが、面白くないでしょうか?　では、無理難題の要求をしたから、できた製品例をあげてみてください。たくさんあるはずです。
メモ:P20liteリカバリーなどの入り方

# 書き始めた理由
自分が操作方法を忘れるから。
普通に間違ってるかもしれないので完全にはあてにしないでください。
追記
こちらの記事のほうが１０００倍詳しく、正しいです。
https://xdaforums.com/t/guide-emui9-p20-lite-basics.4341373/

# 注意
この中のいくつかの方法はbootloader unock時に有効です。
BLUの方法はいろいろありますが、この機種の場合は[PotatoNV](https://github.com/mashed-potatoes/PotatoNV)がおすすめです。

## fastboot
PCに接続した状態で電源ボタン+音量DOWN

## eRecovery
PCに接続していない状態で電源を切り、PCに接続した後電源を付け、その後音量UPを3秒押し

## カスタムリカバリ
PCに接続していない状態で電源ボタン+音量UP
Derivedを使いこなしてCoreDataで高度な検索を行おう

Core Dataを構成するファイル xcdatamodeld のプロパティに Derived というチェックマークが存在します。
そして、Derivedにチェックを入れると `Derivation` の入力窓が表示されます。
これを使いこなすとCore Data内に保存されているデータをいろんな形で取り出すことができますので、この使い方を説明します。

![スクリーンショット 2023-12-03 18.34.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62305/a577850c-9c91-3383-52e9-2061a0e9f7e1.png)

# NSDerivedAttributeDescription

Derivedのチェックマークをつけることで生成できる `NSDerivedAttributeDescription` は、他の属性から導出される属性を表現するために使用されます。
一つのAttributeは基本的には永続的に保存されたデータを保存していますが、Derivedのチェックマークをつけると、既存のAttributeから処理を与えて加工したデータなどをAttributeとして扱うことができます。
これを行うことで、柔軟なクエリで検索を行ったりが可能になります。

## Derivedの利用

まずはCore Dataモデル上に適当なAttributeを作成します。  
このプロパティの `Derived` にチェックを入れます。
そして `Derivation` に、与える処理の内容を記述します。

# Derivation に与える内容

与えることができる内容は以下の公式ドキュメントに書いてあります。
https://developer.apple.com/documentation/coredata/nsderivedattributedescription

## to-one keypath

### 他のAttributeやリレーションシップのデータを表現

他のAttributeや、Relationshipsにto-oneで登録しているmodelのAttributeをそのまま表示することができます。

例えば、Relationshipsにto-oneのbookモデルを持っていた場合、Derivationに `book.text` と設定することによって直接Attributeとして扱うことが可能です。

## to-one keypath with a function

主にString Attributeに対して効果を与えるものになります。
String Attributeのtitleには以下のデータが保存されているとします。

- é, è, ê, ë
- ñ
- â, ê, î, ô, û
- à, è, ì, ò, ù
- ö, ü
- AiUeO

### canonical:

`canonical:(title)` とDerivationに与えることによって、ダイアクリティカルマークや大文字を無視したデータが表示できます。
![Simulator Screenshot - iPhone 15 Pro - 2023-12-03 at 19.01.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62305/3fe3e2e2-f9fb-84ce-2b73-3a80c62207da.png)


### uppercase:
`uppercase:(title)` とDerivationに与えることによって、小文字を無視したデータが表示できます。
![Simulator Screenshot - iPhone 15 Pro - 2023-12-03 at 19.04.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62305/0b962590-9bf0-f294-4afe-f8b42f9876e9.png)


### lowercase:
`lowercase:(title)` とDerivationに与えることによって、大文字を無視したデータが表示できます。

![Simulator Screenshot - iPhone 15 Pro - 2023-12-03 at 19.04.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62305/81cb4304-c94b-46b9-8ef8-a829ee8c2a6a.png)

## to-many keypath with a function
Relationshipsにto-many で登録しているmodelに対しての処理結果をAttributeとして持つことができます。

### `@count`
例えば、entities というto-manyなRelationshipsを持っている場合、
`entities.@count` とDerivationに設定することで、entitiesのモデル数をAttributeとして扱うことが可能になります。

### `@sum`
例えば、entities というto-manyなRelationshipsを持っていて、そのモデルがpriceというDecimal typeのモデルを持っている時、
`entities.price.@sum` とDerivationに設定することで、entitiesのpriceの合計をAttributeとして扱うことが可能になります。

## time
`now()` を使うことで、Attributeを現在時刻として扱うことができます。

# まとめ

Derivedを使うことによって、一旦永続データからデータを取得した後にフィルタリングや計算していたような処理を、Attributeで実現することが可能になります。
使おう！Core Data!

# ちなみに
SwiftDataでは使えません。
【AWS認定】バウチャーの利用時に念のため注意しておきたい点

AWS認定のバウチャー利用時に少しハマりかけたためその際の雑記となります(結果的には~~日頃の行い~~運で回避出来ました)

**2023/12/26追記 当方の環境では一切発生しなくなりました** :pray:

## もし過去の自分へ一言伝えられるとしたら(結論)
バウチャーの利用にあたって「特典を申請する」を押す前に念のためコード一覧のスクショ等を取っておこう！バウチャーの複数回誤入力はリスキーかも！

## AWS認定の合格と増えゆく割引バウチャー

AWS認定に合格すると、特典として次回以降の受験時に使用できる半額バウチャーが得られます。
この性質を利用して以下のような流れで取り組まれている方もいらっしゃるかと思います。

**CLFなど何らかの試験に合格する⇒50％OFFのバウチャーが貰える
⇒バウチャーと共に次の試験を申し込む⇒めでたく合格するとまたバウチャーが貰える...**

非常にありがたい存在といった印象の強いバウチャーですが、一度使用して無効となった使用済みバウチャーについても「有効な特典」表に残り続けるという性質がある為、合格を重ねる毎に表示量がどんどん増えていくことになります。

## バウチャーの一覧表示順

バウチャーを確認する際の「有効な特典」表に関して、赤枠で囲った部分の**並び順が画面リロード及び「特典を申請する」を実行する度にランダムに変化する**という性質があります...！(2023/12/4現在)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617151/b65326f2-082a-32b3-26d8-8e4d5f1009db.png)

バウチャーのコード自体も特定の規則に基づいて生成されている乱数列のように見え、数字などが大きいほど新しいといった特徴も見受けられません。  

そのため、行数が増えてくるほどに発行前後の様子を**よく観察していないと「特典を申請する」によって得られた新しいコードが埋もれてしまい、判別が難しくなります**

※このような表の並び順に関して初心者ながらに少しだけ調べてみた結果、今回のような挙動は一般的には意図的にパフォーマンス重視の実装をしている際に以下のような要因で生じる場合があるそうです
- 非同期でデータを読み込んでおり、表示順がデータの到着順序に依存している
- DBからのデータ取得時などにソートの指定などをしていない

ここまでであれば**確かに少しだけ手間かもしれないが、何が問題なんだ？数回も入力すればいずれは当たるじゃないか**と思われるかと思います。私もそうでした。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617151/f02fc2c5-4dd5-3865-63a9-cb88604431ad.png" width="150">

## 決済時のバウチャー利用
決済時に無効、例えば使用済みのバウチャーの利用を試みると、以下のようなメッセージが出現して先に進むことが出来ません。試みた操作と同様に「もう使用済みだから使えないよ」といったニュアンスであるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617151/55d61bea-f02f-e5bb-d52f-44596aff3d4e.png)
また、ここでAWS認定の特典ページを見てみると以下のような記載が有り、特典の不正利用に係る注意がなされているように見えます。
> 注意: すべての特典は譲渡不可であり、特典を獲得した個人および特典が最初に割り当てられた AWS 認定アカウントによる使用のみを目的としています。AWS はその単独の裁量で、受験者が特典を不正使用または譲渡したと判断した場合、その不正使用または譲渡に関連する試験結果を無効にする場合があり、特典は回復されません。

ここで今回ハマりかけた事象が登場となるのですが、先ほどのコードが埋もれてしまう現象などと組み合わさる事で  

**当てずっぽうでバウチャーを何度も誤入力をしていると、バウチャーの不正利用を疑われてピアソンvueのアカウントを凍結される😱**  

という恐怖のコンボが発動してしまう可能性があるようです😱

## もし発動してしまった場合は...
もし当事象が発動してしまった場合は[参考にさせて頂いた記事](https://wing-degital.hatenablog.com/entry/2021/05/19/004023#%E3%81%AA%E3%81%9C%E5%88%A9%E7%94%A8%E5%88%B6%E9%99%90%E3%81%95%E3%82%8C%E3%81%A6%E3%81%97%E3%81%BE%E3%81%A3%E3%81%9F%E3%81%8B)や[ピアソンVUE様のよくある質問](https://www.pearsonvue.co.jp/test-taker/FAQs/My-Account.aspx)によると、[カスタマーサービス](https://www.pearsonvue.co.jp/Test-takers/Customer-service.aspx)に相談する事で比較的速やかに凍結を解除いただけるようです

※今回は運よく3回目で正解のコードを引き当てた為、私自身が実際に当事象を目の当たりにしたわけでは有りません。
そのため、もし受験期間が空くタイミング等があれば一度実験してみて(怖い)再現するかなど追記出来ればと思います

## 今回参考にさせて頂いた記事など
https://wing-degital.hatenablog.com/entry/2021/05/19/004023#%E3%81%AA%E3%81%9C%E5%88%A9%E7%94%A8%E5%88%B6%E9%99%90%E3%81%95%E3%82%8C%E3%81%A6%E3%81%97%E3%81%BE%E3%81%A3%E3%81%9F%E3%81%8B
SQLとNoSQL

これまでMySQLしか使ったことがありませんでしたが、新しく参加しているプロジェクトではMongoDBを使用しています。

MySQLはいわゆるSQLの部類であり、MongoDBはNoSQLの部類に属します。

それぞれの違いはわかっているつもりですが、あまり詳しく深ぼったことはなかったので、違いやそれぞれの得意分野について端的にまとめておきます。

また、特定のデータベースの使用法などに踏み込むことはありません。

## **SQL**

### **概要**

SQLは「RDBMS」（リレーショナル型データベース）とも呼ばれ、MySQLなどの表形式でデータベースを管理する形式です。保存するデータの形式はあらかじめスキーマとして定義する必要があります。

### **利点**

- データの形式が固定されているため、データの整合性と一貫性を保つことができる
- SQL言語を用いた複雑なデータの更新、検索、関係構築が可能

### **欠点**

- スキーマの変更や拡張が困難で、データベースの柔軟性に制限がある
- 大規模データセットや高いトランザクション負荷への対応が難しい場合がある

### **データベース例**

- MySQL
- PostgreSQL
- Oracle

## **NoSQL**

### **概要**

NoSQLはSQL以外のデータベース管理方法で、保存するデータの形式をより柔軟に扱うことができます。スキーマレスまたは動的スキーマを採用しています。

### **種類**

- 文書ベース（例: MongoDB）
- キー・バリュー・ストア（例: Redis）
- グラフデータベース（例: Neo4j）
- 列指向データベース（例: Cassandra）

### **利点**

- スキーマレスのため、データモデルの拡張が容易で柔軟性に富む
- 分散処理に優れ、大容量データの高速処理が可能
- サーバーの追加によるスケールアップが容易

### **欠点**

- トランザクションの一貫性と整合性の保証が低い場合がある
- 複雑なクエリやデータの関連性を扱うのに向いていない

### **データベース例**

- MongoDB
- Cassandra
- Redis
- Neo4j

## 終わりに

これまで特にデータベースにこだわったことはなく、なんとなくMySQLを毎回選んでいましたが、これを機にそれぞれの特性に基づいて技術選択などができるとよいなと思いました。

## 参考


https://appmaster.io/ja/blog/sqltonosqlnodetabesubi-jiao


https://www.integrate.io/jp/blog/the-sql-vs-nosql-difference-ja/


https://products.sint.co.jp/siob/blog/nosql
【Lua】Quine

業務で使えない技術です。

# コードと解説
```lua
local quine = "local quine = %q; print(quine:format(quine))"; print(quine:format(quine))
```
実行すると、実行したのと同じコードが出力されます。

## `quine:format(quine)`
このコードのミソです。
```lua
string.format(quine, quine)
```
と同じで、文字列 `quine` の変換指示句を `quine` に置き換えます。有限長のコードで「出力のコードを実行する」という操作が無限回行えるからくりです。

## `%q` 指示句
Lua ソースコード上に展開しても正しく読まれるようにエスケープして置き換える指示句です。例えば、`"hogehoge"` で置換させようとすると `\"hogehoge\"` で置換されます。これは print すれば `"hogehoge"` になります。

反対に、`%s` を置換すると `"hogehoge"` は `hogehoge` として置換しますので、print するとダブルクォートが抜けてしまいます。

## 構造
変数 `s` の宣言部を `A`、出力部を `B` として、以下のような構造になっています。
```
A"A%qB"B
```
出力時、`%q` が`"`を含むダブルクォートの中身に置き換えられますので全く同じ構造が現れることがわかります。
# おわりに
ChatGPT 3.5 に「Quine 作って！」とお願いしたら出てきたコードです。
https://github.com/MakeNowJust/quine/blob/main/quine.lua
ここが学習元かな。。。と思っています。
batのfindstrの正規表現で「()」や「|」や「{}」が使えねぇじゃねーか！！（and条件or条件！）

# はじめに:sunny:
batのfindstrを使って正規表現で、特定の条件下のデータだけ、抽出というもの。
備忘として記事に残しておこうと思う。（だいぶ悩んだ・・・）


## こんな感じ:sunny:
### :one:通常バージョン
findstrはこんな感じで使っていた
```bat
for /f "tokens=1-10* delims=," %%a in (%file_path%) do (
    @echo %%a|findstr /r /c:"正規表現" > nul
)
```
### :two: and条件
条件としては、
**正規表現A
かつ
正規表現B**
の条件に合致するもの。
```bat
for /f "tokens=1-10* delims=," %%a in (%file_path%) do (
    echo %%a | findstr /r /c:"正規表現A" > nul && echo %%a | findstr /r /c:"正規表現B" > nul
)
```


### :three: or条件
条件としては、
**正規表現A
または、
正規表現B**
の条件に合致するもの。

「||」はエラーレベルが0以外の場合に、後続のコマンドが実行されるというものです。
**正規表現Aかつ正規表現B**の正規表現で見つからなかった場合、（ここで見つからなかった場合エラーレベルで「1」が返される。見つかった場合には「0」）
後続の**set flg=true**のコマンドが実行される。というものです。

```bat
for /f "tokens=1-10* delims=," %%a in (%file_path%) do (
    @echo %%a|findstr /r /c:"正規表現A" > nul || set flg=true
    @echo %%a|findstr /r /c:"正規表現B" > nul || set flg=true
    if flg==true echo どちらかの条件に一致
```


# 終わりに:sunny:
batのfindstrの正規表現は使える正規表現の種類が少なくて参っちまうぜ・・・。
（PythonとかPowerShellでいいじゃん！とは、思っていたり思っていなかったり・・・笑）
普通ならもっと短くかけるのに～
短いですが、ほいじゃ:raised_hands:

# 参考
https://weblabo.oscasierra.net/tools/regex/

https://learn.microsoft.com/ja-jp/windows-server/administration/windows-commands/findstr

https://atmarkit.itmedia.co.jp/ait/articles/0412/18/news018.html

# 2024/01/05 間違っていたため大幅に修正しました。
【Ruby Gold3.1詰まったシリーズ】raiseメソッドの動き

# はじめに
今回はraiseに関する内容です。raiseは呼び出す場所によって働きが異なるらしいので簡単にまとめてみます。

# 確認してみた
環境はruby2.5.3です。
まず、例外を発生させ、rescueの中にraiseを記載した
~~~ruby
begin
  "adventcalendar".hoge
rescue NameError
  raise
end
~~~
を実行すると、
~~~
Traceback (most recent call last):
        2: from /usr/local/bin/irb:11:in `<main>'
        1: from (irb):2
NoMethodError (undefined method `hoge' for "adventcalendar":String)
~~~
が表示され、beginで発生した例外NoMethodError をraiseで再度呼び出している。
次に、beginの中にもraiseを記載した
~~~
begin
  raise
rescue 
  raise
end
~~~
を実行すると、
~~~
Traceback (most recent call last):
        2: from /usr/local/bin/irb:11:in `<main>'
        1: from (irb):2
RuntimeError ()
~~~
が表示され、rescueの中のraiseで再度呼び出した例外がRuntimeErrorなので、beginの中のraiseはRuntimeErrorを発生させている。

# おわりに
確認した結果、beginの中でraiseを呼び出すとRuntimeErrorを発生させ、rescueの中でraiseを呼び出すとbeginで発生した例外を再度呼び出せることが分かった。もし誤っていたらご指摘いただけると助かります！

# 参考
https://www.amazon.co.jp/gp/product/B0756VF9Y3/ref=ppx_yo_dt_b_d_asin_title_o00?ie=UTF8&psc=1