NCMBのデータエクスポートに使えるGoogle Chrome機能拡張（スクリプトのエクスポート）

[NCMBは2023年3月末をもって終了します](https://mbaas.nifcloud.com/info/2023/11/post-171.html)。

NCMBを利用されている方々は、まずアプリのデータを適切に保全し、移行先を検討する必要があります。NCMBにはエクスポート機能はあるのですが、ダウンロード実行まで時間がかかったり、ファイルストアには対応していないという問題があります。

そこで、本来は管理画面を便利に使ってもらうために作っていたChrome機能拡張に、データ移行に関する機能を追加しました。以下はスクリプトのファイルを一括エクスポートする機能についての解説です（v1.6より）。

## 動作について

動作は以下のようになります。機能拡張をインストールしていると、スクリプトの画面にエクスポートボタンが追加されます。このボタンを押すと、すべてのスクリプトがダウンロードされます。

![1846_console_mbaas_nifcloud_com_-_1214143614.jpg](https://qiita-image-store.s3.ap-northeas

NCMBのデータエクスポートに使えるGoogle Chrome機能拡張（プッシュ通知の全データエクスポート）

[NCMBは2023年3月末をもって終了します](https://mbaas.nifcloud.com/info/2023/11/post-171.html)。

NCMBを利用されている方々は、まずアプリのデータを適切に保全し、移行先を検討する必要があります。NCMBにはエクスポート機能はあるのですが、ダウンロード実行まで時間がかかったり、ファイルストアには対応していないという問題があります。

そこで、本来は管理画面を便利に使ってもらうために作っていたChrome機能拡張に、データ移行に関する機能を追加しました。以下はプッシュ通知のデータをエクスポートする機能に関する解説です（v1.6より）。

## 動作について

動作は以下のようになります。機能拡張をインストールしていると、プッシュ通知の一覧画面にレポートDLボタンが追加されます。このボタンを押すと、すべてのプッシュ通知のレポートをJSONまたはCSVにて、ダウンロードできます。

![1847_console_mbaas_nifcloud_com_-_1214143703.jpg](https://qiita-image-s

NCMBのデータエクスポートに使えるGoogle Chrome機能拡張（会員・ロールの全データダウンロード）

[NCMBは2023年3月末をもって終了します](https://mbaas.nifcloud.com/info/2023/11/post-171.html)。

NCMBを利用されている方々は、まずアプリのデータを適切に保全し、移行先を検討する必要があります。NCMBにはエクスポート機能はあるのですが、ダウンロード実行まで時間がかかったり、ファイルストアには対応していないという問題があります。

そこで、本来は管理画面を便利に使ってもらうために作っていたChrome機能拡張に、データ移行に関する機能を追加しました。以下は会員・ロールのデータをダウンロードする機能についての解説です（v1.6より）。

## 動作について

動作は以下のようになります。機能拡張をインストールしていると、会員管理の一覧画面にエクスポートボタンが追加されます。このボタンを押すと、すべての会員データとロール毎の会員データがダウンロードされます。

![1845_console_mbaas_nifcloud_com_-_1213142610.jpg](https://qiita-image-store.s3.a

JavaScriptでlower_bound(),upper_bound()

AtCoder Beginner Contest 248
[D – Range Count Query](https://atcoder.jp/contests/abc248/tasks/abc248_d)
自作の二分探索の結果を場合分けして解答したが
[提出結果1](https://atcoder.jp/contests/abc248/submissions/48480948)

そもそもlower_boud()とupper_bound()があれば場合分けをする必要がないかつ
解答コードを少し改造すれば両方とも実装可能だったのでここに記す

“`js:lower_bound()
function lower_bound(target, arr) {
let left = -1
let right = arr.length + 1

while (right – left > 1) {
let mid = (right + left) / 2
if ((right + left) % 2 !== 0) {
mid = (right + left

申請書の入力方法をナビゲート！

「[コラボフロー Advent Calendar 2023](https://qiita.com/advent-calendar/2023/collaboflow)」14日目の記事です！

今年も残すところ2週間ちょっとですね・・・
今年は長年応援してきた阪神タイガースが日本一になり、最高の年でした🎉
今から来年の連覇を願ってやまないこにおです。

—

みなさん、申請書の画面や入力方法のガイドはどうされてますでしょうか？
マニュアルを作成したり、申請書のフォームに説明を記載したりされてるのではないかなと思います。

でもマニュアルの作成は項目が変わる度に画面キャプチャを取り直したり、フォームに説明を入れすぎると申請書の体裁を整えるのが難しかったりしますよね💦

そこで今回は、コラボフローのJavaScript APIを利用した入力ガイドを作成する方法をご紹介します！

## 利用するライブラリ

今回は「TourGuide JS」というJavaScriptライブラリを利用します。
TourGuide JSの使い方は非表示にシンプルで、簡単にステップ形式のチュートリアルを作成するこ

Java 8：2024年のオプションは？


2022年3月、[OracleはJava 8のPremier Supportを打ち切った](https://www.oracle.com/java/technologies/java-se-support-roadmap.html)。もしあなたが社内の意思決定者であるなら、自問すべきはこうだ：今がJava 8を手放すべき最適なタイミングなのか？と。

2018年、OracleはJavaのライセンス方法とリリーススケジュールを根本的に変更した。昨年までは、Java 8とJava 11のみがLong-Term Supportバージョン（LTS）であり、これは本番環境でバージョンを使用するかどうかの決定に大きな影響を及ぼしていた。最近になって、これはより迅速なリリース・スケジュールに置き換えられ、古いバージョンのJav

BabylonJS デカールメッシュによるデカールの実現

# デカールメッシュ

BabylonJS ではデカールの実現方法について2つの方法が紹介されていますが今回はデカールメッシュで実現する方法を紹介します。[`CreateDecal`](https://doc.babylonjs.com/typedoc/modules/BABYLON#CreateDecal-2) を使用します。

デカールメッシュのメッシュの決まり方はざっくりと以下のようになります。
– `position`, `size`, `normal`, `angle` の各オプションパラメータに従って1つの直方体を空間に配置する。
– 直方体の元々のZ軸負の面とZ軸正の面からそれぞれ反対側の面へ向かって平行移動させていく。
– 平行移動の過程でひっかかったデカール適用先メッシュに沿うようにメッシュを決定していく。

`position` オプションはデカールメッシュを決定するために配置する直方体の中心位置を指定します。デフォルトは `(0, 0, 0)` です。
`size` オプションは直方体のサイズを指定します。デフォルトは `(1, 1, 1)` です。
`norma

簡単なゲームを作ってみた

# はじめに
今回、私はHTML,CSS,JavaScriptを使った簡単なゲームを作ろうと思います。
何を作ろうか考え、トランプゲームのブラックジャックにしようと思ったところ、とても難しいことに気づきました。
そこで、少し簡単になってしまいますが、自分なりにブラックジャックのルールをアレンジした**ひとりブラックジャック**というものを作っていきたいと思います。

# ブラックジャックとは
トランプを使います。
最初に2枚のカードが配られます。
プレイヤーはディーラーよりもカードの合計が21点に近づければ勝利です。21点を超えてしまうと、その時点で負けです。
2～9まではそのままの数字、10・J・Q・Kはすべて10点と数え、Aは「1点」もしくは「11点」のどちらに数えてもいいです。
（自分の作ったブラックジャックには、10・J・Q・K・Aのルールはあまり関係ありません）

# 完成形
まず完成形です。
![a1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634397/76e869ae-5945-

Reactのメモ化は最終手段にしたほうが良いという話

# memo化について
Reactでは親コンポーネントが再レンダリングされると、子のコンポーネントも再レンダリングされてしまいます。

例えば、以下のような例だと親コンポーネントでcount upボタンを押すたびに、
子の`ExpensiveComponent`も再レンダリングされてしまいます。

`ExpensiveComponent`が非常に重い処理が含まれていると、count upボタンを押すたびに重い処理が走ってしまい、パフォーマンス悪化につながってしまいます。

“` react
import React,{useState} from ‘react’;

export function App() {
[count,setCount]= useState(0);
return (

Hello React.

{count}

setCount((count)=>count+1

【⑤環境構築】Vite+React+TypeScript+GitHubPagesで爆速サイト公開

## はじめに
業務ではVue.js+JavaScriptを使用しています。
が、もう少しモダンなフレームワークと言語に挑戦したい…ということでReactとTypeScriptをチョイスし、簡単なWEBアプリをつくることに:v:

…と思い立ったのが10月末。
「そういえば12月はQiitaアドベントカレンダーがあるな…そこまでに公開できたらいいな:sunglasses:」と思い、1ヶ月半程度で設計~公開まで行けると踏んで開発開始。

折角なので、制作の過程も含めて記事化してみました。

ということで、本記事は下記連載の第5弾となります。
他記事も併せてご覧ください。
[【①アイデア選定】](https://qiita.com/YutaManaka/items/f5db1d86239203db8ade)
[【②技術選定】](https://qiita.com/YutaManaka/items/b1397c0624010b693a12)
[【③設計(ロジック)】](https://qiita.com/YutaManaka/items/6d412971574c4ca9fb1b)

[ジュニアエンジニア・エンジニアを目指す人向け]フロントエンドエンジニアがよく使っているJavaScriptのメソッド9選 + 業務効率upのツール2選

:::note info
この記事は[Wano Group Advent Calendar 2023](https://qiita.com/advent-calendar/2023/wano-group)の14日目の記事となります。
:::

## はじめに
私は今年の6月からWanoグループに入社し、[Tunecore Japan](https://www.tunecore.co.jp/)のフロントエンドエンジニアとして従事しており、エンジニア歴はまだ半年にも満たないジュニアエンジニアです.

今回は私がエンジニア転職を目指して、学習している時にエンジニアがどんなコードを書いているのか気になってました。
そこでJavaScriptにフォーカスして、どんなメソッドがよく使われているかを調べてみました。
本記事では、以下の点について説明しています。
　1.そのメソッドの簡単な説明
　2.例題コード
使用頻度が高かった順に説明しますので、エンジニアを目指す方々の参考になればと思います。

また、今回は２つの便利なツールも紹介していますので、日々の手助けになると幸いです。

##

【JointJS】ElementToolsを使ってElementを操作できるようにする

以前、[【JointJS】LinkToolsを使ってLinkを操作できるようにする](https://qiita.com/acnaman/items/aa0983ce2acd2fe77e5b)という記事を書きましたが、今回はそれのElement版になります。

## ElementToosとは

LinkToolsのElement版です。
LinkToolsがLinkにツールを表示する機能だったのに対して、ElementToolsはElementにツールを表示する機能です。

## 利用可能なElementToolsの例

### `Remove`

対象のElementを削除できるボタンを追加します。


### `Control`

図形を操作するためのハンドラーを追加します。操作時の挙動は`getPosition`/`setPositi

スクロールに連動したコマ送りアニメーションを作る

## はじめに
LP作成の際以下のgifのような、スクロールに連動してパラパラ漫画の様に画像が連続で切り替わるコマ送りアニメーションを実装しました。
タイトルやプログレスサークルを出したり、フェードアニメーションを入れたりと要件が複雑であったため、ライブラリを利用せずTypescriptで実装しました。
実際に実装したものはカスタムイベントや[Object.defineProperty](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)を利用した状態監視のようなこともしていますが、ここではアニメーションの根本的な実装に絞って紹介します。

:::note
この記事で出来上がるものは以下で試せます。
https://codesandbox.io/p/sandbox/scrollframeadvanceanimation-qt7qt4
:::

![ezgif.com-optimize.gif](https://qiita-image-st

MapLibre GL JS＋ベクトルタイルでウェブ地図に動的な集計円グラフを描く

# 作成例
警察庁オープンデータ「交通事故統計情報」（[参照リンク](https://www.npa.go.jp/publications/statistics/koutsuu/opendata/index_opendata.html)）より、2019-2022年の4年間に起きた交通事故について、場所と属性値を動的に集計して、マップ上に円グラフで表示しています。


デモサイトとなるウェブ地図のリンクはこちら（[参照リンク](https://kashiwa.co-place.com/cmap/ta-jc)）
円グラフで示すと、事故が集中している箇所について、どのような性質の事故が多いのかという考察に繋がります。

# 参考にしたもの
MapLibre GL JSの公式ページにあるExamplesのうち、下記のものをベースに作成しました。（[参照リ

【四元数】フルスクラッチで実装して分かったクォータニオンのお気持ち

## はじめに
`JavaScript`で3Dベクトルの回転を扱う機会が現れたので、使い慣れた`UnityEngine.Quaternion`をフルスクラッチで再現しました。
[レポジトリ：konbraphat51/UnityQuaternion_js](https://github.com/konbraphat51/UnityQuaternion_js)

これまで英語圏含めフルスクラッチ再現のコード例が公開されていませんでしたので、世界のフルスクラッチャーにとって有益なソースコードになるかと思われます。

ここで記すのは、この作業によって得られたクォータニオンの **感覚的理解** です。
あくまでも「感覚」なので数学的厳密性が欠けた記述、ないし誤った記述が多発するものかとおもわれますが、ご容赦ください。

## TL; DR: プログラマーが認識すればいいこと
論理をいっぱい隠蔽して過剰書きすると
* クォータニオンは
* 一つの回転軸と
* その回転軸で何度回るか

の情報をもつ

* クォータニオン同士の掛け算で回転を合成できる
* 左右どちら

p5.js の p5.Color で toString() の出力形式を指定する【完走賞ゲット-15】

:::note info
※ [Qiita の完走賞をゲットするための条件は「単一／複数のカレンダーに投稿した記事が合計25」です](https://twitter.com/Qiita/status/1593441648796524545)
:::

この記事は、「[完走賞ゲットのため小ネタ 25記事を投稿しようとチャレンジ v2 Advent Calendar 2023](https://qiita.com/advent-calendar/2023/youtoy)」の 15日目の記事です。

## 今回の内容
今回の内容は、p5.js の p5.Color で toString() の出力形式を指定するというものです。

### p5.Color の toString() の仕様
p5.js公式の p5.Color に関するリファレンスは、以下のとおりです。

●reference | p5.Color
　https://p5js.org/reference/#/p5.Color

![p5.Color](https://qiita-image-store.s3.ap-northea

PHP ぼやき日記 2023-12-13

[前回](https://qiita.com/sj-i/items/db793e09de33dd5e804d)

不定期に誰に向けるでもなく PHP に関する雑な殴り書きをしている。日付が変わってから 13 日の奴だと言い張って投稿するくらいの雑さ加減。

# nielsdos のひとが FFI 周りをわりと見ている
– [この 1 年ちょいほどの間でめちゃくちゃコミット入れてる](https://github.com/php/php-src/graphs/contributors?from=2021-10-18&to=2023-12-13&type=c) [nielsdos のひと](https://github.com/nielsdos)が最近わりと FFI まわりも見ている
– https://github.com/php/php-src/pull/12916
– https://github.com/php/php-src/pull/12915
– https://github.com/php/php-src/pull/12906
– がんばってまともに

【JavaScript】Cookieを削除する方法

以下のように記述すると指定したCookieを削除できます。

“`js
document.cookie = “削除するCookieのkey=; max-age=0”;
“`

JavaScriptで数字に単位(桁)を付ける[WIP]

## はじめに
この記事では、JavaScriptを使用して数値に桁の単位（例：万、億）を付ける方法について紹介します。業務で数値に桁を付ける必要が生じた際に、大きな数値を扱うことの課題に直面しました。この経験から、数値に桁をつける際の注意点を共有しようと思います。

## やりたいこと
目的は、入力された数字に対して、桁でフォーマットした文字列を返すことです。業務では、10垓を超えるような大きな値を扱う可能性があるので、100垓以下の値であれば正確な桁付き数字を返すことができることを目指します。
例：`111111111` -> `1億1111万1111`
　　`100000000` -> `1億`

「垓」ってなんやって方は以下の記事などをご参照ください。訳がわからない単位が大量に紹介されています。

https://yattoke.com/2018/02/15/number-list/

## 実装
以下の関数は、数値を桁ごとに分け、適切な単位を付けることでこの要件を満たします。具体的には、数値を文字列に変換し、それを逆順にして4桁ごとに区切り、各セグメントに対応する単位を付け

マークダウン風の記号があるとき、リストの黒丸を表示するUserScript【UserScript】

# はじめに
私は普段、次のUserCSSでインデントの入った行のリストマーカー、つまり黒丸を「Hide dot」を押さなくても消えている状態にしています。
“`setting.css
.line .dot {
display: none !important;
}
“`
しかし、場合によってはマーカーを表示させたいときもあります。たしかにUserCSSと任意の記号がついたリンクを使って、マーカーを表示することもできます。

例えば、`[-]`というリンクが行頭にあるときだけ、マーカーを表示したいなら次のコードで実現できます。これでは（ついでに）行頭文字を示す`[-]`を非表示にしました。
“`setting.css
.indent-mark:has(~.indent>*:first-child a[href$=’/-‘]) {
display: block !important;
}
.line:not(.cursor-line) .indent>*:first-child a[href$=’/-‘] {
display: none;
}
“`
けれど、実際に使ってみる