JavaScript | You Look Too Cool

正規表現の基本を練習できる「正規表現百本ノック」

stabucky — Fri, 20 Dec 2024 12:46:12 +0000

正規表現の基本を練習できるページを作ってみました。

正規表現百本ノック

JavaScriptを使っているので、正規表現もそれに従います。
初級者向けになっていますが、最後の方は難しいかもしれません。
実際は100本もありません。公開時点では56本です。

とにかく動かすPAD ‐ PADでJavaScriptを使う

stabucky — Wed, 04 Sep 2024 13:41:18 +0000

【WebページでJavaScript関数を実行】アクションを使うとフローの中でJavaScriptを実行することができます。

ウェブページの特定の箇所を取得
1. フロー
2. 説明

ウェブページの特定の箇所を取得

PADの本来の機能ではウェブページからの取得が難しい場合、この方法が使えます。
Yahoo!ファイナンスから日経平均株価を取得してみます。

フロー

【新しいMicrosoftEdgeを起動】
起動モード：新しいインスタンスを起動する
初期URL：https://finance.yahoo.co.jp/quote/998407.O

【WebページでJavaScript関数を実行】
Webブラウザーインスタンス：%Browser%
JavaScript関数：
function ExecuteScript() {
objs = document.querySelectorAll(“[class=’number__3wVT’]”);
result = objs[0].innerText;
return result;
}
生成された変数：Result

説明

JavaScript関数に書いたコードが実行されます。
returnで返された値がResultに代入され、後続の処理で使用できます。

とにかく動かすPAD − スクリプトを使って複雑なロジックをシンプルに

stabucky — Thu, 29 Aug 2024 10:37:19 +0000

Power Automate Desktop（PAD）で複雑な関数を定義する場合、相当長いフローになってしまいます。
一方、PADはローコードツールですが、Pythonなどのコード（スクリプト）を使うこともできます。
通常の操作はPADで行い、複雑なロジックが必要な部分はスクリプトを使うことで、フローをシンプルにすることができます。
【Pythonスクリプトの実行】と【JavaScriptの実行】を使う方法についてまとめます。

基本的な使い方
使用例

基本的な使い方

「引数」は「%ThisNumber%」のように%で挟んでコード（スクリプト）内に書きます。
コード自体は通常通り書いて、結果をresultのような変数に代入し、これを出力します。
出力はPythonならば「print」、JavaScriptならば「WScript.Echo」を使います。
戻り値は「生成された変数」として指定して、以降のアクションに渡します。

使用例

やりたいこと

ThisNumberとして整数を与えると1からThisNumberまでの合計を求めてTotalとして返す。

Pythonの場合のフロー

【変数の設定】アクション
変数：ThisNumber
値：100

【Pythonスクリプトの実行】アクション
実行するPythonスクリプト：

end = %ThisNumber%
result = sum(range(1, end + 1))
print(result)

Pythonのバージョン：Python 3.4
生成された変数：Total

【メッセージを表示】
表示するメッセージ：%Total%

JavaScriptの場合のフロー

【変数の設定】アクション
変数：ThisNumber
値：100

【JavaScriptの実行】
実行するJavaScript：

end = %ThisNumber%
result = 0
for(i = 1; i <= end; i ++){
result += i;
}
WScript.Echo(result);

生成された変数：Total

【メッセージを表示】
表示するメッセージ：%Total%

JavaScriptを使ってタブでページを切り替える方法

stabucky — Tue, 09 Jan 2024 12:26:40 +0000

タブでページを切り替える方法です。
自力で作ることができたのでメモとして残しておきます。
JavaScriptを使っています。
ただしjQueryは使っていません。

作りたいもの
コード

作りたいもの

作りたいのは次のようなページです。
タブを押すとそのページが表示されます。

コード

HTMLとJavaScriptです。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タブ</title>
<style>
.menu {
display: flex;
margin-bottom: 15px;
cursor: pointer;
}

.tab {
border: solid 1px silver;
border-bottom: solid 1px black;
background-color: #eeeeee;
padding: 5px 15px;
}

.selected {
border: solid 1px black;
border-bottom: none;
background-color: white;
}
</style>
</head>

<body>
<div class="menu">
<div class="tab">ねずみ</div>
<div class="tab">うし</div>
<div class="tab">とら</div>
<div class="tab">うさぎ</div>
</div>
<div class="content">
<h2>ねずみ</h2>
</div>
<div class="content">
<h2>うし</h2>
</div>
<div class="content">
<h2>とら</h2>
</div>
<div class="content">
<h2>うさぎ</h2>
</div>
<script>
show_tab(0);
show_content(0);

tabs = document.querySelectorAll(".tab");
tabs.forEach(function(tab) {
tab.onclick = function() {
tab_index = [].slice.call(tabs).indexOf(tab);
show_tab(tab_index);
show_content(tab_index);
}
});

function show_tab(tab_index) {
tabs = document.querySelectorAll(".tab");
tabs.forEach(function(tab) {
tab.classList.remove("selected");
});
tabs[tab_index].classList.add("selected");
}

function show_content(tab_index) {
divs = document.querySelectorAll(".content");
divs.forEach(function(div) {
div.style.display = "none";
});
divs[tab_index].style.display = "block";
}
</script>
</body>

</html>

現在位置を取得する方法

stabucky — Wed, 23 Nov 2022 12:22:59 +0000

ブラウザで現在位置を取得する方法を調べました。
位置情報APIというのがあって、対応しているブラウザであれば使えるようです。

developer.mozilla.org

位置情報 API - Web API | MDN

https://developer.mozilla.org/ja/docs/Web/API/Geolocation_API

位置情報 API (Geolocation API) を使用すると、ユーザーが望む場合に、自分の位置情報をウェブアプリケーションに提供することができます。プライバシー上の理由から、ユーザーは位置情報を報告する許可を求められます。

具体的な使い方についてメモしておきます。
次のページがわかりやすかったです。ありがとうございました。

Zenn

Geolocation APIを使って現在位置を取得する

https://zenn.dev/sweflo/articles/8c34c081cb764c

<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<button id="btn_geo">現在位置を取得</button>
</div>
<div id="lonlat"></div>
<script>
// https://zenn.dev/sweflo/articles/8c34c081cb764c
document.getElementById("btn_geo").onclick = function() {
navigator.geolocation.getCurrentPosition(success, error);
};
function success(position) {
const lon = position.coords.longitude;
const lat = position.coords.latitude;
document.getElementById("lonlat").innerHTML = "緯度" + lat + " 経度" + lon;
};
function error(error) {
alert("取得失敗");
};
</script>
</body>
</html>

マイナンバー法における個人番号の検査用数字

stabucky — Mon, 14 Dec 2015 21:30:43 +0000

マイナンバー法の個人番号(12桁)についても法人番号(13桁)と同様に検査用数字(チェックデジット)があります。
これは「行政手続における特定の個人を識別するための番号の利用等に関する法律の規定による通知カード及び個人番号カード並びに情報提供ネットワークシステムによる特定個人情報の提供等に関する省令（平成26年総務省令第85号）」に定められています。
法人番号のチェックデジットは先頭の1桁ですが、個人番号は末尾の1桁です。

JavaScriptで検査数字を求める関数を書いてみました。
11桁の数列を与えると1桁の検査数字が返ります。

これを使って「マイナンバー個人番号チェッカー」を作ってみました。

マイナンバー個人番号チェッカー

マイナンバー法における法人番号の検査用数字

stabucky — Fri, 27 Jun 2014 21:13:57 +0000

「行政手続きにおける特定の個人を識別するための番号の利用等に関する法律」が成立し、国民全員にそれぞれ固有の番号「マイナンバー」が付けられます。
そのため、この法律を「マイナンバー法」と呼びます。
番号は個人だけでなく、法人にも付けられます。これを「法人番号」と呼びます。
法人番号は13桁で1桁目は検査用数字(チェックデジット)になります。これについては現在、「法人番号の指定等に関する省令」という省令案が出されていて、計算方法が明記されています。

（検査用数字を算出する算式）
第二条　令第三十五条第一項に規定する財務省令で定める算式は、次に掲げる算式とする。
算式
９－（を９で除した余り）
算式の符号
P_n　令第三十五条第一項に規定する基礎番号の最下位の桁を１桁目としたときのｎ桁目の数字
Q_n　ｎが奇数のとき　１、ｎが偶数のとき　２

あらかじめ決められた12桁の番号(基礎番号、商業登記法に基づく会社法人等番号)を右端の桁から取り出して、その桁が奇数ならば1、偶数ならば2を乗じます。これを全て足します。これを9で割って余りを求めます。9から余りを引きます。こうすると1から9までのいずれかの整数になります。

JavaScriptで検査数字を求める関数を書いてみました。

JSFiddleで試せます。

VBAの変数を全て拾い出す

stabucky — Fri, 14 Mar 2014 21:05:14 +0000

問題点
解決方法
コード
使い方

問題点

VBA(ExcelやWordのマクロ)のコードを書いていて長くなると変数の入力間違いなどに気付きにくくなります。
この場合、コードの先頭に「Option Explicit」と書きます。こうすると変数の綴りが違うとエラーが発生してすぐに気付きます。
そのためには全ての変数について「Dim」を使って明示的に宣言する必要があります。
変数を拾いだすのは結構、面倒です。

そこでJavaScriptを使って変数を全て拾い出す方法を考えました。

解決方法

VBAでは変数に使える文字は、半角英数字、アンダースコアの他、全角のひらがな、カタカナ、漢字が使えます。
漢字は、シフトJISだけ想定すればいいので「一-龠」で拾えます。
先頭は数字とアンダースコアは使えません。
変数には何かを代入する場面があるはずなので「文字列 =」という部分を拾い出します。
拾い出した文字列の重複を削除し、タブと「Dim 」を付けて返します。

配列変数はあらかじめ宣言しないと、そもそも使えないので無視します。
ダブルクォートに挟まれた部分、シングルクォート以降は無視します。

コード

なお「unique」という自作の関数を使っています。「GoogleカレンダーからExcelにデータを移行する方法」に書かれています。

使い方

例えば次のようなVBAのコードがあったとします。

Function test(a)
x = 0
For i = 1 To a
x = x + i
Next i
test = x
End Function

これに対し、上の「pick_variable_vba」を使うと次のようになります。

Dim x
Dim i
Dim test

コード内の変数がリストアップされます。
関数名である「test」も拾われてしまうので、まだ工夫の余地はありますが、コーディングの補助になればということで、使ってみてください。
Text2Whatで試すことができます。

ブラジルW杯開幕までのカウントダウン

stabucky — Thu, 06 Mar 2014 10:19:45 +0000

今年はサッカーのワールドカップがブラジルで開催されます。開幕戦は現地時間で6月12日17時キックオフ。時差がちょうど12時間なので、日本時間では同日5時になります。
開幕戦までの日数を表示する仕組みをJavaScriptで作ってみました。

カウントダウン2014FIFAワールドカップブラジル

レスポンシブな年表を作る「Timeline」

stabucky — Sun, 02 Mar 2014 05:36:45 +0000

サッカー日本代表の公式サイトに試合日程を表示する「代表TIMELINE」というページがあります。
調べると次のツールを使っているようです。

SIMILE Widgets | Timeline

JavaScriptを使い、年表を表示します。データはXMLで与えます。
試しに日本史年表を作ってみました。

日本史年表

日本語もOKです。

2019年1月26日追記
リンク切れで正しく表示されません。