OmniAICreator/Qiita-1.07M huggingface dataset:
転職の振り返り

初の転職活動を行ったので、備忘として残します。

# 前職
SESで客先常駐をしていました。
業務は保守運用、集計、たまに開発をしていました。
保守運用が主な業務で開発の機会が少ないのと、開発をしてもレガシーな環境でした。
あと友人の給料を聞いて自分の給料にショックを受けました。
そこでホワイトな会社ではあったのですが、技術力と給料を上げたかったので転職することにしました。

# 転職活動でやったこと
30歳前半、現職SEで実際の数字ではないですが、大体これくらいでした。
応募:40社
1次面接:20社
2次面接:10社
内定:5社

## エージェント
- Doda
    - 担当者がついてくれます。
    - 非常に沢山メールで企業紹介が来ます。
        - メールを見るだけで一苦労でした。
    - 企業毎に別の担当者がいたりと仕組みが分かりづらかったです。
    - 取り敢えず数打ってどれかが引っかかればいいという印象でした。
- Geekly
    - 最初に面談をして履歴書、職務経歴書を作ってくれました。
        - 面談はリモートではなく、現地ででした。
    - 親身になって聞いてくれる印象でした。

## 面接
### 形式
コロナ禍なのもあり、全てリモートでした。
エージェントの方はスーツでと言っていましたが、Tシャツで受けました。
たとえマイナスと思われようとリモートでスーツを着ることが評価される会社に行きたくないからです。
リモートの面接はTeams, Zoomなど様々でした。
事前にツールをダウンロードし、テストしておくほうが良いです。
また、スピーカーは使用せず、イヤホン等を使用することでハウリングしないようです。面接に集中するためにも使用したほうがいいと思います。
リモート面接のおかげで移動時間を考慮することなく、スケジュールを組むことができたので今後はずっとリモートであって欲しいです。

### 内容
基本的にどの企業でも内容は同じ担当者の方が主導してくれます。
たまにコードを書くところがありますので、エディタや実行環境が整ったPCで面接を受けたほうがいいです。
- 会社説明
    - 担当者の方が会社について説明してくれます。あとの逆質問での質問することを考えていました。説明時に質問してもう聞きましたので、みたいにも言ってました。
- 自己紹介
    - 自分の経歴、仕事内容、担当などを説明しました。長すぎないよう短くまとめました。
- 転職理由
    - 転職の理由は色々ありましたが、技術力を向上したいなど前向きな理由を話しました。
- 志望動機
    - 正直なところ色々な会社を見ているとあまり違いがわからなくなってきますが、募集要項やHPから会社の特徴や強みを見つけて説明しました。
- 長所短所
    - 自分の長所短所を考えるのが苦手なので、現職の面談だったりで言われたことをそのまま言いました。
- キャリアパス
    - その会社でどのようになっていきたいかを転職理由とからめて説明しました。
- 逆質問
    - 大体10分あるかないかくらいです。3つくらいで質問しました。ある程度質問をストックしていますが会社説明で言われたことを聞くと印象が良いかなと思い質問したりもしました。

## 振り返り
最初のエージェントから30社は応募しましょうと言われ、そのとおりにしましたが面接になるとスケジュールを組むのが大変になりました。自分がほんとに興味があるところにだけ応募するほうがいいです。
エージェントのサイトでいつ面接があるのかはわかるのですが、管理しづらかったのでGoogleカレンダーを使用しました。
その頃は面接が上手くいかずなかなか突破できなかったので、途中から落ちた理由をエージェントの経由で聞きました。落ちたのでいいことは書かれてなくメンタルに来ましたが、内定のためには必要なことと割り切りました。
そこから答えていた内容を見直し、面接の突破率が上がりました。

リモート面接で第一印象を良くしようとLive配信とかで見る自分に照明を当てたりしました。
答える内容はカンペを読んでいたので目線が正面以外を向かないようにカメラ付近にカンペを置くようにしました。

会社説明で志望している内容と違うなとなるとその時にはっきりと言うことが大切です。実際にあったのですが、取り敢えず内定が欲しくてそのまま進めてしまっても最後の時に結局断らないといけなくなってしまうので、お互いに損します。

最初は売り手市場だし、リモートで面接を受けれるから楽勝だろと思っていましたが、結構手こずりましたが、無事転職することができました。
Android端末の画面収録をMacでやる方法

自分のメモ用に記載

## 事前準備
- homebrewで以下をインストール

```shell
brew install scrcpy
brew install android-platform-tools
```

## 動かし方
- Android端末を繋いで以下コマンドを実行
```shell
scrcpy
```

## 画面録画
- 今いるディレクトリに保存される
```shell
# 録画開始
scrcpy --record file.mp4
# 録画終了
# - Macと接続している線を抜く (?)
```
スイッチングコストのやばい話 (アドレナリンジャンキーより)



>ジェラルド・ワインバーグの推定によると、ひとりに3つのプロジェクトを割り当てることによるコンテキストスイッチのコストは40パーセントである。つまり、労働者の時間のうち40パーセントが、非生産的な作業に費やされるということである。残りの60パーセントは3つのプロジェクトに分割される。週40時間の労働時間をすべてのプロジェクトに等分すると考えると、プロジェクトA、B、Cに8時間ずつ費やし、コンテキストスイッチには実に16時間を費やす計算になる。最大で4000の知力生産単位は2400に減少する。参考：‥GeraldM.Weinberg,QualitySoftwareManagement,Vol.1:SystemsThinking（NewYork:DorsetHousePublishing,1992）.

 アドレナリンジャンキー プロジェクトの現在と未来を映す86パターン (Japanese Edition) (p.233). Kindle 版. 

<!-- Update From Qiita API -->

# チャットメンバー募集


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

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


# Twitter

https://twitter.com/YumaInaura

<!-- Update From Qiita API -->
use roslibjs no internet environment

roslibjsをlocal環境(インターネットがない環境)で使用したい

```
git clone https://github.com/RobotWebTools/roslibjs.git
cd roslibjs/example
cp -r ../build ./
python3 -m http.server
```

インポート部分を以下のように変更

```diff
--- a/examples/simple.html
+++ b/examples/simple.html
@@ -2,8 +2,7 @@
 <html>
 <head>
 <meta charset="utf-8" />
-<script src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
-<script src="../build/roslib.js"></script>
+<script src="./build/roslib.js"></script>
 
 <script>

```

http://0.0.0.0:8000/ からページを開ける


他のjavascriptモジュールも同じように扱えそう
LPC812MAXと液晶、ACM1602K-NLW-BBWで3分タイマー(74HC164)(mbed)


LPC812MAXと液晶、ACM1602K-NLW-BBWで3分タイマー(74HC164)(mbed)


x mbed2リビジョン144
x リビジョンを変更できる人むけ


x 原因は、わからないが液晶がちらつく場合は、ウェートを調整してね!!
(電源-GND間のパスコン(47μF～100μF...するといいらしい)





目的
パラレルLCDのテスト

STM32L010でMbedを使い16文字2行液晶に3分を
表示するプログラム

74hc164シフトレジスターを使用した。
液晶とのピン数を節約した。信号線10本から
信号線3本に減らした。

1 CLK クロック端子(緑色)
2 RSDATA RS端子とデータの共有端子(黄色)
3 E 読み込み書き込み同期信号(青色)

秋月電子
キャラクター液晶 [ACM1602K-NLW-BBW] 通販コード　P-10185
半固定ボリューム１０ｋΩ [TSR-065-103-R] 通販コード　P-06063
CD74AC164E　通販コード　I-11356

アイテンドウ
8ビットシフトレジスタ [HD74LS164P]　www.aitendo.com/product/12485

-88-


![o_con88.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/414e8b02-e421-8f1a-603d-083dbaad78d3.jpeg)




![o_con712.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/19abe12c-dad1-c153-c2b9-13bf707654ca.jpeg)




```c++




// gpio_P_LCD_3min_812_1


#include "mbed.h"

//*          *****  *****       ***  * *
//*         *       *    *     *   * * *
//*         *       *    *     *   * * *
//*         *       *    *     *   * * *
//*         *       *    *     *   * * *
//********   *****  *****       ***  * *

int kk;
#define oun_min() for(kk=0;kk<60;kk++){wait_ms(1000);}

#define swclk1  P0_16    //B 9
#define swdio1  P0_17    //G 8
#define en1     P0_7     //R 7

DigitalOut swdclk(swclk1);
DigitalOut swdio(swdio1);
DigitalOut en(en1);

void seg1(int v,int rs)
{
    for(int jj=0; jj<8; jj++) {
        if( (v<<jj) & 0x80 ) {
            swdio=1; //ビットが1
        } else {
            swdio=0; //ビットが0
        }//endif
        swdclk=1;
        swdclk=0; //clk
    }//for

    swdio=rs;
    en=1;
    wait_ms(1);
    en=0;
}

//文字列の表示 nana_seg
int ns_printf(char *str1)
{

    //文字の中身がゼロか
    while(*str1) {

        //一文字出力
        seg1( *str1 ++, 1  );

    } //while

    //戻り値
    return(0);
}//ns_printf

int lcd_int[]= {
    0x30,0x30,0x30,0x38,0x08,0x01,0x06,0x08+0x04
};//lcd_init

int main()
{

    //GPIOの初期化
    en=0;
    swdclk=0;
    swdio=0;
    wait_ms(200); //debug

    //液晶の初期化
    for(int ii=0; ii<8; ii++) {
        seg1( lcd_int[ii], 0);
        wait_ms(2);
    }//for

    seg1( 0x80+0x00, 0  );  //1ライン目にカーソルを移動
    ns_printf( (char *)"START" );
    wait_ms(700);

    //画面クリア
    seg1(   0x01, 0  );
    wait_ms(5);

    ns_printf( (char *)"0," );
    oun_min()
    ns_printf( (char *)"1," );
    oun_min()
    ns_printf( (char *)"2," );
    oun_min()
    ns_printf( (char *)"3" );

    while(1) {} //無限ループ

}//main




```


![o_con833.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/6ac57d2d-3561-fc65-c217-bac67eed2afc.jpeg)


-5-
テンペスト攻撃 とは

## 勉強前イメージ

テンペストがわからん

## 調査

### テンペスト攻撃 とは

英語で Tempest Attack と書き、モニターやキーボード、ケーブルから放出される電磁波を傍受して
情報の再現を行、パスワードなどを不正に入手する攻撃手法になります。

元々1960年代頃からスパイ活動などのために研究が進められています。
電子回路やケーブルから発生される電磁波は企画によって規制値が定められているので一定以下になるようになっています。
ですが、微弱の電磁波は外部に漏出しているためそれを拾っています。

電磁波を発する機器の中でケーブルからの電磁波は復号は困難ですが
ディスプレイから発生する電磁波の放射レベルは高く復号も可能です。
実際に市販品をベースにした装置でも実現した例があります。
ある程度の強さがあれば離れた場所でも傍受は可能とのことです。

この攻撃は、傍受するだけなので攻撃を受けるコンピュータやディスプレイには攻撃の痕跡が記録されません。
その為、この攻撃にあったとしても情報漏洩が広がるまで気づくことは難しいとされています。

## 勉強後イメージ

ディスプレイのデータをアンテナで取れるの・・・・
そんなことできるのすごいね。。。

## 参考

- [離れた場所から目的の機器が発する電磁波を傍受！テンペスト攻撃とは](https://www.lrm.jp/security_magazine/tempest/)
- [電磁波盗聴 【TEMPEST】](https://e-words.jp/w/%E9%9B%BB%E7%A3%81%E6%B3%A2%E7%9B%97%E8%81%B4.html)
- [テンペスト攻撃【Tempest Attack】](https://www.sg-siken.com/word/%E3%83%86%E3%83%B3%E3%83%9A%E3%82%B9%E3%83%88%E6%94%BB%E6%92%83.html)
canvasデータをlaravelへ送信しデコードする

こんにちは、いしがみです。
今回は、自分がlaravelをやっているときに嵌まってしまった、canvasデータの送信とlaravel側の受信について書きます。


# 環境
Laravel v9.17.0 
PHP v8.1.7

# Javascript側の送信

今回は、保存ボタンをクリックしたときにcanvasに描かれたデータを、base64にエンコードし、laravelへと送信する。laravel側で保存用のAPIを用意しておき、そちらに送信する。
```Javascript:main.js
saveButton.addEventListener('click', () => {
    //canvasデータを指定された画像フォーマット形式のdataURIを返す
    var canvasData = canvas.toDataURL("image/png");

    const fd = new FormData();//送信データ
    const xhr = new XMLHttpRequest();//リクエストの作成

    //送信先の指定
    xhr.open('post', '/api/upload');
    //データの追加
    fd.append('uploadfile',canvasData);
    //ファイル送信
    xhr.send(fd);
  
});

```
# laravel側の受信
laravel側は、APIとして起動するため、api.phpにルートの記載をまずは行う。

```php8:api.php
Route::post('/upload',[App\Http\Controllers\DrawStoreController::class,'upload']);

```
その後、今回使用するControllerに画像を保存すプログラムを作成いたしました。base64として受け取ったデータを関数内部で、デコードし、pngデータとして保存しています。
```php:ImageStore.php

     public function upload(Request $request)
        {
        // 画像保存
        $image = $request->input("uploadfile");  // your base64 encoded

        //base64をデコードする前の下準備
        $image = str_replace('data:image/png;base64,', '', $image);
        $image = str_replace(' ', '+', $image);  // 空白を'+'に変換

        //ファイル名の指定
        $imageName ='aaa'.'.'.'png';

        //デコードしたファイルをstorageに保存
        \File::put(storage_path(). '/' . $imageName, base64_decode($image));
    }

```


これらの送信及び受信により、画像データの受け渡しができました。
[OMNI3D] Virtual Depthによる単眼距離推定の安定化

# 概要

単眼で距離を推定する時に、様々なセンサーを同時に学習しようとすると安定しないという課題がありました。
OMNI3DではVirtual Depthとうい手法を取り入れることで、その課題を解決しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/ff2598ef-3c51-4f52-a687-78c51c89755e.png)


# Virtual Depth
OMNI3Dでは距離をVirtual Depth(仮想距離)に変換する事で、焦点距離(f)と画像の高さ(H)の影響をなくす事を提案しています。
Virtual Depthを入力データに適応することで、焦点距離の違うカメラと画像のリサイズをして学習する事が出来るようになりました。距離画像だけではなく、三次元Bounding Boxにも適応出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/66a5a4f7-5913-7eca-642a-fbb7b0a4b25b.png)
*v=virtual

公式がイメージしやすい為に例を出します。
焦点距離を1/2にすると距離も1/2になります。
画像サイズが1/2になると、物体のサイズが1/2(小さく)になるので、2倍遠くにいるように見えます。

# 結果
base lineのモデルから、Virtual Depthを除くと精度が大きく下落してるのがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/0f29b869-898d-72be-0361-00cb907c9b2d.png)

# 参考文献
OMNI3D: A Large Benchmark and Model for 3D Object Detection in the Wild
https://arxiv.org/pdf/2207.10660.pdf
Discordのセットアップで試したことのメモ書き

## Twitter Feedの連携
Mee6を導入するかZapierで連携
Mee6の場合、Premiumプランの契約が必要

https://mee6.xyz/

![スクリーンショット 2022-09-01 19.21.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245027/b5fdffc7-bfd7-b130-9d75-4b11c3bea354.png)


## Openseaのリストとセール情報連携
Opensea Sales Botを導入

https://2.5.dev/bots/opensea

![スクリーンショット 2022-09-01 19.24.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245027/26749ffd-c035-1f58-97a1-1419a31cfa9e.png)

Inviteして連携のコマンド打つだけの簡単仕様

ドキュメント

https://docs.5.dev/2.5-nft-marketplace-tracking-bots/opensea-sales-and-listings-bot

```
/track sales #channel opensea-url
/track listings #channel opensea-url
```


## ボタン押下で別チャンネルとか見れるやつ(Verify)

1. Verify用のチャンネルだけPublicで見れていて他見れない
1. 特定のスタンプやボタン押下でロールを付与
1. ロールに応じてカテゴリを表示

2の対応に関してはさまざまなbotで対応は可能
Mee6でもCarl-botでもBotGhostでも

Bot自体に発言させてそこに対してのスタンプで付与させる方法と何かしらの投稿に対して後からRole付与用の投稿に変更する方法がある。

個人的には後者の運営投稿に対してスタンプ押下で権限付与の方がやりたいイメージに近かったのでそちらを採用。

利用したのはCarl-bot
ベースになる投稿をして、そのメッセージIDをコピー、以下のコマンドを実行

```
!rr add [channel] <msg_id> <emoji> <role>
```
【jQuery】append()にクソ長文字列を書くのをやめませんかみたいな話

### この記事の書き方はXSSできてしまうので危険です。
@tadsan**さんよりこのコードだとXSS攻撃されてしまうというご指摘を受けました。**
**こちらの記事のコードで実装するのは危険です。**
戒めのために取り消し線を付けて残しておきます。
タイトルのようなことがしたい場合[こちらのコメント](https://qiita.com/simoyama2323/items/1e93f9c242692c26166c#comment-8e165dfa21951934534d)のような実装をしてください。

### 環境
PHP 8.1
jQuery 3.6.1
PHPSTORM

### 本文

~~例えば要素Aを加工して同ページの要素Bにappend()するときこんなコード書いていませんか。~~

```html
    <div id="content_a">
        <p id="title">Hello</p>
        <p id="text">World</p>
        <p id="creat_dt">2022 0902 15:00</p>
    </div>
    
    <div id="content_b">
    </div>
    
    <script>
        const appendText = "<p>タイトル : " +  $('#title').text() + "</p>" + "<p>本文 : " + $('#text').text() + "</p>" + "<p>作成日 : " + $('#creat_dt').text() + "</p>";
        $('#content_b').append(appendText);
    </script>

```

![スクリーンショット 2022-09-02 19.18.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/855584/9b3f0038-b097-8d9d-5486-378d5c3bce63.png)

~~自分の場合、とりあえず表示できればいいやみたいな感覚でこんな書き方をしていました。~~
~~このテキスト量ならまだ良いですが、もっと長くなってくるととても書いていられません。~~
~~また、文字列で書いている都合上エディタの補完が効きづらく、見栄えもひどいです。~~

~~そんな問題をPHPとAjaxの力を借りて解決しようという話です。~~

~~テンプレートファイルを用意~~
~~こんな.phpファイルを用意しておきます。~~
```php:example.php
<p>タイトル : <?php echo $_POST['title'] ?></p>
<p>本文 : <?php echo $_POST['text'] ?></p>
<p>作成日 : <?php echo $_POST['create_dt'] ?></p>
```

~~View側のAjaxで上記example.phpファイルを叩きます。~~

```javascript
$(function appender() {
    $.ajax({
        url: '/example.php', 
        type: 'post',
        data: {
            'title': $('#title').text(),
            'text': $('#text').text(),
            'create_dt': $('#creat_dt').text()
        },
    })
        .done(function (response) {
            // responseの中身
            // <p>タイトル : Hello</p>
            // <p>本文 : World</p>
            // <p>作成日 : 2022 0902 15:00</p>
            $('#content_b').append(response);
        });
});
```

![スクリーンショット 2022-09-02 19.18.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/855584/9b3f0038-b097-8d9d-5486-378d5c3bce63.png)

~~AjaxのPOST通信で要素の配列を予め用意しているテンプレートに渡し、置換してもらったhtmlを受け取っています。~~
~~可読性も増しましたし、**何より再利用性がある。**~~

終わり
他のAWSサービスやエンドポイントサービスと接続

# VPCエンドポイント
**VPCエンドポイントとは、VPC内からVPC外へ接続するための、接続点を作るためのサービス。**
VPC内のサブネット同士は、直接通信することができる。そして、VPC同士も１つのネットワークのように繋げることができる。しかし、**VPCの外にあるサービスとVPCとは、インターネットゲートウェイを通り、インターネットを介して接続する必要がある**。
AWSのすべてのサービスがVPC内におけるわけではない。たとえは、S3やDynamoDBが挙げられる。ただ、AWSで作成しているのに、インターネット回線を介していては面倒でセキュリティ的にも不安である。
そこで、インターネットゲートウェイではなく、非VPCサービスとVPCを直結することができるのが、**エンドポイントサービス**。VPCの出口としてエンドポイントを設定することで、S3に直接接続できる。
インターフェースエンドポイントとゲートウェイエンドポイントの２種類がある。
# インターフェースエンドポイントとゲートウェイエンドポイント
VPCエンドポイントは、仮想的なサービス。
冗長性と高可用性を備えていて、自動的にスケールされるため、ネットワークトラフィックなどを考えなくて良いメリットがある。
エンドポイントには２種類あり、**インターフェイスエンドポイント**は、ネットワークインターフェイス(ENI)として構成するタイプ、**ゲートウェイエンドポイント**は、ルートテーブルに記載してルーティングするタイプ。
## インターフェースエンドポイント
プライベートIPアドレスを持つENIであり、そこから各種サービスに接続する出入り口になる。
AWS PrivateLinkという仕組みを使っているため、AWS以外の他社サービスでも、PrivateLinkに対応していれば使用できる。
## ゲートウェイエンドポイント
サービスのリージョン単位で、ルートテーブルに記載する方法。
一度設定したら、そのサービスの全体で使用できる。S3やDynamoDBはこの形式をとっている。
# VPCエンドポイントの料金
エンドポイントの料金は無料。
インターフェイスエンドポイントの場合、AWS PrivateLinkを使用するので、その分の料金がかかる。インターフェイスエンドポイントが設定されている限り料金がかかるが、削除すれば停止される。
## インターフェイスエンドポイントの料金
料金 = VPCエンドポイント１つあたりの使用量 + データ処理量
* VPCエンドポイント１つあたりの使用量
 VPCエンドポイント１つあたり、時間でPrivateLinkの料金がかかる
* データ処理量
データ処理量は処理データ1GBあたりの料金は0.01USドル程度。
M5Stack用超音波測距ユニット I2C（RCWL-9620）をATOM＆公式ライブラリで使う際のサンプルコード修正点

# はじめに
M5社の[ATOM Lite](URL"https://docs.m5stack.com/en/core/atom_lite") に [M5Stack用超音波測距ユニット I2C（RCWL-9620）](URL "https://docs.m5stack.com/en/unit/sonic.i2c")をつなぎ、[製品サイトからリンクされている公式のライブラリ](URL"https://github.com/m5stack/M5Unit-Sonic")を使い、その中にある[ATOM用サンプルコード](URL"https://github.com/m5stack/M5Unit-Sonic/blob/master/examples/Unit_SonicI2C_M5Atom/Unit_SonicI2C_M5Atom.ino")を使って動かそうとしたものの、どうしても正常に動かず。原因が分からず難儀しましたが、結局サンプルコードを一部修正することで、動くようになりました。※その後情報追記あり。

# 環境
* macOS Monterey バージョン12.5.1
* Arduino IDE 1.8.19（通常は下記 Visual Studio Code を使用していますが、問題の切り分けのために使用しました。今回はこの環境で検証してます。） 
* Visual Studio Code + PlatformIO（普段の開発環境＆現象を発見した環境）


# トラブルの内容
* そのまま動かしても、シリアルに何も流れてこない。
* サンプルコードでは20〜4000未満の数値しかシリアルに流れないようになってるのため、サンプルコードのif文を削除し、取得したデータ全てをシリアルに流すようにしたところ、どんな距離であっても「4500.00」のみを流してくる。 

# 修正点

[ATOM用のサンプルコード](URL"https://github.com/m5stack/M5Unit-Sonic/blob/master/examples/Unit_SonicI2C_M5Atom/Unit_SonicI2C_M5Atom.ino")内の22行目にある

```C
M5.begin(true, true, fasle);
```

のうち、
* ２つ目の引数「true」を「false」に
* 3つ目の引数「fasle」を「false」に（単純なスペルミス）

と修正、つまり・・

```C
M5.begin(true, false, false); 
```

と書き換えると、動作しました。

# 原因
今回いただいたアドバイスによると、

* M5.beginの2番目の引数はWireだが、trueだとSDA=25, SCL=21で初期化されてしまう（今回のセンサーをATOM LiteのGROVE互換端子経由で使う場合は、SDA=26, SCL=32）。
* sensor.begin()でもWireを使っている。

ためではないか、とのことでした。

ちなみに他の機種用のサンプルコードも確認しましたが、M5.begin()内で引数を指定しているのはATOM Lite用のみで、他は引数なしでした。

# その他
この問題を検証中に、Arduino IDEでコンパイルできない問題が出ましたが、検証前にたまたましていたOSをアップデートが理由でした。その解決には[こちらのサイト](URL"https://qiita.com/nishina555/items/e23d73067a5cac182a63")を参考にさせていただきました。

# 謝辞
今回の問題解決に際して、Facebookの「M5Stack User Group Japan」で多数のヒントやアドバイスをいただきました。ありがとうございました。

# ※追記（2024.8.10）
「読み出しのウエイトを50ms入れる」という対処法が書かれた記事がありました。手元では未検証です。
情報元：[UNIT ULTRASONIC-I2Cを使う](URL"https://hollyhockberry.hatenablog.com/entry/2022/06/21/215350") （[イナバちゃんログ](URL"https://hollyhockberry.hatenablog.com/")）
【SwiftUI】アプリ内でWebサイトを表示する方法

## はじめに
アプリ内でWebページを見せる

## 環境
Xcode 13.3.1



## Code



```swift: MainView
struct MainView: View {
    var body: some View {
        NavigationView{
            VStack(spacing: 30){
                NavigationLink(destination:
                                WebView(urlToLoad: "https://www.google.com")) {
                        Text("Google")
                            .foregroundColor(Color.white)
                            .padding()
                            .background(Color.blue)
                            .cornerRadius(20)
                    }
                
                NavigationLink(destination:
                                WebView(urlToLoad: "https://qiita.com/")){
                        Text("Qiita")
                            .foregroundColor(Color.white)
                            .padding()
                            .background(Color.green)
                            .cornerRadius(20)
                    }
            }
        }
    }
}
```


```swift: WebView
import WebKit

struct WebView: UIViewRepresentable {
    
    var urlToLoad : String
    
    func makeUIView(context: Context) -> WKWebView {
        
        guard let url = URL(string: self.urlToLoad) else {
            return WKWebView()
        }
        
        let webview = WKWebView()
        
        webview.load(URLRequest(url: url))
        
        
        return webview
    }
    
    func updateUIView(_ uiView: WKWebView, context: UIViewRepresentableContext<WebView>) {
        
    }
}
```
![Sep-02-2022 18-32-54.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/b9b085dd-08f4-a0c0-4e54-9f85e111a15b.gif)
Java：PDFファイルの結合方法

内容がより密接に関連しているが、PDF文書の複数のファイルに分割されている場合、我々は、コンテンツの我々の読み取りや文書の処理を容易にするために、PDF文書にマージすることができます。 この記事では、Javaプログラミングを使用して**PDFファイルを結合する方法**を紹介します。

## 【依存関係の追加】
この方法は、無償のFree Spire.Doc for Javaが必要ですので、先にjarファイルをインポートしてください。
### 1.	Maven
Maven を使用している場合、プロジェクトの pom.xml ファイルに以下のコードを追加することで、簡単にアプリケーションに JAR ファイルをインポートすることができます。
```XML
<repositories>
    <repository>
        <id>com.e-iceblue</id>
        <name>e-iceblue</name>
        <url>https://repo.e-iceblue.com/nexus/content/groups/public/</url>
    </repository>
</repositories>
<dependencies>
    <dependency>
        <groupId>e-iceblue</groupId>
        <artifactId>spire.doc.free</artifactId>
        <version>5.2.0</version>
    </dependency>
</dependencies>
```
### 2. 公式サイトよりJarファイルをダウンロード
まず、[Free Spire.Doc for Java](https://jp.e-iceblue.com/introduce/free-spire-pdf-for-java.html) の公式サイトよりzipファイルをダウンロードします。zipファイルを解凍し、libフォルダの下にあるSpire.Doc.jarファイルを依存関係としてプロジェクトにインポートしてください。
## 複数のPDFファイルを1つのPDFファイルに結合する
> PDF for Javaは **PdfDocument.mergeFiles()** メソッドを提供し、複数のPDFファイルを1つのPDFファイルに結合することができます。 

ここでは、PDFファイルの結合の詳細な手順について説明します。
- マージされるPDFファイルのパスを取得し、String配列に格納します。
- **PdfDocument.mergeFiles()** メソッドを使用して、これらのPDFファイルをマージします。
- **PdfDocumentBase.save()** メソッドを使用して、マージされたファイルを保存します。
**Java**
```Java
import com.spire.pdf.FileFormat;
import com.spire.pdf.PdfDocument;
import com.spire.pdf.PdfDocumentBase;

public class mergePDF {
    public static void main(String[] args) {

        //結合する PDF ファイルのパスを取得し、String 配列に格納する
        String[] files = new String[] {
                "C:/PDF/Sample1.pdf",
                "C:/PDF/Sample2.pdf",
                "C:/PDF/Sample3.pdf"};

        //これらのドキュメントを結合する
        PdfDocumentBase doc = PdfDocument.mergeFiles(files);

        //結合されたファイルを保存する
        doc.save("PDFファイルの結合.pdf", FileFormat.PDF);
    }
}
```
### 結合効果の表示
![2022-09-02_180145.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278784/bfd1ba3d-8fea-6db1-6241-2f1ddb534cd8.png)
### 【結語】
Spire.PDF for Javaは、文書操作に便利な機能を多数搭載しています。あなたの作業をより簡単にするためにお試しください。
【Laravel】条件によってバリデーションの内容を変更したい

# 実現したいこと
氏名・電話番号など入力項目が複数ある、入力フォームでデータベースの必須カラムの論理値によって、バリデーションルールを変更したい。

# テーブル構成
テーブルは以下のようになっており、カテゴリーテーブルの必須か否かでバリデーションチェックを行い、問題なければ、ユーザーテーブルへデータを保存します。

カテゴリーテーブル(categories)
| ID | name | required |
|:-:|:-:|:-:|
|　1　|　氏名　|　true　|
| 2 |性別|true|
| 3 |住所|true|
| 4 |電話番号|false|
| 5 |　メールアドレス　|false|

ユーザーテーブル(users)
| 　ID　|　name　|　gender　|　address　|　tel　|　email　|
|:-:|:-:|:-:|:-:|:-:|:-:|
| 　　|　　|　|　　|　　|　|

# 結論
バリデーションチェックは、Validatorで行いました。

Validatorについては以下のページを参考にさせていただきました。

https://qiita.com/gone0021/items/c613ef7e006b6f5d47ce


例として、以下では電話番号の場合のコードを記載しています。

```php:UserController.php
<?php
namespace App\Http\Controllers

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;

public function updateMember(Request $request)
{
    $rules = [];
    
    // カテゴリーテーブルから、nameが電話番号のデータを取得
    $tel = DB::table('categories')
        ->where('categories.name', '電話番号')
        ->first();
    
    // データがあり、かつrequiredがtrue　の場合のみ、 電話番号のバリデーションルールを追加
    if ($tel && $tel->required == true) {
        $rules['tel'] = 'required';
    }
    
    // バリデーションチェックを行う
    $validator = Validator::make($request->all(), $rules);
    
    if ($validator->fails()) {
        // バリデーションエラーの場合の処理
    }
}

```
【Flutter】非活性CupertinoTextFieldの色とマークを変える

## 導入
### これ作りたい
![スクリーンショット 2022-09-02 18.50.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633771/e849f448-5a66-de08-9026-9407f4430159.png)
### CupertinoTextFieldの特性
・入力の可不を設定できる
・入力できない時の色は基本的に変えられない
(↑今回はこれをゴリ押しで変える。)

・検索マークをつける

### 記事を書くきっかけ
・TextField押下時に違う画面に遷移させたい
・一発でできそうな方法が無かった
・iOSっぽく角丸で扱いたかった

## CupertinoTextFieldの色を変える

### 三層に分けて考える。
・そもそものベースのview
->CupertinoTextFieldを入れる色を決めるコンテナ
->CupertinoTextField

コンテナをCupertinoTextFieldでくり抜く(BlendMode.dstIn)
参考はこちら

https://qiita.com/ko2ic/items/77521e4344f3bd73d326

そうすると、
![スクリーンショット 2022-09-02 18.50.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633771/e849f448-5a66-de08-9026-9407f4430159.png)
にできる。

コード全文は以下。

``` dart
Material(
      shape: RoundedRectangleBorder(
        // そもそものviewを丸くする
        borderRadius: BorderRadius.circular(10),
      ),
      // 押下時にイベントを発生させるためにInkWellを使う
      child: InkWell(
        onTap: () {},
        // TextFieldを入れるコンテナを作成
        child: Container(
          decoration: BoxDecoration(
            // コンテナも同様に丸くする。
            borderRadius: BorderRadius.circular(10),
            // あたかも有効に見える色を設定する。
            color: Colors.gray,
          ),
          child: CupertinoTextField(
            readOnly: true,
            autofocus: false,
            enabled: false,
            decoration: BoxDecoration(
              // 丸くする。
              borderRadius: BorderRadius.circular(10),
              // くり抜くviewの色は無色にしておく
              color: Colors.transparent, // 背景色
              // コンテナと重なっている箇所だけ表示する。
              backgroundBlendMode: BlendMode.dstIn,
            ),
            prefix: Icon.search,
            placeholder: 'ここに入力してね',
          ),
        ),
      ),
    );
```

## まとめ

重ねたものに対して何かをするってのが簡単にできるのいいですね。
以下の記事にとても助けられました。

https://qiita.com/ko2ic/items/77521e4344f3bd73d326

## 最後に
iOSアプリ開発をしています。
主にSwiftですが、最近は熱が入ってきてFlutterも🦾
色々やってます。もし良かったら見てってください。

https://sogablog.net/
StoryBook(React)で配列をargsとして渡す

# はじめに

Storybookでmapを利用したコンポーネントを追加したのでまとめます
今後も何度も利用しそうな気がしています

# 問題

以下のようなセレクトボックスを作成しました

```tsx:SelectBox.tsx
      <Select
        placeholder="選択してください"
        onChange={(e) => handleAddrTypeChange(e)}
      >
        {collection.map((item, index) => (
          <option key={index} value={index + 1}>
            {item}
          </option>
        ))}
      </Select>
```

ここでは配列を受け取ってセレクトボックスの選択肢にすることができます
これをStoryBookで選択肢を設定できるように(配列の内容を変更できるように)したかったです


# 解決方法

以下のようにargsを渡すとうまくできました(collection)

```tsx:SelectBox.stories.tsx
export default {
  title: "atoms/SelectBox",
  component: SelectBox,
  args: {
    label: "ラベル",
    collection: [["選択肢1"], ["選択肢2"]],
  },
};

```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/7a25d439-bcdd-8846-6b7d-3f4087310797.png)

配列の内容を変えるときは以下のようにStoryBook上で追加ができます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/e40d5e1a-f7e7-be09-5bd2-23f4ebce8fca.png)

# おわりに

書き方が独特な感じがしますがうまくいってよかったです

# 参考

https://storybook.js.org/docs/react/essentials/controls
Visualforceタグに頼らずJS処理を共通化したい

## はじめに

20画面ほどで共通のJS処理を書くことになりました。  
共通化しないと保守性が大変なことになるので、共通化の方法を模索しました。

## 前提条件

- ```reRender```を使ってコントローラーで更新した変数をJS処理で使いたい

- 以下のようなVisualforceタグは使いたくない（※理由はボツ案にて）
    - ```apex:component```
    - ```apex:include```

## 使えた案

### ApexでJSのコードを作成し、JSの処理でscriptタグ化

例）
```
public String jsScript {get; private set;}
〜〜〜〜
this.jsScript = 'console.log(\\"test\\");';
this.jsScript += 'console.log(\\"test\\");';
```
```
<div id="script_div">
</div>
<script>
    const script = document.createElement("script");
    script.innerHTML = "{!jsScript}";

    const script_div = document.getElementById("script_div");
    script_div.appendChild(script);
</script>
```


## ボツ案

### ```apex:component```・```apex:include```などのVisualforceタグ

- 原因は分からないですが、複数アプリにて```apex:component```の```apex:attribute```を用いた場合、親ページの変数がコンポーネントに渡らないことが稀にありました
- ```apex:include```なども上述の現象が起こらないという確証は持てず、プロダクションコードに乗せるべきではないと判断し、候補から外れた次第です

### JSファイルを静的リソースに作成し、読み込む

- マージフィールドに入れている変数をJSの連想配列などに代入し、JS内にマージフィールドが無い状態を作ってからファイル化
- ```reRender```しても再描画されず、変数の値が更新されないのでボツ

### Apex内でscriptタグを作成し、出力

```
public String jsScript {get; private set;}  
〜〜〜〜
this.jsScript = '<script>console.log("test");</script>';  
```

- エスケープされるのでボツ

### カスタム表示ラベルにscriptタグを記述し、出力

- エスケープされるのでボツ

### カスタム表示ラベルにHTMLタグ・scriptタグを記述し、出力

- エスケープされるのでボツ
- 余談ですが、カスタム表示ラベルにHTMLタグは書けなくなったようです
	- [カスタム項目の表示ラベルの HTML の表示の無効化 (更新、適用済み)](https://help.salesforce.com/s/articleView?id=release-notes.rn_forcecom_fields_html_render.htm&type=5&release=230)

## 最後に

開発が終わるまでにもっとスマートな方法が出れば、追記します！

## 参考文献

[JavaScriptで動的にscriptタグを差し込んだり、実行する方法 | つかびーの技術日記](https://tech-blog.tsukaby.com/archives/894)
ReactのNavigateでパラメータ(引数)を渡して遷移先で参照する

# はじめに

Reactを使って新規ユーザー登録作成が成功してログインページに遷移した際にトーストを表示しようとしました
そこでいくつかつまづいたポイントがあったのでまとめます

# 問題

ユーザー登録を終えると`navigate`(react-router-dom)を利用してログイン画面に遷移する仕組みを作りました
ユーザー登録からログイン画面に遷移したときに`登録しました`というトーストをだすため、`navigate`にパラメータを持たせようとしました

以下の記事を参考にやったのですがエラーになりました

https://fintan-contents.github.io/mobile-app-crib-notes/react-native/learn/advance/react-navigation-param/

# 解決方法

記事で使っていたのは`useNavigation()`で利用していたのは`react-router-dom`の`useNavigate()`でした
なので以下のように`state`というハッシュの中に設定することで引数を渡すことができました

```tsx:useSignUp.tsx
            navigation("/sign_in", {
              state: {
                toast: { status: "success", message: "登録しました" },
              },
            });
```

受け取りは`useEffect`でレンダー時に1回だけ実行するようにします
React18ではuseEffectが`2回`実行されるので(2回トーストがでる)`useRef`を利用して1回だけ実行するようにしました

```tsx:Login.tsx
  useEffect(() => {
    if (didLogRef.current === false) {
      const state = location.state as ToastData;
      if (state.toast !== undefined) {
        toaster(state.toast.message, state.toast.status);
      }
      didLogRef.current = true;
    }
  }, []);
```



# おわりに

これがはじめてのuseRefの利用でした
メッセージをだすのに重宝しそうですが記事があまりなかったので役立てばと思います

# 参考

https://fintan-contents.github.io/mobile-app-crib-notes/react-native/learn/advance/react-navigation-param/

https://zenn.dev/horisan/articles/2aeaf0bd3fb70f

https://www.sunapro.com/react18-strict-mode/#index_id5
セキュリティグループとネットワークACL

# セキュリティグループとネットワークACL
VPCの仮想ファイアウォールとして、**セキュリティグループとネットワークACLがある**。ファイアウォールとは、ネットワークへのデータの出入りをコントロールする仕組み。
セキュリティグループとネットワークACLは、インバウンドトラフィック（データが入ること）とアウトバウンドトラフィック（データが出ること）をコントロールする。必ず両方、何かしらの設定が必要なので、明示的に設定しない場合は、デフォルトの設定が適用される。
**セキュリティグループとネットワークACLの特徴**
|項目|セキュリティグループ|ネットワークACL|
|-|-|-|
|動作の範囲|インスタンスに対して動作する(最大５つのセキュリティグループを割り当てが可能)|サブネットに対して動作する|
|ルール|ルールの許可のみ|ルールの許可の拒否|
|動作|ステートフル (ルールに関係がなく、返されたトラフィックが自動的に許可される)|ステートレス (返されたトラフィックはルールによって毎時的に許可される)|
|ルールの適用順序|すべてのルールを確認して、トラフィックの可/不可を決める|順番にルールを処理しながらトラフィックの可/不可を決める|

両者の違いは動作するレベルと許可の範囲。
特に大きいのは、**ネットワークACLは、サブネット単位で動作するので、ここのインスタンスに設定する必要がない点。**
万が一インスタンスにセキュリティグループを設定し忘れても、ネットワークACLで対応できる。
**１つのネットワークACLは複数のサブネットに紐付けることはできるが、１つのサブネットに複数のネットワークACLを紐付けることはできない**。
ネットワークACLを設定済みのサブネットに新たなネットワークACLを設定すると、上書きされる。
# vインバウンドとアウトバウンドの設定とウェルノウンポート
トラフィックは、インバウンドとアウトバウンドそれぞれに対し、ポート単位で許可・不許可を設定する。ポートは'25','80'などのポート番号で指定する。
**ポートとは「通信の口」のこと**。Web、メール、FTPなどサーバー上で何かのデーモン(サービス)が動いているときには、そのサービスに対応したポートが待ち受けている状態になっている。
サービスごとに**良く使われているポート**(well-known ports)の番号が決まっていて、特殊な事情がない限りそのポートを使う。
デフォルトの設定では、セキュリティグループはインバウンドを不許可、アウトバウンドを許可していて、ネットワークACLは両方許可をしている。そこから、必要に応じて、セキュリティグループの必要なポートだけを開ける設定が一般的。
## 主なポート番号(ウェルノウンポート)
|ポート番号|サービス|内容|
|-|-|-|
|25|SMTP|メールの送信|
|110|POP3|メールの受信|
|143|IMAP4|メールの受信|
|80|HTTP|Webの送受信|
|443|HTTPS|Webの送受信|
|22|SSH|SSHでの通信|
|1433|SQL Server|データベースの通信|
|1521|Oracle Database|データベースの通信|
|3306|MySQL|データベースの通信|
|5432|PostgreSQL|データベースの通信|
|20と21|FTP|ファイル転送での通信(AWSでは使用することが少ない)|
|53|DNS|ドメイン管理での通信(AWSでは使用することが少ない)|
|3389|RDP|リモートデスクトップでの通信|
|32768-65535|AWSの場合のアウトバウンド応答||

# 余談
## デーモンとは
パソコンの電源が入っているときに、常に動き続けてるソフトウェアのこと。
このように常駐するソフトウェアのことをUNIX系のOSでは「デーモン」、Windowsでは「サービス」という。WordやExcelのようなソフトウェアはデーモンと言わない。
【JavaScript】配列の要素を1つの文字列に連結する方法

メモです。

`join()`メソッドを使用すると
配列の全要素を順に連結した文字列を新たに作成して返す。


```
const array = ['aaa', 'bbb', 'ccc'];

array.join() // "aaa,bbb,ccc";
array.join('') // "aaabbbccc";
array.join('-') // "aaa-bbb-ccc";
```
`array.length` が `0`だった場合、空の文字列が返される。

`&`で連結すると、クエリパラメータを渡す時に便利。
```
　// フォームからの入力などが以下だったとして
　const year = '2022';
　const month = '09';
　const date = '02';
　const page = '1';
　const limit = '30';

　const baseUrl = '/api/v1/data_export/export_csv';

  const queries =[
    'year='+ year,
    'month='+ month,
    'date='+ date,
    'page='+ page,
    'limit='+ limit
  ];
  const href = baseUrl + '?' + queries.join('&');
```

コメント欄にて、URLオブジェクトを生成して書く方法を教えていただきました！
ありがとうございます。

参考：
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join`
【初投稿・初個人開発】引越時のタスクを管理するアプリ「引越サポート」を作りました。

# はじめに
ご覧いただきありがとうございます。@yk___3110と申します。

突然ですが、皆さん「引越」の経験はありますか。
私は過去2回の引越をしたのですが、その際に下記のように思いました。

・いつまでに、何をやったらいいか分からない
・何をやるべきか調べることが面倒
・物件選びや荷造り以外にも、やることが多い

引越時に、いつまでに何をやるべきかを、一目で確認できるアプリがあれば便利だと思い、このアプリを作成しました。

オリジナルアプリケーション「引越サポート」
https://enigmatic-springs-57135.herokuapp.com/

# 使用環境
* Ruby 3.0.1
* Rails 6.0.3
* PostgreSQL 14.4

# アプリの主な機能
### 引越予定日の設定機能
  アカウント登録後、引越予定日を設定する画面に遷移します。ここで引越予定日を設定します。
![スクリーンショット 2022-09-02 17.47.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2683208/5073a518-670d-7918-d9aa-cccb2dbf32b8.png)

### マイページの表示機能
  引越予定日の設定後、マイページが表示され、ログイン時の日付と引越予定日までの残日数を確認できます。また、引越予定日の編集や、タスク一覧の確認、タスクの登録が可能となります。
![スクリーンショット 2022-09-02 17.55.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2683208/fc3fe839-8b5f-5c79-594e-d905bb1eec00.png)


### タスクの一覧表示機能
引越に最低限必要なタスクが自動で作成されるため、必要な準備が一目で分かります。
またこの一覧画面で、引越予定日と予定日から逆算したタスクの目安期日が確認できます。
![スクリーンショット 2022-09-02 18.02.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2683208/7cae2a1a-7fd1-9194-ad39-5e6433be581a.png)

### タスクの詳細表示機能
各タスクの🔍ボタンを押すと、注意事項やポイントを見ることができます。
また外部リンクのページで、よりタスクの詳細についての確認が可能です。
(詳細ページ内に、メモを残すことも可能です。)
![スクリーンショット 2022-09-02 18.04.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2683208/9145e174-6205-535a-7651-e86568818ab4.png)

### タスク登録機能
オリジナルのタスクを作成し、登録することも可能です。
![スクリーンショット 2022-09-02 18.11.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2683208/7b7b07fb-513c-3e29-65ac-4a29b6a8443a.png)

### タスクのチェック機能
完了したタスクをチェックすることで、進捗を管理することができます。
![スクリーンショット 2022-09-02 18.12.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2683208/aa6c633f-f06c-d9b9-07bf-015e9eb550a1.png)

### タスクの並べ替え機能
↑↓ボタンを活用することで、目安期日内での並べ替えが可能です。
（タスクのチェック機能で添付している画像より、上から2つのタスクを並べ替えています）
![スクリーンショット 2022-09-02 18.13.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2683208/b042a49d-a5df-3556-b8f6-3886f5f4b232.png)

# 今後改善したいこと
* 引越ごとのタスク管理機能 
  現行は1回の引越のタスク管理のみになっているため、 アプリ登録時とは別の引越のタスクも管理できるようにします。

* 引越ごとの質問機能
  引越日の入力と合わせて質問を設定し、その回答によって、 一覧で表示されるタスクが変更されるようにします。 一覧のタスクを極力減らし、見やすくしたいと思います。

# 終わりに
より使いやすいアプリを目指し、今後も改善を続けていきたいと思っております。
最後までご覧いただきありがとうございました。
[Rails]"_"でのwhere検索

## 概要
データを更新する処理を行なった際に、
検索条件に"_"が入ることで予期せぬデータを書き換えてしまいました。

## 問題となったコード
Brandテーブルのnameカラムが"_"のものだけ、"ユニクロ"に変更したいというコードです。
```ruby
Brand.where("name LIKE?", "_").update_all(name: "ユニクロ")
```

## どこが間違っているか

`Brand.where("name LIKE?", "_")`で検索すると、
"_"のものだけではなく、
数字1文字のものや、漢字1文字のものなどにもヒットしてしまいます！

## 理由
- [Railsガイド](https://railsguides.jp/active_record_querying.html#:~:text=%E5%BC%95%E6%95%B0%E3%81%AFSQL%E3%82%A4%E3%83%B3%E3%82%B8%E3%82%A7%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E9%98%B2%E3%81%90%E3%81%9F%E3%82%81%E3%81%AB%E8%87%AA%E5%8B%95%E7%9A%84%E3%81%AB%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%81%8C%E3%80%81SQL%20LIKE%E3%83%AF%E3%82%A4%E3%83%AB%E3%83%89%E3%82%AB%E3%83%BC%E3%83%89%EF%BC%88%E3%81%A4%E3%81%BE%E3%82%8A%E3%80%81%25%E3%81%A8_%EF%BC%89%E3%81%AF%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97%E3%81%95%E3%82%8C%E3%81%BE%E3%81%9B%E3%82%93)に

> SQL LIKEワイルドカード（つまり、%と_）はエスケープされません

とあるように、
検索条件の`_` は任意の1文字全てにヒットしてしまうからです。

## 対策
`sanitize_sql_like`を使用して、

引数のワイルドカード文字をエスケープしましょう。
```ruby
Brand.where("name LIKE?", Brand.sanitize_sql_like("_"))
```
												
これで、nameカラムが"_"のものだけがヒットします。

## 追記(上で色々書いたけど以下がbetter！)
コメントでもご指摘いただいたのですが、
今回の要件である、
> Brandテーブルのnameカラムが"_"のものだけ、"ユニクロ"に変更したい

を実装するには、以下のようなコードがシンプルかつ安全であると思います。
```ruby
Brand.where(name: "_").update_all(name: "ユニクロ")
```
React(TypeScript)でAxiosを使ってエラーのレスポンスを受け取りたい

# はじめに

Axiosを利用していて、正常レスポンスの中身を取得する操作はよくありますが、エラーのレスポンスからAPIで送ったエラーメッセージを取得する方法に時間をとられたのでまとめます

# 問題

新規ユーザー登録のAPIで重複したメールアドレスを登録すると以下のレスポンスを返すようにします

```
{
    "message": "登録済みのメールアドレスです",
    "status": 400,
    "error": "bad_request"
}
```

このエラーをAxiosの`catch`で取得したいです

```tsx:useAuth.tsx
    axios
      .get(ユーザー登録のAPIのURL)
      .then((res) => {
        if (res.data) {
          console.log(res.data);
          setLoading(false);
        } else {
          setLoading(false);
        }
      })
      .catch(() => {
        setLoading(false);
      });
```



# 解決方法

TypeScriptを入れているので上で返却値の型のinterfaceを作ります
そして`AxiosError`でレスポンスを取得してエラーを取得しました

```tsx:useAuth.tsx

interface ErrorData {
  message: string;
  status: number;
  error: string;
}

(省略)

        .catch((e: AxiosError<ErrorData>) => {
          if (e.response === undefined) {
            console.log(new Error("データ取得に失敗しました"));
            toaster("データ取得に失敗しました", "error");
            return;
          }

          setLoading(false);
          console.log(new Error("登録済みのメールアドレスです"));
          toaster(e.response.data.message, "error");
        });
```

エラーの内容をトーストで表示するために以下のコードを書いています

```
toaster(e.response.data.message, "error");
```

# おわりに

型推論でうまくいってしまっている箇所が多いため、TypeScriptにまだ慣れていない気がします
このような型を設定する場面になるとどうすればよいかとなってしまうので復習が必要そうです

# 参考

https://qiita.com/keyakko/items/ec536545d2faa9cabc84
AI生成画像とpromptのギャラリー（画像掲示板）を作ってみた話

## 作ったもの

https://ai-prompt-forum.web.app/

## はじめに
- 画像生成AIの描いた絵が美術品評会で1位を取るなど何かと話題になっており、AIの思考を人間が助ける「プロンプトエンジニアリング」という議論もなされている昨今  
AIはとても優れていますが、全てを自動でやってくれるわけではなく、人間がAIに対して指示(prompt)を出す必要があります  
なので、今後重要になってくるであろう「prompt」に関しての情報収集とアウトプットのために、このサービスの計画をしました

## 何故作ったか
- 作った画像とpromptを紐づけて管理したかった（ファイル名にpromptを設定するのは長すぎて不可、エクセル管理もダサい。。。）
- どうせなら誰でも投稿できるようにしようかなと

## 技術スタック
- フロント
    - Vue
    - TailWind CSS
- BaaS
    - Firebase Storage
    - Supabase DB


##  今後の課題
- Stable Diffusion以外の対応（Midjourney、DALL·E 2）
- 各投稿に投稿者のコメント及び、閲覧者のコメントを書けるようにする
- 会員登録機能の実装
Nuxt3 server/api で、fetchして得た画像をレスポンスする

めちゃくちゃハマってしまった。解決したので残しておく

# 前提条件

- Nuxt .. v3.0.0-rc.6
- nitropack .. v0.4.12
- h3 .. v0.7.13
- ohmyfetch .. v0.4.18

#　結論

以下のようにかけばOKだった

```ts:server/api/image/[imageId].get.ts
import { send } from 'h3'

export default defineEventHandler(async (event) => {
  const { imageId } = event.context['params']

  const blob: Blob = await $fetch(`/external/api/images/${imageId}`, {
    method: 'get',
    responseType: 'blob'
  })

  await send(event, Buffer.from(Buffer.from(await blob.arrayBuffer())), blob.type)
})
```

# 勘所

## $fetch は responseType によって返却する型が変わる

nuxt3 の server api にて、 $fetch は ohmyfetch のラップ関数となっている

nuxt によって型が上書きされてしまっているので、把握しづらかったが、

ohmyfetch 側の型定義を見てみると,

```ts:ohmyfetch:v0.4.18

interface ResponseMap {
    blob: Blob;
    text: string;
    arrayBuffer: ArrayBuffer;
}
declare type ResponseType = keyof ResponseMap | 'json';
declare type MappedType<R extends ResponseType, JsonType = any> = R extends keyof ResponseMap ? ResponseMap[R] : JsonType;

// ...

interface $Fetch {
    <T = any, R extends ResponseType = 'json'>(request: FetchRequest, opts?: FetchOptions<R>): Promise<MappedType<R, T>>;
    raw<T = any, R extends ResponseType = 'json'>(request: FetchRequest, opts?: FetchOptions<R>): Promise<FetchResponse<MappedType<R, T>>>;
    create(defaults: FetchOptions): $Fetch;
}
```

となっており、

つまり、 `responseType` が `blob`, `text`, `arrayBuffer` なら、
それぞれ `Blob`, `string`, `Arraybuffer` が返却するデータの型になるのがわかる。

## return せず send する

defineEventHandler の引数に指定した関数の返り値は、 nitro サーバ側で h3 モジュールの send を呼んでいる。

また、既に send 済みであれば、それをレスポンスデータとして扱ってくれる。

そのため、　レスポンスデータを return せずに、 直接 send すればよかった。


ちなみに、 nitro サーバのロジックを見た感じ、 text と json 以外のレスポンスデータを return するケースが想定されていなかった
Node.js+Expressのサービスをrender.comでデプロイしようとしたらちょっとハマった話

# はじめに
私は,文化祭に向けて音ゲーを作っており,ゲーム本編は動作したのであとはデプロイして展示するだけだったのだが...
事件は起こる。そうだ,**Heroku無料枠廃止**である。今すぐにというわけでは無いものの,文化祭終了後にオープンベータとして一般公開することを考えていたので,とりあえず無料枠が使えそうなPaaSを...と探していたら見つけたのが,そう,[render](https://render.com)である。

# とりまデプロイ
### 某日深夜2時
これで出展できるぞ～！あとはデプロイだけや！
まずプルリク立ててmasterブランチにマージしとこ...
んじゃデプロイするか...
### 1時間後...
あー何回やってもデプロイできひんやんけ！どうなっとるんや！
(renderに関する情報を探すも,Node.js+Expressに関する日本語情報は少ない。かと言って深夜三時。英語読む気になれへん)
取り敢えず寝よ...今日劇のリハあんねんな...

### 前日
リハ終わったし展示のセッティングするか...それにしても暑いな...
おっと,その前にもう一回試すか(ここで学校のPCからrenderで再デプロイを試す)
うーん...(デプロイできない)
(1時間後,もともと使用していた[repl.it](https://replit.com)で走らせ,その日は帰る)

### 当日
あー劇も全力でやり切れたし,他のクラスの劇も楽しかったな～
有志の部もかっこよかったし()
ところでもう時間無いな,展示は後日回るんかな()

### 帰宅後
泣きのもう一回やるか...やっぱダメか...
(ここでひらめく)もしかしてPortが問題ちゃうか？

# 解決策
```diff_typescript:main.ts
//...略
- const port: number = 3000;
+ const port: number = Number(!!process.env.PORT) || 3000;
//...略
```
これだけでした！
とっても簡単！
ちなみにprocess.env.PORTの前に何故!!をつけるかというのは,PORTがundefinedの場合,変換されるとNaNになりますが，!!をつけると0になります(多分booleanになるんじゃないかな)。暗黙の型変換，賢い。

でも...もう週末だしPCはセッティング済みだしパワポは旧リンク貼ってるし....

まだ闘いに終わった訳では無いのだ。

### 追記
デプロイしたあとのログを確認するとPort10000でした。最初からこっち使ってもいいかもね。

おしまい
リストアを行ったWindowsサーバーにて、ネットワークレベル認証(NLA)エラーが発生。根本的解決方法。

2022年9月2日時点

※注意：本記事はWindowsサーバーリストア時のエラーの解消方法となります。


>「接続しようとしているリモートコンピューターには、ネットワークレベル認証（NLA）が必要ですが、お使いのWindowsのドメインコントローラーに接続してNLAを実行することができません。」


クラウド環境でのリストアテスト実施時に上記のエラー文が発生し、特定のユーザ（ドメインユーザ）にて仮想サーバへログインできなくなりました。
バックアップソフトはVeeamを利用しております。
まずは調べた結果と原因と根本的な解決をまとめます。

# 前提
まず、初期条件として、リストア後に下記の作業を行っているものとし、下記の設定が問題なく行われているとします。
DNSの設定、ルーティングの設定、再起動
※上記の設定が不安な場合は他のサイトをご参考ください。
また本手順ではローカルアカウントよりログインが可能なことを条件としております。

# エラーの原因
リストア時にエラーが起きた場合に考えられる原因が、Windows サーバーの認証の違いです。
ADサーバーと各サーバーは一週間スパンで通信を行っており、そこで認証を最新化しています。
そのため、エラーの原因はリストアを行う前に認証が最新化されている状態で、リストア前のデータが最新化されていない状態であることが多いです。
そのため、ドメインが有効にすることができない状態が起こります。

# 対処方法
ドメインの再登録をする必要があります。
ローカルユーザにてログインし、一度WORKGROUPに所属します。
その後、再起動を行い、もう一度ドメイン参加させます。

# 手順
①エクスプローラーのPCを右クリックしプロパティを開く
<img width="400" alt="画像4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2706435/16561b75-b7fd-3b00-c539-4a172958d568.png">


②画面右の「システムの詳細設定」を開く
![画像3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2706435/12718a28-ca1b-30a6-6b49-f41edc5b4d78.png)


③コンピューター名タブの「変更」をクリック
<img width="400" alt="画像2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2706435/2d45b946-a006-2533-1a11-2d13a2843939.png">


④所属するグループにワークグループを選択し、「WORKGROUP」と入力
<img width="400" alt="画像1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2706435/529096d0-f179-0df3-10ef-5e46859b9430.png">


⑤ポップアップにOKを押し、再起動を行う
再びローカルユーザーにてログインし、サーバーマネージャーにてWORKGROUPに所属していることを確認する



# まとめ
他の方法にネットワークレベル認証の構成の[コンピューターの接続にネットワーク レベル認証の使用を求める(推奨)]のチェックを外すというものがあり、エラー文で検索したときにその解決方法がズラッとでてきます。
しかし、私と同じ状況である場合は根本的解決にならない場合が多いので、上記解決法を記載しました。
swiftの累乗計算(pow)

カメラアプリを作成中、
ISO感度の上下限が端末に乗ってるカメラによってバラバラなことが判明。

特定の数値内でキリのいい数字(2の累乗)の値が欲しくなった。

多くのサイトでは`pow(_:_:)`を使うことを勧めているが、
こいつは戻り値がDecimalでFloatに型変換するのはちょっとめんどくさい。(っぽい)
[pow(_:_:) | Apple Developer Documentation](https://developer.apple.com/documentation/foundation/1779833-pow)



なぜかドキュメントは見つからなかったが、powlとpowfがあるのを確認。
```swift
powf(Float, Float)-> Float

powl(Double, Double)-> Double
```
こちらを使えば、FloatとDoubleで取得することが可能だった。


iOS15以上限定だけど、formatted()を使うとIntなどの型に変換することもできる。
```swift
let pow = pow(2, 2.0)

if #available(iOS 15.0, *) {
	let IntPow = pow.formatted(.number)
} else {
	// Fallback on earlier versions
}

```


今回はバージョン範囲の問題で目的と合わなかった為、使わなかった。
最終的に使用したISO感度を2の累乗で取得するコード
```swift
guard let minISO:Float = 33.0
guard let maxISO:Float = 3034.0

let startLog =  log2(Float(minISO))
let startExponent = Int(ceil(startLog))
let endLog =  log2(Float(maxISO))
let endExponent = Int(floor(endLog))

var indexedISOList = [String]()
for i in startExponent...endExponent {
	// minISO<x<maxISOの範囲で2の累乗を求める
	let settingIsoVal = powf(2, Float(i))
	print(settingIsoVal)
}

// 64
// 128
// 256
// 512
// 1024
// 2048
```
jQueryでセレクトボックスの値に応じて表示を変更する

# 今回の完成形
こちらのようにセレクトボックスで3を選択した場合のみリンクを表示する実装をしていきます。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="eYrYdJd" data-user="katao_eng" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/katao_eng/pen/eYrYdJd">
  Untitled</a> (<a href="https://codepen.io/katao_eng">@katao_eng</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
「えっ、今更jQueryキャッチアップするん？」

という声が聞こえてくるような気もしますが、業務で使用することがあるのでキャッチアップしていきます。

# セレクトボックスの作成
HTMLでセレクトボックスを作成します。
```html:sample.html
  <p>3を選択した時だけリンクを表示</p>

  <select name="select" id="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <div id="link">
    <a href="https://qiita.com/">3の時だけ表示するリンク</a>
  </div>
```
この状態では常にリンクが表示されている状態なので、CSSで`display:none`を指定します。
```css:sample.css
#link {
  display: none;
}
```
# jQueryで関数を定義
```js:sample.js
$(document).ready(function() {
  if ($('#select option:selected').text() === '3') {
    $('#link').show();
  }
  $('#select').on('change', function () {
    if ($('#select option:selected').text() === '3') {
      $('#link').show();
    } else {
      $('#link').hide();
    }
  });
});
```
セレクトボックスで選択されている値は`option:selected`で取得します。

最初のif文では、初期表示が3だった場合にリンクを表示するために記載しています。
```js
  if ($('#select option:selected').text() === '3') {
    $('#link').show();
  }
```
（~~本当はセレクトボックスで選択した値をcookieに保存して、再度アクセスした際に前回選択した値を初期表示にしたかったのですが、cookieの保存がうまくできませんでした...~~ cookieの保存ができなかったのはローカルファイルで試していたからで、サーバーにアップしていなかったからでした。）
[セレクトボックスの作成](#セレクトボックスの作成)には記載していませんが、[今回の完成形](#今回の完成形)で実装したものは初期表示が3で表示されるようにvalue="3"のoptionタグに`selected`を指定してます。
```js
$('#select').on('change', function () {});
```
セレクトボックスで値が変更される都度、こちらの関数が実行されます。

# 最後に
正直もっと良い実装ができるんじゃないかと思っているのですが、今できるのはこの程度です。
```js
  if ($('#select option:selected').text() === '3') {
    $('#link').show();
  }
```
特に、jQueryの最初のif文で初期表示が3だった場合のところですが、もっと良い書き方あるんじゃないのかなあと思っています。
指摘やアドバイスなどいただけると幸いです。
~~JavaScriptでもjQueryでもcookieが保存できなかったことも課題なので、その辺りのキャッチアップも進めていこうと思います。~~
とりまMecabで形態素解析を行いたい方へ。

## 初めに
Mecabって結構インストールが複雑？分かりにくくて多少苦労しました。
それらしいサイトを探っても前置きや広告で分かりにくかったり。

今回はとにかく使いたい方に<font color="red">サクッ</font>とコードをシェア致します。

### 環境 colab windows 2022/9/2 

## コード


```python
# パターン①
! pip install mecab
! pip install unidic-lite
import MeCab
```
これでいかがでしたか？偶にエラーになります。その場合はパターン②で


```python
# パターン②
!apt install aptitude
!aptitude install mecab libmecab-dev mecab-ipadic-utf8 git make curl xz-utils file -y
!pip install mecab-python3==0.7
```
その後に

```python
import MeCab
# pip とimportは別のセルに分けた方が良いかもしれません。
```


例題

```python
text = "私は昨日カレーライスを食べました"
tagger = MeCab.Tagger() 
print(tagger.parse(text))
```
この出力結果で形態素解析された文言が出力されるはずです。

## 終わりに
内容も少ないのでサクッと。記事を終わらせます。

パターン①について
- メカブmoduleインポート`! pip install mecab`
- 辞書moduleのインポート`! pip install unidic-lite`
- メカブのインポート`import MeCab`

辞書のチョイスについてはまだ調査の余地があるようです。
`tagger = MeCab.Tagger("unidic-lite")` でも実行できます。
おそらくインポートした辞書がデフォルトで格納される。と都合よく解釈していおります。

パターン②について

https://qiita.com/pytry3g/items/897ae738b8fbd3ae7893
こっちは2022年現在確認取れました。

### 追伸
あるcolabでは①が無事実行されたのですが、別のcolabでは①はエラーになってしまいました。同じcolabなのに何故？分かりませんが、colabはブラックボックスになっている部分も多いのであまり考えないようにしています。
このような<font color="red">colab間でも差異</font>がある。という事だけ覚えて教訓にしました。

本日(9/3)にMecabにて詰まりました。上記のコードでインストールそのものは問題ないのですが、形態素解析等進めていくとコードエラーになってしまう現象です。
(エラー名は後で更新します。)。色々模索したのですが、納得できる結果が得られず現在はJanomeを使用しております。記事を書いておいてそれすらできないとは,,,正直恥ずかしいです。
AWS認定資格　AWS Certified Solutions Architect – Associate（SAA）に合格しました

AWSを仕事で利用し始めて約1年になりました。
資格試験の勉強は嫌いですが、今後もAWSを使って仕事をしていきたいので、自己研鑽のために資格取得を目指すようになりました。

勉強期間：約2か月間

以下の３つを教材を使って勉強しました。

１．最強WEB問題集 AWS認定ソリューションアーキテクト - Ping-t
https://ping-t.com/modules/bulletin/index.php?page=article&storyid=850

２．【2022年版】これだけでOK！ AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座
https://www.udemy.com/course/aws-associate/

３．【2022年版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）
https://www.udemy.com/course/aws-knan/

→まずは試験に慣れてみよう！ということで、
いきなり３のUdemyの模試から解き始め、２週間くらいひたすら模試を解きましたが
問題の回答を見てもあまり理解できない問題ばかりでした( ；∀；)
（今思うとUdemyの模試は本番の試験よりも若干難しいと感じます）。

ひたすら模試を解いて答えの丸暗記をしても意味がないことに気づき、
１（Ping-t）と２（Udemy講義）の教材を中心に改めて基礎から勉強し直しました。
１（Ping-t）の練習問題は基本問題と応用問題が7:3くらいの割合で基礎固めにはとても有用でした。
１（Ping-t）の問題を毎日解いていると1か月でコンスタントに点数が８～９割取れるようになりました。
また、１（Ping-t）で解いた問題の解説を見てもよく分からない項目は２（Udemy講義）で勉強しなおしました。
最後の１週間で３のUdemyの模試を解くと、7～8割ぐらいの点数が取れるようになりました。

実際の試験を受けてみた感想ですが、
あまり受験者を迷わせるような引っ掛けの選択肢は少なったように思います。
以下のサービスに関する問題が多く出題された印象です（必ず以下の問題が出るわけではないのでご参考まで）。

EC2　autoscaling group
RDS　
SQS
ECS・EKS

実際の点数は約800/1,000点（720点以上で合格）でした。
Django初心者がSNSアプリを作る　その4

前回 https://qiita.com/YuDachi/items/e5513b17843bb22a1689
元記事 https://note.com/saito_pythonista/n/n6550f5c2a07b

前回は投稿一覧/詳細ページのイメージを作成した。今回は引き続き投稿作成/削除画面を作成する。
イメージまで作成しようと思ったが、元記事の完成形を見る限り今作成する必要は無さそうだったので、ページの表示のみを目標にする。
やることは前回までと同じなので、細かな説明はしない。おおまかな流れとしては、

- htmlファイルを作成
- htmlファイルに対応するviewを、views.pyに記述
- viewに対応するURLを、urls.pyに記述
- ページが表示されるか確認

確認するためのリンクを設置するのを忘れてたので、createボタンはlist.htmlに、deleteボタンはdetail.htmlに配置することにした。

# views.py

```views.py
# 追加
class CreateView(TemplateView):
    template_name = "create.html"
# 追加
class DeleteView(TemplateView):
    template_name = "delete.html"
```

# urls.py

```urls.py
urlpatterns = [
    path('', Home.as_view(), name='home'),
    path('detail1', DetailView.as_view(), name='detail1'),
    path('create', CreateView.as_view(), name='create'), #追加
    path('delete', DeleteView.as_view(), name='delete'), #追加
]
```

# list.html
```list.html
<div class="container">
    <div class="tweet">
        ---(中略)---
    </div>
    <div class="tweet">
        ---(中略)---
    </div>
    # 追加
    <a href="./create" class="create">ツイート作成</a>
</div>
```
# detail.html

```detail.html
<div class="container">
    <h1>THIS IS DETAIL</h1>
    <div class="tweet">
        ---(中略)---
    </div>
    # 追加
    <a href="./delete" class="delete">削除</a>
</div>
```

これで、内容はともかく必要なページの表示が完了した。
ちょっと短いが今回はここで一区切りで、次回からモデル周りの実装に移っていく予定。

作りながらやっているので分量がバラバラだったり、コードの載せ忘れ(特にCSSとか)が多そうなので、完走したら読みやすくしたものを書きたいという気持ち。