OmniAICreator/Qiita-1.07M huggingface dataset:
【Flutter】MapLibreでピンの表示領域を調整する方法

![スクリーンショット 2025-05-31 9.55.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/6f08feeb-da82-4eb5-b8dc-e2396d4a6e3e.png)


# はじめに
僕の作っている「FoodGram」というアプリではMapLibreを使用して投稿されたレストランの表示をしています。

最近は、投稿数が1200件を超えて、マップも充実してきました🙌
iOS/Androidのどちらもアプリをダウンロードすることができるので、ぜひ投稿をお待ちしています！

ダウンロードリンク

【 iOS 】

https://apps.apple.com/lb/app/foodgram/id6474065183

【 Android 】

https://play.google.com/store/apps/details?id=com.food_gram_app.com.com.com


MapLibreを採用する理由は以下のサイトで記載しています。

https://qiita.com/isekiryu/items/216f7de760a0d96920b1

# やりたいこと
- フード投稿されたレストランをピンを刺したい
- ピンの表示領域を調節していいようにしたい


# 具体的な実装方法

### 1. maplibre_glのインストール

https://pub.dev/packages/maplibre_gl

```shell
flutter pub add maplibre_gl
```

### 2. iOS/Android初期設定

```plist:info.plist
<dict>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>マップ表示にの現在地の取得のために許可が必要になります</string>
</dict>
```

```xml:android/app/src/main/AndroidManifest.xml
<manifest>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
</manifest>
```

#### 3.ピンの表示領域を調整する
調節するやり方はとても簡単で、`MapLibreMapController`にあるものをうまく使うことで実装することができました。

```dart
/// ピンが重なっても表示されるかどうか
await state.mapController?.setSymbolIconAllowOverlap(false);
```

# 表示領域の違いの写真
２つの画像でアイコンのサイズが少し異なっていますが、お気になさらず。。。

| true | false |
| ---- | ---- |
| ![428246878-4c70d3e9-e569-4641-bdd4-ed0df433218e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/b67f7853-6a61-4d4e-9a90-37056c7ed860.png) | ![428246879-e4a67f18-b32c-4f91-9672-e24383aad907.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/54a5ed2e-b7f5-42cf-8f26-49e84d5cb9a6.png)|


対応したPRをご共有します

https://github.com/iseruuuuu/food_gram_app/pull/613


# 最後に

たったこれだけの設定でも、UIの見え方が大きく変わります。  
今後も MapLibre を活用して、もっと見やすくて楽しい地図にしていきたいと思っています！

# アプリの宣伝
個人開発で作成しているアプリの「FoodGram」についても少し語らせてください

FoodGramは、世界中のユーザーと食の楽しさを共有できるフードシェアアプリです。美味しい料理やお気に入りのグルメスポットを記録・共有しながら、みんなでグローバルな「フードマップ」を作りましょう🍜。


![](https://storage.googleapis.com/zenn-user-upload/7e94dfdc9119-20250530.jpeg)


### ダウンロードリンク

https://apps.apple.com/jp/app/foodgram/id6474065183

https://play.google.com/store/apps/details?id=com.food_gram_app.com.com.com


- 「FoodGram」は、フードシェアアプリとなっており、あなたの好きなレストランの食事をぜひこのアプリで共有していただけると嬉しいです!!
フォントファイルに含まれていない文字を検出するオンラインサイトを公開してみる

## はじめに

Web アプリやゲーム、業務システムなどで**独自フォント**を採用するとき、
「この文字列は本当にフォントに含まれているのか？」を瞬時に確かめたい場面が意外と多くあります。

 既存ツールを探してみても

* 手元にインストールしなければ動かない
* コマンドライン専用で非エンジニアには扱いづらい
* そもそも Unicode の追加面（第3・第4水準、拡張絵文字など）までカバーしきれない

──といったケースがほとんどでした。

そこで**ブラウザだけで完結するオンラインチェッカー**を自作し、公開してみました。

https://uni928.github.io/StringChecker/index2.html

---

## どんなサイト？

### コンセプト

1. **フォントをドラッグ＆ドロップ or ファイル選択する**
2. **テキストを貼り付けるだけ**
3. 未収録文字があればその場でリストアップ

「とにかく速く・カジュアルに確認したい」という一点に全振りしています。
開発中の UI スクリーンやマニュアル原稿を **Ctrl + A → Ctrl + C → チェッカーに Ctrl + V**
──これだけで**代用フォント（tofu）ゼロの世界**を保証できます。

※本サービスの利用により発生したいかなる損害についても、当方は一切の責任を負いかねますのでご了承ください。

### 対応フォーマット
* TTF / OTF / WOFF / WOFF2
（※ WOFF2 の場合は内部で自動展開して解析します）

### 主な機能

| 機能 | 詳細 |
|------|------|
| **コードポイント完全解析** | opentype.js で `cmap` テーブルを直接走査し、Unicode ⇄ グリフを正確にマッピング |
| **動的 fallback 判定** | パース不能フォントでも Canvas 幅比較 + `FontFaceSet.check()` に自動スイッチ |
| **ZWJ / VS 対応** | `Intl.Segmenter('grapheme')` で拡張書記素クラスタ単位に分割。複合絵文字や結合文字も 1 まとまりで判定 |
| **軽量・依存ゼロ** | ライブラリ読み込みは CDN 1 本のみ。ビルドもサーバーも不要 |

---

## 使い方ガイド

1. **フォントをアップロード**
ページ上部のファイル選択ボタン、またはドラッグ＆ドロップでフォントを読み込むと、
右上のステータスが
`「NotoSansCJKjp-Medium.otf」を読み込みました（opentype 解析中…）のように表示されます。
2. **テキストを貼り付ける／直接入力する**
フォントに含まれない文字だけが赤文字リストに並びます。
例：`🧑‍🤝‍🧑` や `𠮟（U+20B9F）` など。
3. **結果をチェック**
未収録文字が 0 件なら **「安心して本番リリースできる文字列！」** というわけです。

> **Tips**
> * フォントを読み替えた瞬間に入力欄が解放されない場合はブラウザのキャッシュが原因のことも。Ctrl + F5 で再読み込みすると直ることがあります。
> * モバイル Safari ではユーザーフォント読み込みが制限され、正しく解析できない可能性があります。PC ブラウザ推奨です。

---

## 代用文字を使いたくない理由

* 同じテキストでも **環境依存で字形が変わる**
* 可読性・デザイン整合性が崩れやすい
* 法的書類・組版では **想定外の字形が混ざると致命的**

だからこそ「**フォントに含まれていない文字を事前に洗い出す**」ことは、
UX だけでなく品質保証の観点でも大きな意味があります。

---

## おわりに

*独自フォントを採用している開発現場* の「痒い所」に刺さるツールになれば幸いです。

不具合報告や機能リクエストは大歓迎！

**URL 再掲**
https://uni928.github.io/StringChecker/index2.html

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

皆さんの制作現場で、**“代用文字ゼロ”** を実現する手助けになれば嬉しいです。

再掲：
※本サービスの利用により発生したいかなる損害についても、当方は一切の責任を負いかねますのでご了承ください。

---

## 追記

この文章は ChatGPT で添削しています。
生成 AI の添削が苦手な方は申し訳ありません。
[Linux] ユーザとグループの管理_/etc/passw, /etc/shadow, /etc/group

# /etc/passwd

ユーザーアカウント情報を格納するファイル（読み取り可能）

```text
root:x:0:0:root:/root:/bin/bash
daemon:x:1:1:daemon:/usr/sbin:/usr/sbin/nologin
user1:x:1000:1000:User One,,,:/home/user1:/bin/bash
```

### フォーマット

```
ユーザー名:パスワード(プレースホルダ):UID:GID:コメント(本名など):ホームディレクトリ:ログインシェル
```

- ユーザ名 ： 一意のユーザ名
- パスワード ： ユーザのパスワード。
    - **アカウントをロックする場合、フィールドの1文字目に「!」または「*」を追加する**
- UID ： ユーザのUID（ユーザID）。UIDはユーザを識別するための一意のID
- GID ： ユーザのプライマリグループのGID（グループID）。GIDはグループを識別するための一意のID
- コメント ： ユーザに関する任意のコメント（省略可）
- ホームディレクトリ ： ユーザのホームディレクトリ
- ログインシェル ： ユーザのログインシェル（ログイン時に使用されるデフォルトのシェル）

# /etc/group

グループ情報を格納するファイル（読み取り可能）

```text
root:x:0:
daemon:x:1:
sudo:x:27:user1
users:x:100:
user1:x:1000:
```

### フォーマット

```
グループ名:パスワード(プレースホルダ):GID:所属ユーザーのカンマ区切りリスト
```

- グループ名 ： 一意のグループ名
- グループパスワード ： グループのパスワード
- GID ： グループのGID
- グループのメンバーリスト ： グループに所属するメンバー。複数の場合は「,」で区切る


# /etc/shadow

ユーザーのパスワードハッシュや有効期限などを含む機密ファイル（rootのみ読み取り可能）

```text
root:$6$abcdefg$longhashvalue...:19328:0:99999:7:::
daemon:*:19328:0:99999:7:::
user1:$6$zyxwvu$anotherlonghash...:19328:0:99999:7:::
```

### フォーマット

```
ユーザー名:パスワードハッシュ:最終変更日:最短日数:最長日数:警告日数:無効日数:有効期限:予約
```

- パスワードハッシュ ： 
    - **アカウントをロックする場合、フィールドの1文字目に「!」または「*」を追加する**

# 補足

* `/etc/shadow` は**セキュリティ上の理由**から一般ユーザーでは確認できない
* `x` はプレースホルダで、実際のパスワードは `/etc/shadow` に格納される

# Ping-t
全般
- [4789_ロック, usermod -L, passwd -l, /etc/passwd, /etc/shadow](https://mondai.ping-t.com/question_subjects/32/question_sessions/33767513/progressing_questions/517007548)

/etc/passwd
- [4769_/etc/passwd](https://mondai.ping-t.com/question_subjects/32/question_sessions/33767513/progressing_questions/517007556)

/etc/group
- [4792_/etc/group](https://mondai.ping-t.com/question_subjects/32/question_sessions/33767513/progressing_questions/517007555)
- [4795_/etc/group](https://mondai.ping-t.com/question_subjects/32/question_sessions/33767513/progressing_questions/517007542)

/etc/shadow
- [5027_/etc/shadow](https://mondai.ping-t.com/question_subjects/32/question_sessions/33767513/progressing_questions/517007554)
certbotの証明書を勝手に消してはいけない

タイトルの通りですが、`/etc/letsencrypt/live/README`の一部に以下のような記述があります。

>WARNING: DO NOT MOVE OR RENAME THESE FILES!
         Certbot expects these files to remain in this location in order
         to function properly!
 

 よって手作業で証明書を消したり移動するのは良くありません。

## 証明書を削除するには
では証明書を正しく削除するにはどうしたらよいのでしょうか？
こちらのガイドの通り、サブコマンドを使用します。

 https://eff-certbot.readthedocs.io/en/latest/using.html

 #### 証明書の一覧表示
 ```
 certbot certificates
 ```


  #### 証明書の削除
 ```
 certbot delete --cert-name <証明書の名前、一般にドメイン名>
 ```
Gitでcommit-mをした後に、コミットメッセージを変更する

<h2>Gitでコミットメッセージを変更したい</h2>

GitでCommit -mをした後で、プッシュする前にコメントをやっぱり変更したいと考えた時の対処法を書き残しておく

もう一回commit-mしたら「すでにコミットしたよ」って言われてダメだったので、念のため書いておく

以下のコマンドを書くと変更できる

```terminal:変更方法
git commit --amend -m "メッセージを書く"
```

```terminal:メッセージ変更
//最初にメッセージを書く
git add -A
git commit -m "初期メッセージ"

そのあと、メッセージを変更したくなったときは↓
git commit --amend -m "変更後メッセージ"
```
【JSON パースエラー　SpringbootのメッセージをJSON形式で返す方法】

今回は
```
Uncaught (in promise) SyntaxError: Unexpected token 'ス', "スレッドを消しました" is not valid JSON
```
というエラーが出たため、エラー解消のための備忘録として記載いたします。
井波にこのエラーは、JavaScript が "スレッドを消しました" を JSON としてパースしようとして、「ス」がJSONの構文に適さない」と怒っているわけです！

ちなみに今現状のバックエンドはこんな感じです。
```
@PutMapping("/threads/delete/{id}")//threadsのidを指定（ダブりがないから）
    public String deleteThreads(@PathVariable Integer id){
        logger.info("ーーーログーーー");
        threadsService.delete(id);
       ここの"スレッドを消しました";
        //@PathVariable　URLのパス部分をパラメーターとして取得してくれる
    }
```

ここの return の中身がJSON形式でないからエラーが出てしまってるみたいです。

なので。
```
import org.springframework.http.ResponseEntity;
import java.util.Map;

 @PutMapping("/threads/delete/{id}")//threadsのidを指定（ダブりがないから）
    public  ResponseEntity<Map<String, String>> deleteThreads(@PathVariable Integer id) {
        logger.info("ーーーログーーー");
        threadsService.delete(id);
        return ResponseEntity.ok(Map.of("message", "スレッドを消しました"));
        //@PathVariable　URLのパス部分をパラメーターとして取得してくれる
    }
```
このような感じに書き換えました！
これは Java（Spring Boot）で API のレスポンスを作るときによく使う記述で、クライアントに JSON を返す処理！

・ResponseEntity<Map<String, String>>：HTTPレスポンスを返すオブジェクト。中身は文字列のキーと値からなるMap。
🔹 ResponseEntity<>
Spring Frameworkのクラスで、HTTPステータスコード、ヘッダー、ボディを含むレスポンスを構成できる。
たとえば、ResponseEntity.ok() で「HTTP 200 OK」というステータスを意味する。

🔹 Map<String, String>
これはJavaの「キーと値のペア」を表すデータ構造で、String型のキーと値を持つMap。
今回は Map.of("message", "スレッドを消しました") のように、message というキーと それに対応するメッセージが含まれています。

つまりこの全体は、「文字列のキーと値のペアを含んだレスポンスを、HTTPステータス200（成功）と一緒にクライアントに返す」

・deleteThreads(@PathVariable Integer id)：URLパスの中に含まれる id を引数として受け取るメソッド。


つまりフロント側で .json() で受け取るのに最適な形になっているということ！
Claude Code 備忘録

# Claude Codeとは
Anthropic社が開発した**エージェント型コーディングツール**

https://docs.anthropic.com/ja/docs/claude-code/overview

# 準備
1. Claudeのアカウント作成
1. Claude Codeの利用対象となるいずれかのプラン(※)を契約
 - ※2025年6月16日現在ではPro(20ドル/月)、Max(100ドル~/月)、または従量課金制。

homebrewのインストール：Node.jsのインストールに必要

Node.jsのインストール：Claude Codeをインストールするための`npm`コマンドに必要
```
brew install node
```
本命のClaude Codeをインストール
```
npm install -g @anthropic-ai/claude-code
```

Claudeへログイン
```
claude "/login"
```

1. テーマを選んで(あとから変更可)
1. アカウント連携または従量課金制を選択
![スクリーンショット 2025-06-16 22.16.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552658/8c0b71df-f5fa-4830-9cb8-c913894ea995.png)

# つかう
## 開始と終了
起動したいディレクトリに移動して
```
claude
```

終わる時は
```
/exit
```

## 基本コマンド

https://x.com/_manji0/status/1935204417944567898?s=46&t=3ZRRL4XcziL3uyyVMGKAbQ


CLAUDE.md
```
必ず日本語で回答してください。
```
を追加しておくとよい。

※既存プロジェクトの場合は`/init`でコードから読み取ってCLAUDE.mdを作成してくれる。

# 参考
https://zenn.dev/asap/articles/700168965fdb7b

https://note.com/himaratsu/n/nddf0efa67d42
UbuntuでのWebサーバー構築と「Hello World!」の表示（Apache）

# 目的
Rocky Linuxを使いUdemyでLinuxの基礎を学んでいましたが、最近はubuntuが主流？だと聞き次のステップとしてUbuntuでWebサーバーを構築してみようと思いつきました。

# 環境
Windows11
VirtualBox
Ubuntu
Apache

どうでもいいですけど、「うぶんつ」のこと「うぶつん」ってたまに呼び間違えます。

# 参考にしたサイト
サーバーの構築にあたって参考にさせていただいた記事です。
・[【Linux初級】WEBサーバー構築手順【Apache】](https://qiita.com/takxxx_infra/items/0b721f05b5f4d2ec5340)
・[Linux(CentOS7)でWebサーバーを構築する。 -Apache導入編-](https://qiita.com/sango/items/b045a1da17606eda6f82)
・[PHP学習 #1 UbuntuでPHPを実行して「Hello world!」を表示する](https://mycomputerlife.com/ubuntu%E3%81%A7php%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%A6%E3%80%8Chello-world%E3%80%8D%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B/)
・[JISキーボードなのにUS配列の環境で文字を打つ](https://qiita.com/hachisukansw/items/efd4b3c2df7e6a8b3779)
# 構築過程
### 1.Apacheのインストール
まず、SELinuxを無効化しといたほうがいいということでやってみようとするも、そもそもUbuntuにはデフォルトでSELinuxの機能がついていないみたいなのでスルーしました。

なので早速WebサーバーソフトのApacheをインストールしていきます。
CentOSやRocky Linuxだと`yum`を使いますがうまくいかず、どうやらUbuntuでは`apt`を使うようなので
```
sudo apt install apache2
```
でうまくいきました。（アーパツアパツ）

そして下記のコマンドで起動しているか確認できます。
```
sudo systemctl status apache2
```
「enabled」とか「active」とか「running」が表示されれば起動していて、なおかつブラウザにサーバーのアドレスを打ってApacheのページが表示さればOKということでした。

![スクリーンショット 2025-06-18 104658.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128060/e5e12238-67d5-4225-93c8-50d56b552665.png)
### 2.PHPを使って「Helllo World!」を表示させる
サーバーに文字を表示させるには`vi`コマンドでhtmlファイルに書き込めばいいようでしたが、調べているうちにPHPで表示させている記事に出会い、せっかくならPHPを使ってみることにしました。

ので下記コマンドでPHPをインストールします。
```
sudo apt install php-common libapache2-mod-php php-cli
```
PHPがインストールされているかは、`PHP -v`でバージョン情報等が出てくればOKです。

参考記事では`nano`コマンドが使われていたので、それに習って入力していきます。
```
sudo nano /var/www/html/hello.php
```
これでそれぞれのディレクトリとファイルが作成され、テキスト入力画面が開きました。ので、コードを入力していきます。
```
<?php
echo "HEllo World!";
?>
```
書き終えたら、「Ctrl + O」で保存、「Ctrl + X」で終了します。

ブラウザを立ち上げ、
http://127.0.0.1/hello.php
にアクセスし、無事に「Hello World!」が表示されれば完了です。

が、僕の場合はうまくいかず。
![スクリーンショット 2025-06-18 110603.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128060/4a9fb409-bb0b-4aee-a7d5-746417899559.png)

ファイルにに誤字があったので修正するもダメで、Chat GPTにも相談しても解決にはいたらず、調べていくとどうやらファイアウォールの設定をする必要があるかもと知り、設定をするとうまくいきました。

**・ファイアウォールのインストール**
```
sudo apt install fairewalld
```
**・httpサービスの追加**
```
firewall-cmd --add-service=http --zone=pubulic --permanent
```
**・設定を反映させるためのファイアウォール再起動**
```
fairewall-cmd --reload
```
**・正しく反映されているかの確認**
```
firewall-cmd --list-all
```
「service」のところにhttpがあればいいようです。
# 結果
無事ブラウザに「Hello World!」の文字を表示させることが出来ました。
![スクリーンショット 2025-06-18 114343.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128060/a0d0236a-a3e0-4366-90c7-5b6f2223336a.png)
# 感想
とにかくブラウザにハローワールドを表示させるという目的だったので、セキュリティ面や管理面などのことは考えてやりませんでした。が、やはりきちんと理解出来てないまま物事が進むというのはなんか気持ち悪いもので、セキュリティだったりとかサーバーといったところの知識と技術を徐々にでも身に着けていければと思いました。
DTNに関するRFCの一覧

DTNに関するRFCのリスト

- RFC4838
	- Delay-Tolerant Networking Architecture
	- [RFC 4838 - Delay-Tolerant Networking Architecture](https://datatracker.ietf.org/doc/html/rfc4838)
	- [RFC 4838 - Delay-Tolerant Networking Architecture 日本語訳](https://tex2e.github.io/rfc-translater/html/rfc4838.html)
- RFC5050
	- Bundle Protocol Specification
	- [RFC 5050 - Bundle Protocol Specification](https://datatracker.ietf.org/doc/html/rfc5050)
	- [RFC 5050 - Bundle Protocol Specification 日本語訳](https://tex2e.github.io/rfc-translater/html/rfc5050.html)
- RFC6260
	- Compressed Bundle Header Encoding (CBHE)
	- [RFC 6260: Compressed Bundle Header Encoding (CBHE)](https://www.rfc-editor.org/rfc/rfc6260.html)
- RFC7242
	- Delay-Tolerant Networking TCP Convergence-Layer Protocol
	- [RFC 7242 - Delay-Tolerant Networking TCP Convergence-Layer Protocol](https://datatracker.ietf.org/doc/html/rfc7242)
	- [RFC 7242 - Delay-Tolerant Networking TCP Convergence-Layer Protocol 日本語訳](https://tex2e.github.io/rfc-translater/html/rfc7242.html)
- RFC9171
	- Bundle Protocol Version 7
	- [RFC 9171: Bundle Protocol Version 7](https://www.rfc-editor.org/rfc/rfc9171.html)
	- [RFC 9171 - Bundle Protocol Version 7 日本語訳](https://tex2e.github.io/rfc-translater/html/rfc9171.html)
	- 53 pages
- RFC9172
	- Bundle Protocol Security (BPSec)
	- [RFC 9172 - Bundle Protocol Security (BPSec)](https://datatracker.ietf.org/doc/rfc9172/)
	- [RFC 9172 - Bundle Protocol Security (BPSec) 日本語訳](https://tex2e.github.io/rfc-translater/html/rfc9172.html)
	- 35 pages
- RFC9173
	- Default Security Contexts for Bundle Protocol Security (BPSec)
	- [RFC 9173 - Default Security Contexts for Bundle Protocol Security (BPSec)](https://datatracker.ietf.org/doc/rfc9173/)
	- [RFC 9173 - Default Security Contexts for Bundle Protocol Security (BPSec) 日本語訳](https://tex2e.github.io/rfc-translater/html/rfc9173.html)
	- 51 pages
- RFC9174
	- Delay-Tolerant Networking TCP Convergence-Layer Protocol Version 4
	- [RFC 9174 - Delay-Tolerant Networking TCP Convergence-Layer Protocol Version 4](https://datatracker.ietf.org/doc/rfc9174/)
	- [RFC 9174 - Delay-Tolerant Networking TCP Convergence-Layer Protocol Version 4 日本語訳](https://tex2e.github.io/rfc-translater/html/rfc9174.html)
	- 62 pages
- RFC9675
	- Delay-Tolerant Networking Management Architecture (DTNMA)
	- [RFC 9675 - Delay-Tolerant Networking Management Architecture (DTNMA)](https://datatracker.ietf.org/doc/rfc9675/)
	- 49pages
- RFC9713
	- Bundle Protocol Version 7 Administrative Record Types Registry
	- [RFC 9713 - Bundle Protocol Version 7 Administrative Record Types Registry](https://datatracker.ietf.org/doc/rfc9713/)
	- 5pages
宇宙インターネットのコンセプト？Delay/Disruption Tolerant Networking（DTN）を知りたい人に向けた概説

（少しずつ増やしていきます！量が少ないのはご容赦を）

# はじめに
DTNに関する記事がなかなかない！特に日本語だと全然ない！ということで自分の備忘録も兼ねて、遅延・途絶耐性ネットワーク（Delay/Disurption Torelant Networking：DTN）についてまとめていきます。　

ただしDTNにはノードの接続性を予測可能か否かによって、ProbabilisticとDeterministicに分類されることがあり、私の取り組みは惑星間インターネットを中心にしているため、基本的には後者を扱います。とはいえ、技術的には共通部分も多いかと思います。

# DTNとは
DTN は惑星間インターネットのアーキテクチャのコンセプトとして構想されました。DTNの中心となる技術はRFC9171で標準化されたBundle Protocol（BP）があり、BPでは通信されるデータはBundleという可変長のデータとして転送されます。中間ノードでは経路上の次のノードへ転送可能なタイミングまで永続ストレージにBundleを蓄積することが可能になっているため、End-to-Endの通信疎通性が確保できていない場合でも, この蓄積による転送を行うことにより断絶に強い通信ができる用になっているのが特徴です。またDTNは図1のようにオーバーレイネットワークとして機能し、Convergence Layerによって下層の様々なプロトコルに対応することが可能です。そのためTransport LayerにUDPなどのプロトコルを用いること場合比較的遅延を抑えて通信することもできますし、そもそもNetwork LayerやTransport Layer等も存在しない衛星等でも利用可能です。詳しくはまたの機会にConvergence Layerについての記事を書きたいと思います。

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
footer {
  FontColor black
  FontSize 50
}
</style>
footer 図１　DTNのプロトコルスタック（参考文献[1]のfigure1から引用）
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630456/df1eb9f6-41c7-4efe-906c-8ba97a53e989.png>
@enduml
```

# 実際のDTN実装
既にいくつかの研究機関などによりDTN 技術を実装したソフトウェアがリリースされており、以下に代表的なものを挙げます。
- Interplanetary Overlay Network DTN（ION-DTN）: NASA/JPL
- HDTN : NASA/Glenn research center
- DTN ME : Marshall Space Flight center
- µD3TN : D3TN GmbH
- IONe : Experimental ION Scott Burleigh United States
- DTN7/Go : University of Marburg German

各実装がどの技術に対応しているかは以下にとてもわかりやすくまとまっています。
```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
footer {
  FontColor black
  FontSize 30
}
</style>
footer 表1　各実装が対応しているDTN技術（参考文献[2]のfigure1から引用）
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3630456/8c72d233-9e0d-4234-89e3-7da6d5304897.png>
@enduml
```

# 参考文献

[1]Farrera Marcos, Fleury Martin, Guil Ken, and Ghanbari Mohammed. Measurement
and analysis study of congestion detection for internet video streaming. Journal of Communications, 5, 02 2010.

[2]Ronny Bull, Rachel Dudukovich, Juan Fraire, Nadia Kortas, Robert Kassouf-Short,Aaron Smith, and Ethan Schweinsberg. Network emulation testbed capabilities forprototyping space dtn software and protocols. pages 1–8, 05 2024.
Teamsのマイク音量が小さい（多人数会議時のみ）

◆前提
　 OSのアップデートは、最新になっている。
 　トラブルシューティング機能は実行済み。

◆ノイズ抑制機能による音声カット
強いノイズ抑制やエコーキャンセラー機能が、
自分の声を“ノイズ”と誤認識しカットしてしまうことがある。

ノイズ抑制（Noise suppression）
　⇒　「低」「なし」「Voice isolation」など軽めに設定する。

◆エコー除去設定による音声カット
ハウリング対策としてもエコー除去機能が、
多人数会議では自分の声を妨げることがある。

　⇒　状況に応じて設定変更を行う。

◆ハードウェアアクセラレーションを無効にする
ハードウェアアクセラレーション
（ノイズ除去、エコーキャンセル（音声処理）を担っている機能）が
音声処理に干渉し、音質の低下を招くケースがある。

Teamsの設定→全般（General）
　⇒　「ハードウェアアクセラレーションを無効にする」にチェックを入れる。

◆GPUドライバ
Teamsが音声処理もGPUに任せる場合がある。
　⇒　GPUドライバが古い・不安定可能性があるため、
 　　デバイスマネージャーからドライバを更新する

◆Teamsのキャッシュのクリア
過去に使用した音声設定・マイクデバイスなどがキャッシュから読み込まれることがあり、
そうすると、設定画面の設定内容が適用されていないケースがある。

1. Teamsを終了
2. 以下のフォルダを開く
   %appdata%\Microsoft\Teams
3. 次のフォルダの中身をすべて削除
   - Cache
   - Blob_storage
   - Databases
   - GPUCache
   - IndexedDB
   - Local Storage
   - tmp
4. Teamsを再起動
【Git】バージョン管理とその目的

## バージョンという概念
変化するファイルの状態のことを「**バージョン**」といいます。
同じファイルの複数バージョンを保持することを「**バージョン管理**」と呼びます。

## Gitはバージョン管理を行う
**Git（ギット**）は、ファイルのバージョン管理を行うために、多くのプロジェクトで使われているツールです。
次々と発生するファイルの変更をバージョンとして記録し、記録した地点へいつでも戻れる仕組みを提供することが大きな特徴です。なお、そうしたツールはGit以外にも存在しており、「**バージョン管理システム**」と総称されます。

## なぜバージョン管理システムが必要なのか
バージョン管理システムを用いると、一貫したルールに基づいた管理が出来るようになります。
特に、Gitをはじめ昨今主流となっているバージョン管理システムには、作業者が複数人いても、ファイルの最新状態や変更の履歴を分かりやすく保てる仕組みがあります。

## 参考文献
いちばんやさしいGit&GitHubの教本 第2版 人気講師が教えるバージョン管理&共有入門 (「いちばんやさしい教本」シリーズ) 単行本（ソフトカバー） – 2022/3/17
横田紋奈 (著), 宇賀神みずき (著)
p14-15
Notionフォーム x リレーション（回答項目にリレーションを使う）

Notionフォームの回答時に、Notionの他のDBとの紐付け（リレーション）つけられたらいいのに、、と思っていたら普通にできました。

### 手順
1. 先に、回答のDBのプロパティにリレーションを追加する
2. フォーム編集画面にて、設問項目を追加すると、選択肢に追加したリレーションが表示される

<img width=30% src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237839/cbbc3fac-bbaa-4988-8934-63a7829dcf03.png" >
→
<img width=40% src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237839/45a56e53-bf8e-4ab1-a59a-6e0b47b2160c.png" >
next build を打つと起動中の next dev が死ぬ――原因とワンライナー対策

*※この記事は Issue #61228 「Running next build breaks next dev server」からの引用・要約です。日々同じ事故に当たっている人向けのメモ。*

---

### 何が壊れているのか

1. **.next フォルダは dev も build も共通**
2. `next build` は `.next/*` を “掃除→本番用に再生成” する
3. dev サーバーが参照していたファイルが一瞬で消える → `Cannot find module './638.js'` などの 404／ENOENT でクラッシュする([github.com][1])

---

### 解決：同じ .next 内で *サブ* ディレクトリを分けるだけ

```js
// next.config.js 版 (CJS)
module.exports = {
  distDir: process.env.NODE_ENV === 'development'
    ? '.next/dev'   // next dev 用
    : '.next/build' // next build 用
};
```

```js
// next.config.mjs
export default {
    distDir: process.env.NODE_ENV === 'development' 
      ? '.next/dev' 
      : '.next/build',
};
```

```ts
// next.config.ts
import { type NextConfig } from 'next';

const config: NextConfig = {
    distDir: process.env.NODE_ENV === 'development'
        ? '.next/dev'
        : '.next/build',
};
export default config;
```


> \* TypeScript の場合、生成された型ファイルを拾うよう **`tsconfig.json`** に
>
> ```json
> "include": [
>   ".next/build/types/**/*.ts",
>   ".next/dev/types/**/*.ts"
> ]
> ```
>
> を追加しておくと IDE エラーを防げる([github.com][1])

これで **.next というルートは共通のまま**、環境ごとに `.next/dev` と `.next/build` が共存し、上書き競合がなくなる。記述しているのはNext.js の `distDir` オプション([nextjs.org][2])。

---

### 動作確認手順(npm)

```bash
# ターミナル A
npm run dev      # or yarn dev / pnpm dev

# ターミナル B
npm run build    # or yarn build / pnpm build

# ブラウザをリロード → エラーが出なければok
```

Turbopack モード (`next dev --turbo`) では 2024-07-04 時点で
まだ ENOENT が起きる報告あり ([github.com][1])。

---

### SEO 用
他のパッケージマネージャー使ってて引っかからない人がイないようにメジャーなモノを書いておきます。

```
npm run build next dev エラー
yarn build すると開発サーバー落ちる
pnpm build Cannot find module './638.js'
next build next dev 同時 実行 できない
```

同じ症状なら **distDir を環境で分割**するだけで終わります。お試しあれ！

[1]: https://github.com/vercel/next.js/issues/61228 "Running next build breaks next dev server · Issue #61228 · vercel/next.js · GitHub"
[2]: https://nextjs.org/docs/app/api-reference/config/next-config-js/distDir?utm_source=chatgpt.com "distDir - next.config.js"
Claude Codeを導入中にエラーになった

## 概要

Claude Codeの導入は基本は3ステップで終わるはずである。

1. npm を用いてパッケージをグローバルインストール
1. プロジェクトルートのディレクトリに移動
1. `$ claude`というコマンドを実行

しかしながら筆者の場合「`$ claude`というコマンドを実行」を実行した際にエラーが出て先に進めなかったので筆者の場合の解決方法を記載する。

参考にした手順↓

https://docs.anthropic.com/ja/docs/claude-code/getting-started#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A8%E8%AA%8D%E8%A8%BC

## エラーの内容

Claude Code導入後、`$ claude`のコマンドを実行したところ下記のようなエラー担った。

```
$ claude --version
file:///Users/[username]/.volta/tools/image/packages/@anthropic-ai/claude-code/lib/node_modules/@anthropic-ai/claude-code/cli.js:77

〜多数の記述〜

SyntaxError: Unexpected token '{'
    at Loader.moduleStrategy (internal/modules/esm/translators.js:122:18)
    at async link (internal/modules/esm/module_job.js:42:21)
```

## エラーの解消

筆者はvoltaを用いてNode.jsのバージョン管理をしており、Node.jsのバージョンを20に設定したらエラーは解消した。

```shell
npm uninstall -g @anthropic-ai/claude-code # 一旦アンインストール
npm cache clean --force # キャッシュクリア
volta install node@20
npm install -g @anthropic-ai/claude-code # 再インストール
claude --version # 正常にバージョンが出たのでエラーｋ
```
K8Sログ管理失敗事例

## K8sログ管理の落とし穴：テスト環境でのFluentdログ肥大化とノード障害からの復旧

### 1\. はじめに：なぜテスト環境でもログ管理が重要なのか

Kubernetesにおけるログの重要性、そしてテスト環境での見落としがちな側面を説明する。「テストだから大丈夫」という思い込みが招くリスクにも言及する。

### 2\. 失敗の経緯：ローカルストレージとFluentdログ肥大化の悲劇

#### 2.1. 環境構成の概要

  * **ログ収集ツール**: Fluentd
  * **ストレージプロビジョナー**: local-path-provisioner
  * **テスト内容**: 長時間の負荷テストや特定のアプリケーションの動作確認など。

#### 2.2. 問題発生のメカニズム

  * **ログローテーションの実装不足**: Fluentdで収集したログのローテーション設定が不十分、または全くされていなかった。
  * **ローカルストレージへのログ蓄積**: Fluentdが収集したログが、`local-path-provisioner`によってプロビジョニングされたPV（ノードのローカルパス）に蓄積され続けた。
  * **ノードストレージの満杯化**: テストの進行とログの増大により、ノードのルートファイルシステム（`/`）が満杯になった。

#### 2.3. 発現した具体的な症状

  * **`ImageGCFailed`**: ノードのストレージ不足により、Kubernetesが新しいイメージのプルや不要なイメージのガベージコレクションを実行不能になった。
  * **`EvictionThresholdMet`**: ノードのディスク使用率がしきい値を超え、kubeletが新しいPodのスケジューリングを拒否したり、既存のPodをエビクトしたりする状態になった。
  * **新規Podデプロイの失敗**: 容量不足のため、新しいPodが起動しなくなった。

-----

### 3\. 絶体絶命からの復旧：K8s内からの突破口

#### 3.1. 直面した課題：SSHアクセス不可

テスト環境のため、セキュリティポリシーやネットワーク制限により、ノードに直接SSH接続できない状況だった。通常の復旧手順が使えないという制約があった。

#### 3.2. K8sを駆使した解決策

1.  **容量不足Podのエビクト回避**: 新規Podがエビクトされる状況下で、いかにしてシェルアクセス用のPodを起動するかを検討した。ノード上に既にキャッシュされている、より小さなサイズのコンテナイメージ（例: **busybox**）を使用してPodのデプロイを試みた。これにより、イメージプルによる容量消費を避け、最低限の容量でPodを起動できる可能性を高めた。
2.  **PVコンテンツへのアクセス**: 起動したシェルPodから、問題のローカルストレージPV（例: **/opt/local-path-provisioner/pvc-\***）をPodにマウントした。**kubectl exec -it \<pod-name\> -- /bin/sh** でシェルに入り、マウントされたパスに移動した。
3.  **原因の特定とログファイルの削除**: **df -h** や **du -sh** （Pod内でこれらのコマンドが利用可能なイメージであれば）で、具体的にどのディレクトリが容量を圧迫しているかを確認した。大量のログファイルを特定し、**rm** コマンドで安全に削除した（例: **find . -type f -name "\*.log" -delete**）。容量が確保されたことを確認した。

#### 3.3. 復旧後の状況

ノードのストレージが解放され、`EvictionThresholdMet`や`ImageGCFailed`の状態が解消された。新規Podのデプロイが可能になり、クラスタが正常な状態に復帰した。

-----

### 4\. 今後の対策：再発防止と堅牢なログ管理体制の構築

#### 4.1. 外部ストレージの活用

  * **クラウドプロバイダー提供のストレージサービス**: AWS EBS, Azure Disk, GCP Persistent Diskなど。ストレージの動的プロビジョニング、スナップショット、サイズ変更の容易さが利点となる。ノードのディスク使用率に依存しないため、根本的な解決策となる。
  * **NFS/Cephなどの共有ストレージ**: 自前で構築する場合の選択肢。

#### 4.2. Fluentd/Fluent Bitでのログローテーションの実装

  * **Fluentd/Fluent Bitの設定によるローテーション**: `file`出力プラグインの`path`、`buffer_path`、`chunk_limit_size`、`rotate_wait`、`flush_interval`などの設定を見直す。ログファイルのサイズや時間でローテーションし、古いログを自動削除する設定を導入する。
  * **外部ツールとの連携**: Fluentdから直接S3などのオブジェクトストレージに転送し、K8sノード上には一時的なログのみを保持する設計にする。

#### 4.3. ログ監視とアラートの設定

ノードのディスク使用率を定期的に監視し、閾値を超えた場合にアラートを発報する仕組みを導入する。Prometheus + Grafanaなどの監視スタックを活用する。ログ基盤自体の健全性（取り込み遅延、エラーなど）も監視対象とする。

-----

###  まとめ

テスト環境でもログ管理は手を抜かないことの重要性を強調する。ローカルストレージ利用時のリスクと、それを回避するための設計についても言及する。予期せぬ障害発生時でも、Kubernetesの特性を理解していれば復旧の道があることを伝える。恒久的な対策としての外部ストレージ利用と適切なログローテーションの導入を改めて推奨する。
💌 好きな人としか見れない！QRコード × AES暗号で秘密の手紙を送る

こんにちは。tampopo256です。
普段は教育系のWebサービスを作ったりしています。

## 📌 この記事でできること

* 秘密のメッセージを**AES暗号化**
* 暗号文を**QRコード画像**に変換
* 好きな人にだけ**復号できるラブレター**を送る

## 🧠 背景：暗号化されたラブレターってロマンじゃない？

「好き」という気持ちは誰にでも言えるものじゃない。
**でも、言葉だけだとちょっと恥ずかしい…。**

そんなときに便利なのが、「**暗号化されたQRコード**」です。

* 見た目はただのQR
* でも中身は**暗号文**
* しかも復号するには、**ふたりだけが知っているパスワード**が必要

**感情 × 技術 = ロマン**、そう思いませんか？

## 💡 技術構成

| 要素      | 使用技術           |
| ------- | -------------- |
| 暗号方式    | AES（CBC）       |
| パスワード管理 | PBKDF2で鍵導出     |
| QRコード生成 | `qrcode` ライブラリ |
| 使用言語    | Python 3.x     |

## ⚙️ 準備：必要なパッケージのインストール

```bash
pip install pycryptodome qrcode pillow
```

## ✏️ ステップ1：AESでメッセージを暗号化する

```python
from Crypto.Cipher import AES
from Crypto.Protocol.KDF import PBKDF2
from Crypto.Random import get_random_bytes
import base64
import json

def encrypt_message(message, password):
    salt = get_random_bytes(16)
    key = PBKDF2(password, salt, dkLen=32, count=100000)
    cipher = AES.new(key, AES.MODE_CBC)
    ct_bytes = cipher.encrypt(pad(message.encode(), AES.block_size))
    data = {
        "salt": base64.b64encode(salt).decode(),
        "iv": base64.b64encode(cipher.iv).decode(),
        "ciphertext": base64.b64encode(ct_bytes).decode()
    }
    return json.dumps(data)
```

> ※ `pad` は `from Crypto.Util.Padding import pad` を使ってください。

## 📷 ステップ2：QRコードとして保存する

```python
import qrcode

def save_qr_code(data, filename="loveletter.png"):
    qr = qrcode.make(data)
    qr.save(filename)
    print(f"QRコードを保存しました: {filename}")
```

## 💌 ステップ3：暗号文をQRに変換して送信

```python
if __name__ == "__main__":
    secret_message = "君の笑顔が好きです。"
    password = "2人だけのヒミツ"

    encrypted = encrypt_message(secret_message, password)
    save_qr_code(encrypted, "secret_love.png")
```

→ **LINEやSlackでこのQR画像だけ送信すればOK！**

## 🔓 復号方法（相手側）

復号コード（相手に送ってもよい）：

```python
from Crypto.Cipher import AES
from Crypto.Protocol.KDF import PBKDF2
from Crypto.Util.Padding import unpad
import base64
import json

def decrypt_message(data_json, password):
    data = json.loads(data_json)
    salt = base64.b64decode(data['salt'])
    iv = base64.b64decode(data['iv'])
    ciphertext = base64.b64decode(data['ciphertext'])

    key = PBKDF2(password, salt, dkLen=32, count=100000)
    cipher = AES.new(key, AES.MODE_CBC, iv)
    plaintext = unpad(cipher.decrypt(ciphertext), AES.block_size)
    return plaintext.decode()
```

## 🧪 ヒントの渡し方（恋愛演出）

* QRだけ送って「ヒントは“最初に出会った日のカフェの名前”だよ」
* デート中に耳元で「パスワードは"その時のBGM"」とだけ伝える
* 解けたら「正解！じゃあ、今度また会おうか」

→ **告白の演出にも、プロポーズにも、記念日サプライズにも使えます**

## ✅ 注意点（マジで実用したい人向け）

* 相手がエンジニアでなくても、**復号ページを用意する**と親切（Flaskなどで簡単に）
* QRコードに入る文字数は制限あり（暗号文を長くしすぎない）
* 画像の圧縮劣化で読み取れない場合あり → PNG推奨


## 🏁 まとめ

* AES暗号で**ふたりだけのメッセージ**を安全に共有
* QRコード化すれば**恥ずかしさゼロでラブレター**を送れる
* 技術で演出する、ちょっと特別な気持ちの伝え方

## 💬 最後に

「ただ“好き”って言うのが恥ずかしい」
でも、**相手だけには伝えたい**。
そんなとき、ちょっとだけ技術を使ってみると、**言葉以上に伝わるものがあるかもしれません。**

「ヒントは“あの日の空の色”だよ」
そうやって伝える愛も、なかなかいいと思いませんか？
Netskope の SSL/TLS Inspection が有効なプロキシ下で electron をインストールする

[Netskope の SSL/TLS インスペクション機能](https://www.netskope.com/jp/netskope-one/ssl-tls-inspection) によって、特定ドメインへの通信時にNetskope独自のサーバ証明書が使われてしまい、外部通信が必要な処理でエラーが発生するケースが存在する。

今回は、Windows環境において、[playwright のリポジトリ](https://github.com/microsoft/playwright) で `npm ci` を実行したところ、依存関係の electron のインストールスクリプト実行時にエラーが発生した。

ポイントは以下2点

**プロキシを利用する設定**
- Electron インストール時にプロキシを使うよう設定する。先人がいらっしゃった。感謝。
  [Proxy環境でElectronインストールしようとしたら隠れた罠があったんです](https://qiita.com/LuckyRetriever/items/2f377b1ce34f7d12903c)

  次の2つの環境変数を設定すればよい。
  ```
  export ELECTRON_GET_USE_PROXY=true
  export GLOBAL_AGENT_HTTPS_PROXY=http://proxy:port
  ```

**OSの証明書ストアを使用する設定**
- 前提：Netskope で利用する証明書がOSの証明書ストアにインストール（信頼）している
- Node 23.8.0 より、`--use-system-ca` オプションをつけて node を実行することで、システムの証明書ストアを使うようになる機能が追加された。
    https://nodejs.org/ja/blog/release/v23.8.0#support-for-using-system-ca-certificates-store-on-macos-and-windows
- node のオプションなので `npm ci` に直接渡すことはできない。そのため `NODE_OPTIONS` 環境変数を使ってオプションを有効化する。
```
NODE_OPTIONS=--use-system-ca npm ci
```

これで無事 playwright のリポジトリで `npm ci` を実行し、依存関係の electron をインストールすることができた。
偏微分方程式とシステム



## ✅ 入力–システム–出力の構造

### ◉ システム：熱拡散（Heat Conduction System）

偏微分方程式：

$$
\frac{\partial u(x,t)}{\partial t} = \alpha \frac{\partial^2 u(x,t)}{\partial x^2}
$$

* $u(x,t)$：位置 $x$、時刻 $t$ における温度
* $\alpha = \frac{k}{\rho c_p}$：熱拡散率（物性定数）

---

### ◉ 入力（Input）：時間依存ランプ加熱（境界から）

$$
u(0,t) = A t
\quad \text{（境界条件：ヒーター等による温度加熱）}
$$

* $A$：ランプの傾き（加熱速度）
* 境界 $x=0$ においてのみ加熱
* 初期条件：$u(x,0) = 0$（全体が初期0℃と仮定）

---

### ◉ 出力（Output）：内部の温度分布 $u(x,t)$

代表解（半無限長ロッド）：

$$
u(x,t) = A \left[ t \cdot \text{erfc}\left( \frac{x}{2\sqrt{\alpha t}} \right) - \frac{x}{\sqrt{\pi \alpha}} \cdot e^{-x^2 / (4\alpha t)} \right]
$$

これは、

* 時間の進行に伴って
* 空間方向 $x$ に温度がじわじわ拡散していく
* ランプ入力によって温度が非線形に上昇していく

---

## ✅ フィードバック的視点の「熱拡散系」

この系は「**内部状態 u(x,t)** に入力 At が影響し、それが空間方向に広がっていく」という伝播型の**分布定数システム**。

### ▶ 入力→出力の構造的分類：

| 項目   | 内容            |
| ---- | ------------- |
| 入力   | ランプ（ステップの積分）  |
| システム | 拡散 PDE（非線形応答） |
| 出力   | 時間・空間依存の温度場   |

---

## ✅ 制御工学との接続（例）

* 空間離散化 $\rightarrow$ 状態空間モデル
* 入力 $u(0,t)$ $\rightarrow$ システム状態（温度分布）に作用
* 出力はある位置 $x=L$ での温度や平均温度
Lotka–Volterra方程式を逐次線形化→離散化→状態フィードバック制御（現代制御）



## ✅ 1. 元の非線形連続時間モデル（Lotka–Volterra 方程式）

被食者（Prey）\$x(t)\$、捕食者（Predator）\$y(t)\$ の個体数：

$$
\begin{cases}
\displaystyle \frac{dx}{dt} = \alpha x - \beta x y \\[8pt]
\displaystyle \frac{dy}{dt} = \delta x y - \gamma y
\end{cases}
$$

* \$\alpha\$：被食者の自然増殖率
* \$\beta\$：被食者が捕食される率
* \$\delta\$：捕食によって捕食者が増える係数
* \$\gamma\$：捕食者の自然減衰率

---

## ✅ 2. 状態ベクトルと非線形ベクトル場

状態ベクトル：

$$
\mathbf{z}(t) =
\begin{bmatrix}
x(t) \\ y(t)
\end{bmatrix}
,\quad
\mathbf{f}(\mathbf{z}) =
\begin{bmatrix}
\alpha x - \beta x y \\
\delta x y - \gamma y
\end{bmatrix}
$$

---

## ✅ 3. 任意点 \$\mathbf{z}\_0 = \[x\_0, y\_0]^\top\$ まわりのヤコビ行列による逐次線形化

ヤコビ行列（線形化近似）：

$$
A =
\left. \frac{\partial \mathbf{f}}{\partial \mathbf{z}} \right|_{\mathbf{z}_0}
=
\begin{bmatrix}
\alpha - \beta y_0 & -\beta x_0 \\
\delta y_0 & \delta x_0 - \gamma
\end{bmatrix}
$$

---

## ✅ 4. 離散化（Euler法）

時間刻み \$\Delta t\$ を用いて離散時間状態空間モデルを得る：

$$
\mathbf{z}[k+1] = (I + A \Delta t)\mathbf{z}[k] + B \cdot u[k]
$$

ここで \$u\[k]\$ は制御入力、\$B\$ は入力行列（適宜設定、例：恒等 or 任意ベクトル）
\$I\$ は単位行列。

---

## ✅ 5. 出力方程式（出力をどの状態で観測するか）

$$
\mathbf{y}[k] = C \cdot \mathbf{z}[k]
$$

例：\$C = \[1 \quad 0]\$ とすれば \$y\[k] = x\[k]\$（被食者数を出力として観測）

---

## ✅ 6. 状態フィードバック制御則（Modern Control）

状態ベクトル \$\mathbf{z}\[k]\$ を用いたフィードバック入力：

$$
u[k] = -K \cdot (\mathbf{z}[k] - \mathbf{z}_{\text{ref}})
$$

ここで：

* \$K\$：ゲイン行列（2次元ベクトル）
* \$\mathbf{z}\_{\text{ref}}\$：目標状態（平衡点など）

---

## ✅ 7. 閉ループ系の状態方程式（状態フィードバックあり）

$$
\mathbf{z}[k+1] = \left( A_d - B K \right) \mathbf{z}[k] + B K \mathbf{z}_{\text{ref}}
$$

\$A\_d = I + A \Delta t\$（Euler離散化後）

---

## ✅ 8. ゲイン \$K\$ の設計方法（例）

* 極配置法（pole placement）
* LQR（Linear Quadratic Regulator）などを用いて数値的に決定

---
Docker Desktopを使わずにWindowsコンテナ

:::note
こちらの記事の続きです。
:::

https://qiita.com/sugi_s/items/8b0ca2ee71edd54b8060

## Windowsコンテナとは

https://learn.microsoft.com/ja-jp/virtualization/windowscontainers/about/

　一般にコンテナというとLinuxコンテナを指すケースが多いと思います。つまりLinuxベースのOSで仮想環境を立ち上げるということで、これは軽量ですし特に制約が無ければこちらを使うことが好ましいと思います。しかし、どうしてもWindowsでコンテナを建てたいというケースもあります。その際に利用できるのがWindowsコンテナです。

 　上記リンクでいくつか方法が提示されていますが、やはりDocker Desktopを使うのが主流だと思います。Docker Desktopを入れるとWindowsとLinuxを直感的に使い分けることが出来ます。
　しかし、私はWindows/Linuxコンテナの同時実行を目標としているので不便のためDocker Desktopは使わないことにします。

:::note warn
 　Windowsコンテナに関してLinuxコンテナとは使い勝手の異なる点があります。最初は面食らってしまうと思うので注意です。
:::

### Docker Hub上の対応イメージが少ない

　Docker Hubでベースとするイメージを探し利用するというのは良くあることですが、Linuxベースのイメージと比べて数が少ないです。以下は一例でRubyのイメージですが、これに関してはWindowsベースのものは存在すらしません(泣)

https://hub.docker.com/_/ruby

　それからWindowsコンテナのイメージは重く複雑なので、お目当てのイメージがあっても苦戦する可能性があります。実際私はJavaを使いたかったのですが、以下のイメージは使わずに1からイメージ作成をしました。

 https://hub.docker.com/_/openjdk

　1からイメージを作成する場合は、こちらを基準にしてDockerFileを作成します。

https://learn.microsoft.com/ja-jp/virtualization/windowscontainers/manage-containers/container-base-images

 ### 情報が少ない

　Windowsコンテナに関する記事が少なく、何かで躓いた時に苦労します。Qiitaの"windowsContainer"タグは6件しか記事が無いです...。
　コンテナやdockerという単語が暗にlinuxを前提としていることが多いので目当ての記事を見つけにくかったり、AIに相談した際の回答が的外れだったりするので根気と工夫が必要になります。

## DockerでWindowsコンテナの起動

　Docker Desktopがある場合は事前にアンインストールをしてください。

 　また、以下のサイトを参考にしています。

https://zenn.dev/0_0/articles/40dd471fffc8b4

https://qiita.com/rabut/items/a522bf6408e3a9b69937

### Windowsの機能「コンテナー」を有効化

1. スタートメニューから「Windowsの機能」を開きます
1. 「コンテナー」のチェックボックスをオンにします
1. 再起動します

### Docker Engineのダウンロード

　以下のURLから最新版のzipをダウンロードしてください。

https://download.docker.com/win/static/stable/x86_64/

　用意したzipを適当な場所（Program Fileなど）で展開しましょう。

:::note warn
手動でバージョンを管理する必要があります。
:::

### 起動準備

　環境変数のPATHを通します。

　管理者権限でPowershellを開き、以下を実行します。

 ```PowerShell
# サービスの登録
dockerd --register-service

# サービス起動
Start-Service docker
```

上記コマンドは初回のみ必要です。サービスも自動起動になります。

### 起動確認

　手元のDockerFileをビルドしても良いですが、以下のコマンドで簡単に確認できます。

```PowerShell
docker run hello-world

#期待出力
~~~
Hello from Docker!
This message shows that your installation appears to be working correctly.
~~~
```

:::note warn
　Docker Desktopを利用したことがある場合、単にアンインストールしただけでは設定ファイル等が残ってしまいます。それらの設定ファイルが邪魔をして起動に失敗する場合があります。
:::

### Ubuntuとの違いを確認

　Powershellと同時にUbuntuを開き、それぞれで以下のコマンド等を使ってWindowsコンテナとLinuxコンテナが別々に管理されていることを確認しましょう。

 ```sh
# イメージ一覧を表示
docker image ls
# コンテナー一覧を表示（-a: 停止中を含む全ての）
docker container ls -a
```

## 次へ

　おめでとうございます！成功です！
　次回は両コンテナを同時に操作する方法を紹介します。

　今回Docker composeは用意しませんでした。用意しても良いのですが、私がやりたい「windows/linuxコンテナを同時に準備する」ことには不向きなので割愛します。

 　バッチファイルを使って管理することにしましょう～。

  （coming soon）
技術ブログ｜エンジニア必見！イッキに思い出すReact(JSX)の基礎知識

![note.：社員インタビュー (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/6fff975b-4aba-4212-8d47-6e7755d325dc.png)

# はじめに
### 背景
久しぶりにReactを触って、度々’これなんだっけ...’となったためおさらいをしようと思いました。
思い返すと初めて触ったときちんぷんかんぷんだったため、基本は大事だなと痛感しました。

### そもそもJSXとは
JavaScript内にHTMLを埋め込むような記法のこと。

![gazou1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/13c76466-fbf3-453a-8f46-aadf615599ed.png)

# JSX記法いろいろ
### アロー関数(ES6)
関数の定義を行う。
例: ```const <関数名> = (引数1, 引数2...) => { return a + b };```

コンポーネントの定義を行う(関数コンポーネント)
```例:const Header=()=> <h1> Test header </h1>```

 →タグが直接書ける!

### {}(波括弧)
###### 変数や式の展開を行う

![gazou2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/4283fa61-74e8-472f-b522-ed018cecc25c.png)


注: ブロック分(ifなど)は記述できない(後述)。
# コメントアウトはHTML準拠ではない
![gazou3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/55d99172-e381-46f9-a0c5-cd2509047255.png)


# スプレッド構文(...)
### オブジェクト、配列を展開する

![gazou4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/91c01bd3-53cc-4658-924b-7f38e881fb23.png)


# Props (値を渡す)
例: 
![gazou5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/072d7aac-fb07-4df4-bb18-4015025204b3.png)


# Stateとは(useState)
  ### ‘状態’を管理する(値の変化など)
例: 

```
 function NameInput() {
const [name, setName] = useState(’’)
// nameは現在の値、setNameは値を変更する関数, useState(*)は初期値 
```

# useEffectとは
### コンポーネントが描画されたタイミングで実行される
例:
![gazou6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/c96d19ab-b53b-40ce-832b-bdc88a63b4ce.png)


# useEffectの依存配列
  引数なし: コンポーネントが描画されるたびに実行される
  〔　〕(空配列) : 初回のみ実行される
  [anyCount]: ←のようにするとanyCountが変化するたびに実行される

# HTML属性(attribute)の記法(class)
![gazou7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/802121fa-efa6-4466-9eb3-c31f8f681ea8.png)

![gazou8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/964cbc99-c692-4a47-854f-cc5bbc7b49f4.png)



# HTML属性(attribute)の記法(style)
二重波括弧で列挙する
注: スタイル名は下記のように表記

NG (background-color)
**OK (backgroundColor**

# if(){}の代替として三項演算子を使用する(波括弧内にブロック文は使えない)

![gaou9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/b599559f-1171-4b04-9c3d-cf7b412203a3.png)


# 最後に
個人的にVue.jsより直観的にわかりづらい点があると思っていますが、採用されることの多いライブラリのため、覚えておいて損はないと思います。

# 安心安全のホワイト高還元SESに転職を考えている方へ
新しい挑戦に踏み出すことは、人生において重要な一歩です。
転職活動は自分自身を知り、成長する貴重な機会でもあり、夢や成長を追求するためには必要な要素の一つになるかと思います。
どんな選択をされるにせよ、その決断があなたに取って素晴らしい未来を切り開くことを願っています！
グラディートと一緒に誇れるエンジニアを目指しましょう！

■『株式会社グラディート』では受託開発・SES・ブランディングデザイン・事業コンサルティングなどを事業として行う都内のIT企業です。現在、不遇な待遇で困っているエンジニアさんは、ぜひ一度グラディートに相談してみてね！（年収査定・SESへの転職相談も承っております！）

株式会社グラディート採用情報はこちら▼
https://en-gage.net/gradito/

株式会社グラディート公式サイトはこちら▼
https://www.gradito.co.jp/
s3とdynamodbの削除コスト比較

 # S3（Glacier 等は除く）
- DeleteObject は 無料（リクエスト課金なし）
- ListObjects は 有料（1,000 件ごとに課金）
- バージョニング有効時は削除マーカーに注意（ストレージが残る）
- ライフサイクルルールを使えば ListObject なしで自動削除可能 → 完全無料で削除可能
- もしくはその他のオブジェクトを特定する仕組みが必要

# DynamoDB
- DeleteItem は 有料（WRU 消費）
- TTL（Time to Live）を使えば無料で自動削除される（ただし遅延あり）
【AWS】IPアドレスのCIDR表記


## はじめに

こんにちは。アメリカ在住で独学エンジニアを目指している Taira です。
先日、EC2インスタンスのセキュリティグループでSSHポートの開放設定をしていたとき、
**「ソースをCIDRで指定してください」**
という文言に出くわし、
「**CIDRってなんだっけ？/24とか/32ってどういう意味？**」
と疑問に思いました。

この記事では、CIDRの基礎知識や「/24」「/32」の意味についてわかりやすく解説します。

なお、IPアドレスについての理解も必要なので、IPアドレスって何だっけ？となった方は以前書いたIPアドレスの記事も見てみてください

https://qiita.com/Taira0222/items/47831e48f3724e927803

---

## CIDR表記ってなに？

CIDR (Classless Inter-Domain Routing)表記は、
**IPアドレスの後ろに「/数字」を付けることで、ネットワークの範囲を指定する方法**です。

```
例：10.0.0.0/24
```

この「/24」は、
**「このIPアドレスの先頭24ビット分はネットワーク部分です」**という意味です。

---

## 「8ビットづつ」の意味

IPv4のIPアドレスは、**32ビット**の数字で構成されています。

これを解りやすくするために、**8ビットずつのグループに分けて「ドット区切り」**で表示しています。

```
例：10.0.0.1

→ 内部表現
 10        . 0         . 0         . 1
00001010 . 00000000 . 00000000 . 00000001
→  8bit   +  8bit   +  8bit   +  8bit  = 32bit
```

だから `/24` というのは「先頭3グループ = 8bit x 3 = 24bit」をネットワーク部分として使う、という意味です。

---

## /24 と /32 の違い

| CIDR表記 | 意味                                    |
| ------ | ------------------------------------- |
| `/24`  | 先頭24ビットがネット部。残り8ビットはホストとして使える (総256個) |
| `/32`  | 全て30ビットがネット部。**1個のIPみの指定**            |

### 実際の例

* `10.0.0.0/24`
  → `10.0.0.0` から `10.0.0.255` までの範囲 (256台)

* `203.0.113.5/32`
  → `203.0.113.5` のみ (ピンポイントで一台)

---

## AWSでの実際の使用例

### ◼ EC2のセキュリティグループ「ソース」のCIDR指定

EC2でSSHやHTTPのポートを開放する際に、誰のIPからのアクセスを許可するかをCIDRで指定します。

#### 例1：自分のIPだけを許可

```
203.0.113.5/32
```

→ 自分のパソコンのIPのみ許可

#### 例2：全世界に開放 (非推奨)

```
0.0.0.0/0
```

→ すべてのIPからのアクセスを許可

---

## よく使われるCIDR表記

| CIDR表記 | 範囲          | 使用例              |
| ------ | ----------- | ---------------- |
| `/32`  | その1台のみ      | セキュリティグループのソース指定 |
| `/24`  | 256個のIPアドレス | サブネット設定          |
| `/16`  | 約2万IP       | VPCのCIDRブロック     |
| `/0`   | 全IP         | 一時的な全開放(開発環境など)  |

---

## おわりに

CIDR表記は最初は複雑そうに見えますが、理解すると非常に便利でパワフルな表記法です。
AWSでのポート設定やアクセス範囲の管理に必須なので、この機会にしっかりと理解しておくことをおすすめします。
チーム開発でのブランチ運用の基本的な流れ（Git Flow風）


これからチーム開発に参加するにあたって、GitHubの使い方が不安なのでまとめておこうと思います。
以下のような流れで作業するのが一般的です。



# 🔹 1. **リポジトリをクローン**

まずはチームの GitHub リポジトリ（=元リポジトリ）をローカルにクローンします：

```bash
git clone https://github.com/team/project.git
cd project
```

> ✅ この時点で `main` や `develop` ブランチもローカルに取得されますが、**`main` がデフォルト**でチェックアウトされてることが多いです。



# 🔹 2. **作業ブランチ（feature）を作る前に `develop` を最新にする**

```bash
git checkout develop　<!-- developブランチに切り替える -->

git pull origin develop <!-- 最新のdevelopブランチをローカルに取りこむ -->
```

これで、**最新の `develop` ブランチ**をローカルに取り込みます。



# 🔹 3. **`develop` から作業用ブランチを切る**

```bash
git checkout -b feature/awesome-feature
```

新しいブランチを作成して、自分のタスク（機能追加・修正など）を行います。


# 🔹 4. **開発してコミット & プッシュ**

```bash
git add .
git commit -m "add awesome feature"
git push origin feature/awesome-feature
```



# 🔹 5. **GitHub上で Pull Request（PR）を出す**

チーム開発では、**自分の `feature/～` ブランチを `develop` にマージしてもらう**ために「Pull Request」を作成します。





# ✅ 対策：今いるブランチの確認

今いるブランチ名を確認すると安心です！

```bash
git branch
```
で、* がついてるブランチ名が「今のブランチ」です。




:::note warn
❌「クローンしただけ」＝「最新の状態」ではないことがある（作業ブランチを作る前に最新の状態に！）
❌クローン直後は main がデフォルトになっていることが多い（今いるブランチをチェック！）
-
mainからブランチを切ると、後で develop にマージしようとした時に
「え？このコードないよ」みたいなことになるので要注意！！！
:::
意味のあるドキュメントレビューをするために

”雰囲気レビュー”（なんちゃってレビュー）にならないように、意味のあるレビューができるとよいと思っています。

レビュー作業について，まとめてみました．

---
# 構成、校正、校閲について

レビューと呼ばれる作業には、以下の3つがあると思います。

構成：文章の目的に合わせて、章立てや話の流れを整理する
校正：元原稿とくらべて、明かな字句の間違いを直す
校閲：校正に加え、元原稿に書いてある内容の事実関係にまで踏み込んでチェック
- 誤字、内容の矛盾などの間違いを見つける
- 書かれていること（地名や固有名詞、サービス内容、データ類など）が正しいのか調べて確認する

---
参考
- 「校正」と「校閲」の違いって？～『校正基本講座』に行ってみた | BLOG | シナジーマーケティング株式会社　SynergyMarketing https://www.synergy-marketing.co.jp/blog/calibration-basic-course
- 新潮社の校閲すごいっ！校閲のプロの仕事っぷりが話題 - NAVER まとめ http://matome.naver.jp/odai/2136766411643129901
---


それぞれで、チェックする項目が違います。

構成作業をするとしたら、
- 章構成は分かりやすいか
- 章の前後関係はどうか
- 重複していたり、足りない項目はないか
のようなチェックをすることになると思います。

校正作業をするとしたら、
- 誤字脱字はないか
- 用語の揺れチェック
のようなチェックをすることになると思います。


校閲作業をするとしたら、
- 目標設定や、課題設定に対して､活動内容が対応しているか？結論がどうなっているか？
- スケジュールで書かれている作業とその後の章で書かれている作業は対応がとれているか
- スケジュールで書かれている作業は本当にその時期にその作業をしたのか？
- 類似サービスで取り上げているサービスは本当に書いてあるとおりのサービスなのか？
- 役割設定で書かれている作業をグループの章や個人作業の章で書かれているか？
- グループ作業で書かれている作業を個人作業で書かれているか？逆に､個人作業で書いてあるがグループ作業で書いていない作業はないか？
- グループ作業で書かれている問題点と個人作業で書かれている問題点が対応しているか？
のようなチェックをすることになると思います。


# 校正､校閲作業のアイディア

校正、校閲作業のアイディアをいくつか考えてみました。

フィードバックをする
- レビューしてもらったコメントに反応する
- コメントを受けてどう変更したのかをレビュアに分かるようにする
- 分からない点などを放置しづらい環境を作る
- フィードバックの間隔を短くする

可視化する
- 各章、節でなにを書くべきか、なにを書いてあるかを可視化する
- レビュー作業の進捗を可視化する
− レビューコメントと修正結果を可視化する

作業単位を小さくする
- 1回に書いてもらう量、チェックしてもらう量を少なくする
- 執筆期間、チェック期間を短くして、その間に終わる作業をしてもらう
- グループを小さくして、その中でチェックしてもらう

矛盾が少ない文章を使う
- サービス企画書やアプリケーション設計書、議事録など、すでにチェック済みの文章をうまく流用する

チェックの自動化、半自動化を考える
- RedPen, textlint、wordの機能などを使い、自動化できるチェックを自動化する
- 文脈依存で使い方が変わるなど、自動チェックしづらい書き方などは極力しないようにする
- git+Weckerなど使い、作業者が作業しなくてもよい環境を作る
- ChatGPT等を利用する

客観的に読み直す
- 一度書いた原稿を、時間をおいて読み直す
- スケジュールに読み直す時間を割り当てる必要あり
- 他のメンバにチェックしてもらう
- チェックもルーチン化しておく
- チェックしてもらえたかどうか確認（テスト？）するなど

作業の繰り返しを防ぐ
- 一度指摘したり、修正した箇所を再度チェックしなくてもよい環境を作る
- 同じマスターファイルを使うとか、差分を自動でチェックできるような仕掛けを作るとか

校閲しやすい文章を書く
- 出典があるなら明記する
- 参照関係を明記する
- 文脈依存で使い方が変わるなど、自動チェックしづらい書き方などは極力しないようにする

---
参考
- 第2回　RedPenを利用した文書の継続的検査への取り組み：RedPenを使って技術文書を手軽に校正しよう｜gihyo.jp … 技術評論社 http://gihyo.jp/lifestyle/serial/01/redpen/0002
- Wecker Redpenをビルド時に実行する | Monotalk https://www.monotalk.xyz/blog/execute_redpen_on_wercker/
- Re:VIEW + RedPen + Travis CIの環境を構築できるboilerplateを作った - I'm kubosho_ http://blog.kubosho.com/entry/review-boilerplate
- 文書執筆の指南書で解説されている問題点を RedPen で発見する - Qiita http://qiita.com/takahi-i/items/a8b994ef17fd66fe6237
---
KMP LibraryをiOSで導入

# はじめに

KMP LibraryをiOSで導入する方法について解説。

# KMPとは

Kotlin で Android、iOS、JVM、JavaScript など複数プラットフォームのロジックを共通コードで書けるようにする技術。

https://www.jetbrains.com/ja-jp/kotlin-multiplatform/


# 導入方法

## 1. KMPプラグインをインストール

`Android Studio` → `Settings...` → `Plugins` → `Kotlin Multiplatform`で検索 → `Kotlin Multiplatform`をインストール

![kmp-install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/9670ccfa-cc0d-4302-99f6-8213b004ba58.png)

## 2. KMP Libraryの新規作成

`File` → `New` → `New Project...` → `Kotlin Multiplatform Library`を選択 → `Next` → `Next` → `Finish`

![kmp-lib.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/6ce86b0a-a7b7-4d05-9a87-63c30563a0e6.png)

## 3. iOS導入

Xcodeで新規プロジェクトを作成し、プロジェクトフォルダ直下に先ほど生成したKMP Libraryを配置。

Xcodeで左のフォルダ構成からプロジェクト名をクリック → `Build Phases` → 左の`+`ボタン → `New Pun Script Phase` → Shellに下記コマンドを記述

```bash
cd "$SRCROOT/shared"
./gradlew :shared:embedAndSignAppleFrameworkForXcode
```

![kmp-ios.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/dfae9e1a-6acd-4c7d-bb91-a0caefc0c279.png)

`Build Settings` → `User Script Sandboxing` を`No`に変更

![kmp-ios2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/82d088b2-342b-42a5-a168-f29fbeda7e73.png)

`ContentView.swift`で下記のように書いてログが出力されれば成功。

```swift

import shared

struct ContentView: View {
    init() {
        let greet = Greeting().greet()
        print("Greeting message: \(greet)")
    }
    //...
}

```
PHPのコーディング規約と静的解析ツールまとめ

この記事は、「独学エンジニア」で学んだ内容をもとに、自分自身の理解を深めるための備忘録としてまとめたものです。
PHPのコーディング規約（PSR）や、それをチェックする静的解析ツール「PHP_CodeSniffer（PHP-CS）」について、後から見返しても分かりやすいように整理しました。

https://dokugaku-engineer.com/course/serverside

---

### **1. コーディング規約とは？**

- **コーディング規約**とは、コードを書く際にエンジニアが守るよう定められた**ルール**です。
- **目的**:
    - プログラムの品質を均一化。
    - コードの可読性を向上。
    - チーム開発での統一感を確保。

---

### **2. PHPのコーディング規約: PSR**

### **PSRとは？**

- *PSR（PHP Standards Recommendation）**は、PHPにおけるコーディング規約の標準。
- PHPの主要なフレームワーク（Laravel、Symfonyなど）のルールが統一されていなかったため、フレームワーク間での共通ルールとして定められたもの。
- *PHP-FIG（PHP Framework Interoperability Group）**というグループが策定。

---

### **PSRの主な種類**

- **PSR-1**:
    - **基本的なコーディング規約**。
    - 例:
        - クラス名は「StudlyCaps（パスカルケース）」を使用。
        - PHPファイルはUTF-8で保存。
        - メソッド名はキャメルケースを使用。
- **PSR-12**:
    - **コーディングスタイルのガイドライン**。
    - PSR-1を基盤に、より詳細なスタイルガイドを提供。
    - 例:
        - インデントにはスペース4つを使用。
        - 行末には余分な空白を入れない。
        - 名前空間やクラスを適切に配置。

---

### **3. PHP_CodeSniffer（PHP-CS）とは？**

### **概要**

- **PHP_CodeSniffer（PHP-CS）は、PHPコードがコーディング規約に沿って書かれているかを静的解析**するツール。
- **主な機能**:
    1. **PHP-CS**:
        - コードがコーディング規約を守っているかをチェック。
    2. **PHP-CBF**:
        - コードを規約に従って**自動修正**（フォーマット）する。

---

### **PHP-CS vs PHP-CBF**

| **機能** | **PHP-CS** | **PHP-CBF** |
| --- | --- | --- |
| **役割** | コーディング規約違反を検出。 | コーディング規約違反を自動修正。 |
| **学習効果** | どの規約に違反しているか学べる。 | 自動修正されるため、何が直ったか分かりにくい。 |
| **おすすめ用途** | 初心者や規約を学ぶ段階におすすめ。 | 時間を節約したい場合に便利。 |

---

### **4. 静的解析のメリット**

### **(1) コーディング規約を守ることで得られるメリット**

- コードの品質が均一化され、**読みやすいコード**が書ける。
- チーム開発において、コードの**保守性と再利用性**が向上。
- レビューの効率化につながり、**レビューコストが削減**される。

### **(2) PHP-CSを使うメリット**

- 規約に違反している箇所を**自動的に検出**。
- 修正作業を通して、**コーディング規約を学習**できる。
- コードの問題を事前に発見することで、**開発効率が向上**。

---

### **5. 注意点**

- **PHP-CS vs PHP-CBFの使い分け**:
    - **PHP-CS**は規約に違反している箇所をリストアップするだけ。
    - **PHP-CBF**は違反箇所を自動修正するが、何が修正されたか分かりにくい。
    - 初心者や規約を学びたい場合は、**PHP-CS**を利用するのがおすすめ。
- **PSRの規約以外にも対応可能**:
    - PHP-CSはPSR以外の独自の規約にも対応可能。ただし、最初はPSR-1とPSR-12を遵守するのがおすすめ。

---

### **6. 今後の学習内容**

- 次回以降で、**PHP_CodeSniffer（PHP-CS）**を実際に使ってコーディング規約をチェック。
- **PSR-1**と**PSR-12**に準拠した書き方を実践的に学び、規約に沿ったコードを書けるようにする。

---

### **7. まとめ**

- **コーディング規約**:
    - コードを書く際のルールで、品質を均一化するために重要。
    - PHPでは **PSR-1**（基本規約）と **PSR-12**（スタイルガイド）が標準。
- **PHP_CodeSniffer（PHP-CS）**:
    - コードが規約を守っているかをチェックするツール。
    - 手動で修正する際に役立つ。
- **静的解析のメリット**:
    - コードの可読性・保守性向上。
    - チーム開発でのレビュー効率化。
    - 良いコーディング習慣が身につく。

コーディング規約を理解し、静的解析ツールを活用できるようになることで、読みやすく保守しやすいコードを書く力が身につきます。この記事はあくまで自分のための学習記録ですが、同じように学習中の方にも参考になれば幸いです。
今後は、実際にPHP-CSを使ってPSR準拠のコードを書けるよう練習を続けていきたいと思います。
山本和佳Tips：【保存版】22歳が1年でフォロワー1万人達成したSNS運用の全ノウハウ



こんにちは、山本和佳です。
私は22歳でSNS運用の仕事を始め、未経験から1年でフォロワー1万人を突破しました。
今日は、そのときに実践してきた具体的な方法をシェアします。

まず一番大事にしたのは、「とにかく試して、すぐ振り返る」こと。
投稿した内容がどれくらい見られたか、どんな反応があったかを毎週確認して、
良かったものは続け、反応が薄かったものは改善しました。
小さなPDCAをたくさん回す感覚です。


投稿の中身では、「自分らしさ」と「共感されるテーマ」、
そして「ちょっと役に立つ情報」を意識しました。

女優を目指していた経験や、日常の気づき、SNSのちょっとしたコツなど、
読んだ人が「わかる」「使える」と思えるような内容を意識して発信しました。

ビジュアルもとても大切です。
私はCanvaを使って色やフォント、構成を統一し、
ぱっと見で「この人の投稿だ」と分かるように心がけました。
見やすさはフォロワーの信頼にもつながります。

コメントやDMにはなるべく早く丁寧に返信するようにしています。
特別なことをしているわけではありませんが、「ちゃんと読んでくれてる」と
思ってもらえることが、ファンを増やす一番の近道です。

そして最後に意識したのは他のSNS運用者やインフルエンサーとのコラボ。
定期的に一緒にライブ配信をしたり、投稿をシェアし合うことで、
フォロワー以外の新しい層にリーチできました。

この5つの積み重ねが私の1万人達成の土台になっています。
どれも今日から始められることばかりなので、ぜひ参考にしてみてくださいね。