OmniAICreator/Qiita-1.07M huggingface dataset:
LLMOps 入門【前編：概要とプロセス】

本記事は  <a href='https://www.gao-ai.com/blog'>GAO 公式ブログ</a> からの転載となります。

---
## LLMOpsとは？

LLMOps（Large Language Model Operations）とは、大規模言語モデル（LLM）を利用した生成AIアプリケーションの開発から運用、改善までを一貫して管理するための考え方や仕組み（フレームワーク）です。多くの企業では、自社でモデルをゼロから構築するのではなく、OpenAI、Google、Anthropic などが提供する基盤モデルを活用し、プロンプト設計やファインチューニング（微調整）を通じて目的に合った生成AIアプリケーションを開発しています。LLMOpsは、こうした開発・運用プロセスを効率化し、品質管理やガバナンスを実現する上で重要な役割を果たします。

## MLOpsとLLMOpsの違い

従来のMLOps が一般的な機械学習モデルの開発と改善を対象とするのに対し、LLMOps はLLM を活用した生成AIアプリケーションやエージェント特有の課題に対応するためのものです。その主な特徴として運用プロセスにおいてモデルの出力に対する**ユーザーからのフィードバック収集や自動的な評価の実行結果などを改善に活用する**ことが重視されます。これらの結果がプロンプトや自動評価自体の改善、モデル選定や評価データセットの構築などに活用されることになります (具体的なプロセスは後述）。

## LLMOps とGenAIOps の違いと関係性

LLMOps と似た用語にGenAIOps（Generative AI Operations）があります。GenAIOps は、テキストだけでなく画像、音声、動画などの生成モデルを含む、あらゆる生成AIを対象とした、より広範な概念です。一方、LLMOps は生成AIの中でも特に「大規模言語モデル（LLM）」を利用した言語生成にフォーカスしています。つまり、LLMOps はGenAIOps の一部分（サブセット）と位置づけられ、特に言語生成に特化したプロセスが重視されます。


|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4048367/a5937311-ede8-4a15-94e4-ad628c639154.png)|
<font color="gray">LLMOps は GenAIOps の一部</font>


## 生成AIアプリケーションのデプロイ、その後の課題

IT部門やDX部門などにより開発・導入された生成AIアプリケーションが、通常のシステムと同様に**最初から100% の品質でユーザニーズを満たすことはまずありません**。そして、アプリケーションの使われ方、ユーザーフィードバックの獲得、定量的な評価などが何もない状況であれば、当然その状況は**永遠に改善されません**。結果として経営層がそのプロジェクトにROI を見出せなければ継続することが難しくなるかもしれません。

生成AI は一見すると正しいように見える出力をする特性があり、出力結果はそのまま使えないものの必ずしも全てが間違えているとも言い切れず、残念ながらユーザはモヤッとした不満を心に抱えることとなります。その状況で仮にIT部門がアンケートを定期的にとったところで、低い解答率で曖昧な回答を受け取ることになり、具体的な改善に繋げることは難しいでしょう。

**このような問題を解決するために必要な手法が LLMOps です。**

## LLMOps に必要な構成要素

生成AIを利用したアプリケーションやエージェントの継続的な改善を実現させるためのLLMOps には以下のような構成要素が含まれます。

1. **Tracing**
ユーザ入力とモデルの出力 (Trace)の取得および保管、および処理内容の可視化
2. **プロンプト管理**
生成結果の品質向上のためのプロンプト修正、テスト、評価など
3. **ユーザ フィードバックの取得**
ユーザがどの処理に対して、どのような評価をしたのかを具体的に収集・管理
4. **Human Annotation**
業務の専門家から見て、適切な回答をしているのかどうかの評価
5. **自動評価**
LLM as a Judge などを活用して、3や4の効率化・一次評価に利用
6. **Dataset管理**
ユーザの実際の入力などをデータセットとして管理し、テスト資材などのために管理
7. **利用傾向の把握と分析**
コスト, プロンプト, モデル, ユーザ, アプリケーションなどの様々な観点で、どのような傾向があるのかを分析

    

生成AIアプリケーションはこれらのプロセスを通じて継続的に改善し続けることで、初めてビジネスに価値を生み出すことが可能となります。

## まとめ｜LLMOpsはLLM活用の鍵

LLMOps は、LLMをビジネスに導入し、その価値を継続的に生み出すために不可欠な運用手法です。特に、モデルプロバイダが提供する強力な基盤モデルの活用が一般的となった現在、LLMOps なしでの効果的な運用は困難と言えるでしょう。
GrasshopperでFEM解析をイチから実装する　その1 最初のモチベーション

## はじめに

　本シリーズでは、3Dモデリングソフト「Rhinoceros（ライノセラス）」上で動作するビジュアルプログラミング言語 Grasshopper 上でFEM解析を行えるコンポーネントを計算を理解してイチから実装する過程を記録します。

　FEM（有限要素法）解析に挑戦する中で直面した課題や、試行錯誤した内容をアウトプットすることで、誰かの何かの助けになればと思ってます。

　最初は平面応力要素、板要素、3次元要素といった基本的な線形解析から始めます。どこまでできるかわかりませんが、材料非線形、幾何学的非線形、トポロジー最適化なども深く理解したいので、記事にするかもしれません。

　Grasshopperについて、FEM解析について、プログラミングについて、だれかの役に立てばうれしいです。

## FEM解析とは?
　本記事をご覧になられている方は、ご存知の方がほとんどかと思いますが、FEM（Finite Element Method：有限要素法）は、複雑な形状や構造を持つ物体を要素に分割して、その挙動を数値解析する手法です。FEM解析のほかにFEAという言葉も目にすることもあるかと思いますが、FEAはFinite Element Analysisの略でFEM解析と同じ意味です。

## なぜイチから作るの？

　Grasshopper上でFEM解析を行うツールとしては、Karamba3Dをはじめとした優れたプラグインがすでに存在しています。それでも、なぜイチから自作しようとなったのか。

### 1. ブラックボックスの中身を理解したい
　これが理由としては一番大きいです。現代では、コンピューターによる構造解析が当たり前になり、その計算がどんな仮定を含んで処理されているのか具体的な中身を知らずに使っている人が多いのではないでしょうか。
　解析ソフトがコンピュータに計算させるために、どんな仮定や近似が組み込まれているのかを理解することで、設計においてより正しい判断ができるようになると考えています。FEMの基本的なことが分かるようになれば、各種構造解析ソフトの技術解説書の読みやすさが格段にアップしますよ。
 それとなんとなく、最近の解析は高度化しすぎていて、到底自分なんかがわからないと思っている人が多いように思います。実際はそんなに難しくないし、絶対無理と思っていたものが自分の手で作れると感動します。
 
### 2. 自由に機能拡張ができる
　既存のCAEソフトでは、機能が制限されており、「こんなことがしたい」と思っても実現できないことがあったりします。
　自作であれば、痒いところに手が届くどころか、痒くなったら自分で「かき放題」です。思いついた機能をちょこっと追加したり、好きなようにカスタマイズして検証できるのが自作の醍醐味です。
### 3. プログラミングのスキルを向上させたい
　最後の理由は、プログラミングの勉強のためです。FEM解析の実装は、数学的な理論も複雑でそれを実装するのも、プログラミングのプの字くらいしか理解していない私にはとても難題です。プログラミングスキルを磨く絶好の機会と考えてます。

## おわりに
　本記事では、Grasshopper上でFEM解析をイチから実装するモチベーションについてお話ししました。
　FEM解析は、理論と実装の両面で難しい部分が多くありますが、その分うまく動いた時に脳汁が出ます。このシリーズが、FEMに興味のある方やGrasshopperでの開発に挑戦したい方の参考になれば嬉しく思います。
 
　次回は　平面応力要素についてまずは理論編として、平面応力要素の理論についてかいつまんで解説していく予定です。
古いPCでGROWIを動かす

# 概要

AVX 命令非対応の PC に GROWI をインストールする方法です。
非公式の MongoDB ビルドを使っており、動作は無保証です。

# 技術的な説明

数年前から Pentium Silver N5000 搭載の PC で GROWI を動かしていましたが、最近のバージョンが動かなくなってしまいました。 GROWI が使っている MongoDB が AVX 命令を必要としているためです。
Intel Core 第2世代 (Sandy Bridge) 以降の CPU では AVX 命令を搭載していますが、 Atom の系譜の CPU は数年前に発売のモデルでも AVX 非搭載のようです。 N5000 は AVX 無しでした。

解決方法は、 AVX 命令を使わないように MongoDB を再ビルドすることです。すでに先人が [Docker イメージ](https://hub.docker.com/r/l33tlamer/mongodb-without-avx) を公開しているので流用します。

# インストール方法

[GROWI Docs](https://docs.growi.org/ja/admin-guide/getting-started/docker-compose.html) を読みながら、 docker-compose で GROWI をインストールしていきます。

docker-compose.yml は以下のように変更します。

```patch:docker-compose.yml
@@ -32,13 +32,13 @@ services:
       - growi_data:/data
 
   mongo:
-    image: mongo:6.0
+    image: l33tlamer/mongodb-without-avx:6.2.1
     restart: unless-stopped
     volumes:
       - mongo_configdb:/data/configdb
       - mongo_db:/data/db
     healthcheck:
-      test: ["CMD", "mongosh", "--eval", "db.runCommand('ping').ok", "--quiet"]
+      test: mongo --norc --quiet --host=localhost --eval "db.runCommand('ping')" || exit 1
       interval: 10s
       timeout: 5s
       retries: 6
```
Copilot AgentとFigma MCPサーバーで画面を超高速で作ってみた

# Copilot Agent安定版がきた
ので、最近よく見るMCPサーバーでFigmaのデザインをもとに実装する、をやってみました。

# 手順
基本的には下記に則って進めました。
とてもわかりやすかったです。感謝！

https://zenn.dev/maronn/articles/github-coipilot-agent-and-figma-mcp

# 対象デザイン
Figmaのデフォルトのデザインを試しに依頼してみることにしました。

![basics](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900794/d44b2ac9-e095-42c2-8963-51a9cada36e6.png)

# プロンプト
```
https://www.figma.com/design/xxx（ここは実際のURL）
上記をFigmaのMCPサーバーからアクセスして、レイアウト通りに個別に画面を再現してください。別途ライブラリなどが必要であればインストールしてください。
```

# 結果
![homepage](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900794/35e0fb05-27f6-4562-8cef-cf5c7cefacb6.png)

![products](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900794/54436d60-d041-4cb4-a3ee-25845e2c7f41.png)

![cart](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900794/f7f82c56-ede6-4d32-b80d-6d2694a74d3d.png)

# 感想
**おおおおお、すげえ！！！！**

全部の画面ではないものの、3画面はきちんとみたまんまでできてます。
さすがにこれは感動しますね。
自分では一切コーディングせず、あっという間に画面で出来ました。
すげえ時代ですわ……。

いちおう補足すると、最初は画像がなく、レイアウトしか作られませんでした。
なので追加で、

```
figmaの画像部分も再現できる？
```

とお願いしたら、トマトとかの画像もダウンロードして反映してくれました。

これはUIデザインが劇的に捗りそうですね。

# 注意点
注意点として、単純にお願いしただけだと、cssは1ファイルにまとめられていました。
また、当然ですがレイアウトだけなので動的な部分は実装なしです。

![生成されたフォルダ構成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900794/1a35d0c6-1997-4d7e-81cb-2d40a0bb9447.png)
※ログインは自分がエージェントを使ってみるので追加しただけなので別

フォルダ分けとかパーツの分け方とか実装方式とか、そこら辺をプロンプトとしてきちんと整理したり、人間が最後はチェックするのが大事になってきそうです。

ChatGPTが最初出てきた時もすごいと思いましたが、AI関連で一番感動したかもしれません。

いい衝撃 かつ いい勉強になりました。
asyncとawaitをわかりやすく説明してみた

# async/awaitとは

コンピューターの世界では「同期処理」、「非同期処理」という処理の仕方が2種類あります。
おつかいで例えると、、、
同期処理は、お母さんが子供に「パン買ってきて」とパン屋さんにおつかいを頼んだとします。
でもパン屋さんはいつも混んでいて、パンが焼き上がるまで待たなきゃいけません。

流れでいうと下記です。

1.パン屋さんに行く
2.パンが焼き上がるのを待つ（ここで時間がかかる）
3.パンを買って家に帰る

なので上記の状態だとこの2の時に他の作業ができないです。(例えば宿題とかゲーム)

逆に非同期処理は「パンが焼けたら教えてね！」とお店の人に頼んで、その間に他のことをやれるようにします。

基本的にはこの考え方がasyncとawaitの考え方です。

# プログラムで表すと

```
async function buyBread() {
  console.log("パン屋さんに行くよ！");
  
  // パンが焼けるのを待つ
  await new Promise(resolve => setTimeout(resolve, 3000)); 
  
  console.log("パンを買った！家に帰るよ！");
}

console.log("宿題をするよ！");
buyBread();
console.log("ゲームをするよ！");
```

・asyncとは
関数の前につけることでその関数は非同期であることを示します。
そうすることで、プログラムに対して、「この関数の中には終わるのを待たないといけない作業がある
かも！」と伝えることができます。
おつかいの例で言うと「このおつかいは時間がかかるよ！」という合図です。

・awaitとは
関数内の作業に対して、「作業が終了するまで待つよ！」という指示を出せます。
こちらもおつかいの例で言うと「パンが焼けるまで待つよ！」という意味になります。

上記プログラムがどういった流れで動くかというと、、
1.まず「宿題をするよ！」 が表示される。
2.パンを買いに行く（でも、パンが焼けるまで待たない）
3.「ゲームをするよ！」 がすぐに表示される
4.3秒後（パンが焼けたあと）、「パンを買った！家に帰るよ！」 が表示される

await で待っている間に、他のことができるというのが非同期処理のポイントです。

# async/awaitがないとダメな例
下記はNext.jsの一例ですが、awaitが仮になかった場合「data.errors」の部分でエラーが出ます。
理由としては、awaitがないとデータが全て受け取れていない状態にも関わらずそのデータの中身を強引に見に行こうとしてしまっているからです。


```
const data = await response.json();

if(response.ok){
    router.push("/main");
}else{
    if(data.errors){
        setError(data.errors);
    }
}
```

# まとめ
すごく初歩的な内容ですが、意外とふわっとしたまま進めてしまっていた部分だったので今回自分にもわかりやすく説明させていただきました。
ConsulでDNSが解決できないけど、digは通るとき

# はじめに
今回は、ConsulのDNSについて紹介します。やや備忘録的に、または誰かの知見になればと思い、残します。

# やりたいこと
以下を実現したい。

サービスA：Pythonのflaskで、APIを公開。healthメソッドを公開する
サービスB：ConsulのDNSを使用して、サービスAのAPIをコールしたい

# 課題

digは通るが、curlが通らない。

```sh
# NOERRORで大丈夫
dig @localhost -p 8600 a.service.consul
```

しかし、curlがDNSを解決できない。

```sh
curl http://a.service.consul:5000/health
```

```sh:結果
curl: (6) Could not resolve host: a.service.consul
```

# 解決策
`dig +short`でIPだけ取得できる。

```sh
dig +short @localhost -p 8600 a.service.consul
```

```sh:結果
172.18.0.4
```

つまり、以下が成立する。
```sh
curl http://$(dig +short @localhost -p 8600 a.service.consul):5000/health
```

# 考察
- この方法は、たぶん正攻法ではないです
- DNSの設定を何か失敗していると思います。急ぎで修正するための突貫だと思ってください

[追記: 2025/06/17]
うっすら分かっているのは、おそらくDNSの名前解決が8600番ポートではなく、53番ポートで行われているからだと思います。curlでリクエストを飛ばすと、勝手に53番に問い合わせが行きます。また、curl側でポートの制御はできません。

# 余談
Dockerコンテナのインスタンスを動的にスケールするような場面では、IPアドレスもダイナミックに割り当てられるため、サービスメッシュは欠かせません。私は、自宅に子サーバーを何台か設置し、親サーバーで集権的に管理したかったので、Consulのサービスメッシュが必要でした。DNSだけならConsul不要じゃないか...という気もしますが、ツール自体の勉強も兼ねてConsulを使用しました。

# まとめ
いかがだったでしょうか。今回は、なぜかdigは通っているのに、curlがDNSを解決できない場合の(裏技的な)解決方法を紹介しました。

このように、consulやterraformといったインフラ周りのツール紹介から、Unity, AWS, 量子コンピューティングなど、幅広いジャンルを取り扱っています。お役に立てましたら、いいね, フォローなどよろしくお願いします！！
【EC-CUBE】XserverでEC-CUBE会員ランクプラグイン導入時のエラー解決方法

## はじめに

XserverでEC-CUBEを簡単インストールして会員ランクプラグイン（CustomerRank42）を導入しようとした際に発生するエラーの解決方法を紹介します。このエラーは、PHP拡張モジュール「sodium」が不足していることが原因で発生します。

## 発生したエラー

会員ランクプラグインをインストールしようとすると、以下のようなエラーが表示されます：

```
**************** CustomerRank42 ****************
<warning>A script named compile would override a Composer command and has been skipped</warning>
<warning>A script named auto-scripts would override a Composer command and has been skipped</warning>
<warning>A script named installer-scripts would override a Composer command and has been skipped</warning>
[12.1MiB/4.28s] ./composer.json has been updated
[13.5MiB/4.32s] Running composer update ec-cube/customerrank42 --with-dependencies
[16.7MiB/4.33s] Loading composer repositories with package information
[17.7MiB/9.11s] <warning>Dependency ec-cube/plugin-installer is also a root requirement. Package has not been listed as an update argument, so keeping locked at old version. Use --with-all-dependencies (-W) to include root dependencies.</warning>
[18.0MiB/9.12s] Updating dependencies
[19.9MiB/9.14s] Your requirements could not be resolved to an installable set of packages.
[19.9MiB/9.14s] 
  Problem 1
    - lcobucci/jwt 5.3.0 requires ext-sodium * -> it is missing from your system. Install or enable PHP's sodium extension.
    - league/oauth2-server-bundle v0.5.0 requires league/oauth2-server ^8.3 -> satisfiable by league/oauth2-server[8.5.4].
    - ec-cube/api42 4.3.1 requires league/oauth2-server-bundle ^0.5 -> satisfiable by league/oauth2-server-bundle[v0.5.0].
    - league/oauth2-server 8.5.4 requires lcobucci/jwt ^4.3 || ^5.0 -> satisfiable by lcobucci/jwt[5.3.0].
    - ec-cube/api42 is locked to version 4.3.1 and an update of this package was not requested.
```

## 結論

**解決方法：composer.jsonから`"ec-cube/api42": "^4.3",`の行を削除するだけ**

XserverでEC-CUBEに会員ランクプラグイン（CustomerRank42）を導入しようとした際に発生するエラーは、composer.jsonファイルから不要なAPI機能の依存関係を削除することで簡単に解決できます。


## 問題の原因

エラーメッセージを読み解くと：

1. `lcobucci/jwt 5.3.0` というパッケージが `ext-sodium`（PHP Sodium拡張）を必要としている
2. この拡張モジュールがシステムにインストールされていない
3. 依存関係の連鎖：
   - `ec-cube/api42` が `league/oauth2-server-bundle` を必要とする
   - それが `league/oauth2-server` を必要とする
   - さらに `lcobucci/jwt` を必要とする
   - 最終的に `ext-sodium` が必要になる

## 解決方法

Xserverでは一般的にPHP拡張モジュールを自分でインストールすることはできませんが、この問題には簡単な解決方法があります。

### 解決方法：composer.jsonからec-cube/api42を削除する

1. EC-CUBEのルートディレクトリにある `composer.json` ファイルを開きます
2. 以下の行を見つけて削除します：
   ```
   "ec-cube/api42": "^4.3",
   ```

## なぜこれで解決するのか？

EC-CUBEのAPI機能を使用していない場合、`ec-cube/api42` パッケージは不要です。このパッケージを削除することで、Sodium拡張モジュールに依存する依存関係のチェーンを断ち切ることができます。会員ランクプラグインは直接この機能に依存していないため、API機能を削除しても問題なく動作します。

## 注意点

- EC-CUBEのAPI機能（REST API）を使用している場合は、この方法は適用できません
- API機能を使用している場合は、Xserverにサポートチケットを送信して、sodium拡張モジュールの有効化を依頼するか、別の方法を模索する必要があります

## まとめ

Xserver上でEC-CUBEの会員ランクプラグイン（CustomerRank42）をインストールする際に発生するエラーは、不要なAPI機能の依存関係を削除することで簡単に解決できます。EC-CUBEのAPI機能を使用していない場合は、composer.jsonから`"ec-cube/api42": "^4.3",`を削除するだけで問題が解決します。

この方法でエラーなくプラグインがインストールでき、会員ランク機能を使用できるようになります。

## 参考
https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=thread&topic_id=28865&forum=10&post_id=114983#forumpost114983
AIで「いい感じのUI」を作るためのPrompt集サイトを作ってみた：UIPrompt.art

# AIで「いい感じのUI」を作るためのPrompt集サイトを作ってみた：UIPrompt.art

こんにちは、日本でエンジニアをしている○○です。  
今日は、最近作ったちょっと面白いツール「[UIPrompt.art](https://uiprompt.art)」を紹介させてください。
![37f07187-91c5-4ccf-8db0-b7940d92b646.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4059730/1a043766-c0d6-4dc9-ac9d-02748dadba13.png)

## 背景：AIでUIを作るときのもやもや

最近、AIを使ってプロトタイプや小さなツールを作る機会が増えてきました。  
機能や構成は比較的うまく指示できるようになってきたのですが、「UIをいい感じにしてほしい」となると、  
いつも「おしゃれにして」「洗練された感じで」といった、ざっくりした言葉しか出てこず…。  
結果的に、生成されるUIもどこか微妙で、満足できないことが多かったんです。

## 気づき：デザインには「キーワード」が効く

そんな悩みを、たまたま知り合いの大手企業で活躍されているUXデザイナーの方に相談してみました。  
すると、「今のデザイントレンドって、実は結構“型”があるよ。  
その“型”を表すキーワードをちゃんとPromptに入れてあげると、AIの出力もグッと良くなるよ」とのアドバイスをもらいました。

なるほど！と思い、試しに以下のようなキーワードをPromptに加えてみたんです：

- `Microsoft Fluent Design`
- `minimalist style`
- `neo-brutalism`
- `material design`

すると、UIの質が一気に向上。明らかに「それっぽく」なるんです。  
このとき、「あ、これは“知ってる人は得する系のノウハウ”だな」と感じました。

## 解決策：UI Promptを気軽に探せるサイトを作ってみた

そこで、「自分の代わりに、いい感じのPromptを集めておいてくれるサイトがあれば便利だな」と思い、  
**UIPrompt.art** というサービスを作ってみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4059730/a3e831af-f6d3-4bbc-b391-c011812e0a52.png)


このサイトでは、以下のようなことができます：

- AIで生成された「見た目の良いUI」サンプルを一覧で見る  
- それぞれのUIに使われたPromptを確認できる  
- 気に入ったスタイルがあれば「同じスタイルのPromptを生成」ボタンをワンクリック

そのPromptを使って、たとえば **Claude** や **Cursor**、**Lovable.so**、**bolt.new** などに渡すと、  
なかなか良い感じのWeb UIを提案してくれます。

## 最後に

デザインって、どこか“センス”の世界のように感じられがちですが、  
AI時代の今、**適切な言葉で指示すること**がとても大事なんだと実感しました。

UIPrompt.artはまだまだシンプルな仕組みですが、  
「AIにもっと良いUIを作ってもらいたい」「Promptの言い方に困っている」という方の助けになれば嬉しいです。

よければぜひ使ってみてください！  
👉 [https://uiprompt.art](https://uiprompt.art)
Firefox 初期設定 メモ

Sidekickではなぜかあらゆるcloudflareの認証が通らなくなってますね．
人間であることが否定されていて悲しい気持ちになっています．

Firefoxは個人的にめっちゃ好きなブラウザですが，メモリ消費が激しかったのでしばらくsidekickにしていました．

しかし今回PCを新調してメモリの心配がなくなったのに加え，人間としての自尊心を取り戻すべく，Firefoxに戻したいと思います．せっかくなので初期設定を未来の自分のためにメモしておきたいなと．

ついでにFirefoxの良さ(カスタマイズ性の高さ)を色々な人に知ってもらえたらなと．

## Firefoxの設定
基本的な設定（「設定」でできる設定）はMozillaアカウントに保存されているから省略．

一つおすすめなのが，
プライバシーとセキュリティ → 履歴 → Firefoxに「記憶させる履歴を詳細設定する」 → Firefox の終了時に履歴を消去する

新たに「設定」が出てくるので，
□ 表示したページとダウンロードの履歴
□ 保存されたフォームの入力履歴
にチェック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3559691/032c6937-a50d-46ea-a2c9-dd6c5beabf78.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3559691/f2b77525-aa03-4481-8269-317a7593cb21.png)


<br>
<br>

次に，高度な設定で便利なものを記しておきます．
ただし,下手に変なところいじってしまうとシステムがおかしくなりかねないので変更は自己責任で．

### 高度な設定の開き方
１．アドレス欄に```about config```と入力する

２．注意画面が出てくるので「危険性を承知の上で使用する」をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3559691/1120677c-58df-49ec-9ce8-01ea37170d02.png)

検索欄に語句を入力すると設定項目がずらーっと出てくるので，値や真偽値の変更を行いたいときは右側の ```⇆``` や ペンマークをクリックする．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3559691/c686e2ae-df62-4fae-8bad-cd2d3692e7f1.png)

### 便利な設定一覧

#### ・browser.tabs.closeTabByDblclick (false → true)
タブをダブルクリックすることで閉じれるようにする．タブが増えたときなどは×ボタンを探すのも大変なので特に便利．欠点はこれに慣れるとほかのブラウザで困惑してしまうこと．

#### ・browser.tabs.closeWindowWithLastTab (true → false)
最後のタブを消してもブラウザを閉じないようにする．特にノートパソコンでタッチパッドジェスチャーにタブの生成消滅のショートカットを当ててる人におすすめ．間違えて最後のタブを消してもいちいちブラウザを開く必要がなくなる．がーっとタブを消すだけでまっさらな状態が手に入る．

→【ノートパソコンの高度なタッチパッドジェスチャーのすすめ】（気が向いたら作成）


#### ・browser.gesture.swipe.left/right (文字列を削除)
タッチパッド限定になるが，二本指スワイプでのブラウザバック/フォワードを無効化する．
横に長い資料を見る際に誤ってこの機能が発動してしまうとすごく悲しい気持ちになるのでオフにしている．ブラウザバック/フォワードは個人的に次のようにタッチパッドジェスチャーにあてると幸せになれると思っている．


→【ノートパソコンの高度なタッチパッドジェスチャーのすすめ】（気が向いたら作成）


## 拡張機能 (特におすすめ)

#### Deepl
https://addons.mozilla.org/ja/firefox/addon/deepl-translate/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search

英語の文章とかがあった時にビーッと引いてポチってするだけで翻訳が見れる．便利だよ．

#### Tabliss
https://addons.mozilla.org/ja/firefox/addon/tabliss/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search

新しいタブを開いたときにおしゃれになる．

#### uBlock Origin
https://addons.mozilla.org/ja/firefox/addon/ublock-origin/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search

みんな大好き広告ブロッカー．もうこれなしでは生きていけない．

<br>
<br>
<br>

いったんここで終わりにします．またなんか面白いもの見つけたら追記します．
話題のCursorを使った感想

目的：AIファーストといわれるCursorを使用して慣れない分野の趣味プログラムを実装してみました

投稿主：pythonはそらで書けないレベル。seleniumは触ったことない
作ったもの：いわゆるRPAでプ〇バンで新着商品の中から条件に合う商品をカートに入れてメールで通知するツール
今回のトライの目的：AIを使用したプログラミングの体感。副産物としてプ〇バンでガンプラを買うためのツールの作成

Cursorとは。ホットな話題です 2025/4現在
https://www.cursor.com/ja

# できたこと
プロンプトによりファイル、コードを生成。
　→コードは細かいところを抜かせば概ねできており、設定ファイルやReadmeまで生成。
しかも実装が進むのに合わせて適時Readmeの更新もできて本当にすごいと思う。
細かいところはサイトの設計によると思うのでそれに合わせて調整しました。
コードを書く際も日本語プロンプトで生成できる。

# よくわからないこと
途中でAIサポートの期限が切れて有料には移行しなかったけど、なんか色々使えてる。
ちゃんと公式を読んで更新します。

# 試さなかったこと
テストとかその辺。趣味優先なので楽しいことだけやるスタンスで

# すごいと思ったこと
- 上にも書いたけどコードのひな型はほとんど利用できた
- Readmeや設定ファイルまで生成してくれた上に現在の実装に合わせて更新してくれる
 ![スクリーンショット 2025-04-10 215906.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423985/d770233b-b72f-48af-8bb2-fdb90b29d65d.png)
- 行ごとのコードの説明を解説してくれる
- イテレータの中でprintとか書くと候補に要素が出てきたりとやりたいことの先回りがすごい
- 行単位適当に書いたコードの修正してくれる
- 行単位でコードを書いてくれる。前後のコードを加味して。でも時々そこまで変えないでほしいって事も
もうプロンプトを工夫していい感じのコードをちょっとずつ頑張って生成するレベルじゃないんですね...

# 副産物の説明
今までもプレ〇ンで欲しい商品をカートに入れるボットを作りたかったのですが、知見がない分野なので何となく億劫で手を出さなかった。
今回Cursorを触ってみるのによいお題目になるかと思い作成しました。
https://github.com/jsakamoto65535/prebanClawler2

### 作ったもの
- 新着ページを表示し、事前に登録したリストにマッチする商品をカートに入れる
- 実施結果をメールで送信する
　→自宅でツールを走らせつつ、職場にてメール通知があったらスマホで商品を確認し購入、不要なら破棄というワークフローを想定していたのだが...  
      　
### 勉強になったこと
- 各サイトにはクローラに守ってほしいことが書かれたrobots.txtというものがある
- 普通にseleniumでサイトにアクセスしようとするとERR_HTTP2_PROTOCOL_ERRORが返る
  →クローラは歓迎されないので偽装する必要があるらしい?
- 二段階認証に対応するのは難しい
- プレ〇ンはカートがセッション単位? → 想定していた作業フローが実現できなかった
 
### ツールの補足説明
- ツールを起動すると新着ページ表示後キー入力待ちになります→ログインしたければここで操作してください　
- しつこくリトライするとアクセスできなくなることがあります(ERR_HTTP2_PROTOCOL_ERROR)
- スケジュールモード：毎日既定の時間に動作する。無効の場合は即時実施(即時モード)します
- 即時モード：TARGET_LISTに登録されたものを全てカートに入れるまで繰り返します
- requirement.txtでのインストールは自動生成されたもので実際に期待通りインストールされているか未確認
- EMAIL_USERを指定しないとメール送信しないです。Gmail固定。不要な人はブランクで
  - メール送信の設定をする場合はアプリパスワードが必要です
    https://support.google.com/accounts/answer/185833?hl=ja
駆け出しエンジニアによるMCP解説


最近よく聞くMCP(Model Context Protocol)について現時点での理解をまとめてみました。まだ理解が浅い部分もありますが、同じように学び始めている方の参考になれば嬉しいです。何か間違いや補足があれば、教えてしただきたいです！

## MCPとは？
MCPは、AIエージェントが様々な外部ツールやAPIにアクセスする際のプロトコルを標準化・共通化したものです。簡単に言えば、AIモデルと外部システムの間のコミュニケーション方法を定義した仕組みです。現在のAIエージェントは単なるテキスト生成だけでなく、以下のようなタスクが実行できます。

•　Webの検索
•　APIの呼び出し
•　外部サービスとの連携
•　ファイルの読み書き

などなど。これらの機能を実現するには、AIモデルが外部ツールと連携する必要がありますが、それぞれのツールやプラットフォームが独自の方法で実装されていると、開発が複雑になり、互換性の問題が発生します。

#### 従来の問題点
•　実装の不統一: OpenAI、Anthropic、Mistral、Cohere、LlamaなどのLLMプロバイダーが独自のツール呼び出し方法を採用
•　開発コストの増加: 異なるモデルごとに異なる実装が必要になる
•　ベンダーロックイン: 特定のAIプラットフォームに依存する開発になりがちで、移行コストが高い
•　モデル間の機能の差異: ツールの呼び出し方や能力が異なり、一貫した体験を提供しにくい

MCPはこれらの問題を解決するための標準プロトコルとして登場しました。いわば「AIツールのためのREST API」のような位置づけと言えるかもしれません。

## MCPの主な特徴
現時点での理解では、MCPには以下のような特徴があります：

1. 標準化されたインターフェース: AIモデルがどのようにツールを呼び出すかの形式を統一
2. ツール定義の共通フォーマット: ツールの機能や引数などを記述する方法を標準化
3. 相互運用性: 異なるAIモデルやプラットフォーム間での連携を容易に
4. 拡張性: 新しいツールやAPI機能を簡単に追加可能
5. 一貫性のあるエラー処理: エラーの返し方や例外処理の方法を統一
6. セマンティックバージョニング: プロトコルの変更を明確に管理し後方互換性を維持

## まとめ
MCPは、AIエージェントが外部のツールやAPIと連携するための共通プロトコルとして、今後のAI開発において重要な役割を果たすと考えられます。標準化されたインターフェースによって、異なるプラットフォーム間での互換性が向上し、開発の効率化が期待できます。
特に以下のような点で大きな価値があります：

•　エコシステムの拡大: サードパーティ開発者がより多くのツールを提供しやすくなる
•　移植性の向上: 異なるAIプラットフォーム間での切り替えが容易になる
•　開発コストの削減: モデルごとに異なる実装を維持する必要がなくなる
•　イノベーションの加速: 標準化により、基盤部分ではなく新機能開発に集中できる

今後もMCPの動向に注目し、実際の開発プロジェクトでの適用事例や新たな展開について、さらに理解を深めていきたいと思います。
いまさらながらubuntuさわってみたｗ

ゲーミングパソコンを買い替えたので、
今まで使っていたゲーミングパソコン（ノート）をubuntsにしてみた。
USBのDVDドライブでインストールメディア作ってやりました。

biosで記憶領域の確保されているところとばしたり、
電源の設定をいじったり色々ありましたが無事ubuntuインストールしました。

![IMG20250321212756.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4053675/bb26c404-fd62-4c23-a8c4-35ee01d1193e.jpeg)


まず引っかかったのがこれ、エラーのでていたのwindowsでコマンド。

```
powercfg /hibernate off
```

NTFSでパーテーション残っていて、消せないよって言ってたので
biosの設定で設定変えました。

それでもubuntuが上がってこなくて調べたら、ライブDVDの起動が遅い問題。

:::note warn
◆回避策
GRUB メニューから
Try Ubuntu with Japanese input support (2番め) を選び、
[E]を押す
　→　起動オプション編集画面

[↓]キーで
        linux        /casper/ ……
https://forums.ubuntulinux.jp/viewtopic.php?pid=124570#p124570
で始まる行（4行目、この行は4段にわたっている）に移動し
(戻るのは[↑])、
[→]キーで次の部分(splashの後)にカーソルを動かし(戻るのは[←])
  …… splash --- ……
という部分に fsck.mode=skip を追加します。

  …… splash fsck.mode=skip --- ……
としてから[F10]キーを押すと起動が始まります。
約10分でデスクトップ画面が起動しました。
(上の回避策をしない場合はずっと待ってましたｗ)
:::

これでようやくインストールできました。
非同期処理をもっと簡単に言い換え。わかりやすく理解（説明）したかった

# 記事執筆の理由
非同期という言葉、ビミョーにわかりづらい。
ちゃんと理解しようとした（今更？）

# まず、同期と非同期は、なんの話？
単純に、**処理の順序**の話らしいが、
自分は**待機の話**と理解したほうがわかった。


# 同期とは
処理の順序が固定であるということ。
**待機がない**。


```:朝の同期処理（固定順、対木梨）
console.log("1: 歯を磨く");
console.log("2: 顔を洗う");
console.log("3: 朝ごはんを食べる");
```


# 非同期とは
- 「ある処理が終わるのを待たずに、次の処理に進む」→**待機がある**
- **あくまで動く処理は一つ**
→**並列**とは違う
- **待機**とセットで、**再開** がある

# コードでいったら
await は 「待機の開始地点」 であり、
処理を一時中断して、Promiseの完了を待つことを意味する

```
1: start
　　↓
2: await              ← ★処理中断の意味（この時点で Promise で pending）
　　↓
3: promise resolved   ← Promiseが解決したら、次（fulfilled）
　　↓
4: after await        ← awaitが再開される
```

# 参考コード
```typescript:ts
async function taskA() {
  console.log("A1: start");

  await new Promise((resolve) => {
    setTimeout(() => {
      console.log("A2: timer done (resume)");
      resolve("result");
    }, 2000); // ←★この2秒の間、taskAは中断される
  });

  console.log("A3: after await"); // ←★ここで再開される
}

async function taskB() {
  console.log("B: taskB runs during taskA's await");
}

async function main() {
  console.log("main: start");

  // taskAの非同期開始（ただし中断ポイントありのため、止まる。）
  const aPromise = taskA(); 
  
  //taskBの非同期開始
  await taskB();
  //await taskB() の await = taskB() が返す Promise の「完了（fulfilled）」を待っている
  //が、Promiseがないので即時実行して終わり

  await aPromise; // taskAの終了を待つ

  console.log("main: done");
}

main();

```
```:出力
main: start
A1: start
B: taskB runs during taskA's await
A2: timer done (resume)
A3: after await
main: done

```

```rust:rust
use tokio::time::{sleep, Duration};

async fn task_a() {
    println!("A1: start");

    sleep(Duration::from_secs(2)).await; // ★ここで中断（非同期の待機）

    println!("A2: resumed after await");
}

async fn task_b() {
    println!("B: runs while task_a is sleeping");
}

#[tokio::main]
async fn main() {
    println!("main: start");

    let a = task_a(); // 非同期タスクを作る（まだ実行されていない）
    
    // 0.5秒後に task_b を走らせる（task_a の sleep 中）
    tokio::spawn(async {
        sleep(Duration::from_millis(500)).await;
        task_b().await;
    });

    a.await; // task_a を待つ（再開される）

    println!("main: done");
}

```
```:出力イメージ
main: start
A1: start
B: runs while task_a is sleeping   ←← task_a の sleep 中に実行される
A2: resumed after await
main: done
```
iTunes Search APIを使ってバンドルIDからiOSアプリ情報を取得する方法

[iTunes Search API](https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/iTuneSearchAPI/)を使って、iOSアプリのバンドルIDからアプリ情報を取得する方法をご紹介します。

Androidアプリの場合、アプリに関する情報は[Google Playからインストール数などの情報を取得 - Qiita](https://qiita.com/h-nimrod/items/038576d86843ad57971e)の記事で紹介したように google-play-scraper を使えば情報を取得できます。

https://qiita.com/h-nimrod/items/038576d86843ad57971e

iOSアプリの場合は、iTunes Search APIを利用することで評価数やバージョン情報などの情報を取得できます。

### バンドルIDで検索する例

例えば、バンドルIDが [com.hnimrod.loancalc](https://apps.apple.com/jp/app/%E3%81%8B%E3%82%93%E3%81%9F%E3%82%93%E3%83%AD%E3%83%BC%E3%83%B3%E8%A8%88%E7%AE%97/id6739606505?platform=iphone) のアプリに対して以下のようにすることで、アプリ情報を取得できます。

```bash
curl "https://itunes.apple.com/search?bundleId=com.hnimrod.loancalc"
```

### Pythonで実行する例

Pythonのrequestsライブラリを使って、アプリ名や評価数を取得する場合の実装例は次のようになります。

```python
import requests

bundle_id = "com.hnimrod.loancalc"
url = f"https://itunes.apple.com/lookup?bundleId={bundle_id}&country=JP"

response = requests.get(url)
data = response.json()

if data['resultCount'] > 0:
    result = data['results'][0]
    print("バンドルID:", bundle_id)
    print("アプリ名:", result['trackName'])
    print("評価数:", result.get('userRatingCount', 'N/A'))
    print("平均評価値:", result.get('averageUserRating', 'N/A'))
else:
    print("アプリが見つかりませんでした。")
```

実行例

```
バンドルID: com.hnimrod.loancalc
アプリ名: かんたんローン計算
評価数: 2
平均評価値: 5
```

iTunes Search APIを使えば、特定のバンドルIDからアプリ情報を手軽に取得できます。競合調査、ストア情報の自動取得、データ分析など、さまざまな用途に活用できる便利なAPIです。
【無料！簡単！賢い！】Claude MCPを試してみた

# はじめに
少し前から注目されているClaude MCPを試してみました！

https://www.claudemcp.com/docs

# 環境情報
- Mac：Apple M2
- node --version：v23.5.0
- Claude：無料版

# 試してみた

※Claudeは無料版だと1日あたりの利用回数に制限があるのでご注意ください

Claudeに、デスクトップにかぐや姫の冒頭三行をテキストファイルとして作成するように命令をしてみると、

![スクリーンショット 2025-04-12 18.23.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/4b41d2e7-b37f-450b-a2c4-818661e37d3f.png)

なんと作成してくれました！:open_mouth:

![スクリーンショット 2025-04-12 18.25.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/c416c6f4-1c7e-4f6a-9e21-616b03c7384e.png)


![スクリーンショット 2025-04-12 18.35.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/cdd47fd6-bdc3-4e93-8b12-6e9439573f28.png)


他にもこのようなことができるみたいです


![スクリーンショット 2025-04-12 18.47.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/1c7992a5-6fc5-4b17-a34b-36f781193a5f.png)




# MCPを試すまでの手順

### Claude Desktop をダウンロード

https://modelcontextprotocol.io/quickstart/user

ダウンロード後はチュートリアルに従い、設定ファイルを編集します。
この設定により、Claudeを通じてPC内の操作が可能となります。

```
{
    "mcpServers": {
      "filesystem": {
        "command": "npx",
        "args": [
          "-y",
          "@modelcontextprotocol/server-filesystem",
          "/Users/username/Desktop",
          "/Users/username/Downloads"
        ]
      }
    }
  }
```

### Node.jsのインストール

私はMacなので、ターミナル上でインストールされていることを確認しました。

```
% node --version
```


# おわりに
公式サイトを見ていると他にもできることがあるみたいなので触ってみたいですね
【初学者目線】なぜDockerを使うのか？

## はじめに

最近、Linuxの概念や仮想化技術について学ぶ中で、「Docker」に興味を持ちました。

最初は「Docker＝仮想化ソフト」だと思っていたのですが、調べてみるとそれだけではなく、抽象的な説明が多くて、なかなかピンときませんでした。

さらに調べていくうちに、Dockerは**長い技術の歴史の上に成り立っている**ことを知りました。

そこで、まずは背景となる「なぜDockerが必要とされるようになったのか？」を整理することから始めました。

---

## 1. 通常のサーバー環境（共有リソース）

普通、プロセス・ファイルシステム・ネットワークはOSの共有リソースとして、複数のアプリが使っている。
たとえば、AWSの1つのインスタンス上に `php`、`nginx`、`mysql` を全部インストールすると、それぞれが同じOS環境を共有することになる。

このとき、例えば `php` のバージョンを変更すると、それに依存している `nginx` との連携がうまくいかなくなったり、他の構成に思わぬ影響が出る可能性がある。

こういった不具合は、すべてのアプリが**同じリソース（プロセス空間、ファイル構成、ネットワーク）を共有している**ことが原因。

---

## 2. インスタンスを分けるという解決策

構成の衝突を避けたい場合、いっそのことインスタンスを分けるという方法がある。
例えば：

- EC2 A → nginx
- EC2 B → php
- EC2 C → mysql

この方法なら、各環境は完全に分離されるため、構成ミスや依存関係のトラブルは少なくなる。

しかしその一方で：

- インスタンス間の通信には、ポート開放やセキュリティ設定が必要
- IPアドレスやDNSの管理も増える
- 起動の順番、依存関係の制御も手動で行う必要がある

つまり、**運用が複雑になってしまう。**

---

## 3. Dockerを使った構成

そこで登場するのが Docker。

Docker を使えば、同じインスタンスの中に `php`、`nginx`、`mysql` をそれぞれ**独立したコンテナ**として分けて動かすことができる。

コンテナは以下のような特徴を持ちます：

- **独立したプロセス空間・ファイルシステム・ネットワーク**を持つ
- 他のコンテナとリソースが干渉しない（バージョン衝突が起きない）
- `docker network` を使えば、**同一ネットワーク内で簡単に通信できる**
- `docker-compose.yml` を使えば、**依存関係や起動順も定義して一括起動できる**

---

## 4. まとめ

| 構成方法 | メリット | デメリット |
| --- | --- | --- |
| 1台に全部入れる | 手軽に始められる | 構成衝突・再現性が低い |
| インスタンス分割 | 環境の独立性が高い | 管理が煩雑・コストが高い |
| Docker | 分離・連携・再現性のバランス◎ | Dockerの学習コスト（慣れが必要） |

Docker を使えば、**バージョン管理も、起動順の制御も、再現性のある環境構築も、一気に解決**できる。
Xserver上でWordPressをヘッドレスCMS運用するときにREST APIが機能しない件

# はじめに
最近弊社では、WordPressを「ヘッドレスCMS」として利用し、フロントエンドにはNext.jsやNuxtなどのモダンなフレームワークを採用するケースが増えてきています。  
このような構成では、WordPressのREST APIを通じてデータを取得するのが基本ですが、**Xserver上では初期設定のままだとREST APIが使えず、想定通りに動作しない**という落とし穴がありました。

そこで今回は、その原因と具体的な解決策についてまとめておきたいと思います。

# 前提環境

- サーバー: Xserver  
- CMS: WordPress（ヘッドレス構成）  
- フロントエンド: Next.js  
- データ取得: REST API（例：`https://example.com/wp-json/wp/v2/posts`）

# 発生した問題

WordPressのREST APIエンドポイントにアクセスしようとしたところ、以下のようなエラーが返されました。

- `403 Forbidden`  
- `404 Not Found`

サーバーやAPIの設定ミスを疑いましたが、原因は別のところにありました。

# 原因
Xserverでは、**セキュリティ対策として一部のREST APIエンドポイントへのアクセスが制限されている**ことがあります。

特に、以下のようなケースで制限がかかっていました。

- `.htaccess` によるREST APIやXML-RPCのブロック  
- WAF（Web Application Firewall）の影響で不正アクセスと判定される  
- 「REST APIの国外アクセス制限」が有効になっている  

# 解決策

### 1. `.htaccess` の設定確認

まずは、WordPressルートディレクトリにある `.htaccess` に、以下のような記述がないか確認しましょう。

```htaccess
<Files "xmlrpc.php">
    Order Deny,Allow
    Deny from all
</Files>

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_URI} ^/wp-json/ [NC]
    RewriteRule .* - [F,L]
</IfModule>
```
これらの設定はREST APIやXML-RPCへのアクセスをブロックしています。
ヘッドレス構成でREST APIを使いたい場合は、該当部分をコメントアウトするか削除しましょう。

### 2. WAF設定の確認
Xserverの「サーバーパネル」から、以下の手順でWAF（Web Application Firewall）の設定を確認・変更できます。

1. サーバーパネルにログイン  
2. 「WAF設定」へ進む  
3. 対象ドメインのWAFを**一時的に無効化**  
4. REST APIへのアクセスを再度確認  

:::note warn
セキュリティ面の懸念があるため、**必要に応じてWAF設定を微調整**しましょう。
:::

### 3. REST APIの国外アクセス制限とCIツールの通信エラーについて
Xserverの「WordPressセキュリティ設定」には、**REST APIへの国外IPアドレスからのアクセスを制限する機能**があります。  
この機能が有効になっていると、以下のような状況でAPI通信が失敗します。

- GitHub Actionsでのビルド時にWordPressからデータ取得できない  
- VercelやNetlifyなど海外ホスティングサービスからのREST APIアクセスが拒否される  
- `403 Forbidden` や `cURL error 28` が発生する

#### 制限の解除手順

1. [Xserverサーバーパネル](https://www.xserver.ne.jp/login_server.php) にログイン  
2. 「WordPressセキュリティ設定」をクリック  
3. 対象ドメインを選択  
4. 「REST API アクセス制限」タブを開く  
5. 「国外IPアドレスからのアクセス制限」を **[OFF] に設定**  
6. 「設定変更」ボタンをクリックして保存  

この機能はセキュリティ強化には有効ですが、CI/CDやJamstack構成を採用するプロジェクトでは支障となる場合があります。  
セキュリティを維持しつつ、必要なサービス（GitHub、Vercel、Netlifyなど）だけをホワイトリストに追加する機能は現時点で提供されていないため、**一時的または恒久的にOFFにする判断**が求められます。

#### 補足：国外アクセス制限を外す場合の追加のセキュリティ対策案
国外制限を解除する代わりに、以下のようなセキュリティ対策の導入も検討すると良いと思います。

- Basic認証やAPIキーによるアクセス制限  
- プラグインによる不要なRESTエンドポイントの無効化  
- `functions.php` によるREST APIアクセスのカスタマイズ制御  

これらを組み合わせることで、国外アクセスを許可しても一定のセキュリティを保つことが可能です。

# さいごに
桜の季節もあっという間に過ぎてしまいそうですね。
開発でも遅れを取らないよう、私自身も引き続きスピード感を持って取り組んでいきたいと思います！
[Git] "This repository moved" エラーが発生した際の対処方法


## In a nutshell
リモートリポジトリに `git push` した際，「This repository moved」というメッセージが出た場合は，GitHub上でリポジトリ名が変更されたことによるリダイレクトが原因である．このメッセージを回避し，今後も安定して操作を行うためには，`git remote set-url` コマンドで新しいURLに更新すれば良い．


## はじめに
Gitを利用していた際に遭遇したエラーについて，備忘録として，以下に記述した．本記事で扱うのは，`git push` 時に表示された「This repository moved」というリダイレクトメッセージである．これについて原因の特定から対処法を記述した．特に，GitHubでリポジトリ名(特に大文字・小文字)を変更した場合にこのような現象が発生する．
但し，以下の記事について，ユーザー名は`my_USER_name`，レポジトリ名は`my_REPO_name`とした．


## 予想される読み手
- Git及びGitHubについて初学者である
- Gitを実務で使い始めたが，まだエラー対応に不慣れである
- リポジトリ名変更後に不穏なメッセージを見て戸惑った


## 生じた現象
Gitのリモートリポジトリへ `push` しようとしたところ，以下のようなメッセージが表示された．
最終的には正常にpushできているように見えるが，リダイレクトに関するメッセージは出力されている．

```bash
remote: This repository moved. Please use the new location:
remote:   git@github.com:my_USER_name/my_repo_name.git
```


## 原因
### 直接的な原因
リモートリポジトリのURLが変更されたため，Gitが旧URLから新URLへのリダイレクトを自動で行っていた．

```bash
git@github.com:my_USER_name/my_REPO_name.git # 旧URL
git@github.com:my_USER_name/my_repo_name.git # 新URL
```

※上記の通り，大文字・小文字の違い(`REPO` -> `repo`)が原因でGitHubが新しいURLにリダイレクトしていた．


### 間接的な背景
GitHub上では，リポジトリ名の大文字・小文字も区別されるが，URLとしては見た目が似ているため，変更されたことに気付きにくい．また，GitHubは旧URLから新URLへ自動でリダイレクトしてくれるが，ローカルのリモート設定自体は古いまま残る．


## 対処法

リモートリポジトリのURLを新しいものに更新する．

### 手順

1. 現在のリモート設定を確認

```bash
git remote -v
```

出力例:

```bash
my_REPO_name  git@github.com:my_USER_name/my_REPO_name.git (fetch)
my_REPO_name  git@github.com:my_USER_name/my_REPO_name.git (push)
```

2. 新しいURLに設定を更新

```bash
git remote set-url my_REPO_name git@github.com:my_USER_name/my_repo_name.git
```

3. 再度確認

```bash
git remote -v
```

更新後の出力:

```bash
my_REPO_name  git@github.com:my_USER_name/my_repo_name.git (fetch)
my_REPO_name  git@github.com:my_USER_name/my_repo_name.git (push)
```

この状態になれば，以降の`push`時にリダイレクトメッセージは表示されなくなる．


## 補足
### なぜリモートURLの変更に気づきにくいのか

GitHubでは，リポジトリ名の変更を行っても旧URLからの自動リダイレクトが有効になるため，表面的には push/pull は成功する．しかし，以下のような問題が起こる可能性がある．

- 毎回 push 時にリダイレクトメッセージが出てログが煩雑になる
- チームメンバーが新しいURLを知らずに作業してしまう
- CI/CDツールがリダイレクトを正しく処理できないことがある


### リモート名も統一したい場合

もしリポジトリ名そのものを変更した場合，リモート名(`origin`など)もあわせて整理するとわかりやすい．これにより他のチュートリアルやツールの記述とも整合性が取れる．

```bash
git remote rename my_repo_name origin
```


### その他
- `git remote show <リモート名>` で，リモートの詳細(URLやトラッキング情報)を確認できる．
- URLが変わった理由を確認したい場合は，旧URLにアクセスしてリダイレクトされるかをブラウザで確認するとよい．
- GitHubではリポジトリ名変更の明示的な履歴は表示されないため，Issueやコミットログで背景を探るとよい．


## Summary

- GitHubでリポジトリ名を変更すると，旧URLは自動で新URLにリダイレクトされる．
- しかし，ローカルの設定(`git remote`)は更新されない．
- 不要なリダイレクトを避け，明確な管理を行うためには，`git remote set-url`でURLを更新することが望ましい．


## References

[GitHub Docs - Repositories > Create & manage repositories > Renaming a repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/renaming-a-repository)

[Git Documentation - Documentation > Reference > remote](https://git-scm.com/docs/git-remote)
【読書感想】「原因」と「結果」の法則

ランニングしながらAudibleで聴いた本の感想です。
本のまとめというより、自分が心に残ったことを3つだけ書いてます。
とりあえず思ったことをメモするのが大切と思い、なるべく30分以内で書き上げています。

# 読んだ本

「原因」と「結果」の法則
ジェームズ アレン (著)

有名な自己啓発本です。一般的には「名著」の分類かなと思います。ページ数が少なく読みやすいため、オススメしやすいのかなと思います。
個人的には、正しいことを言っていると思う面もありつつ、根拠に乏しいため若干宗教っぽく、、微妙かなと思いました。（個人的満足度１／３、一般的なおすすめ度２／３）
筆者が英国の哲学者とのことで、英国映画っぽい「小綺麗さ」がありましたが、私は「世の中、綺麗事だけでは納得できない・・」などと思ってしまい、好みで無かった可能性もあります

# 心に残ったこと

## 環境が人を作るのではなく、人間の思いが行動となり、環境を作る

「夜と霧」や最近の風潮と真逆のことを言っています。

何か悪いことが起きると「環境が悪かった」と思いがちですが、筆者は、**その人の清らかな心・行動が周囲の環境を変えていくので、周囲の環境は結果として現れる**と言っています。
例えば「低所得で過酷な労働をしている人でも、清らかな心を身につければ、現状の環境が肌に合わなくなり、自然に良い環境に行こうとする」ということを述べています。
また、「病気や怪我は結果であり、人間の思いが原因となっている」というようなことも述べています。

これらの主張は、ある程度自己決定ができる大人になってくると正しい面も少しありますが、かなり自己責任論であるのと、やはり、環境・初期状態というのはその人を決める大きな因子となりうるため、30%くらいしか同意できないかな・・・と思いました。
例えば、アフリカの小さな田舎で生まれて一流の大学に行くのと、東京の23区で生まれて一流の大学に行くのでは、どちらの方が努力が必要か、結果として確率が高いのかは明らかでしょう。

## 目標がないと人生に漂流してしまう

**目標を持って生きよう、さらに、目標を持ったら一直線の道筋を描くことが大切**、ということを述べています。
ここは個人的には正しく、また表現が良いなと感じました。

ただ、「目標へはそれ相応の自己犠牲も必要」とも述べていて、個人的には（全員が全員体力オバケじゃないことを忘れないでほしい？）と思いました。

## 清らかな心の人は苦悩が無い

苦悩や不満に満ちている＝清らかでない、ということを述べていました。
（もうここまで行くと宗教っぽいのですが・・）
個人的には、30%くらいは同意できるものの、「苦悩がない状態」は、「本当に苦悩がない」と「苦悩に対して痛覚がないから苦悩がない」の2通りあると思っており、その切り分け方法が気になりました。
[Linux][command] テキスト処理_統計_wc

# wcコマンド
~~~terminal:
# wc [オプション] [ファイル名]
~~~

| オプション | 由来 | 説明 |
|:--|:--|:--|
| default | word count | - 指定したファイルの行数・単語数・バイト数を表示 |
| `-l` | lines | - 行数のみを表示 |
| `-w` | words | - 単語数のみを表示 |
| `-c` | bytes | - 文字(バイト)数のみを表示 |



# Ping-t
- [3265_wc -l](https://mondai.ping-t.com/question_subjects/31/question_sessions/32311097/progressing_questions/495045367)
- [3274_wc -c](https://mondai.ping-t.com/question_subjects/31/question_sessions/31869840/progressing_questions/488361810)
- [35566_wc -w](https://mondai.ping-t.com/question_subjects/31/question_sessions/30892897/progressing_questions/473298361)
HTMLにしてvoidエレメント使い

HTML　のvoid　要素は閉じタグ（closing tag）が必要ない要素のことです。中にコンテンシ　を　いれることはできません。
例
＜br＞
＜col＞
＜img＞
＜hr＞
＜input＞
＜link＞
<source>

例えば
<img　src　="image.png"　alt ="image name">
<br>
it s abreak line
<hr>
its a make horizontal line many colors
多分このぐらいで覚えていけば自分だと思います。
WSFのすすめ（VBScriptが書ける人向け）

VBScript が 2027年には廃止（Windowsから削除）されるということで戦々恐々としている御仁もおられるかもしれないが安心して欲しい。WSH（Windows Script Host）そのものが廃止されるわけではないので、JScript や WSF で VBScript の代替が可能だ。

もともと、VBScript は配列の機能が弱く、文字列の囲みもダブルクォーテーションしか使えないのでコードが冗長になりやすいという欠点があった。この機会に JScript（≒ Javascript）に移行して、Javascriptライフを楽しもう。これからは Javascript の時代だ。（今更だが）

下記サイトに記載されていたWSFコードの解説がわかりやすいのでテンプレとして使えると思う。

[**wsh（.wsf、Windows Script File）のスクリプトを育てる（１）**](https://hs20230321.hatenablog.com/entry/2023/04/02/060848)

```xml:
<?xml version="1.0" encoding="UTF-8" ?>
<package>
    <job id="start">
        <script type="text/jscript">
            var wShll = new ActiveXObject("WScript.Shell");
            wShll.Run('cmd /k cscript //nologo //job:main ' + WScript.ScriptFullName, 1, false);
        </script>
    </job>
    <job id="main">
        <script type="text/jscript">
            WScript.Echo("hello!!");
        </script>
    </job>
</package>
```

上記のコードをテンプレとしてクリップボードにコピーするWSFコードは以下のようになる。
※タグ記号（<）はエスケープ（\&lt;）しないとエラーになるので要注意

```xml:
<?xml version="1.0" encoding="UTF-8" ?>
<package>
    <job id="start">
        <script type="text/jscript">
            var wShll = new ActiveXObject("WScript.Shell");
            wShll.Run("cmd /k cscript //nologo //job:main " + WScript.ScriptFullName, 1, false);
        </script>
    </job>
    <job id="main">
        <script type="text/jscript">
            var tb = Array(5).join(' ');
            var tb2 = tb + tb;
            var tb3 = tb + tb2;
            var Yn = '\r\n';
            var lt = '&lt;'

            var codeStr = lt + '?xml version="1.0" encoding="UTF-8" ?>';
            codeStr += Yn + lt + 'package>';
            codeStr += Yn + tb + lt + 'job id="start">';
            codeStr += Yn + tb2 + lt + 'script type="text/jscript">';
            codeStr += Yn + tb3 + 'var wShll = new ActiveXObject("WScript.Shell");';
            codeStr += Yn + tb3 + 'wShll.Run("cmd /k cscript //nologo //job:main " + WScript.ScriptFullName, 1, false);';
            codeStr += Yn + tb2 + lt + '/script>';
            codeStr += Yn + tb + lt + '/job>';
            codeStr += Yn + tb + lt + 'job id="main">';
            codeStr += Yn + tb2 + lt + 'script type="text/jscript">';
            codeStr += Yn + tb3 + 'WScript.Echo("hello!!");';
            codeStr += Yn + tb2 + lt + '/script>';
            codeStr += Yn + tb + lt + '/job>';
            codeStr += Yn + lt + '/package>';

            var wShll = new ActiveXObject("WScript.Shell");
            wShll.Exec("clip").StdIn.Write(codeStr);
            WScript.Echo("WSFベースコードをコピーしました！");
        </script>
    </job>
</package>
```

JScript の部分だけを拡張子 .js で別ファイルに書き出すこともできるが、その場合はファイルの文字コードを Shift-JIS で保存する。

---

＜参考記事＞
[同じ文字列を繰り返す](https://qiita.com/QUANON/items/d52c60026cfc79acb5e9)
TypeScript:5.オブジェクト化

# そもそもオブジェクト化とは？
「複数のバラバラの情報を1つの意味のある”もの”としてまとめる」ことで操作や管理を楽にするテクニック

## 今回を例にすると
### 食べ物（Food）という”1個の意味あるもの”が持つべき情報
element：HTMLの要素
score：数字（得点）
selected：選ばれているか？（状態）

```typescript:food.ts
type FoodItem = {
    element: HTMLDivElement;
    score: number;
    selected: boolean;
}
```


この３つを１つのセットでFoodItemとする。
このようにまとめてオブジェクトにすることで分かりやすく安全に管理できる。
下記は具体的に情報を設定したコードである
```typescript:food.ts
｛
    element:<div class="food">...</div>,
    score:5,
    selected:false
｝
```


さらにそのオブジェクトが複数あるときは下記のように配列で管理する
```typescript:food.ts
const foodItems: FoodItem[] = [
  { element: ..., score: 5, selected: true },
  { element: ..., score: -3, selected: false },
  ...
];
```

## オブジェクト化のメリット
・意味のある単位で扱える
　　⇒HTML要素・スコア・選択状態を1セットにできる
・状態の確認が楽
　　⇒item.selectedで１発でわかる
・拡張しやすい
　　⇒カテゴリ・タグ・画像...何でも後から追加可能
・不具合が起きにくい
　　⇒element[i]とscore[i]がズレる問題が起きない
MySQL30周年&ユーザ会25周年記念パーティに参加しました

こんにちは。
インプリムで[**プリザンター**](https://pleasanter.org/)**のMySQL対応**など機能開発を担当しているhmineです。

先日2025/3/25（火）に、外苑前の日本オラクル株式会社 本社で開催された「MySQL30周年&ユーザ会25周年記念パーティ」に参加しました。

https://mysql.connpass.com/event/345602/

https://mysql.connpass.com/event/345603/

私は2013年、初めてIT業界にジョインしたタイミングでPCにMySQLをインストールし、標準SQLの練習をしたのがMySQLとの最初の出会いだったので、一応はv5.x頃からのユーザです。
ただし、数か月後にはOracle Databaseを使用している現場への配属が決まったため、程なく学習環境をOracle Database 11gに乗り換えた経緯があり、その後MySQLと再会したのは、冒頭の通り**プリザンターのMySQL対応**のときでした。

---

私がIT業界にくる以前、そして、前述のようにMySQLからは遠いところにいた間も、MySQLの世界では30年 & 25年の間に色々なことがあったと学んだイベントでした！

**全体的に印象に残った内容**

1. Sun MicrosystemsによるMySQLの買収　→　OracleによるSun Microsystemsの買収　という歴史的背景。当時感じた動揺。だが、今となってはMySQLを追いかけつづけてよかったという振り返り
1. MySQLのキャッチアップ（バージョンアップや業務要件への対応）
1. MySQLのユーザコミュニティ活動
   - MyNA発足の歴史
   - [MySQL闇歴史 カレンダー](https://qiita.com/advent-calendar/2022/darksidemysql)
   - バグレポートを起票した活動。日本コミュニティは、文字コード問題のレポートで照合順序の仕様をかっちりさせた貢献活動で特に有名（ハハ・パパ・寿司・ビール問題！）

雑誌の特集や、記念出版などの貴重な書籍も拝見しました。

ひとつの技術に対し研究を続けることの大切さを学びました。

---

私自身はMySQL対応の担当者ですが、実はDBAスキルをもっているわけではなく、アプリに必要な要素としてMySQLを利用している立場です。
MySQL対応では[MySqlConnector](https://www.mysql.com/jp/products/connector/)と、MySQLのDDL、DMLが少しだけ使えるようになりました。

**プリザンター**は、**スキーマの数**や**テーブルの数**について考えると、商用システムとしては**小規模**です。ただし、**同時接続**や**大量データ処理**が強く求められるシステムです。
そのため、今後は同時接続や大量データの対処に強いDB処理の書き方（C#やJavaScript）を学びたいです。また将来に備えて、コンテナ運用、クラウドの運用や、運用中にMySQLのバージョンアップをどう対処するかといった技能も学びたいです。

今はDB以外のことで忙しく過ごしていますが、MySQLの経験値も確実に貯めたいです。

今回は、素晴らしいイベントを開催してくださり、ありがとうございました！

![Image.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658415/f6d683f1-abfe-4f11-b125-22bd8e63129d.jpeg)
BitLockerでロックされたディスクにUbuntuをインストールする方法（回復モードから解除）


## はじめに

Ubuntuをインストールしようとしたら、WindowsのBitLockerでディスクがロックされていてインストールできない…。  
そんなときに実際に行った手順を簡単にメモしておきます。


## 背景

WindowsがプリインストールされたPCにUbuntuを入れようとしたところ、インストーラーが「ディスクにアクセスできない」とエラー。  
調べてみたら、BitLockerが原因でディスクが保護されている状態でした。


## 手順

1. **Windowsの回復モードに入る**  
   BitLockerの画面→Esc→スキップ→トラブルシューティング→詳細→コマンドプロンp
2. **`diskpart` でディスクを初期化する**

```bash
diskpart
list disk
select disk {対象のディスク番号}
clean
exit
```

> ※対象のディスクは間違えないように注意！全データが消えます。

3. **UbuntuのインストールUSBから再起動してインストールするだけ！**


## おわりに

BitLockerの回復キーがわからなくても、対象のディスクを初期化してしまえばUbuntuは問題なくインストールできます。  
ただし、**全データが消えるので注意**。バックアップを忘れずに！
最近知った、プログラミング言語の機能

# はじめに
最近、あじ太郎は人のプログラムやQiitaの記事を見ていて、いくつか発見があったので、共有してみたいと思いました。

# 発見その１：for-else構文（Python）
for-else構文を使うと、以下のような書き方ができてしまう！
たぶん、Pythonの人にとったら当然なのでしょうけど、他の言語でも使いたいな。。
```Python
for i in hoge:
    # 繰り返し処理
else:
    # イテレータのすべての要素が処理されたあと、 else 節がもしあれば実行され、ループ処理が終了します。
```
for-else構文は、@nonakayasuo さんの記事を見ていて知りました。
https://qiita.com/nonakayasuo/items/ced6d1c882736bf64e63

そして、この記事を書いていて、ショックなことがあって、、
実は、あじ太郎の主戦場 PHP というか Laravel に
`@forelse` ディレクティブがあることを今回知りました。。
(ちなみに Pythonの for-else と似ているけどちょっと違うと思います)

# 発見その２：デコレータ（TypeScript）
今年になって取り組み始めたプロダクトは NestJS を使っていて、それでTypeScriptのデコレータを知りました。

以下の例で説明します。
```app.controller.ts
@Controller('prefix')
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get('hoge')
  getHello(): string {
    return this.appService.getHello();
  }
}
```
この例は NestJS でプロジェクトを新規作成して、少しだけ変更したものです。
`@Controller('prefix')` と `@Get('hoge')` がデコレータなのですが、詳細な意味を知らなくてもバックエンドのプログラムしている人なら、ある程度想像できますね。

`@Controller()` で AppController をコントローラーにして
`@Get() `で getHello()を GETメソッドのハンドラにしていることがわかります。
なお、`@Controller()` と `@Get()` の引数は、URLのパスになります。

※この例の場合
'/' + 'prefix' + '/' + 'hoge'
↓
https://～～～/prefix/hoge でアクセスできる。

適切に使うとプログラムがわかりやすくなりそう。

※NestJS の hello world を試して、Github にアップしました。
興味があれば覗いてみていただければ。（本当に単なる hello world ですけど）
https://github.com/aji-taro/nestjs-hello

# 番外編：名前付き引数
最近の話ではないので番外編ということで。
今では様々な言語で当たり前の名前付き引数ですが、あじ太郎が最初にそれっぽいものを見たのは、一昔かそこら前 Objective-C のときだったかなと。
（厳密に言うと Objective-C のは名前付き引数とは違うと思うのですが、、）

以下、Wikipedia に掲載されている Objective-C の例です。
```
// 単項メッセージ
[receiver msg];
// 引数付きメッセージ。この場合「msg:with:」でセレクタ一つ
val = [receiver msg: arg1 with: arg2];
```
出典：https://ja.wikipedia.org/wiki/Objective-C

上記の例にあるようにラベル（msg: や with:）を指定できます。
それにしても、久しぶりに Objective-C を見ましたが、やっぱり独特。。
当時、メソッドをオーバーロードしたいときは
andAaa: aaa andBbb: bbb andCcc: ccc … みたいにめっちゃ繋げてました。

どの言語が一番最初に名前付き引数をサポートしたか知りたくて AI に聞いてみたのですが、知らない言語が回答され、それが本当か確認できなかったので言及は止めておきましょう。

# 取り組んでみて
そのうち、こういった機能をいいとこどりしたプログラミング言語とか出てくるのかな？と想像したあじ太郎なのでした。
DiffLlama-1Bは『雪国』の続きをどう生成するのか

日本語DiffLlamaモデル「[DiffLlama-1B](https://huggingface.co/kajuma/DiffLlama-1B)」がリリースされていたので、Google Colaboratory (GPU版)で試しに動かしてみた。

```
!pip install transformers flash-attn
from transformers import pipeline
tgn=pipeline("text-generation","kajuma/DiffLlama-1B",max_new_tokens=128)
nlp=lambda txt:tgn(txt)[0]["generated_text"]
print(nlp("国境の長いトンネルを抜けると雪国であった。夜の底が白くなった。"))
```

『雪国』冒頭部の続きを生成させてみたところ、私(安岡孝一)の手元では以下の結果が出力された。

> 国境の長いトンネルを抜けると雪国であった。夜の底が白くなった。
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪国」
> 「雪

あまりうまく動いていないように見える。[2024年6月11日の記事](https://qiita.com/KoichiYasuoka/items/c6abf04ee5478b2df924)の手法で、Few-Shot Promptingによる品詞付与も試してみよう。

```
!pip install transformers flash-attn
model="kajuma/DiffLlama-1B"
class TextUPOSList(list):
  __str__=lambda self:"\n".join("###text:"+"".join(t for t,u in s)+"\n###UPOS:"+"|".join(t+"_"+u for t,u in s) for s in self)+"\n"
ex=TextUPOSList()
ex.append([("一","NUM"),("直線","NOUN"),("に","ADP"),("伸びる","VERB"),("電撃","NOUN"),("を","ADP"),("放ち","VERB"),("、","PUNCT"),("電撃","NOUN"),("ダメージ","NOUN"),("を","ADP"),("与える","VERB"),("。","PUNCT")])
ex.append([("色々","ADV"),("と","ADP"),("面白い","ADJ"),("メニュー","NOUN"),("の","ADP"),("ある","VERB"),("店","NOUN"),("。","PUNCT")])
ex.append([("しかも","CCONJ"),("、","PUNCT"),("ここ","PRON"),("は","ADP"),("コース","NOUN"),("が","ADP"),("リーズナブル","ADJ"),("な","AUX"),("の","SCONJ"),("です","AUX"),("。","PUNCT")])
ex.append([("彼","PRON"),("は","ADP"),("コンピュータ","NOUN"),("を","ADP"),("個人","NOUN"),("の","ADP"),("持ち物","NOUN"),("に","ADP"),("し","VERB"),("まし","AUX"),("た","AUX"),("。","PUNCT")])
ex.append([("2007","NUM"),("年","NOUN"),("9","NUM"),("月","NOUN"),("現在","ADV"),("、","PUNCT"),("以下","NOUN"),("の","ADP"),("メーカー","NOUN"),("から","ADP"),("対応","NOUN"),("製品","NOUN"),("が","ADP"),("発売","VERB"),("さ","AUX"),("れ","AUX"),("て","SCONJ"),("いる","VERB"),("。","PUNCT")])
from transformers import pipeline
tgn=pipeline("text-generation",model,max_new_tokens=128)
nlp=lambda t:"\n".join(tgn(str(ex)+f"###text:{t}\n###UPOS:")[0]["generated_text"].split("\n")[len(ex)*2:len(ex)*2+2])
print(nlp("国境の長いトンネルを抜けると雪国であった。"))
```

私の手元では、以下の結果が得られた。

> ###text:国境の長いトンネルを抜けると雪国であった。
> ###UPOS:しかし、そのトンネルを抜けると雪国ではなかった。

品詞付与もうまくできないようだ。うーん、私の使い方が間違ってるのかしら。
AtCoder CLIにおいてログインできないときの対処法



## 環境
- OS:windows11
- ターミナル:bash
## AtCoder CLIとonline-judge-toolsのインストール
以下のコマンドでatcoder-cliとonline-judge-toolsをインストールしてください。
```bash:bash
npm install -g atcoder-cli
pip install online-judge-tools
```
インストールが終わったら以下のコマンドで結果を確認してください。
```bash:bash
oj --version #11.5.1
acc -v #2.2.0
acc check-oj #available
```
## インストールしたCLIツールを使用するためにpathを設定（ojのpath設定も同様）
まず、以下のコマンドをでaccの場所を確認する。
```bash:bash
which acc
```
たとえば /c/Users/username/AppData/Roaming/npm にあるなら、以下のように環境変数pathを追加する
```bash:bash
echo 'export PATH=$PATH:/c/Users/username/AppData/Roaming/npm' >> ~/.bashrc

source ~/.bashrc
```

## [aclogin](https://github.com/key-moon/aclogin)のインストール

インストールと使い方は[このマークダウン](https://github.com/key-moon/aclogin/blob/main/README.md)を参照してほしいのですが、使い方の3つ目のみ以下のように変換してください。

```bash:bash
aclogin --tools oj
```
これでacc関連のパス取得をスキップできます。ojのみにクッキーを保存したい場合はこれで大丈夫です。（私はなぜかacc関連でバグったので）
そしたら、REVEL_SESSIONの値を入力するプロンプトが表示されるので先ほどDevToolsからコピーした値を貼り付けてください。

## 提出できるか確認
以下のコマンドを打つと、自動でpypyの提出ができます。
```bash:bash
oj submit https://atcoder.jp/contests/abc385/tasks/abc385_a abc385_a.py　--language 5049
```
## 最後に
AtCoderでは、現在CAPTCHA（cloudflare）の導入によりコマンドラインツールからの自動ログインができなくなっているようです。この変更はかなり最近らしく参考にできる記事があまり見受けられなかったので、自分で記事を書いてみることにしました。どなたかの参考になれば幸いです。
🌟JavaScriptを始めよう！初心者でもわかる魅力と活用ポイント

## こんにちは、みなさん！
今日は、ウェブ開発に欠かせない存在、**JavaScript（ジャバスクリプト）**についてシェアしたいと思います。これからプログラミングを学びたい方、HTMLやCSSだけでは物足りないと感じている方にぴったりの言語ですよ！

## 💡JavaScriptって何？
JavaScriptは、Webページに動きを加えるためのプログラミング言語です。たとえば以下のようなことができます：

ボタンをクリックしたときに表示を切り替える

入力フォームを自動チェック

スライドショーやアニメーションの実装

APIと連携してデータを取得・表示

つまり、Webページを「静的」から「動的」に変える魔法のような存在です✨


このように、HTMLと組み合わせることで、ユーザーとのインタラクションが可能になります！

## 🚀なぜJavaScriptを学ぶべき？
すぐに結果が見える：ブラウザがあれば、すぐに試せる

需要が高い：フロントエンドだけでなく、バックエンド（Node.js）でも活用できる

学習リソースが豊富：チュートリアルや無料教材がたくさん

## 📚おすすめの学習方法
基本文法を覚える（変数・関数・条件分岐・ループなど）

ブラウザで試してみる（開発者ツールを使って練習）

簡単なアプリを作ってみる（ToDoリストなど）

ライブラリやフレームワークを触ってみる（ReactやVue.jsなど）

## ✨最後に
JavaScriptは最初は少しとっつきにくいかもしれませんが、「わかった！」瞬間の楽しさは格別です！
ぜひ、HTMLやCSSと一緒にJavaScriptも学んで、自分だけの動くWebページを作ってみましょう😊

気軽にコメントや質問もOKです〜！一緒に学びましょう[💪](https://dienmayquanghanh.com/kinh-nghiem-hay/nhung-dieu-can-biet-khi-lua-chon-cong-suat-bep-tu-cho-gia-dinh)
Github actionでcssが適応されない

# 自動的に生成されるCSSのファイル名がおかしい問題
vite + Reactでtodoアプリを作成したさいに発生した問題です。
ローカルでは問題なくCSSが適応されているが、ghactionでは適応されていないのが問題でした。

## 問題の部分
dist/assets/.cssB7eOPUfC
上記のように謎のファイル形式名になっている。
VScodeでは、CSSと認識されている。
しかし、ghactionでは認識できず適応されていない。

## 解決策
[hash].cssにする。

```vite.config.ts
cssCodeSplit: true,
assetFileNames: "assets/[hash].css",
```

## 原因
デフォルトの状態は以下です。
```vite.config.ts
assetFileNames: 
"assets/[name]-[hash][extname]",
```
[name]が.cssにあたり、
[hash]がB7eOPUfCにあたります。