- 1. forEachでawaitを使おうとしたら怒られた
- 2. p5.js で呼び出した YouTube動画の再生位置の時間を YouTube の IFrame Player API を使ってキャンバス上に表示
- 3. nandだけで、xorを作ってみる。
- 4. CodeWars オススメ問題 #3【超入門編】
- 5. SJISからUTF8に変換(GAS)
- 6. JavaScript 初心者落書き(全く正しくありません)
- 7. 進数変換を使って数学パズルを解く
- 8. OpenAI o1-prebiewのAPIを試そうとしたら会員ランク()ではじかれてた話 #chatgpt
- 9. reader.onloadの実行完了を待つ
- 10. 新しいGPTを模倣する試み。
- 11. 【遊びながら脳トレ！】色違いパネルを探せ！HTML & JavaScriptで作る間違い探しゲーム
- 12. カウントダウンを繰り返すタイマーを作った話【JavaScript】
- 13. パーリンノイズで遊んでみるゲーム。 パラメタ調整機能付き。
- 14. 3D空間からの脱出ゲーム。助けてください出られなくなりました。webカメラでリアルタイム描画。それと、Webカメラから顔追跡コード。
- 15. ChromeのDevToolsのコンソールへのself-XSSの警告の出し方を調べたら、console.log出力にCSSが適用できることがわかった
- 16. Web 上で島や湖の体積を概算する
- 17. ChatGPT によるリバーシの作成その３
- 18. 【JavaScript】fragmentを親NodeにappendChild()したら中身が消えた
- 19. ServiceNowのJavaScriptエンジンをECMAScript 2021にする
- 20. 【備忘録】リフターを防げ！ 「見本くん」【claude】
forEachでawaitを使おうとしたら怒られた
# はじめに
forEachでawaitを使おうとしたら、エラーになり、どうやったらループでawaitを使えるか調べたので、簡単に記載します。# await とは？
awaitは非同期処理が終わるまで処理を止めておいてくれる便利なもの
jsはawaitやpromiseを使わないと、処理が終わる前に他の処理を実行してしまうので、直列に処理を実行したいときなどは利用すると良い“` js
// 非同期関数
async function asyncTask(name) {
console.log(`Task ${name} started.`);
await new Promise(resolve => setTimeout(resolve, 2000)); // 2秒間スリープ
console.log(`Task ${name} completed.`);
}// メイン処理
async function main() {
console.log(“Main started.”);// `await`を使って非同期処理を待つ
p5.js で呼び出した YouTube動画の再生位置の時間を YouTube の IFrame Player API を使ってキャンバス上に表示
以下の記事にも書いた「YouTube の IFrame Player API」と「p5.js」を組み合わせてみた話の続きです。
●YouTube の IFrame Player API を使って p5.js Web Editor の中に YouTube動画を呼び出す
https://qiita.com/youtoy/items/90b1ad79291a826aff2b今回、お試しで実現した内容は以下です（先々月にやっていたけど、記事には書いてなかった…）。
https://x.com/youtoy/status/1817011942491586930
YouTube動画を再生したり停止させたりすると、上記での YouTube動画の真下あたりで「Current Time」と書いてある部分に、動画の再生位置の時間が表示されます。
## 実装した内容
p5.js Web Editor上で実装したコード全体は、以下のとおりです。基本的な部分（主に setup()内の処理）は、[前回の記事の内容](https://qiita.com/youtoy/items/90b1ad7
nandだけで、xorを作ってみる。
# 概要
nandだけで、xorを作ってみる。# not
# and
# or
# nor
CodeWarsの始め方は[こちら](https://qiita.com/javacommons/items/7c473cda7825ab99e08c
)
:::
# オススメ問題https://www.codewars.com/kata/56dec885c54a926dcd001095/solutions/javascript
### 例
`number`を与えるので、`-number`を返せ、という問題です。“`
1: -1
14: -14
-34: 34
“`
### 難易度
分類は 8kyu です。
– アルゴリズム問題の作法を知りたい
– JavaScriptに初めて触れるという方にちょうどいいと思います。
# オススメの回答
「評価が
SJISからUTF8に変換(GAS)
前職にて、「csvが文字化けしてスプレッドシートで見れない！」と問い合わせが来ました。よくよく話を聞いてみたら、「古いシステムから吐き出されたcsvをGoogle Driveにアップロードし、中身を見たら文字化けしている。」とのことでした。ということで今回はSJISのファイルをUTF8に変換する関数のご紹介です。そもそも古いシステムを新しくした方が良いかもしれませんが、それまでの応急処置にどうぞ！
# コード
こちらの関数に引数としてSJISの文字列を渡せば、UTF-8の文字列が返ってきます。
“`
/**
* 受け取ったSJISの文字列をUTF-8の文字列に変換します。
* @param {String} shiftJISString SJISの文字列
* @return {String} UTF-8の文字列
*/
function convertBlobsTextEncodingFromSjisToUtf8(shiftJISString) {
return Utilities.newBlob(shiftJISString).
JavaScript 初心者落書き(全く正しくありません)
あくまでイメージです
# コールスタック
同期処理タスクの待ち行列
# スタックキュー
非同期処理の待ち行列。ここにいるタスクはコールスタックが空になればタスクキューからコールスタックに戻ってくる。# setTimeout
setTimeout(cb, 時間）で表す。中の処理は実行時にスタックキューに送られ、時間後にコールスタックに戻ってくる。# promise()
– new promise((resolve,reject) =>{});
– 中の処理が完了しているならresolve,完了しないならreject状態になる。
また、resolve(),reject()の関数で状態を変更できる。
– resolve状態ならthenメソッドに、reject状態ならcatchメソッドに進む。
– catchが実行されたらpromiseはresolve状態となる
– thenメソッドcatchメソッドにはresolve(),reject()の関数の引数が渡される。
– thenをチェーンしたい場合。(promise.then().then())⇒thenの中でpromiseをリターン
進数変換を使って数学パズルを解く
## はじめに
基本情報技術者試験でよく登場する進数変換があります。「プログラマ脳を鍛える数学パズル」という本より自分の復習も合わせて、10進数、2進数、8進数全てで回文数となる最小の数を探すという問題に挑戦をしてみたいと思います。基本情報技術者試験で求められる進数に触れつつ、具体的な問題解決手法をJavaScriptで実装しながら詳しく解説していきます。## 進数の基本
– **10進数**：日常生活で最も使用される数制で、0から9までの数字を使用します
– **2進数**：コンピュータの基本言語として用いられ、0と1のみで数を表現します
– **8進数**：主にコンピュータの権限設定などに使用され、0から7までの数字を用います## 問題の理解とアプローチ
**Q:** 10進数、2進数、8進数いずれで表現しても回文数となる数のうち10進数の10以上で最小の値を求めてください。
まず回文数とは、「トマト」のように、どちらから読んでも同じになる特性を持つ言葉や数字のことです。たとえば、10進数では「101」がそれに該当します。今回は10進数、2進数、そして8進数すべてで回文数
OpenAI o1-prebiewのAPIを試そうとしたら会員ランク()ではじかれてた話 #chatgpt
リリースした日に触れたのでメモ。試したいけど試せなかった話です。
> OpenAIに雨乞い
> ## エラー: Your organization must qualify for at least usage tier 5 to access ‘o1-preview’.
まずはいつも通り[ここ](https://platform.openai.com/api-keys)でAPIキー取得して`sk-proj-xxxxxxxxxxxxxxxxxxx` 的なキーを発行し、APIを叩いてみます。
“`js
const { OpenAI } = require(“openai”);
const openai = new OpenAI({apiKey: `sk-proj-xxxxxxxxx
reader.onloadの実行完了を待つ
“`typescript
const hoge = () => {
let base64File: string | null = null;
const reader = new FileReader();
reader.onload = () => {
if (!reader.result) return;
if (typeof reader.result !== “string”) return;
base64File = reader.result.split(“,”)[1];
};
reader.readAsDataURL(file);
// 以降の処理
}
“`
みたいなコードを書いた時、base64Fileに値が入ったのを確認してから次の処理に移りたい場合があるasync/awaitでなんとかできたので備忘
“`typescript
const hoge = async () => {
const base64File = await new Promise((resolve, reject)
新しいGPTを模倣する試み。
https://qiita.com/tetsutakamurata76/items/449c6f3f2086a963b041
### text生成の出力テンソルの変化を数フレームにわたって追跡し、その勾配を計算することによって、言語モデルの推論プロセスにおける最適化をさらに加速することが可能です。1. はじめに
自然言語処理において、言語モデルの性能は、入力プロンプトに対する適切な応答を生成する能力に大きく依存します。しかし、生成された応答が期待される質に達していない場合、それはモデルの学習や推論過程において、局所的な最適解に到達していない可能性があります。本研究では、言語モデルの出力テンソルの勾配を計算し、その勾配がゼロに近づくまで最適化を続けることで、より優れた応答を得る手法について考察します。2. 背景
勾配降下法は、機械学習において広く用いられている最適化手法です。関数の勾配を計算し、勾配がゼロに近づくまで反復的にパラメータを更新することで、関数の最小値（または最大値）を求めます。この概念を言語モデルに適用することで、生成されたテキストに対応するテンソルの勾配を追跡し
【遊びながら脳トレ！】色違いパネルを探せ！HTML & JavaScriptで作る間違い探しゲーム
# はじめに
今回は、HTMLとJavaScriptを使って「間違い探しゲーム」を作成します。複数のパネルの中から1枚だけ色の違うパネルを探し出し、正解すれば次のステージへ進むというゲームです。ステージが進むごとに難易度が上がり、パネルの数が増えたり、色の違いがわかりづらくなったりします。
JavaScriptを学びながら遊べる楽しいゲームを一緒に作りましょう！
## ゲームのルール
1. 複数のパネルの中から1つだけ色の違うパネルをクリックします。
2. 正解すれば、次のステージに進みます。
3. ステージが進むと、パネルの数が増え、色の違いが少しずつわかりづらくなります。
4. 間違えるとゲームオーバーです。リトライボタンを押すと最初から挑戦できます。
5. 正解するたびにスコアが加算されます。何回連続で正解できるかチャレンジしましょう！## ゲーム画面
“`html
3D空間に人物画像を描画
ChromeのDevToolsのコンソールへのself-XSSの警告の出し方を調べたら、console.log出力にCSSが適用できることがわかった
FacebookでDevToolsを開くと大きいサイズで「STOP!」と警告が表示される。
これはself-XSSに対しての警告で、自分で悪意のあるコードを実行しないように注意を促すためのもの。しかしコンソールにどうやって文字を大きく出せるのか。と疑問に思ったので調べたら、CSSが使えることがわかったのでみなさまにご報告させていただきます。
### コンソール出力にCSSを適用できる
“`javascript
console.log(“\n%cSTOP！” ,”font-family:helvetica; font-size:20px; font-size:50px; font-weight:bold; color:red; -webkit-text-stroke:1px black;”
Web 上で島や湖の体積を概算する
## はじめに
土木の世界だと、土の量や水の量を把握したくなる場面があるのではないかと思います。
土量や湛水量を計算するのに、しばしばメッシュ法や点高法といった方法が用いられます。計算方法は色々ありますが、対象の面を細かい区域に分け、その区域の頂点又は代表点の高さや水深（この記事では、z 値とします）を用いて、各区域の体積を求め、それを集計して対象となる面全体の土量や湛水量を計算する方法です。
国土地理院からは、[標高](https://maps.gsi.go.jp/development/ichiran.html#dem)や[湖水深](https://maps.gsi.go.jp/development/ichiran.html#lakedepth)のデータが[標高タイル](https://maps.gsi.go.jp/development/demtile.html)として提供されておりますので、メッシュ法を用いて、Web 上で土地の体積や湖の水量を簡易に計算できるのではないか試行錯誤しましたので、その結果を記事にします。
結果として作成したサイトはこちらです。囲んだ面の範
ChatGPT によるリバーシの作成その３
ChatGPT によるリバーシゲームの作成手順を変えてみます。
# 概要
前回（[ChatGPT によるリバーシの作成その２](https://qiita.com/rex0220/items/f182278937ef13e93cbc)）のように、チャットを続けて機能を追加すると、エラー・修正の繰り返しになったので、最初にある程度仕様を与えて開発してみます。
– 仕様に応じてコードが作成されるが、仕様追加・変更すると以前のコードと継続性が無くなり、新たな問題が発生する
– ある程度仕様を修正した後は、チャットで機能追加・変更を行う
– 盤面の位置ズレについては、表示された盤面の画像を読み込ませても、うまく修正されない
※実際の画面をChatGPTに読み込ませても位置ズレは認識できないようです
– 位置を調整した CSS を直接指定すると、CSS に余計な変更を加えて結局ズレる
保守する場合は、ある程度固まったコードをベースにして、コードの一部を ChatGPT に出してもらうくらいしかなさそうしたら中身が消えた
## 事象
tbodyのtrをクラス化し、インスタンスから操作しようとしたら
描画後にエラーとなった為、挙動を調べた。“`index.html
社員No 社員名
“`
“`MyTr.js
class MyTr{
// private
#Tr;constructor(UserNo
ServiceNowのJavaScriptエンジンをECMAScript 2021にする
ServiceNow標準のJavaScriptエンジンはES5ですが、TokyoからカスタムアプリケーションでECMAScript 2021（ES12）をサポートするようになったので実際に試してみます。
ServiceNow docsリンク : [プラットフォーム上の JavaScript エンジン](https://docs.servicenow.com/ja-JP/bundle/washingtondc-api-reference/page/script/JavaScript-engine-upgrade/concept/c_JS_engine_upgrade.html)
# カスタムアプリケーションの作成
まずはカスタムアプリケーションを作成します。
初期値で既にES12が選択されていましたが、JavaScript Modeを「ECMAScript 2021（ES12）」にして作成します。
