Published 2025/12/01 Arganoの池田です。 本記事ではオブザーバビリティプラットフォームであるNew RelicをNext.jsアプリケーションに導入する手順の説明と、実際にNext.jsアプリケーションに組み込むデモを行います。
New Relic とは New Relicはオブザーバビリティプラットフォームと呼ばれるシステムです。ITシステムに対して、エンドユーザーの体験からシステム内部の処理までを網羅して可視化することで、エンドユーザーへ提供しているサービスの品質低下や、障害発生などへの素早い対処を可能にします。 アプリケーションパフォーマンス管理やインフラ監視の機能を備えているだけでなく、それらのシステムから得られるデータの把握・分析を行うことでシステムへの理解を深めたり、運用の助けになるような総合的なサービスを提供しています。
https://newrelic.com/
以降の内容では、New Relicの様々な機能を試すことができるように、デモ用のNext.jsアプリケーションを作成してNew Relicの導入を行います。
デモ用アプリケーションのセットアップ Next.jsアプリケーションの作成 create-next-app を利用してプロジェクトを作成します。
npx create-next-app@latest newrelic-demo --yes cd newrelic-demo npm run dev この状態で http://localhost:3000 でアプリケーションが起動することを確認します。
New Relicの導入 License Keyの作成 New Relicのwebページからアカウントを作成後、 Integrations & Agents から Node.js を選択します。 その後の Choose your instrumentation method では On a host を選択します。
次に Create a new key でLicense Keyを作成します。このLicense Keyは後ほどNext.jsプロジェクトへ設定します。
Next.jsプロジェクトの設定 Next.jsプロジェクトにNew Relic Node.js (APM) agent をインストールします。
npm install newrelic npm install -D @types/newrelic その後、下記のディレクトリに生成された構成ファイルをプロジェクトのルートディレクトリにコピーします。
Continue reading ↦ Published 2025/11/12 Arganoの小副川です。 この記事では、Rustの Bevy Engine を使って、ライフゲームを実装していきます。
Bevy Engineについて Bevy Engineとは Bevy Engineは、Rustで書かれたデータ駆動型のゲームエンジンです。活発なコミュニティによって開発が進められており、永久に無料で使えるOSSとして提供されています。
また、GUIツールを持たないコードファーストのゲームエンジンであり、Rustのコンパイラとの親和性が高いことから、AIを使ったバイブコーディングとの相性が良いという特徴があります。
この記事で扱うBevyのバージョンは0.17.2です。Bevyはまだ開発段階のエンジンであり、頻繁にアップデートが行われています。APIの破壊的変更も多いため、最新の情報は公式ドキュメントを参照してください。
Bevy Engineの最大の特徴は、ECS（Entity Component System）アーキテクチャを採用している点です。
ECS（Entity Component System）の基本概念 ECSは、ゲーム開発における設計パターンの一つで、以下の3つの要素から構成されます。
Entity（エンティティ） エンティティは、ゲーム世界に存在する「もの」です。ユニークなIDを持ち、それ自体にはデータやロジックを持ちません。ライフゲームでは、各セル（マス目）が1つのエンティティになります。
Component（コンポーネント） コンポーネントは、エンティティに付与されるデータです。構造体として定義され、エンティティの性質を表現します。ライフゲームでは、セルの位置を表すPositionや、生死を表すAliveなどがコンポーネントになります。
System（システム） システムは、ロジックを実行する関数です。特定のコンポーネントを持つエンティティに対して処理を行います。ライフゲームでは、「スペースキーが押すと1世代進む」というロジックをシステムとして実装します。
従来のゲームエンジンとの違い 従来のオブジェクト指向型のゲームエンジンでは、ゲームオブジェクトが継承階層を持ち、データとロジックが密結合していました。
一方、ECSでは以下のような利点があります。
データとロジックが分離されており保守性が高い 再利用性が高い（コンポーネントを組み合わせて新しいエンティティを作成） 大量のオブジェクトを扱う際のパフォーマンスが良い 環境構築 プロジェクトの作成 まず、Cargoで新しいプロジェクトを作成します。
cargo new bevy-life-game cd bevy-life-game Bevy 0.17.2の追加 以下を実行してBevyを依存関係に追加します。
cargo add bevy@0.17.2 BevyでHello Worldを実行 以下をsrc/main.rsに記述して、コンソールに出力してみましょう。
use bevy::prelude::*; fn main() { App::new() .add_systems(Startup, hello_world) .run(); } fn hello_world() { println!("Hello, World!"); } cargo runを実行して、“Hello, World!
Continue reading ↦ Published 2024/05/10 Argano のジェソンです。 server sent eventを実装する方法について紹介します。
Server Sent Event(SSE)란? 서버에서 클라이언트 단방향 통신으로써 서버가 원할 때 클라이언트에게 이벤트를 사용해 데이터를 송신할 수 있는 기술입니다.
Express에서 구현 express 환경에서 구현해보겠습니다.
서버에서는 클라이언트에게 데이터를 보내줄 API를 만듭니다. 여기에서 주의할 점은
response 헤더에 Content-Type 을’text/event-stream＂으로 설정하여 응답해야 클라이언트에서 SSE 이벤트 수신을 할 수 있습니다. 각 이벤트는 ＂\n＂으로 끝나는 텍스트 블록으로 전송됩니다. SSE 표준은 오직 GET만을 허용하기 때문에 GET으로 API를 작성해줍니다. mdn-using server-sent events
Continue reading ↦ Published 2024/04/26 Argano の松田です。 この記事では Vite で作成したプロジェクトを AWS の S3 と CloudFront を使用して公開する方法について紹介します。 サンプルでは React を使用しますが、Vue や Svelte でも同様の手順で公開できます。
※ AWS アカウントが存在すること、Node.js がインストールされていることを前提としています。
Vite プロジェクトの作成 まずは Vite のプロジェクトを作成します。
npm create vite@latest my-react-app -- --template react-swc-ts cd my-react-app npm install npm run dev # 開発サーバーを起動 npm run build # プロダクションビルド npm run preview # プロダクションビルドしたものをローカルで確認 Git で管理します。後々 Github Actions を使用するため、Github にリポジトリを作成してください。
git init git add . git commit -m "Initial commit" S3 バケットの作成 ビルド結果を格納する S3 バケットを作成します。
Continue reading ↦ Published 2023/04/28 Arganoの小副川です。 今回の記事では、OAuth2.0 について書きたいと思います。
OAuth2.0 とは OAuth2.0 は、情報リソースの所有者に代わって、そのリソースにアクセスをするための認可を与えるプロトコルです。 このプロトコルを利用することによって、複数のWebサービスやアプリケーション間でユーザー情報等を共有することができるようになります。
例) Facebook のアカウント情報を使って Instagram のサービスを利用する。
用語の定義 OAuth2.0 を理解する上でかかせない用語について解説します。
リソースオーナー
あるサービスやアプリケーションを利用しようとするユーザーを指します。とどのつまり私達です。
リソースサーバー
リソースオーナーが保護したい情報が格納されているサーバーです。
クライアント
保護されている情報にアクセスをするサービスやアプリのことです。Instagram や Twitter がこれに該当します。
認可サーバー
リソースサーバーが信頼を置いているサーバーです。Facebook や Google がこれに該当します。ここでリソースサーバーへアクセスするために必要な鍵(アクセストークン)を発行することができます。
アクセストークン
リソースサーバーに保護されている情報へアクセスするために必要な鍵のことです。
認可コード
認可サーバーに対して、アクセストークンを発行してもらうために必要な証明書になります。
認証と認可の違い 最初にも述べましたが、OAuth2.0 は認可をするためのプロトコルです。認証をするためのものではありません。認可と認証についての違いは下記のとおりです。
認可(Authorization) リソースへアクセスすることに対して、権限を与えることを示します。OAuth2.0 のプロトコルでは、リソースオーナーが認可サーバーに対して情報提供の同意をする部分に該当します。
認証(Authentication) 通信相手が誰であるかの検証をすること。普段、私達がWebサービスを利用する際に、IDやパスワードを使ってログインをしているのが認証に当たります。
OAuth2.0 を認証の代わりに使うことは、セキュリティリスクが伴うため推奨されていません。リスクについて気になる方はこちらの記事に詳しく書かれているので、一読してみて下さい。
認可の流れ プロトコルを利用して認可をするまでの一例を見てみましょう。
Continue reading ↦ Published 2023/03/31 Arganoのイジェソンです。 今回はJS DOM Eventのbubblingとcapturingについて調べてみました。
bubbling 이란? 어느 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 가장 최상단의 조상의 요소를 만날 때 까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작하는 것을 bubbling이라고 합니다.
좀 더 짧게 말하면 document 혹은 window 객체를 만날 때까지 상단을 향해서 이벤트가 전파되는 현상을 말합니다.
몇몇 이벤트를 제외한 거의 모든 이벤트는 버블링이 됩니다. (focus 이벤트 등은 전파되지 않는다.) (MDN event reference)
아무것도 설정하지 않은 경우 기본적으로 버블링이 발생합니다.
Continue reading ↦ Published 2023/03/24 Arganoの池田です。前回の記事に引き続き今回の記事もZodについての記事になります。今回はZodをフォームのバリデーションなどに利用する際に必要になるエラーハンドリング関連の機能について調査した内容を書いていきます。
本記事を執筆時点でのZodのバージョンはv3.21.4です。
エラー内容の捕捉 Zodはスキーマのparseメソッドを呼び出すことでバリデーションを行うことができますが、バリデーションの結果として入力に不備があればこのメソッドはエラー内容を情報として含んだ例外を投げます。
import { z, ZodError } from "zod" const user = z.object({ name: z.object({ first: z.string().min(1), last: z.string().min(1), }), email: z.string().email(), }) try { const parsed = user.parse({ name: "", email: "" }) } catch (e) { if (e instanceof ZodError) { // ここでエラーのハンドリングを行う } } 上記のコードを実行するとparse実行時に次の様なエラーオブジェクトが例外として投げられました。
{ issues: [ { "code": "too_small", "minimum": 1, "type": "string", "inclusive": true, "exact": false, "message": "String must contain at least 1 character(s)", "path": [ "name", "first" ] }, { "code": "too_small", "minimum": 1, "type": "string", "inclusive": true, "exact": false, "message": "String must contain at least 1 character(s)", "path": [ "name", "last" ] }, { "validation": "email", "code": "invalid_string", "message": "Invalid email", "path": [ "email" ] } ] } ドキュメントによるとバリデーションの失敗時に投げられるエラーオブジェクトはZodErrorでありZodErrorはエラーの詳細情報をZodIssueの配列で保持していることがわかります。
Continue reading ↦ Published 2023/02/24 はじめまして、Arganoの小副川です。
この記事では、AndroidでTelecomフレームワークを利用して電話を発信するアプリの実装方法について紹介します。
言語にはJava、IDEにAndroid Studioを利用する前提で進めていきます。Android Studioの環境構築に関しては触れておりません。
Telecomフレームワークとは Telecomは、音声通話やビデオ通話の状態をAndroid OSに伝える役割を担っており、他の通話アプリと通話状態が競合しないように管理するためのフレームワークです。
今回は、Telecomフレームワークが提供する TelecomManager クラスの placeCall メソッドを使って電話を発信するだけのシンプルなアプリを実装していきます。
プロジェクトの作成 Android Studioに用意されている[Empty Activity]テンプレートを利用してプロジェクトを作成します。
File>New>New Project を選択します。 [Phone and Tablet]タブの[Empty Activity]を選択して、[Next]をクリックします。 [Name]にプロジェクト名を入力、今回は CallApp とでもしておきます。 [Package name]と[Save location]はそのままにします。 [Language]は[Java]を選択します。 [Minimum SDK]は[API 30]を選択、こちらは開発環境によって適宜変更してください。 [Finish]をクリックして、Gradleのビルドが終わるのを待ちましょう。 EditTextとButtonの配置 プロジェクトの作成が完了しましたので、電話番号の入力と発信に使うボタンの準備に取り掛かります。
res/values/strings.xml を開き、画面に表示させる文字列を記述していきましょう。
<string name="phone_input">電話番号入力</string> <string name="call_button">発信</string> 次に、res/layout/activity_main.xml を開きます。レイアウトエディタを使用せずにコーディングしていきますので、[Design]が選択されている場合は[Code]に切り替えてください。
androidx.constraintlayout.widget.ConstraintLayout とその中身は使用しませので削除しましょう。代わりに、 LinearLayout の中へ EditText と Button を配置してきます。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingTop="20dp" android:paddingLeft="20dp" android:paddingRight="20dp" android:orientation="vertical"> <EditText android:id="@+id/phone_input" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/phone_input" android:inputType="phone" /> <Button android:id="@+id/call_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/call_button" android:onClick="call" /> </LinearLayout> LinearLayout の android:orientation はウィジェットを配置していく方向を指定します。vertical として縦方向に配置していきましょう。 android:padding はお好みで。
Continue reading ↦ Published 2023/02/19 Argano の松田です。 先日、[Android] React Native で JavaScript からネイティブコードを呼び出す方法という記事を書きました。 本記事では iOS 版をご紹介したいと思います。
Native Module Native Module は、Objective-C、Swift、Java、Kotlin、C++ クラスのインスタンスを JavaScript オブジェクトとして公開し、それによって JavaScript の中から任意のネイティブコードを実行できるようにするものです。 今回は React Native アプリケーション内の JavaScript から ネイティブのメソッドを実行してみます。 最終的には、JavaScript から MyModule.log('Test'); を呼び出し、ネイティブにログ出力できるようにします。
Native Module の作成 環境構築は終わっている前提で進めます。iOS の Native Module を作成するには Objective-C か Swift を選ぶことができますが、今回は Objective-C を使用します。 まず、Native Module のヘッダーファイルと実装ファイルを作成します。
ヘッダーファイル RCTMyModule.h の内容
#import <React/RCTBridgeModule.h> @interface MyModule : NSObject <RCTBridgeModule> @end 実装ファイル RCTMyModule.m の内容
#import "RCTMyModule.h" @implementation RCTMyModule RCT_EXPORT_MODULE(); @end Native メソッドを JavaScript に書き出す React Native は、明示的に指示されない限り、Native Module 内のメソッドを JavaScript に公開することはありません。公開したい場合 RCT_EXPORT_METHOD マクロを使用して行うことができます。
Continue reading ↦ Published 2023/02/10 こんにちは、Arganoデザイナーの村田です。
Arganoは2022年12月に自社サイトのリニューアルを行いました。 その際にLottieと呼ばれるライブラリを使用してアニメーションを実装しました。
この記事ではLottieの使い方について紹介いたします。
目次 Lottieとは Lottieを使用するメリット アニメーション作成からReactでアニメーションを描画するまでの流れ Bodymovinのインストール手順 After Effectsから書き出し Reactで描画する よくある実装パターンと応用 まとめ Lottieとは LottieとはWeb・iOS・Android・React Nativeなどでアニメーションを簡単に実装することが可能なライブラリです。
Adobe After Effectsで作成したアニメーションをjsonファイルとして書き出し、そのファイルをLottieコンポーネントが呼び出すことでアニメーションが描画されます。
Lottieを使用するメリット svgで作成されるため、解像度を気にする必要がない デザイナーとエンジニアのコミュニケーションコストが減る ファイルのサイズが軽量 実装のコストが大幅に減る 実装する際の自由度が高い マルチプラットフォームに対応している アニメーション作成からReactでアニメーションを描画するまでの流れ アニメーション作成から画面に描画するまでには下記の手順を行う必要があります。
手順
Illustratorで素材を作成(簡易的なアニメーションの場合不要) Illustratorから素材を取り込み、After Effectsでアニメーションを作成 After EffectsのエクステンションのBodymovinでjsonファイルに書き出す Lottieコンポーネントでjsonファイルを呼び出す 手順1と2についてはIllustratorとAfter Effectsの使い方の説明になってしまうので今回は説明を省きます。
After Effectsでのアニメーション作成する際にはLottieでは対応していない機能があるので注意してください。
対応していない機能についてはこちらからチェックしてください。
またエンジニアの方や実装から入りたい方はLottieFilesより無料でLottie用のjsonファイルをダウンロードして使用することが可能です。
Bodymovinのインストール手順 アニメーションが作成できたら、jsonファイルに書き出すためにBodymovinをAfter Effectsにインストールする必要があります。
Bodymovinのインストールの方法は「Adobeからダウンロードする」か「Githubからダウンロードする」か大きく分けて2通りあります。
今回はGithubからダウンロードする手順を紹介します。
まずは下記のサイトから「ZXP Installer」をダウンロードしてください。 こちらのアプリはAfter Effectsにエクステンションを追加する為に必要なインストーラーです。
ZXPInstaller
次にBodymovinをダウンロードします。
Github
Bodymovinがダウンロードできたら、ZXPInstallerを開きファイルをドラッグ＆ドロップするとAfterEffectsでBobymovinが使えるようになります。
After Effectsから書き出し [ウィンドウ]→[エクステンション]→[Bodymovin]を選択します。
Continue reading ↦