OmniAICreator/Qiita-1.07M huggingface dataset:
jQuery 属性系メソッド

# attr
指定した要素の属性値を取得または設定する．
**取得する場合**
```javascript
//基本形
var elementAttribute = $('selector').attr('attribute');

//例
var id = $('p').attr('id');
```
**設定する場合**
```javascript
//基本形
$('selector').attr('attribute','value');

//例
$('p').attr('id','example');
```
* <font color="DarkTurquoise">`selector`</font>：属性の値を取得または設定する要素を指定する．
* <font color="DarkTurquoise">`attribute`</font>：取得または設定した属性名を指定する．
* <font color="DarkTurquoise">`value`</font>：属性に設定する値を指定する．

# removeAttr
要素から指定した属性を削除する．
```javascript
//基本形
$('selector').removeAttr('attribute');

//例
$('p').removeAttr('id')  // pタグの要素にid属性を削除する．
```
- <font color="DarkTurquoise">`selector`</font>: 属性を削除する要素を指定する．
- <font color="DarkTurquoise">`attribute`</font>: 削除したい属性名を指定します．

# val
指定したフォーム要素(input，textarea，selectなど)のvalue値を取得または設定する．
**取得する場合**
```javascript
//基本形
var inputValue = $('selector').val();

//例
var inputValue = $('input').val();
console.log(inputValue);
```
**設定する場合**
```javascript
//基本形
$('selector').val(value);

//例
$('#input').val("Hello, World")  // 入力フォームに"HelloWorldを設定"
```
- <font color="DarkTurquoise">`selector`</font>: 値を取得または設定するフォーム要素を指定する．
- <font color="DarkTurquoise">`value`</font>: フォーム要素に設定する値を指定します．

# addClass
指定したクラスを要素に追加する．
```javascript
//基本形
$('selector').addClass('className');

//例
$('p').addClass('newClass'); //p要素にnewClassというクラス属性を追加する
```
- <font color="DarkTurquoise">`selector`</font>: クラスを追加する要素を指定する．
- <font color="DarkTurquoise">`className`</font>: 追加したいクラス名を指定する．複数のクラスを追加する場合はスペースで区切る．

### AttrとaddClassの違い
どちらも引数に追加したいクラスを指定することで，クラスの設定を行うことができるが，以下のような違いがある．
**`Attr`** →要素に設定されている元のクラスに置き換える
**`addClass`** →元のクラスを保持したまま追加する

#removeClass
指定したクラスを要素から削除する．
```javascript
//基本形
$('selector').removeClass('className');

//例
$('p').removeClass('old-Class'); //p要素のoldClassというクラスを削除する
```
- <font color="DarkTurquoise">`selector`</font>: クラスを削除する要素指定する．
- <font color="DarkTurquoise">`className`</font>: 削除したいクラス名を指定する．複数のクラスを削除する場合はスペースで区切る．

### removeAttrとremoveClassの違い
どちらも引数に削除したいクラス名を指定することで，要素からクラスの削除することができる．AttrとaddClassと同様の関係と同じように以下のような違いがある．
引数に削除したい
**`removeAttr`**：要素の全てのクラスを削除する．
**`removeClass`**:クラス名を指定することで，要素からそのクラスのみを削除する．

# hasClass
指定したクラスを要素が持っているかどうかをチェックする．
```javascript
//基本形
var isSelected = $('selector').hasClass('className');

//例
var isSelected = $('p').hasClass('example'); //p要素にexampleというクラスを持つか取得
console.log(isSelected); //結果を表示
```
- <font color="DarkTurquoise">`selector`</font>: クラスを持っているかどうかを判定する要素を指定する．
- <font color="DarkTurquoise">`className`</font>: 判定したいクラス名を指定する．

要素が指定したクラスを持っているかを真偽値で取得することができる．
持っていれば　→　true
持っていなければ　→　false

# toggleClass
指定したクラスが要素に存在する場合は削除し，存在しない場合は追加する．
```javascript
//指定した要素のクラスを切り替える．
$('selector').toggleClass('className');

//例
$('p').toggleClass('example');//p要素にexampleクラスがあれば削除，なければ追加
```
- <font color="DarkTurquoise">`selector`</font>: クラスのトグル動作を行う要素を指定する．
- <font color="DarkTurquoise">`className`</font>: トグルするクラス名を指定する．複数のクラスをトグルする場合はスペースで区切る．

toggle(トグル)とは，「同一の操作で２つの状態を交互に切り替えること」を意味する．
クラスの追加と削除を切り替えることができるため，CSSの切り替えに利用される
ChatGPTのデータオプトアウト / APIのデータオプトインのやりかた


## 対象者

- ChatGPTを使い倒したいけど入力データに気を使いながら使用している人
- APIを利用した場合にOpenAIのサービス改善に協力したい人
- 情報として知っておきたい人

## やり方

下記URLにアクセスする
https://help.openai.com/en/articles/5722486-how-your-data-is-used-to-improve-model-performance

ChatGPTまたは、APIに記載されているGoogleフォームから申請する。

ChatGPT: User Content Opt Out Request
API: OpenAI Data Sharing Opt In

メールアドレスとOrganization IDを入力して送信する。

ChatGPTの場合は、下記の手段もあります。
https://chat.openai.com/ にアクセス
Settings > Data controls > ｢Chat history & training｣ をOFFにする。

### Organization ID

Organization IDは下記方法で確認できます。

1. OpenAIにLog in
1. API
1. Manage account
1. Settings

![スクリーンショット 2023-07-10 092110.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553528/bef80007-8098-9471-d8eb-0e2a1a4af94c.png)

## 参考

- https://help.openai.com/en/articles/5722486-how-your-data-is-used-to-improve-model-performance
PytorchのDataLoaderから、画像ではなくラベルやパスのみを取り出したい

# はじめに
Pytorchを使った画像AIを構築する際、`torch.utils.data.DataLoader`により`batch_size`ごとにまとめられた画像データの呼び出しを行う。
ただ、学習中にどの画像がどれだけの回数使われたのかなど、調べたい場合などがある。
そこで今回、`torch.utils.data.DataLoader`から画像である`torch.tensor`ではなく、クラスのラベル並びに画像のパスを出力する方法について書く。

# 方法
クラスのラベル並びに画像のパスを取り出す`torch.utils.data.Dataset`を用意し、`torch.utils.data.DataLoader`に入れてあげればOK。
今回、`Dataset`には、それぞれの画像のパスとラベルが2次元の`list`で格納されているものを渡す場合を考える。
```python
list_data = [['path/to/img_0', 'label_0'],['path/to/img_1', 'label_1'], ...]
```
## `Dataset`を実装
`Dataset`は以下のように実装する。`torch.utils.data.Dataset`のクラスを引き継ぎ、画像のパスとラベルを返す。
ポイントは`__getitem__`メソッドの返り値で、何を返すように設定するかというところ。

画像を取り出して学習などに使う場合、`PIL.Image.open`から画像を開き、`resize`などの処理した画像を返り値として渡すが、それを行うと重くなり動作が遅くなる。以下の`Dataset`だと画像を扱わない分動作が軽くなるため、高速に色々と調べることが可能。

```python: utils.py
import torch.utils.data as data

class MyDataset_path_label(data.Dataset):
    def __init__(self, list_file, phase='train'):
        self.list_file = list_file
        self.phase = phase

    def __len__(self):
        # ファイル数を返す
        return len(self.list_file)

    def __getitem__(self, index):
        # 画像のパスを取得
        path_image = self.list_file[index][0]

        # ラベルを取得
        label_class = self.list_file[index][1]
        return path_image, label_class
```
## `DataLoader`を実装

`DataLoader`は以下のように実装する。上述の`MyDataset_path_label`は`utils.py`に保存しているものと仮定している。

```python
import torch.utils.data as data
from utils import MyDataset_path_label

dataset = MyDataset_path_label(list_file=list_data)

dataloader = data.DataLoader(dataset, batch_size=batch_size, shuffle=False)
```
`shuffle`は`True`でも良いです。調べたい対象の環境に合わせて変更します。


# 結果の確認
`batch_size=1`の場合を表示。
無事取り出すことができた！
```python
for path, label in dataloader:
    print('{},{}'.foramt(path, label)

### 出力
# 'path/to/img_0','label_0'
# 'path/to/img_1','label_1'
# ...
```
# 最後に
今回は`torch.utils.data.DataLoader`から画像ではなく画像のパスとラベルを取り出す方法について書いてみた。
学習の再、`iteration`ごとにどの画像やラベルのものが使われているのか、調査するのに便利。
パスやラベル以外にも、様々な属性を出力できるようにアレンジすると、色々な情報を調べることができるため便利。
【TypeScript】The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

~~~typescript
const dates = [
  "2024-11-12T00:00:00.000Z",
  "2024-02-12T00:00:00.000Z",
  "2025-08-26T00:00:00.000Z",
  "2020-11-16T00:00:00.000Z",
  "2020-11-14T00:00:00.000Z",
];

const sortedDates = dates.sort((a, b) => {
  return new Date(a) - new Date(b);
});
~~~

上記のように、配列に日付を格納して日付の古い順にソートするようなプログラムを書くと、以下のようなコンパイルエラーが出力されます。
~~~bash
The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
~~~

これは、TypeScriptにおいて、演算子（算術演算子、比較演算子など）を使用する際に、演算子の左辺が予期しない型である場合に発生します。

今回の場合、`-`の左辺がDate型であることが原因となっています。TypeScriptはDateの比較をサポートしていないので、別の型にして比較する必要があります。

Dateが持つメソッド`getTime()`または`valueOf()`を使用することで、このエラーは回避することができます。

~~~typescript:getTime()
const dates = [
  "2024-11-12T00:00:00.000Z",
  "2024-02-12T00:00:00.000Z",
  "2025-08-26T00:00:00.000Z",
  "2020-11-16T00:00:00.000Z",
  "2020-11-14T00:00:00.000Z",
];

const sortedDates = dates.sort((a, b) => {
  return new Date(a).getTime() - new Date(b).getTime();
});
~~~

~~~typescript:valueOf()
const dates = [
  "2024-11-12T00:00:00.000Z",
  "2024-02-12T00:00:00.000Z",
  "2025-08-26T00:00:00.000Z",
  "2020-11-16T00:00:00.000Z",
  "2020-11-14T00:00:00.000Z",
];

const sortedDates = dates.sort((a, b) => {
  return new Date(a).valueOf() - new Date(b).valueOf();
});
~~~
【Laravel】環境変数の扱い方

## 環境
Laravel v9.52.10 (PHP v8.2.6)

## はじめに
環境変数を参照する時は、``env()``からではなく、``config（）``経由で参照する。

## 環境変数の定義
laravelでは、``.env``というファイルに環境変数を定義していきます。

.envファイル自体はプロジェクトルート直下にあります。

```env
APP_NAME=Laravel
APP_ENV=local
APP_KEY=********
APP_DEBUG=true
APP_URL=http://localhost
```
大体このような形式になっていると思います。

環境変数名は、上記のような``スネークケース``で記述します。

## 環境変数を使用する

まずは、環境変数を自分で定義していきます。

```env
TEST_NAME=miura
```
このように定義することで、この環境変数の値をプロジェクトの中で使用することができるようになります。

次に、先ほど定義した環境変数をプログラムで使用します。

```php
$name = env('TEST_NAME');
```
環境変数を使用する時は、``env（）メソッド``に環境変数名を引数に渡してあげれば値を取得することができます。

## デフォルト値の設定
環境変数には、その値が存在しない場合などに使用する``デフォルト値``を設定することができます。

デフォルト値を設定するメリットは、誤って環境変数を削除してしまったり、削除した後に参照側を修正し忘れてしまった場合などに、デフォルト値を返すことでコードの不整合に気づきやすくなります。

```php
$name = env('TEST_NAME', 'error');
```
このように、envメソッドの第一引数に環境変数名を、第二引数に環境変数が存在しない場合のデフォルト値を設定できます。

## .envファイルは直接参照しない！
laravelでは、設定ファイルをキャッシュする機能があります。

```
$ php artisan config:cache
```
上記のコマンドでキャッシュが可能です。

しかし、Laravelの公式ドキュメントを見てみると、

> 開発過程の一環としてconfig:cacheコマンド実行を採用する場合は、必ずenv関数を設定ファイルの中だけで使用してください。設定ファイルがキャッシュされると、.envファイルはロードされません。したがって、env関数は外部システムレベルの環境変数のみを返すだけです。

https://readouble.com/laravel/9.x/ja/configuration.html?header=%25E8%25A8%25AD%25E5%25AE%259A%25E3%2582%25AD%25E3%2583%25A3%25E3%2583%2583%25E3%2582%25B7%25E3%2583%25A5

ドキュメントに書いてある通り、設定ファイル(config内のファイル)がキャッシュされると、config外にある``.env``ファイルはロードされなくなってしまい、env関数の呼び出し結果が``null``になってしまいます。

なので、configフォルダ内にあるファイルでのみ、``env()メソッド``を使用するようにしましょう。

## configで環境変数を定義する
configは、プロジェクトルート直下に存在します。

まずは、configディレクトリ下にファイルを作成し、環境変数を定義します。

```config/user.php
<?php

return [
  'test_name' => env('TEST_NAME'),
];
```

次に、``config()メソッド``を使用して呼び出します。

```php
$name = config('user.test_name');
```
このように、ファイル名.値のドット記法で呼び出すことができます。

しかし、これだけだと使用することはできないので、使用する前に値をキャッシュしておかないといけません。

```
$ php artisan config:cache
```
キャッシュした後に実行してみると、``.env``に設定した環境変数を``config``経由で取得することができます。
UiPath初心者向け：実務で使えるシステムが定期的にアップデートされてセレクターが変わるときについて(属性を取得アクティビティ)

# こんなことありませんか？
**システムが定期的にアップデートされてセレクターの"aaname"が不安定になり、セレクターが取れない。**
※"aaname"についてわからない場合は、この下にあるので、まずをそれを読んでください。
これに対して、configファイルや設定ファイルなどに"aaname"をパラメータ化し格納する方法を思いつきましたが、フローを考えたときにあまりいい方法ではないと気づきました。
簡単にですが、考えたフローを載せます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327229/70b5b985-159d-822a-5479-f64eeba4418e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327229/ac14e49f-b4c4-5746-d08c-6a023a740646.png)
変数の詳細
・dtbaaname＝configファイルや設定ファイルにある"aaname"一覧化したデータテーブルです。
・staaname＝string型でセレクターの"aaname"の変数です。
あまりいい方法でない理由は、トライキャッチを使用しているからです。
もっと詳しくいうと想定していないエラーが起こってもキャッチに飛んでしまうからです。

# セレクターの"aaname"について
UI Expolerを開いて、赤枠のところが"aaname"です。
"aaname"を見ると何か気づきませんか？
これは私のIDです。
***つまり、"aaname"とはクリックする対象に固有の名前があるときに現れるもので、現れたときにはこれを絶対に選んだ方がいいです。***
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327229/370fb959-774e-8552-048c-0f6151fa3e1a.png)

# どのように実装したか？
この記事で紹介した***属性を取得アクティビティ***を使用しました。

https://qiita.com/thxUVER2012/items/79c8313dd5857a701bd0

### 実際のフローについて ###
***属性を取得アクティビティ***を利用して、"aaname"を取得し、それをセレクターの変数として"aaname"に入れてあげることで、今回の問題は解決します。
運用のことも考えて、どんな"aaname"を取ったかログで残すとデータも取れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327229/b63537bd-0f85-8d4f-156e-eb3b91f422da.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327229/ec291aa1-1c24-e565-9ba4-3dba0be3f2b7.png)

変数の詳細
・staaname＝string型でセレクターの"aaname"の変数です。
**注意点**
UI Expolerを開いて、"aaname"を必ず外すことです。
理由は、"aaname"が不安定な状態のためエラーが起こっているのに、ここで"aaname"にチェックを入れてしまうと同じエラーになるだけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327229/a5623e25-595c-e80e-ba33-ed2d5b600d9f.png)

# 最後に
今回のフローはUiPath_2023.6.1verで作成したので少し違和感があると思います。
***属性を取得アクティビティ***はいろんなものを取得できるので、これを知っておくととても便利です。
まともに動かなかったノートPCにUbuntuを入れてみた

## はじめに
最近、大学生の時まで使っていたメインノートPCを親が仕事で使っていることが多く、自分が触りたいときに触れないことが多くなってきました。

そこで、数年前に叔父が買ってきたろくに動かないWindowsノートPCにLinuxOSのUbuntuを入れて普段使いできるようにしました。

## スペック
スペックは以下の通りです。(わかる範囲)

| CPU | 実装RAM | 
|:-:|:-:|
|Core i3-7020U   | 4GB  |

本来なら、ストレージの容量も確認したかったが、見るのを忘れた。
多分、128GBくらい？

## どうやったか
以下の、YouTubeの動画を中心にネットで調べながら導入しました。
ネットですぐに情報を閲覧できるよき時代です。

[山籠りジャンク道さん](https://youtu.be/1k9gBsrNwa0)

## 使ってみた感想
まず、このオンボロPCが動いたことにとても感動しました。何分、Windowsで動かしてたときは設定を開くだけでも、10分以上を有しており普段使いができるビジョンが見えていませんでした。流石、LinuxOS。

また、UbuntuにはあらかじめGUIが入っており、CLIのLinuxをポチポチしてた自分には新鮮でした。おまけにWord、Excel、PowerPointみたいなものが入っているので、もうOSはUbutunで足りるなと思いました。

ただ、PCのスペックの低さからか、Gitのインストールをするときに終了処理が行われなかったりするのは気になりました。あと、やはりフリーズも若干ある。

## 今後の発展
24h稼働を想定しない自宅サーバーとして供養できたらしたい
ななつのAPI性能向上の方法を





ByteByteGoでななつのAPI性能向上の方法をYoutubeで投稿したのでここで簡単にまとめます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/zvWKqUiovAM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>



## 1. Pagenation

大きいでーたは適当なサイズ（ページ）でわけて伝送します。Youtube見たいの動画を扱う場合には必ず使われている手法です。



## 2. Async Logging

システムはランタイム時にログを記録する必要があります。しかし、状況によってロギングするべきデータが大きいものであったり、小さいものであったりします。大きなものをロギングしているときに次のロギングがとまってしまったら…

これのためには、非同期のロギングが必要です。



## 3. N+1問題

クエリ1回でN件を取得したが、関連するカラムを取得するためにクエリをN回追加で実行する問題がN+1問題です。これはJOINなどを使用したクエリの改善によって可能です。

問題状況

```php
$books = query_rows("SELECT * FROM books");
foreach( $books as &$book ) {
    $book['author_name'] = query_one("SELECT name FROM 
    authors WHERE id=?", $book['author_id']); 
}
```

上記のコードは、一つのidに対応するauthorを見つけるために、booksのレコード数だけループを回して探します。

これはJOINを使用して解決できます。（クエリ数は1回）

```php
$books = query_rows("SELECT b.*, a.author_name
    FROM books b LEFT JOIN authors a ON b.author_id=a.id");
```



イーガーローディングを行うと、クエリ数を1+1回に減らすことができます。

```
SELECT * FROM books;
SELECT * FROM authors WHERE id=1;
SELECT * FROM authors WHERE id=2;
SELECT * FROM authors WHERE id=3;
... 
```

を

```
SELECT * FROM books;
SELECT * FROM authors WHERE id IN (1, 2, 3, ...);
```

にします。



## 4. caching

これは、DBを経由する前に、RedisなどのメモリDBでキャッシュを作成しておく方法です。

```
if redis_cache.contains(query):
   return redis_cache.get(query)
else:
   result = backend_database.query(query)
   redis_cache.put(query, result)
   return result
```



## 5. Connection Pool

DBコネクションをあらかじめ複数作成し、プールとして管理します。コネクションが発生する度に直ちに対応します。

代表的なCPにはHikari CPがあります。Hikari CPでの推奨プールサイズは 

$T_n \times (C_n-1) + 1$

(ここで、$T_n$は全スレッド数、$C_n$は一つのリクエストで同時に必要なコネクション数を示します)

でもこの数値は探しにくいなので以下の公式がよく使われています。

(core_count×2) + effective_spindle_count

(core_countはCPUのコアの数、effective_spindle_countはハードディスクの数)

## 6. Payload Compression

データの送信時にデータを圧縮して送信する技術を指します。

圧縮の方法はgzipもあるんですが最近はBrotli方法がもっと効率がいいのでよく使われてます。


## 7. Using proper JSON Serialization Library

JSONデータの転送時に適切なパフォーマンスの直列化ライブラリを使用すると、転送負荷を大幅に軽減することができます。

言語に適した最適化されたライブラリを使用すれば良いでしょう。Googleのprotobufは言語が提供する内蔵ライブラリよりも性能は良いですが、使用するのが複雑であるという欠点があります。
インラインアセンブラ 小物  w/Arduino @ RP2040

- Arduino IDE 2.1.1 on Mac
- Raspberry Pi Pico/RP2040 by Earle F.Philhower, III 2.7.0
- Raspberry Pi Pico（互換機）

# 1秒待つ

```cpp:
void setup() {

  Serial.begin(9600);
  while (!Serial) {}
  Serial.println("Boot RP2040");

  Serial.println("start!");

  uint32_t time0 = micros();

  asm volatile(
    "LDR r0, =44333333 \r\n"  // (1 + 44333333 * 3)=133,000,000 clocks.
    ".loop: \r\n"
    "SUB r0, #1 \r\n"  // 1 cycle
    "BNE .loop \r\n"   // 2 cycle: if not zero, then branch
    :
    :
    : "r0"
    );

  uint32_t time1 = micros();

  Serial.print("time0 ");
  Serial.println(time0);

  Serial.print("time1 ");
  Serial.println(time1);

  Serial.print("takes ");
  Serial.print(time1 - time0);
  Serial.print("[usec] -> ");

  Serial.print((time1 - time0) / 1000000);
  Serial.println("[sec]");

}

void loop() {
}
```
実行例
```
Boot RP2040
start!
time0 1031987
time1 2042373
takes 1010386[usec] -> 1[sec]
```

-基本的に動作周波数のほかはNucleoとおなじでOKでした。
- Earle さんのコアは標準で133Mhzでした。mbedコアの場合は125MHzでしたので，それなりに修正すればOKでした。

# SysTickでクロック数確認

```cpp:main.ino
void setup() {

  Serial.begin(9600);
  while (!Serial) {}
  Serial.println("Boot RP2040");

  delay(3000);

}

void loop() {
  uint32_t out1, out2;

  asm volatile(
    "SYSTICK_CVR = 0xE000E018 \r\n"
    "LDR r0, =SYSTICK_CVR \r\n"    
    //"NOP \r\n"
    //"MOV %[out1], %[systick_val_address] \r\n"
    "LDR %[out1], [r0] \r\n" // 1 cycle
    "NOP \r\n"                                   // 1 cycle
    "NOP \r\n"                                   // 1 cycle
    "NOP \r\n"                                   // 1 cycle
    "NOP \r\n"                                   // 1 cycle
    "NOP \r\n"                                   // 1 cycle
    "NOP \r\n"                                   // 1 cycle
    "NOP \r\n"                                   // 1 cycle
    "NOP \r\n"                                   // 1 cycle
    "LDR %[out2], [r0] \r\n" // 1 cycle
    : [out1] "=r"(out1) , [out2] "=r"(out2)     
    : 
    : "r0"
  );

  Serial.print("out1 ");
  Serial.println(out1);

  Serial.print("out2 ");
  Serial.println(out2);

  Serial.print(out1-out2);
  Serial.println(" clocks.");

  delay(2000);
  // while(1) {}
}
```

実行例 なぜか1回目が遅いです。シリアルモニターで割り込み？待ちが入っている模様

```
Boot RP2040
out1 9762214
out2 9761953
261 clocks.
out1 12169678
out2 12169668
10 clocks.
out1 14582775
out2 14582765
10 clocks.
```

Windowsだとうんと遅いです。よくわかりません...

```
Boot RP2040
out1 12535788
out2 12535527
261 clocks.
out1 14941581
out2 14941321
260 clocks.
out1 575396
out2 575285
111 clocks.
out1 2989888
out2 2989777
111 clocks.
```

https://qiita.com/yasuhiro-k/items/21f2288f14f49c417e7b

こちらのサンプルは mbed コアだと動きました。SysTickの扱いはまだまだ私の知らないことがあるようで...
【Flutter】iOSシミュレータ起動時に以下のエラーが出た時の対処 xcodebuild: error: Unable to find a destination matching the provided destination specifier

iPhoneのsimulatorを起動した後、
```bash
flutter run
```
を叩いてiPhoneシミュレータでFlutterのデバッグビルドを動かそうとした時、以下のエラーに遭遇し、シミュレータでのアプリ起動に失敗しました。
```
DVTCoreDeviceEnabledState: DVTCoreDeviceEnabledState_Disabled set via user default (DVTEnableCoreDevice=disabled)
xcodebuild: error: Unable to find a destination matching the provided destination specifier:
```
エラーの原因は、XCodeプロジェクトでBuild ConfigurationがDebugになっていないことでした。

XCodeプロジェクトのRunner.xcworkspaceを開き、XCode画面上部の「Runner」→「Edit Scheme...」→「Run」タブ と進みます。Infoタブの最上部に「Build Configuration」があるので、「Debug」以外になっていたら「Debug」に戻します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195465/f164993b-1c3f-eb59-d78b-8148c82513df.png)

自分はこれで動くようになりました。
AWSユーザーの祭典「JAWS FESTA 2023」を応援します！

:::note info
この記事はAWSユーザーコミュニティが主催する技術カンファレンス「JAWS FESTA 2023」を個人サポーターとして応援するページです。
:::

JAWS FESTA 2023 in Kyushu 開催おめでとうございます！ みなさんもう参加申し込みましたか？

https://jft2023.jaws-ug.jp/


# 個人サポーター自己紹介（みのるん）
![minorun365.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633856/62ad46c9-9a8d-1b64-3c97-cba236d7e8e3.jpeg)

https://twitter.com/minorun365


### 所属

- テックエバンジェリスト @ [KDDIアジャイル開発センター](https://qiita.com/organizations/kddiagile)
- ソフトウェアエンジニア @ [KDDI](https://qiita.com/organizations/kddi)

https://note.com/kddi_agile/n/n2036b544a5c5

### 認定など

- AWS Community Builder
- KDDI Cloud SAMURAI 2021
- KDDI Cloud Ambassadors 2021



# 運営している技術コミュニティ

### JAWS-UG SRE支部

2021年11月の初回イベントで社外LTデビューし、そのまま運営に参加しました。
ガチなSREというよりはインフラや運用、DevOpsなどのトピックが好きな人たちと楽しく技術交流しています。

https://jawsug-sre.connpass.com/


### JAWS-UG東京

コロナ禍で活動休止していた支部ですが、2023年7月にリブート企画メンバーという形で参画しました。
意外と供給が足りていない「オンライン特化＆フリーテーマのランチタイムLT会」という新スタイルで毎月開催を目指しています。

https://jawsug.connpass.com/


### JAWS DAYS 2022

オンライン配信＆全国サテライトというハイブリッド形式で2,000名以上が参加した大規模カンファレンスです。
実行委員として広報チームに参画していました。

https://jawsdays2022.jaws-ug.jp/


# 過去の登壇資料の紹介

### JAWS-UG朝会

https://speakerdeck.com/minorun365/uwatu-dot-dot-dot-awsfalsesekiyuriteixi-sabisu-duo-sugi-dot-dot-dot-onpureenzinianimofen-kariyasukuzheng-li-sitemita


### JAWS-UG 情シス支部

https://speakerdeck.com/minorun365/enpuraqing-sisunoawsaruaru-ye-wu-sisutemubian


### BigData-JAWS（QuickSight分科会）

https://speakerdeck.com/minorun365/awsfen-xi-xi-and-iacsabisuru-men


### AWS Direct Connectと愉快なGWたちをおさらいする会

https://speakerdeck.com/minorun365/aws-direct-connecttoyu-kuai-nagwtatinoosarai


### AWS Community Builders（APJ Open Mic）

https://speakerdeck.com/minorun365/how-to-make-dr-ready-system-with-amazon-aurora-global-database



# さいごに

現地参加チョー楽しみです！ 一緒にワイワイとAWSの知見を深めましょう 💪

このページへの感想や、みのるんへのメッセージ等あれば以下フォームよりコメントいただけますと嬉しいです！

https://forms.gle/T6qbEmbEAthRU2J9A
Jupyter labの初期表示ディレクトリ変更

# この記事について
Jupyter labを起動した際に初期表示されるディレクトリを変更したい。
そのための最小限の作業を記した、備忘のための作業メモです。
必要な作業は以下２点です。

1. 設定ファイル（jupyter_lab_config.py）の作成 
1. デフォルト表示のディレクトリの変更

# ①設定ファイル（jupyter_lab_config.py）の作成
まだ、設定ファイルが作成できていない場合には、設定ファイルを作成します。
コンソールにて下記を実行

```bash
$ jupyter-lab --generate-config

Writing default config to: /home/XXXXXX/.jupyter/jupyter_lab_config.py
```

なお、設定ファイルが存在する場合には以下のような表示となります。
設定ファイルが既存の場合この手順①は不要です。

```bash
Overwrite /home/XXXXXX/.jupyter/jupyter_lab_config.py [y/N]
```


# ②デフォルト表示のディレクトリ変更
上記にて作成された、jupyter_lab_config.pyを修正します。
修正箇所は下記の通りで、**c.ServerApp.notebook_dir**に初期表示したいパスを指定します。

```python
960
961 ## DEPRECATED, use root_dir.
962 #  Default: ''
963 c.ServerApp.notebook_dir = '/home/XXXXXX/MyJupyterPJ'
964
```

これで、Jupyter-lab起動時に指定のディレクトリを初期表示することができます。

以上
[深層] AWS CodeBuildにおけるDocker Hubのレートリミット問題を解決する2つの方法

![c04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521573/a9fefaea-6f50-3277-f6d2-df8b29da00ac.png)

DockerHubのレートリミット[^1]は、CI/CD環境で頻繁にDockerイメージを取得する必要がある場合、予期しない問題を引き起こすことがあります。イメージのビルドが失敗したり、これにより開発プロセスに遅れが生じるのは避けたいところです。

> Step 1/2 : FROM php:7.4.0-apache
7.4.0-apache: Pulling from library/php
toomanyrequests: You have reached your pull rate limit. You may increase the limit by authenticating and upgrading: https://www.docker.com/increase-rate-limit

そして、ここに至って課題は二つに分かれます。一つはセキュリティ上のリスク、もう一つは管理コストです。DockerHubへの認証情報をbuildspec.ymlに記述することは、セキュリティ上好ましくありません。また、使用するイメージをECRに保存管理することは、管理コストが増えてしまいます。

これらの課題を解決するために、二つの方法を提案します。

## NAT Gatewayを使用して固有のIPを付与する

まず一つ目は、NAT Gateway[^2]を使用して固有のIPを付与することです。これにより、DockerHubからのpullリクエストが特定のIPから来るようになり、レートリミットの制約を回避できます。ただし、この方法には追加の費用が発生しますので、予算管理に注意が必要です。

https://docs.aws.amazon.com/ja_jp/codebuild/latest/userguide/vpc-support.html

## ECR Publicを経由してDockerHubのイメージを取得する

二つ目の方法は、AWSが提供する新しいサービス、ECR Public[^3]を経由してDockerHubのイメージを取得することです。具体的には、DockerHubのイメージをpublic.ecr.aws/docker/library/以下にミラーリングします。例えば、php:7.4.0-apacheのイメージはpublic.ecr.aws/docker/library/php:7.4.0-apacheとして取得できます。これにより、DockerHubへの直接のリクエストを避けることができます。

https://gallery.ecr.aws/

## おわりに

DockerHubのレートリミットは開発の流れを妨げる可能性がありますが、上記の方法を使用することで、この問題を効率的に解決することができます。適切な手法を選択することで、安全性と効率性を確保しながら開発プロセスをスムーズに進めることが可能です。これらの提案が、あなたの開発作業をよりスムーズに、そして安全に進めるための一助となれば幸いです。

https://note.com/happyodangoo/n/na9d4578699fe

[^1]: DockerHubのレートリミット - 匿名ユーザーは6時間ごとに100プル、認証ユーザーは6時間ごとに200プルに制限されています。
[^2]: NAT Gateway - VPC内のエンドポイントからDockerHubからのpullリクエストに固有のIPを付与し、レートリミットを回避する。
[^3]: ECR Public - DockerHubのイメージをpublic.ecr.aws/docker/library/以下にミラーリングし、DockerHubへの直接のリクエストを避けるAWSの新サービス。
プログラミング言語

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/1b9c1501-28c9-cc04-baea-fb32af56accf.png)
①BASIC：初心者向けのプログラミング言語として開発されました。様々なアプリケーションプログラムを記述できる。初期のぱそこんではプログラムはBASICで記述した。現在は、表計算送付となどのマクロプログラムの記述にも使われている。

②C：OSを記述する目的で開発された言語である。現在は、OSからアプリケーションプログラムまで様々なプログラムを作成するために使われている。アセンブリ言語（機械語）と相性がよくハードウェアを直接制御するプログラムを書くことができる。また、アドレスを指定してメモリに直接アクセスするためのポインタという仕組みがある。

③C＋＋：Cをオブジェクト思考に対応させたものである。

④Java：OSの違いを意識せずに共通のプログラムを実行させることを目標として開発させたオブジェクト思考型の言語である。もメモリ管理のためのガーベジコレクション機能（使わなくなったメモリ領域を解放し再利用できるようにする機能）がその割っている。WebアプリケーションやAndroid（スマートフォン）アプリケーションの開発に使われている。

⑤Python（パイソン）：機械学習やデータ分析などで用いられていることが多いプログラミング言語である。様々なライブラリ（プログラムの部品）が用意されており、これらを利用することで比較的容易に機械学習などの高度な処理を行うプログラムを作成することができる。
Slackのプロフィールに入社日が設定できるようになった🎉

https://slack.com/intl/ja-jp/help/articles/11200347239827-%E3%83%97%E3%83%AD%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%81%AE%E3%81%8A%E7%A5%9D%E3%81%84%E3%82%92%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B

開始日と表現されてますが、プロフィールに入社日やチームへのジョイン日を入れておくとお祝いをしてくれるようです🍾

今日入社で設定してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96507/e246894a-b55f-971a-08c0-fb75ad9da1e1.png)
ちょっとおかしな日本語でお祝いされました🙌
お祝いメッセージは何パターンかあるみたいです。

去年入社にしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96507/0e8bb202-dc0c-735a-f7a6-46e0ce03a00c.png)

１周年をお祝いしてもらえました🎉

メンバーに設定してもらえば、入社したての人や社歴がわかってコミュニケーションに役立ちそうですね！
Nginxのproxy_passを設定する時の注意点

# 初めに
今回の記事では、NGINXのリバースプロキシの設定でつまずいたことをまとめました。

# リバースプロキシとは
リリバースプロキシはウェブサーバーの前に配置され、クライアント（一般的にはユーザーのウェブブラウザ）からのリクエストを受け取り、それをバックエンドサーバーへ転送します。

リバースプロキシ主な目的は三つあります。
#### 1.セキュリティの向上 
リバースプロキシはクライアントとバックエンドサーバーの間に立ち、クライアントとバックエンドサーバーの直接接続を避けます。これにより、バックエンドサーバーのIPアドレスや内部構造を隠すことができます。(dockerのコンテナの通信など)
#### 2.負荷分散
リバースプロキシはバックエンドサーバーへのリクエストを複数のサーバーに均等に分散させることができます。これにより、サーバーの負荷を分散し、サービスの応答性とパフォーマンスを向上させることができます。
#### 3.キャッシュ
リバースプロキシはクライアントからのリクエストに対して、バックエンドサーバーの応答を一時的にキャッシュすることができます。キャッシュを使用することで、重複するリクエストに対してバックエンドサーバーの負荷を減らし、応答時間を短縮することができます。

リバースプロキシは、ウェブサーバーとして動作する場合もありますが、今回はNginxにリバースプロキシを設定します。

# Nginxのリバースプロキシ設定で躓いたこと
Nginxの`proxy_pass`を使用する場合、ターゲットサーバーアドレスの末尾にスラッシュ（`/`）を使用するかしないか結構変わります。例えば、以下のリクエストがあります。
   ```
request_url='http://domin.com/proxy/test'
   ```
## ⅰ.スラッシュ `/` を使用する場合：
   ```
   location /proxy/ {
       proxy_pass http://targetServer.com/;
   }
   ```
この設定では、リクエストがNginxに到着し、`/proxy/`パスにマッチする場合NginxはリクエストURLからマッチしたパス部分（つまり`/proxy/`）を削除し、残りのパス部分（つまり`test`）をターゲットサーバーに送信します。
変換後のアドレスは：
   ```
true_url='http://targetServer.com/test'
   ```
## ⅱ.スラッシュ `/` を使用しない場合：
   ```
   location /proxy/ {
       proxy_pass http://targetServer.com;
   }
   ```
この設定では、リクエストがNginxに到着し、`/proxy/`パスにマッチする場合、Nginxは完全なリクエストURLをターゲットサーバー`http://targetServer.com`に送信します。`/proxy/`以降のアドレス部分も含まれます。
変換後のアドレスは：
   ```
true_url='http://targetServer.com/proxy/test'
   ```
# 最後に
今回はリバースプロキシの設定でつまずいたことをまとめました。
Nginxの設定はややこしいですよね。
この記事は少しでも参考になりましたら幸いです。
PF作成：初日

今日からPF作成の作業日誌的なものをつけていこうと思おう。

## 進捗
- テーマ課題を御朱印のSNSに使用と決定
- 実装機能リストをとりあえず書き出してみた
- 一度提出して、結果が返ってきた。不合格

## 不合格内容
# アプリケーションへのレビュー
## 内容について
### 修正が必要な点
- サイト名がそのまますぎます。
- サイトテーマは目的と分類を並べると、意味が途切れてしまいます。
- テーマを選んだ理由が「思ったこと」が中心になっています。

#### サイト名について
- サイト名がサイトの種類のようになっているので、特別な名前にしてみましょう。

#### サイトテーマについて
- サイトテーマは一行でまとめましょう。
- 御朱印を投稿する場合はレビューサイトではなくSNSに近いです。レビューサイトにする場合は御朱印中心ではなく、神社仏閣のレビューサイトであることを先に説明、その後に御朱印集めのために利用することを説明するほうが良いかと思います。

#### テーマを選んだ理由について
- テーマを選んだ理由は考えや意図を箇条書きにするのではなく、事情や時勢などを含めて順序だてて記述しましょう。
- 御朱印を集めることについて、どういう意味があり、どう楽しいのか、なぜブームになっているのかなども事実に基づいて簡単に説明すると自分の考えだけではなく、需要が分析できていると思ってもらえます。
- 説明に別アプリの名前を書くと逆にわかりづらくなるので「画像投稿SNS」など、アプリの種類で説明したほうが良いです。
- 「他のサイトは繋がることを意識していることが多いイメージだったので、誰でも気軽に投稿できるというイメージでサイトを作成しました。」とありますが、この記述ですと普通のＳＮＳでも実現できるように見えてしまいます。このアプリのメリットを明確に説明してください。

# 技術的要素のレビュー
- 工数設定が過剰に多いため、機能を減らすことを検討したほうが良いです。進捗を管理しながら優先度の低い機能の実装は見送るなど調整も検討して下さい。
- 実装機能リストの分量は多めです。実装時間が大幅にかかって時間が足りなくなる恐れがあります。スケジュールの管理をしっかり行い、間に合わない場合の取捨選択をできるように準備して下さい。
- 実装の目途が立っているかどうかのチェックが少ないです。実装の目途が立っていない場合、実装に時間がかかって間に合わなくなるケースがあり得ます。スケジュール管理をしっかり行い、時間の不足がないように注意してください。
- 地図機能についてはJavaScriptが使用されています。カリキュラムの内容以上の習得が必要な内容が多いので、スケジュールを多めに確保してください。また、APIキーの設定を環境変数化してGithubに掲載しないようにしたり、HTTPリファラーの設定で特定のURLしかAPIを利用できないように設定したりする必要があります。この点も調べておきましょう。


## 修正点
#### 実装機能リスト周辺をまずは変更
- レビューサイトからSNSサイトへ変更。レビューサイトは映画や料理など一つの情報を評価するサイトのことで、私が実装したい御朱印を投稿するサイトはSNSサイトらしい。
- 都道府県があって日本地図があるような検索機能（参考：スーモ）は地図機能とは言わないらしい。HTMLで日本地図みたいな絵を表しているだけらしい。どちらかというとジャンル検索機能に近い。ただ今回はenumで実装可能できるそうなのでenumで実装しようと思う。
- ペットと一緒に参拝できるかどうかもenumでできる。ペットOK、NG、わからないの３種類でいこうと思う。
- ジャンルテーブルは神社、仏閣だけでよくてメンターさんに紹介された
参考資料：https://jinja-bukkaku.net/jbData.htm
でCSVファイルをいただいてseedを使用して実装すると簡単でしかも挑戦にもなるので転職活動の売り込みに使えるらしい。まだよく理解してないのでもう少し理解を深める必要がある。


## 明日の予定
明日はテーマ課題について考え直して、もう一度１７時までに提出をする。
そんな感じで今日はおしまい。これから作業日誌を書く癖をつけないと。
最小二乗法

## 最小二乗法(Least Squares Method,LSM)の線形代数的な解釈
### 説明変数が1つの場合
$n$個の観測データがあり、$i$番目のデータを$\left(x_i, y_i\right)$と書くことにする。
今、このデータを以下のモデルに回帰させることを考える。

```math
y_i = \beta_0 + \beta_1 x_i
```
回帰係数を求めるためには、以下の残差平方和を最小化すればよく、
```math
\begin{align*}
\sum_{i=1}^{n} \left( y_i - \hat{y_i} \right)^2 &= \sum_{i=1}^{n} \left(y_i - \left(\beta_1x_i+\beta_0\right)\right)^2\\
\end{align*}
```
これを回帰係数でそれぞれ偏微分したものが0になるようにすればよく、連立方程式を解くことによって
```math

\begin{align*}
\beta_0 &= \frac{\sigma_{xy}}{\sigma_x^2}\\
\beta_1 &= \bar{y} -\beta_0\bar{x}
\end{align*}
```
### 説明変数が2つ以上の場合
```math
X=\begin{pmatrix}
1 & x_{11} & \cdots & x_{1k}\\
1 & x_{21} & \cdots & x_{2k}\\
\vdots & \vdots & \ddots & \vdots\\
1 & x_{m1} & \cdots & x_{mk}
\end{pmatrix}
,\
\boldsymbol{\mathrm{β}}=
\begin{pmatrix}
\beta_1 \\
\beta_2 \\
\vdots \\
\beta_k\\
\end{pmatrix}
,\
\mathrm{\boldsymbol{y}}=
\begin{pmatrix}
y_1\\
y_2\\
\vdots \\
y_m\\
\end{pmatrix}
```
とおくと、回帰モデルは以下のように表すことができる。
```math
\mathrm{\boldsymbol{y}} =X\boldsymbol{\mathrm{β}}
```
回帰係数の推定量の実現値は

```math
\hat{\boldsymbol{\mathrm{β}}}=\left(X^TX\right)^{-1}X^T \mathrm{\boldsymbol{y}}
```
と書くことができる。
Javascript何覚えればいいのかわからない人！！

Javascript何覚えればいいのかわからない人！！
Javascriptって結局これだけなんです。
Web意味わからない、getEle(document.getElementId(XX))って関数読んでんだけど次の現場いったら関数ないんだけどみたいなことって結構初心者にとってあるあるなんです。

Window.documentって書くと動作しないこともありますが、ブラウザによって分かれます。
※今後統一されることがあるかもしれません。

![Javascript1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2285259/4ab7aec5-96c5-207b-4671-bd177bca48b1.jpeg)
![Javascript2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2285259/1d44a41c-804a-f709-1b49-2f35d39ee5da.jpeg)

この画像が何なのかを1個ずつ調べればいいだけなんです。
後は、変数var、let、配列とかAjax等の簡単なものを利用すれば対して覚えるものはありません。
Qiitaの長期インターンに参加して。

はじめまして。こんにちは。

# これは何の記事？
私ごとですが、先日Qiitaの長期インターンを退職してきました。2月から始めたので約５ヶ月くらいですかね。
この記事では私がQiitaのインターンに参加して思ったこと学んだこと、これからエンジニアのインターンに参加したいと考えている学生さんたちに伝えたいことを書いてきます。

# なぜQiitaのインターン？
私がちゃんとwebアプリケーション開発を始めたのは2022年の秋頃でした。HTML, CSSのベーシックなところから始まり、年末ごろにはvue.jsで一つアプリケーションを公開したりしていました。
次はReactで何か作ってみたいなぁと勉強を始めた頃に、唯一のエンジニアの友達に「インターンとかやらないの？」という誘いを受けてインターンに参加してみようとなりました。その彼が参加していたインターンがQiitaだったので、自分もそこに応募してみたという感じです。

ちなみに興味がある方はこちらから応募できます!
https://corp.qiita.com/jobs/
![Screenshot 2023-07-30 at 21.03.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2991493/9bb1a030-d30c-6dd9-2f18-06127e3babe7.png)

# Qiitaでなにをやってたの？
もちろん開発をしていました。私が配属された部署ではQiitaを利用してくださっているユーザーからの「ここをこうしてほしい」とか「こういう機能が欲しい」という要望に対して機能の修正や追加をしていました。
結構様々なことをしていたのですが、一番大きかったことは通知ページをアップデートしたことでしょうか。
https://qiita.com/release-notes
![Screenshot 2023-07-30 at 21.17.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2991493/041ab763-be56-1cb7-a015-a7375e3f4285.png)

バックエンドで通知のデータを持ってきてそれをフロントに渡して表示するまでの一連の流れを頑張って作りました！
QiitaではReactとRailsを主に使っていたのですが、私自身Railsを今まで全く触れたことがなくなかなか苦労しました。フロントエンドは少し得意だったので結構楽しかったです！

他には細かい文言のや機能の修正やOrganizationの方の機能の改善などをしていました。

# で、何を学んだの？
何だことは本当にたくさんありました。学びがない日なんて全くなかったくら充実してお仕事していました。書きたいことは山ほどあるのですが、とりあえず３つに絞って書きたいと思います。

### 大人数で開発するということ
私は今まで個人で開発しかしたことがありませんでした。gitの使い道もノートpcとデスクトップpcの両方で開発するためにファイルを共有するみたいな感じの使い方しかしておらず、コミットってなに？プルリクって何？というような感じでした。
インターンではもちろん大人数で開発をするわけで、自分が何をどう変更したという記録をちゃんと残しておかないといけないですし、それがほかの人の開発に影響のないようにしないといけないわけですね。
多分、qiitaを利用してくださっている凄腕つよつよエンジニアの皆さんからしたら当然のことだとは思うのですが、初めて大人数での開発を経験した私にとっては、自分がどのような意図を持ってどのように変更したかということを言葉にして残しておくというのはとても新鮮な感覚でした。
あとはわからないことがあればすぐ聞けるというの複数人で開発することの利点だと思います。私は特に駆け出しも駆け出しの超初心者エンジニアでわからないことだらけだったので「とりあえず〇〇分考えてわからなかったら聞こう」というように常に上長さんに聞きまくっていました。

### 洗練されたコードを書くということ
今まで結構「動けばいい」という感じでアプリケーションを作っていた私ですが、もちろんそれが許されるわけなかったです。
どこの会社もあると思うのですが、Qiitaではコーディング規約があり、それに沿ったコードを書かないといけないわけです。コーディング規約に書いてあること以外のことでも、本当に正しい書き方なのかを常に調べたり聞いたり何度も見直ししたりして完璧にしてからプルリクを出すというルールでした。
ということでプルリクを出す時は少し緊張感がありました。緊張感があるとは言っても、わからないことは聞けば皆さん優しく教えてくださるので適度な緊張感という感じでした。
毎回プルリクの直しを受けるたびにどのように書くのが最適なのかという学びになったので、気がついたら個人開発の方もそれなりに洗練された書き方ができるようになりました。

### いろんな人と話すということ
エンジニアといえばPCに向かって黙々と作業するというイメージが強かったのですが、インターンに参加してからはそんなことはなく、話すということの大切さを知りました。
積極的に質問することもそうですが、昨日は自分が何をして今日は何をするかという情報共有であったり、お昼休みの他愛もない会話であったり、人と話すことによって得る情報というのがめちゃめちゃ価値のあるものだと思いました。
「最近はこういうフレームワークが流行ってるね」とか「こんな便利なツールあったよ」というような個人的には結構興味深い話が聞けたりしたのでいい経験になりました。
僕の席はマーケティングの方とも近かったので、そちらの方面の方とも色々お話しさせていただいたのですが、その話も色々面白い話を聞けました。自分の得意な分野とは全く別の世界なので本当に自分の知識のはばが広がったなぁという感じでした。
あと無言でずーっとPCに向き合うのも疲れますからね笑


# エンジニアになりたい学生は絶対インターンに参加した方がいいと思った
私がQiitaのインターンに参加して第一に思ったのは、エンジニアを目指している学生は早いうちからインターンに参加した方がいいということでした。私自身ももっとはやくからやっておけばよかったと後悔しています。
学べることは本当に多いですし、将来に直結する知識ばかりなので全く行って損はないと思います。特にコーディングが趣味という方にとっては趣味がそのまま仕事になるのでめちゃめちゃおすすめしたいです。（お給料もちょっと高めのところが多い気がします笑）
あと企業によっては内定をもらえやすくなるということもあると思います。

# 最後に
Qiitaでインターンしておきながらちゃんと記事を書いたのは数回しかないのであまりちゃんと書けているのか心配なのですが、書きたいことは全部書けたと思います。
一人でも多くの方がインターンに興味を持ってくれたり、これからインターンに参加しようと考えてる方の参考になれば嬉しいです。

最後になりますが、Qiitaの皆様本当にお世話になりました。またいつか皆様にお会いできたら嬉しいです。
Android端末にHMS Coreをインストールする方法

# 手順
1. Android端末のブラウザを起動し、https://consumer.huawei.com/jp/mobileservices/appgallery/ を開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/8f79db28-4816-f65f-73a7-1cfaef0ad2de.png)

2. 「AppGalleryをインストール」をタップする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/ca88d35a-4906-ad45-1907-4ad5d39b3191.png)

3. 画面に表示されているリンクを開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/74ffcf25-663c-4ad9-a04c-7ff0ffe72464.png)

4. 「インストール」をタップする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/bf71d454-f3da-1027-6f15-e3293c999f61.png)

5. 「AppGalleryをインストール」をタップし、インストールする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/58a45303-aad0-dd6c-79b6-dbb94c8edab4.png)

6. インストールが完了すると、「AppGallery」が表示され、それを起動させる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/616e53f3-93c9-4bab-850e-4db34ead0a0d.png)

7. 「HMS Core」を検索し、インストールする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/0722b352-24e4-451e-c343-45efb38f3220.png)
RTX4090 + Livebook「AIお絵描き」でGPUの本気を見せてくれ

興味本位でLivebookで「AIお絵描きStable Diffusion」でGPU動いたらどのくらい速くなるだろうと言う疑問から

# 環境構築

haigoさんの記事を参考にさせてもらいました

https://qiita.com/the_haigo/items/ed692b9cb79ada3ad3fe


補足として
私の環境ではドライバーは
Driver Version: 525.60.13
cuda-12.0を使ってます

Livebookで動くExlaがcudaの11系の為そのままだと動きません
上記の記事の通り足りないライブラリーを地道にコピーが必要です

Could not load dynamic library 'libcudart.so.11.0
と表示した場合

sudo find / -name  'libcudart.so.12`
で検索してみます
見つかったら
libcudart.so.12 → libcudart.so.11.0
のイメージでコピーしていきます
libcudart.so.11.0はないため、今の所ごまかして使ってます

似たようなことを何度か繰り返していくと動くようになります

# 実行結果
AIお絵描きで

CPU(13900KF)で実行は5分34秒
GPU(RTX4090)で実行で19秒なので
約17倍GPU実行が速いことになります

RTX4090での実行結果
<iframe width="560" height="315" src="https://www.youtube.com/embed/kypxYuWSOHQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Springで始めるWeb開発#1

# はじめに
<!-- 発端や概要を記載 -->
これまでにJavaの開発経験がなかったのでJavaをもっと知るために開発を始めました。
JavaでWeb開発をしたいと思ったときにJavaのフレームワーク「Spring」を知ったのでSpringを使って開発していきます。

# 目次
<!-- タイトルとアンカー名を編集 -->
1. [Springとは](#chapter1)
2. [Thymeleafとは](#Chapter2)
3. [Controllerの記述](#Chapter3)
4. [JAR/WAR](#Chapter4)

<!-- 各チャプター -->
<a id="#chapter1"></a>
## Springとは

SpringはJavaで開発されているフレームワークの一つ。開発はMVCモデルです。（MVCモデルについては今回は省きます。）

Model システムの中でロジックを担当。データベースとデータのやり取りを行う。

View 表示や入出力。Webブラウザに表示するHTMLを動的に生成する部分。

Controller ユーザーの入力に基づき、ModelとViewを制御する。コントローラーはクライアントから来たリクエストURLに応じて、あらかじめ設定した処理を行います。

<a id="#chapter2"></a>
## Thymeleafとは

「タイムリーフ」と読みます。テンプレートエンジンの一つです。ThymeleafにはHTMLの他に、XMLやJavascript、CSS等があります。
`/src/main/resources/templates/hello.html` のように`templates` フォルダ配下にテンプレートファイルを置いていきます。

```hello.html
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8" />
        <title>Hello Thymeleaf</title>
    </head>
    <body>
        <h1 th:text="${name}"></h1>
    </body>
</html>
```

<a id="#chapter3"></a>
## Controllerの記述
クラスに対して `@Controller` を記述することでSpringはそのクラスをControllerとして認識します。
ControllerはJavaのクラス、拡張子は.javaです。

```Controller
@Controller
public class Controller {
    ...
}
```

ページを表示するコントローラーを作成する場合
```
@Controller
public class GreetingController {

    @GetMapping("/greeting")
    public String greeting(@RequestParam(name="name", required=false, defaultValue="World") String name, Model model) {
        model.addAttribute("name", name);
        return "greeting";
    }
}
```
※ページを表示しようとアクセスしたときにエラーが出たときは以下が間違っている場合があります。

* コントローラーのファイル、テンプレートファイルの記述
* ページを置く位置が間違っている
    正　`/src/main/resources/templates/hello.html` 
    誤　`/src/main/resources/templates/HomeController.java`
* プロジェクト作成時の設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3071732/589af301-4409-461b-baeb-1957a867fef6.png)

<a id="#chapter4"></a>
## JAR/WAR

Spring開発中にJAR,WARというワードも出てきたので書いておきます。

WAR,JARはいづれもJava関連のモジュールを「デプロイ可能な単位」に固めたもの。この形式でJBossやTomcatといったアプリケーションサーバに配置して稼働させることが可能になります。

* JARファイル
JARファイルはJavaのクラスファイル等をまとめて固めた資源で「.jar」の拡張子になっている。

* WAR
Java製のWebアプリで利用されるクラスファイル(servlet)、設定ファイル、JSPやHTMLファイル、JAR形式のライブラリがまとめられている。拡張子は「.war」。

JARファイルはJava Runtime ENvironment（JRE）がクラスと関連リソースを含むアプリケーション全体を1回のリクエストでデプロイできるようにするもの。
WARファイルはWebアプリケーションのテストとデプロイを簡単に行うことができる。
Blenderで円が回って見えるアニメーション

## これなに

「玉が行ったり来たりしてるだけなのになぜか円が回っているように見えるのってBlenderでできそう」と思って作ってみました。

https://qiita.com/kenji-kondo/items/91ae417ad858ec4652e7

## 完成品

![circle.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13955/b17c7a96-d644-85a0-18a5-9c4654762eda.gif)

手動で適当に作っているので若干歪んでいます。

## 作り方

* ボールを作って、2往復するアニメーションを作成する。ただし、表示の期間は１往復分にする。
* Emptyを作って親にする。
* Emptyとボールを７組に複製して、Emptyを`180/7`度ずつ回転する。
* 各ボールのアニメーションをちょっとずつずらす。

## 苦労したところ

* ボールを６個作って、`360 / 6`ずつ回転して、うまくいかず。
* ボールを７個に変えて、角度を`360 / 7`に。
* 回転角度を`180 / 7`に。
* 途中で止まるので、２往復分のアニメーションに変更。
* 円が回るものの歪みまくる。
* アニメーションがリニアにしているのがダメだと気づく。サインカーブのように滑らかに変えようとするもなかなかうまくいかず。

たぶん、Pythonで作ればきれいに動くと思いつつあきらめる。

以上
文字はなくてもfont-sizeプロパティの設定が役立つことがありますよ

文字がない要素にfont-sizeプロパティを設定するって意味がわからん。
そう考えがちですが、そんなことはないのです。ふとした思い付きがあったのでご披露させていただきます。

課題は次のようなUIをGutenbergのブロックで制作するにあたってです。

![](https://itmaroon.net/home/wp-content/uploads/2023/08/1b08c0e30b4482ef1d952bcb988f6917.png)

フォームでユーザーに入力作業をしてもらっているとき、その進捗がどうなっているのかを表示するプログレスバーです。Bの数字とCのバーはAの文字要素に付加された擬似要素です。Bがbefore要素でCがafter要素です。B要素内には文字があるのでcssでfont-sizeを設定しました。コード全体としては次のようになります。
```
&::before {
  content: counter(step);
  counter-increment: step;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.3em;
  text-align: center;
  display: block;
  font-size: ${font_style_num.fontSize};
  font-family: ${font_style_num.fontFamily};
  font-weight: ${font_style_num.fontWeight};
  font-style: ${fontStyle_num};
  color: ${textColor_num};
  background: white;
  border: ${textColor_num} solid 1px;
  border-radius: 50%;
  margin: 0 auto;
}
```

${font_style_num.fontSize}のようにテンプレートリテラルで動的にプロパティ値を設定できるのはCSS in JSの一つである「styled-components」を使っているからです（styled-componentsについては別のブログで解説します。）。
このようにするとB要素の大きさは動的に変化します。
ここで問題が生じます。B要素の大きさが変化すると、C要素の縦位置を動かす必要が出てきます（C要素はB要素の中心の高さにないと不細工です。）。
C要素は次のようなコードで設定されています。
```
&::after {
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: -50%;
  top: 0.75em;
  background-image: linear-gradient(to right, ${textColor_num} 50%, ${bgColor_num} 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: all 1s;
  z-index: -1;
  /*put it behind the numbers*/
}
```
進捗の変化に応じてアニメーションさせるために`transition`などの設定がありますが、それは本題からそれるので無視してください。問題は`top: 0.75em;`のところです。emは親要素のフォントサイズを１としたときの相対値で設定する単位です。したがって、親要素であるA要素のフォントサイズが20pxだとすれば、0.75emは15pxになるということですね。
C要素の縦位置はこれで設定されています。しかし、A要素のフォントサイズはC要素の縦位置とは関係ないんです。関係あるのはB要素の大きさです。この変化をC要素に反映させるのはちょっと複雑です。

どうしたものかと悩んでいたのですが、ふと目が行ったのはA要素のCSSにある
```
width: 1.5em;
height: 1.5em;
line-height: 1.3em;
```
の部分です。これはB要素を〇で囲むためにフォントに外枠を設定している部分ですが、この数値はB要素のフォントサイズの変化に応じて変化します。なぜかというと、この単位emを決定する親要素はA要素のフォントサイズではなく、B要素のフォントサイズだからです。これはB要素のCSS設定に`font-size: ${font_style_num.fontSize};`があることの効果です。
だったら、C要素にも同じように設定してやればいいんじゃないのか。要素に文字がなくてもfont-sizeプロパティは設定できますよね。
ということで、こんなコードを書きました。
```
&::after {
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: -50%;
  font-size: ${font_style_num.fontSize};//これが入った
  top: 0.75em;
  background-image: linear-gradient(to right, ${textColor_num} 50%, ${bgColor_num} 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: all 1s;
  z-index: -1;
  /*put it behind the numbers*/
}
```
ばっちりB要素の真ん中にバーが設定されるようになりました。
A要素からフォントサイズを引っ張ってきて、その単位がpxか emか remかで条件分岐させて計算するしかないかなと思ってうんざりしていたのですが、こうすれば何の苦労もなく設定できました。

これってCSS in JSを使う以外の場面でも応用が効くと思いますよ。参考になればうれしいです。
音声のみで操作できるTODOアプリを開発してたら思ったより革命だった

# はじめに

この記事では、音声認識のみで扱える**Voice Todo**というアプリを作っている話をします。


# 既存TODOアプリのかゆいところ

皆さんはTODOアプリを使っていますか？

正直に言うと、私は**使っていません**。

TODOアプリを使わない理由はいくつかあります。

まず、**フリック操作**が苦手。
フリックがとにかく苦手です。
どれぐらい苦手かというと、PCとスマホで同じ100文字程度の文章を打つと4,5倍ぐらい時間がかかります。

また、**TODOの海**を形成しがち。
TODOアプリを使っていると、気づいたらTODOの海を構築しています。
というのも、基本的に整理フェーズを置いてないからなんでしょう。
結果、消化するよりも**探す時間**の方が使うという状態に陥ります。

うーん。
どうにか、TODOアプリで楽して管理できないかなー。

――――と思い立ったのが**Voice Todo作成のきっかけ**です。

Voice Todoのコンセプトは「音声認識だけで使える」というものを第一に、やって欲しいことを命令すればあとは裏側で色々やってくれる、というものになります。

現在作成中ではありますが、出来ることと今後の展望なんかを共有させてください。

また、どんな機能が欲しいかなど、アドバイスいただけたら幸いです。


# VoiceTodoのベース

VoiceTodoでは、**音声操作**を採用しています。
現在はWEB版のみですが、スマホでも基本は音声操作をメインにしようと思っています。
（モードチェンジで入力欄を操作できるようにはします）


画面の下部にて、こんな感じの音声認識操作パネルが存在します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/92c07d1f-4ec4-259c-d473-b74f23691deb.png)

ここで命令をすることで、色々な操作ができるようになっています。

次から具体的に何ができるかを見ていきましょう。


# 出来ること

VoiceTodoで出来ることをまとめていきます。


## 追加機能

一般的な追加機能です。
音声認識でくみ取って追加します。

![voice-todo (8).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/abd168e8-9b74-128a-7f32-282633f09da0.gif)


## 時間指定

時間を指定すると、開始日も指定できます。

![voice-todo (9).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/0b6f3725-9fd8-f852-5ee5-a26ef1c013a3.gif)


## 複数指定

一回の音声入力で複数のタスクを指定すると、勝手に判別して入れてくれます。


![voice-todo (10).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/6027e904-a0a8-3b0d-122e-ace7cc81ad3a.gif)


## フォルダー付け

タスクに基づいてフォルダの割り当てを自動的に行ってくれます。

![voice-todo (7).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/3475b7ac-12af-2518-13d5-30682bb534f7.gif)

現状できてる機能としてはこんな感じです。
まだまだ、追加したい機能などがあるので、以下で紹介します。

# 今後追加したい機能

今後どんな機能を作りたいかをまとめます。

## チェック指定機能

「あれ」「それ」が完了しました。
みたいな文言を言うとDoneにしてくれる機能です。

## フォルダ分割機能

「日常のフォルダを分割してください」
というと、指定されたフォルダを小さくしてくれる機能。

## タスク指定

今日の日付のものを、どの順番で行うといいか決めてくれる機能です。



# まとめ

今回は音声認識のみで利用できるVoiceTodoについて紹介させていただきました。

公開するかは正直微妙ではあります（コスト的に）が、興味がある方がいれば、何かしらの形で公開しようかなと思います。

また、色々と課題もあるので、今後はその進捗などもまとめます。
PHPにて変数の文字列が10ケタ且つ値が0または1であるかを確認する方法

本記事では、PHPで変数の文字列が10桁且つ値が0または1であるかを確認する方法について記載します。
## コードの例

以下に、指定した要件を満たす簡単なPHPコードの例を示します。

```php
<?php
    // PHP 7.4

    // 検証する変数を定義します
    $variable = "1010101010";

    // 変数が10桁で、0または1のみで構成されているか確認します
    if (preg_match("/^[01]{10}$/", $variable)) {
        echo "Valid variable.\n";
    } else {
        echo "Invalid variable.\n";
    }
?>
```

このコードでは、`preg_match`関数を使用しています。
`preg_match`は、指定した正規表現パターンが対象の文字列に一致するかどうかを確認する関数です。

ここでは`"/^[01]{10}$/"`という正規表現を使用しています。
これは、0または1の文字がちょうど10回繰り返される文字列に一致します。
^は文字列の始まりを、$は文字列の終わりを表します。
これにより、文字列が10桁であることを強制しています。

このコードは、変数が10桁の0または1のみで構成されている場合に"Valid variable."を、そうでない場合に"Invalid variable."を出力します。

なお、PHPのバージョンは7.4を使用していますが、これらの機能はPHP 5.2以降で使用可能です。
バージョンが異なる場合でも、基本的な動作は同じです。

以上、PHPで変数の文字列が10桁且つ値が0または1であるかを確認する方法について記載しました。
正規表現はパターンマッチングの強力なツールで、様々な状況で使用できます。
EC2コンソールに接続するとFailed to connect to your instanceが出る

<h1>前提</h1>
AMIはAmazon Linux2で、パブリックIPを自動付与。

セキュリティグループは22番ポートのSSH接続を許可している。
事前に作成したVPCのパブリックサブネットに紐づけている。

<h1>試したこと</h1>
AWSの公式ドキュメントを見て以下の点をチェックしたが全てクリアだった。

https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-instance-connect-prerequisites.html

- 使用中のAWSリージョンでサポートされているか
- 使用しているAMIはEC2 Instance Connectがプリインストールされているか
- インスタンスにバブリックIPアドレスが付与されているか確認
- セキュリティグループが22番ポートのSSH接続を許可しているか確認
- IAMユーザーに適切な権限が付与されているか確認

<h1>原因</h1>
セキュリティグループで22番ポートのSSH接続を許可していたが、プライベートサブネット自体のインバウンドルールで許可していなかった。
<h1>解決手順</h1>
VPC→サブネット→インスタンスが所属しているパブリックサブネットを選択

ネットワークACLタブから、ネットワークACLのIDを押下(画像の黒い箇所)

![スクリーンショット 2023-08-01 19.48.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781801/6bb925e9-ff0f-5348-75b8-5104ffc98c68.png)

対象のネットワークACLを選択し、「インバウンドルールの編集」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781801/30382150-d6b7-6b0c-9efc-fdb9347601d0.png)


「新しいルールを追加」を押下し、タイプをSSHに設定して保存
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781801/1ee433cd-a3c4-2b63-addf-7af05557f916.png)
Quiet.jsを使って音声でデータを持ち出す

# 前置き 

NTT-WEST CIRTでレッドチームとして活動している@ichikawa_hです。

本記事はレッドチームとして、攻撃者が用いる可能性のある手法を検証することで「防御」に活かすことを目的としているものです。収集している情報や検証内容は、上記の一環であり、攻撃を助長する意図はありません。

## 背景

端末からデータを持ち出す方法って何があるかなと考えたのが本記事の発端です。

一般的に端末からのデータの移動といえばクラウドにアップロードやUSBメモリなどですが、当然監視や制限されているケースが多いです。一方で音声出力はほぼ必ずインタフェースとして存在しており、通常データの持ち出しに使うわけではないため監視もされていません。そのため活用を検討する価値があるのではと思い調査を行いました。

想定としては、社員など内部犯が業務用の端末からイヤホンジャックにケーブルを挿してデータを音声に変換して、持ち出し先の端末のマイク端子から取り込むことを想定しています。

## 関連技術調査

音声としてデータ通信を行うものやアナログ通信について、主に速度面での参考に情報を集めました。

### 音響カプラ

電話のマイクとスピーカーを使ってデータ転送を行うやつ。
「2005年時点では28.8Kbpsの製品が市販」されていたらしい。

https://ja.wikipedia.org/wiki/%E9%9F%B3%E9%9F%BF%E3%82%AB%E3%83%97%E3%83%A9

### FAX

SuperG3の規格だと33.6Kbpsまで出るとのこと。
今回の想定も有線で行うこと前提なので、このくらいは出せるのかも。

https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%AF%E3%82%B7%E3%83%9F%E3%83%AA

### ADSL

可聴域以外を使えるのであれば速度面など参考になりそう。
「下り帯域は100Mbpsを測定可能な場合がある」らしいので、銅線のポテンシャルすごい。

https://ja.wikipedia.org/wiki/ADSL

### 関連しそうなブログなど

離れたところから超音波を使ってデータを抜き出す例が書かれています。
今回は内部犯が有線を使うケースを想定しているので、そこまで高度なことはやらないですが。。

https://gigazine.net/news/20131203-malware-jumps-air-gaps-using-inaudible-sound/

https://blog.kaspersky.co.jp/pc-speaker-data-exfiltration/33660/


## 既存ソフトウェア調査

githubにTopicとしてあげられていました。感謝。

https://github.com/topics/data-over-sound

https://github.com/topics/data-over-audio

# Quiet.jsを試す

やっと本題です。

ブラウザで簡単に使えるものとして、Quiet.jsというものが公開されていたので使ってみました。

https://quiet.github.io/quiet-js/


PC2台を用意して、ステレオミニのケーブルで端末Aのイヤホンジャックと端末Bのマイク入力を繋いだうえで実験。

受信側および送信側で上記サイトにアクセスし、それぞれReveive TextとSend TextのStartをクリックします。
![image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3523344/0123a4b2-4d53-b634-3b66-ec1ecd8db94b.png)


UltraSonicとAudibleのどちらを利用するか選べますが、私の環境ではAudibleしかうまくいきませんでした。

可聴域での文字転送を試したところ、10KBのテキスト転送に2分ほどかかりました。
bps変換すると約682bpsということで、このままでは通常使うようなデータの持ち出しには難しいことがわかりました。

またエラーが1-5%ほど発生するので、なんらかの追加処理が必要です。
さくっとやるならrarでリカバリレコードつけたうえで送る、高みを目指すなら双方のイヤホンとマイクを使って双方向通信にするなどでしょうか。

# まとめ

データの持ち出しが規制された端末からデータを持ち出す1つの手法として、Quiet.jsを使ってデータを音声にして送信するということを試しました。
速度面などから現段階ではそこまで現実的な方法とはいえないものの、簡易で幅広く利用可能いうメリットはあるので、方法の1つとして知っておくと面白そうです。

今後も様々なデータ持ち出し手法を調査・検討していきます。
データローダ―をバッチモードで実行

# データローダーをバッチモードでの実行する方法をメモっておきます。
※：バッチモードでの実行はWindowsでのみ可能です。

## 暗号化/復号化用のキーファイルを生成
コマンドプロンプトからデータローダのインストールディレクトリへ移動し、binディレクトリに移動
通常は　C:\Users\\{UserName}\dataloader\v5x.x.x\bin

``` Shell 
encrypt.bat -k <path to key file>
```
パスを指定しないと　C:\Users\\{UserName}\\.dataloader 配下に生成される。

## データローダ―でのログイン用のパスワードを暗号化
``` Shell 
encrypt.bat -e <password+SecurityTocken> <path to key file>
```
注：パスワードとセキュリティトークンを連結したもの
ここで私はパスワードとアクセストークンをセットして、ログインできず困ってました。

事前準備がそろったので、

## 作業ディレクトリ作成
例：C:\Workspace\Sample1
配下に、conf,data,logsのディレクトリを作成します。

C:\Users\\{UserName}\dataloader\v5x.x.x\configs より、　config.propertiesをコピーしてきます。
config.propertiesはDataloaderのUIツールで設定した設定値が反映されています。

C:\Users\\{UserName}\dataloader\v5x.x.x\samples より、process-conf.xmlをコピーしてきます。

## process-conf.xmlを修正します。
サンプルを見ながら、適切に修正します。下記はUpsertの例
・beanのidを修正
・propertyのNameを修正
・sfdc.debugMessagesFileにログ出力フォルダ指定（フルパス指定）
・sfdc.endpointを実際に本番かSandboxに合わせて修正
・sfdc.usernameをログインするユーザー名に設定
・sfdc.passwordを上記の暗号化したパスワードに設定
・process.encryptionKeyFileを実際にKeyファイルが生成されたパスとファイル名に設定（フルパス指定）
・sfdc.externalIdFieldを外部IDフィル―ドに設定
・sfdc.entityを対応するエンティティのApi名称に設定
・process.operationをオペレーションモードに設定
・process.mappingFileを実際のマッピングファイル（.sdl）ファイルに設定（フルパス指定）
・dataAccess.nameを読み込みするCSVファイル名称に設定（フルパス指定）
・dataAccess.typeはcsvReadに設定

## バッチ実行
コマンドプロンプトからDataloaderのインストールフォルダ配下のbinに移動
``` Shell 
process.bat <作業フォルダのconfまでのパス> <beanのid>
```

実行時にエラーが発生しないこと確認。
正常に終了したら、実際のデータを確認しましょう。
【Django】VPSでDBのdumpファイル作成とローカルへのバックアップ

## バックアップを作成

VPSにSSH接続し仮想環境を有効化、manage.pyがあるディレクトリに移動する。

```
$ cd dir_name
$ source env/bin/activate
$ cd project_name
```

#### dumpdata実行

アプリケーション名を指定しない場合、インストールされているすべてのアプリケーションがダンプされる。以下のコマンドは`json`で作成しているが、xml、jsonl、yamlでの作成も可能。

```terminal:terminal
USERNAME@xxx.xxx.xxx.xxx:~$ python manage.py dumpdata > dump_last.json
```

しかし、このまま実行するとエラーが発生することが良くある。

私の場合`permission`や`content_typees`を除外すると解決する事が多い。

```terminal:terminal
USERNAME@xxx.xxx.xxx.xxx:~$ python manage.py dumpdata --exclude auth.permission --exclude contenttypes > dump_last.json
```

この辺はデータベースの状態によって変わると思うので、エラーの内容をみて対応する。


https://docs.djangoproject.com/en/4.1/ref/django-admin/#dumpdata


#### 作成先

dumpdataで作成したファイルは、カレントディレクトリに作成されるので、`ls`を実行すると`dump_last.json`が表示されるはずです。

```terminal:VPS
USERNAME@xxx.xxx.xxx.xxx:~/dir_name/project_name $ ls
dump_last.json manage.py その他色々
```

## ローカルにダウンロード

SSH接続を終了しターミナルで実行する。

この時、VPSで操作する必要があるのでは？と思うかもしれないが、「ローカルにVPSにあるファイルをダウンロードする」のでをローカルで実行する。

-i オプションを使用することで、`scp`コマンドがリモートホストに接続する際に、指定した`pemファイル`を使用して認証を行います。

```terminal:terminal
$ scp -i /Users/name/.ssh/hoge.pem name@xxx.xxx.xxx.xxx:~/dir_name/project_name/dump_last.json ~/Desktop/
```

`SCP` + `-i` + `pemファイルのパス` + `ユーザー名とIP:dumpファイルのパス` + `ローカルの保存先のパス`

という形です。


## ローカルからアップロード

ダウンロードコマンドのパスを逆にするだけ。

```terminal:terminal
$ scp -i /Users/name/.ssh/hoge.pem ~/Desktop/ name@xxx.xxx.xxx.xxx:~/dir_name/project_name/dump_last.json
```


## インポート

当たり前ですが、dumpファイルに対応しているデータベースがないとインポートできないので、プロジェクトやアプリを作り直した場合は、migrateしてから実行する。

```terminal:VPS
$ python manage.py loaddata dump_last.json
```