JavaScript で TOTP を計算する

TOTP: Time-Based One-Time Password Algorithm とは、二要素認証でよく見る Google Authenticator 等で QRコード を読み込ませたりして、一定時間毎に替わる 6桁 くらいの数字を入力するアレだ。

RFC 6238 に詳しい仕様が書かれている。
コイツを TOTP をブラウザ上で生成したい。

幸い近年の Web API には、バイナリ操作やクリプトまわりの機能が出揃っているので、わりかし簡単に実装できそうだ。
…とまぁ、そんな愚生が思いつくような話など既に、偉大なる先人たちによる多くのサンプルが残されている。

せっかく自分で実装するなら、最新の ES 仕様や Web API を活用して簡潔に、それでいて汎用的な仕様で書いてみよう。

実装

続きを読む

D&DしたQRコード画像をブラウザ上でデコードする

ブラウザ上にドラッグ&ドロップ (D&D) されたQRコードの画像を、読み込んでデコードするUIを作りたい。

Pure JavaScript で動作する、QR コードデコーダー(パーサー) cozmo/jsQR が有名なので、これを使ってみよう。

jsQR は、 png や jpg といった画像コンテナの解凍機能も、 HTML や DOM, Web 周りに特化した機能も一切無いため、読み込ませた画像は何らかの方法で Uint8ClampedArray な RAW 画像に変換して渡す必要がある。

ちょっと遠回りにはなるが、

  1. D&D されたファイルの File API を読み取る
  2. FileReader API を使って、ファイルを DataURI として読み込ませ、 img タグに表示させる
  3. OffscreenCanvasOffscreenCanvasRenderingContext2D を経由して ImageData を作成する
  4. jsQR に処理を投げる

といった処理になるだろうか。

早速実装してみよう。

実装

続きを読む

ブラウザのタイトルや URL をコピーするブックマークレット【スマホ&阿部寛対応】

ブラウザで表示しているページのタイトルと URL を一括でコピーしたり、 markdown などのマークアップ言語でフォーマットされたものを、クリップボードにコピーしたくなることは無いだろうか?

意外にも、主要なブラウザには表示ページのタイトル名すら簡単にコピーする方法がない。

いくつかのブラウザ拡張機能(アドオン)には、上述の機能を提供しているものがいくつもある。
しかし、これだけのために拡張機能を入れるのもなんだかなと。
場合によっては、ポリシー等様々な理由で拡張機能を入れることを制限されている場合もあるだろうし。

そこで、表示中ページのタイトルと URL を任意の種類にフォーマットしてクリップボードへコピーしてくれるブックマークレットを作ってみた。

ブックマークレットとした事により、拡張機能の使えないスマートフォンの Chrome や Safari といった、とても不便なブラウザでも利用できる。

使い方

ブラウザのタイトルや URL をコピーするブックマークレット

続きを読む

ブラウザ操作中の通信の内容をローカルファイルに自動で保存する

本記事は JavaScript Advent Calendar 2023 の4日目の記事だ。

3日目は @feo52 氏の 最初のレンダリング直前に起動するpagerevealイベント #JavaScript だった。
Window インターフェース に最初のレンダリング直前に呼ばれる pagereveal イベントを追加する提案の実装を Chrome で試してみる内容だ。これは確かに便利そうなイベントに感じる。
令和の IE こと Safari の存在のせいでなかなか Web 標準に組み込まれる敷居が高いものの、是非ワーキンググループでの議論が進んでいただきたいモノだ。
ところで、こういうのって CSS のワーキンググループでドラフトに載ったりするのね。詳しい流れはよく知らんけども。


いにしえの自分の回答がわかりにくい

さて、ブラウザが裏で呼んでいる API の内容をファイルに書き出したかったのだけれども、ファイルサイズが大きいからか開発者ツール経由ではうまく保存できなかった。
そこで、ブラウザ操作中の通信の内容をローカルファイルに自動で保存する方法がなにか無いかな~と探していたら、偶然にも以前に自分自身がスタック・オーバーフローで回答した puppeteer を使った方法についての内容がヒットしてしまった。

すっかり忘れていたのだが、今見返すとちょっとこのままだと使いづらそうなので、もうちょい使いやすくまとめてみる。

基本的には以前に書いた以下の記事と同じ考え方で、 Chrome DevTools ProtocolFetch Domain を直叩きして、特定の通信の内容を横取りしてローカルに保存している。

実際のコード

続きを読む

次の○曜日 や 来週の○曜日 を取得する JavaScript

JavaScript の標準組込みオブジェクトは、日時関連の処理が非常に貧弱だ。

次の水曜日は何月何日? とか、 来週の月曜日は何月何日? といった値を取得しようと思ったら、タイムゾーン周りの処理と合わさって、思いのほか面倒だった。

とりあえず、動くコードができたので、記事にして紹介する。

続きを読む

puppeteer でファイルをダウンロードするときに、任意のパスと名前を指定して保存する

Puppeteer を使ってファイルをダウンロードする際に、任意のパスと名前で保存したい。

残念ながら、 現時点ではシンプルな方法は提供されていないようだ。
以下の Issue で何年にもわたって議論されているものの、 「コレ!」 という解決方法は無さそう。
Question: How do I get puppeteer to download a file? · Issue #299 · puppeteer/puppeteer

しかし、 この Issue の #issuecomment-668087154 のコメントで、 なかなか泥臭い方法で実現するヒントが書かれていた。
これを参考にして、任意のパスと名前でダウンロードファイルを保存してみよう。

実行方法

あらかじめ、 puppeteer の npm パッケージをローカルにインストールしておく。

npm install puppeteer --save

その状態で、後述の .js ファイルを nodejs で実行すれば OK だ。

node puppeteer-download-with-specify-name.js

コードと解説

続きを読む

PDF のページを好きなサイズの png 画像に変換する たった1つのステップ

document.location = document.getElementById('page1').toDataURL();

Firefox で PDF 開いて任意のサイズで表示し、 開発者コンソール (F12キー) で上記のコード実行すれば、png 画像になって表示される。
あとはその画像を「名前をつけて保存」すればいい。

続きを読む

TypeScript の async/await を Electron で使ってみる

TypeScript とは、 いわゆる altJS のひとつで、 ECMAScript (JavaScript) に静的型付けを加えたスーパーセットとなるプログラミング言語だ。
この TypeScript には、 ES6 (ECMAScript 6, Harmony) 相当のコードから ES5, ES3 にコンパイル (トランスパイル) する機能のほか、 ES7 で予定されている一部の機能を先取りし ES6 にコンパイルして使用することもできる。

そんな時代を先取りした機能の一つが "async/await" だ。

"async/await" とは 2012年に C# 5.0 とともに登場した記述方法で、 これを使うと、 非同期な処理を コールバック地獄にならず、 あたかも同期的な処理のように書くことができる。
同様の記述が、最近 Python 3.5 でもサポートされ、これからの非同期処理のスタンダードとなるだろう。

しかし、 TypeScript で async/await を使うには コンパイル後の ECMAScript の実行環境が ES6 をサポートしていなくてはならない。
現行のブラウザのシェアを考えると、 ES6 をサポートしないブラウザ (主に IE, Safari だが) を切り捨てる選択肢はちょっと厳しい。

一方でサーバサイド JavaScript として有名な node.js では、最近になって組織の変更のおかげで開発が活発化し、 ES6 のサポートが入ってきている。
しかし、 node.js はサーバサイドの技術。 クライアントアプリで使えた方がいろいろな用途で使えて夢が広がる気がする。

そこで Electron ですよ。

Electron (旧 Atom-Shell) とは、 Chromium の HTML5 と node.js の技術を使って、クロスプラットフォームのデスクトップアプリを作れるアプリケーションエンジンだ。

JavaScript エンジンごと中に内包しているため、 OS や インストールされたブラウザのバージョンを一切気にせずに HTML5 アプリケーションが作れるという、 IE に苦しめられている諸兄には夢のような技術 (?) だ。
Slack のデスクトップクライアントや、Visual Studio Code なんかも、 Electron を使って作られている。

そしてこの Electron は node.js の技術を使っていると述べたとおり、 ES6 がつかえるではないか!

…ということで、 Electron + TypeScript で async/await を使ってみようと思う。

続きを読む

XPath で、Doctype 宣言以外のコメントだけ抜き出す

DOM level3 に対応したブラウザで使える、 javascript の document.evaluate であれば、XPath ですべてのコメントを抜き出すときに、

var result = document.evaluate("//comment()", document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

等としておけば問題ないが、一部の HTML パーサでは、HTML の DOCTYPE 宣言もコメントとして扱ってしまうものがある。
…と言うより、 "<!" で始まって、">" で終わるものはすべてコメントとして扱ってしまうような場合について。

続きを読む

IEではhtmlのid属性がwindowのプロパティになる

JavaScriptでは、varによる変数宣言をしていない場合、グローバルオブジェクト(window)のプロパティとして扱われる。
IEでは、htmlのid属性が、このグローバルオブジェクトのプロパティになってしまうらしい。

以下のコードで、「click!」というアラートが出たら、 window.btn01 に button の DomElement が入っているということになる。(Firefox や Chrome 等では、エラーになってなにも表示されないはず)

<button id="btn01" onclick="alert(btn01.innerHTML);">click!</button>

しかも jQuery が有効な状態で、

btn01 = null;

などとやろうとすると、btn01 変数にはすでに button の DOM が入っているのと、IE8とjQueryの相性の問題で、IEではエラーになってしまう。

まぁ、

var btn01 = null;

と、var つけてやるだけでOKだし、そもそもIE9ではエラーにならないので、古いブラウザ使うなってコトでFAでもよい気がしないでもないけどね…
とはいえ、9/1現在、IE8がシェア35%と圧倒的なので無視できないのよねぇ
参考: 日本のバージョン別ブラウザシェアグラフ (StatCounter Global Statsより)