OmniAICreator/Qiita-1.07M huggingface dataset:
Vite + Vue3 をビルドしたときに出たエラー

# はじめに
Vite + Vu3 でサイネージ向けコンテンツを制作するにあたり、自分のPCでは問題なく動作していたのに、STB（Set Top Box）に配信したらエラーが出てしまったので、その原因と対処法を書いておきます。

# 環境
- Windows11 Home
- WebStorm 2023.1.1
- Vite 4.3.9
- Vue 3.2.47
# 症状
コンテンツとしては、商業施設に設置するサイネージ向けのもので、外部から店舗情報を読み込んで表示したり、動画が流れたりといった、商業施設ではよく目にするコンテンツです。
今までは、Vue CLI で構築してビルドしていたのですが、今回からは、Vite を使ってみようかなと思って、コンテンツを構築したところ、サイネージSTBに配信して確認したところ、以下のエラーメッセージが出ました。
```console:error message
Failed to load module script: The server responded with a non-JavaScript MIME type of "". 
Strict MIME type checking is enforced for module scripts per HTML spec.
```
# 原因
上記のエラーメッセージの内容を調べるにあたり、`Failed to load module script` とあるので、モジュールの読み込みエラーなのかなと推測し、ビルドされた `index.html` を確認したところ、以下の記述を見つけました。
```html:index
<script type="module" crossorigin src="./assets/javascripts/index-00000.js"></script>
```
現在すべてのブラウザでは、スクリプトでモジュールが使えるようですが、今回使っているSTBに組み込まれているブラウザはどうやら対応していないようだったので、このモジュールを使わないように出力してみます。
モジュールの対応状況は [JavaScript modules via script tag](https://caniuse.com/es6-module) を参照ください。
# 対処法
さて、Vite でモジュールを使わない方法で出力するには、[@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) を追加します。
`vite.config.js`を開き、追記していきます。
```javascript:vite.config.js
import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy'     //<-- 追記
export default defineConfig({
  plugins: [
      vue(),
      legacy()     //<-- 追記
  ]
})
```
この設定を追記後出力された `index.html` を確認すると、
`<script nomodule crossdomain...></script>` という感じのコードが追加されました。
この出力で、STBからは無事に表示確認ができ、解決しました。
# 参考
- [ES Modules入門 JavaScriptでモジュールを使う時代](https://ics.media/entry/16511/)
- [ES6 modules in local files - The server responded with a non-JavaScript MIME type](https://stackoverflow.com/questions/47403478/es6-modules-in-local-files-the-server-responded-with-a-non-javascript-mime-typ)
- [プラグインの使用 | Vite](https://ja.vitejs.dev/guide/using-plugins.html)
- [ビルドオプション | Vite](https://ja.vitejs.dev/config/build-options.html)
AWS CloudFormationでクロスリージョン対応のACM証明書を作成する方法 ～Route 53 Hosted ZoneのIDをパラメータストアで活用～

# はじめに
クロスリージョン間のCloudFormationでACMを構築するためにRoute53のHostedZoneIdをパラメータストアに登録する。

例えば、東京リージョンのCloudFormationでRoute53のHostedZoneを構築し、バージニアリージョンのCloudFormationでACMを構築する場合、AWS CLIを利用して、HostedZoneIdをパラメータストアに登録し、利用するようにする。

GitHub Actionsでも利用できるように、シェルスクリプトで作成する。

# スクリプト

```sh:put_params.sh
#!/bin/bash

set -e

if [ $# != 4 ] || [ $1 = "" ] || [ $2 = "" ] || [ $3 = "" ] || [ $4 = "" ]; then
  echo -e "Two parameters are required

  1st - string: Hosted Domain Name on Route 53 (e.g. example.com)
  2nd - string: Target Region  (e.g. us-east-1)
  3rd - string: System Name  (e.g. akane)
  4th - string: EnvType  (e.g. dev)

  example command
  \t sh ./create_param.sh example.com us-east-1 akane dev"
  exit
fi

HOSTED_DOMAIN=$1
REGION=$2
SYSTEM_NAME=$3
EnvType=$4

RECORD_SET_ID_HOSTED_DOMAIN=$( \
  aws route53 list-hosted-zones \
  --query "HostedZones[?Name=='${HOSTED_DOMAIN}.'].Id" \
  --output text \
  | sed 's/\/hostedzone\///g'
  ) \
&& echo -e "\t RECORD_SET_ID_HOSTED_DOMAIN = ${RECORD_SET_ID_HOSTED_DOMAIN}"

aws ssm delete-parameter \
  --name ${SYSTEM_NAME}-${EnvType}-route53-hostzone-id \
  --region ${REGION}

aws ssm put-parameter \
  --name ${SYSTEM_NAME}-${EnvType}-route53-hostzone-id \
  --value ${RECORD_SET_ID_HOSTED_DOMAIN} \
  --type 'String' \
  --region ${REGION}
```
# CloudFormationのテンプレート

```yaml:acm.yml
Parameters:
  SystemName:
    Type: String
    Default: akane
  EnvType:
    Type: String
    Default: dev
  DomainName:
    Description: The domain to which validation
    Type: String
    Default: 'dev.akane.com'

Conditions:
  RegionTokyo: !Equals [!Ref Region, "ap-northeast-1"] ## 変数：Regionが東京であった場合
  RegionVirginia: !Equals [!Ref Region, "us-east-1"] ## 変数：Regionがバージニアであった場合

Resources:
  akaneVirginiaACM:
    Type: AWS::CertificateManager::Certificate
    Condition: RegionVirginia
    Properties:
      DomainName: !Sub "*.${DomainName}"
      DomainValidationOptions:
        - DomainName: !Sub "*.${DomainName}"
          HostedZoneId: !Sub '{{resolve:ssm:${SystemName}-${EnvType}-route53-hostzone-id}}'
      ValidationMethod: DNS
```
JavaScriptの基礎 備忘録

学習2日目　2023/06/23
書籍：JavaScript ふりがなプログラミング

学習内容：
第２章　条件分岐
第３章　繰り返し文
第４章　関数作成

＊メモしないと忘れそうな箇所だけ記載しています
＊備忘録。美しく書くことを、他人に読まれることを目的にしていません。

JavaScript
・プログラミングの「=」は「等しい」という意味ではなく、「右辺を左辺に代入する」という意味です。
・「let」は「これから変数を定義します」という宣言で、その後ろに変数名を書き、値を代入します。
・セミコロン忘れない。
・変数とよく似たものに、定数があります。定数はletの代わりにconstを用いて定義します。
・文字列の中で「${定数とか変数}」とすることで、文字列の中に定数や変数を含めることができます。
（＋を使わなくていい）けど、文字列全体をバッククォーテーション（`）で囲む必要がある。

```js
let creatMail=(recv,bill)=>{
    let msg=`${recv}様
    PT企画の斉藤です。
    今回の請求額は${bill}円です。`;
    console.log(msg);
};
creatMail('山本',40000);
```

関数を作ることを「関数定義」という。
関数を定義するには、関数のブロック内にJavaの文を書いていく。プログラムの一部を括り出して名前をつけるイメージ。

文　ブログラムの中の１つの処理。if文、for文などの種類がある。
式　演算子、式、値、関数呼び出しなどを組み合わせたもので、文の一種になる。
演算子　計算や比較などを行う記号。
関数　複数の指揮をまとめ、名前をつけて呼び出し可能にしたもの。

・引数とは、関数を呼び出す際に、関数に与える値のこと。
Lambda eventの出力整形について

Lambdaを使ってEventbridgeで連携されてきたEventをTeamsに連携する際のTipsをメモしておく。

・event.json.dumps()を使うと日本語表記が\uXXXXになる問題
解決法：
ensure_ascii=Falseを付けること

https://docs.python.org/ja/3/library/json.html#basic-usage

関連する参考ページ
https://dev.classmethod.jp/articles/aws-lambda-json-output/
https://dev.classmethod.jp/articles/eventbridge-to-microsoftteams/
https://dev.classmethod.jp/articles/aws-lambda-multiline-logging/
https://dev.classmethod.jp/articles/step-functions-to-sns/
runmqscのオプションv

結構便利です。
実行前に文法チェックをしてもらうことは必要だと思います

```
bash-4.2$ runmqsc -v QM_ORANGE < aaa.txt
5724-H72 (C) Copyright IBM Corp. 1994, 2018.
Starting MQSC for queue manager QM_ORANGE.


     1 : dis chs(*) ALL
     2 : stop channel(QM_ORANGE.QM_APPLE)
     3 : dis chs(*) ALL
     4 : start channel(QM_ORANGE.QM_APPLE)
     5 : dis chs(*) ALL
5 MQSC commands read.
```
cscの作法 その381

# 概要
cscの作法、調べてみた。
wpfやってみた。
イベントを捕らえてみた。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/48b4cdf7-461f-dfba-5bee-30a9e258955e.png)

# サンプルコード
xaml

```
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Title="テスト" Width="320" Height="240" FontSize="20">
	<StackPanel>
		<Button Name="button1" Content="クリック" />
	</StackPanel>
</Window>



```
cs
```

using System;
using System.IO;
using System.Xml;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Markup;

namespace App
{
	public class Program {
		private static void Button_Click(object sender, RoutedEventArgs e) {
			MessageBox.Show("Hello world!");
		}
		[STAThread]
		public static void Main() {
			Application app = new Application();
			Window win = null;
			using(FileStream fs = new FileStream("bu0.xaml", FileMode.Open, FileAccess.Read))
			{
				win = (Window) XamlReader.Load(fs);
			}
			if (win.FindName("button1") != null)
			{
				Button button = (Button) win.FindName("button1");
				button.Content = "Click";
				button.Click += new RoutedEventHandler(Button_Click);
			}
			app.Run(win);
		}
	}
}



```

以上。
git操作_マージを取り消したい時

## 初めに
__Situation__
ローカル環境でリモートリポジトリを自分のブランチにpull(マージ)したら
コンフリクト発生
↓
一旦ローカルのマージを取り消したい！！

## 実装
 ```:ターミナル
    git merge --abort
 ```
これだけ！

参考

https://chusotsu-program.com/git-merge-abort/

## 最後に
最後まで閲覧いただきありがとうございました。
ご意見、ご指摘ありましたら、コメントお願いいたします。
【C++】volatileと最適化の影響の確認

C++でグローバル変数にvolatileの指定があったので「指定する意味あるの?」と思い、その効果を体験した。
環境: Ubuntu 22.04.2 LTS, g++ 11.3.0

# ソースコード
グローバル変数を参照する無限ループを作成。
グローバル変数はシグナルハンドラで更新される。
```C++:main.cpp
#include <iostream>
#include <signal.h>

//volatile int a = 0; // volatile指定あり
int a = 0;            // volatile指定なし

void sig_handler(int signo) // シグナルハンドラ
{
	std::cout << "received signal: " << signo << "\n";
	a = 1;
}

int main()
{
	signal(SIGUSR1, sig_handler); // SIGUSR1受信時sig_handlerを実行
	while(a == 0)
	{
		// 無限ループ
	}
	std::cout << "got out from the loop\n";
}
```
コンパイル
```terminal:端末01
$ g++ main.cpp
```
実行
```terminal:端末01
$ ./a.out
```
別のターミナルからシグナル送信
```terminal:端末02
$ killall -SIGUSR1 a.out
```
whileループを抜けてプログラムは終了
```terminal:端末01
received signal: 10
got out from the loop
$
```
ここまでは期待通りの動作。
# 最適化付きコンパイル
コンパイル時に最適化を行う。
最適化の引数は複数存在する。今回は-O1 (基本的な最適化)と-O2(ほとんどの最適化)で試す。

## -O1 (基本的な最適化)でコンパイルした結果

コンパイル
```terminal:端末01
$ g++ main.cpp -O1
```
実行
```terminal:端末01
$ ./a.out
```
別のターミナルからシグナル送信。何度か送信。
```terminal:端末02
$ killall -SIGUSR1 a.out
$ killall -SIGUSR1 a.out
$ killall -SIGUSR1 a.out
```
シグナルハンドラは呼ばれているが、whileループは抜けずにプログラムは終了しない。
```terminal:端末01
received signal: 10
received signal: 10
received signal: 10
```
マジか
## -O2 (ほとんどの最適化)でコンパイルした結果

コンパイル
```terminal:端末01
$ g++ main.cpp -O2
```
実行
```terminal:端末01
$ ./a.out
got out from the loop
```
いきなりwhileループ抜けて勝手に終了。
何じゃそりゃ。

# volatileの効果の確認
最適化で散々になった結果をvolatile指定で正常になることを確認。

コードの修正: volatile付きのグローバル変数を有効化
```c++
volatile int a = 0; // volatile指定あり
//int a = 0;            // volatile指定なし
```
コンパイル:-O1付き
```terminal:端末01
$ g++ main.cpp -O1
```
実行
```terminal:端末01
$ ./a.out
```
別のターミナルからシグナル送信
```terminal:端末02
$ killall -SIGUSR1 a.out
```
whileループを抜けてプログラムは終了
```terminal:端末01
received signal: 10
got out from the loop
$
```
期待通りの動作。

コンパイル:-O2付き
```terminal:端末01
$ g++ main.cpp -O2
```
実行
```terminal:端末01
$ ./a.out
```
別のターミナルからシグナル送信
```terminal:端末02
$ killall -SIGUSR1 a.out
```
whileループを抜けてプログラムは終了
```terminal:端末01
received signal: 10
got out from the loop
$
```
期待通りの動作。

# 結論
* 最適化でプログラムは期待しない動作となった。
* volatile指定で最適化で発生した問題が解消された。volatileを指定する意味があることがわかった。

めでたしめでたし
AIの一部を理解する - 言語モデルと大規模言語モデルの基礎知識

「大規模言語モデル」について深掘りする前に、今回はまずは「言語モデル」そのものが何なのか、その概念から理解しましょう。

言語モデルとは、文章の表現が自然な表現であるかを計算できる仕組みのことです。
具体例で考えてみましょう。

「**私は今日、お昼に[　　　　]とランチしました**」という文があるとします。

この空欄に「**家族**」や「**友人**」を挿入すると自然な文章になりますが、「**エイリアン**」や「**ロボット**」だとちょっと違和感を感じるのではないでしようか。我々が普段から様々な文章を読み取る中で、どのような文章が自然なのかという感覚を持つことができるのです。これが私たち一人一人が持っている『**言語モデル**』です。

<img width="700" alt="Alien1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38013/8b589c41-64d7-3234-a7e5-32c673c7e2c4.png"> <img width="340" alt="Alien2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38013/13d6e8ba-530b-af4c-c093-58f31d78c05c.png"> <img width="340" alt="Alien3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38013/a3c0a456-3705-2ad4-0068-bd40bb56bfa2.png">
(「私は今日、お昼にエイリアンとランチしました。」のイメージ)


昔は、限られた文章の範囲から自然さを判断するシンプルな言語モデルも存在しましたが、それでは全体の文脈を捉えることが難しかったのです。

そこで、より多くの文脈を把握し、どのような文が自然なのかをより精度高く判断するために、「大規模言語モデル」が誕生しました。これが「大規模言語モデル」の意味となります。

今回は以上です。

(挿絵は私がStableDiffusionで書きました。自由に再利用してください。)

使わなかった挿絵はリンクのみここに貼り付けておきます。自由に再利用してください。
- [Robot1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38013/4191926b-2412-b4de-34c9-3d084b19ac22.png)
- [Robot2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38013/780e6f4d-ae54-cb9e-b178-ca2841ce6ef2.png)
- [Robot3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38013/7e6ee3be-05c6-9594-ad83-c6355dfb54b6.png)
- [Ghost1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38013/3b779020-81a0-8791-f8c9-14dca11d334e.png)
- [Ghost2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38013/c597d65e-733f-e35c-9762-5e2fb998a3a7.png)
- [Family1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38013/9fc7d83b-d953-78fd-6b05-91b945429518.png)
- [Family2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38013/d919c824-5f85-26e3-25c7-d77d2d45cba0.png)
- [Family3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38013/3613e72b-aa74-ec2c-74c5-09d986014fd0.png)
- [Friend1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38013/b6ad91b2-8905-8b43-897b-da67e0cf13be.png)
Faker(Ruby)を拡張してオリジナルなカスタムデータを生成できるようにする

最近、OSSに出すほどじゃないけど、うちで扱いたい形式のデータがあり、自分が指定した候補の中から、それをFakerでランダムに出せるといいなと言うことがありました。

そこで、今のところ、Fakerを拡張してそのデータ構造を簡単に作れるようにしよう。となったので、そのFakerの拡張方法についてを解説しようと思います。


## 使用技術
普段、Ruby on Railsでアプリケーション開発をしています。
テストを行うときは、[RSpec](https://github.com/rspec/rspec-rails)にて、[factory_bot_rails](https://github.com/thoughtbot/factory_bot_rails) から [Faker](https://github.com/faker-ruby/faker)を呼び出して、テストデータを生成しています。

| ライブラリ | バージョン |
|-----------|-----------|
| ruby | 3.2.2 |
| rails | 7.0.4.3 |
| factory_bot_rails | 6.2.0 |
| faker | 3.2.0 |
| rspec-rails | 6.0.3 |

## Fakerの拡張

例えば、日本のHUNTER×HUNTERのキャラクター名をランダムに返すFakerを作ります。
spec/support/faker_bank.rb
```ruby
module Faker
  class FakerHunter < Base
    class << self
      def name
        [
          "ゴン＝フリークス",
          "キルア＝ゾルディック",
          "クラピカ",
          "レオリオ＝パラディナイト",
          "ミト",
          "ジン＝フリークス",
          "カイト",
          "クロロ＝ルシルフル",
          "ノブナガ＝ハザマ",
          "フェイタン＝ポートオ",
          "マチ＝コマチネ",
          "フィンクス＝マグカブ",
          "シャルナーク",
          "フランクリン＝ボルドー",
          "シズク＝ムラサキ",
          "パクノダ",
          "ボノレノフ＝ンドンゴ",
          "ウボォーギン",
          "コルトピ",
          "イルミ＝ゾルディック",
          "シルバ＝ゾルディック",
          "ゼノ＝ゾルディック",
          "ミルキ＝ゾルディック",
          "アルカ＝ゾルディック",
          "カルト＝ゾルディック"
        ].sample
      end
    end
  end
end
```

これができたら、spec/rails_helper.rbファイルで先ほどのファイルを読み込むようにします。

以下の行のコメントアウトが外れて有効になっていれば大丈夫です。
```ruby
Dir[Rails.root.join("spec/support/**/*.rb")].each { |f| require f }
```

## 使い方

`Faker::FakerHunter.name`とすると、先ほど書いた名前からランダムな値が取得されます。

例) spec/factories/hunters.rb
```ruby
FactoryBot.define do
  factory :hunter do
    name { Faker::FakerHunter.name }
  end
end
```


## 終わりに
今回はHUNTER×HUNTERのキャラクター名を例に挙げて、Fakerのオリジナルデータを作る方法について紹介しました。
私が実際に作ったのは、DraftJSというReact製のリッチエディタで扱うJson構造が、複雑だったためそのデータをFakerで作りました。今も便利に使われています。

Fakerのオリジナルデータを作りたい人の参考になればと。
プロジェクト関連資格をまとめてみた

ほぼほぼ自分用。
プロマネ関連資格の難易度、費用をまとめてみた。


| 資格名 |認定団体 | 難易度 | 費用 | その他 |
|:-:|:-:|:-:|:-:|:-:|
|プロジェクトマネージャ| [IPA 情報処理推進機構](<https://www.ipa.go.jp/shiken/kubun/pm.html>)<BR>  | ★★★★★  | 7,500  |コストは良いが開催タイミングが少ないのと、論文対策必要。|
|[PMP](https://www.pmi-japan.org/pmp_license/pmp/)|一般社団法人 PMI日本支部|★★★★ | 405ドル（PMI会員）、555ドル（一般）  |受験要件あり<BR>実務3～5年＋PDU必要<BR>下位資格あり（CAMPなど)|
|[PMC](https://www.pmaj.or.jp/p2m/exam/about_p2m_exam.html)|日本プロジェクトマネジメント協会|★★★位？ |講習会必須10万前後<BR>+試験17,000<BR>+登録料9,438 |個人で講習会費用捻出は辛い<BR>他、PMS,PMRなど上位資格あり|
|[PJM-A](https://www.npmo.org/pjma/)|日本PMO協会|★★？  |教材22,000<BR>+試験料9,900|要件少な目。取得時、教材eラーニング＋試験のみ？<BR>上位にはPMO-Sなどあり。|
|[PRINCE2 Foundation](https://www.axelos.com/certifications/propath/prince2-project-management/prince2-foundation)|イギリス商務局 (OGC)|？？？ |57,000|教材リソース少な目<BR>上位はPractitioner|

※PJM-Aについては、アソシエイトに位置するので並べて記載するのは的確かどうかは、さておいて……。
一般的には、PM（プロジェクトマネージャ）か、PMPが知名度、評価的に高い。
PMCは、講習会のタイミングと費用の問題から個人には金銭的負担やらハードルが高そう。
PJM-Aが、個人で尚且つ、取り急ぎ取得して履歴書に記載ってパターンに向いてるかも。
（※ただし、アソシエイトなのと、知名度的にどの程度のアピールになるかが難点……。）
KotlinでFirebaseのデータを更新する

# はじめに
Realtime Databaseに関する基本的な使い方を記載いたします。
内容は、Kotlinを使ってFirebaseのデータを更新することです。

**開発環境は以下の通りです。**
- Android Studio Electric Eel | 2022.1.1 Patch 2
- Runtime version: 11.0.15+0-b2043.56-8887301 aarch64
- macOS 13.4
- Firebase Realtime Database

# Realtime Databseとは
Googleが提供しているモバイル・Webアプリケーション向けのプラットフォームです。
全ての機能がGoogleのインフラ技術に支えられており、
大規模なアプリケーションも構築することができます。

**メリットは以下の7点です**
- プラットフォームで管理する
- 機能が充実している
- データの同期が可能
- 高速なアプリケーション構築
- モダンなフレームワークとの相性が良い

# 環境構築
以下のリンクから、KotlinでFirebaseを導入することができます。
[初心者がKotlinでFirebaseを導入してみた](https://qiita.com/Natsukii/items/38cfcf6829e282b6f63e)

# データ更新処理
それでは、FirebaseのDBに特定のデータだけ、更新する処理を記載します。
```kotlin
val dataBaseReference = FirebaseDatabase.getInstance().reference 
val dataUpdateRef = dataBaseReference.getReference("パス")

// 更新するデータを指定
val updates = HashMap<String, Any>()
updates["フィールド名"] = "更新したいデータ"

// データの一部を更新
databaseReference.updateChildren(updates)
    .addOnCompleteListener { task ->
        if (task.isSuccessful) {
            // 更新が成功した場合の処理
        } else {
            // 更新が失敗した場合の処理
        }
}
```

以上で更新することができます。

# まとめ
今回は、FirebaseのRealtime Databaseで特定の情報だけを更新する方法について、
記載いたしました。
Firebaseのデータ登録や取得する方法は、以下のリンクから見てください。
[Firebase Realtime Database Android CRUD Operations in Kotlin](https://codingzest.com/firebase-realtime-database-crud-operations-android-kotlin/)
MQでmqmユーザが作成されるタイミング

事前に作成しておけばいいんだけど
作成されていない場合は
以下のようになる

```
[root@mq1 MQServer]# rpm -ivh MQSeriesRuntime-9.1.0-0.x86_64.rpm
準備しています...              ################################# [100%]
Creating group mqm
Creating user mqm
更新中 / インストール中...
   1:MQSeriesRuntime-9.1.0-0          ################################# [100%]
```
Dicision Based Adversarial Attacks 補足

# はじめに

この記事は論文を読み進める中で論文に書かれていない計算過程や疑問などをまとめたものです。読みにくい部分や間違いなどあるかもしれません。ご容赦ください。

# 論文

Wieland Brendel, Jonas Rauber, Matthias Bethge: Decision-Based Adversarial Attacks: Reliable Attacks Against Black-Box Machine Learning Models. ICLR (Poster) 2018

# 各文字の説明

$o$ : target画像（この画像の敵対的サンプルを出力したい）

# 攻撃方法

## minimal version

```math
\begin{align}
&\text{if}\quad Untargetted Attack:\\
&　　\text{initialization}: \tilde{o}^0\sim\mathcal{U}(0, 1)\quad s.t.\tilde{o}^0 \text{ is }adversarial\\
&\text{elseif}\quad Targetted Attack:\\
&　　\text{initialization}: \tilde{o}^0=\text{target image}\\
&\text{while}\quad k<max_{steps}:\\
&　　\eta_k \leftarrow \mathcal{P}(\tilde{o}^{k-1})\\
&　　\text{if}\quad \tilde{o}^{k-1}+\eta_k \text{ is }adversarial:\\
&　　　　\tilde{o}^k \leftarrow \tilde{o}^{k-1}+\eta_k\\
&　　\text{else}:\\
&　　　　\tilde{o}^k \leftarrow \tilde{o}^{k-1}\\
&　　k\leftarrow k+1
\end{align}
```

## minimal version から提案手法に近づける

提案手法では $\eta_k \leftarrow \mathcal{P}(\tilde{o}^{k-1})$ の部分を次の操作に置き換えている。

1. 各 $i$ に対して $\eta_i^k\sim\mathcal{N}(0, 1)$ として $\eta^k$ を決める。
2. $d(o, \tilde{o}^{k-1}+\eta^k)=d(o, \tilde{o}^{k-1})$ を満たすように $\eta^k$ を射影する。すなわち、中心 $o$ , 半径 $d(o, \tilde{o}^{k-1})$ の球面に $\eta^k$ を射影し、改めて $\eta^k$ とする。

また、$\tilde{o}^k \leftarrow \tilde{o}^{k-1}+\eta_k$ の部分を次の操作に置き換えている。

1. $\tilde{o}^{k-1}+\eta_k$ を $o$ に向けて少し動かす移動ベクトルを考える。小さい値 $\alpha$ を用いると、この移動ベクトル $\triangle$ は、例えば $\alpha(o-(\tilde{o}^{k-1}+\eta^k))$ とあらわされる。
2. $\eta_k\leftarrow \eta_k+\triangle$ とする。


## 提案手法

```math
\begin{align}
&\text{if}\quad Untargetted Attack:\\
&　　\text{initialization}: \tilde{o}^0\sim\mathcal{U}(0, 1)\quad s.t.\tilde{o}^0 \text{ is }adversarial\\
&\text{elseif}\quad Targetted Attack:\\
&　　\text{initialization}: \tilde{o}^0=\text{target image}\\
&\text{while}\quad k<max_{steps}:\\
&　　\eta_k \leftarrow \mathcal{P}(\tilde{o}^{k-1})\\
&　　\text{if}\quad \tilde{o}^{k-1}+\eta_k \text{ is }adversarial:\\
&　　　　\eta_k \leftarrow \eta_k+\triangle\\
&　　　　\tilde{o}^k \leftarrow \tilde{o}^{k-1}+\eta_k\\
&　　\text{else}:\\
&　　　　\tilde{o}^k \leftarrow \tilde{o}^{k-1}\\
&　　k\leftarrow k+1
\end{align}
```

# 実験

以下に示すスコア $S_A(M)$ をもとに評価している。
$S_A(M)=\underset{i}{\text{median}}(\frac{1}{N}||\eta_{A, M}(o_i)||_2^2)$

untargetted attack では

# 利点

* 画像と予測ラベルが用意できればよい（勾配がいらない）ので、手元にモデルがなくても攻撃できる。
* Boundary Atack は敵対的サンプルの基準によらず柔軟に作用する。

# その他

# Reference

* Wieland Brendel, Jonas Rauber, Matthias Bethge: Decision-Based Adversarial Attacks: Reliable Attacks Against Black-Box Machine Learning Models. ICLR (Poster) 2018
Elixirの対話モードでパターンマッチングの動作を確認してみた

# 概要
Elixirの対話モードでパターンマッチングの動作を確認してみました。以下のページを参考にしました。

https://dev.to/gumi/elixir-04--1346

# 対話モードで実行
以下のコマンドを実行しました。
```
$ iex
Erlang/OTP 24 [erts-12.2.1] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [jit]

Interactive Elixir (1.12.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> x = 1
1
iex(2)> x
1
iex(3)> x = 2
2
iex(4)> 2 = x
2
iex(5)> 1 = x
** (MatchError) no match of right hand side value: 2

iex(5)> 1 = unknown
** (CompileError) iex:5: undefined function unknown/0

iex(5)> list = [1, 2, 3]
[1, 2, 3]
iex(6)> [1, 2, 3] = list
[1, 2, 3]
iex(7)> [] = list
** (MatchError) no match of right hand side value: [1, 2, 3]

iex(7)> [a, b, c] = list
[1, 2, 3]
iex(8)> a
1
iex(9)> b
2
iex(10)> c
3
iex(11)> [a, b] = list
** (MatchError) no match of right hand side value: [1, 2, 3]

iex(11)> [head | tail] = list
[1, 2, 3]
iex(12)> [2, 3] = tail
[2, 3]
iex(13)> [1] = head
** (MatchError) no match of right hand side value: 1

iex(13)> 1 = head
1
iex(14)> [h | t] = []
** (MatchError) no match of right hand side value: []

iex(14)> list = [1, 2, 3]
[1, 2, 3]
iex(15)> [0 | list]
[0, 1, 2, 3]
iex(16)> {a, b, c} = {:hello, "world", 2018}
{:hello, "world", 2018}
iex(17)> a
:hello
iex(18)> b
"world"
iex(19)> c
2018
iex(20)> {a, b} = {:hello, "world", 2018}
** (MatchError) no match of right hand side value: {:hello, "world", 2018}

iex(20)> {a, b, c} = [:hello, "world", 42]
** (MatchError) no match of right hand side value: [:hello, "world", 42]

iex(20)> {:ok, result} = {:ok, 1}
{:ok, 1}
iex(21)> result
1
iex(22)> {:ok, result} = {:error, :oops}
** (MatchError) no match of right hand side value: {:error, :oops}
 
iex(22)> x = 1
1
iex(23)> x = 2
2
iex(24)> ^x = 1
** (MatchError) no match of right hand side value: 1

iex(24)> ^x = 2
2
iex(25)> {x, y} = {2, 1}
{2, 1}
iex(26)> {x, y} = {1, 2}
{1, 2}
iex(27)> {^x, y} = {1, 3}
{1, 3}
iex(28)> {^x, y} = {2, 2}
** (MatchError) no match of right hand side value: {2, 2}

iex(28)> x
1
iex(29)> y
3
iex(30)> {x, x} = {1, 1}
{1, 1}
iex(31)> {x, x} = {1, 2}
** (MatchError) no match of right hand side value: {1, 2}

iex(31)> x
1
iex(32)> {^x, x} = {1, 2}
{1, 2}
iex(33)> x
2
iex(34)> [h | _] = [1, 2, 3]
[1, 2, 3]
iex(35)> h
1
iex(36)> _
** (CompileError) iex:36: invalid use of _. "_" represents a value to be ignored in a pattern and cannot be used in expressions

iex(36)> 
```

# まとめ
何かの役に立てばと。
Flaskの環境構築手順

前回はFlaskについて説明しました。
今回はFlaskの環境構築についてまとめました

・前回の記事

https://qiita.com/wooooo/items/e9f96c10f870c5124d8b

# 環境構築手順
Macでの手順をまとめています

Pythonがインストールされているか確認します
```shell
$ python --version
Python 3.11.3
```

今回はvenvを使用して仮想環境上にFlaskの環境構築をしていきます
venvについては下記を参考にしてください

https://docs.python.org/ja/3/library/venv.html

ディレクトリを作成します
```shell
mkdir flask-app
```

仮想環境を作成します
```shell
python -m venv flaskapp
```

仮想環境を有効化します
```
source flaskapp/bin/activate
```

Flaskをインストールします
```shell
pip install Flask
```

続いてアプリを作成していきます
サンプルファイルを作成します
```
touch sample.py
```

flaskのコードを書いていきます
```python:sample.py
from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello World'
```

Flaskで作成したアプリを起動します
```
flask run -app sample
```

Chrome等のブラウザでlocalhostに接続すると画面上に「Hello World」が表示されます

また、ポート番号を指定することが可能です
```
flask run -app sample --port=8080
```

# 備考
## 仮想環境を無効化
```shell
deactivate
```

## チーム開発
仮想環境を有効化してから実行

全ての依存関係のライブラリをインストールする方法
```shell
pip install -r requirements.txt
```

依存関係ファイルrequirements.txtを作成する方法
```shell
pip freeze > requirements.txt
```
React HookのuseEffect()を使ったのでまとめてみた

### そもそものReactの特徴
stateを使わずに関数を書いた場合、コンポーネント内の関数が複数回実行されても、再レンダリングは起きない。

```javascript:JS
const Example = () => {
    console.log('再レンダリング')
    return (
        <intput
        onchange = {(e) => console.log(e.target.value);}
        >
    )
}
```
例えばこちらにinputフォームで、文字を入力したとします。1文字入力するごとにeventが発生し、console.log(e.target.value)が実行されます。しかし、 console.log('再レンダリング')は文字入力とは連動せず、Exampleコンポーネントが最初に呼び出された時のみ実行されます。
　
　
　
### stateを使うとどうなる
stateの値が変更されるたびに、コンポーネントが呼び出される。
```javascript:JS
const Example = () => {
    console.log('再レンダリング')
    const [text, setText] = useState('');

    return (
        <intput
        onchange = {(e) =>
        setText(e.target.value);
        console.log(e.target.value);}
        >
    )
}
```
文字入力が起きると、onChangenのeventが発生し、setText(e.target.value);によってtextの値が書き換えられる。つまり、1文字入力されるたびに、stateの値が変更される。stateの値が変更されるたびにconsole.log('再レンダリング')が実行される。このようにレンダリングされると、副産物的に関数が実行されてしまい、これを副作用と呼んだりする。
　
　
　
### useEffect()を使うとどうなる
結論：起こしたい副作用を指定したり、副作用が起きないように制御できる。
　
1秒ずつ表示される数字が1ずつ増えるタイマーを例にレンダリングで副作用が起きないようにしてみよう。
まずはuseEffect()を使わないと...
```javascript:JS
const Timer = () => {
    console.log('再レンダリング')
    const [time, setTime] = useState(0);
    
    window.setInterval(() => {setTime(prev => prev + 1)}, 1000);

    return (
        <>{time}</>
    )
}
```
これはまずTimerコンポーネントが呼ばれると、console.log('再レンダリング')が実行される。そして1秒ごとにsetTime(prev => prev + 1)が実行される。ここで注意すべきは、stateが変わると再レンダリングが起きるということ。つまり、setTime(prev => prev + 1)によってstateの値が1秒ごとに変わると再レンダリングが起きてtimeの値がおかしくなる。 
　
どうすればいいかというと、stateの値が変わっても、再レンダリングが起きないようにすればいい。言い換えると、コンポーネントが呼ばれたときに、関数が実行されるのは1度だけになるようにすればいい。

```javascript:JS
const Timer = () => {
    console.log('再レンダリング')
    const [time, setTime] = useState(0);
    
    useEffect(() => {
         console.log('useEffectが呼ばれたぜ')
         window.setInterval(() => {setTime(prev => prev + 1)}, 1000)
    },[])
   
    return (
        <>{time}</>
    )
}
```

window.setIntervalをuseEffect()の中に入れることで、Timerコンポーネントが呼ばれた時に一度だけ実行されるようになる。
　
　
　
### useEffect()の第二引数の配列について
第二引数には配列が入る。この配列にstateを含めると、そのstateが変更された時にuseEffect()の第一引数にあるコールバック関数が実行される。
```javascript:JS
    useEffect(callback関数, [state1, state2,....]);
```
Timerの例のように、コンポーネントが呼ばれたら1度だけ関数を実行すれば良い場合は、配列は空にする。
　
　
　
### まとめ
useEffect()はstateの更新時のレンダリングによって実行される副産物的な関数実行(副作用)を制御する役割がある。2回目以降のレンダリングで副作用を起こしたくないときは、useEffect()の第２引数に空配列[]を渡せば良い。
zshで変数をダンプ表示する（RubyのpやPHPのvar_dumpみたいなもの）

`typeset`がお手軽。
`declare`は`typeset`のエイリアスなので`declare`でも可。
ただし、`typeset -h`または`typeset -H`で宣言されている変数は値が表示されない（これらを表示）。

文字列
```console
$ s='hello world'

$ typeset s
s='hello world'
```

配列
```console
$ a=(hoge moge sage)

$ typeset a
a=( hoge moge sage )

$ typeset -p a
typeset -a a=( hoge moge sage )

# -p 1をつけると要素ごとに改行する
$ typeset -p 1 a
typeset -a a=(
  hoge
  moge
  sage
)

# -pをつけると、-Hで宣言された変数は値が表示されない
$ typeset -aH a=(1 2)
$ typeset -p a
typeset -a a
```

連想配列
```console
$ typeset -A aa=(a 1 b 2 c 3)

$ typeset aa
aa=( [a]=1 [b]=2 [c]=3 )

$ typeset -p aa
typeset -A aa=( [a]=1 [b]=2 [c]=3 )

# -p 1をつけると要素ごとに改行する
$ typeset -p 1 aa
typeset -A aa=(
  [a]=1
  [b]=2
  [c]=3
)
```

定義されていない変数
```console
$ typeset lajsd
（出力なし）

$ typeset -p lajsd
typeset: no such variable: lajsd
```

全変数を表示するには

```console
$ set
```

# -Hつきの変数の値も表示するには

以下の関数を定義する。

```zsh
tp() {
  emulate -LR zsh
  local variable_name="$1"
  local type="${(tP)variable_name}"
  local i

  print -r -- "$type"

  if [[ "$type" == *array* ]]; then
    for i in ${(P)variable_name}; do
      print -r -- "${(q)i}"
    done
  elif [[ "$type" == *association* ]]; then
    for i in ${(kP)variable_name}; do
      print -r -- "${(q)i} ${(q)${(P)variable_name}[$i]}"
    done
  else
    print -r -- "${(qP)variable_name}"
  fi
}

emulate -R zsh
typeset -H str='hoge moge'
typeset -Ha arr=('hoge moge' 'sage peso')
typeset -HA assoc=('hoge moge' 1 'sage peso' 2)

tp str
# =>
# scalar-hideval
# hoge\ moge

tp arr
# =>
# array-hideval
# hoge\ moge
# sage\ peso

tp assoc
# =>
# association-hideval
# sage\ peso 2
# hoge\ moge 1
```

変数展開フラグ `(P)`は展開結果をさらに変数名として展開を行う。
`(t)`は変数の型に展開する。
`(q)`はクォートする。
[Unity] Visual Studioでスクリプトの整理をする方法

# はじめに
対象者: UnityでVisual Studioを使っている方

・結果はこのような感じになります。
![スクリーンショット 2023-06-24 124224.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190066/4ca4ba30-71c2-e31e-b105-6b3ec46d594d.png)


・オリジナルのやり方なのでもっといい方法があるかもしれません。

# 環境
・Visual Studio2022 (長いので次から`VS`と呼びます)
・本記事において利用しているUnityバージョンは2022.3です。

# これ使いづらくないですか？
Unityから`VS`を初めて起動したとき、このような感じでスクリプトが上に表示されると思います。
![スクリーンショット 2023-06-24 105444.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190066/b4705096-65eb-7bb2-76bf-57da0c2e282d.png)

しかし、スクリプトの数が多くなってくると、さきほど先頭に表示されていたPlayerスクリプトが消えてしまいました。(説明のためにタブの大きさを変更しています。)
![スクリーンショット 2023-06-24 112613.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190066/4e09b66f-7822-6978-f291-f9f1aeb87563.png)

もう一度Playerスクリプトを開きたい場合は、スクロールバーの上にある逆△を押すと今まで開いたスクリプトの一覧を表示できますが、いちいち押すのがめんどくさいです。
![スクリーンショット 2023-06-24 112934.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190066/e950ca30-cd3f-3680-c30e-f9b0d2694bb2.png)

別の方法として、このように全てのスクリプトを固定化して表示するのもいいんですが、沢山のスクリプトを固定化しすぎてコードが見づらくなったりします。(経験談)
![スクリーンショット 2023-06-24 113646.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190066/06b41fdb-e8d4-eb7f-78cc-4015422a6e4e.png)

`VS`をある程度使いこなしてくるとソリューションエクスプローラーでもいいじゃんという人もいると思いますが、プロジェクトによってはスクリプトを全て一か所のフォルダーに入れるとは限らない場合もあります。
![スクリーンショット 2023-06-24 114103.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190066/117799e9-c66b-2e99-64b7-aaa5f42f9867.png)

# おすすめの分け方
そこで私がお勧めしたいのはUnity 2017.3から追加された`Assembly Definition Files`を作ってグループ分けすることをおすすめします！（長いので略して`adf`と呼びます）

`adf`を定義した場合、その定義ごとに別れて`csproj`ファイルが生成されることになります。参照を自分で設定することでコンパイル時間が短くなったり、依存関係がより明確になるなどのメリットがあります。

`adf`の詳しい解説はこちらの記事をご覧ください。
・toRisouP様 
[Unity Assembly Definition 完全に理解した](https://qiita.com/toRisouP/items/d206af3029c7d80326ed#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)

Unityで`adf`を定義した後に`VS`に戻り逆△の隣にある歯車マークからタブを左に配置か右に配置を選択します。(私は`adf`でhogehogeを定義して、左に配置を選択しました。)
![スクリーンショット 2023-06-24 1145472.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190066/d143075b-af5d-fd8f-9f00-2aed8e5c3640.png)

すると先ほど定義した**hogehoge**と未定義の**Assembly-CSharp**に分かれて、下の画像のようになると思います。
![スクリーンショット 2023-06-24 123327.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190066/0840e7b6-fcf3-d13e-8750-71364b973af2.png)

最後にドキュメント タブの色分け基準を変更して完成です。この色分けはプロジェクトで決まりがない限りは個人の好きな色でいいと思います(確かオプションから色が変更できます)。
ほかにも並び順を変えたりできるので好きなようにいじってみてください。
![スクリーンショット 2023-06-24 123714.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190066/39a7ab10-3522-ab68-daf1-437e23dfc78a.png)




EnemyとPlayerの`adf`を作って完成(冒頭に出した画像と同じです)
![スクリーンショット 2023-06-24 124224.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190066/f0c65cda-6245-4b34-b111-0281c9ab96ee.png)

- メリット
  - グループごとに見れるのですぐに目的のスクリプトが見つけられる

- デメリット
  - チーム制作の場合、メンバーが`adf`を理解していない場合は使えない
  - 設計をしっかり考えて作らないと相互参照が起こる


# まとめ
VSが見やすくなり開発効率が上がる。
adfを分けると大きなメリットがある。

# 参考記事
・toRisouP様 
[Unity Assembly Definition 完全に理解した](https://qiita.com/toRisouP/items/d206af3029c7d80326ed#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)
Flask入門 〜Pythonのフレームワーク〜

PythonのフレームワークにFlaskがあります。
Flaskについてまとめました。

# ドキュメント
・Flask公式ドキュメント
https://flask.palletsprojects.com/en/2.3.x/

・Flaskドキュメント（日本語版）
https://msiz07-flask-docs-ja.readthedocs.io/ja/latest/

# Flaskとは
軽量かつ柔軟に設計されており、手軽にWebアプリを構築できます。
FlaskにはHTMLのテンプレートエンジンであるjinja2と
WebサーバエンジンのWerkzeugで構成されており動的なWebアプリを作成できます。

他には
・Webルートを作成しシンプルなAPIが作成できる
・HTMLテンプレートエンジンのJinjaを使うことで簡単にWebページを作成できる
・Flaskは、開発者がプロジェクトの要求に合わせてサードパーティの拡張機能を導入できるフレームワーク
・Flaskには、アプリのテストやデバッグを手軽に行える開発サーバーが組み込まれている

# Flaskのメリット
## シンプル
Flaskは、シンプルさを重視して設計されていて、どの開発者にとっても理解しやすく、使いやすいです。そのため、Webアプリケーションの構築における学習のハードルが非常に低い

## 柔軟性
Flaskは基本的な機能のみを提供するWebフレームワークで、開発者はFlaskの拡張機能やサードパーティのライブラリを活用して、要件に応じてカスタマイズや機能拡張ができる

## ドキュメント
Flaskのドキュメントは非常に充実していて、初心者にもわかりやすく基礎から応用まで幅広く解説されているため、簡単にフレームワークの使用方法を習得することができる

## 互換性
Flaskは、さまざまなPythonのバージョンとの互換性があり、既存のPythonのコードベースで簡単に利用できます。複数のWebサーバーもサポートしている

## 素早い開発
Flaskのシンプルで柔軟な設計により、セットアップに必要な定型文が削減され、開発者がすぐに開始できます

# Flaskが使われているもの
・Pinterest
・Twilio
・PgAdmin

# 備考
## Webルートとは
Webアプリの特定のアクションまたは機能へのURLマッピングを指します。 Web開発ではWebルートは、ユーザーがアプリケーションのさまざまな部分と対話するためにアクセスできるエンドポイントまたはURLを定義するために使用されます。
例えば、Webルートは「/home」として定義され、Webサイトのホームページをレンダリングするロジックを処理する特定の機能またはコントローラーに関連付けられます。ユーザーがURL「example.com/home」にアクセスすると、対応するルートがトリガーされ、レンダリングされたHTMLページなどの適切な応答がユーザーのブラウザーに返されます。
Webフレームワークは、多くの場合、これらのWebルートを定義および管理するためのAPI、またはメカニズムを提供し、開発者がさまざまなリクエストを処理し、Webアプリのさまざまなページや機能をナビゲートするための論理構造を作成できるようにします。

## サードパーティ拡張機能
・拡張機能の開発のドキュメント
https://msiz07-flask-docs-ja.readthedocs.io/ja/1.1.1-docs-ja/extensiondev.html

・拡張機能（PyPI）
https://pypi.org/search/?c=Framework+%3A%3A+Flask
fatal error: 'limits.h' file not found"

何故かinclude pathが設定できていないので設定する

example:
```sh
export CPLUS_INCLUDE_PATH=/usr/sbin:/usr/lib/gcc/x86_64-redhat-linux/12/include
export C_INCLUDE_PATH=/usr/sbin:/usr/lib/gcc/x86_64-redhat-linux/12/include
```

https://stackoverflow.com/questions/35953886/include-path-directory

https://stackoverflow.com/questions/4980819/what-are-the-gcc-default-include-directories

https://stackoverflow.com/questions/56280122/gcc-fatal-error-limits-h-no-such-file-or-directory-on-macos

https://github.com/lvzixun/Clang-Complete/issues/13

https://github.com/zmwangx/rust-ffmpeg-sys/issues/3
🔰SwiftUI TextFieldで早速つまずいた話

![スクリーンショット 2023-06-24 11.41.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785720/a2e83689-364b-ddca-dab8-31230d38b69f.png)
## 何につまずいたのか
[公式ドキュメント](https://developer.apple.com/documentation/swiftui/textfield)に書かれている次のコードをPlaygroundで実行したところ、`Argument passed to call that takes no arguments`と`Cannot find 'validate' in scope`が発生しました。。

```swift
@State private var username: String = ""
@FocusState private var emailFieldIsFocused: Bool = false  // Error: Argument passed to call that takes no arguments


var body: some View {
    TextField(
        "User name (email address)",
        text: $username
    )
    .focused($emailFieldIsFocused)
    .onSubmit {
        validate(name: username)  // Error: Cannot find 'validate' in scope
    }
    .textInputAutocapitalization(.never)
    .disableAutocorrection(true)
    .border(.secondary)


    Text(username)
        .foregroundColor(emailFieldIsFocused ? .red : .blue)
}
```

## 解決方法

-   ２行目から`= false`を削除

-   validateメソッドを自分で定義する

```swift
  @State private var username: String = ""
  @FocusState private var emailFieldIsFocused: Bool

  var body: some View {
      TextField(
          "User name (email address)",
          text: $username
      )
      .focused($emailFieldIsFocused)
      .onSubmit {
          validate(name: username)
      }
      .textInputAutocapitalization(.never)
      .disableAutocorrection(true)
      .border(.secondary)


      Text(username)
          .foregroundColor(emailFieldIsFocused == true ? .red : .blue)
  }

  private func validate(name: String) {
      // Add your validation logic here
  }

```

## 感想

公式ドキュメントに書いてあるサンプルコードってそのまま動くイメージだったのですが、Swiftだとそんなことないのですね。。
ググってもよく分からず、ChatGPTに聞いてやっと原因がわかりました..orz
時間帯によって変わる表示

# 解決したいこと
時間帯によってTOPページの挨拶文の表示を変えたい。

## ②タイムゾーンの設定
config/environments/production.rb

```ruby
Rails.application.configure do
  # ...

  config.time_zone = 'Tokyo'

  # ...

end
```

config/environments/production.rbファイルには、本番環境での設定が含まれています。<br>
config.time_zoneの値を 'Tokyo' に設定することで、アプリケーションのタイムゾーンを東京に設定することができます。この設定は、デプロイされた環境（本番環境）でのみ有効になります。

## ②時間帯を条件分岐

app/views/index.html.erb
```ruby
<% current_hour = Time.zone.now.hour %>
 <% if (4..9).include?(current_hour) %>
   <h1><%= "おはようございます, #{current_user.name}さん!よくお休みになられましたか？"%</h1>
 <% elsif (9..11).include?(current_hour) %>
   <h1><%= "おはようございます, #{current_user.name}さん!良い1日を!"%></h1>
 <% elsif (12..17).include?(current_hour) %>
   <h1><%= "こんにちは, #{current_user.name}さん!お食事されましたか？"%></h1>
 <% elsif (18..21).include?(current_hour) %>
   <h1><%= "こんばんは, #{current_user.name}さん!今日もお疲れさまでした"%></h1>
 <% else %>
   <h1><%= "#{current_user.name}さん!遅い時間まで本当にお疲れさまでした"%></h1>
 <% end %>
```
解説：
```ruby
<% current_hour = Time.zone.now.hour %>
```
<% current_hour = Time.zone.now.hour %>という行は、現在の時間を取得するためのコードです。<br>
<% current_hour = Time.now.hour %>という書き方もありますが、コードはサーバーの時間を基準にしており、サーバーがアメリカの時間に設定されている場合はアメリカの時間が取得されます。
日本の時間を正しく取得するには、**Time.zone.now.hour**を使用する必要があります。
これにより、Railsアプリケーションの設定で指定したconfig.time_zoneが適用されます。
AWS Lambda　"Init failed error=Runtime exited with error: signal: killed InvokeID="エラーについて

# AWS Lambda　"Init failed error=Runtime exited with error: signal: killed InvokeID="エラーについて

インフラ系はエラー文言を読んでもエラーの内容がわからないものが時々出てきますね。

## 解決方法

MemorySizeを上げるだけです。

## 参考

https://stackoverflow.com/questions/59057934/aws-lambda-error-runtime-exited-with-error-signal-killed
ハッシュ化、ハッシュ値とは？

<h1>まずハッシュ値とは何か!<h1>


ハッシュ化とは入力データを一定の手順で計算し決まった長さの文字列を出力する事。
入力データが一緒だとハッシュ値も同じ。

<h2>メリット！</h2>
データ確認ー文字列をハッシュ下するメリットとしては入力値の長さが関係なくハッシュ値の長さは同じなため、例えば膨大なファイルが二つあるとして、そのファイルが同じ内容か確認するとき、ハッシュ値に変えて確認すると早い。

パスワード管理ー同じ文字列をハッシュ化するとハッシュ値は同じなものの、ハッシュ値から元の文字列には戻せないため、パスワード管理などに使用されることが多い。


<h2>暗号化とは違うのか</h2>

ハッシュ化は暗号化とは違います。

例えばパスワードを設定し何かしらで鍵をかけて暗号化します。ここまでは同じですが暗号化は鍵を開けると元の入力データを復元することができます。

ハッシュ値はもとに戻すことを前提に作られてないからです。



<h2>ハッシュ化の方法</h2>

まずハッシュ化するにあたってsaltと言う概念が存在します。saltは言えばどこでもドアみたいなものです。

例えばのび太の部屋（元の入力データ）からどこにも場所を指定せずにどこでもドアを開けるとそのままドアの裏側に続くだけです。ですが行きたい場所（salt)を指定して開けると指定したところに続きます。saltを指定すると指定しないのと違うハッシュ値得られると言うわけです！（例えがイマイチでしたが）

なのでもしパスワード管理にハッシュ値が使われる場合はセキュリティを強化するために全ユーザーに違うランダムなsaltが設けられます。それに付け加えてその計算を何回もします。

例えばこんな感じ

`secret_code`　→（ソルトを使ってハッシュ化）`c73729c...`　→(それをまたハッシュ化）　`bf5c75e6...` ...

を繰り返すみたいな感じです。何回繰り返すかは　iterations = （何回）って感じで指定されます。一般的には、数千から数十万回程度のイテレーションが推奨されます。安全性が重要なシステムではより多いイテレーション回数が採用される場合もあります！

また、同じソルトを使用しても、イテレーション回数が異なれば異なるハッシュ値が生成されます。セキュリティ上の理由から、一意でランダムなソルトを使用し、適切なイテレーション回数を選択することが重要です。

パスワードハッシュ生成によく使われる安全な関数です。

```diff_python
hashlib.pbkdf2_hmac(hash_name, password, salt, iterations, dklen=None)
```
`hash_name`：ハッシュ関数の名前を指定します。例えば、"sha256"や"sha512"などの文字列を指定します。

`password`：ハッシュ化するパスワードをバイト列で指定します。文字列をバイト列に変換するには、encode()メソッドを使用します。例えば、"password".encode()のように指定します。

`salt`：ソルトとして使用するランダムなバイト列を指定します。ソルトはハッシュの強度を高めるために使用されます。一意でランダムなバイト列を生成して指定します。

`iterations`：ハッシュ計算のイテレーション回数を指定します。イテレーション回数が多いほどハッシュ計算にかかる時間が増え、セキュリティが向上します。適切なイテレーション回数は、安全性とパフォーマンスのバランスを考慮して設定する必要があります。

`dklen`：出力する派生キーの長さを指定します。デフォルトでは、ハッシュ関数の出力長になります。特定の長さを指定する場合には、バイト数で指定します。

`hashlib.pbkdf2_hmac()`関数は、上記の引数を指定して呼び出すことで、PBKDF2-HMACアルゴリズムを使用したハッシュ化を行います。この関数はパスワードハッシュ化や鍵派生に使用され、セキュリティ上の目的で利用されます。


なのでこのように使うことができます。
```diff_python
import hashlib


# パスワード
password = "Secret123"

# ソルト (ランダムなデータ)
salt = b"1a3f5b2e"

# ハッシュ関数とイテレーション回数の指定
hash_function = hashlib.sha256
iterations = 100000

# PBKDF2-HMACでハッシュ化
key = hashlib.pbkdf2_hmac(hash_function.__name__, password.encode(), salt, iterations)

# ハッシュ値の表示
print(key.hex())


```


<h2>最後に</h2>
長かったですけど初めてqiitaに投稿するので頑張りました。次からはもう少しポイントを抑えて短く効率的に書こうと思いました！僕なりにハッシュ値の説明をしてみましたが書いたことに間違いがある可能性がござます。なので全部信じないでください！もし間違いがあればコメントなので指摘してもらえれば幸いです！まだまだ勉強中ですが頑張ります！
VSCodeのホバー情報で省略されてしまうTypeScriptの型情報をたっぷり表示させたい

TypeScript初心者です

tl;dr
----------

- プロジェクトのtsconfig.json の compilerOptionsの `noErrorTruncation: true` を設定しても省略されることがあった
- 上記に加え、VSCodeのインストール先のどこかにあるファイル `extensions/node_modules/typescript/lib/tsserver.js` の定数`defaultMaximumTruncationLength` を `160`から`1600` など長めに変更してTypeScript LanguageServerを再起動するとほぼすべて見えるようになった
- 変数の型を調べるのに便利な機能拡張もあるので紹介した

背景
---------

型パズルで頑張って型をつけられると、どういう型なのかよくわからないという事象にぶつかります。
VSCodeでどのような型になっているかは調べられますが、省略されてしまうこともよくあり、途方に暮れることがあります


具体的な例を見てみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52527/fc76e3c5-aae2-fc24-2d46-dd0b2b863877.png)

これはdynamodb-toolboxというライブラリで書いたスキーマっぽい何かです。DynamoDBのSDKを使ったことがある人はあの辛さはわかると思いますが、dynamodb-toolboxはその辛さの元になっているメンドクサイお作法を吸収して簡単に書けつつ各操作がそれなりに型安全に行える優れものです。例えば`key10: { type: 'string' }` という定義があれば、DynamoDBにputする時やgetした時に得られるItemの型に`key10: string`があることを補完してくれます。今回は使い方の話ではないのでここまでにします。

で、dynamodb-toolboxの型安全を支えているのが型パズルです。

ホバーに出ているのはある1つ変数の型情報です。最初の数文字読んだだけでもわけがわからないのに省略されてしまいもっと訳が分かりません。困りました。

せめて省略してなければ型定義と突き合せてもっと読めるのになぁ…という事で省略させない方法はないか調べました。


方法
----------

調べると真っ先に出てくるのは、tsconfig.jsonで`noErrorTruncation: true` にしなさいという情報が出てきますが、私の環境では改善はするものの不十分でした。

そこで、VSCodeの内部にあるファイル`~/.vscode-server/bin/ハッシュ値っぽいもの/extensions/node_modules/typescript/lib/tsserver.js` の `defaultMaximumTruncationLength `の定数を書き換えたところ満足できるぐらいに改善されました。

```diff_javascript:~/.vscode-server/bin/ハッシュ値/extensions/node_modules/typescript/lib/tsserver.js
- var defaultMaximumTruncationLength = 160;
+ var defaultMaximumTruncationLength = 1600;
```

これはissueを眺めてたら以下のコメントから知りました。

https://github.com/microsoft/vscode/issues/94679#issuecomment-1210766651

すごく微妙なやり方ですが、それなりに効果も大きかったです。


実際にどれだけなのか？
----------

### `"noErrorTruncation": true,` のみ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52527/a9d64234-69af-c7ac-7750-b2789a6c23b1.png)

スクロールバーの大きさからも分かるように、これでもかなり増えますが、それでもまだ省略されています。

### tsserver.jsのdefaultMaximumTruncationLengthを書き換える のみ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52527/575c3f61-169b-f5e5-1d88-e52a0cb5d97b.png)

こちらはさらに細かく出ますが、それでも省略されています。

### 上記2つ両方

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52527/2e268e2e-cf7c-2646-cb0f-860b5a8d6d19.png)

さっき省略されていたところも見えるようになりました。

ちなみに設定の反映はTypeScript Language Serverの再起動で反映できます。



おまけ: 変数の型情報の表示に使えそうな拡張機能
--------------

これは型引数は得られなかったので私のニーズにはあってなかったのですが、非常に便利だったので紹介させてください。

上記のGitHubのissueの中で紹介されていますが、kimusonさんが作られたこの機能拡張も便利です。

https://marketplace.visualstudio.com/items?itemName=kimuson.ts-type-expand

併せて作者の記事もご覧ください。

https://tech.mobilefactory.jp/entry/2021/12/02/000000


試しに機能拡張を上記のスクリーンショットに映っている変数 `_UserEntity`に対して使うと、こんな感じでわかります。
型パズルで作られた型だと厳しそうな様子ですが、それでもVSCodeの初期状態と比べたらかなり細かく取れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52527/fd18e6cf-c25f-b1cd-7eef-3ef70ff6a195.png)

まだ省略がありますが、1個1個プロパティを追いながら深堀できる分そんなに問題ではなかったりします。

また、記事中で書かれている再帰的に取り出す`Expand`の型実装について触れられています。
これでもある程度深堀ができますが一々書かないといけないので大変ですね。
kintone システム管理 プラグイン画面で「ページが応答しません」

Chrome で kintone システム管理 プラグイン画面で「ページが応答しません」が頻発したので、
McAfee マカフィー® ウェブアドバイザーを無効にしたら問題が解消した。

# 概要

最近になって Chrome で kintone システム管理 プラグイン画面で「ページが応答しません」が頻発
キャッシュクリアなどいろいろ対策を試したが改善せず、Chrome 拡張のマカフィー® ウェブアドバイザーを無効にしたら、問題が解消した。

Edge も同様の現象があり、こちらもマカフィー® ウェブアドバイザーを無効にしたら、問題が解消した。


# 環境 2023/06/24

- PC: MS Surface Laptop 4, CPU i5, MEM 8GB
- OS: Windows 11 Pro
- Browser: Chrome バージョン: 114.0.5735.134（Official Build） （64 ビット）
- MS Edge バージョン 114.0.1823.58 (公式ビルド) (64 ビット)
- マカフィーリブセーフ　バージョン: 1.9.253

# 現象

kintone システム管理 プラグイン画面でプラグイン画面を表示すると、「ページが応答しません」後に、Out of memory エラーになる。

![2023-06-24_10h25_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/4e839a5c-693b-8158-b502-b96e53e34eec.png)


「ページが応答しません」の状態で、メモリ使用量がどんどん上がり、その後Out of memory エラーで、メモリ使用量が戻る。

![2023-06-24_10h26_47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/b21bbd2e-81ae-e7d7-8d15-561bc884bf57.png)

# 原因

Chrome 拡張のマカフィー® ウェブアドバイザーで、メモリー大量消費

![2023-06-24_10h37_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/1d4b515a-364f-e3f4-078c-2b975853d9c6.png)

マカフィー® ウェブアドバイザー無効後のメモリ使用量

![2023-06-24_11h07_57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/ac791864-531e-5734-7a3e-311105ef715d.png)
[備忘録]自宅ラズパイで立てたアプリに自宅wifi外から接続する環境を比較的少額で作る

# 結論
sishなどIPフォワーディングツールで外部公開しているマシンからラズパイにつなぐ
ソースコード: https://github.com/antoniomika/sish
ハンズオン記事: https://kojichu.photoruction.com/entry/2022/08/08/093500

# 料金
外部公開されるlinuxマシンとAWSの場合Route53、固定IPアドレス、独自ドメインの維持費がかかるから
無料とは言わないし、月3000~4000円かかっちゃうけど、
バカ正直にEC2立てると1Webアプリあたり4000円とかかかるのが、買い切りオンプレラズパイだけでスケールできるのが嬉しい！

あと、自宅のルーターをネットワークに公開しなくてもいいのも、情弱としてはリスク背負わなくて良いのが嬉しい
rubyでRaspberry piに繋いだIO dataのCO2センサから値を読み出す。


IO dataのUSB接続CO2センサが安売りされているので買ってデータを取ってみた。
[IO data CO2センサ UD-CO2S](https://www.amazon.co.jp/dp/B09KL2LF9T?&linkCode=ll1&tag=tatsushi-22&linkId=098f463ea3cd6bdefbb2133c881fe1ff&language=ja_JP&ref_=as_li_ss_tl)
USBで接続するとシリアルポートに繋がっているようにみえ、ポートに接続するとデータが流れてくるものなので、そうくろうなく値を読み出すことができる。
どこに繋がったか調べてみると、/dev/ttyACM0　に繋がっているので、

```ruby ioDataCo2.ruby
#! /usr/bin/env ruby
require 'serialport'

class IOdata_CO2
  attr_reader :co2
  def initialize (port = '/dev/ttyACM0')
    @port = port
    #puts @port
  end
  def co2
    #puts @port
    sp = SerialPort.open(@port, 9600,8,1,0)
    sp.write "STA\r\n"
    sp.read_timeout=2500
    data = sp.read
    @co2 = String.new
    data.each_line {|line|
      #puts line
      if line[0..2] == "CO2" then
        @co2 = line[4.. line.index(",")-1]
        break
      end
      }
    sp.write "STP" +"\r\n"
    sp.close
    #puts co2
    return @co2
  end
end

data = IOdata_CO2.new('/dev/ttyACM0')
puts data.co2
```
温度や湿度も得られるけど、これはセンサの測定値補正用のものなので室温より高め。
室温が欲しければ別途室温センサ使ったほうがいいですね。
c2kをブートしてみた

とりあえずネットワークは使えるようなので、NetBSDでuimageを作ってブートしてみます。

```
Barebox-C2K >/ addpart /dev/mem 6M@0x3008000(uImage)
Barebox-C2K >/ tftp netbsd-M86XXX.ub /dev/mem.uImage
Barebox-C2K >/ bootm /dev/mem.uImage
do_bootm start map_dual_image2
Bad Magic Number: /dev/mem.uImage
booting kernel of time image from /dev/nor0.bkpkernel
```

Bad Magic Numberで失敗してます。

起動されるカーネルのヘッダーを確認してみます。

```
Barebox-C2K >/ cp /dev/nor0.bkpkernel /dev/mem.uImage
Barebox-C2K >/ md -b 0x3008000
03008000: 6a 31 38 76 31 35 30 2e 30 30 2e 30 30 5f 73 6f    j18v150.00.00_so
03008010: 66 74 62 61 6e 6b 00 56 35 2e 30 2e 30 2e 31 2e    ftbank.V5.0.0.1.
03008020: 56 35 2e 30 2e 30 2e 31 2e 72 63 33 30 5f 62 61    V5.0.0.1.rc30_ba
03008030: 6b 5f 31 2e 30 2e 32 00 b7 90 90 73 b7 d0 ca 72    k_1.0.2....s...r
03008040: 00 22 58 80 07 0b 68 83 00 48 00 04 a6 6f 33 bc    ."X...h..H...o3.
03008050: 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00    ................
03008060: 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00    ................
03008070: 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00    ................
03008080: 27 05 19 56 4c 93 3d e3 57 14 de ac 00 22 58 40    '..VL.=.W...."X@
03008090: 03 00 80 00 03 00 80 00 6c 08 4b 74 05 02 02 00    ........l.Kt....
030080a0: 4c 69 6e 75 78 2d 33 2e 32 2e 32 36 00 00 00 00    Linux-3.2.26....
030080b0: 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00    ................
030080c0: 00 00 a0 e1 00 00 a0 e1 00 00 a0 e1 00 00 a0 e1    ................
030080d0: 00 00 a0 e1 00 00 a0 e1 00 00 a0 e1 00 00 a0 e1    ................
030080e0: 02 00 00 ea 18 28 6f 01 00 80 00 03 40 d8 22 03    .....(o.....@.".
030080f0: 01 70 a0 e1 02 80 a0 e1 00 20 0f e1 03 00 12 e3    .p....... ......
```

なんだか0x80バイトのおまけがついています。同じものをNetBSDでビルドしたuimageに付けてブートしてみました。

ブートしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/a7b0da7a-0033-fbad-1172-9706dcda0cc1.png)

armv6_start.Sの先頭にuartにNを書き込むコードを入れてあります。

おそらく先頭の0x80バイトのヘッダーはファームウエアアップデートの時に確認していて、Bareboxではとくに処理をしていないように思われます。（空でも問題なく起動できました）
ラズパイカメラで動体検知してスマホに通知する

# カメラで動体検知して通知する

motionとFirebase Cloud Messagingを使う。

motionをインストールする
~~~
sudo apt install motion
~~~

motion.confを編集する
~~~
sudo nano /etc/motion/motion.conf
~~~

```motion.conf
daemon on
rotate 0
width 640
height 480
framerate 2
threshold 2000
output_pictures on
ffmpeg_output_movies on
text_double on
target_dir /home/pi/motion
stream_localhost off
```

撮影した画像・動画が溜まりすぎないようにcronでスケジューリングして削除。
（コードは省略）

motion.confのon_picture_saveで動体検知したら画像ファイルのpathを書いたファイルを更新する。

```
on_picture_save echo %f > /home/pi/detected
```

## detectedファイルの更新を監視して検知画像をサーバに送信

```crontab.
* * * * * pgrep motion_detect || /home/pi/motion_detect.sh # プロセスが無かったら起動
```

```motion_detect.sh
#!/bin/bash
# required package: inotify-tools

events=(-e CREATE -e MODIFY)
inotifywait ${events[@]} detected |
while read; do
    while read -t 0.3; do
        :
    done
    scp -i /home/pi/.ssh/ssh_key -P 22 `cat /home/pi/detected` user@domain.hostname:/home/user/特定のディレクトリ
    echo "https://domain.hostname:port/"`cat detected | cut -d "/" -f 5` | xargs python3 /home/pi/homeenv/fcm.py '誰かいる！'
done
```

inotifywaitでdetectedファイルの更新を待つ。
更新されたら検知画像をサーバに送信し、そのURLをFirebase Cloud Messagingで送信。
PythonでのFCMによるメッセージ送信とスマホでの受信はGoogle公式他記事はたくさんあるので省略。

on_area_detectedだと保存された画像がわからないので今回はon_picture_saveにした。
また、on_picture_save内でFirebaseメッセージ送信をすると処理に時間がかかりイマイチなのでファイルに書き込むまでの処理にとどめておく。それを別プロセスのinotifywaitで検知する仕組みとした。

### incronを使う
inotifywaitを直接使うよりincronの方が便利かも。

incronをインストールした状態ではincrontab -eができないので以下ファイルを追加

```/etc/incron.allow
pi
```

```incrontab.
/home/pi/detected IN_MODIFY,IN_NO_LOOP /home/pi/motion_detect.sh
```