OmniAICreator/Qiita-1.07M huggingface dataset:
Splunkとkerasを用いた不正アクセス予測検知の仕組み（前処理編）

####やりたいこと
[<font color="Red">1.Splunkを使い、access.logをCSVに変換</font>](https://qiita.com/Uryy/items/8e923038b41c60cb87a5)　　⇦今回の内容
[2.CSVファイルをもとにJupyterLab上で教師データを作る](https://qiita.com/Uryy/items/2066f1377b254e46b774)
[3.ディープラーニングを用いて、予測精度を確かめる](https://qiita.com/Uryy/items/104a4e01d386a72dd184)

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207381/7bafb827-ec61-55d3-5cde-5da8ba47b29e.png">

####Splunkを使う理由
将来的にデータの自動取り込みを行うことを想定して、非構造化データの自動収集に定評のあるSplunkを選定。
あわせて、JupyterLabでアドホックに調査・分析・処理するにあたり、使い慣れているCSVファイル形式で行いたい。

####環境
・JupyterLab　2.1.4  @ AWS Cloud9
・Python 3
・Splunk Enterprise　8.1  @ AWS EC2

####データ取得
検証用で使うaccess.logを入手する。今回はKaggleから頂戴した。

https://www.kaggle.com/eliasdabbas/web-server-access-logs

ログファイルを解凍すると3.5GBほどあり、Splunkの無料枠では上限に達するため分割してから取り込むことに。

```bash
[ec2-user@ip-192-168-0-5 ~]$ split -b 200MB access.log
[ec2-user@ip-192-168-0-5 ~]$ ll
合計 5447932
-rw-rw-r-- 1 ec2-user ec2-user 3502440823  2月 13  2021 access.log
-rw-r--r-- 1 ec2-user ec2-user  277102492  9月 11 03:00 access.log.zip
-rw-rw-r-- 1 ec2-user ec2-user  200000000  9月 11 03:03 xaa
-rw-rw-r-- 1 ec2-user ec2-user  200000000  9月 11 03:03 xab
-rw-rw-r-- 1 ec2-user ec2-user  200000000  9月 11 03:03 xac
-rw-rw-r-- 1 ec2-user ec2-user  200000000  9月 11 03:03 xad
```
####Splunk取り込み
分割したファイルの内、xaaファイルを利用した。
以後、Web GUIからアップデートを実施。

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207381/fd31f310-b26a-4fff-381e-67032c766e17.png">

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207381/c4f1cf9c-0b24-4fb3-4609-7a5b0f888586.png">

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207381/0cd0db4d-22bf-301d-9871-f68a7b20b617.png">

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207381/fb84be58-f585-b3e3-ac93-8125766f0afa.png">

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207381/4441c2cf-b462-770b-fe61-46ed38a4a70c.png">

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207381/f338a13c-bd94-decb-66b4-7653a1700a0c.png">

必要なカラムをCSVファイルに出力する。
以後、出力したCSVファイルを使う。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207381/a148b07f-a6ed-e706-a396-62c2302f7e23.png">

以上。
[【次回】：Splunkとkerasを用いた不正アクセス予測検知の仕組み（教師データ作成編）](https://qiita.com/Uryy/items/2066f1377b254e46b774)
【Rails】複数モデルの作成日付一覧を重複なく表示する

ポートフォリオ作成中の学びのアウトプットとして投稿させて頂きます。
勉強用アプリを作成中に実装した保存された回答（複数モデル存在）を日付順に重複なく表示する方法です。

#実現したいこと
users_controllerのshowアクションで回答の作成日付一覧をviewに表示してそれぞれの日付をクリックするとその日に作成された回答一覧を確認できるようにしたい。
※下図のイメージ
![2021-09-11 1.17.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1640672/36dfcf86-5ffc-9941-26c5-0b445fd23abf.png)


#モデル

回答用モデルとして「answer」と「reaction」が存在。


#showアクションとviewの中身


```:users_controller.rb
 def show
    @answers_dates = current_user.answers.map{|dates| dates.created_at.to_date}
    @reactions_dates = current_user.reactions.map{|dates| dates.created_at.to_date}
    @dates = @answers_dates.push(@reactions_dates).flatten.uniq.sort.reverse
  end
```

```:show.html.erb
  <% @dates.each do |record| %>
      <li>
       <%= link_to record, answers_path(created_at: record) %>
　　　</li>
  <% end %>
```

#中身の説明
```
@answers_dates = current_user.answers.map{|dates| dates.created_at.to_date}
@reactions_dates = current_user.reactions.map{|dates| dates.created_at.to_date}
```
全てのanswer及びreactionをインスタンス変数に配列として保存する。同時に年月日だけ表示されれば良いのでto_dateメソッドを用いて変換。

```
@dates = @answers_dates.push(@reactions_dates).flatten.uniq.sort.reverse
```
二つの配列をpushメソッドで結合。結合すると配列が入れ子構造になるので（ex,[2021-09-08, [2021-09-08,2021-09-09]])、flattenメソッドで入れ子構造を外す。uniqメソッドで重複を除去、さらにsort.reverseで日付が近い順に並び替える。
※入れ子構造を外さないとuniqで上記の例だと2021-09-08の重複を除去できない。

```
 <% @dates.each do |record| %>
      <li>
       <%= link_to record, answers_path(created_at: record) %>
　　　</li>
  <% end %>
```
後は表示される日付にリンクを付属し、その日付をparamsとしてパスに与えることでその日付に作成されたモデルを取り出せる。
codebuildでdockerをビルドした時にrate limitsが表示された件

# 概要

2020年10月からdocker hubのリポジトリからpullする時に未ログインした状態でpullすると任意のIP単位で制限をかけるような仕様を追加した。
これを解決するにはdocker loginをするしかない。
また、code buildはawsのマネージドサービスで動いているため、数回動かしただけでrate limitsエラーが表示されてしまう。
このエラーを回避するためにはcode buildのbyildspec.yamlでコンテナをビルドする前にdocker loginをする必要がある。

詳しくは以下。

https://www.docker.com/increase-rate-limits?utm_source=docker&utm_medium=web%20referral&utm_campaign=increase%20rate%20limit&utm_budget=

https://docs.docker.com/docker-hub/download-rate-limit/

https://aws.amazon.com/jp/blogs/devops/how-to-use-docker-images-from-a-private-registry-in-aws-codebuild-for-your-build-environment/

https://www.seeds-std.co.jp/blog/creators/2020-12-09-120109/

# buildspec.yamlの例

変数はcode build経由で渡すなりsecret manager経由で渡すなり、セキュリティ要件とやりやすさを考えてやってもらえますと。

```
version: 0.2

phases:
  install:
    commands:
      - echo install is nothing...
      - AWS_ACCOUNT_ID=$(aws sts get-caller-identity --query 'Account' --output text)
  pre_build:
    commands:
      - echo Logging in to Amazon ECR...
      - aws ecr get-login-password --region $AWS_DEFAULT_REGION | docker login --username AWS --password-stdin $AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com
      - echo ${DOCKER_HUB_PASSWORD} | docker login -u ${DOCKER_HUB_ID} --password-stdin

  build:
    commands:
      - echo build docker image
      - docker build -t $CONTAINER_IMAGE .
      - docker tag $CONTAINER_IMAGE_REPO_NAME:$CONTAINER_IMAGE_TAG $AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com/$CONTAINER_IMAGE_REPO_NAME:$CONTAINER_IMAGE_TAG
  post_build:
    commands:
      - echo todo is nothing...
      - docker push $AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com/$CONTAINER_IMAGE_REPO_NAME:$CONTAINER_IMAGE_TAG


```
Vue.js リアルタイム検索

Vue.jsで検索機能を実装します
検索ボタンを押してリロード後に検索結果を表示するのではなく、ユーザーが入力すると、ボタンを押さなくても、リロード無しで直ぐに検索結果が出てくるような機能です


##検索欄を作成
まずは検索欄を作成します。　v-modelを使用して入力した文字をkeywordに同期させます(keywordに入力した文字を格納するイメージ)。
vuetifyを使用しています。

```.vue
<template>
  <div id="app>
    <div class="search">
      <v-text-field type="text" v-model="keyword" label="検索"></v-text-field>
　　　 <!-- input type="text" v-model="keyword"> vuetify使わないならこう？-->
    </div>
  </div>
</template>
```

こんな感じになります
![スクリーンショット 2021-09-10 23.29.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551832/3c8a6926-a3b9-149c-f13b-392c28948888.png)


次に検索用に使うデータを用意します
検索用に使う変数keywordも用意します

```.vue
<template>
  <div id="app>
    <div class="search">
      <v-text-field type="text" v-model="keyword" label="検索"></v-text-field>
　　　 <!-- input type="text" v-model="keyword"> vuetify使わないならこう？-->
    </div>
  </div>
</template>
<script>
  new Vue({
    data: {
　　　 keyword: "",//検索用
      fruits: [
        {id: 1, name: "オレンジ"}
        {id: 2, name: "メロン" }
        {id: 3, name: "アップル"}
      ]
    }
  })
</script>
```

##検索のロジックを作成

検索ボックスに文字が入力された瞬間、関連データだけ表示する実装をします。
リアルタイムでデータ検索するには、データのフィルター機能が必要です。
例えば、検索ワードが「メロン」だった場合、ひとつずつデータをチェックして「メロン」という文字列が含まれているかどうかをチェックし、もし含まれているのならそのデータを残して他はスルーしなければいけません。
これを実装するためには、Vueのcomputedを利用します。
computedはデータが変更（ここでは検索キーワードが入力）されると同時に実行される算出プロパティです。

```.js
filteredFruits: function() {
    var fruits = []; //検索にヒットしたデータを格納する配列を用意
    for(var i in this.fruits) {  //this.fruitsはdataで定義しているもの　3つのデータをforで順番に回していきます
        var food  = this.fruits[i];  //回されてきたデータを変数foodに格納
        if(food.name.indexOf(this.keyword) !== -1) { //ここでfood.name(オレンジやメロン)とkeyword(ユーザーが入力した文字)が一致するか判断
            fruits.push(food); //一致するなら配列fruitsにデータを格納
        }
    }
    return fruits;  //fruitsを返します
}
```
これで検索条件に合ったデータだけを返せるようになりました
検索に一致したデータだけを画面上に表示させます

```.vue
<template>
  <div id="app>
    <div class="search">
      <v-text-field type="text" v-model="keyword" label="検索"></v-text-field>
    </div>
    <tr v-for="fruits in filteredFruits" :key="fruits.id">
      <td v-text="fruits.name"></td>
    </tr>
  </div>
</template>
```

以上でVue.jsでのリアルタイム検索ができると思います！

##完成コード

```.vue
<template>
  <div id="app">
    <div class="search">
      <v-text-field type="text" v-model="keyword" label="検索"></v-text-field>
    </div>
　　 <tr v-for="fruits in filteredFruits" :key="fruits.id">
      <td v-text="fruits.name"></td>
    </tr>
  </div>
</template>
<script>
  new Vue({
    data: {
　　　 keyword: ""
      fruits: [
        {id: 1, name: "オレンジ"}
        {id: 2, name: "メロン" }
        {id: 3, name: "アップル"}
      ]
    },
    computed: {
      filteredFruits: function() {
        var fruits = [];
        for(var i in this.fruits) { 
          var food  = this.fruits[i];  
          if(food.name.indexOf(this.keyword) !== -1) { 
            fruits.push(food); 
          }
        }
        return fruits; 
      }
    }
  })
</script>
```
3点リーダーのVueコンポーネント

# 概要

指定行以上のテキストコンテンツを、隠す3点リーダーを作る。
コンポーネントのインナー要素が指定行高を超えた高さを持っていたら、
`is-overflow`クラスを付与して、`overflow: hidden;`、
`after`疑似要素で点を追加して、背景に色を付けることで、文字を隠す。
仕上げに文字の切れ目になる部分をグラデーションにしてごまかす。

# 記述

```html
<template lang="pug">
.a-dotleader(
  :class="{ 'is-overflow': isOverflow }"
  :style="{ height: `${maxHeight}px` }"
)
  .a-dotleader-inner(ref="inner") {{ text }}
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      required: false,
      default: ''
    },
    spRow: {
      type: Number,
      required: false,
      default: 2
    },
    pcRow: {
      type: Number,
      required: false,
      default: 2
    }
  },
  data: () => ({
    isMobile: false,
    isOverflow: false,
    lineHeight: 19.5
  }),
  computed: {
    maxHeight() {
      return this.isMobile
        ? this.lineHeight * this.spRow
        : this.lineHeight * this.pcRow
    }
  },
  mounted() {
    this.init()
    window.addEventListener('resize', this.init)
  },
  methods: {
    init() {
      const ww = window.innerWidth
      const breakPoint = 1024
      const elInner = this.$refs.inner
      const innerHeight = elInner.clientHeight
      const style = window.getComputedStyle(elInner)
      this.lineHeight = parseFloat(style.getPropertyValue('line-height'))
      this.isMobile = ww < breakPoint
      this.isOverflow = this.maxHeight < innerHeight
    }
  }
}
</script>

<style lang="stylus" scoped>
.a-dotleader
  overflow hidden
  &.is-overflow
    position relative
    word-break break-all
    &:after
      display block
      position absolute
      content '…'
      text-align right
      right 0
      bottom 0
      width 2em
      background linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1))
</style>
```
PHP seleniumを使ってみよう

# はじめに
- PHPで、**`selenium`**を使用したい人
- 自動化処理に興味がある方


## seleniumとは
> Selenium は、 Webアプリケーションをテストするためのポータブルフレームワークである。 Selenium は、テストスクリプト言語(Selenium IDE)を学ぶ必要なしに、機能テストを作成するための再生ツールを提供する。

- [出典: フリー百科事典『ウィキペディア（Wikipedia）』](https://ja.wikipedia.org/wiki/Selenium_(%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2))



## ChromeDriverをインストール
**`ChromeDriver`**は、**Chromeを動かすために必要なドライバー**になります。
> [こちらからダウンロード](https://getcomposer.org/)
macの場合はHomeBrewでインストール可能
 コマンド: brew install chromedriver


## selenium-server-standaloneをインストール
> [Windowsはこちらからダウンロード](https://www.selenium.dev/downloads/)
 macの場合はHomeBrewでインストール可能
 コマンド: brew install selenium-server-standalone




## Composerのインストール
**`Composer`**は、**PHPのライブラリ管理ツール**です。
※今回は、**`php-webdriver`**を使用し管理するために使用します。



> [こちらからダウンロード](https://getcomposer.org/)
 macの場合はHomeBrewでインストール可能
 コマンド: brew install composer 


## php-webdriverのインストール

PHPで、**`selenium`**を扱うには、**`php-webdriver`**といったライブリをインストールする必要があります。以下のコマンドを実行してください。

```shell:
curl -sS https://getcomposer.org/installer | php
```
```shell:
php composer.phar require facebook/webdriver
```


※または、以下の仕様でも可能です。

1. **`composer.json`**を作成
2. **`composer.json`**にライブラリ情報を記述
3. **`composer install`** コマンドの実行 

```shell:composer.jsonの作成
touch composer.json
```
```json:composer.jsonにライブリ情報を記述
{
    "require":{
        "php-webdriver/webdriver":" 1.8.0"
    }
}
```
```shell:ライブリのインストール
composer install
```

## 全体像

```php:sample.php
<?php
require_once __DIR__ . '/vendor/autoload.php';
use Facebook\WebDriver\Chrome\ChromeOptions;
use Facebook\WebDriver\Chrome\ChromeDriver;
use Facebook\WebDriver\Remote\DesiredCapabilities;
use Facebook\WebDriver\Remote\RemoteWebDriver;
use Facebook\WebDriver\WebDriverExpectedCondition;
use Facebook\WebDriver\WebDriverBy;

$driverPath = realpath('/usr/local/bin/chromedriver');
putenv('webdriver.chrome.driver=' . $driverPath);

$driver = ChromeDriver::start();

// Googleへ遷移
$driver->get('https://www.google.co.jp/');

// 5秒待機
$driver->wait(5);

// スクリーンショット
$file = './sample.png';
$driver->takeScreenshot($file);

// ブラウザを閉じる
$driver->quit();
```

## ChromeDriverのパス設定
```php:
$driverPath = realpath('ChromeDriverのパス');
putenv('webdriver.chrome.driver=' . $driverPath);
```

※パスを**`/usr/local/bin/chromedrive`**とする場合は、権限付与が必要です。

```shell:権限を付与するコマンド（/usr/local/bin/chromedrive）
mv ~/Downloads/chromedriver /usr/local/bin/ chmod +x /usr/local/bin/chromedriver
```

## ChromeDriverの起動

```php:sample.php
$driver = ChromeDriver::start(オプション);
```

## ページ遷移

```php:sample.php
$driver->get('URL');
```

## 待機

```php:sample.php
$driver->wait(秒数)->until(
    // 待機条件
);
```

## スクリーンショット

```php:sample.php
$driver->takeScreenshot('保存先のパス');
```

## ブラウザを閉じる

```php:samaple.php
$driver->quit();
```
## まとめ

PHPでseleniumを使用する場合は、以下の手順で進めてください。
1. **`ChromeDriver`**をインストール
2. **`Composer`**のインストール
3. **`php-webdriver`**のインストール
isort で ignore_blobs を設定する

isort の実行時にファイル(パス)を無視させる設定をしようとして、書き方がぱっとわからなかったのでメモ

## 環境
- Python + poetry + Django
- 設定ファイル: pyproject.toml
- isort = "5.9.3"

## ignore_blobs
ファイルを無視させるには `ignore_blobs` というオプションを設定すれば良いらしく、これを `pyproject.toml` に記述する。

```toml
[tool.isort]
ensure_newline_before_comments = true
force_grid_wrap = 0
force_single_line = false
include_trailing_comma = true
line_length = 120
multi_line_output = 3
use_parentheses = true
# こんな感じでカンマ区切りでファイルを渡す
skip_glob = "*/migrations/*.py,src/lib/*.py"
```

## 設定の確認方法
現在適用されている設定は下記のコマンドで確認できる。
設定を見ると、`pyproject.toml` で渡しているもの以外にも、デフォルトで `skip` されているファイルもあることが確認できる。ここで設定されているものは、わざわざ自前で書いてあげなくても良さそう。

```bash
poetry run isort --show-config
```
Faviconの実装方法（Laravel）

プログラミング初心者です。

##やりたいこと
私なりにfaviconを実装した方法をご紹介していきます。
###開発環境
PHP
Laravel5.8
MAMP

##1 faviconにしたい画像を決める
無料画像ダウンロードサイトで画像を選びました。

参考画像ダウンロードサイト

https://icooon-mono.com/


http://flat-icon-design.com/

ダウンロード形式はJPEGかPNGでいいと思います。
私は256か512サイズをダウンロードしました。

##2 画像形式をicoに変更
形式がPNGやJPEGでも実装できるのですが、ブラウザによって（例：Edge）表示できない場合もあるそうです。
下記のサイトで形式の変更ができます。
私は16サイズにしました。

https://ao-system.net/favicon/

##3 ターミナルで直接画像をダウンロード（Macのみ）
ドロップして移動させる方法もありますが、環境によってできない状況に出くわしたので、ターミナルに直接画像をダウンロードしました。（Macのみ）

```
publicディレクトリーに保存したいため移動します
$ cd public

Finderに保存している画像をダウンロード　　　大文字のオー
$ curl -O サーバー上のファイル名で保存
```
サーバー上のファイル名というのは、http://~やhttps://~から始まるURLです。
```Finder→ダウンロードしたい画像右クリック→情報→詳細情報:入手先:```
にURLが記載されています。

参考サイト

https://xtech.nikkei.com/it/atcl/column/15/042000103/080700084/



##4 headタグ内に実装
publicディレクトリー内に画像がダウンロードできたか確認できたら、viewのheadタグ内に以下のコード記載します。

```sample_blade.php
<head>

<link rel="icon"  href="{{ asset('sample.ico') }}">

</head>
```
hrefに画像パスを指定します。
今回はpublicディレクトリー内にあるため、assetメソッドを使用します。
asset（'ファイルパス'）はpublicディレクトリのパスを返すメソッドです。

##補足　assetについて
通常はhttpの時はassetメソッド、httpsの時はsecure_assetメソッドを使うみたいですが、環境が変わるごとに書き換えるのは面倒ですよね。
http、httpsでもassetメソッドを使えるように設定ができます。
二つのファイルを以下のようにします。

```TrustProxies.php
protected $proxies = "**";
```

```AppServiceProvide.php
    public function boot()
    {
        if (\App::environment('production')) {
            \URL::forceScheme('https');
        }
    }

または

    public function boot()
    {
        if (request()->isSecure()) {
            \URL::forceScheme('https');
        }
    }

```
自分はこれでhttpでもhttpsでもassetメソッドが使えています。
参考記事：https://qiita.com/e_tyubo/items/c25df0c545b1af8494c7
Rのsummarytoolsパッケージ. dfSummary基礎編


# Introduction
Rでデータフレームを一瞬で要約してみた.
使用したライブラリは```summarytools```パッケージ内の```dfSummary```.

# データ準備
今回はボストンデータを使用

```r
library(MASS)
data = Boston
```

# パッケージインストールと呼び出し
```r
install.packages("summarytools")
library(summarytools)
```

# 要約結果出力
この一行で要約完了．
RStudioのviewペイン上に結果を出力．

```r
view(dfSummary(data))
```

Out:
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/931058/8ddead05-26ec-bae4-bfae-3b422013d1c2.png)


# 出力結果の内容解説

__Dimensions__
データフレームの行数と列数．

```r
dim(data)
```
```
Out:
[1] 506  14
```

__Duplicates__
重複の数.

```r
sum(duplicated(data))
```

```
Out:
[1] 0
```


__Variable__
データフレームの列名とデータ型．

```r
names(data[1])
class(data$crim)
```

```
[1] "crim"
[1] "numeric"
```

__Stats/Values__
基本的な要約統計量．

- Mean：平均
- sd：標準偏差
- min：最小値
- med：中央値
- max：89
- IQR：四分位範囲
- CV：変動係数


```r
mean(data$crim)
sd(data$crim)
min(data$crim)
median(data$crim)
max(data$crim)
IQR(data$crim)
sd(data$crim)/mean(data$crim)
```

```
Out:
[1] 3.613524
[1] 8.601545
[1] 0.00632
[1] 0.25651
[1] 88.9762
[1] 3.595038
[1] 2.380376
```

__Freqs (% of Valid)__
ユニーク（重複していない）値の個数．
カテゴリー変数は各カテゴリーの個数と割合．

```r
length(unique(data$crim))
```

```
[1] 504
```

__Graph__
ヒストグラム．
カテゴリー変数は各カテゴリーの個数の横棒グラフ．

```r
hist(data$crim)
```

Out:
![000002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/931058/cb524425-040c-b1ec-e2a1-7457fbde746d.png)

__Valid__
データ数（欠損値以外）．

```r
length(na.omit(data$crim))
```

```
Out:
[1] 506
```

__Missing__
欠損値（NA）の個数．

```r
sum(is.na(data$crim))
```

```
[1] 0
```

# Memo
関数```view```は```tibble```パッケージにも存在するため，このパッケージを呼び出しているときは，```summarytools```の```view```であることを明記する必要あり．

```r
summarytools::view(dfSummary(data))
```

# Conclusion
今回は```dfSummary```の引数は特に指定せず，すべてデフォルトのまま使用した．デフォルトでも十分だとは思うが，場合によっては変更する必要もあるだろう．いずれ引数を細かく指定した場合の表示についてもまとめようと思う．

-----------------------
-----------------------

# Code

```r
# データ準備
library(MASS)
data = Boston

# パッケージインストール
install.packages("summarytools")
library(summarytools)

# 要約結果出力
summarytools::view(dfSummary(data))

# 次元数
dim(data)

# 重複の数
sum(duplicated(data))

# 列名とデータ型
names(data[1])
class(data$crim)

# 要約統計量
mean(data$crim)
sd(data$crim)
min(data$crim)
median(data$crim)
max(data$crim)
IQR(data$crim)
sd(data$crim)/mean(data$crim)

# ユニーク値の個数
length(unique(data$crim))

# ヒストグラム
hist(data$crim)

# データ数
length(na.omit(data$crim))

# 欠損値の個数
sum(is.na(data$crim))
```
OWASP Top 10 2021 日本語翻訳におけるmac github環境構築

#OWASP Top 10 2021

This draft is ready for public comment and peer review. Please log any issues at https://github.com/OWASP/Top10

#Building a local copy

:::note info
macに必要な環境をここで作ります。
なお、私はPython3への切り替えに最も手間がかかりました。
:::

* Install Python 3 for your platform

    App StoreからXcodeと[Github Desktop](https://desktop.github.com/)および[Homebrew](https://brew.sh/index_ja)をインストール

    HomebrewからpyenvをインストールしてmacではデフォルトのPython2からPython3へ切り替えてMkdocksをインストール
    ※参考資料　[プロジェクトドキュメント構築向け静的サイトジェネレータ『MkDocs』及び『Material for MkDocs』の個人的導入＆設定まとめ](https://dev.classmethod.jp/articles/mkdocs-and-material-for-mkdocs-tips-matome/#toc-3)

    Mkdocsのライブラリーをインストール

```
pip install mkdocs-material
pip install mkdocs-i18n
```


* From the main folder, ...

```
make install-python-requirements
```

**Test it locally**
You should test your changes locally:

```
cd 2021

mkdocs serve
```
Once you are happy, check in your changes as a branch / PR and let someone on the main team know. We'll review your changes, and merge and redeploy.

**Redeploy to gh-pages**
This only works if you have commit privileges on master and Git is correctly setup in your environment.

```
cd 2021
mkdocs gh-deploy
```
READMEを作成してみて

# はじめに
本記事では、READMEを作成した際に思ったことや、必要だと感じたことを現時点でまとめました。

# README
オリジナルアプリの作成が最低限終わりデプロイ後、READMEを作成しようと思いましたが、
そもそもREADMEの役割がなんなのか理解不足でしたので調べました。

[リードミー （README）とは？｜マニュアルとの違いや特徴・種類など解説](https://toaster.how/media/manual/readme)
> Readmeとは、ソフトウェアを購入する際に添付されている、ソフトウェアの利用前に読んでおくべき内容が記載されたファイルのことです。単にソフトウェアの説明書と理解しても問題ないでしょう。

簡略化された説明書ということですね。
万が一転職する際などでREADMEが雑ですと、
読み手もアプリケーションに興味を持つことができないため、その時点で選考に落とされてしまいます。

説明書がないアプリケーションを見る気にはなりません。

ですので、READMEにも力を入れるべきですね。

## 私の思うREADMEに必要なもの
①アプリケーション名
②アプリケーション概要
③ペルソナ
④作者
⑤各テーブルの説明

だと思いました。

### ①アプリケーション名
名前をつけることでアプリケーション自体に価値観が生まれると思います。
また、トップページの名前が記載されている画像を添付しても良いと考えています。

### ②アプリケーション概要
簡単にどのようなアプリケーションなのかを記載する必要があります。
これを記述することで、面談時などの相手と話す内容も濃いものになると考えています。

### ③ペルソナ
誰の何のために作ったのか、が明確にできていないとアプリケーションを作った経緯が見えません。
その背景も相手に伝えることが良いと思います。

### ④作者
シンプルに私です。
また、`Qiita`や`Twitter`で毎日発信しているところがここで良い方向に働くのではないかと考えています。
少なくとも、エンジニアとしての自分が持っている情報を記述する必要があります。

### ⑤各テーブルの説明
各テーブルの機能の動画やカラムなどを記述します。
特にわかりやすく動画を載せるのが良いと思います。

### 現在悩んでいること
①取り扱った言語の記載
②さらに細かい概要の説明

①については、取り扱っている言語のパーセンテージがGithubに載っているからなあと考えています。
また載せるからには、各言語のロゴなどを表示しておしゃれにしたいです。

### 少し気を使ったところ
①画像と動画を入れてREADMEを色つけした。
カラフルな方が読みやすいと考えました。
また読むよりも見る方が読み手にストレスなくアプリケーションの紹介ができ、良いのでは？と考えています。

②絵文字の活用
少し迷いましたが、これも①同様に絵文字を入れることで、より一層読みやすくなるのではないかと思い、絵文字も入れております。

今のところ思ったこと、気づいたことは以上です。

# 終わりに
READMEはやれば１日かからずオシャレに仕上げることができると思います。
また転職時などでは、アプリケーションの良さを伝えるためには、かなり重要になるのではないかと考えます。

最低限オリジナルアプリができたと言えどまだまだ改善の余地はありますので、
改善でき次第、READMEもオシャレに仕上げていきたいなと思います。

以下今回の参考サイトです。
[わかりやすいREADME.mdを書く](https://deeeet.com/writing/2014/07/31/readme/)
[GitHub – READMEの作成方法と書き方【改行やリンク・画像の入れ方】](https://howpon.com/8334)
[GitHub】README.mdをカッコ可愛くデザインしてアプリの魅力を120%にする](https://qiita.com/aocattleya/items/5f836e9c65ba3eb3af03)

特に３つ目の記事は、とても参考になる記事だと思います！！

ここからは蛇足です。
本日9月10日、私が入校したテックキャンプを無事に卒業できました！
特にチームのメンバーは心の支えでしたし、プログラミングが楽しいと思えた最大の理由であったと思っています。

それぞれ駆け出しエンジニアとしてスタートしたばかりですが、
これからのエンジニアライフを全力で楽しんでいきましょう！
この記事を見られているかはわかりませんが、またご縁があればよろしくお願いします！！

それでは、明日からも頑張りましょう！！！！
ニュートラルネットワーク（重みとバイアス）

##ポイント
・ニュートラルネットワークのノードに入力されたデータは　➀線形変換　➁非線形変換　を経てノードから出力される。そのデータは出力されたノードと隣あうノードの入力データとなる。この流れが出力層まで繰り返されていく。
・線形は直線で表現され、非線形は曲線で表現できる。
・重みとバイアスを用いて入力データに対して線形変換が行われる。
・非線形変換では今回、シグモイド曲線を用いた。非線形曲線は別名活性化関数と呼ぶ。

##ソース

```Python
import numpy as np
import matplotlib.pyplot as plt

def nuro(x,y,bias):
  #xとyについてそれぞれ-1.0,-0.8,-0.6　…　10個のデータを作成する
  X=np.arange(-1.0,1.0,0.2)
  Y=np.arange(-1.0,1.0,0.2)
  #0詰めの10×10の行列を準備
  z=np.zeros((10,10))

  for i in range(10):
    for j in range(10):
      #線形変換の実施
      u=X[i]*x+Y[j]*y+bias
      #非線形変換(シグモイド曲線）の実施
      y=1/(1+np.exp(-u))
      #非線形変換後の数値を行列に格納する
      z[j][i]=y

  #グリッド表示
  plt.imshow(z,"gray",vmin=0.0,vmax=1.0)
  plt.colorbar()
  plt.show()

#メイン関数
def main():
  #複数の重みの準備
  w_x=[1.0,2.0,3.0]
  w_y=[3.0,5.0,7.0]

  #複数のバイアスの準備
  bias=[0.1,0.2,0.3]

  for i,j,k in zip(w_x,w_y,bias):
    nuro(i,j,k)

if __name__ == "__main__":
    main()

```
#出力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246864/97ff55f8-b78f-646c-8117-6d261098d206.png)
##・図よりわかること
1に近いほど、白く活性化度が強い。逆に、0に近いほど、黒く活性化度が弱い。重みやバイアスを調整することで、微妙に座標に対する活性化度が変化することがわかる。

##補足【シグモイド曲線について】
```Python
import numpy as np
import matplotlib.pyplot as plt
def sigmoid(a):
  return 1/(1+np.exp(-a))

a=np.arange(-5,5)
b=sigmoid(a)

plt.plot(a,b)
plt.show()
```
#出力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246864/a258b810-4f50-2e3c-9744-1f3ba52a70b9.png)

#・シグモイド曲線の特徴
シグモイド曲線のおかげで、出力データは0～1の間に収束することができる。

##関連記事
[ニュートラルネットワーク(重みとバイアス)応用](https://qiita.com/sama1017/items/14330f1814a27c714115)
【CSS】擬似要素beforeとafter（初心者向け）

#はじめに
擬似要素とは、HTMLに記述することなく（擬似的な要素の追加）要素の特定の部分にスタイルを適用するものです。
名前のとおり、beforeを使うと特定の要素の前に、afterを使うと特定の要素の後にスタイルを適用します。

#記述方法

```html:HTML
<p class="hello">HELLO</p>
```

```css:CSS
.hello::before {
     content: "★";
     color: red;
     font-size: 14px;
}

.hello::after {
     content: "●";
     color: red;
     font-size: 14px;
}
```

このように記述すると、画面には`★HELLO●`と表示されます。
contentプロパティがないと擬似要素は機能しないので、文字等を追加しないときでも`content: "";`と記述する必要があります。
また、imgタグなどの閉じタグがないものについては使用することができないので、気をつけましょう！！

#おわりに
擬似要素を使えばアニメーションをつけたり、ふきだしをつけたり、いろいろなことができるので、試してみてください。
Amazon CloudWatch LogsのデータをS3にExportする時にハマった

# はじめに
AWSのログサービスである「Amazon CloudWatch Logs」内のテキストログをダウンロードするためにS3にエクスポートしようとした際に、しょーもないことでハマったので共有します。

# TL;DR
Exportするログの期間をちゃんと指定しよう。


# ハマったこと
![Screen Shot 2021-09-10 at 23.12.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534248/f521d343-a6a5-eab7-4da0-2d642c134e4c.png)

CloudWatch Logsのコンソールから `Export data to Amazon S3` を選択すると上記のような画面に飛び、ここでログのExportの設定ができる。各設定項目は以下の通り

| 項目 | 内容 |
| --- | --- |
| Stream prefix | ExportするLog stream名 |
| S3 bucket name | Export先のS3のバケット名 |
| S3 bucket prefix | Export先のS3のルートからのパス(実際にはただのprefix) |

これらの項目を設定してExport先のS3バケットを確認してみると、 `aws-logs-write-test`というファイルが増えているだけで、肝心のログデータが見つかりません。

# 原因
先にも述べましたが、Exportするログの期間をデフォルトのままにしていたことが原因でした。上図で言うと Define data to Amazonのセクションの一番上の項目です。
気づいてみれば「なんだそんなことかww」という感じですが、自分はこれに気づくのに10分くらいかかりました。一番上にあるのに気づいかないなんて不思議なものですね。自分がアホなだけかもしれませんが。
なぜSQLは重いのか

##検索の処理速度改善

最近の話で検索機能の処理速度がすごく遅いから早くできない？？との依頼がありSQL文を見てみることに

```sql
select
    a.*,
    b.*,
    c.*,
    d.*
from
    table_a a
    left join table_b b on a.id = b.id
    left join table_c c on a.id = c.id
    left join table_d d on a.id = d.id
where a.id > 1000 and a.id < 2000

```
各テーブルにはデータが10,000件ほど入っておりなぜ遅いのか調査した。

・・・・・・・・といってもみる人が見れば一目瞭然なのだが試しに

```sql
select
    a.*,
    b.*,
    c.*,
    d.*
from
    table_a a
    left join table_b b on a.id = b.id
    left join table_c c on a.id = c.id
    left join table_d d on a.id = d.id
where a.id > 1000 and a.id < 2000
limit 1
```
として1件だけ取りに行くように変えてみたのだが
処理速度は全く改善されなかった。

次に取得するカラムを減らしてみた

```sql
select
    a.id
from
    table_a a
    left join table_b b on a.id = b.id
    left join table_c c on a.id = c.id
    left join table_d d on a.id = d.id
where a.id > 1000 and a.id < 2000
```
こちらも全く効果なし

まぁ分かってはいたけれど・・・・・・・・・
結合させるテーブルを減らしてみた

```sql
select
    a.*,
    b.*
from
    table_a a
    left join table_b b on a.id = b.id
where a.id > 1000 and a.id < 2000
```
めちゃめちゃ早い！！！・・・・・・ですよね

分かってはいましたけど、見に行くテーブルを減らすということは大幅なプログラム設計の見直しが必要ということで・・・・・・・いっぱいお金もらいます😂

今日の格言
「検索項目が増えれば増えるほど検索は早くなるが、見に行くテーブルが増えれば増えるほど検索速度は遅くなる」

下記の例なんて欲しいレコードは一件だけなのに画面の検索項目が多いばっかりにいろんなテーブルを見に行かないといけないので処理速度が遅くなってしまうというかなり極端な例ですね。

```sql
select
    a.*,
    b.*,
    c.*,
    d.*
from
    table_a a
    left join table_b b on a.id = b.id
    left join table_c c on a.id = c.id
    left join table_d d on a.id = d.id
where a.id > 1000 and a.id < 2000
limit 1
```

作ったのは私ではないのでテーブル設計が悪い！！っというのはなしで（笑）
Nuxt.js道場に参加してきたのでアウトプットしてみる（Nuxt.js x CompositionAPI）

#はじめに
9月7日（水）に開催されていたNuxt.js道場なるものに参加させていただきました。
M&Aクラウド様主催でやられているイベントになります。

内容としては、開発方法や知見の共有の場という印象でした。
今回は第二回目とのことで4名の方が登壇し、自社の開発体験談を発表していました。

この記事では筆者なりの視点で執筆させていただきます。

#筆者のレベル感
今話題の駆け出しエンジニアです。笑
2021年4月から自社開発企業で修行中で、主にフロントエンドエンジニアとして日々励んでおります。
上記の入社時期から分かる通り半年もエンジニア経験のないペーペーです。

参加させてもらった経緯として、2つあります。
1つは、弊社でもVue.jsを利用した開発を行っている点。

もう1つは、個人的な興味です。
ちょうど自分のポートフォリオをNuxt.jsで作り変えたところだったのでタイムリーだなと思い参加させていただきました。

【宣伝】

https://hiroyukihp.com

#アウトプットの内容
初めに登壇されていたM&Aクラウドの津崎様の内容を今回記事にします。

#LaravelからNuxt.jsへ
もともとあった既存のLaravel製アプリケーションのフロント部分をNuxt.jsに移行中とのことで、
そこでの選定基準やメリットをメインに紹介してくれていました。

###Nuxt.jsを選んだ理由
・SSR(サーバサイドレンダリング)への移行がしたい
・Vue.jsに馴染みのあるエンジニアが多かった
・コンポーネントの利便性


###Nuxt.js　CompositionAPIって何？

######Nuxt.jsとは
vue.jsのフレームワークで、インストールされたタイミングでStoreやルーティング機能が備わっているものです。
SSRとユニバーサルモードができることが特徴です。

SSR（サーバーサイドレンダリング）とは、
サーバ側でHTMLを生成するWebアプリケーションで対義語としてCSR（クライアントサイドレンダリング）があります。
CSRは通常のVue.jsやReactに当たります。（SPAとも言われたりします）

ユニバーサルモードとは、
SSRした際に、クライアント側で追加のレンダリングなどを行う方式で、それを行うことで動的なサイトを作ることを可能としています。
結果、高速でリッチなアプリケーションの実現が可能になります。

######CompositionAPIとは
簡単に言うと、Vue.jsの記法です。
2020年9月にVue3に導入されました。
標準の書き方はoptionAPIといいます。（compositionAPI optionAPIどちらでもVue.jsは動きます）

大規模で複雑なコンポーネントを作る際に便利です。
中小規模であれば、optionAPIをおすすめします。

#メリット・デメリット

###メリット
######Nuxt.jsについて
・webアプリケーション開発に必要なものが揃っている
・SSR、SSG（静的サイトジェネレーション）が可能

######CompositionAPIについて
・関心事に処理をまとめて書くことができる
・大規模な開発にも耐えられる構成にできる


###デメリット
フロントエンドエンジニア初心者にとっては複雑になってしまう。
＠vue/compositionAPIではVuexを使わないとSSRとSSGで値の共有化（ハイドレーション）ができない。

Nuxt.jsはコードが多くなるとビルド時間がかかってしまう。


#最後に
いかがだったでしょうか。
初心者の僕にとってはとても勉強になったので、第３弾をやるなら是非参加させていただきたいです。
当時の資料も共有していただいていますので、リンク貼り付けておきます。

ありがとうございました。

https://macloud.connpass.com/event/222341/?utm_campaign=&utm_source=notifications&utm_medium=email&utm_content=title_link

https://macloud.jp/

https://speakerdeck.com/ytsuzaki/nuxt-dot-js-x-composition-api-x-typescript
Rails Tutorialで詰まったところのまとめ　第１章


◎コードをWebページに反映させるには「git push heroku」をターミナルで実行（デプロイ）しなければならない

◎「rails server」を実行する際は、「cd ~/environment/hello_app/」でカレントディレクトリを変更してあげる必要あり

◎「heroku create」ができるのは５つまで　▶　５つ作成したら「heroku apps」でappIDを確認して、「heroku destroy --app <appID>」で削除する

◎リスト1.19　「bundle install --without production」を実施する際は、「cd ~/environment/hello_app/」でカレントディレクトリを変更してあげる必要あり
M1 Mac + Dockerの環境でTensorflowをビルドする

# pip install tensorflowできない！
M1チップのMacではpipでTensorflowをインストールできません。AArch64に対応したパッケージはPyPIで公開されていないようです。Macに直接インストールする方法はいくつかあるみたいですが、環境は汚したくないのでDocker上で使いたいところ。少し調べたところ、ビルドするしかないみたいだったので、ビルドしてみました！
使えるようになるまで結構ハマるポイントがあったので、備忘録として残しておきます。

# 公式ドキュメントにビルド方法が書かれているが
https://www.tensorflow.org/install/source?hl=ja
ここにビルド方法が書かれています。

1. ビルド環境を用意してソースコードからビルド
1. ビルド環境が用意されたDockerイメージ上でビルド

上記の2通りの方法がありました。Docker環境でTensorflowを使いたいので、まずは2の方法でビルドを試みました。が、ビルドできませんでした。ビルドツールのBazelがx64向けのイメージだったようで、Bazelが使えず。。。

ということで、M1 Mac + Dockerの環境でTensorflowを使うにはビルド環境を一から準備してビルドしないと使えないようです。

# いくつかハマりどころがあります！
基本的には公式ドキュメントの通りに進めていけばいいのですが

1. Bazelのビルドオプション
1. 依存パッケージのh5py
1. numpyのバージョン

ここでハマりました。
なお、Bazelは公式ドキュメントに「Use Bazelisk (recommended)」とあったので、npmを使ってインストールしました。

## Bazelのビルドオプション
```
bazel build [--config=option] //tensorflow/tools/pip_package:build_pip_package
```
このコマンドでビルドしますが、メモリ8GのMac Book Airではオプション指定無しだとビルド中にメモリが足りなくなり完了しませんでした。公式ドキュメントには`--local_ram_resources=2048`でRAM使用量を制限してくださいとありますが、このオプションだけではまだメモリの問題で完了しません。最終的に

1. メモリを最大8GBまで使えるようにDockerDesktopの設定を変更
1. オプションは`--local_ram_resources=2048 --jobs=1`を指定

とすることでビルドできるようになりました。Dockerの設定は8GB未満でもいいかもしれませんが、最大にしておくといいと思います。（ビルド完了後は元に戻すことを推奨）
`--jobs`オプションは並列数を指定するオプションで、少しでもメモリ使用量を減らしたいので1にしています。2でもギリギリいけるかもしれませんが、メモリ８GBの環境では1が無難です。

## 依存パッケージのh5pyも・・・
Bazelのビルドが完了すれば、wheelの作成までは問題なく進められると思います。しかし、作成したパッケージをpipでインストールするときに、またハマりました。依存パッケージのh5pyが、これも、AArch64に対応したパッケージがPyPIで公開されておらずpipでインストールできず、Tensorflowもインストールできません。調べてみると、幸いapt-getで`libhdf5-dev`をインストールすることで、h5pyが使えるようになるみたいだったので、その方法を取りました。

```
apt-get install -y libhdf5-dev
```

でインストール後、

```
pip install --no-binary=h5py h5py
```

とすることで、インストールできました。

参考: https://github.com/h5py/h5py/issues/1181


## numpyのバージョン
これでようやくTensorflowをpipでインストールできるようになりました。
しかし！
`import tensorflow`でエラーが出ました...。
`RuntimeError: module compiled against API version`だそうです。どうやらTensorflowが要求するバージョンのnumpyがインストールされた環境でビルドしないといけなかったようです。
今回はTensorflow2.6で、numpyは1.19を要求されているので、

```
pip install numpy==1.19.2
```

でnumpyをインストールし直して、再度Tensorflowをビルドしました。Bazelのビルドからやり直しましたが、wheelの作成し直しだけでいいかもしれません。

# まとめ

AArch64環境でTensorflowをビルドする場合は以下の事項に注意！

1. ビルド環境に合わせてBazelのビルドオプションを指定する（`--local_ram_resources`だけでなく`--jobs`も使う）
1. numpyのバージョンはTensorflowのバージョンに合わせたものをインストールしないといけない
1. h5pyはapt-getでインストールした上で、pipの`--no-binary`でインストール

ビルドできてしまえば大したことないのですが、結構大変でした。（Bazelのビルド時間が結構長い。。。）


ここまで説明しておいてなんですが、おそらくDockerHubを探せばAArch64環境用のTensorflowイメージがあると思うので、それを使うのが手っ取り早いと思います。
ただ、ビルド設定で色々カスタマイズしたパッケージができます。（普通に使う分にはデフォルト設定で十分ですが）

Tensorflowをソースコードからビルドしようとしている人の一助となれば幸いです。
【初心者向け】Ruby on Railsのform_withを分かりやすく書き直してみる

Ruby on Railsでよく使うform_withですが、初めて見た時に何が書いてあるのかさっぱり分かりませんでした。

今は書いてあることが少しわかるようになったのでその備忘録です。

実行環境： Ruby on Rails 6.0

#まずは簡単なフォームの例

例えばnewアクションに対応したviewである new.html.erbでよく見かけるこんな例文があります。

```
<%= form_with model: @user, url: users_path do |f| %>
  <%= f.label :name %><br />
  <%= f.text_field :name, autofocus: true, autocomplete: "name" %>
  <%= f.submit "登録" %>
<% end %>
```
これは入力ボックスが一つだけ付いたフォームです。
RubyとRuby on Railsに慣れていないとこれがRubyの文法として正しいのか分かりませんよね。

これはもう少し変形してみると分かりやすくなります。

##フォームを分かりやすく変形する
<% %>は.erbの中でrubyの文を書く時に必要な物になります。まずは見やすくするために<% %>をはずします。

```ruby
form_with model: @user, url: users_path do |f|
  f.label :name
  f.text_field :name, autofocus: true, autocomplete: "name"
  f.submit "登録"
end
```

まだ見にくいですね。
rubyは()が省略可能です。次は省略されている()を戻してみます。

```ruby
form_with( model: @user, url: users_path ) do |f|
  f.label( :name )
  f.text_field( :name, autofocus: true, autocomplete: "name" )
end
```

これで少しはやっていることのイメージがしやすくなったかと思います。
form_withというメソッドを呼んでいたということです。そして、form_withの後ろに書かれていた

```ruby
model: @user, url: users_path
```
これらは引数だったということです。

##form_withの引数の書き方について
次はform_withの引数についてです。
form_withは2つの引数がありますが、変わった書き方をしています。

```ruby
model: @user
url: users_path
```

この書き方の意味が分かりませんよね。
これは挿入先を指定した引数です。

rubyはどの引数にどんな値を入れるのかを指定することができます。

```ruby
def add(arg1:, arg2:)
  p "arg1=#{arg1}"
  p "arg2=#{arg2}"
end

def test
  add(arg2:50, arg1:100)
end

#------- 結果
"arg1=100"
"arg2=50"
```

この例のaddメソッドの呼び出し方と同じです。
この場合、順番に関係なく、arg1に100、arg2に50が入ります。

form_withの例に話を戻します。

```
model: @user
url: users_path
```

この２つは modelという引数に@userを、urlという引数にusers_pathを入れていることになります。

引数は普通なら順番通りに入れないとだめですが、挿入先を指定することで順番を意識することなく引数に値を入れることができるようになります。

##uses_pathは何？
次に疑問に思うのが、users_pathですよね。
パスというと、http\://xxxx.com みたいな形式ですが、
users_pathとはどこで定義されていて、どこのurlにリンクされているのでしょうか？

これはプリフィックスと呼ばれるもので、以下の記事に書いています。
こちらもぜひ参考にしてください。

https://qiita.com/kobo_q/items/b90caf497a607b9f17f2

#まとめ
ここまで来ると何をしているかわかったのではないかと思います。

```
<%= form_with model: @user, url: users_path do |f| %>
  <%= f.label :name %><br />
  <%= f.text_field :name, autofocus: true, autocomplete: "name" %>
  <%= f.submit "登録" %>
<% end %>
```

まずはform_withメソッドでhtmlのformタグを出力します。
次にlabelメソッドでhtmlのタグを出力。
次にtext_fieldメソッドでhtmlのテキストボックスのタグを出力。
sumitメソッドでhtmlの登録ボタンを出力しているということです。

rubyの省略表記は便利だけど、初心者には分かりにくいですね…
【React Native】スタイル作成のコツについて

#はじめに
React(またはReact Native)のデザインパターンを勉強中ということで、今回はスタイル作成のコツについてまとめました。

前回まとめたContainer Componentパターンの記事は以下になりますので、もし興味があればあわせてご覧ください。

https://qiita.com/suzuki0430/items/369a671896f0c0e30793

#スタイル作成のコツ
React Nativeのプロジェクトでスタイルを作成するにあたり、以下のことを意識するのがとても大事です。

1. どのスタイルが適用されているかわかりやすくする
2. 新しいスタイルを作成する際にはベースのデザインを拡張する
3. スケールしやすいように柔軟性を意識する(スタイルの責務ごとにファイルを分割する)

1については、作成するプロジェクトの規模によって適用する方法が変わってきます。

- 小規模；インラインスタイルを適用する(コンポーネントに直書きでOK)
- 中規模；コンポーネントと同じファイル内にStyleSheetとしてまとめる
- 大規模；StyleSheet単体でjsファイルを作成する

また2については、以下のボタンのスタイルを例に考えます。
`fancyButton`や`loginButton`のスタイルを作成するにあたり、共通部分を`commonButton`としてまとめており、スプレッド`...`でオブジェクトを展開することでそれぞれのスタイルに適用しています。

複雑なスタイルを作成する際にも、このようにベースのスタイルを拡張していく方法をとることで、コードが格段に読みやすくなります。

```js
const commonButton = {
  width,
  marginTop: 10,
  borderBottomRightRadius: 4,
  borderWidth: 1,    
  borderBottomLeftRadius: 4 
};

  fancyButton: {
    ...commonButton,
    backgroundColor: Colors.buttonColor,
    borderColor: Colors.commonBorderColor
  }

  loginButton: {
    ...commonButton,
    backgroundColor: 'gray',
    borderColor: 'lightblue'
  }
```

#大規模プロジェクトにおけるスタイル作成のコツ
前項で、大規模プロジェクトにおいてはStyleSheet単体でjsファイルを作成したほうがよいと記載しました。

これを実際に実装すると以下のようなディレクトリ構成になります。
![スクリーンショット 2021-09-10 22.11.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/f5146995-64f0-5a42-5d21-821542474c0c.png)

`App.js`のコンポーネントに適用するスタイルを`AppStyle.js`にひとまとめしており、共通のスタイル(`Buttons`, `Colors`など)については`styles`ディレクトリの`index.js`から読み込んでいます。

```js:AppStyle.js
import { StyleSheet } from 'react-native';
import { Buttons, Colors, Metrics } from './styles';

export default StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-start',
    backgroundColor: Colors.background
  },
  label: {
    fontSize: 20, 
    alignItems: 'center',
    textAlign: 'center',
    margin: 10
  },
  input: {
    borderColor: Colors.commonBorderColor,
    borderWidth: 1,
    width: Metrics.screenWidth,
    height: 45
  },
  fancyButton: {
    ...Buttons.commonButton,
    backgroundColor: Colors.buttonColor,
    borderColor: Colors.commonBorderColor
  },
  loginButton: {
    ...Buttons.commonButton,
    backgroundColor: 'gray',
    borderColor: 'lightblue'
  }
});
```

共通スタイルは責務ごとにファイルを分割して作成し、`index.js`で読み込みます。
このような設計にすることで、新しいスタイルが必要になったときにも追加しやすいなどといった、柔軟性の高さ(スケーラブル)を得ることができます。

```js:index.js
import Buttons from './buttons'
import Colors from './colors';
import Metrics from './metrics';
import Typography from './typography';

export { Typography, Metrics, Colors, Buttons };
```

```js:colors.js
const Colors = {
  background: '#F5FCFF',
  commonBorderColor: 'gray',
  buttonColor: 'lightblue'
};

export default Colors;
```

#参考資料

https://www.udemy.com/share/1021u23@aoDrEP-32hw_JRu1JD_i5_Q2gJJNTCHBnq7_D-0WVPEccD1H2kYXmaQjlpgUkYPj/

https://moneyforward.com/engineers_blog/2020/02/18/react-component-rules/
コントローラーで定義した値をJSに受け渡す

# 開発環境
- OS：macOS Big Sur 11.2.2
- Ruby：2.6.5
- Ruby on Rails：6.0.0
- テキストエディタ：Visual Studio Code

# つまづいたこと
投稿の詳細画面から非同期通信でDB更新をしたいと考えたときに、更新に必要な値を更新アクションを定義しているコントローラーに渡せず詰まった。

コントローラーからビューファイルに値を渡すときはインスタンス変数を定義するが、JavaScriptへはどうしたらいいのだろう？と思い調べてみた。**gon**というgemの導入により実現できるらしい。

# 実践したこと
[gon](https://github.com/gazay/gon)は簡単にJSファイルにデータを受け渡すために作られたgemらしい。（と、いうことは難しい手順を踏めば使わなくてもできるということか・・・）

使い方は、

①まずgemファイルにgonを定義

``` gemfile
gem 'gon'
```

②gemをインストール

```
% bundle install
```

③includeの記述を追加
 下記の通り、headの**application.js読み込みより前に**追加する

``` application.html.erb
<head>
~
 <%= include_gon %>
 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
~
</head>
```

これで準備は完了。あとは、

④受け渡したい値を「gon.〜」という名前で変数定義する

``` recipes_controller.rb
def show
 # JSに渡す変数を定義
 gon.receipe_id = @recipe.id
end
```

⑤受け取ったJSファイルで使用

``` clip.js
// clipコントローラーへのリクエスト
const XHR = new XMLHttpRequest();
const URL = `/recipes/${gon.receipe_id}/clips`
XHR.open('POST', URL, true);
XHR.responseType = "json";
XHR.send();
```

以上。意外と簡単にできる。

# gonのその他の機能について
せっかくなので公式ドキュメントを見ていたら、```「gon.watch.〜」``という指定の仕方を見つけた。
どうやら値の一定間隔での置き換え・リフレッシュに使う模様。

今回は利用しなかったが、更新したDBのカウントを定義して、リアルタイムでカウント表示したりというときに使えそう。
AtCoderログ：0108 - ABC 142 C

# 問題

https://atcoder.jp/contests/abc142/tasks/abc142_c

## 問題文
> 高橋くんは $N$ 人の生徒たちのいるクラスの担当教師です。
> 生徒たちには $1$ から $N$ までの出席番号が重複なく割り当てられています。
> 今日は全ての生徒たちが相異なるタイミングで登校しました。
> 高橋くんは、出席番号 $i$ の生徒が登校した時点で、教室に $A_i$ 人の生徒たちがいたことを記録しています(出席番号 $i$ の生徒を含む)。
> 記録された情報を元に、生徒たちの登校した順番を復元してください。

## 制約
> ・$1 \le N \le 10^5$
> ・$1 \le A_i \le N$
> ・$A_i \ne A_j~(i \ne j)$
> ・入力はすべて整数

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

# 回答
## 回答1 (AC)
一番最初に生徒が登校した時の教室の人数は $1$ 人なので、それは $A_i=1$ となっている生徒です。また、二番目の生徒が登校した時の教室の人数は $2$ 人なので、それは $A_i=2$ となっている生徒です。同様に考えことで、$A_i$ が $1,2,3,...$ となるような生徒番号を出力すれば良いことがわかります。番号順に並べるにはソートを使いたくなりますが、この設問のように単純な場合には、$A_i$ をインデックスとする配列に $i$ を保存すれば良いでしょう。コードは以下のようになりました。

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

int main() {
  int n;
  cin >> n;
  
  int tmp;
  vector<int> a(n+1);
  for ( int i=1; i<=n; i++ ) {
    cin >> tmp;
    a.at(tmp) = i;
  }

  for ( int i=1; i<=n; i++ ) {
    cout << a.at(i) << " ";
  }
  cout << endl;
}
```

# 調べたこと
## [AtCoder の解説](https://atcoder.jp/contests/abc142/tasks/abc142_c/editorial) → [ユーザ解説](https://blog.hamayanhamayan.com/entry/2019/09/28/230626_1)
$A_i$ に対してソートを適用する方針でした。

## [AtCoder の解説](https://atcoder.jp/contests/abc142/tasks/abc142_c/editorial) → [コンテスト全体の解説](https://img.atcoder.jp/abc142/editorial.pdf)
回答1と同じ方針でした。

# リンク
## 前後の記事
- 前の記事 → [AtCoderログ：0107 - ABC 132 C](https://qiita.com/RoadLynton/items/79473a19725fa7ffc370)
- 前の記事 → [AtCoderログ：0109 - ABC 138 C](https://qiita.com/RoadLynton/items/08a442f4052f7a86320b)
「ニュートン法（2変数）」を参考にWolframAlphaとVBAソルバーとSymPyでやってみたい。

オリジナル

https://qiita.com/roadto93ds/items/0bf5679e8b0d819b0422

#wolframalphaで

https://www.wolframalpha.com/input/?i=f%28x%2Cy%29%3D%281%2F2%29*x**4%2B%281%2F3%29*x**3-2*%28x**2%29*y%2B3*y**2%2B3*x-1*y%2B4%E3%81%AE%E6%9C%80%E5%B0%8F%E5%80%A4&lang=ja

最小値
(x, y)≈(-2.57025, 2.36873) のとき, min{x^4/2 + x^3/3 - 2 x^2 y + 3 y^2 + 3 x - 1 y + 4}≈-4.38238

https://www.wolframalpha.com/input/?i=%281%2F2%29*x**4%2B%281%2F3%29*x**3-2*%28x**2%29*y%2B3*y**2%2B3*x-1*y%2B4&lang=ja

極小値
(x, y)≈(-2.57025, 2.36873) のとき, min{x^4/2 + x^3/3 - 2 x^2 y + 3 y^2 + 3 x - 1 y + 4}≈-4.38238
標準の計算時間制限を超えました...

#VBAソルバーで

エクセルのソルバーのダイアログ入力で普通にできますが、あえてVBAでチャレンジしてみました。ソルバーのための以下の参考の設定が必要です。
SolverAdd 関数について、微妙ですね。「問題の制約条件を追加します。」難しいです。
おすすめのサイトがあれば、教えて下さい。

参考　

https://docs.microsoft.com/ja-jp/office/vba/excel/concepts/functions/using-the-solver-vba-functions

```vb
Sub main()
    Range("A1") = ""
    Range("A2") = ""
    Range("A3") = ""
MsgBox "最小値を計算します。(1/2)*x**4+(1/3)*x**3-2*(x**2)*y+3*y**2+3*x-1*y+4"
'
    Range("A3").Formula = "=(1/2)*A1^4+(1/3)*A1^3-2*(A1^2)*A2+3*A2^2+3*A1-1*A2+4"
    Dim ws As Worksheet: Set ws = ActiveSheet
    SolverReset
    SolverOk setCell:=ws.Range("A3"), _
                   MaxMinVal:=2, _
                   ByChange:=ws.Range("A1:A2"), _
                   EngineDesc:="GRG Nonlinear"
    SolverAdd cellRef:=Range("A1"), _
         relation:=1, _
         formulaText:=-2
    SolverAdd cellRef:=Range("A1"), _
         relation:=3, _
         formulaText:=-3
     SolverSolve UserFinish:=True
End Sub
'結果
'-2.570248138
'2.368724738
'-4.38238056
```

#SymPyで
勉強中
cloudwatch agent と logs の違い

## 勉強前イメージ

agentはEC2にインストールしてとるやつ
logsはただ単にログ監視？それともagentからとってくる値？？？

## 調査

### cloudwatch agent とは

cloudwatchではCPUなど見れますが、
メモリやディスク容量などは見ることが出来ません。
その際に使用されるのが、clodwatch agentになります。
こちらはエージェントをEC2インスタンスにインストールし、データを取得します。

### cloudwatch logs とは

EC2やCloudTrail、Route53などから
ログファイルをモニタリングし、保存することが出来ます。
cloudwatch logsで使用中のサービスの各ログを一元管理することが出来ます。
また、ダッシュボードでのログデータのし可視化も出来ます。

## 勉強後イメージ

詳細まで見てないし、表面上しか見てないけど
agent → サーバ内に入って詳細を取得
logs → サービス全体からログを収集
って感じがする。
これ見てて、cloudwatch の標準・詳細・カスタムがあやふやになってきた・・・
今度確認する


## 参考

- [【初心者向け】Amazon CloudWatch Logs とは](https://www.sunnycloud.jp/column/20210708-01/)
画面を長押し時に検知 (UILongPressGestureRecognizer() )

#今回の内容

* 画面を長押しを検知します。
* 検知した時に、作成した処理を働かせる。

#コードと簡単解説

* `UILongPressGestureRecognizer(target: self, action: #selector(メソッド名))`で長押し時の処理を作成します。

* `viewなど.addGestureRecognizer(インスタンス)`で長押し時に処理が働くようになります。

```Swift:
   override func viewDidLoad() {
        super.viewDidLoad()

   let longtapDetection = UILongPressGestureRecognizer(target: self, action: #selector(screenLongTap))
        view.addGestureRecognizer(longtapDetection)

   }

    @objc func screenLongTap(){

            //長押しを検知した時の処理
    }
```

# 終わり
ご指摘、ご質問などありましたら、コメントまでお願い致します。
Webシステムのセキュリティについてのまとめ①

#はじめに
セキュリティを理解するために学んだことをアウトプットして理解を深めたいと思います。

# 背景
現在の日常においてWebサイトは生活の一部となっている。
一方で、それを逆手にWebシステム上の精密情報を抜き取り、不正な攻撃で狙いを定める攻撃者の犯罪行為は後を絶たない。そのため、Webシステムの運営にあたってセキュリティ対策が必要となっている

#情報セキュリティの３要素

情報セキュリティとは情報の「機密性」「完全性」「可用性」を維持することとされている。
これらの要素を情報セキュリティの３要素と呼んでいる。

また、情報セキュリティの3要素は、以下3つの用語を英語表記したときの頭文字を取って「CIA」と呼ばれています。

* 機密性（confidentiality）
* 完全性（integrity）
* 可用性（availability）


それぞれ深掘りして内容をみてみましょう！

#「機密性」
機密性は、情報を認められた人だけが使用できるような状態であること。
イメージとして、家の鍵は家族だけしか使用できないニュアンスです。
第三者の他の鍵で開いたら困りますね。
![images.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1572216/0ea891c8-d91f-04a1-8436-fd24987d828c.jpeg)

情報を外部に見せない、漏らさないことを意識することで、高い機密性を保持できます。
反対に、企業内に保持する情報に誰でもアクセスできる状況にあれば、それは機密性の低い状態と言えます。

__機密性の低い状態はなぜいけないのか？__
機密性が低ければ、情報漏えいや情報の破損などの原因に繋がるから。

__機密性を高める方法__

* パスワードに「123456」などの安易なものを設定しない
* ID/パスワードをメモなどに残さない
* 情報を外部へ持ち出さない
* 正当な権限を持つ者だけが情報にアクセスできる仕組みを作る


>余談ではありますがもっとも多くの人が使用している、もっとも危険なパスワードは「123456」という記事を見たことがあります。
[「123456」は7年連続トップ 危険なパスワードは「123456」](https://news.yahoo.co.jp/byline/fuwaraizo/20191223-00155995)

#「完全性」
完全性は、改ざんや過不足のない正確な情報が保持されている状態を指す。
Webサイトの改ざんが起こった場合には、企業としての信頼を失うことにもつながりかねません。

完全性を保持する対策として、

* 情報にはデジタル署名をつける
* 情報へのアクセス履歴を残す
* 情報の変更履歴を残す
* バックアップなどの情報を保管するルールを決める

#「可用性」

可用性は、情報をいつでも使える状態を保持すること。必要な時にいつでもアクセスできる状態を確保できる状態を意味する。

__可用性を保つために、以下のような施策が考えられる__

* システムの二重化（多重化）
* UPS（無停電電源装置）
* システムのクラウド化

#最後に
セキュリティと聞いて、漠然としたイメージだったので具体的に情報セキュリティとは3要素であり、どういった要素が満たされていれば情報セキュリティがしっかりしているといえるのかが理解できたのは学びになりました。また続きを発信して行きます！！！
Python(enumerate,zip,dict,os.path,directionary)

#今回は、enumerate,zip,dict,os.path,directionary　について整理していく。

## 1. zipの基本

```Python
# zipでは複数のリストを同時に結び付けることができる。
list1=['東京','大阪','愛知','北海道','埼玉']#都道府県のリスト
list2=[1,2,3,4,5]#数値のリスト
for i, j in zip(list1,list2):
  print('{0}:{1}'.format(i, j))

>>>
東京:1
大阪:2
愛知:3
北海道:4
埼玉:5
```
## 2. enumerateの基本

```Python
# enumerateではインデックスとリストの中身を同時に紐つけることができる。
list1 = ['東京', '大阪', '愛知', '北海道', '埼玉'] # 都道府県のリスト
for i, j in enumerate(list1):
  print('{0}:{1}'.format(i, j))

>>>
0:東京
1:大阪
2:愛知
3:北海道
4:埼玉
```
## 3. zipとdictの組み合わせ

```Python
list1=['東京', '大阪', '愛知', '北海道', '埼玉'] # 都道府県のリスト
list2=[1, 2, 3, 4, 5] # 数値のリスト

# list1とlist2の中身について、zipで結びつけ、dictによってディレクショナリを作成する。
directionary = dict(zip(list1,list2))

print(directionary)
>>>{'東京': 1, '大阪': 2, '愛知': 3, '北海道': 4, '埼玉': 5}
```

## 4. directionary(keyとvalue)

```Python
directionary['三重'] = 6 # 要素の追加
print(directionary)

>>>
{'東京': 1, '大阪': 2, '愛知': 3, '北海道': 4, '埼玉': 5, '三重': 6}
```

```Python
# directionaryから要素の取得：itemsでは、keyとvalueを同時に取得することができる。
for ad_key,ad_val in directionary.items():
    print(ad_key,ad_val)

>>>
東京 1
大阪 2
愛知 3
北海道 4
埼玉 5
```

## 5. os.pathによるディレクトリ構造の作成

```Python
import os 
# データ数
num=5
# カレントディレクトリの取得
cur_directory = os.getcwd() 
#フォルダ名
folders = ["learn", "validation", "test"]
# フォルダごとのパス定義
for folder in folders:
  for i in range(num):
    print(os.path.join(cur_directory, folder, str(i) + ".py"))

>>>
/content/learn/0.py
/content/learn/1.py
/content/learn/2.py
/content/learn/3.py
/content/learn/4.py
/content/validation/0.py
/content/validation/1.py
/content/validation/2.py
/content/validation/3.py
/content/validation/4.py
/content/test/0.py
/content/test/1.py
/content/test/2.py
/content/test/3.py
/content/test/4.py
```

- 上記のフォルダ構造の定義に基づき、mkdirをすることでディレクトリ構造の実態化をすることができる。
機械学習を行う前に、大量のデータを用意し、ディレクトリを用意して格納していく必要があるが、その際に自動化を図っておく技術があると便利。
M1Mac×Dockerでnode-sassは使えます

# 背景
Intel MacからM1 Macに乗り換え、Docker環境で`yarn install`した際に今まで発生しなかったnode-sass周りのエラーが発生した。

```package.json
{
  ...
  "dependencies": {
    "node-sass": "^4.12.0",
    ...
  }
}
```

## エラー内容

```
error /app/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: /app/node_modules/node-sass
Output:
Building: /usr/local/bin/node /app/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
...
Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Node Sass does not yet support your current environment: Linux Unsupported architecture (arm64) with Node.js 12.x
```

ググってみるとM1 Macの命令セットであるARM64の場合は挙動が異なるみたいで、Python make g++をDockerfileに追加するといいらしい。

```Dockerfile
--- a/Dockerfile
+++ b/Dockerfile
FROM node:12.21.0-alpine3.10

RUN apk update && \
  apk add --no-cache python make g++ # 追加
```

これらは[node-gyp](https://github.com/nodejs/node-gyp)が正常に動くために必要みたいですね。

# まとめ

M1 Macでnode-sass使えない系の記事が多かったので困っている方のお役に立てれば幸いです。
少なくともDocker環境では使えると思います。

# 参考

https://note.com/masuidrive/n/nc354b8781215
https://github.com/nodejs/node-gyp
AWS Data WranglerをAWS Access keyとSecret Access Keyを使う方法

AWS Data WranglerでAWS アクセスキーとシークレットアクセスキーを使う方法が見つからなかったので、コード見てみました。

`s3.read_parquet()` や `athena.read_sql_query()` など、だいたいのメソッドのには `boto3.Session` を引数で渡せます。

```python
def read_sql_query(
# ----省略 ----
    boto3_session: Optional[boto3.Session] = None,
# ----省略 ----
) -> Union[pd.DataFrame, Iterator[pd.DataFrame]]:
```
> 引用元 ： https://github.com/awslabs/aws-data-wrangler/blob/2.11.0/awswrangler/athena/_read.py#L607


例えば `athena.read_sql_query()` で言えば以下のように書けばAWS Access KeyとAWS Secret Access Key使ってAWS Data Wranglerを使えます。


```python
import awswrangler as wr
from boto3.session import Session

# AWS認証設定
ACCESS_KEY = "Axxxxxxx"
SECRET_ACCESS_KEY = "xxxxxxx"
AWS_REGION = "ap-northeast-1"

# boto3.Session取得
session = Session(
    aws_access_key_id=ACCESS_KEY,
    aws_secret_access_key=SECRET_ACCESS_KEY,
    region_name=AWS_REGION,
)

# クエリ情報
db_name = "my_db"
table_name = "my_table"
sql = f"""
SELECT * 
FROM {table_name} 
WHERE year = '2021' 
AND month = '9' 
AND day = '1';
"""

# AWSへリクエスト
df = wr.athena.read_sql_query(
    sql = sql,
    database=db_name,
    boto3_session=session,
)
```



# RDS Data APIについて ※2022/05/18追記
RDS Data APIでは以下のPRがマージされるまでboto3 sessionは使えません。

https://github.com/awslabs/aws-data-wrangler/pull/1261

それまでは以下のように `data_api.rds.connect.client` に外から認証済みの `boto3.client` を設定することでワークアラウンドできます。

```python
conn = wr.data_api.rds.connect(
    resource_arn="arn:aws:rds:ap-northeast-1.....",
    database="mydb",
    secret_arn="arn:aws:secretsmanager:ap-northeast-1:....",
)

# ★ここでdata_api.rds.connect.clientに認証付きのboto3.clientを設定します
session = Session(
    aws_access_key_id=ACCESS_KEY,
    aws_secret_access_key=SECRET_ACCESS_KEY,
    region_name=AWS_REGION,
)
conn.client = session.client("rds-data")



df = wr.data_api.rds.read_sql_query(
    sql="select * from my_table limit 10",
    con=conn,
)
```
Webサイトで一文字だけ異体字（IVS文字）にする

人名や企業名など、旧字体などが表示されないことがあります

葛→葛󠄀&#xE0100;

# IVS文字とは?
https://ja.wikipedia.org/wiki/%E7%95%B0%E4%BD%93%E5%AD%97%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF

# 文字コードの確認
下記サイトで文字コードを確認
https://wakufactory.jp/densho/font/ivs.html
https://747.github.io/vsselector/

# Webサイトでの指定方法
```html
葛󠄀&#xE0100;
```
`[使用したい感じ]&#x[コード]`で指定する

# その他の方法
- CSSですべての漢字を旧字体で表示する

```css
html {
  font-feature-settings: "jp83";
}
```
他の字体は`jp78` `jp83` `jp90` `jp04` `nlck` `trad`