OmniAICreator/Qiita-1.07M huggingface dataset:
よく見るSF Symbolsの名前をまとめてみた

#SF Symbolとは？
SF SymbolsはAppleが提供しているシンボルフォントです。iOSなどでの使用を念頭においてデザインされており、開発の場面で使う事も多いかと思います。

SwiftUIであれば、以下のようにして使うことができます。

```swift:SymbolSample.swift
import SwiftUI

struct SymbolTest: View {
    var body: some View {
      Image(systemName: "face.smiling")
    }
}
```

各種Modifierを使って色や大きさを変えることができますし、そのままダークモードにも対応できるのが強みです。さらに数字を含むシンボルはローカライズに対応しているので、海外展開を考えるなら積極的に採用してもいいかもしれません。



基本的には公式サイトから一覧のアプリを入手して、目的のものを探すことになると思います。iOSのバージョンによっては使えない物もあるとはいえ、続々とシンボルが追加されています。

ただ、UIとして使う場合には多くの人が見慣れたものを使う方が操作しやすいのは明らかです。
ということで独断ではありますがよく見るシンボルの名前をまとめてみました。

#共有ボタン
###`square.and.arrow.up`
![スクリーンショット 2021-06-11 12.30.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713689/c2b33ad2-9068-c958-eb13-f0a51f88f88a.png)

主に何かを共有するときに使われているシンボルです。SF Symbolsの多くはこれに限らず、名前の末尾に`.fill`を加えることで塗りつぶしたものに変更できます。左の、塗りつぶしなしの方が多く使われている気がしますね。

#送信ボタン
###`paperplane`
![スクリーンショット 2021-06-11 12.35.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713689/5104f931-8bf5-dff4-ff7c-b3418b016cf3.png)


TextFieldの横に配置されたりする送信ボタンに使われていることが多いです。こちらは塗りつぶしありの方がメジャーかもしれません。


#ダウンロード
###`arrow.down.to.line`
![スクリーンショット 2021-06-11 12.46.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713689/c23028f0-4155-fa71-a92e-6eb7e59e8c3e.png)

こちらもよく目にしますね。実は2種類あって、わかりにくいですが右の`.alt`の方が若干矢印が長くなっています。

#設定
###`gear`

![スクリーンショット 2021-06-11 16.02.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713689/2a7d4cfb-56e8-5d5f-77b7-f0b37033182d.png)

こちらは設定画面を表すときによく使われる歯車のデザインです。ただ、より単純なデザインの`gearshape`はiOS14以上でしか使えない模様。

#検索
###`magnifyingglass`
![スクリーンショット 2021-06-11 16.14.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713689/1c0f3e7c-b7e6-1405-61ba-3b65a0b88dfe.png)

検索を表す時の虫眼鏡のようなデザイン。画像以外にも多くのバリエーションがあるので、検索するコンテンツごとに使い分けてもいいかもしれませんね。

#履歴、最近の項目
###`clock`
![スクリーンショット 2021-06-11 16.35.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713689/4e068820-6288-5243-49d8-cdb49f3b80ab.png)


よくある機能ですが、主に時計のデザインで表現されることが多いです。例えばMacのFinderの「最近の項目」にはこれが使われています。一番右の`clock.arrow.circlepath`はiOS14以上対応ではありますが、似たものがSpotifyで使われていました。

#最後に
アイコンの画像をプロジェクトに追加したりしなくても良いのは便利ですね。また、デフォルトのアプリと同じ意味合いで使えば操作しやすさにもつながるかと思います。
SF Symbolsは今後も追加されていくそうなので楽しみです！
GitLab CIでbuildしたコンテナをGitLab Container RegistryとGoogle Cloud Container Registryにpushする

ただの作業記録です。他のContaner Registryでも大差ないと思います。GCP使うならCloud Buildのほうが良いかもです。

- [GitLab CIのShared Runnerはprivileged](https://docs.gitlab.com/ee/ci/runners/README.html#linux-shared-runners)で動作しているので、build可能
- ここではdind serviceを採用したが、image: docker:latestでもbuildできるはず
- dindの場合、DOCKER_TLS等に関わる環境変数が必要
- Google Cloud Container Registryへのdocker loginはservice account keyを利用し、GitLabのSettings > CI/CD > VariablesにFileとして保存する。GCP上の権限は適宜付与する。![Screenshot from 2021-06-11 16-40-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47300/0fa3b1cb-e2b2-de6c-2ac2-3a1009e5bb6c.png)
- GCLOUD_PROJECT_IDも環境変数として利用できるようにGitLabのSettings > CI/CD > Variablesに保存

```.gitlab-ci.yaml
build:
  stage: build
  when: manual
  image: alpinelinux/docker-cli
  services:
    - docker:20.10.7-dind
  variables:
    DOCKER_HOST: tcp://docker:2376
    DOCKER_TLS_CERTDIR: /certs
    DOCKER_TLS_VERIFY: 1
    DOCKER_CERT_PATH: ${DOCKER_TLS_CERTDIR}/client
  before_script:
    docker login -u _json_key --password-stdin https://us.gcr.io < ${GOOGLE_APPLICATION_CREDENTIALS}
    echo -n $CI_REGISTRY_PASSWORD | docker login -u $CI_REGISTRY_USER $CI_REGISTRY --password-stdin
  script:
    - docker build --tag=${CI_REGISTRY_IMAGE}/image-name --tag=us.gcr.io/${FIREBASE_PROJECT_ID}/image-name .
    - docker push us.gcr.io/${GCLOUD_PROJECT_ID}/image-name
    - docker push ${CI_REGISTRY_IMAGE}/image-name
  after_script:
    - docker logout
```
Windowsのパスでプロンプト起動及びファイル名のみ表示

#概要
Windowsエクスプローラーで対象パスまで移動した後、プロンプトを起動する必要がある場合に知っておくと便利な内容を伝えます。
そして各ディレクトリ毎に存在するファイル名の一覧を作成する場合、DIRコマンドでファイル名のみ表示するオプションを使えばファイル名のみ表示されます。

#対象パスでWindowsプロンプトを起動
ディレクトリ毎に以下の手順を繰り返す必要があります。
①次の画面通りに対象パスまで移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/d0843b5d-f3bb-9e7c-d7a4-aba46572acbb.png)

②パスのバーにマウスカーソルを置いて「cmd」を入力してEnterキーをクリックします。
・パスのバーにマウスカーソルを置いた場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/b88cc86c-92a7-473c-d9c2-3bfc199b8f2e.png)

・「cmd」を入力した場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/7997ff2b-bf72-45a0-1d34-16749913f369.png)

・「cmd」を入力した後、Enterキーをクリックで表示されているWindowsプロンプト画面です。
※対象パスまで移動されている状態です。
パスをコピーして「cd パスを貼り付ける」手順が不要です。
そして「Dドライブ」の場合は、「d:」を入力しなくても対象パスでプロンプトが起動されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/e35c55fd-fb52-b316-9ebd-146bfd16876f.png)

#ファイル名のみ表示
①Windowsプロンプトから次のコマンドを実行します。
※オプションなしで実行した結果と比較です。

~~~bash
dir
dir /b
~~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/45b42e7d-3c98-4d92-9e12-cd1fbd767993.png)

②表示された①のプロンプト情報をコピーして次のエクセルのように編集します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/191286a8-3f35-f915-287c-8e2b3394b0f2.png)

#その他
各ファイルのパスが必要な場合は、次の手順で可能です。

①次の画面のようにファイルを選択して、コピーします。
②サクラエディタでコピーされた内容を貼り付けます。
※ここからパス「C:\Windows\System32\drivers\etc\」を空白に置換するとファイル名だけ表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/9645b6ce-4bef-a4ac-90aa-910221d507fa.png)
③「C:\Windows\System32\drivers\etc\」を空白に置換します。
・次の画面で「すべて置換」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/c70bd5cb-9f68-79ef-04d4-5e9a6671bbe8.png)
・パスが空白に置換されていることが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/7be9e3d3-cd76-5292-d852-c43bd9e8de91.png)

#終わりに
今までWindowsのプロンプトを開いて次のコマンドを実行していたのですが、
今回の手順で要らないですね。

~~~bash
cd \Windows\System32\drivers\etc
※「Dドライブ」の場合は、先に「d:」を入力してからコマンドを入力する必要があります。
~~~

各パスを手入力するのが一番面倒ですね。W
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/77369a3c-77e3-0552-cfa6-274f0ae01e70.png)

今日はここまでです。ありがとうございます。
cudnnのバージョン確認

## 環境
cudnn 8.2

## cudnnのバージョン確認

ネットに落ちてるコマンドでは確認できなかった。
以下コマンドで確認できる。
cudnnのtarファイルのダウンロード・解凍後/usr/local/cuda以下にディレクトリ移動している前提

```
root: ~$ cat /usr/local/cuda/include/cudnn_version.h

#ifndef CUDNN_VERSION_H_
#define CUDNN_VERSION_H_

#define CUDNN_MAJOR 8
#define CUDNN_MINOR 2
#define CUDNN_PATCHLEVEL 0

#define CUDNN_VERSION (CUDNN_MAJOR * 1000 + CUDNN_MINOR * 100 + CUDNN_PATCHLEVEL)

#endif /* CUDNN_VERSION_H */
```
SquidをDocker環境で動作させる

ただの作業記録です。

```Dockerfile
FROM alpine:3.13
RUN apk add --no-cache squid
COPY ./squid.conf /etc/squid/squid.conf
EXPOSE 3128 # squidのport
USER squid # squidユーザで動作させる
CMD /usr/sbin/squid -N 0 # foreground & 1プロセスで動作させる
```

```squid.conf
# ...

cache_effective_user squid # squidユーザで動作させる
pid_filename none # non-rootユーザ動作なので該当dirへの権限回避、foregroundで動作させるので、pid必要ない(はず)
logfile_rotate 0 # stdoutに出力するのでrotate必要なし 
cache_log stdio:/dev/stdout # サーバログをstdoutに出力
access_log stdio:/dev/stdout # アクセスログをstdoutに出力

cache_mem 0 MB # メモリ圧迫させたくないのでcacheしない
cache_store_log none # cacheしない場合はlogging必要なし

client_persistent_connections off # source <-> squidのHTTP keepalive やめる
server_persistent_connections off # squid <-> destinationのHTTP keepalive やめる
```
PowerAutomateからは見えないSPOリスト「サイトのページ」と「イベント」

Office365（Microsoft365）で、ユーザーオペやスケジュールをトリガーに自動起動する連携処理を実装するのに便利なPowerAutomateですが、実際に業務の中で使おうとするといろいろな制約があります。
そのような制約を克服するため思いついたり調べたりした内容をご紹介していこうと考えています。

# Background

[別の記事](https://qiita.com/mizukyf/items/69a08b2de0a2302039c7)でも言及しましたが、SPOサイトのページは内部的にSPOリストの項目として管理されているようです。これは特に調べたわけでもなく、作業中の手違いで気が付きました。調べてもそのようなことを説明してくれている記事は見つかりませんでした。

それはそれとして。

私の職場ではSPOサイトの1つであるTeamsチームサイトをポータルサイトとして活用しています。そのサイトで公開しているページやニュースたちも、SPOリストの項目としてPowerAutomateからいろいろ操作できれば、サイト管理業務の改善ができそうです。
ポータルサイトの「イベント」にPowerAutomateからいろいろ操作できれば、メンバーに共通の予定を共有するのに便利そうです。

# Problem

ところが、前掲記事でも紹介していますが、Power AutomateでSPOリストを参照更新するアクション（ステップ）を使う時、アクセス可能なリストの一覧を示すプルダウンに、「サイトのページ」を管理するリストは登場しません。「イベント」も同様です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/fba33563-74b8-c3fd-7933-739cde8f3b1a.png)

# Solution

ダメ元でやってみてわかった結果はこうでした。
「リスト名」で「カスタム値の入力」を選び「サイトのページ」ないし「イベント」と記載します。ちょっと違和感がありますが、ちゃんと動きます：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/a7693bab-5b61-ec3c-89f5-7dc36aeae806.png)

画面キャプチャでは「複数の項目の取得」で例示していますが、その他のアクション（取得、作成、更新）でも同様です。
#（初投稿）Python-streamlitの基礎 



##環境構築編
- pythonとvisual studio codeをインストールした
- streamlitを'pip install streamlit'で導入した

####大変だった点
今回参考にしていた動画ではpipという形を用いていたが、以前自分で入れていたanacondaとシステムがかぶってしまっていてエラーが起きたことが大変だった。
アナコンダをアンインストール後windows powershellでanacondaが適正でないという表示が消えなくて焦った。
過去にアナコンダにパスを通す際に記述したメモファイルを削除することでなおった。

##画像編
- pip=pythonでフレームワークは"pip install ~as ~"でフレームワークの導入する。
- as以降の部分は省略系を入れることで後の記述を略称で記述することが出来る。
- 同じ階層内の画像は相対参照が出来るから名前のみでOK。
- 保存しないと反映しない（Ctrl+S）

![2021-06-11 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1634469/084a8b27-cedb-c677-66c3-d0da9ff8ba8c.png)

##表編
- pandasのフレームワークを用いて表の出し方を学んだ。

> st.write:  単純に表示する（動的）
>
> st.dataframe:  サイズ変更ができる（writeよりも色を塗るなどカスタマイズできる。）
>
> st.table: 静的な表が出来る

![2021-06-11 (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1634469/f5c01e42-5ba1-ab18-c16b-9b7eb60947eb.png)
　　　　　　　　　　　　　　　↑tableの例



##マップ編
st.mapで簡単に表示された。
緯度と経度（latとlon）にrandomを足し合わせることで周辺を点で表せる。![2021-06-11 (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1634469/201214d8-d615-387d-5975-666e435789e9.png)

##最後に
フロントエンドの作業がいらないstreamlitを触ったが、すぐに結果が反映される点がすごく楽しい。
今回は基礎をということで今後より動的に進んでいくことになる。
マークダウンの書き方にも慣れていきたい。
Docker CentOS8にnginxを入れてSSL化してみた

## 概要
[Docker CentOS8にnginx入れてみた](https://qiita.com/A-Kira/items/93d56be0fec7bc9b279a)にSSL化を追加した拡張版になります。
[mkcert](https://github.com/FiloSottile/mkcert)を利用して、ローカルのPCに認証局を立て、そこで署名を行った証明書をSSLに利用するようになります。
また、コマンドの実行を極力無くすをモットーに、起動コマンドもシェルで作成していますので環境構築はシステムに不慣れな方でも大丈夫！
と、願っています(笑)

## 環境
- maxOS BigSur 11.2.3
- Docker version 20.10.6
- docker-compose version 1.29.1
- Homebrew 3.1.11

## 構成
```
.
├── docker
│   └── app
│       ├── Dockerfile
│       └── nginx
│           ├── certs
│           │   ├── localhost+1-key.pem
│           │   └── localhost+1.pem
│           └── conf.d
│               └── default.conf
├── docker-compose.yml
├── up.sh
└── web
    └── index.html
```

## 手順
### 1. docker-compose.yml作成

```docker-compose.yml
version: "3.9"
services:
  app:
    build:
      context: ./docker/app
    volumes:
      - ./web:/web
      - ./docker/app/nginx/conf.d:/etc/nginx/conf.d
      - ./docker/app/nginx/certs:/etc/nginx/certs
    ports:
      - "80:80"
      - "443:443"
```

**ボリューム**
それぞれのボリュームは以下の用途です。
- `web` => ウェブコンテンツ
- `conf.d` => nginxのconf
- `certs` => 証明書と秘密鍵


**ポート**
ssl化するために、`443`ポートもマッピングするようにしています。

### 2. Dockerfile作成
CentOS8の公式イメージを基にして、nginxをインストールしています。

```dockerfile:Dockerfile
FROM centos:centos8

RUN dnf -y update && \
    dnf install -y nginx

CMD ["nginx", "-g", "daemon off;"]

WORKDIR /web
```

### 3. nginxのconf設定
HTTPアクセスはHTTPSにリダイレクトさせ、HTTPSでは証明書と秘密鍵をそれぞれ読み込むようにしています。

```nginx
server {
    listen      80;
    server_name localhost;
    return 301  https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name  localhost;

    ssl_certificate /etc/nginx/certs/localhost+1.pem;
    ssl_certificate_key /etc/nginx/certs/localhost+1-key.pem;

    location / {
        root   /web;
        index  index.html index.htm;
    }
}
```

### 4. 起動用のシェル作成
SSL化のために[mkcert](https://github.com/FiloSottile/mkcert)を利用します。

```sh:up.sh
#!/bin/sh

brew install mkcert nss
mkcert -install
mkcert -cert-file ./docker/app/nginx/certs/localhost+1.pem -key-file ./docker/app/nginx/certs/localhost+1-key.pem localhost 127.0.0.1

docker-compose up -d
```

### 5. その他
#### 5-1. index.html
今回は、動作確認用のindex.htmlを用意します。
(nginxのデフォルトページは、混合コンテンツのため。)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>テスト</title>
</head>
<body>
<p>test</p>
</body>
</html>
```

#### 5-2. .gitignore
蛇足ですが、ローカル用の証明書と秘密鍵をgitにあげなくていいように設定します。

```.gitignore:.gitignore
docker/app/nginx/certs/
```

### 6. 確認

#### 6-1. 起動

```sh
sh up.sh
```

#### 6-2. nginx確認
https://localhost/ にChromeでアクセスしてみましょう。
通信が保護されていたらOKです。

|![スクリーンショット 2021-06-11 15.27.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290840/4976870b-4d03-5081-2b2a-18c7932a577f.png)|
|:--|

#### 6-3. 停止

```sh
docker-compose down
```

## 最後に
本当はdocker内でmkcertを利用するように頑張ったのですが、どうやらローカル上で認証局を立てないとブラウザで確認する際に有効な証明書として認識してもらえず断念しました。
何かいい方法をご存知の方がいれば、ぜひアドバイスください。
エンジニア学習者の発表会を見た感想

自分も勉強中の身です。

この間エンジニア学習者のポートフォリオの発表会を見ました。

感想としては

「そんなもんでえぇんか？」

というのが正直な感想。

私の場合、そもそも物理的にキャリアチェンジにおいて不利な立場で書類選考だけでは勝てないことは目に見えてるので、ポートフォリオで勝負をしようと思ってます。
なので、良く言われる「良質なポートフォリオ」というものを最低限クリアした上で、他の応募者との差別化を図らなければなりません。

だからこそ、相当意識してましたが、他のエンジニア学習者のポートフォリオを見た時は
「そんなもんなんか？」
という感覚。

簡単にどんなアプリだったか
・フットサルチームのマッチングアプリ
・本のレビュー、本の出品アプリ

ほぼほぼRailsで作成しているアプリなので、機能としてはよくあるパターンだと思うのですが、逆に言えば、採用担当からしたら、「またこんな感じのポートフォリオか・・・」となるのも至極当然の話だと率直に感じました。

逆に言えば、
・ユーザー登録機能
・投稿機能
なんてのはRailsにおいては超基本なので、この辺はできてて当たり前。
それこそよくあるフリマアプリやTwitterのクローンアプリでできるようになります。

本当に押すべきポイントは
・そのアプリを作りたいと思った動機
・そしてそのアプリを作成したあと、エンジニアになって何を作りたいのか
これをポートフォリオに落とし込むということ。

ポートフォリオに組み込むべき技術的な話はケンタさんの動画がわかりやすいと思います。
技術的な話であって、機能ではないです。
https://youtu.be/N0yetny4Zco
SQL 文字列結合、日付/JSON/XML変換

#概要
SQL Serverで良く使っている文字列結合及び日付/JSON/XML変換する内容のリンク集です。
参考サイトを確認してみてください。

#SQL 文字列結合メモ
次の参考サイトの主内容は以下の通りです。
https://qiita.com/Sammy_U/items/5498b93ff77d52c7e8fb

・文字列同士を結合して表示(リテラル)
・文字列同士を結合して表示(列名)
・文字列同士を結合して表示(リテラル + 列名)
(※)NULLデータを含む場合
・CONVERTを使用
・CASTを使用
・FORMATを使用

#[SQLServer] 文字列→日付/JSON/XML変換クエリまとめ
次の参考サイトの主内容は以下の通りです。
https://qiita.com/Meeracker/items/c91fe3dd056e8dd0eaea

・日時の表記形式一覧

~~~bash
#日付の表示フォーマット
yyyy/mm/dd、
yy/mm/dd、
yyyymmdd、
yymmdd、
mm/dd/yyyy、
mm/dd/yy
dd/mm/yyyy
dd/mm/yy
HH:mi:ss
HH:mi:ss:mmm
~~~

・月末日・月初日の取得

~~~bash
# 取得日
当月月初
前月月初
翌月月初
当月月末
前月月末
翌月月末
~~~

・文字列とJSON型の変換
・文字列とXML型の変換

#終わりに
SQL Serverで文字列結合及び日付関連表示が多いと思いますが、今回はこの内容を中心でリンク集を作成しました。
そしてJSON/XMLから取得する方法について今後機会があれば試してみたいですね。
[初心者向け]プロトコルとOSI基本参照モデル

#はじめに
最近、少し前にしていたCS（コンピュータサイエンス）の勉強を再開しました。その中で、「えっ、このへんのことみんな理解してるん？」と感じ、自身の理解を浅かったので、改めて自身の言葉で説明したく執筆しました。かなり噛み砕いているので間違ってたら絶対に指摘ください笑。

※テキストとしては、基本情報技術者試験用のテキストを使っています。
※ぶっちゃけ以下のURL見た方がいいかもです、、汗
参考URL：https://www.itmanage.co.jp/column/osi-reference-model/

#プロトコルとOSI基本参照モデル

めっちゃ簡単に言うと、

- プロトコルはルールという名の約束事
- OSI基本参照モデルはそのルールを各ジャンル別にしたもの

って感じです。

おそらくプロトコルくらいはわかるけど、それがなんなのかがいまいちピンとこないはずです。まずは、OSI基本参照モデルを見てみましょう！

|層|名前|
|----|--------|
|第7層|アプリケーション層|
|第6層|プレゼンテーション層|
|第5層|セッション層|
|第4層|トランスポート層|
|第3層|ネットワーク層|
|第2層|データリンク層|
|第1層|物理層|

これで理解できた方は天才なのでここで見るのやめてOKです笑

これらの層が意味することも見てみましょう！


|層|名前|何のルール？|
|----|--------|--------|
|第7層|アプリケーション層|具体的にどんなサービスを提供するのか|
|第6層|プレゼンテーション層|データはどんな形式にするか|
|第5層|セッション層|通信の開始から終了までどう管理するのか|
|第4層|トランスポート層|通信の信頼性はどう確保するのか|
|第3層|ネットワーク層|ネットワーク同士をどう繋ぐのか|
|第2層|データリンク層|同一ネットワーク内でどう繋ぐのか|
|第1層|物理層|物理的にどう繋ぐのか|

ちなみに事実上、世界中では「TCP/IP」というプロトコルが標準となっていますので、OSI基本参照モデル＝TCP/IPと考えてもらって差し支えないです。今は。（多分よく知っている方からすると殴られますがwww）

ところで、上記の表見て「あ〜〜なるほど」となった部分もあればそうでない部分もあるかと思います。そこで各装置がどこに属すかを考えるとよりわかりやすいのでそれをみてみます。

|層|名前|何のルール？|装置(例)|
|----|--------|--------|--------|
|第7層|アプリケーション層|具体的にどんなサービスを提供するのか|ゲートウェイ|
|第6層|プレゼンテーション層|データはどんな形式にするか|ゲートウェイ|
|第5層|セッション層|通信の開始から終了までどう管理するのか|ゲートウェイ|
|第4層|トランスポート層|通信の信頼性はどう確保するのか|ゲートウェイ|
|第3層|ネットワーク層|ネットワーク同士をどう繋ぐのか|ルータ|
|第2層|データリンク層|同一ネットワーク内でどう繋ぐのか|ブリッジ|
|第1層|物理層|物理的にどう繋ぐのか|LANケーブル、リピータ|

いかがでしょうか。理解できますか？
第1層では電気的な信号を送ったり増幅したりする装置があり、第2層ではパケット（届く小さなデータの塊）のMACアドレス情報を使って、ネットワーク内のセグメント間を中継します。第3層では、パケットのIPアドレスを使って、ネットワーク間の中継をして、それ以上の層ではゲートウェイでプロトコル変換を行って、異なるネットワーク間を中継します。

まあ結局、OSI基礎参照モデルって、単にルールを層という概念で分けてるだけという認識でOKです。（本当はこの層に合わせて、データをカプセル化したりします。）

#実際、TCP/IPとOSI基礎参照モデルは何が違うの？

今までの説明では流石にざっくりしすぎているので、、、

まずOSI基礎参照モデルは以下のようでしたね。
![スクリーンショット 2021-06-11 15.22.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1128031/90afb28c-a05e-a343-aeee-b962ddd78c1f.png)

引用：https://www.itmanage.co.jp/column/osi-reference-model/

これを踏まえ、TCP/IPプロトコルと比べてみます！

![スクリーンショット 2021-06-11 15.22.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1128031/ec2ff62a-d67f-6f71-a987-87271dd20f09.png)
引用：https://www.itmanage.co.jp/column/osi-reference-model/

比べてわかるのは、実はOSI基礎参照モデル＝TCP/IPというのは全くの嘘で、正確にはOSI基礎参照モデルという基本ベースという型があり、TCP/IPはみんなが使いまくった結果、デファクトスタンダードになったプロトコルです。

#おわりに

以上、自分なりに噛み砕いて説明してみました！
もっと良い説明方法や、そもそも違うよと言うことがあれば是非コメントをいただきたいです！
ついに来るか？主要格子暗号スキームのISO標準化

## 概要
データを秘匿したまま活用する技術、 **秘密計算**　の主要技術である、**準同型暗号**。

この暗号について、`暗号化後も足し算や掛け算などの演算が可能な次世代暗号`として
これまでいろいろと記事を書いてきました。

最近の記事では例えば、[秘密計算エンジニアを始めて２年半が経った。](https://qiita.com/kenmaro/items/48059dd60f79e80f5ef8)
などをご覧ください。

暗号系の研究者たちの研究対象として理論的にも、実装的にも社会実装のための基盤づくりが続いている状況ですが、

現在は暗号技術として標準化がされておらず、各方面の研究者や委員会の方達が標準化に向けて動いているところでした。
上の記事にも　**準同型暗号の標準化委員会と学会**　として取り上げました。

> 準同型暗号の標準化委員会 はマイクロソフトリサーチの権威で、SEALライブラリの開発責任者なども務めている Kim Laine さんなどが主導しています。

今回は **この標準化に向けた取り組みに動きがあった**、ということなので簡単にまとめてみます。


## 格子暗号の主要スキームが２０２４年までにISO標準化か

ISO/IEC JTC1　Working Group2 （暗号やセキュリティ機能を担当するグループ） に現在出願中の **準同型暗号標準化委員会** は、
WG２の専門家が満場一致で **完全準同型暗号（FHE)** を
`Preliminary Work Item (PWI)から　New Work Item (NWI)` 
へと進めるよう合意した、と発表しました。
--> **つまり標準化が今までの準備段階から本段階へと進む**ということです。

現在この推薦はアメリカの最終合意待ちとなっています。
準同型暗号標準化委員会はこの合意が達成されれば、NWIとして更なる精査ののち、
**３年以内** に`主要格子暗号スキームがISO標準として国際標準の暗号になる`、としています。


> ISO/IEC JTC 1とは、国際標準化機構 (ISO) と国際電気標準会議 (IEC) の第一合同技術委員会 (Joint Technical Committee 1) のこと。情報技術 (IT) 分野の標準化を行うための組織である。1987年に設立された。

https://ja.wikipedia.org/wiki/ISO/IEC_JTC_1 より

## 主要スキームとは
準同型暗号の中でも、対量子性を持つと言われる **格子暗号** において、現在研究が活発に行われているものは **４つ** あります。

- BFV形式
- CKKS形式
- GSW形式
- CGGI(TFHE)形式

> CGGI(TFHE)としたのは、全ての形式を発案者の名前の頭文字で統一しようとされているからです。

これらの形式に対しては

[秘密計算エンジニアを始めて１年が経った。](https://qiita.com/kenmaro/items/416657efca2ff296169b)
や、それらのOSS実装は
[有名な格子暗号ライブラリの使用感をまとめてみた。](https://qiita.com/kenmaro/items/0654ad4d26e7a4dd919b)

などをご覧ください。

また、最先端の理論（数学の背景）にご興味のある方は、
ぜひ [https://qiita.com/nindanaoto](nindanaoto)さんの
[(完全)準同型暗号の最前線1（入門編）](https://qiita.com/nindanaoto/items/98335ad4d32b927effa9)
シリーズを読んでみてください。素晴らしくよくまとまっています。
これをみた後は是非 [TFHEの原論文](https://eprint.iacr.org/2018/421.pdf) にチャレンジしてみてください。


## 標準化されるとどうなるのか

`標準化されるとなにがおいしいのか？` という問題ですが、
まずは、格子暗号ベースの準同型暗号が

**AESや、RSAなどの暗号と肩を並べ、国際的に用いられることが可能になる** 、といえます。

ISO標準の暗号に関しては以下のウィキペディアをご覧ください。
https://ja.wikipedia.org/wiki/ISO/IEC_18033

また、
>米国政府標準暗号を筆頭とするいわゆる“政府標準”規格は、主管の政府機関が定める規格である。これは、自国政府の情報システムや重要インフラを保護することを目的に、多くの場合法的根拠に基づいて、使用すべき暗号技術を強制的に指定する。また、民間セクタでの使用も積極的に推奨されるのが一般的である。
これに対し、使用が強制されているわけではないが、利用することが望ましい暗号を“政府推奨”規格という。

https://www.atmarkit.co.jp/ait/articles/0604/07/news119_2.html

とあるように、国際的に標準化された暗号は、政府系の機関で積極的に使用されるようになったり、
民間団体でも使用が推奨されることとなります。

つまり、`格子暗号も２０２４年あたりから標準化の後押しによって、
ついに研究の域を超えて民間活用される` 、、かも？？


## まとめ
というわけで、今回は格子暗号の標準化についての記事をまとめてみました。

秘密計算領域にはいろいろな制約や技術上の困難も多いですが、これから確実に注目されていく領域ではあると考えられます。
これからも標準化委員会の最新ニュースに対してはよく追っていきたいですね。



それでは。


*kenmaro*
Qiitaのメール認証につまづいた件

##はじめに
今回初めてQiitaの記事を書かせていただきます新人エンジニアです。
初投稿前のメール認証で詰まったことを記事にさせていただきました。
間違いなどあるかもしれませんが温かい目で見ていただけると幸いです。


##さて、Qiitaに登録するか！！
https://qiita.com
↑こちらから登録していきましょう！

github, twitter,Googleなんかのアカウントで登録できるみたいですね〜
ここではgoogleのアカウントを使用して登録してみます。

ここまでは画像を貼るまでもないと思うので省略します。
登録した後から画像を貼ります！

![スクリーンショット 2021-06-11 14.39.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1634459/e341686c-7a8a-9cd4-17d0-bfe0f7429d94.png)


登録するとまず上の画像のようなホーム画面が表示されます。
実際に投稿するには右上の「投稿する」をタップします。


![スクリーンショット 2021-06-11 14.40.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1634459/82b5c0f7-ce81-0abd-74f6-7abb7a9b7edf.png)


「投稿する」をタップするとメールアドレスの認証が必要とのこと。。。
早速「こちらをクリックしてください」のリンクにアクセスしてみましょう。

![スクリーンショット 2021-06-11 14.40.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1634459/3d8c62fd-f0fa-ad8f-5d79-7da42fc11792.png)

すると登録したメールアドレスに認証の旨が記載されたメールが送られて来ます。
以下が私のメールアドレス宛に送られてきたメールの一部の抜粋です。
「メールアドレスを認証」をタップすれば認証が完了し、投稿できるようになるはずです。

![スクリーンショット 2021-06-11 14.56.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1634459/f78d12c8-39da-e34a-d1bc-2c7aeac41472.png)

押してみたところ。。。

![スクリーンショット 2021-06-11 14.41.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1634459/19de4d4c-919b-a920-fe99-c845d7bb7545.png)

あれ、同じ画面に戻ってきてる。。。
もう一度「こちらをクリックしてください」をタップし、上記の手順を踏んでもまたこの画面。。。
メールアドレスを変えてもこの画面。あれ、なにこれ。。。。

##試したこと

- とりあえず時間を置く（３０分置いて改めてアクセスしたが失敗）
- メールアドレス変えてみる（失敗。同じ画面）

##解決した方法

アクセスポイントを自宅のルーターから自身のandroid端末のテザリングに変える、そして何通も来たメールも一番最初に来たメールから認証を行うことにより成功しました！

なぜ成功したのかわかりませんが。。。笑

##最後に
qiitaの初投稿にこのような形でつまづくとは思いもしませんでしたが何とか投稿することができました。
おそらく新卒で入社されたエンジニアの方々も今後qiitaの記事を書くにあたり同じところで詰まることがあると思います。今回はそちらの方々に向けて、そして私自身の備忘録としてこの記事を書かせていただきました。
みなさまのお役に立てれば幸いです。
未熟ではありますが今後ともqiitaにて発信していきますのでどうぞよろしくお願いいたします！！
【メモ】Swiftの"_" これの意味は？（アンダーバー,アンダースコア)

最近SwiftでiOSアプリ作りにハマっています。

使用PC： MacBook Air (11-inch, Mid 2013)
OSバージョン: 11.4
Xcodeバージョン: 12.5

```sample.swift
let scene = GameScene(size:CGSize(width: 750, height: 1334))
```


こちらを書こうとした際にXcodeからこのような警告文が。
![スクリーンショット 2021-06-11 15.10.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504081/0974f00a-828f-e241-5a85-5785cd45f25b.png)

```
Initialization of immutable value 'scene' was never used; consider replacing with assignment to '_' or removing it

Replace 'let scene' with '_'
```

Replace 'let scene' with '_'と暗示され、Fixボタンを押してみると、

```sample.swift
_ = GameScene(size:CGSize(width: 750, height: 1334))
```

アンダースコアの意味は、メソッドから戻り値は返ってくるが、使用しない。という意味だそうです。

引数が明確な場合はアンダースコアを入れてあげると楽になります。
PowerAutomateでアクションのエラーに構わず後続を実行する

Office365（Microsoft365）で、ユーザーオペやスケジュールをトリガーに自動起動する連携処理を実装するのに便利なPowerAutomateですが、実際に業務の中で使おうとするといろいろな制約があります。
そのような制約を克服するため思いついたり調べたりした内容をご紹介していこうと考えています。

# Problem

Power Automateでフローを構築するとき、たまにですが「期待したデータが得られたらその結果に基づき何かしら処理を実行してから後続処理に移る、得られなければすぐに後続処理に移る」というロジックを実装しなくてはならないことがあります。

ところで、SharePointリストの項目（要素）にせよ、ActiveDirectoryで管理されているユーザー情報にせよ、それらを取得するためにPower Automate に用意されているアクションは「該当する項目が存在しない」場合にエラーを発生させ、フローを中断させてしまいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/34902a03-7f0a-8a43-8f17-60a0f144835f.png)

# Solution

このような時は空の「スコープ」アクションの出番です。

エラーになりうるアクションの後ろに「スコープ」を追加し：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/6741fe19-c3e3-6725-8946-fdde1ee2161a.png)

「…」→「実行条件の構成」で、「…に失敗しました」のチェックボックスをONにしてあげます：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/28a0cbf1-8acf-29cb-6e3a-087a052d0954.png)

フローを実行すると・・・、このように「エラーに構わず後続実行」されました：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/2475ff33-568b-1cb8-a0dc-5d7a9f8b37b6.png)

当初の目的である「期待したデータが得られたらその結果に基づき何かしら処理を実行してから後続処理に移る、得られなければすぐに後続処理に移る」を実現するには、さらに「スコープ」を追加します：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/2a7297c3-cfb0-a52d-7c32-39f70b3db0e6.png)

元からある「スコープ エラー無視」は空のままですが、フロー編集で「実行条件の構成」が初期化されてしまうので、やり直してあります。

新たに追加した「スコープ データ取得＆データ処理」にはデータ取得処理と（もし取得できたら）実行したい処理を入れておきます。

これを実行すると、ご覧の通り、目的が達成できたことがわかります：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/66976b91-4975-74e7-28f1-713c32ce015f.png)

トリッキーと言えばトリッキー、微妙といえば本当に微妙ですが、こうした半ば単なる埋草としての「スコープ」は他にも活用シーンがありそうです。。
閲覧数を管理する足跡モデルの設計 その2 設計の変更とその実装

## 導入

前回の記事に引き続き、閲覧数管理する足跡モデルの設計を行う。前回からの引き継ぎとして、現状の課題点として「ModelへのSQLの発行が乱立している。」点があげられる。今回はその解決を行う。
最終的な実装は一番最後にまとめてあります。

前回の記事：

https://qiita.com/Ub_Iwerks/items/c6eae1729dbee289b288

## 課題点

### 1. ModelへのSQLの発行が乱立

```ruby
:controller/works_controller.rb
  def show
    @work = Work.includes(:user).find(params[:id]) # 1回目 SELECT
    @work.create_footprint_by(current_user) # 2回目 UPDATE
    @footprints = Footprint.select("SUM(footprints.counts) as total").find_by(work_id: @work.id) # 3回目 SELECT
  end
```

コントローラーにて、個別のSQLへのリクエストが3度も行われてしまっている。3回目のSQLに関しては、1回目と同一にする事ができると考えられる事から、以下のように変更したいと思う。

```ruby
:controller/works_controller.rb
@work = Work.select("works.*, SUM(footprints.counts) as total").joins(:footprints).includes(:user).find(params[:id]) # 1回目 SELECT
@work.create_footprint_by(current_user) # 2回目 UPDATE
```

しかしこの場合には、2つの問題が発生する。それは以下の通りである。

#### (1) 呼び出し後に、足跡が作成または追加されている。create_footprint_byメソッドの位置

`@work`に代入された後に、さらに足跡が追加されている。つまり、代入されている(表示される)閲覧数と実際の閲覧数に +1 の差が発生してしまう。

#### (2) joinsにおける内部結合の特徴 = 結合相手がいない行は**結合結果から消滅する**

参考：

https://qiita.com/ngron/items/db4947fb0551f21321c0

内部結合の挙動では、結合先のテーブルを左テーブル(works)に合わせて複製されます。しかし、結合先が存在しない場合には、結合結果から消滅します。
つまり、足跡オブジェクトが1つも存在しない場合、`@work`自体がnilになってしまう。
これらの解決策として、仕様を変更する。

## 課題点(1)の解決策

(1)の閲覧数に +1 の差が発生してしまう問題に関しては、根本的な解決策にはなっていない気もするが、以下のようにして対応する。

```ruby
:controller/works_controller.rb
@work = Work.select("works.*, SUM(footprints.counts) + 1 as total_footprints_count").joins(:footprints).includes(:user).find(params[:id])
@work.create_footprint_by(current_user)
```

呼び出す時に、カラムに1を追加した値とすること。これにより、現状の閲覧数と同値の値が代入されることになる。ついでに擬似カラム名も意味が分かるような名前に変更。

## 課題点(2)の原因

問題はこっちである。この設計自体のミスを見つけた、気がする。
足跡オブジェクトが1つも存在しない場合、`@work`自体がnilになってしまう問題。
そもそも、現状の足跡オブジェクトの作成（増加ではなく）は全てworks_controller/showメソッドに依存している。そして現状のSQLでは以下のような挙動になる。

作品が閲覧されるタイミングで足跡オブジェクトが作成される。
しかし、足跡オブジェクトが存在しない場合は、作品を呼び出す事ができない。
大きなジレンマが発生している。だったら`@work`を代入する前に、足跡を作成すれば良いか？

```ruby
:controller/works_controller.rb
# ここに @work = Work.find.. が必要
@work.create_footprint_by(current_user) 
@work = Work.select("works.*, SUM(footprints.counts) + 1 as total_footprints_count").joins(:footprints).includes(:user).find(params[:id]) # 1回目 SELECT
```

ただ、そうなると結局一番最初の実装と同じで、SQLが3行になってしまう。
と言うことで、この問題の原因は、**足跡オブジェクトの作成されるタイミング**に問題があると考えた。

## 課題点(2)の解決策

そもそも、閲覧数管理がworks_contorollerのshow**のみに**依存している問題があると考えた為、以下のように作品が生成されるタイミングで、足跡オブジェクトを作成するものとする。

その為、モデルのコールバックを用いて足跡オブジェクト作成するものとする。作品作成(works/create)後には、自動的にshowページへリクエストが飛ぶので、作成者本人は一番最初に作品を閲覧するので、user_idは作成者のidを利用する。

```ruby
:models/work.rb
class Work < ApplicationRecord
  after_create { Footprint.create(user_id: user_id, work_id: id, counts: 0) }
	:
end
```

### こだわりポイント

足跡オブジェクトのデフォルト値は1なのだが、ここでは値を0に指定する。
作品作成後には、自動的にshowページへリクエストが飛ぶ（+1される）ので、この時点での閲覧数は0にし、リクエストのタイミングでデフォルトの1になるようにしている。

また、モデルのコールバックで作成した事により、seedファイルなど作成された場合にも必ず1つの足跡オブジェクトが作成される事になる。
便利なツールの紹介（画面キャプチャー、SQLConvert）

#概要
今回は２つの便利なツールを紹介したいと思います。
他のツールもあると思いますが、私個人的にはこのツールは便利だと思っています。
各ツールについて説明します。

#画面キャプチャー(アプリ名：QShot)
●ツールの機能
①マウスのフォーカスで選択されているオブジェクト全体の切り取りの場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/3d7811ce-56b5-9582-8a4f-5fa635b4b590.png)
②マウスのフォーカスで選択されているオブジェクト部分の切り取りの場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/b5e67dc3-b6f4-a786-8200-493e0f5a8d8b.png)
③特定した領域を手動で切り取りの場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/453f2ac8-cbc5-3584-1fde-2632d218e9b4.png)

●ツールの設定について
Windowsの日時が表示されている常駐アプリを確認すると下記のようなアイコンが表示されています。
このアイコンでマウスの右ボタンをクリックして「設定」メニューをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/6b373879-3f81-8b6c-2515-41b38c84640e.png)

下記の設定画面で各タブごとに説明します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/19a40078-48b2-600f-c3a9-5b75481307e5.png)

・キャプチャー起動キー
画面キャプチャーアプリを起動する短縮キーが「F6」ということです。
※チェックボックス機能にマウスカーソルが含まれる場合と含まれない場合です。

・保存先
①ファイル：指定されている保存先に切り取りした画像をファイルとして保存されます。
②クリップボード：ファイルは保存されないでクリップボードにコピーされている状態となります。クリップボードにコピーされた画像をExcelに貼り付けることができます。
③両方：指定されている保存先に切り取りした画像をファイルとして保存します。そしてExcelにその画像を貼り付けることもできます。

・保存フォーマット
①ビットマップ：保存される画像ファイルのフォーマットは「BMP」となります。（拡張子がBMP）
②JPEG：保存される画像ファイルのフォーマットは「JPEG」となります。（拡張子がJPEG）
③PNG：保存される画像ファイルのフォーマットは「PNG」となります。（拡張子がPNG）

●ダウンロード
https://www.vector.co.jp/soft/winnt/art/se470643.html

#SQL Convert
●ツールの機能
このツールを利用してSQLをConvertすると下記のように変更前と変更後で分かると思います。

・変更前のSQL

~~~bash
select * from test where aaa=1 and bbb=3 and ccc in ('1','2','3')
~~~

・変更後のSQL

~~~bash
SELECT
    *
FROM
    test
WHERE
    aaa=1 AND
    bbb=3 AND
    ccc IN ('1','2','3')
~~~

●操作方法（SQL毎に①～③の作業を繰り返すことになります。）
①変更前のSQLを選択してコピー（Ctrl+C）します。
②アプリを起動して実行ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/47df4803-b5a8-bae2-9204-ced3ff36c33b.png)
③サクラエディタまたはExcel等に貼り付けます。
※クリップボードに保存されたSQLが変更後のSQLになって貼り付けれます。

●ダウンロード
https://www.vector.co.jp/soft/dl/winnt/business/se473217.html

#終わりに
SQL Convertのツールがどのツールだったか思い出せなかったですが、本日偶然検索で見つけました。会社では外部のソフトウェアを勝手にインストールするのが承認されてないかもしれないですが、その場合は、上司の承認を得てからインストールして使いましょう。
Linux基礎学習まとめ⑥ プロセスとは 

##概要
Linuxにおいて、実行中のアプリケーションを管理するプロセスについてメモしておく。

##実行環境
- macOS BigSur 11.4
- CentOS7 (macOS上でLinux環境を構築する方法は[こちら](https://qiita.com/tamago3keran/items/781728815e359243ff33)を参考にしました)

##プロセスとは？
Linuxでは、実行中のプログラム（アプリケーション）を管理する単位をプロセスと呼ぶ。
各プロセスは、優先度順(Nice値)や、時間ごとにCPUを使用するラウンドロビン方式、FIFO(First In First Out)方式などで、実行順序がスケジューリングされる。

##ジョブ
シェルが管理するプログラムの単位をジョブという。
何かの作業中に後ろで動かすバックグラウンドジョブ、対のフォアグランドジョブ

例）

```
$ sleep 3600& (バックグランドで実行したい場合、'&'をつける。'sleep'はn秒スリープするプロセス)
$ sleep 3601&
$ sleep 3602&
$ jobs (実行中のジョブを確認するためのコマンド？)
[1]   Running                 sleep 3600 &
[2]-  Running                 sleep 3601 &
[3]+  Running                 sleep 3602 &
$ %1 (フォアグランドジョブにするジョブを指定、'%..'の使い方は様々)
sleep 3600
^Z ('Ctrl + z'でフォアグランドジョブをサスペンド(停止))
$ %- ('-'のついたジョブをフォアグランドジョブにする)
$ %% ('+'のついたジョブをフォアグランドジョブにする)
$ fg (+のついたものから順に実行していく？)
```

##シグナル
プロセスにシグナルというイベントを送信して、プロセスを制御する。
よく使うのは、`Ctrl + C`のプロセスを　終了させるシグナル。
`kill -l`コマンドで、シグナル一覧を表示できる。


例）

```
$ cat loop.sh
while true
do
    sleep 3600
done
:w (書き込み)
^Z (プロセスをサスペンド)
$ chmod 755 loop.sh
$ ./loop.sh
^C (割り込みシグナルを送信し、プロセスを終了する)
```

##プロセス間通信
複数のプロセスがコミュニケーションを取りながら同期したり、動作を変更して達成することがある。これをプロセス間通信という。
詳しい動作は後々勉強することになると思われるため、ここではキーワードのみ書いておく。


- System V IPC(Inter Process Communication)
    - 共有メモリ (shared memory)
    - セマフォ (semaphore)
    - メッセージキュー (message queue)
- ソケット
- パイプ
- シグナル


##プロセスに関係するコマンド集

###・`ps` 
プロセスに付与されている一意のID(プロセスID)、自身のプロセスIDは`$$`で取得可能。
現在実行中のプロセスのスナップショットを表示する。
PPIDを見れば親プロセスがわかる。

###・`trap`
送信されたシグナルごとの処理を返す。
このコマンドを受け取った際には、プロセスが終了しないので、`Ctrl + z`や`kill [option]`コマンドなどで終了させる必要がある。

例）

```
trap echo "...Ctrl + C is pressed." 2 
```

###・`stty -a`
シグナルとキーの割り当てを返してくれる。
これは、慣れるまではめちゃめちゃお世話になりそうな予感。

##終わりに
参考文献を最初から読んでいくと今回はネットワークについてまとめるべきである。
しかし、未だに理解できているとは言い難い。
今後Ruby on Railsを勉強しアプリケーションを作る予定であるため、その際に改めて記事にしたいと思う。

##参考文献
この記事は以下の情報を参考にして執筆しました。
- [Linux標準教科書(ver.3.0.2)](https://linuc.org/textbooks/linux/)
【UiPath】変数とその初期値について

# はじめに

この投稿は、RPAツール「UiPath」で使用する **変数とその初期値** ついての記事です。

# UiPathの変数と初期値

UiPathで使用する変数は、
　「.NETで定義されているもの」 ＋ 「追加したパッケージに入っているもの」
になります。

変数の値は最初「初期値」になっていますが、値は変数の「型」によって異なります。
以下、主要な型とその初期値です。

| 型 | 初期値 |
|:-|:-|
| String  | 空文字列（"") |
| Int等の数値  | 0 (ゼロ) |
| Bool  | false |
| DateTime  | 01/01/0001 00:00:00|
| Object  | null（VBではNothing） |
| DataTable  | null（VBではNothing） |
| Array | null（VBではNothing） |

初期値が「Null」の型で「初期値かどうか？」を判定する場合ですが、条件分岐アクティビティ は「条件式をVB形式で書く必要がある」ため、以下のように「Is Nothing」で判定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/aa7ba03e-0d19-856f-2b48-f5ed41a7ad6d.png)


# 数値型は最大最小がある

UiPathで数値を扱う場合は、基本は「Int32」で、小数点有りなら「Double」を使うことが多いと思いますが、
それぞれ、格納できる最大最小値があります。

例えば、UiPathの変数指定でデフォルト表示される「Int32」型ですが、この型は「21億（2,147,483,647）」以上の値でエラーになります。

「Int32型」は正式名称「System.Int32型、符号付き32bit整数値」と呼ばれ、値の範囲は「-2147483648 ～ 2147483647」です。

この「Int32型」を使用した際の良くあるエラー例として、以下があります。

```
　金額値をInt32で定義した
　　↓
　加算していったら22億くらいになった
　　↓
　「OverflowException: 算術演算の結果オーバーフローが発生しました。」 エラー
```

22億というと、メジャーリーグのTOP30くらいの年俸です。
（メジャーリーガーの年俸システムをRPAで操作する時？はInt32はダメです）

https://full-count.jp/2021/02/17/post1052134/2/

この場合、変数の型を「Int64」型にすれば「922京」くらいまで入るので安心です。
「Int64」型は正式名称「System.Int64型」と呼ばれ、値の範囲は「-9223372036854775808 ～ 9223372036854775807」です。

各数値型の範囲は以下を参考にしてください。

https://docs.microsoft.com/ja-jp/dotnet/csharp/language-reference/builtin-types/integral-numeric-types


# 小数点の変数

小数点を扱う場合は「Int32、Int64」型ではなく、以下の変数型を使用します。

| 型の名称 | 有効桁数最大 | 特徴 |
|:-|:-:|:-|
|Single型 |7 桁|計算で微妙なズレが出る|
|Double型 | 15桁|計算で微妙なズレが出る|
|Decimal型| 29 桁|計算で微妙なズレが出ないが、処理速度が少し遅い|

違いは「箱（どれだけ大きな桁数の数字を入れられるか）」のサイズと、正確さ、計算速度です。
小数点がある金額の計算などは、Decimalで行うほうが安心です。


# 終わりに

いかがでしたでしょうか。初期値や数値のオーバーフローで困った時に役立てば幸いです。

この記事が参考になったら、 LGTMをお願いします。閲覧ありがとうございました。
AzureでRHEL8のVMをアップグレードする方法

AzureでRHEL8のVMをデプロイし、アップデートしても最新リリースバージョンになりません。

```bash
$ head -2 /etc/os-release
NAME="Red Hat Enterprise Linux"
VERSION="8.1 (Ootpa)"

$ sudo yum update --quiet -y

$ head -2 /etc/os-release
NAME="Red Hat Enterprise Linux"
VERSION="8.1 (Ootpa)"
```

アップグレードしてもリリース**8.1**のままで、そのバージョンの更新があるパッケージのみがアップグレードされます。

イメージがバージョンロックされているかどうかを確認します。

```bash
$ cat /etc/yum/vars/releasever
8.1
```

上記の場合、リリース**8.1**でロックされています。

リリース**8.4**などの別のリリースにアップグレードしたい場合は、以下の手順を参考ください。

バージョンロックをリリース**8.4**に変更し、すべてのパッケージを更新します。
 
```bash
echo 8.4 | sudo tee /etc/yum/vars/releasever
sudo yum update -y
```

その後、VMを再起動します。

```bash
sudo reboot
```

再起動後にリリースを確認します。

```bash
$ head -2 /etc/os-release
NAME="Red Hat Enterprise Linux"
VERSION="8.4 (Ootpa)"

```

リリース**8.4**にアップグレードされています。

以上です。
Laravelのbladeを使って困った話

Laravelで開発をするときにSEO対策をしっかりしたいということで、フロントをSPAではなくbladeを使って開発することになったのですが、bladeの知見がなかったので色々試しながら開発したことについてまとめてみました。

# viewロジックを書く場所に困った
まず初めにviewロジックをeloquentモデルにアクセサに記述していたのですが、viewロジックを分離させた方がいいということで[robclancy/presenter](https://github.com/robclancy/presenter)を採用することにしました。robclancy/presenterは簡単に言うと、eloquentモデルをDecoratorパターンで拡張してviewロジックを切り離して書けるようにするライブラリです。
eloquentモデル自体にはアクセサなどを増やすことなく、eloquentモデルを拡張するような形でviewロジックを書けることにありがたみを感じていましたが、開発が進むにつれてfatになっていきメンテナンスが難しくなってく印象がありました。
また、viewロジックはrobclancy/presenterで書いていけばいいやという感じで進めていましたが、複数のモデルと関連した画面固有のロジックはどこに書けばいいのだろうと悩んだりしたが、画面固有のviewロジックを記述するオブジェクトをviewに渡してもよかったかもしれないです。eloquentモデルに紐づいているviewロジックだったとしても、一つの画面でしか使わないし他で使い回すべきではないロジックなどは画面固有のオブジェクトに移せばfatになっていくこともある程度は防止できると思います。

# フロントからのリクエストデータの構造に影響を受けてしまい困った
コントローラに直接ビジネスロジックを書くべきではないということで、サービス層を設けてそこにビジネスロジックを書くようにしていたのですが

```php
$data = $request->all();
$service->execute($data);
```

上記のように配列をそのままサービス層へ渡してしまい、フロントから送出されるデータ構造に影響を受けてしまい、フロントの変更に伴ってサービス層も修正しないといけないという問題が発生していました。
コントローラからサービス層を呼び出すときは、以下のようにリクエストデータをDTOなどに詰め直してそのオブジェクトを渡した方がいいと思います。

```php
$data = new Data($request->all());
$service->execute($data);
```

こうすることでフロントから送出されるデータ構造に変更があっても、データをDTOに詰め直す部分に修正を加えるだけで済み、サービス層への影響は考えなくて良くなります。

# フロントとの適切な作業分担うまくいかず困った
フロントエンドとバックエンドで担当するエンジニアが異なっていたのですが、テンプレートのコーディングをほぼほぼフロントエンジニアが担当していて、動的な値の埋め込みや条件分岐による表示といったこともフロントエンジニアが作業するといった状態でした。
何が問題かというとテンプレートで使える変数がテンプレートからだと分からなかったり、バックエンドの処理を追う必要が出てしまいフロントエンジニアの作業量が膨らんでしまうので、バックエンドの実装の知識が必要になってくるような箇所についてはバックエンド側で対応した方がいいと思います。

フロントエンジニアにはcssなどが適用されたHTMLファイルを作成してもらい、そのHTMLファイルを元にバックエンドエンジニアがbladeファイルを作成し動的表示を実装するという流れだとフロントエンジニアがbladeやlaravelについて学習する必要が少なくなると思います。

```index.html
<header>
  <div class="navi">
    ナビメニュー
  </div>
</header>
<div class="content">
  ユーザー名:田中 太郎
</div>
```

このようなHTMLファイルがあったとすると、ユーザー名などの動的な部分を置き換えてあげて、ナビメニューのような重複する内容の場合は`@include`を使って再利用すると楽になると思います。

```index.blade.php
<header>
  @include('navi')
</header>
<div class="content">
  ユーザー名:{{ $user->name }}
</div>
```

```navi.blade.php
<div class="navi">
  ナビメニュー
</div>
```

# view composerの使い所に困った
view composerを使うとviewに何が渡されているかわかりづらくなるので積極的に使うべきではないという印象ですが、リクエストの内容によらずviewに必ず渡すデータなどはview composerを使った方がいいと思います。
良くあるのがナビメニューやヘッダーにユーザー情報などを表示する場合で、基本的にどの画面でも必要なデータでかつリクエストの内容に影響を受けない場合がほとんどだと思うので使い所になります。

```NaviComposer.php
<?php

namespace App\Http\ViewComposers;

use Auth;
use Illuminate\View\View;

class NaviComposer
{
    /**
     * @param View $view
     */
    public function compose(View $view)
    {
        $view->with([
            'user' => Auth::user(),
        ]);
    }
}
```

viewを出力する際にControllerとは隔離されて上記処理が行われviewにデータが受け渡されるようになるため、Controllerではルーティング固有の処理に専念することができます。

```index.blade.php
@include('navi')
<div>コンテンツ</div>
```

```navi.blade.php
{{ $user->name }}
```

ナビメニューのbladeファイルは予め分割しておくといいと思います。

# bladeのコーディングに困った
IDEはphpstormを使っていたのですが、bladeでコード補完をする方法が分からず開発初期からしばらくはコード補完なしで進めていました。しかし、タイポや変数名が分からず調べるといったことが度々発生してしまい、効率が悪いと感じたので調べたところコード補完を効かせる方法を見つけました。
phpstromを使っている場合は、以下のようにbladeファイル上で変数を定義しておくとコード補完が効くようになります。タイポも減るしコーディングのスピードも向上するので特に理由がなければ記述しておくことをおすすめします。

```index.blade.php
@php
/** @var App\Models\User $user */
@endphp
```
PowerAutomateに日時型なんてものはない

Power Automateでフローを構築するとき、「現在日時」を取得して利用したり、「ExcelのテーブルのXX列から読み取った日付」を読み取って利用したりと、日時データを扱うことはしばしばあります。

# Problem

ところで、Power Automateで扱えるデータ型には「日時型」（例：C#のDateTime、JavaのDateやDateTime、JavaScriptのDate）は存在しないようです。これは「問題」というより単なる「事実」かもしれませんが。。。

# Solution

では日付データはどのように扱うかというと文字列型（String型）のデータとして扱います。ISO8601で規定されたフォーマットや、その他のフォーマットで日時データが表現されている、単なる文字列です。

例：現在の日時を得るには `utcNow()` 関数を使いましょう。ただし関数名が示す通りこの関数が返すのは世界標準時です。ISO8601形式でミリ秒精度、タイムゾーン付きの日時文字列が得られます。

```ts
utcNow()
```

例：その値を日本標準時に変換するには `convertFromUtc()` 関数を使いましょう。

```ts
convertFromUtc(utcNow(), 'Tokyo Standard Time')
```

例：30分後の時刻を知りたい場合は `addMinute()` 関数を使いましょう。ちなみに30分前の場合は負数を指定します。

```ts
addMinute(convertFromUtc(utcNow(), 'Tokyo Standard Time'), 30)
```

だいたいいつもこんな調子ですが、注意点が2つあります。

1. アクションによって日時データの解釈の仕方が違うので注意しましょう。
   所定の欄に入力された日時データ（を表す文字列）を世界標準時として解釈するものと、どこかしらの国・地域の標準時として解釈するものとがあります。
2. 日時データの書式化（フォーマット）はなるべく最後の段階で行いましょう。
   繰り返しになりますが、Power Automateにおいて日時データは単なる特別な書式を持つ文字列データです。ひとたび、Power Automateが標準で使用するフォーマット（ISO8601）以外に変換したら、後続の処理でもその書式を意識した処理をしなくてはなりません。前掲の「例」で `convertFromUtc()` や `addMinute()` はいずれも第3引数を省略していますが、これができるのはISO8601を使う場合だけです。
import rayでSymbol not found: _Py_GetArgc_Argvが出たときの対処法メモ

https://qiita.com/waffoo/items/603bb3df25163fa461e9

こちらの記事を読み、なるほどこれはよさそうだとpip installしてimport rayしたところ表題のエラーが出たのでその対処法のメモです。


# エラー発生時の環境

macOS Big Sur 11.3.1
Python 3.8.2
ray 1.4.0


# 事象

rayをインストールしました。

```
pip install ray
```

Pythonコード内でインポートしました。

```
import ray
```

ここでエラーが発生しました。（ファイル名や一部のパスは伏せてあります。）

```
Traceback (most recent call last):
  File "~~~~.py", line 6, in <module>
    import ray
  File "~~~~/.venv/lib/python3.8/site-packages/ray/__init__.py", line 42, in <module>
    import ray._raylet  # noqa: E402
  File "python/ray/_raylet.pyx", line 87, in init ray._raylet
  File "~~~~/.venv/lib/python3.8/site-packages/ray/exceptions.py", line 6, in <module>
    import setproctitle
ImportError: dlopen(~~~~/.venv/lib/python3.8/site-packages/ray/thirdparty_files/setproctitle.cpython-38-darwin.so, 2): Symbol not found: _Py_GetArgcArgv
  Referenced from: ~~~~/.venv/lib/python3.8/site-packages/ray/thirdparty_files/setproctitle.cpython-38-darwin.so
  Expected in: flat namespace
 in ~~~~/.venv/lib/python3.8/site-packages/ray/thirdparty_files/setproctitle.cpython-38-darwin.so
```


# 対処法

## 1. Pythonのバージョンを変更

同様のエラーが以下のIssueに挙がっていたので、それを参考にPythonのバージョンを変更（3.8.2 -> 3.8.5）することにしました。

https://github.com/ray-project/ray/issues/10428

自分はvenvで作成した仮想環境を使用していたので、以下の記事を参考にPythonのバージョンを変更しました。

https://dev.classmethod.jp/articles/change-venv-python-version/

pyenvによるPythonバージョンの変更は以下の記事もご参照ください。

https://qiita.com/twipg/items/75fc9428e4c33ed429c0


## 2. pip install 'ray[default]'

さて、改めて`pip install ray`でインストールし、`import ray`を含むPythonファイルを実行すると、エラーは出ませんでしたが以下のようなFutureWarningが出ました。

```
~~~~/.venv/lib/python3.8/site-packages/ray/autoscaler/_private/cli_logger.py:57: FutureWarning: Not all Ray CLI dependencies were found. In Ray 1.4+, the Ray CLI, autoscaler, and dashboard will only be usable via `pip install 'ray[default]'`. Please update your install command.
  warnings.warn(
```

指示通りに以下のコマンドでインストールし直すと、FutureWarningも出なくなりました。

```
pip install 'ray[default]'
```

以上です。
【Web技術・初学者】HTTP通信とは？使用頻度別メソッド解説

## 目次
* HTTP通信とは
* HTTPメソッドとは
* 使用頻度別HTTPメソッド

## HTTP通信とは
「Hyper Text Transfer Protocol」の略で直訳すると「"ハイパーテキスト"をやり取りする"決まり事"」です。
この通信の登場人物は「クライアント」と「サーバー」という二人で、クライアントがサーバーに要求(リクエスト)してサーバーが要求に応じてファイル等を返す(レスポンス)というやり取りが行われるのが特徴です。
Webサイトではこのルールで通信が行われています。
この「クライアント」というのがWebサイトに訪れる我々(ユーザ)で、「サーバー」はそこからきた要求がどんな情報が欲しいのか判断する必要があります。
その判断材料となるのがHTTPメソッドというものがあり、よく知られているものにGET/POSTメソッドがあります。
この記事はバックエンドエンジニアとして数ヵ月の私が、GET/POST以外のメソッドがどんな時に使えば便利で適切なのかまとめるためのものです。同じような初学者の方等のお役に立てれば幸いです。補足や間違い等あれば指摘していただけると幸いです。

## HTTPメソッドとは
HTTPメソッドは決まったURLに対して適切なメソッドでリクエストすることによって
サーバー上のデータを取得したり更新したりすることができます。

例えば私がいちばん最初に執筆した記事にアクセスをしたい場合は、
```https://qiita.com/Y_M27/items/d4e7a7c6ef022ae6d655```というURLに
**GETメソッド**でリクエストを送信することによって
ページ内のテキスト情報や、画像などの情報が送られてきて
ブラウザがその情報を元にページを表示する、という流れになっています。

##使用頻度別HTTPメソッド
HTTPメソッドは9つあり、用途ごとにまとめていきます。
##### ☆☆☆基本のメソッド！この二つがあれば大体のものはつくれる

* GET ...**"情報が欲しい"**リクエスト
最も使われるメソッドで、画像やページを表示するHTMLなどサーバー上に保存されているデータを要求する際に
私用します。ブラウザのアドレスバーに入力したURLは自動でGETメソッドとしてリクエストされます。

* POST ...**"情報を作製・更新したい"**リクエスト
利用している私たち側からサーバーの情報に何か手を加えたいときに使用するメソッドです。
例えば記事を新規作成したり、編集したり、削除したりとサーバー上のデータに変更を及ぼすことができるメソッドです。

##### ☆☆少し複雑！情報の更新をより細かく設定したい場合(POSTで代用できる)
* PUT ...**"URLを決めて情報を作成・更新したい"**リクエスト
内容はほとんどPOSTと同じですが、例えば新規記事を作製した場合、記事タイトルがその記事のURLになるタイプ
例: ```https://hoge.com/article/<記事のタイトル>```
のようなページを作る際にPOSTと明示的に分けて使われます。

* PATCH ...**"差分だけを更新したい"**リクエスト
記事のタイトルだけ更新、カテゴリだけ更新、、のような情報を丸々上書きするのではなく、
どこをどう修正するかの指示をサーバーに送るメソッドです。

* DELETE ...**"情報を削除したい"**リクエスト
名の通り指定したデータを削除するように要求するメソッドです。

##### ☆使用頻度低め！特殊なケースのリクエスト
* CONNECT ...**"認証したい"**リクエスト
SSL(暗号化)を使った通信を行うhttps通信を行う際、最初にサーバーとのトンネルをつくるリクエスト。
通信内容が暗号化されてしまうとサーバー側も内容を除くことができないのでやり取りが成立しません。
そのため最初に認証を行うことによって、その中でhttpの通信ができるということになっています。

* OPTION ...**"URLが対応しているメソッド一覧が欲しい"**リクエスト
URLに対応するメソッドはサーバー側で設定をします。同じURLでもGETとPOST二つから
リクエストを送ることもできる場合があります。そのURLがどのメソッドに対応しているかを
要求するメソッドです。

* HEAD ...**"情報を削除したい"**リクエスト
GETメソッドとほぼ同じで、HEADはヘッダー情報だけ(中身の画像等はない)を取得するメソッド。
GETメソッドだと大きなデータが返ってきてネットワークの帯域を圧迫してしまう場合、このメソッドを使えば
帯域を圧迫せずにどんなデータが返ってくるかという”メタ情報”は得ることができる。

* TRACE ...**"リクエストをオウム返ししてほしい"**リクエスト
ループバックといいテスト用のメソッドで、自分あてにリクエストメッセージを返すものです。

## 参考文献
『Webを支える技術』山本陽平[著]
PowerAutomateのフローをみんなで管理する

Power Automateで何かしらの業務を自動化する場合、出来上がったフローを他のメンバーと一緒に管理していく必要が出てくると思います。今回はその方法について書いてみます。

# Problem

Power Automateで作成したフローは、そのままでは作成者自身にしか参照更新できないようになっています。

SPOやTeamsのユーザーオペをトリガーにするフローの場合、当該SPOサイトやTeamsチームにアクセスできる任意のユーザーのオペを検知させフローを起動させることはできます。しかしそのフローの内容を閲覧したり変更したりすることは作成者にしかできません。

つまり以下のようにPower Automateの画面でフローの内容を参照更新できるのは、デフォルトの状態ではフロー作成者当人だけです：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/fbfc5f69-4320-706a-3d51-d4ae000cf861.png)

またこのフローを実行する場合、O365のリソースにアクセスするための「接続」はフロー作成者のユーザーで作成されます。

このためフローからメール送信したりSPOリスト更新をしたりするとそのオペは作成者のユーザー名義で実行されます。メール送信であれば、フロー作成者が差出人になるということですね：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/054c16f6-69d9-e161-8a0a-9851eab5ebd1.png)
（「接続」欄にはこのフローがO365のリソースにアクセスする時に使用する「接続」の情報が表示される）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/1e0378c4-8f00-0dfa-c840-db06db80bbdb.png)
（前述の「接続」欄の「編集」をクリックするとどのユーザーで「接続」するかがわかる）

# Solution

まず、フローの参照更新については、すぐ上の画面キャプチャにもある「所有者」欄で、共同管理するユーザーを追加すればOKです。追加されたユーザーにはOutlookでメール通知が飛び、以後このフローを参照したり更新したりすることができるようになります：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/49f314b8-9d02-2867-e3a5-94b855400793.png)

追加したユーザーを削除することもできます（フローを作成したユーザーだけは特権的なポジションにあり削除できません）。


また、「接続」を変更したい場合は、接続を貼り直したいユーザー自身で、以下のようにフローを「名前を付けて保存」（別名で保存）します。すると、このタイミングで接続の貼り直しも行われます：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/588d1062-5147-9d6b-df7d-65fcd327d088.png)

「名前をつけて保存」で作成された（実質的には複製された）新しいフローは、作成直後の状態では「オフ」（実行できない）状態になっています。元のフローを「オフ」に、新しいフローを「オン」にするのをお忘れなく。。
階層の深いところで画面サイズに合わせてoverflow:scrollさせる

# 固定長ヘッダー付きの領域を階層構造にして内側の窓でスクロールしたい

```HTML
<div class="outer">
  <div class="header">aaa</div>
  <div class="content">
    <div class="inner-outer">
      <div class="inner-header">aaa</div>
      <div class="inner-content">
bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb
      </div>
    </div>
  </div>
</div>
```

header、inner-headerのheightは固定長
inner-contentの大きさをウィンドウの残りの高さでスクロールさせたい

```SCSS
html {
  width:100%;
  height:100%;

  body {
    width:100%;
    height:100%;
    margin: 0;

    .outer {
      display: flex;
      flex-direction: column;
      height:100%;

      .header {
        flex-grow: 0;
      }

      .content {
        flex-grow: 1;
        overflow-y: hidden;

        .inner-outer {
          display: flex;
          flex-direction: column;
          height: 100%;

          .inner-header {
            flex-grow: 0;
          }

          .inner-content {
            flex-grow: 1;
            overflow-y: scroll;
          }
        }
      }
    }
  }
}
```

flex-grow と overflow: hidden; を使うとうまくいく。
【SQL】内部結合（ INNER JOIN ）とは

#内部結合（ INNER JOIN ）とは
互いのテーブルに存在するデータのみを結合
※ON ( 条件文 )で指定したデータがあるかないか

##構文
```sql
SELECT      出力テーブル列名
FROM        対象テーブル１
INNER JOIN  対象テーブル２
ON          テーブル１.列名 = テーブル２.列名;
```
##実際にやってみる
__name テーブル__

|id  |name  |code  |
|---|---|---|
|1  |うさぎ  |1  |
|2  |へび  |2  |
|3  |ぱんだ  |1  |
|4  |らいおん  |3  |

__info テーブル__

|code  |info  |
|---|---|---|
|1  |かわいい  |
|2  |かっこいい  |

```sql
SELECT name.id,
       name.name,
       info.code,
       info.info
FROM name
INNER JOIN info
ON name.code = info.code;
```
###実行結果

|id  |name  |code  |info  |
|---|---|---|---|
|1  |うさぎ  |1  |かわいい  |
|2  |へび  |2  |かっこいい  |
|3  |ぱんだ  |1  |かわいい  |

らいおんの name.code と一致するデータが info.code に存在しなかった為、らいおんは結合されない
figmaで画面設計を書く際の基礎的な使い方

figmaで画面設計図、画面遷移図を描いたので、その時に必要だと感じた操作をまとめます。
2021年6月にmacで作成しました。

# 図形の書き方

![スクリーンショット 2021-06-11 9.50.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1628394/efd519f6-9be9-94b1-ef7a-69bbb830b08c.png)

０　まずページを作成します
１　command+Fでフレームを作ります。右からdesktop,mac等大きさを選択することもできます。command+Rで四角を作れます
２　fillで色を変えられます。その下のstrokeで枠線の太さを設定できます。
３　角を丸くできます。
４　command+Tでテキストボックスを挿入できます。shiftを押しながら要素を複数選択してcommand+Gでグループ化できます。
５　command+Oで丸を作れます。shiftを押しながらサイズ調整をすると、縦と横が同じに設定できます。
６　親要素に対してのオブジェクトの位置を設定できます。
![スクリーンショット 2021-06-11 10.59.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1628394/3d4eafbb-c7ee-1cd1-5154-021eade96c93.png)
７　layout gridで縦横に分割線を入れられます。格子状に入れることも可能です。
![スクリーンショット 2021-06-11 11.10.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1628394/1e7c88f7-767d-2ace-6947-168e3c9e3ee5.png)

８　要素をコンポーネント化できます。コンポーネント化したものを複製し、親要素に変更を加えると全ての小要素に変更が反映されます。
９　グループ化したものをauto layoutすると、例えば枠線の中の文字を追加しても自動で枠線が広がるようになります。

## 最後に
自分が必要だと思ったことを簡潔に書いたつもりですが、詳しく知りたい方はyoutubeにfigmaの使い方を丁寧に解説してくれている５０分くらいの動画があったので、それを参考にすると良いと思います。