WebページでKaTeXを使う

## やりたいこと
自分で作ったHTMLのWebページでKaTexがパースされるようにしたい。
ページ読み込みのタイミングではなく、ユーザーのアクションに合わせてパースされるようにしたい。

## 背景
サーバー上のcsvをjavascriptで読み取ってhtmlに表示するというwebページで、KaTeXを埋め込む必要があるということになったのですが、[公式HP](https://katex.org/docs/browser)のStarter Templateを使おうとしたら上手くいきませんでした。
今回はkatex.jsをサーバーに置いて呼び出す方法で対応することになったので、備忘録として書きます。

## 準備
[こちら](https://github.com/KaTeX/KaTeX/releases)からzipをダウンロードして、中のkatexフォルダをサーバーにアップロードしておきます。

## コードを書く
HTMLのheadタグ内にkatex.cssとkatex.jsへのリンクを記載します。
“`HTML

【websocket通信】チャットサービスでの欠落

こんにちは、私は機械学習のエンジニアとして週3、4で勤務しようとフリーランスエージェントを利用しています。

最近の面談で直近のPJでの技術的課題とその解決について聞かれ、うまく説明できなかったwebsocketでのチャット欠落問題について備忘録として残しておきます。

—
私はチャット機能のあるサービスの開発に当時携わっておりまして、無茶な工数と引き継ぎで炎上しつつもなんとか第一期リリースを終えた時にそれは起きました。

顧客から「チャットが表示されていたのに後から見直すとある時間の複数のチャットだけ無くなっている」との障害報告が来ました。

このチャットのやり取りをしている間は正常に表示できているところがややこしいところで、
##### 1.websocketはブラウザ間でハンドシェイクして通信している
##### 2.チャットのDBへの保存はサーバーへの通信で行なっている
と**二種類のレイヤーで通信している**ことに起因していると考えました。
チャットのやり取りが成功しているため。1の通信は成功していて2で失敗しているということですね。

対応策としては以下を実施しました。

【Kintone】 IPアドレスでソートしたい

Kintoneの一覧画面で、IPアドレスでソートを行いたい。

# 普通にソートするとどうなるか
下の画像のように、IPアドレスだけを持つアプリを作成した。


「IPアドレス」ヘッダーをクリックしてソートすると、


このようにソートされる。
できれば`192.168.1.1`→`192.168.2.1`→`192.168.10.1`の順でソートする方法が欲しい。

# IPアドレスを0パディングする
足りないケタを0で埋めれば思った通りにソートできそうだ。つま

マイクがない場合のZoomで、音声接続できない場合の応急処置

自分用メモ。

# 発生したトラブル
ブラウザ版Zoomを利用している際に、「コンピューターでオーディオに接続」ボタンが表示される。青いボタンを押すと、20秒程度は、音声が通常通り流れるが、しばらくすると音声が途切れ、同じような青いボタンが表示される。2023年12月末ごろから、継続的に発生。
20秒ごとに表示されるため、とてもうざい。


＜発生した端末＞
OS ： Windows 11 Home 23H2 22631.2861
Google Chrome バージョン ： 120.0.6099.216（Official Build） （64 ビット）

# 調査した項目
– Chromeのゲストモードに変更
拡張機能が問題なのかと考え、すべての拡張機能が無効となる、ゲストモードでZoomを開く。やはり同一の現象が発生。
– ブラウザをFiref

AstroとQiitaAPIを使って簡単なブログ？を作る

## AstroとQiitaAPIを使って簡単なブログ？を作る
今回はAstroとqiitaのAPIを使用して自分の作成した記事一覧を表示してみたいと思います。

### 環境
Astro 4.0.0
tailwindcss 3.0.24
react 18.0.0

### アクセストークン取得
QiitaのAPIを使用するためにはアクセストークンをヘッダーに含める必要があるので必ず準備しておきましょう。

**設定→アプリケーション→新しくトークンを発行**


“`.env
PUBLIC_QIITA_KEY=<取得したトークン>
“`
取得できたら見えないようにenvファイルに書き込んでおきましょう

### APIを叩いてみる ###
“`typescript:src/libs/qii

もうjsなんていらない！世界で流行っているHTMXについてまとめてみた!

# HTMXとは

https://htmx.org/

HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。

**軽量** で **高速** で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。[WebSocket](#websocket)や[SSE](#sse)にも対応しているので、チャットアプリなどにも適している。

[2023 JavaScript Rising Stars](https://risingstars.js.org/2023/en)では、 **フロントエンド・フレームワーク**部門で見事2位に輝いた！(一位はReact)　似たような機能として、Ruby on Railsの[HotWire](https://hotwired.dev/)があるらしい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/

どうしても頭の中にJavaScriptが出てきてしまう中学生の話

どうもAtsu1209です。
私は中学生なのですが、ある授業の時どうしてもJavaScriptが頭の中に
出ててきてしまうので、それを記事にしました。

# 技術
中学校の技術の授業でフローチャートを勉強することになりました。
そこで、`条件分岐`のフローチャートが出てきました。

それを見た瞬間頭の中に１つの単語が出てきました。それは、
`if` JavaScriptのifがどうしても頭から離れなくなりました。
どうしてでしょうね。

# 以上
今回は短い記事ですが、共感できる方がいましたらぜひコメントとハート
よろしくお願いします。
では

JavaScript documentオブジェクトの主なメソッド

# はじめに
JavaScriptでHTML要素を操作するのに使用するdocumentオブジェクトの，主なメソッドをアウトプットします．

# getElementByid
指定したID属性を持つHTML要素を取得することができるメソッド．
#### 使用例 : input内のテキストを取得
“`HTML:HTML
～～～

表示

～～～
“`

![input](https://lh3.googleusercontent.com/pw/ABLVV87IbQ9mkajB

AfterEffects expression よく使うものまとめ

いいものがあれば追記していきます。

Adobe Expressionの詳細はこちら

https://helpx.adobe.com/jp/after-effects/using/expression-language-reference.html

https://helpx.adobe.com/jp/after-effects/using/expression-basics.html

有志作のリファレンスページ

https://aereference.com/expressions

## 数値系

### 16:9画面内で16:9画像をはみ出さないように回転させるときの倍率

1080pの画面内で1080pの素材を回転するときなど

`203.972886119 %`

ちなみに逆数は
`49.026123963 %`

算出方法

Redux Toolkit を脳死して使う(チートシート)

Redux Toolkit の使い方を理解したいのでまとめてみました。
Redux Toolkit とは状態管理するライブラリです。

通常のReduxよりコード量が減って簡単に管理出来ます。

ポイントさえ抑えておけば簡単に使えます。

# Install
インストールは次の通りです。

“`cmd:npm Install
npm install @reduxjs/toolkit react-redux
“`

# index

一度追加したらほぼ編集しないと思います。該当の追加箇所をコピペしたらOK。

“`typescript:app/index.tsx
import React from ‘react’
import ReactDOM from ‘react-dom’
import ‘./index.css’
import App from ‘./App’
import { store } from ‘./app/store’ //追加
import { Provider } from ‘react-redux’ //追加

ReactDOM.render(

JavaはまだChromeやEdgeで使えるのか？解決策としてのCheerpJの紹介


広く使われているプログラミング言語であるJavaは、何十年もの間、ソフトウェア開発業界の基本技術となってきた。Webブラウザを含むさまざまなプラットフォームで数多くのアプリケーションを動かしてきた。しかし、テクノロジーが進化し続けるにつれ、[Javaとモダンブラウザの互換性](https://leaningtech.com/cheerpj/)が議論されるようになりました。

このブログは、その疑問を解決することを目的としている： Javaは今でもChromeやEdgeで使えるのか？

__Javaアプレットとその衰退__

Javaアプレットは、かつてWebブラウザでインタラクティブなコンテンツを配信するための一般的な手段でした。アプレットに

Visualforceでjqueryの使用

Salesforceに以下のような押すと日付が変わるボタンを実装したので書いておきます。
# 目標
– Salesforceにて、「前日へ」ボタンを押すとtable内にある`apex:inputField`フォームの日付が前日になる仕組みを作りたい。（ほかのボタンも同様）
– その際にjQueryを使用する。

# やったこと
### 1. ボタンを押した時に反応してほしい
– いきなり実装することは難しかったため、まずはボタンクリック時に`console.log()`でコメントを出力できるようにしました。
– 最初に書いたコードは以下の通りです。
“`apex


～省略～

reduceメソッドについて

## 目次
1. [reduceメソッドとは](#reduceメソッドとは)
2. [サンプルコード](#サンプルコード)
3. [使用例](#使用例)

## reduceメソッドとは
JavaScriptの`Array`オブジェクトのメソッドの一つで、配列の各要素を累積的に処理して最終的な単一の値を生成するメソッドです。このメソッドは、反復処理を要素の合計や最大値、最小値などを計算するのに役立ちます。

“`javascript
array.reduce((accumulator, currentValue) => {
// コールバック関数の処理
}, initialValue);
“`
`accumulator`: 前回のコールバックの戻り値または初期値。
`currentValue`: 現在の要素。
initialValue: 最初のコールバック呼び出しのときに使用される初期値（オプション）。

## サンプルコード
以下は、`reduce`メソッドを使用した基本的なサンプルコードです。

“`javascript
const numbers = [1, 2, 3

HTMXを試してみた

# はじめに
近年注目を集めたHTMXに興味を持って、ついに試す時間が出来ましたので、
その経験や感想を共有させていただきます。

# [HTMX](https://htmx.org/)とは？
HTMXの目的はJSを最低限にして、高度なUXを作ることです。
それはどういう実現できるのを見てみましょう。

# 前提
[Pug](https://pugjs.org/api/getting-started.html)と[Express](https://www.npmjs.com/package/express)を使っていますが、どんなサーバー、バックエンドやテンプレートエンジンを使っても問題ありません。

今回作るTwitterみたいなメッセージ投稿ページです。

[リポジトリ](https://github.com/mguennecSaison/htmx-twitter-clone)

# 実装
## レイアウトを定義
““pug
doctype html
html(lang=”en”)
head
title Twitter clone in htmx
link(

React.jsで構築されたサイトをBookmarkletで操作する

# 序
React.jsで構築されたサイトをBookmarkletで操作するための何か

## なに？
DOM操作でINPUTエレメントなどに値を入力/変更してもReact側には伝えられないためReactから無視されます。
これを無理やりReact側に伝えるためにごにょごにょする奴です。

# 方法

## input=”text”
ごにょごにょした上でchangeイベントを強制発火します。

“`javascript
// React.jsのデータをイベントを発火することで無理やり書き換える
function setValueToInput(value, element) {
const lastValue = element.value;
element.value = value;
const event = new Event(‘change’, { bubbles: true });
const tracker = element._valueTracker;
if(tracker) {
tracker.setValue(lastValue);
}
el

簡単なTODOアプリケーション

# 初めに

HTML、CSS、JavaScript で作る簡単な TODO アプリケーションです。

の動画を見て学習していた時に書いていたので、まんまそのままっぽいです。
（怒らないでね。@_@♪）

# ひとまずコード

“`html:index.html

TODO

Node.jsでAzure OpenAI Embeddings APIを利用してみる

OpenAIの埋め込み(Embeddings)をJavaScriptから使ってみます。

https://platform.openai.com/docs/guides/embeddings/what-are-embeddings

## OpenAI Embeddings API

文章をベクトル変換してくれるAPIです。

クラメソさんの記事がイメージがつかみやすいです。

https://dev.classmethod.jp/articles/search-with-openai-embeddings/

## 準備とインストール、環境など

“`bash
$ npm init -y
“`

– Node.js v21
– @azure/openai: v1.0.0-beta.10
– openai: v4.24.7

### Azure AI Studioでモデルを作る

GPTなどではなく、`text-embedding-ada-002`を選択します。

> ![スクリーンショット 2024-01-17 3.14.40.png](https://qiita-ima

Node.jsでAzure Open AIのライブラリ(@azure/openai)を使ってAzure Open AIを使うメモ2

[先月書いた記事](https://qiita.com/n0bisuke/items/703943870d5a04fc2205)のAzure OpenAIのJavaScript SDKの仕様が変わったのかそのまま動かない状態になっていたので更新版です。

SDKのアップデートが激しくてちょっと見逃すとメソッドが消えてるとかあるのかもしれません。

## client.listChatCompletions()が動作しなくなっている?

ちょっと定かではないですがclient.listChatCompletions()のメソッドが[ドキュメントページ](https://learn.microsoft.com/ja-jp/javascript/api/%40azure/openai/openaiclient?view=azure-node-preview)に記載がなく`getChatCompletions()`になったように見えました。

## getChatCompletions利用版

Node.jsでと言いつつBunで実行しています。

### 環境

– 実行環境: Bun

【React】検索ボックス実装時のパフォーマンス改善案①

検索ボックスを実装したら画面が重たくなった…
という経験はないでしょうか。

考えられる原因はいくつかあると思いますが、基本的に**onChange**が悪さをしていることが多いです。

## 原因：テキストが入力されるたびにonChangeで重たい処理が実行されてしまっている

処理が重くなりがちな例
“`example.js
const filteringName = (inputValue) => {
// 高負荷な処理
someHeavyProcessing();

if (inputValue) {
const filteredNames = nameListData.filter((name) =>
name.toLowerCase().includes(inputValue.toLowerCase())
);
setNameList(filteredNames);
} else {
setNameList(nameListData);
}
};

…

<

App Checkを使って特定のアプリケーションのみCloud Firestoreへのアクセスを許可する

# はじめに
タイトル通りですが、この記事は`Cloud Firestore`で特定のアプリケーションのみアクセスを許可する方法について書いています。設定方法はiOS、Android、Webとプラットフォームごとに違いますが、ここではWebについてのみ説明しています。
また、サンプルコードでは`Vue.js`、`Javascript`を使用しています。

# 前提
* Firebaseプロジェクトを作成済み
* FirebaseにWebアプリを作成済み
* Cloud Firestoreを構築済み

# App Checkとは
> App Check は、未承認のクライアントがバックエンド リソースにアクセスするのを防ぐことで、API リソースを不正使用から保護します。Firebase サービス、Google Cloud サービス、およびお客様の API を連携して、リソースを安全に保ちます。

上記は公式ドキュメントから引用文です。
`App Check`は指定したクライアントのみ`Firebase`のリソースにアクセスできるように設定するためのサービスになります。

https