JavaScript関連のことを調べてみた2022年04月01日

Agora.ioでカメラ映像にWaterMark(透かし)を入れる方法

Agora.ioではWebSDKでカメラ映像を取得するAPIが用意されています。ですが、今回の件名にあるように少し映像を加工して配信したい場合もあります。
そのような要件に対応すべく、加工した映像を配信するAPIも用意されています。
この記事では例としてWaterMark(透かし)を入れる方法を解説します。

サンプルは[Github](https://github.com/fu-jimoto/AgoraIO-WaterMark-Web)に公開しています。

## 実装方法
### カメラ映像の取得
AgoraのAPIでカメラ映像取得する場合は[createCameraVideoTrack](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/iagorartc.html#createcameravideotrack)を利用しますが、今回は加工をする為、getUserMediaを利用します。
canvas上にカメラ映像と画像を描画しています。

“`javascript
const canvas = doc

Core Web Vitals（コアウェブバイタル・CWV）改善の施策を考える

## Core Web Vitals（コアウェブバイタル・CWV）改善の施策を考える

### はじめに
　Core Web Vitals（コアウェブバイタル・CWV）のスコアを改善する機会があったため、勉強も兼ねてスコア改善するためにどのような方法があるかをまとめたいと思います。
コアウェブバイタルは
・LCP（ページの読み込み速度）
・FID（インタラクティブ性、応答性）
・CLS（ページレイアウトなどの視覚的安定性）
の3つがありますが、今回は特にLCPの改善を中心にまとめました。

### スコア改善を検討した結論

　・施策を適用すれば必ずスコアが改善するとも限らないので、施策を入れた場合と入れていない場合で改善が見られるかを何度かスコア計測して確認してみることが大事。
　・スコアを改善する施策は色々あるが、手間と後の保守性を考えた施策を選ぶべき

### スコ

爆速でするNuxtとSkywayの連携

こんにちは！関西の大学に通うキンジョウです！もう春ですね。桜がとても楽しみです！！

## 今回は、NuxtとSkywayを連携をやっていきたいと思います。

### 成果物

Skyway使って通信試してみた
意外と簡単で、おもしろい！ pic.twitter.com/OBqYIl0Uhw

— キンジョウ/金城翔太郎 (@kinjyo1130) March 29, 2022

こんな感じで通信できるこ

jQueryで改行が効かない

## jQueryで改行ができなかった件について

## 修正後（改行できるようになった）
“` js:改行できる
var message = “この文は改行できます。” + “
” + “この文は改行できます。”;
$(‘書き換えたいクラスやidなど’).html(message);
“`
“` :結果
この文は改行できます。
この文は改行できます。
“`

## 修正前（改行できない）
“` js:改行できない
var message = “この文は改行できません。” + “\n” + “この文は改行できません。”;
$(‘書き換えたいクラスやidなど’).text(message);
“`
“` :結果
この文は改行できません。この文は改行できません。
“`

## 改行するために変更したこと
– 改行タグを `\n` から `
` にした
– `text()` ではなく `html()` にした

jQueryのtext()とhtml()の違い

## text()について

text()は指定した要素のテキストノードを返す。
指定した要素に含まれる子孫要素のテキストノードすべてを結合して返す。
※ テキストノードは、「HTML 文書」や「XML 文書」の、タグ以外の文字データ
　

今回使用するhtmlの例
“` html:html

hoge1です

• hogeの中の1個目
• hogeの中の2個目

hoge1です

エープリルフールなのでJavaScriptの信じがたい話をします

今日はエープリルフールなので、JavaScriptに関するに、わかに信じがたい話をしたいと思います。実用的な話ではないので、息抜きがてらお読みいただき、JavaScriptへの関心を少しでも深めていただければと思います。

思いつきでゆるめにとりとめもなく書いたため、内容がざっくりしているところがあります。詳しい方はコメントなどで補足いただけると助かります??‍♂️ できるだけ十分に調査したつもりですが誤りなどあればご指摘いただければ幸いです。

## JavaScriptは10日で作られました

JavaScriptは最も利用される言語のひとつで、[JetBrainsの統計](https://www.jetbrains.com/ja-jp/lp/devecosystem-2021/#What-programming-languages-have-you-used-in-the-last–months)によれば70%近くの開発者が使ったことがあるほど、広く普及している言語です。

IntersectionObserverクラスで画面をスクロールした時、要素をふわっと出現させる。

#はじめに
ホームページなどでよく見る、下にスクロールさせると下からふわっと画像が出現するようにするにはどうすれば良いのか気になったので調べてみました！

#コード紹介&解説

このような物を作っていきます！

See the Pen

ループ内でコールバック関数に変数を渡すとき、変数のスコープ次第でんぁぁぁぁってなる

## 突然ですが

以下のスクリプトの実行結果は

“`js
(function(){
let i = 0;
for (i = 0; i < 3; i++) { console.log(i); setTimeout(function(){ console.log(`hello ${i}`)}, 1000); } })(); ``` このようになります。 > 0
> 1
> 2
> hello 3
> hello 3
> hello 3

Oh……全部3になってやがるぜ……。

変数iのスコープがforのブロック外にあるので、`setTimeout`に渡しているコールバック関数は***最新のiの値***を参照します。
また、`let`で宣言せずに`for (var i = 0; i < 3; i++)`と記述しても同じ結果になります。varは関数以外ではブロックスコープを作りません。 この手のやつ、むかーし（letがないころ）すごいはまりました。イベントリスナーをループ内で設定しようとして「んぁ

【HTML5】マリオのコインの音をブラウザで出そう【ファミコン】

## サンプルページ
[こちら](https://bu-kurokky.github.io/mytest/beep/nes.html)になります。「？」マークをクリックしてもらえばきっと音がなるはずです！

## きっかけ
[弊社](https://brewus.co.jp)で開発している[ライブ配信システム](https://brewus.hubspotpagebuilder.com/a-live)に「**TVでよく見かける[テストパターン](https://bu-kurokky.github.io/mytest/beep/tv_test1.html)のを出したら面白いかなぁ？**」と思いJSでbeep音を出すのを調べたら**AudioContextを使えばできる**というのが分かました。

そして、そのパラメーターが「’triangle,’sine’,’square’,’sawtooth’」というファミコン世代にドンズバなものだったので、「だったらやろう！」と思ったのがきっかけです。
（JavaScriptでbeep音をちょっと検索するとmp3やm4aのバイナリをbase64化

CSS または JavaScript におけるブレンドモード対応

過去記事から分離、追記、一部変更。

参考「[ImageMagick で PSD のレイヤー情報を JSON 形式で取り出す & 関連情報 – Qiita](https://qiita.com/kerupani129/items/47242abaadf72723c976)」

本記事で使用した ImageMagick のバージョンは 6.8.9 です。

# 1. ブレンドモード対応

## 1.1. 早見表

ブレンドモードの表記の対応は以下の表のようになっています。

記載する内容は以下の通り:

– ブレンドモード名
– ImageMagick, Compose
– Photoshop
– Photoshop, Blend Mode Key
– JavaScript, PSD.js
– CSS または JavaScript から利用するためのブレンドモード名
– CSS
– JavaScript, Canvas
– JavaScript, PixiJS

表中で注意が必要な項目は以下のように表記しています:

–

React.js+WebAssembly+webpackでbuildする(地獄の環境構築から)

##はじめに
web関係初めて1ヶ月未満の超初心者です　しかも高校生です

ここら辺難しすぎて発狂しそう

###要求
React環境下でWebAssemblyを使いたい！！！！！！！！！！！！！！！！！！！

###要件
Reactを入れる
Webpackを導入して各種ファイルを読み込めるようにする
Emscriptenを使いC++をビルドしてjs側が読み込める形にする
jsからC++コードをビルドしたものを読み込む

###Reactとは
UIを作るためのフロントエンドライブラリ
Facebook社が開発したらしい
12月ぐらいからノリで触っている
まだまだ初心者

###Webpackとは
複数のモジュールをひとつにまとめるツールらしい
難しい　使ってる最中吐きそうになってた　えーん

###WebAssemblyとは
高水準の言語をバイナリー形式に変換してウェブ上から動かすことができるもの
インタプリンタのJavaScriptよりも高速に動作させるためにあるもの

#第一章 ReactとWebpackの導入

##Reactを入れる

“`
npx create-react-

【kintone カスタマイズ】　印刷画面の全ての罫線を非表示にする

## 印刷画面の全ての罫線を非表示にする
kintoneの罫線は「フィールドコード」を持ち合わせていないため、DOM操作による非表示が必要になります。 下記のコードではラベルに付与されるクラス名からラベル要素を全て取得し、その後非表示する処理を行っています。

“`javascript:js
(function () {
“use strict”;
// 印刷画面が表示されたときに動作
kintone.events.on(‘app.record.print.show’, function(event) {
//罫線の非表示(‘control-hr-field-gaia ‘)
let hrs = document.getElementsByClassName(‘control-hr-field-gaia ‘);
for (let i = 0; i < hrs.length; i++) { let hr = hrs[i]; hr.style.display = 'non

【kintone カスタマイズ】　印刷画面の全てのラベルを非表示にする

## 印刷画面の全てのラベルを非表示にする
kintoneのラベルは「フィールドコード」を持ち合わせていないため、DOM操作による非表示が必要になります。 下記のコードではラベルに付与されるクラス名からラベル要素を全て取得し、その後非表示する処理を行っています。

“`javascript:js
(function () {
“use strict”;
// 印刷画面が表示されたときに動作
kintone.events.on(‘app.record.print.show’, function(event) {
//ラベルの非表示(‘control-label-field-gaia’)
let labels = document.getElementsByClassName(‘control-label-field-gaia ‘);
for (let i = 0; i < labels.length; i++) { let label = labels[i]; lab

XserverにExpressサーバを立ててgitで更新出来るようにするまで

# はじめに
業務でFileMaker Cloudを使用しているのですが，不特定多数のユーザを対象にwebからデータベースへアクセスさせる必要が生じました。FileMakerには「webdirect」というデータベースのレイアウトをそのままweb公開させる仕組みがあり，従来そのような不特定多数からのアクセスをさせる場合にはそれ専用のレイアウトを作成してゲストアカウントで接続するようにしていました。

しかし最新のクラウドベースサーバであるFileMaker Cloudにはゲストアカウントが設定できないため，従来のweb directを利用したアクセスが出来ません。一方，「FileMaker Data API」というデータベースに外部からアクセスするためのAPIは用意されています（もちろん認証は必要ですが）。したがって

　　[Webページ]　→（FileMakerで認証）→　[FileMaker Data API]

という形での実装を考えましたが，FileMaker Data APIには[CORS制限](https://developer.mozilla.org/ja/docs/We