JavaScript関連のことを調べてみた

KING OF TIMEのMyレコーダーの誤操作を防止する【拡張機能】

不必要なボタンを削除しましょう


出勤してないときは、出勤ボタンだけが表示されます。

# インストール方法

Tampermonkeyに下記コードを貼り付けます

“`js:kot.user.js
// ==UserScript==
// @name Hide KoT Buttons
// @namespace http://tampermonkey.net/
// @version 2024-09-02
// @description try to take over the world!
// @author You
// @match https://s2.kingtime.jp/independent/recorder/personal/
// @icon

ユニークな値を作成する方法

### 前提
typeScrypt,Vue.jsを扱っていた時の話。
ほぼメモに近いです
こんな感じで生成できるんかって言う忘備録

### 経緯
for文のなかで一意になる値を何かしら指定しなければいけない状況だったが、保持しているオブジェクトでは一意な値は作成できず外部で作成したものを無理矢理注入するしかないと言う意見に至った。
👆できるならこの考え方はやりたくなかったがクリティカルなバグだったため、暫定的に対応しようとしていた。

## 方法
### Math.random(）
以下のような感じにすると１００までの乱数が作成できる。
ただ、これだと範囲が狭いのですぐに被りそう
“`.js
Math.floor(Math.random() * 100) + 1;
“`

### Crypto: randomUUID()
これは便利だなって思いましたね。
ライブラリ必要とせずにできるし、nodeの環境であれば使えるのは助かりますね。
ただ、これに関してはクライアント側で使えないと言うことがわかったので、今回の場合だと採用できなかった感じ
また「https」のような安全な環境でし

postMessageを使ってクロスオリジンなiframeからデータを受け取る

## はじめに

こんにちは。HRBrainでオウンドメディアやランディングページの開発を担当している渡邉です。

SalesforceなどのMAツール製のiframeフォームをウェブサイトに埋め込むことがあります。

この記事では、ウェブサイトとiframeが異なるドメインの場合に、iframeからウェブサイトにデータを受け渡す方法について解説しています。

▼ [HRBrainサービスサイト](https://www.hrbrain.jp/)におけるiframeフォームの事例


## クロスオリジンでのiframe操作の制限

iframeとウェブサイトが異なるドメインに存在している場合、ウェブサイトからiframe内の要素に直接アクセスすることができません。

– ウェブサイトのURL： `example.com`
– i

物流DXにも応用できる高速道路の料金計算API

# はじめに
HEREでエンジニアをしておりますkekishidaと申します。
以前、拙記事においてHERE Maps API for Javascripを使用してReactベースで簡単なルート検索アプリを作成する方法の紹介をしました。

https://qiita.com/kekishida/items/7587a2dcab916459e8dd

さて、先日HERE API群においても**日本の高速道路料金を計算**することが可能になりました。[^1]
本記事では、前回紹介したルート検索アプリのコードをベースに、**日本の高速道路料金を計算するアプリ**に改造してみたいと思います。

[^1]:一部の高速道路（海ほたる、本州四国連絡高速道路、日光宇都宮道路など）は未対応。

# アプリイメージ
前回紹介したルート検索アプリに、
– 車種(Choose Transport Type)
– 支払い方法種別(Choose Payment Type)
– 出発日時(Deperture)

という入力項目を追加しました。
![image.png

Javascript – オブジェクトの配列を同士を比較する ( JSON.stringfy ) ( 3人のアリス )

# 課題

2個の配列同士で、オブジェクトの値が1個でも違うものがれば、その差分を検出したい

# 対策

– `JSON.stringify` でオブジェクトを丸ごと比較する

## コード例

それぞれ名前・年齢を持つオブジェクトの配列を比較する

“`js
// 配列Aと配列B
const arrayA = [
{ first_name: ‘Alice’, age: 20 }, // 両方の配列に存在する要素
{ first_name: ‘Alice’, age: 30 }, // 両方の配列に存在する要素
{ first_name: ‘Bob’, age: 30 }, // 片方の配列にしか存在しない要素
]

const arrayB = [
{ first_name: ‘Alice’, age: 20 }, // 両方の配列に存在する要素
{ first_name: ‘Alice’, age: 30 }, // 両方の配列に存在する要素
{ first_name: ‘Alice’, age: 40 }, // 片方の配列にしか存在しない要素

JsonPathを使ってハマった件

# 何にハマったか
JavaScriptでJsonPathを使ったテストを実行しても問題ないのに、同じコードをNext.jsのアプリで実行するとエラーが出る。

`node search-query-parser+JsonPath.js`
→問題なし

npm run devで実行すると、
Advanced search error: Error: Expected comma at character 34
のエラーが出ることをDevToolのTerminalで確認。
ブラウザのDevToolのデバッガーでたどっていくと、エラーメッセージは、jsonpath-plusのindex-browser-esm.jsでJsonPathのチェックを実行する関数で発生しており、JsonPathのクエリ文字列に”{“が含まれていることが原因だとわかった。

原因は使っていたJsonPath-plusのライブラリの設定にあった。

# JsonPathとは
Jsonのクエリ言語。
ネストした複雑なJsonからでもデータを抽出することができる。2007年以降長く使われていたが、2024年にIETFによ

小さな日本語GPTのエンジニアリング。僕だけの日本語GPTを作るというゲーム。

前回のあらすじ。

https://qiita.com/tetsutakamurata76/items/619369c2651a80d02cd9


Google corab GPU で実行です。

### 実行結果。日本語トークナイザーと日本語モデルを使用。

生成されたテキスト: エポック75
### Generated Text: 健一の次の挑戦は、aiの可能性をさらに探求することでした。 田中健一は、新しいaiモデルの設計のアイデアに興奮しました。 彼は二次元テンソルを掛け合わせることで、これまで不可能とされていたものを実現でき、しかも、それが瞬時に実現できることに確信しました。

Generated Text: 健一の次の挑戦は、aiの可能性をさらに探求することでした。 四次元テンソルを使用した計算は、オイラーシャフト と g

夢が叶うために、どんなことをすればよいのかということだと思う。 その答えは「今」にある。小さなGPTのエンジニアリング。 Chat with GPT という日本語チャットゲーム。

#### 東京のプログラマとリアルタイムのAI対話
東京の片隅に住むプログラマ、山下誠は、技術革新の最前線に立つエンジニアだ。彼は、日々の生活に追われながらも、新たなプロジェクトに取り組んでいた。彼の目標は、未来を感じることができるインターフェースを作り上げることだった。山下の手元には一つのコードがあった。これを実行することで、ブラウザでGPT-2とリアルタイムでチャットできるインターフェースが表示されるのだ。


未来をつなぐコード
山下は、Pythonのコードに目を通しながら、自分の作業が未来のコミュニケーションの一端を担うことを意識していた。このコードは、HTTPサーバーを立ち上げ、ウェブブラウザで簡単にアクセスできるインターフェースを提供する。そこに、彼のこだわりが込められていた。

画面が汚れているな。　カラフルなパーティクル掃除機ゲーム。スペースキーで吸引です。



### マウスでノズルを移動してスペースキーを押すと吸引です。

“`html