OmniAICreator/Qiita-1.07M huggingface dataset:
PageSpeed Insightsで指摘されがちな改善提案と対策について

この記事は ウェブクルー Advent Calendar 2022 21日目の記事です。
昨日は @ayuko902ayuko さんの「[参考になる！タメになる！パワポデザイン術 おすすめアカウント3選](https://qiita.com/ayuko902ayuko/items/75b445f633a8fe5652e3)」でした。

PageSpeed Insightsで指摘されがちな改善提案とそれらの対策について簡単にまとめてみました。
既にPageSpeed Insightsを使ってサイト改善に取り組んでいる方にとっては
基礎的な内容かとは思いますが、ご了承いただけると幸いです。

## そもそもPageSpeed Insightsとは
[PageSpeed Insights](https://pagespeed.web.dev/)は、<b>WEBページの読み込み速度をスコアで表示してくれるGoogleのツール</b>です。
![PageSpeed-Insights (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321231/ffb40ac6-b750-7799-d8f7-829f26f187f7.png)
ページ上部の入力欄にスコアを表示させたいページのURLを入力し「分析」ボタンをクリックすると
モバイル版・PC版の各スコアが100点満点の総合スコアで表示されます。
![PageSpeed-Insights-(1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321231/590a89d9-6064-66fc-38b1-e29a5c541f80.png)
また、「改善できる項目」として<b>スコアを向上させるための具体的な改善策を提案</b>してくれます。
![PageSpeed-Insights (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321231/76750061-963a-a436-e62a-9d9e44e0bdc2.png)
PageSpeed Insightsのスコア向上はCore Web Vitals（Googleが提唱したSEO評価に影響ある指標）の
改善に大きく関わるので、提案された改善策はなるべく解決しておきたいところです。

本記事では「改善できる項目」で指摘されがちな内容をいくつかご紹介していきます。

## 指摘されがちな改善提案と対策
#### ①次世代フォーマットでの画像の配信
Webページに表示される画像の形式はPNGやJPGを使いがちですが、
それらはダウンロード時間やデータ消費量に負荷がかかりやすく、読み込み速度低下に繋がります。

##### 対策
<b>画像形式をWebPに変換する</b>ことで解決できることが多いです。
WebPはPNGやJPEGより圧縮率が高いため、ダウンロード時間やデータ消費量が抑えることができます。
IEは非対応ですが、Chrome、Firefox、Edge、Safariは対応しているので
サイトがIEをサポートしていなければガンガンWebPを使っていきたいところです。
[こちら](https://saruwakakun.com/tools/png-jpeg-to-webp/)などでPNGやJPGの画像をWebPに変換することができます。

#### ②オフスクリーン画像の遅延読み込み
「<b>画面内に表示されている画像のみを先に読み込むようにしましょう</b>」という提案です。
何も対策していない状態だと、Webページ内の全ての画像を一度に読み込むこととなり
表示速度低下に繋がってしまうわけです。

##### 対策
指摘を受けた画像のimgタグに`loading="lazy"`を付与すれば解決します。
こうすることで、画面内に該当画像が表示されたタイミングで読み込まれるようになります。

```
<img src="hoge.jpn" alt="画像だよ" loading="lazy">
```
#### ③適切なサイズの画像
不必要に縦横のピクセルが大きい画像を使用していると、この指摘を受けます。
画像はただでさえデータ量が多いので、<b>ピクセル数が大きければ大きいほど
表示速度低下に繋がってしまう</b>のです。

##### 対策
これは指摘通り画像を適切なサイズに変更することで解決できるのですが
ここで言う適切なサイズとは「<b>デバイスの持つ画面幅に収まるサイズ</b>」のことになります。
例えばスマホの画面幅が400pxの場合、500pxの画像を使用するとこの指摘を受けてしまうので、
400px以内に調整する必要があります。

## 最後に
簡単にですが、よくある改善提案をピックアップしてみました。
他にも「<b>使用していないJavaScriptを削減してください</b>」「<b>画像要素にwidthとheightを指定してください</b>」などなどあらゆる視点で指摘を受け、解決に苦労する項目もあるのですが
今回挙げた項目は比較的容易に対応できる内容なので、もしご担当されているサイトが
未対応でしたら是非対応してみることをオススメします。

明日は @yusuke-kobayashi0117 さんの記事です。
よろしくお願いします！
Nuxt3で.envを使用する方法

# はじめに

Nuxt3で.envを使う方法がいろいろな記事に書いてあり、
どれが本当に動くのか分からなくなったため、メモとして残します。

# Nuxt3導入

ここでは省略します。


# .envの反映方法


### 1. .envをルートディレクトリに作成します。

ルートディレクトリとは`package.json`とかがあるディレクトリですね

```env:.env
TEST='これはテストです。'
```

### 2. nuxt.config.tsを修正

`runtimeConfig`を使用する。

```typescript
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      test: process.env.TEST
    }
  }
})
```

### 3. 呼び出す。

`useRuntimeConfig`を使用すると、`nuxt.config.ts`で設定した変数を呼び出すことができます。

```vue:index.vue
<script setup lang="ts">
  const config = useRuntimeConfig();
</script>

<template>
  {{ config.public.test }}
</template>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/fd637d4b-4d7e-1174-37d2-66bcf1c1b42e.png)

ちゃんと呼び出せました。
Ae 簡単なテキストアニメーション　ーMerry Christmas🎄ー

# はじめに
クリスマスの動画を制作することになったのですが、日常使いできる簡単な手書き風テキストアニメーションなので残しておきたいと思います。初めてAeを使用する人もわかりやすいように一からわかりやすく書いているので、みなさん試してみてください😆
***
__基本的な操作① 新規コンポジションの設定__
Aeの新規作成を押すと新規プロジェクトの画面になります。まず新規コンポジションの設定をします。
![スクリーンショット 2022-12-19 18.38.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3057278/c73f3e9f-1ac1-dfe9-e6ce-6e1d476c1f85.png)
今回は短いテキストアニメーションなので、デュレーションを8に設定しました。
***

__基本的な操作② テキスト設定__
右側のパネルにある「文字」で書体の選択をします。
今回は手書き風のアニメーションを制作するので、筆記体の"Snell Roundhand"を使用しました。
文字の大きさや太さ、幅の調整は右側のパネルで行います。
![スクリーンショット 2022-12-19 19.00.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3057278/197b7a2c-d199-c3e7-8dd0-d5ff2c106562.png)
文字の位置調整は右側のパネルの「整列」で調整できますが、左上赤丸の手のマークに変えて文字を移動することもできます。

:::note warn
右側のパネル状に「文字」がない場合
[「文字」パネルを元に戻す方法](https://www.too.com/support/faq/adobe/after_effects/24243.html)
:::
***
__テキストをアニメーションにするために__
今回は文字全体が移送するのではなく、線が書かれていくアニメーションになります。文字に動きを出すためには文字をなぞり、そのなぞった線に沿ってテキストが出てくるようにします。
上のツールバーにあるペンツールを使用し、線を作っていきます。
![スクリーンショット 2022-12-19 19.19.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3057278/eef3aad9-ddd3-2a61-d6e8-3c1aaeab7073.png)

:::note warn

特に文字の太い部分は線が中心を通るようにすると綺麗な形と動きに仕上がります
:::

全てなぞり終わったら線を編集できるようにします。
エフェクト＞描画＞線
![スクリーンショット 2022-12-19 19.51.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3057278/8eb4837b-1442-7453-8153-303445f125ed.png)
左側のパネルで、ブラシのサイズを変えていきます。適切なブラシのサイズは、書いた線より少しカラーがはみ出るくらいです。
![スクリーンショット 2022-12-19 19.54.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3057278/b2689f88-3048-8140-570d-d68f27a7516e.png)
***

__動かそう!__
いよいよ文字をアニメーションにする作業に入ります。
まず、インジゲーター0の位置で左パネルの「終了」を0にし、キーフレームを打ちます。
![スクリーンショット 2022-12-19 19.55.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3057278/43297d7c-6638-fac6-bd95-dae22eb1acff.png)
同様にして、インジゲーター2の位置で終了を100にし、キーフレームを打ちます。
そうすると。。。
![Merry Christmas Simple.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3057278/bbf8cd0e-0c74-0eb1-ea06-1b234d4474b4.gif)
このように手書きのようなテキストアニメーションができました！！

これを応用すると。。。
![BG_AdobeExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3057278/15633fa2-7374-7571-fa49-593b11a0ad16.gif)
このようになります！！

# 最後に
最後まで読んでいただきありがとうございます。
今回は初歩的なテキストアニメーションを作りました。このテキストアニメーションは汎用性の高い方法なので、皆様の作品に応用できるといいなと思います。
herokuデプロイでcouldn't find repositoryが出た時の対処法

<h1>エラー</h1>

```Bash
remote: !	No such app as mysterious-dusk-30075.
fatal: repository 'https://git.heroku.com/mysterious-dusk-30075.git/' not found
```

<h1>原因</h1>
herokuアプリを一度デプロイした後に、アプリを削除してしまったこと。

<h1>解決策</h1>
<h4>・もう一度herokuアプリを作って、リモートリポジトリの設定をしなおす。</h4>

```Bash
git remote set-url heroku <リポジトリ名>
git remote set-url heroku https://git.heroku.com/safe-gorge-41567.git
```
これでもう一度デプロイすれば、できた。

<h1>参考サイト</h1>

[【Heroku】デプロイ（fatal: repository 'app_url' not found）](https://qiita.com/TakaKun/items/61a455142eb5e01b5d9a)
デザイナーになって初めてロゴコンペに応募したときの話


# はじめに

はじめまして！ WebCrewでデザイナーをしている @hiro19840624 です。

経歴としてはグラフィックデザイナー（マンション広告）→ Tシャツデザイナー（イベント用）→ 事業会社デザイナー（現職）とデザインの仕事を20年近く、渡り歩いてきました。


# 目標の設定
デザイナーになって2年目のころ、目標に掲げたのが〈コンペに応募して入賞を果たす〉ことでした。
数ある中から選んだのが国土交通省が主催する「健全な水循環」に関するロゴマークのコンペ。
理由は自分のクリエイティブで国がやっている取り組みに貢献できたら嬉しいとおもったからです。


## 「健全な水循環」に関するロゴマーク募集
タイトルを見てテーマが難しそうと感じましたが、どういうことかというと、、

「流域を中心とした一連の水の流れの過程のおいて、人間社会の営みと環境の保全に果たす水の機能が、適切なバランスの下に、ともに確保されている状態」らしいですがちょっと理解に苦しみました。

カンタンに言うと「水の恩恵、水への親近感、水の大切さなどをイメージさせ、「健全な水循環」を象徴するもの」がテーマ。


# まずは連想されるものをテキストに起こしてみる
・水滴
・雨
・植物
・土
・蛇口
・無限ループ
・水が繰り返される
・生きていくうえで必要
・毎日の生活に欠かせない
・感謝の気持ち

# ピックアップして組み合わせていく
いくつか組み合わせてみて図形として成り立つものを模索してみた結果
「水滴＋繰り返される無限ループ」がイメージとして浮かび、頭のなかでラフが描けたので
これを図案化することにしました。


今となっては当時のラフは残っていないのでテキストで説明します。
水滴＝円で表現
繰り返される無限ループ＝infinity/∞

 
➀ 円をinfinityマークに沿って羅列することで水が循環されていることを表現する。
➁ 円の色味に変化をつけて循環による水の移り変わりを表現する。
➂ 円の強弱をつけて遠近感をあたえる。
　┗循環の勢いと水の流れスムースさを表現。


# 作品と結果
![watar_logo_20150529_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981429/d39527b4-cd92-e2d2-2e00-18591ba80035.jpeg)

応募総数1,457作品の中から審査の結果、最優秀賞1編、優秀賞4編が決定されました。
そのなかで優秀賞の一人に選ばれて目標を達成しました。
残念ながら実際に使われることはなかったですが自分のつくったものが主催者に伝わったことでロゴを好きなるきっかけにもなりました。

# おわりに
カンタンではありましたが応募から結果までを書かせていただきました。

日常生活のなかで何かしらのマークや形を目にするとおもいますが「△△△」って「〇〇〇」に似ている。
そんな些細な気づきが連想する材料のストックになり、ひらめきにつながります。

皆さんもぜひ、連想の訓練をしてみてはどうでしょうか。
素晴らしいアイディアにたどり着くかもしれません。
一部一致する文字を指定して、指定フォルダへコピペするbatファイル

<h1>ファイル名が一部一致する物を指定フォルダからコピペして移動するbatファイル</h1>


~~~
@echo off
set /p string="収集するファイル名に含まれる文字を入力してください："
set /p folder="収集対象となるフォルダのパスを入力してください："
set /p movefolder="コピー先のファイルパスを入力してください："
 
rem 指定文字のフォルダを作成
if not exist %string% mkdir %string%
 
rem 収集対象フォルダへ移動
cd %folder%
 
rem 指定文字を含むファイルを探し収集する
for /r %%i in (*%string%*.*) do  (
  copy /y %%i %movefolder%
)

~~~
MacでNode.jsをパッケージ化して配布

# 技術要素
- Mac(M1)
- Node.js
- electron-packager

# パッケージ化
これは情報はそれなりにありますが、軽く載せておきます。
ちなみにはじめは[nexe](https://www.npmjs.com/package/nexe)でやってたんですが、M1 Macだからかパッケージ化は成功しても実行ができなかったので[electron-packager](https://www.npmjs.com/package/electron-packager)を利用しています。

```package.json
{
  "name": "application-name",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "electron-packager ."
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    :
    :
    :
  },
  "devDependencies": {
    "electron": "^22.0.0"
  }
}
```
`electron-packager`の実行には[electron](https://www.npmjs.com/package/electron)が必要です。
コマンド実行時の引数でバージョン指定すればインストールは不要みたいですが、今回はインストールして試しました。

buildを実行すれば`packge.json`で指定したファイルをパッケージ化してくれます。
```
npm run build
```

# 配布
本題。
なかなか配布する情報がなかったので色々試行した結果を残そうと思います。
今回はコマンド実行するファイルの配布手順です。

1. 生成されたappを圧縮して配布します。
1. 解凍します。（解凍元と解凍先は環境に併せてください。）
    ```
    unzip -q ~/Downloads/application-name.app.zip -d ~/tools
    ```
1. 拡張属性を削除します。（これをしないと開発元不明で実行できません・・・）
    ```
    xattr -rc ~/tools/application-name.app 
    ```
1. 実行できるか確認します。
    ```
    ~/tools/application-name.app/Contents/MacOS/application-name
    ```
1. エイリアスを設定します。（これ以降の手順は任意なのでやらなくてもOKです）
    ```
    sudo echo "alias hoge='~/tools/application-name.app/Contents/MacOS/application-name'" >> ~/.zshrc
    source ~/.zshrc
    ```
1. 実行できるか確認します。
    ```
    hoge
    ```

# さいごに
node.jsでちょっとしたツールを作成した時などにプロジェクトごと配布して利用するのはなかなか使いづらいなーと思い、パッケージ化から配布まで調査してみました。
`nexe`でコケまくったので時間かかりすぎた・・・
railsのテストコードを少し読んでみた

```Bash
rails g controller StaticPages index about
```
上記のコマンドを実行すると、以下のテストファイルが生成されます。

```Ruby:static_pages_controller_test.rb
require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest
  test "should get index" do
    get static_pages_index_url #static_pages/indexをリクエスト
    assert_response :success #ステータスコードが200~299
  end

  test "should get about" do
    get static_pages_about_url #static_pages/aboutをリクエスト
    assert_response :success
  end
```

デフォルトのテストとして、生成したindexページとaboutページにアクセスしてステータスコードが200~299であるかどうかをテストするコードが生成されます。

また以下コードも生成される。

```Ruby:routes.rb
Rails.application.routes.draw do
  get 'static_pages/index'
  get 'static_pages/about'
end
```

デフォルトのルーティングがテストコードに書かれているものと同じものになるので、rails generate controller,,,を行った後のテストはGreenになる。


<h2>ステータスコードおさらい</h2>

<ul>
<li>200→リクエストが成功(メソッドによって成功の意味は異なる。)</li>
<li>300→リクエストに対して複数のレスポンスがある。</li>
<li>404→サーバがリクエストされたリソースを発見できなかった。</li>
<li>500→サーバ側で処理方法がわからない事態になっている。</li>
</ul>

[assert_responseについて](https://railsdoc.com/page/assert_response)
Nerves合同ハンズオンの裏側

<!-- 昨日は @myasu さんの [なんか書くけぇ]() でした！ -->


2022年10月22日（土）にNervesJPとkochi.ex合同でNervesハンズオンする回！を合同で開催したので、どのような準備をしてたのかを書いていきます！


# イベント概要
オンライン参加の人はNervesJPへ参加、現地参加の人はkochi.exに参加、というびよ〜んな構成となりました。kochi.exに参加してくれた人がモクモクする様子を配信して（参加者の画面の共有はせず、あくまでモクモクする姿を配信）、みんなで静かに見守るというなんとも不思議な空気感のイベントでした。

- [NervesJP #30 LivebookでNervesハンズオン！する回](https://nerves-jp.connpass.com/event/261408/) 
- [kochi.ex #6 Livebook で Nerves ハンズオン！](https://kochi-ex.connpass.com/event/261486/) 

オンライン参加の人の感想はよくわかってませんが、@torifukukaiou さんが神速のまとめ記事をアップしてくれているので、参考になるかもです。

https://qiita.com/torifukukaiou/items/78dd9c97eb414d672479


# 当日までの準備編

ここからは残っている記録ベースで時系列につらつらとどのようなことをしていたのか書いていきます。

## 2022年9月24日
- connpassのkochi.ex告知文（案）を作成開始

## 2022年9月26日
- connpassのkochi.ex告知文を公開

## 2022年9月27日
- こんなやり取りが
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51020/a1e9a24b-8f91-a3d7-7080-bc8bffd87d0a.png)

## 2022年10月17日
- イベントまで1週間を切ったってことで、これまで何度か実施した鍛え抜かれた各種ドキュメントを ~~パクり~~ 参考に、当日向けのドキュメントを作成　※@pojiro さん、 @myasu さん、@takasehideki さんに大感謝 :raised_hands:
- ここでようやく機材の確認開始
    - 現地参加が10人までだったので機材は10を目安に準備
```
Raspberry Pi 4 (4G)
Grove Base HAT
ACアダプタ
Micro SD
Grove LED
Grove aht20（温湿度センサー）
Grove Button
```
- 機材の確認スライドには高知らしく美味しそうなカツオのたたきのイラストを配置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51020/3febf74a-46f3-a97f-8d31-b4dcf91e8520.png)

## 2022年10月18〜20日のどこか
- きっとこのあたりでNervesのイメージをSDカードに焼いていたはず…記録＆記憶にない＼(^o^)／

## 2022年10月22日　イベント当日
- イベント中のおやつを調達
- kochi.exな人たちと景気づけのランチでハンバーグ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51020/5033f437-8824-c58f-444c-6377625f8e41.png)
- 現地に到着して、あわててスライドを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51020/6d428fb0-2c6c-bcf4-7b9f-dea6b2facc18.png)
- Nerves Livebookハンズオン！
  - 特にトラブルもなく、順調にハンズオンしていただきました！（きっと）
- 0次会！

https://twitter.com/nishiuchikazuma/status/1583728332062875651?s=20&t=9NzCIMOXX9yJTNA5pqaFrw

- 1次会！　…の一部の写真
  - ちょうどこの日、お店がオープン初日で初めての予約だったそう :beers: 

https://twitter.com/nishiuchikazuma/status/1583733031755337728?s=20&t=9NzCIMOXX9yJTNA5pqaFrw

# まとめ
…とまぁ、Elixirのコードゼロでまとめまできてしまいました。ハンズオンのElixir成分は @32hero さんがまとめてくれると思うので丸投げします。

しばらくQiitaに投稿できてなかったので、来年は月イチペースでElixir/Nervesなことを投稿できればなぁと意思弱めな目標をたてて終わりにしたいと思います。それではみなさん、良いお年を〜 :tiger: → :rabbit:

<!-- 明日は @kikuyuta さんの [なんか書きます]（） です。お楽しみに！！ -->
【紹介】非機能要件を定義したい（MBSE導入編）

# 目次
- 初めに
- 非機能要件とは
- MBSE(Model Based System Engineering)とは
- 性能要求の要件化に使うと何がうれしいか？
- 振る舞いとは？
- チューニング要素（ロバストネス達成、トレードオフ解消、コスト低減）を要件に取り込むためには？
- 今後の予定
- 最後に
- 参考資料

# 初めに
- 組み込みシステムや制御システムなどへの性能要求を要件化するための
アプローチを探している人向けの記事です
- アプローチの候補としてMBSEを採用した場合に見込めるメリットと、適用時の課題を簡単にまとめています
 
# 非機能要件とは
システムが目的を達成するために、各機能が持っていなくてはならない性能や
消費可能なコストの上限などを指します。
内訳の項目として以下などが挙げられます。（但し文献毎に項目のばらつきがあります）
- 信頼性：　システムの壊れにくさ
- 可用性：　システムが稼働を継続する能力
- 保守性：　システムが自身の機能や性能を維持する能力
- 保全性（一貫性）：　システム内処理の相互作用における、欠損や不整合の少なさ　
- 完全性：　システム内で入出力される情報に損失がない事や正確さを維持する能力
- 安全性：　システムが人に対して危害や資産への損傷を与えない能力

※RASISと呼ばれる事もあり、以下の対応となります。
　Rは「Reliability」で信頼性、
　Aは「Availability」で可用性、
　Sは「Serviceability」で保守性、
　Iは「Integrity」で保全性、
　Sは「Security」で機密性（完全性）
を表します。

# MBSE(Model Based System Engineering)とは
MBSEは、システムの達成目標やシステムへの制約を要求・設計へと段階的・階層的に変換・分解し、
まず要素の製作を行い、次にこれらを段階的・階層的に統合し運用につなげることで、
システム要件と各機能および機能への制約を紐づけながらシステムを設計する手法の事です。

MBSEではシステムのアーキテクチャを
「構造図」「振る舞い図」「要求図」「パラメトリック（制約）図」の4つの構造、
11の図式（ダイアグラム）で表現する事で
- システムの要求を実現する機能の構成
- 機能間の相互作用
- 機能の動作に課される制約

を明示する事を目指しています。

# 性能要求の要件化に使うと何がうれしいか？
設計のフロントローディングなどに用いる事ができそうです。
- 要素技術者（制御設計者、組み込み系技術者、信号処理技術者、機械学習エンジニアなど）
がノウハウ的に解決してきた技術課題を、早い段階でシステム要件へ投影する事ができる
- 各機能への制約情報は、性能課題の発生しうる機能を特定するために使える
- アクテビティ図は、各機能間の相互作用を明示する手段として使える

# 振る舞いとは？
MBSEでは、システム内の機能間の相互作用を指します。
（信号処理や制御や機械学習分野で言及される『振る舞い』と定義が異なる点に注意）

# 性能チューニング要素（ロバストネス達成、トレードオフ解消、コスト低減）を要件に取り込むためには？
組み込みシステムや制御システムや機械学習システムなど、物理事象との相互作用を行うシステムで
性能チューニングを行う場合、モデリング図のアクターとして外部環境を登場させる必要があります。

しかしながらMBSEは要求の達成状況を確認する事をモデリングの目的
にしているため、
システム内での相互作用の表現に重きを置いており、
外部の物理環境は実体として機能への制約として反映されることが多い様です。

そこで、以下の方法については引き続き調査や検討を試みたいと考えています。
- 外部環境とシステムとの間の相互作用が引き起こす異常事象（＝制約違反）
の表現手段を用意したい
（例：　車のスピンやスリップ、機械振動の予期しない増幅）
- 外部環境とシステムとの間の相互作用がシステム内で伝搬する過程を時系列上で
表現する手段を用意したい
（例：　時間粒度の明示された補助図をシーケンス図/状態遷移図へ追加）



# 今後の予定
- MBSEを使って簡単な例で非機能要件を定義し、結果を記事にしたいと思います
- MBSEを機械学習へ適用して非機能要件を定義するまでを記事にしたいと思います
- MBSE手法で摘出しやすい性能要件や制約間の競合（トレードオフ）などの例を
紹介したいと思います

# 最後に
弊社では、自動車・機械産業のお客様に向けたソリューション開発エンジニアを絶賛採用中（2022/12時点）です :muscle: :muscle:
https://www.wantedly.com/projects/1181162

# 参考資料
・プロジェクトの成否を決める非機能要件を定義するには（sansan社）
　https://buildersbox.corp-sansan.com/entry/2020/04/27/110000#fn-b838e264
・機械学習デザインパターン（2020, メルカリ社）
　https://mercari.github.io/ml-system-design-pattern/README_ja.html
・機械学習システムが満たすべき要件について
　https://qiita.com/calderarie/items/818c1f93e9a809a9e098
・AIプロダクト品質保証ガイドライン
　(Guideline for Quality Assurance of AI-based products and services)
　http://www.qa4ai.jp/download/
・MBSE 衛星開発を成功に導く（JAXA）
　https://www.aero.jaxa.jp/spsite/rensai/column/33.html
シェルスクリプトを書く時に気を付けていること

株式会社サムザップで SRE をしているれおすけです。[サムザップ AdventCalendar 2022](https://qiita.com/advent-calendar/2022/sumzap) の22日目の記事です。
昨日の記事は @shintsu_takamasa さんの[「Unity開発アプリでのGooglePlayConsole NativeDebugSymbols登録について」](https://qiita.com/shintsu_takamasa/items/6f7ed590101ed071307b)でした。

# 概要
ふと昔の同僚と飲みながら６日目に投稿した記事について話していた時に、シェルスクリプト書く時にシバンに何を書くかという話題になりました。「いやいやいや、シバンって何？」、「お前のシバン意味が分からん」など盛り上がって楽しかったのですが... 自分の考えを知ってもらうのは大事だなと改めて思いました。
POSIX準拠に対する考え方、可読性と効率のバランス、シェルで作る意義は？など、盛り上がった話題の中からいくつか本記事にまとめてみました。冬の寒い日に効率よく寝られる記事の一つになりそうなので、ゆっくりと読み進めてもらえればと思います。

# 考えていること
## シバンは汎用性を高めて書く
シバン（shebang）は hash bang の略で、インタプリタを指定するためのものです。# は縦２本、横２本切り刻むイメージのハッシュ（ハッシュドポテトのハッシュ）と！マークで銃声のバン！と教わりました。本当かどうか定かではないし、シェバンと呼ぶ派もいます。他にも諸説あり、参考文献にまとめられていた記事を載せたので興味がある人は読んでください。

さて、シバンが `#!/bin/sh` で始まるシェルスクリプトを見る機会が多いのではないでしょうか？
実際に中身を見てみると Bash固有の機能が使われていたり（一部のOSやOSの特定バージョンで `/bin/sh` が `/bin/bash` へのリンクなので問題なく動く場合がある）、`/bin/`配下に `bash` がなかったりして、特定の環境限定なら動くけどクロスプラットフォームで動かないこともあります。
ゲーム業界では Unity でクライアント側を実装することもあり、iOS端末向けに MacOS でアプリケーションをビルドしなくてはなりません。サウンド系を Windows でビルドする人もいます。

`bash`がどのようにインストールされ、どのバージョンが使用しているかなど気にしたらキリがないのですが、ツールはどこで使われてるか分からないのでできるだけ多くの環境をカバーしたいので、その度に書き換えるのは大変ですよね。
そこで、毎回シェルスクリプトを書く際はシバンを `#!/usr/bin/env bash` にしています。そして堂々と固有の機能である配列変数や `[[ ]]`による便利な比較を使います。

## 効率と可読性のバランスを判断する基準を決めておく
シェルスクリプトは効率的に書こうとすると読みにくくなるなと個人的に思っています。USP研究所の方々が広めたユニケージ開発は、一時期、私のメインタスクでした（今の会社ではありません）。ユニケージ開発で成果物となるシェルスクリプトは、ワンプログラムワンフローの原則を守り、関数化も基本的に禁止されています。改修依頼が来るたびにスクリプトを実行しながら、一個一個地道に確認していました（隣には見ただけで内容を全て理解するプロフェッショナルがいたので、私の能力が低かっただけかもしれません）。

共有するツールの場合はやはりきちんと判断基準を決めておくのが大事だと思います。
私が考える時に判断基準になるのは、以下の3点です。
1. どう使われるのか（時間制約やパフォーマンス重視なのか、モック的に最速で実装したいのか）
1. 誰が使うのか（ユニケージ開発チームだけか、社内でツールとして共有するのか）
1. どこで実行されるのか（特定の環境だけなのか、他でも実行されるのか、流用される可能性があるか）


## 短所を考えた上で使う
コマンドを列挙するだけのように思われるシェルスクリプトですが、意外と弱点というか短所が多いです。数分で考えただけでも、以下の3点がありました。

1. シバンで指定できるのはインタプリタのみ（細かいバージョンや環境はシェルスクリプト内で分岐なり、処理をする必要がある）
1. マルチプラットフォームの互換性を担保しようとすると苦労する（シェルのバージョンは小さな違いなことが多いが、呼び出している外部コマンドのオプションやバージョンの違いがある場合もある）
1. ループ内でパイプを多用すると実行が遅くなる（パイプを使用するとフォークしてサブシェルが作られるので遅くなる。）

## 

# まとめと感想
今まで書いたことを３行でまとめるとこんな感じです。
- 異なる環境で実行されるかもしれない場合、汎用性を高めたシバンを使おう！
- 効率を重視した自分だけが使うツールではない限り、使う側に合わせた（可読性を少し高めたり、効率を優先したりした）書き方を心がけよう。
- 短所を把握した上でシェルを選択して書こう。

なんとなくシバンを書いていた人もいるのではないでしょうか？ 6日目の記事でモック的なツールを提供した記事を投稿しましたが、その裏でいろいろと考えて作成しています。
まだまだ、学ぶことも多く、奥深いシェルスクリプト。これから真面目に取り組もうとする人、寒くてなかなか寝られない人の手助けになれば嬉しいです。
Advent Calendar もあとわずかですね。寂しいようなホッとしたようなそんな気分です。

# 参考文献
1. [「#!」 (SheBang)の語源を徹底追求 「切り刻んでビックリ」](https://karasuyamatengu.hatenadiary.org/entry/20110217/1297960228)
1.  [ POSIX準拠 とは本当はどういうことなのか？「POSIXで規定されたものだけを使う」ではありません](https://qiita.com/ko1nksm/items/08228276ce9335592989)
1.  [シェルスクリプト リファクタリング ～遅いシェルスクリプトが供養されてたので蘇生して256倍に高速化させました～](https://qiita.com/ko1nksm/items/fbefb4da7e54e8a29a25)
AWS SAA-C03日本語で勉強英語で受験合格記

## 背景
- 業務中でAWSを使うとはいえ、実際に利用しているサービスは数個しかありません。
大半のAWSサービスは名前を聞いた程度で、特徴やサービスの組み合わせといったアーキテクチャ設計に関して知識不足を気付き勉強したくなりました。
- マネージャーの紹介で、社内キャンペーンを知り、奨励金当てに受験してみました。
（もらったお金でAirPods 3を買いました）
- 勉強スパンは1ヶ月、業務時間外でした（平日1時間休暇2，3時間合計約40時間）。

### なぜ日本語で勉強したか
- Amazonで買えるテキストはほぼ日本語
- 会社で契約しているUdemy講座と練習問題はほとんど日本語
- 個人で購入したWEB問題集が日本語
### なぜ英語で受験したか
- 英語は30分試験時間延長してもらえる
- 翻訳がいまいち、日本語の表現が回りくどい
- 自分自身は日本語も英語もネイティブではないので、理解しやすいほうを選ぶ

## 勉強資料
### テキスト
- Udemy講座のスライドのみ（説明とハンズオンのビデオを見る時間がなかった）
[最速で学ぶ - AWS認定ソリューションアーキテクトアソシエイト 入門完全攻略コース](https://works-hijp.udemy.com/aws-certified-solutions-architect-associate-jp)
試験に出そうなところを箇条書きと図表でまとめられて、効率的AWSサービスを勉強することができました。
自分はギリギリ合格で良いので、高得点狙う場合は、やはりテキストの本を1冊でもおすすめです。
ハンズオンも飛ばさずに手を動かすのが長く覚えると思いますが、「合格」だけを目標ならスライドで十分です。

### Udemy練習問題
- [【2022年版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）](https://works-hijp.udemy.com/aws-knan)
5回分まで1回解いて、解釈を読んでいました。
すぐ忘れるから、本当は最低2週を解くようにおすすめです。
本番と同じ感覚で65問を一気に解くことを慣れることが第一目的でした。

### WEB問題集
https://techstock.jp/
実費になるので試験前10日間までためらっていました。
やはりUdemyの模擬試験は720点までにいかず心折れそうなので癒すために購入しました。
1セット7問で気軽に解けて、1問ずつ即場で正解不正解わかるところが良かったです。

### AWS模擬問題
UIに親しむつもりで受けてみたのですが、本番はやはりUI違うのでご注意ください。
難易度は本番よりやや簡単です。

## 本番試験
### 試験会場を予約
自宅でも受験可能ですけど、猫多頭いるのでネットワークトラブルリスク大きいです。
キャンセルは1日前なら全額返金みたいで、リスケは2回までです。
### 30分前から入場可能
試験スケジュールの30分前から書類記入と顔写真撮影したら、ロッカーにコートかけたりして、指定席まで案内されます。
### 受験
- ホワイトボードとペン2本もらえます。
個人的書き込みの習慣ないため使わなかったです。
- カウントダウンを気になって焦って解いたが、65問終わって時間見たら90分残ってしまいました。
- 迷う選択肢は直感に任せてください。考えすぎは禁物です。
時間たっぷり残ったせいでフラグの問題をいつくか変えたがほぼ全滅でした。
あとで調べてみて最初に選んだほうが正解みたいです。
落ち着いてゆっくり解くのをおすすめです。
- やはり英語のほうはストレートで意図を読みやすいです。
- 65問中に15問採点対象にならない、異常に難しい問題はあまり心配しなくてよさそう
- その場で合否でないです。

### 結果
帰宅して夕方19時頃、試験履歴のページに追記されました。
「合格」を見た瞬間ほっとしました。
ちなみに、大体当日夕方結果発表のようです。
自分は午後14時～16時台受験したので、数時間待つことで済んでましたが、
午前中受験して夕方まだモヤモヤしないといけないのは辛いと考える方は午後受験で良いでしょう。

## 最後に
難しい試験ではありませんが、真面目に勉強しないと落ちる試験だと思います。
実務経験があっても最低20時間を確保して準備して無難でしょう。
SAAC03は努力半分運半分といいますが、十分に努力かければ必ず取れる資格です。
キャンパス内の独自通貨をオンライン化した話

# はじめに
この記事は、[N・S高等学校 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/n-s-highschool)の25日目です。
はじめまして、N中等部通学コース4期生のTakuといいます。
今回は、キャンパス内で使われている独自通貨「吉」をオンライン化してみた話を書きまとめてみました。
ぜひご覧ください。
# 独自通貨とは
まず最初に、キャンパス内で実装されている独自通貨について説明していきます。
<img width="500" alt="test.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/997280/2bc27764-a545-6c6e-b0c5-ba211060e486.jpeg">
上の画像が紙幣の独自通貨で、一ヶ月に一回紙幣のデザインが変わっています。
# 完成品
できたものについて紹介します。
## Web UI
<img width="300" alt="ys.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/997280/a189e5e4-8abd-abec-415f-fbb09d114315.png">


CSSを完全に理解したと思っていた自分が割とささっと作ったサイトです。
このサイトで全ての操作(残高確認,送金,メンター用の管理ページ)を行うことができます。
## Google ログインページ
<img width="300" alt="admin-google.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/997280/590c7800-38a9-f14d-a3f1-922040a7006a.png">

管理ページはセキュリティのためOpenID Connectを用いて教員のGoogleアカウントで認証しています。
ドメインの部分は@を入力することでoverwriteできてしまうので、ユーザー単位の認証を行なっています。
自分もアクセスできないとメンテナンスができないので、一部機能を制限しつつoverwriteして自分のアカウントでも入れるようにしています。

## 管理ページ
<img width="300" alt="admin-page.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/997280/4c6443eb-22f5-6a46-1b4c-9794744caa44.png">

先ほどのGoogleログインに成功すると、このページにリダイレクトされます。
このページで、吉の加算や減算、名義確認など、権限が必要な操作を全て行えます。

## アカウント認証エラー

<img width="300" alt="login-failed.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/997280/b61bfbc3-d6e5-6df2-d642-65001ad68ff9.png">

Googleでのログインには成功したが、アカウントがメンターのものではなかった場合のページです。
画面上では401 Unauthorizedと表示していますが、403 Forbiddenとして返答するのが適切かもしれません。
# 仕様
ユーザーのデータを保管するために、REST APIを構築しました。
APIはユーザーの最小限のデータを認証なしで返答するようになっています。残高の状況はシークレットなものとしては保存せず、URIを知ることでアクセスすることができますが、カードを紛失した際の発見時など、ユーザーの情報が確認できるべきだということで、そのようなAPIの仕様になっています。
# iOS App
個人的に興味のあったiOS Appなどの開発もやってみました。
ほぼほぼこのために、Apple Developer Programに登録しました。
<img width="300" alt="simulator-screen-shot-iphone 11 pro max.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/997280/6d21e3ac-a701-32e6-fc58-5fc8996ba5d2.png">

Appのデザインは上のような感じです。かなりシンプルでしたが、TestFlightの外部テストは承認されました。
~~機能を追加しつつ、App Storeの非表示App申請にも挑戦してみたいと思います。~~
App Storeの審査に合格しました！数回rejectされたあと問題を一つずつ解決して公開されました！

# おわりに
今回は、キャンパス内の独自通貨をオンライン化してみた話を記事にしてみました。
いかがだったでしょうか。来年も枠があれば記事を書いてみようと思います。
それでは失礼します。
Arduino UNOとカラーOLED SSD1331で温度計(MCP9701)

x Adafruit SSD1331 OLED Driver Library for Arduino を　インストール
x Adafruit GFX Library を　インストール

目的
カラーOLEDのテスト

有機ＥＬディスプレイ　０．９５インチ　９６×６４ドット　ＲＧＢ
[QT095B]
通販コード　P-14435
発売日　2019/09/02


温度センサーＩＣ　ＭＣＰ９７０１－Ｅ／ＴＯ　（８個入）
[MCP9701-E/TO]
通販コード　I-03199
発売日　2009/10/26



![o_cop256.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/4cf36a65-28bc-9112-6d8b-3fea0c7acf3d.jpeg)




```c++



//OLED_SSD1331_9701_TEST1

//ヘッダー
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1331.h>
#include <SPI.h>


// You can use any (4 or) 5 pins
#define sclk 13
#define mosi 11
#define cs   10
#define rst  9
#define dc   8


// Color definitions
#define BLACK           0x0000
#define BLUE            0x001F
#define RED             0xF800
#define GREEN           0x07E0
#define CYAN            0x07FF
#define MAGENTA         0xF81F
#define YELLOW          0xFFE0
#define WHITE           0xFFFF


//SSD1331オブジェクトの定義
Adafruit_SSD1331 display = Adafruit_SSD1331(&SPI, cs, dc, rst);


//温度センサーの値
static const char data[][5]={
"00.0","00.5","01.0","01.5","02.0","02.5","03.0","03.5","04.0","04.5","05.0","05.5","06.0","06.5","07.0","07.5","08.0","08.5","09.0","09.5",
"10.0","10.5","11.0","11.5","12.0","12.5","13.0","13.5","14.0","14.5","15.0","15.5","16.0","16.5","17.0","17.5","18.0","18.5","19.0","19.5",
"20.0","20.5","21.0","21.5","22.0","22.5","23.0","23.5","24.0","24.5","25.0","25.5","26.0","26.5","27.0","27.5","28.0","28.5","29.0","29.5",
"30.0","30.5","31.0","31.5","32.0","32.5","33.0","33.5","34.0","34.5","35.0","35.5","36.0","66.5","37.0","37.5","38.0","38.5","39.0","39.5"
};


//初期化
void setup() {

  display.begin(); //ディスプレーの初期化

  //display.fillScreen(BLACK);

}//setup


//メインループ
void loop() {

  // 画面表示をクリア
  display.fillScreen(BLACK);

  // テキストサイズを設定
  display.setTextSize(3);
  // テキスト色を設定
  display.setTextColor(WHITE);
  // テキストの開始位置を設定
  display.setCursor(0, 10);


//温度センサーの開始

  //センサーの値を読み込む
  int s = analogRead(A0); // UNO

  //s=99*2; //debug

  //温度の設定
  char *str1; //文字のポインター
  s = s >> 1; //0-512
  if (s >= (40 + 80 + 1)) {
    str1 = "40.0";
  } else if (s <= 40) {
    str1 = "-0.0";
  } else {
    str1 = data[(s - 41)]; 
  } //endif


//温度センサーの終了


  // 1行目に数字を表示
  display.println(str1);

  delay(1000); //1秒待つ

}//loop




```
SSHクライアントとしてTeraTermを卒業してWindows Terminalを導入してみた話

# 概要
SSHクライアントとしてずっとTeratermを利用していたが、接続するたびにユーザー名と秘密鍵を入れるのも、ini設定を作るのもなんとなく気に入らなかったので、巷で評判のいいWindowsTerminalを導入してみた。最初の設定はなんとなく面倒だが、非常に快適。

# 導入
Microsoft Storeを使うとQuickに導入できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541975/a7d05dcf-75a3-932f-95a1-0d35211f1981.png)

Storeを使えない人はGitから落とすことも可能とのこと。
[Microsoft TerminalのRelease Note](https://github.com/microsoft/terminal/releases)

# 設定
SSHコマンドを書いて接続確認。認証鍵を使う場合にはフルパスを使って確認すること。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541975/ac276dd8-976b-7480-7bb2-abd2918145d9.png)

[設定]->[JSONファイルを開く]から設定値として貼り付けるだけ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541975/c33b47ff-ff6b-dda7-d090-ff6758f52ab7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541975/974fbd23-7161-a92c-1542-c598b4276905.png)

`"list"`配下に`"commandline"`から接続確認に使ったコマンドを入れる。
`"hidden"`は脳死でFalse、`"name"`は後で選択しやすいように自分で好きな名前を入れましょう。

日本語で雑に切られたパスを指定しているなどSSHコマンドにダブルクオートを使っている場合には下記のように普通にエスケープすれば使えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541975/0be9d0a9-498a-2dd0-3141-d3cc9fdd8dda.png)

一度設定すればこんな感じでタブ追加の感覚で出すことが出来る。ショートカットでも開ける。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541975/30bbf107-d7b7-30fa-2489-351a444a0f20.png)

# 感想
設定をGUI的にできるとよりとっつきやすいが、別にいろいろと記事があったので困らなかった。
タブも使えるし、ボタン一つで接続もできるし、ローカルの作業もできたりするのでとても快適です。

Teraterm使っていたところと比較すると、強いて言うならばログ周りの仕組みが貧弱な事。
画面上から取得することはできるようだが、個人開発でいちいち手動で取らないといけないのが少し不便ではある。
さらには別にコマンドの時間とかも記録できるわけではなさそうなので微妙なところ。

現状本気で実現したい場合にはPowershellのTranscriptと組み合わせてやっていくしかないとのことなので、
今後時間などの記録も含めた柔軟なロギングができれば実業務でも便利に使うことが出来るようになるかもしれない。
rails provideメソッド


```html:index.html
<% provide(:title, 12) %>
<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %>/ 26 </title>
  </head>
  <body>
  </body>
</html>
```
provideメソッドでパラメータを引き渡す。
yieldメソッドでパラメータを受け取る。
Rails Turboでvalidateが通らない無効なformの処理に書くunproccessable_entityについて

### 概要
PFを個人開発しているrailsしか知らない素人です。なので記事の信憑性については甚だ疑問があります。

万物は流転するものであり、色々と変わっていくもの…
railsはrails7から[hotwire](https://hotwired.dev/)（含むTurbo）がdefaultになりました。でかい変更ですよねこれ？
hotwireが何者なのかは色々な記事やサイトで説明されてますので割愛させていただきますが、簡単に言えばDHHの愛がこもったJSが書けない私へのギフトです。
アプリをフロントと分けてrailsはapiモードでjsonを出し入れするバックエンドのみに徹するみたいなことはきっと大変だと思うんですよ。（やったことないんで推測です）
railsのみでもモダンなアプリを作れるんだぞっていうやつです。

rails7に触ってまず何これ？となったのが、以下の様に無効なフォーム送信時のelse処理に書いてある`status: :unprocessable_entity`ってやつです。
```ruby
  def create
    @quote = Quote.new(quote_params)

    if @quote.save
      redirect_to quotes_path, notice: "Quote was successfully created."
    else
      render :new, status: :unprocessable_entity
    end
  end
```
なんですかコレ…

### ほんとなんなんですかコレ？
試しになしだとどうなるのか？
仕込んでいるerror messageが出ません。
(言い忘れてましたがformにerror_message出る様にしてることは前提としてます すいません)
開発者ツールのコンソール上に以下のエラーが出ることが確認できます。（@開発環境）
![スクリーンショット 2022-12-20 14.48.06.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1471503/6834223b-efd0-5d09-3be5-954fda3a615c.jpeg)

まずはTurboくんが一体全体何をしてくれちゃってんのかを知らねばならない気がします。
Turboくんには4つ種類がある様です。
**Turbo Drive**: リンクとフォームの送信を高速化するぞ
**Turbo Frame**: ページを分解して個別に読み込みするぞ　遅延読み込みもできるぞ
**Turbo Stream**: WebSocket、SSEを介してページ変更したりCRUD likeなアクションでフォームに応答できるぞ
**Turbo Native**: iOSアダプタやAndroidアダプタを提供してrails appをそのままiOS、Androidのアプリにできるぞ
書いといて全然意味わかっていませんが、今回関係あるのは最初のTurbo Driveくんが該当するのかな
### Turbo Driveくんが何をしているのか
Turbo DriveくんはTurbo四天王の中でも最弱（意味不明) 
`rails-turbo` gemが入っていれば何もせずにデフォルトで適用され、すべてのリンクとフォーム送信をAJAXリクエストに変換することでアプリケーションを高速化してくれます。
リンクのクリックまたはフォームの送信をインターセプトして、AJAXリクエストへ変換しその応答は、htmlページの`<body>`を置き換えるためだけに機能するそうです。
つまり、rails7で作成したCRUDアプリケーションは何もせずにSPA（single page application）になっちゃうらしいです。
嘘でしょ？
Turbo Driveくんは何もわかってない僕の代わりに気づかないうちにアプリを高速にしてくれているんですね。有難いことこの上ないです。

本題に戻りますが、さすがの私もTurbo Driveくんが良かれと思ってフォーム送信処理をAJAXリクエスト化してくれていることが、error messageを表示することを阻害しているんだろうなと察しました。

では、error messageを表示するためにどうすればいいのか？　
　➡️ html status code 422を返せばいいらしいです。
code 422についての[mdn](https://developer.mozilla.org/ja/docs/Web/HTTP/Status/422)の解説では「サーバーが要求本文のコンテンツ型を理解でき、要求本文の構文が正しいものの、中に含まれている指示が処理できなかったことを表します。」 ざっくりvalidationが通らなかったよということを示すstatusってことでしょう 多分…
そしてRailsではstatus code 422のエイリアスは`:unprocessable_entity`となリます。
繋がりましたね… （得意気）
`status: :unprocessable_entity`を付けるのは、Turbo Driveくんの仕事のちょっとした訂正をしている感じですね。
因みにつけた際のコンソールは下記の様になります
![スクリーンショット 2022-12-20 16.13.54.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1471503/b9502585-f426-1942-55a8-19f2a0f09345.jpeg)

裏を返せば（この言葉の使い方あってるか？）、訳あってformで`data-turbo: false`と書いてTurbo Driveをキャンセルしている場合は書く必要ないってことですね。

### 所感
これからアプリにTurboを盛り込んでいくに当たり記事を書くことで不明瞭だった部分が多少クリアになりました。
すごいですねTurboくん。
なんか誤解等あればご指摘いただけるとありがたいです

### 参考
https://www.hotrails.dev/turbo-rails/turbo-drive
Datadog Downtimeを使ってDatadog monitorの閾値を特定の時間だけ変更してみた

## はじめに

皆さんこんにちはasmgです。今回は、Datadog monitorの閾値を特定の時間だけ変更するのにDatadog Downtime使うことで実現してみたいと思います。

## Datadog monitorの閾値を特定時間だけ変えたくなった背景
あるサービスで特定時間に負荷がかかりalertが鳴り止まないという問題がありました。ただ、このalertは想定しているものなのでalertを飛ばしたくないという課題がありました。

## Datadog Downtime使うことで実現
背景で述べた問題を解決するために、特定の時間だけ閾値を変更して必要なalertを飛ばすように実現しました。

今回は、Datadog Downtime使うことで実現する方法を検討して実現してみました。

* 2種類の閾値以外は同じ設定のモニター（例 モニターA,B）用意する
* Datadog Downtimeの機能を活用して下記のようにモニターAとBのダウンタイムをずらすことで特定の時間だけ閾値を変更することを実現する

:::note info
Datadog Downtimeとは、設定した時間だけmonitorのalertと通知を無音にすることができる機能です。
ref:https://docs.datadoghq.com/ja/monitors/notify/downtimes/
:::

### イメージ図
![空白の図 (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/c2434353-f654-08aa-7af3-d9627fbb08e7.png)

## terraform化
最後にDatadog monitorの閾値を特定の時間だけ変更する方法をterraformで実現してみました。

* ディレクトリー構成

```terminal:ファイル構造
├── service-monitor
│   ├── downtime.tf
│   └── monitor.tf
```

* monitor.tf
```terraform:monitor.tf
terraform {
  required_version = "= 0.14.11"

  required_providers {
    datadog = {
      source  = "DataDog/datadog"
      version = "3.3.0"
    }
  }
}

provider "datadog" {
  api_key = "{API_KEY}"
  app_key = "{APP_KEY}"
}

resource "datadog_monitor" "a-monitor" {
  name = "a-monitor"
  type = "metric alert"
  message = <<EOT
A alert
            EOT
  query = "{Queryを入れる}"
}

resource "datadog_monitor" "b-monitor" {
  name = "b-monitor"
  type = "metric alert"
  message = <<EOT
B alert
            EOT
  query = "{Queryを入れる}"
}
```

* downtime.tf
```terraform:downtime.tf
resource "datadog_downtime" "a-monitor-downtime" {
  scope = ["*"]
  #UTC Date
  start_date = "2022-12-21T02:00:00Z"
  end_date   = "2022-12-21T03:00:00Z"
  monitor_id = datadog_monitor.a-monitor.id
  timezone   = "Asia/Tokyo"
  recurrence {
    type   = "days"
    period = 1
  }
}

resource "datadog_downtime" "b-monitor-downtime" {
  scope = ["*"]
  #UTC Date
  start_date = "2022-12-21T03:00:00Z"
  end_date   = "2022-12-22T02:00:00Z"
  monitor_id = datadog_monitor.b-monitor.id
  timezone   = "Asia/Tokyo"
  recurrence {
    type   = "days"
    period = 1
  }
}
```

:::note warn
Datadog Downtime の`start_date`をterraformで設定する際、過去の時間を設定できません。
なので、設定する場合には、未来の時間を設定してください。
:::

## まとめ
Datadog downtimeを活用することで特定時間だけDatadog monitor自体を変更し、閾値を変更することができました。
Datadog monitorの閾値を特定時間だけ変更したいと思っている方の参考にしていただけると幸いです。
C#/VB.NET：ExcelをXPSに変換する方法

XPSは固定文書形式です。PDFとある程度似ていることで、文書の内容が変化するのを防ぐことができます。ExcelをXPSに変換したい場合は、[Free Spire.XLS for .NET](https://jp.e-iceblue.com/introduce/free-spire-excel-for-net.html)を使うことができます。以下が詳しい手順とコードです。

## Free Spire.XLS for .NETをインストールする
方法1：[NuGet](https://www.nuget.org/packages/FreeSpire.XLS)を介してFree Spire.XLS for .NETをインストールする
「ツール」>「NuGetパッケージマネージャ」>「パッケージマネージャコンソール」の順に選択し、次のコマンドを実行します。
```
PM> Install-Package FreeSpire.XLS
```
方法2：プログラムに手動でSpire.xls.dllファイルを導入する
[Free Spire.XLS for.NET](https://jp.e-iceblue.com/download/free-spire-excel-for-net.html)をローカルにダウンロードし、解凍してインストールします。インストールが完了したら、Visual Studioを開いて新しいプロジェクトを作成し、右側のソリューションエクスプローラで「参照」を右クリックし、「参照を追加」>「参照」を選択して、インストールパスの下のBINフォルダのdllファイルを見つけ、「OK」をクリックして、プログラムに参照を追加します。

## Excel を XPS に変換する
具体的な手順は以下の通り。

* Workbook インスタンスを作成します。
* Workbook.LoadFromFile() メソッドを使用して Excel サンプルドキュメントをロードします。
* Workbook.SaveToFile(string, FileFormat) メソッドを使用して、Excel を XPS に変換します。

C#
```
using Spire.Xls;

namespace ExceltoXPS
{
    class Program
    {
        static void Main(string[] args)
        {

            //Workbookインスタンスを作成する
            Workbook workbook = new Workbook();

            //Excelサンプルドキュメントをロードする
            workbook.LoadFromFile(@"E:\Files\\sample0.xlsx", ExcelVersion.Version2010);

            //ExcelをXPSに変換する
            workbook.SaveToFile("result.xps", FileFormat.XPS);
        }
    }
}
```
VB.NET:
```
Imports Spire.Xls

Namespace ExceltoXPS
    Class Program
        Private Shared Sub Main(ByVal args() As String)

            'Workbookインスタンスを作成する
            Dim workbook As Workbook = New Workbook

            'Excelサンプルドキュメントをロードする
            workbook.LoadFromFile("E:\Files\\sample0.xlsx", ExcelVersion.Version2010)

            'ExcelをXPSに変換する
            workbook.SaveToFile("result.xps", FileFormat.XPS)
        End Sub
    End Class
End Namespace
```
![49D955CA-8034-4b2a-849B-65DD86A4DC93.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2811193/39e37447-aca2-2d58-718e-d9f36d159fb2.png)
SurfaceViewとTextureViewの違いを表にまとめる

良くごっちゃになるので以下のブログの内容をまとめておきます。

https://medium.com/androiddevelopers/android-hdr-migrating-from-textureview-to-surfaceview-part-1-how-to-migrate-6bfd7f4b970e

||SurfaceView|TextureView|
|---|---|---|
| Google推奨 | ⭕推奨 | ❌ API 24以下でアニメーションしたいときなど特定のシナリオで推奨 |
| 仕組み | Viewの中で穴を開けておいて、その部分位置で直接画面に描画する | Viewとして描画する。一度アプリケーションのレイヤーに画像をコピーする |
| 効率的・バッテリー消費の少なさ | ⭕ (アプリ描画を通さないので効率的) | ❌ (コピーするので非効率) |
| DRM | ⭕ | ❌ |
| 10-bit HDR | ⭕ | ❌ |
| API Level | 1 | 14 |
| 透明度の設定、回転、クリッピング | ❌ | ⭕ |
| アニメーション | ⭕ (API Level 24までは❌) | ⭕ |
iPadでアプリ開発環境を構築する（Flutter編）

最近のiPad（Air以上）はM1やM2チップが搭載され、ラップトップとの違いはメモリ容量くらいの差しかないのではないかと思います。そのため、iPadで十分アプリ開発が出来るのではないでしょうか。iPadなのでAndroidアプリ開発には不向きですが、ハイブリッドアプリやマルチプラットフォーム向けの言語であればiOS/Android両方に対して開発できます。

特にiPadであれば、自分用のPCがない学生の方でもチャレンジしやすいのではないでしょうか。今回はFlutter向けのアプリ開発環境を整えてみたので、方法を紹介します。

## Zapp!をPWAとして配置する

ベストな方法としてはPWAの利用になります。iPadのSafariで[Zapp!](https://zapp.run/)にアクセスして、Webサイトをホーム画面に追加します。そうすると、アイコンもZapp!のものが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/823a5b47-35f5-a3eb-4f61-c861a47d993d.png)

立ち上げると、専用アプリのように開きます。

![6764B240-9D19-48DB-BDF8-7D5EA02BB37E_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/6a738bb1-0b1d-dcc3-e39a-6101bc59e8d7.jpeg)

### 開発スタイル

Zapp!を使った場合、3ペイン表示がデフォルトになります。左からファイルツリー、エディタ、プレビューです。

![6764B240-9D19-48DB-BDF8-7D5EA02BB37E_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/6a738bb1-0b1d-dcc3-e39a-6101bc59e8d7.jpeg)

ファイルツリーを閉じれば、プレビューを見ながらでも十分開発できそうです。

![87087633-BD9A-40CA-8F3C-35A3C42C9EB6_1_102_o.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/88227586-a9af-22c1-8332-7ad9ed09942c.jpeg)


また、QRコードを読み込んで別なデバイスでプレビューを見ながら開発もできます。

![E524ED24-B98C-4569-B991-95008015FEF1_1_102_o.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/cc7fe14d-0d73-62b3-ff17-3be2a1746d13.jpeg)


Zapp!はWebに対応したライブラリを自由にインストールして利用できます。逆に、iOSやAndroidネイティブにしか対応していないものは利用できません。

### ビルドはなし

Zapp!にはビルド機能はありません。Zipファイルとしてダウンロードできるのみです。

## DartPadを使った方法

[DartPad](https://dartpad.dev/?)もDart開発ができるWeb IDEになります。ただし、任意のライブラリはインストールできませんので、Zapp!の方が自由度は高いでしょう。

## まとめ

今回はiPadでのFlutterアプリ開発にチャレンジしました。ビルド環境はありませんが、Webにも対応したFlutterアプリであればZapp!で十分に開発できるでしょう。iPadで手軽にスマートフォンアプリ開発にチャレンジしてみたい方は参考にしてください。

ニフクラ mobile backendは[Flutter用にSDKを提供](https://github.com/NCMBMania/ncmb-dart)しており（コミュニティSDKであり、公式サポートは受けられません）、Flutter/Dartアプリで利用可能です。ぜひお試しください！
Leetcode 841. Keys and Rooms

https://leetcode.com/problems/keys-and-rooms/description/

## 難易度
### Medium

## アプローチ
### BFS

```java
class Solution {
    public boolean canVisitAllRooms(List<List<Integer>> rooms) {
        boolean [] isVisited = new boolean[rooms.size()];
        Queue<Integer> queue = new LinkedList<>();
        queue.add(0);
        isVisited[0] = true;

        while(!queue.isEmpty()){
            int now = queue.poll();

            for(int i = 0 ; i < rooms.get(now).size();i++){
                int next = rooms.get(now).get(i);
                if(isVisited[next]){
                    continue;
                }
                isVisited[next] = true;
                queue.add(next);
            }
        }

         for(boolean b : isVisited){
             if(!b){
                 return false;
             }
         }
         return true;
    }
}
```
Power Automate の 条件アクション に値を指定した時の型について改めて整理してみた

# 条件アクションに指定した値はどの型として扱われるのか
Power Automate にはデータ型の概念が一応ありますが、分かりやすさのためか条件アクションにおいて、値を設定したときにどんな型で扱われるのか不明確なインターフェースになっています。

例えば

- 整数変数 Int と 整数値 10 がイコールであるかを判定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243135/297ea947-b7f2-3d1e-e215-df3465ea3292.png)
このケースは正しく判定でき、変数に 10 が入っていれば「はいの場合」に進みます。

- 文字列変数 Str と 文字列 "こんにちは" がイコールであるかを判定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243135/fec687a7-efd7-7896-a19d-b5616e453416.png)
これも正しく動作するでしょう。しかし・・・

- 文字列変数 Str と 文字列 "10" がイコールであるかを判定する（半角の数値を文字列として判定したい）
このような時、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243135/a14d2541-9d66-aa86-f8e8-ab6c9ea9adee.png)
のようにしてしまうと、正しく判定できません。
正しくは、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243135/79f773b6-79fe-6edf-2c2a-4a5466d64ba0.png)
のように指定してあげる必要があります。
しかも、保存して開きなおすと敢えて入れたダブルクォーテーションは画面上からは消え去ります。（2022年12月現在。この仕様は本当に良くないと思います・・・）
なお、シングルクォーテーションでの指定はNGです。シングルクォーテーションも文字列の一部として扱われてしまいます。


これらは、条件アクションが画面上で入力された値の内容から型推論していることから発生しているものと思います。
本稿では、初心に立ち返ってPower Automateの条件アクションにおける型推論の結果について改めて整理してみました。

## 結果
検証ベースで試してみて、いくつかのパターンに整理してみました。
以下４列の表でまとめています。
- 期待する型
→ 指定した値をどの型で判定してほしいか
- 実際に指定する例
→ 条件アクションの入力ボックスに指定する値
- 推論される型
→ 指定した値が実際に取り扱われる型
- フロー定義に書き込まれる値
→ フロー定義（JSON）としてどのように定義されるか（末尾に補足）

#### あまり意識せずにそのままいけそうなパターン
| 期待する型 | 実際に指定する例 | 推論される型 | フロー定義に書き込まれる値 |
|:-:|:-:|:-:|:-:|
| 整数値 | 10 | 整数値 | 10 |
| 浮動小数点数値 | 3.14 | 浮動小数点数値 | 3.14 |
| 文字列 | こんにちは | 文字列 | "こんにちは" |
| 文字列 | "こんにちは" | 文字列 | "こんにちは" |
| 文字列 | １０<br>※全角数字 | 文字列 | "１０" |
| 真偽値 | true | 真偽値 | true |
| 真偽値 | false | 真偽値 | false |


#### 意識しないとハマる可能性のあるパターン
| 期待する型 | 実際に指定する例 | 推論される型 | フロー定義に書き込まれる値 |
|:-:|:-:|:-:|:-:|
| 整数値 | １０<br>※全角数字 | 文字列 | "１０" |
| 浮動小数点数値 | ３．１４<br>※全角数字 | 文字列 | "３．１４" |
| 文字列 | 'こんにちは' | 文字列 | "'こんにちは'" |
| 文字列 | 10 | 整数値 | 10 |
| 文字列 | "10" | 文字列 | "10" |
| 真偽値 | True | 文字列 | "True" |
| 真偽値 | TRUE | 文字列 | "TRUE" |
| 真偽値 | False | 文字列 | "False" |
| 真偽値 | FALSE | 文字列 | "FALSE" |


#### 補足：フロー定義に書き込まれる値 について
フローの中身はJSONで定義されていますが、条件アクションに指定した値がどのように推論されたかを確認するためにフロー定義を確認しました。今回は簡易的に、アクションのコピー機能を用いて確認しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243135/2ded0487-4861-d9de-a005-515b93e0551a.png)
上記のようなアクションのフロー定義を確認すると（↓）、
operationDefinition.expression.equals の2要素目が "'10'" となっていることが確認できますね。
```JSON:フロー定義
{
    "id": "XXXXXXXXXXXXXXXXXX",
    "brandColor": "#484F58",
    "connectionReferences": {},
    "connectorDisplayName": "制御",
    "icon": "XXXXXXXXXXXXXXXXXX",
    "isTrigger": false,
    "operationName": "条件",
    "operationDefinition": {
        "type": "If",
        "expression": {
            "equals": [
                "@variables('Str')",
                "'10'"
            ]
        },
        "actions": {},
        "runAfter": {
            "変数を初期化する": [
                "Succeeded"
            ]
        },
        "metadata": {
            "operationMetadataId": "XXXXXXXXXXXXXXXXXX"
        }
    }
}
```

---
今回の内容は、あくまでも条件アクションについてまとめたものです。
特に、数式において条件式で文字列を扱う際には、文字列リテラルとしてシングルクォーテーション（'）を利用する必要があるので、混同しないように注意してください。
GoogleとGiveDirectlyがAIマッピングを使ってハリケーン・イアンの被災者に現金を届ける方法

本記事はfastcompanyの翻訳です。https://www.fastcompany.com/90793918/how-google-and-givedirectly-are-using-ai-mapping-to-get-cash-to-hurricane-ian-victims?partner=rss&utm_source=rss&utm_medium=feed&utm_campaign=rss+fastcompany&utm_content=rss
![QQ20221220145333.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298092/e6dbfe77-91b4-bdb6-92c3-0aacd207d83d.png)
**ハリケーン**「**イアン**」のような災害の後、人々が援助を受けるには数日から数週間かかることがあり、援助が届いたとしても、衣類や食料などの現物支給という形が一般的で、その人がその時に必要としているものではないかもしれません。**非営利団体GiveDirectly**は、フロリダとプエルトリコで異なるアプローチをとっており、低所得のハリケーン被災者に**700ドルの現金支給**を行っています。

GiveDirectlyの米国カントリーディレクターである**サラ・モラン**は、「私たちの経験では、災害支援に関する非常に善意のインフラは、嵐の後、実際には必要のない多くのものを人々に与える結果となっています」と述べています。「毛布や水、薬、キャンディバーなどが送られてきます。しかし、私たちが災害後の復興を体験している人々からはっきりと聞いたのは、自分たちがどのように復興できるかを選択できるようにする必要があるということです。現金は、嵐を経験した人々のニーズに応えることを確実にする、はるかに効率的な方法なのです。」

清潔な飲料水が手に入らない場合はペットボトルの水が必要ですし、お店が閉店したり品切れになった場合は、おむつを買うお金よりも、おむつを贈る方が役に立つかもしれません。しかし、通勤のためのレンタカーや家賃など、最も必要なもののためにお金を払うという選択肢を与えることも重要です。![QQ20221220144749.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298092/29e51769-2cb8-5222-5188-2eada7080c35.png)


アフリカで貧困にあえぐ人々への現金直接支払いを最初に開拓したこのNPOは、ハリケーン・ハービーとハリケーン・マリアの後にも同様の支援を行いました。**Googleのパートナーが開発したAIツール**（2019年のハリケーン「ドリアン」の後に初めて使用された）を使って、嵐による被害と地域の貧困がどのように交差しているかをマッピングし、最も必要としていると思われる人々を探し出しているのです。(Googleは、フロリダとプエルトリコにおけるGiveDirectlyの活動を支援するために300万ドルも寄付していた)。

「そして、**衛星画像を受け取ってから1日以内に**、**国勢調査の対象者に支払いをすることができるのです**」と彼女は言います。「しかし、実際に現地に赴き、車で人々の家を回り、誰が影響を受けたかを判断することは、はるかに困難であり、効果もあまりありません。手作業でやっていると、近所全体を見逃してしまうかもしれません。」

GiveDirectlyは、何百万人ものアメリカ人が食品を購入するためのSNAP給付を管理するために使用している**Providersアプリ**を使って、最も被害の大きかった地域の人々に、対象となる可能性があるという通知を送ります。被災者は数秒以内に申請書を作成し、24時間から48時間以内に口座にお金が振り込まれます。![QQ20221220144710.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298092/33a9b9cb-59a4-0b71-31e2-6b18ae7349c6.png)


2022年十月、この非営利団体はハリケーン「フィオナ」の被害を受けたプエルトリコで最初の支払いを開始しました。イアンほどではありませんでしたが、5年前のハリケーン・マリアからまだ回復していないため、より多くの支援が必要だと考えたのです。フロリダでの最初の支払いは木曜日に始まりました。NPOは今後さらに支払いが必要かどうか、プログラムを分析する予定です。

GiveDirectlyのこれまでの活動のおかげで、他の組織も現金輸送を利用し始めています。FEMAもプエルトリコのハリケーン「フィオナ」の影響を受けた人々に現金を提供する予定です。しかし、GiveDirectlyはより早く、より多くの人々に手を差し伸べることができると考えています。

公平な災害支援は非常に重要であると彼女は言います。「このような嵐は誰にとっても破壊的なものです。しかし、大きな嵐は富の不平等を悪化させ、人種間の貧富の格差を拡大させるというデータもあるのです。ですから、嵐後の復興は、最も弱い立場の人々が再建に必要な支援を受けられるようにするための重要な時期なのです。そのために私たちはこの活動を行っています。」

またほかのAI領域に興味を持っている方に、[VanceAI](https://vanceai.com/ja/)というAI画像編集ツールをおすすめします。
Postman/Postman CLI でPFX形式クライアント証明書を利用する方法

# はじめに
現在APIのテストに [Postman](https://www.postman.com/) を利用しているのですが、担当しているプロダクトにはクライアント証明書(PFX形式)が必須となっています。

そのため、「**Postman**」とその CLI版の「**Postman CLI**」での **クライアント証明書 (PFX形式)** の使い方をそれぞれ調べたのでここで紹介します。


## 本投稿で書かかないこと
- Postman/Postman CLI のインストール方法や基本的な使い方
- PEM形式のクライアント証明書の使い方

# 準備
事前に以下のものを確認、用意しておきます。
- テストしたい Host (endpoint) の URL
- Host に対応した PFX file (PFX形式のクライアント証明書) 本体
- PFX file の Path
- PFX file の Passphrase


# Postman (執筆時 Ver. 10.6.7) の場合
設定画面からクライアント証明書を追加することができます。

## 手順
1. Preference (SETTINGS) を開く
1. Certificates タブを開く
1. Add Certificate をクリックする
1. Host , PFX file , Passphrase をそれぞれ入力、選択する
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43414/ac0b35a1-cbc2-9f77-cf42-7e50d926393d.png" width="400px">
1. Add をクリックすると一覧に追加されて完了
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43414/ea5b8a96-b7ba-e1c7-cfad-a94f24bb1303.png" width="400px">

### GUI版のポイント
- 複数の Host に対応できる
  環境の異なる Host 毎にクライアント証明書を登録しておけば、リクエスト時の URL に応じて証明書を読み込んでくれる
- 現在は編集ができない
  間違えて登録した場合は、削除(Remove)して改めて追加する必要がある

# Postman CLI (執筆時 Ver. 1.0.8) の場合
JSON形式の設定ファイルを作り、実行時に `--ssl-client-cert-list` オプションで渡してあげます。

## 手順
1. 次のようなフォーマットのJSONファイルを用意します

    ```clientCertList.json
    [
      {
        "name": "(任意の名前)",
        "matches": ["(host の URL)/*"],
        "pfx": {
          "src": "(PFX file の Path)"
        },
        "passphrase": "(PFX file の Passphrase)"
      },
      {
        "name": "hoge.example",
        "matches": ["https://hoge.example.com/*"],
        "pfx": {
          "src": "/Users/hoge/client-certificates/hoge_example.pfx"
        },
        "passphrase": "hogeexample"
      }
    ]
    ```
1. 実行時に `--ssl-client-cert-list` で作成したJSONファイルを渡す
    ```shell
    postman collection run (file path or UID) --ssl-client-cert-list clientCertList.json
    ```
### CLI版のポイント
- 複数の Host に対応できる
  JSON に環境の異なる Host 毎にクライアント証明書を書いておけば、リクエスト時の URL に応じてマッチした証明書を読み込んでくれる

# まとめ
- Postman は GUI でも CLI でもクライアント証明書が使える
- 適切に登録・設定することで、複数の HOST にも柔軟に対応できる
- GUI は編集ができないのでやや不便
charを勉強する

aという文字。unicodeで97という値。数字で値を保有してる

```sample.java
    public static void main(String[] args) {
        char ch = 'a';
        System.out.println(ch);
        int i = ch;
        System.out.println(i);        
    }
```
実行結果
```
a
97
```
\u+16進数でセット。16進の61→97。
```sample.java
    public static void main(String[] args) {
        char ch = '\u0061';
        System.out.println(ch);
    }
```
実行結果
```
a
```
【GDPR】Cookie使用同意に拒否されるとCookieを一切使えなくなるのか？Strictly necessary Cookieとは？

:::note warn
この記事はただの理系大学2回生が英語圏のネット記事漁ってまとめただけの記事ですので、内容に関して法律的に正しいか保証できず、責任を取れません。（内容が古くなる可能性もあります）
対象地域にあわせ、各法律をご参照の上、あくまでも参考程度にお願いいたします。
:::

# Cookie使用同意の必要性
最近のインターネッツでは、よく「Cookie使用同意」が求められるバナーが出てきますよね。（特に英語・EU圏！）

参考：[EUトヨタのホームページ](https://www.toyota-europe.com/)。[日本トヨタのサイト](https://toyota.jp/index.html)ではこのようなCookie同意バナーは表示されない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602537/4e54f9a0-f18b-007e-9971-2a071f8c2d51.png)

実は、EUでは<strong>GDPR</strong>という個人情報保護法において、Cookieの扱い方が厳格に規定されています。
日本でも、EUほど厳しくはありませんが、2022年4月にCookieに関する規制がなされていまして、我々エンジニアも目を背けることはできません。（[参考](https://www.ebis.ne.jp/column/cookie/)）

GDPRが厳しすぎるあまり、GDPRさえ満たせれば基本的にどこの地域でも大丈夫だと言われています。そこで、特にweb開発をされている方は、GDPR基準でのCookie同意の扱いについて知っておくべきではないでしょうか。

# 問題提起
本記事の問題提起はこちらです。
<strong>Cookie使用同意を拒否した場合、Cookieは一切使えない？サーバーが取得しない場合でも？</strong>
もしそうだとするとフロントエンド開発がずいぶんやりづらくなります。
個人情報の文脈で登場するCookieには、ユーザーの閲覧の追跡などマーケット分析目的でサーバーのデータベースに蓄積するものが挙げられますが、皆さんご存じの通り、サイトの入力情報、設定やログイン情報の保持など、<strong>個人情報を取得せず、サイトの機能に必要不可欠なCookie、ユーザー体験を向上させるCookie</strong>がありますよね。これらがないと毎回サイトにアクセスする度に設定を戻さないといけません。ブラウザ上だけで完結してサーバー側は何も取得しないCookieだってあります。これらはどうなるんだよ！

GDPR基準では、<strong>「Cookie使用に同意しない者は閲覧させない」も禁止されています。</strong>
拒否された場合の処理だるくなりすぎるんじゃないか、、？フロントエンドの実装によっては何を見せればいいんだ、、？と困惑するものではないでしょうか？

# 結論
<strong>同意確認が不要なCookieがあります。</strong> これは<strong>Strictly necessary Cookie</strong>（マジで要るCookie）というものです。
Strictly necessary Cookieは<strong>ファーストパーティのもの</strong>(外部サイトではなく自サイトが使用するCookie）で、

* サイトが動作するに<strong>必要不可欠</strong>なもの
* セキュリティ上必要なもの

が挙げられます。

<strong>サイトが動作するに必要不可欠なもの</strong>とは、けっこう厳密に(Strictly)必要かどうかを判断する必要があります。
というのも、Functionality Cookie（機能Cookie）というカテゴリーもあり、論理記号で書けば
サイトが動作するに必要不可欠なもの ⊂　機能Cookie
という感じで、「機能Cookieではあるが必要不可欠とはいえないCookie」もあり、こちらは<strong>同意が必要</strong>とされています。（サーバーが取得してないのになんでだよ！）

抽象的な話は分かるけど具体例が欲しいですよね。
[Cookie Scrips](https://cookie-script.com/blog/strictly-necessary-cookies)によると、必要不可欠Cookieとは下記のようなものが挙げられています。
* オンラインショッピングにおける買い物カゴとして、購入対象を保存
（さすがに何を買っても買い物カゴが溜まらなければ、嫌でしょ）
* ログイン機能関係

[Cookie Yes](https://www.cookieyes.com/blog/cookie-consent-exemption-for-strictly-necessary-cookies/#:~:text=As%20per%20the%20GDPR%20and,without%20users'%20consent%20is%20unlawful.)によると言語設定も含まれます。（さすがに言語設定が反映されずにずっと画面がสวัสดีค่ะだと困りますよね）

セキュリティに関しては、専門外なので「セキュリティ上技術的に大事なもの」ととどめておきます。

# さいごに
Cookie同意を拒否されても、Cookieを一切使えないわけではなく、機能上必要不可欠なCookieを使用することができます。

下図のような、「同意」「拒否」の二択ではなく、「完全同意」「部分的同意」の二択になっているサイトもあり、面白いですね。

参考：[CookiePro](https://www.cookiepro.com/knowledge/what-are-strictly-necessary-cookies/#:~:text=Examples%20of%20strictly%20necessary%20cookies,a%20website%20through%20logging%20in.)のCookie同意確認バナー。「完全に同意」か「部分的に同意」の二択になっている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602537/14c4f0ed-456d-ac83-3592-9297d1d17e39.png)

# 参考文献
https://www.cookieyes.com/blog/cookie-consent-exemption-for-strictly-necessary-cookies/#:~:text=As%20per%20the%20GDPR%20and,without%20users'%20consent%20is%20unlawful.

https://cookie-script.com/blog/strictly-necessary-cookies

https://cookie-script.com/knowledge-base/kb-strictly-necessary-cookies

https://openli.com/guides/cookie-consent