OmniAICreator/Qiita-1.07M huggingface dataset:
全国のローソンの店舗数をコロプレスマップで描画。

1.	スクレイピング対象
都道府県データランキング(https://uub.jp/)
では、各都道府県の基本データ、市区町村のデータ、政令指定都市など指定都市のデータ、人口、面積、人口密度、公式HPなど公式広報メディア、市区町村変遷情報、ランキングデータ、雑学、地名コレクション、都道府県ランキング、新型コロナウイルス情報など多彩なデータがあり、データベース検索機能や地理好きが集まる掲示板もありとても充実したサイトである。
　このうち、本レポートではローソンの都道府県ランキングに注目してスクレイピングを実施した。

2.	ウェブサイトの構成
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004154/c62bd013-bba4-7c1d-1cd9-3ac6f8f207e9.png)
　　　　　　　　　　　　　　　都道府県別のローソンの店舗数（2022年~2011年）

上記の図のような都道府県ごとの様々なデータランキングがある。


3.	 使用したpython ライブラリ
ローソンのテーブルを取得するために、本レポートではpandasのread_html関数を使用した。　
・read_html関数について
pandas.read_html(URL、任意の引数)などと入力するとそのロケーションのhtmlファイル読み込み、ファイル中のtableタグの記述をスクレイピングする。

主な引数は以下の表のとおりである。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004154/dca8ef38-7fad-62a6-03aa-0e1c0ec230e0.png)
　　　　　　　　　　read_html関数を使う際に用いる任意の引数をまとめた表
 

・主な活用場面
・統計情報を取得し、マーケットリサーチに活用。
・他社の情報を取得し、競合分析に活用。
・株価情報を取得し、トレンドを把握し、分析に活用。
主にこのような場面が上げられる。


4.	スクレイピングに使用したコードについて
df_all = pd.read_html('https://uub.jp/pdr/m/lawson.html')  ローソンのデータを読み取る
df_test.columns = df_test.iloc[1]　　　　データから1行目を抽出
df_test.rename(df_test.iloc[:,1], inplace=True)　　データから1列目を抽出
df_test.drop(df_test.index[[0, 49, 50]], inplace=True)　0から５０の行を抽出
df_test.drop(df_test.columns[[0, 1]], axis=1, inplace=True)　0列目と1列目の行を抽出
df_test　　出力
上記のコードで、pandasのメソッドでページ全体の表データを取得する。

df_cholopleth = copy.copy(df_all[5])　　ランキング化したデータの複合オブジェクトを格納　　
df_cholopleth.columns = df_cholopleth.iloc[1]　ランキング化したデータの1行目を列とする。

df_cholopleth.drop(df_cholopleth.index[[0, 1, 49, 50]], inplace=True)　０行目を列名とし、1行目から５０行目までを抽出。
df_cholopleth.drop(df_cholopleth.columns[[0]], axis=1, inplace=True)　0列目の行を抽出

上記のコードでマップ描画用の前処理を行う。

df_cholopleth['2022年'] = df_cholopleth['2022年'].astype('int')
上記のコードでオブジェクト型に整理されていたのを数値型に変換。

choropleth_map =  folium.Map(location = [35.68, 139.77], zoom_start=7)
上記のコードで表示する中心座標、zoom_stratで縮尺を指定する。

folium.Choropleth(
    geo_data = geojson,     データを指定
    name = "choropleth",     地図のタイトル
    data = df_cholopleth,    統計データの指定
    columns = ['都道府県', '2022年'],   統計データのうち使用するカラム
    key_on = 'feature.properties.name',  統計データとの結合Keyとなる項目
    fill_color = 'YlOrRd',               色分けの指定
    threshold_scale=[0, 100, 500, 1000, 3000],   階級区分の指定
    fill_opacity = 0.7,     ポリゴン領域の透過度指定
    line_opacity = 0.2,     ラインの透過度指定
    legend_name = 'ローソン店舗数', ).add_to(choropleth_map)　タイトル指定
choropleth_map　　　　マップを表示











５．	作成したスクレイピングの応用の可能性
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004154/b252a8ff-e48e-5fa9-9d87-51807b498084.png)
　　　　　　　　　　各都道府県のローソンの店舗数を現したコロプレスマップ

栄えている都市ほどローソンの店舗数は多いと言える。
コレロマップの利点は、おのおのの統計区の広さがほぼ同じ字の場合は分布の状況がよく表されるので 、国民所得や人口密度など統計数値など地域ごとに数値を比較し可視化する際に利用することができる。
コロプレスマップの欠点は、特定の色の占める面積に左右される事である。上記の図のように、北海道は面積が広い分店舗数が多いので色が濃くなっているが、面積に対しての店舗数で考えてみればまた違った結果が表示されると思われる。
Oracle Analytics Cloud：Auto Insightsを使ってみる

# Auto Insightsとは
Oracle Analytics Cloud（**OAC**）では、ワークブックに読み込んだデータセットを使用して自動的に様々な可視化をする機能があります。
この機能は、Auto Insightsと言うものでデータセットの内容に合わせて様々な可視化を提案してくれます。
これにより、データセットの中身を素早く把握することができるだけでなく、提案された可視化をそのまま採用することもできます。

# 新規のワークブックを作成
データセットを読み込んで新しくワークブックを作成してみます。
使用するデータセットは、こちらの記事でも使用した「Sample Order Lines」を使用します。
- [Oracle Analytics Cloud：セルフサービス分析のチュートリアル](https://qiita.com/tyo38/items/b17af98dd1dc55936175)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/c6b3a550-50ec-92c2-135c-251183af7acd.png)

# Auto Insightsを使ってみる
Auto Insightsのアイコンをクリックします。
「自動インサイトは現在このデータセットで無効です」と表示されてしまいました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/9d769966-128e-3945-86dd-cc8b267d7192.png)

ワークブックの作成は一旦中止して、データセットを右クリックし「検査」を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/a9eeefe0-41d5-40d4-71a6-af29fc5fbeea.png)
「インサイトの有効化」をオンにして、「保存」をクリックし閉じます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/cba7b957-4974-e832-87b7-bafe8c04fca0.png)

もう一度、「Sample Order Lines」データセットでワークブックを作成します。
今度は、Auto Insightsを実行すると、このような画面が表示されました。しばらく待ちます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/59a8f857-7c04-1a98-3496-5a3c190e01ed.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/57c2fb33-1648-b638-08ab-30c61f0b060a.png)

# インサイトの設定
このアイコンをクリックすると、Auto Insightsに使用する列を指定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/5071082a-ff40-8e32-6ce2-45ef19597244.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/47b6416a-1d0e-310e-0914-b70907835644.png)
適用すると、再度 Auto Insightsが実行されます。

気に入ったビジュアライゼーションがあれば、そのビジュアライゼーションの右上の「＋」をクリックするとキャンバスに同じものがコピーされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/d775b55c-405a-c612-0b59-2e684d1159af.png)
Flutter (初級) as に関して

## importで使われる as
`Dart`の`import`で使われる`as`は競合する名前を持つ2種類の`メンバ(変数や関数)`の衝突を防ぐ時に利用されます。
```test.dart
class Element {
  final int value;
  const Element(this.value);
}
```
```test2.dart
class Element {
  final String value;
  const Element(this.value);
}
```
```main.dart
// testとtest2の両方に型にしたいElementクラスが存在する場合
import 'package:test/test.dart';
import 'package:test2/test2.dart' as test2;

// test側のElementクラスを使用
Element element = Element();

// test2側のElementクラスを使用
// as を使わないとtest側のElementが読み込まれコンパイルエラーを起こします
test2.Element element2 = test2.Element();
```
アプリの初回起動時間を短縮させるなどライブラリが必要になるまで読み込みを遅延させるには`deferred as`を利用します。
```library.dart
void bar() {
  final s = "start";
}
```
```test.dart
import 'package:lib/library.dart' deffered as library;

void main() {
  foo();
}
// Future内でloadLibraryメソッドを利用し読み込みます。
Future foo() async {
  await library.loadLibrary();
  library.bar();
```
## 型キャストで使われる as
上記とは異なり、変数の型をテストして別の型にキャスト(オブジェクトの型を変換)するのにも使われます。`null`やキャストできない変数に使用すると怒られます。`if`文で`is`を使用しても結果は同じです。

```car.dart
class Car {}

class Toyota extends Car {
  void car() {
    print("トヨタの自動車です");
  }
}

void main () {
  final toyota = Toyota();
  final Car prius = Toyota();
  final crown = Toyota() as Car;
  toyota.car();// 呼ばれる
  prius.car(); // エラー
  (prius as Toyota).car(); // 呼ばれる 
  crown.car(); // エラー
  if (crown is Toyota) {
    crown.car(); //　呼ばれる
  }
}
```
RubyでS3のファイルを別名でダウンロードするためのPresigned URLを取得する

## 背景
同一名のファイルをアップロードしたときにS3上でファイル名が衝突しないようにS3にはアップロード時のファイル名とは別名でアップロードしており、
S3のkeyとアップロード時のファイル名をテーブルで保持している。

Presigned URLを発行してそのままダウンロードするとS3にアップロードしたファイル名でダウンロードされる。
S3アップロード時のファイル名は衝突回避のため複雑なランダム文字列にしているためファイル名が分かりづらく、ファイルアップロード時の名前でダウンロードしたいモチベーションがあった。

## 対応内容
```rb
region = "{{your region}}"
bucket = "{{your bucket}}"
file_key = "{{your s3 file key}}"
file_name = "{{ダウンロード時に指定したいファイル名}}"
encoded_file_name = ERB::Util.url_encode(file_name) # 日本語のファイル名対応

aws_s3_client = Aws::S3::Client.new(region: region)
aws_s3_resource = Aws::S3::Resource.new(client: aws_s3_client)
aws_s3_bucket = aws_s3_resource.bucket(bucket)
aws_s3_object = aws_s3_bucket.object(file_key)

response_content_disposition = "attachment; filename=#{encoded_file_name}"
aws_s3_object.presigned_url(:get, response_content_disposition:　response_content_disposition)
```

日本語対応のためにurl_encodeをする必要があった。
IEでの確認はとってないですが多分IE対応するならもっとエンコードのパターンを分けないとダメそうな感じはしました。
情報設計で「なんか使いづらい」を解消する

この記事は[セゾン情報システムズ Advent Calendar 2022](https://qiita.com/advent-calendar/2022/sisco) 20日目の記事です。


# はじめに
はじめまして、サービスデザインチーム所属のUIデザイナーです。

突然ですが、開発の前に「情報設計」は済んでいますか？

- 時間がないからやってない？
- それは自分たちの領域じゃない？
- 情報設計なにそれ？

なるほど、お気持ちはわかります、、
ところが情報設計を二の次にしていると、せっかく開発を頑張っていても「なんか使いづらい」製品・サービスになっているかもしれません。

# 情報設計とは何か？
情報設計は「必要な情報を見つけやすく、わかりやすくするための設計」です。
機能設計にも似ていますが、情報設計の目的はユーザーが、開発側の意図した通りに情報を受け取れることにあります。

この記事では「情報設計」と記載していますが、「情報アーキテクチャ設計」「インフォメーションアーキテクチャ設計」とも同じものを指しています。

# 情報設計をしていないとなにが起こる？
情報設計を意識していなくても、画面を設計していれば何らかの設計を行っていることになります。
ただ、情報設計の工程を意識せずに進めていると以下のようなことが起こります。

- ごちゃごちゃする
- ユーザーにとって情報が見つけられなくなる
- 使いづらい・使えないと思われる
- 問い合わせが増加する
- サービス・製品自体が使われなくなる
- サービス提供側が想定していなかった使われ方をする
- 情報を追加した時に設計が破綻する
- 開発の手戻りが発生しやすくなる

このように、頭の痛くなるような事ばかり起こる可能性があるのです。

# 情報設計に必要な材料
まずは、情報設計のために必要な情報を事前に揃えます。
ここまでに揃っていなければ作成してチームメンバーと認識を合わせましょう。
必要な情報は以下の4つです。

- ビジネス要件の把握
- ユーザー分析から得られたペルソナ
- 開発サービスを利用する時のユーザーシナリオ
- 既存コンテンツのリスト

それぞれで必要なアウトプットと詳細を記載します。

## ビジネス要件の把握
アウトプット：**サービス開発の目的を明示化した 資料 or メモ**

ビジネス要件の把握で、サービス・機能開発の目的を明らかにします。
これがはっきりしていないと、そもそも作るものがブレてしまい、これ以降の工程が完璧だったとしてもやり直しが発生します。
または、ブレたまま進み続けることになります。これは避けたいですね、、、

開発の目的は振り返りや共有のためにも、必ず資料として書き起こしておきましょう。

## ユーザー分析から得られたペルソナ
アウトプット：**ペルソナ (必要な立場/人数分)**

ターゲットとなるユーザーを分析し、ペルソナを作成します。
対象とするユーザーの立場が複数ある場合、例えば申請者と承認者という別の立場のユーザーが使用するとしたら、2名分のペルソナを作成しましょう。

ここで注意点。ペルソナは、全くの想像で作り上げないこと。
ユーザーインタビューやリサーチの結果から得られた情報を使用してペルソナを作成します。

## 開発サービスを利用する時のユーザーシナリオ
アウトプット：**ユーザーシナリオ**

サービスを訪れたペルソナが、サービスの利用前〜後までどのように立ち回るかを把握します。
これも情報設計のために重要な項目です。

- 何を達成したいのか
    - そのために具体的に何をするのか
- 開発サービスを使用する前後の動き

## 既存コンテンツのリスト
アウトプット：**As-Isのディレクトリ構造**

すでにサービスがある場合は、既存構造をリスト化しておく。
この後の情報設計の「ラベル設計」段階で構造と名称を整理します。
ここで分類や関連性を確認できるといいと思います。

# 情報設計のプロセス
前提条件がまとまったら、いよいよ本題の情報設計です。
ここでは2つを作成します。

- サイトストラクチャ・ナビゲーション設計
- ラベル設計

## サイトストラクチャ・ナビゲーション設計
アウトプット：**サイトストラクチャ (Figma or Miro)**

サイトストラクチャ・ナビゲーション設計は同時に行なってしまいます。

プロダクトの用途に合わせてサイトストラクチャの形態を選択します。

- 「階層型分類構造」
- 「ファセット分類型構造」
- 「Web型(ハイパーリンク)構造」
- 「ハブ＆スポークス型構造」
- 「一覧&詳細管理型」
- 「直線型(フロー型)構造」

サイトストラクチャを書き出した後にナビゲーション(画面遷移)を表す矢印を足しています。
ここでは、ナビゲーション(フロー)として**繋がっていない画面がないか**確認が必要です。


## ラベル設計
アウトプット：**ディレクトリマップ (Excel)**

画面のディレクトリ構造を書き出します。
画面名称、URL、パスファイル、階層レベル、titleなど情報の情報構造を一覧化したものです。

これにより、概念やラベル・文章の一貫性、画面の抜け漏れがすぐにわかります。

ラベルはターゲットにもよりますが、ひと目見ただけで分かりやすいことが最も重要です。

# 情報設計完了！
ここまでで情報設計完了です。

この後、画面設計に入ります。
画面設計に必要なものは以下になります。
続きにも興味を持っていただいた場合は以下キーワードで検索してみてください。

- ゾーニング
- ワイヤーフレーム
- ビジュアルデザイン


# 最後に
デザインチームで行っている情報設計のプロセスについて紹介してきました。

エンジニアの方々だけで開発を行う際は、ご紹介した内容をぜひ実践してみてください。
デザイナーの方が実施する場合も、意識しておけばコミュニケーションが取りやすく、レビューも捗るのではないでしょうか。

この設計を使って、構造としての「なんか使いづらい」を解消していきましょう！

最後までご覧いただき誠にありがとうございました。

# 参考情報
- 長谷川敦士, IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計, 株式会社ビー・エヌ・エヌ新社, 2010年.
OculusのOVRPlayerControllerにおける移動処理が変わっていた件について（小12時間悩んだ件

4月ごろに勉強後、久々にOculusIntegration触ったら
OVRPlayerControllerの仕様（動作）が変わっていたのでメモ書きです。

具体的には、OVRPlayerのPrefabを置いても移動しなくなりました（悲しい

## 環境
・Windows11
・Unity Editor 2021.3.10f1
・Oculus Integration ver47

※環境の構築は割愛します
※Integrationは全部DLしています

## ~~構築が面倒なので~~サンプルシーンからPrefabを持ってくる
SampleFramework＞Usage＞Locomotion　のシーンを開きます。
![aaa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3009807/d03ed178-1963-9aea-984b-a495a722c661.png)

「PlayerController」が、移動設定されているOVRControllerなので
（後でSceneにもってきやすいように）Asset直下にPrefab化します。
![ccc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3009807/e8df8ee5-5968-4c34-a833-71bae2729c25.png)

## シーンに配置する+α
シーンに配置後、snap移動をスムーズに移動できるように
引っ張ってきたPrefab内の「LocomotionController」を選択、
「Locomotion Teleport」にある以下の2つにチェックを付けます。

・Enable Movement During Aim
・Enable Movement During Pre Tereport

![dddd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3009807/b95d3efd-6c42-4452-664e-949d7ddbccc1.png)


## Linkを使って動作を確認する
後はよしなに設定しながらお使いください。
OpenXRを意識しているのか、移動系の名前がLocomotionに統一されてきたのかなと、ふんわり感じております
（MRTK3での移動もXRが用意しているcsファイルを利用の模様？）

解説の記事はきっとベテランの方々が書いてくださるはず。きっと。

※Gifがうまくできなかったので画像は割愛です...
Tiny Basic用プログラム：ビン取りゲーム


# 1. はじめに

@iigura氏の[tiny basic](https://qiita.com/iigura/items/3cad19fd38def582c342)で動くビン取りゲームを作りました。

このビン取りゲームは、シャープのポケコンに入っていたゲームを参考にしています。ルールが単純だったという記憶ぐらいしかないのですが、1本から3本をお互い取っていき、最後の1本を取った人が負け、というルール**だったような気がします**。
tiny basicには丁度良いと思い作ってみました。


# 2. プログラム

次のプログラムを```bintori.bas```などの名前で保存します。

```basic
10 print "BIN TORI GE-MU"
20 input "move first? yes:1/no:0 :", f
30 if f>1 then goto 20
40 r=21
50 p=0
60 c=f
70 gosub 200
80 if p=c then gosub 300
90 if p=(1-c) then gosub 400
100 goto 80

200 print "remaining :"
210 print r
220 return

300 if r<3 then n=r
310 if r>2 then n=(r%3)+1
320 print "I want ..." 
330 print n
340 r=r-n
350 if r<1 then goto 500
360 p=1-p
370 gosub 200
380 return

400 input "next 1--3 : ",n
410 if n>3 then goto 400
420 if n<1 then goto 400
430 if r<n then goto 400
440 r=r-n
450 if r<1 then goto 600
460 p=1-p
470 gosub 200
480 return

500 print "-- you win ^o^/ --"
510 end

600 print " you lose ;_; "
610 end


```

次のように実行します。

```
tinybasic bintori.bas
```

始めに先手後手を選びます。先手なら1、後手ならば0を入力します。
あとは、残っている瓶の数を参考に、自分が取る本数を1から3入力します。
最後の1本を取った方が負けです。



# 3. 説明

作りにあたり、次のようなルーチンを考えました。

1. オープニングと先手後手の決定
2. 残りの瓶の数を表示
3. 瓶を取る
4. 瓶が0になったら終わり
5. 2に戻る

上記1が行番10から60です。変数の説明です。
- ```f```：先手後手で、人間が先手ならば 1
- ```r```：残りの瓶数
- ```p```：現在の手番、先手なら 0 後手なら 1
- ```c```：CPUは先手か後手か。先手なら 0

上記2は、行番200です。始めは行番70で行いますが、その後は各々のルーチンから200番を呼び出します。

上記3は、CPU側は行番300、人間は行番400で、それぞれのルーチンで上記4を判定しています。

- ```n```：次に取る瓶数で1から3です

あと勝ち負け表示は、行番500が人間勝ち 行番600が人間負け です。
人間が最後の1本を取ったら負け表示にジャンプし、CPUが最後の1本を取ったら人間勝ち表示にジャンプします。

肝心のCPUのルーチンは作り込んでません。たしか、シンプルな計算で強い手が打てたと記憶しています。

# 4. おわりに、雑感

tiny BASICは、ごく基本的な命令だけを用意したインタープリタです。そして、そのインタープリタを[350行にまとめる]( https://qiita.com/iigura/items/6980aa5612817653626a)というのも面白い試みだと思いました。

tiny BASICが持つ命令は、文字入出力、演算、条件分岐、ジャンプぐらいですが、それだけでも色々な事ができます。

私がtiny BASICで何を作ろうかな？と考えた際に思い出したのはポケコンでした。ポケコンは、今のスマートフォンよりも少し大きいもので、1～2行程度の液晶画面と小さいキーボードが付いていて、プログラムが作成実行できるデバイスです。
私が学生の頃は3万円程度する高級品だったのですが、とても万能な存在で、今でいう通信機能の無いスマホのような存在でした。私が学生の頃、兄から小さいポケコンを貰い、色々なプログラムを作った記憶があります。その後、もう少し大きいポケコンが欲しくて、家庭教師のバイトをして購入しました。今でいうところのスマホをバイトして買い換える学生のような感じだと思います。私がプログラムに初めて触れたのはファミリーベーシックでした。それ以来、ファミリーベーシックのプログラムが掲載されているベーマガを毎月購入しては、ファミリーベーシック以外のプログラムを読んで頭の中で処理を想像していました。いわゆる「ナイコン族」的な活動です。BASICは、基本的な命令で構成されていて理解しやすいため、それができたのだろうと思います。

そして、今回のものも、ほんの数分で作ることができる点もBASICの良いところだろうと思います。

しかし、他の言語を知っていると「この部分はBASICだと冗長だなぁ、別ので書いた方が楽できる」と思う部分もあります。この感情から、プログラミングというのは、人間が楽をするためのものであるという基本的な目的を思い出します。それでも、たまにはダラダラと書いてみるというのも楽しいと思います。

ということで、業務としてのプログラミングをして疲れた時は、楽しむプログラミングをしてみるのも1つかなと思います。
Model soupsを試してみた

# はじめに
* 本記事は機械学習の精度向上の手法であるModel SoupsをTensolFlowで試したものです。
* よくわかっていない部分もあるので誤りなどあればコメントで教えてください。

# Model Soupsとは
* 複数のファインチューニングモデルの「重み」を平均化することで精度を向上させる手法らしいです。
* よく使われる複数モデルでのアンサンブルとは異なり、Model soupsは推論時に余分な計算がいらないことが嬉しいようです。要はアンサンブルより早く結果がでるということだと思います。
* 詳細については[リンク先](https://arxiv.org/pdf/2203.05482.pdf)を参照してください。

# 参考にしたソース
* Githubに実装を上げてくれている人がいましたので[リンク先](https://github.com/Burf/ModelSoups)を参考にしました。
* 今回はTensolFlowでの実装を流用させていただきました。（リンク先にはTorchでの実装もありました）
* Model Soupには以下3つの手法が存在します。
　・uniform soup：全てのモデルを一律組み込んで平均する。
　・greedy soup：検証データに対して精度が良かったもののみを平均する。
　・learned soup：勾配ベースのミニバッチ最適化によって重みを補完する。
* リンク先ではuniform soupとgreedy soupが用意されています。今回はuniform soupの部分を流用します。使用する「重み」ですが、精度のよかったものを手動で選別しておきます。これでなんちゃってgreedy soupになると思います。

# 検証に利用する画像分類問題と使用したモデル
* 衛星画像からハリケーンで被害を受けたエリアか否かを判別するという画像分類問題で検証してみたいと思います。詳細は以下になります。 
　・学習用データサンプル数：5,991
　・評価用データサンプル数：8,232
　・使用モデル：VisionTransformer（vit_l16）

# VisionTransformerでファインチューニングしただけの予測結果
* VisionTransformerで何回かファインチューニングを実施し以下4つの重みができました。

|モデル名|予測結果(Accuracy)
|-------|-------|
|weight1|0.9927114|
|weight2|0.9939261|
|weight3|0.9939261|
|weight4|0.9936832|

* この4つの重みを使ってModel soupsをやっていきます。

# Model soupsの実装部分
* 実装はこんな感じです。最後の行で「Modelsoups」という名前で重みファイルを保存します。

```python
import numpy as np
import tensorflow as tf
from tensorflow.keras.models import Sequential
from tensorflow.keras.layers import Conv2D, Flatten, Activation, Dense, Dropout, MaxPooling2D, GlobalAveragePooling2D
!pip install vit-keras
!pip install tensorflow-addons
import tensorflow_addons as tfa
from vit_keras import vit, utils
import inspect
import time

def create_model():
    vit_model = vit.vit_l16(
        image_size = 384,
        activation = 'sigmoid',
        pretrained = True,
        include_top = False,
        pretrained_top = False)
    model = tf.keras.Sequential([
        vit_model,
        tf.keras.layers.Flatten(),
        tf.keras.layers.Dense(2, 'softmax')
    ],
    name = 'vision_transformer')    
    return model

# 重みのリスト
weight_list = ['weight1',
               'weight2',
               'weight3',
               'weight4']

model = create_model()
soups = []
for i in range(len(weight_list)):
    model.load_weights(weight_list[i])
    soup = [np.array(w) for w in model.weights]
    soups.append(soup)
if 0 < len(soups):
    for w1, w2 in zip(model.weights, list(zip(*soups))):
        tf.keras.backend.set_value(w1, np.mean(w2, axis = 0))
model.save_weights('Modelsoups')
```

# Model soupsでの予測結果
* 保存した重みファイルを使用し評価用画像の予測を行ってみます。
* 結果は**0.9946550**でした。まあちょっとは上がったのか…？

# まとめ
* とりあえずTensolflowでModel soupsやってみました。少しは予測結果も上がったので組み合わせる重みによっては効果は期待できると思います。実際、本記事執筆時点のImageNetのベンチマークでは、Model soups(ViT-G/14)が90.94%という高スコアを出しています。
* 次に何らかのコンペに参加する際は積極的に使ってみたいと思います。
SharePoint リストのユーザー列 (複数選択を許可) を使って、Power Automate でメール通知する


# はじめに

Power Apps や Power Automate で、例えば、お問い合わせを受け付けるシステムや、何かの予約を受け付けるシステムにおいて、依頼者や担当者に通知をしたいというシナリオがあります。
比較的簡単に実現できるのですが、データソースを SharePoint リストにしており、複数選択を許可しているユーザー列の全員に通知をしたい場合、少し癖があるので、方法について説明します。

# データソースの用意

今回は、以下のようなシンプルな SharePoint リストの [通知先] の列を利用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/7c1ae8f7-fc0d-5d80-c377-24b120420aec.png)

# Power Automate フローの作成

とりあえず、手動トリガーで複数の項目を取得し、[通知先] の列を使ってメールで通知をします。
ざっくりですが、以下のような感じで実現できます。

選択アクションで、通知先列の Email だけの配列を作成して、その配列を結合アクションに渡して文字列にします。セミコロン (;) で結合することで、`アドレス1;アドレス2 ` といった、普段 Outlook で複数人にメールを送るときと同じように、複数のメールアドレスがセミコロンで結合された文字列になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/5dd2fa9e-0bad-b089-2b40-0d347ae3b8c0.png)


ポイントは、以下の箇所です。

* 通知先
* 通知先 Email 

それぞれの中身は以下のような表記です

```
@{items('Apply_to_each')?['OData__x8907__x6570_']}
@{item()?['Email']}
```

:::note info
['OData__x8907__x6570_'] は [通知先] の列の内部名です。SharePoint リストをデータソースにする場合は、最初に英語名で列を作成しておくことをお勧めします。必要であれば、あとから日本語に変えます。この場合、内部名は最初に英語名で作成したもののままで、Power Apps から Power Automate で操作がしやすくなります。
:::

# 実行結果

問題なく、複数のユーザーに通知されているようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/e17f2587-2147-4895-064f-4ff666c8f68b.png)

※一旦、メール通知にしていますが、Teams に通知することも可能です。
　ただしこの場合は、宛先ごとにループさせて通知する必要があると考えます。
　こちらの方法は別途紹介しようと思います。
GCSFuseを使ってGCEにGCSバケットをマウントする

本記事は [ZOZO Advent Calendar 2022](https://qiita.com/advent-calendar/2022/zozo) カレンダー Vol.4 の 21 日目の記事です。昨日の投稿は @luckyriver  さんの「[見やすいダッシュボードのために意識した７つのこと](https://qiita.com/luckyriver/items/ba4b7eddf8f9a8211cd0)」でした。

# GCSFuseとは
GCSFuseを使うことで、GCSバケットをファイルシステムとしてGCEにマウントすることができます。

https://github.com/GoogleCloudPlatform/gcsfuse

# 使い方
基本的には[インストール手順](https://github.com/GoogleCloudPlatform/gcsfuse/blob/master/docs/installing.md)通りに設定を行います。

# Terraformを使って設定する
今回に関してはGCS,GCEともにTerraformで管理をしたかったため、GCSFuseについてもGCEの起動時に一緒に設定を行うようにしました。

以下がGCEのインスタンステンプレートの設定になります。
参照している他のリソースについては割愛させていただきます。
```terraform
resource "google_compute_instance_template" "test-gcs-fuse-instance-template" {
  description = "Instance template for test-gcs-fuse"
  region      = local.region

  instance_description = "test-gcs-fuse instance"
  machine_type         = "f1-micro"

  scheduling {
    automatic_restart   = true
    on_host_maintenance = "MIGRATE"
  }

  disk {
    source_image = "ubuntu-2004-lts"
    auto_delete  = true
    boot         = true
  }

  network_interface {
    network    = google_compute_network.test-gcs-fuse-vpc.name
    subnetwork = google_compute_subnetwork.test-gcs-fuse-vpc-subnet.name
  }

  metadata_startup_script = templatefile("../../scripts/init_gcs_fuse.sh", { ENVIRONMENT = local.env })

  service_account {
    email  = google_service_account.compute-engine.email
    scopes = ["cloud-platform"]
  }

  lifecycle {
    create_before_destroy = true
  }
}
```

GCEには[起動スクリプト(start-up script)](https://cloud.google.com/compute/docs/instances/startup-scripts?hl=ja)という機能があり、その名の通りインスタンス起動時に実行させたいコマンドを記述したファイルを渡すことで、起動時に行う設定などを自動化することができます。

今回はシェルスクリプトで起動スクリプトを用意し、そちらを以下のようにTerraformの[templatefile](https://developer.hashicorp.com/terraform/language/functions/templatefile)で参照するようにしました。
```terraform
metadata_startup_script = templatefile("../../scripts/init_gcs_fuse.sh", { ENVIRONMENT = local.env })
```

参照している起動スクリプトが以下になります。
起動スクリプト内でGCSFuseのインストールと、マウントするバケットの指定を行っています。
```shell
#!/bin/bash

set -eu

sudo apt-get update && sudo apt-get install -y curl lsb-release gnupg

export GCSFUSE_REPO=gcsfuse-`lsb_release -c -s`
echo "deb http://packages.cloud.google.com/apt $GCSFUSE_REPO main" | sudo tee /etc/apt/sources.list.d/gcsfuse.list
curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add -

sudo apt-get update && sudo apt-get install -y gcsfuse

echo "mount file from gcs."
sudo su - test-gcs-fuse-user -c "gcsfuse GCSバケット名 /home/test-gcs-fuse-user"
```

また、以下の記述でGCEが使用するサービスアカウントを指定しているのですが、このサービスアカウントにはマウントするバケットの閲覧権限が必要になります。
```terraform
  service_account {
    email  = google_service_account.compute-engine.email
    scopes = ["cloud-platform"]
  }
```

# まとめ
今回初めてGCS Fuseを使いましたが、簡単にGCS上のファイルをGCEで見れるようになるので便利だと思いました。
また、GCEの起動スクリプトでGCSFuseのインストール・マウント設定を行うことで、サーバーをスケールアウトさせた際にも自動で設定を行ってくれるため良いかと思います。
UbuntuにMATLABをインストールするときに困った 2022冬

 

https://jp.mathworks.com/matlabcentral/answers/1763280-ubuntu20-04-matlabr2022a

# 0.経緯

2022/12/20
UbuntuにMATLABを入れる機会があって，うまくいかなかった．

# 1.環境
```bash
~$ uname -r
5.15.0-56-generic

~$ lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 20.04.5 LTS
Release:	20.04
Codename:	focal
```

# 2.手順
公式HPを参考にしながらインストールを進めた.

https://jp.mathworks.com/help/install/ug/download-without-installing.html

1. MATLABを公式HPからダウンロード
ダウンロードして一応home直下にコピー (~/matlab_R2022b_glnxa64/)

1. インストール

```bash
~$ cd matlab_R2022b_glnxa64
~/matlab_R2022b_glnxa64$ ./install
```
# 3.問題

インストール途中の，「保存先フォルダーの選択」で「選択したファイルに書き込めません」と怒られた．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/884474/e15311dd-81fa-8cf7-b0b4-5c3bad968dba.png)

# 4.解決策

インストールディレクトリの所有権を変更した．


```
~$ sudo chown [ユーザー名]:users /usr/local/MATLAB/R2022b
~$ sudo chown [ユーザー名]:users /usr/local/bin

※[ユーザー名] は whoami で表示されるユーザー名
```


2行目は，/usr/local/binにシンボリックリンクを作る場合は同様のエラーが出るので，その対策．

参考:

https://jp.mathworks.com/matlabcentral/answers/1763280-ubuntu20-04-matlabr2022a




なお，

https://qiita.com/chicken9/items/65799a63cccb9a4a947a

こちらで紹介されている，chmodでのパーミッションの変更ではできませんでした.
おまかんでしたらご連絡くれると嬉しいです.

ひと昔前はgksudoでいけたみたいですが，そもそもgksudoが廃止されているので使えません．

# 5.おわりに
色々変更されすぎててわからん
Riverpodを使用した非同期処理について【Flutter】

# 今回記事にしたこと
最近、Flutterの学習をしているのですが、ボタンタップ時の非同期処理（API通信）の仕方がわからかったため、調べてみました。

# 環境
flutter 3.3.9
flutter_riverpod: 2.1.1

# Riverpod
公式ドキュメント
https://riverpod.dev/ja/docs/getting_started

簡単にいうと状態管理を容易するためのパッケージ。です。
検索すると多くの記事がヒットすると思うので説明は割愛させて頂きます。

# 今回作成したもの
ログイン画面を作成しました。
以下の流れを想定しています。
1. メールアドレスとパスワードを入力する。
2. ログインボタンを押下する。
3. ログインAPIを実行する。
4. ログインAPIの結果(bool)を受け取り、次の画面に遷移する。

# 具体的な実装

## Userクラス
メールアドレスとパスワードを持ったUserクラスを作成します。
```
@freezed
class User with _$User {
  const factory User({required String mailAddress, required String password}) =
      _User;
}

```

## StateNotifier
RiverpodのStateNotifierを使用し、ログインしているかどうかの状態を持つLoginNotifierを作成します。
このクラスにログインメソッド、ログアウトメソッドなどを載せてます。
実際にAPIを実行するのではなく、それっぽく見せるため3秒ほど遅延処理を追加してます。
```
class LoginNotifier extends StateNotifier<bool> {
  LoginNotifier() : super(false);

  Future<void> login(User user) async {
    state = await Future.delayed(
      const Duration(seconds: 3),
      () => true,
    );
  }

  Future<void> logout() async {
    state = false;
  }
}
```

## StateNotifierProvider
LoginNotifierの状態をpublicで公開するStateNotifierProviderを作成します。
```
final loginProvider = StateNotifierProvider<LoginNotifier, bool>((ref) {
  return LoginNotifier();
});
```

## LoginWidget
ログインボタンタップ時の処理に以下を追加する。
ここで先ほど書いたログインメソッドを実行してます。
```
final user = User(mailAddress: 'email', password: 'password');
ref.read(loginProvider.notifier).login(user);
```

`ref.listen`で状態の監視が可能です。
LoginNotifierの状態が変更された場合は以下の処理が実行されます。
successにログイン結果のboolが格納されており、その値が`true`の場合にLoginResult画面に遷移します。
```
class Login extends ConsumerWidget {
  const Login({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    ...
    ref.listen<bool>(loginProvider, (_, success) {
      if (success) {
        Navigator.push(context,
            MaterialPageRoute(builder: (context) => const LoginResult()));
      }
    });
    ...
```


# まとめ
FlutterとRiverpodで非同期処理（API通信）の実装の仕方を調べてみました。
他にも色々とやり方はあるのかなとは思いますが、とりあえず実現できました。
cookie, session, tokenの区別

<h3>cookie, session, tokenを区別するために前提として理解してほしいことは、<br>「httpにはステートレス」ということです。</h3>

<h4>ステートレス</h4>
<p>ステートレス、つまり状態を持たないことです。<br>
誰からリクエストが来たのかを覚える必要は一切なく、ただただリクエストに対してレスポンスを返せばいいのです。<br>
しかし、webアプリケーションが進化するようになってから、httpがステートレスの状態だとUserにとってとても困ります。<br>httpがステートレスのため、ログインしても、自分が過去にいいねした商品、ショッピングカートに入れた商品が見れません。<p>

<h4>Sessionによる認証</h4>
そこで頭のいい人は、Session idを使ってhttpをステートフルにするための方法を考えました。<br>session idはただの文字列だと思って大丈夫です。Session idはweb serverから生成し、Userに割り当てします。また、違うUserがもらったsession idは違います。
次回からhttp requestが送られる際に、session idも一緒に添付されます。<br>
このsession idを持って、web serverが誰から来たのリクエストを判断することができます！同じsession idのため、過去のリクエストの内容ももちろん確認することができるため、httpはステートフルになりました！

<h4>Sessionによる認証のデメリット</h4>
しかし、session idは全部web serverから生成し、web serverはみんなのsession idを保存しないといけないため、とても大変です。<br>そうです、実はserverに大きな負担をかけています。
またweb serverの拡張能力を制限しています。<br>例えば、serverAがツヤさんのリスエクトをリダイレクト処理でserver Bに転送されました。server Bはツヤさんのsession idを持っていません。
これを解決するため、ツヤさんのsession idをserver Aからserver Bにコピーしなければいけません。

<br>
もっと楽にsession idを確認する方法はないかなと、session id保存用のserverを構築して、毎回リクエストが来たら、<br>server Aとserver Bもそこからsession idを確認すればいいじゃんと考えている方もいると思いますが、実はそれもリスキーです。例えば、ある日にsession id保存用のserverがダウンしたら、大変なことになります。
説明からわかったように、sessionによる認証の管理が大変です。

<h4>Tokenによる認証</h4>
そこで、違う視点から問題を解決する方が現れました。なんでsession idはserverで保存しないといけないの？　webブラウザで保存すればいいじゃない。<br>しかし、web serverで保存しないと、どうやってこれかのsession idはweb serverが生成したものだと証明できるのですか？
ここからはTokenの出番です。
<br>
例えば、ツヤさんがあるショッピングサイトをログインしました。<br>web serverがTokenを生成し、Tokenの中にツヤさんのUser idが含まれていて、ツヤさんに渡しします。<br>次回からツヤさんが訪問する際に、Tokenをhttp Headerに入れて、web serverを訪問します。
またTokenを偽造できないように暗号化する必要があります。
<br>
例えばHMAC-SHA２５６のアルゴリズを使って、Tokenのデータを暗号化します。<br>このTokenについて、
web serverは保存しません。次回、ツヤさんが来た際に、同様なアルゴリズを使って、Tokenのデータを暗号化します。この二つの暗号化の結果を比較します。<br>こもし同じであれば、ツヤさんが登録済みのことがわかります。直接ツヤさんのUser idを受け取ります。もし違っていれば、データは改ざんされたことが推測できます。
<br>
また、Tokenの中のデータは明文保存のため、誰かに見られる可能性はあります。そのために、暗証番号のような秘密情報はTokenに入れてはいけません。
<br>
これでweb serverの負担は大幅軽減されました。やることとしては、Tokenを生成し、Tokenの認証だけです。sessionを保存するためのスペースが空きました。

<h4>Cookie</h4>
webブラウザが永久に保存できるデータのことです。
Cookieはweb serverが生成し、webブラウザに送ります。ブラウザがCookieをstorageに保存します。<br>次回同じサイトをアクセスする際に、そのCookieをweb serverに送ります。一般的にCookieのサイズは小さいです。

<h4>Session</h4>
例えば、誰かと会話する際に、今会話している対象が誰なのかを判明するため、Sessionを使います。Sessionの情報はweb serverに保存されます。<br>
web serverがsessionの情報を臨時にweb serverに保存します。Userがブラウザを閉じたら、web serverに保存されたsession　idが自動に削除されます。そのため、ブラウザが閉じられた後のアクセスについて、web serverがまた新しいsession idを生成してブラウザに渡します。<br>
Sessionによる認証のデメリットとしては、リクエストがあるたびに、web serverでSessionの参照と保存を行います。
そのため、処理が遅くなるのが考えられます。

<h4>最後に</h4>
基本的に大規模の開発ではToken認証が主流です。
<br>
Token認証については、サーバ側で情報を管理しませんので、ステートレスとなります。並列処理も実施しやすくなります。大規模の開発ではToken認証の方が適しています。
また、ネイティブアプリの開発にCookieの保存ができないので、Tokenは向いています。
Token認証の方が安全性が高いです。特にCSRFを防ぐために有効です。<br>
CSRFについて話すと、長くなりますので、次回に書きたいと思います。<br>

Tokenを使うことによって、Sessionに対する操作が減り、Tokenには時効もあるため、安全性が向上されます。
Token認証のデメリットとしては、TokenのデータサイズはSessionより大きいです。ブラウザでTokenを管理する場所として、LocalStorageかCookieに保存できます。また、Cookieは保存上限が4KBのため、保存する際に注意が必要です。
心理学とAIについて

## 心理学の応用可能性

私は専攻の勉強をしていくなかで、心理学の観点から、人とAIの関わりについてこれからもっと研究が盛んになっていくのではないかと考えています。もともと心理学は下記のようにAIの誕生に関わっており、近接した分野であるため、心理学的な観点からの研究はAIの発展や浸透に役に立つと考えられます。そこで、心理学のいくつかの領域において、具体的にどのようなアプローチができるか考えてみました。

#### 認知心理学
認知心理学は、人間のインターフェースとしての五感を通じて、人々がどう物事を捉えるか、またはそれらの感覚器官から得られた情報を高次のレベルでどう処理しているか検討する分野で、そういった人間の情報処理モデルの理解は初期のAIの構想にインスピレーションをもたらしています。今後はAIがつくったものや出力した判断に対して、人間がどう認知するか、といった還元する形での研究も行われていくと個人的には考えています。

#### 社会心理学
社会心理学では従来人々の集団の内外における行動や対人行動について研究がなされてきました。今後、AIやロボットがある程度主体的な判断ができる(ようにみえる)水準となってきたとき、そういった「社会」や「コミュニティ」といった枠組みに、AIやロボットを含むタイプの研究が可能になるのではないかなと思っています。AIやロボットが生活に溶け込み、人々をサポートしていくようなSF的な未来のあり方も、こういった研究を通じて共生のあり方を探っていけるのではないでしょうか。

#### 臨床心理学
認知心理学や社会心理学と違い、現場で心の疾患や悩みと実践的に向きあう臨床の研究分野があります。たとえば近頃は医療の現場でも、診断など様々なフェーズで AIの導入が検討され始めています。一方で、臨床心理の分野ではまだそこまでAIの応用の検討は進んでいないと思いますが、それはやはり人の心の状態を把握したり、その状態を変化させるのは人間でも高度な経験的知識が要求されることでもあり、データとして形にしにくいものであることが挙げられると思います。対人の精神療法において、AIやテクノロジーがどのような形で導入できるかは、心理学の臨床現場でこれから研究されていくのではないでしょうか。
## 研究紹介
ここで、自分が取り組んだ研究についても軽く触れようと思います。
認知心理学専攻の私は、AIが発揮する(したように見える)意図性や創造性を、人々はどう捉えるかという観点から実験を組みたてました。
先の夏くらいから画像生成AIがエンジニア界隈を超えて大きく盛り上がっていましたよね。私の場合、はじめに具象的な絵画作品を30枚収集し、それらと同じテーマの絵画をStable diffusionを用いて8月末から9月にかけて30枚生成しました。実験の参加者にはそれらの絵画の魅力度を評価してもらい、作者を判別してもらう試行を実施しました。

美術作品のメッセージ性、意図性は作品の美しさや魅力、価値を左右する要素です。ですのでその要素の中身で分類し、条件を分けることで意図性を実験の中で操作したかったのですが、現時点では倫理的な観点から、AIで非行にはしる描写やいびつで醜い表現は生成が難しく、そのようなアプローチが成り立ちませんでした。そこで、道徳的/倫理的な描写の文章・ニュートラルな文章・反道徳的な文章の3段階のいずれかを絵画作品のテーマを補足するものとして付け足すことで、そのような意図性の道徳的な側面を代替的に操作しました。

もともと神経科学的な研究から「美しい」と「善い」の知覚は脳の同じ部位が共通して活性化することが知られており、美的感覚と道徳性の間にも何かしらの関連があると考えられています。というよりもむしろ、目に見えないが良いとされる規範意識という意味では、道徳を「高次の美」と定義することも可能だと考えられます。(このあたりの話は石津智大著・『神経美学』を参照しています。気になった方は読んでみてください。)

実験の結果としては、意外とAIが描いたから、人間が描いたから、という観点バイアスはそこまで見られず、それよりも、AIの絵においても道徳性が高い絵の方が評価が高くなる傾向が認められました。ただ、道徳性の高い文脈の絵画の方が人間が描いたものだと思われやすく、反対に道徳性の低い(反社会的な行動を描いた)分脈の絵はAIによるものと考えられやすいこともわかりました。

他の結果や考察は今回は割愛させてもらいますが、この記事で心理学的なアプローチにも興味を持っていただけたら嬉しいです！皆さんも是非心理学や神経科学の論文を見かけたら読んでみてくださいね。
【SetROBO】Class名を指定してコントロールを操作する

# はじめに
こんにちは。今年度から社内PCのキッティングに携わるようになった@Cheeeeeseです。

SetROBOを使ってキッティングしていく中で、記録が出来ない、SetROBO関数のUIコントロール（ControlTypeとControlNameで指定）では動かせないコントロールがありました。

対処法として座標で操作する方法はあるんだけど極力避けたかったので、何かいい方法がないか問い合わせてみたところ、ControlのClass名を指定する方法を教えてもらたので記録しておきます。

# 環境
- Windows 11 Pro 21H2 (64bit)
- SetROBO for Kitting V1.9.5体験版

# 状況
▸ サクラエディタのインストールで、「設定をユーザ毎に個別に設定する」のチェックボックスが記録できず、InspectでControlTypeとControlNameを調査したが、これ ↓ では動かない。
`PlayLib.Window("サクラエディタ セットアップ").UICheckBox("設定をユーザー毎に個別に管理する").Click();`

▸ 他の画面にあるチェックボックスはショートカットキーが設定されているが、このチェックボックスはショートカットキーの指定もない

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2830862/d4175de0-6a2e-3234-d62e-25fb62a8a1ef.png" width="70%">



# ControlのClass名を指定して動かす方法
### 01.対象のコントロールを記録
「設定をユーザ毎に個別に設定する」のチェックボックスの操作を記録します。
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2830862/cdf9eeea-93b9-c656-937f-8d77117de28e.png)

### 02.対象のコントロールのClass名を確認
Inspectを使用し、チェックボックスのClass名を確認します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2830862/3c56bd90-6e42-bfbc-a61c-e57a371b548c.jpeg" width="70%">

「設定をユーザ毎に個別に設定する」のチェックボックスのClass名は`TNewCheckListBox`でした。

### 03.コードの確認
「設定をユーザ毎に個別に設定する」のチェックボックスの記録で取得できている値とClass名が一致しているので、コントロール名はUnknownのまま、取得できたClass名を指定します。

PlayLib.Window("サクラエディタ セットアップ").Unknown("TNewCheckListBox", "TNewCheckListBox&1").Click(1,1);


これで、UIコントロール（ControlTypeとControlNameの指定）では動かせないコントロールを、クラス名の指定で動かすことが出来ます。

### 備考
ConductorのヘルプでUnknownコントロールに今回の方法が記述されています。
>●説明
>　　　　本ツールで対応していないコントロールを指定します。

とのことなので、UnknownのままClass名を指定してコントロールを操作する方法は、<b>SetROBOのコントロール関数(ButtonとかUI～とか)で対応できないコントロールの場合</b>に使えるみたいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2830862/d2761cc8-e5b6-7ce4-0bdd-e3b2b194682d.png)

# 最後に
ショートカットキーが設定されていればそっちを使った方が楽なので滅多に使わなそうだけど、いざという時はClass名を使った方が座標とかより確実ですね。

# 参考にしたサイト
- Conductorヘルプ
- [SetROBO](https://www.setrobo.jp/)
【VSCode】かわいいエディタの作り方

## はじめに
VSCodeで最強にかわいいエディタの設定を考えてみたので、ご紹介します:hugging:

## テーマ設定
### [Rounge Theme](https://marketplace.visualstudio.com/items?itemName=josef.rouge-theme)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/ab83cf6e-8b4e-3e4a-31a5-e874eeeb7cfa.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/ef49dc7f-0fdd-3f2c-92f1-fc66dc33045f.png)

ピンクがメインカラーになっているので、ザ女子って感じでかわいいです:relaxed:
文字の色合いはピンク、黄色、黄緑系なので色合いが完璧です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/db656abf-d498-c978-a77a-a75607f99af6.png)
また、文字の設定を行えばさらにかわいくなります！この「lang」の見た目が最高にかわいいです:relaxed:

ちなみに・・・
[Panda Theme](https://marketplace.visualstudio.com/items?itemName=tinkertrain.theme-panda)
パステルカラーがメインカラーとなっているこのテーマもオススメです:point_up_tone1:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/30ab0e9c-9acb-b872-5f4d-8d931b6a7695.png)

## ペット
### [vscode-pets](https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/08b210a9-ab31-e858-fab6-a77c27c98b08.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/97c8edf6-3db5-21b3-252a-1535ba947daa.png)
設定をするとエディタの下の方にペットが現れます。これは作業中の癒しですね:relaxed:


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/f482f85c-f3fd-d687-779a-bbbfb1a06be8.png)
カーソルを合わせると手を振って（？）くれます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/791655f2-6de2-9d4d-988c-62ced795b2d4.png)
設定画面にてペットの種類や色など設定ができます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/0d05f945-5d82-db0d-b907-7387a8e1e1d9.png)
猫と犬など複数のペットを表示することも可能です:point_up_tone1:個人的に犬より猫の方がかわいいかも・・

### [nyan-mode](https://marketplace.visualstudio.com/items?itemName=zakudriver.nyan-mode)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/c89e5763-5a8a-e638-e755-0aa42fbc66c7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/d7a31891-2356-08b2-ed57-30c10455c306.png)
表示しているファイルのスクロールした分だけ、猫が進んでくれます。そのため、今ファイルのどこの位置を見ているのかを確認ができる拡張機能です！便利かつかわいいですね:relaxed:

## さいごに
VSCodeのかわいさの追求は今後もしていき、気持ちよく作業をしていきたいと思います:point_up_tone1:
VSCodeで git clone（MacOS）

## 概要

VS Code で git clone する方法をよく忘れてしまうので記録


**確認した環境**
・macOS Monterey 12.5.1 
・Visual Studio Code 1.74.1

## 手順

1. `Command + Shift + p` でコマンドウィンドウを開く

1. `gitcl`くらいまで入力すると Git Clone が出てくる
![スクリーンショット 2022-12-20 11.42.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2174570/af887f06-7b57-e74e-e2e6-3231f9110df7.png)

1. `リポジトリ URL を指定するか、リポジトリ ソースを選択します。`と表示されるので指定する
![スクリーンショット 2022-12-20 11.52.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2174570/b8901152-eae6-ada4-bd3b-eab840227e16.png)

私はGithubのリポジトリのページからコピーして貼り付けています。
![スクリーンショット 2022-12-20 11.46.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2174570/7714054c-5f30-9136-4b99-530e6d278b70.png)

Clone先を選択して完了。
Box Relayでファイル/フォルダ名を動的に割り当ててみよう

# はじめに
2022年11月下旬にファイル名、フォルダ名を動的に命名するBox Relayの機能がリリースされました。
この記事ではどのようなシーンで活用出来そうか紐解いてみたいと思います:writing_hand:
# Relayのフロー作成画面
まずはRelayの作成画面を確認してみましょう。
これまではファイルやフォルダの作成、コピー時に設定出来る名前は固定値のみでしたが、
変数が使えるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988253/d8a21ef3-e01c-b3be-cd43-d66fd2205318.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988253/e96b553b-8215-e103-7711-dd7fccb45a26.png)
ワークフローフォルダ名や日付を変数として利用出来るようになっていますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988253/9dcd7e4c-2502-1106-1eb2-7e5e8afc5e64.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988253/4e9e0f75-ab1a-4817-b9ce-cabe2b18a362.png)
入力に要する手間が省力化され、命名規則の統一やファイル一覧表示時の視認性向上に役立ちそうです。
【例:各部門でRelayを開始。フォルダ名と日付を割り当てたファイルを総務部フォルダに集約】
![relay.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988253/5462fa60-7faf-63ec-0c69-312b0e0c67be.png)
# ファイルリクエスト連携
ファイルリクエスト機能との組み合わせも便利です。
受信したファイル名に変数を割り当てることで識別がさらに容易になります。
![FR_Pre.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988253/d7d6d646-aca0-b5f7-f0b9-52a5892208e0.png)

:::note info
ファイルリクエストの概要については[こちら](https://support.box.com/hc/ja/articles/360045304613-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%81%AE%E6%A6%82%E8%A6%81 "ファイルリクエストの概要")を参照して下さい
:::

さらに、Box Enterprise Editionではファイルリクエストのフォームで入力したメタデータの情報をファイル/フォルダ名に割り当てることが出来ます。
例えばアップロードしたユーザー(送信側)の会社名をファイル名に設定するようにすれば、
状況確認やタスクの分担がスムーズになりそうですね。
【例:ファイルリクエストで受信したファイルにRelayで日付と会社名を動的に割り当て】
![FR.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988253/30d4ffed-516a-d4ad-43a3-15279953570c.png)
![FR15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988253/f7906e99-49f8-66b1-27cb-f4cd72deb55d.png)
![FR2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988253/5efc965d-0032-3443-c5b4-11e2cf51da85.png)

:::note info
Box Enterprise EditionはRelayのメタデータイベントとアクションに対応しています。
ビジネスプランによるRelayの機能差異については[こちら](https://support.box.com/hc/ja/articles/4402975396499-Box-Business-%E6%B3%95%E4%BA%BA%E5%90%91%E3%81%91-%E3%83%97%E3%83%A9%E3%83%B3%E3%81%A7%E3%81%AERelay%E3%81%AE%E6%A9%9F%E8%83%BD
 "Box Business (法人向け) プランでのRelayの機能")を参照して下さい
:::

# 最後に
たくさんの要望を受けてリリースされた動的命名機能ですが、今後更に進化していく予定ですのでご期待下さい。
さらに便利になったBox Relayを活用し、自動化と標準化による業務効率化にお役立て下さい！:grinning:
開発業務とバンド活動に共通する基盤、その後ろにある共通項を考えたかった


昨日の@kosan さんのコードレビュー振り返りに続きまして、[Wano Group Advent Calendar 2022](https://qiita.com/advent-calendar/2022/wano-group)の20日目の記事となります。  
（「レビューで受けた指摘の内容をまとめておこう」という発想がもうエラいと思いました。ワタシも電車で舌打ちされたこととかをデータベースにまとめようと思います）

# 更新履歴
- 2022.12.20 初稿

# ネタバレ
対象：だれでも
チーム開発業務はバンド活動と同様、メンバーを尊重することがとても大事！
バンド活動はチーム開発業務と同様、メンバーを尊重することがとても大事！


# はじめに
こんにちは！@shibe_ です。[TuneCore Japan](https://www.tunecore.co.jp)でバックエンドエンジニアをしています。  
今年の3月にTuneCore Japanに入り（採用に至るまでの経緯などは[こちら](https://group.wano.co.jp/blog/2835/)）、実装業務にたずさわるかたわらで演奏活動を行っています。

https://www.tunecore.co.jp/artists/4meals_a_day?lang=ja

その中でいつか、以下のようなコミュニケーションが発生したことがありました。

## :pencil: ソースコードのレビューにて  
:computer: < shibe君、今のコードだと一回の更新処理のために**データの取得処理を行いすぎてると思う！** 処理速度が早くなるように、まずは**二重ループになってる部分を分けて**みない？

:dog2:  < ご指摘ありがとうございます……

## :microphone2: 演奏の合わせ練習にて  
:guitar: < shibe君、サビに入ってから **音量がちょっと大きすぎるように感じる！** 他の楽器が聞こえるように、**今の2割くらい**の音量で試してみてもいい？

:dog2:  < ご指摘ありがとうございます……

# 比較してみよう！
みなさまほんとうに優しくご指摘くださり涙が出そうになりました。生きているといいことってありますよね。  

上記の指摘事項では、以下の余白が残されているように感じます。
- 自分が「正しい」と思う意見に固執しない
    - 「〜だ！」 -> 「〜と思う」という言い換え
- メンバーの意見を得られる余白をつくる
    - 「〜しない？」という提案形式での指摘
- メンバーが最善と信じる行動を取っていると信頼すること
    - ものごとを頭ごなしに否定しない！

さて、このようなコミュニケーションはそれぞれどんな精神性から来ているのでしょうか？


## :computer:  デベロッパーは？
[Team Geek ―Googleのギークたちはいかにしてチームを作るのか](https://www.amazon.co.jp/Team-Geek-―Googleのギークたちはいかにしてチームを作るのか-Brian-Fitzpatrick/dp/4873116309) にて提示されている、
Googleチームの基盤となる三本柱「HRT」は以下の通りです。
> 1. 謙虚（Humility）
> 2. 尊敬（Respect）
> 3. 信頼（Trust）

上記三点すべてが相手（＝メンバー）を尊重する、という点が共通しています。

## :violin:  それでは、ミュージシャンは？
また、[成功する音楽家の新習慣 ~練習・本番・身体の戦略的ガイド](https://www.amazon.co.jp/成功する音楽家の新習慣-練習・本番・身体の戦略的ガイド-ジェラルド・クリックスタイン/dp/4636943376)では、プロフェッショナリズムの4つの要素として以下を提示しています。

> 1.時間を守る  
> 2.しっかり準備する  
> 3.礼儀正しさ  
> 4.誠実さ  

その中で、
> 3.礼儀正しさ
> 4.誠実さ

が特に「HRT」と類似した概念であると考えられます。


# なんで？
もちろんこれらは「人として当然だから」と考えることもできると思います。ですがただ当然なのであればわざわざここに書かないでしょう。「当然」である以上に必要な理由、すなわちそれらを求められる「状況」があるはずです。状況についての仮説を以下に記します。

- **締切**が存在する
- ひとりでできることは**限られる**
- そのくせ**ひとりでやらなければやらないことがある**
- 目標と実績を**定量的・定性的に評価する**必要がある
    - しかもその評価は**相互評価**である


# 感想
仮説を考えてみて、これって音楽の制作や開発業務にとどまらない抽象度になっている気がしてきました。もしかしたら、たとえば「シェフのためのレストランビルディング手法」みたいな本とかもあったりするのかも。  
引き続きこれらの文献を読み、より円滑なプロジェクト推進ができるよう尽力してまいります。
この記事で、より多くの魂が救われることをここで祈り続けています。

## 参考文献
- [Team Geek ―Googleのギークたちはいかにしてチームを作るのか](https://www.amazon.co.jp/Team-Geek-―Googleのギークたちはいかにしてチームを作るのか-Brian-Fitzpatrick/dp/4873116309)
- [成功する音楽家の新習慣 ~練習・本番・身体の戦略的ガイド](https://www.amazon.co.jp/成功する音楽家の新習慣-練習・本番・身体の戦略的ガイド-ジェラルド・クリックスタイン/dp/4636943376)


***  
TuneCore Japan では 一緒に働くメンバーを募集しています。
エンジニアだけでなく、Director等の各種ポジションをオープンしているので興味がわいた方はぜひご覧ください！


https://www.tunecore.co.jp/jobs
each_with_indexを使用したプログラムを作成する問題

## 問題


以下の配列から任意の数字を探して何番目に含まれているかという結果を返すsearchメソッドを、`each_with_index`
を用いて作成するという問題。

```
input = [3, 5, 9 ,12, 15, 21, 29, 35, 42, 51, 62, 78, 81, 87, 92, 93]
```

**出力例**

search(5, input) → 2番目にあります

search(12, input) → 4番目にあります

search(7, input) → その数は含まれていません

まず、`each_with_index`がわからないので理解します。

### each_with_indexメソッドとは

```ruby
配列名.each_with_index  do |item, i|

end
```

例

```ruby
fruits = ["メロン", "バナナ", "アップル"]

fruits.each_with_index do |item, i|
 puts "#{i}番目のフルーツは、#{item}です。"
end
```

出力結果

```ruby
0番目のフルーツは、メロンです。
1番目のフルーツは、バナナです。
2番目のフルーツは、アップルです。
```

### とりあえず、書いてみる。

```ruby
def search(target_num, input)
  input.each_with_index do |num, i|
    puts "#{i}番目にあります。"
   end
end

input = [3, 5, 9 ,12, 15, 21, 29, 35, 42, 51, 62, 78, 81, 87, 92, 93]
search(5, input)
```

出力結果

```ruby
0番目にあります。
1番目にあります。
2番目にあります。
3番目にあります。
4番目にあります。
5番目にあります。
6番目にあります。
7番目にあります。
8番目にあります。
9番目にあります。
10番目にあります。
11番目にあります。
12番目にあります。
13番目にあります。
14番目にあります。
15番目にあります。
```

意図した結果とかなり違います。

失敗を分析して次に活かします。

- 数値がない場合は「ありません」を返すのでif文を使ってみる。
- `each do`で配列を全部表示してしまっているので`return`で止めてみる。

### 書いてみる。（２回目）

こういうこと？

```ruby
def search(target_num, input)
  input.each_with_index do |num, i|
    if num == input[i]
      puts "#{i + 1}番目にあります。"
      return
    else
      puts "その数は含まれていません。"
   end
  end
end

input = [3, 5, 9 ,12, 15, 21, 29, 35, 42, 51, 62, 78, 81, 87, 92, 93]
search(5, input)
```

出力結果

```ruby
1番目にあります。
```

1番目にはないんです。

ということは　if num == input[i]がまずそうです。

returnで止まったのはよかった。

”５”と”num”が同じになったところで表示してほしい・・・

## また書いてみる

・仮引数と実引数の値の受け渡しがよくわからないので、困ったら`binding.pry`。

　・・・エラー。どうやらrailsでしか使えない？

- `binding.pry`が使えないなら、`puts`で直接出力してみる。

結果

```ruby
puts target_num  → 5
puts num → 3
```

なるほど、`target_num`は仮引数からの引き継ぎ？でメソッドの中でも”5”、`num`は配列の一つ目の値”3”ということ。

ということは　`num` と`target_num`がイコールでif文を作ればいいんですかね。

```ruby
def search(target_num, input)
  input.each_with_index do |num, i|
    if num == target_num
      puts "#{i + 1}番目にあります。"
      return
    else
      puts "その数は含まれていません。"
   end
  end
end

input = [3, 5, 9 ,12, 15, 21, 29, 35, 42, 51, 62, 78, 81, 87, 92, 93]
search(5, input)
```

出力結果

```ruby
その数は含まれていません。
2番目にあります。
```

余計な表示が出てる・・・

`else`がいらない？

配列の中を探してもイコールの値が見つからなかった結果が”含まれていない”だからeach分の外に表記？

```ruby
def search(target_num, input)
  input.each_with_index do |num, i|
    if num == target_num
      puts "#{i + 1}番目にあります。"
      return
    end
  end
  puts "その数は含まれていません。"
end

input = [3, 5, 9 ,12, 15, 21, 29, 35, 42, 51, 62, 78, 81, 87, 92, 93]
search(5, input)
```

出力結果

```ruby
2番目にあります。
```

こういうことですね！
スッキリしました！
KiCadを入れたての日本語化手順

# はじめに
こんにちは！ 京都先端科学大学工学部のCoroと申します。
基板設計の沼を覗きに来たそこの君！よくぞ来てくれた！
工学の情報や技術は日々進歩しているのでなかなか狙った情報が見つかりにくくなってきているとは思います！
そんなか基板設計をしてみようと思ったけど 

*「ソフト英語じゃん、読めねえ」*
*「日本語にしたいんだが…」*

みたいなの、日本産ソフトが無いときによく起こりますよね。わかる。世界共通語を日本語にしてくれ。
しかもバージョンアップしたらやり方変わったりとか、Macユーザーはやり方違ったり…。

なので今回は **MacOS** の **2022/12/20** 時点でデフォルトダウンロードされる **Version: (6.0.9-0)** での日本語化についてCookieを焼いておきますので牛乳片手に食べていってくださいませ！

(Windowsも多分おんなじような感じだと思うので、後日検証しておきます)

# 日本語化手順
日本語化の手順はすごく簡単！
インストールのやり方は他のネットから拾ってきたアプリと同じなので同様にしていただいて大丈夫ですので、今回はインストール直後から写真とともにお送りします。

### インストール直後
![スクリーンショット 2022-12-20 11.08.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223129/75f2d6aa-87a9-ceb8-9a1f-bdca9873f4a2.png)
Launchpad上に彼らが表示されるはずです。メインは青いアイコンの「KiCad」になりますので、とりあえず他のものはフォルダにまとめておいていいかと思います。では起動しましょう。

### 初期画面
![スクリーンショット 2022-12-20 11.11.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223129/56cb4b99-a131-d2f3-4f82-c48b4da78280.png)
恐らく初めてインストールされた方はだいたい英語のはずです。でも日本語メインで生活してる方はなかなか使いづらいと思います。
でもご安心ください！
KiCadは現在日本語設定も搭載してくれているので安心して使うことができます！ありがとうKiCad！

### いよいよ日本語化
では日本語にしましょう！
まずマウスカーソルを画面上部に持っていき、アプリケーションメニューを表示しましょう。
![スクリーンショット 2022-12-20 11.16.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223129/3c18f7e4-6194-0e4f-e172-9244dbfaa286.png)
だいたいのソフトは **KiCad** と書かれているところに出てくる **Preferences** (日本語で言うと環境設定)の中に言語設定があるんですが、このソフトは違います。(今のところ…)

なので右の方にある **Preferences** を直接クリックしましょう！
![スクリーンショット 2022-12-20 11.17.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223129/ef94f548-42e0-5f3c-e178-76b0e3b179dc.png)
するとあら不思議。 **Set Language** がこんなところにいるじゃないですか。
あとは簡単です。 **Set Language** にカーソルを合わせれば自分の好きな言語に設定できます！
![スクリーンショット 2022-12-20 11.26.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223129/38381f0c-5850-ac41-f5e9-77f148af9b05.png)

# 最後に
無事これで日本語化ができました！おめでとうございます！
KiCadはフリーソフトなのに機能が盛り沢山で、情報もたくさん落ちている優秀なCadなので、みなさんも自作キーボードなど作ってみましょう！
ようこそ基板沼に！
![スクリーンショット 2022-12-20 11.26.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223129/8585b96f-a81f-9d81-78b7-4de6cbea9f28.png)
jsでobject型である連想配列の中身を取り出す。

# 結論
```js:JavaScript
    formName (object) {
      return Object.keys(object).map((key) => {
        return { id: object[key].id, name: object[key].id + ' : ' + object[key].name }
      })
    }
```

# 解説
Object.keysを使用することにより配列のように扱えることとと
値を抽出する時は object[key].idのようにする。

mapのvalueを使い
map((key,value) => {
value.id
value.name
のようにしたくなるが、valueには配列の番号しかはいっていないため
目的の値を取り出すことはできない。
仮想マシンのトラブルに直面した時の対応・切り分け方法　一例

# この記事を書いた理由
トラブル発生時に何をやるべきなのか、基本的なところをあまり悩まず見て動く事が出来るようにする自分用のメモです。

※作業中、Hyper-V仮想マシンでトラブルが発生して、その時の自分の対応があまりにもヘタレだったので、少しでも改善したいと思い、これを書きました。

Hyper-V仮想マシンじゃなくても、他の仮想環境や物理サーバ環境であっても、今回のやる事リストである程度は共通して実施出来ると思います。

# 想定トラブル(私の場合は実際に作業中で起きた事)
Hyper-V仮想マシンにパッチを適用、再起動実施したら「再起動します。。。」のようなメッセージが画面に表示されたまま、仮想マシンの画面が動かなくなった。

Hyper-V管理コンソールから、仮想マシンの停止やシャットダウンを実施してみたが、すべて効果無。
一度仮想マシンのコンソール画面を閉じて開き直すと、真黒な画面が表示されるのみ。

# やる事リスト～確認する

まず第一に、大きく息を吸って、頭を冷やして冷静になる事！
これ一番大事だと思います。
焦ってしまうと大事な事を見落としたり、普段ならやらないような危険な事をやってしまって
取り返しがつかない状況になってしまう事があるので、焦りは禁物です。

その後に。。。
1. 仮想マシンへPing実行
1. RDP接続が可能か確認
1. 別のユーザでログイン可能かどうか確認
1. (ドメイン環境でAD配下の仮想マシンの場合)同じドメイン参加のサーバ上から、対象仮想マシンのイベントログを確認してみる
1. その仮想マシン上で動かしているサービスが利用可能か確認する
1. 対象仮想マシンのOSバージョンや仮想マシンの設定(特にHyper-Vの場合、統合サービス周り)の確認

# やる事リスト～確認後の対処

■ネットワークがつながっていて、仮想マシン上で動いているサービスが利用可能な場合

・ユーザが使っている可能性が高い場合は下手な事は出来ないので、再度色々実施出来る時間帯まで待つ。
待っている間に状況が変わる場合もあります。
(プロセスがタイムアウトしたり等)

★イベントログが確認出来た場合、ログに記載されていた内容について調べる。
↑
これは必ず実施。何が発生しているのかが分からないと、対処のしようがないので。

■ネットワークはつながっているが、仮想マシン上で動いているサービスが利用不可の場合

・NICを外す等を行い、ネットワーク接続を切ってみる。
・(可能であれば)仮想マシンが稼働しているホストごと再起動実施

# 実際に起きたトラブルの原因について

私の周りで実際に発生したトラブルの原因は、どうやら仮想マシンの古いOS(この時はWin2008 R2)が持つバグだったようです。
ずっと稼働しっぱなしだったサーバに接続した後、ログアウト出来なくなる事があるとの事で、
その場合はNICを切断し、タイムアウトになるのを待つのが一番早い解消方法だとか。
OS再起動を行った時にログアウトが出来ず、ずっと待ち状態になったままというのが、今回直面したトラブルで発生した出来事でした。

目の前で発生した時は何が起きたか分からず、顧客の本番環境で発生したトラブルという事もあり、どうしよー！？！と焦りまくって胃が痛かった。。。
Nuxt3でproxyして外部APIにアクセスするには

# βまでの方法
Nuxt3で 外部APIにアクセスしたい場合、
βでは `nuxt.config.ts` に↓の様に書いてvite経由でいけたのですが…

```
vite: {
    server: {
      proxy: {
        "/api/": {
          target: process.env.PROXY_API_URL,
          secure: false
        }
      }
    }
  }
```

諸々の議論があったようで本リリースでは使えなくなっています。

また、[@nuxtjs/proxy](https://github.com/nuxt-community/proxy-module) の対応もまだ（renovate/nuxt-3.xというブランチは存在）なので
現状では自分で server を書かないとだめそうです。

# 本リリース以降の方法

/api のアクセスをproxyするとします。

ディレクトリとファイルの作成

```
.
├── server
│   ├── api
│   │   ├── [...].ts
```

この `[...].ts` というファイル名がポイントで /api/* の * を全て受け入れてくれます。
[公式ドキュメント Catch-all Route](https://nuxt.com/docs/guide/directory-structure/server#catch-all-route)

## `[...].ts` の中身（JWTサンプル）

```
import {defineEventHandler, getHeaders, getMethod, getQuery, readBody} from "h3";

const config = useRuntimeConfig()
const baseURL = config.public.apiUrl

// noinspection JSUnusedGlobalSymbols
export default defineEventHandler(async (event) => {
    const method = getMethod(event)
    const params = getQuery(event)

    const headers = getHeaders(event)

    // tokenをクッキーに保存するとした場合
    const authorization = headers.Authorization || getCookie(event, 'auth.token')

    // /api -> / にプロキシしたいので replaceで消す
    const url = (event.node.req.url as string).replace(/^\/api/, '')

    const body = method === "GET" ? undefined : await readBody(event)

    return await $fetch(url, {
        headers: {
            "Content-Type": headers["content-type"] as string,
            Authorization: authorization as string,
        },
        baseURL,
        method,
        params,
        body,
    })
})
```

## 自己証明書を利用する場合
`.env` に以下を追加してください。

```
NODE_TLS_REJECT_UNAUTHORIZED=0
```

（これを思い出して調べるの意外と時間がかかった…:no_mouth:）
fetchAPIをつかってるはずなのでagentを渡せば…と思いきや、
FetchOptionsにagentが渡せそうにないのでこの方法で。
```
interface FetchOptions<R extends ResponseType = ResponseType> extends Omit<RequestInit, "body"> {
    baseURL?: string;
    body?: RequestInit["body"] | Record<string, any>;
    params?: SearchParameters;
    query?: SearchParameters;
    parseResponse?: (responseText: string) => any;
    responseType?: R;
    response?: boolean;
    retry?: number | false;
    onRequest?(context: FetchContext): Promise<void> | void;
    onRequestError?(context: FetchContext & {
        error: Error;
    }): Promise<void> | void;
    onResponse?(context: FetchContext & {
        response: FetchResponse<R>;
    }): Promise<void> | void;
    onResponseError?(context: FetchContext & {
        response: FetchResponse<R>;
    }): Promise<void> | void;
}
```