- 1. Agora.ioからWeb用のバーチャル背景機能(β)がリリースされました
- 2. TypeScript: Promise風に振る舞うクラスの作り方
- 3. LWC CSV出力方法
- 4. 【OBGノウハウ】バリデーションチェックについて
- 5. 配列を文字列に変換する際の注意点
- 6. 【パブリッシャー】HTMLとJavaScriptでカスタムレポートを作成してみる
- 7. HTML/CSSコーダーにもデザインカンプを半透明で重ねる機能の自作をお勧めする件
- 8. 【JavaScript】Canvasで単純なお絵描きツール
- 9. JavaScriptでオセロを作ってみた。リファクタリング。
- 10. 【chrome拡張機能】teratailで不快なユーザをブロックする拡張機能を開発
- 11. 【PHP】タグ機能③
- 12. 【React】Refのメモ
- 13. input(TextField)内にペーストした画像を表示する方法 (React, MUI(旧Material UI))
- 14. JavascriptでJSONの配列の中からランダムに重複せず指定個数の配列を抜き出したい
- 15. ページ非表示で止まったvideoタグをもう一度再生する
- 16. 最後のカンマについて（JavaScript）
- 17. 【Stimulus】targetがある時だけ関数を実行する方法
- 18. 僕が成長するきっかけになったJavaScriptの問題と全解説 ~昔の僕のクソコードを添えて~
- 19. メソッドチェーンとは【個人的なお勉強アウトプット】
- 20. React + TypeScript: Apollo ClientのuseMutationフックでGraphQLのデータを書き替える
Agora.ioからWeb用のバーチャル背景機能(β)がリリースされました
この記事では公式ドキュメントの[Use the Virtual Background Extension](https://docs.agora.io/en/Video/virtual_background_web_ng?platform=Web)を翻訳した内容になります。
## 概要
この*agora-extension-virtual-background*拡張機能は、バーチャル背景機能を実装するためにAgora Web SDK（v4.10.0以降）と一緒に使用されます。
この機能により、ユーザーは実際の背景をぼかしたり、単色または画像に置き換えたりすることができます。
この拡張機能は、オンライン会議、オンラインクラス、ライブストリーミングなどのシナリオに適用できます。
個人のプライバシーを保護し、視聴者が気を散らすのを減らすのに役立ちます。次の図は、拡張機能がどのように機能するかを示しています。
 {
resolve(“hello world”);
},
};
console.log(await p);
//=> “hello world”
“`なので、Promiseのように振る舞うクラスを定義する場合は、`then`メソッドを実装すればいいわけです。TypeScriptでは`PromiseLike
`インターフェイスがビルトインで提供されているので、これを実装したクラスを定義します。 “`typescript
class HelloWorldPromise implements PromiseLike{
r
LWC CSV出力方法
# 1.目的
今回LWCでのCSVファイルを出力方法を共有します。# 2.ソース
##### exportDataToCSVInLWC
“`exportDataToCSVInLWC.html
Do you want download data as a CSV format, Clic
【OBGノウハウ】バリデーションチェックについて
# はじめに
会員登録ページで名前やメールアドレス、パスワードなどなど必要事項を入力する際に「正しく入力してね！」と注意されることがありますよね？
今回は、そんな入力値に対してチェックを行い妥当な表現であるか確認をする「バリデーションチェック」についての記事です。入力チェックとも呼びますね。
よく使用される基本的なものをJavaScriptを用いて簡易なものですが実装してみました。
# 入力フォームの作成
まずは簡単な入力フォームを作成します。
このフォーム内に入力された文字列に対してバリデーションチェックを行っていきます。
今回行うバリデーションチェックは以下の4点です。:::note info
①文字数チェック
②未入力チェック
③正規表現チェック
④一致チェック（パスワードとパスワード（再入力）:::
まずは、
配列を文字列に変換する際の注意点
## 環境
node.js v10.19.0
Ubuntu 20.4## 動作確認
配列を定義します。
“`node.js
var ary = [];
“`空の配列が返されます。
“`node.js
console.log(ary); // => []
“`存在しない要素を指定すると、undefinedが返されます。
“`node.js
console.log(ary[0]); // => undefined
“`空の配列に値をセットします。
“`node.js
ary.push(“米原”);
ary.push(“彦根”);
console.log(ary); // => [ ‘米原’, ‘彦根’ ]
“`配列かどうか判断する方法です。
“`node.js
console.log(Array.isArray(ary)); // => true
“`型で判断するやり方もあります。 ただし、object型ではあることは分かっても、arry型であるかまでの判断はおこなえません。
“`no【パブリッシャー】HTMLとJavaScriptでカスタムレポートを作成してみる
[Sharperlight](https://sharperlight.jp/)**パブリッシャー**で作成される公開クエリは、HTMLやJavaScriptを使用して作成するWEBインターフェースのコンテナとして使用することもできます。その簡単な例をここでは見ていきます。
[Sharperlight](https://sharperlight.jp/)には、jquery、[KendoUI](https://docs.telerik.com/kendo-ui/introduction)、yui、D3、Chart.JsなどのJavaScriptフレームワークが梱包されています。それらを利用してWebインターフェースを作成することができます。
今回は、Chart.Jsを利用して、折れ線グラフを表示してみます。元になるデータもパブリッシャーで公開クエリとして定義します。
## データソースを準備する
**パブリッシャー**を起動して公開クエリを作成します。
グループ名とコードを入力したら、クエリの編集を開始します。
 `PerfectPixel`についてはこちら↓。
https://qiita.com/yymmt/items/c3a015fa97d167ca0e6c
今回も、こちらのサイト↓から、ポートフォリオのテンプレートをお借りして説明します。
https://webdesigner-go.com/template/portfolio-02/
# 対象の読者
– デザインカンプを元にHTML/CSSをコーディングする人
– HTML/CSSの文法は分かっていて、大まかにはカンプ通りにできる人
– 特に、CSSの微調整の効率を上げたい人
– JavaScriptの基本的な文法は分かっている人# Tampermonkeyのインストー
【JavaScript】Canvasで単純なお絵描きツール
# サンプル
https://mogamoga1024.github.io/SimpleDrawingTool/
# 結論（ソース）
“`html:index.html
“`“`javascript:main.js
const canvasHtmlElement = document.getElementsByTagName(“canvas”)[0];
const clearButtonHtmlElement = document.getElementById(“clear-button”);JavaScriptでオセロを作ってみた。リファクタリング。
以前に投稿して随分と時間が経ってますが、たまにストックしてくださったり見てくださる方がいらっしゃいます。
より良く新しい記述を提供できたらと思ったので今回リファクタリングを試みました。初学者の方のお役に立てればと思います。
以前投稿した記事はこちら
https://qiita.com/tanimoto-hikari/items/c5daefd9af9989b9b8dd
以前のコード
“`js
window.onload = function(){var $tableElements = document.getElementsByTagName(‘td’);
//順番を制御するための変数
let order = true; //trueは黒（先行）
let othelloWhte = ‘◯’;
let othelloBlack = ‘●’;
let othelloColor = othelloBlack;//tableの全てにclickイベントを付与する
for (let $i=0; $i < $tableElements.leng【chrome拡張機能】teratailで不快なユーザをブロックする拡張機能を開発
# はじめに
はじめまして！
最近teratailを使い始めたのですが、意味のない質問を連投しているすごく鬱陶しいユーザがいて不快な気持ちになりました。しかし、teratailには標準のブロック機能がないため、不快なユーザの質問を非表示にする事が出来ませんでした。
そこでchrome拡張機能で以下のような物を開発しました。
– teratailのユーザをブロック出来る
– ブロックしたユーザの質問は非表示にされる# 使用するための手順
## chromeの拡張機能の入れ方
この拡張機能はパッケージ化されていないため、まずパッケージ化されていない拡張機能を読み込む方法を紹介します。
1. [github](https://github.com/mineralwater0329/teratailUserBlock.git)からcloneする
2. [chrome拡張機能の管理](chrome://extensions/)からパッケージ化されていない拡張機能を読み込むでcloneしたフォルダを読み込む
## 本拡張機能の使い方
1. [teratail](https://teratail【PHP】タグ機能③
下記投稿の続きで、タグ機能に登録機能（DB接続）を実装します。
https://qiita.com/ryouya3948/items/da1a53e32edbd16637a5
https://qiita.com/ryouya3948/items/f8a574bb900ba4fefecb
# DBにタグ情報保存
“`html:form.php
input(TextField)内にペーストした画像を表示する方法 (React, MUI(旧Material UI))
# 目的
SlackやTeamsのように記入欄に画像をペーストし表示するのを目的としています。
ペーストした瞬間にDBに送りそのURLを取得して画像を表示するのではなく、ペーストした画像からデータを取得し表示します。
ただSlack、Teams、Qiitaはペーストした瞬間にDBに送ってるみたいです。
# 方法
React, Material UIを使っています。“`typescript:index.tsx
import * as React from ‘react’;
import TextField from ‘@mui/material/TextField’;
import { Button, Stack } from ‘@mui/material’;
import ImageList from ‘@mui/material/IJavascriptでJSONの配列の中からランダムに重複せず指定個数の配列を抜き出したい
# タイトルの通りなのだがやりたいことを説明
1. JSONの配列がある
1. その数より少ない要素数を指定して
1. 配列の中からランダムに
1. しかし重複なく
1. 新しい配列を作成したいなんだかいろいろと方法がありそうだが、できるだけ組み込み関数を利用して実装したい。
## ランダムな要素抽出
“`
const objs = [
{ title: “apple”, price: 500 },
{ title: “orange”, price: 200 },
{ title: “melon”, price: 5000 },
{ title: “tako”, price: 2500 },
{ title: “ika”, price: 100 },
{ title: “mochi”, price: 150 }
];
// console.log(objs);const new_len = 3;
// 配列に使用すると 要素の数分の数値を出せる
// obj_keys = 0, 1, 2, 3, 4, 5 となる（以下）
var obj_keysページ非表示で止まったvideoタグをもう一度再生する
HTMLのvideoタグで動画を再生しているときに違うタブを開いたりしてページを非表示にするともう一度ページを表示したときに動画が止まったままで再生されません。
これをもう一度再生させるにはページが表示されたことを知らせてくれるpageshowイベントを使います。
“`javascript
window.addEventListener(“pageshow”, function(){
document.getElementById(“video”).play(); //idは使用してるものに変えてください
});
“`
これで非表示だったページを再表示したときに自動的に動画が再生されます。最後のカンマについて（JavaScript）
## 最後のカンマとは？
最後のカンマとは、JavaScriptにおけるアレイとオブジェクトの括弧の内部で使用するカンマについて、一番最後のエレメントに対してカンマをつけるのかとうか？という話です。
ちなみに、英語では、trailing commasと呼び、trailとは、足跡や引きずった跡のことなので、カンマを引きずった跡に見立てているわけです。## JavaScript Arrays
最初にアレイですが、JavaScriptでは最後のカンマがあってもなくても、問題ありません。
“`JavaScript
var arr = [ “絵梨花”,”瑞穂”,”紗理菜”, ];
console.log(arr); // [ “絵梨花”,”瑞穂”,”紗理菜” ]
console.log(arr.length) // 3“`
ただし、もう一つカンマを付け加えると変なことになりますので、注意しましょう。“`JavaScript
var arr = [ “絵梨花”,”瑞穂”,”紗理菜”,, ];
console.log(arr); // [ “絵梨花”,”瑞穂”,”紗理菜
【Stimulus】targetがある時だけ関数を実行する方法
# はじめに
Rails7 で Javascript を利用するときは Stimulus を使うのがデフォルトになっています。
特定のページで関数を実行する方法を書き残しておきます。
## 環境
– Rails 7.0.22
– Ruby 3.1.1
– Rspec 3.10.0
– stimulus-rails 1.0.4## やりたい事
特定のページの時だけクラスを削除する関数を実行する
# 本文
Stimulus のライフサイクルコールバックと呼ばれる特別なメソッドを使用すると目的を達成することができます。
`TargetConnected()`を利用する
“`javascript:class_controller.js
import { Controller } from “@hotwired/stimulus”;// Connects to data-controller=”class”
export default class extends Controller {
static target = [“class”];classTa
僕が成長するきっかけになったJavaScriptの問題と全解説 ~昔の僕のクソコードを添えて~
この記事は僕がちゃんとプログラミングを勉強し始めるきっかけとなったJSの問題に関する内容の記事になります。
# はじめに
最近ではNext.jsを使った長期インターンに参加できるほどに少しはマシになったとは思いますが、半年前まではJavaScriptを少しかじっただけで、何も理解していませんでした。しかし、ある時期に今回ご紹介する問題を **否が応でも** 解かないといけない状況になり、[JS-Primer](https://jsprimer.net/)(JSの教科書的なやつ)と睨めっこしながら奮闘しなんとか解き、先輩方にそれをレビューしてもらいました。
**そこで** 、今回の記事では、
前よりは成長した僕の知見と、先輩エンジニアの方々のアドバイスを融合させつつ
* 昔の僕のコードの何がダメ:tired_face:なのか
* より良い解答（1を踏まえて、どこを改善すると良くなるのか）
* 補足説明
この3点に着目しつつ解説していこうと思います！# 前置き
この問題は（ほぼJSの知識だけで解けますが）Typescripで出来ています。
もし、ローカル環境で解いてみたいというメソッドチェーンとは【個人的なお勉強アウトプット】
## メソッドチェーンとは
メソッドの実行結果に対して、変数などを介入せずに直接他のメソッドを実行すること## メソッドチェーンのメリット
可読性が上がる。
不必要に変数定数を宣言しなくてよくなる## 処理内容
直前のメソッドの戻り値に対して処理を行っている。## 参考サイト
https://travel.rakuten.co.jp/mytrip/ranking/spot-karuizawaReact + TypeScript: Apollo ClientのuseMutationフックでGraphQLのデータを書き替える
[Apollo Client](https://www.apollographql.com/docs/react/)はReactで使える状態管理ライブラリです。ローカルとリモートのデータをGraphQLで扱えます。本稿は`useMutation`フックでGraphQLのデータをどう書き替えるかについての解説です。Apollo Clientでクエリを使うための基礎はすでに学んだことが前提となります(まだの方は先に「[React + TypeScript: Apollo ClientのGraphQLクエリを使ってみる](https://qiita.com/FumioNonaka/items/0c6b711627e3443ff73b)」をお読みください)。公式サイトの「[Mutations in Apollo Client](https://www.apollographql.com/docs/react/data/mutations/)」で紹介された[作例](https://codesandbox.io/s/mutations-example-app-final-tjoje)に、TypeS
OTHERカテゴリの最新記事
-
- 2024.09.19
JavaScript関連のことを調べてみた
-
- 2024.09.19
JAVA関連のことを調べてみた
-
- 2024.09.19
iOS関連のことを調べてみた
-
- 2024.09.19
Rails関連のことを調べてみた
-
- 2024.09.19
Lambda関連のことを調べてみた
-
- 2024.09.19
Python関連のことを調べてみた