OmniAICreator/Qiita-1.07M huggingface dataset:
JavaScript用語集

|用語|意味|
|--|--|
|トランスパイラー|新しいJavaScriptを従来のJavaScriptに変換すること ex)Babel|
|コンパイル|プログラミング言語から機械語(オブジェクトコード)に一括して変換すること|
|プラグイン|機能拡張用のソフトウェア|
|ビルド|コンパイルしたファイルを一つにまとめて、実行可能なファイルを作る事。|
|モジュール|アプリを機能単位に分割するもの。|
|イテレータ|オブジェクトの内容を列挙するための仕組みを備えたオブジェクト|
|ジェネレータ―|列挙可能なオブジェクトをより簡単に実装するためのもの|
|マジックナンバー|ソースコードに書かれた数値でその意味や意図が記述した<br>ex) 1.1と書かれている場合は消費税とはみんなが理解できるわけではない|
|ハードコード|マジックナンバーを書くこと、後で確認や変更が大変になるから避けるべし|
|リテラル|データ型に格納できる値そのもの、文字列や数字のことで変数に対していう ex) |
|関数リテラル|無名関数＝匿名関数＝変数に関数を代入して記述すること|
|テンプレート構文|バッククォート(``)で文字列をくくる。複数行にまたがる文字列や文字列への変数の埋め込みが可能になる|
|オブジェクト|ハッシュ＝連想配列＝キーでアクセス可能な配列のこと。<br>プロパティ＋メソッドで構成される|
|★Objectオブジェクト|すべてのオブジェクトの基本オブジェクト、すべてのオブジェクトがObjectオブジェクトの機能を利用できる|
|Mapオブジェクト|連想配列(ハッシュ)を管理するためのオブジェクト。文字列のみキーとして利用できるオブジェクトリテラルとは異なり、任意の型でキーを設定できる|
|Setオブジェクト|重複しない値の集合を管理するためのオブジェクト|
|Symbolオブジェクト|シンボル(モノの名前)を作成するための型|
|ラベル構文|多重ループを抜けるcontinueやbreak|
|要素|配列の個々のデータ|
|プロパティ|オブジェクトの個々のデータ|
|メソッド|オブジェクトの中に格納された関数|
|演算子|オペレーター＝Operator ex) =, +, --等|
|被演算子|オペランド＝Operand＝演算子によって処理される変数やリテラル|
|オーバーヘッド|何かをやった時に発生する付加的な処理|
|ビルドインオブジェクト|組み込み関数＝JavaScriptに標準で組み込まれた(用意された)オブジェクト|
|静的プロパティ|インスタンスを生成せずにオブジェクトから直接呼び出せるプロパティのことで、基本変更せずに読み取り専用として使われる<br>機能的にはグローバルプロパティと変わらないが、静的プロパティを使うことでグローバルプロパティを最小限にして、名前のバッティングを防ぐことが出来る|
|NaN|Not a Number＝不正な演算が行われた場合などに、数値として表現できない結果を表すために使われる。自分自身を含むすべての値と等しくない。|
|argumentsオブジェクト|関数呼び出しのタイミングで生成され、呼び出し元から与えられた引数の値を持つ。関数配下（関数を定義する本体部分）でのみ利用できる|
|スタック|入れたものから出していく|
|キュー|先入れ先出し|
|★NodeListオブジェクト||
|★可変長引数|個数が変更する引数|
|メンバ|オブジェクト指向プログラミングでクラスやオブジェクト(インスタンス)の持つ変数や関数などの要素のこと|
|アクセサメソッド|プロパティそのものは外部からアクセスできないようにして、代わりにプロパティにアクセスするためのメソッドを用意する。<br>参照用のゲッターメソッドと設定用のセッターメソッドがある。|
|サブクラス|既存のクラスを継承したクラスのこと|
|車輪の再発明|既に広く受け入れられている技術や解決策を(知らずに、意図的に)一から作る事|
|サロゲートペア文字|一つの文字に対して二つの文字コード(UTF-16等)を使って表される文字のこと|
|仮引数|関数を定義しているところにある引数|
|実引数|関数を呼び出しているところにある引数|
|基本型|プリミティブ型＝真偽値(boolean)、数値(number)、文字列(string)、null、undefined、シンボル(symbol)|
|参照型|基本型のいずれにも属さないもので、オブジェクト(object)、配列(array)、関数(function)がある。オブジェクトがコピーされる際にはオブジェクトが格納されているメモリ上のアドレス(参照値)がコピーされる。|
|参照渡し||
|即時関数|関数を定義した瞬間に実行するため、変数名のバッティングを防ぐ。letがあるから使わない|
|ブロックスコープ|{}ごとに作られるスコープのことで、ブロックの外部からはアクセスできない。letはブロックスコープを持つ|
|★ホイスティング|常に宣言はスコープの先頭で行われたことにされる|
|★オリジン|スキーム(プロトコルex) http, https)・ホスト(ドメインex) www)・ポート番号で構成される|
|クロスオリジン通信||
|クロスドメイン通信|ブラウザがオリジン以外のサーバからデータを取得する仕組み|
|クロスサイトスクリプティング|XSS＝攻撃者が悪質なサイトに誘導するスクリプトを仕掛けることでユーザーの個人情報などを抜く攻撃。インターネット掲示板など動的なWebサイトにある入力フォームの脆弱性を狙ったもの|
|クロスサイトリクエストフォージェリ―|CSRF＝ユーザーを一意に識別するためのセッションIDの管理に脆弱性のあるWebサイトにログインしたユーザーをターゲットにして、攻撃用のリクエストURLをクリックさせることでユーザーのセッションIDを使い脆弱性のあるWebサイトで不正操作や書き込み、改ざんなどをされる。|
|構造化データ|HTMLで書かれた情報を検索エンジンに理解しやすいようにタグ付けをしたもの|
|セマンティックWeb|メタ情報（文字コード、title、タイトルのしたの説明であるdescription等）を付加することでコンピュータが効率よく情報を収集・解釈できるようにする構想|
|★プロキシ|同じドメインのサーバで外部サービスにアクセスするための仕組み|
|クロスドキュメントメッセージング|異なるウィンドウ/フレームにあるドキュメントでメッセージを交換する仕組み|
|インラインフレーム|HTML5で廃止された|
|テストスイート|関連するテストのまとまりを表す入れ物|
Grafana でテキストパネルを作成する方法

Grafana でテキストパネルを作成する方法です。

<ol>
<li> Add Panel で Add an empty panel を選びます。

![dashboard_aa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/a54d7e1c-1bde-01f3-1e35-96ba36133bd9.png)

![dashboard_bb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/e047058f-bc5e-ccd6-822c-d400bd54ef07.png)

<li> Times series を Text に変更します。

![dashboard_cc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/8171fc82-1ac4-6fac-1c6e-3433738359b7.png)

![dashboard_dd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/56b3dbb8-2f06-b123-f21d-4d22683cb8f9.png)

![dashboard_ee.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/a82bc4c6-dbbd-3f1d-d85c-a81ec5a85700.png)

<li> Apply をクリックします。

![dashboard_ff.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/97ae7e73-a47b-9fbe-d51c-7c496098a320.png)

![dashboard_gg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/b4ea528a-28ea-e188-fea3-d1c99c2768fa.png)

</ol>

こんな風に変更もできます。
![dashboard_hh.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/c0739c73-1a80-239c-9b9e-15376a17791a.png)

画像も表示できます。
![panel_text_linux.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/8d23a72c-8344-7653-704b-54798f9c0ba0.png)

```text
 ![Image](https://ekzemplaro.org/png/linux_logo.png)
```


次のバージョンで確認しました。

```text
$ grafana-cli --version
Grafana CLI version 9.2.3
```
Tomcat 9

![web.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304520/ef4dabc4-975e-372a-4499-5daf9457c78b.jpeg)

https://www.journaldev.com/160/steps-to-configure-ssl-on-tomcat-and-setup-auto-redirect-from-http-to-https
https://www.turro.org/publications/119/tomcat-virtual-hosting-with-ssl

https://www.digitalocean.com/community/tutorials/how-to-create-a-self-signed-ssl-certificate-for-apache-in-debian-10

https://dzone.com/articles/sni-in-tomcat

https://www.codejava.net/servers/tomcat/how-to-use-virtual-hosts-in-tomcat
【Rails】アセットプリコンパイルされたファイルが保管される場所


Production環境ではデプロイ時にアセットプリコンパイルによって、
images、javascripts、stylesheets類がアセットプリコンパイルされる。

プリコンパイルされたファイル群は
**`public/assets`** 配下に保管される。
MACにbundleをインストールして失敗した時の話

##背景
mac環境にて、bundleコマンドを使用したかったが、そもそもインストールされていなかった為、セットアップをした。
インストールを試みたところ、エラーが発生したので、備忘録も含めて記述する。

##用意するもの
・MAC環境
・コマンドプロンプト(cmd / iterms)

##installフロー
###bundleインストールまでに実施していたフロー
####①rubyの場所を確認
```
# which ruby
/usr/bin/ruby
```

####②gemの場所を確認
```
# which gem
/usr/bin/gem
```

####③brewコマンドをアップデートする
```
# brew update
```

####④rbenvとruby-buildをインストールする
```
# brew install rbenv ruby-build
```

####⑤インストールされたrbenvのバージョンを確認
```
# rbenv versions
system (set by /Users/test.user/.rbenv/version)
```

####⑥rbenvコマンドを使ってどのバージョンをインストールするか一覧を参照する
```
# rbenv install -L
```
####⑦rbenvの2.5.6バージョンをインストールする
```
# rbenv install 2.5.6
```

####⑧rbenv 2.5.6をデフォルトに設定
```
# rbenv global 2.5.6
```

####⑨rbenv 2.5.6のバージョンに設定されているのかを確認
```
# rbenv versions
system
2.5.6 (set by /Users/test.user/.rbenv/version)
```

###bundle install実施
####gem installを使用
```
# gem install bundler
ERROR:  While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory.
```

####実施したこと①bash_profileにパスの情報を追記
```
# vi ~/.bash_profile 

[[ -d ~/.rbenv  ]] && \
  export PATH=${HOME}/.rbenv/bin:${PATH} && \
  eval "$(rbenv init -)"
```

####実施したこと②sourceコマンドを用いてファイルに書かれたコマンドを即座にシェル実行する
sourceコマンドを用いることで、ファイル内で変更するパス修正を即座に行なっていく

```
# source ~/.bash_profile
```

##まとめ
bundleがインストール出来ない時は、gemのある場所とrubyの配置場所を確認すること

##参考資料
[gem install が permissions エラーでインストールできない場合の対処手順](https://www.yururiwork.net/archives/1563)
WEBスクレイピング・クローリングまとめ

#はじめに
個人的なまとめです。全てにおいて利用規約確認要。

#クローリングとスクレイピング
・クローリング
　Webページのハイパーリンクを辿って次々にWebページをダウンロードする作業
・スクレイピング
　ダウンロードしたWebページから必要な情報を抜き出す作業

#オープンデータ
Open Definition|オープンの定義：https://opendefinition.org/od/2.1/ja/
誰でも自由に使える公開データのこと。
データを商業利用でき、再配布もできる。原則無料。

####オープンデータの例
https://www.data.jma.go.jp/gmd/risk/obsdl/

https://www.erms.nsr.go.jp/nra-ramis-webg/

https://www.tepco.co.jp/forecast/

######■不定期に更新されるWikipediaのdump
https://dumps.wikimedia.org/jawiki/

####オープンデータを探す
######■日本政府
https://www.e-stat.go.jp/

https://www.data.go.jp/

######■地方自治体
http://citydata.jp/

######■米国政府
https://www.data.gov/

#LOD(Linked Open Data)
Web上でリンクするオープンデータ。

####
https://lod-cloud.net/

####LODをダウンロードする（SPARQLエンドポイント）
https://data.e-stat.go.jp/lodw/

http://ja.dbpedia.org/

https://id.ndl.go.jp/information/sparql/

http://fukushima.archive-disasters.jp/sparqlendpoint/

#WebAPI（公開WebAPI）
######■政府 API
https://www.e-stat.go.jp/api/

######■国立図書館 API
https://www.ndl.go.jp/jp/use/api/index.html

######■twitter API
https://developer.twitter.com/

######■楽天 API
https://webservice.rakuten.co.jp/document/

######■Youtube Data API
https://developers.google.com/youtube/v3/getting-started?hl=ja

######■Yahoo!JAPAN API
https://developer.yahoo.co.jp/sitemap/

######■Google API
https://console.cloud.google.com/google/maps-apis/

#Webスクレイピング代行サービス(基本有料）

######■import.io(無料版無くなったようです)
https://www.import.io/

######■完全な人力
https://services.sms-datatech.co.jp/pig-data/dataorder/

#Webスクレイピング（自分でやる）

- VBA + IE
- Python
- Selenium + ブラウザ

####気をつけること

- UserAgentにメールアドレスなどの連絡先を記載
- robots.txtの確認（各サイトのトップに置かれているので/robots.txtでアクセスする）
- robots　metaタグの確認（各サイトのHTMLファイルに直接記載されている）

####モジュール
http://kondou.com/BS4/

https://www.selenium.dev/documentation/ja/

https://scrapy.org/

#Webデータ整形・解析

######■文字コード変換
https://linux.die.net/man/1/nkf

######■Excel+テキストエディタ
正規表現可能なお好きなもの

######■整形
https://linux.die.net/man/1/awk

https://www.nysol.jp/

https://pandas.pydata.org/docs/reference/index.html


https://taku910.github.io/cabocha/

######■形態素解析
https://taku910.github.io/mecab/

補足。mecab-python3のGitHubは、[こちら](https://github.com/SamuraiT/mecab-python3)

```bash
// Linux環境のインストール
$ apt-get install -y mecab mecab-ipadic-utf8 libmecab-dev
// 公式がPython2のみ対応のためPython3で使う場合、上記と合わせてこちらもインストール。
$ pip install mecab-python3
$ pip install unidic-lite
```

#参考
<a target="_blank"  href="https://www.amazon.co.jp/gp/product/4839956472/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4839956472&linkCode=as2&tag=cocolonifty00-22&linkId=2640f26305092751a58de1db3d17ed3c"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=4839956472&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL160_&tag=cocolonifty00-22" ></a>　　<a target="_blank"  href="https://www.amazon.co.jp/gp/product/B01NGWKE0P/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B01NGWKE0P&linkCode=as2&tag=cocolonifty00-22&linkId=a1319445e1121292477b6e8a1e7d0189"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=B01NGWKE0P&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL160_&tag=cocolonifty00-22" ></a>
JavaScriptを基本からまとめてみた【8】【getElementById】【随時更新】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##getElementById
『getElementById』はHTMLのタグ内で指定したid名にマッチするドキュメント要素を取得する<br>メソッド。次のように記述して使用する。

```
document.getElementById("id 名");
```

引数に HTMLタグ内で指定した id 名を指定する。


```sample.html
<p id="dat">Hello！</p>
```

```sample.js
document.getElementById("dat");
```

『document.getElementById("dat")』の返り値は Element オブジェクトで、その内容を画面上に表示すると次のようになる。

```
[object HTMLParagraphElement]
```
　
これだけでは、指定した p 要素の内容は不明。因みに、「 console.log(document.getElementById("dat")); 」として、
Element オブジェクトの内容をコンソールに出力すると、次のように表示される。

```console.log
<p id="dat">Hello！</p>
```

##textContent プロパティで表示テキストを取得

先ほどのサンプルで、p 要素  <p id="dat">Hello！</p> 内で通常必要となる値は、表示テキストの「 Hello！ 」の部分で、
表示テキストの内容を取得する場合は、getElementById メソッドを次のように記述して使用する。

```
document.getElementById("id 名").textContent;
```

表示テキストの内容は、getElementById メソッドに textContent プロパティを付けて取得する。
「 document.getElementById("dat").textContent 」を出力すると、次のようになる。

```
Hello!
```
　
テキスト内容の「 Hello! 」を取得。

##value プロパティで入力値を取得
『getElementById』メソッドは、Webサイトの画面で入力された値を JavaScript 側で取得する場合に よく使用し、
画面の入力値を取得する際には、getElementById メソッドを次のように記述して使用する。

```
document.getElementById("id 名").value;
```

入力値は、getElementById メソッドに value プロパティを付けて取得する。
valueプロパティの値は 文字列となるため、「 document ．getElementById（ "id 名" ） ．value 」の返り値は 全て文字列となる。
　
　##参考サイト
[JavaScript【 getElementById 】 ～ id 名を指定してデータを取得]
(https://programmercollege.jp/column/8278/)
Salesforceの基礎


どうも、世界規模でこれを行っているようで、同じ質問がバンバンきます。

#1週目
https://trailhead.salesforce.com/ja/users/trailblazerconnect/trailmixes/salesforce-fundamentals-week-1


#3週目
https://trailhead.salesforce.com/ja/users/trailblazerconnect/trailmixes/salesforce-fundamental-week-3

#4週目
https://trailhead.salesforce.com/ja/users/trailblazerconnect/trailmixes/salesforce-fundamental-week-4

#5週目
https://trailhead.salesforce.com/ja/users/trailblazerconnect/trailmixes/salesforce-fundamental-week-5

#6週目
https://trailhead.salesforce.com/ja/users/trailblazerconnect/trailmixes/salesforce-fundamental-week-6
Ctrl+Spaceで全角半角を切り替える

設定画面までの推移方法
1. IMEを右クリックしてプロパティを開く
1. General(一般)からKeymap Style(キー設定の選択)からCustomize(編集)を選択
1. 選択後以下の内容を追加する。

# 日本語 google ime 設定方法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295881/1b5a802c-15b0-94f2-b380-c09e74d3dd74.png)

# 英語 google ime 設定方法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295881/d90ef36c-a69d-4f0c-5ddd-9fc9b89f8623.png)
ビットとバイト

# ビット
ビット(bit)とは、コンピュータの扱う最小単位のことで、小文字のbで表記します。
コンピュータは複雑な処理をしているのではなく、実際はONとOFFつまり、「0」と「1」しか判別することができません。
画像や音声、動画などはこれをたくさん組み合わせることによって表現できているわけです。
1ビットで表せるのは1と0の2通りのみです。では2ビットではどうでしょうか？
この場合は2進数が2桁なので２の2乗となり、4通りになります。3ビットだと同じ考え方で2^3通りなので8通りですね。

# バイト
バイトは情報量の単位を表しており、8ビットと等しいです。つまり、1バイト = 8ビット　となります。大文字のBで表記します。
鉛筆でも１２本で1ダースというのと一緒ですね。１バイトだといくつ表現できるかというと2^8個なので256通りですね。pcでファイルをダウンロードするときなどに「1000バイト」のようなのをよく見ますが、これはバイトが情報量の基本単位として使用されているからです。

#参考文献
[キタミ式イラストIT塾　基本情報技術者　令和03年](https://gihyo.jp/book/2020/978-4-297-11781-8)
ExpoアプリにTracking Transparency を実装する

Expo のSDK 42が７月の初めに公開されました。じゃあ、ひとまずバージョン上げとくかと思って、SDKをバージョンアップしただけのものをApp Storeの審査に出したところ、リジェクトされました。

あれ？？？と思って、理由を見たら [App Tracking Transparency](https://developer.apple.com/documentation/apptrackingtransparency)を実装せよとのこと。iOS14.5以降では、アプリでトラッキングをするときにはユーザーの同意が必要とのことでした。確かに、最近いろんなアプリで同意画面を見たなあとは思ってました。

しかし、Expoはさすがというかもう用意されていました。TrackingTransparencyというのを使うだけですね。はい、expoコマンドでインストール。

```shell
$ expo install expo-tracking-transparency
```

実装もサンプルコードそのままインポート。

```typescript
import { requestTrackingPermissionsAsync } from 'expo-tracking-transparency';
```

自分のアプリの場合はFirebaseAnalyticsを入れていたので、いったんこれを停止。

```typescript
Analytics.setAnalyticsCollectionEnabled(false);
```

その上で、ユーザーの許可をもらえたら、再度有効にするとしました。

```typescript
useEffect(() => {
    (async () => {
      const { status } = await requestTrackingPermissionsAsync();
      if (status === 'granted') {
        Analytics.setAnalyticsCollectionEnabled(true);
      }
    })();
  }, []);

```

Expoの公式ドキュメントにイマイチ書いてないような気がしますが、app.jsonのios>infoPlist>NSUserTrackingUsageDescriptionを追加すると自分の設定したメッセージが出せるようです。

```json
"ios": {
    "infoPlist": {
        "NSUserTrackingUsageDescription": "We use Tracking to fix bugs and improve your experience."
},
```

![Screenshot_8_2_21__9_39_PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45686/3001c719-e101-ebac-b70f-f875b5f27e6f.png)


これでアプリをビルドして、再提出したところ無事審査が通りました。リジェクトはほとんど食らう余地のない小さなアプリなのですが、この対応面倒そうなと思った割にはそうでもなかったです。
CCNA Part1

##コンピュータネットワークとは

コンピュータ同士の繋がりのことを言う。
メリットはデータの共有ができることや、リソースの共有ができること、
低コストで情報の発信や受信をすることができる。
※リソースとはここでは複数のコンピュータによって共有されるハードウェアやソフトウェアのことである。

ネットワークは２種類に分かれます。
LANとWANになり、LANはLocal Area Networkのことで、
狭い範囲のネットワークです。WANはWide Area Networkのことで、
地理的に離れたLANとLANを結びつけることで構築する
広い範囲のネットワークです。電気通信事業者（キャリア）がサービスを提供している。

##インターネットとは

LANの一種です。
インターネットとはプロバイダ（ISP:Internet Service Provider) という
通信事業者を介して構成されます。
世界中のネットワークをTCP/IPを使って構成されます。
インターネットの技術を用いて作られた社内や組織のネットワークをイントラネットと言います。
また、イントラネットとイントラネットを結んだモノをエクストラネットと言います。

##サーバーとクライアント

ある機能を持ったソフトウェアのことをアプリケーションと言います。
また、自身が保有するアプリケーションのサービスを他に提供するコンピュータをサーバーと言います。
その際に他が保有するアプリケーションのサービスを利用する側のコンピュータをクライアントと言います。

##ネットワークユーザーアプリケーション

ネットワークを利用したアプリケーションをネットワークユーザーアプリケーションと言います。
・　ユーザーの実行や予め設定されたタイミングで自動実行や終了するものを
パッチアプリケーションと言います。
・　クライアントとサーバーでデータ通信が発生するものをインタラクティブアプリケーションと言います。
・クライアントとクライアントでデータ通信が発生するものをリアルタイムアプリケーションと言います。

##データが送られる仕組み

コンピュータはどんな情報も2進数データに変換して扱います。
そのデータを2進数データと言います。
そして、導線を通るために２進数データを電気信号に変換します。
ある情報をバイナリーデータに変換することを符号化（エンコード）、
逆にすることを復号化（デコード）と言います。
世に存在する様々な文字に対して1つずつ対応する番号をつけたものを
文字コードと言います。
これは様々な様式が存在します。
送信側で設定された文字コードと受信側で設定された文字コードが食い違っていると、
受信側で復号化に失敗して文字化けが起こってしまいます。
バイナリーデータを送信する際は0=電気OFF/１=電気ONに見立てた電気信号へと変換される。

##帯域幅

1秒間にどれだけの情報を送ることができるのかを表す言葉を帯域幅(bandwidth)と言います。
帯域幅の広さに比例して1秒間に送ることのできるデータの量が増えるので、通信速度と同じ意味合いで
使われるようになり、一般に1秒間に何bit送ることができるかを表すbps(bits per second)という
単位で表現される。2進数1桁を1ビットと言い、2進数8桁を1バイトと言います。
1バイト=8ビットで表します。

##通信障害

大量データ通信が原因でネットワークが混雑し、データ通信が困難になることを
輻輳と言います。また、信号は想定より早くor遅く宛先に到着することがあり、
これをジッタ(jitter)と言い、データの変質・劣化を引き起こし、
音声や映像の乱れなどを引き起こします。

##ノードとリンク

ノードはネットワークにおける機器のこと
ノードとノードの間のデータの通り道のことをリンクと言います。

##トポロジ

トポロジはノードの繋ぎ方です。用途に合わせて選びます。

・　バス型トポロジ　

バスと呼ばれる1本の同軸ケーブルに複数のノードを接続します。バスの終端には電気信号の反射による
ノイズを防ぐターミネータ(終端抵抗)が取り付けられています。
1箇所でも断線すると全体が機能しなくなり、拡張性が低いため、現在はあまり使われない。

・スター型トポロジ(ハブアンドスポーク)

1つの集線装置(ハブ)を中心にノードを接続するトポロジ
扱いやすく耐障害や拡張性に優れるため、一般的に使用される。
ハブ同士を接続して、スター型トポロジを拡張させる拡張スター型トポロジという。


・　リング型トポロジ

ノード同士を輪のように繋げたトポロジをリング型トポロジと言う。
トークンという信号が周回しており、それを受け取ったノードがデータ送信が可能になる。
順番に送信していくため、データの衝突はしない。

・　メッシュ型トポロジ

複数のノードを網目状に接続するトポロジのこと言います。
全ノードを繋ぐものをフルメッシュ、重要なノードに絞ったものをパーシャルメッシュと言います。
コストはかかりますが、高い冗長性を持ったトポロジです。

##通信の種類

・　ユニキャスト(1:1)
・　ブロードキャスト(1:全て)
・　マルチキャスト(1:特定のグループ)
Nuxt.jsのpluginについて

#目次　
[1.はじめに](#1-はじめに)
[2.pluginとは](#2-内容い)
[3.pluginの実装方法](#3-内容ろ)
[4.関数の呼び出し](#4-内容は)
[5.おわりに](#5-おわりに)

#1. はじめに
Vuexでmixinを使いたかったのですが、調べてみるとVuexでmixinを使用するという記事が見当たらず、その代わりにpluginで使用する記事がたくさん出てきたのでpluginを使用して共通メソッドを作成してみました。
#2. pluginとは
Nuxt.jsの拡張に使えます。
共通メソッドを定義してmixinsで読み込ませたり、ルートに追加することでthisで呼び出せたりします。
今回の場合は共通メソッドをplugionにまとめてVuexで使用したいと思います。

#3. pluginの実装方法

①ファイル作成
/plugin　にファイルを作成します。ファイル名は何でも構いません。
![スクリーンショット 2021-08-03 8.27.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641519/383fa7bc-892e-99e6-7d0e-092bdeb5c75d.png)


②ファイルにcomponentやstoreで使用したい関数を定義します。
書き方例 [Nuxt公式参照](https://ja.nuxtjs.org/docs/2.x/directory-structure/plugins#root-%E3%81%A8%E3%82%B3%E3%83%B3%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E6%8C%BF%E5%85%A5)

```js
export default ({ app }, inject) => {
  // Vue、コンテキスト、ストアに$hello(msg）を挿入します。
  inject('hello', msg => console.log(`Hello ${msg}!`))
}
```

・ ``export default ({ app }, inject) => {``ここでrootに追加する宣言を行いどこからでも呼び出し可能にします。

・``inject('hello', msg => console.log(`Hello ${msg}!`))``inject(`任意の関数名`, 引数 => 関数)の形にすることで実際にrootに追加する関数を定義できます。

③rootに直接追加するため、importは必要ありませんがnuxt.config.jsで読み込ませる必要があります。
![スクリーンショット 2021-08-03 13.04.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641519/006349c9-3ad5-28e6-3f13-04f95df2cce3.png)

#4. 関数の呼び出し
``this.$メソッド名``で呼び出すことができます。storeのactionsやmutationsを実行する感覚に近いですね。
template内で使用したい時はreturnを使用してmethodsで定義してあげます。


```js
export default {
  methods: {
    greeting () {
    this.$hello('tarou')
    // console.log 'Hello tarou!'
   }
  }
}

```

また、同じようにsore内でもメソッドを使用することができます。

```js
export const actions = {
  setSomeValueToWhatever({ commit }) {
    this.$hello('store action') //共通メソッド
    const newValue = 'whatever'
    commit('changeSomeValue', newValue)
  }
}
```
#5. おわりに
色々な記事を見ましたが公式が一番わかりやすかったです。
よくわからない方は公式の実装例を見ると理解が深まるかと思います。

[Nuxt公式参照](https://ja.nuxtjs.org/docs/2.x/directory-structure/plugins#root-%E3%81%A8%E3%82%B3%E3%83%B3%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E6%8C%BF%E5%85%A5)
よく使うバリデーション　（#コピペメモシリーズ）


# バリデーションとは

不正なデータがデータベースに保存されないようにデータをチェックするシステムをバリデーションという。
不正なデータの場合はデータベースに保存されない。

# validates 書き方
モデルクラスにvalidatesメソッドを指定することで、バリデーションをかけることができる。（バリデーションはモデルで設定する。）
このときに、validatesを用いてカラム名と内容を指定する。

## バリデーションの種類　一部分
###### # ・validates :カラム名, バリデーションしたい条件: 内容
###### # ・最大文字数：length: { maximum: 20 }
###### # ・最小文字数：length: { minimum: 20 }
###### # ・文字数の範囲：length: { in: 1..30 }
###### # ・空でない：presence: true
###### # ・他と被っていない：uniqueness: true
###### # ・正規表現：format: { with: /<正規表現>/}
###### # ・「<属性名>_confirmation」と一致：confirmation: true

```
例）
validates :name,  presence: true, length: { in: 2..20 }, uniqueness: true
validates :introduction, length: { maximum: 50 }
```
この場合
nameに空でない且つ２〜２０文字の範囲で他と被っていないバリデーション
introductionに最大文字数５０文字までのバリデーションがかかっています。


自分はよくバリデーションの書き方を忘れるのでmodelファイルに

```
# ・最大文字数：length: { maximum: 20 }
# ・最小文字数：length: { minimum: 20 }
# ・文字数の範囲：length: { in: 1..30 }
# ・空でない：presence: true
# ・他と被っていない：uniqueness: true
# ・正規表現：format: { with: /<正規表現>/}
# ・「<属性名>_confirmation」と一致：confirmation: true
```
バリデーションの書き方を貼り付けて作業しています。


終わり
ec2 サーバ内から自身のタグ情報を取得する


# 概要

aws-cli の describe-instances ではインスタンスIDを指定してタグ情報を取得できる。
自身のインスタンスIDを取得するには、インスタンスメタデータ取得を利用する。

## モチベーション

ansible でプロビジョニングの完了時にタグ情報を更新している。
ほかの独立したスクリプトでプロビジョニングの完了を待機したい。
そのためにタグ情報を取得したい。

# スクリプト

```bash
# インスタンスメタデータを取得して、自身のインスタンスIDを取得する。
export INSTANCE_ID=$(curl -s http://169.254.169.254/latest/meta-data/instance-id)

# aws-cli の describe-instances でインスタンスIDを指定して情報を取得する。
# ここでは Name タグを取得している。
NAME=$(aws ec2 describe-instances --instance-ids "${INSTANCE_ID}" --query 'Reservations[0].Instances[0].Tags[?Key==`Name`]|[0].Value')

echo ${NAME}
```

上記の describe-instances の query では Name タグの値を取得している。
Name タグがない場合、 null の**文字列**が返ってくる。

```bash
$ NAME=$(aws ec2 describe-instances --instance-ids "${INSTANCE_ID}" --query 'Reservations[0].Instances[0].Tags[?Key==`Name`]|[0].Value')
$ echo ${NAME}
"null"
もしくは
"インスタンス名"
```

# インスタンスメタデータ補足

## 取得について

インスタンスメタデータへのアクセスは「リクエスト/レスポンスメソッドの IMDSv1」と「セッション志向メソッドの IMDSv2」がある。
今回の記事のサンプルでは IMDSv1 を利用している。

インスタンスメタデータオプションにて「IMDSv2 でのアクセスのみ許可」や「インスタンスメタデータへのアクセスをすべてオフ」が設定できる。
うまくいかない場合は確認する。

## メタデータまとめて取得

```bash
$ curl http://169.254.169.254/latest/dynamic/instance-identity/document/
{
  "accountId" : "xxx",
  "architecture" : "x86_64",
  "availabilityZone" : "ap-northeast-1a",
  "billingProducts" : null,
  "devpayProductCodes" : null,
  "marketplaceProductCodes" : [ "xxx" ],
  "imageId" : "ami-xxx",
  "instanceId" : "i-xxx",
  "instanceType" : "t3.small",
  "kernelId" : null,
  "pendingTime" : "2019-12-13T10:47:08Z",
  "privateIp" : "xxx.xxx.xxx.xxx",
  "ramdiskId" : null,
  "region" : "ap-northeast-1",
  "version" : "xxx"
}
```

## メタデータ各種取得

`curl http://169.254.169.254/latest/meta-data/` で取得できるカテゴリがわかる。

```bash
$ curl http://169.254.169.254/latest/meta-data/
ami-id
ami-launch-index
ami-manifest-path
block-device-mapping/
events/
hostname
iam/
identity-credentials/
instance-action
instance-id
instance-type
local-hostname
local-ipv4
mac
metrics/
network/
placement/
product-codes
profile
public-hostname
public-ipv4
public-keys/
reservation-id
security-groups
services/

$ curl http://169.254.169.254/latest/meta-data/public-ipv4
xxx.xxx.xxx.xxx
```

# 参考ドキュメント

https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ec2-instance-metadata.html

https://docs.aws.amazon.com/cli/latest/reference/ec2/describe-instances.html

# 参考記事

https://qiita.com/ashikawa/items/a40dcf018e8679ba718d

https://qiita.com/toshiro3/items/37821bdcc50c8b6d06dc
【Rails】Todoリスト カードの移動実装

###はじめに
Todoリストアプリを作成するにあたって、カードの移動を実装してみたので
備忘録として記事を書く。

### 使用環境
Rails 6.0.4'

### カードの移動って？
![スクリーンショット 2021-08-03 12.02.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1183228/b4246afd-10b9-77bb-787c-c3e98e393792.png)
![スクリーンショット 2021-08-03 12.03.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1183228/0de770a3-b786-b711-0949-67a602b0bcd7.png)
![スクリーンショット 2021-08-03 12.03.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1183228/5bfc1026-61db-4f4e-d5ba-e54450409120.png)

#### リストBOXをいじってカードを移動してあげる。この実装をやろうと思います。

### やり方

```ruby:app/controllers/card_controller.rb

  def edit
    # ここに追加
    @lists = List.where(user: current_user)
  end

```

editアクションに `Listモデルからuser_idがcurretn_user.idと一致するレコードの情報を取得するというコード`を
記載する。

```erb:app/views/card/edit.html.erb

<div class="cardeditPgae">
  <div class='container'>
    <%= form_with model: @card, url: { action: :update }, html: { class: 'cardeditForm' }, local: true do |f| %>
      <% if @card.errors.any? %>
        <p class="text-danger">タイトルは1～255文字以内で入力してください</p>
      <% end %>
      <div class="cardeditForm_title">
        <%= f.label :title %>
        <%= f.text_field :title, class: "form-control", placeholder: "カード名" %>
      </div>
      <div class="cardeditForm_memo">
        <%= f.label :memo %>
        <%= f.text_area :memo, class: "form-control", placeholder: "詳細" %>
      </div>

      <%# ==========ここから追加する========== %>
      <div class="cardeditForm_memo">
        <label>リスト名</label>
        <%= select :card, :list_id, @lists.map{ |l| [l.title, l.id] }, {}, { class: 'form-control' } %>
      </div>
      <%# =========ここまで========== %>


      <div class="text-center"><%= f.submit "更新する", class: "submitBtn" %></div>
    <% end %>
  </div>
</div>
```
重要なのはこのコード

```erb
  <%= select :card, :list_id, @lists.map{ |l| [l.title, l.id] }, {}, { class: 'form-control' } %>
```

では説明してきます。

```
select プロパティ名, タグの情報, {オプション}, {HTMLオプション}
```
それぞれが表しているもの

```
- プロパティ名 : カラム名 (下記に補足あり)
- タグの情報 : セレクトボックス表示に使うデータの配列 or ハッシュ
- オプション : セレクトボックスのオプション（include_blank, selectedなど）
- HTMLオプション : HTMLのオプション (id, classなど)
```

これでリスト名を変更したら、カードのリストが移動できるはずです。

備忘録終了
S3の静的ホスティング機能によって生成されたURLをhttpsにする方法

AWS S3の静的ホスティング機能により生成されたURLはデフォルトではHTTPとなっている。正式に？HTTPSリクエストに対応するためにはCloudFrontを利用する必要があるが、利用せずできないか調査した。

## 方法

`http://{バケット名}.s3-website-ap-northeast-1.amazonaws.com/`
を下記のようにバケット名のいちを変更すると良い。

↓

`http://{バケット名}.s3-ap-northeast-1.amazonaws.com/index.html`
terraform plan しなくても自動で文法注意してくれる設定を入れてみた

## これは何
VScodeにて、terraform plan しなくても自動で文法注意してくれる設定を入れてみた、の記録です。
前提として、以下Extensionは入れてます。

```
https://marketplace.visualstudio.com/items?itemName=mauve.terraform
```

## やってみた

```
$ brew install tflint
```

Pathが通っていれば、すぐ使えると思いますです。

適当にVPC作って、変な文法で書いてみます。

![スクリーンショット 2021-08-03 11.24.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1740345/8dffaf71-4d36-1505-f751-685e6ce76e10.png)


ちゃんと注意されますね。すごい！


## 参考

```
https://sil.hatenablog.com/entry/terraform-linter-tflint-release
```
RDS Oracle で Statspack snap の ORA-00001発生

Oracleの情報を参照してもなかなか良い解決方法見つからない。
（既存データ保存、スクリプト修正などの方法ばかり）

ネットで下記の記事を参考にしたところ解消した。
※PK無効化は CREATEの直前に実施
https://nabhesh-joshi-oracledba.blogspot.com/2017/06/statspack-snap-failed-with-ora-00001.html

```sql
-- (1) DDL取得
select DBMS_METADATA.GET_DDL('INDEX','STATS$SQL_SUMMARY_PK','PERFSTAT') FROM DUAL;

-- (2) PK無効化
ALTER TABLE PERFSTAT.STATS$SQL_SUMMARY MODIFY CONSTRAINT STATS$SQL_SUMMARY_PK DISABLE NOVALIDATE;

-- (3) (1)で取得したDDLから、UNIQUEを削除したDDL
CREATE INDEX "PERFSTAT"."STATS$SQL_SUMMARY_PK" ON "PERFSTAT"."STATS$SQL_SUMMARY"
...
TABLESPACE "PERFSTAT";

```

----

なお、RDS Oracleでは PERFSTATユーザはデフォルトではログインできないため、下記にて有効化しておく。
https://aws.amazon.com/jp/premiumsupport/knowledge-center/performance-statistics-rds-oracle/

```sql
ALTER USER perfstat IDENTIFIED BY <new_password> ACCOUNT UNLOCK;
```
describe-security-groups の内容を jqで整形

セキュリティグループの設定を

``` bash
# SG_IDには セキュリティグループIDを設定
# リスト指定も可能 (https://docs.aws.amazon.com/cli/latest/reference/ec2/describe-security-groups.html)
SG_ID=sg-1234567 

# jqで整形して出力
aws ec2 describe-security-groups --group-ids ${SG_ID} | jq -r '.SecurityGroups[] | .IpPermissions[] | .FromPort, "    " + .IpRanges[].CidrIp'
```
Lambda の同時実行数を awscliで確認

AWSよりLambdaの同時実行数を0に設定していると動作化が変わるので確認するよう通知がきた。
そのため、Lambdaのに設定されている同時実行数を確認するコマンド。



``` bash
for func_name in `aws lambda list-functions | jq -r ".Functions[] | .FunctionName"`; do
  echo "${func_name}";
  aws lambda get-function-concurrency --function-name ${func_name};
done;
```
ufw 備忘

# 有効化

```bash
sudo ufw allow proto tcp to 0.0.0.0/0 port 22
sudo ufw enable
sudo ufw status
sudo ufw reload 
```

実行例

```
$ sudo ufw allow proto tcp to 0.0.0.0/0 port 22
$ sudo ufw enable
Command may disrupt existing ssh connections. Proceed with operation (y|n)? y
Firewall is active and enabled on system startup
$ sudo ufw status
Status: active

To                         Action      From
--                         ------      ----
22/tcp                     ALLOW       Anywhere                  

$ sudo ufw reload 
Firewall reloaded
```

# 設定確認

```
sudo ufw status
```

## ルールの削除

```bash
sudo ufw delete <ルールの番号>
```

実行例

```
$ sudo ufw status
Status: active

To                         Action      From
--                         ------      ----
22/tcp                     REJECT      Anywhere                  
10.125.0.0/16 22/tcp       ALLOW       Anywhere                  

$ sudo ufw delete 1
Deleting:
 reject 22/tcp
Proceed with operation (y|n)? y
Rule deleted
$ sudo ufw status
Status: active

To                         Action      From
--                         ------      ----
10.125.0.0/16 22/tcp       ALLOW       Anywhere                  
```

# Dockerのポートフォワード

Dockerコンテナにポートフォワード設定したとき、ufwでフォワード元のポートへのアクセスを許可しなくても通信できてしまった。
Dockerのポートフォワードを設定すると、iptablesが書き換えられるのでufwでポートへのアクセス許可をしなくても通信できてしまうようである。[^1]

```
Chain DOCKER (2 references)
target     prot opt source               destination         
ACCEPT     tcp  --  0.0.0.0/0            172.19.0.3           tcp dpt:80
```

[^1]: https://qiita.com/jqtype/items/9574ef74868b73323939
複数のPDFファイルの文字列を一つのテキストファイルにまとめる

```zsh:concat.zsh
#!/usr/bin/zsh
for i (**/*.pdf) pdftotext -layout -nopgbrk "${i}" - >> OUT.txt
```


* `for i (**/*.pdf)` はこのディレクトリ以下のすべてのpdfファイルを列挙して変数`$i`に格納する。
* `pdftotext`はPDFファイルのテキストを抽出してファイルまたはSTDOUTに出力するコマンド。お使いのパッケージマネージャーでpopplerとかpoppler-utilをインストールしてください。
* `-layout -nopgbrk` は`pdftotext`のオプションで、レイアウトを読みやすくするためのインデントとページ改行削除の設定
* `${i}` にはすべてのpdfファイル名が相対パスで入る。ダブルクオーテーションと`{}`を入れないとスペースをコマンド区切りのスペースと認識してしまう
* `-` は`pdftotext`の結果を標準出力へ吐き出す。
> pdftotextの標準的な使い方は、第二引数に出力ファイル名を指定する。

* `>> OUT.txt` でtxtファイルへ標準出力を追記していく。
* zsh専用

> bash用はbashで仕事したいあなたがこの記事を編集してくれる
Ruby問題のアウトプット


#問題20

Aさんは普段土日が休みの仕事に就いており、休みの日は遅くまで寝ていたいと考えているとします。
そこで、Aさんのためにその日が遅くまで寝ていられるかどうかを判断するプログラムを作成しましょう。
休みの場合はTrueを、休みでない場合はFalseを出力し、Trueの場合は長く寝ていられると判断します。

休みかどうかを判別するメソッドsleep_inを定義し、引数として2つ渡します。1つ目が月~金曜日（weekday）であるかどうか、2つ目祝日やお盆休みなどの休暇日（vacation）であるかどうかです。

具体的には、土曜日または日曜日の場合（weekdayがfalseの場合）や、休暇日（vacationがtrue）の場合は、休みとなるのでTrueを返します。

呼び出し方：

```
sleep_in(weekday, vacation)
```

出力例:

```
sleep_in(false, false) → True
sleep_in(true, false) → False
sleep_in(false, true) → True
```

#答え
```
def sleep_in(is_weekday, is_vacation)
  if is_weekday != true || is_vacation == true
    puts "True"
  else
    puts "False"
  end
end
```

「月〜金曜日ではない」　→ is_weekday
「または」　→ ||
「休暇日である」　→　is_vacation

これで休日か否かを判別することができる。
[JAVA][SpringBoot]HttpClientが通信の際に利用しているTLSのバージョンを確認する

## やりたいこと
* SpringBoot（2.3.3.RELEASE）で作成されたWebアプリが、ある外部APIに接続する際に、HttpClientがセキュリティ通信方式としてTLSのバージョンのいくつを利用しているのかを調べる

## 解決できた方法
* 出力するログレベルをDEBUGにした上で実際に通信させたところ、SSLConnectionSocketFactory がログに情報を出力した

## 解説
### HttpClientのバージョン
* 4.5.3
* build.gradle に記述があった  
  `implementation 'org.apache.httpcomponents:httpclient:4.5.3'`
* gradleでの記述を検索する際、「HttpClient」「httpClient」みたいに大文字を入れて検索してる間は見つからなかったので全部小文字で検索すべきだった

### 直面した困難
* 検索したところ、HttpClientが利用するTLSのバージョンの設定方法はヒットするが現在実際にどれを使っているのかの調べ方はヒットしなかった
  * 設定の仕方検索結果例 : https://www.it-swarm-ja.com/ja/java/apache-httpclient%E3%81%A7tls%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/1051584886/

### ログに出るという記述
* 参照 : https://www.fixes.pub/program/90204.html
* 以下のようなログが出るらしい

```
[DEBUG] SSLConnectionSocketFactory - Enabled protocols: [TLSv1, TLSv1.1, TLSv1.2]
（略）
[DEBUG] SSLConnectionSocketFactory -  negotiated protocol: TLSv1.2
```

↓
* 設定ファイルを編集してDEBUGレベルのログが出力されるように変更し、実際にAPIと通信させたところ、該当のログが表示された

```
DEBUG o.a.h.c.s.SSLConnectionSocketFactory - Enabled protocols: [TLSv1, TLSv1.1, TLSv1.2]
（略）
DEBUG o.a.h.c.s.SSLConnectionSocketFactory -  negotiated protocol: TLSv1.2
```

### クライアント - サーバー間でのTLSバージョンの交渉
* 参照 : https://www.baeldung.com/apache-httpclient-tls

> 1. The client sends a list of supported TLS versions.
2. The server chooses one and includes the selected version in the response.
3. The client and server continue the connection setup using the selected version.

↓
ざっくり解釈すると、

1. クライアント → サーバー : サポートしているTLSのバージョンのリストを送る
2. サーバー → クライアント : 送られてきたTLSのバージョンからひとつ選びレスポンスする
3. クライアント ←→ サーバー : 選択されたTLSバージョンを用いて以降の接続を行う

↓

取得できたログを解釈すると

* `Enabled protocols: [TLSv1, TLSv1.1, TLSv1.2]` → サポートしているTLSのバージョンのリストを送っている
* `negotiated protocol: TLSv1.2` → 利用するTLSバージョンをTLS1.2として選択している
[Rails]ransackを使った検索機能

今回は、`ransack`というgemを使った検索機能の解説をしていきたいと思います。

`ransack`を使うことで、検索機能をかんたんに実装することができます。
gemの素晴らしさを体感できる系ですねw

#開発環境

> ruby 2.6.3
> Rails 5.2.6

#前提

検索機能は、ユーザーの検索を例に出していくので、すでになんらかのアプリで、ユーザーが存在するものをご準備ください。

#手順

- gem ransackのインストール
- コントローラー
- ルーティング
- ビュー

#gem ransackのインストール

まずは、gem ransackをインストールします。

```Gemfile
gem 'ransack'
```

を追加できたら

```
$ bundle install
```

#コントローラー

ではさっそく、検索の処理をコントローラーに記述していきます。

ここでは、usersコントローラーにsearchアクションには、検索の処理を、indexアクションでは検索結果を取得しています。

```controllers/users_controller.rb
  before_action :search
  
  def search
    # params[:q]のqには検索フォームに入力した値が入る
    @q = User.ransack(params[:q])
  end
  
  def index
    # distinct: trueは重複したデータを除外
    @users = @q.result(distinct: true)
  end
```

ん？なんでbefore_action使ってるのかって？

使わないと`No Ransack::Search object was provided to search_form_for!`というエラーが出ます。

これに結構苦しめられました。。

users/indexビューでsearch_form_forを使ったときに怒られるので、before_actionでどこのアクションでもsearchアクションを使えるようにしておきます。

#ルーティング

usersコントローラーのseachアクション用のルーティングを設定しておきます。

```config/routes.rb
resources :users do
  collection do
    get 'search'
  end
end
```

#ビュー

ビューでは、検索フォームと検索結果の表示をしていきます。

検索方法は、あいまい検索（部分一致）を指定。
ほかにも、「完全一致」「前方一致」「後方一致」などが指定できます。

```erb:views/users/index.html.erb
<!--検索フォーム-->
<%= search_form_for @q do |f| %>
  <!--name_contは、あいまい検索を指定-->
  <%= f.text_field :name_cont %>
  <%= f.submit "検索" %>
<% end %>
<!--検索結果-->
<% if @users.present? %>
  <!--検索がヒットした場合-->
  <% @users.each do |user| %>
    <%= user.id %>
    <%= user.name %>
  <% end %>
<% else %>
  <!--検索がヒットしなかった場合-->
  <p>検索結果はありません</p>
<% end %>
```

#まとめ

ransackを使った検索機能の導入手順は以下

>- gem ransackのインストール
- コントローラー
- ルーティング
>- ビュー

今回は、ransackを使ってかんたんな検索機能を実装してみました。

検索機能自体はできているのですが、実用化に向けてはまだまだ改善が必要です。

ソート機能や複数条件の指定、複数テーブルでの検索等、いろいろできますので、ご自身で調べてみてください。

時間があれば記事にします。

では、最後まで見ていただきありがとうございました。
[Ruby on rails] ”undefined method `each' for nil:NilClass”エラーが出た時の対処法

<h2>エラー画面</h2>

グループを作成後、一覧画面でグループ一覧を作成しようとしてたところ、
こんなエラーが出てきました。
<h4>こういうエラーは大体スペルミスに原因があるのではないかと思います！</h4>

![スクリーンショット 2021-08-03 9.49.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633266/bacd570a-6c0c-5a9b-3fa0-3677aaa2fc45.png)

<h2>解決方法</h2>

コントローラー、モデルの記載を見直せど、スペルミスは見当たらず...
createコントローラーをよく見たのですが、わからず...
form_withでの送信がなんか、おかしいのかな~?と思ってみたら...


<h6>ここでした！</h6>
```erb
<%= form_with model: group, local: true do |f| %>
    <div class="form-group">
      <%=f.label"勉強会名"%>
      <%= f.text_field:title,class:"form-control" %>　　　　＃ここです！！！
    </div>
   省略
```


```ruby:マイグレーションファイル
class CreateGroups < ActiveRecord::Migration[5.2]
  def change
    create_table :groups do |t|
      t.string :name,null: false
      t.text :introduction,null: false
      t.string :image_id
      t.integer :owner_id
      t.string :status
      t.timestamps
    end
  end
end
```

<h4>マイグレーションファイルでは、グループ名を:nameとしてるのにも関わらず・・・
form_withで:title として送っていました:v_tone2:</h4>
ここを直したら、ちゃんと一覧表示できました。

<h2>参考にした記事</h2>

https://qiita.com/somarihair/items/f0d3d3be11e1b6b85df7
CAPTCHA画像の文字をOCRエンジンで読み取ることができるか

## 目的
- OCRを勉強中、下記のようなCAPTCHA画像の文字を読み取ることができるか気になったので試してみました

![captcha.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226953/897609fe-898e-04ed-bb38-e1e7190d30bd.png)


## 環境
- Python 3.8
- PyOCR
- Tesseract
※下記の記事を参考に導入しました。ありがとうございました。

https://qiita.com/nabechi6011/items/3a367ca94dbd208efcc7


## コード

```python
from PIL import Image
import sys
import pyocr
import pyocr.builders

# OCR群を取得
tools = pyocr.get_available_tools()
# OCRがなければエラー
if len(tools) == 0:
    print("No OCR tool found")
    sys.exit(1)

# OCRはTesseractしか入れていないため、先頭の要素にTesseractが入っている
tool = tools[0]
print("Will use tool '%s'" % (tool.get_name()))

# 画像から文字を抽出
txt = tool.image_to_string(
    Image.open("画像のパスを記載"),
    # tesseract_layoutの設定値については、下記リンク参照
    # http://tanaken-log.blogspot.com/2012/08/imagemagick-tesseract.html
    builder=pyocr.builders.TextBuilder(tesseract_layout=6)
)
print(txt)
```

## 結果
- 正確に読み取れたのは`g`のみ


```console:tesseract_layout=6
Bg hes:
```

- `tesseract_layout`の設定を変えて試してみる
  - 下記以外の設定だと、そもそも何も読み取れなかった 

```console:tesseract_layout=5
Oo:
```

```console:tesseract_layout=7
agit e's.
```

```console:tesseract_layout=8
Bg tes.
```

```console:tesseract_layout=9
BG WSs
```

```console:tesseract_layout=10
agit e's.
```

## 結論
- 自分が試してみた限り、CAPTHCA画像の文字を読み取ることはできなかった
- 別のOCRエンジンなら可能性はあるのか？
- そもそも、CAPTHCAってそういうもんですよね
ECS 負荷テストメモ

ECS Fargateで動いているWEBアプリをシステム運用しており、同時600リクエストに耐えられるかどうかテストをしたのでそのメモ。

* ECS FargateのTask定義（Memory, vCPU）と実行タスク数を微調整しながら Apache Bench コマンドで負荷テストを実施
* WEBアプリは PHP 7.2 + Laravel + Apache
* ApacheのPrefork設定はここでは触れない
* 負荷テストのエンドポイントはDBに軽いSELECTを発行して200を返却するだけのプログラムを設置


# Task数: 1, vCPU: 1, Mem: 2048MB で負荷テスト

```
ab -n 300 -c 300 https://foobar.com/database_health_check
Concurrency Level:      300
Time taken for tests:   48.329 seconds
Complete requests:      300
Failed requests:        0
```
まさにギリギリといった印象、一瞬の高負荷なためECSのAuto Scalingは動きませんでした。
試しに、これを２回連続で実行してみました。

```
ab -n 300 -c 300 https://foobar.com/database_health_check
Concurrency Level:      300
Time taken for tests:   45.789 seconds
Complete requests:      300
Failed requests:        16

ab -n 300 -c 300 https://foobar.com/database_health_check
Concurrency Level:      300
Time taken for tests:   31.643 seconds
Complete requests:      300
Failed requests:        237
```
おそらく最初の負荷テストでサーバーがダウンして、Cloud WatchのヘルスチェックがNGとなり、タスクが削除され、新しいタスクが起動されていました。もちろんその間リクエストは届きません。
CPUやメモリ使用率も100%になっていました。

# Task数: 2, vCPU: 2, Mem: 4096MB で負荷テスト

タスクも常時2にして、スペックも上げたので
今度は倍にして600リクエストを並列で送ってみます

```
ab -n 600 -c 600 https://foobar.com/database_health_check
Concurrency Level:      600
Time taken for tests:   25.876 seconds
Complete requests:      600
Failed requests:        0
```

メモリはMaxで67%, Avgで54%
CPUもMaxで99%, Avgで37%

タスク２個ではこの辺が限界な気がするが、並列1,000リクエストでトライ

```
ab -n 1000 -c 1000 https://foobar.com/database_health_check
Concurrency Level:      1000
Time taken for tests:   46.078 seconds
Complete requests:      1000
Failed requests:        179
```
やはりだめでした。。。
メモリはMaxで92%, Avgで87%
CPUもMaxで99%, Avgで34%

2vCPUかつ4GBメモリのApacheで並列300リクエストが限界なのかなぁ。
気になるあの上司は何時まで仕事をしているの？調査しよう。 Part III: データ分析編 (AWS CloudWatch/スプレッドシート)

## 注意

この記事は Slack の在籍状況を DB 等に保存し、そこから勤務時間帯を分析するという企画です。
Slack では 1 つのアカウントで複数のワークスペースを管理することができるため、オンライン状態でも趣味のコミュニティにいた、なんてこともあります。
決して **「Slack がオンライン = 仕事している」ということではない** ので、あくまで参考程度にお願いします。

## 目次

- [Part I: データ取得編 (Slack API)](https://qiita.com/noritakaIzumi/items/15baea8bcda572232d37)
- [Part II: データ保存編 (AWS Lambda/CloudWatch)](https://qiita.com/noritakaIzumi/items/9978e35308876d2b259b)
- **Part III: データ分析編 (AWS CloudWatch/スプレッドシート)** <- 今回はここ！

## 概要

今回は API を定期実行により蓄積されたログから、ユーザの勤務時間帯を分析するセクションとなります。

前回に引き続き AWS CloudWatch を使用し、分析にはスプレッドシートを使用します。

※この作業をするにあたり、前回作成した CloudWatch の定期実行イベントを数日動作させてログを蓄積させておくことをおすすめします。

## 前提条件

- AWS アカウントを持っている
- Google アカウントを持っている

## 手順

### CloudWatch のログを集計・出力する

CloudWatch の Log insights でログを整形して CSV に出力します。

AWS コンソールから CloudWatch へ進み、 Logs -> Logs insights と進みます。

Select log group(s) のプルダウンから `/aws/lambda/slack-users-getPresence` を選択します。

クエリは以下のように入力します。

```sh
fields time, presence
| filter @message like /^\{/
| filter presence = 'active'
| sort @timestamp desc
```

期間は直近 3 日間（2021/07/28 - 2021/07/30）とします。

Select log group(s) の横に期間を選ぶ入力欄があるのでクリックし、 Absolute を選択して該当するカレンダーの日付を集計開始日・終了日の順にクリックします。

Run query をクリックするとクエリが実行され、下に結果が表示されます。

Export result(s) -> Download table (CSV) の順にクリックして CSV を出力します。

出力された CSV を見てみると、先頭 10 行は以下のようになっていました。

```html:logs-insights-results.csv
time,presence
2021-07-30 20:15,active
2021-07-30 20:14,active
2021-07-30 20:13,active
2021-07-30 20:12,active
2021-07-30 20:11,active
2021-07-30 20:10,active
2021-07-30 20:09,active
2021-07-30 20:08,active
2021-07-30 20:07,active
...
```

### スプレッドシートにデータを取り込み、ヒートマップのようなものを作成する

先ほど出力した CSV をスプレッドシートに取り込みます。シート名は `logs-insights-results` としています。

![logs_spreadsheet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486784/9c9bca96-e464-f227-4a79-da754df46b6b.png)

いい感じにデータを整えます。日付と時分を分離し、 10 分ごとに区切りました。

![logs_spreadsheet_cal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486784/84ab0a7b-ee81-1837-cd2c-cf91c2b2535c.png)

集計用のシートを用意し、縦軸に日付、横軸に時間（10 分ごと）を取り、時間帯ごとに色分けをした上で、 active な時間帯が 10 分のうち何分あるかをカウントし、多いほど色が濃くなるように表示してみました。

![syukei.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486784/49ac6e81-5b49-5a22-6aa6-b664a12df78e.png)

なお、色分けは以下の通りです。

- 5:00 - 9:59: 定時前（想定）
- 10:00 - 18:59: 所定の勤務時間帯
- 19:00 - 21:59: 残業時間
- (22:00 - 翌 4:59: 深夜残業的な)

この表を見る限りでは、 1 日の勤務時間は少な目で、朝型の人のようですね。

はい、私です。

## まとめ

今回を含め 3 回にわたり Slack オンライン時間帯を分析してきましたがいかがでしたでしょうか。 Slack API や AWS を通して気軽にデータ収集してみようと思っていただけたら幸いです。
[Flutter]バージョン コード ◯ はすでに使用されています。別のバージョン コードをお試しください。


Flutterで、Google Play Storeにアプリを出す際に、

```
flutter build appbundle
```

をしてから
google play storeに、app-release.aabを貼り付けたところ、、、



`バージョン コード ◯ はすでに使用されています。別のバージョン コードをお試しください。`


なぜ、、、、、と思いました。いっていることはわかりますが、ではどうするのかと、、
簡単でした。

`pubspec.yaml`の`version`の値を変更するだけでした。

写真のものだと、

```
1.0.0+4   ＝＞　　　1.0.0+5　
```
にするだけ


IOSとAndroidどちらも簡単ですね。。さすが、大企業。。

![スクリーンショット 2021-08-03 9.23.21（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/933c161c-037d-7ecc-8c90-ff13cef79d7b.png)
[Flutter] よく使うコマンド一覧 


僕がよく使うコマンドをざっと並べていきます。


### ビルドできなくなった時などに使用

```
flutter clean
```

### freezedなどを使用したときに使うもの

```
flutter pub run build_runner build --delete-conflicting-outputs
```

### Google Play Storeに提出するときに使用

```
flutter build appbundle
```

###Xcodeを開くときに使用
```
open ios/Runner.xcworkspace
```



思い出したら、書いていきます。
機密性 とは？ 情報セキュリティ3要素について

## 勉強前イメージ

あまり他の人に知られてはいけないデータって意味だと思ってる

## 調査

### 機密性(Confidentiality)

英語でConfidentialityと書き、
決められた人だけが対象のデータにアクセスできるようにすることを指し、情報漏えいがないように管理することを意味しています。
情報セキュリティの3大要素の一つで、他には完全性・可用性があります。

### 完全性(integrity)

情報が正確で、最新の状態で利用でき、情報の欠如がないこと を意味しています。
また、物理的完全性と論理的完全性に2種類に分けられ、それぞれ下記になります。

- 物理的完全性 : 自然災害時等に物理的なデータの損失があれば完全性が損なわれる
- 論理的完全性 : (詳細には色々ありますが)重複するデータの入力を排除したり、正確なデータのみ入力する等

### 可用性(availability)

情報を必要な際にいつでも使える状態に保持しておくことで
必要な際にデータ取得がいつでもできる状態であれば可用性が高いシステムになります。

### 情報セキュリティの3大要素(CIA)

上記で記載した、機密性(Confidentiality)・完全性(integrity)・可用性(availability)の頭文字を取って
CIAを略します。
重要なデータを安全に、改ざんや損失しないように意識するべき要素を記載したものになります。

## 勉強後イメージ

こういう意味なんだろうなって思ってたけどちゃんと調べたことなかった・・・
完全性についてはまだまだ調べきれてなくて、幅広かった。

##  参考

- [用語集｜機密性](https://www.idcf.jp/words/confidentiality.html)
- [情報管理には欠かせない！情報の「機密性」「完全性」「可用性」とは？](https://www.lrm.jp/security_magazine/data_three-principles/)
- [情報セキュリティ3要素と7要素　CIAの定義から4つの新要素まで解説](https://business.ntt-east.co.jp/content/cloudsolution/column-167.html)
【メモ】Barocco MD770を買ったのでmac用にキーをリマップする

Mistel製の分離型キーボードBarocco MD770を買って、キー配置を少し変更したのでそのメモ
分割キーボードすごく快適なので、気になる方はぜひ〜

## 変更したキー

`CapsLock`  ⇔ `左Ctrl`（入れ替え）
`Fn` ⇔ `左Alt`（入れ替え）
`右スペース`  → `Cmd`（置き換え）

キーキャップを入れ替えられるものは、入れ替えもしておくと分かりやすくていい感じ。

## 覚えておくと便利なキー

### 入力モード切り替え

- `Ctrl` + `j`　：　日本語入力に切り替え
- `Ctrl` + `;`　：　英語入力に切り替え
- `Ctrl` + `space`　：　入力モードを選択

### 音量調整

- `Fn` + `s`　：　音量大きくする
- `Fn` + `d`　：　音量小さくする
- `Fn` + `f`　：ミュートする

### 方向キー
- `Fn` + `i or j or k or l`　： 上 or 左 or 下 or 右
【Rails】form_withを使って情報入力欄を実装する方法


#対象者

* form_withを使って入力項目の作成を考えている方


#目的

* form_withの基礎構文を学んで、実装手順を抑えること

#実際の手順と実例
###1.前提
Rails tutolialのsample appを参考にしています。

* ユーザー登録の新規登録フォームを作成しようとしています。
* UsersController、Userモデル、new.html.erbに実装していきます



###2.コントローラーの設定

下記のようにコントローラーに記載します。

```users_controller.rb
class UsersController < ApplicationController

  def new
    @user = User.new
  end
end
```

以前メンターさんにご質問させていただいた際に、
「form_withが筆記用具だとしたらnewメソッドが紙みたいなもの」
的なニュアンスのこと仰っていて、すごくしっくり来た気がします。

つまり、コントローラーにnewメソッドを定義したインスタンス変数変数は必須ということです。

このように設定することで空のモデルを作成し、
空のモデルが代入されたインスタンス変数に代入され、
form_withに変数渡してフォ-ムとモデルが関連付けられます。


###3.Viewの設定

基本的には下記のように記載します

````
<%= form_with model:インスタンス変数, url:”リンク先”, local:true do |hoge（ブロック変数）| %> 
<% end %>
````
前提例の情報を当てはめると

`````
 <%= form_with(model: @user, local: true) do |f| %>
      <%= f.label :name %>
      <%= f.text_field :name %>

      <%= f.label :email %>
      <%= f.email_field :email %>

      <%= f.label :password %>
      <%= f.password_field :password %>

      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation %>

      <%= f.submit "Create my account", class: "btn btn-primary" %>
 <% end %>
`````

ブロック変数fをそれぞれのフィールドタグに渡している形です。

代表的なフィールドは以下の通り

* form.text.field
    *  →　短めのテキストを入れるフォームができる
* form.text.area　
    * →　長めの文章を入れるフォームができる
* form.submit
    * →　送信ボタン作成





実際にはこの後情報を保存しないといけないので
createアクションで情報保存しないと行けないのですが今日はここまでです

#参照

>[Rails チュートリアル　7.2.1 form_withを使用する](https://railstutorial.jp/chapters/sign_up?version=6.0#:~:text=7.2.1%20form_with%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B)


####投稿者コメント
以前form_withでコントローラーにnewメソッドがないのに「なんで動かないんだ？？？」と悩んだことあったので記事にしてみました。（恥ずかしい、、、、）
私のような初心者の方の助力になれたらなと思います


####My Profile
プログラミング学習歴３ヶ月目のアカウントです！
プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。
また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。
もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。
AtCoderログ：0052 - ABC 212 B

# 問題

https://atcoder.jp/contests/abc212/tasks/abc212_b

## 問題文
> $4$ 桁の暗証番号 $X_1 X_2 X_3 X_4$ が与えられます。番号は先頭の桁が $0$ であることもあり得ます。暗証番号は以下のいずれかの条件をみたすとき弱い暗証番号と呼ばれます。
> ・$4$ 桁とも同じ数字である。
> ・$1 \le i \le 3$ をみたす任意の整数 $i$ について、$X_{i+1}$ が、$X_i$ の次の数字である。 ただし、$0 \le j \le 8$ について $j$ の次の数字は $j+1$ であり、$9$ の次の数字は $0$ である。
> 与えられた暗証番号が弱い暗証番号ならば Weak を、そうでないならば Strong を出力してください。

## 制約
> ・$0 \le X_1,X_2,X_3,X_4 \le 9$
> ・$X_1,X_2,X_3,X_4$ は整数である。

# 回答
## 回答1 (AC)
弱いパスワードには 2 種類あり、1 種類目は $4$ 桁とも同じ数字である 0000, 1111, 2222, 3333, 4444, 5555, 6666, 7777, 8888, 9999 の10通り、2 種類目は $4$ 桁が連続した数字である 0123, 1234, 2345, 3456, 4567, 5678, 6789, 7890, 8901, 9012 の10通りです。弱いパスワードの個数がそれなりに少ないので、直接判定することが可能です。コードは以下のようになりました。

```C++:abc212b-1.cpp
#include <bits/stdc++.h>
using namespace std;
 
int main() {
  string x;
  cin >> x;

  string answer = "Strong";
  if ( x=="0000" || x=="1111" || x=="2222" || x=="3333" || x=="4444" 
      || x=="5555" || x=="6666" || x=="7777" || x=="8888" || x=="9999"
      || x=="0123" || x=="1234" || x=="2345" || x=="3456" || x=="4567" 
      || x=="5678" || x=="6789" || x=="7890" || x=="8901" || x=="9012" ) {
    answer = "Weak";
  }

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

## 回答2 (AC)
回答1のアプローチでは弱いパスワードの個数がもっと多い場合に対応できないので、if 文の判定を数式で表現してみます。パスワードの各桁の数字 x1, x2, x3, x4 に対し、1 種類目の弱いパスワード判定は簡単で、全ての桁が等しいかを確認すれば良いです。2 種類目の弱いパスワード判定は少し工夫が必要で、x2=(x1+1)%10 のように10で割った余りを考慮すれば良いでしょう。コードは以下のようになりました。

```C++:abc212a-2.cpp
#include <bits/stdc++.h>
using namespace std;
 
int main() {
  int pw, x1, x2 ,x3, x4;
  cin >> pw;
  x4 = pw%10;
  x3 = (pw/10)%10;
  x2 = (pw/100)%10;
  x1 = pw/1000;
    
  string answer = "Strong";
  if ( x1==x2 && x2==x3 && x3==x4 ) {
    answer = "Weak";
  } else if ( (x1+1)%10==x2 && (x2+1)%10==x3 && (x3+1)%10==x4 ) {
    answer = "Weak";
  }

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

# 調べたこと
## [AtCoder の解説](https://atcoder.jp/contests/abc212/tasks/abc212_b/editorial) → [公式解説](https://atcoder.jp/contests/abc212/editorial/2354)
回答2と同じ方針でしたが、回答1についても言及されていました。

## [AtCoder の解説](https://atcoder.jp/contests/abc212/tasks/abc212_b/editorial) → [ユーザ解説](https://blog.hamayanhamayan.com/entry/2021/08/01/011855
)
回答2と同じ方針でした。

# リンク
## 前後の記事
- 前の記事 → [AtCoderログ：0051 - ABC 156 B](https://qiita.com/RoadLynton/items/855e9c695ebd66218d5f)
- 次の記事 → [AtCoderログ：0053 - ABC 088 B](https://qiita.com/RoadLynton/items/9e90e8300f8b6d0ff82c)
ServerlessFrameworkでS3バケットを作成する。

##概要
表題通り、ServerlessFrameworkでS3バケットを作成する。
例ではkkfactoryという名のBucketを作成します。

##実装

```yml:serverless.yml
service: s3make
provider: 
  name: aws
  stage: dev
  region: ap-northeast-1
functions:

resources: 
  Resources:
    kkfactory:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: kkfactory
```
```shell:S3作成
~/develop/study/S3 $ serverless deploy
Serverless: Packaging service...
Serverless: Creating Stack...
Serverless: Checking Stack create progress...
........
Serverless: Stack create finished...
Serverless: Uploading CloudFormation file to S3...
Serverless: Uploading artifacts...
Serverless: Validating template...
Serverless: Updating Stack...
Serverless: Checking Stack update progress...
......
Serverless: Stack update finished...
Service Information
service: s3make
stage: dev
region: ap-northeast-1
stack: s3make-dev
resources: 3
api keys:
  None
endpoints:
  None
functions:
  None
layers:
  None
~/develop/study/S3 $ 
```
バケットが作成されている事を確認。
![スクリーンショット 2021-08-02 19.31.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/c64f6014-e4bf-be89-cebc-07f5546f458c.png)