OmniAICreator/Qiita-1.07M huggingface dataset:
【Ruby演算子】「&&、&、and」や「|| 、| 、or」 の違い

#はじめに
下記の各式の違いがわからず、調べた際に時間がかかったため、調べたことをまとめておきます。
「普段「&&」や「&」を雰囲気で使っているが、実際どう違うの？」という方の参考になれば幸いです。

```
(p false) && (p true)
(p false) and (p true)
(p false) & (p true)
```

###この記事を書いている人
- 実務経験1年未満のエンジニア


###対象読者
- 上記各式の実行結果に確信がない方（一番最後に実行結果書いています）
- 「&&、&、and」や「|| 、| 、or」がどう違うか改めて確認したい方

###環境
- Ruby 2.7.2


#分類早見表
（これを見てわかる方はここまでで大丈夫です。下記の分類についての説明をこれ以降します。）

|記号|分類①|分類②|
|-----|-----|---|
|&&、and|制御構造|論理演算子（これらの違いは演算子の優先順位）|
|‖、or|制御構造|論理演算子（これらの違いは演算子の優先順位）|
|&|メソッド|Integer#&、Array#&、True(False,Nil)Class#&|
|❘|メソッド|Integer#&、Array#&、True(False,Nil)Class#&|

＊演算子の優先順位
参考: [ Ruby リファレンスマニュアル](https://docs.ruby-lang.org/ja/latest/doc/spec=2foperator.html)

＊レシーバー
メソッドの呼び出し元のオブジェクト

#分類①について
###演算子は制御構造とメソッドの2種類に分類される
制御構造

    =  ?:  ..  ...  not  &&  and  ||  or  ::

メソッド

    |  ^  &  <=>  ==  ===  =~  >   >=  <   <=   <<  >>
    +  -  *  /    %   **   ~   +@  -@  []  []=  ` ! != !~

参考: [Rubyリファレンスマニュアル（演算子式）](https://docs.ruby-lang.org/ja/latest/doc/spec=2foperator.html)


＊制御構造
コンピュータプログラムで、命令が実行される流れを定めたもの
参考: [Rubyリファレンスマニュアル（制御構造）](https://docs.ruby-lang.org/ja/latest/doc/spec=2fcontrol.html)



#分類②について
##論理演算子
- 複数の式に対して、式全体の真偽を判定するもの（この判定の仕方が論理演算子毎に異なる）
- 式の評価は短絡評価（式全体の真偽が決定した時点で終わる）であり、最後に評価した式の戻り値が式全体の戻り値となる

参考:　[短絡評価（Wikipedia）](https://ja.wikipedia.org/wiki/%E7%9F%AD%E7%B5%A1%E8%A9%95%E4%BE%A1)




###&&（論理積）
式の全てが、真の場合に真

###||（論理和）
式の少なくとも1つが、真の場合に真


参考: [論理演算子](https://www.javadrive.jp/ruby/if/index4.html)

## Integer#&、Array#&、True(False,Nil)Class#&
`「&」や「|」はメソッドのため、レシーバー（呼び出し元のオブジェクト）によって挙動が変わる点に注意`
（＊ 「Integer#&」、「Array#&」はここでは直接関係ない内容のため説明を省略します。）

### True(False,Nil)Class#&
「true、false、nil」に対して呼び出す場合は、True（False,Nil）Classクラスのインスタンスメソッド
ポイントしては、両辺（厳密にはレシーバーと引数の両方）の式が評価される
（各メソッドの挙動については下記参照）

```
#「TrueClass#&」は引数が偽であれば、falseを返す
(p true) & (p "hoge")
true
"hoge"
=> true

(p true) & (p false)
true
false
=> false
```


```
#「FalseClass#&、NilClass#&」は引数に関わらず、falseを返す
(p false) & (p true)
false
true
=> false

(p false) & (p false)
false
false
=> false
```
参考: [Rubyリファレンスマニュアル（True#&）](https://docs.ruby-lang.org/ja/latest/method/TrueClass/i/=26.html)
参考: [Rubyリファレンスマニュアル（False#&）](https://docs.ruby-lang.org/ja/latest/method/FalseClass/i/=26.html)
参考: [Rubyリファレンスマニュアル（Nil#&）](https://docs.ruby-lang.org/ja/latest/method/NilClass/i/=26.html)

#まとめ
上記を踏まえ、両辺（の式の戻り値）の真・偽によって実際の評価の流れがどうなるか

|式|実行結果|
|-----|-----|
|左辺 && 右辺|左辺が偽ならそこで評価終了　（「and」も同様）|
|左辺 & 右辺|左辺が偽でも右辺を評価|
|左辺 ‖ 右辺|左辺が真ならそこで評価終了　（「or」も同様）|
|左辺 ❘ 右辺|左辺が真でも右辺を評価|



#備考：実行結果（irb）
```
(p false) && (p true)  
false
=> false
(p false) and (p true) 
false
=> false
(p false) & (p true)   
false
true
=> false
```
Delphi IDE初期設定

##はじめに
　[本シリーズの目次はこちら](https://qiita.com/miyamura-figeo/items/57246bc5d32bd91af5ed)


##前提条件

Delphiのインストールが完了していること
　●[Delphiインストールとプロジェクト作成](https://qiita.com/hagi83484/items/23711648259f1dd3caf3)

###テーマ（画面の色）を変える

　　右上の検索画面に「テーマ」と入力　＞「ユーザーインターフェース」＞「テーママネージャ」を押す
　　ライト画面かダーク画面かお好みの色を選択　＞　「保存」を押す
　　　　　↓こちらはダークを選択した場合の画面↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185012/e7285afe-8f8b-518d-25b9-a5baeacfc757.png)


###実行時にIEDを表示させる方法
※実行時にIEDを表示させるとデバッグ処理がやりやすい


　検索画面に［IDE］と入力　＞　「コンパイル中と実行中ページ」を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185012/3c9683d0-c1c5-bc62-96b7-fbf14e65a1c9.png)




　「実行時にデザイナを非表示」のチェックを外す　＞　「保存」を押す
　　　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185012/353c2d90-ccf9-0344-7c7b-d89927a41a99.png)




###自動保存機能の設定
「自動保存とデスクトップ」＞　赤枠➀～➂を図と同じに変更する　＞「保存」を押す
　　　　➀自動保存はサイズが嵩むので外す（SVNやGITで管理するので）
　　　　➁保存忘れ防止のため、実行時は保存した状態にしておく
　　　　➂スタートアップは不要なので外す（デフォルトレイアウトに変える）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185012/1c5a9bcd-3031-08e5-a796-9827604d0002.png)



###バックアップ機能の設定

バックアップはサイズが嵩むので外す（SVNやGITで管理するので）
　「エディタ」＞「バックアップファイルの作成」のチェックを外す　＞　「保存」を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185012/efadfb8f-f46f-e335-b812-d6f01db49b53.png)



自動補完系が不要な場合。必要な時は「Ctrl+Space」で行うことができる
　「支援機能」＞　「コード補完」と「コードテンプレート補完」のチェックを外す　＞　「保存」を押す　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185012/ad8d6c7c-47fa-2215-74a1-9d2b0765d805.png)

以上
ReferenceError: vuex is not defined エラーの対処

npm install veux　をインストールしたのに、

```
ReferenceError: vuex is not defined
```

```
\Users\81801\Desktop\vue.js\Vue_firebase\vue-for-blog\src\store.js
  4:9  error  'vuex' is not defined  no-undef
```

とコンソールに表示されて、沼ったので解決法をメモります。

sotre.js　に問題がありそうなので確認します。

```js:store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(vuex);　

export default new Vuex.Store({
  state: {}
})
```

import Vuex from 'vuex';
では大文字なのに、
引数として扱っているときは、小文字になっていました。
Vue.use(vuex);　

大文字で統一してみると

```js:store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);//大文字にする

export default new Vuex.Store({
  state: {}
})

```

エラーがなくなりました。

ちゃんと文法とかやっていることを理解せずに、コピペするのはよくないですね。
ネットの情報も時々間違えてますね。


以下のサイトのチュートリアルをしていたらエラーになったので、
同じ人はいれば参考に

https://shimablogs.com/vuecli-built-environment
Rails Dateカラムから年単位で値を絞り込み

会計情報機能に、2020や2021など、選択した年の収支合計を出すページを作りたく、いろいろと調べていたところ、画期的なGemを見つけました！
Dateモデルの絞り込みができます。
####[GitHub : by_star](https://github.com/radar/by_star)

1.Gemをインストール

```ruby:gemfile
gem 'by_star', git: "git://github.com/radar/by_star"
```

```bundle install```

2.使い方
　例1：カラム'created_at'が2020年のPostテーブルの値を取得
　```Post.by_year(2020)```

例2：Date型カラム'processed_date'(登録日)が2020年のPostテーブルの値を取得
　```Post.by_year(2020, field: : processed_date)```
　※field: :カラム名でDate型カラムを指定

支払日や受領日をDate型カラムとして登録し、選択した年分のみの一覧・集計ができるようになりました。
丸二日かけて調べてはDB操作をしてましたが、初心者には少し難しかったです…
bundle install 時にmysql2のインストールがエラーになる

bundle install時にだいたいmysql2のインストールがエラーになるのでメモ
※M1 mac book airにて動作


大体こんなエラーが出る

```log
Make sure that `gem install mysql2 -v '0.5.3' --source 'https://rubygems.org/'` succeeds before bundling.
```


open sslの設定が必要なので、以下の順番に調べて設定

```
$ brew info openssl
openssl@1.1: stable 1.1.1k (bottled) [keg-only]
Cryptography and SSL/TLS Toolkit
https://openssl.org/
/opt/homebrew/Cellar/openssl@1.1/1.1.1k (8,071 files, 18MB)
  Poured from bottle on 2021-05-12 at 21:01:47
From: https://github.com/Homebrew/homebrew-core/blob/HEAD/Formula/openssl@1.1.rb
License: OpenSSL
==> Caveats
A CA file has been bootstrapped using certificates from the system
keychain. To add additional certificates, place .pem files in
  /opt/homebrew/etc/openssl@1.1/certs

and run
  /opt/homebrew/opt/openssl@1.1/bin/c_rehash

openssl@1.1 is keg-only, which means it was not symlinked into /opt/homebrew,
because macOS provides LibreSSL.

If you need to have openssl@1.1 first in your PATH, run:
  echo 'export PATH="/opt/homebrew/opt/openssl@1.1/bin:$PATH"' >> ~/.zshrc

For compilers to find openssl@1.1 you may need to set:
  export LDFLAGS="-L/opt/homebrew/opt/openssl@1.1/lib"        ← ここが重要
  export CPPFLAGS="-I/opt/homebrew/opt/openssl@1.1/include".  ← ここが重要

For pkg-config to find openssl@1.1 you may need to set:
  export PKG_CONFIG_PATH="/opt/homebrew/opt/openssl@1.1/lib/pkgconfig"

==> Analytics
install: 803,075 (30 days), 2,624,782 (90 days), 8,822,713 (365 days)
install-on-request: 62,439 (30 days), 260,077 (90 days), 1,146,614 (365 days)
build-error: 0 (30 days)
```

上の調べた結果を設定して解決

```sh
$ bundle config --local build.mysql2 "--with-cppflags=-I/opt/homebrew/opt/openssl@1.1/include"
$ bundle config --local build.mysql2 "--with-ldflags=-L/opt/homebrew/opt/openssl@1.1/lib"
```
引数の種類

引数には種類があって、区別できていなかったので基本的なことを整理する。

#引数
定義における値の受け渡しの基本

```ruby
def メソッド名(仮引数） # メソッドの定義
 式...
end

メソッド名(実引数)       # メソッドの呼び出し
```
##仮引数
 メソッド定義において、メソッド呼び出しで与えられた実引数を受け取る変数。
 スコープはローカル変数と同じで再代入できる。
 仮引数に代入を行っても呼び出し側には影響を与えない。

 仮引数にデフォルト式が与えられた場合は、実引数の省略時にデフォルト値となる。

```ruby
def foo(par = 'hoge')  #デフォルト式(=)、値（'hoge'）
 puts par
end

foo        #実引数を省略した時
#=> "hoge"　
foo(bar)   #実引数を明示した時
#=> "bar"
```

##実引数
メソッド呼び出しにおいてメソッドに与えられる値。
実引数には式を与える
全ての式が評価されてからメソッドが呼び出される。

#キーワード引数
キーワードによって特定される引数。
ハッシュ形式で引数を設定できる。
呼び出しは、「シンボル：値」の形式で指定する。
デフォルト値が設定されている場合は実引数を省略できる。
定義時にデフォルト値の指定がなければ実引数を省略するとエラーになる。

```ruby
def person(name: 'taro', age: '20' )
 puts "#{name}, #{age}"
end

person
#=> "taro, 20"
person(name: 'hana', age:)
#=> "hana, 20"
person(country: 'japan')
#=> ArgumentError (unknown keyword: country)
```

#可変長引数(rest引数)
*仮引数名で、複数の引数を設定できる。
引数は配列として格納される。

```ruby
def foo(x, *xs)
 puts "#{x}:#{xs.inspect}"  # inspectは、オブジェクトや配列を分かりやすく返すメソッド。
end

foo(1)     #=>1:[]
foo(1,2)   #=>1:[2]
foo(1,2,3) #=>1:[2,3]
```

#オプション引数
**仮引数名で、可変長引数と同じように制限なく引数を設定できる。
キーを引数として渡すことができる。
ハッシュ形式で値を扱う。

```ruby
def foo(**bar)
 puts bar
end

foo
#=> {}
foo(key1: '1', key2: '2')
#=> {:key=>"1", :key2=> "2" }
```


#ブロック引数
&仮引数名でブロックを引数として受け取ることができる。

```ruby
def foo(cnt, &block_arg)
 cnt.times { block_arg.call }
end
#.timesは、繰り返し処理を行うメソッド
#.callは、ブロックを呼び出すメソッド

foo(3) { print "Ruby!" }  # {}ブロックの部分
#=> Ruby!Ruby!Ruby!
```

[Ruby 2.3.0 リファレンスマニュアル > クラス／メソッドの定義](https://docs.ruby-lang.org/ja/2.3.0/doc/spec=2fdef.html#singleton_method)
[プロを目指す人のためのRuby入門/著者：伊藤淳一](https://gihyo.jp/book/2017/978-4-7741-9397-7)
motoを使ったテストで Access Denied

# はじめに
個人の備忘録用です。

# 各種バージョン
* Python : 3.7
* pytest : 6.2.4
* boto3 : 1.17.71
* moto : 2.0.6

# 問題点
motoを使って単体テストを実装した時に、boto3がなぜか実際のAWSに接続していた。

## 実際のコード

* 実際の処理

```python
import boto3


class S3Service:
  def __init__(self):
      self.client = s3.client('s3',
                              aws_access_key_id="aws_key",
                              aws_secret_access_key="aws_secret",
                              region_name="ap-northeast-1")
  def upload(self, key: str, file_path: str):
      with open(file_path, "rb") as file:
          self.client.put_object(Body=file.read(),
                                 Key=key,
                                 Bucket="my-bucket")
```

* テストコード

```python
import pytest
from moto import mock_s3
import boto3

from app.services import S3Service

s3_service = S3Service()

class TestSample:
    @classmethod
    def setup_class(cls):
        cls.mock_s3 = mock_s3()
        cls.mock_s3.start()
        cls.client_s3 = boto3.client('s3', region_name="ap-northeast-1")
        cls.client_s3.create_bucket(Bucket="my-bucket", CreateBucketConfiguration={ 'LocationConstraint': "my-bucket" })

    @classmethod
    def teardown_class(cls):
        cls.mock_s3.stop()

    def test_success(self):
        s3_service.upload("key1", "path_to_test_file")
```

* エラー内容

```bash
botocore.exceptions.ClientError: An error occurred (InvalidAccessKeyId) when calling the PutObject operation: The AWS Access Key Id you provided does not exist in our records.
```

# 解決案
原因は、mock_s3を起動する前にboto3のclientを生成していたから。
なので、テストコードを以下のように修正するだけで解決できる。

```python
import pytest
from moto import mock_s3
import boto3

from app.services import S3Service


class TestSample:
    @classmethod
    def setup_class(cls):
        cls.mock_s3 = mock_s3()
        cls.mock_s3.start()
        cls.client_s3 = boto3.client('s3', region_name="ap-northeast-1")
        cls.client_s3.create_bucket(Bucket="my-bucket", CreateBucketConfiguration={ 'LocationConstraint': "my-bucket" })
        clse.s3_service = S3Service()

    @classmethod
    def teardown_class(cls):
        cls.mock_s3.stop()

    def test_success(self):
        self.s3_service.upload("key1", "path_to_test_file")
```

もしくは、本体のコードが Dependency Injection などの機能を使っていて、
テスト実行時にはどうしてもインスタンスが生成されている場合は、
本体のコードを以下のように変更すると対応可能。


```python
import boto3


class S3Service:
  def upload(self, key: str, file_path: str):
      with open(file_path, "rb") as file:
          self._client().put_object(Body=file.read(),
                                    Key=key,
                                    Bucket="my-bucket")

  def _client(self):
      return s3.client('s3',
                       aws_access_key_id="aws_key",
                       aws_secret_access_key="aws_secret",
                       region_name="ap-northeast-1")
    
```

# おわりに
何かありましたらコメント頂けると幸いです。
Windows+VSCodeにおける環境変数の追加と注意点

## はじめに
プログラムを作ったときに環境変数にパスを分離したいときがあります．特にデータが絡んでくるとデータのみのフォルダを構成してそこに環境変数を合わすと管理が楽になる・・・そう思いWindowsで設定していた時にVSCodeでハマってしまったので備忘録として残しておきます．

## 環境変数の設定
基本的にWindowsをお持ちの皆様なら```Windowsの設定->環境変数を編集```からPATHの設定を行うと思います．
私もここから設定をしていることが多いのですが，最近はコマンドラインで設定したいと思い，新規で既存のPATHを壊さない限り```setx, set```を用いています．
ローカル変数でかつプロセスが落ちたらいらない！って方は```set```を使うのが良いかと

```powershell
#global
setx HOGE hoge
#local
set HOGE=hoge
```

## 環境変数の設定時における注意点
```setx``` は基本的にユーザー環境変数をいじりますが，それでも既存のPATHを壊したくないのであれば，下手に既存の変数を書き換えないほうが良いと思われます．
また，VSCodeを使っている皆さん，VSCodeも一度再起動をしましょう！ここが引っ掛かりポイントです．
VSCodeもプロセス上で動いているので内部のターミナルを削除するだけでは更新がされません．そのため，一度VSCodeを落としプロセスを終了させ，プロセス，VSCodeを再起動させることにより環境変数の更新が入ります．

## おわりに
まさか，VSCode内でプロセスを落としたと勘違いして1時間ぐらい時間を取られるとは思いませんでした．親プロセスを落とさないと残りの子プロセスでいくらごにょごにょしていても意味はない感じですね．気を付けます．
[C#]対象文字列内の指定した文字列以降を削除する。


対象文字列から指定した文字列以降を削除する関数が標準ではなかったので、自作しました。

```C#
        /// <summary>
        /// 対象文字列から指定した文字列以降を削除します。
        /// ただし、対象文字列内に指定した文字列が存在しなかった場合、対象文字列をそのまま返却します。
        /// </summary>
        /// <param name="str">対象文字列</param>
        /// <param name="removeStr">指定文字列</param>
        /// <returns>対象文字列から指定文字列を削除した文字列</returns>
        public static string RemoveRight(string str, string removeStr)
        {
            var length = str.IndexOf(removeStr);
            if(length < 0)
            {
                return str;
            }

            return str.Substring(0, length);
        }
```
注意点は、コメント記載の通りです。
まだドメインのリダイレクトをAmazon S3でやっているの？

# はじめに

サブドメインをネイキッドドメインにリダイレクトする方法を探していたら、AWSが出しているある記事を見つけました。

そこには、あるドメインを別のドメインにリダイレクトするときのAWSベストプラクティスが、Amazon S3でリダイレクトするのではなくて、ALBを使ってリダイレクト設定することになっていました。
参考資料: [https://aws.amazon.com/jp/premiumsupport/knowledge-center/elb-redirect-to-another-domain-with-alb/](https://aws.amazon.com/jp/premiumsupport/knowledge-center/elb-redirect-to-another-domain-with-alb/)

今まで私はAmazon S3のWebサイトホスティングでサブドメインのリダイレクトをかけてました(www.XXXX.jp → XXXX.jp へのリダイレクト)。また、S3単体ではHTTPSに対応していないため、CloudFront+S3でリダイレクトをしていた人も多いのではないでしょうか。

ですが、ALBのリダイレクト機能を使えば、CloudFrontがなくてもHTTPSのリダイレクトもできます。

# 前提条件

以下の前提で手順は行います。

- 証明書はACMで発行しており、ワイルドカードを取得している
- ALBはすでに構築済み
- Terraformのバージョンはv0.14以降であること

# 今回のお題

`www.example.com`を `example.com` にリダイレクトさせようと思います。 

# Terraformコード

GUIの手順としては[AWSの資料](https://aws.amazon.com/jp/premiumsupport/knowledge-center/elb-redirect-to-another-domain-with-alb/)に記載の通りなので、
ここでは、手順をTerraformのコードに落とそうと思います。
ちなみにあるALBのリスナーをこのように編集すれば特定のURLをリダイレクトしてくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575547/30c21f6a-fadc-3600-1eb1-ec255a37d698.png)

```
# このコードでは *.example.comとexample.comをACMで証明書取得していることにします
# www.example.comとexample.comは同じALBに向けています。
data "aws_route53_zone" "example_com" {
  name = "example.com"
}

resource "aws_route53_record" "a_example_com" {
  zone_id = data.aws_route53_zone.example_com.zone_id
  name    = "example.com."
  type    = "A"

  alias {
    name                   = aws_lb.example.dns_name
    zone_id                = aws_lb.example.zone_id
    evaluate_target_health = false
  }
}

resource "aws_route53_record" "a_www_example_com" {
  zone_id = data.aws_route53_zone.example_com.zone_id
  name    = "www.example.com."
  type    = "A"

  alias {
    name                   = aws_lb.example.dns_name
    zone_id                = aws_lb.example.zone_id
    evaluate_target_health = false
  }
}

# ALBの設定 
resource "aws_lb" "example" {
  # ...
}

resource "aws_lb_listener" "example" {
  # Other parameters
}

## ALBのリスナールールでリダイレクトを記載
## ここでwww.example.comをexample.comにリダイレクトする
resource "aws_lb_listener_rule" "example" {
  listener_arn = aws_lb_listener.example.arn
  priority     = 1

  condition {
    host_header {
      values = ["www.example.com"]
    }
  }

  action {
    type = "redirect"
    redirect {
      host        = "example.com"
      protocol    = "HTTPS"
      status_code = "HTTP_301"
    }
  }
}
```
PostgreSQL サービスの起動と停止の方法

###はじめに
　　[本シリーズの目次はこちら](https://qiita.com/miyamura-figeo/items/57246bc5d32bd91af5ed)



###DBを最新化（更新）や初期化するなど、必要な時に再起動や停止を行う


①Windowsの検索画面に「サービス」と入力しアプリを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185012/59ee671a-f6de-8f86-f944-53a739718a39.png)

➁「postgresql-x64-13」を選択

※ちなみにDBの状態（実行中なのか停止しているのか）を知りたい時はこの画面で確認します。
　この場合、「postgresql-x64-13」の状態は【実行中】つまり稼働しているというわけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185012/28152c60-17cc-7bfa-e1cb-0260b5f8ba5d.png)




➂右クリックして「再起動」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185012/e69000a0-8fcb-709d-0fb2-28c9cea13ef6.png)

DBを停止させたい時は「停止」をクリック

以上
[AWS認定] AWS デベロッパーアソシエイト（DVA）に受かるまでにやったこと

# AWS-DVAに受かりました！
2021年4月に試験を受けてAWS-DVAに合格したのでその紹介です。

# 事前知識・スキル
- 業務ではこれまでAWSを1年間少し触った程度。lambdaとは？とかS3とは？とか聞かれて何となく分かるような感じでした。
- AWS-SAA取得済み（2020年12月末）。AWSの試験の感じとか、業務でやらないサービスの概要がつかめたり、AWSでのインフラ設計が理論だけならちょっとわかるぞ？というレベルになれました。

# どうやって勉強した？
AWS認定って紙の本とか（SAA以外は）全然なくて本当に勉強しづらい！！過去問もないし。ということで困っている方が多いのではないかということで、この記事を書いています。SAAは書籍もたくさん出ているし、いろんな記事にも書かれているので比較的勉強しやすかったんですが、、、。まぁAWSのサービスは日々進歩してるし紙の書籍出してもすぐレベルアップしちゃうからいろいろ追いつかないんでしょうね。個人的には紙の本買って書き込みながら勉強する派なので、どうしようかと悩みました。。。以下にやったことをまとめようと思います。

## 試験ガイドを読む
SAAの試験後、年が明けてから[公式ページ](https://aws.amazon.com/jp/certification/certified-developer-associate/)の[試験ガイド](https://d1.awsstatic.com/ja_JP/training-and-certification/docs-dev-associate/AWS-Certified-Developer-Associate_Exam-Guide.pdf)を読みました。とりあえず5分くらい読んだだけ。

## [AWS WEB問題集で学習しよう](https://aws.koiwaclub.com/)
AWS DVAでググりまくると、[このサイト](https://aws.koiwaclub.com/)で随分な人が勉強していたので、自分も有料会員登録して問題集を解いてみました。とりあえず問題の感じとか、どんな問題が出るのかをつかめます。一度本とかで体系的にまとまったもので勉強したい派なのでいきなり問題集で学び始めるのがちょっと気持ち悪かったですがまぁしょうがない。。。どんな問題が出るか把握して、わからないところはBlack Beltやらで潰していこう、という気持ちでした。正直ちょっとお高いですが、SOAやプロフェッショナルでも問題集を活用できる（期限90日だけど）と考えるとまぁありなのかな・・・？という気持ちでした。
これを一通り終わらせたあとに模擬試験を受けてみました。

## AWS公式模擬試験
SAA合格時の特典として、模試一回分を無料で受けられたので、ある程度（Web問題集で勉強しようが終わったくらい）勉強を進めて、なんとなく試験受けようかなってときになってから受けました。
結果は、総合スコア：55%でした。これはまずい、と思いUdemyの講座を買いました。

## udemyの問題集（AWS 認定デベロッパー アソシエイト模擬試験問題集（5回分325問））
今回は購入せずに済むかな・・・？と思いましたが結局買いました。
問題演習をひたすらしました。

## [Black Belt](https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/)
SAAのときは正直あんまり見なくてもなんとかなりそうだったので、あまり見ませんでした。今回は詳しい使い方とか問われることが多かったので、結構たくさん見ました。


- Cognito
- X-Ray
- ECS
- API GateWay
- Cloudformation
- Elastic Beanstalk
- KMS
- CodeBuild
- Step Function


# 受験結果

904/1000でした。結構高得点でしたね！

![スクリーンショット 2021-05-01 11.37.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/cf41a5bd-61a2-8541-b167-c984f8fa7e0c.png)

# 感想

1月に[AWS WEB問題集で学習しよう](https://aws.koiwaclub.com/)で有料アカウント登録して、SAA受かった直後だったので1ヶ月くらいで行けるかなーと思いきや、結構のんびりやってしまったので4ヶ月ほどかかってしまいました。

特にお世話になったのが、やはりudemyの問題集です。
合格体験記とかを見てよく見るのが、本試験はudemyよりちょっと簡単というくらい、という感想ですが、まさにそのとおりでした。ちょっとどころか、結構簡単に感じました。udemyで3~4周くらいやればとりあえず受かるかな、と思います。

ただ、udemyの問題だけだと出てきた問題以外は解けないので、やはりサービスの理解としてBlack Beltを見るのはとても良いと思います。
仕事後に1時間、youtubeで各サービスについて見たりしました。
あとStep Functionについては問題集ではあまり触れられていませんが、本試験ではそこそこ出てくるのでBlack Beltは見ておいたほうが良いです。

[トレノケートさんから出てるポケットスタディ](https://www.amazon.co.jp/%E3%83%9D%E3%82%B1%E3%83%83%E3%83%88%E3%82%B9%E3%82%BF%E3%83%87%E3%82%A3-AWS%E8%AA%8D%E5%AE%9A-%E3%83%87%E3%83%99%E3%83%AD%E3%83%83%E3%83%91%E3%83%BC%E3%82%A2%E3%82%BD%E3%82%B7%E3%82%A8%E3%82%A4%E3%83%88-%E3%82%A2%E3%82%BD%E3%82%B7%E3%82%A8%E3%82%A4%E3%83%88%E8%A9%A6%E9%A8%93%E3%83%9D%E3%82%B1%E3%83%83%E3%83%88%E3%82%B9%E3%82%BF%E3%83%87%E3%82%A3-%E5%B1%B1%E4%B8%8B%E5%85%89%E6%B4%8B/dp/4798063401)も良書のようです。僕は買いませんでしたが、試験対策に良さそうですね。


次はSOAか・・・？でも疲れたからしばらく資格の試験はやめようかな・・・笑
HID キーボードから Unicode で日本語を入力する


@ukkz さんが作った「USB木魚」。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">うちのUSB木魚、パソコンに接続するとキーボードとして認識されて、叩くと煩悩みたいな発光しながら般若心経が入力できるようになりました。 <a href="https://t.co/KuI7bshXTZ">pic.twitter.com/KuI7bshXTZ</a></p>&mdash; うこ (@ukokq) <a href="https://twitter.com/ukokq/status/1392305811724984321?ref_src=twsrc%5Etfw">May 12, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


HIDデバイスにして、あらかじめ学習させたうえで漢字の入力をかな漢字変換キーで行うらしい。

ユーザー辞書を用意するのがめんどくさくなりそうで、刺すだけで般若心経が入力するようにできないでしょうか？ HIDデバイスから、日本語を入力する方法を考えてみました。


# キーコード


HID持つキーボードは、文字を送る時に ASCII コードなどではなく、キーボード上のキーに対応したコードで送られています。

Arduino で HID キーボードを作る場合は以下のようなライブラリ(libraries/Keyboard/src/Keyboard.cpp)をつかっていて、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/63acc57b-17a3-c038-076c-48d09b31f07d.png)

"a" は 0x04,"b"は 0x05、 "V" は 0X19+ SHIFT キーとして定義されていることがわかります。

これは正確には、
「HID Usage Tables FOR Universal Serial Bus (USB) Version 1.22」
https://www.usb.org/document-library/hid-usage-tables-122

の「10 Keyboard/Keypad Page (0x07)」

で定義されています。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/7860c29f-2b1d-8e2d-79f4-208064a4a0a2.png)

太古の昔、IBM PC の キーボードインターフェースにおいてもASCIIコードとは違う専用のコードを送受信していましたが、そこで使われていたコードはこの表の AT-101 として書かれていて、HID デバイスで使っているものとは別のコードとして定義されているのがわかります。

cf.,「スキャンコード - Wikipedia」
https://ja.wikipedia.org/wiki/%E3%82%B9%E3%82%AD%E3%83%A3%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89


# Unicode を送るには？

HID デバイスのキーコードは基本的にキーボードのボタンに対応するものなので、Unicode のキャラクタを直接送るようなことはできません。一方、キーボードのボタンなので、文字に対応していないキー、すなわちCtrl や Alt,Windows キー などの 押した/離した の情報が送信できます。


込み入った操作をするには、例えば Windows で Exlorer を開くなら、 "Windows キー" + "E"  として、"0x7F" + "0x08" を送るなどすることで、人間が操作するように PC の機能を呼び出すことができます。


なので Unicode を送って日本語を入力するには、そのようなキー操作と共に Unicode を送ればいいことになります。

# Windows の場合

MS-IME の場合は 文字コード(ex,611b・・・「愛」の Unocode)+F5でコード入力できるっぽいですね。

(2021/05/18追記：@IkadzuchiPleistより以下コメントをいただきました。)

> Windowsでは、UnicodeでなくShift_JISでよければデフォルト状態でIMEに依存せず入力できますね。
Altを押しながら、テンキーで10進数の文字コードを入力です。
また、レジストリで「EnableHexNumpad」を設定すれば16進数のUnicodeも使えるようになります。
Altを押しながら、「+」に続いて16進数のUnicode番号を入力です。


# Linuxの場合


 Ubuntu Linux 20.04 LTS では、IME として Mosc が標準ですが Mosc には Unicode コード入力は無いみたい。あれれー？ と思って調べてみたら、 IME OFFの状態でできました。


- CTRL+SHIFT押下
- "u"
- CTRL+SHIFT 開放
- 文字コード(ex,611b)
- スペース

# OSX の場合

Mac を持っていないのでスミマセン！ しかしながらかるく調べた限りでは標準設定のままでは無さそう？

# 部分的にマルチプラットフォームで Unicode を送るキー操作

上記のことをまとめて、 OSX を除き、Windows と Linux で共通で使えるキー操作を考えてみました。( Mac OSX に対応できていないのが悔しいところ。 )

- CTRL+SHIFT押下 
- "u"
- CTRL+SHIFT開放
- 文字コード(ex,611b)
- F5
- CTRL+ALT+スペース
- "a"
- BackSpace

解説

- あらかじめ、WindowsはMS-IMEをON,Ubuntu Linux では IMEをOFFいただきますにしておく。

- CTRL+SHIFT押下 → "u" → CTRL+SHIFT開放

Ubuntu Linux での文字コード入力PREFIX。 Windowsでは無視される
- 文字コード(ex,611b)

16進数で入力

- F5

Windowsでの文字コードからの変換動作。Ubuntu Linuxでは無視される

- CTRL+ALT+スペース

Linuxでの文字コードからの変換、確定動作。Windows で無視するために CTRL+ALT をつけている。

- "a" →  BackSpace

Windowsでの確定動作。エンターだとLinux側に入ってしまうため、適当な文字を入力して削除することで代わりにしている。
ReactNavigationのTabNavigatorにネストされたStackNavigatorのタブを非表示にする方法

# TabNavigatorにネストされたStackNavigatorのタブを非表示にする方法
公式ドキュメント的には、 TabNavigatorとStackNavigatorのネストを入れ替えて、StackNavigatorの中にTabNavigatorを入れる方法が紹介されているが、これが結構辛かったりする。
https://reactnavigation.org/docs/hiding-tabbar-in-screens/

（TabNavigatorより外側に、StackNavigatorを移動すればよいだけなので意外と簡単だが。。。）

```
<TabNavigator>
    <StackNavigator>
        <Tabを非表示にしたいスクリーン />
        <Tabは表示してもいいスクリーン1 />
    </StackNavigator>
    <Tabは表示してもいいスクリーン2 />
</TabNavigator>

↓

<StackNavigator> /* ここに移動 */
    <TabNavigator>
        <Tabは表示してもいいスクリーン1 />
        <Tabは表示してもいいスクリーン2 />
    </TabNavigator>
    <Tabを非表示にしたいスクリーン /> /* ここに移動 */
</StackNavigator>
```

# 他の方法はないか
他に楽な方法はないのかとググった中で、以下の方法が簡単で良さそうだった。

```jsx
<Tab.Navigator tabBarOptions={stackOptions} >
  <Tab.Screen
    name={"market"}
    component={MarketNavigator}
    options={navigation => ({
      // tabBarIcon: ,
      tabBarVisible: navigation.route.state.index > 0 ? false : true
    })}
  />
</Tab.Navigator>
```

https://www.it-swarm-ja.com/ja/javascript/react%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3v5%E4%B8%8B%E3%81%AE%E3%82%BF%E3%83%96%E3%82%92%E9%9D%9E%E8%A1%A8%E7%A4%BA/813977381/


# 最後に
時間がなくてササッと書いているので、間違いがあったらすみません。。。
間違いを見つけた場合は教えて下さい！
もっと良い方法をご存じの方も教えていただけると幸いです！
[Error]Integrity constraint violation: 1451 Cannot delete or update a parent row: a foreign key constraint fails 

##はじめに
この記事はプログラミング初学者による備忘録用の記事であり、また、少しでも他の初学者のお役に立てればと思い書いています。

今回は、外部キー制約があるテーブルデータの削除を試みた際に、``[Error]Integrity constraint violation: 1451 Cannot delete or update a parent row: a foreign key constraint fails ``というエラーが発生しましたので解決策を記録しておきます。

間違いなどがございましたら、ご指摘のほどよろしくお願い致します。

##結論
**・新規作成する場合**
``onDelete('cascade')``を使用して「デリート時(on delete)」に対する処理をオプションとして指定する。

```php
Schema::create('articles', function (Blueprint $table) {
//略
 $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
        });
//略
```

**・既にテーブルを作成している場合**
外部キーを削除した後に再度外部キー制約を設定し直す。
Laravel では、 ``dropForeign() メソッド``で外部キー制約の削除が可能である。
引数に配列値を渡せば、削除時に自動的に命名規則に従った名前が使用されます。
 ``dropForeign() メソッド``で削除後、再度外部キー制約を``onDelete('cascade')``付きで設定する。

```example.php
//略
Schema::table('articles', function (Blueprint $table) {
    $table->dropForeign(['user_id']);
    $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
});
//略
```

##エラーの原因

```php
public function up()
    {
        Schema::create('articles', function (Blueprint $table) {
//略
    $table->foreign('user_id')->references('id')->on('users');
        });
    }
//略
```
上記のように、テーブル作成時に``onDelete('cascade')``の使用を忘れていた。

##まとめ
外部キー制約に``onDelete('cascade')``を設定することで、削除するレコードに紐づいている複数のレコードもまとめて一括で削除が可能になる。

##参考文献
・[公式ドキュメント6.x データベース　マイグレーション](https://readouble.com/laravel/6.x/ja/migrations.html)
UnityでビルドエラーになっているのにVisual Studioでは赤線の表示がないとき（「その他のファイル」の直し方）

# はじめに

スクリプトにビルドエラーが有る場合　　
UnityのConsoleや左下のステータスでエラーが有ることが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15024/f0ee420f-35b7-0203-b2bb-f0bd292d8c99.png)


これらの項目をダブルクリックすることにより、Visual Studioが開き該当の箇所を直したいわけなんですが、

なぜか、赤線が表示されないことがあります。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15024/148f779d-44d9-b99a-ad84-865015ab0cc1.png)

## 左上が「その他のファイル」になってないかを確認する

実は、ここが「その他のファイル」になっていると、スクリプトがビルドエラーだとしても
赤線で表示されません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15024/7b43042d-d21a-634b-2f9f-20a338a4649c.png)


# 直し方

Unityの「Edit」→「Preferences...」を開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15024/e0cb6240-2c0a-b80b-0cce-c2df8572d0ee.png)

「Preference」画面の「External Tools」の「External Script Editor」を
「Visual Studio 〇〇」にするようにしてください。

それっぽいものが複数出てる場合はどれを選んでも大丈夫だと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15024/4e897b70-0baf-5e83-4e04-e0393ec3774d.png)

これを設定後、Visual Studioを閉じて
UnityからVisual Studioを開き直したら、ちゃんと赤線が表示されるようになると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15024/2099e5b9-ff79-4a3f-abdb-93ba10b3221a.png)


# 要因

C#のファイルを、Unityソリューションとして開いていないのが原因であり、
うまく行かなかったときは、ただ単にC#ファイルを開くモードになっていた。

# どういうときにこうなるのか （原因は不明）

原因は不明です。今まで何もなかったのに、突然なったという声も聞いたり
Colabと連携しているときになったりとか、Unityのバグとかに起因するかもしれません。

なにか分かる人がいればコメントください。
【AWS】VPC間の接続方法

#プログラミング勉強日記
2021年5月13日

#VPCを分割する場合
　アプリサービスや組織構成などの用途に応じてVPCを分ける。
　具体的には、アプリケーションによってVPCを分ける・監査のスコープによって分ける・リスクが高いものを別のVPCにする・本番/検証/開発によって分ける・部署などの組織ごとに分ける。

#VPC間の接続
　VPCはVPC Peeringというやり方で2つのVPC間でのトラフィックルーティングが可能。異なるAWSアカウント間のVPC間や一部の異なるリージョン間の異なるVPC間の接続も可能。単一障害点や帯域幅のボトルネックは存在しなくて、Peeringに対してはマネーシド型でAWSが冗長性などを対応している。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/cf49d3ba-0825-1d86-8eaa-5899dd599c59.png)


　VPC Peeringの仕組みは、基本的には1対1。以下の図では、左側のAZ(`10.0.2.0/24`)から右側にあるAZ(`10.0.1.0/24`)には、下のAZ(`10.0.3.0/24`)が介しているように見えるが直接的に左のAZから右のAZにアクセスはできない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/14287a07-ff3c-8229-0991-d11262927575.png)

　左のものから右のものにアクセスしたい場合は、以下のようにVPC Peeringでつなげる必要がある。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/1688cbf2-52f1-0267-e100-bacba857dd61.png)
Microsoft Teams | 10 分でできる Reflect (こころの天気)

#「こころの天気」とは

「こころの天気」は、自分の内面を「天気」として描くことで、自分の気持ちに気づいたり、気持ちを整理したりする方法です。

# Reflect とは

Reflect は Microsoft Teams の中で、簡単に児童生徒の「こころの天気」を投稿、収集できるアプリです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/b3ce673a-dd3f-d1e5-f143-0f7d0e0040c0.png)



# 先生がReflect を行う

Reflect が利用できるのは「クラス」のチームのみです。他のチーム(PLC、スタッフ、その他)で作成したチームでは利用できませんので注意してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/ce2dc3ac-3e09-3e24-1899-9f1e81a03733.png)

まずはじめに、Relfect を利用したいチームに移動し、画面左のメニューから[・・・]→[その他のアプリ]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/19e12eb3-313b-a578-62cc-05371ae595c2.png)

アプリの選択画面が開いたら 画面左上の「すべてのアプリを検索する」に Reflect と入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/788047a7-cb6a-f898-7b93-ce5b866fe90b.png)

Reflect が表示されるのでクリックして追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/39d47d7d-6d48-bead-aa7f-9b9b6820d7d5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/b577f136-f48a-adad-dc2b-f744fee4736a.png)

追加したらチームに戻ってください。下記の画面が表示されますので **[OK]**を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/bff005df-8edb-d554-bfef-91989aef822f.png)

Reflect の設定画面が表示されますので設定をおこないます。
設定画面では

- 質問
- プライバシー：Reflectの結果を先生のみか、生徒にも見せるかを設定できます。
- 期間：児童生徒がReflectに返信できる期間を設定します。

の設定をおこない、**[送信]**をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/2edec971-6929-7db5-edec-c0a8f4856461.png)

「投稿」にReflect が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/e8e373f2-a622-c5c2-7d08-0a185a8c02b0.png)

# 児童生徒が「今日の気分」を入力する
先生がReflectすると、そのチームに所属する児童生徒の「投稿」にもReflectが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/8b362010-466d-1c34-598c-6fe3d24383d7.png)

5つの顔マークのうち一番自分の気持ちに近いものをクリックしてください。下の画面が表示されますので、**[完了]**をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/a3b1ce29-f37a-a907-d9a9-c95c0ddd0a89.png)



#先生が結果を表示する

先生は**[参照]**ボタンをクリックすると結果を表示することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/e87759ab-1a5a-97b3-4616-d46653959fbc.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/5a02dfbb-00e8-d11b-d985-a482c17cb2f6.png)

#おわりに
毎回、授業の最後にReflectを行いクラス全体の理解度を確認したり、毎日継続的Reflectを行うことで、"いじめ"の予兆を見つけ出すことができるのではないでしょうか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/05ba7647-715c-2dd5-d078-7b4ab29877d3.png)
symfony バージョン4をインストールする。

仕事で使うのでsymfonyを初めて触ってみました。
忘備録です。

## まずComposerを入れる

https://getcomposer.org

ダウンロードボタン押した先にあるコマンドをそのままコピペ、

```terminal:ターミナル
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
```

それからcomposer.pharのあるフォルダに移動して、


```terminal:ターミナル
sudo mv composer.phar /usr/local/bin/composer
chmod a+x /usr/local/bin/composer
composer -v
```


composer.pharを/usr/local/bin/composerに移動して使えるようにします。
バージョンが表示されればOK。


***

ここでプロジェクトの都合で
Composerのバージョンを1に戻さないといけなくなったので戻しました。

```terminal:ターミナル
composer self-update --1
```


## Symfonyを入れる

バージョンを4で入れなければいけなかったので

```terminal:ターミナル
composer create-project symfony/website-skeleton:^4.4 プロジェクト名
```

v4.0とかは入れられませんでした。勝手にv4.4になっちゃうみたいです。

***

※追加
どうやら勝手にv4.4になっちゃうのは自分のphpのバージョンが8なのが原因みたいでした。
phpのバージョンを7.4に落としたら入れられました。

```terminal:ターミナル
composer create-project symfony/website-skeleton=~4.1.0 プロジェクト名
```

***

ここでいったんターミナルを離れて、
プロジェクトフォルダ内の.envファイルを開いて一番下に追加


```terminal:.env
# set it to 1 to enable the debug mode
APP_DEBUG=0

DATABASE_URL="sqlite:///%kernel.project_dir%/var/data.db"
```

ターミナルに戻って、

```terminal:ターミナル
cd プロジェクト名
composer require symfony/web-server-bundle --dev
php bin/console server:run 
```

４０４が表示されればOK。

左下の赤い「404」ボタンを押して次に進みます。
エクセルのグラフを間違えた時の修正方法

[2軸グラフ・複合グラフの棒と折れ線を入れ替え【Excel・エクセル】 ](https://www.becoolusers.com/excel/combination-chart-bar-line-change.html)


［グラフツール］の［デザイン］タブ、［グラフの種類の変更］ボタンをクリックします。

で修正出来ましたっヽ(=´▽`=)ﾉ


嬉しかったのでメモ失礼いいたします。
【FE】情報セキュリティ（まとめ２）

## 1. DNS cache poisoning
 > DNSサーバに<font color=Orange>偽のキャッシュ情報</font> を登録させる。DNSサービスの利用者を攻撃者の設定した別のサイトに誘導させようとする攻撃手法。

## 2. SEOポイズニング
<table><td bgcolor><font color=Orange> Search Engine Optimization </font></td></table>
> 検索結果に不正なソフトウェアが仕込まれた悪質サイトを上位に表示される仕組み。

## 3. DOS攻撃
> 対象：稼働しているサーバやネットワークなど；
目的：サービスの妨害。
それらのリソース（資源）に意図的に過剰な負荷をかけたり、脆弱性をつけたりするような攻撃手法。

## 4. SQLインジェクション攻撃
<table><td bgcolor><font color=Orange> SQL Injection </font></td></table>
> 対象：Database；
目的：Databaseで不正な操作の権限を取得。
実現方法：インターネット経由でWeb Appに、Database操作の命令文を入力する。
対策：①　SQL文の組立でPlaceHolderで実装する；
　　　②　DBの操作命令の組立を文字列連結によって行う場合は、文字列にescape処理をする。

##5．中間者攻撃
> 内容：クライアントとサーバとの通信間に、攻撃者が割込みを実施する。それらの間の通信の中継として正規の相互認証が行われるように、セキュリティを破る。
実現方法：中間者攻撃では、正当なサーバに**なりますした**攻撃者は、クライアントへ偽のサーバの**公開鍵**を送りつけて通信を確立するようとする。
対策：SSHによる通信。

##6. クロスサイトスクリプティング
<table><td bgcolor><font color=Orange> Cross-site scription(XSS) </font></td></table>
> 目的：サイトを横断してユーザのクッキーや個人情報を盗む。
実施方法：動的にWebページを生成するアプリケーションのセキュリティ上の不備を意図的に利用し、悪意のあるスクリプトを混入させる。

##7. 辞書攻撃
> Passwordのクラックに用いられてそれを破ろうとする手法の１つ。
ユーザの習慣により、Passwordによく使われる英単語や数字などの文字列を登録されたファイル（辞書ファイル）に多く用意する。それを1つずつ試していくことで、Passwordを破ろうとする。

##8. ディレクトリトラバーサル

<table><td bgcolor><font color=Orange> Directory traversal </font></td></table>
サーバ内の想定外のファイル名を直接指定することにより、本来許されないファイルを不正に閲覧する攻撃方法。
親ディレクトの移動（../）など、システムが想定外のファイル名を指定することで不正なファイルの取得を狙う。

##9. トラッシング
<table><td bgcolor><font color=Orange> Trashing　ゴミ箱あさり </font></td></table>
>シュレッダーにかけられず企業のゴミ箱に捨てられている書類を収取し、重要な情報に再構成する行為。

##10. ブルートフォース攻撃
<table><td bgcolor><font color=Orange> Brute-force attack　 総当たり攻撃</font></td></table>

>Passwordのクラックに用いられてそれを破ろうとする手法の１つ。
特定の文字数および文字種類で設定される可能性のある組合せのすべてを試すことで、不正なログインを試す。

##11. ポートスキャン
<table><td bgcolor><font color=Orange> Port scanner </font></td></table>
> 目的：OSIモデルのアプリケーション層に脆弱性のあるサービスの有無や、IT管理者のスキルを推定するために、不正アクセスの準備とする。
実現方法：すべてのポートにパケットを送信し、それぞれの応答の有無を確認する行為。

***
参考資料：https://www.fe-siken.com/index_pm.html　の午後試験の各過去問。
【OculusQuest開発メモ】ビルドするまでにやらないといけないこと

[Unity + Oculus Quest 2 開発メモ](https://framesynthesis.jp/tech/unity/oculusquest/) の自分用のメモ（抜粋）でしかありません。

# 注意
上記サイトに書かれている通りです。
> Unity はプラットフォームやグラフィックス周りの基本設定を変えると、プロジェクト全体の再インポートが走るため、まずそのあたりの最低限の設定を済ませてから Oculus Integration をインポートします。

# ビルドまでにやることの抜粋
1. Switch Platform で Android に変更します。
2. Unity の各設定を変更します。
    * Build Settings を開いてプラットフォームを Android に、Texture Compression（テクスチャの圧縮方式）を ASTC に変更します。
    * Player Settings で Player > Other Settings > Graphics APIs の Vulkan を削除します。
    * Minimum API Level を「Android 6.0 ‘Marshmallow’ (API level 23)」に変更します。
3. Oculus Integration をダウンロード、インストールします。
4. XR Plug-in Management を有効化し、以下の手順で Unity の XR サポートを有効にします。
    * Window > Package Manager を開いて以下二つをインストールします。
        * XR Plugin Management
        * Oculus XR Plugin
    * Edit > Project Settings > XR Plug-in Management で Android と Standalone の “Oculus” にチェックを入れます
Shopify Polaris with Typescript/React: Each child in an array should have a unique "key" prop. Check the render method

##Shopify Polarisに関して。

TypeScriptを用いたReactで、map()メソッドを使って配列の中のオブジェクトをそれぞれ表示したい。

変数dataに配列の中にオブジェクトを入れ、useStateの初期値にdataをセットした。

そして、map()メソッドを使用してデータを渡せばうまくいくと思ったが、何も表示されない。

書いたコードはこちら。

```jsx
const data = [
  {
    id: 1,
    path: './images/fylo-landing-page.png',
    desc: 'Fylo Landing Page',
    url:'',
  },
  {
    id: 2,
    path: './images/huddle-curved-sections.png',
    desc: 'Huddle Curved Sections',
    url:'',
  },
]
const Projects = () => {
  const [items, setItems] = useState(data)
  return (
    <>
      {items.map((item) => {
        const {id, path, desc, url } = item
        return (
          <>
            <a href={url} >
              <MediaCard>
                <img key={id} src={path} alt={desc}/>
                <small text-lg">{desc}</small>
                <VideoThumbnail />
              </MediaCard>
            </a>
          </>
        )
      })}
    </>
  )
}
```
ここで、警告が。

>**Each child in an array should have a unique "key" prop. Check the render method**

この警告は「リスト項目には key を与えるべきだ」という意味です。

Reactの公式ドキュメントで、Keyについて大事そうな文を抜粋しました。

- Key は、どの要素が変更、追加もしくは削除されたのかを React が識別するのに役立つ。
- 配列内の項目に安定した識別性を与えるため、それぞれの項目に key を与えるべき。
- map() 呼び出しの中に現れる要素にはkey が必要

ということだが、key={id}をしっかり与えているはずなのに表示されないし、keyを与えるべきとの警告が出続けている。

##解決方法

つまり、keyが足りてないということなので、keyを足してみる。

```jsx
return (
  <>
    {items.map((item) => {
      const {id, path, desc, url } = item
      return (
        <>
          <a href={url} key={id}>
            <MediaCard>
              <img key={id} src={path} alt={desc}/>
              <small text-lg">{desc}</small>
              <VideoThumbnail key={id}/>
            </MediaCard>
          </a>
        </>
      )
    })}
  </>
)
```

以上で、無事表示されました。
[Unity]ScriptableObjectのScript項目がNoneになる

#あれ、Script項目がNoneになってる？
####ScriptableObjectのアセットを作成した際に、Scriptエリアがnullになってしまうことはなかったでしょうか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/323fc9ea-59a3-e267-d94f-d2f2d1da7cbd.png)



#原因
こちら、ファイル名とScriptのクラス名が違っていることで起こっているかもしれないので、クラス名とファイル名を一致させれば解決するケースがあると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/8b161cd3-8a1b-51d5-13b6-ca5455e1bbf7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/70d1825e-d31b-a40a-315a-b8ace5a18e7f.png)

#解決法
上記のファイル名とクラス名を同じ名前に変更すると…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/4aad56dc-7aa9-60ef-abf0-d6d10c7a234d.png)

この通り、Noneではなくなりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/ad6f6f01-c973-5c92-3604-82c850bef615.png)


MonoBehaviorと同じで、スクリプト名とクラス名を一致させないと、Unity側が認識してくれていないようですので、ご注意を。
【HTML/CSS】モダン中央揃え３選

CSSを使ったモダンな要素の中央揃えの手法を３つ紹介します。

#忙しい人の為に
<p data-height="450" data-theme-id="0" data-slug-hash="zYNVRgQ" data-default-tab="css,result" data-user="yukiishii" data-embed-version="2" data-pen-title="Modern centralizing" class="codepen">See the Pen <a href="https://codepen.io/yukiishii/pen/zYNVRgQ">zYNVRgQ</a> by Yuki Ishii (<a href="https://codepen.io/yukiishii">@yukiishii</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

#はじめに
中央揃えさせる要素は下記のHTMLのように親要素があり子要素が1つの場合です。
子要素が複数ある場合は予想と違う結果が出る可能性があります。
またテキストやボタンなど行のみを中央揃えしたい場合はまた別の手法が有効となります。

```html
<h1>No centralized</h1>
<div class="container">
  <div class="child">
    Child
  </div>
</div>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485754/830bdf2c-2931-8521-76fb-be5d8a6f205d.png)


#displary: grid; で中央揃え
一番コードが短くてすむ手法です。

```css
.container {
  /*  Following code makes centralizing  */
  display: grid;
  place-items: center;
}

.child {}

```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485754/d4e9e594-4f24-6350-1a08-fc3cb182cbf5.png)


#display: flex; で中央揃え
Gridを使用したものより1行コードが増えますが多用されている手法です。

```css
.container {
  /*  Following code makes centralizing  */
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485754/b07faf26-5794-17ee-d3a0-b01256360d5e.png)


#position: absolute; で中央揃え
先に紹介した手法とは別で子要素自体にスタイリングをしポジションを移動させます。
親要素をposition: relative;にする必要があります。

```css
.container {
  /*  Need parent a relative position  */
  position: relative;
}

.child {
  /*  Following code makes centralizing  */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485754/33918079-a38c-f329-b2e0-e50f0a002097.png)

#終わりに
今回手段のみを紹介しましたが、理由や仕組みなどは他の記事で紹介したいと思います。
今すぐ気になる方はご連絡ください。
RStudioをUSBメモリで持ち運ぶ

# 注

バッチファイルにミスがあったので修正しました[^1]．
[^1]: 2021年05月13日 13時34分 (JST)

# はじめに
みんな大好きRStudioですが，Windows10で使おうとするとユーザー名やらOneDriveとの連携やらで面倒くさいことが色々と起こってしまいます[^2]．
[^2]: [「RとRStudioのインストールと初期設定 Windows編」](http://yukiyanai.github.io/jp/resources/docs/install-R_windows.pdf)など参照．

そこでWindows用のRとRStudio一式をUSBメモリに突っ込んで持ち歩けるようにしてみました．これでOneDrive問題を回避するだけでなく，自分でプログラムのインストールができないPCなどでRStudioを利用したり，人にインストールとトラブル回避の手順を説明する手間から解放されることになります．

# 用意するもの

- USBメモリ（8GB以上，16GB以上ある方が望ましいか？）
- [R-Portable](https://sourceforge.net/projects/rportable/)
- RStudioがインストールされたWindows PC

# USBメモリ

まともな環境を持ち運ぶために，パッケージ類をすべてUSBメモリにインストールします．`tidyverse`といくつかのパッケージをインストールした段階で6GB程度使用しているので，データを一緒に持ち運ぶことなども考えると8GBは必須だと思われます．

# R-Portableのインストール

ダウンロードしてインストール先をUSBメモリに指定するだけ．手順は省略．

# RStudioのコピー

[「Creating a Portable Version of RStudio for a USB Drive」](https://support.rstudio.com/hc/en-us/articles/200534467-Creating-a-Portable-Version-of-RStudio-for-a-USB-Drive)によると，すでにインストールしてあるRStudioがあればディレクトリ[^3]ごとコピーすることで持ち運び可能とのことですので，まるごとUSBメモリにコピーしましょう．

[^3]: 通常は`C:\Program Files\RStudio`ですかね．

# 起動バッチファイルの準備

下の内容をテキストエディタで作成し，ファイル名を`rstudio_init.bat`など拡張子を`.bat`としてUSBメモリの最上層に置いておきます．

```console:rstudio_init.bat
cd /d %~dp0
set current_dir=%~dp0
set R_LIBS_USER=%current_dir%R\win-library
if not exist "%R_LIBS_USER%" mkdir "%R_LIBS_USER%"
"%current_dir%RStudio\bin\rstudio.exe"
```

USBメモリをカレントディレクトリとして，そこに`R\win-library`というパッケージをインストールするためのディレクトリがあるかどうかを確認してから起動しています．インストールされたパッケージはここから読み込むことになりますので，持ち運ぶ前にこのバッチで起動して必要なパッケージをインストールしておきます．

# 起動

USBメモリを差し込んだら`rstudio_init.bat`をダブルクリックします．RStudioを起動したことのないPCではRの場所を選択しなければいけませんので，USBメモリ内の`\R-Portable\App\R-Portable\bin\x64`を選択します[^4]．選択後は一度RStudioを再起動することで利用することができます．この辺RStudioのコマンドラインオプションとかで指定できないのかなーとか考えています．
[^4]: 今どきi386ってことはないですよね…．

# Enjoy!

おしまい．
GAS( google app script )でUtilities.parseCsvを使う際、値の中に「カンマ」が入っているときに気をつけること。

# GAS( google app script )でUtilities.parseCsvを使う際、値の中に「カンマ」が入っているときに気をつけること。
## 概要
GAS( google app script )でUtilities.parseCsvつかってカンマ区切りのCSVをパースする際に、値の中に「カンマ」が入っている場合「"」で囲ってエスケープするのだが、「カンマと『"』の間に空白が入っているとうまく動かない」ということに気づかず困り果ててしょうがなく仕様変更をしたところで、後から気づいて仕様をもとに戻したお話。

## 結論
ユーザーからの入力であれば、注意書きに
**値中にカンマがある場合は「"」で囲むこと。この場合はカンマと「"」の間に空白など入らないように注意する**
と書いて終わり。
【bubble.io】開発の初めにまず設定すべき項目

### 初めに

当記事はNoCodeツールであるbubbleでWebアプリケーションを開発する際、まず設定すべき項目についてまとめたものです。完全に個人的な備忘録になっています（詳しい方から見れば当たり前な内容になっていますのでご注意ください）。

### 画面サイズの設定

雛形となる画面のサイズを設定する。
アプリ作成当初は「indexページ」がデフォルトで作成されるが、これに画面サイズを設定する。以降は「indexページ」を複製してページを追加する様にする。

例えば、15インチのMacBook proを念頭に設定する場合は、indexページをダブルクリックし


width:1440px
Height:900px

を設定する。

そして「Make this element fixed-width」のチェックを外す。

これにチェックがあると画面が固定サイズになってしまい、レスポンシブな画面にすることが出来ない。

次に「Minimum width」に50をセットする。

![65B0C5FE-3644-48B6-B37E-9ACCAD7A3F6D.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/2d3a8ae7-0910-0baf-1820-7dc07ee2fe51.jpeg)

こんな感じ。


### デフォルトの配色設定

画面左のツールバーの「Settings > Generalタブ」でカラーパレットを設定できる

![B570B7B0-7E29-41BB-9383-DB144EC48C79.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/e44ddec4-ae70-e972-ba32-1471455f1eb7.jpeg)

ここで指定しておくとデザイン時の色指定時に呼び出せる。

パレットに設定する配色は以下のサイトを使うと便利。

[・Color Hunt](https://colorhunt.co/)
[・Colors](https://coolors.co/)


### デフォルト言語の設定

「Settings > Languagesタブ」でデフォルトの言語を指定する。

指定する箇所はLanguagesタブの

・General > Applications Primary Language
・Application texts & massages > Currently editing messages and texts for

の二箇所。

![5D3ECDA4-F30C-448C-9A41-566E7A3E3648.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/1d6c2b39-63f6-fc47-7f14-59677e344f82.jpeg)
【mac】厳選ショートカット

いろんなショートカット集めました。使う頻度の多いものだけ。
最後の方にVSCodeのショートカットも少しだけまとめてます。

## キーボードマークの説明
⌘：command

⌥：option

⇧：shift

⌃：control

## 必須
- ⌘ + c：コピー
- ⌘ + x：選択内容を切り取り
- ⌘ + v：貼り付け
- ⌘ + a：全選択
- ⌘ + z：最後にした操作を取り消す（アンドゥ）
- ⌘ + ⇧ + z：アンドゥで取り消した操作を取り消しする（リドゥ）。取り消しすぎた時に使おう。
- ⌘ + s：ファイルを保存する（shiftを追加すると、別名で保存可能）
- ⌘ + tab：起動中のアプリケーションを切り替える
- ⌘ + ⇧ + tab：起動中のアプリケーションを逆向きに切り替える
- ⌘ + リンクをクリック：リンク先を新しいタブで開く
- ⌘ + f：検索

## 使えたらブラウジングがとても快適
- ⌘ + w：ウィンドウを閉じる
- ⌘ + ⌥ + v：全てのウィンドウを閉じる
- ⌘ + T ：新しいタブを開く
- ⌃ + Tab：右のタブに移動する
- ⌃ + ⇧ + Tab：左のタブに移動する

## 使えたらFinderの操作が少しだけ快適

- ⌘ + ⇧ + a：アプリケーションへ移動
- ⌘ + ⇧ + h：ホームへ移動
- ⌘ + ⇧ + d：デスクトップへ移動
- ⌘ + delete：ファイルをゴミ箱に入れる

## スクリーンショット、動画を撮る

- ⌘ + ⇧ + 3：画面全体のスクリーンショットを撮る。
- ⌘ + ⇧ + 4：画面の選択部分のみのスクリーンショットを撮る。
- ⌘ + ⇧ + 5：動画を撮る。



## VSCodeのショートカット 
### カーソル移動系、テキスト削除系

CUI操作などでも活躍。ホームポジションから離れなくて済むのでタイピング速度UP。個人的には必須レベル。

- ⌃ + P：カーソルを一行上に移動させる
- ⌃ + N ：カーソルを一行下に移動させる
- ⌃ + F：カーソルを一文字右に移動させる
- ⌃ + B：カーソルを一文字左に移動させる
- ⌃ + E：カーソルを行末（段落の最後）に移動させる
- ⌃ + A：カーソルを行頭（段落の先頭）に移動させる
- ⌃ + H：バックスペース（カーソルの左側を削除する）
- ⌃ + D：デリート（カーソルの右側を削除する）
- ⌘ + ↑ or ↓：ファイルの先頭 or 最後へ移動

### 頻繁に使う
- ⌘ + Shift + P：コマンドパレットを開く。VSCodeの様々な機能にアクセスできます。F1でも開く。
- ⌘ + \：エディターを分割する。
- ⌘ + B：サイドバーの開閉。

### 結構使う
- ⌘ + ⌥ + ← or →：タブ移動
- ⌥ + ↑ or ↓：選択行を矢印方向に移動
- ⌥ + ⇧ + ↑ or ↓：カーソルの行を矢印方向にコピー
- ⌥ + クリック：マルチカーソル

### 稀に使う
- ⌘ + +：文字サイズ大きく。
- ⌘ + -：文字サイズ小さく。
アイコンフォントとしてMaterial Iconsの様々なスタイルを使うには

## これは何

- Material Iconsを使うにあたってデフォルト以外の4スタイルを使おうと思うと、意外と公式ドキュメントが分かりづらいです
    - デフォルト以外の4スタイル = Outlined, Rounded, Sharp, Two tone
- これらを使う方法をまとめました
- ちなみに検証で使っていたコードはGitHubで公開しています
    - 記事で公開するように体裁だけ整えました

https://github.com/xrxoxcxox/qiita-material-icons-tips

## 結論

全てのスタイルを使おうと思うなら、以下のコードを書けばOKです。

```html:このlinkをHTMLで読み込む
<link
  href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone"
  rel="stylesheet"
/>
```

## 何が困ったのか

2021年3月2日にアップデート（？）されて、Google FontsがMaterial Iconsを扱うようになりました。

https://material.io/blog/google-fonts-material-icons

ページ上部に[Developer guide](https://developers.google.com/fonts/docs/material_icons)へのリンクがあるわけですが、`Icon font for the web`の章ではGoogle Fonts経由でアイコンとスタイルシートを読み込む方法が紹介されています。

```html
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
>
```

そして、Google Fonts上では使いたいアイコンを選択するとコードスニペットを表示してくれます。
例えば`Two tone`なアイコンを選択するとクラス名には`material-icons-two-tone`を使いなさいとのことですが、**このままコピペしても動きません。**

![チェックアイコンを選択し、コードスニペットが表示されている画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/ed4725f8-78fb-5a68-2f09-f18e42f97a9b.png)

どうすれば動くかというと、`link`の中身をこのように変える必要があります。

```diff_html:公式のコード
  <link
-   href="https://fonts.googleapis.com/icon?family=Material+Icons"
+   href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone"
    rel="stylesheet"
  >
```

スタイルにあわせて`href`を変える必要があるのが、私が見る限りDeveloper guide内で明言されておりませんでした。

（もしどこかに記載があった場合はすみません。私の確認不足です。）

## それぞれのスタイルを使用するためのリンク

### Filled（デフォルト、ドキュメント内で紹介されているもの）

```html
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
>
```

### Outlined

```html
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
  rel="stylesheet"
>
```

### Rounded

```html
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"
  rel="stylesheet"
>
```

### Two tone

```html
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone"
  rel="stylesheet"
>
```

### 全てを使いたい場合

```html
<link
  href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone"
  rel="stylesheet"
/>
```

## 番外編：どのように発見したか

上手く表示できないため、本家のサイトでは一体どんなコードが書かれているんだろう……と思い開発ツールで確認してみました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/648a87eb-4093-0a26-9e78-45a0929fab31.png)

すると上の画像にあるように、`material-icons-two-tone`のクラスを指定しているファイルが`css2?family=Material+Icons+Two+Tone`という名前なのが分かりました。

もしかしてと思い`href`もこれにあわせて書き換えたら上手く表示されたため、解決。
AIエンジニアの実装スキルを証明するための項目について


# はじめに

現在（2021年5月時点）で、JDLA E資格を取得後に転職活動を行っていますが、
データサイエンティスト、AIエンジニアの実務経験がないこと、
年齢が40代と高いことなどがあり、なかなか採用までいきません。
（私の面接対応がうまくないこともあると思いますが。。。）

そこで、実装項目がどういったレベルであるかを証明することを目的とした課題の一覧を作成したいと思います。
精度などの客観的な指標が得られるように、Kaggle、Signateなどの練習問題を主とします。

## AI実装スキルシート

データサイエンス100本ノックに加えて主なAI技術を必要とするKaggle,Signateのコンペティション、練習問題を集めてシートにしてみました。

私自身が実際に参加したものでないものも多く、代表的なものとは言い難いと思いますので、
ブラッシュアップしていけたらと思っています。

https://drive.google.com/file/d/16m4Mb5gCKxxFDRGoRipamIas7kMQ9qFN/view?usp=sharing

ご意見お待ちしております。