OmniAICreator/Qiita-1.07M huggingface dataset:
boto3でMIMEを指定してwasabiにローカルファイルをアップロード

# 概要
S3クライアントのboto3でwasabiにファイルをアップロードしたい。その時にMIMEの設定を適切に行う必要がある。私は設定をせずに運用を始めてしまい、大変な思いをしたので、記事に残そうと思う。

## wasabiについて
[wasabi](https://wasabi.com/)はS3互換のクラウドストレージサービスです。特徴としては運用コストが抑えられる点で、S3のようにデータのやりとりで料金が発生せず、使用したストレージ容量にのみ料金が発生します。つまり、どれだけデータの出し入れをしても料金を気にする必要がないのです。

**↓[wasabi公式の料金シミュレーション](https://wasabi.com/ja/small-business/#:~:text=%E6%8B%A1%E5%BC%B5%E5%8F%AF%E8%83%BD%E3%81%A7%E3%81%99%E3%80%82-,Storage%20Amount,-(TB))**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634748/0f12c6d2-3a00-6d44-f8f5-d694866c2325.png)

## boto3について
PythonでAWSのサービスを操作するためのライブラリです。公式が出しているためAPIでの操作のほとんどが可能です。wasabiはS3互換なので、このboto3を用いて操作が可能です。

# 方法
1. boto3のインストール
    ```sh
    pip install boto3
    ```

2. wasabiクライアントの設定
    ```python
    import boto3
    
    wasabi = boto3.client("s3", endpoint_url=f"https://s3.{REGION_NAME}.wasabisys.com", aws_access_key_id=ACCESS_KEY, aws_secret_access_key=SECRET_ACCESS_KEY)
    ```

    | 変数名 | 説明 |
    |:-:|:-:|
    | REGION_NAME | バケットのリージョンを指定する変数 |
    | ACCESS_KEY | 取得したアクセスキー |
    | SECRET_ACCESS_KEY | 取得したシークレットキー |

3. ファイルをアップロード
    ```python
    wasabi.upload_file(FILE_PATH, S3_BUCKET, f"{S3_DIR}/sitemap.xml")
    ```

    | 変数名 | 説明 |
    |:-:|:-:|
    | FILE_PATH | アップロードするファイルのパス |
    | S3_BUCKET | アップロードする先のバケット名 |
    | S3_DIR | バケット内のディレクトリ |


4. ファイルのMIMEを確認

aws cliで確認を行う。以下を実行する
```sh
aws s3api head-object --bucket S3_BUCKET --key S3_DIR/sitemap.xml --endpoint-url=https://s3.REGION_NAME.wasabisys.com
```

実行結果は以下のようになる
```sh
{
    "AcceptRanges": "bytes",
    "LastModified": "2023-02-12T07:47:57+00:00",
    "ContentLength": 21370,
    "ETag": "\"94c79f7f69bc4295b5c5687517229156\"",
    "ContentType": "binary/octet-stream",
    "Metadata": {}
}
```

`ContentType`が`binary/octet-stream`になっていることが分かります。

このままだとブラウザでアクセスした際に表示されずに**勝手にダウンロード**されてしまいます。

:::note info
MIMEの種類に関しては[Common MIME types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)を参照してください。
:::

MIMEを指定しアップロードするために、**３の手順のコードを以下のように変更**します。

```python
wasabi.upload_file(FILE_PATH, S3_BUCKET, f"{S3_DIR}/sitemap.xml", ExtraArgs={"ContentType": "application/xml"})
```

再度確認すると以下のように`ContentType`が`application/xml`になっていることが分かります。

```sh
{
    "AcceptRanges": "bytes",
    "LastModified": "2023-02-12T07:53:43+00:00",
    "ContentLength": 21370,
    "ETag": "\"94c79f7f69bc4295b5c5687517229156\"",
    "ContentType": "application/xml",
    "Metadata": {}
}
```

:::note info
アップロードしてしまったファイルのMIMEを変更するにはaws cliを用いて以下のようにできます。

```sh
aws s3api copy-object --bucket S3_BUCKET --copy-source S3_BUCKET/S3_DIR/sitemap.xml --key S3_DIR/sitemap.xml --content-type "application/xml" --metadata-directive "REPLACE" --endpoint-url=https://s3.REGION_NAME.wasabisys.com
```
:::

# 参考
https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

https://dev.classmethod.jp/articles/change-content-type-by-aws-cli/
【Java基礎】掛け算

［問題］　　(参照：http://www.cc.kyoto-su.ac.jp/~mmina/bp1/hundredKnocksBasic.html)
整数値を入力させ、その入力値を3倍した計算結果を表示するプログラムを作成しなさい。


# コード
```Java
import java.util.*;

public class Main {
    public static void main(String[] args) throws Exception {
        Scanner sc = new Scanner(System.in);
        int t = sc.nextInt();
        System.out.println(t*3);
    }
}

```

↓「28」と入力

# 結果
```
84
```
az cli使ってAzure LBに VM を接続/切り離し

# はじめに
https://qiita.com/OpenJNY/items/694cd51231af4f4fd849

のaz cli版。忘れる前に書く

# 参考URL
↑↑のサイトのアイデアを参考にして、実際のスクリプトは↓↓を参考にしました。

https://learn.microsoft.com/ja-jp/azure/load-balancer/quickstart-load-balancer-standard-internal-cli

# 作業前のスクショ
これからMyAddressPoolにnbfr152vのNICをくっつける
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/a07555d9-12b5-1f4c-ab0e-44c9509c2fa9.png)

# VMの接続

```
$rg="pro-nabehiro-002"
$lb="nbfr151x"
$add_pool="MyAddressPool"
$ipc="ipconfignbfr152v"
$nic="nbfr152vVMNic"

az network nic ip-config address-pool add --address-pool $add_pool --ip-config-name $ipc --nic-name $nic --resource-group $rg --lb-name $lb
```
実行後。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/e020b7f6-78fb-8f8e-ba20-2560626e9ed1.png)



# VMの切り離し
addの部分をremoveにするだけ。

```
$rg="pro-nabehiro-002"
$lb="nbfr151x"
$add_pool="MyAddressPool"
$ipc="ipconfignbfr152v"
$nic="nbfr152vVMNic"

az network nic ip-config address-pool remove --address-pool $add_pool --ip-config-name $ipc --nic-name $nic --resource-group $rg --lb-name $lb
```

# おわりに
https://learn.microsoft.com/ja-jp/cli/azure/network/nic/ip-config/address-pool?view=azure-cli-latest

をみると、APGWも同じようにやれるようだ。今度試してみよう
bit全探索を理解する

## はじめに
bit全探索は競技プログラミングをやっていると，必ず必要となる知識でしょう．
当記事は，筆者がbit全探索を理解した際のメモです．

## bit全探索でできること
集合の部分集合を全て列挙することができます．
例えば， **{1, 2, 3}** の部分集合を全て列挙します．このとき部分集合は**2<sup>3</sup> =8通り**あります．それは，集合の要素それぞれに「この要素を取るか取らないか」という2択の選択が生じているためです．これを2進数を用いて表現します．具体的には，**0**のときは「取らない」，**1**のときは「取る」とします．**010**の時は，{1}は0だから取らない，{2}は1だから取る，{3}は0だから取らないとなり，部分集合は{2}となります．

<img src="https://fightingsou.github.io/images/bit-image.png">

以上から，000から111まで繰り返せば，全ての部分集合を列挙することができます．

## シフト演算とアンド演算
bit全探索を実装するには，bitを直接演算する必要があります．ここでは，演算の際に特に用いられる**シフト演算**と**アンド演算**について説明します．
#### シフト演算
bitを左右にシフトします．
例えば，**0110**は右に1bitシフトすると**0011**となり，左に1bitシフトすると**1100**となります．

<img src="https://fightingsou.github.io/images/bit-shift.png">

C++では，以下のように記述することで実装できます．(0bを付けることで2進数になります)
```cpp
// 左に1ビットシフト
0b0110 << 1
// 右に1ビットシフト
0b0110 >> 1
```

#### アンド演算
複数の2進数において，同じ位置のbitを比較し両方が1のときに1を返します．
例えば，**0101**と**1100**では**0100**を返します．

<img src="https://fightingsou.github.io/images/bit-and.png">

C++では，以下のように記述することで実装することができます．
```cpp
0b0101 & 0b1100
```

## 実装
C++で先ほどの例を実装してみましょう．

```cpp
#include <bits/stdc++.h>
using namespace std;

int main() {
  vector<int> a = {1, 2, 3};
  int n = a.size();
  for (int i = 0; i < (1 << n); i++) {
    for (int j = 0; j < n; j++) {
      if (i & (1 << j)) {
        cout << a[j] << ' ';
      }
    }
    cout << endl;
  }
  return 0;
}
```

#### 解説

- 以下で集合のサイズを求めています．
```cpp
int n = a.size();
```


- for文では，1を集合サイズである3つ分，左にシフトさせることで000から111までループさせています．
 ```cpp
for (int i = 0; i < (1 << n); i++)
 ```

- 各桁を1とアンド演算し1のときのみ出力しています．
```cpp
for (int j = 0; j < n; j++) {
  if (i & (1 << j)) {
    cout << a[j] << ' ';
  }
}
```
ABC 289 D DFSでの考え方

# 問題　[ABC 289 D - Step Up Robot](https://atcoder.jp/contests/abc289/tasks/abc289_d)
**[問題文]**
無限に続く階段があります。 一番下は 0 段目で、1 段のぼるごとに 1 段目、
2 段目と続きます。
0 段目に階段登りロボットがいます。 階段登りロボットは、一回の動作で A[1]​,A[2]​,…,A[N]​ 段ぶん階段をのぼることができます。 つまり、階段登りロボットが i 段目にいるとき、一回動作をした後は i+A[1]​ 段目、i+A[2]​ 段目、⋯、i+A[N]​ 段目のいずれかにいることができます。 それ以外の段数を一回の動作でのぼることはできません。 階段登りロボットは階段を下ることもできません。
階段のB[1]​,B[2]​,…,B[M]​ 段目にはモチが設置されています。 モチが設置されている段へのぼるとロボットは動けなくなり、他の段に移動することができなくなります。

階段登りロボットは階段のちょうど
X 段目にのぼりたいです。 階段登りロボットが階段のちょうど X 段目にのぼることが可能か判定してください
**[制約]**
1≤N≤10
1≤A[1]​<A[2]​<⋯<A[N]​≤10^5
1≤M≤10^5
1≤B[1]​<B[2]​<⋯<B[M]​<X≤10^5
入力はすべて整数
```c++:入力
N
A[1]​ A[2]​ … A[N]​
M
B[1]​ B[2]​ … B[M]​
X
```
# 餅の処理の仕方
この問題の要である餅はDFSの`既に通った場所は探索しない`という性質を用いれば処理できます。
やり方は簡単でDFSを始める前に餅の位置をtrueにしておくだけです。

```c++:DFSでの解答
#include<bits/stdc++.h>
#define rep(i, n) for (int i = 0; i < (int)(n); i++)
#define rrep(i,a,n)for (int i =(int)(a);i<=(int)(n);i++)
#define all(v) v.begin(), v.end()
typedef long long ll;
using namespace std;

int N,M,X;
vector<int>can;
bool visited[100009];

void dfs(int pos){
    visited[pos]=true;
    rep(i,can.size()){
        int nex=pos+can[i];
        if(nex>X)break;
        if(visited[nex]==false){dfs(nex);}
    }
}

int main(){
    cin>>N;
    rep(i,N){
        int XX;cin>>XX;
        can.push_back(XX);
    }
    cin>>M;
    rep(i,M){
        int moti;cin>>moti;
        visited[moti]=true;
    }
    cin>>X;
    dfs(0);
    if(visited[X])cout<<"Yes"<<endl;
    else cout<<"No"<<endl;
}
```
DataSpiderSDKとHyperledger Fabric

今回から、数回にわたりDataSpiderSDKを用いてHyperledger Fabricとデータ連携するためのアダプタの実装例について紹介したいと思います。
初回は、まずはHyperledger FabricのJavaライブラリとHyperledger Fabricが提供するテストネットの環境を用意します。

## ビルド環境とテストネット環境
以下の環境およびモジュール類を揃えます。
+ Windows 10
+ Java SDK ver.8
+ Apache Maven Ver.3.8.6
+ Git for Windows (GitBashも使用します)
+ Node v16.13.0
+ Python 2.7
+ Docker Desktop

## Javaライブラリのビルド
DOSプロンプトを開きHyperledger-fabricのgithubからclone します。執筆時は最新バージョンがv1.2でしたので併せてタグも指定します。
```dosbatch
git clone https://github.com/hyperledger/fabric-gateway.git -b v1.2.0
cd fabric-gateway\java
mvn install -Dmaven.test.skip=true
```
java\targetディレクトリ下に「fabric-gateway-1.2.0-SNAPSHOT.jar」が生成されていればビルドの完了です。

## Hyperledger Fabricテストネット環境構築
Dockerを用いてテストネット環境を構築します。
用意したテストネットDocker上にサンプルのスマートコントラクトをデプロイします。
スマートコントラクトはtypescript版をデプロイします。

GitBashを開き、以下のコマンドを実行します。
```dosbatch
git config --global core.autocrlf false
git config --global core.longpaths true
curl -sSLO https://raw.githubusercontent.com/hyperledger/fabric/main/scripts/install-fabric.sh && chmod +x install-fabric.sh
./install-fabric.sh d s b
cd fabric-samples/test-network
./network.sh up createChannel -ca
cd ../asset-transfer-basic/chaincode-typescript
npm install
cd ../../test-network
./network.sh deployCCAAS  -ccn basic -ccp ../asset-transfer-basic/chaincode-typescript
```
上記のコマンドで、Hyperledger Fabricの基本的な環境とテストで使用するスマートコントラクトのセットアップが完了です。

### Dockerの起動状況の確認
Gitbash画面から以下のコマンドを実行します。
```dosbatch
$ docker ps
CONTAINER ID   IMAGE                               COMMAND                  CREATED              STATUS              PORTS                                                                    NAMES
fbd6d1d8bab9   basic_ccaas_image:latest            "/tini -- /usr/src/a…"   8 seconds ago        Up 7 seconds        9999/tcp                                                                 peer0org2_basic_ccaas
d88bac1e6599   basic_ccaas_image:latest            "/tini -- /usr/src/a…"   10 seconds ago       Up 9 seconds        9999/tcp                                                                 peer0org1_basic_ccaas
9397f3df007f   hyperledger/fabric-tools:latest     "/bin/bash"              About a minute ago   Up About a minute                                                                            cli
5629adb8f1de   hyperledger/fabric-orderer:latest   "orderer"                About a minute ago   Up About a minute   0.0.0.0:7050->7050/tcp, 0.0.0.0:7053->7053/tcp, 0.0.0.0:9443->9443/tcp   orderer.example.com
05cf03e3a034   hyperledger/fabric-peer:latest      "peer node start"        About a minute ago   Up About a minute   0.0.0.0:9051->9051/tcp, 7051/tcp, 0.0.0.0:9445->9445/tcp                 peer0.org2.example.com
8de9fd0de3fe   hyperledger/fabric-peer:latest      "peer node start"        About a minute ago   Up About a minute   0.0.0.0:7051->7051/tcp, 0.0.0.0:9444->9444/tcp                           peer0.org1.example.com
```

### Dockerのサービスの終了
```bash
./network.sh down
```

## 次回は
テストネットとして各サービスを立ち上げました。次回は、これらのサービスの概要と、[DataSpiderSDKを用いたグローバルリソースの実装例を紹介](https://qiita.com/dataspider-fan/items/1b7adfc6c2d8036fffbd)したいと思います。
[Python] 破壊的/非破壊的

# 結論
- 破壊的メソッド：オブジェクトの値を**変更し**、**Noneを返す**メソッド
- 非破壊的メソッド：オブジェクトの値を**変更せず**、**処理を加えた新たなオブジェクトを返す**メソッド

## 実践確認
### 破壊的
```python
lst = [1,2,3,4,5]
lst.append(99)
# lst => [1, 2, 3, 4, 5, 99]
```
変数lstの値が変更されるため、append()は破壊的メソッドと言える。
また、
```python
lst = [1,2,3,4,5]
lst2 = lst.append(99)
# lst => [1, 2, 3, 4, 5, 99]
# lst2 => None
```
変数lst2に値が存在しないことから、破壊的メソッドはNoneを返却する。


### 非破壊的
```python
msg1 = 'こんにちは、世界'
msg2 = msg1.replace('こんにちは', 'さようなら')
# msg1 => 'こんにちは、世界'
# msg2 => 'さようなら、世界'
```
変数msg1の値が変更されていないため、replace()は非破壊的メソッドと言える。
また、変数msg2には、新たに生成されたオブジェクトが格納される。
FastAPI使ってみた

# はじめに
PythonのフレームワークのFastAPIを使って
簡単なWEBアプリを作成してみました

# 環境
Python:3.10
pip:22.3.1
pipenv:version 2022.12.19
flake8:6.0.0　←任意

# 環境構築
今回はpipenvを使用して仮想環境で構築していきます

pipenvをインストールしていない方はインストールしてください
```
pip install pipenv
```

ワークディレクトリを作成して初期化を実行します
```
pipenv --python 3
```

パッケージをインストールしていきます
```
pipenv install fastapi starlette uvicorn
```

仮想環境に入ります
```
pipenv shell
```

# コード

main.pyを作成し、下記のコードを打ち込みます
```python:main.py
from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"Hello": "World"}

@app.get("/items/{item_id}")
def read_item(item_id: int, q: str = None):
    return {"item_id": item_id, "q": q}
```

# 実行
実行します
```
uvicorn main:app --reload
```

下記が出力されれば成功です
```
$ uvicorn main:app --reload
INFO:     Will watch for changes in these directories: ['/Users/div/fastapi-sample']
INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO:     Started reloader process [20485] using StatReload
INFO:     Started server process [20488]
INFO:     Waiting for application startup.
INFO:     Application startup complete.
```

http://127.0.0.1:8000 にアクセスし(@app.get("/"))、
画面に{"Hello": "World"}が表示されます

http://127.0.0.1:8000/items/5?q=somequery にアクセスすると(@app.get("/items/{item_id}"))
以下のレスポンスが表示されます
{"item_id": 5, "q": "somequery"}


# 備考
コードやコマンドは下記より引用しています。
FastAPIの詳しい内容は公式Docをご確認ください。

https://fastapi.tiangolo.com/ja/
docker-compose.yml 一本で、日本語検索できるWiki.jsをサクッと構築する

# これは何？

dockerを使用してWiki.jsを使用した場合に、公式の手順では日本語での検索がうまくできません。
ElasticSearchを使用することで、うまく検索できるようになるのですが、なかなかサクッと構築できる手順を見つけられませんでした。

色々調べてみて、docker-compose.yml だけで構築できるようにできましたので、手順を共有いたします。

# お決まりの注意事項
サクッと立てることを優先して、パスワードなどはdocker-compose.ymlファイルに直書きです。
不正な改変への考慮はしていません。

パスワードなどの定義は、secretを使うなど、ちゃんと対応してください。

# 前提条件
+ docker が使用できること。

# 本記事のポイント

+ ElasticSearch のプラグインをコンテナにインストールするのは、「command」からできる
+ ElasticSearchのAnalyzer に「kuromoji」を指定する。

# 手順

### 1. docker-compose.yml の準備
下記URLの docker-ompose.yml ファイルを使用ください。
環境変数のパスワードなどはお好みで調整してください。

https://github.com/kshinoapp/wikijs-docker-compose-ja

### 2. 起動＆初期設定
いつものように、下記のコマンドを実行するだけです。
```docker
docker compose up -d
```
起動したら、管理者カウントなどを入力して、インストールを完了させてください。

### 3.検索エンジンの設定
Wiki.js の管理画面から、検索エンジンの設定を行います。

下記の赤枠で囲っている部分を、このように指定してください。
index name の設定はお好みで。
「Wikiのインスタンスは複数立てるけど、ElasticSearchは１つにまとめる」
といったような場合は、wiki毎に名前を変えてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1292532/2d4a1352-5876-fb07-795c-c5ce01077489.png)

# なぜWiki.js？
情報共有用にWikiをたてる、というのは、よく取られる対応ではあります。
使えそうなWikiのシステムをいくつか見繕ってみて、下記のようなポイントを考慮して Wiki.js を選定しました。

+ OSSである
+ Docker で構築できる
+ サクサク編集できる
+ デザイン心のない私でも、今っぽい画面デザインで表示してくれる

# 参考資料
下記の記事のおかげで、本記事の手順で、Wikiをサクッと立てることができるようになりました。
感謝いたします。

https://qiita.com/shin_hayata/items/41c07923dbf58f13eec4

https://techblog.zozo.com/entry/elasticsearch-mapping-config-for-japanese-search

https://blog.johtani.info/blog/2013/08/23/index-wikipedia-ja-to-elasticsearch/
React初心者がやるReact Hooks -useEffect編-

アウトプットのためにReact Hooksの`useEffect`を使用した簡単なアプリケーションを作成する

# プロジェクト作成
```zsh
$ npx create-react-app effect-tutorial --template typescript
```

# マウント時のみに`useEffect`を発火させる
`useEffect`に空の配列を引数で渡すことで可能になる

```Counter.tsx
import React, { useEffect } from 'react';

const Counter: React.FC = () => {
  useEffect(() => {
    console.log('useEffect発火');
  }, []);
  return (
    <>
      <h1>Hello World</h1>
    </>
  );
};

export default Counter;
```


# マウント時と特定のStateが変化した時のみに`useEffect`を発火させる
`useState`を使用する
空の配列にStateを入れる
`{count}`が増えるごとに`useEffect`が発火する
```Counter.tsx
import React, { useState, useEffect } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    console.log('useEffect発火');
  }, [count]);
  return (
    <>
      <h1>{count}</h1>
      <button
        onClick={() => {
          setCount((prev) => prev + 1);
        }}
      >
        PLUS
      </button>
    </>
  );
};

export default Counter;
```

# 外部からデータ取得をする
JSONPlaceholderよりデータを取得する
```ItemList.tsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';

type TodoType = {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
};

type PostType = {
  userId: number;
  id: number;
  title: string;
  body: string;
};

type ItemType = {
  id: number;
  title: string;
};

type ResourceType = 'todos' | 'posts';

const ItemList: React.FC = () => {
  const [items, setItems] = useState<ItemType[]>([]);
  const [resource, setResource] = useState<ResourceType>('todos');

  useEffect(() => {
    const fetchItems = async () => {
      try {
        const response = await axios.get(
          `https://jsonplaceholder.typicode.com/${resource}`
        );
        console.log(response);
        const itemData: ItemType[] = response.data.map(
          (responseData: TodoType | PostType) => {
            return { id: responseData.id, title: responseData.title };
          }
        );
        setItems(itemData);
      } catch (err) {
        console.error(err);
      }
    };
    fetchItems();
  }, [resource]);
  return (
    <>
      <h1>itemList</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </>
  );
};

export default ItemList;
```
【Rails】本番環境構築で Missing service adapter for "GCS" と怒られる

# 【Rails】本番環境構築で Missing service adapter for "GCS" と怒られる


## 状況


### ｍy 環境
・Rails 7
・active_storage 採用
・本番だけ GCS 使おうとしている
・render.com へデプロイしてる

### 

production.rb で下記の指定をしていて、
```
  ...
  config.active_storage.service = :google
  ...
```

storage.yml で下記の指定をしている。
```
google:
  service: GCS 
  project: <%= ENV['GCS_PROJECT_NAME'] %>
  credentials: <%= ENV['GCS_KEYFILE'] %>
  bucket: <%= ENV['GCS_BUCKET'] %>
```

`service: GCS` で GCS を service adapter として使おうとしているけど、それが存在しない


### エラーログ

```
Feb 12 03:50:31 PM  [69] ! Unable to load application: RuntimeError: Missing service adapter for "GCS"
```
こんな感じのエラーが出る


## 解決

gemfile に `gem 'google-cloud-storage'` を追加して `bundle install` すると治った
SwiftUIでメソッドチェーンによるイベントハンドリングを行う

のっけから宣伝になりますが、個人的にアプリをリリースしております。

[渾沌より](https://apps.apple.com/jp/app/%E6%B8%BE%E6%B2%8C%E3%82%88%E3%82%8A/id1434999248)

Apple Musicの1億曲のライブラリー全てからランダムで音楽を再生するというアプリです。

UIはSwiftUIで実装しており、基本的な音楽プレイヤーの機能は一通り備えています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2763088/f81fccfd-ebba-43f2-e95b-fdcf16ea0aa5.png" width="200">

このうちシークバーの部分は自前で実装しています。

![IMG_0435.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2763088/f9784ea2-0daf-c78e-9b07-f238296b0205.jpeg)

[Slider | Apple Developer Documentation](https://developer.apple.com/documentation/swiftui/slider)

SwiftUIには標準でスライダーバーが用意されていますが、デザインのカスタマイズが今ひとつ不自由だったので自前の実装にしました。

---------

シークバーは当初以下のように実装していました。

```Swift
struct SeekBar<V>: View where V: BinaryFloatingPoint, V.Stride: BinaryFloatingPoint {
    // 〜中略〜

    /// 初期化
    /// - Parameters:
    ///   - value: 値
    ///   - bounds: 範囲
    ///   - onEditingChanged: ドラッグ中のイベント
    init(value: Binding<V>, in bounds: Binding<ClosedRange<V>>, onEditingChanged: ((Bool) -> Void)?) {

    // 〜中略〜

    /// ドラッグのハンドラ
     private var drag: some Gesture {
         DragGesture()
             .onChanged {
                onEditingChanged?(dragHandler($0))
             }
             .onEnded {
                onEditingChanged?(false)
             }
     }
```

使う際は以下のようになります。

```Swift
SeekBar(value: $playbackTime, in: $playbackRange) {
    // ドラッグ中のイベント
}
```

これはSwiftUI標準のスライダーバーに合わせたものです。

[init(value: in:onEditingChanged:) | Apple Developer Documentation](https://developer.apple.com/documentation/swiftui/slider/init(value:in:oneditingchanged:))

スライダーをいじっている時のイベントハンドリングはクロージャ(`onEditingChanged:`)で行うようになっています。

ただ、ふと、`DragGesture().onChanged`のように、メソッドチェーンでのイベントハンドリングを実装したことがない、というのが気になりました。

公式がクロージャだし、今の実装で事足りるのですが、気になってしまったので試してみることにします。

-------------

真っ先に思いついたのは`ViewModifier`ですが、`func body(content: Self.Content) -> Self.Body`を実装する必要があり、クロージャを格納すれば事足りる今回の用途では少し大袈裟です。

また`content`がイミュータブルのため、プロパティーの変更ができません。

`@State`なども試しましたが、クロージャの状態を管理する必要は全くないので、少し違う気がします。

そんなふうに色々試し、色々調べた結果、結論を言ってしまえば、以下のページに答えがありました。

https://stackoverflow.com/questions/68346968/how-to-add-a-custom-tap-handler-on-a-custom-swiftui-view

```Swift
func myCustomTapHandler(onAction: @escaping () -> Void) -> Self {
    var view = self
    view.action = onAction
    return view
}
```

自身をミュータブルコピーして、プロパティーを変更し、コピーを返す。

・・・なるほど・・・。

https://qiita.com/yimajo/items/a0180e66f4f93120287e

自分の頭の中では、**ビューそのものを操作しないといけない**と思い込んでいたのですが、SwiftUIはstructベースで、ビューの再作成が繰り返される前提のフレームワークなので、元のビューを返す必要がないんですね。

`@Binding`とかはどうなるんだろうと思い、調べてみましたが、

https://zenn.dev/hirothings/scraps/b29b2a8bc7f30f

上記ページの「@Stateと@Bindingの違い」の項を見る限り、問題なさそうです。

-------------

今回の結果を受けて作り直したシークバーが以下になります。

以前はかなり決めうちでデザインを設定していたのですが、イベントハンドラの件に合わせて、デザインもメソッドチェーンで変更できるようにしました。

複数のビューに共通の変更が必要でない限りは、`ViewModifier`を使う必要はないですね。

これで使いまわせるようになったと思います。

https://gist.github.com/HonmaMasaru/3b226491bd48687d6b3c252401a7a605
Azure Logic Appsでつまったことまとめ

## はじめに

最近`Microsoft Azure`上で稼働するアプリケーションなどを監視するために、`Azure`の`Logic Apps`を使うことがある。
UIからの操作をメインに想定している`Logic Apps`では、細かな部分に手が届きづらいという難点があり、プログラムで書いた方が早くね？という自問自答が絶えない。
そんなノーコード・ローコードあるあるを抱えつつ、道中で遭遇したTipsについてまとめてみる。


(随時更新予定)

# 1. UnixTimeの取得
既存のAPIを定期的に叩き返却値を検証する`Logic Apps`を作成した時のこと。
そのAPIの仕様で、時間を`UnixTime`で扱っていたが、`Logic Apps`で`UnixTime`を扱える便利な関数はない。
自分で計算することになるが、下記のように計算で求めることになる。

```
div(sub(ticks(utcNow()),ticks('1970-01-01')), 10000000)
```

`ticks()`は0001年1月1日午前0時00分00秒からの100ナノ秒単位の刻みの回数とのことなので、現在時刻から`UnixTime`のベース時間(1970/01/01)との差をticksで求めつつ、ticks()の100ナノ秒単位の部分を秒変換してあげればいい。(1秒 = 1000000000ナノ秒)

[Azure Logic Appsのワークフロー式関数のリファレンス ガイド - ticks](https://learn.microsoft.com/ja-jp/azure/logic-apps/workflow-definition-language-functions-reference#ticks)

# 2. 日付のフォーマット
現在時刻をJSTでフォーマットしつつ表示したいケースは多いと思う。
その際に現在時刻を取得して、タイムゾーンを変換して、フォーマットして...のような作業をコネクタを組み合わせてやっているとワークフローが長ったらしくなってしまう。
`convertFromUtc()`を使えば、一撃で取得できる。

```
convertFromUtc(utcNow(),'Tokyo Standard Time','yyyy/MM/dd HH:mm:ss')
```

[convertFromUtc](https://learn.microsoft.com/ja-jp/azure/logic-apps/workflow-definition-language-functions-reference#convertFromUtc)
[Time Zone IDs](https://learn.microsoft.com/ja-jp/previous-versions/windows/embedded/gg154758(v=winembedded.80))

# 3. ロジックアプリデザイナーのフローに名前をつける時アンダースコア(_)が表示されない

ロジックアプリではフローに識別子を与えることができる。
ロジックアプリデザイナーは確かに「For each」と書いてあるが、コードビューでは「For_each」と記載されている。
どうも、ロジックアプリデザイナーでアンダースコアが表示できないバグ？があるようだ。

▼ ロジックアプリデザイナー
![スクリーンショット 2023-02-12 15.24.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516308/1505b532-d25c-280a-545e-5a5019ead812.png)
▼ コードビュー
![スクリーンショット 2023-02-12 15.28.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516308/0edcdb33-6998-abb5-2363-d8479352c202.png)

# 4. テキストファイル作成時の改行

`Application Insights`で定期的にクエリを実行し、結果をAzureのストレージアカウントにテキストファイルで保存したい場面があった。その際任意の場所で改行したかったのだが、改行文字列周りで詰まったのでメモ。

URIエンコードされた改行文字列は「'%0A'」で表現されるので、テキストに変換し結合させる。

```
concat('For_each')?['message'], uriComponentToString( '%0A' ))

```
[uriComponentToString()](https://learn.microsoft.com/ja-jp/azure/logic-apps/workflow-definition-language-functions-reference)

# まとめ
AzureのLogicAppsはところどころに落とし穴があり、細かいところで時間を浪費してしまうことがある。
細かいところには手が届かないがサクッとつくれることがLogicAppsの売りでもあると思う。
エンジニアの性で解決したくなる気持ちもわかるが、あきらめてAzure Functions等で作ってしまうのもありだと思う。
Java Silver 対策サイトを公開しました

# はじめに

この度、[^1][JavaSilver Strategy](https://javasilver-strategy.vercel.app/)という Java 言語の認定資格試験である Java Silver の試験対策サイトを公開しました。
このサイトを公開した経緯としては、「移動時間（隙間時間）に誰でも閲覧できる試験対策のサイトがあればなぁ」と当時考えていたことがきっかけです。移動中に資格対策の分厚い本を開いてもいいのですが、流石に疲れます。それならと思い、Java Silver の対策サイトや記事がないか漁りましたが、ボリュームが少なかったり、そもそもコンパイルの通らないコードが掲載されていたりと自分の欲しい情報があまり多くありませんでした。（[Oracle 公式の問題集](https://www.oracle.com/jp/education/certification/ocjp-silver-se8-3494542-ja.html)は当時お世話になりました。）
そこで、今後 Java Silver を受験する方々の一助になればと思い、当サイトを制作する運びとなりました。

# サイトについて

当サイトは私が Java Silver の試験勉強をする中で**間違いやすい**と感じたセクションを中心としたサンプルコードとその解説を掲載しております。
そのため、試験範囲すべてを網羅した内容ではありません。網羅的かつ体系的な内容を望まれる方は試験対策本のご購入をお勧めします。筆者の立場としては、メインは書籍。サブは当サイト。のような位置付けで考えています。

## 扱わないこと

- プログラミングの基本
- Java 言語に関する体系立てた解説
- 体系立てた内容と構成

# さいごに

宜しければ拡散等していただけますと嬉しいです。
また、周りに Java Silver を受験する方がいらっしゃる方は当サイトを紹介していただけますと嬉しいです。

[^1]: "対策"とは英語では一般的には "measures" という単語ですが、読みやすさや語呂的に色々考えた結果 "strategy" という単語になりました。strategy は一般的には戦略や作戦という意味を持ちますが、調べたら"対策"という意味もあるようです。
形式的冪級数の逆元を求める式はなんであんな形なんですか？


# 前書き

形式的冪級数のいろいろな変形を調べていると,

ニュートン法を利用して $O(n\log n)$ で求めることができます

という説明のもとわけわからん式が書いてあることがしばしばあります

なんでこんな式が出てくるのかをちゃんと考えようの会です


# 本文

ニュートン法を使うのですが, いきなりfpsは難しいのでまず実数で考えてみます

関数 $F(x)$ があって, $F(x) = a$ の解を探したいとする

いい感じの初期値 $x_0$ を決める

$F(x)$ を $x = x_0$ の周りでテイラー展開すると

```math
F(x) = F(x_0) + F'(x_0)(x - x_0) + O((x - x_0)^2)
```

と書ける

いい感じに移項したら

```math
\begin{aligned}
x_{n + 1} = x_n - \dfrac{F(x_n) - a}{F'(x_n)} \cr
\end{aligned}
```

というニュートン法の式になり, 繰り返し計算していくことで２次の速さで収束していく



<br><br>

これと同じことを形式的冪級数でやりたい

$F(g) = f \pmod {x^n}$ となるような $g$ が求めたい

先ほどの式に代入すると

```math
\begin{aligned}
g_{n + 1} = g_n - \dfrac{F(g_n) - f}{F'(g_n)} \cr
\end{aligned}
```

ここで, $g \equiv g_n \pmod {x^{2^n}}$ をみたすとすると,  $(g - g_n)^2 \equiv 0 \pmod {x^{2^{n+1}}}$ をみたす

したがって, $g \equiv g_n \pmod {x^{2^n}}$ のとき $g \equiv g_{n+1} \pmod {x^{2^{n+1}}}$

という感じに $[x^0]g$ を求めることができればそこから精度を倍にしていける


<br><br>

さて, この $F$ とは具体的にどのようなものでしょうか

逆元を求めたい場合

つまり

$g^{-1} = f \pmod {x^n}$ となるような $g$ が求めたい

とすると

```math
\begin{aligned}
g_{n + 1} &= g_n - \dfrac{F(g_n) - f}{F'(g_n)} \cr
&= g_n - \dfrac{g_n^{-1} - f}{-g_n^{-2}} \cr
&= 2g_n - f g_n^2 \cr
\end{aligned}
```

という感じで導出できました

$\exp$ も同じ方法でできて,

$g = \exp f$ が求めたい, つまり

$\log g = f \pmod {x^n}$ となるような $g$ が求めたい

とすると

```math
\begin{aligned}
g_{n + 1} &= g_n - \dfrac{F(g_n) - f}{F'(g_n)} \cr
&= g_n - \dfrac{\log g_n - f}{g_n^{-1}} \cr
&= g_n(1 - \log g_n + f) \cr
\end{aligned}
```

と導出できる

<br><br>

肝心の計算量だが, 毎回定数回の畳み込みをして長さが倍になっていくので

```math
\begin{aligned}
T(N) &= O(N\log N) + O(\dfrac{N}{2}\log \dfrac{N}{2}) + \ldots \cr
&= O(N\log N)
\end{aligned}
```

となる

# おわりに

こういうのをちゃんと導出法から知ってると, ソラで書かないといけなくなったときとかに便利

# 参考文献

[【競技プログラミング】形式的冪級数の応用テクニック(前編)](https://qiita.com/hotman78/items/f0e6d2265badd84d429a)
TypeError: Cannot read properties of undefined (reading 'Web3Provider')の解決法

## 状況
HardhatでDappを開発している初学者です。
Next.jsでのフロントエンド開発時に以下のようなエラーがコンソールに出力されました。
```
TypeError: Cannot read properties of undefined (reading 'Web3Provider')
```
エラー箇所は以下の1行です。
```javascript:index.js
const provider = new ethers.providers.Web3Provider(window.ethereum)
```
## 原因と解決法
いくらググっても解決法がヒットしませんでしたが、最後の最後で以下のページを見つけました。
https://ethereum.stackexchange.com/questions/144315/nextjs-13-and-ethers-properties-of-undefined-reading-web3provider
原因はethersのバージョンです。バージョン6以降を使用するとエラーが出るみたいです。

バージョン5.xにダウングレードするとエラーが消えました。

## 参考
https://ethereum.stackexchange.com/questions/144315/nextjs-13-and-ethers-properties-of-undefined-reading-web3provider
【JavaScript】CSV出力で発生したwindowsの文字化け対策

# 概要
- macでは問題なかったが、windowsでcsvダウンロードしたら文字化けしてしまった時の対処法
- windowsの機体がなくても簡単に文字化けが直ったか確認する方法
について記載します。


# 文字化けの発生原因
WindowsのExcelでCSVファイルを開くと、Shift_JISで読み込まれてしまうためUTF-8のファイルで書かれたファイルは文字を解釈できずに文字化けする

# 具体的な対応方法
以下のように`BOM`を付けることで、ExcelにUTF-8で書かれていることを伝えることができます。

```js
downloadCsv() {
      const text =
        "ここにフォーマットのテキストが入ります"
      const bom = new Uint8Array([0xef, 0xbb, 0xbf]) //ここでUTF-8を指定
      const blob = new Blob([bom, text], { type: "text/csv" })
      const url = URL.createObjectURL(blob)
      const link = document.createElement("a")
      link.href = url
      link.setAttribute("download", `format.csv`)
      document.body.appendChild(link)
      link.click()
      link.remove()
    },
```

# 本当に文字化けがなくなったかの確認方法（macでもできる）
修正をしたら確認しないといけないですが、手元にwindowsの機体がないという方へ。
次のコマンドを実行すればmacでも文字コードがきちんと指定できているか確認することができます。

`od -tx1 -Ax XXXXXXXX.csv`

これで先頭の行（0000000）に`ef bb bf`の文字が入っていればOKです

## 参考画像
きちんと指定できていればこんな感じになります。

1点注意事項として、ファイル名に（1）、（2）とか同じファイル名で保存した時に勝手につけられる括弧付きの数字が入っていたらこのコマンドは失敗しました。

> ダメな例：text(1).csv
> OKな例：text1.csv


![csv文字化け.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2259490/e4ba75d8-9e1b-9f8c-8da7-23c1e87b7e53.png)

# 参考記事
- BOMやBlobって何？
- さっきのコマンドの意味は？
という方はこちらの参考記事に詳しく書いてありましたので、ぜひご覧ください！


1. [BOMやBlobを理解してJavaScriptでCSVを出力する](https://qiita.com/megadreams14/items/b4521308d5be65f0c544)
2. [[Rails]CSVダウンロード機能を細部まで理解して実装する（２）Windows対応BOM付きUTF-8](https://tech.fusic.co.jp/posts/2021-10-15-csv-bom/)
Thymeleafで動的なonclickを書きたい

Thymeleafで動的なonclickを書こうとして少し苦戦したので記事に残しておきます。
失敗例を挙げながら説明していきます。

# 環境
* Spring Boot 2.7.0
* Thymeleaf 3.0.15

# 目標
HTMLに下記のようなボタンを表示することが目標です。
"hoge"の部分が動的に変わるイメージです。
``` html
<button onclick="location.href='https://localhost:8080/list?param=hoge'">ボタン</button>
```

# 結論
```html
<button th:onclick="|location.href='https://localhost:8080/list?param=__${hoge}__'|">ボタン</button>
```
最終的に上記のコードで、目標通りのボタン表示ができました。
シンプルで分かりやすいと思います。

# 結論までの過程
失敗から結論に至るまでの過程を記載します。

### 失敗
```html
<button th:onclick="'location.href=\'https://localhost:8080/list?param=' + ${hoge} + '\''">
  ボタン
</button>
```
愚直に文字列結合で書いてみました。
うまくいくと思いましたが、${hoge}に文字列型を出力しようとすると下記のエラーが発生します。
```
org.thymeleaf.exceptions.TemplateProcessingException: Only variable expressions returning numbers or booleans are allowed in this context, any other datatypes are not trusted in the context of this expression, including Strings or any other object that could be rendered as a text literal. A typical case is HTML attributes for event handlers (e.g. "onload"), in which textual data from variables should better be output to "data-*" attributes and then read from the event handler.
```
onclickに埋め込める変数の型は数値またはブール値のみが許可されているようです。
エラー文では、"data-*"属性に変数を出力してから、onclickで読み込むことで解決すると記載されていますが、今回は別の方法で解決しました。

### 成功
```html
<button th:onclick="'location.href=\'https://localhost:8080/list?param=' + __${hoge}__ + '\''">
  ボタン
</button>
```
失敗例の${hoge}を「\_\_」（アンダースコア2つ）で囲いました。
「\_\_${変数}\_\_」の形式で書くと、変数部分が事前に評価され、変数部分が値に変換された後にonclickの文が構成されるようです。
これで${hoge}に文字列型を出力してもエラーが出なくなりました。

### 改善（結論）
```html
<button th:onclick="|location.href='https://localhost:8080/list?param=__${hoge}__'|">
  ボタン
</button>
```
一個前の成功例の書き方だと、エスケープや＋演算子のせいで結構ごちゃごちゃしています。
onclickの式を、「 |式の内容| 」の形式で書くことで、エスケープや＋演算子を使わずに記述することができました。（リテラル置換）

---
参考になれば幸いです。

# 参考文献
* Thymeleafチートシート - Qiita
https://qiita.com/NagaokaKenichi/items/c6d1b76090ef5ef39482
urllib.request や requests でダウンロードしたzipファイルを一時ファイルを介さずに解凍する

# 概要
スクレイピング等で `urllib.request` や `requests` を用いてネットワークから取得したzipファイルを解凍する際に、一時ファイルを介さずメモリ上で解凍する方法です。
ファイルを介さないことで、保存先のディレクトリの確保や解凍後の不要なファイルの削除が不要になり、スマートな処理が実装可能です。

# デモに利用するデータ
気象庁ホームページのデータをデモ用のファイルとして利用します。

ホーム > 各種データ・資料 > 過去の気象データ検索 > 平年値ダウンロード

https://www.data.jma.go.jp/obd/stats/data/mdrr/normal/index.html

上記ページの「梅雨入り・明けの時期」のzipファイル(`https://www.data.jma.go.jp/obd/stats/data/mdrr/normal/2020/data/normal_baiu.zip`)を対象とします。

# メモリ上でzipファイルを解凍するスクリプト
## `urllib.request` を使用する場合

```python
import io
import zipfile
import urllib.request

url = "https://www.data.jma.go.jp/obd/stats/data/mdrr/normal/2020/data/normal_baiu.zip"
extract_dir = "."

with (
    urllib.request.urlopen(url) as res,
    io.BytesIO(res.read()) as bytes_io,
    zipfile.ZipFile(bytes_io) as zip,
):
    zip.extractall(extract_dir)
```

withステートメントにおいて括弧書きで複数のオブジェクトを扱うのはPython 3.10以降でサポートされる記法です。

https://qiita.com/nujust/items/e66d59b557a0dc223050

## `requests` を使用する場合

```python
import io
import zipfile
import requests

url = "https://www.data.jma.go.jp/obd/stats/data/mdrr/normal/2020/data/normal_baiu.zip"
extract_dir = "."

with (
    requests.get(url) as res,
    io.BytesIO(res.content) as bytes_io,
    zipfile.ZipFile(bytes_io) as zip,
):
    zip.extractall(extract_dir)
```

# 参考文献

https://docs.python.org/ja/3/library/urllib.request.html

https://requests-docs-ja.readthedocs.io/en/latest/api/
tailwindcssを試せるサイトを作りました

# はじめに

<font color="red">playgroundみたいなものを作ってみたかった</font>

普段フロントエンド開発をしていて`tailwindcss`に触れる機会が多いので、
classを書き換えると反映されるようなサイトを作りました。

大したものではないのでハードルは下げてくださいまし


## 全体像

![スクリーンショット 2023-02-12 15.04.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/4e4463c8-cfc0-debe-d7e8-ed4ed5baa8bf.png)

## 概要

![スクリーンショット 2023-02-12 15.05.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/1e16ff6d-43d8-9803-90ea-f92e3460e131.png)

こちらのフォームで書き換えたものが

![スクリーンショット 2023-02-12 15.06.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/f9173812-dc59-6d1b-b88e-257ff8d76b82.png)

こちらに反映されるようになっております。

https://maaaashi-tailwindcss-preview.mss-rep.com/


# 開発環境

* node
    * v18.14.0
* pnpm
    * 7.26.3
* Framework
    * [SvelteKit](https://kit.svelte.jp/)
* UI components
    * [Flowbite-svlete](https://flowbite-svelte.com/)

# 実装方法(抜粋)

<font color="red">より良い方法がありそう</font>

`classname`をストアに持ち、右側の変更を左側に伝えています。

## ストア

```typescript:src/store/classname.ts
import { writable, type Writable } from "svelte/store"

// 適当にデフォルト値入れておくと利用者が使い方を連想しやすい(かも)
export const divClass: Writable<string> = writable('font-bold text-2xl text-green-500')
```

## プレビュー(画面左側)

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/f9173812-dc59-6d1b-b88e-257ff8d76b82.png"></img>

```vue:Preview.svelte
// divの部分のみ抜粋
<script lang="ts">
  import { divClass } from "../store/classname";
</script>

<div class="ml-5 my-5">
  <div class={$divClass}>
    preview
  </div>
</div>
```

## プロパティ(画面右側)

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/1e16ff6d-43d8-9803-90ea-f92e3460e131.png"></img>

```vue:Property.svelte
// divの部分のみ抜粋
<script lang="ts">
  import { Tabs, TabItem, Input, Tooltip, List, Li } from 'flowbite-svelte';
  import { divClass } from "../store/classname";
</script>


// 実際には87~94行目は別コンポーネントに切り出し、'div', 'button', 'a'で使いまわしています。
<Tabs style="pill">
  <TabItem open>
    <span slot="title">div</span>
    <Input bind:value={$divClass}/>
    <Tooltip>edit class name</Tooltip>

    <List tag="ul" class="space-y-1">
      {#each $divClass.split(' ') as classname}
        <Li>{classname}</Li>
      {/each}
    </List>
  </TabItem>
</Tabs>
```

# 改善点(徐々に直していきます)

* classを変えても一部のstyleが反映されないことがある
    * {#key}blockを使ったが、ダメそう
    * 何か方法を探す
* display: flexなどのために子の要素を追加できるように
    * innnerHTMLに追加するか、componentsを再起的に使う
* div, button, aを用意しておくのではなく、element名も変えれるように
    * `<svelte:element this={tag}>`で出来そう
AWS認定デベロッパーアソシエイト（DVA-C02）に合格したので勉強方法メモ

# はじめに
2023年1月28日にAWS認定デベロッパーアソシエイト（DVA-C02）に合格しました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">AWS DVA(Developer – Associate)受かってた✨<br>DVAもテスト直後に合否出なくなってたことに知らずに焦ったけど取れててよかった🎃 <a href="https://t.co/RleBykcf5I">pic.twitter.com/RleBykcf5I</a></p>&mdash; taka@フリーランスなインフラエンジニア (@TAKA_INFRA) <a href="https://twitter.com/TAKA_INFRA/status/1619297571956215812?ref_src=twsrc%5Etfw">January 28, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

DVAはAWS資格の中では比較的難易度が低い試験と紹介されることが多いですが、業務でインフラ系しかさわったことがないことから、個人的にはSysopsよりも難しく感じました。

SAAやSysopsに合格したとき同様、DVA-C02 での自分自身の勉強方法を紹介します。

SysOps合格した際の勉強方法はこちら（正直あまり変わりませんが、、）
https://qiita.com/TAKA_INFRA/items/3e1e253ad7f450082543

# 学習方法
1. ポケットスタディ AWS認定 デベロッパーアソシエイト
2. TechStock(旧Koiwa)
3. AWS サンプル問題

勉強時間は全体で約40時間ほどかけました。配分としては2:7:1です。

初めにポケットスタディで全体の概要を把握してからあとはひたすらにTechStockで問題演習に時間を充てました。だいたいですが平日1時間、休日2時間ぐらいのペースだったと思います。

## ポケットスタディ AWS認定 デベロッパーアソシエイト

ポケットスタディ AWS認定 デベロッパーアソシエイト
https://www.amazon.co.jp/dp/481560908X

各種サービスの概要を確認するのに使いました。AWSサービスのキャプチャー画像も載っているため使ったことがないサービスの動作イメージを掴みやすくなっています。また章末問題は基礎知識を網羅的に確認するのに便利です。

ポケットスタディという名称ですが、500ページ以上で厚さは3cm近くあります笑

## TechStock(旧Koiwa)

https://techstock.jp/

もはや定番になりつつあるTechStock(旧Koiwa)による問題演習です。SAAやSysopsと同様に実際の試験にもほぼ同様の問題が何問で出題されておりました。

問題数はQiita投稿時点では52セクション(1セクション=7問)用意されています。セクション1から順番に進めて問題ないでしょう。

ちなみに今回のDVAでは下記の流れでTechStockは使用しました。Sysopsのときとほぼ使い方は変わらないです。

1. まずは問題を2周。2周目に間違えた問題はお気に入り登録
2. お気に入り登録した問題だけ1周　⇒間違えた回答を読み込む
3. お気に入り登録を全削除
4. 本試験モード1周
5. 本試験モードの履歴から間違えた問題を見直し⇒間違えた問題はお気に入り登録（ワンボタンでできます）
6. お気に入り登録した問題1周
7. お気に入り登録を全削除
8. 3~7を繰り返して9割以上を安定できるようにする

## AWS サンプル問題

AWSサンプル問題URL
https://d1.awsstatic.com/ja_JP/training-and-certification/docs-dev-associate/AWS-Certified-Developer-Associate_Sample-Questions_C02.pdf

10問の選択式問題のサンプルが公開されています。すべての問題に解説が載っているため必ず目を通しておきましょう。

# 時間ペース配分

AWS認定デベロッパーアソシエイトの試験時間は130分です。問題数は65問です。
結論を先に言うと時間は十分にあるので焦る必要はありません。

私のペース配分は下記でした。特に急がずに回答してもかなり時間が余りました。
見直しをする時間も十分あります。ゆっくりと確実に回答しましょう。

|  |予定ペース  |実際ペース  |
|---|---|---|
|選択式問題の解答  |60分  |45分  |
|見直し |20分  |10分  |
|合計| 80分 | 55分(試験時間75分余り)|


# その他感想
- DynamoDBの読み込み・書き込みキャパシティユニット(RCU, WCU)の計算問題は出題されなかった（たまたま？）
- Elastic Beanstalkのデプロイポリシーは理解しておく ⇒ ローリングと追加バッチによるローリングの違いは特に。
- SQSは可視性タイムアウト、ショートポーリング・ロングポーリングの適切な設定方法と意味を理解しておく
- 受付で「イヤマフ」を借りる　⇒　周りの音を遮断して集中を上げるために必ず借りることをおすすめします
- 試験終了後すぐに結果は出ない　⇒　今は5営業日以内に別途試験結果が送信される方式になっています。
    - 私の場合は11時に試験終了して19時半ごろに結果が届きました。  

# おわりに
現行のDVA-C02は2023年2月27日までのようです。
https://aws.amazon.com/jp/certification/coming-soon/

新しいバージョン(DVA-C03)が始まると試験範囲も広がり難易度は上がるので、早めに取っておくほうがいいかもしれません。
ER図の関係

# ER図とは
E(Entity:実体）とはテーブルのこと。
R（Relationship：関連とは文字通りテーブル同士の関連のこと。

# ER図には流派がある
代表的なフォーマットに```IE(Information Engineering)表記法```と```IDEF1X```がある。

# テーブル同士の関連
ER図を書くとき、```最初に着目するポイントは、あるテーブルの主キーが他のテーブルに列として含まれてるかどうか```という点です。
その場合2つのテーブル間には意味的な関連があることになるからです。

## 一対多
社員テーブル、会社テーブル、部署テーブルの3つのテーブルがあるとする。
社員テーブルの中に会社テーブルの主キーと部署テーブルの主キーが含まれている。

会社テーブルには一つの会社は1行しか含まれません。
しかし
社員テーブルには```一つの同じ会社IDが複数行現れている```。このことを```一対多```という。

## 一対一
```あまり見かけない```。
2つのテーブルのレコードが１対１に対応するということは要するに、```2つのテーブルの主キーが一致するケース```であり、そうであれば```普通は一つのテーブルにまとめてしまっても問題ない```からです。

### 気づき
ちょっとこれはわからない。

## 多対多
テーブルを作っていくと出来上がることがある。
リレーショナルデータベースのお約束として、この多対多の関連は作ってならないということになっています。

### 気づき
両方のテーブルに同じIDが複数行現れているのか。

### リレーショナルデータベース
p6
関係データベースとも呼ばれてる。
現在最も広く利用されているデータベース。
データを人間が理解しやすい2次元表の形式で管理するため、データの取り扱いが他のデータベースに比べると直感的でわかりやすいです。

## 関連実態
学生テーブルと講義テーブルがある。
その時
一人の学生が講義テーブルで複数行現れ、講義テーブルにもその学生が複数行現れることになる。
これが問題になる。

その時に```関連実態(associative entity)```がある。
受講テーブル（今回の関連実態）を作成して、```それぞれの主キーの組み合わせを持ったキー```を主キーに持つ。
学生と受講の関係は```一対多```、講義と受講の関係は```一対多```。
ER図から多対多の関係が消去される、という仕掛けになる。

```リレーショナルデータベースを使ったシステムを作るうえでは必ずと言っていいほど使用する技術```

### 気づき
人工的なテーブルを作成して多対多の問題を解消するのか。

# ```IE(Information Engineering)表記法```と```IDEF1X```
図を書かねくてはいけないので省略します。

https://knooto.info/erd-crows-foot/

https://gihyo.jp/dev/feature/01/database/0002

# 感想
とりあえず一対多、　多対多のことは理解できた。
一対一はこれから理解しよう。

# 出典
https://www.shoeisha.co.jp/book/detail/9784798124704
Unityローカル座標について

Unityでローカル座標を操作する際の
個人的に簡単だった方法

オブジェクトを回転させたりした後は
localPositionやtransform.right
などを使用して操作すると自分はうまくいかなかったためメモ
```:C#:
第二引数のSpace.Selfでローカル座標を変更できる
GameObject.transform.Translate(-speed, Space.Self)
```
【備忘録】gccでOpenGLを使う

# 環境 
- M1 MacBook(2020)
- Xcode 14.2 (14C18)

# gccのコマンド 
例の通り、プロジェクトが存在しているディレクトリに` cd `を利用して移動する。そのディレクトリで以下のコマンドを実行する。 
```
gcc -framework GLUT -framework OpenGL MainFunction.c ic2-CommonHeaders.h
```
10年以上の長期サポートが求められる環境におけるWPFアプリケーション開発のはじめの一歩

# はじめに
ここでは、10年以上の長期サポートが求められるような環境におけるWPFアプリケーション開発の、はじめの一歩をまとめる。

## 名前
アプリケーションの名前を後から変更するのは結構大変なので、最初にプロジェクトを起こす段階で慎重に考える。

## アイコン
Windowsエクスプローラで自分のexeを見たときに、詳細表示から特大アイコン表示まで、きれいに表示させたいもの。
特に愛着のある自分のアプリケーションならなおさら。
おすすめのツールを紹介する。

アイコン ウィザード
http://www.vector.co.jp/soft/dl/winnt/amuse/se430751.html


## MVVMライブラリ
世の中には、多数の優良ライブラリが存在するが、長期保証や開発メンバが十分にそろわない環境では、VisualStudioのアップデートや.NETのバージョンアップなどにおいて、このライブラリの存在が足かせになる場合がある。
また、プロジェクトごとに異なる手法を用いると、少数サポートの中で限界を迎える。
極力、必要な部分を自作するのがよい。

MVVM light toolkit
https://github.com/lbugnion/mvvmlight

prism
https://github.com/PrismLibrary/Prism

Livet
https://github.com/runceel/Livet

.NET Community Toolkit（★個人的にとても気になる）
https://github.com/CommunityToolkit/dotnet

## Nuget設定
ツール＞オプション＞NuGetパッケージマネージャ＞全般＞パッケージの管理を、「Packages.config」から「PackageReference」
ChatGPT, Bing AI,その他AIでできたこと

ChatGPT, Bing AI,その他AIでできたことや使えそうなことまとめ

Notion版(フィルター検索可)。
https://phrygian-forest-87a.notion.site/ChatGPT-Bing-AI-AI-cbc3f22add174cab8a2a3fed5fa93f0d

# I.ChatGPT
#### Q.相手の作業進捗を確認するメール文を教えてください。![スクリーンショット 2023-02-12 122349.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2871574/831b3a21-6d5d-60eb-3fa9-091b359a9b2d.png)
ビジネス経験が浅い方や若い人向け。
ビジネスメール文の書き方や構成に悩んだらAIに聞いてみるのもあり。

#### Q.他人に調査結果を説明するときの手順を教えてください。![スクリーンショット 2023-02-12 124317.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2871574/3d14d3d6-795a-25a8-f12c-28aad256d4e2.png)
資料説明など、一般的な仕事のプロセスを初心に帰って確認したいときにAIに聞いてみるのもあり。
一人で長時間作業していると、迷走してしまうこともあるので、壁打ち的な使い方も有効。

#### Q.プレゼンの時に意識すべきことを教えてください。![スクリーンショット 2023-02-12 124911.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2871574/db932434-96cb-472f-3857-ac5695f9e304.png)
思考を整理し、やるべきことを明確にしたいときは、基本的な内容を質問してみるのもあり。

#### Q.対策の計画手順を教えてください。
![スクリーンショット 2023-02-12 125351.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2871574/86599bdd-f839-6e30-05a9-2fe6efde7758.png)
思考を整理し、やるべきことを明確にしたいときは、基本的な内容を質問してみるのもあり。

#### Q.pythonで2列のcsvデータからヒストグラムを表示するコードを教えてください。
![スクリーンショット 2023-02-12 125529.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2871574/4094065d-6055-a27d-c67b-140bd2b84dfd.png)<details><summary>追加質問スクリーンショット</summary>
![スクリーンショット 2023-02-12 125613.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2871574/233afc81-e444-17fd-1de1-5b402542a67f.png)
![スクリーンショット 2023-02-12 125639.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2871574/f0094445-31e0-4b47-1f89-4b5da9f1764f.png)
![スクリーンショット 2023-02-12 125658.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2871574/7a926705-b592-94a4-64c6-c5a027a33e0e.png)![スクリーンショット 2023-02-12 125730.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2871574/420cf191-3219-e128-b781-1b28d0f6bdf3.png)

現時点(2023/02)では、ChatGPTはプログラムのアシスタント(AI as coding assistant)として使うのが最も有用な気がしてます。
Pythonを用いたデータ分析の使用機会は増えてきていますが、一度基礎(コードの正誤を判断できるレベル)を理解してしまえば、AIに細かいコーディングを任せながらプログラミングができると思います。

# II.Bing AI
#### Q.nvidia、intel、amdの強みや弱みについて教えてください。![スクリーンショット 2023-02-12 131825.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2871574/69e916a5-07ec-e652-11f2-23e793e8c15b.png)
ものごとの大枠を掴んだり、定性的な比較にはBing AIは結構使えそうな気がします。
一方で、業績やKPIなど定量的な内容は、即座に正誤判定が出来ないので現状(2023/02)使わない方が良い気がしてます。
freee APIをGASで使うと「403：アクセス権限がありません」と出る

# はじめに
今回、お仕事でfreee関連のツール作成を任命されました。そのため、freee APIを使うわけなのですが、どうも「403：アクセス権限がありません」的なエラーが出て先に進めません。このエラーで3日潰したので、きっと他にも困っている人がいるだろう...と思い、記事を書くことにしました。
ちなみに、筆者はゲームエンジニア(レベルデザイナー)です。

# 環境
どこまで書くべきか...
・freee API(人事労務)
・OAuth2.0
・GAS

# 問題
UrlFetchAppでfreee API(employees)を呼び出そうとしたが、「403：アクセス権限がありません」的なエラーが出る。

# 解決
### (1) 権限(スコープ)が適切でない
例えば、employeeｓの場合、GETメソッドのため「従業員：参照」にだけチェックが入っていれば使えるはずです。これの設定が適切でない可能性があります。
[freee API 人事労務](https://developer.freee.co.jp/reference/hr/reference#/%E5%BE%93%E6%A5%AD%E5%93%A1/get_company_employees)
![スクリーンショット 2023-02-12 13.25.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/69295860-f1fe-f2a0-b6d4-85c0e757b1b7.png)
[freee アプリストア アプリ管理画面](https://app.secure.freee.co.jp/developers/applications)
![スクリーンショット 2023-02-12 13.23.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/fec1cf66-bd00-e33c-2716-2f4c8649c4e5.png)

### (2) リクエストURLが不正(筆者はこっち)
私は最初、以下のように書いていました。

```js
function getEmployees() {
  const company_id = 00000000;//必要に応じて変えてください
  const accessToken = getService().getAccessToken();

  const options = {
    method: "get",
    headers: {
      'Authorization': 'Bearer ' + accessToken
    },
    payload:{
      'company_id': company_id
    }
  };

  const response = UrlFetchApp.fetch(`https://api.freee.co.jp/hr/api/v1/companies/${company_id}/employees`, options);
  const response_json = JSON.parse(response);
  return response_json;
}
```

これだと、「403：アクセス権限がありません」となってしまいます。
何がダメかというと、**payloadを指定していることです**。freee APIの中にも指定するやつはありますが、今回は不要なタイプです。
freee APIのemployeesを見直してみましょう。
![スクリーンショット 2023-02-12 13.32.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/8c8101af-bd7f-e562-42fd-995e1502964c.png)
つまり、パラメータの投げ方はこんな感じです。
|パラメータ|投げ方|
|---|---|
|limit|クエリストリングで投げろ|
|offset|クエリストリングで投げろ|
|company_id|パスで投げろ(つまりURLの{company_id}に代入で満たしている)|
|with_no_payroll_calculation|クエリストリングで投げろ|

そのため、payloadは使えないわけです。

ちなみに、payloadを使うパターンは「Request body」について言及がある時です。
以下は、freee API(会計)の[deals(POST)](https://developer.freee.co.jp/reference/accounting/reference#/Deals/create_deal)の例です。
![スクリーンショット 2023-02-12 13.39.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/11e58b89-832f-5974-ff92-0dfdc19403c3.png)

# 最後に
いかがだったでしょうか。今回は、freee APIで起きた問題と正しい使い方について紹介しました。
私個人の感想ですが、freee APIはもうちょっと使いやすくするべきでは...？と思ってしまいます。というのも、freeeを使うのは会社の中でも人事や会計の人であり、非エンジニアでも使える設計にした方がいいわけです。一端のエンジニア(といってもレベルデザイナー)が3日も溶かして詰まったわけです。クエリストリングとかpayloadとか...少なくともGASとの連携が便利ですを謳っているなら、コードでの実例は欲しいところです。使いこなせれば便利なことに間違いないので、今後のfreee APIに期待です。

今回のように、Web APIの使い方や、GAS側の使い方、Unityの使い方など幅広く紹介していく予定です。
お役に立てましたら、いいね・LGTM・フォローの方、よろしくお願いします！
[FAQ]「docker: Error response from daemon: create ${PWD}: "${PWD}" includes invalid characters for a local volume name, only "[a-zA-Z0-9][a-zA-Z0-9_.-]" are allowed. If you intended to pass a host directory, use absolute path.」

# 事象
${PWD} でカレントディレクトリを指定すると以下のエラーが発生する。
```console
docker run --rm -it -p 3001:4010 -v ${PWD}:/tmp -P stoplight/prism:4 mock -h 0.0.0.0 --cors /tmp/openapi.yaml

docker: Error response from daemon: create ${PWD}: "${PWD}" includes invalid characters for a local volume name, only "[a-zA-Z0-9][a-zA-Z0-9_.-]" are allowed. If you intended to pass a host directory, use absolute path.
```

# 解決方法
Windows版Dockerの場合、カレントディレクトリは ${PWD} ではなく %cd% で指定する必要がある。
```
docker run --rm -it -p 3001:4010 -v %cd%:/tmp -P stoplight/prism:4 mock -h 0.0.0.0 --cors /tmp/openapi.yaml
```
AWS Certified Machine Learning - Specialty(MLS-C01)合格記

会社の資格取得補助を利用してAWS MLS-C01を取得しました。
2週間の勉強でも割と手応えをもって合格できたので、勉強内容を共有します。
これから同試験を受ける方の参考になれば幸いです。

# 自分のレベル感

## AWS
エンジニアになった頃(2020年9月)、旧AWS Certified Solutions Architect - Associate (SAA-C02)を取得。業務ではEC2、S3、ECR、SageMakerを触るくらい。

## 機械学習
2022年8月から機械学習の案件に携わり、自然言語処理モデルBERTの応用モデル(TabBERT)をSageMakerでトレーニング、デプロイできるようになったくらいのレベル。案件に入る前(2022年7月)に、以下のUdemyの機械学習講座を受けた(が、1ヶ月後にはほとんど忘れていた…)。

https://www.udemy.com/course/python-for-machine-learning-data-science-masterclass/

# 試験結果
859点で合格しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/f838d7a5-86a8-92d4-9ece-db8011976b85.png)

180分 全65問の試験だったのですが、120分くらい余りました。KinesisとSageMakerに関する内容が多い印象で、混同行列に関する問題は意外にも1問も出ませんでした。また、モデルの適合不足や過剰適合(オーバーフィッティング)における対応を2~3つ選ぶ系の問題も多かったです。自然言語処理関連の問題は4~5問出たと思います。

# 勉強内容
資格勉強が業務に影響したら本末転倒なので、とにかく効率を追求しました。総学習時間は約20時間(2時間× 10日)でした。

まずは、TechStockというAWS WEB問題集に課金し、全161問を1日でざっとみてわからなそうな分野を把握しました。

https://techstock.jp/

結果、機械学習まわりのAWSサービス(Transcribe, Comprehendなど)やアルゴリズム(SVM, NTMなど)をほとんど知らない(忘れていた)ことがわかり、これらの用語をObsidianというメモ帳にまとめました。

https://obsidian.md/

用語問題系以外では、Kinesis、Glue、EMRの使い方まわりの問題がよくわからなかったので、こちらについては別途調べました。

用語メモは昼休憩中に覚え、WEB問題集は5日かけて3週しました。解けた問題は都度消していきました。1週目: 140問 → 2週目: 100問 → 3週目: 30問

6日目からKindle Unlimitedにあった回答の怪しい問題集(130問)を3日間で3週しました。

https://amzn.asia/d/45eFFxv

9日目にAWS Skill Builderで公式の無料模擬試験を受け、試験前日(10日目)に残った問題とメモを見返しました。

https://explore.skillbuilder.aws/learn

# 試験を受けた感想
本番はTechStockと似たような問題ばかりでした。Kindle問題集は類似問題対策としてやっておいてよかったと思いました。

Black Beltの確認やハンズオンは、時間に余裕があればやればいいと思います。合格だけを狙うなら必要ありません。

# おわりに
MLSが割と簡単にとれたので、他試験も5冠くらいとろうかなと思っています。
また、AWS re:Inventに参加しようと(自腹で)思っています。
【Mac】VSCodeにNeovimを入れて、ノーマルモードに戻る時に日本語入力に設定したが、インサートモードで[かな]キーを押すと日本語入力される


VSCodeのNeovimの設定で、ノーマルモードに戻る時に日本語入力になるようにした。しかし、インサートモードにしたあと、[かな]キーを入力するとノーマルモードに戻った時に入力された文字が[かな]で使われてしまう模様

![スクリーンショット 2023-02-12 12.19.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239851/4e6c9de9-0f85-223c-7964-61718a1ca460.png)

## 環境
OS: Mac Monterey 12.6.3
VSCode: 1.75.1
VSCode Neovim: 0.0.97
Neovim: 0.8.0

## 前提
- VScodeにNeovimのプラグインはインストール済み
- MacにNeovimインストール済み（brewでインストール）
- im-selectをインストール済み

## 結論
入力ソースを「ことえり」から「Google日本語入力」に変更した。

## 過程
VSCodeの設定やVSCode Neovimの設定、入力ソースの設定を調べてみたが、解決方法を見つけられなかった。。。

しかし、快適に利用できる方法としては、「Google日本語入力」を利用することで、ストレスなく「ひらがな」から「ABC」に戻ることができ、またインサートモードにしてから「ひらがな」を使用しても　不要な入力がなくなった。


## 付録
` ~/.config/nvim/init.vim` に記述した設定

```
" 挿入モードから離れたときに入力モードを切り替えるようにする。
autocmd InsertLeave * :silent !/usr/local/bin/im-select com.apple.keylayout.AB
```