OmniAICreator/Qiita-1.07M huggingface dataset:
【ESLint】import文を自動でソートする【Next.js】

## import文を自動で並べ替える方法
importを自動で並べ替えるには`eslint-plugin-import`を使用します。

### `eslint-plugin-import`の設定

`.eslintrc.json`に以下のように記述することで並べ替えができます。

```js:.eslintrc.js
module.exports = {
  extends: ['plugin:storybook/recommended', 'next/core-web-vitals', 'prettier'],
  settings: {
    'import/external-module-folders': ['.yarn', 'node_modules'], // yarn PnPを使用している場合にもインストールした依存関係がexternalと認識されるようにする。'.yarn'を追加しない場合には、internalとして認識される。
  },
  rules: {
    'import/order': [
      'error',
      {
        // 記述した順番で並び替えられる
       groups: [
          'builtin', // node "builtin" module
          'external', // "external" module
          'internal', // "internal" module
          ['parent', 'sibling', 'index'], // 左から「親ディレクトリ」、「兄弟ディレクトリ」、「カレントディレクトリ」
          'object', // "object"-imports
          'type', // "type" imports
        ],
        // パスでグループ化する
        pathGroups: [
          {
            pattern: '@/**',
            group: 'parent',
            position: 'before', // groupに対しての相対的な位置
          },
        ],
        // pathGroupsによって処理されないインポートタイプを指定
        pathGroupsExcludedImportTypes: [
          'builtin',
          'external',
          'object',
          'type', // "type" importは'@/**'に該当しても最後に配置される
        ],
        // 各グループ内の順序をアルファベット順で並べ替える
        alphabetize: {
          order: 'asc',  // 昇順
          caseInsensitive: true, // 大文字、小文字を区別しない
        },
        'newlines-between': 'never',  // グループごとに空行を挿入するか
      },
    ],
  },
}
}

```
【Unity】グレースケールShader

## 概要

Textureをグレースケール化するShaderです。
Ratioが0の場合が元のTexture、1の場合は完全にグレー化となります。

有効でないアイテムアイコン、戦闘不能になったキャラアイコンとかをグレー化するのに使えそうです。
Ratioはfloat型で取っているので0から1に値を段々増やせばアニメーション風に切り替えられます:muscle:

![Grayscale.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112894/eaf18ee2-e5fa-1fe3-db51-80c2c83d9c65.gif)


## Shaderの実装

URPなのでHLSLで書いてます、fixedが使えないことを除けばそんなにCgと変わらない印象です。
UI用なのでTransparent扱いです。

``` GrayscaleTransparent.shader
// Textureをグレースケール化させるShader
// _Ratioが1の場合グレースケール、0の場合は元のTexture表示
// ※UIに設定する場合はTransparent扱いする必要があるらしい、OpaqueだとSceneViewで表示されない

Shader "Custom/GrayscaleTransparent"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Ratio("Ratio", Range(0, 1)) = 1
    }
    SubShader
    {
        Tags {
            "RenderType"="Transparent"
            "Queue"="Transparent"
            "IgnoreProjector"="True"
            "RenderPipeline"="UniversalPipeline"
        }

        LOD 100

        Pass
        {
            Name "ForwardLit"
            Tags { "LightMode"="UniversalForward" }
 
            Cull Off
            Lighting Off
            ZWrite Off
            Blend SrcAlpha OneMinusSrcAlpha

            HLSLPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"

            struct Attributes
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
                half4 color : COLOR;
            };

            struct Varyings
            {
                float2 uv : TEXCOORD0;
                // フォグの計算で使うfog factor用のinterpolator
                float fogFactor: TEXCOORD1;
                float4 vertex : SV_POSITION;
                half4 color : COLOR;
            };

            sampler2D _MainTex;
            float _Ratio;

            CBUFFER_START(UnityPerMaterial)
            float4 _MainTex_ST;
            CBUFFER_END

            Varyings vert (Attributes v)
            {
                Varyings o;
                o.vertex = TransformObjectToHClip(v.vertex.xyz);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                o.fogFactor = ComputeFogFactor(o.vertex.z);
                o.color = v.color;
                return o;
            }

            half4 frag (Varyings i) : SV_Target
            {
                half4 color = tex2D(_MainTex, i.uv);
                half val = dot(color, half3(0.299, 0.587, 0.114));
                return lerp(color, half4(val, val, val, color.a), _Ratio) * i.color;
            }
            ENDHLSL
        }
    }
}
```

## あとがき
UnityRecorderで撮ったmp4ファイルをgif makerでgifファイルに変換するのが若干手間かも。。
ただgif makerは変換時に指定時間で切り抜いてgif化できるのがSugoi
ウェブデザイン技能検定(3級)を受検しました

# はじめに
2023/5/28に令和5年度 第1回ウェブデザイン技能検定(3級)を受けてきました。
5/29に学科試験の解答が公開されたのですが、8割正解していたので合格しているはず。6/28の合格発表まで待ちます。

https://www.webdesign.gr.jp/news/20230529/

基本情報技術者試験ほどの難易度ではないせいか記事があまり見受けられなかったので、せっかくなら学習方法や受検でつまづいた点などをまとめてみるかと思い立ちました。

私は大学でHTML/CSSの勉強をしていたので、この資格を取得するために基礎知識から勉強するという事は行っていません。
HTML/CSSを使った静的なサイト(誰から見ても同じ情報を提供するサイト)を作れる程度の知識はあったので、腕試しのつもりでこの資格にチャレンジしました。
あと、会社から資格取得を勧められていたというのも一つの理由です。

# 試験概要
## 1. 試験日程
令和5年度
第1回 2023/5/28(日)←今回受検した
第2回 2023/8/27(日)
第3回 2023/11/26(日)
第4回 2024/2/18(日)

## 2. 受検資格
ウェブの作成や運営に関する業務に従事している者及び従事しようとしている者

## 3. 受検費用
学科 6,000円, 実技 8,000円
※25歳未満の在職者であれば減免対象、学科実技合わせて9,000円で受検可能

銀行振込で支払います。
減免で申込する場合、在職期間を選択するのですが、ちょっと迷ってしまったのでメモ。入社日から申請当日を選択して申請したのですが、特に何も言われなかったのでこれで良いかと。

## 4. 試験内容
実技試験と学科試験があります。
1日で2つとも行う形です。

### (1)実技
出題形式：PCで解答。6問中5問を選択して回答する。
回答時間：60分
合格基準：70点以上

### (2)学科
出題形式：マークシートで解答。全25問。
回答時間：45分
合格基準：70点以上

# 学習方法
学科メインで学習し、2回だけ実技を解いて対策しました。
学習期間としては1か月ほどでした。

## 実技
こちらのサイトに掲載されている過去問の素材を使って解いていました。

https://www.fom.fujitsu.com/goods/webdesign/fpt1319.html

解説はこちらのサイトを見ていました。
[【IT資格】ウェブデザイン技能検定3級に独学で合格! 過去問題を徹底解説](https://license.design-life.work/)

実技の練習としては1回分しかありませんが、出題傾向は似ているので、VSCodeのような予測変換がなくても解けたら十分だと思います。不安な方は公式サイトに掲載されている最新の過去問に目を通してみてください。

## 学科
学科もこちらにお世話になりました。
[【IT資格】ウェブデザイン技能検定3級に独学で合格! 過去問題を徹底解説](https://license.design-life.work/)

令和4年度第2回、令和4年度第4回の問題は公式サイトに掲載されています。解説はされていないので、問題に慣れてきた頃合いに試してみるのがおすすめです。

https://www.webdesign.gr.jp/measures/publication/

# 受検した感想
## 実技
どのサイトでも実技は簡単と書かれていたので、その通りだなと感じました。解いている中でちょっと不安になった問題があったので、その問題を省いて解答していました。

## 学科
基本、過去問がそのまま出てきます。が、この単語チラッと見たけどそこまで詳しく見てなかったな～という問題が数問ありました。
それでも過去問を何度も解いて出題傾向を理解して、自分なりに知識を固めていれば合格ラインまでは届きそうだと感じました。

# 注意点
* 領収書は郵送のみらしい
会社で領収書の提出を求められたのですが、web上で探しても領収書が記載されているページが見つかりませんでした。(基本情報技術者試験ではweb上で領収書が発行できたのでそのノリで探していた)
公式サイトによると、領収書が欲しかったら返信用の封筒と切手、必要な情報を記載したメモを送ってきてね～とのことでした。

https://www.webdesign.gr.jp/faq/

マジか～と思いつつwordで必要事項を打ち込んで送りました。郵送なので手元に届くまで時間がかかる点にも注意してください。

* 受検時、机の上に出していい物
受検票、筆記用具、蓋ができる飲み物
あと配布書類とPCだけでした。

# まとめ
ある程度の知識があれば、問題の出題傾向を掴むだけで合格ラインに届くと思います。
細々とした不安を持つタイプなので、気になった点も含めて書いてみました。この記事が参考になれば幸いです！
技育博に参加しました！ feat. chatGPT

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212014/adc46b9b-0d82-cf68-8e83-60bbebab3d2d.png)
こんにちは！

せっかくなので技育博2023に参加してきたブログを書きたかったのですが、時間も少しない&chatGPTをブログで使ってみたい欲が爆発したので、ついでにchatGPTにテンション2.5倍増しで執筆させてみました。（詳細な技育博について理解したい方は別の方のブログなどを参照ください！）

以下、chatGPT+🦊による思いを乗せる形で修正してお送りします。

今回は、エンジニアの祭典「技育博2023」に参加したことについて、ちょっとテンション高めでお話ししたいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212014/3facc617-74d4-dc8e-286a-824fc1c2981e.png)


## 技育博とは

技育博とは、エンジニアを目指す学生団体の交流を目的とした博覧会で、全国からエンジニアを目指す学生が集まるんです。企業ブースも設置されてて、学生と企業の交流の場ともなってるんですよ！

## あまてくとは

そして、今回私は[エンジニアコミュニティ「あまてく」](https://www.notion.so/9728f0790eb44f4794b8fe531fbde9c7?pvs=21)の代表として参加しました！あまてくは京都産業大学の学生を中心としたエンジニアコミュニティで、ハッカソン出場やチームメンバーの育成など、エンジニアを目指すきっかけになる活動を行っています

## 技育博の様子

今回の[技育博](https://prtimes.jp/main/html/rd/p/000000026.000045025.html)は、サポーターズ渋谷オフィスで開催されました。会場にはCyberAgentやDeNA、ゆめみ、といった企業を始め多くの企業が集まり、エネルギーに満ちた空間が広がっていました。まるでエンジニアのフェスティバル！テンション上がりますよね！

私が最も印象に残ったのは、各企業のブースで行われた企業LT（ライトニングトーク）です。企業の最新の取り組みや技術トレンド、インターンシップの情報などを短時間で学べるのは、非常に有意義な経験でした。まるで情報の宝箱を開けたような感覚！

そして、学生団体の展示も見ごたえがありました。各団体が自慢のプロジェクトや資料を展示し、その技術やアイデアについて熱く語っていました。めちゃめちゃ楽しかった！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212014/542be216-94dd-9d84-f254-cae4f1c90a8a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212014/61f777ac-3014-8844-cff0-a1c81db9441c.png)

## 技育博の魅力

技育博の最大の魅力は、全国から集まったエンジニア志望の学生との交流の機会が得られることです。自分の知識や視野を広げるだけでなく、新しいつながりを増やすことができます！

また、エンジニア団体特有の悩みなども共有し課題解決することができるのも魅力だと感じて

## 技育博での学び

技育博は、エンジニアとしての成長を促すだけでなく、新たな視点や刺激を提供してくれる場所です。今回の参加を通じて、自分自身の技術や視野が広がったと感じています。

また、あまてくとして何がうまくいっていて、何がうまくいっていない部分なのかも理解することができました。

## これからの目標

これからも、技育博のようなイベントに参加し、自分自身の成長とともに、エンジニアとしての視野を広げていきたいと思います。また、他団体にない活動やノウハウはあまてくの強みとして、他の団体にも共有できるような取り組みもできたらと考えています。

## 感謝の言葉

最後に、技育博を主催してくださったサポーターズの皆さん、そして参加してくださった全ての方々に感謝の意を表したいと思います。次回も楽しみにしています！

## 余談

内定者の友達とお世話になった人事の方ともお会いしたのでパシャリ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212014/98d69ed8-353f-39a8-6475-33765c56aa8d.png)

それでは、また次回のブログでお会いしましょう。きつね🦊でした。おっと、忘れてました！あまてくの活動に興味がある方は、ぜひTwitterのDMまでご連絡くださいね！エンジニアとして一緒に成長していきましょう！

以上、テンションちょうどいい感じでお送りしました！

### エンジニアコミュニティあまてくについて

2022年10月に、サポーターズ主催の技育展で開発したメンバー3人+友人1人で、「あまてく」というエンジニアコミュニティを立ち上げました！

初学者向けコミュニティで、少しでも多くの学生や初学者が、エンジニアになるきっかけやプログラミングを始める良いきっかけを作れればと考えています！

あまてくは非公認団体のため、活動費用として援助して頂けると嬉しいです！ぜひカジュアル面談などの機会を設けたいと考えております！

# その他

何かアドバイスやご質問などありましたら、Twitterの[DM](https://twitter.com/kitsune_yk)に送ってくだされば反応いたします。

下のボタンから、コーヒーチップも送ることができます！支援して頂けると、ブログや個人開発の励みになります！

<a href="https://www.buymeacoffee.com/kitsuneyk" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

シェアリンクから、ブログのシェアもしてもらえると励みになります！！
tmuxで一時的に作成した別paneでコマンドを実行する


# はじめに

tmuxを使っている時、「今のpaneを維持したまま、コマンドを別paneで簡単に実行したい」と思ったので実装してみました。

# 動作環境

||バージョン|
|---|---|
|OS  |Mac OS X 13.4 Ventura  |
|shell  |zsh 5.9 (x86_64-apple-darwin22.1.0)  |
|tmux  |tmux 3.3a  |


# 実装

`sp`, `spl`, `vsp`, `vspl`の4つのコマンドを実装しました。

```bash
# tmuxで新しくペインを作成してコマンドを実行
# 水平分割
function sp() {
  _sp "$*"
}

# 水平分割してless
function spl() {
  _sp "$* | less"
}

function _sp() {
  tmux split-window "$*"
}

# 垂直分割
function vsp() {
  _vsp "$*"
}

# 垂直分割してless
function vspl() {
  _vsp "$* | less"
}

function _vsp() {
  tmux split-window -h "$*"
}

```

実装の内容としては、コマンドの引数をそのまま `tmux split-window` に渡して実行しています。

`sp`, `spl` がpaneの水平分割、 `vsp` , `vspl` が垂直分割です。
`l`がついているものとついていないものの差は、入力したコマンドに対して `less` をかけているかどうかです。
なぜ `less` をかけているかというと、 `tmux split-window` に渡したコマンドがすぐに終わってしまうコマンドだと一瞬でpaneが終了してしまい、内容を確認できないためです。
`man ls` のようにユーザー側でアクションを起こさないと終了しないコマンドなら `sp` や `vsp` でよいですが、 `ls` のように勝手に終了するコマンドの場合は `spl` や `vspl` で `less` をかけてやる必要があります。


# 完成！

![tmux-split-ex.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169996/60c7f96b-23b0-2346-ebea-86be5b612cc0.gif)

こんな感じです。
一時的にpaneを分割し、分割したpaneでコマンドを実行し、コマンドが終了するとpaneが閉じます。

# 終わりに
今までは別paneでコマンドを実行したい場合は
1. paneを分割
2. そのpaneでコマンドを実行
3. paneを閉じる

の手順が必要でしたが、その手間が省けるようになりました。

だいたい望み通りの挙動をしているのですが、あとはコマンドが色のついたテキストを出力する場合に色がなくなってしまうのをなんとかしたいなと思います。
PHPStan のいい感じな Error Formatter を作りました

PHP を書く方ならご存知の静的解析ツール PHPStan ですが、コードの品質を比較的低コストで維持するものとしてはもはや欠かせないツールですね。

PHPStan を使う上では、以下のようなフローを何度も繰り返すと思います。

1. コードを書く
1. ローカルや CI などで PHPStan を実行
1. 出力を見てコード箇所を特定して修正

このフローの 3 の部分で、PHPStan の標準だとエラーが出た際に「ファイルパス」と「行数」しか出力されないので、すぐにはエラーの箇所がわかりません。

というわけで、出力からぱっと見でエラー箇所が分かるようなフォーマッターを作りました。

https://github.com/yamadashy/phpstan-friendly-formatter

これが
![example-before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54810/d52fdfc4-f24a-ca04-7f67-4410eaf6385b.png)
こうなります
![example.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54810/63126d42-7d0c-d35b-4627-b7d62e8b553c.png)

エラー箇所の周辺のコードが表示されるようになります。

# パッケージについて
パッケージとしての機能はこれだけですが、周辺コードが表示されているだけでも、出力を見てすぐに「あ〜ここか」とわかるので僅かに効率的になるかと思います。

なお、もし GitHub Action などを使っているなら reviewdog と組み合わせて PR 上に表示できたりもするので、むしろそちらをおすすめします。あくまでローカルで実行する場合やCI環境の整備が難しい場合に使っていただければと思います。

https://purple-jwl.hateblo.jp/entry/2021/06/07/092219

そして、勘のいい方はお気づきかと思いますが [Collision](https://github.com/nunomaduro/collision) というパッケージに出力を寄せています。

またネーミングは [eslint-friendly-formatter](https://github.com/royriojas/eslint-friendly-formatter) から来ています。機能的には `phpstan-codeframe-formatter` 的な名前でも良かったのですが、将来的に `eslint-friendly-formatter` のようなエラーのグルーピングの出力機能も追加したいのでこの名前にしています。

# 使い方
Composer を使って簡単にインストールできます。
```sh
$ composer require --dev yamadashy/phpstan-friendly-formatter
```

インストール後、 `phpstan.neon` に以下の設定を追加してください。
```yaml
includes:
    - ./vendor/yamadashy/phpstan-friendly-formatter/extension.neon
```

そして、PHPStanの実行で `--error-format friendly` をつけて実行すると使えます。
```sh
$ ./vendor/bin/phpstan analyze --error-format friendly
```

## サンプル
GitHub Actions で使用すると、以下のように出力されます。
![github-actions.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54810/335279bf-3b72-7caa-33b9-c2c3f261ba40.png)
https://github.com/yamadashy/laravel-blade-minify-directive/actions/runs/4714024802/jobs/8360104870

# パッケージの開発について
コードを表示しているだけなので語ることも多くないですが、PHPStan のフォーマッターの作り方としてはこちらが参考になります。

https://phpstan.org/developing-extensions/error-formatters

[標準のフォーマッター](https://phpstan.org/user-guide/output-format)がいくつかあるので、GitHub でコードを参考にするのが手っ取り早いです。

https://github.com/phpstan/phpstan-src/tree/1.11.x/src/Command/ErrorFormatter

大きくは以下の手順でコードを書いていきます。
1. `ErrorFormatter` を継承
2. 他のフォーマッターを参考に `formatErrors` を定義
3. `$analysisResult` から Error や Warning の情報が取得できるので、そちらを元に `$output` で出力

そして `extension.neon` など、パッケージ使用者に使ってほしいフォーマッターの設定ファイルを作成したらもう完成です。

コードの表示に関しては [PHP-Console-Highlighter](https://github.com/php-parallel-lint/PHP-Console-Highlighter) を使っています。

# 今後
[eslint-friendly-formatter](https://github.com/royriojas/eslint-friendly-formatter) には以下のようなエラーのグルーピング機能がありまして、PHPStan の [エラーの識別子をつけよう](https://github.com/phpstan/phpstan/discussions/8981) という議論が進めば PHPStan の出力でも同様のことができそうだなと思っています。
全体を見渡すサマリーとして有用なので是非入れたい機能です。公式で入りそうでもありますね。
![eslint-friendly-formatter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54810/53e5ee34-63b3-7e02-278c-08aff96963b4.png)


# さいごに
PHPStan は活発に改善されていて日々感謝していますが、こういった細かい部分がより便利に使いやすくなると良いなと思います。

何か PHPStan がより快適に使えるライブラリなどあれば紹介いただけると助かります！
【個人的勉強部屋】k8sの用語で知ったやつ

## ワークロードとワークロードリソースの違い

ワークロードとは、kubernetesの中で実行中のアプリケーションの事を指す。
ワークロードリソースとは、Podの集合の管理を行ってもらえる。

ワークロードリソースには、Deployment、StatefulSetなどが含まれる。

https://kubernetes.io/ja/docs/concepts/workloads/
UnityのプロジェクトをGitHubにプッシュするまでの流れ

UnityのプロジェクトをGitHubで管理するときに毎回初期設定を調べながらやっているので備忘録として書いておきます。

# 手順
### Unity側で行う作業
1. Unityのプロジェクトを立ち上げるのみ！

### GitHubで行う作業
2. リポジトリ新規作成
3. 以下項目を入力
    - Repository name : プロジェクト名
    - Description     : プロジェクトの説明(記載する必要なし)
    - Public/Private  : 公開ならPublic、非公開ならPrivate
    - README          : プロジェクトの詳細(後で記載できる)
    - Add .gitignore  : Unityを選択(リモートリポジトリに必要のないファイルを除いてくれる)
    - Choose a license: ライセンス(種類色々あるので別途調べる)
4. Create repositoryを押す

### ローカルで行う作業
5. Unityプロジェクトの階層まで行きローカルリポジトリを作成
    ```Git
    git init
    git remote add origin [リモートリポジトリのURL]
    ```
6. .gitignoreをリモートから持ってくる
    ```Git
    git pull origin master
    ```
7. あとは通常通り
    ```Git
    git add .
    git commit -m "first commit"
    git push origin master
    ```
Ubuntu22.04 カラー印刷できないときに見直す設定

# Ubuntu22.04でカラー印刷できないときに見直す設定

1. ubuntuの設定を開く
![ubuntu設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278020/67c1a9ae-7154-36b9-bf9b-9d1cf967845d.png)

1. プリンタの設定を開き「追加のプリンター設定」をクリック！
ここが気づかなかった。プリンターを追加するものだと思っていが  
プリンターの詳細設定を行いたい場合はこのボタンをクリックする  
![ubuntuプリンタ設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278020/19dfd8a9-8c22-af35-b1ba-28a0820a21c9.png)

1. プリンターlocal の画面が表示されるのでデフォルト（緑丸チェック）のプリンタを右クリックしプロパティを選択する
![Screenshot from 2023-06-20 00-03-52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278020/b073dd22-14c8-3e09-8b82-114497b3a0cb.png)
![Screenshot from 2023-06-20 00-05-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278020/e1aed12b-01de-0234-163e-185129c9ae13.png)

1. デフォルたプリンタの詳細設定が表示されるので「ジョブオプション」を選択し下にスクロールすると「その他のオプション（詳細）」で「print-color-mode:」で color を選択してOKボタン
![Screenshot from 2023-06-20 00-06-27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278020/3e981f4d-1041-6daa-b883-5d974629d5b8.png)


以上
Minecraft 1.20.x forgeでMOD開発 サーバー側でコマンド実行

## はじめに
Minecraftで夜になったら色々するイベントを作りたくてMOD制作に足を踏み入れたんですが、想像以上に難しかったので記事にしていきます。
基本的にサーバー側の実装のみで、プレイヤーはバニラ環境を想定しています。
Minecraftはたまに遊ぶ程度で、forgeについてはHello Worldレベルなのでコードの細かい説明は省きます。（できない）

## 今回やりたいこと
以下のコマンドをサーバー側で実行させたい。

```
/title @a title {"text":"Chapter I","bold":true}
```

### なぜサーバー側で？
マルチでログインしているプレイヤーにパーミッションを与えたくないから。

https://minecraft.fandom.com/ja/wiki/%E6%A8%A9%E9%99%90%E3%83%AC%E3%83%99%E3%83%AB

## コード
プレイヤーがサーバーにログイン時に上記コマンドをサーバー側で実行させるコード

```java
    @SubscribeEvent
    public void OnPlayerLoggedIn(PlayerEvent.PlayerLoggedInEvent event) {
        // Playerのインスタンス
        Player player = event.getEntity();
        // コマンド
        String text = "title @a title {\"text\":\"Chapter I\",\"bold\":true}";
        // 実行する際のパーミッション？
        CommandSourceStack commandSourceStack = player.createCommandSourceStack().withSuppressedOutput().withPermission(4);

        // コマンドの実行権生成
        CommandDispatcher<CommandSourceStack> commanddispatcher = player.getServer().getCommands().getDispatcher();
        // コマンド文字列の解析
        ParseResults<CommandSourceStack> results = commanddispatcher.parse(text, commandSourceStack);
        // 実行 成功なら1 失敗なら0を返す
        if (serverPlayer.getServer().getCommands().performCommand(results, text) != 1){
            LOGGER.debug("-------- Title Command Failure ---------");
        }
    }
```
コメントは推測で書いています。
```
commanddispatcher.parse(text, commandSourceStack);
```
中を追っていくと```parse```の段階でそれぞれのコマンドのクラスからオブジェクトを生成しているみたい？
この段階でコマンドが間違っていると空のオブジェクトを返しているのでここで判定したほうがいいかもしれません。

Minecraftの実行基盤のJavaは8なことが普通みたいなので型推論とかは使わない方がいいと思います。。。

## 結果
![Minecraft 1.20.1 2023_06_20 0_38_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/855584/88508755-9e8a-323c-7738-922841542e4c.png)

## 参考
https://forums.minecraftforge.net/topic/118434-solved-119-struggling-using-performcommand/

## 次

https://qiita.com/simoyama2323/items/1f0e77fc4482e2a9b2d2
AtCoder ABC306 E, F の解説スライドを作ってみた

[トヨタ自動車プログラミングコンテスト2023\#3\(AtCoder Beginner Contest 306\) \- AtCoder](https://atcoder.jp/contests/abc306) お疲れさまでした。

ABC305 に引き続き、解説スライドを作ってみました。解説の理解しやすさが「図 ≧ コード > 日本語 >> 数式」な方向けです。

# スライドとコード例

## E - Best Performances
![abc306-e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/118172/c4889fb3-8872-35ce-c118-7fd7802596b0.png)

* [提出 \#42565599 \- トヨタ自動車プログラミングコンテスト2023\#3\(AtCoder Beginner Contest 306\)](https://atcoder.jp/contests/abc306/submissions/42565599) (Rust, 1B + 2B)
* [提出 \#42359489 \- トヨタ自動車プログラミングコンテスト2023\#3\(AtCoder Beginner Contest 306\)](https://atcoder.jp/contests/abc306/submissions/42359489) (Rust, 1A + 2C)

## F - Merge Sets

![abc306-f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/118172/317cc696-2974-0ef4-4f4e-cfee6afa19ba.png)

* [提出 \#42749485 \- トヨタ自動車プログラミングコンテスト2023\#3\(AtCoder Beginner Contest 306\)](https://atcoder.jp/contests/abc306/submissions/42749485) (Rust, Fenwick tree)
【UiPath】西暦年・和暦年・月日・曜日ぜーんぶ出したい

# はじめに

西暦和暦いずれかを出す場合はそんなに苦労しなかったんですけど、
どっちも出したいってなったとき地味に難易度高かったので出し方を記録として残します。

# 結論

まず最初に西暦年月日曜日出してから、JapaneseCalendarに差し替えて和暦部分を置換します。

# 今回の実装

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1846796/9953dd54-5c01-2cc0-a020-9432944e806b.png)

## 変数の中身

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1846796/b051a516-f353-a1b9-d294-f91f1ba49c2f.png)

CultureInfoをJPにしているのは、曜日を出したいためです。

## 各代入の中身

* 代入_日付1

```
hiduke_DateTime.ToString("yyyy(和暦年部分)年MM/dd(ddd)",Cinfo)
```

* 代入_JapaneseCalender
    * ここは右辺左辺両方掲載しています。
    * ここでJapaneseCalenderを代入しないと、次の代入のggyyが「西暦23」になってしまうためです。

```
CInfo.DateTimeFormat.Calendar = New System.Globalization.JapaneseCalendar
```

* 代入_日付2

```
hiduke.Replace("和暦年部分",hiduke_DateTime.ToString("ggyy",CInfo))
```

# 実行結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1846796/e091af25-421c-d44e-da7a-c4a7d5a3055c.png)

無事に

* 西暦
* 和暦年
* 月日
* 曜日

が出力できました。

# 今回の実装-NGのすがた-

JapaneseCalenderを代入しなかった場合を見てみます。（JapaneseCalender部分コメントアウトしただけ）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1846796/84060c9d-593d-2bcc-005a-211a46cff27f.png)


# 実行結果-NGのすがた-

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1846796/ca233fa9-4c27-d817-5c28-30efb4672abf.png)

こうなります。「令和」も「5年」でもなく、西暦（20）23という値が出力されてしまいました。

# 参考文献

https://learn.microsoft.com/ja-jp/dotnet/api/system.datetime?view=net-7.0

# おわりに

最後のNGのすがたは自分が個人的にはまったところです。
似たような現象ではまってしまった誰かに届けば幸いです。
mayaのカメラを保護したい　~その後


前回mayaのカメラを何とかして保護したかったのですが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484234/22c3590b-f5bb-6e7d-a53c-4ea6de7fbfa4.png)
こやつに阻まれました。

https://qiita.com/9boz/items/132fc9320fbd4007e059

リトライ
-
諦められないので、再挑戦。

ここでふと
**このボタンに頼らずlockを外すとどうなる？***

右クリックでやってみると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484234/5b891448-6cf0-70a7-554b-8e2bdcdfdf61.png)

アンロックできますね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484234/54445347-ff1b-84d9-f1fe-07e90a7038f5.png)

という事は
軸毎にロックされてるってことですね。
実際maファイルで見てみると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484234/48c58670-1b51-6604-8251-482c3cf283f3.png)

されてますねー　ロック。


('A)・・・・・・・

('A)・・・・・・・

('A) tx,ty,tz じゃなくて　親アトリビュートロックすりゃいけんじゃね？

決着は唐突に
-

まっさかー と思いつつやってみる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484234/d73310cd-b1e0-172b-1186-a0e170a25539.png)

ロックだぜー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484234/9e9b38cc-0ac4-b883-6e56-093887599631.png)

カメラロックボタンでもロックするぜー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484234/89c929a1-8858-7ccc-a894-61fa1640257a.png)

カメラロックボタンでアンロックす・・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484234/af656f2e-b332-7686-2df7-81225ebb3266.png)

されない！！！！
SassのEach文

# SassのEach文について
SassのEach文を、喩えを使って理解できるようにまとめた。
## そもそもSassとは？
Sassとは、CSSを拡張して扱いやすくしたスタイルシートのことで、「サス」や「サース」と呼ばれる。
記法が SASS記法 と SCSS記法 の２種類あるが、今回はよりcssの記法に近いSCSS記法を使う。

## Sassのループ処理
cssとは違ってSassではループ処理を行うことができる。
ループ処理を行いたいときには、Each文、for文、while文が使える。

## Each文とは
今回はその中でもEach文を説明する。
Each文とは、指定したリストの数だけ処理を行なってリストの内容をひとつずつ表示していき、リストの数分全て終わった時に処理を終了するものである。

## どうやって書くのか
例：４つの要素にそれぞれ違う背景色とクラス名をつけたい場合

~~~
$classNames: red, green, blue, orange;
$colors: #FF0000, #00FF00, #0000FF, #FFA500;
~~~
今回は、`$classNames`というクラス名の入った配列と、`$colors`というカラーコードの入った配列が用意されている。
それぞれ、`red`には`#FF0000`を指定したいし、`green`には`#00FF00`、`blue`には`#0000FF`、`orange`には`#FFA500`を指定したい。

Each文の書き方としては以下である。
~~~
@each $var in $配列A {

$index_key: index($配列A, $var); //indexを取得
$変数B: nth($配列B, $index_key); 

}
~~~
これに用意した配列を使って考えていく。
***
- `$var in $配列A`　
→ `$className in $classNames`

　ここでは変数 `$var` を `$className`  、`$配列A` を `$classNames`とする。
　１回目の処理では変数`$className` に、配列`$classNames`　から
　インデックス１番目の `red`が代入される。
　（Sassの場合、インデックスは０からではなく１からはじまる。）
***
- `$index_key: index($配列A, $var);`　
→ `$index_key: index($classNames, $className);`

　`$index_key` に「１」という値が代入される。
　これは、`$classNames`　の中の `red`のインデックスが代入されている。
　（つまり`$classNames`の中の`red`は１番目ということ）
***
- `$変数B: nth($配列B, $index_key); `
→ `$color: nth($colors, $index_key);`

　ここでは `変数B` を `$color`  、`$配列B` を `$colors`とする。
　先ほど「１」を代入した `$index_key` を使って、 
　`$colors` のインデックス１の要素を取り出して `$color` に代入する。
　（つまり１番目の `$color` は `#FF0000` ということ）
***
これで`red`と`#FF0000`をEach文を使って指定することができる。
Each文はリストの数だけ処理を繰り返すのでこの処理は `orange` まで続く。

## 実際使うとこんな感じ
```sass
@each $className in $classNames {
    $index_key : index($classNames , $className );
    $color : nth($buttonColor, $index_key);
    &__#{$className} {
    background-color: $color;
  }
}
```
【未完】Javaエンジニアがcosmosdb-chatgptを読むのに苦闘している その4（ビルド・デプロイ・エラー編）

# はじめに

Azure上にCosmos DBリソースを作成し、OpenAI ChatGPTのアカウントもある。
ということは、ローカルでビルドして実行できるのでは……？

# 今回読んだコード

## appsettings.json

Javaでいうところの*.propertiesをjsonで書くようです。
特にグローバルな？設定を書くのがappsettings.jsonのようです。

今回は、Azure Cosmos DBのURIとAPIキー、OpenAI ChatGPTのURIとAPIキーを更新しました。

# ビルド・デプロイ・実行

Visual Studio 2022でビルド、実行すると、`localhost:8100`でアプリケーションが起動します。
チャットを作って、こちらがプロンプトをかき込むと、Azure Cosmos DBにレコードができています。

# OpenAIに繋がらない（次回予告）

OpenAI ChatGPTのエンドポイントは、このプログラムでは利用できないようで、エラーを吐かれてしまいました。
確かに、Azure.OpenAIパッケージですもんね……。
そんなわけで次回は、以下の記事を参考にさせていただいて、Betalgo.OpenAIでOpenAiServiceを修正してみます。

https://qiita.com/TellMin/items/7baaba35111fddeffe0c
Cucumber.js + TypeScriptではまった話

[公式ドキュメント](https://cucumber.io/docs/guides/10-minute-tutorial/?lang=javascript)通りに進めていくと、実行したときにstepがundifiend(未定義)というエラーが出た
JavaScriptでstepファイルを作成すると成功したので、TypeScript周りの問題っぽい

とりあえずTypeScriptの実行に必要なts-nodeをinstall
```
npm install ts-node -D
```

で、cucumber.jsをこんな感じにしたら実行できるようになった
```javascript
module.exports = {
    default: [
        './test/features/**/*.feature', // 実行対象のfeatureファイルを指定。ここは先頭じゃないとダメ
        '--require-module ts-node/register', // ts-nodeを使うように指定
        '--require ./test/features/**/*.ts', // 実行対象のtsファイルを指定
    ].join(' '),
};
```

CLIではこんな感じでやるといける
```
cucumber-js --config cucumber.js
```

NODE_ENVの指定入れる場合はこんな感じ
```
NODE_ENV=test cucumber-js --config cucumber.js
```

cucumber.jsのオプションとかを調べまくってたけど、どうやらオプションの書き方によっては効いてない感じがする
(今回のように、無理矢理文字列くっつけるやり方だといける)
設定系のオプションは一応こちらを参照

https://github.com/cucumber/cucumber-js/blob/main/docs/configuration.md

調べた感じ、nodeのバージョン関係で動いたり動かなかったりしてるっぽい(今回僕が使っていたのはv18.12.0 (LTS))
一応、Cucumberのバージョンは9.1.2
6と7で大きい変更が入ったらしく、ちょっと調べるとそれ系のばっかりヒットしてきつかった...

これ以外は公式ドキュメント通りに問題なく動いた

おわり
PHP Warning:  PHP Startup: Unable to load dynamic library 'XXXXXX' の解決策

Laravelで開発を使用していて、PHPUnitを実行したときに下記のエラーが出たので、対処した時の備忘録
``` bash
PHPUnit requires the "dom", "json", "libxml", "mbstring", "tokenizer", "xml", "xmlwriter" extensions, but the "mbstring" extension is not available.
```

`php-mbstring`などをインストールしてもダメだったが、
`php8.1-mbstring`などのように使用しているPHPのバージョンでインストールすると解決した

```bash
sudo apt-get install php8.1-mbstring
```
ent で 簡易的なテストを書く

## ent とは
Facebook社(Meta)提供のGolangのORM。公式サイト: [ent](https://entgo.io/ja/)

## テストを書いてみる
### 使うもの
- [enttest](https://entgo.io/ja/docs/testing/)

### テストする関数とテーブル定義
後で書く

### テストコード
```go
import (
	"context"
	"testing"

	"<project>/ent/enttest"
	_ "github.com/mattn/go-sqlite3"
	"github.com/stretchr/testify/assert"
	"github.com/stretchr/testify/require"
)

func TestCreateTeam(t *testing.T) {

  ctx := context.Background()
  client := enttest.Open(t, "sqlite3", "file:ent?mode=memory&_fk=1")
  defer client.Close()
  err := client.Schema.Create(ctx)
  require.NoError(t, err)

  team := &setting.Team{
    Id:    1,
    Name: "エンジニアチーム",
  }

  _, err = client.Team.Create().
    SetName(team.Name).
    Save(ctx)
  require.NoError(t, err)
  
  team, err := CreateTeam(1)
  require.NoError(t, err)

  assert.NotNil(t, team)
  assert.Equal(t, "エンジニアチーム", team.Name)
}
```
Excelの資料を整った形で保存する方法

# Excelの資料をきちんと整理
 社会人になって、シートがたくさん多いExcelのファイルを扱うことが多くないですか？そんなExcelファイルをきれいな形で保存する方法をまとめました！

具体的には、Excelに以下の操作を行います。
- すべてのシートのカーソルの位置をA1に移動させる
- すべてのシートの表示率を100%にする
- 1枚目のシートに移動させる

# Excelのマクロ（VBA）
　マクロとは、エクセルの操作を自動化する機能であり、中身はVBA言語で記述されます。VBAは「Visual Basic for Applications」の略でExcelで使われるプログラム言語です。

このVBAを使ってExcelのファイルをきれいに保存します！

# 手順
## マクロ作成
1. 「Alt + F11」を押してVBEを起動させる 
　VBE（VisualBasicEditor）はVBAを記述するエディタのようなものです。
    ![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603981/3409a65d-409a-f3b2-bad9-1c45c06b90e5.png)

2. メニューバー「挿入」→「標準モジュール」をクリック
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603981/10bbaa5d-0eb5-8fc3-6724-fdaa77932fc7.png)

3. 作成したModuleに下記のコードを張り付ける
     ```Cursor_A1()
    Sub Cursor_A1()
    ' 画面更新を無効にすることで処理過程を見ない（目がチカチカしなくなる）
    Application.ScreenUpdating = False
    
    Dim ws As Worksheet
    Dim TargetCheck As String
       ' 各シートを順番に見ていく
       For Each ws In Worksheets
           ' カーソルをA1に移動
           TargetCheck = TargetCheck & ws.Name
           ' 表示しているシートを対象
           If ws.Visible = True Then
               ws.Select
               Range("A1").Select
               ' 表示位置を左上端に移動
               ActiveWindow.ScrollColumn = 1
               ActiveWindow.ScrollRow = 1
               ' 表示倍率を１００％に戻す
               ActiveWindow.Zoom = 100
           End If
       
       Next ws
    
       ' １枚目のシートに移動
       Sheets(1).Select
       ' 画面更新を再開させておく
       Application.ScreenUpdating = True
       ' 完了メッセージを表示
       MsgBox "処理が完了しました"
    
    End Sub

     ```
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603981/f093e42e-9bd2-83f4-363d-873dea582311.png)

## マクロ実行
- VBAで実行またはF5キーを押して「Cursor_A1」を実行させる
- Excel上で表示→マクロからでも実行できる
    ![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603981/730b7649-7e68-c638-dd09-6b60e4620e61.png)


## エラーが出る場合
　すべてのシートの整理はできますが、1枚目のシートに移動しないときがあります。そのときは、1枚目のシートが非表示になっている確率が高いです。

Excel上でホーム→書式→非表示/表示→シートの再表示から確認可能です！

# 最後に
　仕事で作成した資料を見やすいように保存しましょう！
【SwiftUI】動くグラデーションを作る方法

# はじめに
UIを作っていると、シンプルすぎて物足りなさを感じることがあります。
この記事では、そんな時に簡単にワンランク上のUIにするテクニックを紹介します。

# 作るもの
Colorfulというライブラリを使って、動くグラデーションを作ります。

# Colorfulとは
Colorfulは、簡単に動くグラデーションを作れるライブラリです。

# デモ
https://twitter.com/shota_appdev/status/1670273229943107584?s=61&t=E1MmtoZcT3VUETfZaCen2Q

# 準備
Swift Package ManagerでColorfulをインストールします。

https://github.com/Lakr233/Colorful

# 使い方
## 基本的な使い方
```swift
import SwiftUI
import Colorful

struct ContentView: View {
     var body: some View {
        ColorfulView()
     }
}
```

たったこれだけで動くグラデーションができます。

## 色を指定する
```swift
ColorfulView(colors: [.blue, .purple, .pink])
```

colorsで色を指定できます。

## その他の設定
```swift
ColorfulView(
    animated: Bool,
    animation: Animation,
    blurRadius: CGFloat,
    colors: [Color],
    colorCount: Int
)
```

# おわりに
Colorfulを使うと簡単に動くグラデーションを作ることができます。
ぜひ使ってみてください。
【未完】Javaエンジニアがcosmosdb-chatgptを読むのに苦闘している その3（bicep編）

# はじめに

少しDockerを触ったことはあれど、IaCはあまり触れずにきてしまったので、ここでも戦いです。

# 今回読んだコード

## azuredeploy.bicep

BicepというAzureのIaCのDSLです。
要は、cosmosdb-chatgptで利用するAzureリソースを作成するスクリプトということ。
以下の変更を加えて実行しました。

- OpenAI関係の部分を削除（Azureの個人アカウントを利用してみたため）
- LocationをEast USに変更（Azureのサブスクリプションに合わせた）
- githubのリポジトリを、個人アカウント（クローン）に変更
- ファイル名はazuredeploy_noopenai.bicepにした

加えて、bicepがAzureのリソースグループにリソースを作成する設定のため、リソースグループ`resource_group_1`を作っておきます。

実行はAzure CLIを使います。

```
az login
az deployment group create --resource-group resource_group_1 --template-file ./azuredeploy_noopenai.bicep
```

結果、githubのリポジトリをプライベートにしていたので、エラーが発生……しかし、Cosmos DB、App Serviceプラン、App Serviceを作成できました。

## azuredeploy.json

bicepが生成する中間ファイル……というか、もともとjson形式で、冗長だったためDSLにしたのがBicepということらしい。

# 感想

当たり前ですが、IaCは便利。
githubのアカウントのあたりは、後日直します。
Dartで現在日時＋１日する

## Dartで現在日時＋１日を取得したい
現在日時を取得するのは、

```dart
DateTime.now();
```
※デフォルトでは、ローカルタイム（日本であれば、日本時間）となる。
UTCに直したい場合は、toUtc()をつける。

```dart
now.toUtc();
```

ここに１日足すには、"Duration" を利用する。

```dart
DateTime.now().add(const Duration(days: 1));
```

"Dutarion" には、 "days" 以外にも、以下の引数が指定できる。
（こういうのがわかりやすいところが、dartの好きなところの一つです。）

```dart
  const Duration(
      {int days = 0,
      int hours = 0,
      int minutes = 0,
      int seconds = 0,
      int milliseconds = 0,
      int microseconds = 0})
```


### 参考にさせていただいたURL

https://medium.com/flutter-jp/datetime-17e618c8e26e

https://www.choge-blog.com/programming/dartdatetimeadddays/
UbuntuにFlaskとuwsgiとNginxを一気貫通する

### 本記事の背景
以前はRaspberryPiにてFlask＋uwsgi+Nginxを設定したことはあるが、
今回はubuntu上に同じように設定する
但し、参考となる記事が色々ばらけているので、本記事で実際の設定できていることをまとめる

### 本記事の前提
・すでにFlaskのアプリは構築済
・ubuntuインストール済
・uwsgiインストール済
・Nginxインストール済
・Pythonの環境構築は済

### 1.uwsgi.iniの設定
```terminal
[uwsgi]
callable = app 
master = true
socket = /tmp/uwsgi.sock
chmod-socket = 664
#wsgi-file = /home/akeyi2016/FlaskStudy/tutorial/hello.py
wsgi-file = /mnt/d/hello/hello.py
```
※　httpまたはsocketにアドレスやポート番号を指定する必要なし
※　nginxはsocketパラメータを受け取るため

### 2.uwsgiサービスの設定
```terminal
[Unit]
Description=uWSGI instance to serve flask
After=network.target

[Service]
User=akeyi2016
WorkingDirectory=/home/akeyi2016/FlaskStudy/tutorial
ExecStart=/home/akeyi2016/.local/bin/uwsgi uwsgi.ini

[Install]
WantedBy=multi-user.target
```
### 3.nginx.confの設定
```
user ※<www-data>だと動かない場合がある
http {
        ...
        include /etc/nginx/conf.d/*.conf;
        #include /etc/nginx/sites-enabled/*;
}
```

### 4.uwsgi.confの設定
```
server {
    listen 80 default_server;
    server_name _;

    location / {
        include uwsgi_params;
        uwsgi_pass unix:///tmp/uwsgi.sock;
    }
}
```
### 5.サービスを有効にする
```
sudo systemctl start nginx.service
sudo systemctl start uwsgi.service
```
### 6.常時起動は以下を設定
```
sudo systemctl enable nginx.service
sudo systemctl enable uwsgi.service
```

### 7.備考
```terminal
# uwsgi.serviceパス
/etc/systemd/system
# nginxファイル関連パス
/etc/nginx/nginx.conf
/etc/nginx/conf.d/uwsgi.conf
# nginxエラーログを確認する場合
tail /var/log/nginx/error.log -f
```
### 8.追加事項
nginx.confで以下user名をnginx実行ユーザ名へ変更する
```terminal
user www-data ->default
↓
user <ログインuser名>
```
### 参考文献
https://uwsgi-docs.readthedocs.io/en/latest/Nginx.html
https://amateur-engineer-blog.com/flask-uwsgi-nginx/
https://qiita.com/Jazuma/items/521cf31538cb618d285a
https://qiita.com/TrashBoxx/items/c4cbb2b2209c3bcb1689
https://qiita.com/akeyi2018/items/aeec3eb47416e51c3119
MIG(Multi Instance GPU)利用時の注意点メモ（デバイスの見え方関係）

MIG利用時にちょっと躓いたのでメモしておく。

### MIGを有効化していないとき
``CUDA_VISIBLE_DEVICES``を指定しなければ、システムに搭載されたGPUが全て見える状態になる。CUDAプログラム内の``cudaGetDeviceCount``で正しくGPU数を取得できるし``cudaGetDeviceProperties``でGPU情報を取得できる。

``CUDA_VISIBLE_DEVICES``でGPUの通し番号やUUIDを指定すれば、CUDAプログラム内の``cudaGetDeviceCount``で正しくGPU数を取得できる（特定のGPUだけを指定すればそれだけが見える）し``cudaGetDeviceProperties``でGPU情報を取得できる。

### MIGを有効化してあるとき
MIGを有効化し、GIやCIの設定をちゃんと行わずにCUDAプログラムを実行してしまうと、MIGが有効となっているGPUは見えない。``CUDA_VISIBLE_DEVICES``を指定したとしても、CUDAプログラム内の``cudaGetDeviceCount``でGPU数を取得する際にカウントされないし、``cudaGetDeviceProperties``でGPU情報を取得できない。

ややこしいことに、MIGが使えるGPUと使えないGPUが搭載されたシステムを利用する際にMIGを有効化したところ、``CUDA_VISIBLE_DEVICES``を指定しないと``cudaGetDeviceCount``の返すGPU数が0になり、``CUDA_VISIBLE_DEVICES``で0を指定してもGPUを見つけられないのに、1を指定するとMIGが無効なGPUが見えるというケースがあった。仕様なのかどうかは知らないが、大変気持ちが悪い。

GIとCIを作成して部分GPU（というか、この部部GPUこそがCIだよね）が有効な状態にすれば、``CUDA_VISIBLE_DEVICES``にCIのUUIDを与えればその部分GPUだけが見える状態でプロセスが起動する。``cudaGetDeviceCount``は1になり、``cudaGetDeviceProperties``ではMIGが有効となったGPUの情報が得られる。``cudaGetDeviceProperties``がCIを区別できるのかは不明。（uuidを出力してみたが、CIを変えても同じだった。）
ちなみに、1プロセスから見えるMIGの数は1つだけのようである点にも注意が必要である。

ということは、MIGを有効にしてしまうとフルGPUを使ったプログラム実行はできないわけで、性能の比較とかをする際には少し不便だなーと思うなどした。（MIGの有効無効を切り替えて再起動せねばならない。めんどくさっ！）
そんな使い方しないって？あっ、はい……。
マイクラ鯖のproxyをinfraredで構築してみた


# 検証環境
* 自宅鯖 BungeeCord + 各鯖 ポート 25565を開放
* vps(ubuntu)1個

## 用意したvpsにinfraredを構築する

https://github.com/haveachin/infrared
こちらのgithubを参考に構築していきます
``` shell
ufw allow 25565/tcp
mkdir /home/infrared  #infrared用のフォルダの作成
cd /home/infrared 
wget https://github.com/haveachin/infrared/releases/download/v2.0.0-alpha.14/infrared_Linux_x86_64.tar.gz 
tar -zxvf infrared_Linux_x86_64.tar.gz
```

これで導入は終わり次に設定をします。
```yml:/home/infrared/proxies/java-example.yml
   # This is an example config for a Minecraft java proxy.
# Feel free to use this as a template for other proxy configs
# or adapt it to your fit your setup.
#
java:
  gateways:
    # This is just the name of this gateway.
    # Since is your only gateways right now I would call it "default".
    # These names ARE global. Make sure to not have duplicates.
    default:
      listeners:
        # Same as the gateway. This is just the name of the listener.
        # Since is binds to port 25565 it makes sense that it is called
        # default for now.
        # These names ARE global. Make sure to not have duplicates.
        # 
        default:
          bind: :25565
          
          # Optional fields:
          # Also look at the defaults.yml file for more optional fields.
          #
          #receiveProxyProtocol: true
          #receiveRealIP: true
  servers:
    # This is again just the name of the server.
    # These names ARE global. Make sure to not have duplicates.
    #
    default:
      # We link this server to our default gateway.
      # That means that players that connect through any listener
      # in our "default" gateway can connect to this server.
      #
      gateways:
        - default
      
      # This is the domain that players enter in their game client.
      # You can have multiple domains here or just one.
      # Currently this holds just a wildcard character as a domain
      # meaning that is accepts every domain that a player uses.
      # Supports '*' and '?' wildcards in the pattern string.
      domains:
        - "*"

      # Address of the server that Infrared sends the players to.
      # 自宅鯖ip:開放port 
      address: 0.0.0.0:25565
      # Optional fields:
      # Also look at the defaults.yml file for more optional fields.
      #
      #proxyBind: 0.0.0.0
      #proxyPass: socks5://127.0.0.1:1080
      #sendProxyProtocol: true
      #sendRealIP: true
      #overrideStatus:
        #versionName: Infrared
        #protocolNumber: 0
        #maxPlayerCount: 0
        #playerCount: 0
        #iconPath: icons/default.png
        #motd: |
        #  Powered by Infrared
        #  §aServer at {{serverDomain}} is online.

```

色々項目がありますが変更点は一か所のみ以下のように自宅鯖のipと開放しているポートに書き換えてください。
```
# Address of the server that Infrared sends the players to.
# 自宅鯖ip:開放port 
address: 0.0.0.0:25565
```

その他細かい設定は英語を翻訳してね

ファイルを保存したら最後に
```
/home/infrared/infrared
```

以下のような状態になれば起動完了あとは screen で管理してみたり、systemdで自動起動するようにしてみたりするとよいかもね。

注意：これはあくまでのinfraredの構築のみを行っています、また私はITエンジニアではなく個人的に趣味でやっているのでセキュリティなどは個人の責任もと行ってください。
2023年４月頃からAdobe XDがインストールできなくなっている件について〜解決方法は２つ

![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478895/609264ba-f3b0-8834-1807-99b28427545b.png)

今日、会社でAdobe XDを使い始めようとしたところ
AdobeのCloud Creativeから
Adobe XDのインストールの表示が
なくなっていました。

これは、2023年4月ごろから存在している不具合のようで
6月中旬現在でも解消されていないみたいです。

その背景としては、AdobeのFigma買収が起因になっていそうです。
https://blog.adobe.com/jp/publish/2022/09/16/cc-intent-to-acquire-figma

※ちなみにAdobe XDの単体プランはサービス終了しているみたいです。
 なのでコンプリートプランの契約をしないとXDは使えなさそうです。

これについて、色々調べて探して問い合わせた結果
インストールするには２つの方法しかなさそうです。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
①Adobeに問い合わせてインストールのためのリンクをメールで受け取る
②（法人契約の場合）管理者にインストーラーを作成してもらう
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝


【①Adobeに問い合わせてインストールのためのリンクをメールで受け取る】

私の場合は、電話で問い合わせました。
（微妙に電話の返答にタイムラグがあるのが気になりました）

色々試した結果どれも不発だったため
インストールのためのリンクを送っていただけるとのことでした。
（実際は使わなかったのですが）

必要な情報としては下記です。
・Adobeのアカウント(アドレス、氏名)　※法人契約の場合は会社名も＋
・OS（私の場合はMac OS）
・Core（私の社用のPCの場合はIntel Core i7）

以上の３つを伝えたところ、24時間以内で使用できる
Adobe XDのインストールリンクを送付いただきました。



②（法人契約の場合）管理者にインストーラーを作成してもらう

法人契約の場合、管理者がインストーラーを作成することができます。
（私の場合、こちらの方法でXDを使用できるようになりました）

具体的な方法は、下記リンクの「マネージドパッケージ」部分を
ご参照下さい。
https://helpx.adobe.com/jp/enterprise/using/create-nul-packages.html



以上がAdobe XDをインストールする方法です。
ただpythonでhtmlリクエストしたかっただけなのに躓いたので、解決までをメモ

## はじめに
webスクレイピングするための前準備として、あるサイトのhtmlコンテンツを取ろうとしたらいきなり403エラーを吐かれたので、解決方法をメモしておく

## 発生した事象
```python
import requests

def RequestUrl(url: str) -> requests.Response:
    return requests.get(url)
```
ざっくりとURLを渡してリクエストするコードで、スクレイピングしたいサイトを渡したところ、__403 Forbidden__ が返ってくる

## さっそく結論
User-Agentを指定していなかった。より詳しくいうと、未指定の場合にpythonからリクエストする際にデフォルトで入る`"User-Agent": "python-requests/x.xx.x"`の場合に403を返されていた。
はじめに自分のuser-agentをコンソールから`navigator.userAgent`で調べて貼り付けていたが、試しに空文字を入れても２００で返ってきた
```python
requests.get(url, headers={'User-Agent': ''})
```
これでも大丈夫だった

## ユーザーエージェント・スニッフィング
ブラウザーを優遇するためにユーザーエージェント文字列を利用して機能の制限やアクセス可否の判定を行うことは、「ユーザーエージェント・スニッフィング」と呼ばれている。リクエストしようといたサイトでブラウザかスマホかの判定をしていて、python-requestsだとはねられたのかもしれない

## 新しいユーザーエージェント判別方法：User-Agent Client Hints
余談で、自分で簡単に書き換えられてしまうUser-Agnetに代わり、偽装が困難なUser-Agent Client Hints(UA-CH)が仕様策定中らしい

## おわりに
実験でいくつか別のサイトのURLを入れてみたが、UAで403が返ってきたのは目当てのサイトくらいだった。このケースはかなりレアだとは思うが、サイトによってはスクレイピングを防ぐために意図的にUAを見て対策するところもあるようなので、このケースがありうることを覚えておきたい
Rails6における非同期通信「コメント編」

## はじめに

### 実装したこと
Rails６におけるコメントの作成と削除の非同期化

### 動作環境
Ruby 3.1.2
Rails 6.1.7.3

## 手順
### jQueryを導入する
**gemではなく、yarnでインストールする。**
詳しくはわからないが、Rails6の場合はgem(Rubyのライブラリ)ではなくyarn(Railsmのライブラリ)からインストールする方が良い。
~~~
$ yarn add jquery
~~~
以上でインストールをする。

そして、以下の追記を行う。
~~~config/webpack/environment.js
const { environment } = require('@rails/webpacker')
// 以下追記
const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)
// ここまで
module.exports = environment
~~~

さらに、以下を追記する。
~~~javascript/packs/application.js
//中略

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// 追記
require('jquery')

//中略
~~~
以上で、JQueryは導入できました。

### コメントの非同期化を実装


<details><summary>まず、非同期化とは</summary>

非同期化とは、送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせずに通信を行う通信方式を指します。非同期を行えばコメントの作成をフォームから送信した際に、サーバからの結果を待たずに画面にコメントを追加できるようにすることができます。これはユーザ側にとって使いやすいサイトになるメリットがあります。
</details>

#### どの部分を非同期にするかを決める
~~~contents/show.html.erb
<div class="card">
  <div class="card-header">
    <h5 class="card-title">コメント欄</h5>
  </div>
  <div class="card-body">
    <div id="comments_list">
      <%= render "comments_list",content: @content %>
    </div>
    <%= form_with(model: @comment, url: content_comments_path(@content), local: false) do |f| %>
      <div class="form-group">
        <%= f.text_area :comment, class: "form-control comment-textarea" %>
      </div>
      <%= f.submit "コメントする", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>
~~~
form_withの箇所が、 local: false　のところが注意！　通常のlocal: trueの場合は同期通信をしてしまうので、非同期通信の場合はlocal: falseで記載をする。
そして以上の中で、今回は以下のコメントリストの部分を非同期化します。
~~~
<div id="comments_list">
  <%= render "comments_list",content: @content %>
</div>
~~~
部分テンプレートの中は以下のようにします。
~~~contents/_comments_list.html.erb
<% content.comments.each do |comment| %>
<div class="card mb-3">
  <div class="card-body">
    <p class="card-text"><%= comment.comment %></p>
    <% if comment.user == current_user %>
      <%= link_to '削除', content_comment_path(content, comment), method: :delete, remote: true, class: "btn btn-danger btn-sm" %>
    <% end %>
  </div>
</div>
<% end %>
~~~

※非同期化する箇所は必ずパーシャル（部分テンプレート）にしましょう。
※属性はidではなくてもよいが、idの場合値が重複しないようにするので今回は属性をidとしている。

#### Javascriptファイルを作成する。
views/comments に下記のファイルを作成し以下を記載する。
~~~create.js.erb
$("#comments_list").html("<%= j( render "user/contents/comments_list",content: @content )%>");
~~~
~~~destroy.js.erb
$("#comments_list").html("<%= j( render "user/contents/comments_list",content: @content )%>");
~~~
処理は同じのため、記載内容は同じになります。
ここでは jQueryの記述方法になっています。
~~~
 $(“セレクタ”).メソッド(“パラメータ[引数]”);
~~~
ここでは、$(“”)の部分にidを入れることでそこの部分を呼び出し、.html("");の部分で、htmlメソッドを使用しているので、HTMLに対して何をするか、どうするかを（）内に記述していく。
今回は先ほど作成した部分テンプレートを呼び出すようにしているので、以上の記載になります。
※<%= j~> ここjの部分は、Javascriptとして呼び出すと命令しているので記載をしないとエラーになります。

## 最後に
通常は、railsのファイルで、createやdestroyをindexやeditのようにファイルを作らないので違和感がありますが、これは慣れるしかないですね。
以上、随時編集していきます。


## 参考にさせてもらった記事
https://qiita.com/tatsuhiko-nakayama/items/b2f0c77e794ca8c9bd74

https://zenn.dev/airiswim/articles/2b8a49512614da
vimでカレントなバッファを直接grepする方法がない

vim/neovimにおいて、カレントなバッファの文章を検索して結果をQuickfixにリストアップするという機能は無いようです。
(nvim v0.8.3、vim9.0時点)

「vim buffer grep」などの単語でネットを検索するとそれなりの数の記事がヒットします。
それらの記事では大体は以下の方法が紹介されています。

```vim
:vimgrep {検索語} %
```

しかし、この方法は「バッファをgrepする」方法ではなく、「バッファで開いているファイルの内容をgrepする」方法です。
Exコマンドで`%`は現在開いているファイルパス文字列に展開されるので、上記はあくまで「ファイルに対してgrepする」操作です。

そうではなく、無名バッファの内容であったり、ファイルに保存前の編集中の状態だったりといった「バッファの内容そのもの」をgrepしたいとしてもその方法がありません。


Vim本体への実装提案
----

調べてみると、この「バッファを直接grepする方法」は実装を試みられたことがあるようです。
Vimの開発メーリングリストにて以下のスレッドがあり、それに続けてGithubでのプルリクエストも作成されています。

* [patch] allow to vimgrep current buffer 
  * https://groups.google.com/g/vim_dev/c/4fYjTCWtWLM
* Add bvimgrep command by chrisbra · Pull Request #858 · vim/vim · GitHub 
  * https://github.com/vim/vim/pull/858

2014年10月ごろにMLでの提案が出されて検討が行われ、2016年に`bvimgrep`というコマンド名で実装のPRが出されています。その後に`vimgrep[!] <buffer>`というコマンドが良いのではと方向転換された後に、2020年ごろに動きが止まってしまったようです。

プラグインでの代替
----

標準での機能が無いとなると、プラグインで代替機能を探すことになります。
私が見つけた方法としては、`coc.nvim`の`coc-lists`拡張を使う方法があります。

* neoclide/coc.nvim: Nodejs extension host for vim & neovim, load extensions like VSCode and host language servers. 
  * https://github.com/neoclide/coc.nvim
* neoclide/coc-lists: Common lists for coc.nvim 
  * https://github.com/neoclide/coc-lists

`coc-lists`拡張によって、`:CocList`コマンドに`lines`機能が追加されます。これが、バッファを検索した結果を一覧表示することができます。
操作例は以下のようになります。

```
:CocList lines
↓
検索用モードになるので、`INTERACTIVE>`に検索したい正規表現を入力
↓
<C-o>をキー入力してnormal modeに移行
```

ちなみに、この時の検索結果一覧の表示はQuickfixそのものではありません。あくまでcoc.nvim固有の機能です。coc.nvimでは、CocListでの検索結果をQuickfixに移す方法があるので、それを組み合わせることもできます。

```
CocListでの検索結果のnormal mode状態において、操作対象の行を選択する
（<Space>で１行ずつにToggleで選択on/offしたり、Visualmodeで行を選択状態にする）
↓
<Tab>キーで操作メニューを表示
↓
<q>キーでQuickfixに送る
↓
Quickfixが開き、選択された検索結果の一覧が表示される
```

ただし、残念ながら無名バッファの場合はQuickfix上で検索結果の行の内容などは表示されません。
(coc.nvim version: 0.0.82-79e9e048 2023-02-15 時点）


おまけ：Quickfixを使わずに似たようなことをする方法
----

私がバッファの内容を検索したいシチュエーションは、`tail -n 100 application.log | vim -` という感じで、ターミナルで何かのコマンドを実行し、その結果をvimで見るときです。
上記操作に続けてvim上で内容を調べる時に、ある検索結果にマッチした行のみを抜粋したいときは`:global`(`:g`)コマンドで以下のようなことができます。

### 1. マッチした行のみの内容にする

```
:g!/{検索語}/d
```
`:g!`で検索語にマッチしなかった行を操作対象として、`d`でその行を削除する。（→ 結果的にマッチした行のみの内容になる）

### 2. バッファの内容を維持したまま、マッチした行のみを抜粋する

```
:g/{検索語}/copy $
```
`:g`で検索にマッチした行を`copy $`でバッファの末尾(`$`)に行コピーする。

### 3. マッチした行と、マッチしなかった行を分ける

```
:g/{検索語}/m$
```
`m$`(`move $`)でマッチした行をバッファの末尾に移動させる。マッチしなかった行は元の場所に残っている。
任意のJSONファイルのデータベースのテーブル情報からモデルファイルを生成するプログラムをCHatGPTに作らせてみた。

以下のようなデータベースのテーブル情報のJSONファイルがあるとします。
```json
{
	"table_name": {
		"id": "int",
		"name": "string",
		"price": "int",
		"created" : "datetime",
		"modified": "datetime"
	}
}
```

このJSONファイルからデータベースのモデルクラスとして自動生成させることはできないかとChatGPTに書かせてみた。
```
#命令文:
あなたは、超優秀なPHPのプログラマーです。
以下の制約条件と入力文をもとに、最高のプログラムを出力してください。

#制約条件:
・PHP8基準とする

#入力文:

{
	"table_name": {
		"id": "int",
		"name": "string",
		"price": "int",
		"created" : "datetime",
		"modified": "datetime"
	}
}

このようなJSONファイルがあった場合、

このJSONファイルの情報をもとに、モデルクラスを自動で作るファイル出力プログラム( ModelGenerator)を作ってください。

また、コマンドプロンプトから入力ファイルである*.jsonファイルを指定すると、テーブル名のファイル(*.php)を出力するようなものを作る
```
生成されたPHPのコードがこちら。
-------
以下は、指定された制約条件と入力文に基づいて、モデルクラスを自動生成するPHPプログラムの例です。

```php
<?php

class ModelGenerator {
    private $tableName;
    private $columns;

    public function __construct($tableName, $columns) {
        $this->tableName = $tableName;
        $this->columns = $columns;
    }

    public function generateModel() {
        $modelCode = "<?php\n\nclass {$this->tableName} {\n";
        
        foreach ($this->columns as $columnName => $columnType) {
            $modelCode .= "\tprivate \${$columnName};\n";
        }
        
        $modelCode .= "\n";
        
        foreach ($this->columns as $columnName => $columnType) {
            $modelCode .= "\tpublic function get{$columnName}() {\n";
            $modelCode .= "\t\treturn \$this->{$columnName};\n";
            $modelCode .= "\t}\n\n";
            $modelCode .= "\tpublic function set{$columnName}(\${$columnName}) {\n";
            $modelCode .= "\t\t\$this->{$columnName} = \${$columnName};\n";
            $modelCode .= "\t}\n\n";
        }
        
        $modelCode .= "}";
        
        return $modelCode;
    }
}

// 入力ファイルのパスをコマンドライン引数から取得
$inputFilePath = $argv[1];

// 入力ファイルの内容を読み込む
$inputData = file_get_contents($inputFilePath);

// JSONを連想配列に変換
$inputArray = json_decode($inputData, true);

// テーブル名を取得
$tableName = key($inputArray);

// カラム情報を取得
$columns = $inputArray[$tableName];

// ModelGeneratorインスタンスを作成
$modelGenerator = new ModelGenerator($tableName, $columns);

// モデルクラスを生成
$modelCode = $modelGenerator->generateModel();

// モデルファイル名を作成
$modelFileName = $tableName . ".php";

// モデルファイルにコードを書き込む
file_put_contents($modelFileName, $modelCode);

echo "モデルファイルが生成されました: {$modelFileName}\n";
```

上記のプログラムをPHPファイル（例：ModelGenerator.php）として保存し、コマンドプロンプトから以下のように実行します。

```
php ModelGenerator.php input.json
```

ここで、input.jsonは入力ファイルのパスです。

このプログラムは、入力されたJSONファイルの情報を解析し、モデルクラスのコードを生成します。生成されたモデルクラスは、指定されたテーブル名のファイル（例：table_name.php）に出力されます。モデルクラスには、各カラムのゲッターとセッターメソッドが含まれます。

なお、上記のプログラムは基本的な実装であり、実際の使用に応じてエラ

ーハンドリングや入力のバリデーションなどを追加することが推奨されます。