OmniAICreator/Qiita-1.07M huggingface dataset:
ユーザーからの問い合わせ対応で大事だなと感じたこと４選

# はじめに
日々の業務の中で社内システムに関してユーザーからの問い合わせ対応をしています。その中で、「いやーこれ大事だな」と思ったことが多々ありましたので、その中でも印象的だった４つを自身への戒めとして綴っておこうかと思います。それが以下の４つになります。

**1. 質問者の言葉の定義を確認する**
**2. システム用語を使わない**
**3. 質問者の目的を把握する** 
**4. 操作マニュアルを充実させておく**

# 質問者の言葉の定義を確認する
曖昧な言葉や用語が飛び交うと、こちらの解釈と質問者の意図が食い違い、解決に時間がかかることがあります。
そのため、最初に「この問い合わせが何を指しているのか」、「質問者が実際に何をしたいのか」を明確に確認することが、スムーズな解決への鍵となります。

たとえば、ユーザーから「パスワードをリセットしたい」という問い合わせがあったとします。この時、この言葉だけでは質問者の要望が、
- 管理者権限でパスワードを初期化してほしい
- 自分でパスワード変更できるようにしてほしい

のどちらなのかは判断がつきません。ですので、ここで早合点するのではなく、要望がどちらを指すのかをまずは確認するべきです。

このように、質問者の言葉に対して、具体的に何を指しているのかを確認することが、スムーズな問題解決に繋がります。

# システム用語を使わない
当たり前のことですが、システム管理者にとっては日常的に使う技術用語や専門用語も、ユーザーには馴染みがない場合が多いです。
システム用語をそのまま使うと、かえってユーザーを混乱させてしまいますので、できるだけわかりやすい言葉で説明することが大切です。
これ、意外と意識しないとついやってしまうので気をつけたいですね。。
例えば以下のようなシチュエーションが考えられます。

ユーザー：
「保存ボタンを押しても反応がありません。。」

管理者：
「サーバー側でタイムアウトが発生しているかもしれませんネ。」

ユーザー：
「(´⊙ω⊙`)」

この場合、以下のように言い換えた方が親切です。

管理者：
「保存が完了するまで時間がかかっているかもしれません。しばらく待ってから再度試してみてください。」

適切な対応をするためには、システム用語をわかりやすい日常の言葉に言い換え、具体的な説明を行うことが重要です。

# 質問者の目的を把握する
問い合わせ内容に対して対応を進める際、表面的な問題だけでなく、ユーザーが**最終的に何を実現したいのか**を理解することが重要です。
ユーザーの目的が把握できていれば、より適切な解決策や代替手段を提案できることがあります。

例えば、ユーザーから「このデータを一括削除したい」という問い合わせがあったとします。
この場合、単に一括削除の機能の可否を確認するのではなく、「何のために一括削除したいのか」を尋ねることで、ユーザーの本当の目的を把握できます。
もしかしたら、古いデータを整理して新しいデータを入力したいだけで、一括削除にこだわっていないかもしれません。
この場合、以下のようにユーザーの目的を確かめるとお互いにとってより良い提案が可能になるかもしれません。

管理者：
「一括削除がすぐにできない場合、不要なデータをまとめて選択して削除する方法や、新しいデータ入力を優先し、後で削除作業を進める方法を提案します。必要であれば、手動での削除作業をお手伝いします。」

# 操作マニュアルを充実させておく
同じ内容の問い合わせが何度も来る場合、根本的な解決策としてマニュアルやFAQを整備することが有効かなと思います。
ユーザーが自力で解決できる環境を整えることで、問い合わせが減少し、ユーザーも管理者もお互いに時間を節約できるというメリットがあります。

（この部分に関しては私自身も課題感を感じているところではあるので、具体的にどのようなマニュアルだとユーザーは読みやすいのか、そもそもマニュアル自体の普及をどう行うべきかなど、今後模索していく所存です。）

# さいごに
以上、問い合わせ対応において特に大切だなと感じたことでした。
ただ聞かれたことに対して答えるだけでなく、相手のことを考えて対応することが大切だなとつくづく感じます。
他にも、問い合わせ対応の際に意識していることや工夫している点があれば、ぜひ教えていただけると嬉しいです！
<script>タグってどこに置く？body終了タグの直前？headタグ内？


# JavaScript をいつ実行させるかは重要です

私が HTML を学習し始めたときには、`<script>`タグは`</body>`タグ（終了タグ）の直前に置くのと、`<head>`タグ内に置くのとで、特に解説なく疑問は感じていたかもしれませんがそういうものかと進んでました。

`<script>`タグにはいくつか属性をつけることが可能で、本記事では`async`と`defer`という属性について解説します。

# まず結論から

#### JS の内容が HTML の表示と関係するなら`defer`を使おう！

#### HTML の表示と関係ないなら`async`を使おう！

かなり乱暴に言うとこんな感じですかね...思いっきり間違っていたらすみません！！！

# scirpt タグの配置について

ではまず冒頭の`script`タグをどこに配置するかについてですが、これについては`<script>`タグが、いつ実行されたいかをタグの配置で制御しているイメージですね。

ブラウザは基本的に HTML を上から順に実行・解析(**パース**)をするそうです。`<head>`タグ内に設置した`<script>`タグの中に`document.getElementById`なんてがっつり DOM を操作するメソッドが入っていたらどうなるのでしょうか？

まだ要素が存在しない状態で DOM を操作しようとすると、エラーが発生する可能性があります。

**属性やら、要素が存在してから実行させる？？何じゃそりゃ**という方は、結論の方法でとりあえず進んで大丈夫だと思います！多分...

属性すらよう分からん！って人は、ひとまず`</body>`（body 終了タグの）の直前に配置したら良いと思います！

# DOMContentLoaded イベントについて

`DOMContentLoaded`とは？MDN から引用すると、

> DOMContentLoaded イベントは、HTML の文書が完全に読み込まれ構文解析され、すべての遅延スクリプト（`<script defer src="…">` および `<script type="module">`）がダウンロードされ、実行されたときに発生します。画像、サブフレーム、非同期スクリプトの読み込みの完了は待ちません。

だそうです。

これをつかって JS を実行させれば、DOM を操作するものについては安心ということですね。

# どうやって全部使い分けるの？

**1**.ページ内の要素を操作するような重要な`<script>`に関しては、`defer`属性を付与して、`<head>`タグに配置する。

=>これにより、HTML のパースが行われた際にパースを妨げることなく非同期に読み込まれ、実行がパースが終わったタイミングで実行されるのでより効果的であるようです。（~~さらに、`DOMContentLoaded`イベントリッスンすることで、DOM が完全に構築された後にスクリプトが実行されるため、安心して要素を操作できます。~~そもそも`</body>`の直前に script を書けば、読み込まれる時点で要素が存在しているので`DOMcontentLoaded`を書かなくても良いようです。）
**例）ハンバーガーメニューやスライダーなど。**

**2**.外部のリソース(Google Analytics や広告用のスクリプト)などは`async`を使う。これも`<head>`タグ内で特に問題なと思います。(`</body>`(body タグ終了直前でも問題はない気もします）
=>`async`タグは非同期に読み込まれ、HTML のパースを妨げませんが、読み込みが完了すると即座に実行され、その際にパースが一時中断されるようです。

という感じでしょうか。

もっとも、ページ内の要素に関わる重要な`script`に関しては`DOMContentLoaded`を使用すれば、HTML のパース後に実行されるので安心ではあります。

ChatGPT に聞いたところ、

> `DOMContentLoaded`は`defer`スクリプトの実行が完了した後に発生するため、スクリプト内で安全に DOM を操作することができます。

ということだそうです。（類似するものに`load`イベントがありますが、こちらについてはまた今度書かせていただこうと思います）

色々と乱雑になってしまいましたが、自分への備忘録として残させていただきます。

~~文章を添削を GPT 様にお願いしたところ、軽い表現が多いですと指摘されてしまい落ち込み中笑~~
datadogのIPリスト(備忘録)

## これは何？
datadogが使用しているIP範囲(リスト)を毎回検索するのが手間なので、リンク集という形でまとめました。

## リンク集
 - AP1
     - https://ip-ranges.ap1.datadoghq.com/
 - US1
     - https://ip-ranges.datadoghq.com/
 - US3
     - https://ip-ranges.us3.datadoghq.com/
 - US5
     - https://ip-ranges.us5.datadoghq.com/
 - EU
     - https://ip-ranges.datadoghq.eu/
 - US1-FED
     - https://ip-ranges.ddog-gov.com/


## 注意点
 - 定期的にdatadog側がIPリストを更新しているため、サイトが更新されたら通知される仕組みなどを持っていると楽
- 使用しているdatadogのリージョンや機能により許可しなければいけないIPが異なるので注意が必要

例)
リージョンがAP1 / 許可したい機能がAPMの場合
```
  "apm": {
    "prefixes_ipv4": [
      "43.206.163.128/25",
      "43.206.164.128/25"
    ],
```

<br>
リージョンがAP1 / 許可したい機能がWebhookの場合

```
  "webhooks": {
    "prefixes_ipv4": [
      "43.206.163.128/25",
      "43.206.164.128/25"
    ],
```


## まとめ
よくIP許可を忘れてエラーが起きるとかあるので気をつけましょう！！
Datadog Agentに脆弱性が発覚した場合の通知

## これは何？
Datadog Agentにて脆弱性が発生した場合、どのように周知および通知されるのかを確認したため、備忘録として記事にします。

## 注意事項
 - 本内容は2024/06に調査及び確認した内容になります。
 - 契約しているサポートプラン及び再販会社により異なる場合があります。

## 確認結果
ドキュメントを確認した限りだと掲載基準などの記載が見当たらず、Datadogサポートへ確認。
以下回答をいただきました。

### 質問1.Datadog Agentにて脆弱性が発覚した場合、公式サイトやメールなどでの周知をされるなどの規定はございますでしょうか。
#### 回答
Datadog Agentに脆弱性が発生した場合、弊社からAdmin Roleのユーザ様へメール及びアプリで通知いたします。

脆弱性通知のクライテリアは、Datadog Agent もしくはアプリケーションがお客様の環境に重大な影響を与えていることでございます。
なお、アプリケーションパフォーマンスの低下については、脆弱性通知に該当しなくご了承いただければ幸いです。
 
また、以下のサイトよりSUBSCRIBE TO UPDATES ボタンをクリックし、Emailアドレスを入力頂くことで障害発生時にメールで通知が受け取れるようになります。
https://status.ap1.datadoghq.com/#
https://datadogintegrations.statuspage.io/
※WEBサイト内でもステータスが確認できます。

### 質問2.CVSS7以上の場合は連絡をするなどの細かい基準はありますでしょうか。
#### 回答
詳細な基準については、確認が出来ませんでした。
ご希望に沿えず申し訳ございません。

## まとめ
Datadog側にて通知をしてくれる場合もあるが、明確な基準はこちら側からは確認することが難しいとの事。
その為、通知されるのを待つだけではなく、ユーザー側にて[脆弱性対策情報（JVN）](https://jvndb.jvn.jp/index.html)などの脆弱性情報サイトを確認する必要があると思われます。

## 余談
Datadogのベストプラクティスとして「Agentの更新は毎月を目標に」というのがあります。
>Datadog は、Datadog Agent をマイナーリリースとパッチリリースごとに、または少なくとも毎月更新することをお勧めします。
https://docs.datadoghq.com/ja/agent

なので、Datadogとしては「情報を周知する前に定期的にアップデートして脆弱性を回避できるように」してくれ方式なのかもしれません。
~~それができたら苦労しないというのは別の話~~
datadogのログ保護対策に関して

# これは何？
datadogのログ管理(Log Explorer)に関する保護対策(改ざん防止、暗号化、長期保存等)を確認する機会がありましたので、記事にします。
# 確認結果
## 暗号化 
インデックス化されたログに対して対称暗号化保存 (AES-256) を使用し暗号化を実施
>Datadog は、インデックス化されたログに対して対称暗号化保存 (AES-256) を使用します。インデックス化されたログは、ユーザー定義の保存期間が過ぎると、Datadog プラットフォームから削除されます。
https://docs.datadoghq.com/ja/data_security/logs/
## 長期保存
Datadogの設定またはログアーカイブ設定をすることにより可能
### datadog側ログ保管期間
契約プランにより異なるが、最短3日 ~ 最大180日間はdatadog側にてログを保管することが可能。
※datadogはログ件数と保持期間によりログ保管料金が決まる
そのため基本的には早めにログアーカイブする or datadog側に送るログを厳選するのがコスト的にはベスト
     - datadogログ管理料金
https://www.datadoghq.com/ja/pricing/?product=log-management#products

### ログアーカイブ
AWSやAzureなどといったクラウドにログを無期限で保管することが可能。
そのため、datadogのログ保管期間を過ぎた場合の保管先として利用する。
https://docs.datadoghq.com/ja/logs/log_configuration/archives/

## 改ざん防止
データの改ざん等からデータを保護する対策としては、データ保存時の暗号化による保護、データ転送の禁止、暗号化通信の使用、データへのアクセス制御、アクセスの監視/記録などの対応をdatadog側にて実施している模様。
※ドキュメントから一部引用
>認証済みユーザーによって Datadog サービスに送信されたデータは、機密データと見なされます。このデータは、公共ネットワークを介して送信される際には保護され、保存時には暗号化されます。お客様からの要求があった場合などの一部の例外を除き、カスタマーデータの Datadog 本稼働サービス環境外部への転送は許可されません。

>Datadog と Datadog ユーザーの間で送信されるすべてのデータは、Transport Layer Security (TLS) および HTTP Strict Transport Security (HSTS) を使用して保護されます。暗号化通信が途切れた場合、Datadog アプリケーションにはアクセスできなくなります。

 

>現在、カスタマーデータは米国にあり、そのほとんどはバージニア州にあります。Datadog は、さまざまなポイントで暗号化を使用して、カスタマーデータと Datadog の機密情報を保護しています。たとえば、Encryption At Rest (AES-256 など)、システムバックアップ時には非対称暗号化 (PGP など)、機密情報 (パスワード、アクセストークン、API キーなど) の保護時には KMS ベースの保護、GPG 暗号化などです。

 

>カスタマーデータへのアクセスは、それをビジネス要件とする機能に制限されます。Datadog は、管理目的のロールと権限に対して複数レイヤーのアクセス制御を実装しています。カスタマーデータを含む環境にアクセスするには、多要素認証 (MFA) を含む一連の認証/承認制御を経る必要があります。Datadog は、カスタマーデータへのアクセスに対して最小権限原則と Need to Know 原則を適用し、これらの環境へのアクセスは、セキュリティの目的で監視され、記録されます。Datadog は、管理資格情報とアクセス機構の整合性と機密性を確保するように制御を行い、ワークステーションにフルディスクの暗号とユニーククレデンシャルを適用しています。

 

>Datadog は、重要なインフラストラクチャーのセキュリティ関連イベントを監視するために、オープンソース技術と商用技術をカスタマイズして実装しています。API の呼び出しやオペレーティングシステムレベルの呼び出しなどのアクティビティデータは、一元的に記録されます。それらの情報は複数のカスタムルールに基づいて試験され、不正な動作や承認されない動作が識別されます。ルールの結果はオーケストレーションプラットフォームに送付され、セキュリティチームに直接アラートを送信する、追加の認証を要求するなどのアクションが自動的にトリガーされます。



[セキュリティ(データ保護)](https://www.datadoghq.com/ja/security/?tab=data-security#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%83%BC%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E4%BF%9D%E8%AD%B7)

# まとめ
監視ツールの中でも有名なツールな為、セキュリティもしっかりしているという印象でした。
このような情報が公開されていないと導入提案もしづらい場合があるため、ありがたいです。
電卓を作りながら勉強ー終

お疲れ様です。

今日はお休みですので、久々電卓のエラー改善に立ち向かいました！

# 完成
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="KKOdvOX" data-pen-title="Untitled" data-user="mtzkmy" 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/mtzkmy/pen/KKOdvOX">
  Untitled</a> by mtzkmy (<a href="https://codepen.io/mtzkmy">@mtzkmy</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

早速ですができたものです。見た目は変わっておりません。
前回出ていたエラーは、**計算式を入力し、＝を押すと答えが表示されずエラーがでる**というものでした。
そして、さらに前回の最後に「eval」は回避するというような内容のものを書き、evalの代わりにnew Functionを置いていましたが、結局 new Functionにした関係でエラーが出ていたため、見本通りevalに戻りました　笑
ちなみに出ていたエラーは、**uncaught referenceError return2 is not defined**でした。

# いろいろやりました
GPTちゃんに相談しながら、コードをコメントアウトして実行したり書いたりしてを繰り返し出来上がりましたが、本当に最初に勉強するような内容で作れるんだなーということが分かりました。
（try...catchは忘れてましたが、そんなのもあったなーと思いながら復習しました）

ちなみに catch(e) のeは、errorのeだそうで、エラーの内容ではなく、「エラーが出たかどうかを知る」時に使えるのだそうです。

また時間を空けて、復習のためにゼロからやってみようと思います。
ASP Net Core Razor Pagesで複数レコードのデータバインド（一括更新したい）

ASP.Net CoreのRagor PagesでWindows FormのDataGridViewのように、データを一覧表示した状態で、更新処理をかけられないかなと思いまして、いろいろ調べてみたのですが、なかなかそれらしい記事に出会えず...ChatGPTの力を借りたりしながら、やっと分かりましたので共有です！

データの更新については触れていませんが、PageModelクラスに変更（入力）情報はListで伝搬しています。ステップ実行で止めると、Itemsプロパティが更新されます。
このあたり、MSのチュートリアルに載せて広めてほしい感じもするのですが...世間的にあまり需要ないのでしょうか。。

```html
@page
@model SampleTableInput.Pages.TableInputModel
@{
}
<form class="form" method="post">

    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>名前</th>
            </tr>
        </thead>
        <tbody>
            @for (int i = 0; i < Model.Items.Count; i++)
            {
                <tr>
                    <td >
                        <input type="text" class="form-control my-0 py-0" asp-for="Items[i].Id">
                    </td>
                    <td >
                        <input type="text" class="form-control my-0 py-0" asp-for="Items[i].Name">
                    </td>
                </tr>
            }
        </tbody>
    </table>
    
    <br>

    <input type="submit" value="送信" class="btn btn-secondary" asp-page-handler="Post" />
</form>
```

```C#
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace SampleTableInput.Pages
{
    public class TableInputModel : PageModel
    {
        [BindProperty]
        public List<Item> Items { get; set; } = default!;

        public void OnGet()
        {
            // 初期データを設定
            Items =
            [
                new Item { Id = 1, Name = "Item1" },
                new Item { Id = 2, Name = "Item2" },
                new Item { Id = 3, Name = "Item3" }
            ];
            Console.WriteLine("OnGet Count = " + Items.Count);
        }

        public void OnPost()
        {

            Console.WriteLine("OnPost Count = " + Items.Count);
        }
    }

    public class Item
    {
        public int Id { get; set; }
        public string Name { get; set; } = "";
    }
}
```

参考記事
https://kobarin.hateblo.jp/entry/2017/07/04/172018
VSCodeでnextjsのTurbopackでもデバッグする

# 結論
turbopackに対応したvscodeの`launch.json`がまだ公式ドキュメントに用意されてないのでここに残しておきます。


```json:launch.json
{
  "version": "0.2.0",
  "compounds": [
    {
      "name": "Debug Start All",
      "configurations": ["Launch Chrome", "Start Nextjs"],
      "stopAll": true
    }
  ],
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "/turbopack/[project]/*": "${webRoot}/*"
      },
      "presentation": {
        "hidden": true
      }
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Start Nextjs",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "/turbopack/[project]/*": "${webRoot}/*"
      },
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev", "--", "--turbo"],
      "presentation": {
        "hidden": true
      }
    }
  ]
}
```

※pnpmの場合は、rutimeExecutableとruntimeArgsのワタシ型を変えるとうまくいきます

```json:launch.json
~~ 省略 ~~ 
 "runtimeExecutable": "pnpm",
 "runtimeArgs": ["run", "dev", "--turbo"],
 ~~ 省略 ~~ 
```


# turboモードとは

`next dev`をたたくときの[オプション](https://nextjs.org/docs/app/api-reference/cli/next#next-dev-options)で、`--turbo`を渡すことです。
`next dev --turbo`にするとturbopackを使って早く立ち上がってくれます。


# launch.json


現在の公式ドキュメントに載っている`launch.json`は[こちら](https://nextjs.org/docs/app/building-your-application/configuring/debugging#debugging-with-vs-code)

以下抜粋

```json:launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/next",
      "runtimeArgs": ["--inspect"],
      "skipFiles": ["<node_internals>/**"],
      "serverReadyAction": {
        "action": "debugWithEdge",
        "killOnServerStop": true,
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "webRoot": "${workspaceFolder}"
      }
    }
  ]
}
```
新人エンジニアの読書録 『単体テストの考え方/使い方』 chap.4

今回は、前回に引き続き、「単体テストの考え方/使い方」の読書メモです。
第４章では、良い単体テストを書くための考え方を４つの柱に沿って解説しています。

それでは早速、本文メモへ↓

### 良い単体テストを構成する４本の柱
下記の４項目を意識することが重要である。

- 退行（regression)に対する保護
- リファクタリングへの耐性
- 迅速なフィードバック
- 保守のしやすさ

### 退行に対する保護

退行：＝バグ。なんらかの変更を加えた後に、既存のコードが想定通りに振る舞わなくなること。

通常、コードが大きくなればなるほど、退行が発生する可能性が高くなるため、退行から救い出す措置として「テスト」を用意しなければいけない。

### リファクタリングへの耐性

リファクタリングへの耐性＝偽陽性が生まれづらい性質

偽陽性：嘘の警告。プロダクションコードの振る舞いは正常なのに、テストケースが失敗すること。通常、リファクタリングが行われた際に発生することが多い。

リファクタリングへの耐性が低いテストが行われていると、開発者がテストの失敗に対して真剣に向き合わなくな理、重大なバグによってテストが失敗しても、見過ごしてしまう可能性がある。

偽陽性は、テストコードが対象のコードと深く結びついた場合に起こりやすくなる。そのため、テスト対象コードが観察可能な振る舞いを返すように設計し、その結果のみをテストするようにすると、偽陽性の発生を減らすことができる。

### 迅速なFB

テスト結果のフィードバックが早ければ、その分バグへの対応も早くなる。

### 保守のしやすさ

以下の２つの性質によって測られる

1. テストケースを理解することがどのくらい難しいのか
2. テストを行うことがどのくらい難しいのか


今回の記事で紹介した「４本の柱」を意識することで、より良いテスト（実用的なテスト）を書くことができるそうです。
paiza.ioでc# その6

# 概要
paiza.ioでc#、やってみた。
練習問題やってみた。

# 練習問題
abstractを使え。

# サンプルコード

```

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DesignPatternLearn.AdapterLearn
{
    public abstract class Print {
        public abstract void PrintWeak();
        public abstract void PrintStrong();
    }
    public class Banner {
        private string str;
        public Banner(string str) {
            this.str = str;
        }
        public void ShowWithParen() {
            Console.WriteLine("(" + str + ")");
        }
        public void ShowWithAster() {
            Console.WriteLine("*" + str + "*");
        }
    }
    public class PrintBanner: Print {
        public Banner banner;
        public PrintBanner(string str) {
            banner = new Banner(str);
        }
        public override void PrintWeak() {
            banner.ShowWithParen();
        }
        public override void PrintStrong() {
            banner.ShowWithAster();
        }
    }
    public class AdapterLearn {
        static void Main(string[] args) {
            Print p = new PrintBanner("Hello");
            p.PrintWeak();
            p.PrintStrong();
            Console.Read();
        }
    }
}






```

# 実行結果

```
(Hello)
*Hello*
```

# 成果物

https://paiza.io/projects/Gw7t6PoQC3wr09j9uNGOzg


以上。
paiza.ioでc# その5

# 概要
paiza.ioでc#、やってみた。
練習問題やってみた。

# 練習問題
interfaceを使え。

# サンプルコード

```

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DesignPatternLearn.AdapterLearn
{
    public interface Print {
        void PrintWeak();
        void PrintStrong();
    }
    public class Banner {
        private string str;
        public Banner(string str) {
            this.str = str;
        }
        public void ShowWithParen() {
            Console.WriteLine("(" + str + ")");
        }
        public void ShowWithAster() {
            Console.WriteLine("*" + str + "*");
        }
    }
    public class PrintBanner: Banner, Print {
        public PrintBanner(string str) : base(str) { 
            
        }
        public void PrintWeak() {
            ShowWithParen();
        }
        public void PrintStrong() {
            ShowWithAster();
        }
    }
    public class AdapterLearn {
        static void Main(string[] args) {
            Print p = new PrintBanner("Hello");
            p.PrintWeak();
            p.PrintStrong();
            Console.Read();
        }
    }
}




```

# 実行結果

```
(Hello)
*Hello*
```

# 成果物

https://paiza.io/projects/TdIMWchj3tE55IHI3q5OwA

以上。
GitHub に SSH keys を設定する

# GitHub に SSH keys を設定する

https://github.com/settings/keys

## はじめに

はじめまして。

この記事では、GitHub に SSH keys を設定したいと思います。

この記事が、エンジニアとして活躍する方々に貢献ができるように書かせていただきます。

## SSH 鍵を生成する

デフォルトでは、RSA 暗号を使って、SSH 鍵を生成されますが、明示的に指定して SSH 鍵を生成する場合は、以下のように生成します。

:::note info
RSA 暗号とは、公開鍵暗号方式の代表例で、非常に大きな数を素因数分解することが困難なことを利用した暗号です。
ちなみに、細田守さんが監督を務めた『[サマーウォーズ](https://s-wars.jp/)』で（主人公）小磯健二が解いた暗号が RSA 暗号です。
:::

```bash
ssh-keygen -t rsa
```

上記の SSH 鍵は、$2048$ ビットで生成されていますが、より強力な鍵を生成したい場合は、$4096$ ビットの鍵も以下のように生成することができます。

```bash
ssh-keygen -t rsa -b 4096
```

私は今回は、Ed25519 というアルゴリズムを使って、生成したいと思います。理由としては、GitHub のドキュメントでも使用されていたためです。

https://docs.github.com/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

:::note info
Ed25519 は、楕円曲線を使ったアルゴリズムの一つです。
楕円曲線暗号は、RSA より短い鍵長で同等の安全性を提供できる公開鍵暗号方式です。
:::

```bash
ssh-keygen -t ed25519
```

GitHub の方では、SSH 鍵にコメントをつけています。GitHub に登録してあるメールアドレスをコメントとしてつけたい人は以下のコマンドを使ってください。

```bash
ssh-keygen -t ed25519 -C "your_email@example.com"
```

## SSH 公開鍵を GitHub に追加

:::note warn
`id_ed25519.pub` と `id_ed25519` というファイルが `.ssh` 内にあると思いますが、「`id_ed25519.pub`」が公開鍵です。秘密鍵の方を GitHub に公開しないように十分気をつけてください。
:::

```bash
cat ~/.ssh/id_ed25519.pub
```

上記のコマンドにより確認できた公開鍵をコピーしてください。

次に、GitHub の「Settings」を開いてください。その後、「SSH and GPG keys」に移動してください。
「New SSH key」というボタンがありますので、そこをクリックし、「Key」と書いてある場所に先ほどコピーした公開鍵を入力してください。タイトルには、自分がわかりやすいタイトルをつけ、「Key type」は「authentication key」を選択すれば大丈夫です。

:::note info
Authentication Key：主に SSH 接続の認証に使用されます。リモートリポジトリに対するアクセスを許可するための鍵です。
Signing Key：Git コミットやタグの署名に使用されます。この鍵を使用することで、あなたがそのコミットやタグを作成したことを証明することができます。
:::

## SSH config に明示的に指定

:::note info
ここは、人によってはやらなくても大丈夫です。
主に、複数の SSH 鍵持ちの人向けです。
:::

```text:~/.ssh/config
Host github.com
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_ed25519
```

## SSH 接続テスト

うまく、SSH 鍵が設定できたかどうかは、以下のコマンドで確かめることができます。

```bash
ssh -T git@github.com
```

成功していれば以下のようなコメントが返ってくるはずです。（`qiita` と書いてある場所が自分の GitHub のユーザ名になっています。）

```text
Hi qiita! You've successfully authenticated, but GitHub does not provide shell access.
```

## SSH 鍵のパーミッションの確認

SSH 鍵のパーミッションが適切でない場合も接続に失敗することがあります。以下のコマンドで適切なパーミッションを設定します。

```bash
chmod 600 ~/.ssh/id_ed25519
chmod 644 ~/.ssh/id_ed25519.pub
```

`chmod 600` はファイルを所有者だけが完全に管理できるようにし、`chmod 644` は他のユーザーにも読み取り権限を与える設定です。

## SSH クライアントの詳細なデバッグ情報

接続時の詳細な情報を表示するために、以下のコマンドを実行します。

```bash
ssh -vT git@github.com
```

## おわりに

この記事では、GitHub に SSH keys を設定したいと思います。

この記事が、エンジニアとして活躍する方々に貢献できたら幸いです。
Dev Containerを使ったら超効率よく開発環境ができた話【Ruby on Rails】

# はじめに
Rails 7.2 では、`--devcontainer` オプションを使ってプロジェクトを作成することで、Dev Containerを簡単に設定できるようになりました。  
実際に自分でセットアップしてみたところ、想像以上に簡単に十分な環境を作成できたので、その手順を紹介します。

# 構築手順
[Dev Containerでの開発ガイド](https://railsguides.jp/getting_started_with_devcontainer.html)を参考に進めました。
DockerやVSCodeなどは普段から使っているので、これらのインストール手順は省略します。

## VS Codeに拡張機能をインストール
VSCodeの拡張機能検索で「Dev Containers」と検索し、拡張機能をインストールします。
![スクリーンショット 2024-09-30 9.59.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/1d5cd783-b82d-11ec-5d5f-26d65a1519ea.png)

## Railsプロジェクトを作成
以下のコマンドで Rails プロジェクトを作成します。
```
rails new myapp --devcontainer [その他付けたいオプション]
```
ガイドではrails-newツールを使っていますが、自分が慣れている方法でプロジェクトを作成して問題ありません。  
`--devcontainer` をつけて作成すると、`.devcontainer` ディレクトリに設定ファイルが自動生成されます。  
自動生成されたファイルの中身を触る必要はありません。

## VS Codeでプロジェクトを開いて実行する
VSCodeで作成したプロジェクトを開きます。  
すると、devcontainerの設定を検知して「コンテナーで再度開く」かどうかのポップアップが表示されるので、クリックしてDev Containerを使って開き直します。
![スクリーンショット 2024-09-30 9.32.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/f411554c-e734-270a-f992-386c719b7ef2.png)

セットアップを少し待った後、VS Code内でターミナルを開いて`rails s` を実行するだけで、すぐにプロジェクトが立ち上がりました。
![スクリーンショット 2024-09-30 10.23.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/204eba33-0573-b484-0e84-fd26799732c1.png)


## System Testも簡単
さらに驚いたのは、システムテストがスムーズに行える点です。従来は Seleniumや他の依存関係の設定に時間を取られていましたが、Dev Containerを使用することでその手間がなくなりました。
以下のような簡単なシステムテストコードを書き、実行してみたところ追加のセットアップなしで問題なく動作しました。
![スクリーンショット 2024-09-30 10.27.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/3383e449-7ee2-c38f-ced3-42980b2e8880.png)

設定の手間なくすぐにテストを実行できる環境が整い、コードに集中できることは本当にありがたいです。

# まとめ
開発環境の構築には何かと時間がかかるイメージがありますが、Dev Containerを使うことで、簡単にアプリケーションの実行からシステムテストまで行うことができました。
普段は RubyMine を使って開発しているので、今後はそちらでも動作させられるようにしていきたいと思います。 
みなさんも是非Dev Containerを活用してみてください！
Aurora v3へアップデートした際に起きたEmbulkのトラブルシューティング

Amazon Aurora MySQLのバージョンをv2(5.7互換)からv3(8.0互換)へアップデートした際に、AuroraからBigQueryへ転送を行なっているEmbulkの一部タスクが失敗するようになったため、それをどう修正したかをお伝えします。


## MySQL 8.0で利用されるようになった予約語とカラム名・テーブル名の衝突

- MySQL5.7互換から->8.0互換になることで予約語が増えているので、少なくとも衝突してしまったカラム名・テーブル名はバッククォートで囲いましょう
    - そもそも全部のカラムをバッククォートで囲うようにしてもよいでしょう

```diff_liquid
{%
  include 'template',
  bigquery_table: 'groups',
  query: "
             SELECT
               id,
-              rank,
+              `rank`,
               created_at
-            FROM groups;
+            FROM `groups`;
         "
  %}
```

## 一時テーブルの上限を増やす
- 転送量が多いタスクの場合、一時テーブル関係の設定がデフォルトのままだと失敗する可能性があります
    - 一時テーブルに利用できるメモリ量を`temptable_max_mmap`と`temptable_max_ram`のパラメーターで調整しましょう
        - [公式ドキュメント](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/AuroraUserGuide/ams3-temptable-behavior.html)
        - デフォルトはどちらも`1GB`(`1073741824byte`)です
        - どちらのパラメーターも実質的な上限値がインスタンスタイプ別に存在するので、そちらを超えないようにしましょう
            - [Aurora MySQL 用の一時ストレージの制限](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/AuroraUserGuide/CHAP_Troubleshooting.html#Troubleshooting.FreeableMemory)

## 認証プラグインについて

- MySQL8.0ではデフォルトの認証プラグインが`caching_sha2_password`に変更されていますが、Aurora v3では引き続き`mysql_native_password`が利用されます
    - [Aurora MySQL バージョン 3 と MySQL 8.0 コミュニティエディションの比較](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/AuroraUserGuide/AuroraMySQL.Compare-80-v3.html)
        - > コミュニティ MySQL 8.0 では、デフォルトの認証プラグインは caching_sha2_password です。Aurora MySQL バージョン3では、mysql_native_password プラグインがまだ使用されます。default_authentication_plugin 設定は変更できません。
    - この記事を書いた時点で、Embulkは`caching_sha2_password`に対応していないので、開発環境やCIのMySQLも`mysql_native_password`を利用するように設定を変えないとタスクが失敗します
        - いくつか回避策はあるので、どれかを使って`mysql_native_password`を利用するようにしましょう
        - 参考:
            - https://github.com/embulk/embulk-input-jdbc/issues/163
            - [Embulk v0.9.24＋MySQL 8.0.29のローカル環境構築](https://zenn.dev/k_i/articles/cca05c494d6a59#mysql8%E3%81%AE%E8%AA%8D%E8%A8%BC%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)


## まとめ
今回はMySQL8.0に上げるというトピックの中でも、AuroraとEmbulkの2つを軸とした対応を書かせていただきました。
そろそろAurora v2もの標準サポート終了が近くなり、慌てて上げている方ももしかしたらいらっしゃるかもしれないので、そのような方のお助けになれば幸いです。
初心者向け：Meta社の新AI「Llama 3.2」について

## 前置き
https://qiita.com/shirochan/items/ee9c66979ceca0b30528

先日このようなLlama3.2のアップデートの解説記事を投稿しました。
今回はよりシンプルにそもそもLlamaとはなにかも知らない初心者向けに修正しました。

## はじめに

Meta（旧Facebook）が新しい人工知能（AI）システム「Llama 3.2」を発表しました。このAIは、テキストの理解や生成、画像の認識など、多くのことができます。ここでは、Llama 3.2の特徴や重要性について、AIに詳しくない方にも分かりやすく説明します。

## Llamaとは？

Llamaは、"Large Language Model Meta AI"の略で、Meta社が開発した大規模言語モデルのシリーズ名です。以下がLlamaの主な特徴です：

1. **オープンソース**: 多くのAIモデルが企業秘密として非公開なのに対し、Llamaは誰でも利用や改良ができるよう公開されています

2. **効率性**: 他の大規模言語モデルと比べて、より少ないコンピューティングリソースで高い性能を発揮します

3. **多言語対応**: 英語以外の多くの言語も扱えるように設計されています

4. **幅広い用途**: テキスト生成、質問応答、翻訳など、様々なタスクをこなすことができます

Llamaは、AIの民主化（誰もが使えるようにすること）と、AIの急速な進歩の両方を象徴する存在として、AI業界で大きな注目を集めています

## Llama 3.2とは？

Llama 3.2は、大規模言語モデル（LLM）と呼ばれるAIの一種です。LLMは、大量のテキストデータを学習し、人間のような文章を理解したり生成したりできるAIのことです。Llama 3.2には以下のような特徴があります：

1. **テキスト処理能力**: 文章の理解、生成、要約などができます
2. **画像認識**: 画像を見て、その内容を理解し説明できます
3. **多言語対応**: 様々な言語を扱えます
4. **オープンソース**: 誰でも無料で使用・改変できます

## Llama 3.2の主な機能

1. **ビジョンモデル（11Bと90B）**:
   - 画像の内容を理解し、説明できます
   - グラフやチャートの内容も理解できます
   - 大きな（90B）モデルは、より複雑なタスクに対応できます

2. **軽量テキストモデル（1Bと3B）**:
   - スマートフォンなど、小さな機器でも動作します
   - 長い文章（128,000文字程度）を扱えます
   - 多言語に対応しています

## なぜLlama 3.2は重要なのか？

1. **性能の高さ**: 多くのタスクで、他の有名なAIシステムと同等以上の性能を示しています

2. **オープンソース**: 無料で公開されているため、多くの人がAI技術を利用できるようになります

3. **多様な用途**: テキスト処理から画像理解まで、幅広いタスクをこなせます

4. **デバイスの多様性**: 大型コンピュータから小型のスマートフォンまで、様々な機器で使用できます

## Llama Stackについて

Llama Stackは、開発者がLlama 3.2を簡単に使えるようにするためのツールセットです。これにより、AIアプリケーションの開発が容易になります。

## 安全性への取り組み

Meta社は、AIの安全な使用を重視しています。Llama 3.2には、不適切な内容を検出する機能が組み込まれています。

## 今後の展望

Llama 3.2の登場により、AIがより身近なものになると期待されています。教育支援、画像認識アプリ、文書作成支援など、様々な分野での活用が見込まれます。

## まとめ

Llama 3.2は、Meta社が開発した革新的なAIシステムです。主な特徴は以下の通りです：

1. 誰でも利用可能なオープンソース
2. テキストと画像の高度な処理能力
3. 様々な機器で使用可能

Llama 3.2の登場により、AI技術がより身近になり、多くの分野での様々な応用が期待されます。


## 関連書籍
- [生成AIで世界はこう変わる](https://amzn.to/3zEkQzN)
React Nativeで作られているアプリ50選！



## Meta

 [Facebook](https://www.facebook.com)
 [Facebook Ads Manager](https://www.facebook.com/business/tools/ads-manager)
 [Meta Quest](https://www.meta.com/meta-quest/)
 [Messenger Desktop](https://www.messenger.com/desktop)

### Microsoft

 [Microsoft Office](https://www.microsoft.com/microsoft-365)
 [Microsoft Outlook](https://www.microsoft.com/microsoft-365/outlook/email-and-calendar-software-microsoft-outlook)
 [Microsoft Teams](https://www.microsoft.com/microsoft-teams)
 [Xbox Game Pass](https://www.xbox.com/en-US/xbox-game-pass)
 [Skype](https://www.skype.com)

### Amazon

 [Amazon Shopping](https://www.amazon.com)
 [Amazon Alexa](https://www.amazon.com/alexa)
 [Amazon Photos](https://www.amazon.com/photos)
 [Amazon Kindle](https://www.amazon.com/kindle)
 [Amazon Appstore](https://www.amazon.com/appstore)

### Shopify

 [Shopify](https://www.shopify.com)
 [Shop: All your favorite brands](https://www.shopify.com/shop)
 [Shopify Inbox](https://www.shopify.com/inbox)
 [Shopify Point of Sale](https://www.shopify.com/pos)

### Wix

 [Spaces: Follow Businesses](https://www.wix.com/spaces)
 [Dine by Wix](https://www.wix.com/dine)
 [Fit by Wix](https://www.wix.com/fit)
 [Wix Owner - Website Builder](https://www.wix.com/website-builder)

### ユーザーショーケース

 [Tableau](https://www.tableau.com)
 [FlipKart](https://www.flipkart.com)
 [Mercari](https://www.mercari.com)
 [Discord](https://www.discord.com)
 [PlayStation App](https://www.playstation.com/app)
 [PUMA](https://www.puma.com)
 [Coinbase](https://www.coinbase.com)
 [WordPress - Website Builder](https://wordpress.com)
 [Tesla](https://www.tesla.com)
 [Walmart Shopping & Grocery](https://www.walmart.com/grocery)
 [Pinterest](https://www.pinterest.com)
 [Bloomberg](https://www.bloomberg.com)
 [NFL](https://www.nfl.com)
 [Tencent QQ](https://im.qq.com)
 [Mattermost](https://mattermost.com)
 [Call of Duty Companion App](https://www.callofduty.com)
 [Delivery.com](https://www.delivery.com)
 [Words with Friends 2](https://wordswithfriends.com)
 [Baidu Mobile (手机百度)](https://www.baidu.com/mobile)
 [Foreca](https://www.foreca.com)
 [OpenVPN Connect](https://openvpn.net/client-connect-vpn-for-windows/)
 [Dave - Banking & Cash Advance](https://www.dave.com)
 [JD（手机京东）](https://www.jd.com)
 [LendMN](https://www.lendmn.com)
 [Gyroscope](https://www.gyroscope.io)
 [Brex: The future of spend management](https://www.brex.com)
 [Klarna | Shop now. Pay later.](https://www.klarna.com)
 [Bolt Food: Delivery & Takeaway](https://www.bolt.eu/en/bolt-food)
 [Artsy](https://www.artsy.net)
 [NerdWallet](https://www.nerdwallet.com)




https://reactnative.dev/showcase

実は公式サイトにあるのです！
【デザインパターン】Facadeパターンについての備忘録

# 概要

Facade パターンとは、**複雑なサブシステムへのアクセスを簡単にするため**に、**サブシステムの複数のクラスをまとめて、統一したインターフェースを提供する**デザインパターンである。これにより、クライアントはサブシステムの内部の複雑さを意識せず、シンプルなインターフェースを通じて操作が可能となる。

# 利用目的

- クライアントが複数のサブシステムを操作する際に、シンプルなインターフェースを提供することで、システムの使いやすさを向上させる。
- サブシステムの詳細を隠蔽し、柔軟性とメンテナンス性を向上させる。
- 依存関係を減らし、サブシステムの変更をクライアントに影響させないようにする。

# 注意点

- Facade パターンを適用しすぎると、システムが単純化されすぎて、詳細な制御が必要な場合に柔軟性を失う可能性がある。
- Facade パターンは、サブシステムを完全に隠すものではなく、サブシステム自体も直接使用可能なことが多い。そのため、設計時にサブシステムへの直接アクセスが必要かどうかを検討することが重要である。

# 実装

```java:App.java
// Facadeパターンのエントリーポイントクラス

public class App {
    public static void main(String[] args) {
        HomeFacade homeFacade = new HomeFacade();
        // 【ここで、シンプルなインタフェースを利用している】
        homeFacade.startMorningRoutine(22);
    }
}
```

```java:HomeFacade.java
// Facadeクラス：複数のサブシステムへのシンプルなインターフェースを提供

public class HomeFacade {
    private Lights lights;
    private CoffeeMaker coffeeMaker;
    private AirConditioner airConditioner;

    public HomeFacade() {
        this.lights = new Lights();
        this.coffeeMaker = new CoffeeMaker();
        this.airConditioner = new AirConditioner();
    }

    public void startMorningRoutine(int temperture) {
        lights.turnOn();
        coffeeMaker.brew();
        airConditioner.setTemperature(temperture);
    }
}
```

```java:Lights.java
// サブシステム1：照明の管理

public class Lights {
    public void turnOn() {
        System.out.println("Lights are turned on.");
    }
}
```

```java:CoffeeMaker.java
// サブシステム2：コーヒーメーカーの管理

public class CoffeeMaker {
    public void brew() {
        System.out.println("Coffee is brewing.");
    }
}
```

```java:AirConditioner.java
// サブシステム3：エアコンの管理

public class AirConditioner {
    public void setTemperature(int temperature) {
        System.out.println("Air conditioner is set to " + temperature + " degrees.");
    }
}
```

# クラス図
![facade_class_diagram.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3845328/f50bfcc6-d2c1-f320-d7f8-3aa3ce620d96.jpeg)
[MacOS]DownloadsディレクトリをDockに戻す方法

Downloadsディレクトリを誤ってDockから消してしまった際の対処法です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954734/14f6e65c-a695-4bc6-4034-cf7f0c71e64b.png)


# Finderを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954734/aff15578-a1bb-41f4-982f-633265173876.png)

# 「Downloads」を右クリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954734/2b8d4727-1498-2b1e-cad9-96e837bc9a82.png)

# 「Add to Dock」をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954734/38ff4c10-7b4a-0d13-0f33-6860ddafe7b7.png)

# Dockを確認する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954734/f5697553-dd74-2213-aa13-19695b9a5a90.png)
DownloadsディレクトリをDockに戻すことができました。
Git初心者はチーム開発前に Oh My Git! で遊んでおくといいと思う

# はじめに

こんな投稿を見かけたので遊んでみました。

https://x.com/jalva_dev/status/1837794044883194038

# Oh My Git!

「Oh My Git!」は、ユーザーが Git の基本的なコンセプトと操作を学ぶことができるオープンソースのゲームです。

https://ohmygit.org/


# セットアップ

以下のダウンロードページから zip ファイルをダウンロードして展開、起動します。

https://blinry.itch.io/oh-my-git

# 学べる Git コマンド

選択肢に出てくるコマンドなどパラパラと書いてます。

- **intro**：基本的な操作
  - `git init`
  - `git add`
  - `git commit`
  - `git pull`
  - `git push`
- **files**：ファイル作成・削除（Git というよりシェル）
  - `rm`
  - `touch`
- **branches**：ブランチの理解・操作
  - `git checkout`
  - `git checkout ^HEAD`
  - `git checkout <branch-name>`
  - `git checkout --detach <branch-name>`
  - `git branch`
  - `git branch -D`
  - `git reset --hard`
  - `git merge`
- **merge**：ブランチの統合
  - `git merge`
- **index**：インデックス（ステージングなど）の理解
  - `git reset`
- **remotes**：コンフリクト解消
  - 同上
- **changing-the-past**：歴史の改変
  - `git rebase`
  - `git rebase -i`
  - `git cherry-pick`
- **shit-happens**：起きた問題への対処
  - `git checkout [commit] [file]`
  - `git reset [commit]`
  - `git commit -a`
  - `git revert`
  - `git reflog`
- **workflows**：リポジトリのクローン
  - `git clone`
- **bisect**：変更履歴の二分探索
  - `git bisect start`
  - `git bisect good`
  - `git bisect bad`
- **stash**：変更の退避・復元
  - `git stash`
  - `git stash push`
  - `git stash pop`
  - `git stash apply`
  - `git stash list`
  - `git stash clear`
  - `git stash drop`
  - `git stash branch`
- **tags**：タグの操作
  - `git tag <tag-name>`
  - `git tag -d`
  - `git push <remote> <tag-name>`
  - `git push <remote> --tags`
  - `git push <remote> --delete <tag-name>`
  - `git fetch <remote> --prune --prune-tags`


# 遊び方

`Levels` を選択する

![スタート画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3388832/edc3970a-575b-d1d2-3705-b8475f1379cd.jpeg)

画面遷移後、やりたいやつを選ぶ（クリアしたミッションは GREEN に変わる）

![Levelsの画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3388832/60444a8e-9a6f-47ca-ffa0-0776ce33261b.jpeg)

例えば `Levels` > `stash` > `Stashing` の画面だとこんな感じになっています。

![levels-stashing.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3388832/c877b1ff-81c8-058d-5b66-343d9de17952.jpeg)

- 画面中央がブランチツリーです
- 水色のキャラクターの位置は現在チェックアウトしているコミットです（つまり HEAD）
- 画面下部のカードを使って操作をすることも、右下のエディタを使って操作することも可能です
- 画面右側の赤でハイライトされているものがミッションになります
  - クリアすると緑色に変わります

# 感じたこと

ざっくり、このゲームでやってることが理解できれば普段の開発業務における Git 操作で困ることほとんどなくなりそうだなと思いました。

- 各ミッションが実際に Git を操作したいときの動機と同じなので、具体的なゴールをイメージしながらコマンドの入力と実際の結果を間近で体験しながら学ぶことができそう
- 視覚的にリポジトリの状態を把握できるので、コマンドとその結果がどうリポジトリ（ブランチ）に反映されるかがイメージしやすい
- ゲームなので、リポジトリやブランチを破壊しても簡単に元の状態から再スタートできる


# おわりに

`git bisect` ってマイナーコマンドだと思ってたけどみんな使うの...??
エクスプローラーの守備範囲を調べてみた

Windows 11 になって、見た目やタブ機能が加わり、ちょっと変わったエクスプローラー（explorer.exe）がどんな処理を担当しているのか調べてみました。

調べ方は、WinDbg ツールを使用して、explorer.exe の処理を止めた時に反応がなくなるとこを探すという単純な方法になります。

自分でも確認したい！という人は、以下の Web サイトで、WinDbg をインストールして一緒にやってみてください。

https://qiita.com/shj9rk/items/968bb331a333c63481f3

## 環境
Windows 11 23H2 (22631.4169)

## エクスプローラーの処理を停止
WinDbg のプロセスをデバッグする機能を使って、explorer.exe の処理を停止します。具体的には、explorer.exe に対して、デバッグを開始し、**Break** することで explorer.exe の処理を停止させます。

特に難しい操作は必要なく、以下の手順により explorer.exe を停止させることができます。

1. WinDbg を起動
1. 上部にあるツールボックスの一番左端にある [ファイル] をクリック
1. [Start debugging] メニューで [Attach to process] を選択
1. 表示された一覧から explorer.exe を選択
1. [Attach] ボタンをクリックしてデバッグを開始

![windbg_process.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853334/9409eb68-8b87-0d33-966c-65f017bd2c79.png)

:::note info
デバッグにおける **Break** とは、プログラムの実行を一時停止する機能のことです。これにより、開発者はプログラムの現在の状態を調査し、変数の値やプログラムの動作を確認することができます。
:::

[Attach] ボタンよりデバッグが開始され、しばらく待つと自動的に BreakPoint で explorer.exe の処理が止まります。

![windbg_explorer_break.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853334/c10f46ca-2acb-0308-6777-720b5e3c4d3c.png)

## いろいろ操作してみる
explorer.exe の処理を止めたので、これで、explorer.exe が担当している処理はすべて進まなくなりました。この状態でいろいろ操作してみてどれが動くか試してみます。試した結果がこちらです。

| 操作 | 結果 |
|:-|:-:|
| スタートメニューをクリック  | ✕ |
| ファイル エクスプローラーでの操作  | ✕ |
| タスクバーのアイコンや時計をクリック | ✕ |
| タスクバーを右クリック | ✕ |
| デスクトップに配置したアイコンをクリック| ✕ |
| デスクトップに右クリック| ✕ |
| Windows + E: ファイルエクスプローラー起動 | ✕ |
| Windows + R: 名前を指定して実行 | ✕ |
| Windows + L: 画面ロック| △ |
| PrintScreen: スクリーンショット取得| ◯ |
| Ctrl + Alt + Del: CAD 画面 | ◯ |
| Ctrl + Shift + Esc: タスクマネージャー起動| ◯ |
| Edge、ペイント、電卓等の他のアプリ | ◯ |

:::note info
◯ は普段通り正常に動作、✕ は反応なしです。
"Windows + L: 画面ロック"では、画面は暗くなり、ロックがされるかと思いましたが、暗転したまま処理が進まなくなりました。ロック解除ができなくなり、復旧のため、電源ボタン長押しにより、強制的にオフにしました。

:::
WinDbg で **Break** 状態を [GO] ボタンで解除すると、通常通り explorer.exe が動くようになります。確認が終わったら [Detach] ボタンでデバッグを終了し、WinDbg を閉じれば OK です。

## 結果から
たまに一部部分だけクリックしても反応がない時でも他の処理は問題なく動作している時がありませんか？
以下の状態であれば、explorer.exe が処理ができなくなっただけなので、[Ctrl + Shift + Esc] でタスクマネージャーを表示させ explorer.exe を再起動すれば問題は解消すると考えて良さそうです。

- スタートボタンが反応しない
- デスクトップに配置したアイコンをクリックしても反応しない
- エクスプローラーでファイル操作ができない
- タスクバーのアイコンをクリック、右クリックしても反応しない
- 他のアプリは操作可能

右クリックから再起動
![explorer_process_restart.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853334/85be7c1b-f5fa-7425-4d89-030375f47c6b.png)

## さいごに
エクスプローラーの守備範囲は意外と広いことがわかりました。Windows11で機能が追加されたエクスプローラーは不具合が多そうなので、何か変だなと思ったらタスクマネージャーで再起動するのがおすすめです。
【アクセシビリティ】　誰もがみやすい色のコントラストとは？

こんにちは
1年目の小川です。

今回は、**色のコントラスト**についてまとめていきたいと思います。

# 色のコントラストとは？
**コントラスト**とは、色の対比のことをいい、デザイン用語では、明度、彩度、色相の差のことをいいます。
コントラストが高いと、はっきり見え、コントラストが弱いと見えにくいことがあります。

# コントラストがはっきりしていないと何が困るの？
例えば灰色と白、赤と緑、紫と青、オレンジと黄緑、赤と黒といったような配色があったとします。
見えなくはないかもしれませんが、見えにくい配色だと思います。
しかし、視覚障害や色覚障害の人にとっては、そこに文字があると気づかないような配色でもあります。
見え方は人それぞれなので、見える人もいれば、見えない人もいると思います。
しかし、灰色の背景に白い文字はパッとみたときにすぐに書いてある文字を認識することは難しいと思います。
このように、色の配色によって、見えにくいとせっかく書いてある文字が読めずに、そこにある情報を得られないことになります。

# コントラストに基準はあるの？
それでは、どのような配色であれば、みやすいとされているのでしょうか？
それでは、どのような配色であれば、みやすいとされているのでしょうか？
**WCAG2.2**によると、**4.5:1**というのが、基準として一つ規定されています。
つまり、4.49:1以下のコントラスト比では、見えにくい可能性があるということです。


# 具体的にどんなコントラストが魚井の？
4.5:1の比率と言われても、どのぐらいなのかイメージつきにくいですよね？
ということで、以下で少し紹介したいと思います。
ここでは、[カラーコントラストチェッカーアナライザーツール | Adobe Color](https://color.adobe.com/ja/create/color-contrast-analyzer)というツールを使って、実際に試してみたいと思います。

* 4.49:1より下の場合

![基準未達成の水色背景に白い文字](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787065/54a20bd0-1d8c-5df9-6c2d-c16647896a59.png)

 
* 4.5:1より上の場合

![青い背景に白い文字](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787065/f2c3ffd4-9213-fb14-ef30-689d610d2638.png)
![白黒斑点](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787065/5d0e712e-7b2e-9fd0-58e0-7c3f6a5139ec.png)


# 最後に
今回は、簡単にではありますが、色のコントラストについて紹介してきました。
せっかく見せたい文字や画像があっても、届けたい人にその情報が届かなかったら勿体無いですよね。
以下で、ツールのURLも記載したいと思いますので、ぜひ一度試して実際にそれぞれの開発環境に反映させてみてください。
ここまで読んでいただきありがとうございました。


# 参考サイト

* WCAG2.2

https://waic.jp/translations/WCAG22/#use-of-color

* カラーコントラストチェッカーアナライザーツール | Adobe Color

https://color.adobe.com/ja/create/color-contrast-analyzer
Raycastを使いこなして生産性を爆上げする

## Raycastとは

https://www.raycast.com/

Raycastは、macOS用の高機能なランチャーアプリケーションです。Spotlightの強化版とも言えるこのツールは、アプリケーションの起動やファイル検索だけでなく、システム操作の簡略化、クリップボード履歴の管理、スニペットの活用など、多岐にわたる機能を提供します。ユーザーインターフェースが直感的で使いやすく、カスタマイズ性も高いため、日々のPC作業を大幅に効率化できます。また、拡張機能を追加することで機能を拡張でき、ユーザーのニーズに合わせて柔軟にカスタマイズすることが可能です。Raycastを使いこなすことで、コンピューターとの新しい対話方法を学び、生産性を向上させることができます。

今回は、私が普段使っている中で、特におすすめの機能についてご紹介します。

## Quit All Applications

Raycastの「Quit All Applications」機能は、macOSで実行中のすべてのアプリケーションを一度に終了させる便利なツールです。この機能を使用すると、一つ一つのアプリケーションを手動で閉じる手間が省け、システムリソースの解放やコンピューターのパフォーマンス向上に役立ちます。ユーザーはRaycastの検索バーで「Quit All Applications」と入力するか、カスタムショートカットを設定することで、ワンアクションですべてのアプリを終了できます。これは特に作業終了時やシステムのクリーンアップを行う際に非常に有用で、macOSユーザーの日常的なワークフローを効率化する強力な機能の一つとなっています。

## Command Script
Raycastのスクリプトコマンド機能は、ユーザーが独自のカスタムコマンドを作成し、Raycast内で実行できるようにする強力な機能です。この機能を使用すると、bash、AppleScript、Swift、Python、Ruby、Node.jsなどの様々なプログラミング言語を用いて、複雑な処理や日常的なタスクを自動化するスクリプトを作成できます。スクリプトコマンドは、Raycastの検索バーから直接呼び出すことができ、ホットキーを割り当てることも可能です。これにより、ユーザーは頻繁に行うタスクや操作を効率化し、生産性を大幅に向上させることができます。また、コミュニティによって共有されたスクリプトコマンドを利用することで、Raycastの機能をさらに拡張することができ、個々のニーズに合わせたカスタマイズが可能になります。

例として「work」というコマンドで、ブラウザのChatGPT, Gmail, Google Calendar, Google DriveとSlackアプリを一発で開くスクリプトを紹介します

```shell: work.sh
#!/bin/bash

# Required parameters:
# @raycast.schemaVersion 1
# @raycast.title work
# @raycast.mode silent

# Optional parameters:
# @raycast.icon 🤖

# リンクのリストを定義
links=(
  # ChatGPT
  "https://chatgpt.com/"

  # Gmail
  "https://mail.google.com/mail/u/0/?tab=rm&ogbl#inbox"

  # Google Calendar
  "https://calendar.google.com/calendar/u/0/r"

  # Google Drive
  "https://drive.google.com/drive/u/0/home"
)

# 各リンクをデフォルトブラウザで開く
for link in "${links[@]}"
do
  open "$link"
done

# Slackアプリを開く
open -a "Slack"

```
## Clipboard History

Raycastのクリップボード履歴機能は、macOSユーザーのコピー&ペースト作業を大幅に効率化する強力なツールです。この機能を使用すると、過去にコピーしたテキスト、画像、カラーコード、リンクなどの履歴を保存し、必要な時にすぐに呼び出すことができます。ユーザーは簡単な検索やプレビュー機能を使って、数日前にコピーした内容でも素早く見つけ出し、アクティブなアプリケーションに直接ペーストすることが可能です。セキュリティ面でも配慮されており、コピーされた内容は暗号化されてローカルに保存され、パスワードマネージャーからコピーされた機密情報は自動的に無視されます。さらに、頻繁に使用する項目をピン留めしたり、ホットキーを設定してワンアクションで呼び出したりすることで、より効率的な作業が可能になります。この機能により、ユーザーは複数のコピー内容を簡単に管理し、作業の流れを中断することなく必要な情報を素早く取り出すことができ、生産性の向上につながります。

私は、`^ + v`で呼び出せるように、Hotkeyを設定しています。

## 最後に
デフォルトでは、Raycastは`⌥ + space`で起動するようになっていますが、Spotlightの代わりに、`⌘ + space`で起動させるのがおすすめです。
MacOS Sequoia 15.0でKarabiner-Elementsが効かなくなったけど直した

設定 > 一般 > ログイン項目と機能拡張 > Karabiner-Elements関係の2つ

これをオフオンしたら直った

理由はわからない(クソブログ)

## 追記 環境による差異

### 発生した環境

* M1 MacBookPro

### 発生していない環境

* Intel MacBookPro
* M1 Mac mini
HTMLメールにおけるダークモード対応

HTMLメールのダークモード対応を試みて分かったことを共有します。

## ダークモードの識別は難しい

メールクライアントにおいて通常モードかダークモード対応かを識別することは難しいです。

通常のWebサイトであれば以下のメディアクエリを利用することで、ダークモードの場合は通常と別のcssを適用させることが可能です。

```
@media (prefers-color-scheme: dark) 
```

メールクライアントでは、上記のメディアクエリで識別できないケースがありました。iPhoneのデフォルトのiCloudメールクライアント及びYahooメールはメディアクエリで識別可能でしたが、iPhone及びAndroidのGmailでは識別できませんでした。Gmailでできないと、多くのユーザーへ影響が出てしまうため、別の方法を検討する必要が出てきました。

調べていくとGmail特有のクラス名などを利用すれば対応できないということはなさそうでしたが、処理が複雑になることやGmailの仕様変更により崩れることが懸念されました。また、私たちのケースではダークモードにすることで影響がでた箇所は限定的で、大きな工数をとってまで対応する必要はないと考えられました。

|  | Gmail | iCloudメール | Yahooメール |
|:------------:|:------:|:-------:|:-------:|
| iPhone | × | ○ | ○ |
| Android | × | - | ○ |

上記のメディアクエリが使えない問題を解決したとしても、色の反転問題もありました。Gmailなどではダークモード時に色が反転しているが、Yahooメールでは色が反転しませんでした。そのため、「Yahooメールの場合」という条件分岐が必要ですがこちらも難しそうでした。

## ダークモードに左右されないデザインで対応

上記理由からメディアクエリで出し分けることをあきらめ、ダークモードに左右されないデザインで対応する方針としました。

特に影響が出ていた箇所は以下の2点でした。

### 1. 黒系のpng画像の箇所

黒やグレーなどのpng画像を利用しているとダークモードを利用した場合、背景のダークと区別が付きにくくなりデザインとしてもイマイチでした。

そこで白背景のjpg画像に変更して対応しました。

ダークモード
![IMG_0028.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717486/59574fbb-9e8d-9124-d425-1c262c31ddad.png)

通常
![IMG_0031.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717486/d0fc9c52-e043-7b0e-7c2b-41aae4fbbc63.png)

### 2. グラデーション

グラデーションを指定していたところ、ダークモード利用時の色の反転により、ブランドデザインとは違うデザインになってしまう事象が発生しました。

本件はcssの色指定ではなく、画像を配置することで解決しました。赤枠部分を文字も含め丸ごと画像化しました。

ダークモード
![IMG_0029.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717486/2acbea7c-5003-f95d-86e8-92013dbf5ef6.png)

通常
![IMG_0030.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717486/9f5d981f-0b2e-af88-d24e-c3e4f1c22aec.png)
【OutSystems】Associate Reactive Developerサンプル問題の解説１６～２０

過去記事に引き続き１６～２０の解説
[解説１～５](https://qiita.com/Ishimaru_TEC/items/443d926f2fa837748a2e)、[解説６～１０](https://qiita.com/Ishimaru_TEC/items/160fe0d14cb3ffa4fe9c)、[解説１１～１５](https://qiita.com/Ishimaru_TEC/items/ebc5597766b35f47ad0a)
ロールやクライアント変数のユースケース等、実践的な問題の出題がある。


### 問題と解説


#### 問題１６
![image (17).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/3eb4dc1b-1eb0-f2ba-905f-d189c344dda6.png)


答え：A
解説：Registeredロールは、登録されている全てのユーザに付与されるロール、そのためMichaelはRegisteredロールがチェックされている画面にアクセスできる。

Anonymousロールは、すべてのユーザに付与される。
Registeredロールは、登録されているすべてのユーザに付与される。
それ以外のロール（自由に作成）は、Userアプリから自由に付与できる。

公式の解説
[ロールベースのセキュリティ](https://learn.outsystems.com/ja-jp/training/journeys/web-developer-662/role-based-security/o11/2307)

#### 問題１７
![image (18).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/e9882781-5e74-c04b-79e7-d3f7d4ad31ad.png)


答え：B
解説：
　B以外の選択肢がユースケースとなる。
　パスワードは安易に保存しない。

公式の解説
[クライアント変数](https://learn.outsystems.com/ja-jp/training/journeys/web-developer-662/client-variables/o11/170)

#### 問題１８
![image (19).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/8d6321af-8e60-1f8e-784a-5d5fe7d116e4.png)


答え：D
解説：図の通り
![image (20).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/83ef1bfc-8d97-c0fd-e42d-9c48e1c5148a.png)

公式の解説
[アプリのデバッグ](https://learn.outsystems.com/ja-jp/training/journeys/web-developer-662/debugging-apps/o11/202)

#### 問題１９
![image (21).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/d3f16294-0aaa-51e2-e884-5dcc51ca96da.png)


答え：A
解説：OnNavigateのタイミング（次のページの読込み）で、表示するべきレコードが取得できていない。
ページネーション（ページング）は多くのアプリで利用される機能なので、公式から作り方が公表されている。
データソースや変数の割り当ては覚えておきたい。

公式の解説
[テーブルにページネーションを追加する方法](https://learn.outsystems.com/ja-jp/training/journeys/web-developer-662/how-to-add-pagination-to-a-table/o11/545)

#### 問題２０
![image (22).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/ad2ef198-f5b0-7fac-4e4f-ef91c2f03626.png)


答え：C
解説：標準のBuilt-in varidationでは、必須チェックを行える。

　必須フィールドが未入力の場合、FormのValidプロパティが自動でFlaseとなる。
　そのため、Built-in varidationを有効化し、FormのValidプロパティがTrueであることを確認すれば、必須項目の入力チェックを行える。

公式の解説
[フォームの検証](https://learn.outsystems.com/ja-jp/training/journeys/web-developer-662/form-validations/o11/226)
Cloudflare Meet-up Oita Vol.2 イベントレポート【AI Gateway をハンズオン & LT】

## はじめに

2024/9/27(土)に Cloudflare Meet-up Oita Vol.2 を開催しました

https://cfm-cts.connpass.com/event/326062/

様々な AI サービスを Cloudflare AI Gateway から呼び出すハンズオンを Elixir + Livebook で行うなど、なかなか攻めた内容でしたが、全員実行できて盛り上がりました

## 亀田さん登壇

Cloudflare のエバンジェリスト、亀田さんから Cloudflare 、 AI Gateway の紹介をしていただきました

https://x.com/nakaji573/status/1839896902571319426

https://x.com/nakaji573/status/1839902813369053327

https://x.com/east_takumi/status/1839900086031016291

Workers AI は Hugging Face で公開されている各種生成 AI モデルを呼び出せるサービスです

Cloudflare の提供する WEB GPU で高速に推論できます

https://developers.cloudflare.com/workers-ai/

ELYZA などの日本語対応モデルも使えるようになると、日本でもユーザーが増えそうです

https://qiita.com/RyoWakabayashi/items/d02a2be5d3851a524c6b

## AI Gateway ハンズオン

以下の記事を見ながら、 Elixir Livebook で AI Gateway を呼び出しました

https://qiita.com/RyoWakabayashi/items/9de0666dcf43684f3205

私が「とりあえず何でも Livebook で動かしてみる人」なので、 Livebook で AI Gateway を動かす記事を書いたところ、そのまま「じゃあ、ハンズオンは Livebook でやってみよう」という流れになり、、、

そもそも Elixir 自体が初体験、という参加者ばかりでしたが、 Livebook は誰でも簡単に使えるツールなので、すぐにインストール、実行できました

https://livebook.dev/

https://x.com/nakaji573/status/1839916252300751017

反省点

- macOS で実行する手順だったので、 Windows では `curl` 実行用の環境変数設定ができなかった（結局スキップした）

- Livebook の終了手順を記載していなかった（ブラウザで閉じても裏では動き続けている）

  メニューから「Quit」もしくは command + Q で終了

  ![スクリーンショット 2024-09-30 9.09.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/c6956414-b4e5-b2f3-229b-0e3ff8e52953.png)

## 松岡さん LT

Cloudflare DNS にドメイン移管した話です

https://x.com/east_takumi/status/1839928198680715745

実際に移管する操作を見せてくれました

かなり簡単な手順であっという間にできてしまうので、実際に自分でもやってみたいですね

https://www.cloudflare.com/ja-jp/application-services/products/dns/

## 松下さん LT

AI 学習に使う GPU のお話でした

https://x.com/kameoncloud/status/1839930401093267882

推論はまだしもトレーニングをしようとすると、 GPU のコストが莫大なものになってしまいます

https://pytorch.org/docs/stable/notes/mps.html

Mac の GPU を活用すれば、比較的お得にトレーニング可能です

https://pytorch.org/docs/stable/notes/mps.html

色々な GPU が使えると、選択肢が増えてよいですね
（↓記事は Elixir の機械学習モジュール Nx から Mac の GPU を使う例）

https://qiita.com/RyoWakabayashi/items/61f59fb4e4d8eb87c494

## まとめ

OpenAI が前払いのクレジット制で API 課金していたり、時々サービスがエラーになっていたりするので、 AI Gateway でフォールバック、レート制限ができるのは良いな、と感じました

Workers AI も、きっとどんどんモデルが増えていくと思うので、今後に期待です

個人的には Livebook でハンズオンできたのが良かったです

「普段の業務では触れられない人・物・技術に触れられる」のがコミュニティの良さだと思うので、今後も色々なコミュニティに参加し、越境していきたいと思います
M5NanoC6にラジコンサーボを繋げて遊ぶ(サブマイコンSTM32L010経由)


x 過去ログを見よ!!
x サーボを繋ぐ時は、必ず絶縁してください。
x サーボをパソコンに繋いだままやるとパソコンが破壊されます。
x モーター、コイル等、逆起電力で高電圧が発生する時の安全対策は、各自実行してください。
x 最低でも、試す時は、モバイルバッテリを使用してください。
x モータ系の力学装置系をなぜやらないのかは、まず、物理的にお金がかかる、いろいろ、危険であるから

前回の記事

https://qiita.com/caa45040/items/cd9cf5b4ba5d578af98e


結果

![o_coq469.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/fee75312-438a-873e-3e01-623a29edc758.jpeg)


![o_coq470.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/601a7cb9-0aa1-8991-e21d-1d2e8d4414a0.jpeg)


(実験)

![o_coq467.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/6cf36a42-3f8c-e905-5b60-048a28693d40.jpeg)

![o_coq468.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/e00ccd62-eb79-869d-c28f-fd03c8df4832.jpeg)




プログラム


```c++


//PWM_5_95_C6_1


//初期化
void setup() {

  //出力ピンの初期化
  pinMode(1, OUTPUT);
  pinMode(2, OUTPUT);
  analogWrite(1, 50); //PWM出力 50%
  digitalWrite(2, HIGH); //3.3Vの電源供給用

} //setup


//メインループ
void loop() {

    analogWrite(1,  13); //PWM出力  5% 256*0.05=12.8
    delay(2000); //2秒待つ

    analogWrite(1, 243); //PWM出力 95% 256*0.95=243.2
    delay(2000); //2秒待つ

} //loop


```