OmniAICreator/Qiita-1.07M huggingface dataset:
React Native環境構築で沼ったこと備忘録 for Mac M3

この記事参考にした

[https://deku.posstree.com/react-native/install-on-mac/](https://qiita.com/yuutakkuma_dev/items/553f0c92df6ce96882c5)

めっちゃ丁寧で簡潔にまとまってる

# 1, Homebrewをインストール

https://brew.sh/

# 2, **rbenvインストール**

```jsx
# rbenvのインストール
brew install rbenv
# 公式の手順に乗っ取り初期化
rbenv init
# .zshrcに下記を追記しろと言われるので、追記する。
eval "$(rbenv init - zsh)"
# rbenv-doctorをたたいて、問題ないことを確認する。
curl -fsSL https://github.com/rbenv/rbenv-installer/raw/main/bin/rbenv-doctor | bash
# インストール出来るRubyのバージョン一覧を確認。
rbenv install -l
# 2022/8/6時点で3.1.2が最新っぽいのでインストールする。
rbenv install 3.1.6
# 3.1.2を設定する
rbenv global 3.1.2

```

### ターミナルを再起動(絶対)

```jsx
# ターミナルを再起動してRubyのバージョン確認
ruby -v
```

# 3, bundlreをインストール

```jsx
gem install bundler
```

# 4, Node.jsとnpmをインストール

```jsx
brew install node
```

# 5, watchmanのインストール

```jsx
brew install watchman
```

# 6, Java Development Kitのインストール

```jsx
brew tap AdoptOpenJDK/openjdk
brew install adoptopenjdk/openjdk/adoptopenjdk8 --cask
```

# 7, .zshrcに必要事項を追記

.zshrcはユーザーのディレクトリ直下にある

```jsx
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
```

# 8, テスト起動

```jsx
# JavaScriptが良い方
npx react-native init AwesomeProject

# TypeScriptが良い方
npx react-native init AwesomeTSProject --template react-native-template-typescript
```

# 苦しめられたエラー

## error Installing pods failed.

```jsx
✖ Copying template
error Installing pods failed. This doesn't affect project initialization and you can safely proceed. 
However, you will need to install pods manually when running iOS, follow additional steps in "Run instructions for iOS" section.
```

iosでビルドできないっぽい

cocoapods関係のエラーっぽい

### やったこと

- cocoapodsをgemを使ってインストールした

```jsx
gem install cocoapods
```

ターミナルを再起動しても変わらず同じエラーを吐く

- `--npm` のオプションをつけた

```jsx
npx react-native init AwesomeProject --npm
```

これでいけた！！！！

## Error: EMFILE: too many open files, watch

```jsx
node:events:498
      throw er; // Unhandled 'error' event
      ^

Error: EMFILE: too many open files, watch
    at FSWatcher._handle.onchange (node:internal/fs/watchers:207:21)
Emitted 'error' event on NodeWatcher instance at:
    at FSWatcher._checkedEmitError (/Users/yamaguchiyusei/programming/react-native/AwesomeProject/node_modules/metro-file-map/src/watchers/NodeWatcher.js:82:12)
    at FSWatcher.emit (node:events:520:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:213:12) {
  errno: -24,
  syscall: 'watch',
  code: 'EMFILE',
  filename: null
}

Node.js v22.8.0
```

### やったこと

プロジェクトのディレクトリで `npm start` を実行するとなぜか直った。。。

↓参考

https://gedem-blog.vercel.app/blog/expo-error-1/
Github Copilot Extension を利用して IDE から New Relic にアクセスをする

Github Copilot Extensions という Copilot の拡張機能が public beta として出てきておりそこに New Relic も対応しておりどういったものかを触ってみたので共有します。

https://github.blog/jp/2024-09-18-enhancing-the-github-copilot-ecosystem-with-copilot-extensions-now-in-public-beta/

## New Relic Copilot Extension について

できることは Github のページを参照してもらえるとわかりますがざっくり以下です

- Copilot Chat に対して @newrelic としてから質問をすると New Relic の Agent をバイパスして [New Relic AI](https://docs.newrelic.com/jp/docs/new-relic-solutions/new-relic-one/core-concepts/new-relic-ai/) と対話ができるようになる
- New Relicでシステムを可視化するための方法を問い合わせることができる
- New Relicのさまざまなプラットフォーム機能のナビゲーション方法について学べる(ここの使い方がまだよくわからなかった)

将来的にはテレメトリデータを参照してシステム改善のための提案などの機能を実装する予定もあるそうです。
https://github.com/marketplace/newrelic-copilot-extension

説明はこれくらいにして早速連携をしてみます。

## 連携方法

連携方法は簡単で Github の Marketplace からNew Relic Copilot Extensionを有効化します。

Github Copilot のライセンスが必要になるのでライセンスが無い場合は有効化などをしておきましょう。Organization で利用したい場合は管理者による有効化が必要になります。

New Relicの拡張機能を利用することによる追加のコストはかからないのでご安心ください

![Screenshot 2024-09-21 at 10.43.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263293/1a24fb7e-4f9c-c941-bb80-729b9520cf03.png)

### VS Code でCopilot Chat を立ち上げる

今回は VS Code を利用します。筆者は普段、 Jetbrains 製品信者ですが今回は Jetbarains 製品では利用できなかったので VS Code で連携を実施します。

VS Code で Copilot Chat を立ち上げて @newrelic をつけてみて適当な言葉を入力します。
すると New Relic への認証の画面を求められるのでそのまま進んで認証を進めましょう。認証が完了すると Chat 側で対話ができるようになります。

同じ hello という問いかけをしても返事が変わっていることがわかります。
![Screenshot 2024-09-21 at 11.43.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263293/0fc7427d-343a-0364-fe2c-4db238af2fff.png)


## 問い合わせてみる

実際に連携もできたので問い合わせてみます
Go Agent の連携方法について聞いてみました

![Screenshot 2024-09-21 at 11.48.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263293/7b8747ff-59b6-3177-d20c-7622c92764e3.png)

見切れていますが連携後のガイダンスについても紹介してくれています

![Screenshot 2024-09-21 at 11.49.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263293/8d4077e1-4d0d-c0d1-d202-e60445af17ef.png)

日本語で聞いてみるとどうなるか確認してみましたが英語で返答がきました、残念
しつこく日本語でと命令してみましたがダメでした

![Screenshot 2024-09-21 at 11.51.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263293/996ea0af-12f1-7d89-cdaa-53d5793058d2.png)

コード行数を指定して実装方法を聞いてみましたが明確に言語などを伝えないと現状は利用できないように感じました。

![Screenshot 2024-09-21 at 12.30.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263293/11ecb8cf-918a-3aec-f669-abf8fe672ea5.png)

明確に Go 言語でと指定をします
実際のコードを変更してくれるわけではないのでこの辺りは純粋に Copilot に任せるのも一つかもしれません

![Screenshot 2024-09-21 at 12.31.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263293/aa2c4cdc-4eb1-702f-f138-cb4057233cc5.png)


内容としては以上になります。
Github Copilot を通してなおかつ様々なAIプロダクトに対して問い合わせができるのは非常に魅力的に感じて将来的なテレメトリデータからの改善まで生成AIが助けてくれると非常に開発を助けてくれそうです。

## お知らせ

:::note info
[New Relic株式会社のQiita Organization](https://qiita.com/organizations/newrelic)では、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。
:::


:::note info

今回の内容は無料アカウントの開設で無料でご利用頂けます。

[New Relic フリープランで始めるオブザーバビリティ！](https://qiita.com/ktst79/items/5ee74b34e6adb8a7a6fa)

:::
ResNet: 言わずと知れたCNNの標準技術

ディープラーニング分野において、Convolutional Neural Networks（CNN）は画像認識タスクで広く使用されています。その中でも、ResNet（Residual Networks）は、深いネットワークで発生する問題を解決し、現在のCNN技術の中でも標準的な技術となっています。本記事では、ResNetの基本的な仕組みとその革新的な技術について紹介します。

---

## 1. ILSVRC-2015とResNetの登場

ResNetは、2015年の**ILSVRC（ImageNet Large Scale Visual Recognition Challenge）**で登場し、大きな注目を集めました。ResNetは**152層**という非常に深いネットワークにもかかわらず、**3.57%**という低いエラー率を達成しました。

- **入力画像**: 256x256ピクセルのカラー画像
- **分類クラス**: 1,000クラス

ILSVRCでのResNetの登場は、ディープラーニングの発展において重要なターニングポイントとなりました。

---

## 2. Degradation問題と残差学習

### Degradation問題とは？

ディープラーニングのネットワークは、**層が深くなるほど性能が向上するはず**ですが、実際には**深いネットワークが浅いネットワークより性能が劣る**という現象が起こります。この問題を**degradation（劣化）**と呼びます。

### 残差学習（Residual Learning）

ResNetは、このdegradation問題を解決するために、**残差学習（Residual Learning）**を導入しました。

- 従来のネットワーク: \( y = H(x) \)
- 残差学習: \( y = F(x) + x \)

ショートカット接続により、入力 \( x \) を出力に直接加え、情報の伝達を補助します。これにより、深いネットワークでも学習が安定します。

```python
# 残差ブロックの構造（簡易）
def residual_block(x):
    F_x = conv3x3(x)
    return F_x + x  # ショートカット接続
```

---

## 3. ResNetの構造

ResNetは、「**残差ブロック（Residual Block）**」で構成され、これがネットワークの深さを支えます。各ブロックは次のような構造です。

- **ショートカット接続**: 入力データを次の層にそのまま渡す。
- **畳み込み層**: 特徴を抽出する役割を果たす。

### 残差ブロックの例

| 層 | フィルタサイズ | チャンネル数 |
|----|---------------|--------------|
| Conv1 | 7x7 | 64 |
| Conv2 | 3x3 | 64 |
| Conv3 | 3x3 | 256 |

---

## 4. ResNet-152の実装

ResNet-152は、非常に深い構造を持つネットワークであり、以下のような構造になっています。

- **入力サイズ**: 224x224x3
- **畳み込み層**: 7x7, 64フィルタ
- **残差ブロック**:
  - Res-A: 3ブロック
  - Res-B: 8ブロック
  - Res-C: 36ブロック
  - Res-D: 3ブロック
- **プーリング**: グローバル平均プーリング
- **出力**: Dense層 + Softmax

### 残差ブロックのフィルタ数

| ブロック | フィルタ数（Conv1） | フィルタ数（Conv2） | フィルタ数（Conv3） |
|----------|----------------------|----------------------|----------------------|
| Res-A | 64 | 64 | 256 |
| Res-B | 128 | 128 | 512 |
| Res-C | 256 | 256 | 1024 |
| Res-D | 512 | 512 | 2048 |

---

## 5. 技術的なディスカッション

ResNetは、多くの技術的進歩に基づいて構築されています。ここでは、特に重要な2つの技術を紹介します。

1. **バッチ正規化（Batch Normalization）**:
    - 各畳み込み層の後に適用され、学習の安定性が向上。
2. **He初期化（He Initialization）**:
    - 重みの初期化方法で、深いネットワークでも効果的に学習が進むように設計。

---

## 結論

ResNetは、**深いネットワークでも性能を維持し、勾配消失問題を解決**する革新的な技術です。現在の多くのCNNモデルは、このResNetのアーキテクチャを基盤としており、画像認識やその他のタスクで広く利用されています。ResNetは、ディープラーニングにおけるスタンダードとして、今後も重要な役割を果たすでしょう。

## 参考資料

- [CNN 紹介 "ResNet" 言わずとしれた CNN の標準技術が登場！](https://youtu.be/WslQrSO94qE?si=56M_GxVp-PT7F9bC)
Flutterの環境構築で沼ったこと備忘録 for Mac M3

# 環境
PC本体: M3 Mac book

# 全てを始める前に

macならHomebrew入ってますか？？
便利すぎるので先にそっち入れましょう！！！

https://www.kikagaku.co.jp/kikagaku-blog/homebrew-install-howto/

## インストール方法

↓mac用

https://blog.flutteruniv.com/flutter-entrance/

自分はこの記事に従ってやりました！いい感じ！

### .zshrcに書くディレクトリ

```jsx
**export PATH="$PATH:/Users/[自分のユーザ名]/development/flutter/bin"**
```

### **Android SDK Command Line Toolsの設定**

Android Studioを開いて、左上にある「Android Studio」というボタンから、

`Android Studio → Setting → Langages&Frameworks → AndroidSDK → SDK tools` 

を開き、Android SDK Command-line Tools (lastest) にチェックを入れ、右下の「OK」ボタンを押してインストール

### Xcodeインストール
![スクリーンショット 2024-09-09 22.58.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3820975/87573cd1-0680-ba2b-8326-fafa05348452.png)

初めて開いた時にこんな画面が出てきたら「iOS」の欄にもチェック入れといた方が後々楽です

## `flutter doctor` コマンドを実行してエラーが出たら

### **Xcode installation is incomplete; a full installation is necessary for　iOS development.**

初回起動時に「iOS」の欄にチェック入れ忘れたなら。。。

https://qiita.com/kobe_creation/items/0f225732d3bb62694563

**↑この記事の感じでインストール**

それでもまだ出るなら。。。

```jsx
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
```

この二つのコマンドを実行してみる。私はそれで解決した

## CocoaPods not installed.

下記コマンドを実行する

```jsx
brew install cocoapods
```

ものすごい長い難しそうな文字が流れますが無視でOK

もう一度 `flutter doctor` をターミナルで実行してみてください！

これで赤い項目がなければ完了！！！

お疲れ様でした！！
IAMポリシーのCondition要素について

AWSのセキュリティ設定において、IAMポリシーはアクセス制御の要となります。特にコンディション要素（Condition element）を活用することで、より柔軟で詳細なアクセス制御が可能になります。本記事では、IAMポリシーのコンディション要素についてわかりやすく解説します。

## コンディション要素とは？
コンディション要素は、IAMポリシー内でアクセス許可を付与または拒否する際に、追加の条件を指定するための要素です。
これにより、特定の状況下でのみアクションを許可または拒否するなど、アクセス制御をより細かく設定できます。

## コンディション要素の主な特徴
	•	柔軟なアクセス制御：リクエストの属性（IPアドレス、日時、認証方法など）に基づいてアクセスを制限できます。
	•	キーと値の組み合わせ：条件キー、条件演算子、条件値を組み合わせて条件を定義します。
	•	複数の条件の組み合わせ：AND条件やOR条件を使って、複雑な条件を設定できます。

## コンディション要素の構造
IAMポリシー内でのコンディション要素は、以下のように記述します。

```
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow" または "Deny",
      "Action": "アクション",
      "Resource": "リソース",
      "Condition": {
        "条件演算子": {
          "条件キー": "条件値"
        }
      }
    }
  ]
}
```
条件演算子の例

	•	StringEquals：文字列が等しい場合に一致
	•	IpAddress：指定したIPアドレスまたは範囲に一致
	•	DateGreaterThan：指定した日時より後の場合に一致
	•	Bool：ブール値が一致する場合に一致

条件キーの例

	•	aws:SourceIp：リクエスト元のIPアドレス
	•	aws:CurrentTime：リクエストの日時
	•	aws:MultiFactorAuthPresent：多要素認証の使用有無
	•	s3:prefix：S3オブジェクトのプレフィックス

## 具体的な例

例1：特定のIPアドレスからのアクセスのみ許可
```
{
  "Effect": "Allow",
  "Action": "s3:GetObject",
  "Resource": "arn:aws:s3:::my-bucket/*",
  "Condition": {
    "IpAddress": {
      "aws:SourceIp": "203.0.113.0/24"
    }
  }
}
```

例2：業務時間内（午前9時から午後5時）だけアクセスを許可
```
{
  "Effect": "Allow",
  "Action": "ec2:*",
  "Resource": "*",
  "Condition": {
    "DateGreaterThan": {
      "aws:CurrentTime": "2023-10-01T09:00:00Z"
    },
    "DateLessThan": {
      "aws:CurrentTime": "2023-10-01T17:00:00Z"
    }
  }
}
```

## コンディション要素を使用するメリット

	•	セキュリティ強化：アクセスを特定の条件に制限することで、不正アクセスのリスクを低減します。
	•	柔軟性：組織のポリシーやビジネス要件に合わせて、アクセス制御を詳細に設定できます。
	•	コンプライアンス対応：特定の規制や標準に準拠したアクセス制御が可能になります。
A5:SQL Mk-2 で応答が遅いSQLがタイムアウトする場合の対処【忘備録】

## エラーメッセージ
```
canceling statement due to statement timeout
```
## 対処
設定　→　オプション　→　SQLタブ
タイムアウト秒数を0（無制限）にする。（デフォルトは30秒）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810681/6dab38aa-11a7-6b6a-e495-a3167c8a835d.png)
## 注意点
A5:SQL Mk-2　を一度終了して、再度立ち上げないとこの設定が反映されない。
## おわりに
この記事がお役に立てれば幸いです。
さいごに弊社の紹介をさせて下さい。

「関わる人を全て幸せにしたい！！」[株式会社アイズ](https://iz-office.com/)
Powershell Tips


# 文字化け対策

以下でpowershell起動時に読み込まれるファイルパスが表示される
```powershell
$PROFILES
```
このファイルに、以下を追記
> [Console]::OutputEncoding = [System.Text.Encoding]::UTF8

# コマンド一覧

* エイリアス確認
```powershell
Get-Alias
```
* ファイル作成
```powershell
ni <ファイル名>
```

# grep除外

```powershell
git branch | ? {$_ -notmatch "\*"}
```
* ? : Where-Objectのエイリアス
* $_ : パイプラインで渡ってきたデータ群（１行分のテキスト）の現在のデータ

# 先頭の空白削除
```powershell
git branch | % { $_.TrimStart()}
```
* % : ForEach-Objectのエイリアス

# ファイル名/フォルダ名のみ出力したい

Get-ChildItemで出力できるが、ファイル/フォルダ名をコピペするには不要な情報が多すぎる　※dirでも同じ結果
```powershell
PS>Get-ChildItem


    ディレクトリ: （カレントディレクトリパス）


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2024/09/24     13:40                b
-a----        2024/09/24     13:40              0 a.txt
```

-Nameオプションを使う
```powershell
PS>Get-ChildItem -Name
b
a.txt
```
DiscordBOTテンプレート with Python

2024/09時点で最新の実装まとめ

## Pipfile
- 現時点においてはPycordの利用を推奨
```Pipfile
[packages]
python-dotenv = "*"
py-cord = "*"
tzdata = "*"
```

## .env
```.env
DISCORD_BOT_TOKEN=xxxxxxxx
TARGET_GUILD_ID=1234567890
LOG_DIR_PATH=.log
```

## 実装
- 投稿用に1ファイルにまとめたので適宜分割を
```Python
import os
from datetime import datetime
from zoneinfo import ZoneInfo

from dotenv import load_dotenv
from discord import Bot
from discord.commands import Option


# Initialize - start
load_dotenv()
DISCORD_BOT_TOKEN: str = os.getenv('DISCORD_BOT_TOKEN', '')
LOG_DIR_PATH: str = os.getenv('LOG_DIR_PATH', os.path.dirname(__file__))
TARGET_GUILD_ID: int = int(os.getenv('TARGET_GUILD_ID', '0'))

os.makedirs(LOG_DIR_PATH, exist_ok=True)
bot = Bot()
# Initialize - end


# Utility functions - start
def get_date_today_jst() -> str:
    # YYMMDD
    return datetime.now(ZoneInfo('Asia/Tokyo')).strftime('%Y%m%d')

def create_log_path(guild_name: str) -> str:
    return os.path.join(LOG_DIR_PATH, f"{guild_name}_{get_date_today_jst()}.log")
# Utility functions - end


# Slash command: sample1
@bot.slash_command(guild_ids=[ TARGET_GUILD_ID ], description='sample command 1.')
async def sample(
    context,
    param1: Option(str, 'parameter 1', choices=[ 'a', 'b', 'c' ], required=True),
    param2: Option(str, 'parameter 2', choices=[ 'x', 'y', 'z' ], required=False),
):
    await context.respond(f"{context.author.display_name}: {param1}, {param2}")

# Slash command: sample2
@bot.slash_command(guild_ids=[ TARGET_GUILD_ID ], description='sample command 2.')
async def foo(
    context,
):
    await context.respond("bar")


# Event listener: logging
@bot.event
async def on_message(message):
    if message.guild.id != TARGET_GUILD_ID:
        # ignore non-logging targets
        return
    if message.author == bot.user:
        # ignore bot messages
        return
    with open(create_log_path(message.guild.name), 'a', encoding='UTF-8') as log_file:
        log_file.write(f"{message.author.display_name}: {message.content}\n")


# Entry point
bot.run(DISCORD_BOT_TOKEN)
```
uiにダークモード設定を適応させた


```scs: .scss

:root {
  --dark-bg: #212121;
  --dark-color: #fafafa;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: (var(--dark-bg));
    color: (var(--dark-color));
  }
}
```
参考: https://getbootstrap.jp/docs/5.3/components/card/
[AWS #25] AWS Certificate Manager (ACM)

<!--
 <font color="c00000"></font> 赤
-->
## はじめに
こんにちは
今回はネットワーク分野である **<font color="c00000">「AWS Certificate Manager」</font>** について紹介したいと思います。
:upside_down:AWSでは　ACM(AWS Certificate Manager)を活用することでより簡単にSSL/TLS証明書を設定・運用ができます。仕組みについて一緒に見ていきましょう

## AWS Certificate Manager (ACM)
:upside_down: **ACM(AWS Certificate Manager)** とは、AWS内で**SSL証明書の発行**や発行したSSL証明書の <font color="c00000">**自動更新**</font>ができるサービスです。「プライベート認証機関サービス」を利用する場合を除いてACMの利用には料金が発生しません。そのため、証明書を発行や更新の費用を支払うことなくAWS内で運用しているWebサイトやサービスなどを常時[**SSL/TLS**](https://college.globalsign.com/ssl-pki-info/ssl-tls/)化することができます。
![AWS25_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/ab830f2d-3b33-6362-e1a5-c1196be294c1.png)
ACMはELB（Elastic Load Balancing）にも設定できます。設定すると、HTTPSで所有ドメインにアクセスできます。ACMによって得られる証明書の年次更新は <font color="c00000">**「自動」**</font>で行われます。その際にはサーバーを停止する必要も、**手動で設定し直す必要もありません。**


## SSL/TLS証明書って何ですか？:thinking:
:upside_down:「SSL/TLS証明書」は、通信の暗号化とサイト事業者の <font color="c00000">**安全性を証明してくれるもの**</font>です。この証明書を使用する事で、利用者の個人情報を盗み取られないよう暗号化により安全なインターネットサイトを提供できます。
## おわりに
今回のちょっとしたまとめになります。

:::note info
AWS Certificate Managerは、 <font color="c00000">**SSL/TLS証明書を作成、管理する**</font>サービスです
:::
最後までお読みいただきありがとうございました！
>>日頃より活用している参考書です。
>> **「参考書」**
[AWS認定クラウドプラクティショナー改定第3版（ACMは237ページ）](https://x.gd/19i6N)
>
> **「AWS公式サイト」**
[AWS Certificate Manager (ACM)](https://aws.amazon.com/jp/certificate-manager/)
>
> **「参考元」**
[ACM（AWS Certificate Manager）とは？](https://business.ntt-east.co.jp/content/cloudsolution/column-63.html)
>
UnityのTimelineでVideoPlayerを同期したい

Unityで動画の再生に合わせて字幕を表示したり、何かしらの演出を行いたいことがあります。

VideoPlayerをTimelineに入れてコントロールできるようなのですが、入れるだけでは動画を停止やシークした際にTimelineとの同期が取れず、試行錯誤したので対応策をまとめました。

### 環境
Unity：2022.3.26f1

---

まずは以下の設定を行います。

### Timeline

まず、TimelineでVideoを扱えるようにするため、Package ManagerからDefault Playablesをインポートします。

[Default Playables - Unity Asset Store](https://assetstore.unity.com/packages/tools/default-playables-95266)

これにより、Video Script Playable Trackが使用できるようになります。「New Add Track」を選び新しいトラックをTimelineに登録します。

次に、右クリックで「Add From Video Player」を選択して、作成したVideo Playerを追加します。

最後に、InspectorでClip Timingを動画の長さに合わせて調整します。

![スクリーンショット 2024-09-22 192114.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3166965/518853db-55b5-81e6-b417-63bb06581408.png)


### VideoPlayer

Render Mode：Camera Near Plane
Camera：MainCamera

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3166965/6ca3d2ac-09f8-9a26-892f-acbc992cc20a.png" width="500">


### PlayableDirector

UpdateMethod：Manual
Play On Awake：False

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3166965/bd6cea5d-44ec-c123-d705-46c71ccdf4d5.png" width="500">

---

設定ができたらTimelineを操作するスクリプトを書いていきます。

マニュアル操作になったPlayableDirectorへVideoPlayerの時間を入れてTimelineの時間を設定し、Evaluateを呼ぶことでTimelineを進めます。

```csharp:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Playables;
using UnityEngine.Video;

public class TimelineController : MonoBehaviour
{
    private PlayableDirector playableDirector;
    private VideoPlayer videoPlayer;

    void Start()
    {
        playableDirector = GetComponent<PlayableDirector>();

        videoPlayer = GetComponent<VideoPlayer>();
        videoPlayer.playOnAwake = false;
    }

    void Update()
    {
        playableDirector.time = videoPlayer.clockTime;
        playableDirector.Evaluate();
    }

    public void VideoStart()
    {
        videoPlayer.frame = 0;
        videoPlayer.Play();
    }
    public void VideoPause()
    {
        videoPlayer.Pause();
    }
}
```

これでVideoPlayerに合わせTimelineが動くようになりましたが、
Timelineに置いたSignal Emitterが反応しないことに気が付きました。
どうやらUpdateMethodがマニュアルの場合はイベントが呼ばれないようです。


---

調べているとこちらのページにたどり着きました。

https://discussions.unity.com/t/markers-and-signal-emitters-not-working-when-timeline-in-manual-update-method/227317/3


`Packages/Timeline/Runtime/Playables/TimeNotificationBehaviour.cs`
```csharp:TimeNotificationBehaviour.cs
if (info.evaluationType == FrameData.EvaluationType.Evaluate)
{
    return;
}
```

どうやらこの部分の処理をコメントアウトすればEvaluate()での呼び出しであってもSignal Emitterが動作するようです。
このくらいであれば今回は影響がなさそうなので変更してしまいましょう。

ただしこのファイルは`Library/PackageCache`内にあり、ここのファイルを書き換えても気が付いたら書き換え前の状態に戻されてしまいます。

そこで、`Library/PackageCache`の`com.unity.timeline@バージョン番号`のディレクトリを\Packages内にコピーします。末尾の@バージョン番号は削除しておきます。
Package Managerで確認してCustomとついていればうまくいっています。
これでファイルの書き換えが維持されるようになりました。


無事、Signal Emitterが反応するようになったかと思います。:tada:
【Query Builder】Filter : Preparing a lookup list by using a sub query (Cont.)

# Introduction #
This post needs to be read after reading this [post](https://qiita.com/Miki_Yokohata/items/78d752905db05fc224bf).
Please read it first then come to this post again.

I’m designing a subquery for the Account Code filter's lookup list, which will be dynamically generated based on a value passed to the subquery.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/a1c3b931-474b-4b63-d0fd-e87e930bc75c.png)

# The value passed to the Sub Query #
I use the value of **Account Type**.
The lookup list for the **Account Code** filter will be generated dynamically with what Account type is chosen.
Drug and drop **Account Type** field from `Selection` to `Filter`.
The `name` of **Account Type** filter is used for passing its value to the sub query.
Therefore, I rename it with more recognisable name.
Rename it with `parentAccountType`.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/9df0c1af-d870-87c1-9c81-aef6a3fb1ba9.png)


# The use of the value chosen in the parent query #
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/be758a3f-c685-a84d-7782-dbf5294f1465.png)
I assume the sub query for the **Account Code** filter in the parent query has already been defined like this.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/0164a1e1-f243-eea6-9888-529487950957.png)

Click `Edit Sub Query` button to open the sub query definition.
A fixed value `D` is set for Account Type filter.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/4d3a30e1-5d9e-8f96-87f0-fab30c7d43bb.png)

I replace `D` with the name of the Account Type filter in the parent query, i.e. `@parentAccountType`.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/738f1644-e60b-aac1-5fda-e90dcc70850a.png)
The account type chosen is passed here.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/40b25038-1508-8cc7-a657-98f663e88c10.png)

Click `OK` to save the query
Click `OK` to save the filter option dialog.

Now, I am with the parent query.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/2c57ff7c-9b95-df18-7f07-bccd5be80e84.png)
Click the Lookup button for the Account Type, and select 'P'.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/0fcd59a7-3dea-aa4a-1efd-5109c133042b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/ef595d37-4aff-6c67-2222-740dd9091cde.png)

Then open the lookup list for the Account Code. 
I can see account code for Account type is 'P' only are displayed in the list.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/1ac5243c-19a4-70b3-2d14-8c2d2468a166.png)

# Conclusion #
This is useful when we would like to reduce the number of items shown in a lookup list.
watsonx Code Assistant for Ansible Lightspeed の 試用版を使ってみる - ①Ansible Automation Platform 試用版の有効化


#### はじめに


Red Hat Ansible Lightspeed with IBM watsonx Code Assistant (Red Hat と IBM watsonx code Assistant for Ansible のAnsible専用コード生成AI) の試用版を使用する方法を確認しました。

前提として Red Hat Ansible Automation Platform (AAP) のサブスクリプションが必要です。


https://docs.redhat.com/ja/documentation/red_hat_ansible_lightspeed_with_ibm_watsonx_code_assistant/2.x_latest/html-single/red_hat_ansible_lightspeed_with_ibm_watsonx_code_assistant_user_guide/index#start-lightspeed-trial_lightspeed-user-guide


>前提条件
    Red Hat Ansible Automation Platform の試用版または有料サブスクリプションがある。 

この記事では Red Hat Ansible Automation Platform (AAP) サブスクリプション試用版の設定方法を確認しました。


---

#### 参照資料

Red Hat Ansible Automation Platform のトライアルは以下のリンクを参照ください

https://www.redhat.com/ja/technologies/management/ansible/infrastructure/trial



----

#### 設定手順ログ


Red Hatアカウント作成と試用版開始設定を実行しています。



"無料トライアルを使用する"を押します。

<br>


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/1b7dfab7-31da-af31-0493-51b5675504c4.png" width=70%>


<br>
<br>

ログイン画面に遷移します。

ログイン用のアカウントを持っていない場合は、"Register for a Red Hat account" を押して、アカウント作成を実施します。

ここではアカウント作成から実施しています。


![aap_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/f3cccaf2-cdff-a1b2-0718-1ccfa164ce63.png)


<br>
Red Hat Account作成の詳細項目を入力します。

<br>


![aap3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/02e163d8-8cc7-88d8-7ee4-29aec6aa245c.png)

<br>

* [Tips] Phone number は国際電話形式(日本だと +81 080xxxxxxxx)のように記載する必要があります。


<br>

入力後にアカウントを作成したメールにアカウントの有効化メールを受領したことを確認します。


![aap4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/3b1f25bc-113f-19ca-2347-b3a81c655874.png)


Link to email address verificationをクリックします。


<br>

以下の確認画面に遷移します。

Finish を押して終了します。

![app5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/15376736-edf7-5bcc-d4ec-0a0d4689f826.png)

以下の画面が出てアカウント設定が完了しました。

![app6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/651a4e44-b484-c974-74c0-b2aa549ea043.png)


アカウントができたら、再度トライアル画面に移動します。

https://www.redhat.com/ja/technologies/management/ansible/trial

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/6087ef93-6375-e76d-2b77-6ed9aeddf2c8.png" width=70%>

"無料トライアルを利用する" を押します。

ログイン画面で作成したアカウントでログインします。

![app7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/94c0d7c7-99a9-eb29-c1bc-bc531b9d73e0.png)



<br>

<br>


ログイン後の画面
③にAnsible Lightspeed を試す が存在しています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/15826fd7-f7ec-f30a-0f92-35081494fc0e.png" width=120%>


<br>
<br>

自動でx86版モジュールのダウンロードが始まりました。(今は使用しないのでダウンロードを停止しました)

![aap9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/8d3b62b0-70ca-b955-6e45-95da23f69f40.png)


<br>

試用版有効化後にメールが飛んできていました。

![mail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/ed0cff44-5056-bfb3-f0d3-6a44d365ab99.png)


<br>

AAP の試用版は 60日期限です。

<br>

続きは以下で記載しています。

https://qiita.com/c_u/private/a10e37aa2142ab7e8b2e





以上です。
VScodeでAWSのLightSailに接続しようとしたら少しハマった件

:heavy_check_mark:　AWSのLishtSailで立てたサーバにVSCodeのプラグイン「Remote - SSH」で接続しようとしたらちょっとハマり掛けたのでメモ

:bell:LightSailのサーバの立て方とか、VSCodeのプラグインの入れ方は今回は対象外

# 結論
LightSailからダウンロードしてローカルに保存していたSSHキーの権限が過剰だったっぽい

# 事象
VSCodeの「Remote - SSH」でLightSailにログインしようとするとエラーになる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821966/14e5ce8b-537e-3707-0860-11a7244f523f.png)

# 原因
SSHキーの権限。
どうやらSSHキーは権限の範囲が広すぎるとセキュリティ上の理由で接続を拒否するらしい。

# 対処
PowerShellからSSHキーの権限を適切なものに変更
``` PowerShell
icacls "{SSHキーのパス}" /inheritance:r /grant:r {ユーザ名}:R
```
{}の箇所を適切なものに置き換えてネ。

# 結果
VSCodeの「Remote - SSH」でLightSailにログインできるようになりました。

# あとがき
初投稿です。Qiita、書き方はこれから勉強していこうかなと思います。
もともとSESで働いていて、ちょっと前にとある企業の社内SEにジョブチェンしました。
今まで触れてこなかった分野にもどんどん触れて引き出し増やしたいと思います。
なにとぞよしなに。
AWS Step Functionsの実行結果をSlackへ通知する

# はじめに
<!-- 発端や概要を記載 -->
AWS Step Functionsの実行結果をSlackへ通知する手順について、以下の記事では、Step Functionsの実行結果を取得し、Slackに通知する方法を紹介します。この記事では、SNS（Simple Notification Service）とAWS Lambdaを使ってStep Functionsの実行結果をトリガーし、Slackに通知を送信する流れを説明します。

# 構成
![Untitled Diagram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/9b1ef79f-827b-10b4-3062-575ed7ba49fa.png)



# 目次
<!-- タイトルとアンカー名を編集 -->
1. [SlackのWebhookURLを取得](#SlackのWebhookURLを取得)
1. [SNSトピックの作成](#SNSトピックの作成)
1. [StepFunctionsの実行結果をSNSへ通知する設定](#StepFunctionsの実行結果をSNSへ通知する設定)
1. [Lambda関数を作成し、SNSから実行結果を受け取り、Slackに通知する](#Lambda関数を作成し、SNSから実行結果を受け取り、Slackに通知する)

<a id="#SlackのWebhookURLを取得"></a>
# SlackのWebhookURLを取得

Slackに通知を送るためには、SlackのIncoming Webhooksを利用します。
以下の手順でWebhook URLを取得します。

・[Slack API](https://api.slack.com/messaging/webhooks)を参考にアプリを作成。
・アプリを作成したら、``Incoming Webhooks``を有効にし、``Webhook URL``を生成します。このURLは後ほどLambda関数内で使用します。

<a id="#SNSトピックの作成"></a>
# SNSトピックの作成
AWS Step Functionsの実行結果を受け取るために、SNSトピックを作成します。SNSはStep Functionsの結果を通知する中間のメッセージブローカーとして機能します。

・AWSコンソールにログインし、SNSサービスに移動します。
・「トピックの作成」をクリックし、トピック名を入力してトピックを作成します。
・トピックが作成されたら、ARN（Amazon Resource Name）をメモしておきます。Lambda関数でこのARNを使ってSNSからの通知を受信します。


![スクリーンショット 2024-09-24 12.36.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/f3ceb5c8-32ce-0153-d3f9-6e72d496032b.png)

<a id="#StepFunctionsの実行結果をSNSへ通知する設定"></a>
# StepFunctionsの実行結果をSNSへ通知する設定

次に、Step Functionsが実行結果をSNSに通知するように設定します。

・AWS Step Functionsのコンソールに移動します。
・対象となるステートマシンを選択し、編集モードに移行します。
・Step Functionsの定義に``Catch``や``Finally``セクションを追加して、失敗や成功に応じてSNSに通知するように設定します。

生成されたコードは下記のようになります。
```
{
  "Type": "Task",
  "Resource": "arn:aws:states:::sns:publish",
  "Parameters": {
    "TopicArn": "作成されたARN",
    "Message": "Step Function完了しました"
  },
  "End": true
}
```

<a id="#Lambda関数を作成し、SNSから実行結果を受け取り、Slackに通知する"></a>
# Lambda関数を作成し、SNSから実行結果を受け取り、Slackに通知する

次に、SNSからのメッセージを受け取り、Slackに通知を送るLambda関数を作成します。

・AWS Lambdaのコンソールに移動し、新しいLambda関数を作成します。
・ランタイムにPythonを選択し、以下のようなコードを追加します。

```
import json
import urllib3

http = urllib3.PoolManager()

def lambda_handler(event, context):
    # SNSからのメッセージを取得
    message = event['Records'][0]['Sns']['Message']
    
    # SlackのWebhook URL
    slack_webhook_url = "https://hooks.slack.com/services/xxxx/yyyy/zzzz"
    
    # Slackに通知するペイロード
    slack_message = {
        'text': f"Step Functions Result: {message}"
    }
    
    # Slackにリクエストを送信
    response = http.request(
        'POST',
        slack_webhook_url,
        body=json.dumps(slack_message),
        headers={'Content-Type': 'application/json'}
    )
    
    # Slackへの通知結果をログに出力
    print({
        "status_code": response.status,
        "response": response.data
    })

    return {
        'statusCode': 200,
        'body': json.dumps('slack通知')
    }
```

最後にStep Functionsを実行し、正常に動作しているか確認します。
zig の使い方

zig を使ってみました。

## Ubuntu 24.04 にインストール

```bash
sudo snap install zig --classic --beta
```

バージョンの確認

```text
$ zig version
0.13.0
```

## プログラム

```zig:hello_world.zig
const std = @import("std");

pub fn main() !void {
    const stdout = std.io.getStdOut().writer();
    try stdout.print("Hello, {s}!\n", .{"world"});
    try stdout.writeAll("Zigg\n");
    try stdout.writeAll("こんにちは\n");
    try stdout.writeAll("今日は良い天気です。\n");
}
```

## コンパイル

```text:Makefile
hello_world: hello_world.zig
	zig build-exe hello_world.zig
clean:
	rm -f hello_world hello_world.o
 ```

```bash
make
```

```text
$ make
zig build-exe hello_world.zig
```

## 実行

```text
$ ./hello_world 
Hello, world!
Zigg
こんにちは
今日は良い天気です。
```
SlackBOTテンプレート with Python

2024/09時点で最新の実装まとめ

## Pipfile
```Pipfile
[packages]
python-dotenv = "*"
slack-bolt = "*"
tzdata = "*"
```

## .env
```.env
SLACK_APP_TOKEN=xapp-xxxxxxxx
SLACK_BOT_TOKEN=xoxb-xxxxxxxx
TARGET_CHANNEL_ID=xxxxxxxx
LOG_DIR_PATH=.log
```

## 実装
- 投稿用に1ファイルにまとめたので適宜分割を
```Python
import os
import re
from datetime import datetime
from zoneinfo import ZoneInfo

from dotenv import load_dotenv
from slack_bolt import App
from slack_bolt.adapter.socket_mode import SocketModeHandler


# Initialize - start
load_dotenv()
SLACK_APP_TOKEN: str = os.getenv('SLACK_APP_TOKEN', '')
SLACK_BOT_TOKEN: str = os.getenv('SLACK_BOT_TOKEN', '')
LOG_DIR_PATH: str = os.getenv('LOG_DIR_PATH', os.path.dirname(__file__))
TARGET_CHANNEL_ID: str = os.getenv('TARGET_CHANNEL_ID', '')

os.makedirs(LOG_DIR_PATH, exist_ok=True)
app = App(token=SLACK_BOT_TOKEN)
# Initialize - end


# Utility functions - start
def get_date_today_jst() -> str:
    # YYMMDD
    return datetime.now(ZoneInfo('Asia/Tokyo')).strftime('%Y%m%d')

def create_log_path(channel_id: str) -> str:
    return os.path.join(LOG_DIR_PATH, f"{channel_id}_{get_date_today_jst()}.log")
# Utility functions - end


# Message listener: sample1
@app.message(re.compile(r'aaa|bbb'))
def echo(message, say):
    say(f"<@{message['user']}> {message['text']}")

# Message listener: sample2
@app.message(re.compile(r'foo+'))
def on_foo(message, say):
    say("bar")


# Event listener: logging
# MUST be placed after message listeners
@app.event('message')
def logging(event, client):
    if 'subtype' in event:
        # ignore system messages
        return
    if event['channel'] != TARGET_CHANNEL_ID:
        # ignore non-logging targets
        return
    user_info = client.users_info(user=event['user'])
    user_name = user_info['user']['name']
    if user_name.endswith('bot'):
        # ignore bot messages
        return
    with open(create_log_path(TARGET_CHANNEL_ID), 'a', encoding='UTF-8') as log_file:
        log_file.write(f"{user_name}: {event['text']}\n")


# Entry point
if __name__ == '__main__':
    SocketModeHandler(app, SLACK_APP_TOKEN).start()
```
気をつけろ！奴らはまとめてやってくる

# はじめに

`setXXX` を使って状態を更新するとき、それがトリガーになって再レンダリングします。`setYYY` や複数の状態を更新するときは呼ぶたびに再レンダリングするのでしょうか？

# React はまとめて更新する？

そうなんです。ドキュメントによると状態の更新をキューイングしてまとめてやってくれるようです。バッチ処理といいます。

https://ja.react.dev/learn/queueing-a-series-of-state-updates

# でも例外もあるよ！

何でも例外はあります。例えば fetch や setTimeout を使っている処理だとキューイングすることなく都度レンダリングします。

## 再レンダリングが呼ばれただけするパターン

```react
const delaySetValue1 = async () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(50)
    }, 1000)
  })
}

const delaySetValue2 = async () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(90)
    }, 1000)
  })
}

const delaySetValues = async () => {
  const newValue1 = await delaySetValue1()
  setValue1(newValue1) // ここでレンダリング 1 回目

  const newValue2 = await delaySetValue2()
  setValue2(newValue2) // ここでレンダリング 2 回目
}
```

`setValue1` と `setValue2` を関数の後ろに寄せてあげることで回避することができます。

```react
// その他は変わらないため省略

const delaySetValues = async () => {
  const newValue1 = await delaySetValue1()
  const newValue2 = await delaySetValue2()

  setValue1(newValue1) // 処理がまとまるので 1 度にレンダリングしてくれる
  setValue2(newValue2)
}

```

# 終わりに

ひとつのコンポーネントに状態がひとつな場合は少ないはずなので、いくつかの状態更新があるときはバッチ処理は心強い味方ですね。ただ、例外もありバッチ処理にならないこともありますが対策も簡単ですのでそんなに気にならないと感じました。

# JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？

気になる方はぜひHPからお願いします👇

https://projisou.jp
社員側でインターンシップに参加しよう！

## はじめに
この夏、弊社のインターンシップに、初めて社員側として参加しました。:sunflower: 
参加して良かったという思いが強くあり、この記事を書きました。

## この記事の要約

初めて社員側としてインターンシップに参加して、良かった点を5つ紹介します！
1.  自分が学生側で参加したインターンシップの裏側を知ることができた
1.  レビューのトレーニングになった
1.   学生の成長を見届けられる
1.   会社がどのような人材を求めているか分かる
1.   普段と全く違う仕事をするので、新鮮さを感じられる

## 私のスペック
- 2022年入社（入社3年目）
- SRE
- 学生時代に弊社のインターンシップに参加し、「入社したい！」という気持ちが高まった

## インターンシップ概要
- 3日間開催
- 社員は、学生が行ったワークのレビューやサポート、評価を行う


## 参加して良かったこと

### 1. 自分が学生側で参加したインターンシップの裏側を知ることができた

私は学生の時に、このインターンシップに参加していたので、開発職の社員の方がどのように動いているのか、何を見ているのか、人事の方は何をされているのかを知ることができて、とても興味深かったです。

私は入社3年目ですが、私のように入社年次が若いときに行うと、学生時代のインターンシップの記憶とすり合わせながらできて、より楽しめるのではないかと思います。

### 2. レビューのトレーニングになった

限られた時間の中で、複数の学生の成果物や姿勢を評価する経験は、普段の仕事ではなかなかないので、とても良い経験となりました。

既に何度もインターンシップに参加されている社員の方や人事の方に、評価の付け方や観点を教えていただき、非常に勉強になりました。

### 3. 学生の成長を見届けられる

3日間という短い期間でありながら、その中でどんどん成果物がブラッシュアップされていったり、積極的な発言が増えたり、チームワークが上がっていったりと、学生の変化を見届けられたのは、とても興味深い経験でした。

もちろん普段、周りのチームメンバーに対して成長を感じることはありますが、インターンシップでは、3日間付きっきりで、成果物やワークの様子を見ているので、よりダイレクトに変化を感じられたと思います。


### 4. 会社がどのような人材を求めているか分かる

インターンシップでは、学生の評価を行うので、事前に細かい評価観点の共有がありました。これを見ることで、弊社に求められる人材がより具体的に理解できました。

普段働いている中でも意識してはいましたが、評価観点の共有→学生の取り組みや成果物をチェック→評価という一連の流れの中で、弊社の求める人物像をより強く意識することができて、良い経験となりました。

### 5. 普段と全く違う仕事をするので、新鮮さを感じられる

インターンの仕事は、朝から夕方まで分刻みのスケジュールが敷かれていて、人と話しながら進めていくタイプの仕事が多いので、普段の開発とは違って新鮮です。

普段いるチームから飛び出して、違うタイプの仕事をすることは、良い気分転換になりますし、学ぶことも多かったです。

### おまけ

インターンシップは土日祝に開催されたので、休日出勤で働きました！
他の社員が休暇を楽しんでいる中、インターンシップ参加社員でお互い鼓舞しながら働いたのも良い思い出です :island: （もちろん後日振替休暇でしっかり休みました）

## まとめ

社員側としてインターンシップに参加してよかったことを5点紹介しました。

学生さんとお話ししたり、いつもと違うタイプのお仕事をしたりするのは、シンプルに楽しいなと思ったので、少しでも興味がわいた方は参加してみるのをお勧めします。私も機会があればまた参加したいと思います。

以上です。ありがとうございました。
iPhoneのホーム画面をMacで編集する方法

# 概要および手順
iPhoneに好き勝手アプリを入れてカオスになってしまったものの、指でホーム画面編集の操作をするのが苦痛なMacユーザの方へ
1. Apple Configuratorをインストール＆起動します
1. iPhoneをMacに有線接続するとデバイスがApple Configuratorの画面に現れるのでクリックして選択状態とします
1. 上部メニューからアクション>変更>ホーム画面のレイアウトを選択することで編集が可能になります

# 資料
- Apple Configuratorでデバイス情報を編集する
    - https://support.apple.com/ja-jp/guide/apple-configurator-mac/cadbf9c2a0/mac
- Apple Configurator
    - https://apps.apple.com/jp/app/apple-configurator/id1037126344
Stylelintのmedia-feature-name-no-unknownについて

## stylelintを適用した際に
　stylelintを使って、既存のCSSの最適化？を行うことによって保守や統一感を出す作業を行ってみた。その際に、メディアクエリの`min-width`や`max-width`が、`width >= 〇〇px`などに変換されてしまったので、それをスルーしてstylelintを実行するようにしてもらうようにした。
 　まず必要なパッケージとして
  ```bash
  npm i stylelint stylelint-scss -D
  ```
  をしてインストールする。
  これをインストールすることによって後述するstylelintのルールが使用できるそうな。

  ## stylelintの設定ファイル
  　設定ファイルには、`.stylelintrc.json`や`.stylelint.config.js`などの書き方があるらしいが、ChatGPTに聞いたところ、自分のプロジェクトに合わせて柔軟に対応すれば良いらしいが...今回はその点はスルーということで。

  ```.stylelintrc.js
  module.exports = {
  plugins: [
    'stylelint-scss'
  ],
  rules: {
    'media-feature-name-no-unknown': [
      true,
      {
        ignoreMediaFeatureNames: ['min-width', 'max-width', 'min-height', 'max-height'],
      },
    ],
    'media-feature-range-notation': null,
  },
};
  
  ```

  この状態で、 `npm run stylelint **/*.scss **/*.css --fix`をすることによって恐らくメディアクエリの条件がそのまま(max-width)や（min-width）のままになるようだ。
  rulesの中がない状態で、stylelintを実行すると`width >= 〇〇px`などに変換されてしまうようです。
フロントエンドエンジニアとは

## WEB概要
### PC・スマホ(人間がみやすいように整形)
ーブラウザ
 　ーURL
 　ーHTML
 　ーCSS
 　ーJavaScript

**↑HTTPリクエスト↑**
**↓HTTPレスポンス↓**

### サーバー(ブラウザが見やすいように整形)
ーAWS・GCP(クラウドサービス)
ーアプリケーション
 　ーjava, PHP, Ruby
ーデータベース
 　ーMySRL
 　ーPostgreSQL

![スクリーンショット 2024-09-24 12.03.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3870482/a2716036-11b5-7fe2-68cf-af9da307be83.png)
(QA) Db2 for i は表スペースが無用というのは本当ですか？

## Q. Db2 for i は表スペースが無いと聞きましたが本当ですか。

A. YES.です。

順を追ってご説明します。
[こちらの記事](https://qiita.com/gomAnomalocaris/items/fb59b713053e9e246fda)にも説明をしております。

## Db2ファミリーは大きく3系統あります

IBM Z用、オープン系（LUW : Linux, Unix, Windows)、そしてIBM i 用があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/8b09fed5-d510-91ed-f1a8-c0806da45d22.png)

大昔は其々の製品で使用できるSQLその他に差異がありましたが、近年ではアプリケーション開発における差異（使えるSQL構文やら、分析用ツールやら）は共通化が進んでいます。

ただ、稼働するプラットフォーム、OSの特性がそれぞれ異なるので、掲題Qのような運用面やアーキテクチャー面では差異が存在します。


## Db2 for i のアーキテクチャー上の特徴

下記のように ***Db2 for i はOS,IBM i マイクロコード層で実装されているのが特異点です。***

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/0e860633-f110-a1d3-4ad1-cc0d9d8f6c51.png)

Db2 for i 以外のRDBMSは基本、OSより上位層のミドルウェアとして動作します。ここが、Qにある、ほかのRDBMS（データベース）では表スペースが必要な理由になってきます。
Db2 for i はIBM i OSの一機能＝同一レイヤーで動作しています。
なので、IBM i OSをIPLするとDb2 for iも起動（IPL)済ですし、Db2 for i にログインするユーザーはIBM i OSのユーザーと同一ですしセキュリティ全般もIBM i OSログイン時に共通で管理されます。


## 本題：Db2 for i のストレージ管理に表スペースは不要で、IBM i OSの管理しているストレージをそのまま利用できます

理由は、Db2 for iがIBM i OSと同一だからです。
表スペースはOSが管理しているストレージをRDBMSに切り出しして、RDBMSで勝手に管理しやがれ！というものです。ので、表スペース内の管理はOSは手出ししないのですが、OSが管理する物理ストレージとの整合性やら変更の反映やらは相互に連携しないといけないわけです。これが面倒（工数・管理が要だったり）だったり、パフォーマンスチューニングが必要だった理になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/63aca4ee-51c0-8d31-2c1b-e2af22e8ad9e.png)


## Db2 for i でのストレージ管理はIBM i OSのディスク使用率だけでよい

下記の5250コマンドにある、システムASP使用率% はIBM i OSの管理しているストレージ領域全体の使用率です。Db2 for iのテーブルその他オブジェクトもここに含まれています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/e88921a1-8fde-1433-b828-1feba1fdfcaf.png)


## 表スペースが無い＝データベース物理設計が無い メリットは意外と大きいと思います。
押印漏れです！Teachable Machineで確認

こんにちは、Miyuです。私は某小売業の会社で人事を担当しています。今回Teachable Machineで回収書類の押印漏れチェックを確認することにしました。

# 背景
私の業務のひとつに「勤怠対策書の回収」というものがあります。これは毎月勤怠関係でルールを守れなかった人・店舗（例えば、社会保険に入っていないパートさん・アルバイトさんに社会保険加入条件に当てはまるまで（8,800円以上の給与かつ月87時間以上労働）働かせたなど）に対策書、簡単にいうと反省文みたいなものを提出してもらうものになります。下の写真は個人情報含んでしまうので黒塗りしており見にくいかと思いますが、実際提出してもらっている対策書のひとつになります。

![InkedIMG_6265.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3836509/859bcb87-a746-905d-352d-cb0db78da4c5.jpeg)

私が所属している人事総務部が管理している店舗数は60店舗ぐらいで毎月80~100名の方が回収対象者となっています。すべての項目を記載・押印していただき私宛に提出のフローとなっていますが、たまに右上の「部室店長」からの押印がない書類を提出されることがあります。毎月その度に店舗へ返送しまた再送してもらう手間を省くため今回パッとみて押印漏れてないか確認できるようなものを作ってみたいと思い今回作りました。

# 作ったものはこんな感じ
https://x.com/miyupck373712/status/1838403829118964208

:::note info
押印あり・なしで反応させてますが、印鑑のインクが薄かったせいか「問題なし」の反応がすこし悪かったです。
:::

## 使用したツール
+ Teachable Machine
+ Codepen

# 制作方法
まず[Teachable Machine](https://teachablemachine.withgoogle.com/ "タイトル")にログインして画像で学習を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3836509/cf6fb103-a32b-bef4-60aa-ff9f6d9467d1.png)
**上記のように画像をウェブカメラで撮影しサンプルをあつめます。**
**次に横の「モデルをトレーニングする」ボタンを押します。**
トレーニングが完了したらプレビューで見ることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3836509/dd902234-0183-0a30-d40c-2d1f7120cc5d.png)

**そのあとプレビューの横にある「モデルをエクスポートする」ボタンを押し、リンクをコピーします。**
![スクリーンショット 2024-09-24 113922.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3836509/885f0c7d-d638-942e-263e-29415983527c.png)


# やりたかったこと・あとがき
本来は押印だけでなく他の記載欄も無記入で提出されることもあるのでサンプルを集めて実施目標でしたが、押印同様にインクの濃い・薄いなど筆圧等でトレーニングがうまく行えず、サンプルのデータだけ重くなり保存できないなどの不都合が発生したので断念しました。今後は業務の洗い出しをしつつ店舗で使える判別アプリが制作できるといいなと思っています。
MD770+キーリマップ（PowerToys）で使用してみた

肩こり・姿勢改善のために初めての分離型キーボードを試す。
レンティオでMD770お借りしたのだが　矢印キー配列　がいけてなかったので変更してみた。

https://apps.microsoft.com/detail/xp89dcgq3k6vld?hl=ja-jp&gl=JP
より、Microsoft PowerToysをインストールする。

左から、
　Left
　Up
　Down
　Right
の順に変更できたので、いくぶんか自分の感覚に沿ったものにできた。

以下、実際の設定例。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353316/e9c0e623-d25c-0f3e-6bc0-1fa2e30cf4f3.png)

本当は　デフォルト状態のShiftキーのところにUpを配置したいが、そうするとShiftキーがどこにも入らなくなってしまい断念しました。
打鍵部位のサイズの違う、差し替え用のキーキャップとかあるのかな？探してみるか。
欧州CRA解説 第2回：対象及び適合性評価

________________________________________
# 欧州CRAの対象製品
第一回では、欧州CRAの概要と制定の背景を中心に解説しました。第二回は、欧州CRAの対象となる製品の種類、及び適合性評価について説明します。

欧州CRAの規制対象製品は、「市場で入手可能なデジタル要素を組み込んだ製品で、使用時にデバイスやネットワークと直接または間接的にデータをやり取りするもの」と定義されています。

具体的には、既に専用規程が存在する自動車、航空、医療分野などを除いた、「デジタル要素を持ちEU圏内で販売されるすべての製品」が適用対象です。

EU圏内で販売される製品は、市場投入から販売後の5年間、もしくは使用期間が5年未満のものは製品寿命まで、セキュリティ・脆弱性対応が義務付けられます。

対象となるデジタル製品は、「重要なデジタル製品以外」、「重要なデジタル製品：クラスⅠ(低リスク)」、「重要なデジタル製品：クラスⅡ(高リスク) 」の3つに区分され、それぞれに取得必要な認証が定められています。

**【CRA適用対象となるデジタル製品の分類】**

| 対象製品分類 | 重要なデジタル製品以外 |   重要なデジタル製品クラスⅠ（低リスク） |   重要なデジタル製品クラスⅡ（高リスク）|
|:-----------------|:------------------|:------------------|:------------------|
| 特徴 |クラスⅠ・Ⅱ以外 |認証管理システムやVPNなどの基本的なセキュリティ機能を持つデジタル製品が対象 | ファイアウォールや侵入防止システムなど、サイバー攻撃による重大な影響を防ぐデジタル製品が対象|
| 主な対象製品 |原文の中には、具体的な製品の記載はないが、一般的な解釈として以下の製品が挙げられる<br>・スマート家電（例：冷蔵庫、洗濯機）<br>・エンターテイメント製品（例：テレビ、ゲーム機）<br>など|・ID管理システム<br>・VPN製品<br>・ネットワーク管理ツール<br>・セキュリティ情報およびイベント管理（SIEM）システム<br>・ルータ、スイッチ<br>・セキュリティ機能を備えたスマートホーム製品<br>・オペレーティングシステム（OS）<br>など|・ハイパーバイザー、コンテナランタイムシステム<br>・ファイアウォール<br>・侵入検知/防御システム(IDS/IPS)<br>・耐タンパー性マイクロプロセッサーやマイクロコントローラ<br>など|

# 適合性評価と罰則
製造事業者は、欧州CRA附属書Ⅰに定める必須要件である「セキュリティ特性要件」および「脆弱性処理要件」を満たしていることを証明するために、製品の設計、開発、製造、および脆弱性の対応プロセスについて技術文書を作成し、市場投入前に第三者機関から適合性評価を受ける必要があります。

下記の通り、欧州CRAにより分類されているデジタル製品の重要性、リスクの度合いによって、自己適合宣言か第三者機関による認証を必要とするかが決定されます。

+ 「重要なデジタル製品」以外は、自己適合性宣言か第三者認証かを選択可能
+ 「重要なデジタル製品」は、クラスII（高リスク）は第三者認証、クラスI（低リスク）かつサイバーセキュリティ認証制度(EUCC)や欧州整合規格(EN規格)に準拠していない場合は第三者認証の取得が必要

**【適合性評価】**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885037/8c67261a-90ff-bbd2-01f8-636b6f2a95f6.png)

前述の附属書Ⅰに規定されたサイバーセキュリティの必須要件、および規定された義務に違反した場合、罰金として最大1,500万ユーロ（約24億円）またはグローバル年間売上高の2.5%のいずれか高い方を科される可能性があります。
________________________________________
第二回では、欧州CRAの対象及び適合性評価について解説いたしました。第三回では、欧州CRAの適用対象製品に求められるセキュリティ特性要件/脆弱性対応の詳細について、解説予定です。

:::note warn
※本内容は記事作成時点での最新の欧州CRA法を参照していますが、今後法案が修正され内容が変更、もしくは新たな記載が追加される可能性があります。また、法律の専門家ではないため、法の解釈が誤っている可能性もあります。本法の内容について参照する際は必ずご自身で内容をご確認ください。
:::
ざっくりぬるーくAWSとGoogle Cloudサービス対照表

## :sunny:はじめに
皆さん「**Google Cloud**」ご存じでしょうか。
今は「GCP」ではなく「**Google Cloud**」と呼ぶそうですよ。「あぁGCPですね」とイキって恥かきました:flushed:。
さて、そんな私はクラウドといえばAWSのちょこっとした知識しか持ち合わせておりません。
そのAWS専用機の私が、最近訳あってGoogle Cloudの案件に携わることが決まり、急ピッチで基本的な知識だけでも！と、頭に詰め込んでいるところです。
 
## :pencil2:かるく勉強した結果
分かってきたのは、「一から実践レベルまで知識をつけるのは無理！時間が足りない！」と、いうことでした。
ですが、軸になる思想や得手・不得手の違いはあれど、クラウドのメリットやデメリットは共通ですし、ユースケースも似通っているということもわかってきました。

なので、AWSの**コレ**はGoogle Cloudの**アレ**!といった覚え方で何とか乗り切ろうと思い、私なりにサービスの対照表を準備しました。
細かく言えば違うんでしょうが、まぁやりたいことはほぼ一緒だろう。くらいの気持ちで生ぬるい目で見ていただければ幸いです:bow_tone1:

## :page_facing_up:サービス対照表
| AWS                                   | Google Cloud               | 説明                                                      |
|---------------------------------------|----------------------------|-----------------------------------------------------------|
| S3                                    | Cloud Storage              | オブジェクトストレージ                                     |
| RDS                                   | Cloud SQL                  | リレーショナルデータベースサービス                         |
| Aurora                                | Cloud Spanner              | 新世代データベースサービス                                 |
| Redshift                              | Google BigQuery            | DWH                                                       |
| EC2                                   | Compute Engine             | 仮想マシン                                                 |
| ECS・EKS                              | Kubernetes Engine          | コンテナサービス                                            |
| API Gateway                           | Apigee                     | APIGateway                                                 |
| Lambda                                | Cloud Functions            | サーバレスな簡易的アプリ実行環境                           |
| Fargate・App Runner                   | Cloud Run                  | サーバレスなコンテナ実行環境                               |
| AWS Batch                             | Batch                      | バッチ                                                    |
| QuickSight                            | Looker Studio              | BIツール                                                   |
| AWS Glue                              | Cloud Data Fusion          | ETLサービス                                                |
| AWS IAM                               | Cloud IAM                  | 認証認可等権限管理するサービス                             |
| AWS WAF                               | Google Cloud Armor         | ウェブアプリケーションファイヤーウォール                   |
| GuardDuty, Security Hub               | Security Command Center    | セキュリティ管理                                           |
| Virtual Private Cloud (VPC)           | Virtual Private Cloud (VPC)| 仮想のネットワーク空間                                     |
| AWS VPN                               | Cloud VPN                  | インターネットVPNサービス                                  |
| Direct Connect                        | Cloud Interconnect         | 専用線サービス                                             |


## :ramen:〆
1つ覚えればもう1つはなんとなく理解した感覚になれて、お得な気分に浸れます。
少しでも私と同じ境遇の方のお役に立てれば。
学生エンジニアが歯医者とマーケターと一緒に初めてハッカソンに参加した話

# はじめに
こんにちは！来年からCyberAgentでiOSエンジニアになる、25卒のりゅうです！

今回私たちのチームは、ハッカソン初出場で、見事予選突破することができました！
本選は来月ですが、予選だけでもとっても楽しく、自分のためにも残しておきたいと思い、執筆しました。

# 参加したハッカソン
### 概要
今回私たちは、Qiita Hackathon 2024の予選に参加しました！

https://qiita.com/official-campaigns/hackathon/2024

予選・本選ともに2日間の日程で行われます。

予選では81組のチームが参加したため、A・Bブロックの２つに分かれての発表でした。
その内、各ブロック5組が本選に進出できるため、本選は10組で戦います。

### 審査基準
以下の4つの評価項目があります。

|評価項目|説明|
|--------|----|
|課題設定|テーマに沿った課題を設定している作品であるか|
|課題解決|課題解決や価値提供をしている作品であるか|
|技術力|高度な技術が使われ、優れたUXを提供している作品であるか|
|プレゼンテーション|説得力のある内容を時間内に伝えられているか|

### テーマ
今回のハッカソンのテーマは「オープン」でした！
抽象度が高く、発想力が求められるテーマで、かなり苦戦しました笑
他のチームの方々もアイデア出しから苦戦しているようでした。

# チームメンバー
地元の友達と3人で出場したため、チーム名は「じもと」にしました！
また、2日間とも大学の教室を貸し切って、オフラインで作業しました！

チームメンバーは、非エンジニア２人とエンジニア1人の3人です。
1人は歯医者、もう1人はマーケターという、2/3が非エンジニアということもあり、技術に縛られることなく、ユーザビリティを重視できました。

# 予選の流れ
Day1の10:15にテーマが発表され、Day2の13:20に資料提出のため、約27時間の戦いでした。

予選の流れを「アイデア出し」「開発」「パワポ作成」の3フェーズで説明します。

### 1. アイデア出し→5h
今回はテーマが「オープン」という抽象度が高いものだったため、アイデア出しがかなり重要だと考えて、長めに議論しました。

白熱した議論の結果、「オープン」を「物理的なドアをオープンする」といった考えのもとプロダクトを考えました。
甘党の男性が一人でパンケーキ屋には行きずらい（オープンできない）といった課題設定をして、誰かと一緒にならスイーツ店に行けると思い、「スワイプだけで誰かと一緒にスイーツ店に行けるアプリ」を開発することになりました。

![最新の写真を表示 4.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456384/85bf571d-ded4-a40a-bfd3-bc7e4056807d.jpeg)
白熱した議論の様子

### 2. 開発→12h
メンバーの中にエンジニアは自分だけだったため、UIからDB構造まで自分で考える必要がありました。ただ、今まで個人開発でAppStoreに4本公開しているということもあり、1人で開発するのは慣れていました。とはいっても、もう一人くらいエンジニアがいた方がスムーズに開発できたと思います。。（実はもう一人誘ってたけど、予定が合わずに断念、、）

![スクリーンショット 2024-09-24 午前12.52.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456384/c967b4e2-5cf8-0cc9-7e28-5f7eaa19b62f.png)
画面構成図

#### 2-1. 開発で工夫した点
今回の審査基準にUI/UXを評価する項目もあったことから、UIの作成には時間をかけました。開発したアプリには、マッチングアプリのスワイプ画面のようなスワイプ画面があり、そのUXを懲りました。

#### 2-2. 技術構成
また、短時間での実装のため、DB構造や使用したAPIはできる限りシンプルにしました。

![スクリーンショット 2024-09-24 午前12.32.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456384/b3a398ed-d215-3a4f-2956-8a77a8c9dce9.png)
技術構成図

#### 2-3. データフロー
①「スイーツ」をキーワードにホットペッパーグルメのAPIから店舗情報を取得します。
② スワイプ画面で右スワイプしたデータをFirestoreに保存します。
③ Firestoreに好きな店舗データがある場合は、その店舗情報をもとにGeminiが好きなスイーツを予測します。
④ その好きなスイーツデータをホットペッパーグルメのAPIのキーワードに設定して、店舗情報を取得します。

### 3. パワポ作成・発表練習→4h
審査基準に「プレゼンテーション」も含まれていたため、「インパクト」と「わかりやすさ」を重視してパワポを作成&発表しました。

[発表資料はこちら！](https://www.canva.com/design/DAGRYPCFaVE/0RlOHfwGnW9Ah_FVbRTS1Q/view?utm_content=DAGRYPCFaVE&utm_campaign=designshare&utm_medium=link&utm_source=editor)

# 結果
見事、予選通過しました🥳
他のチームのプロダクトも素晴らしく、本選考でもハイレベルな戦いが予想できます。
本選も全力で挑もうと思います！！！

# 最後に
この記事がよかったら「いいね」を押していただけますと、励みになります！！！