PDF.js のデバッグ
# PDF.js のデバッグ
ONLINE CONF で利用している pdf.js ですが、我々は幾度となく様々なバグに遭遇してきました。
– 特定のフォントだけレンダリングされない
– 文字化け
– canvasが真っ白になる
など
そこでデバッグできたらいいなって思うじゃないですが、できるんですよ
c.f. [https://github.com/mozilla/pdf.js/wiki/Debugging-PDF.js](https://github.com/mozilla/pdf.js/wiki/Debugging-PDF.js)
“`jsx
pdfjs
.getDocument({
cMapPacked: true,
// 文字化けしたり歯抜けになったりするときは cmapurl を疑う
cMapUrl: `https://mozilla.github.io/pdf.js/web/cmaps/`,
enableXfa: true,
url,
fon
JavaScript(TypeScript)でのオブジェクトのプロパティへのアクセスは以下のようにすることができます。
“`javascript
const o = {key: ‘value’};
console.log(o.key)
console.log(o[‘key’]); // これもまた動作する
const k = ‘key’;
console.log(o[k]); // これもまたOK
“`
なので…
“`javascript
const o = {f: () => console.log(‘function’)};
o.f();
o[‘f’](); // これもまた動作する
const k = ‘f’;
o[k](); // これもまたOK
“`
こういうことができるようです。
JavaScriptで非同期処理の勉強をしています。
コールバック関数で非同期処理を行ったときのテストプログラムです。
“`html
非同期処理のテスト2
```
```js
window.onload = function() {
bgSlide(["1.jpg", "2.jpg", "3.jpg", "4.jpg"], 3, 0.3, -1, `filter: brightness(0.5);`)
}
```
## 配布場所
https://github.com/AyaExpTech/AXT-bgSlide
## 技術詳細
基本方針
- `div#bgSlide > div*n`(nは枚数)を作る
- bodyの先頭にぶちこむ
- フェードのanimationをCSSで書く(%の値は枚数とフェード秒数から計算する)
- `:nth-child(
この記事はちゅらデータアドベントカレンダー初日の記事です。
アドベントカレンダーというと毎年けっこう気合の入った記事が目立つのでハードルが高いと感じてしまう人もいるかも知れない。せっかく初日なので「こんなんでいいんだよオラァ」とハードルを下げていきたいと思う。
今回は、JavaScript 経験がそこそこある人なら誰でも辿り着いたことがあるであろうあのディープコピー実装について話す。
## ディープコピーとは？
「ディープコピーとは何か？」「ディープコピーとシャローコピーの違いは？」あたりについては 説明が面倒なので ググるとたくさん出てくるので割愛する。 → [deepcopy shallowcopy - Google 検索](https://www.google.com/search?q=deepcopy+shallowcopy)
## 実装
言わずと知れた クソ ディープコピー実装がこちら。
``` javascript
const cheapDeepCopy = (obj) => JSON.parse(JSON.string
### Webからハードを操作する環境を素早くつくりたい！
Webエンジニアです！
普段仕事でプロトタイピングすることも多く、雑にWebからハードを操作するシステムを試作することも多いです。
今回紹介するのは、つい先日のお話です。
下記のような要件のシステム（プロトタイプ）を作りました。
- 操作用のPCやスマホから別の場所にあるPCとそのPCに接続されたハードを制御する
- ハードが接続されたPCはWindows PCの上で動作させる想定だがOSはLinuxにするかもしれない。さらに開発はMacで行いたい
- PCとハードの接続にはUSBケーブルを用いる
- ハードは制御コマンドに基づいて動く。コマンド体系はいくつかのコマンド＋ON/OFF程度で単純
- 数台作れれば良い。さくっと明日までにプロトタイプを1台つくれ。的なスピード感（実際は2-3日猶予がある）
 の 1日目の記事です。
~~以下の ∞名へのプレゼントをゲットするため~~ アドベントカレンダー投稿駆動開発でスキルアップを図るために作成したものです。
ちなみに、この完走賞ゲットを狙うカレンダーを作る前に、既に他の多数のカレンダーへも登録も行っています（それと、よく 12月の途中でカレンダーへの登録を増やす、ということもよくやります）。
そういった状況があるため、このカレンダーの記事では、毎回小ネタを書いていくつもりです。
12/1 スタート時点で、40記事以上を書く感じになっている...
### 【余談】 1日目に登録をしている別のカレンダー
ちなみに、1日目に書いたもう1つの記事があり、それは [Adventar](https://advent
## はじめに
この記事は、[Adventar](https://adventar.org/) で立ち上げられている「[Processing Advent Calendar 2022](https://adventar.org/calendars/7370) の 1日目の記事です。
この記事の内容は、以下の記事にあるように、過去にも何度か行ったことがある「#つぶやきProcessing のプログラムを、短縮された状態ではないものに書きかえてみる」というものと、その過程を解説するという内容です。
- [#つぶやきProcessing で気になった作品を p5.js Web Editor で動かそうとしてみる【 #GWアドベントカレンダー 2021/5/2 】 - Qiita](https://qiita.com/youtoy/items/0806ba53db59261da3f8)
- [#つぶやきProcessing で気になった作品を p5.js Web Editor で動かしてみる 【その2】 - Qiita](https://qiita.com/youtoy/items/ac2
この記事は`sweetalert2`のバージョン `11.6.15`以前の情報を扱っています。
----
要約：トロイの木馬まがいの[`sweetalert2`](https://npm.io/package/sweetalert2)を使うな。
## なぜ？
以下、「特定のccTLD」は全て「`.ru`、`.su`、`.xn--p1ai`で終わるドメイン」と同義である。
* ロシアとウクライナの紛争を停止するべきという主張に**意図せず**巻き込まれる危険性がある
* もちろん、あなたがどちらかの国の肩をあなたのウェブサイトで持ちたいと考えるのならこれ以上この記事を読む必要はない。即座にブラウザバックしてもらって構わない。
* **ここでは**ロシアとウクライナの紛争を停止するべきという主張または思想自体を問題としていないことに注意。予防線的に言い換えるのであれば、意図しない振る舞いが望ましくないと述べている。
* バージョン`>= 11.6.14`では特定のccTLDで関連レポジトリのコードの使用を禁止するという文言が加えられた[^1]。
* これは (主に) ロシア
この記事ではsp2というJavaScript/TypeScriptの状態更新ライブラリを紹介していきます！
Immutable.jsとかImmerとかを使ってる人が見たら楽しいかもしれない。
（ちなみに私は今フロントエンド界隈ちょっと離れちゃってるので、今の主流がなんなのか、とか分かっていないです、許して..)
## sp2とは
https://github.com/phenyl/sp2
ちょっと期待してこのQiita記事にたどり着いた皆さん。
sp2のstar数などをみてがっかりしただろうか。
そしてこのライブラリ作者が私であるということを知ったらもっとがっかりするかもしれない。
あ、でも離れないで。もうちょっと読んで。
fully-testedで、fully-documented、そしてproduction実績多数ございます。
私の会社でも採用してくれてます（うちの会社のエンジニアのみんなありがとう）。
TypeScriptの型もバリバリ利いてくれて心地よく使えます。
で、そいつは一体どんなものなのか、見ていこう。
## 使い方のイメージ
```js
cons
弊社営業課長から
「予約フォームで名前、生年月日、電話番号、メールアドレスを入力した後に一度サイト抜けて、また予約フォーム入ったらまた名前、生年月日、電話番号、メールアドレスを入力し直しってユーザーしんどいよね。何とかならない？」
という要望があったので、予約フォームの入力値を javascript 側で localStorage に保存しておいて、再度予約フォームまで来た時に localStorage から読み出す方式を取る事にした。
## github
https://github.com/kanagama/copy-paste-form-value-js
## 使い方
### copy-paste-form-value.js もしくは copy-paste-form-value.min.js を読み込む
```html
```
もしくは
```html
