OmniAICreator/Qiita-1.07M huggingface dataset:
Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>. Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor


# [エラー]Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.を解決
とある教材でヘッダーのロゴを作成中このエラーに当たった。
以前にも（リンクだけの実装だったので）同じエラーに当たっていたので怖がることはなかったが、今回はこのような実装をしたかったので（下記画像）をaタグに適用したかったのでaタグを削除できなかった。
![スクリーンショット 2022-11-28 15.41.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884551/7745a8c5-c002-df1b-c5b2-399c6bbed582.png)


## 環境
Mac(M1, 2020)
vscode
## ぶつかったエラー
Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.
Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

翻訳・意味
エラー: a の子を持つ Link が無効です。 a を削除するか、Link legacyBehavior を使用してください。
詳細: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

```
export default function Logo({ boxOn = false }) {
  return (
    <Link href="/">
       <a className={boxOn ? styles.box : styles.basic}>CUBE</a>
    </Link>
  )
}
```
aタグを削除かLink legacyBehavior を使用？（どうこと？）どちらかを選べばいいが初学者の自分とってはなるべく大きな変更をせずに解決したい

## やったこと
1.aタグ以外のタグでいいのではないかと仮定
1.aタグをdivタグに変更した。
```
export default function Logo({ boxOn = false }) {
  return (
    <Link href="/">
       <div className={boxOn ? styles.box : styles.basic}>CUBE</div>
    </Link>
  )
}
```


## 結果
エラーが解消されロゴCUBEが表示された

![スクリーンショット 2022-11-28 15.34.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884551/2c3bebd8-1257-4b90-a3b1-cf754d94d353.png)
デイトラ「Web制作コース」　受講内容をアウトプット 10日目

学んだことをアウトプットしています。完全に自己満足ですので悪しからず。
以下の点を確実にアウトプット
①何で学んでるか
②日々の学習内容
③学びのポイント
④制作物
⑤+αで参考にした記事
⑥+αでやってみたこと

①デイトラ「Web制作コース初級編」
②Bootstrapの基本を学ぼう①
③新たに学んだこと
　・CSSフレームワークとは、読み込むだけで使える便利なもの。自分でCSSコードを書かなくても良い。
　　BootstrapとはCSSフレームワークの中で最も有名なもの。
　・Bootstrapの使い方
　　フォント色設定、背景色設定、テキスト位置設定、フォント太さ設定、フォントサイズ設定
④なし
⑤なし
⑥なし
paizaラーニング「i番目の出力 2 Python3編」

https://paiza.jp/works/mondai/array_primer/array_primer__2dmatrix_i-thoutput_step2
#### 私の解答
```Python3
K,L = map(int,input().split())
A = [[0] * 3 for _ in range(3)]
for i in range(3):
    A[i] = list(map(int, input().split()))
print(A[K-1][L-1])
```
#### 解答例
```Python3
values = input().split()
K = int(values[0])
L = int(values[1])

A = [[0] * 3 for _ in range(3)]
for i in range(3):
    values = input().split()
    for j in range(3):
        A[i][j] = int(values[j])

print(A[K - 1][L - 1])
```
paizaラーニング「i番目の出力 1 Python3編」

https://paiza.jp/works/mondai/array_primer/array_primer__2dmatrix_i-thoutput_step1
#### 私の解答
```Python3
K,L = map(int,input().split())
li = [[1, 2, 3, 4], [10, 100, 0, 5], [8, 1, 3, 8], [15, 34, 94, 25]]
print(li[K-1][L-1])
```
解答例とほぼ同じでした！！
#### 解答例
```Python3
values = input().split()
K = int(values[0])
L = int(values[1])

li = [[1, 2, 3, 4], [10, 100, 0, 5], [8, 1, 3, 8], [15, 34, 94, 25]]

print(li[K - 1][L - 1])
```
paizaラーニング「二次元配列の入力 4 Python3編」

https://paiza.jp/works/mondai/array_primer/array_primer__2dmatrix_input_step4
#### 私の解答
```Python3
N,M = map(int,input().split())
A = [[0] * M for _ in range(N)]
for i in range(N):
    A[i] = list(map(int, input().split()))
for i in range(N):
    print(*A[i])
```
@WolfMoon先生の解答例を参考にしました。
#### 解答例
```Python3
values = input().split()
N = int(values[0])
M = int(values[1])

A = [[0] * M for _ in range(N)]
for i in range(N):
    values = input().split()
    for j in range(M):
        A[i][j] = int(values[j])

for i in range(N):
    for j in range(M):
        print(A[i][j], end="")

        if j < M - 1:
            print(end=" ")
        else:
            print()
```
dev containerの紹介

# はじめに

「開発環境をDocker+Visual Studio Codeで用意できますよ」という記事です。Dockerは自分の環境に合わせて良しなにインストールしてください。

私自身が使いこなせていないので、記事を読んだ方が使った時のいい使い方などを教えてもらえると嬉しいぁという気持ちです。:kissing_heart: 

# dev containerとは

要は、VSCodeの[Dev Containers](https://code.visualstudio.com/docs/devcontainers/containers)という拡張機能を入れてあげると、VSCodeが設定ファイルを読んでコンテナを立ててくれるという話です。あたかもローカルにあるファイルのように、コンテナ内のファイルをVSCodeで編集ができる。

## 使い方

```
.
┗ .devcontainer  # 設定ファイルを入れるディレクトリ
    ┣ devcontainer.json
    ┗ DockerFile
```
`Python:3.8-slim`イメージを使って、1番簡単な`devcontainer.json`の例を挙げます。
```./devcontainer/devcontainer.json
{
    "name": "python-devcontainer",
    "forwardPorts": [],
    "features": {},
    "extensions": [
        "ms-python.python",
        "ms-python.vscode-pylance"
    ],
    "image": "python:3.8-slim",
    "settings": {}
}
```
この中で、どうしても必須なのは`image`プロパティくらいです。
コンテナイメージに必要なライブラリを用意するなどのカスタマイズを書いたDockerfileを用意すれば、`build.dockerfile`プロパティに相対パスを指定して使わせられます。

## 拡張機能と設定

`extension`プロパティでコンテナ内のVSCodeに追加したい拡張機能のIDを配列で指定してあげます。UIのテーマなどはローカルのVSCode設定が反映されるので、補完機能みたいな拡張機能を指定すればOKです。

`settings`プロパティでVSCodeや拡張機能の細かい設定を書き込む。

## 動かしてみる
dev containerの起動です。
![devcontainer-start](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2960001/eb5db06d-7eda-309a-1ffd-423ba7fd28f9.png) 
1. .devcontainerがあるディレクトリを開いて、左下の「><」みたいな場所をクリックする
2. 「Reopen in Container」選択する

めちゃめちゃしょうもないコードでごめんなさい。:sweat: 
```
devcontainer
┣ .devcontainer  # 設定ファイルを入れるディレクトリ
┃   ┗ devcontainer.json
┗ hello-world.py
```
```hello-world.py
import os

print("Hello, world! from "+os.path.join(os.getcwd(),__file__))
```
```
root@256613a06cff:/workspaces/devcontainer# python hello-world.py 
Hello, world! from /workspaces/devcontainer/hello-world.py
```
`workspace/devcontainer/hello-world.py`から実行されているのが分かります。

# 個人的なメリット
読んだ方のdev containerメリットも教えていただければ幸いです。:pray:

* VSCodeが`devcontainer`ディレクトリをコンテナ内の`workspaces`にマウントしてくれる。DockerFileだけでやっていると、毎回`-v`を書かなくてはいけなくて面倒臭かった。
* 自分が使っているVSCodeの拡張機能を見直すきっかけになる。「細かい部分の把握」と「なんでもポイポイインストールをしないミニマリスト」ってエンジニアに大事そうだなと意識できる。

# おわりに

簡単な紹介の記事になってしまい、無駄な電気信号をこの世に生み出してしまったという申し訳ない気持ちでいっぱいです。

本当は[Dev Container CLI](https://code.visualstudio.com/docs/devcontainers/devcontainer-cli)についても書きたかったのですが、更新日を見て貰えば分かると思いますが、直前に書いたのでこれくらいで勘弁してください、なんでもしますから。:sob:
Railsで、dependent: :restrict_with_errorをassertできなくてハマった話

# 結論
## has_many
```rb
assert my_model.errors.of_kind?(:base, "restrict_dependent_destroy.has_many".to_sym)
```
## has_one
```rb
assert my_model.errors.of_kind?(:base, "restrict_dependent_destroy.has_one".to_sym)
```

# ハマったところ

Rails6 から `of_kind?` なんて便利なものが追加されているようだったので、まずはエラーの attribute と type を調べてみた。

```rb
p my_model.errors
```
```
#<ActiveModel::Errors [#<ActiveModel::Error attribute=base, type=restrict_dependent_destroy.has_many, options={:record=>"my string"}>]>
```

attribute が `base` 、 type が `restrict_dependent_destroy.has_many` ということが分かった。
しかし、 `.` が入っているから普通にシンボル書けないし脳死で文字列で渡そうと考えた。
( `:"restrict_dependent_destroy.has_many"` とか、 `to_sym` とかすれば良いだけだけど、そこまで頭が回らなかった)

```rb
assert my_model.errors.of_kind?(:base, "restrict_dependent_destroy.has_many")
```

全然動かない...
結構悩んで最終的にコードを見た結果、シンボルと文字列を区別してるじゃん！！

https://github.com/rails/rails/blob/a3818028f7d85ad099d90756356347a03193ed42/activemodel/lib/active_model/errors.rb#L370-L378

```rb
    def of_kind?(attribute, type = :invalid)
      attribute, type = normalize_arguments(attribute, type)

      if type.is_a? Symbol
        !where(attribute, type).empty?
      else
        messages_for(attribute).include?(type)
      end
    end
```

というわけでした。これって前もハマったような...ということで記事を書いてみました。
Selenium で wellnote の動画・写真・日記をダウンロードする


[Wellnote Downloader](https://github.com/nogayama/wellnote_downloader) はWellnote からデータをダウンロードするツールです。ブラウザを自動操作し、ユーザーが一つづつクリックしたのと同じ作業を次々と繰り返すツールです。

↓動作の様子
[![Wellnote Downloader アルバムから写真・動画をダウンロード](https://user-images.githubusercontent.com/11750755/206524695-38bffc61-b4ac-4802-a810-13b8cc824e83.png)](https://youtu.be/o0UrRwXwCeI)
[![Wellnote Downloader を使ってホームの日記を画像としてダウンロード(コメント、スタンプ付き)](https://user-images.githubusercontent.com/11750755/206735482-b98ea332-9126-4b4f-aa47-bd6e67f76be3.png)](https://youtu.be/RyJrXGKGksc)


## セットアップ

必要な環境は、コマンドターミナルがあり、Python が動き、FirefoxまたはChromeがインストールされている環境です。OSは特に指定しません。

1. Firefox または Chrome をインストールする。
2. Pythonをインストールする。
    コマンドラインから`python3`コマンドと`pip3`コマンドを実行できるか確認する
    ```sh
    $ python3 --version
    Python 3.11.0
    
    $ pip3 --version 
    pip 22.3 from pip (python 3.11)
    ```
3. Wellnote Downloader をインストール
    ```bash
    $ pip3 install wellnote_downloader
    長いので略
    ```
    
    コマンドラインから`wellnote_downloader`コマンドを実行できるか確認する。
    ```sh
    $ wellnote_downloader --version
    
    ```


## 使い方



### アルバム内の写真・動画のダウンロード

1. 全部ダウンロードする場合

    ```sh
    $ wellnote_downloader album
    ```   

2. 2015年の1月から2016年の12月までダウンロードする場合は以下のように実行します。

    ```sh
    $ wellnote_downloader album --start 2015-01  --end 2016-12
    ```

3. 今いるフォルダ内に`Downloads`というフォルダができているので、その中のファイルがダウンロードできているか確認します。



### ホーム画面の日記のダウンロード（コメント、スタンプ付き）


1. 全部ダウンロードする場合

    ```sh
    $ wellnote_downloader home
    ```

2. 2015年の1月から2016年の12月までダウンロードする場合は以下のように実行します。

    ```sh
    $ wellnote_downloader home --start 2015-01  --end 2016-12
    ```

    

3. 今いるフォルダ内に`Downloads`というフォルダができているので、その中のファイルがダウンロードできているか確認します。





## その他



**wellnoteのサーバーに過度な負荷がかかることが予見される使い方（ツールを改造してスピード調節部分を削除したり、並列でいくつも起動したりするなど）は絶対にやめてください。** サーバーが落ちると、全員がダウンロードできなくなります。それにそのまま早期にサービス終了する可能性もありますので、常識の範囲内での利用をお願いします。

- 途中で止める場合は、ターミナルウィンドウで`Ctrl-C`を押します。

- 実行前にメールアドレスとパスワードを設定すると、入力を省略できます。
    ```sh
    $ export WELLNOTE_EMAIL=あなたのEmailアドレス
    $ export WELLNOTE_PASSWORD=あなたのパスワード
    ```

- デフォルトではログインセッションを再利用するので、ユーザーを切り替えたくてもログインプロンプトがでないため切り替えられなくなってしまいます。その場合は一度 `--clear-profile`オプションをつけて実行して下さい。

    ```sh
    $ wellnote_downloader home --clear-profile
    $ wellnote_downloader album --clear-profile
    ```

- 画像の読み込みが遅すぎて日記の保存に間に合わないとき、ブラウザを操作するペースを遅くする事ができます。操作イベントを送る前に待つ時間をデフォルトの`1秒`から`3秒`に変えるには、以下のようにします。
  
    ```sh
    $ wellnote_downloader home --interval 3
    ```
    
    
    
- Command not found エラーが出る場合は、`wellnote_downloader` を `python -m wellnote_downloader` にすると動くかもしれません

    ```sh
    $ python -m wellnote_downloader --version
    0.10.0
    ```
お気に入りのaliasを晒す

Qiitaでaliasを晒している記事を読んで自分も書きたくなりました
お気に入りのaliasを紹介します

## 1. 1文字alias系
一瞬で打てる1文字aliasが好きなので、いくつか登録しています
いつか全文字の1文字aliasを登録するのが夢です
```zsh
alias g="git"
alias r="bundle exec rails"
alias d="docker"
alias c="clear"
alias f="find . -name"
alias m="make"
```


## 2. 安全策系
```zsh
alias cp='cp -i'
alias mv='mv -i'
alias rm='rm -i'
```

## 3. global alias
パイプで呼び出すaliasを登録しています
```zsh
alias -g C='| pbcopy'
alias -g L='| less -R'
alias -g G='| grep --color=auto'
```

## 4. ls系
```zsh
alias la='ls -A'
alias ll='ls -lh'
alias ls='ls -F'
alias cls="clear && ls"
```

## 5. docker系
```zsh
alias dokcer="docker" # よくTypoする
alias dc="docker compose"
alias dcu="docker compose up --build -d"
alias dcd="docker compose down"
alias dcrs="docker compose restart"
```

## 6. cd系
```zsh
alias ..="cd .."
alias ...="cd ../.."
```

# まとめ
最強のaliasを募集しています
今日のElixirSchoolメモ4「パターンマッチ」

パターンマッチはElixirの強力な部品で、単純な値やデータ構造、果ては関数でさえもマッチすることができます。

https://elixirschool.com/ja/lessons/basics/pattern_matching

## `=`演算子

Elixirでは、 `=` 演算子は実際には代数学での等号に値するマッチ演算子。
マッチ演算子を通して値を代入し、その後マッチさせることができる。
Elixirは左辺の変数の値しか変更しない。

```elixir
iex(37)> x = 1
1
iex(38)> 1 = x
1
iex(39)> 2 = x
** (MatchError) no match of right hand side value: 1
iex(39)> x = 3
3
```

### タプルのマッチング

タプルのマッチング
```elixir
iex(57)> {:ok, value} = {:ok, "Successful!"}
{:ok, "Successful!"}
iex(58)> value
"Successful!"
iex(59)> {:ok, value} = {:ok, "Konchiwa"}
{:ok, "Konchiwa"}
iex(60)> value
"Konchiwa"
iex(61)> {:ok, value} = {:error, "Konchiwa"}
** (MatchError) no match of right hand side value: {:error, "Konchiwa"}
```

Elixirは左辺の値と右辺の値を同じにする方法を探す。
左辺は3つの変数を持つリスト、右辺は3つの値からなるリスト。そのため変数それぞれに対応する値をセットすれば、両方同じにできる。

```elixir
iex(41)> list = [1, 2, 3]
[1, 2, 3]
iex(42)> [a, b, c] = list
[1, 2, 3]
iex(43)> a
1
iex(44)> b
2
iex(45)> c
3
```

## `_`（アンダースコア）

`_`（アンダースコア）で値を無視することができる。
これは変数のように振る舞うが、セットされた値を即座に捨ててしまう。

```elixir
iex(46)> list = [1, 2, 3]
[1, 2, 3]
iex(47)> [a, 1, b] = list
** (MatchError) no match of right hand side value: [1, 2, 3]

iex(47)> [a, _, b] = list
[1, 2, 3]
```

## ピン演算子(`^`)

ピン演算子（`^`）は変数を固定することができる。
マッチ演算子は左辺に変数がある場合、代入操作を行い、変数を再び束縛するが、それが望ましくない場合に用いる。

```elixir
iex(48)> x = 1
1
iex(49)> ^x = 2
** (MatchError) no match of right hand side value: 2

iex(49)> {x, ^x} = {2, 1}
{2, 1}
iex(50)> x
```

### 関数の節でのピン演算子

```elixir
iex(62)> greeting = "Hello"
"Hello"
iex(63)> greet = fn
...(63)> (^greeting, name) -> "Hi #{name}"
...(63)> (greeting, name) -> "#{greeting}, #{name}"
...(63)> end
#Function<41.3316493/2 in :erl_eval.expr/6>
iex(64)> greet.("Hello", "Sean")
"Hi Sean"
iex(65)> greet.("Mornin'", "Sean")
"Mornin', Sean"
iex(66)> greet.("Evening'", "Sean")
"Evening', Sean"
iex(67)> greet.("Hello", "Sean")
"Hi Sean"
iex(68)> greeting
"Hello"
```
Snykで手軽にセキュアコーディング


# Snykで手軽にセキュアコーディング

## セキュアコーディングのイメージというと
[セキュアコーディング by JPCERT](https://www.jpcert.or.jp/securecoding/)

・なんかいろいろやることが多そう…
・大変そう…

みたいなイメージがあります。

特に自社サービスをやっているとセキュリティのことで、お客様からセキュリティチェックシートみたいな秘伝のたれなスプレッドシートを渡されますが、自社のサービスってどこまでやっているのか？というのはいつも悩みながら記載しています。


# セキュアコーディングやってます！

って言えるようになりたいけど、いったいどんな観点を満たせばいいのか？

セキュアコーディングの10のプラクティスがあります。

[Top 10 Secure Coding Practices](https://wiki.sei.cmu.edu/confluence/display/seccode/Top+10+Secure+Coding+Practices)

1\.バリデーションを行う
2\.コンパイラの警告を確認
3\.セキュリティーポリシーを実装する
4\.設計はシンプルを心がける
5\.デフォルトを拒否する
6\.最小特権の原則を守る
7\.他のシステムに送信するデータはサニタイズ
8\.多層防御を実践
9\.品質保証技術を使用する
10\.セキュアコーディング標準を採用する

うん、なるほど、これは確かに。

コーディングだけではなく、外部のコーディングルールや静的解析をCI/CDでチェックしたりとか、脆弱性診断を行ったりとか複合的に確認すればいいのかとは思います。


まず、コーディングレベルで意識することはコーディング規約であったり、ライブラリ自体の脆弱性がありますが、いちいち確認するのは大変なので、脆弱性について診断してくれるサービスがあります。


https://snyk.io/

snykというサービスです。

リポジトリと連携することでリポジトリを静的解析してくれて、脆弱性も診断してくれます。連携も簡単でした。

ためしに自分のgithubのリポジトリと連携してみました。

リポジトリ一覧画面
![snyk1-list.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99447/0e8781d9-a27f-e5c2-ce85-32f65000a40f.png)
リポジトリごとに、セキュリティレベルごとに脆弱性の個数が表示されています。


各リポジトリ詳細画面
![snyk2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99447/0bbb2a52-a8d9-edfd-6f07-fe34dfb225eb.png)

こまかく、コードがハイライトされて、わかりやすく説明が記載されています。（英語ですが）

どこが悪いのかすぐわかりますね。

あと、Snykは、IDEのプラグインも提供されていて、
VScode、Eclipse、GoLand、InteliJ、PhpStormなどなどあるので、IDEのプラグインとして、コーディング時にセキュアコーディングを意識してコーディングすることも可能かと思います。


トライアルとしての、フリー版もあるので個人開発で試して見るのも一つの手かと思いますので気軽に試してみてください。
GPT3-J モデルを 3090 or CPU で動かしたいメモ

ふええ... ChatGPT すごいねぇ...
しかしモデルとかは公開されていないね...

自前でも動かしたい...

GPT3-J がありました!

## 環境

* Ubuntu 20.04 + conda
* 3090
* CPU memory 128GB

## 情報

GPT-JをWindows11のGPU環境で動かしてみた
https://qiita.com/kekekekenta/items/8ff65475b19f8c924d97

ありがとうございます.

今回は huggingface transformers で Linux + pytorch + 3090 でぺろっとやります.

https://huggingface.co/docs/transformers/model_doc/gptj 

そのままではモデルが 24 GB あります. CPU メモリで読むのに 48 GB 以上必要です.
3090 + 64GB or 128 GB CPU メモリでなんとか扱える感じでしょうか.

fp16 版など使えば CPU も GPU も? 12 GB で読めるようです.


```python
from transformers import GPTJForCausalLM
import torch

model = GPTJForCausalLM.from_pretrained(
    "EleutherAI/gpt-j-6B", revision="float16", torch_dtype=torch.float16, low_cpu_mem_usage=True
)
```

https://www.philschmid.de/deploy-gptj-sagemaker

あたり参考にしてこねこねスクリプトかけばいけます!

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ありがとう GPT-3-J 👍 <a href="https://t.co/2H1GEprK30">pic.twitter.com/2H1GEprK30</a></p>&mdash; syoyo.eth 🌸 レイトラ ® 🐯 4 周年 🎉 (@syoyo) <a href="https://twitter.com/syoyo/status/1600898513122258944?ref_src=twsrc%5Etfw">December 8, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

さすがに日本語直はあんまりうまくいなないですね.

### CPU only 実行

Whisper cpp https://qiita.com/syoyo/items/4c0c649aa5d8a62a2e04 で有名な ggml で GPT3-J 動かせました!

https://github.com/ggerganov/ggml

16 GB CPU メモリあればいけます.

スマホで完結は難しいですが, Desktop PC ならいけそうですね.

## rinna/japanese-gpt-1b

日本語に特化したモデルがあります.

https://huggingface.co/rinna/japanese-gpt-1b

モデルサイズは 2.7 GB なので, これだと ggml でスマホに入れて動かすというのもできそうです!

## TODO

* [ ] プロンプトエンジニアリングとかを頑張って ChatGPT っぽいのを作ってみる
* [ ] Whisper - GPT3-J - Stable Diffusion でなんかいい感じのことをやってみる
コスパ最強の個人開発デプロイ先を作る（Coolify）


# コスパ最強の個人開発デプロイ先を作る（Coolify）

## はじめに
みなさんは個人開発するときに、デプロイ先をどこにしていますか？どういうことを重視してデプロイ先を決めますか？
僕が個人開発をするときは、特に料金面を重視することが多いです。
サービスを色々探すと、Heroku, GCP, AWS, Render.com, Flyなど結構見つかり、デプロイ先を決めるのも個人開発の楽しさの１つになってます。
ですが、作りたい！と思ったものを気兼ねなくデプロイして運用していくには、どうしても金銭的なコストがかかります。

今回の記事では、Herokuの無料枠がなくなり、デプロイ先を悩んでいる人へ自己ホスティングをする案もあるよ！という提案を指定と思います。笑

### 読むと幸せになれそうな人
- 個人開発に興味がある
- Heroku以外のデプロイ先を探している
- 複数のサービスをできるだけ低コストで運用したい
- Coolifyに興味がある

### 最初にまとめ
先にこういうのあると助かりますよね。書いときます。

- Coolifyというオープンソースで自己ホスト可能でプライバシー重視のアプリケーションとサービスを立ち上げてそこにデプロイする
- GCPでの計算だがたいだい¥3,000〜/月。無料ではないが、サーバーのスペックが許す限り何個でもデプロイ可能
- 基本的なサービス(MySQL, PostgresQL, Redisなど)はすぐに立ち上げられる
- 1つのDockerfileで動くものであればなんでもデプロイ可能
- Herokuのbuilderを使ってデプロイできる
- アプリ管理してる！！！て感じでかっこいい


## 詳細書いていきます！！！

### Coolify
Coolify

今回紹介する自己ホストするアプリケーションのOSSです。
このアプリケーションを使うことで、HerokuやNetlifyのように簡単にサービスをデプロイできます。
OSSで現在も積極的に開発されており、今後の伸びにも期待大です！！！！

> オープンソースで自己ホスト可能 なHeroku / Netlifyの代替 (およびそれ以上) .
> https://coollabs.io/

### どうやって構築するのか
Google Cloud Platform（以下GCP）のCompute Engineを使います。
１からの構築であれば、Coolifyを立ち上げるに必要な、Dockerのインストールなどをして、Coolifyをインストールします。
ですが、今回はGCP のMarketplaceを使うことで、サクッと簡単に立ち上げちゃいます！

ドメインの設定なども併せて設定します。
Coolifyの構築ができたら、実際にアプリのデプロイもしてみたいと思います。

> MarketplaceのCoolify
> https://console.cloud.google.com/marketplace/product/etranslab-public/coolify?hl=ja

### GCPを使って構築した場合の料金

**最小構成： ¥ 2,846/月**

Coolify公式がだしている推奨の構成ギリギリです。（ストレージは20GB足りないですが）
金額はMarketplaceに記載のものを書いています。

### 事前準備

- GCPのアカウント発行
- ドメインの取得


### Coolifyを立ち上げる
GCPのMarketplaceからすぐ立ち上げられます。
デプロイ始まるので、インスタンス立ち上がるまで待ちましょう。意外とすぐインスタンス立ち上がります。

Compute Engineを開いて立ち上がったインスタンス開きます。外部IPに3000番ポートにアクセスすると開けます。
（例）http://11.22.33.44:3000
ログイン画面出てきたらOKです。


### Coolifyのアカウントを発行
Coolifyのドメイン設定など、諸々の設定はアプリケーションの画面から行えます。
１番最初に発行されたアカウントがCoolifyの管理者になります。IAMなどの機能もあるので、他のアカウントに管理権限渡すこともできます。

サービスを色々触りたい気持ちがあるともいますが、ドメイン設定するまで待ちましょう。
※ 3000番ポートだとGitHubの連携とかがしにくいです


### 続き
全部書こうと思いましたが、貼り付けに時間がかかるので、続きはこちらで。。。🙇‍♂️

https://blog.salv.dev/index.php/2022/12/03/coolify-hosting/
ソロジャーナルツールを作ってみた感想メモ

## 概要
ソロジャーナルアドベントカレンダー9日目の記事です。
[1日目 晴海悠さん ソロジャーナル　制作の手びき](https://note.com/hal_me/n/ne40794ac30e7)
[2日目 ぐらさん ソロジャーナルを発見したヒトの感想文](https://note.com/grayama/n/n322f35cfd9db)
[7日目 VB/鶏レさん ソロジャーナル用汎用ルール「Wretched & Alone SRD」はいいぞ](https://note.com/box8volume/n/n9c4f589275f6)

ソロジャーナルとは？ は先の記事を読むと分かりやすく書いてあるので、ここでは割愛します。
[ブレスレスジャム](https://campaign.talto.cc/breathless-jam/)で、ソロジャーナル[Garden ―箱庭の島の雛鳥](https://talto.cc/projects/s4Iiu2vxAbsNXjm7EuAsx)を作成していたのでお声がかかりました。

今回は、あまり知らないうちに作った[ソロジャーナルシナリオエディタ](https://www.cartagraph.eisei-teien.ml/cartagraph-solo-journal-editor/journey)と[ソロジャーナルエディタ](https://www.cartagraph.eisei-teien.ml/cartagraph-solo-journal/scenario)と、実際にソロジャーナル作ってみて感じたギャップについて語ろうと思います。

2022/12/09 現在、 Heroku の無料枠終了につき、上記ツールはうまく動作しない状態となっています。

## ツールを作ろうと思ったわけ
[ゲームブックエディタ](https://www.cartagraph.eisei-teien.ml/cartagraph-gamebook/public/1)([※](https://qiita.com/hibohiboo/items/123633cd0ba829ff4d89))を作っていたころに、ソロジャーナルの存在を知り、同じような感じで作れるのでは、と思った。

* シナリオの保存
* ランダマイザの作成

ソロジャーナルは上記の２つがあれば、いけるのでは？と思っていた。

## ツールを作ってみた感じた、コレじゃない感

シナリオにランダム表を登録、ジャーナルを書くときに表の選択結果を表示する仕組みにしていたのだが、どうにも味気ない。
やはり、自分でダイスを振った、ランダマイザを動かした、などの体験が必要なのかも。
ダイスを振って、どれになるかな、のわくわくとか、表をみて、こんな世界観なのか、と想像を膨らませる時間とか。

## ソロジャーナルを作ってみて感じた、ツールに足りなかったもの
[Garden ―箱庭の島の雛鳥](https://talto.cc/projects/s4Iiu2vxAbsNXjm7EuAsx)では、ダイスの結果によって、
次の表に影響を与える、みたいな仕組みを取り入れた。
ツールではこれの表現はできないので、最低限のやりたいことが出来ていなかったかもしれない。

## まとめ
* あえて工程をいれることで生まれる味もあった
* 作成したツールは不良品。。。 もし、私のソロジャーナルをツール化したい、など声がかかれば再設計したい

いろんなソロジャーナルを読める場所があるといいですね。noteとかpixivが今の公開候補なのかな
自社にて「もくもく会」を40回ほど企画してみた

# 1.はじめに
どうも、ARIの名古屋支社に勤務している愛知県民こと、
新藏（にいくら）と申します♪
(/・ω・)/

半年くらい前に、私が企画している「もくもく会」について記事にしました。

https://qiita.com/Aichi_Lover/items/151efa57dfa030f3718f

今も、そのもくもく会は継続していて、先日40回目を迎えたので、
**今回はもくもく会を40回やってみた振り返り**
について記事にしたいと思います！

もくもく会に興味がある方、自己学習について悩んでいる方の参考になれば幸いです。
(*^^)v

ちなみに、12月は**ARIのアドベントカレンダ**もやっていますので、
もしよろしければ、こちらも応援お願いします♪

https://qiita.com/advent-calendar/2022/ari-group

https://qiita.com/advent-calendar/2022/aichi_lover_yomoyama

# 2.用語の説明
## 2.1.もくもく会とは
もくもく会とは、**参加者がやりたいこと（資格勉強や読書やQiitaの記事執筆など）を「黙々」とする会**のことです。
自分が企画したのはオンラインですが、学生時代にみんなで集まってテスト勉強する様なイメージです。

参考URL：https://www.pasonatech.co.jp/workstyle/column/detail.html?p=2282

# 3.企画したもくもく会の情報
こちらは前回と同じですが、具体的に自分がどのようなもくもく会を実施したのかをまとめます。
もくもく会の時間は固定で、その他はかなり自由にしました。

|項目|内容|
|---|---|
| 開催頻度 | 毎週水曜日 |
| 開催時間 | 19:30~23:00 |
| 開催形式 | Web会議室で開催 |
| 対象 | 同じ事業部の人（約80人） |
| 参加・不参加 | 自由 |
| 途中参加・退出 | 自由 |
| マイク・カメラのオンオフ | 自由 |
| もくもくする内容 | 自由 |

自分自身は19:30~21:00、22:00~23:00で参加することが多かったのも同じです。
（間の1時間は**休憩しつつ相棒を鑑賞しています**。）

# 4.もくもく会を企画した感想
## 4.1.勉強時間の確保ができた

やはり、勉強時間の確保ができたのは大きいです。
計40回企画したので、**単純計算で80時間の自己学習ができました。**

私は主にQiitaに投稿する記事を書いていて、**1年で約40本投稿できました！**
さらに、**AZ900の資格を取得することができました！**

また、「第XX回もくもく会」という表記をしておいたので、
自分が何回企画したのか分かりやすくて良かったです。

:::note info
ちなみに、1年が52週なので、もうすぐ1年継続したことになります。
:::

## 4.2.独りでもくもくする時もあったが、レギュラーメンバが1人できた！

もくもく会を10回やった段階では毎回3,4人の参加者がいたのですが、
回数を重ねると参加者が少なくなり、**独り（私だけ）でもくもくする時もありました。**

そんな中、**レギュラーメンバが1人できたため、基本は2人以上でもくもくできています！**

:::note info
独りでもくもくが続くと、折れてしまう可能性もあったので、
レギュラーメンバの方にはとても感謝しています・・・！
:::

毎回8人ほど参加者がいるような会にするにはどうすればいいかは引き続き課題です。

試しで実施する曜日を変えてみたのですが、
月曜日は仕事始まりなので人が少ない、金曜日は飲み会などがあるので人が少ない、
等々の理由で真ん中の水曜日が良さそうという結論になりました。

人数を増やすことだけが目的になると趣旨がずれてしまうので、その点には気をつけます。

:::note info
草の根活動にはなりますが、毎回1人に「もくもく会いかがっすか～」的な
声をかけてみようかと考えています。
:::

## 4.3.少しだけ交流の場になった
こちらは前回の内容と同じで、
誰かが参加したときは今日何をもくもくするか聞いたり、
先に参加した人が何をもくもくしているかを話したりして、
少しではありますが交流の場にもなりました。

**個人的にはコロナの時代だからこそ交流は大切だと思う**ので、
もくもくしながら交流を増やすために何かできないかを考えていきます。

:::note info
入室した時に「好きなおにぎりの具」を聞く・・・とかどうでしょうね？
:::

## 4.4.質問を通じて深い学びができるとより良い
こちらも前回と同じ反省点となります。
もくもく会では質問はOKとしていましたが、
**中々質問は出ず、教え合いでの学びは少ないと感じました。**

ちなみに、Gatherというコミュニケーションツールの導入し、
雑談・質問しながらもくもくしたい人、無言でもくもくしたい人の部屋を分けることも考えましたが、
会社のルール的に色々承認をもらう必要があり、まだ実現できていないです・・・
(´;ω;｀)

# 5.おわりに
ここまで読んで下さり、ありがとうございます！！！
(^^)

10回目のもくもく会からクオリティは下げずに合計40回企画することができたので、
**今のもくもく会は40~50点くらい**と考えています。

**もくもく会で自己学習の時間を確保することができる**ので、
時間の確保の仕方を悩んでいる方は是非試してみてください！

今後の修正方針についてですが、どう盛り上げるのが良いのか、
あまり他の人に相談できていないと感じたので、**一度他の人に相談してみよう**と考えています。

次はもくもく会を100回くらいやったときに記事にしようかな、と考えているのでお楽しみに♪
(:3_ヽ)_
PLATEAUのデータ全部処理する その3　ジオイド高の計算をPythonで

※引き続きColaboratory上で実行していきます。以下のコードは、それぞれセルに入力して実行する前提です。

# ジオイド高の計算をPythonで

PLATEAUのデータは日本のジオイドデータを用いているので、
国土地理院の、[日本のジオイド](https://www.gsi.go.jp/buturisokuchi/grageo_geoidseika.html)のデータを使います。
ダウンロードすると、データファイルとFortranで書かれた計算プログラムのソースコードなどが入手できます。
当初はこのプログラムをPythonに移植すればいいかと思っていましたが、

https://github.com/naokiueda/EllapsoidToElevation/blob/master/EllapsoidToElevation.py

こちらで、日本のジオイドのデータをつかった任意地点のジオイド高計算プログラムを作成されている方がいたので、これを使わせてもらおうと思います。

上記のPythonコードをそのままセルに貼り付け、
以下のように270行以降のmain部分を削除して、最後にgetGeoidData()を二回読んでやります。
これでジオイドモデルのデータ準備が終わりです。

```
...
    if(hasInvalid):
        print('ジオイドの取得に失敗したデータがあります。確認ください。該当するデータは標高を 999999 にしています。')
    else:
        print('処理を正常に終了しました')

getGeoidData()
getGeoidData()
```

```
getGeoidValue(35,135)
```

のように適当な緯度経度を指定してジオイド計算をしてみます。
結果は、以下の国土地理院のサイトで同じ緯度経度を入力して出てきたジオイド高と比較するなどで確認してみましょう。

https://vldb.gsi.go.jp/sokuchi/surveycalc/geoid/calcgh/calcframe.html
プログラミング初心者目線でわからない単語を調べた

## はじめに

現在、Next.jsを用いてReact,TypeScriptを学習していく中で単語の意味が分からず、自分なりに調べたものをメモしようと思います。

いまいち理解しきれていない意味や、違う覚え方をしている恐れもあるので参考程度に。

## 単語集

- **レンダリング**

 HTMLを生成すること。HTML,CSS,JavaScriptなどを元にコンテンツを描画すること。

プログラミング言語を元に、画面に人間が読める形で描画するってことと捉えています。

JavaScriptでは、クライアント側(自分のパソコン)が行うが、ReactのSSR(サーバーサイドレンダリング)では、サーバー側で行われる。
- **静的型付け**

変数の型が状況によって変わらない。変数宣言の際、型を宣言する必要がある。

TypeScriptは、まさにこれですね。

メリットとしては、
メモリ領域の最適化(よくわからないが、型をあらかじめ決めておくことで、無駄な読み込みをさせない？)
パフォーマンスの向上
コンパイル時にエラー処理が出る(実行前にエラーを出してくれるので、正確なコードを書ける？)
- **クロスブラウザ**

多種のWebブラウザに対応している。

おそらく、Googleでしか見れないとかではなくて、EdgeとかYahooでも見れるとかそういったこと
- **UI(ユーザーインターフェース)**

ユーザーの目に見えるものとか、操作するものすべて。

見た目とか使いやすさとか。
- **ルーティング**

異なるネットワークにパケット(データとか？)を送信する際に、最適な配送経路を決めること

これはいまいちよくわからなかったです。
- **ネイティブアプリ**

App Storeなどのアプリケーションストアを介してインストールするタイプのアプリ
- **インタラクション**

「inter(相互に)」「action(作用する)」を掛け合わせたもの。
ユーザーのアクションに対して、リアクションする。

例えば、再生ボタンを押すと、音楽が流れる等
- **OSS(オープンソースソフトウェア)**

誰でも自由に使えるソフトウェア
- **プロキシ**

ブラウザの代わりにサーバーに依頼を出してくれるやつ。

普通は、ブラウザが直接サーバーに依頼を出す。

メリットは、
サーバー側にこちらのブラウザの身元が隠せる（依頼を出すのがプロキシだから）
アクセスが早くなる

## 最後に

本日は、とりあえずこれくらいにします。

これらの単語が当たり前に使われているから、挫折の原因にもなるなと思ったためシェア。
あとは自分用のメモです。

もし全然違うわボケってのがあったら教えてください。
「npm install -g @aws-amplify/cli」実行したが無効コマンドとして扱われる

# 【記事対象者】
「npm install -g @aws-amplify/cli」実行後、
コマンドプロンプト、PowerShellそれぞれでamplifyをコマンドとして実行したい人向け

# 【事の発端】
Amplify CLIを使うため、[AWS公式チュートリアル](https://aws.amazon.com/jp/getting-started/hands-on/build-react-app-amplify-graphql/module-two/)を参考にnpm installを実行、
インストール完了か確認するためバージョン確認したがそれぞれでコマンドとして認識されていないエラーが発生
```
npm install -g @aws-amplify/cli
amplify -v
```

コマンドプロンプト↓
```
'amplify' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
```

PowerShell↓
```
amplify : 用語 'amplify' は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。名前が正しく記述されていることを確認し、パスが含まれている場合はそのパスが正しいことを確認してから、再試行してください。
発生場所 行:1 文字:1
+ amplify
+ ~~~
    + CategoryInfo          : ObjectNotFound: (amplify:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException
```

# 【原因】
それぞれのshell上でパスが通っていなかった

# 【使用環境】
-Windows10
-npm 8.19.2

# 【対応策】
注意：パスはコマンドプロンプロとPowerShellは別なためそれぞれでパスを通す必要がある
（知らなかった、、）

まず、通すパスを確認するため下記コマンドを実行。
```
npm config get prefix
```
npmを使用してインストールしたモジュールが格納されているフォルダへのパスが表示される
私の環境では、C:\Users\potita\AppData\Roaming\npmでした

#### コマンドプロンプト
```
#現在のパス一覧を確認
echo $PATH
```

①「システム環境変数の編集」を開く
②「環境変数」押下
③「システム環境変数（S）」のPathを選択して「編集」押下
④「新規」からパスを追加

もう一度、echo $PATHで表示されているか確認
（一度コマンドプロンプトを閉じてから実行した方がいいかも）

#### PowerShell
```
#現在のパス一覧を確認
echo $ENV:Path
#パスを追加 この形式→$ENV:Path="パス;"+$ENV:Path
$ENV:Path="C:\Users\potita\AppData\Roaming\npm;"+$ENV:Path
```

PowerShellは[実行ポリシー](https://learn.microsoft.com/ja-jp/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.3)の影響で、パスを通した後にamplify -vを実行しても無効なスクリプトと表示されてしまいます

そのため実行ポリシーを一度変更して、実行する必要があります
```
#現在の実行ポリシー確認
Get-ExecutionPolicy

#Restricted（デフォルト）からRemoteSignedへ変更する（プロセスの期間だけ）
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process
```
（セキュリティ上、変えたままでいいのかちょっとわからない、、コマンドプロンプトで実行できちゃうならもはや関係なくね？とも思うんですが、、）

# 【参考記事様】
https://qiita.com/onizine/items/2e9d3024d16cdeb63f46
https://qiita.com/ponsuke0531/items/4629626a3e84bcd9398f

# 【余談】
パスが通っていないことが原因なのはわかったが、
自分の場合、npm install -g @aws-amplify/cliした後にコマンドプロンプトを管理者権限で開くとamplifyコマンドが通るという現象が起こった（環境パス通していないはずなのに、、）
今はコマンド使えるで問題ないが、気になったので原因わかったら追記します
EC2でソースからmysql



```
wget http://ftp.gnu.org/gnu/gzip/gzip-1.8.tar.xz
tar -xvf gzip-1.8.tar.xz
wget https://cmake.org/files/v3.25/cmake-3.25.0-linux-x86_64.sh
sudo chmod +x cmake-3.25.0-linux-x86_64.sh
sudo ./cmake-3.25.0-linux-x86_64.sh
sudo mv cmake-3.25.0-linux-x86_64 /opt
sudo ln -s /opt/cmake-3.25.0-linux-x86_64//bin/* /usr/bin
sudo yum install gcc-c++
※gccも必要
sudo dnf install openssl-devel
sudo yum install ncurses-devel 
 cmake  -DDOWNLOAD_BOOST=1 -DWITH_BOOST=/home/ec2-user/mysql-8.0.31/boost /home/ec2-user/mysql-8.0.31
```
[参考]
https://yoku0825.blogspot.com/2019/12/conohamysql-in-2019.html
Kotlin の名前の由来を調べてみた

【完走賞】MxShun ひとりマラソン 🏃 Advent Calendar 2022 毎週金曜日は Kotlin の記事を書こう！3記事目です。

「Kotlin かわいい、Kotlin かわいい」って言ってきたんですが、ふと Kotlin の名前の由来を知りたくなったので調べてみました。（今回はとてもライトな記事になりそうです :smiley: ）

### 由来
単刀直入に、Kotlin はバルト海・フィンランド湾の奥に位置するロシア連邦の島名が由来のようです。

https://goo.gl/maps/RwGK4eL78je9FnmA7

JetBrains 社が R&D センターを構えるサンクトペテルブルクにほど近いこの島から名前を拝借したようですね。

https://resources.jetbrains.com/storage/products/jetbrains/docs/corporate-overview/ja-jp/jetbrains_corporate_overview.pdf#page=35

### Kotlin island
Kotlin island の情景をもう少し垣間見ることにします。

緯度は北海道よりはるかに高く約 60 度、経度は東経 29 度に位置します。と言ってもイメージしにくいかと思いますが、フィンランドの東側・ロシア近東に位置するとすれば少しイメージできるかと思います（たぶん）。
島の広さは南北に 2 km、東西に 14 km、計 30 km2ほどのようです。この広さをどうにか例えたいと思ったんですが、東京の府中市ぐらいの広さだとか。少しイメージできるようになりましたね（たぶん）。

歴史的には元来フィンランド領地だったようですね。12世紀スウェーデン王による十字軍の占領を経てロシアとの争奪地となったのち、現在のロシア領土となったみたいです。
その歴史的背景は Kotlin island の都市クロンシュタットにも色濃く表れています。クロンシュタットに立つ海の聖堂はロシア海軍の主要境界として機能し、その周りにはロシア海軍を模したモニュメントが多く点在しています。

https://goo.gl/maps/vx1GLNzBJKeTTYgW6

### まとめ
今回は、Kotlin への愛から出発し、その名前の由来とゆかりの地の情景や歴史的背景に一歩踏み込んでみました。島の景観はとても美しく、より Kotlin への愛の芽が伸びたような気がします。

（蛇足ですが）これだけロシアにゆかりを持ちつつも、よくないと思うものにはよくないと中立的に主張できる JetBrains にはより支持したいという気持ちが沸きました。

https://twitter.com/jetbrains/status/1496786254494670851?s=20&t=PNmJLQglueDhN4UmVnBMiA
wsl2セットアップメモ

wsl2環境を新しく作る機会があったので、手順をメモしました

## 1. wsl,　仮想環境の有効化
```powershell
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all
```

この設定はコントロールパネルからGUIで設定しても問題ないです

## 2. wsl2のインストール
powershellで
```bash
wsl --install
```

デフォルトでUbuntuがインストールされる

## 3. Windows Terminalのインストール
https://apps.microsoft.com/store/detail/windows-terminal/9N0DX20HK701?hl=ja-jp&gl=jp

なくても問題ないですが、便利なのでおすすめです
wsl2のプロファイルが自動的に追加されます
ここまででとりあえずwsl環境が使えるようになります

## 4. windows側のPATHを引き継がないようにする
windows側のPATHを引き継ぐので引き継がないように設定します
設定は必須ではありませんが、必要なものだけに絞りたかったので設定しています
`/etc/wsl.conf`に設定を記載します
```bash
sudo vi /etc/wsl.conf
```

```conf:wsl.conf
[interop]
appendWindowsPath = false
```

### 必要なWindows側のPATHを通す
このままだと`code`コマンドでVS Codeを開いたりができなくなってしまいます
必要なPATHだけを通しておきましょう
以下はVS CodeのPATHを通すときの例です
```bash
export PATH="/mnt/c/Users/$USER/AppData/Local/Programs/Microsoft VS Code/bin:$PATH"
```

## まとめ
これでwsl2環境が使えるようになりました！
wsl1のときはもう少しセットアップが面倒な印象でしたが、それほど大変な思いはせずにセットアップできました
エンジニアの係長の役割について考えてみた話

# 1.はじめに
どうも、ARIの名古屋支社に勤務している愛知県民こと、
新藏（にいくら）と申します♪
(/・ω・)/

今回は久々にポエム的な記事です。
ありがたいことに私は**9月からARIで係長**をやらせていただいています。

:::note info
厳密には「グループリーダ」という役職ですが、
次の役職が「課長」や「技術のスペシャリスト」のため、
この記事では「係長」と記載しています。
:::

そこで**今回はエンジニアの係長の役割について**考えたことを記事にしたいと思います！
同じような境遇の方の参考になれば幸いです。
(*^^)v

:::note info
あくまで、私の考えのため読者のみなさんと認識が違う点が
あると思いますが、悪しからず・・・
m(__)m
:::

ちなみに、12月は**ARIのアドベントカレンダ**もやっていますので、
もしよろしければ、こちらも応援お願いします♪

https://qiita.com/advent-calendar/2022/ari-group

https://qiita.com/advent-calendar/2022/aichi_lover_yomoyama

# 2.そこそこの技術力を持つ「技術者」という役割

最初に私が感じたのは、やはりIT業界ですので
**技術者としての能力が求められる**ということでした。

数年間エンジニアとして働いているので、
**狭く深く何かに特化している、広く浅く幅広い知識を持っている**等々パターンはあると思いますが、
1,2年目の人に教えられるくらいは習得している必要があるのかなと考えています。

ちなみに私の場合だと・・・AWS,AmazonConnect,Azure,光スイッチの設定等々、
広く浅く身に着けている感じですね。
(｀･ω･´)ゞ

# 3.自身、他者を管理する「管理者」という役割

もう1つ感じたのは、**自分自身はもちろん、他者を管理する管理能力が求められる**ということです。

係長より前は自分の有給、残業時間、各種提出物の締め切り等が管理できていればOKですが、
係長は他者の管理も必要と考えています。

その他にも**売り上げがどう、粗利がどう、というお金の話ができる**ことも必要と思いますが、
私の場合は、特に最後のお金の話が弱いので、今後精進していきます・・・
m(__)m

# 4.「専門職かつ管理職」という役割

2章、3章の内容を書いていた時にふと、**係長は技術の専門職と管理職の分岐点にいる**と思いました。

係長の段階では技術の話も、管理職の話も両方できる様にバランスをとりつつ、
自分自身が今後どちらに進みたいかを決められると良いと考えています。

ちなみに、私はどうなりたいかというと・・・
実はあまりどちらにもこだわりはなく、**ARIの名古屋支社に必要な職種**になりたいと考えています。

というのも私は「**ARIの名古屋支社を発展させる**」ということを実現したいので、
その過程で専門職が足りなければそちらの道に、
管理職が足りなければそちらの道に行きたいと考えています。
(*^^*)

# 5.「アウトプットをする・させる」という役割

その他、エンジニアならアウトプットは必要ですが、
係長の場合は自分だけでなく**他者のアウトプットも促す**のも必要と考えています。

一緒にアウトプットを促す仕組みづくりや、
他者への動機づけをするということもできるとより良いと感じました。

私の場合ですと、**もくもく会や、社内イベントを企画する委員会**で活動していますが、
まだまだ結果には満足できていないので、こちらも引き続き精進します・・・
m(__)m

# 6.おわりに
ここまで読んで下さり、ありがとうございます！！！
(*^^)v

徒然なるままに書いてみましたがまとめると
* **係長は技術職としての能力も管理職としての能力も求められる**
* **係長は自分のことだけでなく、他者にベクトルを向けることが求められる**

になるのかなと思いました。

今後も節目節目でポエム的な記事は書いていくので、
引き続きよろしくお願いします♪
(:3_ヽ)_
デザイン・フロントエンド・バックエンドをやってみて良かったこと

この記事は、HRBrain Advent Calendar 2022 13日目の記事です。

https://qiita.com/advent-calendar/2022/hrbrain

# はじめに
こんにちは、株式会社HRBrainでデザインエンジニアをしているもず（@Mozu1206）です。
ふるさと納税の返礼品選びに夢中になってしまい、ブラックフライデーではスイッチボットしか買えませんでした。
ちなみに、個人的オススメ返礼品は北海道の冷凍ホタテです。

この記事では、デザイン・フロントエンド・バックエンドをやってみて個人的に良かったと思うことを紹介します。

# デザイン・フロントエンド・バックエンドそれぞれ何をやってたか
ざっくり私がそれぞれの領域でやっていたことを記述します。

| 領域           | やっていたこと                                                                                                      |
| -------------- | ------------------------------------------------------------------------------------------------------------------- |
| デザイン       | メディアデザイン領域の修士課程で、感性工学を専攻。UI/UXやHCD(Human Centered Design)などを学ぶ。                    |
| フロントエンド | 株式会社HRBrainで[サービスサイト](https://hrbrain.jp)や[コーポレートサイト](https://hrbrain.co.jp)の開発を担当。 |
| バックエンド　 | 某ASP事業会社でサービス保守運用、社内システムの開発及びDockerを用いたローカル環境の構築などを担当。             |


# 結論何が良かったか
ランキング形式のものを見ると、「早く1位を教えてくれ！」といつもなるので、さっそく結論からいきます。
良かったと思うことは下記5つです。
1. 凝ったデザインが必要ない軽微な改修であれば、自分でいい感じに調整して実装し、デザイナーの工数を最後の確認くらいに抑えられる。
1. 実装工数を削減するためのデザイン変更を、デザイナーがギリギリ許容してくれるラインで提案できる。
1. ホスティングサービスとシステムの接続や、ドメイン管理などがなんとなくできるため、小回りが利きやすい。
1. Dockerfileなど、ちょっとインフラに関わりそうな部分のファイルもなんとなく読める。
1. デザインからフロントエンド、バックエンドまでなんとなく分かります！と言える。

これらを分類すると、「デザインとフロントエンドが分かって良かったこと」と、「バックエンド（インフラ寄り）が分かって良かったこと」になるので、それぞれ分けて詳しく書いていきます。

## デザインとフロントエンドが分かって良かったこと
一言でいうと、**デザインの原則を最低限押さえた実装が1人でできること**です。このメリットは、**チーム全体の工数の削減**です。
もちろん、新機能など大掛かりなものはデザイナーに入ってもらわなければいけません。
しかし軽微な改修であれば、毎回デザイナーに1つ1つデザインしてもらうのではなく、**デザインの原則を最低限押さえた上で実装し最後に確認してもらう**方が良い場合もあります。
こうすることで、デザイナーの工数を大きく削減でき、より効果が大きい部分に注力してもらえます。（このやり方が良いか悪いかは、もちろんチームによります。）

また、コンポーネントの兼ね合い等で、デザインを少し変えるだけで実装工数が大きく変わる場面もあると思います。そのときに、デザインの原則が分かっていれば、**最低限押さえるところを押さえたデザイン提案**ができます。これにより、ユーザーにより早く価値を提供することができるようになります。

このように、デザインの原則を押さえた上でフロントエンド開発をすることで、工数削減の観点だけでも多くのメリットがあります。
※しかし、工数削減のみでは非常にもったいないと感じているため、エンジニア側からデザインの表現方法の提案などをどんどんしていくことが、チームをより良くするために重要だと思っています。


## バックエンド（インフラ寄り）が分かって良かったこと
こちらも一言でいうと、**ホスティングサービスの設定やリリース時に小回りが利きやすいこと**です。私のバックエンド開発経験がインフラ寄りのため、下記内容もそれに準じています。

私が担当している[サービスサイト](https://hrbrain.jp)と[コーポレートサイト](https://hrbrain.co.jp)はそれぞれホスティングサービスでデプロイされており、私はその管理も担当しております。ホスティングサービスの監視や調整を日々行っていますが、これは多少なりともインフラの知識があるために、抵抗感なくできているのだと思います。

また、最近コーポレートサイトのリニューアルがあり、その際にはホスティングサービスやドメイン管理システムを触る必要がありました。他にも、証明書を有効化する必要があったりと、多くの考慮すべき点がありましたが、バックエンドエンジニア時代の経験のおかげでなんとか無事にリリースさせることができました。

このように、多少バックエンド（インフラ）の知識があるだけでも、ある程度対応力が上がり、小回りを利かせて多くのことに対応出来るというメリットがあります。

# まとめ
私が所属しているコミュニケーションデザインでは、弊社と顧客のタッチポイント（接点）の創造をしており、マーケティングメンバーと協業しながら日々改善を行っています。

そのため、実装完了までの時間＝顧客に価値を届けるまでの時間を、なるべく短くすることが重要であり、特に私が担っているデザインエンジニアは、デザインからバックエンドまでの知識を持っていることの優位性を活かしやすいポジションだと思います。

デザインからバックエンドまで幅広くやってみたい方、マーケター・デザイナーと協業しながら顧客価値の最大化を目指してやっていきたい方、是非1度カジュアル面談でお話ししてみませんか？

https://www.hrbrain.co.jp/recruit
jupyter labで簡単動作確認

この記事は、以下のアドベントカレンダー9日目になります

https://qiita.com/advent-calendar/2022/nw-engineering-are-core-output


5日目のzabbix api の記事を受けて、以下の情報を記載してみたいと思います
1. jupyter lab による簡単な返り値等の確認
1. zabbixに対してはpy-zabbix というライブラリを利用

**5日目の記事はこちら**
https://qiita.com/hon_m/items/b7b19b623335f7040502

# それぞれどのような役割で利用するか

>**py-zabbix**
py-zabbixは記載した通り、jsonを生で書き下ろさずにライブラリを介して監視データを取得するために利用します


>**jupyter lab**
jupyter lab は、コードを１つずつ確認しながら進めるために利用します

画面ではこのようにみえます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153265/71db63a7-7fbc-633e-935a-4b4a25d82f3a.png)
- セルごとにステップ実行しながら結果を確認して進めていくことができます

# jupyter lab をインストール
まずは以下のコマンドでjupyterlabをインストールします
```python:install
ogurin@zabbix_api_srv$ pip3 intstall jupyterlab
```


インストールが完了したら、起動します
```python:起動
ogurin@zabbix_api_srv$ jupyter lab
`中略`
    To access the server, open this file in a browser:
        file:///home/ogurin/.local/share/jupyter/runtime/jpserver-27667-open.html
    Or copy and paste one of these URLs:
        http://localhost:8888/lab?token=xxxxx
     or http://127.0.0.1:8888/lab?token=xxxxx
```
- 出力されたhttpサーバへアクセスすると、jupyter lab のUIが表示されると思います。これで、準備完了です
![jupyter起動.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153265/afeb0fc2-4d07-4cfb-50ce-50b1c5771faf.jpeg)

# py-zabbixをインストール

まずは最初のセルで、py-zabbixをインストールします
以下をセルの中に入力し、「Shift + Enter」でセルごとに実行します
```
!pip3 install py-zabbix
```

次に、今回の処理で必要なpandasとpyzabbixをインポートします
```
import pandas as pd
from pyzabbix import ZabbixAPI
```

以下の画面のようになります
![jupyterlab実行結果.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153265/4453638e-fe08-34c6-b2ad-00a1e618b928.jpeg)
- 左側の数字は、kernelを起動して以降の実行された順番です
今回は先頭に[3]が表示されていますが、おかしなことをしなければ先頭は[1]になっているはずです

# jupyter lab でエラーをすぐに発見出来る
今回、zabbix info の下のセルで変数に格納している値を誤ってしまいました。
そのため、tokenをgetするところで以下のようにエラーとなりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153265/61b508a2-5187-73b4-5056-2a55142cf869.png)
この画面を見て、先ほどのzabbix info を修正しエラーの解消にすぐに当たることができました

# py-zabbixを利用してzabbix情報を取得する
今回は、host.getを用いてホスト情報の中からホスト名とホストIDを取得します

例えば、このようにhosts.infoに格納した[13]の要素におけるhost名は、dummyというホスト名でした
正しくzabbixから値が取れています
![dummyを取得.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153265/960a52ee-cce6-59e6-c4e4-2cba125534a7.png)

zabbixからInterface情報のアイテムを取得していく際には、hostidが用いられるため、hostidも併せて取得してdataframeへ格納して表示してみます
![13_get.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153265/513a5a95-7d19-56dc-3330-16f8e7e15e9a.png)

**出力結果を若干加工してしまったため、[13]の要素のみ表示されていますが、実際はすべてのホストについて出力されるはずです**

これらを関数にして、しまってもよいと思います

# まとめ
このように、jupyter labを利用するとプロセスごとに動作を確認しながら進めるため、初心者が動きを確認する際には便利だと思います
そのほかにも、pythonのnetmikoを利用してネットワーク機器からの返り値を確認したり、いろいろと活用出来るかもしれません
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153265/c3655f21-184d-ccb8-af8e-c8f74bdc75f1.png)
jQueryのSlickでカルーセルを作成する際の注意点

# Slickとは
jsのライブラリであるjQueryのプラグインです。
Slickを用いることで、カルーセルを簡単に作成することができます。

＊カルーセルとは、スライドショーとも呼ばれるもので、画像や文字がスライドして表示されるUIのことです。そもそもの単語の意味としては「回転台」らしいです。

# html
``` <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">　
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul class="slide-items">
    <li><img src="images/program_img1.jpg" alt=""></li>
    <li><img src="images/program_img2.jpg" alt=""></li>
    <li><img src="images/program_img3.jpg" alt=""></li>
  </ul>

  <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  <script src="script.js"></script>
</body>
</html>
```
# CSS
```
.slide-items{
    width:100%;
    text-align: center;
 }
 .slide-items img{
  margin: 5% auto;
 }

 .slick-dots {
  margin:5% auto;
  display:flex;
  justify-content: center;
  list-style: none;
  padding: 0; /*謎の設定が適用されていたのでこれで0指定*/
}
.slick-dots li {
  margin:0 3%;
}
.slick-dots .slick-active button{
  background:#333;/*ドットボタンの現在地表示の色*/
}
.slick-dots button {
  color: transparent; /* テキスト透明化。これがないとボタンに数字が浮かんでしまう*/
  outline: none;
  width:20px;/*ドットボタンのサイズ*/
  height:20px;/*ドットボタンのサイズ*/
  border-radius:50%;
  background:#ccc;/*ドットボタンの色*/
}
```
# JS
``` 
$(".slide-items").slick({
  dots: true,
});
```
これでok
この三つを組み合わせ、無事にカルーセルを作成することができた。
今回は中々うまくいかず、ちょっと苦労した...
# 注意点
jQueryを導入したプログラムを自作してみるのは初めてだったため、導入に苦戦した。
よく言われる注意点としては、HTMLにJSを読み込ませる順番である。

↓でおk
①jQuery　→　②プラグイン　→　③自作JSファイル　

CDNでjQueryを用いる際は注意すべき点である。
私の場合はこれはできていたが、プラグイン、つまりSlick専用のCSSファイルをheadタグ内に書くことができておらず、謎の挙動をするカルーセルを作成してしまった。
導入のポイントとして特に説明されている感じがなく、私は見落としてしまった。こちらも注意すべきである。

## 気がかりポイント
私が参照した教材では、jQueryは古い技術になりつつあるため、素のJSを記述できるエンジニアの方が価値が高いとされていた。これはReactやVue.js、TypeScriptといったフロントエンドにおける新しい技術が活発化しているからで、そこに対応するためには基礎的なJSの理解が不可欠である、ということだと解釈したのですが、やはり実際のところそうなのでしょうかね。


## 参考サイト
https://coco-factory.jp/ugokuweb/move01/6-1-6/
（MLP）ベイズ深層学習　須山敦志先生　講談社

```r

#3層パーセプトロン
#ガウスニュートン法の場合 p.23
#意外と早くて便利なイメージ。

data("anscombe")
data=anscombe
X=as.matrix(data[,colnames(data) %in% c("x1","x2","x4")])
Y=as.matrix(data[,colnames(data) %in% c("y1","y2")])
#Y[,1]=Y[,1]/max(Y[,1]);Y[,2]=Y[,2]/max(Y[,2])
N=ncol(Y);H=2;M=ncol(X);n=nrow(data)
Y=c(Y)

wij=array(sample(1:9,N*H,replace=T),dim=c(N,H))/100
wjk=array(sample(1:9,H*M,replace=T),dim=c(H,M))/100
sita=c(wij,wjk)

alpha=0.1
h=0.001
lam=1
ite=10^3
eta=10^(-2)

act_f=function(z){
return(ifelse(z>0,z,alpha*(exp(z)-1))) #ELU:exponential linear unit 
}

f=function(W){
Wij=matrix(W[1:prod(dim(wij))],nrow=nrow(wij),ncol=ncol(wij))
Wjk=matrix(W[-c(1:prod(dim(wij)))],nrow=nrow(wjk),ncol=ncol(wjk))
os=act_f(t(Wjk%*%t(X)))
fs=act_f(t(Wij%*%t(os)))
return(c(fs))  
}

for(l in 1:ite){
sita_pre=sita
Z=array(0,dim=c(length(Y),length(sita)))
vec=sita
for(j in 1:ncol(Z)){
vec_sub=vec;vec_sub[j]=vec_sub[j]+h
Z_sub=(f(vec_sub)-f(vec))/h
Z[,j]=Z_sub
}
beta=solve(t(Z)%*%Z+diag(lam,ncol(Z)))%*%t(Z)%*%(Y-f(sita))
sita=c(sita+eta*beta)
print(sum((Y-f(sita))^2))
}

plot(c(1:length(Y)),Y,xlim=c(1,length(Y)),ylim=c(min(c(Y,f(sita))),max(c(Y,f(sita)))),xlab="Index",ylab="Objective Variable",col=2,type="o")
par(new=T)
plot(c(1:length(Y)),f(sita),xlim=c(1,length(Y)),ylim=c(min(c(Y,f(sita))),max(c(Y,f(sita)))),xlab="Index",ylab="Objective Variable",col=3,type="o")

```
運勢占いをつくってみた


# はじめに

唐突ですが、みなさん運勢占いは好きですか？
ラッキーカラーを身につけて気分を上げたり、楽しいですよね！
そんな運勢占いを今まで習ったHTMLやCSS、JavaScriptでつくってみました！
少しでも楽しんでいただけると幸いです。

## コード

HTML,CSS,JSそれぞれのコードを置いていきます。
#### HTML
~~~ruby:index.html<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本日の運勢</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="zenn">
        <h1>今日の運勢占います</h1>

        <div class="mae">
            <button onclick="uranai()"><img src="img/suisyou.png" alt=""></button>
            <h2>　←水晶をタップ</h2>
        </div>
        <p id="unnsei"></p>
        <p id="com"></p>
        <p id="iro1"></p>
        <p id="iro2"></p>
        <p id="item"></p>
        <p id="kekka"></p>    
        
    </div>

    <script src="main.js"></script>
</body>
</html>
~~~
占うときただのボタンだと面白くないので、buttonタグにimgで占いっぽい水晶をボタンにしてみました。

#### CSS
~~~ruby:style.css
body{width: 500px;    margin: auto;}
button{outline: none;    border: 0ch;}
img{width: 100px;    border: 0;    cursor: grab;}
p{font-size: 20px;    font-weight: bold;}
.mae{display: flex;}
.mae h2{text-align: center;    margin-top: 40px}
body{background-image: url(img/uranaishi2.png);}
.zenn{background-color: rgba(246, 212, 246, 0.886);    width: 450px;
    padding-left: 15px;    padding-bottom: 10px;
    padding-top: 10px;    margin-top: 30px;
    margin-left: 10px; }
~~~

CSSはあまり得意ではないのでそろえる程度です。
水晶にカーソルが乗ったときにカーソルが手✋に変わるようにしました。

#### JS
~~~ruby:main.js
function uranai(){
    let unnsei=["大吉","吉","小吉","凶","大凶"];
    let r=Math.floor(Math.random()*unnsei.length);
    
    document.getElementById("unnsei").innerHTML="あなたの今日の運勢は"+unnsei[r];
    let com=["素晴らしい！最高の一日✨","今日もいい一日になるよ！","何とも言えない普通の日...","絶妙に運の悪い一日になりそう","最悪の一日に...気を付けて"]
    document.getElementById("com").innerHTML=com[r];
    
    let iro=["白","黒","赤","青","緑","黄","ピンク","紫"];
    let i=Math.floor(Math.random()*iro.length);
    document.getElementById("iro1").innerHTML="ラッキーカラーは"+iro[i];
    document.getElementById("iro2").innerHTML=iro[i]+"色のものを身に着けると運気アップ🆙";

    let item=["ぬいぐるみ","時計","お花","ティーポット","音楽プレーヤー","ハンドクリーム","スニーカー","お菓子"]
    let t=Math.floor(Math.random()*item.length);
    document.getElementById("item").innerHTML="ラッキーアイテムは"+item[t];

    if(r<4)
        document.getElementById("kekka").innerHTML="今日も良い一日になりますように🍀"
    else
    document.getElementById("kekka").innerHTML="明日はきっといい日になるよ☻☻"
}
~~~

占い結果やラッキーカラーを乱数で出すようにしました。
種類もたくさん入れているので組み合わせは多いはずです！
lengthで乱数を求めているので要素の追加もしやすいと思います。

#### 実際のサイト
![占い１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982402/2343ec63-f1b0-87c0-db7a-0a0122add46b.png)
タップ後⇩⇩⇩
![占い２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982402/debefaa0-65c8-9b1d-6f39-bc9d4d86f3e4.png)
イラストは全ていらすとやさんからお借りしました。

## 最後に
自分が作りたいものを実現するにはその言語のことを詳しく知らないといけないし、
作っていくうちにより理解が深まった気がしました。
まだまだ分からないことが沢山あったのでより一層頑張らなくてはと思いました。
実際作り始めると楽しかったです。
皆さんも楽しく学べるものを自分から積極的に学んでください！
そしてたまに息抜きで運勢占いしちゃってください!!（笑）

最後までまで見ていただきありがとうございました！
[interactions.py] Discord Botの作り方 #01 - Slash Command ①

# はじめに
この記事ではinteractions.pyというモジュールを使用してDiscord Botを作りたい人向けです。

#01では実際に簡単なプログラムを作っていきます。

## interactions.pyのインストール
それではコマンドプロントを起動してインストールしていきましょう。
起動したら以下の二つのコマンドを入力しましょう。
```
pip install discord-py-interactions
```
```
pip install interactions-wait-for
```

## 実際にコードを書く
では今から実際にコードを書いていきます。
main.pyなど好きな名前のファイルを作成し、以下の内容を書き込みます。

内容は `/test` と入力すると `コマンドが実行されました` と返信するものです。

まずはinteractions.pyをインポートします。
```python
import interactions
from interactions.ext.wait_for import wait_for, setup
```

次にBotのTokenとコマンドを登録します
```python
Token = "Botのトークンをコピペ"

bot = interactions.Client(token=Token, intents=interactions.Intents.ALL)
setup(bot)

@bot.command(
  name="test",
  description="テストコマンド",
)
```

最後に `/test` と書かれた時にする動作を書きます。
ここでは「コマンドが実行されました」と送信するようにします。

```python
async def test(ctx: interactions.CommandContext):
  await ctx.send("コマンドが実行されました")
```

最後にBotを起動させます

```python
bot.start()
```


ファイルを保存して実行してみましょう。
成功すると `The HTTP client has exhausted a per-route ratelimit. Locking route for 0.999 seconds.` と表示されます。

## 実際にBotを動かしてみる
では早速実行してみましょう。
![EF5A47E7-BBC6-4100-90AA-AF361897D9F3.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039218/bdc8bfa0-ba20-ea00-e467-199f934ee290.jpeg)
エラーも出ずに実行できるとこの様になります！お疲れ様でした。

# 最後に

今回はinteractionsに含まれる Slash Commandについて解説しました。
次回はButtonとSelectMenuについて解説していきたいと思います。

もし分からないところがあれば `Azusa#5812` に気軽にDMしてください。

# Discordサーバー

この度、bot開発者が話し合えるようなDiscordサーバーを開設しました！
ぜひ見に来てください！

https://discord.gg/nxBsFDgbFJ
Pythonでprivateメソッドを外から呼ぶ方法

## はじめに

これは [RICORA Advent Calendar 2022](https://adventar.org/calendars/7447) 9日目の記事です。

以前CTFに参加した際に解いたPythonのエクスプロイトの問題で, privateなメソッドをクラスの外から呼ぶ解法で解いたので, 調べて直してまとめました.
## Pythonのclassにおけるprivateの振る舞い
まず, 次のようなコードで通常の振る舞いを確認します.
```python: test.py
class Test:
    a = 1
    __a = 10

    def show(self):
        print(self.a)

    def __private_show(self):
        print(self.__a)
```
普通の関数および変数は問題なく呼び出すことができます.
```python: テストコード
test = Test()

print(test.a)
test.show()

# 1
# 1
```
アンダーバーを2つつけたフィールドおよび関数はprivateになるので, このような参照は行うことができません.
```python: テストコード
print(test.__a)
test.__private_show()

# Traceback (most recent call last):
#   File "c:\Users\***\Documents\py\advent\a.py", line 17, in <module>
#     print(test.__a)
# AttributeError: 'Test' object has no attribute '__a' 
```
## 特殊属性, 特殊メソッドについて
これは `__main__` や `__name__` などのことです. この2つはグローバルから参照することができたりしますが, classにおいても存在してます.
先ほどのTestクラスで試してみると


```python
print(Test.__dict__.keys())

# dict_keys(['__module__', 'a', '_Test__a', 'show', '_Test__private_show', '__dict__', '__weakref__', '__doc__'])
```
このように, classの持つ名前空間にアクセスすることができます.
### privateへのアクセス
これを使えば次のようにprivateなパラメータに対してもアクセスできてしまいます.
```python
print(Test.__dict__["a"]) 
# 1
print(Test.__dict__["_Test__a"])
# 10
Test.__dict__["show"](Test)
# 1
Test.__dict__["_Test__private_show"](Test)
# 10
```
この方法を用いたCTFの問題では, `eval`に任意の文字を送ることができたので, この例のようにアクセスし, flagを入手しました.

### 追記
アクセスする際に参照した`__dict__`ですが, 公式ドキュメントによると
> カスタムクラス型は通常、クラス定義 (クラス定義 参照) で生成されます。クラスは辞書オブジェクトで実装された名前空間を持っています。クラス属性の参照は、この辞書に対する探索 (lookup) に翻訳されます。例えば、 C.x は C.\_\_dict\_\_["x"] に翻訳されます (ただし、属性参照の意味を変えられる幾つかのフックがあります)。

ということなので, 次のように呼ぶこともできます.

```python
print(Test._Test__a);
# 10
Test._Test__private_show(Test)
# 10
```

### インスタンスからのアクセス
インスタンスからも同様にアクセスすることができます.
```python
print(Test().show())
# 1

object.__new__(Test).show()
# 1

Test()._Test__private_show()
# 10

object.__new__(Test)._Test__private_show()
# 10
```
## おわりに

最近pythonの仕様を突いたエクスプロイトの問題をよく見かけるので, 備忘録としてこの記事を書きました.
このジャンルの問題は毎回頭を悩ませる反面, 非常に面白くもあるのでCTFで見かけた際には積極的に解きに行こうと思います.
## 参考サイト
- [python公式ドキュメント](https://docs.python.org/ja/3/reference/datamodel.html?highlight=slots)

## 編集履歴
2022/12/09 `__dict__`について追記, インスタンスからの呼び出しについて訂正