OmniAICreator/Qiita-1.07M huggingface dataset:
意外と知らない初心者ほど記事を書いたほうがいい理由

# はじめに

おはようございます。Watanabe Jin(@Sicut_study)です。
今回は初心者の人こそ記事でのアウトプットをしたほうが良いという話をしていきます

# 毎朝5分で読める

朝5分で読めるシリーズは平日7時にエンジニアの方に気づきが与えられるような記事を投稿しています。

よければ@Sicut_studyのフォローを宜しくおねがいします！

また**スタエフ**でも毎朝6時58分にお話をしているので、耳で学習したい方はこちらもお願いします！

こちらでも同じ内容を5分で聞いて学べます👇

https://stand.fm/episodes/65f7ba36f250278c56e52086

# なぜ初心者は記事を書いたほうがいいのか？

初心者が記事を書いたほうがいい理由は2つの視点が有ります。
ここは他の記事でも詳しく説明してますので、ここでは簡単に説明していきます。

## 1. 初心者にしか書けない記事の希少価値が高い

あなたが初心者エンジニアと言われる人であれば記事を書けと言われてこう思いませんでしたか？

**「自分には技術がないから記事が書けない」**

実は記事=技術という考え方がそもそも違っています。

<font color="red">**初心者が書くべき記事は自分のやっている勉強や経験、考え、体験など初心者だからこそ感じられること、失敗したことなどを記事にすべきです**</font>

世の中にはそもそも**考えや体験を伝える記事**というのがものすごく少ないです。これは技術など事実を書くのとは違い、自分の考えを言語化しないといけないのでライティングが大変であったり、意見を書くことは賛否を生んでしまうと考えるからです(炎上恐いなみたいな)

しかし、そんな記事にこそ価値があると思っています。
技術的なことはよっぽどのことがないとAIやネットのどこかしらに情報があります。
体験や考えなどはネットになかなか落ちていないのです。

あなたが駆け出しなら感じるかもですが、**最速で成長できる勉強方法**や**初心者のときにやっておいたほうがいいこと**などを知りたいと思っていもなかなかいいものがないと思いませんでしたか？

このような情報はあまりネットにはありません。なので多くの人が自己流で学習をしてしまうので成長する人成長しない人、１人でできる人、できない人などが現れてしまうのです。

もしあったとしてもその記事を書いている人はある程度エンジニアとして成功している人だと思います。

**「成功しているあなただからこの方法でうまく行ったんでしょ？」**

そう感じませんか。でももし、駆け出しの人が駆け出しのときに体験や経験、考えの記事を書いていて将来的にうまくいっていたらその記事は信じるに値すると思います。(美化もされていないはずです)

<font color="red">**初心者のあなただからかける記事を書くことが大切です**</font>

## 2. 過去の歴史は後になって作ることができない

私がアウトプットに固執するのは**アウトプットは歴史を積み上げること**だと思っているからです。

アウトプット(歴史)が積み上がれば転職するなどのときに採用担当者はその人の過去から現在までの活動をすべて見ることが可能になります。これは何よりの**信用**になるわけです。

<font color="red">**駆け出しエンジニアの頃から積み上げることに価値があると思っています。**</font>

アウトプットの習慣もつきますし、エラーの遭遇で記事を書くような機会もたくさんあります、また駆け出しのころだからこそかける記事もあります。

**過去に戻ってアウトプットすることはできません。今日にでも歴史を積み上げないと将来の自分が大変な思いをするかもしれません。**

私が行っていますプログラミングコーチングでは勉強し始めだからかけるような記事をたくさんアウトプットしてもらっていますので、参考にしたい方は覗いてみてください

https://qiita.com/organizations/jisou/items

# もっと詳しく知りたい人へ

過去にもアウトプットについては色々記事を書いていますので参考にしていただけたらと思います。

https://qiita.com/Sicut_study/items/9b20ac5ded003cb6d55a

https://qiita.com/Sicut_study/items/f31cdf9b19756238936b

# おわりに

大切なことは周りの人のためになること、そして将来の自分のために準備をしていくことだと思っています。ぜひとも記事を読んで頑張ろうと思った方はハードルの低いアウトプットで歴史を積み上げてください。

ここまで読んでいただけた方は**いいね**と**ストック**よろしくお願いします。
@Sicut_study を**フォロー**いただけるととてもうれしく思います。

https://qiita.com/Sicut_study

また明日の記事でお会いしましょう！

![jisou-lp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/bfeb082c-62aa-0ad5-92d1-d940ed4d5873.png)


# おすすめ記事

https://qiita.com/Sicut_study/items/c32dc28b96ed96aed4f0

https://qiita.com/Sicut_study/items/2318952ecfdddefd384c

https://qiita.com/Sicut_study/items/fa92e0b4a57422fac77d

# JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？

気になる方はぜひHPからライン登録お願いします👇

https://projisou.jp

# About Me

Webエンジニア転身して1年間本気で勉強
転職ドラフトで高額オファーを複数獲得
そこでの経験からアウトプットやマインドセットの発信に強みがある
エンジニアをやりながら、起業に挑戦中
アイデア作りやパブリックスピーキングを得意としてる

■ Twitter
https://twitter.com/Sicut_study
■ stand.fm
https://stand.fm/channels/65db27e353b400abe28ec29a
■ Youtube
https://www.youtube.com/channel/UCBFrGAJhPuuaoLwUIHBILsA

■ プログラミングコーチングJISOU
https://projisou.jp
■ 体験で学ぶ！JISOU
https://experience-learn.connpass.com/
■ 登壇依頼などご依頼はこちらから
himaria.jin.watanabe@gmail.com
ファイルシステム関数

## はじめに

PHPのファイルシステム関数について整理する


### ファイル書き込みの基本手順

・ファイルを開く
・ファイルをロックする
・ファイルに対して書き込みを行う
・ファイルを閉じる

```php:file_write.php
$data[] = date('Y/m/d H:i:s');
$data[] = $_SERVER['SCRIPT_NAME'];
$data[] = $_SERVER['HTTP_USER_AGENT'];
$data[] = $_SERVER['HTTP_REFERER'];

$file = fopen('access.log', 'a') or die('ファイルを開けませんでした');

flock($file, LOCK_EX);

fwrite($file, implode("\t", $data) . "\n");

flock($file, LOCK_UN);

fclose($file);
print 'アクセスログを記録しました。'; 
```


### fopen / fclose

ファイルを開く/ 閉じる

```php
fopen(string $filename, string $mode[, bool $use_include_path = false]) : resource

$filename: ファイルのパス
$mode: オープンモード
$use_include_pat: include_pathパラメーターを利用するか
```


### fwrite(fputs)

ファイルへの書き込み

```php
fwrite(resource $hundle, string $string [, bool $length]) : int

$hundle: 書き込み対象のファイルハンドル
$string: 書き込む文字列
$length: 書き込む文字列の長さ
```



### flock

ファイルへの同時書き込みを阻止するためにファイルをロックする

```php
flock(resource $stream, int $operation) : int

$stream: ファイルハンドル
$operation: ロックモード
```
Render.com デプロイ時のシステムエラー

## はじめに
2年ほど前(2022.5 頃)にpythonで作成し、Render.comにデプロイしたスクレイピングアプリを、久しぶりに見直して少しいじった際、正常にデプロイできなくて困った時の話です。
正直、ほんの少しコードをいじった（スクレイピングで抽出するテキストの条件指定を変えた）だけで大きな仕様変更もなく、認証情報も変更なかったのになぜエラーになるのか分かりませんでしたが、丁寧にドキュメントを読んだら普通に対処できたので、その記録の意味で記事を書きます。

## 何をしていたか ー 前提条件

Pythonと種々のライブラリを使用して、特定の新聞社の公式サイトから毎日、特定URLの記事をスクレイピングしてLINE Messaging APIを介して自分のLINEアカウントへ送信していました。

今回のエラーと使用言語等は無関係でしたので詳細は割愛します。

あらかじめRender.comでUpdate Repositoryとして設定したGitHubのリポジトリにPushすれば、自動でデプロイされるようになっていました。

## エラーの内容 
問題のエラーは、GitHubのリモートリポジトリにPush後、連携している Render.comにて自動デプロイされる段階で起こっていました。（GitHubには正常にPushできていました。）
デプロイ時にRender.com の Dashboard > Events にはデプロイの結果等が表示されますが、以下のようなメッセージが...

`Exited with status 1 because of an internal system error. Our team has been notified.`

こういう時、英語が読めるとかっこいい( 便利 )ですけど、わからないのでGoogleレンズで読みました 笑

`内部エラーのため、ステータス１で終了しました。私たちのチームに通知されました。`

だそうです。

## 結論から
Googleで適当に検索したんですが、いろんな記事に惑わされました。
基本に立ち返って、ちゃんとドキュメントを読むことに。
GitHubへのPushは正常でしたので、GitHubとRender.comの連携時の問題だと考え、「Connect GitHub」の項目内を探すと、トラブル時の対応についての記載を発見。

`GitHub デプロイが期待どおりに動作しない場合は、Render の GitHub アプリの構成ミスが原因である可能性があります。たとえば、間違ったリポジトリのセットに対して構成されているか、以前はパブリックだったリポジトリがプライベートになっている可能性があります。`
https://docs.render.com/github#troubleshooting

と、ここでリポジトリがプライベートになっていることを思い出しました。
物は試しでリポジトリのvisibilityをPrivateからPublicへ変更。
その後、手動で再デプロイしたところ正常にデプロイできました。めでたしです✨

## 余談
ただ、以前デプロイした時もリポジトリはPrivateだったはずなので、もしかしたらRender側で仕様変更があったのかもしれません（未確認）。
まあ、ちゃんとドキュメントを読んで対処することの大切さを改めて確認できました。

ちなみに、リポジトリをPublicにするにあたって、認証情報の環境変数への移行やコード全体の見直しをする機会にもなりました。
個人で使う小さなプログラムですが、公開することで人目を意識してプログラミングをするようになるので、自分にとってもためになったと思います。

## 最後に
知識共有として、GitHubリポジトリのvisibility変更手順を載せます。

1. リポジトリの画面から`Setting`タブを選択 
![スクリーンショット 2024-04-10 19.23.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/688040/b70786d4-e779-8a46-e9bc-32619462517a.png)


2. 一番下にある`Danger Zone`の中にある`Change Visibility`のボタンをクリック
![スクリーンショット 2024-04-10 19.24.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/688040/c2b9cf6b-8b59-ac17-b56d-763cbcd0436b.png)

3. 現在Publicになっている場合は、`Change to Private`　というボタン、現在Privateになっている場合は`Change to Public`というボタンがさらに表示され、それをクリックして画面を進める

以上の手順で変更できました。UIは記事作成時のものなのでご注意を。
DangerZoneなんて書いてあるので、ぱっと見怖いですね。重要な項目なので間違って操作しないようにとの配慮なのでしょうか。
段階的に確認画面が出ますので、必要に応じて触ってみればいいと思います。

## 参考
https://docs.render.com/github#troubleshooting
【全文検索】Firebaseで全文検索ができるようになったよ！！

## 前提事項
今回紹介するベクトル検索ですが、正式なリリースまだされておらず、
プレビュー版のようです。

### 料金について
Cloude Function、Firestore、Vertex AIの利用には料金が発生します。
詳しくはGoogle Cloudを参照ください。

Vertex AIについては以下を参照ください。
今回利用しているAIは「テキスト用エンベディング」に該当します。
https://cloud.google.com/vertex-ai/generative-ai/pricing?hl=ja

## 記事の内容
この記事は、「Firestoreで全文検索ができそう」ということと、
実際にどのようにやったか、やってみた結果をご紹介するものです。

より詳しいコードや手順はこちらに掲載していますのでご参考ください。
https://flutterdevelop.blog/vector-search/


## 大まかな手順
ベクトル検索についての説明は割愛します。
ベクトル検索に使用するベクトル値の計算には「Vertex AI」を使用しました。

また、現在はPython又はJavaScript（Node.js）でしかベクトル検索行えません。
そのためアプリ等からGoogle Cloud Functionをキックして検索を行う必要があります。

以下手順を実施し、ベクトル検索を行いました。
1. Google Cloud Functionの作成
2. Vertex AIの設定
3. ベクトルの取得
4. インデックスの作成
5. Firestoreでのベクトル検索の実施コード

## ベクトル値の算出
以下のようにデータとそのデータのベクトル値をFirestoreへ登録します。
![](https://storage.googleapis.com/zenn-user-upload/eae265f7b2a2-20240410.png)

## インデックスの作成
次にインデックスを作成します。
手順は以下公式ページに掲載されています。
https://firebase.google.com/docs/firestore/vector-search

以下のようにインデックスが作成されます。
![](https://storage.googleapis.com/zenn-user-upload/4daae0a1f54e-20240410.png)

## ベクトル検索につかうテストデータの準備
今回は私のブログ記事の要約内容をデータとして準備しました。
全文表示すると多いので一部省略しています。
| No | データ |
| ---- | ---- |
| 1 | freezed.dartが作成されない時の対処方法  freezedを使用してイミュータブルなクラスを設計する際に、 ターミナルで「… |
| 2 | Flutterのpubspec.yamlとは？意味や書き方をご紹介！！ YAMLはYAML Ain't Markup Languageの略で、 データを簡潔に表… |
| 3 | アプリ開発でよく聞くMVVMとは何か？ MVVM（Model-View-ViewModel）とは、 アプリのロジックとUI（ユーザーインターフ… |
| 4 | Flutterとは？？Flutterの概要を説明 「Flutter」について、"モバイルアプリを開発する場合に便利！"という認識は あ… |
| 5 | Riverpodとは？Flutterの一番メジャーな状態管理を紹介！！ 以前紹介した「StatefulWidget」も状態管理を行う機能の１… |

## ベクトル検索の実行
以下公式ページに記載の手順に沿って、ベクトル検索を実施します。
https://firebase.google.com/docs/firestore/vector-search

```
#ベクトル検索のコード例
docs = collection.find_nearest(
  vector_field="embedding_field",
  query_vector=embedding_vector,
  distance_measure=DistanceMeasure.COSINE,
  limit=3
).get()
```

今回は「Riverpodについて」という検索ワードで検索してみたところ、
以下の順でドキュメントから値を取得することができました！！
| No | データ |
| ---- | ---- |
| 1 | Riverpodとは？Flutterの一番メジャーな状態管理を紹介！！ 以前紹介した「StatefulWidget」も状態管理を行う機能の１… |
| 2 | Flutterとは？？Flutterの概要を説明 「Flutter」について、"モバイルアプリを開発する場合に便利！"という認識は あ… |
| 3 | アプリ開発でよく聞くMVVMとは何か？ MVVM（Model-View-ViewModel）とは、 アプリのロジックとUI（ユーザーインターフ… |


## 最後に
サードパーティ製のツールを使うしかなかったFirestoreの全文検索でしたが、
ついにその悩みが解消されそうです！！

取得されるドキュメントの順序は類似度の近いものから順に取得されていそうです。
ただ今回はデータ数が少なかったため、検索精度を確かめることはできませんでした。

また作成されるベクトルのデータサイズは試算で約3KB(768次元×float(4byte))でした。
１ドキュメントあたりのサイズは最大１MBのため少し大きくも感じます。
Java silver 合格証明証　発行方法について

Java silver合格証の発行方法が分からないためご教授いただけると幸いです。

ネットで検索すると下記（１枚目）のようなイメージ画がよく出て来ます。
![スクリーンショット 2024-04-10 19.28.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534562/c851f565-306f-c477-fc42-7ef8d1b68ab5.png)



実際の私の画面では２枚目のイメージのように視覚情報という項目が存在せず、表示できるのがスコアレポートのみとなっております。

![スクリーンショット 2024-04-10 19.26.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534562/a2853aba-ef57-790a-fab0-acb4e1b74058.png)


何卒、よろしくお願いいたします。
Railsフィルターにおける条件分岐の落とし穴：不適切な`unless`の使用

## はじめに
Railsアプリケーションの開発では、コントローラーにフィルタを設定することで、アクション実行前に特定の処理を行うことが一般的です。しかし、これらのフィルタ内での条件分岐には注意が必要です。本記事では、`before_action`フィルタ内で不適切に`unless`を使用したことにより生じた問題について解説します。

## 問題の発生
あるRailsアプリケーションにて、日付パラメータの有無に基づいて日付を設定する`parse_date`メソッドが`before_action`フィルタとして設定されていました。このフィルタは、JSONレスポンスを返す`available_slots`メソッドの動作前に実行されるべきでしたが、以下のように誤った条件が追加されました。

```ruby
def parse_date
  @date = params[:date].present? ? Date.parse(params[:date]) : Date.today unless available_slots
end
```

この`unless`条件により、`available_slots`メソッドが事前に実行され、期待する日付オブジェクトの設定が行われず、結果としてビューに`null`が表示されるという問題が生じました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116202/30785619-ca8b-9eef-64d9-0f7ea7c3f83b.png)

## 問題の特定
`null`の表示を確認した後、該当のコントローラーのフィルタを調査し、`parse_date`メソッドの`unless`条件が問題であることを特定しました。ログ出力を見ると、`available_slots`が予期せずに呼び出されていることがわかり、その結果として`@date`が設定されていないことが分かりました。

```bash
Filter chain halted as :parse_date rendered or redirected
Completed 200 OK in 12ms (Views: 0.4ms | ActiveRecord: 3.4ms | Allocations: 5770)
```

## 原因の考察
`available_slots`メソッドは、単純な真偽値を返すタイプのメソッドではなく、JSONレスポンスを返す目的で設計されています。そのため、`unless`でこのメソッドを呼び出すと、メソッド内でレスポンスが返されてしまい、その後の処理が実行されないため、`@date`が`nil`となっていました。

## 解決策
`parse_date`メソッドから`unless available_slots`を取り除き、以下のように書き換えました。

```ruby
def parse_date
  @date = params[:date].present? ? Date.parse(params[:date]) : Date.today
end
```

これにより、`parse_date`メソッドは`available_slots`メソッドに影響されることなく、正しい日付オブジェクトを設定するようになりました。

## まとめ
Railsにおけるフィルターを使用する際には、メソッドの戻り値やサイドエフェクトを正確に理解していないと、意図しない動作を引き起こす可能性があります。特に、フィルター内で他のアクションやメソッドを呼び出す場合は、そのメソッドがどのような値を返し、どのような副作用を持つのかを十分に考慮する必要があります。
Windowsを消してから１年後のWindowsについて


昨年の春休み終わりごろ、ノートパソコンからWindowsを消してから１年が経ちました。

せっかくなので１年間大雑把にまとめようと思います。

---

## 序章

- 2022.4: WSL との出会い

Linux の何がいいのかわからないままWSLを使い続けること数ヶ月...

- 2023.2: Vim に手を出し、ターミナル主体の生活になる

- 2023.3: Ubuntu デュアルブートを考え始める

- 2024.4: デュアルブートは大変そうなのでシングルブードにする

同期の1人が入学時点で Arch を使っていたこと、 vim-jp slack と Twitter で強い思想に触れた影響が大きそうです。

---

## Ubuntu 生活

こうして所有していた唯一のPCからWindowsが消えてしまいましたが、 普段使っていた Chrome, Discord, Blender, Unity 辺りが問題なく動くのもあり、呑気に dotfiles を育てていました

---

## Ubuntu との別れ

apt で入るパッケージが古いために brew を使っていたのですが、Ubuntu の使い方として間違っているのではと思うようになります。

同時に、Arch なら何でもかんでもパッケージマネージャー(pacman)で入るらしいことや、Arch Wiki という膨大な情報量の Wiki があることを知り、夏休み直前に Arch への移行を決めました。(2023.7)


## Arch Linux 生活

こうして Arch Linux + LightDM + i3 + Wezterm + Neovim + SKK 、という典型的な開発環境が出来上がったのです。いきなりこんな構成になったのは確実に Twitter と vim-jp のせいですね。

慣れてきて i3 から Hyprland に乗り換えたり、デスクトップ PC を購入しやはり Arch を入れたり、年越し Install Battle をしたりして青春を謳歌していたのですが…

---

## Windows ほしいかもしれない

部室の PC を整理しているうちに Windows で Linux みたいな環境構築をしたくなりました。また、周囲がみんな Windows & WSL なので、自分が作ったものの動作検証をしたいと思うことも増えました。

そして、Excel が必須な場面があり、VirtualBox を使うとメモリ不足で落ちてしまう、という出来事がありました。他にも Windows 11 Home のアクティベーションができなくなってしまったり、wingetが動かなくなっていたりしました。

来年度の Windows を使う学生実験は VirtualBox で乗り切ろうと思っていただけに、これはかなり不安な状況です。

---

## ポータブル Windows という解決策

たまたま持っていた1Tのポータブル SSD に Windows を入れることを思いつき、USB が刺さっているときだけ Windows が起動するようにしたら、大成功！

実際、USB に Linux を入れるのはよくある話で、その逆をやった形になります。IO は少し遅くなりますが、メモリやCPUはオンボードの物なので VirtualBox とは比べ物にならないほど快適に動きます。

---

## 新生 Windows 

新年度に備え、Windowsを消してからおよそ１年後、Windows で遊びます。

- タイル型ウィンドウマネージャー GlazeWM (komorebiより安定して動いてそう)
- winget と scoop で全てインストール
- シェル は PowerShell (+ starship)
- ターミナルは Windows Terminal
- Ctrl2Cap が動かなかったのでレジストリを書き換え
- WSL Ubuntu は bash のまま運用
- ArchWSL を入れガッツリカスタマイズ

ことあたりのことはやりました。Linux から戻ってくると Windows も楽しくなる気がしますね。

---

## まとめ

**「Windows は精神衛生上素晴らしい」**

最近は Windows でやってみたかったことが終わってきて飽きてしまいましたしたが、Windows がそこにあるだけでストレスが減る気がするのでオススメです！
ReactでHelloWorld

## 概要
ReactでHelloWorldするまでの手順をまとめたのでメモとして残しておく

## 前提条件
・node.jsをインストールしていること
・npmをインストールしていること

```
$node -v
v18.14.0

$ npm -v
9.3.1
```

## 1. プロジェクトを保管するフォルダーの作成
```
$ mkdir react_sample
```

## 2. プロジェクトの作成
```
$ cd .\react_sample

$ npm install -g create-react-app

$ create-react-app test_project
※create-react-app test_projectが失敗する場合、以下コマンドを実行後に"$ create-react-app test_project"を実施
$ Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process
```

## 3. ブラウザで開いてみる
```
$ cd .\test_project

$ npm start
```

[http://localhost:3000/](http://localhost:3000/)

![スクリーンショット 2024-04-10 185745.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981742/93b3bb54-afa3-5c08-40e2-8f0556994edd.png)


## 参考
https://sitest.jp/blog/?p=3683
[Android]GithubActionsでリリースビルドapkをセキュアに作成する

## はじめに
Androidでリリースビルド（署名付き）をGithubActionsでapkを作成する方法を備忘録メモします。
今回は限定公開でアップしたいためapkの作成とします。
https://support.google.com/a/answer/2494992?hl=ja
※aabでもアップできるかもしれない。ドキュメントに記載がないので不明。

やり方は下記のサイトのものを使い手順通りに行います。
https://github.com/r0adkll/sign-android-release
※apk、aabファイルどちらも可能

## セキュアに
keystoreファイル(jks)をリポジトリに入れた状態（コミット）はセキュアではない(privateであればさほど問題ではないが)ので、jksはリポジトリに入れず、解決する対応とします。

## 対応方法

#### 1.jksを作成する
AndroidStudioでツールバーの「Build > Generate Signed Bundle or APK」から作成可能です。

それぞれpasswordやaliasを埋めて終わり
![スクリーンショット 2024-04-10 18.43.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109862/9d5a75cd-69cf-ee1d-7373-6a5ccc7dad18.png)

#### 2.Githubのリポジトリにシークレットキーを設定する

jksで作成した項目をそれぞれ対象のリポジトリの「Repository secrets」に登録します。フレーバーによって値が違う場合は「Environment secrets」でも可能。今回は「Repository secrets」とします。
![スクリーンショット 2024-04-08 20.15.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109862/793fd83f-c0bc-d2a7-6ea7-9bdec3ef3bb4.png)

jksはbase64にする
```
openssl base64 < [jksファイルパス] | tr -d '\n' | tee some_signing_key.jks.base64.txt
```
※some_signing_key.jks.base64.txtファイルのbase64の値をコピーしてsecretに登録

#### 3.GithubActionの設定

GithubActionでdispatchを使い、リリース版のapkを作成します。

下記のような形になります
releaseDirectoryのパスはフレーバーによって変更してる場合は変わる可能性があるので適時変更必要。
```
name: build release apk

on: [ workflow_dispatch ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: set up JDK 1.17
        uses: actions/setup-java@v3
        with:
          java-version: '17'
          distribution: 'temurin'
          cache: gradle
      - name: build Release
        run: ./gradlew assembleRelease
      - name: Sign app APK
        id: sign_app
        uses: r0adkll/sign-android-release@v1
        with:
          releaseDirectory: app/build/outputs/apk/release
          signingKeyBase64: ${{ secrets.SIGNING_KEY }}
          alias: ${{ secrets.ALIAS }}
          keyStorePassword: ${{ secrets.KEY_STORE_PASSWORD }}
          keyPassword: ${{ secrets.KEY_PASSWORD }}
        env:
          BUILD_TOOLS_VERSION: "34.0.0"
      - name: Upload Artifact
        uses: actions/upload-artifact@v3
        with:
          name: Signed app apk
          path: ${{steps.sign_app.outputs.signedReleaseFile}}
```

ちなみにassembleReleaseをbundleReleaseに変更してreleaseDirectoryのパスをbundleに合わせればaabファイルが作成されます。

## さいごに
セキュアにするため、jksファイルサーバにあげたくない場合は、gitignoreにしてjksでローカルビルドする方法が考えられますが、手間がかかります。そのため今回のようにsecretにして自動化するとセキュアで楽になります。
OpenShift WebコンソールからのHTPasswdアイデンティティープロバイダー設定

## はじめに
これまで、CLIでhtpasswdの設定をしていましたが、GUI (OpenShift Webコンソール)でもできそうなので試してみました。
CLIでは次のステップで設定を行いますが、このうち2と3をOpenShift Webコンソール画面から設定できることを確認できました。
＊環境：OCP4.14

1. htpasswdファイルの作成
2. htpasswdファイルを使用したシークレットの作成
3. HTPasswdアイデンティティープロバイダー カスタムリソースの作成

## 確認手順
インストール直後、OpenShift Webコンソールにkubeadminユーザーでログインすると、次のようなメッセージが表示されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/666d1ccd-44e0-06e7-a85b-36d216f4493b.png)

メッセージ内の `クラスターのOAuth設定` のリンクをクリックします。

次の画面になります。アイデンティティープロバイダーの `追加` プルダウンメニューから `HTPasswd` を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/952870cd-4a29-0481-a697-d8b77fe4a541.png)

このような画面になりますので、別途作成済みのhtpasswdファイルを使って設定してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/3753ec93-280d-4101-69a0-7ead3edcfbb5.png)

htpasswdファイルを選択（アップロード）すると、内容が表示されます。
＊今回はRHEL上で作成したファイルを使用しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/430ecfca-7b51-4789-c867-b55fa31502b4.png)

`追加` をクリックすると `htpasswd` アイデンティティープロバイダーが追加されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/cad478b9-4283-e29b-15b0-f2eb07c40e85.png)

OpenShift Webコンソールのログイン画面に、追加した `htpasswd` アイデンティティープロバイダーが表示されるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/45dd6167-ab28-907e-02ae-102c2de55e9d.png)

htpasswdファイルで設定済みのユーザーIDとパスワードでログインできることを確認しました。

補足）次のシークレットが自動的に作成されていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2164968/7fd6db21-84aa-b0c4-948a-333c744e96ec.png)

### 参考:
https://access.redhat.com/documentation/ja-jp/openshift_container_platform/4.14/html-single/authentication_and_authorization/index#identity-provider-configuring-using-the-web-console_configuring-htpasswd-identity-provider
Grid内ボタン

```javascript
var flexGrid = new wijmo.grid.FlexGrid('#FlexGrid');
flexGrid.itemsSource = createData(10);

flexGrid.columns[0].isReadOnly = true;
flexGrid.columns[0].width = 180;
flexGrid.columns[1].isReadOnly = true;
flexGrid.columns[1].width = 180;

flexGrid.itemFormatter = function (panel, r, c, cell) {
    if (panel.cellType == wijmo.grid.CellType.Cell) {
        if (c == 0) {
            cell.innerHTML = '<div style="text-align: center;"><input type="button" value="ボタン１" onmousedown="alert(' + "'ボタン１'" + ');" style="margin: -3px;" /></div>';
        }
        else if (c == 1) {
            cell.innerHTML = '<div style="text-align: center;"><input type="button" value="ボタン２" onclick="alert(' + "'ボタン２'" + ');" style="margin: -3px;" /></div>';
        }
    }
}

flexGrid.selectionChanging.addHandler(function (s, e) {
    if (e.col == 1) {
        e.cancel = true;
    }
});

function createData(count) {
    var data = [];

    for (var i = 0; i < count; i++) {
        data.push({
            mousedownイベント: '',
            セル選択させない: ''
        });
    }

    return data;
```
PythonでPDF文書の背景色や背景画像を設定する方法

PDFに背景色や画像を適用することは、視覚的な魅力を高めたり、プロフェッショナルな外観を作成したり、ブランディング要素を強化したりする効果的な方法です。背景を追加することで、PDF文書の全体的な外観をカスタマイズし、読者をより惹きつけることができます。ソリッドカラーを使用する場合でも、魅力的な画像を組み込む場合でも、この機能によってPDFをパーソナライズし、目立たせることができます。この記事では、**PythonでPDF文書の背景色や画像を設定する方法**を説明します。

- **[PythonでPDFドキュメントの背景色を設定する](#pythonでpdfドキュメントの背景色を設定する)**
- **[PythonでPDFドキュメントの背景画像を設定する](#pythonでpdfドキュメントの背景画像を設定する)**

この記事で使用する方法は、[Spire.PDF for Python](https://www.e-iceblue.com/Download/Spire-PDF-Python.html)を必要とします。これはPyPI経由でインストールできます: `pip install Spire.PDF`。

[無料ライセンスの申請](https://www.e-iceblue.com/TemLicense.html)

## PythonでPDFドキュメントの背景色を設定する
**PdfPageBase.BackgroundColor** プロパティを使用すると、特定のページの背景色を取得または設定できます。ドキュメントの各ページの背景に無地を追加するには、以下の手順に従ってください。
1. **PdfDocument** オブジェクトを作成します。
2. **PdfDocument.LoadFromFile()** メソッドを使用して PDF ファイルを読み込みます。
3. ドキュメント内のページを走査し、**PdfDocument.Pages[index]** プロパティで特定のページを取得します。
4. **PdfPageBase.BackgroundColor** プロパティを通して背景に無地を適用します。
5. **PdfDocument.SaveToFile()** メソッドを使用して、ドキュメントを別のPDFファイルに保存します。

**コードの例**
Python
```python
from spire.pdf.common import *
from spire.pdf import *

# PdfDocumentクラスのオブジェクトを作成する
pdf = PdfDocument()

# PDFファイルをロードする
pdf.LoadFromFile("サンプル.pdf")

# ドキュメント内のページをループで処理する
for i in range(pdf.Pages.Count):
    
    # 特定のページを取得する
    page = pdf.Pages[i]

    # 背景色を設定する
    page.BackgroundColor = Color.get_LightYellow()

# ドキュメントを保存する
pdf.SaveToFile("output/背景色.pdf")
pdf.Close()
```

**結果**
![PythonでPDFドキュメントの背景色を設定する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278784/e740eedf-bb82-6f3f-765e-d1d4231a3603.png)

## PythonでPDFドキュメントの背景画像を設定する
同様に、**PdfPageBase.BackgroundImage** プロパティを使って、特定のページの背景に画像を適用することもできます。ドキュメント全体に画像の背景を設定する手順は次のとおりです。
1. **PdfDocument** オブジェクトを作成します。
2. **PdfDocument.LoadFromFile()** メソッドを使ってPDFファイルを読み込みます。
ドキュメント内のページを走査し、**PdfDocument.Pages[index]** プロパティで特定のページを取得します。
3. **PdfPageBase.BackgroundImage** プロパティを通して背景に画像を適用します。
4. **PdfDocument.SaveToFile()** メソッドを使って文書を別のPDFファイルに保存します。

**コードの例**
Python
```python
from spire.pdf.common import *
from spire.pdf import *

# PdfDocumentクラスのオブジェクトを作成する
pdf = PdfDocument()

# PDFファイルをロードする
pdf.LoadFromFile("サンプル.pdf")

# ドキュメント内のページをループで処理する
for i in range(pdf.Pages.Count):
    
    # 特定のページを取得する
    page = pdf.Pages[i]

    # 背景画像を設定する
    page.BackgroundImage = Stream("背景画像.jpg")

# ドキュメントを保存する
pdf.SaveToFile("output/背景画像.pdf")
pdf.Close()
```

**結果**
![PythonでPDFドキュメントの背景画像を設定する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278784/0821b0de-0831-266b-3c74-89259bd3bc72.png)

この記事では、Pythonコードを使ってPDF文書に背景色や画像を挿入する方法を紹介しました。
より多くのPDF文書処理スキルについては、[Spire.PDF for Pythonのチュートリアル](https://www.e-iceblue.com/Tutorials/Python/Spire.PDF-for-Python/Program-Guide/Spire.PDF-for-Python-Program-Guide-Content.html)をご覧ください。
このAPIを使用して何か問題が発生した場合は、[Spire.PDFフォーラム](https://www.e-iceblue.com/forum/spire-pdf-f7.html)で技術サポートを受けてください。
元祖AirMacベースステーションをばらしてみた

写真はいろいろページにあるので省略

CPU: AMD Elan SC400-33AC
Memory: VG26V18165 x 2 (4MByte)
Flash: TMS29F040 (5V:512KByte)
Ethernet: AM79C961

WiFiはPCMCIAのカードでした。

Flashをソケットから外してflashromでよんでみました。

```
Copyright 1991 thru 1999 by Doug Karl and The Ohio State University.
Copyright 1991 thru 1999 by Doug Karl, Ohio State University & KarlNet Inc.
Copyright (C) 1999 General Software, Inc.\n
Copyright (C) 1990-1999 General Software, Inc.
Copyright 1991 thru 1999 by Doug Karl and The Ohio State University.
Copyright 1991 thru 1999 by Doug Karl, Ohio State University & KarlNet Inc.
Copyright (C) 1999 General Software, Inc.\n
Copyright (C) 1990-1999 General Software, Inc.
```

AppleのAの字も出てこなくて、おそらくまったく別の製品の基板を使ったような気がします。

SC400にはシリアルがあるのですが、一つしかないので、モデムにつながれていて、コンソールはなさげです。

オープンソースだとOpenRTOSやFreeDOSが考えられますが、前例はなさそうです。

筐体の三箇所のゴムの足ががねちゃねちゃになっていたので剥がしました。

筐体はオブジェとして置物にして、基板はなにか利用方法を考えます。

はて、どうしよう。
【PyKEEN】KGEのハイパーパラメータチューニング過程を可視化する

# はじめに
本記事ではPyKEENを使ってKGEモデルのハイパーパラメータチューニングをするときの最適化過程を可視化する手法を記します．

具体的には，`pykeen.hpo.hpo_pipeline()`を使用したハイパーパラメータチューニングに[optuna-dashboard](https://github.com/optuna/optuna-dashboard)を組み合わせて可視化します．

# 手順
`hpo_pipeline()`のstorage引数を与えると[optuna-dashboard](https://github.com/optuna/optuna-dashboard)で最適化過程を可視化し，結果を残すことができます．

PyKEENは内部的に[Optuna](https://optuna.org/)を利用しているため，[`optuna.study.create_study`](https://optuna.readthedocs.io/en/latest/reference/generated/optuna.study.create_study.html#optuna-study-create-study)と同様にstorage引数を指定することで学習状況をデータベースに保存することができ，optuna-dashboardで可視化できるという仕組みです．

最初にoptuna-dashboardをインストールします．

pipの場合
```shell
pip install optuna-dashboard
```
condaの場合
```shell
conda install conda-forge::optuna-dashboard
```

`hpo_pipeline()`の引数storageにsqliteデータベースのURLを指定します．ブラケットの部分はご自身の環境に合わせて置き換えてください．
```python
storage="sqlite:///[path]/[database_name].db"
```
参考: https://optuna.readthedocs.io/en/stable/tutorial/20_recipes/001_rdb.html

ここまで終わったら`hpo_pipeline`を実行すると最適化過程がDBに保存されているはずです．

最後に下記のコマンドを実行してダッシュボードを確認できます．（第一引数はstrageに指定したURLと同じ）
```shell
optuna-dashboard sqlite:///[path]/[database_name].db
```

こんな感じのダッシュボードが生成されたら成功です．お疲れ様でした！
![optuna_dashboard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703746/574a4b3d-1827-a3b6-7850-1c125797939d.png)
Windows11でエクスプローラーの左上メニュー『ホーム』を非表示に

# 概要

これ使わないから非表示に。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/c7553760-185b-6646-82d2-0dce2629a4da.png)

# やり方

レジストリーエディターを管理者として起動。

下記へ行って…

```
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Desktop\NameSpace
```

```{f874310e-b6b7-47dc-bc84-b9e6b38f5903}``` を削除。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/366942e9-fa66-9bb6-1da2-89ad420ef18b.png)

PCやエクスプローラーの再起動は不要です。

消えました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/df0ec261-332f-cc2d-5afe-02f6a1b711a6.png)

# 参考サイトさん

https://kzstock.blogspot.com/2023/10/hide-the-home.html

# バージョン

Microsoft Windows [Version 10.0.22631.3880]
【Rails,AWS】SageMakerのエンドポイントをRailsで使用してみる

どうもこんにちは。

今回は、以下の記事でトレーニングしたBERTモデルをRailsアプリケーションで呼び出してみました。

https://qiita.com/PDC-Kurashinak/items/f55d5d9e534f59440313

# 前提条件

上の記事で手順12まで実行できていることを前提として進めます。

# SageMakerノートブックインスタンス側での設定

## 1. トレーニングしたモデルをデプロイ

SageMakerのノートブックインスタンス内で以下のコードを実行します。

```python
predictor = huggingface_estimator.deploy(
    initial_instance_count=1,
    instance_type='ml.g4dn.xlarge',
    endpoint_name='endpoint-01' # ここは任意の名前
)
```

ここで発行したエンドポイントは、「リアルタイム推論」をするためのエンドポイントとなります。
「サーバレス推論」をするためのエンドポイントを発行する手順は後日記事にします。

# Railsの設定

今回は、バッチ処理で実装したためその手順を記載します。

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

Gemfileに以下を記述し、`bundle install`を実行します。

```Gemfile
gem 'aws-sdk-sagemakerruntime'
```

## 2. バッチ処理用スクリプトファイルを用意

`lib/batch`ディレクトリに、`bert_analytics.rb`という名前でファイルを作成します。

## 3. 環境変数を定義

`config/settings/development.yml`に環境変数を定義します。

```yml
aws:
  sagemaker:
    access_key: 'AWSアカウントのアクセスキー'
    secret_access_key: 'AWSアカウントのシークレットアクセスキー'
    region: 'AWSのリージョン'
    s3_bucket: 'S3バケットの名前'
```

## 4. `bert_analytics.rb`にスクリプト記述

以下のようにスクリプトを記述します。

```ruby
class Batch::BertAnalytics
    def self.bert_analytics
        # SageMakerエンドポイント接続
        access_key = Settings.aws.sagemaker.access_key
        secret_access_key = Settings.aws.sagemaker.secret_access_key
        region_name = Settings.aws.sagemaker.region
        credentials = Aws::Credentials.new(access_key, secret_access_key)
        sagemaker_client = Aws::SageMakerRuntime::Client.new(region: region_name, credentials: credentials)

        # エンドポイントを使用して推論
        text_comment = 'ここに任意のコメントを入力してください。'
        comment_text = text_comment.length > 700 ? text_comment[0...700] : text_comment
        input_data = { text: comment_text }.to_json
        response = sagemaker_runtime_client.invoke_endpoint({
                                                            endpoint_name: 'endpoint-01',
                                                            body: input_data
                                                          })
        
        result = JSON.parse(response.body.read)
        Rails.logger.info result['label'].sub('LABEL_', '').to_i
    end
end
```

710文字以上のテキストを推論できなかったため、テキストの最初の700文字を推論に使用するように処理してます。

## 5. 処理実行

以下のコマンドをターミナルで実行すると、任意のタイミングで処理を実行できます。

```sh
rails runner Batch::BertAnalytics.bert_analytics
```

## この後の処理

バッチ処理のスケジューリングは、以下の記事で説明しています。

https://qiita.com/PDC-Kurashinak/items/1ef12911404653a0769f

# まとめ

エンドポイントを使用して推論するのは比較的簡単でした。
GoogleのスプレッドシートでQRコードを作成するのができなくなった？

スプレッドシートでurlから一括でQRコードを作成する方法として、google API 使ってIMAGE関数使って一気に作成という記事がいっぱいあるし、昨年度も自分はそれを使ってQRコードを作っていたが、同じものを今動かすと動かなくなっている？

https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=QRコードにしたいURL

を直接ブラウザに入れても404になる。


なんかQRコードが作れなくなっている？


調べてみると
https://support.google.com/docs/thread/251700701

このapi廃止されたみたい？

代わりの方法として
=IMAGE("https://quickchart.io/qr?text=TRIAL")
みたいな感じがおすすめされていた。
Apache Sparkプールのバージョンアップ

# 基本的な考え方

旧バージョンで動いていたコードが新バージョンで想定通りの動きをするのか確認する必要がある。

# 移行方法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269528/bbbc86d9-bcfc-e6e0-fd52-f549a1344c15.png)
https://learn.microsoft.com/ja-jp/azure/synapse-analytics/spark/apache-spark-version-support#migration-between-apache-spark-versions---support

# 考慮ポイント
・移行ガイドを確認してあたりを付ける
https://spark.apache.org/docs/latest/sql-migration-guide.html

・Delta LakeもApache Sparkのバージョンに引きずられ、バージョンがあがるが下位互換性があるため考慮しないで問題ない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269528/34a5cfce-06b5-1f56-7187-e352574a790a.png)
https://docs.delta.io/latest/releases.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269528/74aa715a-561f-209f-2a10-bf6f1d3a80da.png)

https://learn.microsoft.com/ja-jp/azure/databricks/delta/feature-compatibility
Android13以降で L2TP/IPsec VPNに接続する方法

# はじめに
この記事では Android13以降で **L2TP/IPsec** 方式のVPNを簡単に接続する方法をご紹介します。
みなさんも Androidデバイス のVPN設定にて、**「あれ、L2TP/IPsec はどこ？」** と
困った経験があると思います。
その理由は Android12 で 該当プロファイルを追加できなくなり、Android13以降でその使用を規制されたためです。
おそらくセキュリティポリシーの更新によって Android がより安全な VPNプロトコルへの移行を推奨しているからです。
しかし、**L2TP/IPsec** で接続したいときがあるのも実情...
ネットにある情報は特定の条件を前提とした煩雑な内容が多いため、ここではより簡単な方法をご紹介していきます。

今回はWindows経由でVPNに接続する方法を解説します。
要するに Windows PC をホットスポットにします。

# 前準備
+ インターネットに接続された Windows PC を用意します
:::note info 
共有方法が Wi-Fi である場合、インターネットを有線接続しなければならないと思われがちですが、Wi-Fi 接続でも問題ありません。
これにより、有線ポートが存在しないノートPCなどでも簡単にネットワークを共有できます
:::
+ Windows 側で **L2TP/IPsec** の VPNプロファイルを登録しておきます
+ ホットスポットを設定します
    1. 「**インターネット接続を共有する**」をドロップダウンして
「**イーサネット**」または「**Wi-Fi**」を選択します
    1. 「**共有**」をドロップダウンして 「**Wi-Fi**」を選択します
    1. 「**モバイルホットスポット**」を 「**オン**」 にします
![sc2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335527/50957ad5-0803-7ca0-0db1-28ac44e887ae.png)
+ 登録した **L2TP/IPsec** VPN を有効化します

# 設定
+ **コントロールパネルに移動します**
:::note info
見やすいように ↓ の「**表示方法**」から 「**カテゴリ**」を選択した状態で進行します
:::
![sc4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335527/e6b4b685-da00-53b0-b581-d093843aec1a.png)

+ 「**ネットワークの状態とタスクの表示**」を選択します
![sc9_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335527/77e3bb84-19cd-3d14-f2ec-f80719f0810a.png)


+ 「**アダプターの設定の変更**」を選択します
![sc5_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335527/dc4694e4-2995-4dd0-8610-62666b613502.png)

+ モバイルホットスポットを有効にしていると 「**ローカルエリア接続 * 〇**」というネットワークが表示されます
![sc6_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335527/7d0b024a-396e-9a57-6c23-37853cdd740a.png)

+ 今回接続したいVPN(**L2TP/IPsec**) のネットワークを右クリック → 「**プロパティ**」を選択します
![sc6_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335527/044a5bd6-11ee-5965-0888-2e560194e9e2.png)
+ もう少しで設定完了です
最後に VPN のインターネット接続共有を設定していきます
    1. 上部タブから「**共有**」を選択します
    1. 「**ネットワークのほかのユーザーに(略)**」をチェックします
    1. 「**ホームネットワーク接続**」をドロップダウンして、さきほどの 「**ローカルエリア接続〇**」を選択します
    1. 「**OK**」を選択して設定完了です
![sc7_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335527/b50836fd-483b-56b6-ce22-fb2a3ca2fc52.png)

これで各デバイスの Wi-Fi 接続先リストにて、今回モバイルホットスポットにした **PC名** が表示されて接続できます

# おわりに
手順を踏めばシンプルですが、ピンポイントな過不足のない設定が重要です。
今回の方法以外にも Macを介したネットワーク共有なども可能らしいですが、
より一般的でシンプルと思われる方法を共有させていただきました。
また、「手順通りに設定したけどネットワーク共有できなかった」などの不備があった場合はご指摘を頂けると幸いです。

みなさんの Android デバッグライフを陰ながら応援しています。
Windows11でエクスプローラーの左上メニュー『ギャラリー』を非表示に

# 概要

これ使わないから非表示に。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/c7e0dcad-7f44-228d-179b-b3e23a669d15.png)

# やり方

レジストリーエディターを管理者権限で起動。

下記フォルダーまで行って…

```
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Desktop\NameSpace
```

```{e88865ea-0e1c-4e20-9aa6-edcd0212c87c}``` を削除。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/89729671-46c5-49c3-d673-2beab6e77af0.png)

PCやエクスプローラーの再起動は不要です。

消えました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/de1ce90b-61c2-31b1-331a-927f519797fc.png)

# 参考サイトさん

https://kzstock.blogspot.com/2023/10/Hide-the-gallery.html

https://windowsmatome.hatenablog.com

# バージョン

Microsoft Windows [Version 10.0.22631.3880]
集約とコンポジション

# はじめに
・集約とコンポジションの違いがよくわからなかったので自分なりに調べて、コードを実装し試してみた

# 集約
#### ChatGPTの回答
・集約は、「部分と全体」の関係を表現します。つまり、オブジェクト間の関係が「has-a」の形を取ります。
・集約では、部分オブジェクトがそのまま独立して存在できます。つまり、全体オブジェクトが破棄されても、部分オブジェクトは依然として存在し得ます。

#### 実装例
```` java:sample.java
public static void main(String[] args) {
	Tire tire = new Tire();
	Engine engine = new Engine();

	Car car = new Car(tire, engine);

	car = null;

	// carがnullになってもTireクラスとEngineクラスは生きている
	System.out.println(tire);
	System.out.println(engine);
}

class Car {
	private Tire tire;
	private Engine engine;

	public Car(Tire tire, Engine engine) {
		this.tire = tire;
		this.engine = engine;
	}

	// 省略
}

class Tire {
	public void haveTire(string kind) {
		System.out.println("4 Tires")
	}
}

class Engine {
	public void start() {
		System.out.println("Engine Start")
	}
}

````

全体オブジェクトであるCarクラスを破棄しても、TireクラスやEngineクラスは別でインスタンスを作っているため存在している

# コンポジション
#### ChatGPTの回答
・コンポジションもまた、「部分と全体」の関係を表現しますが、より強い関連性を持ちます。つまり、オブジェクト間の関係が「contains-a」の形を取ります。
・コンポジションでは、部分オブジェクトは全体オブジェクトに依存しており、全体オブジェクトが破棄されると部分オブジェクトも同時に破棄されます。

```` java:sample.java
public static void main(String[] args) {
	Car car = new Car();

	car = null;

	// carがnullになってたらTireクラスとEngineクラスは無くなっている
}

class Car {
	private Tire tire;
	private Engine engine;

	public Car() {
		this.tire = new Tire();
		this.engine = new Engine();
	}

	// 省略
}

class Tire {
	public void haveTire(string kind) {
		System.out.println("4 Tires")
	}
}

class Engine {
	public void start() {
		System.out.println("Engine Start")
	}
}
````



# 集約とコンポジションの違い
CarクラスがEngineクラスとTireクラスを使っているのは同じ
使っているCarクラスでnullとかになった場合、使われているTireクラスやEngineクラスで生きているかどうかで集約かコンポジションになる
Javascriptには兄弟がいた

# その名はActionScript
JavaScriptにはかつて、兄弟と呼べる存在がいた。
その名をActionScriptという。

彼らはどちらもECMAScriptの「方言」で、共通する部分があった。
とは言っても、片や動的型付けでプロトタイプベース、片や静的型付けでクラスベースであり、似通っているとは言い難かった。

# それでも近くに居た
JavaScriptをHTMLのscriptタグに書けば動く、というのは知っている人も多いだろう。
ActionScriptが動作していたのは、Flash (Adobe Flash) の中だ。
かつての時代を知っている者ならば、Flashゲームを目にしただろう。
そう、JavaScriptと共に、Webを盛り上げようと頑張っていたのだ。

# Flashのサービス終了
だが、Flashには終焉が訪れる。
HTML5が台頭することにより、Flashに頼らなくともインタラクティブなWebページを作れるようになった。
ブラウザの拡張機能であるAdobe Flash Playerは、セキュリティ面の問題があると取り沙汰された。
そして、Flashのサービス終了と共にActionScriptも消えていった。

# 失った先に
こうして、JavaScriptは兄弟を失った。
だが、Ecmascriptの理念は生きている。たとえ他の言語が滅びてしまっても、Ecmascriptの下にJavaScriptは在る。
Ecmascriptの仕様は2023年にも更新されているし、ESlintの名前の由来にも使われている。

# 終わりに (賢者モード)
ActionScriptの話と見せかけて、「Ecmascriptって何?」に対するざっくりとした説明でした。
「そんな歴史があったんだな」くらいに思ってもらえたら充分です。
フォルダー階層が一目で丸わかり！

入社してから1年が経過し、
プロジェクトも3つ目。

気づいたことがある。

フォルダ階層（ディレクトリツリー）がもはや大樹。（笑）

私にとって全部把握するなんてムリ。

、、、そんな時にはこれ

「フォルダ階層を『見える化』しよう！」の技:evergreen_tree:

以下の①～④の流れで簡単にできるので、参考までにどうぞです。

①windowsエクスプローラで、
『見える化』したい階層のてっぺんに移動する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329700/55f58118-0482-e03f-2433-a9553ff68f06.png)

②windowsエクスプローラのアドレスバーに、
「cmd」と入力してEnterを押すと、コマンドプロンプトが開かれる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329700/2eb10d45-106f-d492-8e18-59f22a316a93.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329700/c623d8e2-8c25-b3fd-8219-d2973f700376.png)

③開かれたコマンドプロンプト上で以下のコマンドを入力する。
「tree /f >list.txt」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329700/0e851f90-1aae-474e-f324-d24bcdace6f7.png)

④すると、、、
　先ほどの階層に「見える化ファイル（list.txt）」ができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329700/643541ca-fe86-b8d7-086c-530c31894402.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329700/434645c9-860f-b522-dd8f-348b91631df9.png)
Best Digital Marketing Company in Mohali

Elevate your brand's online presence with Aksh Digital Solutions, the premier digital marketing company in Mohali. With a proven track record of delivering exceptional results, we specialize in crafting tailored strategies to elevate your brand's visibility and drive growth in the dynamic digital landscape of Mohali. From strategic SEO and compelling content creation to engaging social media management and targeted PPC campaigns, our comprehensive suite of services is designed to propel your business forward. Partner with Aksh Digital Solutions and embark on a transformative journey towards digital success in Mohali. Experience the difference and elevate your brand to new heights with the leading digital marketing company in Mohali – Aksh Digital Solutions.
https://akshdigitalsolutions.com/digital-marketing-company/
小型の人気 LLM: Mistral-7B って何で性能いいか知ってる？

# Mistral-7B って何？

[Mistral-7B](https://huggingface.co/mistralai/Mistral-7B-v0.1) は Mistral AI 社が開発した LLM です。
Mistral AI 社はフランスの AI スタートアップで、現在はユニコーン企業な話題の会社です。

Mistral AI は Mixtral-8x7B という Mistral-7B より大型のモデルも出しており、こちらも人気です。

今回は小型の LLM として大人気な Mistral-7B について解説していきます。

## Mistral-7B が人気な理由
この LLM が人気な理由は 3 つあります。
- OSS であること
- 小型のモデルであること
- 同規模の LLM の中では推論も速く、トップクラスの性能であること

### OSS であること
OSS のモデルは、ライセンスが定義されているものの、ライセンスの許す限りであれば自分で好きなようにチューニングができます。
そのため、個人・企業でチューニングモデルを作るときのベースモデルとして活用ができます。

### 小型のモデルであること

「大は小を兼ねる」なんて言いますが、LLM においてはそうではありません。
パラメータ数が比較的小さなモデルには、大きなモデルにない以下のような利点があります。

- GPU が弱くても動く
- 自分でチューニングがしやすい

まず、パラメータ数の大きい LLM を動かす場合、数百万レベルのサーバを用意してやる必要があります。
そして、チューニングにはもっとお金がかかります。

もちろんその分性能がいいのですが、タスクによってはそこまで高い性能はいらないので、安く楽に推論・チューニングできるというのは非常に大きなメリットになります。

### 同規模の LLM の中では推論も速く、トップクラスの性能であること
性能に関しては、詳しくは [Mistral 7B](https://arxiv.org/pdf/2310.06825.pdf) のベンチマークを見てもらえればよいですが、同規模の LLM の中でトップクラスの性能があります。

速度に関しては、Mistral 7B が「高いパフォーマンスと効率性を両立させたバランスの取れたモデルが必要だ」という思想をもとにスタートしているので、最速でないにしても他のモデルに比べて速い作りになっています。

ちなみに、このような特徴の背景には以下の 4 つのアーキテクチャの存在があります。
- Grouped-Query Attention
- Sliding Window Attention
- Rolling Buffer Cache
- Pre-fill and Chunking


#### Grouped-Query Attention

↓ 画像の真ん中のやつです。

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
footer {
  FontColor black
  FontSize 17
}
</style>
footer  各 Attention の概要図\n(出典：GQA: Training Generalized Multi-Query Transformer Models from Multi-Head Checkpoints)
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758571/18f91711-e96b-76fe-5503-164219fc2c85.png>
@enduml
```

従来の Transformer は左の Multi-head Attention ですが、この Multi-head Attention は「性能いいけど遅い」という問題点がありました。
そして、右の Multi-query Attention が開発されると「速いけど性能悪い」という問題点が見つかりました。

なので、折衷案として、真ん中の「性能も速度もいい」 Grouped-Query Attention が開発されました。

以下でも簡単に解説しています。

https://qiita.com/kernelian/items/9a61f3957ccd9155ee4e

#### Sliding Window Attention

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
footer {
  FontColor black
  FontSize 17
}
</style>
footer   Sliding Window Attention の概要図\n(出典：Mistral 7B)
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758571/2ab80926-9529-04b4-2437-4a0434b7ac14.png>
@enduml
```

Transfomrer には self-attention が含まれていますが、シーケンス全体のアテンションを計算するのは非常にコストが高く、シーケンスの長さに対して二次関数的にコストが増加していきます。

そこで、Sliding Window Attention では、固定サイズのウィンドウを使用して、ウィンドウ長の周辺単語のみアテンションを計算します。

これによって、計算量が削減されます。
また、この場合ある単語の周辺単語のアテンションしか計算されないですが、その周辺単語が更にその周辺単語のアテンションを計算するので、結局連鎖的に文書全体のコンテキストを理解できるようです。

ということで、Grouped-Query Attention と同じように、Sliding Window Attention も性能を落とさず計算量を削減することができます。

#### Rolling Buffer Cache

先ほど Sliding Window Attention で連鎖的に文書全体を見ることができると言いましたが、これを助けてくれるのが Rolling Buffer Cache です。

Rolling Buffer Cache では、過去に計算した Key / Value のペアを Cache として保持します。
また、長期的に残しておくとメモリ消費量が大きくなるので、特定の量を超えると適宜過去の Cache を上書きする形で保持します。（だから Rolling Buffer Cache）

#### Pre-fill and Chunking

推論時、特に長いシーケンスや大きなプロンプトを効率的に処理するための手法です。
プロンプト部分をシーケンス生成開始時にキャッシュして、推論プロセスを高速化します。

長いプロンプトに対しては小さな部分（チャンク）に分割して、チャンクごとに処理することで、効率的に処理します。

## まとめ

以上が Mistral-7B の解説でした。
これらを見ると、推論速度やメモリ効率性に重点を置いたモデルだとわかりますが、他のモデルよりと比べても性能が高いのがすごいですね。

おわり。
ネットワークによる可用性の実現

## 初めに
本日は、VPC/Direct Connectのリソースによる可用性の実現に関してまとめてみました。

## VPC
![スクリーンショット 2024-04-10 17.34.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744656/b82c87a9-6f04-2426-25c2-a4d831d1fbcc.png)

##### サブネット
ネットワークセキュリティの境界を明確にする為、パブリックサプネットとプライベートサブネットを構成する

##### AZ
データセンターレベルの障害や特定地域の自然災害に対応する為、複数のAZでサブネットを構成する

##### NATゲートウェイ
複数のAZ間では、それぞれにNATゲートウェイを配置する必要がある

## Direct Connect
##### 接続例
![スクリーンショット 2024-04-10 17.40.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744656/ed51423d-d1d3-6f45-5b38-c5fdcc52542e.png)

##### 冗長化
![スクリーンショット 2024-04-10 17.41.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744656/1b57897b-e937-4d1b-07f4-1b7a3376205a.png)

回線を2つ用意する事により、可用性を実現しています。
別拠点にする事で、障害にも対応ができます。

##### Site-to-Site VPN
![スクリーンショット 2024-04-10 17.41.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744656/99f73fe4-4df1-33d7-306d-48a3ac231230.png)

バックアップ回線としてSite-to-Site VPNを採用する事で、可用性を確保できます。

## 最後に
基本的に可用性を高めていくには、冗長化の考え方が基本的にあると感じました。
AZの数、回線の数など増やすことにより、片方で障害が起きたとしてもカバーできる仕組みの構築が重要だと改めて感じました。
Atomistic Simulation Environment (ASE) のohtakaへの導入記録 (#3)

# はじめに
この文書は[Atomic simulation environment (ASE)](https://wiki.fysik.dtu.dk/ase)を東京大学物性研究所システムB (ohtaka) へ導入する/した際の導入手順です。ドキュメントに書いてある通り何も考えずに``pip``を実行するとうまくいかないことが分かったので、後のために記録することにしました。この文章は基本的に過去に作ったものをコピーして作成しています。

## 環境

### 使用しているモジュール
```
module list
```
の出力結果
```
Currently Loaded Modulefiles:
 1) oneapi_compiler/2023.0.0   2) oneapi_mkl/2023.0.0   3) oneapi_mpi/2023.0.0  
```

# ASEのインストール

[ASE](https://wiki.fysik.dtu.dk/ase/index.html)の[webpage](https://wiki.fysik.dtu.dk/ase/install.html)に書いてあるように以下を実行するとうまくいかないことが分かりました。
```
pip3 install --upgrade --user ase
```
そこでホームに``ASE``というディレクトリを作成し、そこで以下の仮想環境（ase）を作成しました（ディレクトリ名等は適宜変更して下さい）。GPAWのビルドにpython 3.8が必要なので、明示的にpython3.8を指定しました。
```
python3.8 -m venv ase_oneapi_2023.0.0
```
今の場合、以下のようにして次に環境を有効にしました。
```
source ./ase_oneapi_2023.0.0/bin/activate
```
先ずはこの仮想環境においてpipをアップグレードします。
```
pip install -U pip
```
次にASEと関連するモジュールを以下のようにインストールしました
```
pip install numpy scipy ase cymem cython decorator mpi4py pytest
```
``pip list``の出力結果。
```
Package             Version
------------------- -------
ase                 3.22.1
contourpy           1.1.1
cycler              0.12.1
cymem               2.0.8
Cython              3.0.7
decorator           5.1.1
exceptiongroup      1.2.0
fonttools           4.47.0
importlib-resources 6.1.1
iniconfig           2.0.0
kiwisolver          1.4.5
matplotlib          3.7.4
mpi4py              3.1.5
numpy               1.24.4
packaging           23.2
pillow              10.2.0
pip                 23.3.2
pluggy              1.3.0
pyparsing           3.1.1
pytest              7.4.4
python-dateutil     2.8.2
scipy               1.10.1
setuptools          41.6.0
six                 1.16.0
tomli               2.0.1
zipp                3.17.0
```

# 追記
ASEのインストール手順とは直接関係はありませんが、上記の手順でインストールしたASEを使って振動解析を行おうとしたところ、openMPに関連すると思われるエラーで計算がうまくいかないことがありました。
詳しい人に相談してみて、``.bashrc``に``LD_LIBRARY_PATH``等が設定してあったことが問題だったようです。ジョブをサブミットする際に.bashrcに記載された環境変数は反映されないと思い込んでいたのですが、そうではないようです。余分は環境変数等は``.bashrc``には記述しない方が良いのかもしれません。
New Relic フリープランで始めるオブザーバビリティ！

# TL;DR
オブザーバビリティプラットフォームであるNew Relicには、無料で利用できるフリープランがあります。New Relicは利用ユーザー数と転送データ量がライセンスの構成要素ですが、なんと<strong>全機能使い放題のユーザー1名と100GBのデータ転送が無料</strong>で使えてしまいます。登録フォームへの入力だけですぐに使えるので、オブザーバビリティの世界に飛び込みましょう！

:::note info
[New Relic 無料サインアップはこちら](https://newrelic.com/jp/sign-up-japan?utm_source=external_partners&utm_medium=content&utm_campaign=apj_jp-ever-green-qiita&utm_content=qiita)
:::

# ここがスゴイよ！ New Relicのフリープラン
### 全機能使い放題！
フリープランにサインアップすると全機能が利用できるFull platform userという種類のユーザーが1名無料で使えるようになります。全機能とは、クラウドを含めたインフラ監視、APM、RUM（ブラウザ監視、モバイル監視）、外形監視、ログ監視などです。機能ダウングレードもありません。

システムの状態をデバッグして問題を即座に解決するためには、<strong>ソフトウェアスタック全体のデータを計測し、スタック横断で関連するデータを紐付け、それらを分析して問題を特定できる能力（オブザーバビリティ）が必要不可欠</strong>です。New Relicのフリープランは機能の制限がないため、無料でそれが実現できてしまいます。

※メーリングリストや共用のメールアドレスを使った複数人での使い回しはできないのでご注意を！
※一部、別ライセンスで提供されている機能（Live Archivesなど）は対象外です。


👇👇👇New Relicについて知りたい方はこちら👇👇👇

https://qiita.com/T_OMORI/items/6fbf795a60beae128ef1


### 100GBデータ転送無料！
New Relicのライセンスの構成要素の一つはエージェント等から送信されるデータ転送量ですが、フリープランでは月間100GBまで無料で使えます。

オブザーバビリティソリューションが初めてでちょっと試したいという方、小規模の検証環境や開発環境から利用してみよう！という方には月間100GBのデータ転送量が含まれるのは嬉しい話です。

※なお、転送データ量が月間100GBを超えた場合は、有償プランをご案内する画面が表示されます。また、次の月になるとカウントがリセットされて利用できるようになります。

### すぐ使い始められる！
登録フォームに氏名などの情報を入れるだけですぐにアカウントが発行され利用できるようになります。5分もかかりません。早っ！！

### クレジットカードの登録不要！
いくら無料でもクレジットカードの入力が必須だったりすると抵抗ありますが、ご心配なく。クレジットカードを登録することなく利用開始ができます。

### 利用期限がない！
サービスによってはフリーライセンスの利用期間が限定されているものもありますが、New Relicのフリープランは利用期限がありません。満足行くまで使い倒してください！

### Basic userが無制限!
New Relicには全機能が利用できるFull platform userという種類のユーザー以外に、Basic userという種類のユーザーがいます。Basic userは、APMやRUMなどの機能は利用できず、ダッシュボードの作成や閲覧を中心としたユーザーで、サマライズされた情報をみるような幹部や非エンジニアなどに向けたものになっています。フリープランでも、Basic userは人数の制限なく作成できるので展開して組織内での情報共有を始められます！

:::note info
[ユーザーの種類についてはこちら](https://docs.newrelic.com/jp/docs/accounts/accounts-billing/new-relic-one-user-management/user-type/)
:::



# 早速サインアップしてみよう！

フリープランのサインアップフォームに氏名などの必要事項を入力するだけですぐに利用開始できます。早速アクセスして登録してみましょう。

https://newrelic.com/jp/sign-up-japan?utm_source=external_partners&utm_medium=content&utm_campaign=apj_jp-ever-green-qiita&utm_content=qiita

サインアップの手順は👇をご参考に。

https://newrelic.com/jp/blog/how-to-relic/create-new-account


# 試してみよう！
担当されているシステムや手元の何らかのアプリケーションにエージェントが導入できたり、AWSなどのクラウドサービスのアカウントからデータ転送ができる場合は以下のガイドを参考にセットアップしてみましょう。

:::note info
[New Relic ファーストステップガイド（導入資料集）
](https://newrelic.com/jp/blog/how-to-relic/new-relic-faststep-guide)
:::

また、オンライン学習サービスである[Progate](https://prog-8.com/dashboard)では、New Relicを学習できる無料のタスク <strong>「New Relic を使ってアプリケーションを改善しよう」</strong> が公開されています。このタスクではアプリケーションの性能やエラーに関する問題の把握から原因特定、ソースコードの修正に至るまで、エンジニアの実務にそってNew Relicを学習することができます！！　

自分でアプリケーションが用意できない場合でもGitHub Codespacesを活用して学習ができる、なんとも嬉しいコンテンツです。

<a href="https://app.path.progate.com/tasks/muzHlTIVNZkSxom_eL_be/preview">
New Relic を使ってアプリケーションを改善しよう
<br>
<img width = 70% src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535230/efe53d5e-7b9f-1c6e-a5e2-67991d357b97.png">
</a>

### その他のハンズオンの例
:::note info
[New Relic Browserを使用して Web サイトをトラブルシューティングする①
](https://qiita.com/nr-mito/items/70d90d126de7273c27ac)
:::

<br>
<strong>いざ、オブザーバビリティの世界へ！！</strong>
ProxmoxでGPUパススルーのVMをリモート環境から作成する

## 前提
Proxmox上にGPUパススルー機能を使ってVMを作成したい。
ローカルじゃなくてリモートで。

## なんだよそれ
ローカルにProxmoxのマシンがあって、ディスプレイを差し替えられるならこの記事は読まなくてもよい。
通常のたくさんある「Proxmox GPUパススルー」で検索して出てきた記事を読めば問題なく作れる。

ただ世の中にはProxmoxがローカルになくてリモートでアクセスしたときにVMを作りたい！という欲求とか、ローカルにあるのはあるけどマシンの裏側でディスプレイ差し替えるとかめんどくさい！っていうことはよくあるので、そういう特殊な状況に直面したとき役に立つと嬉しいなっていうだけの記事です。

## VMの作り方
まずは基本的には検索して出てくるGPUパススルーのVMの作り方でほぼ問題ない。
GPUパススルーのVMの作り方は、通常はゲストOSをインストールする前にGPUを割り当てている。
最初に割り当てちゃうからVMがそのGPUを専有するため、ProxmoxのnVNCでは画面にアクセスすることはできないので、ローカルでディスプレイを見ながら作業するしかなくなる。

なので、まずはGPUを　**割り当てずに**　OSをインストールする。
割り当ててないので、普通にProxmoxのnVNCでインストールできるはずだ。
そして、OSインストール時にubuntuとかであれば　**SSH** アクセスできるようにしておく。

一通りインストールしたあと、VMを一旦シャットダウンして、その後そのVMに対してGPUを割り当てる。

GPUを割り当てるとGPUパススルーによって、ProxmoxのnVNCは使えなくなるが、SSHでログインできるようにしたのでProxmoxのシェルなどからVMが立ち上がったと思われるときにSSHでアクセスすればログインできるはず。

あとは、割り当てたGPUのドライバを入れれば、GPUを使えるVMが作成される。
Advanced Custom Fieldsの入力画面をちょっと見やすくする

# acf-input.cssを編集
acf-input.cssの一番下に3行追加するだけ。

```css:wp-content/plugins/advanced-custom-fields/assets/build/css/acf-input.css
body.is-dragging-metaboxes #acf_after_title-sortables {
  outline: 3px dashed #646970;
  display: flow-root;
  min-height: 60px;
  margin-bottom: 3px !important;
}

/*# sourceMappingURL=acf-input.css.map*/

/* この3行を追加 */
.acf-field{display:flex;}
.acf-label{width:20%}
.acf-input{width:80%}
```

%の値はお好みで。

フィールドタイプを「グループ」にすると行レイアウトが選べるんだけど、それ以外だと選べないから自分で入力しやすくカスタマイズするしかないです。

そのうちバージョンアップされて選べるようになればいいけど。