OmniAICreator/Qiita-1.07M huggingface dataset:
Vue3 + Element Plus + TypeScript + Viteでシンプルモダンなアプリケーションを作成


## やりたいこと

VueのUIフレームワークである`Element Plus`を試す。
環境構築から、軽い画面作成まで行う。

## Element UI と Element Plus の違い

`Element UI` と `Element Plus` は、どちらも Vue.js のUIライブラリで、同じELEMEのチームによって開発・管理されています。
`Element UI`はVue 2に対応しており、Vue 3には対応していませんが`Element Plus`はVue 3 に対応しています。
`Element UI`はメンテナンスモードに入り、新機能やアップデートの提供は低頻度になっています。

## 環境

- Vue3
- Vite
- TypeScript
- Element Plus

## インストール

viteで新規プロジェクトを作成します。
実行すると対話形式で「プロジェクト名」「使用するフレームワーク」「言語」を聞かれるので、適当に解答します。
今回はフレームワークは`Vue`、言語は`TypeScript`とします。

### プロジェクトの作成

```bash
npm create vite@latest
```

### 一旦 起動確認

以下のコマンドで起動確認を行います。

```bash
cd プロジェクト名

npm install

npm run dev
```

このViteの画面が表示されたら、ここまではOKです。

![image-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243130/8fb28025-6b73-fb17-dca8-75d849011062.png)

### Element Plus のインストール

次は本命の`Element Plus`をインストールしていきます。

```bash
npm install element-plus --save
```

次に`main.ts`と`App.vue`の中身を以下のように書き換えます。

```ts:main.ts
import { createApp } from 'vue'
import './style.css'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
```

```vue:App.vue
<template>
  <el-button type="primary">ボタン</el-button>
</template>
```

以下のように表示されれば、`Element Plus`は無事に動いています。

![image-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243130/9ad453c6-0f31-654c-fb5f-e1bde5aed223.png)


## コンポーネントを適当に配置してみる

ここではソースは割愛しますが、公式のコンポーネントリファレンスを参考に、簡易的なレイアウト作成し、カードやテキストボックスなどを配置してみました。


https://element-plus.org/en-US/component/button.html

![image-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243130/0514314d-a069-a4ba-e261-c7ba0fa479ae.png)

### 成果物

今回作ったものは以下のリポジトリにアップしてあります。

https://github.com/MURAMASA2470/vue3-vite-typescript-element_plus

## 参考

https://qiita.com/genenao21/items/95b99f452dcce5c7d706
最近の若者は本当に背が高くなっているのか？折れ線グラフで考察すると思った以上に意外な事実が...

#### ■JMPでは誤差バーの位置をずらすことができる
JMPの「グラフビルダー」では、折れ線グラフに誤差バーを追加した際に、複数の系列の誤差バーが重ならないようにずらして表示できます。

以下は、3つの系列（青、赤、緑）に対して平均の時間的推移を示す折れ線グラフですが、それぞれの平均値に対する標準誤差を誤差バーとして表示しています。
![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417820/9e2dee19-645a-b6ef-cc6c-23a4067bff90.png)
このとき、複数の誤差バーが重なるので、これらを視覚的に分けるために位置を調整する必要があります。例えばMicrosoft Excelでは、異なる系列のデータ点を元の値から少し変更してグラフ上での位置を調整する必要があります。

一方、<font color="red">JMPでは、「誤差バーのオフセット」という機能を使って、これらの誤差バーを簡単に調整できます。</font>

そこで、本ブログでは身近なデータを使って、この機能の効果をアピールしてみます。

#### ■「最近の若い人は背が高いねえ」という見解は本当なのか？
年配の方々の中には、「最近の若者は、私たちの世代と比べて背が高い」と感じる方がいらっしゃいます。これは、テレビで見るスポーツ選手の影響かもしれませんが、一般的に、日本の若者、特に男子学生（小学生、中学生、高校生）の平均身長がそのように推移していっているのかを調べてみます。

ここでは、文部省の学校保健統計調査の結果を利用してみます。

1970年度からおよそ10年おきに、男子学生11歳（小学生）、14歳（中学生）、17歳（高校生）の調査対象者に平均身長、標準偏差データとして取得し、JMPのデータテーブルにまとめてみました。
![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417820/68e8779e-34b3-b376-8c17-148ddd514bcc.png)
※2020年度、2021年度のデータも公開されていますが、コロナの影響により調査期間がそれ以前の年度と異なるようなので、ここでは2019年度のデータを最新のデータとして用いています。

データを見るだけでは傾向が読み取りにくいので、年度ごとの身長の推移を折れ線グラフにしてみましょう。

細かい操作方法は省略しますが、JMPの「グラフビルダー」で、標準偏差を誤差バーとした平均値の折れ線グラフを描くと次のようになります。
![画像3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417820/471ceb0b-3e6d-d5ae-e66e-0437d4d1f027.png)
※11歳、14歳、17歳は、それぞれ小学校、中学校、高等学校の最終学年になるので、グラフ右上の凡例には小学校、中学校、高等学校と記載しています。

小学校のデータは問題ありませんが、中学校と高等学校の誤差バーが重なってしまいます。このため、データのばらつきをより明確にするためには、誤差バーの位置を調整することが望ましいです。

このとき、JMPでは「グラフビルダー」の左上にある赤い三角ボタンから、 [**誤差バーのオフセット**] を選択することにより、以下のダイアログボックスでオフセットを指定できます。オフセットの値を大きくするほど、ずらす幅が大きくなります。
![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417820/7f4cc5d0-7286-67d5-b505-591a8c245820.png)
位置を調整した後のグラフです。誤差バーをずらすことによって、1970年度の中学校のばらつき（標準偏差）は、他の年度と比べ大きいことがわかります。
![画像5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417820/602aa4a8-3866-150b-d911-6c45280d0578.png)
全体的に、小・中・高校生の身長の平均は同様の傾向を示しており、2000年度以降はほぼ横ばいの状態が続いています。

17歳の男性では、その後身長の伸びが停滞し、現在の日本人男性の平均身長は約170cmで、これは過去数十年間ほぼ変わっていません。したがって、若い世代の身長が伸び続けているわけではないことがわかります。

ある記事によると、出生体重の減少が身長の成長に影響を与えているとされています。確かに、最近は以前に比べて低出生体重の赤ちゃんが増えたと聞きますので、今後もしばらくは同様の傾向が続くのかもしれません。

#### ■17歳男性の平均身長の推移
最後に、17歳男性に対する1年ごと（1960年度～2019年度）の身長の推移を折れ線グラフと平滑線で描いたものを示します。
![画像6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417820/5373adb5-6cb7-b2fb-3dfa-3ed9d11b94fc.png)
1995年度あたりから平均身長の伸びは横ばいになり、その後、若干ではありますが減少傾向を示しているのです。男性の身長は高ければ良いとは限りませんが、将来のことを考えるとこの傾向は注目すべきことです。

by  増川 直裕（JMP Japan）

[**Naohiro Masukawa - JMP User Community**](https://community.jmp.com/t5/Naohiro-Masukawa/bg-p/nmasukawa-blog)

■30日間全機能無料の[**JMPトライアル版**](https://www.jmp.com/ja_jp/download-jmp-free-trial.html?utm_campaign=bl&utm_source=jmpblog&utm_medium=article)をぜひお試しください。
プログラミングについて管理者がとりあえず知っておきたい内容　Go言語編

# 業務で利用しないのに何日もかけて勉強するのはちょっとしんどい！

「1日」ならできる！


# たった1日で基本が身に付く！Go言語　　清水 美樹[著]


以下は本のホント触りの部分。詳しくは本を参照ください！

・Google社が開発したプログラミング言語。
・「構造体」「ポインタ」等、C言語を感じさせるが、C言語より簡単
・コンパイラを用いてOS上で直接動く実行プログラムを作成する。




|言語|説明|
|----|----|
|C/C++|WEBアプリから周辺機器のドライバまで幅広い用途。コンパイラ必要。|
|Java|オブジェクト指向言語。C言語の書き方に近い部分あり。ライブラリや開発ツール豊富。実行環境をインストールした上でコンパイラで中間言語に変換する。|
|C#|Microsoftの.NETフレームワークを実行環境とするオブジェクト指向言語。コンパイラ必要。Microsoft Visual Studioが主要な開発ツール。|
|Python|最近ではAIと共に再注目されている。|
|JacaScript|HTML5との組み合わせでWEBページの記述で使用される言語。WEBブラウザに実行環境が実装されている。フレームワーク多い。|




WEBブラウザ上でGoプログラムを実行できる環境
https://go.dev/play/

Goコンパイラのインストール
https://go.dev/dl/


goファイルを利用するには、とにかくbuildして、実行する
```
go build test.go
test.exe
```

### この本の特徴
・データの型やfor文、if文、switch文等は他プログラミングと一緒だが、この本は一つ一つのコードの説明を丁寧に記載している。
・何となく把握している人にとっては改めて、「データの型」「引数」と「戻り値」「関数の構造」「構造体」「インターフェース」等の基本から勉強できる。


### その他
・「ポインタ」の必要性は分かるけど、相変わらず「ポインタ」をどうしても使わないといけないような場面をイメージできない。

・値がない場合は「null」。
なお、値を定義しない場合でも、文字列なら空の文字列、数値なら0、bool型ならfalseが入る。
Unityでゲームを作る　その３　カメラ追従、キャラ操作など

この記事は、[【完走したい】楽しくいろいろやる Advent Calendar 2023](https://qiita.com/advent-calendar/2023/notbeginner)の21日目です。
復習を含みます。
# キャラを操作する（復習）
キーボードのキーでキャラが動くようにします。
基本的に、矢印のキーで移動できるようにします。
キーボード入力は、
```
Input.GetKey(KeyCode.キーの名前); 
```
でできるようです。

↓書いたコードがこちら
```
   if (Input.GetKey(KeyCode.LeftArrow))
   {
       this.transform.Translate(0f, 0.0f, -0.6f);
   }
   if (Input.GetKey(KeyCode.RightArrow))
   {
       this.transform.Translate(0f, 0.0f, 0.6f);
   }
   if (Input.GetKey(KeyCode.UpArrow))
   {
       this.transform.Translate(-0.6f, 0.0f, 0f);
   }
   if (Input.GetKey(KeyCode.DownArrow))
   {
       this.transform.Translate(0.6f, 0.0f, 0f);
   }
```
これで、動かしたいものがいい感じに動きました。
# カメラを追従させる
前回の記事に乗せた動画ですでに実装してしまいました。
Unityではカメラを簡単に追従させることができます。
やり方はシンプルで、カメラを追従させたいオブジェクトの子オブジェクトにするだけです。
<b>が、このやり方だとカメラの向きが固定されます。</b>
ということで、上のコード（移動）に、カメラの向き変更するようにします。
# カメラの向きを変える
カメラの向きをキャラの向きにします。
```
 public GameObject Cam;
 private Vector3 latestPos;  
void Update()
  {
   Vector3 diff = transform.position - latestPos;   
  latestPos = transform.position;  
   Cam.GetComponent<Transform>();

 if (diff.magnitude > 0.01f)
 {
     Cam.transform.rotation = Quaternion.LookRotation(diff);
 }
  }

```
magnitudeを使うと、ベクトルの長さを知ることができます。
rotationを設定するときに、vector3を使って指定することはできません。
これで、カメラが動いた方向に向いてくれました。
<iframe width="560" height="315" src="https://www.youtube.com/embed/JuuSRlngY_E?si=Zx_ZS5dENURne2fF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
# まとめ
キャラの移動までできました。
もうすぐ完成です。

参考

https://www.sejuku.net/blog/83728

https://tech.pjin.jp/blog/2021/01/13/unity_csharp_getkey/

https://www.hanachiru-blog.com/entry/2019/02/20/183552

https://www.sejuku.net/blog/51521

https://docs.unity3d.com/ja/2020.3/ScriptReference/Vector3-magnitude.html
Cocoapods管理ライブラリからプライバシーマニフェストと署名の対象となるSDKを調べる

2024年春以降、Appleから指定されたSDKについて、App Store ConnectでこれらのSDKを含むアプリを提出する場合や、アプリのアップデートの一環としてこれらのSDKのいずれかを追加するアップデートを提出する場合には、プライバシーマニフェストを含める必要があります。

https://developer.apple.com/jp/support/third-party-SDK-requirements/

このうち、アプリに該当のSDKがCocoapods管理ライブラリで混入されているかどうかを調べるruby scriptを作成しました。

# ファイル
以下の2ファイルを同じディレクトリに配置します。
`pod_file_path`は任意のPodfile.lockのパスに置き換えてください。

```check.rb
def find_matching_keywords(text, keywords)
  text = text.downcase

  matching_keywords = []

  keywords.each do |keyword|
    matching_keywords << keyword if text.include?(keyword.downcase)
  end

  matching_keywords
end

def read_file_content(file_path)
  File.read(file_path)
end

def read_keywords_from_file(file_path)
  keywords = File.readlines(file_path, chomp: true)
  keywords.map(&:strip)
end

pod_file_path = 'path/to/your/Podfile.lock'
keywords_file_path = 'upcoming.txt'

sample_text = read_file_content(pod_file_path)
sample_keywords = read_keywords_from_file(keywords_file_path)

matching_keywords = find_matching_keywords(sample_text, sample_keywords)
puts matching_keywords

```

```upcoming.txt
Abseil
AFNetworking
Alamofire
AppAuth
BoringSSL
Capacitor
Charts
connectivity_plus
Cordova
device_info_plus
DKImagePickerController
DKPhotoGallery
FBAEMKit
FBLPromises
FBSDKCoreKit
FBSDKCoreKit_Basics
FBSDKLoginKit
FBSDKShareKit
file_picker
FirebaseABTesting
FirebaseAuth
FirebaseCore
FirebaseCoreDiagnostics
FirebaseCoreExtension
FirebaseCoreInternal
FirebaseCrashlytics
FirebaseDynamicLinks
FirebaseFirestore
FirebaseInstallations
FirebaseMessaging
FirebaseRemoteConfig
Flutter
flutter_inappwebview
flutter_local_notifications
fluttertoast
FMDB
geolocator_apple
GoogleDataTransport
GoogleSignIn
GoogleToolboxForMac
GoogleUtilities
grpcpp
GTMAppAuth
GTMSessionFetcher
hermes
image_picker_ios
IQKeyboardManager
IQKeyboardManagerSwift
Kingfisher
leveldb
Lottie
MBProgressHUD
nanopb
OneSignal
OneSignalCore
OneSignalExtension
OneSignalOutcomes
OpenSSL
OrderedSet
package_info
package_info_plus
path_provider
path_provider_ios
Promises
Protobuf
Reachability
RealmSwift
RxCocoa
RxRelay
RxSwift
SDWebImage
share_plus
shared_preferences_ios
SnapKit
sqflite
Starscream
SVProgressHUD
SwiftyGif
SwiftyJSON
Toast
UnityFramework
url_launcher
url_launcher_ios
video_player_avfoundation
wakelock
webview_flutter_wkwebview
```

# コマンド
以下のコマンドで、混入しているSDKがリストアップされます。
```
ruby check.rb   
```

MacのsystemのRubyバージョン `2.6.10` でも動作を確認できました。
Nuxt3のi18nの中でタグを使う

# はじめに
Nuxt3で
```html
<div><a href="/registration">登録画面</a>に移動</div>
```
```html
<div>Move to <a href="/registration">Registration</a></div>
```
みたいなリンクの多言語化をしようとしたときに
```vue
<div>
  <NuxtLink :to="/registration">
    {{ t('registration') }}
  </NuxtLink>
  {{ t('moveTo') }}
</div>
```
とすると英語と日本語で語順が違ったりして困っていました(調べてもNuxt2のやり方だったり、v-htmlを使ったり)。

いろいろ調べた結果、解決方法が分かったので残しておきます。

# 結論
`i18n-t` を使う。

.vueファイル
```vue
<i18n-t  tag="div" keypath="moveTo">
  <template #registrationLink>
    <NuxtLink to="/registration">
      {{ t('registration') }}
    </NuxtLink>
  </template>
</i18n-t>
```

言語ファイル(ja)
```json
{
  "moveTo": "{registrationLink}に移動",
  "registration": "登録画面"
}
```

言語ファイル(en)
```json
{
  "moveTo": "Move to {registrationLink}",
  "registration": "registration"
}
```
Ubuntu20.04 Raspberry Pi 4 IPアドレス固定方法

ubuntu20.04をRaspiにインストールした際の，IPアドレス固定方法

step1. `/etc/netplan/50-cloud-init.yaml`を変更

変更前に念の為バックアップを取っておく

```
sudo cp /etc/netplan/50-cloud-init.yaml ~/
```

バックアップを取ったら以下のように書き換える

```/etc/netplan/50-cloud-init.yaml
network:
    ethernets:
        eth0:
            dhcp4: false
            addresses: [192.168.0.233/24]
            gateway4: 192.168.0.1
            nameservers:
                addresses: [192.168.0.1]
    version: 2
```

step2. 設定を適用する

```
sudo netplan apply
sudo reboot
```
Pythonでリアルタイムにセグメント分けして塗りつぶす

こんにちは！

最近OpenCVを使った記事を書いたので、これを使って、何か面白いことできないかな、と考えてました。

ちょうど、とあるバーでリアルタイムなプロジェクションマッピングの話が出たので、まずは、カメラを通して取得したフレームを、ランダムに塗りつぶすことをやってみます:slight_smile:

# やりたいこと
- カメラを通してフレームを取得
- セグメントに分ける
- セグメントごとに塗りつぶす

# 環境構築
Pythonの仮想環境を作ります。
```bash
python -m venv color-randomly
cd color-randomly
```
ディレクトリに移動した直後の状態
```bash
$ ls
bin/		include/	lib/		pyvenv.cfg
```
仮想環境の有効化
```bash
source bin/activate
```
必要なライブラリのインストール
```bash
pip install opencv-python numpy scikit-image imageio
```
### opencv-pythonとは
画像とビデオの処理、解析、顔認識、オブジェクト検出、特徴抽出などに使用されます。

### numpyとは
数学計算のためのライブラリで、高性能な数値計算機能を提供します。
多次元配列の操作、科学計算、データ分析などに使用されます。

### scikit-imageとは
画像処理ライブラリです。画像のセグメンテーション、フィルタリング、画像変換、特徴抽出などに使用されます。

### imageioとは
画像入出力ライブラリで、多様な画像形式の読み書きが可能です。
画像の読み込み、保存、アニメーションGIFの生成に使用されます。

# コード
```Python:main.py
import cv2
import numpy as np
from skimage.segmentation import slic
from skimage.util import img_as_float
import imageio

# ユニークな色を生成する関数
def generate_unique_colors(num_colors):
    return [tuple(np.random.randint(0, 255, 3).tolist()) for _ in range(num_colors)]

# SLICを用いて画像をセグメントする関数
def segment_image_slic(image, n_segments=250, compactness=10):
    # 画像を浮動小数点数の型に変換
    image = img_as_float(image)
    
    # SLICでセグメントに分ける
    segments = slic(image, n_segments=n_segments, compactness=compactness, start_label=1)
    
    # 生成されたピクセルにユニークな色を割り当てる
    unique_colors = generate_unique_colors(len(np.unique(segments)))
    segmented_image = np.zeros(image.shape, dtype=np.float64)
    for (i, seg_val) in enumerate(np.unique(segments)):
        mask = segments == seg_val
        segmented_image[mask] = unique_colors[i]
    
    # 値を0から255の範囲にスケールして整数にキャスト
    segmented_image = (segmented_image * 255).astype(np.uint8)
    
    return segmented_image

# カメラのセットアップ
cap = cv2.VideoCapture(0)

# アニメーションGIFにするためのフレームリスト
frames_for_gif = []

# 何フレーム分の画像を取得するか
num_frames = 10

# フレームを取得する
while num_frames > 0:
    ret, frame = cap.read()
    if not ret:
        break
    
    # SLICによるセグメンテーション
    segmented_frame = segment_image_slic(frame, n_segments=250, compactness=10)
    frames_for_gif.append(segmented_frame)
    
    # 結果を表示
    cv2.imshow('Frame', segmented_frame)
    
    # 'q'キーでループを抜ける
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break
    
    num_frames -= 1

# カメラとウィンドウのリリース
cap.release()
cv2.destroyAllWindows()

# アニメーションGIFを無限ループで保存する
imageio.mimsave('./segmented_animation.gif', frames_for_gif, fps=2, loop=0)
```

# 実行結果
```bash
python main.py
```
カメラが起動し、セグメント分けされて、様々な色で塗りつぶされてます。
![fig1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/5c463df1-8592-30a6-7eb8-0532821a76e1.png)

なんとなく、顔と手、後ろのカーテンも分かりますね。
![fig2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/178d7ac7-3eb5-e8d9-0895-b946f6d3c288.png)

そして、生成されたアニメーションGIFはこちらです！
![segmented_animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/241206ae-0c8f-4e1e-3c5a-5ddf88cefbf4.gif)

# まとめ
今回は、OpenCVとscikit-imageを使って、リアルタイムにセグメント分けをして塗りつぶしてみました。

プロジェクションマッピングとは異なるとは思いますが、これとプロジェクターを連携させたら、リアルタイムに形状を抽出して、テーマに沿ったカラーリングができそうです。

もう少し工夫したら面白いものが作れそうなので、引き続きチャレンジしてみます！

みなさんも一緒に頑張りましょう:smiley:
gh コマンドからブラウザを開く方法いくつか

[gh](https://cli.github.com/) コマンドに、ブラウザで GitHub のあちこちのページを表示するためのコマンドがあるので、その辺を紹介します。

## 1. `gh browse`

その名の通り、ブラウザで見るためのコマンドです。何も渡さない場合はリポジトリページを開くのですが、引数の渡し方で見られるものが変わります。


### `gh browse --branch=BRANCH`, `gh browse --commit=COMMIT_ID` で特定の branch or commit で見る

基本は default branch (いわゆる master や main のこと) で表示するのですが、 `--branch`, `--commit` オプションで

```console
$ gh browse --branch=$(git rev-parse --abbrev-ref HEAD) # 現在の branch のリポジトリを見る
$ gh browse --commit=$(git rev-parse HEAD) # 現在の commit のリポジトリを見る
```

### `gh browse FILENAME` でファイルを見る

`gh browse` は単純にリポジトリだけでなく、引数で指定したファイルを見ることも可能です。

```console
$ gh browse FILENAME --commit=$(git rev-parse HEAD) # 現在の commit での指定したファイルを見る
```

## 2. `--web` オプションを使う

`gh browse` 以外でもブラウザを開く方法として、 様々なコマンドに付いている `--web` オプションがあります。

### `gh XXX view --web`, `gh XXX list --web` で色々なリソースをブラウザで表示する

例えば、以下のコマンドで `list`, `view` でブラウザを開くことが出来ます。様々なコマンドで用意されているので、とりあえず `list --web`, `view --web` を付けてみて試してみると良いと思います。

```console
$ gh pr list --web # リポジトリの pull request 一覧ページを表示
$ gh issue list --web # リポジトリの issue 一覧ページを表示
$ gh project list --web # リポジトリの owner のプロジェクトのリストを表示
$ gh codespace list --web # 自身の codespace のリストを表示
```

```console
$ gh pr view --web # 現在のブランチに対応した pull request を表示
$ gh issue view 12 --web # 12 番の issue を表示
$ gh release view TAG_NAME --web # TAG_NAME に対応した release を表示
$ gh run view --web # 現在のブランチで実行した GitHub Actions を選んで表示
$ gh workflow view --web # リポジトリの Workflow 毎の Action の実行を選んで表示
```

### `gh XXX create --web` で作成フォームをブラウザで表示できる

`list --web`, `view --web` 以外にも `create --web` で作成フォームを開くことが出来ます。

```console
$ gh pr create --web # 現在のブランチに対応した pull request の作成フォームを表示
$ gh issue create --web  # リポジトリの issue 作成フォームを表示
$ gh codespace create --web # Codespace を開始するためのフォームを表示
```

### `gh search XXX --web` で検索結果をブラウザで表示できる

以下のようなコマンドで、検索結果をブラウザで表示できます。

```console
$ gh search code "code snippets" --web 
$ gh search issues "title" --web
$ gh search prs "title" --web
```

## References

* https://cli.github.com/manual/
Go 1.21.0からruntime/coverage.WriteCountersDirで-covermode=atomicエラー

GoのバージョンをGo 1.21.0に上げた所、
scenarigoを利用して起動しているE2Eテストにて、
カバレッジを出力するAPIにて、下記エラーが出るようになった。

```go
func (h *Handler) Record(gc *gin.Context) {
	err := coverage.WriteCountersDir("./_coverage")
	if err != nil {
		panic(err)
	}
}
```

```zsh
2023/12/18 18:36:24 http: panic serving 127.0.0.1:52164: WriteCountersDir invoked for program built with -covermode=set (please use -covermode=atomic)
goroutine 3046 [running]:
net/http.(*conn).serve.func1()
```

## 原因

Go 1.21.0から、atomic mode必須に変更されている。

### Go 1.20

https://github.com/golang/go/blob/release-branch.go1.20/src/runtime/coverage/apis.go#L52-L54

```go
func WriteCountersDir(dir string) error {
	return emitCounterDataToDirectory(dir)
}
```

### Go 1.21.0

https://github.com/golang/go/blob/release-branch.go1.21/src/runtime/coverage/apis.go#L52-L57

```go
func WriteCountersDir(dir string) error {
	if cmode != coverage.CtrModeAtomic {
		return fmt.Errorf("WriteCountersDir invoked for program built with -covermode=%s (please use -covermode=atomic)", cmode.String())
	}
	return emitCounterDataToDirectory(dir)
}
```

### issues

https://github.com/golang/go/issues/56197

### commit

https://github.com/golang/go/commit/61e5ea492905ba71c5c53ad27e72d042e60bb66a

## 対策

E2Eがscenarigoを利用し、外部からAPIを叩く方式になっているため、
go testを利用しておらず、`-covermode=atomic`を設定できないと思われたが、
実は、go runやgo buildにも上記モードが設定できた。

そのため、

scenarigoの対象としているE2E用インスタンスでのアプリ起動時に、下記のようにオプションを付ければ解決できた。

```:Makefile
go run -cover -covermode atomic app.go
```

## 参考

https://pkg.go.dev/cmd/go#hdr-Compile_packages_and_dependencies
Gemini Proを使って、日常に一筋の非日常を。Fiction Timesの紹介

この記事は[クソアプリ Advent Calendar 2023-3](https://qiita.com/advent-calendar/2023/kuso-app) 25日目の記事です。

こんにちは。[virapture株式会社](https://virapture.com)でCEOしながら[ラグナロク株式会社](https://ragna-rock.com)でもCKOとして働いている[@mogmet](https://twitter.com/mogmet)です。
![mogmet.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/e314443e-9fb7-fb29-8e49-49fae6918fc6.jpeg)
カフェに行った時に記念に内カメラモードで写真をとることになったのですが、反対方向からもとってみました。面白い絵になります。

さて、皆様、ご機嫌いかがでしょうか？私はなんとか元気に今年も生き延びることができました。
今日は皆さんの日常にちょっぴりスパイスを加える、Gemini Proを使ったとっておきのニュースアプリ

「[Fiction Times](https://fiction-times.virapture.com/)」

https://fiction-times.virapture.com/

をご紹介します。

※技術詳細については下記をご閲覧ください。

https://qiita.com/mogmet/items/c11b223e9992a7c61f26

## アプリの紹介

![CleanShot 2023-12-25 at 10.12.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/4bf97353-2fe8-027c-7bb0-ea3443d4c738.png)

こちらのアプリ、名前の通り、すべてが架空のニュースで溢れています。つまり、全てがウソ八百で、真実なんて微塵もありません。

でも、それがいいんです！

「また、つまらない現実のニュースか...」

そんな風に思ったことはありませんか？でもご安心ください。

[Fiction Times](https://fiction-times.virapture.com/)があれば、あなたの世界はもっとカラフルになります。

エッフェル塔が実は宇宙船だったとか、ニューヨークの真下に秘密の王国があったとか、そんな驚きの「事実」がここには満載です。

朝起きて、「今日のニュースはどんなシュールな話題でしょうか」とワクワクしながらアプリを開く。

そこには、「カメが忍者の修行を始めました」とか、「雲の上にあるカフェが新メニューを発表」といった、想像力を刺激するトピックが並びます。コーヒーを一口飲むたびに、くすりと笑ってしまうこと請け合いです。

## ニュースを作る

アプリの中では、ユーザーが自らニュースを創造できる機能もあります。

![CleanShot 2023-12-25 at 10.12.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/66a40e88-6d50-1e43-a415-9275b568416e.png)

そうです、あなたの内に秘められた創作の才能を解放するのです。実際に公開されたニュースがどれだけバイラルになるか試してみてはいかがでしょう。あなたの作った話が、世界中で読まれるかもしれませんよ。

## まとめ

[Fiction Times](https://fiction-times.virapture.com/)は、ただのクソアプリではありません。それは、現実からの小さな逃避行、そして創造性の開放を促すアートピースなのです。今日も忙しい1日を送る前に、ちょっとしたファンタジーで心を軽くしてみませんか？

さぁ、[アプリを開いて](https://fiction-times.virapture.com/)、非日常の旅に出発しましょう。
真実はどこかへ置いて、今日はFiction Timesと共に、思いっきり笑ってください。

最後に、スノボの楽しく滑るコツを掴める [cotsume](https://cotsume.page.link/blog) というアプリを作ってます！よかったらDLしてみてね！

https://cotsume.page.link/blog

また、[ワンナイト人狼オンライン](https://online.1nite-jinro.com/link/blog)というゲームを作ってます！よかったら遊んでね！

https://online.1nite-jinro.com/link/blog

他にも[Camecon](https://camecon.me/)や[Offcha](https://offcha.com/)、問い合わせ対応が簡単にできる[CSmart](https://csmart.jp/lp)、フリーランスのコミュニティの[NextFreelance](https://next-freelance.net/)といったサービスも作ってるのでよかったら使ってね！

https://camecon.me/

https://offcha.com/

https://csmart.jp/lp

https://next-freelance.net/

また、チームビルディングや技術顧問、Firebaseの設計やアドバイスといったお話も受け付けてますので御用の方は弊社までお問い合わせください。

https://virapture.com/

https://menta.work/user/20565

ラグナロクでもエンジニアやデザイナーのメンバーを募集しています！！楽しくぶち上げたい人はぜひお話ししましょう！！

https://ragna-rock.com
[Ruby]こんなものをeachで回すんじゃあないよ

すっかり寒くなりましたね。
みなさん、each使ってますか？？便利で利用シーンの多いこの子ですが、どんな構造のデータに対して使うべきかを考えなければ、読みにくく、拡張性の低いものになってしまいます。今回の記事では、僕のeachに突っ込むデータの変遷を晒し上げ、「**こんなものをeachで回すんじゃあないよ**」と言いたくなるようなアンチパターンの配列(ハッシュ)を紹介していきます。

今回出力したい内容は以下の通り。

```
Tom(年齢:23歳、身長:170cm、出身国:Canada)
Mika(年齢:27歳、身長:150cm、出身国:Japan)
Brown(年齢:23歳、身長:170cm、出身国:Brazil)
```

それではeachで回してみましょう！！

## フェーズ１:配列しか勝たん

```ruby
person_info_array = [['Tom', 23, 170, 'Canada'],
                     ['Mika', 27, 150, 'Japan'],
                     ['Brown', 19, 190, 'Brazil']]

person_info_array.each do |person_info|
    puts "#{person_info[0]}(年齢：#{person_info[1]}、身長：#{person_info[2]}、出身国：#{person_info[3]})"
end

```

当初僕は、「eachで回すなら配列一択でしょ！！」と思っていたのでこんな配列を作っていました。配列を見てもぱっと見どの情報が何を示すのかわからないですし、年齢の前に趣味を入れたい！となった時には

```ruby
person_info_array = [['Tom', 'baseball', 23, 170, 'Canada'],
                     ['Mika', 'hunting',  27, 150, 'Japan'],
                     ['Brown', 'cooking', 19, 190, 'Brazil']]

person_info_array.each do |person_info|
	puts "#{person_info[0]}(趣味：#{person_info[1]}、年齢：#{person_info[2]}、身長：#{person_info[3]}、出身国：#{person_info[4]})"
end

```

このように他の順番も変更する必要があります。これはあまりイケてないですね。。

## フェーズ2:え、配列もハッシュも使えますけど？

```ruby
person_info_array = ['Tom' => {age: 23, tall: 170, country: 'Canada'},
		             'Mika' => {age: 27, tall: 150, country: 'Japan'},
		             'Brown' => {age: 19, tall: 190, country: 'Brazil'}]

person_info_array.each do |person_info|
    person_info.each do |name, profile|
        puts "#{name}(年齢：#{profile[:age]}、身長：#{profile[:tall]}、出身国：#{profile[:country]})"
    end
end

```

少し学習が進み、ハッシュやシンボルの存在を知った僕は色々使ってみたくなってこんなことをしていました。ハッシュを用いることでデータの関連がわかりやすくなりました。この配列であれば、先ほどのように趣味を入れるのも楽々です。

```ruby
person_info_array = ['Tom' => {age: 23, tall: 170, country: 'Canada', hobby: 'baseball'},
		             'Mika' => {age: 27, tall: 150, country: 'Japan', hobby: 'hunting'},
		             'Brown' => {age: 19, tall: 190, country: 'Brazil', hobby: 'cooking'}]

person_info_array.each do |person_info|
    person_info.each do |name, profile|
        puts "#{name}(趣味：#{profile[:hobby]}、年齢：#{profile[:age]}、身長：#{profile[:tall]}、出身国：#{profile[:country]})"
    end
end

```

しかしながら、eachがネストしてしまっています。惜しい。。

## フェーズ3:今ココ←

```ruby
person_info_hash = {'Tom' => {age: 23, tall: 170, country: 'Canada'},
	                'Mika' => {age: 27, tall: 150, country: 'Japan'},
	                'Brown' => {age: 19, tall: 190, country: 'Brazil'}}

person_info_hash.each do |name, profile|
  puts "#{name}(年齢：#{profile[:age]}、身長：#{profile[:tall]}、出身国：#{profile[:country]})"
end

```

配列をハッシュに変えることでネストがなくなり、だいぶマシになりました。

## まとめ

いかがでしたでしょうか。
配列、ハッシュをeachで回す際には以下のそれぞれの特性を考慮して使いたいですね。
**配列：**

- 連続した要素を順番に処理したい場合
- インデックスや要素の順序に意味があるデータを扱う場合

**ハッシュ：**

- キーと値のペアを順番に処理したい場合
- キーと値の関連性が重要なデータを扱う場合
- データの構造がキーとそれに関連する情報を持っている場合

「**〇〇さん(名前)：プロフィール(年齢、身長、出身国)**」という情報の関連があること、順序が重要な意味を持つわけではないことを考えると、今回は名前の単位でハッシュにまとめる方法が良いなという結論に至りました。
このような試行錯誤を重ねることで、より良い方法や思考にたどり着けるのって快感ですよね!
最後まで読んでいただき、ありがとうございました！
【SPIKE-RTでロボコンに出よう!!】もくじ

# はじめに

このページは、LEGO Education SPIKE Prime 用OS **SPIKE-RT** の使い方を解説した記事シリーズ **【SPIKE-RTでロボコンに出よう!!】** のもくじとなっております。
2023年12月より投稿を開始した、新シリーズとなっております。

SPIKE-RTは現時点ではまだ開発途中で有り、又執筆者の習熟もまだまだ十分ではありません。
従って、記事の中には不明瞭な点や、間違っている可能性があります。
見つけ次第修正は致しますが、悪しからずご了承ください。

本シリーズは、初めてSPIKE-RやC言語を扱う中学生・高校生(場合によっては小学生も)を対象に執筆しております。
従って、難しい内容をかみ砕き、かなり丁寧な説明をしております。
中・上級者の方には必要以上の内容かもしれませんが、予めご了承ください。

# もくじ

## #1 開発環境を作ろう

https://qiita.com/koushiro/items/02dd13a797afbd568beb

## #1-2 開発環境を作ろう (macOS向け)

https://qiita.com/koushiro/items/2bdee5fd3580f9373457

## #1-3 開発環境を作ろう (Linux/Ubuntu向け)

https://qiita.com/koushiro/items/968dc1abe9cf02f6b170

## #2 エディタを使おう(VisualStudio Code)

https://qiita.com/koushiro/items/dbfc45be2e05a44bc273

## #3 テンプレートファイルとシェルスクリプトの作成

https://qiita.com/koushiro/private/3cf4cff56e0bd90cac7a

## #4 モータの使い方

https://qiita.com/koushiro/items/0471376a9feb9b53b178

## #5 カラーセンサの使い方

https://qiita.com/koushiro/items/9311142f3e9b0f0cfefb

## #6 フォースセンサと超音波センサの使い方

https://qiita.com/koushiro/items/02ee8221aabec0ba1d4c

## 【番外編】SPIKE-RTでもジャイロセンサで正確な90度ターンがしたい!!

https://qiita.com/koushiro/private/f6cc865e5b2e5b3dd662

## 【番外編】ポートFを使えるようにする

https://qiita.com/koushiro/items/480559806f5572902c5c

## 【番外編】ショートカット版開発環境構築

https://qiita.com/koushiro/items/3a46a11f71a49159b2d3

# 学習の進め方

基本的には#1から順番に進めていくことで、SPIKE-RTでのプログラム開発に必要なことを網羅することが出来ます。
ただし、以下に該当する方は説明に沿って進めてください。

- C言語を学習したことがない方
    - 基本文法の学習のために、EV3rt講座 #4 #5 を読まれることをお勧めします

https://qiita.com/koushiro/private/18e0c8dde12f3a8e3aad

https://qiita.com/koushiro/private/9ee84c3b5bdefc0475c8

- 既にSPIKE-RTを学習したことがある方
    - 本記事群は辞書的に使用して頂ければ結構です。

# 今後の投稿予定

以下は今後投稿予定の記事の内容です。
投稿時期は未定ですので、気長にお待ちいただければ幸いです。

- #7 ハブブロック
- #8 関数
- #9 タスク・周期ハンドラ
- #10 シリアル通信
- #11 Bluetooth通信
【もっと!後輩たちのためのEV3rt講座】もくじ

# はじめに

このページは、TOPPERS/EV3rtの使い方を解説した記事シリーズ **【もっと!後輩たちのためのEV3rt講座】** のもくじとなっております。
本シリーズは、以前投稿していた以下のシリーズの改訂版となります。

- [【もくじ】後輩たちのためのEV3rt講座](https://qiita.com/koushiro/items/4d18c877c93f823fc236)
- [【後輩たちのためのEV3rt講座(改)】もくじ](https://qiita.com/koushiro/items/5841a6394ab99f661280)

以前の記事では不十分だった点、又時間の経過に伴い仕様が変わった点、バージョンアップにより変更がなされた点も含めて、書き直しております。
(ただし、2023年12月現在の情報を元にしております。)

本シリーズは、初めてEV3rtやC言語を扱う中学生・高校生(場合によっては小学生も)を対象に執筆しております。
従って、難しい内容をかみ砕き、かなり丁寧な説明をしております。
中・上級者の方には必要以上の内容かもしれませんが、予めご了承ください。

# もくじ

## #1 開発環境を作ろう (Windows+WSL向け)

https://qiita.com/koushiro/items/4ee879e5420260cea6c8

## #1-2 開発環境を作ろう (macOS向け)

https://qiita.com/koushiro/items/2e57799566c81795ce70

## #1-3 開発環境を作ろう (Linux/Ubuntu向け)

https://qiita.com/koushiro/items/a775ee094cc52a79c05a

## #2 Visual Studio Codeを使おう

https://qiita.com/koushiro/items/35f74cce0961fc442b11

## #3 アプリケーション開発のおやくそく

https://qiita.com/koushiro/items/e3d04e3a4e266c603865

## #4 C言語のキホン➀

https://qiita.com/koushiro/private/18e0c8dde12f3a8e3aad

## #5 C言語のキホン➁

https://qiita.com/koushiro/private/9ee84c3b5bdefc0475c8

## #6 モータを動かそう

https://qiita.com/koushiro/private/629433156aba2a166094

## #7 カラーセンサを使おう

https://qiita.com/koushiro/private/86c8855c85c5a6658030

## #8 超音波・ジャイロ・タッチセンサを使おう

https://qiita.com/koushiro/private/d9c69c9c73ff9d54aee2

## #9 インテリジェントブロックの機能を使おう

https://qiita.com/koushiro/private/2e10eeee3fdf39866a00

## #10 関数を使おう

https://qiita.com/koushiro/items/2ba33587ea25faf3b8e5

## #11 タスクと周期ハンドラを使おう

https://qiita.com/koushiro/items/3b2785fbc94c308452a8

## #12 テキストを扱おう&ファイルを読み書きしよう

https://qiita.com/koushiro/items/0c5a916d431a36dcdbbc

## #13 Bluetooth接続をしよう

https://qiita.com/koushiro/items/6e90accc9bc1ce02b1c5

## #14 Bluetoothを使ってPCと通信しよう

https://qiita.com/koushiro/items/c8a428af2f30b7812f27

## C言語開発環境 EV3rt の開発環境構築の方法【出張!後輩たちのためのEV3rt 講座】

https://qiita.com/koushiro/items/b3c96a87329215ee11ca

# 学習の進め方

基本的には#1から順番に進めていくことで、EV3rtでのプログラム開発に必要なことを網羅することが出来ます。
ただし、以下に該当する方は適宜飛ばして進めてください。

- 既にC言語を学習したことがある方
    - #4 および #5 はC言語の基本文法に関わる内容ですので飛ばしていただいて結構です。
- 既にEV3rtを学習したことがある方
    - 本記事群は辞書的に使用して頂ければ結構です。

# 今後の投稿予定

以下は今後投稿予定の記事のタイトルです。
投稿時期は未定ですので、気長にお待ちいただければ幸いです。

- #15 UART通信をしてみよう
- #16 ソースコードを追加しよう
frontendな会のレポート

静岡某所にて、フロントエンドのコーダー５人が集まり、最近気になっていることなどを話してみました。

# `@container` を使っていきたいよね

https://developer.mozilla.org/en-US/docs/Web/CSS/@container

これ使っていきたいですね！！
ポイントで効くからコードの可読性も上がります。

# hoverが可能か？をCSSだけで判定する

https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features

これもですね。
pointer:fine と判定を組み合わせるハックも共有していただきました。

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer

~~こんな感じのmixin作って利用してるよ、とのこと。便利〜！~~ 週明けに再度検証して、記事を書いてくださいました。 

https://qiita.com/ksk1015/items/9c67d6e0c7ec87422965

```sass:sass
@mixin hover {
	@media (hover:hover) {
        //なんかする
	}
}
```


# SVGの色は、mask-imageでbackgoundの色が適用されるようにできる

これかな？

https://zenn.dev/kagan/articles/cf3332462262f1

いいねぇ〜

# BingはGoogleとはまた違ったSEO対策を要求してくるようだ

Googleでは弾かれていないのに、Bingでは検索結果に表示されなくなってしまったことがあったそう。
考えられる原因としては
- 構造化データの入れすぎ
- ページの重複
- サイトの重複

とのこと。
Bingさん用のサーチコンソール（ウェブマスターツール）も要チェックとなっていくのか...

https://www.bing.com/webmasters/about

# decording=async

https://zenn.dev/ixkaito/articles/deep-dive-into-decoding

今のところは、ものっすごく大きな画像とかゲームだと影響あるかもしれない。
そういう仕事やってみたいね！なんて、話しました。

# ダイアログ要素

https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog

これも、もう使える。

ちなみに、popoverは13日目の記事で @ksk1015 さんが書いてくれました。

https://qiita.com/ksk1015/items/d2b1dd2702a22045fba2

# ビルドツールについてなど

webpackのメンテが終わり、Laravel MixがViteに置き換わるなか、自分たちも変更を考えなくては... というお悩みなど。

Nuxt.js やってみたと発表する人間あり、やってみれば、[NuxtImage](https://image.nuxt.com/) や [Nuxt Google Fonts](https://google-fonts.nuxtjs.org/)など面倒だなと思っていたコーディングを補完してくれる便利機能もたくさんあるとの共有。

システムとの連携面でいくと、LaravelがAPIを吐き出して、フロントで色々するように変更？

でもそれだと、今までと業務の仕方が変わりすぎてものすごく大変になってしまいそう。
自社サービスとかでなく受託だとなおさらね。
ここは、bladeなどテンプレートツールはそのままに、役割分担を継続した方が良いのでは。

ところで、Nuxt.jsだとちょっと Too Much :ear: なので、他にもこんなのあるよ、との共有。

https://astro.build/

https://lit.dev/

で、結局、やりたいことってHTMLもCSSもJSも一緒に、コンポーネントっぽく書きたいってこと！

（全員） \ まさにそれ！！ /

ということで、明日の記事に続きます！！


# まとめ

バラバラとしたトピックの羅列の記事になってしましましたが、ここまで読んでいただきありがとうございます。

本当、fontendの会...最高。私たちの想いはきっと同じ。

- 新しい技術に興味を持ち続けることが、価値になっているし、大切なこと。
- これを面白いと思って続けられていることが、ありがたい。
- やっぱりいつも限られた環境でやっていると詰まってくるので、こういう場でみんなが話せるのは本当に大切だよね。

本当に本当にありがとうございました。frontendの会、またやりましょうね！
Macで1分！スクショを1つのファイルにまとめる方法

# はじめに
こんな感じで「複数のスクショを１つにまとめたい時」ありませんか？
Macだと1分でできます。

![04_Screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536788/656e8e28-3b2a-81d4-4359-02290140319e.png)


# 前提条件
・Mac
・プレビュー
・Macのスクリーンショット

# 1. プレビューを表示
・複数のスクリーンショットを１つのフォルダに集めます。
・ファイルをすべて選択した状態で、ダブルクリックでプレビューで表示します。
![01_Select_File.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536788/19327c13-34c7-6bbb-671b-caa47514a3a9.png)

# 2. 「コンタクトシート」を選択
・プレビューから「コンタクトシート」を選びます。
![02_Select_Contact_Sheet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536788/2ed0e9c5-7e26-523d-8d8f-13112f305385.png)




# 3. スクリーンショットを撮る
・コンタクトシートの表示になったところを範囲選択のスクリーンショットで撮りたい範囲を撮ります。（「shift」+「command」+「4」）

https://support.apple.com/ja-jp/102646

![03_Contact_Sheet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536788/4a3378c5-9806-1adb-c3de-0a101e166529.png)


# 4. できあがり
・ファイル準備後からここまで１分
![04_Screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536788/656e8e28-3b2a-81d4-4359-02290140319e.png)


# 5. おまけ
・撮ったスクリーンショットをプレビューで開き直して、プレビューの機能で赤枠つけたり、矢印つけたりもできます。
![05_Screenshot_draw.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536788/20fcd9ec-973d-a6c5-97f2-177d96f2ac73.png)


# さいごに
Macの標準機能のみなので、知ってて当たり前かもしれませんが、、、
私は「コンタクトシート」の言葉も知らなかったので、知った時は衝撃でした！

サイズの調整とかは少し不便ですが、それほど精度が必要なくて、
サクッと作りたい時に便利です(❁´ω`❁)
テレホーダイ

[インターネット老人会の魔法書 Advent Calendar 2023](https://qiita.com/advent-calendar/2023/ancient-internet) の16日目の記事です。

# テレホーダイの思い出

まだ光回線もADSLもなかった日本でのインターネット接続環境はアナログの電話回線をモデムを通して利用するしかなかった。要するに電話なので従量課金の通話料がかかる。後にISDNというちょっと早いデジタル回線が整備されたが、もちろんお高いので知り合いで契約している人を見たことはない。

そのため、ほとんどのユーザは23時から翌朝8時まで登録した特定の番号が固定料金で月1800円でかけられるテレホーダイを利用していた。通称テレホ。プロバイダの電話番号を登録しておけば、深夜は固定料金で格安でインターネットができる。

# すべてのトリガは23時に

そのため、どのサービスも23時にユーザアクセスが集中するのが通説になり、23時に向けて何かを用意するのが一般的になった。ヤフオクの終了時間は23時から〜24時に設定するのが良いとされた。

# 深夜は電話が繋がらない

ダイヤルアップ接続は電話回線を占有するため、その間は電話が繋がらない。話中になってしまう。
携帯電話がまだそれほど普及していなかったため、インターネットユーザの家は深夜は電話が繋がらないことが常態化した。

# Q2ウィルス

また、ダイヤルアップ接続先を勝手に高額なQ2ダイヤルに変更されるウィルスも横行した。知らない間に書き換えられるため、翌月高額な請求書が届いて驚く寸法だ。そのためにダイアルアップ接続先チェックツールも存在していた。
軽深演習 #22 クラウドは高すぎる

### 軽深（かるしん　なんちゃって圏論） Advent Calendar 2023 22日目の記事です。
演習形式をとっているので、ぜひ　回答を試みてください。


### 前提知識　クラウドは高すぎる
クラウドは、専用サーバーの管理コストまで考えると断然安いと言われていました。しかし、ビッグデータの時代になり、滅多に使わないデータをクラウドに保存するのはかなりコストがかかります。しかも、めったに使わないデータですが、高速に検索したいというニーズがあると費用対効果的にはかなり高価なものになります。例えば、２年に一度しか使わないけれども、使う時はSSDで高速検索したいという場合は価格差がかなりあります。4TBのデータでクラウドとローカルのNASで比較すると５倍ぐらいの価格差になります。

図式で書くと、

```mermaid
flowchart LR
A[クラウド費用]-->B[WEBサーバ安い]
A[クラウド費用]-->C[使用頻度の低いストレージは高くつく]-->D[ローカルNAS安い]
```

速度は、安いストレージだとクラウドは遅い
```mermaid
flowchart LR
A-->B[安価なクラウドストレージは遅い]
A[ストレージ速度]-->C[HDD,SSDは速いがクラウドは高い]-->D[オンプレがますます有利]
```

圏論的に図式もっと変えていきましょう。

```mermaid
flowchart LR
A-->B[短期]-->D[安い]
A[従量課金]-->C[長期]-->E[高い]
```
見通しが良くなった気しませんか？　圏論的には、関手という概念にちょっと触れている雰囲気をだしました。

最近のNASは、Webサーバ公開機能があるのは当然ですし、Docker も使え、非常に便利になっています。演習では、このNASについてです。

### 演習 クラウドのストレージ課金は、ビッグデータになればなるほど、オンプレのNASに比べて高額になります。ビジネスチャンスだと思いませんか？ NASはストレージだけでなく、Docker も使えるので、納品、サポートも楽です。

Docer 利用可能なNASで、死蔵しているデータ活用の提案を考えてみましょう 。リコールで、２年に一度ぐらいしかつかわない死蔵データを高速で検索したいというニーズは確実にあるはずです。

最近、リコール問題が大騒ぎになっています。事後的に対応するにはデータの高速な全件検索になり、クラウドの費用は莫大になります。１０倍くらいの価格差でシステム提案すると十分にビジネスになるのではないでしょうか？
ZOZO開発組織の2023年の振り返りと現状

株式会社ZOZO 執行役員 兼 CTO の @sonots です。この記事は「[ZOZO Advent Calendar 2023](https://qiita.com/advent-calendar/2023/zozo)」のカレンダー1の最終回（25日目）です。

この記事では、この1年 ZOZOの開発組織で取り組んできたものをいくつか取り上げたいと思います。プロダクトの進捗については広報で執筆している「[ZOZO ファッションテックハイライト 2023](https://technote.zozo.com/n/n09e5f6a7362a)」の記事もありますので、そちらも合わせてご覧ください。

# ZOZOTOWN生産性2倍プロジェクト

開発部門で、この1年最も投資として大きかったのは「ZOZOTOWN生産性2倍」プロジェクトだと思います。

ZOZOTOWNの開発生産性(量)を２倍に増やすために、経営目線で見た生産性(量)とは何か、の定義から始め、その生産性を上げるための施策を進めてきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9641/617434e5-ee25-c96c-9b34-0af26347cc28.png)
Ref. [開発生産性の未来：世界と日本の最前線事例から培うFour Keys向上〜ハイブリッドカンファレンス〜](https://findy.connpass.com/event/298196/)での[登壇資料](https://docs.google.com/presentation/d/17vgWSLhm8NjA7KvpW97eLPHpk7fps1kc/edit#slide=id.g29b821c9869_0_130)より引用

まずは生産量を「リリースした案件数」とおき、人員増強を中心に、効率化も狙いながら生産量のUpを目指しています。

生産性(量)を計測可能とする基盤を作るために、工数管理ツールの刷新や、Findy Team+ の導入、そして効率化のために [GitHub Copilot の導入](https://techblog.zozo.com/entry/introducing_github_copilot)なども推し進めてきました。おかげさまで [エンジニア組織の開発生産性が優れた企業](https://findy.co.jp/1749/) として、[Findy Team+ Award](https://findy.co.jp/1749/) も受賞させていただき、[登壇](https://blog.findy-team.io/posts/zozo_best-practice-award_archive/)させていただくなどの機会を得られました。

株式会社ZOZOでは、引き続きエンジニア採用を強化していますので、ぜひ[ご応募](https://corp.zozo.com/recruit/mid-career/)いただけると幸いです。

# ZOZOTOWNリプレイスプロジェクト

ZOZOTOWNリプレイスプロジェクトも引き続き進めています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9641/6e409001-12d4-c2ca-2488-25cbc613f183.png)

今年は、注文処理の安定化を始めとして、ウェブ検索画面のリプレイス、商品基盤・会員基盤のマイクロサービス化、[物流システムのリプレイス](https://techblog.zozo.com/entry/20230525-logistics-replace-meetup)などなど多数のプロジェクトを実施してきました。

注文処理にもジョブキューが導入され、また[Rate Limit](https://techblog.zozo.com/entry/flow-limitation-using-istio-ratelimit) の仕組みも導入したことで、安定性と運用負担が格段に改善されたと実感しています。

Microsoft から「[VBScriptは非推奨](https://forest.watch.impress.co.jp/docs/news/1537619.html)」としていく旨も正式に発表されたこともあり、より一層リプレイスプロジェクトの経営戦略上の重要度が増してきました。皆で一致団結して引き続き計画的に進めていきます。

# 事業開発案件

もちろん、事業を成長させるための開発案件も多数実施しています。例えば開発ボリュームの大きかったものだと、直近では「アイテムレビュー機能」をリリースできました。

https://corp.zozo.com/news/20231130-zozotown-itemreview/

物流拠点として、つくば3の稼働も始まりました。

https://corp.zozo.com/news/20231101-zozobasetsukuba3-start/

他にも、まだ開発中で書けないものが多いのが残念ですが、経営戦略でもある[「ワクワクできる『似合う』を届ける」](https://corp.zozo.com/news/20220518-20904/)を実現するための開発など実施していますので、乞うご期待ください。

# おわりに

振り返ると2022年は、ZOZOグループ再編の効果を最大化するために、ビジネス部門と開発部門が融合しやすい下地作りに邁進してきた年でしたが、2023年はその下地の上で成果を出せるようになった1年だったように感じます。

私個人としては、2023年6月に執行役員兼CTOに就任し、経営合宿や取締役会議にも参加するようになったことで、開発以外への視野が広がったり、3〜5年といった長期目線で戦略を考えるのが当たり前になってくるなど、思考の変化があった1年でした。(1年の振り返りでは、まだ書いてはいけないことも増えてきたように思います)

市況としては、生成AIが台頭しており、生成AIを活用することで何ができるか色々模索した年だったようにも思います。業務効率化のために導入するのはやりやすいですが、権利や正確性の観点から直接ユーザが触るインターフェースとして提供するのは、まだ難があるようにも感じています。引き続き、生成AIに限らず技術の側面から、どう経営・ひいては社会に貢献できるかを考えていこうと思います。

# 2024/01/15 追記: 新春セール

ZOZOTOWNでは毎年正月に新春セールを行っています。恥ずかしながら、例年アクセス負荷に耐えきれずエラーを出してしまっていたのですが、ここ数年のZOZOTOWNリプレイスの成果も出て、ついに2024年1月1日は無事故で乗り切ることができました。皆で成し遂げた偉業だと思っています。ありがとうございました。まだまだ買い物できますので、ご愛顧よろしくお願いします。
CRTモニタ

[インターネット老人会の魔法書 Advent Calendar 2023](https://qiita.com/advent-calendar/2023/ancient-internet) の15日目の記事です。

# CRTモニタの良い点と悪い点

まず、良い点から始めると、CRTモニタは色の再現性が高いという特徴がある。これは、デジタルアーティストや写真家にとっては、非常に重要な要素である。また、CRTモニタは応答速度が速く、ゲームや動画の再生に適している。さらに、視野角が広く、どの角度から見ても色や明るさが変わらないという利点もある。これらの特性は、CRTモニタがまだ一部の専門家やエンスージアストに愛される理由である。

一方、悪い点としては、CRTモニタは大きく、重く、かつ消費電力が大きい。これは、現代の薄型、軽量、省エネのディスプレイと比較すると、明らかに不利な点である。また、CRTモニタは放射線を発生するため、長時間の使用は健康に影響を及ぼす可能性がある。さらに、CRTモニタは生産が終了しており、新品を手に入れるのは困難である。

別な観点から見ると、CRTモニタはその大きさと重さから、もし地震が起きても動かないという「安定性」を持っている。また、冬場はその発熱で部屋を暖めることもできるのも良かった。

CRTモニタは一般的なユーザーにとっては、そのデメリットが大きすぎるかもしれない。それでも、CRTモニタが持つ独特の魅力を理解することで、ディスプレイ技術の進化をより深く理解することができるだろう。それは、まるで古いレコードプレーヤーを愛するオーディオファンのようなものだ。新しいものが必ずしも最高であるとは限らない、という教訓を私たちに教えてくれるのである。それがCRTモニタの、そしてすべての古い技術の持つ、時代を超越した価値なのだ。
macOSをアップデートすると時刻同期が盛大にずれて，ネットワークにつながらないことがある。

すでに何度か遭遇している。

状況
* MacBook Air (Retina, 13-inch, 2019)
* macOS Sonoma 14.1 にアップデートし数週間経過
* しばらく充電していなかった可能性あり
* 日付は数か月前，時刻は1時間半ほどずれている
* Wifiには接続できている
* ブラウザで適当なページにアクセスしようとすると「時計が遅れています」と表示される

試したこと
1. 日付と時刻の設定を確認 ← 問題なさそう
    1. 設定 ＞ 一般 ＞ 日付と時刻
        * 日付と時刻を自動的に設定：ON
        * タイムサーバ：Apple (time.apple.com)
        * ・・・ 
        * 現在の位置情報に基づいて，時間帯を自動的に設定：ON
        * ・・・
	2. 設定 ＞ プライバシーとセキュリティ ＞ 位置情報サービス
    	* 位置情報サービス：ON
2. ntp.nict.jpを指定してみる ← その瞬間だけ設定されるがダメ
    ```
    sudo sntp -S ntp.nict.jp
    Password:
    +27997529.192100 +/- 0.048613 ntp.nict.jp
     ```

3. time synchronization daemonのキャッシュを削除してみる ← これだけじゃだめ
    ```
    sudo rm /var/db/timed/com.apple.timed.plist
    ```
    参考：https://keith.github.io/xcode-man-pages/timed.8.html
4. もう一度 ntp.nict.jp を指定してみる ← 成功
    ```
    sudo sntp -S ntp.nict.jp
	Password:
	-0.001306 +/- 0.009531 ntp.nict.jp
	```
ということで，無事解決。
おそらくtimedのキャッシュを削除したことが効果的だったようだ。
AI-102試験対策のまとめ「Azure AI TranslatorにおけるBLEUスコア」

## はじめに
Azure AI Engineer Associate(AI-102)取得に向けた勉強でまとめた内容を本記事では投稿しています。
試験範囲の内容を私が勉強していく中で、
・忘れてしまっていた内容
・他の知識と絡めて理解した方が良い内容
・Microsoft Learnの読解に苦戦した内容
などをできるだけ分かりやすく簡潔にまとめることを意識しています。
Azureの勉強を一から始め、AI-102取得を目指している方の参考になれば幸いです。
※本記事の内容が必ず試験に出るわけではないこと、ご注意ください
※勉強しながら投稿しているため、追加で学んだことがあれば随時投稿内容を更新します。

## 試験対策のまとめ
### Azure AI TranslatorにおけるBLEUスコア
#### **BLEU(Bilingual Evaluation Understudy)**
* ある自然言語から別の自然言語に機械翻訳されたテキストの精度/正確性を評価するためのアルゴリズム  
    ⇒同じ原文における自動翻訳と人による参考翻訳との違いを評価
* 下記を比較し、一致数がカウントされ、重み付けされた形式で表示される
    - 自動翻訳の連続するフレーズ
    - 参考翻訳に含まれる連続するフレーズ
* カスタム翻訳ツールでは、翻訳精度を確認する1つの方法としてBLEUメトリックを使用

#### **BLEUスコア**
* 0～100の数値
    - 0の場合：リファレンスとまったく一致しない低品質の翻訳
    - 100の場合：リファレンスと完全に一致する完全な翻訳
    - 40～60の範囲：高品質の翻訳
* 狭いドメインに対してモデルがトレーニングされ、トレーニングデータとテストデータとの一貫性がある場合  
    ⇒BLEUスコアが高くなることが予想される

<br>

* 参考
    - https://learn.microsoft.com/ja-jp/azure/ai-services/translator/custom-translator/concepts/bleu-score
    - https://learn.microsoft.com/ja-jp/azure/ai-services/translator/custom-translator/how-to/test-your-model

## 次の試験対策のまとめ
* **AI-102試験対策のまとめ「Azure AI Faceサービスの各機能とAPI」**

https://qiita.com/fsd-jume/items/f806dbfbe5dd161ae6b5

## 学習内容をまとめたページの一覧

https://qiita.com/fsd-jume/items/65aba5d5514e023fd66d
日本語プログラミング言語Mind前史 - Fifth86から改良したこと

# はじめに

　Forth言語との関連でMindの仕組みについて説明させてください。長文で恐縮です。

# MindはFORTHからの派生

　Mindは歴史的にはFORTHというプログラム言語からの派生となります。
　私が初めてFORTH系のプログラム言語を開発したのは1978年ごろです。当時勤めていた会社のマイコン開発システムに装備する組み込み系のプログラム言語「IDS-FORTH」として作ったのが最初です（装備した言語はアセンブラとFORTH）。当時のFORTHとしては珍しくプログラムをROMに焼くことができました。
　以来長いことFORTH言語を使ってきて順序としてはその後でMindを開発したという経緯です。
 
## 逆ポーランド記法

　FORTHはご存知のようにいわゆる逆ポーランド記法でプログラムを書きます。通常のプログラム言語ではたとえば、
 
```:C
　2 + 3
```

のように記述しますかFORTH言語では、

```:FORTH
　2 3 +
```

のように書きます。最初に対象となる値を書き、最後に演算名を書きます。
　私は昔、FORTHの講習会をやっていたころ、

　「これは日本語として・・２に３を加える・・読めば分かりやすいです」

と教えていましたが、だいぶ経ってから「だったら本当にそのように日本語で書くFORTHを作れば良いのでは？」と思い、MS-DOSの時代に16bit用のFORTHとして開発していたFifth86に土壇場で日本語表記サポートを追加しました。

## Fifth86

　Fifth86で留意したのはやはり日本語特有の表記への対応でした。次のようなことです。

　・空白は数字などは半角・全角どちらでも同じ扱いにする（見た目が同じものは同じにする）

　・送り仮名の揺れを許容するため語末のひらがなは削除してしまう

　・従来通りのアルファベット表記（英語風プログラム）も許容する

　具体例としては、ワード「+」とワード「加え」を等価定義し、数字「8」は全角「８」も等価扱い、半角空白を全角空白と等価扱いとし、末尾平仮名の削除をおこないました。分岐語なども「if」に対して「ならば」を等価語定義しました。
　そうすることでFifth86だと前記のプログラム例は

```:Fifth86
　　２に　３を　加える
```

と書けることになります。「に」「を」の助詞や「える」の活用語尾を無視することで座りの良い表記をすることができます。上記は

```:Fifth86
　　２　３　加
```

でもいいのですが日本人なら前者のほうを書きたくなります。
　たったこれだけのことでプログラムが自然な日本語のような見た目になりますが、**コンパイラは日本語を構文解釈のようなことをしているわけではまったくなく**て、やっていることはとても単純なことにすぎません。
　ツールとしてのプログラム言語が出来たので早速自分で試すため、同業他社さんから受託したプログラム（通信ソフト）をこの日本語表記のFifth86で書いて納品しました。
 
## スタック指向の言語

　ちょっとした工夫で自然な日本語のような雰囲気のプログラムが書けるようになった理由はFORTHがスタック指向の言語だからです。どのようなプログラム言語もスタックは内部的には使っていますがFORTHのそれは意味合いが違って、プログラマがスタックを意識して使うことが特徴です。

```:FORTH
　2 3 +
```

は、「２をスタックに積み」、「３をスタックに積み」、「＋を実行する」

というようにコンパイラは処理をおこないます。「＋」というワードはスタックから２つの値を取り出し、加算を行って結果の５を再びスタックに積みます。FORTHの設計者（チャールズ・ムーア）が文法としてこの書き順を発明したというよりはスタック指向のプログラムというのはその動作原理上必然的にこのような書き方になり、それが偶然にも日本語の表記にマッチした・・といって良いと思います。

## 偶然にも日本語の表記にマッチした

　前置きが長くなりましたが、MindはFifth86をベースにし、さらに一般の人がプログラムを書けるような工夫をしました。
　たとえば英語表記の一般言語では

```:BASIC
　　B = A + 3
```

のようなものをFORTHでは

```:FORTH
　　A @ 3 + B !
```

と書きます。「Aをロードし3を加えBにストア」と読むと分かりやすいです。

　一方、一般のプログラム言語では、単に変数名を書くとその変数の内容が読み出されるのでFORTHのように「@」書く必要はありません。FORTHでは、変数名はどのような文脈で書いたとしても一意に「その変数のアドレスをスタックに積む」という仕様であるため、後続してロードなのかストアなのかを明に書く必要があります。
 
　それはそれでFORTHらしいところなのですが、やはり不便なのでMindでは単に変数名を書いた場合は内容参照扱いとし、代入ほかの変数への副作用を書いている場合には参照ではなく副作用を与える処理を生成するような介入をコンパイラが行うようにしました。そうすることでMindでは、

```:Mind
　Ａに　３を　加え　Ｂに　入れる
```

と書けるようになって（「ロード」を明示しなくて良い）シンプルになりました。

　定義の開始／終了はFORTH流の、
 
 　　:　WORD　～　;
   
ではなく、

　　○○とは　～　。

とするなど日本語表記を徹底したことがあります。
　
　ほかには局所変数を導入しました。FORTH本来の機能として、

　　>R　R>

のようにリターンスタック上にデータを仮置きするワードがありますが、これを使うとかなり難度の高いプログラムになってしまうため、他の言語と同様、素直にワード定義内で変数定義ができるように（ローカル変数）しました。

# おわりに

　Mindユーザーの@mylifewithviolinさんの[Qiitaの記事](https://qiita.com/mylifewithviolin/items/d15fdf16c6a66bdcf5b1)についたコメントに対してコメントしていた内容ですが、記事にまとめてみました。
WebAssemblyに特化したプログラミング言語「Onyx」にWindowsで入門してみる


## Onyxとは

WebAssembly(wasm)に特化した新しいプログラミング言語です。

コンパイラはC言語で記述されており、高速なコンパイルを実現しています。
その為、C言語のネイティブライブラリを呼び出すことも可能です。

LLVM や Binaryan などのコンパイラ基盤を使用せず、直接 wasmバイナリにコンパイルするのが特徴です。

ガベージコレクションは無く、メモリの割り当てと解放を意識する必要があり少々上級者向けの言語となっています。

以下のような感じで記述します。

```js
use core { printf, iter }

main :: () {
    for i: 1 .. 10 {
        fact := factorial(i);
        printf("{}! = {}\n", i, fact);
    }
}

factorial :: (n: i32) -> i32 {
    return iter.as_iter(1 .. n)
        |> iter.fold(1, (x, y) => x * y);
}
```

https://onyxlang.io

https://github.com/onyx-lang/onyx

## インストール

1． 公式のGithubリポジトリから、`onyx-windows-wasmer-amd64.zip`というファイルをダウンロードして解凍します

https://github.com/onyx-lang/onyx/releases

2． 解凍したら`onyx-windows-wasmer-amd64`をCドライブ直下に配置します。(`C:\onyx`)

3． `PATH`と`ONYX_PATH`の2つの環境変数に配置したパスを設定します。

```powershell
$path = "C:\onyx\"
# PATHにパスを追加
$newPath = [Environment]::GetEnvironmentVariable("PATH", "User") + ";$path"
[Environment]::SetEnvironmentVariable("PATH", $newPath, "User")

# ONYX_PATHにパスを設定
[Environment]::SetEnvironmentVariable("ONYX_PATH", $path, "User")
```

4．Powershellを開き、`onyx`と入力し実行して以下のように表示されればOKです。

```
Usage:
    onyx <subcommand>

Subcommands:
    help      Shows this help message. Use "onyx help <subcommand>".
    build     Compiles an Onyx program into an executable.
    run       Compiles and runs an Onyx program, all at once.
    check     Checks syntax and types of an Onyx program.
    package   Package manager
    version   Prints version information
```

### VSCodeの拡張機能

補完までは対応していないものの、シンタックスハイライトの対応が出来ます。

https://marketplace.visualstudio.com/items?itemName=onyxlang.onyxlang

## とりあえず"Hello World"

VSCodeなどで`hello.onyx`というファイルを作成し、以下のコードを記載します。

```js:hello.onyx
use core {*}

main :: () {
  printf("Hello World");
}
```

以下のコマンドで実行できます。

```powershell
onyx run .\hello.onyx
# => Hello World
```

## ブラウザで実行してみる

### プログラムの作成

足し算を行うプログラムを作成し、ブラウザのコンソール上に出力してみます。

```js
use core {*}

#export "add" (x, y: i32) -> i32 {
  return x + y;
}

main :: () {}
```

### コンパイル

以下のコマンドで、プログラムをコンパイルします。
コンパイルすると`add.wasm`というファイルが生成されます。

```powershell
onyx build .\add.onyx -o add.wasm -r js
```
※末尾の`-r js`を付けないと、Onyx独自のバイナリが生成されてしまう為、ブラウザのWebAssembly APIで動作しません。

### JavaScriptから呼び出す

以下のファイルを作成し、Webサーバーで起動してください。
Webサーバーがすぐ用意できない場合は、VSCodeの以下の拡張機能をしようすると直ぐ実行可能です。

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

```html
<!DOCTYPE html>
<html>
<body>
  <h1>Onyx</h1>

  <script>
    WebAssembly.instantiateStreaming(fetch('add.wasm'),
    {
      // ここは必須
      host: {
        print_str: () => {},
        time: () => {},
      },
    }).then(
      (obj) => {
        // ここに処理を書く
        console.log(obj.instance.exports.add(10, 20));
      }
    )
  </script>
</body>
</html>
```

### 動作確認

30 と表示されていますね。成功です。

![image-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243130/a2a9ee73-e654-836f-0684-a80934dfa3b7.png)


## さいごに

Onyxはまだ正式リリースおらず、現状はBeta版となっています。
このまま無事に正式リリースしてほしいですね。
WebAssemblyの発展に、Onyxが寄与する様に期待しましょう。

## 参考

https://zenn.dev/hatappo/articles/f1ecb49715ea6c

https://zenn.dev/01397/scraps/95dc333cb51dfb
react-router の仕組み (超基本的個人メモ)

## react-router とは

> **At its heart, React Router is a state container for the current location, or URL. **
> - It keeps track of the **location** and renders different `<Route>`s as it changes.
> - Also, it gives you tools to update the **location** *using `<Link>`s and the `history` API*. 
> 
> Given the fact that managing this piece of state is the router's main responsibility, you can imagine that a new primitive that lets us compose state is going to enable a few things we couldn't do before!


## Ref

https://reacttraining.com/blog/react-router-v5-1
CMakeでJUCEをビルドする手順

## はじめに

ググって以下を見つけましたが、「CMakeでJUCEをビルドする」以外に色々と書かれていて迷ったので、改めて手順だけ整理しておこうと思いました。

- [JUCEをCMakeとVSCodeで開発する](https://qiita.com/tomoyanonymous/items/97cae1b83805ebcc2d00)
- [[備忘録]JUCEをCMakeとVSCodeで動かしたい〜CMakeビルド編〜](https://note.com/o_ory/n/n2b974f629a5d)

## 手順

- ディレクトリを作る（プロジェクトのルートとなるため、以下ルートと呼ぶ）
- ルートに lib, src, build ディレクトリを作る
- lib に JUCE を clone してくる(recursiveで)
- src に `lib/JUCE/examples/CMake/AudioPlugin/` の中身をコピーする
- ルートに以下の CMakeLists.txt を作る

```cmake
add_subdirectory(lib/JUCE)
add_subdirectory(src)
```

- build ディレクトリで `cmake ..` と `make` をする
- `build/src/AudioPluginExample_artefacts/VST3/` にビルドしたプラグイン（.vst3) が作られている

以上。コマンドは以下の通り。

```bash

mkdir HogeRoot
cd HogeRoot
mkdir lib src build
cd lib
git clone https://github.com/juce-framework/JUCE --recursive
cd ..
cp lib/JUCE/examples/CMake/AudioPlugin/* ./src
echo "add_subdirectory(lib/JUCE)" >> CMakeLists.txt
echo "add_subdirectory(src)" >> CMakeLists.txt
cd build
cmake ..
make
```

以上をコピペして最後に

```bash
[100%] Built target AudioPluginExample_VST3
```

と表示されればビルド完了です。

## 最後に

- CMake 難しい。
- CMake する以外の色々について知りたい方はぜひ原典もご覧ください。