OmniAICreator/Qiita-1.07M huggingface dataset:
Bootstrap + GitHub Pages でサイトを作る

オープンハードカンファレンスの久しぶりの開催に向け、改めてイベントサイトを作ることにしました。
旧いオープンハード化ファンレンスページは WordPress を使っていたのですが、新たに git を使い、静的サイト構成にします。

今回は使いやすい GitHub Pages でテストしてみました。

# GitHub 上でレポジトリを構成する

まずはレポジトリを作成

https://github.com/nanbuwks/oshwc.git

## bootstrap のテーマをダウンロード

https://startbootstrap.com/themes
から、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/410ba362-997b-407d-b7a4-83ac2cba22bc.png)

今回は、Clean Blog を選んでみました。

レポジトリのルートに展開し、add/commit/push

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/1f4ce448-f622-46d6-b652-01df3fde4b28.png)

# GitHub Pages を使ってみる

「Settings」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/2a588fb9-0d6c-4bac-bc22-fcbde2ea9419.png)

「Pages」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/9a0587ef-63b8-4759-aaca-f87bd0e72777.png)
もし、以下のように「Upgrade or make this repository public to enable Pages」と表示されている場合は「Upgrade」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/1c26863c-aeec-4d04-88c9-14d4cd48a934.png)
「Deploy from a branch」を押して、「GitHub Actions」を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/6938c5f5-3d3f-4b10-87f0-c6acd47d057e.png)
「Static HTML」を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/08b7e737-5e7a-4030-bc44-1b95d2c731e2.png)
もし、以下のような表示になった場合はそのまま「commit changes...」→ 「Commit changes」で進めて、改めて「Settings」→「Pages」を表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/4cf88b03-5e30-4899-a906-94dab0c1fe5c.png)

「Your site is live at ・・・」で示されているリンクに飛びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/5a3e47e7-6036-4d6b-9790-07b8c5aca228.png)

404 と表示されました。反映するには数分かかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/60b5853e-b6a0-4606-b22d-134e15632948.png)

# 公開されたページを確認する

しばらくすると、ページが見えるようになるので index.html などを書き換え、サイトの体裁を整えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/ca1d0d30-3f76-443a-8e7d-ef3b2688f657.png)
Nuxt3でLottie動画を実装する

Qiitaに投稿するために書いている途中です

https://qiita.com/hane-jp/items/f511bceb65e84dedc565

## きっかけ
Lottie動画の取り扱いが初めてだったので備忘録を兼ねて投稿。
構築中のサイトのヘッダーキャッチ背景に動画を設定することになった。
デザイナーさんがAdobe After Effectsで作成してくれた動画だったけど、SVG動画として書き出すことはできないので、Lottieを利用して実装できるようにAfter EffectsにBodymovinプラグインをインストールしてJSON形式で書き出ししてくれた。

■参照：[Lottieとは？](https://lottiefiles.com/jp/what-is-lottie)
■参考にしたサイト：[Bit Beans](https://bitbeans.com/blog/ae-lottie_hot/)

## ディレクトリ構成
```
src -- assets
    |    |- animation
    |       |- animation.json // 今回背景にする動画
    |- components
    |       |- LottieAnimaton.vue // 動画用コンポーネント
    |- pages
    |   |- index.vue // 表示するファイル
    |- nuxt.config.ts
    |- plugins
        |- lottie.ts // プラグインファイル
```

1. lottie.ts を作成する
    ```
    // ~/plugins/lottie.ts
    import { defineNuxtPlugin } from '#app'
    import lottie from 'lottie-web'
    
    export default defineNuxtPlugin((nuxtApp) => {
        nuxtApp.provide('lottie', lottie)
    })
    ```
    ---
1. nuxt.config.tsにlottie.tsを追加する
    ```
    export default defineNuxtConfig({
      plugins: [
        '~/plugins/lottie.ts', 
      ],
    });
    ```
    ---
1. LottieAnimaton.vue を作成する
    ```
    <script setup lang="ts">
    import { ref, onMounted, defineProps, defineEmits } from 'vue'
    import lottie from 'lottie-web'
    
    // propsの定義
    const props = defineProps({
      animationData: {
        type: Object,
        required: true,
      },
      loop: {
        // ループ再生するかどうか
        type: Boolean,
        default: true,
      },
      autoplay: {
        // 自動再生するかどうか
        type: Boolean,
        default: true,
      },
      width: {
        // アニメーションの幅
        type: String,
        default: '100%',
      },
      height: {
        // アニメーションの高さ
        type: String,
        default: '100%',
      },
    })
    
    const emit = defineEmits(['animCreated'])
    
    // コンテナの参照
    const lavContainer = ref(null)
    
    // コンポーネントがマウントされた後の処理
    onMounted(() => {
      if (lavContainer.value) {
        const anim = lottie.loadAnimation({
          container: lavContainer.value,
          renderer: 'svg',
          loop: props.loop,
          autoplay: props.autoplay,
          animationData: props.animationData,
        })
        emit('animCreated', anim)
      }
    })
    </script>

    ```
    ---
1. 表示するファイル（index.vue)を作成する
    ```
    <template>
		<div>
			<LottieAnimation
                :options="defaultOptions"
                width="100%"
                height="100%"
                class="introduction__background"
                @anim-created="handleAnimation"
            />
		</div>
	</template>

	<script lang="ts" setup>
    	import animationData from '@/assets/animation/animation.json'
    
    	const defaultOptions = ref({
    		loop: true,
    		autoplay: true,
    		animationData: animationData,
    	})
    
    	const show = ref(true)
    	const anim = ref(null)
    
    	onMounted(() => {
    		setTimeout(() => {
    			show.value = false
    		}, 7000)
    	})
    
    	function handleAnimation(animInstance) {
    		anim.value = animInstance
    	}
	</script>
    ```
React入門1: reactアプリの作り方とtailwindcssの導入

初心に立ち返ってreactアプリの作り方でも
# Nodeのダウンロード
前提としてNode.jsのダウンロードが必要です
公式サイトからダウンローダーを使用してインストールすることもできますが
私の時はなぜか見当たらなかったので、コマンドプロンプトでインストールしました

```powershell
# fnmダウンロードとインストール
winget install Schniz.fnm
# Node.jsダウンロードとインストール
fnm install 22
# Node.jsバージョン確認
node -v 
# npmバージョン確認
npm -v
```

すでにnodeとnpmのバージョンが確認できていれば、ダウンロードとインストールはいいです


# Reactアプリの作成

まず問題なければcreateで作れます

```powershell
npx create-react-app <プロジェクトの名前>
```

次に今の位置をプロジェクトに移動

```powershell
cd <プロジェクトの名前>
```

下記のコマンドでプロジェクトを稼働します。

```powershell
npm start
```

# tailwindcssの導入

下記のコマンドでインストールと初期化(必要ファイルの作成)を行います

```powershell
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

少し古いバージョンの方が上手くいくこともあります

```powershell
npm install -D tailwindcss@3.4.13 autoprefixer postcss
npx tailwindcss init -p
```


## Tailwind CSS の設定

tailwind.config.js を編集し、content にファイルを指定
```javascript
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

src/index.css に以下を追加
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

これで設定は完了です
PHP画像アップロードエラーの原因究明：upload_max_filesizeとの戦い

# はじめに
チャットシステムの画像アップロード機能でエラーが発生し、原因を特定するのに苦労したので、備忘録として残しておきます。
同じ問題で悩んでいる方の参考になれば幸いです。

# 発生した現象
画像アップロード機能では、5MB以下のファイルのみアップロードできるように設定していました。普段は問題なく動作していたのですが、ある画像(約4MB)をアップロードしようとした際に、突然エラーが発生…。原因を探るべく、調査を開始しました。

# 原因追及
クライアントから送信されたファイルデータをデバッグしてみました。そうすると、以下のように表示されました。
```
  'file' => 
  \Illuminate\Http\UploadedFile::__set_state(array(
     'test' => false,
     'originalName' => '26074.jpg',
     'mimeType' => 'image/jpeg',
     'error' => 1,
     'originalPath' => '26074.jpg',
     'hashName' => NULL,
  )),
```

よくみてみると、`error`の箇所が1になっています。1ということはなにかファイルアップロードでエラーが起きているぞと、、恥ずかしながら、ファイルアップロードのエラーコードについて知見があまりなかったので、この`1`が意味することがわかりませんでした。そこでエラーコードを調べてみました。

(参考)
| コード| エラー定数 | 説明 |
| ---- | ---- | ---- | 
| 0 | UPLOAD_ERR_OK | エラーなし | 
| 1 | UPLOAD_ERR_INI_SIZE | php.iniのupload_max_filesizeのサイズを超えている |
| 2 | UPLOAD_ERR_FORM_SIZE | HTMLフォームで指定された MAX_FILE_SIZE を超えている |
| 3 | UPLOAD_ERR_PARTIAL | 一部のみしかアップロードされていない |
| 4 | UPLOAD_ERR_NO_FILE | アップロードされなかった |
| 6 | UPLOAD_ERR_NO_TMP_DIR | 	サーバー一時保管フォルダがない |
| 7 | UPLOAD_ERR_CANT_WRITE | ディスクへの書き込みに失敗 |
| 8 | UPLOAD_ERR_EXTENSION | PHPの拡張モジュールがアップロードを中止した |

つまり今回はエラーコードが`1`なので、「php.iniのupload_max_filesizeのサイズを超えている」エラーになります。そこで、php.iniの中身を確認してみると、アップロードできる単一ファイルの最大サイズが「２M」になっていました。

```
upload_max_filesize = 2M
```

今回はそこが原因だったので、以下のようにphp.iniファイルを編集して無事エラーが解消されました
```
upload_max_filesize = 5M
```

:::note info
**重要パラメータの説明**
**upload_max_filesize** : アップロードできる単一ファイルの最大サイズを指定するパラメータ
**post_max_size** : POSTリクエスト全体（ファイルとフォームデータを含む）の最大サイズを指定するパラメータ

※post_max_size は常に upload_max_filesize 以上の値に設定することが推奨
:::

# おわりに

今回の問題は単純なPHP設定の制限によるものでしたが、ここにたどり着くまでに少々時間がかかってしまいました。今後は以下の点を意識していきたいと思います。この他なにか注意点などありましたらご教授いただけると大変ありがたいです。

1. ファイルアップロードエラーが発生した場合は、まずエラーコードを確認する
2. サーバー設定（php.ini）の確認は基本中の基本
3. 設定を変更した場合は、必ずウェブサーバーを再起動して反映させる

最後までご覧いただきありがとうございました！
WebhookでトリガーされるAIエージェントの最初の例

## WebhookでトリガーされるAIエージェントの最初の例
https://huggingface.co/spaces/Akjava/linear-app-webhook-smolagents

最初といっても私の中です。
このスペースのコードは、linea.appからのissueの変更をWebhook経由で受信し、Hugging Face Spaces上のGradioまたはローカル環境でAIを使って処理したい場合に、参考になるかもしれません。

*想像してみてください。エージェントが瞬時に応答する様子を。*

要するに、HuggingfaceがApache 2.0ライセンスで公開している `webhooks_server.py` を、linear.appの非常に小さな部分で動作するように調整しました。

https://github.com/huggingface/huggingface_hub/blob/main/src/huggingface_hub/_webhooks_server.py

注意してください。

この方法はAI駆動型のコンテンツ管理システムとして使用できますが、Hugging Faceがこれを許可するかどうかは定かではありません。

Github:以後smolagantsのexampleは英語で更新していきたいと思います。

https://github.com/akjava/smolagents-examples

Linear.appのAPIに関しては以下で、徐々に更新しています。

https://github.com/akjava/python-linear-api-examples/wiki
AWS入門：AWSって何？主要サービスと活用方法を初心者に向けて体系的に解説してみた

## **はじめに**
AWS（Amazon Web Services）は、世界中の企業や開発者が利用するクラウドプラットフォームです。

:::note info
***AWSを活用することで、物理サーバーを用意することなく、インフラの構築、管理、運用が可能になります。***
:::

しかし、AWSには多くのサービスがあり、初心者にとっては何から学べばよいか分かりにくいことがあります。本記事では、AWSの代表的なサービスを紹介し、どのように活用できるかを解説します。

## **書こうと思ったきっかけ**
AWSを学び始めたとき、次のような疑問を持ちました。

- 「AWSにはたくさんのサービスがあるけど、何を使えばいいの？」
- 「サーバーを構築したいけど、どのサービスを選ぶべき？」
- 「データベースはAWSでどのように管理するの？」

これらの疑問を解決するために、基本的なAWSのサービスを整理し、初心者向けにわかりやすく説明することにしました。

---

## **1. AWSとは？**
### **AWSの特徴**
AWSは、Amazonが提供するクラウドコンピューティングサービスです。以下の特徴があります。

- **スケーラビリティ**: 必要なリソースを柔軟に増減できる。
- **コスト効率**: 使った分だけ支払う従量課金制。
- **高可用性**: 世界中のデータセンターを活用し、サービスの安定性が高い。
- **セキュリティ**: 強力なアクセス管理、暗号化、監視ツールを提供。

AWSを利用することで、物理サーバーを購入・管理する手間を省き、効率的なシステム運用が可能になります。

---

## **2. AWSの主要サービスと用途**
AWSには多くのサービスがありますが、初心者がまず理解すべき主要なサービスを以下に紹介します。

### **(1) 計算（Compute） - EC2, Lambda**
#### **Amazon EC2（Elastic Compute Cloud）**
- 仮想サーバーを作成し、アプリケーションを実行できる。
- OSの選択やインスタンスのスペックを自由に設定可能。
- 例: Webアプリのバックエンドサーバー、データ処理システム。

#### **AWS Lambda**
- サーバーレスでコードを実行できるサービス。
- インフラ管理不要で、自動スケーリング。
- 例: APIのバックエンド処理、データ処理の自動化。

### **(2) ストレージ - S3, EBS**
#### **Amazon S3（Simple Storage Service）**
- オブジェクトストレージサービス。
- 画像、動画、ログファイルなどを保存できる。
- 例: バックアップ、静的Webサイトのホスティング。

#### **Amazon EBS（Elastic Block Store）**
- EC2用のストレージ。
- データの永続化が可能で、EC2のインスタンスと連携。

### **(3) データベース - RDS, DynamoDB**
#### **Amazon RDS（Relational Database Service）**
- マネージドなリレーショナルデータベース。
- MySQL、PostgreSQL、SQL Server などをサポート。
- 例: Webアプリのデータベース管理。

#### **Amazon DynamoDB**
- フルマネージドなNoSQLデータベース。
- 高速なスケーリングが可能。
- 例: セッション管理、リアルタイム分析。

### **(4) ネットワーク - VPC, Route 53**
#### **Amazon VPC（Virtual Private Cloud）**
- AWS内で仮想ネットワークを構築。
- セキュリティを強化し、他のAWSサービスと連携。

#### **Amazon Route 53**
- DNS（ドメインネームシステム）管理サービス。
- 高可用性のドメインルーティングを提供。

### **(5) 監視と運用 - CloudWatch, IAM**
#### **Amazon CloudWatch**
- AWSリソースの監視とログ管理。
- メトリクスを取得し、アラートを設定可能。

#### **AWS IAM（Identity and Access Management）**
- ユーザーやアクセス権限を管理。
- 最小権限の原則を適用し、セキュリティを確保。

---

## **3. AWSの基本的な利用手順**
### **(1) AWSアカウントの作成**
- [AWS公式サイト](https://aws.amazon.com/) でアカウントを作成。
- クレジットカード情報を登録。
- 無料利用枠（Free Tier）が利用可能。

### **(2) IAMユーザーの作成**
- ルートユーザーは使用せず、IAMユーザーを作成。
- 必要な権限だけを付与（最小権限の原則）。

### **(3) EC2のセットアップ**
- EC2インスタンスを作成し、適切なOSを選択。
- SSH接続の設定を行い、サーバーを構築。

### **(4) S3でデータを保存**
- S3バケットを作成し、オブジェクトをアップロード。
- パブリックアクセス設定を確認。

### **(5) CloudWatchで監視設定**
- メトリクスを設定し、しきい値を超えたら通知を受け取る。

---

## **4. AWSの学習方法**
### **おすすめの学習リソース**
- **AWS公式ドキュメント**（https://docs.aws.amazon.com/）
- **AWS Hands-on Labs**（実際に触って学ぶ）
- **AWS認定資格（Cloud Practitioner, Solutions Architect）**
- **UdemyやYouTubeのAWS学習コース**

### **実践的な学習の進め方**
1. **無料利用枠を活用し、実際にAWSのサービスを試す**。
2. **小規模なプロジェクト（WebアプリやAPI）を作成する**。
3. **AWS Well-Architected Frameworkを学び、ベストプラクティスを意識する**。

---

## **5. まとめ**
| 項目 | 説明 |
|------|------|
| **AWSとは？** | クラウドインフラの提供サービス |
| **主要サービス** | EC2（計算）、S3（ストレージ）、RDS（データベース）など |
| **利用手順** | アカウント作成 → IAM設定 → EC2/S3利用 |
| **学習方法** | Hands-on Labs、資格取得、実際にプロジェクトで活用 |

AWSを活用することで、柔軟かつスケーラブルなシステム運用が可能になります。

***まずは基本的なサービスから試してみましょう！***
Nextjsをvercelに上げたらでたエラーその4: Type error: Binding element 'children' 

今日も今日とてエラーの記事です

# エラー内容

```sql
./src/app/layout.tsx:7:38
Type error: Binding element 'children' implicitly has an 'any' type.
   5 | import { SessionProvider } from "next-auth/react"
   6 |
>  7 | export default function RootLayout({ children }) {
     |                                      ^
   8 |   return (
   9 |     <html lang="en">
  10 |       <body>
Static worker exited with code: 1 and signal: null
Error: Command "npm run build" exited with 1
```

# エラーの詳細
このエラーは、RootLayoutコンポーネントのchildrenが型定義されていないために発生しています。TypeScriptは、childrenの型を推測できず、デフォルトでany型を適用してしまっています。childrenに適切な型を指定することで、このエラーを解決できます。



# 解決方法

childrenには通常、ReactNode型を指定します。これを使うことで、childrenがどんな型の子要素でも受け入れられるようになります。

```tsx
import { SessionProvider } from "next-auth/react";
import { ReactNode } from "react";

type Props = {
  children: ReactNode;
};
// 明示的にReactNodeと指定しました。

export default function RootLayout({ children }: Props) {
// 明示された内容からchildrenの型を処理
  return (
    <html lang="en">
      <body>
        <SessionProvider>{children}</SessionProvider>
      </body>
    </html>
  );
}
```

# ReactNodeについて
ReactNodeは、文字列、数値、JSX要素、配列、nullなど、Reactコンポーネントで使える任意の内容を表す型です。
【MySQL】エラー「Ignoring query to other database」の原因とは？！

# 概要

mysqlにログインして以下のように操作していると...

```
mysql> USE my_database;
Database changed
mysql> 
mysql> 
mysql> show databases;
Ignoring query to other database
```

「`Ignoring query to other database`」ってなんや！？
となりましたので、解決方法を紹介します。

# 解決方法
答えは単純でした。

ログイン時に

```
mysql -root -p
```

と入力していためです。

正しくは、

```
mysql -uroot -p
```

ですね。

ログインも成功して`USE my_database;`は正常に実行できていたので、しばらく「あれなんで？」となりましたが、答えはシンプルでした。以上！
PHPで「論理演算子」の動作を確認してみた。

# 概要

PHPで「論理演算子」の動作を確認してみました。
以下のページを参考にしました。

https://www.javadrive.jp/php/if/index4.html

# 実装

以下のファイルを作成しました。

```sample.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PHPテスト</title>
</head>
<body>

<p>PHPのテストです。</p>

<p>
<?php
$old = 25;
$pref = '東京';

if ($old >= 20 && $pref == '東京'){
  print "東京出身で20歳以上です";
}
?>
</p>

</body>
</html>
```

以下のコマンドを実行しました。

```
$ php sample.php 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PHPテスト</title>
</head>
<body>

<p>PHPのテストです。</p>

<p>
東京出身で20歳以上です</p>

</body>
</html>
```

# まとめ

何かの役に立てばと。
ArweaveとのEndowment [Community Labs]

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1926720/d47165af-ce38-4bdc-9de2-c231b33c5a6a.png)

:::note info
本記事は下記の翻訳となります。
[『Endowment with Arweave』](https://www.communitylabs.com/blog/endowment-with-arweave)（by Community Labs）
:::

## Arweaveの Endowment メカニズムについて

Arweaveの Endowment メカニズムは、永続的なデータストレージを確保するために設計された AR トークンのプールとして機能する、Arweaveのトークンエコノミーにおける独自の特徴です。Endowment は、ネットワークのストレージバッテリーとして機能する持続可能な資金調達メカニズムです。トランザクション手数料がマイナーに直接支払われる代わりに、Arweaveは異なるアプローチを取っています。ユーザーがトランザクション手数料を支払う際、その支払いの大部分は即座にマイナーに渡るのではなく、この Endowment プールに入ります。

1. Endowment は、通常のブロック報酬がネットワークのデータ保存コストをカバーするのに不十分な場合にのみ、マイナーにトークンを放出します。
2. ユーザーからの一回限りの支払いで永続的なストレージを賄うことができる、持続可能な長期保存システムを作り出します。

## Arweaveのトークンエコノミーを理解する

Arweaveのトークンエコノミーは、ネットワークのネイティブトークンである AR を中心に構築されており、最大供給量は6,600万トークンです。このうち5,500万トークンがジェネシス時に作成され、1,100万トークンがマイニング報酬として徐々に放出されています。このシステムは、そのエコノミックモデルにおいて複数の重要な目標を達成するように設計されています。トランザクション手数料を Endowment プールに集め、ブロック報酬と戦略的な Endowment の放出を通じてマイニング報酬を配布します。この構造は、ストレージコストが時間とともに自然に低下する中で、持続可能な経済性を維持するのに役立ちます。

一般的に、ブロックチェーンネットワークはトランザクション手数料をマイナーに直接送り、即時の作業報酬として支払い、長期的なストレージインセンティブのための組み込みメカニズムはほとんどないか、まったくありません。Arweaveは Endowment メカニズムで異なるアプローチを取り、手数料の大部分は Endowment プールに入り、ブロック報酬がストレージコストをカバーするのに不十分な場合にのみマイナーにトークンを放出します。

## Endowment の計算方法

Endowment は、保存されたデータの総サイズ、現在のギガバイトあたりのストレージコスト、既存の報酬メカニズムを考慮して、Endowment からどれだけ放出すべきかを判断します。この計算は新しいブロックごとに行われ、Endowment プールのサイズは追跡され、適宜更新されます。

## Endowment が重要な理由

Endowment は、ストレージコストの低下という歴史的なトレンドを考慮したArweaveの広範な経済モデルの一部です。Endowment プールは予備基金と安定化力の両方として機能し、マイナーへのインセンティブを維持しながら、ネットワークの長期運用のための持続可能な経済性を確保します。一回限りの支払いシステムを通じて、永続的なデータストレージを財務的に持続可能にすることを目指しています。

---

---

:::note info
【Arweave Japan とは】
Arweave Japan は Arweave / AO の日本語ビルダーエコシステム構築を目的とした分散型組織です。

【​Arweave / AO とは？】
​Arweave は無制限にスケール可能な分散型ストレージであり、AO は Arweave 上に構築された無制限にスケール可能な分散型スーパーコンピュータです。Arweave と AO を使って既存のブロックチェーンでは実現不可能であった実用的なプロダクトが開発できます。

イーサリアム L1 のリステーキングによってセキュリティが担保され、TVL はローンチ数ヶ月で 1000 億円近くまで上がり、今後数兆円規模の市場が期待されます。完全フェアローンチされた AO のトークン設計によって、この流動性は AO 上のプロジェクトが活用することができ、ビットコインと同じ半減スケジュールでミントされる AO トークンは開発者やプロジェクトが受け取れる仕組みとなっています。

​Web2 を置き換えるレベルで実用的なプロジェクトが構築できる唯一無二の分散型プロトコル AO で開発することはグローバルの第一線で活躍する非常に大きなチャンスとなっています。

【Social Links】

- [Website](https://arweave.jp)
- [X(Twitter)](https://twitter.com/arweavejp)
- [Discord Community](https://discord.com/invite/bB4N7fAMmp)
- [Github](https://github.com/arweavejp)

【Blog】

- [Zenn Publication](https://dev.to/arweavejp)
- [Note Magazine](https://note.com/kyohei_nft/m/m35c7443e98d0/)
- [dev[.]to](https://dev.to/arweavejp)

![1080x360.jpeg](https://images.lumacdn.com/cdn-cgi/image/format=auto,fit=cover,dpr=2,quality=75,width=1500/editor-images/wj/43c64e53-3361-44d5-a05c-155e4fbf3188)

:::
なぜAOでゲームなのか [Community Labs]

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1926720/abc1cca2-2c4f-499b-b01d-02c04b8bedc0.png)

:::note info
本記事は下記の翻訳となります。
[『Why Gaming on AO』](https://www.communitylabs.com/blog/why-gaming-on-ao)（by Community Labs）
:::

Web3におけるゲームは、ますます重要性を増しています。これは、プレイヤーがゲーム体験とどのように関わり、価値を得るかという点で根本的な変化を表しています。プレイヤーが時間とお金を単一のゲーム内にロックされた資産に投資する従来型のゲームとは異なり、Web3ゲームは真のデジタル所有権を導入し、プレイヤーが実際にゲーム内資産を所有し、複数のプラットフォームや体験にまたがって取引することを可能にします。

## 相互運用性と所有権
相互運用性により、プレイヤーは互換性のあるゲーム間でデジタル資産を使用できます。これは、購入した様々なゲーム資産を異なる体験間で移動でき、どこでプレイしても一貫したデジタルアイデンティティを維持できることを意味します。

所有権はそれだけにとどまりません。レアなスキンやアイテムなどの特定のゲーム資産は、限定的な体験やコミュニティへのアクセスを解放できます。これらのアイテムはデジタルパスとして機能し、プレイヤーにプライベートサーバーやメンバー限定エリア、他のコレクターやプレイヤーと交流できるユニークなソーシャルスペースへのアクセスを提供します。これは活気ある文化とコミュニティを育むことが全てなのです。

## AOで構築する理由
AOでのゲーム開発は最近になって勢いを増したばかりですが、急速に進歩しています。AOは、従来のサーバー依存やデータストレージの制約なしに、スケーラブルで相互接続されたゲーム体験を作成できるようにしながら、永続的にアクセス可能であることで、ゲーム開発のための強固な基盤を提供します。

+ **Reality Protocol**: AOで空間的な世界を作成するためのプロトコル仕様である[Reality Protocol](https://github.com/elliotsayes/Reality/blob/main/docs/Reality.md)は、[Llama Land](https://llamaland.g8way.io/#/)のような簡単なゲームの作成を可能にします。**‍**
+ **Loom SDK:** [Loom SDK](https://github.com/LOOM-WTF/SDK)は、WebGLベースのUnityアプリケーションがAOConnectフレームワークを通じてArweave Networkとシームレスに相互作用することを可能にします。

## 現在の開発状況
[Basejump](https://x.com/basejumpxyz)は、何千もの仮想世界、体験、ゲームをシームレスに接続する統合プラットフォームの作成を目指しています。共通の興味、デジタル資産、文化的な所属を通じてユーザーが繋がるコミュニティ主導のアプローチによって、デジタルディスカバリーを再構築しています。投機的な価値に焦点を当てるのではなく、このプラットフォームはデジタル資産をコミュニティエンゲージメントのための機能的なツールに変換し、限定コミュニティやクロスプラットフォーム機能へのアクセスを通じて本質的な有用性を提供します。

## 結論
AOでのゲームの未来は、ここにあります。画期的なゲームを作成したい開発者でも、真のデジタル所有権を求めるプレイヤーでも、AOは次世代のゲーム体験のための基盤を提供します。

AO Venturesが提供するProtocol.Landのビルダープログラムに[今すぐ](https://www.aoventures.io/protocol-land-builder-program)サインアップしてください。

ゲーム間の空間である[Basejump](https://www.basejump.xyz/)をチェックしてください！

---

---

:::note info
【Arweave Japan とは】
Arweave Japan は Arweave / AO の日本語ビルダーエコシステム構築を目的とした分散型組織です。

【​Arweave / AO とは？】
​Arweave は無制限にスケール可能な分散型ストレージであり、AO は Arweave 上に構築された無制限にスケール可能な分散型スーパーコンピュータです。Arweave と AO を使って既存のブロックチェーンでは実現不可能であった実用的なプロダクトが開発できます。

イーサリアム L1 のリステーキングによってセキュリティが担保され、TVL はローンチ数ヶ月で 1000 億円近くまで上がり、今後数兆円規模の市場が期待されます。完全フェアローンチされた AO のトークン設計によって、この流動性は AO 上のプロジェクトが活用することができ、ビットコインと同じ半減スケジュールでミントされる AO トークンは開発者やプロジェクトが受け取れる仕組みとなっています。

​Web2 を置き換えるレベルで実用的なプロジェクトが構築できる唯一無二の分散型プロトコル AO で開発することはグローバルの第一線で活躍する非常に大きなチャンスとなっています。

【Social Links】

- [Website](https://arweave.jp)
- [X(Twitter)](https://twitter.com/arweavejp)
- [Discord Community](https://discord.com/invite/bB4N7fAMmp)
- [Github](https://github.com/arweavejp)

【Blog】

- [Zenn Publication](https://dev.to/arweavejp)
- [Note Magazine](https://note.com/kyohei_nft/m/m35c7443e98d0/)
- [dev[.]to](https://dev.to/arweavejp)

![1080x360.jpeg](https://images.lumacdn.com/cdn-cgi/image/format=auto,fit=cover,dpr=2,quality=75,width=1500/editor-images/wj/43c64e53-3361-44d5-a05c-155e4fbf3188)

:::
【こちらのプロジェクトは中止になりました】アプリNo1をつくろう

# 後日談　(4/23)
こちらのプロジェクトは中止になりました。
コード読めるから、後は生成AIにコード書いてもらえばいいだろう、という軽い気持ちで始めましたが、やっぱり難しかったですね。
見た目だけは、できますが、データの受け渡しとか、コンポーネントの分け方とか何も分かってませんでしたからねえ。できたのはただのモックアップでした。
とはいえ、何を学ぶのが必要なのかとかは分かったので、いい経験になったと思います。
次の製作勉強に活かしていきます。

【つくるもの】
数独app

【使う言語】
React with TypeScript

【つくろうとした理由】
たまにゲームしたくなって、数独をやったりするのですがスマホでやってます。シンプルだけど楽しい！
ただGoogle Play上の数独appは調べるかぎり全てに広告入っていて、無ければいいのにな～と思っています。
割とシンプルにつくれるらしいので、やってみようと思います

【自分の説明】
プログラミング勉強し始めたばかりです。
  HTML/CSSはできます！
  JS/TSギリ読めるくらい。
  制作経験は、ハンズオンapp１つ、自分のHP１つ

今回は、GeminiやCopilotなどのLLMに頼って、コード書いてもらおうかなと思います。

【計画】
ほとんどない。「習うより慣れろ」でやっていきます。
アルゴリズム組んだり、色々やる必要あるんだろうなーと予想していますが、必要になったときに調べたり学びます。諸先輩方を頼りにしています。

では、また文章を書きたくなったタイミングがあれば、書くので良ければまた読んでください。
あ！作成が終わったときにはレポートとして間違いなく書くので一週間以内に何かしらは投稿しますよ。よろしくお願いします。
AIとの対話を改善できる10のコツ～9割の人が知らないAIの本当の使い方～

![3:6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3965805/1e899c8e-eaea-48aa-93b1-70d11b72712b.png)

「指示」や「プロンプト」という言葉に騙されていませんか？

AIとのコミュニケーションは命令ではなく、対話が鍵です。

初めて会った友人にいきなり命令しないように、AIとも信頼関係を築く必要があります。

今回はAIとの対話を変える10の秘訣をご紹介します。

**【1】AIをパートナーとして接する**

AIは単なるツールではなく、可能性を秘めた相棒です。

カフェで「コーヒーくれ」と言うのと「アメリカンをいただけますか？」と伝えるのでは結果が違います。

重要な依頼の前には30秒かけて背景を説明しましょう。

例：「プログラミング初心者です。Pythonのループを小学生でもわかるように説明してください」

**【2】複数のAIを使い分ける**
AIにも個性があることを理解しましょう。

アイデア出しが得意なAI、論理的な説明が上手なAI、さまざまな特徴があります。

ノートに各AIの得意分野を記録すると、クリエイティブ作業にはDeepSeek、プログラミングにはClaudeなど最適な選択ができるようになります。

**【3】探究心を忘れない**
すべてのやり取りを学びの機会と捉えましょう。

バドミントンでフォームを指摘された時、「なぜこの形が効果的なのか？」と考えると上達が早いのと同じ。

AIの回答が不十分でも、「どう質問を改善できるか？」と自問することでスキルが磨かれます。

**【4】会話を継続的に深める**
理想の結果は繰り返しの対話から生まれます。

インテリアデザイナーとの打ち合わせのように、何度も修正を重ねることで理想に近づきます。

AIは何度でも対応してくれるので、遠慮なく調整要求をしましょう。

**【5】AIの限界を知る**
現実的な期待値を設定することが重要です。

赤ちゃんにステーキを食べさせないように、AIにも苦手分野があります。

複雑な課題は小さなステップに分解し、段階的に進めるのがコツです。

**【6】質問方法を使い分ける**
場面に応じて質問スタイルを変えましょう。

子供への声かけのように、「おもちゃを片付けて」と具体的に指示する時と、「この物語の続きどうなると思う？」と自由に考えさせる時を使い分けます。

創造的な作業は自由度を、事実確認は具体的な指示を心がけて。

**【7】自然な会話を心がける**
AIとの対話は人間と同じだと捉えましょう。

友達に「晩飯 四川料理」と言う代わりに、「取引先をもてなせるおすすめの四川料理店は？」と自然に話しかけるのがコツ。

音声入力を使うと自然な表現になりやすいです。

**【8】成功パターンを蓄積する**
効果的な質問テンプレートを作成しましょう。

シェフがレシピノートを作るように、うまくいった質問形式を記録し改良を重ねます。

特に満足度の高い回答を得た時は、その質問文を保存して分析する価値があります。

**【9】共同クリエイターになる**
人間とAIの協働作業で最高の成果を。

バンドのセッションのように、お互いの強みを活かし合います。

「下書き→AI修正」や「AIが案を提示→人間が決定」などの協働パターンを試してみてください。

**【10】感情を織り交ぜる**
AIにも状況説明を加えると精度が上がります。

カスタマーサポートに事情を詳しく伝えると適切な対応を得やすいのと同じ原理です。

「急ぎの仕事でストレスが…」といった感情表現が、より適切な回答を引き出します。

**【まとめ】**

技術の専門家になる必要はありません。

好奇心と丁寧なコミュニケーションが最大の武器です。

複雑な指示より、本当に必要なことを明確に伝えることが重要。

人間関係と同じく、誠実でわかりやすい対話が最良の結果を生み出せます。
Pythonでクラスを使用するときのPublic,Protect,Private変数の挙動



## 1. PythonにおけるPublic, Protected, Privateの違い

| 変数種類 | アクセス範囲 | 説明 |
|---|---|---|
| Public (`name`) | クラス内・継承先・インスタンス外部からOK | 誰でも触れる公開データ |
| Protected (`_name`) | クラス内・継承先OK（外部も技術的にはアクセス可） | 内部用・継承前提データ |
| Private (`__name`) | クラス内のみ（裏技あり） | 完全に隠したいデータ |

---

## 2. Publicのシチュエーション実例
### 📖 ユーザープロフィール（公開データ）

### 要件
- 名前や年齢は誰でも見れる＆更新もOK
- publicにする

```python
class User:
    def __init__(self, name, age):
        self.name = name   # public
        self.age = age     # public

# インスタンスから自由にアクセス可能
user = User("Taro", 25)
print(user.name)
user.age = 30
```

---

## 3. Protectedのシチュエーション実例
### 📄 ドキュメントクラス（基底クラス）

### 要件
- ドキュメントの内容は外から直接触ってほしくない
- でも継承クラスでは内容を加工したい
- protectedにする

```python
class Document:
    def __init__(self, title, content):
        self.title = title
        self._content = content  # protected

    def display(self):
        print(f"タイトル: {self.title}")
        print(self._content)

class SecretDocument(Document):
    def display(self):
        print(f"【極秘】{self.title}")
        print(f"内容: {self._content[:5]}...（省略）")

doc = SecretDocument("極秘資料", "これは極秘資料です")
doc.display()
print(doc._content)  # 触れちゃうけどマナー違反
```

---

## 4. Privateのシチュエーション実例
### 💰 銀行口座クラス

### 要件
- 残高は外から直接触らせたくない
- 残高変更は専用メソッドを通す
- privateにする

```python
class BankAccount:
    def __init__(self, owner, balance):
        self.owner = owner
        self.__balance = balance  # private

    def deposit(self, amount):
        self.__balance += amount

    def withdraw(self, amount):
        if amount <= self.__balance:
            self.__balance -= amount
        else:
            print("残高不足")

    def check_balance(self):
        print(f"{self.owner}の残高: {self.__balance}円")

account = BankAccount("Taro", 10000)
account.deposit(5000)
account.withdraw(3000)
account.check_balance()

# 直接アクセスは不可
# print(account.__balance)  # AttributeError

# でも裏技で見える
print(account._BankAccount__balance)
```

---

## 5. まとめと設計の考え方

| 変数種類 | 説明 | おすすめ用途 |
|---|---|---|
| Public (`name`) | 誰でも触れる | 普通のデータ（ユーザー名など） |
| Protected (`_name`) | なるべく触ってほしくない | 継承先が参照する可能性があるデータ |
| Private (`__name`) | 完全に隠したい | 内部ロジック・セキュリティ的に重要なデータ |
Sublime Text 3 徹底解説！快適コーディングのための活用ガイド

## はじめに

Sublime Text 3 は、軽量かつ高速でありながら高機能なテキストエディタとして、多くのプログラマーに愛用されています。その魅力は、シンプルなUI、強力なショートカット、多彩なカスタマイズ性、そして豊富なプラグインにあります。

本記事では、Sublime Text 3 の基本的な使い方から、便利なショートカット、プラグイン、カスタマイズ方法までを徹底的に解説します。

---

## Sublime Text 3 の特徴

### 1. **軽量で高速**

- 他のエディタと比較して動作が非常に軽快
- 大きなファイルでもスムーズに開くことが可能
- 起動が速く、開発のストレスを軽減

### 2. **強力なショートカットとコマンドパレット**

- `Ctrl + P` (Windows/Linux) / `Cmd + P` (Mac) でファイル検索
- `Ctrl + Shift + P` / `Cmd + Shift + P` でコマンドパレットを開く
- マルチカーソルを活用した直感的な編集が可能

### 3. **多彩なカスタマイズ性**

- JSON 形式の設定ファイルで自由にカスタマイズ可能
- テーマやカラースキームの変更が容易
- プラグインを活用して、エディタの機能を拡張

### 4. **プラグインによる拡張**

- パッケージマネージャー（Package Control）を利用して、さまざまな拡張機能を追加可能
- Linter、Git 連携、コード補完などを強化できる

---

## Sublime Text 3 の基本的な使い方

### 1. Sublime Text 3 のインストール

Sublime Text 3 は公式サイトからダウンロードできます。

- [Sublime Text 公式サイト](https://www.sublimetext.com/3)

インストール後、初期設定を行いましょう。

### 2. よく使うショートカット

| ショートカット | 機能 |
|---------------|------|
| `Ctrl + P` / `Cmd + P` | ファイル検索 |
| `Ctrl + Shift + P` / `Cmd + Shift + P` | コマンドパレットを開く |
| `Ctrl + /` | コメントアウト |
| `Ctrl + D` | 単語選択（連続で押すと拡張） |
| `Ctrl + Shift + L` | 複数行編集 |
| `Alt + Shift + ↑ / ↓` | 複数行選択 |
| `Ctrl + Shift + D` | 行の複製 |
| `Ctrl + X` | 行の削除 |

---

## 便利なプラグイン

Sublime Text 3 の真価はプラグインによる拡張性にあります。以下のようなプラグインを導入すると、より便利に使えます。

### 1. Package Control のインストール

まず、Sublime Text 3 に **Package Control** をインストールすることで、簡単にプラグインを追加できます。

1. `Ctrl + Shift + P` / `Cmd + Shift + P` を押して **Command Palette** を開く
2. `Install Package Control` を検索して実行
3. 再起動後、`Ctrl + Shift + P` / `Cmd + Shift + P` → `Package Control: Install Package` でプラグインを検索・インストール可能

### 2. おすすめプラグイン

| プラグイン名 | 説明 |
|-------------|------|
| **Emmet** | HTMLやCSSのコーディングを高速化 |
| **SublimeLinter** | コードの文法チェックを自動で行う |
| **BracketHighlighter** | 括弧の対応関係を強調表示 |
| **GitGutter** | Git の変更を表示 |
| **AutoFileName** | ファイルパス補完を提供 |
| **Material Theme** | UIの見た目をモダンに変更 |
| **Sidebar Enhancements** | サイドバーの機能拡張 |

---

## 設定のカスタマイズ

Sublime Text 3 の設定は `Preferences > Settings` から JSON 形式で変更できます。

### 1. 代表的な設定

```json
{
    "font_size": 12,
    "tab_size": 4,
    "translate_tabs_to_spaces": true,
    "ignored_packages": [
        "Vintage"
    ],
    "word_wrap": "true",
    "highlight_line": true
}
```

- `font_size`: フォントサイズを変更
- `tab_size`: タブのスペース数
- `translate_tabs_to_spaces`: タブをスペースに変換
- `ignored_packages`: 使用しないパッケージ
- `word_wrap`: 自動改行の有効化
- `highlight_line`: 現在の行を強調表示

### 2. キーマップのカスタマイズ

デフォルトのショートカットが合わない場合は、カスタムキー設定を追加できます。

```json
[
    {
        "keys": ["ctrl+alt+t"],
        "command": "toggle_side_bar"
    }
]
```

この例では、`Ctrl + Alt + T` でサイドバーの表示・非表示を切り替えます。

---

## Sublime Text 3 をさらに活用するためのポイント

1. **スニペットを活用する**
   - `Tools > Developer > New Snippet` でコードスニペットを作成可能
   - よく使うコードを簡単に呼び出せる

2. **マルチカーソルを活用する**
   - `Ctrl + Click` で複数箇所を同時に編集
   - `Ctrl + D` で同じ単語を一括選択

3. **プロジェクト管理機能を使う**
   - `Project > Save Project As...` でプロジェクトを保存
   - ファイルやフォルダを簡単に管理可能

---

## まとめ

Sublime Text 3 は、軽量でありながら強力な機能を備えたテキストエディタです。ショートカットを活用し、プラグインを導入することで、より効率的な開発環境を構築できます。

ぜひ Sublime Text 3 を活用し、自分に合ったカスタマイズをしてみてください！
Microsoft Teams WEB版で組織が切り替えられなくなった場合の対処方法

## Teams で組織が切り替わらない
私の勤務先ではTeamsを契約していないのですが、お客様のTeamsにゲストとして参加してコミュニケーションをする機会が結構あります。
なので、複数テナント間を行ったり来たりすることが多いのですが、組織をクリックしても切り替わらない事象に遭遇しました。
エラーというよりはうんともすんとも言わない感じです。

## 環境

Google Chrome 上で Microsoft Teams のWEB版を利用しています。
自社でTeamsを契約していないのでTeamsのデスクトップクライアントにログインできないんですよね。
社内でデスクトップクライアントを使っている人がちらほらいるのは七不思議。

## 解決方法

URL欄の ``?tenantId=`` 以後を削除する
以下のようなイメージです

Before
```
https://teams.microsoft.com/v2/?tenantId=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
```

After
```
https://teams.microsoft.com/v2/
```

以上です、URLが ``https://teams.microsoft.com/v2/`` の状態になれば組織の切り替えが可能になるようです。

テナントIDを指定しているからテナントを切り替えられなくなるのでしょうか？
正直Teamsは不安定というかストレスを感じる機会が多いですが、向き合っていくしかなさそうです。

以上、同じ事象で困っている方の助けになれば幸いです。

## 参考資料

Microsoft Teamsでアカウントと組織を管理する - Microsoft サポート
https://support.microsoft.com/ja-jp/office/microsoft-teams-%E3%81%A7%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%A8%E7%B5%84%E7%B9%94%E3%82%92%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B-7b221128-6643-465c-a317-679e48cd2ce9

新しいTeamsでの組織の切り替え - Microsoft コミュニティ
https://answers.microsoft.com/ja-jp/msteams/forum/all/%E6%96%B0%E3%81%97%E3%81%84teams%E3%81%A7%E3%81%AE/5b03c248-c022-446d-bd28-795a14bf7187
スマホでnode.jsプログラミング - acepad (2) おおまかな使い方とか


[前回](https://qiita.com/hoge1e3/items/21c424c8559bb8adfbff)の記事では、ただいま絶賛開発中の[acepad](https://hoge1e3.github.io/acepad/)について概要を述べましたが、一応どんな風に動かすのか/どんな風に動いているかをおおまかに紹介していきます。

# 起動画面
まず、こんな[起動画面](https://hoge1e3.github.io/acepad/)が出ます。前回は「いいからSetup/Restoreを押してみよう」みたいなことを書いていましたが、他にも２つくらいボタンがついているので紹介します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127248/a84e6c16-dfad-45af-a3e6-b52dcfb5aaa7.png)

- Setup/Restore
    -  [起動用の標準イメージ](https://hoge1e3.github.io/acepad/acepad/setup.zip)をダウンロードし、仮想ファイルシステム（※[前回](https://qiita.com/hoge1e3/items/21c424c8559bb8adfbff)参照）内の`/tmp/boot/`に解凍した後、同フォルダから**起動処理**を行います
- Insert Boot Disk 
    - Zipファイルをローカルマシンからアップロードし、 仮想ファイルシステム内の`/tmp/boot/`に解凍した後、同フォルダから**起動処理**を行います
- Factory Reset 
    - localStorageの内容を全消去します。Setup/Restoreを押しても起動がうまくいかない時用です。 

**起動処理**っていうのは「フォルダ直下の`package.json`を見て、`main`フィールドに書かれているJavaScriptファイルを実行」する、という処理です。試しに、次の２つのファイルを同じフォルダに作ってzipでまとめたものを「Insert Boot Disk」でアップロードしてみると、ちゃんと実行されてalertが表示されます。
~~~package.json
{"main": "hello.js", "type":"module"}
~~~
~~~hello.js
alert("Hello, acepad world");
~~~
`import`も使えます。次のように変えてみて、`world.js` `hello.js` `package.json`の３つのファイルを再度zipにして（いったんページを再読み込みしてから）「Insert Boot Disk」でアップロードしてみると、42が表示されます。
~~~world.js
export const f=(x)=>x*2;
~~~
~~~hello.js
import {f} from "./world.js";
alert(f(21));
~~~
このへんの機能は、acepadを動かしているベースとなる[petit-node](https://www.npmjs.com/package/petit-node)の機能ですが、ついでなので紹介しちゃいました。

なお、起動画面のボタンは上記の「Setup/Restore」「Insert Boot Disk」「Factory Reset」の３つ以外に、ルートフォルダに`/package.json`を作ることで増やせるのですが……それはまた次回以降にお話しします。

# 基本操作
acepadを起動した後の画面では、最初に「物理キーボードを使うか」「スクリーンキーボードを使うか」を聞かれます。PCで操作する場合は、どれかキーを押すと「物理キーボードを使う」ことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127248/dd0a2321-7389-4b73-b48e-848fc2a806e3.png)

キーボードを選択した後には、スクリーンキーボードと/user/とだけ書かれたテキストエリアが出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127248/6ed63766-03ec-456d-ac80-e8139d80dd85.png)
画面が狭い端末（というか、ほとんどのスマートフォン）では、上図の緑色のキーは左上の**SYM**で切り替えて入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127248/4bcd405e-810a-405d-8208-1ff4b558d7ca.png)

さて、/user/と出ているエディタの部分は、セッション(emacsでいうところのBuffer）の一覧です。セッションとは、異なるファイルの編集や、およびフォルダや実行結果の表示を行うために１つのエディタの内容を切り替える仕組みです。

今更ですが、ここに表示されているテキストエディタは[Ace Editor](https://ace.c9.io/#nav=api&api=edit_session)です(Acepadの名前の由来。**Ace** Editorにスマートフォン用のスクリーンキーボード(key**pad**)をくっつけたものの意）。セッションの切り替え自身はAce Editorの機能です。

`/user/`の上で**Ent**を押すと、`/user/`フォルダの中身を表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127248/516adc43-121b-4c42-b8d5-370200ea85cb.png)

`samples/`を押すとサンプル一覧のフォルダに移動しますが、せっかくなので他の機能も紹介しておきます。
- `new: ` の後ろにファイル名を書いて**Ent**を押すとそのファイルを新規作成します。なお、末尾が`/`の場合フォルダを新規作成します。
- `sh: ` の後ろにシェルコマンドを書くと、シェルを実行します。例えば、 `sh: `の後ろに`ls`と入力して**Ent**を押してみまよう。

こんな感じで、スマートフォンのアプリらしからなぬ、キーボードを中心とした操作を要求されます。サンプルの中身を見ようと思ったのですが寄り道しすぎたのでそれは次回に……
4. https://{サブドメイン}でrailsを表示できるようにする

## ゴール
本番環境で使っているドメインは使用できないので、テスト用のサブドメインを作成して、
1. https://{サブドメイン}でrailsの画面が表示できるようにする
1. http://{サブドメイン}でリクエストしたら、https://{サブドメイン}にリダイレクトされるようにする

## 関連する記事
[1. webページをデプロイするために、EC2インスタンスを起動する](https://qiita.com/shimekake-hanaka/items/1062fffe33a966002feb)
[2. Ruby on Railsの環境構築をする](https://qiita.com/shimekake-hanaka/items/fd7e6839bd2db8e8c877)
[3. pumaで起動してipアドレス指定でhttp通信ができるようにする](https://qiita.com/shimekake-hanaka/items/e3715ef81d98bb3a2b4b)
[4. https://{サブドメイン}でrailsを表示できるようにする](https://qiita.com/shimekake-hanaka/items/bf34dc0b553784b48c19)

## ざっくり構成
`Certificate Manager`で証明書を発行。
`EC2のロードバランサー`でhttpsリクエストを`EC2インスタンス`にhttp通信でリダイレクトする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3362423/4d3584d3-cb5f-4130-ba06-4b493a813dc3.png)

## 構築手順
### Certificate Manager
#### `Certificate Manager`で証明書をリクエスト
- パブリック証明書を発行
- ドメイン名：設定するサブドメイン（今回はtest.domein_name）
- 検証方法：DNS
- キーアルゴリズム：RSA 2048

#### `Xドメイン`でサブドメインのDNSレコード設定
- ホスト名：証明書リクエストで作成された`CNAME名`
- 種別：CNAME
- 内容：証明書リクエストで作成された`CNAME値`
- TTL：今回はテストなので`60`

### EC2のロードバランサー

#### ターゲットグループの作成
- ターゲットタイプ：インスタンス
- ターゲット名：任意の値
- プロトコル/ポート：http/80（今回はhttp通信でインスタンスに接続する想定のため）
- VPC：インスタンスに紐づくVPCを選択
- ヘルスチェック：http

#### ロードバランサーの作成
- タイプ：Application Load Balancer
- ロードバランサー名：任意の値
- スキーム：インターネット向け
- VPC：インスタンスに紐づくVPC
- セキュリティグループ：インバウンドルールでhttpsとhttpを許可したセキュリティグループを紐づけ
- リスナーとルーティング
    - https
    - 443
    - デフォルトアクション：作成したターゲットグループを選択
- セキュアリスナーの設定
    - 証明書の取得先：ACMから
    - 証明書：ACMで作成された証明書を選択

#### ドメイン先（Xドメイン）のDNSレコード設定
サブドメインのELBへの接続を設定する
- ホスト名：test
- 種別：CNAME
- 内容：作成したELBの`DNS 名`
- TTL：今回はテストなので`60`

### EC2の設定
#### セキュリティグループのインバウンドルールを編集
- httpのソースを作成したELBにする

#### nginxの設定を変える
rails_app.confのリダイレクトするときの受け取りのリクエストを`http://ip_address`から`http://domain_name`に変える
```/etc/nginx/conf.d/rails_app.conf
server {
    listen 80;
    server_name test.domain_name;
    # ↑ここをサブドメインに変える

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
```

**これらの設定で、https://{subdomain}のリクエストでrailsの画面が表示できるようになった**

### httpリクエストをhttpsにリダイレクトさせる方法
#### ロードバランサーのリスナーとルールを追加する
- Protocol：http
- Port：80
- デフォルトアクション
    - URLにリダイレクト
    - プロトコル：https
    - ポート：443
    - ステータスコード：301

**この設定で、httpのリクエストでhttpsのリクエストに、リダイレクトされるようになった**

### 途中のエラー時の調査に使ったコマンドたち

```
# railsのログ
tail -f /var/www/ocha_app_dir/ocha_app/log/production.log

# pumaのエラーログ直近100件
journalctl -u puma --no-pager --lines=100


# nginxのエラーログ
tail -f /var/log/nginx/error.log

# railsの環境変数とかもろもろ設定する場所
/etc/systemd/system/puma.service
※puma.serviceを編集したらdeamon-reloadする
sudo systemctl daemon-reload
sudo systemctl restart puma
sudo systemctl status puma

# nginxの設定を書いている場所
/etc/nginx/conf.d/rails_app.conf
※修正したらnginxも再起動
sudo systemctl restart nginx
sudo systemctl status nginx
```
【Next.js】クリーンアーキテクチャの観点から見た App Router vs Pages Router

# 背景

トカゲの餌やり管理アプリを作成するにあたり、今後の拡張性を考え、クリーンアーキテクチャを適用しようとしている。

# 結論
Next.jsのバージョン13以上では、初回インストール時にApp Routerを有効にすることができる。
特に気にせずしていたが、クリーンアーキテクチャの観点では従来のPages Routerが良さそう。

# 調査内容

ChatGPT曰く、以下の観点で決めれば良いらしい。

Pages Router
- getServerSideProps() など、従来の SSR の仕組みを使いたい
- Next.js の API 機能 (pages/api/) を使いたい
- Zustand などの状態管理を useEffect で管理したい

App Router
- サーバーコンポーネント（Server Components）を活用したい
- クライアントサイドとサーバーサイドを統合したい
- 今後の Next.js の最新機能を使っていきたい



また、クリーンアーキテクチャの観点で比較もしてもらった。
| 比較項目 | Pages Router | App Router |
|:-:|:-:|:-:|
| フォルダ構成の分離 | src/interface/pages/ にまとめやすい | src/app/ に統合されがち |
|UIとビジネスロジックの分離 | getServerSideProps / getStaticProps で分けやすい | サーバーコンポーネントでロジックが UI に寄りがち|
|APIの管理	 | pages/api/ を infrastructure/ に分けて整理できる | 	app/api/ だと src/infrastructure/ への分離が難しい
|状態管理 (Zustand, Redux)	 | クライアントコンポーネントで問題なく使える | 	サーバーコンポーネントだと扱いにくい
|フロントとバックエンドの境界線 | 	pages/ はフロント専用なので明確に分離できる | 	app/ では API を含めた統合的な設計が求められる
2. Ruby on Railsの環境構築をする

## ゴール
Git管理しているrailsアプリの環境構築をする

## 関連する記事
[1. webページをデプロイするために、EC2インスタンスを起動する](https://qiita.com/shimekake-hanaka/items/1062fffe33a966002feb)
[2. Ruby on Railsの環境構築をする](https://qiita.com/shimekake-hanaka/items/fd7e6839bd2db8e8c877)
[3. pumaで起動してipアドレス指定でhttp通信ができるようにする](https://qiita.com/shimekake-hanaka/items/e3715ef81d98bb3a2b4b)
[4. https://{サブドメイン}でrailsを表示できるようにする](https://qiita.com/shimekake-hanaka/items/bf34dc0b553784b48c19)

### Rubyのインストール
必要なパッケージをインストール
```
sudo yum install git gcc openssl-devel
```
rbenvをclone
```
cd ~
git clone https://github.com/sstephenson/rbenv.git .rbenv
```
rbenvの環境変数を設定する
```
$ PATH="$HOME/.rbenv/bin:$PATH"
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
```
rubyをbuildするための「ビルドツールと依存パッケージ、ライブラリ」をインストールする
```
sudo dnf groupinstall -y "Development Tools"
sudo dnf install -y gcc gcc-c++ make bzip2 openssl-devel readline-devel zlib-devel libffi-devel
sudo dnf install -y libyaml-devel
```


ruby-buildのインストール
```
git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
```

rubyのインストール
```
$ rbenv install -l
3.1.6
3.2.7
3.3.7
3.4.2
$ rbenv install 3.2.2
```
インストールしたバージョンに切り替え
```
$ rbenv global 3.2.2
$ rbenv local 3.2.2
```
rubyのバージョン確認
```
$ ruby -v
ruby 3.4.2 (2025-02-15 revision d2930f8e7a) +PRISM [aarch64-linux]
```
### Ruby on Railsプロジェクトの環境構築
#### gitと接続するための設定をする
- インスタンス内でSSHキーを生成する
```
$ ssh-keygen -t rsa -b 4096 -C "githubで使用しているメアド"
$ cat ~/.ssh/id_rsa.pub 
```
- 上で作成したSSHキーを、githubの「SSH and GPG keys」に設定する
- インスタンス内で、githubのSSH接続を確認する
```
$ ssh -T git@github.com
Hi user_name! You've successfully authenticated, but GitHub does not provide shell access.
```
#### git cloneする

注：/var/www の権限が、ec2-user（ ~/.ssh/id_rsa.pubを登録したユーザー）であること
（もしくは、他ユーザーにも書き込み権限が付与されていること）
→今回は、/var/wwwの権限をec2-userの755に設定した。
```
$ cd /var/www/
$ git clone {cloneしたいソースのSSH URL}
```

#### Gemをインストールする
1. 今回はgemの'pg'を使用するため、postgreSQLをインストールする
```
sudo yum install -y postgresql-devel
```

2. Gemfile.lockのインストールをする
- Gemfile.lockのプラットフォームが、x64-mingw-ucrt（Windows）のため、 x86_64-linux（64bit Linux）に修正する
```
bundle lock --add-platform aarch64-linux
```
Gemfile.lockを指定するオプション(--deployment)と
インスタンスタイプが低く、途中でkilledされてしまうので、1つずつインストールするオプション(-j1)をつけて、bundle installする
```
bundle install -j1 --deployment
```

railsのプロジェクトを動かしてみる
```
rails s
```

## 途中で詰まったところ
### tmpディレクトリの容量が100%になった
容量の確認
```
$ df -h
Filesystem        Size  Used Avail Use% Mounted on
devtmpfs          4.0M     0  4.0M   0% /dev
tmpfs             210M     0  210M   0% /dev/shm
tmpfs              84M  480K   84M   1% /run
/dev/nvme0n1p1    8.0G  2.6G  5.4G  33% /
tmpfs             210M  210M     0 100% /tmp
/dev/nvme0n1p128   10M  1.4M  8.7M  14% /boot/efi
tmpfs              42M     0   42M   0% /run/user/1000
```
tmpディレクトリ下を削除
```
$ sudo rm -rf /tmp/*
```

tmpディレクトリの容量を一時的に上げる
```
sudo mount -o remount,size=2G /tmp
```
論理演算子「??」「||」

# ??（null合体演算子）
左側の値が null または undefined の場合に右側の値を返す。
```javascript:sample1
let a = null;

// 以下は同じ結果になる
let b = (a !== null && a !== undefined) ? a : "デフォルト値";

let b = a ?? "デフォルト値";
```

# ??=（null合体代入演算子）
左側の変数が null または undefined の場合にのみ代入する。
```javascript:sample2
let a = null;

// 以下は同じ結果になる
if (a === null || a === undefined) {
  a = "新しい値";
}

a ??= "新しい値";
```
# ||（OR演算子）
左側の値が「falsy」な場合に右側の値を返す。
```javascript:sample3
let a = 0;

// 以下は同じ結果になる
let b = a ? a : "デフォルト値";

let b = a || "デフォルト値";
```
# ||=（OR代入演算子）
左側の値がfalsyの場合にのみ代入する。
```javascript:sample4
let a = 0;

// 以下は同じ結果になる
if (!a) {
  a = 10;
}

a ||= 10;
```
# 「??」「||」の使い分け
+ 0 や "" を許容する場合は `??` を使う
+ 0 や "" を許容しない場合は || を使う
r2rでROS2ノードを書いてみる

## 概要

ros2をrust(r2r)で記述し、自分でPUbSubのコードを書く手順を説明します。


## パッケージ作成
まず以下のようなパッケ−ジを参考に作成します。` cargo new `かめんどくさければ適当なbashファイルを作ってテンプレート作成してもいいと思います。
`dummy.c`はcolconでビルドするために必要になります。

https://github.com/m-dahl/r2r_minimal_node


 
## 追加

一つのパッケージに複数のノードを書く場合、以下のような記述を追加してください。

``` Cargo.toml
[[bin]]
name = "test_publisher"
path = "src/test_publisher.rs"

[[bin]]
name = "test_subscriber"
path = "src/test_subscriber.rs"
```

```CMakeLists.txt
install(PROGRAMS
  ${CMAKE_SOURCE_DIR}/target/colcon/test_publisher${SUFFIX}
  ${CMAKE_SOURCE_DIR}/target/colcon/test_subscriber${SUFFIX}
  DESTINATION lib/${PROJECT_NAME}
)

```

## ビルド
ROS2のワークスペースでビルドを行います。

`colcon build`

ビルドが完了したら、以下のコマンドでノードを実行できます。

```
ros2 run ros2_rust_example test_publisher
ros2 run ros2_rust_example test_subscriber
```

これで、r2rでPubSub通信ができました。
動的に追加される要素に対してイベントを付与

# イベントデリゲーション（Event Delegation）
通常、静的な要素には直接イベントリスナーを設定できるが、動的に生成される要素には適用されない。
そこで、親要素にイベントを設定し、動的な要素にもイベントを適用する。

## 実装例
```html:samle_html
<div id="hoge">
  <button class="foo">ボタン1</button>
  <button class="foo">ボタン2</button>
</div>
<button id="add">ボタン追加</button>
```
```javascript:samle_js
// 個々の要素に直接イベントを付与（動的な要素には適用されない）
$('#hoge .foo').on('click', function(e) {
  alert('ボタンがクリックされました！');
});

// 親要素にイベントを設定（イベントデリゲーション：動的要素にも適用可能）
$('#hoge').on('click', '.foo', function(e) {
  alert('ボタンがクリックされました！');
});

// 動的にボタンを追加する
$('#add').on('click', function() {
  $('#hoge').append('<button class="foo">新しいボタン</button>');
});
```
更改用户的日期格式


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3795764/5d71ca1c-2712-4764-aeff-cdc570346c25.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3795764/c6dcfecc-a831-413f-8637-88bca1b321b2.png)
Yii（PHP）における正規表現

Yii（PHP）でよく使われる正規表現（Regex）を紹介します。  
特に **バリデーション** や **データチェック** に使われるパターンを中心にまとめました。

---

## **1. 数字関連**
| 目的 | 正規表現 | 説明 |
|------|---------|------|
| 数字のみ | `/^\d+$/` | 半角数字のみ許可（整数） |
| 整数（正負含む） | `/^-?\d+$/` | マイナス記号を含む整数 |
| 小数（正負含む） | `/^-?\d+(\.\d+)?$/` | 小数点を含む数値 |
| 電話番号（ハイフンあり） | `/^([0-9-])+$/` | `090-1234-5678` 形式 |
| 電話番号（日本国内、10-11桁） | `/^\d{10,11}$/` | `09012345678` 形式 |
| 郵便番号（日本：123-4567） | `/^\d{3}-\d{4}$/` | `123-4567` のみ許可 |

---

## **2. 文字列関連**
| 目的 | 正規表現 | 説明 |
|------|---------|------|
| 半角英字のみ | `/^[a-zA-Z]+$/` | 半角英字（大文字・小文字） |
| 半角英数字のみ | `/^[a-zA-Z0-9]+$/` | 半角英数字 |
| 半角英数字 + 一部記号 | `/^[a-zA-Z0-9_-]+$/` | ハイフン `-`、アンダースコア `_` を含む |
| 全角ひらがなのみ | `/^[ぁ-んー]+$/u` | ひらがなのみ（`ー` を含む） |
| 全角カタカナのみ | `/^[ァ-ヶー]+$/u` | カタカナのみ（`ー` を含む） |
| 全角日本語（漢字・ひらがな・カタカナ） | `/^[一-龠々ぁ-んァ-ヶー]+$/u` | 日本語のみ |
| 氏名（ひらがな・カタカナ・漢字） | `/^[ぁ-んァ-ヶ一-龠々ー\s]+$/u` | スペースを含む氏名入力 |

---

## **3. メールアドレス**
| 目的 | 正規表現 | 説明 |
|------|---------|------|
| メールアドレス（一般的） | `/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/` | `test@example.com` 形式 |

Yiiでは、メールアドレスのバリデーションは **`email` ルール** を使うのが一般的。
```php
[['mail'], 'email']
```

## **4. パスワード**
| 目的 | 正規表現 | 説明 |
|------|---------|------|
| 8文字以上の英数字 | `/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,}$/` | 英字・数字を両方含む8文字以上 |
| 8文字以上の英数字＋記号 | `/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[a-zA-Z\d!@#$%^&*]{8,}$/` | 記号を含む |
| 大文字・小文字・数字・記号を含む8文字以上 | `/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/` | 強力なパスワード |

---

## **5. URL**
| 目的 | 正規表現 | 説明 |
|------|---------|------|
| URL（http/https） | `/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/` | `http://example.com` |

Yiiの `url` ルールを使うのが一般的：
```php
[['website'], 'url']
```
---

## **6. 日付・時間**
| 目的 | 正規表現 | 説明 |
|------|---------|------|
| YYYY/MM/DD | `/^\d{4}\/\d{2}\/\d{2}$/` | 2024/02/21 形式 |
| YYYY-MM-DD | `/^\d{4}-\d{2}-\d{2}$/` | 2024-02-21 形式 |

Yiiの `date` ルールを使うのが一般的：
```php
[['birth_date'], 'date', 'format' => 'php:Y-m-d']
```
---

## **7. Yiiでの使い方**
Yiiの `rules() `に正規表現を適用する場合：
```php
public function rules()
{
    return [
        [['mail'], 'match', 'pattern' => '/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/', 'message' => 'メールアドレスの形式が正しくありません。'],
        [['tel'], 'match', 'pattern' => '/^([0-9-])*$/', 'message' => '電話番号は数字とハイフンのみで入力してください。'],
        [['zip_code'], 'match', 'pattern' => '/^\d{3}-\d{4}$/', 'message' => '郵便番号は「123-4567」の形式で入力してください。'],
        [['password'], 'match', 'pattern' => '/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,}$/', 'message' => 'パスワードは8文字以上で英字と数字を含めてください。'],
    ];
}
```
---
## **8. まとめ**
数字系 → `/^\d+$/`（整数）、`/^\d{10,11}$/`（電話番号）
文字列系 → `/^[ぁ-んー]+$/u`（ひらがな）、`/^[ァ-ヶー]+$/u`（カタカナ）
メール → `/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/`
パスワード → `/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,}$/`（8文字以上の英数字）
日付・時間 → `/^\d{4}-\d{2}-\d{2}$/`（YYYY-MM-DD）

## 参考
[Yii 2.0 決定版ガイド：コア・バリデータ](https://www.yiiframework.com/doc/guide/2.0/ja/tutorial-core-validators)
リストのインデックスが0から始まる理由

## はじめに
Pythonなど多くのプログラミング言語ではリスト、もしくは配列などのインデックスは0から始まります。
プログラミングを学習し始めた時からそういうものだと思って今まで来ました。

なぜインデックスは0から始まるのか？を自分なりに調べたので共有いたします。

## インデックスが1から始まる言語（1-Based Indexing）
私には馴染みが無く知りませんでしたが、どうやらインデックスが1始まるプログラミング言語もあるようでした。

### Lua

```lua
local fruits = {"apple", "banana", "cherry"}
print(fruits[1])  -- apple
```

### Fortran

```fortran
INTEGER :: numbers(5) = [1, 2, 3, 4, 5]
PRINT *, numbers(1)  -- 1
```

### R

```R
numbers <- c(10, 20, 30)
print(numbers[1])  -- 10
```

他にも```COBOL```、```matlab```、```Julia```、```Smalltalk```など思ったより多くの言語でインデックスが1から始まるものがありました。

これらの言語の歴史は古く、数学や統計学、科学分野で利用されていて、配列を直感的に操作できる1-Based Indexingで作られているようです。

単純に配列の2番目のインデックスは```2```になるのでわかりやすいですね。

## インデックスが0から始まる言語（0-Based Indexing）

どうやらC言語の登場から```0-Based Indexing```が普及したようです。
C言語に影響を受けた言語では採用されています。

### Python
```python
fruits = ["apple", "banana", "cherry"]
print(fruits[1]) # banana
```

- C++
- C#
- Java
- PHP
- JavaScript
- Go
などなど、馴染みのある言語では大体```0-Based Indexing```です。

### 0から始まる理由
C言語はハードウェアに比較的近い言語で、メモリを直接操作ができる言語です。配列をメモリに保存する際、配列の要素は連続したアドレスに配置され、arr[0] は配列の先頭アドレスを指します。

配列 ```arr[i]```にアクセスするとき、```先頭アドレス + (i * 要素サイズ)```でアクセスできます。

インデックスが1から始まると ```先頭アドレス + ((i - 1) * 要素サイズ)```になり若干非効率になります。

またエドガー・W・ダイクストラという方がこのように主張しています。
[Why numbering should start at zero](https://www.cs.utexas.edu/~EWD/transcriptions/EWD08xx/EWD831.html)

```2 ≤ i < 13```

このように下限を含んで上限を含まない形式が優れていると言っています。
これは```13 - 2 = 11```となり配列の長さと一致するからです。

また、0から始めると ```0 ≤ i < N```とシンプルに表現できます。
こうすることで```N```の数と配列の長さが一致します。

若干、そうなのか？と思う部分もあるが、
ダイクストラ氏は数学的な美しさ、プログラミングの簡潔さ、そして実践的な経験から見て、最も理にかなった選択であると主張しています。


### 個人的見解
直感的にわかりやすいのは```1```から始める方がわかりやすいと思ったが、裏側の仕組みメモリアドレスへの保存などを考慮すると```0```からのようが効率が良いから```0-Based Indexing```が採用されている大きな要因なのではと感じた。

## さいごに
どちらが優れているとかはないですが、それぞれの特徴や背景を知ることで少しプログラミングの知識も増えたような気がしています。
祝日を考慮したジョブスケジューリングの方法

## はじめに
企業のIT運用におけるジョブのスケジューリングについて、祝日が絡むと調整が必要です。例えば、祝日に予定されたジョブを翌営業日に実行する「祝日振り替え」を行う場合、従来のスケジューリング方法では、担当者の手動による調整が求められることがあります。しかし、クラウド型ジョブスケジューラーサービスを利用すると、「祝日振り替え」を簡単に自動化でき、担当者の手間とミスのリスクを減らせます。

## クラウド型ジョブスケジューラーサービスでできること
クラウド型ジョブスケジューラーサービスでは、業務カレンダーの作成と振り替え設定が可能なGUIが提供されています。これにより、祝日に予定されたジョブを自動で振り替えることができます。以下に、業務カレンダーの作成とスケジューリングの設定例を示します。
### 業務カレンダーの作成
土日祝日や休業日を定義したカレンダーを作成します。このカレンダーは、ジョブのスケジューリングの基準となります。
<img width="700" alt="calendar.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3889837/77c492ae-ed96-4abe-8bdc-5160a7afb9e6.png">
### 振り替えのスケジューリング設定
ジョブのスケジューリング時に、休業日にあたる実行予定の振り替え方法を定義します。これにより、祝日に予定されたジョブが、自動的に前後の営業日に振り替えられます。
<img width="700" alt="schedule.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3889837/3a5ad6e6-ceab-4eb7-94da-1d621756fef9.png">

## おわりに
本記事では、クラウド型ジョブスケジューラーサービスを活用した「祝日振り替え」の自動化について紹介しました。運用の効率化に役立てば幸いです。

## 参考リンク
- 株式会社日立ソリューションズ
\- クラウド型ジョブスケジューラーサービス
https://www.hitachi-solutions.co.jp/jobschedulerservice/
Reactで書いたポートフォリオをGithub Pagesにデプロイした

# 概要
2年前にHTMLとCSSで書いたポートフォリオをかっこいいやつにアップデートしてみたくなったので、思いつきでReactで書いてみることにした。ドメインを新たに取得するとお金がかかることが多いので、GitHubの無料枠で作りたかった。

# やったこと
### Step 1: ポートフォリオ作成
judygabさんの動画とソースコードを見ながら、見よう見まねで自分のポートフォリオを作成し、気が済むまでカスタムした。過去に何度かソースコードを間違えて消すことがあったので、ポートフォリオの編集作業は`portfolio-draft`のリポジトリで行った。

https://github.com/judygab/web-dev-projects/tree/main/personal-portfolio 


### Step 2: デプロイの準備
デプロイ用に`portfolio-dev`のリポジトリ（Reactアプリ）を作成する。

[参考にした記事](https://zenn.dev/jingtian/articles/5138db1a99cf24)を元に、とりあえず空のプロジェクトをデプロイして、動作確認を行う。

:::note info
課金せずにGitHub Pagesを使用するには、デプロイする予定のリポジトリ（ここでは`portfolio-dev`をpublicにする必要がある）
:::


### Step 3: ポートフォリオをデプロイ
`portfolio-draft`の中身を`portfolio-dev`にコピペして、それぞれのリポジトリに存在する`package.json`をChatGPTにお願いして、いい感じに統合してもらう。

あとはこれらのコマンドを叩く（**これが正解かどうかはわからないが、とりあえず動いた**）
```
$ cd portfolio-dev
$ npm run build
$ npm run deploy
```



# 苦労
- 参考にしたソースコードが3年前のものなので、Reactの構文が変わったりしてWarningが出ることがよくあった。React初学者なのでとても困惑した。
- **リポジトリを公開しないとGitHub Pagesを無料枠で使うことができない**、ということを知らなかったので、必要以上にあれこれ調べるハメになった。（表示されている文章をちゃんと読めばよかった）
![Screenshot 2025-03-06 at 4.27.26 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921408/5a09f30d-7778-4c37-ba87-498ce2fd346c.png)

- GitHub Actionsも使ってみたかったが、何が何だかよくわからなかったので、今回は断念した。



# 参考文献
- ポートフォリオの参考

https://github.com/judygab/web-dev-projects/tree/main/personal-portfolio 

- デプロイ時の参考

https://zenn.dev/jingtian/articles/5138db1a99cf24