JavaScript関連のことを調べてみた2022年06月18日

InDesign JavaScript Excelの内容を配置(画像位置に)

Excelの内容を配置(画像位置に)するスクリプトは、これで良いのかな・・・？

~~~JavaScript
/*
このスクリプトを利用して起こった不具合の責任は取れません。
ご了承下さい。

更新 2022/06/18
*/

// アプリ指定
#target “indesign”;

// スクリプト名
var scriptName = “Excelの内容を配置(画像位置に)”;

//スクリプトの動作指定（一つのアンドゥ履歴にする、及び、アンドゥ名）
app.doScript(function(){

// ダイアログ
var dialogueFlg = confirm(“Excelの内容を元に、同名の画像の位置にExcelの内容を入れたテキストフレームを配置します。” + “\r”
+ “\r”
+ “Excelの内容を入れるテキストフレームの雛形を複製するので、オブジェクトスタイル、段落スタイル、レイヤー等が保持されます。” + “\r”
+ “Excelの１列目はテキストフレームの１段目に、２列目は２段目に入ります。列が７つの場合は段

p5.js を用いた JavaScript のプログラムで Leap Motion の情報を取得する（leap.js ではなく WebSocket を利用）

以下の記事の続きです。

●バニラな JavaScript や p5.js で Leap Motion の情報を取得する（leap.js ではなく WebSocket を利用） – Qiita
　https://qiita.com/youtoy/items/efc4da1feee26186f565

上記の記事では、単純に「 `ws://localhost:6437/` 」に接続して、WebSocket で情報を取得できたことだけ確認していました。
今回は、手を認識した情報を取得するところへ進んでいきます。

## 検証方法
今回、前回の 2パターンの検証方法のうちの「p5.js を用いたほう（さらに、p5.js Web Editor上でプログラムを実行する形）」で進めていきます。
leap.js は用いず、ブラウザが外部ライブラリなしに扱える WebSocket を使っているので、HTML に関して p5.js Web Editor のデフォルト状態から何も変更は加えていません（デフォルトで読み込み設定がされているライブラリ以外に、別途、ライブラリの読み込みを追加するようなことは必要

WebSocket Ping-Pong Frame実践

# WebSocket Ping-Pong Frame 実践

## inspire
mdnからWebSocketの規格を見ていたところ、Ping-Pong Frameの実装についてサーバー側からする必要があると記載を見たのでGoから実装しました。
[レファランス](https://websockets.spec.whatwg.org/#ping-and-pong-frames)

## 使うライブラリ
– [gorilla](https://github.com/gorilla/websocket)　>= 1.5.0
– golang >= 1.18

## gorillaのAPIレファランス

Ping Frameは直接転送し、Pong Frameは[PongHandler](https://pkg.go.dev/github.com/gorilla/websocket#Conn.PongHandler)を設定することで、Ping-Pong Frameが実装できます。

## ソースコード

### サーバー側
– クライアントと接続が完了したところからのソースコードになりま

TAURIを触ってみて感じたこと

# はじめに
つい先日,新生デスクトップアプリフレームワーク,Tauriが登場した。ViewをWeb技術を利用して書けるため,フロントエンドエンジニアでも気軽にデスクトップアプリを開発することができる。そんなTauriだが以前から存在している似た志向のElectronと比較して,TauriがElectronの代替となるのか,それともそうはならないのか。そして,個人的にTauriに関して気になったこと等をまとめる。

# 記事を書こうと思ったきっかけ
私は文化祭を前に音楽ゲーム制作をしている。音楽ゲームは,文化祭後一般公開の予定をしており,また気軽に遊べ,クロスプラットフォームを目指した開発をしているため,WebGLを利用することとなった。文化祭では,数台のPCを利用しての展示になり,他の作品も展示されるので,ネットワーク帯域の乱用は避けたく,またゲーム公開後もオプションとしてアプリ版の提供も考えていたためにElectronの利用を考えていた。しかし,Tauriのv1.0の到達により,こちらも選択肢として考え,最終的にどちらにするかを決めようと思ったからである。

# 早速比較してみる

【JavaScript】クイズアプリを作ってみよう（応用編）

こちらの記事は、[【JavaScript】クイズアプリを作ってみよう（基礎編）](https://qiita.com/asami___t/items/cb4c750b721737e83908)の続きになります。

基礎編は1問解いて終わりでしたが、応用編では3問解き続けて、最後に「あなたは3問中●問正解でした」と表示させたいと思います。
HTMLファイルは基礎編から変更はありません。

# 3問解き続けられるようにする

“`JavaScript:app.js
// 複数のクイズを解けるようにするため、連想配列(辞書型){}に変更する。
// 連想配列を作ったら、リスト型[]で囲む。
const quiz = [
// 1つ目のクイズを定義
{
question: ‘赤い果物は次のうちどれでしょう？’,
answers: [
‘メロン’,
‘レモン’,
‘バナナ’,
‘りんご’
],
correct: ‘りんご’
},
// 2つ目のクイズを定義
{
question: ‘果

Javascriptの非同期処理を克服しよう

今回初めて社外勉強会に出てみたので、その時学んだことをシェアしたいと思います。内容としてはJavascriptの非同期処理を克服しようといったもので、様々な非同期処理の書き方を学んでいきます。

## そもそも非同期処理って何?

Javascriptではシングルスレッドといって、処理の実行は前に行われている処理が終了するまで次の処理を実行することができません。これを同期処理とも言いますが、非同期処理では前の処理が終了するのを待たずに次の処理を行うことができます。何故このようなケースが必要なのかというと、例えばAPIを使用して他のサーバーからデータを取得する際に、同期処理ではそのユーザーがデータを取得するまで画面で操作を行えないといったケースが発生しますが、非同期処理を行えばデータ取得を待たずに画面上で操作を続けることができるようになります。

## 非同期処理の例 その1
ここでは基本的な非同期処理を記載してみます。コードを読んでみて、consoleがどの順番で呼ばれるか想像してみてください。
“`javascript
console.debug(‘1’);

fs.readFil

InDesign JavaScript XML 選択オブジェクトを兄弟関係の構造に

選択オブジェクトを兄弟関係の構造にするスクリプトは、これで良いのかな・・・？

~~~JavaScript
/*
このスクリプトを利用して起こった不具合の責任は取れません。
ご了承下さい。

更新 2022/06/17
*/

// アプリ指定
#target “indesign”;

// スクリプト名
var scriptName = “選択オブジェクトを兄弟関係の構造に”;

// メモ：doScriptをすると元に戻したときおかしくなる事がある。

// 参照要素配列
var associatedXMLElementArray = [];

// タグ付きプリセットオプションの画像のタグがImageで無い場合
if(app.activeDocument.xmlPreferences.defaultImageTagName != “Image”){

// Imageに
app.activeDocument.xmlPreferences.defaultImageTagName = “Image”;
}

// タグ付きプリセットオプションのテキストフレーム

javascript前期中間試験（配列と代入7問）

## はじめに
プログラミングを学習し始めて最初にくるハードルが配列です。筋の良い学生でも、配列と代入が組み合わさるとちょっと怪しくなります。配列への代入による影響について７つの問題を(高専本科2年生むけ)前期中間試験想定としてやってみましょう。
## 問題
### 問1 何が表示されますか
“`javascript
let x;
let y;
x = 1;
y = x;
x = 5;
console.log(y);
“`
### 問2 何が表示されますか
“`javascript
x = [1, 2];
y = x;
x[0] = 5;
console.log(y[0]);
“`
### 問3 何が表示されますか
“`javascript
x = [1, 2];
y = […x];
x[0] = 5;
console.log(y[0]);
“`
### 問4 何が表示されますか
“`javascript
x = [
{ a: 1, b: 2 },
{ a: 3, b: 4 },
];
y = […x];
x[0].a = 5;
console.log(y

Stripe Checkoutの決済ページや請求ポータルを、任意の言語で表示するように設定する方法

Stripe Checkoutで顧客に表示する決済ページは、基本的にはブラウザの設定言語と同じ言語で表示されます。

ですが、「サイトやアプリのユーザー設定で言語が変更できる場合」など、ブラウザの設定とは異なる言語でページを表示させたい場合も存在します。

その場合は、セッション作成時に、　`locale`パラメータを追加しましょう。

## Checkout（決済ページ）のセッションで、言語を個別指定する

“`js
const sessions = await stripe.checkout.sessions.create({
customer: customerId,
line_items: [{
price: ‘price_xxxx’,
quantity: 2,
}],
success_url: ‘https://example.com?success’,
cancel_url: ‘https://exampl

Firefoxアドオン(拡張機能)で、Content scriptsのエラーが何故かコンソールに表示されない問題

また5周遅れ位の話ですが、とある事からFirefoxのAdd-onを作ろうとした際、Content scripts(content.js)が例外を出して止まっているっぽいのにコンソールにはエラーメッセージが表示されない事で対応に時間を食われた件について。

# 解決法

***方法1. `CTRL+SHIFT+J`、又はメニューで「ブラウザーコンソール」を開く。***
FirefoxではContent scriptsのエラーはこの**ブラウザーコンソール**ウインドウにのみ表示されます。普通のコンソールでは見れません。

***方法2. 全部try…catchで囲む***
content.js全体をtry…catchで囲めばcatchブロック内からエラーメッセージをconsole.logで出力する事ができます。

***方法3. デバッガの「例外で停止」にチェック***
デバッガの「ブレークポイント」以下にある「例外で停止」チェックボックスを有効にすれば、Content scriptsの例外にも反応します。

>参照:
[Console doesn’t log js er

BLob を使ってブラウザからバイナリデータをダウンロードするときの罠 (javascript)

ダウンロードすると、データがすべて文字列化テキスト化）されてしまう現象に悩まされたのでメモ。

## 問題

“`hoge.js
data = [0,1,2,3,4];
const blob = new Blob(data, { “type” : “application/octet-stream” });
const downloadURL = window.URL.createObjectURL(blob);
“`

こうすると、ダウンロードしたデータは下記のようにテキストデータになってしまうようです。

“`hoge.bin
01234
“`

# 解決方法

“`hoge.js
data = [0,1,2,3,4];
const blob = new Blob([data], { “type” : “application/octet-stream” });
const downloadURL = window.URL.createObjectURL(blob);
“`

これで、ダウンロードしたデータはバイナリになってくれます。

data を `[]` で a

複雑なことを考えなくてもjavascriptでsleep関数が使える記事

テキストを入力するだけでメッセージ動画が作れるサービス[Teloppy](https://teloppy.com “Teloppy”)を運営しております！
## sleepとは？
phpの例で言うと
“`php
sleep(1);
echo “１秒経過”
sleep(1);
echo “2秒経過”
“`
こんな感じでsleepで指定した秒数待った後に処理ができるようになるという便利な関数で様々な言語で使われています。javascriptにも似たような関数でsetTimeoutがありますが、setTimeoutは非同期関数なので上の処理を実現させるためには
“`js
setTimeout(() => {
console.log(“1秒経過”);
setTimeout(() => {
console.log(“２秒経過”);
}, 1000);
}, 1000);
“`
このような記述になり、見ずらくて何してるかあまり分からないコードになります。俗に言うコールバック地獄ですね。
Javascriptでは同期処理を実現させるためのawait/async、Promiseが存在

IEが終了したので、webpackやbabelは不要？

IE終了により、webpackやbabelを使う必要がなくなるのか、フロントエンドからビルドステップを完全に消し去ることはできるのか。

# そもそもなぜフロントエンドを「ビルド」していたのか

そもそもなぜwebpackやbabelを使ってJavaScriptをバンドル（1ファイルにまとめる）していたのか

### 1. HTTP/1.1とモジュールシステムの相性の悪さ

ブラウザにはES Moduleというモジュールシステムが導入されています。これは`import`文で他のファイルを読み込むことができるシステムです。
HTTP/1.1については、ブラウザ側で同時接続数制限があります。これは、ファイルを多数読み込む必要があるES Modulesには不向きでした。

### 2. ブラウザのES Module対応率の低さ

ES ModulesはIE非対応です。開発するWebサイトがIEをターゲットにしたい場合、ES Moduleを使うことはできません。
また、JavaScriptフレームワークもシェアを獲得するにはIE対応しなければならず、これらを使っている限りブラウザ上でES Mo

クレジットカードの取引データ、実はとてもシンプル。けど難解なのでデコードツール作りました (EMV Tag Decoder)

# なんの話か
クレジットカード決済で決済端末からブランドネットワークを介してブランド(VisaとかMastercardとかAmerican ExpressとかJCBとか)に送る取引データのデコーダー作ったという話です。

:::note warn
先に免責としまして、記載している内容はすべて、Githubで公開しているソースコード含めて、一般に広く入手できる公開情報をもとにしており、特定のブランド、イシュア、アクワイアラ、決済センター、決済サービスプロバイダー等の非公開情報を一切含んでおりません。また本記事記載のソースコードやデモを用いて発生したいかなる事象や不具合、不利益や損害についても一切の責任を負いません。
:::

# 作ったもの
ソースコード：
https://github.com/taukuma/emv-tag-decoder

デモ：
https://taukuma.github.io/emv-tag-decoder/
※ブラウザ上で動作します(JSだけです)。入力したデータはどこにも送られませんので、安全です。

クレジットカード決済をしたときに、ブランド（イシュア）

JavaScriptでページ内リンクにスクロールする方法

ページ内リンクへの移動をjavascriptでやる方法が通常のaタグで行うのとは違う感じだったので、関数を作ってさっくりできるようにしてみました。

ついでに移動先を微調整できるようにしました。idの位置よりちょっと上にしたりできるのでヘッダーなどを固定していてもずらして表示できます。
“`javascript
function scrollToID(id, margin){
const elm = document.getElementById(id);
if(!elm){
console.error(“idが見つかりません”);
return;
}
if(!margin) margin = 0;
window.scrollTo({
top: elm.offsetTop + margin,
behavior: ‘smooth’
});
}
“`
引数に移動先のidを入れてください。marginはidよりちょっと上に移動したい場合にマイナスの値を入れてください。marginは省略可能です。

使うときは要素にonclic

【AppleScript】【JavaScript for Automation(JXA)】QuickTime Playerの画面収録を時間指定で実行するスクリプトについて

# 概要
MacのQuickTime Playerでは画面収録機能を使うことで画面上の動作を記録し、動画ファイルとして保存することができます。本記事では画面収録を時間指定で実行するスクリプトを紹介します。

# スクリプトについて
スクリプトはMacのスクリプトエディタ使用して、AppleScript、および、JavaScript for Automation(JXA)のscptファイルを作成して実行します。
使い方はソースコード先頭のコメントを参照してください。

# 注意点
スクリプトではSystem Eventsを使用します。System Eventsを実行するためにはスクリプトエディタに対してセキュリティ設定を許可してください。
「システム環境設定」の「セキュリティーとプライバシー」＞「プライバシー」＞「アクセシビリティ」＞ 「スクリプトエディタ」のコンピューター制御を許可する。

# ソースコード
ソースコードはGitHubにもコミットしています。
また、本記事とは別にQuickTime Playerで起動した動画ファイル対して時間指定で画面収録するスクリプトをコミットしてい

【Angularアプリケーション開発 #7】選択したデータの詳細を表示する。

今回やること
・リストから選択したデータの詳細を表示する。

– onSelectメソッドを作成します。
引数はMember型です。memberを受け取りselectedMemberへ設定します。

“`typescript:members.component.ts
import { Component, OnInit } from ‘@angular/core’;
import { Member } from ‘../member’;
import { MEMBER } from ‘../mock-member’;

@Component({
selector: ‘app-members’,
templateUrl: ‘./members.component.html’,
styleUrls: [‘./members.component.css’]
})
export class MembersComponent implements OnInit {

members = MEMBER;

member:Member = {
id:’1′,name:’

JavaScript 用途から逆引き 配列操作メソッドまとめ forEach, map, filter…

JavaScript について、少し他の言語に浮気するとすぐに配列操作方法を忘れてしまうので、自分が見直しやすいようにシチュエーション別にまとめました。~~いちいち思い出すのは辞めました。~~

あくまでも一例であり網羅しているわけではありませんので、全部見る系男子及び女子並びにその他のあらゆる人類は [MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array) を参照してください。

:::note warn
シチュエーション別なので、メソッドは重複していることがあります。
:::

## 目次

### 真偽で判定
* [特定の要素が配列に含まれているかをtrue/falseで判定したい](#特定の要素が含まれているかをtruefalseで判定したい)
* [要素が任意の条件を満たしているかをture/falseで判定したい](#要素が任意の条件を満たしているかをturefalseで判定したい)

### 要素を抽出
* [任意の条件を満たす要素

Next.js学習まとめ

# Next.jsの学習まとめ

### Create Next App
“`zsh
npx create-next-app nextjs-sample
“`

### ルート管理
ReactRouterではそれぞれのコンポーネントでルートを管理していたが、
Pages内のフォルダディレクトリで管理できるようになるメリットがある。
PagesフォルダはNextCreateApp時に追加されるので、これを使用する。
また、ルーティング管理のために特別な名称があり、
index.** というファイル名は”/”を表しており、
_**.**というようにアンダーバーから始まる場合はルーティングされず
ルーティング不要なファイルに使用されている。(_app.jsなど)
[**].**とした場合はパラメータを表し、
[…**].**とした場合は複数のパラメータを受け取る。

|階層1|階層2|階層3|
|—-|—-|—-|
|Pages|_app.js|
||index.js|
||main|index.js|
|||content.js|
|||[articleId].js|

【ReactNative】FlatList自体のタップを判別する

# 目次
[1.やりたいこと](#1-やりたいこと)
[2.起きていた問題](#2-起きていた問題)
[3.原因](#3-原因)
[4.解決策](#4-解決策)
[5.まとめ](#5-まとめ)

# 1. やりたいこと
赤枠内の青の部分を「タップした時だけ」イベントを発火させたい
スクロールされた場合はタップと判定したくない
青部分をタップしたときにキーボードを非表示にするという処理をしたい。

# 2. 起きていた問題
FlatListのonPressやonTouchEndやonTouchStartを使用して、
普通にタップのイベントを拾い処理を行おうとしたが、
単純に上記イベントを契機とするとスクロールした際にもイベントが発火してしまう問題が発生していました。

# 3. 原因
おそらくFlatList自体をタップした際