OmniAICreator/Qiita-1.07M huggingface dataset:
【CSS】参考サイトはこれ！

初心者の私にもわかりやすいCSSのサイトはこちら！

[w3schools-fa.IR](http://www.w3schools-fa.ir/index.html)

わかりやすいポイント

- 説明が冗長でなくわかりやすい
    - 説明や用いる例が最小限なため、説明が簡素でわかりやすい。
- 「Try it Yourself」をクリックすると、説明されているCSSの動作を試すことができる
    - サンプルコードが別タブで開かれ、CSSの動作を実際に見ることができます。画面左側のHTMLおよびCSSのコードを変更すると、画面右側で実際の挙動がすぐ反映されるので、自分で色々試すことができます。

英語のサイトですが、ページのつくりが簡素で見やすいです。

他にも、HTML、JavaScript、SQL、jQuery、PHP等の説明もあるので、ぜひ参考にしてみてください！
IntegromatからのWebhookの利用方法

# IntegromatからのWebhookの利用方法
IntegromatからLINE Notifyを利用するための手順をまとめました。

１．Webhookの追加を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/726018/d40a7e21-4bff-ffce-08ce-c556baa6bc08.png)

２．WebhookのURLが発行されていることを確認
※黒で塗りつぶしている部分にURLが記載されています
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/726018/18cd20cd-a287-2280-5b9b-fdcbad0453eb.png)
【TIC-80】ゲーム以下を作りはじめて2年が経った（その３）【Lua】

# はじめに
[【【TIC-80】ゲーム以下を作りはじめて2年が経った【Lua】](https://qiita.com/uokagi/items/02975a888d664d437060)の続き


「[TIC-80](https://tic.computer/)」（最近新バージョン**v0.80.1344**が公開されました！）を触り始めていつの間にか2年が経っていたので出力したGIFアニメに一言添えて作ったものを振り返ってみる。なおほとんどがゲーム未満の模様。

「TIC-80」は**1ボタン（F9キー）でGIFアニメの出力**ができるので、
**しょーもない思いつきをぱっとドット絵GIFアニメにする**のにすごく向いているツールです！
もちろんゲームも楽に作れます。

### 関連

- [【TIC-80】ゲーム（以下）を作り始めて1年経った（その１）【Lua】](https://qiita.com/uokagi/items/9f6939c71cb1abdc1630)
- [【TIC-80】ゲーム（以下）を作り始めて1年経った（その２）【Lua】](https://qiita.com/uokagi/items/b56949197b56437b20e3)
- [【TIC-80】ゲーム以下を作りはじめて2年が経った（その１）【Lua】](https://qiita.com/uokagi/items/ed99048ac4ef28d12027)
- [【TIC-80】ゲーム以下を作りはじめて2年が経った（その２）【Lua】](https://qiita.com/uokagi/items/02975a888d664d437060)

### ZUNZUNDAN
![zunzundan.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284455/6ee6b880-e162-8cfc-a1dd-849bbf60cf10.gif)
[https://uokagi.itch.io/zunzundan](https://uokagi.itch.io/zunzundan)

- スコア（得点）もスコア（楽譜）も自分で決める全くあたらしい音ゲー！！！
- ...えー作曲も自動採点も自分にはできないのでプレイヤーにやってもらう！という斬新（？）なゲーム

### CIRCUIT DIAGRAM2

![circuit_s.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284455/89714b7d-17df-01da-278b-06ae492a91cc.gif)
[https://tic80.com/play?cart=1262](https://tic80.com/play?cart=1262)

- [twitterで見かけて](https://twitter.com/ntsutae/status/1268820823952916486)TIC-80に移植

<blockquote class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/%E3%81%A4%E3%81%B6%E3%82%84%E3%81%8DProcessing?src=hash&amp;ref_src=twsrc%5Etfw">#つぶやきProcessing</a> <a href="https://twitter.com/hashtag/p5js?src=hash&amp;ref_src=twsrc%5Etfw">#p5js</a><br>t=0,draw=_=&gt;{t++?copy(0,0,w,w,0,1,w,w):createCanvas(w=720,w)<br>for(x=720;--x;){<br>stroke(abs(t+((x-t)^(x+t))**3)%997&lt;97?w:0);point(x,0)}} <a href="https://t.co/Fi7WGHicYf">pic.twitter.com/Fi7WGHicYf</a></p>&mdash; ntsutae (@ntsutae) <a href="https://twitter.com/ntsutae/status/1268820823952916486?ref_src=twsrc%5Etfw">June 5, 2020</a></blockquote>

### 心

![心.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284455/272868e9-7efb-10dd-e62e-472650953f9b.gif)

- 「[SHODO](https://tic80.com/play?cart=1267)」を使って書いた「心」（読めますよね？）
- twitterで見かけて書いたのですが、元のつぶやきがどこかに‥

### 忍者くん阿修羅の章のボーナスステージクリア演出

![ball3_s.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284455/1f804f53-05d5-4073-d0bc-913943993d4a.gif)

### ファミスタの審判

![umpire_s.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284455/a65daa31-6075-8faa-640b-b57de47bbcf1.gif)

### ラスタースクロール

![crosswave_s.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284455/0cd2fc97-48c3-3a81-ba7f-3022eacba395.gif)

- GBA版FFのボスの撃破演出？

### DQロト三部作の主人公たち

![DQ3_02_s.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284455/43b63d06-6e16-2275-cfae-4691b00e0ec2.gif)

### 例の柄

![Kimetsu03_s.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284455/b22f4c5b-d769-950f-7ae4-83773b524c14.gif)

- TIC-80はBGタイルの反転（回転）に対応しているので、小さなチップを反転しながら並べて柄を再現

## おわりに

今回はこの辺で終了！
pointerで連結リストに対して追加・削除

#連結リストに対する追加・削除
C言語の勉強で連結リストの追加・削除のコードのメモとなります。

##追加
連結リストの最後の要素に要素を追加するコードは下記となります。

```append.c
#include <stdio.h>
#include <stdlib.h>

struct node{
  int data;
  struct node *link;
};

//function declaration
void display(struct node *);
void append(struct node **, int);

void main(){
  //set pointer to null
  struct node *p = NULL;

  append(&p,4);
  append(&p,10);
  append(&p,30);

  display(p);
}

void append(struct node **q, int num){
  struct node *r, *temp;
  temp = *q;

  //if the node is not created
  if(*q == NULL){
    //create node
    r = malloc(sizeof(struct node));
    r->data = num;
    r->link = NULL;
    //change pointer to point to new node;
    *q = r;
  }else{
    //create node
    r = malloc(sizeof(struct node));
    r->data = num;
    r->link = NULL;
    //move to the last node
    while(temp->link!=NULL){
      temp = temp->link;
    }
    //change link of last node to point to created node
    temp->link = r;
  }
}

void display(struct node *q){
  while(q!=NULL){
    printf("%d\n",q->data);
    q = q->link;
  }
}
```

##削除
連結リストの要素を削除するコードは下記となります。

```delete.c
#include <stdio.h>
#include <stdlib.h>

struct node{
  int data;
  struct node *link;
};

//function declaration
void append(struct node **, int);
void delete(struct node **, int);
void display(struct node *);

void main(){
  struct node *p;
  p=NULL;

  append(&p,10);
  append(&p,15);
  append(&p,20);
  append(&p,30);

  printf("Before deletion: \n");
  display(p);

  delete(&p,20);
  delete(&p,30);
  delete(&p,10);

  printf("After deletion:\n");
  display(p);
}

void delete(struct node **q, int num){
  struct node *temp,*r;
  temp = r = *q;

  //find node that has the value to be deleted
  while(temp!=NULL){
    //if found jump out of loop
    if(temp->data == num){
      break;
    }
    //preserve current node info before going to the next node
    r = temp;
    //if not found go to next node
    temp = temp->link;
  }

  //if the delete target is the first node
  if(temp == *q){
    //point p to the next node
    *q = temp->link;
    //delete node
    free(temp);
  }else{
    //change previous node link to point to the next node after target
    r->link = temp->link;
    //delete node
    free(temp);
  }
}

void append(struct node **q, int num){
  struct node *r,*temp;
  temp = *q;

  //p is pointing to null
  if(*q == NULL){
    //create new node
    r = malloc(sizeof(struct node));
    r->data = num;
    r->link = NULL;
    //change p to point to new node
    *q = r;
  }else{
    //move to last node
    while(temp->link!=NULL){
      temp=temp->link;
    }
    //create new node
    r = malloc(sizeof(struct node));
    r->data = num;
    r->link = NULL;
    //change last node link to point to new node
    temp->link = r;
  }
}

void display(struct node *q){
  while(q!=NULL){
    printf("%d\n",q->data);
    q=q->link;
  }
}

```
IntegromatからのLINE Notifyの利用方法

# IntegromatからのLINE Notifyの利用方法
IntegromatからLINE Notifyを利用するための手順をまとめました。

１．LINE Notifyの追加を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/726018/67adb582-b524-5a78-faa6-ce062f155502.png)

２．LINEに登録しているメールアドレスとパスワードを入力し、ログイン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/726018/edb8b49f-bef5-a46b-eae3-8194e39c7d3c.png)

３．LINEグループに知らせるのであれば、対象のLINEグループ、自分にだけ知らせるのであれば、1:1を選択
※個人LINEであったので黒で塗りつぶしてますが、LINEグループが出てきています。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/726018/b79bff44-b275-e89d-8c65-d74219163f22.png)

４．LINEに通知が来るので確認して完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/726018/89ea1ff0-a7ea-9709-27c9-9be513d80da9.png)
【ミライトデザイン社内勉強会#7】例外の基本と設計について

- 例としてPHPの例外を上げているが、大体どの言語でも通用する話。


## 例外の基本

- トランザクションの処理のところでは誰でも例外を使ってと思う

```php
try {
    db:save(User)
    db:save(Plan)
    db:commit
} catch {
    db:rollback
}
```

### PHPの例外
[お前は PHP 7 における Fatal Error / Catchable Fatal Error / Error / ErrorException / Exception の違いを言えるか？ - Qiita](https://qiita.com/mpyw/items/c69da9589e72ceac470c)

[PHP: Throwable - Manual](https://www.php.net/manual/ja/class.throwable.php)

- 自分で作る例外はLogicExceptionかRuntimeExceptionを継承したもが大体になると思う

- [PHP標準例外まとめ - Qiita](https://qiita.com/mikakane/items/dafd3d28c27311e5f429)

- phpのエラーとExceptionは何が違うの？   
    >  Exception とは対極に， PHP処理系内部あるいはPHP処理系が持つ標準関数との互換性を強く意識したPHPコードで用いられます．

    - 自分で実装する時はErrorを継承することはあんまりなさそう

### try, catchとは
- tryで例外が発生したらcatchする
    - tryの中で通常の動作でない、例外的なことが起こったらハンドリングしたい
    - 処理の先で例外的なことが起こったらError, Exceptionをthrowする
- フレームワークだけじゃなくて、実装者が例外を投げることもあるの？
    - よくある。
    - csvで読み込んだデータの値がおかしい時とかになんで失敗したのかがわかるようなログを出したり
    - システム的には問題なくても、ビジネスロジック的におかしな値が入力された時、
        - 例えば、UserNameは空文字ダメ、3文字以上じゃないとダメ、みたいなルールがあれば、ルールに則っていない引数が渡された場合には例外を投げるとか


```php
 class UserName {
     __constructor($userName: string) {
         if (!($userNameが空文字やnullじゃないか && $userNameの文字数は3文字以上か)) {
             throw new InvalidArgumentException('引数の値がおかしいよ')
         }
     }
 }
```

- キャッチしたらどうするの？

```php

try {
   new UserName()
   new UserId()
} catch {
    // なんかログを出すとか、
    // キャッチしたら再throwする
    // 握り潰したらだめ 
        // 握り潰してしまうとどこで例外が発生したのかもわからないまま動き続けてしまう
}
```
- 実際には今回のUserNameの例だと、catchせずにフレームワークに任せて処理を止めてしまってもいい
    - 大体のフレームワークは最終的にフレームワークで例外をキャッチしてエラーメッセージを出してくれたりする


- 再throwしたらどうするの？
    - エラー画面出すとか
    - フレームワークとかなら最終的にキャッチしてくれる
- フレームワークではドメインレベルの例外については対応してくれないので、自分たちでthrowする必要がある

- throwは言ってみればモダンなgoto文
    - なので使い方には注意
    - エラーじゃないのに便利だからって例外を投げるのはダメ
        - 例外を投げるのは例外的なことが起こった場合のみ
    - if文の代わりにthrowするのはダメ

## 例外の設計の話
### 例外をどこでキャッチしてる？

- フレームワークに任せるか、ControllerまたはUseCaseでキャッチしている

```
- FW Core　●
    - Controller　●
        - UseCase　●
            - Domain
            - Domain
            - Domain
```

- Controller
    - 基本はControllerでキャッチしてる
        - 自作の例外は大体Controllerでキャッチ
        - ログを出したり、ユーザーにお知らせしたり
- UseCase
    - foreach文の中とかで例外がはかれても処理を続けて欲しい場合はUseCaseでキャッチしてる
        - そしてログを出したり
- FW
    - FWまで届くのはこれ以上処理が続けられないような例外
        - フレームワークや言語の例外
        - AWSのDB落ちてるとか

- プロジェクト固有のLogicExceptionとRuntimeExceptionを継承した例外クラスを作っておく
    - 自分でthrowする時はこの2つか、継承したクラスを投げることが多い
Rmarkdown のデフォルトパスを .Rproj からのパスに設定する

## Rmarkdownのデフォルトパスについて
`.Rmd` ファイルをサブディレクトリで管理していると、外部ファイルへのパス指定で戸惑うことがあります。デフォルトでは、**Rチャンク（chunk）の作業ディレクトリは、.Rmdファイルのあるディレクトリ**になります。つまり、**チャンク内で外部ファイルを参照する場合、これらのパスが.Rmdファイルのディレクトリに対する相対パスであることを知っておく必要があります。**

## 解決法

プロジェクトで管理している場合は、
`{r setup, include=FALSE} `に`knitr::opts_knit$set(root.dir = rprojroot::find_rstudio_root_file())`を入れると、すべてのチャンクでの相対パスを、`.Rproj`からの相対パスに設定できます。

```
```{r setup, include=FALSE}
knitr::opts_knit$set(root.dir = rprojroot::find_rstudio_root_file())
```

## 補足
作業ディレクトリを変更する通常の方法は`setwd()` ですが、R Markdownでは `setwd()` は永続的ではなく、次のチャンクではデフォルトパスに戻るようになっています。全てのチャンクの作業ディレクトリを変更したい場合は、`{r, setup}`チャンクで設定することが必要なようです。

これは、`.html`ファイルと同様に、**Rmdファイルからの相対パスにしておけば、.Rmdファイルとその参照ファイルをどこにでも自由に移動させることができる**といった利点もあることから、デフォルトパスがRmdファイルからの相対パスになっているようです。

## 参考
1. Riederer YX Christophe Dervieux, Emily. 16.6 The Working Directory for R Code Chunks | R Markdown Cookbook. Accessed November 1, 2020. https://bookdown.org/yihui/rmarkdown-cookbook/working-directory.html
2. r - Setting work directory in knitr using opts_chunk$set(root.dir = ...) doesn’t work. Stack Overflow. Accessed November 1, 2020. https://stackoverflow.com/questions/30237310/setting-work-directory-in-knitr-using-opts-chunksetroot-dir-doesnt-wor
bin/rails db:createできない

#起こった問題
`$rails new project_name -d postgresql`
の後、プロジェクトディレクトリに移動して、`bin/rails db:create`したが、

以下エラーが出てきた

```
Could not find gem 'pg (>= 0.18, < 2.0)' in any of the gem sources listed in your Gemfile.
Run `bundle install` to install missing gems
```

なのでbundle installをすると..

```
An error occurred while installing pg (1.2.3), and Bundler cannot
continue.
Make sure that `gem install pg -v '1.2.3' --source 'https://rubygems.org/'`
succeeds before bundling.
```

[Qiita記事: gem install pg が失敗するときの対処法](https://bityl.co/4FxE)とかも試したが、うまく行かなかった。

#解決方法
結果的には[このサイト](https://bityl.co/4Fwu)で解決した。

①`brew install postgres`
②`bundle install`
③再度`bin/rails db:create`
で成功した。




#感想
TOEICの勉強で1ヶ月ほどプログラミングに触れてなかったので、いきなりのエラー文にチキったけど、わりとすんなり解決できて安心しました☺️
1ヶ月もやってないと、「bin/rails db:createってなんだっけ」「あれターミナル上で編集するのってどうやるんだっけ(答え: vim)」、とか「あーーー現状位置確認するのってpwdだったな〜」って感じです。メチャクチャ基本的な事も忘れてしまっててびっくり。半年間の独学だと記憶の定着も薄いですね。

#後日談
ちなみにこの後[このQiita記事](https://bityl.co/4FxB)と同様の問題が出ました。
以下コマンドのみでとりあえず解決。
```
$ rails webpacker:install
```

そしてやっとrails sできたと思ってlocalhost:3000にアクセスできたと思ったら
![Screen Shot 2020-11-01 at 17.29.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/04e09a5f-8211-5810-9eac-1d014ec63e17.png)

なんでこんなにエラーばっか出るんだ？と思いつつ、
[この記事](https://bityl.co/4FxP)に書いてあった

```
$ brew services start postgresql
$ brew services stop postgresql
$ brew services restart postgresql
```
を実行。そしたらまた違うエラーが😭なんで〜

```
ActiveRecord::NoDatabaseError (FATAL:  database "genba_rails_development" does not exist
):
```

![Screen Shot 2020-11-01 at 17.33.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/94a5b2cb-8113-5e13-feac-50d03b6d565c.png)


とりあえずエラー文をググったら[このQiita記事](https://bityl.co/4FxY)が出てきたので、もう一度`rails db:create`してみたら見慣れた画面に。よかった〜
![Screen Shot 2020-11-01 at 17.35.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/f23a258b-f888-111d-c53e-f46a86172d97.png)
IPアドレスとドメインについて小学生でもわかるように説明してみた

##IPアドレスとは?
スマホやPCなど、ネットワーク上の機器に割り当てられるインターネット上の住所のようなもの。
インターネットでページを閲覧したり、メールの送受信を行うには、データの送信元を識別しなくてはいけないが、この識別に使われる番号がIPアドレス。「187.44.200.20」のような形式になっている。
郵便で例えると相手の住所がわからないと勿論相手に手紙が届かない。
また、自分の住所がわからないと相手は手紙の返信できなかったりするでしょう。
そのためにネットワークの世界でも住所(IPアドレス)が必要になる

##グローバルIPアドレス
インターネット上(=世界の人々とやり取りを行う)で通信を行う場合はグローバルIPアドレスが必要になる。
家庭用のインターネット接続の場合、管理団体から割り当てられたグローバルIPアドレスを持っており、
一般家庭のユーザーは管理者の持つグローバルIPアドレスを一時的に借りてインターネットに接続している。
郵便で例えると自分の建物までの住所にあたる。[インターネットの解説はこちらをご覧ください](https://qiita.com/miumi/items/3657b86ea1d2063f397b)
>(例)東京都新宿区西新宿２丁目８−１(都庁)



##プライベートIPアドレス
プライベートIPアドレス(ローカルIPアドレス)は組織内のネットワークでのみ使用できるIPアドレス.
オフィス内のネットワークや家庭用のネットワークなどでは通常プライベートIPアドレスが使われる.
郵便で例えると建物の中の特定の場所にあたる。
>(例)都庁の2階の〇〇係

##ドメイン名(ドメイン)
IPアドレスに付けた人間向けの名前。インターネットやメールなどで使われる住所で*qiita.com*のような形式。
URL（ホームページの住所に相当する情報）においては「http://」や「https://」の後ろの部分がドメイン名。
*https:/qiita.com/index.html*であれば*qiita.com*の部分。

##グローバルIPとプライベートIPのイメージ
![スクリーンショット 2020-11-01 16.58.24（3）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/3a248ede-68a3-2ba9-8c31-7651d6fa7532.png)
LiveServerで「open a folder or workspace live server...」が出たときの対処法

下の記事で解決しました。

<a href="https://qiita.com/miriwo/items/5e15dab20a29a7b09891 ">【Qiita】Visual Studio Code の Live Server で 「open a folder or workspace live server...」が出たときの 対処法 ～画像付き解説～</a>

LiveServerを使うには、
ファイル単体(.htmlや.cssだけ)だと使えないみたいですね。
単体だと「open a folder or workspace live server...」が発生します。

フォルダーごと(htmlとcssをまとめたファイル)を選択すると、問題は解決します。
VisualStudio 2019 WebForm Bootstrap3→4 Update


持っている知識は Excel/AccessのVBA。ほぼ毎日 VBA を使っている。
Webシステムを作成するには VB の方が理解しやすいので、ASP.NETのVisualBasicを選択しました。
勉強しながら、学んだことを忘れないようにメモっておきます。
（画像多めです。）

## 環境
Windows 10 Pro
VisualStudio 2019 

## VisualStudio 2019
超初心者、MVC は難しそうなので WebForm を選択しました。
画面デザインには、Bootstrapを利用したいと思います。

## WebForm の新規プロジェクトを作成
WebForm の 新規プロジェクトを作成した。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93227/c14c98b8-0182-519e-0fc8-aa303eab5220.png)

［新しいプロジェクトの作成］で、［ASP.NET Webアプリケーション］を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93227/dbdf9aac-c01b-7053-81c7-a17de91e73eb.png)

プロジェクト名を［WebForm1］とした
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93227/7e77ad58-8bad-2314-8f2b-57493d661d8f.png)

［Web Forms］を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93227/e1456888-b8bc-d526-fe39-e68dc817d5c6.png)

［WebForm］のプロジェクトが作成された。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93227/c60de568-d560-fd46-d800-a7532f6addc4.png)
Bootstrapを使ったページができている。

## パッケージのアップデート（Bootstrap 3 → 4）
Bootstrapをアップデートしようと、［NuGetパッケージの管理］を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93227/898e86ae-ab6b-3d3b-80da-1d102ea97699.png)

［Bootstrap］にチェックを入れ［更新］した
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93227/6694bb82-84c2-1c91-ef11-3241635bd173.png)

エラー発生！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93227/4a563d84-f371-3251-47ac-723ecb843dc9.png)

パッケージマネージャコンソールで、［Update-Package］を実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93227/62cfd5fc-d9de-e31c-4549-c41e89535c06.png)

`PM>Update-Package`を実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93227/0bcc7ab3-44f8-92bb-0e2b-38ec1e145c06.png)
どうやらうまくいったようだ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93227/a5668cf4-9c3c-9161-5154-882d35580e97.png)

終了後に、アップデート画面が表示されたので、チェックを入れて更新した。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93227/ed5dd123-eee7-825c-fa7b-3182bdf2fa02.png)

しかし、先ほどと同様にエラー発生！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93227/bf4f3f80-f0ec-10bb-efc0-b7e6262cc5c9.png)

とりあえず、Bootstrap v4.5.2 にはなったようだ。
エラーの意味はよく分からないので、もう少し勉強します。
typescriptにおける画像の型

## `<img>`要素として扱う場合

```
image?: HTMLImageElement;
```

## urlとして扱う場合

```
image?: String;
```

## `<input>`要素として扱う場合

```
image?: File;
```


## 参考
- https://stackoverflow.com/questions/41791933/in-typescript-what-is-the-type-of-image
GoogleAppsScript（GAS）でのエラー解消

# GoogleAppsScript（GAS）でのエラー
GASを利用しようとGoogleスプレッドシートからツール＞スクリプトエディタを実行すると下記のエラー。
理由が分からない。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">GAS使おうと思ったら、下記のエラー。。なんでだ。。 <a href="https://t.co/JZJxuuNXpL">pic.twitter.com/JZJxuuNXpL</a></p>&mdash; heihei (@heihei15408697) <a href="https://twitter.com/heihei15408697/status/1322719078075703296?ref_src=twsrc%5Etfw">November 1, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

いろいろ調べてみると複数のGoogleアカウントで同時にログインした状態だと起こるエラーであるとのこと。使っていないほうのアカウントをログアウトするとうまく動きました！
HDF5ファイルの可視化＆CSV変換ツールを作ってみた

# 概要
HDF5ファイルをGUIで可視化し、CSV出力するツールをC#で作成してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/05937fcb-adf7-25a1-c2b4-42f5e7897fa5.png)
要望、バグ等ございましたら、コメント頂けると嬉しいです！

# HDF5とは？
階層構造を保持できるファイル形式で、
AI・機械学習のモデル保存用によく用いられているそうです。
[こちらによると](https://qiita.com/simonritchie/items/23db8b4cb5c590924d95)、下記のようなメリット・デメリットがありそうです。

### メリット
・階層構造を持つため、CSV等では複数に分割されるデータを1つのファイルで保持できる
・読込速度がCSV等よりも速い
・複数の言語で使用可能(PickleのようにPython専用ではない)
・圧縮や部分読込等、高速化や低容量化のための小技が充実している

### デメリット
・Excel等の汎用ツールでは開けない
・他のファイルへの変換が容易ではない

# HDF5と可視化
HDF5ファイルは基本的にPythonでの読み書きを前提としてるため、CSVファイルのようにExcelで気軽に中身を確認、といった事はできません。
一応[公式の可視化ツール](https://www.hdfgroup.org/downloads/hdfview/)がありますが、登録やインストールが必要だったり、GUIが古めかしかったりと、使い勝手はあまり良くありません。

そこで今回、C#で**GUIによるHDF5ファイル可視化ツールを自作してみました**

# 可視化ツール概要
C# (.NET)向けのHDF5ライブラリ、[HDF5DotNet](http://hdf5.net/api/T_HDF5DotNet_H5T_H5TClass.aspx)を使用しています。
表示用のデータ作成は[こちら](https://villageofsound.hatenadiary.jp/entry/2014/11/03/234813)を参考にさせて頂きました。
現状はWindows専用ですが、希望があれば他OS対応バージョンも作ろうと思います

### コードの場所
[こちらからダウンロードしてください。](https://github.com/c60evaporator/Hdf5Reader)
コンパイル方法等はReadMeに記載しております

### 使用法
**1. HDF5ファイルをドラッグ＆ドロップ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/cb7c3091-cbe3-8dbe-0ae4-1f5c83170162.png)

**2. 好きな最上位グループをクリックすると、下位のグループ・データが一覧表示される**
(グループ名はベージュ色で、データ名は緑色で表示される)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/e480133a-e934-7cbe-90f3-f9a32811b4d6.png)

**3. 「戻る」をダブルクリックすると上位に、グループ名をダブルクリックすると下位グループに移動できる**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/c2e44e64-4243-1833-e9d9-7bc822670e9b.png)

※表示法「全データ」をチェックすると、全てのデータが一覧表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/cbe3e652-773f-62dc-8ed5-8ab6e2de6a5d.png)

**4. データ名をダブルクリックすると、データ内容が表示される**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/9971453b-1813-8690-3d6d-69c883daa714.png)

**5.「出力」クリックすると、データ内容をCSV出力できる**
(全データor表示データのみ出力するかと、エンコードを選択可能)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/61bbb88e-1d8e-7af8-e152-4124e2388419.png)

**以上です！**
**要望、バグ等ございましたら、コメント頂けると嬉しいです！**

# おわりに
もしこのツールを良いと思われたら、**[GitHubにStar頂けるとありがたいです！](https://github.com/c60evaporator/Hdf5Reader)**
緑になるまでにやっていたこと[色変報告]

#はじめに
2020/10/31日に開催された [AtCoder Regular Contest 107](https://atcoder.jp/contests/arc107)で緑になれました！嬉しい！
他の方もやっているそうので僕もこれまでにやってきたことをまとめておこうと思います
([僕のプロフィール](https://atcoder.jp/users/yuta28)です)

#始めてからこれまで
##始めたて
僕は、プログラミングを始めて、ようやく最初の言語(C)の学習学習が終わったときに競技プログラミングを始めました。最初はC言語での参戦で、ABC-Aレベルは普通に解けてBに苦戦、Cは完全に「＼(^o^)／ｵﾜﾀ」って感じでした。まあ、当時は配列すら知らなかったですし、競プロでしっかりやり合えるような知識は皆無でした。ただ、コンテスト後に他の人の解法を見てたり、回数を重ねていくうちに少しずつ強くなっていた気がします。

##C++/STLとの出会い
それでも、まだまだ弱い自分に1つ目の革命を起こしてくれたのがC++とその標準ライブラリ(STL)でした。まず、標準入力、出力に使う`std::cin`と`std::cout`。それまで僕が使っていた出入力は`scanf`と`printf`でした。これがまあ面倒。関数形式でしたからね。でもcin、coutだとscanf、printfよりも体感的にかけるのでとても楽でした。
次に、`vector`。それまでは長さが固定の平配列しか使ってこなかった自分にとって、可変長配列はいままでの自分のコーディングをガラッと変えてくれました。

##けんちょんさんの記事
STLを使って速度は格段に上がったものの、アルゴリズムの知識は皆無で、「幅優先？深さ優先？ﾅﾆｿﾚ」って感じでした。そしてそういったアルゴリズムの名前を調べていると、[けんちょんさん](https://qiita.com/drken)の記事に出会いました。これがもう本当にわかりやすい。けんちょんさんのおかげでグラフが理解できたと言っても過言ではありません。

##蟻本！
そして、ようやくアルゴリズムの知識がついてきたときに蟻本を買ってみました。すでに知っているアルゴリズムがほとんどでしたが、蟻本のおかげでそれらの知識がとても深まりました。ダイクストラ法も、名前は知っていてもそれがどういうものかわからなかったのですが、蟻本野おかげでようやく理解できました。
( ~~なんか文章短くなってきてるな~~ )

##それから
それから、今日(2020/10/31)まで[AtCoder Problems](https://kenkoooo.com/atcoder/)のRecommendationsや茶埋めをしていくうちにレートは上がり、緑になれました

#覚えたアルゴリズム
僕がいま覚えているアルゴリズムはこんな感じです
・線形探索(迫真)
・二分探索
・動的計画法
・幅優先探索
・深さ優先探索
・ダイクストラ法

この中で一番苦労したのが動的計画法です。高校数学の知識が必要と言われている競技プログラミングで、漸化式を知らなかった中学生の僕にとって、動的計画法は一番理解に苦しみました。でも、数を重ねていくうちに理解でき、普通の１次元DPなら普通にかけるようになりました。
色んな人の色変記事を見ていると、DPはやらなくても大丈夫！という感じですが、最近少し難し目の問題でも灰diffで、AtCoder全体の難易度やユーザーの強さが上がってきている気がします。

#僕の思う、競プロで大事なこと
僕の思う競プロで大事なことはこの２つに限ります
・精進
・考察力・応用力
・学校での数学
順に説明していきます

##1.精進
まず、精進。これは欠かせないです(一部の天才を除いて)。やっぱり、レートの高い人たちほど解いている問題数は多いです。コンテスト後、「この問題は過去に出たこの問題に似てる」というツイートをよく見かけます。つまり、多くの問題を解き、色んなパターンを知っているんだと思います。やっぱり精進は必要。

##2.考察力・応用力
そしてもう一つ大事なのは考察力・応用力ですね。最近はAtCoderSTL(でいいんだっけ?)という、競プロで使えるアルゴリズムが入ったライブラリが整備されています。そのため、なれていないアルゴリズムも関数一つで解決できるようになったというわけです。~~便利な世の中になったもんだ~~
僕にとって、競プロは「実装力+考察力」ですが、そのうちの「実装力」はそれによって解決できてしまうので、残った「考察力」がこれから大事になってくるんだと思います。
例えば、僕はUnionFind(UF)というアルゴリズムは書けません。でも、UFを使った問題を解くことができます。それは、僕がUFの代替となるような手法(BFSによる連結成分の検出)を使っているからです。知識がほとんどなくても、いまある知識をどう「応用」すれば実装できそうか「考察」を行うことさえできれば十分強いと僕は思います。

##学校での数学
やはり、プログラミングには数学は欠かせません。AtCoderでも、コンテスト２回に1回は必ず数学の知識を使った問題が出されています。2次関数の展開・因数分解や素因数分解はもちろん、Σを使う問題も出ます。そのため、学校での数学の授業は絶対におろそかにしてはいけないと思います。

#これから必要になってきそうな技術
先ほどの3つに加えて、緑コーダーをやっていくときに必要になるんだろうな、という技術が、

与えられたデータを前処理できる技術

だと思っています。僕が緑になれたときのコンテスト、ARC107の[C問題](https://atcoder.jp/contests/arc107/tasks/arc107_c)でそれを痛感しました。
ざっくりいうと、この問題の解法は「①どの行同士、列同士が入れ替えられるかを判定。それをグラフ構造にして、②そのグラフに存在する連結成分内の要素数の階乗をかけ合わせる」です。
つまり、この問題はグラフ問題と捉えることができます。
グラフ問題は多くの場合、グラフ構造がそのまま与えられますが、今回の場合はそれはありません。つまり、自分で作る必要があったのです。
このように、「与えられたデータからもう一つのデータを見つけ出す技術」は今後必要になってくると思います。

#最後に
ここまで読んでいただき、ありがとうございました。灰、茶の方に少しでも参考になっていただければ幸いです。

余談
記事はほとんどないですが、機械学習にも興味があります。
twitter:[@Luke02561](https://twitter.com/Luke02561)
Rails 投稿フォームを作成したが投稿できない（formタグ） / エラー発生しない

#どんなエラー

このミス、私は２回ひっかかりまして。
１回目はエラーも起きてないのに、なぜか投稿ができない！
エラー文がないから、検索して調べることもできない！と、悩んでしまました。

２回目（昨日）は、なんで！って思ったけど、なんか数ヶ月前にも同じことあったような・・
というので、解決できました。

また同じようなことを起こさないために、記録として残しておきます。

具体的には、下記のようなことが発生してました。

①投稿フォームに記入します

![スクリーンショット 2020-11-01 16.32.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664818/1c0b3b7b-9d8c-bd5e-fbe7-9cba3ff12c69.png)

②必須事項を記入して、「キロクする」を押すと、なぜか初期画面に戻ります。
 URLもなんかおかしいです。

![スクリーンショット 2020-11-01 16.32.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664818/c4ec58cc-416f-4483-bcc5-f2ca64f1fef9.png)

![スクリーンショット 2020-11-01 16.32.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664818/1f66c15e-7581-a6cf-438c-96b8ffeecb62.png)

#何が発生しているのか

単純なことでした。
formタグをの中に、formタグをいれてしまっていました。

```ruby:new.html.erb
<form>
　 <%= form_for(@post) do |f| %>
   〜略〜
   <% end %>
</form>

```

form要素の入れ子は禁止されているのです。
気をつけていきたいです。

### 参考記事
[formタグは入れ子にできない＆その対処法](https://qiita.com/k5trismegistus/items/eda92664037f96f40e37)
[formタグの入れ子とブラウザーの解釈](https://ja.stackoverflow.com/questions/30651/form%E3%82%BF%E3%82%B0%E3%81%AE%E5%85%A5%E3%82%8C%E5%AD%90%E3%81%A8%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E8%A7%A3%E9%87%88)
SESSIONとは

こちらの記事は簡潔に短くわかりやすい内容で投稿しますので、もっと詳しい内容について知りたい方は最後の参考元リンクよりご覧ください。
また、SESSIONの前にCookieの記事を先に読むことをオススメします。
Cookieについて(https://qiita.com/yyy752/items/9cc85104c3eba900ca3a)

##結論
SESSIONとは、`Webサイトにアクセスして行う一連の行動`のことです。
Webサイトにアクセスしてから一定時間経過する事で通信が終了するか、ブラウザを閉じるまでが1セッションとなります。
Cookieはクライアント(PCやスマホ)に保存されますが、SESSIONは`サーバー`に保存されます。

##SESSIONが必要な理由
Webサイトは、`クライアント(PCやスマホ)`がサーバーに`リクエスト(依頼)`し、サーバーが`レスポンス(返信)`することでブラウザに表示させています。
リクエストとレスポンスの1往復で通信は完了されてしまうので、Cookieを使って前の情報を把握させないと、一連の行動(`SESSION`)として扱えなくなってしまいます。
・前の情報を把握していない状態を`ステートレス`。
・Cookieによって情報を保持している状態を`ステートフル`。
Webサイトを`一連の行動(SESSION)`として扱えないと、このサイトにいつ誰がどのくらい訪問したのか分からなくなってしまいます。


##SESSIONの事例
`SESSION`が無いと、このサイトにいつ、誰が、どのくらい訪問したのか分からない状態になるので、通販サイトのログイン→カートイン→購入までの機能などが使えないことになってしまいますね。
ログイン状態を保持出来ないので、例えばアプリでしたら、「後でまた途中から見よう」、「ゲームを途中から再会しよう」といったことも出来なくなってしまいます。

##まとめ
・`SESSION`とは、Webサイトにアクセスして行う`一連の行動`のこと。
・`Cookie`は`クライアント（PCやスマホ）`、`SESSION`は`サーバー`に保存される。
・Cookieを使ってSESSIONとして扱わないと、ログインや購入などの機能が使えなくなる。

参考元はこちら
（https://qiita.com/7968/items/ce03feb17c8eaa6e4672#%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A3%E3%81%A6%E4%BD%95）
毎日投稿に挑戦してわかったこと

# はじめに
毎日Qiitaにアウトプットをするという挑戦をしたことの振り返りを描こうと思います。

## 結果は？
途中1日途切れてしまうこともありました。
投稿の総日数としては12日間投稿しました。
毎日アウトプットは継続せずにやめようと思います。

## 目的は何だったのか？
毎日学習するという習慣づけはできていたので、その内容をアウトプットすることで学習した内容が脳により定着することを目的として行っておりました。

## 良い点は？
学習した内容の定着は深まると感じています。
そのため、アウトプット自体には学習の中で取り入れるのはとても良いと感じます。
また、毎日投稿が積み上がっていくことで昨日の自分よりも成長しているという感覚を僅かながら感じることはありました。

## 悪い点は？
継続をやめようと思った理由にもなるのですが、
手段が目的になってしまっていると感じたからです。
アウトプットによる学習促進という目的で始めたのですが、Qiitaに投稿するために学習しなくてはという思考になってしまい。投稿するために粗末なアウトプットを量産する結果となり、インプットの質が落ちていると感じました。

また、Qiitaに投稿するためには最低でも30分〜1時間必要であり、仕事から帰宅してその時間を確保すると他の学習する時間が減ってしまったことも実感できました。
そしてインプットの時間が減るということはアウトプットの内容も減ってしまう要因にもなります。

## 最後に
完全に個人の見解ですが、
今回挑戦してみてわかったことは、アウトプットは毎日必ず行わなくても良いということです。
ローカルのマークダウンなどにメモのようにアウトプットする程度で良く、学習が一区切りしたらQiitaのようなグローバルな場所に学習の総まとめ的な内容のアウトプットすることが手段が目的にならずに学習を行えると感じました。
正規表現を自分で考えて書けるようになりたい。。

#正規表現とは、、？
文字列の集合を一つの文字列で表現する方法の一つである。
正規表現では、「メタ文字」という特殊な文字を使って表現します。(ちなみに全て半角です。)

##メタ文字の種類と使い方
- なんでもいい１文字「.」
    - 半角の「.」を使用すると、なんでもいい１文字を表現することができる。

-例-

```ruby

私は.です
#=>私は鳥です、私は馬です、私は0です...etc
```

- 行の先頭と最後「^」「$」
    - 行の先頭や最後にのみ存在する文字列を検索できる。

-例-

```ruby

^ありがとう$　
#=>「ありがとう」の文字だけのある行に合致
```

- 同じ文字の繰り返し「*」「+」「?」
    - 「*」は、直前の文字がないか、直前の文字が１個以上連続するという意味。
    - 「+」は、最低でも１個は + の直前の文字がないといけなく、その後は連続するという意味。
    - 「?」は、直前の文字がまったくないか、１つだけあるという意味。

-例-

```ruby

おー*い
#=> おい、おーーい、おーーーーい...etc

おー+い
#=>おーい、おーーい、おーーーーい...etc

おー?い
#=>おい、おーい...etc
```

- いずれかの文字列「|」
    - | で区切られた文字列のいずれかの文字列が存在した時に、正規表現に合致。

-例-

```ruby

ＩＢＭ|マイクロソフト|Ａｐｐｌｅ|ネットスケープ
#=>ＩＢＭ　マイクロソフト　Ａｐｐｌｅ　ネットスケープ
```

- 指定した文字のどれか「[ ]」
    -  [ ] で括られた中の文字は、その中のどれか１つに合致する。
    - [ ]の中ではメタ文字は普通の文字として認識される。

-例-

```ruby

Ａ[A-Z]ＣＣＣ
#=>Ａ[ABCDEFGHIJKLMNOPQRSTUVWXYZ]ＣＣＣ　

Ａ[0-9]ＣＣＣ
#=>Ａ[0123456789]ＣＣＣ

Ａ[A-Z0-9]ＣＣＣ
#=>Ａで始り、次の文字が半角の大文字アルファベットか数字で、ＣＣＣで終わる文字列の検索
```

- グループ化「( )」
    - まとめて数文字単位で処理できる。

-例-

```ruby

(じゃ)+ーん
#=>じゃーん、じゃじゃーん、じゃじゃじゃーん...etc

明日(ぼく|わたし)は帰宅します
#=>明日ぼくは帰宅します、明日わたしは帰宅します...etc
```

##よく使う正規表現一覧

```r

# 全て数値（全角）
/\A[０-９]+\z/

# 全て数値（半角）
/\A[0-9]+\z/

# 全て数値（全角,半角）
/\A[0-9０-９]+\z/

# 半角アルファベット（小文字）
/\A[a-z]+\z/

# 半角アルファベット（大文字）
 /\A[A-Z]+\z/

# 半角アルファベット（大文字・小文字）
 /\A[a-zA-Z]+\z/

# 半角アルファベット（小文字・数値）
/\A[a-z0-9]+\z/

# 半角アルファベット（大文字・数値）
/\A[A-Z0-9]+\z/

# 半角アルファベット（大文字・小文字・数値）
/\A[a-zA-Z0-9]+\z/

# 全角ひらがな
/\A[ぁ-んー－]+\z/

# 全角カタカナ
/\A[ァ-ヶー－]+\z/

# 全角ひらがな、カタカナ
/\A[ぁ-んァ-ヶー－]+\z/

# 半角カナ
/\A[ｧ-ﾝﾞﾟ]+\z/

# 郵便番号（ハイフンあり3桁・5桁・7桁）
/\A\d{3}-\d{4}$|^\d{3}-\d{2}$|^\d{3}\z/

# 郵便番号（ハイフンあり5桁）
/\A\d{3}-\d{2}\z/

# 郵便番号（ハイフンあり7桁）
/\A\d{3}-\d{4}\z/

# 郵便番号（ハイフンなし3桁）
/\A\d{3}\z/

# 郵便番号（ハイフンなし5桁）
/\A\d{5}\z/

# 郵便番号（ハイフンなし7桁）
/\A\d{7}\z/

# 電話番号(ハイフンなし10桁)
/\A\d{10}\z/

# 携帯番号(ハイフンなし11桁)
/\A\d{11}\z/

# 携帯番号(ハイフンなし10桁or11桁)
/\A\d{10,11}\z/

# e-mail
 /\A\S+@\S+\.\S+\z/

# URL
/\Ahttps?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?/

# クレジットカード(VISA,Master,Diners,Discover,Amex対応)
/\A(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6011[0-9]{12}|3(?:0[0-5]|[68][0-9])[0-9]{11}|3[47][0-9]{13})\z/
```

##参考
[サルにもわかる正規表現入門](https://userweb.mnet.ne.jp/nakama/)

[Rubyアソシエーション:正規表現](https://www.ruby.or.jp/ja/tech/development/ruby/tutorial/040_regexp.html)

[Rubyのバリデーション用正規表現集](https://gist.github.com/nashirox/38323d5b51063ede1d41)
[JavaScript] Version のソートアルゴリズムを高階関数縛りで考えてみた

# 概要

* バージョンを新規順に並べるソートアルゴリズムに憑いて、「`for`文を使わないと難しい」と云う声が挙がっていたので、高階関数縛りで簡単に書けるかどうかを考えてみました。

# 結論

* 空行６行を含む15行ほどで書けたので、多分「かける」が正しいと思われます。

* ~~所要時間は31分でした。~~
バグ修正込みで40分でした。

# 考える元になった記事

* [「なぜ我々は頑なにforを避けるのか」内のコメント](https://qiita.com/tetsuya-zama/items/11e19b9da4892eb365c4#comment-a387cc2735217695f23b)

* [バージョン情報ソートができないと面接に落ちるので解答しとく](https://qiita.com/standard-software/items/acc24c27be222a6f1b20)

# コード

```JavaScript:高階関数縛りのバージョン名ソートアルゴリズム
const versions = [
  '5.0.0.',
  '1.3.0.9',
  '0.2.0',
  '3.1.2',
  '5',
  '0.1.6',
  '5.0.0',
  '3.3.3.3',
  '3.3.3.3.3',
  '3.10',
  '0.2.0',
  '0.2.0a',
  '0.2.0aa',
  '0.2.0AA',
  '0.2.0Aa',
  '0.2.0aA',
  '0.2.0c',
  '0.2.0b',
  '0.2.0A',
  '0.2.0C',
  '0.2.0B',
  '0.2.0.a',
  '0.2.0.c',
  '0.2.0.b',
  '0.2.0.A',
  '0.2.0.C',
  '0.2.0.B',
  '5.0.0.',
  '5.0.0.0',
]

const output = [
  '5.0.0.0',
  '5.0.0.',
  '5.0.0.',
  '5.0.0',
  '5',
  '3.10',
  '3.3.3.3.3',
  '3.3.3.3',
  '3.1.2',
  '1.3.0.9',
  '0.2.0C',
  '0.2.0c',
  '0.2.0B',
  '0.2.0b',
  '0.2.0AA',
  '0.2.0Aa',
  '0.2.0aA',
  '0.2.0aa',
  '0.2.0A',
  '0.2.0a',
  '0.2.0.C',
  '0.2.0.c',
  '0.2.0.B',
  '0.2.0.b',
  '0.2.0.A',
  '0.2.0.a',
  '0.2.0',
  '0.2.0',
  '0.1.6',
]

const splitRegExp = /\./

/**
 * Version sort.
 * @param {string} a
 * @param {string} b
 */
function versionSort (a, b) {
  const aHash = a.split(splitRegExp)
  const bHash = b.split(splitRegExp)

  const diffIndex = aHash.findIndex((aa, i) => aa !== bHash[i])
  if (diffIndex === -1) {
    return bHash.length - aHash.length
  }

  const ax = aHash[diffIndex]
  const bx = bHash[diffIndex]

  if (!bx) {
    return -1
  }

  const na = Number(ax)
  const nb = Number(bx)

  if (isNaN(na + nb)) {
    return bx.localeCompare(ax)
  }

  return nb - na
}

const sortedVersions = versions.sort(versionSort)

console.log(
  versions,
  sortedVersions,
  sortedVersions.join() === output.join()
)
```
Rails学習5日目

#Railsチュートリアル　第１章
#1.4.1 セットアップ（Git）

gitにコードを保存する前に自分の名前とアドレスを１パソコンに1回だけ設定する必要がある

```
$ git config --global user.name "Your Name"
$ git config --global user.email your.email@example.com
```

これでこのパソコンのgitの名前とアドレスが設定される。

>情報を見る

git config -l　で設定したgitの情報が見れる


>値を設定し直す

アドレスを変えたい場合
git config --global user.email your.email@example.com(上のコードと一緒)
(globalは設定したいリポジトリの範囲を表す)

>エラー表示

```
# Gitリポジトリの外側で実行した場合
$ git config <name> <value>
fatal: not in a git directory
```

>git init

git initは新しいリポジトリを作成するためのコマンド

>git add -A

git initで作ったリポジトリに自分が作ったコードが入っているディレクトリが加わる

ここまでくるとデータはステージングというリポジトリの仮置き場に置かれる（最終確認のために仮置きしている）

このタイミングでステージング（仮置き）の中身を知るには

```
git status
```
そして最後にリポジトリに本置きして保存が確定される
本置きはcommitを使う
-m "~~~~" はメッセージを記入する部分

```
$ git commit -m "Initialize repository"
```

ちゃんとコミットしたかどうか確認するにはgit logと打つと確認ができる。

```
git log
```

githubに公開するにはここから

>1.GitHubでアカウントを作る
2.新しいリポジトリを作る
3.gitのHTTPSをゲットする
4.下のコードをターミナルにうつ

```
git remote add origin gitのHTTPS
git branch -M main
git push -u origin main
```


>5.ユーザー名とパスワードを入力

で完了する。
【S3】バージョン管理

## 1. バージョニングを有効化する
![スクリーンショット 2020-08-18 23.46.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/69daebb3-2c11-ac43-52fe-01487fb2bedd.png)

## 2. テキストファイルをアップロードする
「version_text.txt」というファイル名でアップロードする
![スクリーンショット 2020-08-18 23.53.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/97fe134f-f2ab-fc74-7cbc-6300ca632b08.png)

## 3 .パブリックアクセスを許可する
![スクリーンショット 2020-08-18 23.54.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/bc551c00-4827-89b7-ebe4-dbd548a8ab3e.png)

## 4. 同じファイル名のテキストファイルをアップロードする
![スクリーンショット 2020-08-19 0.02.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/6428dd8e-8779-92ec-ebc6-a3040910c147.png)

## 5. バージョンを確認する
「version_text.text」にバージョンIDが付与されていることが確認出来る
![スクリーンショット 2020-08-19 0.05.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/9b7713e7-7c25-08ba-2b3f-b92afa5f38c3.png)

## 4. パブリックアクセスを許可する
![スクリーンショット 2020-08-19 0.09.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/9fa9c64f-9031-5d99-e273-911133d8b27d.png)

## 5. ファイルを削除する
![スクリーンショット 2020-08-19 0.13.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/2157627d-8f3a-a898-c291-7c9320d818e8.png)

## 6. 再度バージョンを確認する
![スクリーンショット 2020-08-19 0.18.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/ada17860-f0f4-4fe8-0f58-8ef198114027.png)

## 7. 削除マーカーが付与されたオブジェクトを削除する
![スクリーンショット 2020-08-19 7.39.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/7ab1771f-7fb4-c429-ea74-21ed07c3b736.png)
![スクリーンショット 2020-08-19 7.45.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/50d839ac-dca2-5ce6-852b-54f9b0dffc12.png)

### 削除完了
最新バージョンが変更される
![スクリーンショット 2020-08-19 7.49.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/cf3f5f7b-17db-c535-6b71-50fb8b82524a.png)

## 8. 最新バージョンのオブジェクトURLにアクセスする
削除前のオブジェクトが復元されていることが確認出来る
（更にこのオブジェクトを削除すると、「version1.0」と記述された最初のオブジェクトが最新バージョンとなる）
![スクリーンショット 2020-08-19 7.52.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/1a0e5354-7198-3a25-61a8-6ed21151e920.png)
【S3】バケットの作成・オブジェクトの公開

## やること
- S3バケットを作成し、バケット内にオブジェクトをアップロード
- アップロードしたオブジェクトをインターネットからアクセス出来るようにする

## 1. バケットを作成する
![スクリーンショット 2020-08-18 20.08.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/4df75899-2340-314c-3fa1-c4d250956fa3.png)
![スクリーンショット 2020-08-18 20.12.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/318254c0-c03a-dd7a-24a8-ef4c9a1a22d6.png)

### 作成完了
![スクリーンショット 2020-08-18 20.14.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/21ac396e-07ba-473e-23e1-f6222e482f1e.png)

## 2. データをアップロードする
![スクリーンショット 2020-08-18 20.24.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/fa874f39-1054-1c55-f430-3ab4f4c0896d.png)

## 3. ファイルを選択する
![スクリーンショット 2020-08-18 20.25.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/c75a26c2-2998-49da-2f7f-80b81f21c3eb.png)

## 4. アクセス許可を設定する
読み込み/書き込みの可否、パブリックアクセス許可等を設定する
![スクリーンショット 2020-08-18 20.25.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/82ba0e23-9d15-e9be-31ed-080eebfcd94b.png)

## 5. プロパティを設定する
ストレージクラスの選択、暗号化の設定をする
![スクリーンショット 2020-08-18 20.26.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/e061f911-a012-2512-d97f-2b163da528b1.png)

### アップロード完了
![スクリーンショット 2020-08-18 20.38.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/0c461152-2e0d-2f4c-545b-6f8d9cf6757f.png)

## 6. オブジェクトURLにアクセスする
![スクリーンショット 2020-08-18 20.47.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/a3763711-0038-eabb-80b0-ac3053ea662e.png)

アップロードしたオブジェクトへはアクセスできない状態
![スクリーンショット 2020-08-18 23.34.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/1db1082d-1e44-9608-e468-0c92203940ea.png)

## 6. パブリックアクセスを許可する
![スクリーンショット 2020-08-18 20.40.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/9582652f-c127-e8cc-fa95-4593d064abd0.png)

### 設定変更完了
![スクリーンショット 2020-08-18 20.42.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/1294f804-a6ff-85cf-b271-e6097cf11409.png)

## 7. オブジェクトを公開する
![スクリーンショット 2020-08-18 20.43.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/22839f77-534c-fc50-84dd-34ed7c04b20e.png)
![スクリーンショット 2020-08-18 20.45.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/a7e087f1-775c-6d6f-8f78-9eaf15e01854.png)

## 8. 再度オブジェクトURLにアクセスする
オブジェクトへのアクセスが可能になったことが確認出来る
![スクリーンショット 2020-08-18 20.46.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/dd768df6-c453-997a-d2cd-44b262129339.png)
herokuのアプリを移行する方法

# 概要

herokuで作成したアプリケーションを他のアカウントに移動させる方法です。

基本は以下の方法で移せます。

```
heroku apps:transfer <移行先アカウント> --app <移行したいアプリ>
```

## Personalのアプリをteamsへ

```
heroku apps:transfer <チーム名> --app <移行したいアプリ>
```

## teamsのアプリをPersonalへ

```
heroku apps:transfer <herokuの登録メールアドレス> --app <移行したいアプリ>
```

以上です。
GraphQLの始め方！概要だけさらっと学ぼう！

# はじめに
今回はGraphQLの概要を紹介します！

- GraphQLが出てくるまでに、どのようなデータ通信があったのか?
- RESTの問題点は何か?
- GraphQLでできること
- GraphQLの始め方

を解説します！

動画で、テンポよく学びたい方はこちらをどうぞ！
[【YouTube動画】 GraphQLを使いたいけどまだやってないという方に！ GraphQLの始め方を解説します！](https://youtu.be/duis4yokW2Y)
[![GraphQL](https://img.youtube.com/vi/duis4yokW2Y/0.jpg)](https://www.youtube.com/watch?v=duis4yokW2Y)

# データ通信の歴史
最初に出てきたデータ通信として、RPCと呼ばれる規約があります。
これはRemote Procedure Callの略で、クライアント側からサーバー側のメソッドを呼ぶことができます。
最近では、Googleが考案したHTTP/2準拠のgRPCというものも出てきていますね。

次に出てきたのは、マイクロソフトが考案したSOAPです。
これは、XMLを使ってデータ通信をします。
SAML認証でも使われてますね。
下のようなxmlファイルを作成する必要があります。
ちょっと、読みづらいですね。

```xml
<?xml version="1.0"?>
<PurchaseOrder PurchaseOrderNumber="99503" OrderDate="1999-10-20">
  <Address Type="Shipping">
    <Name>Ellen Adams</Name>
    <Street>123 Maple Street</Street>
    <City>Mill Valley</City>
    <State>CA</State>
    <Zip>10999</Zip>
    <Country>USA</Country>
  </Address>
  <Address Type="Billing">
    <Name>Tai Yee</Name>
    <Street>8 Oak Avenue</Street>
    <City>Old Town</City>
    <State>PA</State>
    <Zip>95819</Zip>
    <Country>USA</Country>
  </Address>
  <DeliveryNotes>Please leave packages in shed by driveway.</DeliveryNotes>
  <Items>
    <Item PartNumber="872-AA">
      <ProductName>Lawnmower</ProductName>
      <Quantity>1</Quantity>
      <USPrice>148.95</USPrice>
      <Comment>Confirm this is electric</Comment>
    </Item>
  </Items>
</PurchaseOrder>
```

SOAPよりも簡単にデータ通信できる規約として生まれたのがRESTです。
RESTはリソースURLにHTTPメソッド (GET, POST, PUT, PATCH, DELETE) を使ってレスポンスを返してもらって使います。
バックエンド側で制御しやすく、シンプルで導入しやすいです！

# RESTの問題点
RESTはシンプルで使いやすいのですが、レスポンスが固定であるため、以下のような問題があります。

レスポンスが固定のため...
- 複数のデータを掛け合わせて使いたい場合、1つのAPIでは難しい
- 使う情報が少ない場合、フロント側でフィルタリングする必要がある


GraphQLは上記の問題を解消するために、Facebookが開発しました。
これは、フロント側がクエリを要求するフロント主体のデータ通信です。
また、APIの仕様をスキーマとして定めて開発を進めます。

# GraphQLでできること
GraphQLでは以下のような機能が提供されます。
雰囲気だけでも掴めれるようにコードも書いておきました。

- クエリ
- ミューテーション
- サブスクリプション

## クエリ
クエリはSQL文のように、欲しいデータを書きます。

```graphql
query {
  # 欲しいデータのモデル名を書く
  person(personId: 1) {
    # 実際に取得したいデータを書く
    name
    age
    address
    # リレーションを設定している場合、紐づいている先のデータも取れます！
    company {
      name
    }
  }
}
```

## ミューテーション
値の変更をするために使います。
これはRESTと同じように使えます。

```graphql
mutation personMutation {
  update(name: "Namae!!!") {
    id
    name
  }
}
```

## サブスクリプション
クライアント側がデータ変更を検知した時に動作します。

```graphql
subscription {
  nameChange {
    name
  }
}
```


# GraphQLの事始め
REST APIにおけるpawやpostmanのように、GraphQLにも専用のツールがあります。
GraphiQLかGraphQL playgroundのどちらかが良いと思います。
これらを使うと、クエリ文の発行を試すことができます。

また、クエリ文を叩くためのサーバーとして、スターウォーズ APIやGitHub APIがあります。
クエリ文だけなら、スターウォーズAPI、ミューテーションも試したいならGitHub APIで遊んでみることができます！

試してみて、実際に自分で作ってみたいと思われたら、ApolloプロジェクトやRelayプロジェクトで使いたいサーバーを選んで、作ってみてください！！



# まとめ
今回、GraphQLについて簡単に紹介しました。

感想やコメント等あればよろしくお願いします！
また、[twitter](https://twitter.com/yassun_youtuber)や[youtube](https://www.youtube.com/channel/UCajrdoGzHzDogrNrLYYmGsg/featured?view_as=public)でのコメントもお待ちしています！
【S3】ストレージサービス / ストレージクラス

## ストレージサービス
### 1. オブジェクトストレージサービス
データをオブジェクト形式で保存するストレージ
（例）Amazon S3、Amazon S3 Glacier

- フラットにアドレス空間に保存されるため、インデックスの作成が容易

- データへのアクセスはメタデータに対する検索を通じて行われる

- 仮想化の技術を用いて物理的に離れた複数のサーバーを並列化し、一つのストレージプールとする分散ファイルストレージの形式で構成することが可能

### 2. ブロックストレージサービス
データをブロック形式で保存するストレージ
（例）Amazon EBS、Amazon EC2 instance Store

- 物理マシンの記録領域をボリュームという単位で分割、更にその内部を固定長のブロックに切り出して、そのブロックにデータを保存・管理する

- ボリュームとブロックには固有の番号（アドレス）が振り分けられている

- ユーザーの要求するデータ容量に合わせて、必要となるブロックリソースが確保・統合される

### 3. ファイルストレージサービス
データをファイル形式で保存するストレージ
（例）Amazon EFS

- データは「フォルダ」や「ディレクトリ」といった形式で、階層的に管理・保存される

- データへアクセスするには、一意のパスを用いて階層をたどっていく

- データ保存の際にはファイル名・作成日・サイズ・データの種類な等のメタデータが付与される

## ストレージクラス
### 1. スタンダード
デフォルトのストレージクラス

**対象**：頻繁にアクセスされるデータ
**耐久性**：99.999999999%
**可用性**：99.99%

### 2. スタンダード - IA
スタンダードに比べて格納コストが安価
データの読み出し容量に対して課金される

**対象**：存続期間が長く、あまり頻繁にアクセスされないデータ
**耐久性**：99.999999999%
**可用性**：99.9%

### 3. Intelligent-Tiering
アクセス頻度を自動判別し、最もコスト効率の良いアクセス階層にデータを移動させる

**対象**：アクセスパターンが変化する、または不明な、存続期間が長いデータ
**耐久性**：99.999999999%
**可用性**：99.9%

### 4. 1ゾーン - IA
スタンダード - IA に比べて格納コストが安価
1つのZoneにデータが配置されるため、可用性は下がる

**対象**：存続期間が長く頻繁にアクセスされない、重要性の低いデータ
**耐久性**：99.999999999%
**可用性**：99.5%

### 5. Glacier
アーカイブ専用のストレージ
格納したデータを参照するためにはS3へのデータ復元が必要

**対象**：取得時間が数分～数時間までの長期のデータアーカイブ
**耐久性**：99.999999999%
**可用性**：99.99%

### 6. RRS（Reduced Redundancy Storage）
耐久性が低く安価でもない
Glacierから取り出したデータの置き場所として利用

**対象**：頻繁にアクセスされる重要度が低いデータ
**耐久性**：99.99%
**可用性**：99.99%
簡単！jQueryで無限スクロールで要素追加を実装

この関数を入れるだけで、Twitterみたいな状態を実現できます。
以上です。頑張ってください。👍

![text4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276138/89bf31d2-751e-b034-a119-b1caafccbcaf.gif)

```javascript:test.js
// $('.example')のところにjQueryオブジェクトを入れる。
infinityScroll($('.example'));

// 無限スクロールで
// eは、jqueryオブジェクト。
function infinityScroll(e){
    e.scroll(function() { // eがスクロールしたとき実行
    var maxrange = e[0].scrollHeight; // 1.eの高さ
    var range = e.scrollTop()+ e[0].offsetHeight; // 2.全スクロールの量の数値
    if(range == maxrange){ // 1と2が同じの時、このDOM要素を最後に追加。
        e.append($(`<span>example</span>`)); } }); }
```


上のコードで無理だった場合は、こちらで可能です。

```javascript
// 画面の一番下についたときtrue
element.scrollHeight - element.scrollTop == element.clientHeight
```
elementの部分は、html、bodyが入ります。

```javascript
// 画面の一番下についたときtrue
html.scrollHeight - html.scrollTop == html.clientHeight
```
情報源：http://js.studio-kingdom.com/javascript/element/scroll_height
【S3】アクセス管理 / セキュリティ

## アクセス管理
### 1. IAM（ユーザー）ポリシー
IAMユーザに対して、オブジェクトへのアクセス権限としてREAD / PUT / DELETE などを設定

- 自アカウント内のIAMユーザーやグループ、ロールに割り当て可能
- 他のAWSアカウントを指定した設定は不可

### 2. バケットポリシー
S3バケットにJSON形式でアクセス権限を設定

- 他のAWSアカウントのユーザーに対しても設定可能

### 3. ACL（アクセスコントロールリスト）
S3バケット単位やオブジェクト単位でJSON形式によりアクセス権限を設定

- オブジェクトに付与されたURLについてもHTTPアクセスの許可を与えられる
- 条件付きアクセス許可・拒否の設定は不可

### 4. 署名付きURL（Pre-signed Object URL）
AWS SDKで生成した署名付きURLで一定時間オブジェクトへのアクセスを許可

- 特定のユーザーのみに対してアクセス許可をすることが可能
- 署名付きURLを設定しない場合、アクセス権限を持ち、オブジェクトへのURLを知っているユーザーはオブジェクトへのアクセスが可能

### 5. パブリックアクセス
- 設定をオンにすることで、バケットとオブジェクトに対してインターネット上からのアクセスを許可
- デフォルトは全てオフ

## データ暗号化
### 1. SSE-S3
S3が管理するキーによるサーバー側の暗号化

- S3の標準暗号化方式
- 暗号化には、強力なブロック暗号の1つである256ビットのAdvanced Encryption Standard（AES-256）を使用

### 2. SSE-KMS
KMS（AWS Key Management Service）に保存されているCMK（カスタマーマスターキー）によるサーバー側の暗号化

- クライアント独自の暗号キーを利用可能
- CMKの使用履歴を示す監査証跡を残すことが出来る

### 3. SSE-C
ユーザーが指定したキーによるサーバー側の暗号化

- ユーザー自身で暗号化キーを管理する
- S3は、ディスクに書き込む際の暗号化とオブジェクトにアクセスする際の復号を管理

### 4. CSE
S3にデータを送信する前にクライアント側でデータを暗号化

- KMSに保存されているCMK、またはアプリケーション内に保存したマスターキーを使用
iPhone12にしてからすぐ熱くなってバッテリーを消費するというときの対処法

ちょっとプログラミングじゃないけど、少しレアなケースでもあるので、困ってる人や、iPhoneアプリ開発している側で問い合わせで困ってる人もいそうなので書いておきます。

## 症状

アップルストアでiPhoneのハードの検査をしても特に不具合はないと言われる。
バッテーリーの項目を見ても、特に変なアプリがバックグラウンドで走っていたりするわけでもない。
にもかかわらず、NetflixやTwitterを見ているだけ、電話をかけているだけ等で端末が熱くなって、バッテリーの消費も激しい。

## 端末の特徴

自分のケースは、SIMフリーのiPhone12 Proで、LineモバイルのSoftbank回線を利用してる場合だった。
今回のが当てはまるのは５G対応のiPhone12系列で、3大キャリアの5G対応SIMを使ってない場合に起こりそう。

## 解決策

「設定」 => 「モバイル通信」 => 「通信のプション」 => 「音声通話とデータ」

で、デフォルトの 「5Gオート」 を 「4G」 に切り替える。

これだけ。

## 解決する理由 (多分)

モバイル端末は一般的に電波のないところにいるほうが電池消費が激しい。
その理由は電波を定期的に捕まえに行こうとするから。

これと同じ用に、5Gオートにしていると、5Gを捕まえられることはない、捕まえても使えないにもかかわらず、無理に5Gの電波を探そうとして電池を消費してしまうと考えられる。

これは、通信の部分なので、どのアプリのせいでも無いけれど、通信しようとするアプリを利用している(ほぼ全て)ときは電池消費が激しくなって熱くなる。

自分の場合はWifi通信でアプリを使っているときにも起こったので、Wifi通信中も電波を探すことはやっていると考えられそう。
【S3】S3とは

## S3とは
**Amazon Simple Storage Service** の略
インターネット経由で利用できるオブジェクトストレージサービス

- 高いスケーラビリティ・データ可用性・セキュリティ・パフォーマンスを提供
- 99.999999999％（イレブンナイン）の耐久性
- Key-Value Store形式でデータを取得・格納
- バケットはリージョン単位で作成する
- 作成可能バケット数はデフォルトで1アカウントにつき最大100個
- バケットに格納出来るオブジェクト数・データ総量は無制限
- 1オブジェクトのサイズは最大5TB
- 1回のPUTオペレーションでアップロード出来るオブジェクトのサイズは最大5GB
<br>→ 5GBを超える場合は **マルチパートアップロード** を使用
 
## 用途
- コンテンツ配信・保管
- ログ・バッチの保管場所
- バックアップ/ディザスタリカバリ
- Webの静的ホスティング
- データレイク

## オブジェクト構成
**1. リージョン**：地理的要素
**2. バケット**：オブジェクトを保存する場所
**3. オブジェクトキー**：オブジェクトを一意に指定するための名前
**4. プレフィックス**：オブジェクトがS3全体で一意のキーになるために使用される文字列
**5. バージョンID**：オブジェクトのバージョン管理ID（バージョニングを有効化すると付与される）
**6. VPCエンドポイント**：インターネットを経由せずにVPC内部からS3にアクセスするためのエンドポイント

## 結果整合性モデル
S3はデータの耐久性向上のため、複数のアベイラビリティーゾーンにデータを複製する
全てのリージョンで、上書きのPUT及びDELETEについて結果整合性を採用

|オペレーション|Consistencyモデル|データ読み取り時の挙動|
|:-:|:-:|:-:|
|新規登録<br>（New PUTs）|Consistency Read|登録時、即座にデータ参照可能|
|更新<br>（Overwrite PUTs）|Eventual Consistency Read|更新直後は更新前のデータが参照される可能性がある|
|削除<br>（DELETE）|Eventual Consistency Read|削除直後は削除前のデータが参照される可能性がある|
**※ オンラインで頻繁に更新されるようなデータの格納先としてのユースケースには向いておらず、静的なデータの格納に向いている**

## マルチパートアップロード
マルチパートアップロードAPIを使用することで、大容量オブジェクトをいくつかに分けてアップロードすることが可能

- 最大5TBのデータをアップロード可能
- 5MB〜5GBのサイズで1〜10000パートに分割
- 最後のパートは5MB以下でも可
- アップロード失敗時はパートデータが残るため、ライフサイクル管理でクリーンアップ設定が必要

## Webサイトホスティング
- HTML, CSS, JavaScript, 画像等の静的コンテンツをホストするWebサイトとしてS3バケットを設定することが可能
- バケットポリシーを使用してアクセスを許可したいユーザーにGET権限を付与し、バケットをWebサイトホスティング用に設定する
<br>→ バケットのAWSリージョン固有のWebサイトエンドポイント（URL）でアクセス可能になる

## バージョニング機能
有効化すると、1つのバケットで複数世代のオブジェクトを保存・維持することを可能とする機能

- バケット単位で設定
- 機能を有効化したバケットに格納されるオブジェクトには**バージョンID**が付与される
- ライフサイクルポリシーを定義し、保存期間を指定することがベストプラクティス

## ライフサイクル機能
S3のバケットに格納されたオブジェクトに対し、ストレージクラスの変更（移行アクション）や削除処理（失効アクション）を自動化する機能

- ライフサイクルルールは最大1,000個設定可能

## S3 Access Analyzer
設定されたアクセスポリシーに基づき、S3バケットの監視・確認・保護をする機能

- バケットアクセスポリシーを評価することで、不正アクセスの可能性があるバケットの発見が可能
- 有効化することで、S3リソースへの意図したアクセスのみを提供

## レプリケーション
異なるS3バケット間でオブジェクトを自動的に非同期コピー出来る仕組み

- **クロスリージョンレプリケーション（CRR）**：異なるリージョン内のバケット間でオブジェクトをコピー
- **同一リージョンレプリケーション（SRR）**：同一のリージョン内のバケット間でオブジェクトをコピー

## インベントリ
S3に格納されたオブジェクトのリストをCSV形式で一括取得出来る機能

## S3 Transfer Acceleration
リージョン単位で作成されたS3バケット上のデータを別リージョンに高速転送出来る機能

- AWSネットワーク内において、全世界のAWSエッジネットワーク中から最適化されたルートを経由して転送する

## データ解析
### 1. Amazon S3 Select（Glacier Select）
S3の内部機能として有している検索機能で、S3に直接クエリを実行しデータを取得出来る

### 2. Amazon Athena
S3内のデータの直接分析を簡易化するインタラクティブなクエリサービス

### 3. Amazon Macie
機械学習によってS3内の機密データを自動的に検出/分類/保護するフルマネージド型のセキュリティサービス

### 4. Amazon Redshift Spectrum
S3の格納データに対して直接クエリを発行出来る機能
（使用にはRedshiftクラスターが起動されていることが前提）

## CORS（Cross Origin Resource Sharing）
特定のドメインにロードされたクライアントウェブアプリケーションが異なるドメイン内のリソースと通信する方法を定義するもの
S3リソースに対するクロスオリジンアクセスを選択的に許可することが可能

## バッチオペレーション
S3オブジェクトの大量データに対して一括処理の実行が可能

**1. マニフェスト**
・S3が作用するオブジェクトキーをリストするS3オブジェクト
・Amazon S3インベントリレポートまたはCSVファイルのいずれかの形式で設定

**2. ジョブ**
・S3バッチオペレーションの機能の基本単位
・マニフェストに一覧表示されているオブジェクトにおいて指定されたオペレーションを実行するために必要な全ての情報が含まれている

**3. オペレーション**
・ジョブで実行するAPIアクション（オブジェクトのコピーなど）のタイプ
・各ジョブは、マニフェストで指定されているすべてのオブジェクトに対して1種類のオペレーションを実行する

**4. タスク**
・ジョブ実行の単位
・単一のオブジェクトでジョブのオペレーションを実行するためのS3またはLambda APIオペレーションへの単一の呼び出しを表す