OmniAICreator/Qiita-1.07M huggingface dataset:
route

routeコマンドで172.19.0.0の場合は、192.168.253.139をgatewayにするように経路を追加
```
[linuxstudy@localhost ~]$ sudo route add -net 172.19.0.0 netmask 255.255.0.0 gw 192.168.253.139
[sudo] linuxstudy のパスワード:
[linuxstudy@localhost ~]$ route -n
Kernel IP routing table
Destination     Gateway         Genmask         Flags Metric Ref    Use Iface
0.0.0.0         192.168.253.2   0.0.0.0         UG    100    0        0 ens33
172.17.0.0      192.168.253.139 255.255.0.0     UG    0      0        0 ens33
172.18.0.0      192.168.253.139 255.255.0.0     UG    0      0        0 ens33
172.19.0.0      192.168.253.139 255.255.0.0     UG    0      0        0 ens33
192.168.122.0   0.0.0.0         255.255.255.0   U     0      0        0 virbr0
192.168.253.0   0.0.0.0         255.255.255.0   U     100    0        0 ens33
```
jqをMacに入れるためだけに毎回四苦八苦するおまえへ

どうも、おまえこと若松です。

PC交換や転職等でMacbookのセットアップをする機会があるかと思いますが、1~2年に一回とかなので、まー忘れます。
特にコマンドラインでインストールするものはまず覚えてない。

その代表格が`jq`コマンドです。
毎回使い始めてちょっとしたあたりで、「あ、json整形してーな」と思うわけです。

# インストールチートシート
細かく見たい方はここを読み飛ばしてください。
XXXXXは読み替えてください
```bash
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
$ (echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/XXXXX/.zprofile         
$ eval "$(/opt/homebrew/bin/brew shellenv)"
$ brew install jq
```

# jq コマンドとは
`jq`コマンドはjsonの整形、加工ができる便利なコマンドです。
1行になって見にくいjsonを改行のある見やすい表示に変えたり、jsonの要素追加/削除して出力できたりと非常に使い勝手がよいです。
https://jqlang.github.io/jq/

# インストール手順
## Homebrewインストール
最初なので当然Homebrewも入っていません。
[公式サイト](https://brew.sh/)に従ってインストールを行います。
```bash
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
上記コマンドでインストールが完了すると以下2つのコマンドを実行するよう指示があります。
XXXXXはユーザー名なので適宜読み替えてください。（インストール完了後の指示には適切なXXXXXが入ったコマンド表示されています）
```bash
$ (echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/XXXXX/.zprofile         
$ eval "$(/opt/homebrew/bin/brew shellenv)"
```
上記コマンド実行が完了すると `brew` コマンドが実行できるようになります。
以下コマンドでHomebrewのバージョンが出力されるか試してみましょう。
```bash
$ brew --version
```
## jqインストール
Homebrewが使えるようになったので、`brew` コマンドで`jq`をインストールします。
```bash
$ brew install jq
```
以下コマンドで`jq`のバージョンが表示されることを確認しましょう。
```bash
$ jq --version
```
## jqコマンドの使い方
[公式チュートリアル](https://jqlang.github.io/jq/tutorial/)にあるコマンドを試してみましょう。
最初にGitHubのAPIでjsonを取得します。
```bash
$ curl 'https://api.github.com/repos/jqlang/jq/commits?per_page=5'
```
jsonが表示されたかと思います。
このjsonを以下のコマンドで`jq`に入力してみましょう。
```bash
$ curl 'https://api.github.com/repos/jqlang/jq/commits?per_page=5' | jq '.'
```
色分けがされて見やすくなったjsonが出力されたかと思います。
次に以下のコマンドで5つある要素のうち最初の1つだけ取り出してみます。
```bash
$ curl 'https://api.github.com/repos/jqlang/jq/commits?per_page=5' | jq '.[0]'
```
# まとめ
もう四苦八苦するなよ、おまえ！
My first post

## プロフィール
- 2022年新卒でエンジニア。
- 日々の業務は、AIを使った画像分析アプリの開発・提供。

## Qittaを始めた理由
- アプトプットする場が欲しかった。
- 勉強していることを可視化したかった。
- 自分の"コツコツ積み上げる"性格を生かした勉強をしたかった。
- ”伝える”ことをトレーニングしたかった。

## ルール（2023/07/19）
- 1週間で平日1回、休日1回の投稿を行う。
- ブログは短くてよく、内容は薄くても良い。

## 技術スタック
- python
- AI 特にComputer Vision
- Angular
- AWS
- GitHub
- webアプリ
Flutter x Agora リリースビルドでのみリモートビデオが真っ白になる

FlutterとAgoraを使って1対1のビデオチャットアプリを作っています。
デバッグビルドでは問題なく動作するのに、リリースビルドでのみリモートビデオが真っ白になるという問題に遭遇しました。

ググったら解決策出てきた。
https://github.com/AgoraIO-Community/Agora-Flutter-Quickstart/issues/103

結論
Expand使うとリリースビルドでのみバグる（のでContainerを使いましょう）

おしまい。
React-Slickでレスポンシブデザイン実装する方法を簡単に解説

## 投稿の趣旨
ポートフォリオサイトを作成する際にスライダーでReact-Slickを使用したのですが、React-Slickのレスポンシブに関する情報が少なくて僕自身困ったので、今回得た知見を投稿しようと思います

そのため、これはReact-Slickの網羅的な内容を解説する内容にはなっていません
## React-Slickでの設定
```js
import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";

export default function SimpleSlider() {
  const settings = {
    dots: true, //スライダー下の点の表示/非表示
    infinite: true, //無限スクロールの有効/無効
    speed: 500, //スライド切り替えの速度
    slidesToShow: 1, //一度に表示するスライド数
    slidesToScroll: 1, //一度にスライドする枚数
  };
  
  return (
    <Slider {...settings}>
      <div>
        <h3>Slide 1</h3>
      </div>
      <div>
        <h3>Slide 2</h3>
      </div>
      <div>
        <h3>Slide 3</h3>
      </div>
      <div>
        <h3>Slide 4</h3>
      </div>
      <div>
        <h3>Slide 5</h3>
      </div>
    </Slider>
  );
}
```
上記は最も一般的なスライダーを作成するコードです
一般的にReact-Slickにおいては様々な設定をsettingオブジェクトで実装してきます

settingオブジェクトに書き込むことで、React-Slickに「一度に表示するスライド数」とか「スライドの動く速度」などの様々な設定をすることができます

レスポンシブの設定もその中の一つです

## レスポンシブデザインの実装
ということで実際にsettingオブジェクトにレスポンシブの記載を書いていきます
下記のようにresponsiveというプロパティを追加して、値としてオブジェクトの入った配列を記載します
```js
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    
    // settingに追加します!
    responsive: [{}, {}, {}...]
  };
```
このresponsiveの配列のオブジェクトがそれぞれのレスポンシブの基準とスタイルを表します
実際に例を見た方が分かりやすいかもしれません↓
```js
const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 4, //← デフォルトではこれ
  slidesToScroll: 1,

  // settingに追加します!
  responsive: [
    {
      breakpoint: 1024, // 1024px以下の画面幅に対する設定
      settings: {
	slidesToShow: 3,
      },
    },
    {
      breakpoint: 600, // 600px以下の画面幅に対する設定
      settings: {
	slidesToShow: 2,
      },
    },
    {
      breakpoint: 480, // 480px以下の画面幅に対する設定
      settings: {
	slidesToShow: 1,
      },
    },
  ],
};
```
このように簡単なレスポンシブな設定を行いました
上記の例では、それぞれのレスポンシブオブジェクトでslidesToShowを設定することで、画面幅に応じて表示するスライドの数を変更しています

デフォルトでは4枚が表示されて、それぞれbreakpointのに達するとそのオブジェクト内の設定の枚数に変わっていきます(breakpointは数字だけでの入力で、単位はpx以外には対応していません)

slidesToShow以外にも、それぞれのレスポンシブに応じてほぼすべての設定を変更することができます

## 実際の使用例
実際にポートフォリオサイトでReact-Slickでを使いスライダーを作成しましたので、実際の動きなどの様子を見たい方はそちらを見てみてください↓

[実際の使用例はこちら](http://sotetu-portfolio.com/)
[flutter] quill text editorでonChangeのようにtextの変化を感知できる関数を自作してみた。

## はじめに

こんにちは、quill text editorでは、textfieldのonChangedのような文字の変化を取得する関数は用意されてないみたいです。（自分調べ）

ですが、既存のquillが提供されているメゾットとstatefullWidgetのinitStateでなんやかんやすると同じような関数を自作することができましたのでご紹介します。

## 公式ドキュメント導入

[quill公式ドキュメント](https://pub.dev/packages/flutter_quill)

ライブラリの導入に関してはここでは割愛します。
上記からアクセスしてください。

## controller参照

```dart:controller参照

class MyEditorPage extends StatefulWidget {
  @override
  _MyEditorPageState createState() => _MyEditorPageState();
}

class _MyEditorPageState extends State<MyEditorPage> {
quill.QuillController _controller = quill.QuillController.basic();
 

```

まずは上記のように、controllerを参照します。
ここではquillCOntrollerのbasicを参照していますが、ここはbasicのパラメータを参照しなくても全く問題ありません。


## initState内にメゾットを記載

```dart
 @override
  void initState() {
    super.initState();

   _controller.document.changes.listen((event) {

  print(_controller.document.toPlainText().toString()); 

  print(_controller.document.toPlainText().length);  

    });
    
  }
```


上記コードで文字の変化を取得できるようになったはずです。

これで、文字数のバリデーションをリアルタイムで更新できたり色々便利！


何かご指摘等あればぜひコメントお願いします！
【Swift】アプリ名を取得する

# はじめに
「Dispaly Name」でアプリ名を指定できます。
今回はここの「Display Name」をコードで取得します。
![スクリーンショット 2023-07-19 19.54.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/7155ba88-25cc-dac2-b366-b4de154137aa.png)

# 実装
```swift
import SwiftUI

struct ContentView: View {
    private let appName = Bundle.main.object(forInfoDictionaryKey: "CFBundleDisplayName") as? String
    var body: some View {
        Text(appName ?? "???")
    }
}
```

取得できました
![simulator_screenshot_ABDFFF2B-AA05-411B-913F-A2D16E3AD28E.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/57f8028e-92c3-cc9d-4c9b-dbd7ad66dc32.png)

# おわり
「Display Name」が空だとnilが返ってきます
GitHub ActionsでECSのタスク定義を取得する2つの方法

## はじめに
ECSデプロイのフローをGitHub Actionsで実装中、タスク定義を取得する方法が大きく分けて2種類あることが分かりました。
今回その2種類の解説を記事にしました。


## まず結論


1.AWS CLIでタスク定義(taskDefinitionの値のみ)を取得

```yml:workflow.yml
env:
  ECS_TASK_DEFINITION: task-definition
  CONTAINER_NAME: my-container

steps:
  - name: Amazon ECRへのログイン
    id: login-ecr
    uses: aws-actions/amazon-ecr-login@v1

  - name: タスク定義のダウンロード
    run: |
      aws ecs describe-task-definition --task-definition ${{ env.ECS_TASK_DEFINITION }} --query taskDefinition > task-definition.json

  - name: タスク定義に新しいイメージIDを記入
    id: update-task-definition
    uses: aws-actions/amazon-ecs-render-task-definition@v1
    with:
      task-definition: task-definition.json
      container-name: ${{ env.CONTAINER_NAME }}
      image: ${{ steps.login-ecr.outputs.registry }}/my-image:latest

```

<br>

2.別ファイルに記述したタスク定義を取得
```yml
env:
  ECS_TASK_DEFINITION: .aws/task-definition.json
  CONTAINER_NAME: my-container

steps:
  - name: Amazon ECRへのログイン
    id: login-ecr
    uses: aws-actions/amazon-ecr-login@v1

  - name: タスク定義に新しいイメージIDを記入
    id: update-task-definition
    uses: aws-actions/amazon-ecs-render-task-definition@v1
    with:
      task-definition: ${{ env.ECS_TASK_DEFINITION }}
      container-name: ${{ env.CONTAINER_NAME }}
      image: ${{ steps.login-ecr.outputs.registry }}/my-image:latest

```


## 1.AWS CLIでタスク定義(taskDefinitionの値のみ)を取得
作成済みのタスク定義リソースからtaskDefinitionの値を抽出しJSONに出力、それを取得します。
Terraformを使用しない場合、AWSマネジメントコンソールから必要に応じてタスク定義を修正します。差分管理ができないので、小さい個人開発向けでしょうか？

```yml
aws ecs describe-task-definition --task-definition ${{ env.ECS_TASK_DEFINITION }} --query taskDefinition > task-definition.json
```

```json:取得する値
{
  "taskDefinitionArn": "arn:aws:ecs:ap-northeast-1:012345678987:task-definition/task-definition:1",
  "containerDefinitions": [
    {
      "name": "nginx",
      "image": "nginx:latest",
      "cpu": 256,
      "memory": 300,
      "portMappings": [
        {
          "containerPort": 80,
          "hostPort": 80,
          "protocol": "tcp"
        }
      ],
      "essential": true
    }
  ],
  "family": "task-definition",
  "networkMode": "bridge",
  "revision": 1,
  "status": "ACTIVE",
  "requiresCompatibilities": ["EC2"]
}


```

## 2.別ファイルに記述したタスク定義を取得
タスク定義のファイルを作成し、それを取得します。
Terraformを使用しない場合、必要に応じて別ファイルを修正します。こちらは差分管理が出来ます。

```yml
env:
  ECS_TASK_DEFINITION: .aws/task-definition.json
# ...
task-definition: ${{ env.ECS_TASK_DEFINITION }}    

```


```json:.aws/task-definition.json
{
  "family": "task-definition",
  "networkMode": "bridge",
  "containerDefinitions": [
    {
      "name": "nginx",
      "image": "nginx:latest",
      "essential": true,
      "portMappings": [
        {
          "containerPort": 80,
          "hostPort": 80,
          "protocol": "tcp"
        }
      ],
      "memory": 300,
      "cpu": 256
    }
  ],
  "requiresCompatibilities": ["EC2"]
}

```



## Terraformの場合、AWS CLIでタスク定義を取得しよう。
わざわざ別ファイル(JSON)を作成する必要はないです。差分、インフラ管理が苦しくなるだけですね(笑)

## あとがき
私はTerraformを使用しているのでAWS CLIを使用します。タスク定義を記述しているファイル内にクラスターやサービス、ボリューム、環境変数の設定などの記述もあるのでECSの構築が一目瞭然、非常に分かりやすいです！
AWS認定クラウドプラクティショナーを受験した話

## はじめに
おはこんばんにちは。キティちゃんです。最近蒸し暑いかと思ったら急に雨が降り出したりと天気に困惑しています。今回は、最近受験したAWS認定クラウドプラクティショナーの資格のことについて書いてみたいと思います。これから受験を考えている人の参考になればなと思います。

## 受験しようと思ったきっかけ
AWSってよく話を聞くけど、自分はそこまでAWS理解してるわけじゃないよなぁとふと思ったのが受験してみようと思ったきっかけです。

## なぜAWS認定クラウドプラクティショナーなのか
元々アソシエイトの受験を検討していたのですが、AWSの資格について調べた時に、受験レベルが「AWSの業務経験が1年以上を対象」とした資格とあったので、「無理。。」となりました。そこで、さらに調べてみるとアソシエイトより下のランクに今回受験したAWS認定クラウドプラクティショナーを見つけました。対象者は「AWSの業務経験が半年以上」と書いてあった気がしますが、製品紹介といったAWSのサービスそのものに関する知識を問うような問題が中心とのことだったので、これなら勉強すれば何とかなりそうと思い、受験することにしました。また、AWSのサービスについて、名前はいくつか知ってるけど、そのサービスが具体的に何ができるのかというのを知らなかったので、用語を理解する意味も兼ねていました。

## 受験者のレベル
新卒の時に、マニュアルをみながらAWSでアプリケーションを構築したことがあったぐらいで、AMI、EC2、Elastic IP、S3の名前を知っている程度でした。

## どうやって勉強したのか
以下の2つをメインとして学習を進めていきました。
（1）『AWS認定資格試験テキスト AWS認定 クラウドプラクティショナー』著：山下 光洋 (著), 海老原 寛之 (著)
https://www.amazon.co.jp/AWS%E8%AA%8D%E5%AE%9A%E8%B3%87%E6%A0%BC%E8%A9%A6%E9%A8%93%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88-AWS%E8%AA%8D%E5%AE%9A-%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E3%83%97%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%BC-%E5%B1%B1%E4%B8%8B-%E5%85%89%E6%B4%8B/dp/4797397403/ref=asc_df_4797397403/?tag=jpgo-22&linkCode=df0&hvadid=295691444786&hvpos=&hvnetw=g&hvrand=557575743704714006&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009299&hvtargid=pla-718362586207&psc=1&th=1&psc=1

（2）『【2023年版】この問題だけで合格可能！AWS 認定クラウドプラクティショナー 模擬試験問題集（6回分390問）』
https://www.udemy.com/course/aws-4260/

（1）の教材を5月の中旬に購入し、毎日1時間、土日は＋1~2時間を使って、1章ずつ読み進めていきました。勿論、各章にある練習問題も解き、次の章の問題を解くときは前日に解いた問題の復習も行いました。全部で10章まであり、10日程で読み終わりました。こちら教材は「AWSにはこういうサービスがあるんだなぁ」ぐらいのものです。なので、そこまで各サービスについて深堀している訳ではありませんのでご注意ください。
【補足】最近Twitterで知ったのですが（23年7月3日時点）、どうやら第2版が近々発売されるそうです。。。

（2）はUdemyの模擬問題集です。基本レベルが2つ、本番レベルが4つの計6つの模擬問題があります。「この問題だけで合格可能！」と謳っていますが、ある程度の知識や業務経験のある人であれば、この問題だけでも受かりそうだなぁという印象でした。私は知識や業務経験がほぼない状態だったので、模擬問題集だけでは厳しかったと思います。この模擬問題集は回答だけではなく、用語の解説をしてくれています。また、不正解の用語の解説もついているため、非常に助かりました。こちらの問題集は全ての模擬問題集の正答率が100％出せるようになるまで何度も問題を解きなおしました。

## 受けてみた感想
今回の得点は789点とまずまずな点数ではありましたが、合格することができました、プラクティショナーは700点以上で合格となるため、ギリギリ合格というわけではなさそうです。問題は全部で65問で、難易度は模擬問題集の中間レベル（基本と本番の間ぐらい）という印象でした。この手のベンダー系の資格は受ける日によって問題も変わるのでたまたま難易度が易しめだったかもしませんが。。

## まとめ
今回はAWS認定クラウドプラクティショナーの資格のことについて書いてみました。私レベルの経験でも十分合格は狙えるので、経験がある人にとっては容易かもしれません。少しでも本記事が誰かの役に立つことを願っております。頑張ってください。
<script>タグが入らないからXSSが発火しない！そんなわけ、な話

## はじめに
おはこんばんにちは。キティちゃんです。最近とても暑くて困っています。冷房を使おうかと思うけど、電気代の高騰もあり、なかなか使うことを躊躇っています。皆様も熱中症にはお気を付けくださいませ。それはさておき、今回はXSSのことについて書いてみたいと思います。

## XSSとは
XSSとは、クロス・サイト・スクリプティング（以降、XSS）の略であり、スクリプトを使用して、情報漏洩といった影響度の大きい問題を引き起こさせる攻撃となります。

## よくある対策方法
よくあるXSS対策としては、タグ「<、>」やシングルクォーテーション「'」といったXSSを発火させるようなスクリプト構文をサニタイジングすることです。PHPとかだとhtmlspecialchars関数が使われたりします。

## 対策の抜け漏れ
昔みたことがあるのが、scriptタグが入っている場合は、サニタイジング処理をするがsタグといったように、scriptタグではないパターンの場合、タグがサニタイジング処理されていないケースがありました。こういった場合、何が起きるかというと、イベントハンドラ型のXSSが挿入され、XSSが発火します。

## イベントハンドラ型のXSSとは
scriptタグを使用しなくとも、onclickといった何かユーザ側で操作をした際に、発火するXSSとなります。

## なぜ対策漏れが起きるのか
推測にしか過ぎませんが、scriptタグさえ押さえとけば、XSSは起きないだろうという考えにより、用意された関数を使用するのではなく独自のサニタイジング処理を行う実装にしているからだと思います。例えば、パラメータ値にscriptタグが入っている場合は、「<」を「＆lt;」に置き換えるようなstr_replaceを使った処理にしているなどが考えられます。いやまあ、ちゃんとスクリプトが動作しないようにサニタイジング処理をされているのであればいいのですが、抜け漏れがあるあたり、ちゃんと実装できていないんですよね。

## まとめ
今回はイベントハンドラ型のXSSについて書いてみました。独自の実装をされるのもいいのですが、対策の抜け漏れの原因にも繋がり、セキュアではなくなってしまいます。より、セキュアなWebサイトを設計・構築するのであれば、用意されたフレームワークなり、関数なりを使用してなるべく独自の実装は避けることを推奨します。

## 参考
・『イベントハンドラ』
https://www.tohoho-web.com/js/onevent.htm

・『クロスサイトスクリプティング【Cross-Site Scripting：XSS】とは｜図でわかる脆弱性の仕組み』株式会社ユービーセキュア社
https://www.ubsecure.jp/blog/cross-site-scripting
オペレーティングシステム（OS）の役割

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/f49d1bbb-b377-8d91-5ff4-2813a7dbe189.png)
１：オペレーティングシステム（OS）の役割
　オペレーティングシステム（OS）の役割は、CPU、メモリ、ハードディスク装置に代表されるコンピュータ資源を管理することです。

　OSの特徴：
①シングルタスク：同時に複数のプログラムを実行することができず、１つのプログラムだけを実行できる方式。

②マルチタスク：同時に複数のプログラムを実行することができる方式。

③リアルタイムOS（RTOS：アールティーオーエス）：定められた時間アニ処理を完了させる機構を持つOSである。エンジン、ロボット、DVDレコーダーなどの組込みシステムを制御する際に利用する。
→試験にはこう出る：「組み込みシステムでリアルタイムOSが用いられる理由」は、「期待される応答時間内にタスクや割込みを処理するための仕組み」が備わっているから。

④シングルユーザ：OSを１ユーザだけが利用できること。複数ユーザが同時に利用することはできない。初期のパソコン用のOSはシングルユーザであった。

⑤マルチユーザ：OSを複数ユーザが同時に利用できること。現在のパソコン用OSはマルチユーザである。

⑥CUI（Character User Interface）：キーボードでコマンド（命令）を入力して利用する形態。WindowsのコマンドプロンプトやUnixのシェルがCUIである。

⑦GUI（Graphical User Interface）：ウィンドウやメニューを操作して利用する形態。
バグレポートはお手紙

**「バグを報告したんだけど、余裕があれば直すって言われちゃった…」**
QAとしてテストをされている方なら、一度はこんな経験があると思います。
もちろんお仕事なのでリソースが限られてて、めちゃめちゃお忙しいのも肌で感じて理解してるんですが、、、
正直、検出した問題をスルーされたような気分になって、こんなバグを報告した自分には価値がないのでは…オレはQAに向いてないんだ…きっとそうだ…チクショー…とメンタルにダメージを蓄積する方もいるかもしれません（若い頃の私）

さて、
QAエンジニアとして、重要な役割のひとつが「テスト」です。
このテストから生まれる主なアウトプットが「バグレポート」ですね。
これは検出したバグを修正していただくための重要な通信手段になります。
なにより、バグが修正されなければ品質は上がりません。。。

## バグレポートはお手紙です。QAからの直訴状です。
（直訴状って言っちゃうと、修正を見送られたQAは切腹しなきゃいけませんが…）
バグレポートを書く際に注意すべき点はいくつかありますが、（レポートのフォーマットだったり、伝わりやすくするためにスクショや動画を添付するなど：この辺はいつか書きたい）
特に重要だなと常々思っているのが、**「そのバグレポートは誰宛なのか」** です。
バグレポートは文字通り「お手紙」であり、
QA担当者の「このバグを修正して欲しい！」という意志を伝えるツールです。
それは、誰に宛てられ、その人が何を修正すべきかを理解できるように書かれているかどうかが問われます。

## ちょっと具体的にイメージ
 - 単純に機能としての不具合：担当エンジニアさん本人に宛てて書く
 - デザインとの差異：デザイナーさんを思いつつ書く
     - せっかくあんなに素敵なデザインなのに、実機ではヘンな見栄えになっててやりきれない…
 - エッジケースでユーザーが不利益を被る可能性がある：PMさんに宛てて書く
     - 「このバグのせいで、どんなユーザーがどのように困るのか」を具体的に説明し、その影響がどのようなユーザーや環境に及ぶのかを明確にすることが重要になります。
     - 場合によっては、端末やブラウザのシェアのデータを添えることも。（8.7%って、ユーザーさんxx人もいるのか…など想像しやすい）

## 修正されなきゃ意味がない（とも言い切れないけど）
「報告した数 / 修正された数」は、バグ修正率として可視化でき、それは「品質を向上させた数」を示す一つの指標となります。
つまり、修正されてこそバグレポートの意味があると言えそうです。

しかし、すべてのバグレポートが可視化できるわけではありません。
テストはシステムの健康診断のようなもので、システム全体の状況を把握するためにも、可視化できない報告も非常に重要ではありますね。

## まとめ
バグレポートを起票する際は「誰に刺すか」を明確にイメージして、
「どう書けばあの人に刺さるだろう…」とその人が理解しやすく、かつ具体的な修正行動を取れるような形で書くことを心がけることが大切です。
それにより、少しでも品質を向上させることができたら嬉しいですね！

（補足）この記事はChatGPTに主題と具体的にアレコレ入れて生成されたものを大幅に加筆修正しました

それでは！良いバグレポートライフを！

（この記事を読んだ知り合いのエンジニアさんに「いや、あなたのレポート、わかりにくいけどね…」って言われるんじゃないかとビクビクしながら筆を置きます）
DbRef/BsonRef に指定したプロパティは先にコレクションに追加しよう


### 概要

* LiteDBでは DbRef/BsonRef + Include() で リレーションを定義/解決できます
* ただし、コレクションにオブジェクトを追加する際、参照先の項目が先にコレクションに存在しない場合、参照元（`DbRef`や`[BsonRef]`を指定した側）を更新した際に参照情報が失われます
* 参照先、子側のコレクションを先に更新しよう

### コードで解説

クラスとコレクションの定義がこうだとして
```csharp
// 参照元クラス
public sealed class StoryboardFrameEntity
{
    public Guid FrameId { get; set; }

    [BsonRef]
    public List<StoryboardDialog> Dialogs { get; set; } = new();
}

// 参照先クラス
public sealed class StoryboardDialog
{
    [BsonId(autoId:true)]
    public int DialogId { get; set; }

    public string DialogText { get; set; } = "";
}

private readonly ILiteCollection<StoryboardFrameEntity> _frameCollection;
private readonly ILiteCollection<StoryboardDialog> _dialogsCollection;

_frameCollection = _liteDatabase.GetCollection<StoryboardFrameEntity>();
_dialogsCollection = _liteDatabase.GetCollection<StoryboardDialog>();

```



### OKパターン
```csharp
// 先に参照先アイテムをコレクションに追加している
// こうすれば_frameCollection.Upsert() 時にentity.Dialogsを参照として解決できると思われる
_dialogsCollection.Upsert(entity.Dialogs);
_frameCollection.Upsert(entity);
```

### NGパターン
```csharp
// 参照先アイテムがコレクションに無い状態で更新している
_frameCollection.Upsert(entity);
_dialogsCollection.Upsert(entity.Dialogs);

// var otherEntity = _frameCollection.Include(x => x.Dialogs).FindById(entity.FrameId);
// 再取得した otherEntity の Dialogs は 更新前の状態のままになっているはず
```

## 参考

https://xamlbrewer.wordpress.com/2020/04/15/using-litedb-as-a-local-nosql-database-in-uwp/
一眼レフで撮った写真をbashで整理する

初投稿です。
# 目標　
撮影日ごとにファイル分け
## SDカードに記録されたファイル構造
./100CANON/IMG_0001.JPG IMG_0002.JPG ...


## それぞれの写真に日付と時刻を挿入

```bash:changename.sh
#!/bin/bash
path="./100CANON/"
ls -1  $path> list1.txt
while read fn; do
#set date
tmp1=$(stat -c%z $path$fn |awk '{print $1}'|tr -d '-') 
#set time
tmp2=$(stat -c%z $path$fn |awk '{print $2}'|awk -F'[.]' '{print $1}'|tr -d ':')

echo $tmp1"_"$tmp2"_"$fn  #for check
mv $path$fn $path$tmp1"_"$tmp2"_"$fn

done < list1.txt
rm list1.txt
```
:::note info
stat -c%z　でファイルの最終修正日時を取得
%ZはEpoch（1970年1月1日0時0分0秒）からの秒数
:::

## 日付ごとのフォルダに写真の移動
```bash:move.sh
#!/bin/bash
path="./100CANON/"
path_new="./CANON_moved/"　　　 #set new file name
mkdir $path_new
ls -1  $path> list1.txt
while read fn; do
tmp1=$(echo $fn | head -c 8)
mkdir $path_new$tmp1            #Create files by date
mv $path$fn $path_new$tmp1

done < list1.txt
rm list1.txt
```
Reactの用語まとめ

Reactで使われる用語などを自分用にまとめました。
認識間違っている部分ありましたら教えてください。

Reactでできること
----------
・スライドショー
・ポップアップウィンドウ
・カウントダウン
・入力金額の自動化
・ブラウザ制御
・Ajax
など、JavaScriptでできることは大体できる。

コンポーネント
----------
コンポーネントとは、画面上で表示される部品のこと。
一つのページに表示する要素を一つのファイルに全て記述するということではなく、
ボタン用のコンポーネント、フォームのコンポーネントなど、表示される要素を細分化して部品として扱い、それをまとめて表示するイメージ。

コードはhttps://ja.legacy.reactjs.org/docs/components-and-props.html から引用
#### クラスコンポーネント
```
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
```

#### 関数コンポーネント
```
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
```
webアプリには画面上にコンテンツを表示するだけではなく、非同期にデータを保存するとか、新しい画像を呼び出して古い画像は削除するなど、複数の処理が入るのが常。
それら複数の処理をまとめてしまおう！というのが __関数__ 。
上記のコードであれば`Welcome`関数はh1タグで「Hello, {引数の中に入っている名前}」が表示される。
returnで表示するエレメント（要素）を返すというのが基本的な形で、
`return null;` もしくは`return false;`とすれば空の要素が返せる。
こちらが主流になっている。

React Hooks
----------
関数のコンポーネントに様々機能を追加できるもので、Reactの人気に火をつけた立役者。
React Hooksには複数の機能がある。

JSX
----------
「JavaScript XML」の略。JavaScriptの拡張機能でHTMLタグの記述ができる。
コンポーネント化している（Reactは部品ごとにHTML/CSS/JavaScriptをまとめている）

HTMLファイルで`<script type="text/babel"></script>`でくくるとHTMLタグを表示することが可能になる。

フラグメント
----------
Reactのコンポーネントは親要素を一つしか持つことができないので
`<> </>`（フラグメント）で囲うことで複数要素を表示できる。`<React.Fragment></React.Fragment>`や`<div></div>`で囲っても同じ結果になる。
```
function App() {
  return (
    <>
    <p>フラグメント</p>
    <p>表示できるかな</p>
    </>
  );
}
```

随時追加していきます。
MacでCSVファイルを分割

デフォルトで入っているsplitコマンドでも分割できるが、使えるオプションが少ないのでgsplitコマンドをインストールして使用する。

# gsplitコマンドのインストール

```
# gsplitコマンドをインストール
brew install coreutils
```

# 実行

```
# コマンド
gsplit -l ${分割する行数} -d -a ${連番の桁数} ${対象のファイル} ${分割後のファイル名} --additional-suffix=.${分割したファイルの拡張子}

# (例)test.csvを100行毎に「file_001.csv」の形式で分割する
gsplit -l 100 -d -a 3 test.csv file_ --additional-suffix=.csv
```

# オプションの内容

| オプション | 内容 |
|:-:|:-:|
| -l ${行数} | 分割する行数 |
| -d | 分割後のファイルに連番をつける |
| -a ${連番の桁数} |  |
| --additional-suffix=.${拡張子} | 分割したファイルの拡張子 |
ifconfig

ifconfigでens33のipアドレスを192.168.253.139から192.168.253.140に変更した
```
[linuxstudy@localhost ~]$ ifconfig
ens33: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet 192.168.253.139  netmask 255.255.255.0  broadcast 192.168.253.255
        inet6 fe80::7b18:ba6f:58cb:d149  prefixlen 64  scopeid 0x20<link>
        ether 00:0c:29:36:8c:6f  txqueuelen 1000  (Ethernet)
        RX packets 26255  bytes 19805153 (18.8 MiB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 16151  bytes 3398402 (3.2 MiB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

                                 :
                                 :
                                 :
[linuxstudy@localhost ~]$ sudo ifconfig ens33 192.168.253.140 up
[linuxstudy@localhost ~]$ ifconfig ens33 
ens33: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet 192.168.253.140  netmask 255.255.255.0  broadcast 192.168.253.255
        inet6 fe80::7b18:ba6f:58cb:d149  prefixlen 64  scopeid 0x20<link>
        ether 00:0c:29:36:8c:6f  txqueuelen 1000  (Ethernet)
        RX packets 26399  bytes 19814725 (18.8 MiB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 16288  bytes 3410040 (3.2 MiB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

```
Python　書き方その1

Pythonのプログラムの実行方法として、IDLEを利用する方法がある。
IDLEは、Pythonのインストール時に漏れなくついているツールです。

起動するとPythonシェルが起動するため、エンターキーで逐次実行が可能です。

IDLEで保存したファイルは、開いて、「RUN」タブから「RUN > MOJUL」を選択することで実行することができる。


PADでの実行も、Pythonスクリプトなので、書き方は同じはず。
PAD セレクターの編集方法

Microsoft Power Automate for Desktop(以下PAD)のセレクターの編集方法を記載します。
HTMLのID名やクラス名がコロコロ変わるWebサイトは多く存在するため、セレクターの編集で不要な要素を削除しておくことは有効です。


セレクターとは
Webページやデスクトップアプリケーション上のどの位置に部品が存在しているかを特定するための情報のことです。
セレクターはUI要素の住所のようなもので、各UI要素がセレクターを持っています。


まずはUI要素を追加します。
「Webページのリンクをクリック」などのアクションを選択して、「UI要素」から「UI要素の追加」を選択します。
PAD画面が最小化され「UIピッカー」が表示されます。
追加したいUI要素を選択して「Ctr + 右クリック」することで、UI要素が追加されます。


次にセレクターを編集します。
フローデザイナーの画面右側の「UI要素アイコン」をクリックします。（ひし形が積み重なったアイコン）
クリックすると、右側が「UI要素ペイン」というUI要素を追加・編集できる画面が表示されます。（この画面からもUI要素を追加できます）
UI要素を選択すると、各UI要素の「編集画面」になります。ここではそのUI要素の編集、セレクターを確認できます。

「編集画面」に表示されるものは以下とおりです。
① セレクター情報の一覧
② 要素の階層構造
要素にチェックされている情報はセレクター判定（Power Automate for desktopで要素を探しに行く際）の対象となります。
チェックされていない要素は判定対象外となります。
③ 要素の属性
要素を探すために対象となる属性情報とその判定条件、値になります。
属性にチェックした情報が判定対象となります。
演算子は、「⁠と等しい」「⁠と等しくない」「⁠含む」「⁠次の値で開始」「⁠次の値で終わる」「⁠正規表現一致」のいずれかの条件を選択できます。
値には、変数の利用も可能です。
④ テキストエディター、ビジュアルエディター切り替え
⑤ セレクターのプレビュー


また、「UI要素ペイン」ではUI要素の名前変更も可能です。
変更したいUI要素を選択して、右の三点リーダーから「名前の変更」で名前変更が可能です。

「セレクタービルダー画面」では、値には変数を設定することも可能です。

UI要素が取得しにくい場合は、キーの送信アクションや画像認識を用いた方が有効です。
GeoPandasで空間結合を行い、ポリゴン内に含まれるポイントの属性情報をポリゴンの属性にカンマ区切りで付与する

# はじめに
PythonのGeoPandasライブラリは、地理空間データの操作を効率的に行えます。
ArcGISやQGISなどでデータ処理するより、高速（であることが多い）かつ履歴が残るため、私は好んで使用しています。
今回は、GeoPandasを使って以下の処理をしてみます。

- ①行政界ポリゴンと②学校ポイントを準備する
- 各行政界に存在する学校の名前を把握する
    - ①行政界ポリゴンに新しく属性を追加し、対象の行政界に含まれる②学校の名前をカンマ区切りで入力する

使用したPythonとGeoPandasのバージョンは以下の通りです。
Python: 3.10.9 
GeoPandas: 0.9.0


# データの準備
今回使用するデータは、[国土数値情報ダウンロードサイト](https://nlftp.mlit.go.jp/)から群馬県のデータをダウンロードして使用します。

- 行政区域データ
https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-v3_1.html
- 学校データ
https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-P29-v2_0.html

# コード
## 必要なライブラリのインポート
```python:python
import geopandas as gpd
import pandas as pd
import matplotlib.pyplot as plt
```

## データの読み込みと確認

行政界のポリゴンデータを読み込みます。
```python:python
admin_area = gpd.read_file("data/N03-20230101_10_GML/N03-23_10_230101.shp", encoding="shift-jis")
admin_area.head()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584199/36b34a1a-ddcf-5fb8-d7a7-417a2d1d7436.png)


学校のポイントデータを読み込みます。
```python:python
school_point = gpd.read_file("data/P29-21_10_GML/P29-21_10.shp", encoding="shift-jis")
school_point.head()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584199/8b84778f-49de-f751-af7a-fd9df8e69a3b.png)

## データをプロットして確認する
それぞれのデータの位置関係を確認してみます。

```python:python
fig, ax = plt.subplots(figsize=(10, 10))
admin_area.plot(ax=ax)
school_point.plot(ax=ax, color="red", markersize=1)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584199/e66ea087-b9e9-271f-5b60-e15436b65d18.png)

## 2つのデータを空間結合する
行政界ポリゴンと学校ポイントは`geopandas.sjoin`関数を使って、空間結合させます。
https://geopandas.org/en/stable/docs/reference/api/geopandas.sjoin.html

`sjoin`関数の特徴は以下の通りです。
- pandasの`merge`関数とほぼ同じように使用できる
- 引数の`op`に空間的位置関係を指定する（GeoPandasのバージョンによっては`op`ではなく`predicate`）
- `op`のデフォルト値は`intersects`

[GeoPandasのドキュメント](https://geopandas.org/en/stable/docs/user_guide/mergingdata.html#binary-predicate-joinsintersects)を参照すると、 `op`で指定できる空間的位置関係は以下の通りです。
- contains
- within
- touches
- crosses
- overlaps

以上を踏まえ、行政界ポリゴンと学校ポイントを空間結合します。
空間結合した後は、`groupby`関数を活用しつつ、学校の名前を行政界単位でまとめます。
まとめた結果を`merge`関数を使って行政界ポリゴンに結合させて完成です。
```python:python
# 行政界ポリゴンと学校の間の空間結合を行う
admin_with_schools = gpd.sjoin(admin_area, school_point, how='left', op='contains')

# 学校の名前をカンマ区切りで結合する
schools_by_admin = admin_with_schools.groupby('OBJECTID')['P29_004'].apply(lambda x: ', '.join(x.dropna())).reset_index()

# 行政界ポリゴンの任意の列に学校の名前を入力する
admin_area['school_names'] = admin_area.merge(schools_by_admin, left_on='OBJECTID', right_on='OBJECTID', how='left')['P29_004']

# 結果を表示する
admin_area.head()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584199/81adf928-0837-62e9-8a6a-a8281e130dce.png)

## 処理した結果の確認
処理した結果をQGISで確認してみます。
上手に処理できました！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584199/8ef42f51-b1b2-7842-bdbc-8f2113df7616.png)
GitHub Desktopしか使えなかった人がコマンドでsshを使ってGitHubに接続する

# 最初に
今まで研究活動とかではGitHub Desktopしか使ってこなかったが、それでは困る場面が度々出てきた（cloneとpushとpullくらいしか対応していない）のでやり方を理解するとともにメモ書きします。
最低限の情報に絞るかつ、細かく書くことによって初心者にも優しい記事を目指します。(多分)

## 前提条件
usernameとuseemailは登録しましょう。
GitHubに登録したものとは別でもいいです。
```
$ git config --global user.name "好きなユーザー名"
$ git config --global user.email "自分のemail"
```

### 登録の確認
```
$ git config --global user.name
登録したものが表示されます
$ git config --global user.email
登録したものが表示されます
```

## GitHubに接続
### 暗号キーの作成
暗号キーの作成をしないとコマンド経由でリポジトリのクローンとかできないみたいです。
```
$ ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (C:\Users\ユーザー名/.ssh/id_rsa):
```
Enterを押してください。
どのディレクトリで秘密鍵を作ってもユーザー直下に作成されるみたいですね。

```
Enter passphrase (empty for no passphrase): //何も入力せずEnter押しました
Enter same passphrase again: //同じく何も入力せずEnter
Your identification has been saved in C:\Users\ユーザー名/.ssh/id_rsa.
Your public key has been saved in C:\Users\ユーザー名/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:なんかすごい長い文字の羅列
The key's randomart image is:
+---[RSA 4桁の数字]----+
|                 |
|                 |
|                 |
|      なんか     |
|      変な       |
|     文字列      |
|                 |
|                 |
|                 |
+----[SHA256]-----+
```
こんな感じのが出ます。
これでC:\Users\ユーザー名/.ssh/にid_rsaとid_rsa_pubが作成されました。
id_rsaが秘密鍵、id_rsa_pubが公開鍵だと思われます。

### 暗号キーをGitHubに登録
GitHubのアカウントのSettingから「SSH & GPG keys」を選択し、SSH keysから「New SSH keys」ボタンを押します。
Title:好きなの入れましょう。自分は「Desktop_windows」にしました。
Key type:Authentification Key　のままでいいです。
Key:公開鍵を入力します。次で説明します。

#### 公開鍵の取得
catコマンドで公開鍵の文字列を取得します。
※今まではコマンドプロンプトでできましたが、catコマンドはPowerShellでしか使えません。
<font color="red">**必ずPowerShellでやってください。**</font>
ターミナルでC:\Users\ユーザー名/.sshまで行きます。
```
PS C:\Users\ユーザー名\.ssh> cat id_rsa.pub
ssh-rsa AAAAB3Nza... =ユーザー名@DESKTOP-英数字
```
これのssh-rsaからの文字列(この例だとssh-rsa AAAA...からDESKTOP-英数字まで全て)コピーしてください。
貼り付けるとssh-rsaの後に改行が入ると思いますがそのままで大丈夫です。

### 接続
暗号キーの登録が完了したら接続します。
PowerShellに「ssh -T git@github.com」と入力しましょう。
```
PS C:\Users\ユーザー名\.ssh> ssh -T git@github.com
Warning: Permanently added the ECDSA host key for IP address 'XX.XX.XXX.XXX' to the list of known hosts.
Hi ユーザー名! You've successfully authenticated, but GitHub does not provide shell access.
```
これで完了です。
お疲れさまでした。

# 最後に
クローンの方法とかも自分の理解が進めば書こうかなの気持ちです。
AR名刺を作ろう！

名刺からARが飛び出してきたらカッコいい！
そう思って、AR名刺を作ってみました！

![Screenshot_20230519-184547~2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2065133/e48e3621-7c20-5eef-236b-ffc0a70f3761.png)

名刺から猫ちゃんが飛び出してきて、とっても可愛い。

https://ar-js-org.github.io/AR.js-Docs/

ARの実装にあたっては、AR.jsというJavaScriptのライブラリを使用しています。
scriptタグで埋め込めば、HTMLだけで完結するので github.io にお手軽公開することもできます。

書いたコードはたったこれだけです（3dモデルは別に必要）

```HTML
<!DOCTYPE html>
<html>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <body style="margin : 0px; overflow: hidden;">
        <a-scene
            cursor="rayOrigin: mouse"
            vr-mode-ui="enabled: false;"
            renderer="logarithmicDepthBuffer: true;"
            embedded
            arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
        >
            <a-assets>
                <a-asset-item id="cat-obj" src="./cat.obj"></a-asset-item>
                <a-asset-item id="cat-mtl" src="./cat.mtl"></a-asset-item>
            </a-assets>
            <a-marker type="pattern" url="./apple.patt">
                <a-entity>
                    <a-obj-model
                      position="0 0 0"
                      scale="0.05 0.05 0.05"
                      rotation="270 0 0"
                      src="#cat-obj"
                      mtl="#cat-mtl"
                      id="sample"
                    >
                    </a-obj-model>
                </a-entity>
            </a-marker>
            <a-entity camera></a-entity>
        </a-scene>
        <script>
            function boxClick() {
                window.location.href = "https://hiroki-yod.com";
            }
            let box = document.getElementById('sample');
            box.addEventListener('click', boxClick);
        </script>
    </body>
</html>
```
これからリアルでお会いする方はぜひAR名刺を受け取ってもらえると嬉しいです。

以上、AR名刺を作ろう！でした。
lsof

firefoxが46784portで通信している
```
[linuxstudy@localhost ~]$ lsof -i:46784
COMMAND  PID       USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
firefox 3040 linuxstudy   84u  IPv4 103812      0t0  TCP localhost.localdomain:46784->55.65.117.34.bc.googleusercontent.com:https (ESTABLISHED)
```
```
       +|-f [cfgGn]
                f by itself clarifies how path name arguments are to be interpreted.  When followed by c, f, g, G, or
                n  in  any  combination  it  specifies that the listing of kernel file structure information is to be
                enabled (`+') or inhibited (`-').

                Normally a path name argument is taken to be a file system name if it matches a mounted-on  directory
                name  reported by mount(8), or if it represents a block device, named in the mount output and associ‐
                ated with a mounted directory name.  When +f is specified, all path name arguments will be  taken  to
                be  file  system names, and lsof will complain if any are not.  This can be useful, for example, when
                the file system name (mounted-on device) isn't a block device.  This happens  for  some  CD-ROM  file
                systems.

                When  -f is specified by itself, all path name arguments will be taken to be simple files.  Thus, for
                example, the ``-f -- /'' arguments direct lsof to search for open files with a `/' path name, not all
                open files in the `/' (root) file system.

                Be  careful  to make sure +f and -f are properly terminated and aren't followed by a character (e.g.,
                of the file or file system name) that might be taken as a parameter.  For example, use  ``--''  after
                +f and -f as in these examples.

                     $ lsof +f -- /file/system/name
                     $ lsof -f -- /file/name

```
file systemって?
```
[linuxstudy@xxxx ~]$ lsof +f -- /dev/null
lsof: not a file system: /dev/null
lsof 4.87
 latest revision: ftp://lsof.itap.purdue.edu/pub/tools/unix/lsof/
 latest FAQ: ftp://lsof.itap.purdue.edu/pub/tools/unix/lsof/FAQ
 latest man page: ftp://lsof.itap.purdue.edu/pub/tools/unix/lsof/lsof_man
 usage: [-?abhKlnNoOPRtUvVX] [+|-c c] [+|-d s] [+D D] [+|-f[gG]] [+|-e s]
 [-F [f]] [-g [s]] [-i [i]] [+|-L [l]] [+m [m]] [+|-M] [-o [o]] [-p s]
[+|-r [t]] [-s [p:s]] [-S [t]] [-T [t]] [-u s] [+|-w] [-x [fl]] [-Z [Z]] [--] [names]
Use the ``-h'' option to get more help information.
```
【Swift】URLRequestのHttpMethodをenumで設定する

`URLReqeust`のHttpMethodは、なぜか`enum`ではなく`String`で設定する仕様になっている。
なんか気持ち悪いので **`extension`** 作りました

## Before
POSTリクエストを作りたい場合、こうやって記述する。
```swift
let url = URL(string: "https://hoge.com")!
var urlRequest = URLRequest(url: url)
urlRequest.httpMethod = "POST"
```
なぜこんな仕様にした・・・？

## いざextension
`URLRequest`をextensionしてenum`HttpMethod`とメソッド`httpMethod`を定義する

```swift
import Foundation

extension URLRequest {
    enum HttpMethod: String {
        case GET
        case POST
        case PATCH
        case PUT
        case DELETE
    }
    
    mutating func httpMethod(_ method: HttpMethod) {
        httpMethod = method.rawValue
    }
}
```

## After

```swift
let url = URL(string: "https://hoge.com")!
var urlRequest = URLRequest(url: url)
urlRequest.httpMethod(.POST)
```

## あとがき
これで気持ちよくPOSTできるね
フロントエンドのDebug方法

# ロジックの確認

## console.log を使います

```js
console.log("Hogehoge")
```
- 一番簡単Debugger方法、consoleにデータを表示するコード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318767/c35707b4-54cd-ffab-e1cf-7f9b73abfb79.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318767/9fa2521e-5ddf-06b4-2f5d-85e849352e42.png)

---

## console.traceを使います
```js
console.trace('ここまでの処理');
```

- logまでの実行した経路が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318767/fdb7d362-a2ee-a33c-4543-6ad069f7b3dd.png)


---

## Debugger
```js
debugger
```
-　ロジック実行途中に止めたい場合、`debugger` を使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318767/7dc1a20b-1e18-b64f-24d9-c1fc77873343.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318767/19b76ac6-ea3a-a00f-8f82-669550c6159a.png)

- 止めるときに、実行途中のデータが見えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318767/5a85f257-eda9-6d72-e58d-ccccd8515f5c.png)

---


## Breakpoint
- Browserの検証モードでBreakpoint設定できます。
- Step by Stepのdebug

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318767/bd9d1a9f-680a-c626-1536-b4a7937a737e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318767/e9d471c5-43a1-a7be-747b-7179bb5a0f27.png)


---

# UIのDebugger

## Css computed 
- style computedで現在有効しているスタイルが確認できます。
- 有効しているスタイルはどこに設定しているか確認できます。
- ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318767/884e1899-535e-36cc-95e3-b7bdc6840da1.png)


---

## Css生編集
- スタイルを直接に確認したい場合、ブラウザで直接にスタイルCSSが設定できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318767/807fc909-fb86-c665-0b9e-54b787b3545a.png)


---

## HTML生編集
- HTMLを直接に確認したい場合、ブラウザで直接に確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318767/244325c5-fe42-c7df-e5f7-de78e5f80ad8.png)

- Div移動したり、削除したりもできます。

---

## 画面のサイズの確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318767/27ae5648-d7cc-bcbc-5aa6-1d50e34bb041.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318767/6730f630-1660-9d81-9ac4-b98f773f483a.png)

---


# Vuejs

## VueDev tool Extension 
https://devtools.vuejs.org/guide/installation.html
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

- vuejsのコンポネントのデータなどが分かります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318767/d6ae5cf0-0de5-67ef-2ecd-d5ac6993ece5.png)


---

## Mobile Vconsole 
https://github.com/Tencent/vConsole
http://wechatfe.github.io/vconsole/demo.html
- モバイルで確認できます。


---
【Alpinejs】ページトップにスクロールする方法

ページネーション機能を持つ画面で次へボタンを押した後に画面上部に自動でスクロールした状態にしたい場合、
対応するコンポーネントに以下のAlpinejsのx-initを追記するだけで対応可能です。

```html
<div x-init="window.scrollTo(0, 0)">

</div>
```

これにより例えば、
マルチステップのユーザー登録画面でいくつかのFormのコンポーネントで構成されている場合、
次へを押すと画面が切り替わるたびに画面最上部にスクロール済みの状態にすることができます。

ちなみに投稿者自身は、LaravelのLivewire内で使っています。


### 参考
https://alpinejs.dev/directives/init

https://readouble.com/livewire/2.x/ja/alpine-js.html
Mojo Hello Mojo

# Introduction
MojoはPythonの[スーパーセット](https://anken-hyouban.com/blog/2021/09/09/superset/#:~:text=%E3%81%BE%E3%81%A8%E3%82%81-,%E3%82%B9%E3%83%BC%E3%83%91%E3%83%BC%E3%82%BB%E3%83%83%E3%83%88%E3%81%A8%E3%81%AF,-%E3%82%B9%E3%83%BC%E3%83%91%E3%83%BC%E3%82%BB%E3%83%83%E3%83%88%E3%81%A8)として設計されている為, 多くの言語の特徴とコンセプトがそのままMojoで翻訳されて利用する事が出来る. 例えばMojoの"Hello World!"のプログラムは次のようにPythonと同様に記述する事が出来る.
```mojo:HelloWorld.mojo
print("Hello World!")
```
既存のPythonパッケージをインポートして, まるでPythonでプログラミングしているかのように使用する事も出来るが, それについて後で触れる事にする.
Power Automate専用の表示言語設定があるって話

2023年7月現在、`Power Automate`の設定の中に、`Power Automate`の画面にだけ影響する専用の言語設定があるようです。

`Power Automate`画面の右上の歯車マークから、`すべてのPower Automate設定を表示する`　を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/4bd81e53-6e3b-5f45-6256-bccf19598058.png)

表示言語を設定。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/a3d58b59-3ff3-3165-3533-01ff3aac512a.png)

上記画像のように、設定を`English`にした所、`Power Automate`の画面だけ英語表記となりました。

注意点としては、地域設定（ロケール）は表示言語に紐づいて決定されてしまうようなので、この点だけは注意が必要となります。

## 総評

`Power Automate`コネクタなどドキュメントを参照したりぐぐったりする場合。

トリガーやアクションの名前が微妙に日本語が入り混じっていたりすると、英語に統一したくなったり？

英語ドキュメントと見比べる際には、日本語になっているとどれがどれだかといった感じがあったり。

そもそも日本語だと検索がしづらかったり。

そのような場合は、こちらを設定して英語表記に統一してしまえば色々と捗るケースはありそうです。
traceroute, tracepath

```
[linuxstudy@localhost ~]$ traceroute www.yahoo.co.jp
traceroute to www.yahoo.co.jp (182.22.28.252), 30 hops max, 60 byte packets
 1  gateway (192.168.***.***)  0.576 ms  0.360 ms  0.516 ms
```
```
[linuxstudy@localhost ~]$ tracepath www.yahoo.co.jp
 1?: [LOCALHOST]                                         pmtu 1500
 1:  gateway                                               0.714ms 
 1:  gateway                                               0.810ms 
 2:  no reply
 3:  no reply
 4:  no reply
```
Mojo Master

# はじめに
大学を卒業してそろそろ本格的にずっとやりたかった研究及びオープンソースプロジェクトをスタートさせるべく何からやろうかなと考えた結果, 将来的な事を見据えてMojo言語にリソースをフルベットしても良いのかなと感じたので, その為の文法であったりを色々調べても新しいだけあって公式のリファレンスが現状最も分かりやすい. でも英語やんとなりしっかりとした理解をする為にも第三者視点が必要なので, メモ書き及びレビューを書きつつ参考に出来る所は参考にして頂いて沢山の指摘を貰えると嬉しいです.
# 日本語訳兼メモ
1. Hello Mojo : https://qiita.com/170441086/items/4ba9b3530706619e89a3
【PowerAutomateDesktop】DataTableから行と値を取得する



[Excelワークシートから読み取る]アクションなどを使用して、セル範囲の値を取得して、DataTableを作成した時にどうぞ！


今回はこちらの値から、行とセルの値を取得していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3069823/e887f653-4d85-fe3d-c3e3-edf30114dfb2.png)
[Excelワークシートから読み取る]アクションでセル範囲の値を取得した後、詳細>範囲の最初の行に列名が含まれていますを**オン**にすると、上記のように列名(カラム)として認識してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3069823/262399c7-fa1f-a791-93b3-df49e7321acd.png)


ちなみにこちらの表は、フローを実行した後、PAD右側の[変数]タブ→フロー変数の名前をダブルクリックすることで表示できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3069823/54eb9d03-ce03-d301-0b4a-2a0556581ce7.png)


## 行を取得する

DataTableから、行を取得します。

今回は行を取得して、同じExcelシート上に転記したいと思います。

```
%DataTable[取得したい行番号]%
```

実際の例はこちら↓↓↓↓↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3069823/a5be2e7f-c7a0-a73d-eb33-793a9f75343d.png)

無事転記することができました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3069823/0b5ca0ab-5016-ffd8-ed47-22fb4e3cf92a.png)

<font color = "red">**※この時指定する行番号はExcelの番号ではなく、0行目から始まるDataTableの番号なので注意してください。**</font color>
<br>


## セルの値を取得する

DataTableから、セルの値を取得します。

先ほどと同様、セルの値を取得して、同じExcelシート上に転記していきます。

```
%DataTable[取得したい行番号]["取得したい列名"]%
```

実際の例はこちら↓↓↓↓↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3069823/77062451-011b-dae4-f7e9-60d6b4db4e33.png)

こちらも無事転記することができました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3069823/44fbcbdd-8e8f-dee8-7e51-74f4ed2a7a1f.png)

また、列名の代わりに列番号でも指定することができます。
この時も行番号と同じように、DataTable上の列番号なので注意してください。
```
%DataTable[取得したい行番号]["取得したい列番号"]%
```
実際の例はこちら↓↓↓↓↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3069823/b3325676-fb6a-a0ab-bbfa-066da9d65725.png)


## おわりに
<br>
読んでいただきありがとうございました！

お役に立てれば幸いです。
Javaのリテラルの動作を確認してみた

# 概要
Javaのリテラルの動作を確認してみました。以下のページを参考にしました。

リテラル

https://www.javadrive.jp/start/num/

文字リテラルと文字コード

https://www.javadrive.jp/start/num/index1.html

文字列リテラル

https://www.javadrive.jp/start/num/index3.html

エスケープシーケンスを使った特殊な文字の表現

https://www.javadrive.jp/start/num/index4.html

整数リテラル

https://www.javadrive.jp/start/num/index5.html

浮動小数点数リテラル

https://www.javadrive.jp/start/num/index7.html

数値リテラルにサフィックスを付けて型を指定する

https://www.javadrive.jp/start/num/index8.html

数値リテラルに桁区切り文字を記述する

https://www.javadrive.jp/start/num/index9.html

論理値リテラル

https://www.javadrive.jp/start/num/index10.html

# 実装
文字リテラルの動作を確認してみました。「あ」って一文字なんですね。

```JSample1_1.java
class JSample1_1{
  public static void main(String[] args){
    System.out.println('a');
    System.out.println('あ');
  }
}
```
以下のコマンドを実行しました。
```
$ javac JSample1_1.java 
$ java JSample1_1 
a
あ
```

# まとめ
何かの役に立てばと。
【GitHub】リポジトリ内の画像がREADME.mdに表示されない時の対処法

# 原因
リポジトリ内の画像をREADME.mdに表示させようとした時、以下のようにアイコンのみが表示され、画像が正しく表示されない場合の対処法について紹介します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1599258/385dea5c-2371-1acd-0b4b-c9411e9fbcc4.png)


まず最初に疑うべきは以下の記事の事項です。

https://qiita.com/Robot-Inventor/items/acaf95fd75924ce79d51

それでも解決できない場合は、**数式表現「``$$``」が編集上の1行に含まれている**ことが原因の可能性があります。

以下は、リポジトリの``figures/hoge.png``が正しくpushされている状態で画像が表示されない例です。

```:画像の前に数式
$formula$![from_repository](figures/hoge.png)
```
```:画像の後に数式
![from_repository](figures/hoge.png)$formula$
```
```:改行を入れる
![from_repository](figures/hoge.png)
$formula$
```
```:"br"の空行を入れる
![from_repository](figures/hoge.png)<br>
$formula$
```
```:"br"の空行を2つ入れる
![from_repository](figures/hoge.png)<br><br>
$formula$
```

# 対処法
## 空白行を挿入する
数式と画像の間に``<br>``を使わずに空白行を挿入すると、正しく動作します。ただし、画像と数式を同一行に表示したい場合は後述の方法を使用してください。

```:空白行を挿入する
![from_repository](figures/hoge.png)

$formula$
```

空白行を挿入すると画像が正しく表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1599258/7641e2bc-7aca-592f-acbe-5b20546c11fd.png)


## GitHub Issueからアップロードした画像を使う

以下の記事に従って、GitHubのIssueに画像をアップロードし、その画像を使用する場合には、この問題は発生しません。

この方法を使用すると、**画像と数式を同一行に表示することもできます**。

https://qiita.com/r_midori/items/2c4feb5de05535441bc8

```:Issueからの画像を使用する
![from_issues](https://github.com/yusuke1999/figure_test/assets/107452903/5cbb17e1-96cf-4dce-86e7-ab5d58f8cef6)$formula$
```

Issueからの画像は、画像と数式を同一行に表示できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1599258/081544e2-d5c1-84da-5fe4-18f95e51a820.png)
Go言語のパッケージとモジュールについて

## 1. パッケージ

Go言語のパッケージは、関連するGoのコード（関数、型、変数など）を一まとめにするための単位です。パッケージはコードの再利用と整理を容易にします。

Goのコードファイルは、必ず特定のパッケージに所属します。所属するパッケージは、ファイルの最初の行で`package`キーワードを用いて明示します。例えば、`package main`はそのファイルが`main`パッケージに属していることを示します。

同じパッケージに属するファイル群は、同じディレクトリに配置されます。そして、パッケージ内のすべてのファイルはパッケージレベルの変数や関数を共有することが可能です。

## 2. モジュール

次にモジュールについて見ていきましょう。モジュールはGo 1.11で導入され、関連するパッケージの集合を表現する単位となります。モジュールの存在により、パッケージのバージョン管理や依存関係の追跡が簡単になります。

モジュールは`go.mod`ファイルによって定義され、このファイルはモジュールのルートディレクトリに配置されます。このファイルにはモジュール名（通常はリポジトリのURL）とそのモジュールが依存する他のモジュールの特定のバージョンが記載されます。

以下に示す`go.mod`ファイルの例では、モジュール名が`github.com/myuser/myproject`で、`golang.org/x/text`パッケージのバージョン`v0.3.0`に依存していることが示されています。

```
module github.com/myuser/myproject

require golang.org/x/text v0.3.0
```

モジュールの導入により、Goのプロジェクトは依存関係をより明確に管理でき、異なるバージョンの依存関係を持つ複数のプロジェクトを同時に扱うことが可能となりました。これは、Goのエコシステム全体の安定性と互換性を向上させる大きな役割を果たしています。
sinθ^4+cosθ^4 最大値と最小値「2017長崎大学前期【1】(4)」をChatGPTとMathematicaとWolframAlphaとsympyでやってみたい。

**ChatGPTでやってみました。(入力文あり。出力省略)**

オリジナル(youtube)MathLABO 様より

https://youtu.be/LSKY3axNokI

上と同じです。大学入試数学問題集成＞【1】(4)テキスト

https://mathexamtest.web.fc2.com/2017/201710881/2017108810100mj.html#top-0104

# ChatGPTで 今回OKです。
使い方注意報？使う時、注意報？　別件で解が違う事例が発生しています。まとめ中。
(以下1行ずつです）θ=0, πのsinθ^4+cosθ^4最大最小値
入力文
```
0<=θ<=πのときsinθ^4+cosθ^4 最大値と最小値、およびそのときのθの値をそれぞれ求めよ
0<=θ<=πのときsinθ^4+cosθ^4のグラフ
```
(グラフ）
matplotlibでやれ。でした

# xxxx Mathematicaで(できませんでした。) xxx

```
In
MaxValue[{Sin[\[Theta]]^4 + Cos[\[Theta]]^4, 
  0 <= \[Theta] <= \[Pi]}, {\[Theta]}]
MinValue[{Sin[\[Theta]]^4 + Cos[\[Theta]]^4, 
  0 <= \[Theta] <= \[Pi]}, {\[Theta]}]
ArgMax[{Sin[\[Theta]]^4 + Cos[\[Theta]]^4, 
  0 <= \[Theta] <= \[Pi]}, {\[Theta]}]
ArgMin[{Sin[\[Theta]]^4 + Cos[\[Theta]]^4, 
  0 <= \[Theta] <= \[Pi]}, {\[Theta]}]
Simplify[
  MaxValue[{Sin[\[Theta]]^4 + Cos[\[Theta]]^4, 
    0 <= \[Theta] <= \[Pi]}, {\[Theta]}]] Simplify[
  MinValue[{Sin[\[Theta]]^4 + Cos[\[Theta]]^4, 
    0 <= \[Theta] <= \[Pi]}, {\[Theta]}]]
Simplify[
 ArgMax[{Sin[\[Theta]]^4 + Cos[\[Theta]]^4, 
   0 <= \[Theta] <= \[Pi]}, {\[Theta]}]]
Simplify[
 ArgMin[{Sin[\[Theta]]^4 + Cos[\[Theta]]^4, 
   0 <= \[Theta] <= \[Pi]}, {\[Theta]}]]

Out
(省略)
{0}
{-2 ArcTan[1 - Sqrt[2]]}
{0}
{\[Pi]/4}
```
作図

```
Plot[{Sin[\[Theta]]^4 + Cos[\[Theta]]^4}, {\[Theta], 0, Pi}]
```
![0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109698/46eeaebd-fc16-ddc9-8625-667d2c18ba11.png)
```
ParametricPlot[{\[Theta], 
  Sin[\[Theta]]^4 + Cos[\[Theta]]^4}, {\[Theta], 0, Pi}]
```
![0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109698/f1f55fb1-efb6-7d97-bfdd-4ba8709d6aa8.png)


# WolframAlphaで
θ-yのグラフがでます。

https://www.wolframalpha.com/input?i=sin%CE%B8%5E4%2Bcos%CE%B8%5E4+%E6%9C%80%E5%A4%A7%E5%80%A4%E3%81%A8%E6%9C%80%E5%B0%8F%E5%80%A4%2C0%3C%3D%CE%B8%3C%3D%CF%80&lang=ja

??? xの範囲は-1.9から5まで**表示**
??? 最小値 θ = -2 tan^(-1)(1 - sqrt(2)) のとき, min{sin^4(θ) + cos^4(θ)|0<=θ<=π} = 1/2
??? 最小値 θ = 2 tan^(-1)(1 + sqrt(2)) のとき, min{sin^4(θ) + cos^4(θ)|0<=θ<=π} = 1/2

# sympyで(MathLABO 様の方法を参考に)
勉強中。どちらかに統一する。sympy.fuを使う予定です。

# sympyで(maximum,minimum関数をθで使って)
```python
from sympy import *
θ = symbols('θ', Real=True)
(st,en)=(0,pi)
y = sin(θ)**4+cos(θ)**4 
y_max=maximum (y,θ,Interval(st,en))
θ_max=solveset(Eq(y,y_max),θ,Interval(st,en))
y_min=minimum (y,θ,Interval(st,en))
θ_min=solveset(Eq(y,y_min),θ,Interval(st,en))
print("#",y_min,θ_min)
print("#",y_max,θ_max)
plot(y,(θ,0,pi))
# 1/2 {pi/4, 3*pi/4}
# 1 {0, pi/2, pi}
```
θ-y プロット点の勉強中。
![0png.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109698/44d7c633-ea48-2b73-5d62-ab7071573344.png)

# sympyの実行環境
①私の環境は,pycharmです。
②よく聞くのは、Jupyterです。
③web上で、上記のソースを「SymPy Live shell」に、コピー貼り付けでもできました。
黒背景の右上に、マウスを移動すると、コピーマークが発生します。
???　タブレット環境で、コピー貼り付けが実行できませんでした。???

https://live.sympy.org/

# 参考
＞コメント
＞極大，極小も含めてそれを取るときの変数の値も同時に求める方法

https://qiita.com/mrrclb48z/items/e7fcb8226e649ccdf4cd

以下、いつもの?おすすめです。

https://qiita.com/mrrclb48z/items/75904cdc6e84ecef4d03#%E5%8F%82%E8%80%83wolframalpha-%E9%96%8B%E7%99%BA%E7%89%A9%E8%AA%9E