OmniAICreator/Qiita-1.07M huggingface dataset:
【備忘録】React、Flux、Redux、Webpack、SSRについて

職場でReactを使ってフロントエンドを構築していますが、サービスの注文履歴画面にエラーが発生している模様。
まずQAリストを作成し、それに則ってエラーの解消をしていきたいところですが、
そもそもReact周りの知識がないことで、コードのどこの部分を検証すれば良いのかさえも分からなかったため、
一つ一つ理解していくための自分用メモです。
（上司によると、フロントではstoreやview周りをチェックする必要があるとのこと。）

#　Flux

Flux（フラックス）はFacebook社が提唱している、クライアントサイドのWebアプリケーション開発のためのアプリケーション・アーキテクチャ（設計思想）です。単方向のデータフローを構築できることが最大の特徴で、開発の規模が大きくなってもデータの流れを見失いづらいことが大きなメリットです。Reactとの併用を主に想定して生み出されたため、ReactによるWebアプリケーション開発を行う多くの現場で採用されています。


| 名前 | 役割 |
|:-:|:-:|
| Store（ストア） | アプリケーションの状態データを保持するオブジェクト、状態の更新を実施する処理 |
| Action（アクション） | 状態を更新するための指示内容を表すメッセージ |
| Dispatcher（ディスパッチャー） | Storeに対してActionによる更新指示を行う関数 |

### Fluxの最大の特徴「単方向データフロー」


![スクリーンショット 2021-08-29 21.48.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/985164/43c0ffbe-6e08-cf39-0745-cc118e9fd3f0.png)

状態の更新指示内容である「Action」を関数「Dispatcher」で「Store」に伝えて状態を更新し、その結果を「View（React）」に伝える、といった流れです。


実際にアプリに組み込んだ場合には、ユーザーが画面を操作したイベントに応じて新たなActionを発行（dispatch）して、状態と画面を更新していく形になるので、次の通りになります。


![スクリーンショット 2021-08-29 22.02.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/985164/e9320b17-e498-68d9-5f24-7f82d3fbda69.png)


　上図に沿って初期化後の処理を一つひとつ見ていくと、次のことをしています。

```
1.ユーザーがViewを操作する（ボタンを押す、文字を入力する、など）
2.更新したい事柄をActionの形にまとめて、Dispatcherに渡す
3.DispatcherからActionを渡されたStoreが、Actionの内容に応じて状態を更新する
4.Storeの状態が更新されたことを検知したViewが書き換わる
```

Fluxアーキテクチャを採用したアプリは、このデータフローを繰り返していくことになります。データの流れを逆流させたり、Dispatcher以外の方法でStoreを更新したりすることはできないので、アプリの動きを把握しやすいです。Fluxが開発規模の拡大に強いとされる理由はここにあります。

>　引用　
[アプリの状態管理を安全に行うためのFluxとRedux](
https://codezine.jp/article/detail/10751)

▼こちらも参考になります。
[Fluxとはなんなのか](https://qiita.com/knhr__/items/5fec7571dab80e2dcd92)

#　Redux

Reduxは、Reactが扱うUIのstate(状態)を管理をするためのフレームワークのこと。
React以外にもAngularJSやjQueryなどと併せて使用することもできるが、Reactと使用するのが一番相性がいい。

```
React→stateの管理するデータフローにFluxを提案
Redux→Fluxの概念を拡張してより扱いやすく設計
```


▼こちらも参考になります。
[[フロントエンド] Reduxの考え方をシンプルに理解しよう（入門記事）]
(https://www.yoheim.net/blog.php?q=20191201)


# FluxをReactとReduxを用いたショップアプリに落とし込んで考えてみる

#### Container
ショップ。接続されたコンポーネント。

#### Action
ショップスタッフ。例えば在庫が減ってきたら管理人に「在庫の補充をお願いします」と変更（Action）を依頼(Dispatch)する人。

#### Reducer
管理人、マネージャー。ショップスタッフ「Action」からの依頼を受けて、それを許可する人。

#### Store
全ての状態を一元管理する「倉庫」
管理人「Reducer」の指示によってStoreからまた新しい商品がショップに並べられる。

#### mapStateToProps、mapDispatchToProps
新しく発行された状態をコンテナに接続する関数




# WebpackとSSRについて

こちらの記事を読みましたが、ザックリとしかまだ読めていません。

https://qiita.com/teradonburi/items/32e8339ce93273219661

これで全体像はなんとなく分かった気がしますが、正直浅い理解です。。。
まずはとにかくまずはインプットしていかないないとと思い、
Udemyのこちらの教材が良いという情報があったため購入してみました。
英語ですが翻訳しながら理解していきたいと思います。
[Udemy:Modern React with Redux]
(https://www.udemy.com/course/react-redux/)
早くコードが書けるようになりたいです。
【ウェブデザイン技能検定2級】試験内容の概要と対策(令和3年度版)

令和3年度のwebデザイン技能検定2級を初受験しました。
試験概要と僕の勉強方法についてまとめたため、試験を検討している方の参考となれば幸いです。
#####筆者の経歴
・Webコーディングの勉強を始めてから16ヶ月程度
・小規模サイト4,5件作成
・JavaScript、phpはほぼ初心者

##目次
[・試験の概要](#試験の概要)
[・試験内容](#試験内容)
[・試験対策](#試験対策)
[・本試験の感想](#本試験の感想)
[・まとめ](#試験対策)
#試験の概要
　詳細は以下公式HPにて確認できます。
　[■ウェブデザイン技能検定](https://www.webdesign.gr.jp/summery/schedule/)
####(1)試験日程
 毎年計4回（5、8、11、2月）
####(2)難易度
 合格率3〜4割程度。3級とは違い、ある程度の知識量が問われます。
####(３)受験資格
　・ウェブデザイナーとして2年以上の実務経験を持っていること
　・ウェブの作成に関わる科目を有した大学、職業高校、短大等を卒業していること
　・ウェブデザイン技能検定3級に合格していること

 僕はウェブ未経験者だったため、3級合格ののちに受験しました。


#試験内容
　PCを操作する実技と、マークシート回答の学科があり、一日で実施します。
　詳細は公式HPにて細目が提示されております。
　[■ウェブデザイン技能検定　試験細目](https://www.webdesign.gr.jp/img/2020/03/20190401.pdf)
####(1)実技
**・出題形式**：PCを操作し、Photoshopを用いた素材作成、HTML/CSS/JavaScriptを用いたコーディングを実施します。6問中5問を回答する選択問題式です。
**・回答時間**：２時間。考え込まなければ、1時間半程度で終わるので時間は余裕があります。
**・合格基準**：70点以上
####(2)学科
**・出題形式**：マークシートを用い、Web知識についてYes/No[15問]、4択[[２5問]を回答。
**・回答時間**：1時間。考え込まなければ、30分程度で終わるので時間は余裕があります。
**・合格基準**：70点以上



#筆者が実施した試験対策
3級は過去問を実施すれば問題なかったのですが、2級は過去問+@の勉強となります。

####(1)実技
**①youtubeで流れ・操作確認(1時間×3回+@)**
**②『JavaScriptコードレシピ集(技術評論社)』を読み込み、DOM操作の習得(10時間)**
 公式HPにはコードなどの素材が掲載されていないため、[youtube](https://www.youtube.com/watch?v=PT9ELw7Dl8A)で操作を確認するのが手っ取り早いです。実技問題はほとんど過去問から変わらないので、自分の知らない操作だけ手を動かして確認しておけば本番でも迷いません。なお、選択問題として「HTTPリクエスト」、「JavaScriptの操作」を選択することになりますが、僕は後者を選択しました。理由として、DOMの基本的な操作ができれば回答でき、操作時間も圧倒的に少ないためです。

####(2)学科
**①過去問3回分(25時間)**
**②HTML/CSS：『HTML&CSS全事典(インプレス)』による関連コードの確認（5時間）**
 ウェブデザイン技能検定2級ガイドブック(２８00円)が公式で紹介されていますが、2013発行と古く、最新情報に即していないことから、僕は購入しませんでした(最新のものがあれば迷わないのですが…)。そのため、基本的に過去問で傾向を掴み、関連するキーワードをWebで片っぱしから調べるように勉強しました。自分の分かる言葉で解説しているサイトを探すのはなかなか苦労しますね。。それらのキーワードはサイトurlと一緒にExcelで一覧にして、テスト前に総チェックしました。

#本試験の感想
####(1)実技
過去問とほぼ同じ問題が出題されました。実技対策はyoutube程度でしたが、満点は十分狙えますね。
####(2)学科
過去問3回分からは同じ問題は出てこず、不明点が４割くらいありました。HTML&CSSに関しては、普段から使用しない操作の知識問題が出され、仕方ない感じも受けました。出題範囲は元々広いのですが、触ったことがなければどうしようもない知識の問題などもいろいろ出てくるので、それなりに勉強をしないと合格は厳しいと感じました。

#まとめ
ウェブデザイン技能検定2級は知識を問う試験であり、学科の対策は十分に時間をかけて臨みましょう。
QR Codeをライブラリレスで

[参考サイト](https://sites.google.com/a/osshc.co.cc/web/studies/it/qr)の情報をもとに作ってみました。

<p class="codepen" data-height="550" data-default-tab="result" data-slug-hash="JjJYYmJ" data-user="kob58im" style="height: 550px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kob58im/pen/JjJYYmJ">
  QR Code Data Structure</a> by kob58im (<a href="https://codepen.io/kob58im">@kob58im</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

QR Codeの仕様詳細は参考サイト等をご参照ください。

# ちょっとだけ説明
## データの並び

ざっくりのイメージとしては、

- データは２列単位で区切った領域（セル）を右下から上方向へジグザグに配置されます。
- 障害物（データ以外のセル）がある場合は、そのセルをスキップして次の（データとして使用可能な）セルを使います。
- QR Codeの枠に突き当たったら、折り返します。

上方向に配置していくときの並び：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438183/48652c84-4217-2095-f95f-80428eb99676.png)

気が向いたら加筆します。。。


# 参考サイト

- [特集：あなたも描ける！　JIS X0510準拠 QRコード®超入門 - OSSHC 岡崎高校スーパーサイエンス部](https://sites.google.com/a/osshc.co.cc/web/studies/it/qr)
- [ＱＲコードをつくってみる その４ - データの配置](https://www.swetake.com/qrcode/qr4.html)
- [ライブラリを使わずにC#でQRコードを生成してみる - Qiita](https://qiita.com/wakaba710/items/5107963e6b4123523603)
- [QRコード - Wikipedia](https://ja.wikipedia.org/wiki/QR%E3%82%B3%E3%83%BC%E3%83%89)
- [肉眼でも読める！QRコード入門](https://web.quizknock.com/qrcode-nikugan)
jsでバーコードリーダー

ブラウザで動作するバーコードリーダーを実装した際の覚書

##### 使用したライブラリ
[ZXing for JS](https://github.com/zxing-js)
細かいことはドキュメントとか読んでね。

- とりあえずインストールして

```zsh
# npm　　install
npm i @zxing/library
npm i @zxing/browser
```

-  表示用のhtml用意して

```html
<!-- カメラ描画用 -->
<video
  id="player"
  controls
  autoplay
  playsinline
  style="width:320px; height:240px;"
></video>
<!-- 読み込み結果表示 -->
<input type="text" id="read_result">
```

- リーダーを起動する

```javascript
import { BrowserMultiFormatOneDReader, BrowserQRCodeReader } from '@zxing/browser';
import { BrowserMultiFormatReader, NotFoundException, Result } from '@zxing/library';

const codeReader = new BrowserMultiFormatReader()
codeReader.decodeFromConstraints({
    audio: false,
    video: {
      width: {max: 640},
      height: {max: 640},
      focusMode: "continuous",     // オートフォーカス有効にしたい
      facingMode: "environment", 　　　　// 背面カメラ使う
      aspectRatio: 4/3,
    },
  },
  "player",
  (result, err) => {
    if (result) {
      // 読取結果を表示
      const textbox = document.getElementById("read_result")
      textbox.value = result.text
    }
  })
</script>
```
最低限はこんな感じで。

##### 余談
カメラが使えるかチェックする

````javascript
const is_camera_enabled = !!navigator.mediaDevices
```
[GAS] ブックマークから「今日の日付のファイル」へ自動リダイレクト

#やりたいこと
ブックマークに保存しておいたURLにアクセスすると、Google Driveから今日の日付のスプレッドシートを探し出し、自動的にリダイレクトして開いてくれる。
毎日別のシートを開く必要がある場合にも、いちいちGoogle Driveからシートを選択する必要がなくなるので便利！
#方針
* 特定のGoogle driveフォルダに毎日のファイルをあらかじめ入れておく
* GASのウェブアプリをブックマークしておき、開くと今日のシートファイルが検索される
* 自動的に今日のシートファイルにリダイレクトされる

#スクリプト
```javascript
function doGet() {
  
  //毎日のシートを入れておくGoogle DriveのフォルダID
  const folderId = "(フォルダID)"; 
  
  //フォルダ内の全てのファイルを取得
  const fileList = DriveApp.getFolderById(folderId).getFiles();

  //「yymmdd」で今日の日付を取得
  const date = new Date();
  const y = date.getFullYear();
  const m = ("00" + Number(date.getMonth()+1)).slice(-2);
  const d = ("00" + date.getDate()).slice(-2);
  const fileName = y+m+d;

  let file
  let spreadsheetId

  //ファイル名が今日の日付のシートを探す
  while (fileList.hasNext()) {
    file = fileList.next();
    if (file.getName() == fileName) {

      //今日のシートが見つかったら、シートidを取得する
      spreadsheetId = file.getId();
    }
  }
  
  //HtmlServiceのcreateHtmlOutputでURLをリータンすることで、リダイレクトする
  return HtmlService.createHtmlOutput("<script>window.top.location.href='https://docs.google.com/spreadsheets/d/"+spreadsheetId+"';</script>");
}
```

#使用方法
スクリプトをウェブアプリとしてデプロイし、URLをブックマークに保存しておく
だけ！
ESXiでタスクをキャンセルする方法

ファイルのコピーがいつまでたっても終わらないので、タスクを強制的にキャンセルする。

![alt](https://qiita-image.cloudremix.net/VMware-ESXi-Stop-Task.jpg)

## SSHで`hostd`を再起動

ブラウザのコンソールからはできない。

SSHはデフォルト無効なので、「ホスト」→「管理」→「サービス」→「TSM-SSH」から起動しておく。

```shell
# /etc/init.d/hostd restart
watchdog-hostd: Terminating watchdog process with PID 66904
hostd stopped.
hostd started.
```

再起動はほぼ瞬時に終わる。
タスクは消える。

## 参考

[Cannot cancel copy task in ESXi Web interface - Server Fault](https://serverfault.com/questions/889256/cannot-cancel-copy-task-in-esxi-web-interface)
【Swift】オプショナル型とアンラップ

Swiftのオプショナル型とアンラップが個人的に便利だなと思ったのでまとめたいと思います。

# オプショナル型
そもそもオプショナル型とはなんぞやということですが、
簡単に言うと「**nilを許容するデータの型**」のことです。
以下のように変数の宣言時にデータ型の後ろに「?」をつけることでその変数をオプショナル型に出来ます。

```
var num: Int? 
```
ちなみに普通に宣言した場合のものは非オプショナル型と言われたりもします。

オプショナル型の何が便利なのかというと「**nilによるエラーを回避できる**」ところです。

以下のようにコードを書くと通常ではエラーになってしまいますが、オプショナル型ではそれを回避できます。
もし仮に変数にnilが入ってしまった場合でもプログラムが止まることはなく処理を続行してくれます。
そのため、nilのせいで意図せずプログラムが終了してしまうことを防ぐことができます。

```
var num: Int?

print(num)
```
# アンラップ
実は、オプショナル型の変数はそのままでは使用することができません。
以下のコードを実行すると…
```

var num: Int?

num = 1

print(num)
```
このような結果になってしまいます。

`Optional(1)`
そのため、オプショナル型をプログラムで使う場合には処理をしてあげる必要があります。
その処理のことを「**アンラップ**」といいます。

アンラップの方法は大きく分けて2種類あります。
## if let 〜　/ guard let 〜
一つ目の方法は、以下のように「if / guard」の条件の部分でletによる変数宣言を行い成功時には処理を続行する方法です

```
var num: Int?

num = 1

if let unwrapnum = num {
  print(unwrapnum)
} 
```
結果は以下のようになります。

`1`

## 強制アンラップ
もう一つの方法は、以下のように変数に「!」をつけることでnilチェックを行わずにアンラップする方法です。

```
var num: Int?

num = 1

print(num!)
```
結果は以下のようになります。

`1`

ただし、nilの場合に強制アンラップを行うとエラーになってしまうため、
強制アンラップは値がnilでないことが確信できる場合のみにしか使ってはいけません。

# まとめ
既に他の方も同じような記事を書いてはいましたが、自分が今回学んだこととしてアウトプットさせていただきました。
そのため、他の記事と内容が被っている点などは目を瞑っていただけるとありがたいです。

# 参考文献
[SwiftUI対応 たった2日でマスターできるiPhoneアプリ開発集中講座 Xcode 12/iOS 14](https://www.amazon.co.jp/dp/B08VJJM3TN/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)
[OptionalをUnwrapする３つの方法](https://qiita.com/Saayaman/items/1e2a87b9e61e419eaa73)
今日作成したUI記録（layerとAutoLayout）

#今回の内容
<img width="150" alt="[06ABD96B-6362-4932-A845-254A09B86F86_4_5005_c.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/a6d6f4ce-84af-6098-26a3-6e856171a2d0.jpeg">

#コード  

* Main.storyboardで表示するパーツを作成しておきます.

```Swift:
    @IBOutlet weak var topWhiteView: UIView!
    @IBOutlet weak var beforeResultLabel: UILabel!
    @IBOutlet weak var beforeResultDateLabel: UILabel!
    @IBOutlet weak var beforeResultLocationLabel: UILabel!
    @IBOutlet weak var showSignUpViewButton: UIButton!
```

## Layer

* UILabelは3つとも同じ`.cornerRadius`の値を設定してるので、UILabelを持つ配列を引数にしています。

```Swift:
static func topViewDesign(targetLabels:[UILabel],targetView:UIView,targetButton:UIButton){
        
        targetLabels.forEach({$0.layer.cornerRadius = 13.0; $0.layer.masksToBounds = true})
        
        targetView.layer.cornerRadius = 25.0
        targetView.layer.shadowOffset = CGSize(width: 10, height: 10)
        targetView.layer.shadowOpacity = 0.65
        targetView.layer.shadowRadius = 5
        
        targetButton.layer.cornerRadius = 20.0
        targetButton.layer.shadowOffset = CGSize(width: 10, height: 10)
        targetButton.layer.shadowOpacity = 0.65
        targetButton.layer.shadowRadius = 5
    }
```

##tabBar
```Swift:
        tabBar.barTintColor = .systemGreen
        tabBar.tintColor = .white
        tabBar.unselectedItemTintColor = .systemIndigo
        
        tabBar.layer.cornerRadius = 25.0
        tabBar.layer.masksToBounds = true
        tabBar.layer.maskedCorners = [.layerMaxXMinYCorner,.layerMinXMinYCorner]
        
```

##AutoLayout

<img width="500" alt="89E530A9-4BDD-4F2C-A855-58C7ECCB3773_1_201_a.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/e4623499-c6b9-6a7f-228a-aab0a71267d5.jpeg">

#終わり
ご指摘、ご質問などありましたら、コメントまでお願い致します。
基本情報技術者試験勉強0829

本日の積み上げ結果
基本情報技術者試験勉強
令和元年秋過去問
パーフェクトラーニング（午後対策）
間違えた問題の復習
AWSの本を読む

情報セキュリティにおいてバックドアに該当するものはどれか。　アクセスする際にパスワード認証などの正規の手続が必要なWebサイトに，当該手続を経ないでアクセス可能なURL

コードから商品の内容が容易に分かるようにしたいとき，どのコード体系を選択するのが適切か。
　表意コード

アクセス制御を監査するシステム監査人の行為のうち，適切なものはどれか。　データに関するアクセス制御の管理規程を閲覧した。

マルウェアの動的解析に該当するものはどれか。　検体をサンドボックス上で実行し，その動作や外部との通信を観測する。

サービスマネジメントシステムにPDCA方法論を適用するとき，Actに該当するものはどれか。　サービスマネジメントシステム及びサービスのパフォーマンスを継続的に改善するための処置を実施する。

技術経営におけるプロダクトイノベーションの説明として，適切なものはどれか。　新たな商品や他社との差別化ができる商品を開発すること

自社の経営課題である人手不足の解消などを目標とした業務革新を進めるために活用する，RPAの事例はどれか。　業務システムなどのデータ入力，照合のような標準化された定型作業を，事務職員の代わりにソフトウェアで自動的に処理する。

FS関係（Finish-to-Start，終了-開始）
「受付が終了してから試験を開始する」というように、あるアクティビティの終了が、他方のアクティビティの開始条件になっている関係。

バランススコアカードの内部ビジネスプロセスの視点における戦略目標と業績評価指標の例はどれか。　製品の製造の生産性向上が目標であるので，製造期間短縮日数を指標とする。

バックアップ方式の説明のうち，増分バックアップはどれか。ここで，最初のバックアップでは，全てのファイルのバックアップを取得し，OSが管理しているファイル更新を示す情報はリセットされるものとする。　直前に行ったバックアップの後，ファイル更新を示す情報があるファイルだけをバックアップし，ファイル更新を示す情報はリセットする。

単一の入り口をもち，入力項目を用いた複数の判断を含むプログラムのテストケースを設計する。命令網羅と判定条件網羅の関係のうち，適切なものはどれか。　	判定条件網羅を満足するならば，命令網羅も満足する。

WPA3はどれか。　無線LANのセキュリティ規格
【GitHub】バッジを貼って README をおしゃれにする

バッジとは、有名な OSS プロジェクトの README でよく見るアレです。
![vue-badge.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/f5517294-3d0b-f376-987e-89b3568b98f7.png)
このバッジを自分のリポジトリの README にも追加してみたいと思います。
![badge.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/76407d39-d19a-6d10-aa18-b745ffa6bb64.png)

## ワークフローステータスバッジの追加

GitHub では Actions で実行されるワークフローの結果をバッジとして作成することができます。

https://docs.github.com/ja/actions/managing-workflow-runs/adding-a-workflow-status-badge

ワークフローの結果画面から**[Create status badge]**を選択します。
![workflow-status.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/0a3ea675-f843-eece-bcf8-261effe10720.png)

モーダル画面が表示されたら、**[Copy status badge Markdown]**をクリックすることでコードスニペットをコピーできます。
![status-badge.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/fd39ec45-6f58-becd-39b5-80110615d17d.png)
あとは、``README.md`` に貼り付けるだけです。

## shields.io を使う

[shields.io](https://shields.io/)からもバッジを作成することができます。いくつかバッジが用意されていますが、message や 色を指定して自分だけのバッジを作成することも出来ます。

### endpoint を指定してバッジを作成する

下記のような json を返すエンドポイントを用意することで、オリジナルのバッジを作成することができます。

```json
{
  "schemaVersion": 1,
  "label": "hello",
  "message": "sweet world",
  "color": "orange"
}
```

エンドポイントの指定

```
https://img.shields.io/endpoint?url=<URL>
```

### API Gateway でエンドポイントを用意

例えば、shields.io と API Gateway を使用することで簡単にバッジを用意できます。
API Gateway にはインポート機能があり、事前用意されたファイルをインポートすることで、パス・メソッド・リソースを一気に作成できます。

```yaml
---
swagger: "2.0"
info:
  version: "2021-08-29T11:38:13Z"
  title: "Sieldsio"
schemes:
- "https"
paths:
  /:
    get:
      consumes:
      - "application/json"
      produces:
      - "application/json"
      responses:
        "200":
          description: "200 response"
          schema:
            $ref: "#/definitions/Empty"
      x-amazon-apigateway-integration:
        type: "mock"
        responses:
          default:
            statusCode: "200"
            responseTemplates:
              application/json: "{\r\n  \"schemaVersion\": 1,\r\n  \"label\": \"version\"\
                ,\r\n  \"message\": \"1.0.0\",\r\n  \"color\": \"blue\"\r\n}"
        requestTemplates:
          application/json: "{\"statusCode\": 200}"
        passthroughBehavior: "when_no_match"
definitions:
  Empty:
    type: "object"
    title: "Empty Schema"
```

このファイルをインポートしてデプロイすることで、バッジの内容を用意できます。あとは、API をデプロイしたしたときに払い出されたエンドポイントを shields.io のクエリパラメータに指定することでバッジが作成できます。

```
https://img.shields.io/endpoint?url=https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/release
```

![version.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/2ef2c037-7293-f58b-c2d4-d5fc5e9f4010.png)

あとは、``README.md``に下記のようなコードを入れることでバッジが表示されるようになります。

```md
[![version](https://img.shields.io/endpoint?url=https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/release)](https://github.com/user/repository)
```
Nuxtでエラー Property '$axios' does not exist on type 'Store<{ things: string[]; name: string; }>'.

Nuxt　x Typescriptでアプリケーションを作ろうと思ったら以下のエラーが発生してハゲそうになりました

```
Property '$axios' does not exist on type 'Store<{ things: string[]; name: string; }>'.
```

![スクリーンショット 2021-08-29 21.41.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268801/4c6c40b9-367b-bc3c-46b6-26236cc3747c.png)


# 背景

Nuxt x Typescript で Vuex Store を使おうと思ってチュートリアルのコードをコピペしたらエラーが発生

https://typescript.nuxtjs.org/ja/cookbook/store

# 解決方法

https://axios.nuxtjs.org/setup/

Nuxt Axios　モジュールをインストールする
docker nodejs を利用時にnode_modulesが作成されなくなった

## Description

gatsbyやangularでdockerを利用する際に、OSによりinstall内容が変わるmoduleがあり、手元のnode_modulesをそのままdocker環境で利用した場合にErrorを吐く場合があった。
 dockerとlocalの環境で別にinstallしようと思い、docker-ignoreに追加 + docker内部でインストールを実施した際にエラーがでたため対処方法を追記。

#### Refs

関係ありそうだけどさっとしか見なかった。ごめんなさい。

- [yarnpkg/yarn#5500](https://github.com/yarnpkg/yarn/issues/5500)
- [yarnpkg/yarn#2240](https://github.com/yarnpkg/yarn/issues/2240)

## TL;DR

volumesにnode_modulesに追記する。

```docker-compose.yml
services:
  app:
    volumes: 
      - type: volume
        source: dependencies
        target: /${WORK_DIRECTORY}/node_modules
    command: yarn dev
volumes:
  dependencies:
```

## 対処方法

### node_modulesをvolumeデータとして扱う

databaseのデータと同じく、volumeにnode_moduluesを追加する。
雑に使ったdockerfile

```docker/server.dockerfile
FROM node:16-alpine3.11

WORKDIR /app

COPY package*.json ./
COPY yarn.lock ./

RUN rm -rf node_modules
RUN yarn install --frozen-lockfile
```

簡易的に作ったdocker-compose.yml

```docker-compose.yml
version: "3.9"

services:
  app:
    container_name: app
    build:
      context: .
      dockerfile: ./docker/server.dockerfile
    tty: true
    restart: always
    ports:
      - "3000:3000"
    volumes: 
      - type: bind
        source: .
        target: /app
      - type: volume　 #　volumeをtypeで指定
        source: dependencies　 # volumeに記載した名前と同じもの
        target: /app/node_modules #　利用しようとしている場所をtargetに記載
    command: yarn dev
volumes:
  db-data:
  dependencies: #　volumeに登録する
```

### 気付いた点

- dockerfileをXXX.dockerfileにするとVSCのファイルにiconがつく
- volumeで利用したため、複数のcontainerで使い回せる
- nocopyを使うとcontainerで相互更新しなくても利用できる
- cli系統のpackageを別のcontainerで区分けでき、 app: &node_containerで使い回しができる
Qiita Daily Survey memo 2021.08.29

# Qiita Daily Survey memo 2021.08.29
Qiita の記事を可能な限り毎日読むために、読んだmemoを公開することでモチベーションを維持しようという試み。

# [「テスト駆動開発＋画像処理アルゴリズム開発 → ぐう有能」の法則](https://qiita.com/belre/items/ae2db62684d56217eb3f)
o yucho(belre) さんの記事。
タイトルの通り、画像処理のアルゴリズム開発をする際に、テスト駆動開発ベースで開発して得られた知見を共有してくださっている記事です。
テスト駆動開発、とても興味があるので興味深く読ませていただきました！
やはり、設計工数がかかるところがネックなそうですが、最後にある通り開眼したいのでチャレンジしてみたいです。

おすすめの本もご紹介いただいているので、併せて読んでみてみたいと思います。
TerraformでDMSレプリケーションインスタンスを自動構築する(ロギング編)

# はじめに
DMS記事第2弾。

DMSは便利だが、マネージドに色々やってくれる分、中身がブラックボックスで、いざ何かが起きたときにログがないと不安である。
そういったケースに備えて、CloudWatch Logsへのログ出力の設定をしておこう。

DMSのインスタンスやタスクについては、[基本編](https://qiita.com/neruneruo/items/d327e2e0bf504c4c8c43)の構成を変更していくので、未読の方はそちらからご覧いただきたい。

# IAMロールの作成
いきなりハマりどころである。DMSのサービスロールをテキトーに作ってCloudWatch Logsに出力する権限をつけておけばいいんだろ、と思いたくなるが、ロール名を```dms-cloudwatch-logs-role```固定で作らないといけない。[ユーザーガイド](https://docs.aws.amazon.com/ja_jp/dms/latest/userguide/CHAP_Security.html#CHAP_Security.APIRole)に書かれたロール名は例として書かれているわけではないのである。

ということで、以下のように作成しておこう。

```HCL
resource "aws_iam_role" "dms_cloudwatch" {
  name               = "dms-cloudwatch-logs-role"
  assume_role_policy = data.aws_iam_policy_document.dms_cloudwatch_assume.json
}

data "aws_iam_policy_document" "dms_cloudwatch_assume" {
  statement {
    effect = "Allow"

    actions = [
      "sts:AssumeRole",
    ]

    principals {
      type = "Service"
      identifiers = [
        "dms.amazonaws.com",
      ]
    }
  }
}

resource "aws_iam_role_policy_attachment" "dms_cloudwatch" {
  role       = aws_iam_role.dms_cloudwatch.name
  policy_arn = "arn:aws:iam::aws:policy/service-role/AmazonDMSCloudWatchLogsRole"
}
```

# CloudWatch Logsのロググループ
DMSが勝手に作ってくれるが、勝手に作られるのが気に入らない場合は、以下の通りロググループ名が決められるので、あらかじめ作っておこう。
なお、ログストリーム名は、```dms-task-[レプリケーションタスクID]```が設定される。

```HCL
resource "aws_cloudwatch_log_group" "dms_replication_task" {
  name = "dms-tasks-[レプリケーションインスタンス名]"
}
```

# ロギングの設定
ロギングの設定は、[基本編のレプリケーションのタスク](https://qiita.com/neruneruo/items/d327e2e0bf504c4c8c43#%E3%83%AC%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%BF%E3%82%B9%E3%82%AF%E3%81%AE%E8%A8%AD%E5%AE%9A)を変更する。
具体的には、```Logging```のセクションだ。```CloudWatchLogGroup```と```CloudWatchLogStream```はDMS側で勝手に設定してくれる(というか、設定するとエラーになる)ので、EnableLoggingだけ変更しよう。LogComponentsはエラーレベルを変更できるので、必要に応じて変更しよう。

なお、この項目はなぜかインスタンス作成時には有効化できない。
一度作成後に、```EnableLogging```を```false```から```true```に変更して、再度```terraform apply```しよう。

```JSON:dms_replication_task_setting.json(抜粋)
(前略)
    "EnableLogging": true,
    "CloudWatchLogGroup": null,
    "CloudWatchLogStream": null,
    "LogComponents": [
      {
        "Id": "SOURCE_UNLOAD",
        "Severity": "LOGGER_SEVERITY_DEFAULT"
      },
      {
        "Id": "SOURCE_CAPTURE",
        "Severity": "LOGGER_SEVERITY_DEFAULT"
      },
      {
        "Id": "TARGET_LOAD",
        "Severity": "LOGGER_SEVERITY_DEFAULT"
      },
      {
        "Id": "TARGET_APPLY",
        "Severity": "LOGGER_SEVERITY_DEFAULT"
      },
      {
        "Id": "TASK_MANAGER",
        "Severity": "LOGGER_SEVERITY_DEFAULT"
      }
    ]
  },
(後略)
```

これでDMSのログが出力できるようになった！
AtCoderログ：0096 - AGC 014 A

# 問題

https://atcoder.jp/contests/agc014/tasks/agc014_a

## 問題文
> 高橋君と青木君とすぬけ君はそれぞれクッキーを $A,B,C$ 個持っています。
> この $3$ 人はお互いにクッキーを交換することにしました。具体的には、以下の操作を繰り返します。
> ・$3$ 人は同時に、各々が持っているクッキーを半分ずつに分けて、残りの $2$ 人にそれぞれ一方を渡す。
> ただし、誰かの持っているクッキーの個数が奇数個になったら、そこで操作を繰り返すのをやめます。
> さて、クッキーの交換は何回行うことができるでしょうか。 ただし、無限に続けられる場合もあることに注意してください。

## 制約
> ・$1 \le A,B,C \le 10^9$

## 収録されている問題セット
- [[BfB-E]\(AtCoder Problems Boot camp for beginners Easy 100\)](https://kenkoooo.com/atcoder/#/training/Boot%20camp%20for%20Beginners/1) #013

# 回答
## 回答1 (AC)
クッキーを交換する前のクッキーの枚数を $A,B,C$ $(A \le B \le C)$ 枚とすると、交換後のクッキーの枚数は $\frac{A+B}{2}, \frac{A+C}{2}, \frac{B+C}{2}$ $(\frac{A+B}{2} \le \frac{A+C}{2} \le \frac{B+C}{2})$ 枚になります。よって、交換前の最大個数と最小個数の差は $C-A$ 枚であるのに対し、交換後の最大枚数と最小枚数の差は $\frac{B+C}{2}-\frac{A+B}{2}=\frac{C-A}{2}$ 枚となることがわかります。

$A \ne C$ ならば差はちょうど半分になるので、交換を繰り返すことでいつかは交換が終了することがわかります。$C-A$ の最大値は $10^9-1$ なので、クッキー交換は高々 $\log_2(10^9-1)$ 回の操作で終了するので、具体的な値は計算すれば良いことがわかります。逆に $C-A=0$ のときは $A \le B \le C$ より $B$ も同じ値になるので、$A,B,C$ が偶数ならばこの操作は無限に続くこともわかります。

以上をまとめたコードは以下のようになりました。上記のような数学的な考察に気づかなくても、具体的な数値を計算することで無限ループの場合は見当が付くでしょうから、AC にするのはそこまで難しくないと思います。

```C++:agc014a-1.cpp
#include <bits/stdc++.h>
using namespace std;

int main() {
  int a, b, c;
  cin >> a >> b >> c;

  int answer = 0;
  while ( a%2==0 && b%2==0 && c%2==0 ) {
    if ( a==b && b==c ) {
      answer = -1;
      break;
    }
    int x, y, z;
    x = (b+c)/2;
    y = (c+a)/2;
    z = (a+b)/2;
    a = x;
    b = y;
    c = z;
    answer += 1;
  }

  cout << answer << endl;
}  
```

# 調べたこと
## [AtCoder の解説](https://atcoder.jp/contests/agc014/tasks/agc014_a/editorial) → [公式解説](https://img.atcoder.jp/agc014/editorial.pdf)
回答1と同じ方針でした。

# リンク
## 前後の記事
- 前の記事 → [AtCoderログ：0095 - ABC 160 C](https://qiita.com/RoadLynton/items/4e3644e78ba435562e8f)
- 次の記事 → [AtCoderログ：0097 - ABC 216 に参加しました](https://qiita.com/RoadLynton/items/744eddfc48b9fc1d9c29)
WordPressのパーマリンク設定を変更すると.htaccessは自動更新される

## はじめに
皆さんは日々の業務などでWordPressのパーマリンク設定を変更する機会はありますか？また管理ページから変更したパーマリンク設定は、どのように制御されているかご存知でしょうか？

パーマリンク設定を変更するとWordPressが自動で `.htaccess`ファイルを更新し、appcheがファイルを読み取ることでパーマリンクが反映される流れになっています。

このWordPressによる`.htaccess`の自動更新を理解していなかったために、WordPressサイト移行時に手間取ってしまいました。同じ悩みを抱えている方がいらっしゃるかもしれませんので、こちらで共有させていただきます🙋‍♂️

### こんな方におすすめ
- WordPressサイトを運営している方
- WordPressサイトのディレクトリ変更を予定している方

### 先に結論
- `.htaccess` の`BEGIN WordPress`と`END WordPress`の間に独自のパーマリンク設定を書いてはいけない
- `BEGIN WordPress`と`END WordPress`の間はWordPressが自動で変更してしまう

### 詳しく紹介
WordPressをインストールすると、以下のような`.htaccess`が生成されます。

```
# BEGIN WordPress

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
</IfModule>

# END WordPress
```

`BEGIN WordPress`と書かれているので、ついつい「WordPressのリダイレクト設定はここに書けば良いのかな？」と勘違いして、独自のリダイレクト設定などもこの後に続けて記述すると、パーマリンクを変更したタイミングで消えてしまいます。

独自のパーマリンク設定を追記したい場合は、以下のように`BEGIN WordPress`tと`END WordPress`の外に書くようにしましょう。

```
# BEGIN WordPress
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
</IfModule>

# END WordPress

# Origin Setting
<IfModule mod_rewrite.c>
    RewriteEngine On
    RedirectMatch 301 ^/hogehoge/(.*) /fugafuga/$1
</IfModule>
# Origin Setting
```

ちなみにパーマリンク設定を変更した際の処理は

- `wp-admin/options-permalink.php　`　
    - 91行目 `if ( isset($_POST['permalink_structure']) || isset($_POST['category_base']) )`
- `wp-includes/class-wp-rewrite.php`
    - 1027行目`public function set_permalink_structure($permalink_structure)`

このあたりの処理を見ていただくと確認できるかと思います。



滅多にパーマリンク設定を変更する機会はありませんが、サイトのお引っ越し時にパーマリンク変更する時もありますので、覚えておいて損は無いかと思います。
少しでもお役に立てましたら、幸いです　🙇‍♂️
Flutter開発環境:Windowsクライアント->Linux server

# 環境構築
この週末にubuntu 20.04 serverにFlutterでAndroidアプリ開発環境を構築した覚書です。

- 前提条件
    - サーバ：ubuntu 20.04L TS server
        - Android studio、Flutter等
    - クライアント：Windows10
        - VScode、リモートデスクトップ

## サーバ側
- 最低限必要なAndroid studio、Flutter、JavaSDKをインストール。<br>
この辺りはwebで情報を調べながらインストールすれば特にハマらないと思います。
- Android studioやAndroid端末のVMを動かすのでserverなんですがクライアントデスクトップ環境が必要になります。<br>
悩みましたが結局入れました。
- クライアントからリモートデスクトップで操作をするためにxrdmを入れました。<br>
xrdmを動かすにはkvm動かしたりbiosでCPUの設定を変えたりする必要がありました。

## クライアント側
- VScodeは入っていたのでremoto develop環境にFlutterプラグインを入れました。
- VScodeのリモートデベロップ環境でコーディング、リモートデスクトップでAndroidエミュレータを操作することで問題なく開発出来そうです。

次回から具体的な開発記事を書きたいです。
ローカルEthereum開発環境を構築する（プライベートチェーン）

# はじめに
タイトルの通り、ローカルでEthereum開発環境を構築してみたので、内容をまとめてみたいと思います。
※筆者は普段の業務でLinuxを全く触らないので、その辺は素人です。
　間違いがあれば、お手柔らかに。。。アドバイス頂けると幸いです。
※執筆時は2021/08ですが、最新の情報を追い切れていない可能性もあります。
　新しめの技術は急に利用方法、インターフェースが変わることもあるため、ご注意ください。

# 最終的な構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1770163/c7d6b70c-938b-a754-17c1-e1fdd9ba3653.png)

ざっくりとした図ですが、こんな感じ。
Docker上に各種環境を構築して、そこにローカル上のVSCode、ブラウザからアクセスします。

# 手順
[1.Dockerコンテナ上にGanache環境を構築](https://qiita.com/oishii_pg_gohan/items/4d65f149fea18f8e7256)
[2.Docker上にTruffle環境を構築](https://qiita.com/oishii_pg_gohan/items/62d1b15bf0ba242c3ca8)
3.GanacheとTruffleの連携
4.Docker上にReact開発環境を構築 ※執筆中...
5.最後につなげて動かしてみる ※執筆中...

※各手順の詳細はリンク先で記載しています。

# さいごに
ひとまず、極々簡単なEthereumを利用しての開発環境は構築出来ました。
今回の記事では記載していませんが、DockerComposeで作成した環境をまとめて共有しやすいようにしたいですね。
また、複数ノードを立てての動作確認など、まだまだ要調査が必要なものがあるので、
これから少しずつ進めていきたいと思います。

ちなみに、今回はGanacheを利用しましたが、Ganache-CLI、Gethも少し触ってみました。
その他2つに比べてGanacheはGUIもあり、TXの確認やStorageの確認なども出来るため開発時には使いやすいなと感じました。
ただ、マイニングを自動でやってくれたり、実際のETHを利用しての運用をするわけではないので、
本格的なサービスを見据えて利用する場合は、この辺りの情報／仕組みも確認・検討していくべきですね。

以上ですー。
Flutterを学ぼうpart3(Flutterのディレクトリ構成編)

Flutterに触りながらFlutter関連のことを学んでいく記事です。
前回はFlutterのサンプルアプリを起動させて、仮想デバイスで実行してみました。今回はFlutterの基本的なディレクトリ構成について学んでいきます。

前回記事はこちら↓
[Flutterを学ぼうpart2(動作確認編)](https://qiita.com/hiropin_hirotan/items/d454c76a751836cf8e42)

## ディレクトリ構成
下の画像はプロジェクト作成直後のディレクトリです。
上から順にみていきましょう！あまり直接触る機会がない部分は割愛します。
![ディレクトリ構成1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/b88ff348-19ba-3138-a174-d893c543771c.png)



**①.dart_tool**
pubやその他ツールなどで使用されるファイルが格納されているフォルダ。
そのほかにもFlutterのBuildキャッシュ(Flutter_Build)などもこのフォルダに格納されます。

**②.idea**
Android Studio自体(IDE)の設定情報などが記載されたファイルが格納されているフォルダ。
この辺はEclipceやIntelliJなど別の開発ツールでも同様のフォルダがあると思います。

**③android**
Androidのネイティブアプリ生成に必要なファイルが格納されているフォルダ。

**④build**
ビルド時に生成されるファイルが格納されているフォルダ。

**⑤ios**
iosのネイティブアプリ生成に必要なファイルが格納されているフォルダ。

**⑥lib**
Dartのスクリプトなどアプリケーションで使用するソースコードを格納するフォルダ。
サブディレクトリを作成してその配下にソースコードを格納してもOKです。
前回のFlutterのサンプルアプリを実行したのは、このディレクトリ配下の```main.dart```というファイルです。

**⑦test**
テスト用のファイルを格納するフォルダ

**⑧pubspec.yuml**
Flutterアプリケーションのプロジェクトに関する定義を記述するファイル。
依存するパッケージやバージョン情報が記載されています。
JavaScriptのプロジェクトでいうnpm、PHPプロジェクトでいうComposerと同様の役割を持っており、使用するライブラリを追加したい場合はこのファイルに新たに定義する必要があります。



上から順に簡単に説明していきましたが、開発を行う上で直接修正をいれるディレクトリやファイルは基本的にlib配下とtest配下、pubspec.yumlぐらいですね。他のファイルはFlutterがいい感じに作成や実行をしてくれます。

lib、test、pubspec.yuml以外のファイルを修正する機会があれば、改めて記事で触れていきたいと思います。少し短いですが今回は以上になります。

## まとめ
今回はFlutterのディレクトリ関連をみました。
本当はそれぞれもっといろいろ細かい役割があるとは思いますが、導入の学習なので軽く触れる程度に学びました。
次回は前回動かしてみたサンプルアプリのソースコードを見て動かしながらdartの学習をしていきたいと思います！
【Talend】Hello World 的な【基礎】

#初めに
Talendの基礎を実践的に身に付けることが本記事の目的です。

#環境
|使用環境  |バージョン  |
|---|---|
|OS  |Windows10  |
|Talend  |7.3.1 |

#使用するコンポーネント
・tFileInputDelimited
・tLogRow

#実践内容
Talendの一番基礎的な使い方であるファイルの読み込みと出力をしてみましょう。

#実践
今回はこのcsvファイルを使用します。
コピペして使いましょう。

```employee.csv
id,name,age
1,Ross,26
2,Rachel,24
3,Monica,24
4,Phoebe,25
5,Joey,25
6,Chandler,25
```

まずは「tFileInputDelimited」を配置して設定します。
![キャプチャ1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1225075/a8684308-430c-8fe3-8343-a16979748ad5.jpeg)

「tFileInputDelimited」をダブルクリックし基本設定を設定します。

|項目  |設定内容  |備考  |
|---|---|---|
|ファイル名  |csvファイルのパス  |入力フィールドの横の「…」からファイルのパスを指定。変数も使用可。  ​|
|フィールド区切り  |"," |今回はcsvファイルなのでコンマを指定  |
|ヘッダー  |1 |ヘッダーの行数を指定  |
※補足
詳細設定でエンコーディング等も設定できるので必要に応じて設定しましょう。

次に「スキーマの編集」の横の「…」からカラムの定義をします。
![キャプチャ2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1225075/331a9434-0e71-413c-9f0e-92c10b77ccbe.jpeg)

|項目  |設定内容  |備考  |
|---|---|---|
|カラム  |ヘッダー  |カラム名を好きに入力しましょう。  ​|
|タイプ  |型 |値の型を定義します。  |
※補足
日付型を扱う場合は「パターン」で日付のパターン(yyyy-MM-dd)を設定してあげると良いでしょう。
「長さ」では最大桁数を指定できます。
「デフォルト」で各カラムのデフォルト値を設定できます。

次に「tLogRow」を配置し、「tFileInputDelimited」と繋げます。
「tFileInputDelimited」を右クリックし、「ロウ」、「メイン」と押下し「tLogRow」と繋げます。
![キャプチャ3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1225075/e4992057-d883-02ef-d5c4-5344120005b6.jpeg)
最後に「tLogRow」の設定をしましょう。
![キャプチャ4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1225075/445c3ad1-fe60-a258-b1ac-9c121f93d951.jpeg)

|項目  |設定内容  |備考  |
|---|---|---|
|スキーマ  |同期カラム  |同期カラムを押下すると繋いだコンポーネントに定義したカラムと同期します。  ​|
|モード  |テーブル |値を出力するモードを選択できます。見やすいのを選びましょう。  |

#実行
実行タブから実行しましょう。
![キャプチャ5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1225075/66edc986-19b2-7319-791d-d4865ccf1eff.jpeg)
読み込んだcsvファイルの内容が出力できました。
「tFileInputDelimited」で設定したヘッダー部分も確認できますね。

#まとめ
Talendの「Hello World」的な、ファイルの入出力を実践しました。
実務ではまずファイルを正常に読み込めているか確認するためにこれらを行ったりするかもしれませんね。
AppSync（GraphQL）で 更新日時、登録日時の項目が必須になるので外す

タイトルの通り、createdAt と updatedAtが不要やnull がありうるようなケースの対応

ファイル `amplify/backend/api/{アプリケーション名}/schema.graphql`

```
type todo @model {
  id: ID!
  name: String!
}
```

のような定義の場合は、createdAtとupdatedAtのattributeがnot null で自動生成される。
DynamoDBの定義上はnot null 制約ではなく、AppSync（GraphQL）として attributeはnot nullとなる。


ビルドされた方のファイル`amplify/backend/api/{アプリケーション名}/build/schema.graphql`を見るとわかりやすい

- ビルド後のファイル
 
```
type todo {
  id: ID!
  name: String!
  createdAt: AWSDateTime!
  updatedAt: AWSDateTime!
}
```

## 対応例
createdAt と updatedAt ともにattribute不要で、更新日時だけ必須にしたい場合は
自動生成される場合と区別できるようにしておくため attriute名は独自に`updatedDt`等として

```
type todo @model(timestamps :null) {
  id: String!
  name: String!
  updatedDt: String!
}
```
のようにして、updatedDtに、$util.time.nowISO8601() か utcの new Date() 相当をセットする


## 参考
https://massyuu.hatenablog.com/entry/2020/09/24/110822
firebase9に更新したら型のエラーがでたので対応したメモ

## 概要
firebaseのupdateをしたら、以下のエラーが発生。 firebaseを8から9にあげたのが原因。

```
Uncaught SyntaxError: The requested module '/whitemap/@fs/D:/develop/develop/project/aws-whitemap/aws-whitemap-client/node_modules/.vite/firebase_app.js?v=bebe78db' does not provide an export named 'default'
```

[Upgrade from version 8 to the modular Web SDK ](https://firebase.google.com/docs/web/modular-upgrade) を参考に対応する。

## 互換のある書き方に修正する。
以下の書き方に変更。これでエラーは消えた。

```diff
- import firebase from 'firebase/app';
- import 'firebase/auth';
- import 'firebase/firestore';


+ import firebase from 'firebase/compat/app';
+ import 'firebase/compat/auth';
+ import 'firebase/compat/firestore';
```

## ９の書き方(モジュラースタイル)に修正する。
動かすだけなら上記でよいが、今後のアップデートを考えると、9の書き方(モジュラースタイル）に変更したほうが良いため、リファクタリングする。

日本語の[ドキュメント](https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja)だとWebv9(Beta)に新しい書き方がかいてある。
英語版の[ドキュメント](https://firebase.google.com/docs/firestore/query-data/get-data?hl=en)ではv9(modular)になっている。

```diff:client/src/domain/firebase/index.ts
- import firebase from 'firebase/compat/app';
- import 'firebase/compat/auth';
- import 'firebase/compat/firestore';


+ import { initializeApp } from 'firebase/app';
+ import { getAuth } from 'firebase/auth';
+ import {
+   getFirestore,
+   serverTimestamp as getServerTimestamp,
+ } from 'firebase/firestore';
import config from './config';


- if (!firebase.apps.length) {
-   firebase.initializeApp(config);
- }
- export const db = firebase.firestore();
- export const auth = firebase.auth();


+ const firebaseApp = initializeApp(config);
+ export const auth = getAuth(firebaseApp);
+ export const db = getFirestore(firebaseApp);
```


クエリの問い合わせも関数型っぽい書き方になっている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/4aedaf1e-4b1f-4802-8150-c7de2300fdf5.png)

実際に[書き換えた差分はGitHub](https://github.com/hibohiboo/aws-whitemap-client/commit/2e5742d0965ef23a498cecf4b5289cacdb6d47ad)で。

## 参考

[完了時点のソース](https://github.com/hibohiboo/aws-whitemap-client/tree/2e5742d0965ef23a498cecf4b5289cacdb6d47ad)

[バージョン8からモジュラーWebSDKにアップグレード ](https://firebase.google.com/docs/web/modular-upgrade)
[Cloud Firestore にデータを追加する](https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ja)
[データを読み取る](https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja)
【UniRx】Subjectをコンポーネントのインスタンス変数にした場合の寿命

# はじめに
`Component.UpdateAsObservable()` 等のUniRxの拡張メソッドは、そのコンポーネントが付与されたGameObjectのDestroyのタイミングでComplete状態へ移行するようになっています。

このため、下記のように `AddTo(this)` は不要です。  

```cs
public class SomeComponent : MonoBehaviour
{
    private void Start()
    {
        this.UpdateAsObservable()
            .Subscribe(_ => DoSomething());
        //  .AddTo(this)
        //  ↑ GameObjectのDestroyでCompleteになるのでAddTo(this)は不要
    }
}
```

では自作の `Subject` はどうなのでしょうか？

# ストリーム停止条件を記述しない場合

```cs:ストリーム停止条件を記載しない書き方
public class EventFiringComponent : MonoBehaviour
{
    private readonly Subject<bool> someSubject = new Subject<bool>();
    public IObservable<bool> SomeObservable => this.someSubject;
}

public class SubscribingComponent : MonoBehaviour
{
    public void SubscribeEvents(EventFiringComponent component)
    {
        component.SomeObservable.Subscribe(_ => DoSomething());
    }
}
```

まずはシンプルに書いた場合の挙動を考えます。
この場合、ストリームが停止するのは、 `Subject` を持つコンポーネントが付与されたGameObjectがDestroyされた後にGCが走るタイミングとなります。
それはDestroy後すぐかもしれないし、アプリケーション終了のタイミングかもしれません。
メモリ使用制限が厳しい実行環境ではこれがネックとなる可能性はありますが、記述量の少なさや装飾が少ないことによる可読性の高さといった利点を考えると、この書き方を採用する場面も往々にしてあると思います。


# コンポーネントと寿命を同じにする方法

`Component.UpdateAsObservable()` 等と同じようにコンポーネントの付与されたGameObjectのDestroyでストリームが停止するようにするためには、以下のように書くことになります。

```cs:ストリームソースの寿命をコンポーネントに合わせる書き方
public class EventFiringComponent : MonoBehaviour
{
    private readonly Subject<bool> someSubject = new Subject<bool>();
    public IObservable<bool> SomeObservable => this.someSubject;

    private void OnDestroy()
    {
        this.someSubject.OnCompleted();
    }
}

public class SubscribingComponent : MonoBehaviour
{
    public void SubscribeEvents(EventFiringComponent component)
    {
        component.SomeObservable.Subscribe(_ => DoSomething());
    }
}
```

これでDestroyのタイミングでストリームソースがComplete状態へと移行することになり、　`Component.UpdateAsObservable()` 等と同じライフサイクルになります。

「UniRxの拡張メソッドとライフサイクルが同じ」、「コンポーネントの寿命とストリームソースの寿命は同じ」という仕様のわかりやすさは非常に魅力的です。
また、UniRx内ではComplete状態になると不要になった内部の参照を切るように工夫されており、メモリ効率が上がることも期待できます。

しかし、1行のみとは言え、 `Subject` を多く保有しているクラスでは記述量の増加が結構辛いのと、宣言箇所と停止条件を書く場所が離れるので、記述漏れが発生しそうで怖いです。
シーン内の一部品では過剰設計となるかもしれませんが、実行環境のメモリ使用制限が厳しい場合やフレームワークなどの汎用部品では使えそうです。
【Rails】エラーメッセージ表示

#　目標
* エラーメッセージを表示させる
 ![スクリーンショット 2021-08-29 20.36.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927584/7393e52e-4229-c9c5-2c43-0cf10cc95c3f.png)

* ユーザーの登録や投稿がなんで失敗したか知らせてくれるメッセージ

# 実装
エラーメッセージのファイル作成

```erb:app/views/layouts/_error_messeages.html.erb
<% if model.errors.any? %>
  <div id="error_explanation" class="alert alert-warning">
    <ul class="mb-0">
      <% model.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>
```

### バリデーション
新規登録の際の制限を記述。
ここに記述した制限に引っかかった場合にエラーメッセージで表示される。

```ruby:app/models/user.rb
class User < ApplicationRecord
  before_save { email.downcase! }
  validates :name, presence: true, length: { maximum: 50 }
  validates :email, presence: true, length: { maximum: 255 },
                    format: { with: /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i },
                    uniqueness: { case_sensitive: false }
  has_secure_password
```

新規登録フォームにパーシャル`render`でエラーメッセージファイルを記述する。
`<%= render 'layouts/error_messages', model: f.object %>`

```erb:app/views/users/new.html.erb

  <h1>Sign up</h1>

    <%= form_with(model: @user) do |f| %>
     <%= render 'layouts/error_messages', model: f.object %>
    
      <div>
        <%= f.label :name, 'Name' %>
        <%= f.text_field :name, class: 'form-control' %>
      </div>

      <div>
        <%= f.label :email, 'Email' %>
        <%= f.email_field :email, class: 'form-control' %>
      </div>

      <div>
        <%= f.label :password, 'Password' %>
        <%= f.password_field :password, class: 'form-control' %>
      </div>

      <div>
        <%= f.label :password_confirmation, 'Confirmation' %>
        <%= f.password_field :password_confirmation, class: 'form-control' %>
      </div>

      <%= f.submit 'Sign up', class: 'btn btn-primary' %>
    <% end %>
```

これでエラーメッセージが表示されます、他のフォームも同様の方法で大丈夫です。
【実践！Java】Stream APIをちゃんと理解する

# ■ Stream APIとは
Stream APIは、Listや配列を簡単に操作することができるイテレーションの拡張API。
例えば、for文でListから条件に合う値を取得する処理などはStream APIを使うことでよりシンプルに書くことができる。

大きく分けて以下の3つの操作を行う。
➀ Streamを生成
↓
➁ 中間処理（省いてもOK）
↓
➂ 終端処理

# ■ Stream生成
配列からストリーム生成

```java
Arrays.stream(配列のdata)
```
listからストリーム生成

```java
list.stream()
```

mapからストリーム生成

```java
map.entrySet().stream()
```

# ■ 終端処理

生成したストリームを集計し、結果を返す処理。
簡単な処理であれば中間処理を省いて終端処理だけで実装できるため、先に紹介。

## 代表的なメソッド

| メソッド     | 概要 |
|:------------|:------------: |
| anyMatch()  |  少なくとも一つの要素でtrueとなるか |
| allMatch()  |  全ての要素でtrueとなるか |
| nonMatch()  |  全ての要素でfalseとなるか |
| forEach()   |  全ての要素に関数を適用する |
| count()     |  要素数を返す |
| max()       | 最大値を返す |
| min()       |  最小値を返す |
| findFirst() | 先頭の値を返す |
| findAny()   |  任意の値を返す |
| collect()   |  リストとして取り出す |

## 使い方

anyMatchを使って、Listの中に特定の文字列が含まれているかを判定。

```java
// List作成
List<String> sampleList = Arrays.asList("hoge", "fuga", "piyo");

// anyMatchで終端処理
boolean flg = sampleList.stream().anyMatch(list -> list.equals("hoge"));

// true が出力される
System.out.println(flg);
```

# ■ 中間処理

中間処理を使うことで、ストリームに対してより複雑な処理を行うことができる。

## 代表的なメソッド

| メソッド     | 概要 |
|:------------|:------------: |
| limit()     |  ループさせる要素をn個までに制限 |
| skip()      |  ループさせる要素を先頭からn個skip |
| filter()    |  filterで処理した結果trueの要素を返す |
| distinct()  |  重複する要素を排除して返す |
| sorted()    |  並び変えたストリームを返す |
| map()       |  mapの要素を取得する |

## 使い方

未成年の男の名前をListで取得する

```java
List<String> youngMen  = men.stream()
  .filter(y -> y.age < 20)        // 20未満の男のみにする
  .map(y -> y.name)               // 名前を取得
  .collect(Collectors.toList());  // リストにして返す
```

# （おまけ）はまったポイント
ラムダ式内でラムダ式外にある変数を書き換えることはできない。
Stream生成前に作成した変数をStream処理で使用しようとしたらエラーが出ました、、、
（finalな変数であれば問題ない）
Stream APIを使うなら、ラムダ式も理解しておくべき。
約一か月で応用情報技術者試験に合格するためのプラン

##応用情報技術者試験　受験日程
令和３年１０月１０日
あと４２日らしいです…

##私のスペック（底辺）
* アメリカの某大学　コンピューターサイエンス学部　中退
* 開発経験特になし
* 今年の７月にSEになったが研修中のため、実務経験なし
* [キタミ式イラストIT塾 基本情報技術者](https://www.amazon.co.jp/%E3%82%AD%E3%82%BF%E3%83%9F%E5%BC%8F%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88IT%E5%A1%BE-%E5%9F%BA%E6%9C%AC%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85-%E4%BB%A4%E5%92%8C03%E5%B9%B4-%E3%81%8D%E3%81%9F%E3%81%BF%E3%82%8A%E3%82%85%E3%81%86%E3%81%98/dp/4297117819),[キタミ式イラストIT塾 応用情報技術者](https://www.amazon.co.jp/s?k=%E5%BF%9C%E7%94%A8%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85+%E3%82%AD%E3%82%BF%E3%83%9F%E5%BC%8F&adgrpid=104214141797&gclid=CjwKCAjw4KyJBhAbEiwAaAQbEwvok3fGShQAhUxYwlV46tkSWz4DrlQfb_AlSJrfRr94XDpo25LU5RoC3OMQAvD_BwE&hvadid=448321322620&hvdev=c&hvlocphy=1009572&hvnetw=g&hvqmt=e&hvrand=462596760325437392&hvtargid=kwd-527499133132&hydadcr=26605_10270242&jp-ad-ap=0&tag=googhydr-22&ref=pd_sl_95quep4b4e_e_p51)をざっと本屋で見て大体理解できる程度

##受験しようと思った理由
* 特に開発経験や受賞履歴など、他人に証明できるものがなかったため、一つの証明できるスキルとして合格したいと思った。（あと合格したら昇給するらしい）
* SEとして自信がなかったため、知識の基礎をつけようと思ったが、資格勉強のほうがモチベが上がるし、大事な部分を効率よく学べると思った為。

##試験内容

|   |試験時間   |出題形式   |出題数   |合格基準   | 
|:-:|:-:|:-:|:-:|:-:|
|午前   |9:30～12:00(150分)   |選択式(四肢択一)   |80問   |60%   | 
|午後   |13:00～15:30(150分)   |記述式   |11問(１問必須で４問選択)  |60%    |  

##勉強プラン
数々の合格した方のブログを読み漁り、共通する勉強方法があったのでそれを実行しようと思います。
ほとんどの方が２か月以上の余裕をもって勉強されているので、簡易な参考書１冊（１か月）→次の参考書→過去問（１か月）という流れでいした。私には４０日しかないので、結果重視で勉強しようと思います。
やる内容を日数で割るスケジュールのやり方は私には合わないので、受験日までに勉強することを記載します。

###全体
| ー | １日目 | ２日目~10/2 | 10/3~10/8| 10/9（前日） |
|:-:|:-:|:-:|:-:|:-:|
|午前   |参考書をざっと見   |暗記道場で最低過去１０年分解く   | 最新３回分を解いて最終チェック＋時間内に解く練習→復習の繰り返し  | 略度などの単語を頭に入れ込む＆復習  |
|午後   |同上  | ５日以内に１分野を終わらる（最低過去１０回分）  |同上   | 同上   |



過去問を解説をみながらざっと通す→解説を見てわからない問題は参考書やぐぐって解決する。
知識もないのに過去問を自力で解き始めたり、参考書を一から読む時間の余裕がないので、このやり方でします。
会社で受けてる講師の方にも言われたのですが、解くより見て理解する数が大事だと言われたので（たしかドラゴン桜とかでも見る勉強やってなかったっけ…）

###午前対策
学んだこと

* ４０％が過去問と同じ内容。しかも選択肢が５０音順のため最悪場所暗記でいける（最終手段）
* 残り６０％のうち２０％を実力で正解できれば合格
* 最新２～３回分からは試験に出ない

対策：反復練習

1. 参考書届き次第（今日メルカリで注文した）～１０月２日：過去８回分の過去問を解く
2. １０月３日～１０月９日：最新３回分を解いて最終チェック＋時間内に解く練習→復習の繰り返し

資料
* [過去問道場](https://www.ap-siken.com/apkakomon.php)


###午後対策：解法理解
学んだこと

* 答えは問題の中にある→答え方の練習が必要
* 午前より時間を費やしたほうが良い
* 自分に合った分野を選ぶ
* 過去問演習がとても大事。似た問題がある。
* １０問から４問（分野選ぶ）
* 念のため６分野対策したほうがよい
* 本番は難易度を確かめる２分→解く問題を選択して回答

分野選択
必須
* 情報セキュリティ

簡単といわれてるもの
おすすめ度★★★

* データベース：出題パターンが少ないので覚えてなれたら簡単
* システム監査：答えは文章中にある。抜出問題。

おすすめ度★★

* プログラミング：アルゴリズムを学んでたらいける。時間をかけたら満点行ける、自己採点ができる、解きやすい
* セキュリティ：覚える範囲が比較的少ない
* アルゴリズム：思考力が問われるが慣れたらいける
* 組込システム：解きやすい

対策：解説を見て理解→なれる、回答の書き方を学ぶ
1. 注文した参考書が届いた日：過去問を見てから何が解きやすいか判断する
2. 参考書届いた次の日～１０月２日：５日以内に１分野を終わらる（過去１０回分解く）
3. １０月３日～１０月８日：最新３回分を解いて最終チェック＋時間内に解く練習→復習の繰り返し

おすすめ資料
* [応用情報技術者午後問題の重点対策 (重点対策シリーズ)](https://www.amazon.co.jp/2019%E5%BF%9C%E7%94%A8%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85%E5%8D%88%E5%BE%8C%E5%95%8F%E9%A1%8C%E3%81%AE%E9%87%8D%E7%82%B9%E5%AF%BE%E7%AD%96-%E9%87%8D%E7%82%B9%E5%AF%BE%E7%AD%96%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E5%B0%8F%E5%8F%A3%E9%81%94%E5%A4%AB/dp/4865751556)

##全資料
* メルカリで注文した本（過去問、参考資料など）
* [過去問道場](https://www.ap-siken.com/apkakomon.php)：
* [公式過去問](https://www.jitec.ipa.go.jp/1_04hanni_sukiru/_index_mondai.html)
インフラエンジニアについて

#本記事の概要

この記事は、2021.08.29に[とにかくほめる！マウントなしのLT会](https://tonihome.connpass.com/event/217765/)用に作成した資料です

---

##筆者からのお願い

- 私自身、まだインフラエンジニアについての知識が未熟な部分が多々あります
- もし資料の内容で間違えている点がありましたら、ご指摘して頂けると嬉しいです

---

###今回登壇した理由

- 前回の登壇時よりも、上手にLTが出来るようになりたいと思った為


---

###LTを通して参加者に伝えたい事

- インフラとは何か
- インフラエンジニアとは(インフラエンジニアの業務内容)


---


###インフラとは何か

---

- Infrastructure(インフラストラクチャー)の略
- ***主に(団体・組織などの)下部組織、基盤を意味する言葉***
- 日常生活だと、道路、電気、ガス、水道、通信網といったそれがないと生活が成り立たないものを指す

![スクリーンショット 2021-08-29 19.37.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/933264/2754a07c-968a-2670-eb21-376830dd4523.png)


---

###基盤とは何か(どんな意味か)

- 「ある物事を成立させるための基礎や土台」の事を意味します。
 
> https://biz.trans-suite.jp/24565　
より引用


---

##ではIT業界における基盤(インフラ)って何を指すの？

---

###IT業界内でのインフラ

- サービス・アプリケーションを動かす為の土台の事
- ハードウェア・ソフトウェアの2つに分けることが出来る

---

###ハードウェア

- ざっくりというとコンピューター機器の事
- 主にPC、サーバー、ストレージ、ネットワーク機器がハードウェア

---

###サーバ

- インターネットを通じて、サービスを提供するコンピュータの事
- サーバの中にデータを入れておき、インターネットを通じて利用者にそのデータを提供する
-　　ハードウェアとしてのサーバ・ソフトウェアとしてのサーバに分けられる

![スクリーンショット 2021-08-29 13.21.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/933264/e1abc4cc-0543-c851-955f-32e07ba7d1c7.png)


---

###ハードウェアとしてのサーバ

- データの処理をするCPU、データの一時保管場所のメモリ、長期保管場所のストレージの入った機器
- 最近は、サーバの中に仮想的に作る仮想サーバというのも増えてきています
 (サーバを作るまでの時間が短い、サーバを置くための場所がいらない等の理由)

---

###ソフトウェアとしてのサーバ(ソフトウェア)

- サーバソフトウェア、サーバソフトと呼ばれる
- 例えば、「webサイトを表示する」、「会員情報を登録、編集、削除、表示する」、「メールを送受信する」などといったサーバとしての機能をする為に必要なソフトウェアの事
- 主なサーバソフトウェアとして、Webサーバ、メールサーバ、データベースサーバ、DNSサーバーといったものがある(他にもたくさんあります)

---

##ネットワーク機器

- ネットワークとは何かと何かの繋がりの事

![スクリーンショット 2021-08-29 19.48.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/933264/d6c72f0e-d769-f7d1-b703-2b5dfc3341e1.png)

- コンピュータ同士の繋がり、お互いに情報をやりとりする仕組みの事をコンピュータネットワークという
- 繋がりの規模に応じて、LAN、WAN、インターネットに分けられる
- ネットワーク機器とは、コンピュータ同士を繋げる為の機器(ルータ、スイッチ、ケーブル、ファイヤーウォール等)を指す

---

##では、インフラエンジニアってどんな仕事をするの？

---


###まずインフラエンジニアを分類すると

- インフラエンジニアを大きく分類すると、サーバエンジニアとネットワークエンジニアに分かれる
- インフラエンジニアは、サーバエンジニア、ネットワークエンジニア、データベースエンジニアの総称の事

---

###業務内容をざっくりというと

- サービスを提供する為の基盤の構築をするよ
- 構築した基盤に異常が起きていないかチェックして、異常が起きていたら直すよ


---

###もう少し具体的に説明していくと

---

###設計

- インフラを構築する目的、必要とする機能についてなど、インフラの要件を決定する
- 構築の元になる設計書に、コストや期間、どんな機器を用いどのように取り決め運用していくか、など詳細な点をまとめて作成していく

---

###構築

- サービスを動かす為の土台(基盤)を作っていく
- 主に設計書に基づいた機材の調達、設置、配線を行う

---

###テスト

- テストの目的をはじめ、体制やスケジュール、観点、合格基準などを記載したテスト計画書を作成する
- その後、テストの内容、手順、期待値をまとめたテスト仕様書を作成する

---

###テストの内容

- 単体テスト
 - 一つの動作、設定値が設計書通りかをチェックするテスト
- 総合テスト
  - 例えば、サーバーとネットワークの結合や、サーバー間の処理など、複数機器で実現する処理が正常に動作するか確認するテスト 
- システムテスト
  - 本番環境で正常に動作するかの確認
  -  システムの性能を計る性能試験、実際に運用した際に想定される負荷に耐えられるか検証する負荷試験などが挙げられる。


---

###運用保守

- 24時間365日インフラは稼働しています
- その際に、障害が発生する事もあるので日々障害が発生していないかを監視したり、障害が発生していたらプロパーさんに連絡したり、トラブルシューティングを行うこともあります。

---

以上になります！ご静聴いただきありがとうございました！！
Detecting Invisible People

## 要約
近年、単眼での物体検出・追跡は飛躍的に向上していますが、物体がカメラから見えていることを前提としています。多くのオフライントラッキングアプローチは、再認識（ReID）を利用して、オブジェクトが再び現れた後にトラックレットをリンクすることで、隠蔽されたオブジェクトを事後的に推論します。しかし、自動運転車のような身体を持ったロボットのオンライントラッキングでは、基本的にオブジェクトパーマネントが必要です。本研究では、トラッキングベンチマークを再利用し、見えない物体を検出するための新しい測定基準を提案しています。その結果、現在の検出・追跡システムでは、このタスクのパフォーマンスが劇的に低下することが分かりました。この性能低下の多くを回復するために、2つの重要な技術革新を導入しました。1つは、時間的な流れの中での隠蔽物体の検出を、短期的な予測の課題として扱い、動的な流れの予測から得られるツールを活用します。2つ目は、最新の単眼深度推定ネットワークの観測結果を利用して、3Dを明示的に推論する動的モデルを構築することです。我々の知る限り、隠蔽された物体を追跡・検出するタスクにおいて、単眼の深度推定の有効性を実証した最初の研究である。我々のアプローチは、ベースラインと比較してアブレーションを11.4％、F1スコアを5.0％向上させることができた。

##
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860620/762a21f8-33d8-16b6-9e3d-b23f72739234.png)
個人的に覚えておきたいviエディタのコマンド集

今回はLinux系の標準テキストエディタであるviの数あるコマンドの中から便利なコマンドや覚えておきたいコマンドを掲載します。
※前回同様viエディタについての個人的なメモの為、基本操作等は掲載していません

#選択行の後ろに移動し編集
現在選択されている行で「Shift」 + 「A」を入力すると、カーソルを行末へ移動した上で編集モードに移行します。
逆に選択行の先頭へ移動したい場合は、「Shift」 + 「I」です。

#1画面分移動する
「Ctrl」 + 「f」と入力すると、1画面下へ移動します。
逆は「Ctrl」 + 「b」です。

#ファイルの一番下・一番上に移動する
「Shift」 + 「G」と入力すると、ファイルの一番下へ移動します。
また、「gg」と入力すると、ファイルの一番上へ移動します。
「Shift」 + 「G」の前に数字を入力すると、指定した数字の行へ移動できます。

#カレント行の前後に行挿入
現在の行で「o」を入力すると、一つ下に空白の行を挿入し、編集モードへ移行します。
一つ上に行を挿入する場合は、「Shift」 + 「O」です。

#やり直し（アンドゥ）
「u」を入力することで、直前の編集内容を取り消しします。
なお、「Ctrl」 + 「r」と入力することで、取り消し操作自体を取り消しできます。

#単語単位で削除
「dw」を入力すると、現在のカーソル位置から次の単語までを削除します。

#1行まるごと削除
削除したい行にカーソルを持ってきてから「dd」と入力すると、選択していた行そのものを削除できます。
また、「dd」の前に数字を入力すると、カーソルの行から指定した数字分の行数を削除します。

#検索
「/<文字>」を入力すると、現在の行から後方までを検索対象としますが、「?<文字>」と入力することで、逆に現在の行から前方を検索対象とします。
検索後に「n」で次の候補、「N」で前の候補へ移動します。

#置き換え
「:%s/<対象文字>/<置き換え後の文字>/」を実行することで、次に見つかった対象文字を置き換え後の文字に置き換えします。
上記コマンドの後ろに「g」を付けると対象文字全てを置き換えします。

#行数表示
「set nu」と入力すると、行数を表示します。

#改行時の自動インデント
「set autoindent」と入力すると、改行した時にwindowsのサクラエディタ等と同様に改行する前の行と同じインデントされます。

#自動バックアップ
「set backup」と入力すると、自動でバックアップファイルが作成されます。
「set nobackup」で自動バックアップの無効化になります。


#vi起動中に他のコマンドを実行する
「:!<コマンド>」で、viエディタを終了することなく他のシェルコマンドを実行することができます。
例えば「:!ls」を実行すると、vi実行中にカレントディレクトリの確認ができます。
また、「:r!<コマンド>」とすることで実行結果を現在開いているテキストファイルに挿入します。
7つの習慣 第四世代 一週間 計画 スケジュール表 がどこ探してもない件

#経緯
最近、7つの習慣を読み初めて人生が良くなった気がする（プラシーボ効果）
もちろん、読んだだけでは意味がないため一つ一つ実行していこうと胸に刻んだ。
まずは、自立をしなければならないため、第三の習慣にある「一週間単位の計画」を立てることにしたのだが...

＿人人人人人人人人人人人人人＿
＞　計画表がどこにもない！　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣

いや、正確には印刷しやすいPDF形式のファイルがネットに転がっていないのだ。

本を拡大コピーして使うことも考えたが、このタイミングで神経質おじさんになってしまった私はExcelで再現することにした。

#完成品
私が「うーん、うーん」言いながらExcelを使っている場面を描画してもしょうがないので、完成品を出す。
![スクリーンショット 2021-08-29 203508.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1265249/c84fa073-c79e-faa3-12ea-d59f813e32b1.jpeg)

OneDriveにて共有しているため、ご自由に使って欲しい。

https://1drv.ms/u/s!AmzzkCb6cCmS32LKT9YuOQVfG0-Z?e=aV4GEb