OmniAICreator/Qiita-1.07M huggingface dataset:
jQueryを使った企業の宣伝サンプルWebページ

jQueryを使った企業の宣伝サンプルWebページを作成いたしました。

```HTML
<!DOCTYPE html>
<!-- 作成者 乃木坂好きのITエンジニア -->
<!-- 作成日 2021/6/20 -->
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アニメーション2</title>
</head>
<script src="jquery.js"></script>    
<script>
    
$(function(){
    $('h1').click(function(){
        $('h1').css('color','blue');
    });
});
    
$(function(){
    $('h2').click(function(){
        $('h2').css('background-color','yellow');
    });    
});

$(function(){
    $('h3').click(function(){
        $('h3').css('color','black');
        $('h3').css('background-color','aqua');
    });    
});

$(function(){
    $('h5').click(function(){
        $('h5').css('color','black');
        $('h5').css('background-color','lightgreen');
    });    
});
    
    

$(function(){
    for(var num=0;num<10;num++){
    $('h6').fadeOut();
    $('h6').fadeIn();
    }
});
    
    
function fuori(){
    let i = 0;
    while (i< 1){
        window.open('http://www.fuoriclasse2.com','flora','width=480,height=360');
        i++;
    }
}
    
</script>
<style>
.euro2020 {
   color:red;
   font-size:80px;
   text-align:center;
   padding:120px;    

}
.fra {
   color:black;
   font-size:70px;
   text-align: center;
   padding:100px;
}
.esp
{
    color:lawngreen;
    font-size:50px;
    text-align: center;
    color:darkred;
    padding: 100px;
}

.por {
    background-color:lightgreen;
    text-align: center;
    color:darkred;
    font-size:50px;
    padding: 100px;
} 
    
.freestyle1 {
    background-color:floralwhite;
    text-align: center;
    color:mediumvioletred;
    font-size:50px;
    padding: 100px;    
}
    
.fuori {
    background-color:lightgreen;
    text-align: center;
    border: 1px solid #b7a077;
    border-radius: 5px;
    color:deeppink;
    font-size:40px;
    padding: 50px;
    float:right;
}
    
#aono1 {
    font-size:50px;
    color:red;
    background-color:aquamarine;
    text-align: center;
    padding:200px;

}    
    
    
.aono2 {
    font-size:10px;
    color:blue;
}    
</style>		

<body>
<h1 class="euro2020">EURO2020開催中</h1>
<h2 class="fra">フランスがやらかした</h2>
<h3 class="esp" >スペインもやらかした</h3>
<h4 class="por">ポルトガル・・・・</h4>
<h5 id="aono1" onLoad="tm()"><img src="aono.jpg" alt="ダークヒーロー青野"　width="800",height="600" ><br><br>フリースタイル社長の<span>青野豪淑</span>です</h5>
<h6 class="freestyle1">フリースタイルはサッカーゲームを作ります。<br>fuori-classeの皆さん期待してください</h6>    
<br>
<a class="fuori" onclick=fuori()>fuori-classe</a>
<br>
<br> 
<br>
<br>
<br>
<br>
<br>    
</body>
<footer>
    <small class="aono2">&copy; 青野豪淑</small>
</footer>
```


jQueryの機能を使うとタグの文字を変えたり、タグ部分の背景色を変えたり、for文で文字の表示、非表示が出来ます。動的にWebページが出来て便利です。
ツッコミ歓迎、Python勉強部屋：検索順に関すること

Pythonエンジニア試験問題の中にこんなのがありました。次の文章が正しいかどうかという趣旨です。

#####「あるモジュールがインポートされるときにインタープリタが検索する順序は、まずビルトインモジュール、次にsys.path変数で得られるディレクトリ、最後にシンボリックリンクを置いてあるディレクトリである。」


そもそも何を言っているのか意味がわからない！
私なりに解釈してみました。かなり強引です(ツッコミ歓迎)。
文章を４つのパートに分けました。



#####「あるモジュールがインポートされるときにインタープリタが検索する順序」
とは、忘れ物をしたとき、物のとき探す順番のようなもの、たとえば家の中、会社、喫茶店などをイメージするといいと思います。

#####「ビルトインモジュール」

ですが,組み込み関数のあるモジュール、print()は組み込み関数で、仰々しくやるには__builtins__.をつけます。

```		__builtins__.print("Hello World!")
```
ただ、print()は組み込みで用意された関数だから、普通はこんなものをつけません。探しもののたとえ話だと、「いつもの場所」という感じで、まずは家の中を探すイメージです。


#####「次にsys.path変数で得られるディレクトリ」
ですが、sys.path変数とはたとえば
　　　　　　　　```
		import sys
		print(sys.path)```

などと打ち込むと、システムに関するパスがずらずらでてくるやつです（ちなみにglot.ioでも動きました）。
	探しもののたとえ話だと、次に重要な場所、たとえば、会社などですかね。

#####最後にシンボリックリンクを置いてあるディレクトリである。

シンボリックリンクはショートカットと理解しました。そこそこなデータのおいてあるところという意味でレンタル倉庫とかですかね

ただし公式ドキュメントを読むと

https://docs.python.org/ja/3/tutorial/modules.html
#####シンボリックリンクを含むディレクトリはモジュール検索パスに追加されません。

と書かれています。レンタル倉庫は探しに行かないということです。
なのでこの文章は全体として「誤り」という結論になります。
CSSだけでうちわを作る

# どうも7noteです。毎日暑い日が続くからCSSでうちわを作って涼みたい。

毎日毎日汗を拭いながら働く日々。
そんな辛い日々を癒してくれるうちわがあればいいなと。

CSSで作ってしまいましょう。

![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/d0450bc9-1027-3a11-02c9-8d4cffe05dc7.png)

![sample2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/42788003-5c5c-d797-cddb-7b96a8c49561.png)


## ソース

```index.html
<div class="uchiwa">
  <div class="mochite"></div>
</div>
```

```style.css
.uchiwa {
  width: 200px;
  height: 200px;
  background: #D9E3EC;
  /* background: url(uchiwa.png) center center / contain; */ /* 画像うちわ用 */
  /* border: 1px solid #ccc; */
  border-radius: 50%;
  position: relative;
}
	
.mochite {
  content: '';
  width: 75%;
  height: 75%;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  position: absolute;
  bottom: -50%;
  left: 0;
  right: 0;
  margin: auto;
}

.mochite::before {
  content: "";
  width: 80%;
  height: 70%;
  display: inline-block;
  background-image: linear-gradient(90deg, #fff 25%, #DDB76D 25%, #DDB76D 50%, #fff 50%, #fff 75%,#DDB76D 75%, #DDB76D);
  background-size: 4px 4px;
  border-bottom: solid 2px #DDB76D;
  border-radius: 50%;
  transform: perspective(.6em) rotateX(-380deg);
  transform-origin: bottom;
  position: absolute;
  top: -40%;
  left: 0;
  right: 0;
  margin: auto;
}

.mochite::after {
  content: '';
  width: 9%;
  height: 50%;
  background: #DDB76D;
  display: inline-block;
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  margin: auto;
}
```

![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/c692de3f-8ada-7af7-4401-6085a2d543dc.png)


## 解説

丸に白い丸を重ねて紙の部分を作成。
そこに持ち手をつければ完成です。

紙の部分は好きな写真をはめ込んで推しうちわを作ったりもできますよ。

骨組みの部分はかなり無理矢理作ってるので解説は省きます。。。

## まとめ

**「結論」**
CSSでうちわを作っても涼しくはならない。
けどCSSの練習にはなるかも。クーラー最高！

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
PDOトランザクションについて勉強してみた

# トランザクションとは
複数のデータベースの更新処理を実行処理がなされるまでは、仮状態で留めておいて
特に問題がなければ、処理をまとめて実行するというもの。
一度のタイミングでまとめて処理するため、処理速度が向上するというメリットがある。
また、トランザクションの処理中は他のトランザクションの処理を受け付けことはできないため、データベースの同時アクセスによるデータの行き違いを防ぐことができる。
つまり、適切なタイミングでトランザクション処理を行うとシステムの高速化&データの整合性を同時に向上させる効果がある。

# トランザクションのイメージ
画像は以下のサイトより使わせていただいております。
https://gray-code.com/php/transaction-by-using-pdo/
![スクリーンショット 2021-06-20 9.18.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916260/da3ec813-66e6-990f-7894-6fb4faa132ed.png)
スタート　：　beginTransaction()
正確に実行できた？ YES ：　commit()
正確に実行できた？ NO  ：　rollback()

```
try {
	// DBへ接続
	$dbh = new PDO("mysql:host=localhost;dbname=test;charset=utf8", 'username', 'password');

	// トランザクション開始
	$dbh->beginTransaction();

	// ここにデータベース更新系の処理が入る

	// コミットで処理
	$dbh->commit();

} catch(PDOException $e) {

	// ロールバックで処理キャンセル
	$dbh->rollBack();

	// エラーメッセージ出力
	echo $e->getMessage();
}

// 接続を閉じる
$dbh = null;
```
PowerShell/概要、初心者向け知識

以下初心者向けに概要や知識のまとめ


#PowerShell概要

Microsoftが開発したCUI(キャラクタユーザーインターフェース）の一種。
主にテキスト（文字列）を使って、PCを動かしているWindows OSへ直接コマンドで命令を下せる。

```
コマンドプロンプトの欠点であるスクリプトの記述が長くなってしまうこと、またUnixなど他のシェルと比べると機能が弱いことなどを改善している
（例：コマンドレットと呼ばれるPowerShell上で利用可能なコマンド…コマンドレットの組み合わせにより、従来のコマンドプロンプトでは難しいとされていた処理が短いコードで可能になる。)

※上記情報は以下の以下の情報を参考にさせていただき執筆しました。
[PowerShell IT用語辞典：(https://www.otsuka-shokai.co.jp/words/powershell.html)]
```

#使用環境（業務）
OS：Windows10 
Windows PowerShell(x86)
Windows PowerShell ISE

#forとforeachの違い

自分が少しつまづいた箇所。

foreach：存在するデータ件数分処理を回す
for：条件式を指定し、その条件に沿ったデータを作成

・ソース例

```PowerShell.script(example)
   #取得結果の変数[$_result]は、項目「first_number」「second_number」を持つ
- for($_cnt=0; $_cnt -le $_result.length; $_cnt++){
      if([String]::IsNullOrEmpty($_result[$_cnt].second_number)){
　　　　#取得結果の対象項目「second_number」がNULLの場合
        $_list += $_LF + $_result.first_number + ","
      }else {
        $_list += $_LF + $_result.first_number + $_result.second_number      
      }
  }
```

※今後も追記予定
athrill(アスリル)機能マニュアル(プログラム実行制御)

#概要
[athrill(アスリル)](https://qiita.com/kanetugu2018/items/cf3dea16710a3f0737e8#%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB)のプログラム実行制御について解説します．

#ブレーク設定(b)

ブレーク設定(b)コマンドの書式は以下のとおりです．

```
 * break(b):
   1) break {<addr(hex)>|<funcname>}
      set a break point. Break points are shown using 'info break' command.
   2) break <file> <lineno>
      set a break point on the {<file>, <lineno>}. Break points are shown using 'info break' command.
```
## 1) break {\<addr(hex)>|\<funcname>}
ブレーク設定の引数には，「アドレス(16進数)」でも「関数名」でも指定することができます．

### アドレス(16進数)の場合
```
[DBG>b 0x1c98
break 0x1c98
```

### 関数名の場合
```
[DBG>b main_task
break main_task 0x1c98
```

## 2) break \<file> \<lineno>
ブレーク設定は，ファイル名と行番号でも指定できます．

```
[DBG>b prc_support.S 565
break 0x5866
```


#ステップ実行(n)
ステップ実行(n)コマンドの書式は以下のとおりです．

```
 * next(n):
   1) next
      step forward
```

1命令単位で処理を進めます．

```
[DBG>n
[DONE> core0 pc=0x7d0 null(null) 0x7d0: DI
[NEXT> pc=0x7d4 start.S 61
[DBG>n
[DONE> core0 pc=0x7d4 null(null) 0x7d4: MOVHI imm16(1),r0(0) r3(0):65536
[NEXT> pc=0x7d8 start.S 61
[DBG>n
[DONE> core0 pc=0x7d8 null(null) 0x7d8: MOVEA imm16(17828),r3(65536) r3(65536):83364
[NEXT> pc=0x7dc start.S 62
```

プログラムカウンタ(pc)が１命令単位で増えていることがわかります．


#ブレーク解除(d)

ブレーク解除(d)コマンドの書式は以下のとおりです．

```
 * delete(d):
   1) delete
      delete all break points
   2) delete <break_no>
      delete the break point of <break_no>
```

## 1) delete
引数なしの場合は，全ブレークポイントを解除します．

```
[DBG>info break
[0] 0x0
[1] 0x1c98 main_task(+0x0)
[2] 0x7d4
```

上記状態で，d コマンドを実行すると，0x0番地以外はすべて解除されます．

```
[DBG>info break
[0] 0x0
```


## 2) delete \<break_no>
引数に\<break_no>を指定すると，当該箇所のみを解除できます．

```
[DBG>info break
[0] 0x0
[1] 0x1c98 main_task(+0x0)
[2] 0x7d4
```

```
[DBG>d 2
[DBG>info break
[0] 0x0
[1] 0x1c98 main_task(+0x0)
```
ReactのOnClick時に音が鳴るようにした時の記録

##経緯
Reactの練習として簡単な貯金箱アプリを作成しました。
イメージとしてはこのような感じ↓
![localhost_3000_ (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700117/fe9a9c19-80d5-987f-28d7-28b33ce1ede6.png)


作成している途中に、「これ＋と-ボタンをクリックした時に"チャリン♪"って音鳴らしたいなー」と思ったので実装方法と、その際に困ったことを記録として残しておきます！

##実際のコード

実際のボタン部分とオーディオを作成するためのコードは以下の通りです。(該当部分のみ載せています)

ボタン部分↓

```react
<button className="btn" onClick={() => {
  audioPlay(true);
  setCount(count + 1);
  props.setSum(props.unit + props.sum);
}}>
 ＋
</button>

<button className="btn" onClick={() => {
 audioPlay(false);
setCount(count - 1);
props.setSum(-props.unit + props.sum);
}}>
−
</button>
```

↓オーディオ作成、再生部分

```react
  const checkUnit = (isIncrement: boolean) => {
    if (isIncrement) {
      if (props.unit < 1000) {
        return "../audio/inCoin.mp3"
      } else {
        return "../audio/inBill.mp3"
      }
    } else {
      if (props.unit < 1000) {
        return "../audio/outCoin.mp3"
      } else {
        return "../audio/outBill.mp3"
      }
    }
  }

  const audioPlay = (is_increment: boolean) => {
    const audio = new Audio(checkUnit(is_increment))
    audio.play().then(() => {
      console.log("Audio started!")
    })
      .catch(error => console.warn(error))
  }
 ```
内容としてはボタンをクリックすると、カウント数と、親コンポーネントで管理している合計金額が変化するというとてもシンプルな内容になっています。

オーディオ作成・再生部分では、audioPlay関数内の

```react
const audio = new Audio(checkUnit(is_increment))
```

の部分でオーディオ要素を作成しており、引数として音源のURLを指定する必要があるのですが、今回お札と小銭、＋と-でそれぞれ使用する音源を分けたかったので、checkUnit関数で場合分けを行いました。


```react
  const checkUnit = (isIncrement: boolean) => {
    if (isIncrement) {
      if (props.unit < 1000) {
        return "../audio/inCoin.mp3"
      } else {
        return "../audio/inBill.mp3"
      }
    } else {
      if (props.unit < 1000) {
        return "../audio/outCoin.mp3"
      } else {
        return "../audio/outBill.mp3"
      }
    }
  }
```
お札と小銭で音源を変えることはさほど難しくはなかったのですが、プラスとマイナスはどのように分けようか...と考えて、今回は``is_increment``をtrue/falseで渡すことでプラスをクリックしているかマイナスをクリックしているかを分けるようにしました。

よしできた！と思い、ボタンをクリックしてみたのですが、クリックしてもなかなか音源が再生されず・・・。
調べてみたところ、new Audioの引数に指定するURLは<b>index.htmlからのパスを指定する</b>必要があるみたいです。

index.htmlからのパスにすることと、条件分岐をすることで4つのパターンの音源を使い分けて実装を行うことができました！

以上、私が実際に実装をする上で困ったことでした！！

###最後に
今回の内容としてはすごく基礎的な部分だと思います。
少しずつですが、実装を通して自分のできることを増やしていければと思います:smiley:
インタープリタを作る その29

#概要

インタープリタを作ってみた。
avrインタープリター書いてみた。
相対ジャンプrjmpの実装。

#サンプルコード


```
	rjmp: function(k) {
		this.PC += k + 1;
	},

```

#成果物

https://embed.plnkr.co/plunk/HYkXm3Ta1CArhs9k

以上。
1 commit behind "master"を解消した話

<h1>はじめに</h1>
プルリクエストをした際に、「1 commit behind "master"」が発生しているという指摘をいただいたため、その対応の記録です。

<h1>状況</h1>
恥ずかしながら、指摘を受けた段階では、何が起きているのか理解できていませんでした。

そこでブランチを見に行ったところ、以下の画像のような状況でした。

![ブランチ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1581554/25adb6fa-1f22-53fa-759c-3db791bd22d2.png)

赤線がmasterブランチ、緑線が開発ブランチです。
赤丸のところで、開発ブランチ（develop1）をmasterブランチにマージし、その後、別の開発ブランチ（develop2）を切って、次の作業を開始し、緑丸の上から３つ目のところで、プルリクエストをして、「1 commit behind "master"」が発生しました。

<h1>原因</h1>
今となっては、何をしてしまったのか、よくわからないというのが正直なところではありますが、develop1ブランチをmasterブランチにマージするときか、develop2ブランチを切るときに何かやらかしたのだと思います。
※レビュー待ちの時間に、次にやることをあれこれとコードを触りながら考えていたので、それが失敗の元だったと思います。皆さんは、お気をつけください。

<h1>対応</h1>
まずは、ローカルリポジトリのmasterブランチにリモートリポジトリのmasterブランチを反映させます。

```
git checkout master
git pull origin master
```

次に、現在の開発ブランチ（develop2）にmasterブランチをマージします。

```
git checkout develop2
git merge master
```

コンフリクトが発生していれば、ここで解消する必要があるかと思いますが、私の場合は、コードを修正していたわけではないので、コンフリクトは発生していませんでした。

あとは、いつもどおり、commit、pushで完了です。

```
git commit -m "behindの解消"
git push origin develop2
```

これにより、上記画像のとおり、赤線（master）と緑線（develop2）が合流しました。


<h1>さいごに</h1>
さて、いかがでしたでしょうか？
コンフリクトの解消についての記事は割と出てくるのですが、「○ commit behind "〇〇"」などで検索しても解決方法がなかなか見つけられなかったので、記事にしてみました。
PHP基礎構文



##文字の表示
```sample.php
<?php
echo "Hello,world!";
?>
```
#####実行結果
```
Hello,world!
```

##変数
変数名には、アルファベット、数字、アンダースコア( _ )が使えます。
ただし、変数名の最初の文字に数字は使えません。

```sample.php
<?php
$num;
$num = 1;
$num2 = 2;
echo $num;
echo $num2;
?>
```
#####実行結果
```
1
2
```

##演算子
###算術演算子
```sample.php
<?php
$num = 7;
$num2 = 2;
echo $num + $num2;
echo $num - $num2;
echo $num * $num2;
echo $num / $num2;
echo $num % $num2;
?>
```
#####実行結果
```
9
5
14
3.5
1
```

###関係演算子
正しくないときは1返ってきます。
正しくないときは「 空 」が返ってきます。

```sample.php
<?php
$x = 10;
$y = 2;

echo ($x > $y);
echo ($x < $y);
echo ($x >= $y);
echo ($x <= $y);
echo ($x == $y);
echo ($x != $y);
?>
```
#####実行結果
```
1
0
0
0
0
1
```

###論理演算子（AND）

```sample.php
<?php
$x = 8;
$y = 3;

echo ($x >= 5 && $x <= 10);
echo ($y >= 5 && $y <= 10);
?>
```
#####実行結果
```
1
0
```

###論理演算子（OR）

```sample.php
<?php
$x = 8;
$y = 3;

echo ($x == 3 || $y == 3);
echo ($x == 1 || $y == 1);
?>
```
#####実行結果
```
1
0
```

##配列
```sample.php
<?php    
$a = ["sato", "suzuki", "takahashi"];

echo ($a[0]);
echo ($a[1]);
echo ($a[2]);
?>
```
#####実行結果
```
sato
suzuki
takahashi
```

###多次元配列
```sample.php
<?php
$a = [ ["sato","suzuki"],["takahashi","tanaka"] ];

echo ($a[0][0]);
echo ($a[0][1]);
echo ($a[1][0]);
echo ($a[1][1]);
?>
```
#####実行結果
```
sato
suzuki
takahashi
tanaka
```

##if文
```sample.php
<?php
  $age = 0;

  if ($age >= 20) {
    echo ("adult");
  }else if ($age==0) {
    echo ("baby");
  }else {
    echo ("child");
  }
?>
```
#####実行結果
```
baby
```

##for文
```sample.php
<?php
  for($i = 0; $i <= 4; $i ++) {
    echo $i."\n";
  }
?>
```
#####実行結果
```
0
1
2
3
4
```

##関数
```sample.php
<?php
  function say_hello() {
    echo "Hello World";
  }
  say_hello();
?>
```
#####実行結果
```
Hello World
```

###引数がある関数
```sample.php
<?php
  function say_hello($greeting) {
    echo $greeting."\n";
  };
  say_hello("Good Morning");
  function cal($x) {
    echo ($x * 3);
  };
  cal(6);
?>
```
#####実行結果
```
Good Morning
18
```

###複数の引数がある関数
```sample.php
<?php
  function cal($x, $y) {
    echo ($x / $y);
  };
  cal(6, 3);
?>
```
#####実行結果
```
2
```

###戻り値がある関数
```sample.php
<?php
  function cal($x, $y) {
    return $x / $y;
  };
  $result = cal(6, 3);
  echo $result;
?>
```
#####実行結果
```
2
```

###クラス
アクセス修飾子には、public（パブリック）、protected（プロテクテッド）、private（プライベート）があります。
publicは、どこからでもアクセス可能です。
protectedは、クラス自身、継承したクラス、親クラスからのみアクセスできます。
privateは、同じクラスの中でのみアクセス可能です。

```sample.php
<?php
  function cal($x, $y) {
    return $x / $y;
  };
  $result = cal(6, 3);
  echo $result;
?>
```
#####実行結果
```
2
```
windowsでiverilog その103

#概要　

windowsでiverilogやってみた。
avrのcpu書いてみた。
練習問題、やってみた。

#練習問題

AからZまで、表示せよ。

#アセンブラを書く。

```
	ldi r16, 0x00
	ldi r31, 0x40
loop:	inc r16
	inc r31
	cpi r16, 0x01a
	brne loop

```

#rom化する。

```
			rom[0] <= 16'hE000; //	ldi r16, 0x00
			rom[1] <= 16'hE4F0; //	ldi r31, 0x40
			rom[2] <= 16'h9503; //loop:	inc r16
			rom[3] <= 16'h95F3; //	inc r31
			rom[4] <= 16'h310A; //	cpi r16, 0x01a
			rom[5] <= 16'hF7E1; //	brne loop

```

#テストベンチを書く。

```
module test;
	reg clk,
		rst;
	wire [7:0] outport;
	avr u(.clk(clk), .rst(rst), .porta(outport));
	initial
	begin
		$monitor("%s", outport);
		clk = 0;
		rst = 1;
		#2
			rst = 0;
		#2
			rst = 1;
		#230
			$finish;
	end
	always
		#1
			clk = ~clk;
endmodule




```

#実行結果

```


@
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z


```

以上。
windowsでiverilog その102

#概要　

windowsでiverilogやってみた。
avrのcpu書いてみた。
定数比較cpiを実装する。

#考え方

オペコードを一致させる。
レジスタコードを取り出し、定数と比較し、キャリアとゼロを求める。

#サンプルコード

```
	parameter CMD_CPI  = 16'b0011xxxxxxxxxxxx;

			if (opcode[15:12] == CMD_CPI[15:12])
			begin
				Z <= ~| Ri;
				C <= Rs[7] & ~Rd[7] | Ri[7] & ~Rd[7] | Rs[7] & Ri[7];
			end

```

以上。
windowsでiverilog その101

#概要　

windowsでiverilogやってみた。
avrのcpu書いてみた。
インクリメントincを実装する。

#考え方

オペコードを一致させる。
レジスタコードを取り出し、1個加算する。

#サンプルコード

```
	parameter CMD_INC  = 16'b1001010xxxxx0011;

			if ({opcode[15:10], opcode[3:0]} == {CMD_INC[15:10], CMD_INC[3:0]})
			begin
				registers[dest[4:0]] <= registers[dest[4:0]] + 1;
			end

```

以上。
windowsでiverilog その100

#概要　

windowsでiverilogやってみた。
avrのcpu書いてみた。
AVRstudioでアセンブラをコンパイルし、intelHEXフォーマットから、C#でバイナリを取り出し、verilogソースを作るツールをjavascriptで作った。

#投入したソース

アセンブラ

```
  ldi r16, 0x00
	ldi r31, 0x40
loop:	inc r16
	inc r31
	cpi r16, 0x01a
	brne loop

```

バイナリー

```
00
E0
F0
E4
03
95
F3
95
0A
31
E1
F7

```

#結果

```
rom[0] <= 16'hE000; //   ldi r16, 0x00
rom[1] <= 16'hE4F0; // 	ldi r31, 0x40
rom[2] <= 16'h9503; // loop:	inc r16
rom[3] <= 16'h95F3; // 	inc r31
rom[4] <= 16'h310A; // 	cpi r16, 0x01a
rom[5] <= 16'hF7E1; // 	brne loop

```

#成果物

https://embed.plnkr.co/plunk/8ka7Zv0Z4lbcILBX

以上。
初心者がWEBデザインするなら、STUDIO ！（ヘッダー編）


今回はwebサイト制作で挫折しまくり初心者の私が、見つけた救世主"STUDIO"を使用して
レスポンシブ対応からSEO対策まで備えたウェブサイトを作成します！
しかも全て、、、、、、、ノーコードで！！！最高すぎませんか？

STUDIOは日本に本社を構えるSTUDIO株式会社が2018年4月に正式リリースした国産のホームページ制作ツールです。２０２０年6月にはCMS機能も追加されました！
公式サイトSTUDIOで登録を行い基本無料で作成から公開までできる。
また有料コンテンツでは追加機能や独自ドメイン接続、外部アプリ連携などもできます。






STUDIOについてメリット、デメリットを説明します。

メリット:sunny:
・ノーコードでデザインができる
・テンプレだけでなく自由度の高いデザインができる
・動きのあるデザインも簡単に作れ、細かく設定できる
・デザイン⇨公開までが簡単
・レスポンシブ対応が簡単にできる
・チュートリアル動画も無料で充実

デメリット:umbrella2:
・html、cssの必要最低限の知識がいる
・STUDIOに実装されていない機能は使えない



今回はheader部分を作成しレスポンシブ対応にさせました。モバイル対応のところは憧れのハンバーガーメニューを実装しました。STUDIOを使ってわずか３時間程で完成しました。

操作方法に慣れるまで大変かもしれませんが、それでも圧倒的に目で確認しながらレイアウトできると、楽しいですし分かりやすいと思います。



ではheaderの作成方法について



①、左作業スペースにあるメニューからボックスを選ぶ初期値はdivボックスです。
左のメニューバーからheaderボックスを選びましょう。
![スクリーンショット 2021-06-20 4.18.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280365/e07e37ee-047f-21dd-5114-f6e8f7901208.png)

②、右側の作業メニューでタブの種類変更ができるので、headerに変更。大きさは適当に横１００％、縦７０pxとかに始めはしてます。

③、まず私は企業のロゴを配置したかったのでボックスからimageを選択
右クリックでimageボックスに入れる画像を選ぶ。アップロードした画像を指定

④、headerのボックスにimageを入れます　※この時　imageボックスの横幅、縦幅がhederボックスより大きいと入らないので注意！

⑤、上記と同じような手順でメニューバーも作って行きます。テキストをlistボックスに入れて
一つ目の文字サイズ、文字間を調節したらコピーアンドペーストで必要項目分作ると時短です。

⑥、メニュー項目ができたら、nuvボックスを作って中に入れて行きます。
要素を入れたら横並びに指定しましょう。padding等間隔調整もここでします。上部メニューに項目がありますので各要素ごとに行ってください。
![スクリーンショット 2021-06-20 5.23.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280365/8533691b-239e-c185-07d8-962d6ef16c8a.png)

⑦、nuvボックスをheaderボックスに入れます。あとはボックス外側にある整列ようタブで調整するだけです。

![スクリーンショット 2021-06-20 5.26.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280365/a1e53885-9748-d1a1-96bc-81668d985053.png)

⑧、完成です。

![スクリーンショット 2021-06-20 5.27.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280365/b362781a-0ecb-0bf6-068d-d5cc65afbdff.png)

ちなみに私が作ったのはこちら（PC用header）
![スクリーンショット 2021-06-19 17.24.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280365/a30d6d53-7636-4060-c0c3-d1ab8c595330.png)
（モバイル用header）ハンバーガーメニューで
![スクリーンショット 2021-06-19 17.24.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280365/e6a33918-a514-9127-de01-9419d53caa93.png)
メニューを開く動きからシャドーなど簡単にボタンで操作できます。
![スクリーンショット 2021-06-19 17.24.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280365/4601588c-c946-527b-06d2-213b49bc8d1c.png)





上記説明で分かりずらい方もいらっしゃると思うのでまずは自分でチュートリアルも見ながら、STUDIOを使ってみることをオススメします！ハンバーガーメニューはチュートリアルの項目にもありますのでぜひ作ってみてください！
　
では、また作成次第更新して行きます:relaxed:
【EC2】WordPressを構築しよう　sec7前半

目的

前半：WordPressの設定。

後半：なぜ「Wordpressが表示されるのか」紐解く。ネットワークがなぜ繋がるのか。TCP/IPについての学習を進める。

前半パート

1. WordPress用のDBの設定
2. WordPressのインストール
3. WordPressの設定

## 1. WordPress用のDBの設定

1. RDSの中にDBを作成
2. WordPressのDB用にMysqlのユーザーを作成
3. ユーザーに権限を付与

EC2にssh接続　→　RDSのMysqlログイン

```sql
MySQL [(none)]> CREATE DATABASE aws_and_infla DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
# DB作成コマンド、デフォルトの文字コードの設定、デフォルトの照合順序を設定
Query OK, 1 row affected, 2 warnings (0.02 sec)

MySQL [(none)]> SHOW DATABASES;
+--------------------+
| Database           |
+--------------------+
| aws_and_infla      |
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
5 rows in set (0.00 sec)

MySQL [(none)]> CREATE USER 'aws_and_infla'@'%' IDENTIFIED BY 'password';
Query OK, 0 rows affected (0.02 sec)
# ユーザーの作成、＠以降が接続先のホストを示し、%はどこでもOKという意味、接続時のパスワードを指定

MySQL [(none)]> GRANT ALL ON aws_and_infla.* TO 'aws_and_infla'@'%';
# 権限を付与する、aws_and_inflaDBの全てを操作できる、全てのテーブルを操作できる。

MySQL [(none)]> FLUSH PRIVILEGES;
# 設定を反映

MySQL [(none)]> SELECT user, host FROM mysql.user;
# 確認
+------------------+-----------+
| user             | host      |
+------------------+-----------+
| aws_and_infla    | %         |
| root             | %         |
| mysql.infoschema | localhost |
| mysql.session    | localhost |
| mysql.sys        | localhost |
| rdsadmin         | localhost |
+------------------+-----------+
6 rows in set (0.00 sec)
```

## 2. WordPressのインストール

1. ライブラリのインストール
2. WordPressのダウンロード
3. WordPressの解凍
4. WordPressのプログラムがアパッチから見える場所に配置
5. WordPressファイルの保有者・グループの設定
6. アパッチを再起動

```sql
sudo amazon-linux-extras install -y php7.2
# php7.2を指定してインストール
sudo yum install -y php php-mbstring
# php関連のライブラリをインストール
wget https://ja.wordpress.org/latest-ja.tar.gz
# URLを指定してファイルをダウンロードするコマンド
tar xzvf latest-ja.tar.gz
# gzファイルを解凍する
sudo cp -r * /var/www/html/
# 現在のディレクト以下の"/var/www/html/"にコピーする。/var/www/html/はアパッチが参照するファイル
sudo chown apache:apache /var/www/html -R
# ファイルの所有者を変更、変更者と変更グループを変更、全てを指定。
sudo systemctl restart httpd.service
# アパッチを再起動
```

## 3. WordPressの設定

ドメイン名から、WordPressを設定した。
Tacotronを高速化させるためにVocederについて少し調べてみた。

# PitchTacotron高速化

学習メモがてらに記事を投稿しております。適切な表現がなされていないかもしてないですが、ご了承ください。(これは2021年1月ごろに書いた内容となっています。)

### 目的

Pitch推論から音声合成する*Tacotron*(*PitchTacotron*)によるtext2speech(TTS)をCPUでも低レイテンシで行いたい！そのためTTSパイプラインの高速化が目的となります。

### ボトルネック

プロファイラーで*PitchTacotron*の実行時間を調べたところ、vocoder部分がボトルネックになっていました。 

vocoderとはメルスペクトログラムから機械的に音声を再合成するものです。(voice + encoder)

vocederには*weveglow*を使っていたが、RTF(Real Time Factor:実時間係数)を小さくするために、他のvocoderと処理速度を比較してみました。


#### 音声分析合成システム *WORLD*

実際にGPUで音声合成する(waveglow)のに約6秒かかるのテキスト量で実行時間を調べてみた。

> **CPU world synthsize: 0.243225 s**
>
> **CPU waveglow synthsize : 23.801406 s**

合成にかかる速度は*WORLD*のほうが圧倒的に早いですね。

ただし、*WORLD*はf0、スペクトル包絡、非周期性指標から合成されるため、メルからwavを生成できませんでした。

**World vocoderの特徴**
- *World vocoder*はオープンソースプロジェクトであるため、誰でもすべての人に使用可能
- 3つの特徴量（lf0 [1]、mgc [60]、ap [5]）には振幅スペクトログラムだけでなく位相情報も含まれているため、そのボコーダーから再合成した音声のクオリティはGriffin-Limよりも優れている。
- *Tacotron*モデルにポストネットは必要ない。トレーニングのパフォーマンスは、ステップごとに0.7秒に減らすことができる。アクセント推論は、CPUでのみ機能する場合でも、十分に高速。

以下*Tacotron* + *World* でTTS する案をまとめる。



##### 手法１： *world*の入力に合わせるように、*tacotron*を再学習する。

現在、Pitchからメルを生成しているが、f0やスペクトル包絡などを出力するように再学習する。


##### 手法2： Pitchを使わない*tacotron* + *world*のTTS

[**Tacoton-2 plus World vocoder**]    https://github.com/begeekmyfriend/tacotron/tree/mandarin-world-vocoder 

*woveglow*を*WORLD*に置き換えて同じことをしてました。
学習済みモデルで実行速度を測りたかったが、モデルを取得できなかったです。

日本語での学習の仕方は以下を参考。

[**Training Data**]    https://github.com/begeekmyfriend/tacotron/blob/mandarin-world-vocoder/TRAINING_DATA.md 


##### 手法3： メルスペクトログラムから*world*で音声合成。

かなり調べたけど、*World*はメルだけの入力で直接合成することはできなそうでした。


##### 手法4： メルスペクトログラムから*world*の入力になる特徴量を抽出

メルスペクトログラムからf0やスペクトル包絡などを取得できないか調べました。

スペクトル包絡は抽出できそうだったが、f0値などを抽出する方法はわからなかったです。 

[**LibROSA で MFCC（メル周波数ケプストラム係数）を算出して楽器の音色を分析**]    https://www.wizard-notes.com/entry/music-analysis/insts-timbre-with-mfcc 

[**畳込みニューラルネットワークを用いた音響特徴量変換とスペクトログラム高精細化による声質変換**]    https://dmv.nico/assets/img/casestudy/2stack_voice_conversion/paper.pdf 

*worldVoceder*の実効速度が速いのって入力データの情報量が*Waveglow*と比べて多いからじゃ、、

#### 他のvocoderの実行速度

-  **WaveRNN**

  試してみたが、合成速度は*waveglow*に劣る。

-  **WaveNet**

  かなり遅い

- **LPCNet, Parallel WaveGAN**

  CPUでもかなりRTFを小さくできる可能性がある。(まだ調査できていない。)

  [**リアルタイムニューラルボコーダにおける学習データ量の影響の調査** ]    http://www.me.cs.scitec.kobe-u.ac.jp/~takigu/pdf/2020/0104_1-2-3.pdf 

なんかただの*World*ボコーダーの紹介になっちゃいました。
【Svelte + Typescript + SPA】Svelteでルーティングを試す

# Svelteをセットアップする

Svelteにはセットアップ用のCLIはありません。
GitHubからテンプレートを直接ダウンロードします。

下記コマンドを使用すると、.gitフォルダ以外をレポジトリからダウンロードしてきてくれます。

```
npx degit sveltejs/template my-svelte-routing
```

もし、degitパッケージをインストールしていない場合は「インストールするか？」と尋ねられるので、yesと入力してインストールしておきましょう。

**Typescriptを使用したい場合は、ダウンロードしてきたテンプレート内にある`scripts/setupTypeScript.js`を実行しておいてください。**

```
cd my-svelte-routing
node scripts/setupTypeScript.js
```

ここまで準備ができたら、依存パッケージをインストールしましょう。

```
npm install
```

# svelte-routingをセットアップする

[svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router) のサンプルを多く見ますが、GitHubのスター数では [svelte-routing](https://github.com/EmilTholin/svelte-routing) の方が圧倒的に多いためこちらを採用しました。
ほかにも、svelte-spa-router はハッシュベース、svelte-routing は History API という違いもあります。

では、早速インストールします。

```
npm install svelte-routing
```

**※ svelte-routingパッケージには、ビルトインでtypescriptの型定義ファイルが含まれています。**

# SvelteでSPAしてみる

`src/App.svelte`の内容を上書きしましょう。
svelte-routing は react-router のように宣言型のルーティングライブラリとなっています。

Routerコンポーネント内にRouteを書いていく形ですね。
LinkコンポーネントはSPA用の`<a href="">`のようなものです。

```javascript:src/App.svelte
<script>
  import { Router, Link, Route } from "svelte-routing";
  import Home from "./pages/Home.svelte";
  import About from "./pages/About.svelte";
</script>

<Router>
  <nav>
    <Link to="">home</Link>
    <Link to="about">about</Link>
  </nav>
  <main>
    <Route path="" component={Home} />

    <!-- 子要素としてコンポーネントを渡す方法もある -->
    <Route path="about">
      <About />
    </Route>
  </main>
</Router>
```

ルーティングの設定を書いたので、次はHomeコンポーネントとAboutコンポーネントを作成しましょう。
`src/pages`フォルダを作成して、その配下に作成していきます。

```html:src/pages/Home.svelte
<h1>Home page.</h1>
```

```html:src/pages/About.svelte
<h1>About page.</h1>
```

ここまでで、準備は完了です。
早速実行してみましょう。

下記コマンドで開発用サーバーを立ち上げて実行します。

```
npm run dev
```

http://localhost:5000/ にアクセスして下の画像のように表示されればOKです。
homeとaboutのリンクを押して、ルーティングが出来ていることを確認してみてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222887/e254f4a6-b6d0-db9b-6597-9f62ed1e5a93.png)

# 最後に

react-routerのように書ける[svelte-routing](https://github.com/EmilTholin/svelte-routing)を紹介しました。
今回紹介したライブラリ以外にも、[Sapper](https://sapper.svelte.dev/)というSvelte公式が出しているライブラリもあります。
こちらは、Next.jsやNuxt.jsに近いものになります。
【HTML】HTMLでGoogleMap地図を埋め込み表示する

# GoogleMap地図を埋め込み、ブラウザで表示する。
## 手順

1.表示させたい場所をGoogleMapで検索します。（例：東京タワー）
![googlemap01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594740/01748567-04ac-233d-8c5c-27e1319e0aab.png)

2.`共有`をクリックします。
![googlemap02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594740/6c34ad1a-6fc3-bd93-7a47-c80d8680781a.png)

3.画面中央に共有が出てくる為、`地図を埋め込む`をクリックします。
![googlemap04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594740/762220e9-83e4-25ed-ae32-8e38c40946ee.png)

4.`HTMLをコピー`をクリックし、コードをコピーします。
![googlemap03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594740/2d88f7c3-06a1-d575-ec13-bdbf4998a2d3.png)

5.コピーしたコードをHTMLファイルに貼り付けます。
※デフォルトでMapの大きさは以下のようになっています。

- 小：width="400" height="300"
- 中：width="600" height="450"
- 大：width="800" height="600"

![googlemap05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594740/349329a9-2838-0fb2-ed61-888d72e890a0.png)

6.ブラウザで確認するとGoogleMap地図が表示されます。
![スクリーンショット 2021-06-20 3.41.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594740/a4d31d64-b61a-e4ca-5301-ef25fc242fdc.png)

# まとめ
指定場所のGoogleMap地図を埋め込み表示することができました。
[2021年]Swiper V6で思い通りに動かなかった場合

SwiperのV6系を導入したあと、動くには動くが左右のボタンがnext,prevのボタンが動かなかったりページャーが出なかったり、
エフェクトが思い通りになってなかったりと思いの外ハマったので記事にする。

# 公式ドキュメント

## インストール
```bash
 $ npm install swiper
```

## 利用

### NGなパターン
```javascript
  // import Swiper JS
  import Swiper from 'swiper';
  // import Swiper styles
  import 'swiper/swiper-bundle.css';

  const swiper = new Swiper(...);
```

上記がうまく行かない原因だった。
下の方にあるようにbundleを含むimportをするとうまく動いた。

### OKなパターン
```javascript
  // import Swiper bundle with all modules installed
  import Swiper from 'swiper/bundle';

  // import Swiper styles
  import 'swiper/swiper-bundle.css';
  // init Swiper:
  const swiper = new Swiper(...);
```

という結末
【Laravel】個人的によく使うEloquentのWhere句まとめ

Laravelは自由かつ何でも実現できるフレームワークなので
（使いこなせているかは別として…）重宝しています。
今回は、個人的によく使う`Eloquent`の`Where`句を書き出してみました。

## 基本

```php
$adminUsers = User::where('role', '=', 'admin')->get();
```

## AND検索・OR検索
`where`を付け足せばAND検索になります。
OR検索をするには`orWhere`を使います。

```php:AND検索
$users = User::where('role', '=', 'admin')
             ->Where('id', '>', 10);
             ->get();
```

```php:OR検索
$adminers = User::where('role', '=', 'admin')
                ->orWhere('role', '=', 'maintainer');
                ->get();
```

## IN句で検索
IN句で検索します。
たとえば、`Id`が`0`か`999`のユーザを取得します。

```php:IN句
$specialUsers = User::whereIn('in', [0,999])->get();
```

## NULLのレコードを検索
`NULL`の値になっているレコードを取得します。
`whereNull`を使います。

```php:NULL
$invalidUsers = User::whereNull('nickname')->get();
```

## NULLでないレコードを検索
`NULL`でないレコードを取得します。
`whereNotNull`を使います。便利ですね。

```php:NOTNULL
$validUsers = User::whereNotNull('nickname')->get();
```

## ソート
`orderBy`を使います。
降順は`'desc'`、昇順は`'asc'`を指定します。
また`orderBy`ではなく、`latest`、`oldest`を使っても良いです。

```php:ソート
$users = User::orderBy('id','desc')->get();
$users = User::orderBy('id','asc')->get();
```
```php:
$users = User::latest('id')->get();
$users = User::oldest('id')->get();
```

## 動的にWhereを追加する
条件によってクエリを変更したいとき。

```php:
$userQuery = User::query();
$userQuery = $userQuery->where('role', '=', 'member');

if ($condition1) {
    $userQuery = $userQuery->where('condition', '=', '1');
}
if ($condition2) {
    $userQuery = $userQuery->where('condition', '=', '2');
}

$users = $userQuery->get();
```
他にも思い出したら追記していこうと思います。
「他にもこれよく使う！」
というWhere句がありましたら是非コメント頂ければと思います！
Angularでcsv-parseを使う方法

## 検証環境

- Angular(12.0.5)
- csv-parse(4.14.3)

## 原因

1. `csv-parse`は`stream`というパッケージが必要なのですが、これはnode環境でのみビルドインで利用できるもので、ブラウザ環境で使うには少し工夫をする必要がある

2. グローバル変数`global`, `Buffer`, `process`を定義する必要がある

というのが原因でした

なのでこれらに対処していきます


## 対応

### 必要なパッケージのインストール

```sh
$ npm i process util stream-browserify
```
> Angular12以外のバージョンなら依存関係の中で上記のパッケージがインストールされていることがあるのでpackage-lock.jsonを確認してインストールされていれば、再度インストールする必要はない

### １への対応

```tsconfig.json
{
  "compilerOptions": {
    ...
    "paths": {
      "stream": ["node_modules/stream-browserify"]
    }
  },
}
```

### ２への対応

```pollyfills.ts
 (window as any).global = window;

 (window as any).Buffer = (window as any).Buffer || require('buffer').Buffer;

 global.process = require('process');
```

## 参考

https://newbedev.com/xml2js-in-angular-6-can-t-resolve-stream-and-timers

https://stackoverflow.com/questions/54349858/angular-7-uncaught-referenceerror-global-is-not-defined-when-adding-package
sshd(OpenSSH)の振る舞い方

sshで接続したリモートホストにおいて、ps, pstreeコマンドでプロセスの詳細を見てみると、bashプロセスを起動するまでにsshdプロセスが3つも展開されていることがわかる。

ssh接続前

```bash
pstree -p | grep sshd

 |-sshd(844)
```

ssh接続後

```bash
ps aux | grep sshd

root         844  0.0  0.5  92332  7624 ?        Ss    6月19   0:00 /usr/sbin/sshd -D
root       10077  0.0  0.7 153424 10336 ?        Ss   23:53   0:00 sshd: root [priv]
root       10081  0.0  0.4 153424  5596 ?        S    23:53   0:00 sshd: root@pts/0
root       10105  0.0  0.0  10308  1152 pts/0    R+   23:54   0:00 grep --color=auto sshd
```
```bash
pstree -p | grep sshd

 |-sshd(844)---sshd(10077)---sshd(10081)---bash(10082)-+-grep(10147)

```


ssh接続前と接続後のpstreeを見ての通り、initプロセスの子プロセスであるsshd(844)はssh接続を監視しているプロセスである。(正確にはデーモンではない?)
そしてこのsshd(844)が、sshコネクションごとにsshdプロセスを展開していきそうな気もするが、
pstreeでプロセスの親子関係を見てみると、bashプロセスの前にもう１つsshd(10081)がある。
このプロセスについては、psコマンドにおいて[prev]となっていることから、特権モードで起動しているsshdプロセスであることがわかる。

以上より、セキュリティ的な観点から、認証とセッションなどの管理を特権モードのsshdプロセスと非特権モードのsshdで役割分担していると考えられる。


まとめると、ssh接続においてshellが起動するまでの流れは以下のようになる。

1. initプロセス直下のsshdがssh接続を監視。
2. ssh接続要求ごとに、1のsshdが子プロセスとして新たなsshdを特権モードで起動。
3. 2のsshdが認証を行う。
4. 認証成功後、3のsshdの子プロセスとしてsshdを非特権モードで起動。
5. 4のsshdの子プロセスとしてshellが起動される。
【C#/単体テスト】単体テストを容易にするモックライブラリ(Moq)の簡単な実装例の紹介

# 概要
Moqの簡単な実装例の紹介　+　役に立った参考サイトのまとめ 

# Moqとは
Moqは単体テスト用の代替オブジェクトを簡単に作るライブラリ。
オープンソースで商用利用可能(MITライセンス)。
C#の単体テストで使用するライブラリとして、一般的なもの。

# Moqの使用上の制約

* インターフェースあるいは抽象クラスを継承すること。<br>
　→　設計段階でDependency Injection(DI)の考え方を取り入れる必要がある。<br>
      [参考:DIって何のためにするのかわからない人向けに頑張って説明してみる](https://qiita.com/okazuki/items/a0f2fb0a63ca88340ff6)
* 静的なメソッドは代替できない<br>
　→これはの有償ツールが必要。Microsoft Fakesなど。

# Moqの簡単な実装例

## テスト対象クラスの作成

~~~C#:テスト対象クラス
using System;
namespace MoqTutorial
{
    /// <summary>
    /// 評価対象クラスのインターフェース
    /// 参考
    /// https://github.com/Moq/moq4/wiki/Quickstart
    /// </summary>
    public interface IFooSample
    { 
        bool DoSomething(string value);
    }
    /// <summary>
    /// 評価対象クラス
    /// </summary>
    public class FooSample : IFooSample
    {
        private readonly IFooSample _ifooSampleObject;
        /// <summary>
        /// コンストラクタ・インジェクション
        /// </summary>
        /// <param name="iObject"></param>
        public FooSample(IFooSample iObject)
        {
            _ifooSampleObject = iObject;
        }
        public bool DoSomething(string value)
        {
            var result = _ifooSampleObject.DoSomething(value);
            //結果に応じた処理を記載する
            if (result)
            {
                Console.WriteLine("成功時の処理を書く");
            }
            else
            {
                Console.WriteLine("成功時の処理を書く");
            }
            return result;
        }
    }
}
~~~

## テストコードの作成

~~~C#:テストコード
using Moq;
using MoqTutorial;
using NUnit.Framework;
namespace TestProject1
{
    [TestFixture]
    public class IFooSampleTest
    {
        [Test]
        public void TestSample_Methoods()
        {
            //Mockを作成(インターフェースを指定)
            var mock = new Mock<IFooSample>();
            //関数名と戻り値を指定
            mock.Setup(foo => foo.DoSomething("ping")).Returns(true);
            //評価対象クラスにMockを渡す
            var fooObject = new FooSample(mock.Object);
            //評価対象クラスで関数コール
            Assert.IsTrue(fooObject.DoSomething("ping"));
        }
    }
}
~~~

単体テストコード作成に関しては、[Git:Moq Quickstart](https://github.com/Moq/moq4/wiki/Quickstart)を参考に実装すると良いと思います。


# 役に立った参考サイトのまとめ
## Moqの解説が参考になったもの

| No | リンク | 説明 |
|:-|:-|:-|
|1   |[Moq : Mocking Framework for .NET](https://qiita.com/usamik26/items/42959d8b95397d3a8ffb)|Moqの説明と実装例がセットで載っている。<br>Qiitaの記事の中だと、個人的に最も分かりやすかった。 |
|2   |[Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider](https://www.slideshare.net/uesaka/build-insider-moqfakes)   |SlideShareにMoqの概要・メリットが纏められている。資料が2013年のため、少し古い。   |

## Moqを用いた単体テストコードの作成に役立つもの

| No | リンク | 説明 |
|:-|:-|:-|
|1|[Git:Moq Quickstart](https://github.com/Moq/moq4/wiki/Quickstart)|Git上にあるMoqのクイックスタートページ。Moqの使い方を詳しく解説したサイトは調べた限りだと、これだけ。<br>実装例とMoqの使い方が用途毎に記載されている。|
|2|[FAQ](https://github.com/moq/moq4/wiki/FAQ)|FAQページ。|
DatabricksのマネージドMLflowにPyCaretのトラッキングを実施する方法

## 概要
DatabricksのマネージドMLflowにPyCaretのトラッキングを実施する方法を紹介します。
本手順は、Databricks Runtime Versionを、8.3 ML (includes Apache Spark 3.1.1, Scala 2.12)で実施しております。

Pycaretのドキュメントにて、下記のように実施方法が記載されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/50de5d71-d967-4d56-650a-5e4f8f519192.png)
引用元：[MLFlow - PyCaret](https://pycaret.org/mlflow/)

また、DatabricksにてPyCaretを利用する場合には、下記の記事で紹介した通り、"setup"の引数に", silent = True, html = False"の追記が必要です。

[DatabricksにてPyCaretにおけるsetupの実行が終了しない事象への対応方法 - Qiita](https://qiita.com/manabian/items/ec6559bc0a3cad2f987b)

以上の情報を組み合わせた手順を紹介します。

## 利用手順
### 1. MLflow Experimentを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/9da917f0-1e7f-6343-6efb-9206038945ac.png)

## 2. 作成した"MLflow Experiment"のパスをコピー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/fac26f8a-fdc4-6c71-86c7-3f1f1da1c34d.png)

## 3. PyCaretのインストール

```python
%pip install pycaret
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/e761c4b0-5acd-52b7-5eb2-992faf341807.png)

### 4. Optunaのインストール

```python
%pip install optuna
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/3dcf5a2e-f6ed-3b4d-995f-8e61549e8851.png)

### 5. "experiment_name"に2の手順で取得した値を追記したコードを、PyCaretのsetupを実行

```python
# loading dataset
from pycaret.datasets import get_data
data = get_data('diabetes')

# init setup
from pycaret.classification import *
clf1 = setup(data,
             target = 'Class variable',
             log_experiment = True,
             experiment_name = '/qiita/pycaret_databricks/mlexp_pycaret',

             # Databricksで実行する際に必要となる引数
             silent = True,
             html = False,
             
             # MLFlowへのログする情報の追加
             # 詳細は下記記事参照
             # https://pycaret.org/mlflow/
             log_plots = True,
             log_profile = True,
             log_data = True
            )
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/0d773d01-d5b5-3e7b-51c9-9051044300e4.png)

### 6. MLflow Experimentにて、RUNが記録されていることを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/e5488003-30a4-9563-f3a2-1aaf2a0170e5.png)

### 7. モデルを作成するコードを実行
```python
# train individual model
dt = create_model('dt')
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/3083baae-b9a3-5460-fe26-f3052f427e18.png)

### 8.  MLflow Experimentにて、RUNが記録されていることを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/0b2eef9e-e391-6a36-6b87-01a9edf11cdb.png)

### 9. ハイパーパラメータチューニングのコードを実行

```python
# tune hyperparameters of model
tuned_dt = tune_model(dt, search_library = 'optuna')
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/2bc7dbaf-d10b-f52f-584c-13b9517e26d0.png)

### 10. MLflow Experimentにて、RUNが記録されていることを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/86540954-01c1-c888-3c78-8ca18bc458b3.png)
【Vue.js】ヘッダーをVue.jsで実装する

# 概要
Vue.jsでヘッダーを共通化して利用できるようにする。
`v-for`を使用して配列に入れた要素を呼び出す。

# HTML
```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="./css/style.css" />
    <title></title>
  </head>
  <body>
    <div id="header">
      <ul class="header-menu">
        <li v-for="(item, i) in menus" :key="i" class="menu-item">
          <a :href="item.path">{{item.label}}</a>
        </li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./script/script.js"></script>
  </body>
</html>
```

# Vue.JS
```script.js
// header
new Vue({
  el: "#header",
  data() {
    return {
      menus: [
        {
          label: "TOP",
          path: "./index.html",
        },
        {
          label: "AAA",
          path: "./aaa.html",
        },
        {
          label: "BBB",
          path: "./bbb.html",
        },
        {
          label: "CCC",
          path: "./ccc.html",
        },
        {
          label: "DDD",
          path: "./ddd.html",
        },
        {
          label: "EEE",
          path: "./eee.html",
        },
        {
          label: "FFF",
          path: "./fff.html",
        },
      ],
    };
  },
});

```

# CSS

```style.css
.header-menu {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 12px;
  margin: 0;
  background: #e8e8e8;
}
```

# 完成図
![header.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594740/a9d7c6d0-1fdd-2dbd-5967-524cce922343.png)

# 感想
共通化できるようになり手間が減った。
[Rails]Rinkuを使って、URLを自動的にリンクにする

## はじめに
本記事はURLを自動的にaタグに変換できるRinkuについて解説したものです。
これを使えば記事系や投稿系のアプリケーションの投稿データなどのURLをリンクにすることが可能です。
記事の最後には改行を出力するsimple_formatと組み合わせた記述の仕方も解説しています。

ドキュメント(github) →　https://github.com/vmg/rinku

## インストール
以下を入力して`bundle install`します

```:Gemfile
gem 'rinku'
```

## 使い方
Rinkuは以下のような形式で書きます

```
<%= raw Rinku.auto_link(h(変数)) %>
```

```
<%= raw Rinku.auto_link(h("http://www.foo.com"))%>
```
上記のようにすると以下のように出力されます。

```
<a href="http://www.foo.com">http://www.foo.com</a>
```

またこのURLを外部リンクにしたい場合は以下のようにします。

```
<%= Rinku.auto_link("http://www.foo.com" ,:all, 'target="_blank"')%>
```

`'target="_blank"'`のように文字列として指定することで外部リンクとして実装できます。

## (応用) simple_formatと組み合わせる

`simple_format`と組み合わせることで引数に指定したオブジェクトの改行を出力することができます。

```
<%= row Rinku.auto_link(simple_format(h(変数)) ,:all, 'target="_blank"')%>
```
MATLAB on Macでも環境変数を使いたい！

# はじめに

皆さん、MATLAB環境変数使ってますか？
……え、使ってる？なるほど

　　　　　　　,,;' '" '' ゛''" ゛' ';;,,
　　　　　　（rヽ,;''"""''゛゛゛'';, ﾉｒ）
　　　　　　,;'゛ i ＿　　、＿ iヽ゛';,　　　　お前それMacでも同じ事言えんの？
　　　　　 ,;'" ''| ヽ・〉　〈・ノ |ﾞ゛ ';,
　　　　　 ,;''　　"|　　 ▼　　 |ﾞ゛　`';,
　　　　　 ,;''　　　ヽ＿人＿ /　　,;'_
　　　　 ／ｼ、　 ヽ⌒⌒ /　　 ﾘ　＼
　　　　|　　　"ｒ,,　｀"'''ﾞ´　　,,ﾐ゛　　 |
　　　　|　　 　　 ﾘ、　　　　,ﾘ　　　　|
　　　　|　　　i 　　゛ｒ、ﾉ,,ｒ"　i　　　|
　　　　|　　　｀ー――----┴ ⌒´ ）
　　　　（ヽ　　　　 ＿＿＿＿＿＿ ,, ＿´）
　　　 　（_⌒ ＿＿＿＿＿＿ 　　　　,, ィ
　　　　　　丁　　　　　　　　　　 |
　　　　　　 |　　　　　　　　　　　| 

Macでは使えないんですよね。
悲しい。
いつ使うねんって？
やめて、この記事の趣旨が崩れる。

# 環境

- MATLAB R2021a
- macOS 11.4

# 原因

なぜか。
[MATLABのgetenvのページ](https://jp.mathworks.com/help/matlab/ref/getenv.html)に書いている。

>UNIX® プラットフォームでは、MATLAB® を起動するために使用するシェルによってオペレーティング システム環境が決まります。たとえば、Mac プラットフォームで Applications フォルダーから MATLAB を起動すると、ターミナルから MATLAB を起動するときとは異なるシェル環境が作成されます。

どうやら単に起動したMATLABは既定のシェルを参照してくれないらしい。
悲しい。

# 解決策

どうすればいいかも上のページに書いてある。

>ターミナルから MATLAB を起動するときとは異なるシェル環境が作成されます。

要はLaunchpadからMATLABを起動するのではなく、ターミナルから起動すればいい。
次のようなエイリアスを作成しておくと便利だろう。

```:.zshrc
alias matlab='cd [MATLAB起動時にいてほしいパス]; /Applications/MATLAB_R2021a.app/bin/matlab; cd ~'
```

最後の`cd ~`はなくてもいいが、これがあるとMATLAB終了時にターミナルの現在のパスがここに戻る。

あとはMATLABを起動するときは、ターミナルを開いて`matlab`と実行してやればOK。

# おわりに

これで起動したMATLABはいつものシェルを参照してくれて環境変数を使えるようになった。

 　　　　　　　　　　　　　　　, -――- 、
　　　　　　　　　　　　　　/　　　　　　 ヽ
　　　　　　　　　　　　　　| ノ　 ー　　　 |　　　それっておかしくねぇ？
　　　　　　　　　　　　　　|(・）　（・）　|　　　Macでやる方法お前が知らないだけじゃん
　　　　　　　　　　　　　　|　 （　　　　　 |
　　　　　　　　　　　　　　ヽ　Ｏ　　　　人
　　　　　　　　　　　　　　　＞ー-― ´　 ￣￣＼
　　⊂ニニ￣￣￣ヽ　　/　 　　　　　　　　 　　 |
　　　　　くメ）＿ノ　 |　 |　　|　　　　　　　|　　 |
　　　　　　 (／　 　|　 |　/　　|　　　　　　　|　　 |
　　　　　　　　　　|　 |/　　/|　　　　　　　　|　　 |
　　　　　　　　　　|　　ﾄ　 / |　　　　　　　　|　　 |
　　　　　　　　　　ヽ＿_／　|　　　　　　　　|　　 |
Railsで悲観的ロック、楽観的ロック

まず各排他制御の方式について簡単に整理。

### 悲観的ロックとは
更新対象のデータを取得する際にロックをかけることで、他のトランザクションからは更新されないようにする方式。
更新が終ってから他の更新を開始することで整合性を担保する。

・更新のロックはRDBMSの"SELECT 〜 FOR UPDATE"を利用して実現される。

### 楽観的ロックとは
更新対象のデータがデータ取得時と同じ状態であることを確認してから更新する方式。
同じ状態でなければ、エラーを発生させデータの整合性を担保する。

・データがデータ取得時と同じ状態であることの確認は、テーブルにバージョン管理のためのカラムを追加することで実現する。

排他制御に関しては、以下の記事が超分かりやすかったです。
https://qiita.com/NagaokaKenichi/items/73040df85b7bd4e9ecfc


# Railsでの実現方法

# 楽観的ロック
・lock_versionというカラムを追加するだけでok。(defaultは0にする必要がある)

 このカラムを追加すると、更新対象のデータがデータ取得時と同じ状態かどうかを
 lock_versionの値によって判断し、同じ状態でなかった時にrailsが例外を発生させてくれる。

# 悲観的ロック
・データ取得時にlockメソッドをつける。
 こうすることで、SELECT 〜 FOR UPDATEが発行され他のトランズアクションからのupdate
 をロックしてくれる。

 ex) books.nameを更新する処理の場合。

```ruby
   Book.transaction do
      book = Book.lock.find(n)
      book.update!(name: '化学の新研究')
   end
```
初学者がM1 Mac でRuby,Railsの環境構築をした時に起きたエラー

Qiita初投稿を環境構築でつまずいた話にさせていただきます。


スペック
-
macOS Big Sur バージョン11.3.1
MacBook Air (M1, 2020)
を2021年5月に購入しました。それまではWindowsをずっと使っていました。

環境構築の手順
-
まずRubyとRailsの環境構築をするために、次の動画を参考にしました。
https://youtu.be/z3pjRoHuhEc
なぜこの動画かというと、「m1 mac ruby rails 環境構築」で一番上に出てきたからです。

01:08 M1Macの環境はIntelMac環境と大きく違うことに注意しよう
04:10 Rosetta上なのかARMアーキテクチャ上なのか意識しよう
07:22 実践編スタート
07:37 ①前提
09:37 Rubyの文法だけ試したい人におすすめな環境
11:53 いまRosseta上かARMアーキテクチャ上か確認コマンド
13:39 ②rbenvでRubyをインストールスタート
13:54 CommandLineToolsをインストール
15:30 Homebrewとは？パッケージマネージャーとは？
17:13 Homebrewをインストールしよう
18:11 brewコマンドが使えるか確認しよう
19:30 Homebrewのバージョンに気をつけよう
21:15 rbenvをインストール
24:03 パスを通して初期化しよう(.zshrc編集)
29:37 rbenvコマンド使えるか確認しよう
31:51 Rubyをインストール
38:45 ③RailsでHelloWorldまでスタート
39:02 railsをインストール
42:07 yarnをインストール
44:24 railsでプロジェクト作成
49:17 HelloWorld実行

エラー
-----
動画と全く同じように構築していき、しっかりそれぞれコマンドも使えるか確認しながら進め、
rails new hello_app でプロジェクト作成をし、
それでvscodeのターミナルを開いてみると…
「/Users/xxxxxxx/.zshrc:23: command not found: rbenv 」
が表示されてしまう。
調べてみても、海外の記事ばかりで、解決策をすべて試してみても全く変わらず…
よくパス(PATH)という言葉が出てきたので、「PATHとは」で検索してみたり…

そこで動画をじっくり見てると、homebrewのパスが通っていない可能性を見つけ
「export PATH="/opt/homebrew/bin:$PATH"」　　
を.zshrcに追加（投稿者の方はここの説明はしていなかった）が状況は変わらず…

もう一度エラー文をみてみると「.zshrc:23」が目に入り、ここで.zshrcファイルの23行目が
おかしいからエラーが起きているということに気がつく。
そこに書いてあったのが「eval "＄(rbenv init -)"」

動画で追加をしようといわれ、わけもわからず追加した次の文
export PATH="＄HOME/rbenv/bin:＄PATH"
eval "＄(rbenv init -)"
何度もみて、同じことをしているから間違ってはいないはず。


Qiitaで質問
-
ここで遂にQiitaを使って質問することにした。その記事のURLを下に掲載。
https://qiita.com/falconao/questions/3102843ca983c1ef3265#answer-c8feb9b6f7a39219592f

そこで一度rbenvをアンインストールし、大元の記事を見ながら再インストールすることを勧められた。
もう一度やり直してみると、
「/Users/xxxxxxx/.zshrc:23: command not found: rbenv 」
「/Users/xxxxxxx/.zshrc:24: command not found: rbenv 」
とエラーが起きた。

そこでもう一度じっくり.zshrcファイルを見ると
export PATH="＄HOME/rbenv/bin:$PATH"
eval "＄(rbenv init -)"
eval "＄(rbenv init -)"

export RBENV_ROOT=＄(brew --prefix rbenv)
export PATH=＄RBENV_ROOT/bin:＄PATH
eval "＄(rbenv init -)"

と２箇所で似ているような記述があった。
前者は動画を見て追加し、後者はおそらく何かの記事をみて独自で付け足したものである。

ここで23、24行目がおかしいと言われていることはわかったため、その２行を消去した。
そしたら「command not found: rbenv」は表示されなくなり、解決した。

感想
-
なんとかRuby,Railsの環境構築することができました。
PATHの理解がまだ不十分であるので勉強しなければならないなと思いました。
Qiitaの記事や質問の投稿の仕方もより良いものにできるよう頑張ります。
AWS 認定 データベース – 専門知識 (AWS Certified Database - Specialty) に合格した

# 1. 初めに

- AWSエンジニアとしての自己研鑽の一環として、資格取得にチャレンジしている。データベースまわりの知識レベルが微妙なので、「AWS Certified Database - Specialty」にチャレンジしつつ基本的な知識習得を行うことにした。
- 資格取得前知識レベル：　ちょっとしたWordpressとかRedmine用に、時々RDSを立てているくらいのレベル。

# 2. 勉強法

## 2.1 先人の体験記
- まずは合格体験記で勉強の仕方の流れを確認するとともに、「自分も取るぞ」、というモチベーションを高めた。

    - [AWS Certified Database – Specialty 合格までのお話](https://dev.classmethod.jp/articles/preparing-for-aws-dbs-exam/)
    - [AWS Certified Database - Specialty 合格しました](https://qiita.com/suzuki-navi/items/59f8a4a94ad9a22dd569)

- RDS、Aurora、DynamoDB あたりのよく使われるサービスをメインに、その他ElastiCache、NeptuneなどDB系一式も勉強しないといけなさそう、ということが分かった。

## 2.2 Exam Readiness: AWS Certified Database - Specialty

- 「[Exam Readiness: AWS Certified Database - Specialty](https://www.aws.training/Details/eLearning?id=47245
)」 は、AWS(公式)が提供する、この認定試験についての出題範囲の説明サイト。ログインすれば誰でも見ることができる。コースの所要時間3.5時間ということで、気軽に始めてみる。

- 2021/5時点では、コンテンツが日本語されていないこともあり真剣に読むのもしんどいので、内容を流し読みした後、サンプル問題を解いて雰囲気を確認した。RDS、Aurora、DynamoDBあたりを頑張らないといけないことを再確認した。

## 2.3 Udemy

- 正攻法として、Udemyの講義系コンテンツを視聴して概要を理解後、練習問題系コンテンツをやって知識の確認、定着を図った。
    - [[NEW] Ultimate AWS Certified Database Specialty 2021](https://www.udemy.com/course/aws-certified-database-specialty-dbs/)
        - 講義系コンテンツは2021/5時点ではUdemyにはこれしかなさそう。
        - RDS, Auroraはもちろん、DocumentDB、Neptuneなどの新しめのサービスや、SCT、DMSなどの移行ツールの説明もあり、試験範囲が一通り網羅されている。
        - 各サービス毎に簡単な確認問題あり。（この確認問題だけだとちょっと試験は厳しい）

    - [Practice Exam | AWS Certified Database Specialty ](https://www.udemy.com/course/practice-exams-aws-certified-database-specialty/)
        - 上の講義コンテンツの練習問題編。練習問題が65問。
        - 各問題の解説（選択肢が正しい理由・間違っている理由）、AWSのドキュメントのどこを参照すればよいかなどの説明あり。
        - ほぼ間違えなくなるまで数回繰り返し実施。
    - [AWS Certified Database Specialty Practice Exams](https://www.udemy.com/course/aws-certified-database-specialty-practice-exams-dbs-c01/) 
        - 念のため別の問題集も実施した。100問収録。こちらも問題ごとにきちんとした解説あり。

## 2.4 実機確認

- 試験に出るとされるAWSサービスについて、普段あまり触っていないものを中心に、改めてチュートリアルレベルの動作検証を行い、どんなことができるかを確認した。
- 実機確認の効果として、作業時にマネコンの画面などを一通り見るので、どんな設定項目があるのか、どういう構成が取れるのかなどの理解を自然に深めることができた。

- 一部の検証結果については忘れないように Qiita 記事化した。 
    - [【初心者】Amazon Aurora Serverless (v1) を使ってみる](https://qiita.com/mksamba/items/2e93bbd7b15ce6daf1dd)
    - [【初心者】Amazon Neptune を使ってみる](https://qiita.com/mksamba/items/c3fffca815da97600287)
    - [【初心者】Amazon DynamoDB LSI/GSI を使ってみる](https://qiita.com/mksamba/items/6a39c95936bc25a6f93a)
    - [【初心者】Amazon ElastiCache for Redis を使ってみる](https://qiita.com/mksamba/items/104698a73cdab1d514e0)
    - [【初心者】AWS Database Migration Service (DMS) を使ってみる](https://qiita.com/mksamba/items/034e2e6999d9237a9429)

# 3. 受験

結果：　合格(780点) ※750点以上合格

- 結構ギリギリになってしまった（後数問間違えていたらダメだった）。「これ何言ってるか全然分からない」というのはあまりなく、割と自信を持って回答したつもりだったが、知識の精度不足があった。

# 4. 所感

- 目標準備期間2か月としていたが、結局2.5か月くらいかかってしまった。学習方法の効率化など引き続き模索したい。
- この試験はあくまでデータベースのインフラ的な内容（バックアップ・リストア、障害対応、冗長化、暗号化など）を中心に問われるものであり、中身のデータの操作(SQL文など)はあまり問われず、その辺がそんなにできなくても資格は取れてしまうため、今一つ「データベースが使えます」と言える気にはなれていないが、基礎ができたと思って引き続き深堀できるようにしていきたい。