OmniAICreator/Qiita-1.07M huggingface dataset:
16進数形式の文字列データを16進数の配列データに変換する

# 入力情報

入力データの形式は、以下の2通り。

1）16進数ダンプ形式

- スペースや改行区切りで1バイトづつに区切られている

```console
03 fb fb fb 4d 05 3c d0 66 00 ec cf 66 00 cc d2
0a 62 f0 cf 66 00 3c d0 66 00 00 00 00 00 45 f7
44 00 0c d0 66 00 f0 ff 50 05 48 d0 66 00 70 f5
74 01 98 da 67 01 0c 80 00 00 b0 c3 48 05 ff ff
ff
```

2）16進数ストリーム形式

- スペースや改行無しで連続している


```console
03fbfbfb4d053cd06600eccf6600ccd20a62f0cf66003cd066000000000045f744000cd06600f0ff500548d0660070f5740198da67010c800000b0c34805ffffff
```


# 出力情報

上記のどちらの形式も、下記のような16進数の配列データの文字に変換する。

```python
[ 0x03, 0xfb, 0xfb, 0xfb, 0x4d, 0x05, 0x3c, 0xd0, 0x66, 0x00, 0xec, 0xcf, 0x66, 0x00, 0xcc, 0xd2, 
  0x0a, 0x62, 0xf0, 0xcf, 0x66, 0x00, 0x3c, 0xd0, 0x66, 0x00, 0x00, 0x00, 0x00, 0x00, 0x45, 0xf7, 
  0x44, 0x00, 0x0c, 0xd0, 0x66, 0x00, 0xf0, 0xff, 0x50, 0x05, 0x48, 0xd0, 0x66, 0x00, 0x70, 0xf5, 
  0x74, 0x01, 0x98, 0xda, 0x67, 0x01, 0x0c, 0x80, 0x00, 0x00, 0xb0, 0xc3, 0x48, 0x05, 0xff, 0xff, 
  0xff, ]
```

_**この結果をプログラムの一部にコピペして使用します。**_


# 変換プログラム

Pythonで実装しました。

```python
# 16進数ダンプ形式 or 16進数ストリーム形式
input_data = """
03fbfbfb4d053cd06600eccf6600ccd20a62f0cf66003cd066000000000045f744000cd06600f0ff500548d0660070f5740198da67010c800000b0c34805ffffff
"""

if input_data[0] == '\n': input_data = input_data[1:]

if input_data[-1] == '\n': input_data = input_data[:-1]

if ' ' in input_data:
    c = input_data.split()
else:
    c = [input_data[n:n+2] for n in range(0, len(input_data), 2)]

s = '\n[ '
for n in range(len(c)):
    if n>0 and n%16==0: s += '\n  '
    s += '0x' + c[n] + ', '

s += ']\n'
print(s)
```

これをシェルにして使っています。**以上**
【Firebase】GitHub Actions で Cloud Functions for Firebase へデプロイする

Github Actions を用いて Cloud Functions for Firebase のコードをデプロイする方法のメモです。

## 前提
Cloud Functionsのプロジェクトは既に作成済みとします。

## 手順
### Firebase の project-id と token を入手する
- `project-id` はプロジェクト作成後の `.firebaserc` に書かれているものです。
- `token` は `firebase login:ci` をローカルで実行すると表示されます。
```
$ firebase login:ci
Waiting for authentication...

✔  Success! Use this token to login on a CI server:

"ここにtokenが表示されます"

Example: firebase deploy --token "$FIREBASE_TOKEN"
```

### Actions secrets の設定
先ほど取得した `project-id` と `token` を Github の Actions secrets に設定します。![Screenshot 2023-06-14 at 22.28.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2783425/031b0d6a-a6af-4715-7b82-b95751b389ba.png)



### Workflow の設定ファイルの作成
リポジトリの`.github/workflows`ディレクトリに`firebase-deploy.yml`というファイルを作成します。

```yaml
name: Firebase Deploy

on:
  push:
    branches:
      - main
jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install npm packages
        run: |
          cd functions
          npm install

      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only functions
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
          PROJECT_ID: ${{secrets.FIREBASE_PROJECT_ID}}

```

[github-action-for-firebase](https://github.com/w9jds/firebase-action)という firebase-tools用のActionを使っています。
`args`には firebase cli に使用する引数を指定します。ここでは`deploy --only functions`を指定しています。
あとは`main` ブランチへマージされると GitHub Actions が走り、Cloud Functions へデプロイされます！

## 参考
https://mdabdulhalimrafi.medium.com/automate-firebase-functions-deployment-with-github-actions-ci-a0eb10fa308d

https://qiita.com/kakudenbuzo/items/35382ab49b8041479c25
パーキンソン病になりやすい人の特徴や症状とは？｜原因から治療、社会サービスの解説

などの症状が現れたことはありませんか？

これらは神経変性疾患であるパーキンソン病の代表的な症状です。
 ![Screenshot 2023-06-14 at 8.33.06 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920958/e8c3950a-f479-9cae-ff87-2428f02a61a6.png)

高齢者での発症が多く、発症初期は症状が軽微なこともあり、加齢によるものと判断して病院に受診しないことも少なくありません。

しかし、パーキンソン病が進行すると、歩きにくくなったり、転びやすくなったりするなど日常生活に大きな支障が出るようになります。

パーキンソン病は、リハビリテーションや薬物療法で症状がある程度改善することが多く、また指定難病の一つであり症状の程度によっては医療費助成制度の対象にもなります。

ここでは、どのような症状でパーキンソン病を疑うのか、パーキンソン病はどのような経過を辿るのかなどについて詳しくご紹介いたします。

パーキンソン病は1000人～550人に1人の割合で発症する疾患です。

中脳の一部である黒質のドパミン神経細胞（神経伝達物質としてドーパミンを放出する神経細胞）が比較的選択的に障害されることで発症する病気です。

発症の原因は不明ですが、遺伝因子や環境因子の関与が重要とされており、10％弱は家族性であると推察されています。 

また年齢とともに発症率が高くなり、高齢者人口の増加に従って患者数は増加しています。

その他にも嗅覚が落ちたり、寝相が悪くなったり、転びやすくなったりと様々な症状が出現します。

根治的な治療法はなく、経年的に症状が進行する病気で指定難病の一つになっています。 

一方で症状を改善する薬に関してはたくさんの種類があります。

非薬物療法と薬物療法の併用により発症初期には普通の人と変わらない生活ができることも多いです。

薬物療法の他にも、
パーキンソン病の症状には非運動症状と運動症状があります。

非運動症状のような症状が代表的です。
受動的に筋肉を進展した時に無意識に抵抗してしまう症状で、力を抜いているつもりでも他動的に関節を進展・屈曲させようとした際に抵抗してしまいます。

受動的に筋肉を進展する際に抵抗が強くなったり弱くなったりすること(歯車現象)が特徴です。

しかし、持続的に抵抗がある場合もあります(鉛管様固縮)。
![Screenshot 2023-06-14 at 8.36.10 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920958/0f9f91df-7ac2-85a1-1fdc-f9d4332a9cd7.png)

関節の疾患との鑑別方法は、以下の通りです。
パーキンソン病の原因に関しては様々な研究がなされています。 

最近では*1迷走神経背側核などからシナプスに沿ってαシヌクレインが黒質に伝播することが要因の一つであるという仮説が有力です

嗅神経または消化管が何かしらの刺激を受けることがパーキンソン病の発症に関与しているという二重ヒット仮説が有力となっています。

パーキンソン病の進行を抑える治療は確立されていません。

しかし、薬物療法による反応性は比較的よい疾患であり、診断後は早期から薬物療法を行います。 

治療薬には以下のように多くの薬剤があり、それぞれの薬剤の特徴や薬価など考慮し、運動症状や非運動症状の程度に応じて使い分けます。
もっと詳しく知る

https://parkinson-smile.net/symptom/p2.html
https://agmc.hyogo.jp/nanbyo/ncurable_disease/disease02.html
https://stemcellthailand.org/therapies/parkinsons-disease/
https://www.nmp.co.jp/public/pk/index.html
Nest.jsリファレンス「概要」の中でよくわからなかったところだけまとめる記事

# はじめに
こんばんはながたいちこです。
現在Nest.jsの学習をしています。
僕がぽんこつなこともありNest.jsの公式ドキュメントの内容がなかなか理解できず、
Nest.jsについての技術記事も少なかったため、
ChatGPTと翻訳などを駆使してなんとか学習を進めている状態です。

技術記事が少なかったので、
「ちょっとこの機会にかいちゃおうかな！」というモチベーションの記事です。

ただ、公式ドキュメントの書きうつしのような内容ではまた人が苦しむので、
私が学習中に困ったこととその解決について記載します。
なので詳細は基本的にリファレンス様を参照してください。

https://docs.nestjs.com/first-steps


# ModuleとController
## 問題
ここでの問題はModuleとcontrollerです。
個人的に馴染みが深いMVCやMVVMのモデル設計のせいなのか、
ModuleとControllerのどちらが親なのかイメージできませんでした。

システムは必ず1つ以上のルートModuleを持つと記載がありましたが、
controllerを持たないModuleが存在できるため、
ではModule単体でなにするんだ？など混乱しました。

## 解決
Moduleが親。
親と言っては語弊があるかもしれませんが、
ModuleはcontrollerやServiceと紐づいており、
実質ラッピングしているような設計と理解しました。

推奨する設計方針もなるべくModule単位で機能を作成すべしとあり、
以下の理解に誤りはなさそうです。
- Module=機能全体
- controller=機能のIF
- Service=ビジネスロジック


# スコープの考え方
## 問題
スコープと聞くとPrivateやPublicのような関数や変数の公開範囲の話だと考えてしまい、
シングルトンがどうの、アクセスするたびにインスタンスが。。。
といった話が全くイメージできませんでした。

## 解決
変数の生存期間と同義でした。
- DEFAULT:アプリケーション全体でインスタンスを共有する
- REQUEST：ルートハンドラにアクセスするたびに作成し、使い終わったらガベージコレクションで消す。
- TRANSIENT：クラスがDIされるたびに新たなインスタンスを生成する。
基本的にはシングルトン(DEFAULT)で一度作成したインスタンスをシステム全体で共有する方法で問題ないそうです。


# ペイロード
## 問題
色々書いてあるのですが、どういった場合に使うのか書いてないように感じました。

## 解決
端的にいうならルートハンドラ呼び出しの時に使える値オブジェクト。
DTOを作成し、ルートハンドラ呼び出し時のパラメータをDTOにキャストしてオブジェクトとして使用できるようにする。


# PipeとProviderの違い
## 問題
Pipeを使用する場合とProviderを使用する場合の両方でクラスに@Injectable()をつけてくださいと説明があり、
PipeとProviderの違いがわかりませんでした。

## 解決
@Injectable()はDIによってクラスのインスタンス化ができるという意味。
インスタンス化したクラスの使いかたがPipeとProviderの違い
- Pip：データの変換、バリデーション
- Provider：サービス、リポジトリなどの機能を提供する。


# middlewearとguard
## 問題
middlewearがなにする存在なのか、guardが何を守るのかわからなかった。
また、2つはクライアントとルーターの間に存在するのはわかるが、
前後関係についてはわからなかった。

## 解決
middlewearはルートハンドラにアクセスするときに特定の処理を実行する機能。
- リクエストログ
- ユーザー認証
- バリデーション
- エラーハンドリング

guardはmiddlewearのあとに存在する。
特定のルートへのアクセスを制御する。
リクエスト処理を実行すべきかどうかを決めます。



# インターセプター
## 問題
かっこいい名前だけど何する機能なんだろ。。。

## 解決
observableでした。
ルートハンドラにアクセスした前後に処理を実行します。
- レスポンスの変換
- ログ
- 非同期処理の管理


# 終わり
以上です。
疑問を解決するのにChatGPTがとても役立ちました。
リファレンスの説明が理解できないとき、言い換えてもらったり、
かみ砕いてもらったりすることで内容の理解に役立ちます。

学習が進んだらまた何かしら書きます。
TODOアプリ制作　app.tsxの設定

# `_app.tsx`の設定: Next.js と Material-UI の連携

## \_app.tsx とは

Next.js アプリケーションの`_app.tsx`ファイルは全ページ共通の設定をする場所です。デフォルトの`_app.tsx`ファイルは以下のようになっています。

```tsx
import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}
```

- `import '@/styles/globals.css'`<br>これはグローバル CSS ファイルをインポートしています。この CSS は全ページに適用されます。ただし、Material-UI を使用する場合は、Material-UI が持つ CSS-in-JS の解決策を使用しますので、この行は削除します。

- `import type { AppProps } from 'next/app'`<br>これは Next.js の`AppProps`という型をインポートしています。この型は`App`コンポーネントの引数の型として使用されます。`AppProps`には`Component`と`pageProps`の二つのプロパティが含まれており、それぞれ現在のページの実際のコンポーネントとそのプロパティを表しています。

- `export default function App({ Component, pageProps }: AppProps) { ... }`<br> これがメインの`App`コンポーネントです。全てのページはこの`App`コンポーネントを通じてレンダリングされます。`Component`と`pageProps`を引数として受け取り、`Component`をレンダリングします。`pageProps`は`Component`に渡されます。

それでは、上記のデフォルト設定を Material-UI と一緒に使えるように変更しましょう。以下のコードが変更後の`_app.tsx`です。

```tsx
import { AppProps } from "next/app";
import { CssBaseline } from "@mui/material";
import { ThemeProvider, createTheme } from "@mui/material/styles";

const theme = createTheme();

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;
```

- `import type { AppProps } from 'next/app'`<br>Next.js から`AppProps`型をインポートします。`import type`を使用することで、`AppProps`が型情報であることを明示的に示します。この型は`MyApp`コンポーネントの引数の型として使用されます。

- `import { CssBaseline } from '@mui/material'`<br> Material-UI の`CssBaseline`をインポートします。これはブラウザ間で一貫した見え方を提供するために、HTML の要素に対するデフォルトスタイルをリセットします。

- `import { ThemeProvider, createTheme } from '@mui/material/styles'`<br> Material-UI の`ThemeProvider`と`createTheme`をインポートします。`ThemeProvider`は Material-UI のテーマをコンポーネントのツリーに提供します。`createTheme`はデフォルトのテーマを作成する関数です。

- `const theme = createTheme()`<br>`createTheme`関数を呼び出してデフォルトのテーマを作成し、`theme`変数に保存します。

- `function MyApp({ Component, pageProps }: AppProps) { ... }`<br>メインの`MyApp`コンポーネントです。全てのページはこの`MyApp`コンポーネントを通じてレンダリングされます。

- `return ( ... )`<br> `MyApp`コンポーネントのレンダリング部分です。`ThemeProvider`を最外層として、`CssBaseline`と`Component`を子要素として持ちます。

これで、全てのページに Material-UI のテーマとスタイルリセット（`CssBaseline`）が適用されます。

## 感想
今日は_app.tsxファイルの設定を行いました<br>JAVAScriptやReactの知識がなく今何をしているかが全く分からない状態からのスタートだったのでchatGPTにひとつひとつ質問しながら進めていきました。<br>このファイルで何を設定しているか分かってよかったです。
環境設定②Next.js プロジェクトの初期設定

# ディレクトリ移動、パッケージインストール、起動

# 初めに
chatGPTに質問しながらどうにか一人でNext.jsの起動までできるようになりました
以下質問内容をchatGPTにQiita風の記事にしてまとめてもらった内容になります。

# 本文
開発環境を整備し、Next.js のプロジェクトを作成した後の手順について詳しく解説します。今回は、新しく作成したプロジェクトのディレクトリに移動し、必要なパッケージをインストール、そして Next.js の開発サーバーを起動します。

## 1. プロジェクトのディレクトリに移動

まずは作成した Next.js プロジェクトのディレクトリに移動しましょう。コマンドプロンプト（またはターミナル）を開き、以下のコマンドを実行します。

```bash
cd D:\Programming\TodoApp\todo-app
```

これで、新しく作成したプロジェクトのディレクトリに移動することができます。

## 2. 必要なパッケージのインストール

プロジェクトに必要なパッケージをインストールします。ここでは例として、Material-UI (MUI) と Axios をインストールします。

まず、MUI をインストールします。MUI は React の UI フレームワークで、多数の準備済みのコンポーネントを提供しています。以下のコマンドを実行して MUI とその依存パッケージをインストールします。

```bash
npm install @mui/material @emotion/react @emotion/styled
```

次に、Axios をインストールします。Axios は Promise ベースの HTTP クライアントで、ブラウザと node.js の両方で動作します。以下のコマンドを実行してインストールします。

```bash
npm install axios
```

これで、必要なパッケージのインストールは完了です。

## 3. Next.js の開発サーバーの起動

最後に、開発サーバーを起動しましょう。以下のコマンドを実行します。

```bash
npm run dev
```

このコマンドを実行すると、<http://localhost:3000> でアプリケーションが起動します。ブラウザでこの URL を開き、アプリケーションが正常に動作していることを確認しましょう。

これで、Next.js のプロジェクトの初期設定は完了です。お疲れ様でした！

---

以上、新しく作成した Next.js プロジェクトの初期設定について解説しました。これからの開発がスムーズに進むことを願っています！
開発環境の設定① Next.jsとTypeScript のプロジェクトを設定する

# 初めに
未経験でCSSとＨＴＭＬしか触ったことのない主婦が
chatGPTと二人三脚で頑張って環境設定をした覚書になります。

この記事では、Next.js と TypeScript を使用した新しいプロジェクトの設定方法を説明します。

## 事前準備

まずはじめに、Node.js と npm がインストールされていることを確認しましょう。インストールされているかどうかを確認するためには、以下のコマンドをターミナルで実行します：

```bash
node -v
npm -v
```

これらのコマンドはそれぞれ、Node.js と npm のバージョンを表示します。エラーメッセージが表示される場合、Node.js と npm をインストールする必要があります。

## プロジェクトの作成

プロジェクトの作成は、create-next-app コマンドを使用して行います。以下のコマンドをターミナルで実行します：

```bash
npx create-next-app@latest --typescript todo-app
```

これにより、Next.js と TypeScript の設定が行われた新しいプロジェクトが"todo-app"という名前で作成されます。

## 初期設定の質問

プロジェクトの作成中にいくつかの質問が表示されます。以下に、それぞれの質問と推奨される回答を示します：

- `Would you like to use ESLint with this project?`：Yes を選択します。ESLint はコードの品質を向上させるための静的解析ツールです。
- `Would you like to use Prettier with this project?`：Yes を選択します。Prettier はコードのフォーマットを自動的に整形してくれるツールです。
- `Would you like to install the types for React (DefinitelyTyped)?`：Yes を選択します。これにより React の型定義がインストールされ、TypeScript との互換性が向上します。
- `Would you like to use Tailwind CSS with this project?`：No を選択します。Tailwind CSS はユーティリティファーストの CSS フレームワークであり、今回は Material-UI を使用します。
- `Would you like to use `src/` directory with this project?`：Yes を選択します。これにより、ソースコードは`src/`ディレクトリに配置され、プロジェクトの構成が整理されます。
- `Use App Router (recommended)?`：Yes を選択します。Next.js のルーティング機能は、シングルページアプリケーションでも役立つ場合があります。
- `Would you like to customize the default import alias?`：No を選択します。必要に応じて後から設定を変更することが可能です。

設定が終了すると、必要な依存関係がインストールされ、新しい Next.js プロジェクトが作成されます。
TODOアプリを作ってみよう

# TODOアプリ開発記録

## はじめに

私は、３３歳の主婦で、エンジニアに転職することを目指しています。現在はSEの職業訓練校に通い、JAVAやPHPを学んでいます。<br>今回は、ポートフォリオとしてTODOアプリを作成をchatGPTに質問しながら作っていく過程をQiitaに記録していきたいと思います。

以下に、作業環境と作成するTODOアプリの内容をまとめます。

## 作業環境

- OS: Windows11
- エディタ: VSCode

## 作成するTODOアプリケーションの技術スタック

- クライアントサイド: Next.js + TypeScript + Material-UI
- サーバーサイド: .NET6 + WEB APIテンプレート
- データベース: PostgreSQL
- クラウドサーバー: Azure + AppService

## 作成するTODOアプリケーションの仕様

### クライアントサイド

- UIの処理のみを行い、永続化などはサーバーサイドで行う。
- 以下の切り替えが可能なこと:
  - 未完了のタスクのみ表示する機能
  - 完了済のタスクのみ表示する機能
  - 予定日が過ぎたタスクを強調表示する機能

### サーバーサイド（API）

- タスクを全件取得する機能
- 未完了タスクのみを取得する機能
- 完了済タスクのみを取得する機能
- タスクを追加する機能
  - 予定日を入力できること
  - 内容は100文字以内であること
- タスクを編集する機能
  - 完了時には完了日時を設定すること
  - 内容は100文字以内であること
- タスクを削除する機能

## その他

- Axiosを使用する。
- その他のライブラリなどは制限しない。

## 現在の作業進捗

まだ何も行っていません。

---

以下の内容はchatGPTに設計を作ってもらいました。<br>この順番で作っていきたいと思います。


## 1. 開発環境の設定

- `create-next-app`コマンドを使用して、新しいNext.jsプロジェクトを作成します。この際、`--typescript`オプションを使用してTypeScriptの設定も行います。
- プロジェクトディレクトリに移動します。
- 必要なパッケージ（Material-UI、Axios）をnpmを使用してインストールします。

## 2. アプリケーションの大枠作成

- `_app.tsx`と`_document.tsx`を作成し、アプリケーション全体で必要な設定（Material-UIの設定、グローバルスタイルなど）を行います。

## 3. コンポーネントの作成

- ヘッダーやフッター、サイドバーなどの主要なコンポーネントを作成します。
- メインコンテンツ領域を作成します。ここには未完了タスク一覧や完了タスク一覧などが表示されます。
- タスクを表示するコンポーネントを作成します。これにはタスクのステータス（未完了/完了）や期日の過ぎているかどうかを視覚的に表示する機能が含まれます。

## 4. API通信用の関数の作成

- Axiosを使用してAPIと通信するための関数を作成します。これらの関数はタスクの取得、追加、編集、削除を行います。

## 5. 状態管理の設定

- 必要に応じて、ReactのコンテクストAPIやReduxを使用して状態管理を設定します。これには現在表示されているタスクのリスト（未完了/完了）や選択されたタスクなどが含まれます。

## 6. UIの動的な変更

- UIの表示を現在の状態に応じて動的に変更します。例えば、特定のタスクを選択した場合には、そのタスクの詳細を表示するなどの機能を実装します。

## 7. テストの作成

- JestやReact Testing Libraryを使用して、各コンポーネントのユニットテストや統合テストを作成します。
conscript/giter8をWindowsにインストール

Scalaプロジェクトを配布できるようにプロジェクトをgiter8テンプレートで作る必要がある
最悪、conscripとgiter8はインストールされていなくても、テンプレートを作ってやれば、`sbt new`でプロジェクトを持ってこれるような気もするが、一応、インストールしたので、記録に残します。

# 環境
Windows 11

# インストール方法

## conscript
https://www.foundweekends.org/conscript/

ここをみて、Windows用のpowerShellスクリプトがあるので、ダウンロードして実行
powerShellの実行ポリシーの変更は[こちら](https://denno-sekai.com/windows-powershell-executionpolicy/#:~:text=Windows%20PowerShell%20%E3%81%A7%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%81%AE%E5%AE%9F%E8%A1%8C%E3%82%92%E8%A8%B1%E5%8F%AF%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%20Windows%20PowerShell%20%E3%81%A7%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%97%E3%82%88%E3%81%86%E3%81%A8%E3%81%99%E3%82%8B%E3%81%A8%E3%80%8C%E3%81%93%E3%81%AE%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%A7%E3%81%AF%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%81%AE%E5%AE%9F%E8%A1%8C%E3%81%8C%E7%84%A1%E5%8A%B9%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%81%9F%E3%82%81%E3%80%81%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%20%EF%BC%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%90%8D%EF%BC%89%20%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82,%E3%80%8D%E3%81%A8%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E7%99%BA%E7%94%9F%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%20%E3%81%93%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%97%E3%81%A6%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%82%92%E8%A7%A3%E8%AA%AC%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%20Windows%20PowerShell%20%E3%81%A7%E3%81%AF%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E8%A8%AD%E5%AE%9A%E3%81%A7%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%81%AE%E5%AE%9F%E8%A1%8C%E3%81%8C%E7%A6%81%E6%AD%A2%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82%20%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%80%81%E5%AE%9F%E8%A1%8C%E3%83%9D%E3%83%AA%E3%82%B7%E3%83%BC%20%28ExecutionPolicy%29%20%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%97%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%81%AE%E5%AE%9F%E8%A1%8C%E3%82%92%E8%A8%B1%E5%8F%AF%E3%81%99%E3%82%8B%E5%BF%85%E8%A6%81%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82)

## giter8
https://www.foundweekends.org/giter8/

ここを参照

# 使い方
`g8 <username>/<projectname>`でGitHubからテンプレートを取ってこれます。
<projectname>は末尾が`.g8`になっていること。
リポジトリに、テンプレートが作ってあると、それを`g8`コマンドで楽にとってこれるよ、って感じなのかな。

### ぼやき
テンプレートは作る必要があって、サンプルのテンプレートをダウンロードして、編集すればいい話かもしれないけれど、それはそれでscala versionの設定とか、ややこしそうなので、自力で作っていきますかね…

#### 追記
テンプレートの`src/main/g8`直下で`g8 scala3/scala.g8`とやって、
まぁ、フォルダをちょっといじってやると、いい感じにお手軽に、
最小限のScala 3プロジェクトのテンプレートが出来上がりました。
laravel ジョブの多重起動ロック

## 用語説明
### キューとは
キューは、ある処理を非同期で行うための仕組みです。
キューにジョブが溜まっていき、任意の順番に実行していきます。

### ジョブとは
ジョブは、非同期で行う「ある処理」の内容になります。


## cache_locks
cache_driverがdatabaseの場合、ジョブの多重起動ロックをかけた場合、cache_locksテーブルにジョブの情報が保持され、有効期限が切れるまでそのジョブは起動されなくなります。


## 多重起動ロック

```
public function middleware()
{
    return [new WithoutOverlapping($this->user->id)];
}
```

## 有効期限の設定
```
public function middleware()
{
    return [(new WithoutOverlapping($this->order->id))->expireAfter(180)];
}
```

## ジョブが重複した場合
再実行して欲しくない時は、dontRelease()を使用します。
重複したジョブを削除してくれます。

```
public function middleware()
{
    return [(new WithoutOverlapping($this->order->id))->dontRelease()];
}
```

「予期せず」ジョブが重複してしまった場合、データの整合性や引数の中身等がない状態でジョブが実行され、例外エラーが発生します。


参照:
https://readouble.com/laravel/8.x/ja/queues.html
コンポーネント設計とは

# コンポーネントとは
>コンポーネント（component）とは、部品や成分を意味する英単語であり、機械や電子機器、オーディオ機器など幅広い分野で使用されます。 IT分野においては、機器やソフトウェア、システムを構成する部品や要素のことを示します。

上記からIT分野においてはプログラムの部品に分ける設計の事をいうと考えられる。

デプロイ単位の事をいうこともあり、システムの一部としてデプロイできる最小限のまとまりを指す。

# コンポーネント指向とは
アプリケーションにおいてはプログラムを部品と捉え、それを組み合わせて開発する考え方の事という。
例えばインターフェース上のパーツは汎用的にすることを考えて、
名称、粒度、バリエーションを意識して他のページでも使いまわせるように設計する事をいう。

# コンポーネント図とは
クラスやオブジェクトの実装コンポーネントへの割り当てを表示したり、ソースコードや実行モジュールの間の依存関係を表現したりする。

# メリット
画面のデザインを統一することができる
コンポーネントごとに分割したコードを作成できる
* 一貫性
* 再利用性
* 拡張性
* 保守性

を高めることができる。

# デメリット
* 人によって粒度がバラバラになりがち
* こんなに細かく分割必要があるのか疑問が生まれてくる
* 何のためにしているのかわからなくなる場合がある

デメリットを防ぐためにルールを定めたり粒度・分割の認識を合わせておく必要がある。
また、デザイン観点よりも開発観点でも正解を優先する必要がある。

# 参考サイト
用語集
https://www.ntt.com/business/sdpf/glossary/011.html#:~:text=%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%EF%BC%88component%EF%BC%89%E3%81%A8%E3%81%AF%E3%80%81,%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E7%A4%BA%E3%81%97%E3%81%BE%E3%81%99%E3%80%82

コンポーネントに関する6つの原則
https://qiita.com/NagaokaKenichi/items/65c149ba92580fce5be2

【React/Vue.js】コンポーネント設計の（個人的）ベストプラクティス | Offers Tech Blog
https://zenn.dev/overflow_offers/articles/20220523-component-design-best-practice

コンポーネント設計との上手な付き合い方
https://jtk.hatenablog.com/entry/2022/09/15/000000
【自作関数】「スクロールするとフワッと表示する」が簡単に実現できるjavascript関数を作った

## はじめに
スクロールしていくと、ふわっと要素が登場するサイト、カッコよくないですか?
「いいなー」と思ったので、作ってみました。

## 構想
>cssをできるだけ書かずに、javascriptを理解していなくても設置できるように
 by ぼく

## 設置方法
### HTMLを用意する
まずはHTMLを用意してください。
サンプルということで、こんなものを想定します。
```html
  <div class="div1" style="height: 300px;">
    1
  </div>
  <div class="div2">
    2
  </div>
  <div class="div3">
    3
  </div>
```
ポイントは、**一番上の初めから表示しておく```div```は高さを指定しておくこと**です。

### CSSを用意する
お次はcss。
この時に、好きなクラス名をつけてもらいます。
```css
.好きなクラス名 {
  height: 600px;
  opacity: 0;
  transition: all 1s ease-out;
  background-color: red;
}

.好きなクラス名.nikoniko-on {
  opacity: 1;
  transition: all 1s ease-out;
}
```

### javascriptをコピペし、アレンジ
```javascript
const set_query = ".好きなクラス名"; // 着火css
const set_grace = 0; // 着火猶予

window.addEventListener('DOMContentLoaded', function(){
  let querys
  window.addEventListener('scroll', function(){
    querys = document.querySelectorAll(set_query)
    querys.forEach((element) => {
      if(element.getBoundingClientRect().top + window.pageYOffset < window.scrollY+set_grace+element.clientHeight){
        element.classList.add("skpr-on")
      }else{
        element.classList.remove("skpr-on")
      }
    })
  })
});
```

### HTMLを修正
最初から表示しておく要素以外全てに先程決定した`好きなクラス名`を入れます。

```html
  <div class="div1" style="height: 300px;">
    1
  </div>
  <div class="div2 好きなクラス名">
    2
  </div>
  <div class="div3 好きなクラス名">
    3
  </div>
```

## 完成!
![IMG_0403.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740290/ca285983-9f5c-0fc7-89f3-5ae36255d925.gif)
おめでとーございます^^
非同期処理とsetTimeoutについて

## 概要
非同期処理のメソッドである`setTimeout`を用いて、そのメソッドと非同期処理其の物について、まとめ、記述します。

## `setTimeout`について
JavaScriptの非同期処理の一つに`setTimeout`というメソッドがあります。このメソッドは、指定した時間が経過した後に指定した関数を非同期に実行します。
`第1引数に関数`、`第2引数に時間`をとります。

```javascript:
setTimeout(() => {
  console.log('hoge');
}, 1000);
```
この例では、1秒後（1000ミリ秒後）にconsole.log('hoge')が非同期に実行されます。

## `setTimeout`の戻り値とタイマーのキャンセル

`setTimeout`メソッドは、設定したタイマーのID番号を返します。このID番号を使って`clearTimeout`メソッドで特定のタイマーをキャンセルできます。

```javascript:
const timerId_A = setTimeout(() => {
  console.log('A hoge?');
}, 1000);

console.log('timerId_A = ' + timerId_A);

clearTimeout(timerId_A);
```
このコードでは、`setTimeout`で設定したタイマーがすぐにキャンセルされるため、タイマーに登録した関数は呼び出されません。

## 非同期処理の実行順序とイベントループ

JavaScriptの実行環境（ブラウザやNode.js）には「[イベントループ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Event_loop)」と呼ばれる仕組みがあります。このイベントループが非同期処理のスケジューリングと実行順序を管理しています。

同期処理は上から順次で実行されます。一方、非同期処理はイベントループを介して遅延実行されます。ここでの「遅延」とは時間的な遅れだけではなく、`全ての同期処理が完了するまで待つ`という意味も含んでいます。

```javascript:
console.log('A');

setTimeout(() => {
  console.log('B');
}, 0);

console.log('C');
```

上記のコードを実行すると、「A」、「C」、「B」の順番で出力されます。setTimeoutメソッドの遅延時間が0ミリ秒に設定されているにもかかわらず、「B」は最後に実行されます。これはなぜでしょうか。

これは、`setTimeout`に渡された関数（ここでは`console.log('B')`）が同期的に実行されるのではなく、非同期的に実行されるからです。この非同期処理はイベントループの「`タスクキュー`」に追加され、すべての同期処理が完了した後（すなわち、`console.log('C')`が実行された後）、イベントループによって処理されます。

非同期処理がタスクキューに追加されると、イベントループは現在実行中のタスクが完了するのを待ちます。すべてのタスクが完了したら（つまり、スタックが空になったら）、イベントループはキューから次のタスクを取り出し、そのタスクを実行します。これが非同期処理が他の同期処理が全て完了した後に実行される理由です。

## まとめ
JavaScriptの非同期処理は、長時間かかるタスクを待つ間に他のタスクを処理することが可能になります。JavaScriptは基本的に[シングルスレッド](https://wa3.i-3-i.info/word12454.html#:~:text=%E5%87%A6%E7%90%86%E3%81%AE%E9%96%8B%E5%A7%8B%E3%81%8B%E3%82%89%E7%B5%82%E4%BA%86%E3%81%BE%E3%81%A7%E7%B7%9A%E3%82%92%E5%BC%95%E3%81%84%E3%81%9F,%E6%9E%9D%E5%88%86%E3%81%8B%E3%82%8C%E3%81%97%E3%81%AA%E3%81%84%E5%87%A6%E7%90%86%E3%81%AE%E3%81%93%E3%81%A8%E3%80%82)であり、非同期処理がなければ長いタスクが終わるまで他のタスクが待たされることになります。しかし非同期処理により、待つ間に他のタスクを実行することができます。また、サーバからの応答待ちなど、一部の操作が完了するまで待機し、その後で特定の操作を実行する場合に特に有用です。

## 参考
- [非同期 JavaScript - ウェブ開発を学ぶ | MDN](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Asynchronous)
- [並行モデルとイベントループ - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Event_loop)
- [非同期処理:Promise/Async Function · JavaScript Primer #jsprimer](https://jsprimer.net/basic/async/)
- [シングルスレッドとは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/word12454.html#:~:text=%E5%87%A6%E7%90%86%E3%81%AE%E9%96%8B%E5%A7%8B%E3%81%8B%E3%82%89%E7%B5%82%E4%BA%86%E3%81%BE%E3%81%A7%E7%B7%9A%E3%82%92%E5%BC%95%E3%81%84%E3%81%9F,%E6%9E%9D%E5%88%86%E3%81%8B%E3%82%8C%E3%81%97%E3%81%AA%E3%81%84%E5%87%A6%E7%90%86%E3%81%AE%E3%81%93%E3%81%A8%E3%80%82)
インポートとモジュールについて

超初学者の僕が今のところ説明できるところまで習得した内容を備忘録的に記していきます。
内容がものすごく初歩的なものになりますが、もしご興味あれば見ていってください。

まずコーディングして行く際に１から書き上げて行くのはなかなかの時間もかかりますし、毎回同じことを繰り返して書かないといけないことになりますね。そんな時に役立つのがこのモジュールだと僕は思っています。ある種素材だと思うのですが、この素材をあらかじめコーディングして行くswiftファイルに取り込むこと（＝import)によってクラス継承などを行うことで活用できるものだと解釈しました。（フレームワークとは何が違うのでしょうか？？）

モジュールは、素材集めた1つの本のような感覚？
本が違えば（モジュールが違えば）内容も違う（素材も違う）
のような感じで中身まで勉強できていないが、もしかしたらモジュール内に表記は違えど同じ機能を有すものもあるかもしれないと思っている。


以上
簡単にまとめてみました。これから勉強したことのアウトプットとしてこのような記事を書いていこうと思う。
出会い系サイトジャンルOKのレンタルサーバー

2018年から継続し、出会い系メディア「週刊現実」を運営しています。
今回は、出会い系ジャンルを運営しても良いレンタルサーバーについて解説します。

多くのレンタルサーバーがありますが、出会い系ジャンルの運営OKなものは少ないです。
私は出会い系サイトがどのサーバーに載っているのかはわりと見てきた方だと思いますが、安定して使っている人が多いと言える国内サーバーは以下くらいでしょう。

・さくらサーバー
・FUTOKA
・mixhost
・ColorfulBox
・シン・レンタルサーバー

私は、上記のうち「FUTOKA」以外については、2025年現在も利用し続けています。
実際、私自身のブログ（メディア）である週刊現実には、2018年から2025年までmixhostを使っています。
https://affair.co.jp/genjitsu/

「さくらサーバー」「FUTOKA」は昔から有名なサーバーであるため、知っている人も多いでしょう。
ただし、「mixhost」「ColorfulBox」「シン・レンタルサーバー」は比較的新しく、コスパ的にもリーズナブルなため、知らなかったという方は使ってみてください。

mixhostは、エックスサーバー等の「ブロガー御用達」サーバーよりは高頻度で落ちている印象です。
ただし、本当に大きなエラーが出ていることはあまりなく、2025年現在はおすすめです。
【Rails】Railsでアプリを作る最初の流れ

・今回は、復習として、写真投稿アプリを作っていきたいと思います。
・Rubyのバージョンは3.2.2
・Railsのバージョンは7.0.5

```
$ rails new creature_app

$ cd creature_app

$ rails s
```
![スクリーンショット 2023-06-14 18.08.48（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348444/25e49954-2a73-7b39-a6d7-fb4157532eab.png)

・無事に作成することができました
poetryでscipyが入らなかった

# 問題
タイトル通り。以下Error文。
```
The current project's Python requirement (>=3.8,<4.0) is not compatible with some of the required packages Python requirement:
  - scipy requires Python <3.12,>=3.8, so it will not be satisfied for Python >=3.12,<4.0

Because no versions of scipy match >1.10.1,<2.0.0
 and scipy (1.10.1) requires Python <3.12,>=3.8, scipy is forbidden.
So, because cu2se depends on scipy (^1.10.1), version solving failed.

  • Check your dependencies Python requirement: The Python requirement can be specified via the `python` or `markers` properties

    For scipy, a possible solution would be to set the `python` property to ">=3.8,<3.12"
```
pyenvでpythonのversionを、poetryでpackage等を管理している。pyenvでpythonのverを3.8.6にしていたのでErrorとかみ合わない。poetryでも`python = "^3.8"`と設定していた。

# 解決方法
[ここ](https://stackoverflow.com/questions/73347870/poetry-fails-to-install-scipy-manjaro-linux-python-3-10-5)に書いてあった。
pyproject.tomlの中のpythonのverのところで`^3.10`とすると`>=3.10,<4.0`となるかららしい。`^3.8`も似たような感じなのかもしれない。pyproject.tomlのpythonのところを
```
python = "<3.12,>=3.8"
```
と書き換えて解決。
ITパスポートを受けてみた

# はじめに
過去の投稿を読んだ方ならなんで今さらITパスポート？と思うかもしれません。
単純に会社で取得が推奨されたからです。推奨資格なのに持ってないの？と言われたくないので取得しました。

# 感想
先に所感を書いておきますと、合格ラインへの到達はある程度IT分野で経験があれば容易と思います。ただし、高得点を目指すのは少し難しいかもしれません。
また、IT分野での経験がない人や学生にとっては、ストラテジ、マネジメント、テクノロジのいずれかの分野で苦戦することになるかもしれません。

# ITパスポートについて

詳細については公式サイトに記載があります。ここでは重要なポイントだけ抜粋します。

https://www3.jitec.ipa.go.jp/JitesCbt/index.html

試験は120分で100問の4択問題を解きます。
細かい点は以下の試験要綱に記載されています。

https://www.ipa.go.jp/shiken/syllabus/ps6vr7000000i0p0-att/youkou_ver5_0.pdf

重要な点として、以下の記載があるとおり、ストラテジ、マネジメント、テクノロジの３分野のうち、テクノロジ系の出題が多く、マネジメント系の出題が少なくなっています。

>出題数 100 問のうち，総合評価は 92問で行い，残りの 8問は今後出題する問題を評価するために使われ
る。また，分野別評価の問題数は，ストラテジ系32問，マネジメント系18問，テクノロジ系42問とする。
（試験要綱より引用）

合格基準は、ストラテジ、マネジメント、テクノロジの３分野すべてで1000点満点のうち、300点以上が必要です。かつ、総合評価点が1000点満点のうち600点以上が必要です。
なお点数は項目応答理論に基づいて採点されるため、問題によって配点が異なります。概ね難易度に比例して高配点になっているはずです。

つまり、マネジメントの問題は18問しかなく、これらを間違えすぎると、合格ラインの300点を下回るおそれがあります。ITパスポート自体は簡単な試験であり、IT分野での実務経験がある程度あればほぼ問題ありませんが、学生や新社会人の方には少し難しいかもしれません。
また、ITエンジニアとして働いていない人にとってはテクノロジ系問題を落としすぎると、総合点で600点を上回れないかもしれません。

# 試験対策
ITエンジニアとして働いている方はノー勉でいけると思いますが、万全を期したい方は過去問が公開されていますので、そちらで雰囲気を掴むと良いと思います。おそらく過去問で各分野6割取れていれば問題ないものと思います。ただし、テクノロジ系の正解数が少ない場合は、総合点で600点を下回るおそれがありますので注意してください。

https://www3.jitec.ipa.go.jp/JitesCbt/html/openinfo/questions.html



# 試験結果
以下のスクリーンショットのとおりです。
ストラテジの問題は私にはやや難しく感じました。マネジメントの問題は正直もう少し取れたかなと思います。
テクノロジ系の問題はほぼ問題ありませんでした。

![スクリーンショット 2023-06-14 21.24.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549537/9b6e1f39-1b16-69d7-de68-c6a879568c4f.png)
PythonでちょっとChatGPT APIを使いたい時にちょうどいいclassを作った

　まだChatGPT APIを使っていろいろ試してるんですが、そろそろAPI呼び出し部分をちゃんとclassでまとめるかと思って作ったコードをChatGPTにコードレビューさせて以下の形になりました。

　なお、このClassは単発の会話用なので、会話のラリーをしたい場合は適切に会話履歴を保存するようにして下さい。（そのメソッドも作ろうとしたけど、面倒くさくなって辞めちゃった。）


## ソースコード

```secret.json
{
    "OPENAI_API_KEY": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
}
```


```chatgpt_text_gen.py
# ChatGPT APIを呼び出してテキストを生成するプログラム
import json
import openai
from typing import Optional

# ChatGPT APIを呼び出してテキストを生成するクラス
class ChatGPT:
    # 初期化時にはAPIキーをJSONファイルから読み込む
    def __init__(self, secret_file: str = "secret.json") -> None:
        # JSONファイルからAPIキーを読み込む
        try:
            with open(secret_file) as f:
                secrets = json.load(f)
                openai.api_key: str = secrets.get("OPENAI_API_KEY")
        except Exception as e:
            print(f"Error loading API key: {e}")
            return
        # 使用するモデルを指定
        self.model = "gpt-3.5-turbo"

    # プロンプトからテキストを生成
    def generate_text(
            self, 
            prompt: str, 
            max_tokens: Optional[int] = 100
            ) -> str:
        # messagesを作成
        messages = [{"role": "user", "content": prompt}]
        # OpenAI APIを呼び出してテキストを生成
        try:
            response = openai.ChatCompletion.create(
                model=self.model, 
                messages=messages, 
                max_tokens=max_tokens)
            return response.choices[0].message.content
        except Exception as e:
            print(f"Error generating text: {e}")
            return ""
        
    # ファイルから固定部分のプロンプトを読み込み、追加のテキストと結合してテキストを生成
    def generate_from_file(
            self, 
            filepath: str, 
            additional_text: str, 
            max_tokens: Optional[int] = 100
            ) -> str:
        # ファイルからプロンプトを読み込む
        try:
            with open(filepath, 'r', encoding="utf-8") as f:
                file_prompt = f.read()
        except Exception as e:
            print(f"Error loading file: {e}")
            return ""
        # ファイルの内容と追加のテキストを結合
        full_prompt = file_prompt + additional_text
        # 結合したプロンプトを使ってテキストを生成
        return self.generate_text(full_prompt, max_tokens)
```

　私はAPIキーはsecret.jsonで保存する派なので、環境変数から読み込む派の人はその辺書き換えてください。（環境変数から読み込む方がセキュリティ的に良いです。）

## 使い方

　入力文章をそのままChatGPT APIに送る場合はgenerate_textメソッドを使う。

```python
from chatgpt_text_gen import ChatGPT

chat_gpt = ChatGPT()
print(chat_gpt.generate_text("AIについて30文字以内で説明して下さい"))
```

```実行結果
AIは人工知能のことで、機械が自ら学習や判断を行い人間に代わってタスクを遂行する技術の総称です。
```

　ChatGPT APIの役割が決まっている場合は読み込むファイルに役割を書いてgenerate_from_fileメソッドを使う。

```prompt.txt
次の文章を日本語訳してください：
```

```python
from chatgpt_text_gen import ChatGPT

chat_gpt = ChatGPT()
additional_text = "Hello, how are you?"
print(chat_gpt.generate_from_file('prompt.txt', additional_text))
```

```実行結果
こんにちは、お元気ですか？
```

　近々このclassを使って作ったクソアプリの記事を書きます。
[Next.js] TypeScriptだけを使ってNext.jsの中でp5.jsを動かしてみる

Next.jsの中でp5.jsを動かすとなると、最初に気になるところは二つでした：

- Next.jsの主な機能の一つであるSSG（サーバー側生成）の中ではp5.jsは動かせません
- Next.jsは今だとデフォルトがTypeScriptだけど、p5.jsはデフォルトでJavaScriptです

この二つが本題になりますが、よくみる組み合わせでもないと思いますのでNext.jsとp5.jsを軽く紹介したいと思います。

### [Next.js](https://nextjs.org/)を軽く紹介

Reactベースのフルスタックウェブ ウェブ フレームワーク（注：Reactだけだとフレームワークにはなりません）。サーバー側で動かせるAPI Routesや静的ページ生成などの機能は実装されています。

### [p5.js](https://p5js.org/)を軽く紹介

ProcessingのJavaScriptバージョンの一つ。電子アートとビジュアルデザインのために開発されたライブラリです。

## どういうのができるの？

まずは全体図が伝わったらフォローしやすいと思いますので、ここでまとめてみます。

- p5.jsを使うときに定義する`setup`関数、`draw`関数をTypeScriptで書く
- Next.jsでp5.jsが（ブラウザのみで）使えるモジュールを読み込む
- React上でp5.jsが動く`<Sketch>`コンポーネントに`setup`と`draw`をパス
- Next.js上でp5.jsのcanvasが表示される（しかもコードがスッキリしている！）

この流れで多分直面するややこしい2箇所をこれから解説していきます。

## react-p5をTypeScriptで読み込む

npmにp5というパッケージもありますが、Next.jsがReactベースですので[react-p5](https://github.com/Gherciu/react-p5)の方が便利かと思います。それでも、Next.jsのページはサーバー側でも生成されるので、p5.jsが必要とする`window`オブジェクトが存在しないハードルに遭ってしまうかもしれません。

`react-p5`のドキュメントにJavaScriptでの動的インポートのやり方が載っていますが、TypeScriptで使えるインポートをここで共有します。

```ts
import dynamic from 'next/dynamic'

// `dynamic`に渡す関数をあらかじめ定義する
const importFunction = () => import('react-p5').then((mod) => mod.default)

// とりあえずSketchが存在するように
let Sketch: any = null

// `window`が存在する場合はp5が使えます
// さらにインポート時にSSR（サーバーサイドレンダリング）をfalseにすることで
// インポートされたSketchがクライアント側でのみ使うことを宣言
if (typeof window !== 'undefined') {
  Sketch = dynamic(importFunction, { ssr: false })
}
```

こうインポートすると、`<Sketch>`コンポーネントが生Reactの時とほぼ同様に使えるようになります。

```tsx
{typeof window !== 'undefined' && (
  <Sketch setup={setup} draw={draw} />
)}
```

## TypeScriptでp5.jsを書く

実はNext.jsをTypeScriptで使っていても、p5.jsの部分だけをJavaScriptで別ファイルに書いてNext.jsから読み込むことも可能ですが、ここではあえてTypeScriptでの使い方を共有したいと思います。

1. `pages`ディレクトリと同じレベルの`p5js`などというフォルダーにp5.jsのコードが入る`sketch.ts`などを置く（任意）
2. `sketch.ts`でp5Typesをインポート  
    ```ts
    import p5Types from 'p5'
    ```
3. `sketch.ts`で定義された関数などを`<Sketch>`コンポーネントを返すtsxファイルでインポートする  
    ```tsx
    // Module Path Aliasesを利用する設定ですが`sketch.ts`の相対パスなどでOKです
    import { setup, draw } from '@/p5js/sketch'
    ```

p5.jsとなると`setup`関数が必須で、canvasを初期化する内容が期待されます。`draw`関数はフレームごと呼び出される関数になります。

```ts
const setup = (sketch: p5Types) => {
  sketch.createCanvas(640, 480)
}

const draw = (sketch: p5Types) => {
  sketch.background('#ffffff')
}
```

また、TypeScriptだからではなくてネームスペースの関係で[p5.jsのインスタンスモード](https://github.com/processing/p5.js/wiki/Global-and-instance-mode)を使うことになるため、p5.jsが提供する全ての関数・定数の前に`sketch.`が付きます。

## 最後に

Next.jsとp5.jsは相性がいいと思いました。Next.jsでベクターグラフィック、文字などを動かしたい場合はp5.jsもあると思い出したいと思います。

また、p5.jsでできた作品などを公開するときもNext.jsがおすすめです。

ここで説明していることの他に、現代的なウェブ コンポーネントではどうやって`<canvas>`要素の位置や大きさを制御すればいいかなど、謎が残っているかもしれません。用意した[サンプルリポジトリ](https://github.com/alecrem/nextjs-p5js-tutorial)をご参照いただければと思います。スター・フォーク・PR大歓迎です！

また、ご不明点などありましたらコメントやツイッターでご連絡いただければ嬉しいです。
Apple Event🍎を使って英語を勉強するときに気をつけていること

# 前提

僕はApple の発表会を使って英語のシャドーイング練習をしている。
海外で働きたいのと、内容への興味、学習のコストパフォーマンスがいいのが主な理由。


（欧米の友達曰く、Apple の発表会は、ネイティブが聞いたらロボットみたいな話し方でおかしいよ😱って。だから、他のコンテンツと組み合わせながら試行錯誤して練習している。）

# コツ（本文）


1. YouTubeを10秒スキップから5秒スキップに設定変更（アプリ内の設定欄からできる）
1. シャドーイングする。
1. 詰まったら巻き戻す。

さらに、
* 話し方自体も真似る

最初は辛かったけど、だんだん慣れてきた。とはいえ、未だに、Googleのイベントの方は聞き取りが難しい。次はそっちのチャレンジに移行する。

# 後書き
早く海外で働くぞ！
他にもコツを見つけたら、追記していきます。
JavaScriptの基本的な文法

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/cbf48d5f-e60d-1739-9d45-c7c8fab10f71.png)
１：constは、
　後から書き換えることができない変数を定義する書き方です。constの特徴として、再代入、再定義ともに不可という制約があります。

２：letは、
　後で書き換えることができる変数を定義する書き方です。letの特徴として、再代入は可能ですが、再定義は不可という制約があります。

３：letとconstの違いについて、
①letは再代入する予定のある変数を定義する際に使用する
②constは再定義する予定のない変数を定義する際に使用する
【VSCode】Prettierを効かせつつterraformも自動整形したい

# これは何？
VSCodeで、ファイル保存時はPrettierを走らせて自動整形したい開発者が多いと思います。
一方、terraform（`.tf`）でも保存時にterraform fmtしてほしい、、そんな時の対処法を書き留めときます。

# いきなり答え

`settings.json` に下記を追記すれば解決です。

```settings.json
  "[terraform]": {
    "editor.defaultFormatter": "hashicorp.terraform",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.formatAll.terraform": true
    }
  },
  "[terraform-vars]": {
    "editor.defaultFormatter": "hashicorp.terraform",
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.formatAll.terraform": true
    }
  }
```

# 何を解決したのか

単純にterraformだけ自動整形したければ、

- [terraformの拡張機能](https://marketplace.visualstudio.com/items?itemName=hashicorp.terraform)をインストール
- VSCodeの設定からformatOnSaveをチェック
- Default FormatterをHashicorp Terraformに設定

でOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577028/f654268b-6062-ae0e-c415-96022ba415a0.png)

ただこれだとdefaultFormatterが Prettier じゃないので、terraform以外の開発する時にいちいちDefaultFormatterをPrettierに戻さないといけず、超面倒です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577028/39d78364-2091-3ec6-dc09-00afd8083f26.png)

そこで冒頭の設定を追記すれば、デフォルトをPrettierに維持しつつ、terraformもファイル保存時に自動整形することができ、いい感じに自動整形を効かせられるようになりました。
これでまた一つ幸せになりました。

# 参考
- https://marketplace.visualstudio.com/items?itemName=HashiCorp.terraform
- https://github.com/hashicorp/vscode-terraform/issues/1145
notionと本気で向き合ってみた

# はじめに

最近ドキュメントを [Notion](https://www.notion.so/product) で管理する人たちも多い今日この頃
弊社でもドキュメント管理はNotionを使っているところが多いのですが、
意外と何も考えず使ってるーみたいな感じでした。

今回、管理しているNotionのドキュメントを整理する機会があって
「どうせ整理するなら、本気で向き合ってみよう！」
ということでNotionについて色々試行錯誤したのでそれのアウトプット。

# その1: いろんな人のnotionをたくさん調べる
まずは他のNotionユーザーさんがどんな使い方をしているのか調べてみました。
そして意外とそういう記事？あんまりなく記事探しから悪戦苦闘.....
そこである記事に「日本国外のユーザーの使い方がめっちゃオシャレ！Pinterestで画像検索すると良いよ！」というのを見つけて早速検索。
私は「[https://www.pinterest.jp/search/pins/?q=notion%20aesthetic&rs=typed](https://www.pinterest.jp/search/pins/?q=notion%20aesthetic&rs=typed)」で検索しました。
え、めちゃオシャレ。サイトじゃん....。
とりあえず片っ端から気に入ったやつを保存&スクショしました。

# その2: コンテンツの区切りを明確にする
その1での検索結果で思ったことが、普通にデザインセンスがあることと、コンテンツ間の区切りをしっかり見出しや区切り線を使って表現していることがわかりました。
ただ、Notionの区切り線は灰色の細い線一色だけなのでちょっとしょぼい....
なので、区切り線は画像を作って取り入れてみました！
フリー素材で結構いい感じの転がってるのでこれもめっちゃ検索すると良いかも。

# その2: ビュー表示を用途に分けて使い分ける
今回特に「[ギャラリービュー](https://www.notion.so/ja-jp/help/galleries)」を有効活用してみることにしました。
「テーブルビュー」や「リストビュー」のように文字だけのページよりも
ある程度画像があると華やかというかそれだけで見た目がグッと上がった気がします。
そしてギャラリービューのいいところは画像を準備しなくても、「カバー画像を変更」の「Unsplash」を使うとその場で良さげな画像を見つけることができることですね。便利ですねー。
![スクリーンショット 2023-06-14 20.53.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039645/c50ce479-4acb-55e4-617a-d7872b24508b.png)

# その3: 各チームで共通の情報についてはDBを１元管理する
今回はMTGの議事録や予定のカレンダーがこれに当たりました。
「各チームでも必要だけど、基本的な要素は各チーム共通」みたいなデータはDBを共通化して、各チームのページには同期できるような仕組みにするのが機能的に使いやすいかなと個人的には思いました。
具体的には、大元のDBのリンクをコピーして、各チームのページで貼り付けした時に「データベースのリンクドビューを作成する」を行うと、各チームで変更した内容が大元のDBにも反映される。逆も然り。どっから更新しても情報が更新できるのはだいぶメリットでした。
![スクリーンショット 2023-06-14 20.59.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039645/6385fb81-3472-2ae7-3fcd-8359315d8b60.png)

# その4: 色合いをある程度統一する
もはやデザインの話なのですが、やっぱり色がバラバラよりも統一感あった方がある程度おしゃれだったりかっこよさが出るなと思いました。システムやサイトだけではなくNotionも色を意識するとそれだけでだいぶ違いが出る。

# Before／After
その1~その4を踏まえてのBefore・Afterはこんな感じ

## Before
![旧 - Notionページ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039645/ed3e7142-c704-c667-472e-59fb4af1a6d8.png)

## After
![新 - Notionページ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039645/cfdaf93c-f6d2-bf5b-a798-0b3b5c452a5f.png)

個人的には結構頑張って、ちょっとおしゃんな感じにできた!
メンバーからも割と好評でした:blush:

# さいごに
Notion適当に使いがちだったけど本気で向き合うと可能性は無限大!!!
下手したら一個のサービスとして使えちゃいそう....
これからも日々勉強していきます!
Coreserver にて No route to host でVSCode 接続できない。

フリーwifi から、テザリングに変えたら治った。

暗号化の弱い wifi だとSSH がブロックされるっぽい。たとえば

* 病院のwifi
* よく見るフリーwifi（名前忘れたけど）

でなる。こういう時は大抵、LINE電話もできなくなる。
BigInt と Number の速度差

# これは何？

JavaScript で使えるようになった多倍長整数。
計算の速さがどうなのか知りたいので調べてみた。

というわけで、今日も楽しいマイクロベンチマーク。

# 計算内容

足し算、掛け算、割り算、ビット計算、なんかを交えてこんな感じ。

```javascript:JavaScript
const bi=(a0,b0)=>{
    const a = BigInt(a0);
    const b = BigInt(b0);
    let n=0n;
    for( let i=0n ; i<10000000n ; ++i ){
        n += a;
        n <<= 2n;
        n *= b;
        n /= 3n;
        n &= 0x1fffffffn;
        n >>= 1n;
    }
    return n;
};

const nu=(a,b)=>{
    let n=0;
    for( let i=0 ; i<10000000 ; ++i ){
        n += a;
        n <<= 2;
        n *= b;
        n /= 3;
        n &= 0x1fffffff;
        n >>= 1;
    }
    return n;
};

const measure = (name, x)=>{
    const t0 = performance.now();
    const v = x(5683,1237);
    const t1 = performance.now();
    console.log(name, v, t1-t0);
};

measure("bigint", bi);
measure("number", nu);
measure("bigint", bi);
measure("number", nu);
measure("bigint", bi);
measure("number", nu);
```

# 実行結果

手元は MacOS Ventura 13.4 / Apple M1 Pro 非MAX

掲載は最後の 1回ずつ。

## node

node v20.3.0。

```
bigint 28771428n 502.7227920293808
number 28771428 135.35170805454254
```

## Chrome

バージョン: 114.0.5735.133（Official Build） （arm64）

```
bigint 28771428n 459.8999999985099
number 28771428 135.5
```

## Edge

バージョン 113.0.1774.57 (公式ビルド) (arm64)

```
bigint 28771428n 439.30000000447035
number 28771428 139.60000000149012
```

## Firefox

114.0.1 (64 ビット)

```
bigint 28771428n 253
number 28771428 136
```

## Safari

バージョン16.5 (18615.2.9.11.4)

```
bigint – 28771428n – 2328
number – 28771428 – 162.00000000000182
```

# まとめ

差が小さい Firefox でも倍ぐらい Number が速い。
V8 陣営（Node, Chrome, Edge）は 3倍ちょっと Number が速い。
Safari では 10倍以上 Number が速い と大きく差がついた。

この計算内容で、Number より BigInt が速い理由は思いつかないので、単に計算時間を短くする努力をたくさんやっているかどうかの違いだと思う。

まあ思うだけだけど。
Dockerfileのベースイメージタグは OS名まで書いた方が安全

# 背景

- AWS ECS内で Node.js v18 イメージを使ってマルチステージビルドしていた時の話
- 執筆時点(2023年6月14日)の2日前くらいから急にCodeBuildでエラーが出るようになった

# ディレクトリ構成

`app/`以下にNext.jsのプロジェクトがあるものとする

# 当たった問題

```Dockerfile
FROM node:18 AS builder

ENV NODE_ENV=development

WORKDIR /app
COPY app/package.json ./
COPY app/package-lock.json ./
COPY app/.npmrc ./
RUN npm ci --ignore-scripts 
COPY ./app .
RUN npm run build

FROM node:18-bullseye-slim AS runner
ENV NODE_ENV=production

WORKDIR /app
COPY --frombuilder /app ./app
RUN npm ci --ignore-scripts

COPY --from=builder /admin/next.config.js ./
COPY --from=builder /admin/.next ./.next
COPY --from=builder /admin/public ./public

CMD ["npm", "run" ,"start"]
```

としていたら`Node:18`の最初の

```dockerfile
RUN npm ci --ignore-scripts 
```
にてエラーが出ていた

```ｓｈ
...

#10 [builder 3/9] RUN npm install
#10       digest: sha256:fe6d1ed129e1d452011555e9d8762518d3b697ae55d830ac079ecc89bb05e25c
#10         name: "[builder 3/9] RUN npm install"
#10      started: 2023-06-14 11:07:30.816373024 +0000 UTC
#10 0.270 node[8]: ../src/node_platform.cc:68:std::unique_ptr<long unsigned int> node::WorkerThreadsTaskRunner::DelayedTaskScheduler::Start(): Assertion `(0) == (uv_thread_create(t.get(), start_thread, this))' failed.
#10 0.270  1: 0xb7a940 node::Abort() [node]
#10 0.271  2: 0xb7a9be  [node]
#10 0.271  3: 0xbe98be  [node]
#10 0.272  4: 0xbe99a1 node::NodePlatform::NodePlatform(int, v8::TracingController*, v8::PageAllocator*) [node]
#10 0.272  5: 0xb38f5b node::InitializeOncePerProcess(std::vector<std::__cxx11::basic_string<char, std::char_traits<char>, std::allocator<char> >, std::allocator<std::__cxx11::basic_string<char, std::char_traits<char>, std::allocator<char> > > > const&, node::ProcessFlags::Flags) [node]
#10 0.273  6: 0xb395ab node::Start(int, char**) [node]
#10 0.273  7: 0x7fd516a4918a  [/lib/x86_64-linux-gnu/libc.so.6]
#10 0.273  8: 0x7fd516a49245 __libc_start_main [/lib/x86_64-linux-gnu/libc.so.6]
#10 0.273  9: 0xabbdee _start [node]
#10 0.276 Aborted (core dumped)
#10    completed: 2023-06-14 11:07:31.182967785 +0000 UTC
#10     duration: 366.594761ms
#10        error: "executor failed running [/bin/sh -c npm install]: exit code: 134"

executor failed running [/bin/sh -c npm install]: exit code: 134

...
```

# 原因

DockerHubを見に行くと、ベースイメージとして使っていた`Node:18`のベースOSが Debian12(Bookworm)に変更されていた。

https://hub.docker.com/_/node/

念の為、Node.jsの公式イメージも見に行ったが、記事執筆時点で3日前に　Debian12 Bookwormベースのものが公開されていた。
https://github.com/nodejs/docker-node/commits/main/18/bookworm

# 解決方法

builder のDockerfileのベースイメージのタグはOSを明示的に指定する
```
FROM node:18-bullseye AS builder
```

# 結果

無事デプロイできました🎉
UE4で時々起こるクラッシュの個人的な記録

# エディタのクラッシュに関して、色々記録してみました。

## この記事のまとめ
・グラボのドライバーはGameReadyドライバーじゃなくてStudioドライバーの方が良さそう。クラッシュの頻度が下がったように見える。
・HDDからSSDに変えても多分クラッシュの発生度にあまり変化はないかも。

## （余談？）BluePrintが原因によるパッケージ後のクラッシュ。

事象：
UE4.26.2

なぜか、関数内で入力のfloat変数Aをドラッグして出力に繋いだら名前が全く同じ変数Aが「同じ変数名で」現れた。
関数は純粋関数でy=(-x)+1するだけのもの。
エディタ上ではエラーが発生しなかったが、パッケージ後に「fetal error」が発生。
ログを見ても、書いてあるのか書いてないのか不明だった。
十中八九エンジンのバグではないだろうか。というか、エンジン自体もちょくちょくクラッシュしているので、報告した方がいいのか不明、もう報告が面倒になってくる。

BPだから安全とは言えないと思った。

## 追記：23/07/15

BPのクラッシュではないが、エンジンのクラッシュに関しては、
4.26でHDDの該当のプロジェクトを4.27にアップグレードして、SSDに移したら、
~~今まであったクラッシュがなくなった。~~ （後述）今のところ。

```CrashContext.runtime-xml
Unhandled Exception: EXCEPTION_ACCESS_VIOLATION reading address
```

このタイプのクラッシュが頻発していたが（クラッシュした後、再度開くとクラッシュしていた処理が問題なく処理できる）、SSDに変えたからなのか、4.27に変えたのが良かったのか、どちらかは現在不明。4.26のプロジェクトを近々SSDに移してみて実験する予定ではある。
BPのコンパイルボタンを押すと参照の多いものはクラッシュする傾向があったが、
該当のプロジェクトでは今のところ発生していない。
4.27の該当のプロジェクトではBPのコンパイルボタンを押すと、やや硬直した後、処理が無事完了する。
メモリやグラボを疑っていたので、問題を絞りこめた気がするので、良かったです。
~~本当に作業効率に影響して、ストレスフリーになった気がします。今のところ。~~
~~クラッシュに悩まれている方は試してみるのもありかもです。~~

## 追記：23/07/16

クラッシュの回数は減ったかもしれないが、依然として発生するときがある。
構造体を編集して、コンパイルした時は特に。
実際、バージョンが上がるたびにクラッシュの頻度は減っている気はする。

## 追記：23/09/03
NVIDIAのグラボのドライバーが2種類あるのを知りました。
StudioとGameReadyで、後者を使っていました。
クラッシュが減るといいなぁ。

## 追記：23/09/09
Studioドライバーに変更したらパフォーマンスは落ちた気がするが、
クラッシュは減っていると思う。
構造体を修正した時、一度クラッシュしたが、今のところ平時では起きていない。

## 追記：23/11/19
ドライバーを変えてから、かなり安定して動いていた。
GameReadyドライバーの時はビビりながら作っていたが、それがなくなった。
時々理不尽なクラッシュが起きるが体感として稀にしか起きない。
ご挨拶 - Scala職人となる決心

# はじめに

以前、Qiitaをやっていましたが、
記事の不適切さを指摘されて不機嫌になってやめてしまった者です。

あれから、少しばかり時が経ちましたが、
まぁ1年も経っていないでしょう。

まだ開発記事を書くほどでもないので、
自己紹介と環境の説明を。

この記事を書いている時点で
腕のない30代の一応プログラマです。

これまで、少なかったり、少ししか触っていなかったりしますが、いろいろと触ってきたのですが、
この度、一大決心をしまして、
仕事はともかく、プライベートで書くコードは
ほぼすべて、Scalaで書こうと思ったのでした。
おそらく、例外は、htmlとcssぐらいだと思っています。

人生をscalaで通そうと。

まぁ、それで、普段検索しながら、scalaの記事がなんだか古くなっているな、
と思ったので、scalaのこれからをけん引できるよう、自分の記事が少しでも役に立ったらな、と思って、Qiitaを再開しました。

# 環境
開発の環境は以下の通りです。
足らない情報があるかも。教えてください。

OS: Windows 11
Java: Open JDK 17.0.7
Scala: 3.2.1
sbt: 1.8.2
WSL2: Ubuntu 22.04.2 LTS

# これから作りたいもの
とりあえず、Webアプリケーション、それと連携するモバイルアプリ(Android, iOSもできたら)、言語処理系
を考えています。スパンとしては30年ぐらいかかっていいかな、と思っています。
わかりづらいですが、作りたいものは、大きく2つで、
・Webアプリケーションとそれと連携したモバイルアプリ
・言語処理系
です。


# おわりに
いたらない人間なので、文章とかロジックはめちゃくちゃだったりすると思いますが、コメントで指摘などいただけるとありがたいです。

挫折しないように続けていきたいと思います。

# 今後の予定
とりあえずは、Scala 3を使ったWebアプリケーションの作成を取り組んでいきたいと思います。

まだあれこれ迷って何も始まっていないので、ちゃんと成果が出たら、また記事にして報告しようと思います。

ありがとうございました。
VBA WebBrowserで画像サイズ調整

いまさら、VBA WebBrowserですが、画像表示する際に自動サイズ調整する方法が、なかなか見つからなかったので、メモ書き

~~~
Private Sub CommandButton1_Click()

img = "画像のアドレス"

WebBrowser1.Navigate img

End Sub
~~~

これと別に、下記のルーチンを追加しおくと、WebBrowser1内の画像サイズが自動調整される

~~~
Private Sub WebBrowser1_DocumentComplete(ByVal pDisp As Object, URL As Variant)
'画像サイズ調整

Dim a As Double
Dim b As Double

With WebBrowser1.Document.body.Style
    .BorderStyle = "none"
    .margin = "0px"
    .overflow = "hidden"
    .Background = "buttonface"
End With

a = WebBrowser1.Document.body.ClientHeight / WebBrowser1.Document.Images(0).Height
b = WebBrowser1.Document.body.ClientWidth / WebBrowser1.Document.Images(0).Width

If a < b Then
    WebBrowser1.Document.Images(0).runtimeStyle.Zoom = a
Else
    WebBrowser1.Document.Images(0).runtimeStyle.Zoom = b
End If

End Sub

~~~
OracleからPostgreSQLへマイグレーション　雑感

## OracleからPostgreSQLへマイグレーション

Oracleのライセンス形態が変わり、使い勝手がよくなくなっているようで、OracleからPostgreSQLへの切り替えの話が時々出る。
弊社でも、Delphiプログラムのマイグレーションついで、データベースのOracleからPostgreSQLへのマイグレーションを数件やらせていただいた実績がある。

## マイグレーション注意点

マイグレーションに際しては、SQL文の変更が必要になってくる。

外部結合演算子(+) の変更や、オラクル固有の関数などの対応です。
オラクル関数について、よく使われている(弊社実績)関数、nvl(), decode() については、PostgreSQLのfunction()を使うことで何とかなりそうだが
厄介なのは、外部結合演算子。**** OUTER JOIN に書き換えないといけない。意外とめんどい。
ある程度、クエリを理解して書き換えるような部分も出てくる。それなりに工数もかかる。


## C＃のデータベースマイグレーション

最近、C#でのOracleからPostgreSQLへのマイグレーションの話をいただきソースを借用いただき調査したのだが、
外部結合演算子(+)が思っていた以上に多い。
依頼いただいたプログラムがこれまでDelphiでのＤＢマイグレーションを行ったものに比べソース量が多いのは確かだがそれにしても多い。

しばらく原因がわからないまま作業を進めたのだが、ふと一点気づいた。
Delphiの場合、外部結合演算子(+)で取得データはクエリに含めず、コンポーネントのLookUpフィールドで取得しているのだ。
これが、外部結合演算子(+)を減らしているのだ。
コンポーネントでLookUpフィールドを使うのはめんどいなぁと思っていたのだが、意外な効用があったということだ。

## おわりに

教訓。
C＃の場合、積極的にデータベースマイグレーションを勧めるのはやめよう。。。。
Delphiだったら、OracleからPostgreSQLへマイグレーション、積極的勧めよう。

C＃、Delphi以外は、、、話が来てから考えよう。

（この記事の内容は、あくまでも雑感です）
超便利。ChatGPTで自動でスライドを作成するツール

# はじめに

ああぁ、そういえば明日登壇じゃん。明日、登壇じゃん！！！！！！！！！
こんな場面、みなさん一回はありますよね？
僕はあります。
まあ、計画的に発表資料作れという話なのですが、仕事が忙しくなかなかということもあるかもしれません。

**そんなあなたに！
テキスト入れたら自動でスライド作ってくれる魔法のツールを紹介します！**

## Gamma

https://gamma.app/

* まあ、やっていきましょう
* ログインすると下記の画面に切り替わります。
![スクリーンショット 2023-06-14 20.04.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/20278c34-4532-a4e2-ff0e-d816001b3f54.png)

* [New with AI]より[Text to Deck]を選択します。テキストからプレゼン用の資料を自動生成してくれます。

![スクリーンショット 2023-06-14 20.11.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/983b6f3c-35d7-95be-278a-120fdd1586f7.png)


* [Provide instructions]に、どんなプレゼン資料にして欲しいかを書いておき、[Add or paste in content]にプレゼンの内容を書いていきます。
![スクリーンショット 2023-06-14 20.14.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/baf8e245-7142-a125-7183-83ef4c2f6f82.png)


書き終わりましたら、[Generate]をクリックしてください。

今回の内容は、先日公開されたEC2インスタンスへの接続で、マネコンからSSHできる機能がプライベートサブネットのEC2インスタンスに対応したプレスの内容を使ってみたいと思います。

https://aws.amazon.com/jp/about-aws/whats-new/2023/06/amazon-ec2-instance-connect-ssh-rdp-public-ip-address/

**さあ、かっこいいスライド出てこいや！！！**

![スクリーンショット 2023-06-14 20.21.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/f527b235-ae42-2d11-d77b-de89725a6a3d.png)

こんな感じで、粛々とスライドを作ってくれ、最終的な成果物をリンクも置いておきます。

![スクリーンショット 2023-06-14 20.27.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/2df03830-6ec9-b04f-c306-2615e8917321.png)


## 生成されたプレゼン資料

https://gamma.app/public/Untitled-6rtp22vplmi3gjy


# まとめ

* まだまだテンプレートに文字流し込んでいる感もあるものの、関連する画像や表などの表現などは、驚いたポイントでした。
* 同じような機能を今後Googleも提供してくる的なアナウンスがあった気がするので、そちらも期待ですね！

# 参考文献

https://gamma.app/