OmniAICreator/Qiita-1.07M huggingface dataset:
【VS Code】ターミナルの移動コマンド

## はじめに
Mac版の日本語キーボードを使用している人向けのショートカットコマンドを共有します．
知りたかったターミナル間の移動コマンドを最近知ったので備忘録として置いときます．
ターミナルは右に移動した状態で使用してます．


## コマンド
| 機能 | コマンド |
|:-:|:-:|
| エディタとターミナルの切り替え  | Ctrl + Shift + @ |
|  ターミナルの切り替え(前) | cmd + Shift + [  |
|  ターミナルの切り替え(後) | cmd + Shift + ]  |
|  ターミナルの新規作成 | Ctrl + Shift + ^  |
|  ターミナルの強制終了 | cmd + BS  |
|  ターミナルの名前変更 | Enter  |

※ターミナルの強制終了と名前変更はターミナル名を選択している状態でなければできません．
※エディタとターミナルの切り替えは他にも`Ctrl+@`等が存在しますが，単一方向のみなので`Shift`の同時押しをお勧めします．

## 最後に
ターミナルタブとターミナル入力画面の移動ショートカットコマンドをご存知の方がおられましたらコメントで共有いただきたいです．

## 追記
コードブロックを一括で選択するコマンドを発見したので追記します．
増加のコマンドを複数回押すと選択箇所がブロックごとに行われるため非常に便利だと思いました．
特に右側のインデントあたりにカーソルを置いた状態で行うと良さを体感できます．

コードブロックを選択（増加）: `Ctrl + Shift + →`
コードブロックを選択(減少): `Ctrl + Shift + ←`
Engine Simulatorの作法 その2

# 概要
Engine Simulatorの作法を調べてみた。
みんなの作ったエンジンを探す方法

# 参考にしたページ

https://catalog.engine-sim.parts/parts?q=

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/31ff99c8-91b9-5175-add6-fa3ea3e3ca20.png)

以上
k3dのCoreDNSの設定をConfigMapによって拡張する方法

k3dのCoreDNSにはConfigMapで拡張できる機能があります。`coredns-custom`という名前でConfigMapを作成し、corednsをリスタートすることで設定が読み込まれます。

以下が実際の拡張設定です。

```yaml
apiVersion: v1
kind: ConfigMap
metadata:
  name: coredns-custom
  namespace: kube-system
data:
  log.override: |
    rewrite name example.com example.example.svc.cluster.local
  custom.server: |
    example.com {
        log
        rewrite name example.com example.example.svc.cluster.local
        forward . 127.0.0.1
    }
    another-example.com {
        rewrite name another-example.com another-target.default.svc.cluster.local
        forward . 127.0.0.1
    }
```

本体側のCoreDNSの設定は次のようになっています。この設定を見るとわかる通り、拡張設定では、`*.override`と、`*.server`が認識されます。


```yaml
apiVersion: v1
data:
  Corefile: |
    .:53 {
        errors
        health
        ready
        kubernetes cluster.local in-addr.arpa ip6.arpa {
          pods insecure
          fallthrough in-addr.arpa ip6.arpa
        }
        hosts /etc/coredns/NodeHosts {
          ttl 60
          reload 15s
          fallthrough
        }
        prometheus :9153
        forward . /etc/resolv.conf
        cache 30
        loop
        reload
        loadbalance
        import /etc/coredns/custom/*.override
    }
    import /etc/coredns/custom/*.server
 ```

## 参考

* [[FEATURE] Allow CoreDNS extension with custom configuration · Issue #816 · k3d-io/k3d](https://github.com/k3d-io/k3d/issues/816)
* [Allow adding configuration to coredns \`.:53\` block via \*.override keys in \`coredns-custom\` ConfigMap · Issue #7639 · k3s-io/k3s](https://github.com/k3s-io/k3s/issues/7639)
*
Engine Simulatorの作法

# 概要
Engine Simulatorの作法を調べてみた。

# 参考にしたページ


https://github.com/Engine-Simulator/engine-sim-community-edition

# 環境
windows11

# 写真

![スクリーンショット 2024-06-07 102234.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/95bc4db4-ad95-caeb-f48c-19536cbba660.png)


# 操作手順

# 起動

aキーでイグニッションをオンにします

イグニッションのオン/オフを切り替えるには、キーを押します。イグニッション インジケーター ライトが点灯します。
実際のスパーク点火エンジンでは、「イグニッション」はイグニッション モジュールがアクティブで、スパーク プラグが点火することを示します。
これは、エンジン シミュレーターaでも同じ意味を持ちます。
sキーでスターターを有効にする

スターターは、ほとんどの内燃エンジンに取り付けられている小型の電気モーターです。
スターターは最初にモーターを回転させ、エンジンが始動してから自力で走行できるようにします。ｓキーを押すとスターターが作動します。
エンジンが自力で走行したら、ｓキーを放します。

# アクセル

エンジンを狂ったように回転させるには、次のボタンを使用できます。
q- 軽いスロットル
w- ライト/部分スロットル
e- パートスロットル
r- フルスロットル

スロットルを微調整するには、spaceキーを押してマウスで上下にスクロールします。右側の「スロットル」計器で正確なスロットル量を確認できます。

# ぷつぶつ音がする時
N + Scroll Simulation frequency.
FPSが低いとどうもぷつぶつ音がするようなので以下でSIM速度を落とせばぷつ音がなくなりました。(4000くらい?)

以上。
Ubuntu 22.04にWordPressをインストールして稼働させるための手順

### Step 1: 必要なソフトウェアをインストールする
WordPressを動作させるために必要なApache、MySQL、およびPHPをインストールします。

1. **システムをアップデート**
   ```bash
   sudo apt update
   sudo apt upgrade -y
   ```

2. **Apacheをインストール**
   ```bash
   sudo apt install apache2 -y
   ```

3. **MySQLをインストール**
   ```bash
   sudo apt install mysql-server -y
   ```

4. **PHPをインストール**
   ```bash
   sudo apt install php libapache2-mod-php php-mysql -y
   ```

### Step 2: MySQLの設定
MySQLの設定を行います。

1. **MySQLのセキュリティ設定**
   ```bash
   sudo mysql_secure_installation
   ```

   ここで、プロンプトに従ってrootユーザーのパスワードを設定し、セキュリティ関連のオプションを有効にします。

2. **WordPress用のデータベースとユーザーを作成**
   ```bash
   sudo mysql -u root -p
   ```

   MySQLのプロンプトに入り、以下のコマンドを実行します。
   ```sql
   CREATE DATABASE wordpress;
   CREATE USER 'wordpressuser'@'localhost' IDENTIFIED BY 'your_password';
   GRANT ALL PRIVILEGES ON wordpress.* TO 'wordpressuser'@'localhost';
   FLUSH PRIVILEGES;
   EXIT;
   ```

### Step 3: WordPressのダウンロードと設定

1. **WordPressのダウンロード**
   ```bash
   cd /tmp
   wget https://wordpress.org/latest.tar.gz
   tar -xvzf latest.tar.gz
   sudo mv wordpress /var/www/html/wordpress
   ```

2. **ディレクトリのパーミッションを設定**
   ```bash
   sudo chown -R www-data:www-data /var/www/html/wordpress
   sudo chmod -R 755 /var/www/html/wordpress
   ```

3. **WordPress設定ファイルを作成**
   ```bash
   cd /var/www/html/wordpress
   cp wp-config-sample.php wp-config.php
   nano wp-config.php
   ```

   `wp-config.php`ファイルを編集し、以下のデータベース情報を設定します。
   ```php
   define('DB_NAME', 'wordpress');
   define('DB_USER', 'wordpressuser');
   define('DB_PASSWORD', 'your_password');
   define('DB_HOST', 'localhost');
   ```

### Step 4: Apacheの設定
WordPress用のApache設定を行います。

1. **Apache設定ファイルを作成**
   ```bash
   sudo nano /etc/apache2/sites-available/wordpress.conf
   ```

   以下の内容をファイルに追加します。
   ```apache
   <VirtualHost *:80>
       ServerAdmin webmaster@localhost
       DocumentRoot /var/www/html/wordpress
       ErrorLog ${APACHE_LOG_DIR}/error.log
       CustomLog ${APACHE_LOG_DIR}/access.log combined

       <Directory /var/www/html/wordpress/>
           Options Indexes FollowSymLinks
           AllowOverride All
           Require all granted
       </Directory>
   </VirtualHost>
   ```

2. **サイトを有効化し、Apacheを再起動**
   ```bash
   sudo a2ensite wordpress.conf
   sudo a2enmod rewrite
   sudo systemctl restart apache2
   ```

### Step 5: WordPressのインストールを完了する
ブラウザを開き、`http://your_server_ip/wordpress` にアクセスして、画面の指示に従ってWordPressのインストールを完了します。

以上で、Ubuntu 22.04にWordPressをインストールして稼働させるための手順は完了です。
ChatGPTを使って簡単なゲームを作る①: ゲーム作成・全体概要


# はじめに

プログラミングの知識がなくても、簡単にゲームを作成できる方法をご紹介します。ChatGPTとCodePenというツールを使って、あなた自身のゲームを作り、実際に動かすことができます。このシリーズでは、以下の内容を段階的に説明します。

# 記事の構成
全体概要：このシリーズの目的と内容の紹介（予定）

- CodePenの利用開始：CodePenの基本的な使い方と、紹介を簡単に。
- ChatGPTでゲームを作るコツ：ChatGPTを使ってゲームのコードを生成する際のポイントやコツ。
- ChatGPTでゲームを汎用的に作るためのプロンプトジェネレーター：さまざまなゲームに対応できるプロンプトの作成方法。
- 実施例：具体的なゲームの作成プロセスとその実例。


# 目標
このシリーズを通じて、以下のことができるようになります(予定)：

「ゲームのプロンプトを自分で作成し、オリジナルのゲームを作り出すスキルを身につける。」


### 準備するもの
CodePenアカウント：無料で登録できるオンラインのコードエディターです。
ChatGPTアカウント：OpenAIの提供する対話型AIです。
ウェブブラウザ：インターネットにアクセスできる環境が必要です。

# まとめ
このシリーズを進めることで、プログラミング初心者でも簡単にゲームを作成できるようになります。次回は、まずCodePenの基本的な使い方から学んでいきましょう。






## リンク
今日の、箸休めコンテンツ：ゲーム制作をChatGPTでやってみるシリーズです。
 

### ChatGPTを使って簡単なゲームを作る①: ゲーム作成・全体概要
https://qiita.com/dms-matthew/items/ecd447bf7ae10468f41e


###  ChatGPTを使って簡単なゲームを作る②: CodePenの利用開始
https://qiita.com/dms-matthew/items/e97eb3d9ffe9d36a765a



###  ChatGPTを使って簡単なゲームを作る③: ChatGPTにブロック崩しゲームを作ってもらう編
https://qiita.com/dms-matthew/items/ac8f2b5086f710d20b98


###  ChatGPTを使って簡単なゲームを作る④: ChatGPTに「ちーかわ」ゲームを作ってもらう編
https://qiita.com/dms-matthew/items/e635d57597ddd87a9b5b　


###  ChatGPTを使って簡単なゲームを作る⑤: ChatGPTに「ベンゼン環・神経衰弱」ゲームを作ってもらう編
https://qiita.com/dms-matthew/items/631111698f7d322194da
Pendo Tagging Aid (CSSセレクタ探索便利ツール)


PendonのVisual Designer StudioでノーコードでCSSセレクタをポイント＆クリックで選べるのは便利ですが、時々変なCSSが提案されてしまうことがあり、もっと細かいCSS指定をしたいこともあると思います。

![CleanShot4wEvp7Dr@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227518/f4eadddc-2f17-af8e-e341-169cc8f18664.png)



ただ、その場合htmlソースからエレメントを探し出してCSSを読み解く必要があります。

ソースが入れ子になってたりして、読み解くのに時間がかかるし、めんどくさいですよね。

本日は、そんなあなたにおすすめのツールをご紹介します！

CSSセレクタを探すのがとても楽になるツールです！
Pendoのタグ付時だけではなく、アプリ開発時に特定の要素どうなってたっけ？をUI上で直接調べる際にも便利です。

https://chrome.google.com/webstore/detail/pendo-tagging-aid/jhbhgbhjadlmnigleahdiainjdhomdgn

![CleanShotAEaVj5cX@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227518/c4e9780b-7ff7-5c7c-0784-f894778359b8.png)


説明動画を御覧ください。
画面右上の地球儀マークから日本語字幕を選択してみてください。

https://www.videoindexer.ai/accounts/796ad50c-b7c8-455c-82af-f983a3d6a386/videos/3959d37775/
Go言語でHelloWorldしてみた

# goのインストール
https://go.dev/doc/install
- windowsなのでmsiインストーラを選択して、インストール
- デフォルトはC:\Program Files\Go だが、C:\Goにインストールした

## go version
- バージョンの確認
インストールされているかチェック
```
>go version
go version go1.22.4 windows/amd64
```
- 環境変数PATHにも追加されている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546030/2e71c507-1352-6edc-1e66-507a2e64382d.png)
- パスを有効にするには、ログインしなおす

# HelloWorld
- 適当なフォルダを作成

## go mod init
- 必要なモジュールを追加
`go mod init [モジュール名]`

- example/helloをモジュールに追加
```
>go mod init example/hello
go: creating new go.mod: module example/hello
go: to add module requirements and sums:
        go mod tidy
```
go.modファイルができる。中身は
```
module example/hello
go 1.22.4
```

## go mod tidy
- 使用していないモジュールを削除してくれるらしい

https://qiita.com/wangqijiangjun/items/28037d06efe86ec8dd0f

## hello.go
- 「hello.go」ファイルを作成して下記を書いて保存

```
package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}
```

## 実行
- カレントディレクトリ（.）でrunする
　
```
>go run .
Hello, World!
```

## 感想
- go mod init、go mod tidyが何を意味するのか深める必要がありそう
- 調べてくれる方がいて助かります

https://qiita.com/bSRATulen2N90kL/items/f9b44394781296626184

- hello.go自体はシンプルで理解しやすい
Looker Studio を使い残業時間の見える化を行う

# はじめに
2024年4月1日、建設業でも本格的に時間外労働の上限規制が始まりました。2019年から施行されているこの規制ですが、弊社のような建設の事業などは５年間の猶予期間が与えられていました。ですが、2024年4月、猶予期間が終わり、我々も残業時間の管理方法に関して見直しを求められる状況となりました。
そこで弊社では Looker Studio を使用し、部下や社員の残業時間の見える化を行いました。

# 概要
担当いたしましたのは2024年新卒入社の私です。大学では地域政策について学んでおり、後藤組でアルバイトをさせていただくまではワードとパワポをちょこっと触る程度の文系大学生をしておりました。がんばりました。
弊社では kintone をあらゆる業務に使用しており、出勤退勤の打刻も例外ではありません。
今回は kintone に入る打刻データを毎朝定期実行でスプレッドシートに転記し、それを Looker Studio に表示しました。

# スプレッドシートへの転記
弊社では様々な業務マニュアルが作成され、それらがドライブで共有されています。今回の kintone からスプレッドシートへの転記もマニュアルに従って行いました。
拡張機能にマニュアルのコードをコピペしてあとは定期実行をセットするだけ。
のはずだったのですが、全社員分の打刻データは膨大でマニュアルにあるコードでは実行時間が6分を超えてしまいトリガーでの実行が行えませんでした。
そこで ChatGPT に相談をしました。

・修正前のコードでは、各セルに個別に setValue メソッドを使用して書き込みを行っているため、 API 呼び出しが多くなり、実行時間が長くなります。
・writeSheetFromRecords 関数でスプレッドシートに書き込む際、setValues メソッドを使用してデータを一括で書き込みます。これにより、セルごとに個別に書き込むよりも大幅に高速化されています。

とのアドバイスをいただき実行時間を短縮することができました。
以下、修正コードの一部です。

一括書き込み部分の処理
``` bash
var data = records.map(function(record){
  return array_kintone_fields.map(function(kintone_field){
    return record[kintone_field].value;
  });
});

sheet.getRange(2, 1, data.length, data[0].length).setValues(data);
```

# Looker Studio の作成
今回、 Looker Studio にて見える化したいものは以下の２つです。

・社員の残業時間
・社員の乖離労働時間（後ほど詳しく記載します。）

では、作成していきます。

# 社員の残業時間
弊社の kintone の勤怠管理アプリには打刻時間のデータだけでなく、残業申請や休出申請、休暇申請など様々なデータが入っております。
残業申請は申請した時間がそのまま数値として入っておりますので転記されたデータを合計し、絞り込みの期間を当月に設定すれば当月の残業時間をリアルタイムで見ることができます。

# 社員の乖離労働時間
乖離労働時間とは
申請上の労働時間と打刻から計算される労働時間の乖離とします。

もう少し具体的に説明します。先ほどの社員の残業時間のデータだけでは社員の残業申請データ依存のため、残業申請をサボられると意味がなくなってしまいます。残業した分に関しては残業申請をしていただかなくてはならないため、社員がしっかりと残業申請を行っているかも見える化する必要があります。
``` bash
労働時間+残業時間+休出時間
```
申請上の労働時間の内訳は上記のとおりであり、労働時間は出勤日数*7.5時間で計算され、残業時間と休日出勤に関しては個々に申請をしてもらう必要があります。
つまり、残業時間や休出時間の申請漏れがあると打刻データと申請上の労働時間に乖離が生じてしまうということです。

一方の打刻データですが弊社の打刻データには "打刻開始時間" と "打刻終了時間" のほかに "自己申請開始時間" と "自己申請終了時間" があります。自己申請時間のほうは修正や打刻忘れがあった際に個々人が修正するデータです。
こちらから計算する打刻ベースの労働時間が以下になります。
``` bash
(DATETIME_DIFF(IFNULL(自己申請退勤時間, 打刻退勤時間),IFNULL(自己申請出勤時間, 打刻出勤時間), MINUTE)-120)/60
```
IFNULL 関数を使用し、修正に使う自己申請の時間を優先しました。あとはここに有給申請の時間を足します。
申請上の労働時間は別でスプレッドシートにデータがありますので社員番号でデータ統合を行います。そして作成した三つのフィールドを使い、その差を求めます。
``` bash
打刻労働時間（有給無）+有給取得時間-申請労働時間
```
これで乖離労働時間が求まりました。あとは見やすい形にグラフや Looker Studio 全体を整え、完成です。
![IMG_0043.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804010/8166c0c4-8d96-b920-0181-b274c28697c7.png)
細かいデータは載せることができませんがこのような雰囲気に仕上がりました。

# おわりに
今回は Looker Studio を使用し、残業時間と乖離労働時間の見える化を行いました。誰でも簡単にデータ統合やグラフの作成が行える Looker Studio はデータの見える化や業務改善に役立つと改めて感じました。
個人的な反省点としては作成に時間がかかりすぎた点です。まだまだ関数の扱いや、転記のコード編集など不慣れな点も多く、上司をはじめとする有識者にフィードバックをもらえばよかったと反省しております。
Qiita もうまく利用して、様々なところから知識やスキルを貪欲に吸収していきます。
ベータ版は無料で利用可能！今すぐ試したいGoogleのNotebookLM

# NotebookLMとは

Googleの新しいAIツール「NotebookLM」について紹介します。
NotebookLMは、ドキュメントをアップロードして質問すると、AIが関連する情報を抽出して回答してくれるツールです。
簡易RAGみたいなものでしょうか。

https://notebooklm.google/

## 特徴

- ドキュメントをアップロードするだけで、AIが自動的に内容を理解し、質問に答えてくれる
- 回答には、関連する箇所が引用されるので、元の情報を確認できる
- ソースの概要も自動生成されるので、内容を把握しやすい
- メモ機能で、AIの回答や重要な文章を保存でき、後からまとめて確認できる
- 選択したテキストに応じて、AIが次の操作をおすすめしてくれる

## 制限事項

- 1つのソースに含められる語数は最大50万文字[^3]
- 個人情報や機密情報を含むドキュメントのアップロードは避けましょう[^3]
- 著作権があるドキュメントのアップロードはNGです[^3]
- 現在対応しているファイル形式は、Googleドキュメント、Googleスライド、PDF、テキスト、URLのみ[^3]
- 現在はあくまで文章生成のみのようで、ソースにAPIドキュメントなどを入れてコード生成のようなことはできませんでした

## 料金

現在はベータ版のため無料で使えますが、今後有料化される可能性もあると思われます。


## アップロードしたデータの扱い

NotebookLMにアップロードしたデータは、AIの学習に使われませんが、人間のレビュアーによって見られる可能性があるとのこと。[^4]
機密情報のアップロードはしないようにしましょう。


NotebookLMを使えば、大量のドキュメントから必要な情報をすばやく見つけ出せそうです。
業務の効率化に役立つツールになりそうですね。使用する際は、機密情報の扱いには十分注意しましょう。

ご興味のある方はぜひ試してみてください！


[^3]: [ソース](https://support.google.com/notebooklm/answer/14276468)
[^4]: [プライバシー](https://support.google.com/notebooklm/answer/14275965)
日本の住所解析にはこれが必要

        kyoto_pattern = r'(京都府)((?:京都市(?:上京区|下京区|中京区|東山区|西京区|南区|北区|右京区|左京区|伏見区|山科区|市原区)|福知山市|舞鶴市|綾部市|宇治市|宮津市|亀岡市|城陽市|向日市|長岡京市|八幡市|京田辺市|京丹後市|南丹市|木津川市|大山崎町|久御山町|井手町|宇治田原町|笠置町|和束町|精華町|南山城村|京丹波町|伊根町|与謝野町|峰山町|日吉町|八幡町|松峰町|園部町|船井町|与謝町)+?)\s*'

        prefecture_municipality_pattern = r'(...??[都道府県])((?:札幌|仙台|さいたま|千葉|横浜|川崎|相模原|新潟|静岡|浜松|名古屋|大阪|堺|神戸|岡山|広島|北九州|福岡|熊本)市.+?区|(?:旭川|伊達|石狩|盛岡|奥州|田村|南相馬|那須塩原|東村山|武蔵村山|羽村|十日町|上越|富山|野々市|大町|蒲郡|四日市|姫路|大和郡山|廿日市|下松|岩国|田川|大村|.+?)市|.+?郡(?:玉村|大町|.+?)[町村]|.+?[市区町村]|.+?市|.+?区)'

例えば四日市や府や市や市町村名を正しく扱うのは意外と大変だったなーてか、京都のイレギュラーさのめんどくささよ

簡単なもののように見えると思うけど、これ作るのに１か月かかりました(-_-;) 素人すぎ？？？
BizRobo! DSとDAを同じ端末（Local DA）で開発する際のコツ

皆さんはDesignStudioを操作する端末とDA端末
（Desktop Automation Serviceをインストールして実際の画面の操作を行う端末）
が同じ環境でロボット開発を行ったことはありますでしょうか？

PC端末数の関係で、上記環境で開発しています！
という方が一定数いらっしゃるかと思います。

これは「Local DA」と呼ばれるのですが、
この環境で開発を行うのは少しコツが必要となっています。
今回は「Local DA」で開発を行う際に実際に私が行っていることを
ご紹介します！

※ver11.4を使用して説明します

# Local DA開発までの流れ
１．下記ナレッジを参考にDASとDSの設定を実施
　　https://knowledge.bizrobo.com/hc/ja/articles/360033350252-Local-Desktop-Automationの機能と設定方法について

２．DAステップにステップイントゥー
![3_画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/52a31f13-aab4-a324-9cde-684fe4e141e3.png)

３．画面上の不要なものを最小化する
![3_画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/664ad383-cfed-5188-80a6-f71980b2559e.png)
↓
![3_画像3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/b77f9ba2-364b-d3ee-902a-4dfc908d8fe8.png)

４．操作したいアプリと開発画面が半分ずつになるよう調整
![3_画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/3963d014-a46e-91ab-1cba-bebb154e2b79.png)

※最小化した画面は以下2通りで常時表示に変更することができます。
・矢印（フローティングの切り替え）をクリックし画面上に自由に配置
![3_画像6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/efdf68e6-a6dc-97e6-40db-2c905ef9de1d.png)
・四角（自動的に非表示に切り替え）をクリックし画面右側に固定配置
![3_画像7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/8f2236f4-ab3f-e285-8c53-db4ed42ba6f1.png)



# Local DA開発のポイント
１．レコーダービューに表示される画面の倍率を小さく！
![3_画像5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/26c9dbe3-9ff2-d2aa-3032-ef22094ab535.png)
　これは通常の開発時の際も行うのですが、
　デフォルトでは「×1.0」となっているため 　「×0.5」など
　見やすい大きさに変更してみてください。

２．DAステップの表示倍率を小さく！
![3_画像8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/c7cca342-d08b-a89b-3bb9-33b18318f3e8.png)
　DAのステップが並ぶ画面上にて「Ctrl」を押しながら下スクロールをすることで
　表示倍率が小さくなり、各ステップの中が見やすくなります。

３．「バンドル」ステップを活用！

:::note info
**バンドルステップとは** ※1
・Local DAでの使用を目的としているステップ
（DSおよびDASはシングル ユーザー モードに設定する必要あり）
・ドロップダウンメニューなど、ポインタを削除すると消える
　アプリケーション要素を自動化する場合に使用
・アプリケーション上で実行するいくつかのステップを接続し、
　最初のステップから順番に実行されるシーケンスに変換
:::

少し難しいですよね。以下で例を用いて説明します！

まず、バンドルステップ自体は　その他＞バンドル　から選択できます。
![3_像10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/c15e526b-6161-7483-4160-715a2aa7b1d4.png)


【実用例】
バンドル内で下記のようにステップを作成し実行したところ、「エンター」の前にもガードチョイスを入れる必要が発生。
![3_画像11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/bce9eaad-8bf8-ca03-df89-14ef7665b96f.png)

該当部分にガードチョイスを作成し、再度実行したい。
その際、下記図の赤四角部分をクリックするだけで
勝手にバンドルステップ内に作成した一連の流れの頭から実行してくれます！
![3_画像12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/a13e4d0e-f7d7-01bb-bbab-7350d6ae0f52.png)

※バンドル内で使えるステップは限られており、ループや条件分岐などは使えないため
クリックやプレスキーが連続する操作に対して活用するのをおすすめします。

上記の様に、バンドルステップ内でステップを作成していくことにより
「DA画面を操作したからサイトのプルダウンが消えてまた途中から実行し直さなきゃ、、」
といったストレスなくロボット作成を行うことができます！

# 参考サイト
※1 バンドルステップについての「Kofax RPAのヘルプ」
https://docshield.tungstenautomation.com/RPA/ja_JA/11.4.0-vcsft2fhaw/help/rpa_help/help_main/designstudio/c_bundlestep.html
ECS タスク定義ファミリーの古いリビジョンを削除

# issue
 * タスク定義のリビジョンが溜まりすぎている

# 対策
 * ライフサイクルがないようでまたもやLambda出動

# Lambda
```python:lambda_handler Python3.12
import json
import time
import boto3
import botocore

def list_all_task_definitions(ecs_client):
    paginator = ecs_client.get_paginator('list_task_definitions')
    task_definitions = []

    for page in paginator.paginate(status='ACTIVE'):
        task_definitions.extend(page['taskDefinitionArns'])

    return task_definitions

def list_task_definition_revisions(ecs_client, task_definition_family):
    paginator = ecs_client.get_paginator('list_task_definitions')
    revisions = []

    for page in paginator.paginate(familyPrefix=task_definition_family, status='ACTIVE', sort='ASC'):
        revisions.extend(page['taskDefinitionArns'])

    return revisions

def cleanup_old_revisions():
    """すべてのタスク定義ファミリーの古いリビジョンを削除する"""
    ecs_client = boto3.client('ecs')
    task_definitions = list_all_task_definitions(ecs_client)
    task_definition_families = set([arn.split('/')[-1].split(':')[0] for arn in task_definitions])

    for family in task_definition_families:
        revisions = list_task_definition_revisions(ecs_client, family)

        # 最新50個維持
        if len(revisions) > 50:
            revisions_to_delete = revisions[:-50]
            for i, revision in enumerate(revisions_to_delete):
                try:
                    print(f"Deregistering task definition: {revision}")
                    ecs_client.deregister_task_definition(taskDefinition=revision)
                except botocore.exceptions.ClientError as error:
                    if error.response['Error']['Code'] == 'ThrottlingException':
                        print("Throttling exception occurred. Waiting before retrying...")
                        time.sleep(2 ** (i // 30))  # 指数関数的バックオフ
                    else:
                        raise error

def lambda_handler(event, context):
    cleanup_old_revisions()
    return {
        'statusCode': 200,
        'body': json.dumps('Old revisions cleaned up successfully')
    }

```

# EventBridge (CloudWatch Events)
定期実行
Git localとremoteの紐付けを修正したい

# 事象
local branch をissue/3で作業していたが、git branch -m "issues/3" に変更

ただし、remote branchとの紐付けは変わらず。
```
git branch -vv                         
* issues/3 e88c928 [origin/issue/3: ahead 3, behind 7] add Makefile
```

# 対応
remote branchの紐付けを変更
```
git branch --set-upstream-to=origin/issues/3 issues/3
branch 'issues/3' set up to track 'origin/issues/3'.
```

すると、以下のように変更された。
```
git branch -vv                                       
* issues/3 e88c928 [origin/issues/3] add Makefile
```

# 参考
https://qiita.com/kjirou/items/e0469aac0e128be380d6
画像処理エンジニア検定の合格体験記と勉強法

# 画像処理エンジニア検定の合格体験記

こんにちは、昨年画像処理エンジニア検定エキスパートを無事に取得しました。
私の合格体験を共有することで、これから資格を目指す皆さんの参考になれば幸いです。
![IMG_7700.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516272/1d165505-2c69-f2c0-ad45-8e3fd6e4e2bf.jpeg)

## 勉強のきっかけ

私はもともと画像処理技術に興味があり、仕事でも関連するプロジェクトを担当することが増えてきました。そこで、より専門的な知識を身につけるために画像処理エンジニア資格を取得しようと決心しました。

## 勉強方法

### Q&Aサイトの活用

最初に取り組んだのは、[画像処理エンジニア資格Q&Aサイト パート1](https://tech-deliberate-jiro.com/gazo-kentei-qa-part1/)と[パート2](https://tech-deliberate-jiro.com/gazo-kentei-qa-part2/)の活用です。
このサイトは、試験に出そうな質問とその回答が詳しく掲載されており、とても役立ちました。特に理解が難しいトピックも、具体的な例を通じて解説してくれているので、理解が深まりました。

このサイトでは一問一答形式でpart1とpar2合わせてで80問くらい解説つきで勉強できます。


![IMG_7736.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516272/02cb69b7-9b54-971c-90b6-1ac49c14904b.png)
![IMG_7735.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516272/05d6d322-ed2c-b6d7-2aac-4a15033551e2.png)

### テキストと参考書

Q&Aサイトだけでなく、市販のテキストや参考書も併用しました。おすすめのテキストは以下の通りです：

- 『ディジタル画像処理 [改訂第二版]』
[リンク](https://www.amazon.co.jp/%E3%83%87%E3%82%A3%E3%82%B8%E3%82%BF%E3%83%AB%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86-%E6%94%B9%E8%A8%82%E7%AC%AC%E4%BA%8C%E7%89%88-%E3%83%87%E3%82%A3%E3%82%B8%E3%82%BF%E3%83%AB%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E7%B7%A8%E9%9B%86%E5%A7%94%E5%93%A1%E4%BC%9A/dp/490347464X/ref=asc_df_490347464X/?tag=jpgo-22&linkCode=df0&hvadid=342595526565&hvpos=&hvnetw=g&hvrand=3276427041973390956&hvpone=&hvptwo=&hvqmt=&hvdev=m&hvdvcmdl=&hvlocint=&hvlocphy=1009333&hvtargid=pla-889374643658&psc=1&mcid=ae9e559a8ddb36b5a604ffeddaf51d29&th=1&psc=1)


- 『画像処理エンジニア検定エキスパート・ベーシック公式問題集[改訂第四版]』
[リンク](https://www.amazon.co.jp/%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E6%A4%9C%E5%AE%9A%E3%82%A8%E3%82%AD%E3%82%B9%E3%83%91%E3%83%BC%E3%83%88%E3%83%BB%E3%83%99%E3%83%BC%E3%82%B7%E3%83%83%E3%82%AF%E5%85%AC%E5%BC%8F%E5%95%8F%E9%A1%8C%E9%9B%86-%E6%94%B9%E8%A8%82%E7%AC%AC%E5%9B%9B%E7%89%88-%E5%85%AC%E7%9B%8A%E8%B2%A1%E5%9B%A3%E6%B3%95%E4%BA%BA%E7%94%BB%E5%83%8F%E6%83%85%E5%A0%B1%E6%95%99%E8%82%B2%E6%8C%AF%E8%88%88%E5%8D%94%E4%BC%9A%EF%BC%88CG-ARTS%EF%BC%89-ebook/dp/B08W4WCQZ3/ref=pd_aw_sim_m_sccl_1/355-8343321-5562415?pd_rd_w=ZsM7P&content-id=amzn1.sym.da2a7de3-540e-4482-98fb-d7c8c9899167&pf_rd_p=da2a7de3-540e-4482-98fb-d7c8c9899167&pf_rd_r=F7XZTB2R9SB67ZVBK5XF&pd_rd_wg=gWXo2&pd_rd_r=f17249bf-d187-4f42-9b7e-8fd73d58e861&pd_rd_i=B08W4WCQZ3&psc=1)


これらの書籍は基礎から応用まで幅広くカバーしているので、試験対策に非常に有効でした。
Interface Definition Language (IDL) Shared Module 構築

![Screen Shot 2024-06-07 at 8.41.44 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3797109/dc019b18-da19-1f4f-5e57-bbf1f77f15ef.png)

こんにちは。今回のポストでは、OpenAPI Specification、protobuf、gRPC、avroなど、一般的にインターフェース定義言語 (IDL) と呼ばれるものをPolyglot MSA環境で共有モジュールとして導入した事例について紹介したいと思います。

### IDLとは？
一般的にIDLと呼ばれるgRPCを例に取ると、以下のように「通信」に関する仕様を記述することができます。

```protobuf
message SearchRequest {
  string keyword = 1;
  int32 page_number = 2;
  int32 result_per_page = 3;
}
```

### 通信を仕様化することで共通のコードを通じた通信の共有
IDLによる前方/後方互換性の確保
通信を仕様化することで共通のコードを通じた通信の共有
ほとんどのIDLツールはCodeGenをサポートしています。例えば、上記の例の仕様を作成すると、通信部のオブジェクトとコードがすべて生成されます。これはクライアントとサーバーの両方で使用でき、IDLを作成することで、別途のI/O検証なしに信頼性の高いコードを作成できるようになります。

### IDLによる前方/後方互換性の確保
IDLを導入すると、通信仕様に関するコードレビューにクライアントとサーバーの開発者が自然に参加することになり、Avroでは直接互換性の検証を助けてくれます。このように前方/後方互換性を保つことができれば、クライアントとサーバーの開発間の依存性が減少するため、並行して開発を進めることができます。

また、私も現在検討中ですが、もしIDLを使用してデペンデンシーマップを描くことができれば、自然に通信の現状とスキーマ進化に対するオブザーバビリティを確保できるため、大規模な開発環境では優れたツールとなるでしょう。

IDLの領域は現在も着実に拡張しており、最近ではAsyncAPIというEDA用の仕様ツールも登場し注目を集めています。それだけでなく、KafkaのSchema Registryのようなツールとも統合できるため、規模が大きくなる開発組織の場合、導入を検討する価値があります。

---

### Git Submoduleを利用したサービス間の共有モジュール
上記で見てきたように、IDLはCodeGenをサポートしているため、Polyglot環境の複数のサービスも1つのコードベースを共有することができます。これをGit Submoduleで実装するなら、以下のようなワークフローを構築することができます。

![Screen Shot 2024-06-07 at 8.44.18 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3797109/cda1a0b2-3566-e6a3-8439-ee66b442e915.png)

ただし、Git Submoduleは1つのファイルとして扱われるため、複数の開発者が協力する際にコンフリクトのポイントとなる可能性があります。これを防ぐために、GitHubのDependabotのようにスキーマの進化が行われて新しいバージョンが出た時にPRを作成してくれるワークフローを作り、マージすることができます。

上記のように、生成されたコード自体をソースコードとしてインポートし、サービスのコードと統合して使用することができます。

### GitHub Packagesを利用したサービス間の共有モジュール
ワークフロー自体は上記と同じですが、この方法をまず紹介した理由は、Polyglot環境ではパッケージレジストリをうまく利用することが難しいためです。GitHub Packagesでサポートされている主要な言語は、リモートモジュールのようにリリースし、スキーマ進化を進めることができます。しかし、PHPのような言語をサポートしなければならない場合は、上記のように生成されたコードをSourceSetとして利用する方が良いかもしれません。

---

IDLを導入する際に注意深く考慮した点を簡単に共有いたします。

#### CodeGenの責任は一箇所にあるべき
他のプラクティスを見てみると、生成されたコードを共有するのではなく、IDLを共有し、各サービスで各自CodeGenを通じて使用する場合もあります。しかし、ほとんどのIDL CodeGenツールはバージョンによって生成結果が異なるため、CodeGenは中央集中的な管理を受けることで、大きな問題を事前に防ぐことができます。

#### インターフェースファースト
IDLを導入すると、インターフェースに対するコードレビューがクライアント、サーバーの開発者によって活発に行われるようになります。また、これをオープンソースを利用してUIで表現することができるため、サービスカタログの役割を代替することも可能です。そのため、CIでのCodeGen、IDL lintも積極的に使用されるべきであり、IDLのディレクトリやパッケージ構造でもドメインを区別しやすいように多くの工夫が必要です。

#### すべてが自動化されているべき
上記で述べたように、IDLはクライアントとサーバーの開発者が共に参加する場になります。つまり、iOS開発者、Android開発者、バックエンド、フロントエンド開発者がそれぞれ異なる背景知識を持って参加するため、IDLを作成することと担当サービスのスキーマ進化（IDLモジュールのバージョンアップグレード）以外に気を配る必要がないようにするべきです。これを守れなければ、IDL導入初期に他の開発者から敬遠される可能性があります。

---

IDLはテクノロジー組織の規模が大きくなるにつれて、複数のチームを一つにまとめる強力な手段となります。IDLがうまく導入され、よく抽象化されたAPIが多く生まれれば、各製品でさまざまなドメインのデータや機能が活発に活用されるようになるでしょう。もし製品が非常に大きくなりドメインが増えた場合、以下のように構造を変更することもできるかもしれません。

![Screen Shot 2024-06-07 at 8.46.35 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3797109/702eba97-5611-1e79-abb9-eb145c237787.png)
DatabricksアカウントコンソールからLakeviewダッシュボードの作成

ユーザーの方の投稿で気づきました(意外と多いです)。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">アカウントコンソールのUsageから、レイクビューダッシュボードが作成出来るようになっている！？ <a href="https://twitter.com/hashtag/databricks?src=hash&amp;ref_src=twsrc%5Etfw">#databricks</a></p>&mdash; てぃーおみ (@omit0325) <a href="https://twitter.com/omit0325/status/1798853940647444489?ref_src=twsrc%5Etfw">June 6, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Databricksの[アカウントコンソール](https://accounts.cloud.databricks.com/)にログインします。**使用量**にアクセスします。

**Import dashboard**をクリックします。
![Screenshot 2024-06-07 at 8.22.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/174e2a83-bb1c-1793-2621-1bc239dbb1e3.png)

ワークスペースを選択してImportをクリックします。
![Screenshot 2024-06-07 at 8.22.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/e69605d9-d3fb-826f-385a-f2b34b8b2ac0.png)

Databricksワークスペースのログイン画面に遷移するのでログインします。ご自身のホームディレクトリ配下に使用量を表示するLakeviewダッシュボードが作成されます。
![Screenshot 2024-06-07 at 8.23.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/93954d4b-658e-cd59-652c-83de738ef657.png)

再度ダッシュボードを作成したい場合には、Re-import dashboardをクリックします。
![Screenshot 2024-06-07 at 8.30.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/1568926a-51dd-181f-d49a-bfe612f83a85.png)

ご活用ください！

### はじめてのDatabricks

[はじめてのDatabricks](https://qiita.com/taka_yayoi/items/8dc72d083edb879a5e5d)

### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
Rails – マイグレーションで値を持つ列を間違って削除してしまわないように事前にチェックする例

# 例

```rb
def up
  if Example.where.not(foo_column: nil).exists?
    raise 'Example.foo_column has some value'
  end

  remove_column  :examples, :foo_column
end

```


# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# プロフィール・経歴

https://github.com/YumaInaura/YumaInaura
Haskellの環境構築

# 概要

本投稿は以下のことを目的として書かれています。

- MacでHaskellの実行環境を整える
- Stackプロジェクトの作成を前提としない実行環境を構築する
- VSCode上でフォーマッタ(ormolu)を適用する
- Haskellファイル単体で実行できるようにする

Haskellの環境構築の記事としては以下のものが詳しいので、
ちゃんとした環境を構築したい場合は以下の記事を参照してください。

- https://zenn.dev/mod_poppo/articles/haskell-setup-2023


# インストール

GHCupインストール

```sh
curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh
```

GHCのインストール

```sh
ghcup install ghc 9.8.2
```

haskell-language-serverのインストール

```sh
ghcup install hls 2.7.0
```

フォーマッタ本体のインストール

```
brew install ormolu
# こっちは使わないがエラーメッセージ対応のため入れておく
brew install hlint
```

VSCodeの拡張機能をインストール

- ormolu-vscode
  - https://marketplace.visualstudio.com/items?itemName=sjurmillidahl.ormolu-vscode

- Code Runner
  - https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

VSCodeの`settings.json`に以下を追加

```
  "haskell.serverExecutablePath": "~/.ghcup/bin/haskell-language-server-wrapper-2.7.0.0",
  "haskell.manageHLS": "GHCup",
  "haskell.trace.server": "messages",
  "haskell.formattingProvider": "ormolu",
  "haskell.hlint.executablePath": "/opt/homebrew/bin/hlint",
  "ormolu.path": "/opt/homebrew/bin/ormolu",
  "ormolu.args": ["--no-cabal"],
  "[haskell]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "sjurmillidahl.ormolu-vscode",
  },
  "haskell.toolchain": {
    "ghc": "9.8.2",
    "cabal": "3.6.2.0",
    "stack": "2.15.5"
  },
  "haskell.ghcupExecutablePath": "~/.ghcup/bin/ghcup",
  "code-runner.executorMap": {
    "haskell": "runghc $fullFileName"
  },
  "code-runner.executorMapByFileExtension": {
    ".hs": "runghc $fullFileName"
  },
  "code-runner.clearPreviousOutput": true,
  "code-runner.runInTerminal": true,
```

## その他

GHCupでインストールしたパッケージのバージョン情報一覧を表示

```sh
ghcup list
```

GHCupでインストールしたモジュールのバージョン変更

```sh
ghcup set ghc <version>
```

# 実行コマンド

- ファイル実行(`runghc`)
  - Ctrl + Alt + n

# hlintの抑制

`xs !! 0`を使うなどのSuggestionやWarningを抑制したい場合は以下のようにする

1. `.hlint.yaml`を作成
2. `- ignore: {name: "Use head"}` のようにファイルに追記する
   - `name`の部分は公式GitHubの[Hint Name](https://github.com/ndmitchell/hlint/blob/master/hints.md)の文字列を指定すること
3. 保存後にファイルを開き直すとSuggestion, Warningなどが消える

# 未解決

## ghcが$PATHに無い

VSCodeでHaskellのソースファイルを開くと以下のエラーが表示される。  
ghcのパスは通っているがエラーが消えない。  
今のところ実動作に影響は無いので放置

```
Failed to find executable "stack" in $PATH for this Stack project.
```

# 参考

- 環境構築2023
  - https://zenn.dev/mod_poppo/articles/haskell-setup-2023
- ormolu
  - https://github.com/tweag/ormolu?tab=readme-ov-file
  - https://marketplace.visualstudio.com/items?itemName=sjurmillidahl.ormolu-vscode
- インデント幅
  - https://dev.classmethod.jp/articles/change-default-indent-in-vscode/
MySQLの「->」が消えないときの対処法【初学者向け】

# 解決したい問題
MySQLの画面（コマンドライン）での作業中、、、

さっきまでは
```
mysql>
```
↑で作業できていたのに、何かの拍子に
```
mysql>
    ->
```
こいつ→「　->　」しか出てこなくなる現象に直面する方もいらっしゃると思います。
そんな状況の解消を手伝えるように執筆しました。

# 結論：Macは「\c」、Windowsは「¥c」を入力したら解消できるよ

```
mysql>
    -> \c
mysql>
```
↑こんな感じです。「c」は　~~cancel（キャンセル）のcかなと思ってます。~~ clear（クリア）のcでした！
お困りの方、特に初学者の方にこの投稿が少しでも役に立てば嬉しいです。

# バックスラッシュ（これ→\）が出ない人
Macユーザーは『option』キーを押しつつ「¥」キーを押すと、バックスラッシュ（\）が入力されるので、ぜひ活用ください。
Flutter 〜各ウィジェットの動作検証用コード〜

各Widgetの動作を確認するためのコードを作成してみた。
「final sample = 」の部分で確認したいWidgetを書く、という使い方。
もっと簡単なのができたら更新予定。

例えばTextField。

```dart
import 'package:flutter/material.dart';

// アプリケーションのエントリーポイント
void main() {
  runApp(const MyApp());
}

// アプリ全体を構成するMyAppクラス
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // ★★★表示するウィジェットを指定。ここではTextFieldウィジェットを使用★★★
    final sample = TextField(
      decoration: InputDecoration(
        border: InputBorder.none,
        hintText: 'Enter a search term',
      ),
    );
    return MaterialApp(
        // homeプロパティにWidgetTesterウィジェットを設定
        home: WidgetTester(
      child: sample,
    ));
  }
}

// 任意のウィジェットを中央に表示するためのWidgetTesterクラス
class WidgetTester extends StatelessWidget {
  final Widget child;

  // コンストラクタでchildウィジェットを受け取る
  const WidgetTester({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // AppBarのタイトルを設定
        title: const Text('Widget Tester'),
      ),
      // 受け取ったchildウィジェットを画面中央に表示
      body: Center(
        child: child,
      ),
    );
  }
}

```
表示結果。
<img width='50%' src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743467/e04a2dab-1532-40a7-98f0-c889821bdb9e.png>

Iconの場合。sampleの変数の部分だけを変更。

```dart
import 'package:flutter/material.dart';

// アプリケーションのエントリーポイント
void main() {
  runApp(const MyApp());
}

// アプリ全体を構成するMyAppクラス
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // ★★★表示するウィジェットを指定。ここではIconウィジェットを使用★★★
    final sample = Icon(
      Icons.favorite,
      size: 40,
    );
    return MaterialApp(
        // homeプロパティにWidgetTesterウィジェットを設定
        home: WidgetTester(
      child: sample,
    ));
  }
}

// 任意のウィジェットを中央に表示するためのWidgetTesterクラス
class WidgetTester extends StatelessWidget {
  final Widget child;

  // コンストラクタでchildウィジェットを受け取る
  const WidgetTester({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // AppBarのタイトルを設定
        title: const Text('Widget Tester'),
      ),
      // 受け取ったchildウィジェットを画面中央に表示
      body: Center(
        child: child,
      ),
    );
  }
}

```
表示結果

<img width='50%' src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743467/0218dcf2-6c20-5039-da03-1245e091ea7f.png>
Dockerで起動したMySQLにデータimportしたら文字化けするので困った話

# 結論

これで直った

```bash
$ docker compose exec db /bin/bash -c "mysql  --default-character-set=utf8 -uroot -p db_name < xxx.sql"
```

# やったこと

## ファイルの文字コード確認

```bash
$ nkf --guess xxx.sql
UTF-8 (LF)
```

UTF8でした

## my.cnfで設定

```sql
show variables like '%char%';
```

これ実行すると `character_set_server`が `latin1` だったのでこれかな？って思いましたが違いました。

```yaml
# ...
    volumes:
      - ./docker/mysql/my.cnf:/etc/mysql/my.cnf
# ...
```

```bash
$ cat ./docker/mysql/my.cnf
[mysqld]
character_set_server=utf8mb4%
```

# 雑感

シカトしてたけど、Rails側で文字コードエラーみたいなものがでたので、がんばって（？）修正した
NotebookLM (無料:Google製 生成AIのGeminiを使用:日本語対応) 生成AIは次のステージに？

# 使い方がわからないという意見

普通のAIのほうが便利、

これは新しい情報、自分の考えを書いたものを読み込ませて、それをAIに理解させる機能を持った次世代AIになる予定のもの。

だから使い方がわからなかったら普通のAIを使って、👆の条件が必要になった時初めてNotebookLMを思い出せばいい。

近い将来、生成AIのGeminiは自動でネットの最新情報を読み込むようになり、NotebookLMを補助機能として使えるようにするはずだ。

いまは、NotebookLMに読み込ませた部分限定での生成AIの提案ができるようになっているが、
AIはもっと賢くなって普通のAI+最新情報+自分の考え(=NotebookLM)の組み合わせが「どのAI会社も」普通のサービスにすると思う。



# 有料になるという意見

自分の願望も含めて、無料のままだろう。

なぜならこの会社はGoogleでありお金は持っている、
それよりも重要なのはAIのデファクトスタンダードになることで、AIの群雄割拠ん時代に小銭を拾うようなことはないと勝手に思っている。

ほかのAI会社も似たような機能は RAG とかもあるし、わざわざ不利になるようなことはしないとおもう。

自分なら法人向けに有料の契約タイプのサービスにすると思う。





https://notebooklm.google/

👆すぐに使ってみたい方へ、こちらにアクセス。
要:Googleアカウト

Xを見ていたら、👇こんな記事が流れてきた。

自分だけの信頼できるAIへ　グーグル「NotebookLM」公開 - Impress Watch

https://www.watch.impress.co.jp/docs/news/1597789.html

与えた資料を元に生成AIを動かすことができるようになるという。
もしこれが本当なら、生成AIの使い方が１ステージ上に行くことになる。

今まではネットで学習した（少し古い）情報を元に文章を作ってくれていたが。
これではコードも古いままで、最新のNext.js React ServerActionに対応した書き方をしてくれていなかった。

しかしこれが有効ならば、公式ドキュメントを読み込ませて最新の情報を与えて最新の書き方で表示されるようになったり、自分が作成した構想や設計書を元に、テーブル設計とかPlantUML図とかテストとかコードも余分な情報、古い情報を含まず書いてくれるようになるはず。

Googleの生成AI Gemini はURLにアクセスしてからの立ち上がりや、提案も早いので、無料ならばChatGPTよりも使いやすい。
※ 比較すると最近のChatGPT(無料)のは遅くて重い。

生成AIに関してはいろんな発表ごとに「革命」という言葉がつくくらい急成長を遂げてきた、今回のこの機能はコードを書く、最新の資料を使いたい人にとって本当に「革命」という枕詞を使うのにふさわしいものになると思う。
(本当に与えられた資料を元に、それにそった提案をしてくれるのならばだが。)

# 実際の使い方

実際の使い方は、記事に詳細が載っているのでそちらを見て欲しい。

自分だけの信頼できるAIへ　グーグル「NotebookLM」公開 - Impress Watch

https://www.watch.impress.co.jp/docs/news/1597789.html


## Gemini
※Geminiは無料プランと有料プランがそれぞれあるようです。
無料プラン：Gemini ＜＜今回はこちらで使える機能
有料プラン：Gemini Advanced 月額2,900円

## NotebookLMの主な特徴

* アップロードしたソースはGoogleのAI学習に使われない
* 公式ドキュメントを読み込ませて最新の情報を与えたり、構想や設計書を元に、テーブル設計やPlantUML図、テスト、コードなどを書いてくれる
* 日本語を含む200以上の国・地域に対応
* 無料で利用可能

# 後で試す。

# 参考

* [自分だけの信頼できるAIへ　グーグル「NotebookLM」公開 - Impress Watch](https://www.watch.impress.co.jp/docs/news/1597789.html)
* [グーグル、Gemini時代に突入 Google I/Oで新モデルやエージェントを披露 - Impress Watch](https://www.watch.impress.co.jp/docs/news/1591504.html)
* [グーグルのAI祭り「Google I/O 2024」基調講演を総まとめ - ケータイ Watch](https://k-tai.watch.impress.co.jp/docs/news/1591510.html)
* [「専門家を超えるAI」 グーグルの次世代生成AIモデル「Gemini」登場 - Impress Watch](https://www.watch.impress.co.jp/docs/news/1552601.html)
2024/6/7主にITとかセキュリティの記事

フィッシング対策協議会、「フィッシング対策ガイドライン」を改訂
https://www.security-next.com/158035

流出「Bitcoin」の保証に向けた資金調達計画を発表 - DMM Bitcoin
https://www.security-next.com/158027

「Apache HugeGraph」のRCE脆弱性 - 詳細やPoCが公開
https://www.security-next.com/158031

九州電力グループ会社がランサム被害、10万4000件の個人情報が漏洩した恐れ(6/6)
https://xtech.nikkei.com/atcl/nxt/news/24/00930/

公立小中高校の8割がネットワーク帯域の基準未達、不具合が潜む5つのポイント(6/6)
https://xtech.nikkei.com/atcl/nxt/column/18/02858/060400001/

「アジャイル開発なのにスピードが上がらない」、三井住友海上が新基盤で課題解決(6/6)
https://xtech.nikkei.com/atcl/nxt/column/18/00001/09274/

ユニリーバ・HSBC・シーメンス…　ジョブ型から「スキルベース」組織へ(6/6)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/042600418/060300002/

マクドナルドがインフラ近代化　AIやIoTを全店に高速展開(6/6)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020900021/060300165/
go: go.mod file not found in current directory or any parent directory; see 'go help modules'で怒られた

go run . を実行すると以下のエラーで怒られた。

```
go: go.mod file not found in current directory or any parent directory; see 'go help modules'
```

調べてみるとgo modなるものが必要だったため以下のコマンドで追加。

```
$ go.mod hoge

$ cat go.mod
module hoge

go 1.22.3
```

module名とgo versionが記載されたファイルが追加された。

調べてみるとgo mod ファイルは go のパッケージの依存関係を管理するファイルのようだ。

```
$ go mod init hogehoge
go: \go.mod already exists
```
同一ディレクトリで再度実行すると怒られるので、1ディレクトリ1ファイルしか置けないようだ。
配下の別ディレクトリでは同名のmodファイルを作成することが出来た。

[standard go project layout](https://github.com/golang-standards/project-layout)を見る限り go.mod ファイルはプロジェクトルート配下に置くのがよいのかもしれない。
【論文メモ】Linkless Link Prediction via Relational Distillation


https://arxiv.org/abs/2210.05801

# この論文を読んだ理由
GNN-to-MLPの知識蒸留(KD)手法をサーベイしている際に見つけた論文．
ノード分類ではなく，リンク予測を対象としているが，考え方は重要そうだったから．

# 解いている課題
- タスク：リンク予測

- GNN-to-MLPの手法はノード分類を対象にしたものが多いが，ここではリンク予測を対象とする．

- 以下のDirect KDでは不十分である
  - Logit-Maching (LM)...リンクの予測確率を似せる
  - Representation-Maching (RM)...GNNの出力特徴量を似せる

# 提案手法のアプローチ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3583007/722a9486-8c0d-5097-0710-42e6847d2ff5.png)

- Relational KD
  - **Ranking-based Maching (LLP_R)**...**リンク予測ランキングを似せる**
    ```math
    L_{LLP_R} = \sum_{v \in V} \sum_{(\hat{y}_{v,i}, \hat{y}_{v,j}) \in \hat{\mathcal{Y}_v}} \max (0, -r \cdot (\hat{y}_{v,i} - \hat{y}_{v,j}) + \delta),
    ```
    ```math
    \text{where } r = \begin{cases} 1, & \text{if } y_{v,i} - y_{v,j} > \delta; \\-1, & \text{if } y_{v,i} - y_{v,j} < -\delta; \\0, & \text{otherwise},\end{cases}
    ```
    $\rightarrow$**GNNにおいて閾値$\delta$を超えるくらいの予測確率の差があれば，MLPでもその差を再現する．リンク予測確率のランキングが一致するように学習**
    <br>
  - **Distribution-based Maching (LLR_D)**...**予測確率の分布を似せる**
    ```math
    L_{LLP\_D} = \sum_{v \in V} \sum_{j \in \mathcal{C}_v} \frac{\exp(y_{v,i} / \tau)}{\sum_{j \in \mathcal{C}_v} \exp(y_{v,j} / \tau)} \log \left(\frac{\exp(\hat{y}_{v,j} / \tau)}{\sum_{j \in \mathcal{C}_v} \exp(\hat{y}_{v,j} / \tau)} \right) 
    ```
    $\rightarrow$**GNNにおける予測確率とMLPにおける予測確率を似せる．ただし，近傍ノード全体の予測確率で正規化．** 単純に予測確率を似せるのではなく，近傍というコンテキストを踏まえて似せることでより有効に．

<br>

- 最終的なロス関数
  正解ラベル (sup)にLLP_R，LLP_Dを加える．
  ```math
  L = \alpha \cdot L_{sup} + \beta \cdot L_{LLP\_R} + \gamma \cdot L_{LLP\_D}
  ```


## 実験結果
- GNN，MLP，Direct KDを用いてGNN-to=MLPより精度が高い

- MLPに蒸留しているのでコールドスタート設定で他の手法より精度が高い


# この論文の問題点，発展させるとしたら
- Relational KDとDirect KDを比較しているが，全てを組み合わせると精度が上がるのかが気になる
Amazon Prime VideoのNext upを消すCSS

# TL;DR
[Stylus](https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja)みたいなCSSをいじれる拡張を入れて、

```
ドメイン上のURL- www.amazon.co.jp
```
```css
.atvwebplayersdk-nextupcard-wrapper {
    visibility: hidden;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3328036/d6a2e597-d9e9-485b-677c-5d44b01b1233.png)

の設定をいれる。 (動作する条件は適当。)

# 経緯
ユーフォ3期9話を見て、限界化していたら、全く興味の無い作品のNext upが出てきて、興が削がれたので、酔ったノリで二度と(仕様変更が入るまでは)そんなことが無いようにした。
拡張機能があったり、広告ブロッカーを使う方法があったり、CSSを半透明にする方法があったりしたが、なんでそんな回りくどいことをするのかわからなかったのでvisibility: hidden;した。

# 注意点
- 拡張機能の危険性を理解したうえでご利用ください。
- Amazon Prime Videoに仕様変更が入り、動作しなくなる可能性があります。
- その他諸々、自己責任でご利用ください。

# 参照 
- [visibility - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/visibility)
SwiftUI boldのModifierが冗長だった件について

# **背景**
今まで`Text`に対して、`.font(.system(size: ))`のModifierを付与しているときも`.bold()`のModifierを付与していました。
なんとなくFigmaのPluginsの SwiftUI Inspector使った時に、
`.font(.system(size: 14, weight: .bold))`を提案されました。

1行で済むのか…

これは盲点でした。

# **Before**
```swift
Text("Hello World")
    .bold()
    .font(.system(size: 16))
```

# **After**
```swift
Text("Hello World")
    .font(.system(size: 16, weight: .bold))
```

**Figma の SwiftUI Inspector**
<img width=400 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128814/f13163c6-4c6f-9288-9673-960c5c930a59.png">
ChatGPTの特徴メモ

# ChatGPTの特徴
## 2.1 高度な自然言語理解
ChatGPTは、膨大なデータセットを用いてトレーニングされており、その結果として高度な自然言語理解能力を持っています。このトレーニングには、書籍、記事、ウェブサイトなど、多様なソースからのテキストデータが含まれており、これにより広範なトピックについて深い知識を有しています。例えば、科学技術、歴史、芸術、エンターテインメントなど、さまざまな分野の質問に対して正確かつ詳細な回答を提供できます。このような広範なトピック対応能力は、ChatGPTが多岐にわたるユーザーのニーズに応えるために不可欠な特性です。

## 2.2 ユーザーとのインタラクション
ChatGPTは、ユーザーとのインタラクションにおいても優れた能力を発揮します。カスタマーサポートの分野では、24時間365日対応可能なアシスタントとして活躍しています。例えば、製品の使用方法に関する質問やトラブルシューティングの支援など、迅速かつ的確なサポートを提供します。また、教育分野では、学生の質問に対する回答や課題のサポートなど、学習支援の一環として利用されています。このように、多様な場面でのユーザーとのインタラクションを通じて、ChatGPTはその有用性を証明しています。

## 2.3 継続的な学習と改善
ChatGPTは、継続的に学習と改善を行う能力を持っています。新しいデータやユーザーからのフィードバックを取り入れることで、その性能は日々向上しています。例えば、ユーザーが提供するフィードバックを基に、回答の精度や関連性を高めるための調整が行われます。このプロセスは、自然言語処理技術の進歩とともに進化し、より高度な対話能力を実現するための鍵となっています。このように、継続的な学習と改善を通じて、ChatGPTは常に最新の情報と高い性能を維持しています。

## 3. ChatGPTの利用例
### 3.1 カスタマーサポート
ChatGPTは、カスタマーサポートにおいて重要な役割を果たしています。特に、24時間対応可能な点は大きなメリットです。例えば、ユーザーが深夜に問題を抱えた場合でも、ChatGPTは即座に対応し、問題解決のサポートを提供します。これにより、顧客満足度が向上し、企業にとってはコスト削減にもつながります。また、定型的な質問や簡単なトラブルシューティングに対応することで、人間のカスタマーサポート担当者がより複雑な問題に集中できる環境を整えることができます。

### 3.2 教育分野
教育分野でも、ChatGPTは幅広く活用されています。例えば、学生が授業内容に関して疑問を持った場合、ChatGPTはその質問に対して迅速かつ的確に回答を提供します。また、課題のサポートとして、テーマに関する情報提供やアイデアの整理、さらには文章の修正や改善の提案など、多岐にわたる支援が可能です。これにより、学生は効率的に学習を進めることができ、教育の質を向上させることができます。

### 3.3 クリエイティブな執筆支援
ChatGPTは、作家やジャーナリストなど、クリエイティブな職業に従事する人々にも大きな助けとなっています。例えば、新しいアイデアを出す際や、既存の文章を修正する際に、ChatGPTは迅速かつ的確なアドバイスを提供します。また、特定のテーマに関する情報収集や構成の提案など、多岐にわたる支援が可能です。これにより、クリエイティブなプロセスがスムーズに進行し、高品質な作品を生み出す助けとなります。

## 4. 専門用語の解説
### 4.1 自然言語処理（NLP）
自然言語処理（NLP）は、コンピュータが人間の言語を理解し、処理するための技術です。NLPは、音声認識、テキスト解析、自動翻訳など、多岐にわたる応用分野を持ちます。例えば、音声アシスタントはNLPを利用してユーザーの音声指示を理解し、適切な応答を返します。また、テキスト解析技術を用いて、大量の文書から有用な情報を抽出することも可能です。このように、NLPは私たちの日常生活に深く浸透しており、様々な場面でその利便性を実感することができます。

## 5. ChatGPTの未来と可能性
ChatGPTの技術は、今後も継続的に進化し、新たな価値を創出する可能性を秘めています。例えば、より高度な自然言語理解能力を持つことで、さらに複雑な対話や専門的な質問にも対応できるようになるでしょう。また、他の先進技術と組み合わせることで、新しい応用分野が開拓される可能性もあります。例えば、医療分野での診断支援や、法律分野での文書作成支援など、さまざまな分野での活躍が期待されています。このように、ChatGPTの未来には多くの可能性が広がっており、その進化と共に私たちの生活も豊かになっていくことでしょう。

## 6. まとめ
ChatGPTは、その高度な自然言語理解能力と多様な応用例を通じて、私たちの生活に大きな影響を与えています。カスタマーサポートや教育分野、クリエイティブな執筆支援など、さまざまな場面でその有用性が証明されています。また、継続的な学習と改善を通じて、常に最新の情報と高い性能を維持しています。今後も進化し続けるChatGPTの技術には、多くの期待が寄せられており、その可能性は無限大です。利用のメリットとしては、効率性の向上やコスト削減、満足度の向上などが挙げられますが、一方でデータのプライバシーや倫理的な問題にも注意を払う必要があります。これらを踏まえ、適切に利用することで、ChatGPTは今後も私たちの生活を支える重要なツールとして活躍し続けることでしょう。
未経験でIoT系研究開発職に転職した人の学習記録 #2

# 所感
3日経ちましたが継続できています。自分に合っているやり方のようです。
とはいえ、残業して帰宅してから1日の学習に割ける時間は睡眠時間を削っても1~2時間が良いところですので進捗は遅いですね。
なので本日からは進捗が薄かったり、1記事使って共有するようなTipsじゃないときは公開した記事に編集追記していく形にします。
目安としては章単位もしくは週単位になろうかと思われます。

0分よりは圧倒的に良いので、自分を甘やかしながら続けていきます。

(業務関連でpythonやGit、Linuxの理解を深めたり、無線規格を熟読しないといけない状態になってきたのでそんな悠長なことをいってられないかもしれませんが、、、)


## 学習記録
### 6/6
#### 2-1 出力
ポイント：改行、変換指定、変換指定子、エスケープシーケンス
* 「\n」を文字列の直後に記載して改行
* 整数の時　printf("文字列%d",4+5); →文字列9
* 小数点を含む時　printf("文字列%f\n文字列", 9.9 - 3.3); →文字列6.600000
　　　　　　　　　　　　　　　　　　　　　　　　　　文字列
* printf("%dと%fを足した値は%fです", 5, 5.5, 10.5); →5と5.500000を足した値は10.500000です
* printf("%dと%.3fを足した値は%.2fです", 5, 5.5, 10.5); →5と5.500を足した値は10.50です

* 文字列の中にある「\某」は某に記載する文字と組み合わせて特別な意味を持つ。
printf("'クォーテーション\'\n\"ダブルクォーテーション\"\n\\バックスラッシュ\\\n改行（ラインフィールド:LF）\n水平タブ\t水平タブ\n\r復帰復帰復帰（キャリッジリターン:CR）\r上書き部分\n");
↓
'クォーテーション'
"ダブルクォーテーション"
\バックスラッシュ\
改行（ラインフィールド:LF）
水平タブ        水平タブ
上書き部分帰（キャリッジリターン:CR）

### 6/7
#### 2-2変数
変数名を宣言→代入(初期化)→参照

宣言：型名　変数名
代入：変数名 = 値
参照：printf("値")

よく使う変数の型
整数型(%dで表示)
　int：4バイト。32ビット符号付整数(-2^31 ~ +2^31)

浮動小数点型(%fで表示)
　double：8バイト。64ビット符号付き浮動小数点数
　float：4バイト。32ビット符号付浮動小数点数

文字型(%cで表示)
　char：1バイト。英数字１文字。(-128~127)

### 6/8
2-3 算術演算子と式
式の値が計算されることを、「式が評価される」という。

加算代入
　a = a + 5;
　a += 5;

減算代入
　b= b - 6;
　b -= 6;

乗算代入
　c = c * a;
　c *= a;

除算代入
　d = d / 3;
　d /= 3;

剰余代入
　e = e % 2;
　e %= 2;

インクリメント
　f = f + 1;
　f ++;
  ++f;

デクリメント
　g = g - 1;
　g --;
　--g;


キーボードからの入力を受け取る
```
int main(void) {
	int i;
	double d;
	printf("整数を入力してください\n");
	scanf_s("%d", &i);
	printf("%dが入力されました\n",i);
	printf("小数点を含む数を入力してください\n");
	scanf_s("%lf", &d);
	printf("%lfが入力されました\n",d);
}
```
※コードを挿入するときはバッククォート3つを使う「```」


### 6/9
サボりました



### 6/10
2-4 演算と型
・異なる型どうしの計算では、大きな型に統一して計算される。
・整数どうしの割り算を行った場合、小数点以下の数値は切り捨てられる。
・変数の型を変換することを「型変換」（キャスト）と呼ぶ。
　　→(変換したい型)a
  　　例　int a を　doubule型にしたい場合　(double)a と記述する。
【Swift】ファイルやディレクトリのパスが長すぎていやだ - URL.shortPath()


長すぎですよね。

![sc 2024-06-07 at 1.17.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588914/f6804d4a-2f8b-563d-c262-090fc1a651df.png)

```URL.shortPath()``` を使います。

```swift
let documents = URL.documentsDirectory

print(documents.shortPath())
// /HOME/Documents/

print(
  documents
    .appending(component: "Documents and Settings/")
    .shortPath()
)
// /HOME/Documents/Documents%20and%20Settings/

print(
  documents
    .appending(component: "Documents and Settings", directoryHint: .isDirectory)
    .shortPath(percentEncoded: false)
)
// /HOME/Documents/Documents and Settings/
```

これでスッキリです!

# 😀 参考
https://android.benigumo.com/20240607/path-too-long/
ミニ Abemaを作ってみたい

# Abemaを作ってみたい
作るならどんな感じになるか考えてみた

# スコープ
Androidのabemaアプリのミニ版(機能 超縮小版)を作成する。
基本的にフロント側を簡単に構築する。

## 実装したいAbemaのアーキテクチャ概要図
バックエンドの構築をすべてやるのは、時間がかかるのでYoutubeを用いる。
Androidのソフトを簡単に実装したい
|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![名称未設定ファイル.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303459/6b96cd4c-42f0-ab10-f8e3-ed0b7865c8cd.png)|


## 第一の目標
NHKのサイトから以下動画をお借りする。
https://www2.nhk.or.jp/archives/movies/?id=D0002161720_00000
まずは、この動画をループでYoutubeに乗せ、Android端末で見られるようにするところまでを第一の目標とする。


出来上がるのはほぼYoutubeだが、クライアントアプリ側を自分でいじれて、別でサーバを持ちそこで色々できるみたいにできればいいかなと思った。

たぶん、あまり良くないがYoutubeの広告ブロック系の[NewPipeというもの](https://github.com/TeamNewPipe/NewPipe)があり、その中に[NewPipeExtractorというライブラリ](https://github.com/TeamNewPipe/NewPipeExtractor)があるので、これを使えばいい感じに動画が取れる気がする。

## まずは、Youtubeで配信し続けるところを作る
下の記事を参考にする。
https://qiita.com/uzyexe/items/5452c6853c9bf2bce267

## 一旦ライブ配信してみる
チャンネルを作った

https://youtube.com/@abema-wh1yx?si=77O8C06454taDcWr

↓に従ってライブ配信設定をする

https://support.google.com/youtube/answer/2474026#enable

24時間待てとのこと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303459/280f5ee5-9b02-bc7f-3f8b-fe3ec2ee7dbe.png)

## [NewPipeExtractor](https://github.com/TeamNewPipe/NewPipeExtractor)
[NewPipeExtractor](https://github.com/TeamNewPipe/NewPipeExtractor)というライブラリについて考えてみる。
Youtubeでライブ配信をするのはいいが、独自のアプリでその配信を見れるようにしたい。
アプリ内ブラウザを使ってみるでもいいけど、埋め込んだYoutubeだとUIを制御できなさそう


## Youtube埋め込み
色々調べたけど埋め込みでWebだとUI制御が難しい
どうしてもYoutubeロゴを消せない
どっちにしても音を出して自動再生もできない、、

https://hirogeru-blogs.com/about-autoplay-movie/

(なんでも背景に、自動再生で勝手に音が出て困るからmuteでの自動再生のみにしたとか。)

<iframe width="789" height="444" src="https://www.youtube.com/embed/liMSlpffn2U?autoplay=1&mute=1" title="【同時視聴】突然だけどMリーグファイナル見よう【白雪レイド】" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

制約が多そうなので、[NewPipeExtractor](https://github.com/TeamNewPipe/NewPipeExtractor)にする。

## [NewPipeExtractor](https://github.com/TeamNewPipe/NewPipeExtractor)
Gradleで入れ込んで、各モジュールを使えるようになるみたい。ドキュメントも充実しており、使えそう。

# youtubeでの配信
自分のPCのYoutubeで配信できた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303459/3e886cbb-9ecf-0430-8c91-29f6d8a81252.png)

これをラズパイに移行する

# 図を更新する
以下画像みたいな感じで作っていきたい

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![hello.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303459/90a986ee-3eac-bdc5-d208-116a01667609.png)|

# [NewPipeExtractor](https://github.com/TeamNewPipe/NewPipeExtractor)で試行錯誤中...