はてなブックマーク

Google Authenticator 等で利用されている HOTP (HMAC-Based One-Time Password) や TOTP (Time-Based One-Time Password) を JavaScript で計算する方法を書きます。 "HMAC-Based" は「カウンタベース」、"Time-Based" は「時間ベース」や「タイムベース」と訳されます。 参考「RFC 4226 - HOTP: An HMAC-Based One-Time Password Algorithm 日本語訳」 参考「RFC 6238 - TOTP: Time-Based One-Time Password Algorithm 日本語訳」 1. 鍵 1.1. 鍵をやり取りするために Base32 エンコードを利用する HOTP や TOTP の仕様として決められているわけではないです

印刷用の WEB ページを作成するのに必要なことについて説明します。 具体的なコード例は記事の後ろに記載しています。 1. ページ化メディア 印刷するなどしてコンテンツをページごとに分割するような表現方法を「ページ化メディア」と呼びます。 「ページ化メディア」用の CSS プロパティを使用することで、印刷用のスタイルを記述することができます。 参考「Paged media - CSS: Cascading Style Sheets | MDN」 1.1. ブロックレベル要素の区切り方を設定する break-* 系プロパティ 改ページ等でブロックレベル要素が区切られるとき、その区切り方を設定する CSS プロパティとして以下のようなものがあります: break-inside: ボックス中の区切り方を設定 break-before: ボックス前の区切り方を設定 break-after: ボック

本記事では以下の 2 種類の方法を書きます: Compression Streams API を用いる方法 ライブラリ pako を用いる方法 1. 予備知識 1.1. Deflate 圧縮のデータ形式について Deflate 圧縮のデータ形式は複数あり、主に以下のものが使用されています: 生の deflate 形式 (RFC 1951) zlib 形式 (RFC 1950) 生の deflate 形式のデータにヘッダとフッタを付け加えた形式 ※単に「deflate 形式」と言う場合は「生の deflate 形式」でなく「zlib 形式」を指す場合があるため注意 gzip 形式 (RFC 1952) 生の deflate 形式のデータにヘッダとフッタを付け加えた形式 参考「RFC 1950: ZLIB Compressed Data Format Specification version

※全てのブレンドモードを掲載しているわけではありません。 ※ PixiJS は Canvas レンダラの強制が前提です (後述) 。 ※ ImageMagick の Compose の None は PixiJS の NONE と別物です (後述) 。 参考「Layer and Mask Information Section - Adobe Photoshop File Formats Specification」 参考「psd.js/blend_mode.coffee at master · meltingice/psd.js · GitHub」 参考「<blend-mode> - CSS: カスケーディングスタイルシート | MDN」 参考「CanvasRenderingContext2D.globalCompositeOperation - Web API | MDN」 参考「PI

C++ の新機能を含め、変数等のメモリ管理や定数に関わるものをまとめてみました。 ※本記事で言っている「安全」は、「ソースコードに人為的ミスがあったとしてもメモリリークを起こさない」という意味で書いています。 0. まとめ const / constexpr 等を使う 速度よりも安全性が大事なら new / delete を使わない malloc() / free() も基本的には使わない C++ 標準コンテナやスマートポインタを使う C++ 標準コンテナへの要素追加・挿入は emplace 系メソッドによる直接構築を用いる コンテナ等のメモリ解放で Swap 技法 (std::vector<T>(v).swap(v); 等) は使わない shrink_to_fit() を使う 安全性よりも速度が大事なら基本的に new / delete を使うが、メモリリークに注意する 配列サイズ取得に

0. まとめ var を書かない let もなるべく書かない なるべく const を使う 関数の引数は const のように扱う function をなるべく書かない アロー関数またはクラスやオブジェクトのメソッド定義を使う 関数宣言でなく関数式を使用する 理論上どうしても function が必要な場合もある ジェネレータ関数 function* は使用出来る then() を書かない await を使う 理想的には jQuery を使わない 純粋な WEB API を使用して DOM を操作する getElementById(), getElementsByClassName() querySelector(), querySelectorAll() insertAdjacentHTML() 等 jQuery 非依存のライブラリを使用する fetch() で通信する XMLHttpR

JavaScript で複数ファイルを zip にまとめてダウンロードする方法になります。 サーバーから取得したファイルでも、JavaScript で動的に生成したコンテンツでも、どちらも同様に保存できます。 既に類似記事はあるかと思いますが、自分にとって使いやすいコードを載せようと思います。 1. はじめに 画像ファイルやなんらかのバイナリファイルなど、既に圧縮されているファイルをさらに zip に圧縮しようとすると、圧縮・解凍にとても時間がかかったり、ファイルサイズもほぼ減らないことがあるため、どんなファイルでも扱いやすいようにするためここでは「無圧縮」にしています。 テキストファイルしか扱わないような場合には圧縮した方が良くなります。 2. ブラウザ上の場合 クライアントサイドの JavaScript での例です。 ここでは JSZip という外部ライブラリを使用して zip にしま

Twitter API や OAuth を学ぶために、ブラウザ上のピュア JavaScript で認証して GET してみました。 学習目的でムリやりブラウザ上で動作させるため、実用的なコードではないです。 1. 準備 1.1. Twitter API 申請など 申請に関しては他の記事が分かりやすいので、各自で調べて申請をお願いします。英作文は必要ですが、自分の場合は申請からすぐ API を使える状態になりました。 1.2. Access token & access token secret ここでは簡単にするために、Twitter Developers のアプリ管理画面から自分用のアクセストークンを作成します。 2. サンプルソースコード ここでは話を簡単にするために以下の条件でコードを書きます。 リクエストメソッドは GET のみ POST は扱わない 認証はアクセストークンによる

CREATE TABLE test ( test TEXT, created_at TEXT NOT NULL DEFAULT (DATETIME('now', 'localtime')), updated_at TEXT NOT NULL DEFAULT (DATETIME('now', 'localtime')) ); CREATE TRIGGER trigger_test_updated_at AFTER UPDATE ON test BEGIN UPDATE test SET updated_at = DATETIME('now', 'localtime') WHERE rowid == NEW.rowid; END; テーブル名やトリガー名の test の部分を必要に応じて書き換えてください。 2. 説明 2.1. DEFAULT 制約で DATETIME 関数を使える 「DEF

1. 予備知識 fetch で得た Response や Blob のメソッドはテキストデータの文字コードを常に UTF-8 として扱うため、Shift_JIS 等の UTF-8 以外の文字コードでは文字化けします。 参考「Response.text() - Web API | MDN」 参考「Blob.text() - Web API | MDN」 直接 UTF-8 以外の文字コードを扱うことはできないため、バイナリデータを経由して文字コードを指定してテキストデータに変換します: 方法 1: ArrayBuffer を経由して TextDecoder を用いる textDecoder.decode(arrayBuffer) 方法 2: Blob を経由して FileReader を用いる fileReader.readAsText(blob) 古いやり方のため、本記事では不説明 参考「T

1. 調べようと思ったきっかけ 参考「非推奨の機能、廃止された機能 - JavaScript | MDN」 何となく上のページを読んでいたら、 分割代入型 for...in は非推奨です。代わりに for...of を使用してください。 とあったのですが、for...in のページを見ても「分割代入型 for...in」が何なのか書いてなかったので、気になって調べてみました。 (実は最近まで for...in が非推奨だと勘違いしていました… (汗 2. 分割代入型 for...in (非推奨) 普通の for...in は非推奨ではないですが、「分割代入型 for...in」は非推奨です。 // Array const array = [['a', 1], ['b', 2], ['c', 3]]; console.log('array'); for (const [key, value]

※2019/03/26: 本質的な内容はそのままですが、記事を全体的に修整しました。 自分が初めて JavaScript の非同期を学ぼうとした時に Promise, async, await が何をしたいのかが全然分からなかったので、中で何をやっているかを何となく分かるようにまとめたいと思います。 「外から見てどうやって使うか」は別記事にしています。 参考「もっと簡単に async, await, Promise - Qiita」 0. まとめ コールバック関数を使って非同期処理を記述することができ、実現できることが増える ただし、コールバック関数だけで複雑な処理を書こうとするとスマートに記述できず、ソースコードの品質が下がる Promise を使うことで非同期の処理をスマートに書くことができるようになる (構文の追加) async/await を使うとさらに Promise をスマート

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

※2024-09-10: 記事を全体的に編集しました。 本記事では、ユーザーが <a> 要素や <input> 要素をクリックしたタイミングでなく、JavaScript のコード中の好きなタイミングでファイル選択ダイアログを出す方法について説明します。 click イベントが発生してから何か処理をした後にダイアログを出したい場合も有効です。 ※新しいタブでファイルを表示する場合またはファイルを開く場合、ユーザーの操作によってコードが実行されなければ多くの WEB ブラウザでブロックされます。 本記事では document.createElement() で HTML 要素を作成しますが、静的な HTML でも同様です。 1. ファイルを保存する データから URL を生成する方法がいくつか有ります: オブジェクト URL を使う データ URL を使う 生成した URL を <a> 要素で