JavaScript関連のことを調べてみた

kintoneルックアップフィールドでアクションボタンで入力したにも関わらず”[取得]を押し、参照先からデータを取得してください。”エラーが発生する問題の自動入力拡張で解決した

# はじめに

## 今回の要約

– kintoneには、他のアプリのレコードから自動的に値を参照取得できる「ルックアップ」の機能がある
– kintoneには、元アプリのレコードが持つ値を参照しながら、他アプリのレコードを新規作成できる「アクションボタン」の機能がある
– 「アクションボタン」で「他アプリのルックアップフィールド」の値を入力してレコードを新規作成することはできるが、値が自明であるにも関わらず、「自動で取得」ができない
– そこで、レコード新規作成・編集時に、「すでにルックアップフィールドに値が入力されている」とき、「自動で値を取得する」機能をjavascriptで実装しました。
– 複数のルックアップフィールドに対応します。

## 作成したソースコード
https://github.com/iamakawa/kintone_lookup_autoget/blob/main/kintone_lookup_autoget.js

“`javascript:kintone_lookup_autoget.js
(function() {
‘use strict’

PWA Safe Area が取得できない。毎回０が返ってくる。

Safe areaに関する記事自体は死ぬほどあると思いますが、ピンポイントでこの問題に触れてる記事は少なかった気がするのでメモを兼ねて。

## おさらい

最近のiPhoneやAndroidでは画面下部にホームバーと呼ばれる横棒の操作領域が設けられている端末が多く、この操作領域として確保されるべきエリアをセーフエリアと呼びます。

(Google画像検索より)

Webアプリやサイト開発の際、これを考慮せずスタイルを組んでしまうとホームバーが干渉する悲しい見た目になってしまいます。

そこでCSSを使って下に一定の余白を設けるわけですが、多くのサイトでは「`env`でセーフエリアの余白値を取得できるよ」と言っていますが、自分の端末(iOS17, iPhone15 Pro)では0が返ってきてしまいだめでした。

“`css
padding-bo

plunkerでテトリス

# 概要
Plunkerでテトリスやってみた。

# 参考にしたページ

https://qiita.com/oyoyo_oyoyo/items/fb3704c5377a24ad1c5c

# 写真


# 成果物

https://embed.plnkr.co/plunk/9q7hIUIliptK8aNR

以上。

【個人開発】野球クイズアプリのMVP

## はじめに
以前こちらの記事で、野球クイズアプリの個人開発を始めると宣言していました。

目標期日はすでにオーバーしていますが、MVPは完成したので共有しておきます。

このアプリでは野球に関する問題に対し、選択肢が4つ表示され、ポイントが加算されていきます。

https://qiita.com/Yuzaburo/items/946bcabab4df9c206a60

## 問題データ

MySQLと連携して問題を用意…というのも将来的には考えています。

しかし配列の操作に慣れるために、まずは事前にオブジェクトの配列を用意することにしました。

“`javascript: quizdata.js
const quizData = [
{
question: “日本はWBCで何回優勝している？”,
choices: [“1回”, “2回”, “3回”, “4回”],
answer: “3回”
},

{
question: “日本のプロ野球は何球団ある？”,
choices: [“10球団”,

プリミティブ型執着（「良いコード悪いコードで学ぶ設計入門」復習）

# 背景
「良いコード悪いコードで学ぶ設計入門」の復習の為です。TypeScriptで記述します。
今回は「プリミティブ型執着」についてです。

# プリミティブ型とは

https://developer.mozilla.org/ja/docs/Glossary/Primitive

プリミティブ (primitive、プリミティブ値、プリミティブデータ型) はオブジェクトでなく、メソッドを持たないデータのことです

number型、string型、boolean型等です。

# プリミティブ型執着とは
プリミティブ型を乱用したコードのことを言います。
以下の記事での定義も引用させて頂きます。

https://qiita.com/arakaji/items/eb8a93cac1d8e83d53fc

>ドメインの概念を表すのに基本データ型を用いること
>例
>- メッセージを表すのに文字列を使う
>- 金額を表すのに整数を使う

今回の例では郵便番号と住所を扱います。

“`typescript:Address.ts
const fetchZipcodeByGoogleMapLi

Chrome で利用可能なカメラの解像度・フレームレートやデバイス名を手軽に確認する（＋余談）：「chrome://media-internals/」

Chrome でカメラ画像を入力としたプログラムを書くことが良くあります。

自分がよく使うものだと、例えば [p5.js の createCapture()](https://p5js.org/reference/#/p5/createCapture)　や、JavaScript で扱う方法の 1つの [MediaDevices の getUserMedia() メソッド](https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia)を使った方法です。

そのカメラ画像を使う際に、入力で利用するカメラの解像度やフレームレートはどんな値でも使えるわけではなく、カメラごとに決まった値があります。

それを Chrome上で簡単に確認する方法の 1つが、今回の「chrome://media-internals/」を使った方法です。

## 使い方
使い方は簡単で、Chrome の アドレスバーに「chrome://media-internals/」と入力して、その後に「Video Captureタブ」を選択す

サイトレイアウトを可視化するJavascript

WEBサイトの幅や高さを可視化するスクリプトです。

“`Javascript
const maskOverlay = document.createElement(‘div’);
maskOverlay.style.cssText = ‘position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9998; pointer-events: none;’;
document.body.appendChild(maskOverlay);

const layoutOverlay = document.createElement(‘div’);
layoutOverlay.style.cssText = ‘position: fixed; background-color: #fff; border: 1px solid #ccc; padding: 5px; z-index: 9999; pointer-events: none;

QRコードを印刷　HTML＋JavaScript on CakePHP5

CakePHP5 を只今使用中。

### QRコードはこちらのライブラリで。
https://davidshimjs.github.io/qrcodejs/

58㎜幅のレシートプリンタが接続されている想定です。

### 印刷ボタン（呼び出す側）
“`
Url->build(‘/kegs/qr/’ . $ledger->keg) ?>”
>

“`
単純に _blank でリンクを張ります。

### 印刷ページ（呼び出される側）
“`
disableAutoLayout();
?>

独自プレイヤー(video)でHLS.JS配信とかで再生が詰まった(?)時のゴニョゴニョのやつ

こういうやつ。再生中によく出るやつ。

HLSとかプレイヤーを自分でゴニョゴニョ実装してた時、個人的にすげぇ困ったのでメモる。
HLSのやり方は https://stream.77lab.cloud のソースを開発者ツールで見てくれたらいいよ。
今回はこの「ロード中だお少し待て」の探知方法を書くので。

こんなVIDEOタグを使っている前提だお:
“`

“`
したが再生が詰まった時の

“`
VIDEO_EL = document.getElementById(“VIDEO”); //VIDEOタグを取得するお

VIDEO_EL.addEventListener(‘waiting’,

【JavaScript】オブジェクトをマージする方法

## スプレッド構文

“`js
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { d: 4, e: 5, f: 6 };
const result = { …obj1, …obj2 };

console.log(result);
// => { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }
“`

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

## Object.assign()

“`js
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { d: 4, e: 5, f: 6 };
Object.assign(obj1, obj2);

console.log(obj1);
// => { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }
“`

https://developer.moz

NodeからBigQueryアクセス

# 1. はじめに
Reactでサービスを作るにあたって、そのログをBigQueryへ格納しようと思います。なので、サーバー側のアプリケーションからBQへの、接続の技術検証です。
GCPの公式リファレンス（ [Node.js client library  |  Google Cloud](https://cloud.google.com/nodejs/docs/reference/bigquery/latest) ）を参考にし、イチから構築します。

ソースは下記にあります。

https://github.com/yo16/react_prac_using_bq

# 2. 準備
## 2.1. サーバーアプリを作成
あるURLを指定されたら、BigQueryへInsertするサーバーアプリを作ります。でもその部分は後で実装するとして、まずはexpressで超単純な普通のWebサーバー「log_server」を作ります。
– 参考
– Express公式のチュートリアル（express-generatorを使わないシンプル版）
– [Installing Express](h

イベント処理

## DOM操作におけるイベント処理とは
DOM操作におけるイベントとは、ブラウザを利用する以下のような**ユーザーの行動**のことを指す。
* 「ボタンをクリックしたとき」
* 「（横線3本のアイコン）をクリックしたとき」
* 「画面をスクロールしたとき」など、
→　**ユーザーの行動に合わせて、あらかじめプログラムしていたDOM操作を行うのがイベント処理。**

## ボタンを押すとテキストが表示される処理
現状　「ポチッと！」のボタンがひとつだけ。
#### HTMLコードの追加
ボタンをもうひとつ作成。
![スクリーンショット 2024-02-02 14.43.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com

Qiitaコメント欄の特定ユーザを非表示にしよう！

### 0.はじめに
僕含めた新米エンジニアはQiitaのコメント欄で傷つくことも多いだろう。
だが、Qiitaにはコメント欄のきつい言葉を吐くユーザーを非表示にすることはできる機能はない..。
そこでだ！
君も僕が作ったJavaScriptをChromeにいれて快適にQiitaライフを送ろうじゃないか！

### 1.ScriptAutoRunnerをダウンロードしよう！
※[ScriptAutoRunner](https://chromewebstore.google.com/detail/scriptautorunner/gpgjofmpmjjopcogjgdldidobhmjmdbm
)とはChromeのページに特定のjsを読み込ませることのできる拡張機能だ！リンクに飛んでさっそくいれてみよう！

### 2.下記jsをScriptAutoRunnerにいれよう！
ここは簡単だ！
下記jsをコピーしてScriptAutoRunnerにペーストするだけだ！

“`JavaScript
(() => {

/*——————▼拡張機能を

DOM

## DOM（Document Object Model）
HTMLドキュメントをオブジェクトのように扱える仕組み。

### DOM操作の仕組み

ブラウザがHTMLファイルを読み込むと、自動的にDOMツリーを生成する
↓
DOMツリーが生成されると、documentオブジェクトが使えるようになる
↓
documentオブジェクトを使うと、JavaScriptでDOM操作ができる

### 主なメソッド4種類

#### 1 `getElementById()`
：HTML要素をidで取得する
(idは同じHTML内で1回しか設定できない固有の値なので、取得できるHTML要素も当然1つ)
“`javascript
// HTML要素をidで取得し、中身を出力する
console.log(document.getElementById(‘first-list’));
“`
#### 2 `getElementsByClassName()`
：HTML要素をclassで取得する(一覧でHTMLcollectionとして配列風に表示されるので1つずつ取り出したい場合はfor文

rex0220 プラグインのスペイン語対応

kintone がスペイン語対応したということで、プラグインのスペイン語対応をchatGPT で行ってみます。

# 概要

kintone が2023年12月に、スペイン語対応したということで、rex0220 プラグインのスペイン語対応を検討します。

>[2023年12月版 主なアップデート 言語設定 スペイン語を選択可能に](https://kintone.cybozu.co.jp/update/main/2023-12.html#point3)

charGPT で、rex0220 プラグインの多言語対応用メッセージにスペイン語を追加します。
JavaScript のコードに、スペイン語対応を追加してくれるので楽ですね。

# rex0220 プラグインの多言語対応

rex0220 プラグインの多言語対応は、下記のようにメッセージを定義しています。

“`.js
M15MSG01: {
ja: ‘選択’,
en: ‘Choice’,
zh: ‘选择’,
},

複数のboolean型の処理

– [ ] isA
– [ ] isB
– [ ] isC
– [ ] isD

上記のような複数のチェックボックスの条件を組み合わせて複雑な条件分岐を組む必要があったので、個人的メモ。

“`js
// boolean変数をビットに変換
var condition =
(isA ? 1 : 0) << 3 | (isB ? 1 : 0) << 2 | (isC ? 1 : 0) << 1 | (isD ? 1 : 0); switch (condition) { case 0b1000: // isA && !isB && !isC && !isD break; case 0b1010: // isA && !isB && isC && !isD break; default: // その他 } ``` ビット型に変換することで、複数の条件が`0bABCD`という見た目でもわかりやすい形にかわるため、条件の整理がしやすくなった。

[GAS + Line Notify] 保育園の登園メールが来ないときにLINE通知する

# きっかけ
娘が通っている保育園では、毎朝登園したときに登園通知がきます。
（保護者が登園時にタブレットでボタンを押す -> 連携アプリからPUSH通知とメールが来る）
ただ、仮に車に置き去り…なんてことがあれば、通知が来ないわけで。 **通知が来ないことに気づく** って私には難しいと思っていたんです。

そんな時、こちらの素晴らしいNoteをみて、これを応用したら **通知が来ないことの通知** を作れそうだなと思ったので作ってみました。

https://note.com/m316jp2/n/n284e29688ffd?sub_rt=share_h

# 準備
このあたりの準備が必要ですが、上記のNoteに詳しく記載があったので、ここでは省略します。
異なるのはスクリプトと、実行時間(毎分ではなく毎朝9~10時)くらいです。

– Gmailで登園メールにラベルを付ける。（今回は「保育園入室」というラベル）
– Line Notifyでアクセストークンの発行してLINEグループに紐づける。
– GoogleDriveからGoogle Apps Scriptを立ち上げる。

#

JSのPromiseではresolve, rejectでは処理が終わらないという話

resolve, rejectでは処理が終わらず、returnの代わりには使えないため注意が必要です。

例えば以下のコードを実行すると、どうなるでしょうか？

“` javascript
const flag = true;
const promise = new Promise((resolve, reject) => {
if(flag) {
console.log(“成功への道”);
resolve(“成功！”);
}
console.log(“失敗への道”);
reject(“失敗”);
});

promise
.then((value)=>console.log(`promise関数実行完了:${value}`))
.catch((value)=>console.log(`promise関数実行失敗:${value}`));
“`

consoleには次のように表示されます。
“`
成功への道
失敗への道
promise関数実行完了:成功！
“`

resolveした後も処理は止まらず、reject関数も呼ばれてしまいます。

た

JavaScript Progateとスキルチェック問題集　メモ

JavaScript Progateとスキルチェック問題集

スキルチェック問題集
・forEachはfor文の簡素版。indexや配列自体をループさせることもできる。欠落した要素を無視する特性もある。
・let,const,varはそれぞれ値の宣言と代入を行うキーワード。基本的にvarは使わずにconstとletを使う。constとletは値の再宣言はできないが値の再代入はできる。ただし、letはオブジェクトもしくは配列自体の再代入が可能だが、constはオブジェクトもしくは配列内の要素・プロパティの変更しかできない。
変数キーワード種類
変数キーワード 再宣言 再代入
const ✖︎ ✖︎
let ✖︎ ○
var(非推奨) ○ ○
値が数値や文字列の場合は後に代入した値も時系列的に処理されるが、それ以外のオブジェクトや配列に対して代入を行う場合は最終的に代入された値が適用される。
var変数の巻き上げ(ホイスティング)が起きたときには宣言のみ先頭で行われ代入は行われないため、巻き上げ時の値はundefinedが出力される。
・while文は、ループの継続条件が事前には明確でない

短絡評価をif文で書き直してみた

# はじめに
短絡表現について学習しましたが、「これってif文だとどう書くんだっけ？」と思い、書き直してみました。

言語はJavaScriptを使用しています。

# `&&` 演算子

`&&`演算子は、条件が真のときにのみ後続の処理を行いたい場合に使われます。

**短絡評価の例:**

“`javascript
condition && doSomething();
“`

この式は、`condition`が真（truthy）の場合にのみ`doSomething()`関数を実行します。

**if文で書き換える**

“`javascript
if (condition) {
doSomething();
}
“`

# `||` 演算子
`||`演算子は条件が偽のときにのみ処理を行いたい場合に使われます。

**短絡評価の例:**

“`javascript
condition || doSomething();
“`

この式は、`condition`が偽（falsy）の場合にのみ`doSomething()`関数を実行します。

**if文