OmniAICreator/Qiita-1.07M huggingface dataset:
VSCodeでも簡単にGitmojiを使いたい！！

## TL;DR

- Gitmojiとはコミットメッセージの先頭に絵文字をつけること
- VSCodeの拡張機能を使えば簡単に始められる
- Gitmojiを使うとコミットメッセージを一覧したときにわかりやすくなる

## Gitmojiとは？

Gitを使ってファイルのバージョン管理をする時にもちろんコミットメッセージを書くと思いますが、これを見やすくする目的で先頭に絵文字をつける文化をGitmojiと言います。

https://gitmoji.dev

![スクリーンショット 2023-12-05 23.28.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628782/f4e106aa-5aa3-25a9-76f1-9da964f455c4.png)

 これをチームで何の絵文字を使うか共通化しておくと、リポジトリのコミット履歴全体を把握しやすくなります。

 ## 環境

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

 <details><summary>環境一覧</summary>
 
Mac本体

 ``` bash
OS: macOS 14.1.1 23B81 arm64
Host: Mac14,2
Kernel: 23.1.0
Uptime: 4 days, 1 hour, 12 mins
Packages: 31 (brew)
Shell: zsh 5.9
Resolution: 2560x1440
DE: Aqua
WM: Quartz Compositor
WM Theme: Blue (Dark)
Terminal: iTerm2
Terminal Font: UDEVGothic35NFLG-Regular 16
CPU: Apple M2
GPU: Apple M2
Memory: 4530MiB / 24576MiB
 ```

 VSCode

 ```
 バージョン: 1.84.2 (Universal)
コミット: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e
日付: 2023-11-09T10:52:33.687Z
Electron: 25.9.2
ElectronBuildId: 24603566
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Darwin arm64 23.1.0
```
</details>

## VSCodeでの導入\

こちらの拡張機能を用います。

https://marketplace.visualstudio.com/items?itemName=seatonjiang.gitmoji-vscode

とりあえずインストールしたらすぐに使えます。

ソース管理タブのコミットボタンの上側にニコちゃんマークがあるのでそれを押すと簡単に目的の絵文字を選択できます。

![%E7%94%BB%E9%9D%A2%E5%8F%8E%E9%8C%B2%202023-12-05%2023.36.17.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628782/fa8f0810-eb76-2263-42e3-7b71536c06b8.gif)

## チームでの共通化

デフォルトだとちょっと絵文字がありすぎて困るので、チーム内でこれだけ！って限定したい時もあると思います。そのような時はこんな感じでsettings.jsonに書けば使う絵文字を絞れます。私たちのチームは結構絞ってこんな感じで運用しています。

``` json: settings.json
{

    "gitmoji.addCustomEmoji": [
        {
            "emoji": "🐛",
            "code": ":bug:",
            "description": "バグ修正・誤字脱字修正"
        },
        {
            "emoji": "✏️",
            "code": ":pencil2:",
            "description": "微修正"
        },
        {
            "emoji": "✨",
            "code": ":sparkles:",
            "description": "新機能・新ファイル追加"
        },
        {
            "emoji": "🎉",
            "code": ":tada:",
            "description": "新プロジェクト立ち上げ"
        },
        {
            "emoji": "⚡️",
            "code": ":zap:",
            "description": "改良・高速化"
        },
        {
            "emoji": "♻️",
            "code": ":recycle:",
            "description": "コード整形"
        },
        {
            "emoji": "💩",
            "code": ":poor:",
            "description": "非推奨追加"
        },
        {
            "emoji": "🗑️",
            "code": ":wastebasket:",
            "description": "削除"
        },
    ],
    "gitmoji.onlyUseCustomEmoji": true,
}

```

![スクリーンショット 2023-12-05 23.45.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628782/e7d4adad-0405-cc3a-72b9-effb1b8d6985.png)

すっきりしました。

あとはREADME.mdとかに絵文字の割り当て方法の詳細を書いて、チーム内で共通認識を持てばOKです。

## しばらく運用してみた感想

チーム内で運用した感じ結構いい感じです。何よりも、メンバーが今日何をやったのか、バグ潰しに時間を食われたのか新機能を作っていたのかが一発でわかるようになるのが非常にいいです。

ただGitmojiをつけ忘れてCommitしてからPushすると非常に萎える（悪目立ちする）のでそこは注意しないといけないなって思ってます。
プログラミングの邪魔だったから親知らず抜いた

# 始まり
仕事中に奥歯に違和感があっていつもなら100ステップ書けるところが50ステップくらいになったので歯医者に行ってレントゲンとった。
そしたら親知らずが変な角度から露出してると判明、町医者じゃダメだとのことで大学病院に行った。
まずレントゲン撮ってから抜くとか破壊(ガクブル)するとか決めるらしい。レントゲンの日はかかりつけの歯医者にとってもらった。

# 大学病院
大学病院に行ってレントゲンを撮った、引っこ抜くとのことで3日後くらいに予約がなされた。裁量労働制をフル活用して午前中抜いて午後仕事しようとした。これこそヘルシーエンジニアリングだ。

# 抜歯
改造されそうな椅子に座って、麻酔をされた。感覚ないっしょｗって馬鹿にされたのでないっすねｗって答えてたら
「ちょっとやるね〜」って医者が
何をやるのかわからんけど口を開けたら
巨大なペンチを突っ込まれて
ゴリッゴリッって口の中で鳴っちゃいけない音がした
痛みはないが音がして、油の刺してないチャリみたいな音が脳の奥で響いた。
そしたらぶっこ抜かれてた、結構デカくてびっくり、ビオフィルミン４〜５こくらいの大きさ。
数針縫われて、引っこ抜いたところを舌でいじるなって言われた。

# 抜歯後
その日は痛いし、頭がガンガンして仕事にならなかった。プログラムは２０ステップしか書けなかった。
ロキソニンもらったけど効いてるようで効いてない。
抜歯した箇所はゼリー状のかさぶたがあるのがわかった、これをいじくり回して取れるとドライソケットっていうのになって2ヶ月くらい激痛らしい。

# 2週間後
2週間は食事とうがい、特に歯磨きを超気をつけた。1週間後に消毒しにかかりつけに行って、抜歯した。陥没した肉があった。

# 1年後
気がついていたら抜歯したエリアのくぼみが消滅した。
だぶついていた肉が徐々に小さくなり自然になった、人間ってすげぇ。

# 今後
レントゲン撮った時に肉の中で歯が横に生えてるタイプの親知らずもあることがわかった。これがおかしい感じになったらハンマーで砕いて取るらしい。本当に出てこないでほしい。
Salesforceのレポート・ダッシュボードの理解に役立つ教材　3選

# はじめに
　Salesforceを導入してからある程度データが集まってくると、データ可視化の需要が高まってきます。
　Salesforceでは、簡易的なデータ可視化手法として、
* レポート
* ダッシュボード
が用意されています。

　BIツールの[Tableau](https://www.tableau.com/ja-jp)や[Power BI](https://powerbi.microsoft.com/ja-jp/)を使う選択肢もありますが、何といっても一つのサービス内で完結するのが魅力です。

　この記事では、レポート・ダッシュボード作成にあたって、理解に役立ったコンテンツをご紹介します。

## 想定読者
Salesforceでのレポート・ダッシュボード作成初心者

# 主な使い道

　拠点内のポータルサイトで、レポート・ダッシュボードのリンクを貼って、営業担当が自由に見られる環境を作っています。

 https://qiita.com/awonohata/items/d04cca2780dcbb1a1a49

## レポート
　主に会議の時に使っています。
　自動で更新されているので、いちいち会議の前にデータ抽出しなくて良くて楽！

* 物件の進捗情報の可視化
* 取引先リスト（取引成立額順）
* ToDoリスト整理

## ダッシュボード
　主に日々の管理に使っています。
　基本的には自動更新されませんが、特定の周期で更新するよう登録したり、メール通知することができます。
　車のメーター風に達成率を表示できたりと、作り出すと結構楽しいです！

* 拠点・個人目標達成率の可視化
* 顧客情報リスト
* 営業所別物件リスト

# Salesforceのレポート・ダッシュボードの理解に役立つコンテンツ3選

:::note info
[Trail head](https://trailhead.salesforce.com/ja/)は、Salesforceが提供している学習サイトです。
無料でSalesforceについて学習することができます。
ハンズオンチャレンジでは、仮想の環境が用意されており、ブラウザ上で完結します。

ちょっと翻訳調で読みにくいのが玉に瑕。
:::

## 1.　[Trail head　Lightning Experience のレポートおよびダッシュボード](https://trailhead.salesforce.com/ja/content/learn/modules/lex_implementation_reports_dashboards)
　まずは基本を抑えるならこちらのモジュール。

 　流れは以下の通りです。
  1. レポートで特定の内容について表を作成する
  2. 1で作ったレポートをまとめて、ダッシュボード上で表示する 

## 2. 　[Fact Marketing　【保存版】Salesforceレポート作成完全ガイド](https://fact-marketing.jp/salesforce/salesforce_report/)

　スクリーンショット付きでレポートを作成する手順を見ることができます。
 
　レポートでは、「数式を追加」して項目に追加することができるので、粗利率などを求めるのに便利です！　詳細は「行レベルの数式を追加」を参照ください。

## 3.　[ビジネスダッシュボード 設計・実装ガイドブック 成果を生み出すデータと分析のデザイン](https://www.shoeisha.co.jp/book/detail/9784798177649)

　本格的に構成から考えたいのならこちらの本。
　特定のBIツールに特化はしていない分、汎用性が高い内容です。

　データがあるから可視化すればいい、ではなく、「何が知りたくて可視化するのか」を突き詰めて考えることの重要性を説いています。

https://www.shoeisha.co.jp/book/detail/9784798177649

# まとめ
　Trail headをきっかけにして、自分なりに勉強して拠点の情報をまとめていたら、「うちの拠点でも欲しい！」と感謝されました。レポート・ダッシュボードはコピーができるので、スモールスタートで小さい拠点から初めて、他の拠点でもカスタマイズできるのも便利なところだと思います。

# 参考リンク

https://www.tableau.com/ja-jp

https://powerbi.microsoft.com/ja-jp/

https://trailhead.salesforce.com/ja/
Marp for VS Codeを導入する：入門編

# はじめに
Markdownでスライド作ることできたら楽だよねえってことで、Marpでスライドを作る環境整えることとしました。
今回は入門編ということで、Marpなんたるかなどはかっ飛ばして環境構築〜とりあえず使うの流れについてのみ書きます。
Marpのサイトはこちら

https://marp.app/

# 前提：PC環境等
+ Mac OS 13.0
+ Visual Studio Code 1.84.2

# 環境構築
Marp for VS Codeの拡張機能をVSCodeに入れる。
以上です！簡単！
リンクからインストールまたはVSCode内で拡張機能を検索→インストールしてみてください。

https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

# 最低限の書き方
1. .mdのファイルを開きます
1. ファイルの頭に以下のように記述します
    ```markdown
    ---
    marp: true
    ---
    ```
    <br>
    
1. それ以下普通にMarkdownで文章作成していくと、勝手にスライドっぽくなってくれます
    ![スクリーンショット 2023-12-05 23.30.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594517/71044742-d914-2963-db33-7ec197c0cb3e.png)

1. 改ページしたい箇所には以下のようにハイフン3つを挿入します
    ![スクリーンショット 2023-12-05 23.33.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594517/d3ba3dd7-993d-d025-a565-77044b3e8c99.png)

# スライドをPDF出力する
1. プレビューではなく、Markdownの方のタブに三角が2つ重なったようなアイコンがあるので、そちらをクリックします
    ![スクリーンショット 2023-12-05 23.34.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594517/fa9f67f0-c760-3ef9-b284-041a49bd20e2.png)

1. コマンドの候補が出てくるので、"Export Slide Deck..."をクリックします
![スクリーンショット 2023-12-05 23.35.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594517/83502ac5-921b-49e9-4cb2-7f6713623d1f.png)

1. 見慣れたファイル保存のウインドウが表示されるので、保存したい場所にPDFで保存します

# おわりに
ただ書いて出力するだけだったらこれだけでOKです！
Markdownがそのままスライドになってくれるので、普段の作業をMarkdownでメモしているとちょっとした進捗報告などサラッとできて便利です。
ここ3~４ヶ月くらい使っていて、Marp関連はまだたくさん書きたいことあるので、これを機会に理解深めながらまとめていけたらと思います！
WebSocketを使おうと思ったけどやめました

## はじめに
この記事は [commmune Advent Calendar 2023](https://qiita.com/advent-calendar/2023/commmune) の7日目です。

## 結論
- イベント駆動型にして処理を非同期化、結果を受け取りたかった
- WebSocketだとうまくいかなかった
- 今回はポーリングを採用した

## 背景
コミュニティプラットフォームを開発しています。
アクティブユーザ数の増加に伴い、技術的な問題が顕在化してきました。

### サービス
誤解を恐れずに超ざっくり説明すると、私達のサービス（の一機能）はSNSのようなものです。
そこにはユーザが作成する「投稿」があり、他のユーザによって「いいね」のようなリアクションを行うことができます。

### 発生した問題
例えばあるユーザが投稿に対して「いいね」を実行すると、様々な機能が連動して実行されます。例えば
- 「いいねした」というデータを保存する
- 「いいね」を実行したことに対して「ポイント」を付与する
- 「ポイント」が一定溜まったときに「リワード」を付与する
- etc...

もともと、これらの処理が1つのAPI呼び出しの中で（しかも同一トランザクション内で）すべて実行されていました。
そのため平時であっても、この重厚なAPIの呼び出しはそこそこ時間がかかるようになってきました。
加えてリクエストが集中すると、データベースのロック待ちが発生し、さらなるパフォーマンスの劣化が顕在化しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618336/4fe4a822-a973-2646-6e5a-75b8f6d6ad27.png)

### アプローチ
「ポイント付与」「リワード付与」といった付随的な機能について、非同期的に処理することにしました。（いわゆるイベント駆動型アーキテクチャと呼ばれる構成です）
これによりトランザクションの時間短縮などでパフォーマンスを向上させることを検討しました。

### 立ちはだかるビジネス要件
付随的な機能である「リワード」が付与された際にモーダルが表示される、というのが現状の仕様でした。
この機能はどうしても落とせないとのことでした。
（ゆえにこれまでは付随機能がすべて完了するまで待っていたのです）

### じゃあどうしたのか
非同期的に処理された「リワード獲得」が完了した際に、サーバサイドからクライアント（ブラウザ）に情報を通知することになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618336/1a3eb2d4-6651-5175-0c2d-a8cd8e3ed2a5.png)

## 本題
サーバからクライアント（ブラウザ）に情報を通知する。真っ先に考えたのがWebSocketでした。

### WebSocketの問題点
WebSocket処理のためのサーバを立て、そこが「リワード獲得」のイベントを受信させ、ブラウザに通知するという構成を考えてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618336/1bb22204-722d-935b-3c74-9666125b0028.png)

しかしこの方法ではうまくいかないことがわかりました。
というのもWebSocketサーバはスケールアウトする必要があり、複数台存在します。ブラウザはそのなかの1台に接続することになります。イベントもWebSocketサーバの中の1台のみが受信します。
すなわちブラウザの接続しているWebSocketサーバが、偶然にもイベントを受信しないと、ブラウザに通知が届きません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618336/8cabc8ea-cf9a-494f-8bc7-5570ede3c814.png)

すべてのWebSocketサーバがイベントを受信する、というアプローチも考えました。しかしWebSocketサーバが受信する大多数イベントは、現在接続されてないユーザのためのイベント、すなわち無駄なイベントです。
そのためサーバ負荷やコストが無駄に発生することになります。

### その他検討した方法

- Redis Pub/Sub
    - Redisが単一障害点になるためNG
- Firebase FCM
    - 特定のベンダーにロックインされるのを嫌ってNG

## 結局どうしたか

古典的ではありますがポーリングを採用しました。

リワード獲得イベントによりメッセージを保存し、クライアントは定期的にAPIにて新着メッセージが無いかを確認します。
その際にタイムスタンプを利用して可能な限りRedisに情報をキャッシュ、DBへのアクセスが最小限になるようにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618336/140ad14c-f489-0235-a8b4-fc01f0de57f0.png)

### ちなみに

ToB向けでコミュニティを開設することもありますが、企業様によってはWebSocketが封じられているケースもあります。これもWebSocketをやめた理由の一つです。
確実なのはHTTP(S)で完結するポーリングなのかもしれません。
C#をゼロから教える

副業でC#プログラミング教育を始めたので、第１期生の指導を記録します。

# なぜC#?

経理や資産管理など企業ニーズがあり、社内Windowsで動くデータベースアプリ（販売管理、資産管理、などなど）の案件ニーズが地味ながら堅調にあることを人材派遣の仕事をしている人から聞きました。
技術的には強く型付けされた言語はソフトウェアの信頼性を高めるといえるので、C#を選びました。

# 教本

* 「[C#のプログラミングのツボとコツがゼッタイにわかる本](https://www.shuwasystem.co.jp/book/9784798067780.html)」
  * この本はオブジェクト指向の専門用語を極力避けているのが特徴です。
  * 本の構成は、Visual Studioの使い方に続いて3つのアプリを作っていく方式になっています。
    *  占いアプリ
    *  数当てゲームアプリ
    *  電卓アプリ

* 「[Visual C# データベースプログラミング入門](https://www.cutt.co.jp/book/978-4-87783-263-6.html)」
  * この本は、C#プログラミングができることを前提に、データベースの基礎を説明し、データベースのコントロールの使い方にフォーカスしています。
  * 作っていくアプリは
    * 住所録アプリ
    * 販売管理アプリ 


# 目標
  * プログラミングを始めたことのない人が、６か月後にデータベースアプリの案件の数人チームに即戦力として参加できるようにする。

# 前提

  * 隔週で１回１時間程度の指導時間とし、全１２回
  * 生徒は宿題をこなす時間は取れるものとする。
  * 教師と生徒はともに教本を購入し、Zoomで１：１オンライン指導をする
  * 調べ方を学んでほしいのでChatGPTは基本的に使わない
  * 講師はC#, Java, C++のいずれかでの実務経験があるものとする（筆者はJava）

# カリキュラム

 * 第１回：
     * 事前課題： Visual Studio のインストール、教本を見ながら占いアプリを作れるようにする
     * 当日：占いアプリを動かしてみる。大吉・中吉などが当確率で出る仕様になっているので、指定確率になるように変更してみる。教師はヒントを出す
 * 第２回：
     * 事前課題：教本を見ながら数当てゲームアプリをつくる
     * 当日：うまく動かなかったので、デバッグ。ステップイン・ステップオーバーも利用して問題個所を特定。数当てアプリの設計を簡単に説明。
 * 第３回： 
     * 事前課題： [yukicoder](https://yukicoder.me/) に登録する。最初は他のプレーヤーのコードを見てもよいが、最終的には最低レベル（★）を自力で解けるようにする。簡単であればレベルを上げる。指導してほしい問題を３問選ぶ。
     * 当日：選ばれた３問を指導する。
 * 第４回（ここから先は予定）：
     * 電卓アプリを自力で作るための設計アイデアを出し合う
 * 第５回
     * 事前課題：電卓アプリを自力で実装
     * 当日：難航した部分に助け舟を出す 
 * 第６回
     * 事前課題：MS SQL Serverをインストールし、教本通り住所録アプリを作ってくる
     * 当日：難航した部分に助け舟を出す 
 * 第７回
     * 事前課題：教本通り販売管理アプリを作ってくる
     * 当日：難航した部分に助け舟を出す
 * 第８回
     * テーブル正規化について教えたい。
 * 第９回
     * テストができるようにしたい 
 * 第１０回
     * バグ報告ができるようにしたい 
 * 第１１回
     * Gitコミットができるようにしたい 
 * 第１２回
     * Gitプルリクエストが出せるようにしたい
Laravelでデータプロバイダを使ったテストで INFO  No tests found. と出てしまう原因

## はじめに
PHPUnitを使用していて、データプロバイダを使用したテストを書いていて、`INFO  No tests found.`と言われかなりハマったので、戒めにさらっと書きます！

## エラー内容
- テストを実行すると`INFO  No tests found.`と出てしまう。

## 試したこと(現状)
- データプロバイダの命名に違いがないか
- タイポはないか
- データプロバイダのアノテーションを消すと動くこと

## 原因
- 結論、問題の原因はデータプロバイダの中で、ファサードを使っていたことでした。
    - データプロバイダはLaravelのライフサイクルの外みたい？です

```php
use Str; // このようにファサードで使うのはNG

private function getDefaultInvalidParams(): array
    {
        return [
            'receiverId' => 999999999999999,
            'message' => Str::random(2001), // ここでエラー
        ];
    }
```


## 解決策
- データプロバイダの中ではファサードは使わない

```php
use Illuminate\Support\Str; // ファサードでuseしない

private function getDefaultInvalidParams(): array
    {
        return [
            'receiverId' => 999999999999999,
            'message' => Str::random(2001), // これでここが動きます
        ];
    }
```

## さいごに
エラーの出力内容が非常にわかりづらかった、、、
ヒーローズ・リーグに応募したNEOダルマオトシのお話

# NEOダルマオトシとは？

[ヒーローズ・リーグ 2023](https://heroes-league.net/)に応募したダルマオトシのアプリになります。
ProtoPediaの[作品ページ](https://protopedia.net/prototype/4347)を見ると動画付きで見ることができます。
アプリ自体はダルマおとしの頭に装着されたM5Atom S3とBluetoothで接続し、3軸センサーで落下を検知してスマホからダルマの声が聞こえるというもの。
開発中で、来年のヒーローズ・リーグでは改良したものを応募したいなと思っています。

# 一番苦労したのは・・・？

ダルマの頭にM5Atom S3を装着するための穴を作ること。
ダルマおとしで使ってる木材ってすげー硬いんですね・・・
こんな感じでノコギリで最初切ってたんですが、全然進んでいかない・・・
![P_20230715_115226.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/b3f150f2-c9fb-2339-3539-96d3377a7a2e.jpeg)

で、親父が見に来てノミを持ってきてくれて、それでようやく削れたといったところです。
この作業で1時間くらいかかりました。
手も痛くなるし・・・ｗ

で、直後にM5Atom S3をはめ込んだ姿。
写真をみてお気づきの方もいるかもしれませんが、M5Atom S3はさかさまに設置しています。
![P_20230715_131547.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/6f46eb82-33e6-6d95-2e58-e3b858bd5ccc.jpeg)
さすがにこの状態では使えないので、こんな感じにしました。
![P_20230715_211303.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/441cc0ae-0b9d-0b61-ff2b-75fd954f67dd.jpeg)

本当は、顔の部分も削って、M5AtomS3のモニターを見えるようにして、顔を表示しようと思っていましたが、硬すぎて断念しました・・・

# 工夫したところ

ダルマおとしの落下を検知して声を出すだけならだれでも思いつきそうなので、BGMにNEOダルマオトシのテーマを流しました。
(ググっても出てこないので意外とやってる人が居ないかも？)
このために作った曲になります。

Sound Cloudでも公開しています。

https://soundcloud.com/6rlg2h42hhj1/ubdidb6dzjod?si=6ec6b3c31f1e4ba7bb3c4747f5d8dc7c&utm_source=clipboard&utm_medium=text&utm_campaign=social_sharing

こちら、きみのためなら死ねるというゲームがあるんですが、メインテーマの曲を聴きながら作りました。
（ベースラインがちょっと似てしまった)

繰り返し聞くことで洗脳効果も抜群です！w

ちなみに、iPadで、KORG Gadgetを使って作曲し、Cakewalkでボーカルを録音しています。
歌はドライブしながら練習しましたｗ


# 使用している技術とか

ProtoPediaの[作品ページ](https://protopedia.net/prototype/4347)を見れば一目瞭然ですが、

- Flutter
- M5Atom S5
- Bluetooth
- [リチウムイオン電池](https://www.amazon.co.jp/gp/product/B086STZ19P/)
- [Type-C充電ボード](https://www.amazon.co.jp/gp/product/B07QTQ46XN/)

とまぁ、ごくごく一般的な組み合わせです。

# 落下の判定について

ソース自体は[Github](https://github.com/project-dev/darumadrop)でも公開しているので、興味のある方は直接ソースを見てもらった方がいいかもしれません。
データのまるめ処理は知識がないので[以下のサイト](https://ehbtj.com/electronics/sensor-digital-filter/)を参考にさせていただきました。

[センサの入力などに使うディジタルフィルタ](https://ehbtj.com/electronics/sensor-digital-filter/)

で、丸目処理した後のZ軸の変化を見て、声を出すようにしています。
ソース見てもらうとわかりますがほんとに大したことはしてないです。

# 今後

今後は以下のことを予定しています。

- 左右の揺れも検知して声をだしたい
- 段ボールでだるまおとしを作成して、念願のM5Atom S3で顔を出してアニメーションさせたい
    - ちょっと電池がどれだけ持つの心配
- 音声のパターンを増やしたい

# 最後に

ヒーローズ・リーグの参加は、賞を狙うというよりはお祭りに参加している感じです。
モノづくりに興味のある方、来年のヒーローズ・リーグに参加してみませんか？
軽深演習 #5 最高到達点(相対的)

### 軽深（かるしん　なんちゃって圏論） Advent Calendar 2023 5日目の記事です。
演習形式をとっているので、ぜひ　回答を試みてください。

### 前提知識　射(矢印)が重要 矢印は目指すを意味すると解釈
圏論では、対象でなく、射が大切です。射にはどんなものがあるのでしょうか？　圏の定義にしたがっているかをある程度、無視して議論すると、目指すことが射です。軽深（かるしん　なんちゃって圏論）なのでそういった立場で議論します。射は、動詞的なものだと思うのが理解の敷居を低くします。

目指す到達点は、最高到達点にしましょう。

前回の記事　[軽深演習 #4 ゼロ戦なみの製品](https://qiita.com/zanjibar/items/b77b704fed95747631eb) で引用されている [ゼロ戦なみの製品をつくるために](https://zenn.dev/zanjibar/articles/232a35bc745298) にある要求仕様は、最高（最高到達点）を事実上明示しています。
**用途：掩護戦闘機として敵軽戦闘機より優秀な空戦性能を備え、要撃戦闘機として敵の攻撃機を捕捉撃滅しうるもの**

図式で書くと
```mermaid
flowchart LR
  A[要求仕様]-->B[最高到達点 敵より優秀]
```

最高到達点は、ゼロ戦の場合には敵より優秀というものです。相対的な最高到達点ですね。月に最初に人類を送るといった絶対的な最高到達点もありますね。

### 演習 敵よりも優秀という相対的な最高到達点の提示があったのでゼロ戦はできました。同様に他の競合製品より優秀なものをつくり、先行製品（サービス）を凌駕したのはどんなものがあるでしょうか？
FlutterKaigi2023にオフライン参加してみて

今回運よく都合がつけれたのでオフラインでFlutterKaigi2023に参加してきました。
その中で感じたことなどを記述したいと思います。

## セッションについて
今回のセッションはどれも興味が惹かれる内容のものばかりで、
ソロ参加していたため、後自分がもう一人欲しいと切実に感じていました:innocent:
そのくらい聞きたい内容が多かったセッションですが、その中でも以下の2つのセッションは特に私個人として学ぶ(考えさせられる)内容が多いものでした。

1. Flutterアプリのセキュリティ対策を考えてみる by batchさん
1. 我々にはなぜ Riverpod が必要なのか - InheritedWidget から始まる app state 管理手法の課題 by ちゅーやん（中條 剛）さん

こちらの発表スライドなどは、@isekiryu(いせりゅー)　さんがまとめてくださっているのでそちらから確認してみてください。
https://qiita.com/isekiryu/items/f1ebf59715507fafc120

特に個人的にセキュリティーに関しては、考えが未熟でもっと真剣に取り組ま掛ければと考えさせられるものでした。ぜひ一度は目を通してみて損がない発表だと思いました。

## 懇親会について
私はソロ参加だったため、少し話して帰ろうと考えていたのですが、
同じモバイルアプリ開発に携わっている人とのコミュニケーションが思いの外楽しく、時間を忘れてしまうほどでした！その中でFlutterの良さや辛さなどを共有できて、貴重な時間を過ごすことができました。

## 最後に
このコンファレンスに参加できて、とても楽しかったです！！！現地参加でしか得られない体験ができました！
スタッフの皆様にとても感謝いたします:bow_tone1:
もし来年も参加できるのであれば、参加してみたいと思ったのとセッションもいつかしてみたいなぁ〜と思いました！(技術的にまだまだですが:zzz:)
![IMG_6025.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351982/d276f1cd-387a-5786-bb58-e4545226fbef.jpeg)

ではまた明日〜〜
【PostgreSQL】PGDGについて

## PGDGとは
「PostgreSQL Global Development Group」の略。
PostgreSQLはPGDGという開発コミュニティで開発されているOSS。

## PGDGの特徴
### 開発メンバ
- 世界中の技術者により、オープンな場で開発されている
- 開発に関わる最終的な意思決定は、開発メンバの中心的な役割を担う、コアメンバが行っている

### メーリングリストの運営
- 様々な種類のメーリングリストを運営
- 議論は主にメーリングリストを使用
- メーリングリストは誰でも参加できる

### WEBサイト運営
- ソースコードやバイナリコードを無償で配布している
- 開発中のバージョンもダウンロードできる
- 公式サイト：https://www.postgresql.org

### イベント開催
- 世界各地でカンファレンスや会合を開催

### 開発
- 近年では年に1度メジャーバージョンアップを行っている
- メジャーバージョンのサポート期間は5年
- ソースの著作権はPGDGが持っている

## 注意
PostgreSQLはBSDライセンスをベースにしたPostgreSQLライセンスを適用し配布されている。
再配布をする際には、著作権表示とライセンス条文を表示しなければならない。
### BSDライセンスとは
商用・非商用問わず、誰でも無償で利用でき、自由に複製、改変できる。
ソースコードを公開する義務はない。
再配布する際には、著作権とライセンス条文、無保証であることをドキュメントに記載することを条件としたライセンスである。
【Next.js】3つの「レンダリングとデータフェッチ」実装パターンを触ってわかってもらえるサイトを作った

## 3つのレンダリングとデータフェッチパターンとは

1. Fetch-on-Render
2. Fetch-then-Render
3. Render-as-You-Fetch

の3つです。それぞれ、

1. Fetch-on-Render... コンポーネントのレンダリング後にデータフェッチが行われる。
2. Fetch-then-Render... コンポーネントのレンダリング前に必要なデータを取得する。
3. Render-as-You-Fetch... データのフェッチ（取得）とコンポーネントのレンダリングを同時に行う。

という特徴に分かれています。

## 作ったもの

パターン別のデータフェッチ時の画面動作と、Next.js v14 AppRouterでの実装を確認出来るサイトを作りました。

https://fetch-and-render-playground.vercel.app/

https://github.com/FAL-coffee/fetch-and-render-playground

![スクリーンショット 0005-12-05 23.07.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/be145f7e-bd32-b3fe-ce0e-02b8b2f61bf5.png)

### 各画面

プロフィールUI・メッセージUI・フォロワーUIの三つで構成される仮想の画面を、実際にHTTP Requestを飛ばしながら構成します。
それぞれのAPIが何秒でレスポンスを返すかを制御出来ます。

画面下部のカードには、パターンの特徴・メリデメと運用ケースを記述しています。

![スクリーンショット 0005-12-05 23.09.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/e914c24f-d4bb-1512-5fb0-cd553cb0c642.png)

また、カード最下部のリンクをクリックすることで、マークダウンで記述された実装を確認可能です。

![スクリーンショット 0005-12-05 23.12.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/0a2fa92a-410e-ae3e-1ab6-ee573be1827b.png)

リポジトリも公開しているため、実装を全てご覧いただけます。

### APIについて

画面で使用するAPIはNext.jsのAPI Routeで実装されており、またI/Oを全てサイト内から確認出来ます。

https://fetch-and-render-playground.vercel.app/api-info

![スクリーンショット 0005-12-05 23.14.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/869c2099-9f44-f855-430e-3a3d065bd0f5.png)

### 技術要素

https://fetch-and-render-playground.vercel.app/technical-elements

![スクリーンショット 0005-12-05 23.15.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/ad25a6aa-fe26-d46a-bdae-b015b4566bc0.png)


### 参考サイト・資料

https://fetch-and-render-playground.vercel.app/reference

![スクリーンショット 0005-12-05 23.15.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/08aaa826-7083-a946-f11b-b430d6f07842.png)

### 最後に

至らぬ点・間違っている点があれば、コメントやissueにてご指摘いただけると非常にありがたいです。

よろしくお願いいたします。
TrueNASもいいけどWindowsのファイル共有も便利だった　5分でできるファイル共有の設定方法

# はじめに
えか太郎です。JK（情報大好き高校生）です。TrueNASが動いていた自宅サーバーの電源ユニットが死んだので稼働中のWinodwsのファイル共有でNASを作ります。

# 「ファイル共有」と「TrueNAS」の違い
多少の差はあれどどちらもできることに大差はありません。しかしファイル共有はコンピュータ上にフォルダを作るので新しくPCを用意したりストレージを買う必要がないため導入に至るまでのコストは安いと考えることもできます。
### ファイル共有
windowsの標準機能の一つ。フォルダーを同ネットワークないからアクセスできるようにする（要するにNAS）。
windows標準機能なだけあってOSをインストールする必要がなくすぐに設定できる。
メインPCで立ててもメインPCとしての役割はそのまま果たせる。


### TrueNAS
NASにのみ特化したLinux。一応マイクラ鯖を立てたりほかにもいろいろ実行できるが。RAM8GBとSSD推奨だし、OS用とNASのデータ保存用で2つ以上ストレージが必要で導入コストは少し高め？USBからブートして運用することもできる。

# 導入方法
### 動作環境
* Windows10（on HDD)
* 第六世代i5
* メモリ８GB
* 共有用の1TBのHDDを増設


HDDを増設するなどなにか構成を変更する場合はあらかじめ各自で準備しておいてください。私も１TBのHDDを増設しておきました。またフォーマットしてドライブとして割り当てておいてください。私はDドライブとして設定しておきました。
## 手順1：フォルダーを作る
![スクリーンショット (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3120367/955ac69b-168f-1739-930f-14f5452e9212.png)
好きなところにフォルダーを新規作成してください。ファイル名も各自好きなものに設定してください。
## 手順２：共有設定をする
![スクリーンショット (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3120367/64036f95-08c9-6e09-6272-2fdf9d53498f.png)
手順１で作成したフォルダーを右クリックしてプロパティ画面＞共有を開きます。
![スクリーンショット (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3120367/e543fd16-30ba-91d3-35e8-d54710ae0a9b.png)
「詳細な共有」を開きます。
![スクリーンショット (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3120367/f309e0a4-a16f-28b1-f21d-a43eef929dab.png)
このフォルダーを共有するのチェックマークを入れます。



## 手順3：アクセス権限を設定する
![スクリーンショット (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3120367/f309e0a4-a16f-28b1-f21d-a43eef929dab.png)
アクセスの許可（P)をクリックします。そして共有名を設定してください。わたしは適当に「NAS」にしておきました。

![スクリーンショット (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3120367/c6926794-ae4e-cdf9-b15b-3414861a7fd9.png)
グループ名またはユーザー名の「追加（D)」よりユーザーを追加してください。私はここではこのwindowsのユーザー名であるadministratorで登録しています。下部のアクセス許可も許可にチェックマークを入れておかないとファイルへのアクセスができなかったり、編集ができなかったりします。

## 手順４：アクセス方法
インターネットへの接続をプライベートネットワークとして接続するに設定してあるならば「エクスプローラー」＞「ネットワーク」の中に自動で表示されます。ルーターやAPも表示されますので間違えないようにしてください。まあ、IPアドレスが出るのでわからないことはないと思いますが。
それ以外だと「エクスプローラー」のパンくずリストのところに「￥￥NASのIPアドレス￥共有名」でもアクセスできます。
## 追記：IPアドレスの固定
前述したようにアクセスするときにはIPアドレスが必要です。しかしIPアドレスはDHCPによって時々勝手に変わります。IPアドレスが変わるたびにアクセスできなるのはあまりにも非効率的ですIPアドレスの固定は設定のネットワーク設定で自動から手動に変更できます。固定方法の詳細は別記事または各自で調べてください。

# 導入した感想
何も購入することなくわずか5分で導入できたので非常に敷居が低いといえる。ファイルを共有する以上のことはできないが普段使い慣れているUIで設定ができるのは非常に魅力的だと思います。RAIDのミラーリングやストライピングの設定はTrueNASのほうがサクサクできた（windows君は何で設定アプリだけですべての設定ができないんですかね？）
# 結論
どうしてもTrueNASがいい理由がなければお手軽なWindowsのファイル共有で十分だと思わます。しばらく使ってみてその感想の記事も書くと思います。
仮想パワハラ上司と戦おう

## 1. 社会人として大切なこと
企業に勤めるようになると自分が思っていたより多くの
パワハラ上司がいます。
そもそも存在がパワハラの上司もいます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3554996/f01425f9-3105-40b4-2faa-166872157fe7.png"width="500">
そんな上司たちから仕事を振られすぎて困ってしまうのが新人の常です。

社会人になってから最も重要なスキルの１つは
いやなことをはっきりと伝える

**断るスキル**

です。


## 2. Web上でのスキル獲得トレーニング
とはいえ実際に仕事を振られたときに
本物の上司を前に「いやです」とは言いづらいと思います。
なので家でこっそり練習ができるようにWebページを作りました。

実際にできたものはこちらです。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="vYbvXZR" data-user="Yokki-K" style="height: 300px; 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/Yokki-K/pen/vYbvXZR">
  パワハラ上司との仮想バトルフィールド</a> by Yokki K (<a href="https://codepen.io/Yokki-K">@Yokki-K</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

上司は「これお願いしていい？」と気軽に仕事を頼んできています。

それに対して
「はい」と答えて若手社会人としての生き様を全うするか
「いやです」と答えて上司と戦うかはあなたの自由です。

PCでもスマホでも音声を拾うと
上司から返事があります。

スマホからはこちらのQRコードにアクセスしてください。

![スクリーンショット 2023-12-05 224123.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3554996/b3f3715e-e5fb-3d95-79c7-e51aab4784d5.png)


## 3. 実際に使っている様子
動作としては音声を聞いて文字列を認識し
それに応じてあらかじめ決めてある
レスポンスが得られるようになっています。
今回は２種類の文字列にしか対応できておりません。

実際に使ってみた様子を動画でご覧ください。
非常にシンプルです。

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

実際に友人に使ってもらいました。
使ってもらったところ
「これじゃあ、いやですって言ったらだめみたいじゃん」とのこと。
そうやって「いやです」って言いづらい空気の中で
「いやです」と断る練習をしてもらう意図だったんですが
うまく伝わりにくいようです。
「クイズ形式でいろいろなコンテンツを作ったら面白そう。」
との激励もいただきました。

## 4. まとめ
JavaScriptの部分は参考記事に簡単な改変を加えて作りました。
CodePenサンプルのCSSを使いたくて無理やりランダム画像を入れ込んでしまいました。
ページをすべて確認するのにかなりスクロールを要すると
ユーザーとしてはわかりにくてストレスフルなものになると
作ってみて気づきました。
CodePenで複雑なWebサイトを作ってみたいなと夢を見ることができました。

最後までお読みいただきありがとうございました。

**参考記事**

https://qiita.com/yoyoda/items/742ee4d0f80fca5e3d16
ttkbootstrapのカレンダーでハマったメモ

### 問題点の概要
tkkbootstrapはBootstrapのスタイルをtkinterで活用できる素晴らしいライブラリだが、カレンダーを使用する時に、従来のメソッドが呼び出せなくてハマったメモです。

### 完成形
先ずは、以下は完成形を示す。
ポイント１：cal(カレンダーUI変数をグローバルにする）
ポイント２：cal.entry.get()を使用すること

ハマったポイント：get_date()メソッドが使用できないこと

```python
# 表示用関数
def print_sel():
    global cal
    val = cal.entry.get()
    print(val)

# カレンダーUI
cal = ttk.DateEntry(bootstyle='darkly', dateformat='%Y/%m/%d')
# Bindを付けました
cal.bind("<<DateEntrySelected>>", print_sel)
cal.pack()

# 選択実行用ボタン
b2 = ttk.Button(root, text='日付を選択', bootstyle="info", command=print_sel)
b2.pack(padx=5, pady=10)
```

作成したUI
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576081/d7624f26-9997-99a1-e687-f2ebb8b5d46c.png)

### 反省点
Pythonでは、いろんなライブラリが出来上がる（継承する）過程で、メソッド名を変更されることはあるので、ピンポイントで見つけるのは少し難しいかもしれません。
M1,M2のMacと従来のMacのOSの違い

# 1. 背景
私用のM2MacにSpring Tool Suite(STS)をインストールしようとしたところ、「MACOS ARM_64」と「MACOS X86_64」のどちらを選択すべきかわかりませんでした（下図参照）。
インターネットで調査した結果、両者の違いはCPUのアーキテクチャにあり、M2Macの場合は前者を選択すべきことがわかりました。
この記事では、このARM64やX86_64についてより詳しく調べた内容をまとめます。

![スクリーンショット 2023-12-05 22.38.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648527/97503482-827a-cb30-9ef4-2b15cadd5c86.png)

# 2. CPUとは
CPUとは中央演算処理装置（Central Processing Unit）のことです。CPUはコンピューター内で計算や処理を行う主要な部品であり、結果をメモリに書き出します。

# 3. CPUアーキテクチャとは
CPUの内部構造や機能、命令セットなどに関する設計の原則や基本的な概念を指します。CPUアーキテクチャはデバイスや用途に対応するように設計されており、それぞれ特有の特徴があります。

## 3.1 x86アーキテクチャ
x86アーキテクチャは、主にIntel製のデスクトップPCやサーバーPCで使用されており、多くの複雑な命令を持っていることが特徴です。

## 3.2 ARMアーキテクチャ
ARMアーキテクチャは、主にスマートフォンで使用されており、シンプルな命令セットでエネルギー効率が高いことが特徴です。

# 4. Macに用いられているCPUアーキテクチャ
M1,M2 Macに利用されているCPUアーキテクチャはARM64が搭載されています。
それ以前のMacにはIntel製のx86が用いられていました。

# 5. コマンドを用いてCPUアーキテクチャを確認する方法
操作中のMacが使用しているCPUアーキテクチャを確認する手法には、下記のコマンドがあります。

```shell
uname -m
arm64
```

# 6. 結論
Spring Tool Suite（STS）をM2Macにダウンロードする際には、MACOS ARM_64を選択すべきことがわかりました。
他のアプリケーションをダウンロードする際にも、ぜひご参考にしてください。
Okta - テンプレートアプリ作成での留意事項（昨日の続きから）

# はじめに

昨日、Copy CSS Selector を使って Microsoft Advertising のOktaアプリを作成しましたが、パスワード入力画面でパスワードが入力されませんでした。
今日は、この問題を解決します。

# 昨日の続き
## 原因

いきなりですが、今回パスワードの入力が行われなかった原因は「パスワードページのURL」です。

ひとまず、今回アプリに設定したパスワードページのURLを確認してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/1b82d6ae-fa24-d5af-1f66-bff677845ba7.png)

文字で記載すると以下です。
`https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=16&ct=1701779069&rver=7.3.6963.0&wp=MBI_SSL&lc=1041&id=288120&lw=1&fl=email%2cflname&uaid=0196bd3bb63e426798766ec71196c0e9&username=xxxxxxxxxxxxxxxxxxx&wreply=https%3A%2F%2Fui.ads.microsoft.com%2Fcampaign%2Flogin%2Flive`

では、次にOktaアプリからログインしようとした際のパスワードページのURLを見てみます。
`https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=16&ct=1701782396&rver=7.3.6963.0&wp=MBI_SSL&lc=2057&id=288120&lw=1&fl=email%2cflname&uaid=3713342efd844b18b5e3040cfec8e6d3&username=xxxxxxxxxxxxxxxxxxx&wreply=https%3A%2F%2Fui.ads.microsoft.com%2Fcampaign%2Flogin%2Flive`

この二つを比較すると、微妙にパラメータ部分（？以降の部分）の値が異なっていることがわかります。
つまり、Oktaがパスワードページのだと思っているURLと実際のURLが異なるため、プラグインが反応せずにパスワードが入力されなかったのでした。


## 対応

じゃぁどうしたらいいのか。
簡単です。Oktaに登録したパスワードページのURLからパラメータ部分を削除してください。
こんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/fe474ce8-ea36-3d11-5a67-9281d2c11337.png)

## 動作確認
エンドユーザーダッシュボードから Microsoft Advertising アプリを選択。
- ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/cd9b6eda-de4d-eda0-89e6-950700ad5497.png)

IDが入力されて次の画面へ
- ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/d52021cd-3c22-8593-e6b4-8d68283af1d2.png)

パスワードが入力されてログイン処理が実行されました。
- ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/3095cd12-47a2-8ec2-3df7-4621895f2402.png)

## 留意事項1

今回のようにIDとパスワードを別画面で入力させるようなサービスの場合、パスワードページのURLがアクセスごとに自動生成されるものが多いです。
CSSセレクタの指定は間違ってないはずなのになぜか動作しない場合は、URLに注意してみてください。

# CSSセレクタが正しくない場合

今回の例ではパスワードページのURLが原因でしたが、CSSセレクタが原因でログインできないこともあります。
本当はそのような例を出したかったのですが、どのサイトだったかまで思い出せませんでした。

ただ、一応Copy CSS Selectorを使わない場合にどうすればよいかも記載しておきます。

## Chrome拡張機能を使わないCSSセレクタの指定方法

Chromeでサイトを開き、対象の項目を右クリック > 検証 を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/a4e14d48-b6cc-53ed-fb65-58c3b790a23d.png)

こんな感じで開発者ツールが起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/3cf0363b-05b7-805d-db29-4a9808c0dde3.png)

この中から以下のようにidやnameを指定します。
いずれでも問題なく動作します。
- id
    - `#LoginModel_Username`
- name
    - input[name="LoginModel.Username"]

## 留意事項2

突然ですが、ログインボタンを右クリック：検証から確認して、以下のような情報が表示された場合どうしますか。
なんか使える情報なさそうですよね...
ちなみに黒で塗りつぶしている部分にサービス名が入っていて、実際に使われているサービスです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/e93fe08d-1539-e4a9-b154-db7c87e0f0b0.png)

このとき私は input[type="image"] を指定してログインできるようになりました。
ログインボタンの他に type="image" を使用している項目がなかったため動作したのだと思います。

何が言いたいかというと、あきらめずに試行してみてください。
試しにやってみると意外と動くケースもあります。

# さいごに

テンプレートアプリから作成するようなサービスの場合、実際に動くかどうかは画面の作りに左右されます。
頑張っても本当に動作しないケースもありますが、意外と何とかなるものが多いのでいろいろ試行錯誤してみるとよいと思います。
今日はここまで。ありがとうございました。
【PostgreSQL】createuserで新しいロールを作成してみた

## createuserって？
PostgreSQLの新しいユーザアカウントを作成するよ。
SQLコマンドの`CREATE ROLE/CREATE USER`と同じことをしているようだ
だけど、psqlでPostgreSQLにログインしないで使える
まずは構文を確認しようか

## 構文
`createuser [接続オプション] [オプション] [ロールf名]`

オプションもあるのか、確認しよう

### オプション
| オプション | 説明 |
| :---: | :--- |
| -P<br>--pwprompt | パスワードを設定する |
| -s<br>--superuser | 新しいユーザをスーパーユーザとして作成する |
| -d<br>--createdb | データベースの作成を許可する |
| -r<br>--createrole | 新しいユーザの作成を許可する |
| -l<br>--login | ログインを許可する（デフォルト） |
| -S<br>--no-superuser | 新しいユーザをスーパーユーザにしない（デフォルト） |
| -D<br>--no-createdb | データベースの作成を禁止する（デフォルト） |
| -R<br>--no-createrole | 新しいユーザの作成を禁止する（デフォルト） |
| -L<br>--no-login | ログインを禁止する |

大文字は禁止系なんですね
新しいユーザアカウントを作成できるのは、スーパーユーザとCREATEROLE権限があるユーザのみ
たしかに誰もが自由にユーザ作成されたら管理も大変だよな

早速`createuser`を使ってユーザを作ってみよう

## 使用例
とりあえずtestユーザを作ってみよう。
パスワードも検証だからtestにして、スーパーユーザにしたくないから`-S`をつけてと。

``` bash
-bash-4.2$ createuser -U postgres -P -S test
新しいロールのためのパスワード: 
もう一度入力してください：
パスワード:
```

特に完了したことはでないのか。
そしたら一覧で作成出来たか確認してみよう。

``` bash
-bash-4.2$ psql -U postgres -c "\du"
ユーザ postgres のパスワード: 
                                              ロール一覧
 ロール名 |                                    属性                                    | 所属グループ 
----------+----------------------------------------------------------------------------+--------------
 postgres | スーパーユーザ, ロール作成可, DB作成可, レプリケーション可, RLS のバイパス | {}
 test     |                                                                            | {}
```

おぉ、出来ている。
わざわざPostgreSQLに入らなくても作成できるのは楽だな。
実務にも活かせそうだ。
[gitlab]2FA有効　パーソナルアクセストークン更新方法


 # [GitLab]パーソナルアクセストークンの再設定方法

gitlabで２FAを有効にしていてる場合、パスワードの代わりにパーソナルアクセストークンの発行と設定が必要です。

アクセストークンの有効期限が切れた時に
「あれ？どうやって再設定するんだっけ？」
って２回もなったので、流石に備忘録として記事に残しておきます。


## ステップ1: Git認証情報のクリア

まず、既存の認証情報をクリアします。
認証情報をクリアすれば、git pull とか pushした時に新たに入力を求められるようになるはず。
使用しているOSに応じてコマンドを変更してください。

### Windowsの場合

```
git credential-manager-core erase
```

または

```
git credential-manager erase
```

### macOSの場合

```
git credential-osxkeychain erase
```
入力後、ターミナルが入力待ちになるはずなのでこちらを順に入力
基本的にコピペでOK
 
```
host=gitlab.com
protocol=https
```

### Linuxの場合

`git-credential-cache` または `git-credential-store` を使っている場合、関連するファイルを削除するか、`git config` を使って設定を変更します。

## ステップ２:パーソナルアクセストークンの再発行方法

GitLabのパーソナルアクセストークンの再発行手段も一応記載しておきます。

1. **GitLabにログイン**: まず、[GitLab](https://gitlab.com/users/sign_in)にログイン

2. **ユーザー設定へのアクセス**: 右上のプロフィールアイコンをクリックし「設定」を選択。

3. **アクセストークンのセクションへ移動**: 左側のナビゲーションバーで「アクセス トークン」をクリック。

4. **新しいトークンの作成**: 「新しいパーソナルアクセストークン」セクションに移動し、必要な情報（名前、有効期限、スコープ）を入力します。スコープは、必要なものを選択してください。

5. **トークンの生成**: 「トークンを作成する」ボタンをクリックし、トークンを発行。

6. **トークンのコピーと保存**: 表示されたトークンを保存（一度しか表示されないので注意）

## ステップ３: 新しいトークンの使用

次に、`git pull` や `git push` などのGitコマンドを実行。
　実行したタイミングでユーザーidとパスワードの入力が求められます。

- **ユーザー名**: GitLabのユーザー名を入力。
- **パスワード**: 新しいパーソナルアクセストークンを入力。

## あとがき
以外とgitlabの記事が少ない。
こんなことでいちいち時間食うのはめんどくさいので、皆さんもぜひ活用ください〜
```
git pull https://oauth2:[アクセストークン]@gitlab.com/hoge/hogeoge.git
```
認証情報をリセットした後にこんな感じでpullすると同時に更新もできたりするので、もし上記のやり方でできなかった場合はこちらをお試しあれ！！
Nutanix Sizer上で既存環境へのノード追加をシミュレートする(2023/12時点)

## Sizerで既存環境の機器構成を入力する方法

ちょっとググったのですが、検索結果に出てこなかったので備忘録的にメモ。


### ①Sizerで+Create New Scenarioをクリックして新規シナリオを作る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635867/5f1431d0-ac96-5447-e70d-33b3bb0762c5.png)


### ②Upgrade SalesにCheckを入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635867/f7bb3859-7cd9-8e5d-8227-161e6885731f.png)
旧ライセンスのノードを追加するときはLegacy、新ライセンスのノードを追加するときはPortfolio2.0を選ぶとよい。

### ③Workloadをインプットする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635867/0a9e3a65-7c80-f47c-8873-7f9f41e2ba1b.png)

ここはいつも通り入力。ざっくりPrismで利用状況を見るなりCollectorで情報を取るなりして、既存環境でどれくらいリソース使っているかを入力してあげます。Save & Review Clusterボタンを押して次へ。

### ④Manualモードで +Add Manuallyをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635867/5ec43fa4-7020-5f28-bda7-5d53810a95fd.png)
下の方にスクロールすると出てくる青いボタンです。画面上部の赤色エラーメッセージは気にせず。

### ⑤Add Model画面で既存環境の機器構成を入力する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635867/8fca28b9-737a-11c9-24ed-0da9da68826e.png)
Modelタブから既存のモデルを選択し、ノードの台数、CPUの型番やRAM・Diskの搭載量・NICなどなど入力していきます。既存環境の機器構成が分かるパラシー等あるとスムーズ。
画面下の方のAdd→Applyボタンを押して機器構成を決定。

### ⑥Existingタブがついた機器構成が出てくる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635867/8a58cb34-65e7-aed4-e3a5-c2e32601d7c3.png)
NX-1075S-G7のとなりに既存環境であることを示す[Existing]が出てきます。これで既存環境の機器構成をSizer上で再現できました。


## ノードを追加してみる
Sizer上で既存環境が再現できたので、新しめの世代のノードを入れてみます。
既存環境へのノード追加が楽！というのがNutanixの大きな特徴でもありますので、それをSizer上で表現してみます。

### ①Cluster-1のModify→Add ModelからAdd Manuallyをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635867/69bef1a8-e18c-3be4-f22c-1c75d9caa519.png)


### ②追加する機器構成を入力する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635867/bd0da047-21bf-0459-206d-6871ddaa0bd7.png)
今回はNX-1075S-G8を3台追加してみます。
This model is already part of the existing cluster environment.のチェックボックスは外す。これがチェックされていると[Existing]タブがついてしまうため。

### ③NX-1075S-G8を追加するシナリオを作成できました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635867/bb4813d1-fd39-f55f-52d6-8ca099ac3258.png)
G7が3ノードで稼働している既存環境に対して、G8を新たに3台追加するシナリオを作成できました。

## Nutanix Sizer

Nutanixが提供しているサイジングツール。
Excelでの手計算をせずとも、必要なリソース情報を入力していけば最適な機器構成を提案してくれるとても便利なツールです。なお当方はExcelでのガチなサイジングはやったことない（研修でやったくらい）なのでイマイチ便利さを実感できなかったのですが、百戦錬磨の方々のお話を聞くとSizerがあってよかった・・・と思わずにはいられません。
OSの違いによるショートカットの差


# はじめに
筆者の作業環境は、以下のようにOSのサラダボールとなっており、コピーアンドペースト(`ctrl + C` → `ctrl + V`※Windows)のようなほとんどのソフトウェアで共通のショートカットがOSによって異なるため今回の記事でまとめます。


- 仕事: Mac
- 自宅のデストップ: Windows/Linuxデュアルブート
- イベント時など出先で使うLaptop: Linux(Windows上のVirtualBoxで動作)

WindowsからMacに移行する方、Linuxのターミナルへコピペしようとしている方の参考になれば幸いです。

## 注意事項
筆者が元々Windowsを使っていたこともあり、本記事は上記のようにWindowsのショートカット記載します。本記事に出てくるショートカットはTL;TDのルールに則ってLinux, Macで使用できます。ぜひ読み替えてOSごとにショートカットキーを切り替える感覚を楽しんでみてください！！
また、筆者がエンジニアリング作業中に使用するショートカットキーのOS間の対応を、経験的にまとめたものです。そのため、他のショートカットではこの記事とは異なる対応をする場合があるかと思いますがご容赦くだださい。

# TL;TD
- 基本:
	- ShiftはどのOSでも共通
	- Windows/LinuxのAltは、MacのOptionに対応する
	- Windows/Linuxの`Ctrl + 'key'`のショートカット = MacのGUIの`Command + 'key'`
- 例外
	- Macでもシェルのショートカットは`Ctrl + 'key'`
	- Linuxでターミナルでクリップボード系の操作をする際は`Ctrl + Shift + 'key'`


# 1. 同じキーボードを接続した際のキーの対応
ます各キーの物理的な対応についてです。筆者が共通で使用している外部キーボードをWindows/Macに接続した際にどう認識されるかは、以下の表の通りです。
(Linuxに関してはWindowsキーの呼び方が変わる程度なのでWindowsと併記しています。)

|Windows(Linux)|Mac|
|:--:|:--:|
|Shift|Shift|
|Ctrl|Ctrl|
|Alt|Option|
|Windows(Super)|Command|

この内、Shift、Alt/Optionは環境でも比較的同じような感覚で使えます。
- Alt/Option:
	- VS codeの矩形選択の制御(`Ctrl + Alt + ↓ or ↑`)
- Shift: 他のショートカットと合わせて、+αな動作を実施する。
	- タブを開く(`Ctrl + T`)にShiftを足すと、直近で閉じたタブを開く(`Ctrl + Shift + T`)

# 2. MacのCtrlキーの罠
Windows, Linux, MacでCtrlは同じ名称ですが、MacのCtrlキーはWindows/Linuxと同じ感覚で使うことができません。
- シェルのショートカット
	- 実行したコマンドの検索(`Ctrl + R`)
	- コマンドの強制終了(`Ctrl + C`)
	- ターミナルをクリーン(`Ctrl + L`)

などは、MacでもCtrlで実行します。

しかし
- GUIアプリケーションで使うショートカット
	- 編集の保存(`Ctrl + S`)
	- タブの削除(`Ctrl + W`)
	- 新規のタブを開く(`Ctrl + T`)

は`Ctrl`ではなく、`Command`キーを使用します。
例 Windowsの`Ctrl + S` <===> Macの`Command + S`

# 3. Linuxのターミナルでクリップボードを操作する。
`2. `まではLinuxは基本的にWindowsと同じショートカットキーを使えるため説明を省略してきました。しかしLinuxのショートカットキーにはターミナルでクリップボードを操作する際に特徴的な操作が必要です。

- クリップボード系のショートカット
	- コピー(`Ctrl + C`)
	- 切り取り(`Ctrl + X`)
	- 貼り付け(`Ctrl + V`)

これらはLinuxで実行する際にはShiftキーを追加で押すという作業が必要です。
例 Windowsの`Ctrl + C` <===> Linuxターミナルの`Ctrl + Shift + C`

# まとめ
MacではWindows(Linux)がCtrlにまとめられているショートカットが、ターミナル系はCtrlのまま、ターミナル系以外はCommandで行なうと2つのキーに役割が分けられています。
Linuxは基本的にWindowsと同じですが、ターミナルでクリップボード操作を行う際には追加でShiftキーを押す必要がある。
調達と入札

# 調達と入札
調達はITプロジェクトで必要な資源やサービスを外部の供給元から取得するプロセスのこと。
これには、ハードウェア、ソフトウェア、専門的なサービス(例えばコンサルティングやシステム開発)などが含まれる。
調達のステップは以下。
入札は調達の一部のプロセス。

①ニーズの特定
プロジェクトで必要とされる資源やサービスを明確にする。

②仕様書の作成
要求する製品やサービスの詳細な仕様を定義する。

③供給元の選定
適切な供給元を選ぶための市場調査を行う。
入札公告を通じて潜在的な供給者から提案を募集し、提案を受ける(入札)。

④価格交渉と契約
提出された提案を価格、技術的能力、過去の実績などの基準で評価し、選定された供給元との間で価格、納期、品質などの条件を交渉し、契約を結ぶ(入札)。
【SwiftUI】iOS17からグラデーションがアニメーションするようになってた

# はじめに
iOS17からグラデーションがアニメーションするようになってました。

# サンプルアプリ
GIFだとわかりにくいですが、iOS16以前では`withAnimation`ありでも一瞬で切り替わってしまいます。
|~iOS16|iOS17~|
|-|-|
|![Simulator Screen Recording - iPhone 12 - 2023-12-05 at 22.58.14.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/c81b4ede-44b0-4fe8-09f2-04ef82532241.gif)|![Simulator Screen Recording - iPhone 15 - 2023-12-05 at 22.57.10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/86af8c06-17cd-920b-4aab-2ba088e3fa38.gif)|

# 実装
```swift
import SwiftUI

struct ContentView: View {
    @State private var gradient = LinearGradient(
        colors: [.black],
        startPoint: .top,
        endPoint: .bottom
    )

    var body: some View {
        VStack {
            Button {
                withAnimation {
                    gradient = LinearGradient(
                        colors: [Color(red: .random(in: 0...1), green: .random(in: 0...1), blue: .random(in: 0...1)), Color(red: .random(in: 0...1), green: .random(in: 0...1), blue: .random(in: 0...1))],
                        startPoint: .top,
                        endPoint: .bottom
                    )
                }
            } label: {
                Text("変更")
            }
        }
        .ignoresSafeArea()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Rectangle().foregroundStyle(gradient))
    }
}
```

# おわり
めっちゃ小さい改善ですが、嬉しいですね
時間と共に徐々に背景グラデーションが変化していくとかもできそうです。
VSCodeにMarkdown Preview Enhancedを入れるとデフォルトのプレビューボタン消えて驚いた話

# はじめに
拡張機能ちゃんと使いこなせよ！って話なんですが、軽い気持ちで入れてしまって戸惑うみたいなことあると思うので、記事にしました。

# Markdown Preview Enhancedいれるとデフォルトのプレビューボタンが、全く同じアイコンでMarkdown Preview Enhancedのプレビューボタンに置き換わる

こちらが入れる前のプレビューボタン
カーソルを上に置いておくとプレビューが表示できるボタンである旨を教えてくれます。

![スクリーンショット 2023-12-04 18.29.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594517/418702bb-c53e-21c9-8247-059538466076.png)

そしてこれが拡張機能を入れた後のプレビューボタン
Markdown Preview Enhancedの機能を使ってプレビューが表示されることがわかります

![スクリーンショット 2023-12-04 18.22.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594517/2406a687-4acd-ab4c-2326-fe520f6764b8.png)

別機能のアイコンなので当たり前といえばそうなのですが、他のアイコンの並びや機能は全く変わってないから、ちゃんとわかっていないと突然プレビュー結果が変わって驚くかなと思います。

# デフォルトのプレビューボタンを取り戻すこともできる
なんで消えるのかという話なのですが、Markdown Preview Enhancedのデフォルト設定がVSCodeデフォルトのプレビューボタンを隠す設定になっているからのようです。
画像のようにチェックがついています。
VSCodeの設定で"Markdown Preview Enhanced vscode"などと検索すると、当該の設定項目が出てきます。

![スクリーンショット 2023-12-05 22.24.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594517/066701eb-0898-7860-47ac-c7718f91a725.png)

このチェックを外してあげると(VSCodeの再起動必要かも)
大変ややこしいのですが、同じアイコンが2つ並んで表示されます。
![スクリーンショット 2023-12-05 22.29.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594517/bdd6bb2d-68fb-b466-c747-9366d8188b01.png)

左がMarkdown Preview Enhancedのもので

![スクリーンショット 2023-12-05 22.29.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594517/9d0c18d5-015c-9295-8060-52756dc2adb4.png)


右がデフォルトプレビューのものになるみたいです。
デフォルトプレビューの方のアイコンはマウスホバーで見た目が変わりますね。

![スクリーンショット 2023-12-05 22.29.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594517/070c4632-5cd0-bc74-2925-a38aad60b717.png)

# おわりに
Markdown Preview Enhancedをちゃんと使いこなしたいです
Atsroという最新JavaScriptフレームワークを使ってみて感動した話...

# Atsroという最新JavaScriptフレームワークを使ってみて感動した話...
どうも皆さんこんにちは、Dingoです。 最近Astroというフレームワークを使ってポートフォリオを作成してみたのでその体験談をせっかくなのでアドベントカレンダーに載せることにしました。
僕のポートフォリオのリンクを下に載せておくので、「Astroとやらでこんなものが作れるんだなー」ぐらいに見ていただければ幸いです。時間があれば英語ですがぜひご覧ください。


https://snowdingo.github.io/portfolio/

Astroをとりあえず使用してみたい方はこちらから↓

https://astro.build/

## そもそもAstroとは？？？
![astro-logo-dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850578/92df55b6-78ad-0b87-f4dd-7eb896cc0693.png)

Astroは主に**静的サイト**を作成するのが得意なJavascriptフレームワークです。表示速度やビルド時間をとても短くしながらレスポンシブで魅力的なサイトを作ることが出来ます。
細かい詳細やメリット等は下に貼ってあるリンクから確認してみてください。

https://docs.astro.build/ja/concepts/why-astro/

ごちゃごちゃして気難しいテック用語を使わずにAstroの魅力を３つ挙げると....
* **表示速度が速い。** ブログやレストランのページとかを作るだけならReactなどの有名どころを使用するより簡単に手取り早く作成できます
* **マークダウン記述に対応** これが何気に１番驚いたのですが、Astroを正しく使用すればマークダウンでウェブサイトのページが作れます。Astroはマークダウンを勝手にHTMLに変換してくれるので、ブログなどのウェブサイトを作るときも整理しやすいです。
* **使いやすい**　Astroは僕のような他のフレームワークから移行してきた人でも簡単に使えます。コンポーネントやPublicとSrcといったフォルダ管理方法などの他のフレームワークとの共通な点が多いので移行しても今までの努力は無駄にはならないです。

:::note warn
以上は簡単な例ですが、僕も経験が浅く機能を全部知り尽くしているわけではないのでAstroを長年使用している方から見ると違うかもしれませんがそこはご理解をお願いします。
:::

## 実際に自分のポートフォリオをAstroで作成してみた感想
ポートフォリオを作成してみた結果、Astroファンになりました。
「軽くてわかりやすい」
この二つのポイントは僕が求めていた方向性と大体あっていたので良かったです。
この方向性について説明すると、僕はReactを勉強していた時があったのですがReactは動的なウェブサービスなどを作ろうと志していなかった僕にとってReact.jsは「**重いし毎回新しいプロジェクト作った時の流れ作業感が凄いなー**」ぐらいでした。
しかしAstroでは３種類のテンプレートから選べて、さらに流れ作業のようなファイルの削除もせずに済み、フォルダーも簡潔で感動しました。
正直ウェブサービス等の動的ウェブサイトを作成する予定がないのなら有名どころのフレームワーク（Vue、React、Angular）を使用する前にAstroを使ってみてください。

# 最後に
この記事を読んでなんとなく「Astroって凄いんだな～」と頭の中で思っていただけたのなら幸いです。
今後もAstroを使用して色々なものを作っていく予定なので記事も増やしていきます。
時間があればぜひAstroを試してみてください。
最後までお読みいただきありがとうございました。
confluenceのとあるページに添付されたファイルを複数選んで削除する方法

# はじめに
Confluence Server or Data Center限定です。
ページに画像など差し込んだりするじゃないですか。

ファイル添付しますよね。
削除するとってどうしてます？
一個ずつ削除したりしてませんか？？

:::note alert
なんて無駄なんだ！！！！
:::

って思いましたよね。
それの解決方法について書きます。

# やり方
[Confluence 用 WebDAV クライントの設定](https://ja.confluence.atlassian.com/doc/configuring-a-webdav-client-for-confluence-148044.html)

まずこちらにやり方が載っています。Macに付いてだけちょっと解説します。

色んなところはおいておいて、 
**Mac OSX の Finder で Confluence にアクセスする** ってところを見ましょう。
>Finder を使用して、Confluence のコンテンツを表示、管理するには、
>1. Finder で移動 > サーバーへの接続 を選択します。
>1. 次の形式で Confluence の URL を入力します。
>```
>http://<confluence base URL>/plugins/servlet/confluence/default
>```
>たとえば、Confluence URL が http://ourconfluence.sample.com/wiki である場合、次のように入力します。
>```
>http://ourconfluence.sample.com/wiki/plugins/servlet/confluence/default
>```
> 3.Confluence のユーザー名とパスワード を入力し、接続 をクリックします。
> Confluence は Finder で共有ドライブとして表示されます。Cyber​​duck など、サードパーティの WebDAV クライアントを使用する場合、同じ URL で接続できます。

社内情報すぎて見せれないですが、自分が編集できる場所は、ディレクトリごとに表示されます。
Personal spaceもディレクトリで閲覧が可能です。

`フォルダ単位でページを見ることが可能になります`

会社によっては、VPN接続必要だったりするかな。
添付ファイルを一気に削除したい場合は有用です。
ただし、注意点として。

ページには、revision、つまりページ履歴が残ります。
ですが添付ファイルに、履歴は残らないので、削除したら戻せません。
バックアップとってないか、情シスなどに依頼する必要があるでしょう。

操作には注意が必要です。

# まとめ
デザイナさんとかから、画像を一気に削除したいんだが、ぽちぽちクリックするのマジだるい・・って話があったので、調べてみた結果・・でした。
実際には結構有用だったので、試してみると良いかなと思います。
技育CAMP名古屋キャラバンにFlutterを抱えて参加した話

# 前置き
この記事は2023年11月18日に開催された技育CAMP名古屋キャラバンに参加した私の記録です。
この記事から得られる情報はそんなにないと思うので適当に流し見するなり、別の記事読むなりしちゃってください。

# ハッカソンに参加するまで
私「名古屋キャラバンあったら参加しよっかな～」
約二週間後・・・
サポーターズ「名古屋キャラバンやるで」
私「ふぁ！？」

# 制作物について
私が名古屋キャラバンで開発したのは『SNSのような感覚で受動的に本を紹介してくれるアプリ』です。
開発メンバーは即席チームで集まった４人でした。全員違う学年でちょっと緊張しましたね。

# キックオフまで
まぁ、最初は制作物の方向性や使用技術を決定しましたね。んで、その時に主にFlutterを使用するってことが決まりました。私、Flutter触ったことありません！！！なんならTypeScriptしか触ったことありません！！！
会議後はネットで調べるなり、図書館で技術書を借りたりしFlutterの基礎的な勉強を行いました。ほんと図書館で技術書借りれるのはいい時代になりましたよね。

# 事前開発期間
事前開発期間はキックオフ直後の土日で骨組みを完成させ、残りの開発期間で肉付けを行うような形で開発を行ってました。んで、まぁ今回の記事で一番の有益情報？になるかは分かりませんが、こんな警告が出てきました。
```
Don't invoke 'print' in production code.
Try using a logging framework.
```
これはデバッグを行う際にprintを使用して発生したのですが、とりあえず無心でDeepLに突っ込んだらprintを使うのは推奨しないよー、ロギング・フレームワーク使ってみたら？って感じの内容でした。
さて、ロギング・フレームワークとは何ぞや？
いろいろ調べてた結果、loggerというものに辿り着きました。
https://pub.dev/packages/logger
上記のサイトを参考にしながら全てのprintをloggerに置き換えました。
正直、自分あんまりよく理解してないので説明はできません。Flutterに触れる機会があったらまた調べてみます。
とまぁ、事前開発期間２日前までは開発に参加してましたが残りはプレゼンに集中することになりました。

プレゼンですが、私の作成したスライドは一言で表すと「高橋メソッド」です。
最初スライドを作るときには高橋メソッドというものを知らなかったのですが、スライドが完全に高橋メソッドになっていたようです。私が高橋メソッドを選択した理由としてはメリットに**文字がクソデカいから奥の席からでも見やすい**というのがあるからです。今回のハッカソンはオフライン開催であり、席によっては文字が見づらかったりもするわけです。だったら全部の文字をデカくしてインパクト残そうぜっていうことで全ての文字をデカくしました。

# ハッカソン当日
名古屋駅周辺で迷子になりかけましたが学校の先輩に拾われ助かりました。
当日は制作物の仕上げという感じで、UIの改善や機能の追加などを行ってました。当然ですがスライドの調整なども行っていました。企業さんからスライドに対して助言を貰うなどして私にできる限りのことを尽くし、発表に臨みました。ええ、発表中私の足はﾌﾟﾙﾌﾟﾙ。こわいめう。少し噛んだりしましたが特に大きな失敗などはなく終わることができました。

まあ、悔しくも入賞することは出来ませんでしたが東海地方のエンジニア学生と関わることが出来てよかったです。
また、こんな私と共に開発をしてくれた三人のチームメンバーに感謝を。

皆さんのエンジニアライフが良きものとなりますように。
Windowsの共有ドライブ6人目が弾かれる

# はじめに
この記事は、[本番環境などでやらかしちゃった人 Advent Calendar 2023](https://qiita.com/advent-calendar/2023/yarakashi)の12日目です。

https://qiita.com/advent-calendar/2023/yarakashi

# この文章の目的
- 同時接続数は人数ではないと周知する
- 古いPCは害悪であり入れ替えろと警告する

# 経緯
- 部門ファイルサーバー上の１つのデータを職場の6人でネットワークドライブにて共有設定し専用のソフトで読書きしています。

この6人さんから「開くと毎回【ファイルがロック中】とか出て5分くらい止まる！何とかして！」と要望が。

同時アクセスは専用ソフトを介しているので問題無いのですが、止まるの可笑しくない？とソフトのメーカーに問合せしたのですが返答は「その様な事例は聞いたことも無い、調査できない（しない）」とけんもほろろ。

- 対策として件のデータ専用に別のサーバーを立てて負荷分散してみようと考えました。
ここは本来ならばサーバーOSを使うべきですが、予算も無いので余っているWindows10proのPCにデータを置いて共有設定をしネットワークドライブもこちらに。
***
調べるとクライアントOSでも同時接続数に制限はあるが20までOKとあるので6人だったら使えると判断しました。**アッー！**
***
数人にテストしてもらうと「ロックがほぼ無い！」と好評なので本番運用する事にしました。（ほぼ？）

運用開始で大好評、やったぜ！大成功！　　と思っていましたよ

当日**6人目がログオンするまでは。**
6人目さんから「データが見えない」と報告、他の方に聞くと「見えてるよ？」

あれ？

6人目さんのPCではネットワークドライブが無い。張り直し…拒否される。認証エラーか？問題ない。

あれー？

# 原因
- Windows10pro共有の同時接続数は20だが、同時に20人使える訳ではなく、その名の通り接続数。

今回の場合1人で4接続使用、5人で 4x5=20 と使い切っており6人目では制限を超えてしまい接続を拒否られた。

# 対策
後日、接続数に制限の無いWindows Serverを予算をとって導入した。

# 後日談
- 導入後もロックは起こっているぞ？
- クライアントPC全機を刷新したところ解消！
古いPCはドンドン入れ替えましょう、というお話だった。

以上です。ありがとうございました。
re:Invent 2023 re:Cap with AWS Hero in Japan を実施しました！

## re:Invent 2023 re:Cap with AWS Hero in Japan　とは

re:Invent 2023 で、現地参加している 日本の AWS Hero の有志で、日本に向けての re:Cap イベントを行いました。

昨年までは、亀田さんがデイリーリキャップを現地から日本に向けて配信していたのですが、
それがなくなってしまった今年、なんとか引き継げたらいいなーと思ってHeroの有志で企画しました

結果的にはやってよかったです！
話してる自分が一番勉強になりました。色んな人の視点が入って議論が広がって、まさに re:Invent 現地参加してる！って雰囲気が出せたんじゃないかと。

### イベントページ

ドアキはこんな感じです。

https://jaws-ug.doorkeeper.jp/events/166359

イベント自体は、現地時間の17:00スタートで 火・水・木 の3日間の実施しました。
その日の朝の Keynote を対象に、参加できるメンバーで集まってあーでもないこーでもない、をやりました。
私は、1日目の後半は別件があって途中退席してしまったのですが、基本はフル参戦させていただきました。

日本時間だと朝の10時から。朝会とかと被ってないかなーと心配では合ったのですが、連日100名弱の方にきていただけました。ありがとうございます！

![20231205104609.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517555/d8916469-975f-0ab8-dbd3-c3807beb42d5.jpeg)

### 配信のアーカイブ公開

当日は zoom の ウェビナーモードで配信していたのですが、あとでアーカイブ公開を見越してYouTubeにも配信をしており、それが公開されたので、残しておきます。

#### re:Cap その1 (CEO Keynote with Adam Selipsky)

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

#### re:Cap その2 (Keynote with Dr. Swami Sivasubramanian)

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

#### re:Cap その3 (Keynote with Dr. Werner Vogels)

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

### 感想

結果的にすごい楽しかったです。
Adam と Werner 先生に関しては、まぁなんとかなるだろう。と思っていたのですが、
普段MLを触っている人がいなかったため、Swami の回はとても不安でした。

しかし、結果として、何とかなりました。

これが、とても re:Invent らしい体験だったな、と思って。
1日かけて勉強した内容でも、背景や関係性がわからなくてはっきりしないことがたくさんあります。
re:Invent では、毎晩ヌードルアジアなどで開かれている懇親会で、
他の詳しい人と議論していく中で、「なるほど、そういうことだったのか！」という体験がたくさんあります。

この Hero re:Cap でも、複数人で話をしている中で、理解が深まる体験がたくさんありました。
そんな re:Invent の醍醐味のひとつを感じ取っていただけるんじゃないか、と思います。

ぜひ、Keynote を見返すときに合わせてご活用いただければと思います。

今回は Keynote の内容をメインにしています
ちょこちょこ話が出てたりもしてますが、
EXPOとかGamedayとか現地ならではのお話も含めて、他のネタも扱ってみてもいいかな、と思ったりしました
来年も継続してやっていきたいですし、日数も増やしてもいいんじゃないかな！と！

現地ならではの感じを伝えたり、
こんなのを面白いと思った！感動した！
みたいな話も共有していければと思います！
【備忘録】git rm


## 追跡対象ファイルを削除
Gitインデックスから追跡対象ファイルを削除する。
とはいうもののステージングされる。

```
$ git rm -r --cached .
```

## git rm を取り消し
ステージングされた削除対象を戻せばいいだけ。
→ ステージングをまるっと無しにする。
```
$ git reset HEAD
```