JavaScript

[PR]

×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
FireFox で ClipboardItem が使えなかった

悲しいことに。

ClipboardItem - Web APIs | MDN によると少なくとも FireFox バージョン87 の時点では ClipboardItem の機能が動作しないとのことだ。そのため、先日の記事記載の機能が FireFox では機能しなかった。

ゆとらいず工房設置の #ゆとシートにおいて、ココフォリアのコマ出力をiOSにも対応したのですが、今度はFireFoxで出力できない状態になっているようです。ご不便をおかけしますが、解決までしばらくお待ち下さい。
— ゆとらいず工房 (@yutorize) July 15, 2022

確認した所、102.0.1（2022年7月6日公開）でもこの機能は有効ではないらしい……と思ったのだが、上述の MDN には以下の記述があった。

From version 87: this feature is behind the dom.events.asyncClipboard.clipboardItem preferences (needs to be set to true). To change preferences in Firefox, visit about:config.

すなわち、バージョン87から、この機能は隠し機能となっています。FireFox で about:config にアクセスし、dom.events.asyncClipboard.clipboardItem の値を true に変えれば動作しますとのことだ。これは実際、以下のようにして動作させることができた。

ただし、ゆとシートに対してはすでに修正の Pull Request を送信済であり、本件は修正済みである。治し方はかなり強引だがこのようにした。

PR
シャミアの秘密分散法をJavaScriptで

書いた。動作サンプル

解説

JavaScript で配列をグルーピングする

そこそこの頻度で書くので。

const defaultGetGroupId = (value, number, array) => {
  return value;
};
const groupArray = (array, getGroupId=defaultGetGroupId) => {
  const result = {};
  array.forEach((value, i) => {
    const id = getGroupId(value, i, array);
    if( ! result[id] ) {
      result[id] = [];
    }
    result[id].push( value );
  });
  return result;
};

以下のように使う。

groupArray([ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 ], (value) => {
  return (value % 2 === 0) ? 'even' : 'odd';
});
/* 以下のようになる
{
  "odd": [
    1, 3, 5, 7, 9, 11, 13
  ],
  "even": [
    2, 4, 6, 8, 10, 12
  ]
}
**/

マップ描画ツール書いた

先日、TRPG のある程度簡単なマップは SVG で描くと良さそうだと言ったが、実際に書いてみた。

（雛´-`）.｡ｏＯ（そうとう楽しかったらしく、ログをまとめたいけれども「マップを描くの無理じゃね？」と壁に面した結果、作られたようです #アヴァンドナー）https://t.co/62gYRTGbCt
— しゅんしゅんひよこ (@Shunshun94) June 11, 2022

システムについては黒絢のアヴァンドナー | どらこにあん公式サイトを見ていただければ。銀剣のステラナイツと同じところが出しているシステムであり、ステラナイツの戦闘システムはアヴァンドナーの戦闘システムを簡略化したものと呼んでもよいかもしれない。楽しかったは楽しかったのだがログを生成する際に位置関係を示すのが難しいことに気付いて悩ましく思った結果、位置関係をサラッと描けるツールを描くことにして作ったのが上述のものである。

SVG を使っているため、マップのファイルサイズそのものは軽量。ただし、ツールそのものは PNG での出力もできるようにしている。また、SVG そのものを埋め込むのではなく、JS でその場で描画させるソースコードをウェブページに埋め込むこともできるようにしている。SVG, PNG, コード埋め込みいずれの方法であっても上述のツールからファイル・コードをコピーないしダウンロードできるようにした。

角度の計算

ある2点を通る線が y = 0 と交差した時に成す角度を計算したい。そのために以下のように書いた。

const calcAngle = (a, b) => {
    const pointLength = {
        x: a.x - b.x,
        y: a.y - b.y
    };
    const length = Math.sqrt(Math.pow(pointLength.x, 2) + Math.pow(pointLength.y, 2));
    const angles  = {
        asin: Math.asin((pointLength.y) / length),
        acos: Math.acos((pointLength.x) / length)
    };
    if(       pointLength.y >= 0 && pointLength.x <= 0 ) {
        return angles.acos;
    }else if( pointLength.y <= 0 && pointLength.x <= 0) {
        return (angles.asin - Math.PI) * -1;
    }else if( pointLength.y <= 0 && pointLength.x >= 0) {
        return angles.acos * -1;
    } else {
        return angles.asin;
    }
};

計算には三角関数（sin / cos）は角度から長さを出す関数である。逆関数である逆三角関数（arcsin / arccos）を用いる。これで容易に計算できる……と思いきやそうはいかない。角度によって長さは一意に定まるが、長さによっては角度は一意には定まらないからだ。

角度別 sin / cos がとる値
rad	°	sin	cos
0～π/2	0°～90°	＋（正）	＋（正）
π/2～π	90°～180°	＋（正）	－（負）
π～3π/2	180°～270°	－（負）	－（負）
3π/2～2π	270°～360°	－（負）	＋（正）