OmniAICreator/Qiita-1.07M huggingface dataset:
Fusion 360で作った3DデータをWebでAR表示する

## 成果物

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628782/6f87f1f5-fa2d-d86e-46c8-3cc74b708885.png)

このようなサイトが出来上がります。

https://shirokuma89dev.github.io/AR-Test/

スマホでもアクセスしやすいようにリンクのQRコード置いておきます。読み取って確かめてみてください！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628782/c3bc7455-d3e1-04d6-1c17-ea5f900d2e87.png)

## やりたいこと

Fusion 360でモデリングした3DモデルをスマートフォンでAR表示できるようにしたいです。今回はiOS, Android両方の対応を目指します。

## 実現手法

Googleが提供するmodel-viewerを使います。Google社ですが、iOS（AR-Kit）への対応もバッチリなのでおそらくこれが一番楽です。

https://github.com/google/model-viewer

## 最終的なコード

最悪これだけみてブラウザバックしてください。

```html:index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>AR-Test</title>

    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div id="ar-view">
        <model-viewer alt="" src="./ar/data-android.gltf" ios-src="./ar/data-ios.usdz" ar
            camera-controls></model-viewer>
    </div>
</body>

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

</html>
```

```css:style.css
#ar-view {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

model-viewer {
    width: 100%;
    height: 100%;
}
```

https://github.com/shirokuma89dev/AR-Test

## 環境

長いので折りたたみます。

<details><summary>開発側</summary>

- Fusion 360 2.0.17954 arm64 [Native] 
- Safari バージョン17.2 (19617.1.17.11.9)

```:macOS詳細（neofetchより）
OS: macOS 14.2 23C64 arm64
Host: Mac14,2
Kernel: 23.2.0
Uptime: 6 days, 22 hours, 15 mins
Packages: 67 (brew)
Shell: zsh 5.9
Resolution: 1710x1112
DE: Aqua
WM: Quartz Compositor
WM Theme: Blue (Light)
Terminal: iTerm2
Terminal Font: UDEVGothic35NFLG-Regular 16
CPU: Apple M2
GPU: Apple M2
Memory: 4515MiB / 24576MiB
```
</details>


## 解説

ここに辿り着くまでの方法を伝授します。

### 1. 3Dモデルの作成

Fusion 360で任意の3Dモデルを作成します。

![スクリーンショット 2023-12-24 2.12.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628782/0dc3e741-9aaf-f0e4-3a52-2ed2e3361629.png)

### 2. .usdz書き出し

iOSプラットフォームで表示するための.usdz形式で書き出します。

![スクリーンショット 2023-12-25 14.18.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628782/d0706e18-15d1-de57-0973-b35116d660e8.png)

![スクリーンショット 2023-12-25 14.18.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628782/c7550c79-d76f-0b20-9bd7-6328bba61433.png)

書き出したらプロジェクトフォルダの任意の場所に保存します。

### 3. .gltf変換

https://products.aspose.app/3d/conversion/usdz-to-gltf

こちらのサイトでusdzからgltfに変換します。こちらも同様にダウンロードしてプロジェクトフォルダの任意の場所に保存します。

![スクリーンショット 2023-12-25 14.27.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628782/902122fe-c30c-f1c9-2ec6-4405039eecc9.png)

### 4. 確認

適当にLive Serverかなんか立てて表示を確認できたら完成です。

### 終わりに

私は去年年賀状にQRコードを貼ってこれをやったらウケたので、今年もやろうと思います。
AWS Certified Security - Specialty試験 (SCS-C02)を受けてみた

## はじめに
AWS Certified Security - Specialty試験 (SCS-C02)を受験し、合格出来ましたのでその際の雑記となります

## これまでのAWS認定受験歴など
春先までの12冠を目指しており、今回で8個目のチャレンジとなります
~~クリスマスプレゼント🎁~~
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617151/3f4e6617-00ab-e5f1-5c41-fea3def5d815.png)



## 今回の試験結果
不安な問題も有ったが、恐らく合格しているのでは...?といった手ごたえであり、概ね予想通りの結果となっていました🍀
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617151/f6156931-1766-4842-d0e6-b93df95b86e8.png)


## 学習法など
- 学習時間・期間
    - 約3週間、累計30時間程度の学習を行いました
- 教材など
    - 書籍：要点整理から攻略する『AWS認定 セキュリティ-専門知識』 (Compass Booksシリーズ) Kindle版
        - AWS DBSの挑戦時に『AWS認定 データベース-専門知識』を購入したところ、非常に読みやすいと感じましたので購入しました。
        - 全体像・概要を掴むことを意識して最初に2日程度で読み終えました、細部で詰まっても一旦先に進む形で読み進めました
    - Udemy講座: Ultimate AWS Certified Security Specialty [NEW 2023] SCS-C02
        - AWS DBSの挑戦時に同じ方のDBS版講座が分かりやすかったため購入しました
        - 書籍と同じく細部よりも全体像・概要を掴むことを意識して倍速再生等も活用しつつ4日程度で視聴を終えました
            - 英語教材ではあるのですが、日本語字幕の品質が高いです。そのため通勤通学中などに耳だけで聞くといった学習は難しい。といった点を除けば、視聴にあたり特に問題は生じないかと思います。
    - Blackbelt: こちらは最初から読むというよりも、理解が浅いと感じたサービス・オプション等に遭遇した際に都度読みに来るようなイメージで活用していました
    - 問題集: AWS WEB問題集で学習しよう
        - Blackbelt、書籍、Udemy講座等で分からない部分を調べつつ、残りの時間は主にこちらに充てていました

## 前日・当日の過ごし方など
結果的に[DBSの挑戦時](https://qiita.com/TKY_study/items/5c16bebd5af45901f325)と非常によく似た状況・流れとなり、以下のような点に着目・注意するかと良いかと感じました。

- テストセンターで指定されている身分証明書(運転免許証＋健康保険証など)を入念に確認して忘れないようにする
- 試験時間をフルに使うということは無さそうなため、休み休み解いた方が逆に捗るかもしれない
    - 頭の回転が鈍っていても時間を潤沢に使うことで補助できるため、試験開始を一番遅い時間帯にして朝方まで学習を頑張ってみるのも手(※非推奨) 
- テストセンターであれば途中でお手洗いに行けるため、最大限に活用する(※もしかしたらセンターによる違いがあるかもしれません) 

## 感想など
- 1開発者目線では馴染みのない・実際に触ったことはないサービスも多く(特に社内SRE部署が統括管理しているような部分)、少し不安もありましたが合格出来て良かったです！
- その名称や試験範囲の通りかなりセキュリティに偏った出題がされると感じましたが、
セキュリティはどこにでも絡んでくる存在であるため、他資格(特にSAP)を先に取っておくとその分楽になるといった性質があるように感じました。
そういった性質や自身の受験順序に基づいて個人的な体感難易度としては以下のように感じました
- CLF < DVA < SAA < SOA=DBS=SCS < DOP < SAP
業務効率化を目指して社内用のChromeの拡張機能を作った話

# はじめに
チームで開発時のブランチ名を**feature/#チケット番号**の形式で運用していました。
チケットはRedmineで管理しているため、ブランチ作成時にチケットの番号なんだったっけ～の
流れになるのが地味にストレスだったのでどうにかしたかった

# 拡張機能作ったらどうです？
チーム内で個人開発色々やってみようぜ、の時期でチームメンバーから
「Chromeの拡張作ったらいいんじゃないですかね、solid.jsでｗ」
と新しい言語触ってみるついでに拡張機能つくってね、の流れになり作るか・・・となりました。

# 最終的にどうなった？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519878/87f65b1e-dc52-9933-afa4-09917e3782f2.png)
まんまの名前ですが、RedmineのAPIを利用してチケット作成を行い、作成後に**feature/#チケット番号**
の形でクリップボードにブランチ名を保存してくれる拡張機能を作りました。

拡張機能からチケットを作成したらブランチ作成時にコピペするだけでいいのでRedmine開く必要もなくなりそれなりに快適になりました

# おわりに
ブラウザの拡張機能は気軽に手を出しやすい領域だとおもうので今後も何かネタがあれば作ってみてもいいかなと思いました。
二芸目を極める

## 前提
筆者は社会人3年目のエンジニアです。

入社～2年目まで、
社内ではマイナーな言語での開発をしており、運用に関してはそらでできるので、一芸を極めた、とさせていただいております。

3年目で、
上記の開発から少し離れ、幅広い業務に携わらせていただきました。

問題は「二芸目」です。
一芸目は後継がいるので、筆者の手から離れるのも時間の問題。
訳あって、一芸目に戻らず、新しい業務へチャレンジする機会を頂いております。

本記事は、一芸目を極めた筆者が二芸目を極めるにはどうすればよいか、仮説を記したものです。

二芸目を極めるには、以下の3つが必要だと考えております。
1. 二芸目との「接触回数」を増やす
2. 二芸目に関して「自己発信」を増やす
3. 一芸目を「捨てる」

## 接触回数を増やす
一芸目を極めることができた大きな要因です。

当時、一芸目は良くも悪くも、問い合わせが多い開発でした。
開発担当者は筆者のみ、担当営業もいなかったため、新規開発や改修、担当者としてフロントからの質問対応、カスタマーサポートとしてクライアントとのやり取りなど、幅広く触れさせていただきました。
「○○を学ぶために✕✕をやる！」と考える暇がありませんでしたが、たくさん触れたことで、対象に対しての理解度が上がった、と思います。

### 方法
適当に3つくらい上げました。
「開発」、「競合調査」、「自社への問い合わせ内容の確認」。

#### 開発
会社に限らず、個人で使うものでもいいと思います。
必要なのは、「やりたいことを叶えるのに、何が必要なのかを調べる」行為だと思います。

#### 競合調査
競合の最新ニュースを確認します。
「競合がやっているから、うちもやろう」はすぐにはできません。(本当に必要なのかの精査が必要ですし、もっといいやり方があるかもしれないので。)
しかし、「他のやり方でカバーできないか」といった運用回避を含めて考えることで、知識として定着させることができます。

#### 自社への問い合わせ
会社によって異なると思いますが、クライアントとの接触ログやクライアントからフロントへの問い合わせ、クレームなどですね。
フロントから言われる前なので心構えができますし、ご利用中のクライアントの温度感を知ることで仕事の優先度が掴めると思います。


**上記は基本毎日やります。**
歯磨きやシャワーと同じですね。
「好き」になる、とは異なりますが、対象に対して「理解度」は確実に上がります。
https://gimon-sukkiri.jp/tanjunsesshokukouka/

## 自己発信
一芸目では意識してませんでしたが、二芸目を極めようとして若干つかんだ気がしているものです。
二芸目を極めるにあたり、他の人に「二芸目を極めようとしている」と周知していました。
最初は社内でのコミュニケーションの種の1つとして行っておりましたが、周りに周知することで二芸目に関する反響など多くいただくことができました。

### 方法
「投稿」「勉強会」「ランチ」といったところでしょうか。

#### 投稿
もちろん二芸目に関することです。
社内でも社外でも構いません。
正直、筆者は自己発信が苦手なので、どこぞの記事をコピペしたようなものしか書けませんが、普段、記事を読まない人のために後で調べやすいようにまとめておく、という意識にすると、個人的にやりやすかった印象があります。

#### 勉強会
ここでは社内向けの発表を指します。
開発した機能に関してでも、業界に関してでも問題ありません。
発表準備をする過程で「どうやったらわかりやすいか」「副次的に話せることはないか」など、インプットするだけでは得られないものが身につきます。
加えて、自身が発表することで、何も知らない他の人からすれば、その二芸目の顔になることができます。
自身では思いつかなかった、率直な意見をいただけるでしょう。

#### ランチ
ランチとは言ってますが、時間に限らず、食事を一緒にすることを指します。
これの良いことは仕事で関わらない人に、自分のやっていることを話せることです。
大多数が自身だけでは仕事で関わることはないでしょう。
しかし、どこに二芸目に関する知識を持っているかわかりません。
ダメ元でも言ってみると、自分のやっていることを多くの人に知ってもらい、思わぬところから反響をいただくこともあります。


**上記は毎日というか常にですね。**
勉強会やランチはチャンスが必要だと思います。
自己発信が苦手な筆者としては、「この日に勉強会を開こう」とか「この日にランチお願いしよう」を先に考えると、「期日のあるtodo」になってしまい、正直、辟易します。
別に良いのですが、おすすめなのは、常に「あれを共有しよう」「これに対しては自分の考えはこうだ」と考えておくのがよいかと思います。
常に考えていれば、あとは口に出すだけ、文字にするだけです。
「毎日」とすると「1日1回」と捉えられかねないので、「常に」とさせてください。

## 一芸目を捨てる
最も重要だと思っております。
二芸目を極めるのに、「時間の確保」は必須です。
一芸目に全く触れるな、とは言いませんが、筆者のように極端な人間はバランスを取ろうとしても、中途半端になることが目に見えています。
一芸目の記憶をなくす訳ではないので、大袈裟にやっても損はないかと。

### 方法
1と2のまとめも含みます。
「一芸目の後継の確保」、「後継に一芸目の1と2をやってもらう」、「自身は二芸目の1と2に切り替える」。

#### 後継の確保
最重要です。
細かい質問や相談の矛先を自身から逸らすためです。
後継がいなければ、マニュアルにまとめるなり、誰でも対応できる状態にする必要があります。
これをしなければ二芸目を極める時間が確保できません。

#### 後継に1と2をやってもらう
後継の成長のためにも必要です。
加えて、今までやっていた一芸目の1と2を誰かがやっていないと一芸目が廃れてしまいます。
後継の意思を尊重しますが、やったことないことに意味を見出させるのは酷だと思います。
実際にやってみて、もっと良い方法や後継に合った方法に落とし込むなど、改良してくれれば幸いです。
多少は無理にでもやってもらうことは必要だと思います。

#### 二芸目の1と2に切り替える
二芸目を極めるのに重要であるとともに、一芸目への執着をなくすのにも必要です。
一芸目を後継に引き継ぐ際に一番驚いたのが、筆者が一芸目に対して「執着」していたことです。
一芸目は筆者にとってきつく、お世辞にも上手く回せたとは言えませんが、それでも一芸目に対して愛を持って取り組んでいたんだな、と気付かされました。
しかし、これからは二芸目に愛を注がなければいけません。
筆者は良くも悪くも視野が狭くなりますので、1つにしか愛を注げないでしょう。
きっぱりと断つことも重要です。

## まとめ
記しながら「なんか恋愛っぽいな」と思いました。
恋愛に関してとやかく言えませんが、接触回数を増やしたり、自己発信したり、いろいろ繋がることがあるのではないでしょうか。(間違ってたらすみません。)

本記事はあくまで、筆者個人の主観たっぷりの仮説です。
まだまだ検証の余地があると思います。
本記事の仮説に執着せずにいろいろ試したこと、今後も記載させていただければ、と思います。

ありがとうございました。
令和５年度秋応用情報技術者試験の記録

## 本稿の目的
- 社会人になってからの資格勉強体験を総括し、来年以降に繋げること
- 自分と同じような知識・経験を持った人の参考になるようなアウトプットを残すこと

---
---

## 受験時点で持っていた資格や知識・スキル
- 基本情報取得済み
    - 2022秋。当時修士2年
- 新人研修(SIer)→基本情報レベルのIT知識
    - システム開発(WF,アジャイル開発)
    - DB
    - ネットワーク
    - Linux
- 機械学習(学部・修士の研究で３年間、バイオ系の学科)

入社先の新人研修の内容が基本情報の内容と被ることが多く、復習としてかなり役立ちました。

## 使用テキスト・教材
- 過去問道場
- Udemyの応用情報の講座
    - 自己研鑽用アカウントを会社からもらいました
- 令和05年【春期】【秋期】 応用情報技術者 合格教本 (情報処理技術者試験)

あの青くて厚いやつです。

網羅的に情報が整理されていたのでまあ買ってよかったと感じています。
取り敢えず1周ざっと読んでましたが先に過去問道場やってもよかったかも
序章に数学の内容が載っていましたが、統計やグラフ理論などそこそこのものが取り扱われていたので面食らいました。
本質的な内容でもないけどここで読むのをやめる人がいるのでは？と思います。



- ２０２３　応用情報技術者　午後問題の重点対策

あの緑のやつです。
会社で同期が解いているのを見て自分も買おうと思いました。
過去問の解説として、問題の考え方や出題傾向など有用な情報が整理されています。
ただの過去問集以上の価値があったと個人的には考えています。

## 勉強のスケジュールと詳細
- 7月　→　申し込み
- 8月下旬　→　青のテキスト1周読み切る
- 9月上旬　→　過去問道場の午前問題解きまくる + 午後の選択範囲絞る
- 9月中旬以降　→　過去問道場 + 午後対策テキスト

対策にかけた期間はトータルすると1か月半でしょうか。

### 午前の対策
これはもうコツとかなくひたすらにやるだけ。
テキストを1周目だけ真面目に読み込みました。
読み終わったら通勤時間など空いている時間にひたすら過去問道場に取り組んでました。


### 午後の対策
試験日3週間前くらいにようやく選択範囲を絞り、対策を始めました。
始めたてのころはまともに解けなかったので結構焦りました...
過去問4,5年分を少なくとも2周はしました。

僕が選択したのは以下４つ
1. DB
1. 組み込みシステム開発
1. 情報システム開発
1. システム監査

配属先がDB系のソリューションを使うことが多いということで、将来を見越してDBを取りました。

システム開発の2問については予備知識がほとんどいらないという理由で選択しています。

この中でもっとも**オススメなのはシステム監査**です。
文章から答えを抜き出すだけの作業なので対策ほぼ不要。
過去問２年分くらい解いておけば十分です。

## 受験した感想
結果はこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553897/78c683ef-6933-afd9-0dd4-92ea86db1f7f.png)
![uploading...0]()


午後に関しては手ごたえを感じた割に合格ぎりぎりの点数でびっくりしました。
ということで対策の質・量ともにギリギリだったんじゃないかなと思います。

どっちか忘れましたがトマトを収穫する機械の問題は普通に意味が分からなくて焦りました。多分この辺の点数が終わっていたのではないでしょうか・・・？

まあ受かったので問題なしです。

午前はやはり過去問道場の成果もありそれなりの点数をとれたかなと思います。
時々自分の知らない傾向の問題が出てきて焦りますが、そういう時は潔く諦めて先に進むべきだと思います。

6割取れば合格なので数問程度捨てても何の問題もなし。

## 来年の目標
DBスペシャリストとAWS系の資格を取ろうかなと思います。
受験すると決めた時期は6月頃でしたが、応用情報の対策を始めたのが8月下旬と結構遅くなってしまいました。

短期で集中してというよりはダラダラ取り組むほうが自分の性格にあっているので、今回の受験は自分的に無理がありました。

結果運よく合格しましたが、今後は計画的に時間を取って勉強しようと思います。
Rails7におけるDartSassについてわかる範囲でまとめてみた

railsでDartSassを利用する際にかなり詰まったので、理解を進めるためにDartSassについてわかる範囲でまとめてみました。
そんな深いところまでまとめられていないと思いますが、ご容赦ください...
### DartSassとは
DartSassとは現在最新のSassのコンパイラです。
Sassについても簡単に説明すると、cssを拡張し様々な機能が使えるようになったもので、実行時にはcssにコンパイルされる必要があります。
Sassファイルを実際にcssファイルにコンパイルしてくれるのがDartSassというわけです。
### Rails7におけるSass環境の変遷
RailsでSassを使用できるようにするにはGemの導入が必要なのですが、これまではsassc-railsというLibSassを用いたGemが主流でした。
しかしLibSassはDartSassの１世代前のレガシーなコンパイラであり、現在のRails7では非推奨となっています。
代わりにRailsに推奨されているのがDartSassを用いたdartsass-railsというGemです。
### dartsass-railsの利用方法
Gemfileに以下の記述を行い、bundle installします。
```Ruby:Gemfile
gem 'dartsass-rails'
```
これでDartSassがRailsで使用可能となりました。


基本的にはapp/assets/stylesheets/application.scssにSassを記述していくことになります。
application.scss以外のSassファイルをビルドに含めたい場合は、dartsass.rbファイルへの記入が必要になります。
例えば、app/assets/stylesheets/other/temp.scssをビルドしたい場合、dartsass.rbファイルに以下のように記述します。
```Ruby:dartsass.rb
Rails.application.config.dartsass.builds = {
  "other/temp.scss"  => "other/temp.css"
}
```
Rails.application.config.dartsass.buildsは、Sassのビルド元と、ビルド後のcssの配置先を設定するものです。
上の設定により、app/assets/stylesheets/other/temp.scssが、app/assets/builds/other/temp.cssとしてコンパイルされます。
そしてビューファイルで以下のように記載してあげることで、app/assets/builds/other/temp.cssがアセットパイプラインに乗り、フィンガープリント付きのcssファイルとして読み込まれます。
```erb:test.html.erb
<html>
  <head>
    <%= stylesheet_link_tag "other/temp" %>
  </head>
</html>
```
またdartsassは@import文に対応しており、複数のscssファイルをまとめることができます。
@importできるパスは通常だとapp/assets/stylesheets配下のファイルですが、こちらもdartsass.rbに設定してあげることでパスを追加することができます。
例えば、app/assets/stylesheets/otherを@importの対象に含めるには以下のように設定します。
```Ruby:dartsass.rb
Rails.application.config.dartsass.load_paths = [
  "app/assets/stylesheets/other" 
]
```
### DartSassを用いたSassファイル読み込みの流れ
ここで、簡単ですがDartSassがSassファイルをコンパイルしてから、実際のビューで読み込まれるまでの流れを説明したいと思います。
1. dartsass.rbの記述通りにSassファイルがまとめられ、ビルド先にcssファイルが出力される。
2. アセットパイプラインによってcssファイルがプリコンパイルされる。
3. プリコンパイルされたcssファイルがビューに読み込まれる。


重要なのはアセットパイプラインによって読み込まれるのはdartsassによってコンパイルされたcssファイルだということです。
そのため、ビューの読み込みでcssではなく、scssを指定しようとするとエラーとなります。
### LoadError: cannot load such file -- sassc
その際によく出るエラーが、LoadError: cannot load such file -- sasscというエラーです。
このエラーはSassをアセットパイプラインがビルドしようとして失敗したエラーで、sassc-railsが必要だからインストールするように促しています。
googleでこのエラーを検索すると、sassc-railsをインストールすればいいという記事が数件ヒットしますが、この方法は正直好ましくないと思われます。
そもそもsassc-railsの代替としてdartsass-railsを使っているため、両方混在することは好ましくないということです。

:::note alert
処理の内容が完全に被っているため、インストールした場合今後予期せぬバグの原因となる可能性があります。
:::

正常にcssにコンパイルされていればそもそもこのエラーは出ないため、正しいディレクトリにコンパイルされたcssが存在しているかを確かめるのが大切です。

### 最後に
以上が、私がわかる範囲のDartSassの仕様になります。
@importは現在非推奨であり、@useを使うべきだという点や、そのほかにもまだまだ調べきれていない点が多いので理解が進んだら再びSass関連の記事を書こうと思います。
映像技術としてのXRの整理

## はじめに
仕事でも触れる機会がありそう？ということでXR周りについて整理してみました。
Apple Vision ProやMeta Quest3の発売や空間アートがニュースになったりなどなど、、XR(クロスリアリティ)にまつわる話題はことかかない今日この頃ですよね。
ゲームの文脈の中でXRが語られることが多いですが、本日は映像技術としてのXRを中心にまとめたいと思います。

## ARとかVRってなんだろう
![スクリーンショット 2023-12-25 134337.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620308/9395d110-e120-d05b-4830-bc9e2600db73.png)


「体験」「没入」という言葉がキーになってくるんじゃないかなと思います。
それらを中心に、「どこで」をずらしてあげると、VRと呼ばれるようになったり、ARと呼ばれるようになったり。また、「どんな体験か」に社会的なものを帯びるようになるとメタバースと呼ばれるようになるんだと思います。

またXRはVRやARを包摂した大きな入れ物として考えています。

## 映像技術という枠組みでみてみると
映像作品を技術という視点で分けてみると大きく以下のように分けられるそうです。

**実写撮影（Live-Action Filming）:**

実際の環境やセットで俳優を使って撮影される映像。
映画、テレビ番組、ドキュメンタリーなどに広く用いられます。



**アニメーション:**
2Dアニメーション: 手描きまたはデジタルで作成される二次元のアニメーション。
3Dアニメーション: コンピュータを使用して作成される三次元のアニメーション。
アニメ映画、カートゥーン、CG映画などに使用。


**VFX（ビジュアルエフェクト）:**
実写映像に後からデジタル効果を加える技術。
合成、CGI（コンピュータ生成画像）、モーションキャプチャーなどが含まれる。



**モーションキャプチャ:**
実際の俳優の動きを捉え、それをデジタルキャラクターに適用する技術。
ビデオゲームやCG映画でのリアルなキャラクターの動きの制作に使われる。


**CGI（コンピュータ生成画像）:**
コンピュータを使用して生成される画像やアニメーション。
VFX、3Dアニメーション、ビデオゲームなどで使用される。


**ストップモーション:**
実際のオブジェクトや人形を小刻みに動かし、それを一枚ずつ撮影してアニメーションを作成する技術。


**インタラクティブメディア:**
ユーザーのインタラクションに反応て変化する映像。
ビデオゲームやVR（仮想現実）アプリケーションなどに使用。

## インタラクティブメディア
従来のメディアが一方向でユーザーの介入を許さないメディア装置だとするとインタラクティブメディアは次の要素が含まれているものだと考えることができます。

**双方向性（Interactivity）:**
ユーザーとメディアの間の双方向の通信や相互作用。

**ユーザーの参加（User Participation）:**
ユーザーはメディアコンテンツの受動的な受信者ではなく、能動的な参加者。
ユーザーの入力、選択、またはフィードバックがメディア体験を形作る重要な要素。

**コンテンツの変動性（Dynamic Content）:**
インタラクティブメディアは静的ではなく動的。
ユーザーの入力に基づいてコンテンツが変化。
この変動性は、パーソナライズ、適応性、またはユーザーの行動に応じた応答として現出。

## どういう技術で作られている
特にインタラクティブな体験を形作るための不可欠な感覚器としてのトラッキングとセンサー技術を見ていきます。

###### トラッキング技術
**光学トラッキング:**
外部カメラベース: カメラを使用してデバイスや特別なマーカーの位置を追跡します。例えば、VRヘッドセット用の外部センサー。

内部カメラベース（インサイドアウトトラッキング）: デバイス自体に組み込まれたカメラを使用して、周囲の環境を認識し位置を特定します。

**赤外線（IR）トラッキング:**

赤外線センサーを使用して、特別なIRマーカーやコントローラーを追跡します。これは、特にVRヘッドセットで一般的です。
**磁気トラッキング:**

磁場を利用してデバイスの位置を測定します。これは、特定の環境での使用に適していますが、金属の影響を受けやすいという欠点があります。
###### センサー技術
**加速度計（Accelerometer）:**
デバイスの加速度を測定し、傾きや動きを検出します。

**ジャイロスコープ（Gyroscope）:**
デバイスの回転や方向転換を測定します。これは、デバイスの向きを正確に追跡するのに重要です。

**GPS（Global Positioning System）:**
屋外での使用において、デバイスの地理的な位置を特定します。ARアプリケーションで特に重要です。

**近接センサー（Proximity Sensors）:**
デバイスの周囲の物体や表面との距離を測定します。

**環境光センサー（Ambient Light Sensors）:**
周囲の光の強さを測定し、画面の明るさを自動的に調整するのに使われます。
2023年のまとめ

NTTデータ先端技術株式会社の原田です。

アドベントカレンダーの締めも兼ねて 2023 年の個人的なまとめをしたいと思います。

## 2023年 Top 3 トピックス
1. Qiita アドベントカレンダー参加
2. Microsoft 認定試験 AZ シリーズ全制覇
3. 海外イベント全滅 (Inspire がオンラインのみであることに結構な間気付かず…)

以降個別トピックスをつらつらと。

## 生成AI (Generative AI)
IT 業界の 2023 年は生成 AI に始まり生成 AI に終わった年でした。
ChatGPT がドンと即戦力サービスとしてリリースされたインパクトは絶大でした、テクノロジーとしての生成 AI は ChatGPT を追っかけて 1 年が終わってしまいましたね。
いろんなミーティング出ると「それ生成 AI でいけるんじゃね？」ってシーン本当にいっぱいあります、でもその場で生成 AI って言っても担当者はピンとこずビジネスの現場においてはそれもリアルな反応です。
やっぱわかる人連れてきて良しなにって流れになるんですかね、生成 AI ってパラダイムシフトになり得るテクノロジーなので自学習しないのはもったいない気がします。

## 3大パブリッククラウド
引用元 : Synergy Research Group 

https://www.srgresearch.com/articles/quarterly-cloud-market-once-again-grows-by-10-billion-from-2022-meanwhile-little-change-at-the-top

シェアを見ると AWS が横ばいで Azure・GCP が伸びている形となってます、日本においては AWS のシェアがもう少し高いかと思いますが伸び率についてはほぼ同様かと。
各社の色としては、

* AWS
生成 AI にあまり傾倒することなく成熟した安定性と性能をベースに堅調、何だかんだでエンジニア数がシェアに直結してたりするのでそこ重視路線か。
若干飛躍する感もあるけど Project kuiper が次の1手？<br><br>

* Azure
生成 AI 1本勝負、Azure OpenAI Service とか Copilot とか名前を変えてもつまりは GPT 最大活用モード。
Windows・Microsoft 365 (Office)・Edge とクライアント製品持ってる強みを最大限に生かせそう、何なら Google Workspace からシェア取り戻すのがビジネス面での本命かとも思う。<br><br>

* GCP
ちょっと迷ってるのかな、GCP の色をどう付けるかの分岐点に来ている感じ。
生成 AI 追っかけたいけど、あんまりそこだけに注力してると BigQuery が食われちゃう気もする。

と言う感じで捉えました。

## 市民開発
生成 AI に押された影響もあるのでしょう、キーワードとしてはかなり薄まってしまった印象でした。
おそらく国内マーケットにおいては真に自力でやれる企業はもうやっているが、次に来る伴走者が必要な企業への普及のところで足踏み状態って感じじゃないかと思います。
要因としては、

* 確かにプログラミング言語のスキルはなくても大丈夫だが、一部のソフトウェア開発スキルは必要になるのでそのあたりが壁になる
* 何ならちょっと難しいことしようとするとプログラミング言語が必要になる
* ライセンス費用もかかるし既にある Excel や Access を置き換えてまで取り組むメリットが見えない

と言ったところでしょうか。
結局ノーコード/ローコード開発を外部委託すると言う、市民開発ではないところに落ちて行ってしまう気がします。

## 2024年にまずやりたいこと (とやんなきゃいけないこと)
1. Python の勉強
今更ではありますが、今最も汎用的に使える言語なのでインフラ技術者としても押さえておくべきかなと。<br><br>

2. Microsoft 認定試験 PL シリーズ全制覇
Power BI が一番の山、でも試験中に Web サーチが使えるようになったので行けそうな感触はあります。<br><br>

3. 出稼ぎ
まあいろいろ会社とか組織とかの事情がありまして、現場も嫌いではないので何でもやります。

## まとめ
生成 AI の1年、以上。
ボタンの文言についての学び

## はじめに
現在社内の基幹システムを開発している中で、「このボタンってこの文言でいいのかな」という疑問が湧くことがありました。

というのも、ボタンの文言に統一感がなかったり、一文が長すぎたり、確かに認識の齟齬は起きないけどもUI的にこれでいいのか？と感じることがあります。

デザイナーでもなければ、UI / UXについての知見も深くないため、ちょっとした疑問を解決したいと思い記事にまとめました。

## ボタンの文言はなるべく体言止めがいいと思っていた
開発を始めた当初は、なるべくシンプルで使いやすいものをという思いから、「ボタンの文言はなるべく簡略に」と思っていました。

実際文字数が多いと認知不可は高まります。
一方で目的に応じて使い分けないとユーザーに混乱を招きます。

例えば、現状開発しているシステムでは「送信する」「確定する」「追加する」など、明らかに体言止めできる文言が数多くありました。
しかし、そのボタンを押したことによる次のアクションによって使い分けることが重要だと学びました。

### 体言止め(名詞)の場合
- 選択したオブジェクトからタスクを選択する場合に有用
- オブジェクト指向UI（OOUI）に多い

例　**ユーザー**（オブジェクト）がマイページに**ログイン**（タスク）するとき
　　**メール**（オブジェクト）を**送信**（タスク）するとき

### 体言止めではない（動詞）の場合
- タスクからオブジェクトを選択する場合に有用
- タスク指向UIに多い

例　**追加する**（タスク）を押して**契約期間**（オブジェクト）を決めるとき
　　**稼働を開始する**（タスク）を押して**稼働先**（オブジェクト）を選択するとき

簡単に言うと、 **「押下するボタンの文言自体がタスクか、押下した先にタスクがあるのか」** によって使い分けが必要ということです。

もちろん例外もあり、重要なタスクは動詞を省略せずにそのまま記述することもあります。
身近な例だとAppleのゴミ箱を空にするときのアクションですね。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576532/b58b7bb2-93f9-93b6-8d78-bd049ab17f25.png">

以上のことを開発で意識的に実践していくと、「違和感なく使えるな」と感じることも増えました。

自分が携わっているシステムにも考慮されていない箇所はあるので、気づいたところから修正していこうと思います。

## 「戻る」か「閉じる」か「キャンセル」か
ページ遷移とかモーダルとかでよく「戻る」とか「閉じる」とか使います。

「戻る」と「閉じる」の違いはわかるけど、「閉じる」と「キャンセル」って意識的に使い分けてるかな、と自分でもちょっと不安になりました。

開発していく中でも結構混同していたので、自戒も込めて言語化していこうと思います。

### 戻る
用途：元々いた画面が完全に見えなくなる（またはほぼ見えない）ときに多く使用
画面：ページ遷移、フルスクリーンモーダル等

### 閉じる
用途：画面を覆っているものに対して、ユーザーに非表示にさせたいときに使用
画面：モーダル（最近はよく使われるハーフモーダルとか）等

### キャンセル
用途：「いいえ、そのアクションを行いません」という意味を持つ（Yes/NoでいうNo）
　　　　基本的にはタスクとなりうるものがボタンとして1つ以上がある場合のみ使う
　　　　例）送信 - キャンセル、 削除 - キャンセル、保存 - 更新 - キャンセル
画面：モーダル等

自分的な「閉じる」と「キャンセル」の違いは、対比となるアクションがあるかどうかだと思います。

「閉じる」は単に表示されているものを非表示にするとき、「キャンセル」は対となるアクションがありNoを選択させたいとき使うのがいいと感じました。

もちろんこれは、前後のアクションによって使い分ける必要があるため、一概にこれが正しいとは言えませんので、一つの考えとして見ていただけますと幸いです。

## おわりに
ボタン文言の修正って、小さいタスクに見えて意外と奥が深いんだなと感じました。

単に、見た目がいいからとかシンプルなものがいいからとか、そんな薄い理由で文言を決めちゃいけないですね。
文言にはきちんと根拠をもって提案していこうと思います。

拙い文章にも関わらず、最後までお読みいただきありがとうございました。
## 参考資料
https://note.com/sksk/n/n9715e4c26c0d

https://www.nngroup.com/articles/cancel-vs-close/

https://uxplanet.org/primary-secondary-action-buttons-c16df9b36150
【L1、L2】ブラウザでWeb Workerを動かしてみる（番外編）

## はじめに

2023年12月17日分のアドベントカレンダーの記事になります。

以下記事の続きになります。
【L1、L2】ブラウザでWorkerを動かしてみる（基本編）
https://qiita.com/k-kawashima/items/0bc4b862c0a91c2fdf99

前回は、短いコードでWorkerを動作させてみました。
今回はこのワーカーを更に便利に動作させる為のモジュールであるworkerpoolを利用してみます。

workerpool
https://www.npmjs.com/package/workerpool

workerpoolってどんなモジュール？（ChatGPTに聞いてみた）
>Node.js のワーカープールを簡単に作成できるパッケージです。ワーカー内で実行する関数を指定し、非同期にタスクを実行できます。

上記のような回答が得られました。このモジュールを利用してよいところは以下になります。
特に、３，４，５は便利で、自分で処理をラップして同じようなことをしなくてもよいので楽ちん！
* １：ワーカーにて実行させたい処理群をこのモジュール内に集中して管理できる。
* ２：ページ内のどこでもこのモジュールを通してアクセスできるのでわざわざワーカーのインスタンスを管理する必要がない。
* ３：ワーカーに実行させたい処理を別スクリプトに移す必要がない。
* ４：Promiseとして処理を実行できるのでコードが簡潔になる。
* ５：ワーカーの実行数、タイムアウト、キャンセル、停止等を実行可能。

## この記事で分かること

* 専用ワーカーを使いやすくするwokerpoolモジュールの利用方法。（こちら番外編として別記事にして記載します）

## 準備

確認環境は前回の「【L1、L2】ブラウザでWorkerを動かしてみる（基本編）」をそのまま利用します。

追加のモジュールをインストールしまましょう。
```bash
pnpm install workerpool
```
インストールすると以下のようになっていると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1784431/90f73f6b-31b4-5701-c010-22302b5f570f.png)

## 確認コードの作成

workpoolを静的ファイルから参照できるようにしましょう。
src/server.tsを以下内容で追加します。
```javascript
import fastify from "fastify";
import fastifyStatic from "@fastify/static";
import path from "path";

const server = fastify();

server.register(fastifyStatic, {
  root: path.join(process.cwd(), "public"),
});

// 以下を追加。静的ファイルからworkerpoolを読込めるようにする
server.register(fastifyStatic, {
  root: path.join(process.cwd(), "node_modules/workerpool/dist"),
  prefix: "/workerpool/dist",
  decorateReply: false,
});

server.get("/ping", async (request, reply) => {
  return "Hellow world\n";
});

server.listen({ port: 18080 }, (err, address) => {
  if (err) {
    console.error(err);
    process.exit(1);
  }
  console.log(`server is listening at ${address}`);
});

```

content/example2.htmlを以下内容で追加します。
```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>ワーカーテスト２</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="data:," />
  </head>
  <body>
    <div>これはテスト２です。</div>
    <button id="btn1">ワーカーにデータを送信します。</button>
    <div>ワーカーから受信したデータは以下です。</div>
    <div id="received_data"></div>
  </body>
  <!-- workerpoolモジュールを読み込んでおく -->
  <script src="/workerpool/dist/workerpool.js"></script>
  <script>
    //import workerpool from "workerpool";
    const pool = workerpool.pool({ maxWorkers: 20 });

    // 何かしら時間のかかる処理
    // 但し、worker内ではDOMを操作できないので、APIのアクセスや、負荷の高い計算がなどの処理を移譲する。
    function sleep_func(duration) {
      return new Promise(function (resolve, reject) {
        setTimeout(resolve, duration);
      });
    }

    (async function () {
      await pool
        // ワーカーに引数を渡して処理を実行する。
        .exec(sleep_func, [2000])
        // ワーカー処理結果が正常終了の場合に実行したい処理を記載する
        .then(function () {
          console.log("finished sleep(2000)");
        })
        // ワーカー処理結果の例外発生した場合に実行したい処理を記載する
        .catch(function (err) {
          console.error(err);
        });
    })();
  </script>
</html>

```
asariを実行した時に発生したロケールのエラーの対処

SageMaker Notebookインスタンス上で、asariを使って日本語の感情分析(ポジティブ・ネガティブ)を実行しようとした時に発生したエラーと対処方法を記録したメモです。

# 発生したエラー

実行コマンド on Jupyter Noteboook
```
! pip install asari

from asari.api import Sonar

sonar = Sonar()
```

発生したエラーメッセージ

```
RuntimeException: [ONNXRuntimeError] : 6 : RUNTIME_EXCEPTION : Exception during initialization: /onnxruntime_src/onnxruntime/core/providers/cpu/nn/string_normalizer.cc:100 onnxruntime::string_normalizer::Locale::Locale(const string&)::<lambda()> Failed to construct locale with name:en_US.UTF-8:locale::facet::_S_create_c_locale name not valid:Please, install necessary language-pack-XX and configure locales

```

原因は、ロケールの初期化において、en_US.UTF-8 という名前のロケールの構築に失敗していることのようだ。

# 対処例
en_US.UTF-8をインストールして設定することで対処する。

(1) ロケールの一覧を確認 (en_US.UTF-8は無い）
```
!locale -a
```

(2) language-pack-enをインストールする
```
!sudo apt-get update
!sudo apt-get install -y language-pack-en
```

(3) 再度ロケールの一覧を確認 (en_US.UTF-8が存在する）
```
!locale -a
```

(4) ロケール設定を更新
```
# !sudo update-locale LANG=en_US.UTF-8 
```

(5) Notebookのカーネルを再起動

# 対処後
これでエラーなくasariが実行できるようになった。
```
from asari.api import Sonar
sonar = Sonar()
sonar.ping('今日はとても良い天気です')

#　実行結果
# {'text': '今日はとても良い天気です',
# 'top_class': 'positive',
# 'classes': [{'class_name': 'negative', 'confidence': 0.006367480847984552},
#  {'class_name': 'positive', 'confidence': 0.9936324954032898}]}
```

# (参考) 実行環境
```
!pip list | egrep "asari|Janome"
# asari                                 0.2.0
# Janome                                0.4.2
```
スクラムをマーメイドにしてみた

# スクラムイベントをmermaid.js使って表現してみる

mermaid.js、たまに書いているけど全然慣れないのでそれっぽい図を作って供養しておくだけの投稿

## mermaid.js

Markdown上で図表を作成するツール。いわゆるUML関連でPlantUMLと同じ部類だという理解でよい気がします。

https://mermaid.js.org/intro/


GitHubでも63.8K付いているので人気ライブラリですね。

https://github.com/mermaid-js/mermaid

## 結果

なんかわかりにくくなった。
たぶんこういうのにはチャートは向いてないみたい。。。書き方かなあ。。。いい感じにかける人いたら教えてほしい。

![スクリーンショット 2023-12-25 13.58.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112929/2de60139-f844-24a9-33a8-c9d4a89c2cc6.png)

```
graph TD
    subgraph Loop
        S_Start[スプリント] --> S_Planning
        S_Planning[スプリントプランニング] --> S_Daily
        S_Daily[デイリースクラム/日々のPDCA] --> DEV
        DEV[日々の開発]-->S_Refinement
        S_Refinement[リファインメント/タスクの詳細化] --> S_Review
        S_Review[スプリントレビュー/1週間の成果を発表] --> S_Retrospective
        S_Retrospective[レトロスペクティブ/1週間のPDCA] --> S0
        S_Planning ---> |1週間ごとに繰り返す|SubPlanning
        SubPlanning ---> |毎週のPDCA|S_Planning
        S_Daily ---> |毎日繰り返す|SubDailyScrum
        SubDailyScrum ---> |日々のPDCA| S_Daily
        DEV --->|スクラムの手法ではない\n問題あればすぐに聞ける文化があるといいよね| SubQuickCall
        S_Refinement ---> |スクラムで定義されているが必須のイベントではない|SubRefinement
        SubRefinement ---> |ここで詳細化をやっておくとプランニングの時間が減る\n終われば日々の開発に戻る|S_Refinement
        S_Review ---> SubSprintReview
        SubSprintReview ---> S_Review
        S_Retrospective ---> S_Planning
        S_Retrospective --> SubRetrospective
        SubRetrospective --> S_Retrospective
    end

    subgraph SubPlanning [スプリントプランニング]
        PLAN0[プロダクトオーナーと開発者でスプリントゴールと開発スコープを合意する]
        SubPlanning ---> PLAN0
    end

    subgraph SubDailyScrum [デイリースクラム]
        SubDailyScrum ---> DD
        DD[毎日同じ時間に同じ場所で実施\n自身の進捗を報告できるように準備\n最大で15分] ---> D0
        D0[メンバーごとに発表] ---> D1
        D1[昨日やったこと] ---> D2
        D2[解決したこと] ---> D3
        D3[今日予定していること] ---> D4
        D4[現在困っていること] --->|困っていることが長引きそうならデイリー後に時間をとる| D0
    end

    subgraph SubRefinement [リファインメント]
        SubRefinement ---> R1
        R1[PBI/プロダクトバックログアイテムを小さく分割しより詳細化する\n詳細化により工数見積りのしやすさ正確さが向上させる]
        R2[見積もった結果優先順位の変更が発生する可能性もある\n基本は来週以降のスプリントでやるのが理想]
        R1 ---> R2
    end

    subgraph SubSprintReview [スプリントレビュー]
        RV0[スプリントの成果をステークホルダーに披露し、フィードバックを得る\nプロダクト価値を最適化し、プロダクトの今後の戦略を練ることが目的]
    end

    subgraph SubQuickCall [クイックコール]
        Q1[有識者へ「いま大丈夫ですか？」と聞きすぐに問題を解決する手法]
    end

    subgraph SubRetrospective [レトロスペクティブ]
        RET0[「上手くいったこと・良かったこと」「上手くいかなかったこと・反省点・問題点」の洗い出し]
        RET1[アクションプランを出し、次回以降のスプリントで対応する]
    end

```

## 参考文献

https://www.i-learning.jp/topics/column/it/scrum.html

https://qiita.com/atomu2701/items/17b1d0f38f96300bd9a9

https://do-scrum.com/
AI利用者が「Over the AI ――AIの向こう側に」を読んで

こんにちは、新卒入社１年目の人です。せっかくなので、通勤時間中に読んでいた、連載記事の内容をまとめ、今後に活かすことがあれば良いなと思い。簡単にまとめてみようと思いました。

間違いも多々あるかと思いますが、寛大な心で読んでいただければと思います。

また、これらの文章は私個人の見解であり特定個人・団体を批判する意図はありません。

# 「**Over the AI ――AIの向こう側に」とは**

2016~2018年に江端智一さんによって執筆されたコラムで、AIについて、当時のAIの技術についてわかりやすく、かつユーモアにまとめています。(シ◯タインズ・ゲートとかそういったパロディイラストも多く非常に楽しく学べます)

リンク：https://eetimes.itmedia.co.jp/ee/series/3761/

技術の解説については、こちらを読んでいただくこととして今回はこちらの記事の執筆当時と現在を取り巻く大雑把なギャップを書いていきたいと思います。

# 執筆当時と現在の違い

2010年から2018年にかけては、AI技術が大きく進化し、AlphaGoの囲碁界での成功や、画像処理の技術が教師あり・なし学習により、例えばラズパイを使っての「きのこの山」と「たけのこの里」の識別ができるようになったり他にも色々とありますが、目覚ましい進歩を見せました。

江端氏の当時の視点では、これらのAI技術はあくまでツールとしての発展を遂げているに過ぎず、開発が完了し私達利用者の手の届く頃には「AI」と呼ばれなくなっているだろうと主張していました。

しかしその後、AIの領域はさらなる飛躍を遂げました。生成AI（Generative AI）の台頭は、単なる認識や分類だけでなく、新たなデータやコンテンツの創造においても驚くべき影響を与えました。たとえば、Generative Adversarial Networks（GANs）の進歩により、画像や動画、音声、さらにはテキストの生成において驚くべき進歩がありました。

これらの進歩は、「ChatGPT」「NovelAI」などの単一機能のツールと言うよりかは、複合的な機能を持ちより創造的なAIつまり、筆者の言うところの人類が望む万能エージェント型AI「ナンシー」に近づいたと言えそうです。

# 人工知能=AIという技術は存在しない

一口に人工知能やAIと言ってもそこには、様々な技術（例えば、画像認識や音声認識、確率論などなど…）を総称しているに過ぎないということです。さらにマッドなことを言うと、培養液から謎の生命体を人工的に生み出しこれに知能が宿っていても人工知能と言えてしまうでしょう（定義によります）。

では、人工知能という単語が現代で飛びっているのでしょうか。これは、報道による認識の違いが主ではないかと考えます。例えば、AlphaGoは、ニューラルネットワークを用いた盤面に対する評価値で最善手を打つ技術と強化学習を用いたて盤面からこの局面がどれだけ有利かということを対局を重ねて学習を続けてる技術などの機械学習の技術を総称した囲碁用ソフトウェアを指しますが、これらを省略して「人工知能・AI」として呼ばれているということができます。

これらの技術を利用・見聞きする際に、技術に対する理解度に応じて

- 理解が高いほど、そういった計算を行っているソフトウェアと認識
- 理解が低いほど、人工知能・AIがなにかしらを行っていると認識

するといった、違いが発生すると予想できます。(実際にそれらの計算過程を理解して使った際の認識が違った経験や、実際に「エクセルでAI？が自動でやってくれるのを作って」と言われた経験などから)

# あらゆる技術における「モテ期」「非モテ期」に対応するためには

このコラムを通じて、江端氏が提唱していることは、人工知能・AIという技術は無いという話もそうですが、こういった誤解が人々に生まれていることにも理由があるとしています。それは、「加熱しすぎた期待」ということです。

人工知能が人間に取って代わるとか、単純作業のほとんどすべてをAIが代行するといったことが、誰かしらによって湾曲して伝えられ、これを期待しているということが原因ではないでしょうか。(これらの技術のブームは何度も起こっているのです)

人工知能・AI周辺技術はいま、いわゆるモテ期、ブームの真っ只中にあるといえます。このブームのお陰でこれらの技術が発展していますが、このブームに取って代わる「ブレイクスルー技術(仮称)」がブームになり人工知能・AI周辺技術はまた、廃れてしまうかもしれません。

そういった時期に、人工知能・AI周辺技術は冷たい目で見られることもあるかもしれませんが、どうやって乗り切るのか、例えば、伝え方を変えて機能を搭載したり、こっそり研究を進めてみたりするなど対応はあります。そして、この「非モテ期」はあらゆる分野に言えることでもあり、明日は我が身なのかもしれません。

> 私としては、そのブームが去り、波が消え、完全な凪（なぎ）になった時の、あの荒涼たる寂寥（せきりょう）感だけは、どうしても（特に若いエンジニアに）伝えておきたいのです。
> 
> 
> (中略)
> 
> そういうことを、「理不尽」と思ったら「負け」です。
> 
> https://eetimes.itmedia.co.jp/ee/articles/1607/27/news019_8.html
> 中堅研究員はAIの向こう側に“知能”の夢を見るか8ページより引用

# まとめ(という名の感想)

コラム22回分にもなる、人工知能・AI周辺技術ですが、これらの技術を学べるだけでなく、エンジニアとして必要な心構えというのも学ぶ事ができたのではないかと思います。

これらの、そして、これから新しく登場・再登場してくる技術に対してどういった向き合い方をするかがエンジニアとして生き残るすべなのかもしれません。

## 参考文献
Over the AI ――AIの向こう側に
https://eetimes.itmedia.co.jp/ee/series/3761/
AlphaGo とその後
https://gdep-sol.co.jp/gpu-technology/no5/
メモステ

[インターネット老人会の魔法書 Advent Calendar 2023](https://qiita.com/advent-calendar/2023/ancient-internet) の20日目の記事です。

# ソニー製フラッシュメモリ メモリースティック

「メモリースティック」は、1997年にソニーが開発したフラッシュメモリを用いた小型メモリーカード。通称メモステ。
ソニー製のデジタルカメラやデジタルオーディオプレーヤー、携帯電話、携帯ゲーム機などの記録媒体として利用されていた。

ただすぐにSDカードに後塵を拝するようになった。

他のフラッシュメモリメディアに対して保存容量に対する価格が圧倒的に高く、ただの記録媒体として選択されることはなかった。
その当時のソニー製品はメモリースティックにしか対応していなかったため、ソニー製品を買ってしまった人はメモリースティックも買わざるを得なかった。むしろそういう人しか買っていなかったのではないだろうか。

時期にSDカードが主流になるとソニー製品ですらSDカード対応になり、ますますメモリースティックを買う必要は無くなった。
現在は古いソニー製品を愛用しているユーザに対してのみ製造を続けているのではないかと推測される。
RGBD画像でのセグメンテーションを調査中

近年、RGBD画像が取得できるセンサが増えてきているので、セグメンテーションもRGBD画像で行なった方が、格段に精度を改善しやすいと予想する。

そこで、RGBD画像を用いたセグメンテーションについて調査中である。

## Paper with code での状況
[RGBD Semantic Segmentation](https://paperswithcode.com/task/rgbd-semantic-segmentation)

-----
> The papers related to metrics used mainly in RGBD semantic segmentation are as follows.
[PixAcc] Pixel accuracy
[mAcc] Mean accuracy
[mIoU] Mean intersection over union
[f.w.IOU] Frequency weighted IOU

引用元: 末尾に示したリンク先
上記の４つの値が、学習結果の精度を評価する指標である。

## 気にするポイント
- 入力：RGBD画像の大きさ
- 処理時間：
- 入力画像フォーマット：
    - 色画像の部分が、センサによってはYUVなどの場合がある。
    - RGBよりはYUVの方がセグメンテーションが楽な場合がある。
    - ただ、学習がどのように訓練されているかに依存する。


## Github https://github.com/TUI-NICR/ESANet


> Our carefully designed network architecture enables real-time semantic segmentation on a NVIDIA Jetson AGX Xavier and, thus, is well suited as a common initial processing step in a complex system for real-time scene analysis on mobile robots:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83761/b339c9d2-16fd-8b2d-cc7a-4b128b1987f8.png)
[引用元](https://github.com/TUI-NICR/ESANet)

![Screenshot from 2023-12-23 23-27-31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83761/8adc11d8-b43d-cbd3-99b0-91acc0036b5f.png)

どのようなデータセットで学習されているのかが記載されている。

> We timed the inference on a NVIDIA Jetson AGX Xavier with Jetpack 4.4 (TensorRT 7.1.3, PyTorch 1.4.0).

Jetson AGX Xavier での計測がされている。

[引用元](https://github.com/TUI-NICR/ESANet)


Youtube [Efficient RGB-D Semantic Segmentation for Indoor Scene Analysis](https://www.youtube.com/watch?v=-Sopja6UEJg)

-------------------------------
pdf [Efficient RGB-D Semantic Segmentation for Indoor Scene Analysis](https://www.researchgate.net/publication/355429058_Efficient_RGB-D_Semantic_Segmentation_for_Indoor_Scene_Analysis)


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


## [SUN RGB-D: A RGB-D Scene Understanding Benchmark Suite](https://rgbd.cs.princeton.edu/)

>Intel RealSense 3D Camera for
tablets, Asus Xtion LIVE PRO for laptops, and Microsoft
Kinect versions 1 and 2 for desktop.

上記の4種類のDEPTHセンサを用いている。

![Screenshot from 2023-12-24 00-11-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83761/8969e2c5-3aad-aa9d-47b5-f18bb2736735.png)
引用元　論文


## [NYU Depth Dataset V2](https://cs.nyu.edu/~silberman/datasets/nyu_depth_v2.html)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83761/231a0ec4-08bf-d72a-3daf-bd17e547be63.png)


## 参照記事 [RGBD semantic segmentation](https://github.com/Yangzhangcst/RGBD-semantic-segmentation)

> A paper list of RGBD semantic segmentation.

----
## DFormer

github [DFormer: Rethinking RGBD Representation Learning for Semantic Segmentation ICLR 2024](https://github.com/VCIP-RGBD/DFormer)
[pdf](https://arxiv.org/pdf/2309.09668v2.pdf)

![Screenshot from 2024-04-07 23-13-54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83761/7a0e2851-c47d-fff3-6bbe-6f83a99aa4b9.png)
Compose multiplatformで作ったデスクトップアプリを実行可能な形にする

# やりたいこと
ComposeMultiplatformを使ってアプリを作成し、そのアプリを実行可能な形でビルドしたい。

# 手順
今までgradleコマンドでrunにしていたところをpackageに変えるだけ。
例えばComposeApp:run→ComposeApp:package

ただし自分はボタンからやりたかったので
AndroidStudioのBuildConfigurationsからプラスボタンを押してGradleを選択。
以下のような設定を書き込んでApply。
![](https://storage.googleapis.com/zenn-user-upload/41e335c0cef0-20231225.png)

# エラーが起きた
>Failed to check JDK distribution: 'jpackage' is missing

というエラーが出た。
しかし
>jpackage --version

したところちゃんと入っている。

# 解決策
Android StudioのSettingからBuild. Execution, Deploymentタブを選択
BuildToolsのプルダウンを開いてGradleの設定項目を表示。
Gradle Projects内、Gradle JDKの部分で元々はGRADLE_LOCAL_JAVA_HOMEが選択されていたが、17 Oracle OpenJDK version17.0.9を選択しなおす。

# どこにある？
MacならcomposeApp/build/compose/binaries/main/dmgにあった。
Windowsならbuild/compose/binaries/main/msiにあるらしい。

# 追記
composeApp:packageじゃなくてcomposeApp:packageDistributionForCurrentOSの方が良いらしい。
どこが良いのかは知らない。
教えて偉い人。
【Tanstack Query】queryClient.invalidateQueriesがrefetchしてくれない問題

## 問題
Tanstack Queryの[queryClient.invalidateQueries](https://tanstack.com/query/v4/docs/react/reference/QueryClient#queryclientinvalidatequeries)を実行しても、クエリのrefetchが行われない問題に遭遇しました。

## TL;DR
`refetchOnMount`(queryClientのoption)の値をtrueにする。

## 問題の詳細

簡易的ですが、以下のようなシーケンスでクエリキャッシュの管理をしました。
※便宜上、PUT /hogeのレスポンスボディは空とします。
今回の問題は「`7 GET /hogeをrefetch`」が実行されなかったことです。

```mermaid
sequenceDiagram
autonumber
    フロントエンド->>バックエンド: GET /hoge
    バックエンド->>フロントエンド: レスポンス
    フロントエンド->>フロントエンド: クエリキャッシュを作成(by Tanstack Query)
    フロントエンド->>バックエンド: PUT /hoge
    バックエンド->>フロントエンド: レスポンス
    フロントエンド-->>フロントエンド: クエリをinvalidate
    フロントエンド-->>バックエンド: GET /hogeをrefetch
    バックエンド-->>フロントエンド: レスポンス
```

`4. PUT /hoge`は以下のようなコードとなっています。
hogeの更新後に、`["HOGE"]`というキーのクエリをinvalidateしています。

```typescript
const useHogeUpdate = () => {
    const { mutate: updateHoge } = useMutation(
        (newHoge) => hogeApi.update(newHoge),
        {
          onSuccess: () => {
            queryClient.invalidateQueries(["HOGE"]);
          }
        },
      );
    return {
        updateHoge,
    };
}
```

[queryClient.invalidateQueriesのドキュメントの記述](https://tanstack.com/query/v4/docs/react/reference/QueryClient#queryclientinvalidatequeries)の通り、queryClient.invalidateQueriesの実行によって、hogeのrefetchが行われることを期待していましたが、実際にはrefetchは実行されませんでした。
> The invalidateQueries method can be used to invalidate and refetch single or multiple queries in the cache based on their query keys or any other functionally accessible property/state of the query. 

## 解決

[Tanstack QueryのメンテナーのDominikさんのXのポスト](https://x.com/TkDodo/status/1717230418234052687?s=20)に、
> invalidateQueries will mark it as stale and refetch it when next used, unless you fiddle with refetchOnMount.

とあったので、queryClientのoptionを確認。
過去のプロジェクトの設定値を踏襲していたりなどの要因で、`refetchOnMount`の値がfalseになっていたようでした。
refetchOnMountの値の変更の影響範囲を確認した後、`refetchOnMount`の値をdefault値であるtrueに変更したところ、queryClient.invalidateQueriesの発火でrefetchが実行されるようになりました。

## あとがき
今回はTanstack Queryについての記事でしたが、今回の問題を通じて、
- ライブラリの設定値の意味を正確に理解する
- 非デフォルト値を採用する場合は、丁寧に吟味する

という基本に立ち返る機会となりました。
【GoとPython】異なる言語、共通する哲学

:::note info
この記事はAndrew Gerrand氏のGo and the Zen of Python[^1]を訳したものです。
:::
[^1]:https://go.dev/talks/2012/zen.slide#1

## "Beautiful is better than ugly."

Goは、C言語を彷彿とさせる軽量で規則的な構文を持っている
しかし、美しいか醜いかは、個人に依存する

## "Simple is better than complex."

メソッドはただの関数であり、特別な場所は無い
thisやselfなどのキーワードはなく、レシーバは他の関数引数と同じようなものである

```go
type Vector struct {
    X, Y float64
}

func (v Vector) Abs() float64 {
    return math.Sqrt(v.X*v.X + v.Y*v.Y)
}
```

## "Simple is better than complex."

メソッドはクラスがなくても任意の名前付き型で宣言できる

```go
type Scalar float64

func (s Scalar) Abs() float64 {
    if s < 0 {
        return float64(-s)
    }
    return float64(s)
}
```

## "Simple is better than complex."

インターフェースは単なるメソッドであり、データは含まれない
インターフェースは暗黙的で、実装宣言は不要

```go
type Abser interface {
    Abs() float64
}
```

## "Simple is better than complex."

```go
type Database struct {
    client *rpc.Client
}

func NewDatabase(addr string) (*Database, error) {
    client, err := rpc.Dial("tcp", addr)
    if err != nil {
        return nil, err
    }
    return &Database{client}, nil
}
```

コンストラクタやデストラクタは存在しない
コンストラクタはただの関数である

## "Simple is better than complex."

識別子のケースが可視性を設定する
大文字で始まる名前はパッケージの外部からも見える

```go
package foo

type Foo struct { // exported type
    bar int // unexported field
}

func (f Foo) Bar() {} // exported method

func (f Foo) quux() {} // unexported method
```

## "Simple is better than complex."

- メモリ管理をガベージコレクションだけで行う
- 通常のスコープ付け規則と名前のシャドウイング規則に従う
- サブタイプの継承（サブクラス）が無い
- デコレータが無い
- 関数において引数に名前を付けたり、オプショナルな引数を指定する機能は無い
- イテレータの概念が無い
- ジェネレータの概念が無い
- 例外の概念が無い

## "Explicit is better than implicit."

- エラー処理が明示的であり、例外が存在しない
- 依存関係が明示的である
- 数値の型変換が暗黙的に行われることは無い
- 構造体（structs）はメモリのレイアウトを明示的に定義する

## "Flat is better than nested."

早期に脱出することは慣用的なコーディングスタイルである

```go
func badStyle(a int) error {
    b, err := one(a)
    if err == nil {
        c, err := two(b)
        if err == nil {
            err = three(c)
        }
    }
    return err
}

func goodStyle(a int) error {
    b, err := one(a)
    if err != nil {
        return err
    }
    c, err := two(b)
    if err != nil {
        return err
    }
    return three(c)
}
```

## "Flat is better than nested."

- クラスが存在しないため、メソッドはクラスにネストされない
- パッケージの名前空間がフラット
- 同じパッケージに属する複数のファイルは、同じ名前空間を共有する

## "Sparse is better than dense."

Go言語の構文は、複雑な一行のコードを奨励していない
- リスト内包表記が無い
- 三項演算子が無い
Go言語のコードを読む際、制御フローが明示的であることが期待されている

## "Practicality beats purity."

Go言語は、一般的なデータ構造を組み込んでいる
- maps (dicts)
- slices (lists)
- channels (Pythonのqueuesのような並行性プリミティブ)

## "Readability counts."

Go言語は、大規模なプログラム開発チーム向けに設計された
可読性は極めて重要である

- `gofmt`ツールは、Go言語で採用された"one true style"（一貫したスタイル）を強制する
- 型推論はタイピングの手間を省く一方で、可読性を損なわないように設計されている
- 型は可読性を向上させる場面で依然として必要である　例えば、関数の宣言などで型を指定することで、コードの理解が容易になる

## "Now is better than never."

Goを今日学ぼう、それは簡単だ
- 一日で生産的に
- 一週間で効率的に
- 一年でエキスパートに

参考文献、記事、チュートリアルなど：
https://go.dev/

ウェブベースのインタラクティブなGoツアー：
https://go.dev/tour
さや香「見せ算」

初投稿です。
無駄でふざけた遊びの個人的な記録としてQiitaを始めてみました。

## 人生初M-1を観た結果
昨日人生で初めてM-1を観ました。とても面白かったです。

いちばんの推しは令和ロマンの松井ケムリさんですが、さや香の「見せ算」がAtCoderのＡ問題っぽいことに気付き、Pythonで書きたくなったので書きました。


https://x.com/smoke_matsui/status/1738922050012778660?s=20

令和ロマン、おめでとうございます！！！！


## 実装
```python
def sayaka_misezan(n, m):
    #公式
    if n == m:
        return 0
    elif (n, m) in ((6, 9), (9, 6)):
        return 11
    elif (n, m) in ((2, 5), (5, 2)):
        return 1.1
    elif "ずっと" in str(n) and "ゼリー" in str(m):
        return "2"
    #非公式
    elif "4" in str(n) or "4" in str(m):
        return "からあげ4"
    elif str(n) == str(m)[::-1]:
        return float(f"{n}.{m}")
    #公式
    elif (n, m) in ((1, 100), (100, 1)):
        return "83(84)"
    else:
        return max(n, m)

m1_final = [(6, 9), (2, 5), (1, 100), (3, 3), (4, 5), (36,63)]

for n, m in m1_final: 
    print(f"n={n}, m={m} の場合: 眼{sayaka_misezan(n, m)}")
```
出力
```python
n=6, m=9 の場合: 眼11
n=2, m=5 の場合: 眼1.1
n=1, m=100 の場合: 眼83(84)
n=3, m=3 の場合: 眼0
n=4, m=5 の場合: 眼からあげ4
```

https://x.com/sayaka_niiyan/status/1739125794474213789?s=20

nとmはintではなくても良かったらしい。


昨日さや香の存在を知ったばかりなのでまだ「からあげ4」を理解していないのですが、「世界のナベアツ」のノリで入れてみました。

```python
for i in range(1, 101):
    if i % 3 == 0 or "3" in str(i):
        print("⸜( ˙꒳ ˙ )⸝ < " + str(i))
    else:
        print(i)
```
出力
```python
1
2
⸜( ˙꒳ ˙ )⸝ < 3
4
5
⸜( ˙꒳ ˙ )⸝ < 6
7
8
⸜( ˙꒳ ˙ )⸝ < 9
10
```


2桁同士の見せ算はネタには含まれていませんが、「『38見せ83』のような時もビビってスマホを落とすのかしら」と勝手にルールを追加してみました。

条件が全然MECEではありませんし、さや香が各条件の優先度をどう考えているかも不明なので、見せ算の教科書が欲しいところです。






客観的に意味不明なことを、さも当たり前かのようにデカい声と圧で説明し続ける人が大好きなので、さや香の他のネタも観てみようと思います。


## 追記
リアタイで字幕やテロップを付ける方法についても調べてみようと思います。
AI/MLでそれが可能なら、ベースtab譜生成も可能では？

## 追記2
カベポスターも良かった。
```python
def kabepo(n, m, o):
    if str(n) == str(m) == "ラ" and str(o) == "シ":
        return "この中に「ずっゼリ」がいるわね"
    else:
        return
```

出力
```python
"この中に「ずっゼリ」がいるわね"
```
MOドライブ

[インターネット老人会の魔法書 Advent Calendar 2023](https://qiita.com/advent-calendar/2023/ancient-internet) の19日目の記事です。

# 一時しか流行らなかったMOドライブ

「MOドライブ」、正式には「Magneto-Optical disk」は、コンピュータの外部記憶装置の一つで、データの読み書きにレーザー光と磁気を利用したものである。メディアの形状はハードケースの中に円盤が入っていて、MDに似ている。

当時繰り返し書き込み可能なCD-RWも存在していたが、それよりも高速に更新でき、容量もCD-Rを超える最大1.3GBあったので次の記録媒体として期待された。
バイオハザートかメタルギアか忘れたが何かのゲーム内にもアイテムとして登場したことがある。

しかし、実際にはその後登場したDVDやフラッシュメモリを利用した記憶装置に押され衰退した。
MOドライブがこの世から無くなる前にMOディスクに記録していたデータを移管する必要があり、大容量外付けHDDにとりあえず放り込んだ記憶がある。

今でも1枚だけMOドライブを残してある。それは友達が若気の至りで **インターネットラジオを個人で配信した時のmp3音源** だ（ストリーミング配信なんてできないので、HPにmp3のダウンロードリンクを置いていた）。
なかなかの黒歴史だと思うのだが、残念ながらMOドライブがないので、今は聞くことができない。
[C#]線を描画した後、クリックして何かする(WPFで)

# 目的
線を描画した後、マウスオーバーで太くしたり、クリックで太くしたままにしといたり色々したいとき。WPFで。

# 環境
- Microsoft Visual Studio Community 2022
- Version 17.8.3
- VisualStudio.17.Release/17.8.3+34330.188
- Windows11 Pro

# コード
Grid上にCanvasを配置した上で・・・
```C#
private Line selectedLine; // 選択された線を保持する変数
bool mouseOver = false;

private void DrawLine(Point startPoint, Point endPoint, Brush brush, double thickness)
{

    Line line = new Line
    {
        X1 = startPoint.X,
        Y1 = startPoint.Y,
        X2 = endPoint.X,
        Y2 = endPoint.Y,
        Stroke = brush,
        StrokeThickness = thickness
    };

    line.MouseLeftButtonDown += Line_MouseLeftButtonDown;
    line.MouseEnter += Line_MouseEnter; // マウスオーバー時のイベントハンドラを追加
    line.MouseLeave += Line_MouseLeave; // マウスアウト時のイベントハンドラを追加

    myCanvas.Children.Add(line);
}


private void Line_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    if (sender is Line line)
    {
        if (selectedLine == line)
        {
            // 同じ線がクリックされた場合、元に戻す
            line.StrokeThickness = 3.0; // 元の太さに戻す例
            //line.Stroke = Brushes.Black; // 元の色に戻す例
            selectedLine = null;
        }
        else
        {
            // 選択された線以外を元に戻す
            if (selectedLine != null)
            {
                selectedLine.StrokeThickness = selectedLine.StrokeThickness - 3.0; // 元の太さに戻す例
                //selectedLine.Stroke = Brushes.Black; // 元の色に戻す例
            }
            // クリックされた線を選択状態にする
            line.StrokeThickness = 6; // 太さを増やす例
                                      //line.Stroke = Brushes.Red; // 色を変更する例
            selectedLine = line;
            mouseOver = true;
        }
    }
}

private void Line_MouseEnter(object sender, MouseEventArgs e)
{
    if (sender is Line line)
    {
        mouseOver = true;
        if (line != selectedLine)
        {
            line.StrokeThickness = 6; // 太さを増やす例
        }
    }
}

private void Line_MouseLeave(object sender, MouseEventArgs e)
{
    if (sender is Line line)
    {
        mouseOver = false;
        if (line != selectedLine)
        {
            line.StrokeThickness = 3; // 太さを元に戻す例
        }
    }
}

private void myCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Debug.WriteLine("myCanvas_MouseLeftButtonDown");
    if (mouseOver == false)
    {
        //// 他の場所をクリックした場合、選択された線を元に戻す
        if (selectedLine != null)
        {

            Debug.WriteLine(mouseOver);
            selectedLine.StrokeThickness = 3.0; // 元の太さに戻す例
            //selectedLine.Stroke = Brushes.Black; // 元の色に戻す例
            selectedLine = null;
        }

    }
}
```

# 使い方
描画したいところで
```C#
DrawLine(new Point(100, 150), new Point(30, 30), new SolidColorBrush(Colors.Red), 3);
```

# REFERENCEs


# さいごに
お疲れ様でした！
OpenWRTでMSSクランピングはオフにしてはいけない

:::note info
多分理由(ローカル内とか)があって切る分にはいいんですけど
何も考えず切るとえらい目に遭うので基本的には切らないほうがいいと思います
初期値ではオンになってます。
:::

# 何があった
- 一部のホストにHTTP/HTTPSが繋がらなくなった
    - nicovideo.jp
    - togetter.com(s.togetter.com)
    - github.com
    - などなど・・・
- ファイアウォールを切っても変わらない
- Pingは通る
- tracerouteも通る
- Cloudflare WARPやWireGuardでトンネルすると繋がる
- ルーターにSSHして直接curlすると繋がる

# 原因は
LAN -> WANのファイアウォール設定でMSSクランピングを切っていた
その結果、セグメントサイズが一致せず(超過？)パケロスしていたっぽい。

# 反省
意味も分からず適当に触るのは辞めようね！！！(バカ)
Unityでゲーム作る+約25日間のまとめ

この記事は、[【完走したい】楽しくいろいろやる Advent Calendar 2023](https://qiita.com/advent-calendar/2023/notbeginner)の25日目です。
# Unity　キャラに当たり判定を付ける
OnCollisionEnterを使おうとしたのですが、動かなかったのでいろいろ見直していきます。
### 書く
特定のオブジェクトが衝突したらGameOverが表示されるようにしました。
```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Col : MonoBehaviour
{
    public GameObject Player;
    public GameObject Hantei;
    // Start is called before the first frame update
    void Start()
    {
        Hantei.SetActive(false); 
    }

    // Update is called once per frame
    void OnCollisionEnter(Collision collision)
    {
       
        if (collision.gameObject==Player)
        {
            Hantei.SetActive(true);
        }
    }

}
```
Hanteiが、GameOverと書かれたTextです。
Playerと衝突したら、GameOverと表示されます。
ここに問題はありませんでした。
### rigidbody
衝突する方かされる方、あるいはその両方に必要です。
ないと、衝突が検知されません。
ここも問題ありませんでした。
### Collider
Box ColliderだろうがMesh Colliderだろうが関係ありません。
Colliderとついている者同士が衝突して判定ができます。
今回はどちらのオブジェクトにもCapsule Colliderを入れています。
どちらのオブジェクトにも入れないと反応しません。
ここも問題ありませんでした。
### Is Trigger
<b>こいつが原因でした。</b>
これが片方でもチェックが入っているとうまく動きません。
動く方にチェックがついていたので消しました。

# どうなったか
こうなりました
<iframe width="560" height="315" src="https://www.youtube.com/embed/do-tOd95zNw?si=qmzH2jcpZ8P5YFm0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
もう完成でいいと思います。
ちゃんと動いてくれて感動しました。

# 25日間を振り返って
今年は、UnityやAndroidstudio,VSCodeでjava,kotlin,pythonなど様々な言語にチャレンジしました。
いろいろな言語を使ってみて、自分はpythonとC#が一番合っているんじゃないかと思いました。

もしどの言語にするか悩んでいる人は、いろいろな言語にチャレンジしてから決めたほうがいいと思います。実際使ってみて、扱いやすい言語を探すほうが後から面倒くさくならないので。

できれば今年、もっといろんなことにチャレンジしたかった（例えば、Webアプリを作ってみたりなど）のですが、ちょっと時間が足りなかったのでもし来年できるようであれば頑張りたいと思います。
来年もよろしくお願いします。

【完走したい】楽しくいろいろやる Advent Calendar 2023 おわり

参考
https://www.sejuku.net/blog/58775

https://uni-tools.hatenablog.com/entry/2018/12/16/191223
:hover と メディアクエリ pointer, any-pointer, hover

:hoverのふるまいを加えたいのはいわゆるパソコン（マウスデバイス）だけでいいので、そのあたりを判定するメディアクエリの pointer, any-pointer, hover を検証してみた。

検証に使ったのはMac（Chrome 120）、iPhone（Safari 17）, Pixel6a（Android Chrome 120）。本来はiPadやAndroidタブレットにマウスつなげた場合とそうでない場合とか、Surfaceとかでも検証するといいよね。

<p class="codepen" data-height="600" data-default-tab="result" data-slug-hash="RwdNarO" data-user="ksk1015" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ksk1015/pen/RwdNarO">
  media pointer, any-pointer, hover</a> by ksk1015 (<a href="https://codepen.io/ksk1015">@ksk1015</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://developer.mozilla.org/ja/docs/Web/CSS/@media/pointer
https://developer.mozilla.org/ja/docs/Web/CSS/@media/any-pointer
https://developer.mozilla.org/ja/docs/Web/CSS/@media/hover

## まとめ

hoverのふるまいを加えたいのは、ポインタが正確かどうか（fine）ではなく、hover状態が普通にあるデバイスかどうかで判定すべきなので、主にパソコンとスマホを想定したウェブサイトでパソコンのみhoverのふるまいをさせたい場合は、(hover: hover) で判定するのがいいのかな。