OmniAICreator/Qiita-1.07M huggingface dataset:
HonoでCloudflare Pagesにデプロイしてみた

## HonoでPagesのテンプレートを作成
```bash
pnpm create hono my-awesome-app
```
cloudflare-pagesのテンプレートを選択


## API Routing
### docs

https://hono.dev/docs/api/routing


### コード例
```tsx:index.tsx
/** viteのエントリーポイントとして指定されたtsxファイル */
import router from './routes';

const app = new Hono();

/** GET RequestによるResponseを記述 */
app.get('/', (c) => {
  return c.render(<h1>Hello!</h1>)
});

/** Routing設定、次のコード例に続く */
app.route('/', router);
export default app;
```

```ts:routes/index.ts
import productRouter from './product';
const router = new Hono();

// ルート定義
router.route('/product', productRouter);

export default router;
```

```tsx:routes/product.tsx
/** Component Render */
import { AllProduct, ShowProduct } from '../components/Product';

const productRouter = new Hono();

productRouter.get('/', (c) => {
  return c.render(<AllProduct />)
});

/** slug pathname routing */
productRouter.get('/:productId', (c) => {
  const { productId } = c.req.param();
  return c.render(<ShowProduct productId={productId} />)
});

export default productRouter;
```
\* 省略しているコードがあります。
動かしたサンプルは以下

https://github.com/tonakai-it/Cloudflare-pages-first-step-sample

## deploy
まずGitのcommitをします。CloudflareへのデプロイがgitのHEADを見ているからです。
```bash
git init
git add .
git commit -m "Initial commit."
```

```bash
pnpm run deploy
```
CLI上でPagesに新規で作るかのダイアログが出ます。
ブラウザでCloudflareの認証が入り、それが終わるとデプロイ完了です。

## 感想
- 一般的なviteとの相違点：viteはindex.htmlをエントリーポイントとしているが、Honoはindex.tsxで、distにビルドされたファイルも、_worker.jsになっている

- Routingはサーバーサイドで、React + react-router-domのようなSPA内のソフトナビゲーションではなく、リクエストごとにサーバー側でレスポンスを返す形になります

- Reactとの相違点：初期設定では、JSX構文を使用する際にReactのAPIのようなコードが自動補完で示されるが、公式のReactコードではなく、hono/jsxを使用した軽量な実装。このアプローチにより、Reactの仮想DOMや複雑なライブラリを使用することなく、簡潔で高速な処理が可能
cursorだとazureResourceGroupsにログインできない時の対処法

## 前提
cursorエディタで`cmd + shift + P`から`azureResourceGroups`を選択し、ログインしようとすると`Timed out waiting for authentication provider to register `が発生する
![スクリーンショット 2024-11-30 16.05.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576731/1618160d-581f-d163-89bc-2db955797aa5.png)

## 参考
https://github.com/microsoft/vscode-azure-account/issues/897#issuecomment-2424082420/


## 原因
Cursorには、vscodeの組み込み拡張機能であるMicrosoft認証が付属していないため、認証が通らない。
そのため、`Timed out waiting for authentication provider to register`が発生してしまう。

## 対処法
### vscodeの`microsoft-authentication`をコピー
1. Visual Studio Codeを右クリックし、「パッケージの内容を表示」を選択
![スクリーンショット 2024-12-10 5.05.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576731/a6951947-9216-7f41-2bac-dbd37a668b79.png)

2. 右上の検索窓で、`microsoft-authentication`を検索
パス: `/Contents/Resources/app/extensions/microsoft-authentication`
![スクリーンショット 2024-12-10 5.06.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576731/523e2bc9-c358-1a9c-9eb3-04f5cf0b3707.png)

3. `microsoft-authentication`をフォルダごとコピーし、cursorの`/Contents/Resources/app/extensions/`配下にペースト
（cursorのextensionsへの入り方は上記の1, 2の方法と同じ）
![スクリーンショット 2024-12-10 5.17.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576731/fd05d9b0-e02c-6e19-80d6-7c887c63d25b.png)

4. cursorを再起動し、`azureResourceGroups`をログインするとログインできるようになります。
GitHub Enterprise配下のInternalリポジトリを引越ししようとしたらエラーになった件について

## はじめに

みなさん、こんにちは。GitHub Enterprise配下のInternalリポジトリを、別のGitHub Enterpriseへ引越しをしようとしたところエラーになる、という事象に遭遇しました。今回はこちらの事象の原因と解決方法について紹介していきたいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613908/dbd0403a-652d-cf9d-cc44-c356057801a1.png)

## Transfer操作がエラーになった原因

結論を述べると「Internalリポジトリは同じGitHub Enterprise内の別Organizationにしか移譲できない仕様となっているため」でした。

たしかに、Internalリポジトリは組織内のインナーソースを管理するためのリポジトリという位置づけですので、異なるGitHub Enterpriseへ簡単に移行できてしまう、というのは逆に問題であり、後から考えればエラーになるのも妥当ですよね^^;

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613908/f7443acb-0a87-fa44-07c6-516bbf0bf635.png)

## それでもTransfer操作したいときは

次の画像のようにVisibility設定をInternalからPrivateに一時的に変更することによってTransferがエラーにならず、ちゃんと移行することができました。その後、移行先にてVisibility設定を再びInternalに変更することで期待通りの結果が得られましたとさ。めでたし、めでたし。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613908/d8f5555d-169b-df9e-9067-6647c263c16e.png)

なお、言わずもがなですが、もちろんPublicに切り替えてでもTransfer操作は可能です。しかし、Internalリポジトリの中身を一時的にでも一般公開してしまうというのは色々と問題があるため、変更先は必ずPrivateを選択するようにしてくださいね。

## 最後に

ということで、しっかりGitHub Enterpriseのマニュアル読んでおけばわかってたことでしょ、と言われてしまえばそれまでのしょうもない内容でしたが、こんな情報でも誰かの役に立っていただければ幸いです。

以上、GitHub Enterprise配下のInternalリポジトリを引越ししようとしたらエラーになった事象の原因と解決方法のご紹介でした。

---

- GitHub は、GitHub Inc. の商標または登録商標です。
- その他、本記事に記述してある会社名、製品名は、各社の登録商品または商標です。
【Notion × タスク管理】+@の成果を生み出すタスク管理術

この記事は[ディップ株式会社 Advent Calendar 2024](https://qiita.com/advent-calendar/2024/dip-dev)の10日目の記事です。是非とも他の記事も読んでみてください！

## 自己紹介
Notion大好きDBエンジニアのだいちです。
今回はNotionを活用したタスク管理術について纏めていきます。
Notionを使っていない・知らなくてもタスク管理については参考にできるかと思うのでぜひ最後までご覧ください。

## 誰に向けた記事なのか？
今回は次のような経験をしている人向けに纏めていきます。

- 日々仕事に追われていると感じる
- どんなに仕事をしても終わらない
- 振られた仕事が沢山あるように感じている

何を隠そう自分も同じような気持ちになっている時期がありまして
自分に合ったタスク管理を見つけて仕事が楽しくなったので参考になると思います。

## なぜタスク管理をするのか
皆さんはなぜタスク管理をしていますか？
自分は次に挙げるようなことからタスク管理は必須だと考えています。
- 期限を忘れないため
- 振られる仕事は一つだけではない
- 優先度の把握をするため
- 何をどこまでやったのかを忘れないため
- 仕事仲間に進捗を共有しやすくするため

### 期限を忘れないため
どんな仕事をするにも長短はあれ期限が設けられます。
期限に対して正確に終えることで信頼にも繋がるのでしっかりと覚えておきたいものです。

### 振られる仕事は一つだけではない
会社に勤めるエンジニアであれば
Aのプロジェクトのあの実装をいつまでにしないといけない。
Bのプロジェクトのあの実装をいつまでにしないといけない。
交通費の申請をしないといけない。などなど。
やらないといけないことは山のようにあり頭の中だけでは管理できなくなっていきます。

### 優先度の把握をするため
複数の仕事を同時に行うことは不可能なので何かしらを基準に優先度をつけていきます。
頭の中でつけてもいいですが忘れてしまうこともあるので何かしらに書き出して優先度を管理しておきたいです。

### 何をどこまでやったのかを忘れないため
レビュー待ちなどで進められないタスクがあったら別のタスクを進めることも多いと思います。
別のタスクを進めていてレビュー待ちのタスクがレビューを終えて対応を進めたあと別のタスクに戻った時、さて何をどこまでやっていたのかを常に覚えておけますか？
自分は忘れがちで特に休み明けなどの頭の中は息子のことで頭がいっぱいなので仕事のことは何も覚えていないです。

### 仕事仲間に進捗を共有しやすくするため
この世の仕事は一人ではできないことがほとんどだと思います。
仕事仲間が進めていた仕事を引き継いだりまたはその逆もあるかともいます。
そんな時に口頭でだらだら引き継ぎをされても覚えられないですよね。

まだ他にもタスク管理を行う理由はあると思いますが僕自身が必要と思う理由を挙げてみました。
それでは早速タスク管理について纏めていきます。

## タスク管理術
タスク管理そのものよりはタスク管理ができるように目の前の仕事を整理することが一番大事だと考えています。
具体的には**振られた仕事で何をするかを理解して行動ベースに落とし込めているか**がポイントです。
僕のタスク管理は次のように行なっています。
1. 振られた仕事をNotionに書き出す
2. 目的を把握する
3. 目的からやるべきことを書き出す
4. 行動できる内容に落とし込む

### 1. 振られた仕事をNotionに書き出す
ここではNotionに限らずなんでもいいので振られた仕事を頭の中から外に書き出します。
「Aの実装」というタスクがあればとりあえずそのまま書き出します。
自分ならNotionにタスク管理用のページを作っているのでそこに「Aの実装」と書き出します。

### 2. 目的を把握する
続いて書き出したタスクの目的を把握します。
なぜ目的を把握するのかというと作業者で留まらないにするためです。目的を理解すれば自分の知見の中からもっとより良い方法を提案ができるかもしれません。提案ができなくても目的を理解することで業務理解が深まるので決して無駄にはなりません。

### 3. 目的からやるべきことを書き出す
目的がわかったらやるべきことを洗い出します。
頭の中ではなく簡単な箇条書きでいいので必要なことを書き出します。

### 4. 行動できる内容に落とし込む
やるべきことを洗い出したら行動できる内容に直します。
ここではポモドーロ・テクニックをベースに25分で作業が終えることのできる仕事量でやることを行動ベースにまとめ直します。

ポモドーロ・テクニックについてまとめた記事を過去に書いた記憶があるのにQiitaになかった。どこに消えたのか。

## なぜNotionを使うのか
良くも悪くも多機能だからです。
使い始めは多機能ゆえにわからないことが多くて扱いづらいと感じてしまいますが、一つ一つの機能を実際に使ってみることで更なる使い方を見つけることができるのでそこが個人的には楽しく感じています。
ブロック管理なのも良くてブロックベースで入れ替えることができるのも嬉しい。
無料でも扱える機能は多いので是非ともまずは触ってみてください。


## まとめ
タスク管理術と大々的に書きましたが、管理をする術よりも管理をするための思考整理が一番大事だと僕は思うのでまずは目の前のタスクを整理することが初めてみてはいかがでしょうか。
[備忘録]　Youtubeを見ながらUnityの勉強　1日目

# はじめに
　こんにちは，Umamusume22です。最近、業務でUnityを使っているのですがUnityが分からないので自主的に勉強を始めました。とりあえず、Youtubeを見ながらUnityの勉強を行います。学んだことはここの記事にアウトプットしていきます。
 今日は以下の動画を見てUnityの勉強を行いました

https://youtu.be/8h2JqLg_oVI?si=cq8F7AM8DPAx6f3z

https://youtu.be/uVinvDdxKKA?si=ddidH_Wjy3PiPA9i

 # 備忘録
 - ヒエラルキーウィンドウはオブジェクトを生成するときに使う
 - シーンウィンドウは作成したものを映し出す画面
 - インスペクターウィンドウはオブジェクトの詳細が載っている
 - プロジェクトウィンドウはプロジェクトの管理を行う
 - 右クリック>Create>C# scriptでコードを生成
 - Unity>Edit>Preferences>External tools>visual studioを選択したらUnityとvisual studioを連携
 - 矢印をクリックすると矢印の方向にオブジェクトを移動させることが可能
 - 回転ツール(矢印が二つあるアイコン)をクリックしたらオブジェクトを回転することが可能
 - オブジェクトの真ん中の四角をクリックすることで拡大、縮小が可能

# 最後に
　勉強した内容を備忘録にしました。

 

ここまで記事を読んでいただきありがとうございました！

※ウマ娘の声をフーリエ変換した記事や水栓の開閉判定をLineに通知する記事も書いています．suzuが私です．興味がある方はぜひご覧ください！
https://vigne-cla.com/31-1/#toc5

※noteもやっています．
https://note.com/madoka235/n/nbba2153326e1

ぜひフォローよろしくお願いします!
2024/12/10主にITとかセキュリティの記事

Realstマルウェア最新動向：AIが生成する偽ビデオ会議で狙われるWeb3プロフェッショナル(12/7)
https://innovatopia.jp/cyber-security/cyber-security-news/45371/

チェックポイント:サイバー攻撃に脆弱な輸送部門(12/7)
https://voi.id/ja/teknologi/440775

Ultralytics AIライブラリに暗号通貨マイナー混入 – GitHubワークフロー悪用の新手サプライチェーン攻撃が発生(12/7)
https://innovatopia.jp/cyber-security/cyber-security-news/45374/

中国のサイバー攻撃がiPhoneとAndroidのテキストの脆弱性を明らかにしました。(12/7)
https://motorcyclesports.net/ja/chinese-cyberattack-reveals-iphone-android-text-vulnerabilities-ja/

Japan Eyes Monitoring Int'l Communications for Cyber Defense(12/8)
https://sp.m.jiji.com/english/show/37121

iPhoneとAndroid間のメッセージに要注意！ FBIが警鐘を鳴らす理由とは？(12/7)
https://news.livedoor.com/article/detail/27712568/

大阪公立大学医学部附属病院がシステム不具合で個人情報漏洩(12/8)
https://rocket-boys.co.jp/11240/

CISA サイバーレジリエンスを強化する： 米国の重要インフラ部門組織のCISAレッドチームアセスメントからの洞察 (2024.11.21)(12/8)
http://maruyama-mitsuhiko.cocolog-nifty.com/security/2024/12/post-c36a83.html

FSOC　年次報告書で米国金融システムの脆弱性指摘(12/7)
https://www.epochtimes.jp/2024/12/268801.html

学校法人福原学園が不正アクセスの被害を発表(12/8)
https://rocket-boys.co.jp/11234/

NewsPicks トピックス 『デジタル政策と未来社会』のまとめ(2024.12.2～2024.12.8）
https://blogs.itmedia.co.jp/business20/2024/12/newspicks_20241222024128_1.html?ref=rss

「Third-party risk management tabletop experience」のGamified learningに参加しました(12/8)
https://dev.classmethod.jp/articles/third-party-risk-management-tabletop-experience/

今や世界への脅威　東南アジアのネット組織犯罪(12/8)
https://vpoint.jp/opnion/kokusai_radar-column/231493.html

「強制捜査に入りますが」記者に特殊詐欺電話か　IP電話から「出頭」要請(12/8)
https://www.sankei.com/article/20241208-HTX6GTWNDJCM5KWVCIGPDXGPHE/

「ネットショッピングに潜む罠」に注意　勤務先企業を危険にさらすことも(12/8)
https://news.yahoo.co.jp/articles/e8c79ee226efcf073024c4dbc5f350fd6f6b1d80?source=rss

韓国内政の混乱、北朝鮮の出方は　対露支援と「2国家論」が足かせ　サイバー攻撃は増加(12/7)
https://www.sankei.com/article/20241207-OELXORXHNVO3DPRC3UHMRZIYDA/photo/4VJU5MYXP5IHNJW7QSCYQBZ2H4/
エンジニアリングマネジャー入門：信頼、組織、対話の極意

今回の記事は「エンジニアリングが好きな私たちのためのエンジニアリングマネジャー入門」を読んだうえで、自分が気になった部分をピックアップします。

https://amzn.asia/d/8INrWkw

## 信頼大事

マネジャーはもうほぼこれに尽きます。どうでもいい人に言われる「それは正しいことですか」と信頼している人に言われるそれの言葉の重みはめちゃくちゃ違います。そして信頼は積み重ねるのことが難しい一方で、なくすのはとても簡単です。
一度なくした信頼を再度積み重ねるためには、それ相応の努力と地道な下積みが必要となります。

## 自分も大事

とはいえ、信頼を得るために自分を犠牲にしていては意味がありません。実体験としても断言できます。
メンバーに対してもマネジャーとして __「こういうことをやります（こういうことはやりません）」__ というような説明書をドキュメントとして残しておくと良いでしょう。
そしてそれをプロジェクトの進行やプロダクトの状況に応じて都度修正することもおすすめします。定型化された1on1のドキュメントの冒頭に毎回リンクを載せておくとかでもいいですね。

## いびつな組織構造を作らないこと

この書籍に書かれている内容ではないのですが、EMという仕事を通じて他のチームのEMと大きく異なる組織構成は個人的に辛くなりやすいというものがあります。
というのも、わりと構成の違うチームだけ独特のレポートラインができちゃって、「ほかはうまくいってるのに、なんかうちだけちがくね？」という疑問や不安、苦悩が、経験上生まれやすい気がするからです。

図で見てみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11128/471e41fe-100c-3e73-869e-c14df031339c.png)

上図の場合はチームCだけが、この上にいるであろう上司、あるいは組織横断型であれば直属の上司（EMの上司）というレポートラインがチームA,Bとは違った形となってしまうため情報伝達や仕事の進め方、考え方などのパズルをチームCのEMが考えることとなります。大体の場合以下の理由で苦労します。

### 権限が足りない（あるいは過剰）
例えばPMとしての役割も兼務せざるを得ない立場だと、そのへんの融通を利かせようとして自分が何やってるかわからなくなるパターン。さらにチーム構成図に出てこない上司がいる場合、自分がやりたいことをいちいち上司を通さないと無理なパターン

### 内情をうまく説明できない
直属の上司またはPMに対して自チームと自分の役割を明確にすることが難しく、何をしてどう立ち回っているか（それがプロジェクト・プロダクトにどう影響しているか）を説明するのが難しい

### チームメンバーに疑問をもたれやすい
「PMとしてのボス」と「EMとしてのボス」と「メンバーとしてのボス」の顔を使い分けていると、結局こいつ何なん？というやつ

### 自分の評価をしづらい
ここまで述べてきたとおり「自分は何者か」という哲学的な命題に立ち向かっているうちにプロジェクトもプロダクトも進行するため、重要な自分の評価視点が抜け落ちがちになる。


解決策としては、個人としてちゃんと自分の仕事（役割）の軸を持つこととそれを周知すること、組織的にはいびつな構造をなるべく排除するとかレポートラインの明確化を図ってチームとして機能するように組み替えるかなどすると良さそうですね。

## 1on1はテンプレ化しましょう

雑談する1on1が月に1回あっても良いと思いますが、基本的にはドキュメント化してテンプレにしたほうがやりやすいだろうなーとこの本を読んで思いました。

たまたまXを見ていたら、以下のスライドについて言及してる投稿を見かけてこれ便利そうだなと思ったので、私もパクリたいと思います。

https://speakerdeck.com/yug1224/2024-12-06?slide=15


## EMが「自分でやる」のは最終手段

本にも書かれていますが、EMの大切な仕事の1つは __メンバーのキャリア育成と成長支援__ です。
マネジャーとしては戦略と方向性を示してあげることに注力し、それを明確に説明することが重要です。
私の場合、思い返せば「この人は自分のアピールが苦手だけど得意領域での仕事はずば抜けたセンスあるし、他チームと組ませてアピールできれば個人評価にもちゃんとした証拠が残るよなー。そうすれば絶対昇給できるよなぁー」という理由でそのメンバーを組織横断プロジェクトにぶっこんだことがありました。が、カッコ内の自分の考えを1on1で明確に説明し、自分がどう考えているかを伝えたかどうかが曖昧なので、多分伝えてないんでしょう。これは反省点です。

ということでEMのみなさん、メンバーに期待していること、自分が戦略・エンジニアリングの方向性について考えていることがあるのであれば、それを明文化するなり1on1で言葉にして伝えるなり（もちろんドキュメントも残しつつ）しましょう！

## 対話重要

この書籍でコーディングについて言及されているのは、Part3のChapter17くらいです。つまり書籍の中の1割もないのです。
とにかく話さんことには始まりません。自分の考えをコロコロ変えるにしても、その変遷について毎回説明するしかメンバーに自分の思考を追体験してもらうことはできません。
部下から「お前の1on1意味ないねん、スキップさせてや」と言われてからが勝負です。めげずに会話を続けましょう！（並行して1on1の内容の修正と信頼の獲得にも努めていきましょう……）

心が折れそうなときは、人ではない何かと会話するか夜空を見上げることをおすすめします！
【初級者】抽象⇆具体で挫折を減らす！(並列処理を理解する)

## はじめに
まず簡単に自己紹介をさせてください。
現在、東京のSES企業に所属するSE歴4年目のGendyと申します。
プログラミングの学習歴は学生の頃からで約9年程になります。

私は<font color="red">**挫折せずにプログラミング学習を進めるにはメンターの存在が大事**</font>だと思っています。
今回はその理由の１つについて解説しようと思います。

## なぜ挫折が多いのか
皆さんはIT用語が難しくて全然イメージが湧かなかったことはありませんか？
私はよくあります(笑)
実は、私は3回も挫折した経験があります。
というのも、単語や知識を覚えるときに、その説明だけを暗記していて、どういう風に動くのかはあまり理解していませんでした。 
そもそも全体のイメージが理解できていなかったんですね。 
質問するときも、自分でどこが分かっていないかも分からないような状態だったので、
質問しても単語や知識の説明が返ってくるだけでした。
複数のプログラミング言語を学習してきましたが、どれも同じ理由で挫折してきました。

では、どのように挫折を乗り越えてきたのかというと、<font color="blue">**概念の具体化**</font>です。
**IT用語は概念**が多く、どのようなデータがどのように動いているのかが分かりづらいのです。
私は難しい言葉を<font color="blue">**身近なものに例えてイメージすること**</font>で理解できるようになりました。
では、具体化をどのように実践するのか並列処理を例に説明していきます。
（ついで並列処理も同時に学びましょう笑）

## 並列処理を調べる
並列処理について調べるときに「**マルチスレッド**」や「**マルチプロセス**」という言葉をよく目にします。さらに、**マルチスレッド**を詳しく調べると「**並列処理**」や「**並行処理**」といった、少し紛らわしい用語も出てきて、理解を妨げてしまうこともあるかもしれません。

なので、まずは「**並列**」と「**並行**」について簡単に押さえてみましょう。
これを理解するだけでも、後の学習がグッとスムーズになります！

## 並列と並行の具体化
比較的想像しやすいであろう「料理」を例に、スーパーお料理ロボットくんに登場してもらいましょう。
スーパーお料理ロボットくんには、特殊能力があり両手を自由自在に扱うことができ、それぞれの手が独立した作業を行うことができるのです。

では、スーパーお料理ロボットくんに「**主菜と副菜を作り食卓に並べる**」というタスクを与えてみましょう。


パターン：Ａ
①右手は主菜のお肉やお野菜をカットして調理します。
② ①と同時に左手で副菜のお野菜をカットして調理します。
それぞれの手が**同時に別の作業**を行い主菜と副菜を作り、**同時**に食卓に並べます。

これを「**並列処理**」といいます。



パターン：Ｂ
①両手で主菜のお肉をカットします。
② ①が完了したら両手で副菜のお野菜をカットして調理します。
③ ②が完了したら両手で主菜のお野菜をカットして調理します。
両方の手で**同じ作業**を行い、主菜と副菜を作り、**同時**に食卓に並べます。

これを「**並行処理**」といいます。

::: note
並列処理は複数の作業を「**実際に同時に**」行うことを指し、
並行処理は複数の作業を「**同時に見えるように**」進めることを指します。
:::

なんとなく理解できたでしょうか？

## マルチスレッドとマルチプロセスの具体化
飲食店を運営する会社(レストラン Super Cooking Robot)でのお話で、お客様に料理を提供するタスクがあるとします。
一店舗内（東京店）に限った話で、**複数の店員さん**が料理を作り、お客様のもとに料理を提供します。
これが「**マルチスレッド**」の考え方です。

仮に上記のお店が複数店舗あり、2店目（大阪店）が営業しているとします。
その場合、レストラン Super Cooking Robotは**２つのお店を通してお客様に料理を提供する**ことになります。
これが「**マルチプロセス**」の考え方です。 

::: note
同じお店内では連携はしやすいが、他店舗同士では連携しにくいのと同じように
プロセス間同士での通信はしづらく、プロセス内での通信は容易なのです。
:::

マルチスレッドやマルチプロセスもレストランに例えると分かりやすいですね！

## まとめ
このように<font color="blue">**ITの概念（抽象）を身近なものに例えることを具体化**</font>といいます。
具体化をすることで、概念で理解するよりもイメージしやすく、理解しやすいと思います。

具体化の例として…

繰り返し処理：
5階建てのマンション（1フロア10部屋）があるとして、
自分が101、102、103、.....201...301....510の順に扉を開けること

キュー：
券売機で順番待ちしている人のこと

上記のように<font color="blue">**普段からIT用語を日常的なものに**</font>例えて、メンターに確認し理解を深めていきました。
私には具体化して教えてくれるメンターがいたことで、理解が深まり、<font color="blue">**具体化することが重要**</font>だと思うようになりました。

あくまで具体化したものは物事の1面でしかありません、もし具体化したもので単純にそれを例えられるものがあるとしたら、それは同じものですからね(笑)
なので、物事を<font color="blue">**本質的に理解するには抽象度を段階的上げていくこと** </font>が必要です。

つまり …
<font color="red">**「自分の理解度に応じて、抽象度を調整しながら教えてくれるメンターを見つけることが重要！」** </font>なのです。

**メンターを見つけましょう！**
文字列を数値に変換するには。NumberとparseIntの使い分け

## 文字列を数値に変換するには
JavaScriptで文字列`'123'`を数値`123`に変換したいときには、`Number`や`parseInt`を使用することで実現できます。
本記事では、両者の違いについてみていきます。

## `Number`
`Number()`の引数には整数の他に、浮動小数点数を表す文字列も渡すことができ、数値型に変換してくれます[^1]。

引数に数値として解釈できない文字が含まれる場合には`NaN`が返されますが、先頭と末尾の半角スペースや全角スペースなどの空白は無視してくれます。
数字の間に空白がある場合には無視されず、`NaN`が返されます。

```js
console.log(Number('  　 123')) // 123
console.log(Number('     123.45　'))   // 123.45
console.log(Number('1234 5678'))   // NaN
```

また、`Number`は10進数の場合にしか変換できない点が`parseInt`とは異なります。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number

## `parseInt`
`parseInt()`によっても文字列を数値へ変換することができます。

`parseInt()`は名前にInt とあるように整数のみが解析対象です。
また、文字列を先頭から見ていったときに数値として認識されない文字が出てきた場合には、その文字以降が無視されます。
空白を除いた後、数値として認識されない文字が先頭に残る場合には、`NaN`が返されることとなります。

`parseInt()`は第2引数に基数を渡すことで、10進数以外で表現されている文字列を数値に変換することができます。
2進数から36進数までが指定可能です。
```js
console.log(parseInt('   5  ')) // 5
console.log(parseInt('1.234'))  // 1
console.log(parseInt('234xyz')) // 234
console.log(parseInt('FE',16))  // 254
console.log(parseInt('FE',37))  // NaN
```
`Number`と同様に先頭と末尾のスペースは無視されます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseInt

`parseInt`では浮動小数点数を扱えませんが、浮動小数点数を変換するために`parseFloat`という関数も用意されています。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseFloat

## 余談:`<input>`要素の入力を数値で取得
`<input>`要素では数字が入力されたとしても、`value`プロパティからは文字列型として取得されます。

実は`value`のほかに`valueAsNumber`というプロパティからも入力値を取得可能です。
`valueAsNumber`であれば、数値型として取得できます。
ただし、数値への変換ができない値が入力されていたときには`NaN`が返されます。

[^1]:`new Number()`として呼び出すこともでき、ラッパーオブジェクトが得られますが、現在ではこの方法を使用する必要はないとされています。
kintoneとPower Appsをどっちも使ってみたって話

# はじめに

こんにちわ、ノベルワークスのまとっち（[@matoi_thai](https://x.com/matoi_thai)）です。今はタイのメーサイっていう田舎（ミャンマーとの国境近くの町）でワーケーションしてます。

<b>※ この記事は「すごくない」kintone Advent Calendar 2024 12/11(水)の記事です。</b>

https://adventar.org/calendars/10426

## この記事の対象者
- kintoneとPower Appsをなんとなく知りたい人

## 背景
ぼくは2023年5月にノベルワークスに入社してからkintoneを初めて使ったのですが、2024年4月からはPower Appsも使ってます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713212/7af1a3f2-99db-9859-5f07-742e12ddc7e9.png)

# kintoneとPower Appsのざっくり比較
ということで、kintoneとPower Appsをざっくり比較していきます！
## ① どちらも社内業務アプリ作成ツール
非ITの人が簡単に自社の業務に合わせて、オリジナルのアプリを作成できるノーコード/ローコードツールです。主に、企業内での業務効率化や管理（顧客管理、案件管理、経費申請など）を目的としています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713212/9fcd727a-c395-e869-7f23-518c3769a869.png)


## ② システム構成
Power Appsはデータベースと入力画面が分かれており、入力画面も状況に応じてキャンバスアプリとモデル駆動型アプリで使い分けが可能です。
kintoneはデータベース＝入力画面となっており、使い方や機能はPower Appsのモデル駆動型アプリの方と似ています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713212/bbe0afd8-3f65-33be-2424-7926e0021f21.png)


## ③ 拡張/関連サービス
kintoneにはサイボウズのパートナー企業が提供するさまざまなプラグインや連携サービスがあります。Power AppsはMicrosoftが提供する他のツールと組み合わせることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713212/69ffbfaf-a79b-80c1-0272-c4e015af7fde.png)

## ④ 難易度やコスパ（個人的な感想）
kintoneは簡単だし日本人向けの情報が多いけど、色んな機能を入れると値段が高くなってしまいます。Power Appsはそこそこ難しいけど、標準で機能が豊富なので値段が安く収まりやすいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713212/47d4754d-3053-4b7d-75f7-1258900e84f0.png)


# おわりに
ぼくはkintoneもPower Appsも好きなので、どっちも使ってます。
どっちかに偏るんじゃなくて、適材適所で使えればいいですね。

https://x.com/matoi_thai/status/1843901961575510280
FigmaからReactに出力できるプラグインまとめ

## 概要

以前使ったFigmaからReactを出力するプラグイン、

https://www.figma.com/community/plugin/1077518101542528942/uipkg-export-design-to-react-components

を久々に使おうとしたところ、公式はホストエラーで全く更新されていないため、別のプラグインを調査した内容をまとめます。

## builder.io

サービスサイトに移ってコード生成するタイプ
月額$19(2024/12現在¥2,866)で今回の中で1番安い

![スクリーンショット 2024-12-10 2.20.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/182b8a6b-4871-a69c-2366-015757827641.png)

https://www.builder.io/

![スクリーンショット 2024-12-10 2.11.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/f3d3893a-6658-21e0-d8e4-784a0226f946.png)

## anima

サービスサイトに移ってコード生成するタイプだが有料プランにならないとコード生成できない
月額$24(2024/12現在¥3,620)で今回の中で2番目に安い

![スクリーンショット 2024-12-10 2.21.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/bf6d0664-78bc-ada4-3441-34e6ae6a592d.png)

https://www.animaapp.com

![スクリーンショット 2024-12-10 2.12.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/702db255-d3c7-92b6-46aa-89268ad5ca55.png)

## FireJet

Figma上にウィンドウが起動してコード生成できるタイプ
月額$38(2024/12現在¥5,732)で今回の中で3番目に安いがここから高いため選定外だけど一応指標として確認

![スクリーンショット 2024-12-10 2.25.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/c31beeed-26fe-d860-c06d-c884d2702ea3.png)
![スクリーンショット 2024-12-10 2.25.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/3fb95628-c90c-cc93-5fbf-58f263f1e870.png)

https://www.firejet.io/

![スクリーンショット 2024-12-10 2.12.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/f76858e0-c41d-abe6-2871-162937dddb46.png)

## Codia

Figma上にウィンドウが起動してコード生成できるタイプ
月額$49(2024/12現在¥7,391)で高い

![スクリーンショット 2024-12-09 22.20.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/afa64a98-7766-f9ab-4e6a-1dfa5449a4a0.png)
![スクリーンショット 2024-12-09 22.22.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/dfcfc610-b5c2-edec-e1ba-2e7883927bd8.png)

https://codia.ai/

![スクリーンショット 2024-12-10 2.13.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/da804d07-bb81-603c-56d2-82e0c7e61c36.png)

## DUALITE

Figma上にウィンドウが起動してコード生成できるタイプ
基本無料で使えて本格的に使用する場合はユーザー単位で課金らしくトップ画面とアップグレード画面で金額が違う表示になる
年間$189(2024/12現在¥28,507)なら月に割ると¥2,375.58で月額は$19ならbuilderより安い

![スクリーンショット 2024-12-10 2.29.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/786b39ef-ed90-511f-05f1-54a99a379a8a.png)
![スクリーンショット 2024-12-10 2.31.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/dabe48a7-95e2-8de3-d2aa-301c5bc93309.png)


https://www.dualite.dev/

![スクリーンショット 2024-12-10 2.13.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/cc1586b8-4f0b-89ae-6ebc-9b2e95bcbdf4.png)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/5f8a1e6c-362e-560f-60c0-b8f450519cdd.png" width="250px"> </img><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/fd496050-168e-e645-0896-34a736629391.png" width="250px"></img>


## 補足

実際に出力されたコードは、どれも本格使用するには調整が必要であるため、どの出力結果が好みかは各々で確認して他メンバーがいれば相談しあって決めるべし。
現在時刻を取得する

この記事は[JavaとPythonを基礎から学びたい私のための Advent Calendar 2024](https://qiita.com/advent-calendar/2024/aruhitonocalendar)の10日目の記事です。
# 時間を知る
Javaで現在の時刻を知ることができるようです。しかも簡単に、時間だけでなく日付とか細かく指定することもできるみたいです。
# 現在の日付と時間
現在の日付と時間はこのように表すことができました。
```
import java.util.Date;

      Date nowtime=new Date();
       System.out.println(nowtime);
```
実行結果:Mon Dec 09 21:02:55 JST 2024

Dateを使うことで、現在の日時や時刻を取得することができます。ただし、Dateは最初にimportしないと使えないようです。
ちなみにスペースで区切られているので
```
import java.util.Date;

public class TEST {
    public static void main(String[] args)  {
      Date nowtime=new Date();
      String A=nowtime.toString();
      String[] B=A.split(" ");
       System.out.println(B[3]);
    }
    
}
```
実行結果:21:16:25
いったんString型に変えてからスペースごとに区切って、出力したいものだけを出すこともできるようです。
## Dateを使わない方法
1970年１月１日から経過したミリ秒を表す、long型の「currentTimeMillis」というものがあるようです。こちらはSystemのものでDateを使わないため、importが不要です。
```
public class TEST {
    public static void main(String[] args)  {
   long A=System.currentTimeMillis();
   System.out.println(A);
    }
    
}
```
実行結果:1733746934564
ちなみに一日が1000×60秒×60分×24=86400000秒なので、これで割ることで1970年の元旦からの経過日数を出すことが可能です。
```
long A=System.currentTimeMillis();
   long B=A/86400000;
   System.out.println(B);
```
実行結果:20066
# Calendarを用いた方法
```
import java.util.Calendar;;
public class TEST {
    public static void main(String[] args)  {
   Calendar B=Calendar.getInstance();
   System.out.println(B);
    }
```
Calendarをimportして使います。getInstanceで、現在の日時などの情報を取得することができます。通常は、取得した情報の中から必要な情報を取り出して使用します。今回は中身を全部見てみます。

出力結果:java.util.GregorianCalendar[time=1733748564588,areFieldsSet=true,areAllFieldsSet=true,lenient=true,zone=sun.util.calendar.ZoneInfo[id="Asia/Tokyo",offset=32400000,dstSavings=0,useDaylight=false,transitions=10,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2024,MONTH=11,WEEK_OF_YEAR=50,WEEK_OF_MONTH=2,DAY_OF_MONTH=9,DAY_OF_YEAR=344,DAY_OF_WEEK=2,DAY_OF_WEEK_IN_MONTH=2,AM_PM=1,HOUR=9,HOUR_OF_DAY=21,MINUTE=49,SECOND=24,MILLISECOND=588,ZONE_OFFSET=32400000,DST_OFFSET=0]
大量に出力されることがわかると思います。この中にはcurrentTimeMillisやDateの中身を含む様々な情報（例えば今日が今月の何週目かなど）が入っています。
必要な情報だけを取り出すときには、
```
System.out.println(B.get(Calendar.MONTH));
```
get(Calendar,必要なもの)の順に書けばよいそうです。ちなみにMONTH(月)は0からスタートするため1ずつずれます。そのため、この出力結果について今日は12月なので11となります。
ほかにも、今日が今年に入って何日目（DAY_OF_YEAR）とか今月の何週目（DAY_OF_WEEK）とか簡単に取得することができるようです。
# LocalDateTime
この方法では、日時が取れます。
```
import java.time.LocalDateTime;
public class TEST {
    public static void main(String[] args)  {
        LocalDateTime A = LocalDateTime.now();
        System.out.println(A);
    }
}
```
実行結果:2024-12-09T22:07:26.428

# まとめ
日時を取得する方法はDate、Calendar,LocalDateTimeやcurrentTimeMillisなど様々な方法があった。Calendarを使用した方法では、他と違って様々な情報を取得できる。
# 参考文献

https://www.sejuku.net/blog/50913

https://docs.oracle.com/javase/jp/8/docs/api/java/util/Calendar.html

https://tech.mamezou00000.com/entry/java-calendar

https://www.sejuku.net/blog/50913
OSONについて

OSONはoson structured object notationの略で、JSONにある多くの問題を解決したものだそうです。
以下にOSONの機能を紹介します。

# 循環参照
OSONはJSONと異なり、循環参照を扱うことができます。

```
const obj = {};
obj.self = obj;
JSON.stringify(obj); // error
oson.stringify(obj); // works!
```

## 参照の繰り返し
また、OSONはJSONと異なり、繰り返された参照を扱うこともできます。

```
const obj = {};
const arr = [obj, obj];
const [left, right] = JSON.parse(JSON.stringify(arr));
assertStrictEquals(left, right); // error
const [l, r] = oson.parse(oson.stringify(arr));
assertStrictEquals(l, r); // works!
```

## undefined
OSONはundefinedもうまく扱えます。

```
const undef = oson.parse(oson.stringify(undefined));
assertStrictEquals(undef, undefined);
```

## スパースな配列
スパースな配列もOSONでエンコードできます。

```
const arr = [5, , , , 6, , , 7];
console.log(oson.parse(oson.stringify(arr)));
// [ 5, <3 empty items>, 6, <2 empty items>, 7 ]
```

## bigint
bigint型にも対応しています。

```
const num = 10n ** 1000n;
JSON.stringify(num); // error
oson.stringify(num); // works!
```

## 他の型への対応
他にも以下の組み込み型に対応しています。

- Map
- Set
- Date
- RegExp
- Error
- Uint8Array
- URL

出展:

https://github.com/KnorpelSenf/oson
【超基礎】TypeScriptにおける「as」

# 前提
この記事は、初学者の私が、サバイバルTypeScriptで学んだこと+調べたことをまとめたものになります。

従って、経験則に基づいた発言ではないため、一部慣習とは違っていたり、認知にずれがあったりする可能性がありますので、ぜひコメントで指摘していただけると幸いです。

https://typescriptbook.jp/

# 環境
記事内のコードは以下の環境で動作確認済みです。

- Node.js: v22.10.0
- TypeScript: Version 5.6.3

# "as"について
- 「アサーション」と呼ばれる
- 型アサーションやconstアサーションがある

# 型アサーション　`as type`
- **型推論を上書きする**
- 型に関する厳しいチェックを**無理やり突破する手段**
- `<Type>`とする方法も存在する
```typescript:型アサーション
//stringとnumberのユニオン型の変数value
const value: string | number = "Hello,World!";

//型アサーションによりvalueの型を明示的に指定
const strLength1: number = (value as string).length;//=>12

//asを使わない方法もある
//JSXのタグと混同するので非推奨
const strLength2: number = (<string>value).length;//=>12
```
## 全く無関係の型への上書きはエラー
```typescript
const strLength: number = "Hello" as number//Error
```
## アサーションは害
上記見出しはTypeScript Deep Diveからの引用です。

https://typescript-jp.gitbook.io/deep-dive/type-system/type-assertion

型のチェックを無理やり突破できるという点は便利な部分もありつつ、かなり危険です。

型アサーションの使用はJS→TSの移行途中の一時的なエラー削除等に留めるべきです。

# constアサーション `as const`
- オブジェクトリテラル`{}`の末尾につける
- 各プロパティに対して、再帰的にreadonlyがつき、**すべてのプロパティが固定される**
- 定数としてcosntで宣言したオブジェクトに対して`as const`を付けることで完全に編集できないオブジェクトを作成可能
:::note warn
型アサーションとは全く関係ない
:::
```typescript:constアサーション
const human = {
    id: 500,
    profile : {
        name: "taro",
        age: 20
    }    
} as const;

//読み取り専用プロパティであるため、代入できない
human.id = 600 //=>Error
human.profile.name = "hanako"//=>Error:
```


# まとめ
以上になります。

慣例から外れた部分があれば指摘していただけると幸いです！！

# 参考
https://qiita.com/irico/items/9d71060e52ffc1e79962

https://typescript-jp.gitbook.io/deep-dive/type-system/type-assertion

https://qiita.com/tkmd35/items/5aa930a02b3a09cec2e1
NSONについて

NSONはnew object notation like JSON and unlike JSONの略で、JSONのようでもありJSONと異なるようなオブジェクトの表記法です。特にカンマをセパレーターとして使わないことが特徴です。

# 配列
以下がNSONの配列の例です。カンマの省略は必須ではないためJSONと同様にカンマを使って要素を区切ることもできます。また改行を区切り文字にすることもできます。

```
[]
[1, 2, 3]
[1 2 3] //comma is omitted
[1
 2
 3] // line feed is also separator
```

# オブジェクト
オブジェクトも同様にカンマを省略したり、改行を区切り文字にすることができます。
また、キーとバリューを区切るコロンも省略できます。

```
{"x" : 1, "y": 2}
{ x : 1 y : 2} //comma is omitted
{"x"1"y"2} // colon is omitted
{"x" : 1
 "y" : 2} // line feed is also separator
{ x : 1, y : 2} // identifier
{ x : 1  y : 2}
```

https://github.com/kmizu/nson
MSONについて

MSONはMarkdown Syntax for Object Notationの略で、プレインテキスト形式でAPIの仕様書を書くための言語です。

# MSONの例

以下がMSONの例で、 `/files` に対するGETリクエストに関するAPI仕様書であることがわかります。200レスポンスのContent-typeはapplication/jsonで、pathというキーを持つオブジェクトの配列が返されることがわかります。

```
# GET /files

+ Response 200 (application/json)
    + Attributes (array, fixed-type)
        + (object)
            + path: `/files` (required)
```

# 型宣言
MSONでは型を宣言して再利用することができます。例えば以下はFileという型とPermissionという列挙型(enum)を宣言している例です。型宣言は `Data Structures` ブロックで行います。

```
# My API

## GET /files

+ Response 200 (application/json)
    + Attributes (array[File], fixed-type)

## Data Structures

### File (object)

+ name: `index.html`
+ size: 5012 (number)
+ `created_at`: `2007-04-05T24:00` (string)
+ permissions (Permission)

### Permission (enum)

+ r (default) - Read only
+ rw - Read-write
```

# 型
MSONで使える型を紹介します。

## Object
キーとバリューのペアからなる型です。プロパティはデフォルトでoptional(省略可能)で、バリューの方は文字列です。特定のキーが確実に存在することを示すためにはrequiredというキーワードを使います。

```
+ name: API Blueprint (required)
```

また、値がnullになる可能性があることを示すためにはnullableキーワードを使います。

```
+ date (required, nullable)
```

さらに、fixedキーワードを使うとバリューが特定の値になっていることを示します。例えば以下の例ではtypeというキーに対応するバリューはadminであることをしましています。

```
+ type: admin (fixed)
```

## 配列
これは文字列もしくは数値を含む配列を宣言している例です。

```
+ Attributes (array[string, number], fixed-type)
```

具体例を表すためにはこのようにします。

```
+ Attributes (array, fixed-type)
    + 10 GBP
    + 20 GBP
    + 12.99 (number)
```

## 列挙型
特定のリストの中の値のみを取ることを表すために列挙型(enum)を使うこともできます。

```
## Direction (enum)

+ north
+ east
+ south
+ west
```

出展: 
https://apiblueprint.org/documentation/mson/specification.html
UEのポストプロセス上でUVと深度からワールド位置を求める

ちょっとした小ネタです。

UE上でポストエフェクトを書いていると、近隣のピクセルのワールド位置が欲しくなる事があるのではないでしょうか。
しかしながらWorldPositionノードではUVが指定できないので取得したいピクセルを自由に選ぶ事ができません。

今回はその取得方法を解説します

## 参考になるコード
実はすでにUEのエンジン内には目当ての処理を実装している箇所があります。
下記の場所にあるLumenPosition.ushです。
```
Engine\Shaders\Private\Lumen\LumenPosition.ush
```
この中のGetWorldPositionFromScreenUVが参考にし易いので、こちらの手法を実際に使ってみましょう。

```
float3 GetWorldPositionFromScreenUV(float2 ScreenUV, float SceneDepth)
{
	float2 ScreenPosition = (ScreenUV - View.ScreenPositionScaleBias.wz) / View.ScreenPositionScaleBias.xy;
	float3 WorldPosition = mul(float4(GetScreenPositionForProjectionType(ScreenPosition, SceneDepth), SceneDepth, 1), DFHackToFloat(PrimaryView.ScreenToWorld)).xyz;
	return WorldPosition;
}
```

## 使ってみる
ではまず、取得したワールド位置から距離を見て適当な濃淡をつけてみる事でWorldPositionと同等の性能がある事を確認します。


テスト用に下記BPを組みました。
SphereMaskを使い、原点から半径4mをマスクします。
ワールド位置を取得する処理はカスタムノードを使っての実装となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/3b0ee1c2-5699-31e7-4fb0-de65a7e0cac4.png)

カスタムノード内で書いたUVと深度からワールド位置を取得するコード
```
    float2 uv = ClampSceneTextureUV(ViewportUVToSceneTextureUV(DERIV_BASE_VALUE(inUV), 1), 1);
    float3 depth = SceneTextureLookup(uv, 1, false).rgb;
    float2 screen =  (uv - View.ScreenPositionScaleBias.wz) / View.ScreenPositionScaleBias.xy;
    float3 wp = mul(float4(GetScreenPositionForProjectionType(screen, depth.x), depth.x, 1),  DFHackToFloat(PrimaryView.ScreenToWorld)).xyz;
	return wp;
```
気を付ける所として、指定するUVは表示されいてる領域を0-1に正規化したものでは無く実際のUVです。
したがって、ClampSceneTextureUVとViewportUVToSceneTextureUVを使って補正を掛ける必要があります。

## 結果

意図した結果を得る事が出来ました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/da7ee4f7-1308-faf9-f074-bb5997502598.png)

## どういった場面で使うか
実際での使いどころの一例として、上記のマスクを標準のDOFではない、自前のDOFのフォーカス範囲の判定に使ってみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/822e5980-a2d6-47c5-959b-9e9a953db5ae.png)


ブラー時、サンプリング毎にワールド位置を取得する事でフォーカス範囲を判定しています。
標準DOFの後のパスでAfterDOFとして書かれた半透明にかぶせる為の機能として使ったりします。

## 最後に
定期的に使う必要出てくる機能です。都度やり方を調べる事が多いので自分のメモの意味も込めて書きました。
同じ事を調べていたどなたかの役に立てば幸いです。

## 注意点
今回はエンジン内部のコードを参考にしましたが、更新のタイミングで定義が変わったりする事があります。
実際に5.3→5.4の更新の際はLWCHackToFloatがDFHackToFloatに代わりました。
バージョンを上げる際はその辺り注意して追うようにしてください。
(調査中)[JUnit4]テストメソッド単位でログレベル変更

```java
import ch.qos.logback.classic.Level;
import ch.qos.logback.classic.Logger;
import ch.qos.logback.classic.LoggerContext;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import org.slf4j.LoggerFactory;

public class LogbackLogLevelTest {

    private Level originalLevel;

    @Before
    public void setUp() {
        // ロガーを取得
        Logger logger = (Logger) LoggerFactory.getLogger("com.example"); // ロガー名を指定
        originalLevel = logger.getLevel(); // 元のレベルを保存

        // ログレベルをDEBUGに変更
        logger.setLevel(Level.DEBUG);
        System.out.println("Log level set to DEBUG for test setup.");
    }

    @After
    public void tearDown() {
        // 元のレベルに戻す
        Logger logger = (Logger) LoggerFactory.getLogger("com.example");
        logger.setLevel(originalLevel);
        System.out.println("Log level reverted to original.");
    }

    @Test
    public void testExample() {
        Logger logger = (Logger) LoggerFactory.getLogger("com.example");
        logger.debug("This is a debug message.");
        logger.info("This is an info message.");
    }
}
```

解説
Logger の取得: LoggerFactory.getLogger() を使用して、対象のロガーを取得します。
元のログレベルを保存: `@Before` メソッドで変更前のログレベルを保存しておきます。
ログレベルの変更: setLevel() を使用してログレベルを動的に変更します。
元に戻す: `@After` メソッドでログレベルを元に戻します。

注意点
ロガー名（例: "com.example"）は、対象のテストコードに応じて変更してください。
テストケース間でログレベルを変更すると他のテストに影響する可能性があるため、必ず `@After` で元に戻す処理を追加してください。
他のログフレームワークや設定ファイルに依存している場合、この方法が正しく動作しない場合があります。その場合は Logback の設定ファイルを動的に読み込む方法も検討してください。
[JUnit4]テストクラス単位でログレベル変更

```java
import ch.qos.logback.classic.Level;
import ch.qos.logback.classic.Logger;
import ch.qos.logback.classic.LoggerContext;
import org.junit.AfterClass;
import org.junit.BeforeClass;
import org.junit.Test;
import org.slf4j.LoggerFactory;

public class LogbackLogLevelTestClass {

    private static Level originalLevel;

    @BeforeClass
    public static void setUpClass() {
        // ロガーを取得
        Logger logger = (Logger) LoggerFactory.getLogger("com.example"); // ロガー名を指定
        originalLevel = logger.getLevel(); // 元のレベルを保存

        // ログレベルをDEBUGに変更
        logger.setLevel(Level.DEBUG);
        System.out.println("Log level set to DEBUG for the entire test class.");
    }

    @AfterClass
    public static void tearDownClass() {
        // 元のレベルに戻す
        Logger logger = (Logger) LoggerFactory.getLogger("com.example");
        logger.setLevel(originalLevel);
        System.out.println("Log level reverted to original after the test class.");
    }

    @Test
    public void testExample1() {
        Logger logger = (Logger) LoggerFactory.getLogger("com.example");
        logger.debug("This is a debug message in testExample1.");
        logger.info("This is an info message in testExample1.");
    }

    @Test
    public void testExample2() {
        Logger logger = (Logger) LoggerFactory.getLogger("com.example");
        logger.debug("This is a debug message in testExample2.");
        logger.info("This is an info message in testExample2.");
    }
}
```

解説
`@BeforeClass` を使用:

テストクラス全体で共通のセットアップを行います。
ここで対象のロガーのログレベルを変更します。
`@AfterClass` を使用:

テストクラス全体の終了後に元のログレベルに戻します。
テスト間の影響を防ぐために必ずログレベルを元に戻します。
テストメソッド間のログレベル統一:

クラス全体のログレベルが統一されるため、各テストメソッドでログレベルを気にする必要がありません。
MUIのTimelineコンポーネントで縦方向のタイムラインUIを作ってみる

# はじめに
タイムラインUIの作成方法を調べていたところ、MUIで [**Timeline**](https://mui.com/material-ui/react-timeline/) コンポーネントがあったので。こちらを使用し縦方向のタイムラインUIを実装してみました。

# 環境
- react: 18.3.1
- vite: 5.4.8

# ゴール

次のようなタイムラインUIを作成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/c766f97f-a443-7358-5838-966af5727f8f.png)


# インストール

```
npm install @mui/material @mui/lab @emotion/react @emotion/styled
```

https://mui.com/material-ui/getting-started/installation/



# タイムラインの作成

タイムラインUIを作成します。詳細はコメントアウトの通りです。

```jsx:App.jsx
import Timeline from '@mui/lab/Timeline';
import TimelineItem from '@mui/lab/TimelineItem';
import TimelineSeparator from '@mui/lab/TimelineSeparator';
import TimelineConnector from '@mui/lab/TimelineConnector';
import TimelineContent from '@mui/lab/TimelineContent';
import TimelineDot from '@mui/lab/TimelineDot';
import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';
import { Typography, Paper } from '@mui/material';

// サンプルデータ
const timelineItems = [
  {
    year: '2024',
    title: 'サンプル１',
    description: 'テキスト テキスト テキスト',
  },
  {
    year: '2023',
    title: 'サンプル2',
    description: 'テキスト テキスト テキスト',
  },
  {
    year: '2022',
    title: 'サンプル3',
    description: 'テキスト テキスト テキスト',
  },
  {
    year: '2021',
    title: 'サンプル4',
    description: 'テキスト テキスト テキスト',
  },
];

export default function App() {
  return (
    <div style={{width:'50%', margin: '0 auto'}}>
        <Timeline position="alternate">
          {timelineItems.map((item, index) => (
            <TimelineItem key={item.year}>
              {/* 年を表示 */}
              <TimelineOppositeContent>
                <Typography variant="h6" component="span">
                  {item.year}
                </Typography>
              </TimelineOppositeContent>
              {/* 中央の点と線 */}
              <TimelineSeparator>
                <TimelineDot color="primary" />
                {index !== timelineItems.length - 1 && <TimelineConnector />}
              </TimelineSeparator>
              {/* カード風のUI */}
              <TimelineContent>
                <Paper elevation={3} sx={{ p: 2 }}>
                  {/* タイトル */}
                  <Typography variant="h6" component="span">
                    {item.title}
                  </Typography>
                  {/* 説明文 */}
                  <Typography>{item.description}</Typography>
                </Paper>
              </TimelineContent>
            </TimelineItem>
          ))}
        </Timeline>
    </div>
  );
}
```


# 動作確認

サーバを起動してUIを確認します。

```
npm run dev
```

カード風のUIをタイムラインが作成されてることを確認できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/1227d871-53b6-545e-4359-c7177a0ca77e.png)


# 参考

https://mui.com/material-ui/react-timeline/
toio で何かのキャラクターを動かす・生き物の見た目【toio-2】

この記事は、「[toio Advent Calendar 2024](https://qiita.com/advent-calendar/2024/toiotomo)」の 10日目の記事です。

## はじめに
自分もダイソーなどで買ったアイテムでよくやってみたりする、toio で何かのキャラクターを動かしてみたり、また生き物の見た目にしてみたり、という話です。

自分がやってみたもの以外に、モノ作り界隈でよくご一緒する方がやっていた事例も紹介してみます。

## 実際の事例： 自分が使っている・やってみたもの
### レゴの目玉
最初は、自分も多用している、公式が使っていたりもするものです（自分は、その公式の動画を見て真似た形）。

<iframe width="560" height="315" src="https://www.youtube.com/embed/XL-F6-FaUUk?si=YaFrx4QxPwBaIO48" 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>

以下のように、toio を動かす作品の展示では、基本的にこちらを使っています（レゴの板＋目玉がコンパクトで、持ち運びに便利なのと、子どもから大人の方までのウケが良い見た目のため）。

https://x.com/youtoy/status/1865245398098677844

レゴの板・目玉のパーツは、ばら売りしているオンラインサイトで入手しました。

### ダイソーのマスコットキーホルダー
次はダイソーのマスコットキーホルダーを動かしたものです。

ダイソーでこのマスコットキーホルダーを見かけた際に、「お腹の部分くらいにすっぽり toio がはまりそうだし、重さは軽そうだし、toio にのせると良いのでは？」と思って買ったものでした。

https://x.com/youtoy/status/1568885301657088000

https://x.com/youtoy/status/1581512537375313920

マスコットキーホルダーに取り付ける方法は、雑な感じにしています（意外とこれでも、上のマスコットキーホルダーが落ちないです）。

https://x.com/youtoy/status/1570415168735281152

こちらは、「つくろがや！」という名古屋のイベント展示でも活用しました。

https://x.com/youtoy/status/1775533255456129078

### ダイソーのアクセサリー
またダイソーで見かけたものを、toio にのせて動かしたという話です。

https://x.com/youtoy/status/1858147170169614577

ふわふわの部分の一部を、toio と LEGO の板状のものの間に挟み込む感じで固定しています。

## 実際の事例： 他の方の作品
以下は、他の方の作品です。

### レゴで作ったたこ焼き
toio を使って、レゴで作ったたこ焼きを動かしている事例です。

https://x.com/IkeuchiRyota/status/1850466532696187018

以下のように、たこ焼きの部分を作るワークショップだったようです。

https://x.com/IkeuchiRyota/status/1847938704356397413

このたこ焼きを作るのも楽しそうで、そして toio で動かすというのも良い感じだと思いました。

ちなみに、以下のようなものも用意されていたようですが、toio を使って動かすのに参加者の子達は夢中だった、とのこと。

https://x.com/IkeuchiRyota/status/1850419423368389035

### キャラクターいろいろ
以下、自分が toio のハッシュタグをつけてポストしていたものから、いくつかピックアップしたものです。
（引用ポストだったものは、元ポストを掲載）

https://x.com/youtoy/status/1837901317291102301

https://x.com/youtoy/status/1857461062754570695

https://x.com/youtoy/status/1857454571121148313

https://x.com/ogimotoki/status/1836319198857003072

https://x.com/kitposition/status/1829133581433913622

https://x.com/youtoy/status/1698334737688047869

https://x.com/youtoy/status/1595237609558929410

https://x.com/CH1H160/status/1582012388316188673

https://x.com/youtoy/status/1312708071353851905

https://x.com/youtoy/status/1171367903708377088

## 余談： 生き物以外
以下は自分が展示用に作った、生き物・キャラクター以外のものを動かした事例です。

本題とずれますが、余談として。

### ピンポン球と紙の蓋など
こちらは公式が「あそびレシピ」として公開しているものの 1つを見て作りました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/lsZUigV1dD4?si=gcXsGtGa6ibwLL14" 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>

こちらは、大垣で 2022年に開催されたミニメーカーフェアに、toio を使った作品を出展するために作ったものです。

以下は試作段階のものです。

https://x.com/youtoy/status/1597924010968244224

https://x.com/youtoy/status/1597791497759641601

最終的にはダイソーで買ったデコレーションをつけて、そしてフットペダルを踏むと動き出す、という構成で展示しました。

https://x.com/youtoy/status/1602073705609564162
Model(Laravel11)

# 概要
今日はMVCパターンのModelについてみて行きましょう。
Modelは実際のDBからデータを持ってくる部分ですが、
今回は実際DBではなくダミーデータを利用して画面に表示してみます。

# 事前準備
前回のBladeTemplateの使用については下記のURLから確認してください。

https://qiita.com/neomi/items/6f28746902b279e17121

# Modelクラスからデータを取得し、画面へ表示
下記の掲示板のリストが実際はDBから取得された内容です。
今回のこの部分をModel側から参照する形を作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/b111b0fe-dd18-57fb-4b9e-dccb69f503a8.png)

①Modelsに下記のコードを追加します。
[app-Models]に新しいファイルを作成にて[Lists.php]ファイルを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/901b4676-9531-f5c8-e0b8-8ef0cefb6ed7.png)
②以下のコードを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/4f752938-70a0-1ea5-f5fa-948e3313133e.png)
③以下の部分をコピーしてLists.php(Model)へ貼り付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/582f4912-c01c-8b7c-3ff3-b7a7557e6dd0.png)
④Modelページにweb.phpからコピーしたコードを貼り付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/15be5c9b-1f1b-0772-cc1f-24d9aef121ca.png)
⑤RoutesにてModelのデータを取得して画面に表示するため、下記のコードを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/246f20d2-7c6f-63fb-28ba-9c19f306b52e.png)
⑥次のURLからアクセスします。以下のように正しくWEB画面が表示されています。
確認URL：http://192.168.1.65:8000/list
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/ee331eeb-656b-0f60-accc-b51c10754607.png)

# 指定された掲示板の詳細画面を表示

①下記のModelクラスに次のコードを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/6a69bfba-a0bb-aef9-ef6d-791c2571e61c.png)

②RoutesにModelクラスからデータを取得します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/52bc4705-faad-57a1-7831-edef901d3696.png)

③一覧表示にハイパーリンクを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/f7d13f3d-23b1-7a19-c11f-f5fbc53d8d34.png)

④詳細画面へ遷移されたときのページを追加します。
表示されるタイトルと本文のタグです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/cea7bbe8-4a84-5e7d-fe5e-62ec87166ebc.png)

⑤下記のURLから画面を確認します。
確認URL：http://192.168.1.65:8000/list/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/e5a319d5-82ff-87d6-860e-36809cf6e6d2.png)

⑥ハイパーリンクを押下します。
下記のように選択したNo1タイトル内容と本文が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/8d94be1b-3ad4-e454-cf8a-6cc59c41a664.png)

# 終わりに
今日はModelについて試してみました。
Routes,View,Modelなどを利用して掲示板の一覧から詳細画面を表示することができました。今日はここまでです。ありがとうございます。
キャリア6年目今思うこと

# この記事の概要
アドベントカレンダーの記事として何書こうかなーと悩んでいたところ、ちょうど環境の変化やキャリアに悩んでいたことに重なって、いくつか下書き書いてみたけど結局なーんかどれもイマイチ！！という負のスパイラルっぽい状態になってしまいまして…

「それならいっそのこと」と思い、システムエンジニアのキャリアとして投稿主が今現在悩んでいることを率直に書きました。また後半はそんな自分を励ますためにそれっぽいことを書き連ねています。
何が書きたいのかははっきりしないままですが、いつか自分で振り返っても良いし、これを見た誰かの何かの肥やしになるのも良いかーとそのくらいに思っています。

これほど何のためにもならない記事を産み出してしまったか！と思いましたが、頑張ってアドベントカレンダーに載せなければと書いた内容なのでその点この先読まれる方はご容赦くださいませ。

# 私がSEになったきっかけと経歴
今から約6年前、2018年10月に新卒で入社した印刷会社を退職。
一念発起で私は新たなキャリアをスタートしました。
この年プログラミングスクールに通い始め翌年3月から今の会社（エル・ティー・エス株式会社）へと入社。
当時はITコンサルやSEのことも全く知らないような状態でしたが、
そもそも前職の営業からSEという職種を選んだきっかけとしてニーズにあったものづくりやデリバリーに魅力を感じていたことや単純な生産のみではなく顧客や関係者とのコミュニケーションの大切さを感じていたことから、
顧客の課題を上流から一貫して対応しようと考える体制や社風、面談した人たちとの雰囲気などに共感をして入社を決断しました。
また、入社当時まだエンジニア組織の人数も今の3分の1程度で、
これから成長していく会社と共に自分の新たなキャリアを歩んでいくのだと当時は息巻いていました。

入社から約5年半SEとして、フロントエンド開発作業者からパッケージシステムのモディファイや導入カスタマイズ、自社サービスシステムのテストやテスト自動化、情報収集用の新システムのスクラッチ開発、その後の保守運用や開発チームのタスクマネジメントなど自分なりにその場その場で求められる仕事に取り組んできました。

# 今までのキャリアで得られたもの
この5年半で幾らかのWEBアプリ開発の経験は得られました。また、プログラムを書くだけではなくテストや保守運用のためのインフラの理解やドキュメンテーションなども幅広く経験をさせてもらいました。
業務では、要件の整理や設計ついて提案を行い開発後は運用中のシステムに関する課題をバックログで管理しつつ新たな技術をキャッチアップして次のPJへ。そんなPJの合間で社内での活動として、部門会議や部内の情報セキュリティ・ナレッジ共有について改善活動に取り組んでみたり、組織も順調に大きくなってきて育成関連に携わったりもしました。

# 最近思うこと
そんなキャリアの中でふと思い始めたことが2つ。

- 今どうあるべきなのか？
- この先どうなりたいのか？

すごい哲学っぽい書き方をしていますが、要するに自己評価とキャリアプランそれぞれに対する不安です。

# 今どうあるべきなのか？
自分は何ができるのか、やればやるほどよくわからなくなってきます。
今このポジションでこんなことをしていて良いのか、とか、
結局何のスキルもしっかりと習得できていないのでは、とか、
（こう見ると結構ネガティブですが至って平常運転です）
こんなことを悶々と考えている中でもありがたいことにお声かけいただける人々やPJが存在していて求められているものに対して誠意をもって答えていきたいと思うのですが、どこか釈然としない感覚があります。きっと、どこかで自分に対して期待してしまっているのではと思います。
今与えられている仕事は分相応な範囲でしかなく、いつか来るチャンスのために今できる最善を考えて積み上げていくしかないのだと言い聞かせています。
ただし飛び込むべき時には周到に、かつ思い切りよくあるべきと思っています。
これは過去の転職での成功体験です。

# この先どうなりたいのか？
自分はどうなりたいのか、これが明確に答えられるほどの経験がまだできていません。
うーん…どうなりたいんでしょう私…笑

でも、見えているものにしかなれないのかというとそんなことはないはずで、かつ見えていない範囲にも無限に可能性があるはずです。先人たちも苦しみながら自分の居場所を作り出してきたのであろうと思っています。（うん、きっとそう。）
そう思うとめざすべきものは明確な”何か”ではなくて”どう”でよくて、感覚的に自分が良いと思う状態の寄せ集めが結果的になりたい”何か”なのかもしれません。
そのためにも自分を客観視しつつ自分に素直に道を選んでいく必要がある気がします。

# 改めてこの記事を残す意味を考えてみてまとめ
読み返してみたのですが、やっぱり後半はよくわからない自問自答をしてしまいました。
わざわざ人前でやることではなかったかもと思っています。
ただ、私の考察があっているか否かは置いておいて、何かを書き出すことで考えを整理して踏み出すことはできそうです。
思っている以上のことは書けませんし、思ってもいないことは書いてもしっくりきません。
これが率直に今の自己分析なのだろうと思います。

SEという仕事にやりがいを持っていますし、これからも続けていきたいと考えています。だからこそ真剣に悩んだ結果こんな血迷ったような記事として残すことがあってもまあいっか、と納得することにしました。
裁量労働制で働いてみて

一年を振り返る Advent Calendar 2024の17日目です。

これまで裁量労働制で働いたことがなかったのですが、転職してから裁量労働制で働くことになったのでつらつらと感想を述べてみようかと。

ちなみに厚生労働省の裁量労働制の概要。

https://www.mhlw.go.jp/stf/seisakunitsuite/bunya/koyou_roudou/roudoukijun/roudouzikan/sairyo.html

## 残業代がつかない
そうです、当たり前ですがどれだけ働いても残業代がつかないというのを学びました。（残業時間は管理しています。）とりあえずいかに成果を出すかが求められる働き方だなぁというのを実感しました。
もちろん、成果が出ていればコアタイムさえ出ていれば帰れるのですが、そんな業務量でもないので大体の人は成果を出すために日々尽力しているような感じです。

## 年休を取ると時間外から引かれる
年休を取ると当月実施した時間外が減るというのが今までになかった働き方なので学びになりました。

どういうことかというと、例えば一日の定時までの稼働が8時間だとします。

で、一日 3 時間残業し、3 日働きます。そうすると 3 * 3 で 9 時間残業したことになります。

で、次の日に年休を取ると、残業時間から -8 時間されて当月の残業時間が 1 時間になります。

なので風邪をひいてしまったり働けない場合とかは当月の労働時間がマイナスになるという状態になります。裁量労働制ってこういう時間の計算になるのだなぁというのが転職してからの学びでした。

## 成果ってどうやって出すのかめっちゃ考える
転職してからこの1年、業務量に対してなかなか成果が出ないことが増えたのでどうやったら成果が出るのかなぁというのを悶々と考えることが増えました。
正直、新卒と違ってこれまでのやり方が多少染みついているので組織のやり方がパッと入ってこないこともあったりするのと、そもそも得意な技術領域じゃないことや頭の使い方ができていないのもあり、これまでのキャリアの中で過去一苦戦しています。
とりあえずインプット増やして何とか効率化する術がないか探しているものの、そんな余力もなくとりあえずアウトプットドリブンで日々考えながら走り続けて試行錯誤しまくっている感じですが、この辺どうすればうまく成果が出せるのか知りたいところです。

## まとめ
働き方って色々あるんだなぁという学びでした。おわり。
OMCB029A(141)

https://onlinemathcontest.com/contests/omcb029/tasks/11677

$i$行$j$列目に書かれている値が$i×j$であることから、
$1$行目の値の和は、
$1×1+1×2+…+1×9$
$=1×(1+2+…+9)$
$=1×(\Sigma_{k=1}^9k)$。

$2$行目の値の和は、
$2×1+2×2+…+2×9$
$=2×(1+2+…+9)$
$=2×(\Sigma_{k=1}^9k)$。

$1〜9$行目の値の和(つまりすべての値の和)は、
$1×(\Sigma_{k=1}^9k)+2×(\Sigma_{k=1}^9k)+…+9×(\Sigma_{k=1}^9k)$
$=(1+2+…+9)×(\Sigma_{k=1}^9k)$
$=(\Sigma_{k=1}^9k)×(\Sigma_{k=1}^9k)$
$=(\Sigma_{k=1}^9k)^2$
$=45^2$
$=2025$
となります。

立方数とは整数$x$の$3$乗($x^3$)のことです。
$1^3=1$
$2^3=8$
$3^3=27$
$4^3=64$
$5^3=125$
$6^3=216$
$7^3=343$
$8^3=512$
$9^3=729$
$10^3=1000$
$11^3=1331$
$12^3=1728$
$13^3=2197>2025$

すべてのマスの和が$2025$であることから、表せる立方数は$12^3$までです。
(問われているのは$n$マスの和が立方数になる場合の最大の$n$なので、$12^3$を作れば良いわけではありません。)

$12^3(=1728)$が作れるか確認します。
$2025-1728=277$なので、$1728$の最大の$n$を見つけるために$277$の最小の$n$を探します。
$277=81+72+72+48+4(=9×9+9×8+8×9+8×6+1×4)$。
これより少ない数では表現できなさそうです。
したがって$12^3$を作るための最大の$n$は$81-5=76$個です。

$11^3(=1331)$も見ていきます。
$2025-1331=694$なので、
$694>81+72+72+64+63+63$となり、大きい数から$6$つの値を足しても$694$より小さく、つまり$n$は$76$個以上にはならないので、
$n$は$12^3$のときの最大値である$76$となります。