f@ctor

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

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

JavaScript で、画像ファイル群が存在するかちぇくプログラム。

苦労してやっとできた。

“`javascript
/* 定義 */
let faile_ch_li = “”;
var aru_arr = [‘imge/cyat.png’,’imge/gall_1.png’,’imge/gall.png’,’imge/H_na_gazou.jpg’,’imge/man1.png’,];
aru_arr.push(‘imge/んんん.png’);//’imge/んんん.png’ fileは確実に存在する名前付けの最後のファイル名でソートの最後のファイル名
var aru_arr2 = aru_arr;
faile_check();
/* faile_check */
function faile_check(){
alert(‘faile_check’);
count_n = 0;
for(let i = 0; i < aru_arr.length; i++){ checkFileExists(aru_arr[i]); } } /* checkFileExists */ function chec

元記事を表示

Web 開発再入門#20 ― Vue.js、Vuetify、axios

# Web 開発再入門#20 ― Vue.js、Vuetify、axios

fmockup

## ★ 本ページは工事中 ★

## はじめに

Web アプリケーションのクライアント・サイド（ブラウザー・サイド）を開発します。

学習コストが低いといわれる Vue.js を使用します。
レスポンシブな画面を実現するために Vuetify を使用します。
Ajax を実現するために、axios を使用します。axios を使用することで、HTML 画面から Web サーバーの Web API を呼び出すことができます。

レスポンシブ画面：Web アプリケーションにおいて、ユーザーが使用するデバイスに応じて、自動的に画面の表示を最適化する画面のこと。
Ajax：Asynchronous JavaScript + XML

## ディレクトリ・ファイル構成

D:\\
└ Developments\\
    └ Workspace\\
         └

元記事を表示

広告ブロッカーを使用しているユーザーに対して一時停止を優しく促す通知をするライブラリを開発した 【AdCompass】

## 背景

広告ブロッカーは快適にWebブラウジングが可能だが、メディアには単なる収益化の邪魔にしかならない。
業界の調査によると、約25-30％のウェブユーザーが広告ブロッカーを使用しているらしい。一部のメディアでは莫大な収益損失だろう。
しかし、UXを著しく損ねる広告や詐欺広告などがあることを踏まえると、広告ブロッカーは一概に悪いとも言えない。
なので、両方の肩を持つライブラリの開発を行うことにした。

## 目標

ユーザーが広告ブロックの影響を理解し、メディアの収益化を支援するようになること。
メディアがインターステイシャル (コンテンツの途中やページ遷移時に出てくる全画面広告) や バックボタンハイジャック (戻るボタンを押した時に元のページに戻さず別のページに誘導する) などのUXを著しく損ねる広告をできる限り抑え、ユーザーが快適にWebブラウジングを行えるよう支援すること。

## 広告ブロックの検出方法について

通常、広告ブロッカーは広告関連の技術で有名どころをブラックリストに登録し、通信自体を妨害することでそもそも広告関連の技術自体が読み込まれないような仕組みで広

元記事を表示

[レビュー分析] 六本木の叙々苑ってどこ行けばいいの？

# はじめに

ReviewAI (レビューアイ) で食べログのレビューができるようになりました！
せっかくなので、六本木の叙々苑 3店舗のレビューを分析して、
どの店舗に行くべきなのかを考えたいと思います。

## ReviewAI (レビューアイ)

弊社 RetegyLink が開発中のレビュー分析 AI です。
[https://reviewai.next-seed.work/](https://reviewai.next-seed.work/)
アルファ版を公開中で、現在は[食べログ](https://tabelog.com/)さん、[じゃらん](https://www.jalan.net/)さんに対応中です。

## 食べログ

言わずと知れた、レストラン検索・予約サイトです。
レビューが多く集まっており、多くの人が利用している印象です。

# レビュー分析

六本木の周辺には、

– 叙々苑 六本木本店
– 叙々苑 麻布十番店
– 游玄亭 西麻布本館

の3店舗の叙々苑がありますが、それぞれ、どのような違いがあるのでしょうか？

## 叙々苑 六本木本店

![imag

元記事を表示

【JavaScript】ASTに触れてみる

## この記事について

AST（抽象構文木）について知る機会があったので、自分で試したことや考えたことを記事にしてみました。

– ASTとは？
– JavaScriptをASTを扱う基本的な方法
– ASTの活用について

## AST（抽象構文木）とは

AST（抽象構文木）とは、コードから言語の意味に関係ある情報のみを取り出し、木構造で表現したものです。「言語の意味に関係ある情報」とは演算子や式などプログラムの実行に影響する要素で、意味に関係ない情報はコメントやスペースなどがあります。

## JavaScriptでASTを扱ってみる

JavaScriptのコードをASTにパースするライブラリはいくつかあるようですが、その中の[esprima](https://github.com/jquery/esprima)を使って試してみます。

### esprimaでコードをASTに変換する

次のような単純なコードをASTに変換してみます。

“`js:対象のコード
const answer = 1 + 2;
“`

esprimaでコードパースするには次のようにします。

元記事を表示

ローカルのMP4ファイルの１フレームを画像保存するツール

## 0.はじめに

こんな感じです。

* 私は非エンジニアのドシロウトです
* 私はChromeOS Flexの愛用者です
* ChromeOS FlexはLinux開発環境もありますが、基本的にブラウザーのChromeメインのOSです
* 私はYoutubeとかでサムネ画像を作るときにアップした動画の1フレームをそのまま、または、加工して使います
* ブラウザーでMP4から指定の再生位置のフレームを切り出し、ローカルに保存するツールが欲しかった
* 適当なツールがなかったので作った
* 生成AI [perplexity](https://www.perplexity.ai/) 先生に聞きながらつくった

## 1.作ったもの

動画はこんな感じ

## 2.プレイグラウンド

[Codepen](https://codepen.io/sf-os/pen/mdggJOm) に貼りました

お茶の情報をまとめたTea’s Database【供養】

# はじめに
自分が作って公開した最古のWebアプリ「[Tea’s Database](https://venerable-marzipan-98473b.netlify.app/)」を供養の意味も込めて晒したいと思います。
初めてフロントとバックエンドを分けて作ったアプリで、[YEN$CONVERSION](https://qiita.com/syab-syab/items/c14ab0b6f2cb358ca520)のプロトタイプともいえる物です。
あまり書くことが無いかも…

# 動機
個人的に飲み物ではお茶を好んで飲むことが多いので、せっかくだからその情報をまとめたものを作ってみようと思いついたのがきっかけでした。
時々カフェインが多く入っているものを飲み過ぎて気分が悪くなってしまうことが多かったので、飲む前にどのくらいの量が入っているのかを検索せずに手軽に確認したかったからという理由もあります。

# 使い方
お茶の種類(日本茶や紅茶など)や
![スクリーンショット (379).png](https://qiita-image-store.s3.ap-northeast-1.a

元記事を表示

JavaScriptのNumber型はいくつの階乗まで扱えるか調べてみた

前提：JavaScript の数値型のNumber は 倍精度64ビット浮動小数点形式 (IEEE 754) になっており、`2**1024 – 1` まで表示可能です。JavaScript における安全な整数の最大値は `2**53 -1` です

“`js
[…Array(1000).keys()]
.map(term => ++term)
.reduce((acc, current, index) => {
if (acc * current > Number.MAX_SAFE_INTEGER) {
console.log(`項数：${index}\n十進法：${BigInt(acc).toString()}\n二進法：${BigInt(acc).toString(2)}`);
throw new Error(`loop:${index}`);
}
return current *= acc;
}, 1);
// 項数：18
// 十進法：64023737

元記事を表示

js/ts環境で発生するError: Service firestore is not availableの解決策

こんにちは。[virapture株式会社](https://virapture.com)でCEOしながら[ラグナロク株式会社](https://ragna-rock.com)でもCKOとして働いている[@mogmet](https://twitter.com/mogmet)です。

まったく最近忙しすぎてOutputできてなかったのですが、たまにはアウトプットを頑張ろうと久々に手をとりました。

今回はトラブルシューティング系のものになります。

## エラー概要

adminで使われるnode.jsやクライアントで使われるjsの環境にて、firestoreのインスタンスを取ろうとすると下記のようなエラーが出ることがあります。

> Error: Service firestore is not available

firebase自体のinstanceも生成できてるのになんで・・・と毎回苦しんでました

## 原因

モノレポなどでやっていると発生しがちなのですが、共通パッケージとかで使っているfirebaseのバージョンが一致していないために発生するものになります。
参照してるパ

元記事を表示

イベントを解除する方法

登録したイベントを解除する方法のメモ

“`html

“`
一度押したら解除する場合、`addEventListener`の第3引数でonceをtrueにします。
“`js
const event = document.querySelector(‘#eventButton’)
event.addEventListener(‘click’, logOutput, { ‘once’: true })

function logOutput() {
console.count(“^_^”)
}
“`

何か条件を指定し、解除する場合は`removeEventListener`に登録(add)した関数を指定します。下記のコードは4回絵文字が出力されるとボタンイベントが停止します。
“`js
const event = document.querySelector(‘#eventButton’)
event.addEventListener(‘click’, logOut

元記事を表示

20240427 redditの右側を隠す

### redditの右側が邪魔

「改善前」の右側にある囲っている部分が邪魔なので、消すことにしました
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3740499/6d405cda-bda6-f7b0-bfaf-9d48b963e060.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3740499/0696373d-acfc-bedc-efed-941a4d9ffb5d.png)|
|-|-|
|改善前|改善後|

#### TemperMonkeyを試す
TemperMonkeyというChrome拡張でなんとかなるんじゃないか、と思っていた
他の人も同じようなことを考えているはずなので、きっとすでにあるのでは？と探してみたけどreddit関連のスクリプトはものすごいたくさんあってここから目当てのものを探すのは無理と判断した

しかたない自分で書こう

右側の部分の要素はこ

元記事を表示

ServiceNow 開発者ツール「Xplore」の紹介

ServiceNowでのJavaScriptコーディングの際に役立つツール「Xplore」を紹介します。
通常、ServiceNowでスクリプトを記述する場合はビジネスルールやスクリプトインクルードのフォーム画面上にあるスクリプトエディターで記述して実際に処理をキックし動作確認するか、ちょっとしたコードの確認であれば「Scripts – Background」を利用される方が多いのではないかと思います。
ただ、スクリプトバックグラウンドに関してはエディタとしての補助機能がなく[^1]、なにか便利なツールはないだろうかと思っていたところ、たまたまXploreツールを知ったのでこの記事で紹介したいと思います。

# Xploreとは
端的に表すと「高機能版 Scripts – Background」です。
シンタックスハイライト、フォーマッター、メモリ機能、実行環境（サーバーサイド、クライアントサイド）の指定などの機能があります。

# インストール方法
1\. ServiceNow Developerサイトで公開されている以下のURLにアクセスし、「Download」からXMLファイ

元記事を表示

[test24]SVG ポリゴンの中に線を引く

[test24]SVG ポリゴンの中に線を引く

# 1.基本
## 1-1.ベースを作る
– サイズ500*400、背景はライトグレー
“`HTML


“`

## 1-2.ポリゴンを書く
– 3点 [100,200],[300,300],[400,100]の黄色い図形を書く
“`HTML


“`

## 1-3.ポリゴンをプログラムで書く
1-2のpolygonをプログラムに落とし込む
“`HTML