OmniAICreator/Qiita-1.07M huggingface dataset:
Alpine.jsで非表示の要素（モーダルなど）が読み込み時に一瞬表示されてしまう時の対処法

# この記事で解決できること
### 例えばこういう場面
x-dataで{ open:false }をデフォルトで設定しといて、ボタンをクリックしたら{ open: true }にして表示させよう！
```html
<button x-data={ 
    open: false, 
    toggleOpen(){ open = ! open }
    }>

<div x-show="open">やっほー</div>
```

↑ボタンクリックしたら「やっほー」が表示されるコード

上手くいってそうですが<b><font color='red'>このコードだとブラウザで読み込み時に一瞬だけ「やっほー」が表示されてしまいます。</font></b>

::: note
これは<b>"Blip"</b>と呼ばれる現象です。
HTMLがAlpine.jsより先に読み込まれることにより、x-showの要素が表示されてしまう現象です。
:::

### 要はこういうこと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311883/791e7dd0-e828-d7fa-bb7c-7f94045fee9d.png)

<b><font color='red'>赤矢印が"Blip"が起きる瞬間です</font></b>

# 解決策
## x-cloakを使うべし

https://alpinejs.dev/directives/cloak

これを使えば<b><font color='red'>”Blip”の間も非表示にすることができます。</font></b>

まずCSSにx-cloakを追加して、
```style.css
[x-cloak] { display: none !important; }
```
HTMLにx-cloakを付けて終わりどすえ。
```html
<button x-data={ 
    open: false, 
    toggleOpen(){ open = ! open }
    }>

<div x-cloak x-show="open">やっほー</div>
        ↑ココ
```
これでBlipを解消できるンゴ

# おまけ
::: note
x-cloakはx-ifで代用可能

x-cloakを使わずに、x-ifを使って解決することもできるようです。
<b>ただ、x-ifでの代用する方法はどんな場面で使えるかはわかりません。</b>
とりあえずx-cloakを使っときましょ。
:::
↓代用についてもここに書いてます。

https://alpinejs.dev/directives/cloak
django で has_many のデータ取得 ( Rails と比較 )

たとえばArticleが複数のCommentを持つ場合

# Rails の場合

```rb
article.comments
```

# djangoの場合

```py
article.comment_set.all()
```

# モデル定義の例

Railsだと 

- 親クラスに has_many 関連を書く
- 子クラスに belongs_to 関連を書く

というやり方だが、 djangoだと子クラスにだけ関連を記述すれば良いようだ


```py
class Article(models.Model):
    ...

class Comment(models.Model):
    article = models.ForeignKey(Article, on_delete=models.CASCADE)
```



# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
Python で Discord Bot を起動する

備忘録として残しておきます。

## Bot の作成
1. [Discord Developer Portal](https://discord.com/developers/applications) にアクセスし "New Application" からアプリケーションを作成する。
※ このとき Discord のアカウントが必要。
1. メニューの "Bot" から "Build-A-Bot" > "Add Bot" する。
これで Bot 自体の作成は OK。
"PUBLIC BOT" のチェックは外しておくとより安全かもしれない。

## Bot をサーバーへ招待する
1. メニューの "OAuth2" から "URL Generator" を選択する。
1. "SCOPES" で "bot" を選択し、"BOT PERMISSONS" で Bot に与える権限を選択する。
1. "GENERATED URL" に生成された URL が表示されるので、その URL にアクセスする。
    ```text:生成された URL の一例
    https://discord.com/api/oauth2/authorize?client_id=XXXXXXXXXXXXXXXXXXX&permissions=8&scope=bot
    ```
1. 追加させるサーバーを選択すれば、そのサーバーに招待できる。

## `discord.py` で Bot を稼働させる
#### `discord.py` とは
- Discord Bot を製作するための API ラッパー。( [公式ドキュメント](https://discordpy.readthedocs.io/ja/latest/index.html) )
- 開発は終了しているため、今後の Discord の環境変化についていけなくなる可能性があるため注意が必要。

#### Bot プログラムの作成・起動
Python でプログラムを作成する。
ここで、Bot のアクセストークンが必要になるので控えておく。
トークンは [Discord Developer Portal](https://discord.com/developers/applications) の "Bot" > "Build-A-Bot" > "TOKEN" でコピーできる。
- サンプルコード
    ```python:sample_bot.py
    import discord
    
    # Bot のアクセストークン
    DISCORD_BOT_TOKEN = XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    
    # 接続に必要な設定/オブジェクト
    intents = discord.Intents.default()
    intents.message_content = True
    client = discord.Client(intents=intents)
    
    
    # 起動時に動作する処理
    @client.event
    async def on_ready():
        # 起動したらターミナルに通知する
        print("YOUR DISCORD BOT is ACTIVE now!")
    
    
    # メッセージ受信時に動作する処理
    @client.event
    async def on_message(message):
        # Bot からのメッセージは無視する
        if message.author.bot:
            return
    
        # Hello と送られたら Hi! と返す
        if message.content == "Hello":
            await message.channel.send("Hi!")
            
    
    # Bot の起動と Discord サーバーへの接続
    client.run(DISCORD_BOT_TOKEN)
    ```

- Bot の起動
    ```bash:プログラムの実行
    python sample_bot.py
    ```
    Bot がいるサーバーで "Hello" と送れば Bot が "Hi!" と返してくれるはず。
Looker Studioでよく使うテクニック

閲覧、ストックいただきありがとうございます。
本記事はアウトプットする習慣をつけたいと思い作ったアドベントカレンダーの24日目の記事として作成中です。
https://qiita.com/advent-calendar/2022/13ryuji-career
励みになりますのでLGTM、ストックお願いします！

## ご参考

https://datastudio.google.com/reporting/fe94d0b9-2997-435a-8178-b68e3092ca4d

趣味のカードゲームの勝敗、先手後手、手札の良し悪しなどを集計するために作っているダッシュボードです

## データ加工
### URLをリンクにする
関数
```
HYPERLINK(リンクURL,表示する文言)
```

例
```
HYPERLINK(opp_deck_url,opp_deck)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188786/f10c95b4-ed63-8c07-8fe4-7b1ce782c44c.png)

クリックするとリンク先に飛べます（当然
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188786/eca178c3-9636-68e7-a0f3-5251ae110a07.png)


- 
## 数字型を文字列型に変換する

例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188786/a40ab129-eec1-7c3d-d99f-8c40bbb1469f.png)


関数
CAST( AS TEXT/NUMBER/DATETIME)

## フラグを作る
関数
```
IF(REGEXP_CONTAINS(変数,フラグの判定の文字列), 1, 0)
```

例

## 値をラベルに置き換える
アンケートでよく使います。

関数
```
CASE
    WHEN() THEN
END
```

例
色空間とスーパーピクセル

# はじめに
この記事は、[LIGHTzアドベントカレンダー2022](https://qiita.com/advent-calendar/2022/lightz)の9日目の記事です。
"oo日目"っていいますが，クリスマスまで"あとN日"みたいなほうがカウントダウンちっくでアドベントカレンダーぽいですよねとか思いました．クリスマスまであと16日でございます．あっちゅうまに年の瀬です．師走です．
私は，忙しいというかぼーっとしていたというか，大学院の指導教員の先生とのミーティングを思いっきり忘れてすっぽかしてしまいました．はい．しかも２週続けて．反省しています．社会人にあるまじきですね．仕事の合間合間に講義ナドナドはいるので頭切り替えるのが大変なんですという言い訳です．

@KTasknこと、たすく、です。[2日目](https://qiita.com/KTaskn/items/9911a47f31787420da40)に引き続き，研究を通して知ったなかで面白いと感じたネタを書いていきたいと思います．

# Lab色空間
ITエンジニアなら，RGBってご存知だと思います．#000000とか#FF00FFとかいうあいつです．いうまでもないかもですが，2文字ごとに区切って16進数で00-FFが，10進数の0-255に対応して，色を表す表現として使われます．
でその，色の表現方法なんですが，RGB以外にもいろいろあるそうで，RGB以外で有名なところだとカラープリンタのインクジェットで使うCMYKとかありますね．
そんな色の表現方法としてのひとつが，[Lab色空間 - wikipedia](https://ja.wikipedia.org/wiki/Lab%E8%89%B2%E7%A9%BA%E9%96%93)とよばれるやつで，RGBと何が違うかっていうと，人の感覚に近似して設計されているらしいんですね．

下の図で，左上(R,G,B)=(0,200,0)の緑に対応する明るさの赤って(R,G,B)=(200,0,0)だと思うのですが，なんか，明るさ違くない？ってなりますよね．私もずっと思ってたんですけど，これが人間の感覚とRGBのズレらしいんですよね．
Lab色空間はそれを人間の感覚で明るさ"Lightness"の次元であるLと色の次元である"a/b"で構成されています．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53351/e58593f5-9afe-fc82-31d1-3377beb62dc2.png)

左上はL=70で，右上はL=42でずいぶん明るさの値が違ってきています．なんだか人間の感覚と一致している気がします．さらに，右上の赤に対応する明るさの緑は，実は，右下の緑(R,G,B)=(0,122,0)らしいんですよね．感覚としては正しい気がします．たまたまなんですけど，この赤と緑のセットがクリスマスカラー感あります．
じゃ，あ左上に対応する明るさの赤はなになのかというと，左下の色になって，赤というよりオレンジって感じですね．でも妥当な明るさな感じはします．

# スーパーピクセル
話は変わってスーパーピクセルなんですが，コンピュータビジョンの分野で**見た目の境界をうまいこと抽出したい**というモチベーションで前処理のひとつとしてよく使われる手法です．

#### スーパーピクセルの例 SLIC法[^1]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53351/1037c5e7-52e7-3760-89fe-2309a1da808e.png)

このスーパーピクセルを計算するときにSLIC法[^1]と呼ばれる手法では，さきほどのLab色空間の値とXY座標の２つの観点で（スーパーじゃない普通の）ピクセルの類似度をはかっていきクラスタリングすることでスーパーピクセルをつくっていきます．**見た目の境界**は人間が思う**見た目**なので，RGBよりもLabのほうが都合がいいってわけです．色が似ていて，座標が近いものは同じになるだろうということです．

### 元画像
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53351/6d7a1852-c978-9cec-c96b-dd588dcf98ee.png)

### SLIC法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53351/dd6fae6f-9544-09cb-f4ed-d085a82aaf02.png)

### RGBでSLIC法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53351/5b73d140-c975-3e6b-28a7-19917a21da26.png)

SLIC法をLabではなくRGBを使った場合，顔まわりの領域がやたら細かくなっていることがわかる．一方，Labの場合は，顔の面を綺麗に捉えられているように思える．このように同じアルゴリズムでも単純に利用する空間を変換するだけでだいぶ結果が変わってくるのがわかっておもしろいという話でした．

今回も日付変わる手前でぎりぎり滑り込み．

[^1]: ACHANTA, Radhakrishna, et al. SLIC superpixels compared to state-of-the-art superpixel methods. IEEE transactions on pattern analysis and machine intelligence, 2012, 34.11: 2274-2282.
マウスでクリックしてる間だけ切り替わるおみくじ

⇒<a href="https://note.nonbiri3.com/omikuji.php">動作ページはこちら</a>

もっと良い書き方、ゲーム的に面白くなるやり方があったら教えてくださいm(_ _)m

```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>

      <script>

        // おみくじの内容
const omikuji = ["大吉", "吉", "中吉", "小吉", "末吉", "凶"];
// おみくじの結果
let omikujiResult;

function setup() {
  createCanvas(300, 300);

  // 文字の基準点を上下左右の中央に
  textAlign(CENTER, CENTER);
  // 文字の大きさの設定
  textSize(100);

  // おみくじの結果をランダムにセット
  omikujiResult = random(omikuji);
}

function draw() {
  background("#e02020");

  fill("#FFFFFF");
  stroke("#FFFFFF");
  
  // おみくじの結果を表示
  text(omikujiResult, width / 2, height / 2);

  // クリックされている間の処理
  if (mouseIsPressed == true) {
    // おみくじの結果をランダムにセット
    omikujiResult = random(omikuji);
  }
}
    </script>

    </head>
  <body>
      
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
  </html>
```
Fairseqにおけるモデル不一致エラーについて

# はじめに
Fairseqを使って事前学習済みモデルをロードしようとした際に，設定は全く同じなのにモデルの不一致エラーがでてだいぶ苦戦したので，その時の状況と解決方法を共有したいと思います．

# エラー内容
事前学習したモデルを別のサーバ上でファインチューニングするために，`fairseq-train`コマンドを実行したところ以下のようなエラーが発生しました．

```bash
RuntimeError: Error(s) in loading state_dict for TransformerModel:
Unexpected key(s) in state_dict: 
"encoder.layers.0.in_proj_weight", "encoder.layers.0.in_proj_bias", "encoder.layers.0.out_proj_weight", "encoder.layers.0.out_proj_bias", "encoder.layers.0.fc1_weight", "encoder.layers.0.fc1_bias", "encoder.layers.0.fc2_weight", "encoder.layers.0.fc2_bias", "encoder.layers.1.in_proj_weight", "encoder.layers.1.in_proj_bias", "encoder.layers.1.out_proj_weight", "encoder.layers.1.out_proj_bias", "encoder.layers.1.fc1_weight", "encoder.layers.1.fc1_bias", "encoder.layers.1.fc2_weight", "encoder.layers.1.fc2_bias".
Exception: Cannot load model parameters from checkpoint ./checkpoints/checkpoint_best.pt; 
（中略）
please ensure that the architectures match.
```

# 原因
今回のエラーの原因としてはバージョン違いによる各層の名前が違うことにあります．
ver 0.12.2では各層の名前が`encoder.layers.0.in_proj_weight`のように定義されていますが，最新バージョンのFairseqでは異なるようです．

# 解決方法
バージョンを揃えてあげるだけです．
今回の私の場合では以下のようにFairseqを再インストールすることで完全に解決できました．

```bash
pip install fairseq==0.12.2
```
Airtableでenebularの使いどころ: 生産管理編

[前回](https://qiita.com/joeartsea/items/aeab97b3235ff3127242)の続きです。

### 生産計画の自動スケジューリング時に休日を考慮して製造日数を割り出したい、外注も同じ...

生産管理の中でも非常に需要が高いのが製造スケジュールの作成です。AirtableにはTimeline Viewという便利なビューがあって、以下の画像のように製造装置毎に製造計画を解りやすく俯瞰できます。

![スクリーンショット 2022-12-09 22.24.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/aa1a1d45-556f-508c-e26b-eeba1c494917.png)

更にコレ、[以前の記事](https://qiita.com/joeartsea/items/8a7bb8237d6bf1530893)で紹介した既存システムから吐き出されるCSVファイルを解析してアラート飛ばす事例を発展させ、既存システムのそばに配置したPCをenebularの[エージェント実行環境](https://docs.enebular.com/ja/executionenvironmentagent/overview)にして以下のNode-REDフローを毎晩実行しています。

![スクリーンショット 2022-12-09 22.34.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/7288f921-9391-7b23-c2f0-f7f33f8b80b5.png)

このNode-REDフローにより、Airtable側の生産管理baseの計画テーブルへオフィスのPCから日次で1,200レコードほどデータが投入されています。しかし、このデータは装置の号機名と製造開始日時・終了日時がブランクになっていますので、このままでは上の画像のようなTimeline Viewは表示されません（開始日と終了日があって初めてバーが表示されますし、号機がなければ画像のように号機でグルーピング表示もできません）

なぜブランクになっているかと言うと、ここが改善点なのですが、これまで既存システムで人が紙やファイルなど色々な媒体の情報を見ながら頭を捻って装置の号機名と製造開始日時・終了日時を手入力していたそうなんです。

**1日1,200件...**

もちろん、分担してやっていましたが、本来人間がやるべき仕事は他にあるだろうと、まさにDXを目指した結果、既存システムからは肝心の号機や製造開始日・終了日はブランクのままAirtableにデータ投入して、データが作成されたタイミングで自動的に最適な号機や製造開始日・終了日を導き出すenebularの[クラウド実行環境](https://docs.enebular.com/ja/executionenvironment/overview)にデプロイされたNode-REDフローに丸投げしようという形になったわけです。

以下がデータ投入されたタイミングで今度はenebularのクラウド実行環境を呼び出すAirtableのAutomationsです。

![スクリーンショット 2022-12-09 22.54.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/e8ee6eff-6004-797d-8a93-d5138543fd35.png)

でもなんで既存システムのそばにあるPCで最適な号機や製造開始日・終了日を導き出す処理も実行しないんでしょうか？

それは、1台のコンピュータで最適化の処理を1,200回安全に回すには同期的に処理する必要があり、そううすると24時間で全ての処理が終わらないという計算になったためです。

つまり、号機や製造開始日・終了日がブランクなCSVデータをそのまま投入するだけのローカルの処理と、以下の**Airtableとenebularのクラウド実行環境で実現される並列処理**に分けることで、全体の処理を3時間で終わらせることができました（この辺の並列処理は10年前なら自分で頭捻って実装してましたがサービスに丸投げできる良い時代になりました）

![スクリーンショット 2022-12-09 23.11.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/ae02faf1-ad0e-ff19-ad08-7396b22a47d6.png)

では、また次回！
若手を殺す古のコーディングスタイル（基礎編）

# なにこれ？
継ぎ足し継ぎ足しされた秘伝のソースから発掘した、古のコーディングスタイルをまとめる。 
太古の叡智を以って若手の参入を妨げ、我々の雇用を守るのだ！  

## 基礎編
### 名前は慣れよ
テーブル「TBL_T_LGNRRK」がログイン履歴テーブルで、  
画面「D010」がログイン履歴参照ページで、  
メソッド「pu_fnc_modoru_btn」が戻るボタンのクリックイベントだ！  

慣れるまでは少し時間がかかるだろうか、やってりゃそのうち慣れるって！  
慣れなくても調べりゃわかるだろ。
若手は読める名前じゃなきゃ読めないとか生意気抜かしよる…  
仕事は習うより慣れろ！

### 処理はまとめよ
一連の処理は一つのクラス、一つのメソッドにまとめて記述せよ。  
あちこちに処理があると何やってるのかわからなくなるからな！  
ボタンクリックイベントにビジネスロジックもDBアクセスも全部書くんだよ！  
何をやってるのか、このメソッドだけ見ればスミからスミまでよくわかるだろ！  
神クラス？スゲーってことだろガハハハハ！

### 既存コードは神聖不可侵である
すでに本番稼働しているコードは、不具合を除き、すべて神聖不可侵である。  
決して変更してはならない。このことを徹底せよ。  

画面Bに、画面Aで実装している機能を盛り込みたい場合、画面Aに変更を加えることは罷りならん。
画面Aがバグったらどうしてくれんだよ！  

同じ考えで、テーブルの変更も当然ダメだぞ。  
カラム追加したい？ ダメに決まってるだろ！  
どうしても追加したいなら、同じキーの別テーブルを新たに作れ！

### 複製せよ
他でやってる処理と同じ処理を実装したい？  
でもボタンクリックイベントに全部書いてあるからメソッドに切り出して共通化する？  
だから処理を散らかしたり既存コードを変更したりするんじゃねーよ！  
どうすりゃいいかって？ そんなもん、コピペすりゃいいだろ。  
すでに動いてるコードだから、バグらないしな！  

### コメントせよ
プログラムは難しいからな。一行一行何をやってるかちゃんとコメントするんだぞ。  
メソッドコメントも目立つようにしっかり書けよ。  
変更履歴もな！  
どうだ、わかりやすいだろ！
```vb
'*********************
'* タイトル：足し算メソッド
'* メソッド名：pu_fnu_cal_tasu
'* 説明：足し算を計算します
'* 引数：
'*     h_int_tsrr 足さられ数
'*     h_int_ts   足す数
'* 戻り値：
'*     true  計算成功
'*     false エラー
'***********
'* 更新履歴：
'*     20221209 mowa 新規作成
'*     20221229 T.TANAKA バグがあったので修正
'*     20230102 島津豊久 コードレビュー指摘対応
'*********************
Public Function pu_fnu_cal_tasu(h_int_tsrr As Integer, h_int_ts As Integer, ByRef h_int_kkk As Integer) As Boolean
  '20230102 島津豊久 コードレビュー指摘対応 del start
  ' Return h_int_tsrr + h_int_ts
  '20230102 島津豊久 コードレビュー指摘対応 del end
  '20230102 島津豊久 コードレビュー指摘対応 add start
  ' 計算結果一時格納用変数tmpを宣言する
  Dim tmp As Integer
  ' 合計を格納する
  tmp = h_int_tsrr + h_int_ts
  ' 計算結果一時格納用変数をh_int_kkkに格納する
  ' 20221229 T.TANAKA バグがあったので修正 add start
  h_int_kkk = tmp
  ' 20221229 T.TANAKA バグがあったので修正 add end
  ' 正常終了する
  Return true
  '20230102 島津豊久 コードレビュー指摘対応 add end
End Function
```
# おわり
力尽きたので今回は基礎編のみで終わる。
連載：python-oracledb入門　目次

# 目次

| 回数       |       タイトル    |
|-----------------:|:------------------|
|  1 | [さようならcx_Oracle、こんにちはpython-oracledb!!](https://qiita.com/nakaie/items/851e7d5812da96a19ef8) |
|  2 | [python-oracledbのインストール](https://qiita.com/nakaie/items/db41034b50ade06f306d) |
|  3 | [Thin ModeとThick Modeの違い](https://qiita.com/nakaie/items/9ee7bf1fe4ecc3936209) |
|  4 | [リリース3.0 & 3.1新機能](https://qiita.com/nakaie/items/b21c95682dd51a0c11a4) |

※連載追加の都度サイレントで更新します。
T-DASHを使ってWordPressのセキュリティ対策テストを自動化する

この記事は、T-DASH Advent Calendar 2022 10日目の記事です。
# 自己紹介
こんにちは、なりかくんと申します。普段は、欲しいなと思ったツールなどを開発して自己満足しています。
ブログを普段書いており、今回はQiita Advent Calendar 2022にQiitaで初めて書かせていただきます。
普段は、WordPressでホストしているブログに様々な記事を書いていますので良ければそちらもご覧ください。（宣伝）

https://narikakun.net/

# 今回作るもの
今回は、T-DASHを使ってWordPressのセキュリティ診断を作りたいと思います。
診断内容は、簡単に２つです。ログインページのリンクが変更されているかどうかとXMLRPCが無効化されているかどうかです。
WordPressへの攻撃は、ログインページへの総当たり攻撃がほとんどですのでログインページのリンクを変更するだけでも十分セキュリティ対策が出来ます。
XMLRPCの無効化も同様に、総当たり攻撃に有効な手段となります。ただし、一部プラグインが動かなくなる可能性があるため無効化していないサイトが多いのが現状です。

# プロジェクトの作成
まず最初にプロジェクトの作成を行います。このT-DASHではプロジェクトごとに管理が出来るみたいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549951/382c151d-aa44-a7ad-4f9b-ec258619a08a.png)

# テストシナリオとテストケースの作成
テストシナリオを作ってからテストケースを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549951/5dd9e258-f2c9-1e95-2310-8234cfb2d8f9.png)

# 画面定義の作成
画面定義でHTMLの要素などを定義できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549951/6bfc2f62-507c-88ca-db27-447501e931eb.png)

# 今回作ったテストケースの内容
今回は非常に簡単なテストケースの内容となっています。ログインページが変更されているかの確認は、WordPressのログインページにあるユーザー名を入力するテキストボックスがあるかどうかを判断しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549951/fe0d2cfc-6b9a-ae29-3b64-061b63c4ad5e.png)

次にXMLRPCが無効化されているかどうかですが、有効であればXMLRPCのページに「XML-RPC server accepts POST requests only.」と通常のブラウザからアクセスすると表示されますので、その文字列が表示されているかどうかを判断しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549951/3d938f20-183e-7ebe-9b56-e07fc69b9c12.png)

# テスト結果
まず、セキュリティ対策を一つもしていないサイトの場合は以下のようにすべて失敗と表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549951/1c2ef9c9-871e-c11c-1baa-d3730289c2e2.png)
そして、セキュリティ対策をしっかりと行っているサイトでは成功と表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549951/bd491d22-28c3-9061-075a-9ac0a1494f4f.png)

# テストレポート
テスト結果は一つ一つレポートでまとめられますので、そこから詳細に確認することが出来るみたいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549951/c455c07a-5f39-1415-cf26-f5ba3cb69d0b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549951/8b026606-6df9-e220-a744-aa2c9f855335.png)

# 最後に
あまり私の発想力と知識力が無くこのような記事になってしまいましたが、プログラムを書かずにこのような形でテストを自動化できるT-DASHは非常に便利だと感じました。
無料プランもあり、また最初の30日間は無料トライアルで全機能が使える（？）みたいなので少し試すだけでもぜひ触ってみてください！

https://service.valtes.co.jp/t-dash/

最後までお読みいただきありがとうございました。
SNS上の詐欺に騙されないようにするために

# 目的
詐欺被害撲滅！


# きっかけ
気になるツイートを発見

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531802/deba5f96-e1ce-d75a-091e-e7da99c44ee8.png)

正直、これすらお金取るんですかって感じです。

# 現金プレゼント企画の秘密
ツイッターに限らずフォロワーの多いアカウントは売れます。こういった販売サイトがあるくらいなので，検索してみてください。

# 大量の現金の秘密
アマゾンに札束が売られているのを知っていますか？
本物と同じ紙の束が売られており，一番上に本物の１万円札を入れることで、札束が完成します。これを並べらるとそれっぽく見えますよね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531802/d0b76048-de0d-0f6d-5a65-1f554f64aadb.png)

# 億単位の預金口座
少し知識があると簡単にできます。
Google Chromeというブラウザを使います。今回は預金口座ではなくFXの口座にします。これ，ブラウザで開けるなら大体できます。
EdgeもChromeとベースは一緒なので、Chromeじゃなくてもよいです。

[Ctrl]キーと[Shift]キーとアルファベットのIを同時押しして，開発者モードにして，さらに[ctrl]キーを押しながら[F]を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531802/7ee77bf8-27b5-6250-427b-bbc831d3b87a.png)

はい，ぼくの残高でました。右側の赤枠を編集すると，ブラウザの表示内容を変えることができます。

例えばこんな感じに修正すると，左側の口座残高に反映されているのがわかりますか？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531802/544a8ae6-9b88-7ad8-3c6c-65205f85d7d6.png)

あとは，開発者モードを終了し，画面に付箋で自分のツイッターアカウントを書いて画面に貼り付け，写真を撮ってツイッターにあげれば完成です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531802/49d4d4d1-b539-f775-7845-baec28cf2de2.png)

みなさん。騙されないでくださいね。

# さいごに

投資は自己責任！

カレンダー参加者募集してます！

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

Have a good MQL Life!!!
forループを使った簡単なインタラクション


# forループで簡単なインタラクション
p5js初めたての方が真似しやすいコードを紹介します。

# 準備
p5jsのセッティングは済ませているものと仮定。
今回はラジアンを使って円を描くので、円周角の考え方も必要となる。

# 早速本題のコード

まず、インタラクションのベースとなる、円周上へのサークルの配置から始める。
円周角2πを分割する数として、変数segmentを用意。

```javascript
let segment = 100;
```
次に、このsegmentで割った角度ごとにサークルを配置。
```javascript
for(let i=0; i<segment; i++){
circle(100*Math.cos(i*Math.PI*2/segment),100*Math.sin(i*Math.PI*2/segment),100);
}
```
![スクリーンショット 2022-12-09 21.57.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2576323/24a02e83-7706-0c16-8432-da5716c2ec58.png)

```javascript:main.js
let cx;
let cy;
let W;
let H;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(100);
  cx = windowWidth / 2;
  cy = windowHeight / 2;
  W = windowWidth;
  H = windowHeight;
}

function draw() {
  background(100);

  noFill();
  translate(cx,cy);

  for(let i=0;i<100;i++){

    stroke(250,0,250);
    circle(200*Math.cos(i*Math.PI*2/100),200*Math.sin(i*Math.PI*2/100),100);

  }
}
```

さて、たとえ、drawが呼び出され続けても、このままでは、静止画同様の描画なので、これを動かすために、以下の変数を用意。

```javascript
let t = frameCount*0.01;
```
これは、何をしているかというと、draw関数が呼び出されるごとに、少しづつ増えていく量を定義している。
これを三角関数の、位相の部分に足してやると、円が動き出す。
```javascript
 circle(200*Math.cos(i*Math.PI*2/100 + t),200*Math.sin(i*Math.PI*2/100 + t),100);
```

この状態で、この動いている円をコントロールするパラメーターを導入しよう。
```javascript
slider = createSlider(0, 10, 1);
slider.position(10, 30);
slider.style('width', '800px');

let param = slider.value();
```
これは何をしているかというと、パラメーターをスライダーを通してコントロールできるようにしている。
スライダーというのは、マウスで動かせるメーターのようなもので、今の場合、0~10までの値を取れるようにした。
そして、このparamをコサインの位相の中に、次のように書く。
```javascript
 circle(200*Math.cos(i*param*Math.PI*2/100 + t),200*Math.sin(i*Math.PI*2/100 + t),100);
```

このようにすることで、動いている円を、スライダーの動きによってコントロールできる。
コード全体は、以下の通り。

```javascript:main.js

let cx;
let cy;
let W;
let H;


function setup() {
  createCanvas(windowWidth, windowHeight);
  background(100);
  cx = windowWidth / 2;
  cy = windowHeight / 2;
  W = windowWidth;
  H = windowHeight;

  slider = createSlider(0, 10, 1);
  slider.position(10, 30);
  slider.style('width', '800px');

}

function draw() {
  background(100);


  noFill();
  translate(cx,cy);

  for(let i=0;i<100;i++){

    let t = frameCount * 0.01;
    let param = slider.value();

    //line(200*Math.cos(i*param*Math.PI*2/100 + t),200*Math.sin(i*Math.PI*2/100 + t),200*Math.cos((i+1)*param*Math.PI*2/100 + t),200*Math.sin((i+1)*Math.PI*2/100 + t))

    stroke(250,0,250);
    circle(200*Math.cos(i*param*Math.PI*2/100 + t),200*Math.sin(i*Math.PI*2/100 + t),100/(param+1));

  }


}



```

これで、とりあえずのインタラクションは完成。コメントアウトしてあるラインの部分を入れたり、色々と遊べる要素はある。
色々と工夫して楽しもう。
以下にデモを置いた。それではまた。

https://editor.p5js.org/KaneshigeHirokazu/sketches/7hYTJg_-2
【Python】pandasライブラリのDataframe型をprintする際に省略させない方法

# はじめに
pandasライブラリを使用してDataframe型をprintした際に、下記のように省略された事があるかと思います。
![スクリーンショット 2022-12-09 21.54.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692063/e8398295-f6fe-f8ba-030c-459a9e7d0914.png)
今回は省略しない方法を確認してみます。




# 行を省略しない
`set_option()`を使用することで省略を防ぐことができます。

```
import pandas as pd

pd.set_option('display.max_rows', 900)
```
![スクリーンショット 2022-12-09 22.03.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692063/b068801d-63d7-c842-d065-ceca534809b4.png)
![スクリーンショット 2022-12-09 22.03.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692063/e8f86654-103e-b072-0071-cda1bddfcba8.png)


# 列を省略しない

列の省略を防ぐ場合は、引数の指定を`max_columns`にします。

```
pd.set_option('display.max_columns', 1000)
```

# 公式ドキュメント
非常に便利な機能でした。
他にも様々なメソッドが公式ドキュメントに記載されております。

https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.set_option.html
【備忘録】Elasticsearchとは

# 1. Elastic Stackとは
Elastic Stackとは、elasticが提供する検索や分析、可視化のための検索プラットフォームです。

Elastic Stackは以下で構成されています。

* Elasticsearch：心臓部となるJSONベースの検索/分析エンジン
* Kibana：検索、可視化用のUI
* Beats：アプリやインフラの統計情報等のデータ収集ツール
* Logstash：データ収集パイプライン


# 2.Elasticsearchとは
Elasticsearchとは、Elastic社が提供しているLuceneベースの全文検索エンジンです。
大容量のデータの中から必要なデータを高速で取り出すことができます。
Elasticsearchに格納されたデータは、Elasticsearch API を使用してドキュメントの検索と取得ができます。
API・Logstash・Amazon Kinesis Firehoseといった取り込みツールを使用し、JSONドキュメント形式でデータをElasticSearchへ送信することが可能です。
その他にも、Java、Python、PHPなどの言語をサポートしている。
Elasticsearchは、事前のデータマッピング(スキーマ定義)を行わないでデータ投入を始めることができます。


# 3.基本概念
||説明|
|:---:|:---|
|クラスタ|可用性・耐障害性を実現するため、複数のサーバー上で実行。クラスタ1つ以上のノード(Elastic Server)で構成される。Elasticsearchは検索トラフィックの増加とデータ量や書き込み速度の分散をノードを増やすことで対応することができる|
|ノード|ノードは、Elasticsearch のプロセス（≒ サーバー）です。基本できには１つのサーバーに、１つのElasticsearch を稼働するので、ノード数＝サーバー数となります。|
|インデックス|ドキュメント(データ)を保存する場所で、RDBでいうDatabase。1つのクラスタに複数のインデックスを作成することができる。|
|タイプ|ドキュメントの構成やフィールド型などの定義。RDBのTableに相当。1つのインデックスに複数のタイプを作成することができる。|
|ドキュメント|RDBのレコード(データ)に相当。ドキュメントは複数のフィールドを持っている。JSON形式の情報を格納する。また、ドキュメントはタイプ内で一意のタイプIDを持つ。ドキュメントはJSONのため、フィールドと値を持つ。|
|シャード|大量のデータを使用する際、それぞれのノードでデータを分割して保持。その際にシャードと呼ばれるインデックスの一部で分割。|
|レプリカ|それぞれのノードにはシャードのレプリカが存在。更新はプライマリのシャードに対して行われるが、万が一プライマリのシャードが失われると新しくレプリカのシャードがプライマリとなる。|

Elasticsearch の物理的なインデックスは、クラスタ、ノード、シャード の３つの要素から構成されている。


# 4.Kibanaとは
Kibanaとは、Elastic社が開発したログデータの可視化ツール。
Kibanaの主な3つの機能
* Elasticsearchのデータを検索し、視覚的に優れたダッシュボードを構築
* UIによるセキュリティ設定の管理、ユーザーロールの割り当て、スナップショットの作成、データのロールアップの実行
* ログ分析からドキュメント検出、SIEM(セキュリティ情報＆イベント管理)まで、あらゆる"Elastic Stack"の機能にアクセスするためのポータル


# 5.Logstashとは
Logstashとは、ログデータだけではなく様々な形式のデータを収集・変換し、任意の場所に保管することができるオープンソースソフトウェアである。Logstashを利用すると、ログファイルに溜まっているデータを解析して、データベースへ格納するなど、用途にあった形にデータを変換・保存することができる。ElasticsearchにLogstashで解析した情報を保存し、Kibanaを使って可視化するという使い方も可能である。

# 6.Beatsとは
Beatsとは、Elasticsearch用のデータ転送エージェント、「軽量ログデータ収集ツール」です。
複数形になっている理由は、取り込み対象のデータ毎に専用プロダクトに分かれているためです。

以下のBeatsが存在します。

* Filebeat
ログファイル
* Metricbeat
CPU使用状況、メモリ、ファイルシステム、ディスクI/O、ネットワークI/Oなどの統計情報
* Packetbeat
ネットワークパケット
* Winlogbeat
Windosイベントログ
* Auditbeat
auditdと同様の監査データ
* Heartbeat
アプリの稼働状況
* Functionbeat
クラウドのインフラ情報

***エージェントとしてインストールされたFilebeatは、指定したログファイルなどを監視し、ログイベントを収集して、インデックス作成のためにElasticsearchやLogstashに転送します。***
DynamoDBが適していない場合とはどんなときか

複雑なクエリが必要になる場合はDynamoDBは向いていない、と言うのはよく聞くが、具体的にどういう場合かをまとめる。

## モチベーション
最近ではAmplifyを使用する人が増えて、そのチュートリアルやデフォルトでDynamoDBが使用されているのでなんとなく使っている人も多いと思うが、実用的なサービスにおいてDynamoDBだけで十分というケースは少ないのではないかと思う。

DynamoDBを使用する場合は本当にそれで良いのか検証しておかないと、開発が進んでからRDBに置き換えて、アーキテクチャの大きな変更を余儀なくされるという大変な事態になりかない。

## DynamoDBを使わないほうが良い場合
* SQLにおけるWHERE句を２つより多く使う様な検索が必要になる場合
* 25個以上のアイテムを同時(アトミック)に更新する必要がある場合
* 検索と更新を同時に実施したい場合。例えば、SQLだと`UPDATE ... WHERE ...`のような、検索して複数のアイテムを一括更新したい場合。DynamoDBではできない。
  
下記にこの根拠となる制限を説明する。

## DynamoDBの制限
### １度の検索に利用できるフィールドは（パーティションキーとソートーキーの）２つまで
なので、SQLにおけるWHERE句を２つより多く使う様な検索ができない。
DyanmoDBはあくまでKey-Valueストアなので、キーでしか検索できない。
２つのフィールドまで対応できるのは、２つのフィールドを指定してセカンダリインデックスを作成した場合で、セカンダリインデックスとは２つのフィールドを組み合わせた文字列をKeyとしたKey-Valueストアの複製を作っているだけなので、キーでしか検索できないことには変わりがない。
（Amplifyでは複数のソートキーを指定できるが、裏側で複数のフィールドの値を連結して１つのソートキーフィールドとしているだけなので、１つ目のソートキーは使用しないとかはできない。）

### 25個を超えるアイテムをアトミックに更新できない
それがDyanmoDBの仕様なので、25個を超えるアイテムをアトミックに更新したい場合はDyanmoDBでは対応しきれない。

### 検索と更新を１クエリでできない
DynanmoDBは一旦検索をしてその結果を元に最大25個ずつの更新（良くて最大25個の同時更新）になる。
DynamoDBはKey-Valueストアであり、あくまでkeyでしかデータを検索できないので、データの更新には必ずkeyを指定する必要がある。なので、`UPDATE ... WHERE ...`のようにkey以外のフィールドで抽出して同時に更新すると言うことはできない。
つまり、データをDynamoDBで取得してから、それらを更新するリクエストを投げる必要がある。

### その他の制限
* 複雑な検索にはElasticSearch (@searchable アノテーション)が利用できるが、複数テーブルを利用した検索はできない（例えば、ユーザのリソース権限のテーブルとリソーステーブルのステータスの両方を使用した検索は対応できない）
* グローバルセカンダリインデックス(GSI)は１テーブルに20個まで（クオータ追加のリクエストはできる）。テーブル作成後でも追加・削除でき自動でバックフィルしてくれる。
* ローカルセカンダリインデックス(LSI)は１テーブルに５個までで。テーブル作成時にしか作成できない。

## DynamoDBを使うモチベーション
これだけだとDynamoDBの悪口を書いただけの様になってしまうので、DynamoDBが活躍できるケースも書いておく。
* チャットのメッセージデータのようにアイテム(SQLにおけるrow)数が膨大でもデータを高速に取得したい。
* Amplifyにバックエンドの実装を丸投げしたい（Amplifyがやってくれないものは諦める）。
* AmplifyでのRDSの利用には知識と一手間が必要なので、DynamoDBでできる範囲で妥協する。
* DynamoDBのストリーミング（追加や更新などを通知する仕組み）機能を利用したい。
* サーバレス構成でインスタンスの管理の手間を無くしたい。
  （現在では、RDSもAurora Serverless v2がリリースされたのでcold start問題なども解消されて、RDSサーバレスも実用レベルかもしれない。）

以上、DynamoDBを使おうか検討している人のお役に立てれば幸いです。
オレのクソアプリは間違えてる

## 挨拶
どうも！！！！みなさん！！
ご存じでしょう？　IT業界のおしゃべりクソメガネ！！遠藤ヒズミでございます！！！
え？聞いたことない？？　そりゃそうだよ。今日、初めて言ったんだもん。

昼に、**アーマードコア6** というサプライズニュースがTLを埋め尽くし。
ジオン残党のごとく、3年ぶりにソロモンに来たアナベルガトーよろしく興奮してしまいました。

## 今年のクソアプリは？
こちら、ピンポンダッシュゲーム(https://ping-pong-dash.netlify.app/) になります。
君の使命はピンポン回数をできる限り増やすこと。それ以外は考えなくていい・・・そう、考えなくていいんだ。（目ぐるぐる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83578/8b2657a7-dc04-d9fd-889d-eb6fae764eb1.png)

## あそびかた

ピンポンを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83578/4fd7584b-b4d4-ed2a-2dc1-f50e439b2f4e.png)

もちろん、ピンポンは呼び鈴だ。住人が出てくるぞ。（あれ？なんかポチったっけ？と出てきます。）
出てくる前に、段ボールに隠れるんだ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83578/f0781d39-be10-85f8-57d5-5ca067aa251a.png)
終わったら（まけたら）、全世界に報告もできるぞ・・・。それだけ・・・君の健闘を祈る。

役目を終えたヒズミさんは、はクールに去るぜ...
みんな、楽しんでくれ。

## で、どこが間違えてるの？

普通にゲームアプリができてしまったぜ☆
やっちゃったぜ☆
## ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83578/b50f84bd-5bae-7817-5688-76258c1e873c.png)

## レポジトリへのリンク

- https://github.com/EndoHizumi/ping-pond-dash
学び直しのすすめ

### はじめに

この記事は[N予備校プログラミングコース Advent Calendar 2022](https://qiita.com/advent-calendar/2022/nyobi)の12日目の記事です。
プログラミングをする上で、学び直したことと、その時読んだ本を紹介します。

### 自己紹介

こんにちは。
[N予備校](https://www.nnn.ed.nico/)の教材制作スタッフのmoesukeです。
主にプログラミングと情報系の教材を担当しています。過去には理科の教材のお仕事をしていたこともあります。

## 学び直し国語編！

教材の確認をするためには、まず**知識**が必要です。
プログラミング教材を確認している時、自分には知識が足りていないと感じることがあります。
そんな時、私は本から知識を得ようとします。
情報系はこの辺り読んどけばOK！と聞いたので早速ポチって読みました。

https://amzn.asia/d/4KrvCZO

https://amzn.asia/d/2w7LVMr

一冊2〜3日で読めるだろうと思いましたが、気がつけば1ヶ月くらい過ぎていました。
今思えば、なんでそんなに早く読めると思っていたのか謎ですが、私は本を読むのがとっても遅いのです。5行くらい読んで、わからないなと思って数ページ戻ったりしています。簡単にいうと私は**読解力が低い**のです。

思い返せば大学のレポートとかすごーく苦労していました。読書感想文もまともに書けた記憶がありません。現代文も赤点は回避していたけど苦手でした。国語ってずっと苦手だったな。。。
そして私は思いました。

**やばい！読解力が身につかないまま大人になってしまった！**

今更遅いかも、、、と思いましたが、**気づいたその日がこれからの人生で一番早い**のでやさしそうな教材をポチりました。

https://amzn.asia/d/8qPXkIN

内容については下のサイトで紹介されています。

https://gkp-koushiki.gakken.jp/2020/12/11/34712/

表紙には10歳から120歳までと書いてありました。対象年齢はバッチリです！
1ページ2分でサクサク進められました。
一問ごとに文章を読むときのポイントが解説されているので、自分が文章を読むときに見落としている部分が可視化されました。

このドリルを使う前に比べると、少し難しい技術書もスッと読める部分が増えました。（もちろんわからない単語に出会うこともあります）
小学校の範囲から学び直してよかったと思います！

## 学び直し算数・数学編！

プログラミングや表計算をしていると、中央値や標準偏差という単語に出会うことがあります。なんだっけ？と思い調べると統計の用語であることがわかりました。

習った覚えがないな、、、と思い調べてみると私が高校生の時は数Bで下記の中から選択制だったようです。

- 数列
- ベクトル
- 統計
- 数値計算

参考：文部科学省ホームページ[高等学校学習指導要領平成11年3月 第2章　普通教育に関する各教科　第4節　数学](https://www.mext.go.jp/a_menu/shotou/cs/1320155.htm)

数列とベクトルはやった覚えがあるけど、統計は記憶がない・・・
ゆとり世代に生まれたことが悔やまれます🥺
このままではデータ分析やプログラミングを学校で学んでいる次世代の人材にどんどん追い越されてしまう！！！

参考：文科省ホームページ[平成29・30・31年改訂学習指導要領の趣旨・内容を分かりやすく紹介](https://www.mext.go.jp/a_menu/shotou/new-cs/1383986.htm)

ということで、統計を勉強してみることにしました。
今更、大学受験対策に使う[青チャート](https://www.chart.co.jp/goods/item/sugaku/10375.html)はちょっとしんどい思い、対話形式で内容が進んでいく「数学ガールの秘密ノート-やさしい統計-」をポチって読みました。

https://amzn.asia/d/1WxgDS7

ラノベのような感覚で読めてわかりやすかったです。
グラフの見せ方、確率から偏差の話まで幅広く扱っていました。
この本を読んだことでなんとなくわかった気でいた偏差値や中央値についてスッキリ理解できた気がします。
せっかくなので統計検定も受けてみようかなと思いました。

https://www.toukei-kentei.jp/

受験したらまた記事を書きますね。

## まとめ

プログラミングに限らず、何かを勉強するときにどうしても理解できないことがあると思います。
そういう時は、なぜわからないかを考えて、学び直してみるのはいかがでしょうか。
もしかすると、常識的なことでも学校でしっかりと学習したことがない分野かもしれません。
気になったら勉強してみましょう。

勉強方法について、本やWebテキストでできるといいと思います。今の世の中動画教材もたくさんありますが、本やWebテキストのほうが圧倒的に豊富です。
本を買うのはお金が、、、という人は、地域の図書館は無料で利用できると思います。
本やWebのテキストで勉強できるようになっておくといいですよ📙

## おまけ　N予備校プログラミング入門コースについて

N予備校のプログラミング入門コース以下の学びかたがあります

- 参考書テキストで勉強する
- テキストと30分の解説動画で勉強する
- 週2回の90分の生授業で勉強する

テキストだけでは難しいよぉ〜という人は是非解説動画を見たり、

![スクリーンショット 2022-12-09 21.59.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1487699/69c75b52-4746-4c7e-78c5-d8b18d14f294.png)

生授業に参加して講師に質問してみてくださいね。

もちろん読解力を鍛えてからテキスト履修に戻ってもオッケーです💪
【GitHub】一つのブランチから複数のプルリクエストを作成する方法［備忘］

GitHub上で、一つのブランチから複数のプルリクエストを作成する方法です。
一つ目のプルリク作成は「プルリクエスト作りますか〜？」という目立つやつを出してくれるので良いのですが、一つ作成した時点で消えて迷子になりました。複数回。

## 1 Pull requests のタブを選択する
右側のボタン「New pull request」を押します。
![スクリーンショット 2022-12-09 21.56.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410392/cbbe4fda-b41d-83b3-9ed5-7534e6e1d461.png)


## 2 ブランチを選択する
`base`にmergeしたい先、`compare`に適用したい内容が含まれているブランチを選択します。
![スクリーンショット 2022-12-09 21.58.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410392/5e96f77e-5495-872c-23db-e1b9154c7ef2.png)


## さいごに
一度忘れたので、また忘れかねないと思って、まとめました。
あまりやる機会がないのですが、いざやろうと思うとブランチの方を見に行ってしまいます。私だけですか！？！？！
Next.js+Typescriptでvitest使いたいけど意地でも`src/`を作りたくない

## 正式タイトル

Typescript使ってるNext.jsでtsconfigに`baseUrl: "."`してる状態でVitest使いたいけど、`src`ディレクトリを作りたくないし`@`とか付けたくない。

## どゆこと

`create-next-app --ts`コマンドで作成したNextjsアプリの`tsconfig.json`に`baseUrl: "."`を追加すると、

```ts
import { Foo } from "../components/Foo"
```

とするときに
```ts
import { Foo } from "components/Foo"
```

と書けます。
baseUrlで指定したパスからの相対パスで指定できるようになるわけです。

で、突貫で作ったNextjsアプリに後からVitestを足そうとかした時にあるやつなんですが、既にtsconfigにそう書いてある状態で後から

「これまでテスト書かずに来たけど、真面目にやるならテスト書いてないのはアレだし書くか」

となったときに掲題の問題が生じます。

初期ならsrcを足して解決してもいいですが、ある程度成熟している状態の場合は全部そうするのは面倒よねって感じになるわけです。

Vitestは当然、`components/Foo`なんて書いても`${pwd}/components/Foo`なんてないよと判断するのでVitestにこれを解釈させる必要があります。
これを解釈させるためには`{vitest|vite}.config.ts`resolve.aliasを以下みたいな感じで設定する必要があります。

```vitest.config.ts
//...importとか
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
  },
  resolve: {
    alias: {
      "@": path.join(__dirname, 'src/'),
    },
  },
})
```

こうすると、`src/components/Foo`となっている所で`../components/Foo`としている場合に`@/components/Foo`とできるようになります。

ただこれ、当然ですが`"": path.join(__dirname, './'),`なんて指定はできないので、`components/Foo`はどうするべという問題があります。

これの解決策は2つ。
なんとなくいけてない気がするけど正道的な解決法を取るか、依存関係を増やすかです。

## なんとなくいけてない気がする解決法

個人的になんとなくイマイチな気がしますが、`page`と`app`と`components`を一つずつaliasに指定するという方法です。
イマイチとか言いましたが、正道的な解決法としてはこちらな気がします。

```vitest.config.ts
//...importとか
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
  },
  resolve: {
    alias: {
      "page": path.join(__dirname, 'page/'),
      "app": path.join(__dirname, 'app/'),
      "components": path.join(__dirname, 'components/'),
    },
  },
})
```

場合によっては、`styles/`や`lib/`, `util/`なんかも足しましょう。
手間ですがたかが3行ですし、普通はこれらと上記のディレクトリ以外にファイルを突っ込む人はいないです。

ただし、tsconfig.jsonのbaseUrlを変更するとなったときに非常に面倒なことになります。
……いやまあ、tsconfig.jsonのbaseUrlを変更するとなった時点でVitest抜きに色々大変なので、考慮する必要はないのかもしれませんが。

## 依存関係を増やす解決法

baseUrlの値を読んで解決してくれる`vite-tsconfig-paths`というプラグインが存在します。
これを使用すれば一つずつ追加する必要はなくなります。

```vitest.confdig.ts
/// <reference types="vitest" />

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  test: {
    environment: 'jsdom',
  },
})
```

ただし、当然ですが依存関係が増えます。
不要な依存関係は増やさないことがベストなので、便利ですがバッドな選択肢かもしれません。便利ですが。

## 終わりに

当然ですが、不要なライブラリを使用することは避けるべきなので手動でaliasを設定する方が良いと思います。
良いと思いますが、まあそれはそれとして便利な方がいいよねという気持ちが存在することも事実です。

その辺は、まあ自分の心とかチームの空気感とかで決めましょう。
Airtableでenebularの使いどころ: 販売管理編

[前回](https://qiita.com/joeartsea/items/c28245cad290b5ae3293)の続きです。

### 受注入力する時に納品日が相手や自社の休日に当たらないようにしたい

この販売管理baseは受注テーブルがあって、Node-REDのフローで取引先の発注書（Excelファイル）を読み込んで受注データとしてInsertします（[以前の記事](https://qiita.com/joeartsea/items/8a7bb8237d6bf1530893)）

![スクリーンショット 2022-12-09 21.58.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/123300ca-4886-ed20-78ff-e4b2469d64c9.png)

その後、人の確認が必要でしたのでAirtableの方に「確定」というチェック項目を作成し、その項目にチェックを入れてもらう運用になりました。そして、「確定」項目にチェックが入ったレコードの更新トリガでenebularの[クラウド実行環境](https://docs.enebular.com/ja/executionenvironment/overview)にアクセスするというWebhook的なアーキテクチャになっています。

![スクリーンショット 2022-12-09 21.04.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/8fe5b983-a660-644a-8951-e6a31e2c6879.png)

ちなみにAirtableのAutomationsはWebhookを受信する設定はノーコードでできるのに、送信する設定は以下のようにRun scriptをコーディングする必要があります。なんかハードル上げないと都合悪いことでもあるのかな...？

![スクリーンショット 2022-12-09 21.27.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/ed9baaa0-dbc8-3479-d7c5-490741e440f3.png)

![スクリーンショット 2022-12-09 21.08.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/2ff7bc2e-a950-2411-f2a3-197ddc749c07.png)

enebularのクラウド実行環境で動作しているWebhookで呼ばれるNode-REDフローは以下のような感じで、休日を除いた上で導き出された納品日をレスポンスするという比較的シンプルなフローです。

![スクリーンショット 2022-12-09 21.37.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/4008eb3a-ac6b-56ba-2477-e8ad274e5d67.png)

では、また次回！
Airtableでenebularの使いどころ: 勤怠管理編

[Airtable](https://airtable.com)めちゃくちゃ便利で、実際、販売管理、生産管理、勤怠管理とか業務アプリ系はもうAirtableで良いんじゃないかと思ってます。今回はAirtableで業務アプリ作る時にenebular/Node-REDがどこで使えるか紹介します。

## 異なるbaseからデータを参照・操作する 

Airtableにも[Automations](https://support.airtable.com/docs/automations-overview)というノーコードプログラミング機能があります。以下のような感じでフロープログラミングが可能です。

![Triaria_Industries_Automation_v001-2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/f50d8147-572b-cfac-2e23-4f23effe05a2.gif)

これを使えば同じbase内の異なるテーブルのレコードを参照・操作することが可能なのでNode-REDの出番はありませんが、**異なるbase**のレコードを参照・操作する場合は外部の力が必要になります（厳密に言うとbase間でデータをsyncすれば可能ですが、AirtableのProプランは1つのbaseにつき50,000レコードがリミットなのを考えるとsyncを多用してデータ量を圧迫するのは避けたくなります）

では、異なるbaseのレコードを参照・操作する時ってどんな時でしょう？

よくあるのが**就業カレンダーの参照**です。勤怠管理はもちろん、生産管理や販売管理なども全て自社の（場合によっては取引先も）休日をロジックに含める必要が多々あります（少しでも業務システム開発したことある人ならピンとくるはず）

それでは、カレンダーにまつわるロジックのものから以下抜粋して紹介します。

### 勤怠の期初で今月の所定出勤日数や法休日数をサマる

この勤怠管理は以下のような打刻画面を開発しています（[この開発もNode-REDで開発しています](https://www.slideshare.net/joeartsea/uibuilder)）

![スクリーンショット 2022-12-09 20.28.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/d9bbcc83-9988-879e-df0b-174a6d2a20ef.png)

打刻画面でユーザーによって打刻されると以下の図の出勤簿テーブルにレコードが生成されます。出勤簿テーブルは月次集計テーブルとリレーションになっており、月次集計1レコードに対して出勤簿レコードが複数存在します。

![スクリーンショット 2022-12-09 20.59.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/8c4f7b75-64cb-eafe-bf7d-5375887f8d57.png)

最終的に月次で締めて月次集計データを会計システムにインポートすることで給与計算などを行う運用となっています。これを実現するために期初の打刻のタイミングで当月分のカレンダーデータから休日日数を抽出するロジックをNode-REDで組んでいます。

![スクリーンショット 2022-12-09 20.53.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/5108db45-064b-edff-8177-30c51d66c8b3.png)

このNode-REDフローは、enebularの[エージェント実行環境](https://docs.enebular.com/ja/executionenvironmentagent/overview)を利用してラズパイにデプロイして、現場の打刻用iPadからアクセスする形で使われています（現場に来ないと打刻できないようにLAN内でのみアクセスできます）

ん〜、1つの事例だけで長くなっちゃったので1事例1Postにしようと思います〜

では、また次回！
[競プロ][Python]アルゴリズムとデータ構造のリンク集

# 全探索

## 深さ優先探索

* [バックトラッキング（Backtracking）](https://qiita.com/fastso/items/8c7c4e2eea871a7901b6)

## 幅優先探索

# 貪欲法

# 動的計画法

* [動的計画法](https://qiita.com/fastso/items/16cd61e95acb6747b791)

# 木 (Tree)

* [二分木の走査（先行順、中間順、後行順、幅優先探索）](https://qiita.com/fastso/items/0aae6272c2af8c3b9956)
* [二分木の高さのバランスが取れているかどうかの判定](https://qiita.com/fastso/items/5ac7bcde2b271777a79a)
* 

# グラフ (Graph)



# その他

* [競プロのためのPythonの便利な機能](https://qiita.com/fastso/items/3083e15899bc449ed83a)
* [PythonのList Comprehension (listcomps) の使い方](https://qiita.com/fastso/items/9613b5dbeb83a507b8f2)
* [Pythonのlist型とtuple型のメソッド比較](https://qiita.com/fastso/items/1e59250c55250e8c328d)
OpenFHE を Pyでバインドしたいだけの物語

## 概要

https://github.com/pybind/pybind11

OpenFHEライブラリ（C++の格子暗号実装）
をPybind11 でPythonへとエクスポートすることに取り組んでみました。

https://qiita.com/kenmaro/items/f4e3db3317b6a9c14f13

前回の記事では、Wasmエクスポートにチャレンジしてみたので、
さらにPythonでもやりたいと思い、限定的にバインディングを実行しました。


## レポジトリ

こちらにプッシュしています。

https://github.com/kenmaro3/openfhe-pybind

また後日記事を更新して詳細をまとめようと思います。



今回はこの辺で。

@kenmaro
OpenFHE を Wasm バインディングしたいだけの物語

## 概要

https://emscripten.org/docs/porting/connecting_cpp_and_javascript/embind.html

embind を使って OpenFHE をWasmエクスポートしてみました。

node-seal を目指しましたが、汎用的にバインディングするのは時間的に諦めて、
自分がたくさん使うであろうCKKS形式を重点的にエクスポートしてみました。

いろいろとまだやりきれていないこと（シリアライズとか）あるので、
もし興味のある人がいらっしゃいましたら一緒にやりましょう。


## レポジトリ

フォークしてプッシュしています。

https://github.com/kenmaro3/openfhe-development


また後日記事を更新してまとめようと思います。


今回はこの辺で。



@kenmaro
slack-github-actionで複数のチャンネルを指定できるようになってた

この記事は、 [Qiita株式会社のカレンダー | Advent Calendar 2022 - Qiita](https://qiita.com/advent-calendar/2022/qiita-inc) の 10 日目の記事です。

## はじめに

[slackapi/slack-github-action](https://github.com/slackapi/slack-github-action) を使うことで、GitHub Actions上でSlackにメッセージを送ることができますが、`v1.22.0`から複数のチャンネルに対してメッセージを送信できるようになってました。

https://github.com/slackapi/slack-github-action/releases/tag/v1.22.0

## 方法

`channel-id`にカンマ（`,`）区切りでチャンネルIDを設定するとできます。

例えば、

- `#hoge`のチャンネルID: ABCD1234
- `#fuga`のチャンネルID: EFGH5678

とすると、

```yml
name: Test multiple channel IDs

on:
  workflow_dispatch:

jobs:
  send-message:
    runs-on: ubuntu-latest
    timeout-minutes: 5
    steps:
      - uses: slackapi/slack-github-action@v1.23.0
        with:
          channel-id: 'ABCD1234,EFGH5678'
          slack-message: 'test message'
        env:
          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
```

のようになります。
複数のjobを書いていた方は、同じメッセージであれば1つのjobで完結できるようになります。


---

ぜひ、 [Qiita株式会社のカレンダー | Advent Calendar 2022 - Qiita](https://qiita.com/advent-calendar/2022/qiita-inc) を購読設定して、明日の記事もご覧いただけると嬉しいです。
全部同じじゃダメ！？マルチデバイスアプリでの操作・体験設計

この記事は クラスター<a href="https://qiita.com/advent-calendar/2022/cluster"> Advent Calendar 2022 (2枚目)</a> 10日目の記事です。昨日は @baku_dreameater さんの<a href="https://note.com/baku_dreameater/n/nb9f357697010">「趣味開発のアプリでVRM1.0モデルの読み込みに対応した話」</a>でした!

初めまして、
スプラトゥーン３やりたい欲と日々戦っているUI・UX・グラフィックデザイナーのmarikoです。

皆様はUI・UXって単語を耳にされたことはありますでしょうか？
いろんな定義づけ、議論がされている単語ではありますが

<b>UIデザイン→「機能の設計」
UXデザイン→「体験の設計」</b>

すごく大雑把な分け方をしますと上記のような表現が当てはめられると思います。
サービスの使用感や見た目・そこから得られる体験までデザインするという職種になります。

メタバースアプリ<a href="https://cluster.mu/"> cluster </a>を運用しております。
<a href="https://qiita.com/advent-calendar/2022/cluster">Advent Calendar 2022 (1枚目)</a>で@rizumi さんが<a href="https://qiita.com/rizumi/items/9adf4865373d08e8c295">書かれていたように</a>
スマホ・PC・VRの<b>マルチプラットホーム対応</b>されているアプリです。
![スクリーンショット 2022-12-09 12.48.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2960684/57a85a87-53f5-9ddc-8bf0-d92362678a66.png)
<b>「VRを持っていないけどメタバースを楽しみたい」
「VRをもっていても今日はお手軽にスマホやPCでアクセスしようかな」</b>
気軽に、その日の気分、やりたいことでデバイスを選んで遊べる優しい仕様となっているのですが
<b>これがUIデザイナー的には悩みの種でもあります。</b>

例えば同じ「アクセサリー」という機能でも
![pc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2960684/2bf8edda-61c3-a332-5b4c-1c21719231f0.png)
▲スマホ・PCはこだわりたい方に向けて位置や角度を細かな調整をしやすいように


![vr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2960684/0c3344c1-bcc4-5f00-7d3a-95e98df5648c.png)
▲VRは「自分の手」に取って「自分（アバター）」につけられるという体験をベースに設計しています。

特にVR版に関しましては
- アクセサリーを持った時に操作しやすいようにバウンディングボックスを表示させる
- 選んだアクセサリーがスポーンした時の手に取りやすい位置に来るように
- アクセサリー編集中であることが自分の目で確認できるエフェクトをつける
などなど、３Dデザイナーやエンジニアさんとギリギリまで「体験」の調節を繰り返しました。


スマホで実装できる気持ちいいと動きってなんだろう？？？
PCでウィンドウサイズを変更した時のレスポンシブはどうしよう？？？
VRの視界の中で違和感を感じない操作感って？？？

日々そんな「？？？」をぐるぐると頭のなかでこねこねこねこね、
たまに「同じでもええんちゃう」という脳内の悪魔に囁かれながらも
「安易に同じにしちゃじゃダメなんだ！！！」とみんなで発破をかけ合いながら日々開発に打ち込んでおります。

特に最近実装されたカメラ2.0はVR版とVR版以外でかなり体験が異なっておりますので
ガジェットをお持ちの方は是非UI・UXの違いを意識して体感してみてくださいませ！

明日は @kako_vail  さんによる「岡山から東京に出社している話」です。お楽しみに！
オブジェクト指向の現状

# パンの誕生
ヨハン君・クリステン君「小麦粉を水で練って焼く方法を考えたよ」

アラン君「小麦粉を水で練って焼いてるのか。。。」
アラン君「いろんな形にして焼くことで、もっと美味しいよ。パンて名前にしたよ」

民衆「小麦粉を水で練って焼くってすごいね！」

ビャーネ君「小麦粉を水で練って具を乗っけて食べると美味しいよ」

民衆「小麦粉を水で練って焼いてるからこれもパンだね」

民衆「パンうめぇ～パンうめぇ～」

# 現在

民衆「パンうめぇ～パンうめぇ～」

パン職人「私は具材にこだわる一流のパン職人」

伝統のパン職人「いろんな形にこだわることこそパン」

アラン君「僕の知ってるパンじゃない」

達観した人「美味しければいいじゃない」

グルメ「パンのうまさをみんな理解してない」

パン「私は小麦を水で練って焼いたものです」

子供達「今日は、ハート型にしてイチゴ乗せたパン作ったよ」

香川県民「パンなんてオワコン、うどん食おうぜ！」

他県民「うどん、、、パンと関係なくね？」

# オブジェクト指向の現状ってこんな感じ(´・ω・`)
Stimulus リファレンス: ライフサイクルコールバック

:::note
この記事は[Google翻訳](https://translate.google.co.jp/)の結果を編集したものです。
:::

https://stimulus.hotwired.dev/reference/lifecycle-callbacks

ライフサイクルコールバックと呼ばれる特別なメソッドを使用すると、コントローラーまたは特定のターゲットがドキュメントに接続したり、ドキュメントから切断したりするたびに応答できます。

```javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    // …
  }
}
```

# メソッド

| メソッド | Stimulusによる呼び出し |
| :-- | :-- |
| initialize() | コントローラーが最初にインスタンス化されたときに1回 |
| [name]TargetConnected(target: Element) | ターゲットがDOMに接続されているときはいつでも |
| connect() | コントローラーがDOMに接続されているときはいつでも |
| [name]TargetDisconnected(target: Element) | ターゲットがDOMから切断されたとき |
| disconnect() | コントローラーが DOM から切断されたときはいつでも |

# 接続

次の両方の条件がtrueの場合、コントローラーはドキュメントに接続されます。

- その要素がドキュメントに存在する（つまり`document.documentElement`の子孫である`<html>`要素）
- その識別子は要素の`data-controller`属性に存在します
- コントローラーが接続されるとStimulusはその`connect()`メソッドを呼び出します。

## ターゲット

次の両方の条件がtrueの場合、ターゲットはドキュメントに接続されます。

- その要素は対応するコントローラーの要素の子孫としてドキュメントに存在します
- その識別子は要素の`data-{identifier}-target`属性に存在します
- ターゲットが接続されるとStimulusはそのコントローラーの`[name]TargetConnected()`メソッドを呼び出し、ターゲット要素をパラメーターとして渡します。`[name]TargetConnected()`ライフサイクルコールバックは、コントローラの`connect()`コールバックの前に発生します。

# 切断

次のシナリオのいずれかの場合など、前述の条件のいずれかがfalseになると接続されているコントローラーは後で切断されます。

- `Node#removeChild()`または`ChildNode#remove()`を使用して、要素がドキュメントから明示的に削除されている
- 要素の親要素の1つがドキュメントから削除された
- 要素の親要素の1つでその内容が`Element#innerHTML=`に置き換えられている
- 要素の`data-controller`属性が削除または変更された
- ドキュメントはTurboページの変更中などに新しい`<body>`要素をインストールします
- コントローラーが切断されるとStimulusはその`disconnect()`メソッドを呼び出します。

## ターゲット

次のいずれかのシナリオの場合など、前述の条件のいずれかがfalseになると、接続されたターゲットは後で切断されます。

- `Node#removeChild()`または`ChildNode#remove()`を使用して要素がドキュメントから明示的に削除されている
- 要素の親要素の1つがドキュメントから削除された
- 要素の親要素の1つでその内容が`Element#innerHTML=`に置き換えられている
- 要素の`data-{identifier}-target`属性が削除または変更されている
- ドキュメントはTurboページの変更中などに新しい`<body>`要素をインストールします
- ターゲットが切断されるとStimulusはコントローラーの`[name]TargetDisconnected()`メソッドを呼び出し、ターゲット要素をパラメーターとして渡します。`[name]TargetDisconnected()`ライフサイクルコールバックはコントローラーの`disconnect()`コールバックの前に発生します。

# 再接続

切断されたコントローラーは後で再び接続される場合があります。

ドキュメントからコントローラーの要素を削除してから再度アタッチした後など、これが発生するとStimulusは要素の以前のコントローラーインスタンスを再利用し、その`connect()`メソッドを複数回呼び出します。

同様に切断されたターゲットは後で再び接続される場合があります。Stimulusはコントローラーの`[name]TargetConnected()`メソッドを複数回呼び出します。

# 順番とタイミング

Stimulusは[DOM `MutationObserver` API](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)を使用してページの変更を非同期に監視します。

つまり、Stimulusはドキュメントに変更が加えられた後、各変更に続く次のマイクロタスクでコントローラーのライフサイクルメソッドを非同期的に呼び出します。

ライフサイクルメソッドは引き続き発生順に実行されるため、コントローラーの`connect()`メソッドへの2回の呼び出しは常に`disconnect()`への1回の呼び出しで区切られます。同様に特定のターゲットに対するコントローラーの`[name]TargetConnected()`への2回の呼び出しは、同じターゲットに対する`[name]TargetDisconnected()`への1回の呼び出しによって常に分離されます。
python / django でオブジェクトのメソッド・プロパティを全て見る

Rubyでは `object.methods` で出来るやつ。
python では dir関数を使うようだ。

# 例


```py
dir(Comment.objects.first())
```

```py
['DoesNotExist',
 'MultipleObjectsReturned',
 '__class__',
 '__delattr__',
 '__dict__',
 '__dir__',
 '__doc__',
 '__eq__',
 '__format__',
 '__ge__',
 '__getattribute__',
 '__getstate__',
 '__gt__',
 '__hash__',
 '__init__',
 '__init_subclass__',
 '__le__',
 '__lt__',
 '__module__',
 '__ne__',
 '__new__',
 '__reduce__',
 '__reduce_ex__',
 '__repr__',
 '__setattr__',
 '__setstate__',
 '__sizeof__',
 '__str__',
 '__subclasshook__',
 '__weakref__',
 '_check_column_name_clashes',
 '_check_constraints',
 '_check_default_pk',
 '_check_field_name_clashes',
 '_check_fields',
 '_check_id_field',
 '_check_index_together',
 '_check_indexes',
 '_check_local_fields',
 '_check_long_column_names',
 '_check_m2m_through_same_relationship',
 '_check_managers',
 '_check_model',
 '_check_model_name_db_lookup_clashes',
 '_check_ordering',
 '_check_property_name_related_field_accessor_clashes',
 '_check_single_primary_key',
 '_check_swappable',
 '_check_unique_together',
 '_do_insert',
 '_do_update',
 '_get_FIELD_display',
 '_get_expr_references',
 '_get_field_value_map',
 '_get_next_or_previous_by_FIELD',
 '_get_next_or_previous_in_order',
 '_get_pk_val',
 '_get_unique_checks',
 '_meta',
 '_perform_date_checks',
 '_perform_unique_checks',
 '_prepare_related_fields_for_save',
 '_save_parents',
 '_save_table',
 '_set_pk_val',
 '_state',
 'article_title',
 'check',
 'clean',
 'clean_fields',
 'comment_set',
 'date_error_message',
 'delete',
 'from_db',
 'full_clean',
 'get_constraints',
 'get_deferred_fields',
 'get_next_by_pub_date',
 'get_previous_by_pub_date',
 'id',
 'objects',
 'pk',
 'prepare_database_save',
 'pub_date',
 'refresh_from_db',
 'save',
 'save_base',
 'serializable_value',
 'unique_error_message',
 'validate_constraints',
 'validate_unique']

```


# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
NPF(NetBSD Packet Filter)でNATとポートフォワーディング設定を行ってみる

[NetBSD Advent Calendar 2022](https://qiita.com/advent-calendar/2022/netbsd) 9日目の記事です。 今日はNPF(NetBSD Packet Filter)でNAT(Network Address Translation)設定とポートフォワーディングを行う設定手順を紹介しようと思います。

## NPFでのNAT設定

NPFに限らず、FreeBSDの[ipf(5)](https://www.freebsd.org/cgi/man.cgi?query=ipf&sektion=5&format=html)やLinuxで使用されている[iptables](https://ja.wikipedia.org/wiki/Iptables)といったファイアウォール実装には、グローバルIPアドレスをローカルネットワーク内の複数のノードから利用可能にするNAT(Network Address Translation)機能が実装されています。

NPFでのNAT設定は以下のように行います。インタフェース名やネットワークの値を変数に入れているため複数行になっていますが、重要なのは `map` の記述の部分になります。

```
$ext_if = "wm1"
$ext_v4 = inet4($ext_if)

$localnet = { 172.16.0.0/24 }

# NAT変換を行うための設定
map $ext_if dynamic $localnet -> $ext_v4
```

ちなみにFreeBSDでは[ipnat(5)](https://www.freebsd.org/cgi/man.cgi?query=ipnat&sektion=5&format=html)を利用し、 `/etc/ipnat.conf` にNAT変換ルールを記述します。併せて `/etc/rc.conf` に `ipnat=YES` を追加しておく必要があります。

こうやってみると、FreeBSDではパケットフィルタのルール設定とNAT設定は別ファイルに分けられており、NPFではルールとNAT設定を単一の設定ファイルで行えるという違いがあるようですね。

```
# FreeBSD ipnatによるNAT設定
map pppoe0 192.168.10.0/24 -> 0/32 proxy port ftp ftp/tcp
map pppoe0 192.168.10.0/24 -> 0/32 portmap tcp/udp 40000:60000 mssclamp 1400
map pppoe0 192.168.10.0/24 -> 0/32
```

## NPFでのポートフォワーディング

NPFでのポートフォワーディングは、特定のホスト・ポートにパケットを流すものと、指定したポート番号へのアクセスをローカルネットワーク内に転送するというものがあります。

### 特定のホスト・ポートにポートフォワーディングする

特定のホスト・ポートにパケットを転送する設定は、NATの設定と似ています。というよりも、NATでは `->` で外に出てゆくパケットについて変換するルールを書いていたのに対し、ポートフォワーディングでは `<-` で外から入ってくるパケットを処理するという理解しやすい記述になっています。

例として、外部からのポート番号 `2222` に対するアクセスを `172.16.0.2` の `22` 番ポートに転送する設定を示します。
 
```
$ext_if = "wm1"
map $ext_if dynamic 172.16.0.2 port 22   <- $ext_v4 port 2222
```

また、外部から特定のポートにアクセスされた場合に、そのままローカルネットワーク内の特定のホストにパケットを転送する設定は以下になります。この設定の場合は、 `2222` → `22` といったポートのマッピングを考えておく必要がなくなる(外部からアクセスしたポート番号のままパケットが転送される)ので便利かもしれません。

```
$ext_if = "wm1"
$allow_redir_ip4addrs = { 172.17.0.2 }

group "redirect" {
  pass stateful on $ext_if \
      from $allow_redir_ip4addrs to $ext_v4 port 5900
  pass stateful on $ext_if \
      from $allow_redir_ip4addrs to $ext_v4 port 2222
}
```

## まとめ

NPFでのNATとポートフォワーディング設定について紹介しました。同等の設定をipfと比較しながら見てみると、NPFの記述はより分かりやすい感じがしますね。
画像の拡張子いろいろ

最近、次世代画像フォーマットのWebPが出てきました。なのでここで改めて、画像はどんな拡張子があるのか、どれを使用するのが最適かを私なりにまとめました。

### JPEG
実写などの細かいグラデーションがある画像に使おう。不可逆圧縮なので、圧縮するときは注意。
### GIF
簡易アニメーションを作るときに最適です。データ容量が小さくて複雑な色表現には向いていません。ネットでたまに実写をgifで出してるのがありますね。すごく劣化してます。
### PNG
ロゴ、アイコンで、透過させたいときに使用されます。可逆圧縮なのもいいところ、データ量は重いです。
### SVG
同じくロゴやアイコンで使用されます。ベクター画像形式なるもので、大きく表示しても劣化せず、データ量も少ない。
### WebP
最近出た形式です。JPEG、PNGよりもデータサイズが軽く、アニメーションフレーム、透明度などにも対応しています。
欠点は非可逆圧縮なのと、対応ブラウザが少ない(←これ重要)。

https://caniuse.com/webp

私はJPEG、PNG、SVG、を使い分けています。アニメーションは基本CSS制御でたまにGIFをしようするかな。
WebPはIE11以外は全て対応しているみたいだけど、僕はまだ採用しないか、`<picture>`で代替えを用意します。

https://fastcoding.jp/blog/all/webdesign/website-images/#no2

https://developer.mozilla.org/ja/docs/Web/HTML/Element/img

https://developer.mozilla.org/ja/docs/Web/Media/Formats/Image_types#avif_image