JavaScript | You Look Too Cool https://stabucky.com/wp ゆるくつくる stabuckyのブログ Sun, 14 Sep 2025 13:44:44 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://stabucky.com/wp/wp-content/uploads/2024/05/cropped-stabucky-32x32.png JavaScript | You Look Too Cool https://stabucky.com/wp 32 32 TRILLニュースを非表示にするブックマークレット https://stabucky.com/wp/archives/20387 https://stabucky.com/wp/archives/20387#respond Thu, 14 Aug 2025 15:05:30 +0000 https://stabucky.com/wp/?p=20387 Yahoo! JAPANに表示される「TRILL ニュース」という記事が鬱陶しいです。
「クイズ形式でご紹介します！」ってやかましいわ。

コード

javascript:(function() {
  const cites = document.querySelectorAll('cite');
  cites.forEach(cite => {
    if (cite.textContent.includes('TRILL ニュース')) {
      let parentArticle = cite.closest('article');
      if (parentArticle) {
        parentArticle.style.display = 'none';
      }
    }
  });
})();

設定方法

適当なブックマークを作ります。
右クリックから編集を選択し上のコードをコピペします。
保存をクリックします。

使用方法

Yahoo! JAPAN開きます。
先程のブックマークを選択（クリック）します。
「TRILL ニュース」を含む記事が非表示になります。

実行前

実行後

]]> https://stabucky.com/wp/archives/20387/feed 0 Three.js入門 https://stabucky.com/wp/archives/19300 https://stabucky.com/wp/archives/19300#respond Sat, 18 Jan 2025 08:45:43 +0000 https://stabucky.com/wp/?p=19300
  1. 基本
    1. 全体
    2. 座標
  2. 立体の設定
    1. 直方体
    2. 球体
    3. 円錐
    4. 直線

基本

全体

JavaScriptを含むHTML全体は次のコードのとおりです。
モジュールはCDNを使っているのであらかじめダウンロードする必要はありません。
スクリプトは次のとおりですが順番は厳密ではありません。最後に描画をセットします。

  • シーンの設定
  • カメラの設定
  • レンダラーの設定
  • ライトの設定
  • 立体の設定
  • 描画
<html>
<body>
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/three/build/three.module.js";

// シーンの設定
const scene = new THREE.Scene();

// カメラの設定
const camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight
);
camera.position.set(50, 50, 100);
camera.lookAt(0, 0, 0);

// レンダラーの設定
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// ライトの設定
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(120, 150, 100);
scene.add(directionalLight);

// ----立体の設定 ここから----
// 直方体
const boxGeometry = new THREE.BoxGeometry(10, 20, 30);
const boxMaterial = new THREE.MeshStandardMaterial({
color: 0x00ff00,
});
const box = new THREE.Mesh(boxGeometry, boxMaterial);
box.position.set(0, 0, 0);
scene.add(box);
// ----立体の設定 ここまで----

// 描画
renderer.render(scene, camera);
</script>
</body>
</html>

結果

サンプルファイル

座標

座標は右にX、上にY、手前にZとなっています。

立体の設定

サンプルの「立体の設定」のところを書き換えます。
直方体や球体などの、形をgeometryで、材料（表面）をmaterialで設定します。

直方体

大きさ（辺の長さ）はBoxGeometry(X, Y, Z)とします。
位置はposition.set(X, Y, Z)とします。直方体のど真ん中がここになります。角（頂点）ではありません。
色はMeshStandardMaterial({color: color: 0xカラーコード})とします。カラーコードはRGBをそれぞれ2桁の16進数で表します。

// 直方体
const boxGeometry = new THREE.BoxGeometry(10, 20, 30);
const boxMaterial = new THREE.MeshStandardMaterial({
color: 0x00ff00,
});
const box = new THREE.Mesh(boxGeometry, boxMaterial);
box.position.set(0, 0, 0);
scene.add(box);

球体

SphereGeometry(半径, 幅の分割数, 高さの分割数)とします。分割数は32としているケースが多いようです。

// 球体
const ballGeometry = new THREE.SphereGeometry(10, 32, 32);
const ballMaterial = new THREE.MeshStandardMaterial({
color: 0xff0000,
});
const ball = new THREE.Mesh(ballGeometry, ballMaterial);
ball.position.set(0, 0, 0);
scene.add(ball);

円錐

ConeGeometry(半径, 高さ, 分割数)とします。

// 円錐
const coneGeometry = new THREE.ConeGeometry(10, 20, 32);
const coneMaterial = new THREE.MeshStandardMaterial({
color: 0x0000ff,
});
const cone = new THREE.Mesh(coneGeometry, coneMaterial);
cone.position.set(0, 0, 0);
scene.add(cone);

直線

下の例では(0,0,0)から(5,75,100)まで白の線を描きます。

const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
const points = [];
points.push(new THREE.Vector3(0, 0, 0));
points.push(new THREE.Vector3(50, 75, 100));
const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);
]]> https://stabucky.com/wp/archives/19300/feed 0 正規表現\wが対応している具体的な内容 https://stabucky.com/wp/archives/19103 https://stabucky.com/wp/archives/19103#respond Thu, 12 Dec 2024 23:49:46 +0000 https://stabucky.com/wp/?p=19103 正規表現に\wというのがあります。
word characterの略と思われます。
一般に「英単語に使われる文字」を抽出する際に使われます。
いつも漠然と使っていましたが、具体的にはどの文字に対応しているのでしょうか。

先に答えを書きます。

0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz

これはJavaScriptで実際にコードを書いて\wにヒットするものを出力したものです。
半角の数字、英大文字、英小文字、アンダースコアが該当します。
スペース、ドットなどは該当しません。
[0-9A-Za-z_]と書くのと同じです。

蛇足ですがこれを出力する際に使ったコードです。

// 英数字（word characters）を格納する配列
const wordCharacters = [];

// ASCIIコード32から126までの文字を走査
for (let asciiCode = 32; asciiCode < 127; asciiCode++) {
  // ASCIIコードを文字に変換
  const currentCharacter = String.fromCharCode(asciiCode);
 
  // 英数字（word character）の場合のみ配列に追加
  if (currentCharacter.match(/\w/)) {
    wordCharacters.push(currentCharacter);
  }
}

// 抽出した英数字を文字列として出力
console.log(wordCharacters.join(""));
]]> https://stabucky.com/wp/archives/19103/feed 0 氏名、メアドなどを自動的にセットするブックマークレット https://stabucky.com/wp/archives/19048 https://stabucky.com/wp/archives/19048#respond Sun, 01 Dec 2024 09:15:54 +0000 https://stabucky.com/wp/?p=19048 最近は自動的にIDやパスワードをセットしてくれる機能がブラウザに備わっています。
しかし、未知のフォームの場合はセットできません。
その場合に使えるブックマークレットを作りました。
主に企業のウェビナー申し込みを想定しています。

ブックマークレット

下のコードをテキストエディタなどで開き、次の箇所を自分の情報に書き換えます。

last_name : 姓 例”山田”
first_name : 名 例”太郎”
mail : メールアドレス 例”yamada@example.com”
phone : 電話番号 例”0459991234″
address : 住所 例”神奈川県横浜市保土ケ谷区”
organization : 組織・企業 例”明訓〇〇会社”
position : 役職 例”一般”

javascript:(function(){first_name="太郎";last_name="山田";mail="yamada@example.com";phone="0459991234";address="神奈川県横浜市保土ケ谷区";organization="明訓〇〇会社";position="一般";parts=document.querySelectorAll("input");parts.forEach(function(part){if(part.id.match(/first/i)){part.value=first_name};if(part.id.match(/last/i)){part.value=last_name};if(part.id.match(/mail/i)){part.value=mail};if(part.id.match(/phone/i)){part.value=phone};if(part.id.match(/address/i)){part.value=address};if(part.id.match(/(org|com)/i)){part.value=organization};if(part.id.match(/title/i)){part.value=position};})})()

使い方

使い方は次のとおりです。Chromeの場合で説明しますが他のブラウザでもほぼ同じです。

適当なブックマークを作ります。
すべてのブックマークから該当のブックマークを選び右クリックをします。
編集を選択します。
名前に「autoinput」など適当な文字列をセットします。
URLに先ほど編集したコードをコピペします。
保存をクリックします。

もし対応していないウェブサイトがあればコメントで教えて下さい。

]]> https://stabucky.com/wp/archives/19048/feed 0 ローカルで別ファイルを読み込む方法 https://stabucky.com/wp/archives/17284 https://stabucky.com/wp/archives/17284#respond Thu, 06 Jun 2024 23:52:30 +0000 https://stabucky.com/wp/?p=17284 JavaScriptを使うとHTMLにテキストなどの外部ファイルを読み込めます。
ただし、これはサーバ環境の話で、ローカル環境ではできません。

状況

本当に無理なのか。調べてみました。
Claudeに訊いてみます。

ローカルファイルシステムでHTMLファイルを直接開いた場合、JavaScriptからファイルを生成して読み込むことはブラウザのセキュリティ制限によって制限されています。
セキュリティ上の理由から、ローカルファイルシステム上でJavaScriptからファイルを生成したり読み込んだりすることは許可されていないためです。
そのため、ローカルファイルを直接開いて別のテキストファイルを読み込む方法は、実際にはほとんどありません。
できる対応は以下の2つになります。
1. ローカルサーバーを立ち上げる
簡易的なHTTPサーバーをローカルで立ち上げ、そのサーバー経由でファイルを読み込む。
この方法ならば、XMLHttpRequestやfetchを使ってファイルを読み込めます。
2. FileReaderAPIを使い、ユーザーにファイルを選択させる
ユーザーが明示的にファイルを選択する必要があります。
セキュリティ制限のためやむを得ませんが、サーバー環境に移行するか、ユーザー入力を受け付けることになります。
完全にプログラムだけで動的にローカルファイルを読み込むことはできないようです。

やはりだめなようです。

代替策

外部のテキストファイルを読み込むことはできませんが、外部のJSファイルであれば読み込めます。
これで代替します。

sample.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Text Display</title>
</head>
<body>
  <div id="textContainer"></div>
  <script src="textReader.js"></script>
  <script>
    const textContent = getTextContent();
    document.querySelector("#textContainer").innerText = textContent;
  </script>
</body>
</html>

textReader.js

function getTextContent() {
  const text = `
おはようございます。今朝は良い天気です。
  `;
  const trimmedText = text.trim();
  return trimmedText;
}

テンプレートリテラルを使うと、バッククォート(`)で囲んだ中で改行を含めることができます。
上のコードの「おはようございます。今朝は良い天気です。」のところにテキストを貼り付ければHTML側に表示されます。
複数行でも問題ありません。

]]> https://stabucky.com/wp/archives/17284/feed 0 JavaScriptでGraphvizを使う方法 https://stabucky.com/wp/archives/16852 https://stabucky.com/wp/archives/16852#respond Wed, 01 May 2024 03:22:42 +0000 https://stabucky.com/wp/?p=16852 JavaScriptでGraphvizを使う方法についてまとめます。

基本

HTMLで書いたときの全体です。
このままコピペして拡張子を.htmlに保存して開くと描画されるはずです。

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div id="graph0"></div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.1/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@2.6.1/build/d3-graphviz.js"></script>
<script>
dotstr = "digraph{a->b;b->c;b->d;}";
d3.select("#graph0").graphviz()
  .fade(false)
  .renderDot(dotstr);
</script>
</body>

応用

日本語も使えます。クォートで挟む必要がありません。
なお、JavaScriptの機能として、下の通り「`」で挟むと改行できます。

<div id="graph1"></div>
<script>
d3.select("#graph1").graphviz()
  .fade(false)
  .renderDot(`graph{
    新宿--八王子[color=orange];
    新宿--調布--八王子[color=navy];
    調布--多摩センター--橋本[color=navy];
    町田--橋本--八王子[color=green];
    新宿--新百合ヶ丘--町田[color=red];
    新百合ヶ丘--多摩センター[color=red]}`
  );
</script>

]]> https://stabucky.com/wp/archives/16852/feed 0 JavaScriptでユニコードをデコードする関数 https://stabucky.com/wp/archives/16504 https://stabucky.com/wp/archives/16504#respond Wed, 21 Feb 2024 12:21:14 +0000 https://stabucky.com/wp/?p=16504 ユニコードは「\uXXXX」の形式で表されます。
例えば「都」は「\u90fd」になります。
JSONは文字列をユニコードで表します。

例えばこのようになります。

{
"\u90fd\u9053\u5e9c\u770c":"\u5317\u6d77\u9053",
"\u59d3":"\u77f3\u5ddd",
"\u540d":"\u7ae0",
"\u6027\u5225":"\u7537"
}

このユニコードを通常の文字に変換（デコード）するJavaScriptの関数を考えました。

function decode_unicode(src) {
  // 変数宣言
  const regex = /\\u.{4}/ig;
  const replacementFunction = (all) => {
    // Unicodeエスケープシーケンスを16進数に変換
    const hexCode = all.replace("\\u", "0x");
    // 16進数コードから文字を取得
    return String.fromCharCode(parseInt(hexCode, 16));
  };
  // 正規表現でマッチした部分文字列を置換
  const result = src.replace(regex, replacementFunction);
  // 結果を返す
  return result;
}

これを使うと先程の文字列が次のようになります。

{
"都道府県":"北海道",
"姓":"石川",
"名":"章",
"性別":"男"
}

次のページで試すことができます。

tool.stabucky.com
Text2What
https://tool.stabucky.com/convert/text2what.htm
]]> https://stabucky.com/wp/archives/16504/feed 0 jQueryを使わずにHTML上の値を操作する方法 – 脱jQuery https://stabucky.com/wp/archives/16439 https://stabucky.com/wp/archives/16439#respond Sat, 03 Feb 2024 01:30:51 +0000 https://stabucky.com/wp/?p=16439 私がJavaScriptを学んだときは、HTML上の値を取得するときはgetElementByIdなどを使っていました。
その後、jQueryが登場し、CSSと同じセレクタが扱えるようになりました。
そして今は、jQueryを使わずにセレクタが扱えます。
今回はJavaScriptでjQueryを使わずにHTML上の値を取得、設定する方法をまとめます。

querySelectorで一つ取得

jQueryの便利な点の一つはオブジェクトを指定する際にCSSのセレクタが使えたことですが、querySelectorを使うと同様にCSSのセレクタが使えます。
idであれば#idとするとオブジェクトを特定できます。

<input type="text" id="nezumi" value="ねずみ">
<textarea id="ushi">うし</textarea>
<div id="tora">とら</div>
part=document.querySelector("#nezumi");
console.log(part.value);

part=document.querySelector("#ushi");
console.log(part.value);

part=document.querySelector("#tora");
console.log(part.innerText);

querySelectorAllで全て取得

#idであれば対象は一つだけですが tagや.classだと複数になります。
querySelectorだと先頭の一つが取得できます。
querySelectorAllにすると対象全てが取得できます。
複数取得した場合はforEachで対象を一つずつ処理できます。

//querySelectorだと、対象が複数ある場合、先頭のみ取得。
part=document.querySelector("div");
console.log(part.innerText);

//querySelectorAllだと、全て取得される。
parts=document.querySelectorAll("div");
parts.forEach(function(part){
  console.log(part.innerText);
});

ラジオとチェックボックスで取得

radioとcheckboxはチェックがついているものを取得します。
多くの場合、name属性があるので[name=name]:checkedを使うとよいです。

ラジオ

<input type="radio" name="seiza" value="おうし">おうし
<input type="radio" name="seiza" value="さそり" checked>さそり
part=document.querySelector("[name=seiza]:checked");
console.log(part.value);

チェックボックス

<input type="checkbox" name="hoi" value="ひがし">ひがし
<input type="checkbox" name="hoi" value="にし" checked>にし
<input type="checkbox" name="hoi" value="みなみ">みなみ
<input type="checkbox" name="hoi" value="きた" checked>きた
parts=document.querySelectorAll("[name=hoi]:checked");
parts.forEach(function(part){
  console.log(part.value);
})

値の取得（ゲット）

値の取得方法はタグによって異なります。
HTMLが使える箇所はinnerText、それ以外はvalueでよさそうです。

input : value
textarea : value
div : innerText

値の設定（セット）

値のセットは値の取得と同じです。
テキストでなくHTMLをセットする場合はinnerHTMLとします（HTMLはすべて大文字）。

<div id="one"></div>
<div id="two"></div>
<input type="text" id="three" value="さんばんめ">
<textarea id="four" value="よんばんめ"></textarea>
document.querySelector("#one").innerText="いちばんめ";
document.querySelector("#two").innerHTML="<a href=''>にばんめ</a>";
document.querySelector("#three").value="さんばんめ";
document.querySelector("#four").value="よばんめ";

フォームのサンプル

<input type="text" id="txt_src" value="abcdefgh">
<button type="button" id="btn_doit">実行</button>
<input type="text" id="txt_dst">
<textarea id="ta_dst"></textarea>
<div id="div_dst"></div>
document.querySelector("#btn_doit").onclick = function(){
  text = document.querySelector("#txt_src").value;
  document.querySelector("#txt_dst").value = text;
  document.querySelector("#ta_dst").value = text;
  document.querySelector("#div_dst").innerText = text;
}

]]> https://stabucky.com/wp/archives/16439/feed 0 「漸化式を解くツール」 https://stabucky.com/wp/archives/16060 https://stabucky.com/wp/archives/16060#respond Tue, 05 Sep 2023 12:53:00 +0000 https://stabucky.com/wp/?p=16060 漸化式と連立方程式という記事を書きました。
このような形式の漸化式を求めるツールを作りました。

漸化式を解くツール
tool.stabucky.com

JavaScriptで連立方程式を解く方法に書いた手法を使っています。

]]> https://stabucky.com/wp/archives/16060/feed 0 JavaScriptで連立方程式を解く方法 https://stabucky.com/wp/archives/16052 https://stabucky.com/wp/archives/16052#comments Sat, 02 Sep 2023 01:13:50 +0000 https://stabucky.com/wp/?p=16052 Pythonだといくつか連立方程式を解く方法（ライブラリ）があるのですが、JavaScriptにあるかどうか知りませんでした。
調べるとmath.jsというライブラリがあります。
数学に関する色々なことができます。
行列を扱うこともでき、これを使って連立方程式を解くことができます。

使い方

mathjs.org
math.js | an extensive math library for JavaScript and Node.js
https://mathjs.org
Math.js is an extensive math library for JavaScript and Node.js. It features big numbers, complex numbers, matrices, units, and a flexible expression parser.

CDNが簡単です。

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.10.1/math.min.js"></script>

行列の積

まず行列の計算について見てみます。
積は次のとおりです。

x = [[1, 2], [3, 4]];
y = [[2, 3], [4, 5]];

result = math.multiply(x, y);
console.log(result);

実行結果
[[10, 13], [22, 29]]

逆行列

x = [[1, 2], [3, 4]];
y = [[2, 3], [4, 5]];

result = math.inv(x);
console.log(result);

実行結果
[[-2, 1], [1.5, -0.5]]

連立方程式

8元連立方程式を解いてみます。

4x1+2x2+3x3+3x4+2x5+3x6+4x7+2x8=26
2x1+3x2+2x3+2x4+4x5+2x6+4x7+2x8=13
3x1+4x2+4x3+4x4+2x5+3x6+2x7+3x8=0
4x1+2x2+3x3+4x4+4x5+4x6+2x7+4x8=20
2x1+3x2+2x3+2x4+3x5+2x6+3x7+4x8=5
3x1+4x2+4x3+3x4+2x5+4x6+3x7+2x8=5
4x1+2x2+3x3+3x4+2x5+4x6+2x7+4x8=17
2x1+3x2+2x3+2x4+1x5+3x6+2x7+2x8=-6

A = [
  [4, 2, 3, 3, 2, 3, 4, 2],
  [2, 3, 2, 2, 4, 2, 4, 2],
  [3, 4, 4, 4, 2, 3, 2, 3],
  [4, 2, 3, 4, 4, 4, 2, 4],
  [2, 3, 2, 2, 3, 2, 3, 4],
  [3, 4, 4, 3, 2, 4, 3, 2],
  [4, 2, 3, 3, 2, 4, 2, 4],
  [2, 3, 2, 2, 1, 3, 2, 2]
];
b = [
  26,
  13,
  0,
  20,
  5,
  5,
  17,
  -6
];
x = math.lusolve(A, b);
console.log(x);

実行結果

[
[8.000000000000004],
[-6.999999999999997],
[5.9999999999999964],
[-5],
[4],
[-3.000000000000001],
[1.9999999999999991],
[-1.0000000000000007]
]

]]> https://stabucky.com/wp/archives/16052/feed 1