OmniAICreator/Qiita-1.07M huggingface dataset:
【C】HelloWorldを表示させる方法

# はじめに
今回は`C`で`HelloWorld`を表示させていこうと思う

```c
#include <stdio.h>
 
int main(void) {
    printf("Hello World");
    return 0;
}
```
実行する
# さいごに
今回は`C`で`HelloWorld`を表示させた
Flutterの環境構築

## Flutterの環境構築
### Flutterを入手する
WindowsでFlutterのアプリを作ってみようと考えたので環境構築の手順を残す
#### まずFlutterの公式にアクセス

https://docs.flutter.dev/get-started/install

スマホアプリを作りたいので、Mobile Reccomendedを選択する

#### PCの推奨環境等満たせるか確認。
![スクリーンショット 2023-12-24 225331.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3660906/0427d5f1-d183-b3bb-c0ab-750edcb393cc.png)
推奨を満たしていたので、次へ。
アプリの開発なのでやはりそれなりには要求された。


#### gitのインストール
Gitを使って何かをしていなかったのでGitをインストールするところから始める。
公式のURLにしたがいgitのインストーラーをDL

私がインストールしたバージョンはGit-2.43.0-64-bitというやつでした。
とりあえず、チェックが最初からついているものでそのまま進めます。

#### Android Studioのインストール
公式に従いたどっていった先でAndroid Studioのインストール

https://developer.android.com/studio?hl=ja

android-studio-2022.3.1.21-windows
私がインストールしたときはこれでした。

インストーラーを起動してAndroidStudioもとりあえずインストール完了

#### VSCodeの設定
VSCodeを使ってちらほらとほかの言語でコードを書いて遊んでいたのですが、FlutterもVSCodeでできるようでよかった。
> The Flutter team recommends installing Visual Studio Code 1.75 or later and the Flutter extension for VS Code. This combination simplifies installing the Flutter SDK.

VSCodeを使用してインストールするというタブに記載されている指示に従いFlutterをインストール。

Pathを追加する際にはタスクバーの検索から`env`と入力すると環境変数を設定できるのでそこからやってもいいですね。
私は最初にFlutterをインストールする場所を適当に指定した結果onedriveに保存して、のちにエラーを吐き、再インストールをしてここからPathを再設定しました。

#### Android Studio開発の構成
私は初のAndroidStudio使用だったので、初めてAndroidStudioを使用するのタブに従い環境を作りました。
どこから設定するんだよといろいろクリックしてましたが、`More Actions`からでした。
![スクリーンショット 2023-12-24 231828.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3660906/b02eae6f-fe3b-fd57-8f75-e6452c64ae00.png)

まず`SDK Maneger`からSDK関連のインストールですね。
SDK ManegerをクリックしてSDK PlarFormsから選択します。
![スクリーンショット 2023-12-24 232122.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3660906/17ca7b17-21fb-82b2-5bd8-2bfd65631594.png)

SDKToolsからコマンドラインツールやビルドツールのインストールをします。![スクリーンショット 2023-12-24 232253.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3660906/3869af51-aa67-fbea-6e79-9d8bf341f78d.png)

#### Androidデバイスを構成
ここは公式の指示に従えば問題ないです。

#### 開発設定の確認

Javaをインストール、Pathを通していることを確認してください。
私はここで、Javaをインストールしていなかったため、エラーが出ました...

`flutter doctor`を実行して、公式の通りになっていれば問題ありません。

### 構築した感想
環境構築は沼にはまることが割と多くてめんどくさい印象を持っていましたが、公式に従うだけでほぼ進んだのでそれはよかったかなと思います。

GitLabを業務で使用していますが、構築済みの環境を使用しており環境の構築や細かい部分を知らないので
次はその辺を記事にできたらと思います。
FlutterアプリのUIテスト自動化を取り組んでみた話

この記事は、[テスト自動化の成功事例を語ろう by T-DASH Advent Calendar 2023
](https://qiita.com/advent-calendar/2023/t-dash02) の8日目です。

# はじめに

Flutterアプリを趣味で作っていて、UIやLintなどのテストを自動化するCI/CDを一度やってみたくて、この度取り組んでみました。
今回は様々あるテストの中でも、UIのビジュアルテストに取り組んでいきます。

毎度デグレしていないかアプリのUIを見て触って確認するのも大変ですしねぇ。
ではやっていきましょう。

# 今回実施するテスト

## Golden Test

FlutterのGolden TestはFlutterフレームワークで使用されるUIコンポーネントやWidgetのビジュアル外観をテストするためのアプローチの一つです。
Golden Testにより、UIが期待通りに変更やレンダリングされていることを確認することができます。

Golden TestはGolden Fileと呼ばれる正しいUIの画像ファイルと、スクリーンショットのキャプチャを比較して正しくレンダリングされているかどうかをテストします。

# 手順概要

1. Flutterプロジェクトの作成
2. golden_toolkit導入
3. Golden Testの記述
4. 画像ストレージの設定
5. Github Actionsワークフローの設定
6. reg-suitの結果表示


# 手順詳細

## 1. Flutterプロジェクトの作成

#### Flutterのインストール

- Flutterがまだインストールされていない場合は、[Flutterの公式サイト](https://flutter.dev/)からインストールします

#### 新しいFlutterプロジェクトの作成

- コマンドラインで下記のコマンドを実行し、新規プロジェクトを作成します。
- `my_flutter_app`はプロジェクト名で、必要に応じて変更してください。

```
flutter create my_flutter_app
```

## 2. golden_toolkitの設定

#### 依存関係の追加

- プロジェクトの`pubspec.yaml`に`golden_toolkit`を依存関係として追加します。

```yaml
dev_dependencies:
  flutter_test:
    sdk: flutter
  golden_toolkit:
```

#### パッケージの取得

- コマンドラインで下記のコマンドを実行して、新しい依存関係を取得します。

```
flutter pub get
```

## 3. Golden Testの記述

#### テストファイルの作成

- `test`ディレクトリ内にGolden Test用のファイルを作成します。
    - 例：`widget_test.dart`

```dart
import 'package:flutter_test/flutter_test.dart';
import 'package:golden_toolkit/golden_toolkit.dart';

void main() {
  testGoldens('MyWidget golden test', (WidgetTester tester) async {
    await tester.pumpWidgetBuilder(MyWidget());
    await screenMatchesGolden(tester, 'my_widget_golden');
  });
}
```

## 4. 画像ストレージの設定

- AWS S3やGoogle Cloud Storageなどの画像の保存先を設定します。


## 5. Github Actionsの設定

#### GitHub リポジトリの設定

- FlutterプロジェクトをGitHubリポジトリにpushします。

#### GitHub Actionsワークフローの作成

- リポジトリの`.github/workflow`ディレクトリにワークフローファイル (例：`flutter_ci.yml`)を作成します。

```yaml
name: Flutter CI

on:
  pull_request:
    branches: [ main ]

jobs:
  flutter_test:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - uses: subosito/flutter-action@v1
      with:
        flutter-version: '2.x'

    - name: Set up AWS credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: [リージョン]
    <<<<省略>>>>
    - name: Install dependencies
      run: flutter pub get

    - name: Install reg-suit
      run: npm install -g reg-suit

    - name: Run golden tests
      run: flutter test --update-goldens

    - name: Run reg-suit
      run: reg-suit run

```

# 実行結果

reg-suitから出力されるurlをクリックすると、このようなビジュアルリグレッションテストの結果が表示されます。

また、GitHubのPR画面においても同様のreg-suitの結果が確認することが可能です。

![golden.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136035/2a39805a-37f3-bf37-9324-a0593ff4682f.png)

# おわりに

いかがでしたでしょうか。色々なテスト作業を自動化していって、少しでも正味時間を増やしていきたいですね！

では、これからも素敵なテスト自動化ライフを送っていきましょう！
portsnap とか svnlite とかの代わりは gitup がいいらしいですよ

# 取得(clone/pull)に特化した軽量バージョンマネージャー gitup

Advent Calendar 2023 二日目

https://qiita.com/nanorkyo/items/f7d2d796b8303eb656f2

と

https://qiita.com/je3kmz/items/588f515bdc594c4fec5c

で portsnap が無くなったよ！ネタがありました。今まで ports ツリーの管理に portsnap を使っていて、開発マシンでもないのにいろいろ依存pkgが同時に入ってしまう git は入れたくないなぁという人は結構多いかもしれません。
2023/12/01 に行われたFreeBSD ワークショップでも話題になり、その時 ワークショップ主催 の佐藤先生が紹介したのが gitup (ports:net/gitup)というコマンドです。
ファイルの取得(clone/pull)専用のコマンドで、/usr/src や /usr/ports を最新に同期することに特化したコマンドです。git より依存するライブラリが少なくサイズも小さいので、git よりも気楽に入れられるでしょう。

# 使い方

pkg が用意されているので pkg install でインストールできます。

```sh
# pkg install gitup
```
ports は `net/gitup` です。

ports ツリーを取得するには `gitup ports` とします。/usr/src は current のソースツリーならば `gitup current` 、リリースならば `gitup release` です。単純ですね。
ですが、インストール直後にいきなり実行すると設定ファイルが無いよと怒られてしまいます。

```sh
# gitup ports
gitup: load_config: cannot load /usr/local/etc/gitup.conf: Inappropriate file type or format
```

設定ファイルは `/usr/local/etc/gitup.conf` です。gitup の pkg/ports をインストールすると `/usr/local/etc/gitup.conf.sample` もインストールされているので、それをコピーします。デフォルトのサーバーで、ローカルパスとして /usr/ports や /usr/src を使用するならば特に変更しなくても使えます。
設定ファイルが用意できたら実行可能です。
再度 `git ports`を実行してみましょう。

```
# gitup ports
# Host: git.freebsd.org
# Port: 443
# Repository Path: /ports.git
# Target Directory: /usr/ports
# Want: 375ae40f4dff2904b15d9a55fb3241f683dede7c
# Branch: main
# Action: clone
 + /usr/ports/.arcconfig
 + /usr/ports/.gitignore
 + /usr/ports/.hooks/pre-commit
 + /usr/ports/.hooks/pre-commit.d/check_category_makefile
 + /usr/ports/.hooks/pre-commit.d/check_created_by
〜（中略）〜
 + /usr/ports/x11/zenity/distinfo
 + /usr/ports/x11/zenity/pkg-descr
 + /usr/ports/x11/zenity/pkg-plist
#
# Please review the following file(s) for important changes.
#       /usr/ports/UPDATING
#       /usr/ports/mail/dspam/files/UPDATING
#
# Done.
```

これで ports の取得ができました。差分取得も同じコマンド `gitup ports`で OK です。
同様に /usr/src の取得/更新も、current ならば `gitup current` で行えます。

gitup は FreeBSD のベースに入れるという話もあるようです。portsnap や svnlite の代替を探している方は試してみてはいかがでしょうか。
いいかげん「計画性を持った行動をしてみない？」2年目

# 問. Qiitaとは？
答えは単純で、反省文を書くところです。（いいえ違います）

# 最初にして最大のミス
今年はなんと！計画性を持たず行動をおこなったせいで、本来なら1日づつ日めくりされていくはずのアドベントカレンダーが、まるで夏休みの宿題のように最後の方にまとめてオープンすることになってしまいました。
理由としては今年はとても忙しかったからですあぁ忙しい忙しい。
えぇまぁ残念ながら毎年恒例で、私の隣に可愛い女の子はいない状態での記事投稿ですが。猫はいますよ。

昨年は2ヶ月間の余裕を持ち、最終日記事(12/25公開)は12/19に書き終えているという私にしてはかなり素晴らしいスケジュール管理でした。
が、今年はどうでしょうか。
初日記事(12/1公開)は11/27に書き終えております。

...？

前年比約-70%のスケジュール余裕で25記事を書き切らなければなりませんでした。
それだけではなく前年よりも様々な忙しいことがあり、記事を書けない日・パソコンの前に座れない日も多くありました。
そんな中で、この記事を書いているのは12/24 23時。この記事だけは...12/25の朝には間に合わせたい...！という思いです。
最後にこんな記事が来たらストーリーチックでいいですねぇ〜ってなるでしょ？

さて、メタというかズルというかなんというかな話をしていこうと思います。

さて、本アドカレの概要欄にも記載しておりますが、私がQiitaアドベントカレンダーに参加しているのは、完走すると可愛い可愛いきーたんぬいがもらえるからです。
あいつまじで可愛くて今でもお部屋で戯れています。
この、ぬいぐるみをもらうためには、アドベントカレンダーを完走しなければなりません。
では、期限はいつまでなのでしょうか。

![IMG_6502.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/e3215069-d864-d5f4-472f-dc422f17e682.jpeg)

はい、こちら。

`Qiita Advent Calendar 2023 終了〆`と書いてあるのはいつまでですか？

そう！！！！

`12.25.mon 23:59`！！！

つまり、サンタさんが家に来てからでもまだ時間的猶予はあるのです！
というわけで先にこの記事を12/24に書き終え、残りの記事を12/25が終わるまでに書き切ってしまえば晴れて完走！かわいいぬいとご対面！というわけなのです！この欲望まみれ人間が！

すいません、興奮しました。

というわけで、私はなんとか最後の最後で粘ることができたので良かったのですが、皆さんは計画性を持った行動をすることを心がけましょう。
来年こそはかわいい子の隣でアドカレの記事書くんだ...！

というわけで、計画性を持たない私はこの後も予定があるので...ほんますまん...いやデートじゃないんだ...デートはしたいんだ...

じゃ、皆さんもご一緒に...「計画性を持った行動をしてみない？」

# 後書き
サンタさんへ

幸せで平穏な生活を送らせてくれ
[初心者]　GitHubの使い方　基本編

## はじめに
プログラミング学習中の初心者が、GitHubの基本となる使い方を説明します。

## Gitとは
プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムのこと。
編集前のファイルを残したまま、新しいデータの保存ができます。

## GitHubとは
Gitの仕組みを利用して、世界中の人々が自分の作品(プログラムコードやデザインデータなど)を保存、公開できるようにしたウェブサービスです。
データを保存するだけでなく、自分以外のエンジニアとの共有や、誰が・どこを・いつ編集したのかの管理を簡単に行える便利な機能。


## それではGitHubの基本となる使い方を始めていきます
### １:　GitHubでリモートリポジトリを作成
GitHub画面内、　Repositories右上の 『New』の緑ボタンを押し、リモートリポジトリを新規作成する。 リポジトリ名(Repository name) と 説明(Description) 等を設定し、「Create repository」ボタンを押すと、新しいリモートリポジトリを作成することができます。

### ２: ローカルリポジトリの設定
GitHubでリモートリポジトリを作成した際に画面に出てくるコマンドを順に実行していく。

### 3: 開発用のブランチを切る
git switch -c ブランチ名　で開発用のブランチを作成します。
- `git switch` はブランチを切り替えるためのコマンドです。
-c オプションをつけると、新しいブランチを作成し、そのブランチに切り替えることができます。
- `-c` オプションは、新しいブランチを作成しそのブランチに切り替えるオプション

### 4: プルリクエスト作成
ファイルに変更を加えて、　`git push origin ブランチ名` でプルリクエストを作成する。
- 　`git push origin ブランチ名`とは、ローカルの特定のブランチの変更をリモートリポジトリにプッシュするための Git コマンド。
- プルリクエストとは、あるブランチから別のブランチに一連の変更をマージする提案です。

### 5: mainブランチにマージ
GitHub画面内、『Merge pull request』の緑のボタンから、メインブランチにマージをする。

## まとめ
GitHub の基本的な使い方は以上になります。
これからもっと詳しく学習していき、GitHubをマスターできるよう、頑張ります！
【SwiftUI】iOS16から使えるlineLimitのreservesSpaceが地味に便利

# はじめに
iOS16から`lineLimit`に新たな引数が指定できるようになりました。
`reservesSpace`です。

# reservesSpaceで何が変わる？
![スクリーンショット 2023-12-24 23.18.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/be009e9b-3e73-5ae6-4682-3cfe06d18c39.png)

`reservesSpace`に`true`を指定すると想定される行数分のスペースを確保してくれます。
今回でいうと3行に満たないTextでも3行分のスペースを用意してくれているのがわかります。

一方、`reservesSpace`に`false`を指定している方はTextに行数分のスペースしか与えられていません。

```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 30) {
            Text("短い文")
                .lineLimit(3, reservesSpace: true)
                .background(.yellow)

            Text("短い文")
                .lineLimit(3, reservesSpace: false)
                .background(.yellow)
        }
        .frame(width: 200)
        .padding(10)
        .background(.red)
    }
}
```

# 長い文はどちらも変わらない
![スクリーンショット 2023-12-24 23.25.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/21698acc-8155-7e35-108c-68c1ad130ef4.png)

3行以上の文では`reservesSpace`にどちらを指定しても見た目は変わりません。

```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 30) {
            Text("短い文\n(reservesSpace: true)")
                .lineLimit(3, reservesSpace: true)
                .background(.yellow)

            Text("短い文\n(reservesSpace: false)")
                .lineLimit(3, reservesSpace: false)
                .background(.yellow)
            
            Text("長い文\n(reservesSpace: true)\nxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx")
                .lineLimit(3, reservesSpace: true)
                .background(.yellow)

            Text("長い文\n(reservesSpace: false)\nxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx")
                .lineLimit(3, reservesSpace: false)
                .background(.yellow)
        }
        .frame(width: 200)
        .padding(10)
        .background(.red)
    }
}
```

# おわり
こういう細かいところを自分で実装しなくてもいいの助かります。

# 公式ドキュメント
https://developer.apple.com/documentation/swiftui/view/linelimit(_:reservesspace:)
micro:bit の Python Editor V3 について

# はじめに

2022年にリリースされた micro:bit 用の Python Editor V3 を紹介します。

# 外観

[micro:bit Foundation](https://microbit.org/ja/)より、2022年秋に [Python Editor V3](https://python.microbit.org/v/3)がリリースされました。Web ブラウザ上で動きます。micro:bit への転送に WebUSB を使うので Chrome 系のWebブラウザでアクセスするのがよいでしょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106817/48f6daef-31ec-f93c-5ab7-0ee7ee0caa37.png)

※　[Python Editor V2](https://python.microbit.org/v/2)もまだ使えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106817/511eed42-1cf5-5c4c-74a6-ef1fbea6a9c3.png)

個人的な印象ですが、V2 のちょっと安っぽい画面に比べると V3 はかなり洗練されています。

V3 では機能も大きく増強されていて、補完はもちろんのこと、マニュアルの例のペースト、シミュレータのサポートなどがサポートされています。日本語化も大部分完了しています（私も日本語化に参加していました）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106817/724aefcf-2613-be8e-5eba-b9177ac45da5.png)

# Pyhon Editor V3リリースの背景

micro:bit Foundation は、以下の意図があって V3 を開発/リリースしました。

* MakeCode のブロックベースのプログラミングは、プログラミング入門者をサポートする素晴らしいツールだが、多くの領域では圧倒的にテキストベースのプログラムが利用されている
* ブロックベースのプログラミングからテキストベースへの移行の手助けとなる環境を提供したい

マニュアルにサンプルコードが多くあるのと、それらを容易にエディタ領域にペーストできる機能を有しているなど、確かにブロックベースのプログラミングからの移行を意識したものになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106817/f84b97ca-85b7-6576-75ee-8427a33b3cff.png)

MakeCode と同様にシミュレータもあるので、実機に転送前にある程度動作を確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106817/e88783e1-58cc-21bb-be97-b886c5e97dd8.png)

それでは、なぜテキストベースのプログラミング言語として Python (厳密には MicroPython)を採用しているかというと、幅広い領域で利用されている人気のプログラミング言語であるということと、シンプルで自然言語（英語）に近い構文であることが理由とのことです。micro:bit 以前から Python をプログラミング言語に採用している学校が英国に多かったというのも大きいでしょう。

# おわりに

かつて、micro:bit の Python エディタとしては [mu](https://codewith.mu/)が推奨されていましたが、現在となってはオフラインでの要求がなければ Python Editor V3 で十分でしょうし、機能的に上回っているところもあります。

micro:bit というと MakeCode の使用例ばかりが目立ちます。それは V3 エディタ登場後もあまり変わらないように見えます。イベント処理がないことと(micro:bit の Python　には割り込みもないので、イベントループを用意しないといけない)、BLEが未だサポートされないのも原因なのでしょうが、学校教育ではテキストベースのプログラミングって敷居が高いのでしょうかね。
闘魂Elixir ── Advent of code 2023 Day 1 Part 2 を Livebook で楽しむ

<b><font color="red">$\huge{元氣ですかーーーーッ！！！}$</font></b>
<b><font color="red">$\huge{元氣があればなんでもできる！}$</font></b>

<b><font color="red">$\huge{闘魂とは己に打ち克つこと。}$</font></b>
<b><font color="red">$\huge{そして闘いを通じて己の魂を磨いていく}$</font></b>
<b><font color="red">$\huge{ことだと思います}$</font></b>

https://qiita.com/advent-calendar/2023/elixir

## はじめに

@torifukukaiou さんの ~~パク~~ リスペクト記事です

https://qiita.com/torifukukaiou/items/ca63a2272c409e79a80f

Elixir Livebook で Advent of Code 2023 の問題を解いてみます

https://adventofcode.com/2023

実装したノートブックはこちら

https://github.com/RyoWakabayashi/elixir-learning/blob/main/livebooks/aoc/2023/2023_day1_part2.livemd

問題はこちら

https://adventofcode.com/2023/day/1

Part 1 はこちら

https://qiita.com/RyoWakabayashi/items/3d3abcf9134cee4dff05

## セットアップ

Kino AOC をインストールします

```elixir
Mix.install([
  {:kino_aoc, "~> 0.1.5"}
])
```

Kino AOC の使い方はこちらを参照

https://qiita.com/RyoWakabayashi/items/3d3abcf9134cee4dff05

## 入力の取得

Day 1 の入力を取得します

![スクリーンショット 2023-12-24 23.17.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/0c5088a2-bc8d-43a4-5c5d-339f5b94087a.png)

## 私の答え

私の答えです。
折りたたんでおきます。
▶を押して開いてください。

<details><summary>details</summary>

英単語の数を数字に置き換えるマップを用意します

例にある `zoneight234` のような `one` と `eight` で `e` が重なっているとき、片方だけが置換されることがないよう、前後の一文字は残しておきます

```elixir
digits_map = %{
  "one" => "o1e",
  "two" => "t2o",
  "three" => "t3e",
  "four" => "f4r",
  "five" => "f5e",
  "six" => "s6x",
  "seven" => "s7n",
  "eight" => "e8t",
  "nine" => "n9e"
}
```

各行について全ての数を数字に置き換えます

あとは Part 1 のときと同じです

```elixir
puzzle_input
|> String.split("\n")
|> Enum.map(fn line ->
  digits =
    digits_map
    |> Enum.reduce(line, fn {word, num}, acc ->
      String.replace(acc, word, num)
    end)
    |> then(&Regex.scan(~r/[0-9]/, &1))

  first = digits |> hd() |> hd()
  last = digits |> Enum.reverse() |> hd() |> hd()
  String.to_integer(first <> last)
end)
|> Enum.sum()
```

</details>

## まとめ

`oneight` は意地悪ですね
Ubuntu 22.04 に MySQL 8.0 をインストール

自分用メモ。

# 構築環境

以下の環境にHyper-V上の仮想マシンに構築します。

- Hyper-V VM
- OS : Ubuntu 22.04 LTS
- IPアドレス : 192.168.1.201

# MySQL最新版インストール

まずは何はともあれMySQLのインストール。

```bash
dbuser@dbserver:~$ sudo apt update
dbuser@dbserver:~$ sudo apt install mysql-server
dbuser@dbserver:~$ mysql --version
mysql  Ver 8.0.35-0ubuntu0.22.04.1 for Linux on x86_64 ((Ubuntu))
```

記事作成時のMySQLの最新は8.0.35。なので以下はそれに伴う記載をします。

# MySQLにユーザ作成

MySQLにrootユーザでログインします。

```bash
dbuser@dbserver:~$ sudo mysql -u root
```

ユーザを作成します。
今回は`testuser`を作成。
`testuser`、`password`、`%`は環境により変更します。

```sql
mysql> CREATE USER 'testuser'@'%' IDENTIFIED BY 'password';
Query OK, 0 rows affected (0.02 sec)
```

さて、これでユーザは作成できました。
ただこの`testuser`では、外部から接続することもできません。
例えば同じLAN上のPCから以下のようにしても接続できません。

```bash
$ mysql -u testuser -p -h 192.168.1.201
Enter password:
ERROR 2003 (HY000): Can't connect to MySQL server on '192.168.1.201:3306' (111)
```

これは初期設定では、mysqld.cnfでDBがlocalhostのみにバインドされているため。
自機からのみ接続されるならこれでも良いのでしょうが、私は外部から接続したい。
そのため以下のmysqld.cnfの編集に続きます。

# mysqld.cnf の編集

mysqld.cnfにある`bind-address`をコメントアウトし、どのIPアドレスからもアクセスできるようにします。
その後、MySQLを再起動します。

```bash
dbuser@dbserver:~$ sudo vi /etc/mysql/mysql.conf.d/mysqld.cnf
dbuser@dbserver:~$ sudo service mysql restart
```

これで設定が反映されたはずです。
手元のPCに戻って再試行します。

```bash
$ mysql -u testuser -p -h 192.168.1.201
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 10
Server version: 8.0.35-0ubuntu0.22.04.1 (Ubuntu)

Copyright (c) 2000, 2023, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>
```

無事接続できました。

# ufw設定

ufwで使用するポートを開放・設定していきます。
環境によって開くポートは各々違いますが、ここではSSHの22番およびMySQLの3306番のみ、192.168.1.0/24からの接続を許可していきます。

```bash
$ sudo ufw status
Status: inactive
$ sudo ufw allow from 192.168.1.0/24 to any port 22
Rules updated
$ sudo ufw allow from 192.168.1.0/24 to any port 3306
Rules updated
$ sudo ufw enable
Command may disrupt existing ssh connections. Proceed with operation (y|n)? y
Firewall is active and enabled on system startup
$ sudo ufw status
Status: active
To                         Action      From
--                         ------      ----
22                         ALLOW       192.168.1.0/24
3306                       ALLOW       192.168.1.0/24
```

これについてもより詳しい設定は色々あると思いますが、ここではMySQL（とssh）で接続する最低限の設定としています。

# 参考

- [誤解にみちたmariadb/mysqlのbind-address](https://kays-lab.com/info/%E8%AA%A4%E8%A7%A3%E3%81%AB%E3%81%BF%E3%81%A1%E3%81%9Fmariadb-mysql%E3%81%AEbind-address/)
- [UbuntuにMySQLをインストール](https://qiita.com/houtarou/items/a44ce783d09201fc28f5)
抽象クラスとインターフェースの違いについて

# はじめに
PHPのオブジェクト指向の学習を進めていく中で、`抽象クラス`と`インターフェース`という似た性質を持つ仕組みがあることを知った。
初学者にはその違いがわかりにくかったため、それぞれにどのような特徴があるのかをまとめることにした。

# 抽象クラスとは
以下に、抽象クラスの特徴をまとめる。
- 抽象クラスは他のクラス（サブクラス）に extends されることを前提としている。サブクラスが抽象クラスを継承することで、共通の機能や特性を利用できる。
- 抽象メソッドと`通常のメソッド、プロパティ`を実装することができる。
- サブクラスは`抽象メソッドを必ず実装する必要があるが、通常のメソッドはオーバーライドする必要がない。
- サブクラスは`1つの抽象クラスしか継承できない`が、通常のクラスと同じように、プロパティや通常のメソッドを継承できる。
- 抽象クラス自体は`直接インスタンス化できない。`サブクラスを通じてインスタンス化する必要がある。
- `コンストラクタ（__constructメソッド）を実装できる。`サブクラスが抽象クラスを継承する際に、親クラスのコンストラクタも呼び出される。

以下に、上記特徴を持つプログラムの例を挙げる。

```PHP:抽象クラス.php
<?php

// 抽象クラスの定義
// インスタンス化できない
abstract class Animal
{
    // プロパティの宣言
    protected $name;

    //　コンストラクタの実装
    public function __construct($name)
    {
        $this->name = $name;
    }

    // 通常のメソッドの実装
    public function sleep()
    {
        return $this->name.'は寝ています。';
    }

    // 抽象メソッドの実装
    abstract public function makeSound();

// サブクラスが抽象クラスを継承する
// 抽象クラスのプロパティや通常のメソッドを継承できる
// 抽象クラスのコンストラクタを継承できる
class Dog extends Animal
{
    // 抽象メソッドは必ず実装
    // 通常のメソッドはオーバーライドする必要がない
    public function makeSound()
    {
        return $this-name.'がワン！と鳴きました。';
    }
}
}
```

上記例では、 Animal という抽象クラスがあり、 Dog というサブクラスがそれを継承している。
Animal クラスは、通常のメソッド sleep() と抽象メソッド makeSound() を実装し、プロパティ $name を宣言している。コンストラクタも実装している。
Dog クラスで抽象メソッド makeSound() の実装を行っている。


# インターフェース
以下に、インターフェースの特徴をまとめる。
- インターフェースは他のクラスに implements されることを前提としている。インターフェースは、その中で定義されたメソッドの実装をクラスに強制する。
- 全てのメソッドが抽象メソッド扱いとなり、`通常のメソッドは実装できない。` 
 ※PHP 8.0以降ではプロパティの宣言が可能。
- インターフェースを実装したクラスは、インターフェースの全てのメソッドを実装する必要がある。
- クラスは`複数のインターフェースを同時に実装できる。`
- インターフェースは`コンストラクタを持つことができない。`

以下に、上記特徴を持つプログラムの例を挙げる。

```PHP:インターフェース.php
<?php

// 1つ目のインターフェースの実装
interface Animal
{
    // 抽象メソッドの実装
    public function makeSound();

    // 通常のメソッド、コンストラクタの実装ができない
}

// 2つ目のインターフェースの実装
interface Action
{
    // 抽象メソッドの実装
    public function doAction();
}

// クラスが複数のインターフェースを同時に実装する
class Dog implements Animal, Action
{
    // 抽象メソッドは必ず実装
    public function makeSound()
    {
        return 'ワン！と鳴きました。';
    }

    // 抽象メソッドは必ず実装
      public function doAction()
    {
        return 'おすわりしました。';
    }
}
````

上記例では、 Animal と Action という2つのインターフェースがあり、 Dog というクラスがそれを実装している。
Animal インターフェースは、抽象メソッド makeSound() を実装し、Action インターフェースは、抽象メソッド doAction() を実装している。
Dog クラスで抽象メソッド makeSound() と抽象メソッド doAction() の実装を行っている。

# まとめ
PHPのオブジェクト指向において、抽象クラスとインターフェースは似た性質を持ちつつも異なる特徴があることがわかった。しかし、特徴を把握したは良いものの、どのような場面でどちらの仕組みを使えば良いかが全く理解できていない。
今後プログラムを作成する際は、今回整理した知識をもとに、抽象クラスとインターフェースを使い分けることを意識する。その後、使い分け方についてある程度整理ができた段階で追加の記事を作成しようと思う。
【HTML】HelloWorldを表示させる方法

# はじめに
今回は`HTML`で`Hello World`を表示させていこうと思う

まずは適当な場所に`index.html`ファイルを作成していく
```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>hoge</title>
</head>
<body>
    <p>Hello World</p>
</body>
</html>
```
ファイルをブラウザにドラッグ＆ドロップする
p5.jsで作る動くテキストアニメーション

# はじめに
みなさんこんにちは。
突然ですが、テキストアニメーションってよく使いませんか？
でも、よく使う割にはフェードさせたり、上から下に動かすパターンしかなく似たり寄ったりのテキストアニメーションになってしまう。。

こんな風に思ったこと、ありませんか？

私もそう思って色々と調べていたらp5.jsを使用したリッチなアニメーションがあったので自分なりにアレンジしてご紹介したいと思います。

# p5.jsとは
p5.jsはProcessingというクリエイティブ表現のためのプログラミング言語（と開発環境）をJavaScriptに移植したライブラリーです。
特にクリエイティブ・コーディングや視覚芸術の分野で非常に人気があり、初学者からプロまで幅広いユーザー層に利用されています。
公式サイトは[こちら](https://p5js.org/)

# サンプル
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="eYXmmyd" data-user="river_ant" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/river_ant/pen/eYXmmyd">
  Text particle</a> by river (<a href="https://codepen.io/river_ant">@river_ant</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
こちらが今回紹介するアニメーションのサンプルです。
細かい正方形で「テキスト」という文字が作られています。

# 原理を簡単に説明
どうやって正方形で”テキスト”という文字を作っているかというと
あらかじめ”テキスト”という文字をライブテキストで描画しておき、テキストの位置情報を透明度で判別して取得し、配列に格納していきます。
最後に文字自体を削除して取得した位置情報をもとに正方形を配置していくという流れです。

# コード内の変数、関数とクラスの説明
1\. `Particle` クラス：
constructor(x, y, size): パーティクルを初期化します。座標 (x, y) とサイズ （size） を受け取ります。
init(): パーティクルの初期設定を行います。サイズ、色、速度、表示時間などがランダムに設定されます。
display(): パーティクルを描画します。サイズは時間の経過に応じて変化します。
update(): パーティクルの位置を更新し、描画のための情報を計算します。

2\.`setup()`:
p5.jsの初期設定を行います。キャンバスの作成、フレームレートの設定などが含まれます。

3\.`colors`: パーティクルの色を格納した配列です。

4\.`init()`: get(target_x, target_y)[3] を使用して、ピクセルのアルファ値が 0.5 より大きい場合に粒子を生成します。

5\.`draw()`: アニメーションの描画を行います。キャンバスの背景をクリアし、各粒子の更新と表示を行います。

# アレンジも幅広い
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="NWooZew" data-user="river_ant" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/river_ant/pen/NWooZew">
  Text particle</a> by river (<a href="https://codepen.io/river_ant">@river_ant</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
jsを使用してアニメーションさせているのでアレンジも幅広く上記のように絵本っぽいトンマナにしたり粒子に動きをつけたり、色を変えたりと、これだけで表現の幅がグッと増えます。
テキストの変更も文字列を修正するだけで済むのでありがたいですね。

# p5.jsを学ぶには
p5.jsの公式ではチュートリアルやデモサンプルなどのドキュメンが充実しています。
![スクリーンショット 2023-12-24 22.57.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728643/aff68554-c9e0-27ad-a1f6-38fc5296ff90.png)
基本的な機能から応用的なトピックまで、豊富なリソースが用意されています。

また公式で公開されているp5.js Web Editorは、オンラインでp5.jsを試すための便利なツールです。
ウェブサイト上でコードを記述し、即座に結果をプレビューできます。
![スクリーンショット 2023-12-24 23.03.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728643/cdc9a8d7-8484-5f19-be63-9030322d4b47.png)

# 終わりに
gsap然りp5.jsなどのライブラリは手軽に表現の幅を広げることができるので大変助かりますね。
今回はcanvasを使ってアニメーションを描画するためにp5.jsを使いましたがp5.jsには他にも色々な機能や表現ができるのでぜひ使ってみてください。

足早に紹介しましたが参考になれば幸いです！

# 参考
https://codepen.io/Gthibaud/pen/pyeNKj
https://p5js.org/
https://ics.media/entry/210129/
【Java】HelloWorldを表示させる方法

# はじめに
今回はJavaでHello Worldを表示させていこうと思う

まずは適当な場所に`HelloWorld.java`ファイルを作成していく
```java:HelloWorld.java
public class Main{
    public static void main(String[] args){
        System.out.println("Hello World");
    }
}
```
コマンドプロンプトを開く
`HelloWorld.java`がある場所に移動して
`javac HelloWorld.java`を実行する
`java HelloWorld`を実行する
[Unity]Shader GraphでRGBシフト作ってみた

メリークリスマス！、[Iwaken Lab. Advent Calendar 2023](https://qiita.com/advent-calendar/2023/iwakenlab)の24日目を担当するKuniです。

# 本記事について
+ この記事ではUnityを使用しますが、インストールが終わっている前提で進めていきます。
+ UnityのShader Graphを使用するので、Package ManagerよりShader Graphのインストールを行っておいてください。

# この記事でできること
Shader Graphを使用して、下記画像のようなRGBシフトを作成することができます。
左が元画像、右がRGBシフトの適用後

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517131/62fd5f4f-2386-5027-2951-69727974635e.png)

# RGBシフトとは
色収差やRGBずらしとも言われます。
通常の画像では Red、Green、Blue といった光の三原色はズレることなく同位置にあります。ですが、それを意図的に位置をズラすことで起きる表現になります。

# 作り方
Shader Graphを作成し、下記画像のようにノードを繋げます。

![スクリーンショット 2023-12-24 222507.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517131/8bf2e07b-391b-2ca8-b1a1-7f23367bc075.png)

+ Texture2DはBlackboardに設定されたプロパティです。
このプロパティに任意の画像を設定することで、その画像に対してRGBシフトを行うことができます。上記のノード内では拾ってきた画像を使用しています。
+ Tile And Offset ノードの Offset の部分で UV のズラしを行っています。ここの数値を大きくすることでズラしさらに大きくすることができます。
+ ズラした UV を Sample Texture 2D ノードに入れます。こうすることで画像をズラすことができます。
+ ズラした画像のR、G、B、それぞれを Combine ノードで結合することで１つにまとめ、それをカラーとして出力しています。

# 最後に
Shader Graphを使用するとお手軽にいろいろな特殊効果を作成することができます。ノードベースなのでプログラムの知識がなくても作成できるのでとても便利だと思います。皆さんもぜひ試してみてください。

明日は[Icchy](https://qiita.com/Icchy_tsukuba)さんによる記事です！ほかにも[Iwaken Lab. Advent Calendar 2023](https://qiita.com/advent-calendar/2023/iwakenlab)では面白い記事がたくさんあるので、ぜひ見てみてください！
Google Chromeの頻繁使用コマンドにショートカットを割り当てよう

# 経緯
Apple端末間でデータのやり取りがシームレスにできていたのに、macで使用しているGoogle Chromeのバージョンが120.0以上になってからMacからiPhoneへの情報共有が手間がかかって仕方がないことに疲れたため調べて実装したのでその備忘録になります。(ちなみにiPhoneからMacは簡単です)
~~1年後の2024年の12月24日の自分に牽制を送るためにもこの日に記事を唇噛みながら書きました!!~~

## 環境
MacOS バージョン：13.6
Google Chrome バージョン：バージョン: 120.0.6099.129

## 結論
Google ChromeではAirDropにショートカットは割り当てが無かったんですが、今回の記事の手順で(現在のGoogle Chromeであれば)ショートカットが使えるようになりました。

(下記のスクショがゴールになります)
### <変更前>
![スクリーンショット 2023-12-24 22.28.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566867/2bb0953f-0765-592e-6f6e-0e4d42980942.png)


### <変更後>
![スクリーンショット 2023-12-24 22.30.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566867/1a286137-6e5e-e2c0-9ca3-8365d702bc40.png)


## 手順

### step.1 - アップルメニューから「システム設定」を選択
![スクリーンショット 2023-12-24 22.56.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566867/5c53036a-7ecc-32fb-7a2a-4255b781c4f4.png)

### step.2 - キーボードを選択
![スクリーンショット 2023-12-24 22.23.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566867/1c2fb64d-c1a3-d156-866e-1184798d9275.png)


### step.3 - キーボードショートカットを選択![スクリーンショット 2023-12-24 22.24.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566867/fea45ed8-1c8e-b51e-2dc1-0e56e0ef96ef.png)
　
### step.4 - 左カラムのアプリケーションを選択し、プラスボタンからアプリケーションを選択

![スクリーンショット 2023-12-24 22.23.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566867/d86c9e5f-7a30-89aa-5e89-389f558da399.png)

### step.5 - 今回はGoogle Chromeを選択
![スクリーンショット 2023-12-24 22.25.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566867/2b4ed6a6-85fb-f86e-3c2e-f18a4ea9fd4d.png)

### step.６ - 割り当てたいコマンドを上記バーに書いてある内容を正確に入力。呼び出すときのキーボードショートカットを割り当てして完了ボタンをクリック。

![スクリーンショット 2023-12-24 22.26.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566867/37da2060-c2ef-a16a-4b87-b05ae6a5ef8c.png)


### step.7 - 完了したらGoogle Chromeを一旦閉じて設定を反映させる。再起動させたら完了です。
![スクリーンショット 2023-12-24 22.30.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566867/34d9adfa-385f-6536-c950-3c462d8491f9.png)

### step.8 - お疲れ様でした

以上となります。
設定の仕方よりもどうやったらできるのかを調べる方が時間がかかりました。わかって終えば結構あっさりと反映させることができました。(Google Chromeを一旦閉じないといけないという点はちょっと時間を溶かしたのでみなさん注意です。)

*****
参照記事

https://blog.enakko.net/mac-modify-shortcut-chrome/
アドベントカレンダーのアドベントとは何か

アドベントカレンダーとは、クリスマスまでの期間を穴埋めしたカレンダーです。
エンジニア界隈も技術発信強化期間としてブログ投稿が盛り上げる期間です。
アドベントはキリストの降誕を待ち望むという意味です。宗教的な由来ですね。
闘魂Elixir ── Advent of code 2023 Day 2 Part 1 を Livebook で楽しむ

<b><font color="red">$\huge{元氣ですかーーーーッ！！！}$</font></b>
<b><font color="red">$\huge{元氣があればなんでもできる！}$</font></b>

<b><font color="red">$\huge{闘魂とは己に打ち克つこと。}$</font></b>
<b><font color="red">$\huge{そして闘いを通じて己の魂を磨いていく}$</font></b>
<b><font color="red">$\huge{ことだと思います}$</font></b>

https://qiita.com/advent-calendar/2023/elixir

## はじめに

@torifukukaiou さんの ~~パク~~ リスペクト記事です

https://qiita.com/torifukukaiou/items/e4c4eb6e3f75b79bcd57

Elixir Livebook で Advent of Code 2023 の問題を解いてみます

https://adventofcode.com/2023

実装したノートブックはこちら

https://github.com/RyoWakabayashi/elixir-learning/blob/main/livebooks/aoc/2023/2023_day2_part1.livemd

問題はこちら

https://adventofcode.com/2023/day/2

## セットアップ

Kino AOC をインストールします

```elixir
Mix.install([
  {:kino_aoc, "~> 0.1.5"}
])
```

Kino AOC の使い方はこちらを参照

https://qiita.com/RyoWakabayashi/items/3d3abcf9134cee4dff05

## 入力の取得

Day 2 の入力を取得します

![スクリーンショット 2023-12-24 22.44.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/adc1ffea-130c-b2af-b9ba-92aaf6406fee.png)

## 私の答え

私の答えです。
折りたたんでおきます。
▶を押して開いてください。

<details><summary>details</summary>

まずは入力を使いやすい形にパースします

```elixir
games =
  puzzle_input
  |> String.split("\n")
  |> Enum.into(%{}, fn line ->
    [title, items] = String.split(line, ":")

    game_num =
      title
      |> String.replace("Game ", "")
      |> String.to_integer()

    game =
      items
      |> String.split(";")
      |> Enum.map(fn subsets ->
        subsets
        |> String.split(",")
        |> Enum.into(%{}, fn subset ->
          [_, number, color] = String.split(subset, " ")
          {color, String.to_integer(number)}
        end)
      end)

    {game_num, game}
  end)
```


ゲーム ID をキーとして、それぞれのゲームの内容を配列で持っています

各ゲーム内のサブセットについて、実行可能かどうかのチェック用関数を用意します

```elixir
games
|> Enum.map(fn {_game_num, game} ->
  ["red", "green", "blue"]
  |> Enum.map(fn color ->
    game
    |> Enum.map(&Map.get(&1, color, 0))
    |> Enum.max()
  end)
  |> Enum.product()
end)
|> Enum.sum()
```

</details>

## まとめ

パターンマッチがいい感じに使えたので満足です

Day2 Part2 はこちら

https://qiita.com/RyoWakabayashi/items/0651a967099325fffa08
AutoHotKeyでノートPCの日本語キーボードのキーをカスタマイズ

# 概要
日本語キーボード配列(106/109)にある変換・無変換などのキーを有効活用するためにAutoHotKeyでの割当直してみました。

# 設定
1. 下記リンクからAUtoHotKey v2をダウンロード
AutoHotkey公式
https://www.autohotkey.com/
1. Currrent Userへインストール
1. main.ahkファイルを下記内容にて作成し、フォルダに配置
デフォルト → C:\Users\<ユーザー名>\Documents\AutoHotkey

```main.ahk
;CapsLockを半角キーに割り当て→日本語IME切り替えボタンとして利用する
CapsLock::SC029

;英数を半角キーに割り当て→日本語IME切り替えボタンとして利用する
SC03A::SC029

;AppsKeyをCapsLockに割り当て→CapLockキーは使わないが一応触らない位置に変更しておく
AppsKey::CapsLock

;右シフトの左をPageUpに割り当て
SC073::PgUp

;右CtrlをPageDownに割り当て
RControl::PgDn

;変換をHomeに割り当て
SC079::Home

;カナ/かなをEndに割り当て
SC070::End

;無変換をWin+Dに割り当て（ウィンドウを最小化してデスクトップ画面の表示）
SC07B::#d

;Backspaceの左をBackspaceに割り当て
SC07D::Backspace
```
# 参考
以下のページを参考にしました。感謝します。
- [AutoHotKey v2 doc](https://www.autohotkey.com/docs/v2/)

# 関連ページ
こちらのページもお役に立つと思います
- [AutoHotKey v2で日本語配列(106/109)→英語配列(101/102)](https://qiita.com/snytng/items/ec72d5dd892d3a520d6e)
良い自動化と悪い自動化

ビルゲイツによる次の言葉をご存知でしょうか。

「効率的な操作に技術を適用すると効率性は向上するが、非効率な操作に技術を適用すると非効率性が増す。」

ここで、技術の一つである自動化を当てはめると、次の言葉になります。

「効率的な操作を自動化すると効率性は向上するが、非効率な操作を自動化すると非効率性が増す。」

操作を自動化する前に、その操作が効率的か非効率的かを判断する目を養いたいものです。
MapLibre Styleの構成要素（タイル・フォント・アイコン）

# はじめに

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/c70745c9-d36f-6f76-a9a9-bb8ad4991ba3.png)


MapLibre User Group Japanの@Kanahiroです。

MapLibreとは、モダンなWeb地図にまつわるOSSを傘下に収める開発者コミュニティです。

# 地図のデザイン＝スタイリング

Web地図の世界では、地図のデザインのことをスタイリングと呼びます（紙地図では地図調製でしょうか）。スタイリングには様々な要素ー道路の色・太さ・縁取り、ラベルのフォント・サイズ・改行、アイコン…ーが存在します。

また、Web地図は「ズーム」という概念を持ち、ある意味単一ズームの世界である紙地図とはまた違った面白さがあります。

MapLibre Styleのスタイリングについては以下の記事が詳しいです。

https://qiita.com/moritoru/items/d439f2c3806ba5f635c6

https://qiita.com/moritoru/items/bc54d11ecf24ccabe76c

本記事では、MapLibre Styleを作るために必要なデータと、その生成方法を紹介します。

# MapLbire Styleを構成するデータ

大きく、地図タイル・フォント・アイコンの3種類です。

## 地図タイル

`{z}/{x}/{y}`というURLで定義される地図タイルが必要です。
MapLibre GL JSの利点を最大限生かすならば、ベクトルタイルを利用するのが望ましいです。一方、航空写真のような画像データは、ラスタータイルを利用するのがよいでしょう。

https://qiita.com/Kanahiro/items/ceeb20c158b4c70b62b6

https://qiita.com/Kanahiro/items/4b5f8db5743c69741220

タイルじゃなくても、GeoJSONや画像（JPG/PNGなど）を利用することも出来ますが、パフォーマンスの観点からあまりお勧めはしません。

## フォント（glyphs）

MapLibre Styleでは、フォントは「glyphs」と呼ばれ、事前にプロトコルバッファに変換したファイル群が必要となります。考え方はベクトルタイルに似ており：

```
http://somehostname/{fontstack}/{range}.pbf
```

このURLテンプレートをstyle内に定義しておくことで、作成済みのフォントを利用できます。

```json
glyphs: 'http://somehostname/{fontstack}/{range}.pbf',
```

`fontstack`はフォント名、`range`はUnicodeの範囲を表します。

![Screenshot 2023-12-23 at 9.47.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/9e46f6d3-78c9-e3c3-a87a-7084c75aadbb.png)

以下のツールを用いると、TTFファイルなどからglyphを作成することが出来ます。

https://github.com/maplibre/font-maker

フリーフォントを変換したglyphの例が、下記リポジトリで見られます。

https://github.com/MIERUNE/fonts

## 日本語に関する仕様

日本語テキストに関してはフォントの考え方が異なり：

- デフォルトでは、日本語テキストの描画時には、**glyphsを読みに行かない**。この場合、ブラウザにインストールされたフォントを参照する（CSSで定義してあってもよい）。
- Mapインスタンス定義時に`localIdeographFontFamily: false`とすることで、日本語テキストの場合にも、glyphsを読みにいくようになる。

と、若干難しい仕様になっております。これはパフォーマンスの観点によるものです。日本語をはじめとした「CJK」と呼ばれるフォント群は、描画されうるテキストに含まれる文字群のUnicodeの範囲が非常に広く、ダウンロードしなければならないglyphsファイルが多くなってしまうためです（英数字のみならUnicodeの範囲は極めて限定される）。

致命的なパフォーマンス低下にはなりませんが体感できる程度には遅さを感じるので、ご利用は計画的に。

## アイコン（sprite）

アイコンをはじめとしたMapLibre Style内で用いる画像アセットは、`sprite`をあらかじめ作成しておき、スタイル内で定義します。

```
"sprite":"https://tile.openstreetmap.jp/styles/osm-bright/sprite"
```

MapLibre Styleにおけるspriteは上記URLで定義しますが、実体はPNG画像とJSONファイルです。上記のURLから、ファイルの実体は以下のURLに存在することがわかります。

```
https://tile.openstreetmap.jp/styles/osm-bright/sprite.png
https://tile.openstreetmap.jp/styles/osm-bright/sprite.json
https://tile.openstreetmap.jp/styles/osm-bright/sprite@2x.png # 高解像度
https://tile.openstreetmap.jp/styles/osm-bright/sprite@2x.json
```

spriteは多数の画像アセットを1枚の画像（スプライト）に押し込んだものです。jsonは、どのアセットが・スプライトのどの部分にあるか、を表現するものです。

これらにより、1枚のスプライトから関心対象のアセットのみを切り出して利用することができます。

spriteは下記のツールを用いると非常に簡単に生成することができます。

https://github.com/flother/spreet

なお、style外の実装が必要になりますが、PNG画像を取り込んで地図スタイル内で利用することも可能です。

https://maplibre.org/maplibre-gl-js/docs/examples/add-image/
「コーディングWebアクセシビリティ」に習うボタン作成のすすめ

## はじめに

:::note warn
この記事は書籍「コーディングWebアクセシビリティ」に書かれてあるチャプター２の内容を実際にコードに書いて確認するという内容です。
:::

divタグやspanタグでボタンが作成されたサイトは以前と比べてとても減ったように感じますが、まだ見られる様です。

### 前提として

> Web標準は「取り決め」にほかなりません。この取り決めに従うことによってはじめて、処理を行い、できるだけ多くの人が予測する通りに動作させることができるのです。<button>要素に特定の動作を割り当てることによって、複数のブラウザベンダーがこの表示動作について見解をもつのです。
中略
支援技術ベンダーが制作者およびブラウザベンダーと協力して（HTMLコンテンツをアクセシブルにするべく）標準化されたインターフェイスによって提供される情報を利用しなければ、憂う目に遭うのはユーザーです。

***コーディングWebアクセシビリティ　31ページから引用***

つまり様々なユーザーに問題なくつかってもらうには正しいマークアップが必要になってきます。

以下は書籍に記載されていたCSSのみでボタンがアクセシブルかどうかを判定する内容になります。

```test.scss

.button {
  display: inline-block;
  background-color: DarkSlateBlue;
  border-radius: 0.25em;
  bos-shadow: 0 4px 0 #222;
  color: white;
  cursor: pointer;

  // ボタン以外の要素に対して.buttonクラスを使用したらエラーメッセージが出る
  &:not(button):after {
    background: red;
    color: white;
    content: '警告: ここでは要素をボタンの様な外観にしようしています。この要素は本当にボタンですか？';
  }
}

// ボタンにtype属性がなければエラーメッセージが出る
button:not([type]):after {
  background: red;
  color: white;
  content: '警告: このボタンにはtype属性がありません。submitですか？resetですか？単純なボタンですか？';
}

// aタグやbuttonタグに中身がない、aria-alabelやalia-labelledbyが指定されていないとエラーメッセージが出る
a:empty:not([aria-label]):not([aria-labelledby]):after,
button:empty:not([aria-label]):not([aria-labelledby]):after,
button:empty:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt]):after,
a:empty:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt]):after {
  background: red;
  color: white;
  content: 'このボタンに関する情報が十分ではありません。ボタンの中にテキストを含めてください';
}


```

demo

 <p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="KKEwPXq" data-user="makoto-ogata" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/makoto-ogata/pen/KKEwPXq">
  a11y-button</a> by Makoto Ogata (<a href="https://codepen.io/makoto-ogata">@makoto-ogata</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



アクセシビリティに関してまだ勉強中の身ではありますが、エンジニアとしてこれからも様々なユーザーに配慮して良いものを作っていきたいと思っています。

## 参考

https://qiita.com/sukoyakarizumu/items/978df93755c4720d5cdc

https://qiita.com/xrxoxcxox/items/7d06d4f2d861b022767a

https://zenn.dev/stafes_blog/articles/nano72mkn-div-button

https://www.amazon.co.jp/%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0Web%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3-WAI-ARIA%E3%81%A7%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B%E3%83%9E%E3%83%AB%E3%83%81%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E7%92%B0%E5%A2%83%E3%81%AEWeb%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3-Heydon-Pickering-ebook/dp/B06XWC1TWC/ref=sr_1_4?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=2OGQ8JQ75UYYQ&keywords=web%E3%82%B3%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3&qid=1703416007&sprefix=web%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%2Caps%2C156&sr=8-4
Tencent CloudのRTC Engineのサンプルプログラムを試してみた

## はじめに

過去Skywayについて投稿した関係で、Tencent Cloud関連の情報をいただいたので、取り急ぎTencent CloudのRTC EngineのVideoチャットのデモを試してみました。

### 試した環境
* Windows 10
* nginx 1.16.1

### デモコードについて
githubからhtmlとjavasciptのコードのみの「quick-demo-js」を取得しました。WebRtcを使用したVideoチャットのデモのコードです。

https://github.com/LiteAVSDK/TRTC_Web

githubには、他にもVueやReact用のコードが配置されています。

## 実行手順
以下、実行した手順です。

### アプリケーションの作成
デモコードを使用するにあたり、Tencent Cloudで、RTC Engin用のアプリケーションを作成し、SDKAppID、Secret Keyを取得しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284235/92a01fb3-95c1-0172-389c-af13b07ca1f8.png)

### ngixを起動
ダウンロードしたデモコードをnginxに配置して、nginxを起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284235/2c1c4a39-6246-4bb7-294d-83051627f393.png)

起動したことを確認して、
http://localhost/quick-demo-js/index.htmlにアクセスします。

### Videoチャット呼び出し側の操作
SDKAppIdとSecretKeyを入力してJoin Roomボタンを押下するとこで通話を開始します。UserIdとroomIdはDemoプログラム内部でランダムな値を生成し、画面遷移時に設定されています。使用者が任意の値を入力することもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284235/5f0ca684-fc72-fae1-fe21-21e1f77e1c41.png)

Join Roomボタンを押下することにより、ローカルのカメラ映像の配信が開始され、Videoチャット呼び出し用のLinkが生成されます。呼び出す相手に送付し、相手側からこのLinkにアクセスしてもらいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284235/e943fa26-d9ea-307f-af7a-c5530025c513.png)

### 相手側の操作
受け取ったリンクにアクセスすると以下画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284235/58d88011-12a9-73eb-2a9e-765efd12914f.png)

Joinボタンを押下することで、通話が開始されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284235/06b12819-68fd-d499-de22-b8a05b3c9cfe.png)

## デモコードについて
デモコードの内容について軽く確認してみました。

### 呼び出し側
呼び出し側では主に5つの処理を順におこなっています。
* ユーザシグネチャの生成
　SDKAppId、UserId、シークレットキーからユーザシグネチャを生成しています。デモ用のためクライアント側で生成していますが、実運用ではサーバ側で生成すべきとのこと。
 
* 接続用のClientの生成
　SDKAppId、UserId、ユーザシグネチャを引数にして接続用のClientインスタンスを生成しています。
* roomIdを指定してサーバに接続
* ローカルのカメラ映像の送信
* 相手先が接続するリンクの生成
　クエリパラメタに、SDKAppId、ユーザID、ユーザシグネチャ、roomIdを含みます。

### 相手側
相手側では、URLリンクにアクセスして接続しますが、主に以下の4つの処理を順に行っています。

* クエリパラメタの取得
* 接続用のClientの生成
　クエリパラメタのSDKAppId、UserId、ユーザシグネチャを引数にして生成しています。
* クエリパラメタのroomIdを指定してサーバ接続
* ローカルのカメラ映像の送信

## おわりに
SkyWayと比較した場合、機能的にはそんなに差はなさそうだが、デモ用のコードはRTC Engineのほうが作り込まれて使用しやすかったです。Tencent Cloudには他多くの機能があり、それらとの連携も確認したいと思いました。
VonageのAPI料金から見る使用コスト感

コミュニケーションツール開発のためのAPIであるVonageがクリスマスのアドベントカレンダーで募集していたので、amazonギフト券が目当てで記事を書くことにしました。
そんな現金な筆者が気になるのはもちろんコスト感です。
APIの料金を確認しました。
SMSの料金表はのURLのようです。
https://www.vonage.com/communications-apis/sms/pricing/
記事投稿時点で、1メッセージあたり0.0810ドルとありました。
記事投稿時点で、1メッセージあたり11.54円です（為替換算）。
コミュニケーションツールを実装する機会があれば検討します。
プログラミングは設計行為である

「プログラミングは設計行為である」「コードは設計書である」ということが以下の本に書いてあり、その通りだと思いました。
[プリンシプル オブ プログラミング 3年目までに身につけたい一生役立つ101の原理原則](https://www.shuwasystem.co.jp/book/9784798046143.html)

# 設計と製造の解釈
設計書をもとにプログラミングをすることを*製造*に分類する解釈がありますが、これは誤った解釈です。正しくは*設計*です。
* 誤った解釈
設計：基本設計、詳細設計
製造：プログラミング、テスト、デバッグ

* 正しい解釈
設計：基本設計、詳細設計、プログラミング、テスト、デバッグ
製造：リリースビルド

## 設計書と製造の関係
設計書と製造の関係は以下の通りです。この関係を前提に話を進めます。
* 設計書は製造のためにある
* 製造は設計書をもとに行う

## プログラミングは設計行為である
設計書をもとにプログラミングをしている最中に、設計漏れによる仕様追加が必要になった場合を考えます。
報告すべき人に報告する、修正方針を見定めるなどすべきことがあると思います。コードの修正、つまりプログラミングも必要です。

このとき、プログラミングが設計であるか製造であるかによって設計書を修正すべきかが変わります。

・プログラミングが**設計**行為である場合
　修正方針が定まり次第、コードを修正します。修正内容に応じてテスト、デバッグも行います。
 基本設計書、詳細設計書を修正する必要はありません。コードが設計行為の成果物であるからです。

・プログラミングが**製造**行為である場合
　修正方針を定めてから設計書を修正し、その設計書をもとにプログラミングする必要があります。
　設計書が修正されるまで、決してコードを修正してはいけません。製造は設計をもとに行わなければなりません。

この場合において設計書を律儀に修正しない、もしくは修正するのが面倒くさい人の方が多いのではないでしょうか。設計書を修正したとしても、設計書に日本語で書いたことをコードで書き直す必要があります。基本設計書、詳細設計書が成果物でないのなら、その修正は無駄ではないでしょうか。

プログラマがこれまでに何度も経験してきたそれは「製造行為から設計行為への手戻り」ではなく、「設計行為の一部」と考えます。プログラミングは設計行為です。

### コードは設計書である
また、設計ミスの発見者はプログラミングの最中です。設計ミスを報告し、修正方針が確定した時点でコードを修正できるのではないでしょうか。それは設計書を修正する前に製造ができる状態にあるということであり、設計書と製造の前提に反しています。

基本設計書、詳細設計書はコードを書くための設計書です。コードが完成形に近づけば近づくほど不要になります。コード（設計書）はリリースビルド（製造）のために必要なアウトプット、つまり真の設計書です。

## 可読性が高いことの重要性
コードが設計書に足り得るには条件があります。それはシステムが可読性の高いコードで構成されている必要があるということです。
コードは複雑で、常に誰かの手によって変更されます。その過程で可読性が低くなってしまうと、コードを読み解くための時間が増加してしまい、詳細設計書などを修正しないことによって得た時間をロスします。最悪の場合、再設計が必要になります。そうなってしまっては元も子もありません。
コードが設計書であり続けるために、可読性の高いコードを書くことが必要です。

## まとめ
* プログラミングは設計行為である
* コードは設計書である
* 可読性の高いコードを書くべき

## 参考
[プリンシプル オブ プログラミング 3年目までに身につけたい一生役立つ101の原理原則](https://www.shuwasystem.co.jp/book/9784798046143.html)
AutoHotKey v2で日本語配列(106/109)→英語配列(101/102)

# 概要
日本語キーボード配列(106/109)で英語配列(101/102)を利用したいと思いAutoHotKeyで英語配列化を実現してみました。
今まではWindowsの設定でキーボードを106から101に変更したり、キー配置の入れ替えをChgKeyなどで行っていましたが、AutoHotKeyなら一つの設定になるので便利です。

# 設定
1. 下記リンクからAUtoHotKey v2をダウンロード
AutoHotkey公式
https://www.autohotkey.com/
1. Currrent Userへインストール
1. main.ahkファイルを下記内容にて作成し、フォルダに配置
デフォルト → C:\Users\<ユーザー名>\Documents\AutoHotkey

```main.ahk
;106 -> 101
#UseHook
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
; 1段目
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
SC029::`    ;         半角/全角     -> `
+SC029::~   ; Shift + 半角/全角     -> ~
+2::@       ; Shift + 2         ["] -> @
+6::^       ; Shift + 6         [&] -> ^
+7::&       ; Shift + 7         ['] -> &
+8::*       ; Shift + 8         [(] -> *
+9::(       ; Shift + 9         [)] -> (
+0::)       ; Shift + 0         [ ] -> )
+-::_       ; Shift + -         [=] -> _
^::=        ;                   [^] -> =
+^::+       ; Shift + ^         [~] -> +
 
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
; 2段目
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@::[        ;                   [@] -> [
+@::`{      ; Shift + @         [`] -> {
[::]        ;                   [[] -> ]
+[::}       ; Shift + [         [{] -> }
 
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
; 3段目
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
:::'        ;                   [:] -> '
+;:::       ; Shift + ;         [+] -> :
*::"        ; Shift + :         [*] -> "
]::\        ;                   []] -> \
+]::|       ; Shift + ]         [}] -> |
 ```

# 参考
以下のページを参考にしました。感謝します。
- [AutoHotKey v2 doc](https://www.autohotkey.com/docs/v2/)
- [AutoHotKeyで日本語配列(106/109)→英語配列(101/102)](https://qiita.com/uhyot/items/e3039e9e730e89939b58)

# 関連ページ
こちらのページもお役に立つと思います
- [AutoHotKeyでノートPCの日本語キーボードのキーをカスタマイズ](https://qiita.com/snytng/items/e0aa3de800f73b540b06)
Nuxt3 使ってみた

いつも Vue しか書いていないフロントド素人です。今さら Nuxt に入門しました。


# プロジェクトのセットアップ
```sh
nuxt init
```
これで `nuxt` のサンプルプロジェクトが生成されます。

# SSR っぽいことをしてみる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509303/5b0dccfe-9263-4560-22a3-7fa8e34e8fa2.png)


`App.vue` を捨て、次のディレクトリ構成にしてみます。
普通の Vue と違って Nuxt はディレクトリ構成の制約が強く、例えば `pages/index.vue` はページパス `/` にアクセスした際に表示されるページの構成に相当します。

Vue と Nuxt の関係はだいたい Ruby と Ruby on Rails のような関係でしょうか？

```
node_modules
layouts
└ default.vue
pages
└ index.vue
package.json
```

## レイアウト
```layouts/default.vue
<template>
  <div>
    <header>
      ヘッダーだよ
    </header>
    <NuxtPage />
    <footer>
      フッターだよ
    </footer>
  </div>
</template>
```

ページの基本的なレイアウトを `layouts/default.vue` に記述します。`<NuxtPage />` は Vue-Router の `<router-view>` みたいなもので、Nuxt でレンダリングされるページコンポーネントになります。

## ページ
```pages/index.vue
<template>
  <div>
    このページは {{ dateTime }} にレンダリングされました！
  </div>
</template>

<script setup>
const { data: dateTime, refresh, pending, error } = useAsyncData(() => {
  return new Date().toString()
})
</script>
```

レンダリング時の時刻を表示するページです。

`asyncData` はレンダリング前にデータを API から取得するステージで、そのライフサイクルフックが `useAsyncData` です。レンダリング時にほど近い時刻を打刻できます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509303/fdca9267-7c47-0485-4d63-9c4b0b3f2acf.png)


開発者ツールを確認すると、HTML 読み込みの時点で `dateTime` が計算されていることがわかります。フロントエンドのウェブサーバが計算して返したということでしょう。


# おわり
スマートフォンが対象の WEB サイトで夢が広がる～
全然わかっていないので冬休みに勉強します。
MySQLでFULL JOINを？！ で、できらぁ！

# はじめに
以前社内のSQL勉強会のネタ探しでJOINの話中にFULL JOINの話をしたところ、
同チームの人がFULL JOIN・・・？
というリアクションだったので調べてみたところ、MySQLにはFULL JOINがないとのこと

今の会社に入る前はMySQLではなかったのでjoinの中にFULL JOINなるものがある（いつ使うかはいまだによくわからんけど）のは知ってたのでほえ～ってなりました

# FULL JOINとは
完全外部結合ともいいます。
LEFT JOINだと左側のテーブルを基準として右側のテーブルに一致するものがなくてもNULLとして結合し、表示します。
RIGTHT JOINだとその逆で右側のテーブルを基準とします。
FULL JOINでは両方のデータを正として、左にしかないデータも右にしかないデータも表示してくれるわけです。

# いつか使うかもしれないので備忘として

**Customersテーブル**

| CustomerID | CustomerName |
|------------|--------------|
| 1          | Alice        |
| 2          | Bob          |
| 3          | Charlie      |

**Ordersテーブル**

| OrderID| CustomerID | ProductName |
|--------|------------|-------------|
| 101    | 1          | ProductA    |
| 102    | 2          | ProductB    |
| 103    | 3          | ProductC    |
| 104    | 4          | ProductD    |

```sql:FULL JOINもどき
SELECT COALESCE(C.CustomerID, O.CustomerID) AS CustomerID,
       C.CustomerName,
       O.OrderID,
       O.ProductName
FROM Customers C
LEFT JOIN Orders O ON C.CustomerID = O.CustomerID

UNION

SELECT COALESCE(C.CustomerID, O.CustomerID) AS CustomerID,
       C.CustomerName,
       O.OrderID,
       O.ProductName
FROM Orders O
LEFT JOIN Customers C ON C.CustomerID = O.CustomerID
WHERE C.CustomerID IS NULL;

```

**実行結果**

| CustomerID | CustomerName | OrderID| ProductName |
|------------|--------------|--------|-------------|
| 1          | Alice        | 101    | ProductA    |
| 2          | Bob          | 102    | ProductB    |
| 3          | Charlie      | 103    | ProductC    |
| 4          | NULL         | 104    | ProductD    |



# メモと解説のようなもの
MySQLにはそもそもFULL JOINがないと初めに言った通りで、実施するには外部結合結果をUNION結合する、といった力業が必要になります。

UNIONより上のクエリでCustomersを正とした外部結合を行い、UNIONより下でOrdersを正とした結合を行い、UNIONで結合することにより、UNIONが持つ重複削除の恩恵を受けて二つの外部結合結果のいいとこどりができるというわけです。

~~うーんまじでFULL JOINっていつ使うんや？~~
Flutterで日本語パス内にプロジェクトを作るとブレークポイントで止まらない

Mac上のAndroid StudioでFlutterプロジェクトを作ってデバッグ実行し、
ブレークポイントで止めようとしたらなぜか止まらなかった。

どうも日本語名のフォルダの下にコードを配置したのが原因っぽい。
別のパスに移動させたらそれだけで止まるようになった。