OmniAICreator/Qiita-1.07M huggingface dataset:
Xdebug3.0.0がリリースされたので、ver2からの雑な設定コンバート

### Xdebug 3.0.0 is out!
11/25に[Xdebug 3.0.0 is out!](https://xdebug.org/announcements/2020-11-25)されたわけですが、`pecl install xdebug`と記載していて、まんまと勝手にver3がインストールされてしまい、まんまと以前の設定で動かず焦っている今日この頃ですが皆さんいかがお過ごしでしょうか？

そんなわけで、私が使用している設定をコンバートし、ひとまず変更を加えて動くところまで雑にやって、雑にまとめました。

### mode設定
ver2.x系でとりあえずステップデバッグを使うためには、下記の設定を行っていたと思います。いや、むしろこれがほぼすべてと言ってもよいくらい。

```ini
xdebug.remote_enable=1
xdebug.default_enable=0
xdebug.profiler_enable=0
xdebug.auto_trace=0
xdebug.coverage_enable=0
```

ver3.x系では

```ini
xdebug.mode=debug
```

となります。

modeにいくつかの設定が集約されたようで、そのvalueの記載でフラグを管理していく感じです。

以前の設定とmodeのvalueのコンバートはこう。

|以前の設定|modeのvalue|
|:---:|:---:|
|default_enable|develop|
|profiler_enable|profile|
|remote_enable|debug|

同時に設定したい場合はvalueをカンマ区切り。

```ini
xdebug.mode=develop,debug
```

### その他コンバートが必要だったもの
xdebug.remote_autostartを設定する場合、下記の2つを設定するようです。

- xdebug.mode=debug
- xdebug.start_with_request=yes

だいたいの人が必要そうな設定はこちらです。

|以前の設定|新しい設定|
|:---:|:---:|
|profiler_output_dir|output_dir|
|remote_host|client_host|
|remote_port|client_port|

output_dir系はoutput_dirにまとめられたっぽいです。

ここまでの設定でブレークポイントまでは動かすことができました。

### ポート番号
私はポートを指定していたので引っかからなかったのですが、デフォルトのポート番号が`9003`へ変更になっています。

### 参考
参考にしたのは公式ドキュメント。
結局、必要な設定を検索しながらポチポチ地道に書き換えていくしかなさそうです。

- [Upgrading from Xdebug 2 to 3](https://xdebug.org/docs/upgrade_guide#changed-xdebug.coverage_enable)
- [Documentation - all settings](https://xdebug.org/docs/all_settings)
- [Xdebug](https://xdebug.org/)

### 動いたini
最期にXdebugが動作したiniを記載しておきます。
開発環境はPhpStormで、Dockerサーバーです。

```ini
xdebug.client_host=host.docker.internal 
xdebug.client_port=9010 
xdebug.idekey=PHPSTORM 
xdebug.mode=debug,develop 
```

## Profilerの設定
[Xdebug3.xでProfilerを動かす雑な設定](https://qiita.com/naoyukik/items/1a371876651ef3faf026)を公開しましたので合わせてご覧ください。
classとstructについて【Swift】

# はじめに
`class`と`struct`の違いについて理解が薄かったので、備忘録としての投稿させていただきます。

# `class`と`struct`の定義
### `struct`の場合
```Swift
struct Human {
    let name: String
    let age: Int
}
```

### `class`の場合
```Swift
class Human {
    let name: String
    let age: Int
    // プロパティを初期化しないと下記メッセージのように怒られます。
    // Class 'Human' has no initializers
    init(name: String, age: Int) {
        self.name = name
        self.age = age
    }
}
```

# `class`と`struct`の使い分け
#### 1. `class`と`struct`の大きな違い  
* `struct`は値型（継承できない、内部を直接書き換えることは不可）  
* `class`は参照型（継承できる、内部の書き換えるが可能）

#### 2. `struct`を使うパターン
* 小さくて単純なデータをカプセル化をしたい場合
* 参照渡しより値渡し(コピー)が良い場合
* 継承が必要ない場合

#### 3. `struct`を使わない方が良いパターン
* データが大きい
* プロパティが多い

理由としては、以下の2つ

* 構造体は変数にセットする度にコピーされるため、データが大きいと処理時間が遅くなる
* 構造体はスタック領域に確保されるため、データが大きいと溢れる可能性が高くなる
なので、APIやDBの取得データなどは構造体ではなく、クラスで作成したほうがよい。

#### 4. 比較詳細

|      | class | struct |
| ---- | ----- | ------ |
| プロトコル実装 |  　○　  |  　○　  |
| プロパティ(格納型) |  　○　  |  　○　  |
| プロパティ(算出型) |  　○　  |  　○　  |
| タイププロパティ(格納型) |  　✕　  |  　○　  |
| タイププロパティ(算出型) |  　○　  |  　○　  |
| メソッド |  　○　  |  　○　  |
| タイプメソッド |  　○　  |  　○　  |


#### 5. 補足
#### タイププロパティ
すべてのインスタンスが利用できる（C の static 定数のような）定数プロパティ、あるいは特定の型のすべてのインスタンスにグローバルな値を保管する（C の static 変数のような）変数プロパティのように、その型のすべてのインスタンスに共通の値を定義するのに役に立つ。
#### タイプメソッド
型自体で呼び出せるメソッド。
JavaScript における配列コピー

# JavaScript における配列コピーの問題

JavaScript における配列（ array ）はオブジェクトのため参照コピーされる。
つまり、コピー先の配列を変更すると、コピー元の配列が変更されてしまうといった事象が発生する。
例えば次のようになる。

```javascript
array = [1,2,3];
arrayCopy = array;
arrayCopy[0] = 4;
console.log(arrayCopy); // [4,2,3]
console.log(array); // [4,2,3] : コピー元の値も変更される
```

# JavaScript における配列コピーの解決策

2020年11月現在ではいくつかの方法があるので代表的なものを紹介する。

## slice()

速度が早い、と言われている。

```javascript
array = [1,2,3];
arrayCopy = array.slice();
```

## concat()

slice() 同様、速度が早い、と言われている。

```javascript
array = [1,2,3];
arrayCopy = array.concat();
```

## スプレッド構文（ ES2015 ）

最も直感的な記述だと思われる。

```javascript
array = [1,2,3];
arrayCopy = [...array];
```

## その他
for() や while() 、map() 、filter() 、reduce()、from() による方法あり。

## 参考

- [How to clone an array in JavaScript | freeCodeCamp](https://www.freecodecamp.org/news/how-to-clone-an-array-in-javascript-1d3183468f6a/
)
- [Fastest way to duplicate an array in JavaScript - slice vs. 'for' loop | Stack Overflow](https://stackoverflow.com/questions/3978492/fastest-way-to-duplicate-an-array-in-javascript-slice-vs-for-loop/20547803) 

## その他のアドカレ参加
- [3年間の個人開発を通じて得た気付き](https://qiita.com/drytt/items/b78db945eceb03cae2cf)
- [React 未学習者 Q.「React って学習コスト高いんでしょ？」A.「](https://qiita.com/drytt/items/8122e043c16ddeef924a)
Rails結合テスト ログイン処理まとめ

#はじめに
Railsでオリジナルアプリ制作を終えました。モデルの単体テストは完了したものの、結合テストは未実施でした。ユーザーがログインしないと使えない機能テストにおいて、ログイン処理を繰り返しテストコードに記述するのは避けたいと思います。より簡素な記述をするため、書き記します。

**開発環境**
ruby 2.6.5
Rails 6.0.3.4
Gem : gem 'rspec-rails'


#目次
1.ログイン処理
2.簡素なログイン処理の記述

#1.ログイン処理
ログインするにあたり、email及びパスワードが必要だと仮定する。テストコードにおける記述は以下のようになる。問題は機能テストごとにログイン処理を書く必要がある。これを簡略化する方法を次の節で説明する。

```ruby:spec/system/○○_spec.rb
visit root_path
fill_in 'user_email', with: user.email
fill_in 'user_password', with: user.password
click_on("Log in")
expect(current_path).to eq root_path
#以下ログインした状態での機能テストの記述を書く
visit new_desk_path

```
※なお、email入力フォームのidはuser_email、パスワードはuser_passwordとする。
#2.簡素なログイン処理の記述
specディレクトリの直下にsupportディレクトリを作成する。さらにその直下にsign_in_support.rbファイルを作成し、下記ログイン処理のメソッドを作成する。

```ruby:spec/supports/sign_in_support.rb
module SignInSupport
  def sign_in(user)
    visit new_user_session_path
    fill_in 'email', with: user.email
    fill_in 'password', with: user.password
    find('input[name="commit"]').click
    expect(current_path).to eq root_path
  end
end
```
ここで定義したsign_inメソッドをテストコードのファイルで使用できるように下記を設定する。

```ruby:spec/rails_helper.rb
# コメントアウトを外す
Dir[Rails.root.join('spec', 'support', '**', '*.rb')].sort.each { |f| require f }

# 中略

RSpec.configure do |config|
  # 追記
  config.include SignInSupport
```
以上によりsign_inメソッドを使用できるようになった。下記に使用例を示す。

```ruby:spec/system/○○_spec.rb
before do
    #テスト用のユーザーダミーデータを生成する。
    @user = FactoryBot.create(:user)
  end
  context '画像投稿ができるとき'do
    it 'ログインしたユーザーは新規投稿できる' do
      # ログインする
      sign_in(@user)
#以下省略
```

以上
千葉県Go To EAT向けに店舗検索BOT（AI LINE BOT）を作った話(3)【python環境構築】

<a href="https://qiita.com/Haradasn/items/6263752c5f221c0e4035">千葉県Go To EAT向けに店舗検索BOT（AI LINE BOT）を作った話(2)【概要】</a>の続きです。

#環境構築
windows10上にpythonが使える環境を準備しました。
##インストールしたもの

- Anaconda　科学計算のためのPythonおよびR言語の無料のオープンソースディストリビューションです。今回はwindowsにてpythonと各種ライブラリを利用するために入れました。(インストール手順の参考：<a href="https://qiita.com/j_konosuke/items/80e5b583c51b745c3e7f">AnacondaをWindowsにインストールする</a>)
- gensim　自然言語処理に用いられるオープンソースライブラリです。今回は、お店をサジェストするエンジン部分にgensimのdoc2vecを利用するためインストールします。

```python:インストール手順
pip install gensim
```
- mecab　MeCabは形態素解析のライブラリで、文章を最小単位の構成要素に分解することが出来ます。今回はgensimでへデータを入力する際の前処理として使います。(インストール手順の参考：<a href="https://qiita.com/menon/items/f041b7c46543f38f78f7">PythonとMeCabで形態素解析(on Windows))</a>
- Neologd　mecabにて単語を精度よく分割するために辞書としてNeologdを追加しておきます（インストール手順の参考：<a href="https://qiita.com/zincjp/items/c61c441426b9482b5a48">WindowsでNEologd辞書を比較的簡単に入れる方法ーユーザー辞書編</a>）
- Beautiful soup　スクレイピングに特化したpythonモジュールです。今回は、機械学習の入力データを集めるために使います。以下のコマンドでインストールします。

```python:インストール手順
pip install bs4
```

##mecabの動作チェック
```python:python
import MeCab
m = MeCab.Tagger("-Ochasen")
print(m.parse("欅坂46"))
```
```python:結果
欅坂46	ケヤキザカフォーティーシックス	欅坂46	名詞-固有名詞-人名-一般		
EOS
```
これでpython利用環境の準備は終了です。
【ajax】本番環境で謎の403エラー

## 環境
- Laravel 8系
- PHP 7.4
- appache

## 実装したいこと
 ajaxを使用して非同期でPATCH処理を行いたい。

## 本題
```javascript

$.ajax({
    type: 'PATCH',
    url: '/hoge_update',
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
     },
     data: {
       id: id,
       item: item,
      },
      dataType: 'json',
 }).done(function (data) {
```
こんな感じで非同期でPATCH処理を実装しようと思ったら、本番環境で `403 Forbidden`エラーが。

調べてみるとどうやらapache側で許可されているのが `GET` `POST`のみみたい（詳細は[こちら](https://qiita.com/koyablue/items/7bff3a2f530d7328a393)）

ただssh接続の許可がなかったり本番環境に入れない場合、confファイルを直接編集できないので、

```javascript

$.ajax({
    type: 'POST', //POSTに変更
    url: '/hoge_update',
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
     },
     data: {
       _method: 'PATCH', //PATCHを追加
       id: id,
       item: item,
      },
      dataType: 'json',
 }).done(function (data) {
```

だいぶ無理やりですがこれでしっかり200ステータスを返してくれました。

### 参考
- https://laracasts.com/discuss/channels/servers/403-errors-with-restful-methods-using-ajax-on-shared-host
rancherOSをAzureVMに上手くデプロイ出来ないとき

# 本記事の趣旨
RancherOSをAzureで使ったときいくつかハマったポイントがあったためまとめました．
**基本的に，[公式ドキュメント(v1.x.x)](https://rancher.com/docs/os/v1.x/en/installation/cloud/azure/)に従えばハマりません**．

# トラブルシューティング

## デプロイに失敗する
現在公式ドキュメントで掲載されているインスタンスのバージョンでデプロイしてください．使用できるバージョンは`Launching RancherOS with custom data`セクションの一番上に書いています．
> 2020年11月23日時点でv1.5.4まで公開されていますが，このバージョンでは何故かデプロイが完了せず，30分後にTime Outします．投稿者は，ドキュメント参照の上v1.5.2でデプロイ出来ました．

## sshログイン時にパスワードを要求される
SSHKeyを自作しましょう．
`ssh-keygen -m PEM -t rsa -b 4096`
また，ドキュメントにはユーザ名をrancherとするように指示があります．
Vue + axios + Spring BootでCORSでクマった時の対処法

#CORSエラーで絶対に躓かないために
##CORSとは何か
正式名称は"Cross Origin Resource Sharing"
セキュリティの観点から、リソースを制限するものだと思います。
詳しくは、こちらの記事がより丁寧に説明してくれています。😆
https://qiita.com/att55/items/2154a8aad8bf1409db2b

##実際の実装
###axios側の設定😋
originには、postのparamsが含まれています。

```
import service from '../utils/service'

export const api = {
  async getRoute(origin) {
    return await service
      .post('http://localhost:8080/getRoute', origin, {
        withCredentials: true,
      })
      .then(result => {
        return result.data
      })
      .catch(result => {})
  },
}
```

serviceでは、axiosの設定そしています。

```
import axios from 'axios'
import { api } from '../config/api'

const service = axios.create({
  timeout: 30000,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8',
  },
  emulateJSON: true,
  withCredentials: true,
})
```

###Vue側の設定😂

```
  methods: {
    async searchRoute() {
      const params = {
        origin: this.markers.marker[0].position,
        direction: this.direction,
      }
      const result = await api.getRoute(params)
    },
```

Vueのmethodsのところで呼び出します。

###Spring Boot側での設定
私は、Springfilterを使ってnetworkのconfigを設定しました。
Vueはlocalhost:9000で動かしているので、9000を許可します。

CorsConfig.java

```
@Configuration
public class corsConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowedOrigins(new ArrayList<>(Arrays.asList("http://localhost:9000")));
        config.setAllowCredentials(true);
        config.addAllowedMethod("*");
        config.addAllowedHeader("*");
        config.addExposedHeader("Set-Cookie");

        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        return new  CorsFilter(configSource);
    }
}
```

Controller.java

```
@CrossOrigin(origins = {"http://localhost:9000"})
@RestController
public class RouteController {

    @Autowired
    RouteManager routeManager;

    @PostMapping("/getRoute")
    public DirectionsResult sendGetRouteReq (@RequestBody GetRouteReq req) throws InterruptedException, ApiException, IOException {
        DirectionsResult result = routeManager.getRoute(req.getOrigin(), req.getDirection());
        return result;
    }
}
```

こんな感じで実装しました。
参考になりましたら幸いです。
deviseのgemで、ユーザーの詳細ページや編集ページは作れないかなぁ…

#はじめに
　deviseをを使ってユーザー管理機能を実装した。マイページを作って編集をできるようにしたい。しかし、deviseのコントローラーでできるのか、不安だったので、deviseで作ったuserディレクトリの配下には作らず、別でuserコントローラーを作った。似たようなディレクトリとファイルがあるので、なんかモヤモヤする。

##userコントローラー

ターミナルで、

```bash
rails g controller users
```
を行うと、`controllers/users_controller.rb`ファイルが生成される。

```ruby:users_controller.rb
class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
  end
end
```
まあ、こうすれば詳細ページを作れるのだが…


##終わりに
　deviseのコントローラーにはコメントアウトされている部分がたくさんあるが、この中に詳細を表示させたり、編集したりすることは
HTTPリクエストのGET/POSTをショートカット(iOS)とcURL(コマンド)で比較

#HTTPリクエスト GET/POST
HTTPのGETをサーバーから情報を取得してきます。JSONファイルなどを返してくれる
HTTPのPOSTはサーバーに情報を送ります。特に返ってくるものはない(成功、失敗が返ってくることがある)
ダウンロード(GET)、アップロード(POST)が可能です。

#ショートカット(iOS)
ショートカットとはWorkflowがAppleNi買収されiOS 12から利用可能になったiOS標準のアプリです。
実は多くのことができるのですが、今回はHTTPのGET/POSTをやっていきます。

https://support.apple.com/ja-jp/guide/shortcuts/welcome/ios


# cURL
「curl」コマンドは、さまざまなプロトコルに対応したデータを転送するためのコマンドです。



#HTTP GET
##cURL
```shell
curl -X GET "https://example.com/api/" -H "accept: application/json" -H "Content-Type: form"
```
##ショートカット
使用するショートカットのアクションは`URLの内容を取得`です。
方法を`GET`にすることでHTTPのGETが利用可能です。
cURLの`「-H」header`は`ヘッダ`から設定可能です。
<img width=250 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225372/98d1197c-439a-8149-8f1c-5cf8a36c69d0.jpeg" />
<img width=250 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225372/aaa001a5-c866-3e22-7c06-3d874c12ad14.jpeg" />

#HTTP POST
##cURL
```shell
curl -X POST "https://example.com/api/" -H "accept: application/json" -d "temperature=18" -d "operation_mode=auto"
```
##ショートカット
使用するショートカットのアクションは`URLの内容を取得`です。
方法を`POST`にすることでHTTPのPOSTが利用可能です。
cURLの`「-d」data`は`本文を要求`の`フォーム`から設定可能です。
<img width=250 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225372/98d1197c-439a-8149-8f1c-5cf8a36c69d0.jpeg" />
<img width=250 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225372/3f53485a-7f2b-09ae-aaf2-ab1e523d0f65.jpeg" />
【Nuxt.js】Firebaseとの連携方法

#firebaseパッケージのインストール

```:ターミナル
プロジェクト名$ npm install --save firebase
```

# firebase pluginの作成

```:ターミナル
プロジェクト名$ touch plugins/firebase.js
```

```javascript:plugins/firebase.js
import firebase from 'firebase/app'
import 'firebase/firestore'

if (!firebase.apps.length) {
  firebase.initializeApp(
    {
      apiKey: process.env.FIREBASE_API_KEY,
      authDomain: process.env.FIREBASE_AUTH_DOMAIN,
      databaseURL: process.env.FIREBASE_DATABASE_URL,
      projectId: process.env.FIREBASE_PROJECT_ID,
      storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
      appId: process.env.FIREBASE_APP_ID,
      measurementId: process.env.FIREBASE_MEASUREMENT_ID
    }
  )
}

export default ({ app }, inject) => {
  inject('firebase', firebase);
}

```

環境変数の設定方法はこちら↓
[【Nuxt.js】「dotenv」を使った環境変数の設定方法](https://qiita.com/higa08/items/046aafca1969cfa4d607)

#`nuxt.config.js`の設定

```javascript:nuxt.config.js

//...省略

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    '~/plugins/firebase'
  ],

//...省略
```

#動作確認
 `pages/index.vue`内に送信ボタンを設け、
クリックでfirestoreにデータを送る。

```vuejs:pages/index.vue
<template>
  <div class="container">
    <button @click="submit">送信</button>
  </div>
</template>

<script>
export default {
  methods: {
    submit() {
      const db = this.$firebase.firestore();
      db.collection('user').add({ name: 'hoge' })
        .then(() => {
          console.log('成功');
        })
        .catch((e) => {
          console.log(e.message);
        });
    }
  }
}
</script>
```

![スクリーンショット 2020-11-26 23.10.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/f3b1ecb4-bb13-054e-90b2-816ea3e69d7f.png)
AtCoder 生活100日目

[前回](https://qiita.com/flandrescarlet237/items/bf986e77023aaea8a635)

#100日目
今回は、灰色の問題を2問ときました。

|問題|難易度|自力で解けた|かかった時間|
|:-:|:-:|:-:|---|---|
|エイシング プログラミング コンテスト 2020|C|✕|25分41秒|
|AtCoder Regular Contest 105|B|✕|40分21秒|


##[エイシング プログラミング コンテスト 2020_C](https://atcoder.jp/contests/aising2020/tasks/aising2020_c)

```c++

#include <bits/stdc++.h>
#define rep(i,n) for(int i = 0;i < (n);i++)
using namespace std;
using ll = long long;
using pii = pair<int,int>;

const int INF = 2e9;

int main(){
    int n;
    cin >> n;
    vector<int> f(n,0);
    for(int x = 1;x*x <= n;x++){
        for(int y = 1;y*y <= n;y++){
            for(int z = 1;z*z <= n;z++){
                int t = x*x + y*y + z*z + x*y + y*z + z*x;
                if(t <= n)f[t-1]++;
            }
        }
    }
    rep(i,n){
        cout << f[i] << endl;
    }
}

```

解くのにかかった時間：25分41秒
感想：ifで条件をつけないと実行時エラーが発生した。


##[AtCoder Regular Contest 105_B](https://atcoder.jp/contests/arc105/tasks/arc105_b)

```c++

#include <bits/stdc++.h>
#define rep(i,n) for(int i = 0;i < (n);i++)
using namespace std;
using ll = long long;
using pii = pair<int,int>;

const int INF = 2e9;

int main(){
    int n;
    cin >> n;
    ll res = 0;
    rep(i,n){
        ll a;
        cin >> a;
        res = gcd(res,a);
    }
    cout << res << endl;
}

```

解くのにかかった時間：40分21秒
感想：ユークリッド互除法を復習してみるか…


###最後に
茶色に近い問題も簡単に解けるようにしておきたい
イラレで彩度が変更されていても色（16進数）を取得する「1クリック対処法」

# どうも7noteです。デザインからコーディングする時の彩度の問題の解決方法。


***「ちゃんとイラレのカラーピッカーの数値をコピーしたのに違う色になった！」***


## 1クリックで解決できます


![saido.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/b25a85fd-94d4-8f79-44d8-19b61d81d51d.jpeg)
（これをイラレのカラーピッカーで見ても#FF0000になる）

この**「プロセスカラー（クリックして変換）」**という四角いアイコンをクリックするとなんと、**彩度を考慮した16進数*に変換されます。**

**－－－－－－変換後－－－－－－－－－－－－**

![change.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/ad80c6ce-e30e-0c29-ca2d-849706ff2a29.png)
（#FF0000の彩度10%は、16進数に直すと#FFE5E5になった）


## まとめ

地味に厄介な彩度の調整。いままで別のカラーピッカーソフトなどでわざわざ色を取得していましたが、**イラレ上で1クリックで変換できる**とは知りませんでした。Adobeさんさすがです、脱帽ものですこれは。

## めんどくさがりの人はカラーピッカーアプリ（ソフト）を使う方法も便利なのでお試しあれ

- windowsでおすすめは「[カラーピッカー(Color Picker)](https://www.vector.co.jp/soft/win95/art/se350616.html)」
- macでおすすめは「[DigitalColor Meter](https://qiita.com/awakia/items/778a02d03f71082e6449)（標準ソフト）」

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】HTML・CSSのちょいテク詰め合わせ](https://qiita.com/7note)
AWS でサーバー構築、アプリをデプロイ①

# 概要
簡単にAWSでサーバー構築をしてアプリケーションをデプロイさせる
今回は ネットワークの構築 まで進めようと思います！

# リージョンの変更

```
右上のリージョンから 「アジアパシフィック(東京)ap-northeast-1」 に変更
```

# VPC領域の作成

VPC とは（Virtual Private Cloud）の略
VPC を作成すると ユーザー毎に隔離されたネットワーク空間が作れます

AWS上のVPC領域はプレフィックス長が16以上を指定する必要があるので
CIDR ブロックは 10.0.0.0/16 にする必要がある

```
トップ画面 から 「VPC」 を選択
「名前タグ-オプション」 ：好きな名前を入力
「IPv4 CIDR ブロック」： 今回は 「10.0.0.0/16」
「IPv6 CIDR ブロック」： 「IPv6 CIDR ブロックなし」 を選択
「テナンシー」：デフォルト を選択（専有にすると追加料金がかかる）
「VPCを作成」 を選択
```

# サブネットの分割

CIDRブロックを更に小さく分割して使うのが一般的であり、細分化されたブロックを「サブネット」と呼ぶ
今回は「/16」で作成したブロックを「/24」の大きさで256分割にする

```
「VPC ダッシュボード」 から 「サブネット」 を選択
「サブネットの作成」 を選択
「VPC ID」 から 先ほど作成した「VPC」を選択
「サブネット名」： 好きな名前を入力
「アベイラビリティーゾーン」： 指定なし
「IPv4 CIDR ブロック」： 今回は 10.0.1.0/24 を指定
「サブネットを作成」 を選択
```

# インターネットゲートウェイ

サブネットをインターネットに接続するには、「インターネットゲートウェイを設定する必要がある

```
「VPC ダッシュボード」 から 「インターネットゲートウェイの作成」 を選択
「名前タグ」： 好きな名前を入力
「インターネットゲートウェイの作成」 を選択
VPCアタッチ画面が表示されるので 作成した「VPC」を選択
```

# ルートテーブルの作成

宛先IPアドレスの値により、どのネットワークに流すべきか区別する設定

```
「VPC ダッシュボード」 から 「ルートテーブルの作成」 を選択
「名前タグ」： 好きな名前を入力
「VPC*」： 作成した「VPC」を選択
「作成」を選択
```

# ルートテーブル（インターネットゲートウェイ）の設定

```
作成したルートテーブルを選択
「ルートタブ」 を選択し、 「ルートの編集」を選択
「ルートの追加」 から 
送信先：「0.0.0.0/0」
ターゲット：「internet Gateway」を選択すると 作成されたインターネットゲートウェイが表示される
```

# ルートテーブル（サブネット）の設定

```
作成したルートテーブルを選択
「サブネットの関連付け」 を選択し、 「サブネットの関連付けの編集」を選択
作成したサブネットを選択し、「保存」
```

今回はネットワークの設定まで終わったので
続きは次の章で説明しようと思います
Accessファイルを開発者モードで開く方法

#なんで開発者モードで開くん？
例えばこんなことを防ぐためです。
1. 最初に開くフォームが設定してある。
2. そのフォームには開いた時に自動で処理する『何か』がプログラムしてある。
3. 何も知らずに普通に開いて『何か』が実行され、データベースやファイルが意図せず更新 or 削除されてしまった！

開発者モードで開けば『最初の処理』が走らない。
けど、開発者モードで開いたからといって、下図を押したら『最初の処理』走り始めちゃうから注意。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/b3780a11-d1c9-b5e1-470b-2362dd4ac456.png)
設定やソースコード見て、適宜コメントアウトするなりしてから『コンテンツの有効化』をした方がよいです。


#開発者モードで開くやりかた
**Shift押しながらファイルをダブルクリックで開く！**
開ききるまでShift押しっぱ！
ただそれだけ！


#蛇足
他の人が作ったものは警戒に値するぜ…(´・ω・`)

特にタスクスケジューラーからキックされてる奴は要注意。

とにかく得体のしれないやつは開発者モードで開く！


#バージョン
Windows10 Pro バージョン1909 OSビルド19042.630
Access for Microsoft 365 MSO（16.0.13328.20334）32ビット
TerraformでAmazon API Gatewayを構築する(リソースポリシー編)

# はじめに
API Gateway＋Terraform記事第4弾。
[TerraformのAWSプロバイダの3.16.0](https://github.com/hashicorp/terraform-provider-aws/blob/master/CHANGELOG.md#3160-november-18-2020)で2020/11/18にリソースポリシーの Terraform リソースが使えるようになったので、今回は、IPアドレスによる制限をさっそく試してみる。

# Terraform
とはいっても、普通にIAMポリシーを書くだけである。

Condition(IpAddress)を使って許可をしてするよう、こんな感じで定義しよう。

```HCL
resource "aws_api_gateway_rest_api_policy" "test" {
  rest_api_id = aws_api_gateway_rest_api.test.id
  policy      = data.aws_iam_policy_document.test.json
}

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

    principals {
      type = "*"
      identifiers = [
        "*",
      ]
    }

    actions = [
      "execute-api:Invoke",
    ]

    resources = [
      "arn:aws:execute-api:${data.aws_region.current.name}:${data.aws_caller_identity.self.account_id}:${aws_api_gateway_rest_api.test.id}/*",
    ]

    condition {
      test     = "IpAddress"
      variable = "aws:SourceIp"

      values = [
        "xxx.xxx.xxx.xxx/32",
      ]
    }
  }
}
```

なお、```resources``` の部分については、[AWS公式の開発者ガイド](https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/apigateway-resource-policies-examples.html)では、```execute-api:/[ステージ名]/[メソッド]/[リソース名]``` にすれば良い感じに ARN に変換してくれるよ、と書いてあるのだが、良い感じに変換してもらえるがために、毎回 Terraform の差分として検出されるようになってしまうため、素直に↑のように ARN 形式で書いておこう。 

"*" の部分については、上記の通り ```[ステージ名]/[メソッド]/[リソース名]``` で書くことも可能。

これで許容されていないIPアドレスでアクセスすると、

```JSON
{"Message":"User: anonymous is not authorized to perform: execute-api:Invoke on resource: arn:aws:execute-api:ap-northeast-1:************:xxxxxxxxxx/prod/GET/xxxxxxxx"}
```

な感じでエラーが応答される。

[アクセスログを設定している場合](https://qiita.com/neruneruo/items/b1eb81e3a1ec5b354f4c)は、以下のように 403 応答を返したログが出力される。

```
{
    "requestId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    "ip": "xxx.xxx.xxx.xxx",
    "caller": "-",
    "user": "-",
    "requestTime": "26/Nov/2020:13:51:55 +0000",
    "httpMethod": "GET",
    "resourcePath": "/xxxxxxxx",
    "path": "/prod/xxxxxxxx",
    "status": "403",
    "protocol": "HTTP/1.1",
    "responseLength": "168",
    "integrationLatency1": "-",
    "integrationRequestId": "-",
    "integrationStatus1": "-",
    "integrationErrorMessage": "-",
    "integrationLatency2": "-",
    "integrationStatus2": "-",
    "responseLatency": "1",
    "errorMessage": "User: anonymous is not authorized to perform: execute-api:Invoke on resource: arn:aws:execute-api:ap-northeast-1:************:xxxxxxxxxx/prod/GET/xxxxxxxx"
}
```

あとは、[AWS公式の開発者ガイド](https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/apigateway-resource-policies-create-attach.html)に書いてある

> API 作成後にリソースポリシーを更新する場合は、更新後のポリシーをアタッチしてから API をデプロイし、変更を伝達する必要があります。ポリシーのみ、更新または保存した場合、API のランタイム動作が変更されることはありません。API のデプロイの詳細については、「Amazon API Gateway での REST API のデプロイ」を参照してください。

が注意点といったところか。

これで、API Gatewayをよりセキュアに運用できるようになった！
【AWS】Windows10にAWS-CLI ver.2をインストールしてみた

#はじめに
AWSを勉強するために、ノートPCにAWS-CLIをインストールしてみたので、備忘として残しておきます。

###PCスペック
* OS：Windows 10 Home(バージョン　20H2(OSビルド　19042.630))
* CPU：Intel Core i7-10510U 1.80GHz(2.30GHz)
* RAM：16.0GB

#目次
1. インストール
2. 設定

#1. インストール
基本的には以下の公式サイトの通りインストールを進めればOKです。
[Windows での AWS CLI バージョン 2 のインストール、更新、アンインストール](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-cliv2-windows.html)

##前提条件
インストールする前に事前に以下の確認が必要です。
* 64ビットバージョンのWindows XP以降のOS
* ソフトウェアインストール用の管理者権限

##MSIインストーラをダウンロードする
最新版のインストーラをダウンロードします。
※特定のバージョンが欲しい場合はバージョンを指定してください。(公式サイトのリンクを参照してください。)
[CLIv2(最新版)のインストーラ](https://awscli.amazonaws.com/AWSCLIV2.msi)

##インストールする
ダウンロードしたMSIインストールを実行し、ウィザードに沿ってインストールを進めます。
インストールが完了したら、スタートメニューからコマンドプロンプト(cmd)を開き、以下のコマンドを入力して確認します。

```
aws --version
```
>aws-cli/2.1.4 Python/3.7.9 Windows/10 exe/AMD64

のように出力されればOKです。

インストールはこれだけです。
非常に簡単にインストールが出来ました。


#2. 設定
インストールが完了したら、AWSに接続できるように諸々の設定を行います。
ここからは実際にコンソール画面から必要情報を取得したり、それをCLIのconfigに設定していきます。

##アクセスキー/シークレットキーの取得
AWSコンソール画面から、IAMを検索しIAMサービスページに遷移してください。

IAMページから「アクセス管理」＞「ユーザー」を選択してください。

任意の(CLIで利用したい)ユーザーを選択し、タブから「認証情報」を選択してください。

「アクセスキー」の欄にある、「アクセスキーの作成」ボタンを押します。
※アクセスキーとシークレットキーは絶対に外部に出ないように注意してください。

アクセスキー/シークレットキーがcsvファイルでダウンロードされます。
これを用いてCLIに設定をしていきます。

##CLIの設定
スタートメニューから「cmd」を起動し、以下のコマンドを入力してください。

```
C:\> aws configure
AWS Access Key ID [None]:取得したアクセスキーを入力
AWS Secret Access Key [None]:取得したシークレットキーを入力
Default region name [None]:デフォルトで使用するリージョンを入力(東京の場合は、ap-northeast-1)
Default output format [None]:出力フォーマットを入力(json,yaml,yaml-stream,text,tableのいずれかを入力(今回はjsonを指定)。変更も可能)
```
出力フォーマットの説明は以下の通りです。(2020/11/26時点)
実行コマンドに\--outputオプションを指定すれば、コマンド実行時に変更もできます。

|形式|説明|
|:---|:---|
|json|JSON 文字列形式で出力されます。|
|yaml|YAML 文字列形式で出力されます。（AWS CLI バージョン 2 でのみ利用できます。）|
|yaml-stream|出力はストリーミングされ、YAML 文字列としてフォーマットされます。ストリーミングにより、大きなデータ型の処理を高速化できます。（AWS CLI バージョン 2 でのみ利用できます。）|
|text|複数行のタブ区切り文字列値の形式で出力されます。これは、grep、sed、または awk などのテキストプロセッサに出力を渡すのに役立ちます。|
|table|セルの罫線を形成する文字列 +&#124;	- を使用して表形式で出力されます。通常、情報は他の形式よりも読みやすい「わかりやすい」形式で表示されますが、プログラムとしては役立ちません。|


##接続確認
cmdにて接続できるか確認してみます。
今回は、IAMユーザーの一覧を表示するコマンドを実行します。

```
C:\>aws iam list-users
{
  "Users":[
       {
         ...ここに作成済みのユーザが表示されます。
       }
   ]
}
```
と出力されれば完了です。

S3バケットの確認コマンドも念のため実行しておきます。

```
C:\>aws s3 ls
```
作成済みのS3バケットが表示されれば完了です。


##プロファイル設定
CLIではプロファイルと呼ばれる設定のコレクションがあります。
デフォルトでは「default」プロファイルを使用しますが、実行コマンドに\--profileオプションを指定すれば、作成済の各プロファイルにて実行が可能になります。

###プロファイル作成
基本的に先ほどの設定手順と同じです。
今回は「devuser」というプロファイルを作成してみます。
出力フォーマットを変更してもらえると、差がわかりやすいかと思います。(json⇒textに変更しました。)

```
C:\> aws configure --profile devuser
AWS Access Key ID [None]:取得したアクセスキーを入力
AWS Secret Access Key [None]:取得したシークレットキーを入力
Default region name [None]:デフォルトで使用するリージョンを入力(東京の場合は、ap-northeast-1)
Default output format [None]:出力フォーマットを入力(json,yaml,yaml-stream,text,tableのいずれかを入力。変更も可能)
```
設定を確認してみます。

```
C:\>aws iam list-users --profile devuser
USERS arn:...
```
先ほどと表示されるフォーマットが変わっていれば完了です。

#さいごに
今回は、Win10端末にAWS CLI2をインストールし、接続確認までを行いました。
今後CLIを用いた構築などを更新していければと思います。
また、CLIについてのユーザーガイドは以下をご確認ください。
[AWS コマンドラインインターフェイスのドキュメント](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-chap-welcome.html)
MySQL 文字コードによるINSERT時のエラー(ERROR 1366 (HY000):....)

# はじめに
Dockerを使用して立てたMySQLのコンテナ上に自分以外の方がNestJSとtypeORMで書いてくれたmigrationコードを実行してデータベースを構築したところダミーデータ作成時に日本語の部分が以下のエラーで弾かれました。
``` ERROR 1366 (HY000): Incorrect string value:``` 
このエラーに対してどのように対処したかの一例を述べます。 (ぽんこつすぎて６時間もってかれましたー。。。)

ここで紹介するのはデータベースの文字コードを変えて再起動するだけでは解決できなかった事例です。   
使用していたdocker-compose.ymlファイル
作成したデータベースの情報がコンテナremove時に失われないようにローカル環境に保持されるようにvolumesを設定しています。

```
version: '3'

services:
  mysql:
    image: mysql:5.7
    volumes:
      - "./mysql:/var/lib/mysql"
    restart: always
    environment:
      - MYSQL_ROOT_PASSWORD=設定するパスワード
      - MYSQL_DATABASE=データベース名
    ports:
      - 3306:3306

   
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=mysql
      - PMA_USER=root
      - PMA_PASSWORD=設定するパスワード
    ports:
       - 8080:80
    volumes:
       - /sessions

```
# とりあえず詳しいこと抜きで解決した方法
1. MySQL初期設定用のmy.cnfを文字コードがutf8mb4で動作するように記述し作成し任意の場所に配置     
2. 作成したmy.cnfがdocker-compose.ymlでコンテナ上の/etc/my.cnfとして配置されるようにvolumesを記述
3. エラーが発生しているデータベースを削除
4. 同名データベースを作成
5. migrateを実行(ここはmigrateコードなどの自動生成コードを作っていない場合はもう一度地道にテーブルを作り直してください)


# やったこと

[Dockerの公式MySQLの文字コードをutf8mb4に設定する]
(https://qiita.com/Suzuki09/items/c05664c7c0c08a19cebe)

↑の記事を参考にした

こちらの記事では、commandでmysqldを実行するように書いてあるがここでもエラーが出て実行できなかった。
どうやらmysqldコマンドはrootユーザーでは使用できないようです。なのでちょっとめんどくさかったですが、my.cnfを作業ディレクトリで作成しvolumesで紐付け"my.cnf:/etc/my.cnf" でローカルに作成したmy.cnfをコンテナ上に配置するようにしました。
とりあえず/etcの下に配置すれば動作する感じです。

my.cnfの内容で必須なのはcharacter-set-serverとdefault-character-setっぽい

尚、上の記事を参考に作成したmy.cnfではうまく動かなかったです。なので結局参考にしたのはこれ
[MySQLで文字コードを直す時のmy.cnfの書き方 - 鶏口牛後な日々](https://tacosvilledge.hatenablog.com/entry/2018/10/26/174045)
結果的に作成したmy.cnfは以下のとおりです。

```
[mysqld]
character-set-server=utf8mb4
explicit-defaults-for-timestamp=1
general-log=1
general-log-file=/var/log/mysql/mysqld.log

[mysql]
default-character-set=utf8mb4
```
出来上がったdocker-compose.ymlは以下の通り

```bash
version: '3'

services:
  mysql:
    image: mysql:5.7
    volumes:
      - "./mysql:/var/lib/mysql"
      - "./my.cnf:/etc/my.cnf"  　　　　　  ←---　これを追加しました！
    restart: always
    environment:
      - MYSQL_ROOT_PASSWORD=設定するパスワード
      - MYSQL_DATABASE=データベース名
    ports:
      - 3306:3306

   
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=mysql
      - PMA_USER=root
      - PMA_PASSWORD=設定するパスワード
    ports:
       - 8080:80
    volumes:
       - /sessions

```

すでにデータベースを作成しているときはデータベース自体に文字コードを設定してしまっておりMySQLの設定を変更しても適用されないため、データベースの設定を変更する

[MySQLの日本語文字化け回避！文字コードを確認＆変更する方法 | サービス | プロエンジニア](https://proengineer.internous.co.jp/content/columnfeature/6653)

これをやってもまだ動かなかった

データベースのテーブルを確認するとcollationが例のutf8じゃないやつになっていた。
なので、データベース自体を一度ドロップしてデータベースからテーブルまですべて削除し、migrate(データベースとテーブルの作成)しなおしたところcollationが変更され日本語がINSERTできるようになりました。

# まとめ
データベースの初期設定さえしっかりやっていればこんなことにはならなかったですね。。。
とりあえず、dockerでも自身のコンピュータのOS上でもMySQLなりpostgressなり動かす場合にはデータベースやらテーブルやらを作成する前にプロジェクトにあったもの(日本のプロジェクトの場合はだいたいutf8でしょうか)の初期設定を行ってはならないということですね。
サーバー環境でsvgを表示させる方法。

## ローカルで表示されていたsvgが、サーバー環境で表示されないとき。

xfreeのサーバーでアップロードし作成したサイトを見たときsvgの部分だけ表示出来ませんでした。(他のpngとかは問題なし)

画面でいうとこんな感じです。

![スクリーンショット 2020-11-26 22.58.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/bdb75787-8aa0-684e-f7ad-cdf004439d85.png)

最初はアセットパイプラインかなんかが影響してるのかなって思ったのですが、調べていると<font color="red">**拡張子のメタ情報が追加されてないことが原因**</font>とわかりました。

実際には以下のコードを.htaccssに追加し、svgをサーバー環境で認識させました。

```html
AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz
```
これで無事SVG画像が表示されました。

![スクリーンショット 2020-11-26 23.02.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/8f2c6fbe-2079-9ffe-e8ec-dea11cfdb9f1.png)

ちなみにAddTypeとAddEncodingを調べてみましたが、AddTypeがメタ情報に.svgと.svgzを認識させるコードで、AddEncodingが.svgzがgzipである事を認識させるコードらしいです。

## 補足
.htaccess(ドット　エイチティ　アクセス)はwebサーバーの動作制御系のファイルです。

サーバーのhome dir(ホームディレクトリ)配下に配置します。
※ホームディレクトリとは基本的にはエントリーポイントであるindex.htmlが設置されている階層のことです。
cloud9でrails sを終了せずに閉じてしまった時の対処法

#はじめに
cloud9でrails sを終了せずにターミナルを閉じてしまいました...
再度rails sをするとこんなエラーが...

```
 A server is already running. Check /home/ubuntu/environment/[フォルダ名]/tmp/pids/server.pid.
```
pidファイルを開いてみるも５桁の数字が記載されているだけ...
下記の記事を見つけて再起動するも上手く行かず。

[A server is already running 対処方法【Rails】](https://qiita.com/uloruson/items/78b0d2d5c30a1f79fc02)

pidファイルを削除しようとするもファイルツリーから見つけられず...
上記エラー文から開いたpidファイルの数字を削除して再度rails sしました。
すると今度は違うエラー文...

```
Address already in use - bind(2)
```

#解決法
下記の記事通り
[Cloud9上でRails sをしてA server is already runningが出た時の対処法
](https://qiita.com/mannaka/items/e6955a0268e630b3e0dc)

```
$ kill -9 数字(pidファイルに記載)
```
で済むはずなんですが、今回は数字を消してしまったので...

```
$ killall -9 ruby
```
で解決しました🎉

参考:[Address already in use - bind(2) when starting server in Cloud9 IDE](https://stackoverflow.com/questions/38042981/address-already-in-use-bind2-when-starting-server-in-cloud9-ide)
Firebase Cloud Firestore覚え書き Kotlin

#ドキュメントへの参照
単一の場合は`DocumentReference`
複数の場合は`CollectionReference`または`Query`

#ドキュメントの取得
`get()`関数を使用してドキュメントを取得する。

#Snapshotって何？
取得された中身。

#コレクションから複数のドキュメントを取得
1回のリクエストで複数のドキュメントを取得する。
`where()`を使用することで、特定の条件を満たすすべてのドキュメントを取得できる。（一般的なRDB的な使い方）
取得される順番はドキュメントIDの昇順。

```kotlin
db.collection("cities")
        .whereEqualTo("capital", true)    // whereフィルター
        .get()
        .addOnSuccessListener { documents ->
            for (document in documents) {
                Log.d(TAG, "${document.id} => ${document.data}")
            }
        }
        .addOnFailureListener { exception ->
            Log.w(TAG, "Error getting documents: ", exception)
        }
```

#サブコレクションの取得
`getCollections()`メソッドを使用すると、ドキュメント参照のすべてのサブコレクションの一覧を取得できる。

#クエリの制限
##`OR`は使用不可
`OR`条件ごとに独立したクエリを作成し、アプリでクエリ結果を結合する必要がある。
##`!=`は使用不可
`whereGreaterThan`と`whereLessThan`を結合することで、同じ結果をセットする。
##複数のフィールドの範囲フィルタは不可
有効な例

```kotlin
citiesRef.whereGreaterThanOrEqualTo("state", "CA")
        .whereLessThanOrEqualTo("state", "IN")
citiesRef.whereEqualTo("state", "CA")
        .whereGreaterThan("population", 1000000)
```

無効な例

```kotlin
citiesRef.whereGreaterThanOrEqualTo("state", "CA")
        .whereGreaterThan("population", 100000)
```

#取得した値をリスト形式で表示させるために
関数を使用して、getした値をmapで渡す。

```kotlin
    suspend fun getList(): List<String?> {
        val response = db.collection("user")
            .get()
            .await()
        return response.documents.map { it.getString("name") }
    }
```

#データのあるなしは確認する
データの有無に関わらず、Snapshotは返ってくるので、データがあるかどうかの確認はする。

#ドキュメントを作成し、サブコレクション作成後フィールドを追加する

```kotlin
db.collection("teams")
  .document()
  .collection("users")
  .add(User(10, "hoge"))
```
2020年のReact.js 環境構築から公式チュートリアルをやって習得するまで

実際 Reactは長い歴史のなかで記述方法の変化、重要な機能が追加されつづけてきました。
そのすすんだ要素もふくめて、どうやって勉強するのがよいか、書いてみました。

基本的には公式のチュートリアルをうまく組み合わせて勉強すればよいと思うのですが、
最新の情報は分散されているような気がするのでまとめてみました。

## step.0 まずは環境準備

何はともあれ、node をインストールする必要があります。
node.js は頻発に バージョンアップがはいるため、nvm で管理しましょう。

### nvm
https://github.com/nvm-sh/nvm#installing-and-updating

### nvm for windows の導入方法
https://docs.microsoft.com/ja-jp/windows/nodejs/setup-on-windows


#### Create React Appで勉強環境を構築
勉強をするためのアプリケーションを作れるようになりましょう。

Create React App は手軽に開発環境をつくれると同時に、
React開発のベストプラクティスがたくさんつめこまれています。

https://ja.reactjs.org/docs/create-a-new-react-app.html

Typescript はこちら
https://create-react-app.dev/docs/adding-typescript/

#### VSCodeの導入
エディタは自由なのですが、有望なフレームワークのほとんどがVSCodeをサポートしている状況なので
慣れておくと有意に習得が進みます。

https://code.visualstudio.com/

### Step.1 React Tutorial の実施
まずは React の基本である State, Props, Event を下記のチュートリアルで体験しましょう。
https://ja.reactjs.org/tutorial/tutorial.html

わからないところは公式ドキュメントやGoogleで調べながらすすめます。

### Step.2 React Hooks
次に現代のスタンダードになりつつある React Hooksを学びましょう。

React Hooks
https://ja.reactjs.org/docs/hooks-overview.html

概要を掴んだら、次は Step.1 のコードを React Hooks に書き直してみましょう。
その過程でわからなくったら公式ドキュメントを読みましょう。
終わる頃には半分ぐらいは理解できるようになっていると思います。

### Step.3
次は TypeScript です。
使うか使わないかはわかれると思いますが、スタンダードになりつつあります。

TypeScript がはじめての人は下記をみてどうゆうものか把握します。5分で読めます。
英語なのでグーグル翻訳にかけると読みやすいです。

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

大枠掴んだら、React でどう使うのかを下記で把握します。

Typescript の書き方はバージョンアップやユーザのアイディアにより日々進化します。
react-typescript-cheatsheetにそのグッドプラクティスが集まっています。
少し難しくてもこのサイトの内容で覚えtmoraeru

React Typescript
https://react-typescript-cheatsheet.netlify.app/docs/basic/setup

#### Step.2 で作成した Hooks のアプリを TypeScript に書き換える

わからないところは react-typescript-cheatsheet を参考にしながらすすめます。


## Step.4 Material UI

Material UI を学習します。
なぜ Material UIを学ぶべきかという、Material UI のサイトにはExampleが豊富にあり、
そのコードがとても良いからです。

アップデートも頻繁にされており、バージョンアップするたびに Example みてるだけで、
こんな書き方ができるのかと今でも学びがあります。

https://material-ui.com/

最初からこういったコードをみておくのは習得の近道だとおみます。

また、css などの書き方も MaterialUIのコードがとても参考になると思います。

### Step3 で作成したアプリを Material UI を使って便利にする。

その過程でMaterial UI のドキュメントやサンプルコードをたくさんみると思います。
そのなかでよりすすんだ書き方を習得できると思います。

## Next Step

- Redux
- Styled Components
G検定（2020 #3）合格体験記

日本ディープラーニング協会(JDLA)が主催する2020年 第3回 G検定（ジェネラリスト検定）に合格しました。G検定はどのような試験で、合格までどうやって勉強をしたのかを解説します。

##G検定の概要
ディープラーニングの基礎知識やAI活用に関する知識について問われる試験です。
日本ディープラーニング協会(JDLA)が主催しています。詳細は、[公式ページ](https://www.jdla.org/certificate/general/)を参照してください

##受験動機
筆者はこんな人です。

* SIer勤務のシステムエンジニア。
* 最近の仕事はRPAやAIサービスを使った業務改善コンサルティング

AIサービスや製品の知識はあるものの、AIの仕組み（アルゴリズムとか）についてはイマイチ知らなかったので、AIについて体系的に知識を学びたかったのが受験動機でした。資格を取ることでコンサルとして少しでも箔を付けようという浅はかな考えもありました。また、普段からAIサービスに触れていたのもあって、サクッと合格できるでしょ！とか思ってました。

##試験対策
普段からAIについて勉強していたので、G検定に向けた勉強はあまりしていません。試験対策としては、問題集を解いて、わからないところを調べて、、の繰り返しです。最終的に、問題集は答えをほぼ暗記してしまったので、模擬試験（無料）を別に受けて、誤答した箇所を詳細に調べることで自分の汎化性能を上げました。

* 普段から
    * Pythonでプログラムを組みながらAIの仕組みを勉強
        * [ゼロから作るDeep Learning ―Pythonで学ぶディープラーニングの理論と実装](https://www.amazon.co.jp/ゼロから作るDeep-Learning-―Pythonで学ぶディープラーニングの理論と実装-斎藤-康毅/dp/4873117585/)
        * [ゼロから作るDeep Learning ❷ ―自然言語処理編](https://www.amazon.co.jp/ゼロから作るDeep-Learning-―自然言語処理編-斎藤-康毅/dp/4873118360/)
    * 数学（微分や行列計算など）の勉強しなおし
        * [統計WEB](https://bellcurve.jp/statistics/)
    * 業務で触っているAIサービスについて、ニュースサイト等で動向をウォッチ。
        * [AINOW](https://ainow.ai)
* G検定の試験対策（２週間ほど。1日あたり1-2時間）
    * 公式ページのシラバスを確認
    * 以下の書籍で『ゼロから作るDeep Learning』に記載がない部分を補完
        * [深層学習教科書 ディープラーニング G検定(ジェネラリスト) 公式テキスト](https://www.amazon.co.jp/dp/4798157554/)
        * [ＡＩ白書　２０２０](https://www.amazon.co.jp/ＡＩ白書-２０２０-単行本-独立行政法人情報処理推進機構-AI白書編集委員会-ebook/dp/B085RKWNPB/)
    * 試験対策問題集を使って、間違えたところや知識が曖昧な所を重点的に再確認。
    * 問題集は最近出版されたものにしてみました。
        * [最短突破　ディープラーニングG検定（ジェネラリスト）](https://www.amazon.co.jp/最短突破-ディープラーニングG検定（ジェネラリスト）-問題集-高橋-光太郎-ebook/dp/B08JSLKQ27/)
            * 強化学習関連（Q学習とか）
            * BERTやGTP-3など、比較的新しいモデルについて
    * 模擬試験（無料）を実施、間違えたところを重点的に再確認
        * [Study-AI](https://study-ai.com/generalist/)

##実際に受験してみて

試験は公式テキストに書いてないことが普通に出題されます。そして問題集や模擬試験の問題がそのまま出ることはほとんどありません。AIについて、幅広く、本質的かつ体系的に理解をしていることが求められていると感じました。

* 第３回G検定について
    * 2020年11月7日（土）13:00-15:00（120分）オンライン開催
    * 全194問で、設問はすべて選択式
* 出題内容
    * 範囲は公式ページのシラバス通り
    * 筆者の体感では、機械学習やAI周りの問題は６割ほどで、残りは、倫理、法律、時事問題などから出題
    * 倫理・法律の問題がやけに多い印象

##アドバイス
G検定試験対策としては、小手先の対策よりも正攻法が１番だと思います。

###過学習せず、汎化性能を上げる
公式テキストの問題や、問題集の丸暗記は無駄です。理解度のチェックに使いましょう。学習→理解度を検証→再学習→・・・の繰り返しです。

###AIを活用するための知識を身につける
倫理や法律、時事問題に関する出題が多いのは、AI活用にあたって必要な知識だからだと思います。機械学習やAIの技術に関する知識だけではAIをビジネスで活用できません。
また、AIの業界は変化が激しく、普段から業界動向をチェックしておいた方がいいでしょう。

##おわりに
普段からAIに関する勉強はしていましたが、受験を通してAIの仕組みから活用まで体系的に知識を身につけることができました。実業務でもAIを活用したいという相談が増えていますが、G検定の学習を通して身に付けた知識が実業務でも役立っていると感じており、受験してよかったと思います。
本稿がこれからG検定を受験する人の助けになれば幸いです。
【CSS】ロード時にページ全体をフェードインしたい

私の備忘録です。
まだまだ初心者の私ですが、
ポートフォリオの野暮ったさが少しでも無くなるかもしれないフロント実装の一つとして
<font color="SlateBlue">ロード時にページ全体を、真っ白な画面から徐々に再生させる</font>（フェードインさせる）という実装をしました。

##ロード時にページ全体をフェードインしたい
単純に、以下のコードをCSSファイルに追記です。

```css:index.css
 1 .all {
 2   animation: fade 3s;
 3 }
 4 
 5 @keyframes fade {
 6   0% {opacity: 0;
 7   }
 8   100% {opacity: 1;
 9   }
10 }
```

##個別の解説

###「fade」キーフレームを.all（``<body>``でも可）に適用し、3秒で再生するように指定。
※再生するまでの秒数はお好みで！

```css:index.css
 1 .all {
 2   animation: fade 3s;
 3 }
```
---
###「fade」キーフレームの設定。

```css:index.css

 5 @keyframes fade {

10 }
```
---
###始点（0%）の不透明度opacityを「0」に指定。

```css:index.css
 6   0% {opacity: 0;
 7   }
```
---
###終点（100%）の不透明度opacityを「1」に指定。

```css:index.css
 8   100% {opacity: 1;
 9   }
```
Xcode 12 + XcodegenでCycle Inside ______エラーでテストターゲットがビルド通らない問題

# 問題
```
Cycle inside <redacted>Tests; building could produce unreliable results. This usually can be resolved by moving the shell script phase '[CP] Embed Pods Frameworks' so that it runs before the build phase that depends on its outputs.
Cycle details:
→ Target '<redacted>Tests' has copy command from '/Applications/Xcode12.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Library/PrivateFrameworks/XCTAutomationSupport.framework' to '<redacted>/Library/Developer/Xcode/DerivedData/<redacted>-bxjgdjscysiavpfrzmquaqdkncsl/Build/Products/Debug-iphonesimulator/<redacted>.app/Frameworks/XCTAutomationSupport.framework'
○ Target '<redacted>Tests': CodeSign <redacted>/Library/Developer/Xcode/DerivedData/<redacted>-bxjgdjscysiavpfrzmquaqdkncsl/Build/Products/Debug-iphonesimulator/<redacted>.app/PlugIns/<redacted>Tests.xctest/Frameworks/CryptoSwift.framework
○ That command depends on command in Target '<redacted>Tests': script phase “[CP] Embed Pods Frameworks”
```

Xcode 12にアップデートした後にテストターゲット実行してみたら上記のエラーがでまくっていました😭

色々調べてみて以下のStackOverflow issue見つかって
https://stackoverflow.com/questions/64556134/xctest-running-tests-fails-with-cycle-inside-x-building-could-produce-unreliab
なるほど〜ってなったけど。。。🤔

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147278/5fcc79d5-5def-9344-1fb3-acc608b31a0f.png)

Xcodegenでプロジェクト生成しているためチェック外してもxcodegen走るたびに外さないといけなくなってしまう。。。

もしXcodegenでできる方法知っている方いたら教えて欲しいけど自分が探しても何もなくて以下の作戦で解決できました

# フィックス
Xcodeproj to the rescue!
https://github.com/CocoaPods/Xcodeproj

こちらのスクリプトだけで簡単に外せた

```ruby
require 'xcodeproj'
project_path = './Project.xcodeproj'
project = Xcodeproj::Project.open(project_path)

project.targets.select{ |target| target.name == "Unit Tests" }.each do |target|
    target.build_phases.select{ |phase| phase.display_name == "Embed Frameworks" }.each do |phase|
        phase.files.each do |file|
            file.settings["ATTRIBUTES"].delete("CodeSignOnCopy")
        end
    end
end

project.save()
```

これでブランチ切り替わった後に以下の感じでフックされるように設定
xcodegen generate
pod install
no-codesign-script.rb (なぜかpost-installに入れたら上手く行かなかった🤔)
PRPreviewViewControllerの再生が一回しかできない

ReplayKitでの画面収録をプレビューするPRPreviewView。
再生ボタンが最初の１回しか表示されない、と思ったら、モーダル表示した時に、再生・停止ボタンとActivityボタンが画面の下に切れてしまっていた。
フルスクリーンでモーダル表示すると、全部表示されます。

```swift
let sharedRecorder = RPScreenRecorder.shared()

..........


sharedRecorder.stopRecording(handler: { (previewViewController, error) in
    previewViewController?.previewControllerDelegate = self
    previewViewController?.modalPresentationStyle = .overFullScreen // このラインをプラス
    self.present(previewViewController!, animated: true) {
    }
})
```

🐣
****

お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
アウトプット　自分用

link_toについて

<% link_to(post.content,"/posts/#{post.id}")%>
これはpost.contentに触れたら/posts/#{post.id}に飛ばされるという意味

/posts/#{post.id}とは何か？
post.idのidはカラムのやつ
投稿したときにcontent(投稿の内容)とid(投稿の番号)がpostsテーブルに反映される。
/posts/３　　　とかにURLになる。


ちなみに#{post.id}のpostはeachに作られた変数post
【Java】BigDecimalの四捨五入や切り捨て・切り上げの方法

#プログラミング勉強日記
2020年11月26日
BigDecimalクラスを使うことで四捨五入や切り捨・切り上げはできるけど、これによって誤差(丸め誤差)が生じてしまうので、その解決方法も一緒に紹介する。

#BigDecimalクラスとは
　小数点以下の値に誤差が出ないよう正確に計算するために使う。小数点以下の四捨五入や切り捨て・切り上げといった処理を行うことができる。BigDecimalクラスを使用するためには`java.math.BigDecimal`パッケージをインポートする必要がある。
　BigDecimalクラスのsetScale()メソッドを使用することで、任意の桁数で切り上げ処理を行うことができ、基本的な書き方は下記のようになる。

```java:構文
setScale(桁数,BigDecimal.ROUND_UP).doubleValue()
```

#誤差を発生しないために
　BigDecimalクラスのコンストラクタの引数には浮動小数点型と文字列型どちらも指定することができるが、<b>正確な値を扱うためには文字列型で定義する</b>。引数に浮動小数点型を使用すると誤差が発生する可能性があるからだ。

```java:サンプルコード
import java.math.BigDecimal;
 
public class Main {
 
    public static void main(String[] args) {
        // 引数にdouble型(浮動小数点型)で指定
        BigDecimal bd1 = new BigDecimal(0.6); 
        // 引数にString型(文字列型)で指定
        BigDecimal bd2 = new BigDecimal("0.6"); 
        
        System.out.println(bd1);
        System.out.println(bd2);
    }
 
}
```

```:実行結果
0.59999999999999997779553950749686919152736663818359375
0.6
```

どうしても最初にdouble型で定義したい場合は数値をString型に定義しなおす必要がある。

```java:サンプルコード
import java.math.BigDecimal;
 
public class Main {
   public static void main(String[] args) {
      double number = 0.5925;
      // 数値を文字列に変換する
      BigDecimal num = new BigDecimal(String.valueOf(number));
 
      //小数第一位で切り上げ
      double num0 = num.setScale(0,BigDecimal.ROUND_UP).doubleValue();
  
      //小数第二位で切り上げ
      double num1 = num.setScale(1,BigDecimal.ROUND_UP).doubleValue();
 
      //小数第三位で切り上げ
      double num2 = num.setScale(2,BigDecimal.ROUND_UP).doubleValue();
 
      System.out.println("小数第一位で切り上げ:" + num0);
      System.out.println("小数第二位で切り上げ:" + num1);
      System.out.println("小数第三位で切り上げ:" + num2);
   }
}
```

```:実行結果
小数第一位で切り上げ:1.0
小数第二位で切り上げ:0.6
小数第三位で切り上げ:0.6
```



#参考文献
[Java 切り上げ](https://www.sasukepg.jp/post-915/)
[【解決Java】BigDecimalで四捨五入や切り捨ての丸め誤差を解決](https://www.sejuku.net/blog/21345)
応用数学「確率・統計」

# 第2章　確率・統計
- <b>確率とは</b>
頻度確率とベイズ確率
条件付き確立と同時確立

- <b>確率で使う値・概念</b>
確率変数
期待値
分散と共分散
標準偏差

- <b>様々な確率分布</b>
ベルヌーイ分布
マルチヌーイ（多項）分布
二項分布
ガウス分布

- <b>推定とは</b>
 点推定と区間推定
 推定量（estimator）と推定値（estimate）
 
- <b>標本とは</b>
 標本平均
 標本分散と不偏分散

## 確率とは

```math
P(A) = \frac{事象Aが起こる数}{全事象の数} = \frac{n(A)}{n(U)}

```
と表すことができる。
<br>
### 頻度確率とベイズ確率
確率には、頻度確立とベイズ確立が存在する。
この二つの違いについて注目して説明していきたい。
#### 頻度確率
パラメータが定数であり、データが変数を用いて確率を求める概念を頻度確率という。
手元にあるパラメータによって、どのようなデータなのかを予測する。
#### ベイズ確率
パラメータが変数であり、データが定数を用いて確率を求める概念をベイズ確率という。
手元にあるデータは、どのようなパラメータに基づく母集団から得られたのかを予測する。
<br>
### 条件付き確立と同時確立
#### 条件付き確率
条件付き確率は、ある事象Xが与えられた下である事象Yとなる確率である。
条件付き確率には、<b>ベイズ則</b>という考え方がある。それは、

```math
\begin{align}
Aの確率×Aの条件下でBの確率&　=　Bの確率×Bの条件下でAの確率 \\
\\
P(A) * P(B|A)&　=　P(B) * P(A|B)
\end{align}
```
というものである。
####同時確率
同時確立は、お互いに因果関係のないある事象XとYが同時に起こる確率である。

<br>
## 確率で使う値・概念
###確率変数
確率変数は、ある試行に対してその値をとる確率が定まる変数のことである。
試行の結果として起こる事象に結びつけられた数値と言い換えることもできる。
<br>
### 期待値
確率変数の全ての値に確率の重みをつけて足し合わせたものが期待値である。

```math
E(f) = \sum{P(X=x_k) \ f(X = x_k)}
```
P(X = xk)は確率、f(X = xk)は確率変数のことである。

<br>
### 分散と共分散
#### 分散
分散はデータの散らばり具合を表したものである。つまり、データが期待値からどれだけ離れているかを算出している。

```math
\begin{align}
Var(f)& = E((f(X = x)-E(f))^2) \\
& = E(f^2(X = x)-(E(f))^2
\end{align}
```

#### 共分散
2つのデータ系列の傾向の違いを表したものが共分散である。

```math
\begin{align}
cov(fig)& = E((f(X = x)-E(f))(g(Y=y) - E(g))) \\
& = E(fg)-E(f)E(g)
\end{align}
```
<br>
### 標準偏差
分散は値を２乗しているので、元のデータの単位とは一致しない。正確な散らばり具合を見るためには、元の単位を求めなければならない。そのために、２乗の逆演算である平方根を求める。標準偏差とは、分散を平方根にした値である。
つまり、

```math
\begin{align}
\sigma 
&= \sqrt{var(f)} \\
&= \sqrt{E((f(X=x)-E(f))^2)} \\
&= \sqrt{E(f^2(X = x)-(E(f))^2}
\end{align}
```

## 様々な確率分布
### ベルヌーイ分布
２種類のみの結果しか得られないような結果を０と１で表した分布である。
１である確率がPのとき、０である確率は１−P
０である確率がµのとき、１である確率は１ーµ

```math
P(x | µ) = µ^x(1-µ)^{1-x}
```
<br>
### マルチヌーイ（多項）分布
ベルヌーイ分布は、結果が２種類しかないときに用いられる分布だが、マルチヌーイ分布は結果がたくさんある試行において用いられる分布である。
<br>
### 二項分布
二項分布は、ベルヌーイ試行が繰り返し行われることの成功回数の分布である。

```math
P(x|\lambda,n) = \frac{n!}{x!(n-x)!}\lambda^x(1-\lambda)^{n-x}
```
### ガウス分布
ガウス分布は正規分布に収束される。

```math
N(x;µ,\sigma^2) = \sqrt{\frac{1}{2\pi\sigma^2}}exp(-\frac{1}{2\sigma^2}(x - µ)^2)
```
## 推定
### 推定とは
母集団を特徴付ける母数を統計学的に推測することである。
母集団から数値を抽出したものが標本であり、その標本を用いて推定する。
推定は、推定量を用いて推定値を導き出すことである。
<br>
### 点推定と区間推定
#### 点推定
点推定は、平均値などの母数を1つの値に推定することである。
#### 区間推定
区間推定は、平均値などが存在する範囲を推定することである。
<br>
### 推定量(estimator)と推定値(estimate)
#### 推定量(estimator) 
推定量は、パラメータを推定するために利用する数値の計算方法や計算式のことである。
これは<b>推定関数</b>ともいう。
#### 推定値(estimate)
推定値は、実際に試行を行った結果から計算した値である。
求めた推定値には^をつける。

## 標本
### 標本平均
#### 標本平均
標本とは、母集団の全部、もしくは一部を抽出したものである。
標本平均は、母集団から取り出した標本の平均値であり、一致性と不偏性によってバランスが取られている。
<br>
### 標本分散と不偏分散 
#### 標本分散

```math
\sigma^2 = \frac{1}{n}∑(x_i - \bar{x})^2
```
母集団に比べ、標本数が少ない時は標本分散の値も母分散に比べて小さくなる。それを等しくなるよう補正するために、<b>不偏分散</b>を用いる。
#### 不偏分散

```math
S^2 = \frac{1}{n-1}∑(x_i - \bar{x})^2
```
Java SE8 Silverに合格(2020年10月)したので、まとめてみます。 

# スペック
- 非ITエンジニア
- Javaの経験は、ProgateとPaizaで触っただけ  
(他言語の勉強の時、課金していたのでもったいないお化け状態で触りました)
- 他のプログラミング言語の取得資格
    - Ruby Silver
    - Python 3 エンジニア認定基礎試験

# Java SE8 Silverを受験した理由
国家資格(ITパスポート)を取得したので、ミーハー気分で国際資格を取得したいと思ったからです。
それと、自分の中でJava Silverというのは、初心者が取得するプログラミング言語の中でも難しいイメージがあったので挑戦したかったからです。

# 学習教材
- 書籍
 - [2週間でJava SE Bronzeの基礎が学べる本](https://www.amazon.co.jp/dp/B076F36Z89)
 - [徹底攻略 Java SE 8 Silver 問題集[1Z0-808]対応](https://www.amazon.co.jp/dp/4844339931)(通称：黒本)

[スッキリわかるJava入門](https://www.amazon.co.jp/dp/484433638x)や[紫本](https://www.amazon.co.jp/dp/4798142735)、[白本](https://www.amazon.co.jp/dp/4798142743)も教材として考えていましたが、二週間ちょっとしか時間がなかったので、問題集は黒本一択にしました。

# 勉強方法
Javaの経験はProgateとPaizaだけで、うろ覚えだったので「2週間でJava SE Bronzeの基礎が学べる本」を一読。お作法的なのを思い出すために読みました。
Progateの無料部分だけ少し触ったりもしました。
↓
黒本の総仕上げ問題以外を解く。
わからなければ悩むのではなく、さっさと答えを見てコードを書いて確認しました。
各章毎に「なんとなく理解した」ではなく、6〜7割程度なら「ちゃんと理解出来た」と思えるまで、なぜそうなるのかを調べたり、コードの一部を変更したりして、仕組みの理解や知識の補完を行いました。
↓
総仕上げ問題を解く。
これも同様に6〜7割程度なら「ちゃんと理解出来た」と思えるまで詰めました。
↓
後は、理解の乏しいところを重点的に取り組んで理解を深めました。

<br>

上記のように書くと全く有意義な情報ではないのですが、試験問題が「黒本と同じ問題や類似した問題が多い」という記事をよく目にしたので、「黒本の内容が理解出来るようになる」のを目標に勉強すれば合格出来ると思います。
ちなみに正解率85%でした。

オブジェクト指向言語であるRubyをある程度勉強していたので理解しやすいところもありましたが、もし自分がプログラミングをしていなかったらそうとう難しいと感じていただろうなと思いました。

# 試験申し込みについて
色々な記事で目にしましたが、本当にややこしいです。
参考にした記事が比較的新しかったにも関わらず、サイトの仕様が変わったのか「アカウントの作成」ボタンがなかったりとか・・・。

ポイントは下記２つです

- Oracleアカウントの作成（合否の確認のため）
- ピアソンVUEでアカウントの作成（Java Silverの試験の申し込みのため）

受験チケットはOracleで購入出来るのですが、楽天で購入した方が安かったです。
そして試験の申し込みは「1Z0-815-JPN」にすること。（「1Z0-815」というのがあるので注意してください）


# 試験受付時の注意事項
顔写真を撮られます。
受付に行く前にトイレ等で身だしなみを整えるのをお勧めします。
Ruby　ハッシュとシンボルの記法　まとめ

Railsチュートリアル
ハッシュとシンボルの書き方

>> user = {}                          # {}は空のハッシュ
=> {}
>> user["first_name"] = "hurihata"     # キーが "first_name" で値が "hurihata"
=> "hurihata"
>> user["last_name"] = "koyo"        # キーが "last_name" で値が "koyo"
=> "koyo"
>> user["first_name"]                 # 要素へのアクセスは配列の場合と似ている
=> "hurihata"
>> user                               # ハッシュのリテラル表記
=> {"last_name"=>"koyo", "first_name"=>"hurihata"}

ハッシュのキーとしてシンボルを採用する場合、user のハッシュは次のように定義できる

一つめの記法
>> user = { :name => "koyo", :email => "kkkk@XXX.com" }
=> {:name=>"koyo", :email=>"kkkk@XXX.com"}
>> user[:name]              # :name に対応する値にアクセスする
=> "koyo"
>> user[:password]          # 未定義のキーに対応する値にアクセスする
=> nil

二つめの記法

{ name: "koyo", email: "kkkk@XXX.com" }

自分的にはハッシュロケット(＝>)を使う一つ目の記法より二つ目のシンボルの：を後ろにつける記法の方が見やすく使いやすいと感じた。
Fakerでメールアドレスがうまく生成されない

Fakerによって様々なダミーデータが作れるが、.@.comなどのようにうまくメールアドレスが生成されない。

##対処方法
config/application.rbをみると、文字が日本語化するように設定している。

```
config.i18n.default_locale = :ja
```

これが邪魔してうまく生成されないので、Fakerでは英語にするよう、以下に記述する。

```
Faker::Config.locale = :en
```

これでOK
【Swift】UISearchBarの検索テキストの色を変更する

<b><code>searchBar.textColor</code></b>みたいな感じでいけると思っていましたが、そう簡単にはいきませんでした。

|動作環境|バージョン|
|:-----------|:-----------|
|Xcode|12.1|
|Swift|5|

##SearchBarの検索テキストの色を変更するコード
```swift:
//例として検索テキストの色を赤色に変更
searchBar.searchTextField.textColor = .red
```

##まとめ
UISearchBarのプロパティのsearchTextFieldのTextColorを変更すると検索テキストの色が変更できます。

##参考
<a href="https://www.it-swarm-ja.tech/ja/ios/uisearchbar%E3%81%AE%E6%A4%9C%E7%B4%A2%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E8%89%B2%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/1051102201/">UISearchBarの検索テキストの色を変更するにはどうすればよいですか？</a>