OmniAICreator/Qiita-1.07M huggingface dataset:
gitでブランチ一覧を付番表示して一瞬で切り替えるエイリアス

ブランチ一覧表示から数字選ぶだけでブランチ切り替えできるようになるエイリアスを紹介します。ブランチ名を都度コピペして消耗してましたが、一気に捗るようになりました。

![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256466/85e07f61-b0c3-207a-0342-a5d0c501ffbc.gif)

Mac・Linuxを想定しております。**bash**の場合は以下を`~/.bash_profile`に追記して`source ~/.bash_profile`で更新するだけです。

```bash:~/.bash_profileの場合
function b() {
  command git branch --sort=-committerdate | cut -c 3- | head -n20 | cat -n
  command read -p "Enter Branch Number: " BranchNumber
  command git checkout $(git branch --sort=-committerdate | cut -c 3- | head -n20 |awk NR==$BranchNumber)
}
```

**zsh**の場合は以下を`~/.zshrc`に追記して`source ~/.zshrc`で更新です。

```bash:~/.zshrcの場合
function b() {
  command git branch --sort=-committerdate | cut -c 3- | head -n20 | cat -n
  read 'BranchNumber?Enter Branch Number: '
  command git checkout $(git branch --sort=-committerdate | cut -c 3- | head -n20 |awk NR==$BranchNumber)
}
```



コマンドは短く`b`の一文字を割り当てています。全てネイティブコマンドで動作してますので、カスタマイズも容易かと思います。全てのエンジニアに良いgitライフを！
.gitmodulesでSpring Boot プロジェクト内のReactプロジェクトををサブモジュールとして管理できるようにする

[こちら](https://www.youtube.com/watch?v=7XxH-G9ckeU&t=526s)のYoutubeでSpring Bootプロジェクト内でcreate-react-appを実行し、mavenのプラグインを使用することによって、Spring BootとReactを1つのプロジェクト内で管理することができるようになりました。しかしこれを完了した後GitHubにSpring Bootプロジェクトをまるまるプッシュしたところ、create-react-appで作成したディレクトリが別のプロジェクトとなっているため、GitHub上ではSpringのリポジトリを掘っていても中身がどうなっているか確認できませんでした。。そこでReactのプロジェクトをSpringのプロジェクトのサブモジュールとして認識させることによって、GitHub上でSpringのプロジェクトを掘っていきReactのプロジェクトに当たったときに、そこがリンクとしてReactのプロジェクトに飛べるようにしました。

以下の画像のように、プロジェクトのルートディレクトリに.gitmodulesファイルを作成し、ここにサブモジュールとして認識させたいリポジトリのURLとプロジェクト内のフォルダを指定します
![スクリーンショット 2021-04-21 8.15.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637360/c0b50105-a41a-f82b-69a9-1539acb1f1de.png)

そうすることによって、以下の画像のようにSpringのプロジェクトをGithub上で掘っていたところ、Reactのプロジェクトがリンクされて、そのReactのプロジェクトのリポジトリに飛べるようになります
![スクリーンショット 2021-04-21 8.17.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637360/96bdcd59-158d-7e44-ffbb-22fb23edb931.png)

これによってようやくSpring BootとReactの環境構築が完成しました。
form_withを調べました


1.保存するしない
-

保村しない

```ruby:view/a.html.erb
<%= form_with url: "パス" do |form| %>
  # 内容
<% end %>
```

保存する

```ruby:view/a.html.erb
<%= form_with model: モデルクラスのインスタンス do |form| %>
  # 内容
<% end %>
```
>参考：【Rails】form_withの使い方を徹底解説！「Pikawaka」
>https://pikawaka.com/rails/form_with



>参考：さらに詳しいいページ発見
MVCの観点から解説です。
@sew_sou19さんありがとうございます
>https://qiita.com/sew_sou19/items/e9944904b50899fbb4cf
【Git】gitでファイルの履歴を過去に戻す方法

#初めに
gitでcommitしたけどその後不具合が発生したことはよくあります。そんな時にファイルの履歴を過去に戻す方法について記事にしてみました。
※内容に間違いなどがある場合はご指摘をよろしくお願いします。

#基本はコマンドラインで操作する
github desktopなどGUIベースでgitの操作が簡単にできるようになってはいるものの、gitの細かい操作には向いてないのでお勧めしません。コマンドラインで履歴を戻すにはワークツリー、ステージ、リポジトリというgitの仕組みを理解する必要があります。
https://qiita.com/redrabbit1104/items/2046a7853351e69c1b18

#git logで履歴を確認
先ずは「git log」コマンドで今までの履歴を確認します。

```cl
>git log

commit b34c256fd724cc269144abdeddc42d31101c2374 (HEAD -> master)
Author: redrabbit1104 <redcaprabbit1104@gmail.com>
Date:   Wed Apr 21 07:26:25 2021 +0900

    modify-html

commit c808493e13e5d42f5371f00f4efa8ccaa224d5c9
Author: redrabbit1104 <redcaprabbit1104@gmail.com>
Date:   Wed Apr 21 07:25:33 2021 +0900

    first_commit
(END)
```

最新のcommit（履歴）が一番上で下の方が古いcommit(履歴）です。HEADは一番最後にcommitした履歴。つまり最新の履歴です。commitの隣の長い番号（b34c256fd724cc269144abdeddc42d31101c2374）はcommitした時の管理番号みたいなものであり、この番号を使って履歴を戻すことができます。


```html
#index.htmlファイル
<body>

    <div></div>
    <p></p>
    <a href=""></a>
    TEST     #"TEST"という文字列が書いてある
</body>
```

#git reset
git resetコマンドを使って過去に戻ることができます。そのためには先程のcommit番号が必要です。今回は戻りたいところが「first_commit」という履歴だとします。commit番号は「c808493e13e5d42f5371f00f4efa8ccaa224d5c9」。

>因みにgit restの後にこの番号を入力すればいいのですが、「--hard」「--mixed」
「--soft」があります。

>- --soft :commitのみ取り消す（ローカルリポジトリーの取り消し）
- --mixed : commitとaddの取り消し（ローカルリポジトリーとステージの取り消し）
- --hard : commitとaddと作業場の修正内容まで全部取り消し（ローカルリポジトリーとステージ、ワークツリー全て取り消す）

いろいろありますが、基本的には--hardで大丈夫です。
git reset --hard 「戻りたい時点のcommit番号」

```cl
>git reset --hard c808493e13e5d42f5371f00f4efa8ccaa224d5c9
HEAD is now at c808493 first_commit
```
first_commitに戻りましたとメッセージが出ます。

#履歴とファイルの確認
git logで履歴を確認します。

```cl
❯ git log
commit c808493e13e5d42f5371f00f4efa8ccaa224d5c9 (HEAD -> master)
Author: redrabbit1104 <redcaprabbit1104@gmail.com>
Date:   Wed Apr 21 07:25:33 2021 +0900

    first_commit
(END)
```
modify-htmlの履歴がなくなり、現在first_commitが最新の履歴になりました。index.htmlのファイルを確認してみます。

```html
#index.htmlファイル
<body>

    <div></div>
    <p></p>
    <a href=""></a>
  　　　　　　   #"TEST"という文字列が消えている
</body>
```
これで履歴が戻ったことが確認できました。

#参考記事
https://qiita.com/shuntaro_tamura/items/db1aef9cf9d78db50ffe
https://www.sejuku.net/blog/71512
プルダウンメニュー

プルダウンメニューを作っていきます。
index.htmlファイルをプルダウンメニュー分の数作成します。そして、外部scriptファイルを読み込みます。

今回は、親要素のフォームでくくります。idで紐付けます。
HTMLでのプルダウンメニューを作る場合は、slectタグを使います。これが子要素になります。
そして、その子要素にはoptionタグを使用します。
また、フォーム送信時にはname属性を付けます。このname属性はデータベースに送られるときの名前になります。
今回の場合だと、このフォームの名前は、slectとなります。

```index.html
    <form id="form">
        <select name="select">
            <option value="index.html">日本語</option>
            <option value="index-en.html">English</option>
            <option value="index-zh.html">中文</option>
        </select>
    </form>
```

次に、JS側の実装をみていきます。

```script.js
'use strict';

document.getElementById('form').select.onchange = function() {
    location.href = document.getElementById('form').select.value;
}
```

今回使用する、onchangeイベントは、フオームの入力が変わったときに発動されます。
イベントが発生した後は、functionが読み込まれます。
ファンクション内の処理は以下のようになります。
location.hrefは、locationがオブジェクトになり、hrefがプロバティになります。プロバティが表示しているページのURLを表します。
右側でformのidを紐付ます。そして、slect.valueはoptionのValue属性を調べるために、親要素のValueを調べます。
これを、locationに代入します。

HTMLタグのlang属性について
これは、そのページに書かれている主な言語を指定しています。
日本語は、ja 中国語は、zh 英語は、en　になります。
それぞれのHTMLタグを変更します。そうすることで、ページ変移した際に、選択と表示の言語が異なるという現象を回避することができます。

```script.js
const lang = document.querySelector('html').lang;
```

querySelectorメソッドは、()内でCSSのセレクターを使うことができます。
今回は、htmlタグからhtmlタグを取得しています。cssでいうタイプセレクタです。要素名で対象を指定してスタイルを適用する基本的なセレクタのことです。

```script.js
if(lang === 'ja') {
    document.querySelector('option[value="index.html"]').selected = true;
} else if(lang === 'en') {
    document.querySelector('option[value="index-en.html"]').selected = true;
} else if(lang === 'zh') {
    document.querySelector('option[value="index-zh.html"]').selected = true;
}
```

if文では、oputionタグのうち、index.htmlを取得します。
ちなみに、document('option')と書いたとすると、これはHTML内のすべてのoptionに該当します。
しかし、querySlectメソッドは、最初に該当したもののみを取得します。

HTMLタグにブール属性（selected，checked属性）を追加する場合は、その属性にtrueを代入します。

ちなみにプルダウンメニューでのイベント発生時は、今と違うoption属性を選んだときのみです。

そして、このように属性によってパターンが分かれるときは、switch文を使うことができます。

```index.js
switch(lang) {
    case 'ja':
        document.querySelector('option[value="index.html"]').selected = true;
        break;
    case 'en':
        document.querySelector('option[value="index-en.html"]').selected = true;
        break;
    case 'zh':
        document.querySelector('option[value="index-zh.html"]').selected = true;
        break;
}
```

> 出典
> https://www.amazon.co.jp/%E7%A2%BA%E3%81%8B%E3%81%AA%E5%8A%9B%E3%81%8C%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FJavaScript%E3%80%8C%E8%B6%85%E3%80%8D%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E7%8B%A9%E9%87%8E-%E7%A5%90%E6%9D%B1/dp/4815601577
Terraform で AWS の ALB にサードパーティのSSL証明書を設定する

お久しぶりです @ktoshi です！
4月になり新入社員も入ってきて、初々しかった昔を思い出す今日この頃。
早いもので社会人生活10年目になりました。

普段、GCPを使うことが多いのですが、AWSでサーバを構築する機会があり、
その際、Terraform で持込の証明書を設定するときに少し困ったので備忘録的に書きたいと思います。

# 概要
EC2 でWebサーバを構築し、その前段に ALB を配置し、 SSL 証明書は ALB に設定する。
AWS Certificate Manager を利用するとマネージドの証明書も利用可能だが、
今回は別途取得した SSL 証明書をインポートして利用する。

# 環境
OS

```
$ cat /etc/redhat-release
CentOS Linux release 8.3.2011
```

Terraform

```
$ terraform version
Terraform v0.14.3
```

# Let's Enjoy!!
今回は証明書を設定する、という目的なので、EC2などの設定は省きます。
なお、SSL証明書・中間証明書・秘密鍵を事前にサーバ上に保存しておいてください。

## 証明書のインポート
証明書の内容を直接書き込むこともできますが、
今回はファイルを参照して読み込むようにします。

```certificate.tf
resource "aws_acm_certificate" "certificate" {
  certificate_body = file("example.com.crt") # SSL証明書
  certificate_chain = file("example.com.dvcacert.pem") # 中間証明書
  private_key      = file("example.com.rsa.key") # 秘密鍵
}
```
なお、中間証明書はなくても設定可能です。

## ALB への紐づけ
SSL証明書はHTTPS用のリスナーに紐づけます。
※ 下記はALBを作成する設定の一部です。

```alb.tf
# ALB の設定
resource "aws_lb" "alb" {
  name_prefix                       = "alb-"
  security_groups            = [aws_security_group.lb-sg.id]
  subnets                    = [aws_default_subnet.default-1a.id,aws_default_subnet.default-1c.id,aws_default_subnet.default-1d.id]
  internal                   = false
  enable_deletion_protection = false
  load_balancer_type = "application"
}

# リスナーの設定
resource "aws_lb_listener" "https_listener" {
  load_balancer_arn = aws_lb.alb.arn
  port              = "443"
  protocol          = "HTTPS"
  ssl_policy        = "ELBSecurityPolicy-2016-08"

  # 先ほどインポートしたSSL証明書を指定
  certificate_arn   = aws_acm_certificate.certificate.arn

  default_action {
    type             = "forward"
    target_group_arn = aws_lb_target_group.target_group.arn
  }
}
```

# まとめ
AWS ではフルマネージドのSSL証明書が利用でき、
運用を楽にすることができますが、サイトによってはサードパーティーから発行されるより高レベルな証明書が必要になる場合があります。
その場合は AWS Certificate Manager で利用できるようにインポートする必要がありますので、
その際にこの記事をご参考いただければと思います。

それではみなさんも素敵な証明書ライフを…！
aws amplifyでReact動かしたい時、環境変数の設定方法

#aws amplifyでの環境変数の設定方法
Reactを動かす時、隠しておきたい情報などを`.env`に記述して動作させることが多々ある。
amplifyでは、GitHubのリポジトリを参照しビルド＝＞デプロイする流れがある。

リポジトリに`.env`を置いておく人は、あまりいない（少なくとも私は、しない）
じゃあどう設定するのか？

## 設定方法
### 環境変数
`環境変数`というタブがあるので案内に従い、変数管理まで進む

```
いつも使ってる.env
例
REACT_APP_API_ENDPOINT = "HOGEHOGE"
```
![スクリーンショット 2021-04-21 2.49.37.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549680/a9828d9c-c977-b92c-b528-6b5d187c9240.jpeg)

上の画像のように記入していく。

```
ダメ　"HOGEHOGE"
まる　HOGEHOGE
```
`”`などで囲むと思い通りに行かなかった。

### ビルドの設定
下記の通りに記述してください。

```yaml
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run build
        - echo "REACT_APP_API_REGION=$REACT_APP_API_REGION" >> .env
```

これで、設定は終了です。
私は、このやり方でうまくいきました。

もしうまく行かない時は、（buildに失敗する時）ビルド設定に下にある部分で
`Amplify CLI   latest`これを設定するのは、どうでしょうか？
nodeなどのバージョンの違いなどで失敗する時があるそうです。

## あとがき
環境変数もそうですが、一番不明なのは、buildですね。
テンプレートだとうまくいくんですが、自分で作っていくとなぜか、通らなくなりました。

ビルドされるディレクトリの指定をすれば、うまくいきました。

しかし、URL先を見ると真っ白です。
ビルド時に出力される文を見てるとmoduleないよって書いてあったんですよ。
手元で問題なく動作しているのでまさか、パッケージが不足しているなんて思いもしませんでした。
Alfred Github Reposを入れてみたけど、ghの検索結果が表示されないバグへの対処

## 遭遇した現象

[github-repos](http://www.packal.org/workflow/github-repos) というAlfredのworkflowを入れてみたものの、
`gh 検索したいrepo` などと入れてみてもうんともすんとも結果が返ってこない

## 環境

- macOS 10.14.6
- Alfred 4
- Ruby(System) 2.3系
- 日頃使っているシェル: zsh
- 日頃使っているrubyのバージョン管理: rbenv

## 原因

github-reposが必要としているrubyのバージョンでスクリプトが実行されていなかった。
スクリプトの実行は[シバン付きで実行されるので](https://github.com/edgarjs/alfred-github-repos/blob/a2e29508032da609ec90d3eebc1541a74fe7adc8/apps/cli#L1)
実行時のシェルの状況を調査した。

![Screen Shot 2021-04-21 at 2.28.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148589/55951acf-4e83-cc29-8ebb-9fc5b9e035c7.png)

このようにimportしたての状態だと `/bin/bash` で実行される。

筆者はbash環境にrbenvを通していなかったので、systemのruby(2.3)が実行されてしまった。

このworkflowは2.5系以上が必須のようなので、`rbenv global` を 2.5系以上にした状態で、
実行されるシェルスクリプトの環境下でrbenvを有効化すればよい

## 対処(筆者の場合)

bashのことはよくわからないので、github-reposのworkflowファイルを手でいじって、
それぞれのコマンドのlanguageの部分を `/bin/bash` から `/bin/zsh` に変えて回った。

ただ、`~/.zshrc` に `eval "$(rbenv init -)"` してあるため、
直接zshを実行されるとこれが評価されない。

そのため、
`/etc/zshenv` に以下を記述することで、zshを直接実行された時でもrbenvが有効になるようにした。

```zsh
eval "$(/usr/local/bin/rbenv init -)"
```
Salesforce ユーザの基本 ⇒ Salesforce の使用開始

１．商談ワークスペースを使用して何ができますか?
２．スイッチャを使用して何ができますか?
３．標準ログインプロセスで使用される Salesforce へのログイン URL はどれですか?
４．ホームページに主要な機能として含まれるのはどれですか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/f814a1e2-9375-4584-60b4-98d6d74a5d68.png)
AWS Cloud9(amazon linux2)でPostgreSQL11をインストールする

#概要
私は現在AWSとRuby on Railsを70時間くらい学習中です。
勉強のために『現場で使える Ruby on Rails 5速習実践ガイド』を購入しました、こちらの書籍にはWSLなどで環境構築する方法が記載されていましたが、私はAWS Educateを利用することができ、せっかくなのでcloud9でやってみたところ...

```
$ sudo yum install postgresql
```
で簡単に解決すると思ったらバージョン(9.?.?)がインストールされてしまい。せっかくなのでバージョン10以上でやりたいと思い、調べました。
必要のないコマンドがあるかも知れませんが、一応この方法で動きました。まだ試していませんがEC2もこの方法でインストールできるかもしれません。

#環境
AWS Cloud9
Environment type --- EC2 instance for environment
Instance type --- t2.micro
Platform --- Amazon Linux 2

#ターミナルで以下を入力
```
$ amazon-linux-extras
$ sudo amazon-linux-extras install postgresql11
$ sudo yum install postgresql-server
$ sudo yum install postgresql-devel
```
amazon-linux-extrasでインストールできる一覧を見ることができます。
今回はamazon-linux-extrasで用意されているpostgresql11をインストールします。
amazon-linux-extrasでインストール後serverやdevelなどのパッケージはyumでインストールできます。
これでインストール完了です。

#rootユーザーでデータベースを初期化してからスタートする。
```
$ sudo su -
# postgresql-setup initdb
# systemctl start postgresql.service
# exit
```
これでpostgresqlがstartできるようになりました。
ですがロールがSUPERUSERでないとdb:createがうまくいきません。
ですのでbashでec2-userをSUPERUSERに変更します。

#rootユーザーでbash4.2を使いec2-userのロールを変更する
```
$ sudo su -
$ sudo su postgres
$ psql
$ ALTER USER "ec2-user" WITH SUPERUSER;
$ \q
$ exit
$ exit
```
#以後の作業について

```
$ sudo service postgresql start
```
使用時には上記で都度サービスをスタートさせる必要があります。
喫煙者のストレスを解消するwebアプリを作った。

##はじめに
###ちょっと酷くない？
喫煙するなんて非合理的だと認知はしているが、理解しようと努めていたある日、
受動喫煙対策法という素晴らしい法律が可決されたことで、喫煙可能スペースを探すのが大変面倒になってしまった。
友人とご飯に行くとき、文句を言いながら探し回っていた訳です。
そんな未だに理解しないニコチン中毒者が、文句を垂れないために作ったwebアプリです。

##アプリ概要

https://yaninavi.com/

__喫煙できてwifiのあるカフェの快適さや、
喫煙しながら飲むお酒の美味しさを知っている方へ__
_ログイン不要でお使いいただけます。_
ジャンル、現在地、地名、キーワードなどからお店を探すことができます。
詳細ボタンを押していただくと、googleMapとhotpepperへのリンクをご用意しております。

＊[ホットペッパーapi](<https://webservice.recruit.co.jp/doc/hotpepper/reference.html>)を使用しております。
###プレビュー


![yaniGif (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510294/86b282d9-e7c5-274c-07f1-9352176fb451.gif)
###前提
- ポートフォリオとして提示する
- 実際に私自身や友人の喫煙者達が使う

###使用技術
言語：javascript
フロント：react
バックエンド：node.js express
見た目：[material ui] (https://material-ui.com/)
  &emsp;&emsp;&emsp;&emsp;&emsp;[react-loadingg](https://github.com/Summer-andy/react-loading)
インフラ：フロントにはfirebase Hostingを、バックエンドにはherokuを使用

####本番環境
元々は、フロントのbuildファイルをバックエンド側へコピーし、バックエンドをherokuへデプロイしていたのですが、遅すぎる。。。
どうやらherokuさんは、ある程度の時間起動しないとアイドリング状態になるようで、このアイドリング状態からの起動が遅いようです。

しかし、expressをデプロイするとなると従量課金制のものが多く（AWSに５千円取られたことあるコワイ）、、、

そこで、バックエンド側はherokuへ、フロント側はfirebase hostingへデプロイしてみたところ、初回ページ読み込み速度は改善されました。
ただ、こういった方法で実装されている記事を見かけなかったので、正しい使い方では無いのかなぁ、と感じています。
なので今後の課題として、herokuの代わりにcloud functionsを使用する、もしくはnext.jsで作り直すか、を考え中。。。
![スクリーンショット 2021-04-20 16.46.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510294/2901dd61-7517-c9e1-44d0-501bd079b8c4.png)

##お世話になった方々
####FullStackOpen
https://fullstackopen.com/en/

SPA開発の基礎を教えていただいた師匠
React,Node.JS,Redux,GraphQL,TypeScript,ReactNative,GitHub等、
フィンランドのヘルシンキ大学が運営しているサイト

####@seira様の記事
https://qiita.com/seira/items/f063e262b1d57d7e78b4
react-hookの扱い方を教えていただいた先生

####reactSample
https://reactjsexample.com/
reactのパッケージ集

####coolors
https://coolors.co/palettes/trending
色の組み合わせをランダムで生成してくれるwebアプリ
組み合わせのランキングもあるので、配色で迷ったら一度のぞいてみてください

####ペアプログラミングのパートナー(@su3aki)
[ペアプログラミングについて](https://eh-career.com/engineerhub/entry/2019/11/07/103000#:~:text=%E3%83%9A%E3%82%A2%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%EF%BC%88%E4%BB%A5%E4%B8%8B%E3%80%81%E3%83%9A%E3%82%A2%E3%83%97%E3%83%AD%EF%BC%89,%E5%B0%8E%E5%85%A5%E3%82%92%E9%80%B2%E3%82%81%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82)
今回、上記の[FullStackOpen](https://fullstackopen.com/en/)をこのペアプログラミングという方法で学習しました。
1人では諦めていたかもしれないので、感謝です。

##最後に
まだまだ足りない知識を使ってこの記事を書いているので、ご指摘などして頂けたらとても嬉しく思います。
また、アプリの不具合やフィードバックなども、頂けたらとても嬉しく思います。

##追記(修正点)
1.位置情報取得の際のエラーハンドリング
2.喫煙情報が未確認となっていたお店の除外
###実装中
モバイル用UIの変更（ジャンルによるフィルタリングができないUIになっているため）
喫煙情報による検索結果のフィルタリング
npm publishすると404

めっちゃ凡ミスだったんですが、なんかハマっちゃったのでメモ

# 発生するエラー
```bash
npm ERR! code E404
npm ERR! 404 Not Found - PUT https://npm.pkg.github.com/@scope%2fpackage-name - The expected resource was not found.
npm ERR! 404 
npm ERR! 404  '@scope/package-name@1.0.0' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/hoge/.npm/_logs/2021-04-20T16_27_27_746Z-debug.log
```

# 実装内容
```json:package.json
{
  "name": "@scope/package-name",
  "version": "1.0.0",
  "main": "./index.js",
  "license": "MIT",
  "author": "author",
  "publishConfig": {
    "registry": "https://npm.pkg.github.com"
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/scope/package-old-name.git" <- ここが原因
  },
  "scripts": {
    ...
  },
  "devDependencies": {
    ...
  }
}
```

諸事情でリポジトリ名を修正したのち、package.json側のrepository情報の修正を忘れていた。正しいリポジトリ名に直したら治った
GoogleAppsScriptでdoGet()をdebugする

# 手順
1. doGet()を実行する関数を定義する
1. １の関数内でパラメータを定義しdoGet()の引数に渡す
1. 「実行する関数」に1の関数を選択し実行する

## コード

```get.gs
function debug(){
  const e = {
    parameter:{
      hoge: 'foo',
      fuga: "baa"
    }
  }
  doGet(e)
}

function doGet(e){
  var param = e.parameter

  console.log(param.hoge) //foo
  console.log(param.fuga) //baa
}
```

これは

```
https://script.google.com/macros/（中略）/exec?hoge=foo&fuga=bar
```
を叩いた際のアクションと同等となります。

# 参考
[GASでwebアプリの作成とパラメータの確認方法(doGet、doPost)](https://breezegroup.co.jp/201906/gas-get/)
position:relative; を使ってTポイントカードを作ってみた！

```position:relative;``` を使ってTポイントカードを作ってみました。

![スクリーンショット (43).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/b3e4368d-a197-13f7-017c-a627c74bca3d.png)



目標：```position:relative;```の基礎を理解するため
テキストエディターはVSCode.


～codeを書き始める前の準備～
・構成を考える！　何をどんな風に、どうやって作るのか？
　最初にある程度決めておくと後が楽になります。
　例　Tポイントカードを調べる
　　　```<div>```は何個必要なのか？
　　　```class```属性名はどうしようか？
　　　

・紙とペンで実際に枠を書いてみる（添付画像　準備出来次第掲載）
ここまで出来たらcodeを書いていきます♪ ※head部分は省略

```html
<div class="card">
      <div class="card1">
          <div class="card4 card2"></div>
          <div class="card4 card3"></div> 
      </div>
    </div>
```

```css
.card {
  width: 700px;
  height: 500px;
  border: 1px solid black;
  background-color: aqua;
  margin: 0 auto;

  display: flex;
  justify-content: center;
  align-items: center; 
}

.card1 {
  width: 450px;
  height: 300px;
  background-color: blue;
  border: 1px solid black;
}

.card4 {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

.card2 {
  width: 100%;
}

.card3 {
  height: 100%;
}
```
一旦ブラウザで確認　↓

![スクリーンショット (41).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/8b5f7ba1-1b68-5b19-904f-ec46c3dca9d3.png)

次に　```position:relative;```　と　```position: absolute;```　を書きます


```css
.card1 {
  width: 450px;
  height: 300px;
  background-color: blue;
  border: 1px solid black;

  position: relative; ※
}

.card3 {
  height: 100%;
  position: absolute;　※
  top: 0;　※
  left: 38%;　※
}
```

```position:relative;```　 は『親要素』に書きます
```position: absolute;```　は『子要素』に書きます
そして、```position: absolute;```　と一緒に位置を指定してあげるのが、```top bottom right left ``` !!!

ちなみに　```position: absolute;```　と　```top bottom right left ``` 　はセットで覚えておくと良いです。


Tポイントカード完成しました！！
```background-color: aqua;```　を消してみました！


![スクリーンショット (43).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/a6b95332-393c-f4e7-53c8-155ee99cfbda.png)


##まとめ
今回は　イマイチよくわかってなかった```position:relative;```を理解するため
Tポイントカードを作ってみました！！
理解する上で、
```position:relative;```　 は『親要素』
```position: absolute;```　は『子要素』　をきちんと把握することが大切だなと改めて実感いたしました！

拒否反応が起こりやすいタグですが、ひとつひとつ丁寧に書き進めれば怖くないcodeだなと思いました。
引き続き応用していきます

今回以上です
ありがとうございました
Salesforce ユーザの基本 ⇒ Salesforce へようこそ

１．Salesforce でのコラボレーションはどのような場合に役立ちますか?
２．CRM とは何の略ですか?
３．リードの取引を開始すると作成される 3 つのレコードはどれですか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/f63dc14e-41cc-0dfb-624b-220543e4bbc6.png)
PyTorch | Memoryについて

###CUDA　Memoryを測る
~~~
print(f'Before forward pass - Cuda memory allocated: {torch.cuda.memory_allocated()/1e9}')
~~~
###Out of Memory
https://pytorch.org/docs/stable/notes/faq.html
####Happens when loss.backward() 
1. reduce batch size, all the way down to 1
2. remove everything to CPU leaving only the network on the GPU
3. remove validation code, and only executing the training code
4. reduce the size of the network (I reduced it significantly: details below)
5. I tried scaling the magnitude of the loss that is backpropagating as well to a much smaller value
6. add torch.cuda.empty_cache() after each step of trainning (√ This solved my problem)
7. add with torch.no_grad() after each step of validation
8. Do not accumulate history 

```
total_loss = 0
for i in range(10000):
    optimizer.zero_grad()
    output = model(input)
    loss = criterion(output)
    loss.backward()
    optimizer.step()
    total_loss += loss #Wrong
    total_loss += float(loss) #Correct
```
###RAM Memory keeps increasing
データセットが大きすぎかもしれません。
```Dataloader(..., num_works=0, ...)　#reduce thread　
```
使ってる開発言語やフレームワークの理解を深める　〜React編〜

使っているサービスをエレベーターピッチにしてみることで説明できそうなのでやってみた

[ ニーズを満たしたりや課題を解決したり ]　したい
[ 対象顧客向け ] 向けの
[ プロダクト名 ] は
[ プロダクトのカテゴリー ] です
これは [ 重要な利点、大家にみある説得力のある理由 ] ができ
[ 代替手段 ] とは違って
[ 差別化の決定的な特徴 ] が備わっている

エレベータピッチについては下記を参照のこと

https://www.amazon.co.jp/exec/obidos/ASIN/4274068560/kab0e-22/

## Reactとは
FaceBookが提供するNode環境で実行可能なライブラリー群のこと

###React エレベータピッチ
[ コンポーネントベースで開発 ]　したい
[ Webエンジニア ] 向けの
[ React ] は
[ WEB開発フレームワーク ] です
これは [ フロントエンドの開発 ] ができ
[ Vue.js ] とは違って
[ １つの開発言語でWeb/SPアプリを作成 ] が備わっている

###特徴
特徴的な機能として、以下の三つがあげられる

- 各コンポーネントが状態を持ち、変更があったものだけを更新、再描画する：`宣言的な View `
- 部品（コンポーネント）を組み合わせてUIを作る：`コンポーネントベース`
- 開発途中からでも組み込み可能な導入コストの低さと再利用可能な知識：`一度学習すれば、どこでも使える`

メリデメは以下の通りである

Reactのメリット

- コンポーネント単位でコーディングするため
    - 再利用性が高い
    - 保守性が高い
    - 無理なくAtomic Designを実装できる
- ReactNativeがその他より容易に習得できスマホアプリが実装できる
- 中規模以上の開発に向いている（開発速度と重厚性のバランスが良い）


Reactのデメリット

- アジアではVueが人気
　（日本語のコミュニティが盛んであるかでドキュメントの総量に差が出てくる）
- HTMLに慣れている人はVue側の方が入りやすい
　Vueは1つのファイルにHTML/JS/CSSを1つのファイルに記載し構成することで関心毎を分離する仕組みをとっている
Vue.jsを学ぶ前の前提知識

# Vue.jsとは

Vue.jsとはJavaScriptのフレームワークの１つです。

多くのwebサイトはHTMLとCSS、そしてJavaScriptによって作成されてきました。
しかし以前は決まった書き方等がなく、徐々にフレームワークと呼ばれるものが注目され、
Angular、React、そしてVue.jsが発展をしてきました。

またこれらのフレームワークを学習する上で重要なものにコンポーネント指向、DOMと仮想DOMという言葉があります。

### コンポーネント指向

コンポーネント指向とは、機能を部品に見立て、必要に応じて組み合わせて使うという考え方です。
アプリケーションには、似たような機能や同じような機能が使われる事が多々あります。
この様々な部品(機能)をコンポーネントと呼ばれる単位に区切る事で、再利用性が高まります。


### DOMと仮想DOM

DOMとはDocument Object Modelの略で、一言で表すとHTMLを解析し、データを作成する仕組みの事です。

HTMLは階層構造になっており、DOMによって解析が行われると、DOMツリー、ドキュメントツリーと呼ばれるデータになります。

そしてDOMツリーからHTMLの要素名、id,classといった変更を加えたい情報を取得して、CSSを変更したりする事ができます。

これをまとめると、

* HTMLを解析して、自由に操作するための仕組み
* DOMツリーという階層構造をとり、それを元にどの部分に変更を加えるかを決める仕組み


そして仮想DOMとは、DOMをコピーしたJavaScriptのオブジェクトで、Vue.jsなどのフレームワークで用いられます。

なぜ仮想DOMが必要になるかというと理由は大きく２つあります。

１つは、DOMを操作して変更を加えると、その変更があった都度、HTML(DOMツリー)の再構築が発生し、レンダリングにかかるコストが非常に大きくなってしまいます。

仮想DOMを使用した処理では、まず仮想DOMに対して操作をします。
そして元々DOMと操作が加えられた仮想DOMの差分検知を行い、必要最低限の箇所だけを元々のDOMに反映させる事で効率的な実装が可能になります。


# まとめ

簡単に基本的な知識をまとめました。
実装方法なども学習して、記事にしたいと思います。
ポートフォリオ制作のためのツール

今回は、ポートフォリオ作成のためのツールを教えていただいたので、
ここにメモに残しておく。
モックアップ作成のために以下の二点を薦められた。

https://prottapp.com/ja/

https://moqups.com/

機能はなんとく考えていたけど、
肝心のビューについては構想がなかなか決まらない。
そんな時にはこの様なツールを使って開発をするらしい。

まだ、使ったことはないのでいずれレビューを
書きたいと思う。
【Python Tips】文中の数字を0にする

今回は文中の数字を0に変える処理を行います。

##利用シーン
例えばネットニュースの記事を政治・経済・エンタメ・スポーツなどに分類する場合などに使われます。

記事のカテゴリを分類する際に数字の情報はあまり重要ではないため外して良いと考えられるからです。

##環境
Google Colaboratory

##コード

### 1.モジュールreをインポート

正規表現操作を行うためのモジュールであるreをインポートする

```
import re
```

### 2.関数を定義

normalize_numberという関数を定義します。
2行目ではモジュールreのsub()関数を活用します。

re.sub()では第一引数に正規表現パターン、第二引数に置換先文字列、第三引数に処理対象の文字列を指定します。

今回の場合
-　第一引数：1つ以上の連続した変数を
-　第二引数：0に変える
-　第三引数：textで

```
def normalize_number(text):
  replaced_text = re.sub(r'\d+','0',text)
  return replaced_text
```

### 3.置換したい文字列を設定
```
text ="1万8100・24ドル"
normalize_number(text)
```

コードは[Google Cobab](https://colab.research.google.com/drive/1yKaFB3uonrpNdF54_VzjSck9b2lHySXk?usp=sharing)に書きましたので、ご参照いただけましたら幸いです。
初投稿 aka freelance  way

###記念すべき初投稿?!!

これからポートフォリオを作成し始めるため、
その道筋をここに残しておく。

尚、マークダウンはまだ慣れていないので、
書き方は習うより慣れろで,日々向上するようにしていく。

この記事を書いた後、
何年または、何ヶ月後にフリーランスとして活動できているかは不明では
あるが、期間はしっかりと決めて頑張りたい。
目標としては、一年以内に結果を出す！
【AWS】VPC トラフィックミラーリング（Traffic Mirroring）で通信をミラーリングしてみた

どうも、おはこんばんわ。

今更ながらAWSで VPC トラフィックミラーリング（Traffic Mirroring）を実装したかったので、やってみた。
（今回はSplunkのお話しではないです）

###公式ドキュメント
・What is Traffic Mirroring?[(link)](https://docs.aws.amazon.com/vpc/latest/mirroring/what-is-traffic-mirroring.html)

###AWSの構成
+++++++++++++++++++++++
+　N1 < === > N2 === > N3 　+
+++++++++++++++++++++++
N1 = Amazon Linux 1
N2 = Amazon Linux 2
N3 = Amazon Linux 3

###やりたいこと
N1からN2へSSHを発信し、そのパケットをN3へミラーリングする。
ミラーリング後はWireshark等の解析ツールでパケットの中身を確認する。

###ノードのネットワーク情報
|ノード|IPアドレス|インターフェイス|
|:---|:---|:---|
|N1|192.168.1.10/24|eni-01|
|N2|192.168.1.20/24|eni-02|
|N3|192.168.1.30/24|eni-03|
*IPアドレスとインターフェイスはフェイク

###使用ポート
|通信名|送信元|宛先|UDP/TCP|ポート番号|備考|
|:---|:---|:---|:---|:---|:---|
|ssh|N1|N2|TCP|22|テスト通信|
|vxlan|N2|N3|UDP|4789|仕様上必須の通信|
*他の通信でもモニタリング可能です。

###トラフィックミラーリングの場所はここ！
①AWS Web
②VPC
③トラフィックのミラーリング（VPCダッシュボード内）

##ここから設定していくよ！

##ターゲットの設定
ミラーリングしたパケットの宛先と思ってください。

①VPCダッシュボード内の「ターゲットをミラーリングする」をクリック
②「トラフィックミラーターゲットの作成」をクリック
③以下の様に設定
　[ターゲット設定]
　・名前タグ - オプション
　　→　テストターゲット（お好み）
　・説明 - オプション
　　→　お好み
　[ターゲットを選択]
　・ターゲットタイプ
　　→　ネットワークインターフェイス（今回はネットワークインターフェイスを指定）
　・ターゲット
　　→　eni-03（N3のインターフェイスを指定）
　[タグ]
　　→　今回は無し

##フィルターの設定
ミラーリングしたいパケットの指定と思ってください。
①VPCダッシュボード内の「フィルターをミラーリングする」をクリック
②「トラフィックミラーフィルターの作成」をクリック
③以下の様に設定
　[フィルターの設定]
　・名前タグ - オプション
　　→　テストフィルター（お好み）
　・説明 - オプション
　　→　お好み
　・ネットワークサービス - オプション
　　→　「amazon-dns」No Check
　[インバウンドルール - オプション
]
　・ルールを追加（以下参照）

|番号|ルールアクション|プロトコル|送信元ポート範囲 - オプション|送信先ポート範囲 - オプション|送信元 CIDR ブロック|送信先 CIDR ブロック|説明|
|:---|:---|:---|:---|:---|:---|:---|:---|
|100|accept|すべてのプロトコル|空白|空白|0.0.0.0/0|0.0.0.0/|All_Packet_Mirroring|
*個別でパケットを指定する場合は一般的なACLと同様で「番号」による処理順序に注意

　[アウトバウンドルール - オプション
]
　・ルールを追加
　　→　今回は無し
　[タグ]
　　→　今回は無し

##セッションの設定
①VPCダッシュボード内の「セッションをミラーリングする」をクリック
②「トラフィックミラーセッションの作成」をクリック
③以下の様に設定
　[セッションの設定]
　・名前タグ - オプション
　　→　お好み
　・説明 - オプション
　　→　お好み
　・ミラーソース
　　→　eni-02（N2のインターフェイスを指定）
　・ミラーターゲット
　　→　テストターゲット（さっき作成したターゲットを指定）
　[追加設定]
　・セッション数
　　→　1（今回はデフォルト）
　・VNI - オプション
　　→　今回は無し
　・パケット長 - オプション
　　→　今回は無し
　・フィルタ
　　→　テストフィルター（さっき作成したフィルターを指定）
　[タグ]
　　→　今回は無し

##セキュリティグループの設定
テスト用パケットのSSHとVXLANをインバウンドで許可してください。
本機能ではミラーリングするパケットをカプセル化する為、必ずVXLAN（UDP:4789）を許可してください。
今回は割愛。
・公式ドキュメント : Traffic Mirroring packet format[(link)](https://docs.aws.amazon.com/vpc/latest/mirroring/traffic-mirroring-packet-formats.html)
・VXLAN : RFC 7348[(link)](https://tools.ietf.org/html/rfc7348)

あとはN3でTcpdumpや直接Wireshark等で解析を行うだけ。
超簡単！！

###その他
AWS上のトラフィックをミラーリングできるのはうれしい！
けどカプセル化されるのは正直微妙だと思いました。
又、制約もある為、今後に期待！（公式ドキュメント要確認）
スプレッドシートでよく使う条件付き書式

最近はスプレッドシートかスライドを作る人になっています。こんばんは。とは言ってもなぜか毎回 `条件付き書式` を忘れるので、随時更新する形で生きた証をここに残します。

## ステータスが完了の行の書式を変えたい

一番使う。実はボタン一つでそろそろできる機能があるんじゃないか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146958/2a516ce9-5827-9711-5b0f-ccd6af9092ed.png)

| 項目 | 設定値 |
|---|---|
| 範囲 | A2:C |
| カスタム数式 | =$B2="完了" |
| 書式 | 上の図では背景色を変えた |

## あるセルで前行と同じ値が続くときに書式を変えたい

結構使うし必ず忘れる。これをやりたい理由は一つのシートでデータとフォーマットを同時に表現しなきゃならないことがあるから。データは全部入れときたいし、見やすさのためにセル結合はしたくない、みたいなときに文字を薄くして見やすくしたりする。行を入れ替えても見やすさをそれなりに保てる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146958/ef66049e-5443-9388-3041-6ce5d7c39beb.png)


| 項目 | 設定値 |
|---|---|
| 範囲 | A2:B |
| カスタム数式 | =A2=OFFSET(A2,-1, 0) | 
| 書式 | 上の図では文字色を見にくした |

## 日付から日曜日を判断して書式を変えたい

それなりに使う。あと土曜日を青くする。 `WEEKDAY` のデフォルトは1=日曜日から始まり、7=土曜日。空白を渡しても7が返ってくるので気を使う場合は気をつける。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146958/5513cbd6-75d0-2848-c373-c655fc8338da.png)

| 項目 | 設定値 |
|---|---|
| 範囲 | A:B |
| カスタム数式 | =WEEKDAY($A1)=1 | 
| 書式 | 上の図では背景を赤くした |

## 日付から祝日を判断して書式を変えたい

そこそこ使う。これもそろそろ便利な関数とかあるんじゃないかと疑ってる。準備として `名前付き範囲` を作っておかなくてはならない。下記のように別シートに祝日のリストを作っておいて、この範囲に `公休` と名前をつけた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146958/f17a2678-0331-a458-f17e-7485dc298cad.png)

で、条件付き書式は下記のように `INDIRECT` で `公休` の範囲に一致するものがあるかを `COUNTIF` で取得して書式を変えている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146958/9d998948-f5d8-f2f9-ebbb-c36570ea851f.png)

| 項目 | 設定値 |
|---|---|
| 範囲 | A:B |
| カスタム数式 | =COUNTIF(INDIRECT("公休"), $A1) | 
| 書式 | 上の図では背景を赤くした |

## まとめ

> スプレッドシートは便利だ。何にでも使える。
> 前半には同意する。
つい引っかかってしまう（？）カタカナの正規表現

こんにちはkoheiです。

railsのポートフォリオ作成中、仮のユーザーを入力している時に自らかけたバリデーションにひっかかってしまっていた為、備忘録として残します。
今回は
## つい引っかかってしまう、「カタカナの正規表現」についてです。

企業名を入力するフォームを作成し、読み仮名をカタカナで入力してもらうつもりで以下の用にバリデーションをかけました

```ruby
/\A[ァ-ヴ]+\z/
```

氏名の読み仮名を入力するときにかけていた正規表現をそのまま流用したので問題ないはずです。
対象となる文字列は以下の通り

```
ァ, ア, ィ, イ, ゥ, ウ, ェ, エ, ォ, オ, カ, ガ, キ, ギ, ク, グ, ケ, ゲ, コ, ゴ, サ, ザ, シ, ジ, ス, ズ, セ, ゼ, ソ, ゾ, タ, ダ, チ, ヂ, ッ, ツ, ヅ, テ, デ, ト, ド, ナ, ニ, ヌ, ネ, ノ, ハ, バ, パ, ヒ, ビ, ピ, フ, ブ, プ, ヘ, ベ, ペ, ホ, ボ, ポ, マ, ミ, ム, メ, モ, ャ, ヤ, ュ, ユ, ョ, ヨ, ラ, リ, ル, レ, ロ, ヮ, ワ, ヰ, ヱ, ヲ, ン, ヴ
```
「カタカナの正規表現」として記事を掲載されている方もいたので問題ないはず！

しかし、カタカナ名のパターンを考慮するとこうすべきでした

```ruby
/\A[ァ-ヴー]+\z/
```

「ー」が入っていなかったんですね。
〜コーポレーションなどの会社名の読み仮名を入力する際に、１つ目の正規表現では「ー」が含まれていませんでした。

まさか引っ掛かると思っていなかったため、他の機能のテストも兼ねていくつか仮の会社名を入力していた時に発覚しました。

同じように引っかかってしまった方の目にとまれば幸いです。

なお、１文字目が「ー」も可となってしまうと思うのですが、今回読み仮名と言うことで見逃してください。。。笑
翌月末の日付をkintoneの標準機能で計算

#翌月末の日付とは
##例
元の日付
7月6日
↓
翌月末の日付
8月31日

##参考
[1か月後の日付をkintoneの標準機能で計算](https://qiita.com/t0ru/items/1c4273b122c070edbfc6 "1か月後の日付をkintoneの標準機能で計算")

#考え方
##1.日付に62日をたして、62日(≒2か月)後の日付を計算する
kintoneでは日時や日付を秒単位で扱うため、計算式でも秒単位で指定します。
62日後の日付 : 元の日付+2*31*24*60*60
例 : 元の日付が7月6日なら、62日をたして、9月6日となります。

##2.62日後が3か月後になる場合は、62日後の日付から3日ひいて、2か月後にする
1月が31日間、2月が28日間、3月が31日間なので、最小の2か月後は59日です。
62日後が3か月後になる場合でも、3日ひけば、2か月後になります。
翌々月の日付 : IF(62日後の日<元の日 , 62日後の日付-3*24*60*60 , 62日後の日付)
例 : 元の日付が7月31日なら、62日後の日付が10月1日となります。3日ひいて、9月28日とします。

##3.翌々月の日付から、翌々月の「日」をひいて、翌月末の日付を計算する
日は、DATE_FORMAT(日付,"d","system")で求められます。
翌月末日 : 翌々月の日付 - 翌々月の日*24*60*60
例 : 翌々月の日付が9月6日なら、6日をひいて、8月31日となります。

#kintoneのアプリ
※フィールドコードはフィールド名と同じにします。
##完成イメージ
![NextMonth.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152073/44ed12c9-94c2-87b8-d8fb-27776f2a10a8.gif)

##元の日付
・元の日付 [日付フィールド]

##計算用
・元の日 [計算フィールド]
　計算式 : `DATE_FORMAT(元の日付,"d","system")`
　表示形式 : 数値

・翌々月_62日後の日付 [計算フィールド]
　計算式 : `元の日付+2*31*24*60*60`
　表示形式 : 日付

・翌々月_62日後の日 [計算フィールド]
　計算式 : `DATE_FORMAT(翌々月_62日後の日付,"d","system")`
　表示形式 : 数値

・翌々月の日付 [計算フィールド]
　計算式 : `IF(翌々月_62日後の日<元の日 , 翌々月_62日後の日付-3*24*60*60 , 翌々月_62日後の日付)`
　表示形式 : 日付

・翌々月の日 [計算フィールド]
　計算式 : `DATE_FORMAT(翌々月の日付,"d","system")`
　表示形式 : 数値

##翌月末の日付
・翌月末日 [計算フィールド]
　計算式 : `翌々月の日付 - 翌々月の日*24*60*60`
　表示形式 : 日付
#deviseを用いたuser情報の編集

#deviseを用いたuser情報の編集
現在作成中のwebサイトはdeviseを用いてuserの登録を行うような仕様になっております。
本日は、登録したuser情報の編集ができるように実装を進めていきたいと思います。

まず、registrationのnewのビューファイルをコピーしeditファイルを作ります。
ボタンをupdateに変えて更新してみると

[![Image from Gyazo](https://i.gyazo.com/fbae8b9d5eda088bb9f77c96e34a44d2.png)](https://gyazo.com/fbae8b9d5eda088bb9f77c96e34a44d2)

現在のパスワードを要求されます。

そこで入力フォームを作ってみましょう

[![Image from Gyazo](https://i.gyazo.com/c1a2559acddf95ebc91078f0e95336a2.png)](https://gyazo.com/c1a2559acddf95ebc91078f0e95336a2)
現在のパスーワードを入力し更新すると

....

更新されません..

そういえばコントローラにアクションを定義しておりませんでした。
そこで、コントローラーを編集します。

[![Image from Gyazo](https://i.gyazo.com/1ad24231109cd46a0dbced402190c3dd.png)](https://gyazo.com/1ad24231109cd46a0dbced402190c3dd)

deviseコントローラーで特定のカラム情報の保存を許可する場合
devise_parameter_sanitizerという表記を行います。
paramsのdeviseバージョンですね！

現在、新規登録のsign_upは定義されているので、編集を追加します。
編集なのでアクション名をeditとしたいところですが、deviseなのでaccount_updateです。
これで、sign_upのときと同じキーを記載します。
そこで実行すると...
[![Image from Gyazo](https://i.gyazo.com/ff79770747b9e4f38698acdbffdf6806.png)](https://gyazo.com/ff79770747b9e4f38698acdbffdf6806)

無事ユーザー情報を更新できました！

ちなみに、現在のパスワードを入力せず更新をかける方法もあるようですが、今回は現在のパスワードありで実施します。

なんとなくですが、現在のパスワード入力がある方が安心できる気がします。
Railsのmemberとcollectionについて

ルーティングにはindex,new,create,destroy,edit,update,showの７つのアクションがありますが、他にもcollectionとmemberというのがあります。
collectionはルーティングに:idが付かず、memberは:idがつくという違いがあります。

collectionの場合

```ruby
Rails.application.routes.draw do
  resources :tweets do
    collection do
      get 'search'
    end
  end
end
```

```
Prefix           Verb    URI                                 Pattern
search_tweets    GET    /tweets/search(.:format)              tweets#search
```
idがついていません。
menberの場合

```ruby
Rails.application.routes.draw do
  resources :tweets do
    member do
      get 'search'
    end
  end
end
```
```
Prefix           Verb    URI                                 Pattern
search_tweet      GET    /tweets/:id/search(.:format)       tweets#search
```
idがついています。

データ全体にアクションを起こす時はcollection、特定のデータにアクションを起こす時はmemberという風につか分けるのかなと。
検索機能を実装したい時はデータ全体へのアクションが必要なのでmemberを使うということになります。
IPとサブネットマスクからネットワークIDとブロードキャストアドレスを算出

# 概要
タイトルまんま
罵らないで！VB簡単で大好き！


## コード

```vb

Module Module1

	Sub Main()
		Dim ip As String = "192.180.14.200"
		Dim mask As String = "255.192.0.0"

		Dim ip_sp(3) As String
		ip_sp = ip.Split(".")
		Dim mask_sp(3) As String
		mask_sp = mask.Split(".")



		Dim ip_byte(3) As Byte
		Dim mask_byte(3) As Byte

		For i = 0 To 3
			ip_byte(i) = Convert.ToByte(ip_sp(i))
			mask_byte(i) = Convert.ToByte(mask_sp(i))
		Next



		Dim start_byte(3) As Byte

		For i = 0 To 3
			start_byte(i) = ip_byte(i) And mask_byte(i)
		Next



		Dim end_byte(3) As Byte

		For i = 0 To 3
			end_byte(i) = Not mask_byte(i) Xor start_byte(i)
		Next


		For i = 0 To 3
			Console.Write(start_byte(i).ToString)
			Console.Write(".")
		Next

		Console.WriteLine()

		For i = 0 To 3
			Console.Write(end_byte(i).ToString)
			Console.Write(".")
		Next

		Console.WriteLine()

	End Sub

End Module

```

```console

192.128.0.0.
192.191.255.255.
続行するには何かキーを押してください . . .

```
Rails  DBに保存されていないデータの並び替え

##はじめに
クチコミアプリを作っています。
その中の評価機能を利用して、並べ替えの機能を作った際に詰まったこと学んだことのメモです。

**table関係**
`(親)shops　ー　(子)reviews`
店に対してクチコミをしますのでアソシエーションを組んでいます。

| reviews | 
| ------- | 
| id      | 
| shop_id | 
| content | 
| score   | 

scoreカラムは星5段階評価を保存しておきます。
各shopはクチコミ評価をいくつも持っていて、その平均点をmodelに書いたメソッドによってviewで表示させることができます。

```
class Shop < ApplicationRecord
# 省略
# 星評価の平均点を求めるメソッド
  def review_score_average
    if reviews
      reviews.average(:score).to_f.round(1)
    else
      0.0
    end
  end
end
```

ここで、
DBカラムに入ったデータの並べ替えは('asc', 'desc')のメソッドを使用すれば簡単にできますが
メソッドに入った中身をどの様に並べ替えればいいのか？

##  attr_accessorを使う

**view**

```
<%= link_to "星評価の高い店順", shops_path(sort_top_review: "true") %>
```

**controller**

```
if params[:sort_top_review]
  @shops = Shop.all.each do |shop|
    # averageはモデルで定義されている
    shop.average = shop.review_score_average
  end
  @shops = @shops.sort_by { |shop| shop.average }.reverse
  @shops = Kaminari.paginate_array(@shops).page(params[:page]).per(5)
end
```

**model**

```
  attr_accessor :average

```

`review_count`は`shop`の属性
オブジェクトの抱えるデータのことを「属性（Attribute）」と呼ぶことがある。
##  attr_accessorとは
Rubyのメソッド
[リファレンス](https://docs.ruby-lang.org/ja/latest/method/Module/i/attr_accessor.html)

##終わりに

Railsのビギナーなので間違っている点やもっといい書き方などありましたらご指摘していただければ嬉しいです。
Flexboxを使ってフィンランド国旗を作りました！

Flexboxを使って国旗を作る
今回はフィンランド国旗

![スクリーンショット (40).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/617b99c1-dcf3-dfcc-a9d2-831d3f39fa61.png)



目標：Flexboxの基礎を理解するため
テキストエディターはVSCode.
↓下記のFlexboxチートシートを参考
[Css Flexboxのチートシート] (https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet)

～codeを書き始める前の準備～
・構成を考える！　何をどんな風に、どうやって作るのか？
　最初にある程度決めておくと後が楽になります。
　例　フィンランドの国旗を調べる
　　　```<div>```は何個必要なのか？
　　　```class```属性名はどうしようか？
　　　

・紙とペンで実際に枠を書いてみる（添付画像　準備出来次第掲載）
ここまで出来たらcodeを書いていきます♪ ※head部分は省略

```html
<div class="finland">
      <div class="fin">
          <div class="finland1 finland4">しかく４</div>
          <div class="finland1 finland2">しかく２</div> 
          <div class="finland1 finland3">しかく３</div>
      </div>
    </div>
```
```css
.finland {
  width: 700px;
  height: 500px;
  border: 1px solid black;
  margin: 500px auto;
}

.fin {
  width: 450px;
  height: 300px;
  background-color: white;
  border: 1px solid black;
}

.finland1 {
  width: 50px;
  height: 50px;
  background-color: blue;
}

.finland2 {
  height: 100%;
}

```
上記の状態を一旦ブラウザで確認　↓

![スクリーンショット (35).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/3b0857fa-32ca-d5cf-30cc-e125877003e2.png)

```css
.finland {
  width: 700px;
  height: 500px;
  border: 1px solid black;
  /* background-color: aqua; */
  margin: 500px auto;

  display: flex; ※
  justify-content: center;　※
  align-items: center;　※
}
```
大枠のクラスに```display: flex;``` を付けてみます

![スクリーンショット (36).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/8c73d65b-8945-97c6-adf5-cd47a8f99eb6.png)


```display: flex;``` で大枠をセンターにしました
次に、青い部分を```display: flex;``` にします

```css
.fin {
  width: 450px;
  height: 300px;
  background-color: white;
  border: 1px solid black;

  display: flex; ※
  align-items: center;　※
}
```

![スクリーンショット (37).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/fe015a06-aa0c-5f52-1bce-faea9c52d42f.png)

```css
.finland4 {
  flex-grow: 1.5; ※
}
.finland2 {
  height: 100%;
  flex-grow: .5;　※
}
.finland3 {
  flex-grow: 8;　※
}
```

![スクリーンショット (38).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/07c9818d-f679-2f21-2449-7122db180ed2.png)

フィンランド国旗完成です！
青いと解りづらいので、青い部分の色を変えてみます。

```css
.finland1 {
  width: 50px;
  height: 50px;
  /* background-color: blue; */ ※
}

.finland4 {
  background-color: pink;　※
  flex-grow: 1.5;
}
.finland2 {
  background-color: blue; ※
  height: 100%;
  flex-grow: .5;
}
.finland3 {
  background-color: yellowgreen;　※
  flex-grow: 8;
}
```

![スクリーンショット (39).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/391c32b7-f668-d776-bb23-c672e4a66a28.png)

色を変えてフィンランド国旗になりました。

## まとめ
```display: flex```　を上手に挙動させるためには、
『親要素』と『子要素』をきちんと把握することが大切だと感じてます。
また、『親要素』にはFlexコンテナー。　
『子要素』にはFlexアイテム。

理解することが難しいですが、一個、一個理解していけば必ず完成します。

今回は以上です
ありがとうございます！！
俺得キーバインディング

##概要
主題通り俺得キーバインディングをのせる
主はKarabiner-Elementを使用中
https://karabiner-elements.pqrs.org/
独自のキーバインディングを登録できる有能アプリ
人権じゃないかとまで思う

##環境
MacBook16inch USキーボード

##俺得

#####1.commandを日本語・英字切り替えに
これUSキーボードだと必須な気がする
ctrl+spaceとか耐えられん
右commandで日本語
左コマンドで英字に切り替えるようにしている

#####2.right-Command+hjklでカーソル移動
vimに使い慣れてきた主はもはや矢印キーを押すことにアレルギー反応を示すようになってきたため
入れることに。。
少し押しづらいけどkarabinerにデフォルトで入ってるし
ctrlとかだと他のキーバインディングとコンフリクトするからrightCommand
leftCommandでもいいかなとも思っている

#####3.CapsLockをLeftCtrlに
3番目に書いたけど一番重要
KarabinerのSimpleModificationで一発で入れられるからすぐ入れたほうがいい
Macの修飾キー機能で入れるとkarabinerの他のキーバインディングがだめになる
（KarabinerではCapsLockとして扱われる）のでKarabinerを使うならばKarabiner側で設定するべき

#####4.ctrl+[に英字切り替えを追加(vim)
vimで欲しい機能だけどこれをつけておくことで
ノーマルモードに戻るとき自動で英字に戻してくれる
これで日本語入力から戻し忘れて煩わしい思いをすることがなくなる
超快適


##補足
とりあえず主が主に使っているKarabinerの設定はこんなものだけど他にも
Command2つ同時押しでEscとか色々あったりする。
まだまだ便利なキーバインディングはあるだろうけど
増やしすぎても既存のキーバインディングとコンフリクトしたりして難しいので
使い所には注意が必要かもしれない、特にCtrl周り

便利なショートカットを常に探しつつ、なければKarabinerやvimrcなど
他の手段を模索していくことでまだまだいくらでも効率化できる（と思う）
AWS学習メモ


一般的なものでなく、人から聞いた内容を備忘録的に記載します。



<h3>AWS最低限覚えておく知識</h3>

- EC2<br>サーバー
- RDS<br>データベース
- VPC<br>ネットワーク
    - Subnet<br>最初にVPCによって作られているCIDRブロックを分割したネットワーク群のこと
    - RouteTable<br>一般的なルーティングの考え方だと各NW機器にルートテーブルを持つのだが、AWS のルートテーブルは特殊で、作成したルートテーブルをサブネットに紐付ける
    <br>※一般的なルートテーブル
　　<br>ルータに記録される経路情報で、ルーティング処理を行う際に参照する
    - VPCピアリング<br>2 つの VPC 間でプライベートなトラフィックのルーティングを可能にするネットワーキング接続。 どちらの VPC のインスタンスも、同じネットワーク内に存在しているかのように、相互に通信できる
    - NAT Gateway<br>VPC内に構成した「プライベートサブネット」からインターネットに接続するためのゲートウェイ
- S3<br>ストレージ
- ELB<br>ロードバランサ―サービス<br>Webサーバやアプリケーションサーバが複数あった場合に通信負荷が均一になるように、トラフィックを分散する機能がある

<h3>AWS次に覚える知識</h3>
- ECS<br>Dockerコンテナサービス
- Route53<br>DNS(Domain Name Service)
- Cloud Watch<br>AWSが提供する「フルマネージド運用監視サービス」で、AWSの各種リソースを監視してくれるもの
- Lambda<br>サーバレスアーキテクチャ
- DynamoDB<br>NoSQL
- Cloud Front<br>ユーザーへの静的および動的なウェブコンテンツ (.html、.css、.js、イメージファイルなど) の配信を高速化するウェブサービス

<h3>AWSでそもそもできること</h3>
- Webサイトの運用<br>EC2でインスタンスを生成して仮想サーバーとして使用しWebサイトを運用することが可能
- データのバックアップ<br>データのバックアップに使用
- ビックデータ分析<br>S3などを活用して集めたデータを機械学習で分析
- IoTソリューションの構築<br>部屋の温度と湿度をDynamoDBに記録するとか
- 業務アプリケーションの利用<br>RDSとの連携
- AI(機械学習)機能の利用
Swift でインスタンス識別のためのログを出す

objective-c 時代は "%p" でポインタ表示していたけど、swift の時の書き方をすぐ忘れるのでメモ。

```swift
print("\(ObjectIdentifier(self).hashValue)")
```

複数インスタンスを作った時、インスタンス別にログを判断したい時などにちょいちょい必要になる。
ps、grepを利用して二重実行防止

# はじめに

以下の記事でps、grepを利用した二重実行防止について触れましたので、この記事で詳しく書いていこうと思います。

シェルスクリプト＋ロックファイルで二重実行防止 - Qiita
https://qiita.com/SECUAL_masa/items/5b1b7e8c4ed13c420435

ps、grepを利用した二重実行防止のコマンド例は以下になります。

# コマンド例

```Text:コマンド例
ps ax | grep my-script.sh | grep -v grep || /path/my-script.sh
```

cronに書くと、

```Text:cron
*/1 * * * * ps ax | grep my-script.sh | grep -v grep || /path/my-script.sh
```

のようになります。

日本語で説明すると、

```Text
1分間隔で実行中のプロセスの中にmy-script.shが存在するかを確認し、存在していれば実行しない。
存在しなければ実行する。
```

となり、二重実行防止になります。

では、「コマンド例」の内容をもう少し詳しく見ていきましょう。
、、、のその前に、my-script.shについても少し。

```Text:スクリプト例(my-script.sh)
$ cat my-script.sh
#!/bin/bash

sleep 10
```

前回の"my-script.sh"とは異なり、単に10秒だけsleepするスクリプトになっています。
・実行後の10秒以内がコマンド/スクリプト実行中
・未実行or10秒経過後がコマンド/スクリプト未実行
として説明していこうと思います。

# 「コマンド例」の詳細説明

ようやく本題です。

```Text:「コマンド例」の一部(psとgrep)
ps ax | grep my-script.sh | grep -v grep
```

パイプ("|"の文字)の詳細は省きますが、

1. psでLinux上で実行されているプロセスの一覧を表示し、
1. その中からgrepで"my-script.sh"を検索する。
1. 検索結果にgrep自身もヒットするので、それは除外(-v)する。

という意味になります。
"ps ax | grep my-script.sh"の結果と"ps ax | grep my-script.sh | grep -v grep"で違いを比較してみてください。(grepは"my-script.sh”でなくてもOKです。ntpやsshなど)

次にgrepの実行結果を見ていきます。
以下の結果を比較してみてください。

```Text:my-script.sh実行中のps、grepの結果
$ ./my-script.sh &
[1] 313163
$ ps ax | grep my-script.sh | grep -v grep
 313163 pts/0    S      0:00 /bin/bash ./my-script.sh
$ echo $?
0                                              ・・・ 実行結果
```

```Text:my-script.sh未実行(10秒が経過して終了した後)のps、grepの結果
$ ps ax | grep my-script.sh | grep -v grep
$ echo $?
1                                              ・・・ 実行結果
```

シェルで"\$?"には"直前に実行したコマンドの実行結果"が入ります。
"echo $?"で、その実行結果を表示しています。

前回の記事でも終了コードについて触れましたが、psやgrepなどの一般的なコマンドの終了コードは、0が正常終了(成功)、1が異常終了(失敗)を意味し、またgrepでは指定した文字列("my-script.sh")が
・ヒットしたら正常終了(成功)
・ヒットしなかったら異常終了(失敗)
となります。

次の

```Text:「コマンド例」の一部
||
```

は、左辺のコマンド実行が失敗した場合に右辺のコマンドを実行する、という意味になります。(逆に"&&"は、左辺のコマンド実行が成功したら右辺のコマンドを実行する、という意味になります)

if文で利用する論理和(||)とは挙動が逆転しているかのような感覚になるので注意が必要です。(後で説明します)

よって、「コマンド例」は、
・左辺のgrepで"my-script.sh"がヒットしなかったら(失敗したら)、/path/my-script.sh を実行する。
・左辺のgrepで"my-script.sh"がヒットしたら(成功したら)、/path/my-script.sh は実行しない。
という意味になり、二重実行を防止するということに繋がります。

# 応用編

応用でプロセス監視にも利用可能です。

```Text:cron
*/1 * * * * ps ax | grep ntpd | grep -v grep || /etc/init.d/ntpd restart
```

実行されているはずのntpdが存在しなければntpdを起動する、という使い方もできます。

# 論理和としての||

少しだけ寄り道します。論理和としての||の説明です。
逆に混乱させてしまうかもしれませんので、読み飛ばしていただいた方が良いかもしれません。

```Text:
if ( 式A || 式B ) {
}
```

上記のロジックでは、

* "式A" の評価結果が"真(true)"なら式Bは評価せずthenルートに入る。
* "式A" の評価結果が"偽(false)"なら式Bを評価し、式Bの評価結果が"真(true)"ならthenルートに入る。

という動きになります。(いきなり"thenルート"という表現が出てきましたが、ここでは説明を省略します。"if then else"辺りで検索してみてください)

言語にもよりますが、0以外は"真(true)"、0は"偽(false)" と同意でもあります。

ですので「コマンド例」の場合、論理和を基準に考えると、

・grepで"my-script.sh"がヒットした場合(実行結果が0)に/path/my-script.shを実行する。
・grepで"my-script.sh"がヒットしなかった場合(実行結果が1)は/path/my-script.shを実行しない。

と、逆の意味で理解してしまいそうなので注意してください。
WSL2でCentOSを使う

この記事ではWindows10_20H2にてWSL2を有効化し、CentOS8 stream8をインストールします。
#仮想化の確認
タスクマネージャーを開き、CPU使用率タブの右下の`仮想化`が有効になっていることを確認してください。
↓無効時
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593714/2baffaef-02bd-ecb7-5b70-84b35db34d23.png)

↓有効時
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593714/33d5108e-d522-7b9d-de1b-c836672a59e7.png)

無効になっている場合はお使いのPCのUEFI(またはBIOS)の設定を変更する必要があります。

```
使用しているPC(またはマザーボード)の型番　CPU仮想化　有効化
```
とGoogle等で検索してみてください。

# WSL2の有効化
管理者権限でPowerShellを開き、下記コマンドを入力します。

```
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart ; dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all
```

コマンド実行後、ソフトウェアのダウンロードと実行が行われます。
完了すると再起動を促されるので、起動しているアプリケーションをすべて終了した後に再起動してください。

# WSLのアップデート&CentOSのダウンロード
初めにWSLのアップデートが実行されます。
その後CentOSのイメージが現在利用しているユーザーのダウンロードフォルダにダウンロードされます。

```
Invoke-WebRequest -uri https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi -outfile $env:USERPROFILE\Downloads\wsl_update_x64.msi ; cd $env:USERPROFILE\Downloads ; .\wsl_update_x64.msi ; Invoke-WebRequest -uri https://github.com/mishamosher/CentOS-WSL/releases/download/8-stream-20210210/CentOS8-stream.zip -outfile $env:USERPROFILE\Downloads\CentOS8-stream.zip ; Expand-Archive -Path $env:USERPROFILE\Downloads\CentOS8-stream.zip -DestinationPath $env:USERPROFILE\Downloads\ ; New-Item $env:USERPROFILE\AppData\Local\Packages\CentOS8-stream -ItemType Directory
```

# CentOSのインストール
今作業しているユーザーのダウンロードフォルダにダウンロードされた`CentOS8-stream.zip`を解凍し、さらにその中に入っている`rootfs.tar.gz`解凍して`rootfs.tar`を取り出します。
その後、取り出した`rootfs.tar`をダウンロードフォルダに配置してください。

```
wsl --set-default-version 2 ; wsl --import CentOS8-stream "$env:USERPROFILE\AppData\Local\Packages\CentOS8-stream" "$env:USERPROFILE\Downloads\rootfs.tar" --version 2 ; wsl -d CentOS8-stream
```

このコマンドを実行するとCentOSが起動しシェルが起動するので、下記コマンドで動作を確認してください。

```
cat /etc/os-release
```
以下のような表示が出れば成功です。

```
# cat /etc/os-release
NAME="CentOS Stream"
VERSION="8"
ID="centos"
ID_LIKE="rhel fedora"
VERSION_ID="8"
PLATFORM_ID="platform:el8"
PRETTY_NAME="CentOS Stream 8"
ANSI_COLOR="0;31"
CPE_NAME="cpe:/o:centos:centos:8"
HOME_URL="https://centos.org/"
BUG_REPORT_URL="https://bugzilla.redhat.com/"
REDHAT_SUPPORT_PRODUCT="Red Hat Enterprise Linux 8"
REDHAT_SUPPORT_PRODUCT_VERSION="CentOS Stream"
```

# 後片付け
上のセクションでWSL2とCentOSの動作が確認できたら、ダウンロードフォルダにある以下の6個のフォルダとファイルは削除しても問題ありません。

- CentOS8-stream.zip
- CentOS8-stream #上のフォルダの解凍されたフォルダ
- wsl_update_x64.msi
- rootfs.tar.gz
- rootfs.tar
- CentOS8-stream.exe

# 参考記事
https://qiita.com/whim0321/items/ed76b490daaec152dc69

https://www.geekfeed.co.jp/geekblog/install_centos8_on_wsl2_for_free#wslcentos8
【VBA】単純作業を自動化したく　その２

#元の記事
https://qiita.com/miyanoShiho/items/91373e000b5328568768
#進捗
今回は「③表題の文字列を検索する」
「④③の文字列の位置から「別シートの値を読み取って転記する」を実施」ができました。
前回の差分としては固定のセルだったところを検索した文字列を起点として処理ができるようになっています。
調べながらなので、ソース汚いとかはありますが気になさらず。

```
Sub test()
 Call readA
End Sub

Private Function readA()
Dim r As Rang
Dim myRng As Range

'別シートの値を読み取って転記する
'Set r = Worksheets(1).Columns(1)  'Worksheets(1)=1枚目のシート　Columns(1)=A列(B列の場合2)
Set r = Worksheets("test").Columns().Find(What:="日付", LookIn:=xlValues, Lookat:=xlWhole)
'Debug.Print (r.Address(External:=True))
  With Worksheets("test")
   MaxRow = .cells(.Range(r.Address(External:=True)).Row, .Range(r.Address(External:=True)).Column).End(xlDown).Row 'ActiveCell=選択中のセル .End(xlDown).Row=最後の行番号取得
  End With
   Sheets(2).Activate
   Range("B3").NumberFormatLocal = "yyyy/mm/dd"  '書式設定の変更
   Range("B3").Value = Worksheets(1).cells(MaxRow, 1).Value
'Set r = Worksheets(1).Columns(2)
Set r = Worksheets("test").Columns().Find(What:="版数", LookIn:=xlValues, Lookat:=xlWhole)
   'r.Select
   With Worksheets("test")
   MaxRow = .cells(.Range(r.Address(External:=True)).Row, .Range(r.Address(External:=True)).Column).End(xlDown).Row 'ActiveCell=選択中のセル .End(xlDown).Row=最後の行番号取得
  End With
   Sheets(2).Activate
Range("C3").Value = Worksheets(1).cells(MaxRow, 2).Value
   
   'TODO
   '①excelファイルを開く
   '②一定のディレクトリで①をループさせる
   '③表題の文字列を検索する
   '④③の文字列の位置から「別シートの値を読み取って転記する」を実施
   '⑤③から④を繰り返す
 
End Function
```
【AWS】クラウドを理解する

#プログラミング勉強日記
2021年4月20日

#クラウドとは
　必要に応じて他社が所有しているハードウェアやソフトウェアをネットワークを介して利用するシステムの利用形態のこと。そのため、ユーザはインフラやソフトウェアを持っていなくても、インターネットに接続してサービスを必要なときに必要なだけ利用できる。
　クラウドを利用する例としては、一時的にサーバーを利用したいときや状況によってサーバーを増減したいとき、すぐにデータベースが必要なときなどがある。このように、柔軟にシステムを利用したいときにクラウド型のサービス・ハードウェアが便利である。

　インフラを仮想化することで、ソフトウェア化されたサービスとして提供されるのがクラウド型のインフラサービス。ソフトウェア化してインフラなどのサービスやそれを使った機能をインターネットを介して提供するのがクラウドというサービスである。

#クラウドの特徴
　クラウドの特徴としては、5つの基本特性と3つのサービス、3つの提供形態がある。

##5つの基本特性
　
###1. オンデマンド・セルフサービス
　ユーザは人を介さずに必要に応じてサーバー、ネットワーク、ストレージを設置・拡張・設定することができる。ネットワークに接続できれば、すべてオンデマンドで利用可能。

###2. リソースの提供
　ハードウェアの使用容量などのリソースは複数のユーザによって共有し、ユーザの需要に応じて動的に割り当てる。(物理的な配置ではない。)

###3. 幅広いネットワークアクセス
　ネットワークを通してパソコンやスマートフォン、タブレットなどそれぞれの端末から利用できる。


###4. 迅速な拡張性
　ハードウェアなどの資源は必要に応じて増減できる。

###5. 計測可能なサービス
　稼働状況が常に計測されていて、利用状況をコントロール・最適化できる。その計測結果に応じて従量課金が可能。

##3つのサービス
　クラウドには主にSaaS、PaaS、Iaasの3つのサービスが存在する。(図で説明する)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/f80cb2ca-26f9-eafc-9e12-853704fb96fc.png)


##3つの提供形態
　クラウドの提供形態はプライベート、パブリック、ハイブリット型の3つある。ハイブリット型はプライベートとパブリックの両方を併用する方法である。
　今回は、パブリックとプライベート、自社所有のオンプレミスについて説明する。(ハイブリットは割愛)

| | オンプレミス(自社所有) | プライベートクラウド | パブリッククラウド |
|:--:|:--:|:--:|:--:|
| 所有形態 | 自社所有 |自社所有 | 他社所有 |
| 特徴 | ハードウェア・ソフトウェアを購入して自社にシステムを構築。 | 自社内にクラウド基盤を構築して、ハードウェア・ソフトウェアを事業部や子会社間で共同利用。 | ハードウェア・ソフトウェアを他社と共同利用して、柔軟に構築・解除ができる。 |
| メリット | 自社でハードウェアを自由にコントロールできる。 | 自社資産の効率化。パブリックと比べてコントロールが自由。 | 運用管理を他社に委任できる。システム調達・構築の自由度が高い。 |
| デメリット | 調達・構築に時間がかかる。運用管理に人材とコストがかかる。 | クラウド運用管理が難しくて、クラウドのメリットが低くなってしまう。 | 自社コントロールの範囲が限られる。 |