OmniAICreator/Qiita-1.07M huggingface dataset:
【PHP】staticプロパティとstaticメソッドを使用したサンプルソース

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/e1a07fc4-f717-69fd-6f0a-49996c5d8bb6.png)

# インスタンスではなく、インスタンスの製造機械であるクラスの側に設定できるのがstaticプロパティ

## staticプロパティの定義

staticプロパティを定義する時には、通常のプロパティの定義にstatic キーワードを付け加えるだけ

# staticメソッドとは、staticプロパティと同様に、classに定義するメソッドのこと。

staticプロパティを利用した処理を書くことができます。


```php
<?php
class Cat {
 
  // privateに変更
  private static $count = 0;
 
  // 現在までのインスタンスの作成数を出力するメソッド
  public static function say_count(){
    echo '今までに作成したCatインスタンスの数: ' . self::$count;
  }
 
  public $name;
  public $age;
 
  public function __construct($name, $age){
    $this->name = $name;
    $this->age = $age;
    // static プロパティ $count を１増やす
    self::$count++;
 
  }
 
  public function shout(){
    echo 'にゃー!<br>';
  }
 
  public function introduce(){
    echo '名前は' . $this->name . '、' . $this->age . '歳です';
    $this->shout();
  }
 
}
 
$cats = [];
 
$taro = new Cat('太郎', 3);
$cats[] = $taro;
 
$mike = new Cat('ミケ', 5);
$cats[] = $mike;
 
$tama = new Cat('タマ', 4);
$cats[] = $tama;
 
foreach($cats as $cat){
  $cat->shout();
  $cat->introduce();
}
 
// staticプロパティの利用
// echo '今までに作成したCatインスタンスの数: ' . Cat::$count;
// static メソッドの利用
Cat::say_count();
```

上記のように、staticメソッドを利用して現在までに作成したCatインスタンスの数を表示している。

staticプロパティの$countをprivateにすることで、$countが書き換えられるのを防ぐ。
$countの値について勝手に値が代入されることがなくなったため信頼性が高まる。
google spreadsheetの一番下の値（最新の値）を別シートに記載する

Google SpreadSheetにGoogle Apps Scriptを使って5分おきとか1分おきに記録しているデータのうち、一番新しいデータを取得するための関数について説明します。

Google SpreadSheetにデータがたくさんたまってくるとグラフが見づらくなってしまったので、Google Data Portalへ移植しました。Google Data Portalのスコアカードに最新値を出力したかったのですが、スコアカードには平均とか合計とかしか表示できなかったので、1個のデータしか入っていないようにして合計値=最新値にしました。

#### やり方1

![最後のデータ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/849198/951439e4-88d2-e20d-4d30-9dff08b722ba.png)

* 別のシートを作成し、indirect関数でセルを指定する
    * データが保存されているシートは"test1"というシート名です
    * `counta(test1!A:A)` にて↑の絵でいうところの、19289が出力されます
    * ↓の関数だと、`B19289` セルの値が参照されるので、"65" という値が入力されます

```
=indirect("test1!B"&counta(test1!A:A))
```

#### やり方2
![最後のデータ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/849198/d8909406-eaf5-3c1d-5a8d-48ef55ccff55.png)

* 力技です
    * A列の行数を求めています`counta(test1!A:A))`　(↑の絵でいうところの140093)
    * `B140093` が空っぽなら`B140092`の値、さらに空っぽだったら`B140091`の値という書き方をしています

```
=if(indirect("test1!B"&counta(test1!A:A))="",if(indirect("test1!B"&counta(test1!A:A)-1)="",if(indirect("test1!B"&counta(test1!A:A)-2)="",if(indirect("test1!B"&counta(test1!A:A)-3)="","no data",indirect("test1!B"&counta(test1!A:A)-3)),indirect("test1!B"&counta(test1!A:A)-2)),indirect("test1!B"&counta(test1!A:A)-1)),indirect("test1!B"&counta(test1!A:A)))
```
react開発中にParsing error: Unexpected token, expected ";"

# 何をしたかったか
react typescriptで開発中
ログインユーザーの情報をcontext内に保持する処理を書いてた
createContextの引数{}にtypeをアサーションしたかった


# コード
```typescript
export type LoginUserContextType = {
    loginUser: User | null;
    setLoginUser: Dispatch<SetStateAction<User | null>>;
};

export const LoginUserContext = createContext<LoginUserContextType>({} as LoginUserContextType);
```

# エラー文原文  
```typescript
Failed to compile
src/providers/LoginUserProvider.tsx
  Line 10:72:  Parsing error: Unexpected token, expected ","

   8 | };
   9 |
> 10 | export const LoginUserContext = createContext<LoginUserContextType>({} as LoginUserContextType);
     |                                                                        ^
  11 |
```

# エラー文訳（Deep L翻訳）  
構文解析エラーです。予期しないトークン、期待される ","

# 原因
何かしらのルールで許可されていない

# 改善案
.eslintrc.ymlに下記を追加

```yml
extends: [
  'react-app',
  'react-app/jest'
]
```

# 参考文献
https://stackoverflow.com/questions/65453117/type-assertion-via-as-keyword-in-a-new-create-react-app-project-results-in-pa
CUDA-PCLとは？

# CUDA-PCLとは？　

NVIDIAが開発中の、pclライブラリの一部をcudaにより高速化したライブラリ。現在のVersionは1.0、pclは1.8に対応。

## Githubのrepo

https://github.com/NVIDIA-AI-IOT/cuda-pcl

## cuda-pclに対応しているpclライブラリの機能

- RegistrationのICP
- FiltersのPassThrough, Voxel
- SegmentationのSACMODEL_PLANE, SAC_RANSAC

## cudaによる高速化ベンチマーク

|項目|cpuとの比較|
|:--|:--|
|RegistrationのICP|10倍|
|FiltersのPassThrough, VoxelGrid|6倍|
|SegmentationのSACMODEL_PLANE, SAC_RANSAC|6倍|

## 対応ハードウェア

Jetson AGX Xavierのみ

## 情報源　

- [Accelerating Lidar for Robotics with NVIDIA CUDA-based PCL](https://developer.nvidia.com/blog/accelerating-lidar-for-robotics-with-cuda-based-pcl/)
- [NVIDIA AI-IOT/cuda-pcl](https://github.com/NVIDIA-AI-IOT)
【Swift】if let 複数

# どういうことか

たとえばひとつのラベルに2つの値をアンラップしたい。
下の例ではチケットの有効期限を同じ文字列内にアンラップして出力している。

```swift
textLabel.text = "有効期限:
　　　　\(ticket?.startDate ?? "")〜\(ticket?.limitDate ?? "")"
```
これを `if let` でアンラップする方法に修正したい。

## 複数の宣言方法

```swift
// カンマで区切る
if let startDate = ticket?.startDate, let limitDate = ticket?.limitDate {
    textLabel.text = "有効期限: \(dateFrom)〜\(dateTo)"
}
```

`,` で区切って宣言するだけでいい。
おわり(´・ω・｀)
ブラックジャックの期待値をセル関数だけで計算する　続編


<b><font color=RED>以下の記事の続編となります。
先にこちらの記事を読まれていることを大前提にしています。</font></b>

https://qiita.com/takahasinaoki/items/094da1dd64c6273502dd


# はじめに
先の記事を投稿したところ、コメント欄にてスプリット、ダブルダウンにも対応して欲しいという要望を頂いたため、スプリット、ダブルダウンも考慮した期待値を計算出来るようにしてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411106/521449ea-af12-0958-82c1-32d45d3d4e0c.png)

E3セルで親のオープンカードを選択することが出来て、そのオープンカード時の子のハンドのそれぞれの値の期待値を動的に計算します。

サンプルの以下の図では、親のオープンカードが6で、仮に子の手札が、
ソフトハンドの13の時は、ダブルダウンした時の期待値が0.18
8-8のペアハンド(値は16)の時は、スプリットした場合の期待値が0.23
というように見ることが出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411106/78da6495-115e-8093-227d-fc1fe3e784b3.png)


表計算ソフトの結果はこちらの[Googleスプレッドシート](https://docs.google.com/spreadsheets/d/1bKnmHQyfCSaC9Ldo7Xa8jZEqdcuB_asDfF8r-sR-7bA/)で公開しています。
ただし、クリックしても閲覧しかできませんので、中身をいじったり確認したい方は、[Googleスプレッドシート]のメニューの[ファイル]から[ダウンロード]を選択し、[Microsoft Excel形式]でダウンロードしてください。
Excelソフトをお持ちでない方は、再度自身のアカウントの[Google Drive]にアップロードすれば、[Googleスプレッドシート]で開くことが出来るのではないかと思います。

2024/01/13 追記
[こちらのコメント](https://qiita.com/takahasinaoki/items/1d4eedfdda5ae10fb40b#comment-057d7983d9edb20c3c90)も参考にしてください

# オプションのルール
## ダブルダウン
もう一枚のみカードを引くことを条件に掛け金を２倍にすることが出来ます。

## スプリット
ペアハンド[^3]の時に、2枚のカードを別々の1枚ずつの別の手に分けることが出来ます。

A-Aのペアハンドは、スプリット後は1枚しかカードが引けないルールとします。
それ以外の手のペアハンドは何枚でも好きなだけ、カードを引くことが出来ます。
A-Aのペアハンドは、10を引いて21になっても掛け金は1.5倍にならないルールとします。


# 計算方法
## ダブルダウン
ダブルダウンした場合の期待値は、1枚のみHitした場合の期待値×2で計算します。
例えば、ソフトハンド15の1枚のみHitした場合の期待値は以下の期待値の合計で計算します。
10のカードを引いて15になる確率 × 15でStayした場合の期待値 ＋
9のカードを引いて14になる確率 × 14でStayした場合の期待値 ＋
･･･ 省略 ･･･
6のカードを引いて21になる確率 × 21の時の期待値 ＋
5のカードを引いて20になる確率 × 20でStayした場合の期待値 ＋
･･･ 省略 ･･･
2のカードを引いて17になる確率 × 17でStayした場合の期待値 ＋
Aのカードを引いて16になる確率 × 16でStayした場合の期待値

ハードハンドの16のように、引くカードによってはバーストしてしまう場合の期待値は
バーストするカードを引く確率 × (-1.0)をバーストした場合の期待値として加算します。

## スプリット
A-Aスプリット時の期待値は、
ソフトハンド11の1枚のみHitした場合の期待値×2で計算します。
以外の手のスプリット時の期待値は
例えば、8-8(値は16)の手を例にすると、ハードハンド8の期待値×2で計算します。




[^1]: ハードハンド：Aを含まない　または Aを1として計算した手
[^2]: ソフトハンド：Aを11として計算した手(10を引いてもバーストしない)
[^3]: ペアハンド：A-A や 2-2など 2枚のカードが同じ数字の手


# 計算結果
画像をクリックすればリンクを開きます
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411106/0619437c-3e6c-423c-0216-9a666af459f2.png)](https://docs.google.com/spreadsheets/d/e/2PACX-1vTCqqauJPdfwfXVxGmkWxR1NIUQz5oaNbGHScLWCxeZ8JsJCLq2BA7ZSjccjRyPfg/pubhtml?gid=1486698795&single=true)
セルの書式がオレンジ色の部分は、StayとHitやオプションのうち期待値が大きくなるもので、いわゆる**基本戦略**といわれるものとなります。

# 参考
2024.01.20
以下の記事で全体の期待値を計算してみました

https://qiita.com/takahasinaoki/items/d031a4e7076953ab069f



# 関連記事

https://qiita.com/takahasinaoki/items/d031a4e7076953ab069f

https://qiita.com/takahasinaoki/items/a345bd145f9fa281b352

https://qiita.com/takahasinaoki/items/094da1dd64c6273502dd

https://qiita.com/takahasinaoki/items/f92b4cc3d41ac22a7ae3

https://qiita.com/takahasinaoki/items/a3e023ede0545582cf52
laravelのCollectionで複数カラムでのソート

## 通常のorderBy

### ID降順でソート

```php
$items = [
    [
        'id' => 1,
        'datetime' => '2021-06-01',
    ],
    [
        'id' => 2,
        'datetime' => '2021-06-02',
    ],
    [
        'id' => 3,
        'datetime' => '2021-06-01',
    ],
    [
        'id' => 4,
        'datetime' => '2021-06-02',
    ],
];

$items = collect($items)->sortByDesc('id')->toArray();
dd($items);
```

### 結果

```shell
array:4 [
  3 => array:2 [
    "id" => 4
    "datetime" => "2021-06-02"
  ]
  2 => array:2 [
    "id" => 3
    "datetime" => "2021-06-01"
  ]
  1 => array:2 [
    "id" => 2
    "datetime" => "2021-06-02"
  ]
  0 => array:2 [
    "id" => 1
    "datetime" => "2021-06-01"
  ]
]
```

## 複数カラムでソート

### datetime降順、ID昇順でソート

```php

$items = [
    [
        'id' => 1,
        'datetime' => '2021-06-01',
    ],
    [
        'id' => 2,
        'datetime' => '2021-06-02',
    ],
    [
        'id' => 3,
        'datetime' => '2021-06-01',
    ],
    [
        'id' => 4,
        'datetime' => '2021-06-02',
    ],
];

$res = collect($items)->sortBy([
    ['datetime', false], // [カラム名, 昇順でソートするか]
    ['id', true]
])->toArray();
dd($res);
```

### 結果

```shell
array:4 [
  0 => array:2 [
    "id" => 2
    "datetime" => "2021-06-02"
  ]
  1 => array:2 [
    "id" => 4
    "datetime" => "2021-06-02"
  ]
  2 => array:2 [
    "id" => 1
    "datetime" => "2021-06-01"
  ]
  3 => array:2 [
    "id" => 3
    "datetime" => "2021-06-01"
  ]
]
```

## おまけ

`sortBy()`の内部では`sortByMany()`という関数が呼ばれています。このメソッドの中の`is_callable($prop)`というところでカラム名がcallableかどうかを確かめています。つまり、`date`などの組み込み関数と同じ名前がソートするカラム名に含まれているとエラーが発生します。気をつけましょう。

```php
    protected function sortByMany(array $comparisons = [])
    {
        $items = $this->items;

        usort($items, function ($a, $b) use ($comparisons) {
            foreach ($comparisons as $comparison) {
                $comparison = Arr::wrap($comparison);

                $prop = $comparison[0];

                $ascending = Arr::get($comparison, 1, true) === true ||
                             Arr::get($comparison, 1, true) === 'asc';

                $result = 0;

                if (is_callable($prop)) {
                    $result = $prop($a, $b);
                } else {
                    $values = [data_get($a, $prop), data_get($b, $prop)];

                    if (! $ascending) {
                        $values = array_reverse($values);
                    }

                    $result = $values[0] <=> $values[1];
                }

                if ($result === 0) {
                    continue;
                }

                return $result;
            }
        });

        return new static($items);
    }
``
シェルスクリプト 標準出力のリダイレクト


コマンドの標準出力をファイルに出力します。
手軽に動作確認をする手段として、以下のようなスクリプトを用意しています。

```title:stdcheck
#!/bin/bash

echo "This is stdout"
echo "This is stderr" 1>&2
```

##### リダイレクトしない場合
画面上に、標準出力、標準エラー出力の両方が表示される。

```
$ stdcheck 
This is stdout
This is stderr
```

##### 標準出力のリダイレクト
画面上に、標準エラー出力が表示される。
リダイレクト先のファイルに、標準出力が書き込まれる。

```
$ stdcheck > test1
This is stderr

$ cat test1 
This is stdout
```

##### リダイレクトで空ファイル作成

```
$ > test2
$ cat test2
-> empty
```

##### リダイレクトでファイルの中身を消去

```
$ cat test1 
This is stdout

$ > test1
$ cat test1 
-> empty
```

##### リダイレクト記号の位置を変えても動く
echo と引数の間にリダイレクトを入れた場合。

```
$ echo > test3 'Hello stdout'
$ cat test3 
Hello stdout
```
冒頭にリダイレクトを入れた場合。

```
$ > test4 echo 'Hello stdout'
$ cat test4
Hello stdout
```
本番環境でActiveAdminを導入しようと思ったら苦労した話

https://qiita.com/ryuuuuuuuuuu/items/25d1de51f15369f4f451

簡単だと思っていたActiveAdminの導入が想像以上に苦労した話

## deviseも導入しないといけない

本番のアプリではユーザー機能がなかったので、deviseを導入してなかったのですが、当然Adminとは言えユーザーであることは変わらないので、deviseの導入が不可欠だった。

## utf8mb4であるが故、マイグレーション時にエラー

https://bokunonikki.net/post/2018/0214_rails_mysql_error/

本番のアプリは絵文字たっぷりなアプリ名ため、文字コードはutf8mb4を採用していました。

で、詳しく話すと長くなるのですが、要はutf8mb4とutf8の最大バイト数に違いがあるため、マイグレーション時にエラーが多発しました。

そのため、一旦MySQLの最大バイト数を減らす必要があります。

方法は上記サイトにて。

https://qiita.com/terufumi1122/items/9ea764618eba01144e09

## アセットパイプラインにactive_admin.cssがないですよという状態

さて、実際にインストールしたら、今度はCSSがアセットされてないですよというエラー。

これは下記記事のとおりコマンドを実行することで解消

https://qiita.com/ibarakishiminn/items/9df5c525977840f348e5

## CSSの汚染

さて、ここまできたら無事Adminのログイン画面が表示されて、ほっと一息。

と思ったらちょっと嫌な予感がしました。

というのもrailsはapplication.cssでassets/stylesheets配下のcssを全て読み込みます。

つまり表の環境でも読み込んじゃうのでは・・・？

と思ったら予想的中。

案の定、CSS読み込んでしまって、見た目がぐちゃぐちゃになりました。

ということで、adminだけ別でCSS,JSを読み込みたい。

https://asalworld.com/1602/

http://yamotonalds.hatenablog.com/entry/2014/03/18/ActiveAdmin%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AFasset%E3%81%AE%E6%B1%9A%E6%9F%93%E3%81%AB%E6%B3%A8%E6%84%8F

この記事をもとに汚染除去。

ここまできてようやく、無事管理者ログインができました・・・・
制約のある人とない人が共に気持ちよく働けるようにするために

## はじめに

Qiitaで開催中のイベント「**エンジニアによるマネジメント**」への参加記事です。

[エンジニアによるマネジメント - エンジニアだからこそ発信できるマネジメントの知識を発信しよう - Qiita](https://qiita.com/official-events/c826cda7a9514df143cb)

子育てをしながらマネージャーをやっていたころ、プロジェクト内に働き方に制約のあるメンバーを受け入れることが何度かありました。縁があって同じチームになったからには、プロジェクトが終わったときに、メンバー全員が「一緒にやれてよかったね！」と言えるようにするのが私の役割だと思ってずっとやってきました。

働き方に制約があるメンバーがいる場合のチームマネジメントについて、私の経験を投稿します。



## 色んな制約をもったメンバー

私のチームには、育児休暇があけて復職したメンバーで、子供が体調不良になると休まざるを得ないお母さんや、メンタルの不調を抱えていてフルタイムの勤務が難しいメンバーなど、さまざまな事情のため働き方に制約をもったメンバーがいました。

例として育児休暇あけのAさん（女性）の場合をお話します。

今まで家で家族と過ごしていたのが、突然保育園で大勢の人とかかわるようになると、子供はすぐに体調を崩します。外界に対する抵抗力が十分ではないのです。保育園で熱がある一定ラインを超えると、保護者に迎えに来るように連絡が入ります。そうすると、Aさんは今やっている仕事を中断して迎えに行かねばなりません。

そして、困ったことに、子供の体調はすぐには回復しません。一度子供が体調を崩すと２日から3日、Aさんが会社を休まざるを得ないこともありました。

> ちょっと前までは「子育ては主に女性の仕事」と考えられる風潮があり、子供が体調を崩したときにお迎えに行くのも会社を休むのもお母さん、という暗黙のルールみたいなものがありました。



## 本人との情報共有

##### 受け入れ前に本人と面談をして、考えられるリスクを共有

制約のあるメンバーを受け入れる前に、本人と面談をして考えられるリスクを共有しました。まず、Aさんのご家庭でのそれぞれの役割について確認します。

「子供が体調不良になったときの対応は？」「実家の協力は得られるのか？」「ご主人の協力は得られるのか？」「ベビーシッターさんをお願いすることはできるか？」などなど。

ご家庭での役割などは、とてもプライベートなことですが、Aさんが仕事を続けて、キャリアを磨いていくためには重要なことなので、Ａさんの状況をきちんと共有してもらいました。



##### チームメンバーと共有可能なラインを定義する

そして、ここからが一番大切なのですが、そのAさんの状況をどこまでチームメンバーに共有してもよいかを、ご本人に確認します。チームで仕事をしていく以上、Aさんの制約条件や、なぜ制約ができてしまうのかをチームメンバーに説明して、理解してもらう必要があります。このため、**Aさんと「ここまでなら話してもよい」というラインをきちんと定義し、Aさんが嫌な思いをすることがないように取り決めをしました。**



## チーム内での情報共有

##### Aさんと定義したラインに従って、Aさんの情報をチーム内に共有

Aさんの受け入れを決めたときのチームを構成するメンバーは、20代から40代まで、幅広い年代にわたっていました。半数が子育て経験のないメンバーだったので、Aさんの状況を説明し、突発的な休みが発生するかもしれないこと、休みが続いてしまうかもしれないことなどを共有しました。Aさんが長期に離脱するような場合は、チーム全体でリカバリーしていくこともあらかじめ伝えました。



##### チームメンバーに不公平感を感じさせないようにする

一番気をつけたのは**「Aさんだけが特別扱いされている」という雰囲気にならない**ことです。Aさんに限らず、誰かが困っていたらチーム全体でリカバリーするよ！ということは繰り返し伝えました。それでも、おかしな空気になることはあります。そんなときは会話、ひたすら会話です。「いつでも話をきく準備はできているよ」という姿勢で、チームメンバーと会話を続けました。

> 私たちはチームであり、全員で大きな山を登っている。持てる荷物には個人差があって、たくさん持てる人もいれば、少ししか持てない人がいるかもしれない。今日はさくさく歩けたけれど、苦手な道に差し掛かったら歩く速度が遅れてしまうかもしれない。今日助けてもらったのなら、今度は自分が助けられるようにすればいい。ずっと助けられてばっかりだなと思うかもしれないけれど、いつか絶対に返せる日がくる。今自分にできることを精いっぱいやってみんなで山をこえようね。
>
> そんなことをメンバー全員に共有し続けました。



## 雑談の出来るチームを

何だかよくわからないけど、一週間以上休んでいるメンバーがいて、その穴埋めのために残業してくださいって言われたら誰だって釈然としないですよね。Aさんに限らず、大なり小なり、誰もがいろいろな事情をもって働いています。今は大丈夫でも、ある日急に困ったことになるかもしれない。そんなときに、すぐチームメンバーに「助けて」と言えるように、雑談ができるチーム作りを心がけました。

「自己開示の範囲が相手の自己開示の限界」と言われるように、相手のことを知ろうと思ったらまず自分の情報をオープンにする必要があります。朝の業務開始前にみんなに声をかけたり、三時のおやつタイムにお菓子を配ったり。外国籍のメンバーにワンポイントの語学レッスンをお願いしたり。一日中端末に向かって作業をするのではなく、「雑談してもいいんだ！」と思えるチームを目指しました。



## 感謝の気持を伝える

**一人一人を尊重してみんながいてくれることに感謝する**

あるパートナーさんからこんなことを言われたことがあります。「前職のマネージャーさんは、私が何をやっても仕事なんだから当たり前でしょ？という顔で、一度も目を見てありがとうといわれたことがない。ここにきて、ありがとうって言われて、本当に嬉しかった。自分が役にたってるんだなって思った」

このときに「**ありがとう**」がどれほどコミュニケーションをとる上で大切なのかを改めて実感しました。

チーム全体でリカバリーすることになっているのだから、休んでいるメンバーの穴を埋めるのは当然でしょうか。

プロジェクトをきちんとまわしていけるのは、みんなが助けてくれるから。お願いしたことを引き受けてくれるから。ミスしてもカバーしてくれるから。誰かの穴を誰かが埋めてくれるから。それを忘れず、「ありがとう」を伝え続けることが、チームのみんなに気持ちよく働いてもらうための一番のポイントではないかと思います。



## おわりに

チームマネジメントの１つの例になれば幸いです。
Power Automateの試験機能を使ったときの幸せな点

# 概要
試験的機能を利用すると便利！って感じてるんですが、具体的にってなると説明に困ったので、気づいたときにメモしていこうと思います。

# 利用方法
設定から、以下のようにOnにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/ef1afa36-ee90-6b7c-bc7c-a144f5e0b589.png)

# 利点

|概要|説明|
|:-:|:-:|
|動的コンテンツが強化される。<br> 例) Excel.RunScript|各種IDを取得して設定するのは面倒ですよね。|
|改行をそのまま使える。|変数に一度改行を設定するのは面倒なので結構便利。↓の感じ<br><code>'<br>'</code>|

# 欠点

|概要|説明|
|:-:|:-:|
|HTMLで指定するMessage系が壊れる|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/c9cf5859-beee-44dc-29b5-7000a39bc81f.png)|
|（JSON系も壊れることあり）|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1645569/451de6f9-9c7e-28e4-7dce-870253e9047f.png)
|


https://qiita.com/official-events/d523df99d6479293ffa7
CCNA試験学習(忘備録)〜OSPF〜

#はじめに

続けてどんどん学習進めていきます。

#OSPFとは？

・Open Shortest Path Firstの略。
・ルータが経由する最適経路を選ぶときのプロトコルのひとつ。
・リンクステート型という方式を用いる。
・経由するルータのコストを計算して経路を選択する。

#OSPFの基本動作

RT1とRT2のやり取りとします。
**①Helloパケットを交換してネイバーを検出**
RT1< OSPFが動いているルータさんいませんか〜？
RT1の状態はdown→init
**②ネイバーテーブルにネイバーを登録**
RT2< 僕動いてますよ〜
RT1の状態はinit→2way
RT2の状態はdown→init→2way(相手側を認識すると2wayになる)
**③EXSTARTに移りLSDBの交換準備に入る**
マスターとスレーブを選出
RT,RT2の状態は2way→exstart
**④お互いDBDを交換**
RT1,RT2の状態はexstart→exchange→loading
**⑤詳細なLSA情報を交換**
RT1,RT2の状態はloading→full

#DRとBDRの選出

DR(代表ルータ)と、BDR（バックアップ代表ルータ）を選出することで、全てのルータをネイバー関係にせず
DRとBDRを起点にしてネイバー関係を限定することでトラフィック量を減らすことができる。
DRとBDRはネットワークごとに選出し、DRとBDR以外はDROtheと呼ぶ。

#DRとBDRの選出方法

優先順位で書きます。
①ルータプライオリティの値。デフォルトは１。
DR>DBR>DROther

②ルータID
IPアドレスと同じ書式。
DR>DBR>DROther

#エリア分割

ひとつのエリアだけでOSPFを動作させることを**シングルエリアOSPF**
複数エリアに分けることを**マルチエリアOSPF**という。
マルチエリアOSPFの条件として、
・必ずバックボーンエリア(エリア番号０)を作成し、各エリアはバックボーンエリアに接していなければならない。

#OSPFの設定

①OSPFの有効化
<font color="red">(config)#router ospf プロセスID</font>

②インターフェイスの指定
<font color="red">(config)#network IPアドレス　ワイルドカードマスク area 
 エリアID</font>

#OSPF確認コマンド

①ルーティングテーブルの確認
<font color="red">#show ip route</font>

②ネイバーの確認
<font color="red">#show ip ospf neighbor</font>
mermaid.js シーケンス図でループ処理を表現する

# 目的

- mermaid.jsのシーケンス図にてループ処理を表現する記載方法をメモ的にまとめる

# 情報

- 筆者は下記サービスで検証を行った。
    - [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/edit#eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cbiAgIiwibWVybWFpZCI6IntcbiAgXCJ0aGVtZVwiOiBcImRlZmF1bHRcIlxufSIsInVwZGF0ZUVkaXRvciI6dHJ1ZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOnRydWV9)

# 方法

- 公式ドキュメントでは下記のように記載されている。

    ```mermaid
    sequenceDiagram
        Alice->John: Hello John, how are you?
        loop Every minute
            John-->Alice: Great!
        end
    ```

- 下記のように表示される。

    ![Online_FlowChart___Diagrams_Editor_-_Mermaid_Live_Editor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/c450b77c-deb1-fb7f-a64d-f1cda970b9d5.png)

- 英文だと若干わかりにくいので下記のように書き直してみた。

    ```mermaid
    sequenceDiagram
        Alice->John: Hello John, how are you?
        loop 〇〇処理
            John-->Alice: ループで処理される部分
        end
    ```

- 下記のように表示される。

    ![Online_FlowChart___Diagrams_Editor_-_Mermaid_Live_Editor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/bc85743d-004c-1af0-70c2-3f2715906d72.png)

# 参考文献

- [https://mermaid-js.github.io/mermaid/#/sequenceDiagram](https://mermaid-js.github.io/mermaid/#/sequenceDiagram)
Railsによるリクエストからレスポンスまでの流れ

#Railsによるリクエストからレスポンスまでの流れについて
はじめまして、新卒でWeb開発エンジニアへの就職を目指して、昨年の10月から勉強を始めている情報系大学院生のAtusと申します。

Railsで簡単な掲示板アプリは作成出来るようになりましたので　、今まで勉強したことを復習するためにRailsによるリクエストからレスポンスまでの流れを記したいと思います。

##GETリクエストからレスポンスまでの流れ
###①コントローラが呼ばれる

例えば静的なサイトに対しては、ブラウザのアドレスバーにhttps\://localhost:3000/usersと送るとホストサーバーのポート3000番に対してusersフォルダ配下のindex.htmlファイルをhttps通信で取得してきてという内容になる。

Railsのアプリでは、サーバーに対してGETリクエスト送ると、リクエストの処理を行う__コントローラ__が呼ばれる。
どのコントローラが呼ばれるかはroute.rbファイルに書かれてあるルーティングによって来まる。

###②データベースが参照される場合はモデルを静的なページを返す場合にはビューが呼ばれる

データベースとの通信が必要な場合はコントローラが__モデル__を介してデータベースから必要なデータを取得する。
取得したデータを元にビューファイルを作成しクライアントに返す。

データベースを介さない静的なページを取得したい場合、コントローラから直接__ビュー__が呼ばれ、クライアントのブラウザにレンダリングされる。

###概念図
![概念図](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685286/ac7acc68-c57a-d602-7fb3-a79799823761.png)

#最後に
拙い説明でしたが、ご覧頂きありがとうございました。
これからも、学んだことを日々アップしていきたいと思います。
staticについて

# staticについて

JavaSilverSE11の勉強中、staticに関する問題を解いて、インスタンス変数と特徴が異なり、ややこしいと感じる点があったのでstaticについて調べてまとめてみました。
<br>
<br>


<a id="#Chapter1"></a>
# staticメンバとは？
staticメンバは、`staticキーワードが付けられたフィールドやメソッド`のことです。

クラスに対して静的（static）に存在するメンバであるため、staticメンバは`静的メンバ`とも呼ばれます。
<br>
<br>

## インスタンスメンバとの違い
まずは異なる点をインスタンスメンバとstaticメンバの定義をもとにコードを通して紹介します。

```Java
class Sample {
    int instanceNumber;
    static int staticNumber;

        void instanceMethod() {
            System.out.println("instanceMethod()" + instanceNumber);
        }

        static void staticMethod() {
            System.out.println("staticMethod()" + staticNumber);
        }
}
```
上記の`instanceNumber`はインスタンス変数、`staticNumber`はstatic変数です。

また、`instanceMethod()`はインスタンスメソッド、`staticMethod()`はstaticメソッドです。

インスタンスメンバとstaticメンバの違いは一見staticの有無だけのように見えますが、それだけではありません。

インスタンスメンバとstaticメンバの違いは`メモリの保存場所`もあります。

例えば、インスタンスメンバは1つのクラスから3つのインスタンスを生成すれば「インスタンスメンバの数×3つ分」の領域が確保されるなど、

インスタンスメンバはクラスのインスタンス(オブジェクト)ごとに確保されます。

一方、staticメンバは例え複数インスタンスを生成してもstaticメンバの数1つ分の領域が確保されるだけです。

なぜならstaticメンバはクラス単位で領域が確保されるからです。
<br>
<br>

## staticメンバの呼び出し方
staticフィールドやstaticメソッドの呼び出し方について紹介します。

【staticフィールドの呼び出し方】

`クラス名.staticフィールド名
`

【staticメソッドの呼び出し方】

`クラス名.staticメソッド名()
`

staticメンバはクラス単位で領域が確保されているため、クラス名を記述します。

これは、staticメンバはクラスが読み込まれた時点でメモリ上に展開されるからです。
<br>
<br>

## staticのメリット
staticを使用することで以下のメリットがあります。

`newを書くことなく、手軽に呼び出せる。`

多くインスタンスを生成することを防ぎ、開発者の負担を減らすことが出来ます。

`メモリの消費を抑える。`

インスタンスの生成は多くメモリを消費しますが、staticはインスタンスを生成しないため
メモリの消費を抑えることが出来ます。
<br>
<br>

<a id="#Chapter2"></a>
# staticの注意点
staticには様々な制約があり、使用時には注意が必要です。

まず以下のコードを見てください。

```Java
public class Sample {
    String instanceTmp;
    static int staticNumber;

        public static void staticMethod() {
            Sample.staticNumber = (int)(Math.random() * 1000);
            System.out.println(this.instanceTmp); //エラー発生
        }
}
```
上記コードの処理はコメント記載部分でエラーとなります。

staticMethod()はstaticメソッドであるため、`Sampleクラスのインスタンスが存在しない状況でも呼び出される`場合があります。

Sampleクラスのインスタンスが存在しない状況でstaticMethod()の処理をすると、「this.instanceTmp」をうまく処理出来なくなります。

そのため、staticメソッド内では、staticメンバしか利用できないことに注意してください。
<br>
<br>

<a id="#Chapter3"></a>
# まとめ
staticには以下の特徴があります。特徴をしっかり把握し、インスタンスメンバと使い分けることが大切になってきます。

・フィールドやメソッドにstaticをつけて宣言するとstaticメンバ（静的メンバ）として扱われる。

・staticメンバはクラス内に領域が確保される。

・インスタンスを生成しなくても利用できる。

・staticメソッド内では、staticメンバしか利用できない。
<br>
<br>

<a id="#reference"></a>
# 参考文献
- [https://www.sejuku.net/blog/22426]

- [https://hrzine.jp/article/detail/48]
AWS Storage Gateway S3のレプリケーションオブジェクトにアクセスするにはKMSの権限を付与する

# 初めに

先日こちらの記事に FSx for Lustre ではレプリケートされたオブジェクトをインポートできなかったことを書きました。今回 Storage Gateway でも同様にレプリケートされたオブジェクトにアクセスできないという現象が発生しました。原因はレプリケーションに使用している KMS キーのアクセス権限がなかったことです。

https://qiita.com/quryu/items/53be093a25e11e5f1854

# 検証結果

KMS の権限なしで以下のようにステータスがレプリカのオブジェクトにアクセスしてみます。

```
[ec2-user@ip-172-31-43-17 ~]$ aws s3api head-object --bucket account-a-bucket-0525 --key test_upload_4.txt --version-id JQnupBy2kZdOxhFHZ5v9VU9cvknOKOeA | grep 'ReplicationStatus'
    "ReplicationStatus": "REPLICA",
[ec2-user@ip-172-31-43-17 ~]$ cat dir/test_upload_4.txt
cat: dir/test_upload_4.txt: Input/output error
```

アクセスできません。

KMSの権限ありの場合にアクセスしてみます。

```
[ec2-user@ip-172-31-43-17 ~]$ aws s3api head-object --bucket account-a-bucket-0525 --key test_upload_4.txt --version-id JQnupBy2kZdOxhFHZ5v9VU9cvknOKOeA | grep 'ReplicationStatus'
    "ReplicationStatus": "REPLICA",
[ec2-user@ip-172-31-43-17 ~]$ cat dir/test_upload_4.txt
test upload
```

アクセスできました。

なお、ファイル共有作成時でもマウント後でもロールに KMS の権限を付与すればレプリケーションオブジェクトにアクセス可能です。
(Unity3D)パーティクルをUIの前に表示する方法

パーティクルを表示する際にUIの前面に表示するための方法をメモ

#version
2020.3.5f1

#使用したアセット
[Cartoon FX Free](https://assetstore.unity.com/packages/vfx/particles/cartoon-fx-free-109565)
[FREE Stylized PBR Textures Pack](https://assetstore.unity.com/packages/2d/textures-materials/free-stylized-pbr-textures-pack-111778)

#手順
###1.&nbsp;Canvasを新規作成し、レイヤーが「UI」になっていることを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1491992/e693276f-c906-fcf7-30dc-3ecd0c121ff2.png)

###2.&nbsp;レンダーモードを「スクリーンスペース・カメラ」に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1491992/90522d15-50fb-7647-7023-cf16254d59ef.png)

###3.&nbsp;UI表示用カメラを新規作成し、1で作成したCanvasのレンダーカメラに設定
今回はメインカメラをコピーして作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1491992/0989f986-68c5-f289-69ea-d1bc4e9f0db9.png)

###4.&nbsp;3で作成したカメラからAudio Listenerを削除
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1491992/4de8212b-6791-1322-9d9a-d9d07770cd63.png)

###5.&nbsp;UI表示用カメラのレイヤーを「UI」に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1491992/3eae8895-187f-f5ad-32ca-1fc7b318ec71.png)

###6.&nbsp;UI表示用カメラのクリアフラグを「深度のみ」に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1491992/b019fbee-6ba6-b9bd-ee97-2d088e677102.png)

###7.&nbsp;UI表示用カメラのカリングマスクを「UI」に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1491992/28a4c299-5734-7bc3-e19f-6c57091d6ae5.png)

###8.&nbsp;UI表示用カメラの深度を元々あったカメラの深度より大きくする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1491992/12ad1fa8-8c4f-87f3-c6ae-95c752aca9a0.png)

###9.&nbsp;UI要素をCanvas直下に作成し、UI用カメラにUI要素のみ映っていることを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1491992/f9e05f2c-cbe0-7042-ed02-9602faf3bcd1.png)

###10.&nbsp;パーティクルをUI表示用のCanvas直下に作成し、レイヤーを「UI」に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1491992/8c176fc4-3612-7a42-85b6-8053d1e6a187.png)

分かりやすさのためにスケールを100倍にしておく

###11.&nbsp;パーティクルのレイヤー順序をUI要素より大きい値にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1491992/91e41b10-d40e-fbe6-8c0d-15f3d64a3fba.png)

#色を調整して完成
![particle.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1491992/4104dbed-ce9a-9e5d-f8e3-622254884d60.gif)
【React-Native】RNのインストール

> 私は日本就職を目指して、勉強している韓国人大学生です。
> もし、内容の中で間違った表現や言葉などがあれば、書き込みをしてください。

## 【React-Native】の目次
1. [RNのインストール](https://qiita.com/JeongJaeSoon/items/dcc15830015a22cb1e1e)
2. [プロジェクトを作成](https://qiita.com/JeongJaeSoon/items/9c470cb6068126844a3c)
3. [アプリ内メッセージを表示する](https://qiita.com/JeongJaeSoon/items/64d94d4ed8f7c5183125)
4. [タッチイベント、ボタン、スクロール](https://qiita.com/JeongJaeSoon/items/032ef2afe5e3ce6cda0b)

## インストールの段階
> インストール環境：macOS Big Sur ver 11.4, iTerm, oh-my-zsh

1. nvm（Node Version Manager）
2. node.js
3. Android Studio
4. JAVA
5. XCode
6. Visual Studio Code
7. CocoaPod
8. React Native CLI

### nvm（Node Version Manager）インストール
1. `curl`を使って、インストール

    ```bash
    sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
    ```
2. `~/.bash_profile`に`export`を追加
 
    ```bash
    $ vi ~/.bash_profile
    ```
    ```vi
    // すでにあれば追加しなくても良い
    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
    ```

3. `~/.bash_profile`をリスタート
 
    ```bash
    $ source ~/.bash_profile
    ```

4. インストール状態を確認
 
    ```bash
    $ nvm ls

    // 実行結果
    ->      v6.10.1
             system
    default -> 6.10.1 (-> v6.10.1)
    node -> stable (-> v6.10.1) (default)
    stable -> 6.10 (-> v6.10.1) (default)
    iojs -> N/A (default)
    lts/* -> lts/boron (-> v6.10.1)
    lts/argon -> v4.8.1 (-> N/A)
    lts/boron -> v6.10.1
    ```

### node.js & npm(Node Package Manager)
- node.js
 
    ```bash
    $ nvm install 10.15.1
    $ nvm ls
    $ nvm use 10.15.1
    $ node -v
    $ npm -v
    ```
 
### Android Studioインストール
1. WEBページからのインストールリスト
2. SDK Managerでのインストールリスト
 - [x] Android 10.0 (Q)
 - [x] Android SDK Platform 29
 - [x] Intel x86 Atom_64 System Image
 - [x] Google APIs Intel x86 Atom_64 System Image
 - [x] Google Play Intel x86 Atom System Image

3. ADK Managerで仮想デバイスを追加
4. `~/.bash_profile`の設定

    ```bash_profile
    export ANDROID_HOME=/Users/{user}/Library/Android/sdk
    export PATH=$PATH:$ANDROID_HOME/emulator
    export PATH=$PATH:$ANDROID_HOME/tools
    export PATH=$PATH:$ANDROID_HOME/tools/bin
    export PATH=$PATH:$ANDROID_HOME/platform-tools
    ```
    > `export ANDROID_HOME`のDIRと`Android SDK Location`は一致‼︎

    設定後、`source ~/.bash_profile`命令を実行
5. インストール結果を確認
 
    ```bash
    $ adb
    Android Debug Bridge version 1.0.41
    Version 30.0.4-6686687
    ```

### JDKインストール
  - [JDK 11のインストールリング](https://www.oracle.com/kr/java/technologies/javase-jdk11-downloads.html)
  - `java --version`でバージョンを確認

### XCode, Visual Studio Codeインストール

> WEBページを検索して、自分でインストールしてください。

### CocoaPod & React Native CLIインストール

   ```bash
   $ sudo gem install cocoapods
   $ npm install -g react-native-cli
   $ react-native --version
   ```
【初心者向け】何個知ってる？WEBでつかわれるメニューボタンの名前

#どうも7noteです。普段作っているけど以外と知らないアレの名前をまとめてみた。

三本線のメニューや、[・・・]となっているメニュー。など。

**「正式名称・・・わかりますか？」**

![スクリーンショット 2021-06-14 16.03.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/ac2c601e-ea50-0a74-277f-ba935cbe616d.png)



## ①「ハンバーガーメニュー」

![スクリーンショット 2021-06-14 15.47.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/943698ef-b7bd-48b8-2c6e-e96754eeb5da.png)


この三本線のメニューの正式名称は・・・「ハンバーガーメニュー」

ファーストフードの王道であるハンバーガーをイメージしたメニューですね。
ロッテリアのホームページが実際のハンバーガーのようなイラストのメニューになっています。（※スマホ時）
https://www.lotteria.jp/sp/

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/79dcdecb-b4e3-98de-e8f1-887d172cae43.png" width="300">

## ②「ミートボールメニュー」

![スクリーンショット 2021-06-14 15.54.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/78207f82-73ee-d080-00fc-2c47c1186db2.png)

横並びになっている点「・・・」。これは**ミートボールメニュー**と言います。
英語でもそのまま「Meetballs Menu」というらしいですよ。


## ③「弁当メニュー」

![スクリーンショット 2021-06-14 16.08.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/dfaa9ff1-1124-0fcf-f976-93d6ffcd0484.png)

知名度が低すぎてgoogleで出すのが困難でした。。。
こちらですね。

![スクリーンショット 2021-06-14 16.09.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/6f9693f9-4a22-36d8-463f-3d966f356a4c.png)


9個の四角が並ぶこのメニュー、日本語の「弁当」からきていて
**「bento menu」**というようです。
しかし日本人のほとんどが知らないという悲しい現実・・・
もっといろんな人に知れ渡ればいいのですがね。。。

## その他のメニュー

他にもケバブメニューやドルネメニューなど、食べ物にちなんだ名前がついているメニューがほとんどです。
食べ物なら共通認識として覚えやすいからですかね。誰がこの名前を最初につけたのか気になります。
もし知っている方がいればコメントください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/c93b1fcb-5001-d916-3ac4-6621cca50930.png)

引用元:
https://ux.stackexchange.com/questions/115468/what-the-difference-between-the-2-menu-icons-3-dots-kebab-and-3-lines-hambur


## まとめ

地域や場所によって呼ばれ方は様々ですが、その一部を紹介しました。
一般名称をしっていれば、開発するときのクラス名やID名を迷わずにサクッと書けるのでいいですね。
ただあまり一般的ではないので、どこまで伝わるかは保証できませんが・・・

今後もきっといろいろな形のメニューが作成されていくと思うので、どんな名前がつくのか興味深いですね。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
CloudFront+S3サイトをMozilla ObservatoryでA+評価にする方法(2021)

### はじめに

S3+CloudFront+Route53+ACMで静的Webサイトの記事があったのでリンクを追加。まずこの方法でサイトを構築するとMozilla ObservatoryだとF評価なので、セキュリティヘッダーを追加しよう、またSPAのルーティングの場合はどうするのが良いか。という記事です。
追記(2021/6/18)

https://qiita.com/WAKUZO/items/100fc2c71091c4ed33f0

### セキュリティヘッダー

CloudFrontではセキュリティ系のヘッダーが指定されないのでこれらをCloudFront Functionsで追加すること。まずはAWS sampleの値をベースに厳しい方向へ。現実的にはバックエンドのAPIを呼び出すことが殆どだと思うので Content Security Policy (CSP) の`connect-src`にアクセス先を指定したり、SPAフレームワーク側などの実装に合わせて`prefetch-src 'self';`の追加とか`style-src 'self' 'unsafe-hashes' 'unsafe-inline';`への変更が必要。ここらへんは実際のアプリケーションの実装に合わせてデベロッパーツールを見ながら対処。

https://qiita.com/hkato/items/964b4da46b4da40c9648

Google の Web Fundamentals 解説とChromeデベロッパーツールでの手順なんかが参考になる。

https://developers.google.com/web/fundamentals/security/csp/?hl=ja

### ルーティング(オプション)

多くの場合SPAでもルーティングさせることになると思うので、

https://qiita.com/hkato/items/e0e8286a10e5e6abb08e

### Terraformでの設定

基本的なCloudFrontとS3の設定を除き、これらをTerraformで実現すると次の部分の追加になる。いや、`viewer-response`と`viewer-request`を間違って動かなかったのでそれをメモしときたかったのが本題。あとマネージメントコンソールで複数の関数を関連付けできるように、`function_association`を並べればよい。

```hcl
resource "aws_cloudfront_distribution" "example" {
  # 省略
  default_cache_behavior {
    # 省略
    function_association {
      event_type   = "viewer-response" # ヘッダーはresponse側で
      function_arn = aws_cloudfront_function.security_headers.arn
    }

    function_association {
      event_type   = "viewer-request"  # ルーティングはrequest時点で
      function_arn = aws_cloudfront_function.spa_routing.arn
    }
  # 省略
}

#
# ヘッダーの追加
# security-headers.jsはaws-samplesの
# https://github.com/aws-samples/amazon-cloudfront-functions/tree/main/add-security-headers
# をベースにカスタマイズ
#
resource "aws_cloudfront_function" "security_headers" {
  name    = "security-headers"
  runtime = "cloudfront-js-1.0"
  comment = "HTTP security headers"
  publish = true
  code    = file("${path.module}/security-headers.js")
}

#
# SPAのルーティング
# spa-routing.jsはaws-samplesの
# https://github.com/aws-samples/amazon-cloudfront-functions/tree/main/url-rewrite-single-page-apps
# をベースにカスタマイズ
resource "aws_cloudfront_function" "spa_routing" {
  name    = "spa-routing"
  runtime = "cloudfront-js-1.0"
  comment = "URI rewrite for SPA"
  publish = true
  code    = file("${path.module}/spa-routing.js")
}
```
labelImg インストール時エラー

```
brew install qt  # Install qt-5.x.x by Homebrew
brew install libxml2

or using pip

pip3 install pyqt5 lxml # Install qt and lxml by pip

make qt5py3
python3 labelImg.py
python3 labelImg.py [IMAGE_PATH] [PRE-DEFINED CLASS FILE]

```
リンク
https://github.com/tzutalin/labelImg
上記のようにしてみたところ
make qt5py3　の部分で以下のエラーが生じた
```
make: *** No rule to make target 'qt5py3'. Stop
```
解決策として
リンク
https://stackoverflow.com/questions/46986431/make-no-rule-to-make-target-qt5py3-stop
のように
```
brew install pyqt5
```
をしてみると無事起動することができた。
CCNA試験学習〜ルーティング基礎〜

#はじめに

引き続き、やっていきます。

#ルーティングとは？

レイヤ３でのルータの働きの話。
**宛先MACアドレス**や**送信元MACアドレス**は、ルータを経由するたびに付け替えられる。流れとしては
**①非カプセル化を行い、パケットを取り出す。**
**②ルーティングテーブルから、ネットワーク部が完全に一致しているエントリを探す。**
**③IPパケットをカプセル化する。**
**④ネクストホップと出力インターフェースに従ってパケットを転送する。**

#ルーティングの際の動作

・ルーティングテーブルにエントリがない場合>パケットを破棄
<font color="red">Destination host unreachable.</font>

・ルーティングテーブルで複数のルートが検出された場合
ネットワークアドレスのビットに最も長く一致しているルートに転送**ロンゲストマッチ**(ホスト部を２進数に直して比べる)

・経路情報がなくても破棄せずに送れる**デフォルトルート**の設定。
最終手段の**ラストリゾートゲートウェイ**に託す。

#経路情報の管理

手動で登録を行う**スタティックルーティング**と、動的に学習させる**ダイナミックルーティング**がある。

##スタティックルーティングの設定

・全ての情報が分かっている
<font color="red">(config)#ip route 宛先ネットワークアドレス サブネットマスク ネクストホップアドレス</font>

・ネクストホップが不明
<font color="red">(config)#ip route 宛先ネットワークアドレス サブネットマスク 出力インターフェイス</font>

##ダイナミックルーティング

スタティックルーティングよりもCPUに負荷がかかる。
プロトコルによって最適経路はいろいろある。
例えば、
**RIP**>ホップ数(経由するルータの数)
**OSPF**>帯域幅から計算するコストの値
d?????????  ? ?    ?       ?            ? になったけど直った



```
vagrant@ubuntu2004:/var/www$ ls -la
ls: cannot access 'html': No such file or directory
total 16
d?????????  ? ?    ?       ?            ? html
```
私「？？？になった。何故！！」

↓

```
vagrant@ubuntu2004:/var/www$ sudo  mount /var/www/html
mount: /var/www/html: can't find in /etc/fstab.
vagrant@ubuntu2004:/var/www$ sudo  umount /var/www/html
vagrant@ubuntu2004:/var/www$ ls -la
drwxr-xr-x  2 root root 4096 Jun  1 03:42 html
```

ﾅｵｯﾀ😇

アンマウント？とマウント？をしたらしい。

参考
https://www.it-swarm-ja.com/ja/14.04/d-%E3%80%8C%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%9B%E3%82%93%EF%BC%88%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E5%90%8D%EF%BC%89%EF%BC%9A%E3%81%9D%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E3%81%AF%E3%81%82%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93%E3%80%8D/961297002/


https://qiita.com/kihoair/items/03635447591358210772
fish環境でクソ便利なpecoを導入する

<h2>はじめに</h2>

<p>この記事は自分用に書いているので読んでもわかりにくいかもしれない。</p>
<p>あくまでも備忘録代わりで書かせてもらう。</p>
<p><b>この記事では、fish環境でpecoを導入する方法を記述する。</b></p>

<h2>pecoとは</h2>

<h5>過去に入力したコマンドなどを閲覧・検索・使用できるコマンド</h5>
<h5>字面がもう便利</h5>
<h2>環境</h2>

<p>Ubuntu 20.04 LTS</p>

<p>多分Ubuntuなら動く</p>


<h2>必要なもの</h2>

<p><a href="#fish">fish</a></p>
<p><a href="#peco">peco</a></p>
<p>oh-my-fish(<a href="#peco">peco導入</a>時に使用)</p>


<h2>導入</h2>

<h5 id="fish">まずはfishの導入からです。(すでにfish導入済みの方は<a href="#peco">pecoの導入</a>へ)</h5>
<h5>インストール</h5>
```
  sudo apt-add-repository ppa:fish-shell/release-3; sudo apt update; sudo apt install fish;
```
<h5>デフォルトシェルにするためにgeditでshellのリストに追記する</h5>
```
   sudo gedit /etc/shell; または sudo gedit /etc/shells; (私は後者だった)
```
<h6>gedit内</h6>

```
  # /etc/shells: valid login shells
  /bin/sh
  /bin/bash
  /usr/bin/bash
  /bin/rbash
  /usr/bin/rbash
  /bin/dash
  /usr/bin/dash
  /usr/bin/fish  <<<追加!!
```
<h5>デフォルトシェルに変更するコマンド</h5>
```
  chsh -s /usr/bin/fish;
```
<h5>これでfishの導入は終わりです</h5>

<h5 id="peco">続いてpecoの導入です。</h5>
<h5>pecoを入れるにはoh-my-fishが必要なので入れます</h5>
```
  curl -L http://get.oh-my.fish | fish
```
<h5>その後、pecoを入れます。</h5>
```
  omf install peco
```
<h5>しかしこのままではCtrl+Rでの呼び出しが出来ないままです。</h5>
<h5>なのでconfigファイルに記述します。</h5>
```
  gedit .condig/fish/congig.fish
```
<h6>gedit内</h6>
```
  #peco
  function fish_user_key_bindings
    bind \cr peco_select_history
  end
```
<h5>これでpecoの導入が完了です。</h5>
<h5>試しにCtrl+Rを押してみます。</h5>
```
  clear
  cd ..
  cd
  sudo apt update
  sudo apt upgrade
  sudo apt-get update
  sudo apt-get upgrade
  sudo apt-add-repository ppa:fish-shell/release-3; sudo apt update; sudo apt install fish;
  sudo gedit /etc/shells;
  chsh -s /usr/bin/fish;
  curl -L http://get.oh-my.fish | fish
  omf install peco
  gedit .condig/fish/congig.fish
  QUERY>

```
<h5>最後の行にQUERYとありますが、ここでコマンドの検索が出来ます(部分一致)</h5>
<h5>↓↑キーで選んで実行できます。</h5>

<h2>あとがき</h2>

<p>まじで使いやすい</p>
Swiftのジェネリクスでシンプルな双方向バインドのMVVM

### Github
https://github.com/rwakizaka7/ArchitectureIOs

### 全体図
![クラス図(全体).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1545849/289f6d33-dd30-770f-4cb7-8be32124575d.png)

### プロトコルではなくジェネリクスでModelを切り替える。
クラスの継承関係はViewとViewModelの連携を担うLinkViewControllerは、Modelのジェネリクスを保持します。Modelをジェネリクス化することで、Viewとロジック(Model)を分けたのですが、ジェネリクスはextensionをサポートせず、BaseViewControllerの下で定義する必要がありました。

BaseViewController << LinkViewController << 継承元ViewController

### ViewControllerの基本クラスの継承方法
LinkViewControllerのジェネリクスにModelクラスを指定することで、LinkViewControllerはメンバ変数にViewModelを保持するようになり、ViewModelはメンバ変数にジェネリクスで定義したModelを保持します。

### ViewとModelの関係
UIKitのControllerは上の階層のControllerがインスタンスを管理します。そのため、UIViewController、UINavigationController、
UITabBarControllerは限定的なスコープで生きる必要があり、内部変数のクラスに処理を委譲する構成にする必要がありました。

また、同じUIViewControllerを一部のタブや、上の階層のUINavigationで、使用するケースが想定されます。全ての画面に共通の通知を行なった場合、同じ通知を受け取るとどちらに向けた通知なのか識別できなくなります。
Modelの通知形式は、自分の親や、子供の1人にピンポイントで通知を行う必要があります。

### UIViewControllerの構成をEnum管理する。
VCStructureIndexはUIViewControllerやUINavigationControllerの構成を示しています。UINavigationControllerの構成の中に他のVCStructureIndex、の構成を取り入れることを可能にしています。

generateVCメソッドがView、Modelまたは、他のViewのModelへの双方向バインドを可能にする、
PVLinkableなインスタンスを生成します。PVLinkableはUIViewControllerの、要件を満たしているため独立したUIViewControllerの生成でもあります。

また、Protocol Oriented ProgrammingでUIViewController、UINavigationController、UITabBarControllerで共通のメソッドを汎用化しています。

### ViewModel

ViewとViewModel、ViewModelとModelの連携はインスタンスを比較して、対象のクラスにしか届かないようにする必要があります。

一部通知では、Enumの属性に同じEnumを指定できるようにしています。
これは例えば、自分のControllerから見て、親や、特定の子供向けに、さらにその場所から見た相対的な通知を柔軟に送ることを可能にしています。

### ModelはViewControllerの処理タイミングも制御する。
Viewにも基本クラスのViewDidLoadがあり、また、ModelにもViewの基本クラスから送られるViewDidLoadがあります。
レイアウト(UIKit)に関わる対応はView、それ以外のAPI呼び出しや、Viewを制御する上で表示タイミングを制御したい場合は、ModelのViewDidLoadを使用するように考えています。
【Power Apps】新規作成フォームのデフォルト値の設定方法

# デフォルト値の設定

新規作成時のフォームで初期値を設定する方法をまとめました。
編集時のフォームでは設定値が表示されます。

## ユーザー

**データカード**の **Default** プロパティに以下の式を設定します。

```vb:DataCard.Default=$fx$
If(
    EditForm1.Mode = FormMode.New,
    {
        DisplayName: User().FullName,
        Claims: Concatenate(
            "i:0#.f|membership|",
            User().Email
        ),
        '@odata.type': "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",
        Email: User().Email
    },
    ThisItem.{列名}
)
```

## コンボボックス

**データカードバリュー**の **DefaultSelectedItems** プロパティに以下の式を設定します。

```vb:DataCardValue.DefaultSelectedItems=$fx$
If(
    EditForm1.Mode = FormMode.New,
    Choices(
        [@データソース].{列名},
        "初期値にしたい値"
    ),
    ThisItem.{列名}
)
```

### 追記：

※`'@odata.type'`のおまじないをしなくても初期値設定できるようになってたみたいなので追記しました。

**データカード**の **Default** プロパティに以下の式を設定します。

```powershell:DataCard.Default
If(
    Parent.Mode = FormMode.New,
    {Value: "初期値にしたい値"},
    ThisItem.'列名'
)
```

## 日付

**データカード**の **Default** プロパティに以下の式を設定します。

### 今日の値を設定する

```vb:DataCard.Default=$fx$
If(
    EditForm1.Mode = FormMode.New,
    Today(),
    ThisItem.{列名}
)
```

### 固定値を設定する

```vb:DataCard.Default=$fx$
If(
    EditForm1.Mode = FormMode.New,
    Date(2022, 6, 15),
    ThisItem.{列名}
)
```

# 参考サイト

- [新規フォームにログインユーザー名を表示（PowerApps編）](https://marimew.wordpress.com/2018/06/22/set-current-user-powerapps-form/)
- [コンボボックスの初期値を操る、たった2つの方法？](https://qiita.com/yamad365/items/74d44126cb53f5a7fdc1)
- [PowerApps フォームに初期値を設定する方法](https://zezeze.hateblo.jp/entry/2018/08/20/075526)
Gtk3アプリ テンプレート自動生成ツール

### GtkSharpテンプレートファイル自動生成ツールの作成

GtkSharpテンプレートファイルをすぐ複製できるツールを作った

https://github.com/iotagtk/GtkFileGenerator

[Release](https://github.com/iotagtk/GtkFileGenerator/releases)

#### できること
その場で名前の変えたGtkSharpのテンプレートファイルを複製します。
<img width="300" alt="Screenshot from 2021-06-15 20-00-36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/15fa4586-253f-25e4-4ec4-684f78ef1cd1.png">

#### 複製元となるテンプレートファイル
- MainWindow.cs
- MainWindow.Glade

新規に作るのが面倒だったため、ショートカットですぐ作れるようにした

##### テンプレートファイルの内容を変更することも可能

| 種類 | テンプレートファイル名 |
|:-----------|------------|
| Class     | classTemplate.txt        |
| Glade       | gladeTemplate.txt        | 
 

#### ツールの使い方

Riderの設定画面でツールを登録する
<img width="400" alt="Screenshot from 2021-06-15 19-59-40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/cf1d3da0-31e2-c9e6-2735-85f0794074d1.png">

プログラムのパスを設定する
引数を設定する

```
引数はReadMeを参照してください
```

クラスファイルにしたい文字列をコピペする
<img width="550" alt="Screenshot from 2021-06-15 19-58-53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/9cc37617-28cc-61b1-5662-020b1a0433ab.png">
メニュー - Tool - External Toolから実行する
<img width="200" alt="Screenshot from 2021-06-15 20-30-26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/8abfd232-4db4-3bb8-e7d3-bf6d84f9b27c.png">


ツールを実行するとクラス名の変わったGtkSharpテンプレートファイルが複製されます
Riderの機能だとExploerに自動インポートされる。
<img width="300" alt="Screenshot from 2021-06-15 20-00-36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/15fa4586-253f-25e4-4ec4-684f78ef1cd1.png">

宣言してShow()関数から実行できます

<img width="500" alt="Screenshot from 2021-06-15 20-01-28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/75dfeca9-81ea-7cf4-adf0-9e5e8c19ca01.png">

```
aaaa a1 = new aaaa();
a1.Show();
```

実際の画面
<img width="400" alt="Screenshot from 2021-06-15 20-01-44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/b3aebf78-9161-43ee-ee06-edeb222ef3b0.png">

#### インストール方法

NugetからプロジェクトにgtkSharpをインストールするか

```
$ dotnet add package GtkSharp --version 3.24.24.34
```

GtkSharpテンプレートをインストールし、開発環境を整える

```
$ dotnet new --install GtkSharp.Template.CSharp
```


#### ターミナルからも実行可能

```
$ GtkFileGenerator -projectName 名前空間 name -projectDir プロジェクトDirの絶対パス
```

#### 追記
Riderでインポートする際には、ファイルのプロパティからEmbedリソースに設定し直してください。
もしくはAddItemで追加し直してください

[Gtk3アプリ iniファイルの操作](https://qiita.com/iota_11/items/d7070ea1b9d2e9ce3d50)に続く
CloudFront+S3でSPAのルーティングをする方法(2021)

### はじめに

基本的な構築方法は省略

### ルーティング問題

URLを`/foo` `/bar` の用に Router系でパス指定した場合、ローカルやNginx等では動いてたのにCloudFrontだと、403エラーになるという問題が起きる。これを回避するために CloudFrontで403エラーが発生したら `/index.html` に転送するという方法がよく行われている(というか自分もVue Routerで下記などの事例を参考に適用していた)。

https://dev.classmethod.jp/articles/s3-cloudfront-spa-angular-403-access-denied/

### なんでも200 OK問題

- ファビコンをちゃんと用意してないとブラウザーが`/favicon.ico`を引っ張ってくるが`/index.html`のHTMLが転送される。(まあ、アイコンとして表示されないけど気持ち悪い)
- 脆弱性検知ツール等がデバッグ用とか管理用のファイルとかのよくあるパスでアクセスしてきて、それに対して200で応答を返すので、そのファイル消したほうが良いって警告される。(まあ、そういうもんだって話ですが、監査を受けると説明しなきゃいけない)
- `foo.png` `bar.js` `hage.css` とかなんでも`/index.html`のHTMLなのはどうなのか…。

### CloudFront Functions

AWS samplesにそれっぽいものがある `/` -> `/index.html` と `/foo/` -> `/foo/index.html` って書き換えなので、上記のような書き換えだとうまく行かない。

https://github.com/aws-samples/amazon-cloudfront-functions/tree/main/url-rewrite-single-page-apps

なので、上記をベースに拡張子なし=ルーティングされたもの、と言う判断で書き換えれば良い。

```javascript
function handler(event) {
    var request = event.request;
    var uri = request.uri;

    // Check whether the URI is missing a file extension.
    if (!uri.includes('.')) {
        request.uri = "/index.html";
    }

    return request;
}
```

### Terraform

```hcl
resource "aws_cloudfront_function" "test" {
  name    = "test"
  runtime = "cloudfront-js-1.0"
  comment = "my function"
  publish = true
  code    = file("${path.module}/function.js")
}
```

```hcl
resource "aws_cloudfront_distribution" "example" {
  # 省略
  default_cache_behavior {
    # 省略
    function_association {
      event_type   = "viewer-request"
      function_arn = aws_cloudfront_function.test.arn
    }
  }
  # 省略
}
```
SpringMVCを使って、画面遷移させる手順

# SpringMVCを使って、画面遷移させる





<br>
##【この記事を読むと分かること】
***➀JSPでリンクをつけられるようになる（"spring：url"の利用）
②Controllerクラスを作成できるようになる
➂SpringMVCを用いて画面遷移ができるようになる***


<br>


今回は、**ControllerとViewのみ**を対象とした説明をします。
SpringMVCの基本となる「DaoxAOP」から知りたいという方は、別記事をご覧ください。（近日中に公開予定）




<br>
<br>
## 【目指すべき完成形】
リンク「次へ」をクリックすると、画面が変わります。


<br>
<br>
##【手順】
➀実際に表示する画面（View）のJSPを作る。
②Controllerクラスを作る
➂コントローラでフォワードする。


<br>
<br>

##【詳しい説明】

###➀実際に表示する画面（View）のJSPを作る。

今回は、リンク「次へ」を表示するJSPと、遷移後の画面を表示するJSPの2つが必要なので、新規作成をします。
今回は、それぞれ**next.jsp、after.jsp**とします。


<br>
###★JSPでリンクをつける（spring：urlの利用）

<br>
***spring：url　var=”任意の変数名”　 value=”コンテキスト名を除くパス”***

<br>
**➀Taglib宣言をする**

「spring:~」は、Springのカスタムタグです。
そのため、使う前にTaglib宣言が必要です。

<br>

**②任意の変数名にパスを入れる**
<spring：url　var=”任意の変数名”　 value=”コンテキスト名を除く遷移先へのパス”>
valueに入っているパスを、varで設定した変数に入ることで、他のタグで生成されたURLをEL式で参照できるようになります。

Valueに指定した、「遷移した先のパス」は自分で好きなものを設定できます。
ただし、ここで指定したパスは、ControllerクラスのHandlerメソッドでリクエストマッピングを指定する際に指定するパスと同一のものでなければいけません。


<br>

**➂EL式でリンクにする**
変数のHTMLと同じように、「a href=”★”」の★に、先ほどの変数を入れます。

この際、EL式を用いることに注意しましょう！


<br>

<br>
###②Controllerクラスを作る

クラス宣言の前に***「＠Controllerアノテーション」***をつけて、Controllerクラスとして機能させます。

Controllerクラスとは、リクエストを処理するクラスです。

MVCのCに当たる「Handlerメソッド」が定義されているクラスですね。


ApplicationContextに設定されると、Controllerクラスとして機能できるようになります。

ApplicationContextに設定するためには、＠Controllerをつけなければなりません。

クラス宣言の前に「＠Controller」と入力します。




<br>
<br>
###➂Controllerクラスで表示させたいJSPをフォワードする。

フォワードするために使うのは、***Handlerメソッド***です。
Handlerメソッドは、Controllerクラスと共にMVCのCに当たるControllerの役割を担います。
実質的には、HandlerメソッドがControllerです。


Handlerメソッドの定義方法は、基本的に普通のメソッド定義の形と同じですが、デフォルトのような型があります。


***public String メソッド名()｛
	//処理内容
	return “遷移先のView名”;
｝***

<br>
ちなみに、最後の「遷移先のView名」とは、***遷移する先のJSPファイル名から「.jsp」を抜いた文字***が入ります。

今回でいうと、JSPファイルが「next.jsp」なので、「next」がView名になります。



<br>
このように定義したメソッドを、Handlerメソッドにするには、メソッド定義の前に**リクエストマッピング**を指定する必要があります。


リクエストマッピングとは、Spring MVC のコントローラに付与して、リクエストURLに対して、どのメソッドが処理を実行するか定義するアノテーションのことです。
<br>
リクエストマッピングは、3種類あります。
**＠RequestMapping…GETとPOSTの両方を行える
＠GetMapping…GETのみを行う
＠PostMapping…POSTのみを行う**

<br>
リクエストマッピングは、あくまでも機能をバージョンアップしているだけに過ぎません。

そのため、リクエストマッピングをつけただけでは遷移先がわからないままなので、**パスを指定してあげましょう**。



指定方法は、各アノテーションの後ろに、先ほどのJSPと同様に「コンテキスト名を除くパス」を入れるだけです。
はじめの表示JSPは、”/”でOKです。

今回の場合、初めにnext.jspを表示したいので、
＠RequestMapping（”/”）とします


<br>
<br>
**※コンテキスト名を除くパスについて**
一番初めに表示される画面（今回はnext.jsp）に関しては、基本的に「”/”」になりますが、実は自分で決めることもできます。

<br>
パス指定は、ＪＳＰの説明部分でも記載したように、たとえば、「/aaa」であっても、ＪＳＰとControllerで同じパスを指定していれば問題ありません。

初心者の私も、「この”/”はどこから来たんだ？」と、非常に理解の苦しんだ点でしたので、補足いたしました。（この「/」はコンテキストルートですね）


<br>
<br>
アノテーションをつけて定義したら、フォワードの完成です。

<br>
ちなみに、フォワードではなく、リダイレクトをしたい時には、最後に返す時に**return “redirect:view名”;**に変えればOKです。
STM32F103C8でUSBserialを使う(紹介)


目的
STM32F103C8の内部USBの仮想シリアルを使用する
全てそのまま

参考

https://os.mbed.com/users/hudakz/code/STM32F103C8T6_USBSerial/


```C++

#include "USBSerial.h"

DigitalOut  myled(LED1);

int main() {
    confSysClock();     //Configure system clock (72MHz HSE clock, 48MHz USB clock)
    
    Serial    pc(PA_2, PA_3);
//    USBSerial usbSerial;  // connection is blocked when USB is not plugged in
    USBSerial usbSerial(0x1f00, 0x2012, 0x0001,  false);    // connection is not blocked when USB is not plugged in
    
    while(1) {
        myled = !myled;
        pc.printf("I am a serial port\r\n");            // 9600 bit/s
        usbSerial.printf("I am a USB serial port\r\n"); // 12 Mbit/s (USB full-speed)
        wait_ms(1000);
    }
}




```

![dwtsssss4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/dcb355e3-a460-4b8f-fc76-fcebe8be4ec6.jpeg)