OmniAICreator/Qiita-1.07M huggingface dataset:
VisualStudioで.gitignoreを自動で作成する

# 1. はじめに
* GitへコミットしたC#のプログラムソースで管理不要なファイルを除外したい
* .gitignoreファイルの書き方を理解せず、自動で作成したい

# 2. 作成方法
## 2.1. Powershellを起動する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/fcba82d8-fdbb-d9f0-3300-26e77b34ea83.png)

## 2.2. .gitフォルダがある場所へCDする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/d579074c-fdc2-1802-d71c-52b01cc11ed0.png)

## 2.3. ```dotnet new gitignore```コマンドを実行する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/ffaddd36-57b8-1805-8049-15c10b79bb85.png)

## 2.4. ```.gitignore```ファイルが作成される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/2b5d71c6-58c0-3324-fcb0-7850ce88444c.png)

# 3. 参考文献
https://largo.life/freedom/archives/68
pylintをLinter, BlackをFormatterとして導入する [VSCode]

# 概要
PythonでもLinter, Formatterを使いたいと思い、検索したところ、
色々ありましたが、Formatterとしては厳しめのBlack、Linterのpylintを
使ってみることにしました！
VSCodeの拡張機能＋αで簡単にできる内容なので、ぜひやってみてください〜🙌

LinterやFormatterのメリットは以下の記事が参考になります！

https://qiita.com/navitime_tech/items/0a431a2d74c156d0bda2

# 導入
## pylintの導入
まずは、拡張機能で`pylint`と検索し、インストールしましょう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/90da0263-494b-6eae-303b-be4c142e3038.png)


## Blackの導入

次に、`Black`も拡張機能で検索し、インストールしましょう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/0c0d2bb6-c636-f06f-8ae7-d8e83c8154f6.png)


## 設定の編集
最後に、プロジェクトの直下に`.vscode/settings.json`を作成します

:::note wa
VSCode自体の設定ファイルを変更しても問題ありません
:::

```js:settings.json
{
  // pylintの有効化
  "python.linting.pylintEnabled": true,
  // pythonのlinterを有効化
  "python.linting.enabled": true,
  // formatterとしてBlackを設定
  "python.formatting.provider": "black",
  "[python]": {
    // Pythonのコードサジェストを有効にする
    "editor.wordBasedSuggestions": true,
    // VSCodeのデフォルトのフォーマッターにblackを指定
    "editor.defaultFormatter": "ms-python.black-formatter",
    // ファイルの保存時（command+s or ctrl+s）でコード整形
    "editor.formatOnSave": true
  }
}
```

# 最後に
いかがでしたでしょうか？
普段の筆者はJavaScript/TypeScriptを使っていてLinter, Formatterが当たり前にある中
Pythonはないのかなぁ、と探した結果、見つかったので良かったなぁと思っています！
どのLinter, Formatterが適しているか、は使う方によっても変わってくるかもしれないので
検討してみるのも面白いかもしれませんね✨

筆者は以下の記事を参考に検討しました！

https://zenn.dev/naiq112/articles/df1b32fc08d383

Linter, Formatterを設定して
コードを安全に、わかりやすく運用しましょう！
それでは👋


# 参考文献

https://qiita.com/navitime_tech/items/0a431a2d74c156d0bda2

https://zenn.dev/naiq112/articles/df1b32fc08d383
enumerate

### はじめに
leetcodeの問題を解いていて解けたものの計算量がO(n^2)になってしまいました。
解説にO(n)のものがあり、`enumerate`を使っていて感動したので残しておきます。

### enumerate
forループを使うとき引数にインテラブルオブジェクトを指定すると要素とindex番号を取得できる。

＊インテラブルオブジェクトとは、forループを使って取り出すようなオブジェクトのこと。
リスト、辞書、タプル、文字列など

`enumerate`の使い方は以下。
```python
nums = [1, 10, 100]
for i, num in enumerate(nums):
    print(i, num)
```
実行結果は
```
0 1
1 10
2 100
```

### 使った結果
使う前はfor文の中にfor文を入れてこんな感じになってました。
```python
class Solution:
    def twoSum(self, nums: List[int], target: int) -> List[int]:
        answer = []
        for i in range(len(nums)):
            target_copy = target - nums[i]
            for j in range(len(nums)-1):
                if j != i:
                    if nums[j] == target_copy:
                        answer.append(i)
                        answer.append(j)
                        return answer
```

enumerate、辞書を使うと以下のようになる。
```python
class Solution:
    def twoSum(self, nums: List[int], target: int) -> List[int]:
        tmp = {}
        for i, num in enumerate(nums):
            target_copy = target - num
            if target_copy in tmp:
                return [tmp[target_copy], i]
            tmp[num] = i
```
実行速度がとても速くなりました。ただ、二つ目の方がメモリをたくさん使ってしまうらしい。


### 最後に
実行速度とメモリのバランスが難しいです。間違っている箇所があったら教えていただけると嬉しいです。
2023年1月振り返り〜ITIL勉強しはじめました~

## はじめに

**転職して1年は振り返りを投稿しよう！** と決めていましたが
決めていなかった2年目きれいに止まりました←

そして年末に昨年1年を振り返ったときに、アウトプットの少なさ、
そもそも振り返りがしづらい環境になっていたなと。

その理由の1つがこの月次の振り返りを止めたことだと思うのでまた再開します。
読んでいただいた方へ学びを提供したい！というよりは自分へのためになっちゃうので
暇つぶし程度に読んでいただければと、、


## 2023年1月のざっくり何してた？
年末年始はreactの勉強でチャットボット作ってみたり、
よくアプリの最初に出てくる[ガイド](https://reactour.js.org/)？を実装してみたり
作ってみたいもの作っていました。

毎年年始にテーマを決めているのですが今年は **「考動、形にする」** としました。
昨年はがむしゃらさはあったと思いますが、何ができた？と聞かれると何もできていないなと。
今年は考えて動く→アウトプット、結果にこだわる1年にしたいと思っています。


今年から勉強時間もざっくり記録しておこうと思い、アプリで計測してみました。
完全な自己満足とわかっていながらも積み重なっている感覚がほしく。
![](https://storage.googleapis.com/zenn-user-upload/832f0a5ebc15-20230205.jpg)
慣らすと1日1時間ちょっとでした、、
数値として出ると少なさ実感できるのでまた今月は増やしていきます。
このアプリを開発されているbondavi株式会社さんのHPや考え方がおもしろかったので
リンクシェアさせていただきます。

https://bondavi.jp/

今月読んだ本の中でおもしろかったのはこちらの2冊。

https://amzn.asia/d/dsmrglZ

https://amzn.asia/d/dPhHZtB

どちらも原理原則、基本のきではありますが、、大事だなと。
「プログラムはなぜ動くのか」はエンジニアとして転職してすぐ読んではいましたが、
読み直すと当時と全然理解度が違いました。学び直しも大事。

## 印象に残ったトピック
トピックはこんな感じです。
**①社内で仕事の仕方に対しての研修があり、自身の行動も変化を感じられたこと**
**②ITILを本格的に勉強し始めたこと**
**③システムを使っていただいている企業様のアワードがあったこと**

今月はこの中から2つ書きます。

#### ②ITILを本格的に勉強し始めたこと

年末にもインシデント管理について投稿していましたが、
1月末にITILのファンデーションの試験受けてきました。
![](https://storage.googleapis.com/zenn-user-upload/17e714ed4d37-20230205.png)
試験を申し込むことで学ぶ速度も加速するかなと思いましたが、
実際は試験があるから、という理由ではあまり変わらなかったです。
それよりも実務の中で **「これはITILに即して考えると問題管理だ」** とか
**「インシデント管理の観点でこれはいいんだっけ」** とか考えるほうが
何倍も楽しかったですし、学びがいがあるなと。
今はITILで学んだところを業務でも関わらせていただいているので、ありがたいなと。
業務（アウトプットする機会）があることが1番だなと感じました。
一方でそれが100%になると結構視野が狭くなるというか、遊び心がないというかなんというか。
ここのバランスはとっていきたいところです。



2つ目。
#### ③システムを使っていただいている企業様のアワードがあったこと

普段システムを使っている企業様とリアルでお会いすることができ、
そもそも導入を決めた背景だったり、何を実現したいのか、熱量や思いを感じられ、
ここまで信じて期待してくださっているんだなと。
一般的にはという話になりますが、
何か思いを持ってシステムを使っていたり、
作り手とユーザーが接する機会があったりというケースはとても少ないのではないかなと。
自分の仕事の価値を感じられる瞬間って様々あるとは思いますが、
ここまで**開発者が手触り感を持つことができる**のは個人的にはやりがいに大きく繋がります。

一方で、期待していただいているのに応えられているのか、裏切っていないのかと
自分に対して問いかけてみたり。
良いものを作りたい、応えられるようになりたいと改めて思います。頑張ります。


トピックのうち
**①社内で仕事の仕方に対しての研修があり、自身の行動も変化を感じられたこと**
については成果の実感が出てきたらまた記載できたらと思います。



## 終わりに
つらつらと思うままに書いてみましたが、濃い1ヶ月だったんだなと。
良い意味で感情が動く場面が多かったり、考える機会を増やすことができたり、
年始からから濃い1ヶ月を過ごしました。ありがたい。
まずは来月も続けること、書きたいことたくさんとなるようこの1ヶ月も過ごしていきます。
WordPress6.1からregister_block_typeのパラメータの書き方変わりました

[register_block_type](https://developer.wordpress.org/reference/functions/register_block_type/)の第２引数の連想配列において``editor_script``や``editor_style``などが``editor_script_handles``、``editor_style_handles``など``_handles``が付いた形に変わり複数同時に指定できるようになりました。

そして、**旧来の``editor_script``や``editor_style``の指定がDeprecatedになってます。**

まだ動きますが、Deprecatedってことはいつか動かなくなるかもしれないってことなので、要対応ですね。

```php
register_block_type('myblocks/myblock',[
	'editor_script'=>'editor-script-handle',
	'editor_style'=>'editor-style-handle'
]);

↓

register_block_type('myblocks/myblock',[
	'editor_script_handles'=>['editor-script-handle'],
	'editor_style_handles'=>['editor-style-handle']
]);


```

参考：https://core.trac.wordpress.org/browser/tags/6.1/src/wp-includes/class-wp-block-type.php#L245


```
@since 6.1.0 Added the `editor_script_handles`, `script_handles`, `view_script_handles`,
`editor_style_handles`, and `style_handles` properties.
Deprecated the `editor_script`, `script`, `view_script`, `editor_style`, and `style` properties.
```
【Ubuntu】Linux用Spotify・・・HiDPI対応が動いていない感、への対応。

# UbuntuにSpotifyをインストール・・・老眼で見えないとかいうレベルじゃない表示の小ささ。

HiDPI対応が動いていない感。

Spotify動くデバイスは手元にたくさんあるものの、せっかくUbuntu上で動くのに実用できないのも悔しいので頑張ります。

# Ubuntuのバージョン

``` :terminal
$ cat /etc/os-release
NAME="Ubuntu"
VERSION="20.04.5 LTS (Focal Fossa)"
```

# まずは検索

ああ、なんだか「Linux用Spotifyクライアント、HiDPIモニターだと使いもんになんねーぜ。」と2015年から既に嘆きの声が。
- [Linux client barely usable on HiDPI displays](https://community.spotify.com/t5/Desktop-Linux/Linux-client-barely-usable-on-HiDPI-displays/td-p/1067272)

なんとなく--force-device-scale-factor=1.5とかで起動時の表示倍率足してあげれば良さそうな感じ？

とはいえここにはファイルがなかったり
/usr/share/applications/spotify.desktop 

このファイルを修正しても変わらなかったり
/var/lib/snapd/desktop/applications/spotify_spotify.desktop

# 解

もうここから先はリンク先の方の記載を見ていただければOKな感ですが・・・追試。
追試成功、無事老眼でも耐えうる表示になりました。

- [UbuntuでSpotifyアプリを使うtips](https://qiita.com/k0kubun/items/7a156786f983755d186f)
- [[Ubuntu] Spotify を HiDPI に対応させる (20.04)](https://zenn.dev/sprout2000/scraps/750a5c8f8d9dc2)

1. spotify_spotify.desktopを自ユーザーの~/.local/share/applications/にコピー
    ``` :terminal
    $ cp /var/lib/snapd/desktop/applications/spotify_spotify.desktop ~/.local/share/applications/
    ```
1. --force-device-scale-factor=2.0 を追加
    ``` diff:~/.local/share/applications/spotify_spotify.desktop
    - Exec=env BAMF_DESKTOP_FILE_HINT=/var/lib/snapd/desktop/applications/spotify_spotify.desktop /snap/bin/spotify %U
    + Exec=env BAMF_DESKTOP_FILE_HINT=/var/lib/snapd/desktop/applications/spotify_spotify.desktop /snap/bin/spotify --force-device-scale-factor=2.0 %U
    ```
1. 再起動
GUIシェル再起動で大丈夫ですが、クライアント用途であれば潔く再起動でもよいかと。

# 謝辞

お陰様で無事Ubuntu上でSpotify使えます　m(_ _)m
- [UbuntuでSpotifyアプリを使うtips](https://qiita.com/k0kubun/items/7a156786f983755d186f)
- [[Ubuntu] Spotify を HiDPI に対応させる (20.04)](https://zenn.dev/sprout2000/scraps/750a5c8f8d9dc2)
オブジェクト指向とは何かを具体的に書いてみた

# はじめに
この記事ではオブジェクト指向についてまとめてみました。

# この記事の対象者
　 未経験〜Java開発3年未満

# オブジェクト指向とは
オブジェクト指向で検索すると様々な解説が出てくるが、下記の内容でオブジェクト指向を表すことにした。

**オブジェクト指向は設計手法の一つである。**

ここで示す設計とは実装の準備のこと。
具体的に設計とは分割と結合を考えるである。
設計の目的はコスト削減をすること。

設計手法には大きく2つのアプローチがある。

**オブジェクト指向（インサイドアウト）**
データに着目して内側（データの裏側）から先に作ること。（ビジネスロジック = ビジネス上のルール = データの扱い方）
<dl>
  <dt>メリット</dt>
  <dd>・仕様変更に強い。</dd>
  <dt>デメリット</dt>
  <dd>・設計スキルのレベルが求められる。</dd>
</dl>


**構造化設計(アウトサイドイン)**
業務の流れに基づいて、設計する。日本で多く使われている設計。
<dl>
  <dt>メリット</dt>
  <dd>・業務の流れに基づくので理解しやすく、分かりやすい仕様なので、誰でもアサインしやすい。コスト削減につながる。</dd>
  <dt>デメリット</dt>
  <dd>・仕様変更に弱い。（UIの部分が最も変更が多い。）</dd>
</dl>

# まとめ

設計のやり方として、どのようにソフトウェアを作っていくかが重要なためオブジェクト指向を学ぶ必要がある。

# 参考文献
* [スッキリわかるJava入門](https://sukkiri.jp/books/sukkiri_java3)
* [Java SE 7/8 Bronze問題集（黒本）](https://book.impress.co.jp/books/1119101075)
* [構造を決定するテスト | Think IT（シンクイット）](https://thinkit.co.jp/article/13737)
Leetcode 438. Find All Anagrams in a String

https://leetcode.com/problems/find-all-anagrams-in-a-string/

## アプローチ
### Brute force

```java
class Solution {
    public List<Integer> findAnagrams(String s, String p) {
        List<Integer> result = new ArrayList<>();
        int len = s.length() - p.length();
        int pLen = p.length();

        int[] cnt = new int[26];

        for (char pChar : p.toCharArray()) {
            cnt[pChar - 'a']++;
        }

        for (int i = 0; i <= len; i++) {
            int[] cntTemp = new int[26];
            for (int j = i; j < pLen + i; j++) {
                char sChar = s.charAt(j);
                cntTemp[sChar - 'a']++;
            }

            if (Arrays.equals(cnt, cntTemp)) {
                result.add(i);
            }
        }

        return result;
    }
}
```
駆け出しエンジニアがTailwindcssを使ってみた

# SpringBoot・React・MysqlのTodoアプリにTailwindcssを使ってスタイルを当ててみた

## Tailwindcssとは
https://tailwindcss.com/

htmlのクラス属性に特定の文字を記述することでスタイルを当てることができる。

導入方法も簡単で下記サイトかのコマンドを実行したり、記述を追加するだけで使えるようになります。

https://tailwindcss.com/docs/installation


アプリ内での記述例
```javascript
<Link
    className='px-4 py-2 mx-4 text-gray-700 hover:text-white border border-lime-600 hover:bg-lime-700 rounded-md'
    to={`edittodo/${todo.id}`}>
    編集
</Link>
<a
    className='px-4 py-2 cursor-pointer text-gray-700 hover:text-white border border-red-500 hover:bg-red-600 rounded-md'
    onClick={() => deleteTodo(todo.id)}>
    削除
</a>
```

BootStrapをCSS特化にしてデザイン幅を広くしたような感じ?

クラス名が長くなってしまうので若干読みづらいですが簡単にスタイルを当てることができます。


前回(https://qiita.com/Takatsuna/items/3587d19627c1d84a4839)
作成したTodoアプリがあまりにも無骨だったためTailwindcssを使ったスタイリングを学んでみました。

## 使用した教材

【tailwindcss】CSSが苦手な人向け じっくり取り組んでみよう【次世代のCSS】【わかりやすさ重視】

https://www.udemy.com/course/tailwindcss_beginner/learn/lecture/23699738?start=0#content

基本version2での講座ですが最新のversion3の内容も一部ございます。

ちなみになぜTailwindcssを選んだのかというと、研修ではBootStrapを使っていたのですがデザインがありきたりになってしまい個人的にそれが嫌だったのと
最近?Tailwindcssが人気ということだったためです。

## 前回のデザイン
![image.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523157/a7226b3e-420a-53e5-ead5-0ea13722aed8.jpeg)
![image2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523157/1bc6e298-f46e-8020-5df9-ea3ad404551f.jpeg)

## スタイル変更後
![スクリーンショット 2023-02-05 9.53.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523157/38964402-df32-0249-a542-6cbd85a8307b.png)
![スクリーンショット 2023-02-05 9.51.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523157/036ff030-dec5-fde6-58e2-df180c61e5d8.png)
## こだわったところ
ボタンのホバー時のデザインに少しだけこだわりました。
```javascript
<button
    className='px-8 py-2 mx-12 text-xl rounded-md text-gray-50 bg-blue-600 hover:bg-blue-700 hover:filter-none drop-shadow-lg hover:drop-shadow-xl hover:translate-y-0.5'
    type='submit'
    onClick={onSubmit}>
    追加
</button>
```
このように「hover:」に続けてクラス名を記述することでホバー時のスタイルを当てることができる。

![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523157/5ff8ebac-8721-c0d6-6572-049a16bc6932.gif)

CSSの学習で挫折した者にとってはかなり楽ちん。

## 課題
今後アプリを開発していく中でレスポンシブ対応が必要になると思いますが、今回はあまり意識せず進めてしまいました。

なので例えば下記のように画面を狭めた際に\<label>の説明が下に寄ってしまうなどレイアウトが崩れてしまいます。
![スクリーンショット 2023-02-05 10.08.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523157/c5fc7766-9e0b-be1c-016f-92090657a40f.png)
Tailwindcssではレスポンシブ対応も簡単にできるので今後はその辺も意識しながらスタイルを当てていきたいと思います。

とりあえずバックエンドからフロントまで一通り実装できたので、新しいアプリケーションを作っていきたいです。

あとはデプロイなど本番移行関連も学ばないと...。
令和4年度秋期応用情報技術者試験午前問題見直し[自分用]

応用情報技術者試験過去問を解いたので、間違えた問題を中心にアウトプット。

<h3>テクノロジ系</h3>

①機械学習における過学習とは、訓練データを学習させすぎた結果、訓練データ範囲の傾向に過剰適合してしまうことである。これにより、未知のデータに対する予測精度が低くなる。
<br>
②XMLの仕様によると、XMLのデフォルト文字コードはUTF-8であり、UTF-8とUTF-16は符号化宣言を必要としないとされている。<br>
③ディープラーニングでは、システムに学習をさせる際に行列演算を含む大量の並列演算が必要なので、同じ種類の計算を大量に行うことに特化したGPUが活用されている。
<br>
④電気泳動型電子ペーパーは、マイクロカプセル内の白色と黒色の帯電粒子を、電圧を印加した電極により移動させて白黒の画面を表示させるものである。
<br>
⑤コンテナ型仮想化では、物理サーバのホストOSと仮想化ソフトウェアによって，プログラムの実行環境を仮想化するので，仮想サーバに個別のゲストOSをもたない。
<br>
⑥割込み処理ルーチンは，最も優先度の高いタスクよりも優先して実行される。
<br>
⑦ダイオードは、電流を一方向にしか流さない整流作用をもつ。
<br>
⑧フラッシュメモリは、あらかじめブロック単位で前のデータを消去してから書込むことでデータの書換えを行う。
<br>
⑨DHCPによる自動設定を行うPCに，DHCPサーバのアドレスを設定しておく必要はない。
<br>
⓾オープンリゾルバとは、アクセス制限を行わず、インターネット上のどこからでも名前解決の問い合わせに応答する状態になっているキャッシュDNSサーバーのことである。
<br>
⑪サイドチャネル攻撃は、対象の動作状況を観察し、漏洩電磁波・電力消費等のサイドチャネル情報から暗号鍵推定等を行う非破壊型解析攻撃の総称である。
<br>
⑫OCSPは、ディジタル証明書が失効しているかどうかをオンラインで確認するためのプロトコルである。
<br>
⑬JVNは、日本で使用されているソフトウェアなどの脆弱性関連情報とその対策情報を提供し、情報セキュリティ対策に資することを目的とする脆弱性対策情報ポータルサイトである。
<br>
⑭リスクアセスメントは、リスク特定、リスク分析、リスク評価で構成される。
<br>
⑮ブロードバンドルータは、家庭内の複数の端末が同時にインターネットに接続できるように、IPマスカレード(NAPT)の機能を備えている。
<br>
⑯ウォークスルーは、開発メンバが行う設計書やソースコードの検査である。
<br>
⑰FTAは、樹形図を使って障害原因分析を行う。
<br>
⑱テスト駆動開発は、求める機能を明確化するためにプログラムを記述するよりも前にテストケースを作成する手法である。
<br>

<h3>マネジメント系</h3>

⑲KPT(ケプト)手法は、ふりかえりの際に、継続すべき良かった点（KeeP）、発生した問題（Problem）、今後試したいこと（Try）を開発チーム全員で考えるフレームワークである。

<br>

⑳プロジェクトにおけるスコープとは、プロジェクトの成果物及び成果物を作成するために行わなければならない全作業を定義したものである。
<br>

<h3>ストラテジ系</h3>

㉑BCPは、予期せぬ重大災害が発生した場合に、必要最低限の事業を継続しつつ、業務を早期に復旧・再開できるようにするための行動計画である。
<br>
㉒コンティンジェンシープランは、事故や災害など予期せぬリスクが現実化した場合に、自社が被る損害を最小限にとどめて、速やかに事態の克服を図るための緊急事態対応計画である。
<br>
㉓デューデリジェンスは、ビジネスの実態、財務状況、取引先、所有する不動産、リスク、知的財産権、従業員との関係など、買収対象企業のあらゆる事項について入念に詳細な調査を行うことである。
<br>
㉔ターゲットリターン価格とは、コスト志向型の価格設定法で、目標とする投資収益率(ROI)を達成するために得るべき金額を計算し、それを原価に加えて販売価格とする方法である。
<br>
㉕コンジョイント分析とは、商品がもつ価格，デザイン，使いやすさなど，購入者が重視している複数の属性の組合せを分析する手法である。
<br>
㉖APIエコノミーとは、他社から提供されるWeb APIを連携・活用してサービスや価値を創出する事である。
<br>
㉗サイバーフィジカルシステムとは、実世界（フィジカル空間）にある多様なデータをセンサーネットワーク等で収集し、サイバー空間で大規模データ処理技術等を駆使して分析／知識化を行い、そこで創出した情報／価値によって、産業の活性化や社会問題の解決を図っていくものである。
<br>
㉘SL理論は、部下や集団（フォロワー）の能力及び意欲の水準（レディネス）ごとに、有効性が高いリーダーシップのスタイルを示したモデルである。

㉙デルファイ法は、複数の専門家からの意見収集、得られた意見の統計的集約、集約された意見のフィードバックという三手順を繰り返して回答を収束し、最終的な意見を得るものである。


<h3>まとめ</h3>

Twitterフォローよろしくお願いします。
プログラミング等々呟いてます。
【初級】pythonのclassやmoduleを考える

記載日：2023/02/05
pythonのclassやmoduleについて、自分なりに考えてみました。
そんなに知見があるわけではないのですが、実際のコードを書いてみて感じたことを記載します。同じ疑問を感じた方にとって、少しでも疑問解消の助けになればと思います。

## 流れ
以降では、以下のように進めていきます。
　・まず、classとmoduleのそれぞれで同じ機能を書いてみる。
　・次に、それぞれを比較して分かることを考えてみる。

結論を書くと、それぞれに良いところがありました。使う状況によって使い分けていくことになりそうです。
　・moduleのメリット
　　　module(\_\_init__.py)のコード量が少なく、Main.pyでの呼び出しもシンプル（インスタンスを作ってない）
　・classのメリット
　　　classではインスタンスを作ることで、複雑な機能をMain->classへ委任（委譲）できる。
　　　（コンストラクタによる共通引数の一括渡しや、メソッド間で共用できるprivate変数の使用ができる。）

## classとmoduleの具体例
以下プロジェクト構成を考えてみます。
このプロジェクトでは、ユーザの指定する数字と"count"とを足し算することを5回します。
"count"は、1からスタートし、足し算が行われる毎に1増えることとします。

　プロジェクト
　　|
　　|－Classes
　　|　　|
　　|　　|－Calc.py
　　|
　　|－Modules
　　|　　|
　　|　　|－Calc
　　|　　　　|
　　|　　　　|－\_\_init\_\_.py
　　|
　　|－Main.py


### classを使った場合

<details>
<summary>Classes/Calc.pyのコード</summary>
<div>

~~~python
class Calc:
    def __init__(self, count):
        self.count=count

    def SumCount(self, num):
        return num+self.CountUp()

    def CountUp(self):
        self.count+=1
        return self.count
~~~

</div></details>

<details>
<summary>Main.pyのコード</summary>
<div>

~~~python
import sys
from Classes.Calc import Calc as CalcC

def Main():
    calc=CalcC(0)
    for arg in sys.argv:
        ans=0
        if IsInt(arg):
            ans=calc.SumCount(int(arg))
        else:
            print(arg)
        print(ans)

    # 出力は以下となる。1週目（sys.argv[0]）では、"Main.py"と"0"が出力。
    #
    # > python Main.py 4 6 7 3 9
    # > Main.py
    # > 0
    # > 5
    # > 8
    # > 10
    # > 7
    # > 14

def IsInt(arg):
    try:
        int(arg)
    except ValueError:
        return False
    else:
        return True
   

if __name__=="__main__":
    Main()
~~~

</div></details>


### moduleを使った場合
<details>
<summary>Modules/Calc/__init__.pyのコード</summary>
<div>

~~~python
def SumCount(num, count):
    return num+count
~~~

</div></details>

<details>
<summary>Main.pyのコード</summary>
<div>

~~~python
import sys
import Modules.Calc as CalcM

def Main():
    i=0
    for arg in sys.argv:
        ans=0
        if IsInt(arg):
            ans=CalcM.SumCount(int(arg), i)
        else:
            print(arg)
        print(ans)
        i+=1

    # 出力は以下となる。1週目（sys.argv[0]）では、"Main.py"と"0"が出力。
    #
    # > python Main.py 4 6 7 3 9
    # > Main.py
    # > 0
    # > 5
    # > 8
    # > 10
    # > 7
    # > 14

def IsInt(arg):
    try:
        int(arg)
    except ValueError:
        return False
    else:
        return True
   

if __name__=="__main__":
    Main()
~~~

</div></details>

## それぞれのコードを比べてみると
moduleとclassを比べると、以下のようなことが言えるかと思います。
　・moduleのメリット
　　　\_\_init__.pyのコード量が少なく、Main.pyでの呼び出しもシンプル（インスタンスを作ってない）
　・moduleのデメリット（classのメリット）
　　　今回は簡単な例なので大した違いはないが、引数の数が多い場合や引数を使った処理が複雑な場合、メソッドを使う度に多くの引数を書かなくてはいけなかったり、Main.pyのコード量が多くなってしまう。
　　　（classでは、コンストラクタやprivate変数を使うことでカウント処理を委任（委譲）できる。）


## 参考にさせて頂いたサイト
\_\_init\_\_.pyについて
https://qiita.com/msi/items/d91ea3900373ff8b09d7

ディレクトリ構成について
https://rinatz.github.io/python-book/ch04-07-project-structures/
スポットインスタンスでゲーム用サーバの構築

統合版マイクラのサーバをスポットインスタンスを使って建てたときのメモです。
「マイクラ スポットインスタンス」で検索すると、色んなサイトに記載はあるのですが、一元的に書いているのがなかったので、記事にまとめました。
AWSを利用する前提です。

# 仕様検討
スポットインスタンスを利用する上で一番大事なのは、インスタンスがterminateされた際に、データをどこに退避しておくかです。軽くググったところ、以下の3案がありそうです。

1. EBSをアタッチする
    - 懸念点：複数AZにまたいだ使用ができない
1. EFSを利用する
    - 懸念点：EBSより速度が遅い(特に使用容量少ない場合)、料金がお高め
1. EBSのデータをS3にバックアップし、EC2起動時にS3から復元
    - 懸念点：バックアップが間に合わない可能性

今回は、速度面を妥協し、EFSを利用する方針としました。

# 実施作業
- UbuntuサーバをEC2で起動
- SSH用のポートと、19132/udpを開放
- EFSをマウント

```
sudo apt-get update
sudo apt install stunnel4
git clone https://github.com/aws/efs-utils
cd efs-utils
./build-deb.sh
sudo apt install ./build/amazon-efs-utils*deb -y

sudo mkdir /efs
sudo mount -t efs fs-xxxxxxxxxx /efs/

```

- Minecraftのインストール

```
cd # home directory
sudo apt install unzip

mkdir minecraft 
cd minecraft

wget https://minecraft.azureedge.net/bin-linux/bedrock-server-1.19.51.01.zip
unzip bedrock-server-1.19.51.01.zip

```

- 起動確認
```LD_LIBRARY_PATH=. ./bedrock_server```

- fstabに以下を書き込む
```<DNS名>:/ /efs efs defaults,_netdev 0 ```
[参考：UbuntuでEFSをマウントする][1]


- worldデータをEFSに移動し、シンボリックリンクを貼る
```
mkdir /efs/minecraft
mv -r worlds /efs/minecraft/worlds
ln -s /efs/minecraft/worlds ./worlds
```

- サーバ起動時にサービスを自動起動するように設定
[参考：Ubuntu Serverでマイクラサーバー（統合版）のインストールから自動起動までの手順][3]
- AMIを作成
- 指定したAMIでAuto Scaling Groupを設定
[参考：1台のサーバですら Auto Scaling でケチる][2]
- EC2の起動時に、Lambdaを起動しRoute53を更新
[参考：EC2インスタンス起動時にIPアドレスを自動でRoute53に登録する][4]

# 注意点
- 統合版のマイクラのバイナリはx64で動作するので、arm64のインスタンスタイプを選択しない

# 感想
しっかりとは確認していませんが、ちゃんとデータも残っているようです。ここまで構築した後に、やっぱりJava版のマイクラにしたいという欲求にかられたので、改善点はありますがこの記事はここで締めます。

# 改善点
- サーバをLINEから起動できるように設定
- サーバシャットダウン時に、内部サービスをちゃんと落とすようにする


# 参考にしたサイト

https://qiita.com/3x10ce/items/7a6ba480b4b901b93e0d

https://zenn.dev/bitte8565/articles/f79eb7273921ac

https://blog.hde.co.jp/entry/2015/02/12/175214

https://uura.site/ubuntu-server-minecraft/

[1]:https://qiita.com/SSMU3/items/fe2f6b74ab363b39e2f6
[2]:https://blog.hde.co.jp/entry/2015/02/12/175214
[3]:https://uura.site/ubuntu-server-minecraft/#toc_id_2_4
[4]:https://qiita.com/keys/items/43adf968d366e80f0003
[GKE] [Google Cloud]  GKE の pod で exec format error 発生時は、M1 Mac のチップが原因の場合がある

# 対象読者
・Google Cloud 初心者
・M1 Mac 使用者

# エラー内容
```bash
$ kubectl logs pod_name
exec /usr/local/bin/bundle: exec format error
```
適切な `docker image` を指定しているし、その`docker image`をPULLできているのに、
上記のエラーが出ていました。

調べてみると、OS の問題かもしれないという情報がありました。
その視点で調べていくと、以下の記事を見つけました。

https://hikari-blog.com/exec-format-error/

私の環境では、本来は`GitHub Actions`で`docker`をビルドしていますが、
今回は手元のターミナルからビルドやデプロイを試していました。
M1チップでビルドされた`docker image` は`exec format error` が出てしまうようです。

# 解決方法

`platform`オプションは、ビルドのターゲットプラットフォームを指定します。
この場合、ターゲットプラットフォームは「amd64」となっており、x86-64アーキテクチャ向けのイメージがビルドされることになります。
```bash
$ docker build --platform amd64 -t tag_name ./docker_path
```

再度PUSHします。
```bash
docker push docker_image_name
```

これで`pod` が正常に起動するようになりました。

# 終わりに
Google Cloud の初心者である私は、クラウド側の問題なのか、Docker の問題なのか切り分けるのに時間がかかります。
そこに、今回のようなM1 チップの問題が絡んでくるとさらに時間がかかってしまいました。
同じエラーが出ている方の助けになると嬉しいです。
「masterfile-format text;」について

●「masterfile-format text;」
BIND9.9より、スレーブサーバのゾーンファイルはバイナリ形式となっており、そのままでは人が内容を目視で確認することはできない。named.confのzoneステートメントにを指定することで、、旧バージョンと同様にテキスト形式でゾーンデータを扱えるようになる。（パフォーマンスは多少犠牲になる）
CppUTestでカバレッジを測定する


Cpputestでカバレッジ測定をしてみたので、そのやり方を記載する。

#Makefile
cpputest-\*.*\build内のMakefileWorker.mkの下記定義がデフォルトNとなっているために、gcovが使えないみたい。

```
# Use gcov, off by default
ifndef CPPUTEST_USE_GCOV
	CPPUTEST_USE_GCOV = N
endif
```

#解決策
プロジェクト内のMakefileに上記定義をYにした一文を追加する。

``` Makefile
#Set this to @ to keep the makefile quiet
SILENCE = @

#---- Outputs ----#
COMPONENT_NAME = Project
#Set this to @ to keep the makefile quiet
SILENCE = @

#--- Inputs ----#
PROJECT_HOME_DIR = .
ifeq "$(CPPUTEST_HOME)" ""
    CPPUTEST_HOME = ../CppUTest
endif
CPP_PLATFORM = Gcc

SRC_DIRS = \
    src\
    src/*

# to pick specific files (rather than directories) use this:    
SRC_FILES = 

TEST_SRC_DIRS = \
    tests \
    tests/*

MOCKS_SRC_DIRS = \
    mocks \

INCLUDE_DIRS =\
  .\
  include \
  include/* \
  $(CPPUTEST_HOME)/include/ \
  $(CPPUTEST_HOME)/include/Platforms/Gcc\
  mocks

CPPUTEST_WARNINGFLAGS = -Wall -Werror -Wswitch-default 
CPPUTEST_WARNINGFLAGS += -Wconversion -Wswitch-enum 

# gcovを使う場合'Y'に
CPPUTEST_USE_GCOV = Y

include $(CPPUTEST_HOME)/build/MakefileWorker.mk
```



変更後に下記コマンドを実行すると。
```
make -B gcov
lcov -c -d . -o (任意の名前).info
genhtml -o . (上記と同じ名前).info 
```

ビルドが成功したら、プロジェクトフォルダにindex.htmlが生成される。
■index.html
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1141527/4afa4596-4ce0-ce2f-4cdd-369eb0cca9d9.png)
■評価対象のファイルのカバレッジ状況
![キャプチャ1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1141527/4680c3de-ecf6-4406-cf20-8de6a3fc92ec.png)


# プラスα
さらにC1(条件網羅)カバレッジまで測定する方法を下記に示す。
```
make -B gcov
lcov -c -d --rc lcov_branch_coverage=1 . -o (任意の名前).info
genhtml --branch-coverage -o . (上記と同じ名前).info
```

![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1141527/67bc38cb-e7fe-61e2-9340-0c69d75266fe.png)
※分岐のないファイルはBrancheが－で表示されるため、分岐のあるテスト対象で試してみてほしい。
■分岐のあるテストファイルの結果
![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1141527/da357cb8-41d7-b1a5-b6d4-37046b3d002e.png)
赤色のdefault文のパスはこの評価で一度も通っていないことが示されている。
![キャプチャ4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1141527/2dc8b4c5-9fda-5067-5495-f27136cfd0b2.png)
DB H2でuser テーブルを作成する方法

## 問題
H2 DB使用時に文法エラーが発生し、userテーブルを作成できない。
```sql
CREATE TABLE user (ID INT PRIMARY KEY,  NAME VARCHAR(255));
SQLステートメントに文法エラーがあります "CREATE TABLE [*]user (ID INT PRIMARY KEY,  NAME VARCHAR(255))"; 期待されるステートメント "identifier"
Syntax error in SQL statement "CREATE TABLE [*]user (ID INT PRIMARY KEY,  NAME VARCHAR(255))"; expected "identifier"; SQL statement:
CREATE TABLE user (ID INT PRIMARY KEY,  NAME VARCHAR(255)) [42001-214] 42001/42001
```

調べたところ、userはSQLの予約語であり、テーブル名に使用できないことが分かった。

## 解決方法
<h3>userをダブルクオテーションで囲む</h3>

````
CREATE TABLE "user" (ID INT PRIMARY KEY,  NAME VARCHAR(255));
更新数: 0
````
ABC288回答メモ

0.はじめに
　コンテスト予選を兼ねてるそうで、Dから難しいよーと注意書きがありました。
　実際、なかなか難しくてちょっと手が出なかったです。


1.A - Many A+B Problems
　素直にN回ループでAB入力して、足した数を出力でAC。

　https://atcoder.jp/contests/abc288/submissions/38597107

2.B - Qualification Contest
　最初、単純にK人分入力して、そのままK人表示してしまいましたが
　よく見たら辞書順出力でした・・・。
　K人分入力してリストに突っ込み、そのリストをソートしてから
　全部表示でACでした。
　
　https://atcoder.jp/contests/abc288/submissions/38606833

3.C - Don’t be cycle
　解法が思いつかなかったので、まずは閉路判定方法をググる。
　すると、Union-Findで同じ根を持つ辺が出来た際に
　閉路ができるとのこと。
　次にUnion-Findについてぐぐり、動画などを見て大体を把握して
　サンプルコードを拾ってきて、UnionFind関数を実装したうえで
　組み立て。

　M個の辺を読み込み、辺ごとにUnite処理
　Uniteする辺の2つの頂点が同じ根を持つか判定し
　同じ根であればans変数に1を加算。
　全部の辺を読み込んだら、最後にans変数を出力して終わり。

　一つの辺を消すことで2つの閉路を打破できるみたいなケースが
　あるかも！？と悩んでましたがちょっと考えたらそういう場合は
　ないなーと思えたのでとりあえず試したらAC頂けました。

　https://atcoder.jp/contests/abc288/submissions/38618517

　参考サイト：https://procon.fun/code/unionfind-cycle/

以上
OODA 2023-02-06

## 観察
### amx-a
- 法務省がG空間情報センターを通じて公開した地図XMLデータをアダプトしていく[amx-project](https://github.com/amx-project)を立ち上げ、全国の地図XMLデータをベクトルタイル化して公開する[amx-a](https://github.com/amx-project/a)をサービス化することができた。
- [DWG7](https://github.com/unopengis/7)としては、次の技術的事実が得られた。
  - UNVT Portableを用いて10万ベクトルタイルアクセス/日のサービスを運用できる。
  - PMTilesを用いて日本全国分のベクトルタイルを生産しホストすることができる。
  - 金曜日のイベントの際に、アクセスが集中して困るのではないかという不安があり、ミラーなどの分散処置をするために気を使った。ベクトルタイルをホストする場合、CORS関係の設定が必要であり、ミラーしていただければそれで安心、というわけでもなかった。

### たんせい3号
- **自家用オブジェクトストレージ**のコンセプトを持って、Virtual Shizuokaの点群データをCOPC形式に変換し、UNVT Portableで[ホスト](https://github.com/optgeo/tansei-reentry)していくたんせいプロジェクトは進行中で、現在、3組のUNVT Portableを組み合わせてMinIOオブジェクトストレージを構成する「たんせい3号」を運用中である。
  - ただし、3組のうち1組のHDDの調子が悪くなってきている気がする。xfsのリペアを何度か試しているが、`CPU_IOWAIT`が高い状態が継続するという状態が続いている。
  - また、冗長性をもう少し犠牲にしても速度を上げないと、書き込み・読み込みともに実用にならないという感覚がある。

## 状況判断
- オープンジオデータをアダプトしていくという Adopt Geodata のアプローチは継続して良い。価値が生み出せる見込みは十分にある。
- PMTilesやCOPC, COGを使っていくというコンセプトの状況も良好である。nginxで賄っているサーバ周りの知見の蓄積ぶりも良好である。
- これに引き換え、**ストレージ技術**と**分散のノウハウ**が不十分である。

## 意思決定
- たんせい3号の教訓を生かしつつ、より単純さと速度を優先した「たんせい4号」のプロジェクトを開始する。
- PMTilesファイルのようなcloud optimizedデータをIPFSなどの分散ストレージ技術で「放流」する技術の研究・試験を開始する。

## 行動
1. たんせい4号の設計を開始し、たんせい3号からのデータ移送に着手する
1. IPFSをUNVT Portableで動かす方法についてリサーチする
【Unity】Gitにコミットするフォルダとしないフォルダ

ゲームプログラマーGAIです。

どのファイルはあげていいんだっけ？ってなる瞬間があったので、
Gitにコミットする必要のないものをまとめておきます。


・Libraryフォルダ
・Logsフォルダ
・objフォルダ
・Tempフォルダ



これらは不要です。
間違えてコミットしないように、最初に.gitignoreに追加しておきましょう。


それでは。
ReactでLoading画面の実装（備忘録）

下記の記事を参考にローディング画面の実装をしたので、
処理の流れを備忘録で記録します。
※詳細は下記の記事をご参考ください。

https://yoheiko.com/blog/%E3%81%90%E3%82%8B%E3%81%90%E3%82%8B%E5%9B%9E%E3%82%8B%E3%83%AD%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E7%94%BB%E9%9D%A2%E3%81%AE%E5%AE%9F%E8%A3%85%E6%96%B9%E6%B3%95-react%E3%81%AA%E3%82%89/

![load.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1559434/59181088-e160-0fdc-bbc4-4971eb98bc41.gif)

## 流れ
■用意するもの
　・バックエンドを呼び出す処理
　・Loading画面

・isLoadingのstateはデフォルトではfalse。
```jsx
  const [isLoading, setIsLoading] = useState(false);
```
isLoadingのstateがTRUEの時、Loading画面を呼び出す。
```jsx
{isLoading && <Loading />}
<button onClick={requestBackend}>バックエンドにリクエスト</button>
```
・requestBackend処理を呼び出す。
・isLoadingのstateをtrueにセットしてLoading画面を表示する。
・axiosでバックエンドにリクエストを送る。
・thenとcatch処理の二つにisLoadingのstateをfalseにセットしてLoading画面を非表示にする。
```jsx
  const requestBackend = (event) => {
    event.preventDefault();
    setIsLoading(true);  

    // axiosを使ってバックエンドへリクエスト
    fetchHogeHoge()
      .then((data) => {
        setHogeHoge(data.hogehoges)
        setIsLoading(false)
      }).catch((error) => {
        console.log(error);
        setIsLoading(false);
      })
   }
```



その他参考文献：

参考：Loading画面のアニメーション

https://zenn.dev/catnose99/articles/19a05103ab9ec7

参考：全画面オーバレイのcss

https://pisuke-code.com/css-fullscreen-overlay/
ゲームによく使う素材サイトまとめ

ゲームプログラマーのGAIです。
Unityゲーム開発によく使う素材をまとめておきます。

#●画像素材

・いろいろ素材まとめがある
https://biz.moneyforward.com/blog/21173/

・無料png
https://ja.pngtree.com/so/%e3%82%b2%e3%83%bc%e3%83%a0

・テクスチャ素材まとめ
https://modelinghappy.com/archives/28740

・テクスチャ
https://www.beiz.jp/

・イラストAC（めちゃ使う）
https://www.ac-illust.com/

・ドット素材（めちゃ使う）
https://hpgpixer.jp/

・荒いドット
https://dotown.maeda-design-room.net/

・アイコン
https://icon-rainbow.com/tag/sns/

・優良アセット
https://raruton.com/unity-ui-asset-summary/


#●BGM、SE

・めちゃ使うBGM、SEサイト。大体ここで揃う。探すのは大変。
https://dova-s.jp/

・EDM系でかっこいいBGM
https://www.d-elf.com/free-bgm/edm-free-bgm

・効果音ラボ
https://soundeffect-lab.info/

・FC音工場　ファミコンぽい音
https://fc.sitefactory.info/

・イワシロ音楽素材 ファミコンぽい音
https://iwashiro-sounds.work/

・Springin ゲームっぽい
https://www.springin.org/sound-stock/

・ユーフルカ　ゲーム音源大体揃う。8bit系は不向き。
https://youfulca.com/



どのサイトもとても素晴らしい素材を提供してくれておりますが、
使用するにあたっての注意、版権まわりなどはきちんと確認してご利用ください。
W503 line break before binary operator flake8 & black

# 概要

```
W503 line break before binary operator
```

なぜかこちらのエラーが出たので調べたことを書いておく

# 自分のケースにたいする解決策

`.flake8`の `ignore = xxx`に自分で指定している無視するルールがあったが、defaultでignoreされているもの全部を含んでいなかったためにW503が有効化されてエラーがでていたので、`ignore`ではなく `extend-ignore`に自分の無視するルールを記載した

```.flake8
[flake8]
extend-ignore = xxx
```

# 結論

1. W503はflake8のdefaultでignoreに入っているので基本は出ない
    ```
    flake8 --help
    ...
      --ignore errors       Comma-separated list of error codes to ignore (or skip). For example,
                        ``--ignore=E4,E51,W234``. (Default: E121,E123,E126,E226,E24,E704,W503,W504)
    ```

1. `.flake8` で設定している場合は、デフォルト値をそのままにして特定のルールを無視する場合 `ignore`ではなく`extend-ignore`を使う
    ```
      --extend-ignore errors
                        Comma-separated list of error codes to add to the list of ignored ones. For example,
                        ``--extend-ignore=E4,E51,W234``.
    ```
1. その他 blackとflake8を同時に使う際の注意点は [Using Black with other tools
](https://github.com/psf/black/blob/main/docs/guides/using_black_with_other_tools.md)
人は変わる、ソースは残る

チーム開発の話です。
フリーランスでいくつかの案件を経験して思うことは、仕事がしやすいチームと仕事がしにくいチームがあることです。

チーム開発の基本かもしれないですが、ある一つのことを理解してチーム開発をしている企業としていない企業があります。
**そのある一つのこととは、「人は変わるが、ソースは残り続ける」という事実です。**

正社員以外の働き方がメジャーになった現代では、チームの人の入れ替わりが激しいです。
半年前までバリバリ開発していた人が、今はもういない。
そういう場面をよく見かけます。
その代わり、もっとできる人が入ってきたりする場面もありますが。

つまり、**どの現場でも「人が変わる」ことを念頭に置いておく必要があります。**
システム開発以外の仕事でも同じかもしれませんね。

## 誰が入っても同じようになるツールを導入する

**「ソースを書く」**
多くのエンジニアは、ソースを書きます。しかし、人によってムラができてしまうと困ります。
どの人が書いても、ある一定はソースが担保されるツールを入れるべきです。

例えば、PHPであるならPSR（PHPのコーディング規約）を自動で整形してくれる「PHP-CS-Fixer」のようなVSCodeの拡張機能を入れると良いでしょう。

また、フレームワークに頼るのも良いです。
LaravelやVue.jsなどを使えば、誰が書いても似たソースになります。（使い方をちゃんと理解していれば・・・）

個人開発であれば今回の話は意識しなくてもよいですが、5人、10人とチームで開発している場合は最初から導入しておきたいですね。
**時間が経てば経つほど、ツールを導入するのに腰が重たくなりますからね。。。**

「人は変わるが、ソースは残る」ことを意識して、開発環境を整えていきましょう。
neosでlogix その111

# 概要
neosでlogixやってみる。
logixを、俺コードで表現してみる。
練習問題、やってみた。

# 練習問題

8キーを押してる間up, max 1
5キーを押してる間down, max -1
4キーを押してる間up, max 1
6キーを押してる間down, max -1

# 俺コード

```
a = KeyHeld KeyPad8
b = KeyHeld KeyPad5
c = KeyHeld KeyPad4
d = KeyHeld KeyPad6
e = 01 a
f = 01 b
g = 01 c
h = 01 d
i = - e f
j = - g h
k = SmoothLeap i 4
l = Clamp j 1 -n
m = Pow k 3
n = Pow l 3

```

# 写真

![2023-02-04 20.55.34.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/792be2a6-9e42-833c-077a-6cbce580f968.jpeg)


以上。
Power Apps のWebパーツが SharePoint Online で表示されない際の対処方法

こんにちは。
これから県知事選挙に行こうと思っている男です。

標記の件について。
以前から度々現象が発生していたのですが、ようやく対処方法を発見したので投稿します。
（原因は不明のまま）

# 現象
SPO で Power Apps のWebパーツを貼り付け、URLをしても、アプリが表示されない。
（「１」を指定すると「２」にアプリが表示されるはずなのに、表示されない。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2955093/8e8d8a38-ea70-4742-03c3-4518bc153988.png)

# 対策
これ、たまたま解決策を発見したんですが、URLの一部（下記ストライク線の部分）を削除すると解決できました。
https\://apps.powerapps.com/play ~~**/e/default-(...中略...)/a**~~ /ad1（後略...）
※ URL内にこの記述がある場合のみ有効な方法です。

こんな感じで表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2955093/38badf65-3b38-f7e3-5214-3eab8dcd8f44.png)

以上です（メンドクサイので、原因の深追いはしません）。


# まとめ
自分が技術者であれば原因の特定までやるんでしょうが、残念ながら違うので、
「解せぬ。だが、動けばよい」という考えです。

# 追記 ('23/2/7) 
「上記の方法で解決できなかった」という方から、以下の記事の "埋め込み" で上手くできたとの報告あり。
https://qiita.com/yamad365/items/59a2db666985b1960c3c
gin + mysql + dockerでconnection refusedエラー

gin + mysql + dockerで環境を構築した際に遭遇したconnection refusedエラーと対応について記載する。

# 問題の概要
docker-compose.ymlでdepends_onを使い、mysql → goの順に起動するよう制御しているつもりが、
mysqlの起動を待たずにgoが起動してしまい、connection refusedで落ちる。

# TL;DR
docker-composeのconditonとhealthcheckを使うことでmysqlの起動を待ってからgoを起動させることに成功。
下記のようにapp/depends_onの`condition`とdbの`healthcheck`を追記した。

```yaml:対処前のdocker-compose.ymlのdepends_on
services:
  go:
    depends_on:
      - db

  db:
    (通常通りの設定)
```

```yaml:対処後のdocker-compose.ymlのdepends_on
services:
  go:
    depends_on:
      db:
        condition: service_healthy

  db:
    healthcheck:
      test: mysqladmin ping -h 127.0.0.1 -u$$MYSQL_USER -p$$MYSQL_PASSWORD
```


# 問題が発生した時の状況
## 環境
Mac M1
OS Monterey
Docker 20.10.22

## 構成
```
root
  ├ .env
  ├ docker-compose.yml
  ├ Dockerfile
  ├ go.mod
  ├ go.sum
  └ main.go
```


## main.go
```golang: main.go
func main() {
	config := mysql.Config{
		User:                 os.Getenv("MYSQL_USER"),
		Passwd:               os.Getenv("MYSQL_PASSWORD"),
		Net:                  "tcp",
		Addr:                 os.Getenv("MYSQL_HOST") + ":3306",
		DBName:               os.Getenv("MYSQL_DATABASE"),
		AllowNativePasswords: true,
	}

	var err error
	db, err = sql.Open("mysql", config.FormatDSN())
	if err != nil {
		log.Fatal(err)
	}

	pingErr := db.Ping()
	if pingErr != nil {
		log.Fatal(pingErr)
	}
	fmt.Println("Connected!")

	router := gin.Default()
	router.Run()
}
```


## 発生したエラー
docker-compopse up時に発生。
途中db側の起動が終わる前にgoのログ(connection refused)が吐かれている。
デバッグしてみるとわかるが、main.goのdb.Ping()での疎通確認で発生している。
```bash
Attaching to golang-docker-app-1, golang-docker-db-1
db-1   | 2023-02-04 19:52:47+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 8.0.32-1.el8 started.
(...まずはdb側が起動している様子のログ...)
app-1  | 2023/02/04 19:52:55 dial tcp 172.21.0.2:3306: connect: connection refused
app-1  | exit status 1
app-1 exited with code 1
(...以降引き続きdb側のログ...)
```


# 原因
詳細はわかっていないが、どうやらMacだとdepends_onで「起動した」と判定するタイミングが早いようで、
mysqlの準備が整う前に「起動したよ」と判断してしまう様子。
ちなみにこれはIntel Macでも発生。

上記の通りconditionとhealthcheckを利用することで解決。

ちなみにlinuxだと発生しなかった。

# Tips:override.yml
Macのためだけにdocker-compose.ymlにhealthcheckつけるの嫌だよねという意見もありそう。
そんな時はdocker-compose.override.ymlを使うという手がある。

docker-compose.override.ymlは、その名の通りdocker-compose.ymlの設定を上書き変更するための設定ファイル。
docker起動時にdocker-compose.ymlと一緒に読み込まれる。

使い方としては、
- 基本の設定はdocker-comopse.ymlに記述
- 上書き・追記したい部分だけをdocker-compose.override.ymlに記述して、同じディレクトリに置いておく。
- docker-compose.override.ymlをgitignoreに入れておく

という感じかなと。

今回の問題に当てはめてみた場合はこちら。
```yml:docker-compose.yml
services:
  go:
    depends_on:
      - db

  db:
    (通常通りの設定)
```

```yaml:docker-compose.override.yml
services:
  go:
    depends_on:
      db:
        condition: service_healthy

  db:
    healthcheck:
      test: mysqladmin ping -h 127.0.0.1 -u$$MYSQL_USER -p$$MYSQL_PASSWORD
```


詳しくはこちら

https://docs.docker.com/compose/extends/#understanding-multiple-compose-files
Can’t log into phpMyAdmin: mysqli_real_connect(): (HY000/1698): Access denied for user ‘root’@’localhost’を解決する

# 初めに

久々の投稿になります。
簡単な備忘録となります。
ローカルのlaravelプロジェクトでphpmyadminを導入する際に題名のエラーメッセージが出てしまいました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606803/86ef4a14-5e34-4b78-bc8a-9783efd6154a.png)

以下解決法

# 解決手順

```
sudo mysql -p -u root
```

①mysqlに入ります

```
CREATE USER 'ユーザー名'@'localhost' IDENTIFIED BY 'パスワード';
```

①ユーザー名とパスワードを作成します。
```
GRANT ALL PRIVILEGES ON *.* TO 'ユーザー名'@'localhost' WITH GRANT OPTION;
```

③ここで、新しいユーザーにスーパーユーザー権限を付与します

以上を行ったうえでphpmyadminから入りなおすと入れました。

※
laravelプロジェクトのenvファイルもちゃんと上記のユーザー名とパスワードを設定して
php artisan serveを行ってサーバーを起動した状態でやる。
2023/2/5主にITとかセキュリティの記事

狙われる顧客管理ツール「SugarCRM」の脆弱性 - 米政府も注意喚起
https://www.security-next.com/143369

「Cisco ISE」の脆弱性、順次パッチ提供 - リリース後は悪用コードが利用可能に
https://www.security-next.com/143374

2022年4Qのセキュ相談 - 「偽警告」「不正ログイン」関連が増加
https://www.security-next.com/143304

偽通販サイトの相談倍増 - 「大幅な値引き」に警戒を
https://www.security-next.com/143337

「配達できない」などとうそ - ヤマト運輸のフィッシングに注意
https://www.security-next.com/143398

サーバ管理する機能(BMC)に新たな重要な脆弱性、多くのサーバ機器に影響(2/3)
https://news.mynavi.jp/techplus/article/20230203-2582466/

医療研究/エネルギー産業を襲った大規模サイバー攻撃、攻撃元は北朝鮮Lazarus Groupと特定─ウィズセキュア調査
ランサムウェアではなく諜報活動オペレーションの一部(2/3)
https://it.impress.co.jp/articles/-/24406

警察がランサムウエア被害のデータを復旧、どうやって高度な暗号化から復元したのか(2/3)
https://xtech.nikkei.com/atcl/nxt/column/18/00001/07661/

2022年1Qセキュリティグローバル動向、農業分野に対するサイバー攻撃やOAuthトークン漏えい事件等整理 ～ NTTデータ(2/3)
https://scan.netsecurity.ne.jp/article/2023/02/03/48860.html

サイバー攻撃の流出情報悪用か＝ポイント不正使用容疑で男逮捕―警視庁(2/2)
https://www.risktaisaku.com/articles/-/76479

シンプルな5つのステップで暗号資産規制を：ビットゴーCEO【オピニオン】(2/3)
https://www.coindeskjapan.com/172463/

大好評「テスト技法の基本のき」ミニ冊子シリーズ、ISO/IEC/IEEE29119の基本の「き」第二版を公開(2/3)
https://prtimes.jp/main/html/rd/p/000000211.000030691.html

Metaがデータスクレイピングと戦う一方でスクレイピング企業からデータを買っていたことが判明(2/3)
https://gigazine.net/news/20230203-meta-data-scraping/

「パスワード何だっけ？」でもう悩まない！2月1日～3月18日はサイバーセキュリティ月間です(2/3)
https://news.doctor-trust.co.jp/?p=53487&utm_source=rss&utm_medium=rss&utm_campaign=%25e3%2580%258c%25e3%2583%2591%25e3%2582%25b9%25e3%2583%25af%25e3%2583%25bc%25e3%2583%2589%25e4%25bd%2595%25e3%2581%25a0%25e3%2581%25a3%25e3%2581%2591%25ef%25bc%259f%25e3%2580%258d%25e3%2581%25a7%25e3%2582%2582%25e3%2581%2586%25e6%2582%25a9%25e3%2581%25be%25e3%2581%25aa%25e3%2581%2584%25ef%25bc%25812%25e6%259c%25881%25e6%2597%25a5

【情シス必見】 備えはできていますか？ 「情報セキュリティ10大脅威 2023」(2/3)
https://note.com/tknetbn/n/ne747d34487f5

その『パスワード』の使いまわし“危険”です　実は85%が使い回していた…大手サイトからも“漏えい”で「リスト型攻撃」標的に　悩める『パスワード問題』に“サイバー犯罪”専門家がアドバイス(2/3)
https://news.yahoo.co.jp/articles/bbd5e30887d7d143cd64fba068bb0d820b35db68?source=rss

不景気の中でも歴代最多ミサイル発射の北朝鮮…暗号通貨１７億ドル盗んだ(2/3)
https://news.yahoo.co.jp/articles/e90ae2aadb46c4df099cd2ad2653842b4853f16e?source=rss

WordPress 6.0.3 以前のバージョンにXSSほかの脆弱性(2/3)
https://scan.netsecurity.ne.jp/article/2023/02/03/48867.html

中国・習近平がたくらむ台湾侵攻「恐ろしいシナリオ」で、日本経済は「大打撃」を受ける(2/3)
https://news.yahoo.co.jp/articles/c0b38b2a220ca09165abe87b84b4a4863ea97874?source=rss

北朝鮮ハッカー暗号資産８００億円窃盗、巧妙な手口で捜査かく乱…６８００人エリート部隊(2/3)
https://www.yomiuri.co.jp/world/20230202-OYT1T50289/

近畿大学病院で発生した診療情報の流出事案について(2/2)
https://www.med.kindai.ac.jp/notice/2023_0202_5695.html

委託先従業員による診療情報の流出についてまとめてみた(2/3)
https://piyolog.hatenadiary.jp/entry/2023/02/03/015742

近畿大病院で患者の情報流出　委託社員がSNSで知人に動画送信(2/3)
https://mainichi.jp/articles/20230202/k00/00m/040/174000c

個人情報漏洩に関するお詫び NJC(2/2)
https://www.njc-web.co.jp/company/news_release/page/index.php?id=274

報道資料　令和5年2月1日発表　環境局南環境事業所における個人情報の漏えいについて(2/3)
https://www.city.nagoya.jp/kankyo/page/0000160926.html

ヤマト運輸をかたるフィッシング、件名「【ヤマト運輸】お届け時ご不在のご連絡」などの不審なメールに注意！
偽サイトに誘導し、個人情報や暗証番号を詐取(2/3)
https://internet.watch.impress.co.jp/docs/news/1475697.html
VirtualBox: "Aborted-Saved"状態のイメージは、「保存状態を破棄」で起動することができた

# 環境
* ホストOS: Windows11 Pro(22H2)
* ゲストOS: Xubuntu 18.04(4.18.0-16-generic)
* VirtualBox 7.0.6 r155176 (Qt5.15.2)
* Vagrant 2.3.4

# 何が起きたのか？
vagrantコマンドでゲストOSを起動できなくなりました。
何がきかっけだったのかは、分かりません。

```
PS C:\vagrant\vagrant-bash-example> vagrant up
Bringing machine 'example' up with 'virtualbox' provider...
There was an error while executing `VBoxManage`, a CLI used by Vagrant
for controlling VirtualBox. The command and stderr is shown below.

Command: ["sharedfolder", "remove", "c54b927b-0d42-48d3-8e44-b480b941c4cd", "--name", "vagrant_data"]

Stderr: VBoxManage.exe: error: The machine is not mutable or running (state is Aborted-Saved)
VBoxManage.exe: error: Details: code VBOX_E_INVALID_VM_STATE (0x80bb0002), component SessionMachine, interface IMachine, callee IUnknown
VBoxManage.exe: error: Context: "RemoveSharedFolder(Bstr(pszName).raw())" at line 1777 of file VBoxManageMisc.cpp
```

`state is Aborted-Saved`とあるので、保存されずに終了してしまったようです。


VirtualBoxから直接起動することもできませんでした。
なお、イメージには"Aborted-Saved"と表示されていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37903/897b3409-8ed2-022c-eb1e-106ede459989.png)


# どうやって解決したのか？
VirtualBoxのイメージを右クリックしてコンテキストメニュを開き、「保存状態を破棄」を選択すると、ゲストOSが起動できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37903/e40d3a9b-6a6f-4f79-85a2-77e661c0c6fc.png)
※キャプチャ画像は通常時のコンテキストメニュなので、「保存状態を破棄」がグレーアウトされています。



# 気になったこと
* 「保存状態を破棄」したときの動きを、公式サイトで確認したいが、見つからなかった。
* vagrantコマンドで「保存状態を破棄」に相当することは実行できるのか？

# 参考にしたサイト
https://qiita.com/takepan/items/cbfcee81da92ce21f376
ターミナルからGoogle検索する

## はじめに
プログラムを書いていて調べ物をするとき，わざわざchromeを起動して，検索ボックスに入力して，検索って少し面倒じゃないですか？
そんな面倒くさがりのための，zsh設定方法です．
「コードのみでいい！」というかたは以下のリポジトリを参照してください．

https://github.com/fightingsou/dotfiles/blob/master/zsh/.zsh/chrome.zsh

## ターミナルからChromeを起動

ターミナルからChromeを開くだけなら，以下のようなコマンドで起動できます．

```
open -a "Google Chrome"
```

また，特定のURLを検索したい場合は，以下のようなコマンドで起動することができます．

```
open {url} -a "Google Chrome"
```

## ターミナルから検索

Googleで検索を行うとき，URLは以下のようになっています．

```
https://www.google.com/search?q={検索ワード}
```

よって，検索を行うだけならば，以下のコマンドで行うことができます．

```
open "https://www.google.com/search?q={検索ワード}" -a "Google Chrome"
```

しかし，これを毎回打ち込む面倒なため，省略できるようzshの設定を記述しておきましょう．
以下のコードを.zshrcに書き込みます．

```
ggl() {
    local url="https://google.co.jp/search?q=${*// /+}"
    open $url -a "Google Chrome;
}
```
書き込んだら，以下のコマンドを実行しましょう．

```
source ~/.zshrc
```
これで，設定は終わりです．
ターミナルで以下ようにコマンドを実行すると検索できるようになっています．
```
ggl qiita
```

## 解説
興味がある方のために解説を記述しておきます．

```
ggl() {
    local url="https://google.co.jp/search?q=${*// /+}"
    open $url -a "Google Chrome"
}
```

- まず，最初の **ggl()** はシェルで実行できる，gglという名前の関数を作っています．
- 2行目の **local url = "https\://google.co.jp/search?q=${*// /+}"** は，正規表現で取得したコマンドの引数からurlを生成し，local変数に代入しています．
- 正規表現では， **\*** で引数を取得しています．そして， **/+** で空白を+に変換しています．
- 3行目で，実行するコマンドを記述しています．
MacBook(M2チップ)のローカルで動くoverleafのセットアップ

# できるようになること
Apple M2 チップの MacBook で日本語対応の Overleaf をローカルで動かす

# 試した環境
MacBookPro (Apple M2 チップ, 13 インチ) + macOS 13.2 (22D49)

# 前準備でしておくべきこと
1. `docker` と `docker-compose` が使えるようにします
2. `git` や `realpath` を使えるようにします
3. 作業したいディレクトリ（本記事内では `overleaf-local`）を作りそこへ移動します

# 基本セットアップ
1. 以下の 2 つの GitHub レポジトリを `clone` します
    ```sh:ターミナル
    # pwd -> overleaf-local
    git clone https://github.com/overleaf/overleaf
    git clone https://github.com/overleaf/toolkit.git ./overleaf-toolkit
    ```

    ※ `overleaf-toolkit` 内で `bin/doctor` を実行することで前準備が整っているかどうかが分かります
    ※ `bin/doctor` の結果の `Host Information` のところは無視しても良さそうです

2. 以下のコマンドを実行します（所要時間：10 分前後）
    ```sh:ターミナル
    # pwd -> overleaf-local
    cd overleaf/server-ce
    make build-base
    make build-community
    ```

3. 以下のコマンドを実行します（所要時間：数分）
    ```sh:ターミナル
    # pwd -> overleaf-local/overleaf/server-ce
    cd ../../overleaf-toolkit
    bin/init
    mkdir data/sharelatex data/mongo data/redis (data/nginx)
    bin/up
    ```

    ※ `data/nginx` は必要な人のみで大丈夫です

4. ログが表示されるようになるので Google Chrome などのブラウザから `http://localhost/launchpad` にアクセスしてアカウントを作成すれば使えるようになっているはずです
    ※ 詳細は[公式ドキュメント](https://github.com/overleaf/toolkit/blob/master/doc/quick-start-guide.md#create-the-first-admin-account)を見てください

# 日本語対応
日本語自体対応していなかったり $Lua\LaTeX$ の `ltjsarticle` などのドキュメントクラスが使えなかったりするので以下の通りに `sharelatex` の Docker イメージをアップデートします

1. `sharelatex` の Docker コンテナに入り `TexLive` を更新します（所要時間：1 時間以上）
    ```sh:ターミナル
    # pwd -> [any directory]
    docker exec -it sharelatex bash
    tlmgr update --self
    tlmgr install scheme-full
    ```
    
    ※ 基本セットアップした際に動かしていた Docker コンテナを `^control + C` などで停止させていた場合は `overleaf-toolkit/bin/start` で再起動してから実行してください

2. 1. でコンテナに加えた変更を新しい Docker イメージとしてコミットします（所要時間：数分）
    ```sh:ターミナル
    # pwd -> [any directory]
    docker commit sharelatex sharelatex/sharelatex:[tag name]
    ```

    ※ [参考 1.](https://zenn.dev/uchidaryo/articles/setup-local-overleaf)では `[tag name] = with-texlive-full` としています

3. 起動していた Docker コンテナを停止します
    ```sh:ターミナル
    # pwd -> overleaf-local/overleaf-toolkit
    bin/stop
    ```

4. 更新した Docker イメージでも起動するように `overleaf-toolkit/bin/docker-compose` の 70 行目付近を修正します
    ```diff:docker-compose
    - local full_image_spec="$image_name:$SHARELATEX_IMAGE_VERSION"
    + local full_image_spec="$image_name:[tag name]"
    ```

5. overleaf を再起動します
    ```sh:ターミナル
    # pwd -> overleaf-local/overleaf-toolkit
    bin/up
    ```

6. ブラウザ上で `http://localhost` にアクセスすれば日本語対応した Overleaf が使えるようになっているはずです
    ![Overleaf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1583044/1e2b6a1d-86a2-de57-f186-c5bfd4a1eef4.png)
↑こんな感じ

    （余談）卒論を Overleaf で書きましたがサーバーが落ちたら怖いのでバックアップ用としても使えそうですね（自虐ネタ）

7. `bin/stop` と `bin/start` で止めたり起動したりできます

では良い $\LaTeX$ ライフを


# 参考
1. [ローカルのOverleafでLaTeX執筆環境をセットアップする手順](https://zenn.dev/uchidaryo/articles/setup-local-overleaf)
2. [ARM64 setup (including M1 mac)](https://github.com/overleaf/toolkit/issues/127)
LoLを起動したらAutoHotkeyを終了するPowerShellスクリプト

## 概要
[AutoHotkey](https://github.com/AutoHotkey/AutoHotkey) ([alt-ime-ahk](https://github.com/karakaram/alt-ime-ahk)) を起動したまま League of Legends をプレイすると、不正スクリプト扱いとなるようで、約10分経過後に強制切断されます。
また、切断後はPCを再起動してもそのマッチには復帰できなくなります。
この犯罪を複数回犯し、LeaverBuster[^1] ペナルティ を受けたので、反省と謝罪を兼ねて常駐スクリプトを作成しました。

## 本体

`$autoHotkeyProcessName = "alt-ime-ahk"` の部分は使っている AutoHotkey ソフトのプロセス名に変更してください。
保存の際のエンコードはBOM付きUTF-8でお願いします。

```ahk_killer.ps1
$interval = 30 # 秒
$autoHotkeyProcessName = "alt-ime-ahk" # 適宜変更
$leagueClientProcessName = "LeagueClient"

while ($True) {
    $autoHotkeyProcess = Get-Process -Name $autoHotkeyProcessName -ErrorAction SilentlyContinue
    $leagueClientProcess = Get-Process -Name $leagueClientProcessName -ErrorAction SilentlyContinue

    if($autoHotkeyProcess -And $leagueClientProcess){
        # 停止処理
        Stop-Process -Name $autoHotkeyProcessName

        # 通知表示
        $headlineText = 'AutoHotkey Killer'
        $bodyText = 'LeagueClientの起動を確認したため、AutoHotkeyを終了しました。'

        $ToastText02 = [Windows.UI.Notifications.ToastTemplateType, Windows.UI.Notifications, ContentType = WindowsRuntime]::ToastText02
        $TemplateContent = [Windows.UI.Notifications.ToastNotificationManager, Windows.UI.Notifications, ContentType = WindowsRuntime]::GetTemplateContent($ToastText02)
        $TemplateContent.SelectSingleNode('//text[@id="1"]').InnerText = $headlineText
        $TemplateContent.SelectSingleNode('//text[@id="2"]').InnerText = $bodyText
        $AppId = '{1AC14E77-02E7-4E5D-B744-2EB1AE5198B7}\WindowsPowerShell\v1.0\powershell.exe'
        [Windows.UI.Notifications.ToastNotificationManager]::CreateToastNotifier($AppId).Show($TemplateContent)
    }
    Start-Sleep $interval
}
```

## 確認
`右クリック > PowerShell で実行` で起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499004/c5345923-6675-450b-4b37-608988de96d6.png)
`LeagueClient` と `AutoHotkey` を同時起動している状態で、`AutoHotkey` の終了が確認できたら、動作確認は完了です。



## スタートアップ化
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499004/bfbcedee-e7bb-efc7-3729-72c8a6989df7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499004/6e13ceaf-c4f2-af67-fc07-83315651bcbb.png)
ショートカットを作成して、プロパティ>リンク先を`powershell -WindowStyle Hidden -command <上記スクリプトのファイル>`になるように変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499004/e3bd9f2b-d3d8-4f86-8300-99328197581d.png)
`Win+R`から`shell:startup`を入力してOK、作成したショートカットを開いたディレクトリに移動してください。

## 参考記事

https://qiita.com/Yamine1San/items/1c86f90c97805fb6c5a3

https://qiita.com/relu/items/b7121487a1d5756dfcf9

[^1]: LoLの切断行為への処罰のこと。切断を繰り返すとゲームのマッチング時間が制限される。
VercelにReactアプリをデプロイしようとしたら「warning package-lock.json found」とか「Module not found: Error: Can't resolve」って怒られた人向けの記事

# 概要
読んで字の如く、表題の通り
VercelにReactアプリをデプロイしようとしたら「warning package-lock.json found」とか「Module not found: Error: Can't resolve」って怒られた人向けの記事です。

Reactの学習をしていたのですが、ためしにVercelへデプロイしてみたところ、
Vercelにちょっと怒られてしまったというのが経緯です。

理屈はちょっとわからないので書きません。
私が問題を解決した方法について記載しますので了承ください。

# warning package-lock.json found
こちらの原因は複数のパッケージ管理ライブラリが存在していることです。
Vercel的にNGっぽいです。

## 解決方法
package-lock.jsonなどのパッケージ情報が記載されたファイルを削除する。
私の場合はyarnとnpmが混在していました。
(教材が初めからそうなっているとか罠では。。。)


# Module not found: Error: Can't resolve
こちらの原因は指定されたpathでモジュールが見つからないことです。
同じ記法を使用していてもエラーとならないコードもあり、相対パス/絶対パスやフォルダ構成に問題がありそうです。

## 解決方法
コンポーネントの宣言記法を変更する
before
```
const コンポーネント名 = () =>
{
 //コンポーネント
}
export default コンポーネント名

```
after
```
export const コンポーネント名 = () =>
{
 //コンポーネント
}

```

コンポーネントのインポート記法を変更する。
before
```
import コンポーネント名　from パス
```
after
```
import {コンポーネント名} from パス

```

# その他
ほかに試したこと。
これがなくてもデプロイは成功しました。
- ビルドコマンドを以下に変更
    - ``` npm run build```
- インストールコマンドをいかに変更
    - ```npm install```



# 終わり
以上です。
これまでC#のリリースビルドなどの経験はありましたが、Webアプリケーションのデプロイは初めてで勉強になりました。
以前に比べると便利になったそうですが、Webマスター(？)の道はまだ長そうです。