OmniAICreator/Qiita-1.07M huggingface dataset:
ぐりとぐらぐらい似てる dig と fetch の違いを解説

# 概要
ハッシュから値を取り出す方法で有名な【dig】と【fetch】に来ていただきました。

どういう時にどっちを使えば良いかわからなかったので、違いをまとめました。

# 対象
- dig と fetch をあまり使ったことが無い方
- dig と fetch の特徴を知りたい方
- 使い分けや挙動を知りたい方

# dig
dig は存在感のあるメソッドです。

階層化データからデータを掘り出していることを明示的にしてくれるので

コードの中に dig があるだけで、周辺でやっていることが透けて見えます。

### ハッシュからdigでデータを取り出す
とある amazon の summary データに来ていただきました。
``` ruby
def guri_to_dig
    summary = 
        {"marketplaceId"=>"*****",
         "adultProduct"=>false,
         "autographed"=>false,
         "browseClassification"=>{"displayName"=>"*****", "classificationId"=>"gurararara"},
         "memorabilia"=>false,
         "packageQuantity"=>1,
         "releaseDate"=>"2030-01-01",
         "tradeInEligible"=>false,
         "websiteDisplayGroup"=>"health_and_beauty_display_on_website",
         "websiteDisplayGroupName"=>"Health and Beauty"
         }
end

# "browseClassification" の"classificationId" value "gurararara" を取り出したい
summary.dig('browseClassification', 'classificationId')
=> "gurararara"

# 架空のkeyを指定すると nil が返ります。
summary.dig('fairy_tail')
=> nil
```

### dig まとめ
:::note info
dig は階層データを深掘りしていくのに適しています。
:::

:::note warn
Errorが返されるわけではないことを認識した上で、dig を使う必要があります。
:::

# fetch
fetch も存在感のあるメソッドです。

key を指定するため、階層が1段階のものに使われる傾向が高いと思います。

ネストしているデータ取得も出来ますが、dig のほうがわかりやすく書けます。多分。

### ハッシュからfetchでデータを取り出す
``` ruby
def gura_to_fetch
    summary = 
        {"marketplaceId"=>"*****",
         "adultProduct"=>false,
         "autographed"=>false,
         "browseClassification"=>"guririririri",
         "memorabilia"=>false,
         "packageQuantity"=>1,
         "releaseDate"=>"2030-01-01",
         "tradeInEligible"=>false,
         "websiteDisplayGroup"=>"health_and_beauty_display_on_website",
         "websiteDisplayGroupName"=>"Health and Beauty"
         }
end

# "browseClassification" の value "guririririri" を取り出したい
summary.fetch('browseClassification')
=> "guririririri"

# 架空のkeyを指定すると error が返ります。
summary.fetch('fairy_tail')
=> <KeyError: keynotfound: "fairy_tail">

# 架空のkeyを指定すると error が返りますが、第2引数に返したいデフォルト値を入れることが出来ます。
summary.fetch('fairy_tail', nil)
=> nil

```
### fetch まとめ
:::note warn
fetch は key がないとErrorになるので、Error処理が必要になります。
第2引数に返したいデフォルト値を入れることが出来ることが良いとこですね。
:::

# 一言
架空のkeyを指定しまうと dig は ```nil``` に、 fetch は ```KeyError```になる。気をつけなはれや〜。
いったん、箇条書きしよ？

## なぜこの記事を書こうと思ったか
開発のテクニカルディレクション・SE業務を担当していますが、
開発のメンバーだけでなく営業・デザイナーと関わる人が多いポジションです。
　
かなりの量のコミュニケーション量となりますが、
・結構つらつら長文が送られてきて読むのがシンプルにつらい
・内容を把握するのに時間がかかる
・頭に入ってこない
　
というわけで、みんなにまずは箇条書きして欲しいなと思って書きました。


## 箇条書きできてないということ
これはシンプルに情報の整理が出来ていないのだと思います。
言われたまま、起きたままを書いたり話たりする前に、1度整理をしてみてほしいです。
あとは助詞をなるべく削る、など色々なやり方があると思いますが、一旦箇条書きにしてみてほしい。
　

## 箇条書できてない例
お疲れ様です！お客様より予約システムの相談が来たのですが、工期と金額算出お願いします。

やりたいこととしては、イベントの来場予約システムを構築をお願いしたいと考えています。
来場者はLINE上で予約フォームを立ち上げて、フォームから参加したい来場日時を選び、お名前名前等の個人情報を入力して予約完了後、LINE上で予約内容が記載されたPUSHメッセージを送ります。
予約メッセージには予約内容の他にボタンが配置されていて、予約のキャンセル・変更が出来るようにしたいです。
来場日前日になりましたら、リマインドメッセージを予約者に送り、来場し忘れを防ぎたいです。

## いったん箇条書する
お疲れ様です！
お客様より予約システムの相談が来たのですが、工期と金額算出お願いします。
　
＜やりたいこと＞
・LINE上で起動する予約システム
・予約フォームでは、来場日時の選択と名前等の個人情報を取得する
・フォーム入力後、予約者に予約内容が記載されてPUSHメッセージを送信する
・PUSHメッセージには、予約のキャンセル・変更ができるボタンを配置したい
・来場日前日になったらリマインドメッセージを予約者に送りたい
　
## あとがき
箇条書きの手法など色々ありますが、一旦箇条書きで書いてみよ？という話です。
開発Tに限らず、社内の若手に読んでほしくて書きました。
書く方は整理ができ、読む方の時間も短縮になりWin-Winです。

いっかい箇条書き、してみよ？
Unity　MaterialとShaderについて

## Materialとは
色、質感、影、光沢などを設定するもの


## Shaderとは
マテリアルをどう表示させるかを制御するプログラム。

## 実際に試してみる
Squareを新規作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/f9e37c4b-64f1-144e-a87e-68630ad3b107.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/ab38acfc-de13-0d6c-b17b-c0b0547fb1c3.png)
右クリック、CreateからMaterialを新規作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/f10af6a6-a0dc-2c04-891d-1abc45d22fad.png)
inspectorからShaderをSprite>Defaultに設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/6ad0d5a0-ead9-7a46-cd64-62324b8cdf4f.png)


作成したSquareにMaterialを設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/3157f504-a5c1-e6c0-31f1-2892f4d4fde9.png)

MaterialのTintを変更すると。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/5887629b-d85d-4fea-2f36-82e67f8e6a0b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/4facd519-01f6-05a0-07f6-23cc88729eab.png)
色がかわる。

Materialから色が変更できることがわかった。
【Laravel勉強中】Tailwind CSSを反映する


# はじめに
今回は、LaravelプロジェクトにTailwind CSSを追加する。

# Tailwind CSSのインストールと設定

インストールは更新を参考に。

https://tailwindcss.com/docs/guides/laravel#vite

### インストール
```
npm install -D tailwindcss postcss autoprefixer
```

### 設定ファイルの作成
ルートディレクトリにtailwind.config.jsができる。
```
npx tailwindcss init -p
```

### 設定ファイルを変更

初期だとこうなっているので
```
/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

こうする

```
/** @type {import('tailwindcss').Config} */
export default {
    content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
【余談】PHPフレームワークphalcon


# はじめに
PHPにはphalconというフレームワークがあるらしい。
いま携わっている案件でphalconを使っていて気になって調べてみた。

# phalconって？
phalconは2012年にリリースされたPHPフレームワークで最新のverは5。

https://phalcon.io/en-us

（Get Phalconボタンの遷移先が404なのが気になる）

# phalconは高速らしい

phalconがいい理由を調べると「高速」というメリットが多く散見された。
phalconはMVCモデルを採用していてよく聞くlaravelやcakeとそこは同じだが、phalconは他と違って「Zephir」を実装している。
このZephirが高速と言われる所以らしい。

# Zephirとは
Zephirの総称は「Zend Engine PHP Intermediate」で、PHPの拡張モジュールの作成を容易にすることを目的として開発されたプログラミング言語。

Zephirで作成したプログラムは自動的にC言語のコードにコンパイラされるためPHPより高速に動作する。

# ただ人気はなさそう
ここまで聞くとメリットしかなさそうだけど、調べるとソースも古かったり使ってるプロジェクトも少ないよう。
実際に使ったことがないので理由は定かではないが、速さ以外のメリットが他のフレームワークと比べると劣っているのかも。

いつか機会があれば使ってみたい！
PythonでPDFを画像に変換する

## はじめに
PDFファイルは安定したレイアウト、簡単な転送性、高い可読性のため、日常業務で広く使用されています。場合によっては、PDFを画像に変換する必要があります。コンテンツを画像として保存することで、読み込み速度が向上し、誤って編集されるリスクも低減されます。さらに、PDFファイルやページを他のドキュメントやウェブページに埋め込みたい場合、指定された画像形式に変換することは優れた選択肢です。この文章では、Pythonを使用してPDFを画像に変換する詳細について説明します。

## ツール
* Python 3.12.0
* [Spire.PDF for Python](https://www.e-iceblue.com/Introduce/pdf-for-python.html)ライブラリ

このライブラリは購入する必要がありますが、[30 日間の無料試用版](https://www.e-iceblue.com/TemLicense.html)も提供されています。
もっと多いサンプルコードについて、[Spire.PDF for Python](https://www.e-iceblue.com/Download/Spire-PDF-Python.html)をダウンロードして参照してください。

## 準備
まず、[Spire.PDF for Python](https://www.e-iceblue.com/Download/Spire-PDF-Python.html)と plum-dispatch v1.7.4を VS Code にインポートします。
1. Pythonをダウンロードしてインストールします。
2. VS Codeで「Extensions」をクリックし、「Python」を検索してインストールします。
3. 「Explorer」-「NO FOLRDER OPENED」-「Open Folder」
4. フォルダーを選択し、そこに「.py」ファイルを追加します。
5. 「Terminal」-「New Terminal」
6. 次のコマンドを入力します。
**pip install Spire.PDF**

## PDFからラスター画像への変換
一般的なビットマップ形式は**PNG、JPG、BMP、EMF、TIFF**などです。
次のコードでは、SaveAsImage メソッドを呼び出して、PDF ドキュメントの特定のページをビットマップ イメージ ストリームに変換できます。 この画像ストリームは、拡張子が PNG、JPG、BPM、EMF、TIFF の画像ファイルとしてエクスポートできます。

たとえば、**PDFをPNGに変換します**。

```python
from spire.pdf.common import *
from spire.pdf import *

# PdfDocument オブジェクトを作成する
doc = PdfDocument()

# PDF ドキュメントをロードする
doc.LoadFromFile("C:\\Users\\Administrator\\Desktop\\Input.pdf")

# すべてのページをループする
for i in range(doc.Pages.Count):

    # 特定のページを画像ストリームに変換する
    with doc.SaveAsImage(i) as image:
        
        # 画像ストリームを PNG ファイルとして保存する
        image.Save("C:\\Users\\Administrator\\Desktop\\Images\\ToImage-{0:d}.png".format(i))

# 文書を閉じます
doc.Close()
````

## PDFからラスター画像への変換
一般的なベクターグラフィックス形式は**SVG**です。
**PDFをSVGに変換する**場合は、SaveToFile(filename: str, startIndex: int, endIndex: int, fileFormat: FileFormat) メソッドを呼び出して、出力ファイル形式を SVG として指定できます。

```python
from spire.pdf.common import *
from spire.pdf import *

# PdfDocument オブジェクトを作成する
doc = PdfDocument()

# PDF ドキュメントをロードする
doc.LoadFromFile("C:\\Users\\Administrator\\Desktop\\Input.pdf")

# すべてのページをループする
for i in range(doc.Pages.Count):
    
    # 特定のページをSVGファイルに変換する
    doc.SaveToFile("C:\\Users\\Administrator\\Desktop\\Images\\ToImage-{0:d}.svg".format(i), i, i, FileFormat.SVG)

# 文書を閉じます
doc.Close()
```
[CDGC] カスタム属性 : 参考資料編

# はじめに
[インフォマティカ](https://www.informatica.com/jp/)が提供する[CDGC](https://www.informatica.com/jp/products/data-governance/cloud-data-governance-and-catalog.html)において、カスタム属性と呼ばれる、データカタログ管理者が自由に追加・編集できる入力項目があります。

本記事では、カスタム属性を理解するに有用な参考資料を紹介させていただきます。

# 資料群

<strong> FAQ: CDGC のビジネスデータアセットにカスタム属性を追加するには？ </strong>

 - 日本語翻訳されたKB(ナレッジベース)で、カスタム属性の追加手順を紹介しています。

https://knowledge.informatica.com/s/article/000198734?language=ja

<BR>

<strong>  Youtube動画 - How to Create Custom Fields in CDGC</strong> 

 - カスタム属性の追加手順を、動画で解説しています。
::: note info
動画については、字幕の翻訳機能を使って、日本語字幕を表示することが出来ます。
:::

https://www.youtube.com/watch?v=A-0XkTYmHwU


<BR>
<strong> マニュアル - Custom attributes for assets</strong> 

 - カスタム属性についてのマニュアルのドキュメント群です

https://docs.informatica.com/data-governance-and-quality-cloud/metadata-command-center/current-version/administration/custom-attributes-for-assets.html

<BR>

<strong> FAQ: How to search assets in CDGC by custom attribute value?</strong> 
 - カスタム属性が付与・関連付けられたアセットを検索する場合の例を紹介しています。

https://knowledge.informatica.com/s/article/000210902?language=en_US
vscodeのPython仮想環境下でKerasを使えるようになるまで

# はじめに
深層学習に初めて取り掛かろうと思った際に躓いたのでメモとして残します。

:::note warn
本文は時系列に沿って書いてあります。
参考にされる場合はご注意ください（最後まで読んでから取り掛かることをお勧めします）。
:::

# 環境
Windows11

# 1．Pyhonのインストール
面倒なのでMicrosoftStoreで"Python"と検索して最新の3.12をダウンロード。

powerShellでpython --versionと入力してPython[ バージョン ]と出たらダウンロード成功
```terminal
>python --version
Python 3.12
```

# 2．仮想環境の作成
pythonのインストールの完了後、仮想環境を作成したいディレクトリにcdで移動して、以下を実行。

```
>python -m venv .venv
```

ここで、最後の「.venv」は仮想環境名らしい。
必要に応じて変更する。

その後、vscodeでPowerShellを開き、
```
>Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process
```

として、ExecutionPolisyをRemoteSignedに変更する。
（これがないと仮想環境を使用する際に「このシステムではスクリプトの実行が無効になっているため、ファイル hoge を読み込むことができません。」が出る。）

RemoteSignedに変更できたかは、
```
>Get-ExecutionPolicy
RemoteSigned
```
で確認可能。

その後、
```
>./.venv/Scripts/activate
```
を実行して、仮想環境を利用可能に。

なお、成功すると左端に仮想環境名が出る。
![note3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3681495/95985d56-1b43-fab0-9efe-42e13b784270.png)

# 3.　kerasのインストール
ここまでは順調だったが、お待ちかねの「pip install keras」を実行しようとすると、

```
note: This error originates from a subprocess, and is likely not a problem with pip.
ERROR: Failed building wheel for dm-tree
Failed to build dm-tree
ERROR: Could not build wheels for dm-tree, which is required to install pyproject.toml-based projects」
```

とエラーが出て、
pipのアップグレードやバイナリホイールを使用するオプション？を使用してKerasをインストールしようとしても解決しなかった。

# 解決方法
どうやらバージョンが新しすぎることが問題だったらしい。
Python3.12でKerasをインストールするとどうしても同様のエラーが出るらしく、最終的にPython3.11にダウングレードして、2．以降の手順を行うことで
```
pip install keras
```
で問題なくKerasをインストールできるようになった。


# 参考
https://qiita.com/flcn-x/items/ac6e222004a827f582ea
https://docs.python.org/ja/3/library/venv.html
https://stackoverflow.com/questions/77666184/failed-building-wheel-for-dm-tree
オブジェクト指向設計メモ

# 前提事項

## オブジェクト指向における「設計」とは？

オブジェクトが変更を許容できるような形で依存関係を構成できるようにするための、コーディングテクニックが集まったもの。

つまり、設計をする目的は「変更コストを抑える」こと。

## 設計を行う際に用いる道具

- 設計原則
    - SOLID原則
    - DRY原則
    - デルメルの原則
    - etc…..
- デザインパターン

## 設計を行う際の注意点

### 設計の時期

**設計が早過ぎると、コードには初期の間違った理解が固く埋め込まれる。**

設計とは漸進的な発見のプロセスであり、繰り返しのフィードバックを頼りに進んでいく。それゆえ設計は定期的に調整され、自然に進化していくものである。

### 設計の程度

一つは、**自身のスキル**で決まる。

経験の浅いプログラマーがいくら将来を予測した設計をしたところで、その設計努力が報われる日が来ることは永遠にない。逆に熟練者であれば、午前中に書いたコードが午後のうちにコスト削減に繋がったりする。

もう一つは、**結果が出るまでの期間**で決まる。

設計して結果が出るまで多大な時間を浪費してしまい、納期までにアプリケーションを届けることができなければ損失が発生する。
逆に短時間で成果が出れば、運用する限りずっと利益が出続け、設計努力が永遠に報われる。

## まとめ

アプリケーションが十分長生きすれば、アプリーションの最も大きな問題は「変更への対処」となる。そのために設計がある。

同じ設計努力で最大限の成果を得る方法は、以下を守ること。

- 設計理論を理解し適切に使うこと
- 正しい時期と正しい分量で適用すること

# 変更が容易なコードの特徴（TRUE原則）

## 見通しが良い

変更がもたらす影響が明白である状態。

## 合理的

利益に対して変更コストが割に合っている状態。

## 利用性が高い

新しい環境、予期しなかった環境でも再利用できる状態。

## 模範的

コードの変更を加える人が、上記の品質を自然に保つようなコードになっている状態。

# 変更を容易にする技法

## 概要

### 1 部品の独立性を高める

- 凝集度を高める
    - 知覚があるかのように問いただす
    - 1文で説明してみる
- 結合度を弱める
    - 疎結合なコードを書く
        - 依存性の注入
        - 依存を隔離する
        - 引数の順番を取り除く
    - 適切なインターフェースを作る
        - シーケンス図を使ってパブリックインターフェースを見つける
        - 良質なパブリックインターフェースを作る
            - 他者がそこに依存しても安全なメソッドを作る
            - 他者に要求するコンテキストを最小限にする
            - 明示的にパブリックインターフェースだと特定可能にする
    - 自身より変更されないものに依存させる

### 2 ポリモーフィズムでメッセージに依存する

### 3 継承によって効率よく振る舞いを獲得する

- 拡張（is -a）
    - 全てを引き下げいくつか引き上げる
    - テンプレートメソッドパターン
- 混合（behave-like-a）
    - 共通の振る舞いをモジュールに抽出
        - テンプレートメソッドパターンを応用する
    - ロールを担うクラスにそのモジュールをインクルードして利用する
- 継承可能なコードの書き方
    - アンチパターンを避ける
        - オブジェクトがtypeやcategoryという変数名を使い、どんなメッセージをselfに送るかを決めているパターン
        - メッセージを受け取るオブジェクトのクラスを確認してから、どのメッセージを送るかをオブジェクトが決めているパターン
    - リスコフの置換原則を守る
    - テンプレートメソッドパターンの活用
    - 階層は浅くする

### 4 コンポジションを使ってオブジェクトを組み合わせる

### 5 費用対効果の高いテストを書く

テストは一度だけかつ適切な場所で実施すること→SUTとテストコードを疎結合にする

- メッセージ受信側
    - パブリックインターフェースのみテストする
    - 戻り値の状態をテストする
- メッセージ送信側
    - 副作用の発生するメッセージのみテストする（＝振る舞いのテスト）
    - モックを利用しメッセージが送られた回数と使われた引数をテストする
ChainOfResponsibility パターンの実装をしてみる

## はじめに
今日はChainOfResponsibility パターンについて実装します。  
一言で表すと、「たらいまわし」ですかね。


## 設計と実装
今回は、日報と週報をどこからか取得してくる際に、このChainOfResponsibilityパターンを使って実装します。  
GetReportDataHandlerに、「このレポート出して！」とお願いします。受け取った側は、自身がその担当ではなければ「担当の者にお繋します」といった具合に、たらいまわしにしていきます。  
設計は以下です。

![2023-12-09_18h37_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3131319/d6b9c753-532f-646d-7c96-1358db3015d1.png)

次に上記を元に実装をしてみます。  
```C#
    // 日報
    public class DailyWorkHoursReportHandler : IGetReportDataHandler
    {
        public IGetReportDataHandler Next { get; set; }

        public void Request(ReportType reportType)
        {
            if (reportType == ReportType.Daily)
            {
                Console.WriteLine("日報のデータを取得します。");
            }
            else if (Next != null)
            {
                Next.Request(reportType);
            }
            else
            {
                Console.WriteLine("対応するレポートタイプではありません");
            }
        }
    }

        internal class Program
    {
        static void Main(string[] args)
        {
            // レポートタイプを指定してデータを取得
            IGetReportDataHandler handler = new MonthlyWorkHoursReportHandler();
            handler.Next = new DailyWorkHoursReportHandler();
            handler.Request(ReportType.Monthly);
            handler.Request(ReportType.Daily);
            handler.Request(ReportType.Weekly);

            Console.ReadKey();
        }
    }

```

このような形で型が日報ではない場合は、Nextで指定した週報に処理を委譲します。

## メリット・デメリット
以下にChatGPTの考えるメリットデメリットを記します。


Chain of Responsibility（責任の連鎖）は、ソフトウェアデザインパターンの一つであり、複数のオブジェクトが順番に処理を試み、処理できるオブジェクトが見つかるまで処理を続けることが特徴です。以下に、Chain of Responsibility パターンのメリットとデメリットをいくつか挙げてみましょう。

> メリット:
>柔軟性と拡張性:
イベントや要求の処理を順番に行うことで、各オブジェクトが責任を持つ範囲が明確になります。これにより、新しい処理を追加したり既存の処理を変更する際に、既存のコードを変更せずに追加できるため、柔軟性と拡張性が向上します。

>単一責任の原則:
各処理オブジェクトは自身の責務に焦点を当て、他のオブジェクトとの結合を最小限に抑えます。これにより、単一責任の原則を守ることができます。

>再利用性:
各処理オブジェクトは独立して再利用可能であるため、他のコンテキストやシナリオで同じ処理を再利用することが容易です。

>デメリット:
パフォーマンスの低下:
チェーン内の全てのオブジェクトが順番に処理を試みるため、処理が終了するまでにすべてのオブジェクトを通過する必要があります。これが無駄な場合や、処理が複雑な場合にはパフォーマンスの低下が考えられます。

>デバッグが難しい:
どのオブジェクトが処理を行ったかを特定することが難しい場合があります。特に大規模で複雑なチェーンがある場合、デバッグが複雑になる可能性があります。

>全体の流れが分散する:
責任が複数のオブジェクトに分散されるため、処理の全体の流れが明確でなくなることがあります。これが理解しにくいコードやバグの原因となる可能性があります。
Chain of Responsibility パターンは、特定の状況や要件に対して適している場合がありますが、全てのシナリオに適しているわけではありません。利用する際には、コードの保守性や可読性、パフォーマンスの要件などを考慮する必要があります。

## 終わりに
今回はChainOfResponsibility パターンについて学習しました。多用するパターンではないかもというのが正直な感想ですね。全パターン網羅まで引き続き学習をしていきたいと思います。
Unity　Particleを利用する

UnityでエフェクトといえばParticleである。
ゲームの手触りに関係する部分をさくっと作れるようにする。

## Particleを追加する。
Hierarchyの空欄で右クリック。Effect>Particle Systemで追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/b47472f8-154a-c313-c660-9722f9e392f5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/09b353ad-cd7a-098c-4cbe-78383dc864db.png)
ほわほわと白いものが飛び出すParticleが追加された。

このほわほわの形や動きかたでエフェクトを表現する。
そのためのパラメータがずらっとinspectorにならんでいる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/b39886ed-006b-eef9-9ea3-a756a1c25933.png)
ためしにStart Lifetime（表示時間）を動かしてみると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/381e1394-0858-f98e-fcdc-e510d91d898c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/83fdd769-5800-18c2-f00a-60b6b43385df.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/84571c39-9274-16c0-5a3a-069637678d03.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/d45ba358-714e-0bb0-7694-7b089de84bd2.png)
表示される時間がふえて長い間Particleが表示されるようになる。

他のパラメータがどう動くのかは調べると出てくるのそれを参照。

このまま〇ではつまらないので、これをコインに差し替える。
新規Materialを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/4e532a2f-2416-a3fa-34f0-27fd0be44b0a.png)

ShaderをMobile>Particles/Alpha Blendedに変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/ec02dd16-28bb-fc53-15cd-eb94d0aafb2b.png)
設定したいPngをD＆Dで設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/a006a988-414c-f0c8-64ec-86e26a816410.png)

作ったMaterialをPartilceに設定。これもD＆Dでできる。inspectorの下のほうにD＆Dすると設定される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/2c9701b5-e784-5f3d-3e22-66d548a82a7c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/19fbd693-f37f-30d5-b8ee-3580b1cbdcd1.png)
置き換わった！やったね。

## スクリプトで制御

パーティクルは開始や停止が用意されているのでそれを条件で囲うと制御できる。

ジャンプしたときに宝箱が開いたときにコインがでてくるとか、ジャンプしたときに煙がでるとか・・・・

```
private ParticleSystem particle;
```
```
particle.Play();
```
```
particle.Stop();
```

## Particleの再利用
いいかんじのParticleが作れたそれをPrefab化するとほかのところでもすぐに使えるようになる。

作ったParticleをProjectにD＆DしてPrefab化する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/d047f2cd-bb5f-bd88-93de-ab7b3b6e2744.png)
Prefab化したParticleを新規作成した、GameObjectに入れ子にすることでこのGameObjectにエフェクトを追加することが出来た。制御はスクリプトで行う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/43b33bf8-95ab-bc05-87e0-ac0925e8645b.png)

どんどんPrefab化することで簡単にゲームにエフェクトを追加できるようになった。
やったね。

## ほかにもできること
Unityのアニメーションと複合させて、パラパラ漫画が複数動かすようなこともできる。

Particleを連鎖させて、花火みたいに初めは上に上がったあと広がるようなこともできる。

## 参考記事
https://gameanimation.info/archives/2181
laravelで自作の関数を作る

## 自作関数を記述するファイルを作成
好きな所に自作関数を記述するファイルを作成。
app/functions.php
```php: app/functions.php
<?php

// テスト関数
if (!function_exists('test')) {
    function test($date = null) {
        return 'testです！';
    }
}
```

## オートローダーに追加
composer.json の autoload.files に追加
```composer.json
    "autoload": {
        "files": [
            "app/functions.php" //追加
        ],

```

## オートローダーの更新
```
$ composer dump-autoload
```


## テスト
```php
$ php artisan tinker
> test()
= "testです！"
```

## 呼び出し方
以下だけでコントローラーやbladeから自作関数を呼び出せるようになる。
```php
test()
```
Warning: Extra attributes from the server: cz-shortcut-listen at body at html at RedirectErrorBoundary

# はじめに

Next.js14でいろいろしていた時にこのエラーが発生したので、解決方法のメモ。

`Warning: Extra attributes from the server: cz-shortcut-listen at body at html at RedirectErrorBoundary`

# 解決方法

`Google Chorme`の拡張機能が原因ぽいです。

私の場合は、`ColorZilla`という拡張機能を無効にしたら治りました。

# おわりに

拡張機能使えなくなるのちょっと困るな
WordPressユーザーに権限を追加したメモ

WordPressでスライドショープラグインに画像を登録したいけど、
管理画面にはどこにも「プラグイン」とか「設定」なんてメニューは無いし、
管理者権限をもらっておらず分かる人も居なくて登録できない（途方に暮れる）とき。

## やったこと

### 1. 現在の権限を確認

WordPress管理画面の「ユーザー＞ユーザー一覧」からログインしている「ユーザー権限グループ」を確認したが、「ショップ運営者」？
なにそれ？WordPressの標準じゃない。

![screenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40940/017d4599-9785-7657-9c8f-31536a869eee.jpeg)

※標準のユーザーについて： https://ja.wordpress.org/support/article/roles-and-capabilities

### 2. 現在の権限のスラッグ（英語のキーワード）を確認

WordPressの標準でないためスラッグが何なのか検討がつかないので、
一旦、single.phpかどこかに今のユーザーが何なのか吐き出す。
吐き出されたもので`role`の単語を検索してみると「shop_manager」と分かった。
分かったらすぐに消してもとに戻す。

```php
$user_info = get_user_by('email', 'example@example.com');
var_dump($user_info);
```

※最初 `get_userdata()`で出そうとしたが、下記ページの「Source」を見ると`get_user_by()`が関数の中身で使われていて、
https://developer.wordpress.org/reference/functions/get_userdata/

`get_user_by()`はユーザーIDでなくても、メールアドレスから辿れることが下記の「Parameters」によく読むと書いてあったのでこれを使った。
https://developer.wordpress.org/reference/functions/get_user_by/

### 3. functions.phpで判明したスラッグに対して権限を付与

下記をfunctions.phpの一番最後に記載。
そしたら、左メニューに「プラグイン」と「設定」が表示された:clap:

一番最後の`1`は優先度（プラグインが優先度決めているとこちらが書いたものが動かないため）。下記の「Parameters」参照
https://developer.wordpress.org/reference/functions/add_action/#parameters

```php
add_action('admin_init', function() {
    $role = get_role( 'shop_manager' );

    // 「プラグイン」メニューの権限
    $role->add_cap( 'install_plugins' );
    $role->add_cap( 'activate_plugins' );
    $role->add_cap( 'update_plugins' );
    $role->add_cap( 'delete_plugins' );
    $role->add_cap( 'edit_plugins' );
    $role->add_cap( 'resume_plugins' );

    // 「設定」メニューの権限
    $role->add_cap( 'manage_options' );
}, 1);
```

なお下記によると、1度上記を反映して、ソースコードを消しただけでは元に戻らない（権限が削除されない）らしいので要注意とのこと。

参考：　https://satoshimurata.com/wordpress-roles-and-capabilities
wicket 画面初期表示の段階でAjaxRequestTargetを取得したい

# 背景
画面初期表示時にエラーチェックなどを行って、
メッセージを表示するコンポーネントで表示しようとしても、
例外が発生して落ちてしまう。
こんなときどうする？というお話。

# 方法
onLoadのビヘイビアを使えば解決するかもしれない。
~~~
testForm = new Form<Void>("TestForm") {
	@Override
	protected void onInitialize() {
        try{
            super.onInitialize();
        }catch(Exception e){
            System.out.println("Error: " + e.getMessage());
        }
	}
    add(testForm);
    // ↓ここの部分
    add(new AjaxEventBehavior("onload") {
        @Override
        protected void onEvent(AjaxRequestTarget target) {
            try {
                // 何かしらの処理
			} catch (Exception e) {
    	        System.out.println("Error: " + e.getMessage());
			}
        }
    }); 
}
~~~

# 簡単な説明
onInitializeなどの画面初期表示時に動作してくれる処理たちは、
あらかじめ指定された画面を表示することに一生懸命になってしまっている。

画面の初期表示が終わってボールがクライアント側に戻ると
ようやく変更要求（AjaxRequestTarget）を受け付けてくれる。

AjaxEventBehavior("onload")をaddしてあげることで、
javascriptのonloadと同じタイミングで自動で動いてくれる。


### onInitializeの動き
サーバ側で画面を描画しクライアント側へ返す
このとき、変更要求（AjaxRequestTarget）は機能しない。

### onLoad（AjaxEventBehavior）の動き
サーバ側で生成された画面一式を受けったら動く
このとき、変更要求（AjaxRequestTarget）は機能する。

# 画面初期表示時の他のライフタイムサイクル
### onInitialize() 
コンポーネントやページが初期化される際に呼び出される。
### onBeforeRender()
コンポーネントやページがレンダリングされる前に呼び出される。
### onAfterRender()
コンポーネントやページが完全にレンダリングされた後に呼び出される。
### onConfigure()
コンポーネントが構成される際に呼び出される。
### onDetach()
コンポーネントがdetachされる際に呼び出される。
[CDGC] カスタムワークフロー : 参考資料編

# はじめに
2023年11月のリリースにおいて、[インフォマティカ](https://www.informatica.com/jp/)が提供する[CDGC](https://www.informatica.com/jp/products/data-governance/cloud-data-governance-and-catalog.html)のメタデータ等のアセット作成・変更に伴うワークフローのエンジンが大幅に改良され、アプリケーション統合サービス(CAI)のワークフローを利用することが出来るようになりました。

本記事では、カスタムワークフローを理解するに有用な動画、資料等の参考資料を紹介させていただきます。


# 動画群

<strong> Youtube動画 : Mastering Data Governance Approval Process using Custom Workflow in CDGC</strong> 

- 1時間を超える長編動画で、カスタムワークフローの基礎から詳細、デモまでを網羅します。一通りこちらの動画を見ていただくのが、理解につながると考えます。

::: note info
動画については、字幕機能にて、翻訳機能を使って、日本語字幕を表示することが出来ます。
:::
 
https://www.youtube.com/watch?v=Jl2gsYoSOeE

<BR>
<strong>Youtube動画 : Custom Workflows - Creating an Event</strong>

- Metadata Command Center上でイベントを作成するデモです

https://www.youtube.com/watch?v=3WnXko0AZe4

<BR>
<strong>Youtube動画 : How to Import OOTB Workflows</strong>

 - IDMCの管理画面で、add on bundles(事前定義済みのワークフロー)をインポートするデモです

https://www.youtube.com/watch?v=AOaG1oiQU1s

<BR>
<strong>Youtube動画 : How to Create a Custom Workflow</strong>

 - CAI(アプリケーション統合で、カスタムワークフローを作成する方法です

https://www.youtube.com/watch?v=0cpNeoxh41w



<BR>
<strong>Youtube動画 : Workflow Processes in CDGC December 2023 Release</strong>

 - CDGC12月リリースでのアップデート情報です

https://www.youtube.com/watch?v=cPuzWrARVw0




# 参考資料
- [**マニュアル - Configure workflows** *ログインが必要](https://docs.informatica.com/data-governance-and-quality-cloud/metadata-command-center/current-version/administration/configure-workflows.html)
- [**ナレッジベース(KB) - HOW TO: Create a custom workflow in CDGC**](https://knowledge.informatica.com/s/article/000215045?language=en_US)
電気自動車の要素技術の紹介


電気自動車の要素技術には機械工学や電気工学、化学といった様々な要素技術が含まれます。この記事では一般的な技術例として、「電気自動車ハンドブック」の章の題名を紹介します。個別の内容は機会がある時に紹介します。

https://www.kinokuniya.co.jp/f/dsg-01-9784621048405

## 第1章 総論
## 第2章 電気自動車の歴史と現状
### 2.1 電気自動車などの歴史
- 2.1.1 電気自動車などの歴史概要
- 2.1.2 電気自動車が歴史に登場した理由
### 2.2 電気自動車普及の狙い
- 2.2.1 自動車の保有台数
- 2.2.2 大気汚染の現状
- 2.2.3 自動車によるエネルギーの使用状況
- 2.2.4 自動車からのCO2排出量
- 2.2.5 排出ガス規制と燃費規制の動向
### 2.3 電気自動車普及の現状と開発の動向
- 2.3.1 電気自動車などの普及の現状
- 2.3.2 電気自動車開発の動向
- 2.3.3 ハイブリッド車開発の動向
- 2.3.4 燃料電池車開発の動向
- 2.3.5 日本における最近の電気自動車，ハイブリッド車
- 2.3.6 電気自動車などの位置づけと使われ方
### 2.4 普及施策
- 2.4.1 電気自動車など導入プロジェクト
- 2.4.2 普及策，税制優遇措置
- 2.4.3 主要な国家プロジェクト
- 2.4.4 充電インフラの整備
## 第3章 電気自動卓の種類と特徴
### 3.1 電気自動車の分類と特長
### 3.2 電気自動車（純電気自動車）
- 3.2.1 電気自動車の駆動系
- 3.2.2 電気自動車の性能試験方法
- 3.2.3 電気自動車の性能
### 3.3 ハイブリッド電気自動車
- 3.3.1 ハイブリッド電気自動車の種類と構造
- 3.3.2 ハイブリッド電気自動車の性能
- 3.3.3 ハイブリッド車の実例
### 3.4 燃料電池車
- 3.4.1 燃料電池車の種類と構造
- 3.4.2 燃料電池車の性能
- 3.4.3 水素供給インフラストラクチャー
## 第4章 電気自動車における電源デパイス
### 4.1 電気自動車用電源デバイスの分類・用途（比較）および要求性能
- 4.1.1 電気自動車の分類と電源デバイス
- 4.1.2 PEV用電源の要求性能
- 4.1.3 PEV用電源の種類
- 4.1.4 電気HEV用電源の要求性能
- 4.1.5 HEV用電源の種類
### 4.2 二次電池
- 4.2.1 鉛蓄電池
- 4.2.2 ニッケルーカドミウム蓄電池
- 4.2.3 ニッケルー水素蓄電池
- 4.2.4 リチウムイオン二次電池
- 4.2.5 リチウムーポリマー二次電池
- 4.2.6 その他
### 4.3 燃料電池
- 4.3.1 概要
- 4.3.2 燃料電池の構成
- 4.3.3 水素の車載貯蔵技術
### 4.4 電源用キャパシタ
- 4.4.1 キャパシタの概要
- 4.4.2 キャパシタの車用途への適用の可能性
- 4.4.3 実用化のための課題と可能性
## 第5章 構成要素技術
### 5.1 概論
### 5.2 電動機
- 5.2.1 電気自動車用モータの種類と特徴
- 5.2.2 直流電動機
- 5.2.3 交流誘導電動機
- 5.2.4 交流同期電動機
- 5.2.5 スイッチトリラクタンスモータ
- 5.2.6 その他の特殊な実施例
### 5.3 制御装置
- 5.3.1 電気自動車の駆動制御
- 5.3.2 直流モータ制御システム
- 5.3.3 交流モータの制御とインバータ
- 5.3.4 誘導モータの制御
- 5.3.5 同期モータの制御
- 5.3.6 SRモータの制御
### 5.4 充電器・充電制御
- 5.4.1 充電方式
- 5.4.2 充電制御
- 5.4.3 補機類用バッテリの充電装置
### 5.5 ブレーキ制御
- 5.5.1 回生ブレーキ
### 5.6 エアコン（空調システム）
- 5.6.1 電気自動車のエアコン
- 5.6.2 ハイブリッド車用エアコン
### 5.7 その他
- 5.7.1 タイヤ
- 5.7.2 デフロスタ
## 第6章 環境・エネルギーに関わる自動享技術の将来展望
### 6.1 自動車の環境・エネルギーに関わる現状
### 6.2 今後のガソリン車とディーゼル車
- 6.2.1 ガソリン車
- 6.2.2 ディーゼル車
- 6.2.3 3つの技術
### 6.3 低公害車と代替エネルギー車の開発
- 6.3.1 わが国の取組み
- 6.3.2 欧米の取組み
### 6.4 超低燃費車の開発
- 6.4.1 小型電気自動車とハイブリッド車
- 6.4.2 米国のPNGVプロジェクト
- 6.4.3 EUの3リッターカー
- 6.4.4 燃料電池自動車の開発
- 6.5 結語
## 付録
- 付表1 電気自動車などの歴史
- 付表2 1990年以降に開発された代表的なハイブリッド電気自動車
- 和文索引
- 欧文索引
テキストURLをリンクにする_拡張機能

テキスト形式のままのURLをクリックできるようにリンクをつけたいので、やってみました！

# 拡張機能
これを拡張機能で追加して、ブラウザから開くためには、カスタムURLスキーマというので開けるようにしました。
NativeMessagingといやり方もあるようですが、ローカルアプリとのメッセージのやり取りがよくわからなくて諦めました。。。
``` js
// 対象にする箇所
const qs = document.querySelectorAll(".Reference, .multiple-lines");
// URL対象を抽出する正規表現
const exp =
  /((\\\\)[^\<\>"\n\r]*)/gi;
for (let i = 0; i < qs.length; i++) {
  console.log(qs.item(i).textContent);
  // aタグを追加する
  const r = qs
    .item(i)
    .textContent.replace(exp, "<a href='cel:$1'>$1</a>");
  qs.item(i).innerHTML = r;
  console.log(qs.item(i).textContent);
}

```

# 参考
- https://qiita.com/kojimadev/items/74100c8557a92939ef69
- https://qiita.com/m_hama123/items/aa3101478a8458d61689
- https://qiita.com/nagisayuu/items/0c4f3e81652c016fdb64
- https://qiita.com/zarukishi/items/d77070555a29484d46cd
5分でわかる「Webを支える技術」~URI編~

## この記事は何？
「Webを支える技術 -HTTP、URI、HTML、そしてREST」を読んだので、知識を定着させるために自分がアウトプットをすることが本記事の目的です。

もちろん、この本の内容が気になっている方や、URIが気になっていた！という方でも少しはタメになるように記事を書いたので、しばしお付き合いください。

:::note info
誤植や誤りに対する指摘は大歓迎です！
もし気になる点があればコメントでお知らせいただけると幸いです！
:::

※本記事の内容は、本著の「第2部 URI」に該当します。

## 「Webを支える技術」ってどんな本？
先述の通り今回は
"Webを支える技術 -HTTP、URI、HTML、そしてREST" 著者:山本 陽平
を読みました。
いわゆる名著だと思います。初学者でもわかるようにWebの仕組みを丁寧に解説されています。

- Webがどうやって動いているのか知りたい
- ITエンジニアになったから最低限のWebの知識を身に付けたい

という方には特におすすめの本になります。


## URIとは
URIは `Uniform Resource Identifier` の略で「Web上のリソース(テキスト、画像、Webサイトなど)を統一的に識別するID」のことです。

一見するとあまりよくわかりませんが、私の理解を以下に書きます。

インターネット上に存在するあらゆるデータには、ID（URI、リンク等）が割り振られています。そのIDを通じて私たちはデータにアクセスすることができるようになっており、このようなシステムを「ハイパーメディア」と呼んだりもします。

実態は下記のようなものです。
↓いわゆる「URL、リンク」と言ったりしますね。
```
https://service.ourly.jp/ 
(参考として、弊社のLPを載せておきます)
```

### URI？URLじゃないの！？
という言葉が聞こえてきそうですが、ちゃんと違いを理解しているでしょうか？

普段私たちが日常生活で使っているURLとURIはちょっと意味が違います。またURLやURIの仲間であるURNというのも存在します。ざっくりまとめると以下になります。

| 名前 | 解説 |
|:-:|:-:|
| URI (`Uniform Resource Identifier`)  | リソースを識別するID|
| URL (`Uniform Resource Locator`)  | リソースの場所を特定するID|
| URN (`Uniform Resource Name`)  | リソースに他と重複しない名前をつけたID |

URIは、URLやURN両者を包含する意味があると言えますが、実際普段使う分には**URIとURLはほぼ同じ**と考えて良いでしょう。

興味ある方は個別で調べてみてください！



## 構造がわかるとURIが読めるようになる！

```
https://service.ourly.jp/feature
```
さて、上記のようなURIはパーツごとに分解することができるので、それぞれのパーツごとに見ていきましょう。

| パーツ | 名前 | 特徴 |
|:-:|:-:|:-:|
| https  | URIスキーム  |  URIが使用するプロトコル(今回はHTTPメソッド) |
|  service.ourly.jp | ホスト名  | DNSによって識別されるホストの名前  |
| feature  | パス  |  ホスト内に存在するリソースを示す(「ourlyの特徴」のページ) |

他にも様々な種類のパーツが存在しますが、今回は上記のようにURIがパーツごとに意味を持っていることが分かればいいとします。

## リンク切れを防げ！

![スクリーンショット 2024-01-30 21.19.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682317/b0439d57-cc27-b337-b920-d1729cbb7449.png)

以前ブックマークしたサイトに久しぶりにアクセスすると、上記のような"404 not found"という表示が出た、という経験は多くの人があるのではないでしょうか。

### 変わらないURIこそ最上である
当然、上記のようにアクセスできないリンクが生じてしまうことはよくないユーザー体験につながってしまう可能性があります。
ではどのようにして変わらないURIを実現することができるのでしょうか？

様々な工夫がありますが、今回は
「**セッションIDやアクション名はURIに含めない**」
という方法を紹介します。

ざっくり言うと、セッションIDとは"ログインするたびに変わるID"のことです。同じユーザーであっても、ログアウトすると異なるIDに変わるので、URIとしてセッションIDを持つことは好ましくありません。

また下記のように、実際にアプリ内で定義したアクション名をURIに持たせることも変わりやすいURIを作る可能性があります。

**リファクタリングや機能の変更でアクション名が変更・削除されるケースは十分考えられる**ので、URIには含めない方が賢明でしょう。

```
https://hoge/fuga/getInfo
```

## まとめ

- URIとはWeb上のリソースを識別するIDのこと
- URIはURL,URN2つを包含する意味を持っている
- URIは各パーツに分解することができ、それぞれで役割が分かれている
- URIは変わらないことが大事である。どうやったら変わりづらくなるかを設計時に考えた方がいい


少し内容が多かった気がするので、5分じゃ読み切らないかもしれません。
次回はもう少し量を減らして書こうと思います！
Next環境構築

## はじめに
自分が環境構築する時のESLintとかPrettierのメモ。
aspidaとかswrの設定も追記したい。

ボイラープレートも作成中。

## インストール
https://nextjs.org/
```bash
npx create-next-app@latest
```

## ESLint, Prettier
```.eslintrc.json
{
  "extends": ["next/core-web-vitals", "plugin:storybook/recommended"],
  "plugins": ["unused-imports", "import"],
  "rules": {
    "unused-imports/no-unused-imports": "error",
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "parent",
          "sibling",
          "index",
          "object",
          "type",
          "internal"
        ],
        "alphabetize": {
          "order": "asc"
        }
      }
    ],
    "sort-imports": [
      "error",
      {
        "ignoreDeclarationSort": true
      }
    ]
  }
}
```
```.prettierrc
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all"
}
```
```.vscode/.setting.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
```

## 最後に
pnpmとかbunとか色々あるけど何がいいんやろ
Unity Asset 宴を自分のゲームで利用する。

## 自分のゲームで利用するには

基本的な使い方については公式ページを参照。
### 初期設定
https://madnesslabo.net/utage/?page_id=620

そこから自分のゲームでどう利用するのかを説明する。

Unityのツールバーから、Tools＞Utage>NewProjectから
名前は自由に
Add to Current Sceneに切り替え
好きなサイズにあわせる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/846aedb0-0052-7b65-a6a1-2a828dd1546f.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/0325ad64-2679-9e45-bef4-5b353e223359.png)
Utageのオブジェクトが作成された。

Assetの中にも設定するファイルが作成される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/4f5ed9e7-c776-7676-b938-c5d0e113307c.png)

Assetからシナリオ（Excel）を編集する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/0c8be31d-46b8-7419-cce3-3720b55e4444.png)
追加されたエクセルを開く
Startタブで＊～のように開始地点を設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/35f7ef1c-dca9-e644-de1c-47665c243e32.png)
シナリオはEndScenarioまで実行される


### 宴をロードする。
ロードするためにはスクリプトで
```
JumpScenarioAsync("TestA地点", null)
```
のように開始地点を設定する。

これを条件文でくくると好きなように実行できる。

```
if(条件)
{
    JumpScenarioAsync("TestA地点", null)
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/c72fb0f8-e7d7-907d-53dc-868e01d91662.png)

これでテキスト表現はすべて宴に任せることができる。
やったね。


## 参考ページ
https://madnesslabo.net/utage/?page_id=620

https://madnesslabo.net/utage/?page_id=402
Ubuntu Linuxで各プロセスのメモリ使用量を確認する方法


## はじめに

本記事では Ubuntu Linux 22.04 LTS 環境において、各プロセスが消費しているメモリ量を調べるための簡単な方法を紹介します。システムのパフォーマンスを監視したり、特定のアプリケーションのリソース使用量を把握したりする際に役立ちます。

### ps コマンドを使用する

ps コマンドは、実行中のプロセスに関する詳細情報を提供します。

```bash
ps -o pid,user,%mem,command
```

上記プログラムを実行すると、プロセスID、ユーザー名、メモリ使用率（%）、コマンド名が表示されます。

### top コマンドを使用する

top コマンドは、システムのリアルタイムの状態を表示します。

```bash
top - 13:52:17 up  5:51,  0 users,  load average: 0.29, 0.22, 0.09
Tasks: 170 total,   1 running, 101 sleeping,   0 stopped,  26 zombie
%Cpu(s):  3.8 us,  2.3 sy,  0.0 ni, 92.6 id,  0.0 wa,  0.0 hi,  0.3 si,  1.0 st
KiB Mem :  8086084 total,  5512848 free,  1765312 used,   807924 buff/cache
KiB Swap:  2097148 total,  2097148 free,        0 used.  6062800 avail Mem 

  PID USER      PR  NI    VIRT    RES    SHR S  %CPU %MEM     TIME+ COMMAND                                                                       
 7103 yu_sato   20   0  991220 112072  42744 S   5.0  1.4   0:40.26 node                                                                          
 7294 yu_sato   20   0 1969176 487584  46992 S   1.0  6.0   1:26.48 node                                                                          
 7339 yu_sato   20   0  778396  76984  38088 S   1.0  1.0   1:50.80 node                                                                          
 2295 nslcd     20   0  445016   4092   3292 S   0.3  0.1   0:08.78 nslcd                                                                         
 7025 yu_sato   20   0  158960   4632   3276 S   0.3  0.1   0:08.69 sshd                                                                          
 7843 yu_sato   20   0  359524  39188  17948 S   0.3  0.5   0:15.99 php                                                                           
 7846 yu_sato   20   0  359524  39196  17952 S   0.3  0.5   0:15.90 php                                                                           
10848 root      20   0       0      0      0 I   0.3  0.0   0:00.01 kworker
```

リアルタイムでの監視が可能であること、また、CPU使用率など他の情報も一緒に見られます。

### htop を使用する

htop は top の拡張版で、より多くの情報と使いやすいインターフェースを提供します。

`sudo apt-get install htop` でインストールできます。

使用例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191117/b4663ca7-c3bb-238d-00b5-a4b68c350b46.png)

## 終わりに

これらのツールを使用することで、Ubuntu Linux上で実行されているプロセスのメモリ使用量を効果的に監視し、システムの健全性を維持するのに役立ちます。これらのコマンドの結果を解釈し、システムのパフォーマンスを最適化するための手法となります。
Electron Forge/Builder でUSBトークンを使用したコード署名を行う

[Electron でWindowsへのコード署名をCI/CDで行うことはもはや無理っぽい](https://qiita.com/komde/items/0b261d7926b5cce1de4d) の続きです。心を無にしてローカルからbuild&publishできるように設定を行いました。

## 下準備

まず単純に署名ができるか試します。USBトークンを挿し、継続ログオンを有効にした状態で、developer powershellなどから署名します。{タイムスタンプサーバー}には代理店から指定されたURL、{発行先(Issued to)}は証明書のIssued to文字列を入れます。

```
signtool.exe sign /tr {タイムスタンプサーバー} /fd sha256 /td sha256 /n "{発行先(Issued to)} test.exe
``` 

無事完了したらファイルを右クリック→プロパティで、デジタル署名のタブを確認し、正しく署名出来ているかを確認します。

## Electron Forge

[オフィシャルドキュメント](https://www.electronforge.io/guides/code-signing/code-signing-windows)

forge.config.js で、maker-squirrelのconfigに以下を追加します。
いままで certificateFile, certificatePasswordを設定していた場合はクリアしておきます。

```forge.config.js
{
  name: '@electron-forge/maker-squirrel',
  config: (arch) => ({
    signWithParams: '/tr {タイムスタンプサーバー} /fd sha256 /td sha256 /n "{発行先(Issued to)}"',
  })
},
```

この結果、`signtool.exe sign /tr {タイムスタンプサーバー} /fd sha256 /td sha256 /n "{発行先(Issued to)} インストーラー.exe` のような感じで署名が走ります。


## electron-builder

[オフィシャルドキュメント](https://www.electron.build/configuration/win#WindowsConfiguration-certificateSubjectName)

win.certificateSubjectName を追加します。ちなみに証明書の検索は前方一致になっているっぽいので、完全に一致していなくても引っ張ってこれます。
いままでCSC_LINK、CSC_KEY_PASSWORDなどを環境変数でセットしていた場合はクリアしておきます。

```package.json
"win": {
  "target": "nsis",
  "certificateSubjectName": "組織名"
}
```

## 独り言

今まではOVとEVで価格差が大きかったのでOVを使っていたのですが、HSM対応で軒並み値上げされて価格差が無くなったのとCICDはどちらでも使えなくなってしまったので、会社で使うならEV一択ですね、、。
Reactで簡単なボタン配色確認ツールを作成する

### はじめに
Reactを学習していて、初心者向けチュートリアルを一周したので一度簡単なアプリを作ってみようと思い作成しました。
初学者のため、間違っている記載があればご指摘いただけると幸いです。

### アプリの概要
背景色と文字色のカラーコードを入力して、「色を変更」ボタンを押すと「サンプル」ボタンの配色が変わるというシンプルな機能です。

![配色確認ツール.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580185/0160a7d0-fcb7-f285-8fe6-939a42a529c2.jpeg)


### App.js
```javascript:App.js
import './App.css';
import React, { useState } from 'react';
function App() {
  const [inputBackgroundColor, setBackgroundColor] = useState('#0f0a95');
  const [inputFontColor, setFontColor] = useState('#ffffff');
  const [ButtonStyle, setButtonStyle] = useState({ backgroundColor: inputBackgroundColor, color: inputFontColor});

  const setBackgroundColorValue = (e) => {
    setBackgroundColor(e.target.value);
  };

  const setFontColorValue = (e) => {
    setFontColor(e.target.value);
  };

  const ColorChange = () => {
    setButtonStyle({
      backgroundColor: inputBackgroundColor,
      color: inputFontColor,
    });
  };

  return (
    <div className="App">
      <p class='title'>配色確認ツール</p>
        <div class='inputBox'>
          <div>
            <p>背景色を入力</p>
            <input type = 'text' value={inputBackgroundColor} onChange={setBackgroundColorValue}/>
          </div>
          <div>
            <p>文字色を入力</p>
            <input type = 'text' value={inputFontColor} onChange={setFontColorValue}/>
          </div>
        </div>
        <div class='changeButtonBox'>
          <button onClick={ColorChange} class='changeButton'>色を変更</button>
        </div>
        <div class='sampleButtonBox'>
          <button style={ButtonStyle} class='sampleButton'>サンプル</button>
        </div>
    </div>
  );
}

export default App;
```
input要素が変更されたら値を取得し、「色を変更」ボタンが押されたら取得した値を「サンプル」ボタンに反映しています。

```css:App.css
.title{
  text-align: center;
  font-size: 1.5rem;
}

.inputBox{
  display: flex;
  justify-content: center;
  gap: 100px;
  margin-bottom: 50px;
}

.inputBox input{
  width: 150px;
  height: 30px;
  font-size: 1.25rem;
  border-radius: 5px;
  border: solid 1px #333;
  padding: 5px;
}

.changeButtonBox{
  display: flex;
  justify-content: center;
  margin-bottom: 200px;
}

.changeButton{
  background-color: #171617;
  color: #fff;
  width: 200px;
  height: 50px;
  border-radius: 5px;
  font-size: 1.25rem;
}

.changeButton:hover{
  color: #333;
  background-color: #fff;
  border: solid 3px #333;
}

.sampleButtonBox{
  display: flex;
  justify-content: center;
}

.sampleButton{
  width: 400px;
  height: 50px;
  border-radius: 5px;
  font-size: 1.25rem;
  border: none;
}
```

### 最後に
作成していて今自分がどこまで理解できているのか、どこが理解できていないのかを把握できて勉強になりました。
hover時のスタイルやアニメーションも確認できる機能をつけることができればより便利になると思うので挑戦してみます。
Powershellから新規wordファイルを作成する関数

## 環境
* Windows11
* Powershell 7.4.0

## 使い方
ファイル名の拡張子はつけなくてもいい。
visible : Wordアプリを表示するかどうか（デフォルトは$True）
```
PS C:\Users\user> word file_name [visible]
```

## コード
```posh
function getSavePath($fn, $ex) {
    $cd = (Get-Location).Path
    $fnc = $fn + $ex
    $sp = Join-Path $cd $fnc
    for ($i = 1; Test-Path $sp; $i++) {
        $fnc = $fn + $i.ToString("00") + $ex
        $sp = Join-Path $cd $fnc
    }
    return $sp
}

function word(
    $file_name = "new-doc-" + (Get-Date -Format "yyyyMMdd") + ".docx",
    [bool]$visible = $True
) {
    $wd = New-Object -ComObject Word.Application
    $wd.Visible = $visible
    $doc = $wd.Documents.Add()

    if ($file_name -match "^\.\\") {
        $file_name.Replace(".\", "")
    }
    if ($file_name -match "\.docx$") {
        $file_name.Replace("\.docx", "")
    }
    $save_path = getSavePath $file_name ".docx"

    $doc.SaveAs($save_path) 
}

```

## 不満とか
ファイル名が重複しないようにするコード（拡張子を消したり追加したり）をもっと改善できそう。
Stripe Connect Custom子アカウントの利用規約について

## 概要

StripeのConnectのCustom子アカウントの利用規約の種類について知り得た情報を簡単にまとめます。

## 注意

本内容はドキュメントやサポートに問い合わせて得られた内容をもとに考察した私の所感です。
事実と異なる場合があります。ご注意ください。

## 〜追記〜

サポートに確認したところ、現在日本ではRecipient利用規約に同期できないらしいです。
`'service_agreement' => 'recipient',`などを指定して、子アカウントをAPIで作成すると下記のようなエラーが発生します。

```
The recipient ToS agreement is not supported for platforms in JP creating accounts in JP. See https://stripe.com/docs/connect/cross-border-payouts for more details.

```

## 情報

- 顧客： Stripeでお金を支払う人（Amazonで言うなら購入者）
- プラットフォームアカウント： Stripeを使ってお金のやり取り機能を作る人（Amazonで言うならAmazon運営会社、そしてこの記事にたどり着いた皆さんのStripeのアカウントがおそらくこちら）
- 子アカウント： お金を受け取る人（Amazonで言うならアマゾンに出店して商品を売っている会社、Ankerとか）

## 利用規約は2種類

StripeのConnectのCustom子アカウント（連結アカウント）の利用規約は主に2種類です。

- Full利用規約
- Recipient利用規約

子アカウントを作成するときにユーザーがどちらに同意したかによって、その子アカウントができること（ケイパビリティ）、責任範囲、一部の処理時間などが異なる模様です。

２つの利用規約の関係性を図にしてみました。

![KPTふりかえり（日本語）_by_Kazuki_Mori_NRI__Visual_Workspace_for_Innovation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/604202c1-37ad-057c-4649-ab3963c8c026.png)

Recipient利用規約でできることはFull利用規約でもカバーされている模様です。（「国をまたぐ送金」など本当に一部はRecipient利用規約のみ）

そうなると「ならFull利用規約にとりあえず同意してもらえばいいか、、。」となるわけです。もちろん機能だけで言えばその通りなのです。

しかしFull利用規約の場合はプラットフォームアカウントに紐付けられていながらも、子アカウントのユーザーが直接Stripeを通じて支払いを受付たりします。（Stripeとのサービス関係を持つ）
Recipient規約の場合は子アカウントはあくまで送金を受けとるだけのユーザーとしてプラットフォームアカウントに紐付けられます。

下記のようなことがやりたい場合Full規約になると思う

![KPTふりかえり（日本語）_by_Kazuki_Mori_NRI__Visual_Workspace_for_Innovation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/955a857b-26f9-d538-8f0b-72eebe06b4d2.png)

下記のようにプラットフォームアカウントが間に入るならRecipient規約になると思います。

![KPTふりかえり（日本語）_by_Kazuki_Mori_NRI__Visual_Workspace_for_Innovation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/fd837636-2664-ef00-ff05-8c833d756b53.png)

もちろんFull規約の場合、顧客からの支払いを直接子アカウントが受けるので負うべき責任も変わってくるということだと思います。

## 参考文献

https://stripe.com/docs/connect/service-agreement-types#supported-types

https://stripe.com/docs/connect/updating-accounts?locale=ja-JP

https://stripe.com/jp/legal/connect-account/recipient
併買の度数集計(SPSS Modeler データ加工逆引き11-15)

# 併買の度数集計

![スクリーンショット 2024-01-19 10.34.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/fb2201db-fd27-0d66-385c-56fde1583c9a.png)

＊この記事は以下のヒモトクブログを参考に書かれています。

https://www.ibm.com/blogs/solutions/jp-ja/modeler-tips-21/

## 1.想定される利用目的

・顧客の併買傾向の理解
・該当パターンを持つ顧客を施策対象として抽出する

## 2.サンプルストリームのダウンロード

https://github.com/yoichiro0903n/blue/raw/main/cross_sell_freq.str

## 3.サンプルストリームの説明

![スクリーンショット 2024-01-19 10.34.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/faf1554e-0a70-465e-3b1c-dba6bd9645b4.png)

a.入力するデータは以下の通りです。
![スクリーンショット 2024-01-19 10.36.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/b39645c5-a616-4d45-72ab-5ebbff8d7371.png)

b.　[クロス集計]ノードを編集します。[フィールド]は[すべてのフラグ（真の値）]に選択します。
![スクリーンショット 2024-01-19 10.37.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/c6c24999-88b6-d29a-456d-85feda738cdc.png)

[外観]タブを以下のように設定し[実行]します。
![スクリーンショット 2024-01-19 10.37.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/09811899-5445-5372-c686-efddecdb0dea.png)

上位10のセルをハイライトします。対になる行列を表示するため上位5つの併買パターンを見やすくします。
![スクリーンショット 2024-01-19 10.38.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/94dce083-5083-4dc7-86c1-faebd08dc29d.png)

後続のノードを以下の手続きで自動生成します。５つの赤い文字のセルを指定した上で[生成]メニューから[条件抽出ノード]を選択します。
![スクリーンショット 2024-01-19 10.39.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/9d5b4f13-294c-a6b5-eefd-c549f32244bd.png)

c.[条件抽出]ノードを編集します。上位５つの併買パターンの該当レコードを抽出します。
![スクリーンショット 2024-01-19 10.39.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/e3d3ad80-4539-c38b-8428-3383b624d8ac.png)

[デーブル]ノードを実行します。
![スクリーンショット 2024-01-19 10.40.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/6c00483e-de89-d392-685a-812b0f905a3b.png)


#### 注意事項

購買有無のフラグが１と0で記述されているため、1を真とするフラグ型にあらかじめ定義しておきます。具体的には[尺度]を[フラグ型]に指定した上で[値の読み込み]ボタンを押します。

![スクリーンショット 2024-01-19 10.36.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/7ef0b78e-364d-6c03-9ca3-c6b2c7e2dd44.png)


## 4.参考情報

####  AとBの両方または片方を購入した顧客を抽出する

https://qiita.com/416nishimaki/items/7be9d43d01b6f550ea38

####  Webグラフでカテゴリの上位アイテム間の同時購入を確認

https://qiita.com/416nishimaki/items/1546c5e26a22ee67f9c8

#### SPSS Modeler ノードリファレンス目次

https://qiita.com/416nishimaki/private/503037195081d3323eee

#### SPSS Modeler 逆引きストリーム集（データ加工）

https://qiita.com/416nishimaki/private/4bf813e6cba84b2a1008
Flutterプロジェクト 自分用のテンプレートを公開した ～Infrastructure層編～

# 概要
約半年間、独学でFlutterを勉強しました。
自分なりに開発の型が見えてきたのでGitのリポジトリと記事を残したいと思います。
本記事はそのInfrastructure層編です。
<br><br>
* [Flutterプロジェクト 自分用のテンプレートを公開した ～概要編～](https://qiita.com/koichi505/items/2ccea646f4e829cb5c77)

* [Flutterプロジェクト 自分用のテンプレートを公開した ～Application層編～](https://qiita.com/koichi505/items/1197040eb85d69ee3b85)

* [Flutterプロジェクト 自分用のテンプレートを公開した ～Domain層編～](https://qiita.com/koichi505/items/1ec51273a6bb4159e6bd)
* [Flutterプロジェクト 自分用のテンプレートを公開した ～Presentation層編～](https://qiita.com/koichi505/items/dfa3ebdcc5a6e4e793f0)

https://github.com/koich505/flutter_template

<br>

flutterプロジェクトの開始時に作成されるサンプルアプリを置き換えたもので、基本的な仕様やUIは一緒ですが、カウントを1つ進めるたびにsharedPreferencesに現在のカウントが保存されるようになっています。
<br><br>

# デザインパターン
こちらの大変わかりやすい記事を参考にさせていただきました！<br><br>


https://zenn.dev/flutteruniv/books/flutter-architecture/viewer/5_layered-architecture

レイヤードアーキテクチャに関しては、こちらの記事内で詳しく(かつ非常にわかりやすく！)説明がされているので、こちらをご参照ください。

<br><br>

# ディレクトリ構成

lib
├ features/
│ ├ common_utils/
│ └ #feature-1
│ ├ application/
│ ├ domain/
│ └ **infrastructure/**
├ presentation/
└ main.dart
<br><br>

# Infrastructure
この層には[Domain層編](https://qiita.com/koichi505/items/1ec51273a6bb4159e6bd#repository)と[概要編](https://qiita.com/koichi505/items/2ccea646f4e829cb5c77#maindart)で触れた、抽象クラスをImplementsした機能実装済みのRepoitoryが配置されます。

また、DB操作で使用するテーブルキーなどの定数を管理するクラスも配置しています。

```dart: \lib\features\counter\infrastructure\counter_repository_constants.dart:
// repository内で使用するキーやフィールド名などの定数を定義するクラス
class CounterConstants {
  //fieldName
  final String countKey = 'count';
}
```

このシンプルなテンプレートアプリではCountをSharedPreferencesに保存するRepositoryしかありませんが、実際のアプリではDBとの通信や広告の取得などもRepositoryを通じて通信していく形になるかと思います。
アプリ外との通信は基本的にRepositoryから行うという認識で開発しています。

### Mock
mockのRepositoryをproviderにoverrideすると、バックエンドとフロントエンドの開発を別々に進めることができるというメリットがあるようです。

``` dart: \lib\features\counter\infrastructure\mock\mock_count_repository.dart
//開発時に利用するモックのrepository
class MockCountRepository implements CounterRepository {
  @override
  Future<Count?> fetch() async {
    return CountCreator.create();
  }

  @override
  Future<void> saveCount(Count count) async {}
}
```
フロントエンドの開発では、このようにmockで適当な値を返してあげればバックエンドの開発が終わっていない個所でもエラーを出さずに開発を進めることができます。
テストもしやすくなるっぽいです。


# おわりに
Infrastructure層編は以上になります。
以下の記事も併せてよろしくお願いします！



* [Flutterプロジェクト 自分用のテンプレートを公開した ～概要編～](https://qiita.com/koichi505/items/2ccea646f4e829cb5c77)

* [Flutterプロジェクト 自分用のテンプレートを公開した ～Application層編～](https://qiita.com/koichi505/items/1197040eb85d69ee3b85)

* [Flutterプロジェクト 自分用のテンプレートを公開した ～Domain層編～](https://qiita.com/koichi505/items/1ec51273a6bb4159e6bd)

* [Flutterプロジェクト 自分用のテンプレートを公開した ～Presentation層編～](https://qiita.com/koichi505/items/dfa3ebdcc5a6e4e793f0)