OmniAICreator/Qiita-1.07M huggingface dataset:
Vitestで外部モジュールをモックで使用する

## 概要

Vitestにてモックをしたい場合、その動作内容を外部モジュールから参照したい場合少し工夫が必要だったので記載
特に同じモックを書くときに省略ができるという恩恵が強いです

## Vitestのモック

Jestとほぼ同じでモックができます
使い方はネット上にたくさんあるので今回は割愛します
[参考記事](https://zenn.dev/bs_kansai/articles/21962b63727f27)

### モック処理の順番

Vitestではテストをする際に、モックされた処理(`mock()`等)は**記載位置に関係なく最初に巻き上げられ実行されます**
かなり優先順位が高く、一例として **`import`文よりも前にmockの中身が処理されます**
そのため、mockの中から外部ファイル参照をするには巻き上げ前にインポートする必要があります
[参考記事 - Vitest の vi.mock は巻き上げられる](https://zenn.dev/you_5805/articles/vitest-mock-hoisting)

### 巻き上げ前に処理する関数`vi.hoisted`

vitestには処理巻き上げ前に特定処理を実行できる`vi.hoisted()`という関数があり、ここに記述することで事前にインポートできます
```ts
// Promiseでインポート処理を記述
const useFakeInfo = await vi.hoisted(async () => {
    const { useFakeInfo } = await import("@/useFakeInfo")
    return useFakeInfo
})

vi.mock("@/useInfo", () => ({
    useFakeInfo,
}))

```

重要なのはインポートは非同期なので`vi.hoisted`も非同期で書く必要があることです
これによってファイル分割できたりと再利用性があがるのでおすすめです

### おまけ: Firestoreエミュのテストの例

Firebaseエミュにてテストができますが、Firestoreなどのテスト用インスタンスを事前に取得する必要があり`vi.hoisted`を使うことでインスタンスを使い回すことができます
以下は例

```ts
const { db, testEnv } = await vi.hoisted(async () => {
    // テスト用のFirestoreインスタンスを生成する外部モジュールをインポート
    const { useTestFirestore } = await import("../__test__/useTestFirestore")  
    return useTestFirestore()
})
```
ネットワークドライブ上でwebdriver_managerは使えない[備忘録]

## 現状の問題
**Pythonで開発したスクレイピングのシステムをネットワークドライブ上で共有して使いたい**

このような場合、Seleniumのdriverを起動する際に**webdriver_manager**を使用していると、エラーが発生し起動することはありません。

## なぜ？
webdriver_managerを使用する際に下記のコードを実行するはずです。
```python:
ChromeDriverManager().install()
```

ここで問題が発生します。
```
{ネットワークドライブのパス}
上記の現在のディレクトリで CMD.EXE を開始しました。
UNCパスはサポートされていません。Windows ディレクトリを既定で使用します。
```
このような文字列が出力されるだけで、一向にdriverが起動されることはありません。
原因としては次の要因が考えられます。(あくまで推測です)

**アクセス権限**
このコードは最新のChromeDriverをインストールする処理ですが、ネットワークドライブ上だと特定のアクセス権限が必要となります。
ネットワークドライブ上のシステムからローカルにdriverをインストールするには権限が足りていない可能性が考えられます。


**そもそもパスが違う**
実行している環境はネットワークドライブ上で、driverのインストール先はローカルの為、そもそもパスが取れない・もしくはパスの与え方が異なる可能性があります。
調べていくとUNCパスとやらが関係してくるようで、そこまで調査する気力と時間はありませんでした。


## 解決策
素直にwebdriver_managerを使用せずネットワークドライブ上にChromeDriver.exeを置いて、相対パスをwebdriver.Chromeに指定することで起動させることができます。

残念ながらwebdriver_managerを使う方法は分かりませんでした。
webdriver_managerを使える解決方法が分かり次第、記事を更新したいと思います。
ALB 1台 vs ALB 2台の比較

## 背景

AWS基盤のシステムでECS on Fargateで稼働させるコンテナベースのアプリケーションを2つ開発することになった。
どちらのアプリケーションも前段にALBを置いて、インターネット経由のHTTPSアクセスをALBで受け付けて、ALBからトラフィックがルーティングされるような構成をとることになった。
以上のようなシステムを構築する際に、ALB 1台を2つのアプリケーションで共用する構成が可能か（案1）、それともアプリケーションごとに専用のALBを用意する構成をとるべきか（案2）という相談を受けた。

案1：ALB1台の構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271327/aa0fa1f9-53fb-31b1-b58a-0f5f5812e9f0.png)

案2：ALB2台の構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271327/31312d2a-ec60-2199-2f2d-f583ede9d3ec.png)

筆者のまわりでは案2のような構成が主流で案1の構成は見かけたことがなかった。
ただ、AWSは案1の構成もサポートしているし、ネット検索すると案1の構成はいくつかヒットした。

相談を受けた相手からは、「案1で大きなデメリットがないのであれば案1を採用したい」と言われたので、念のためALB 1台 vs ALB 2台の構成について比較検討を行った。
その際に調査した内容を以下に整理する。

## ALB 1台  vs ALB 2台の比較

### AWSの利用料金
ALBは起動時間に応じた課金と処理内容に応じた課金の2種類の課金が発生する。
処理内容が同じ場合にはALB 1台の方が起動時間に応じた課金が1台分しかかからない分、コストメリットがある。

参考：[Elastic Load Balancing 料金表](https://aws.amazon.com/jp/elasticloadbalancing/pricing/)

### 可用性
ALBはターゲットグループ別にヘルスチェックをする。
そのため、案1のようにALB 1台で複数ターゲットグループのトラフィックをルーティングする構成をとった場合、片方のターゲットグループのヘルスチェックがこけても、もう片方のターゲットグループへのルーティングは止めずに継続してくれるはずでALB 1台の構成でも可用性の点では遜色ない。

### 拡張性
ALBは同時接続数やトラフィック量に関する上限は公開されておらず、負荷に応じてスケールする仕様となっている。
以下の記事にて、ALBの負荷テストをやってみたら1800Mbpsで頭打ちになったという情報があるので、1800Mbps以上、またはそれに近いトラフィックが見込まれる場合はALBを2台に分けたほうがよいと思われる。

参考：[AWS構成パターン（ELB/トラフィック処理性能評価）](http://chuu-information.com/cloud/715-2/)

### 監視や問題判別
監視や問題判別で主に利用することになるのはCloudWatchとなる。
CloudWatchのALBの4xxエラー数やリクエスト数等のメトリクスはALBのターゲットグループ別にカウントする仕様となっている。
そのため、案1のようにALB 1台を複数のターゲットグループによってルーティングされるアプリケーションで共用したとしても監視やトラブルシュートに影響は出ないと思われる。

## 結論
案1のALB 1台の構成で決定的にまずい点は思い当たらない。
1点気をつけるべきはALBへのトラフィック量が1800Mbpsに近いようなトラフィック量を見込こむのであれば1台だとスケールで対応しきれなくなる可能性があること。
そのため、そのような見込みがあるのであれば案2のALB 2台の構成を選んだほうがよい。

## その後
相談相手にはAWS基盤で極力リソースを増やしたくないという事情があり、トラフィック量の観点でも問題はないことから、案1のALB 1台の構成を採用することになった。
サービスインから1ヶ月以上経過した現在もALBに起因する問題は発生しておらず筆者としても一安心。
【プラクティス紹介】1分でさらっと分かる「プロダクトバックログ長さ制限」

## プラクティス名
プロダクトバックログ長さ制限

## プラクティスの目的・狙い
* 本当に価値があるものに集中する

## どんな時に使うか
* 優先度の低いアイテムが堆積し、PBLの見通しが悪くなってきた時

## 実施手順
1. あらかじめPBLのアイテム数の上限を決めておく（30～60程度に設定するチームが多い）
1. 未完了PBIの数が上限を超えたら優先度の低いものから**容赦なく捨てる**

## アレンジ例
* PBRの最後に残りの空き数を提示し、捨てられるPBIがないか毎回POに確認する

## アンチパターン
* 捨てたPBIを後から復活できるように別の場所に保管しておく
* アイテム数を減らすために１つのPBIに複数の要件を詰め込む

## 参考情報
出典の書籍

https://www.maruzen-publishing.co.jp/item/b304740.html


## こぼれ話（私的コメント）
PBLの底の方に「これ、一生スプリント投入されないだろうな～」と思うアイテムがずっと居座っていることってありませんか？　それに対する対策はただ一つ。消しましょう。忘れましょう。PBIはただそこにあるだけで関係者の注意力を都度消費してしまいます。価値の低いPBIよりもまだ見ぬPBIに意識を向けたいところです。物理的に削除するのは少し勇気が要るかもしれませんが、本当に必要なアイデアなら時を超えてまた挙がってくるでしょう。

　[アジャイルプラクティス一覧へ戻る](https://qiita.com/kakashi_h5/items/20584998c5ca4594b9ea)
【プラクティス紹介】1分でさらっと分かる「プロダクトバックログアイテム分割」

![vertical_slice.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526800/4c13c43b-4052-9af2-7b3a-f17326a2b93e.jpeg)


## プラクティス名（別名）
プロダクトバックログアイテム分割（ユーザーストーリー分割、縦切り、Vertical Slice）

## プラクティスの目的・狙い
* 大きすぎるPBIをスプリント投入できるサイズに切り分ける
* １つのユーザストーリーに含まれる優先度の高い機能と低い機能を切り分ける

## どんな時に使うか
* PBIがボリューム的に1スプリントの中でつくり切れない時
* スプリントの工数にまだ少し余裕があるが、次のPBIを拾うと溢れてしまう時
* MVPのサイズをできるだけ小さくしたい時

## 実施手順
1. 分割対象のPBIについて、より詳細なフィーチャー単位で切り分ける（＝縦切り）
※切り分けに困る場合は、ストーリーを具体化すると切れ目を見つけやすくなる
1. 切り分けた結果、PBIに依存関係が生じてしまうこともあるが、分割を優先する
1. ストーリーポイントを再度見積もる（その合計は元の値と一致するとは限らない）
1. 優先順位を見直す（分割前と同じ位置に並ぶとは限らない）

| 分割観点 | 具体例 |
|:-:|:--|
| ユースケースで分ける  | 問合せ業務で使う機能/分析業務で使う機能 |
| 業務ステップで分ける  | 検索/確認/修正/通知など、ビジネスフローに沿って |
| 重要度で分ける  | 絶対に必要な機能/あれば嬉しい機能  |
| 使用頻度で分ける  | よく使う機能/たまに使う機能  |
| ユーザで分ける  | 一般ユーザ用/ゲストユーザ用/管理ユーザ用  |
| 受け入れ条件で分ける(AC)  | 受け入れ条件1を満たす/受け入れ条件2を満たす |
| 操作で分ける(CRUD)  | 登録機能/参照機能/更新機能/削除機能  |
| UI品質で分ける  | 見た目は粗いが一通り使える/使いやすく洗練されたUI |
| 正常系と異常系で分ける  | 正常ケースのみ処理できる/異常ケースも処理できる  |
| プラットフォームで分ける  | iOS/Andoroid、Chrome/Edge/Firefox、各バージョン  |
| 規模・件数で分ける  | 1件ずつの処理/同時に10件処理できる  |
| データ境界で分ける  | 特定データのみ対象/全データを対象とする  |
| パフォーマンスで分ける  | レスポンスが10秒以内/5秒以内/1秒以内 |
| セキュリティ要件で分ける  | 参照権限/チェック/ロギング/脆弱性対応 |
| 実装難易度で分ける  | 実装が容易/難しい |
| 調整難易度で分ける  | 他システムとのI/F連携が不要/必要  |

## アレンジ例
* スプリントバックログアイテム（SBI）が1日で終わらないサイズになってしまう場合も同様の考え方で分割する

## アンチパターン
* ストーリーポイント5のPBIを2つに分割し、それぞれのspを2.5とする
* 設計/実装/テストといった作業工程で分割する
（設計だけ完了していてもスプリントレビューには出せない）
* 画面/サーバ処理/DBといったコンポーネント単位で分割する（＝水平スライス）
（画面だけ完成していてもスプリントレビューには出せない）

| 垂直スライス | 水平スライス |
|:--|:--|
| アジャイル的思考 | ウォーターフォール的思考  |
| 価値提供のスピードを重視 | 開発者の作業効率を重視    |
| １つのフィーチャーを実現するために必要な部分だけに絞って各層一気通貫で実装する方式  | １つの部品を完成させるために将来的に必要なものの含め全ての要素を実装する方式 |
| 例：画面にはまだいくつかの項目しかないが、その部分についてはユーザが実際に操作し、使うことができる | 例：画面には全ての項目が揃っているがバックエンドの処理がまだ実装されていないため実際にユーザが操作することはできない   |

## 参考情報

ryuzeeさんが分割観点についてまとめてくれています。より詳細に知りたい方にオススメです。

https://www.ryuzee.com/contents/blog/14554

## こぼれ話（私的コメント）
何かの記事で読んだ話です。あるコンサルさんがカンファレンスでワークショップを開催し、参加者から分割に困りそうなPBIを50個ほど挙げてもらい、皆で切り分けられるかどうかを話し合ったところ、分割できなかったものは1つも無かったそうです。つまり切れ目自体は無数にあるということでしょう。
おそらく「分割できない」と思ってしまう背景には、「これ以上、分割するとユーザにとっての価値が無くなってしまう」という思い込みがあるからではないかと推測します。確かに分割によってユーザが想定する一連のオペレーションが最後まで果たせなくなってしまうケースはあるでしょう。ただ途中まででも実物に触れ、操作を試すことで気づけることもあるハズです。そういった意味では分割後も何かしらの価値が残るのではないかと思います。
小分けにしてまず使ってみる、というのはアジャイルの戦術そのものなので、積極的に使っていきたいプラクティスです。

　[アジャイルプラクティス一覧へ戻る](https://qiita.com/kakashi_h5/items/20584998c5ca4594b9ea)
【プラクティス紹介】1分でさらっと分かる「プロダクトバックログリファインメント」

## プラクティス名（別名）
プロダクトバックログリファインメント　（PBR、バックロググルーミング、バックログ管理）

## プラクティスの目的・狙い
* PBIをスプリントに投入できる記載粒度（Readyな状態）に整える
* 検討内容や新たな知見を反映し、PBLを最新化する

## どんな時に使うか
* 直近のスプリントで対象になりそうなPBIを詳細化したい時
* フィードバックに基づいて要件/見積/優先順位を見直したい時

## 実施手順
1. PBRの実施タイミングは特に定められていない（が、定期的な開催推奨）
1. 出席者はPO,DEV,SM（と必要に応じて対象PBIに関係するステークホルダー）
1. PBLの記述をベースに、DEVが不明点や仕様をPO（＆ステークホルダー）に確認する
1. 確認結果はPBLに反映するが、書ききれない場合は別途設計メモなどに残す
1. 直近で投入対象になりそうなPBIはDEVが実作業に入れるレベルまで詳細化しておく

| パターン | 具体的な作業内容 |
|:-:|:--|
| 追加  | 新たな要望やアイデアをPBIとして追加する  |
| 更新  | 記述を詳細化する、変更点を反映する、ACを追記する、等  |
| 分割  | 大きすぎるPBI（エピック）を複数のアイテムに切り分ける  |
| 統合  | 重複する内容や一度に処理できるPBIを１つにまとめる  |
| 削除  | 不要、または価値が低いと判断されたPBIを捨てる  |
| 見積もり  | コスト（作業量）を見積もる、実績に基づき再見積もりする  |
| 並び替え  | PBIの優先順位を入れ替える、PBIに依存関係がないかチェックする|

## アレンジ例
* PBRを定期イベント化する（例：スプリントレビュー後に行う、など）

## アンチパターン
* 会議に必要なステークホルダーが出席しておらず、POの持ち帰り確認が増える
* 優先順位の低いPBIに関しても詳細しようとする（ムダになる可能性が高い）

## 参考情報
[公式スクラムガイド(2020年日本語版)](https://scrumguides.org/docs/scrumguide/v2020/2020-Scrum-Guide-Japanese.pdf)

定番、AgileStudioのアジャイルプラクティスマップから。

https://www.agile-studio.jp/post/apm-backlog-refinement

## こぼれ話（私的コメント）
PBRのタイムボックスについて、スクラムガイド2017では、「開発チームの作業の10％以下にすることが多い」という記述がありました。これを多いと見るか、少ないと見るかは現場によるかもしれません。ウォーターフォール開発における要件定義～詳細設計に相当すると考えると少し足りない気もしますが、アジャイル開発の場合はDEVが手を動かせる程度まで話を詰めたら後は実物で確認しよう、というスタンスで臨んだ方が良さそうです。またPOがボトルネックになりやすい作業でもあるので、PO-DEVの人数比によっても適正な時間配分は変わってきそうです。

　[アジャイルプラクティス一覧へ戻る](https://qiita.com/kakashi_h5/items/20584998c5ca4594b9ea)
【プラクティス紹介】1分でさらっと分かる「プロダクトバックログ」

## プラクティス名（別名）
プロダクトバックログ　（フィーチャーリスト、マスターストーリーリスト）

## プラクティスの目的・狙い
* プロダクトに対する要求事項（改善要望）を一覧化する（＝透明性を保つ）
* 最もユーザ価値が高いものから先にリリースする

## どんな時に使うか
* 様々なステークホルダーから挙がった要求事項を整理し、共有したい時
* コストとメリットに基づき、関係者間で優先順位を決めたい時

## 実施手順（取り扱いルール）

| 略語 | 意味 |
|:-:|:--|
| PBL  | プロダクトバックログ、要求事項のリスト全体  |
| PBI  | プロダクトバックログアイテム、記載された要求事項の１つ１つ  |
| PBR  | プロダクトバックログリファインメント、PBLのメンテナンス作業（追加/変更/分割/統合/削除/並び替え） |

1. プロダクトに対する要求事項やアイデアを集め、**ユーザ視点で**リスト化する（PBL作成）
1. 各要求事項（PBI）はプロダクトゴールの達成に寄与するものであることが望ましい
1. DEVが各PBIを実現するためのコスト（作業量）を見積もり、追記する
1. コストを踏まえ、POの判断でユーザ価値が高い順にPBIを並び替える
1. PBLは定常的に見直し、優先度の高いPBIから段階的に詳細化する（PBR）
1. スクラムチームはPBLを唯一の情報源として行う作業を決定する

## アレンジ例
* 要求内容をユーザーストーリー形式で記述する
* PBIごとに受け入れ条件（AC）を追記する
* コストを工数ではなく、タスクサイズの比較で相対的に見積もる（ストーリーポイント）
* 詳細化されていない粗い要求事項（エピック）も記載しておく
* 初回リリースに必要な最低限の機能（MVP）を絞り込む（ユーザーストーリーマッピング）
* ユーザ要望では無いが、間接的に必要となる作業もPBI化しておく（品質バックログ）

## アンチパターン
* 優先順位が一意につけられていない（最優先のPBIが複数ある等）
* PO以外の人が了承を得ずに優先順位を変える
* ステークホルダーがPOの了承なく、直接PBLに要求事項を記載する
* PBLは全てPOが作成するもの、という思い込みでDEVがPBL管理を手伝わない
* 記述がシステム観点（機能一覧）になっていて、「なぜ」が書かれていない
* 全てのPBIを最初から詳細化しようとする（→優先度の低いPBIは後で詳細化すればよい）
* PBL（またはそれに類するリスト）が複数存在している
* 詳細仕様がびっしりと書き込まれていてPBLの見通しが悪い（→設計書や別欄に書く）
* 会話が無く、PBLの記述だけでやりとりしている

## 参考情報
[公式スクラムガイド(2020年日本語版)](https://scrumguides.org/docs/scrumguide/v2020/2020-Scrum-Guide-Japanese.pdf)

ryuzeeさんがPBLに関する知見を網羅的にまとめてくれている資料（RSGT2022にて発表）

https://www.ryuzee.com/contents/blog/14564

## こぼれ話（私的コメント）
スクラムユーザなら誰もが知るPBLをどう紹介したものか、と改めて考えました。記述粒度や記載テクニックなどは色々ありますが、結局は書き方よりもBiz-PO-DEV間のコミュニケーションツールとして機能しているかどうかが大事なのかな、と思います。適切な粒度は現場によって異なりますし、PBLの他に要件定義書や設計書を作成するかどうかによっても変わってきます。

また僕の職場ではPOに時間がなくDEVが代筆するケースがあるのですが、そうすると大抵記述がシステム目線になってしまっています。その半ば機能一覧と化したPBIをPOに並び替えてもらうと、価値基準ではなく、単にオペレーション順で優先順位がついて返ってきたりもします。（汗）

まぁ、ユーザ価値に基づいて優先順位をつけるための方法ってスクラムガイドには載ってないですからね。。。CSPO研修とかに行くとROI（投資対効果）に基づく順位付けの考え方などを教えてもらえます。最後に研修で教えていただいたPBLの説明を引用しておきます。

「PBLはユーザ価値を生む仮説の集合であり、価値を生む確率が高い順に並んでいる」

　[アジャイルプラクティス一覧へ戻る](https://qiita.com/kakashi_h5/items/20584998c5ca4594b9ea)
IOSの権限ダイアログの文言変更の方法

初めてIOSアプリを作成してAppストアに申請して超詰まったところ
「権限の許可ダイアログに詳細な説明がありません」
上記の理由で何度も不許可
でも公式のダイアログ使ってるのにな〜？
何かカスタムする方法あるのかな〜？

ありました！
しかも簡単！

まずXcodeを開きます
自分のプロジェクトをクリックします
そうよく使うplistとかいうやつです
その中の「info」を選択します
追加した権限が必要なprivacyの末尾のvalueに文字を書くだけ！簡単です

![スクリーンショット 2023-12-29 16.02.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647748/deca119e-2d9c-c584-c173-98a0068dc3f8.png)

これの赤線で囲ったところですね
こんな簡単にできたのか。。。
自己紹介（Qiita初心者)

## 自己紹介
初めまして、ジンです。趣味は、中国文化・歴史全般です。
- 元々、大学院で経済学を専攻しておりいました。修士課程、博士課程と経て、研究者を望んでいました。
- しかし、民間で広く社会に貢献したいと思い（綺麗ごと）、民間企業に転職しました。
- 現在は、PowerPlatform,Dynamics365 の開発兼コンサルタントをしています。
- 研究者としての目線を持ちつつ、PowerPlatformとDynamicsの製品を扱える人材として、上手く立ち回れるように2024年は思考していきます。

PowerPlatformとDynamics365のコンサルタント、または開発方々と知り合いになって、飲み屋にでも行ければと思ってます。気軽に連絡ください。

また、大学関連研究者方々、学会や研究会の情報管理で、困っている方々も気軽に連絡ください。
Selenium 対象の要素が画面中央に表示されるようにスクロールする方法

## 前置き
よくあるスクロールのコードはこれですね
```python:example.py
driver.execute_script("arguments[0].scrollIntoView();", element)
```
上記のコードだと対象の要素がヘッダーに隠れてしまったり、サイトによっては画面外に表示される場合もあります。そこで画面の中央に表示させることで、問題を避けようと考えました。

## コード
```python:example.py
# 対処の要素
element = driver.find_element(By.ID, "exapmle")

# 画面の中央に表示されるようにスクロール
driver.execute_script("arguments[0].scrollIntoView({block: 'center'});", element)
```

上記のscrollIntoViewの引数で{block: 'center'}と指定すると中央に表示されるようになります。
データサイエンスでよく見る距離やら類似度をJuliaで表現する

# はじめに
先日、Xでこのようなポストを見かけた。

https://x.com/developer_quant/status/1739169912193761648?s=20

データサイエンスをする上で見かける距離や類似度などをJuliaで算出するためのコードを練習したからまとめようと思う。


# コード内容

まずは必要なパッケージを追加する。
```julia
using Distances, Statistics, StringDistances
```
データは適当に用意。
```julia
x = [1,2,3]
y = [4,5,6]
```

今回、算出する距離やらは以下の通り。

- ユークリッド距離
- マンハッタン距離
- キャンベラ距離
- チェビシェフ距離
- ミンコフスキー距離
- コサイン類似度
- ピアソン相関
- スピアマン相関
- マラノビス距離
- 標準化ユークリッド距離
- カイ二乗距離
- ジェンセン―シャノン距離
- レーベンシュタイン距離
- ハミング距離
- ジャッカード係数
- ダイス係数

ではいってみよう～！
### ユークリッド距離
```julia
euclidean_distance = euclidean(x,y)
```

### マンハッタン距離
```julia
manhattan_distance = cityblock(x,y)
```

### キャンベラ距離
```julia
function calculate_canberra_distance(x, y)
    return sum(abs.(x - y) ./ (abs.(x) + abs.(y)))
end
canberra_distance = calculate_canberra_distance(x, y)
```

### チェビシェフ距離
```julia
chebyshev_distance = chebyshev(x,y)
```

### ミンコフスキー距離
```julia
p = 3
minkowski_distance = minkowski(x,y,p)
```

### コサイン類似度
```julia
cosine_similarity = 1 - cosine_dist(x,y)
```

### ピアソン相関
```julia
pearson_correlation = cor(x,y)
```

### スピアマン相関
```julia
function rank_data(data)
    sorted = sortperm(data)
    ranks = similar(sorted)
    for (i, ix) in enumerate(sorted)
        ranks[ix] = i
    end
    return ranks
end

function spearman_correlation(x, y)
    rx = rank_data(x)
    ry = rank_data(y)
    return cor(rx, ry)
end

spearman_corr = spearman_correlation(x, y)
```

追記
スピアマン相関を算出する方法として、上記関数内の算出方法に少し誤りがあり、データによっては同順位データの順位付けのアルゴリズムが異なるため、結果が変わってしまうので、以下のコードで算出する方がよさそうです(コメントありがとうございました！)。
```julia
using StatsBase
corspearman(x, y)
```
または
```julia
cor(tiedrank(x), tiedrank(y))
```


### マラノビス距離
```julia
Σ = cov([x y], dims=2)
mahalanobis_distance = mahalanobis(x,y,Σ)
```

### 標準化ユークリッド距離
```julia
std_euclidean_distance = sqeuclidean(x,y) / length(x)
```

### カイ二乗距離
```julia
chi_squared_distance = sum((x-y).^2 ./ (x+y))
```

### ジェンセン―シャノン距離
```julia
function kl_divergence(x, y)
    result = 0.0
    for i in 1:length(x)
        if x[i] != 0 && y[i] != 0
            result += x[i] * log(x[i] / y[i])
        end
    end
    return result
end

function my_js_divergence(x, y)
    m = 0.5 * (x + y)
    return 0.5 * (kl_divergence(x, m) + kl_divergence(y, m))
end

function js_distance(x, y)
    return sqrt(my_js_divergence(x,y))
end

distance = js_distance(x, y)

```

### レーベンシュタイン距離
```julia
levenshtein_distance = evaluate(Levenshtein(), "string1", "string2")
```

### ハミング距離
```julia
function calculate_hamming_distance(x, y)
    if length(x) == length(y)
        return evaluate(Hamming(), x, y)
    end
end

hamming_distance = calculate_hamming_distance(x, y)
```
ハミング距離の算出では、`Distances.jl`と`StringDistances.jl`どちらでも`Hamming関数`を呼び出すため、どちらか一方のみをインポートしてから算出すること。

### ジャッカード係数
```julia
jaccard_index = 1 - jaccard(x,y)
```

### ダイス係数
```julia
dice_coefficient = 2 * sum(min.(x,y)) / sum(x+y)
```

いくつかはパッケージを使用しても算出できなかったので、自作関数で算出してまふ。

# まとめ
他に簡単な算出方法あれば教えていただけると助かります～(・ω・)ノ
それでは！！！
UiPath全製品を一言でまとめてみた

UiPathの製品がどんどん増えてキャッチアップできない・・・誰かまとめてくれ・・・

そんな人のために、すべてのUiPathの製品を簡単にまとめました！

製品一覧をざっくり理解することが目的となります。詳細は公式ページで確認してください！

## 主要製品

<table><tbody><tr><td>製品</td><td>説明</td></tr><tr><td>UiPath Studio</td><td>ロボット(自動化プロセス)を作成する開発ツール。多少のプログラミング経験が必要かも。非エンジニア向けのStudio X、ブラウザで操作可能なStudio Webなどもある。</td></tr><tr><td>UiPath Robots</td><td>Studioで作成したロボット(自動化プロセス)を実行するツール。AttendedとUnattendedの２つあるが、製品としては全く同じ。ただし、ライセンスの種類によって利用できる機能が違う。</td></tr><tr><td>UiPath Orchestrator</td><td>作成したロボットを管理するツール。必須ではないがあるとめっちゃ便利。<br>ロボットの稼働状況、実行状況、スケジュール実行などの様々な機能がある。</td></tr><tr><td>UiPath Assistant</td><td>ユーザーがロボットを管理するツール。実行、停止、終了などができる。<br>ピクチャー・イン・ピクチャーを使用すると、ユーザーが作業しながらロボットを実行することが可能。</td></tr></tbody></table>

## 発見

課題や問題などの**「発見」**を目的とするUiPath製品

<table><tbody><tr><td>製品</td><td>説明</td></tr><tr><td>UiPath Process Mining</td><td>業務プロセスを可視化し、継続的な改善や最適化を可能にする。<br>生産性が低い業務や課題など見つけてくれる。</td></tr><tr><td>UiPath Task Mining</td><td>ユーザーの日々の業務を記録し、AIが分析して最適な自動化の提案をしてくれる。<br>明確化されていない業務プロセスなどを発見できるかも。</td></tr><tr><td>UiPath Communications Mining</td><td>メールやチャットなどのコミュニケーションデータから、AIでビジネス上の洞察を発見する。日本語の公式ページがまだない。</td></tr><tr><td>UiPath Automation Hub</td><td>自動化のアイディアを一元管理し、優先順位付け、投資対効果（ROI）などを視覚化できる。</td></tr><tr><td>UiPath Task Capture</td><td>業務プロセスのマップやフローチャートの作成、編集が可能で、「Microsoft Word 」または「Studio」 にエクスポートできる。</td></tr><tr><td>UiPath Marketplace</td><td>UiPath開発者が役立つテンプレート、ライブラリ、ツールなどを配布しているとこ。</td></tr></tbody></table>

## 自動化

幅広く高度な**「自動化」**を実現するUiPath製品

<table><tbody><tr><td>製品</td><td>説明</td></tr><tr><td>UiPath Apps</td><td>クラウドベースのローコードアプリケーション開発プラットフォーム。ロボット(自動化プロセス)と連携可能。Microsoftの「PowerApps」に近い。</td></tr><tr><td>UiPath Integration Service</td><td>API接続をローコードで実現可能な、コネクターツール。様々なサービスと容易に連携が可能。</td></tr><tr><td>UiPath Action Center</td><td>「人がやる業務（承認、エスカレーション、例外など）」と「ロボットがやる業務」を組み合わせた業務フローを作成できる。<br>ロボットが停止、再開するタイミングを設計するイメージ。</td></tr><tr><td>UiPath Data Service</td><td>あらゆるデータを集約、管理可能。ロボットがアクセスできるデータベースみたいなイメージ。</td></tr><tr><td>UiPath Document Understanding</td><td>書類の解析ツール。PDFや画像ファイルなどから情報取得、解析ができる。「Studio」でアクティビティとして利用できる。</td></tr><tr><td>UiPath AI Center</td><td>機械学習プラットフォームサービス。RPAと機械学習の連携を可能にする。</td></tr></tbody></table>

## 運用

プロジェクトの最適な**「運用」**を可能とするUiPath製品 

<table><tbody><tr><td>製品</td><td>説明</td></tr><tr><td>UiPath Insights</td><td>ロボット導入後の効果を追跡、測定、管理ができ、可視化するツール。</td></tr><tr><td>UiPath Test Manager</td><td>テストケース作成や実行結果などを管理するツール。<br>リアルタイムでテスト結果を確認できるので、進捗管理も楽。<br>テスト周りをあらゆる面でサポート可能。</td></tr><tr><td>UiPath Automation Ops</td><td>「Studio」「Robots」「Assistant」などのポリシーを個々で設定できる。<br>例えば、「Studio」でワークフローアナライザーの編集禁止やクラシックデザインの使用禁止など、ルールを統一することが可能。</td></tr><tr><td>UiPath Automation Cloud</td><td>あらゆるUiPath製品が利用できる、クラウドソリューション。<br>セットアップ不要で、すぐに Orchestrator の機能が使用可能。</td></tr><tr><td>UiPath Automation Suite</td><td>「Automation Cloud」のオンプレ版。</td></tr></tbody></table>

## まとめ

製品かなり増えましたね。見落としがあったらコメント下さい！

今後も随時更新します。

ブログもやってますのでこちらもどうぞ！
https://zawanii.com/
プライベートサブネットのEC2へRDP接続する

# はじめに
EC2 Instance ConnectはEC2インスタンスをパブリック公開することなく接続できる便利なサービスである。今回は、既存のプライベートサブネットに新たに立ち上げたEC2インスタンスへの接続方法をまとめる。

### 前提
- クライアントPCにAWS CLIがインストールされていること
```powershell
 aws --version
aws-cli/2.15.5 Python/3.11.6 Windows/10 exe/AMD64 prompt/off
```
- Intance Connectコマンドが通ること
```powershell:powershell
aws ec2-instance-connect open-tunnel
```

## Step.1 VPCエンドポイントを作成する
EC2を設置したいプライベートVPCサブネットに専用エンドポイントを設置する。「AWSのサービス内」から選択できない専用のエンドポイントサービスである。

選択例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54100/d6c2eb96-f016-31f9-366d-77f1ead09561.png)


## Step.2 EC2を立ち上げる
プライベート区画にWindowsインスタンスを立ち上げる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54100/52049476-9465-0162-0532-4739a7fe2ad8.png)

## Step.3 ローカル環境からEC2へ接続する
まずはトンネルを確立する。ここで指定するローカルポートがローカルからエンドポイントへの入り口となる。今回は`13333`とする。
```powershell:powershell
aws ec2-instance-connect open-tunnel --instance-id i-06be4b9fd95a48934 --remote-port 3389 --local-port 13333
```
指定したポートで待ち受けが開始される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54100/cc226ae1-5786-884e-0749-b16a01886a1f.png)

EC2コンソールからEC2インスタンスへの接続資格情報を取得する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54100/759da4e0-c056-6b7a-b6fc-8284df2a6c50.png)

localhostにポート情報付きで接続、ログインする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54100/3decf958-2bff-72de-0418-1b95a7efdcc7.png)


無事接続できた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54100/aacf4a0b-3b4e-fbc0-2cd5-08edfb0299fd.png)

# 最後に
ものすごく簡単に接続できた。EC2 Incetance Conncet自体の利用は無料なので、EC2を置く可能性のあるVPCにとりあえず設定しておけば良いと感じか。

テキトーにポートを指定したが、powershellからポートの空き状況を確認しておくと良いかも。TCPポートが接続できるか確認できる。（既に利用している場合は接続確認OKとなる。）
```powershell:powershell
PS C:\Users\bridg> Test-NetConnection localhost -Port 13333                                     
TcpTestSucceeded : True

PS C:\Users\bridg> Test-NetConnection localhost -Port 13332
TcpTestSucceeded : False
```
[オレオレ08] フロントコントローラー

## 解説
前回の問題点でほぼ同じ内容のエントリーポイントを機能の数だけ用意しなければいけないというものがありました。
ほぼ同じということは共通部分が多いということです。共通部分を使いまわす仕組みがあれば1回書くだけで済ますことができます。
今回はフロントコントローラーという仕組みを使ってエントリーポイントを index.php に集約します。

## 目次
* .htaccess作成
* index.php修正
* create.html修正
* 不要となったファイルの削除
* ブラウザで確認

## 問題点
* GETパラメータに悪意のある値を埋め込まれる脆弱性がある
* index.phpに全ての機能を実装するのは非現実的

## .htaccess作成
```bash
$ cd /opt/project/stampede/
$ touch public/.htaccess
```
```
<IfModule mod_rewrite.c>
    DirectoryIndex index.php
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ index.php [QSA,L]
</IfModule>
```

## index.php修正
```php:index.php
// ビュークラスのインスタンス取得
$view = View::getInstance();

/* 以下を追記 */
// GETパラメータ取得
$params = $request->all();

// フォーム画面表示
if ($params['page'] === 'create') {
    $view->display('create.html');
}
// 登録処理（仮）
elseif ($params['page'] === 'store') {
    header('Location: ?page=thanks');
}
// サンクス画面表示
elseif ($params['page'] === 'thanks') {
    $view->display('thanks.html');
}

exit;
```

## create.hyml修正
formタグのaction属性を修正します
```html:create.html
        <main>
            <form class="gy-5" method="post" action="?page=store">
                <div class="mb-3 col-4">
                    <label for="inputEmail1" class="form-label">お名前</label>

```

## 不要となったファイルの削除
```bash
$ cd /opt/project/stampede/public/
$ rm create.php store.php thanks.php
```

## ブラウザで確認
>https://192.168.56.110/stampede/?page=create
---
前の記事
[[オレオレ07] 入力フォームから登録完了画面の流れ](https://qiita.com/tonoaki_sato/items/17fb91414bd4abc69f43)
次の記事
[[オレオレ09] MVCのC コントローラー](https://qiita.com/tonoaki_sato/items/e58e1863c693d98cc4a0)
【Swift】SwiftDataでenumを保存する方法

## はじめに
SwiftDataを個人開発に使用し始め、結構扱いやすいなーと感じています。
今回はenumを保存する方法です。
ちょー簡単なのでサクッと終わります。

## 環境
- PC: MacBook Air M2
- macOS: Sonoma 14.1
- Xcode: Version 15.0


## この記事でわかること
- SwiftDataでenumを保存する方法

## この記事で説明していないこと
- SwiftDataの基本的な使い方。「基本的な使い方をまだ知らないよ」。という方は以下の記事も書いているので読んでいただければと思います。

https://qiita.com/Ri__/items/0c46c432b2e873ceeb04

## enumを保存する方法
早速ですがenumを保存する方法の紹介です。

めちゃくちゃ簡単です。

enumに`Codable`を準拠させる。以上です。

```Swift

@Model
final class Todo {
    let task: String
    let createdAt = Date()
    var isCompleted = false
    var priority: Priority?

    init(task: String, priority: Priority? = nil) {
        self.task = task
        self.priority = priority
    }
}

enum Priority: CaseIterable, Codable {
    case high
    case medium
    case low

    var title: String {
        switch self {
        case .high:
            return "high"
        case .medium:
            return "medium"
        case .low:
            return "low"
        }
    }
}
```

## おわりに
サンプルもあるのでよければ！
https://github.com/Rin-t/SimpleTodoWithSwiftData/tree/how_to_save_enum

ではでは！
Beam subjected to moment load はりの応力とSFD，BMD 基本例題4.20 P98 「材料力学演習(20221021)」をsympyでやってみたい。


モーメント荷重が作用するはり(中央部)

# オリジナル
[基本例題4.20 P98](http://zairikiweb.starfree.jp/zai_enshuh/zai_enshuh_ver.3.3.pdf#page=103)＜[「材料力学演習(20221021)一括(ver.3.3)」を勉強したい。#sympy](https://qiita.com/mrrclb48z/items/c3274daf5f7a99cfe027#%E4%BD%9C%E6%A5%AD%E4%B8%AD%E7%A7%81%E3%81%AE%E8%A7%A3%E7%AD%94sympy)
？？？タブレット等で、pdfを開く事ができないかも。？？？　

:::note info
次　 [基本例題4.21 P99(端部)
](https://qiita.com/mrrclb48z/items/e74d3bd1fbe6d183f77d)
:::

# sympyで
・ver0.1
```python
# ver0.1
# 基本例題4.20 P98
from sympy import *
from decimal import Decimal, ROUND_HALF_UP

var('FAC,x,a,MAC,FCB,P,MCB,l,RB,MC',real=True)
# var('RA,RB'                        ,real=True)
RA = Symbol('RA')
RB = Symbol('RB')
def myDic (myStrKey,myValue):
    return {sympify(myStrKey):myValue}
def myRound1(x, d=1):
    p = Decimal(str(x)).quantize(Decimal(str(1/10**d)), rounding=ROUND_HALF_UP)
    p = float(p)
    return p
MAC=solve(-RA*x+MAC   ,MAC)[0]                  ;print("# MAC =",MAC)
MCB=solve(-RA*x+MC+MCB,MCB)[0]                  ;print("# MCB =",poly(MCB,P).args[0])
FAC=diff(MAC,x)                                 ;print("# FAC =",FAC)
FCB=diff(MCB,x)                                 ;print("# FCB =",FCB)
RA =solve(MCB.subs({x:l}),RA )[0]               ;print("# RA  =",RA)           
RB =solve(RA+RB          ,RB )[0]               ;print("# RB  =",RB) ;print()          
# 
rep = {l:1.0,a:0.4,MC:1000}
rep|= myDic("RA" ,myRound1(RA.subs(rep)) )     # ;print("# rep =",rep)
rep|= myDic("RB" ,myRound1(RB.subs(rep)) )     # ;print("# rep =",rep)
print("# ",rep )
# 
print("# RA  =",myRound1(RA .subs(rep)))
print("# RB  =",myRound1(RB .subs(rep)))
print("# FAC =",myRound1(FAC.subs(rep)))
print("# FCB =",myRound1(FCB.subs(rep)))
print("# MAC =",MAC         .subs(rep) )
print("# MCB =",MCB         .subs(rep) )
# MAC = RA*x
# MCB = -MC + RA*x
# FAC = RA
# FCB = RA
# RA  = MC/l
# RB  = -MC/l

#  {l: 1.0, a: 0.4, MC: 1000, RA: 1000.0}
# RA  = 1000.0
# RB  = -1000.0
# FAC = 1000.0
# FCB = 1000.0
# MAC = 1000.0*x
# MCB = 1000.0*x - 1000
```

# いつもの? sympyの実行環境と 参考のおすすめです。
[(テンプレート)](https://qiita.com/mrrclb48z/items/00dd08b0317069be9342)

# いつもと違うおすすめです。
#### Qiita

https://qiita.com/mrrclb48z/items/122750479eb60936a78c

#### 参考文献

~~＞一部に等分布荷重を受ける単純支持はり~~
~~＞JSME p89~~
　
＞単純ばり 12)
＞構造力学公式集 表5.2 単純ばりの公式　p138
下請けエンジニアの御見積テクニック

こんにちは。Kaneyasuです。

先日、[すごい広島 IT初心者の会 忘年会](https://pycon-hiroshima.connpass.com/event/304186/)に参加しました。
その場で、見積に関する質問があったので私なりのテクニックをまとめてみました。

# 本記事のターゲット

本記事は、過去私が所属していた二次請のSIerにおいての見積に関する経験をもとに書いています。
二次請け以降のエンジニア、若手のエンジニア。
技術には明るいけれど、見積の作り方はよくわからない方に読んでもらえれば幸いです。

全体的に経験に基づく主観です。

# 見積には魂を込める

基本的に見積には時間をかけてください。
ほぼほぼここでプロジェクトや仕事の成否が決まります。
見積に時間をかけずに、後で問題が露見して工数オーバーになった場合、挽回はとても難しいです。
仕様変更ならともかく、見落としによる追加請求は基本通りません。
現在の私も通さないと思います。
もし見落としがあったら次に活かす方向で考えたほうがよいです。

# 概算見積の金額を後で超えることは許されない

ざっくりとした見積が欲しいと言われて概算見積を求められることがあります。
この時、ざっくりとした見積が欲しい理由に着目してください。
ざっくりとした見積が欲しい理由が、予算の確保の可能性があります。
そうだとすると、発注金額は確保した予算以上にはならないので、概算見積で提出した金額を超える見積を出し直すのは基本通りません。
予算を超えるからです。
そこに悪気はないと思います。

ざっくりとした見積と言われても、できる限り時間をかけて見積を作りましょう。
時間がない場合は思いっきり盛りましょう。
盛った場合は、現状不明点が多いので盛っていること、明確になった時点で再見積することを説明しましょう。
クライアントも大体わかってくれます。

できれば、明確になった時点で概算金額を超えるような仕様が見つかった場合は調整させて欲しいと言っておくのがよいと思いますが、これはクライアントとの関係性次第かなと思います。

あまりにも先が見えない場合は、今時はPoC（Proof of Concept、概念実証）しましょうという方向で、一旦工数ではなく期間での見積に切り替える手があります。

# 計算する時は自分の粒度で、見せる時は相手の粒度で

見積工数を計算する時は、粒度を小さくして計算するほうがよいです。
より明確に答えられるまで粒度を小さくしてそれらを積み上げていきます。
データベース、バックエンドプログラム、フロントエンドとか、それも難しければ部品単位でもよいでしょう。

ただ、これをそのままクライアントに見せるのは避けたほうがよいです。
細かすぎる見積は見る方もエネルギーを使うので、悪印象を持たれるかもしれません。
仮に、見積の説明の場があるとしたら、細かい見積は説明も長くなるので、双方が真面目になりすぎてピリついたり、中弛みになって大切なことが伝わらなくなる可能性があります。
見せる時は、業務や画面などのクライアントのイメージしやすい単位にサマリーしてあげましょう。

数字の根拠を求められた時に説明できれば大丈夫です。

# 数字に意味を持たせる

わからないことがあったり、不明点が多い内容は、見積がしづらいです。
ここでは、見積がしづらい要素があるのをリスクが有ると書かせてもらいます。

見積を見せる時は、リスクが無い内容と有る内容は、数字に差をつけたほうがいいです。
全体的に工数に統一感があると、どれも難度が同じなのかと思われてしまいます。
リスクが無い内容と有る内容は、パッと見で違和感を感じるぐらい数字に差があってよいと思います。
違和感から、リスクはなんなのか？どうすれば解消できるのか？という議論を発生させられるかもしれません。
見積は通したいものですが、リスクがあることを意思表示しない・気づいてもらえない状態で通ってしまうと後でお互い不幸になる可能性があります。

なお、見積を提出する時、リスクによる工数を複数の内容に分散させて積むのは危険です。
見積に書かれている内容は、全部を発注してもらえるとは限りません。
一部をカットして、発注されることもあります。
この場合、リスク用の工数を全体に分散しているとせっかく積んだリスク用の工数が消えてしまう可能性があります。

# 営業的なテクニックは使わない

エンジニアが見積するのは基本的に工数のみで、利益の部分は営業の方に任せる関係性がよいです。
（見積途中に金額も計算しますけどね。）
エンジニアは基本プロジェクト単位で考えますが、営業の方ならより広い視点でこれは利益を取る、これは取らないという判断ができるからです。

もしエンジニア自身が利益のところまで考える必要があり、直接交渉もしないといけないのならば、営業的なテクニックは使わないほうがよいと思います。
昔、見積は値下げが来るのを見越して120％で出すという方法を習いましたが、
これは常日頃金額の交渉をする営業の方が語るテクニックなのでこれと同じことをエンジニアがやると高確率で失敗します。
私はこれを実践してまどろっこしいことをするなと叱られたことがあります。

エンジニアはあくまで積み重ねるようなロジックに基づく数字で話をすべきでしょう。

# 最後に

本記事は以上です。
エンジニア界隈では、見積のノウハウを教えてもらう機会は少ないと感じています。
本記事が誰かの役に立つことを願います。

何かご意見・質問ある場合はコメントいただいけると幸いです。
【jQuery】PC時のタップ・スワイプ処理の実装

# html css
```PHP
<div id="wrap">
  <div class="box">スワイプ削除</div>
</div>
<style>
#wrap {
    position: relative;
    width: 100%;
    max-width: 318px;
}
.box {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    background-color: #ccc; 
    cursor: grab;
    }
    
    .box:active {
        cursor: grabbing;
    }
 </style>

```

# Jquery
```javascript
$(function() {
    var swWrap = $('#wrap');
    var sw = swWrap.children('.box');
    var basePoint;
    var distanceMoved = 0; // 追加：移動距離を追跡する変数

    sw.bind({
        'mousedown': function(e) {
            e.preventDefault();
            this.pageX = e.pageX;
            basePoint = this.left = parseFloat($(this).css('left')); 
            this.touched = true;
        },
        'mousemove': function(e) {
            if(!this.touched) {
                return;
            }
            e.preventDefault();
            var moveX = this.pageX - e.pageX; // 左方向への移動を検知
            if (moveX > 0) {
                return;
            }
            this.left = parseFloat($(this).css('left')) - (this.pageX - e.pageX);
            $(this).css({
                left: this.left
            });
            this.pageX = e.pageX;
            distanceMoved += Math.abs(this.left - basePoint); // 更新：移動距離を更新
        },
        'mouseup': function(e) {
            if(!this.touched) {
                return;
            }
            this.touched = false;
            if(this.left > 0) {
                $(this).animate({
                    left: 0
                }, 200);
            } else if(this.left < swWrap.width() -  sw.width()) {    
  
                 if(distanceMoved < 10) {
                     $(this).animate({
                        left: basePoint
                    }, 200);
                } else {
                     $(this).animate({
                    		left: swWrap.width() -  sw.width()
                		}, 200);
                }
            }
            distanceMoved = 0; // リセット：次のスワイプのために移動距離をリセット
        },
        'mouseout': function(e) {
            if(!this.touched) {
                return;
            }
            this.touched = false;
            $(this).animate({
                left: basePoint
            }, 200);
            distanceMoved = 0; 
            if(Math.abs(this.left - basePoint) > swWrap.width() / 2) {
            	$('#wrap .box').remove();
     				}
        }
    });
});

```
投稿アプリの複数ページで利用する表示の一部をまとめる

テックキャンプの復習です！
いいねお願いします！

###  目的
- 部分テンプレートの理解
- renderメソッドで描画方法を理解
- 部分テンプレートのメリットを理解

### 表示の一部をまとめて再利用しよう
#### 部分テンプレート
ビューファイルにおいて繰り返し使用するコードを切り出し、再利用する仕組み
rubyで繰り返し使うような処理をメソッドでまとめてきたのと同じ。

テンプレート自体のファイル名は、命名規則として、アンダースコア`_`を先頭に記述します

### 投稿表示一覧部分をまとめよう
`app/views/tweets`に`_tweet.html.erb`作成

#### renderメソッド
部分テンプレートを呼び出す際に利用するメソッド
#### partialオプション
renderメソッドで使用できるオプション
`partial`というオプションをつけ、部分テンプレート名を指定することで、該当する部分テンプレートを表示できる
例）
`<%= render partial: "sample" %>`
#### localsオプション
renderメソッドで使用できるオプション
部分テンプレート内でその変数を使えるようになる
例）
`<%= render partial: "sample", locals: {post: "hello!"}%>`

app/views/tweets/index.html.erb  , show.html.erb

```ruby
<div class="contents row">
  <% @tweets.each do |tweet| %>
    <%= render partial: "tweet", locals: { tweet: tweet} %>
  <% end %>
</div>
```

### フォーム部分まとめる
`app/views/tweets`に`_form.html.erb`作成
変更前
`<%= form_with(model: @tweet, local: true) do |form| %>`
変更後
<%= form_with(model: tweet, local: true) do |form| %>

app/views/tweets/new.html.erb　　, edit.html.erb
```ruby
<div class="contents row">
  <div class="container">
    <h3>投稿する</h3>      
    <%= render partial: "form", locals: { tweet: @tweet } %>
  </div>
</div>
```
先ほど切り出したフォームの部分テンプレートにおいては、`model:tweet`となっています。したがって、
`locals:{tweet: @tweet}`と記述して、`@tweet→tweet`と読み替える記述をする

```ruby```
クローンでローカルリポジトリ作成

■概要
帰省中のため、実家PCにgit上のプロジェクトファイル群をローカルに落として、expo appに表示させるところまでのメモ。

■前処理
普段の作業PCに保存していたプロジェクトファイル群をGitHub上のリモートリポジトリへ移動させた。

■作業
- VSCode上に、対象のリモートリポジトリをクローンし、ローカルリポジトリを実家PCに作成した。VSCodeとGitHubを連携するだけでOKでとてもお手軽だった。作業内容は以下のページの最後の方を参考にさせていただきました。

https://www.kagoya.jp/howto/rentalserver/webtrend/vscode/


- その後、npm install で必要なパッケージをインストール(git.ignoreの除外により、リポジトリ上になかったpackage.json内のパッケージをインストールした。)

```
npm install
```

- 追加でexpoを使っていくので、これも併せてインストール

```
npm install -g expo-cli
```


- expo startで立ち上げたところ、
node.jsのバージョンが異なっていた模様。
→バージョンアップした。

https://nodejs.org/en


- 再度、パッケージとexpoをインストール
```
npm install 
npm install -g expo-cli
```

- その後、なぜか　@react-navigation/native　がインストールされていないとエラーが出たので、インストール

再度 expo start したところ無事立ち上がりました。
Kraken2のインデックスを自分で構築せず構築済みのDBのダウンロードで済ませる

このサイトからKraken2の構築済みのインデックスをダウンロードできます。

https://benlangmead.github.io/aws-indexes/k2

ちゃんと[公式サイト](https://ccb.jhu.edu/software/kraken2/index.shtml?t=downloads)にもそう書いてある。公式ドキュメントはよく読もう。

## もう少し詳しく

### Kraken2とは

> Kraken2は、DNA配列に分類学的なラベルを割り当てるためのツールです。高い精度と高速な分類速度を実現するために、正確なk-merマッチングを使用します。Kraken2は、クエリシーケンス内のk-merを調べ、そのk-merを含むすべてのゲノムの最も近い共通祖先（LCA）にマップするデータベースを使用します。Kraken2は、Johns Hopkins UniversityのDerrick Wood氏と彼のチームによって開発されました。

### インデックスの構築

Kraken2はサーバーから配列を取得してインデックスを構築する。

```sh
kraken2-build --standard --db mydb --threads 16
```

しかしエラーが出て最後までいけないことが多い。Qiita上にもそんなエラーに対処している記事があります。

https://qiita.com/kohei-108/items/ce5fdf10c11d1e7ca15b

今日も

```
gzip: plasmid.5.1.genomic.fna.gz: invalid compressed data--format violated
```

みたいな感じのエラーが出てコケました。これについてGitHub上に[issue](https://github.com/DerrickWood/kraken2/issues/412)や[PR](https://github.com/DerrickWood/kraken2/pull/529)も出ていましたが、下記ページからダウンロードした方が早いようだ。

https://benlangmead.github.io/aws-indexes/k2

年に1回程度更新されているようで、最新でないといけない理由がなければこちらを利用した方がよさそうです。
この記事は以上です。
Excel VBAで与えられた配列から重複しない一意な要素とそれぞれの出現回数を抽出

# 概要
* Excel VBAで与えられた配列から重複しない一意な要素とそれぞれの出現回数を抽出するためのコードです。
* 以下の動画で使われているものです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/KBKUAeuU7NA?si=oLWTje5Juen6e6F4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>


# 実行環境
以下の環境で動作確認をしました。
* Windows11でのExcel 2021

# 注意点
* プログラムの実行については、すべて自己責任で行ってください。実行により発生した、いかなる直接的または間接的被害について、作者はその責任を負いません。

# コード

```vb:VBA
Option Explicit

Sub TestDuplicateCount()
    ' テストデータ用の配列
    Dim inputArray() As Variant
    ' 重複を削除した一覧を格納する配列
    Dim uniqueArray() As Variant
    ' 重複した要素の個数を格納する配列
    Dim countArray() As Variant
    
    ' テストデータの設定
    inputArray = Array("A", "B", "C", "A", "B", "D", "E", "A", "C")
    
    ' 重複を削除した一覧と個数を取得
    Call CountUniqueElementsAndOccurrences(inputArray, uniqueArray, countArray)
    
    ' 結果の表示
    Dim i As Integer
    For i = LBound(uniqueArray) To UBound(uniqueArray)
        Debug.Print "文字: " & uniqueArray(i) & ", 個数: " & countArray(i)
    Next i
End Sub

Sub AnotherTestDuplicateCount()
    ' テストデータ用の配列
    Dim inputArray() As Variant
    ' 重複を削除した一覧を格納する配列
    Dim uniqueArray() As Variant
    ' 重複した要素の個数を格納する配列
    Dim countArray() As Variant
    
    ' 別のテストデータの設定
    ReDim inputArray(0 To 9)
    inputArray(0) = "Apple"
    inputArray(1) = "Orange"
    inputArray(2) = "Banana"
    inputArray(3) = "Apple"
    inputArray(4) = "Orange"
    inputArray(5) = "Grape"
    inputArray(6) = "Apple"
    inputArray(7) = "Banana"
    inputArray(8) = "Apple"
    inputArray(9) = "Cherry"
    
    ' 重複を削除した一覧と個数を取得
    Call CountUniqueElementsAndOccurrences(inputArray, uniqueArray, countArray)
    
    ' 結果の表示
    Dim i As Integer
    For i = LBound(uniqueArray) To UBound(uniqueArray)
        Debug.Print "果物: " & uniqueArray(i) & ", 個数: " & countArray(i)
    Next i
End Sub


Sub CountUniqueElementsAndOccurrences(ByRef inputArray() As Variant, ByRef uniqueElements() As Variant, ByRef occurrences() As Variant)
    ' 辞書オブジェクトを作成
    Dim elementDictionary As Object
    Set elementDictionary = CreateObject("Scripting.Dictionary")
    
    ' 辞書に要素を追加し、重複の数を数える
    Dim currentElement As Variant
    Dim i As Integer
    For i = LBound(inputArray) To UBound(inputArray)
        ' 現在の要素を取得
        currentElement = inputArray(i)
        If Not elementDictionary.Exists(currentElement) Then
            ' 新しいキーの場合、値を1に設定
            elementDictionary.Add currentElement, 1
        Else
            ' 既存のキーの場合、値を1増やす
            elementDictionary(currentElement) = elementDictionary(currentElement) + 1
        End If
    Next i
    
    ' 重複を削除した一覧と個数を配列に格納
    ReDim uniqueElements(0 To elementDictionary.count - 1)
    ReDim occurrences(0 To elementDictionary.count - 1)
    
    ' 配列に値を代入
    i = 0
    For Each currentElement In elementDictionary.Keys
        ' 重複を削除した一覧に要素を格納
        uniqueElements(i) = currentElement
        ' 重複した要素の個数を格納
        occurrences(i) = elementDictionary(currentElement)
        i = i + 1
    Next currentElement
End Sub

```
別のアカウントにあるCodeCommitを起点にCodePipelineを動かしたい

# はじめに
この記事はDevOps on AWS大全 実践編の一部です。
DevOps on AWS大全 実践編の一覧は[こちら](https://qiita.com/tech4anyone/items/c27e74f9ae569ced259f)。

この記事では別のアカウントにあるCodeCommitを起点にCodePipelineを動かすアーキテクチャを決める流れを解説しています。

具体的には以下流れで説明します。

- 解決したい課題の整理
- 今回使うAWSサービスの整理
- アーキテクチャの策定
- 策定したアーキテクチャで達成できたこと

AWSの区分でいう「Level 400 : 複数のサービス、アーキテクチャによる実装でテクノロジーがどのように機能するかを解説するレベル」の内容です。

# この記事を読んでほしい人
- DevOpsエンジニアがアーキテクチャを決めるときにどのような思考フローを踏んでいるか知りたい人
- CodeCommitをクロスアカウントで利用するアーキテクチャを知りたい人
- AWS Certified DevOps Engineer Professionalを目指している人

# 前回までの流れ
[こちら](https://qiita.com/tech4anyone/items/4b395f7a4a6189376b39)の記事で以下のアーキテクチャを策定しました。
![](https://storage.googleapis.com/zenn-user-upload/02b5b5e055df-20231228.png)

# 解決したい課題の整理
現在、解決したいと思っている課題は以下になります。
- 管理用アカウントにあるCodeCommitを起点にして、開発用アカウントのGitOpsを実現したい
- チャットの通知先は前回同様、開発アカウントにしたい

ということで、これをどうやって解決するか考えていきましょう。

# 今回使うAWSサービスの整理
今回使う代表的なAWSサービスの概要とベストプラクティスは[前回](https://qiita.com/tech4anyone/items/4b395f7a4a6189376b39)同様です。

# アーキテクチャの策定
ここからはやりたいことを順番に考えながらアーキテクチャを策定していきます。
## 管理用アカウントと別にある開発用アカウントに管理用アカウントと同じCICDパイプラインが欲しい
とりあえず何も考えずに既存のパイプラインをそっくりそのままコピーすると以下のようなアーキテクチャになります。
![](https://storage.googleapis.com/zenn-user-upload/f5a77942ac6f-20231229.png)

上が管理用アカウントですでに作ってあるもの、したが開発用アカウントで新しく作るものです。
とりあえず、これでも管理用アカウントと同じCICDパイプラインを開発用アカウントにも作れましたが実現したいことは違います。

GitLabからミラーリングされるCodeCommitは1つでCICDパイプラインは環境ごとにソースが異なる、というのが実現したいアーキテクチャです。

また、チャットツールであるMattermostは二か所に構築するとコストがかかるのでここも改善したいところです。

## 管理用アカウントと開発用アカウントで重複するリソースは削除したい
先ほどは何も考えずに管理用アカウントと開発用アカウントで同じパイプラインを構築しましたが、CodeCommitとMattermostは管理用アカウントに統合したいのでそれを消し込んでいきましょう。

また、Mattermostへの通知に使っているEventBridgeとLambdaも1つにしたいので統合する前提で消してしまいます。

これらをまとめると以下のようなアーキテクチャになります。
![](https://storage.googleapis.com/zenn-user-upload/9ffa1208f161-20231229.png)

## 管理用アカウントのCodeCommitを起点に開発用アカウントのCICDパイプラインを動かしたい
だいぶすっきりしたので、あとは管理用アカウントにあるCodeCommit起点で開発用アカウントのCICDパイプラインを動かし、管理用アカウントのMattermostに通知を飛ばすだけです。

これを実現するためには、開発用アカウントから管理用アカウントへのスイッチロールが必要になります。

そこで、AssumeRole用IAMロールを管理用アカウントに準備しましょう。
AssumeRole用IAMロールが管理用アカウントにあれば、開発用アカウント側のIAMロールが管理用アカウント側にスイッチし、管理用アカウントの権限で管理用アカウントのAWSリソースを触れるようになります。

これらをまとめると以下のようなアーキテクチャになります。
![](https://storage.googleapis.com/zenn-user-upload/2a4c32bfe461-20231229.png)

これを全体像とまとめると以下のようなアーキテクチャになります。
![](https://storage.googleapis.com/zenn-user-upload/f25d7cd093fb-20231229.png)

# まとめ
本記事では別のアカウントにあるCodeCommitを起点にCodePipelineを動かす方法をまとめました。

今回策定したアーキテクチャで実現できたのは以下の項目です。
- 管理用アカウントのCodeCommitから開発用アカウントのS3にアーティファクトを格納
- 開発用アカウントのS3に格納されたアーティファクトをもとに開発用アカウントでCloudFromation Stackを作成
- マネジメントコンソールを確認する必要があるタイミングで開発用アカウントから管理用アカウントに構築したチャットに通知を飛ばすChatOps

次回はコンテナのCICDを考えてみたいと思います。
"~が...へのアクセスを求めています"の実装方法

## はじめに
アプリの開発において、ユーザーのプライバシーに関連する情報へのアクセス権を取得する必要が生じることがよくあります。この際、具体的な使用目的や利用する情報の詳細をユーザーに明示し、その許可を得る確認画面を表示することが必要です。今回は、この確認画面を実装するためのXcodeの設定手順について解説します。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984024/36463344-da5f-234e-6f1a-2e5c5e1f2700.jpeg" width = 300>

## Xcode設定手順
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984024/170c5f23-858f-f4de-d896-777cba1e19d5.png)


① プロジェクト設定画面からInfoを選択
② ＋ボタンでプロパティを追加
③ Key（許可を求める機能：例ではカメラ）を選択
④ description（何のために何を使うのかの説明）を設定

実際にカメラを起動してみてください。たったこれだけで、確認画面を表示することができました！

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984024/eb0117ce-c260-e256-0e25-10c39f469457.jpeg" width = 300>

## 最後に
Xcodeでボタンをポチポチするだけでよく見るあの確認画面が実装できてしまいました。これからも活用していこうと思います。
MariaDBのバイナリーログを人が読めるtxtに変換

# 前提

Windows10にインストールしたMariaDBに対する情報となります。

# バイナリーログはそのままだと人が読めない

例えばサクラエディタで開くとこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/f6c49be8-215a-cb0c-3a3f-615a9992c5e3.png)

# なぜ人が読めるtxtに変換するのか

**どの時点からロールフォワードしたらいいかの判断のため** というのが一番大きいです。

txt変換するとこんな感じで見れるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/874d3cbf-a172-e998-b19d-220347b1b650.png)

時刻、ログポジション番号、流れたSQLが見れます。

こういった情報が見れることで…

「〇時〇分までの世代バックアップはあるから、ログポジション番号△△からロールフォワードすれば障害が起きる直前の状態まで復旧できる」

といった判断ができます。

# やり方

MariaDBのサーバーをインストールすると
**バイナリーログを変換する機能『mysqlbinlog』**
も一緒にインストールされます。

コマンドプロンプトで下記。

```bat:
"C:\Program Files\MariaDB 10.5\bin\mysqlbinlog" -v バイナリーログのファイルパス > 変換後txtのファイルパス
```

# 参考サイトさん

https://qiita.com/waokitsune/items/1b248577a9bb45d30f51

https://mariadb.com/kb/en/mariadb-binlog-mysqlbinlog/

https://mariadb.com/kb/en/mariadb-binlog/

# バージョン

Microsoft Windows [Version 10.0.19045.3803]
MariaDB 10.5.4
DNS(Route53)周りの知識整理

## はじめに

こんにちは。[kosukein38](https://twitter.com/kosukein38)です。
ローカルで作成したアプリやWebサイトをデプロイしようとなったときに、必ずといっていいほど行う作業が独自ドメイン化だと思います。
独自ドメイン化は記事もたくさんあって、見よう見まねでやっていればなんとなく設定できてしまうと思います。

しかし、ちょっと外れたことをやりたいなと思ったときに、用語の知識がなく、どこをいじっていいのか分からないという事態に陥ります（それが僕です😇）
そこで今回はDNSについて、基本的な用語を確認しながら知識整理をしていきたいと思います。

## 対象者
- DNS初心者

## 内容
### DNS
DNSは(Domein Name System)の略でドメインをIPアドレスへと変換する仕組みのことを指します。

### DNSサーバーの種類
#### 権威DNSサーバー
特定のドメインのIPアドレス情報などを保持するDNSサーバー。
Webクライアントからのドメイン名に関する名前解決のリクエストを受け取り、それに対応するドメイン名を管理する権威DNSサーバに問い合わせます。その後、該当するドメイン名に対応するIPアドレス情報をクライアントに返答し、同時に問い合わせ結果をキャッシュします。

#### キャッシュDNSサーバー
クライアントに代わって権威DNSサーバーに問い合わせるDNSサーバー。
クライアントはまずこのキャッシュDNSサーバーに名前解決を依頼します。もしキャッシュに保存されていれば、その結果をクライアントに返しますし、無ければ今度は権威DNSサーバーに問い合わせします。
上位のDNSサーバから解決結果がかえってくると、キャッシュDNSサーバはそれをクライアントへ返却し、同時にキャッシュへ保存します。

### 名前解決
先ほどから何度も登場している「名前解決」とは、ドメインとIPアドレスを紐づけることを指します。

### DNSレコード
DNSレコードは、ドメイン名とそれに関連する情報を対応付けるためのデータです。
主に以下のようなものがあります。
（マイナーなものも含めると他にもたくさんあります😇）

| レコードタイプ | 説明 |
| ---- | ---- |
| A（Address）レコード | ドメイン名からIPv4アドレスを解決するためのレコード |
| AAAA（IPv6 Address） レコード| ドメイン名からIPv6アドレスを解決するためのレコード |
| CNAME（Canonical Name）レコード | ドメイン名のエイリアスを作成するためのレコード |
| NS（Name Server）レコード | そのドメインの権威サーバーを指定するためのレコード |
| MX（Mail Exchange） レコード| メールの配送先メールサーバーのドメイン名を指定するためのレコード |
| SOA （Start of Authority）レコード | ドメインに関する管理情報を格納しているレコード |
| TXT （Text）レコード | テキストメモを登録できるレコード（主にメールのセキュリティに利用） |

ちなみにRoute53では**エイリアスレコード**というのを設定することができます。
これはRoute53固有の拡張機能になっていて、S3など他のAWSサービスを使っている場合に便利です。
使用しているAWSリソースがデフォルトで持っているDNS名をIPアドレスの代わりに設定することができます。

例えば、ALBのようなロードバランサーのIPアドレスは変わる可能性があります。
そういった場合に、ALBのもっているデフォルトのDNS名を指定することで、Route53がうまいこと名前解決してくれるようです。
エイリアスレコードについて詳しくは以下の記事に書いてあります。
https://dev.classmethod.jp/articles/amazon-route-53-alias-records/


### Route53
AWSが提供する権威DNSサーバーのことです
（ポート53で動作することからRoute53と呼ばれるらしい）
ドメイン登録・管理、DNSのルーティング、ヘルスチェックが主な機能になっています。
ドメイン登録と管理は日常的に行っている方が多いのではないでしょうか?
DNSにおけるルーティング、ヘルスチェックとは果たしてなんでしょうか??

#### ルーティングとポリシー
DNSのルーティングは、特定のドメイン名に関連するIPアドレスや他のリソースレコードに対するリクエストを適切なサーバーに転送するプロセスを指します。
そして、そのルーティング方式（ルール）をポリシーと呼んでいます。
Route53には多くのルーティングポリシーが用意されています。
Route53には複数値回答ルーティングのように、ロードバランサーに近いような機能を提供するDNSルーティング方法もあるようです。

#### ヘルスチェック
Route53のヘルスチェック（Health Check）は、ユーザーが定義したエンドポイントやリソースの可用性や状態を監視するための仕組みです。
これにより、Route53はトラフィックを正常なエンドポイントにリダイレクトすることが可能になり、アプリケーションの可用性を向上させることができます。
※可用性は"システムが継続して稼働できる能力"を指します。
仕組みとしては、Route53からエンドポイントに対してクエリを送信して応答があれば正常、応答がなければ異常のステータスとなり、CloudWatchで監視や通知を送るといった感じです。

## まとめ
DNSはドメイン名からIPアドレスを特定してくれるものっていうことくらいしか頭になかったのですが、奥深いです。
（2023年末に書いています。皆様良いお年を！）

## 参考
https://www.udemy.com/course/aws-associate/
https://dev.classmethod.jp/articles/route53-alias-crossaccount/
Slintの記述をRustファイルから分離して.slintに書く【Rustで動くGUIライブラリ】

Rustミリしらです  
SlintというRust(やその他いろいろ)で動くGUIライブラリがあります  
https://slint.dev/
そのSlintをちょっと触っての備忘録です  

https://slint.dev/releases/1.3.2/docs/tutorial/rust
Slintのチュートリアルを試したのですが、このチュートリアルではSlintを一貫してRustのソースファイル(.rs)にRustのマクロとして記述していきます  
例えばHelloWorldではこのように  
```rust:main.rs
fn main() {
    MainWindow::new().unwrap().run().unwrap();
}

slint::slint! {
    export component MainWindow inherits Window {
        preferred-width: 400px;
        preferred-height: 200px;
        Text {
            text: "hello world";
            color: white;
            font-size: 24px;
        }
    }
}
}
```  
なります  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634181/aad90ff7-36cf-ece2-19c8-b5bfff28bf93.png)  
ちなみに背景が黒いのはWindowsをダークモードにしてると勝手にこうなるようです
勝手にこうしない方法もたしかあるので大丈夫です

Rustのほうに全部書いていくのがなんとなく嫌だったのですが、Slintだけ別ファイルに記述していけるらしいのでそれを試します

# やってみる  
まずビルドスクリプト？を作ります。ここではCargo.tomlと同じ階層にbuild.rsという名前で作成することにしました。  

次にCargo.tomlを編集します  
```toml:Cargo.toml
[package]
...
build = "build.rs"

...
[build-dependencies]
slint-build = "1.3.2"

```  
packageの項目でbuild.rsを使うよう指定してあげて、ビルドスクリプトの依存関係としてslint-buildというものを追加します。これが.slintファイルを使ってコンパイルするときに役立つらしい  

次に.slintファイルを作成していきます
ここでは適当にCargo.tomlと同じ階層にui.slintという名前で作成
```slint:ui.slint
export component MainWindow inherits Window {
        preferred-width: 400px;
        preferred-height: 200px;
        Text {
            text: "hello world";
            color: white;
            font-size: 24px;
        }
    }
```

build.rsに戻って
```rust:build.rs
fn main() {
    slint_build::compile("ui.slint").unwrap();
}
```
と書きます  

最後にmain.rsを修正します  
```rust:main.rs
slint::include_modules!();
fn main() {
    MainWindow::new().unwrap().run().unwrap();
}
```

マクロで記述していたSlintはさっき別ファイルに移したので全部消して、1行目のslint::include_modules!();も書き忘れないようにします  
文字通りのことをしてくれるのでしょう。英語読めませんが...  

# 完成
ここまでいくとコンパイルが通るようになります  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634181/89afffcb-e10e-d06f-dc18-d4e9483cee0f.png)
SlintどころかRustも全くわかっていないので、Slintそのものはいつかちゃんと頑張って別の記事を書きたいですね
投稿アプリの投稿表示順を並べる

テックキャンプのカリキュラムの復習です！
いいねお願いします！

```ruby```


### 目的
- orderメソッドの理解

### 投稿最新順表示
#### レコードの取得順変更
##### orderメソッド
ActiveRecordメソッド
テーブルから取得してきた複数のレコード情報を持つインスタンスの、並び順を変更するメソッド

`インスタンス = モデル名.order("並び替えの基準となるカラム名　　並び順")`
ASC（昇順）　DESC(降順)

app/controllers/tweets_controller.rb
```ruby
def index
    @tweets = Tweet.includes(:user).order("created_at DESC")
```
カーネルパニックから復活してみた

# 概要

久々に起動したUbuntu PCがカーネルパニックに陥ったが、復活させたのでメモっておきます。

# 経緯

古いソフトウェア（5.15.0-56）を使っていたので、アップグレート（sudo apt update, sudo apt upgrade -y）を試みたが、途中で失敗。sudo dpkg --configure -aを実行して復活させようとするもこちらも途中で失敗。仕方ないので、再起動したらカーネルパニックと表示され、起動できなくなった。

# 復活手順

grubによると、5.15.0-91で起動しようとして失敗（カーネルパニック）しているようなので、一旦古いカーネル（5.15.0-56）で起動し、sudo apt upgrade -yを再度試みた。また失敗したので、sudo dpkg --configure -aを実行して、sudo apt upgrade -yを再度試みた。なんとかアップグレードできたようなので、新しいカーネル（5.15.0-91）で起動を試みた。なんとか起動。

# カーネル

vmlinuz-5.15.0-56-generic（古いカーネル）
vmlinuz-5.15.0-91-generic（新しいカーネル）

# まとめ

何かの役に立てばと。
プログラミング用語の中国語の漢字表記がカッコ良すぎるし初心者に優しいからもっとみんなに知ってほしい

# 経緯
筆者は外国語大学で中国語を専攻しているのですが、偶然にも中国語のプログラミング関係の記事を読む機会がありました。その中で日本語だと直接カタカナで使用している用語も、中国語では意味のある漢字に置き換えられており、興味をそそられたので基礎的な用語を調べてみました。私自身は漢字文化圏で育った者として、こうした用語の漢字表記には[元素記号の漢字表記](https://yagokoro-lab.com/chinese-element/)のような魅力を感じます。また同時に、漢字は表意文字であるため初学者にもやさしく見えるので、日本でも（自然言語好きな変人たちの間で）もっと広まっていってほしいな、と思います。

# 個人的6選

### `Guard`:`守衛`
かっこえぇ！`錯誤`（error）が発生しても、コードの安全性をしっかりと担保してくれそうな強さを感じますよね？　ええ、感じます。

### `Delegate`: `代理`
初心者には取っ付きづらいDelegateも`代理`とされたら、仕事の一部を任せるんだな、ということが一発でわかる気がします。「Delegate？贅沢な名だねえ。お前は今日から`代理`だよ。」

### `Enum`:`枚挙`
`枚挙`ですよ`枚挙`。発生しうる場合を一つ一つ数え上げる様子がわかりやすいですよね。日本語の「列挙型」とも似ているけれど、ここで`枚挙`を使ってくるあたり独特のセンスを感じる。

### `Protocol`:`協議`
これはわかりやすいような、わかりにくいような…。でも「みんなが了承した共通の規則」感は出せているなあ。ちなみに`Extension`は`拡展`だから、`Protocol Extension`は`協議拡展`になる。ナルトの術で`協議拡展`って絶対あったよ。（ない）

### `Generics`:`泛型`
かっちょえぇ。直訳ではあるものの、一つの固有の型ではなく、任意の型を取ることを端的に表現できていますよね。この感じがたまらねえんだよな。

### `Macro`: `宏`
この単語を見つけたのが本記事執筆のきっかけなんですよね。確かにmacroは元々「巨大な」って意味だけれど、「ひろし」って訳すのは面白すぎだろ！英語のmacroの由来は、[一連の小さな命令を一つの塊として実行する「大きな」命令だから](https://thom.hateblo.jp/entry/2017/06/18/183655)、らしい。


# 今回調べた一覧 
*Swift特有の概念も含まれ得ます。
順番は[The Swift Programming Language(日本語版)](https://www.swiftlangjp.com)の言語ガイドの並びを参考に適宜追加。
|英|中|（簡体字）|メモ|
|:-:|:-:|:-:|:-:|
|Funcion|函数|-|「関数」は日本語でもこう書けるよね
|Method|方法|-|直訳みが強い
|Closure|閉包|闭包|-
|Enumeration|枚挙|枚举|-
|Struct|結構体|结构体|-
|Class|類|类|「結構体」に対して「類」は簡潔すぎないか
|Property|属性|-|これも直訳感が強いな。
|Subscript|下標|下标|-
|Inheritance|継承|继承|-
|Initialization|初始化|-|「初期化」ではなく`初始化`のあたり、重大な何かが始まりそう。
|Deinitialization|反初始化|-|「終焉化」ではないんだ。
|Optional Chain|可選鏈|可选链|-
|Error|錯誤|错误|「錯誤」を見逃すと重大な問題が起こりそう。
|Concurrency|併発|并发|わかりやすい。
|Macro|宏|-|（ちなみに「ひろし」ではなくhóng（ホン⤴︎）と発音する。）
|Type Casting|類型転換|类型转换|-
|Nested Type|嵌套類型|嵌套类型|-
|Extension|拡展|扩展|-
|Protocol|協議|协议|-
|Generic|泛型|-|-
|Access Control|訪問控制|访问控制|-
|Delegate|代理|-|-
|Guard|守衛|守卫|-
|Type Alias|類型別名|类型别名|わかりやすい！
|Override|重写|-|-
|Computed Property|計算型属性|计算型属性|
|Tuple|元組|元组|-
|Polymorphism|多態性|多态性|抽象的な統一されたインターフェイスで多様な実装を呼び出せることを上手に表現できてる気がする。（早口）
|Instance|実例|实例|これもわかりやすい！
|Protocol Extension|協議拡展|协议扩展|-
|Route|路由|-|-
|Prototype|原型|-|-
|nil|空値/無値|空值/无值|これもわかりやすい。
|Void|無類型|无类型|空元组（空タプル）ともいう。
|Never|(永不返回類型)|(永不返回类型)|左記は一例。さすがの中国語でもNeverは決まった訳語がないらしい。

# 後記
他にも面白い漢字表現や、中国語を知りたい用語などありましたら、ぜひコメントで教えてください。適宜リストに追加していきます。
間違いやより一般的な表記などありましたら添削お待ちしています。