- 0.0.1. 「目」を持った人工生命体関数に、ユーチューブの動画を見せてみるゲーム。
- 0.0.2. 追加ボタンで新しいフォームが表示される処理の実装
- 0.0.3. 他人が作ったコードをリファクタリングしてみる part1 @uni928
- 0.0.4. カスタマイズ可能なテキスト変換ツールの実装
- 0.0.5. この動きは人工生命です。マウスによるカメラ操作が可能です。
- 0.0.6. JavaScriptで蟻本 グラフ ベルマンフォード法
- 0.0.7. 光すら逃れられないブラックホール。重力の強さを調整できる、重力レンズゲームです。
- 0.0.8. kintoneでフィールドが特定の値に変更された時にLINEへ通知するJavaScriptサンプルコード
- 0.0.9. 【BlockNote入門】ReactでNotion風のメモアプリを作る方法
- 0.0.10. web素材圧縮2
- 0.0.11. JavaScript 配列メソッド reduce を徹底解説
- 0.0.12. ブラウザのコンソールからウェブストレージの値を変更するサンプルコード
- 0.0.13. kintoneでフィールドが特定の値に変更された時にSlack通知するJavaScriptサンプルコード
- 0.0.14. MediaPipe Web版の最近の状況を確認してみる（まずは大枠と体験できる手順の情報から）【2024年10月上旬時点】
- 0.0.15. [JavaScript]イベントループについて
- 0.0.16. JavaScriptでのNAVITIME_APIの利用方法
- 1. NAVITIME_API/route_transitとは？
「目」を持った人工生命体関数に、ユーチューブの動画を見せてみるゲーム。
#### ショートストーリー：視覚を持った人工生命の夢
あるプログラマが新たな挑戦に取り組んでいた。名前は翔太。ある日、翔太は画期的なアイデアを思いつく。それは、視覚を持った人工生命体を創り出す関数を作成することだった。この人工生命体は、周囲の環境をリアルタイムで解析し、視覚的に表現できる能力を持つことを目指していた。
翔太は自分のプログラムに情熱を注ぎ込み、カラフルなポリゴンを描く関数を設計した。この関数は、Webカメラからの映像をもとに、周囲の明るさや色を解析し、動的な形状を生成するものだった。プログラムが進化するにつれて、彼の人工生命体は自らの「視覚」を持ち、周囲の環境に応じて変化する能力を持ち始めた。
ある晩、翔太は自宅の小さな作業部屋でプログラムを実行していた。彼のパソコンの画面
追加ボタンで新しいフォームが表示される処理の実装
# React での新規生徒追加ページの実装解説
## はじめに
この記事では、時間割アプリ制作にあたってReact を使用して実装した**新規生徒追加ページ**のコードを抜粋して解説します。
このページには生徒の情報を入力するフォームが追加され、バリデーション機能や、追加・確定ボタンの機能が含まれています。
また最下部に各ページの最終的なコードを記載しています。以下の内容を詳しく解説します。
– フォームの動的追加
– バリデーション（未入力項目のエラー表示）
– 確定ボタンによる処理の流れ
– 各コンポーネントの役割## コンポーネントの概要
まず、**AddStudentPage** コンポーネントがメインとなるページです。このコンポーネントには、複数のフォーム（生徒の情報を入力するためのフォーム）を管理するロジックが含まれています。
 {
let ulx=outputUl%(row*2+1);
let uly=Math.floor(outputUl/(col*2+1));
let drx=outputDr%(row*2+1);
let dry=Math.floor(outputDr/(col*2+1));let tulx=areaX+(boxSize/2)*ulx;
let tuly=areaY+(boxSize/2)*uly;
let tdrx=areaX+(boxSize/2)*drx;
let tdry=areaY+(boxSize/2)*dry;let imageData=document.getElementById(“outputcanvas”).getContext(“2d”).getImageData(tulx, tuly, (tdr
カスタマイズ可能なテキスト変換ツールの実装
## はじめに
Web開発やテキスト処理において、特定のパターンに基づいてテキストを変換する必要性は頻繁に発生します。今回は、JavaScriptを使用して柔軟で使いやすいテキスト変換ツールを実装する方法を紹介します。
## 主な機能
1. JSONベースの置換ルール
2. 双方向変換（正変換と逆変換）
3. スペース（半角・全角）の可視化
4. クリップボードへの自動コピー## コードの解説
### 1. 置換ルールのパース
“`javascript
function parseReplacementRules(ruleText) {
try {
return ruleText.split(‘\n’)
.filter(line => line.trim() !== ”)
.map(line => JSON.parse(line));
} catch (error) {
console.error(‘置換ルールのパースに失
この動きは人工生命です。マウスによるカメラ操作が可能です。
#### ショートストーリー: 東京のプログラマと人工生命の創造
東京の繁華街は、昼夜を問わず人々が行き交う賑やかな場所だった。その喧騒の中、静かなオフィスビルの一角に、一人のプログラマがいた。彼の名はタクヤ。彼は数学とプログラミングの天才で、人工知能と生命科学の融合を夢見ていた。タクヤは、毎晩遅くまでオフィスに残り、自分のアイデアを実現するために熱心にコードを書いていた。ある晩、彼はふとしたひらめきを得た。複雑な数学的関数を使って、人工生命を作り出せるのではないかと思ったのだ。彼はまず、サインやコサインといった基本的な三角関数を使い、生命の動きを模倣することから始めることにした。
「どうすれば、自然の動きや振る舞いを計算できるのか…」タクヤは頭を抱えながらも、プログラムのアルゴリズムを
JavaScriptで蟻本 グラフ ベルマンフォード法
# 概要
アルゴリズムの学習記録を投稿します。
今回は蟻本・グラフのベルマンフォード法 p96についてです。# 問題
“`
以下隣接リストの点0-点7間の最短距離を求めなさい。[0,1,2],[0,2,5],
[1,2,4],[1,3,6],[1,4,10],[1,0,2],
[2,0,5],[2,1,4],[2,3,2],
[3,2,2],[3,1,6],[3,5,1],
[4,1,10],[4,5,3],[4,6,5],
[5,3,1],[5,4,3],[5,6,9],
[6,4,5],[6,5,9]“`
# コード部分
“`javascript
//
/** p95 グラフ ベルマンフォード法
* @param start{Number} 目的値の番号
* @param vertexCount{Number} 頂点の数
* @param edgeCount{Number} 辺の数
* @param edge{Array} 隣接リスト 頂点数
光すら逃れられないブラックホール。重力の強さを調整できる、重力レンズゲームです。
#### タイトル: 「歪んだ光のプログラム」
東京の夜は、まるで無数の星がビルの窓に宿ったかのように輝いている。中でも、渋谷のスクランブル交差点は、その光の海で最も煌びやかな場所だ。だが、プログラマーの翔太には、その光すらまるで別の世界の出来事のように見えていた。彼の目の前にあるのは、ディスプレイに映し出された何千ものコードの行列。それらが彼のすべての意識を占領していた。「また、うまくいかないか…」
翔太は椅子にもたれかかり、大きくため息をついた。彼は現在、宇宙の現象をシミュレートする新しいプログラムに取り組んでいた。テーマは「重力レンズ効果」。ブラックホールや巨大な惑星が、その強大な重力で光を曲げる現象だ。光すら逃れられない巨大な力、しかしそれを美しく表現することは、意外にも繊細な調整を必要としていた。
「これさえ完成すれば…」
クライアントは彼にこの技術を使った新しいアートアプリケーションのプロトタイプを求めていた。ユーザーが画像をアップロードし、マウスでブラックホールのような歪みを操作して視覚的に楽しむ――そんな構想だ。翔太はそのアイデアに興味を持ち、数週間にわたり
kintoneでフィールドが特定の値に変更された時にLINEへ通知するJavaScriptサンプルコード
# 概要
前の記事にて、kintoneのレコード保存で、
Slackへ通知する方法を記載しました。https://qiita.com/ito_futa/items/4b6ba9b75fffd7d776b7
が、コードはほぼそのままで、
LINE Notify APIを使うことでLINEへも簡単に通知することができたので、
こちらに手順を記載していきます。## 前準備
### LINE Notifyにログインします。
サイトは以下となります。
https://notify-bot.line.me/ja/
初めてログインするとLINEにて、LINE Notifyからトークが届いています。
確認し、通知を行いたいルームへLINE Notifyを追加します。
### アクセストークンの発行
PCのLINE Notify管理画面に戻
【BlockNote入門】ReactでNotion風のメモアプリを作る方法
# はじめに
この記事では、Notion風のテキストエディタ環境を簡単に作れる**BlockNote**というReactライブラリを紹介していきます。https://www.blocknotejs.org/
BlockNoteを使ってメモを書いている様子↓
# 使い方
## インストールと最初のセットアップ
まずはReactの環境を構築します。“`
npx create-react-app –template typescript myapp
“`以下のコマンドを打って開発用サーバを起動し、以下の画像のような画面が出れば成功です。
“`
npm start
“`の[改造版](https://github.com/da0ka/roadroller)をでっちあげたので晒しておきます。環境にもよりますが展開速度は2倍以上高速になり(旧式も搭載)、textareaにfileを放り込む機能搭載などといった内容に違いない…。本家とは異なり圧縮処理はweb browser専用です(色々とfileを間引きまくり)
## 説明的解説
本家はzipによる再圧縮も考慮していて、展開速度を犠牲にしています。例えばmap関数を多用したり、余計な文字を加える事で圧縮しやすくなっています。
私家版では設定で`zippable`を選択すると、その旧式decoderが生成され、`small`を選択すると小型で高速なdecoderが生成されます。
`zip size`を有効にするとzip圧縮を模倣した圧縮率を計算しやがってくれますが低速(本家の標準機能)
`add line`を有効にすると圧縮部と展開処理を2行に分けます(本家の標準機能)
JavaScript 配列メソッド reduce を徹底解説
# はじめに
JavaScriptのreduceメソッドは、配列の要素を操作するための関数です。データの集約や変換など、さまざまな場面で活躍するメソッドですが、その柔軟性ゆえに最初は理解しづらいこともあります。本記事では、reduceメソッドの基本から、実際のプロジェクトで役立つ(かもしれない)実用的な使用例までを解説します。## 1. reduceメソッドとは？
reduceは、配列の各要素を順番に処理し、1つの結果に「集約」するためのメソッドです。単純な合計計算から、複雑なデータ構造の変換まで、幅広く利用できます。MDNでは、reduceメソッドは次のような引数をとると説明されています。
“`js
arr.reduce(callback(accumulator, currentValue), initialValue)
“`この定義は少し理解しづらいですが、簡単に言うと、reduceは配列の要素をひとつずつ処理し、その結果を「累積値」(accumulator)にまとめていくものです。
覚えておくべきは、以下の3点です
– reduceは2つの引数をとり
– 第一
ブラウザのコンソールからウェブストレージの値を変更するサンプルコード
## 概要
ブラウザのコンソールからウェブストレージの値を変更する用のサンプルコードのメモです
## セッションストレージ
– 新規追加
“`javascript
const data = {sample: “hoge”}
sessionStorage.setItem(‘sample_key’, JSON.stringify(data))
“`– 変更
“`javascript
const data = JSON.parse(sessionStorage.getItem(“sample_key”))
data.sample = “foo”
sessionStorage.setItem(“sample_key”, JSON.stringify(data))
“`## ローカルストレージ
– 新規追加
“`javascript
const data = {sample_key: “hoge”}
localStorage.setItem(‘sample_key’, JSON.stringify(data))
“`– 変更
kintoneでフィールドが特定の値に変更された時にSlack通知するJavaScriptサンプルコード
# 前口上
Kintoneを使ってアプリを作成する中で、特定のイベントが発生したときに通知を送りたいと思ったことはありませんか？そんな時、KintoneにはデフォルトのWebhook機能が用意されています。でも、実はこれに少し制約がありました。
## デフォルトのWebhookはちょっと物足りない
また、KintoneにはデフォルトでWebhookが設定できますが、細かい条件を設定するのが難しい模様。
（というデフォルトだと何故か成功しないのですが私だけでしょうか）
例えば、「このフィールドが特定の値に変わった時だけ通知したい！」みたいな場合、
デフォルト設定ではちょっと難しい。じゃあJavaScriptだ！
## CORSの壁にぶつかる
何も考えずにJavaScriptを用いると、CORS制限に引っかかります。
これは異なるオ
MediaPipe Web版の最近の状況を確認してみる（まずは大枠と体験できる手順の情報から）【2024年10月上旬時点】
[4年半くらい前に情報を見かけてデモを軽く試してみたり](https://x.com/youtoy/status/1237222403769389056)、[4年弱くらい前に自分の試作に取り入れ始めたりして](https://x.com/youtoy/status/1354091033156591616)、その後、長らく活用している [Googleさんの「MediaPipe」](https://github.com/google-ai-edge/mediapipe)の話題です。
●MediaPipe ソリューション ガイド | Google AI Edge | Google AI for Developers
https://ai.google.dev/edge/mediapipe/solutions/guide?hl=ja初めて試作に取り入れてみた時は、以下のようなお試しをしていたようでした。
;setTimeout(() => {
console.log(“B”);
}, 0);Promise.resolve().then(() => {
console.log(“C”);
}).then(() => {
console.log(“D”);
});console.log(“E”);
“`答えから先に言うと、上の場合は`AECDB`の順番で出力される。
## jsのライフサイクル
まず、jsのイベントループを理解するにあたって、`コールスタック`という概念が核になる。コールスタックとは、プログラムの実行順序を管理するためのデータ構造である。
スタックは「後入先出」（LIFO: Last In, First Out）
JavaScriptでのNAVITIME_APIの利用方法
NAVITIME_APIは、公式ドキュメントに各機能の詳しい説明はあるものの、とりあえず使ってみたいという方や、自分のような初心者が、ある程度使えるようにするためのものがなかったので、自分にとっての備忘録も兼ねて、今回の記事で紹介させていただきます。今回はNAVITIME_APIの/route_transitについて扱います。
NAVITIME_API/route_transitとは？
公式の説明を確認すると、
公共交通手段＋徒歩で、ドアtoドアの最適な移動経路・料金を算出します。駅の出入り口情報なども合わせて取得できます
という説明が書かれています。
この説明はかなり簡潔になっており、実際には移動にかかる時間や経由地、電車の出発、発着時間等様々な情報を取得できます。また、この値を追加することでAPIのみで地図上にルートを表記することも可能です。注意点
今回紹介する、RapidApiを経由してAPIキーを取得する方法では、バスは検索できず、電車も実際の時刻表に則った時間ではなく、平均時間で
【JavaScript】ABC374まとめ（A~D）
AtCoder Beginner Contest 374
https://atcoder.jp/contests/abc374
A~Dの4完（20分）でした。
1358perfでレートは783->856（+73）と大幅アップし入緑できました！
（入緑記事は後ほど公開します！）
今回はA~Dの解説を行います。# A – Takahashi san 2
https://atcoder.jp/contests/abc374/tasks/abc374_a入力は必ず4文字以上であることが保証されています。
なので後ろから文字を3つ取ってきて、`san`と一致するかを確認すれば良いです。“`js
function Main(input) {
input = input.split(“\n”).map((line) => line.trim());
const S = input[0].split(“”);
let ans = “”;
for (let i = S.length – 3; i < S.length; i++) ans += S[i]; ans =
JavaScriptの配列メソッドを復習する
### JavaScriptの配列のメソッドを復習する
JavaScriptおよびTypeScriptをそれなりに触って1年以上になりますが、以下のようなコードを見て、一瞬「？？」となったので、備忘録兼ねて解説していきます。
まずは、おなじみの書き方↓
“` JavaScript
const people = [
{ name: ‘Taro’, age: 20 },
{ name: ‘Jiro’, age: 25 },
{ name: ‘Ichiro’, age: 30 },
];
const names = people.map(person => person.name);
console.log(names);
// [“Taro”, “Jiro”, “Ichiro”]
“`一瞬理解できなかった書き方↓
“` JavaScript
const people = [
{ name: ‘Taro’, age: 20 },
{ name: ‘Jiro’, age: 25 },
{ name: ‘Ichiro’, age: 30 },
];
con
JavaScript周りの情報整理メモ
# JavaScript周りの情報整理メモ
## ライブラリ & フレームワーク
### – JQuery
javascriptのライブラリ（ライブラリは既存技術の機能を使って複数の処理にまとめたもの、フレームワークは利用することで新しい技術を使えるようになるイメージ）### – Next.js
ReactベースのフルスタックWebアプリケーションフレームワーク。Reactはクライアントサイドのみをサポートするが、Next.jsはサーバーサイドもサポートする。### – Nust.js
ナクスト・ジェイエスと読む。Vue.jsがベースになっているJavaScriptフレームワーク。Vue.jsをより使いやすくする機能を持っている。Vue.jsで記述して、サーバーサイドレンダリングができる。ルーティングもしてくれる。### – Vue.js
MVCモデルのView層を扱うフレームワーク。コンポーネント構築のためのフレームワークで、Vueで出来ることはReactに似ています。### – Vanilla JS
何のライブラリもフレームワークも使わないでJSを書くことをいう。
Three-VRMで顔パーツの表情パラメータを直接指定する
# 概要
例えば口だけを笑顔にしたいとき、わざわざ表情登録をせずにパラメータ値を直接指定する方法です。VRoidStudioの顔パーツごとの表情パラメータの指定みたいな感じです。
私の別記事([Three-VRMで組み合わせて表情を登録する(Custom Expression)](https://qiita.com/nobrin/items/9085fed1ef5b8b508290))といった方法が一般的な方法だと思いますが、強制的に特定の顔パーツ(口だけ)の表情パラメータを指定する方法です。
# 動作確認環境
– VRoidStudio 1.29. 1 — VRMファイルのエクスポート
– Three-VRM 3.1.2
– Firefox 131(Windows 10 22H2)# 実装
最終的に、FaceグループにバインドされているSkinnedMeshオブジェクトの`morphTargetInfluences`の対応するインデックスの値にウェイトを格納し、`render()`されると反映されるようです。
これを実現するには、`requestAnimationF
