OmniAICreator/Qiita-1.07M huggingface dataset:
【symbol-sdk】Flutterでのあれこれ 

# はじめに

Flutterでのsymbol-sdkのあれこれです。
実装していて気づいたことをメモしていきます。

# symbol-sdk(Dart)
https://pub.dev/packages/symbol_sdk

# publicKeyからアドレスを取得する

facadeを通して取得

```dart
import 'package:symbol_sdk/index.dart';
import 'package:symbol_sdk/symbol/index.dart';
import 'package:symbol_sdk/CryptoTypes.dart' as ct;

final keyPair = KeyPair(ct.PrivateKey(privateKey));
final facade = SymbolFacade(networkType);
final address = facade.network.publicKeyToAddress(keyPair.publicKey);
// addressToStringを使うにはpackage:symbol_sdk/index.dartのインポートが必要
final _address = addressToString(address);
print(_address);
```

以下のように公開鍵を渡すでもOK

```dart
final publicKey = ct.PublicKey('863C13B856A8A3012C8DD63C1F151A2F3D7Axxxxxx');
final testaddress = facade.network.publicKeyToAddress(publicKey);
final _address = addressToString(address);
print(_address);
```

# 受け取り用のQRを生成する

こんな感じのQRコード（QRコードの中身）ができる。
実際にSymbolのモバイルウォレットで読み取ることが可能。
（読み込んでも勝手に送信などしないので安心してください）


![FA38F1C4-3E35-48C7-B10D-F9BB0D22D5EC_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/7d69a31e-0d85-7ceb-8bb9-74efe49dc664.jpeg)

## 実装

```dart
import 'package:symbol_sdk/index.dart';
import 'package:symbol_sdk/symbol/index.dart';
import 'package:symbol_sdk/CryptoTypes.dart' as ct;

var tx = TransferTransactionV1(
    network: networkType,
    deadline: Timestamp(facade.network.fromDatetime(DateTime.now().toUtc()).addHours(2).timestamp),
    recipientAddress: UnresolvedAddress(_address),
    mosaics: [UnresolvedMosaic(mosaicId: UnresolvedMosaicId(0x72C0212E67A08BCE), amount: Amount(1000000))],
    message: MessageEncorder.toPlainMessage(decodedData['data']['message']),
);

Uint8List bytes = tx.serialize();
// String payload = bytes.map((byte) => byte.toRadixString(16).padLeft(2, '0')).join('');
String payload = bytesToHex(bytes);
final qrCodeData = {
      "v": 3,
      "type": 3,
      "network_id": 152,
      "chain_id": "57F7DA205008026C776CB6AED843393F04CD458E0AA2D9F1D5F31A402072B2D6",
      "data": { 
        "payload": payload
      }
    };
```
※モザイク数量を計算する際にはモザイクの情報を取得して過分性を考慮する必要がある。

**処理の流れ**

TransferTransactionを作成する際にsignerPublicKeyを入れずに作成。
その後、`serialize`メソッドで`Uint8List`を受け取る。
`byte.toRadixString(16)`で`Uint8List`を16進数の文字列に変換。（もっと他に良いやり方があるかも）
symbol-qr-libraryの[Generate QRCode for a Transaction Request](https://github.com/symbol/qr-library?tab=readme-ov-file#generate-qrcode-for-a-transaction-request)のTransactionQRで生成される形式に成形。


あとは好みのQRコード生成ライブラリを使ってqrCodeDataをよしなに描画する。
よく使う Mex のコマンド

## Mex
Mex は、WinDbg の機能を拡張するツールで、Windows のクラッシュダンプ解析やデバッグを効率化できます。Mex は、デバッグ作業をより簡単にし、分析の精度と速度を向上させるための重要なツールになります。

Mex の導入方法は、こちらの投稿を確認してみてください。

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

## よく使うコマンド（解析系）
カーネルモードのメモリダンプ解析でよく使用するコマンドです。そのまま使用するコマンドとオプションやアドレスを指定するコマンドがあります。オプションやアドレスを指定するコマンドは、使用例を記載しておきます。なお、アドレスは適当なので、実際に解析する際は、アドレスを変更してください。

### 1. **`!mex.dumpinfo`**  
メモリダンプに関する詳細情報を表示します。どのようなメモリダンプなのか確認するのに役立ちます。

### 2. **`!mex.crash`**  
クラッシュ解析のためにメモリダンプから特定のクラッシュに関する情報を表示するコマンドです。ブルースクリーンが発生した際に出力されたダンプファイルには、まずこれを実行します。

### 3. **`!mex.running`**  
CPU で実行中のスレッドに関する情報を表示できます。

### 4. **`!mex.ready`**  
実行準備が整っているスレッドのリストを取得するためのコマンドです。ready 状態のスレッドが多数ある場合には、CPU の処理が追いついていないか、なんらかの処理が CPU を占有し続けている可能性が考えられます。

### 5. **`!mex.tasklist`**  
システム内のすべてのプロセスとその関連情報を一覧表示します。システム全体の状態把握に便利です。かなりオプションの種類があるので、`!mex.tasklist -?` で状況に応じて使えそうなオプションを探してみてください。

### 6. **`!mex.p`**  
プロセス情報を取得するコマンドで、プロセス ID やメモリ使用状況などを表示します。確認したいプロセスのアドレスを指定して実行します。
```powershell:使用例
!mex.p ffffd45689abcd80
```

### 7. **`!mex.t`**  
特定のスレッドに関する詳細情報を表示できます。確認したいスレッドのアドレスを指定して実行します。
```powershell:使用例
!mex.t ffffd45689abcd80
```

### 8. **`!mex.listthreads`**
指定したプロセスが実行しているすべてのスレッドのリストを取得します。各スレッドの状態などを確認できます。確認したいプロセスのアドレスを指定して実行します。
```powershell:使用例
!mex.listthreads ffffd45689abcd80
```

### 9. **`!mex.UniqueStacks`**
ユニークなスタックトレースをまとめて表示します。似たようなスレッドやスタックトレースをグループ化して、メモリダンプ解析の効率を上げるために使用されます。
```powershell:使用例
#ユーザーモード、カーネルモードすべてのスタックが一致するスレッドをまとめて表示
!mex.UniqueStacks -a 
#カーネルモードのみ一致するスレッドをまとめて表示
!mex.UniqueStacks -k 
#CPU で実行されている一致するスレッドをまとめて表示
!mex.UniqueStacks -cpu
```

### 10. **`!mex.eresource`**
ERESOURCE（排他制御のためのオブジェクト）の状態を表示します。デッドロックや競合状態の解析に役立つ情報を表示できます。

### 11. **`!mex.WrLpcReply`**  
LPC（ローカルプロシージャコール）の応答待ちになっているスレッドを表示するコマンドです。長時間 LPC 待ちしているスレッドがないか確認するときに使用します。

### 12. **`!mex.mreg`**  
レジストリの情報を表示するコマンドで、レジストリの値を確認したいときに使用します。

### 13. **`!mex.mods`**  
ロードされているモジュール（DLLや実行ファイル）に関する情報をリストします。どのモジュールがメモリにロードされているかを確認する際に使用されます。

### 14. **`!mex.tag`**  
プールタグに関連する情報を取得するコマンドで、メモリプールの使用状況を特定する際に役立ちます。
```powershell:使用例
!mex.tag -a ntfs
```

## よく使うコマンド（ユーティリティ系）
ユーティリティ系のコマンドは解析系のコマンドを組み合わせて使用します。使用方法は、ほぼ Linux のコマンドと一緒です。

### 1. **`!mex.grep`**
出力内容をフィルタリングするために使用します。正規表現に基づいて、特定のパターンを含む行だけを表示させることができます。使い方は `!mex.grep -?` で確認してみてください。

### 2. **`!mex.cut`** 
出力の指定された範囲や部分を切り取るためのコマンドです。必要な部分だけを表示したい場合に使用します。使い方は `!mex.cut -?` で確認してみてください。

### 3. **`!mex.ForEachLine`**
それぞれの行に対して、指定したコマンドを実行するためのループ処理機能を提供します。大量のデータセットを効率的に処理する際に役立ちます。使い方は `!mex.ForEachLine -?` で確認してみてください。

### 活用法
ユーティリティ系のコマンドを使用することにより、解析を少し自動化できます。次の例では、`ffffd45689abcd80` のアドレスをもつプロセスのすべてのスレッドの詳細情報を表示できます。

```powershell:使用例
!mex.ForEachLine -x "!mex.t @#Line" !mex.grep ffff !mex.cut -f 3 !mex.listthreads ffffd45689abcd80 
```

## さいごに
Mex のコマンドは、紹介したもの以外にもたくさんあり、長いコマンドには、短縮形が用意されていたりします。すべて書くのは大変なので、`!mex.help -all` を実行して、ヘルプからいろいろ確認してみてください。
ポートフォリオ(仮)の完成と今後について

## 初めに
ポートフォリオの完成に至った経緯と今後について簡単に紹介します。

## ポートフォリオサイト
制作したサイトは以下になります。
まだ仮での制作のため、今後も必要に応じて更新していきたいと思います。

https://ivory880547.studio.site/

## 使用したサイトなど
こちらのStudioのテンプレートを編集して制作しました。

https://studio.design/ja/store/templates/YogO09dq23

初めての制作でしたが、所要時間は約6時間ほどで、
公式チュートリアルや解説動画を参考にしながら無事に完成させることができました。

ヘッダーの各箇所へのリンクタグを作成する作業はありましたが、
その際も調べながら問題なく実装することができました。

また、今回はHP制作にMarkdownやHTMLは一切使用していないため、
誰でも簡単に制作できるのではないかと思います。

## デザイン
デザインについては、見やすいようにシンプルで分かりやすくを心掛けて制作しました。


## 各項目について
* **About**
HP概要の説明

* **Portfolio**
現在制作中のため、完成後は制作物のリンクなどを追加予定です。

* **Career&Skills**
エンジニアとして一番大事なところ！
なのですが、現在他業種から未経験での転職活動中という状況もあって、書けることが少ないのが現実です。
ProgateやPaizaで講座を進めており、基本情報技術者試験の勉強もしていますが、
まだ実績として紹介できるほどのレベルには至っていません。頑張ります:sweat:
まずは制作物を完成させます。

* **Contact**
転職活動や勉強過程を発信しているX(旧Twitter)とQiitaのリンクを張らせていただいています。

## 今後・・・
転職活動中に自分が何ができるのかを明確に示すことができていないことや、
未経験のために面接で自分の能力を伝えることが難しいという点が、一番の課題になっていたと思います。
そこで、その問題を解決するために、現在は個人での開発に取り組んでいます。<br>
投稿やその他について指摘事項がありましたら、ぜひご指摘いただければと思います。
皆様のフィードバックをもとに、さらに改善していきたいと考えていますので、どうぞお気軽にコメントしてください。
## 参考
https://help.qiita.com/ja/articles/others-brand-guideline
cronが初歩的な設定ヌケで動作しなかったって話

cronを設定したはいいけれども、初歩的なミスで動かなかったのを動けるようにしたって話。
そのうえで、知ったこととミスの考察。

## やりたかったこと
WSL2で20分おきにシェルスクリプトを動かしたかった

### 環境

```bash
$ cat /proc/version
Linux version 5.15.153.1-microsoft-standard-WSL2 (root@941d701f84f1) (gcc (GCC) 11.2.0, GNU ld (GNU Binutils) 2.37) #1 SMP Fri Mar 29 23:14:13 UTC 2024
```
↑要約：WSL2のUbuntu

### cronの設定
```cron
$ clontab -l
3/20 * * * *    /usr/bin/sh script.sh
```
`script.sh`内では、複数のPythonを実行している。
awsやcloudflare r2にあれこれするという処理をしていて、KEYの類は環境変数に設定してある。

普通に実行する分には問題なく動き、cronに設定したのがまったく持って動かない。


## 動かなかった理由と解決方法

### 動かなかった理由
cron実行時は、ユーザーと違う環境変数であるというのを知っていたのにもかかわらず、設定していなかったため。

### 解決方法

https://qiita.com/showchan33/items/cedb8814b5ccce3b25b4


### 具体的に行った処理

```bash
$ sudo cp  /etc/environment  /etc/environment.2024-10-09
$ env | sudo tee -a /etc/environment
```
1行目で、バックアップとして既存の`/etc/environment`をコピー

2行目で、ローカルの環境変数を`/etc/environment`に追記


## 解決ついでにわかったこと

### cronの書き方

#### 複数のコマンドを処理させるとき、どちらの書き方でも動いた
例：`/home/user/dir/`に移動してから`command`を実行
```cron
* * * * *    cd /home/user/dir/ && command
* * * * *    cd /home/user/dir/ ;  command
```

#### 曜日指定は数字以外もOK
例：月曜日から金曜日までの間は`command`を実行

```cron
* * * * mon-fri    command
```

## 考察（という名目での感想）

この解決に至るまで、累積作業時間として小一時間（３日間、ちょっと試しては動かないってのを繰り返したけど）ぐらいcronをいじっていました。

こんな見落としするんだなあ、と思ったポイントは、知識で知っていても実際に手を動かしているとそれが対処法として結びつかないということでした。

流れとしては、
- cronが動かん
- `script.sh`がなんか渋ってる
- なんでだ？

という段階で、環境変数というのに気づかず、cronの設定ミスかと見直しをしてました。

その次の流れとして、
- `script.sh`が渋ってるのはなんぞや？
- とりあえず、cronの記述内に`script.sh`の処理をTEXTに書き出す追記をしよう
- pythonが環境変数の値がなくってコケてのか！

と、解決策に結びつきました。

cronでの実行時は、一般ユーザーと環境変数が異なるってのは知識で知っていたのですが、完全に脳内で別の箱に入っていてつながってませんでした。

技術書や技術記事で知っていることであっても、頭の片隅においておくじゃなくって実際に動かすというところで自分の手の中に落とさないとだめだなあ、なんて思いました。
新入社員が２人で生成AIアプリを作った話 〜開発から特許出願まで〜

こんにちは、ひさふるです！

私は現在、KDDIアジャイル開発センター(以降KAG)という会社の新入社員として働いています。

この度、同じくKAGの新入社員である沢井と共に、インターン+研修の一環として生成AIを活用したアプリケーションを開発し、その関連技術を特許出願しました！

そこで今回は、開発から特許出願までの流れをご紹介したいと思います！

## 自己紹介
今回のアプリは、KAGの24卒新入社員である私(久古)と沢井の2名で作成いたしました。

私と沢井はもともと同じ大学の友人であり、大学時代から一緒にアプリ開発を続けて来ました。

KAGへの内定をキッカケに、KAGで生成AIを活用したアプリを作りたい！と志すようになりました。

<img width="500" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655545/c63d5570-0e55-b162-4087-c3216df2c8ff.jpeg">

左が沢井、右が久古

## アプリケーション開発のキッカケ

### 内々定者イベント
2023年6月、KAGから内々定を貰っていた私達は内々定者向けイベントに参加していました。

そこで、KAGが**自社プロダクトの作成にも力を入れようとしている**ことや**生成AI活用を目指している**ことを知った私達は、「自分たちで今、生成AIを活用するとしたらどのようなアプリを作るか？」を考えてみることにしました。

### 音声生成AIとの出会い

そこから、2023年6月から8月中旬まで、私達は生成AI関連の市場調査を実施し、当時の生成AIを取り巻く市場環境を次のように分析しました。

1. コンペティターが多い：ChatGPTなどを利用したアプリは多数ローンチされている一方で、独自性が低いものも他社に多く真似されやすい。
2. **音声生成AI**は(良くも悪くも)市場規模が小さい：特にSE(Sound Effect)生成AIを活用したアプリは少ない
3. SEの需要の増加：YoutubeやTicTokの普及により個人でSEを利用する人が増えた

よって、私達が考えたのは以下のような戦略です。

:::note info
生成AIによってSEを作成、それを投稿・共有できるプラットフォームを作れば使ってもらえるんじゃないだろうか？？
:::


## アイデアのブラッシュアップと提案
### SE生成AIの抱える問題点

しかし、思いついたSE生成プラットフォームには大きく2つの解決すべき問題点がありました。

1. 生成モデルの独自性が無いこと：自分たちで生成AIを一から作るのは大変(というかほぼ無理)なので他社モデルを使用したいが、それだと独自性が無い
1. テキストによる音声生成の難しさ：音をテキストで説明することは画像を説明するよりも難しいため、狙った音声が生成されにくく、出力される音声のバリエーションが無い

これらの問題を解決するために私達が目をつけたのが**ベクトルデータベース**でした！

ベクトルデータベースはデータをベクトルとして保存することで、音声や画像などベクトルで表現出来るデータの検索に特化したDBです。

このベクトルデータベースと生成AIを組み合わせることで、SEを生成するだけでなく直感的な検索が出来ることをアプリの強みにしよう、と考えました。

### KAGへの提案
アプリのアイデアがまとめ終わった私達は、一旦KAG側へこのアイデアを伝えてみることにしました。

当時学生である私達が考えたプロダクトが、会社としてどう判断されるのかに興味があったためです。(今思えばかなり無謀な挑戦だったと思います笑)

返答はすぐに返ってきて、プロダクトの内容を社長・副社長・部長含む5名の前でプレゼンして欲しいとのことでした。(今考えても、非常に貴重な機会を与えていただいたと思っています)

プレゼンの結果は良好、すぐにインターンとして試しに開発をしてみて欲しいと言われ、二つ返事で了承したのを今でも覚えています。

このフットワークの軽さこそが、KAGの魅力であると思っています。

:::note info
提案の結果は良好！インターンシップ開始へ！！
:::

## 開発からKAGレビューでの発表

### プロダクト開発
実際にインターンとして開発を行ったのは2023年の10月から2024年の3月まででした。

インターン中は技術サポートとしてKAGのテックリードである岸田さん(@makishy)についていただき、開発を進めました。

実際に、出来上がったプロダクトがこちら↓


<img width="600" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655545/0995b1e0-9b7f-97d2-be5e-a2578fbbdc7d.png">

※プロダクト詳細については別記事で詳しくご紹介しています！ぜひご覧ください！

https://qiita.com/kyuko/items/f8583610a7248f71b875

KAGが得意とするアジャイル開発の流動的な要素と青色のKDDIカラーから連想される**水**をテーマに、"水滴がポチャリと落ちる音"を意味する"Plop"をアプリケーションの名前としました。

アプリ内ではSE生成の他、SE検索も行うことができ、他のユーザーが生成したSEを相互に活用出来るようになっています。

### KAG社内向けの発表
実際にサービスが完成後、岸田さんより社内のレビュー会(KAGレビュー)で作ったサービスを発表してみたら？とのお誘いを受け、挑戦してみました。

インターン生ながら全社員の参加するイベントでの発表機会をいただき、緊張しながらも発表を終え、たくさんのコメントをいただくことが出来ました！

:::note info
無事アプリケーション開発終了！
:::

## 入社から特許出願まで

入社後は研修が続き、こちらのアプリに時間を割けない日々が続きましたが、このまま終わらせるのは勿体無いとの声を受け、まずは特許出願を目指しました。

音声の生成と検索を組み合わせ、更にUIの工夫もあるという点を押し出し、現在は特許出願まで無事終えることが出来ました。

:::note info
特許出願の結果が出るのは来年！結果が楽しみです！
:::

## おわりに
今回は新入社員2人が生成AIを使ったWebアプリを作成し、特許を出願するまでの流れをご紹介しました。

私達二人としても、自分たちの思い描くアプリケーションを形に出来たことは本当に嬉しいですし、特許出願の機会までいただけたことは大変良い経験となりました。

今回作成したアプリケーションに関しては、今後も何らかの形でプロジェクトを進めていくつもりですので、続報をお待ち下さい。

KDDIアジャイル開発センターには、このような社員・内定者の自主的な活動を積極的に後押しする社風があります！

今回の記事でKAGに興味を持たれた方は、ぜひ公式サイト・採用情報等もご覧ください！

https://kddi-agile.com/recruit
deinitについて

## deinitについて
  deinitは、クラスのインスタンスがメモリから解放される直前に自動的に呼ばれる特別なメソッド。これをデストラクタとも呼ぶ。Swiftでは、ARC（Automatic Reference Counting）を使用しているため、通常、メモリ管理は自動で行われる。しかし、リソースを手動で解放する必要がある場合や、特定のクリーンアップ作業を行いたい場合に`deinit`を使う。
  ### 例: 本のタイトルを管理するクラス
  以下の例では、本のタイトルを管理するシンプルなクラス`Books`を定義している。`deinit`を使って、インスタンスが解放される際にログを出力する。
  ```swift
  class Books {
    var titles: [String]
    // コンストラクタで本のタイトルリストを初期化
    init(titles: [String]){
      self.titles = titles
    }
    // デストラクタでリソース解放時のログを表示
    deinit {
      print("deinit called")
    }
    // 登録されている本のタイトルをプリント
    func printTitles(){
      for title in titles {
        print(title)
      }
    }
  }
  // インスタンス作成と利用
  var books: Books? = Books(titles: ["1984", "Brave New World", "The Catcher in the Rye", "To Kill a Mockingbird"])
  books?.printTitles()
  // インスタンスにnilを代入してメモリから解放し、deinitをトリガー
  books = nil
  ```
実行結果:
  ```
  1984
  Brave New World
  The Catcher in the Rye
  To Kill a Mockingbird
  deinit called
  ```
  ## どのような場合に deinit が必要か
  <dl>
  <dt>リソースの解放</dt>
  <dd>ファイルハンドル、ネットワーク接続、またはデータベース接続など、システムリソースを直接管理している場合</dd>
  <dt>データのクリーンアップ</dt>
  <dd>インスタンスの寿命が終わる際にデータベースへの書き込みやファイルへのログ出力が必要な場合
  </dd>
  <dt>通知やオブザーバの解除</dt>
  <dd>イベントの購読や通知リスナーの登録解除が必要な場合</dd>
  </dl>
XcodeでAppleIDの追加・サインインができなくなった

# はじめに
[Xcode] -> [Settings] -> [Accounts]からAppleIDの追加・サインインができなくなった。
# 解決方法
Xcodeを完全に削除して、再インストールすることで解決できた。
https://qiita.com/___fff_/items/0815915fad807fcbd546
Linuxに公開鍵認証でログインする

# はじめに
公開鍵認証でログインしたいときにやることをまとめました。
# 1. 新規ユーザを作成する
Linux側で行います。

```
sudo useradd -s /bin/bash -m username
sudo passwd userpass
```
sudoを許可する場合は
```
sudo usermod -aG sudo username
```

# 2. 公開鍵を生成する
接続したいクライアントが行います。

ed25519方式で鍵を作成する場合はこちら
```
ssh-keygen -t ed25519
```

rsa方式で鍵を作成する場合はこちら
```
ssh-keygen -t rsa -b 4096
```

```
ssh-keygen -f [ファイルパス]
```

### sshログインについて
基本形 

:::note warn
注意
.sshフォルダに鍵がある場合はそれを使用してログインします。
無い場合はパスワード認証になります。
:::

```
ssh -p [ポート番号] [ユーザ名@IPアドレス]
```

公開鍵暗号方式を使う場合
```
ssh -p [ポート番号] -i [秘密鍵パス] [ユーザ名@IPアドレス]
```

# 3. SCPで公開鍵を送信する
接続したいクライアントが行います。

基本形(パスワード認証)
```
scp [送信したいファイルパス] [保存先パス(ユーザ名@IPアドレス:ディレクトリ)]
```
鍵認証の場合
-i オプションを使う
```
scp -i [鍵パス] ...
```
ポート番号を指定して送信する
-P オプションを使います
```
scp -P [ポート番号] ...
```

# 4. SSHフォルダに鍵を置く
Linux側で行います。
送った公開鍵をauthorized_keysにする

```
mv [鍵パス] .ssh/authorized_keys
```

パーミッション変更
```
chmod 700 .ssh
chmod 600 .ssh/authorized_keys
```

# 5. SSH configを設定する
Linux側で行います。
rootになって
```
su root
```
sshdのバックアップをしておく

```
cp /etc/ssh/sshd_config /etc/ssh/sshd_config.bk
```

バックアップしたらviとかでconfigを変更

許可するアルゴリズムを選択

rsaの場合
```
PubkeyAcceptedAlgorithms=+ssh-rsa
```
ed25519の場合
```
PubkeyAcceptedAlgorithms=+ssh-ed25519
```

パスワード認証を無効化
```diff
- #PasswordAuthentication yes
+  PasswordAuthentication no
```

viを保存して閉じる

### 所有者を変更する
うまくいかない人は鍵の所有者が正しく設定されていない場合があります。
たとえば、rootユーザになっているなど

.sshやauthorized_keysの所有権はユーザにないと読み込めずに失敗してしまうので権限を変更します。

```
chown [ユーザ名]:[ユーザ名] .ssh/authorized_keys
```

sshdのリスタート

```
systemctl reload sshd
```


### 参考記事

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

https://teratail.com/questions/4kkkueaom1gc2h

https://zenn.dev/mtmatma/articles/03e7fdcc9b8c5a

https://www.wakuwakubank.com/posts/490-linux-ssh/
Highcharts : dashStyle 一覧

```
dashStyle : 
    'Solid' ||
    'ShortDash' ||
    'ShortDot' ||
    'ShortDashDot' ||
    'ShortDashDotDot' ||
    'Dot' ||
    'Dash' ||
    'LongDash' ||
    'DashDot' ||
    'LongDashDot' ||
    'LongDashDotDot'
```
https://api.highcharts.com/highcharts/yAxis.plotLines.dashStyle

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/
StackViewの中身を比率で並べたい

## はじめに
StackViewの中に3つのViewがあり、それらを高さ1:1:2の比率で配置したいときに、StoryBoard上でのやり方を知らなかったので共有します。
![Screenshot 2024-06-13 at 10.33.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778802/4c9c805e-9b23-0f57-7163-c21368a1e0d9.png)
## 方法
1\. まずStackViewのAttributes InspectorのDistributionを”Fill”にする
![Screenshot 2024-06-13 at 10.42.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778802/6c0c7a7d-fb2d-fc86-61e1-b12a45c97cf0.png)
2\. 次に、ctrlキーを押しながら1 Viewと2 Viewを選択し、”Equal Heights”を選択する
![Screenshot 2024-06-13 at 10.49.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778802/b178750a-e220-e2bc-ba3c-0790939298aa.png)
同様に、1 Viewと3 Viewもctrlキーを押しながら選択し、”Equal Heights”を選択する
![Screenshot 2024-06-13 at 10.50.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778802/c9ce217e-e8a8-a5dc-5f74-0ce7a69a4adf.png)
3\. 追加されたConstraintsの中の1 View.height = 3 View.heightを選択し、Attributes InspectorのMultiplierを1:2にする
![Screenshot 2024-06-13 at 10.58.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778802/63b2c2f9-e2cb-d08c-09a2-71d91618bcd4.png)
これにより、1 View : 2 View : 3 View = 1 : 1 : 2の状態を作ることができます。
privateとfileprivateの違い

## private
privateで宣言したスコープ内でのみアクセス可能。
```swift
class MyClass {
    private var secretValue = 42
    func printSecret() {
        print(secretValue)
    }
}
let instance = MyClass()
instance.printSecret() // 同じスコープ内なのでアクセス可能
print(instance.secretValue) // secretValue' is inaccessible due to 'private' protection level
```
## fileprivate
fileprivateで宣言したファイルからアクセス可能。
```swift
class MyClass {
    fileprivate var sharedValue = 42
}
let instance = MyClass()
print(instance.sharedValue) // 同じファイルなのでアクセス可能
```
Vue CLIでVue.jsの開発環境を構築する手順

# はじめに
この記事はVue.jsの開発環境を構築する手順を学習した際の備忘録です

## Node.jsとnpmのインストール
Vue.jsを使うためには、Node.jsとnpm（Node Package Manager）をPCにインストールする必要があるので、まずは以下の手順でインストールします

### Node.jsのインストール
Node.jsの公式サイトにアクセスして自分のOSに適したインストーラーをダウンロードおよび実行します。

https://nodejs.jp/

### npmのバージョンを確認する
Node.jsをインストールすると、自動的にnpm（Node Package Manager）も一緒にインストールされているため、次のコマンドでバージョンを確認することでインストールの状況を確認できます
```
npm -v
```

## Vue CLIのインストール
コマンドライン（ターミナル）を使ってプロジェクトの作成や管理を簡単に行うためのツールです。正式名称は`Vue Command Line Interface`です

`Node.js`と`npm`がインストールされていれば以下のコマンドでインストールを実行できます

```bash
npm install -g @vue/cli
```
### Vue CLIのバージョンを確認する
以下のコマンドをコマンドライン（ターミナル）にて実行すると、Vue CLIがインストールされている場合は、バージョン番号が表示されます（例: @vue/cli 5.0.8）インストールされていない場合やコマンドが認識されない場合は、Vue CLIがまだインストールされていないということになります
```bash
vue --version
```

## 新しいプロジェクトの作成

プロジェクトを作成したいディレクトリに移動します。例えば、デスクトップに作りたい場合は次のコマンドを実行します
```bash
cd ~/Desktop
```
新しいVue.jsプロジェクトを作成するために、以下のコマンドを実行します
```bash
vue create my-vue-app
```

### プロジェクト作成時の選択肢
Vue CLIでは、プロジェクト作成時に以下の3つの選択肢が表示されます。詳細は以下で説明しますが、通常は最新のVue 3を選択します（エンターキーで選択できます）

![スクリーンショット 2024-10-09 10.47.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/7055df95-8d8a-311e-ad74-e2e7a6ab8e25.png)

#### Default ([Vue 3] babel, eslint)
- 最新のVue3を使った標準的な設定です
- プロジェクトにはBabel（モダンなJavaScriptコードを古いブラウザでも動くように変換するツール）とESLint（コードの品質をチェックし、エラーを防ぐツール）が組み込まれます
- 初心者から上級者まで、Vue3を使いたい場合はこの設定で始めるのが最適です

#### Default ([Vue 2] babel, eslint)
- この設定はVue 2を使うプロジェクトを作成します
- Vue 2を使う理由としては、既存のプロジェクトやライブラリとの互換性が必要な時などに利用します。例えば、まだVue 3に対応していないライブラリを使いたい場合や、古いプロジェクトのメンテナンスが目的の場合などです。
- BabelとESLintは同様に含まれますが、Vue2のプロジェクトを新しく始める場合に選びます

#### Manually select features
- 自分でプロジェクトの詳細設定をカスタマイズできます
- 以下のような設定を自分で選択できます
    - TypeScriptの使用
    - Vue Router（ページ遷移用の機能）の追加
    - Vuex（状態管理のライブラリ）の追加
    - テストツールの設定（JestやCypressなど）
    - PWA（プログレッシブウェブアプリ）の対応
    - Linter/Formatterの設定（ESLint + Prettier など）
- 自分の必要に合わせた柔軟なプロジェクトを作りたい場合に便利ですが、設定項目が多く、初心者には少し難しい場合があります

## 開発サーバーの起動

作成したプロジェクトにカレントディレクトリを合わせ、開発サーバーを起動します

```
cd my-vue-app

npm run serve
```
コマンドを実行すると開発サーバーが立ち上がり、ターミナルにURLが表示されます
（通常は http://localhost:8080 です）

### 【補足】ポート番号を変更する方法
開発サーバーを起動するコマンドに、オプションを加えることでポート番号を変更することができます。また、ポート8080（デフォルト）や指定したポート番号がすでに他のアプリケーションによって使用中の場合はエラーが発生するので、その場合は使用していないポート番号を指定することでエラーを回避できます
```
npm run serve -- --port 3000
```
### 【補足】ホストを変更する方法
開発サーバーを起動する際に、ホスト名を指定することもできます。以下のコマンドを実行します。
```
npm run serve -- --host 0.0.0.0 --port 3000
```
## まとめ
ブラウザでVue.jsのロゴが確認できれば開発環境の構築は終了です
Linux firewallメモ

`firewall-cmd`は、Linuxのファイアウォール管理ツールである**firewalld**のコマンドラインインターフェース（CLI）です。`firewalld`を使用することで、Linuxシステム上でファイアウォールの設定を簡単に管理し、ネットワークトラフィックを制御することができます。

`firewall-cmd`は、動的なファイアウォール設定をサポートしており、ファイアウォールのルールをシステムを再起動することなくリアルタイムに適用することができます。

### 基本的な使い方

以下は、`firewall-cmd`のよく使用されるコマンドとその説明です。

#### 1. **ファイアウォールのステータス確認**
```bash
firewall-cmd --state
```
ファイアウォールの状態を表示します。例えば、`running`と表示されればファイアウォールは有効になっています。

#### 2. **有効なゾーンの確認**
```bash
firewall-cmd --get-active-zones
```
現在アクティブなネットワークゾーンを表示します。ゾーンは特定のインターフェースやアドレスに対するルールをグループ化したものです。

#### 3. **特定のゾーンの情報表示**
```bash
firewall-cmd --zone=public --list-all
```
`public` ゾーンのすべての設定（許可されているサービス、ポートなど）を表示します。

#### 4. **サービスの追加**
特定のサービスをファイアウォールに追加して許可するには、次のコマンドを使用します。

```bash
firewall-cmd --zone=public --add-service=http
```
上記の例では、`http`サービスを `public` ゾーンに追加し、HTTPトラフィックを許可します。

#### 5. **特定のポートを開く**
ポート番号で通信を許可する場合：

```bash
firewall-cmd --zone=public --add-port=8080/tcp
```
例として、8080番ポートをTCPプロトコルで許可しています。

#### 6. **変更の永続化**
リアルタイムで適用された設定は再起動後に消えることがありますが、永続化するためには次のコマンドを実行します。

```bash
firewall-cmd --runtime-to-permanent
```

#### 7. **ファイアウォールの再読み込み**
設定を適用するためにファイアウォールを再読み込みするには、次のコマンドを使用します。

```bash
firewall-cmd --reload
```

### ゾーンについて
`firewalld`では「ゾーン」という概念があり、ゾーンごとに異なるファイアウォールのルールを設定することができます。例えば、`public` ゾーンは外部ネットワーク向けのゾーンであり、`home` ゾーンは信頼できるホームネットワーク向けに使います。

### 例: HTTPとHTTPSトラフィックの許可
```bash
firewall-cmd --zone=public --add-service=http --add-service=https --permanent
firewall-cmd --reload
```
上記の例では、HTTPおよびHTTPSトラフィックを許可し、設定を永続化した後、再読み込みして適用しています。

`firewall-cmd`を使うことで、ファイアウォールの設定を非常に柔軟かつ動的に管理することができます。
Juliaでグラフを表示させたい

## はじめに
Juliaは他のプログラミング言語のライブラリを流用することが可能である. 今回は, Pythonのグラフ描画パッケージである`Matplotlib`を利用することで, グラフ作成に挑戦することにした.

juliaでグラフを作ってみようと, 以下のコードを実行した.
```julia:graph.jl
using PyPlot

Y1 = [1, 7, 11,13,15,16]
Y2 = [15,3,13,2,7,1]

fig, ax = subplots()

ax.plot(Y1)
ax.plot(Y2)

ax.set_xlabel("index")
ax_set_ylabel("Y")

ax.set_title("my graph")
```
すると, 以下のようなエラーが出現した.
```
ERROR: ArgumentError: Package PyPlot not found in current path.
- Run `import Pkg; Pkg.add("PyPlot")` to install the PyPlot package.
```
なるほど, 確かにPyPlotのパッケージはPythonでインストールしているものの, juliaでは入れたことが無い.

今回は, juliaでパッケージを入れたときのことについて記録しようと思う.

## REPLでパッケージをインストール
Qiitaで調べてみたところ, [JuliaでMatplotlibによるグラフ描画の方法](https://qiita.com/ttabata/items/96a0e172addfac690cca,"Julia早引きノート［23］JuliaでのMatplotlibによるグラフ描画")について記載された記事を見つけたので, それをもとに再度挑戦することにした.

JuliaでPyPlotパッケージをインストールするためには, パッケージ管理モードでインストールを行う必要がある.
パッケージ管理モードに遷移するためには, REPL上で `]`を押してパッケージモードにすることが可能である.
その後, 以下のコードを入力する.
```
(@v1.10) pkg> add PyPlot
```
すると, インストールが始まるので, 完了するまで待つ.

完了して,　再度冒頭のコードを実行すると, 無事に実行はできているようなのだが, グラフが表示されないことが分かった.
```
# 出力結果
PyObject Text(0.5, 1.0, 'my graph')
```
[こちらの記事](https://qiita.com/Suu0313/items/9d70a0cab6bc15272ff5, "VSCode で Julia の plot をするときの注意")によると, どうやらVSCode上でグラフを表示させたい場合は`display`関数を使う必要があることが分かった.
このため, 冒頭のコードを以下のように書きかえた.
```julia:graph.jl
using PyPlot

Y1 = [1, 7, 11,13,15,16]
Y2 = [15,3,13,2,7,1]

fig, ax = subplots()

ax.plot(Y1)
ax.plot(Y2)

ax.set_xlabel("index")
ax.set_ylabel("Y")

ax.set_title("my graph")
display(fig) # display関数を追加
```
再度コードを実行すると, 無事にグラフが表示された.
めでたしめでたし.
![sample.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702347/cf35e1ba-4bb4-3883-39dc-99fd3bcba7f5.jpeg)
PHP-クラス-コンストラクタ

# はじめに
SLスタジオでPHP・WEB開発を独学中のアラフィフ主婦の忘備録です。

https://sls.ideal-growth.jp/12/lesson/311/learning

## クラス-コンストラクタ
PHPでは、`__construct`(コンストラクタ) というメソッドを実装することで、インスタンス生成時に処理を実行することができます。
自由に名前が付けられないので、決まった呪文みたいなものだと覚えておきましょう。

### 注意点
* `__construct` 以外の命名はできない(アンダーバーは２つ)
* 呼び出されるタイミングはインスタンス生成時(クラスの外で`new`をした時)
* `return`文の使用はできない

### サンプルソース
変数名など一部変更しています。

```PHP
class Person
{
    public $name;
    public $age;

    // コンストラクタの定義
    public function __construct($name, $age)
    {
        echo "インスタンスが生成されました。\n";
        //渡された引数をプロパティへ代入
        $this->name = $name;
        $this->age = $age;
    }

    public function showName()
    {
        echo "名前: " . $this->name;
    }
}

$person = new Person("きらり", 28);
$person->showName();
```

### 出力結果
```
インスタンスが生成されました。
名前: きらり
```

## 疑問点
インスタンス生成時の`Person("きらり", 28)`２つの引数はクラスの中の`__construct($name, $age)`に引き渡されているのだから
```
//　▼これって宣言する必要ないのでは？
public $name;
public $age;
```
実際なくても**出力結果は同じ**

### じゃあなぜわざわざ宣言しているの？
以下のような利点があるからです。
1. **コードの可読性とメンテナンス性**:<br>プロパティを宣言しておくと、クラスがどのようなデータを持っているのかが明確になり、後でコードを読む際にわかりやすくなります。
1. **静的解析ツールやIDEのサポート**: <br>IDE（統合開発環境）や静的解析ツールは、明示的に宣言されたプロパティを元にコード補完やエラーチェックを行うことができます。プロパティを宣言しないと、コード補完が機能しなかったり、ミスを検知しづらくなることがあります。
1. **厳密なプロパティの管理**: <br>プロパティを明示的に宣言しておくことで、クラスに存在しないプロパティに誤ってアクセスした場合にエラーが発生するなど、バグを防ぎやすくなります。動的にプロパティを追加できると、誤ったプロパティ名で値を設定した場合に気づきにくくなる可能性があります。

## 他の書き方
`__construct` の中にまとめて書けば、インスタンス生成時に名前がすぐに表示されるため、動作が一箇所にまとまっており、コードがコンパクトです。これは、非常にシンプルな処理をする場合や、インスタンス生成と同時に何かを必ず出力したい場面では有利です。

```PHP
class Person
{
    public $name;
    public $age;

    public function __construct($name, $age)
    {
        echo "インスタンスが生成されました。\n";

        $this->name = $name;
        $this->age = $age;
        // showName() の中身をここに書いてしまっても出力結果は同じになる
        echo "名前: " . $this->name;
    }
}

$person = new Person("きらり", 28);
```

### 出力結果
```
インスタンスが生成されました。
名前: きらり
```

### メソッド(関数)を分けて書くメリットは？
以下のような利点があるからです。
1. **関心の分離**:<br>上のコードでは、コンストラクタ `__construct()` の役割はインスタンスの生成とプロパティの初期化に限定されています。名前を表示する処理は `howName()` メソッドで行われています。これにより、インスタンスの生成と表示ロジックが明確に分離されています。<br>分離することで、インスタンス生成時の動作と表示の動作が別々に管理でき、コードがシンプルでわかりやすくなります。
1. **再利用性**:<br>上のコードでは、`showName()` メソッドを呼び出すことでいつでも名前を表示できます。一方、下のコードでは、名前はインスタンス生成時にしか表示されません。つまり、任意のタイミングで名前を表示できるという再利用性が上のコードの利点です。<br>例えば、将来的に「名前を表示するタイミングが変更される」や「別の箇所で名前を表示したい」というケースが発生した場合、上のコードでは `showName()` を呼ぶだけで済むので、柔軟性が高いです。
1. **コードの保守性**:<br>上のコードは、個別の責務に応じてメソッドを分割しているため、変更や拡張がしやすくなります。例えば、将来的に名前を表示するフォーマットを変更したい場合、`showName()` メソッドだけを修正すれば良いので、コードの保守が簡単です。


## まとめ
* プロパティを明示的に宣言することが推奨される(PHP 8.2以降では警告が出る)。
* シンプルな処理の場合には `__construct` の中にまとめることでコンパクトになる。
* 再利用性やコードの保守性が必要になりそうならメソッド(関数)を分離させる方が分かりやすくなる。
SwiftUIの.tabItemがiOS 18.1で非推奨に -> 新しいTabに置き換えましょう

最新のXcodeを使用していると、`.tabItem` ビューモディファイアを使おうとした際に、非推奨の警告が表示されることがあります。

![Screenshot 2024-10-09 at 10.52.53 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/1c975b2a-3887-4505-4e5c-ca10637bdf1e.png)

:::note warn
'tabItem'は将来のiOSバージョンで非推奨になります。代わりに `Tab(title:image:value:content:)` を使用してください
:::

Appleの開発者向けドキュメントでも示されているように：

![Screenshot 2024-10-09 at 10.53.19 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/bcad5ea3-7f40-8332-6932-f158a95c51d1.png)

新しいTabビューを使用することで、簡単に修正できます：

```swift
TabView {
    Tab("Calendar", systemImage: "calendar") {
        ContentView()
    }
}
```

さらに、バッジ（数字やテキスト）を簡単に追加でき、valueパラメータを使用して現在アクティブなタブを制御することも可能です：

```swift
enum TabSelecion: Hashable {
    case calendar
    case list
}

@State private var currentTab: TabSelecion = .calendar

TabView(selection: $currentTab) {
    
    Tab("Calendar", systemImage: "calendar", value: .calendar) {
        ContentView()
    }
    .badge(2)
    
    Tab("All", systemImage: "list.bullet", value: .list) {
        ListView()
    }
    .badge("!")
    
}
```

# 読んでいただきありがとうございます！

:relaxed: [Twitter @MszPro](https://twitter.com/MszPro)

:relaxed: 個人ウェブサイト https://MszPro.com

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/33652157-7da9-ee68-3e4d-4b416edfec58.png">

私の記事は、アプリクリップで読むことができます：https://appclip.apple.com/id?p=com.ShunzheMa.MszMagic.Clip
【備忘録】Mac ハードウェア情報を調べるコマンド

Mac で Device-ID、Model-ID、Board-ID、ハードウェア概要 を 調べるコマンドたち<br><br>

- **Device-ID**（Intel Macのみ）

    ```shell
    /usr/libexec/remotectl get-property localbridge HWModel
    ```

    ```terminal:使用例
    user@MacBookPro ~ $ /usr/libexec/remotectl get-property localbridge HWModel
    J132AP
    ```

<br>

- **Model-ID**（Appleシリコン可）

    ```shell
    sysctl hw.model
    ```

    ```terminal:使用例
    user@MacBookPro ~ $ sysctl hw.model
    hw.model: MacBookPro15,2
    ```

<br>

- **Board-ID**（Intel Macのみ）

    ```shell
    ioreg -l | grep -i board-id
    ```

    ```terminal:使用例
    user@MacBookPro ~ $ ioreg -l | grep -i board-id
        |   "board-id" = <"Mac-827FB448E656EC26">
    ```

<br>

- **ハードウェア概要**（Appleシリコン可）

    ```shell
    system_profiler SPHardwareDataType
    ```
    
    ```terminal:使用例 (Intel Mac)
    user@MacBookPro ~ $ system_profiler SPHardwareDataType
    Hardware:
    
        Hardware Overview:
    
          Model Name: MacBook Pro
          Model Identifier: MacBookPro15,2
          Processor Name: Quad-Core Intel Core i5
          Processor Speed: 2.4 GHz
          Number of Processors: 1
          Total Number of Cores: 4
          L2 Cache (per Core): 256 KB
          L3 Cache: 6 MB
          Hyper-Threading Technology: Enabled
          Memory: 8 GB
          System Firmware Version: 2069.0.0.0.0 (iBridge: 22.16.10353.0.0,0)
          OS Loader Version: 582~1023
          Serial Number (system): C@2@Q@@@L@D@
          Hardware UUID: 8@1@6@B@-3@F@-5@5@-B@3@-A@A@3@C@C@F@
          Provisioning UDID: 8@1@6@B@-3@F@-5@5@-B@3@-A@A@3@C@C@F@
          Activation Lock Status: Enabled
    ```
    
    ```terminal:使用例 (Apple silicon)
    user@Macmini ~ $ system_profiler SPHardwareDataType
    Hardware:
    
        Hardware Overview:
    
          Model Name: Mac mini
          Model Identifier: Macmini9,1
          Model Number: G12P5J/A
          Chip: Apple M1
          Total Number of Cores: 8 (4 performance and 4 efficiency)
          Memory: 16 GB
          System Firmware Version: 10151.140.19
          OS Loader Version: 10151.140.19
          Serial Number (system): C@7@2@@@Q@P@
          Hardware UUID: B@A@5@5@-4@9@-5@6@-9@1@-4@E@0@B@E@A@
          Provisioning UDID: 0@0@8@0@-0@0@5@6@3@3@0@1@
          Activation Lock Status: Enabled
    ```

<br>

- 参考

https://mrmacintosh.com/list-of-mac-boardid-deviceid-model-identifiers-machine-models/

https://support.apple.com/ja-jp/102767

<br><br><br>**以上**
paizaラーニング問題集「【マップの扱い 4】マップのナンバリング」を解いてみた

https://paiza.jp/works/mondai/b_rank_new_level_up_problems/b_rank_new_level_up_problems__grid_numbering

▼考え方

ポイントになる考え方1.～3.を以下に示します。

1.マップのナンバリングは関数numberingで行います。引数はDです。

2.ナンバリングの向きDに応じて、各種変数を定めます。

3.ナンバリングがされている(if)ならば次のループへ、ナンバリングされていない(else)ならばナンバリングします。

▼コード
```py
# 考え方1.
def numbering(D):

    # a:次にナンバリングするマスの座標に移動するために、増加させる変数
    # number:マップにナンバリングする数
    a = 0
    number = 1

    # 考え方2.
    if D==1:
        # s1,s2:WあるいはH
        # th:添え字(k1,k2)がマップの範囲内に存在する条件
        # y:ナンバリングするマスのy座標
        # x:ナンバリングするマスのx座標
        s1 = W
        s2 = H
        th = "k2-a>=0 and k1+a<W"
        y = "k2-a"
        x = "k1+a"

    if D==2:
        s1 = W
        s2 = H
        th = "k1+a<W"
        y = "k2"
        x = "k1+a"

    if D==3:
        s1 = W
        s2 = H
        th = "k2+a<H"
        y = "k2+a"
        x = "k1"

    if D==4:
        s1 = H
        s2 = W
        th = "k1+a<H and k2-a>=0"
        y = "k1+a"
        x = "k2-a"

    for k1 in range(s1):
        for k2 in range(s2):
            while eval(th):
                # 考え方3.
                if N[eval(y)][eval(x)]!=0:
                    break
                else:
                    N[eval(y)][eval(x)] = number
                    number += 1
                    a += 1
            a = 0
    
    for j in range(H):
        print(*N[j],sep=' ')

########## 処理0(準備) インプット,リスト定義 ###########

H,W,D = map(int,input().split())

# N:ナンバリング用リスト
N = [[0 for i in range(W)] for j in range(H)]

########## 処理1 マップのナンバリング、マップの出力 ###########

numbering(D)
```
基本的なDockerコマンドまとめ（チートシート）

# はじめに
個人開発でDocker環境を1から構築する機会があり、その時に使用したDockerコマンドをまとめます:whale:
docker-composeファイルを使っている場合は、基本的に[docker-composeコマンド](#docker-composeコマンド)を使うといいと思います！

# Dockerコマンド一覧
以下、Dockerコマンド一覧です。

## イメージの操作
- イメージの一覧表示:
    ```shell-session
    docker images
    ```
- イメージの削除:
    ```shell-session
    docker rmi <イメージID>
    ```
- イメージのビルド:
    ```shell-session
    docker build -t <イメージ名>:<タグ> <Dockerfileのパス>
    ```

## コンテナの操作
- コンテナの一覧表示:
    ```shell-session
    docker ps
    ```
- 停止中のコンテナも表示:
    ```shell-session
    docker ps -a
    ```
- コンテナの起動:
    ```shell-session
    docker start <コンテナID>
    ```
- コンテナの停止:
    ```shell-session
    docker stop <コンテナID>
    ```
- コンテナの削除:
    ```shell-session
    docker rm <コンテナID>
    ```
## コンテナの作成と実行
- コンテナの作成と実行:
    ```shell-session
    docker run -d --name <コンテナ名> <イメージ名>
    ```
- インタラクティブモードでシェルに入る:
    ```shell-session
    docker run -it --name <コンテナ名> <イメージ名> /bin/bash
    ```
## ボリュームの操作
- ボリュームの一覧表示:
    ```shell-session
    docker volume ls
    ```
- ボリュームの作成:
    ```shell-session
    docker volume create <ボリューム名>
    ```
- ボリュームの削除:
    ```shell-session
    docker volume rm <ボリューム名>
    ```
## ネットワークの操作
- ネットワークの一覧表示:
    ```shell-session
    docker network ls
    ```
- ネットワークの作成:
    ```shell-session
    docker network create <ネットワーク名>
    ```
- ネットワークの削除:
    ```shell-session
    docker network rm <ネットワーク名>

## docker-composeコマンド
- docker-composeに関連するコンテナの一覧表示:
    ```shell-session
    docker-compose ps
    ```
- 設定の検証:
    ```shell-session
    docker-compose config
    ```
- サービスの起動:
    ```shell-session
    docker-compose up
    ```
- サービスの起動（強制ビルド）:
    ```shell-session
    docker-compose up --build
    ```
- サービスの起動をバックグラウンドで実行:
    ```shell-session
    docker-compose up -d
    ```
- サービスの停止:
    ```shell-session
    docker-compose down
    ```
- サービスの停止とボリュームの削除:
    ```shell-session
    docker-compose down -v
    ```
- サービスの再ビルド:
    ```shell-session
    docker-compose build
    ```
- キャッシュを無視してビルド:
    ```shell-session
    docker-compose build --no-cache
    ```
- コンテナの再起動
    ```shell-session
    docker-compose restart
    ```
- コンテナ内でコマンドを実行:
    ```shell-session
    docker-compose exec <サービス名> <コマンド>
    ```
    - 例: コンテナ内でシェルを実行
        ```shell-session
        docker-compose exec sample_service /bin/bash
        ```

## ログの確認
- ログの表示:
    ```shell-session
    docker-compose logs
    ```
- 特定のサービスのログ表示:
    ```shell-session
    docker-compose logs <サービス名>
    ``` 

# まとめ
日常的にはdocker-composeコマンドを主に使って、細かい調整が必要な時にdockerコマンドを使うイメージかなと思います。
チートシート的な用途で使っていただけますと！
Linuxのプリンタ管理について

## はじめに
LPIC1 102 取得に向けて学習中であり、プリンタ管理について学習

## 目次
* CUPSとは
* 設定ファイル
* 印刷ジョブの表示
* 印刷ジョブの生成
* 印刷ジョブの削除

## CUPSとは
`CUPS`（Common UNIX Printing System）は、Linux標準の印刷システムのこと。
以前は、`LPD`（Line Printer Daemon）。

## 設定ファイル
`CUPS`のデーモン（cupsd）の設定ファイル
`/etc/cups/cupsd.conf`

プリンタの設定ファイル
`/etc/cups/printers.conf`

## 印刷ジョブの表示
`lpstat`コマンド 又は `lpq`コマンドを使用する

## 印刷ジョブの生成
`lp`コマンド 又は `lpr`コマンドを使用する

## 印刷ジョブの削除
`cancel`コマンド 又は `lprm`コマンドを使用する
テンプレートファイルが消されてしまうことを防ぐ(base64利用)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/ba73b4a2-de5d-0eae-4a4f-2c3a0b0d89e6.png)

:::note warn

この記事は事務業務等を自動化する方RPA Developer向けです
:::


## きっかけ
毎日処理が必要な自動化するための事務用テンプレートのエクセルファイルを
SharePointやOneDriveに置いていると一般社員の方が、
誤って移動させてしまったりすることがあります。

そういったことが続いてエラー対応に追われた際、解決策として対応した一つの方法が表題につながります。

## 詳細
PowerAutomateやPowerAutomateDesktop上ではファイルの内容の取得を取得する際には
base64という文字になります。

ファイルコンテンツの取得のアクションを実行して出力を見てみるとわかるのですが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/12556b6c-2eb2-09dd-b986-aedffc57a769.png)
$content以降がbase64です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/cc99f897-9fc6-d2bc-990b-3b042d6ae758.png)

※このbase64は下記のような公開されているツールでも取得できます。
ただし会社等で利用される場合はゼロトラスト:muscle:で、各自の判断を持って行ってください。

https://lazesoftware.com/ja/tool/base64/#:~:text=Base64%20%E3%82%A8


#### このbase64を利用し、ファイルをフローに埋め込み作成する方法を下記に説明していきます。

## PowerAutomateの場合
### base64を利用してファイルを作成する

先ほどのファイルコンテンツ等で取得したbase64を作成アクション入れます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/71518440-415a-a8fd-c1b1-07e1bae18dd2.png)

ファイルの作成アクションを追加して、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/d60faf1b-246b-0209-3170-4d0c9d7c95eb.png)

ファイルコンテンツの項目にbase64ToBinaryの中に先ほどの作成アクションを入れてあげます。

```ruby:qiita.rb
base64ToBinary(outputs('作成'))
```

これでテンプレートファイルをフローに直接埋め込むことができました。

## PowerAutomateDesktopの場合
### base64を利用してファイルを作成する
これはとても簡単でbase64をファイルに変換するというアクションを追加し、
Base64でエンコードされたテキストという項目にbase64を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/0eedb16b-b37a-e96b-dc17-47c81c179e3c.png)


また、PADでファイルをbase64を取得したい時は下記アクションで一度実行し取得してみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/1be0a8b9-35ae-402c-9bc0-eadd04e84cc2.png)


## 最後に


部署移動等で引き継ぎが漏れ、新しい担当者が、
テンプレートファイルフォルダーを丸ごとを移動してしまったなどRPAではよく起こる問題だと思います。
エラー対応するほうはとても大変ですよね。

しょっちゅうテンプレートの変更が必要でないなら、こういった対応も可能なのです。
PermissionSetAssignmentについて

## PermissionSetAssignment
### 項目：
AssigneeId：PermissionSetId で示されている権限セットまたは PermissionSetGroupId で示されている権限セットグループが割り当てられているユーザーの ID。

PermissionSetGroupId：AssigneeId に指定されたユーザーに割り当てられる権限セットグループの ID。
★権限セットグループのID

PermissionSetId：AssigneeId に指定されたユーザーに割り当てられる権限セットの ID。

### SOQL：
Select PermissionSetId, PermissionSetGroupId from PermissionSetAssignment where AssigneeId = '005xxxxxxxx'

### 注意点：
権限セットグループのIDは権限セットIDも持っている。先頭３桁は違う

以下の権限セットと権限グループを持っているとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894299/91204d68-54b2-7824-dccc-91247e6b15e2.png)

Select PermissionSetId, PermissionSetGroupId from PermissionSetAssignment where AssigneeId = '005IT00000XXXXX'
＝＞結果：
権限セットグループ「権限セットGroup」は以下の２つの項目に値が存在します。
1. PermissionSetId
2. PermissionSetGroupId

なので、権限セットグループはある意味、権限セットですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894299/abecda6a-dcc4-f9c5-c4d8-a5d24a779b30.png)
[解決]Windowsのデュアルディスプレイ環境でSlackの画面共有ができない

# 環境
OSはWindows11Pro。
解決したのでメモとして残しておく。

# 現象
ノートパソコン＋外部ディスプレイのデュアルディスプレイ環境でSlackを使用している時、以下の条件で画面共有ができない（相手の画面に画像が送られず真っ黒なままになる）。

1. 画面全体の共有はできないが、ウィンドウ単位の共有は可能
1. ノートパソコン側の画面は共有できる（外部ディスプレイだけできない）

# 試したこと（効果なし）
以下の事を試したが解決せず。
1. Windowの「システム > ディスプレイ > グラフィック」からSlackの「グラフィックの基本設定」に対して「ウィンドウゲームに最適化を使用しないで下さい」をオフ
1. Slack.exe --disable-gpu
1. Slackの環境設定から「ハードウェアアクセラレーションを無効にする」を選択
1. システム再起動
1. Slackのアンインストール＆再インストール

# 解決
最後に、ものは試しと以下を試してみたところ、解決した。
- Windowsの「システム > ディスプレイ」から、外部ディスプレイの方を「これをメインディスプレイにする」にチェック

上記の設定で、外部ディスプレイ側の画面全体共有も使えるようになった。
なぜそうなのか理由は不明。
IMPORTRANGE関数を使うときのつまづき

複数のファイルでIMPORTRANGE関数を使用していると、なぜか権限の追加で読み込み中のまま動かなくなってしまった。
![スクリーンショット (435).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3469454/37c207d7-4dbe-cb97-98f8-664bc5bb1d1e.png)


同じファイルのデータを複数のファイルで参照しているから重くなっているのかと思ったが、そうでもなさそうだった。
(権限が正常に追加されたファイルでさらにIMPORTRANGE関数の使用を増やしても読み込めた)

原因としてはexcel形式のファイルになっているためだった。
ファイル > Googleスプレッドシートとして保存
を選択してファイルを作成し、IMPORTRANGE関数を使用すると権限が追加され、参照できた。

うまいこと合わせてくれていると思い込んでた、、、
yukicoder No.2781 A%B問題 解説

[問題文](https://yukicoder.me/problems/no/2781)
# 解説
普通に$A$%$B$を出力するだけ...とは言えない。
一般に%は$A$が負であるかつ$A\bmod{B}\neq 0$のとき答えが正しく作動しない。
よって、次のような場合分けをする。
$A\bmod{B}=A$%$B(A\geq0$または$A\bmod{B}=0)$
$A\bmod{B}=A$%$B+B(A<0$&$B\geq 0)$
$A\bmod{B}=A$%$B-B(A<0$&$B< 0)$
この通りに場合分けして実装すれば解ける。

# C++での解答例
```C++
#include <bits/stdc++.h>
using namespace std;

int main() {
  int a, b;
  cin >> a >> b;
  if(a >= 0 || a % b == 0) cout << a % b << endl;
  else if(b >= 0) cout << a % b + b << endl;
  else cout << a % b - b << endl;
}
```
[メモ] GitHubのPull Requestで、Draft状態のものを除いたリスト

# やりたいこと
GitHubのPull requestsのページで一覧表示する際、Draft状態のものを除いたリストを出力できないかと調べてみたのでメモ。

# やり方
Pull requests のページで `Filters` のテキストボックスに各種条件を入力することで絞り込みが可能ですが、ここに `draft:false` を記入することで検索結果からDraft状態のPRを除くことができる。

例えば自分のレビュー待ちになっているPRの中でDraft状態のものを除くリストを作るには
```
is:pr is:open draft:false user-review-requested:@me 
```
とすればいい。
今日のおすすめ関数は、文字列の操作で役立つVB.NETのString.Joinです！

今日のおすすめ関数は、文字列の操作で役立つVB.NETのString.Joinです！

String.Join 関数
String.Joinは、配列内のすべての要素を指定された区切り文字で結合し、1つの文字列として返す関数です。配列の要素を連結したいときに非常に便利です。

構文
Dim result As String = String.Join(separator As String, values() As String)
separator: 各要素を区切る文字列（例えば、カンマやスペースなど）。
values(): 結合したい文字列の配列。

使用例
例えば、カンマで区切られたリストを作成する場合：

Dim fruits As String() = {"Apple", "Banana", "Cherry"}
Dim fruitList As String = String.Join(", ", fruits)
Console.WriteLine(fruitList)
このコードを実行すると、以下のような出力が得られます：

Apple, Banana, Cherry

利用シーン
CSV形式の文字列を作成する場合
単語リストを文章としてまとめる場合
配列内のデータを一行に表示したい場合
String.Joinは簡潔で理解しやすく、効率的な文字列連結を可能にするので、ぜひQiitaで紹介してみてください！
Adobe XD 便利プラグインまとめ

Adobe XDの作業効率を大幅に向上させる便利なプラグインをまとめました。インストールも使い方も簡単なので、ぜひ試してみてください！

## おすすめプラグイン一覧

### Artboard Plus
- 機能：アートボードの整列
- 特徴：アートボード名の前に01〜など数字を入力しておくと、その数字順に並べてくれます。

### Change Case
- 機能：テキストの大文字小文字変換
- 特徴：選択したテキストを全て大文字、小文字、文章の先頭文字を大文字にすることができます。

### convert scss variables
- 機能：SCSS形式で抽出
- 特徴：ファイル内で使用されているカラーコード・フォントサイズ・フォントファミリーを自動でSCSS形式で抽出できます。

### Image Optimizer
- 機能：画像ファイルサイズの最適化
- 特徴：品質を保ちつつファイルサイズを縮小します。

### Notes and Annotations
- 機能：メモ書き
- 特徴：デザインにメモや注釈を追加できます。

### outline_path（BRISK）
- 機能：パスのアウトライン化
- 特徴：XDデフォルトではできない、グループの上からでも「パスのアウトライン化」ができます。

#### ◯ダウンロード・解説ページ
https://b-risk.jp/blog/2019/12/xd_outline/#link08

#### インストール方法
1. ダウンロードページから、プラグインファイルをダウンロード
2. XDのメニューから、「プラグイン→開発版→開発フォルダーを表示」
3. 表示された developディレクトリ内に「xd_outline」をコピペ
4. XDのメニューから、「プラグイン→開発版→プラグインを再読み込み」


### Placeholder Image
- 機能：ダミー画像の挿入
- 特徴：選択アイテムを即座にダミー画像に変換します。

### Ratio Changer
- 機能：アスペクト比の変更
- 特徴：正方形、黄金比、16:9など、よく使う比率にワンクリックで変更します。

### Remove Decimal Number
- 機能：選択アイテムサイズの小数点以下を切り捨て
- 特徴：小数点があると、微妙に表示が切れたり、端が汚くなったりするSVGの整形に便利です。

### Rename It
- 機能：リネーム
- 特徴：選択した複数のレイヤーやグループを一括リネームできます。

1. 連番追加：名前の後ろに順番の数字を自動で付けられます。
- %N を使うと、下から順に 1, 2, 3... と番号が付きます。
- %n を使うと、上から順に 1, 2, 3... と番号が付きます。

2. ゼロ埋め：連番の前に 0 を付けて桁数を揃えられます。
- %NN と書くと 01, 02, 03... となります。
- %NNN と書くと 001, 002, 003... となります。

### Resize Artboard to Fit Content
- 機能：アートボードサイズの自動調整
- 特徴：アートボード内のコンテンツに合わせて自動的にリサイズします。

### SelectMenu
- 機能：類似アイテムの一括選択
- 特徴：同じフォントを使用しているすべてのテキストを一度に変更したり、特定の列にあるすべてのオブジェクトを同時に調整したりすることができます。

#### ◯解説ページ
https://sttk3.com/blog/tips/xd/selectmenu.html

1. 共通選択：名前、種類、位置などが同じアイテムを一括選択します。
2. 共通テキスト選択：フォント、スタイル、サイズなどが同じテキストを一括選択します。
3. 行列選択：グリッド状に並んだアイテムの中で、同じ行や列にあるものを選択します。
4. オブジェクト選択とテキスト選択：アートボード、ロックされたアイテム、非表示アイテムなど、特定の条件に合うオブジェクトやテキストを一括選択します。

### Split Rows
- 機能：テキストの分割・結合
- 特徴：行ごと、文字ごと、指定文字で分割・結合できます。

### Text to Clipboard
- 機能：テキストの一括コピー
- 特徴：選択した複数のテキスト要素を一度にクリップボードにコピーできます。

### TransformSession
- 機能：アイテムサイズ・線幅・効果の変更
- 特徴：拡大率指定で簡単に拡大・縮小できます。

### Trimlt
- 機能：テキストエリア整形
- 特徴：選択したテキストエリアを、中のコンテンツ量にあわせて高さ・幅を自動で調整してくれます。

### テキスト校正くん for XD（ICS MEDIA）
- 機能：文章校正
- 特徴：選択テキストに対して、文章校正を行います。

#### ◯ダウンロード・解説ページ
https://ics.media/entry/19346/


## プラグインのインストール方法

1. Creative Cloud デスクトップアプリを開く
2. 「プラグイン」タブを選択
3. 検索欄に欲しいプラグイン名を入力
4. 「インストール」ボタンをクリック


## プラグインの使い方


#FindReplaceSession
ノーベル物理学賞「for foundational discoveries and inventions that enable machine learning with artificial neural networks」

# ノーベル物理学賞「for foundational discoveries and inventions that enable machine learning with artificial neural networks」

https://www.nobelprize.org/prizes/physics/

## はじめに

https://www.nobelprize.org/prizes/physics/2024/summary/

[John J. Hopfield](https://www.nobelprize.org/prizes/physics/2024/hopfield/facts/) 氏と [Geoffrey E. Hinton](https://www.nobelprize.org/prizes/physics/2024/hinton/facts/) 氏が、「for foundational discoveries and inventions that enable machine learning with artificial neural networks」により、2024 年のノーベル物理学賞を受賞しました。

この記事は、「機械学習 (Machine Learning) とはなんだ？」という人に対して、関心を抱いていただけるように、概要だけ書かさせていただきます。詳しい説明などは、他の方の記事を見ていただけると幸いです。

## 科学的背景

https://www.nobelprize.org/uploads/2024/09/advanced-physicsprize2024.pdf

Hopfield 氏は、脳の神経細胞 (neuron) がどのように連携してパターンを認識するかをモデル化し、その後、彼のモデルはエラー修正やパターン補完に利用されました。Hinton 氏は、ニューラルネットワーク (neural network) の学習方法を進化させ、より複雑な問題を解決できる「深層学習 (deep learning) 」の基礎を築きました。

この技術は、科学や日常生活に大きな影響を与えています。例えば、天文学や医学、さらには気候モデルの予測などにも利用されています。また、人工知能 (AI) は私たちの日常生活でも、画像認識や言語生成などの分野で重要な役割を果たしています。

簡単に言うと、彼らの研究により、コンピュータが複雑な問題を解決するための新しい方法が生まれたのです。

## おわりに

私自身、機械学習について学んでいるときに、「物理だな〜」と感じたことはほとんどなく、Hopfield 氏 と Hinton 氏が機械学習の業績で物理学賞を受賞したと聞いた時は驚きました。これをきっかけにより、機械学習の研究が今以上に盛んになれば、機械学習・深層学習を研究する人間として、嬉しいです。
ESXiのSSHパスワード認証へ変更

前提条件
ESXi上へSSH操作が可能であること
デフォルトの場合、SSHログインはチャレンジレスポンス認証（キーボードインタラクティブ）を使えばできるので以下参照
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3884044/6bf8eaf6-9666-b139-2e6d-679023b09827.png)

SSHログイン実行後は以下ファイルを編集してパスワード認証に変更する
```
vi /etc/ssh/sshd_config

PasswordAuthentication no
↓変更
PasswordAuthentication yes

```
変更後のサービス再起動は不要。
Teraterm等の接続を解除し、再度ログインするときにパスワード認証でログインできるか確認してください。
ユーザ目線でのBOXの使い方～「コレクションの削除」

「コレクション」の削除はできない（！）
BOXのWebサイトには「削除できる」と書いてある。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286711/046ebe3b-e7c7-cc50-bd40-23c443274653.png)

実際には「省略記号ボタン」を押しても

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286711/448f3712-bf9a-076d-3829-90a30ddf83a8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286711/3c73c38c-720e-5b6e-972f-c9b6b9713609.png)

という感じで、出てこない。
故に方法としては「ゴミ箱」名の「マイコレクション」を作り、そこに移動し、一杯になったら削除する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286711/4ab54673-2a7e-e347-bb77-afe54b50c85c.png)
tmux内でlessを使ったときに幸せになれる設定

# tmux内でlessを使ったときに幸せになれる設定

## はじめに

tmuxを使うようになって数年経ちます。しかしtmuxでずっと不満だったのが、lessで`q`を入力して終了したときに画面が切り替わり、終了直前に見えていた部分が残らないことでした。例えばmanコマンドなどで目的の項目をみつけたところで終了すると肝心の項目が消えて参照できなくなるので、極端な場合は別のターミナルウィンドウを開いて確認することもありました。長期にわたりこのままtmuxを使っていたのですが、ようやく思い立ってtmuxのmanを調べました。

## 結論

最初に結論です。**~/.tmux.conf** に次の1行を追加すれば、tmux内のlessで終了時に見ていた部分が画面に残ります。

```text
set-option -g alternate-screen off
```

## 解説

多くのターミナルエミュレータにはtmuxのalternate-screenで制御するような別の画面に切り替える機能があり[^tite]、lessは起動時に画面を切り換え、終了時に元の画面に戻します。元の画面に戻ることで直前に表示していた部分が消えるというわけです。画面が切り替わるのを抑止できれば、lessの終了時に最後に見ていたところを残すことができます。

[^tite]:端末制御としてはカーソル移動機能利用のON/OFFということのようです。

### lessの-Xオプション

実はless自身にも、別画面への切り替えを抑止する`-X`オプションが用意されています。実際最初に試したのが-Xオプションでした。コマンドラインでlessを使うときに-Xオプションを追加すれば、問題無く動作するのは確認できました。

ちなみにlessの-Xオプションの説明には次のように記述があります。

> Disables sending the termcap initialization and deinitialization strings to the terminal. This is sometimes desirable if the deinitialization string does something unnecessary, like clearing the screen.

> 端末への termcap 初期化および非初期化文字列の送信を無効にします。非初期化文字列が画面をクリアするなど、不要な処理を実行する場合、これが望ましいことがあります。
>（Google翻訳による日本語）

常時-Xオプションを有効にするため環境変数のLESSを指定したところ、単純にファイル見る場合は問題なく、manコマンド内で起動されるlessでもうまく働いてくれました。しかし`git diff`を実行した際、通常であれば変更の差分をカラーで表示するところを、カラーのためのエスケープシーケンスの処理がうまくいかず正しく表示できなくなってしまいました。それで-Xオプションはあきらめました[^color]。

[^color]:lessに関しては-Xオプションの存在は以前から知っていたこともあってそれ以上調べませんでした。その後調べたところ、-Rオプションを一緒に指定すれば希望の動作となることがわかりました。

### tmuxのalternate-screen

自分では以前に、screenコマンドで別画面への切り替えの抑止を設定したことがありました(最近確認したらその設定は不要になっていました)。それでtmuxにも別画面への切り替えを抑止する設定があるはずだと確信して、tmuxのmanから探すことにしました。正直tmuxのmanは巨大なので探すのがめんどくさかったわけです😅。

思いつくキーワードでmanを検索したところ、すぐにalternate-screenオプションが見つかりました。tmux内のコマンド入力で

```text
: set-option alternate-screen off
```

を実行したところ、期待した動作を確認できました。

設定するオプションが判明したので、あとはいちいち指定しなくても済むよう ~/.tmux.conf に追加すれば完了です。

しかし次の行

```text
set-option alternate-screen off
```

を追加してtmuxを起動したところエラーとなりました。

```text
/home/minmin/.tmux.conf:3: no current window
```

`no current window`は`.tmux.conf`を読み込む時点ではカレントウィンドウが存在しないことによるエラーのようです。このエラーは、`set-option`に`-g`オプションを指定すれば回避できます[^tsuika]。こうして最初に説明した設定を行えば完了です。

[^tsuika]:実は当初`set-option`コマンドの`-g`オプションに気付かず、他の設定方法を調べ `set-hook -g window-linked 'set-option alternate-screen off'` として利用していました。
【Laravel Inertia】めちゃ長いdata-pageを非表示にしたい


## はじめに

`Inertia` を使っていると一番気になるところ  
フロント画面に渡す値は必ずこの app 要素の `data-page` に json で展開される  

![スクリーンショット 2024-10-09 9.11.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/e7bd3457-1b87-5594-7877-190218b84f3a.png)

HTMLを覗いただけで、すべての値が確認できてしまうのはリスクを気にしてしまう
あと要素が増えすぎるとデバッグがとてもしにくい

これを非表示にできないか  


## `data-page` の使われ方の調査

Inertia がどのようにレンダリングをしているかは、以下の記事がとても分かりやすい

https://tech.yappli.io/entry/inertiajs

つまり、初回アクセス時に `data-page` にある値を参照してレンダリングをしている
ということは、使い終わったら消しても良いのでは  

調査 :mag:

- [Vue 3: Props are visible using the element inspector · inertiajs/inertia · Discussion \#372 · GitHub](https://github.com/inertiajs/inertia/discussions/372)
- [Disable Props from Being Displayed in "data\-page" attribute · inertiajs/inertia · Discussion \#1430 · GitHub](https://github.com/inertiajs/inertia/discussions/1430)

初回実行は `app.ts` の `setup()` 内、 `createApp()` が該当する
いわく、この処理の後で `data-page` を消しちゃって OK とのこと

ほんとか？  

![スクリーンショット 2024-10-09 9.14.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/93601b80-7781-32a3-6688-46392dc0b220.png)  

`dataset` は `HTMLElement` に生えてるらしいので、強制変換＆null条件演算子で繋げる

```ts:resources/js/app.ts
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .mount(el);

        delete (el as HTMLElement)?.dataset?.page;
    },
```

こんな感じ  
試してみると  

![スクリーンショット 2024-10-09 9.24.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/0b661e1f-cb02-de78-e102-d62a3a8885ae.png)

なんと成功 :raised_hands:  
とても見やすくなった！  



## おわりに

消したとしても JS 内には値があるので、フロントにセキュアな値は送らないようにしよう  

Inertia v2 が出るみたいなので、標準搭載されるといいな

https://laravel-news.com/inertia-2-beta-coming-soon