2025-02-25

Docker上で Vite + React の本番用・開発用サーバーを同時起動する方法

なぜそんなことをするの？

私は自分のサービスを自分のPCで用意したDockerコンテナで公開している。
そんななかで、今まで本番環境と開発環境を分けていなかった。
そのため開発途中に公開されているものが動かないことがあったのだ。

そこで、本番環境と開発環境を分けることにした。
だが、わざわざ同じファイルを2つ用意するのは面倒だと思い、
Dockerを使って本番環境と開発環境を同時に動かすことにした。

概要

1つのプロジェクトで次の2つのサーバーを同時に動かします：

本番用サーバー（ポート5000）
- 安定した環境で動作する
- 変更が簡単に反映されない（安全性重視）
- ユーザーに見せるための完成版
開発用サーバー（ポート8888）
- ホットリロード機能付き（コードを変更すると自動で画面に反映される）
- プログラムの変更をすぐに確認できる
- 開発者が使うためのテスト環境

※注意：通常は本番環境と開発環境は別々に管理するのがベストです。この方法は個人開発や小規模プロジェクト向けです。

ステップ 1: プロジェクトを作る

まず、Vite+Reactのプロジェクトを作ります：

npm create vite@latest

質問には次のように答えます： * プロジェクト名：vite * フレームワーク：React * 言語：JavaScript + SWC

成功すると次のメッセージが表示されます：

Done. Now run:

  cd vite
  npm install
  npm run dev

指示に従って次のコマンドを実行しましょう：

cd vite
npm install

これでフォルダ内に必要なファイルが作成されます。

ステップ 2: Viteの設定ファイルを分ける

本番用と開発用の設定を分けるために、2種類の設定ファイルを作ります。

開発用の設定（`vite.config.dev.js`）

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()],
  base: '/dev/', // 開発用ルート URL
  server: {
    port: 8888, // 開発用のポート番号
    allowedHosts: ['localhost', '127.0.0.1'], // 利用するホスト名（必要に応じて調整）
    hmr: {
      host: 'localhost', // HMR用のホスト名
      port: 8888,
    },
  },
  build: {
    outDir: 'dist',   // ビルドしたファイルの出力先
    sourcemap: true,  // ソースマップを出力（デバッグ用）
  },
});

本番用の設定（`vite.config.prod.js`）

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5000,    // 本番用のポート番号
    open: false,   // 起動時にブラウザを自動で開かない
    allowedHosts: ['localhost'], // 使用するホスト名
  },
  build: {
    outDir: 'dist',   // ビルドファイルの保存場所
    sourcemap: false, // 本番環境ではソースマップは不要
  },
});

ステップ 3: 環境変数の設定（必要な場合）

もし環境変数を使いたい場合は、プロジェクトのルートフォルダに.envファイルを作ります：

VITE_ENVIRONMENT=value

ステップ 4: Dockerファイルを作る

開発用Dockerfile（`Dockerfile.dev`）

# Node.jsの最新バージョンを使用
FROM node:latest  

# 作業ディレクトリを設定
WORKDIR /app

# 環境変数の設定
ARG VITE_ENVIRONMENT
ENV VITE_ENVIRONMENT=${VITE_ENVIRONMENT}

# 必要なファイルだけをコピー
COPY package*.json ./
COPY vite.config.dev.js ./vite.config.ts

# パッケージをインストール
RUN npm install

# 開発サーバーを起動するコマンド
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

本番用Dockerfile（`Dockerfile.prod`）

# ビルド用のステージ
FROM node:latest

WORKDIR /app

# 環境変数の設定
ARG VITE_ENVIRONMENT
ENV VITE_ENVIRONMENT=${VITE_ENVIRONMENT}

# パッケージをインストール
COPY package*.json ./
RUN npm install

# ソースコードをコピーしてビルド
COPY . .
COPY vite.config.prod.js ./vite.config.ts
RUN npm run build

# Nginxを使って配信するステージ
FROM nginx:latest

# ビルドしたファイルをNginxの公開フォルダにコピー
COPY --from=0 /app/dist /usr/share/nginx/html
COPY default.conf /etc/nginx/conf.d/default.conf

# Nginxを起動
CMD ["nginx", "-g", "daemon off;"]

ステップ 5: Nginxの設定

Nginxを使って、アクセス先のURLによってサーバーを振り分けます：

server {
    listen 80;
    listen [::]:80 ipv6only=on;
    server_name _;

    # 通常のアクセスは本番用サーバーへ
    location / { 
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    # /dev/ へのアクセスは開発用サーバーへ転送
    location /dev/ {
        proxy_pass http://vite-dev:8888;
        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;
    }

    # エラーページの設定
    error_page 404 /index.html;
    location = /index.html {
        root /usr/share/nginx/html;
        internal;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

ステップ 6: docker-compose.ymlファイルの作成

複数のコンテナを一度に管理するための設定ファイルを作ります：

services:
  # 本番用サーバー
  vite-prod:
    build:
      context: ./vite
      dockerfile: Dockerfile.prod
      args:
        VITE_CONFIG: vite.config.prod.ts
        VITE_ENVIRONMENT: ${VITE_ENVIRONMENT}
    container_name: vite-prod
    environment:
      VITE_ENVIRONMENT: ${VITE_ENVIRONMENT}
    ports:
      - '80:80'  # ブラウザからアクセスするポート

  # 開発用サーバー
  vite-dev:
    build:
      context: ./vite
      dockerfile: Dockerfile.dev
      args:
        VITE_CONFIG: vite.config.dev.ts
    container_name: vite-dev
    environment:
      VITE_ENVIRONMENT: ${VITE_ENVIRONMENT}
      CHOKIDAR_USEPOLLING: 'true'  # ファイル変更を監視するための設定
    ports:
      - '8888:8888'  # 開発用ポート
    volumes:  # ホットリロードのために必要なフォルダを共有
      - ./vite/index.html:/app/index.html
      - ./vite/src:/app/src
      - ./vite/public:/app/public

最終的なフォルダ構成はこのようになります：

ステップ 7: コンテナを起動する

全ての準備ができたら、次のコマンドでコンテナを起動します：

docker compose up -d --build

ステップ 8: 動作確認

ブラウザで次のURLにアクセスして確認しましょう：

本番用サーバー： http://localhost （または自分のIPアドレス）
開発用サーバー： http://localhost/dev/ （または自分のIPアドレス/dev/）

開発用サーバーでは、srcフォルダ内のファイルを編集すると、保存するだけで自動的にブラウザに反映されます（ホットリロード）。本番用サーバーは安定した状態を保ち、変更を反映するには再ビルドが必要です。

補足：ホットリロードとは？

ホットリロードとは、コードを変更したときにブラウザを手動で更新しなくても、コードの変更が自動的に画面に反映される便利な機能です。
開発中にコードを保存すると、変更された部分だけが更新され、アプリケーションの状態を維持したまま新しいコードが適用されます。
つ.ま.り.開発の効率が大幅アップってね！

注意点

この方法は個人開発や学習用途に向け
本格的なプロジェクトでは、本番環境と開発環境は完全に分離したほうがいい
allowedHostsやhostの設定は自分の環境に合わせて変更してね

2025-02-25

claude-3.7-sonnetが出たぞ！何が進化した！？他モデルとの違いは！？

claudeといえば、なかなか新しいモデルがほかモデルと比べて更新されないわりに、利用者の意図を組んでコーディングをしてくれたり、流暢で自然な日本語を出力しているいいモデルだ。全然新モデルが来ないなぁと思っていたその最中！朝にcursorでコーディングをしようとしたらモデル選択欄に見える[claude-3.7-sonnet]と[claude-3.7-sonnet-thinking]!! これは来たな、ということで、色々調べ従来、他モデルと比べてどれくらい優れいているのかをまとめた。

これは公式の出してる各モデルとのベンチマークのスコアを比較した表である

各ベンチマークについてみていこう

ベンチマーク別モデル性能ランキング

凡例:

モデル (略称):
- Grok 3 Beta: Grok 3 Beta (Extended thinking)
- 3.7 64K: Claude 3.7 Sonnet (64K extended thinking)
- 3.7 No ext: Claude 3.7 Sonnet (No extended thinking)
- 3.5 new: Claude 3.5 Sonnet (new)
- o1: OpenAI o1¹
- 03-mini: OpenAI 03-mini
- DeepSeek RT: DeepSeek RT (32K extended thinking)

1. Graduate-level reasoning (GPQA Diamond)

内容: 大学院レベルの高度な推論能力を評価する。

ランキング表:

順位	モデル	スコア
1	Grok 3 Beta	84.6%
2	3.7 64K	84.8%
3	03-mini	79.7%
4	o1	78.0%
5	DeepSeek RT	71.5%
6	3.7 No ext	68.0%
7	3.5 new	65.0%

Claude 3.7 Sonnet - GPQA Diamondにおける強み:

Claude 3.7 Sonnet モデル、特に3.7 64Kモデルは、Grok 3 Betaに匹敵する大学院レベルの推論性能を発揮する。ランキング表でも上位に位置しており、特に3.7 64Kは最高スコアグループに迫る。拡張思考により、高度な知識と複雑な推論を要する問題への対応力が際立っている。

2. Agentic coding (SWE-bench Verified)²

内容: ソフトウェアのバグ修正タスクにおけるコーディング能力を評価する。

ランキング表:

順位	モデル	スコア
1	3.7 No ext	70.3% *¹
2	03-mini	49.3%
3	DeepSeek RT	49.2%
4	3.5 new	49.0%
5	o1	48.9%

*¹ 内部スコアリング

Claude 3.7 Sonnet - SWE-bench Verifiedにおける強み:

Claude 3.7 Sonnet モデル、特に3.7 No extモデルは、エージェント的なコーディングにおいてトップの性能を示す。ランキング表でも明らかなように、3.7 No extは他のモデルを大きく引き離し、特にツール使用と内部スコアリングで高いスコアを記録。ソフトウェアのバグ修正のような実践的なコーディングタスクにおいて、抜きん出た能力を発揮する。

3. Agentic tool use (TAU-bench)¹

内容: エージェントが実世界のretail（小売）とairline（航空）**のシナリオにおいてどのように機能するかをテストしています

ランキング表 (Retail):

順位	モデル	スコア
1	3.7 No ext	81.2%
2	03-mini	73.5%
3	3.5 new	71.5%
-	o1	データなし

ランキング表 (Airline):

順位	モデル	スコア
1	3.7 No ext	58.4%
2	03-mini	54.2%
3	3.5 new	48.8%
-	o1	データなし

Claude 3.7 Sonnet - TAU-benchにおける強み:

Claude 3.7 Sonnet モデル、特に3.7 No extモデルは、TAU-bench の小売・航空シナリオの両方で首位を獲得。ランキング表から明白なように、3.7 No extは他のモデルを凌駕するツール使用能力を示す。実世界におけるツール活用能力は、Claude 3.7 Sonnet の大きな強みである。

4. Multilingual Q&A (MMMLU)

内容: 多言語での質問応答能力を評価する。

ランキング表:

順位	モデル	スコア
1	Grok 3 Beta	87.7%
1	03-mini	87.7%
3	3.7 64K	86.1%
4	3.7 No ext	83.2%
5	3.5 new	82.1%
6	DeepSeek RT	79.5%

Claude 3.7 Sonnet - MMMLUにおける強み:

Claude 3.7 Sonnet モデル（3.7 64K、3.7 No ext）は、多言語質問応答においても高い位置を占める。ランキング表において、3.7 64Kはトップグループに次ぐスコア、3.7 No extもそれに近いスコアを記録。多言語での質問応答能力は、グローバルな情報アクセスや多文化コミュニケーションにおいて重要な武器となる。

5. Visual reasoning (MMMU Validation)

内容: 視覚的推論能力を評価する。

ランキング表:

順位	モデル	スコア
1	03-mini	78.2%
2	Grok 3 Beta	78.0% *²
3	3.7 64K	71.8% *²
4	3.7 No ext	71.8%
5	3.5 new	70.4%
-	DeepSeek RT	データなし

*² 検証スコア

Claude 3.7 Sonnet - MMMU Validationにおける強み:

Claude 3.7 Sonnet モデル（3.7 64K、3.7 No ext）は、視覚的推論でも堅実な性能を示す。ランキング表では中位に位置するが、MMMUベンチマークで高い検証スコアを達成しており、安定した視覚情報処理能力を持つことを示す。

6. Instruction-following (IFEval)

内容: 指示に従う能力を評価する。

ランキング表:

順位	モデル	スコア
1	3.7 64K	90.8% *²
1	3.7 No ext	90.8%
3	3.5 new	90.2%
4	DeepSeek RT	83.3%

*² 検証スコア

Claude 3.7 Sonnet - IFEvalにおける強み:

Claude 3.7 Sonnet モデル（3.7 64K、3.7 No ext）は、指示追従能力において傑出した性能を示す。ランキング表の通り、IFEval で最上位にランクインし、他のモデルを圧倒。指示された内容を正確に理解し、忠実に実行する能力は、Claude 3.7 Sonnet の信頼性を高める重要な要素である。

7. Math problem-solving (MATH 500)

内容: 数学の問題解決能力を評価する。

ランキング表:

順位	モデル	スコア
1	Grok 3 Beta	97.9%
1	03-mini	97.9%
3	DeepSeek RT	97.3%
4	o1	96.4%
5	3.7 64K	82.2% *²
5	3.7 No ext	82.2%
7	3.5 new	78.0%

*² 検証スコア

Claude 3.7 Sonnet - MATH 500における強み:

Claude 3.7 Sonnet モデル (3.7 64K、3.7 No ext) は、MATH 500においても高い平均スコアを維持する。ランキング表では上位グループに及ばないものの、検証スコアは安定しており、高度な数学問題解決能力の一端を示す。今後の検証精度向上が期待される。

8. High school math competition (AIME 2024)³

内容: 高校数学コンテスト AIME レベルの高度な数学問題解決能力を評価する。

ランキング表:

順位	モデル	スコア
1	Grok 3 Beta	93.3% *²
2	03-mini	87.3%
3	3.7 64K	80.0% *²
4	o1	83.3% *²
5	DeepSeek RT	79.8%
6	3.7 No ext	23.3%
7	3.5 new	16.0%

*² 検証スコア

Claude 3.7 Sonnet - AIME 2024における強み:

Claude 3.7 Sonnet モデル、特に3.7 64Kモデルは、AIME 2024 という超難関ベンチマークにおいて、検証スコアで目覚ましい成果を示す。ランキング表ではGrok 3 Betaに次ぐ位置につけ、03-miniやo1 と肩を並べる。高度な数学的思考力を要する問題に対し、拡張思考を用いた3.7 64K は高い問題解決能力を発揮する。ただし、3.7 No ext はスコアが大幅に低下することから、このレベルの難問には拡張思考が不可欠であると言える。

Claude 3.7 Sonnet 全体的な強みまとめ:

Claude 3.7 Sonnet は、以下のベンチマークにおいて特に強みを発揮する。

GPQA Diamond (大学院レベル推論): 高度な推論能力でトップクラスに匹敵
SWE-bench Verified (エージェント的コーディング): 実践的コーディング能力で他を圧倒
TAU-bench (実世界ツール活用): ツール使用能力で首位を独走
IFEval (指示追従能力): 指示の正確な理解と実行で最高レベル
MMMLU (多言語Q&A): 多言語質問応答でトップモデルに匹敵

Claude 3.7 Sonnet は、高度な知的能力と実用性を兼ね備えた、極めてバランスの取れた高性能モデルであると言えるだろう。特に、3.7 No ext のエージェント的コーディングとツール活用能力、3.7 64K の高度な推論能力と指示追従能力は、注目に値する。

数学の問題とか、推論はほかモデルと比べて苦手かもしれないなぁ。だけどコーディングや、retail、airlineタスクのように業務で使うのはめちゃ優れてるな... こちらの意図も正しく組む性能も高いし、アプリ開発にめっちゃ使っていくしかねぇな！

2024-12-07

グランドシオカラウルトラミックスモダン歌詞

好きになったのに歌詞が無かったので

www.youtube.com

- - - - -

やうぇにまれぃみれきゃらひれ
じゅりゆみれけらそん
(ラスタルミナイヨナビアルバウェ)
きれひ"ゃ"りよりへらへにゅらへら
ぬんにゅらうねらゆらうぇらにぃめらに

わつぁつぁねもら
たしにらおまえげもら
かにしらようかにしらよう
まつめらもうがながなばいばい
わつぁつぁねもら
かにしらばいばいげもら
わさぽんなちぇにらがなばい

みゅはなみゅはな
みゅはにょらうにみゅらはにゃ
(なんにゅるにれにふぁふぇらひ)
ちゅらなちゅらな
ちゅらあちみにゆらにゃ
(にゅるにれはらふぇふぇふぇ)

ニュラニャンディ
アンダマピンディ
テュチャンディタンアンニガランティナハ
(ラスタルミナイヨナビアルバウェ)

きなへんざごんねのんいりよう
みりまみりまほうこう
ヤルダクディトロディイェンナ
チャンダルキ

イカ、よろしくーーー！（イカ、よろしく～～～）

アレブラトメソクェオ
ソンヤコモンダオランナ
アレブラトメソクェオ
ヤラブラティヤバラナ
(ぬ"んにゅらうねらゆらうぇらふぃめら)

アレブラトメソクェオ
(なにれじゅて)
ソンヤコモンダオランナ
(みれきゃらへりゃにれゆみれけらそん)
アレブラトメソクェオ
(きれひゃりぬりへらへにゅらへら)
ヤラブラティヤバラナ
(ぬんにゅらうねらゆらうぇらふぃめらに)

ぬりたく～る... テンタクル!!

ラスタルミナイヨナビアルバウェ
かにしらようかにしらよう
まつめらもうがながなばいばい
(ラ～ラ～ラ～ラ～ララ～ラ～ラ～ラ～♪)

ラスタリポセイニュゼダラハンキスタ
かにしらばいばいげもら
わさぽんなちぇにらがなばい

WOW
ウェカニラスタニノクライ
ピカポラバリニノハイ
(やうぇにまれぃ)
オニャサイヤウスタスブロイノワ
(みれきゃらひれじゅりゆみれけらそん)
(Hey! Hey! Hey! Hey! Hey! Hey! らいはい!)
WOW
ウィカニラスタニノクライ
ピカポラバリニノハイ
(にゅんねんないうぃらもらにらくらい)
ティリュガイスプラエンプラエンユウォビラ

ほなカイサン!!!

てゅりるりみょってうぃにうぃに

てゅりるりみょへうぃにうぃにゆわに

ふぃはなんねに
ふぃはなんねににぇのうぇに

にょえひにへらへなうぇのに
しゅめりひはなふぃは

ふぃはなみふぁにゅえのうぇに
ふぃはなみふぁにゅえのうぇな

にょえひにへらへなうぇのに
にゅめりひはなふぃはゆうぇに

Hey! Hey! Hey! Hey!
Hey! Hey! Hey! Hey!
Hey! Hey! Hey! Hey!

ほなカイサン!!!

(イイダによる即興的なボーカルテクニック)
てらこにで！

ライゾンネイにゅらざすてい
ディスミサイドンギャロギャロ

ワスティレイミュン
みなけいじゅん
コゾザワデンジョリルニ

ライゾンネイニュラザステイ
ディスミサイドンギャロギャロ

ワスティレイミュンミナケイジュン
トジュラナハベテゼリル
ビティンヌ WOW

ほなカイサン!!!

さぁさ　塗れ塗れ！
はぃやっさーやっさーやっさー！
(ミヤミヤ　フィーフェイ
ミヤミヤ　フィーフェイ)
カチコミ　(カチコミ)
へいへい　やってはー！
っは！っは！っは！っは！
それそれそれそれ！

ほいやっさ！　(ほいやっさ！)
はぃやぃやさっさー！
(ミヤミヤ　フィーフェイ
ミヤミヤ　フィーフェイ)
しっかりやって　(ホラガイ)
しっかりやって　(ホラガイ)
っすりっすりっすりっすり
ほらほらほらはー！

らーすたとっと　なーたよみへぇ
まーたみぃみさみゃ〜
らーたとっと　ぃしな〜たそなみ！
まーたみぃみさみゃ〜

かっとばせ〜！　す・り・み！
おぬしが塗らねば　誰が塗る？！
かっとばせ〜！　す・り・み！
ハイカラビビってる！
ハイ！ハイ！！

- - - - -

2024-07-06

Beats Fir Pro 買って後悔　耳が超いてぇ

先日メンタリストDaiGoさんが紹介したワイヤレスイヤホン「Beats Fit Pro」を購入した。

今日届いたので早速使ってみたら私の耳に全然合わなくて耳が辛かった。

今までは「Bose QuietComfort Ultra Earbuds」を使っていた。
ノイズキャンセリング性能で選んで、耳も痛くならないのでとても満足していた。
だが、最小音量の時でも低音が効きすぎてるのが少し不満だった。（それがこの製品の売りなのだが）
あと、ホワイトノイズがあることが気になるときが...あるかもなぁ。そこまで影響は少ないな。うん。

そんな中でメンタリストDaiGoさんが配信の中で「SONYやBoseとかいろいろ試したけどこれが最強だったよ」と「Beats Fit Pro」を紹介したのですよ。
何も考えず購入してたね。もしかしたら解決できるかもしれない。
ノイズキャンセリング性能があって！
耳が痛くならなくて！
最小音量が小さくて！
ホワイトノイズが少ない！
と勝手に決めつけて買いました。

で、今日昼頃に届いたので使ってみたのだが....イヤーバットの部分がクソ痛ぇ！
多分この耳を圧迫する形が、耳から落ちづらいようにすると思うのだが...痛いよぉ(´;ω;｀)

音量とか、通話性能とかノイズはよかったんやけど、ここまで耳に合わないとは思ってなかったぞよ
そういえば、友達から借りてAir Podsを付けたときも耳が痛くて辛かったっけ。
自分の耳には耳甲介を決まった形で押し付けるイヤホンは合わないのかもしれない。

まとめ

自分の耳には「Beats Fit Pro」が合わなかった。
けども、最低音量の低さ、通話のしやすさ、ホワイトノイズの少なさはいいと思えた。
まだ100点じゃないけど、自分の中では「Bose QuietComfort Ultra Earbuds」が妥協点
(資産があったらSONYも試したい)

万を超えるワイヤレスイヤホンを買った...!!

移動時間はできるだけDaiGoさんの放送を聞こうとしている。
そのとき、スマホのスピーカーで流しててもいいのだが、誰かとすれ違う時になぜか緊張感を覚えて思考が止まることがあった。
なので、ワイヤレスヘッドホンを用いて聞いていたのだが、まぁ暑い！！！！

夏が近づきヘッドホンを付けながら歩けなくなった。耳が蒸れて蒸れてずっとヘッドホンを付けてられねぇ！！
じゃあイヤホン使ってみようと思ったのだが...
過去に買った100均の優先イヤホンや中華性ワイヤレスイヤホンの最低音量がうるさすぎた経験があった。
そのため、少し高いものを買おうとし、色々調べて「Bose QuietComfort Ultra Earbuds」にたどり着いた

2024-05-20

歌詞の自動書き起こしの精度はどう上げればいいか。マルチモーダルで解決してみる

Automatic Lyric Transcription and Automatic Music Transcription from Multimodal Singingを読んで要約＋学習

ALT(Auto Lyric Transcription)とMLT(Automatic Music Transcription)において最近instがノイズとしてあるせいでなかなか精度が上がらなくなっている。

日本語のALTの歴史

最初はALTはHMM(隠れマルコフモデル)を用いることで実現させていた。
データセットには「DSing」と「DALI」を用いていたそうな。

曲の特徴を得るために、TDNN-F(因数分解時間遅延ニューラルネットワーク)を用いたDNN-HMMフレームワークを採用していたらしい。
また、ほかの研究ではCRNN[全体的な特徴をつかむことが得意なCNNと、時系列をうまく扱えるRNNを組み合わせたもの]を採用したものもあったらしい。

しかし、新しい仕組みを作ってもALTの研究はなかなか進歩しなかった。なぜなら大規模なデータセットが存在しないからである。
好きな楽曲を用いてもいいと思うかもしれないが、著作権を侵害するのでできない。

2024-05-06

New! Help me，ERINNNNNN!! 歌詞　(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！

19年前から存在する古の曲ですが、リニューアルして現代に舞い戻りました(´艸｀*)
ニコニコメドレー好きとしてはうれちい
www.youtube.com

正確な歌詞が見当たらなかったので置いときます

歌詞

One, a two, one, two, three
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）

(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！えーりん！えーりん！
HELP ME, ERINNNNNNNN!!
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！助けてえーりん！）

あぁ、どうしよう！？　高く振りあげたこの腕
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
私のお月様　逆さまのお月様
（(　ﾟ∀ﾟ)o彡゜助けてえーりん！）
もう、早くして！強く振りおろした腕は
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
あなたを呼ぶサイン　えーりん！あなたへのサイン

(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
(　ﾟ∀ﾟ)o彡゜助けてえーりん！
（(　ﾟ∀ﾟ)o彡゜助けてえーりん！）

(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
(　ﾟ∀ﾟ)o彡゜助けて！えーりん！
（イェーイ！）

「えーりん！えーりん！助けて！」今日も聞こえてくる
誠心誠意　まごころ込めて助けに行こう
永遠亭のウサギ達は　いつも無邪気
ほらまた誰かに　呼ばれてるよ
(Hey, come on!)

（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！助けてえーりん！）
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！助けてえーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！助けてえーりん！）
さぁ行こう

えーりんえーりん助けて今日も叫んでみる
不老不死蓬莱のお薬の力
鈴仙てゐの二人はまだ帰ってこない
誰かが来たもうダメだやられちゃうよ
ｱｧ～ｳ！

（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！助けてえーりん！）
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！助けてえーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！助けてえーりん！）
早く来て！

さぁ、助けましょう！　高く振りあがるあの腕
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
あなたはお姫様　わがままなお姫様
（(　ﾟ∀ﾟ)o彡゜助けてえーりん！）
ほら、急がなきゃ！　強く振りおろした腕は
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
私を呼ぶサイン　えーりん！私へのサイン！

みんな　右腕を上に大きく上げて！
俺の後に続いて叫んでね！
one two
one two three!

(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
(　ﾟ∀ﾟ)o彡゜りんっえー！りんっえー！
（(　ﾟ∀ﾟ)o彡゜りんっえー！りんっえー！）
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
(　ﾟ∀ﾟ)o彡゜えーりんりーん！
（(　ﾟ∀ﾟ)o彡゜えーりんりーん！）

(　ﾟ∀ﾟ)o彡゜いなば！いなば！
（(　ﾟ∀ﾟ)o彡゜いなば！いなば！）
(　ﾟ∀ﾟ)o彡゜いなば！てゐ！
（　ﾟ∀ﾟ)o彡゜いなば！てゐ！）
(　ﾟ∀ﾟ)o彡゜いなば！いなば！
（(　ﾟ∀ﾟ)o彡゜いなば！いなば！）
(　ﾟ∀ﾟ)o彡゜いなば！うどんげ！
（(　ﾟ∀ﾟ)o彡゜いなば！うどんげ！）

(　ﾟ∀ﾟ)o彡゜れいむ！れいむ！
（(　ﾟ∀ﾟ)o彡゜れいむ！れいむ！）
(　ﾟ∀ﾟ)o彡゜博麗霊夢！
（(　ﾟ∀ﾟ)o彡゜博麗霊夢！）
(　ﾟ∀ﾟ)o彡゜魔理沙！魔理沙！
（(　ﾟ∀ﾟ)o彡゜魔理沙！魔理沙！）
(　ﾟ∀ﾟ)o彡゜マスタースパーク！
（(　ﾟ∀ﾟ)o彡゜マスタースパーク！）

(　ﾟ∀ﾟ)o彡゜東方！東方！
（(　ﾟ∀ﾟ)o彡゜東方！東方！）
(　ﾟ∀ﾟ)o彡゜プロジェクト！
（(　ﾟ∀ﾟ)o彡゜プロジェクト！）
(　ﾟ∀ﾟ)o彡゜セカイのみんな！
（(　ﾟ∀ﾟ)o彡゜セカイのみんな！）
(　ﾟ∀ﾟ)o彡゜よろしく！
（(　ﾟ∀ﾟ)o彡゜よろしく！）

からの
(　ﾟ∀ﾟ)o彡゜おっぱい！おっぱい！
（(　ﾟ∀ﾟ)o彡゜おっぱい！おっぱい！）
(　ﾟ∀ﾟ)o彡゜おっぱい！おっぱい！
（(　ﾟ∀ﾟ)o彡゜おっぱい！おっぱい！）
(　ﾟ∀ﾟ)o彡゜おっきいおっぱい！
（(　ﾟ∀ﾟ)o彡゜おっきいおっぱい！）
(　ﾟ∀ﾟ)o彡゜おっぱいえーりん！
（(　ﾟ∀ﾟ)o彡゜おっぱいえーりん！）

(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！えーりん！えーりん！
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！助けてえーりん！

あぁ、どうしよう！？　高く振りあげたこの腕
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
私のお月様　逆さまのお月様
（(　ﾟ∀ﾟ)o彡゜助けてえーりん！）
もう、早くして！強く振りおろした腕は
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
あなたを呼ぶサイン　えーりん！あなたへのサイン
（もう一回！）

さぁ、助けましょう！　高く振りあがるあの腕
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
あなたはお姫様　わがままなお姫様
（(　ﾟ∀ﾟ)o彡゜助けてえーりん！）
ほら、急がなきゃ！　強く振りおろした腕は
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
私を呼ぶサイン　えーりん！助けてえーりん！

ラスト！いくぞ～！

(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）

(　ﾟ∀ﾟ)o彡゜え～～～りん！
（(　ﾟ∀ﾟ)o彡゜え～～～りん！）
(　ﾟ∀ﾟ)o彡゜え～～～りん！
（(　ﾟ∀ﾟ)o彡゜え～～～りん！）
(　ﾟ∀ﾟ)o彡゜えーりんりん！
（(　ﾟ∀ﾟ)o彡゜えーりんりん！）
助けてえーりん！（えーりん！）

これからも！ヨロシクゥ！

カラオケで歌う

最新のHelp me, ERINNNNNN!!を歌いましょう！

2024-05-06

ボーカロイドたちの歌う　Help me, ERINNNNNN!!　歌詞　懐かし新らしで涙

19年前から存在する古の曲ですが、リニューアルして現代に舞い戻りました(´艸｀*)
ニコニコメドレー好きとしてはうれちい
www.youtube.com

正確な歌詞が見当たらなかったので置いときます

歌詞

One, a two, one, two, three
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！）
(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！えーりん！えーりん！
HELP ME, ERINNNNNNNN!!
（(　ﾟ∀ﾟ)o彡゜えーりん！えーりん！助けてえーりん！）

(　ﾟ∀ﾟ)o彡゜とうほう！とうほう！
（(　ﾟ∀ﾟ)o彡゜とうほう！とうほう！）
(　ﾟ∀ﾟ)o彡゜ぷろじぇくと～！
（(　ﾟ∀ﾟ)o彡゜ぷろじぇくと～！）
(　ﾟ∀ﾟ)o彡゜せかいのみんな～！
（(　ﾟ∀ﾟ)o彡゜せかいのみんな～！）
(　ﾟ∀ﾟ)o彡゜よろしく～
（(　ﾟ∀ﾟ)o彡゜Yeah！）

みんな～いくよ～！
(　ﾟ∀ﾟ)o彡゜MEIKO！MEIKO！
（(　ﾟ∀ﾟ)o彡゜MEIKO！MEIKO！）
(　ﾟ∀ﾟ)o彡゜KAITO！KAITO！
（(　ﾟ∀ﾟ)o彡゜KAITO！KAITO！）
(　ﾟ∀ﾟ)o彡゜鏡音リン！
（(　ﾟ∀ﾟ)o彡゜鏡音リン！）
(　ﾟ∀ﾟ)o彡゜鏡音レン！
（(　ﾟ∀ﾟ)o彡゜鏡音レン！）
(　ﾟ∀ﾟ)o彡゜巡音ルカ！
（(　ﾟ∀ﾟ)o彡゜巡音ルカ！）
(　ﾟ∀ﾟ)o彡゜そして初音ミク！
（(　ﾟ∀ﾟ)o彡゜初音ミク！）
ありがと～ござ～いま～した～！

カラオケで歌う

ミク達と一緒にHelp me, ERINNNNNN!!を歌いましょう！

なぜそんなことをするの？

概要

ステップ 1: プロジェクトを作る

ステップ 2: Viteの設定ファイルを分ける

開発用の設定（vite.config.dev.js）

本番用の設定（vite.config.prod.js）

ステップ 3: 環境変数の設定（必要な場合）

ステップ 4: Dockerファイルを作る

開発用Dockerfile（Dockerfile.dev）

本番用Dockerfile（Dockerfile.prod）

ステップ 5: Nginxの設定

ステップ 6: docker-compose.ymlファイルの作成

ステップ 7: コンテナを起動する

ステップ 8: 動作確認

補足：ホットリロードとは？

注意点

ベンチマーク別 モデル性能ランキング

1. Graduate-level reasoning (GPQA Diamond)

2. Agentic coding (SWE-bench Verified)²

3. Agentic tool use (TAU-bench)¹

4. Multilingual Q&A (MMMLU)

5. Visual reasoning (MMMU Validation)

6. Instruction-following (IFEval)

7. Math problem-solving (MATH 500)

8. High school math competition (AIME 2024)³

Claude 3.7 Sonnet 全体的な強み まとめ:

まとめ

万を超えるワイヤレスイヤホンを買った...!!

日本語のALTの歴史

歌詞

カラオケで歌う

歌詞

カラオケで歌う

開発用の設定（`vite.config.dev.js`）

本番用の設定（`vite.config.prod.js`）

開発用Dockerfile（`Dockerfile.dev`）

本番用Dockerfile（`Dockerfile.prod`）

ベンチマーク別モデル性能ランキング

Claude 3.7 Sonnet 全体的な強みまとめ: