東京電力電力供給状況監視 – Phoenix LiveView

以前書いた記事 [「東京電力電力供給状況監視 – Phoenix Channel」](https://qiita.com/sand/items/5aa0d8ff778854411a42) の **LiveView** バージョンです。前は **Phoenix Channel** や **Elm** を使って実装しました。私の不慣れが大きいのですが、読み難いコードになってしまっています。今回はシンプルで読みやすいものを目指しました。**SPA** の範囲で言うと、LiveViewはとてもシンプルです。多分コードの生産性やメンテナンス性にとても優れていると感じられます。まあ、業務用アプリなどはまだ無理かもしれませんが。

**【関連記事】**
[Phoenix LiveView と キーボードイベント – Qiita](https://qiita.com/sand/items/a72a74ce7885a80eb969)
[Phoenix LiveView の JavaScript Hook – Qiita](https://qiita.com/sand/items/66049160bf

React コンポーネントでkeyを付ける

## keyの役割
keyはコンポーネントの識別に利用される

先頭に要素を追加するときの場合を見てみる
***Japan,America,Chinaのリストがあり、先頭にKoreaを追加する***

* keyがない場合

左のリストと右のリストを比較した際、keyがないとすべての要素を変更しなければならなくなってしまう。

* keyがある場合

JapanにJP,AmericaにUS,ChinaにCN,KoreaにKRを持たせた。
そうすると、keyが一致しているところは変更を加えずに、先頭にKo

【React / TypeScript】ローディングを実装する方法

画面を読み込むときにAPIを呼び出してデータが取得されるまでローディングマーク(丸がぐるぐるするやつ)を表示したい、という場面は多いでしょう。

今回はReact + TypeScript + react-loadingを使って実装します。
また、APIを実装するのは手間なので以下のAPIを叩いてデータを取得します。

“` https://api.thecatapi.com/api/images/get?format=json&results_per_page=10&type=gif “` (可愛い猫ちゃんの画像が取得されます。)

### react-loadingとは？

ローディングアイコンを実装するためのサードパーティ製ライブラリです。

– [npmのページ](https://www.npmjs.com/package/react-loading)
– [GitHubのリポジトリ](https://github.com/fakiolinho/react-loading)

最新のコミットが2年前なので開発はほぼ止まっているようです。

以下サンプルコードのようにpro

Python,Ruby,PHP,Java,JavaScript,PerlのMySQLの比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,PerlのMySQLの比較

# Python

https://qiita.com/ab-boy_ringo/items/f05bb6329f51e1632965

# Ruby

https://qiita.com/hukuro310/items/ec91beaecd11157e0640

# PHP

https://qiita.com/ab-boy_ringo/items/8274c66b6692966fdc55

# Java

https://qiita.com/namari/items/50d9aac0faf6b7e7b314

# JavaScript

https://qiita.com/PianoScoreJP/items/7ed172cd0e7846641e13

# Perl

https://perlzemi.co

Spring_web開発でよく使うメソッド

addAttribute(thymeleafで参照するkey, thymeleafに渡したいオブジェクト)
:thymeleafにオブジェクトを渡すことができる。

全てのチェックボックスにチェックが入る全選択ボタンを実装する

### はじめに
業務で実装した内容の忘備録として残しております。
これが正解！というものではないので、参考程度にご覧ください。
また、間違っているところ等あればご指摘頂けると幸いです。

### 仕様
HTMLとJQueryを使って「全選択」ボタンを押下することで複数のチェックボックスに一括チェックする。また、再度「全選択」ボタンを押下すると全てのチェックが外れる。

### 実装イメージ
**◉全選択ボタン押下後**
**◉再度全選択ボタンを押下**
![スクリーンショット 2022-10-20 0.29.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1516225/3db61342-93b7-91ca-3

ブラウザで使えるTOEICのマークシートを作ってみた

# はじめに
実装などに興味はなく、マークシートを利用したい方は[こちら](https://huwns.github.io/Marksheet/marksheet.html)。
10/19はTOEICの日ということで、[TOEIC公式みんなで模擬受験](https://www.iibc-global.org/toeic/20221019.html)というイベントが行われました。
Youtubeでプレミア公開動画を視聴しながら、オンラインで無料で問題が解ける機会でした。しかし、解答用紙はPDF形式で印刷して利用するものであり、すぐに印刷できる状況ではなかったため、解答を記録して置けるアプリケーションが欲しくなりました。そこで、オンラインでマークシートを検索してみたところ、見当たらなかったため、自分で作ってみることにしました。

# 方針
* ある程度実際の解答用紙に形式を寄せる。
* HTMLとJavaScriptのみでシンプルに実装する。
* 単一のファイルで機能が完結し、オフライン環境でも利用できるようにする。
* 解答結果をテキストとして出力することで、解答結果を保存できるようにす

RTMP サーバを実装して遊んでみた話

# RTMP サーバを実装して遊んでみた話

[mikan](https://github.com/monyone/mikan) という RTMP 1.0 サーバを自作してみました!
TypeScript 製で コアは Node.js 非依存ですので、TCP 以外のスタックでも対応できるはず?

その上で、色々遊んでみたので、その記録になります。

https://github.com/monyone/mikan

## なにをして遊んだの?

具体的には、以下の4つをやって遊んでみました!

1. RTMP 1.0 サーバを作って RTMP クライアントと疎通する
2. RTMP で受信した 映像/音声 データを FLV に変換する
3. FLV から MPEG-TS にコンテナを変換する
4. 変換した MPEG-TS の動画データを Apple LL-HLS としてパッケージングして配信する

ffmpeg で RTMP 受けて HLS 出すのを、自分でスクラッチで書いて、LL-HLS 対応もやってみた! っていうものです

ここから、それぞれ 4 つの内容を解説します

##

JavaScriptの配列のメソッドの使い方～filter・map・findIndex・splice～

# 記事の目的

ども、[N予備校](https://www.nnn.ed.nico/)でプログラミングをせっせせっせと勉強中のふーちんでーす
この記事ではJavaScript配列関係のメソッドの使い方、4つ紹介・説明しまーす。
今までは、「`push`と`join`ならわかるけど、、？」みたいな状態でした。
そして最近、N予備校で勉強中に、`filter`メソッド、`map`メソッド、`findIndex`メソッド、`splice`メソッドが出てきました。
N予備校の教材をよく読んだら大体はわかりました、が、それでもちゃんと分かっている気がしなかったので、
Qiitaの記事を書いて説明できるか試してみました。

# 目次

– [1つ目、filterメソッド](https://qiita.com/fuuchin/items/8c14164cb4ef886f09e0#1%E3%81%A4%E7%9B%AEfilter%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89)
– [2つ目、mapメソッド](https://qiita.com/fuuchin/items/

セレクトボックスのchangeイベントで遷移した場合のブラウザバックの制御

# はじめに

セレクトボックスの`change`イベントで
ページ遷移するよう実装した場合のブラウザバック時の制御についてまとめました

# 問題
セレクトボックスを変更した(changeイベント)でページ遷移をした場合、
ブラウザバックでセレクトボックスの選択が初期化されない

## 例
“`html
…
123
…
“`

“`js
const target = document.querySelector(“.target”);

target.addEventListener(‘change’, function(e) {
// 任意のURLに遷移
});
“`

1. ページアクセス時

思えばちゃんと理解していなかったJavaScirpt関連基礎知識 17問

初めは動かすことだけを意識し過ぎていて、当時は何となく使うことも多かった.

全部答えられますでしょうか?
簡単なもの多いですが、力試しにどうぞ.

※参照リンク貼っていますが、怪しいブログやプログラミングスクールは極力抜いています.
含んでいたら教えてください.

# JavaScript関係なく

### 0.1 + 0.2 == 0.3はFalse

英語 : Why 0.1 + 0.2 ≠ 0.3 in JavaScript
https://javascript.plainenglish.io/why-0-1-0-2-0-3-in-javascript-d7e218224a72

日本語 : Pythonで、0.1+0.1+0.1==0.3 がFalseなのは何故でしょうか？
https://jp.quora.com/Python%E3%81%A7-0-1-0-1-0-1-0-3-%E3%81%8CFalse%E3%81%AA%E3%81%AE%E3%81%AF%E4%BD%95%E6%95%85%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3

face-api.jsの顔検出速度を比較してみた【技術メモ】【小ネタ】


# はじめに
株式会社マイスター・ギルド新規事業部のウサギーです。
弊社新規事業部では、新規サービスの立ち上げを目指して
日々、アイディアの検証やプロトタイプの作成を行っています。

今回は、face-api.jsの小ネタです。

# 顔モデルの読み込みが遅い…
[face-api.js](https://justadudewhohacks.github.io/face-api.js/docs/index.html)を気に入ってよく使っています。
使って作ったサービス?

https://m-gild.com/ar/nenga/2022/

なのですが、
よく指摘されるのが「__表示されるまでが遅い__」ということ‥
1度読み込みした端末ではそこそこ早いのですが、
「トラニナル」のようなAR年賀状サービスは何度も継続的に起動するものではないです

Dateオブジェクトだけでカレンダーを作る

# 概要
既存のカレンダーライブラリはたくさんありますが、少々柔軟性に欠けるのでイチから自分で作ろうと考えました。今回はJavaScriptの標準組み込みオブジェクトである「Dateオブジェクト」のみを使ってカレンダー生成アルゴリズムを構築していきます。（マイブームのReactで開発を進めます。）

##### 完成したサンプルサイトは[こちら](https://calendar-maker.vercel.app/)↓↓

https://calendar-maker.vercel.app/

# アルゴリズム
年,月を引数にとり、その月の日にちをカレンダーに見立てた二次元配列で返す関数を作ります。
以下は2022年10月の配列です。
“`ts:calendar:number[][]
[
[25, 26, 27, 28, 29, 30, 1],
[2, 3, 4, 5, 6, 7, 8],
[9, 10, 11, 12, 13, 14, 15],
[16, 17, 18, 19, 20, 21, 22],
[23, 24, 25,

【Javascript/正規表現】HTMLのテキストドキュメントからcolor属性を排除

# はじめに
仕様くん 「下のファイルから color: xxx; の部分だけ抜いといて〜」
私 「…（なんか難しそう）」
仕様くん 「でも“`

“`の中からは抜いちゃダメだよ」
私 「…（絶望）」

※わかりやすくするためにhtml形式で書いてますが、用意されていたのはテキストファイル形式でした。

“`html

あいうえお

かきくけこ

“`

# 実装
“`javascript
// 引数でテキストファイル受け取り
function(str) {

// テキストファイル内で「