OmniAICreator/Qiita-1.07M huggingface dataset:
【Vue3】Extraneous non-props attributes (XXX) 〜エラーの原因と対処

# ブラウザで警告が出ていた

Vue3で作ったフロントエンドを実行中に下記の警告がブラウザのコンソールに出力されていた。
```
Extraneous non-props attributes (xxx) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
```
表示上は問題ないようだが、本番環境へ上げた時に問題が出る可能性もあったので早めに潰しておくことにした。


# 推測

該当のプロパティ「xxx」は当初propsを使って子コンポーネントに渡していたが、参照先が複数に渡り、ネストが深いコンポーネントでも参照するので、データストアに同じ内容を持たせて、そちらを参照するように変更していたので、propsは関係がなくなっているはず、、、にも関わらずprops関連の警告が出ているということは修正漏れがあってpropsを使っている部分があるのではないか？

# 調査

xxxで関連コンポーネントを検索したところ、下記のようになっていた。

まず、親コンポーネントでは下記のように子コンポーネントにpropsを使ってデータを渡していた。
```vue
<template>
  <ChildComponent :xxx='data' />
</template>
<script setup>
  const data = ref('hoge');
</script>
```
しかし、子コンポーネントでは下記のようにdefinePropsをしておらず、渡されたデータを受け取っていなかった。
```vue
<template>
  <p>hogehoge</p>
</template>
<script setup>
 // definePropsしていない
</script>
```
そこで、下記のように親コンポーネントからデータを渡さないようにした
```vue
<template>
  <ChildComponent />
</template>
<script setup>
  // dataもデータストアに移行済みなので削除
</script>
```
これで再実行したところ、警告が消えたことを確認できた。

# まとめ

Extraneous non-props attributes (XXX) 〜が出ていたら、該当のpropsを使っているコードを検索し、親子で受け渡しに必要な手続きがされていることを確認する。
そもそも、propsをやめた時はちゃんと親コンポーネント側も修正すること！！
MariaDBで任意の期間のカレンダーを生成する

WITH RECURSIVEを使う。
```SQL
WITH RECURSIVE dates(date) AS (
	SELECT
		'2024-01-01'
	UNION ALL
	SELECT ADDDATE(date,1)
FROM dates WHERE DATE < '2024-01-18' )
SELECT * FROM dates;
```

結果
```
2024-01-01
2024-01-02
2024-01-03
2024-01-04
2024-01-05
2024-01-06
2024-01-07
2024-01-08
2024-01-09
2024-01-10
2024-01-11
2024-01-12
2024-01-13
2024-01-14
2024-01-15
2024-01-16
2024-01-17
2024-01-18
```
Unity UI チャットのような下から上へ流れるテキスト表示のやり方

なにはともあれCreate>UI>ScrollViewを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/86149f6b-1b20-38b0-5283-92a8a4f283fc.png)
CntentにVertial Layout Groupの追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/8219bec2-fabb-6394-7598-6ca786e6b48f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/d95612df-ebb4-3fba-b93f-083a7719b007.png)

Contentの子にしてTextを追加
Hierarchy右クリック>UI>Text

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/fa4c494c-030e-4c33-6ce1-35742e726f2f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/82e31e23-3027-9700-4222-539d271937f6.png)

追加したTextとコピペするとViertial Layout Groupの影響で縦に並ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/ff423525-8635-ceed-3cf0-02ae307d48a1.png)

きれいならばないときはSpacingを調整してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/372fbf98-f714-b931-45a0-f46a50374e76.png)
一度動かしてみる
![Listugokasi.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/77f2ba3b-1771-ca74-c089-322c87fa722d.gif)

ここからがやっかいだかすべて必要になる
ContntのPivotのYを0に
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/394c6ce3-78a8-5b25-560b-49a2ffe652bf.png)
ContentにContentSize Filterを追加
VerticalLayoutGroupとContentSizeFilterの値を画像のとおり設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/f2ddea0a-c8c3-f673-325d-71fbc44f5836.png)

Contentの子にTextを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/471e4c0b-9bd1-fe61-6def-ef3fdef93094.png)
下側に追加される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/31af60eb-e7e1-dd8c-f8c2-148f466ddf71.png)

ここからスクリプト
適当なの作成

```
using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class ScrollViewTest : MonoBehaviour
{
    [SerializeField] private ScrollRect scrollRect;
    [SerializeField] private GameObject addObj;
    [SerializeField] private GameObject parentObj;

    // Start is called before the first frame update
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {
        
    }
    public void AddText()
    {
        var Obj = Instantiate(addObj, parentObj.transform);
        Obj.GetComponentInChildren<TMP_Text>().text = Random.Range(0, 100).ToString();
        scrollRect.verticalNormalizedPosition = 0;
    }
}
```

TMPじゃなければTextに修正して
addObj：追加するテキストObject
ParentObj:親のObject。addObjを追加していく
scrollRect：ScrollViewのScrollRectcomponentを参照させる

![Listugokasimove.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/12897c6f-2d66-a708-1540-ef525eb1e70c.gif)

ButtonでもなんでもAddTextを呼び出す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/e8729a67-6d4c-df66-8b8e-b9f6d4b7b30f.png)

動かしてみると
![Listugokasimovefew.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/9885d504-8360-d33d-9847-7537b9243037.gif)

したから上にテキストが動いてチャットのような挙動になる。
やったね。
【Rails】ECサイトにおける新着商品の表示レイアウトの整え方

# 概要
この記事では、Bootstrap導入済みのRailsアプリケーションにおいて、ECサイトのトップページに表示する新着商品のレイアウトの整え方について言及しています。

# 環境

**Rails**: 6.1.4
**Ruby**: 3.1.2
**Bootstrap**: 4.5

# 結果
結果として、下記の画像のような感じでレイアウトが整っていれば良いと思います。
今回は割と簡素にしているので、ここからさらにレイアウトを改善して行っていただければと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524017/347c343e-c1fc-44c4-837c-c00704f38442.png)

# 実装

この章では実装の流れについて説明をしていきます。

::: note warn
**注意**
`Contorller`の処理や`View`の処理で使っている変数等々は、適宜置き換えて実装いただくようにお願いいたします。
:::

## Controllerの記述
新着商品を 「**4つ**」 表示すると仮定して処理を書いていきます。
1. where句で、`is_saled: true`を指定し、販売中のものだけに絞る
1. order句で、`created_at: "DESC"`を指定し、データ作成日時の降順にする
1. limit句で、`4`を指定し、データの件数を4件に絞る

最終的に `@items`の中身は、販売中かつ、新しく登録した商品の中で最新のデータから4件抽出したデータが入るということになります。
```ruby:homes_controller
def top
    @items = Item.where(is_saled: true).order(created_at: "DESC").limit(4)
end
```
## Viewの記述
次にViewの記述をしていきます。
レイアウトはBootstrapのclassのみでスタイリングを行います。
```erb:top.html.erb
<div class="d-flex flex-wrap">
    <% @items.each do |item| %>
        <%= link_to item_path(item.id), class: "text-decoration-none w-25" do %>
            <div class="card m-2 p-1 card-hover">
                <%= image_tag item.get_product_image(100,100), class: "card-img-top rounded shadow-sm" %>
                <div class="card-body text-body">
                    <h5 class="card-title text-primary"><%= item.name %></h5>
                    <p class="card-text text-primary">¥<%= item.price %></p>
                </div>
            </div>
        <% end %>
    <% end %>
</div>
```
簡単にclassの説明を書いておきます。
chatGPT(GPT-4)に検索・要約してもらいました。間違っている点があるかもしれませんが、参考程度に見ていただけると良いと思います。
詳しく知りたい方は下記のサイトで調べてみてください。

https://getbootstrap.jp/docs/4.5/getting-started/introduction/

- **mb-4** 
「`margin-bottom`」を要素に付与するclassであり、要素の下側に余白を追加します。ここでは「`4`」の数値が使われており、Bootstrapのスケールに従って、適度な余白が追加されます。

- **d-flex**
「`display: flex;`」が要素に対して付与され、Flexboxレイアウトを適用するということになります。

- **flex-wrap** 
Flexboxの「`wrap`」プロパティを適用します。これにより、子要素がコンテナの幅を超えると、次の行に折り返されます。

- **justify-content-between** 
Flexboxの「`justify-content`」プロパティを「`between`」に設定します。これにより、子要素がコンテナの両端に配置され、間に均等な余白が生まれます。

- **card** 
Bootstrapのカードコンポーネントを適用します。カードは、画像、テキスト、リンクなどを含むことができる柔軟なコンテナです。

- **m-2** 
「`margin」`の略で、要素の周囲に余白を追加します。「`2`」はBootstrapのスケールに従い、適度な余白が設定されます。

- **p-1** 
「`padding`」の略で、要素の内側に余白を追加します。「`1`」はBootstrapのスケールに従い、少量の余白が設定されます。

- **card-img-top**
カードの画像に適用され、画像をカードの上部に配置してくれます。

- **rounded** 
要素の角を丸めてくれます。

- **shadow-sm** 
要素に軽い影を追加してくれます。

- **card-body** 
カードの本文エリアを指定します。ここにテキストやその他の要素を配置できます。

- **text-body** 
テキストの色をデフォルトのボディカラーに設定します。

- **card-title**
カードのタイトルを指定します。通常、`h5`などの見出しタグと組み合わせて使用します。

- **card-text** 
カード内のテキストに対して適切なスタイリングが行われます。


# おわりに
新着商品用のレイアウトで最初の難関はflexを理解して、横並びにするところかな思っています。そこに対して少しでもアプローチできればとても嬉しいです。最後にですが、自分のブログでQiitaに記述するまでもない記事等々を投稿していますので見ていただけますと幸いです。

https://kt-tech.blog
[備忘録]Angular12で本番ビルドしたときにCSSが2重読み込みされる件の対処法

本番環境でstyle.cssが2回読み込まれていることに気づき、調べてみました

# 対処法

以下のIssueで解決策を投稿してくれている人がいました
[inlineCritical CSS asynchronous loading method breaks with CSP](https://github.com/angular/angular-cli/issues/20864#issuecomment-844823912)

angular.jsonのビルド時の最適化設定を変えることで対処出来ました

```angular.json
"optimization": true
```

　↓　

```angular.json
"optimization": {
  "scripts": true,
  "styles": {
    "minify": true,
    "inlineCritical": false
  },
  "fonts": true
},
```

# 原因

どうやらCSP（ContentSecurityPolicy）でscript-srcを指定すると、最適化でインライン化されたCSSが壊れてしまうらしいです。
まぁそれでどうしてCSSが2回読まれてるのかよくわかってないですが。。。

以下のIssueによると、Angular12から`inlineCritical: true`がデフォルトになったらしいです
[Duplicate global styles in production build](https://github.com/angular/angular-cli/issues/20852)
Github ActionsでもPrivate Repoをgo getしたい

# 目的
CIを回している時に、プライベートリポジトリの`go get`に失敗したので、それを解決します。
普段ローカルでプライベートリポジトリをインポートする際、`GOPRIVATE`環境変数を利用しているかと思いますが、同様のことをCI環境（Github Actions）で行うといった内容です。

# 準備
Githubの自動トークン認証を使います。
Personal Access Token（PAT）はセキュリティ的な観点から利用しません。
自動トークン認証は`${{ secrets.GITHUB_TOKEN }}`で一時的なトークンを発行できます。権限はPATより弱いですが、`go get`するには十分です。

https://docs.github.com/ja/actions/security-guides/automatic-token-authentication

# 解決方法
このように指定すると解決されます。
```
run: |
    git config --global url."https://github-actions:${{ secrets.GITHUB_TOKEN }}@github.com/".insteadOf "https://github.com/"
    GOPRIVATE="github.com/<org>"
    
    // go get ~~
```

以上
node js でdiscord のbot作成#1 nodejsの導入botを起動

# この記事を書いた自分の環境
| 名前(アプリ名とか)| バージョン |
|:-:|:-:|
| pc  | Windows10  |
| nodejs  |  v21.6.2  |
| discord js  | 14.14.1  |
# node js 導入
まず以下のリンクに飛びましょう

https://nodejs.org/en

そしたら　Current
Latest Features
って書いてある方を選びましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3725086/617da1a6-e126-fc6e-ca53-8575918af092.png)
って感じのやつです21.6.2って書いてあるけれどこれが違ってもok

```bash:cmd
node -v
```
って打ったら
```console:cmd
v●●.●.●
```
って出たら成功です※●はバージョン

# bot制作
そしたら次のリンクに飛んで

https://discord.com/developers/applications

New Applicationを押しましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3725086/0ab63b25-1b66-80b6-ad94-2564dbc89ba7.png)

そしたら画面が出るのでこのようにしてくださいサンプルbotのところは好きなのにしてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3725086/d195301b-6845-5af6-cebf-e276c3865d41.png)
Createを押すとbotが制作されますのでそこから左側にある
BOT
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3725086/3f93d4d0-81bc-1cfa-7da2-633d819ae3ac.png)
を押しましょう

そしたらTokenを習得しましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3725086/2928ff3d-3e16-6b56-7f95-f8c17d7ce777.png)

のボタンを押すとTokenが表示されるのでコピーなどをしてください※後で使います

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3725086/eb53d677-adc0-d0f9-474b-4d2867c71c0a.png)

:::note alert
トークンは他の人に教えないでください教えると乗っ取られれる可能性があります教えてしまったときはReset Tokenでトークンを再生成しましょう

:::

そしたらbot用フォルダーを作りましょう
名前は好きな名前でいいです

そしたらindex.jsというファイルを作りましょう

次はdiscord.jsを入れましょう
作ったフォルダーで以下のコマンドを実行してください
```console:cmd
npm i discord.js@v14.14.1
```
※@の後は入れなくてもいいです@v14.14.1を入れるとこの記事と同じバージョンで書けるので安定してます
```console:cmd
added 26 packages, and audited 27 packages in 5s
```

って感じのが出てくると思いますもしnpm ERR! code E404みたいなのが出たら導入失敗ですスペルミスとかを確認して下さい

# プログラミング
```javascript:index.js
//インポートここで必要なものをdiscord jsからとってます
const {Client,GatewayIntentBits, GuildTemplate} = require("discord.js")
//Clientを用意しますGatewayIntentBitsはオプション的なもの
const client = new Client({intents:[]})
//botが起動したときに実行されますcはclient
client.on("ready",async (c) =>{
    console.log(`${c.user.tag}でログインしました`)
})
//クライアントにログインここに先ほどのトークンを入れましょう
client.login("先ほどのトークン")
```
って感じに記入しましょう
作ったフォルダーで以下のコマンドを実行してください
```bash:cmd
node ./index.js
```
と入力しましょう

```console:cmd
●●●●#●●●●でログインしました
```
みたいな感じで出てきたら成功ですサーバーに導入などは次回へ

# まとめ的な

今回はdiscord jsでbotを制作について解説しました
ちなみに投稿主は投稿初めてです
分からないことがあったら是非質問してください
【備忘録】めちゃくちゃ便利だったWebサービス一覧

自分用の備忘録です。
詳しいことはリンク見てください。

### 技術系ブログ
#### Qiita
多分一番使ってます。
UIも見やすく、色々な記事があって重宝しています。
#### Zenn.dev
これまた随分使いやすく、2番目くらいには使っています。

https://zenn.dev

### プログラミング関係
#### paiza.io
Webでプログラムが書けて、しかも実行できるので、めっちゃ使ってます。

https://paiza.io/ja

#### GitHub
言わずもがな、この中で一番便利です。

https://github.com

### その他
#### Stackedit
ブラウザ上で動作するMarkDownエディタです。なかなかに便利です。

https://stackedit.io

## まとめ
以上が、めっちゃ便利だったWebサービスたちです。
他にも便利なサービスがあったら、コメントにお願いします。
Binomial distribution (二項分布) 1 



# Binomial distribution (二項分布) サンプル問題 p.150 Exercise 5.4 



## Binomial formula (二項分布公式)

$$
P(k \text{ successes in } n \text{ trials}) = \binom{n}{k} \cdot p^k \cdot (1 - p)^{n-k}
$$

## サンプル問題 p.150 Exercise 5.4 
In a certain city district, the need for money to
buy drugs is stated as the reason for 75% of all thefts.
Find the probability that among the next 5 theft cases
reported in this district



## Question (問題)

(a) exactly 2 resulted from the need for money to buy
drugs;

## **Solution** (解き方)

**(a) Exactly 2 successes (drug-related thefts):**

- *n*=5 (5 thefts reported)
- *k*=2 (exactly 2 drug-related thefts)
- *p*=0.75 (probability of a theft being drug-related)

$$
P(2 \text{ successes}) = \binom{5}{2} \cdot 0.75^2 \cdot (1 - 0.75)^{5-2}                  = 10 \cdot 0.5625 \cdot 0.0625                  = 0.087890625
$$

## Answer (回答)

**0.08789 (approximately). almost 8 %**

## reference textbook 
https://www.pearson.com/en-us/subject-catalog/p/probability--statistics-for-engineers--scientists/P200000007119/9780137273546

https://github.com/kevokevoh/LoseYourself/blob/master/statistical%20models/Probability%20and%20Statistics%20for%20Engineers%20and%20Scientists%209th%20Edition%20by%20Rorald%20Walpole.pdf
速習App Router#4 ネストされたlayout.tsx

# はじめに
この記事は下記の講座で学んだ内容をまとめています。
理解が怪しい所があるので教えてくれるととても嬉しいです。

https://www.udemy.com/course/nextjs-supabase-app-directory

# 目次
1.[速習App Router#1](https://qiita.com/warabimochi_26/items/bb3c17f06e07c080504e)
2.[速習App Router#2](https://qiita.com/warabimochi_26/items/ad7a3876d6cd614d0837)
3.[速習App Router#3](https://qiita.com/warabimochi_26/items/163f801647a1bcfa31be) 
4.速習App Router#4 <- この記事
5.[速習App Router#5](https://qiita.com/warabimochi_26/items/1192f759c9bec2c793bf)
6.[速習App Router#6](https://qiita.com/warabimochi_26/items/8c0217fbd96276fb9ed8)
7.[速習App Router#7](https://qiita.com/warabimochi_26/items/85f6a05cf9cd2554e690)

## ネストされたlayout.tsxの挙動を理解する
このような`layout.tsx`がネストされているファイル構造を想定します。

```
app/nested-layout
├── page.tsx
    layout.tsx
    second
     └─ page.tsx
        layout.tsx
        third
         └─ page.tsx
             layout.tsx
             fourth
              └─ page.tsx
```
・http\://localhost:3000/nested-layout -> `app/layout.tsx` +
`app/nested-layout/layout.tsx` + `app/nested-layout/page.tsx` が描画

・http\://localhost:3000/nested-layout/second -> `app/layout.tsx` +
`app/nested-layout/layout.tsx` + `app/nested-layout/second/layout.tsx` +
`app/nested-layout/second/page.tsx` が描画

・http\://localhost:3000/nested-layout/second/third -> `app/layout.tsx` + 
`app/nested-layout/layout.tsx` + `app/nested-layout/second/layout.tsx` + 
`app/nested-layout/second/third/layout.tsx` + `app/nested-layout/second/third/page.tsx` が描画

・http\://localhost:3000/nested-layout/second/third/fourth -> `app/layout.tsx` +
`app/nested-layout/layout.tsx` + `app/nested-layout/second/layout.tsx` +
`app/nested-layout/second/third/layout.tsx` + 
`app/nested-layout/second/third/fourth/page.tsx`が描画


ここから アクセスされたURLに対応するフォルダ内の`page.tsx`を`app/layout.tsx`まで
上に`layout.tsx`でラップしながら描画内容が作成されるという事が分かる
GridLayout(2x2)にしたときの2番目と3番目のEditor Groupを入れ替える

# やりたいこと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26310/7f5a2188-32fa-0377-345b-fa6daa52c530.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26310/c8089942-27f5-a2cb-0753-7c29292b05e9.png)

上記のように2,3の場所を入れ替えたい。

# 方法

`Toggle Vertical/Horizontal Editor Layout` ` (⌥⌘0)` コマンドを実行する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26310/2db516f1-4357-2061-d8e3-4d31d6b55110.png)

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">GridLayout(2x2)にしたときの2番目と3番目のEditor Groupを入れ替える<a href="https://t.co/TUxRDesSV7">https://t.co/TUxRDesSV7</a> <a href="https://t.co/Fo4aeodR95">pic.twitter.com/Fo4aeodR95</a></p>&mdash; vividmuimui (@vividmuimui) <a href="https://twitter.com/vividmuimui/status/1762423331796734365?ref_src=twsrc%5Etfw">February 27, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

参考: https://code.visualstudio.com/docs/editor/custom-layout#_editor-groups
Tableau Desktop Specialist を取ったどー

# Tableau Desktop Specialistの認定試験を受けてきたよ。＠テストセンター
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3487310/1940b04d-250f-8ebe-45c6-ec127659ce99.png">

<img width="100" height="100" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3487310/2bb42b7e-c025-6402-f3a8-baf15426d3f9.png">
無事合格。

## やったこと
### 会社で契約してくれているUdemyBusinessで以下の講座を受講
- 試験対策をしながら基礎スキルを身につける！ ゼロからのTableau Desktop Specialist試験対策講座
- はじめてのTableauデータ分析(入門・初級)～2時間でTableau Desktop Specialist資格対策～
- 現役データアナリストがハンズオンで徹底解説「データ活用初学者のための Tableau講座〜入門編〜」
- Tableau Public 101 ―とにかく タブロー / Tableau を使ってみたいと思ったらみるコース

### UdemyBusinessにはない講座を個人アカウントのUdemyで課金受講
- 【Tableau Desktop Specialist】最短で合格するための試験対策問題集 2023

### 書籍
- データドリブンの極意
- Tableau データ分析 ～入門から実践まで～ 第3版

## 環境
環境はTableau Publicでやっていて、試験が近づいてからTableau Desktopをインストールして14日間の無料トライアル開始。
（抽出とかファイル保存とかはPublicだとできないのでDesktop使ってから理解）

## 順番
Udemyや本を一通り目を通して、最後に三連休で試験対策問題集を試して。
間違ったところを実際のTableau画面でやってみる＆Udemyで見直すという感じ。

## 模擬試験
試験対策問題集は模擬試験が4回分あって
①30/45 66%
②33/45 73%
③35/45 77%
④34/45 75%
1周したところでギリギリ合格ラインを行ったり来たり。
結局こすり倒して4周して自信を付ける。

## 試験当日
試験の感想
- 7問が全然わからん
- 7問が微妙
- 残り31問がたぶん合ってる
という内訳。
Udemyで課金した試験対策問題集と被ったのは7問だったかな？

1問だけ、「1つ選択してください。」という問題なのにラジオボタンじゃなくてチェックボックスになっている問題があって悩んだ。
変なところで悩ませないでほしい。（最後に意見を書けるのでこれを書いておいた）
速習App Router#3 サーバーコンポーネント・クライアントコンポーネント

# はじめに
この記事は下記の講座で学んだ内容をまとめています。
理解が怪しい所があるので教えてくれるととても嬉しいです。

https://www.udemy.com/course/nextjs-supabase-app-directory

# 目次
1.[速習App Router#1](https://qiita.com/warabimochi_26/items/bb3c17f06e07c080504e)
2.[速習App Router#2](https://qiita.com/warabimochi_26/items/ad7a3876d6cd614d0837)
3.速習App Router#3 <- この記事
4.[速習App Router#4](https://qiita.com/warabimochi_26/items/41714929576c8d0cf297)
5.[速習App Router#5](https://qiita.com/warabimochi_26/items/1192f759c9bec2c793bf)
6.[速習App Router#6](https://qiita.com/warabimochi_26/items/8c0217fbd96276fb9ed8)
7.[速習App Router#7](https://qiita.com/warabimochi_26/items/85f6a05cf9cd2554e690)

## サーバーコンポーネントについて
サーバー側で実行されてレンダリングされる。
それによりサーバーコンポーネント内のコードがクライアントに送られない。

サーバーコンポーネントのメリット
・コンポーネント単位でasync await が使えるのでデータ取得が簡単
・シークレットキーが使える

サーバーコンポーネントのデメリット
・ブラウザのAPIが使えない
・Reactのよく使うHooksが使えない
・onClickなどのイベントリスナが使えない

## クライアントコンポーネントについて
ブラウザ側で実行されてレンダリングされる。

クライアントコンポーネントのメリット
・Reactのよく使うHooksが使える
・onClickなどのイベントリスナが使える

 
クライアントコンポーネントのデメリット
・データ取得にasync wait が使えない
・NEXT_PUBLIC_がついてるenvしか使えない

## サーバーコンポーネントの描画内容をブラウザを更新せずに描画させるには
`router.reflesh()`を使う。
`router.reflesh()`が実行されるとサーバーコンポーネントが実行されてその結果が描画されるのでクライアントコンポーネントの`state`には影響しない。
Pythonで「Pythonの引数における参照渡しと値渡しについて」の動作を確認してみた

# 概要

Pythonで「Pythonの引数における参照渡しと値渡しについて」の動作を確認してみました。以下のページを参考にしました。

https://www.javadrive.jp/python/userfunc/index3.html

# 実装

以下のファイルを作成しました。
```sample.py
def myfunc(n):
    print(n)
    n[1] = 15
    print(n)

x = [10, 20]
print(x)

myfunc(x)

print(x)
```

以下のコマンドを実行しました。
```
$ python3 sample.py 
[10, 20]
[10, 20]
[10, 15]
[10, 15]
```

# まとめ
なにかの役に立てばと。
【Flutter】FlutterとWeb3について（その1）

![スクリーンショット 2024-02-27 18.08.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/669c682c-28b5-cf3a-7d7a-2a946110ac94.png)


こんにちは。いせりゅーです。
開発する中でWeb３についての記事が少なく、開発する中でとても大変だったので、記事にしようと思いました。少しでもお役に立てるような記事だと嬉しいです🙌


# Web3とは

ここでは全てを説明できる訳ではないので軽く説明します。僕自身もわかっていないことが多いので💦

以下のサイトを引用させていただいていおります🙇

https://www.ntt.com/bizon/web3_local.html


- 次世代の分散型インターネットと言われており、ブロックチェーンなどの技術を活用して、データを分散管理することにより、データはプラットフォーマーのサーバーを経由することなく、ユーザー自身の手で管理・運用できるようになっている

簡単にまとめてみると

<b>Web1.0・・・ユーザーは情報を閲覧できるだけ</b>

<b>Web2.0・・・SNSなどのプラットフォームを使って誰もが情報を発信できる</b>

<b>Web3・・・ブロックチェーンなどを使ってユーザーが自立分散的にデータを管理できる</b>

### Web2.0の問題
- Web2.0では、インターネット上のデータは爆発的に増えましたが、そこで問題になってきたのがデータの取り扱いです。GoogleやAmazonなどの巨大プラットフォーマーに莫大なデータが蓄積されるようになりました。しかし、多数のデータを特定の場所に集約することはセキュリティ上、大きなリスクになります。また、プラットフォーマーはユーザーのアカウントを凍結したり、投稿を削除したりする権限を持つので、言論の自由などが侵害される恐れも否定できません

### Web3の台頭
- Web3では、ブロックチェーンなどを使ってユーザーが自律分散的にデータを管理できるようにして解決を図ろうとしています
- Web3において、ユーザーのデータは、分散型ネットワークであるブロックチェーンに保存されます。そのため、通信やデータ保存の際に、プラットフォーマーのサーバーを経由する必要がなく、Web2.0の問題である中央集権的なインターネットの仕組みから解放されます


ひとまずこの辺りまでとしておきます。

## FlutterとWeb3について

:::note alert
2024/02/27時点での情報となっております。閲覧時期によっては仕様などが変わっている可能性があるのでご注意ください。
:::



## web3modal_flutter

- このPackagesは「WalletConnect」というサービスで使われるものです
- WalletConnectとは、QRコードを利用してスマホもしくはタブレットのウォレットアプリから、パソコンのNFTマーケットプレイスやDApps（分散型アプリケーション）にウォレットを接続できる橋渡しのようなサービスです
- マルチチェーンにも対応しており、複数のチェーンを持つウォレットに同時接続し、異なるチェーンにトランザクションを送信することが可能となっています

https://pub.dev/packages/web3modal_flutter

<b>引用文献</b>


https://walletconnect.com/

https://sbinft.co.jp/how-to-use-walletconnect/

### WalletConnectを使用してみた感想
- ドキュメントに沿って開発をしてみたところ、MetaMaskの場合だとしっかりとウォレットの接続ができました🙌
- 他のウォレットは対応外だったため、省きました
- 認証の実装についてもドキュメントを参考にしながら開発した結果、無事に機能しました
- 動画についてはリリースされて、許可が降りたら公開できたらなと思っております

ドキュメントはこちら

https://docs.walletconnect.com/web3modal/flutter/installation


# 最後に
まとめて投稿しようと思ったのですが、大変だったので、分けることにしました🙇
少しでもWeb3開発のお役に立てれば嬉しいです！！
速習App Router#2 SSR・CSR・ISR

# はじめに
この記事は下記の講座で学んだ内容をまとめています。
理解が怪しい所があるので教えてくれるととても嬉しいです。

https://www.udemy.com/course/nextjs-supabase-app-directory

# 目次
1.[速習App Router#1](https://qiita.com/warabimochi_26/items/bb3c17f06e07c080504e)
2.速習App Router#2 <- この記事
3.[速習App Router#3](https://qiita.com/warabimochi_26/items/163f801647a1bcfa31be) 
4.[速習App Router#4](https://qiita.com/warabimochi_26/items/41714929576c8d0cf297)
5.[速習App Router#5](https://qiita.com/warabimochi_26/items/1192f759c9bec2c793bf)
6.[速習App Router#6](https://qiita.com/warabimochi_26/items/8c0217fbd96276fb9ed8)
7.[速習App Router#7](https://qiita.com/warabimochi_26/items/85f6a05cf9cd2554e690)

## App RouterでのSSR・CSR・ISR
Pages Routerでは`getServerSideProps`や`getStaticProps`を使ってレンダリングを決めていたが、App Routerでは`fetch`に渡すオプションを使ってレンダリング方式を決める。

fetchに渡すオプションには
・{ cache: "force-cache" }
・{ cache: "no-store" }
・{ next: { revalidate: 10 }}
が存在する。
・{ cache: "force-cache" } は SSR
・{ cache: "no-store" } は SSG
・{ next: { revalidate: 10 }} は ISR
を意味する。


### 使う時はコンポーネントの中でfetchを実行し、オプションを渡す
```typescript
    const res = await fetch(`${process.env.url}/rest/v1/notes?select=*`, {
        headers: new Headers({
            apikey: process.env.apikey as string
        }),
        cache: "no-store"
    });
```

## さいごに
SSRとRSCの違いがあまり分かっていない分かりやすく説明出来る方教えていただけたらとても嬉しいです。
vue3に対応しているdatepicker(vue-flatpickr-component)でtooltipを出すのに苦労したのでメモ

### flatpickr
標準のdatepickerと違い、期間を選択できる。
複数月を表示できるなど、高機能なツール。

https://flatpickr.js.org

[github](https://github.com/flatpickr/flatpickr)

### vue-flatpickr-component

[github](https://github.com/ankurk91/vue-flatpickr-component)

flatpickrをvue3で使いやすくしたラッパー。
サンプルのスタイル(input-groupとか)がbootstrapベースなのでtailwindcssで使う場合は注意。

```javascript:resources/js/Test.vue
import flatpickr from "vue-flatpickr-component";
import "flatpickr/dist/flatpickr.css";
import { Japanese } from "flatpickr/dist/l10n/ja.js";

<script setup>
...
const date = ref("2024-02-19");

const config = ref({
  wrap: true,
  allowInput: true,
  dateFormat: "Y-m-d",
  locale: Japanese,
});
...
</script>

<template>
...
<flatpickr
  v-model="date"
  :config="config"
  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
  placeholder="Select date"
  name="date"
/>
...
</template>
```
### 日曜、土曜の色変え

こちらを参考に
祝日はほぼ変わらないので毎回APIたたくより
内部データ保持でもよさそうですが。

http://cmz.wp.xdomain.jp/archives/1070

### 祝日になんの祝日か出したい
いろんなツールチップライブラリを試したけど表示されなかったが
よくよく調べてみたら、flatpickrの大本の要素(flatpickr-calender)のz-indexが999999になっていて他の要素が上に出ないようになっていただけだった。

1 cssを上書きする

```css:resource/css/flatpickr-ja.css
.flatpickr-calendar.open {
  z-index: 9999 !important;
}
```

2 flatpickrの日を生成するeventで祝日のデータを仕込む
3 mounseenterとmouseleaveでtooltipを動的生成する。

別途ライブラリとして`dayjs`と`floating-vue`を使用。

```javascript:resources/js/Test.vue
import {
  hideAllPoppers,
  createTooltip,
  destroyTooltip,
} from 'floating-vue';
import 'floating-vue/dist/style.css';
...
const holidays = ref({
    "2023-01-01": "元日",
    "2023-01-02": "休日 元日",
    "2023-01-09": "成人の日",
    "2023-02-11": "建国記念の日",
    "2023-02-23": "天皇誕生日",
...
};
...
const config = ref({
...
  onDayCreate: onDayCreateFlatpickr,
...
});
// 要 import days from 'dayjs';
function onDayCreateFlatpickr(selectedDates, dateStr, instance, data)
{
  const day = dayjs(data.dateObj);
  const ymd = day.format('YYYY-MM-DD');
  if (ymd in holidays.value ) {
    // dataにセットしてmouseover/leaveのイベント追加
    data.dataset.holidayName = holidays.value[ymd];     
    data.addEventListener('mouseenter', mouseEnterEventFlatpickr);
    data.addEventListener('mouseleave', mouseLeaveEventFlatpickr);
  }
}

const mouseEnterEventFlatpickr = (event) => {
  const el = event.target;
  const tooltip = createTooltip(el, {
    triggers: [],
    content: el.dataset.holidayName,
  });
  tooltip.show();
}

const mouseLeaveEventFlatpickr = (event) => {
  const el = event.target;
  destroyTooltip(el);
}

```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180512/863c9650-e7c7-0ccd-0225-857d9727a007.png)
速習App Router#1 ルーティング・ファイルの意味

# はじめに
この記事は下記の講座で学んだ内容をまとめています。
理解が怪しい所があるので教えてくれるととても嬉しいです。

https://www.udemy.com/course/nextjs-supabase-app-directory

# 目次
1.速習App Router#1 <- この記事
2.[速習App Router#2](https://qiita.com/warabimochi_26/items/ad7a3876d6cd614d0837)
3.[速習App Router#3](https://qiita.com/warabimochi_26/items/163f801647a1bcfa31be) 
4.[速習App Router#4](https://qiita.com/warabimochi_26/items/41714929576c8d0cf297)
5.[速習App Router#5](https://qiita.com/warabimochi_26/items/1192f759c9bec2c793bf)
6.[速習App Router#6](https://qiita.com/warabimochi_26/items/8c0217fbd96276fb9ed8)
7.[速習App Router#7](https://qiita.com/warabimochi_26/items/85f6a05cf9cd2554e690)

## フォルダでルーティングが行われる
App Routerではフォルダを階層上に作っていくことが出来る。
各フォルダにはURLパスでアクセスすることが出来る。

単純にディレクトリ構造のapp/hoge が web上の http\://localhost:3000/hoge に対応しているというだけの話

## 各フォルダに作成するファイルの意味
一つのフォルダには
・page.tsx
・layout.tsx
・loading.tsx 
・error.tsx
が存在する。
・page.tsx は そのページのUIを記述する
・layout.tsx は page.tsxに対するレイアウトを記述する
・loading.tsx は page.tsxの読み込み時に返されるUIを記述する
・error.tsx は page.tsxのエラー時に返されるUIを記述する
という意味を持つ。

### 各種ファイルのコンポーネントとしての順序は画像の通りになっている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348923/2fafc693-dff4-bbb1-cbc2-cf4186d72937.png)

例えば http\://localhost:3000 へのアクセスには app/page.tsx が app/layout.tsx にラップされた状態で描画される。
Hello Worldからの復習 ～息抜き編～

自分の復習、アウトプットでやっているが、話の枕を考える時間のほうが長いのはなぜだろう。

自分は落語が好きなのだが、本題に入る前の話が好きだったりもする。
存命ではないが、六代目桂文治は好きな落語家の一人。
立川談志の枕なんかは脱線しすぎて何の話か分からないこともあったそうで。

だから本題より面白かったりもする。
去年、KISSのライブに行ったけど、本編より会場について始まるまでの高揚感が一番楽しかったりする。

今回も例外なく前置きが長いが、どうも書きたくなってしまう性分のようで。
これも何かのアウトプットになっているのだろうと書きながら思う。

今回は少し息抜きでちょっとしたお遊びをする。(理解を深める復習には変わりない。)


##### お品書き
+ コマンドラインからのデータ入力
+ CmdLineのSample
+ 試してみよう

----

##### ◆コマンドラインからのデータ入力
javaコマンド実行時にプログラムにデータを渡せる。

どゆこと？

今まではjava クラス名
これだけをコマンドラインに入力していた。
```cmd:cmd
C:\Java\1>java HelloWorld
C:\Java\1>
```
こういうやつ

ところがどっこい
データをプログラムに渡して動かすことができる。
```cmd:cmd
>java CmdLine Hello Hello
```
例えば上記の`Hello Hello`はどこにいくんだ？となる。
これは
`public static void main(String[] args){
}`
の`args`に入る。

`String[] args`は引数という意味で、文字列型の配列argsを作るという記述だから。
そのため、配列`args`にHelloとHelloが入った状態でプログラムを動かせるということ。

```mermaid
classDiagram
class CmdLine Hello Hello[" java CmdLine Hello Hello"]{
+Hello
+Hello
}
class args["args"]{
+Hello
+Hello
}
class 0["[0]"]
class 1["[1]"]
CmdLine Hello Hello --> "(String[]args)" args
    args --> "Hello" 0
    args --> "Hello" 1
```


へぇぇ。

**◆CmdLineのSample**
-
`args`も前回まで復習していた配列なので0起算で記述します。

```java:java
class CmdLine{
	public static void main(String[] args){
		System.out.println("args[0]:" + args[0]);
		System.out.println("args[1]:" + args[1]);
		System.out.println("args.length:" + args.length); //argsの要素数の取得
	}
}
```
##### 試してみよう。
まずはデータを入力しないパターン
```cmd:cmd
C:\Java\1>java CmdLine
Exception in thread "main" java.lang.ArrayIndexOutOfBoundsException: Index 0 out of bounds for length 0
        at CmdLine.main(CmdLine.java:3)

C:\Java\1>
```

**Exception(例外)エラー**が出ました。
`ArrayIndexOutOfBoundsException`は結構あるあるエラー。`Array`は配列、`Index`は要素の番号、`OutOfBounds`は領域外の例外。
どゆこと？というと、`Index 0 out of bounds for length 0`、つまり要素にデータが何もないよと怒られています。
じゃ次。

---
わかったわかった。データを入れたら良いのね。
特別に3つ入れてあげるよ。


```cmd:cmd
C:\Java\1>java CmdLine Hello Hello aaa
args[0]:Hello
args[1]:Hello
args.length:3

C:\Java\1>
```
特にエラーが起こることはない。
`args.length`で要素数も3つ取れている。
ただ、データ型の[ ]は2つしかないので3つ目のデータは表示されない。
`System.out.println("args[2]:" + args[2]);`を作れば3つ目も表示される。
じゃ次。

---

プログラム通りに要素数を2つ。
言われたこと以外しないパターン。

```cmd:cmd
C:\Java\1>java CmdLine Hello Hello
args[0]:Hello
args[1]:Hello
args.length:2

C:\Java\1>
```
特にいうことなし。
ですよね。


さて、また次からはしっかり基礎復習をしよう。
tqdmで進捗確認（プログレスバー）



## はじめに
tqdmで進捗確認（プログレスバー）に関しての備忘録です。
コードを書き始めて1年以内の若輩者です😅
もし間違いがあれば、ご指摘いただけると助かります🙇
<br>
## 🦁<INS>**結論**</INS>🦁
ループ処理や大きなデータを読み込んだりする際に進捗を簡単に確認できるようにするためのツール。
並列処理、非同期処理などにも使える。

:::note info
押さえておくべき点
* forループで直接使用できる。
* 表示のフォーマットや速度の単位を変更できる。
* スレッドやプロセスでの使用もサポートされてる。
:::  
***

:::note warn
利用シーン
* ループ処理。
* 大量のデータ処理
* ファイルダウンロードしてるとき
:::  
***

:::note alert
注意点
* tqdmを使用するとわずかに処理が遅くなる場合がある。
* 複数の進捗バーを同時に使うと出力が乱れることがある。
* エラーが発生しても進捗バーが残る場合があるので適切に処理する必要ある。
:::  

***

## <INS>**使用方法一覧**</INS>

## <INS>**基本の使い方**</INS>

```py
from tqdm import tqdm
import time

# 100回繰り返すループ
for i in tqdm(range(100)):
    # ここでは例として、各繰り返しで0.1秒待つ
    time.sleep(0.1)
```
***  

## 1. `unit`と`unit_scale`

```py
from tqdm import tqdm
import time

# 'unit'を指定して、単位を'files'に設定
# 'unit_scale'をTrueにして、指定したunitのデータサイズを1000単位でKを表示するように設定
for i in tqdm(range(4500), unit='files', unit_scale=True):
    time.sleep(0.001)
```

データサイズ
1. バイト（B）: 1B〜999Bまで
2. キロバイト（KB）: 約1,000B（正確には1KB = 1024B）〜約999KBまで
3. メガバイト（MB）: 約1,000KB〜約999MBまで
4. ギガバイト（GB）: 約1,000MB〜
unit_scale=Trueは、進捗バーを上記の単位に自動的に調整。

## 2. `bar_format`
進捗バーのフォーマットをカスタマイズできる。プレースホルダを使って、表示したい情報とそのレイアウトを指定できる。

###ベースとなる配置
```py
from tqdm import tqdm
import time

# カスタムのbar_formatを指定
for i in tqdm(range(100),
              bar_format='{l_bar}{bar:20}{r_bar}',
              desc="Processing"):
    time.sleep(0.02)
```
以下は、bar_formatで使用できる一般的なプレースホルダーとその表現内容です：

* {l_bar}: 進捗バーの左側に表示される部分（デフォルトでは進捗状態を表すテキスト）
* {bar}: 実際の進捗バーのグラフィカル表示部分
* {r_bar}: 進捗バーの右側に表示される部分（デフォルトでは残り時間などの情報）
* {n}: 現在処理されたアイテムの数
* {total}: 処理すべき全アイテムの総数
* {elapsed}: 既に経過した時間（秒）
* {remaining}: 完了までに予想される残り時間（秒）
* {rate}: 処理速度（アイテム/秒）
* {desc}: tqdmのdescパラメータによって指定された説明文
* {percentage:3.2f}: パーセンテージで示される（3.2f = 100.00%）


## 3. `initial`と`position`
initial: 最初に表示する進捗の量を設定できる（進捗バーの初期値）
position: 複数の進捗バーを使う際に、進捗バーの縦位置を指定できる。

```py
from tqdm import tqdm
import time

# 'initial'で開始時の進捗を50に設定、2つの進捗バーを表示して、それぞれに'position'を設定
for i in tqdm(range(100), initial=50, position=0):
    time.sleep(0.02)
for j in tqdm(range(50), position=1):
    time.sleep(0.04)
```

## 4. `leave`
処理完了後に進捗バーを表示し続けるかどうかを選択できる（TrueかFalse）
```py
from tqdm import tqdm
import time

# 'leave'をFalseに設定して、処理完了後に進捗バーを非表示にする
for i in tqdm(range(100), leave=False):
    time.sleep(0.02)
```

## 5. `colour`
進捗バーの色を指定できる。
```py
from tqdm import tqdm
import time

# 'colour'を指定して、進捗バーの色を青に設定
for i in tqdm(range(100), colour='blue'):
    time.sleep(0.02)
```

## 6. `ncols`
ncolsは進捗バーが占めるコンソールまたはターミナル上の文字数（列数）を指定できる。
```py
from tqdm import tqdm
import time

for i in tqdm(range(100), ncols=80, desc="Processing"):
    time.sleep(0.02)
# 進捗バーの幅を半角80文字に固定
```

## まとめ✍️
プログレスバーは待ち時間を有効に使うために必要なツール。
時間がかかる処理にはどんどん活用していく。
約数の問題「北海道大学2024年前期文系第１問 」をChatGPTとsympyでやってみたい。

~~**パイソニスタの方へ**~~
~~・ChatGPT-3.5先生の、どこが間違っているのかわかりませんでした。~~
~~・sumの使い方を教えて下さい。~~
・コメントをいただきました。ありがとうございました。

# オリジナル
 問題解答解説

https://mathmathmass.exblog.jp/33697399/

＞2024年解答速報 数学入試問題 様
未登録(2024/02/27)

上と同じです。大学入試数学問題集成 様＞テキスト
https://mathexamtest.web.fc2.com/2024/202410001/2024100010100mj.html#top-0106

公式ホームページ
未登録(2024/02/27)

# sympyで(オリジナル 様の方法で)
・勉強中

# ChatGPT-3.5先生が自己採点されました。
**???私は、どこが間違っているのかわかりませんでした。**
**???繰り返すと、先生の回答が変わります。**

「約数の総和を計算」と、ChatGPT-3.5先生が判断されました。
```
(1)自然数m,nについて、2^m・3^nの正の約数の個数を求めよ.`
(2)6912の正の約数のうち、12で割り切れないものの総和を求めよ.
```
??? 返信:間違っていますが、ステキです。一部省略。
```
(1)...(m+1)(n+1)個あります。...
(2)...よって、6912の正の約数のうち、12で割り切れないものの総和は6848です。...
```
#### 私は調子にのって。
```
回答の自己採点をお願いします。
```
??? (再)返信:間違っていますが、ステキです。一部省略。
```
...
自己採点結果：
(1) 正解
(2) 正解

両方とも正しい回答です。
```

# ChatGPT-3.5先生にsympyのコード出力してもらいました。
・1行、最終行に追加です。
```
(1)自然数m,nについて、2^m・3^nの正の約数の個数を求めよ.`
(2)6912の正の約数のうち、12で割り切れないものの総和を求めよ.
sympyでお願いします。
```

```python
###############
# 間違っています。
###############
from sympy import factorint

# 問題1
def count_divisors(m, n):
    divisors = factorint(2**m * 3**n)
    count = 1
    for exp in divisors.values():
        count *= (exp + 1)
    return count

m = 3
n = 2
result1 = count_divisors(m, n)
print("問題1の解答:", result1)

# 問題2
def sum_of_non_divisible_by_12_factors(number):
    divisors = factorint(number)
    total_sum = 0
    for divisor, exponent in divisors.items():
        if divisor % 12 != 0:
            total_sum += divisor * (exponent + 1)
    return total_sum

number = 6912
result2 = sum_of_non_divisible_by_12_factors(number)
print("問題2の解答:", result2)
```
・SymPy Liveで

https://live.sympy.org/

```python
問題1の解答: 12
問題2の解答: 30
```


# sympyで、私のいつもの方法のつもりが...
・自分でプログラミングするのが、面倒くさくなってきました。
**・自分が考えているコードより、ステキです。**
```
6912の約数のうち、12で割り切れない約数の総和ををsympyでお願いします。
```
```python
from sympy import divisors, Sum, symbols

# 6912の約数を計算
divs = divisors(6912)

# 約数の中で12で割り切れないものをフィルタリングして総和を計算
x = symbols('x')
s = Sum(x, (x, 0, len([d for d in divs if d % 12 != 0]) - 1))

# 総和を計算
result = s.doit()
print(result)
```
？？？　調子が悪いです。**パイソニスタの方へ教えて下さい。**
```
105
```

# sympyで、やっぱり、私のいつもの方法です。
・(2)で(1)を使っていません。申し訳ありません。
```python
from sympy import *

var('m,n' )
# 問題1
def count_divisors(m, n):
    return (m+1)*(n+1)
result1 = count_divisors(m, n)
print("# 問題1の解答:", result1)

# 問題2
def sum_of_non_divisible_by_12_factors(number):
    total_sum = 0
    sol = divisors(number)
    for i in range(len (sol )):
        if sol[i] % 12 != 0:
            total_sum += sol[i] 
    return total_sum

number = 6912
print("# 問題2の解答:", sum_of_non_divisible_by_12_factors(number))
# 問題1の解答: (m + 1)*(n + 1)
# 問題2の解答: 628
```

# いつもの? sympyの実行環境と 参考のおすすめです。
[(テンプレート)](https://qiita.com/mrrclb48z/items/00dd08b0317069be9342)
PyMuPDFを使ってPDFを分解してPNGにする

# 背景
- PythonでPDFをページごとに分割し、PNGファイルに変換したい場合
- [pypdf](https://github.com/py-pdf/pypdf)や[pdfminer](https://github.com/pdfminer/pdfminer.six)などいくつかPDFを操作するPythonライブラリは存在したのですが、Google Trendsで勢いのあったpyMuPDFを使ってみることにします
![スクリーンショット 2024-02-20 10.40.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20307/b254a36d-9106-1076-bad1-1fc08132432a.png)
- 他のライブラリに比べてドキュメントも一番ちゃんとしているように見えます

https://pymupdf.readthedocs.io/ja/latest/the-basics.html


# 実装

```python
import fitz
from io import BytesIO

class PDF:

    # pdfがテキストベースのものか画像ベースのものか判断する
    def is_text_base(self, file: BytesIO) -> bool:
        doc = fitz.open(stream=file.getvalue(), filetype="pdf")
        return (len(doc[0].get_text().encode("utf8")) > 0)

    # pdfの各ページをpngとしてローカルに保存します
    def convert_to_png_files(self, file: BytesIO) -> None:
        doc = fitz.open(stream=file.getvalue(), filetype="pdf")
        for page in doc:
            pix = page.get_pixmap()
            file_path = f"./page_{page.number}.png"
            pix.save(file_path)
        return

if __name__ == "__main__":
    pdf = PDF()
    with open('path/to/hoge.pdf', 'rb') as f:
        if pdf.is_text_base(f):
            pdf.convert_to_png_files(f)
        
```
閲覧情報の保存機能の実装（cookie使用）

## 概要
ウェブアプリケーションにおいて、ユーザーが現在閲覧している企業の情報をセッションやクッキーを通じて保存し、画面遷移してもその情報を保持する方法について解説します。この機能は、ユーザーがサイト内で異なるページを訪れる際にも、選択した企業を忘れずに操作を続けられるようにするためのものです。

## 実装ステップ

1. **現在閲覧中の企業情報の設定**
   - `viewing_company`メソッドをコントローラに定義します。このメソッドは、セッションまたはクッキーから企業IDを取得し、対応する企業情報をデータベースから検索します。

2. **セッションとクッキーの使用**
   - ユーザーが企業を選択した際に、その企業のIDをセッションやクッキーに保存します。これにより、ユーザーがサイト内を移動しても選択した企業情報を保持できます。

3. **ビューでの表示**
   - コントローラで定義した`viewing_company`をビューで利用して、現在選択されている企業の情報を表示します。

### コード例

```ruby
class ApplicationController < ActionController::Base
  helper_method :viewing_company
  before_action :store_user_location!, if: :storable_location?

  private

  def viewing_company # 閲覧中の企業情報の定義
    @viewing_company ||= find_viewing_company
    session[:viewing_company_id] = @viewing_company.try(:id) if customer_signed_in? && @viewing_company
    @viewing_company
  end

  def find_viewing_company
    if customer_signed_in?
      # ログイン中の場合はsessionもしくはparamsから情報取得(⇒*1)
      find_company_from_session_or_params
    else
      # ログイン中でない場合はcookieを使用する(⇒*2)
      find_company_from_params_or_cookies
    end
  end
  
  def find_company_from_session_or_params # (*1)
    Company.find_by(id: session[:viewing_company_id]) ||
      current_company ||
      Company.find_by(id: params[:company_id])
  end
  
  def find_company_from_params_or_cookies # (*2)
    Company.find_by(id: params[:company_id]) ||
      Company.find_by(id: cookies.encrypted[:viewing_company_id])
  end
end
```

## 補足
　コントローラとヘルパーのどちらでviewing_companyを定義するかについての考察です。

#### コントローラの使用基準
- **ビジネスロジック**：アプリケーションの主要なビジネスロジックやデータ処理はコントローラで行います。
- **状態管理**：セッションやクッキーを使ったユーザーの状態管理もコントローラの責務です。
- **フィルタリング**：特定のアクションの前後で共通の処理を行いたい場合（例：`before_action`）、コントローラで実装します。

#### ヘルパーの使用基準
- **ビューの補助**：ビューに表示するデータを整形するロジックはヘルパーに記述します。
- **再利用可能なビューコード**：複数のビューで共通して使用する小さなフラグメントやフォーマット変更のロジックは、ヘルパーとして定義すると便利です。
mysql2を調べた。

# mysql2をインストールする理由
具体的にわからなかった。今後の自分に頼るしかない。
以下調べた内容。

## mysql2とは？
The Mysql2 gem is meant to serve the extremely common use-case of connecting, querying and iterating on results. Some database libraries out there serve as direct 1:1 mappings of the already complex C APIs available. This one is not.

It also forces the use of UTF-8 [or binary] for the connection and uses encoding-aware MySQL API calls where it can.

### 出典

https://github.com/brianmario/mysql2#:~:text=The%20Mysql2%20gem%20is%20meant%20to%20serve%20the%20extremely%20common%20use%2Dcase%20of%20connecting%2C%20querying%20and%20iterating%20on%20results.%20Some%20database%20libraries%20out%20there%20serve%20as%20direct%201%3A1%20mappings%20of%20the%20already%20complex%20C%20APIs%20available.%20This%20one%20is%20not.

Mysql2 gemは、接続、クエリ、結果の反復処理という極めて一般的なユースケースに対応するためのものです。世の中に出回っているデータベースライブラリの中には、すでに利用可能な複雑なC APIを直接1:1にマッピングしたものもある。これはそうではない。
また、接続に UTF-8 [またはバイナリ] を使用することを強制し、エンコーディングを意識した MySQL API 呼び出しを可能な限り使用します。

### 出典
deepL

RDBMS に接続するためには、クライアントライブラリが必要になります。
### 出典
https://teratail.com/questions/321352#:~:text=RDBMS%20%E3%81%AB%E6%8E%A5%E7%B6%9A%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E3%81%AF%E3%80%81%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%8C%E5%BF%85%E8%A6%81%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82

### mysql2をバージョンダウンさせたものをインストールできない。
多分最新のものしかインストールできないのかもしれない。
# mysql-develをインストールする理由
This gem links against MySQL's libmysqlclient library or Connector/C library, and compatible alternatives such as MariaDB. You may need to install a package such as libmariadb-dev, libmysqlclient-dev, mysql-devel, or other appropriate package for your system. See below for system-specific instructions.
### 出典
https://github.com/brianmario/mysql2#:~:text=This%20gem%20links,system%2Dspecific%20instructions.

このgemは、MySQLのlibmysqlclientライブラリまたはConnector/Cライブラリ、およびMariaDBなどの互換性のある代替ライブラリに対してリンクします。libmariadb-dev、libmysqlclient-dev、mysql-develなど、システムに適したパッケージをインストールする必要があるかもしれません。システム固有の手順については以下を参照のこと。
### 出典
deepl

Linux and other Unixes
You may need to install a package such as libmariadb-dev, libmysqlclient-dev, mysql-devel, or default-libmysqlclient-dev; refer to your distribution's package guide to find the particular package. The most common issue we see is a user who has the library file libmysqlclient.so but is missing the header file mysql.h -- double check that you have the -dev packages installed.

### 出典
https://github.com/brianmario/mysql2#:~:text=Linux%20and%20other,dev%20packages%20installed.

libmariadb-dev、libmysqlclient-dev、mysql-devel、default-libmysqlclient-dev などのパッケージをインストールする必要があるかもしれません。ディストリビューションのパッケージ・ガイドを参照して、特定のパッケージを見つけてください。最もよく見られる問題は、ライブラリ・ファイルlibmysqlclient.soはあるが、ヘッダ・ファイルmysql.hがないというユーザーです。
### 出典
deepL

### 気づき
mysql2をインストールするときにはlibmariadb-dev, libmysqlclient-dev, mysql-devel, or default-libmysqlclient-devのどれかをインストールする必要があったからなのか。
tailwindcssの使えそうなサイト

### tailwindcss本家

https://tailwindcss.com

https://github.com/tailwindlabs/tailwindcss

### headlessui
本家からだしてるヘルパーコントロール
Reactとvue版で提供。
Menu(Dropdown)
Listbox(Select)
Combobox(Autocomplete)
Switch(Toggle)
Disclosure(アコーディオンっぽい)
Dialog(Modal)
Popover()
Radio Group
Tabs
Transtion(コントロールのアニメーション動作)

https://headlessui.com

https://github.com/tailwindlabs/headlessui


### Flowbite

一部の機能を実装するにはFlowbiteのjsが必要
あと、一部有料。

https://flowbite.com

https://github.com/themesberg/flowbite

### Flobite Vue
上記のコンポーネントのVue3に特化した実装したラッパー。
余計な機能もあったりするがソースを見て必要なところだけ抽出する。

https://flowbite-vue.com

https://github.com/themesberg/flowbite-vue

### PRIMEVUE

https://primevue.org

https://github.com/primefaces/primevue

### Vueform
formに特化したいろんなコンポーネント群
builderでバックエンド側のAPIの所まで用意しているが
inertiajsのAPI(useForm)との兼ね合いは不明。

https://vueform.com

以下、別コンポーネントを用意している

#### Builder

https://builder.vueform.com

#### Multiselect

https://github.com/vueform/multiselect

#### Slider

https://github.com/vueform/slider

#### Toggle

https://github.com/vueform/toggle


tailwindに対応してるっぽいけど
一部上手くいかない箇所あり




### tailwindcomponents

https://tailwindcomponents.com

### tailwindui

本家からリンク張られてるけど一部有料

https://tailwindui.com
WebサーバーをCentOS 7からRHEL 9に移行した話

CentOS 7のサポートが2024年6月30日までとなったので、移行先のOSとしてRed Hat Enterprise Linux 9（RHEL 9）を選びました。備忘録として残します。

環境はGoogle Cloud Platform（GCP）のCompute Engine上で動いているWeb-DBサーバーです。

# 現在の構成
ロードバランサの後ろに本番Web-DBサーバーが1台と、メンテサーバーが1台あります。メンテナンス時はメンテサーバーのインスタンスを起動してロードバランサの振り分けをメンテサーバーに向けます。

```plantuml
nwdiag {
  internet [ shape = cloud];
  
  network ロードバランサ {
      internet;

      本番Web-DBサーバーCentOS [address = ""];
      メンテサーバー [address = "メンテ時に切り替え"];
  }
}
```

今回は本番Web-DBサーバーをCentOS 7からRHEL 9に移行します。


# ミドルウェア
主なミドルウェアはApache, PHP, Python, MariaDBです。あとは画像系でImageMagick, OpenCVなどを使います。

ミドルウェアはdnfでインストールするので、RHEL 9がサポートしているバージョンをインストールします。

| | 移行前 CentOS 7 | 移行後 RHEL 9 |
|:-:|:-:|:-:|
| PHP |  5.4.16 | 8.0.30  |
| MariaDB |  5.5.68 |  10.5.22 |
| ImageMagick | 6.9.10  | 6.9.12  |
| Python | 2.7.5  |  3.9.18 |
| Apache |  2.4.6 |  2.4.57 |

PHPのバージョンがかなり上がるので、ちゃんと動くか心配でした:dizzy_face:

# なぜRHEL 9か
アプリケーション開発に集中したいので、あまりサーバー移行はやりたくありません。コンバートツールを使ってRHEL 7に移行して延長サポートを受ける手もありますが、PHPなどのミドルウェアも古くなってきたので、思い切ってRHEL 9に移行することに決めました。

あと、GCPならRed Hatと個別でライセンス契約しなくても、従量課金制で導入することができます。

# ざっくりスケジュール
1. Dockerの開発環境で動作確認
2. GCPのステージング環境で動作確認
3. 新しいWebサーバーに切り替え

開発環境はDockerを使います。ステージングはGCPの環境を使います。本番はロードバランサの振り分けを切り替えて新しいWebサーバーにリクエストがいくようにします。

稼働中のサービスなので無停止で本番切り替えします。

# 開発環境構築
開発環境はDockerを使います。Red Hatが提供しているQuay.ioというサイトからCentOS Stream 9のコンテナイメージをダウンロードします。

```
docker pull quay.io/centos/centos:stream9
```

タイムゾーンを設定して必要なミドルウェアをダウンロードしていきます。
```
timedatectl set-timezone Asia/Tokyo

dnf -y install httpd
dnf -y install php
： その他諸々
```

httpd.confやphp.iniなどの設定ファイルを編集して、ソースコードを設置して、あとはひたすら動作確認です。

# PHP5からPHP8で動かなかったところ
フレームワークを使わず素のPHPプログラムなのですが、そこまで修正する箇所はありませんでした。決済で使っているStripeのライブラリのバージョンをアップデートする必要があったのと、WebAPIにファイルをPOSTするときのcURLの挙動をちょっと修正しました。

# Python2からPython3で動かなかったところ
Pythonのプログラムは少しだけなので、修正箇所はprint文に括弧が必要になったことだけでした。あと、コマンドの実行方法がpythonからpython3に変更になりました。

# ステージング環境構築
ステージングはGCPのロードバランサの後ろに新しくRHEL 9のインスタンスを作成します。ロードバランサはホスト名でサーバーを振り分けます。例えば本番は（www.example.com）ステージングは（staging.example.com）でページを見れるようにします。


```plantuml
nwdiag {
  internet [ shape = cloud];
  
  network ロードバランサ {
      internet;

      本番Web-DBサーバーCentOS [address = "www.example.com"];
      メンテサーバー [address = "メンテ時に切り替え"];
      ステージングRHEL [address = "staging.example.com"];
  }
}
```

あとはひたすら動作確認をします。

# Webの本番切り替え
ステージングの動作確認が終わったらステージングを本番Webサーバーに昇格させます。

本番Web-DBをそっくり移行しようかと思ったのですが、DBのデータを移してトラブルがあったときの切り戻しが面倒なので、本番Web-DBサーバーをひとまず本番DBサーバーとして動かすことにしました。

```plantuml
nwdiag {
  internet [ shape = cloud];
  
  network ロードバランサ {
      internet;

      本番DBサーバーCentOS [address = "外部アクセス無し", shape = database];
      メンテサーバー [address = "メンテ時に切り替え"];
      本番WebサーバーRHEL [address = "www.example.com"];
  }
}
```

図があれですが、本番Webサーバーが本番DBサーバーのデータを見にいきます。Webからのリクエストは本番Webサーバーが応答します。

# DBの移行
Webの本番切り替えが問題なさそうなので、落ち着いたら本番DBサーバーのデータを移行して完了です。

```plantuml
nwdiag {
  internet [ shape = cloud];
  
  network ロードバランサ {
      internet;

      メンテサーバー [address = "メンテ時に切り替え"];
      本番Web-DBサーバーRHEL [address = "www.example.com"];
  }
}
```
# 最後に
CentOS 7のインスタンスを作成したのが2018年7月なので、サービスを続けていくと時々こういう作業をやらないといけません。なんだかんだで結構時間かかりました。やり始めたら楽しい作業でもあるんですけどね:clap:
GitHubのブランチ運用

# GitHubの運用について
- 自分の担当するプロジェクトで設定していたコーディングルール
- 備忘録として書いておこうと思う

# ブランチ運用ルール
- GitHubは下記ブランチを使い分けてソース運用(管理)する

## main：本番環境用 
- stagingブランチからのみプルリクエストを作成する

## staging：ステージング環境(営業確認(テスト)用)
- devブランチからのみプルリクエストを作成する

## dev：開発環境
- 基本の開発環境。本ブランチからのみfeature/***ブランチを作成する

##  feature/NEWBRANCH：作業用ブランチ
- 作業時に、dev環境から作業用ブランチを切り出して実装する
    - 同様のチケットで複数作業をする場合は`feature/NEWBRANCH-n`のように後ろに数字をつける
    - ※ただし、基本的に同じチケットで複数作業をするのではなく、チケットを別途作成できるようにタスクの粒度を調整する

##  ローカル開発環境

## 作業イメージ
```
dev ┬----> feature/NEWBRANCH-XXX ---> dev ---> staging ---> main
　　└----> feature/NEWBRANCH-YYY ------^
```

# コミットの粒度及びプルリクエストの取り扱いについて

## コミットメッセージ
- 各コミットには、コミットのカテゴリごとに下記のプレフィックスを付与することとする
- 例)「 feat: 〇〇機能を追加 」など

| プレフィックス  | 該当の編集 |
| ------------- | ------------- |
|feat  | 新機能の追加・新規編集・（他に該当しない場合は基本的にこのプレフィックス） |
|fix | 不具合の修正 |
| docs | ドキュメントのみの変更 |
| style | コードの処理に影響しない変更(スペースとか、書式設定とか、セミコロンの欠落とかの修正) |
|refactor | バグ修正や機能の追加を行わないコードの変更 |
| perf | パフォーマンス改善を行うためのコードの変更 |
| test | テストの項目抜けや、既存のテストの修正を行う |
| chore | ドキュメントの生成や、ビルドプロセス、ライブラリとツールをなどの変更 新機能の追加 |
| design | cssなどのスタイルだけの修正|
| delete | 不要ファイルの削除のみ実施|

## コミットのタイミング(粒度)
- できるだけメソッド単位や同じ処理のひとまとまりを意識すること
- 例えば、DB接続のための処理を作成したら、DB接続のための処理だけをひとまとまりとして)「feat: 〇〇モデルへの接続処理追加」として、コミットするなど
- また、条件を追加した時に、「feat: ●●するための条件を追加」というようにコミットしていく

## プルリクエストのタイミング(粒度)
- タスク単位で作成すること
- 最小の機能単位でレビューに出すこと(タスクも最小単位で作成すること)
- 「一覧ページ表示機能の追加」「登録機能の追加」のように、CRUD周りの機能も各機能ごとに切り出して実施すること

### 例：新規CRUD機能の実装
- 下記のような粒度となるイメージ
    - 登録部分を実装したプルリク
    - 削除部分を実装したプルリク
    - 更新部分を実装したプルリク
    - 一覧画面を実装したプルリク
    - 削除機能を実装したプルリク

## プルリクエストの名称
- 原則、「一目で何の対応をしたのかがわかる」ようにする
    - 例：ユーザーの新規登録機能実装

## プルリクエストのマージ
- プルリクエストはレビュアーに対してレビュー依頼を出すこと
- マージは、レビュアーが行うこと
- マージされたブランチは削除すること（dev, stagingを削除しないように注意）

## staging及びmainへのマージタイミング
- タスクが完了し、レビューが完了した時点でマージを行う
- mainへの反映は本番へのリリースとなるため、基本的にリリース以外でマージすることはない

## テスト実施
- テストは開発環境(dev)ブランチにて実施する
- コードレビュー → dev環境へマージ → テスト実施というフローになる
[翻訳転載] Golang Tip #12: 鍵作成時はmath/randの使用を避ける

# はじめに

https://qiita.com/a10a/items/5063899c9f4a3bf4a2f2

本記事は以下のツイートの翻訳転載です。

https://x.com/func25/status/1754477930531680532?s=20

# 鍵作成時は`math/rand`の使用を避ける

暗号化や一意な識別子の作成など、鍵の生成が必要なプロジェクトでは、鍵の品質とセキュリティは重要になります。

なぜ`math/rand`を避けるべきなのでしょうか。

`math/rand`パッケージは擬似的に乱数を生成します。

つまり、乱数の生成方法（と生成時に使用されるシード）を知っていれば、生成される乱数は予測されてしまいます。

![image](https://pbs.twimg.com/media/GFkoBkAakAAJ3wS?format=jpg&name=medium)

現在時刻をシードとして使用したとしても、実行ごとに現在時刻が大きく変動することはないため、予測不可能性（`unpredictability (entropy)`）は低いままです。

では`crypto/rand`はどうでしょうか。

`crypto/rand`は、暗号的に安全な数値を生成する方法を提供します。
（OSが提供するランダム性のソースを使用することで、予測しにくいように設計されています）

![image](https://pbs.twimg.com/media/GFknHwmboAAW2f0?format=jpg&name=medium)

暗号化、認証、その他セキュリティが重視される処理においては、`crypto/rand`の方が適しているでしょう。

# おわりに

`math/rand`, `crypto/rand`については以下にまとめられているのがわかりやすかった。

https://qiita.com/crifff/items/b116e6235fedcd18e0de