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

APIでkintoneのレコード操作(Node.js環境)

kintoneを初めて触ってみたのでメモです。

## kintoneのアプリを作成する
**1. kintoneアプリが必要なので作成**
サイボウズの開発者アカウントを取得し、右下のアプリの”+”から作成できます。

**2. 「はじめから作成」を選択**
今回は簡単なアプリなので「はじめから作成」を選択します。

**3. 「数値」と「日付」を選択**
左のカテゴリから選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.a

JavaScript ランダム値のゼロパディングを少しだけ短く記述

今更ながらのネタですが、JavaScriptで数値のゼロパディング、例えば`Math.random()`の戻り値を元に`000`～`999`のランダムな整数を得たい場合、先頭に必要桁数の`0`を付けた上で`slice()`で後方から切り出す

“`js:
const randomNum = (’00’ + Math.floor(Math.random() * 1000)).slice(-3);
console.log(randomNum);
“`

`padStart()`を使うなら

“`js:
const randomNum = String(Math.floor(Math.random() * 1000)).padStart(3, ‘0’);
console.log(randomNum);
“`

辺りが常套手段かと思います。
テンプレートリテラルを使えばもう少し短く、それぞれ

“`js:
const randomNum = `00${Math.floor(Math.random() * 1000)}`.slice(-3);
console.log(randomNum

Daniel Velasquezさんのシェーダー入門を紹介してみる

こんにちは。静岡アドベントカレンダーに、引き続き若干孤独に投稿を続けるはるまきです。
よかったら皆さんもよろしくお願いします。
いつもの皆さんの元気な様子が知りたい。初めての方とのwebならではの交流を楽しみたい。そう願ってやみません。

さて、今日は、Daniel Velasquezさんの「INTRO TO SHADERS」が楽しかったので紹介してみたいと思います。（ちなみに有料でメール講座をされている方のようで、PRも一緒に送られてきます。念のため付記。）

# 早速試してみる

こちらのURLにアクセスして、

https://offscreencanvas.com/courses/intro-to-shaders

メールアドレスを入力したら、メールが届きます。
何回かに分けてメールは届きますが、初回の内容に含まれるgithubプロジェクトからcloneして動かせば、すぐに動くshaderが体験できました:beers:

# Daniel Velasquezさんの名言をピックアップして紹介

メールの内容が面白いです。
shaderを初体験する以上の価値が、メール文面にある気

YouTubeの広告を早送りするChrome/Edge拡張機能

YouTubeの広告を自動的にミュート＋早送りする拡張機能を作ってみた。

## コード

“`js:content.js
let video
main()

function main(){
video = document.querySelector(‘#movie_player video’)
video ? new MutationObserver(mutated).observe(movie_player,{attributes:true}) : setTimeout(main,100)
}

function mutated(){
if(movie_player.classList.contains(‘ad-showing’)){
video.muted = true
video.playbackRate = 16
}
else{
video.muted = false
video.playbackRate = 1
}
}
“`
短いコードなので、JavaSc

Sigv4とは何か、そしてその動作方法は何でしょうか。

# 初めに
この記事はエアークローゼット Advent Calendar 2023 3日目の記事になります

https://qiita.com/advent-calendar/2023/air-closet

# この記事のまとめ
・Sigv4とは何ですか？
・それを使用する方法
# SigV4とは？
AWS Signature Version 4（SigV4）は、AWSサービスへのリクエストを認証するためのプロセスです。これは、AWS APIリクエストに署名するために使用される最新バージョンの認証プロトコルです。署名されたリクエストは、不正アクセス、データ操作、および正当なクライアントからの認証されたリクエストがのみ行われることを確認するために使用されます。

AWSサービスにリクエストを送信する場合、SigV4を使用して計算された署名を含める必要があります。署名は、HTTPメソッド、ヘッダー、URI、クエリパラメータ、およびペイロードを含むリクエストペイロードの規定表現に基づいています。この規格表現は、AWS秘密アクセスキーを使用して署名され、最終的な署名が生成されます。

AW

kintoneプラグインにて、kintoneアプリにStripeの決済フォームを表示する方法 with kintone-ui-component

この記事は、[kintoneアドベントカレンダー](https://qiita.com/advent-calendar/2023/kintone)3日目の記事です。

https://qiita.com/advent-calendar/2023/kintone

kintoneでは、JavaScriptを利用してアプリの表示や動作を拡張・カスタマイズすることができる、拡張機能機能が用意されています。

https://kintone-sol.cybozu.co.jp/integrate/

拡張機能は、kintoneのスタンダードコースから利用できますが、動作確認や拡張機能の開発などの目的などであれば、[開発者ライセンス](https://cybozu.dev/ja/kintone/developer-license/)を利用して無料で試すこともできます。

## kintoneアプリに、決済フォームを直接組み込む

kintoneはJavaScriptでアプリの機能や表示をカスタマイズできます。そしてStripeでは、JavaScriptで決済フォームを表示するSDK（[@strip

ポケモンで使えるツールを作ろう

# はじめに
僕は最近ポケモンの第三世代、第四世代（エメラルドとHGSS）にハマっています。
やることといえば金ネジキなどでお馴染みのバトルフロンティアです！！
バトルフロンティアを攻略するとなると旅パでは太刀打ちできません:sob:
なのでポケモンを厳選しないといけないのですが、そこで必要となるのが**努力値振り**です。

分からない人向けにざっくり説明するとバトルでポケモンに勝つと『**経験値**』とは別に『**努力値**』という値がもらえます。(ゲーム中では基礎ポイントと呼ばれています。)
しかし、努力値はあくまで隠しステータスなので自分が育てたいポケモンに今どのくらい努力値がたまっているのかをゲーム中で細かく確認することができません。
なので紙にメモるなりスマホのアプリでカウントするなりしないといけないのです。

僕は今までスマホのアプリで努力値振りの計算を行っていたのですが、如何せん使い勝手が悪いアプリしかない:cry:

なので、自分で作ることにしました:laughing:
# HTML
~~~HTML

KeycloakのJavaScriptクライアントアダプターを使ってみる。

[keycloak公式](https://www.keycloak.org/downloads)で提供されているOIDCのクライアントアダプターを実際に利用してみる。
keycloakのOIDCのクライアントアダプターは、WildFly、Tomcat、Node.jsなど様々な形で提供されていたが、バージョンが上がるにつれて徐々にDEPRECATEDとなり、最新(21.0.2)ではJavaScript以外はすべてDEPRECATEDとなっている。
本記事では唯一の生き残りであるJavaScriptのクライアントアダプターを利用して、クライアントアプリからKeycloakサーバへ接続する方法を検証する。
※本記事は、Keycloakのバージョンアップに伴い、「[Keycloakのクライアント・アダプターを試してみる（Angular編）](https://qiita.com/mamomamo/items/cdde95feffbb5e524fd4)」の記事を最新化したものです。

## 本記事でやること

1. Angularアプリケーションの作成
1. Keycloakサーバの設定

ChatGPTに３回質問して「文字の類似度」のサジェストするプログラム作成

# 概要

今回は、ChatGPTに**レーベシュタイン距離**を使った文字の類似度を測定しサジェストを作成するプログラムを、3回の質問でプログラムを書いて貰います。

**ChatGPT**への質問内容をテクニックを交えてを紹介します。

# レーベシュタイン距離とは

レーベンシュタイン距離は、二つの文字列がどの程度異なっているかを示す距離である。
（[Wikipediaより引用](https://ja.wikipedia.org/wiki/%E3%83%AC%E3%83%BC%E3%83%99%E3%83%B3%E3%82%B7%E3%83%A5%E3%82%BF%E3%82%A4%E3%83%B3%E8%B7%9D%E9%9B%A2)）

要するに、**計測した数値が低いものほど、文字の類似度が高い**ということです。

# 質問１：丸投げする

とりあえず、ChatGPTに丸投げします。

「買い物するアプリを作って」など抽象的なものではなく、具体的な機能の関数やメソッドなど**具体的**な内容で質問することを意識しています。

## 質問内容

“`:質問内容
「

React入門２: 盤面の作成

# はじめに
私自身の復習兼、備忘録的な意味もあり、複数回の記事に渡って React を用いてマルバツゲーム(三目並べ)を開発していきたいと思います。
– [React](https://ja.react.dev/)
– [CodeSandbox(公式)](https://codesandbox.io/)
– [CodeSandbox(非公式の日本語ガイド)](https://csb-jp.github.io/)

## シリーズの一覧
1. [React入門１: 環境構築 [オンライン版]](https://qiita.com/banana_bancho/items/64fa6ccb58101eadbb63)
– [React入門1.5: 環境構築 [ローカル版-番外編]](https://qiita.com/banana_bancho/private/30f5d9d2c5eea00ac11c)
1. React入門２: 盤面の作成 (今回)
1. [React入門３: インタラクションの実装](https://qiita.com/banana_bancho/private/5

Array の処理は可能な限り map, reduce, find を使ってほしい件

# 配列処理をわかりやすく書きたい

いきなりですがエンジニアの皆さん、配列の処理はどうやっていますか？

例えば以下のケースではどんなコード/関数/メソッドを使うか考えてみてください。

1. ある配列から同じ長さで別の配列を生成したい
1. ある配列のうち条件を満たす要素を一つ取得したい
1. ある配列のうち条件を満たす要素を複数取得したい
1. ある配列から一つの計算結果を出したい

今回の説明においては、言語は TypeScript/JavaScript を使います。

配列は `[1, 2, 3, 4, 5, 6, 7, 8, 9]` として

1. 配列の全ての要素を 2 倍して新しい配列を生成する
1. 配列で値が 4 である要素を取得する
1. 配列の要素のうち偶数のみの配列を生成する
1. 配列の要素の合計値を出す

で解説をします。

## 1~4 を全て for で実装

最もわかりやすい例は for 文を使うことでしょう。

for で 1~4 を実装した例を示します。

Playground にサンプルコードを載せていますので動かしてみたい方は[こちらから](

RIP

# はじめに 🐢
墓に持っていく前に、自分の娘と息子と姪っ子達と一匹の亀のためにこれを書き残す。
JSの話です。

免責事項 🚑

・JSのベストプラクティスではありません。私見です。
・郷に入っては郷に従え。現場のスタイルに従いましょう。
・参考では薄めのオライリー本２冊のみ挙げました。
・クラスやアーキテクチャについては述べていません。
・元気です。肩は痛いです。

# １．コメントは右端に 👉
コメントを新規行にて左端から書くと、コードと混在し可読性が下がる。
それを避けるために、コードの右端にコメントを書く。
その際、コメントの先頭位置を揃えるのではなく、末尾の位置を揃える[^1]。
“`js
const arr = [‘a’, ‘b’, ‘c’]; // ここにコメントを書く
arr.reduce((a, v) => ({ …a, [v]: v}), {}); // キーと値が同一のobj
“`

# ２

ChromeとcanvasでTVの放送用字幕を作っているお話2023

以前書いた記事は2019年時点の事例を出していましたが、実は昨日含め今年はすでに数回出番があったので、アップデートも兼ねてアドベントカレンダーにまとめてみます。機材のお話が多めになりますが、よろしければお付き合いください🙇🏻‍♂️

以前の記事は↓

https://qiita.com/Kaitou/items/d23e1900661e991b9001

## 共通

僕が MacBook Pro を使っているため、映像を HDMI で出力し、SDI（Serial Digital Interface）という放送機材用のものに変換してあげる必要があります。

僕は Blackmagic Design の Mini Converter UpDownCross HD というものを使って変換しています。

https://www.blackmagicdesign.com/jp/store/converters-encoders/mini-converters/W-CONM-28

具体的には下記のように接続しています。

“`plantuml
@startmindmap
* MacBook

自己紹介がてら「自分を紹介するホームページでも作ってみない？」4日目

# 初手からソースコード
“`html:index.html