f@ctor

JavaScript関連のことを調べてみた

JavaScript関連のことを調べてみた
目次

JqueryでRedmineの「wikiページ」をもっと便利に(フィルタリング機能と移動機能)

## JqueryでRedmineの「wikiページ」をもっと便利に(フィルタリング機能と移動機能)

[Redmine Advent Calendar 2023](https://adventar.org/calendars/8974)の13日目の記事として作成しました。

[Redmine Advent Calendar 2023](https://adventar.org/calendars/8974)の11日目の記事として[JqueryでRedmineの「活動ページ」をもっと便利に②(フィルタリング機能と移動機能)](https://qiita.com/yam_asaki/items/2428610fd89bc73ce0ab)を作成しましたが、「活動ページ」だけではなく、「wikiページ」にも「フィルタリング機能と移動機能」を追加できそうな気がしてきましたので、試してみた結果を記事にまとめました。

* * *
### 既存のRedmineで不便なこと、改善したい点

Redmineのwikiページは、マークダウン形式でリッチなテキストを作成できる便利な機能です。ただし、か

元記事を表示

Youtubeのチャンネルトップで自動再生されるビデオを止めるだけのchrome拡張

## 毎回止めるの面倒
タイトルの通りです。お粗末な出来ですが折角ですので公開します。
(間違ってたらすみません)YoutubeはSPA(Single Page Application)が実装されているらしくページを移動しても再読み込みするまで`content.js`が反応しないので`background.js`でurlの遷移を検知してそれを基に`content.js`を動かしてます。
## コード

“`manifest.json
{
“name”: “youtubeチャンネルページ動画ストッパー”,
“description”: “チャンネルページのトップで自動再生される動画を停止します”,
“version”: “1.0”,
“manifest_version”: 3,
“background”: {
“service_worker”: “background.js”
},
“content_scripts”: [
{
“js”: [“content.js”],

元記事を表示

PrismaORMで複数のデータベーススキーマを動的に管理する

# なにこれ
とあるチーム開発でNext.jsを採用し、ORMとして初めてPrismaを触ってみました。そこで、RDB特有のデータベーススキーマの構造を利用して、アカウントごとに同じテーブル構造のスキーマを作成し、テーブル群をpublicスキーマと分割して扱うという設計に走りました。
要するにアプリケーションの方でアカウントが登録されると、スキーマのテンプレートをもとにアカウントidと同じ名前のデータベーススキーマが作成されるような流れ。

![スクリーンショット 2023-12-13 3.48.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3092163/fa246b34-e13a-a5ee-240d-73f2065ca1a7.png)

しかし、PrismaORMは基本的に`prisma/schema.prisma`に定義されているmodel群に対してのみ扱えるClientインスタンスができる仕組みになっています。特に指定がない場合、定義されたmodelはすべてpublicスキーマに作成されま

元記事を表示

Mapbox GL JS v3と国土地理院 標高タイルで「自分で作る色別標高図」風の地図を作成してみました

# はじめに
:::note info
この記事は [Mapbox Advent Calendar 2023](https://qiita.com/advent-calendar/2023/mapbox) 2日目の記事です。
:::
– Mapbox GL JS v3で、ラスタータイルの色を変更して表示する機能（raster-color、raster-color-mix、raster-color-range）が実装されました。

https://github.com/mapbox/mapbox-gl-js/releases

https://docs.mapbox.com/style-spec/reference/layers/#paint-raster-raster-color

– 今回は、Mapbox GL JS v3のラスタータイルの色を変更できる機能と国土地理院 標高タイル（Terrain-RGB形式）を用いて、地理院地図の「[自分で作る色別標高図](https://www.gsi.go.jp/common/000219828.pdf)」風の地図を作成してみました。

:::

元記事を表示

KintoneとAWSのS3の連携

# 要件
Kintoneで作業しているユーザー全てS3に保存しているオブジェクトを参照可能にしたい

# 方法
## 1. Access key IDとSecret access keyの作成
ここでは詳細述べませんが、AWS公式サイトで参考お願いします。
https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_credentials_access-keys.html#access-keys_required-permissions

## 2. IAMバケットポリシーを作成する
IAMバケットポリシーを以下のように作成します。
“`
{
“Version”: “2012-10-17”,
“Statement”: [
{
“Effect”: “Allow”,
“Action”: “s3:*”,
“Resource”: [
“arn:aws:s3:::バケット名/*”
],
“Condition”: {
“IpAddress”: {
“aws:Source

元記事を表示

正規表現からテキストデータを生成するウェブサービス作りました

正規表現パターンからテキストを生成するシンプルなアプリ、[Regexg](https://l.lllll.info/s/regexg)をリリースしました。

簡単な紹介をさせて頂きたいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640993/1ab8802a-5693-a496-36de-81e7c997113b.png)

（画像： [Regexg – Text Generator for Regular Expression](https://l.lllll.info/s/regexg)）

機械学習のためのデータ生成や、開発におけるフェイクデータの作成、あるいはビジネスやマーケティングのシーンにおけるセールス文章やSNSやツイートの投稿文まで、形式的な型に則ってデータの生成を行いたい場合はたまにあるかと思います。

このアプリでは例えば以下のような正規表現パターンを入力すると

“`
Good (morning|afternoon|evening)
“`

元記事を表示

高位合成言語アセンブラを作る。 その29

# 概要
高位合成言語アセンブラを作る。
論理式から、真理値表を作る。

# 投入する論理式。

“`
( ( ( a & b ) & ( ~c ) ) | ( ( ~a ) & ( b & c ) ) )
“`

# 生成するコード。

“`
make 10
wire 3 8
out 9
in 0 2
and 1 2 3
not 0 4
and 4 3 5
not 2 6
and 0 1 7
and 7 6 8
or 8 5 9
“`

# サンプルコード

“`

var src = document.getElementById(“src”);
var out = document.getElementById(“out”);

function run() {
var w = “”;
var in0 = 0;
var in1 = 2;
var z = 3;
var v = [“a”, “b”, “c”, “d”, “e”, “f”, “g”, “h”, “i”, “j”];
var str = src.value;
var codes

元記事を表示

【Ruby on Rails】アセットパイプラインとはなんぞや（初学者向け）

私は現在、未経験からのエンジニア転職に向けてプログラミングスクールで学習をしている、いしかわと申します。

今回Webアプリケーションの個人開発を進めている際、詰まってしまった**アセットパイプライン**について調べました。
どなたかの参考になれば幸いです。

:::note warn
プログラミング初学者なので、内容に誤り等ある可能性があります
誤りがありましたら教えてくださると幸いです
:::

## アセットパイプラインってなに？
アセットパイプラインは、アプリケーション開発において、JavaScript、CSS、画像などの静的ファイルを効率的に管理、最適化、提供するための仕組みです。主な目的は、ウェブページの読み込み速度を向上させ、ユーザーエクスペリエンスを向上させることです。アセットパイプラインはこれらのファイルを自動的に最小化、結合、キャッシュ管理し、ブラウザへの効率的な提供を補助します。これにより、ウェブアプリケーションのパフォーマンスを向上させることができます。

## 要するになに？
`アセット`:画像やCSSやJavaScriptファイルのリソースのこと
`パイプラ

元記事を表示

YjsとWebSocketで共同編集テキストエディタを作る【オフライン編集と永続化に対応 / Lexical】

# はじめに
テキストエディタの開発において、共同編集機能はチャレンジングである。
そんな共同編集の開発をスムーズに始めるためのガイドを目指して本記事を執筆した。

記事ではまず技術の概要を説明し、エディタの作り方を紹介する。
まず最初に共同編集とは何かを説明する。次に、共同編集機能の実装でよく使われるYjsについて軽く紹介し、テキストエディタに適用してみる。最後に、共同編集の結果をデータベースに保存する方法を紹介する。

実装には共同編集機能としてYjs、テキストエディタにLexical.jsを使う。他のエディタで開発する際にも、同じ考え方で実装できるので、参考にしてほしい。

補足：今回作ったデモを公開したので参考にどうぞ。

https://github.com/matsuyama-k1/collaborative-lexical-editor-demo

# 共同編集を実装するための前提知識
### 共同編集とは何か、そしてどんな技術が必要か
テキストエディタにおける共同編集とは、複数人で一つのテキストファイルを同時に編集できる機能である。イメージとしては、Google Doc

元記事を表示

Reactの要素作成処理を壊しながら内部的に見よう

—
この記事は株式会社ビットキー Advent Calendar 2023、13日目の記事です。

https://qiita.com/advent-calendar/2023/bitkey

## はじめに

こんにちは！株式会社ビットキーにてSETとして活動している川又と申します。Qiitaの執筆は今回が初めてです！
ビットキーではサービス開発においてReactを活用しております。

私も該当しますが、現在Reactを扱っているけど、Reactのコードベースを触れたことがない方・見たことがない方がいらっしゃいましたら、是非今回を機にハンズオンで一緒に内部実装を見ていきましょう。

—
まずはReactのリポジトリをローカルにcloneします。
“`shell
git clone https://github.com/facebook/react.git
yarn install
git checkout main #最新バージョンのReactに向けます
“`
内部処理の確認のためにテストを書きましょう
`react-dom`配下にて書こうと思います。
“`shel

元記事を表示

GBFSデータ+MapLibre GL JSでシェアサイクルマップを作成する

# はじめに
:::note info
この記事は [シェアモビリティの標準的なデータフォーマット GBFS Advent Calendar 2023](https://qiita.com/advent-calendar/2023/gbfs) 12日目の記事です。
:::
[ドコモ・バイクシェアから日本全国のポートのデータがオープンデータ（CC BY 4.0）として公開された](https://ckan.odpt.org/dataset/c_bikeshare_gbfs-d-nationwide-bikeshare)ので、[ハローサイクリングのポートのデータ](https://ckan.odpt.org/dataset/c_bikeshare_gbfs-openstreet)とあわせて、[MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/)+GBFSデータでシェアサイクルマップを作成してみました。

# デモサイト
https://shi-works.github.io/bikeshare-map-on-maplibre-

元記事を表示

【Qiitaで使用しているルールも紹介】textlintおすすめルールまとめ

この記事は、[Qiita株式会社のカレンダー | Advent Calendar 2023 – Qiita](https://qiita.com/advent-calendar/2023/qiita-inc)の13日目の記事です。

https://qiita.com/advent-calendar/2023/qiita-inc

—

## はじめに
`textlint`について、皆さんはご存知ですか?
実はQiitaのエディタ機能(ベータ版)でも、使用されています!

今回は、`textlint`のおすすめのルールとQiitaで使用されているものも
一部公開していこうと思います!

### textlintとは?
以下公式より
>textlint is an open source text linting utility written in JavaScript. It is hard to lint natural language texts, but we try to resolve this issue by pluggable approach.

簡単に説明

元記事を表示

SOCから始めるマルウェア解析

:::note info
これは [ZOZO Advent Calendar 2023](https://qiita.com/advent-calendar/2023/zozo) カレンダーVol.1の13日目の記事です。昨日の投稿は@YasuhiroKimesawaさんでした。
:::

# はじめに
SOCでは日々監視対応、インシデント対応を行なっています。その中ではファストフォレンジックを行う事も想定しなければなりません。
今回はその一環として行っているマルウェア解析の一例を紹介します。
※とても簡単な解析方法です。入門編です！

## ファストフォレンジックでのマルウェア解析とは
インシデントの影響範囲を早急に調査し、迅速に復旧するために、何が起こったのかを具体的に把握する必要があります。
例えば、マルウェア感染疑惑のある事象が発生した際には、以下の観点が気になる所です。

+ 情報漏洩
+ マルウェアの永続化
+ 復旧方法

これらの情報はセキュリティベンダーにて解析済でIOCが提供されているマルウェアであればある程度は公開情報から調査は可能ですが、攻撃者によってカスタマイズ

元記事を表示

JointJSのViewとは何なのか

今回の記事ではJointJSのViewについて書きます。

## JointJSのView

JointJSで描画されるすべてのCellには、Cellに対するViewがそれぞれ存在します。
このViewは[Backbone.jsのView](https://backbonejs.org/#View)を継承しています。

JointJSの[`dia.CellView`のドキュメント](https://resources.jointjs.com/docs/jointjs/v3.7/joint.html#dia.CellView.intro)によると、Viewは以下の役割を担っていると記載があります

– Paper内の要素のレンダリング
– Cellのポインタイベント処理
– Cell操作のための方法を提供する

つまり、JointJSでのSVGの描画やユーザー操作への対応の実装のためにBackbone.jsのViewを利用している、というだと思います。

## Viewの使い方

JointJSのViewは様々な使い方ができます。ここでは個人的に使用頻度が高いと感じるものを紹介します。

元記事を表示

p5.js と Tween24.js を組み合わせたお試し：イージングのブレンド【完走賞ゲット-13】

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

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

## 今回の内容
今回の内容は、以下の記事の続きにあたるものです。

●p5.js と Tween24.js を組み合わせたアニメーション・イージングのお試し 【完走賞ゲット-12】 – Qiita
　https://qiita.com/youtoy/items/ad2ade71d73fa2298723

前回の記事では、まずは p5.js と組み合わせる方法を探して、簡単なサンプルで試してみました。今回はその続きで、連続したアニメーションなど前回よりは少し複雑なアニメーションを扱えそうな内容を

元記事を表示

【JointJS】セルが多いときのパフォーマンスに影響がありそうな設定を検証してみた

JointJSでは多くの図形を描画する場合にパフォーマンスへの影響が懸念されます。大量の図形を描画しようとした際に、コード側で対策をすることができるのかがきになるところです。
今回はいくつかの設定値をピックアップし、実際に計測を行うと設定の有無でパフォーマンスの改善の余地があるのかどうかを調査していきます。

## 【検証1】Graphに追加するときのSortの有無

### 概要

Graphの`addCell()`/`addCells()`メソッドではオプションで`{sort: false}`を指定することで追加したCellの順序を整理するかどうかを指定できます。この設定がどれくらいパフォーマンスに影響するかを確認します。

### 検証方法

100個 / 1,000個 / 10,000個のRectangleをそれぞれ生成し、`addCells()`メソッドで同時に追加したときの時間を`{sort: false}`/`{sort: true}`をつけてそれぞれ計測した

### 検証結果

Sortを行わない方が速い
ただし1,000個未満くらいの個数であればあまり差は出ない

元記事を表示

【JavaScript】sort関数が数値の大きさでソートしない理由の考察

## きっかけ

https://qiita.com/qiita21409102/items/426db80a086950280e2e

上の記事を読んで、なんでこんな怠い設計なんだろうなーとぼんやり考えていたら、突然ひらめいた。
ので書く。

## なぜなのか

**JSの配列では数値や文字列などを混合させることができるから。**
数値のみの配列、文字列のみの配列、Dateのみの配列などで処理を変えることは容易だろうが、
混合されている場合、ソートのルールは各使用者の思惑によって変わってくる。
どういう挙動にしようが、「なんでこんなクソみたいな仕様なんだよ。」という声は出てくる。
ならいっそのこと面倒くさい型ごとの分岐処理などは組み込まず、（引数が指定されていなかった場合は）要素を文字列に変換してソートする。という単純な実装にしたのではないだろうか？

終わり。

元記事を表示

3D都市モデルPLATEAU 3DTiles+GeoJSONで3D主題図を作る

# はじめに
:::note info
この記事は [3D都市モデル Project PLATEAU Advent Calendar 2023](https://qiita.com/advent-calendar/2023/plateau) 2日目の記事です。
:::
[3D都市モデル PLATEAU LT 05](https://asciistartup.connpass.com/event/294152/)で[@_shimizu](https://twitter.com/_shimizu)さんが発表されていた、[deck.glのTerrainExtension](https://deck.gl/docs/api-reference/extensions/terrain-extension)を用いた[事例](https://docs.google.com/presentation/d/1bvh8Ddd7JYN4QibBQE7127psRAqDJUlXgLnq7RDnVag/edit#slide=id.g294ab4db98d_2_10)を参考にさせていただきながら、3D都市モデルPL

元記事を表示

最新の JavaScript で Image を読み込む方法

JavaScript の `HTMLImageElement` オブジェクトは多くの場合、非同期で画像を読み込みます。

(`decoding` プロパティの値によって同期して読み込むことも可能ですが、非同期の方が効率よく画像を扱えるため、本記事では説明しません。)

JavaScript では元々非同期の処理はコールバック関数を用いる必要がありました。

“`js
const image = new Image();
image.onload = () => {
// … image …
};
image.onerror = event => {
// … event …
};
image.src = ‘image.png’;
“`

`Promise`, `async`, `await` の追加によって、コールバック関数をラップして分かりやすく書くことができるようになりました。

“`js
const loadImage = src => new Promise((resolve, reject) => {
const image =

元記事を表示

Mapbox GL JS v3と国土地理院 標高タイルで海面上昇シミュレータを作成してみました

# はじめに
:::note info
この記事は [Mapbox Advent Calendar 2023](https://qiita.com/advent-calendar/2023/mapbox) 4日目の記事です。
:::
– Mapbox GL JS v3で、ラスタータイルの色を変更して表示する機能（raster-color、raster-color-mix、raster-color-range）が実装されました。

https://github.com/mapbox/mapbox-gl-js/releases

https://docs.mapbox.com/style-spec/reference/layers/#paint-raster-raster-color

– 今回は、Mapbox GL JS v3のラスタータイルの色を変更できる機能と国土地理院 標高タイル（Terrain-RGB形式）を用いて、海面上昇シミュレータを作成してみました。

:::note info
国土地理院 標高タイルは、Terrain-RGB形式ではないエンコーディング（標高換算式）を利用

元記事を表示

OTHERカテゴリの最新記事