OmniAICreator/Qiita-1.07M huggingface dataset:
localhostを自分のiPhoneで確認する方法

# はじめに

こんにちは、エンジニアのkeitaMaxです。

reactとかを開発している時に実際に実機でテストをしたいって時があると思うので、その方法について記事にしたいと思います。

# やり方

やり方はとても簡単です。

1. 使用している端末と、テストしたい実機(iPhone/Android)を同じwifiに繋げる

2. PCのIPアドレスを調べる

3. iPhoneのブラウザ(Safariとか)で`http://{PCのIPアドレス}:{ポート番号}`にアクセスする

この３工程で完了します。

# 1. 使用している端末と、テストしたい実機(iPhone/Android)を同じwifiに繋げる

これはただ同じwifiに繋げればいいだけです。

# 2. PCのIPアドレスを調べる

私が使用しているPCがMacなので、Macのやり方を記載します。

左上のAppleのマークを押します。

![スクリーンショット 2024-07-05 22.58.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/2f8ceb5f-d204-6f55-74cd-01db33646ddd.png)

システム設定を選択します。

![スクリーンショット 2024-07-05 22.59.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/e4c7d176-d703-c790-6050-99518b0511bd.png)

次に`wifi` → `詳細`をクリックします。

![スクリーンショット 2024-07-05 23.00.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/56d6e425-bcc6-3a70-7dc7-4af4bd1c4bbb.png)

そして、`TCP/IP`をクリックし出てくる画面のIPアドレスと書いてあるところがMacのIPアドレスです。

![スクリーンショット 2024-07-05 23.03.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/097e7826-8ae3-3b79-14f1-702fa7a11f1c.png)


# 3. iPhoneのブラウザ(Safariとか)で`http://{PCのIPアドレス}:{ポート番号}`にアクセスする

最後に、自分のiPhone/Androidのブラウザでアクセスすれば完了です。

今回はReactで`npm run dev`をして立ち上げている画面を見たいので、3000ポートを使用しています。

以下のようなURLにアクセスします。

```
http://192.168.0.16:3000
```
これにアクセスすると、Reactの画面がスマホに表示されます。

# 困ったこと

上記のやり方でどうしてもできないことがありました。

その時はMacを再起動したら治ったので、もし困っている人がいたら一度PCを再起動させてみてください。


# おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！
M5Unified でボタン押下時にシンプルなシリアル通信：M5Stack Core2 と M5 Din Meter を使って

M5Stack系のデバイスと M5Unified を組み合わせたシンプルな実装のお試しをやってみます。

## M5Unified のドキュメント・参考情報
まずは、M5Unified のドキュメントや参考情報を集めてみます。
また、今回使う予定のシリアル通信まわりの情報も見かけたので、合わせて列挙してみました。

### 公式ドキュメント
●m5-docs： M5Unifiedライブラリの始め方
　https://docs.m5stack.com/ja/arduino/m5unified/helloworld

●m5-docs： M5Unifiedへの移植のポイント
　https://docs.m5stack.com/ja/arduino/m5unified/migration

### 公式のリポジトリ
●m5stack/M5Unified: Unified library for M5Stack series
　https://github.com/m5stack/M5Unified

### シリアル通信関連

https://x.com/lovyan03/status/1798637581904789721

●Serial not working with M5Unified on AtomS3 | M5Stack Community
　https://community.m5stack.com/topic/5858/serial-not-working-with-m5unified-on-atoms3

## 実際に試していく
それでは、お試しを進めていきます。

今回の記事では、Arduino IDE を使って開発するのですが、この後に試す際には Arduino IDE の設定まわりは行っておいてください。

### 利用するデバイス
今回利用してみるデバイスは 2つで、以下を使います。

- [M5 Din Meter](https://docs.m5stack.com/ja/core/M5DinMeter)
- [M5Stack Core2](https://docs.m5stack.com/ja/core/core2)　

### 簡単なボタン押下のプログラムを試す
最初に、簡単なボタン押下のプログラムを試します。

```cpp
#include <M5Unified.h>

void setup()
{
    auto cfg = M5.config();
    cfg.clear_display = true;
    M5.begin(cfg);
    M5.Lcd.setTextSize(2);
}

void loop()
{
    M5.update();

    if (M5.BtnA.isPressed()) {
        M5.Display.setCursor(0, 16);
        M5.Display.println("BtnA isPressed ");
    } else {
        M5.Display.setCursor(0, 16);
        M5.Lcd.println("Press BtnA");
    }
}
```

### ボタン押下時にシリアル通信
ここにシリアル通信の処理を足してみます。

```cpp
#include <M5Unified.h>

void setup()
{
    auto cfg = M5.config();
    cfg.clear_display = true;
    M5.begin(cfg);
    M5.Lcd.setTextSize(2);

    Serial.begin(115200);
}

void loop()
{
    M5.update();

    if (M5.BtnA.isPressed()) {
        M5.Display.setCursor(0, 16);
        M5.Display.println("BtnA isPressed ");
        Serial.println("test");
    } else {
        M5.Display.setCursor(0, 16);
        M5.Lcd.println("Press BtnA");
    }
    
    delay(100);
}
```

#### 動作確認
上記の動作確認を行ったところ、問題なく動作しました。

![449028526_794864992844381_2824586654350294133_n.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d8601d62-1e9e-cb2b-4e17-95fc04377954.jpeg)

![449379652_511394977889941_209965090225810150_n.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ad48f4a2-9e77-8f98-42ad-a279eca1dd4d.jpeg)
スクラム開発中の技術的なコミュニケーションにかける時間の重要性


## はじめに
スクラム開発を行う中で、技術的なコミュニケーションにどれだけの時間をかけるべきか悩むことはありませんか？この記事では、技術的なコミュニケーションにかける時間の重要性について、私の経験をもとにお話しします。

## 技術的なコミュニケーションの役割
技術的なコミュニケーションは、チーム全体の理解を深め、プロジェクトの成功に直結します。特にクラウドベースのソリューションを活用する場合、各メンバーが同じ理解を持つことが重要です。

### 1. 知識の共有
クラウドサービスは日々進化しています。新しいサービスや機能が追加されるたびに、チーム全体でその知識を共有することが求められます。例えば、AWSの新しいサービスを導入する際、そのメリットやデメリットを全員が理解していることが重要です。

### 2. 問題解決のスピードアップ
技術的な問題が発生した際、迅速に解決するためには、チーム全体でのコミュニケーションが不可欠です。例えば、デプロイメントパイプラインでエラーが発生した場合、その原因を特定し、解決策を見つけるためには、全員が協力する必要があります。

### 3. 一貫性の確保
技術的なコミュニケーションを通じて、コードのスタイルや設計の一貫性を保つことができます。これにより、コードの可読性が向上し、メンテナンスが容易になります。

## コミュニケーションにかける時間のバランス
技術的なコミュニケーションにかける時間は、プロジェクトの進行状況やチームのスキルレベルによって異なります。しかし、以下のポイントを意識することで、効果的なコミュニケーションが可能になります。

### 1. 定期的なミーティング
スクラム開発では、デイリースクラムやスプリントレビューなどの定期的なミーティングが設けられています。これらのミーティングを活用して、技術的な情報を共有する時間を確保しましょう。

### 2. ドキュメントの整備
技術的な情報をドキュメントとして残すことで、後から参照することができます。特に、新しいメンバーが加わった際に役立ちます。

### 3. オープンなコミュニケーション
技術的な問題や疑問があれば、すぐに共有する文化を作りましょう。これにより、問題が大きくなる前に対処することができます。

## まとめ
スクラム開発における技術的なコミュニケーションは、プロジェクトの成功に欠かせない要素です。適切な時間をかけて、知識の共有、問題解決、一貫性の確保を行うことで、チーム全体のパフォーマンスが向上します。皆さんも、技術的なコミュニケーションにもっと時間をかけてみてはいかがでしょうか？

## おわりに
この記事が、スクラム開発における技術的なコミュニケーションの重要性を理解する一助となれば幸いです。皆さんのプロジェクトが成功することを願っています！
スクラム開発中の技術的な文書作成にかける時間を最適化する方法


## はじめに
スクラム開発を行う中で、技術的な文書作成にどれだけの時間をかけるべきか悩むことはありませんか？この記事では、技術的な文書作成にかける時間を最適化する方法について、私の経験をもとにお話しします。

## 技術的な文書作成の重要性
技術的な文書は、プロジェクトの成功に欠かせない要素です。ドキュメントがしっかりしていると、チームメンバー間のコミュニケーションが円滑になり、後々のメンテナンスも容易になります。しかし、文書作成に時間をかけすぎると、開発そのものが遅れてしまうリスクもあります。

## 文書作成にかける時間のバランス
### 1. 必要最低限の文書を作成する
スクラム開発では、必要最低限の文書を作成することが推奨されます。これは、アジャイルの原則に基づいており、過剰なドキュメント作成を避けるためです。例えば、ユーザーストーリーやスプリントゴールに関連する文書は必須ですが、詳細な設計書は必要ない場合もあります。

### 2. ドキュメントのテンプレートを活用する
テンプレートを使用することで、文書作成の時間を大幅に短縮できます。例えば、ユーザーストーリーのテンプレートや、スプリントレビューのテンプレートを用意しておくと、毎回ゼロから文書を作成する手間が省けます。

### 3. クラウドサービスを活用する
クラウドベンダーが提供するサービスを活用することで、文書作成の効率を上げることができます。例えば、Google DocsやConfluenceなどのコラボレーションツールを使用すると、リアルタイムでチームメンバーと共同編集が可能です。

## 実際のプロジェクトでの適用例
私が関わったあるプロジェクトでは、技術的な文書作成にかける時間を最適化するために、以下の方法を取り入れました。

1. **ユーザーストーリーのテンプレートを作成**: 各ストーリーに必要な情報を簡潔にまとめるためのテンプレートを作成しました。
2. **クラウドベースのコラボレーションツールを導入**: Google Docsを使用して、チーム全員がリアルタイムで文書を編集できるようにしました。
3. **定期的なレビューとフィードバック**: スプリントごとに文書の内容をレビューし、必要に応じて更新しました。

これにより、文書作成にかかる時間を大幅に削減し、開発に集中できる環境を整えることができました。

## まとめ
スクラム開発における技術的な文書作成は、プロジェクトの成功に不可欠ですが、時間をかけすぎると逆効果です。必要最低限の文書を作成し、テンプレートやクラウドサービスを活用することで、効率的に文書作成を行いましょう。これにより、開発チーム全体の生産性を向上させることができます。

皆さんも、ぜひこれらの方法を試してみてください。きっと、文書作成にかかる時間を最適化できるはずです。
技術的な文書を維持するためのベストプラクティス


## はじめに
技術的な文書を維持することは、ソフトウェア開発において非常に重要です。特にスクラム開発のようなアジャイルな環境では、ドキュメントが最新で正確であることが求められます。この記事では、技術的な文書を効果的に維持するためのベストプラクティスについて紹介します。

## 1. ドキュメントの重要性を理解する
技術的な文書は、開発者間のコミュニケーションを円滑にし、プロジェクトの進行をスムーズにするための重要なツールです。ドキュメントがなければ、新しいメンバーがプロジェクトに参加する際に多くの時間を費やすことになります。

## 2. ドキュメントの種類を明確にする
技術的な文書には、設計ドキュメント、APIリファレンス、ユーザーマニュアルなど、さまざまな種類があります。それぞれのドキュメントがどのような目的で作成されるのかを明確にし、適切なフォーマットで作成することが重要です。

## 3. 継続的な更新を行う
技術的な文書は、プロジェクトの進行に伴って更新されるべきです。スクラム開発では、スプリントの終了時にドキュメントを見直し、必要に応じて更新することが推奨されます。これにより、ドキュメントが常に最新の状態に保たれます。

## 4. ドキュメントのレビューを行う
ドキュメントの品質を保つためには、定期的なレビューが必要です。レビューは、チーム全体で行うことが望ましく、異なる視点からのフィードバックを受けることで、ドキュメントの精度を高めることができます。

## 5. 自動化ツールの活用
最近のクラウドベンダーは、技術的な文書を自動的に生成・更新するためのツールを提供しています。例えば、APIドキュメントを自動生成するSwaggerや、インフラストラクチャの状態をドキュメント化するTerraformなどがあります。これらのツールを活用することで、手動での更新作業を減らし、効率的にドキュメントを維持することができます。

## 6. ドキュメントの可視性を高める
ドキュメントがどこにあるのか、誰がアクセスできるのかを明確にすることも重要です。クラウドストレージやバージョン管理システムを利用して、ドキュメントを一元管理し、チーム全体で共有することが推奨されます。

## まとめ
技術的な文書を維持することは、プロジェクトの成功に直結します。ドキュメントの重要性を理解し、継続的な更新とレビューを行い、自動化ツールを活用することで、効果的にドキュメントを維持することができます。これらのベストプラクティスを実践することで、チーム全体の生産性を向上させることができるでしょう。
JOSNデータからJavascriptオブジェクトを作成してみよう

::: note warn
「Jsonデータ」と「Javascriptオブジェクト」の構造は大変似ているが、両者はあくまでも別ものであることに注意。
「Jsonデータ」は文字列であり、「Javascriptオブジェクト」はオブジェクトである。
:::
## JSONデータを作成する
以下の通り、記述方法は３通りある。

``` javascript: sample_singleQuote.js
// シングルクォートで囲む場合
const userA = '{ "name": "John", "age": 30 }'
```

``` javascript: sample_backQuote.js
// バッククォートで囲む場合
const userB = `{ "name": "John", "age": 30 }`
```

``` javascript: sample_doubleQuote.js
// ダブルクォートで囲む場合
const userC = "{ \"name\": \"John\", \"age\": 30 }"
```
補足事項
1. 一対の`キー`（例：name）と`データ`（例：John）の組み合わせを「プロパティ」と呼ぶ。

2. 2つ以上のプロパティを記述する場合、プロパティとプロパティの間にカンマ（,）を挿入する。

3. `キー`と`値`はそれぞれダブルクォートで囲まなければならない。（「"name": "John"」）
ただし、`値`が「数値」の場合は、ダブルクォートで囲む必要はない。（"age": 30）

4. 「sample_doubleQuote.js」のようにJsonデータ全体をダブルクォートで囲む場合、キーや値を囲むダブルクォートをバックスラッシュ（\）でエスケープする必要がある。（「\\"name\\": \\"John\\"」）
  
## JsonデータをJavascriptオブジェクトに変換する
`JSON.parse()`メソッドを利用する。

``` javascript: sample.js
const jsonData = `{ "fruits": "peach", "color": "pink" }`
const jsonDataObject = JSON.parse(jsonData)
console.log(jsonDataObject)
```
``` javascript:出力結果
{fruits: "peach", color: "pink"}
```

## JavascriptオブジェクトをJsonデータに変換する
`JSON.stringify()`メソッドを利用する。
``` javascript: sample.js
const fruits = { fruits: 'peach', color: 'pink' }
const jsonFruits = JSON.stringify(fruits)
console.log(jsonFruits)
```
``` JSON: 出力結果
"{"fruits":"peach","color":"pink"}"
```
レビュアーはWhyとStoryを求めていて、レビューイは手本を求めている

こんにちは。Kaneyasuです。

みなさん、レビューはされていますか？ ソースコードレビュー、設計レビュー、手順書レビューなどがありますね。
私は最近レビュアーを務めることが多いですが、多くの場合、レビューを受けるのはしんどいですよね。
本記事では、レビューにおいて指摘された場合の対応について書いていきます。

本記事では、レビューにおいて指摘する側をレビュアー、指摘される側をレビューイと呼んでいます。

# 「素朴な質問なんだけど」の指摘への対策

レビューで「素朴な質問なんだけど」という言葉を使われることがあります。
この指摘は、レビュアーが現場を離れた上司や、分野の違う人の場合によく聞きます。
レビューの位置付けが承認である場合によく見られる傾向です。
鋭い指摘で答えがいのあることもありますが、的外れや心配しすぎなパターンも多く、レビューイとしては困ることもあります。
ここで黙ってしまうと、レビューが変な方向に行ってしまい、大幅な妥協を余儀なくされる可能性があります。

こういう指摘に対しては、まずは何か話しましょう。
もし他にメンバーがいる場合は、一旦他の人に振りましょう。
そして、頭を落ち着けて、今なぜこうなっているか？（＝Why）、今の内容で指摘されたことがもし起きたらどうなるか？仮に対策を打つとしたらどうするか？（＝Story）を答えましょう。
対策については、最悪今見せている内容には書かれていなくてもよいと思います。

「素朴な質問なんだけど」の指摘は、レビュアーの経験からの勘または防衛本能によるものが多いのですが、言った方もそこまで根拠のある指摘をしているわけではないので、100％の回答を求めてはいません。
したがって、毅然とした態度でそれなりの回答をすれば、それで十分です。

- 落ち着いていて、毅然とした態度である
- 柔軟性がある
- その人なりの考えが見られる

「素朴な質問なんだけど」の指摘をした側はもしかしたら気づいていないかもしれませんが、指摘をした側はこういうところを見ています。
「その人なりの考えが見られる」が一番大事で、WhyとStoryを答えることで、その人なりの筋が通っていることを示すことができます。
要は何かあってもなんとかしますよという意思を見せれば、多少内容を変更することになったとしても、大幅な妥協は回避できる可能性が高いです。

# 具体的ではあるが、淡白な指摘の対策

別のパターンです。
レビューにおいて、具体的には踏み込んでいるが、一言コメントのような淡白な指摘がされることがあります。
そして、このような指摘は五月雨式に来ることもあります。
一見すると冷たい指摘のように思えて、レビューイとしては不快感が溜まりますね。
これらは、レビュアーが現場の技術者で、ソースコードレビューなどでよく見られる傾向です。

この傾向も、結局のところレビュアーはWhyとStoryを求めているので、レビューイがそれらを答えることで、着地できることも多いです。
ただし、この傾向の場合、レビューイに対してのみ対策を求めるのは違うとも思います。
レビュー、特にコードレビューにおいては、一般的にレビュー内容はコードに対してであり、レビューイの人格に対してではないと言われます。
そうではあるのですが、指摘されっぱなしが面白いわけがありません。
できればレビュアーの方からも歩み寄りを見せてほしいものです。

仮定の話になってしまいますが、もしレビュアーの方がレビューばかりしているとしたら、もう少し手本となるコードを書くのに時間を割いてみてはどうでしょうか。
レビューイ側としては、手本もないのに試行錯誤して書いたものを指摘だけされては、不満が溜まりやすく成長のスピードも遅くなります。
手本を見せることで、レビューイの不満が緩和され、指摘が必要なアウトプットが減ることもあります。
それに伴い、レビュアーの負担も減るので、双方にメリットがあると思います。
遠回りになるかもしれませんが、結果的には効率が上がることもあるので、一考の価値はあると思います。
シェルで同じ文字（文字列）をn個繰り返した文字列を作るワンライナー

## はじめに

シェルのワンライナーでなるべく簡単に同じ文字または同じ文字列を指定した回数繰り返した文字列を作る方法です。

条件

- 出力の行末にはちゃんと改行をつける
- POSIX で標準化された機能のみで作る
- `head` コマンドは使わない（理由は後述）

## 基本: printfでn文字のスペース文字列を作る

まずすべてに共通する基本のコードとして n 文字のスペース文字列を作る方法です。`printf` コマンドの書式の末尾に改行があることに注意してください。

```console:見えないけど10文字のスペースがある
$ printf '%10s\n'
          
```

スペースだと分かりづらいと思う場合は代わりに 0 を使用する方法もありますが、BusyBox ashでは引数の 0 を省略するとエラーになってしまうため移植性が必要な場合は引数が必要です。その結果、少し長くなってしまいます。

```console
$ printf '%010d\n' 0
0000000000

$ busybox ash -c 'printf "%010d\n"'
ash: invalid number ''
0000000000
```

変数 `n` で長さを指定したい場合には次のようにします。

```console
$ printf "%${n}s\n"
          
$ printf '%*s\n' "$n"
          
```

**繰り返しの数をスペースの数で表現する**ことに気がつけば、いろんなものに応用することができます。

## 同じ文字を繰り返した文字列を作る

同じ文字の繰り返しを作る方法です。`tr` コマンドを利用します。

```console
$ printf '%10s\n' | tr ' ' =
==========
```

## 同じ文字列を繰り返した文字列を作る

同じ文字列（2文字以上の文字）の繰り返しを作る方法です。`sed` コマンドを利用します。

```console
$ printf '%5s\n' | sed 's/ /=+/g'
=+=+=+=+=+
```

ちょっとした応用ですが、このようにすれば最初と最後の文字を同じにすることができます。デザインに凝りたい場合に使えるでしょう。

```console
$ printf '%9s\n' | sed -e :a -e 's/ /=/; s/ /+/; ta'
=+=+=+=+=
```

## 同じ文字列を縦にn個繰り返す

縦に繰り返す方法です。`printf` コマンドの書式の末尾に改行がないことに注意してください。

```console
$ printf '%5s' | tr ' ' '\n' | sed 's/^/===/'
===
===
===
===
===
```

GNU sed や最近の BSD 系の `sed` に限られますが、次のような書き方もできます。

```console
$ printf '%5s' | sed 's/ /===\n/g'
===
===
===
===
===
```

## なぜhead -n Nを使わないのか？

出力の個数を制限する場合、`head` コマンドを使うことを思いつくかもしれませんが、`head -n N` を使用すると `SIGPIPE` のエラーが（内部的に）発生することがあります。そのため無限に出力して数を制限するよりも、出力の数を制限したほうが良いです。

```console:注意: yesはPOSIXコマンドではありません
$ set -o pipefail
$ yes === | head -n 5
===
===
===
===
===

$ echo $?
141
$ kill -l 141
PIPE
```

## さいごに

他にもいろいろやり方はあると思いますが、シンプルで移植性が高いという点ではこんなところではないかと思います。ブレース展開が POSIX で標準化されると良いんですけどね。

その他の方法（POSIXで標準化されていない拡張機能を使った方法）についてはこちらへ

- [Bashシェルスクリプトで任意の文字を繰り返し出力する方法](https://genzouw.com/entry/2020/10/29/211143/2094/)
ITパスポート 情報システム戦略と業務プロセス

・情報システム戦略
ITによる情報システムをどのように構築し、企業活動に活用していくのかという戦略
CEO（最高経営責任者）の統括の下で、CIO（最高情報責任者）が中心となり、経営戦略に基づいた情報システム戦略を立案することがポイント

・ITガバナンス
情報システム戦略の策定と実行をコントロールする組織能力のこと
国際規格 ISO/IEC 38500
国内規格 JIS Q 38500

・EA（エンタープライズアーキテクチャ）
現状の業務と情報システムの全体像を可視化し、将来のあるべき理想の姿を設定して全体最適化を行うときに用いる手法
情報システムの現状の姿（As-Isモデル）と、あるべき理想の姿（To-Beモデル）との差を分析（ギャップ分析）しながら、業務とシステムを「ビジネス」「データ」「アプリケーション」「テクノロジ」の四つの体系で分析し、全体最適化の観点から見直す

・情報システムの種類
・SoR（Systems of Record）
データを正確に記録することを重視した、従来からある内部向けの基幹システム
・SoE（Systems of Engagement）
顧客とのつながりを重視した、外向けの情報システム

・業務プロセスとモデリング
システム化の対象となる業務の一連の流れ（業務プロセスやビジネスプロセスという）やデータの流れを視覚的に図式化するモデリングを行う

・モデリング手法
・DFD
データの流れに注目し、業務のデータの流れと処理の関係を視覚的に表した図
記号 名称 意味
→ データフロー データの流れを表す
○ プロセス（処理） データの処理を表す
＝ データストア（ファイル） ファイルを表す
□ データの源泉と吸収 データの始まりと終わりを表す

・BPMN（ビジネスプロセスモデリング記法）
業務プロセスをワークフロー形式で視覚的に表した図
国際規格 ISO/IEC 19510

・業務プロセスの分析
・BPR
業務プロセスを抜本的に見直し再構築すること
・BPM
業務プロセスを継続的に改善していくこと

・BPO
自社の業務プロセスの一部、または全部を外部の専門的な事業者に委託すること

・ITの有効活用
・グループウェア
電子メールや電子掲示板を介したコミュニケーション、データ共有、スケジュールの一元管理などの機能をもち、共同作業の支援を行うソフトウェア

・RPA
PCで行う定型的な業務を、ソフトウェアで実現したロボットを使って、自動化や効率化を図ること

・BYOD
情報システム部門の許可を得て、私物のスマートフォン、タブレットなどのモバイル端末を業務に使用すること
・MDM
スマートフォンやタブレットなどのモバイル端末を一元管理する仕組み

・シャドーIT
情報システム部門の許可を得ずに、私物のスマートフォン、タブレット、さらには社外のクラウドサービスなどを業務に使うこと
プログラミング初心者がwebサービスを作ります。

プログラミング始めました！これからwebサービスを作りたいと考えております！
まだ、具体的に内容は決めていませんが、ゲーム募集の掲示板みたいなものを作ろうと考えております！
良ければですが、助言などしていただけると幸いです:eyes:
投稿 5 ACID特性他　2024/07/05

本日の勉強時間　2H

データベース、トランザクション処理
で求められてるACID特性。


▫️マインドに関して。
わからないことを調べるとき。

具体例から全体像、自分がどの程度知らないか、把握して解像度をあげる。
OllamaをWindows11にさくっとインストールしてGPUで動かすところまで持ってゆく

# ローカルでLLMを構築したい
2024年6月にAIエキスポに行ってきました。
チャットGPUブームが起きてからずいぶん経つのでローカルでLLMを構築してくれるサービスはないものかと思いながら見て回りましたが、クラウドでの構築というのがほとんどで、ローカルでLLMを構築してくれる業者は見つかりませんでした。

同僚にそんなことを話していたら、すでに簡単に構築する方法があることを教えてもらいました。すでにたくさんの記事が出ていますが自分のためにメモとして記録します。

# インストール
1. [Ollamaのページ](https://ollama.com)のトップページにあるダウンロードからDownload for Windows (Preview)を選んでダウンロードします。
2. OllamaSetup.exe を実行して適当に進んでいくとインストールが完了します。
2.1　proxy環境の人はインストール前にWindowsの環境変数にproxy情報を設定しておく必要があります。環境変数変更後は再起動が必要かもしれません。
2.2 「環境変数」を呼び出して「新規」で変数名「http_proxy」、変数値「192.168.x.x:8080（など、実行環境に合わせて変更）」と設定します。同様に「https_proxy」も設定します。
1. コマンドラインで ollama run llama3 などと入力するとllama3が動き出します。
使えるモデルはOllamaのページのModelsのリンクさきに掲載されています。

## GPUを使えるようにする
意外と詰まったのでメモしておきます。
上記のインストールだけだとOllamaはGPUを使ってくれないかもしれません。
私の環境ではNVIDIA GeForce GTX1650が刺さっていたのですがドライバなど何もインストールしていなかったので（汗）GPUが全く使われていませんでした。1からインストールしていきます。
1. [NVIDIA 公式ドライバのダウンロード](https://www.nvidia.com/ja-jp/drivers/)のページから自分の環境にあったドライバをダウンロードしてインストールします。
私の環境ではNVIDIA GeForce GTX1650なので「GeForce」→「GeForce GTX16 Series (Notebookx)」（PCはデスクトップだったのですがnotebooksという選択肢しかなかったのであえてこれを選択）→「GeForce GTX 1650」→「Windows 11」→ 「Jpanese」→探す、で「NVIDIA Studio ドライバー」をダウンロードしてみました。
1. 次に[はかな鳥](https://note.com/hcanadli12345/n/nb8cf59ca2596#abb4464f-649a-498b-a30b-a58ca2a83b71)さんの記事を参考にして「Build Tools for Visual Studio」のインストール、「CUDA Toolkit」のインストールを行い再起動しました。

## GPUの使われ方
ここまでのインストールでGPUが使えるようになりました。
試しに「こんばんは、暑いですね」と打ち込んでみたところGPU使用率は20％程度どまりで、CPUが100％近く動いています。なんで？と思って次に以前書いた私のQiitaの記事を読ませたところ、今度はGPUがしばらくの間100％に張り付いてくれました。
どうやら、入力を理解しようとするときにGPUが使われ、文書を生成するときにはCPUが使われているみたいです。

## とりあえず今晩はここまで
同僚はOllamaのライブラリにないLLMモデルを使えるようにしたり、LLMのチューニングをしたりしていますが、私が今理解しているのはここまでです。
機会があればこの記事を更新してゆきます。
おやすみなさい。
Javaで「文字列の先頭と末尾から空白文字を取り除く」の動作を確認してみた

# 概要

Javaで「文字列の先頭と末尾から空白文字を取り除く」の動作を確認してみました。
以下のページを参考にしました。

https://www.javadrive.jp/start/string/index8.html

# 実装

以下のファイルを作成しました。
```JSample8_1.java
class JSample8_1{
  public static void main(String[] args){
    String msg1 = " AB CD ";
    String msg2 = "\tAB CD\n";
    String msg3 = "　AB CD　";

    System.out.println("[" + msg1 + "]");
    System.out.println("[" + msg1.trim() + "]");
    System.out.println("[" + msg2 + "]");
    System.out.println("[" + msg2.trim() + "]");
    System.out.println("[" + msg3 + "]");
    System.out.println("[" + msg3.trim() + "]");
  }
}
```

```JSample8_2.java
class JSample8_2{
  public static void main(String[] args){
    String msg = "　AB CD　";

    System.out.println("[" + msg + "]");
    System.out.println("[" + msg.strip() + "]");
    System.out.println("[" + msg.stripLeading() + "]");
    System.out.println("[" + msg.stripTrailing() + "]");
  }
}
```

以下のコマンドを実行しました。
```
$ javac JSample8_1.java 
$ java JSample8_1 
[ AB CD ]
[AB CD]
[	AB CD
]
[AB CD]
[　AB CD　]
[　AB CD　]
```

```
$ javac JSample8_2.java 
$ java JSample8_2 
[　AB CD　]
[AB CD]
[AB CD　]
[　AB CD]
```

# まとめ

何かの役に立てばと。
LLVM IRの勉強メモ #4

個人的な学習メモです。

### functions[^1]

関数定義は、"define"キーワードと関数名、オプションのリンクタイプ、ランタイムプリエンプション指定子、呼び出し規約、パラメータアトリビュート、関数アトリビュート、アラインメント、メタデータ情報などからなる。

```txt
define [linkage] [PreemptionSpecifier] [visibility] [DLLStorageClass]
       [cconv] [ret attrs]
       <ResultType> @<FunctionName> ([argument list])
       [(unnamed_addr|local_unnamed_addr)] [AddrSpace] [fn Attrs]
       [section "name"] [partition "name"] [comdat [($name)]] [align N]
       [gc] [prefix Constant] [prologue Constant] [personality Constant]
       (!name !N)* { ... }
```

```txt:example
define void @f(ptr noundef %0, ptr noundef %1, ptr noundef %2, i32 noundef %3) #0 {
```

関数宣言は、"declare"キーワードと関数名、オプションのリンクタイプ、アドレス空間、戻り値型、呼び出し規約、アラインメントなどからなる。

```txt
declare [linkage] [visibility] [DLLStorageClass]
        [cconv] [ret attrs]
        <ResultType> @<FunctionName> ([argument list])
        [(unnamed_addr|local_unnamed_addr)] [align N] [gc]
        [prefix Constant] [prologue Constant]
```

関数定義には基本ブロックのリストが含まれ、関数のCFG（コントロール・フロー・グラフ）を形成する。各基本ブロックは、オプションでラベルをつけることができる。また、命令とデバッグレコードのリストを含み、分岐や関数リターンなどの終端命令で終わる。明示的なラベル名が提供されないときは、ブロックには暗黙的に番号付きラベルが割り当てられる。

```txt:example
define void @f(ptr noundef %0, ptr noundef %1, ptr noundef %2, i32 noundef %3) #0 {
  %5 = alloca ptr, align 8
  %6 = alloca ptr, align 8
  %7 = alloca ptr, align 8
  %8 = alloca i32, align 4
  %9 = alloca i32, align 4
  store ptr %0, ptr %5, align 8
  store ptr %1, ptr %6, align 8
  store ptr %2, ptr %7, align 8
  store i32 %3, ptr %8, align 4
  store i32 0, ptr %9, align 4
  br label %10

10:                                               ; preds = %30, %4
  %11 = load i32, ptr %9, align 4
  %12 = load i32, ptr %8, align 4
  %13 = icmp slt i32 %11, %12
  br i1 %13, label %14, label %33
```

関数の最初の基本ブロックは、関数の入口で即座に実行され、先行する基本ブロックを持つことができない。（PHIノードも持つことができない）
アラインメントは2の冪乗で明示的に指定することもできる。

[^1]: https://llvm.org/docs/LangRef.html#functions
Javaの継承とオーバーライドについて

## 背景
Javaの資格勉強をしている際に、なかなか理解できなたったところの備忘録。
きっとJavaを触り始めた人でもなかなか難しいところ（のはず）だと思うので、わかりやすく簡単に書くよ。

以下のキーワードを踏まえたうえで、解説していくよ。
### キーワード
```
継承：クラスの中身の変数やメソッドをそのまま受け継がせること。
オーバーライド：スーパークラスのメソッドと戻り値の方、メソッド名、シグニチャが同じメソッドを再定義できること。
```
## 継承とオーバーロード
早速だけど説明するよりコードを見た方がはやいのでサンプルコードを書くよ。
```java
1.  class SuperSample {
2.      String val = "Super";
3.      void print() {
4.          System.out.print(val);
5.      }
6.  }
7. 
8.  class SubSample extends SuperSample {
9.      String val = "Sub";
10.  }
```
```java
1.  public class Main {
2.      public static void main(String[] args) {
3.          SuperSample super = new SuperSample();
4.          SuperSample sub = new SubSample();
5.          System.out.print(super.val);
6.          System.out.print(sub.val);
7.          super.print();
8.          sub.print();
9.      }
10. }
```
上記のようなコードで、メインクラスを実行した場合に出力される文字がなにかを考えていくよ。
結論から書くと、`SuperSuperSuperSper`と出力されるよ。
前提として、サブクラスのインスタンスはスーパークラスのインスタンスと差分のインスタンスで構成されるので、SubSampleクラスには2つのフィールドが存在することになっているよ。ここでは、その2つのフィールドのどちらが利用されるのかを理解する必要があって、その見極め方は次の通り。
```
フィールドを参照した場合、変数の型で宣言された方
メソッドを呼び出した場合、メソッド内の指示に従う
```
つまり、mainクラスの5,6行目では`フィールドを参照`していて、どちらも`変数の型はSuperSample型`なので、どちらも`SuperSampleのフィールドが出力`されるよ。
mainクラスの7,8行目では`メソッドを呼び出し`ていて、`print()`はSuperSampleクラスに定義されているので、`同じクラスに定義されているフィールド`を出力するよ。従って、どちらも`SuperSampleクラスのフィールドが出力`されることになるよ。

でも、ここでもし、SuperSampleクラスのメソッドprint()をSubSampleクラスで再定義（オーバーライド）していると、少し動きが変わるよ。
```java
1.  class SuperSample {
2.      String val = "Super";
3.      void print() {
4.          System.out.print(val);
5.      }
6.  }
7. 
8.  class SubSample extends SuperSample {
9.      String val = "Sub";
10.     void print() {
11.         System.out.print(val);
12.     }
10.  }
```
このように、SubSampleクラスでSuperSampleクラスのメソッドをオーバーライドすると、mainクラス8行目で、`SubSampleクラスのメソッドprint()が動作`するので、Subと表示されるようになるよ。
つまり、出力結果としては、`SuperSuperSuperSub`となるよ。
これは、SubSample(差分インスタンスを持っている状態のもの)をSuperSample型として扱っているだけで、差分は持っている状態だよ。その差分に`オーバーライドしたされたメソッドがあればそちらを優先して利用する`からだよ。

## まとめ
継承とオーバーライドについて押さえておくべきポイントをまとめるよ。
```
フィールドを参照した場合、変数の型で宣言された方
メソッドを呼び出した場合、メソッド内の指示に従う
オーバーライドしたされたメソッドがあればそちらを優先して利用する
```
iTerm2のAIプラグインを試してみた

iTerm2にAI機能ができたので試してみました。これはChatGPTにアクセスしてコマンドを検索・生成できるという機能です。また、プロンプト自体をカスタマイズすることもできるようです。
(iTerm2 Version 3.5)

## 導入方法
この機能はiTerm2の拡張機能で、公式サイトからインストールします。ChatGPTはAPIを使っており、OpenAIで発行したAPIキーが必要になります。

iTerm2で[Edit]>[Engage Artificial Intelligence]を開きます。
Setting>General>AIが開かれます。プラグインがインストールされていない場合、"Plugin not found"が表示されるので、"Install"をクリックします。
<img width=600 alt=s1 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490241/1cf04bf2-a934-343a-69e1-513eaf746a9c.png>

ブラウザでiTerm2のAIプラグインのページが開かれるので、Downloadをクリックします。
<img width=600 alt=s1 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490241/900d3261-95a5-ca3b-3f2e-3dccc4cf680a.png>

ダウンロードしたファイルは、アプリケーションに配置することで使えるようになります。
<img width=600 alt=s1 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490241/9a914151-490c-d67d-15d7-06abbd080ffe.png>

ここで再度、iTerm2で[Edit]>[Engage Artificial Intelligence]を開くと"Plugin installed and working"にチェックがついていると思います。
<img width=600 alt=s1 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490241/31d72dbc-4f37-1744-4853-040322a5c1ee.png>

"Enable generative AI features"にチェックを入れ、OpenAI API Keyを入力します。API Keyの説明は[公式ページ](https://platform.openai.com/docs/api-reference/authentication)をご覧ください。
この画面では、AI Promptでプロンプトのカスタマイズ、ModelでAIモデルの選択などができます。
これでAIプラグインの導入は完了です。

## 使い方

iTerm2のコマンドシェルを開き、Cmd-yを打つとプロンプト画面が開きます。
ここで、例えば以下のように書いてみますと、helloと5回echoするためのコマンドをChatGPTが教えてくれます。

<img width=400 alt=s1 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490241/a9f03998-598b-9dd9-7f33-f51c87736236.png>
↓
<img width=600 alt=s1 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490241/3a8cf904-5743-226a-37f0-db0988f588a9.png>

これでShift+Returnを押すとコマンドが入力されます。
OpenAIのAPIは課金式ではあるものの価格は非常に安いので、iTermを多用するなら使える機能なのかなと思いました。
N9k NTP設定メモ

Nexus9000V NTP設定メモ

●トポロジ
(CMLのN9k(NTPクライアント) → IOSV(NTPサーバ)へ接続)
![topology (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831800/df2dddbb-896d-c95c-ec04-3c9aabecb72b.png)

①NGパターン
●NTP関連設定
(NTP送信IFが所属しているVRF(managemnt)とNTP同期の送信元VRF(default) が異なる）
```
ntp server 192.168.1.208 use-vrf default    ★NTP同期の送信元VRF
ntp source-interface mgmt0                  ★NTP同期の送信元IF

interface mgmt0
  vrf member management                     ★NTP同期の送信元IFが所属するVRF
  ip address 192.168.1.207/24
```

●上記のconfigが投入されている場合のNTP同期状況
```
Nexus9000V# show ntp statistics peer ipaddr 192.168.1.208
remote host:          192.168.1.208  
local interface:      192.168.1.207  
time last received:   31s
time until next send: 3s
reachability change:  31s
packets sent:         2                     ★NTP syncパケットが送信されている(OK)
packets received:     0                     ★NTP syncパケットが受信されていない(NG)
bad authentication:   0
bogus origin:         0
duplicate:            0
bad dispersion:       0
bad reference time:   0
candidate order:      0
```

②OKパターン
●NTP関連設定
(NTP送信IFが所属しているVRF(managemnt)とNTP同期の送信元VRF(management) が同一）
```
ntp server 192.168.1.208 use-vrf management ★NTP同期の送信元VRF
ntp source-interface mgmt0                  ★NTP同期の送信元IF

interface mgmt0
  vrf member management                     ★NTP同期の送信元IFが所属するVRF
  ip address 192.168.1.207/24
```

●上記のconfigが投入されている場合のNTP同期状況
```
Nexus9000V# show ntp statistics peer ipaddr 192.168.1.208
remote host:          192.168.1.208  
local interface:      192.168.1.207  
time last received:   4s
time until next send: 12s
reachability change:  20s
packets sent:         2                     ★NTP syncパケットが送信されている(OK)
packets received:     2                     ★NTP syncパケットが受信されている(OK)
bad authentication:   0
bogus origin:         0
duplicate:            0
bad dispersion:       0
bad reference time:   0
candidate order:      0
```
つまらない仕事を要求された時の考え方について

# はじめに
新人とか若手とか、または案件の新規参入時は得てしてつまらない仕事を振られがちです。
例）
　議事録
　単純な資料作成
　ログ抽出、ログ整理
　テスト結果の整理、レポートにまとめる
　etc… and more!!!

あげたらキリが無いですが、、
<font color="Red">**はじめの頃に振られる比較的簡単な作業で手を抜いたら次の仕事は無い**</font>と思って下さい。

# どういうこと？
簡単な作業も出来ない人、とラベリングされて次のステップにいけません。
簡単な作業だからこそ、丁寧に且つ余裕があるスケジュール感で確実に終わらせましょう。
※期日ギリギリの報告も絶対ダメ

また、他のタスクの割り込み作業がー、とか理由はいろいろあると思いますが、
平気で期日過ぎてもなんにも報告しないやつも絶対ダメです。
こういうやつは上司から突っ込まれて初めて報告するやつですが、基本自分から主体的に動きましょう。

例)
　議事録なら、MTGが終わった後の一時間以内に展開する。
　期日まで一週間あるなら、期日2-3日前に終わらせ報告しておく。

# 報告する側からの目線
ある程度経験年数のあるエンジニアでも、
新規参画した案件ではいきなり難易度の高い作業を振られることはあまりない気がします。
特にお初のお客さんからは。

当たり前ですが、客から見たら本当に出来る人なのかどうかは作業の結果を見ないと分かりません。
事前に経歴書に目を通し面談をして人を入れたとしても、本当に期待通りの仕事をする人なのかどうかは蓋を開けてみないと分からないということです。

そのため、最初はある程度経験年数のあるエンジニアに対してもお試しで作業を振ることになります。
最初に振る比較的簡単な作業（つまりあまり面白くない仕事だ）を確実に実施しない、ミスが多い、期日を守らない状態であれば確実に顧客から切られます。

これは社内エンジニアでも同様で、
上司の立場からしてみれば簡単な作業もできない人間に他の作業を回す気にはなれないということです。

つまり、つまらない仕事をダラダラと何も改善しようとしない人は、
ずーーーっとそのまんまです。

# 次のレベルに行くために
逆に最初に振られる仕事を確実にこなし、ミスがほぼなく、多少でも良いから期日に余裕のある状態で報告してくれれば、報告される側としては非常にありがたいと感じるし、**このレベルであればもう少し難易度の高い作業を振っても良いか**と考えます。

得てして、難易度の低いやりごたえのない作業（単純作業など）はつまらない作業です。
また、同じ作業をずっとやり続けさせられる可能性もあるため、自分で自分の可能性を閉ざすしている、とも言えます。

# 最後に
簡単な仕事でも、つまらないと感じ仕事でも、確実に結果を出しステップアップしましょう。
また、報告される側にとってどういう状態で報告されると良いのか？という視点を持つことも重要です。

つまらない仕事で期日に余裕があるからといって、居眠りしながらダラダラ仕事するのは絶対ダメ:angel:

以上
無料でDocker を使う方法。つまりDocker Desktop を使用せずにDockerを使用する方法。

# 初めに
数年前(2021年)にDocker Desktopが有料になったみたいです。そうなってからはUbuntu上でDockerをインストールして扱う事が主流らしく。その環境構築に苦戦した為、忘備録として残します。
記載する上で生成AIを参照もしましたが、理解できる範囲でしか記載しておりません。
(知ったかぶりや鵜呑みはしてないよ。)

## 要件
・2024年7月に実装
・windows11

# 手順1 WSL&Ubuntuをインストール
まずはwslがインストールされているかを確認します。下記のコマンドを実行してください。
```
wsl --list --verbose
```
インストールされているならば下記の通りになるはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2719278/4ec056f9-50e4-4a2d-e3bf-62e0c7da47d3.png)
初めてインストールする場合は、下記コマンドを実施してください。
(確か僕はcmdで行ったような記憶があります...)

インストールされていないならば、下記のコードを実装してください。
```
wsl --install
```
どんな動作かというと...
- WSL2がインストールされます。
- Ubuntuがインストールされます。
これはデフォルトのLinuxディストリビューションで、このUbuntu上で色々作業します。

:::note info
・上手く行かなかった場合、管理者権限 で実行してください。
・ユーザー名とパスワードを求められるので準備してください。
:::


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2719278/f31bcd41-c362-d19a-a48d-c8ba6354269f.png)


これでインストールが出来るはずなので確認してみてください。
確か再起動してその後にユーザー名、パスワードが求められたような気もします。
適宜状況に応じて再起動も視野に入れてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2719278/c00af39c-925d-b727-2574-20ff690285fe.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2719278/71f78ca6-936f-8cba-455f-227d4f424e5b.png)

# 手順2 Ubuntu上でDockerをインストール
まずはUbuntuを開いてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2719278/defe9167-57a5-05c8-142e-d5e3dbe9185d.png)

### **・1** 下記のコマンドを実施してください。
```
sudo apt update
```
- sudo : superuser do 管理者権限でコマンド実行
- apt  : Advanced Package Tool 
意味は、Linuxがどんなソフトウェア(apt)をシステムとして認識できるのかを、最新化する事。
その認識したソフトウェアをアップデートしたりインストール自体を行う訳ではない。

### **・2** 下記のコマンドを実施してください。
```
curl https://get.docker.com | sh
```
- curl : URLからデータをダウンロードできる
- sh :curlコマンドから渡されたデータがシェルで実行。

確か最初はcurlコマンドを使うソフトウェアがインストールされていなかったと思うので、
エラー内容を見てから curlをインストールしてください。
```
sudo yum install curl
```

### **・3** 下記のコマンドを実施してください。
```
sudo apt install -y docker-compose
```
docker-composeソフトウェアのインストール。 -y はインストール中の確認にてyesを押すという意味。

# 手順3 確認
wslの再起動やウィンドウを閉じて開いた後に確認してみましょう。
同じくUbuntu上で下記のコードを1行ずつ実施して反応を確かめてみてください。
```
docker --version
sudo service docker start
sudo service docker status
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2719278/357d1698-7b4c-c4a7-6e99-be82e1aa06e5.png)


# 終わりに
ここ最近環境構築のサポートをする機会があって、理解度確認のために書いてみました。
次回は VSコードを用いてwsl上でDockerコンテナ構築して開発環境を整える方法について説明できればと思います。(git を用いてリモートからデータを取ってきて自分のコンテナ上で開発をする...みたいな)

トラブルシューティングはAIや下記サイトを参照にして頂ければ。



# 参照
[WindowsでもサクサクDocker (Docker on WSL2 without Docker Desktop)](https://zenn.dev/rhene/articles/docker-on-wsl2-without-docker-desktop)
[Windows11 または Windows10 に WSL2 をインストールする](https://zenn.dev/rhene/articles/wsl2-on-win11-or-win10)
[sudo apt-get update と sudo apt-get upgrade の違いは何ですか?](https://note.com/yutaworklife/n/n83feff4763cc)
フォント取り込みの失敗を防ぐ！iOSアプリでのカスタムフォント導入とテスト手順


カスタムフォントを取り入れたつもりが、実装不具合で取り込めていないことがあったので、フォントが正しく取り込めていることを確認するためのテストコードの実装を紹介します。

## カスタムフォントを取得する手順

### 1. .ttfファイルからフォントを読み込み、プロジェクトに追加する

.ttfファイルや.otfファイルは以下のリンクからダウンロードできます。今回は**Zen Kaku Gothic New**を使用します。

https://fonts.google.com/specimen/Zen+Kaku+Gothic+New?subset=japanese&noto.script=Hira

ダウンロードした.ttfファイルをプロジェクトにドラッグ＆ドロップし、ファイルがターゲットに含まれていることを確認してください。

### 2. Info.plistにフォント名を追加する

`Fonts provided by application`（または `UIAppFonts`）というキーを追加します。そのキーに、プロジェクトに追加したフォントファイルの名前を配列として追加します。

### 3. フォント名を取得するコード

以下のコードは、特定のフォント名がシステムに含まれているかを確認するクラスです。

```swift:ContentView.swift
class FontManager {
  func containsFont(_ name: String) -> Bool {
    return UIFont.familyNames
      .flatMap { UIFont.fontNames(forFamilyName: $0) }
      .contains(name)
  }
}
```

### 4. テストコードを書く

それぞれのフォントのテストケースを定義することで、フォントが取得できていることを確認できます。

```swift:showFontFamilyTests.swift
import XCTest
@testable import showFontFamily

final class showFontFamilyTests: XCTestCase {

  let fontManager = FontManager()

  override func setUpWithError() throws {
  }

  override func tearDownWithError() throws {
  }

  func testContainZenKakuGothicNewBlack() throws {
    let result = fontManager.containsFont("ZenKakuGothicNew-Black")
    XCTAssertTrue(result)
  }

  func testContainZenKakuGothicNewBold() throws {
    let result = fontManager.containsFont("ZenKakuGothicNew-Bold")
    XCTAssertTrue(result)
  }

  func testContainZenKakuGothicNewLight() throws {
    let result = fontManager.containsFont("ZenKakuGothicNew-Light")
    XCTAssertTrue(result)
  }

  func testContainZenKakuGothicNewMedium() throws {
    let result = fontManager.containsFont("ZenKakuGothicNew-Medium")
    XCTAssertTrue(result)
  }

  func testContainZenKakuGothicNewRegular() throws {
    let result = fontManager.containsFont("ZenKakuGothicNew-Regular")
    XCTAssertTrue(result)
  }
}
```

## 参考リンク


https://fonts.google.com/?subset=japanese&noto.script=Hira
CI/CD の基本

# CI/CD とは :beginner:
CI/CD（Continuous Integration / Continuous DeploymentまたはContinuous Delivery）は、ソフトウェア開発プロセスを効率化し、品質を向上させるための手法です。これにより、開発チームはコードの変更を継続的に統合し、テストを自動化し、プロダクション環境に迅速にデプロイすることができます。

### CI（継続的インテグレーション）
概要
CIは、開発者がコードをリポジトリに頻繁に統合するプロセスを指します。各統合は自動化されたビルドおよびテストによって検証され、バグの早期発見と修正を促進します。

#### 特徴
頻繁なコミット: 開発者は小さな変更を頻繁にリポジトリにコミットします。
自動化されたビルド: コードの変更がリポジトリにコミットされると、自動的にビルドプロセスが開始されます。
自動テスト: ビルド後、テストスイートが自動的に実行され、コードの品質が検証されます。
#### 利点
早期のバグ発見: 小さな変更ごとにテストが行われるため、バグの早期発見と修正が可能です。
統合の頻度向上: 頻繁に統合することで、統合の難易度が低減されます。
開発速度の向上: 継続的な統合により、開発プロセスが効率化されます。
### CD（継続的デリバリー/継続的デプロイメント）
継続的デリバリー（Continuous Delivery）
継続的デリバリーは、コードが常にデプロイ可能な状態にあることを保証するプロセスです。自動化されたテストとリリースプロセスにより、コードの品質が確保され、手動でデプロイを行う準備が整います。

### 継続的デプロイメント（Continuous Deployment）
継続的デプロイメントは、継続的デリバリーをさらに進めたもので、コードの変更が自動的にプロダクション環境にデプロイされます。これにより、人為的なエラーを排除し、迅速なデプロイが可能となります。

#### 特徴
自動化されたリリースパイプライン: テストからデプロイまでのプロセスが自動化されます。
一貫したデプロイ: 同じパイプラインを使用することで、各環境へのデプロイが一貫して行われます。
フィードバックループの短縮: フィードバックサイクルが短縮され、迅速な改良が可能となります。
#### 利点
迅速なリリース: コードの変更が迅速に本番環境に反映されます。
高品質の維持: 自動化されたテストにより、品質が常に保証されます。
デプロイの安定性: 一貫した自動デプロイにより、エラーのリスクが低減されます。

# まとめ
CI/CDは、ソフトウェア開発プロセスを効率化し、品質を向上させるための強力な手法です。継続的インテグレーションにより頻繁な統合とテストが可能となり、継続的デリバリーおよびデプロイメントにより迅速かつ安定したリリースが実現します。CI/CDを導入することで、開発チームはバグの早期発見と修正、迅速なフィードバック、そして高品質なソフトウェアの提供を継続的に行うことができます。
jQuery　勉強（属性フィルタ）

お疲れ様です。

今日は、昨日のアニメーションのコードについての復習と、jQueryの勉強を始めました。
JavaScriptと似通ったところはあれど、やはりまだコードを書きなれないので、これからどんどん手を動かす学習をしていきたい…

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810013/e780ee03-eadd-415a-1c7d-a2fde25b52a2.png)

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810013/1588078c-4ce3-1e0e-a95e-4e48e8da2794.png)

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810013/044bb669-1069-4860-c5a8-5462dbb4b6e2.png)

今日は初歩中の初歩である、属性フィルターについて勉強しました。
3パターンの文字列検索ができるので、これらの意味をちゃんと覚えようと思います。

**^ … 部分一致**
***… 前方一致**
**$ … 後方一致**

これだと、class属性の先頭に「sample」を含むものだけが取得されることになるので、コンソールに出ている通り、項目2と項目3が表示されているということです。

後方一致のsampleの場合、class属性の名前が「abcsample」など、末尾にsampleの文字列が含まれるようにすればいいということのようです。
続きはまた明日やっていきます。
Sequence Makerでステップ実行したりコマンドを単発送信🚀する

## はじめに
Sequence MakerはExcelから測定器を制御可能にするアドインです。Sequence Makerでシーケンスを組み始めると、時々通信コマンドのエラーに遭遇したりします。原因は様々で、コマンドのスペルミスをしているとか、パラメータが間違っているとかいろいろとありますが、どこの箇所でエラーが発生しているのかすぐにわからない場合があります。そんな時はコマンドを1つずつ送ってステップ実行するのが解決の近道です。この記事ではその方法を解説します。Sequence Makerについての詳細は以下の記事を参照ください。

https://qiita.com/sequencemaker/items/8e6a370ab0a793a06a3b

:::note warn
***お断り***
本記事の内容はSequence Maker開発元の公式見解ではなく、あくまでも個人が趣味の範囲内で執筆しているものです。記事の内容について開発元へ問い合わせることはお控えください。ご質問・要望などは各記事のコメント欄へお願いいたします。
:::

## 方法1：「コマンド送信前に確認」機能を使用する
Sequence Makerにはコマンドを送信する前に確認ウィンドウを出して「OK」をクリックしたら次に進む機能があります。使い方はオプションの「コマンド送信前に確認」にチェックを入れるだけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821782/1f3704f8-5fef-ea2b-36f4-5d66d0c35dc2.png)

チェックを入れてシーケンスを開始すると、確認ウィンドウが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821782/e971ff12-7204-fe89-f392-98e57c3d52a3.png)

「OK」を押していけば、ステップ実行ができるので、エラー個所の特定が容易になります。なお「OK」ボタンはエンターキーでも押せるので、ステップ数が多い場合はそちらの方が楽かもしれません。


## 方法2：単発送受信ボタンを使用する
Sequence Makerには「コマンド送受信」ボタンの他に、「単発送受信」ボタンがあります。ツールの中です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821782/a17c9151-0409-91c3-e89a-46b721a868df.png)

このボタンを押すと、カーソル位置にあるコマンドだけを送受信できます。1個送って終了です。コマンドを選択する手間はありますが、ちょっと試しに送ってみたいコマンドを選択してサクッと送りたいときには便利です。

## コマンドモニターも便利
デバッグ作業にはコマンドモニターも役立ちます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821782/a9e5e7cc-ade4-8fc1-8725-8638a99e9032.png)

詳細は以下の記事を参照してください。

https://qiita.com/sequencemaker/items/6e8dff0cf8d836191c18

## まとめ
Sequence Makerでデバッグするときは、ステップ実行したりコマンド単発送信を上手に使っていきましょう。
Misskeyインスタンスを一年間運営してみて

# はじめに
先日、私の運営するMisskeyインスタンス、[しゃふすきー](https://shahu.ski/)が、一周年を迎えました。
この記事では、しゃふすきーを建ててからの一年間を、あることないこと懐かしみながら振り返りたいと思います。

# そもそもMisskeyって何よ
一時期話題になり、トレンドにもなっていたため、ご存じの方も多いかと思いますが、Misskeyは所謂、分散型SNSと呼ばれるものです。

Twitter(自称X)や、Instagram、BeRealなどの中央集権型SNSとは異なり、特定の企業や管理者が存在しない、(広義の意味で)分散されたSNSです。
複数のインスタンスが存在し、ユーザーはその中から選んで参加することができます。

Misskeyは[Fediverse](https://ja.wikipedia.org/wiki/Fediverse)と呼ばれる複数のソフトウェアで構成される相互接続網に属しており、他のインスタンスともやり取りが可能です。

# 私とMisskey
私がMisskeyを知ったのは、コロナ禍真っ只中、自粛期間中のことでした。

その後しばらく忘れていたのですが、イーロンによるTwitterでのごたごたをきっかけに、新しい移住先のSNSを探している中でふとMisskeyを思い出し、「これだ！これだ！私がめっちゃ求めていたのはこれだ！！」と思い、ioに登録したことが始まりです。

投稿するや否や、たくさんのリアクションをいただき、一日と経たずに、晴れて私はミス廃デビューを果たしました。

misskeyに限った話ではないかもしれませんが、空リプが基本の文化とGTLのリアルタイム感で深夜の孤独感が希釈されます。最高です。

毎日の起床就寝報告や、どうでもいい些細な話題にもたくさんのリアクションがついて幸せでした。(カスタム絵文字の機能いいですよね)

# 私の鯖缶記
ここからが本題、だいじなとこです。わたし、鯖缶になります。

## 鯖立てへの道のり
ioに住んでいた経験がある方ならお分かりかと思いますが、あそこ、かなり重いんです。

どうせなら自分でサーバーを立ててしまおうと思い立ち、色々と調べてみたところ、意外と簡単に立ち上げられそうだったこともあり、鯖を建てることを決意しました。

一人用のインスタンスでもよかったのですが、私は孤独が苦手なので「いろんな人と関われるいい感じのコミュニティーを作りたいな～」という漠然とした思いから公開サーバーにしました。

幸いなことに、PostgreSQLもRedisもVueも触ったことがあったので、いざとなったら自分でなんとかできるだろう、と楽観的に考えていました。

サーバーの立ち上げ自体はそれほど大変ではありませんでしたが、一番苦労したのは利用規約とプライバシーポリシーの整備です。
~~ポリシー系の整備は、個人開発でも然り、本質とずれた作業で、面倒だと感じるものランキングがあるとすればダントツの1位だと思います。~~

しかしながら、公開インスタンスとして運営する以上、何か問題が起こった際の~~責任逃れの道を用意し~~自分へ降りかかるかもしれないリスクを少しでも減らしておく必要があります。

解釈の余地を残してモデレーションの柔軟性を保ちつつ、ある程度具体的に明文化したものを作るのに苦労しました。

## しゃふすきー爆誕
7月4日、しゃふすきーが爆誕しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3283241/618e5942-0585-a5d1-5983-82f61f1aa7b1.png)

当時は、現在のドメイン(shahu.ski)ではなく、genkaishahu.comでした。

立ち上げてからの最初の1か月間は、オンラインの人数が多くても3人ほどの、とても静かなサーバーでした。

しかし、ありがたいことに頻繁に書き込んでくれる方が何名かおり、リアクションも活発に飛び交い、SNSとしての機能はしっかり果たしていました。

最初に自分以外の方がTLに現れたときの感動は忘れません。

## サーバーダウンとDBの爆破
運営開始から3ヶ月が経ち、アクティブユーザーも少し増えてきた頃、事件が起こりました。
そう、サーバーが死んだのです。

当時、Proxmox上に複数のLXCコンテナを立ち上げ、PostgreSQL、Redis、Misskey本体、meilisearchをそれぞれ別々に動かしていたのですが、Proxmoxごと死んでました。
(詳しい原因は最後までわかりませんでしたが、おそらくLXCがホストのカーネル巻き込んで死んでたことが推測されます)

幸いなことに、DBのダンプを別の場所にバックアップしていたので、そこからの復旧を試みました。

しかし、データに不整合と欠損があり、2日間にわたる必死の格闘の末、うまくいかず、新しいドメインでやり直すこととなりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3283241/6c7080c5-9a23-d92f-ef9a-31386e0c2bee.png)

:::note info
Misskey(というかFedi系全般)では、一度DBを爆破してしまうと連合の都合上、同じドメインが使えないため、苦しむことになります。
:::

これ以降、バックアップ先をr2に変更し、定期的に手動で中身を確認するようになりました。
(Misskeyの場合、最悪PostgreSQLのデータだけ生きていればなんとかなりますからね。多分。)


## 独自フォークへの移行
バニラのMisskeyでは、機能がやや不足していたり、細かい実装が足りなかったりすることがあったため、[独自にフォーク](https://github.com/team-shahu/misskey)してそちらへ切り替えることにしました。

Misskeyのコードに触れるのは初めてで手探りの状態でしたが、いくつかの機能を実装・テストし、無事にローンチすることができました。

独自フォークに移行したことで、自分たちのニーズに合わせたカスタマイズが可能になりました。
本家では実装されないような[カスタムフォント機能の追加](https://github.com/team-shahu/misskey/pull/8)や[すでにある機能の拡張・改善](https://github.com/team-shahu/misskey/pull/11)など、他にも幾つかの変更を行いました。

今後も自鯖のニーズに合わせてぼちぼち開発していくつもりです。

# おわりに
振り返ってみると、しゃふすきーを立ち上げてからの一年間は本当にあっという間でした。

この一年でいろんなことを学びました。
技術的な知識もそうですが、コミュニティ運営の大変さや楽しさも実感しました。

最後に、しゃふすきーを支えてくれた全てのユーザーに感謝です。
皆さんのおかげで、一周年を迎えることができました。
これからもよろしくお願いします！

以上、私のMisskeyインスタンス運営一年の振り返りでした！

この記事が、これからインスタンスを立ち上げようとしている方や、運営に興味がある方の参考になれば嬉しいです。

それでは。
JavaScript で色情報を様々扱えそうな「Color.js」を p5.js で使ってみる

JavaScriptライブラリを検索したりする中で見かけた、以下の「Color.js」を試してみたという話です。

●Color.js: Let’s get serious about color • Color.js
　https://colorjs.io/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/10d2d998-a752-c9f4-bb05-1e427f6c61e5.png)

過去に似た位置付けのライブラリで「chroma.js」は試したことがあったのですが、今回、それと似た「Color.js」も気になって試してみました。

●「chroma.js user:youtoy」の検索結果 - Qiita
　https://qiita.com/search?q=chroma.js%20user%3Ayoutoy&sort=created

## ライブラリの読み込み
ライブラリの読み込みは、以下から行えるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b57afe1d-06a9-6f93-1532-52b66096ab49.png)

```html
<script src="https://colorjs.io/dist/color.global.js"></script>
```

## p5.js Web Editor上で試す
それでは「Color.js」を p5.js Web Editor上で試してみます。

とりあえずは、簡単な事例として色の生成を試します。

### 色の指定方法
色の指定方法を見てみます。

例えば、公式の情報にあるように、以下のような指定ができるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8bff7cea-1c6d-6eab-1852-21a18dfedf54.png)

その他、色空間を変える処理などを公式ドキュメントで見つけつつ、以下を試してみました。

```javascript
function setup() {
  createCanvas(400, 400);
  let color1 = new Color("lch(50% 80 30)");

  console.log(color1.coords);
  console.log(color1.toString({ format: "rgb" }));
  console.log(color1.toString({ format: "hex" }));
}
```

上記を実行した結果は、以下の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fc2e66e5-c2e8-7d38-7583-443dc1468c0d.png)

上記について、適当に検索して出てきた色空間の変換を行ってくれるサイトで、計算をしてみました。
そうすると、以下のように計算が合っていそうだということが確認できました。

●Convert colors from LCH to RGB | Atmos
　https://atmos.style/color-converter/lch-to-rgb
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4f8a348b-022e-4d3f-2633-c0cdeec3e000.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b5c1effe-31c6-9d9f-7763-ac6d8f0d4fdd.png)

#### p5.js のキャンバスの背景色に使ってみる
上記で出力した内容を、p5.js のキャンバスの背景色に使ってみました。

先ほどのコードに少し手を加えた内容です。

```javascript
function setup() {
  createCanvas(400, 400);
  let color1 = new Color("lch(50% 80 30)");

  console.log(color1.coords);
  console.log(color1.toString({ format: "rgb" }));

  const temp = color1.toString({ format: "hex" });
  console.log(temp);

  background(temp);
}
```

その結果、以下の結果を得ることができました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f339eb5e-de54-e6f4-f297-e6522d56ebb9.png)

「Color.js」は、他にも色空間や色を使った処理を様々行えるようなので、さらに試してみようと思います。

## 他にできること
以下を見てみると、他にも色同士の差分をとったり、ある色と別の色との間を補完する色を生成したり、他にもいくつかの色に関する処理が行えるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/322feeb7-de50-64d6-4d75-6d13b98190c0.png)
【VSCode】折りたたみプレースホルダーの色を変更する方法

`settings.json`に以下の記述を追加することで折りたたみプレースホルダーの色を変更できます。

```json:settings.json
{
  "workbench.colorCustomizations": {
    "editor.foldPlaceholderForeground": "#ff0000"
  }
}

```

変更前
![スクリーンショット 2024-07-05 23.27.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/2c076951-16a7-5a4a-f0d6-94519304941d.png)

変更後
![スクリーンショット 2024-07-05 23.30.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/484bc9e3-a5b1-db52-12ee-bf311e937c14.png)
Let's Encryptを利用してHTTPS化するーAmazon Linux

こんばんは。

今日は「Let's Encryptを利用してHTTPS化する」について説明します。

昨日、Amazon Linux　2023サーバの方でHTTPS化をしてみました。

# 前提条件

- サーバにrootまたはsudo権限がある。(今回はsudo権限がある)
- httpd (Apache) がインストールされ、動作している。
- サーバのドメイン名がDNSに登録されており、正しく解決される。

# 手順

## Certbotのインストール

CertbotはLet's Encryptの公式クライアントです。

```sh
sudo yum install certbot python3-certbot-apache
```

## Certbotを使用して証明書を取得

以下のコマンドでCertbotを実行し、証明書を取得します。

```sh
sudo certbot --apache
```

このコマンドを実行すると、いくつかの質問が表示されます。

- サーバのドメイン名を入力します（例: example.com）。
- メールアドレスを入力します（証明書の更新通知などが届きます）。
- 利用規約に同意します。
- HTTPからHTTPSへのリダイレクト設定を選択できます。

## 設定の確認

Certbotが自動的にApacheの設定ファイルを更新し、SSLの設定を追加します。設定が正しく追加されていることを確認するために、Apacheの設定ファイルを確認します。

```sh
sudo nano /etc/httpd/conf.d/ssl.conf
```

## apacheの再起動

設定が正しいことを確認したら、Apacheを再起動します。

```sh
sudo systemctl restart httpd
```

## 自動更新の設定

Let's Encryptの証明書は90日間有効です。自動で証明書を更新するために、以下のコマンドを使用してcronジョブを設定します。

```
echo "0 0 * * * /usr/bin/certbot renew --quiet" | sudo tee -a /etc/crontab > /dev/null
```

このコマンドは、毎日深夜に証明書の更新をチェックし、自動で更新します。

# 確認

ブラウザでサーバのURLにアクセスし、HTTPSが有効になっていることを確認します。例えば、https://example.comと入力して、SSL証明書が正しくインストールされていることを確認します。

この手順で、Let's Encryptを利用してHTTPS化することができます。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。
ReactとFastAPIを連携させる方法

## はじめに

このガイドでは、ReactフロントエンドとFastAPIバックエンドを連携させる方法を紹介します。Reactを使用してフロントエンドを構築し、FastAPIを使用してバックエンドAPIを構築します。

## 前提条件

- Node.jsとnpmがインストールされている
- PythonとFastAPIがインストールされている

## 1. FastAPIのセットアップ

まず、FastAPIバックエンドをセットアップします。

### 1.1 FastAPIのインストール

FastAPIとUvicornをインストールします。

```bash
pip install fastapi
pip install uvicorn
```

### 1.2 FastAPIアプリケーションの作成

`main.py`というファイルを作成し、以下の内容を追加します。

```python
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# CORS設定
origins = [
    "http://localhost:3000",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/api/data")
def read_data():
    return {"message": "Hello from FastAPI!"}
```

### 1.3 FastAPIサーバーの起動

以下のコマンドでFastAPIサーバーを起動します。

```bash
uvicorn main:app --reload
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/d0aaeb43-078c-9a9b-0895-f43afa3c3eec.png)

## 2. Reactのセットアップ

次に、Reactフロントエンドをセットアップします。

### 2.1 Reactアプリケーションの作成

create-react-appを使用して新しいReactアプリケーションを作成します。

```bash
npx create-react-app my-react-app
cd my-react-app
```

### 2.2 Axiosのインストール

Axiosを使用してFastAPIからデータを取得します。以下のコマンドでAxiosをインストールします。

```bash
npm install axios
```

### 2.3 Reactコンポーネントの作成

`src`ディレクトリに`MyComponent.js`を作成し、以下の内容を追加します。

```javascript
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function MyComponent() {
  const [data, setData] = useState('');

  useEffect(() => {
    axios.get('http://localhost:8000/api/data')
      .then(response => {
        setData(response.data.message);
      })
      .catch(error => {
        console.error('There was an error!', error);
      });
  }, []);

  return (
    <div>
      <h1>Data from FastAPI:</h1>
      <p>{data}</p>
    </div>
  );
}

export default MyComponent;
```

### 2.4 App.jsの修正

`src/App.js`を開き、`MyComponent`をインポートして使用します。

```javascript
import React from 'react';
import MyComponent from './MyComponent';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <MyComponent />
      </header>
    </div>
  );
}

export default App;
```

### 2.5 Reactアプリケーションの起動

以下のコマンドでReactアプリケーションを起動します。

```bash
npm start
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/8129f339-3856-8a3e-ad72-5af4e8ee060d.png)


ブラウザが自動的に開き、`http://localhost:3000`でReactアプリケーションが表示されます。FastAPIから取得したデータが表示されるはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/e838b685-5bf4-3f6b-5add-8fc3bd97eeac.png)

## おわりに

このガイドでは、ReactフロントエンドとFastAPIバックエンドを連携させる基本的な方法を紹介しました。これにより、ReactアプリケーションからFastAPIエンドポイントにアクセスしてデータを取得し、表示することができます。さらなる機能追加や詳細な設定は、プロジェクトのニーズに応じて調整してください。
業務時間外の勉強は必須ではないけども

# 業務時間外の勉強は必須ではないけども

こんばんは。
過去、いろいろな場所で目にしたことがある
「業務時間外の勉強」論について、
新しい人に仕事を教えていて、改めて考えていました。

もちろん状況によりけりだし、社内SEなのかSESなのかフリーランスなのか、
そういう働き方の形態によっても異なりますが、ここでは社内SEの話として
進めていきます。

## 業務時間外に技術の勉強は必須か？

私は「必須ではない」という立場です。
業務に必要な技能を身につけることも含めて「業務」でしょ、と。
Javaで開発を始めるなら、Javaを業務時間に学ぶのは当然でしょ、
業務時間中は開発だけしなさい、勉強はプライベートでしなさい、
というのは違うよなぁと思ってます。

そもそもプライベートで勉強できる時間を取れる人もいれば、
取れない人だっています。
プライベートでの勉強が前提の業務っていうのは、
おかしいよなぁと思ってます。

## 必須ではない、が...

ただ、必須ではありませんが、できるならやったほうが良いです。
それは他の人と差をつけるとか、転職に役立つとか、
そういう社内的な側面もありますがそんなことよりも
「業務だと学べないが、ふと業務に役立ったりすること」
ということがあったりするからです。
文字コードや正規表現やSQL,shell系スクリプト（powershellとか)等はまさにこれです。
複雑なSQLを作るときに、SQLの基礎知識があれば、分析関数をつかって
より効率的でメンテナンス性の高いSQLを書けるかもしれません。
なにかエラーやバグが出たときに、たまたま勉強していた文字コードの知識が
役に立ってすぐに解決することができるかもしれません。

自身の引き出しを増やすという意味で、できるならやっておいたほうが良いと思っています。

## 自身はどうなのか？

私自身を振り返ると、「勉強しよう」として構えて勉強するというよりも、
「DBの設計ってどんな感じでやったらいいのかな？理論的にはどうなってるんだろう」
「なんでこの画面はつかいづらいんだろう？ユーザーにとって使いやすい画面って何？」
「新しく出たpklってどんな言語？何が特徴？」
という好奇心が先にあり、それを満たそうとした結果、勉強になっている、という感じです。

## まとめ

数学も歴史もデザインも文学も囲碁も、なんにしても勉強って案外たのしいよ。
[SwiftUI] TextEditor ノーコードでDrag&Drop

# ノーコードでDrag&Drop

`MacApp` で ファインダーからドラッグ＆ドロップできるアプリを作っていたら、
`TextEditor` を使うと、ノーコードでドラッグ＆ドロップできることが分かりました。（今さらなのかも知れませんが）


```swift
struct ContentView: View {
    @State var text = ""
    var body: some View {
        VStack {
            TextEditor(text: $text)
                .frame(height: 300)
        }
    }
}
```

## フルパスが得られます


![video-processed.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/2199069a-3d76-d427-9d81-3aab5f8d3be7.gif)

プレビューでも しっかり動作します。

**以上**
データURI のフォーマットを使ってブラウザのアドレス欄に HTML を直接送り込んでみる

## はじめに
今回の内容は、ふと思いついた内容を試してみたというものです。

この内容を思いついて試したきっかけは、過去に見かけたことがあった「ブラウザをメモ帳的なものにできる」というネタについて、詳細をあらためて見なおしたことになります。

### ブラウザをメモ帳みたいにできる話
ブラウザをメモ帳みたいにできる話について、少し補足します。

以前見かけていたのは、以下の内容をブラウザのアドレス欄に入力して実行すると、ブラウザをメモ帳的なものにできるというネタです。

```
data:text/html, <html contenteditable>
```

これを実際にやってみると、ページが表示される部分がメモ帳のようになります。
（以下の赤矢印の部分は、自分が後からテキストを入力したところです）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/78bdb3a1-4e4f-28e1-2679-662de7cdc4c9.png)

その話が書かれているサイトは以下で、上記の内容関する説明も書かれています。

●One line browser notepad (Example)
　https://coderwall.com/p/lhsrcq/one-line-browser-notepad

説明が書かれているのは、以下の部分です。
それを元に仕組みを書くと、「データURI のフォーマットを使って、ブラウザに html のレンダリングを指示しており、なおかつその html の中で [contenteditable属性](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/contenteditable)を指定して、ページを編集可能な状態にしている」というもののようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2a193b4b-494c-193f-19de-36f2dbee4918.png)

この、「データURI のフォーマットを使って、ブラウザに html のレンダリングを指示する」という部分で、別の内容を実行させるとどうなるかが気になって、今回の内容を試しました。

## 試した内容
上の例では、html のみを使ってましたが、JavaScript の処理を含むものが想定で通り動くかを試してみたくなりました。

### JavaScript を実行してみる
データURIフォーマットを使用して、JavaScript を含む html をアドレス欄に入力してみます。

具体的には、以下の内容です。

```html
data:text/html,<html><body><script>alert('Hello!');</script></body></html>
```

これを試すと、以下のようにアラートが表示されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4b05bc33-e4a1-ffd3-bfb3-1af1e515aad4.png)

#### 別の実行方法
上記は `javascript:` で始まる文字列を、以下のページに書いてある方法でブラウザのアドレス欄に入力して実行することもできます。

●Bookmarkletを作ろう(準備編） #JavaScript - Qiita
　https://qiita.com/kanaxx/items/63debe502aacd73c3cb8

ブックマークレットを作る時によく使う書き方だと思いますが、利用する文字列は、具体的には以下の内容です。

```javascript
javascript:alert('Hello!');
```

これでも、同じようにアラートを表示できます。
（※ 文字列を単にアドレス欄に入力して実行してしまうとうまく動かず、上記の参考サイトにある手順でやるのが良いです）

### ブックマークに登録してみる
次に、これも思いつきでやったものですが、ブックマークへの登録というのをやってみました。

上で使っていた、以下の文字列をブックマークに登録して、それを開いてみます。

```html
data:text/html,<html><body><script>alert('Hello!');</script></body></html>
```

## おわりに
何かに活用できるかどうかもよくわからないですが、思いつきで試してみたというネタの話でした。