はてなブックマーク

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

JS/TSは、バイナリデータをBASE64エンコードするビルトイン機能が無いため、大人しくライブラリを使うか自前でロジックを用意する必要がありました。 結局はライブラリを使用する場合が多いのですが、機密性の高いデータを扱う場面もあるため、ブラックボックスになるのも精神衛生的に良くないなぁと、ずっと思っていました。 とはいえ、アルファベットテーブルを拵えて6ビット区切になるようビットシフトして文字列加算して...を毎回用意するのも気が引けていました。 しかしある時「実はビルトイン機能を組み合わせるだけで簡単に出来るのでは？」と単純な思い付きで書いたコードがすんなり動いてしまったので、本当に大丈夫なのか有識者の意見も欲しく、こうして記事にしてみました。 本体コード function base64encode(data:Uint8Array){ return btoa([...data].map

こんにちわ、久しぶりの投稿です。 仕事でL2TP/IPsecなVPNを構築しているのですが、インストールや設定などの手間がそこそこ掛かるので、良い感じにお手軽なVPNは無いか調べていました。 すると、我らがSSH大先生でVPNまで張れちゃうとの情報を入手したので、早速試してみることにしました。 SSH万能すぎん？🤔 解説 SSH Tunneling - ssh.com SSHには SSH Tunneling という仕組があり、それを利用することでVPNを構築できます。 重要なのは「ベースはSSHだが独立した仕様」ではなく「SSH本体機能の一部」なので、普通に ssh コマンドを叩いてトンネリング有効化のオプションを付与すれば、ポートも認証方式も暗号化も、そっくりそのままVPNを張れるのです。 通常のシェル接続で使用するコネクションやチャネルをそのままトンネリング接続へ転用しているため、技

こんにちは。 今回は、個人的に地味に待望していた機能が実装されたので、そのご紹介となります。 ネイティブの圧縮伸張 Compression Streams API - MDN 昨今のHTTP通信は、帯域や読込時間を削減するために何らかの圧縮処理がほぼ必ず施されています。 そして、それらの圧縮処理は実行エンジン内部で自動的に行われているため、ふだん私たちがJavaScriptでHTTP通信するときは意識する必要もありません。 しいて言えば Accept-Encoding ヘッダでどのアルゴリズムが使用されているか、垣間を見ることができるくらいです。 最近のJavaScriptは他の言語と遜色ないほど高速で汎用になり、バイナリ操作や計算をする機会も増えてきました。 私も「汎用ランタイム環境としてのChromium系」というかたちでウェブアプリを作成しています。 その過程で、やはりデータを圧縮し

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 「添付ファイルのパスワードは別途送付します」 皆さんも、添付されたZIPファイルと共に、どこかで一度はこの文面を見たことがあると思います。 そして、この行為が無意味であるという事もまた、ご存じかと思います。 しかし、日本の特に大手企業では古い習慣や責任逃れとして、未だに使われ続けているのが現状です。 そして、そのような事を続けている企業ではもれなく、クラウドストレージサービスの使用も制限されているのがお約束です。 今回は、そんな脳死古い思考を引き摺った環境でも、安全でなるべく簡単にファイル転送を行えるアプリケーションを作ってみました。

function foo(context){ //... } function foo(ctx){ //... } とか、このcontext|ctxと言うのをよく目にします。 まぁネーミングなんて何でもいいんですが、使われる頻度も多いので少し掘り下げてみました。 コンテキストとは まずは皆大好きWikipedia先生 コンテクスト - Wikipedia (中略) 一般的に文脈（ぶんみゃく）と訳されることが多い。 文脈により「脈絡」、「状況」、「前後関係」、「背景」などとも訳される。 少し抽象的ですね。 次はe-Words先生 コンテキスト - e-Words (中略) 同じコード記述やプログラム上の要素が、その置かれているプログラム内での位置や、実行される際の内部状態などによって異なる振る舞いをしたり、異なる制約を受けたりすることを指してコンテキストということがある。 分かりやすいですね

ブラウザでQRコードが弄れるらしいので、試してみました。 QR解析 MediaDevices - MDN jsQR - GitHub カメラやマイクなどの入力デバイスを扱えるMediaDevicesインターフェイスを使用し、カメラから静止画を取得します。 そして静止画をjsQRというQR解析ライブラリへ通すことで、QRコードを読み取ることができます。 function qrParse(video){ const canvas = new OffscreenCanvas(240, 320); const render = canvas.getContext("2d"); return new Promise((res)=>{ const loop = setInterval(()=>{ render.drawImage(video, 0, 0, canvas.width, canvas.he

こんにちは。 CDN版ライブラリの使用については皆さん賛否両論あると思いますが、私は容認派です。 手軽に使える便利さは正義！ そんなわけで、ビルド不要なCDN版Vue.jsでも単一ファイルコンポーネントシステム(.vueファイル)を実現したくね！？と思ったので色々と試してみたお話です。 そもそもそんなことできるの？ できました。 しかし一筋縄では行かず、クライアントサイドで多少のゴリ押しが必要となります。 ゴリ押すためには、以下のキーポイントを押さえる必要があります。 非同期通信 axios - GitHub いわゆるAjaxと呼ばれるやつです。 XMLHTTPRequestやfetchなど色々ありますが、ここではaxiosという便利な非同期通信ライブラリを使用します。 非同期コンポーネントとミックスイン 非同期コンポーネント - Vue.js Mixins - Vue.js Vue.js

こんにちわ。 JavaScriptによる暗号アルゴリズムの実装は幾つかありますが、今回はWeb Crypto APIというブラウザのネイティブ実装による暗号化を試したいと思います。 Web Crypto API - MDN ネイティブ実装は実行パフォーマンス面で有利ですが関数や入出力などの"お作法"が複雑、逆にソフトウェア実装はパフォーマンスこそ及びませんが、その"お作法"が上手い具合に取り回しやすくなっている傾向があります。 ゆえに、ネイティブ実装のコーディングは少しややこしく感じますが、紐解いていくと実はそんなに難しい話ではないので、順を追って解説していきます。 はじめに Web Crypto APIは、各種暗号処理(鍵生成/鍵交換/鍵導出/暗号化/復号/署名/検証...)をJavaScriptで安全に実行するためのAPIです。 Web Crypto APIの全機能はwindow.cr

機械学習については解説記事をかじった程度の知識しかない僕でも、物体検出プログラムを簡単に作れたので紹介します。 ml5.js 機械学習プラットフォームでお馴染みのTensorFlowをJavaScriptで実装した TensorFlow.js というライブラリがあります。 TensorFlow.js WebGLを利用したGPGPUで計算を行うことによりネイティブを肉薄するパフォーマンスを得た、ブラウザで動く機械学習ライブラリです。 そしてTensorFlow.jsを、専門知識がなくても使えるよう至れり尽くせりしてくれるラッパーがml5.jsというわけです。 使い方 学習済モデルやアルゴリズムを選択してデータを入力することで、推論結果を得ることができます。 学習済モデルはデータ量が大きいのでライブラリ本体とは別に存在しており、選択した時点で配信サーバーへAjaxする挙動になります。 巨大なも

分岐が多くても見た目がカオスにならない三項演算子の代替的な何か。 ふと思いついたのでメモっておきます、結構便利。 ズバリ const str = "aaa"; const num = 0; const arg = "0123"; // 戻り値がある場合 const result = { "aaa": v => `${v}hoge`, "bbb": v => `${v}huga` }[str](arg); // 戻り値がない場合 ({ "aaa": v => console.log(`${v}hoge`), "bbb": v => console.log(`${v}huga`) })[str](arg); // プロパティ名ではなくメソッド名としてもOK const result = { "aaa"(v){ return `${v}hoge`; }, "bbb"(v){ return `${

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <script src="https://cdn.jsdelivr.net/npm/@babel/polyfill@latest/dist/polyfill.min.js"></script> <script src="https://cdn.jsdeli

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